/* ============================================================
   Élise Vasseur — Sophrologue à Pau
   Direction : « cabinet à l'aube » — crème rosé, vert forêt,
   argile. Signature : les arches (portes vers le calme).
   ============================================================ */

:root{
  --creme:#FAF5EF;
  --creme-2:#F3EBE2;
  --foret:#33473C;
  --foret-2:#273A2F;
  --sauge:#93AC98;
  --sauge-pale:#DCE5DC;
  --argile:#C88A72;
  --argile-f:#B3765F;
  --ocre:#D9A45B;
  --texte:#42534A;
  --texte-doux:#71806F;
  --blanc:#FFFDFA;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:'Mulish',system-ui,sans-serif;
  background:var(--creme);
  color:var(--texte);
  font-size:17px;line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{font-family:'Marcellus',serif;font-weight:400;color:var(--foret);line-height:1.18;letter-spacing:.01em}
img,svg{max-width:100%}
a{color:inherit}
.wrap{max-width:1100px;margin:0 auto;padding:0 24px}

.eyebrow{display:block;font-size:12.5px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--argile);margin-bottom:16px}

/* ---------- nav ---------- */
.nav{position:sticky;top:0;z-index:60;background:rgba(250,245,239,.9);backdrop-filter:blur(10px);border-bottom:1px solid rgba(51,71,60,.08)}
.nav-in{display:flex;align-items:center;justify-content:space-between;height:76px}
.brand{text-decoration:none}
.brand .nom{font-family:'Marcellus',serif;font-size:20px;color:var(--foret);display:block;line-height:1.1}
.brand .titre{font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--argile)}
.menu{display:flex;align-items:center;gap:26px;font-size:15px;font-weight:600}
.menu a{text-decoration:none;color:var(--texte-doux);transition:color .2s;padding:4px 0;border-bottom:2px solid transparent}
.menu a:hover{color:var(--foret)}
.menu a.actif{color:var(--foret);border-bottom-color:var(--argile)}
.btn{display:inline-block;background:var(--foret);color:var(--creme);text-decoration:none;font-weight:700;font-size:15.5px;padding:14px 30px;border-radius:999px;transition:background .25s,transform .25s,box-shadow .25s;box-shadow:0 8px 22px rgba(51,71,60,.22)}
.btn:hover{background:var(--foret-2);transform:translateY(-2px)}
.btn.argile{background:var(--argile);color:#fff;box-shadow:0 8px 22px rgba(200,138,114,.32)}
.btn.argile:hover{background:var(--argile-f)}
.btn:focus-visible,a:focus-visible,button:focus-visible{outline:3px solid var(--ocre);outline-offset:3px;border-radius:6px}
.btn-nav{padding:11px 24px}
.burger{display:none;background:none;border:none;cursor:pointer;font-size:26px;color:var(--foret)}

/* ---------- hero ---------- */
.hero{padding:78px 0 90px;position:relative;overflow:hidden}
.hero-in{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
.hero h1{font-size:clamp(36px,4.8vw,54px);margin-bottom:20px}
.hero h1 em{font-style:normal;color:var(--argile)}
.hero .lead{font-size:18.5px;color:var(--texte-doux);max-width:50ch;margin-bottom:32px}
.hero-ctas{display:flex;gap:14px;flex-wrap:wrap;align-items:center;margin-bottom:22px}
.hero-lieu{font-size:14.5px;color:var(--texte-doux)}
.hero-lieu b{color:var(--foret)}

/* souffle : ligne de respiration animée */
.souffle{width:190px;height:26px;margin:26px 0 0;overflow:visible}
.souffle path{fill:none;stroke:var(--sauge);stroke-width:2.5;stroke-linecap:round;stroke-dasharray:420;stroke-dashoffset:420;animation:souffler 7s ease-in-out infinite}
@keyframes souffler{0%{stroke-dashoffset:420}55%{stroke-dashoffset:0}100%{stroke-dashoffset:-420}}

/* l'arche signature */
.arche{position:relative;width:min(400px,84vw);margin:0 auto;aspect-ratio:4/5;border-radius:999px 999px 26px 26px;overflow:hidden;
  background:linear-gradient(168deg,var(--sauge-pale) 0%,var(--sauge) 58%,var(--foret) 125%);
  box-shadow:0 30px 70px rgba(51,71,60,.22)}
.arche::after{content:"";position:absolute;inset:14px;border:1.5px solid rgba(250,245,239,.55);border-radius:999px 999px 18px 18px;pointer-events:none}
.arche .soleil{position:absolute;top:19%;left:50%;transform:translateX(-50%);width:34%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,#F2D6A8 0%,var(--ocre) 68%,rgba(217,164,91,0) 72%);opacity:.9;animation:lever 9s ease-in-out infinite alternate}
@keyframes lever{from{transform:translate(-50%,6px)}to{transform:translate(-50%,-6px)}}
.arche .plante{position:absolute;bottom:-4px;left:0;right:0}
.arche.mini{aspect-ratio:1/1.15;border-radius:999px 999px 20px 20px;box-shadow:0 18px 44px rgba(51,71,60,.16)}
.arche.ton-argile{background:linear-gradient(168deg,#F0DCD1 0%,var(--argile) 62%,#8E5843 128%)}
.arche.ton-ocre{background:linear-gradient(168deg,#F4E4C8 0%,var(--ocre) 62%,#A27130 128%)}

/* ---------- sections ---------- */
section{padding:84px 0}
.sec-head{max-width:620px;margin-bottom:46px}
.sec-head.centre{margin-left:auto;margin-right:auto;text-align:center}
.sec-head h2{font-size:clamp(28px,3.4vw,38px);margin-bottom:14px}
.sec-head p{color:var(--texte-doux);font-size:17.5px}
.fond-doux{background:var(--creme-2)}
.fond-foret{background:var(--foret);color:var(--creme-2)}
.fond-foret h2,.fond-foret h3{color:var(--creme)}
.fond-foret p{color:#C5D2C6}

/* cartes */
.grille{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.grille.deux{grid-template-columns:repeat(2,1fr)}
.carte{background:var(--blanc);border-radius:20px;padding:30px 28px;box-shadow:0 5px 22px rgba(51,71,60,.07);transition:transform .25s,box-shadow .25s}
.carte:hover{transform:translateY(-4px);box-shadow:0 16px 36px rgba(51,71,60,.11)}
.carte h3{font-size:20px;margin-bottom:10px}
.carte p{font-size:15.5px;color:var(--texte-doux)}
.carte .motif{width:44px;height:44px;margin-bottom:16px;color:var(--argile)}
.fond-foret .carte{background:rgba(250,245,239,.06);box-shadow:none;border:1px solid rgba(250,245,239,.14)}
.fond-foret .carte p{color:#C5D2C6}
.fond-foret .carte .motif{color:var(--ocre)}

/* étapes */
.etapes{counter-reset:etape;display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.etape{background:var(--blanc);border-radius:20px;padding:32px 28px;box-shadow:0 5px 22px rgba(51,71,60,.07);position:relative}
.etape::before{counter-increment:etape;content:counter(etape,decimal-leading-zero);font-family:'Marcellus',serif;font-size:15px;color:var(--argile);letter-spacing:.14em;display:block;margin-bottom:12px}
.etape h3{font-size:19px;margin-bottom:8px}
.etape p{font-size:15.5px;color:var(--texte-doux)}

/* duo texte / arche */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.duo .txt h2{font-size:clamp(26px,3.2vw,36px);margin-bottom:16px}
.duo .txt p{color:var(--texte-doux);margin-bottom:14px}
.duo .txt p b{color:var(--foret)}

/* témoignages */
.temoins{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.temoin{background:var(--blanc);border-radius:20px;padding:30px 28px;box-shadow:0 5px 22px rgba(51,71,60,.07)}
.temoin .etoiles{color:var(--ocre);letter-spacing:3px;margin-bottom:12px;font-size:15px}
.temoin p{font-size:15.5px;color:var(--texte);font-style:italic}
.temoin footer{margin-top:14px;font-size:14px;font-weight:700;color:var(--texte-doux);font-style:normal}

/* listes */
.liste-coche{list-style:none}
.liste-coche li{padding:9px 0 9px 32px;position:relative;font-size:16.5px}
.liste-coche li::before{content:"";position:absolute;left:2px;top:17px;width:14px;height:8px;border-left:2.5px solid var(--argile);border-bottom:2.5px solid var(--argile);transform:rotate(-45deg)}

/* tarifs */
.tarifs{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;align-items:stretch}
.tarif{background:var(--blanc);border-radius:22px;padding:36px 30px;box-shadow:0 5px 22px rgba(51,71,60,.07);display:flex;flex-direction:column;text-align:center}
.tarif.mis-en-avant{border:2px solid var(--argile);box-shadow:0 18px 44px rgba(200,138,114,.18)}
.tarif h3{font-size:19px;margin-bottom:6px}
.tarif .duree{font-size:13.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--texte-doux);margin-bottom:18px}
.tarif .prix{font-family:'Marcellus',serif;font-size:44px;color:var(--foret);line-height:1;margin-bottom:6px}
.tarif .prix small{font-size:17px;color:var(--texte-doux)}
.tarif ul{list-style:none;text-align:left;margin:20px 0 26px;flex:1}
.tarif ul li{padding:7px 0 7px 26px;position:relative;font-size:15px;color:var(--texte-doux)}
.tarif ul li::before{content:"";position:absolute;left:0;top:15px;width:11px;height:6px;border-left:2px solid var(--sauge);border-bottom:2px solid var(--sauge);transform:rotate(-45deg)}

/* faq */
.faq-liste{max-width:760px;margin:0 auto}
details{background:var(--blanc);border-radius:16px;margin-bottom:12px;box-shadow:0 4px 16px rgba(51,71,60,.06);overflow:hidden}
summary{cursor:pointer;list-style:none;padding:20px 24px;font-weight:700;color:var(--foret);font-size:16.5px;display:flex;justify-content:space-between;gap:16px;align-items:center}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";font-family:'Marcellus',serif;font-size:22px;color:var(--argile);transition:transform .2s;flex-shrink:0}
details[open] summary::after{transform:rotate(45deg)}
details .rep{padding:0 24px 22px;color:var(--texte-doux);font-size:15.5px}

/* bandeau cta */
.bandeau{background:var(--foret);color:var(--creme);text-align:center;padding:84px 0;border-radius:0}
.bandeau h2{color:var(--creme);font-size:clamp(28px,3.6vw,40px);margin-bottom:14px}
.bandeau p{color:#C5D2C6;max-width:54ch;margin:0 auto 32px}

/* contact */
.contact-grille{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start}
.info-bloc{background:var(--blanc);border-radius:20px;padding:32px 30px;box-shadow:0 5px 22px rgba(51,71,60,.07);margin-bottom:18px}
.info-bloc h3{font-size:18px;margin-bottom:10px}
.info-bloc p{font-size:15.5px;color:var(--texte-doux)}
.info-bloc a{color:var(--foret);font-weight:700}
.formulaire{background:var(--blanc);border-radius:22px;padding:38px 34px;box-shadow:0 12px 34px rgba(51,71,60,.10)}
.champ{margin-bottom:18px}
.champ label{display:block;font-size:14px;font-weight:700;color:var(--foret);margin-bottom:7px}
.champ input,.champ textarea,.champ select{width:100%;border:1.5px solid #E2DACE;border-radius:12px;padding:13px 16px;font-family:inherit;font-size:15.5px;color:var(--texte);background:var(--creme);transition:border-color .2s}
.champ input:focus,.champ textarea:focus,.champ select:focus{outline:none;border-color:var(--sauge)}
.horaires{width:100%;border-collapse:collapse;font-size:15px}
.horaires td{padding:7px 0;border-bottom:1px solid var(--creme-2);color:var(--texte-doux)}
.horaires td:last-child{text-align:right;color:var(--texte);font-weight:600}

/* footer */
.pied{background:var(--foret-2);color:#AEBFB0;padding:56px 0 30px;font-size:14.5px}
.pied-grille{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:36px;margin-bottom:38px}
.pied h4{font-family:'Marcellus',serif;color:var(--creme);font-size:18px;margin-bottom:12px;font-weight:400}
.pied a{color:#AEBFB0;text-decoration:none}
.pied a:hover{color:var(--creme)}
.pied ul{list-style:none}
.pied li{margin-bottom:8px}
.pied-bas{border-top:1px solid rgba(250,245,239,.12);padding-top:22px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;font-size:13px}
.pied-bas a{text-decoration:underline}

/* reveal */
.reveal{opacity:0;transform:translateY(20px);transition:opacity .7s ease,transform .7s ease}
.reveal.vu{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  .souffle path,.arche .soleil{animation:none}
  *{transition:none!important}
}

/* page header (pages intérieures) */
.page-tete{padding:66px 0 56px;text-align:center;background:var(--creme-2)}
.page-tete h1{font-size:clamp(32px,4.2vw,46px);margin-bottom:12px}
.page-tete p{color:var(--texte-doux);max-width:60ch;margin:0 auto;font-size:18px}

/* responsive */
@media (max-width:900px){
  .hero-in,.duo,.contact-grille{grid-template-columns:1fr}
  .grille,.grille.deux,.etapes,.temoins,.tarifs{grid-template-columns:1fr}
  .pied-grille{grid-template-columns:1fr}
  section{padding:60px 0}
  .hero{padding:52px 0 64px}
  .menu{position:fixed;inset:76px 0 auto 0;background:var(--creme);flex-direction:column;align-items:flex-start;padding:24px;gap:18px;border-bottom:1px solid rgba(51,71,60,.1);transform:translateY(-130%);transition:transform .3s ease;box-shadow:0 20px 40px rgba(51,71,60,.12)}
  .menu.ouvert{transform:none}
  .burger{display:block}
  .duo .arche{order:-1}
}