/* =========================================================
   Cabinet d'osteopathie Johan Amoussou - osteopathie-royan.fr
   Direction artistique : médical apaisé
   ========================================================= */

:root{
  --deep:#123A52;          /* bleu profond */
  --deep-dark:#0C2A3C;
  --sage:#5E8B72;          /* vert sauge */
  --sage-dark:#3F6B54;
  --sage-soft:#E7EFE9;
  --sand:#FAF8F4;          /* fond crème */
  --sand-deep:#F2EEE7;
  --ink:#1B2429;
  --ink-soft:#4B5A63;
  --line:#E2DDD4;
  --white:#fff;

  --radius:14px;
  --radius-lg:22px;
  --shadow-sm:0 1px 2px rgba(18,58,82,.06), 0 4px 14px rgba(18,58,82,.06);
  --shadow-md:0 10px 40px rgba(18,58,82,.10);

  --serif:'Fraunces', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
  --sans:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  --wrap:1180px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:var(--sans);
  font-size:17px;
  line-height:1.65;
  color:var(--ink);
  background:var(--white);
}
img{max-width:100%; height:auto; display:block}
a{color:var(--deep); text-decoration:none}
a:hover{text-decoration:underline}

h1,h2,h3{font-family:var(--serif); font-weight:500; line-height:1.15; letter-spacing:-.01em; color:var(--deep); margin:0 0 .5em}
h1{font-size:clamp(2.1rem, 4.6vw, 3.35rem)}
h2{font-size:clamp(1.65rem, 3.1vw, 2.4rem)}
h3{font-size:1.18rem; font-family:var(--sans); font-weight:600; letter-spacing:0}
p{margin:0 0 1.1em}

.wrap{width:min(var(--wrap), calc(100% - 2.5rem)); margin-inline:auto}
.wrap-narrow{width:min(820px, calc(100% - 2.5rem))}

.skip{position:absolute; left:-9999px; top:0; background:var(--deep); color:#fff; padding:.75rem 1rem; z-index:200}
.skip:focus{left:0}

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

.eyebrow{
  font-size:.78rem; font-weight:600; letter-spacing:.13em; text-transform:uppercase;
  color:var(--sage-dark); margin:0 0 .7rem;
}
.muted{color:var(--ink-soft); font-size:.94rem}

/* ---------- Boutons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  font-family:var(--sans); font-size:.97rem; font-weight:600; line-height:1;
  padding:.85rem 1.4rem; border-radius:999px; border:1.5px solid transparent;
  cursor:pointer; transition:.18s ease; text-decoration:none; white-space:nowrap;
}
.btn:hover{text-decoration:none; transform:translateY(-1px)}
.btn-lg{padding:1.05rem 1.9rem; font-size:1.03rem}
.btn-block{width:100%}
.btn-primary{background:var(--sage-dark); color:#fff; box-shadow:0 6px 18px rgba(63,107,84,.28)}
.btn-primary:hover{background:#355B48; color:#fff}
.btn-outline{border-color:var(--deep); color:var(--deep); background:transparent}
.btn-outline:hover{background:var(--deep); color:#fff}
.btn-ghost{color:var(--deep); background:var(--sage-soft); padding:.7rem 1.05rem; font-size:.95rem}
.btn-ghost:hover{background:#DCE8DF}
.btn-light{background:#fff; color:var(--deep)}
.btn-light:hover{background:var(--sand)}
.btn-outline-light{border-color:rgba(255,255,255,.6); color:#fff}
.btn-outline-light:hover{background:rgba(255,255,255,.12); color:#fff}

/* ---------- Header ---------- */
.site-header{
  position:sticky; top:0; z-index:100;
  background:rgba(255,255,255,.94); backdrop-filter:saturate(180%) blur(10px);
  border-bottom:1px solid var(--line);
}
.header-inner{display:flex; align-items:center; gap:1.5rem; min-height:76px}
.brand{display:flex; align-items:center; gap:.7rem; color:var(--deep); margin-right:auto}
.brand:hover{text-decoration:none}
.brand-mark{
  width:42px; height:42px; display:grid; place-items:center; flex:none;
  background:var(--sage-soft); color:var(--sage-dark); border-radius:12px;
}
.brand-text strong{display:block; font-family:var(--serif); font-size:1.12rem; font-weight:600; line-height:1.2}
.brand-text small{display:block; font-size:.76rem; color:var(--ink-soft); letter-spacing:.02em; white-space:nowrap}

.nav{display:flex; gap:1.4rem}
.nav a{font-size:.94rem; font-weight:500; color:var(--ink-soft); text-decoration:none; white-space:nowrap}
.nav a:hover{color:var(--sage-dark)}
.header-cta{display:flex; align-items:center; gap:.6rem}

/* ---------- Hero ---------- */
.hero{
  background:
    radial-gradient(80% 120% at 92% 0%, #EAF1EC 0%, rgba(234,241,236,0) 60%),
    var(--sand);
  padding:clamp(3rem, 7vw, 5.5rem) 0 clamp(3rem, 6vw, 4.5rem);
  border-bottom:1px solid var(--line);
}
.hero-grid{display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(2rem,5vw,4rem); align-items:center}
.hero h1 span{color:var(--sage-dark)}
.lead{font-size:1.09rem; color:var(--ink-soft); max-width:34em}

.hero-proof{list-style:none; display:flex; flex-wrap:wrap; gap:.6rem 2rem; padding:0; margin:0 0 1.8rem}
.hero-proof li{font-size:.95rem; color:var(--ink-soft)}
.hero-proof strong{display:block; font-family:var(--serif); font-size:1.5rem; color:var(--deep); font-weight:600}

.hero-actions{display:flex; flex-wrap:wrap; gap:.8rem}
.hero-note{margin-top:1rem; font-size:.88rem; color:var(--ink-soft)}

.hero-media{margin:0; position:relative}
.hero-media img{border-radius:var(--radius-lg); box-shadow:var(--shadow-md); width:100%; object-fit:cover; aspect-ratio:4/3}
.hero-media figcaption{
  position:absolute; left:1rem; right:1rem; bottom:1rem;
  background:rgba(255,255,255,.92); color:var(--ink-soft);
  font-size:.8rem; padding:.55rem .85rem; border-radius:10px;
}

/* ---------- Bandeau réassurance ---------- */
.trust{background:var(--deep); color:#fff; padding:2.2rem 0}
.trust-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:2rem}
.trust-item{display:flex; gap:.85rem; align-items:flex-start}
.trust-item svg{width:26px; height:26px; flex:none; color:#8FBFA1; margin-top:.15rem}
.trust-item p{margin:0; font-size:.9rem; line-height:1.5; color:rgba(255,255,255,.78)}
.trust-item strong{color:#fff; font-size:.98rem}

/* ---------- Sections ---------- */
.section{padding:clamp(3.5rem, 7vw, 6rem) 0}
.section-alt{background:var(--sand)}
.section-head{max-width:46rem; margin-bottom:3rem}
.section-intro{color:var(--ink-soft); font-size:1.05rem}

/* ---------- Motifs ---------- */
.motifs-visual{
  list-style:none; padding:0; margin:0 auto 2.8rem;
  display:grid; grid-template-columns:repeat(4, 200px); gap:1.5rem;
  justify-content:center;
}
.motifs-visual li{text-align:center}
.motifs-visual img{
  width:200px; height:149px; object-fit:cover; border-radius:var(--radius);
  box-shadow:var(--shadow-sm); filter:grayscale(1) contrast(1.02); transition:filter .3s ease;
}
.motifs-visual li:hover img{filter:grayscale(0)}
.motifs-visual span{
  display:block; margin-top:.7rem; font-size:.88rem; font-weight:600;
  color:var(--deep); line-height:1.35;
}

.strip-photo{margin:2.5rem 0 0}
.strip-photo img{
  width:100%; max-width:1329px; height:auto; margin-inline:auto;
  border-radius:var(--radius); mix-blend-mode:multiply;
}

.motifs-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1.2rem}
.motif-card{
  background:#fff; border:1px solid var(--line); border-left:3px solid var(--sage);
  border-radius:var(--radius); padding:1.6rem 1.5rem; transition:.2s ease;
}
.motif-card:hover{box-shadow:var(--shadow-sm); transform:translateY(-2px)}
.motif-card h3{color:var(--deep); margin-bottom:.55rem}
.motif-card p{margin:0; font-size:.95rem; color:var(--ink-soft)}
.disclaimer{
  margin-top:2rem; padding:1.1rem 1.3rem; background:var(--sand-deep);
  border-radius:var(--radius); font-size:.9rem; color:var(--ink-soft);
}

/* ---------- Publics ---------- */
.patients-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:1.2rem}
.patient-card{background:#fff; border-radius:var(--radius); padding:1.9rem 1.6rem; box-shadow:var(--shadow-sm)}
.patient-icon{
  width:52px; height:52px; border-radius:14px; background:var(--sage-soft); color:var(--sage-dark);
  display:grid; place-items:center; margin-bottom:1.1rem;
}
.patient-icon svg{width:28px; height:28px}
.patient-card h3{color:var(--deep); margin-bottom:.6rem}
.patient-card p{margin:0; font-size:.93rem; color:var(--ink-soft)}

.wide-photo{margin:3rem 0 0}
.wide-photo img{border-radius:var(--radius-lg); width:100%; aspect-ratio:21/8; object-fit:cover; object-position:center 30%}

/* ---------- Étapes ---------- */
.steps{list-style:none; padding:0; margin:0; display:grid; grid-template-columns:repeat(3,1fr); gap:1.6rem}
.step{position:relative; padding-top:1.6rem; border-top:2px solid var(--sage-soft)}
.step-num{
  display:grid; place-items:center; width:38px; height:38px; border-radius:50%;
  background:var(--deep); color:#fff; font-weight:600; font-size:1rem; margin-bottom:1rem;
}
.step h3{color:var(--deep)}
.step p{margin:0; color:var(--ink-soft); font-size:.95rem}

.quote-band{margin-top:3.5rem; background:var(--sage-soft); border-radius:var(--radius-lg); padding:clamp(2rem,4vw,3rem)}
.quote-band blockquote{margin:0; max-width:48rem}
.quote-band p{font-family:var(--serif); font-size:clamp(1.15rem,2vw,1.45rem); line-height:1.5; color:var(--deep); margin-bottom:.9rem}
.quote-band cite{font-style:normal; font-size:.9rem; font-weight:600; color:var(--sage-dark)}

/* ---------- Deux colonnes ---------- */
.two-col{display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(2rem,5vw,4rem); align-items:start}
.col-text p{color:var(--ink-soft)}
.mini-title{margin-top:2rem; color:var(--deep)}
.principles{margin:0 0 2rem; padding-left:1.1rem; color:var(--ink-soft)}
.principles li{margin-bottom:.5rem; font-size:.96rem}
.principles::marker{color:var(--sage)}

.card-reviews{background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg); padding:2rem; box-shadow:var(--shadow-sm)}
.stars{color:#E8A33D; font-size:1.35rem; letter-spacing:.12em}
.reviews-count{margin:.4rem 0 1.2rem; font-size:.95rem; color:var(--ink-soft)}
.reviews-count strong{font-family:var(--serif); font-size:1.5rem; color:var(--deep); font-weight:600}
.card-reviews blockquote{margin:0 0 1.2rem; padding-left:1rem; border-left:3px solid var(--sage-soft)}
.card-reviews blockquote p{font-size:.98rem; color:var(--ink); margin-bottom:.5rem}
.card-reviews cite{font-style:normal; font-size:.85rem; color:var(--ink-soft)}
.link-arrow{font-weight:600; font-size:.93rem; color:var(--sage-dark)}
.link-arrow::after{content:" →"}

/* ---------- Avis ---------- */
.section-reviews{background:var(--sand)}
.reviews-head{max-width:46rem; margin-inline:auto; text-align:center}
.reviews-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem}
.review{
  margin:0; background:#fff; border-radius:var(--radius-lg); padding:1.9rem 1.7rem;
  box-shadow:var(--shadow-sm); display:flex; flex-direction:column;
}
.review blockquote{margin:.9rem 0 1.3rem; flex:1}
.review blockquote p{margin:0; font-size:.97rem; color:var(--ink); line-height:1.6}
.review blockquote p::before{content:"« "}
.review blockquote p::after{content:" »"}
.review figcaption{font-weight:600; font-size:.92rem; color:var(--deep)}
.review figcaption span{display:block; font-weight:400; font-size:.8rem; color:var(--ink-soft); margin-top:.15rem}
.reviews-link{text-align:center; margin:2.2rem 0 0}

/* ---------- Cabinet ---------- */
.cabinet-grid{display:grid; grid-template-columns:1fr 1.1fr; gap:clamp(2rem,4vw,3.5rem); align-items:start}
.info-block{padding-bottom:1.6rem; margin-bottom:1.6rem; border-bottom:1px solid var(--line)}
.info-block:last-child{border-bottom:0; margin-bottom:0; padding-bottom:0}
.info-block h3{color:var(--deep); margin-bottom:.5rem}
.info-block p{margin-bottom:.5rem}
.hours{width:100%; border-collapse:collapse; font-size:.95rem; margin-bottom:.6rem}
.hours th{text-align:left; font-weight:500; color:var(--ink-soft); padding:.35rem 0}
.hours td{text-align:right; font-weight:600; color:var(--deep); padding:.35rem 0}
.big-tel{font-family:var(--serif); font-size:1.6rem; font-weight:600; color:var(--deep)}
.map{border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-sm); min-height:420px}
.map iframe{width:100%; height:100%; min-height:420px; border:0; display:block}
.zones{margin-top:2.5rem; font-size:.92rem; color:var(--ink-soft); text-align:center}

/* ---------- Contact ---------- */
.section-contact{background:var(--sand)}
.contact-grid{display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(2rem,5vw,4rem); align-items:start}
.contact-intro hr{border:0; border-top:1px solid var(--line); margin:1.8rem 0}
.contact-form{background:#fff; border-radius:var(--radius-lg); padding:clamp(1.6rem,3vw,2.4rem); box-shadow:var(--shadow-sm)}
.field{margin-bottom:1.1rem}
.field-row{display:grid; grid-template-columns:1fr 1fr; gap:1rem}
label{display:block; font-size:.88rem; font-weight:600; color:var(--deep); margin-bottom:.4rem}
.opt{font-weight:400; color:var(--ink-soft)}
input[type=text],input[type=tel],input[type=email],select,textarea{
  width:100%; font-family:var(--sans); font-size:1rem; color:var(--ink);
  padding:.8rem .95rem; border:1.5px solid var(--line); border-radius:10px; background:#fff;
  transition:border-color .15s ease;
}
input:focus,select:focus,textarea:focus{border-color:var(--sage); outline:none}
textarea{resize:vertical}
.consent{display:flex; gap:.6rem; align-items:flex-start; font-weight:400; font-size:.88rem; color:var(--ink-soft); margin:.4rem 0 1.3rem}
.consent input{margin-top:.25rem; accent-color:var(--sage-dark)}
.form-note{margin:.9rem 0 0; font-size:.8rem; color:var(--ink-soft); text-align:center}

/* ---------- FAQ ---------- */
.faq details{border-bottom:1px solid var(--line); padding:1.1rem 0}
.faq summary{
  cursor:pointer; list-style:none; font-weight:600; color:var(--deep); font-size:1.03rem;
  display:flex; justify-content:space-between; align-items:center; gap:1rem;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; font-size:1.4rem; color:var(--sage); font-weight:400; line-height:1}
.faq details[open] summary::after{content:"–"}
.faq details p{margin:.8rem 0 0; color:var(--ink-soft); font-size:.97rem; max-width:62ch}

/* ---------- CTA final ---------- */
.final-cta{background:var(--deep); color:#fff; text-align:center; padding:clamp(3.5rem,6vw,5rem) 0}
.final-cta h2{color:#fff}
.final-cta p{color:rgba(255,255,255,.8); max-width:40rem; margin-inline:auto}
.final-actions{display:flex; flex-wrap:wrap; gap:.9rem; justify-content:center; margin-top:1.8rem}

/* ---------- Footer ---------- */
.site-footer{background:var(--deep-dark); color:rgba(255,255,255,.72); padding:3.5rem 0 2rem; font-size:.92rem}
.footer-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:2.5rem; padding-bottom:2.5rem}
.site-footer a{color:rgba(255,255,255,.86)}
.site-footer .muted{color:rgba(255,255,255,.55)}
.footer-logo{
  width:160px; height:auto; border-radius:8px; margin-bottom:1rem;
  background:#fff; padding:.35rem;
}
.footer-brand{font-family:var(--serif); font-size:1.1rem; color:#fff; margin-bottom:.7rem}
.footer-title{font-weight:600; color:#fff; margin-bottom:.7rem}
.footer-grid ul{list-style:none; padding:0; margin:0}
.footer-grid li{margin-bottom:.4rem}
.footer-legal{border-top:1px solid rgba(255,255,255,.14); padding-top:1.5rem; display:flex; flex-wrap:wrap; gap:.5rem 2rem; justify-content:space-between}
.footer-legal p{margin:0; font-size:.84rem}

/* ---------- Barre mobile ---------- */
.mobile-bar{display:none}

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width:1280px){
  .nav{gap:1rem}
  .nav a{font-size:.9rem}
}

@media (max-width:1160px){
  .nav{display:none}
}

@media (max-width:1080px){
  .hero-grid{grid-template-columns:1fr; gap:2.5rem}
  .hero-media img{aspect-ratio:16/9}
  .motifs-grid{grid-template-columns:repeat(2,1fr)}
  .reviews-grid{grid-template-columns:1fr}
  .motifs-visual{grid-template-columns:repeat(2, 200px); gap:1.4rem 2rem}
  .patients-grid{grid-template-columns:repeat(2,1fr)}
  .trust-grid{grid-template-columns:repeat(2,1fr); gap:1.5rem}
  .two-col,.cabinet-grid,.contact-grid{grid-template-columns:1fr}
  .map{min-height:340px}
  .map iframe{min-height:340px}
}

@media (max-width:720px){
  body{font-size:16px}
  .header-cta .btn-primary{display:none}
  .brand-text small{display:none}
  .brand-text strong{font-size:1rem; white-space:nowrap}
  .brand-mark{width:36px; height:36px; border-radius:10px}
  .header-inner{gap:.8rem; min-height:66px}
  .btn-ghost{padding:.6rem .9rem; font-size:.9rem}
  .hero-media figcaption{display:none}
  .motifs-grid,.patients-grid,.steps{grid-template-columns:1fr}
  .motifs-visual{grid-template-columns:repeat(2, minmax(0,1fr)); gap:1.2rem}
  .motifs-visual img{width:100%; height:auto; aspect-ratio:200/149}
  .strip-photo{display:none}
  .field-row{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr; gap:2rem}
  .wide-photo img{aspect-ratio:3/2}
  .hero-actions .btn{width:100%}
  .final-actions .btn{width:100%}
  main{padding-bottom:72px}

  .mobile-bar{
    display:grid; grid-template-columns:1fr 1fr; gap:.6rem;
    position:fixed; left:0; right:0; bottom:0; z-index:120;
    padding:.6rem .9rem calc(.6rem + env(safe-area-inset-bottom));
    background:rgba(255,255,255,.96); backdrop-filter:blur(10px);
    border-top:1px solid var(--line);
  }
  .mobile-bar a{
    display:flex; align-items:center; justify-content:center; gap:.45rem;
    padding:.85rem; border-radius:999px; font-weight:600; font-size:.97rem; text-decoration:none;
  }
  .mb-call{background:var(--sage-dark); color:#fff}
  .mb-form{background:var(--sage-soft); color:var(--deep)}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none !important; animation:none !important}
}

@media print{
  .site-header,.mobile-bar,.final-cta,.map{display:none}
}