/* =========================================================================
   « Douceur » · feuille de style du site de Julien Vasseur, hypnothérapeute
   Registre du soin, pas de la performance.

   Il doit rester très différent du site d'Hélène Marchand, psychologue.
   Les deux sont calmes, mais d'un calme de nature opposée :

     Hélène   : papier ivoire, TOUT en serif, filets d'un pixel, aucun
                arrondi, aucune ombre, lumière froide et diffuse,
                gouttière éditoriale, rigueur d'imprimé.
     Julien   : brume lilas, TOUT en sans arrondi, courbes généreuses,
                ombres douces et portées loin, lumière chaude, formes
                pleines et enveloppantes, respiration.

   Couleurs reprises de la fiche métier du projet (defaults/hypnotherapeute) :
   violet doux et vert profond, jamais de noir pur.
   ========================================================================= */

/* ---------- 1. Jetons ---------- */
:root{
  --brume:#F6F3F9;        /* le fond, brume lilas très pâle */
  --brume-2:#EFE9F4;      /* bande secondaire */
  --lait:#FFFFFF;         /* les surfaces posées dessus */
  --vert:#1F3A32;         /* le texte, vert profond, jamais de noir */
  --vert-2:#4C6A5F;       /* texte secondaire */
  --vert-3:#546E65;       /* mentions */
  --violet:#7A4F9B;       /* l'accent */
  --violet-2:#8F63B0;
  --violet-pale:#EDE3F5;  /* fond de pastille */
  --miel:#C98A45;         /* seconde touche, très rare */
  --trait:#E2D9EA;        /* filets, doux */

  --display:"Outfit",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --texte:"Figtree",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;

  --r-s:14px;             /* arrondis : la signature de ce site */
  --r-m:24px;
  --r-l:36px;
  --r-pill:999px;

  --ombre:0 20px 44px -28px rgba(31,58,50,.34);
  --ombre-forte:0 26px 60px -30px rgba(31,58,50,.42);

  --col:1160px;
  --pad:clamp(20px,5vw,52px);

  --t-0:18px;
  --t-1:21px;
  --t-2:clamp(23px,2.4vw,30px);
  --t-3:clamp(28px,3.6vw,42px);
  --t-4:clamp(36px,5.6vw,68px);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --brume:#171A20;--brume-2:#1E222A;--lait:#232832;
    --vert:#E6EDE9;--vert-2:#A9BCB4;--vert-3:#87998F;
    --violet:#C4A0DC;--violet-2:#D4B6E8;--violet-pale:#2E2740;
    --miel:#E0AE72;--trait:#333944;
    --ombre:0 20px 44px -28px rgba(0,0,0,.7);
    --ombre-forte:0 26px 60px -30px rgba(0,0,0,.8);
  }
}
:root[data-theme="dark"]{
  --brume:#171A20;--brume-2:#1E222A;--lait:#232832;
  --vert:#E6EDE9;--vert-2:#A9BCB4;--vert-3:#87998F;
  --violet:#C4A0DC;--violet-2:#D4B6E8;--violet-pale:#2E2740;
  --miel:#E0AE72;--trait:#333944;
  --ombre:0 20px 44px -28px rgba(0,0,0,.7);
  --ombre-forte:0 26px 60px -30px rgba(0,0,0,.8);
}

/* ---------- 2. Socle ---------- */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;background:var(--brume);color:var(--vert);
  font-family:var(--texte);font-size:var(--t-0);line-height:1.68;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{margin:0;font-family:var(--display);font-weight:300;
  line-height:1.16;letter-spacing:-.018em;text-wrap:balance}
p{margin:0}
ul,ol{margin:0;padding-left:1.2em}
li{margin-bottom:.5em}
img{max-width:100%;display:block}
a{color:inherit}
:focus-visible{outline:3px solid var(--violet);outline-offset:3px;border-radius:6px}

.wrap{max-width:var(--col);margin:0 auto;padding-inline:var(--pad)}
.stack{display:flex;flex-direction:column;align-items:flex-start}
.stack.large{align-items:stretch}
.stack > .grille,.stack > figure,.stack > .etapes,.stack > .protocole,
.stack > .faq,.stack > .rappel,.stack > .reperes{align-self:stretch;width:100%}
.g8{gap:8px}.g14{gap:14px}.g20{gap:20px}.g28{gap:28px}.g36{gap:36px}.g52{gap:52px}
.prose{max-width:60ch}
.tnum{font-variant-numeric:tabular-nums}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}

/* ---------- 3. Titres ---------- */
.display{font-size:var(--t-4);line-height:1.1}
.h2{font-size:var(--t-3)}
.h3{font-size:var(--t-2);font-weight:400}
.h4{font-family:var(--texte);font-size:var(--t-1);font-weight:600;letter-spacing:-.005em}
.chapeau{font-size:clamp(18px,1.9vw,21px);line-height:1.66;color:var(--vert-2);max-width:56ch}
.sur{font-size:13px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--violet)}

/* ---------- 4. Bandeau supérieur ---------- */
.barre{position:sticky;top:0;z-index:60;background:color-mix(in srgb,var(--brume) 92%,transparent);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--trait)}
.barre__in{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:78px}
.marque{display:flex;flex-direction:column;gap:2px;text-decoration:none;line-height:1.2}
.marque b{font-family:var(--display);font-size:21px;font-weight:400;letter-spacing:-.012em}
.marque span{font-size:11px;font-weight:500;letter-spacing:.13em;text-transform:uppercase;color:var(--vert-3)}
.menu{display:flex;align-items:center;gap:28px}
.menu a{font-size:15px;font-weight:500;text-decoration:none;color:var(--vert);
  padding:8px 0;border-bottom:2px solid transparent}
.menu a:hover,.menu a[aria-current="page"]{color:var(--violet);border-bottom-color:var(--violet)}
.bascule{display:none;background:var(--lait);border:1px solid var(--trait);border-radius:var(--r-pill);
  font-family:var(--texte);font-size:14px;font-weight:600;color:var(--vert);padding:10px 18px;cursor:pointer}

/* ---------- 5. Boutons, tout en pastille ---------- */
/* Écrits en a.xxx dès le départ : une règle .menu a a déjà fait disparaître
   un bouton sur le site voisin, on ne recommence pas. */
a.bouton,button.bouton{
  display:inline-block;font-family:var(--texte);font-size:15.5px;font-weight:600;
  text-decoration:none;padding:15px 30px;border-radius:var(--r-pill);
  border:1px solid var(--violet);background:var(--violet);color:#fff;
  box-shadow:var(--ombre);transition:transform .18s ease,box-shadow .18s ease,background .18s ease;
}
a.bouton:hover,button.bouton:hover{background:var(--violet-2);border-color:var(--violet-2);
  transform:translateY(-2px);box-shadow:var(--ombre-forte)}
a.bouton--doux,button.bouton--doux{background:var(--lait);color:var(--vert);border-color:var(--trait)}
a.bouton--doux:hover,button.bouton--doux:hover{background:var(--lait);border-color:var(--violet);color:var(--violet)}
a.bouton--sm,button.bouton--sm{padding:11px 22px;font-size:14.5px}
.menu a.bouton,.menu a.bouton[aria-current="page"]{color:#fff;border-bottom-color:var(--violet)}
.menu a.bouton:hover,.menu a.bouton[aria-current="page"]:hover{color:#fff;border-bottom-color:var(--violet-2)}

a.lien{font-size:15.5px;font-weight:600;text-decoration:none;color:var(--violet);
  display:inline-flex;gap:.45em;align-items:center}
a.lien::after{content:"\2192";transition:transform .18s ease}
a.lien:hover::after{transform:translateX(4px)}

/* ---------- 6. Bandes ---------- */
.bande{padding-block:clamp(56px,7vw,96px)}
.bande--2{background:var(--brume-2)}
.bande--serre{padding-block:clamp(38px,4.5vw,60px)}

/* ---------- 7. Cartes d'objectif ---------- */
.grille{display:grid;gap:22px;grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
a.carte{
  display:flex;flex-direction:column;gap:12px;text-decoration:none;color:inherit;
  background:var(--lait);border-radius:var(--r-m);padding:30px 28px 26px;
  box-shadow:var(--ombre);transition:transform .2s ease,box-shadow .2s ease;
}
a.carte:hover{transform:translateY(-4px);box-shadow:var(--ombre-forte)}
.carte__t{font-family:var(--display);font-size:24px;font-weight:400;letter-spacing:-.015em;line-height:1.2}
.carte__d{font-size:16px;line-height:1.6;color:var(--vert-2);flex:1}
.carte__p{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:4px}
.pastille{
  display:inline-block;background:var(--violet-pale);color:var(--violet);
  border-radius:var(--r-pill);padding:6px 14px;font-size:13.5px;font-weight:600;
}
.pastille--doux{background:transparent;color:var(--vert-3);padding-left:0}

/* ---------- 8. Les repères, en douceur ---------- */
.reperes{display:flex;flex-wrap:wrap;gap:18px}
.repere{
  background:var(--lait);border-radius:var(--r-pill);padding:14px 26px;
  display:flex;align-items:baseline;gap:10px;box-shadow:var(--ombre);
}
.repere b{font-family:var(--display);font-weight:400;font-size:24px;color:var(--violet);line-height:1}
.repere span{font-size:14.5px;color:var(--vert-2)}

/* ---------- 9. Le déroulé, une vraie séquence ---------- */
.etapes{display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));counter-reset:e}
.etape{
  background:var(--lait);border-radius:var(--r-m);padding:28px 26px;
  display:flex;flex-direction:column;gap:10px;box-shadow:var(--ombre);
}
.etape::before{
  counter-increment:e;content:counter(e);
  width:38px;height:38px;border-radius:var(--r-pill);
  background:var(--violet-pale);color:var(--violet);
  display:flex;align-items:center;justify-content:center;
  font-weight:600;font-size:16px;
}
.etape h3{font-family:var(--display);font-size:20px;font-weight:400;letter-spacing:-.012em}
.etape p{font-size:15.5px;line-height:1.6;color:var(--vert-2)}

/* ---------- 10. Le protocole, présenté sans agressivité ---------- */
.protocole{background:var(--lait);border-radius:var(--r-m);box-shadow:var(--ombre);overflow:hidden}
.protocole__l{display:flex;flex-wrap:wrap;align-items:center;gap:10px 22px;
  padding:20px 28px;border-bottom:1px solid var(--trait)}
.protocole__l:last-child{border-bottom:0}
.protocole__n{font-weight:600;font-size:17px}
.protocole__d{font-size:14.5px;color:var(--vert-2)}
.protocole__p{margin-left:auto;font-family:var(--display);font-weight:400;
  font-size:26px;color:var(--violet);white-space:nowrap;font-variant-numeric:tabular-nums}

/* ---------- 11. Les questions que l'on n'ose pas poser ---------- */
.doutes{display:grid;gap:22px;grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.doute{background:var(--lait);border-radius:var(--r-l) var(--r-l) var(--r-l) 8px;
  padding:28px 26px;display:flex;flex-direction:column;gap:12px;box-shadow:var(--ombre)}
.doute q{font-family:var(--display);font-size:20px;font-weight:400;line-height:1.3;
  letter-spacing:-.012em;quotes:"«\202F" "\202F»"}
.doute p{font-size:15.5px;line-height:1.6;color:var(--vert-2);flex:1}

/* ---------- 12. Ce que l'hypnose ne fait pas ---------- */
.limite{background:var(--lait);border-radius:var(--r-s);padding:18px 22px;
  color:var(--vert-2);font-size:16.5px;line-height:1.6;border-left:4px solid var(--violet)}

/* ---------- 13. Images, toutes adoucies aux angles ---------- */
figure{margin:0;display:flex;flex-direction:column;gap:12px}
.photo{width:100%;height:auto;border-radius:var(--r-l);box-shadow:var(--ombre);background:var(--brume-2)}
.photo--large{aspect-ratio:16/9;object-fit:cover}
.photo--haute{aspect-ratio:5/6;object-fit:cover}
figcaption{font-size:14px;color:var(--vert-3)}

/* ---------- 14. Questions fréquentes ---------- */
.faq{display:flex;flex-direction:column;gap:12px}
.faq details{background:var(--lait);border-radius:var(--r-s);box-shadow:var(--ombre);overflow:hidden}
.faq summary{cursor:pointer;list-style:none;padding:20px 24px;font-weight:600;font-size:17px;
  display:flex;justify-content:space-between;gap:18px;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--violet);font-size:22px;line-height:1}
.faq details[open] summary::after{content:"\2013"}
.faq summary:hover{color:var(--violet)}
.faq__r{padding:0 24px 22px;color:var(--vert-2);max-width:62ch;font-size:16.5px}

/* ---------- 15. Invitation ---------- */
.rappel{background:var(--lait);border-radius:var(--r-l);padding:36px 34px;
  display:flex;flex-wrap:wrap;gap:22px 40px;align-items:center;justify-content:space-between;
  box-shadow:var(--ombre)}
.rappel p{font-family:var(--display);font-weight:300;font-size:clamp(22px,2.5vw,30px);
  line-height:1.24;letter-spacing:-.018em;max-width:24ch}

/* ---------- 16. Pied de page ---------- */
.pied{background:var(--brume-2);padding-block:clamp(48px,5vw,70px) 30px;margin-top:clamp(40px,5vw,70px)}
.pied__c{display:grid;gap:32px}
@media (min-width:760px){.pied__c{grid-template-columns:repeat(4,1fr)}}
.pied h2{font-family:var(--texte);font-size:12.5px;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:var(--vert-3);margin-bottom:14px}
.pied ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:10px}
.pied a{font-size:16px;text-decoration:none;color:var(--vert-2)}
.pied a:hover{color:var(--violet)}
.pied__nap{font-size:16px;line-height:1.7;color:var(--vert-2)}
.pied__bas{margin-top:34px;padding-top:20px;border-top:1px solid var(--trait);
  display:flex;flex-wrap:wrap;gap:10px 24px;justify-content:space-between;
  font-size:13.5px;color:var(--vert-3)}

/* ---------- 17. Bandeau de démonstration ---------- */
.demo{background:var(--violet-pale);color:var(--vert);font-size:13.5px;line-height:1.55;
  padding:12px var(--pad);display:flex;flex-wrap:wrap;gap:6px 20px;
  align-items:baseline;justify-content:center;text-align:center}
.demo b{font-weight:600}
.demo a{color:var(--violet);font-weight:600;text-decoration:underline;text-underline-offset:.2em;white-space:nowrap}

/* ---------- 18. Apparition au défilement ---------- */
.venir{opacity:0;transform:translateY(14px)}
.venir.la{opacity:1;transform:none;transition:opacity .6s ease,transform .6s ease}
@media (prefers-reduced-motion:reduce){.venir{opacity:1;transform:none}.venir.la{transition:none}}

/* ---------- 19. Petite largeur ---------- */
@media (max-width:1040px){
  .bascule{display:inline-block}
  .menu{display:none;position:absolute;left:0;right:0;top:100%;flex-direction:column;
    align-items:stretch;gap:0;background:var(--brume);border-bottom:1px solid var(--trait);
    padding:10px var(--pad) 24px}
  .menu.ouvert{display:flex}
  .menu a{padding:15px 0;border-bottom:1px solid var(--trait)}
  .menu a.bouton{margin-top:18px;text-align:center;padding:15px 30px;border-bottom-color:var(--violet)}
}

/* ---------- 20. Compléments issus du chantier ---------- */
/* Trois manques relevés par les agents pendant la construction, corrigés ici
   plutôt que contournés page par page. */

/* a) Il n'existait pas de carte pour un bloc NON cliquable : chaque agent
   détournait la classe des objections. */
.bloc{
  background:var(--lait);border-radius:var(--r-m);padding:28px 26px;
  display:flex;flex-direction:column;gap:11px;box-shadow:var(--ombre);
}
.bloc h3,.bloc .bloc__t{font-family:var(--display);font-size:22px;font-weight:400;
  letter-spacing:-.014em;line-height:1.2}
.bloc p{font-size:15.5px;line-height:1.6;color:var(--vert-2)}

/* b) .rappel p imposait la police d'affichage à TOUT paragraphe de l'encart,
   y compris à une explication courante. Seul le paragraphe d'accroche la prend. */
.rappel p{font-family:var(--texte);font-weight:400;font-size:17px;
  line-height:1.6;letter-spacing:0;color:var(--vert-2);max-width:52ch}
.rappel p.accroche,.rappel > p:first-child{
  font-family:var(--display);font-weight:300;font-size:clamp(22px,2.5vw,30px);
  line-height:1.24;letter-spacing:-.018em;color:var(--vert);max-width:24ch;
}

/* c) Une pastille de repère peut être un lien. */
a.repere{text-decoration:none;color:var(--vert);transition:transform .18s ease,box-shadow .18s ease}
a.repere:hover{transform:translateY(-2px);box-shadow:var(--ombre-forte);color:var(--violet)}

/* =========================================================================
   21. MOUVEMENT
   Sur un site de soin, le mouvement doit se sentir sans se voir. Tout est
   lent (500 à 900 ms), tout part du bas de quelques pixels seulement, rien
   ne rebondit, rien ne tourne. Et tout s'efface si la personne a demandé à
   son système de réduire les animations.
   ========================================================================= */

/* --- a) Entrée de page, en cascade --- */
[data-entree]{opacity:0;transform:translateY(18px)}
body.pret [data-entree]{
  opacity:1;transform:none;
  transition:opacity .75s cubic-bezier(.22,.61,.36,1),transform .75s cubic-bezier(.22,.61,.36,1);
  transition-delay:calc(var(--i,0) * 110ms);
}

/* --- b) Apparition au défilement, avec cascade dans les grilles --- */
.venir{opacity:0;transform:translateY(16px)}
.venir.la{opacity:1;transform:none;
  transition:opacity .7s cubic-bezier(.22,.61,.36,1),transform .7s cubic-bezier(.22,.61,.36,1)}
.venir.la > *{animation:monter .7s cubic-bezier(.22,.61,.36,1) both;
  animation-delay:calc(var(--i,0) * 90ms)}
@keyframes monter{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* --- c) Le bandeau se resserre quand on descend --- */
.barre{transition:min-height .35s ease,box-shadow .35s ease,background .35s ease}
.barre__in{transition:min-height .35s ease}
body.descendu .barre{box-shadow:0 10px 30px -24px rgba(31,58,50,.5)}
body.descendu .barre__in{min-height:62px}
.marque span{transition:opacity .3s ease,max-height .35s ease}
body.descendu .marque span{opacity:0;max-height:0}

/* --- d) Les questions fréquentes s'ouvrent en douceur --- */
.faq details::details-content{
  block-size:0;overflow:hidden;
  transition:block-size .4s ease,content-visibility .4s allow-discrete;
}
.faq details[open]::details-content{block-size:auto}
.faq summary::after{transition:transform .3s ease}
.faq details[open] summary::after{transform:rotate(180deg)}

/* --- e) Micro-relief au survol, sur tout ce qui est posé --- */
.bloc,.doute,.repere,.etape,.protocole{transition:transform .25s ease,box-shadow .25s ease}
.bloc:hover,.doute:hover,.etape:hover{transform:translateY(-3px);box-shadow:var(--ombre-forte)}
.protocole__l{transition:background .25s ease}
.protocole__l:hover{background:var(--violet-pale)}
.photo{transition:transform .7s cubic-bezier(.22,.61,.36,1)}
figure:hover .photo{transform:scale(1.015)}

/* --- f) Le guide de respiration, la seule animation qui SERT --- */
/* Il accompagne réellement l'exercice décrit dans le texte : inspirer sur
   quatre temps, expirer sur six. Ce n'est pas une décoration. */
.souffle{
  background:var(--lait);border-radius:var(--r-l);padding:34px 28px;
  box-shadow:var(--ombre);display:flex;flex-direction:column;
  align-items:center;gap:18px;text-align:center;
}
.souffle__aire{width:200px;height:212px;display:grid;place-items:center;position:relative;
  grid-template-rows:1fr auto;justify-items:center}
.souffle__rond{
  width:116px;height:116px;grid-row:1;border-radius:50%;
  background:var(--violet-pale);border:2px solid var(--violet);
  animation:respirer 10s ease-in-out infinite;
}
.souffle__halo{
  position:absolute;top:0;left:0;right:0;height:200px;border-radius:50%;
  background:radial-gradient(circle,var(--violet-pale) 0%,transparent 68%);
  animation:respirer 10s ease-in-out infinite;opacity:.6;
}
@keyframes respirer{
  0%   {transform:scale(.62)}
  40%  {transform:scale(1)}     /* quatre temps pour inspirer */
  50%  {transform:scale(1)}     /* une seconde de suspension  */
  100% {transform:scale(.62)}   /* six temps pour expirer     */
}
.souffle__mot{position:absolute;bottom:0;left:0;right:0;text-align:center;
  font-family:var(--display);font-weight:300;font-size:18px;color:var(--violet);
  letter-spacing:.02em}
.souffle__mot--in{animation:mot-in 10s ease-in-out infinite}
.souffle__mot--out{animation:mot-out 10s ease-in-out infinite}
@keyframes mot-in {0%,3%{opacity:0}8%,42%{opacity:1}48%,100%{opacity:0}}
@keyframes mot-out{0%,48%{opacity:0}55%,94%{opacity:1}99%,100%{opacity:0}}
.souffle p{font-size:16px;line-height:1.6;color:var(--vert-2);max-width:44ch}
.souffle__stop{
  background:none;border:1px solid var(--trait);border-radius:var(--r-pill);
  font-family:var(--texte);font-size:13.5px;font-weight:600;color:var(--vert-2);
  padding:8px 18px;cursor:pointer;
}
.souffle__stop:hover{border-color:var(--violet);color:var(--violet)}
.souffle.arret .souffle__rond,.souffle.arret .souffle__halo,
.souffle.arret .souffle__mot{animation-play-state:paused}

/* --- g) Rien de tout cela si la personne a demandé le calme --- */
@media (prefers-reduced-motion:reduce){
  [data-entree],.venir{opacity:1;transform:none}
  body.pret [data-entree],.venir.la{transition:none}
  .venir.la > *{animation:none}
  .barre,.barre__in,.marque span{transition:none}
  .souffle__rond,.souffle__halo,.souffle__mot{animation:none}
  .souffle__mot--out{opacity:0}
  .bloc:hover,.doute:hover,.etape:hover,figure:hover .photo{transform:none}
  .faq details::details-content{transition:none}
}