/* ==================================================================
   Dr Geoffrey GINOT — Chirurgie de l'épaule — Colmar · Obernai
   Identité : pétrole profond / jade / sable chaud
   ================================================================== */

:root{
  --night:#08201F;
  --pine:#0F3D39;
  --pine-2:#155049;
  --jade:#2E8B7A;
  --jade-l:#57ad9c;
  --sand:#F7F4EE;
  --sand-2:#EFEAE0;
  --stone:#DDD5C7;
  --slate:#5A6A6B;
  --ink:#1B2B2B;
  --white:#fff;
  --maxw:1240px;
  --gut:26px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  font-family:'Manrope',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  font-size:17px;line-height:1.72;color:var(--ink);background:var(--white);
  overflow-x:hidden;font-weight:400;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit}
:focus-visible{outline:2px solid var(--jade);outline-offset:3px;border-radius:2px}

h1,h2,h3,h4{
  font-family:'Fraunces','Georgia',serif;color:var(--night);
  font-weight:500;line-height:1.12;letter-spacing:-.015em;
  font-variation-settings:"SOFT" 0,"WONK" 0;
}
h1{font-size:clamp(2.3rem,5.4vw,4.1rem)}
h2{font-size:clamp(1.85rem,3.9vw,2.9rem)}
h3{font-size:clamp(1.18rem,2vw,1.42rem)}
h4{font-size:1.06rem}
p{margin-bottom:1.05rem}
strong{font-weight:700;color:var(--night)}
em{font-style:italic}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gut)}
.narrow{max-width:790px}

/* ---------- Eyebrow numérotée ---------- */
.eyebrow{
  display:flex;align-items:center;gap:12px;margin-bottom:20px;
  font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;
  font-weight:700;color:var(--jade);
}
.eyebrow::before{content:"";width:34px;height:1px;background:var(--jade);opacity:.55;flex:none}
.eyebrow.center{justify-content:center}

/* ================= HEADER ================= */
.topline{background:var(--night);color:#8fa5a3;font-size:.78rem;letter-spacing:.03em}
.topline .wrap{display:flex;justify-content:flex-end;gap:24px;padding-top:8px;padding-bottom:8px;flex-wrap:wrap}
.topline a:hover{color:var(--jade-l)}

header{position:sticky;top:0;z-index:400;background:rgba(255,255,255,.96);backdrop-filter:blur(10px);border-bottom:1px solid var(--stone)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:20px;max-width:var(--maxw);margin:0 auto;padding:14px var(--gut)}
.brand{display:flex;align-items:center;gap:12px}
.brand svg{flex:none}
.brand b{font-family:'Fraunces',serif;font-size:1.12rem;font-weight:600;color:var(--night);display:block;line-height:1.2;letter-spacing:-.01em}
.brand i{font-style:normal;font-size:.63rem;letter-spacing:.19em;text-transform:uppercase;color:var(--jade);font-weight:700;display:block;margin-top:2px}

.menu{display:flex;align-items:center;gap:4px;list-style:none;font-size:.87rem;font-weight:500}
.menu>li{position:relative}
.menu>li>a{padding:10px 13px;display:inline-block;border-radius:4px;transition:.18s;color:var(--ink)}
.menu>li>a:hover{color:var(--jade);background:var(--sand)}
.drop{
  position:absolute;top:calc(100% + 2px);left:0;min-width:305px;list-style:none;
  background:#fff;border:1px solid var(--stone);border-radius:6px;padding:8px;
  box-shadow:0 20px 50px rgba(8,32,31,.13);opacity:0;visibility:hidden;
  transform:translateY(6px);transition:.2s;
}
.menu>li:hover>.drop,.menu>li:focus-within>.drop{opacity:1;visibility:visible;transform:none}
.drop a{display:block;padding:10px 14px;border-radius:4px;font-size:.86rem;color:var(--slate)}
.drop a:hover{background:var(--sand);color:var(--night)}
.nav-cta{
  background:var(--pine);color:#fff!important;padding:11px 20px!important;border-radius:4px;
  font-size:.8rem;letter-spacing:.05em;font-weight:700;transition:.2s;white-space:nowrap;
}
.nav-cta:hover{background:var(--jade)!important;color:#fff!important}
.burger{display:none;background:none;border:0;cursor:pointer;flex-direction:column;gap:5px;padding:9px}
.burger span{display:block;width:23px;height:2px;background:var(--night);border-radius:2px;transition:.25s}

@media(max-width:1120px){
  .burger{display:flex}
  .menu{
    position:fixed;top:0;right:0;bottom:0;width:min(350px,90vw);background:#fff;
    flex-direction:column;align-items:stretch;gap:0;padding:88px 24px 40px;
    overflow-y:auto;transform:translateX(101%);transition:transform .32s cubic-bezier(.4,0,.2,1);
    box-shadow:-14px 0 44px rgba(8,32,31,.14);
  }
  .menu.open{transform:none}
  .menu>li{border-bottom:1px solid var(--sand-2)}
  .menu>li>a{padding:15px 4px;width:100%}
  .drop{position:static;opacity:1;visibility:visible;transform:none;border:0;box-shadow:none;padding:0 0 12px 16px;min-width:0}
  .drop a{padding:8px 0}
  .menu>li:last-child{border:0;margin-top:20px}
  .nav-cta{display:block;text-align:center}
}

/* ================= HERO ================= */
.hero{position:relative;min-height:clamp(560px,80vh,760px);display:flex;align-items:flex-end;overflow:hidden;background:var(--night)}
.hero-bg{position:absolute;inset:0}
.hero-bg img{width:100%;height:100%;object-fit:cover;opacity:.5}
.hero-bg::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(8,32,31,.62) 0%,rgba(8,32,31,.42) 35%,rgba(8,32,31,.93) 100%);
}
.hero-art{position:absolute;right:-60px;top:50%;transform:translateY(-50%);width:min(560px,52vw);opacity:.2;pointer-events:none;z-index:1}
.hero .wrap{position:relative;z-index:2;padding-top:110px;padding-bottom:56px;width:100%}
.hero .eyebrow{color:var(--jade-l)}
.hero .eyebrow::before{background:var(--jade-l)}
.hero h1{color:#fff;max-width:15ch}
.hero p.lead{color:#cbd8d5;font-size:1.14rem;max-width:56ch;margin-top:22px}
.hero .cta-row{display:flex;gap:13px;flex-wrap:wrap;margin-top:34px}

.btn{
  display:inline-flex;align-items:center;gap:9px;padding:15px 28px;border-radius:4px;
  font-size:.83rem;font-weight:700;letter-spacing:.04em;transition:.2s;border:1px solid transparent;cursor:pointer;
}
.btn-jade{background:var(--jade);color:#fff}
.btn-jade:hover{background:var(--jade-l);color:var(--night)}
.btn-line{border-color:rgba(255,255,255,.4);color:#fff}
.btn-line:hover{border-color:#fff;background:rgba(255,255,255,.1)}
.btn-pine{background:var(--pine);color:#fff}
.btn-pine:hover{background:var(--jade)}
.btn-dark-line{border-color:var(--night);color:var(--night)}
.btn-dark-line:hover{background:var(--night);color:#fff}

/* ---------- Bandeau chiffres ---------- */
.figures{background:var(--pine);color:#cfe0dc}
.figures .wrap{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:1px;padding:0 var(--gut)}
.figures .f{padding:38px 26px 38px 0}
.figures .f+.f{border-left:1px solid rgba(255,255,255,.13);padding-left:34px}
.figures b{display:block;font-family:'Fraunces',serif;font-size:1.72rem;color:#fff;font-weight:500;line-height:1.15;letter-spacing:-.02em}
.figures span{display:block;font-size:.83rem;color:#9dbab4;margin-top:8px;line-height:1.55}
@media(max-width:720px){.figures .f+.f{border-left:0;border-top:1px solid rgba(255,255,255,.13);padding-left:0}.figures .f{padding:26px 0}}

/* ================= SECTIONS ================= */
section{padding:96px 0}
.s-sand{background:var(--sand)}
.s-night{background:var(--night);color:#b4c6c3}
.s-night h2,.s-night h3,.s-night h4{color:#fff}
.s-night strong,.s-night b,.cta-band strong,footer strong{color:#fff}
.s-night em{color:#cfe0dc}
.s-night .lead{color:#9dbab4}
.head{max-width:720px;margin-bottom:56px}
.head .lead{color:var(--slate);font-size:1.06rem;margin-top:8px}
.head.center{margin-left:auto;margin-right:auto;text-align:center}
.head.center .eyebrow{justify-content:center}

/* ---------- Grilles ---------- */
.grid{display:grid;gap:24px}
.g2{grid-template-columns:repeat(auto-fit,minmax(330px,1fr))}
.g3{display:flex;flex-wrap:wrap;justify-content:center}
.g3>*{flex:1 1 295px;min-width:295px;max-width:395px}

/* ---------- Carte pathologie ---------- */
.pcard{
  background:#fff;border:1px solid var(--stone);border-radius:8px;overflow:hidden;
  display:flex;flex-direction:column;transition:.28s;
}
.pcard:hover{transform:translateY(-4px);box-shadow:0 22px 50px rgba(8,32,31,.1);border-color:var(--jade)}
.pcard .vis{background:#fff;aspect-ratio:4/3;overflow:hidden;position:relative;border-bottom:1px solid var(--stone)}
.pcard .vis picture{display:block;width:100%;height:100%}
.pcard .vis img{width:100%;height:100%;object-fit:contain;display:block;padding:14px;transition:transform .5s}
.pcard:hover .vis img{transform:scale(1.04)}
.pcard .body{padding:28px 26px 30px;flex:1;display:flex;flex-direction:column}
.pcard h3{margin-bottom:10px}
.pcard p{color:var(--slate);font-size:.94rem;flex:1;margin-bottom:18px}
.pcard .more{font-size:.76rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--jade);display:inline-flex;align-items:center;gap:7px}
.pcard .more::after{content:"→";transition:.2s}
.pcard:hover .more::after{transform:translateX(4px)}

/* ---------- Split photo/texte ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.split.rev .txt{order:2}
.split .ph{border-radius:8px;overflow:hidden;position:relative;background:var(--sand-2)}
.split .ph img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/5}
.split .ph.wide img{aspect-ratio:4/3}
.split .txt h2{margin-bottom:22px}
.split p{color:var(--slate)}
.s-night .split p{color:#a8bebb}
@media(max-width:900px){.split{grid-template-columns:1fr;gap:36px}.split.rev .txt{order:0}}

/* ---------- Lieux numérotés ---------- */
.places{display:grid;grid-template-columns:repeat(auto-fit,minmax(330px,1fr));gap:24px}
.place{background:#fff;border:1px solid var(--stone);border-radius:8px;overflow:hidden;display:flex;flex-direction:column}
.place .ph{aspect-ratio:16/9;overflow:hidden;background:var(--sand-2)}
.place .ph img{width:100%;height:100%;object-fit:cover}
.place .body{padding:28px 28px 30px;flex:1;display:flex;flex-direction:column}
.place .num{
  font-family:'Fraunces',serif;font-size:.82rem;font-weight:600;color:var(--jade);
  letter-spacing:.1em;margin-bottom:10px;display:flex;align-items:center;gap:10px;
}
.place .num::after{content:"";height:1px;flex:1;background:var(--stone)}
.place .kind{font-size:.7rem;letter-spacing:.17em;text-transform:uppercase;color:var(--slate);font-weight:700;margin-bottom:6px}
.place address{font-style:normal;color:var(--slate);font-size:.95rem;line-height:1.75;margin:12px 0 18px;flex:1}
.place .tags{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:20px}
.place .tags span{font-size:.75rem;color:var(--slate);background:var(--sand);border:1px solid var(--stone);padding:5px 11px;border-radius:20px}

/* ---------- Parcours numéroté ---------- */
.steps{counter-reset:st;display:grid;gap:0;border-top:1px solid var(--stone)}
.step{
  counter-increment:st;border-bottom:1px solid var(--stone);
  display:grid;grid-template-columns:92px 1fr;gap:28px;padding:34px 0;align-items:start;
}
.step::before{
  content:counter(st,decimal-leading-zero);
  font-family:'Fraunces',serif;font-size:2.1rem;color:var(--jade);opacity:.5;line-height:1;font-weight:500;
}
.step .when{font-size:.71rem;letter-spacing:.16em;text-transform:uppercase;color:var(--jade);font-weight:700;margin-bottom:7px;display:block}
.step h4{margin-bottom:7px;font-size:1.24rem}
.step p{color:var(--slate);font-size:.95rem;margin:0}
.s-night .steps{border-color:rgba(255,255,255,.14)}
.s-night .step{border-color:rgba(255,255,255,.14)}
.s-night .step p{color:#a8bebb}
@media(max-width:620px){.step{grid-template-columns:1fr;gap:10px}.step::before{font-size:1.5rem}}

/* ---------- Prose ---------- */
.prose h2{margin:56px 0 18px}
.prose h2:first-child{margin-top:0}
.prose h3{margin:38px 0 12px}
.prose p{color:var(--slate)}
.prose ul,.prose ol{margin:0 0 1.2rem 1.35rem}
.prose li{margin-bottom:.55rem;color:var(--slate)}
.prose li::marker{color:var(--jade)}
.prose a:not(.btn){color:var(--jade);font-weight:600;border-bottom:1px solid rgba(46,139,122,.35)}
.prose a:not(.btn):hover{border-color:var(--jade)}
.prose figure{margin:34px 0}
.prose figure{background:#fff;border:1px solid var(--stone);border-radius:8px;padding:18px}
.prose figure picture{display:block}
.prose figure img{width:100%;max-width:520px;margin:0 auto;border-radius:4px}
.prose figcaption{font-size:.83rem;color:var(--slate);margin-top:10px;text-align:center}

.callout{
  background:var(--sand);border:1px solid var(--stone);border-left:3px solid var(--jade);
  padding:26px 30px;border-radius:0 8px 8px 0;margin:34px 0;
}
.callout p:last-child{margin-bottom:0}

.tbl-scroll{overflow-x:auto;margin:30px 0;-webkit-overflow-scrolling:touch;border-radius:8px;border:1px solid var(--stone)}
.tbl{width:100%;border-collapse:collapse;font-size:.93rem;min-width:520px}
.tbl th,.tbl td{padding:14px 17px;text-align:left;vertical-align:top;border-bottom:1px solid var(--stone)}
.tbl th{background:var(--pine);color:#fff;font-size:.74rem;letter-spacing:.09em;text-transform:uppercase;font-weight:700}
.tbl td{color:var(--slate)}
.tbl tr:last-child td{border-bottom:0}
.tbl tbody tr:hover td{background:var(--sand)}

/* ---------- Puces zone ---------- */
.chips{display:flex;flex-wrap:wrap;gap:9px;margin-top:26px}
.chips a{
  border:1px solid var(--stone);background:#fff;padding:9px 17px;border-radius:30px;
  font-size:.83rem;color:var(--slate);transition:.2s;font-weight:500;
}
.chips a:hover{border-color:var(--jade);color:var(--night)}
.s-night .chips a{background:transparent;border-color:rgba(255,255,255,.22);color:#b4c6c3}
.s-night .chips a:hover{border-color:var(--jade-l);color:#fff}

/* ---------- FAQ ---------- */
.faq{border-top:1px solid var(--stone)}
.faq-item{border-bottom:1px solid var(--stone)}
.faq-q{
  width:100%;background:none;border:0;text-align:left;cursor:pointer;color:var(--night);
  padding:26px 48px 26px 0;font-family:'Fraunces',serif;font-size:1.2rem;font-weight:500;
  position:relative;line-height:1.32;letter-spacing:-.01em;
}
.faq-q:hover{color:var(--jade)}
.faq-q::after,.faq-q::before{
  content:"";position:absolute;right:10px;top:50%;background:var(--jade);transition:.25s;
}
.faq-q::after{width:15px;height:1.5px;transform:translateY(-50%)}
.faq-q::before{width:1.5px;height:15px;transform:translate(7px,-50%)}
.faq-item.open .faq-q::before{transform:translate(7px,-50%) rotate(90deg);opacity:0}
.faq-a{max-height:0;overflow:hidden;transition:max-height .34s ease}
.faq-a .in{padding:0 46px 28px 0;color:var(--slate);font-size:.96rem}
.faq-a .in p:last-child{margin-bottom:0}
.s-night .faq,.s-night .faq-item{border-color:rgba(255,255,255,.15)}
.s-night .faq-q{color:#fff}
.s-night .faq-a .in{color:#a8bebb}

/* ---------- Contact ---------- */
.contact-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:start}
@media(max-width:900px){.contact-grid{grid-template-columns:1fr;gap:36px}}
.cbox{background:#fff;border:1px solid var(--stone);border-radius:8px;padding:32px}
.cbox h4{margin-bottom:6px}
.cline{display:flex;gap:16px;padding:17px 0;border-bottom:1px solid var(--sand-2)}
.cline:last-child{border-bottom:0;padding-bottom:0}
.cline .k{font-size:.71rem;letter-spacing:.15em;text-transform:uppercase;color:var(--jade);font-weight:700;width:110px;flex:none;padding-top:3px}
.cline .v{color:var(--slate);font-size:.95rem;line-height:1.65}
.cline .v a{color:var(--night);font-weight:600}
.cline .v a:hover{color:var(--jade)}
.map{border-radius:8px;overflow:hidden;border:1px solid var(--stone);background:var(--sand-2)}
.map iframe{display:block;width:100%;height:340px;border:0}

/* ---------- Bandeau CTA ---------- */
.cta-band{background:var(--night);color:#b4c6c3;padding:82px 0;position:relative;overflow:hidden}
.cta-band .art{position:absolute;left:-70px;bottom:-90px;width:340px;opacity:.13;pointer-events:none}
.cta-band .wrap{position:relative;z-index:2;text-align:center}
.cta-band h2{color:#fff;max-width:19ch;margin:0 auto}
.cta-band p{color:#9dbab4;max-width:56ch;margin:18px auto 30px}
.cta-band .cta-row{display:flex;gap:13px;justify-content:center;flex-wrap:wrap}

/* ---------- Fil d'Ariane ---------- */
.crumb{font-size:.79rem;color:var(--slate);padding:16px 0;background:var(--sand);border-bottom:1px solid var(--stone)}
.crumb a{color:var(--jade);font-weight:600}
.crumb span.sep{opacity:.4;margin:0 7px}

/* ---------- En-tête de page ---------- */
.phead{background:var(--sand);padding:70px 0 64px;border-bottom:1px solid var(--stone);position:relative;overflow:hidden}
.phead .art{position:absolute;right:-50px;top:50%;transform:translateY(-50%);width:min(360px,40vw);opacity:.11;pointer-events:none}
.phead .wrap{position:relative;z-index:2}
.phead h1{max-width:19ch}
.phead p{color:var(--slate);max-width:62ch;margin-top:18px;font-size:1.05rem}

/* ---------- Logos sociétés ---------- */
.socs{display:flex;flex-wrap:wrap;gap:38px;align-items:center;justify-content:center;margin-top:16px}
.socs img{height:52px;width:auto;opacity:.55;filter:grayscale(1);transition:.25s}
.socs img:hover{opacity:1;filter:none}

/* ---------- Modale rendez-vous ---------- */
.modal{position:fixed;inset:0;z-index:900;display:none;align-items:center;justify-content:center;padding:24px}
.modal.open{display:flex}
.modal-bd{position:absolute;inset:0;background:rgba(8,32,31,.62);backdrop-filter:blur(3px)}
.modal-in{
  position:relative;background:#fff;border-radius:10px;max-width:470px;width:100%;
  padding:42px 38px 36px;box-shadow:0 34px 80px rgba(8,32,31,.3);text-align:center;
}
.modal-in h3{margin-bottom:10px}
.modal-in p{color:var(--slate);font-size:.95rem;margin-bottom:26px}
.modal-in .btn{width:100%;justify-content:center;margin-bottom:11px}
.modal-x{position:absolute;top:14px;right:14px;background:none;border:0;cursor:pointer;font-size:1.5rem;color:var(--slate);line-height:1;padding:8px;border-radius:4px}
.modal-x:hover{color:var(--night);background:var(--sand)}
.modal-note{font-size:.8rem;color:var(--slate);margin:0;padding-top:16px;border-top:1px solid var(--sand-2)}

/* ---------- Footer ---------- */
footer{background:var(--night);color:#7f9997;padding:72px 0 30px;font-size:.9rem}
footer h4{color:#fff;font-family:'Manrope',sans-serif;font-size:.76rem;letter-spacing:.16em;text-transform:uppercase;font-weight:700;margin-bottom:18px}
footer a:hover{color:var(--jade-l)}
footer ul{list-style:none}
footer li{margin-bottom:10px}
.fgrid{display:grid;gap:44px;grid-template-columns:1.4fr 1fr 1fr 1.15fr;margin-bottom:48px}
@media(max-width:900px){.fgrid{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}}
.fbrand b{font-family:'Fraunces',serif;color:#fff;font-size:1.2rem;font-weight:600;display:block;margin-bottom:4px}
.fbrand i{font-style:normal;font-size:.63rem;letter-spacing:.19em;text-transform:uppercase;color:var(--jade);font-weight:700}
.fbot{border-top:1px solid rgba(255,255,255,.1);padding-top:26px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:.82rem}
.seoline{border-top:1px solid rgba(255,255,255,.1);margin-top:24px;padding-top:20px;font-size:.73rem;color:#4d6664;line-height:1.95}

/* ---------- Repli si une image ne charge pas ---------- */
img.imgoff{display:none}
.ph,.vis,.map{
  background-color:var(--sand-2);
  background-image:repeating-linear-gradient(135deg,rgba(15,61,57,.05) 0 1px,transparent 1px 11px);
}
.hero-bg{background:linear-gradient(160deg,#0F3D39 0%,#08201F 70%)}

/* ---------- Reveal ---------- */
.reveal{opacity:1;transform:none}
.js .reveal{opacity:0;transform:translateY(20px);transition:opacity .65s ease,transform .65s cubic-bezier(.22,1,.36,1)}
.js .reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .js .reveal{opacity:1;transform:none}
}

@media(max-width:640px){
  body{font-size:16px}
  section{padding:64px 0}
  .head{margin-bottom:38px}
  .hero .wrap{padding-top:80px;padding-bottom:44px}
  .modal-in{padding:36px 26px 30px}
  .cbox{padding:26px 22px}
}