:root{--c-cream:250 246 239;--c-sand:240 232 219;--c-forest:31 58 50;--c-moss:61 107 92;--c-sage:111 132 104;--c-gold:201 164 92;--c-accent:61 90 128;--c-accent-clair:141 160 186;--c-accent-soft:138 164 199}
  body{font-family:'Inter',sans-serif;background:#faf6ef;overflow-x:hidden}.serif{font-family:'Fraunces','serif'}html{scroll-behavior:smooth}
  .mesh{position:fixed;inset:0;z-index:-2;background:radial-gradient(38% 38% at 76% 14%,#8aa4c730,transparent 62%),radial-gradient(40% 40% at 18% 22%,rgba(143,174,159,.28),transparent 60%),radial-gradient(35% 35% at 82% 30%,rgba(201,143,112,.18),transparent 60%),radial-gradient(45% 45% at 60% 85%,rgba(201,164,92,.14),transparent 60%)}
  .grain{background-image:radial-gradient(rgba(31,58,50,.045) 1px,transparent 1px);background-size:15px 15px}
  /* Blog, « la grille tenue » : hauteur commune, accroche coupée à trois lignes,
     pied collé en bas. Sans ça, une note de deux minutes et un essai de quinze
     produisent deux cartes de hauteurs très différentes sur la même ligne. */
  .art-carte{min-height:236px}
  /* L'IMAGE SUR LA CARTE DU BLOG. Elle manquait depuis toujours : les pages d'articles
     avaient la leur, la liste non, et une liste de blog sans images se lit comme un
     sommaire administratif. Demande de la cliente le 25/08, pour qui le blog est
     « ce que je préfère dans tous les sites que j'ai eus ».
     Le rapport est fixé à 16/9 et l'image recadrée : les illustrations d'un praticien
     viennent de partout et n'ont jamais les mêmes proportions. Sans ce cadre, une image
     en hauteur ferait trois fois la taille de sa voisine. */
  .art-carte{padding:0}
  .art-carte-img{display:block;aspect-ratio:16/9;overflow:hidden;background:rgb(var(--c-sand))}
  .art-carte-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s}
  .art-carte:hover .art-carte-img img{transform:scale(1.04)}
  .art-carte-txt{display:flex;flex-direction:column;flex:1;padding:1.5rem}
  /* Une petite image ne se recadre pas, elle se pose : fond sable, marges, et sa taille
     d'origine. Elle a alors l'air d'une illustration choisie, pas d'une photo ratée. */
  .art-carte-img.petite{background:rgb(var(--c-sand));display:flex;align-items:center;justify-content:center;padding:1.25rem;text-align:center}
  .art-carte-img.petite img{width:auto;height:100%;max-width:100%;object-fit:contain}
  /* La planche est CENTRÉE dans sa colonne, dans les deux sens. Au premier jet elle était
     collée en haut et décalée par un rembourrage asymétrique : à côté d'un texte long,
     elle pendait dans le vide. Centrée, elle tient sa place quelle que soit la longueur
     du chapô. */
  .art-tete-vig{padding:1.5rem;display:flex;align-items:center;justify-content:center}
  .art-tete-vig figure{margin:0 auto;background:rgb(var(--c-sand));border-radius:1.5rem;padding:2.25rem;
    display:flex;align-items:center;justify-content:center;width:100%}
  .art-tete-vig img{display:block;width:100%;height:auto;margin:0 auto;border-radius:.5rem;
    box-shadow:0 18px 40px -22px rgba(31,58,50,.55)}
  @media (min-width:1024px){.art-tete-vig{padding:3rem}}
  .lignes-3{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;margin-bottom:1rem}
  .filtre-blog{border:1px solid rgb(var(--c-forest)/.14);background:#fff;border-radius:999px;padding:.45rem .95rem;font-size:.875rem;color:rgb(var(--c-forest)/.72);transition:background .2s,color .2s,border-color .2s;cursor:pointer}
  .filtre-blog:hover{border-color:rgb(var(--c-accent)/.45);color:rgb(var(--c-accent))}
  .filtre-blog.on{background:rgb(var(--c-forest));border-color:rgb(var(--c-forest));color:rgb(var(--c-cream));font-weight:500}
  /* --- Repères du parcours : l'intitulé porte la nature, la valeur porte le fait.
     Filet fin au-dessus de chaque colonne plutôt qu'une pastille : une valeur longue
     se coupe alors normalement, au lieu d'étirer une bulle sur toute la largeur. --- */
  .reperes{display:grid;gap:1.75rem 2.5rem;margin:0;
    grid-template-columns:repeat(auto-fit,minmax(15rem,1fr))}
  .reperes>div{border-top:1px solid rgb(var(--c-forest)/.14);padding-top:.85rem}
  .reperes dt{font-size:.68rem;letter-spacing:.15em;text-transform:uppercase;
    font-weight:600;color:rgb(var(--c-accent));margin-bottom:.35rem}
  .reperes dd{margin:0;font-size:.95rem;line-height:1.55;color:rgb(var(--c-forest)/.82)}
  /* Version resserrée (accueil) : la colonne y est deux fois plus étroite, et trois
     repères sur deux colonnes laissent toujours le troisième seul sur sa ligne. On
     empile donc, intitulé à gauche et valeur à droite, ce qui ne peut pas s'orpheliner. */
  .reperes-menu{gap:0;grid-template-columns:1fr}
  .reperes-menu>div{display:grid;grid-template-columns:7rem 1fr;gap:.25rem .9rem;
    align-items:baseline;border-top:1px solid rgb(var(--c-forest)/.1);padding:.7rem 0}
  .reperes-menu dt{margin-bottom:0;padding-top:.15rem}
  .reperes-menu dd{font-size:.88rem;line-height:1.5}
  @media (max-width:479px){
    .reperes-menu>div{grid-template-columns:1fr;gap:.2rem}
  }
  /* --- Page d'un texte : le diptyque + la colonne de droite --- */
  .art-tete{display:grid;grid-template-columns:1fr;max-width:78rem;margin:0 auto}
  .art-tete-txt{padding:3rem 1.5rem 2rem}
  .art-tete-img{position:relative;min-height:260px;overflow:hidden}
  .art-tete-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
  .art-plan{max-width:78rem;margin:0 auto;padding:2rem 1.5rem 2.5rem;display:grid;
    grid-template-columns:1fr;gap:2.5rem}
  /* La mesure du texte est bornée : sans ça, sur un écran large, la ligne montait à
     une centaine de signes et l'œil perdait le début de la ligne suivante. */
  .art-corps{min-width:0;max-width:42rem}
  .art-rail{min-width:0}
  /* Le rail ne fait que 15rem : deux boutons côte à côte n'y tiennent pas. On les
     empile, quelle que soit la largeur de la fenêtre.
     ⚠️ La forme « :not() » ci-dessous n'est pas décorative, elle EST la correction.
     « .art-rail .cta3 » et « .cta3:not(.cta3-duo) » pèsent le MÊME poids, deux classes
     chacun : à égalité, c'est la dernière écrite qui gagne, et c'est la seconde. Le rail
     repassait donc à deux colonnes de 110 px dès 520 px de fenêtre. Constaté le 25/08 sur
     une page d'article : « M'appeler » coupé net, le numéro et le courriel réduits à
     « 06 … » et « psy… », et les deux pastilles qui se chevauchaient. Le min-width:0 posé
     plus bas avait masqué le débordement sans traiter la cause : au lieu de sortir de la
     page, le texte se faisait recouvrir. */
  .art-rail .cta3, .art-rail .cta3:not(.cta3-duo){grid-template-columns:1fr;max-width:none}
  /* Dans le rail, le bouton de rendez-vous est SEUL sur sa ligne, exactement comme les
     deux autres : il doit leur ressembler. Centré, il cassait le rythme de la colonne,
     son libellé passait à la ligne et l'icône se retrouvait au milieu d'un bloc de trois
     lignes pendant que les deux pastilles blanches, elles, alignaient icône et texte à
     gauche sur deux lignes. Sa micro-copie disparaît ici, et seulement ici : « Choisissez
     votre créneau » rassure, alors que le numéro et le courriel des deux autres sont des
     informations. Dans une colonne de 15 rem, on garde ce qui informe. */
  .art-rail .cta3-rdv{justify-content:flex-start;text-align:left}
  /* Le sous-titre ne tombe QUE dans la colonne étroite. En dessous de 1024 px, le rail
     passe sous l'article et occupe toute la largeur : « Choisissez votre créneau » y a
     toute sa place, et il rassure. Mesuré : rail de 852 px à 900 px de fenêtre, de
     240 px à 1280. */
  @media (min-width:1024px){.art-rail .cta3-rdv small{display:none}}
  /* CIBLES TACTILES. Mesuré le 25/08 sur téléphone : ces liens de texte font 17 à 20 px de
     haut. Apple recommande 44 px, Google 48. On ne grossit pas le texte, qui est juste : on
     élargit la zone touchable par du rembourrage vertical, invisible à l'oeil. Réservé aux
     écrans tactiles, pour ne rien changer à la mise en page au clavier et à la souris. */
  @media (pointer:coarse){
    .lien-suite{display:inline-block;padding-block:.75rem}
    .fil a{display:inline-block;padding-block:.6rem}
  }
  .art-rail-collant{position:sticky;top:5.5rem}
  .art-som ol{list-style:none;margin:0;padding:0;border-left:1px solid rgb(var(--c-forest)/.12)}
  .art-som-t{font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;font-weight:600;
    color:rgb(var(--c-accent));margin:0 0 .75rem}
  .art-som a{display:block;padding:.45rem 0 .45rem .9rem;margin-left:-1px;font-size:.86rem;
    line-height:1.4;color:rgb(var(--c-forest)/.62);border-left:2px solid transparent;
    transition:color .2s,border-color .2s}
  .art-som a:hover{color:rgb(var(--c-accent))}
  .art-som a.on{color:rgb(var(--c-forest));font-weight:500;border-left-color:rgb(var(--c-accent))}
  .art-fiche{margin:0;font-size:.86rem}
  .art-fiche dt{font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600;
    color:rgb(var(--c-accent));margin-bottom:.2rem}
  .art-fiche dd{margin:0 0 .9rem;color:rgb(var(--c-forest)/.7)}
  .art-rail-cta{margin-top:1.75rem;padding-top:1.25rem;border-top:1px solid rgb(var(--c-forest)/.1)}
  .art-rail-cta p{font-size:.9rem;color:rgb(var(--c-forest)/.7);margin:0 0 .75rem}
  /* La jauge : un fil de 3 px sous l'en-tête collant, jamais un bandeau. */
  .art-jauge{position:fixed;top:4rem;left:0;right:0;height:3px;z-index:39;
    background:rgb(var(--c-forest)/.08)}
  .art-jauge i{display:block;height:100%;width:0;background:rgb(var(--c-accent));
    transition:width .08s linear}
  @media (min-width:1024px){
    .art-tete{grid-template-columns:1.05fr .95fr;align-items:stretch}
    .art-tete-txt{padding:3.5rem 3rem 3rem 1.5rem;display:flex;flex-direction:column;justify-content:center}
    .art-tete-img{min-height:26rem}
    .art-plan{grid-template-columns:minmax(0,1fr) 15rem;gap:3.5rem}
  }
  @media (prefers-reduced-motion:reduce){.art-jauge i{transition:none}}

  .marque{display:inline-flex;flex-direction:column;gap:4px;line-height:1}
  .marque-nom{line-height:1.05}
  .marque-sig{display:flex;align-items:center;gap:.4em;height:13px;line-height:13px;font-size:.64rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:rgb(var(--c-accent))}
  .marque-metier,.marque-fixe{white-space:nowrap}
  .marque-sep{opacity:.45;letter-spacing:0}

  .marque-fen{display:block;height:13px;overflow:hidden}
  .marque-def{display:block;animation:defile-sig 14.0s infinite}
  .marque-def span{display:block;height:13px;line-height:13px;white-space:nowrap}
  @keyframes defile-sig{0.00%,20.00%{transform:translateY(-0px)}25.00%,45.00%{transform:translateY(-13px)}50.00%,70.00%{transform:translateY(-26px)}75.00%,95.00%{transform:translateY(-39px)}100%{transform:translateY(-52px)}}
  @media (prefers-reduced-motion:reduce){
    .marque-def{animation:none}
    .marque-def span:nth-child(n+2){display:none}}

  /* Grille de sujets : la dernière ligne incomplète est CENTRÉE au lieu d'être collée à gauche.
     Astuce : on découpe en 6 colonnes (4 en tablette) et chaque carte en occupe 2, ce qui laisse
     des demi-pas pour décaler la ligne orpheline. Les sélecteurs marchent sans connaître le nombre
     de cartes : nth-child repère le début d'une ligne, nth-last-child compte ce qu'il reste. */
  .grille-3{display:grid}
  @media (min-width:640px) and (max-width:1023.98px){
    .grille-3{grid-template-columns:repeat(4,minmax(0,1fr))}
    .grille-3>*{grid-column:span 2}
    .grille-3>:nth-child(2n+1):last-child{grid-column:2/span 2}   /* 1 carte seule sur 2 colonnes */
  }
  @media (min-width:1024px){
    .grille-3{grid-template-columns:repeat(6,minmax(0,1fr))}
    .grille-3>*{grid-column:span 2}
    /* ⚠️ poser début ET étendue : un grid-column-start seul laisse la fin en auto,
       la carte se réduirait alors à une seule colonne au lieu de deux. */
    .grille-3>:nth-child(3n+1):nth-last-child(2){grid-column:2/span 2} /* 2 cartes restantes (ex. 5 sujets) */
    .grille-3>:nth-child(3n+1):last-child{grid-column:3/span 2}        /* 1 carte restante (ex. 4 sujets) */
  }
  .js .reveal{opacity:0;transform:translateY(22px)}.reveal{transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s}.reveal.vis{opacity:1;transform:none}
  .card-lift{transition:transform .4s cubic-bezier(.2,.7,.2,1),box-shadow .4s}.card-lift:hover{transform:translateY(-6px);box-shadow:0 22px 45px -20px rgba(31,58,50,.35)}
  details>summary{list-style:none}details>summary::-webkit-details-marker{display:none}details[open] .chev{transform:rotate(180deg)}
  .field{width:100%;background:#fff;border:1px solid rgba(31,58,50,.15);border-radius:14px;padding:.85rem 1rem;font-size:.95rem;color:#1f3a32}
  .field:focus{outline:none;border-color:#3D5A80;box-shadow:0 0 0 3px #3D5A8022}
  .prose p{margin-bottom:1rem;line-height:1.7;color:#1f3a32;opacity:.82}.prose h2{font-family:'Fraunces',serif;font-size:1.5rem;font-weight:600;color:#1f3a32;margin:2rem 0 .75rem}
  /* Deux niveaux de relief dans un texte écrit par le client, jamais plus.
     .em souligne une idée qui porte, .hl frappe le point clé du paragraphe (le
     « sticker » maison : bloc plein, légèrement de travers). Les deux prennent l'or et
     l'encre du THÈME, pas une couleur en dur : chaque client garde sa palette.
     ⚠️ .prose p pose opacity:.82, qui délave aussi ses enfants et éteindrait le sticker.
     .bio-riche rend donc la même valeur en alpha sur la couleur, ce qui laisse le
     surlignage à pleine force. */
  .bio-riche p{opacity:1;color:rgb(var(--c-forest)/.84)}
  .em{font-weight:600;color:rgb(var(--c-forest));box-shadow:inset 0 -.4em 0 rgb(var(--c-accent)/.15)}
  .hl{display:inline-block;background:rgb(var(--c-gold));color:rgb(var(--c-forest));font-weight:700;
    padding:.04em .34em .16em;border-radius:8px;box-shadow:0 8px 20px -8px rgb(var(--c-forest)/.32);
    transform:rotate(-1.6deg)}
  /* Article de fond : un texte long se lit à une mesure plus étroite et un corps plus
     grand que le reste du site. Le chapô est plus clair que le corps, la citation
     s'avance dans la marge : trois repères suffisent à casser le mur de paragraphes. */
  .text-accent-clair{color:rgb(var(--c-accent-clair))}
  .foot-cta{border-radius:22px;padding:32px 34px;display:flex;flex-wrap:wrap;gap:24px;
    align-items:center;justify-content:space-between}
  .foot-grid{display:grid;grid-template-columns:1fr;gap:28px;padding:38px 4px 0}
  @media (min-width:760px){.foot-grid{grid-template-columns:1.4fr 1fr 1fr;gap:34px}}
  .foot-lab{font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
    color:rgb(var(--c-forest));margin-bottom:12px}
  .foot-bas{border-top:1px solid rgb(var(--c-forest)/.12);margin-top:32px;padding:16px 4px 26px;
    display:flex;flex-wrap:wrap;gap:10px 22px;justify-content:space-between;
    font-size:12px;color:rgb(var(--c-forest)/.5)}
  .foot-bas a:hover{color:rgb(var(--c-accent))}
  .benef-grid{display:grid;gap:22px 40px}
  @media (min-width:640px){.benef-grid{grid-template-columns:1fr 1fr}}
  .benef-item{display:flex;gap:14px;align-items:flex-start}
  .benef-ic{flex:0 0 auto;width:26px;height:26px;border-radius:9px;display:flex;align-items:center;
    justify-content:center;font-size:13px;background:rgb(var(--c-accent)/.13);color:rgb(var(--c-accent))}
  .benef-item p{font-size:15px;line-height:1.6;color:rgb(var(--c-forest)/.78);margin:0}
  .art-chapo{font-size:1.2rem;line-height:1.65;color:#1f3a32;opacity:.78}
  .art-corps p{font-size:1.06rem;line-height:1.78;margin-bottom:1.25rem}
  .art-corps h2{font-size:1.4rem;margin:2.6rem 0 .9rem;letter-spacing:-.01em}
  .art-corps h2+p{margin-top:0}
  .art-cit{font-family:'Fraunces',serif;font-size:1.24rem;line-height:1.55;color:#1f3a32;
    border-left:2px solid #3D5A80;padding:.15rem 0 .15rem 1.3rem;margin:2rem 0 2rem}
  @media (min-width:768px){.art-cit{margin-left:-1.3rem}}
  .art-corps>p:first-of-type:not(.sans-lettrine)::first-letter{font-family:'Fraunces',serif;font-size:3.1rem;
    line-height:.86;float:left;padding:.1rem .55rem .1rem 0;color:#3D5A80}
  @keyframes trust-marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
  .marquee{display:flex;width:max-content;animation:trust-marquee 32s linear infinite}
  .marquee-wrap:hover .marquee{animation-play-state:paused}
  @media (prefers-reduced-motion:reduce){.marquee{animation:none;justify-content:center;width:100%;flex-wrap:wrap}}
  /* Les trois chemins, chacun son bouton, aucun caché derrière un clic.
     Le rendez-vous en ligne prend toute la largeur : c'est celui que les patients
     préfèrent, et c'est le seul qui n'oblige personne à parler avant d'être prêt.
     Sans agenda en ligne, le téléphone prend sa place et la grille passe à une colonne. */
  .cta3{display:grid;gap:11px;grid-template-columns:1fr;max-width:560px;margin:0 auto}
  .cta3.g{margin:0}
  .cta3-duo{grid-template-columns:1fr}
  @media (min-width:520px){.cta3:not(.cta3-duo){grid-template-columns:1fr 1fr}}
  /* min-width:0 : sans lui, un élément de grille refuse de descendre sous la largeur
     de son contenu. Dans le rail d'article, large de 15rem, les trois boutons
     débordaient la page de 147 px sur un écran de 1280, et le courriel se retrouvait
     coupé par le bord de la fenêtre. */
  .cta3-b{display:flex;align-items:center;gap:12px;padding:13px 22px;border-radius:999px;min-width:0;
    text-align:left;transition:transform .25s,background .25s,box-shadow .25s;min-height:58px}
  .cta3-b .ic{width:21px;height:21px;flex:0 0 auto}
  .cta3-b b{display:block;font-weight:600;font-size:15.5px;line-height:1.25}
  .cta3-b small{display:block;font-weight:500;font-size:12.5px;line-height:1.35;opacity:.72;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
  .cta3-b>span{min-width:0}
  .cta3-b:hover{transform:translateY(-2px)}
  .cta3-rdv{grid-column:1/-1;justify-content:center;text-align:center;
    background:rgb(var(--c-forest));color:rgb(var(--c-cream));box-shadow:0 20px 38px -24px rgba(31,58,50,.95)}
  .cta3-rdv:hover{background:rgb(var(--c-moss))}
  .cta3-sec{background:#fff;color:rgb(var(--c-forest));border:1px solid rgb(var(--c-forest)/.15)}
  .cta3-sec:hover{background:rgb(var(--c-cream))}
  /* Sur fond sombre (pied de page, hero photo) les mêmes boutons s'inversent. */
  .cta3-clair .cta3-rdv{background:rgb(var(--c-cream));color:rgb(var(--c-forest));box-shadow:none}
  .cta3-clair .cta3-rdv:hover{background:#fff}
  .cta3-clair .cta3-sec{background:transparent;color:rgb(var(--c-cream));border-color:rgb(var(--c-cream)/.34)}
  .cta3-clair .cta3-sec:hover{background:rgb(var(--c-cream)/.12)}
  .cta3-or .cta3-rdv{background:rgb(var(--c-gold));color:#241f10;box-shadow:0 22px 46px -22px rgba(207,155,63,.7)}
  .cta3-or .cta3-rdv:hover{background:rgb(var(--c-gold));filter:brightness(1.06)}
  .cta3-or .cta3-sec{background:transparent;color:#f6f1e6;border-color:rgba(246,241,230,.4)}
  .cta3-or .cta3-sec:hover{background:rgba(246,241,230,.12)}
  .cta3-sauge .cta3-rdv{background:rgb(var(--c-moss));color:#fff;box-shadow:0 18px 36px -16px rgba(111,132,104,.7)}
  .cta3-sauge .cta3-rdv:hover{background:rgb(var(--c-forest))}
  /* ---- Style A premium : hero (pastille clignotante, photo arche, badges flottants, ken-burns) ---- */
  .pill{display:inline-flex;align-items:center;gap:11px;background:#fff;border:1px solid rgb(var(--c-forest)/.10);border-radius:100px;padding:8px 16px;box-shadow:0 10px 26px -16px rgba(31,58,50,.5);font-size:12.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:rgb(var(--c-forest)/.82)}
  .pill .live{width:9px;height:9px;border-radius:50%;background:rgb(var(--c-accent));position:relative;flex-shrink:0}
  .pill .live::after{content:'';position:absolute;inset:0;border-radius:50%;background:rgb(var(--c-accent));animation:pulse 1.8s ease-out infinite}
  @keyframes pulse{0%{transform:scale(1);opacity:.7}70%{transform:scale(2.6);opacity:0}100%{opacity:0}}
  .hero-arch{position:relative;border-radius:220px 220px 26px 26px;overflow:hidden;box-shadow:0 50px 90px -46px rgba(31,58,50,.5);border:1px solid rgb(var(--c-forest)/.08)}
  .hero-arch img,.hero-arch>span{width:100%;height:100%;object-fit:cover;display:block;animation:kenburns 16s ease-out both}
  @keyframes kenburns{from{transform:scale(1.13)}to{transform:scale(1)}}
  .hero-badge{position:absolute;z-index:2;background:#fff;border:1px solid rgb(var(--c-forest)/.08);border-radius:15px;padding:11px 15px;box-shadow:0 20px 44px -24px rgba(31,58,50,.6)}
  .hero-badge.b-top{top:26px;left:-16px;animation:floatY 5.5s ease-in-out infinite}
  .hero-badge.b-bot{bottom:26px;right:-14px;background:rgb(var(--c-forest));color:rgb(var(--c-cream));border-color:transparent;animation:floatY 6.5s ease-in-out infinite .6s}
  @keyframes floatY{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
  .hero-badge .hb-stars{color:rgb(var(--c-gold));font-size:12px;letter-spacing:1px}
  .hero-badge .hb-strong{font-family:'Fraunces',serif;font-weight:600;font-size:14px}
  .hero-badge .hb-sub{font-size:11px;opacity:.7;letter-spacing:.05em}
  @media(max-width:1023px){.hero-badge.b-top{left:8px}.hero-badge.b-bot{right:8px}}
  .t-cocon #hero h1{font-weight:400;letter-spacing:-.022em}
  #hero h1.h1-l{font-size:clamp(1.95rem,3.4vw,2.8rem);line-height:1.12}
  #hero h1.h1-xl{font-size:clamp(1.8rem,3vw,2.45rem);line-height:1.16}
  /* entrée en cascade du hero */
  .js #hero .casc{opacity:0;transform:translateY(16px);animation:cascIn .8s cubic-bezier(.2,.7,.2,1) forwards}
  .js #hero .casc.c1{animation-delay:.05s}.js #hero .casc.c2{animation-delay:.16s}.js #hero .casc.c3{animation-delay:.27s}.js #hero .casc.c4{animation-delay:.38s}
  @keyframes cascIn{to{opacity:1;transform:none}}
  /* ---- Style B « Cinématique » : hero photo plein cadre ---- */
  .hero-cine{position:relative;min-height:clamp(560px,86vh,840px);display:flex;align-items:flex-end;overflow:hidden}
  .hero-cine-bg{position:absolute;inset:0;z-index:0}
  .hero-cine-bg img,.hero-cine-bg>span{width:100%;height:100%;object-fit:cover;object-position:60% 18%}
  .hero-cine-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(16,35,30,.95) 0%,rgba(16,35,30,.62) 32%,rgba(16,35,30,.12) 60%,transparent 74%),linear-gradient(180deg,transparent 48%,rgba(16,35,30,.6) 100%)}
  .hero-cine-in{position:relative;z-index:1;width:100%;padding:clamp(40px,7vw,88px) 0}
  .hero-cine-kick{color:rgb(var(--c-gold));font-weight:600;letter-spacing:.03em;margin-bottom:18px}
  .hero-cine h1{color:#f6f1e6;font-family:'Fraunces',serif;font-weight:400;font-size:clamp(2.2rem,4.4vw,3.7rem);line-height:1.05;letter-spacing:-.03em;max-width:19ch}
  .hero-cine h1.h1-l{font-size:clamp(2rem,3.6vw,2.95rem);line-height:1.09;max-width:22ch}
  .hero-cine h1.h1-xl{font-size:clamp(1.8rem,3.1vw,2.5rem);line-height:1.14;max-width:24ch}
  .hero-cine-row{display:flex;flex-direction:column;align-items:flex-start;gap:22px;margin-top:28px}
  .hero-cine-row p{color:#f1ece0;font-size:1.16rem;line-height:1.6;max-width:34ch}
  .hero-cine-micro{color:rgba(246,241,230,.72);font-size:13px}
  .btn-gold{background:rgb(var(--c-gold));color:#241f10;box-shadow:0 22px 46px -22px rgba(207,155,63,.7)}
  .btn-gold:hover{filter:brightness(1.06)}
  .btn-ghost{border:1px solid rgba(246,241,230,.4);color:#f6f1e6}
  .btn-ghost:hover{background:rgba(246,241,230,.12)}
  @media (prefers-reduced-motion:no-preference){
    .hero-cine-bg img{animation:kbz 18s ease-out both}
    @keyframes kbz{from{transform:scale(1.1)}to{transform:scale(1)}}
    .js .hero-cine .cine-rv{opacity:0;transform:translateY(24px);animation:cineUp 1s cubic-bezier(.2,.7,.2,1) forwards}
    .js .hero-cine .cine-rv.r1{animation-delay:.08s}.js .hero-cine .cine-rv.r2{animation-delay:.24s}.js .hero-cine .cine-rv.r3{animation-delay:.4s}
    @keyframes cineUp{to{opacity:1;transform:none}}
  }
  /* ---- Style C « Organique » : hero doux, formes blob, chips flottantes ---- */
  .hero-org{position:relative;padding:clamp(28px,5vw,58px) 0 clamp(44px,7vw,86px);overflow:hidden}
  .hero-org-grid{display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(30px,5vw,60px);align-items:center;position:relative;z-index:1}
  .hero-org h1{font-family:'Fraunces',serif;color:rgb(var(--c-forest));font-weight:500;font-size:clamp(2.4rem,4.8vw,4rem);line-height:1.04;letter-spacing:-.03em;margin:20px 0 0}
  .hero-org h1.h1-l{font-size:clamp(2.05rem,3.8vw,3.05rem);line-height:1.1}
  .hero-org h1.h1-xl{font-size:clamp(1.85rem,3.2vw,2.55rem);line-height:1.15}
  .hero-org h1 em{font-style:italic;color:rgb(var(--c-accent))}
  .hero-org .lead{margin:24px 0 32px;font-size:clamp(1.04rem,1.4vw,1.2rem);color:rgb(var(--c-forest)/.72);max-width:36ch;line-height:1.66}
  .hero-org-photo{position:relative}
  .hero-org-frame{position:relative;overflow:hidden;aspect-ratio:1/1.05;box-shadow:0 44px 80px -40px rgba(44,42,36,.45);border-radius:58% 42% 47% 53%/54% 46% 54% 46%}
  .hero-org-frame img,.hero-org-frame>span{width:100%;height:100%;object-fit:cover}
  .org-chip{position:absolute;z-index:2;background:#fffdf9;border-radius:20px;padding:13px 17px;box-shadow:0 22px 44px -22px rgba(44,42,36,.5);display:flex;align-items:center;gap:11px}
  .org-chip.a{left:-16px;top:12%}.org-chip.b{right:-14px;bottom:12%}
  .org-chip .st{color:rgb(var(--c-gold));letter-spacing:1px;font-size:13px}
  .org-chip b{font-family:'Fraunces',serif;font-weight:600;font-size:14.5px;color:rgb(var(--c-forest));display:block;line-height:1.1}
  .org-chip small{color:rgb(var(--c-forest)/.6);font-size:12px}
  .org-deco{position:absolute;border-radius:50%;filter:blur(3px);opacity:.55;z-index:0;pointer-events:none}
  .org-deco.d1{width:120px;height:120px;background:radial-gradient(circle at 35% 30%,#e9c39f,#d29a83);top:6%;left:-2%}
  .org-deco.d2{width:80px;height:80px;background:radial-gradient(circle at 35% 30%,#b7c9a9,#8ea183);bottom:4%;right:1%}
  .btn-sage{background:rgb(var(--c-moss));color:#fff;box-shadow:0 18px 36px -16px rgba(111,132,104,.7)}
  .btn-sage:hover{background:rgb(var(--c-forest))}
  @media (prefers-reduced-motion:no-preference){
    .hero-org-frame img{animation:kbz 16s ease-out both}
    .org-chip.a{animation:floaty 8s ease-in-out infinite}.org-chip.b{animation:floaty 9s ease-in-out infinite 1.4s}
    .org-deco{animation:floaty 12s ease-in-out infinite}.org-deco.d2{animation-delay:2s}
    @keyframes floaty{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-18px) rotate(6deg)}}
    .js .hero-org .cine-rv{opacity:0;transform:translateY(22px);animation:cineUp 1s cubic-bezier(.2,.7,.2,1) forwards}
    .js .hero-org .cine-rv.r1{animation-delay:.06s}.js .hero-org .cine-rv.r2{animation-delay:.2s}.js .hero-org .cine-rv.r3{animation-delay:.34s}
  }
  @media(max-width:900px){.hero-org-grid{grid-template-columns:1fr;gap:40px}.hero-org-photo{max-width:420px;margin:0 auto}.org-chip.a{left:2px}.org-chip.b{right:2px}}
  /* menu déroulant Accompagnements */
  .nav-dd{position:relative}
  .nav-dd::after{content:'';position:absolute;top:100%;left:-20px;right:-20px;height:16px}
  .nav-dd-panel{position:absolute;top:calc(100% + 12px);left:50%;transform:translateX(-50%) translateY(6px);width:min(560px,86vw);
    background:rgb(var(--c-cream));border:1px solid rgb(var(--c-forest)/.12);border-radius:20px;
    box-shadow:0 34px 66px -26px rgba(20,30,26,.5);padding:14px;opacity:0;visibility:hidden;transition:opacity .2s,transform .2s;z-index:60}
  .nav-dd:hover .nav-dd-panel,.nav-dd:focus-within .nav-dd-panel{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
  .nav-dd-grid{display:grid;grid-template-columns:1fr}
  /* Remplissage par colonne : le nombre de lignes est posé en style inline,
     les colonnes se créent d'elles-mêmes et se partagent la largeur. */
  .nav-dd-cols{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:2px}
  /* Panneau à deux familles : « Mes approches » et « Ce sur quoi je vous accompagne ».
     Chaque famille garde son intitulé et ses colonnes, un filet les sépare. */
  .nav-dd-groupes{display:grid;grid-auto-flow:column;grid-auto-columns:max-content;gap:18px}
  .nav-dd-groupe{min-width:0}
  .nav-dd-groupe + .nav-dd-groupe{border-left:1px solid rgb(var(--c-forest)/.1);padding-left:18px}
  .nav-dd-groupe .nav-dd-cols{grid-auto-columns:minmax(0,248px)}
  .nav-dd-titre{margin:0 0 6px;padding:2px 12px;font-size:10.5px;font-weight:700;
    letter-spacing:.13em;text-transform:uppercase;color:rgb(var(--c-forest)/.45)}
  .nav-dd-item{display:flex;gap:11px;align-items:flex-start;padding:11px 12px;border-radius:13px;transition:background .15s}
  .nav-dd-item:hover{background:rgb(var(--c-sand))}
  .nav-dd-ic{width:36px;height:36px;border-radius:11px;background:rgb(var(--c-accent)/.12);color:rgb(var(--c-accent));display:flex;align-items:center;justify-content:center;flex-shrink:0}
  .nav-dd-item b{display:block;font-family:'Fraunces',serif;font-weight:600;font-size:14px;color:rgb(var(--c-forest));line-height:1.2}
  .nav-dd-item small{display:block;font-size:12px;color:rgb(var(--c-forest)/.62);line-height:1.4;margin-top:3px}
  /* --- Menu mobile en accordéon ------------------------------------------------
     Cibles tactiles à 52 px : sur ce public, souvent plus de cinquante ans et parfois
     en détresse, une cible trop petite se rate et on ferme l'onglet. */
  .mob-bouton{align-items:center;justify-content:center;width:44px;height:44px;
    margin-right:-8px;border-radius:12px;background:transparent;color:inherit;cursor:pointer}
  .mob-bouton:active{background:rgb(var(--c-forest)/.06)}
  .mob-barres{display:block;width:22px;height:16px;position:relative}
  .mob-barres i{position:absolute;left:0;width:100%;height:2px;border-radius:2px;
    background:currentColor;transition:transform .22s ease,opacity .18s ease}
  .mob-barres i:nth-child(1){top:0}
  .mob-barres i:nth-child(2){top:7px}
  .mob-barres i:nth-child(3){top:14px}
  /* Le bouton devient une croix : le même objet ouvre et ferme, pas deux commandes. */
  [aria-expanded="true"] .mob-barres i:nth-child(1){transform:translateY(7px) rotate(45deg)}
  [aria-expanded="true"] .mob-barres i:nth-child(2){opacity:0}
  [aria-expanded="true"] .mob-barres i:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

  /* --- Le point de bascule du menu, MESURÉ (Playwright, 2026-08-23) -------------
     Deux défauts corrigés d'un coup, tous les sites étaient touchés.

     1) Les trois barres restaient affichées jusqu'à 1600px, à côté du menu complet.
        theme.css est chargé APRÈS tw.css, et à spécificité égale c'est la dernière
        règle qui gagne : le .mob-bouton{display:flex} d'ici battait le md:hidden
        de Tailwind, qui n'a donc jamais rien caché. La visibilité des trois éléments
        du menu est désormais décidée ICI, et nulle part ailleurs.

     2) Les libellés se coupaient en deux (« À / propos », « Prendre rendez- / vous »).
        Mesuré sur un site à 7 entrées : marque 166px + entrées 705px + bouton 158px
        + les espaces = 1061px, pour 1104px utiles au maximum (max-w-6xl moins ses
        marges). Sous ~1100px de fenêtre, ça ne rentre plus et le texte se replie.

          Le seuil est posé à 1180px et non à 1061 : il faut de la marge pour un nom long
     (« Frédérique Le Ridant » fait 60px de plus que « Manon Delaunay ») et pour une
     entrée de menu de plus. Aucune largeur d'écran courante ne tombe en dessous.

     D'où : burger sous 1180px, menu complet au-dessus, resserré jusqu'à 1400px. */
  .mob-bouton{display:none}
  .mob-panneau{display:none}
  @media (max-width:1179.98px){
    .nav-principal{display:none}
    .mob-bouton{display:flex}
    /* :not([hidden]) et pas .mob-panneau seul : sans lui, cette règle battrait
       l'attribut hidden posé par le JS et le panneau resterait ouvert en permanence. */
    .mob-panneau:not([hidden]){display:block}
  }
  /* L'espacement respire avec l'écran au lieu d'être figé à 28px : c'est ce qui laisse
     de la marge à un nom long (« Frédérique Le Ridant » prend 67px de plus que
     « Manon Delaunay ») sans reculer le point de bascule pour tout le monde. */
  @media (min-width:1180px){ .nav-principal{gap:clamp(14px,1.3vw,20px)} }
  /* Un libellé de menu ne se coupe jamais en deux : s'il manque de place, c'est la
     bascule ci-dessus qui doit s'en occuper, pas un retour à la ligne au milieu d'un mot. */
  .nav-principal > a, .nav-principal .nav-dd > a{white-space:nowrap}

  .mob-panneau{border-top:1px solid rgb(var(--c-forest)/.1);background:rgb(var(--c-cream));
    max-height:calc(100vh - 64px);overflow-y:auto;-webkit-overflow-scrolling:touch}
  .mob-liste{display:flex;flex-direction:column;padding:6px 0}
  .mob-item{display:flex;align-items:center;justify-content:space-between;gap:10px;
    min-height:52px;padding:0 20px;font-size:16px;font-weight:500;color:rgb(var(--c-forest));
    border-bottom:1px solid rgb(var(--c-forest)/.06);cursor:pointer;list-style:none}
  .mob-item::-webkit-details-marker{display:none}
  .mob-item:active{background:rgb(var(--c-sand)/.7)}
  .mob-on{color:rgb(var(--c-accent));font-weight:600}
  .mob-item-fin{font-size:14px;font-weight:400;color:rgb(var(--c-forest)/.55);border-bottom:none}
  .mob-fleche{transition:transform .22s ease;flex:0 0 auto;opacity:.5}
  .mob-acc[open] .mob-fleche{transform:rotate(180deg)}
  .mob-acc[open] .mob-item{color:rgb(var(--c-accent))}

  .mob-sous{background:rgb(var(--c-sand)/.45);border-bottom:1px solid rgb(var(--c-forest)/.06);
    padding:4px 0}
  .mob-sous-item{display:flex;align-items:center;gap:11px;min-height:48px;padding:0 20px 0 22px;
    font-size:15px;color:rgb(var(--c-forest)/.82)}
  .mob-sous-item:active{background:rgb(var(--c-sand))}
  .mob-sous-tout{font-weight:600;color:rgb(var(--c-accent));min-height:44px}
  .mob-sous-ic{display:flex;align-items:center;justify-content:center;width:26px;height:26px;
    border-radius:8px;flex:0 0 auto;background:rgb(var(--c-accent)/.12);color:rgb(var(--c-accent))}

  .mob-pied{display:flex;flex-direction:column;gap:9px;padding:16px 20px 20px;
    border-top:1px solid rgb(var(--c-forest)/.08)}
  .mob-tel,.mob-cta{display:flex;align-items:center;justify-content:center;gap:8px;
    min-height:52px;border-radius:999px;font-size:16px;font-weight:600}
  .mob-cta{background:rgb(var(--c-forest));color:rgb(var(--c-cream));width:100%;cursor:pointer}
  .mob-tel{background:#fff;color:rgb(var(--c-forest));border:1px solid rgb(var(--c-forest)/.15)}
  .mob-mail{font-size:14px;padding:0 14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

  @media (prefers-reduced-motion:reduce){
    .mob-barres i,.mob-fleche{transition:none}
  }
  .nav-dd-cta{display:flex;flex-direction:column;justify-content:center;gap:7px;text-align:left;
    padding:16px 17px;border-radius:15px;background:rgb(var(--c-forest));color:rgb(var(--c-cream));
    transition:background .15s,transform .15s;cursor:pointer;width:100%}
  .nav-dd-cta:hover{background:rgb(var(--c-moss));transform:translateY(-1px)}
  .nav-dd-cta b{font-family:'Fraunces',serif;font-weight:600;font-size:15px;line-height:1.25}
  .nav-dd-cta small{font-size:12px;line-height:1.45;color:rgb(var(--c-cream)/.72)}
  .nav-dd-cta span{display:inline-flex;align-items:center;gap:6px;margin-top:3px;
    font-size:13px;font-weight:600;color:rgb(var(--c-gold))}
  .nav-dd-all{grid-column:1/-1;text-align:center;padding:12px;margin-top:5px;border-top:1px solid rgb(var(--c-forest)/.1);font-weight:600;font-size:13px;color:rgb(var(--c-accent))}
  .nav-dd-all:hover{text-decoration:underline;text-underline-offset:3px}
  /* icônes SVG */
  .ic{width:1.05em;height:1.05em;display:inline-block;vertical-align:-.15em;flex-shrink:0}
  .ic-lg{width:22px;height:22px;display:inline-block;vertical-align:middle;flex-shrink:0}
  .ic-sm{width:13px;height:13px;display:inline-block;flex-shrink:0;stroke-width:2.2}
  /* badges flottants du hero : repli propre en mobile (ne recouvrent plus le visage) */
  @media(max-width:640px){
    .hero-badge.b-top,.hero-badge.b-bot{position:static;display:inline-flex;margin:10px 8px 0 0;box-shadow:none;animation:none;left:auto;right:auto;bottom:auto;top:auto}
  }
  /* marqueurs démo (vitrine) : bandeau en tête + pastille permanente */
  .demo-bar{background:rgb(var(--c-forest));color:rgb(var(--c-cream));font-family:'Inter',sans-serif;
    font-size:13.5px;line-height:1.45;padding:11px 18px;display:flex;flex-wrap:wrap;align-items:center;
    justify-content:center;gap:6px 14px;text-align:center;position:relative;z-index:50}
  .demo-bar b{font-weight:700;letter-spacing:.02em}
  .demo-bar a{color:rgb(var(--c-gold));font-weight:600;text-decoration:underline;text-underline-offset:3px;white-space:nowrap}
  .demo-bar a:hover{color:#fff}
  .demo-ribbon{position:fixed;left:14px;bottom:14px;z-index:120;background:rgb(var(--c-forest));color:rgb(var(--c-cream));
    font-family:'Inter',sans-serif;font-size:11px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;
    padding:7px 13px;border-radius:99px;box-shadow:0 12px 28px -12px rgba(0,0,0,.5);opacity:.92;text-decoration:none}
  .demo-ribbon:hover{opacity:1;background:rgb(var(--c-moss))}

  /* Lien d'évitement : le premier élément atteignable au clavier, invisible à la souris.
     Sans lui, on retraverse tout le menu à chaque page. */
  .saut{position:absolute;left:-9999px;top:0;z-index:100;background:rgb(var(--c-forest));
    color:rgb(var(--c-cream));padding:12px 20px;border-radius:0 0 8px 0;font-weight:600}
  .saut:focus{left:0}
  /* Le repli « mouvement réduit » ne couvrait ni les révélations au défilement (jusqu'à 27 blocs
     par page), ni les transformations au survol. */
  @media (prefers-reduced-motion:reduce){
    .reveal{transition:none!important;opacity:1!important;transform:none!important}
    .card-lift:hover,.cta3-b:hover,.nav-dd-cta:hover{transform:none}
  }

  .t-clinique .rounded-3xl,.t-clinique .rounded-2xl{border-radius:.85rem}
  .t-clinique [class~="rounded-[2.5rem]"],.t-clinique [class~="rounded-[2rem]"]{border-radius:1rem}
  .t-clinique .shadow-2xl{box-shadow:0 20px 45px -26px rgba(18,59,56,.45)}
  .t-editorial .rounded-3xl{border-radius:2rem}
  .t-editorial .rounded-2xl{border-radius:1.5rem}
  .t-editorial .card-lift:hover{box-shadow:0 26px 50px -24px rgba(44,42,36,.32)}