/*
 * Retouches pour téléphone (passe responsive du 14/10/2026). Chargée en
 * dernier, et seulement sous 48rem : l'ordinateur et la tablette en paysage
 * ne bougent pas. Ce qui se règle ici :
 * — des titres et un chapô à la mesure d'un écran de 390 px ;
 * — des boutons d'action pleine largeur et de même taille, empilés ;
 * — les chiffres du héros en deux colonnes régulières ;
 * — les cartes à retourner, à plat (titre et texte lisibles d'emblée : au
 *   doigt, on ne survole pas) ;
 * — des cartes de liste plus compactes, un anneau des offres qui tient
 *   dans l'écran.
 */

/* Les titres en dégradé gardent leur couleur une fois découpés en lignes
   pour l'animation : le dégradé du parent ne traverse pas les lignes
   masquées (.ligne-mask > .ligne), le texte devenait transparent. Chaque
   ligne reprend donc le dégradé. Vaut pour toutes les tailles. */
.methode .entete-section h2 .ligne {
    background: linear-gradient(100deg, #fff 40%, #9fdcff);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.appel__titre .ligne {
    background: linear-gradient(100deg, #fff 45%, #9fdcff);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

@media (max-width: 47.99rem) {
    /* — Typographie — */
    .tete-page__titre.t-2xl {
        font-size: clamp(1.75rem, 7.4vw, 2.1rem);
        line-height: 1.12;
    }

    .t-xl {
        font-size: clamp(1.45rem, 6.2vw, 1.75rem);
    }

    .chapo,
    .tete-page__chapo {
        font-size: 1.0625rem;
        line-height: 1.55;
    }

    .tete-page {
        padding-block-end: 2rem;
    }

    /* — Boutons d'action : empilés, pleine largeur, même taille — */
    .tete-page .actions,
    .heros .actions,
    .appel__actions {
        flex-direction: column;
        align-items: stretch;
        gap: 0.75rem;
        inline-size: 100%;
    }

    .tete-page .actions > *,
    .heros .actions > *,
    .appel__actions > *,
    .tete-page .actions > :is(span, div) > .bouton,
    .heros .actions > :is(span, div) > .bouton {
        inline-size: 100%;
        justify-content: center;
    }

    .tete-page .actions > :is(span, div),
    .heros .actions > :is(span, div) {
        display: flex;
        flex-direction: column;
        gap: 0.75rem;
    }

    .bouton {
        padding: 0.9rem 1.25rem;
    }

    /* — Chiffres du héros : deux colonnes égales — */
    .heros__chiffres {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1.5rem 1rem;
    }

    /* — Cartes à retourner : à plat — */
    .retourne__aide {
        display: none;
    }

    .retourne__grille {
        gap: 0.75rem;
    }

    .retourne__carte {
        display: grid;
        block-size: auto;
        perspective: none;
        cursor: default;
        border: 1px solid rgb(15 8 65 / 0.08);
        border-radius: var(--rayon-lg);
        background: #fff;
        box-shadow: 0 14px 30px -26px rgb(15 8 65 / 0.45);
    }

    .retourne__face,
    .retourne__carte:is(:hover, :focus-visible, :focus-within) .retourne__face--recto,
    .retourne__carte:is(:hover, :focus-visible, :focus-within) .retourne__face--verso {
        position: static;
        transform: none;
        backface-visibility: visible;
        transition: none;
    }

    .retourne__face--recto {
        grid-template-columns: auto minmax(0, 1fr);
        grid-template-rows: auto;
        align-items: center;
        gap: 0.9rem;
        padding: 1.1rem 1.1rem 0.4rem;
        border: 0;
        background: none;
        box-shadow: none;
    }

    .retourne__numero,
    .retourne__tourner {
        display: none;
    }

    .retourne__picto {
        inline-size: 2.6rem;
        block-size: 2.6rem;
        border-radius: 0.75rem;
    }

    .retourne__picto .picto {
        inline-size: 1.35rem;
        block-size: 1.35rem;
    }

    .retourne__face--verso {
        align-content: start;
        padding: 0 1.1rem 1.1rem calc(1.1rem + 2.6rem + 0.9rem);
        background: none;
        color: var(--texte);
        box-shadow: none;
    }

    .retourne__face--verso .retourne__titre {
        display: none;
    }

    .retourne__texte,
    .retourne__texte a {
        color: var(--texte-doux);
    }

    /* Sur fond sombre, la carte garde ses couleurs claires. */
    .console .retourne__carte {
        border-color: rgb(255 255 255 / 0.12);
        background: rgb(255 255 255 / 0.04);
    }

    .console .retourne__titre {
        color: #fff;
    }

    .console .retourne__texte,
    .console .retourne__texte a {
        color: rgb(255 255 255 / 0.78);
    }

    /* — Cartes de liste plus compactes — */
    .fratrie__grille {
        gap: 0.75rem;
    }

    .fratrie__carte {
        grid-template-columns: auto minmax(0, 1fr);
        grid-template-rows: auto;
        column-gap: 0.9rem;
        row-gap: 0.35rem;
        padding: 1rem 1.1rem;
    }

    .fratrie__picto {
        grid-row: 1 / span 3;
        align-self: start;
        inline-size: 2.4rem;
        block-size: 2.4rem;
    }

    .fratrie__carte > :not(.fratrie__picto) {
        grid-column: 2;
    }

    /* — L'anneau des offres tient dans l'écran — */
    .anneau-offres__corps {
        --tuile-l: 5.2rem;
    }

    /* — Menu ouvert : l'en-tête garde un fond, la liste défile dessous sans s'y mêler — */
    .menu-ouvert .entete {
        background-color: var(--fond);
    }

    /* — Chiffres de « Qui sommes-nous » : une rangée de trois, sans filets — */
    .groupe__chiffres {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 1rem;
    }

    .groupe__chiffres li {
        padding: 0;
        border: 0;
    }

    .groupe__chiffres strong {
        font-size: clamp(1.5rem, 7vw, 2rem);
    }

    .groupe__chiffres span {
        font-size: 0.75rem; /* 12 px minimum (audit du 14/10/2026) */
    }

    /* — Listes de liens (communes, plan…) : des lignes resserrées — */
    .maillage__liste {
        gap: 0;
    }

    .maillage__liste a {
        padding-block: 0.7rem;
    }

    /* — Sections : un peu moins d'air entre deux blocs — */
    :root {
        --section-y: clamp(2.75rem, 7vh, 4rem);
    }
}

/* Très petit téléphone (320 px) : la loupe de l'en-tête cède sa place, pour
   que le bouton du menu reste à l'écran. */
@media (max-width: 22.5rem) {
    .entete__recherche {
        display: none;
    }
}