/* Caroline Raynal — Naturopathe à Guérande
   Maquette Start-Win · feuille de styles */

/* ---------- POLICES (hébergées sur le site, pas d'appel à Google) ---------- */
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:400 600;font-display:swap;src:url(fonts/cormorant-garamond.woff2) format('woff2')}
@font-face{font-family:'Cormorant Garamond';font-style:italic;font-weight:400 600;font-display:swap;src:url(fonts/cormorant-garamond-italic.woff2) format('woff2')}
@font-face{font-family:'Source Sans 3';font-style:normal;font-weight:300 700;font-display:swap;src:url(fonts/source-sans-3.woff2) format('woff2')}
@font-face{font-family:'Source Sans 3';font-style:italic;font-weight:300 700;font-display:swap;src:url(fonts/source-sans-3-italic.woff2) format('woff2')}

:root{
  --ocre:#bb8656;          /* décor : filets, puces, contours */
  --ocre-titre:#ad7848;    /* mots en italique des titres (≥ 3:1) */
  --ocre-texte:#8f5d2d;    /* petits textes ocre (≥ 4,5:1) */
  --ocre-bouton:#9a6536;   /* fond des boutons, texte blanc 4,9:1 */
  --ocre-bouton-hover:#83552c;
  --ocre-clair:#e6b98f;    /* ocre lisible sur fond sombre */
  --ocre-pale:#f5ebdf;
  --bleu:#4d6484;
  --bleu-fonce:#3c506c;
  --bleu-pale:#eef1f6;
  --encre:#2c3138;
  --gris:#5a616b;
  --gris-clair:#f6f5f2;
  --blanc:#ffffff;
  --sans:'Source Sans 3','Source Sans Pro',system-ui,sans-serif;
  --serif:'Cormorant Garamond',Georgia,serif;
  --nav-h:72px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:var(--nav-h)}
body{font-family:var(--sans);color:var(--gris);background:var(--blanc);line-height:1.75;font-weight:400;font-size:1.0625rem;overflow-x:hidden}
h1,h2,h3{color:var(--encre);line-height:1.15}
h2{font-family:var(--serif);font-weight:500;font-size:clamp(2.1rem,4.5vw,3.4rem);text-wrap:balance}
h2 em{font-style:italic;color:var(--ocre-titre)}
h3{font-weight:600;font-size:1.15rem}
img{max-width:100%;display:block}
a{color:var(--bleu)}
sup{font-size:.6em;line-height:0}
.wrap{max-width:1180px;margin:auto;padding:0 1.5rem}
section{padding:6rem 0}
.bg-gris{background:var(--gris-clair)}
.kicker{display:flex;align-items:center;gap:.8rem;font-size:.75rem;letter-spacing:.3em;text-transform:uppercase;color:var(--ocre-texte);font-weight:700;margin-bottom:1.2rem}
.kicker::before{content:"";width:38px;height:1.5px;background:var(--ocre);flex:none}
.kicker.centre{justify-content:center}
.kicker.bleu{color:var(--bleu)}
.kicker.bleu::before{background:var(--bleu)}

/* ---------- BOUTONS ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.6rem;padding:.95rem 2.1rem;font-size:.8rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;text-decoration:none;border-radius:50px;transition:background-color .25s,color .25s,transform .25s;cursor:pointer;border:none;font-family:var(--sans);text-align:center;line-height:1.3}
.btn-ocre{background:var(--ocre-bouton);color:#fff}
.btn-ocre:hover{background:var(--ocre-bouton-hover);transform:translateY(-2px)}
.btn-ghost{border:1.5px solid var(--bleu);color:var(--bleu);background:transparent}
.btn-ghost:hover{background:var(--bleu);color:#fff}
.btn-ghost.clair{border-color:#fff;color:#fff}
.btn-ghost.clair:hover{background:#fff;color:var(--encre)}
.btn:focus-visible,a:focus-visible,summary:focus-visible,button:focus-visible{outline:3px solid var(--ocre-clair);outline-offset:3px}

/* ---------- APPARITION AU DÉFILEMENT ---------- */
.js .reveal{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s ease}
.js .reveal.vu{opacity:1;transform:none}

/* ---------- NAVIGATION ---------- */
.top{position:fixed;inset:0 0 auto;z-index:240;background:#fff;box-shadow:0 1px 14px rgba(0,0,0,.06)}
.nav-inner{max-width:1180px;margin:auto;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.8rem 1.5rem;min-height:var(--nav-h)}
.brand{font-family:var(--serif);font-size:1.55rem;color:var(--encre);text-decoration:none;letter-spacing:.02em;white-space:nowrap}
.brand b{font-weight:600}
.brand i{color:var(--ocre)}
.nav-links{display:flex;gap:1.9rem;list-style:none;align-items:center}
.nav-links a:not(.btn){font-size:.76rem;letter-spacing:.18em;text-transform:uppercase;color:var(--encre);text-decoration:none;font-weight:600}
.nav-links a:not(.btn):hover{color:var(--ocre-texte)}
.burger{display:none;width:44px;height:44px;border:none;background:transparent;cursor:pointer;position:relative;flex:none}
.burger span,.burger::before,.burger::after{content:"";position:absolute;left:11px;right:11px;height:2px;background:var(--encre);transition:transform .25s,opacity .25s}
.burger::before{top:15px}.burger span{top:21px}.burger::after{top:27px}
.menu-open .burger::before{transform:translateY(6px) rotate(45deg)}
.menu-open .burger span{opacity:0}
.menu-open .burger::after{transform:translateY(-6px) rotate(-45deg)}
.nav-right{display:flex;align-items:center;gap:.4rem}
.nav-cta-mobile{display:none}

.drawer{position:fixed;left:0;right:0;top:var(--drawer-top,var(--nav-h));z-index:200;background:#fff;box-shadow:0 18px 30px rgba(0,0,0,.12);padding:.5rem 1.5rem 1.6rem;transform:translateY(-12px);opacity:0;visibility:hidden;transition:opacity .25s,transform .25s,visibility .25s}
.drawer ul{list-style:none}
.drawer li a{display:block;padding:.9rem 0;border-bottom:1px solid #eeebe6;color:var(--encre);text-decoration:none;font-weight:600;letter-spacing:.12em;text-transform:uppercase;font-size:.85rem}
.drawer .btn{width:100%;margin-top:1.2rem}
.backdrop{position:fixed;inset:0;z-index:210;background:rgba(35,40,50,.35);opacity:0;visibility:hidden;transition:opacity .25s,visibility .25s}
.menu-open .drawer{opacity:1;visibility:visible;transform:none}
.menu-open .backdrop{opacity:1;visibility:visible;top:var(--drawer-top,var(--nav-h))}
.menu-open .drawer{z-index:230}

@media(max-width:1040px){
  .nav-links{display:none}
  .burger{display:block}
  .nav-cta-mobile{display:inline-flex;padding:.7rem 1.2rem;font-size:.72rem}
}
@media(max-width:420px){
  .brand{font-size:1.35rem}
  .nav-cta-mobile{display:none}
}

/* ---------- HERO ---------- */
.hero{position:relative;min-height:100vh;min-height:100svh;display:flex;align-items:center;background:#46505a url("images/hero-dunes-ocean.jpg") center/cover;clip-path:polygon(0 0,100% 0,100% 94%,0 100%)}
.hero::before{content:"";position:absolute;inset:0;background:linear-gradient(105deg,rgba(35,40,50,.66) 20%,rgba(35,40,50,.16) 65%)}
.hero-inner{position:relative;max-width:1180px;margin:auto;padding:8rem 1.5rem 7rem;color:#fff;width:100%;display:grid;grid-template-columns:1.35fr .9fr;gap:3rem;align-items:center}
.hero .surtitre{font-size:.8rem;letter-spacing:.34em;text-transform:uppercase;color:#f1dfcb;font-weight:600;margin-bottom:1.4rem;text-shadow:0 1px 8px rgba(0,0,0,.35)}
.hero h1{color:#fff;font-family:var(--serif);font-weight:500;font-size:clamp(2.9rem,7vw,5.2rem);letter-spacing:.01em;text-shadow:0 2px 18px rgba(0,0,0,.25)}
.hero h1 em{font-style:italic;color:#f0cfac;display:block;font-size:.62em}
.hero .sub{font-size:1.2rem;font-weight:300;margin:1.4rem 0 2.2rem;max-width:34rem;text-shadow:0 1px 10px rgba(0,0,0,.35)}
.hero .cta-row{display:flex;gap:1rem;flex-wrap:wrap}
.hero-book{background:#fff;border-radius:14px;padding:2rem;color:var(--gris);box-shadow:0 30px 70px rgba(0,0,0,.35);max-width:360px;width:100%;justify-self:end}
.hero-book h2{font-family:var(--serif);font-size:1.6rem;font-weight:600;margin-bottom:.3rem}
.hero-book .dispo{display:flex;align-items:center;gap:.5rem;font-size:.85rem;color:#2f6b41;font-weight:600;margin-bottom:1.1rem;line-height:1.35}
.hero-book .dispo::before{content:"";width:9px;height:9px;border-radius:50%;background:#4caf6d;box-shadow:0 0 0 4px rgba(76,175,109,.2);flex:none}
.hero-book ul{list-style:none;font-size:.95rem;margin-bottom:1.4rem}
.hero-book li{display:flex;justify-content:space-between;gap:1rem;padding:.5rem 0;border-bottom:1px dashed #e5e0d8}
.hero-book li b{color:var(--encre);font-weight:600;white-space:nowrap}
.hero-book .btn{width:100%}
.hero-book small{display:block;text-align:center;margin-top:.7rem;font-size:.85rem}
@media(max-width:940px){
  .hero-inner{grid-template-columns:1fr;padding:7.5rem 1.5rem 6rem}
  .hero-book{justify-self:start}
}
@media(max-width:480px){
  .hero .surtitre{letter-spacing:.2em;font-size:.72rem}
  .hero .cta-row .btn{width:100%}
  .hero-book{padding:1.5rem}
}

/* ---------- BANDEAU ---------- */
.marquee{background:var(--encre);color:#fff;overflow:hidden;padding:1.05rem 0;clip-path:polygon(0 0,100% 12%,100% 100%,0 88%);margin-top:-3.5rem;position:relative;z-index:5}
.marquee-track{display:flex;gap:3.5rem;width:max-content;white-space:nowrap;animation:defile 40s linear infinite;font-family:var(--serif);font-size:1.2rem;font-style:italic;letter-spacing:.06em}
.marquee-track span::after{content:"✳";margin-left:3.5rem;color:var(--ocre-clair);font-style:normal}
.marquee:hover .marquee-track{animation-play-state:paused}
@keyframes defile{to{transform:translateX(-50%)}}

/* ---------- DÉFINITION ---------- */
.definition{text-align:center;padding:6.5rem 0 5rem}
.definition h2{margin-bottom:1.6rem}
.definition p:not(.kicker){max-width:780px;margin:auto;font-size:1.25rem;font-weight:300}
.definition p strong{color:var(--encre);font-weight:600}
.definition .signature{font-family:var(--serif);font-style:italic;font-size:1.45rem;color:var(--ocre-texte);margin-top:1.6rem;font-weight:500}

/* ---------- BLOCS PHOTO + TEXTE ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:4.5rem;align-items:center}
.split .img{position:relative;border-radius:6px;isolation:isolate}
.split .img img{border-radius:6px;width:100%;height:auto;object-fit:cover;aspect-ratio:4/3.1;box-shadow:0 24px 55px rgba(0,0,0,.16)}
.split .img::after{content:"";position:absolute;inset:auto auto -18px -18px;width:58%;height:58%;border:2px solid var(--ocre);border-radius:6px;z-index:-1}
.split .img.b::after{inset:-18px -18px auto auto;border-color:var(--bleu)}
.split h2{margin-bottom:1.3rem}
.split p+p{margin-top:1rem}
.split .note{margin-top:1.5rem;font-size:.95rem;background:var(--ocre-pale);border-left:3px solid var(--ocre);padding:.9rem 1.2rem;border-radius:0 6px 6px 0;color:var(--encre)}
.split .petit{font-size:.92rem;margin-top:1.2rem}
.split .actions{margin-top:1.4rem}
.num{font-family:var(--serif);font-size:5.5rem;line-height:1;color:transparent;-webkit-text-stroke:1.5px var(--ocre);opacity:.7;display:block;margin-bottom:.5rem}
.num.bleu{-webkit-text-stroke-color:var(--bleu)}
@media(max-width:880px){
  .split{grid-template-columns:1fr;gap:2.6rem}
  .split .img{margin:0 18px 0 18px}
  .split .texte-first{order:-1}
  .num{font-size:4.2rem}
}

/* ---------- POUR QUI ---------- */
.pourqui .cols{display:grid;grid-template-columns:1fr 1fr;gap:3rem;margin-top:2.6rem}
.pourqui ul{list-style:none;margin-top:.4rem}
.pourqui li{padding:.6rem 0 .6rem 1.9rem;position:relative;border-bottom:1px solid #e6e2db}
.pourqui li::before{content:"";position:absolute;left:0;top:1.2rem;width:9px;height:9px;border-radius:50%;background:var(--ocre)}
.pourqui .col-bleu li::before{background:var(--bleu)}
@media(max-width:880px){.pourqui .cols{grid-template-columns:1fr;gap:2.4rem}}

/* ---------- PARCOURS ---------- */
.parcours{background:var(--encre);color:#c9cdd4;clip-path:polygon(0 3%,100% 0,100% 97%,0 100%);padding:7rem 0}
.parcours h2,.parcours h3{color:#fff}
.parcours .kicker{color:var(--ocre-clair)}
.parcours .etapes{display:grid;grid-template-columns:repeat(3,1fr);gap:2.5rem;margin-top:3rem;list-style:none}
.etape{position:relative;padding-top:1rem}
.etape .n{font-family:var(--serif);font-style:italic;font-size:4.2rem;color:var(--ocre-clair);line-height:1;display:block}
.etape h3{margin:.8rem 0 .5rem;font-size:1.2rem}
.etape p{margin:0;font-size:1rem;font-weight:300}
.parcours .cta-center{text-align:center;margin-top:3.5rem}
@media(max-width:880px){.parcours .etapes{grid-template-columns:1fr;gap:1.6rem}.parcours{clip-path:polygon(0 1.5%,100% 0,100% 98.5%,0 100%)}}

/* ---------- TARIFS ---------- */
.tarifs .intro{margin-top:.8rem;max-width:75ch}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem;margin-top:2.8rem}
.card{background:#fff;border-radius:10px;overflow:hidden;box-shadow:0 10px 30px rgba(0,0,0,.08);display:flex;flex-direction:column;transition:transform .3s,box-shadow .3s;position:relative}
.card:hover{transform:translateY(-8px);box-shadow:0 22px 46px rgba(0,0,0,.14)}
.card .etiquette{position:absolute;top:1rem;right:0;background:var(--ocre-bouton);color:#fff;font-size:.68rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;padding:.35rem .9rem;border-radius:20px 0 0 20px;z-index:2}
.card img{height:180px;object-fit:cover;width:100%}
.card .body{padding:1.7rem;display:flex;flex-direction:column;flex:1}
.card h3{font-family:var(--serif);font-size:1.55rem;font-weight:600;margin-bottom:.4rem}
.card .meta{margin-top:0;display:flex;align-items:baseline;gap:.6rem;margin-bottom:.8rem}
.card .prix{font-family:var(--serif);font-size:2.1rem;color:var(--ocre-titre);font-weight:600;line-height:1.2}
.card .duree{font-size:.85rem;letter-spacing:.08em;text-transform:uppercase}
.card .body>p:not(.meta){font-size:.98rem;flex:1}
.card .btn{margin-top:1.4rem}
@media(max-width:880px){.cards{grid-template-columns:1fr;max-width:460px;margin-inline:auto}}
.compare{margin-top:3rem}
.compare .scroll{overflow-x:auto;border-radius:8px;box-shadow:0 4px 18px rgba(0,0,0,.06)}
.compare table{width:100%;border-collapse:collapse;background:#fff;font-size:.95rem}
.compare th{background:var(--bleu);color:#fff;text-align:left;padding:.85rem 1.2rem;font-weight:600;letter-spacing:.05em}
.compare td{padding:.85rem 1.2rem;border-bottom:1px solid #f0efec;color:var(--encre)}
.compare tr:last-child td{border-bottom:none}
@media(max-width:600px){.compare table{font-size:.85rem}.compare th,.compare td{padding:.7rem .6rem}.compare th{letter-spacing:0}}
.compare .legende{display:block;margin-top:.7rem;color:var(--gris);font-size:.9rem}

/* ---------- ATELIERS ---------- */
.ateliers .duo{display:grid;grid-template-columns:1fr 1fr;gap:2rem;margin-top:2.8rem}
.atelier{background:var(--bleu-pale);border-radius:10px;padding:2.4rem;border-top:4px solid var(--bleu)}
.atelier.ocre{background:var(--ocre-pale);border-top-color:var(--ocre)}
.atelier h3{font-family:var(--serif);font-size:1.6rem;font-weight:600;margin-bottom:1rem}
.atelier ul{list-style:none;margin-top:.8rem}
.atelier li{padding:.32rem 0 .32rem 1.5rem;position:relative;font-size:.98rem}
.atelier li::before{content:"✳";position:absolute;left:0;color:var(--bleu);font-size:.8rem;top:.5rem}
.atelier.ocre li::before{color:var(--ocre-texte)}
.atelier .format{margin-top:1.2rem;font-size:.92rem;color:var(--encre)}
@media(max-width:880px){.ateliers .duo{grid-template-columns:1fr}.atelier{padding:1.8rem}}

/* ---------- TÉMOIGNAGES ---------- */
.temoignages{text-align:center}
.temoin-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem;margin-top:2.8rem;text-align:left}
.temoin{background:#fff;padding:2rem;border-radius:10px;box-shadow:0 6px 20px rgba(0,0,0,.06);font-size:.98rem;position:relative}
.temoin::before{content:"“";font-family:var(--serif);font-size:4rem;color:var(--ocre);position:absolute;top:-.4rem;left:1.2rem;opacity:.55;line-height:1.4}
.temoin p{font-style:italic;padding-top:1rem}
.temoin footer{margin-top:1.2rem;font-weight:600;color:var(--encre);font-size:.88rem}
.temoin footer span{display:block;font-weight:400;color:var(--gris)}
.temoignages .avis-google{margin-top:2rem;font-size:.95rem}
@media(max-width:880px){.temoin-grid{grid-template-columns:1fr;max-width:520px;margin-inline:auto}}

/* ---------- FAQ ---------- */
.faq .wrap{max-width:880px}
.faq details{background:#fff;border:1px solid #e6e2db;border-radius:8px;margin-top:.9rem;overflow:hidden}
.faq summary{cursor:pointer;padding:1.15rem 3.5rem 1.15rem 1.5rem;font-weight:600;color:var(--encre);list-style:none;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:1.4rem;top:50%;transform:translateY(-50%);color:var(--ocre-texte);font-size:1.4rem;font-weight:400}
.faq details[open] summary::after{content:"–"}
.faq details p{padding:0 1.5rem 1.25rem;font-size:1rem}

/* ---------- RENDEZ-VOUS / SANORDV ---------- */
.rdv{background:linear-gradient(rgba(41,50,64,.9),rgba(41,50,64,.9)),#293240 url("images/fond-rendez-vous.jpg") center/cover;color:#d3d7dd}
.rdv h2,.rdv h3{color:#fff}
.rdv h2 em{color:var(--ocre-clair)}
.rdv .kicker{color:var(--ocre-clair)}
.rdv .grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:3.5rem;align-items:start}
.rdv .intro{margin-top:1rem}
.rdv .avantages{list-style:none;margin-top:1.6rem}
.rdv .avantages li{padding:.4rem 0 .4rem 1.9rem;position:relative;font-size:1rem}
.rdv .avantages li::before{content:"✓";position:absolute;left:0;color:var(--ocre-clair);font-weight:700}
.rdv .coord{margin-top:2rem;border-top:1px solid rgba(255,255,255,.18);padding-top:1.6rem;font-size:1rem;font-style:normal}
.rdv .coord p{margin:.3rem 0}
.rdv .coord strong{color:#fff}
.rdv .coord a{color:#fff}
.rdv .tel{font-size:1.5rem;font-weight:700;color:#fff;text-decoration:none;display:inline-block;margin-top:.3rem}
/* Le widget SanoRDV dessine sa propre carte : ici seulement le rayon, l'ombre et la hauteur réservée */
.rdv-widget{border-radius:14px;overflow:hidden;box-shadow:0 30px 70px rgba(0,0,0,.4);background:#fff;min-height:620px}
.rdv-widget .attente{padding:2rem;color:var(--gris);text-align:center}
@media(max-width:940px){.rdv .grid{grid-template-columns:1fr}.rdv-widget{min-height:720px}}

/* ---------- PIED DE PAGE ---------- */
.site-footer{background:#23272e;color:#a3aab4;padding:2.6rem 0 2.2rem;font-size:.9rem}
.site-footer .ligne{display:flex;justify-content:space-between;flex-wrap:wrap;gap:1rem 2rem;align-items:center}
.site-footer nav a{color:#e3e7ec;text-decoration:none;margin-left:1.4rem}
.site-footer nav a:first-child{margin-left:0}
.site-footer nav a:hover{color:var(--ocre-clair)}
.site-footer .avertissement{margin-top:1.2rem;font-size:.82rem;line-height:1.6;max-width:80ch}
@media(max-width:600px){.site-footer nav{display:flex;flex-wrap:wrap;gap:.6rem 1.2rem}.site-footer nav a{margin-left:0}}

/* ---------- BOUTON RDV FLOTTANT (mobile) ---------- */
.fab-rdv{display:none}
@media(max-width:880px){
  .fab-rdv{display:inline-flex;position:fixed;right:1rem;bottom:calc(1rem + env(safe-area-inset-bottom,0px));z-index:190;box-shadow:0 10px 26px rgba(0,0,0,.28);transition:opacity .3s,transform .3s}
  .fab-rdv.cache{opacity:0;transform:translateY(20px);pointer-events:none}
}

/* ---------- MOUVEMENT RÉDUIT ---------- */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .js .reveal{opacity:1;transform:none;transition:none}
  .marquee-track{animation:none;flex-wrap:wrap;width:auto;justify-content:center;white-space:normal;padding:0 1rem;gap:.4rem 2rem}
  .marquee-track span[aria-hidden]{display:none}
  .marquee-track span::after{margin-left:2rem}
  .card,.btn{transition:none}
  .card:hover,.btn-ocre:hover{transform:none}
}