/* ==========================================================================
   Psy.Link — Page d'accueil (vitrine patients)
   Dépend de site.css (tokens, base, boutons, en-tête, pied de page).
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. Utilitaires
   -------------------------------------------------------------------------- */
/* Apparition au défilement (classe posée par JS) */
.anim {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .6s cubic-bezier(.22, .61, .36, 1), transform .6s cubic-bezier(.22, .61, .36, 1);
}

.anim.est-visible {
    opacity: 1;
    transform: none;
}

/* Avatar à initiales (utilisé par les avis patients, anonymes) */
.avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    flex: 0 0 54px;
    border-radius: 50%;
    background: var(--avatar-couleur, var(--vert));
    background-image: linear-gradient(140deg, rgba(255, 255, 255, .28), transparent 60%);
    color: #fff;
    font-weight: 800;
    font-size: 17px;
    letter-spacing: .02em;
    font-family: var(--ff-titre);
    box-shadow: 0 8px 18px -10px rgba(11, 87, 104, .7);
}

.avatar-sm {
    width: 42px;
    height: 42px;
    flex-basis: 42px;
    font-size: 14px;
}

.etoiles {
    color: var(--ambre);
    letter-spacing: .12em;
    font-size: 15px;
}

/* --------------------------------------------------------------------------
   1. Héros
   -------------------------------------------------------------------------- */
/* Aplat teal profond + lueurs : la barre de recherche blanche ressort dessus.
   La navbar passe en transparent au-dessus (voir body.entete-transparente). */
.heros {
    position: relative;
    /* L'en-tête sticky occupe une place dans le flux : on remonte le héros
       dessous pour que la navbar transparente se superpose à l'aplat sombre. */
    margin-top: calc(var(--entete-h) * -1);
    padding: calc(var(--entete-h) + 74px) 0 0;
    color: rgba(255, 255, 255, .82);
    border-radius: 0 0 44px 44px;
    /* Pas d'overflow:hidden ici : les listes d'autocomplétion de la barre de
       recherche doivent pouvoir dépasser sous l'aplat. Le rognage des lueurs
       est délégué à .heros-fond. */
    background:
        radial-gradient(880px 500px at 14% -6%, rgba(49, 169, 159, .55) 0%, rgba(49, 169, 159, 0) 62%),
        radial-gradient(700px 420px at 92% 22%, rgba(255, 174, 30, .17) 0%, rgba(255, 174, 30, 0) 62%),
        radial-gradient(1200px 700px at 50% 118%, rgba(37, 140, 140, .6) 0%, rgba(37, 140, 140, 0) 68%),
        linear-gradient(168deg, #094a59 0%, #0B5768 46%, #0e6a79 100%);
}

/* Calque qui rogne les lueurs, à la place de l'overflow du héros */
.heros-fond {
    position: absolute;
    inset: 0;
    overflow: hidden;
    border-radius: inherit;
    pointer-events: none;
}

.heros-tache {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: .55;
    pointer-events: none;
}

.heros-tache-1 {
    width: 420px;
    height: 420px;
    background: rgba(84, 214, 197, .45);
    top: -160px;
    left: -120px;
}

.heros-tache-2 {
    width: 340px;
    height: 340px;
    background: rgba(255, 174, 30, .32);
    top: 90px;
    right: -130px;
}

/* Déclinaison claire des éléments du héros sur fond sombre ------------------ */
.heros .pastille {
    background: rgba(255, 255, 255, .12);
    border-color: rgba(255, 255, 255, .24);
    color: #fff;
    box-shadow: none;
    backdrop-filter: blur(6px);
}

.mini-avatars img {
    border-color: rgba(255, 255, 255, .55);
}

.heros h1 {
    color: #fff;
}

/* Sur fond sombre, le surlignage devient un trait net sous les mots */
.heros .surligne::after {
    top: auto;
    bottom: -.04em;
    height: 7px;
    border-radius: 4px;
    background: linear-gradient(90deg, var(--ambre), #ffd27a);
}

.heros .suggestions-label {
    color: rgba(255, 255, 255, .6);
}

.heros .puce-suggestion {
    background: rgba(255, 255, 255, .1);
    border-color: rgba(255, 255, 255, .24);
    color: #fff;
}

.heros .puce-suggestion:hover {
    background: #fff;
    border-color: #fff;
    color: var(--teal);
}

.heros .suggestions-fleche {
    background: rgba(255, 255, 255, .16);
    border-color: rgba(255, 255, 255, .28);
    color: #fff;
    /* Le fondu s'arrête sous la flèche : on la décolle du bord pour laisser
       voir la puce s'effacer derrière elle. */
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.heros .suggestions-fleche:hover {
    background: #fff;
    border-color: #fff;
    color: var(--teal);
}

/* Écrans tactiles : on défile au doigt, les flèches n'ont pas lieu d'être. */
@media (hover: none),
(pointer: coarse) {
    .suggestions-fleche {
        display: none !important;
    }
}

/* À la souris, le rail s'attrape : le curseur l'annonce. */
@media (hover: hover) and (pointer: fine) {
    .suggestions-piste {
        cursor: grab;
    }
}

/* Deux colonnes : contenu à gauche, personnage détouré à droite */
.heros-grille {
    /* Marge basse du bloc texte : dégage la bande de chiffres qui remonte.
       L'illustration, elle, la traverse (margin-bottom négatif) pour rester
       collée au bas de l'aplat vert. */
    --marge-bas: 134px;
    position: relative;
    display: grid;
    /* La colonne de texte est un peu plus large que la moitié : c'est elle qui
       fixe la largeur de la barre de recherche, et le champ « Où ? » a besoin
       d'afficher « Boulogne-Billancourt » en entier. L'illustration est en
       `contain` et déborde à droite : la rétrécir la réduit, sans la rogner. */
    grid-template-columns: minmax(0, 1.16fr) minmax(0, .84fr);
    gap: 30px;
    align-items: center;
    padding-bottom: var(--marge-bas);
}

.heros-texte {
    position: relative;
    /* Au-dessus du personnage : la barre de recherche reste cliquable
       même si l'illustration déborde sur la colonne de gauche. */
    z-index: 3;
    min-width: 0;
}

.pastille {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    background: #fff;
    border: 1px solid var(--ligne);
    color: var(--teal);
    font-size: 13.5px;
    font-weight: 700;
    padding: 7px 18px 7px 8px;
    border-radius: var(--rayon-pill);
    box-shadow: var(--ombre-sm);
    margin-bottom: 18px;
}

.mini-avatars {
    display: inline-flex;
    align-items: center;
}

.mini-avatars img {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #fff;
    margin-right: -10px;
}

.mini-avatars img:last-child {
    margin-right: 0;
}

.heros h1 {
    font-size: clamp(28px, 2.9vw, 38px);
    font-weight: 700;
    letter-spacing: -.04em;
    line-height: 1.08;
    margin-bottom: 22px;
    position: relative;
    z-index: 1;
}

.heros .surligne::after {
    z-index: -1;
}

/* Barre de recherche ------------------------------------------------------- */
.barre-recherche {
    display: flex;
    align-items: stretch;
    gap: 6px;
    background: #fff;
    border: 1px solid var(--ligne);
    border-radius: var(--rayon-pill);
    padding: 5px 5px 5px 4px;
    box-shadow: 0 30px 60px -26px rgba(0, 0, 0, .55);
    max-width: 700px;
}

.champ {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1 1 0;
    min-width: 0;
    padding: 0 14px;
    position: relative;
}

/* Le champ « Où ? » prend un bon tiers : « Boulogne-Billancourt » ou
   « Aix-en-Provence » doivent tenir en entier une fois choisis, à côté du bouton
   de géolocalisation. Le champ de gauche garde la part majoritaire, il affiche
   des intitulés plus longs (« Thérapie comportementale dialectique »).
   L'ensemble reste rétractable pour ne pas étrangler la colonne du héros. */
.champ-ou {
    border-left: 1px solid var(--ligne);
    flex: 0 1 34%;
    max-width: 300px;
}

.champ-icone {
    width: 19px;
    height: 19px;
    flex: 0 0 19px;
    color: var(--vert);
}

.champ input {
    flex: 1 1 auto;
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
    font-family: var(--ff);
    font-size: 15.5px;
    color: var(--encre);
    padding: 7px 0;
}

.champ input::placeholder {
    color: var(--gris-clair);
}

.btn-geoloc {
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    border: 0;
    background: var(--vert-clair);
    border-radius: 50%;
    color: var(--teal);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background-color .16s ease;
}

.btn-geoloc svg {
    width: 16px;
    height: 16px;
}

.btn-geoloc:hover {
    background: var(--menthe);
}

.btn-geoloc.charge svg {
    animation: rotation 1s linear infinite;
}

@keyframes rotation {
    to {
        transform: rotate(360deg);
    }
}

.btn-rechercher {
    flex: 0 0 auto;
    padding: 10px 24px;
}

.btn-rechercher.charge {
    opacity: .65;
    pointer-events: none;
}

/* Bouton d'effacement du champ « Nom, spécialité… » */
.btn-vider {
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
    border: 0;
    padding: 0;
    background: var(--doux);
    border-radius: 50%;
    color: var(--gris);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background-color .16s ease, color .16s ease;
}

/* `display` de classe l'emporte sur le `[hidden] { display: none }` du
   navigateur : sans cette règle, la croix reste visible champ vide. */
.btn-vider[hidden] {
    display: none;
}

.btn-vider svg {
    width: 13px;
    height: 13px;
}

.btn-vider:hover {
    background: var(--menthe);
    color: var(--teal);
}

/* Champ dont la valeur correspond à une spécialité retenue */
.champ input.a-selection {
    font-weight: 600;
    color: var(--teal);
}

/* Listes d'autocomplétion --------------------------------------------------- */
.suggestions-liste {
    position: absolute;
    top: calc(100% + 14px);
    left: -8px;
    right: -8px;
    z-index: 20;
    max-height: 380px;
    overflow-y: auto;
    overscroll-behavior: contain;
    background: #fff;
    border: 1px solid var(--ligne);
    border-radius: var(--rayon);
    box-shadow: var(--ombre-lg), 0 2px 6px -2px rgba(11, 87, 104, .2);
    padding: 6px;
    text-align: left;
}

.suggestions-liste[hidden] {
    display: none;
}

/* Les champs sont étroits : les listes débordent de leur colonne pour rester
   lisibles. Celle de gauche s'étend vers la droite, celle de droite vers la
   gauche, afin de ne jamais sortir de l'écran. */
.champ-quoi .suggestions-liste {
    right: auto;
    min-width: min(430px, calc(100vw - 48px));
}

.champ-ou .suggestions-liste {
    left: auto;
    min-width: min(380px, calc(100vw - 48px));
}

.suggestions-groupe {
    font-size: 11.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--gris-clair);
    padding: 10px 12px 6px;
}

.suggestions-groupe:first-child {
    padding-top: 6px;
}

.suggestion {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
    border-radius: var(--rayon-sm);
    cursor: pointer;
    color: var(--encre);
    transition: background-color .12s ease;
}

.suggestion:hover,
.suggestion.est-active {
    background: var(--vert-clair);
}

.suggestion.est-vide {
    cursor: default;
    color: var(--gris);
    font-size: 14px;
    padding: 14px 12px;
}

.suggestion.est-vide:hover {
    background: transparent;
}

/* Message d'échec (géolocalisation refusée, position indisponible…) : il occupe
   la place d'une suggestion, avec un point d'exclamation en guise de pastille. */
.suggestion.est-erreur {
    align-items: flex-start;
    gap: 10px;
    color: var(--encre);
}

.suggestion.est-erreur::before {
    content: "!";
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
    margin-top: 1px;
    border-radius: 50%;
    background: var(--menthe);
    color: var(--vert-fonce);
    font-size: 13px;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.suggestion.est-chargement::before {
    content: "";
    width: 15px;
    height: 15px;
    flex: 0 0 15px;
    margin-right: 10px;
    border: 2px solid var(--menthe);
    border-top-color: var(--vert);
    border-radius: 50%;
    animation: rotation .7s linear infinite;
}

.suggestion-photo {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--doux);
}

.suggestion-pastille {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    border-radius: 50%;
    background: var(--menthe);
    color: var(--teal);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.suggestion-pastille svg {
    width: 18px;
    height: 18px;
}

/* Une teinte par famille de filtre : d'un coup d'œil on distingue un motif
   d'une approche ou d'un public, même sans lire l'intitulé du groupe. */
.suggestion-pastille-domaine {
    background: var(--menthe);
    color: var(--teal);
}

.suggestion-pastille-approche {
    background: var(--vert-clair);
    color: var(--vert-fonce);
}

.suggestion-pastille-public {
    background: #FFF2D9;
    color: #8a5a00;
}

/* « En visio » : première ligne de la liste du champ « Où ? ». Elle ne mène pas
   à une ville mais à la recherche nationale, d'où le traitement à part —
   pastille pleine, libellé en teal, filet de séparation avant les villes. */
.suggestion-visio {
    position: relative;
    background: var(--menthe);
    margin-bottom: 8px;
}

.suggestion-visio::after {
    content: "";
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: -4px;
    height: 1px;
    background: var(--ligne);
}

.suggestion-visio:hover,
.suggestion-visio.est-active {
    background: var(--vert-clair);
    box-shadow: inset 0 0 0 1.5px var(--vert);
}

.suggestion-visio .suggestion-titre {
    color: var(--teal);
    font-weight: 700;
}

.suggestion-pastille-visio {
    background: var(--vert-fonce);
    color: #fff;
}

.suggestion-pastille-visio svg {
    width: 20px;
    height: 20px;
}

.suggestion-textes {
    display: grid;
    min-width: 0;
}

.suggestion-titre {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--encre);
    min-width: 0;
}

/* Le nom est isolé dans son propre élément : sinon le <mark> deviendrait un
   item flex et le gap couperait le mot en deux. */
.suggestion-nom {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.suggestion-titre mark {
    background: transparent;
    color: var(--vert-fonce);
    font-weight: 800;
    padding: 0;
}

.suggestion-verifie {
    width: 15px;
    height: 15px;
    flex: 0 0 15px;
    color: var(--vert);
}

.suggestion-detail {
    font-size: 12.5px;
    line-height: 1.35;
    color: var(--gris);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.icone-loupe-mobile {
    display: none;
    width: 19px;
    height: 19px;
}

/* Suggestions -------------------------------------------------------------- */
.suggestions {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 16px;
    /* Le rail ne doit jamais élargir la colonne du héros */
    min-width: 0;
}

.suggestions-label {
    font-size: 13.5px;
    color: var(--gris-clair);
    font-weight: 600;
    flex: 0 0 auto;
}

/* Rail : la piste qui défile + les deux flèches posées par-dessus ses bords. */
.suggestions-rail {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
}

/* Piste défilante : une seule ligne, les fondus latéraux sont des masques —
   ils fonctionnent donc quel que soit le fond (aplat sombre du héros compris).
   Les deux largeurs de fondu sont pilotées par le script selon le défilement. */
.suggestions-piste {
    --fondu-gauche: 0px;
    --fondu-droite: 0px;
    display: flex;
    align-items: center;
    gap: 8px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -ms-overflow-style: none;
    /* Une pression sur une puce ne doit pas être capturée comme un défilement vertical */
    overscroll-behavior-x: contain;
    -webkit-mask-image: linear-gradient(90deg,
            transparent 0,
            #000 var(--fondu-gauche),
            #000 calc(100% - var(--fondu-droite)),
            transparent 100%);
    mask-image: linear-gradient(90deg,
            transparent 0,
            #000 var(--fondu-gauche),
            #000 calc(100% - var(--fondu-droite)),
            transparent 100%);
    transition: -webkit-mask-image .2s ease, mask-image .2s ease;
}

.suggestions-piste::-webkit-scrollbar {
    display: none;
}

/* Glisser-déposer à la souris : pendant le geste on coupe l'inertie et la
   sélection de texte, et le curseur passe en « main fermée ». */
.suggestions-piste.en-glissement {
    scroll-behavior: auto;
    cursor: grabbing;
    user-select: none;
}

.suggestions-piste.en-glissement .puce-suggestion {
    /* Un clic ne doit pas partir sur un lien à la fin d'un glissement */
    pointer-events: none;
}

.puce-suggestion {
    flex: 0 0 auto;
    white-space: nowrap;
    background: #fff;
    border: 1px solid var(--ligne);
    color: var(--teal);
    font-size: 13.5px;
    font-weight: 600;
    padding: 7px 14px;
    border-radius: var(--rayon-pill);
    transition: border-color .16s ease, background-color .16s ease, transform .16s ease;
}

.puce-suggestion:hover {
    border-color: var(--vert);
    background: var(--vert-clair);
    transform: translateY(-1px);
}

/* Flèches : même dessin que les puces, en rond, posées sur les extrémités.
   Elles ne sont affichées que s'il reste à défiler de ce côté (attribut hidden
   posé par le script), et jamais sur écran tactile. */
.suggestions-fleche {
    position: absolute;
    top: 50%;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0;
    transform: translateY(-50%);
    border: 1px solid var(--ligne);
    border-radius: 50%;
    background: #fff;
    color: var(--teal);
    cursor: pointer;
    transition: border-color .16s ease, background-color .16s ease, color .16s ease;
}

.suggestions-fleche svg {
    width: 15px;
    height: 15px;
}

.suggestions-fleche:hover {
    border-color: var(--vert);
    background: var(--vert-clair);
}

.suggestions-fleche[hidden] {
    display: none;
}

.suggestions-fleche-gauche {
    left: 0;
}

.suggestions-fleche-droite {
    right: 0;
}

/* Illustration : personnage détouré posé sur un simple cercle vert ----------
   Elle sort du conteneur pour venir coller au bord droit de l'écran, et se
   cale en bas de la grille — donc au bas exact de l'aplat vert. */
.heros-illustration {
    /* Distance entre le bord droit du conteneur et celui de l'écran */
    --debord: calc(max(0px, (100vw - 1180px) / 2) + 22px);
    position: relative;
    /* Pas de ratio imposé : l'illustration prend la hauteur de la colonne de
       texte (c'est elle qui dicte la hauteur du héros) et l'image s'y adapte. */
    align-self: stretch;
    justify-self: end;
    width: calc(100% + var(--debord));
    max-width: none;
    margin-right: calc(var(--debord) * -1);
    margin-bottom: calc(var(--marge-bas) * -1);
    min-height: 280px;
}

.forme-disque {
    position: absolute;
    height: 94%;
    aspect-ratio: 1;
    right: 3%;
    bottom: 0;
    border-radius: 50%;
    background: rgba(72, 205, 190, .26);
    pointer-events: none;
}

/* Le personnage (image de fond : non téléchargée sur mobile) */
.heros-photo {
    position: relative;
    z-index: 2;
    display: block;
    width: 100%;
    height: 100%;
    background: url("../img/accueil/psy-detour.webp") right bottom / contain no-repeat;
    filter: drop-shadow(0 22px 34px rgba(0, 0, 0, .38));
}

/* Bande de chiffres -------------------------------------------------------- */
/* La bande remonte sur l'aplat vert et le chevauche */
.section-stats {
    position: relative;
    z-index: 2;
}

.bande-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    background: #fff;
    border: 1px solid var(--ligne);
    border-radius: var(--rayon);
    padding: 26px 18px;
    box-shadow: var(--ombre);
    margin-top: -54px;
}

.stat {
    text-align: center;
    padding: 4px 10px;
    border-right: 1px solid var(--ligne);
}

.stat:last-child {
    border-right: 0;
}

.stat strong {
    display: block;
    font-family: var(--ff-titre);
    font-size: 30px;
    font-weight: 800;
    color: var(--teal);
    line-height: 1.1;
}

.stat span {
    font-size: 13.5px;
    color: var(--gris);
}

/* --------------------------------------------------------------------------
   2. Troubles
   -------------------------------------------------------------------------- */
.grille-troubles {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.carte-trouble {
    position: relative;
    display: block;
    border-radius: var(--rayon);
    overflow: hidden;
    min-height: 232px;
    background: var(--teal);
    box-shadow: var(--ombre-sm);
    transition: transform .28s ease, box-shadow .28s ease;
}

.carte-trouble:hover {
    transform: translateY(-4px);
    box-shadow: var(--ombre);
}

.carte-trouble img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s ease;
}

.carte-trouble:hover img {
    transform: scale(1.06);
}

.carte-trouble-voile {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(11, 87, 104, .06) 26%, rgba(11, 87, 104, .58) 62%, rgba(9, 52, 62, .9) 100%);
}

.carte-trouble-nombre {
    position: absolute;
    top: 14px;
    left: 14px;
    background: rgba(255, 255, 255, .92);
    color: var(--teal);
    font-size: 12px;
    font-weight: 700;
    padding: 5px 12px;
    border-radius: var(--rayon-pill);
    backdrop-filter: blur(4px);
}

.carte-trouble-contenu {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 18px 20px 20px;
    color: #fff;
}

.carte-trouble-contenu strong {
    display: block;
    font-family: var(--ff-titre);
    font-size: 21px;
    font-weight: 800;
    margin-bottom: 3px;
}

.carte-trouble-accroche {
    display: block;
    font-size: 13.5px;
    color: rgba(255, 255, 255, .82);
    line-height: 1.45;
}

/* Carte « autre motif » — bandeau pleine largeur sous la grille */
.carte-trouble-plus {
    grid-column: 1 / -1;
    min-height: 0;
    background: var(--vert-clair);
    border: 1px dashed rgba(49, 169, 159, .55);
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 18px;
    padding: 22px 26px;
    color: var(--teal);
    box-shadow: none;
}

.carte-trouble-plus:hover {
    background: #dcf0ed;
    box-shadow: none;
}

.carte-trouble-plus strong {
    font-family: var(--ff-titre);
    font-size: 19px;
    flex: 0 0 auto;
}

.carte-trouble-plus span:last-child {
    flex: 1 1 auto;
    font-size: 14px;
    color: var(--gris);
    line-height: 1.5;
}

.carte-trouble-plus-icone {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    border-radius: 50%;
    background: var(--vert);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform .2s ease;
}

.carte-trouble-plus-icone svg {
    width: 20px;
    height: 20px;
}

.carte-trouble-plus:hover .carte-trouble-plus-icone {
    transform: translateX(4px);
}

/* --------------------------------------------------------------------------
   3. Comment ça marche
   -------------------------------------------------------------------------- */
.section-fonctionnement {
    background: var(--doux);
}

.etapes {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 22px;
    position: relative;
    list-style: none;
    margin: 0;
    padding: 0;
}

.etapes::before {
    content: "";
    position: absolute;
    top: 27px;
    left: 12%;
    right: 12%;
    height: 2px;
    background: repeating-linear-gradient(90deg, var(--ligne) 0 8px, transparent 8px 16px);
}

.etape {
    position: relative;
    background: #fff;
    border: 1px solid var(--ligne);
    border-radius: var(--rayon);
    padding: 26px 22px 24px;
    box-shadow: var(--ombre-sm);
}

.etape-numero {
    position: absolute;
    top: -19px;
    left: 22px;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--teal);
    color: #fff;
    font-family: var(--ff-titre);
    font-weight: 800;
    font-size: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 22px -12px rgba(11, 87, 104, .9);
}

.etape h3 {
    font-size: 18.5px;
    margin: 18px 0 8px;
}

.etape p {
    font-size: 14.5px;
    margin-bottom: 14px;
}

.etape-puce {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: var(--vert-clair);
    color: var(--vert-fonce);
    font-size: 12.5px;
    font-weight: 700;
    padding: 6px 12px;
    border-radius: var(--rayon-pill);
}

.etape-puce svg {
    width: 12px;
    height: 12px;
}

.fonctionnement-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    flex-wrap: wrap;
    margin-top: 46px;
}

.fonctionnement-cta-note {
    font-size: 14px;
    color: var(--gris-clair);
}

/* --------------------------------------------------------------------------
   4. Psychologues
   -------------------------------------------------------------------------- */
.grille-psychologues {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 22px;
}

/* Carte en deux temps : photo carrée en haut, disponibilités en bas */
.carte-psy {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--ligne);
    border-radius: var(--rayon);
    overflow: hidden;
    box-shadow: var(--ombre-sm);
    transition: transform .24s ease, box-shadow .24s ease, border-color .24s ease;
}

.carte-psy:hover {
    transform: translateY(-4px);
    border-color: rgba(49, 169, 159, .5);
    box-shadow: var(--ombre);
}

/* --- Haut : photo --- */
.carte-psy-photo {
    position: relative;
    display: block;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: var(--menthe);
}

.carte-psy-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s ease;
}

.carte-psy:hover .carte-psy-photo img {
    transform: scale(1.04);
}

.carte-psy-fondu {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(9, 52, 62, .34) 0%, rgba(9, 52, 62, 0) 32%, rgba(9, 52, 62, .55) 68%, rgba(9, 52, 62, .92) 100%);
}

.carte-psy-modes {
    position: absolute;
    top: 12px;
    left: 12px;
    display: flex;
    gap: 5px;
}

.puce-mode {
    font-size: 11.5px;
    font-weight: 700;
    padding: 5px 10px;
    border-radius: var(--rayon-pill);
    background: rgba(255, 255, 255, .94);
    color: var(--vert-fonce);
    backdrop-filter: blur(4px);
}

.puce-mode-cabinet {
    color: #8a6410;
}

.puce-mode-cpam {
    color: #1f5f8b;
}

.carte-psy-identite {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 16px 18px 18px;
    color: #fff;
}

/* Nom et titre viennent de la base : on borne le nombre de lignes pour que
   les cartes gardent la même hauteur quelle que soit la longueur du titre. */
.carte-psy-identite strong {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
    font-family: var(--ff-titre);
    font-size: 19px;
    font-weight: 800;
    line-height: 1.2;
    margin-bottom: 3px;
}

.carte-psy-identite span {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    font-size: 12.5px;
    color: rgba(255, 255, 255, .8);
    line-height: 1.35;
}

/* --- Bas : infos + créneaux --- */
.carte-psy-corps {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 16px 18px 18px;
}

.carte-psy-infos {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--ligne);
    font-size: 13.5px;
}

.carte-psy-lieu {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--gris);
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Le nom de ville vient de la base : il peut être long (Saint-Paul-Trois-Châteaux) */
.carte-psy-lieu-nom {
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.carte-psy-lieu svg {
    width: 14px;
    height: 14px;
    flex: 0 0 14px;
    color: var(--vert);
}

.carte-psy-tarif {
    flex: 0 0 auto;
    font-weight: 800;
    color: var(--teal);
}

.carte-psy-label {
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--gris-clair);
    margin: 14px 0 10px;
}

/* Grille fixe de 3 créneaux : aucun retour à la ligne hasardeux */
.carte-psy-creneaux {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 7px;
    margin-bottom: 16px;
}

.carte-psy-creneaux .creneau {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 8px 2px;
    border: 1px solid rgba(49, 169, 159, .4);
    border-radius: 11px;
    background: #fff;
    transition: background-color .16s ease, border-color .16s ease;
}

.carte-psy-creneaux .creneau:hover {
    background: var(--vert-clair);
    border-color: var(--vert);
}

/* Case de remplissage quand le psychologue a moins de 3 créneaux à venir */
.carte-psy-creneaux .creneau-vide {
    justify-content: center;
    color: var(--gris-clair);
    border-style: dashed;
    border-color: var(--ligne);
    font-size: 13px;
}

.carte-psy-creneaux .creneau-vide:hover {
    background: #fff;
    border-color: var(--ligne);
}

.creneau-jour {
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--gris-clair);
}

.creneau-heure {
    font-size: 13.5px;
    font-weight: 800;
    color: var(--teal);
}

.carte-psy-corps .btn {
    margin-top: auto;
}

.lien-annuaire-mobile {
    display: none;
    margin: 28px auto 0;
    width: fit-content;
}

/* --------------------------------------------------------------------------
   5. CTA — consultation sous 24h
   -------------------------------------------------------------------------- */
.bloc-urgence {
    position: relative;
    display: grid;
    grid-template-columns: 1.25fr .75fr;
    gap: 44px;
    align-items: center;
    background: linear-gradient(135deg, #0B5768 0%, #10748a 55%, #1a8f96 100%);
    border-radius: 28px;
    padding: 56px 52px;
    overflow: hidden;
    color: rgba(255, 255, 255, .82);
}

.bloc-urgence-tache {
    position: absolute;
    width: 420px;
    height: 420px;
    border-radius: 50%;
    background: rgba(255, 174, 30, .22);
    filter: blur(80px);
    right: -80px;
    top: -140px;
}

.bloc-urgence-texte {
    position: relative;
}

.etiquette-claire {
    background: rgba(255, 255, 255, .16);
    color: #fff;
}

.bloc-urgence h2 {
    color: #fff;
    font-size: clamp(27px, 3.6vw, 38px);
    margin-bottom: 14px;
}

.bloc-urgence p {
    font-size: 17px;
    max-width: 520px;
}

.bloc-urgence-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin: 26px 0 20px;
}

.bloc-urgence-note {
    font-size: 13px;
    color: rgba(255, 255, 255, .62);
    margin: 0;
}

.bloc-urgence-note a {
    color: var(--ambre);
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.bloc-urgence-visuel {
    position: relative;
}

.mini-agenda {
    background: #fff;
    border-radius: 18px;
    padding: 16px;
    box-shadow: 0 30px 60px -28px rgba(0, 0, 0, .55);
    transform: rotate(-2deg);
}

.mini-agenda-entete {
    display: flex;
    gap: 5px;
    margin-bottom: 14px;
}

.mini-agenda-entete span {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--ligne);
}

.mini-agenda-ligne {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--teal);
    padding: 11px 12px;
    border-radius: 11px;
    background: var(--doux);
    margin-bottom: 8px;
}

.mini-agenda-ligne em {
    margin-left: auto;
    font-style: normal;
    font-size: 12px;
    color: var(--gris-clair);
}

.mini-agenda-ligne-actif {
    background: var(--vert-clair);
    box-shadow: inset 0 0 0 1px rgba(49, 169, 159, .5);
}

.pip {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--vert);
    flex: 0 0 7px;
}

/* --------------------------------------------------------------------------
   6. Avantages
   -------------------------------------------------------------------------- */
.section-avantages {
    background: var(--doux);
}

.avantages-grille {
    display: grid;
    grid-template-columns: .85fr 1.15fr;
    gap: 60px;
    align-items: start;
}

.avantages-texte h2 {
    font-size: clamp(26px, 3.4vw, 36px);
}

.avantages-texte p {
    margin-bottom: 24px;
}

.avantages-liste {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
}

.avantages-liste li {
    display: flex;
    gap: 14px;
    background: #fff;
    border: 1px solid var(--ligne);
    border-radius: var(--rayon);
    padding: 22px 20px;
    box-shadow: var(--ombre-sm);
}

.avantage-icone {
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    border-radius: 11px;
    background: var(--vert-clair);
    color: var(--vert-fonce);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.avantage-icone svg {
    width: 17px;
    height: 17px;
}

.avantages-liste h3 {
    font-size: 16.5px;
    margin-bottom: 6px;
}

.avantages-liste p {
    font-size: 14px;
    margin: 0;
}

/* --------------------------------------------------------------------------
   7. Avis
   -------------------------------------------------------------------------- */
.section-avis .entete-section p {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: center;
}

.grille-avis {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
}

.carte-avis {
    margin: 0;
    background: #fff;
    border: 1px solid var(--ligne);
    border-radius: var(--rayon);
    padding: 28px 26px;
    box-shadow: var(--ombre-sm);
    display: flex;
    flex-direction: column;
    position: relative;
}

.carte-avis::before {
    content: "”";
    position: absolute;
    top: 6px;
    right: 22px;
    font-family: var(--ff-titre);
    font-size: 72px;
    line-height: 1;
    color: var(--vert-clair);
}

.carte-avis blockquote {
    margin: 14px 0 22px;
    font-size: 16px;
    color: var(--encre);
    line-height: 1.6;
    position: relative;
}

.carte-avis figcaption {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: auto;
    padding-top: 18px;
    border-top: 1px solid var(--ligne);
}

.carte-avis figcaption strong {
    display: block;
    color: var(--encre);
    font-size: 14.5px;
}

.carte-avis figcaption em {
    font-style: normal;
    font-size: 13px;
    color: var(--gris-clair);
}

/* --------------------------------------------------------------------------
   8. Ressources
   -------------------------------------------------------------------------- */
.section-ressources {
    background: var(--doux);
}

.grille-ressources {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
}

.carte-ressource {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--ligne);
    border-radius: var(--rayon);
    overflow: hidden;
    box-shadow: var(--ombre-sm);
    transition: transform .24s ease, box-shadow .24s ease;
}

.carte-ressource:hover {
    transform: translateY(-4px);
    box-shadow: var(--ombre);
}

.carte-ressource-image {
    position: relative;
    display: block;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: var(--menthe);
}

.carte-ressource-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s ease;
}

.carte-ressource:hover .carte-ressource-image img {
    transform: scale(1.05);
}

.carte-ressource-categorie {
    position: absolute;
    top: 12px;
    left: 12px;
    background: rgba(255, 255, 255, .93);
    color: var(--teal);
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: .05em;
    text-transform: uppercase;
    padding: 5px 11px;
    border-radius: var(--rayon-pill);
}

.carte-ressource-corps {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 20px 20px 18px;
}

.carte-ressource-corps strong {
    font-family: var(--ff-titre);
    font-size: 18.5px;
    color: var(--encre);
    line-height: 1.25;
    margin-bottom: 8px;
}

.carte-ressource-chapeau {
    font-size: 14px;
    color: var(--gris);
    line-height: 1.55;
    margin-bottom: 18px;
}

.carte-ressource-pied {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: auto;
    padding-top: 14px;
    border-top: 1px solid var(--ligne);
    font-size: 13.5px;
}

.carte-ressource-duree {
    color: var(--gris-clair);
    font-size: 12.5px;
}

/* --------------------------------------------------------------------------
   9. FAQ
   -------------------------------------------------------------------------- */
.faq-grille {
    display: grid;
    grid-template-columns: .8fr 1.2fr;
    gap: 60px;
    align-items: start;
}

.faq-intro {
    position: sticky;
    top: calc(var(--entete-h) + 24px);
}

.faq-intro h2 {
    font-size: clamp(26px, 3.4vw, 36px);
}

.faq-intro p {
    margin-bottom: 22px;
}

.faq-liste {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.faq-item {
    background: #fff;
    border: 1px solid var(--ligne);
    border-radius: var(--rayon-sm);
    padding: 4px 20px;
    transition: border-color .2s ease, box-shadow .2s ease;
}

.faq-item[open] {
    border-color: rgba(49, 169, 159, .5);
    box-shadow: var(--ombre-sm);
}

.faq-item summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 0;
    font-family: var(--ff-titre);
    font-weight: 800;
    font-size: 16.5px;
    color: var(--encre);
    cursor: pointer;
    list-style: none;
}

.faq-item summary::-webkit-details-marker {
    display: none;
}

.faq-chevron {
    flex: 0 0 28px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--doux);
    color: var(--teal);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform .22s ease, background-color .22s ease;
}

.faq-chevron svg {
    width: 15px;
    height: 15px;
}

.faq-item[open] .faq-chevron {
    transform: rotate(180deg);
    background: var(--vert-clair);
}

.faq-reponse {
    padding: 0 0 18px;
    font-size: 15px;
    animation: ouverture .28s ease;
}

.faq-reponse p {
    margin: 0;
    max-width: 68ch;
}

@keyframes ouverture {
    from {
        opacity: 0;
        transform: translateY(-6px);
    }
}

/* --------------------------------------------------------------------------
   10. CTA finale
   -------------------------------------------------------------------------- */
.bloc-cta-finale {
    position: relative;
    text-align: center;
    background:
        radial-gradient(700px 320px at 50% 0%, #eaf7f4 0%, rgba(234, 247, 244, 0) 70%),
        var(--doux);
    border: 1px solid var(--ligne);
    border-radius: 28px;
    padding: 66px 40px;
    overflow: hidden;
}

.bloc-cta-finale-tache {
    position: absolute;
    width: 320px;
    height: 320px;
    border-radius: 50%;
    background: rgba(255, 174, 30, .18);
    filter: blur(80px);
    left: -60px;
    bottom: -160px;
}

.bloc-cta-finale h2 {
    font-size: clamp(27px, 3.8vw, 40px);
    margin-bottom: 14px;
    position: relative;
}

.bloc-cta-finale p {
    font-size: 17.5px;
    max-width: 560px;
    margin: 0 auto 28px;
    position: relative;
}

.bloc-cta-finale-actions {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
    position: relative;
}

.bloc-cta-finale-points {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px 26px;
    margin-top: 26px;
    font-size: 13.5px;
    color: var(--gris);
    position: relative;
}

.bloc-cta-finale-points li {
    display: flex;
    align-items: center;
    gap: 7px;
}

.bloc-cta-finale-points li::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--vert);
}

.bandeau-pro {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
    margin-top: 22px;
    background: #fff;
    border: 1px solid var(--ligne);
    border-radius: var(--rayon);
    padding: 24px 28px;
}

.bandeau-pro strong {
    display: block;
    font-family: var(--ff-titre);
    font-size: 17.5px;
    color: var(--encre);
    margin-bottom: 3px;
}

.bandeau-pro span {
    font-size: 14.5px;
    color: var(--gris);
}

/* --------------------------------------------------------------------------
   11. Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1080px) {
    /* La colonne de gauche devient plus haute que le personnage : on redonne
       de la marge basse pour que la bande de chiffres ne recouvre pas les puces. */
    .heros-grille {
        gap: 20px;
    }

    .heros-illustration {
        --debord: 22px;
    }

    /* Colonne de gauche étroite : les champs s'empilent */
    .barre-recherche {
        flex-direction: column;
        border-radius: 20px;
        padding: 6px;
        gap: 2px;
        max-width: none;
    }

    .champ {
        padding: 2px 12px;
        flex: 1 1 auto;
    }

    .champ-ou {
        border-left: 0;
        border-top: 1px solid var(--ligne);
        flex: 1 1 auto;
        max-width: none;
    }

    /* Champs empilés : les listes reprennent toute la largeur de la barre */
    .suggestions-liste,
    .champ-quoi .suggestions-liste,
    .champ-ou .suggestions-liste {
        left: -12px;
        right: -12px;
        min-width: 0;
        top: calc(100% + 10px);
        max-height: 62vh;
    }

    .btn-rechercher {
        width: 100%;
        margin-top: 6px;
        padding: 13px;
    }

    .grille-troubles {
        grid-template-columns: repeat(2, 1fr);
    }

    .etapes {
        grid-template-columns: repeat(2, 1fr);
        gap: 34px 20px;
    }

    .etapes::before {
        display: none;
    }

    .grille-psychologues {
        grid-template-columns: repeat(2, 1fr);
    }

    .bloc-urgence {
        grid-template-columns: 1fr;
        gap: 34px;
        padding: 44px 34px;
    }

    .avantages-grille,
    .faq-grille {
        grid-template-columns: 1fr;
        gap: 34px;
    }

    .faq-intro {
        position: static;
    }

    .grille-ressources,
    .grille-avis {
        grid-template-columns: 1fr 1fr;
    }

    .grille-avis .carte-avis:last-child {
        grid-column: 1 / -1;
    }
}

@media (max-width: 760px) {
    .heros {
        padding-top: calc(var(--entete-h) + 58px);
    }

    .heros h1 {
        font-size: clamp(26px, 6.6vw, 31px);
    }

    /* Le personnage passe à la trappe : héros compact, image jamais téléchargée */
    .heros-grille {
        grid-template-columns: 1fr;
        --marge-bas: 110px;
    }

    .heros-illustration {
        display: none;
    }

    .entete-section h2 br,
    .entete-section-ligne h2 br {
        display: none;
    }

    .bande-stats {
        grid-template-columns: 1fr 1fr;
        gap: 18px 0;
        padding: 22px 12px;
        margin-top: -40px;
    }

    .stat:nth-child(2n) {
        border-right: 0;
    }

    .stat strong {
        font-size: 25px;
    }

    .grille-troubles {
        grid-template-columns: 1fr;
    }

    .carte-trouble {
        min-height: 190px;
    }

    .carte-trouble-plus {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
        padding: 24px;
    }

    .carte-trouble-plus strong {
        white-space: normal;
    }

    .etapes,
    .avantages-liste {
        grid-template-columns: 1fr;
    }

    /* Carrousel horizontal pour les psychologues et les avis */
    .grille-psychologues,
    .grille-avis {
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        gap: 14px;
        margin: 0 -22px;
        padding: 4px 22px 18px;
        scrollbar-width: none;
    }

    .grille-psychologues::-webkit-scrollbar,
    .grille-avis::-webkit-scrollbar {
        display: none;
    }

    .carte-psy,
    .carte-avis {
        flex: 0 0 84%;
        scroll-snap-align: center;
    }

    .lien-annuaire-mobile {
        display: inline-flex;
    }

    .grille-ressources {
        grid-template-columns: 1fr;
    }

    .bloc-urgence {
        padding: 36px 24px;
        border-radius: 22px;
    }

    .bloc-urgence-actions .btn {
        width: 100%;
    }

    .bloc-cta-finale {
        padding: 46px 24px;
        border-radius: 22px;
    }

    .bloc-cta-finale-actions .btn {
        width: 100%;
    }

    .bandeau-pro {
        flex-direction: column;
        align-items: flex-start;
        padding: 22px;
    }

    .bandeau-pro .btn {
        width: 100%;
    }
}

@media (max-width: 520px) {

    /* La pastille tiendrait sur deux lignes : on raccourcit le libellé */
    .masquer-xs {
        display: none;
    }
}

@media (max-width: 420px) {
    .carte-psy,
    .carte-avis {
        flex-basis: 90%;
    }

    .btn-rechercher .icone-loupe-mobile {
        display: inline-block;
    }
}