/* @grammaire v2
 *
 * PAGES DE CONTACT — ce qui reste en propre une fois la grammaire employee.
 *
 * Quatre pages, une feuille : le choix (`/contact`), le choix du centre
 * (`/contact/cesu`), le formulaire (`/contact/presse`, `/contact/autre`,
 * `/contact/cesu/{slug}`) et la confirmation (`/contact/merci`).
 *
 * ─── Ce qui a disparu, et pourquoi la feuille est passee de 1 123 a ~260
 * lignes ───
 *
 * Elle etait la feuille FOURRE-TOUT du depot. Treize gabarits la chargeaient,
 * pour trois raisons sans rapport :
 *
 *   · six pour `.contact-form*`, c'est-a-dire une SECONDE ecriture complete du
 *     champ de formulaire (intitule, controle, aide, erreur, select deroulant
 *     entier), qui avait diverge de `form-field.css` sur le rembourrage, le
 *     rayon et l'anneau de focus. Partie dans `@ancesu/grammar/form-layout.css`
 *     pour ce qui restait utile, morte pour le reste ;
 *   · quatre (404, 403, ressource protegee, acces refuse) pour `.contact-page`,
 *     dont le SEUL apport etait un rembourrage vertical — toute sa famille
 *     `contact-page__*` (conteneur, en-tete, deux colonnes, rail, titre) etait
 *     orpheline depuis longtemps. Repris par `.login-page` dans
 *     `zones/member-login.css` ;
 *   · deux briques PARTAGEES qui portaient le nom de cette page :
 *     `_submit_button` emettait `.contact-form__submit` (un bouton entierement
 *     redessine, qui n'etait pas `.btn`) et `_confirmation_state` emettait
 *     `.contact-form__confirmation*`. Les deux vivent desormais dans la
 *     grammaire, sous des noms qui ne mentent pas sur leur domaine.
 *
 * Le motif est celui que `design-system.md` decrit pour `--evt-scrim` et pour
 * le prefixe de `_minisite_topbar` : un objet partage nomme d'apres son
 * PREMIER appelant condamne sa propre reutilisation, parce que le suivant ne
 * le cherche pas la — il le reecrit.
 *
 * ─── Ce que la refonte en PAGES a retire en plus ───
 *
 * Le selecteur de CESU de l'automate a disparu — `ctc-picker*` : deux listes
 * de suggestions, un rouet d'attente, un second rideau depliant, trois listes
 * pour un seul choix et rien du tout sans script. Le choix du centre est
 * desormais une page serveur avec une recherche `?q=`, et sa liste porte
 * `ctc-cesu*` (le NOM est reemploye, l'objet n'est pas le meme : c'est une
 * entree de liste, plus un rappel de selection). Le rappel du centre retenu
 * passe par `_titled_card`, et les en-tetes d'etape (`ctc-step__*`) ont
 * disparu aussi : une page a un titre, pas une etape.
 *
 * `cesu` et non `centre` : l'objet s'appelle `cesu` partout ailleurs
 * (`cesu-archive__item`, `data-cesu-card`, `.directory-hub__cesu`, renomme
 * pour cette raison exacte). Deux mots pour une chose coutent ce que coute
 * une base a deux langues — cf. `capabilities/naming.md`.
 *
 * PREFIXE `ctc-` : court, et surtout DIFFERENT de `contact-`, qui reste
 * employe ailleurs (`directory-contact`, `cesu-contact-layout`). Deux familles
 * qui commencent pareil finissent par se disputer un selecteur.
 */

/* ══ La page ══════════════════════════════════════════════════════════ */

/* AUCUNE MARGE HAUTE, et c'est mesure. L'en-tete en surface carte porte deja
   `padding-bottom: 24px` ; y ajouter `--rhythm-block` faisait 72 px entre la
   derniere ligne du chapo et la premiere carte. Les deux pages d'adhesion,
   batties sur le meme en-tete, mesurent 0 px a cet endroit — c'etait donc
   `/contact` qui derivait, pas elles.

   AUCUNE MARGE BASSE non plus : le bandeau d'abonnement porte deja la sienne.
   Mesure du 2026-09-02 — `/adhesion` rend 0 px entre son dernier bloc et la
   bande, `/contact` en rendait 48. Meme derive qu'en haut, a l'autre bout. */
.ctc-page {
    margin-bottom: 0;
}

/* La confirmation n'a pas de colonne d'appui : elle se borne a la mesure de
   lecture et se centre, plutot que de courir sur 1 216 px pour trois lignes. */
.ctc-page--narrow {
    max-width: 46rem;
}

/* ══ Les deux colonnes ════════════════════════════════════════════════
   Meme grille que le flux d'adhesion (`zones/adhesion-flow.css`), aux memes
   valeurs, et c'est voulu : ce sont deux formulaires publics flanques d'une
   colonne d'appui, et l'utilisateur passe de l'un a l'autre. */

.ctc-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--card-gap);
    align-items: start;
}

.ctc-layout__main,
.ctc-layout__aside {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--card-gap);
}

@media (width >= 64em) {
    .ctc-layout {
        grid-template-columns: minmax(0, 1fr) 21.25rem;
        /* MEME ECART QUE LA VERTICALE : a gouttiere plus large que l'ecart
           entre les cartes de la colonne, la page porte deux grilles au lieu
           d'une. */
        gap: var(--card-gap);
    }

    /* COLLANTE, comme la colonne d'appui de l'adhesion : sans cela, « ce qui
       suit l'envoi » et les coordonnees sortent de l'ecran au moment ou l'on
       hesite a envoyer. */
    .ctc-layout__aside {
        position: sticky;
        top: var(--spacing-2xl);
    }
}

/* ══ Les quatre destinations (`/contact`) ═════════════════════════════
   PAS DE CARTE AUTOUR : quatre cartes posees dans une carte dessinent un
   cadre dans un cadre, et le premier n'apprend rien. */

.ctc-choices {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--spacing-sm);
    list-style: none;
    margin: 0;
    padding: 0;
}

@media (width >= 48em) {
    .ctc-choices {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--spacing-md);
        /* LES QUATRE PAVES A LA MEME HAUTEUR, pas seulement ceux d'une meme
           rangee. `height: 100%` sur le pave n'egalise QUE sa rangee : les
           lignes implicites se dimensionnent l'une apres l'autre, et la
           mesure le disait — 140 140 puis 118 118, un decrochage de 22 px au
           milieu du bloc qui se lit comme deux groupes. `1fr` porte sur les
           rangees, donc sur les quatre.

           Borne au palier a DEUX colonnes : en colonne unique il n'y a pas de
           rangee a egaliser, et `1fr` etirerait les quatre a la hauteur du
           plus long — du vide sous trois paves sur un telephone. */
        grid-auto-rows: 1fr;
    }
}

.ctc-choice {
    display: flex;
    /* `stretch` ET NON `flex-start` : c'est ce qui donne au corps la HAUTEUR
       de la carte, sans quoi le `margin-top: auto` de la mention n'a aucun
       espace libre a absorber et ne pousse rien. Mesure avant correction :
       les mentions de la premiere rangee finissaient a 578 et 601 px, soit
       23 px de decalage entre deux cartes cote a cote.

       Le pictogramme et le chevron se re-epinglent en haut individuellement :
       eux doivent rester a hauteur du titre. */
    align-items: stretch;
    gap: var(--spacing-md);
    width: 100%;
    height: 100%;
    padding: var(--spacing-lg);
    text-decoration: none;
    background: var(--surface-1);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    transition:
        border-color var(--transition-fast),
        background-color var(--transition-fast),
        box-shadow var(--transition-fast);
}

.ctc-choice:hover {
    border-color: var(--color-primary);
    background: var(--hover-tint);
    box-shadow: var(--shadow-sm);
}

.ctc-choice__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    align-self: flex-start;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: var(--radius-md);
    background: var(--color-primary-light);
    color: var(--color-primary-dark);
}

.ctc-choice__body {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2xs);
    /* Sans cela, un pave de flex ne descend pas sous la largeur de son
       contenu et la phrase pousse la carte hors de sa colonne. */
    min-width: 0;
}

.ctc-choice__title {
    font-family: var(--font-title);
    font-size: var(--font-size-base);
    font-weight: 700;
    line-height: var(--line-height-tight);
    color: var(--color-text);
}

.ctc-choice__text {
    font-size: var(--font-size-sm);
    line-height: var(--line-height-base);
    color: var(--color-text-light);
}

/* CE QUE LA DESTINATION PRODUIT, en sur-titre de pied : « message transmis au
   centre », « reponse du secretariat ». C'est l'information qui manquait au
   choix — quatre entrees qui se ressemblent, et rien ne disait ou allait le
   message ni qui repondrait. */
/* `margin-top: auto` POUSSE LA MENTION AU PIED de la carte, et c'est ce qui
   RECUPERE le vide que `grid-auto-rows: 1fr` cree. Les quatre paves font 141 px
   pour des textes de 69, 91, 69 et 69 : sans cela, trois cartes sur quatre
   pendaient 24 px de blanc sous leur derniere ligne. Poussee au pied, la
   mention s'aligne d'une carte a l'autre et le vide devient une gouttiere
   plutot qu'un residu. */
.ctc-choice__note {
    margin-top: auto;
    padding-top: var(--spacing-2xs);
    font-family: var(--font-sans);
    font-size: var(--eyebrow-size);
    font-weight: var(--eyebrow-weight);
    letter-spacing: var(--eyebrow-tracking);
    text-transform: uppercase;
    color: var(--color-primary);
}

.ctc-choice__chevron {
    flex: none;
    align-self: flex-start;
    /* Le chevron descend a hauteur du TITRE, pas du centre du pave : centre,
       il flottait au milieu d'une phrase de deux lignes sans se rattacher a
       rien. */
    margin-top: 0.125rem;
    margin-left: auto;
    color: var(--color-text-light);
    transition: transform var(--transition-fast), color var(--transition-fast);
}

.ctc-choice:hover .ctc-choice__chevron {
    color: var(--color-primary);
    transform: translateX(3px);
}

@media (prefers-reduced-motion: reduce) {
    .ctc-choice__chevron,
    .ctc-choice:hover .ctc-choice__chevron {
        transition: none;
        transform: none;
    }
}

/* Sur `/contact`, les quatre destinations prennent la LARGEUR ENTIERE : la
   page n'a pas de colonne d'appui, parce qu'elle n'a rien a appuyer. Elle en
   a eu une, et la mesure a tranche — quatre paves compacts contre trois
   cartes ouvraient 600 px de vide sous la colonne de gauche. A quatre
   colonnes ils deviendraient des vignettes ; deux rangees de deux gardent la
   phrase lisible. */
@media (width >= 64em) {
    .ctc-choices--wide {
        gap: var(--card-gap);
    }
}

/* ══ Le rappel de bas de page (`/contact`) ════════════════════════════
   Les trois cartes que la colonne d'appui porte ailleurs, posees en rangee
   sous les destinations. Meme brique (`_titled_card`), meme ecart que la
   grille au-dessus : l'oeil compare les deux, et deux ecarts differents se
   lisent comme deux blocs sans rapport. */

/* `--card-gap` ET NON `--rhythm-block`, exactement comme `adhesion-flow.css`
   le documente pour ses propres blocs : ces pages sont des MOSAIQUES DE
   CARTES, pas des successions de sections de prose. L'oeil compare l'ecart
   VERTICAL entre deux rangees a l'ecart HORIZONTAL de la meme grille — a 48
   contre 24, les deux rangees se lisent comme deux blocs sans rapport.

   `--rhythm-block` reste le jeton juste pour une page de LECTURE, ou ce qui
   se suit n'est pas de meme nature. Ici tout est de meme nature. */
.ctc-appui {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--card-gap);
    margin-top: var(--card-gap);
}

@media (width >= 48em) {
    .ctc-appui {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (width >= 64em) {
    .ctc-appui {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* ══ La carte de contenu ══════════════════════════════════════════════ */

.ctc-card {
    display: flex;
    flex-direction: column;
    gap: var(--rhythm-section);
}

/* ══ Choisir son centre (`/contact/cesu`) ═════════════════════════════ */

/* La brique `_search_field` rend son propre formulaire et sa propre rangee ;
   il ne reste a la zone qu'a la separer de ce qui suit. `.ctc-search__row` et
   la media query qui la remettait en colonne sous 40em ont ete retirees avec
   le formulaire ecrit a la main : la brique porte deja ce comportement. */
.ctc-search {
    margin-bottom: var(--spacing-xs);
}

.ctc-count {
    margin: 0;
    font-size: var(--font-size-sm);
    color: var(--color-text-light);
}

.ctc-cesu-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2xs);
    list-style: none;
    margin: 0;
    padding: 0;
}

.ctc-cesu {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-sm) var(--spacing-md);
    text-decoration: none;
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    transition: background-color var(--transition-fast), border-color var(--transition-fast);
}

.ctc-cesu:hover {
    background: var(--hover-tint);
    border-color: var(--color-border);
}

.ctc-cesu__body {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--spacing-2xs) var(--spacing-sm);
    min-width: 0;
}

.ctc-cesu__name {
    font-weight: 600;
    color: var(--color-text);
}

.ctc-cesu__place {
    font-size: var(--font-size-sm);
    color: var(--color-text-light);
}

.ctc-cesu__chevron {
    flex: none;
    margin-left: auto;
    color: var(--color-text-light);
}

.ctc-cesu:hover .ctc-cesu__chevron {
    color: var(--color-primary);
}

/* `_empty_state` retombe par defaut sur `content-list__empty`, qui vit dans
   `zones/content.css` — une feuille que ces pages ne chargent pas. D'ou une
   classe propre, passee explicitement a l'appel. */
.ctc-empty {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-sm);
    padding: var(--spacing-xl);
    background: var(--surface-3);
    border-radius: var(--radius-md);
}

.ctc-empty p {
    margin: 0;
    max-width: var(--measure-prose);
    color: var(--color-text-light);
}

.ctc-empty p:first-of-type {
    font-family: var(--font-title);
    font-size: var(--font-size-lg);
    font-weight: 700;
    color: var(--color-text);
}

/* ══ Le formulaire ════════════════════════════════════════════════════
   La coquille, les sections, le pot de miel et la rangee d'actions viennent
   tous de `@ancesu/grammar/form-layout.css` : il ne reste que le captcha. */

/* Le widget ALTCHA se pose au-dessus de la mention legale, dans la meme
   section : il fait partie de l'envoi, pas des champs. */
.ctc-form__captcha {
    min-width: 0;
}

/* ══ Colonne d'appui ══════════════════════════════════════════════════ */

/* « Ce qui suit » : trois etapes numerotees. Les chiffres sont ceux du
   compteur natif de la liste ordonnee — les recopier a la main les
   desynchroniserait le jour ou une etape est ajoutee. */
.ctc-steps {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: ctc-step;
}

.ctc-steps__item {
    display: flex;
    gap: var(--spacing-sm);
    font-size: var(--font-size-sm);
    line-height: var(--line-height-base);
    color: var(--color-text-light);
    counter-increment: ctc-step;
}

.ctc-steps__item::before {
    content: counter(ctc-step);
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: var(--radius-pill);
    background: var(--color-primary-light);
    font-family: var(--font-data);
    font-size: var(--font-size-xs);
    font-weight: 700;
    color: var(--color-primary-dark);
}

/* Les liens d'une carte d'appui : une PILE, jamais une phrase. Trois
   destinations sur une meme ligne se lisent comme une enumeration, donc comme
   du texte, et on ne les clique pas. */
.ctc-links {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-xs);
    margin: var(--spacing-md) 0 0;
}

.ctc-address {
    display: block;
    margin-top: var(--spacing-md);
    font-style: normal;
    font-size: var(--font-size-sm);
    line-height: var(--line-height-base);
    color: var(--color-text-light);
}

.ctc-socials {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
    margin-top: var(--spacing-md);
}