/* =========================================================
   Anthony Remaud · Hypnothérapie
   Feuille de style unique du site.
   Les couleurs se règlent toutes dans le bloc :root ci-dessous.
   ========================================================= */

:root{
  --cream:#faf5ec;
  --cream2:#f3ebdd;
  --nuit:#22302a;        /* le fond profond de la section « ma conviction » */
  --ink:#38332c;
  --ink-soft:#575046;
  --muted:#6f665b;
  --sage:#5a7762;
  --sage-d:#516b58;
  --sage-deep:#41564a;

  /* DEUX FAMILLES DE COULEURS, ET C'EST VOLONTAIRE :
     --terra et --gold sont DÉCORATIFS (aplats, filets, gros titres en italique).
     --terra-txt et --gold-txt sont leurs versions LISIBLES, à utiliser dès qu'ils
     portent du texte ou servent de fond à du texte. Les versions claires ne
     passent pas le contraste minimum exigé (3,25:1 et 2,38:1 mesurés, il en faut
     4,5). Ne pas les intervertir. */
  --terra:#c9714e;
  --terra-txt:#9e4e2b;   /* 5,87:1 en fond de bouton blanc · 4,96:1 en texte sur le crème le plus foncé */
  --terra-l:#e0a184;
  --terra-pale:#ffe4d6;  /* 4,82:1 sur les fonds verts */
  --gold:#c69a4c;
  --gold-txt:#8a6722;    /* 4,78:1 en texte sur crème */

  --card:#fffdf8;
  --line:#e7ddca;
  --radius:22px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --shadow:0 1px 2px rgba(56,51,44,.04),0 14px 34px rgba(81,107,88,.09);
  --shadow-sm:0 1px 2px rgba(56,51,44,.04),0 6px 18px rgba(81,107,88,.06);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:86px}
body{
  font-family:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  color:var(--ink);background:var(--cream);line-height:1.72;font-size:18px;-webkit-font-smoothing:antialiased;
}
img{max-width:100%}
h1,h2,h3{line-height:1.16;font-weight:600;letter-spacing:-.01em}
.sans{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif}
.wrap{max-width:1080px;margin:0 auto;padding:0 24px}
.narrow{max-width:720px;margin-left:auto;margin-right:auto}
a{color:var(--sage-d);text-decoration:none}
/* ANNEAU DE FOCUS BICOLORE (navigation au clavier).
   Aucune couleur unique n'est visible à la fois sur le crème et sur les fonds
   verts ou nuit du site. On empile donc deux anneaux : l'extérieur sombre se
   voit sur les fonds clairs, le liseré crème se voit sur les fonds sombres.
   Il y en a donc toujours un des deux qui ressort, quel que soit l'endroit. */
a:focus-visible,button:focus-visible,input:focus-visible,summary:focus-visible{
  outline:3px solid var(--nuit);
  outline-offset:2px;
  box-shadow:0 0 0 2px var(--cream);
}
::selection{background:rgba(201,113,78,.25)}

/* texte reserve aux lecteurs d'ecran */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* lien d'evitement, pour la navigation au clavier */
.skip{position:absolute;left:-9999px;top:0;background:var(--sage-d);color:#fff;padding:12px 18px;border-radius:0 0 10px 0;z-index:100;font-family:-apple-system,sans-serif;font-size:.95rem}
.skip:focus{left:0}

/* Aplat franc, sans dégradé : le dégradé faisait tomber le contraste à 3,1:1
   dans le haut du bouton, et c'est le marqueur visuel n°1 des gabarits. */
.btn{
  display:inline-block;background:var(--terra-txt);color:#fff;padding:16px 34px;border-radius:999px;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  font-weight:600;font-size:1rem;border:none;cursor:pointer;
  transition:transform .25s var(--ease),box-shadow .25s var(--ease),background .25s var(--ease);
  box-shadow:0 6px 16px rgba(140,68,38,.20);
}
.btn:hover{background:#8f4626;transform:translateY(-1px);box-shadow:0 10px 24px rgba(140,68,38,.26)}
.btn:active{transform:translateY(0) scale(.985);box-shadow:0 4px 12px rgba(140,68,38,.22)}
.btn.soft{background:#fff;color:var(--terra-txt);box-shadow:var(--shadow-sm)}
.btn.soft:hover{background:var(--cream2)}
.btn.line{background:transparent;color:var(--sage-d);border:1.5px solid var(--sage);box-shadow:none}
.btn.line:hover{background:var(--sage);color:#fff}

.photo{position:relative;overflow:hidden;background:linear-gradient(150deg,#efe8d8,#e3d8c3);display:flex;align-items:center;justify-content:center}
.photo::after{content:"P H O T O";font-family:-apple-system,sans-serif;font-size:.68rem;letter-spacing:.34em;color:#b6a687;opacity:.85}
.photo img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.6s var(--ease);position:relative;z-index:1}
.photo img,.portrait img{filter:sepia(.10) saturate(.92) contrast(.97) brightness(1.01)}
.photo:hover img{transform:scale(1.03)}
.photo:has(img)::after{display:none}
.photo picture{display:contents}
.photo-tall{aspect-ratio:4/5;border-radius:999px 999px 4px 4px;box-shadow:var(--shadow)}

/* NAV */
nav{position:sticky;top:0;z-index:50;background:rgba(250,245,236,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
nav .wrap{display:flex;align-items:center;justify-content:space-between;height:70px}
.brand{font-weight:600;font-size:1.3rem;color:var(--sage-d)}
.brand a{color:inherit}
.brand b{color:var(--terra-txt);font-weight:600}
.nav-links{display:flex;gap:24px;align-items:center;white-space:nowrap}
/* la marque ne se coupe pas tant que la barre est horizontale. Sur mobile elle
   doit au contraire pouvoir passer sur deux lignes, sinon elle pousse le bouton
   de menu hors de l'écran et crée un défilement horizontal. */
@media(min-width:1021px){ .brand{white-space:nowrap} }
.nav-links a.link{color:var(--muted);font-size:.98rem;font-family:-apple-system,sans-serif;background:linear-gradient(currentColor,currentColor) no-repeat 0 100%/0 1px;transition:background-size .3s var(--ease),color .2s var(--ease);padding-bottom:2px}
.nav-links a.link:hover,.nav-links a.link[aria-current="page"]{color:var(--sage-d);background-size:100% 1px}
.nav-cta{padding:11px 22px !important;font-size:.92rem !important}
.nav-burger{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:8px}
.nav-burger span{display:block;width:24px;height:2px;background:var(--sage-d);border-radius:2px}
.nav-drop{display:none;position:absolute;top:70px;left:0;right:0;background:var(--cream);border-bottom:1px solid var(--line);box-shadow:var(--shadow-sm);flex-direction:column;padding:8px 24px 18px}
.nav-drop a.link{color:var(--muted);font-family:-apple-system,sans-serif;padding:12px 0;border-bottom:1px solid var(--line);display:block}
.nav-drop a.link:last-child{border-bottom:none}
.nav-drop.open{display:flex}
/* le menu passe en burger plus tôt qu'avant : avec cinq rubriques plus le
   bouton de rendez-vous, la barre se cassait en deux lignes en dessous de
   1020px, ce qui est pire qu'un menu replié */
@media(max-width:1020px){
  .nav-links{display:none}
  .nav-burger{display:flex}
}

/* ═══════════════ HERO IMMERSIF ═══════════════
   L'image occupe tout le bloc de tête et le texte s'installe dedans. C'est ce
   qui distingue le plus nettement le site d'un gabarit : dans un gabarit,
   l'image est une vignette posée à droite du texte.
   Le voile est un dégradé horizontal : opaque à gauche là où se trouve le
   texte, presque transparent à droite pour laisser respirer la photo. */
.hero{position:relative;overflow:hidden;background:var(--nuit);color:#fff;
  min-height:min(90vh,880px);display:flex;flex-direction:column;justify-content:flex-end}
.hero-bg{position:absolute;inset:0;z-index:0;display:block}
.hero-bg img{width:100%;height:100%;object-fit:cover;object-position:50% 58%;display:block;filter:saturate(.92) contrast(1.03)}
.hero:after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(96deg,rgba(20,29,24,.95) 0%,rgba(20,29,24,.9) 32%,rgba(20,29,24,.55) 58%,rgba(20,29,24,.2) 100%),
    linear-gradient(0deg,rgba(20,29,24,.75) 0%,transparent 34%);
}
.hero-inner{position:relative;z-index:2;padding:clamp(90px,13vh,150px) 24px clamp(46px,7vh,84px);margin-top:auto}
.hero .eyebrow{font-family:-apple-system,sans-serif;display:inline-block;background:rgba(255,255,255,.13);color:#fff;border:1px solid rgba(255,255,255,.3);padding:8px 18px;border-radius:999px;font-size:.8rem;font-weight:600;letter-spacing:.4px;margin-bottom:26px;width:fit-content}
.hero h1{font-size:clamp(2.6rem,1.9rem + 4.6vw,5rem);line-height:1.02;letter-spacing:-.03em;margin-bottom:22px;text-wrap:balance;max-width:17ch;color:#fff}
.hero h1 em{font-style:italic;color:var(--terra-l)}
.hero .lead{font-size:clamp(1.12rem,1rem + .6vw,1.3rem);color:rgba(255,255,255,.9);margin-bottom:34px;max-width:54ch}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap}
.hero small{display:block;margin-top:22px;color:rgba(255,255,255,.8);font-size:.92rem;font-family:-apple-system,sans-serif}
/* sur fond sombre, le bouton secondaire passe en blanc */
.hero .btn.line{color:#fff;border-color:rgba(255,255,255,.55)}
.hero .btn.line:hover{background:#fff;color:var(--nuit);border-color:#fff}
/* MOBILE : faire tenir le bouton dans le premier écran.
   Avant resserrement il tombait à 700px, donc invisible sans défiler sur un
   iPhone SE (≈553px utiles sous la barre Safari). Chaque valeur ci-dessous est
   un gain de hauteur, sans jamais descendre sous 16px de corps de texte. */
@media(max-width:560px){
  .hero{min-height:0}
  .hero-inner{padding:44px 24px 34px}
  .hero .eyebrow{margin-bottom:14px;padding:6px 14px;font-size:.76rem}
  .hero h1{font-size:2.2rem;line-height:1.08;margin-bottom:14px;max-width:none}
  .hero .lead{font-size:1.05rem;line-height:1.6;margin-bottom:22px}
  .hero small{margin-top:16px;font-size:.86rem}
  .hero-cta{gap:10px}
  .hero-cta .btn{width:100%;text-align:center}

  /* même resserrement sur les deux pages de spécialité */
  .article-head{padding-top:22px;padding-bottom:34px}
  .fil{margin-bottom:16px;font-size:.8rem}
  .article-head h1{font-size:2.05rem;line-height:1.1;margin-bottom:14px}
  .chapo{font-size:1.05rem;line-height:1.6;margin-bottom:22px}
}

/* BANDE REASSURANCE : elle ferme le bloc de tête, à l'intérieur du hero.
   Plus de puces rondes ni d'aplat vert : quatre cases séparées par des filets,
   c'est une manchette, plus un bandeau de boutique en ligne. */
.trust{position:relative;z-index:2;border-top:1px solid rgba(255,255,255,.22);background:rgba(20,29,24,.55);backdrop-filter:blur(3px)}
.trust .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:0;padding:0;font-family:-apple-system,sans-serif;font-size:.86rem}
/* display:block et non flex : en flex, chaque mot et chaque <b> deviennent des
   éléments de flex séparés, et la phrase se disloque. */
.trust span{display:block;text-align:center;line-height:1.45;color:rgba(255,255,255,.9);padding:16px 14px;border-left:1px solid rgba(255,255,255,.16)}
.trust span:first-child{border-left:0}
.trust b{color:#fff;font-weight:600}
@media(max-width:860px){
  .trust .wrap{grid-template-columns:repeat(2,1fr)}
  .trust span{font-size:.84rem;padding:13px 12px}
  .trust span:nth-child(3){border-left:0}
  .trust span:nth-child(-n+2){border-bottom:1px solid rgba(255,255,255,.16)}
}
@media(max-width:420px){
  .trust .wrap{grid-template-columns:1fr}
  .trust span{border-left:0;border-bottom:1px solid rgba(255,255,255,.16);padding:11px 12px}
  .trust span:last-child{border-bottom:0}
}

/* SECTIONS */
section.block{padding:clamp(84px,8vw + 40px,132px) 0}
section.cream2{background:var(--cream2)}
section.sage{background:linear-gradient(165deg,var(--sage-d) 0%,var(--sage-deep) 100%);color:#fff}

/* RUBRIQUES : ferrées à gauche, sans le filet doré centré.
   Ce filet répété sous chacun des onze titres, plus le centrage systématique,
   étaient les deux signatures visuelles du gabarit de thérapeute. Ferrer à
   gauche rend aussi la lecture plus rapide : l'œil retrouve toujours le même
   bord au lieu de chercher le début de chaque ligne. */
.head{text-align:left;margin:0 0 clamp(48px,6vw,70px);max-width:760px}
.head p{color:var(--muted);font-size:1.12rem;max-width:60ch}
/* .narrow centre son bloc : sans cette règle, les chapôs qui la portent
   restent centrés sous des titres désormais ferrés à gauche */
.head .narrow{margin-left:0;margin-right:0}
.head h2{font-size:clamp(2rem,1.45rem + 2.4vw,3.1rem);line-height:1.1;letter-spacing:-.022em;margin-bottom:16px;text-wrap:balance}
.kicker{font-family:-apple-system,sans-serif;color:var(--terra-txt);font-weight:700;letter-spacing:.18em;text-transform:uppercase;font-size:.72rem;margin-bottom:14px}
section.sage .kicker{color:var(--terra-pale)}
section.sage .head p{color:#fff}

/* la clôture reste centrée : c'est une adresse directe, pas une rubrique */
.booking .head{text-align:center;margin-left:auto;margin-right:auto}
.booking .head p{margin-left:auto;margin-right:auto}

/* CONVICTION (recherche de solutions inconscientes)
   C'est le seul moment sombre du site, et c'est voulu : cette section porte la
   phrase qui résume tout le positionnement. Elle recevait auparavant le
   traitement le plus faible de la page (un halo doré à 10 % d'opacité sur fond
   crème, donc invisible). En la posant sur un fond profond, le visiteur traverse
   une vraie descente au milieu du parcours, puis remonte vers les tarifs.
   NE PAS multiplier les sections sombres : si tout devient profond, plus rien
   ne l'est, et le site devient pesant sur de longs textes. */
.conviction{position:relative;overflow:hidden;background:var(--nuit);color:#fff}
.conviction:before{content:"";position:absolute;top:-30%;left:50%;transform:translateX(-50%);width:min(1100px,140%);height:120%;background:radial-gradient(ellipse at 50% 0%,rgba(198,154,76,.13),transparent 62%);pointer-events:none}
.conviction .wrap{position:relative;z-index:1}
.pullquote{max-width:900px;margin:0 auto clamp(52px,6vw,74px);text-align:center;position:relative}
.pullquote p{font-size:clamp(1.6rem,1.05rem + 2.6vw,3rem);line-height:1.26;color:#fff;font-style:italic;letter-spacing:-.02em;text-wrap:balance}
.conviction-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(34px,4vw,54px);max-width:1020px;margin:0 auto}
@media(max-width:820px){.conviction-grid{grid-template-columns:1fr;max-width:560px}}
.conviction-item{padding:0;position:relative}
.cnum{font-family:Georgia,serif;font-size:3.4rem;font-weight:600;color:var(--gold);line-height:1;margin-bottom:10px;font-variant-numeric:lining-nums tabular-nums}
.conviction-item h3{font-size:1.24rem;margin-bottom:12px;color:var(--terra-pale)}
.conviction-item p{color:rgba(255,255,255,.88);font-size:1rem}
.conviction-note{text-align:center;margin:clamp(46px,5vw,64px) auto 0;max-width:620px;font-size:1.18rem;color:#fff;font-style:italic}

/* SPLIT (texte + photo) */
.split{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.split.rev .txt{order:2}
@media(max-width:820px){.split{grid-template-columns:1fr;gap:32px}.split.rev .txt{order:0}}
.split .photo{border-radius:var(--radius);aspect-ratio:4/5;box-shadow:var(--shadow)}
.split .photo-tall{border-radius:999px 999px 4px 4px}
.split h2{font-size:clamp(1.75rem,1.35rem + 1.6vw,2.4rem);line-height:1.16;letter-spacing:-.015em;margin-bottom:18px}
.split p{color:var(--ink-soft);margin-bottom:16px}
.split .ink{color:var(--ink)}
.signature{font-size:1.5rem;color:var(--sage-d);margin-top:8px}

/* PORTRAIT (arche signature) */
.portrait{border-radius:999px 999px 4px 4px;aspect-ratio:4/5;background:linear-gradient(160deg,#efe8d8,#e3d8c3);display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--muted);text-align:center;box-shadow:var(--shadow-sm);border:1px solid var(--line);position:relative;overflow:hidden}
.portrait img{width:100%;height:100%;object-fit:cover;object-position:50% 22%;display:block}
.portrait .initials{font-size:4rem;font-weight:600;color:#c2b393;letter-spacing:.05em}
.portrait .hint{font-family:-apple-system,sans-serif;font-size:.82rem;position:absolute;bottom:18px;left:0;right:0;color:var(--muted);opacity:.9;padding:0 20px}

/* CARTES */
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:24px}
/* Aucun de ces blocs n'est cliquable. Les faire se soulever au survol promet un
   clic qui n'existe pas : le visiteur essaie, rien ne se passe, et il apprend
   que les éléments du site ne répondent pas. On ne garde qu'un éclaircissement
   du filet, qui signale la lecture sans promettre une action. */
.card,.axis,.figure,.price,.tcard{transition:box-shadow .3s ease,border-color .3s ease}
.card:hover{border-top-color:var(--terra-txt)}
/* Traitement éditorial : filet en tête de bloc au lieu d'une boîte blanche.
   Un filet sépare aussi bien qu'un cadre, pour zéro bruit visuel, et le texte
   récupère toute la largeur disponible. */
.card{background:none;border:0;border-top:2px solid var(--ink);border-radius:0;padding:22px 0 0;box-shadow:none}
.card .ic{font-size:1.5rem;display:block;margin-bottom:12px}
.card h3{font-size:1.24rem;margin-bottom:10px;letter-spacing:-.012em}
.card p{color:var(--ink-soft);font-size:1rem}
section.sage .card{border-top-color:rgba(255,255,255,.6)}
section.sage .card p{color:rgba(255,255,255,.88)}

/* INSPIRATIONS — traitement éditorial : plus de carte blanche, l'image porte
   seule, surmontée d'une arche. L'arche est la forme signature du site : elle
   ne sert que sur les images verticales (portrait, triptyque), jamais sur du
   16/9 où elle produirait un effet tunnel. */
.figures{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(26px,3vw,42px);margin-top:10px}
@media(max-width:760px){.figures{grid-template-columns:1fr;max-width:420px;margin-inline:auto}}
.figure{background:none;border:0;border-radius:0;box-shadow:none}
/* 2/3 et non 3/2 : les trois images source (Poincaré, Jung, Erickson) sont des
   portraits 547×820. Le format paysage précédent en jetait plus de la moitié. */
.figure .photo{aspect-ratio:2/3;border-radius:999px 999px 4px 4px;box-shadow:var(--shadow-sm)}
.figure .body{padding:22px 0 0}
.figure h3{font-size:1.28rem;margin-bottom:4px}
.figure .role{font-family:-apple-system,sans-serif;font-size:.82rem;color:var(--terra-txt);font-weight:600;text-transform:uppercase;letter-spacing:.6px;margin-bottom:12px;display:block}
.figure p{color:var(--muted);font-size:.98rem}

/* DEUX AXES */
.axes{display:grid;grid-template-columns:1fr 1fr;gap:28px}
@media(max-width:760px){.axes{grid-template-columns:1fr}}
/* les deux spécialités : l'image porte, le texte se pose dessous sous un filet */
.axis{background:none;border:0;border-radius:0;box-shadow:none;overflow:visible}
.axis .photo{aspect-ratio:5/4;border-radius:4px;box-shadow:var(--shadow-sm)}
.axis .body{padding:22px 0 0;border-top:2px solid var(--ink);margin-top:24px}
.axis .ic{display:block;margin-bottom:12px;color:var(--sage-d)}
.axis h3{font-size:clamp(1.35rem,1.15rem + .8vw,1.7rem);margin-bottom:12px;color:var(--ink);letter-spacing:-.015em}
.axis p{color:var(--ink-soft)}
.axis:hover .body{border-top-color:var(--terra-txt)}

/* texte courant : ferre a gauche, encre adoucie */
.split p,.figure p,.axis p,details p,.offer .desc p{color:var(--ink-soft)}

/* EXTRAIT DE VOIX */
.voice{display:flex;align-items:center;gap:18px;background:var(--card);border:1px solid var(--line);border-radius:999px;padding:12px 14px 12px 12px;box-shadow:var(--shadow-sm);max-width:430px;margin-top:10px}
.voice-btn{flex:0 0 auto;width:54px;height:54px;border-radius:50%;border:none;cursor:pointer;background:var(--terra-txt);color:#fff;font-size:1.1rem;display:flex;align-items:center;justify-content:center;box-shadow:0 8px 20px rgba(140,68,38,.28);transition:.2s}
.voice-btn:hover{background:#b5603f}
.voice-btn:disabled{background:#cbb9a3;cursor:default;box-shadow:none}
.voice-txt{font-family:-apple-system,sans-serif;line-height:1.4}
.voice-txt b{display:block;font-size:1rem;color:var(--ink)}
.voice-txt span{font-size:.86rem;color:var(--muted)}

/* DEROULE */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
@media(max-width:760px){.steps{grid-template-columns:1fr}}
.step{text-align:center;padding:20px}
.step .n{width:58px;height:58px;border-radius:50%;background:#fff;color:var(--terra-txt);font-size:1.5rem;font-weight:700;display:flex;align-items:center;justify-content:center;margin:0 auto 18px;font-variant-numeric:lining-nums tabular-nums}
section.sage .step .n{background:rgba(255,255,255,.16);color:#fff}
.step h3{font-size:1.22rem;margin-bottom:10px}
.step p{font-size:1rem;opacity:.92}

/* TEMOIGNAGES */
.tmoni{max-width:900px;margin:0 auto}
.tmoni-lead{text-align:center;color:var(--muted);font-size:1.06rem;max-width:640px;margin:0 auto 34px}
.tcards{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
@media(max-width:760px){.tcards{grid-template-columns:1fr}}
/* cartes d'attente : trait pointillé, pour qu'on lise « emplacement réservé »
   et non « avis client ». Les vrais témoignages, eux, seront pleins. */
.tcard{background:none;border:1px dashed var(--line);border-radius:6px;padding:26px 24px;box-shadow:none;position:relative}
.tcard:not(:has(.placeholder)){border-style:solid;background:var(--card);box-shadow:var(--shadow-sm)}
.tcard .q{font-family:Georgia,serif;font-size:3rem;line-height:.6;color:var(--gold-txt);opacity:.75}
.tcard p{color:var(--ink);font-style:italic;margin:10px 0 16px}
.tcard p.placeholder{color:var(--muted)}
.tcard .who{font-family:-apple-system,sans-serif;font-size:.86rem;color:var(--muted);font-style:normal}
.tcard .stars{color:var(--gold-txt);font-size:.92rem;letter-spacing:2px;margin-bottom:6px}

/* TARIFS */
.prices{display:grid;grid-template-columns:1fr 1fr;gap:26px;max-width:780px;margin:0 auto}
@media(max-width:620px){.prices{grid-template-columns:1fr}}
.price{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:38px;text-align:center;position:relative;box-shadow:var(--shadow-sm)}
/* la carte à choisir doit dominer visuellement, sinon le visiteur compare deux
   propositions de poids égal et repart sans trancher */
.price.feat{border:2px solid var(--terra-txt);box-shadow:var(--shadow)}
.price .tag{position:absolute;top:-14px;left:50%;transform:translateX(-50%);background:var(--terra-txt);color:#fff;font-family:-apple-system,sans-serif;font-size:.72rem;font-weight:700;letter-spacing:.6px;text-transform:uppercase;padding:6px 16px;border-radius:999px}
.price h3{font-size:1.25rem;margin-bottom:6px}
/* chiffres alignés et tabulaires : en Georgia, les chiffres par défaut sont
   elzéviriens (le 6 monte, le 9 descend), ce qui fait bancal à ce corps-là */
.price .amt{font-size:clamp(3.2rem,2.4rem + 3vw,4.4rem);color:var(--sage-d);margin:2px 0 4px;line-height:1;letter-spacing:-.03em;font-variant-numeric:lining-nums tabular-nums}
.price .amt span{font-size:1rem;color:var(--muted);letter-spacing:0}
.price .go{display:inline-block;margin-top:22px}
.price .dur{font-family:-apple-system,sans-serif;color:var(--muted);font-size:.9rem;margin-bottom:18px}
.price ul{list-style:none;text-align:left;font-family:-apple-system,sans-serif;font-size:.95rem;color:var(--muted);display:flex;flex-direction:column;gap:10px}
.price ul li{padding-left:26px;position:relative}
.price ul li:before{content:"✦";color:var(--gold);position:absolute;left:0}
.price-note{text-align:center;color:var(--muted);font-family:-apple-system,sans-serif;font-size:.9rem;margin-top:24px}

/* OFFRE GROUPE */
.offer{display:grid;grid-template-columns:1.1fr .9fr;gap:0;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);max-width:960px;margin:0 auto}
@media(max-width:820px){.offer{grid-template-columns:1fr}}
.offer .desc{padding:44px}
.offer .desc h3{font-size:1.7rem;color:var(--sage-d);margin-bottom:14px}
.offer .desc p{color:var(--muted);margin-bottom:14px}
.offer .feats{list-style:none;font-family:-apple-system,sans-serif;font-size:.96rem;color:var(--ink);display:flex;flex-direction:column;gap:10px;margin-top:18px}
.offer .feats li{padding-left:28px;position:relative}
.offer .feats li:before{content:"✦";color:var(--gold);position:absolute;left:0}
.offer .buy{background:linear-gradient(165deg,var(--sage) 0%,var(--sage-d) 100%);color:#fff;padding:44px 40px;display:flex;flex-direction:column;justify-content:center;text-align:center}
.offer .buy .amt{font-size:3.1rem;font-weight:600;line-height:1}
.offer .buy .amt span{font-size:1.05rem;font-weight:400;opacity:.85}
.offer .buy .small{font-family:-apple-system,sans-serif;font-size:.9rem;opacity:.9;margin:12px 0 24px}
.offer .buy .btn.soft{color:var(--sage-d)}

/* CADEAU */
.lead-band{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-sm);padding:40px 44px;max-width:900px;margin:0 auto;display:grid;grid-template-columns:1.1fr .9fr;gap:30px;align-items:center}
@media(max-width:760px){.lead-band{grid-template-columns:1fr;text-align:center}}
.lead-band h2{font-size:1.7rem;margin-bottom:10px}
.lead-band p{color:var(--muted)}
.gift{display:flex;gap:10px;flex-wrap:wrap}
@media(max-width:760px){.gift{justify-content:center}}
.gift input{flex:1;min-width:200px;font-family:-apple-system,sans-serif;font-size:1rem;padding:15px 18px;border:1px solid var(--line);border-radius:999px;background:#fff;color:var(--ink)}
.gift input:focus{outline:none;border-color:var(--sage)}
.gift .ok{display:none;font-family:-apple-system,sans-serif;font-size:.92rem;color:var(--sage-d);margin-top:10px;width:100%}

/* FAQ — une liste de questions sous filets, plus une pile de boîtes blanches.
   Huit cartes empilées se lisent comme une interface ; huit questions séparées
   par un filet se lisent comme un texte, ce qui est l'effet recherché. */
.faq{max-width:760px;margin:0}
details{background:none;border:0;border-top:1px solid var(--line);border-radius:0;padding:0;margin:0;box-shadow:none}
details:last-of-type{border-bottom:1px solid var(--line)}
summary{cursor:pointer;padding:22px 0;font-size:1.14rem;font-weight:600;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px;transition:color .2s;letter-spacing:-.012em}
summary:hover{color:var(--terra-txt)}
summary::-webkit-details-marker{display:none}
summary:after{content:"+";color:var(--terra-txt);font-size:1.6rem;font-weight:300;line-height:1;transition:transform .25s ease;flex:0 0 auto}
details[open] summary:after{content:"+";transform:rotate(45deg)}
details[open] summary{color:var(--terra-txt)}
details[open]{border-color:#d9cbb1}
details p{color:var(--muted);padding-bottom:22px;font-size:1.02rem}

/* RESERVER */
.booking{text-align:center}
.booking h2{font-size:2.4rem;margin-bottom:16px}
.booking p{opacity:.9;max-width:560px;margin:0 auto 32px;font-size:1.14rem}
.contact{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:30px}
/* pastilles assombries plutôt qu'éclaircies : sur le haut du dégradé, un fond
   blanc translucide faisait tomber le texte blanc à 4,27:1, sous le seuil */
.contact a{font-family:-apple-system,sans-serif;background:rgba(0,0,0,.16);color:#fff;padding:13px 22px;border-radius:999px;font-size:.98rem;border:1px solid rgba(255,255,255,.3)}
.contact a:hover{background:rgba(0,0,0,.26);border-color:rgba(255,255,255,.5)}

/* AGENDA CALENDLY INTÉGRÉ */
.agenda{background:var(--cream)}
/* la hauteur est ici plutôt qu'en attribut style dans le HTML : la politique de
   sécurité du site interdit les styles écrits dans les balises */
.agenda .calendly-inline-widget{
  min-width:320px;height:700px;
  border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
  background:var(--cream);box-shadow:var(--shadow-sm);
}
@media(max-width:860px){
  /* sous 860px Calendly empile le calendrier et la liste des horaires :
     il lui faut nettement plus de hauteur, sinon le widget défile sur lui-même */
  .agenda .calendly-inline-widget{height:1080px}
}
.agenda-repli{margin-top:22px;font-family:-apple-system,sans-serif;font-size:.92rem;color:var(--muted);max-width:60ch}
.agenda-repli a{text-decoration:underline;text-underline-offset:3px}
@media(max-width:560px){
  /* l'agenda a besoin de toute la largeur sur petit écran */
  .agenda .wrap{padding-left:12px;padding-right:12px}
  .agenda .calendly-inline-widget{border-radius:14px}
}

/* ETHIQUE + PIED DE PAGE */
.ethics{border-left:2px solid var(--gold);padding:8px 0 8px 28px;max-width:820px;margin:0 auto;font-family:-apple-system,sans-serif;font-size:.94rem;color:var(--muted);line-height:1.7}
.ethics b{color:var(--ink)}
footer{padding:52px 0;text-align:center;color:var(--muted);font-family:-apple-system,sans-serif;font-size:.9rem;border-top:1px solid var(--line)}
footer .brand{display:block;font-family:"Iowan Old Style",Georgia,serif;font-size:1.25rem;margin-bottom:10px}
.note{background:#fff8e8;border:1px dashed var(--gold);color:#8a6d2f;font-size:.8rem;padding:3px 10px;border-radius:8px;display:inline-block}
.footer-legal{max-width:560px;margin:20px auto 0;text-align:left}
.footer-legal summary{justify-content:center;font-size:.9rem;padding:14px 0}
.footer-legal p{font-size:.86rem;text-align:left;line-height:1.65}

/* PAGE ARTICLE (hypnose-addiction-ecrans) */
.article-head{padding-top:54px;padding-bottom:56px}
.fil{font-family:-apple-system,sans-serif;font-size:.86rem;color:var(--muted);margin-bottom:26px}
.fil a{color:var(--muted)}
.fil a:hover{color:var(--terra)}
.article-head h1{font-size:clamp(2.1rem,1.7rem + 2.2vw,3.3rem);line-height:1.1;letter-spacing:-.02em;max-width:18ch;margin-bottom:22px}
.chapo{font-size:clamp(1.12rem,1rem + .6vw,1.28rem);color:var(--ink-soft);max-width:640px;margin-bottom:32px}
/* ferré à gauche comme les rubriques : tout le site s'appuie sur un seul bord
   gauche, celui que l'œil suit pour descendre la page. Un bloc centré au milieu
   de blocs ferrés casse ce rail et se lit comme une erreur. */
.prose{max-width:720px;margin:0}
.prose h2{font-size:clamp(1.6rem,1.3rem + 1.3vw,2.15rem);line-height:1.16;letter-spacing:-.015em;margin-bottom:20px}
.prose h3{font-size:1.3rem;margin:34px 0 12px;color:var(--sage-d)}
.prose p{color:var(--ink-soft);margin-bottom:18px}
.prose p b{color:var(--ink)}
.prose a{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;text-decoration-color:rgba(201,113,78,.5);transition:text-decoration-color .2s var(--ease)}
.prose a:hover{text-decoration-color:var(--terra)}
.liste{list-style:none;margin:0 0 22px;display:flex;flex-direction:column;gap:12px;color:var(--ink-soft)}
.liste li{padding-left:30px;position:relative}
.liste li:before{content:"✦";color:var(--gold);position:absolute;left:4px}
.liste li b{color:var(--ink)}


/* PAGE 404 */
.err{min-height:70vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:60px 24px}
.err h1{font-size:2.4rem;margin-bottom:16px}
.err p{color:var(--muted);max-width:520px;margin-bottom:28px}

/* BARRE DE RESERVATION MOBILE (injectee par site.js, mobile uniquement) */
.cta-bar{display:none}
@media(max-width:760px){
  .cta-bar{
    display:block;position:fixed;left:0;right:0;bottom:0;z-index:60;
    background:rgba(250,245,236,.96);backdrop-filter:blur(10px);
    border-top:1px solid var(--line);padding:10px 16px calc(10px + env(safe-area-inset-bottom));
    transform:translateY(110%);transition:transform .3s ease;
  }
  .cta-bar.visible{transform:translateY(0)}
  .cta-bar{box-shadow:0 -6px 20px rgba(56,51,44,.07)}
  .cta-bar .btn{display:block;text-align:center;padding:15px 20px;font-size:.98rem;min-height:48px}
  body.has-cta-bar{padding-bottom:76px}
}

/* APPARITION DOUCE AU DEFILEMENT (classe posee par site.js) */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease}
.reveal.in{opacity:1;transform:none}

/* respect du reglage systeme "reduire les animations" */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
  .photo:hover img{transform:none}
  .reveal{opacity:1;transform:none}
}