/* =========================================================
   Élise Carrère — Sophrologue Annecy
   Palette : chocolat (logo) sur fonds blancs
   Le crème #FFF6F0 d'origine est conservé en jeton (--creme)
   mais n'est plus utilisé comme fond de page.
   Type : Newsreader (éditoriale) + Karla (interface)
   ========================================================= */

:root{
  --encre:      #3B2A22;   /* chocolat très foncé — texte et blocs sombres */
  --encre-2:    #6E584D;   /* texte secondaire */
  --fond:       #FFFFFF;   /* fond de page */
  --sable:      #FFFFFF;   /* sections alternées : blanches, séparées par un filet */
  --sable-2:    #E9DFD8;   /* filets et bordures */
  --creme:      #FFF6F0;   /* crème d'origine — conservé pour référence */
  --prune:      #7A5544;   /* chocolat du logo — liens, boutons, accents */
  --prune-clair:#966953;   /* survol */
  --sauge:      #C3A38F;   /* accent secondaire, filets doux */
  --blanc:      #FFFFFF;

  --serif: "Newsreader", Georgia, serif;
  --sans:  "Karla", system-ui, -apple-system, sans-serif;

  --mesure: 34rem;
  --gouttiere: clamp(1.25rem, 5vw, 4rem);
  --rythme: clamp(4rem, 9vw, 7.5rem);
}

*,*::before,*::after{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
}

body{
  margin:0;
  background:var(--fond);
  color:var(--encre);
  font-family:var(--sans);
  font-size:1.0625rem;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; height:auto; display:block; }

a{ color:var(--prune); text-decoration-thickness:1px; text-underline-offset:.18em; }
a:hover{ color:var(--prune-clair); }

:focus-visible{ outline:2px solid var(--prune); outline-offset:3px; border-radius:2px; }

/* ---------- Typographie ---------- */
h1,h2,h3,h4{
  font-family:var(--serif);
  font-weight:400;
  line-height:1.12;
  letter-spacing:-.012em;
  margin:0 0 .6em;
  text-wrap:balance;
}
h1{ font-size:clamp(2.4rem, 6.2vw, 4.15rem); }
h2{ font-size:clamp(1.85rem, 4vw, 2.7rem); }
h3{ font-size:clamp(1.3rem, 2.4vw, 1.6rem); line-height:1.25; }
h4{ font-size:1.1rem; font-family:var(--sans); font-weight:700; letter-spacing:0; }

p{ margin:0 0 1.15em; max-width:var(--mesure); }
.large{ font-size:clamp(1.12rem,1.8vw,1.28rem); line-height:1.6; color:var(--encre-2); }

em, .italique{ font-style:italic; }

.marque{ color:var(--prune); }

/* ---------- Structure ---------- */
.enveloppe{ width:100%; max-width:1180px; margin-inline:auto; padding-inline:var(--gouttiere); }
section{ padding-block:var(--rythme); }
.serre{ padding-block:calc(var(--rythme) * .62); }
.sable{ background:var(--sable); border-top:1px solid var(--sable-2); border-bottom:1px solid var(--sable-2); }
.sable + .sable{ border-top:none; }
.encre-fond{ background:var(--encre); color:var(--sable); }
.encre-fond h2,.encre-fond h3{ color:var(--fond); }
.encre-fond p{ color:#E2D5CC; }
.encre-fond a{ color:#EBD4C4; }

.duo{ display:grid; gap:clamp(2rem,5vw,4.5rem); align-items:start; }
@media (min-width:900px){
  .duo{ grid-template-columns:1fr 1fr; }
  .duo-large{ grid-template-columns:1.35fr 1fr; }
  .duo-etroit{ grid-template-columns:.85fr 1.15fr; }
}

/* ---------- En-tête ---------- */
.bandeau{
  position:sticky; top:0; z-index:50;
  background:rgba(255,255,255,.95);
  backdrop-filter:saturate(140%) blur(8px);
  border-bottom:1px solid var(--sable-2);
}
.bandeau-int{
  display:flex; align-items:center; justify-content:space-between;
  gap:1.5rem; padding-block:.9rem;
}
.logo{ text-decoration:none; color:var(--encre); line-height:1.05; display:flex;
  align-items:center; gap:.75rem; }
.logo img{ height:68px; width:auto; }
.logo .nom{ display:block; }
.logo b{ font-family:var(--serif); font-size:1.26rem; font-weight:500; letter-spacing:-.01em; display:block; }
.logo span{ font-size:.7rem; letter-spacing:.09em; color:var(--encre-2); }
@media (max-width:520px){
  .logo img{ height:54px; }
  .logo .nom{ display:none; }
}
.pied-logo{ height:88px; width:auto; margin-bottom:1.1rem; filter:brightness(0) invert(1); opacity:.9; }

.nav{ display:flex; align-items:center; gap:1.6rem; }
.nav a{ color:var(--encre); text-decoration:none; font-size:.95rem; }
.nav a:hover{ color:var(--prune); text-decoration:underline; }
.nav a[aria-current="page"]{ color:var(--prune); }

.menu-btn{
  display:none; background:none; border:1px solid var(--sable-2);
  border-radius:4px; padding:.5rem .7rem; font:inherit; font-size:.9rem;
  color:var(--encre); cursor:pointer;
}
@media (max-width:1000px){
  .nav{
    display:none; position:absolute; inset-inline:0; top:100%;
    flex-direction:column; align-items:flex-start; gap:0;
    background:var(--fond); border-bottom:1px solid var(--sable-2);
    padding:.5rem var(--gouttiere) 1.4rem;
  }
  .nav.ouvert{ display:flex; }
  .nav a{ padding:.7rem 0; width:100%; border-bottom:1px solid var(--sable-2); }
  .nav .bouton{ margin-top:1rem; border-bottom:none; }
  .menu-btn{ display:block; }
}

/* ---------- Boutons ---------- */
.bouton{
  display:inline-block; padding:.85rem 1.5rem;
  background:var(--prune); color:var(--blanc) !important;
  border:1px solid var(--prune); border-radius:2px;
  font-size:.98rem; font-weight:600; text-decoration:none !important;
  transition:background .18s ease;
}
.bouton:hover{ background:var(--prune-clair); border-color:var(--prune-clair); }
.bouton-vide{ background:transparent; color:var(--encre) !important; border-color:var(--encre); }
.bouton-vide:hover{ background:var(--encre); color:var(--fond) !important; }
.bouton-clair{ background:var(--sable); color:var(--encre) !important; border-color:var(--sable); }
.bouton-clair:hover{ background:var(--blanc); border-color:var(--blanc); }
.actions{ display:flex; flex-wrap:wrap; gap:.85rem; margin-top:2rem; }
.sous-action{ font-size:.9rem; color:var(--encre-2); margin-top:1rem; }

/* ---------- Héro ---------- */
.hero{ padding-block:clamp(3.5rem,8vw,6.5rem) var(--rythme); }
.hero h1{ margin-bottom:.5em; }
.hero h1 .ligne2{ display:block; font-style:italic; color:var(--prune); }
.hero p{ max-width:31rem; }
.hero-photo{ position:relative; }
.hero-photo img{
  width:100%; aspect-ratio:4/5; object-fit:cover;
  border-radius:2px 2px 120px 120px;
}
.hero-note{
  margin-top:1.1rem; font-size:.86rem; color:var(--encre-2);
  border-left:2px solid var(--sauge); padding-left:.85rem; max-width:20rem;
}

@media (prefers-reduced-motion: no-preference){
  .anim{ opacity:0; transform:translateY(14px); animation:monte .7s cubic-bezier(.2,.7,.3,1) forwards; }
  .anim-2{ animation-delay:.1s; }
  .anim-3{ animation-delay:.2s; }
  .anim-4{ animation-delay:.3s; }
  @keyframes monte{ to{ opacity:1; transform:none; } }
}

/* ---------- Miroir (phrases patientes) ---------- */
.miroir li{
  font-family:var(--serif); font-style:italic;
  font-size:clamp(1.25rem,2.6vw,1.75rem); line-height:1.4;
  padding:1.05rem 0; border-bottom:1px solid var(--sable-2);
  max-width:38rem;
}
.miroir{ list-style:none; margin:0; padding:0; }
.miroir li:first-child{ border-top:1px solid var(--sable-2); }
.encre-fond .miroir li{ border-color:#5A473C; color:#FFF6F0; }

/* ---------- Listes ---------- */
ul.puces{ padding-left:1.1rem; max-width:var(--mesure); margin:0 0 1.2em; }
ul.puces li{ margin-bottom:.55em; }
ul.puces li::marker{ color:var(--prune); }

.nue{ list-style:none; padding:0; margin:0; }

/* ---------- Étapes numérotées (vraie séquence) ---------- */
.etapes{ counter-reset:e; display:grid; gap:2rem; margin-top:2.5rem; }
@media (min-width:800px){ .etapes{ grid-template-columns:repeat(3,1fr); } }
.etape{ counter-increment:e; border-top:2px solid var(--encre); padding-top:1.1rem; }
.etape::before{
  content:counter(e); font-family:var(--serif); font-size:1.05rem;
  color:var(--prune); display:block; margin-bottom:.4rem;
}
.etape h3{ font-size:1.2rem; margin-bottom:.4em; }
.etape p{ font-size:.98rem; margin-bottom:0; }

/* ---------- Liste des accompagnements ---------- */
.accompagnements{ margin-top:2.5rem; border-top:1px solid var(--sable-2); }
.accompagnement{
  display:grid; gap:.4rem 2.5rem; padding:1.7rem 0;
  border-bottom:1px solid var(--sable-2);
  text-decoration:none; color:inherit;
}
@media (min-width:820px){
  .accompagnement{ grid-template-columns:15rem 1fr auto; align-items:baseline; }
}
.accompagnement h3{ margin:0; font-size:1.45rem; }
.accompagnement p{ margin:0; font-size:.99rem; color:var(--encre-2); max-width:38rem; }
.accompagnement .fleche{ color:var(--prune); font-size:.92rem; font-weight:600; white-space:nowrap; }
.accompagnement:hover h3{ color:var(--prune); }
.accompagnement:hover .fleche{ text-decoration:underline; }

/* ---------- Avis ---------- */
.avis{ display:grid; gap:1.6rem; margin-top:2.5rem; }
@media (min-width:820px){ .avis{ grid-template-columns:repeat(2,1fr); } }
.avis blockquote{
  margin:0; padding:1.6rem; background:var(--blanc);
  border:1px solid var(--sable-2); border-radius:2px;
}
.avis p{ font-family:var(--serif); font-size:1.06rem; line-height:1.55; margin-bottom:1rem; max-width:none; }
.avis cite{ font-style:normal; font-size:.86rem; color:var(--encre-2); }
.etoiles{ color:var(--prune); letter-spacing:.12em; font-size:.9rem; margin-bottom:.7rem; }

/* ---------- Tarifs ---------- */
.grille-tarifs{ display:grid; gap:1.4rem; margin-top:2.5rem; }
@media (min-width:800px){ .grille-tarifs{ grid-template-columns:repeat(3,1fr); } }
.tarif{
  background:var(--blanc); border:1px solid var(--sable-2);
  padding:1.8rem; border-radius:2px; display:flex; flex-direction:column;
}
.tarif.mise-en-avant{ border:2px solid var(--prune); position:relative; }
.tarif .badge{
  position:absolute; top:-.72rem; left:1.6rem; background:var(--prune);
  color:var(--blanc); font-size:.72rem; font-weight:700;
  padding:.22rem .6rem; border-radius:2px; letter-spacing:.03em;
}
.tarif h3{ font-size:1.3rem; margin-bottom:.25em; }
.tarif .duree{ font-size:.88rem; color:var(--encre-2); margin-bottom:1.1rem; }
.tarif .prix{ font-family:var(--serif); font-size:2.6rem; line-height:1; color:var(--prune); }
.tarif .prix small{ font-family:var(--sans); font-size:.85rem; color:var(--encre-2); display:block; margin-top:.5rem; }
.tarif ul{ margin:1.2rem 0 1.6rem; padding-left:1.05rem; font-size:.95rem; }
.tarif ul li{ margin-bottom:.45em; }
.tarif .bouton{ margin-top:auto; text-align:center; }

/* ---------- FAQ ---------- */
.faq{ max-width:44rem; margin-top:2.5rem; border-top:1px solid var(--sable-2); }
.faq details{ border-bottom:1px solid var(--sable-2); }
.faq summary{
  cursor:pointer; padding:1.15rem 2rem 1.15rem 0; position:relative;
  font-family:var(--serif); font-size:1.16rem; line-height:1.35; list-style:none;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{
  content:"+"; position:absolute; right:.15rem; top:1rem;
  font-size:1.4rem; color:var(--prune); line-height:1;
}
.faq details[open] summary::after{ content:"–"; }
.faq details p{ margin:0 0 1.15rem; font-size:1rem; max-width:42rem; }

/* ---------- Encadré / avertissement ---------- */
.encadre{
  background:var(--creme); border-left:3px solid var(--sauge);
  padding:1.4rem 1.6rem; margin:2rem 0; max-width:42rem; border-radius:2px;
}
.encadre p{ margin-bottom:0; font-size:.97rem; }
.encadre h4{ margin-bottom:.5em; }

/* ---------- Formulaire ---------- */
.formulaire{ max-width:32rem; }
.champ{ margin-bottom:1.1rem; }
.champ label{ display:block; font-size:.9rem; font-weight:600; margin-bottom:.35rem; }
.champ input,.champ textarea,.champ select{
  width:100%; padding:.75rem .85rem; font:inherit; font-size:1rem;
  border:1px solid var(--sable-2); border-radius:2px;
  background:var(--blanc); color:var(--encre);
}
.champ textarea{ min-height:9rem; resize:vertical; }
.champ input:focus,.champ textarea:focus,.champ select:focus{ border-color:var(--prune); }
.rgpd{ font-size:.82rem; color:var(--encre-2); }

/* ---------- Capture e-mail ---------- */
.capture{ background:var(--encre); color:var(--sable); border-radius:2px; padding:clamp(2rem,4vw,3rem); }
.capture h2{ color:var(--fond); margin-bottom:.4em; }
.capture form{ display:flex; flex-wrap:wrap; gap:.7rem; margin-top:1.6rem; max-width:30rem; }
.capture input{
  flex:1 1 15rem; padding:.8rem .9rem; font:inherit; border:1px solid #5A473C;
  background:#4A362C; color:var(--fond); border-radius:2px;
}
.capture input::placeholder{ color:#A89184; }

/* ---------- Infos pratiques ---------- */
.pratique{ display:grid; gap:1.8rem; margin-top:2rem; }
@media (min-width:700px){ .pratique{ grid-template-columns:repeat(3,1fr); } }
.pratique h4{ margin-bottom:.35em; color:var(--prune); }
.pratique p{ margin-bottom:0; font-size:.98rem; }

/* ---------- Fil d'Ariane ---------- */
.fil{ font-size:.85rem; color:var(--encre-2); padding-top:1.6rem; }
.fil a{ color:var(--encre-2); }

/* ---------- Sommaire d'article ---------- */
.sommaire{ background:var(--creme); padding:1.4rem 1.6rem; border-radius:2px; max-width:32rem; margin-bottom:2.5rem; }
.sommaire h4{ margin-bottom:.6em; }
.sommaire ol{ margin:0; padding-left:1.2rem; font-size:.95rem; }
.sommaire li{ margin-bottom:.35em; }

/* ---------- Pied de page ---------- */
.pied{ background:var(--encre); color:#D2C1B6; padding-block:clamp(3rem,6vw,4.5rem) 2rem; font-size:.95rem; }
.pied-grille{ display:grid; gap:2.2rem; }
@media (min-width:760px){ .pied-grille{ grid-template-columns:1.4fr 1fr 1fr; } }
.pied h4{ color:var(--fond); font-size:.98rem; margin-bottom:.9em; }
.pied a{ color:#D2C1B6; text-decoration:none; }
.pied a:hover{ color:var(--fond); text-decoration:underline; }
.pied ul{ list-style:none; padding:0; margin:0; }
.pied li{ margin-bottom:.5em; }
.pied p{ margin-bottom:.5em; max-width:26rem; }
.pied-bas{
  margin-top:2.8rem; padding-top:1.4rem; border-top:1px solid #5A473C;
  display:flex; flex-wrap:wrap; gap:.6rem 1.4rem; font-size:.83rem; color:#A89184;
}
.pied-bas a{ color:#A89184; }

/* ---------- Barre mobile collante ---------- */
.barre-mobile{
  position:fixed; inset-inline:0; bottom:0; z-index:60;
  display:none; gap:1px; background:var(--sable-2);
  box-shadow:0 -2px 14px rgba(46,33,28,.14);
}
.barre-mobile a{
  flex:1; text-align:center; padding:.95rem .5rem; font-size:.93rem;
  font-weight:600; text-decoration:none; background:var(--blanc); color:var(--encre);
}
.barre-mobile a.principal{ background:var(--prune); color:var(--blanc); }
@media (max-width:700px){
  .barre-mobile{ display:flex; }
  body{ padding-bottom:3.6rem; }
}

/* ---------- Retour en haut ---------- */
.haut{
  position:fixed; right:clamp(1rem,3vw,2rem); bottom:clamp(1rem,3vw,2rem); z-index:55;
  width:2.9rem; height:2.9rem; display:grid; place-items:center;
  background:var(--blanc); color:var(--prune);
  border:1px solid var(--sable-2); border-radius:50%;
  box-shadow:0 2px 12px rgba(59,42,34,.14);
  cursor:pointer; padding:0;
  opacity:0; visibility:hidden; transform:translateY(8px);
  transition:opacity .22s ease, transform .22s ease, visibility .22s;
}
.haut.visible{ opacity:1; visibility:visible; transform:none; }
.haut:hover{ background:var(--prune); color:var(--blanc); border-color:var(--prune); }
.haut svg{ width:1.05rem; height:1.05rem; fill:none; stroke:currentColor; stroke-width:2; }
@media (max-width:700px){
  .haut{ bottom:4.4rem; width:2.7rem; height:2.7rem; }
}
@media (prefers-reduced-motion: reduce){
  .haut{ transition:none; }
}

.saut{
  position:absolute; left:-9999px;
}
.saut:focus{
  left:.5rem; top:.5rem; z-index:100; background:var(--prune);
  color:#fff; padding:.6rem 1rem; border-radius:2px;
}