/* ==========================================================================
   Oriane Marie — refonte du 26 août 2026
   Toutes les valeurs de mise en page sont relevées sur liwtemplates.com/zoe-spirit
   et notées en commentaire. Ne pas les arrondir « au plus joli ».
   ========================================================================== */

/* ---------- polices auto-hébergées, aucun appel externe ---------- */
/* Haigrast Serif n'a PAS de chiffres : 0 à 9 y sont des cases vides, toutes larges de
   250 unités. Le navigateur ne bascule pas tout seul, puisque les codes existent dans la
   fonte. On les retire donc de sa plage — U+0030 à U+0039 — pour que les chiffres
   retombent sur Georgia, le second de la pile. Ne pas enlever cette plage. */
@font-face{font-family:'Haigrast Serif';src:url('assets/fonts/haigrast-serif.woff2') format('woff2');
  font-weight:400;font-style:normal;font-display:swap;
  unicode-range:U+0-2F,U+3A-10FFFF}
@font-face{font-family:'Amalfi Coast';src:url('assets/fonts/amalfi-coast.woff2') format('woff2');
  font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Pinyon Script';src:url('assets/fonts/pinyon-script-400-normal-latin.woff2') format('woff2');
  font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+2000-206F}

:root{
  /* palette relevée sur les surfaces peintes du modèle — aucun noir */
  --blanc:#FFFFFF;      /* fond principal */
  --rose:#F4EAE6;       /* fond alterné */
  --taupe:#6F6356;      /* texte courant, barre du haut, blocs foncés */
  --bronze:#A5875F;     /* la respiration, une seule fois dans la page.
                           #AD9071 donnait exactement 3,00:1 en blanc — le seuil
                           du grand texte, sans un centième de marge. 3,37:1 ici. */
  --terre:#9F6449;      /* titres ET boutons, rien d'autre */
  --poudre:#CCAD9E;     /* filets, courbe, trait de liaison */
  /* deux dérivées, déclarées ici et nulle part ailleurs :
     le taupe éclairci sert au dégradé des cartes d'avis, la terre foncée aux survols */
  --taupe-clair:#7C6F60;
  --terre-fonce:#8A5540;

  --serif:'Haigrast Serif',Georgia,'Times New Roman',serif;
  --sans:Arial,Helvetica,'Helvetica Neue',sans-serif;
  /* La manuscrite du site est PINYON SCRIPT depuis le 4 septembre 2026, choisie par
     Oriane pour s'accorder à son logo. Elle remplace Amalfi Coast, qui ne sert plus
     nulle part : son @font-face reste déclaré mais, n'étant plus référencé, le
     navigateur ne télécharge pas le fichier. Pinyon a un œil bien plus petit —
     toutes les tailles de la manuscrite ont été montées d'environ 30 %. */
  --script:'Pinyon Script',cursive;

  --conteneur:1235px;   /* Zoé : 1235 */
  --pad-x:clamp(22px,4.4vw,62px);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
/* clip, et surtout PAS hidden : `hidden` ferait du body un conteneur de défilement,
   ce qui neutralise le position:sticky de l'en-tête et empêche l'événement scroll
   d'atteindre window — le rétrécissement de l'en-tête ne se déclenchait plus. */
body{overflow-x:clip}
body{margin:0;background:var(--blanc);color:var(--taupe);
  font-family:var(--sans);font-size:17px;line-height:1.55;   /* Zoé : 17 / 1,5 */
  -webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
a{color:inherit}

.evitement{position:absolute;left:-9999px;top:0;background:var(--terre);color:var(--blanc);
  padding:12px 18px;z-index:200}
.evitement:focus{left:0}
:focus-visible{outline:2px solid var(--terre);outline-offset:3px}

/* ---------- titres : interligne 1,00 chez Zoé, on tient 1,03 ---------- */
/* LA GRAISSE DES TITRES — décidé le 1er septembre 2026.
   Haigrast Serif n'existe qu'en une seule graisse. Demander 700 ne charge pas un
   autre fichier : le navigateur épaissit lui-même le dessin — 24,5 % d'encre en plus,
   là où une police qui a un vrai gras en gagne 52. Aux grandes tailles cette
   fabrication aplatit le contraste plein/délié, qui est justement ce qui fait la
   finesse de la police, et le résultat change d'un navigateur à l'autre.
   Les titres restent donc à la graisse dessinée. Le contraste avec la manuscrite
   ne disparaît pas pour autant : il vient de la famille et de la taille, pas du gras.
   En dessous de 20 px, où la fabrication ne se voit pas et où le poids aide vraiment
   à détacher une étiquette, on garde 700 — voir .pied__titre, .pastilles strong,
   .menu__nom, .respiration cite. */
h1,h2{font-family:var(--serif);font-weight:400;color:var(--terre);margin:0 0 14px}
/* les h3 descendent jusqu'à 19 px. Depuis que les titres ne sont plus en gras,
   ils ne bénéficient plus du seuil 3 réservé au gras au-delà de 18,66 px : sur
   rose, la terre n'y donne que 4,04:1 pour un seuil à 4,5. Terre foncée donc —
   5,16:1 sur rose, 6,08:1 sur blanc, et l'écart se voit à peine. */
h3{font-family:var(--serif);font-weight:400;color:var(--terre-fonce);margin:0 0 14px}
h1{font-size:clamp(26px,4.8vw,60px);line-height:1.05;letter-spacing:-.004em}  /* Zoé : 65 px,
   ramené à 60 le 4 septembre : la manuscrite ayant grandi, les titres pesaient trop */
/* PLANCHER À 24 px, NE PAS DESCENDRE. En dessous, le h2 cesse d'être du « grand texte »
   au sens WCAG : son seuil passe de 3:1 à 4,5:1, et --terre sur --rose ne vaut que 4,04:1.
   Essayé à 23 px le 4 septembre 2026, remonté aussitôt. */
h2{font-size:clamp(24px,3.9vw,46px);line-height:1.06}                        /* Zoé : 50 px → 46 */
h3{font-size:clamp(21px,2.4vw,28px);line-height:1.22;margin-bottom:6px}      /* Zoé : 30 px → 28 */
p{margin:0 0 1.1em}

.surtitre{font-size:13px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--terre);margin:0 0 16px;line-height:1.5}
/* la manuscrite ne passe jamais en gras */
/* La manuscrite ne se coupe jamais en deux lignes — demande d'Oriane du 4 septembre 2026
   (« Je suis Oriane Marie » avait « Marie » qui passait dessous). Seul `.fixe--souffle p`
   et `.hero__accroche` en sont exclus : ce sont des phrases entières, composées exprès sur
   plusieurs lignes — « Le passé ne se change pas… » demanderait 703 px sur un écran de 390. */
/* plancher descendu de 28 px à 20 px : avec `nowrap`, un intitulé long ne se coupe pas —
   il ÉLARGIT sa colonne de grille (min-content), et « Qu'est-ce que l'EMDR » poussait la
   page EMDR à 432 px de large sur un écran de 390. Le plancher est calé sur cet intitulé,
   le plus long du site. */
.script{font-family:var(--script);font-weight:400 !important;
  font-size:clamp(30px,4.8vw,63px);line-height:1.1;color:var(--terre);margin:0 0 20px;
  white-space:nowrap}

/* 16 px de fond et de tête, et non 13 : c'est ce qui porte le bouton à 45 px de haut.
   Corrigé le 6 septembre 2026 — il en faisait 39, sous les 44 px de cible tactile
   recommandés, et c'est l'élément le plus important du site (§3). */
.btn{display:inline-block;font-size:12px;letter-spacing:.16em;text-transform:uppercase;
  padding:16px 24px;background:var(--terre);color:var(--blanc);text-decoration:none;
  font-weight:400;transition:background 200ms ease}
.btn:hover{background:var(--terre-fonce)}
.btn--ligne{background:transparent;border:1px solid var(--terre);color:var(--terre)}
.btn--ligne:hover{background:var(--terre);color:var(--blanc)}

/* ---------- barre du haut ---------- */
.barre{background:var(--taupe);color:var(--rose);font-size:11px;letter-spacing:.18em;
  text-transform:uppercase;display:flex;align-items:center;gap:14px;
  padding:10px var(--pad-x)}
.barre__lien{margin-left:auto;text-decoration:none;opacity:.85}
.barre__lien:hover{opacity:1}
.barre sup{text-transform:none}

/* ---------- en-tête ----------
   Zoé : barre 110 px, logo 98 × 80 soit 72,7 % de la hauteur, calé à 1,2 %  */
/* L'en-tête reste collé en haut et se resserre au défilement.
   Bascule par classe (`.est-reduit`, posée par script.js) et non par propriété
   personnalisée : la version en `calc(... var(--h))` retombait silencieusement sur
   sa valeur de repli, l'en-tête ne bougeait jamais. */
.entete{position:sticky;top:0;z-index:60;background:var(--blanc);
  display:flex;align-items:center;gap:clamp(16px,3vw,40px);
  padding:0 1.2%;
  height:94px;
  box-shadow:0 1px 0 rgba(111,99,86,0);
  transition:height 260ms ease,box-shadow 260ms ease}
.entete.est-reduit{height:68px;box-shadow:0 1px 0 rgba(111,99,86,.14)}
.marque{flex:none;display:flex;align-items:center}
.marque img{height:60px;width:auto;transition:height 260ms ease}
.entete.est-reduit .marque img{height:42px}
.nav{display:flex;gap:clamp(14px,2vw,26px);margin-inline:auto;
  font-size:14px;letter-spacing:.05em;text-transform:uppercase}  /* Zoé : 14 px / 0,7 px */
.nav a{text-decoration:none;color:var(--taupe);transition:color 180ms ease}
.nav a:hover,.nav a[aria-current]{color:var(--terre)}
.entete__cta{padding:10px 15px;flex:none;white-space:nowrap}     /* Zoé : 10 × 15 */
/* LE BOUTON NE SE COUPE JAMAIS SUR DEUX LIGNES — §3. Il le faisait de 901 à 1150 px,
   toute la bande des petits portables : la barre y demandait 513 px de menu quand il n'en
   restait que 427, et c'est le bouton qui cédait (39 px de haut, puis 57, puis 76 à 901).
   `flex:none` et `white-space:nowrap` le rendent incompressible ; c'est donc au menu de
   se resserrer, ce que fait la règle ci-dessous. Trouvé et corrigé le 6 septembre 2026. */
@media(min-width:901px) and (max-width:1150px){
  .entete{gap:16px;padding:0 1%}
  .nav{gap:12px;font-size:13px;letter-spacing:.03em}
  .marque img{height:48px}
}
/* La zone tactile fait 44 × 44 sans que le dessin bouge : le rembourrage agrandit la
   cible, la marge négative le reprend dans le flux. Corrigé le 6 septembre 2026 — le
   burger n'offrait que 26 × 20 px, et c'est la seule commande de navigation au doigt. */
.burger{display:none;background:none;border:0;width:26px;cursor:pointer;
  padding:12px 9px;margin:-12px -9px;box-sizing:content-box}
.burger span{display:block;height:1px;background:var(--taupe);margin:6px 0}
@media(max-width:900px){
  .nav{display:none}
  .burger{display:block;margin-left:auto}
  .entete{height:68px;padding:0 var(--pad-x)}
  .marque img{height:40px}
  /* De 561 à 900 px le bouton reste dans l'en-tête ET l'écran est tactile : il lui faut
     ses 44 px. Au-dessus de 900 px il garde les 10 × 15 du modèle Zoé, où le pointeur est
     une souris. En dessous de 561 px il n'est plus dans l'en-tête, il est dans le tiroir.
     Trouvé le 6 septembre 2026 : il faisait 39 px sur toute la bande des tablettes. */
  .entete__cta{padding:13px 18px}
}
/* le burger devient une croix quand le tiroir est ouvert */
.burger span{transition:transform 260ms cubic-bezier(.22,.61,.36,1),opacity 160ms ease}
.burger[aria-expanded="true"] span:first-child{transform:translateY(3.5px) rotate(45deg)}
.burger[aria-expanded="true"] span:last-child{transform:translateY(-3.5px) rotate(-45deg)}

/* ==========================================================================
   LE TIROIR — §3 du document de projet : plein écran, pas de barre horizontale.
   Il n'existe qu'en dessous de 900 px, là où la barre du haut disparaît.
   ========================================================================== */
.tiroir{position:fixed;inset:0;z-index:80;background:var(--rose);
  display:flex;flex-direction:column;justify-content:center;
  padding:clamp(72px,14vw,110px) var(--pad-x) clamp(32px,6vw,56px);
  overflow-y:auto;overscroll-behavior:contain;
  visibility:hidden;opacity:0;
  transition:opacity 300ms ease,visibility 0s linear 300ms}
.tiroir[data-ouvert]{visibility:visible;opacity:1;transition:opacity 300ms ease}
body.est-fige{overflow:hidden}
.tiroir__fond{position:absolute;inset:0;z-index:0;
  background:url('assets/grain.jpg') center/cover no-repeat;
  background-image:image-set(url('assets/grain.webp') type('image/webp'),
                             url('assets/grain.jpg')  type('image/jpeg'));
  opacity:.5;mix-blend-mode:multiply;pointer-events:none}
.tiroir__dedans{position:relative;z-index:1;width:100%;max-width:520px;margin-inline:auto}
.tiroir__sur{font-size:11px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--terre-fonce);margin:0 0 clamp(20px,4vw,30px)}
.tiroir__liste{list-style:none;padding:0;margin:0}
.tiroir__liste li{border-top:1px solid var(--poudre)}
.tiroir__liste li:last-child{border-bottom:1px solid var(--poudre)}
.tiroir__liste a{display:flex;align-items:baseline;gap:16px;text-decoration:none;
  padding:clamp(13px,2.6vw,18px) 0;color:var(--taupe);
  /* chaque entrée entre en décalé quand le tiroir s'ouvre */
  opacity:0;transform:translateY(10px);
  transition:opacity 420ms ease,transform 420ms cubic-bezier(.22,.61,.36,1),color 180ms ease}
.tiroir[data-ouvert] .tiroir__liste a{opacity:1;transform:none}
.tiroir__liste li:nth-child(1) a{transition-delay:60ms}
.tiroir__liste li:nth-child(2) a{transition-delay:110ms}
.tiroir__liste li:nth-child(3) a{transition-delay:160ms}
.tiroir__liste li:nth-child(4) a{transition-delay:210ms}
.tiroir__liste li:nth-child(5) a{transition-delay:260ms}
.tiroir__liste li:nth-child(6) a{transition-delay:310ms}
.tiroir__num{font-family:var(--serif);font-size:13px;color:var(--terre-fonce);
  font-variant-numeric:tabular-nums;flex:none;width:2.2em}
.tiroir__lbl{font-family:var(--serif);font-size:clamp(25px,6.4vw,34px);line-height:1.1;
  color:var(--terre)}
.tiroir__liste a:hover .tiroir__lbl,
.tiroir__liste a[aria-current] .tiroir__lbl{color:var(--terre-fonce)}
.tiroir__pied{margin-top:clamp(26px,5vw,40px);display:grid;gap:14px;justify-items:start;
  opacity:0;transform:translateY(10px);
  transition:opacity 420ms ease 340ms,transform 420ms cubic-bezier(.22,.61,.36,1) 340ms}
.tiroir[data-ouvert] .tiroir__pied{opacity:1;transform:none}
.tiroir__pied p{margin:0;font-size:14px;line-height:1.7;color:var(--taupe)}
.tiroir__pied a:not(.btn){color:var(--terre-fonce)}
/* fermeture : la croix du burger reste au-dessus du tiroir */
.entete{z-index:90}
@media(min-width:901px){.tiroir{display:none}}
@media (prefers-reduced-motion:reduce){
  .tiroir__liste a,.tiroir__pied{transition:none;opacity:1;transform:none}
}
@media(max-width:560px){
  .entete__cta{display:none}
  /* 9,5 px, c'était l'adresse du cabinet en plus petit que tout le reste du site.
     Plancher à 11 px ; l'espacement se resserre pour que la ligne tienne. */
  .barre{font-size:11px;letter-spacing:.06em;padding:8px var(--pad-x);gap:12px}
}
@media(max-width:400px){
  /* sous 400 px la ligne ne tient plus à deux : l'adresse passe seule, en entier */
  .barre{flex-wrap:wrap;justify-content:center;text-align:center;row-gap:3px}
}

/* ---------- hero ----------
   Zoé : rapport 0,601 · bande 33,1 % · arche 28,2 × 72,4 à 18,8 % · titre à 52,6 %
   BANDE ÉLARGIE À 40,1 %, demande d'Oriane du 5 septembre 2026 : « voir l'image en entier ».
   Le nombre n'est pas choisi à l'œil. Le hero fait 0,60079 × sa largeur de haut ; une photo
   d'eau en 1100×1650 tient donc toute la bande, sans recadrage, à 0,60079 × 2/3 = 40,05 %.
   À 33,1 % `object-fit:cover` mangeait 17,4 % de la largeur de l'image. Le rapport est
   constant : l'image reste entière à toutes les largeurs au-dessus de 901 px. */
.hero{position:relative;display:grid;grid-template-columns:40.1% 59.9%;
  aspect-ratio:1265/760;background:var(--rose);overflow:hidden}
/* Zoé pose une texture de papier sur toute la largeur du hero (crayon.png,
   1425 x 760). Ici c'est de l'eau floutée à 26 px : plus aucune ondulation ne se
   reconnaît, ça ne compte donc pas comme une image posée sur la page. */
.hero::before{content:'';position:absolute;inset:0;z-index:0;
  background:url('assets/grain.jpg') center/cover no-repeat;
  background-image:image-set(url('assets/grain.webp') type('image/webp'),
                             url('assets/grain.jpg')  type('image/jpeg'));
  opacity:.5;mix-blend-mode:multiply;pointer-events:none}
.hero__matiere{position:relative;overflow:hidden;background:var(--rose)}
.hero__matiere img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.8}
.arche{position:absolute;z-index:3;top:50%;left:18.8%;transform:translateY(-50%);
  width:28.2%;height:72.4%;
  border-radius:400px 400px 0 0;overflow:hidden;                 /* Zoé : 400 px sur 357 de large */
  box-shadow:0 22px 54px rgba(111,99,86,.24)}
.arche img{width:100%;height:100%;object-fit:cover}
/* l'arche peut porter un dessin au trait plutôt qu'une photo : fond rose,
   dessin contenu et centré, jamais rogné */
.arche--dessin{background:var(--rose);box-shadow:0 22px 54px rgba(111,99,86,.18)}
.arche--dessin img{object-fit:contain;padding:clamp(14px,2.2vw,30px) clamp(10px,1.6vw,22px)}
.hero__texte{position:relative;z-index:4;display:flex;flex-direction:column;
  justify-content:center;padding:clamp(38px,5vw,72px) var(--pad-x) clamp(38px,5vw,72px) 29%}
/* l'accroche du hero des pages de pratique — Zoé la pose en H2 sous le H1 */
.hero__accroche{font-family:var(--script);font-weight:400 !important;
  font-size:clamp(28px,3.4vw,45px);line-height:1.26;color:var(--terre);margin:14px 0 26px}
/* aligné à gauche avec le reste de la colonne du hero — 4 septembre 2026, seconde demande :
   centré, il ne tombait pas sur le même axe que le surtitre, le titre et le rotateur. */
.hero__action{margin:0}
.hero__courbe{position:absolute;right:0;bottom:0;width:62%;z-index:1;
  color:var(--poudre);pointer-events:none;display:block;height:auto}
@media(max-width:860px){
  .hero{grid-template-columns:1fr;aspect-ratio:auto;display:block}
  .hero__matiere{position:relative;height:clamp(200px,42vw,280px)}
  .arche{position:relative;top:auto;left:auto;transform:none;
    width:min(62%,240px);height:auto;aspect-ratio:357/550;
    margin:calc(-1 * clamp(90px,22vw,140px)) auto 0;
    box-shadow:0 16px 38px rgba(111,99,86,.22)}
  .hero__texte{padding:clamp(26px,6vw,40px) var(--pad-x) clamp(34px,7vw,48px)}
  .hero__courbe{width:86%;opacity:.8}
}

/* ---------- le rotateur, repris du site d'origine ----------
   2000 ms entre les mots, fondu 650 ms, interlettrage 0,38 em */
/* Les trois mots alternent : terre, taupe, terre. Oriane demandait « ocre / noir /
   ocre » — l'ocre n'existe plus dans cette palette et le §3 proscrit le noir :
   --terre en est le plus proche, --taupe est le ton le plus foncé autorisé.
   Le bloc est centré sous la phrase du hero, à sa demande. */
.rotateur{position:relative;display:block;height:1.6em;margin:18px 0 26px;
/* Aligné à GAUCHE depuis le 4 septembre 2026, comme le surtitre et le h1 au-dessus.
   Centré, les trois mots partageaient bien leur centre mais commençaient à 956, 991 et
   988 px : le mot sautait de 35 px à chaque rotation. À gauche, ils partent tous du même
   point. Cela annule le centrage demandé le 2 septembre. */
  font-size:clamp(13px,1.5vw,17px);line-height:1.5;text-align:left;
  letter-spacing:.38em;text-transform:uppercase;color:var(--terre)}
.rotateur__mot:nth-child(2){color:var(--taupe)}
.rotateur__mot{position:absolute;left:0;right:0;top:0;opacity:0;transform:translateY(.5em);
  transition:opacity 650ms cubic-bezier(.22,.61,.36,1),transform 650ms cubic-bezier(.22,.61,.36,1)}
.rotateur__mot.est-actif{opacity:1;transform:translateY(0)}
.rotateur__mot.sen-va{opacity:0;transform:translateY(-.5em)}
.rotateur.est-fixe{height:auto}
.rotateur.est-fixe .rotateur__mot{position:static;opacity:1;transform:none;transition:none;
  display:inline;margin-right:.4em}
.rotateur.est-fixe .rotateur__mot:nth-child(even){color:var(--taupe)}

/* ---------- présentation ----------
   Zoé : rapport 0,659 · portrait 20,1 × 45,7 à 2,4 % · texte 28 → 67,9 % · matière 26,6 % */
/* La section garde le rapport de Zoé, mais le texte est DANS LE FLUX : avec quatre
   paragraphes il dépassait la hauteur fixée par aspect-ratio et se faisait couper par
   overflow:hidden en dessous de 1280 px. En flux, il fait grandir la section. */
/* min-height et non aspect-ratio : aspect-ratio donne une hauteur DÉFINIE, que le
   contenu ne peut pas repousser — le texte à quatre paragraphes se faisait couper par
   overflow:hidden en dessous de 1280 px. 65.85vw reproduit le rapport 1265/833 de Zoé
   tout en laissant la section grandir quand le texte l'exige. */
.presentation{position:relative;background:var(--blanc);min-height:min(65.85vw,950px);
  overflow:hidden;display:flex;align-items:center}
.presentation__portrait{position:absolute;left:2.4%;top:50%;transform:translateY(-50%);
  width:23%;height:52.3%;overflow:hidden}   /* agrandi avec le texte à 4 paragraphes,
                                               rapport 2:3 conservé */
.presentation__portrait img{width:100%;height:100%;object-fit:cover}
/* Retour aux 39,9 % de Zoé le 4 septembre 2026. La colonne avait été élargie à 44 % parce
   que « Je suis Oriane Marie » en manuscrite demandait 55 % de la laize et se coupait en
   deux ; le titre est repassé en Haigrast Serif, bien plus étroite — il ne demande plus que
   397 px sur 574 disponibles à 1440. La proportion du modèle est donc rendue. */
.presentation__texte{position:relative;z-index:2;margin-left:28%;width:39.9%;
  padding:clamp(34px,4.4vw,64px) 0}
.presentation__texte p:last-child{margin-bottom:0}
.presentation__matiere{position:absolute;right:0;top:0;width:26.6%;height:100%;overflow:hidden}
.presentation__matiere img{width:100%;height:100%;object-fit:cover}
@media(max-width:940px){
  .presentation{aspect-ratio:auto;padding-bottom:40px}
  .presentation__portrait,.presentation__texte,.presentation__matiere{
    position:static;transform:none;width:auto;height:auto}
  .presentation__portrait{width:52%;margin:34px auto 0}
  .presentation__portrait img{aspect-ratio:254/381}
  .presentation__texte{padding:34px var(--pad-x)}
  .presentation__matiere img{aspect-ratio:16/9}
}

/* Trait de liaison — relevé sur Zoé le 29 août : 1 × 120 px, et surtout **à cheval sur
   la jointure de deux sections** — chez elle 64 px au-dessus, 56 px en dessous. Il ne
   prend aucune place dans le flux, il chevauche. Une seule fois par page, jamais deux.
   Sa page Tarifs et sa page Contact n'en ont pas : ne pas en ajouter là.
   Sa valeur est un noir pur ; on garde le taupe, le plus foncé que la palette autorise. */
.liaison{position:relative;height:0;z-index:5;pointer-events:none}
.liaison span{position:absolute;left:50%;top:0;translate:-50% -50%;
  display:block;width:1px;height:120px;background:var(--taupe)}

/* ---------- les deux espaces ---------- */
/* « Ce que je fais » — 4 septembre 2026. Les deux photos d'arche sont sorties des cartes,
   à la demande d'Oriane, et le logo passe DERRIÈRE la paire : il court d'une carte à
   l'autre et relie visuellement la psychothérapie au soin énergétique, au lieu que deux
   images séparées les opposent.
   Il est posé en pseudo-élément et non en fond de `.cartes` : le logo est trois fois plus
   large que haut et déborderait de la grille, qui est devenue courte sans les images. */
.espaces{position:relative;overflow:hidden;
  background:var(--rose);text-align:center;padding:clamp(52px,6.4vw,92px) var(--pad-x)}
/* Le symbole seul — les deux cercles qui se recoupent — et non le logo complet : Oriane le
   veut sans le lettrage. Extrait de `logo-horizontal.png` et recadré sur son encre, d'où le
   rapport 527/353. Il est ancré sur `.cartes` et non sur la section : centré sur la section,
   le titre en tirait le milieu 71 à 112 px trop haut. Absolu dans un conteneur de grille, il
   n'en devient pas un item. L'intersection des deux cercles tombe pile entre les deux cartes :
   c'est ce qui relie la psychothérapie au soin énergétique. */
.cartes{position:relative}
/* Le symbole est sur l'accueil ET sur la page Psychothérapie, avec deux géométries : ici
   celle de l'accueil, deux cartes courtes cadrées par les cercles ; plus bas `.espaces--mots`,
   recalculée le 5 septembre 2026 pour des cartes qui portent chacune un paragraphe. La note
   d'avant disait que le second cas était impossible — il ne l'était pas, il n'était pas
   calculé. */
/* Le titre respire au-dessus du symbole : l'arc haut des cercles remontait 63 px au-dessus
   du surtitre et lui passait dedans. C'est l'écart sous le titre qui le règle, pas la marge
   de la section — le symbole est ancré sur les cartes et suit donc le titre. */
.espaces--symbole .cartes{grid-template-columns:repeat(2,340px);gap:192px;
  margin-top:clamp(40px,10vw,140px)}
.espaces--symbole .cartes::before{content:'';position:absolute;left:50%;top:50%;translate:-50% -50%;
  /* TOUT EST EN PIXELS ICI, et c'est indispensable. Le texte d'une carte doit tenir dans le
     CROISSANT — la zone comprise entre l'arc du cercle opposé et l'arc de son propre cercle.
     Ce croissant vaut 0,328 × largeur du symbole. « Soins énergétiques » fait 241 px : à
     730 px de symbole le croissant en faisait 240, et le mot, décalé de 34 px vers l'intérieur,
     posait son « So » sur le trait. Les deux exigences étaient inconciliables — il fallait
     W ≤ 532 pour dégager l'arc intérieur et W ≥ 665 pour rester dans le cercle droit.
     La solution est d'écarter les cartes : voir le `gap` ci-dessous.
     CERCLES LES PLUS PETITS POSSIBLES, demandé le 4 septembre 2026. Le calcul, avec des cartes
     de 340 px et un écart g : le texte va de cx+(49,5+g/2) à cx+(290,5+g/2), les arcs sont à
     cx+0,173W et cx+0,501W. Pour une marge m de chaque côté il faut g ≥ 155,2 + 4,11m, et la
     plus petite largeur est alors W = (290,5 + g/2 + m) / 0,501. À m = 9 px : g = 192,
     W = 790. On ne peut pas descendre plus bas sans que les mots touchent un arc. */
  width:790px;aspect-ratio:527/353;
  background:url('assets/logo-symbole.png?v=2026.9.52') center/contain no-repeat;
  opacity:.2;pointer-events:none;z-index:0}
@media(max-width:1000px){.espaces--symbole .cartes::before{width:min(86%,340px)}}
.carte{position:relative;z-index:1}
/* 340 px de carte et 192 px d'écart, en pixels fixes : c'est ce qui place le texte de chaque
   carte au milieu de son croissant, avec les plus petits cercles possibles. Ne pas y toucher
   sans refaire le calcul posé au-dessus de `.cartes::before` : la géométrie du symbole
   (rayon 0,337 W, centres à ±0,164 W) ne laisse aucune latitude. */
.cartes{display:grid;grid-template-columns:repeat(2,minmax(0,385px));justify-content:center;
  gap:clamp(20px,3vw,40px);
  /* l'accueil resserre ses cartes pour loger le symbole : voir `.espaces--symbole` */
  margin:clamp(30px,4vw,52px) auto 0;padding:0;list-style:none;max-width:var(--conteneur)}
.carte{display:flex;flex-direction:column;align-items:center}
/* quand les cartes portent un paragraphe, les deux textes n'ont pas la même
   longueur : le bouton est poussé en bas pour que la paire reste alignée */
.cartes{align-items:stretch}
.carte:has(.carte__mot) .btn{margin-top:auto}
.arche--carte{position:static;transform:none;width:100%;height:auto;
  aspect-ratio:300/350;margin-bottom:20px;box-shadow:none}       /* Zoé : 300 × 350 */
.carte .surtitre{color:var(--taupe);margin-bottom:18px}
/* Sans image, la carte se réduit à trois lignes. On lui rend de la hauteur : c'est ce qui
   laisse au symbole la place de respirer derrière, et ce qui redonne au bloc l'assise que les
   deux photographies lui donnaient. Contenu centré verticalement dans la carte. */
/* dans un porte-image d'arche, un dessin n'a pas besoin de la hauteur d'une photo */
.espaces .arche--carte.est-trait{aspect-ratio:300/230}
.espaces--symbole .carte{min-height:clamp(190px,21vw,300px);justify-content:center;
  padding:clamp(26px,3vw,40px) clamp(22px,2.6vw,36px)}
/* Le bas de la section loge la moitié basse du symbole, qui déborde des cartes. */
.espaces--symbole{padding-bottom:clamp(70px,19vw,200px)}
/* les cartes de la page Psychothérapie portent un paragraphe, pas celles de l'accueil */
.carte__mot{font-size:15px;line-height:1.62;margin:0 0 20px;max-width:34ch}
/* deux colonnes de 340 px écartées de 192 px demandent 872 px, plus les marges latérales */
@media(max-width:1000px){.espaces--symbole .cartes{grid-template-columns:1fr;gap:clamp(20px,3vw,40px)}}
/* Dans le régime à deux colonnes, TOUT est en pixels fixes — le symbole l'est déjà. En `vw`,
   la marge et la hauteur des cartes rétrécissaient avec l'écran pendant que le dessin gardait
   ses 790 px, et l'arc haut remontait dans le titre : de 55 px à 1024, de 2 px à 1280.
   150 + 150 − 264,5 = 35,5 px d'air sous le surtitre, identiques à toutes les largeurs. */
@media(min-width:1001px){
  .espaces--symbole .cartes{margin-top:150px}
  .espaces--symbole .carte{min-height:300px}
}
@media(max-width:860px){.cartes{grid-template-columns:1fr}}

/* ---------- « Deux mouvements » — le symbole SORTI de dessous le texte ----------
   5 septembre 2026, à la demande d'Oriane : « mets le logo en plus petit, sors
   psychothérapie et soin énergétique du logo, mais fais quand même quelque chose de joli ».
   Cela remplace, sur l'accueil, le dispositif du 4 septembre où chaque carte était logée
   dans un croissant du symbole : c'est ce calage qui imposait un dessin de 790 px et deux
   colonnes séparées de 192 px, et c'est lui qu'Oriane ne veut plus.

   LE SYMBOLE PASSE DE 790 À 160 PX, et change de statut. Derrière le texte il devait être
   un filigrane à 20 % — sinon il traversait les mots. Posé entre les deux cartes il n'a plus
   rien à traverser : il est à pleine encre, et il se lit enfin comme le signe de la marque
   au lieu d'une ombre. Son rôle ne change pas — relier la psychothérapie et le soin
   énergétique — mais il le tient par sa place et non plus par son emprise.

   DEUX FILETS DE POUDRE le flanquent, un de chaque côté, 62 px chacun. C'est l'emploi que le
   §3 réserve à `--poudre` : des filets, rien d'autre. Le dégradé est en pourcentages parce
   qu'ils se calculent sur l'écart : le symbole occupe 160 px au milieu des 312, plus 14 px
   de dégagement de part et d'autre, soit une fenêtre transparente de 19,9 % à 80,1 %.
   Le filet ne passe pas DERRIÈRE le symbole, il s'interrompt : le cercle de gauche est rempli
   de rose et le droit est vide, un trait continu se verrait d'un côté et pas de l'autre.

   LA GÉOMÉTRIE EST LIBRE, désormais — c'est tout l'intérêt. Deux cartes de 300 px, un écart
   de 312, la rangée fait 912 px : deux colonnes à partir de 1040 px de fenêtre. Ces nombres
   ne dépendent plus du rayon des cercles ; on peut les changer sans rien recalculer. */
/* AGRANDI LE 5 SEPTEMBRE 2026, à ma demande : « ça reste hyper important comme bloc, il est
   trop petit et pas assez mis en valeur ». Le relevé lui donnait raison — à 1440 px l'accueil
   faisait présentation 948, avis 890, duo 802, grappe 709, et ce bloc-ci **625**, le plus court
   de la page alors qu'il porte les deux prestations. Il remonte à ~780, entre la grappe et le
   duo, sans passer devant la présentation qui reste la tête de page.
   Quatre leviers, tous mesurés, aucun au hasard :
     cartes    300 → 340 px      symbole  160 → 184     écart  312 → 320
     titre      46 → 54 px       intitulé  28 → 34      texte   15 → 16,5
     marge de section  92 → 135 px de haut et de bas
     écart au-dessus des cartes  52 → 76
   La rangée passe de 912 à 1000 px : le régime à deux colonnes tient à partir de 1130 px de
   fenêtre au lieu de 1040. Le symbole grandit AVEC le bloc et reste très loin des 790 px du
   dispositif abandonné — la consigne « plus petit » n'est pas défaite. */
.espaces--lien{padding-top:clamp(72px,9.4vw,136px)}
.espaces--lien .cartes{grid-template-columns:repeat(2,340px);gap:320px;
  margin-top:clamp(40px,5.3vw,76px)}
.espaces--lien h2{font-size:clamp(28px,4.4vw,54px)}
.espaces--lien .carte h3{font-size:clamp(23px,2.9vw,34px)}
.espaces--lien .carte{min-height:0;padding:0;justify-content:flex-start}
/* VARIANTE A, retenue le 5 septembre 2026 : « c'est plus simple, plus épuré ». Le texte
   s'ajoute, rien ne l'encadre — ni fond blanc, ni ombre, ni dôme. C'est cohérent avec
   l'accueil, qui ne porte aucune carte nulle part ailleurs. Les trois autres essais
   (encart blanc plat, encart à ombre, encart à sommet en dôme) sont écartés.
   `max-width:none` : la laize de 34 caractères de `.carte__mot` est faite pour les cartes
   de 385 px de la page Psychothérapie ; ici la carte fait 300 px et la borne ne sert plus
   qu'à créer un décalage entre les deux colonnes. */
.espaces--lien .carte__mot{max-width:none;margin:0 0 26px;font-size:16.5px;line-height:1.62}
.espaces--lien .cartes::before{content:'';position:absolute;left:50%;top:50%;
  translate:-50% -50%;width:184px;aspect-ratio:527/353;z-index:1;pointer-events:none;
  background:url('assets/logo-symbole.png?v=2026.9.52') center/contain no-repeat}
.espaces--lien .cartes::after{content:'';position:absolute;left:50%;top:50%;
  translate:-50% -50%;width:320px;height:1px;z-index:0;pointer-events:none;
  background:linear-gradient(90deg,var(--poudre) 0,var(--poudre) 16.9%,
    transparent 16.9%,transparent 83.1%,var(--poudre) 83.1%,var(--poudre) 100%)}
/* la section n'a plus à loger la moitié basse d'un dessin de 790 px : elle reprend le
   rembourrage courant des blocs */
.espaces--lien{padding-bottom:clamp(72px,9.4vw,136px)}
@media(max-width:1129px){
  /* les cartes s'empilent, le symbole reste entre les deux — l'écart vaut sa hauteur
     (107 px) plus 28 px de dégagement de chaque côté. Les filets, eux, ne se retournent
     pas à la verticale : ils disparaissent. */
  .espaces--lien .cartes{grid-template-columns:1fr;max-width:360px;
    margin-inline:auto;gap:179px}
  .espaces--lien .cartes::after{display:none}
}


/* ---------- le symbole derrière deux cartes qui parlent ----------
   Page Psychothérapie, 5 septembre 2026, à la demande d'Oriane : « organise-le en faisant
   réapparaître mon logo ». Le symbole avait été retiré de cette page le 4 septembre parce que
   la géométrie de l'accueil — cartes de 340, écart 192, symbole de 790 — ne s'y transposait
   pas : les cartes y portent un paragraphe, et les arcs traversaient le texte. Le calcul est
   refait ici pour des cartes qui parlent, au lieu de renoncer au symbole.

   CE QUI A CHANGÉ DANS LE MODÈLE. Sur l'accueil, seules trois lignes courtes devaient tenir
   dans le croissant, et la mesure se faisait à mi-hauteur. Ici la carte est haute : il faut
   que le texte reste dans le croissant SUR TOUTE SA HAUTEUR. Les deux arcs qui bordent le
   croissant droit sont à cx−0,164W+S et cx+0,164W+S, avec S = √(R²−y²) et R = 0,337W : ils
   glissent tous les deux vers la gauche quand on s'éloigne du milieu, si bien que le croissant
   garde sa largeur (0,328 W) mais se décale. La contrainte gauche est donc la plus dure au
   milieu, la droite aux extrémités de la carte.
     g/2 ≥ 0,173W + m                        (au milieu)
     g/2 + C ≤ 0,164W + √(R²−h²) − m         (en haut et en bas de la carte)
   Avec C = 300 px de carte, m = 12 px de marge et h = 165 px de demi-hauteur mesurée :
   W = 1106, g = 407. La rangée fait 1007 px, plus les marges : le régime à deux colonnes
   tient à partir de 1140 px de fenêtre.
   Refaire ces quatre nombres ensemble si le texte d'une carte s'allonge — h grandit, et
   c'est h qui commande W. */
.espaces--mots .cartes{grid-template-columns:repeat(2,300px);gap:407px}
.espaces--mots .cartes::before{width:1106px}
.espaces--mots .carte__mot{max-width:none}
@media(min-width:1140px){
  /* le symbole fait 741 px de haut : il déborde de 213 px au-dessus et au-dessous des cartes.
     L'écart au-dessus lui laisse la place sans monter dans le surtitre, le fond de section
     l'accueille en bas. Tout en pixels fixes, comme sur l'accueil, et pour la même raison :
     en `vw` le dessin garderait ses 1106 px pendant que les marges rétréciraient. */
  .espaces--mots .cartes{margin-top:240px}
  .espaces--mots .carte{min-height:0;justify-content:flex-start;padding:0}
  .espaces--mots.espaces--symbole{padding-bottom:240px}
}
@media(max-width:1139px){
  /* une seule colonne : le symbole redevient un filigrane derrière la pile, comme sur
     l'accueil sous 1000 px. */
  .espaces--mots .cartes{grid-template-columns:1fr;gap:clamp(30px,4vw,52px);
    max-width:420px;margin-top:clamp(36px,6vw,72px)}
  .espaces--mots .cartes::before{width:min(86%,340px)}
  .espaces--mots .carte{min-height:0;padding:0}
}


/* ---------- la respiration ---------- */
.respiration{position:relative;background:var(--bronze);color:var(--blanc);text-align:center;
  padding:clamp(46px,5.6vw,78px) var(--pad-x);overflow:hidden}
.respiration__orn{position:absolute;left:50%;top:50%;translate:-50% -50%;
  height:190%;width:auto;opacity:.16;pointer-events:none;
  filter:brightness(0) invert(1)}
.respiration p{position:relative;z-index:1}
/* La manuscrite se lisait mal en blanc sur le bronze : ces citations sont passées
   dans la police des titres, à la demande d'Oriane. */
.respiration p{font-family:var(--serif);font-weight:400 !important;letter-spacing:.01em;
  font-size:clamp(25px,3.1vw,40px);line-height:1.2;margin:0;
  max-width:26ch;margin-inline:auto;text-wrap:balance}
/* la seule voix empruntée du site est signée. Le nom passe en sans, en gras :
   blanc sur bronze ne vaut que 3,00:1, ce qui exige au moins 18,66 px gras.
   D'où le 19 px plancher — ne pas descendre en dessous. */
.respiration cite{display:block;font-family:var(--sans);font-style:normal;font-weight:700;
  font-size:clamp(19px,1.5vw,21px);letter-spacing:.03em;line-height:1.3;
  margin-top:clamp(16px,1.8vw,26px)}

/* ---------- conviction ---------- */
.conviction{background:var(--blanc);display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(26px,4vw,60px);padding:clamp(52px,6.4vw,92px) var(--pad-x);
  max-width:var(--conteneur);margin-inline:auto}
.conviction__fort{font-family:var(--serif);font-weight:400;
  font-size:clamp(25px,3.2vw,36px);line-height:1.22;color:var(--terre);margin:0}
.conviction__fort em{font-style:normal;color:var(--terre)}
.conviction__pivot{color:var(--terre);font-size:18px;line-height:1.6}
.conviction div>p:last-child{margin-bottom:0}
@media(max-width:860px){.conviction{grid-template-columns:1fr}}


/* ==========================================================================
   PAGES INTÉRIEURES — mêmes six tons, mêmes trois polices, mêmes mesures.
   Rien de neuf dans la palette : blanc, rose, taupe, bronze, terre, poudre.
   ========================================================================== */

/* ---------- tête de page intérieure ----------
   Une bande rose plus courte que le hero de l'accueil : rapport 1265/430
   au lieu de 1265/760. Même courbe poudre en bas à droite. */
.tete{position:relative;background:var(--rose);overflow:hidden;
  padding:clamp(52px,7vw,104px) var(--pad-x) clamp(58px,7.4vw,112px)}
.tete__dedans{position:relative;z-index:2;max-width:var(--conteneur);margin-inline:auto;
  max-width:min(var(--conteneur),860px);text-align:center}
.tete h1{margin-bottom:18px}
.tete__phrase{font-family:var(--script);font-weight:400 !important;
  font-size:clamp(29px,3.5vw,45px);line-height:1.22;color:var(--terre);margin:0;
  white-space:nowrap}
.tete__reperes{font-size:12px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--taupe);margin:22px 0 0}
.tete__courbe{position:absolute;right:0;bottom:0;width:56%;z-index:1;
  color:var(--poudre);pointer-events:none;display:block;height:auto}
.tete--sombre{background:var(--taupe)}
.tete--sombre h1,.tete--sombre .tete__phrase{color:var(--rose)}
.tete--sombre .tete__reperes{color:var(--rose);opacity:.8}
.tete--sombre .surtitre{color:var(--poudre)}

/* ---------- bandeau de transition, sous la tête ---------- */
.bandeau{background:var(--taupe);color:var(--rose);text-align:center;
  padding:clamp(16px,2vw,24px) var(--pad-x);
  font-size:13px;letter-spacing:.14em;text-transform:uppercase}
.bandeau--bronze{background:var(--bronze);color:var(--blanc)}

/* ---------- chapitre à folio ----------
   Le chiffre romain du site actuel, gardé. Colonne de texte à 67,9 %
   comme la présentation de l'accueil. */
.chapitre{padding:clamp(52px,6.4vw,96px) var(--pad-x)}
.chapitre--rose{background:var(--rose)}
.chapitre--blanc{background:var(--blanc)}
.chapitre__dedans{max-width:var(--conteneur);margin-inline:auto;
  display:grid;grid-template-columns:88px minmax(0,1fr);gap:clamp(18px,3vw,44px)}
.folio{font-family:var(--serif);font-weight:400;font-size:clamp(22px,2.4vw,30px);
  line-height:1;color:var(--poudre);padding-top:6px}
.folio span{display:block;font-family:var(--sans);font-size:11px;font-weight:400;
  letter-spacing:.2em;text-transform:uppercase;color:var(--taupe);margin-top:10px;
  line-height:1.5}
.chapitre__corps{max-width:67.9ch}
.chapitre__corps>p:last-child{margin-bottom:0}
@media(max-width:760px){
  .chapitre__dedans{grid-template-columns:1fr;gap:14px}
  .folio{display:flex;align-items:baseline;gap:14px;padding-top:0}
  .folio span{margin-top:0}
}

/* ---------- citation ---------- */
.citation{background:var(--blanc);text-align:center;
  padding:clamp(44px,5.4vw,80px) var(--pad-x)}
.citation--rose{background:var(--rose)}
.citation p{font-family:var(--serif);font-weight:400;
  font-size:clamp(23px,3vw,34px);line-height:1.25;color:var(--terre);
  max-width:26ch;margin:0 auto 16px}
/* Sur rose, la terre ne vaut que 4,04:1 : assez pour du grand texte (24 px et plus), pas
   en dessous. Le plancher de 23 px passait sous le seuil sur téléphone — il monte à 24 px,
   comme celui du h2 (§5). Posé le 10 septembre 2026 avec la citation de Pema Chödrön. */
.citation--rose p{font-size:clamp(24px,3vw,34px)}
.citation cite{font-style:normal;font-size:11px;letter-spacing:.24em;
  text-transform:uppercase;color:var(--taupe)}

/* ---------- grille de points ---------- */
.points{padding:clamp(50px,6vw,90px) var(--pad-x)}
.points--rose{background:var(--rose)}
.points--blanc{background:var(--blanc)}
.points__dedans{max-width:var(--conteneur);margin-inline:auto}
.points__liste{list-style:none;padding:0;margin:clamp(28px,3.6vw,46px) 0 0;
  display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(22px,3vw,44px)}
.points__liste--2{grid-template-columns:repeat(2,1fr)}
.points__liste li{border-top:1px solid var(--poudre);padding-top:18px}
.points__liste h3{font-size:clamp(19px,2vw,23px);margin-bottom:8px}
.points__liste p{font-size:15.5px;line-height:1.6;margin:0}
@media(max-width:900px){.points__liste{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.points__liste,.points__liste--2{grid-template-columns:1fr}}

/* ---------- questions fréquentes ---------- */
.faq{background:var(--blanc);padding:clamp(50px,6vw,90px) var(--pad-x)}
.faq--rose{background:var(--rose)}
.faq__dedans{max-width:min(var(--conteneur),840px);margin-inline:auto}
.faq details{border-bottom:1px solid var(--poudre)}
.faq summary{cursor:pointer;list-style:none;padding:18px 34px 18px 0;position:relative;
  font-family:var(--serif);font-weight:700;font-size:clamp(17px,1.9vw,20px);
  line-height:1.35;color:var(--terre)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';position:absolute;right:2px;top:50%;
  transform:translateY(-50%);font-family:var(--sans);font-size:19px;color:var(--poudre)}
.faq details[open] summary::after{content:'\2013'}
.faq details p{margin:0 0 18px;font-size:16px;line-height:1.62;max-width:62ch}

/* ---------- offre : le bloc tarif ---------- */
.offres{padding:clamp(50px,6vw,90px) var(--pad-x);background:var(--blanc)}
.offres--rose{background:var(--rose)}
.offres__dedans{max-width:var(--conteneur);margin-inline:auto;
  display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(24px,3.4vw,48px);
  align-items:start}
@media(max-width:860px){.offres__dedans{grid-template-columns:1fr}}
.offre{border:1px solid var(--poudre);background:var(--blanc);
  padding:clamp(26px,3.2vw,42px)}
.offres--rose .offre{background:var(--blanc)}
.offre__prix{font-family:var(--serif);font-weight:700;color:var(--terre);
  font-size:clamp(28px,3.4vw,40px);line-height:1;margin:0 0 6px}
.offre__duree{font-size:12px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--taupe);margin:0 0 22px}
.offre ul{list-style:none;padding:0;margin:0 0 26px}
.offre li{border-top:1px solid var(--poudre);padding:12px 0;
  font-size:15.5px;line-height:1.55}
.offre li:first-child{border-top:0;padding-top:0}

/* ---------- colophon : « Je suis Oriane Marie » ---------- */
.colophon{background:var(--taupe);color:var(--rose);
  padding:clamp(50px,6vw,90px) var(--pad-x)}
.colophon__dedans{max-width:var(--conteneur);margin-inline:auto;
  display:grid;grid-template-columns:34% minmax(0,1fr);gap:clamp(26px,4vw,60px);
  align-items:center}
.colophon h2,.colophon h3{color:var(--rose)}
.colophon .surtitre{color:var(--poudre)}
.colophon .script{color:var(--poudre)}
.colophon p{color:var(--rose)}
.colophon__portrait{overflow:hidden}
.colophon__portrait img{width:100%;height:100%;object-fit:cover;aspect-ratio:254/318}
.colophon__reperes{list-style:none;padding:0;margin:26px 0 0;
  display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.6vw,36px)}
.colophon__reperes li{border-top:1px solid rgba(204,173,158,.4);padding-top:14px}
.colophon__reperes h3{font-size:17px;margin-bottom:6px}
.colophon__reperes p{font-size:14px;line-height:1.55;margin:0;opacity:.9}
@media(max-width:860px){
  .colophon__dedans{grid-template-columns:1fr}
  .colophon__reperes{grid-template-columns:1fr}
}

/* ---------- prose simple : mentions légales ---------- */
.prose{background:var(--blanc);padding:clamp(46px,5.6vw,84px) var(--pad-x)}
.prose__dedans{max-width:min(var(--conteneur),760px);margin-inline:auto}
.prose h2{font-size:clamp(21px,2.4vw,28px);margin:38px 0 12px}
.prose h2:first-child{margin-top:0}
.prose p,.prose li{font-size:15.5px;line-height:1.68}
.prose ul{padding-left:20px}

/* ---------- page 404 ---------- */
.perdu{background:var(--rose);text-align:center;
  padding:clamp(70px,10vw,150px) var(--pad-x)}
.perdu p{max-width:46ch;margin:0 auto 26px}

/* ==========================================================================
   BAS DE PAGE COMMUN — en pratique, les avis, l'appel final, le pied
   ========================================================================== */
/* en pratique : le bloc taupe, trois colonnes */
.pratique{background:var(--taupe);color:var(--rose);
  padding:clamp(48px,5.8vw,84px) var(--pad-x);
  display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(22px,3vw,46px);
  max-width:var(--conteneur);margin-inline:auto}
.pratique h3{color:var(--rose);font-size:26px;margin-bottom:10px}
.pratique p{color:var(--rose);opacity:.9;font-size:15.5px;line-height:1.6;margin:0}
@media(max-width:860px){.pratique{grid-template-columns:1fr}}

/* avis — carrousel repris du site actuel (§16 de styles.css), couleurs et polices adaptées */
.avis{background:var(--rose);text-align:center;padding:clamp(48px,5.8vw,84px) var(--pad-x);
  overflow:hidden}
.avis h2{font-size:clamp(28px,3.4vw,40px);line-height:1.0;margin-bottom:0}
.avis__filet{display:block;width:140px;height:1px;margin:14px auto 0;
  background:linear-gradient(90deg,transparent,var(--poudre) 50%,transparent)}
.avis__note{font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--taupe);
  margin:16px 0 clamp(28px,3.6vw,44px)}

/* la pile : 360 px de large, 440 de haut — valeurs du site actuel, inchangées */
.tcards{position:relative;z-index:1;width:min(360px,84vw);height:440px;
  margin:4px auto 0;touch-action:pan-y;list-style:none;padding:0}
.tcard{position:absolute;inset:0;margin:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;
  padding:clamp(46px,7vw,58px) clamp(26px,5vw,38px) clamp(28px,5vw,40px);
  border-radius:22px;text-align:center;
  /* le fond expresso devient taupe : aucun noir dans cette palette */
  background:radial-gradient(120% 80% at 50% -10%,rgba(204,173,158,.22),transparent 60%),
             linear-gradient(165deg,var(--taupe-clair) 0%,var(--taupe) 100%);
  border:1px solid rgba(204,173,158,.45);          /* le filet or devient poudre */
  box-shadow:0 26px 60px -28px rgba(111,99,86,.55);
  cursor:pointer;will-change:transform,opacity;
  transition:transform .5s cubic-bezier(.22,.61,.36,1),opacity .5s cubic-bezier(.22,.61,.36,1)}
.tcard.is-front{cursor:grab}
.tcard.is-front:active{cursor:grabbing}
/* guillemets calligraphiés — Pinyon, comme sur le site actuel, en poudre */
.tcard::before,.tcard::after{position:absolute;pointer-events:none;
  font-family:'Pinyon Script',cursive;line-height:1;
  font-size:clamp(58px,8vw,82px);color:var(--poudre);opacity:.55}
.tcard::before{content:'«';top:20px;left:30px}
.tcard::after{content:'»';bottom:2px;right:30px}
/* le corps des avis passe à l'Arial du modèle — Haigrast n'a pas d'italique dessinée */
.tc-texte{position:relative;z-index:1;margin:0;
  font-family:var(--sans);font-size:clamp(15px,1.7vw,18px);line-height:1.55;
  color:var(--rose)}
.tc-auteur{position:relative;z-index:1;margin:2px 0 0;
  font-family:var(--serif);font-weight:700;
  font-size:clamp(16px,1.7vw,19px);line-height:1.3;letter-spacing:.04em;color:var(--rose)}
/* la poudre sur le taupe ne donne que 2,8:1 — l'auteur passe donc en rose (5,1:1),
   la distinction se fait par la serif et l'interlettrage, plus par la couleur */

.tcards-nav{margin-top:40px;display:flex;align-items:center;justify-content:center;gap:30px}
.tnav-btn{width:54px;height:54px;border-radius:50%;background:none;cursor:pointer;
  border:1px solid rgba(111,99,86,.35);display:grid;place-items:center;
  font-family:var(--serif);font-size:20px;color:var(--terre);
  transition:background 350ms ease,color 350ms ease,transform 350ms ease}
.tnav-btn:hover{background:var(--terre);color:var(--blanc);transform:scale(1.05)}
.avis__lien{display:inline-block;margin-top:clamp(24px,3vw,34px);
  font-size:13px;letter-spacing:.08em;color:var(--terre);text-underline-offset:5px}
@media(max-width:600px){.tcards{width:86vw;height:500px}}
@media(prefers-reduced-motion:reduce){.tcard{transition:none}}

/* CTA final — Zoé : 225 px, ratio 0,176 */
.final{background:var(--blanc);text-align:center;padding:clamp(46px,5.4vw,76px) var(--pad-x)}
/* `.final__orn` retirée le 4 septembre 2026 : Oriane a fait supprimer l'illustration du
   bandeau de fin, ainsi que la phrase « Il n'y a rien à préparer… ». La signature
   « à bientôt, peut-être. » reste — elle est le seul contenu du bandeau avec le bouton.
   `max-width:none` : la règle `.final p` la limitait à 43 % et la coupait en deux. */
/* Corps réduit le 6 septembre 2026, à la demande d'Oriane : la signature était le plus gros
   Pinyon du site (76 px), au-dessus même des bandeaux de souffle qui plafonnent à 72. Elle
   passe de clamp(50,6.8vw,76) à clamp(36,4.8vw,56) — environ un quart de moins. Elle reste
   sur une seule ligne : le texte fait 6,5 cadratins, soit 234 px à 390 px de large pour 346
   disponibles. Elle vit sur l'accueil, les mentions et la 404. */
.final__signature{font-family:var(--script);font-weight:400 !important;
  font-size:clamp(36px,4.8vw,56px);line-height:1.04;color:var(--terre);
  margin:0 0 24px;max-width:none;white-space:nowrap}
.final p{max-width:43%;margin:0 auto 26px}
@media(max-width:820px){.final p{max-width:none}}

/* pied — Zoé : 441 px */
.pied{background:var(--taupe);color:var(--rose);padding:clamp(46px,5.6vw,78px) var(--pad-x) 34px}
.pied__grille{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:clamp(24px,4vw,54px);
  max-width:var(--conteneur);margin-inline:auto}
@media(max-width:820px){.pied__grille{grid-template-columns:1fr}}
.pied img{height:64px;width:auto;margin-bottom:18px}
/* les intertitres du pied étaient des h4 après un h2 : un saut de niveau que les
   lecteurs d'écran signalent. Ce sont des h2 maintenant, l'aspect ne change pas. */
.pied .pied__titre{font-family:var(--serif);font-weight:700;font-size:19px;
  color:var(--rose);margin:0 0 12px}
.pied p,.pied a{font-size:14.5px;line-height:1.9;color:var(--rose);opacity:.88}
/* Sur un téléphone, le numéro et l'adresse du pied sont les deux liens les plus utiles du
   site — on les touche pour appeler ou pour écrire. Ils ne faisaient que 16 px de haut,
   pour un minimum recommandé de 44. Ils passent en bloc avec de la marge verticale, ce qui
   les amène à 44 px sans rien changer à l'apparence : la ligne reste à sa place, seule la
   zone touchable grandit. La règle vaut pour TOUS les liens d'appel et d'écriture du site —
   pied, tiroir mobile, carte « Me joindre », fiche de contact — et seulement sous 820 px,
   là où l'on touche au lieu de pointer. */
.pied a{text-decoration:none}
@media(max-width:820px){
  a[href^="tel:"],a[href^="mailto:"]{display:inline-block;padding-block:13px;line-height:1.25}
}
.pied a:hover{opacity:1;text-decoration:underline}
.pied__bas{max-width:var(--conteneur);margin:clamp(32px,4vw,48px) auto 0;
  padding-top:20px;border-top:1px solid rgba(244,234,230,.22);
  display:flex;flex-wrap:wrap;gap:16px;font-size:12px;opacity:.75}
.pied__bas a{font-size:12px}

section,footer{position:relative}


/* ==========================================================================
   LES BLOCS À IMAGES REPRIS DE ZOÉ
   Grappe éditoriale (sa section podcast), duo à image haute (sa section blog),
   bande Instagram, et les textures de fond façon crayon.png.
   ========================================================================== */

/* ---------- la grappe — Zoé : fond crayon 1425 x 538, images 291x358,
     130x130 ronde et 233x331, texte à droite ---------- */
.grappe{position:relative;background:var(--rose);overflow:hidden;
  padding:clamp(52px,6.4vw,96px) var(--pad-x)}
.grappe::before{content:'';position:absolute;inset:0;z-index:0;
  background:url('assets/grain.jpg') center/cover no-repeat;
  background-image:image-set(url('assets/grain.webp') type('image/webp'),
                             url('assets/grain.jpg')  type('image/jpeg'));
  opacity:.55;mix-blend-mode:multiply;pointer-events:none}
.grappe__dedans{position:relative;z-index:1;max-width:var(--conteneur);margin-inline:auto;
  display:grid;grid-template-columns:46% minmax(0,1fr);gap:clamp(28px,4vw,64px);
  align-items:center}
.grappe__images{position:relative;aspect-ratio:580/470}
.grappe__images picture{position:absolute;overflow:hidden;display:block}
.grappe__images img{width:100%;height:100%;object-fit:cover;display:block}
/* LA PHOTOGRAPHIE REVIENT DANS LA GRAPPE — 5 septembre 2026.
   Le 4 septembre, Oriane avait fait retirer la photo ET le médaillon rond : le bloc n'a
   porté qu'un dessin centré depuis. Elle demande aujourd'hui « peut-être une deuxième image,
   d'eau avec le soleil ». **Le médaillon ne revient pas** : à deux pièces la grappe est une
   composition, à trois elle redevient l'encombrement qu'elle avait fait retirer.
   C'est la disposition de Zoé — une photo à dôme, le dessin en débord sur son angle bas.
   Le dôme est en 400 px comme `.arche` : au-delà de la moitié de la largeur, le navigateur
   ramène le rayon à cette moitié, ce qui donne un demi-cercle exact à toutes les tailles. */
/* L'ILLUSTRATION AU TRAIT EST RETIRÉE — 5 septembre 2026, à ma demande. La grappe ne porte
   plus que la photographie. Elle passe donc de 58 % posée à gauche à 66 % centrée : à cette
   largeur sa hauteur (291/358) remplit exactement la boîte de 580 × 470, il ne reste aucun
   blanc à côté. Le dessin de vague `fl-vague-trait` n'a plus d'emploi sur l'accueil ; le
   soleil `fl-soleil` reste dans le duo qui suit. */
.grappe__a{left:50%;top:0;translate:-50% 0;width:66%;aspect-ratio:291/358;
  border-radius:400px 400px 0 0;
  box-shadow:0 22px 54px rgba(111,99,86,.20)}
/* le médaillon rond — Zoé : 130 x 130 */
.grappe__rond{position:absolute;right:6%;top:6%;width:22.4%;aspect-ratio:1;
  border-radius:50%;background:var(--blanc);display:grid;place-items:center;
  box-shadow:0 14px 34px -16px rgba(111,99,86,.55);z-index:2;overflow:hidden}
.grappe__rond img{width:64%;height:64%;object-fit:contain}
.grappe__texte>p:last-child{margin-bottom:0}
/* « Je suis Oriane Marie » était le SEUL titre du site en Amalfi Coast, la manuscrite —
   tous les autres h1/h2 sont en Haigrast Serif. Oriane l'a relevé le 4 septembre 2026 :
   il repasse dans la serif du site et hérite donc de `h2`. Ne reste ici que ce qui lui
   est propre : le `nowrap` (le titre ne se coupe jamais en deux, §5) et une taille un
   cran sous le h2 courant, pour qu'il tienne dans une colonne de 44 %.
   Effet de bord bienvenu : Haigrast n'a pas le jambage profond du J d'Amalfi, la marge
   de 22 px qui évitait le contact avec le surtitre redescend à 14 px, comme les autres. */
/* « Je suis Oriane Marie » : Haigrast le matin du 4 septembre, puis la manuscrite le soir,
   une fois Pinyon adoptée pour tout le site. C'est donc à nouveau le seul titre en
   manuscrite — cette fois c'est cohérent, Pinyon étant la police du logo. Marge basse à
   24 px : le J de Pinyon a un jambage profond qui touchait « Psychothérapeute à Lyon ». */
.presentation__titre{font-family:var(--script);font-weight:400 !important;
  font-size:min(4.1vw,69px);line-height:1.1;color:var(--terre);
  margin:0 0 24px;white-space:nowrap}
@media(max-width:940px){.presentation__titre{font-size:clamp(32px,7vw,54px)}}
.presentation__texte p{max-width:46ch}
.grappe__fort{font-family:var(--serif);font-weight:400;
  font-size:clamp(24px,3vw,34px);line-height:1.22;color:var(--terre);margin:0 0 18px}
.grappe__fort em{font-style:normal}
.grappe__pivot{color:var(--terre);font-size:18px;line-height:1.6}
@media(max-width:900px){
  .grappe__dedans{grid-template-columns:1fr}
  .grappe__images{aspect-ratio:580/430;max-width:520px;margin-inline:auto;width:100%}
}

/* ---------- le duo — Zoé : image haute 365 x 578 posée à côté du bloc ---------- */
.duo{background:var(--blanc);padding:clamp(52px,6.4vw,96px) var(--pad-x)}
.duo--rose{background:var(--rose)}
.duo__dedans{max-width:var(--conteneur);margin-inline:auto;
  display:grid;grid-template-columns:31.6% minmax(0,1fr);gap:clamp(28px,4.4vw,70px);
  align-items:center}
.duo--inverse .duo__dedans{grid-template-columns:minmax(0,1fr) 31.6%}
.duo--inverse .duo__image{order:2}
.duo__image{overflow:hidden;aspect-ratio:365/578;
  box-shadow:0 26px 60px -30px rgba(111,99,86,.55)}
.duo__image img{width:100%;height:100%;object-fit:cover;display:block}
.duo__texte>p:last-child,.duo__texte>ul:last-child{margin-bottom:0}
.duo__liste{list-style:none;padding:0;margin:clamp(22px,3vw,34px) 0 0}
.duo__liste li{border-top:1px solid var(--poudre);padding:15px 0}
.duo__liste h3{font-size:clamp(18px,2vw,22px);margin-bottom:5px}
.duo__liste p{font-size:15.5px;line-height:1.6;margin:0}
@media(max-width:900px){
  .duo__dedans,.duo--inverse .duo__dedans{grid-template-columns:1fr}
  .duo--inverse .duo__image{order:0}
  .duo__image{max-width:340px;margin-inline:auto;width:100%}
}

/* ---------- l'appel final prend la texture, comme le « Prête à briller ? » de Zoé ---------- */
.final{position:relative;overflow:hidden}
.final::before{content:'';position:absolute;inset:0;z-index:0;
  background:url('assets/grain.jpg') center/cover no-repeat;
  background-image:image-set(url('assets/grain.webp') type('image/webp'),
                             url('assets/grain.jpg')  type('image/jpeg'));
  opacity:.42;mix-blend-mode:multiply;pointer-events:none}
.final>*{position:relative;z-index:1}

/* ---------- la bande Instagram, en bas de page comme chez Zoé ---------- */
/* Fond rose depuis le 10 septembre 2026, à la demande d'Oriane (« fais ce qu'il y a de
   mieux ») : `.final` et `.insta` étaient deux blancs collés en fin d'accueil. L'ordre
   devient avis (rose) · final (blanc) · insta (rose) · pied (taupe). On repeint `.insta`
   et non `.final`, qui vit aussi sur les mentions et la 404 et qui, rose, se collerait
   aux avis. Les cases de dessin passent en blanc pour ne pas disparaître dans le fond. */
.insta{background:var(--rose);text-align:center;
  padding:clamp(44px,5.4vw,78px) var(--pad-x) clamp(30px,3.6vw,48px)}
.insta__titre{font-size:12px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--taupe);margin:0 0 6px}
.insta h2{margin-bottom:10px}
/* le pseudo reste dans la sans : le souligné de Haigrast est un filet posé très
   bas sous la ligne de base, et « oriane__marie » y devenait « oriane  marie » */
.insta__pseudo{font-family:var(--sans);font-size:14px;letter-spacing:.12em;
  color:var(--terre);margin:0 0 clamp(24px,3.2vw,38px)}
.insta__pseudo a{text-decoration:none;text-underline-offset:4px}
.insta__pseudo a:hover{text-decoration:underline}
.insta__bande{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(10px,1.4vw,20px);
  max-width:var(--conteneur);margin-inline:auto;list-style:none;padding:0}
.insta__bande li{overflow:hidden;aspect-ratio:1;background:var(--blanc)}
.insta__bande img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform 600ms cubic-bezier(.22,.61,.36,1)}
.insta__bande a:hover img{transform:scale(1.04)}
/* Centrage corrigé le 10 septembre 2026. En `display:grid`, la hauteur de 58 % ne se
   résolvait pas — la rangée de la grille est automatique — et le dessin prenait sa hauteur
   naturelle : `orn-rose` faisait 421 px dans une case de 294, on n'en voyait que la tige.
   En position absolue, les pourcentages se calculent sur la case, dont la hauteur est
   définie par `aspect-ratio:1`. */
.insta__bande li.est-dessin{position:relative}
.insta__bande li.est-dessin img{position:absolute;inset:0;margin:auto;
  width:58%;height:58%;object-fit:contain}
@media(max-width:620px){.insta__bande{grid-template-columns:repeat(2,1fr)}}
/* le lien vers le compte, sous la bande — les quatre cases y mènent aussi */
.insta__voir{margin:clamp(20px,2.6vw,30px) 0 0;font-size:14px;letter-spacing:.06em}
.insta__voir a{color:var(--terre-fonce);text-decoration:none;
  border-bottom:1px solid var(--poudre);padding-bottom:3px}
.insta__voir a:hover{border-bottom-color:var(--terre)}

/* ---------- la tête des pages intérieures reçoit la même texture ---------- */
.tete::before{content:'';position:absolute;inset:0;z-index:0;
  background:url('assets/grain.jpg') center/cover no-repeat;
  background-image:image-set(url('assets/grain.webp') type('image/webp'),
                             url('assets/grain.jpg')  type('image/jpeg'));
  opacity:.5;mix-blend-mode:multiply;pointer-events:none}
.tete--sombre::before{opacity:.18;mix-blend-mode:soft-light}
.tete__orn{display:block;width:clamp(58px,5.4vw,78px);height:auto;
  margin:0 auto clamp(14px,2vw,22px);opacity:.9}

/* ---------- l'ornement du folio, dans la colonne du chiffre romain ---------- */
.folio__orn{display:block;width:clamp(30px,3.2vw,44px);height:auto;
  margin-top:16px;opacity:.65}
@media(max-width:760px){.folio__orn{display:none}}


/* ==========================================================================
   LE VOCABULAIRE DES PAGES INTÉRIEURES DE ZOÉ
   Relevé sur /a-propos/, /service/, /tarifs/ et /contact/ en 1440 px.
   Ses pages intérieures n'ont ni chapitre à folio ni tête centrée à courbe :
   elles alternent des blocs texte/image, avec des images à sommet en dôme,
   et des panneaux photo à fond perdu.
   ========================================================================== */

/* ---------- tête scindée — /a-propos/ : texte à gauche sur rose,
     panneau photo à droite, pleine hauteur, à fond perdu (382 x 780) ---------- */
/* min-height ramené de 780 px à 420 px le 4 septembre : l'intro n'a plus qu'un
   paragraphe depuis que son texte est redescendu dans le corps de la page, et le bloc
   gardait la hauteur d'une tête à deux textes — une grande plage rose vide. */
.tete-scindee{position:relative;background:var(--rose);display:grid;
  grid-template-columns:minmax(0,1fr) 26.6%;min-height:min(420px,54vh);align-items:center}
.tete-scindee__texte{padding:clamp(46px,6vw,96px) clamp(30px,5vw,80px)
  clamp(46px,6vw,96px) max(var(--pad-x),calc((100vw - var(--conteneur)) / 2 + 15px))}
.tete-scindee__texte>p:last-child{margin-bottom:0}
/* la colonne fait 73 % de la laize : sans plafond, le paragraphe courait sur 1 100 px */
.tete-scindee__texte p{max-width:46ch}
.tete-scindee__texte .surtitre{max-width:none}
.tete-scindee h1{margin-bottom:10px}
.tete-scindee .surtitre{margin-bottom:22px}
.tete-scindee__photo{position:relative;overflow:hidden;align-self:stretch;background:var(--poudre)}
.tete-scindee__photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
@media(max-width:900px){
  .tete-scindee{grid-template-columns:1fr;min-height:0}
  .tete-scindee__texte{padding:clamp(38px,7vw,60px) var(--pad-x)}
  .tete-scindee__photo{height:clamp(220px,46vw,320px)}
  .tete-scindee__photo img{position:relative}
}

/* ---------- tête centrée — /tarifs/ et /contact/ : titre, surtitre, chapô ---------- */
.tete-centree{position:relative;background:var(--rose);text-align:center;
  padding:clamp(56px,7vw,110px) var(--pad-x) clamp(46px,5.6vw,84px)}
.tete-centree__dedans{max-width:min(var(--conteneur),720px);margin-inline:auto}
.tete-centree h1{margin-bottom:12px}
.tete-centree p:last-child{margin-bottom:0}

/* Le demi-disque de Zoé a été retiré du site le 4 septembre 2026 : Oriane le trouvait
   inutilement chargeant. Ses règles sont supprimées, il ne reste aucune trace en page. */

/* ---------- bloc alterné — /service/ et /a-propos/ : texte d'un côté,
     image à sommet en dôme de l'autre (350 x 525) ---------- */
.alterne{padding:clamp(52px,6.4vw,100px) var(--pad-x)}
.alterne--rose{background:var(--rose)}
.alterne--blanc{background:var(--blanc)}
.alterne__dedans{max-width:var(--conteneur);margin-inline:auto;
  display:grid;grid-template-columns:31.6% minmax(0,1fr);gap:clamp(30px,5vw,84px);
  align-items:center}
.alterne--texte-gauche .alterne__dedans{grid-template-columns:minmax(0,1fr) 31.6%}
.alterne--texte-gauche .alterne__image{order:2}
/* le sommet en dôme, repris de l'arche du hero */
.alterne__image{overflow:hidden;aspect-ratio:350/525;
  border-radius:400px 400px 0 0;
  box-shadow:0 26px 60px -30px rgba(111,99,86,.5)}
.alterne__image img{width:100%;height:100%;object-fit:cover;display:block}
.alterne__image--carre{border-radius:0}
.alterne__texte>p:last-child{margin-bottom:0}
.alterne__texte h2{margin-bottom:12px}
.alterne__texte .surtitre{margin-bottom:20px}
@media(max-width:900px){
  .alterne__dedans,.alterne--texte-gauche .alterne__dedans{grid-template-columns:1fr}
  .alterne--texte-gauche .alterne__image{order:0}
  .alterne__image{max-width:320px;margin-inline:auto;width:100%}
}

/* ---------- panneau photo à fond perdu à côté d'un bloc — /a-propos/ §6 ---------- */
.pan{position:relative;background:var(--blanc);display:grid;
  grid-template-columns:minmax(0,1fr) 35.5%;align-items:center;overflow:hidden}
.pan--rose{background:var(--rose)}
.pan__texte{padding:clamp(52px,6.4vw,100px) clamp(30px,5vw,72px)
  clamp(52px,6.4vw,100px) max(var(--pad-x),calc((100vw - var(--conteneur)) / 2 + 15px))}
.pan__texte>*:last-child{margin-bottom:0}
.pan__photo{position:relative;align-self:stretch;min-height:clamp(320px,42vw,560px);
  overflow:hidden;background:var(--poudre)}
.pan__photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* la liste à pastilles cochées de Zoé, séparée par des filets */
.pastilles{list-style:none;padding:0;margin:clamp(22px,3vw,32px) 0 0}
.pastilles li{display:grid;grid-template-columns:22px minmax(0,1fr);gap:14px;
  align-items:start;border-top:1px solid var(--poudre);padding:15px 0}
.pastilles li:first-child{border-top:0}
.pastilles li::before{content:'';width:16px;height:16px;border-radius:50%;
  background:var(--terre);margin-top:4px;
  box-shadow:inset 0 0 0 3px var(--blanc),inset 0 0 0 4px var(--terre)}
.pan--rose .pastilles li::before{box-shadow:inset 0 0 0 3px var(--rose),inset 0 0 0 4px var(--terre)}
.pastilles p{margin:0;font-size:15.5px;line-height:1.6}
.pastilles strong{font-family:var(--serif);font-weight:700;color:var(--terre);
  display:block;font-size:17px;margin-bottom:3px}
@media(max-width:900px){
  .pan{grid-template-columns:1fr}
  .pan__texte{padding:clamp(40px,7vw,64px) var(--pad-x)}
  .pan__photo{min-height:clamp(220px,50vw,300px)}
}

/* ---------- le trio — /a-propos/ « 3 choses à savoir sur moi » ---------- */
.trio{background:var(--rose);text-align:center;padding:clamp(52px,6.4vw,96px) var(--pad-x)}
.trio--blanc{background:var(--blanc)}
.trio__chapeau{max-width:62ch;margin:0 auto clamp(32px,4vw,52px)}
/* les paragraphes qui referment le trio, sous les cartes — même laize que le chapeau.
   Ajoutés le 4 septembre avec le texte intégral de « Qui je suis ». */
.trio__apres{max-width:56ch;margin:clamp(28px,3.4vw,42px) auto 0}
.trio__apres+.trio__apres{margin-top:16px}
.trio__liste{list-style:none;padding:0;margin:0;max-width:var(--conteneur);
  margin-inline:auto;display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(26px,3.6vw,56px)}
/* deux entrées seulement : on garde la largeur de colonne du trio et on recentre,
   plutôt que d'étaler deux colonnes sur toute la laize */
.trio__liste--deux{grid-template-columns:repeat(2,minmax(0,340px));justify-content:center}
.trio__liste{align-items:start}
/* BOÎTE fixe + object-fit:contain, et non une largeur ni une hauteur seule. Les deux
   ornements n'ont pas le même rapport — orn-rose fait 600x2555, orn-soleil-onde 760x1422 :
   à largeur égale la rose descendait 315 px contre 138 et les cartes se décalaient ;
   à hauteur égale elle se réduisait à un filet de 24 px, invisible. Dans une boîte, chacun
   occupe toute la place qu'il peut sans déformer. La boîte est HAUTE (240 px) exprès : c'est
   ce qu'il faut pour que la rose, de rapport 0,235, garde de la largeur. */
.trio__liste img{width:clamp(64px,6.6vw,88px);height:clamp(180px,18vw,240px);
  object-fit:contain;margin:0 auto 18px;opacity:.9;display:block}
.trio__liste h3{margin-bottom:8px}
.trio__liste p{font-size:15.5px;line-height:1.62;margin:0}
@media(max-width:820px){.trio__liste{grid-template-columns:1fr;gap:36px}}

/* ---------- cartes bordées — /service/ « Le process » ---------- */
.etapes{background:var(--rose);padding:clamp(52px,6.4vw,96px) var(--pad-x)}
.etapes--blanc{background:var(--blanc)}
.etapes__entete{text-align:center;margin-bottom:clamp(30px,4vw,50px)}
.etapes__liste{list-style:none;padding:0;margin:0;max-width:var(--conteneur);
  margin-inline:auto;display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(18px,2.4vw,34px)}
/* deux entrées seulement : on recentre sur deux colonnes plutôt que de laisser une case
   vide sur trois — même correctif que `.trio__liste--deux`. */
.etapes__liste--deux{grid-template-columns:repeat(2,minmax(0,420px));justify-content:center}
.etapes__liste li{border:1px solid var(--poudre);background:transparent;
  padding:clamp(22px,2.6vw,34px)}
.etapes--blanc .etapes__liste li{background:var(--blanc)}
.etapes__liste h3{font-size:clamp(18px,2vw,23px);margin-bottom:10px}
.etapes__liste p{font-size:15px;line-height:1.62;margin:0}
@media(max-width:900px){.etapes__liste{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.etapes__liste{grid-template-columns:1fr}}

/* ---------- le menu de tarifs — /tarifs/ : nom … prix, relié par un filet ---------- */
.menus{background:var(--rose);padding:clamp(52px,6.4vw,96px) var(--pad-x)}
.menus__dedans{max-width:var(--conteneur);margin-inline:auto;
  display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(24px,3.2vw,48px);
  align-items:start}
@media(max-width:860px){.menus__dedans{grid-template-columns:1fr}}
.menu{background:var(--blanc);padding:clamp(26px,3.2vw,44px);
  display:flex;flex-direction:column;height:100%}
.menu h2{font-size:clamp(23px,2.8vw,32px);margin-bottom:clamp(18px,2.4vw,28px)}
.menu__lignes{list-style:none;padding:0;margin:0 0 clamp(24px,3vw,36px);flex:1}
.menu__lignes li{padding:12px 0}
.menu__ligne{display:flex;align-items:baseline;gap:10px;margin:0}
/* `flex:0 1 auto` et non `flex:none` : le nom doit pouvoir se replier. « Séance seule ou en
   complément » face à « au choix » poussait la ligne à 362 px sur un écran de 320, et la page
   Tarifs débordait. Le prix, lui, garde `flex:none` — il ne se coupe jamais. */
.menu__nom{font-family:var(--serif);font-weight:700;font-size:clamp(16px,1.8vw,19px);
  color:var(--terre);flex:0 1 auto;min-width:0}
/* le filet qui relie le nom au prix — c'est la signature de sa page tarifs */
.menu__filet{flex:1 0 12px;border-bottom:1px solid var(--poudre);transform:translateY(-4px)}
.menu__prix{font-family:var(--serif);font-weight:700;font-size:clamp(16px,1.8vw,19px);
  color:var(--terre);flex:none}
.menu__note{margin:5px 0 0;font-size:14.5px;line-height:1.55;color:var(--taupe)}
.menu .btn{text-align:center}

/* ---------- témoins — /a-propos/ et /service/ : deux médaillons ronds 129 px ---------- */
.temoins{background:var(--rose);padding:clamp(52px,6.4vw,96px) var(--pad-x)}
/* le lien vers la fiche Google sous les témoignages — remis le 4 septembre 2026,
   à la demande d'Oriane. Il était retiré depuis le 20 août. */
.temoins__lien{text-align:center;margin:0;max-width:var(--conteneur);margin-inline:auto}
.temoins--blanc{background:var(--blanc)}
.temoins__liste{list-style:none;padding:0;margin:0;max-width:var(--conteneur);
  margin-inline:auto;display:grid;grid-template-columns:repeat(2,1fr);
  gap:clamp(28px,4.4vw,70px)}
.temoin{display:grid;grid-template-columns:129px minmax(0,1fr);
  gap:clamp(18px,2.4vw,30px);align-items:start}
/* blanc sur poudre = 2,09:1, très en dessous. Sur terre, 4,78:1. */
.temoin__rond{width:129px;height:129px;border-radius:50%;background:var(--terre);
  color:var(--blanc);display:grid;place-items:center;font-family:var(--serif);
  font-weight:700;font-size:44px;line-height:1}
.temoin h3{font-size:clamp(19px,2.2vw,25px);line-height:1.25;margin-bottom:8px}
.temoin__nom{font-size:11px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--taupe);margin:0 0 14px}
.temoin__mot{font-size:15.5px;line-height:1.62;margin:0}
@media(max-width:900px){.temoins__liste{grid-template-columns:1fr}}
@media(max-width:520px){
  .temoin{grid-template-columns:1fr;text-align:center;justify-items:center}
  .temoin__rond{width:96px;height:96px;font-size:34px}
}

/* ---------- bandeau photo assombri, appel centré — /a-propos/ §8 ---------- */
/* L'appel est un bandeau à fond fixe : chez Zoé c'est une photo pleine largeur
   (spirit-girl.jpg, 1425 x 475) sur laquelle le texte passe. */
.appel{position:relative;overflow:hidden;text-align:center;
  padding:clamp(70px,9vw,150px) var(--pad-x);color:var(--blanc);
  background-color:var(--taupe);
  background-repeat:no-repeat;background-position:center center;background-size:cover;
  background-attachment:fixed}
.appel::after{content:'';position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(111,99,86,.20),rgba(111,99,86,.34))}
.appel>*{position:relative;z-index:2}
@media (hover:none),(pointer:coarse){.appel{background-attachment:scroll}}
.appel h2{color:var(--blanc);margin-bottom:10px}
.appel .surtitre{color:var(--blanc);opacity:.94;margin-bottom:26px}
.appel .btn{background:var(--blanc);color:var(--terre)}
.appel .btn:hover{background:var(--rose)}

/* ---------- la fiche de contact — /contact/ : carte blanche décalée,
     coordonnées en débord à gauche ---------- */
.fiche{background:var(--rose);padding:0 var(--pad-x) clamp(52px,6.4vw,96px)}
.fiche__dedans{max-width:var(--conteneur);margin-inline:auto;position:relative;
  display:grid;grid-template-columns:31% minmax(0,1fr);align-items:start;
  gap:clamp(24px,3vw,44px)}
.fiche__cote{padding-top:clamp(60px,7vw,120px)}
.fiche__cote img{width:100%;max-width:267px;aspect-ratio:267/328;object-fit:cover;
  margin-bottom:22px}
.fiche__cote h3{font-size:13px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--taupe);font-family:var(--sans);font-weight:400;margin-bottom:12px}
.fiche__cote p{font-size:15px;line-height:1.75;margin:0 0 12px}
.fiche__cote a{color:var(--terre)}
.fiche__carte{background:var(--blanc);padding:clamp(30px,4vw,58px);
  margin-top:clamp(30px,4vw,58px)}
.fiche__carte h2{margin-bottom:14px}
.fiche__carte>p:last-child{margin-bottom:0}
.fiche__reperes{list-style:none;padding:0;margin:clamp(22px,3vw,32px) 0 0}
.fiche__reperes li{border-top:1px solid var(--poudre);padding:15px 0}
.fiche__reperes li:first-child{border-top:0;padding-top:0}
.fiche__reperes strong{font-family:var(--serif);font-weight:700;color:var(--terre);
  display:block;font-size:17px;margin-bottom:3px}
.fiche__reperes p{margin:0;font-size:15.5px;line-height:1.6}
@media(max-width:900px){
  .fiche__dedans{grid-template-columns:1fr}
  .fiche__cote{padding-top:clamp(30px,5vw,44px);order:2}
  .fiche__carte{margin-top:clamp(24px,3vw,36px)}
}


/* ==========================================================================
   BANDEAUX À FOND FIXE — le texte défile, l'image reste
   `background-attachment: fixed`, comme les .bg-fixe du site actuel.
   Repli obligatoire en `scroll` sur tactile : iOS ne sait pas tenir un fond
   fixe, il saute. C'est déjà la règle du §8 du document, on la garde.
   ========================================================================== */
.fixe{position:relative;overflow:hidden;text-align:center;color:var(--blanc);
  padding:clamp(76px,11vw,190px) var(--pad-x);
  background-color:var(--taupe);
  background-repeat:no-repeat;background-position:center center;background-size:cover;
  background-attachment:fixed}
/* VOILE — mesuré, pas estimé. Le contraste se juge sur les 3 % de pixels les plus
   clairs de l'image, pas sur sa moyenne : c'est là que le blanc se perd.
   Images ramenées à la source dans la bande [0x38312B ; 0xA09080], puis :
     voile 0,55 → 4,7 à 5,0:1  — tient pour tout, y compris le surtitre et le bouton ;
     voile 0,32 → 3,4 à 3,7:1  — ne tient que pour du grand texte, d'où --souffle,
                                 qui ne porte qu'une phrase de 25 px au moins.
   Ne pas éclaircir sans refaire la mesure. */
.fixe::before{content:'';position:absolute;inset:0;z-index:0;
  background:linear-gradient(180deg,rgba(74,65,56,.50),rgba(74,65,56,.60))}
.fixe--souffle::before{background:linear-gradient(180deg,rgba(74,65,56,.28),rgba(74,65,56,.36))}
.fixe>*{position:relative;z-index:1}
.fixe h2{color:var(--blanc);margin-bottom:12px}
/* sur ces fonds, le rose ne donne que 4,0 à 4,4:1 — sous le seuil. Tout passe en blanc,
   qui tient de 4,8 à 5,2:1 sur les quatre images. Ne pas repasser au rose. */
.fixe .surtitre{color:var(--blanc);opacity:.94;margin-bottom:0}
.fixe .script{color:var(--blanc)}
.fixe p{color:var(--blanc);max-width:46ch;margin-inline:auto}
/* terre sur rose ne donne que 4,1:1 — sous le seuil pour un texte de 12 px.
   Sur blanc, 4,8:1. Le bouton des bandeaux est donc blanc, pas rose. */
.fixe .btn{background:var(--blanc);color:var(--terre);margin-top:clamp(20px,2.6vw,30px)}
.fixe .btn:hover{background:var(--rose)}
/* une phrase seule, sans titre ni bouton — la respiration à fond fixe */
.fixe--souffle{padding:clamp(92px,13vw,230px) var(--pad-x)}
/* UNE SEULE LIGNE, TOUJOURS — règle posée par Oriane le 5 septembre 2026, à partir de
   « Il n'y a rien à prouver ici. » sur la page À propos. Elle remplace l'ancienne, qui
   réservait la ligne unique au seul bandeau de l'accueil et laissait les phrases plus
   longues se composer sur deux ou trois lignes.
   Le corps n'est plus une pente unique en vw : chaque phrase n'a pas la même longueur, et
   une pente commune ferait déborder les longues ou rapetisser les courtes pour rien. Chaque
   bandeau déclare sa propre largeur en `--w` — la largeur du texte en cadratins, mesurée au
   canevas dans le Pinyon Script réellement chargé. Le corps qui fait tenir la phrase est
   alors la largeur disponible divisée par `--w`, plafonnée aux 72 px du reste du site.
   LA LARGEUR DE L'ASCENSEUR EST RETIRÉE, mesurée — corrigé le 6 septembre 2026.
   `100vw` INCLUT la barre de défilement. Les 8 px de marge suffisaient sur un Mac, dont
   les ascenseurs flottent et ne prennent aucune place ; sur Windows et sur Linux un
   ascenseur classique fait 15 à 17 px, le corps était donc surdimensionné de 7 à 9 px et
   `.fixe{overflow:hidden}` rognait les deux bouts de la phrase. Mesuré au banc : ascenseur
   15 px, débordement 7 px — exactement 15 − 8.
   `script.js` pose `--asc` sur `:root` (innerWidth − clientWidth), remesuré au redimensionnement.
   Repli à 17 px sans JavaScript : la phrase est alors un cheveu plus petite, jamais coupée.
   Sur un Mac `--asc` vaut 0 et le calcul est identique à celui d'avant.
   Les 8 px retirés restent la marge de sécurité.
   Valeurs mesurées le 5 septembre 2026 :
     13,85  Ce qui vous traverse ne vous définit pas.              (accueil, défaut)
     14,79  Il n'y a rien à prouver ici. Rien à réussir.           (à propos)
     16,10  Vous n'avez pas à tout raconter, ni à replonger.       (EMDR)
     18,87  Ce qui se transforme passe par le corps…               (soins énergétiques)
     20,39  Le changement se mesure dans la vie réelle…            (TCC)
     22,91  Une blessure ne demande pas à être comprise…           (psychothérapie)
   Une phrase réécrite impose de refaire la mesure, sinon elle déborde ou flotte.
   À 1440 px le corps va de 57 à 72 px ; à 390 px, de 15 à 25 px. */
.fixe--souffle p{font-family:var(--script);font-weight:400 !important;
  line-height:1.24;color:var(--blanc);max-width:none;white-space:nowrap;
  font-size:min(72px,calc((100vw - var(--asc,17px) - 2 * var(--pad-x) - 8px) / var(--w,13.85)))}
/* la classe reste portée par le bandeau de l'accueil : la règle est désormais générale */
.fixe--une-ligne p{}
/* Les dix fonds, numérotés comme la planche. Ce sont les mêmes images que les blocs,
   dans leur état sombre. Le numéro choisi pour une page ne doit jamais être celui
   d'une image déjà posée sur cette page — c'est la seule règle à tenir ici. */
.fixe--08{background-image:url('assets/fond-08.jpg?v=2026.9.52');
  background-image:image-set(url('assets/fond-08.webp?v=2026.9.52') type('image/webp'),
                             url('assets/fond-08.jpg?v=2026.9.52')  type('image/jpeg'))}
.fixe--09{background-image:url('assets/fond-09.jpg');
  background-image:image-set(url('assets/fond-09.webp') type('image/webp'),
                             url('assets/fond-09.jpg')  type('image/jpeg'))}
/* REPLI TACTILE — à ne jamais retirer */
@media (hover:none),(pointer:coarse){
  .fixe{background-attachment:scroll}
}


/* ==========================================================================
   UN DESSIN À LA PLACE D'UNE PHOTO — l'équilibre du 1er septembre 2026
   La règle : la photo porte le bloc, le dessin lui donne de l'air.
   Une photo occupe tout son cadre ; un dessin ne prend ni cadre, ni ombre,
   ni fond — il se pose sur le fond de la section et respire. C'est ce qui
   empêche la page de se surcharger, à nombre d'emplacements égal.
   S'applique à n'importe quel porte-image : il suffit d'ajouter .est-trait.
   ========================================================================== */
.est-trait{background:transparent;box-shadow:none;border-radius:0;
  overflow:visible;display:grid;place-items:center}
/* Dessins agrandis le 2 septembre 2026, à la demande d'Oriane (« centre aussi
   l'illustration en plus grand », bloc « Mon chemin »). 80/76 % → 92/88 %. */
.alterne__image.est-trait img,.duo__image.est-trait img{
  width:auto;height:auto;max-width:92%;max-height:88%;object-fit:contain;opacity:.92}
.pan__photo.est-trait{background:transparent}
.pan__photo.est-trait img{position:relative;inset:auto;
  width:auto;height:auto;max-width:62%;max-height:62%;object-fit:contain;opacity:.92}
/* RÈGLE GÉNÉRALE — toute illustration au trait est centrée dans son emplacement,
   horizontalement et verticalement. Demandé par Oriane le 2 septembre 2026 :
   « inscris ça comme règle, toutes les illustrations doivent être centrées ». */
.est-trait{display:grid;place-items:center;box-shadow:none;overflow:visible}
.est-trait img{width:auto;height:auto;max-width:100%;max-height:100%;
  object-fit:contain;opacity:.92;margin:auto}
/* display:grid ici et pas seulement sur `.est-trait` : `.grappe__images picture` est plus
   spécifique et imposait display:block, ce qui empêchait le centrage vertical. */
.grappe__images picture.est-trait{overflow:visible;box-shadow:none;
  display:grid;place-items:center}
.grappe__images picture.est-trait img{width:auto;height:auto;
  max-width:100%;max-height:100%;object-fit:contain;opacity:.92;margin:auto}
.fiche__cote img.est-trait{aspect-ratio:auto;object-fit:contain;
  max-width:190px;opacity:.92;margin-bottom:26px}
@media(max-width:900px){
  .alterne__image.est-trait,.duo__image.est-trait{max-width:300px}
  .pan__photo.est-trait{min-height:clamp(180px,40vw,240px)}
}

/* ---------- règle de contraste, à ne pas défaire ----------
   --terre sur --rose ne vaut que 4,04:1. C'est assez pour un titre (seuil 3 au-delà
   de 24 px, ou de 18,66 px en gras), pas pour du petit texte (seuil 4,5).
   Tout ce qui est petit et en terre passe donc en --terre-fonce : 5,16:1 sur rose,
   6,08:1 sur blanc. Les titres gardent la terre de Zoé.
   Même règle sur le bronze : blanc sur --bronze ne vaut que 3,00:1. La phrase de
   respiration passe parce qu'elle fait au moins 26 px ; la signature parce qu'elle
   est en gras à 19 px. Aucun petit texte ne doit être posé sur le bronze. */
.surtitre,.avis__lien,.grappe__pivot,.conviction__pivot,
.pastilles strong,.fiche__reperes strong,.fiche__cote a,
.duo__liste h3,.points__liste h3,.menu__note,.insta__pseudo,
/* mesurés le 1er septembre : l'accroche du hero fait 19 px et les intertitres des
   cartes bordées 18 px sur mobile — sous les 18,66 px qui autoriseraient le seuil 3.
   En terre ils ne donnaient que 4,04:1 sur rose. */
.hero__accroche,.etapes__liste h3{color:var(--terre-fonce)}
/* le rotateur du hero est en 13 px sur rose : la terre n'y donnait que 4,04:1 */
.rotateur__mot{color:var(--terre-fonce) !important}
/* un mot sur deux en taupe — 4,98:1 sur le rose, au-dessus du seuil 4,5 */
.rotateur__mot:nth-child(2){color:var(--taupe) !important}
/* le nom sous un avis fait 16 px en gras sous 900 px de large — seuil 4,5 donc.
   Le rose sur le haut du dégradé des cartes ne donnait que 4,13:1 ; le blanc
   donne 4,88:1 sur ce même haut, et 5,84:1 sur le bas. */
.tc-auteur{color:var(--blanc)}
.faq summary{color:var(--terre-fonce)}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important}
}



/* ---------- le curseur : un cercle et son point ----------------------------
   Repris du symbole de la marque — deux cercles et un point. Teinte `--terre`,
   la même que le tracé du logo : c'est la seule qui se lise à la fois sur le
   blanc, sur le rose et sur les bandeaux photographiques.
   `--terre` était réservée aux titres et aux boutons (§3) ; l'exception est
   assumée et consignée. Rien de tout cela n'existe au toucher, ni si la
   personne demande moins de mouvement (le cercle suit alors sans retard).
   Les deux éléments sont en `position:fixed` à la racine du corps : leur
   `transform` ne peut donc pas casser les fonds fixes (piège n° 6). */
.curseur,.curseur__point{position:fixed;top:0;left:0;z-index:9999;
  pointer-events:none;border-radius:50%;margin:-50vh -50vw 0 0;opacity:0;
  will-change:transform;transition:opacity 220ms ease}
.curseur{width:34px;height:34px;margin:-17px 0 0 -17px;
  border:1px solid var(--terre);
  transition:width 260ms ease,height 260ms ease,margin 260ms ease,opacity 220ms ease,
    border-color 260ms ease,background-color 260ms ease}
.curseur__point{width:6px;height:6px;margin:-3px 0 0 -3px;background:var(--terre);
  transition:opacity 220ms ease,background-color 260ms ease,width 260ms ease,height 260ms ease,margin 260ms ease}
/* Sur un bouton d'action, le curseur grossit ET passe en clair : le bouton est en `--terre`,
   un curseur de la même teinte y devenait invisible. Le cercle prend un fond très légèrement
   laiteux — c'est lui qui le fait tenir sur les 9 px où il déborde du bouton, là où un simple
   filet blanc se perdrait sur le rose. */
body.sur-bouton .curseur{width:62px;height:62px;margin:-31px 0 0 -31px;
  border-color:var(--blanc);background:rgba(255,255,255,.18)}
body.sur-bouton .curseur__point{background:var(--blanc);width:8px;height:8px;margin:-4px 0 0 -4px}
body.a-curseur .curseur,body.a-curseur .curseur__point{opacity:1}
/* le curseur système ne s'efface que si le nôtre est bien à l'écran */
body.a-curseur,body.a-curseur a,body.a-curseur button,
body.a-curseur summary,body.a-curseur .btn{cursor:none}
@media (hover:none),(pointer:coarse){.curseur,.curseur__point{display:none}}
@media (prefers-reduced-motion:reduce){.curseur{transition:opacity 220ms ease}}