:root{
  --navy:#16243D; --navy-deep:#101A2C; --navy-soft:#24344F;
  --orange:#E27D1C; --orange-bright:#F2A23A; --orange-deep:#C2660F;
  --ivory:#F4F0E7; --ivory-deep:#EBE5D6; --paper:#FBF9F3;
  --ink:#16243D; --ink-muted:#5E5849; --eo:cubic-bezier(.16,1,.3,1); --base:420ms; --slow:760ms; --stag:80ms;
  --ink-faint:#938B79;
  --serif:'Playfair Display', Georgia, serif;
  --sans:'Hanken Grotesk', system-ui, -apple-system, sans-serif;
  --pad:clamp(72px, 9vw, 128px);
  --gut:clamp(20px, 5vw, 48px);
  --maxw:1180px;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family:var(--sans); color:var(--ink); background:var(--paper);
  font-size:17px; line-height:1.62; -webkit-font-smoothing:antialiased;
}
img{max-width:100%; height:auto; display:block;}
a{color:inherit;}

.wrap{max-width:var(--maxw); margin:0 auto; padding-left:var(--gut); padding-right:var(--gut);}
.sec{padding:var(--pad) 0; position:relative;}
.sec--ivory{background:var(--ivory); color:var(--ink);}
.sec--paper{background:var(--paper); color:var(--ink);}
.sec--navy{background:var(--navy); color:var(--ivory);}
.sec--navy-deep{background:var(--navy-deep); color:var(--ivory);}
.sec--navy .eyebrow,.sec--navy-deep .eyebrow{color:var(--orange-bright);}
.sec--navy p,.sec--navy-deep p{color:rgba(244,240,231,.82);}
.grain::before{
  content:''; position:absolute; inset:0; pointer-events:none;
  background-image:radial-gradient(rgba(22,36,61,.05) 1px, transparent 1px);
  background-size:22px 22px;
}
.sec--navy.grain::before,.sec--navy-deep.grain::before{
  background-image:radial-gradient(rgba(244,240,231,.045) 1px, transparent 1px);
}

/* ---------- typographie ---------- */
h1,h2,h3{font-family:var(--serif); font-weight:600; line-height:1.1; letter-spacing:-.5px;}
h1{font-size:clamp(36px, 5.6vw, 62px); font-weight:700; letter-spacing:-1.4px;}
h2{font-size:clamp(29px, 3.8vw, 44px); margin-bottom:18px;}
h3{font-size:clamp(20px, 2.1vw, 24px); letter-spacing:-.3px;}
.eyebrow{
  font-family:var(--sans); font-size:13px; font-weight:700; letter-spacing:1.6px;
  text-transform:uppercase; color:var(--orange-deep); margin-bottom:16px; display:block;
}
.lead{font-size:clamp(18px,1.5vw,21px); color:var(--ink-muted); max-width:62ch;}
.sec--navy .lead,.sec--navy-deep .lead{color:rgba(244,240,231,.78);}
p{max-width:68ch;}
.rule{width:88px; height:3px; background:var(--orange); border-radius:2px; margin:22px 0 30px;}
.rule--c{margin-left:auto; margin-right:auto;}

/* ---------- boutons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-height:52px; padding:14px 25px; border-radius:8px;
  font-family:var(--sans); font-size:16px; font-weight:700; letter-spacing:.1px;
  text-decoration:none; border:2px solid transparent; cursor:pointer;
  transition:transform .15s ease, background .15s ease, border-color .15s ease;
}
.btn:hover{transform:translateY(-2px);}
.btn--primary{background:var(--orange); color:var(--navy);}      /* contraste 5,31:1 */
.btn--primary:hover{background:var(--orange-bright);}
.btn--ghost{background:transparent; color:var(--ivory); border-color:rgba(244,240,231,.45);}
.btn--ghost:hover{border-color:var(--ivory);}
.btn--ghost-dark{background:transparent; color:var(--navy); border-color:rgba(22,36,61,.3);}
.btn--ghost-dark:hover{border-color:var(--navy);}
.btn--sm{min-height:44px; padding:10px 20px; font-size:15px;}
.btns{display:flex; flex-wrap:wrap; gap:14px; margin-top:34px;}
.btn-note{font-size:14.5px; color:var(--ink-muted); margin-top:16px; max-width:52ch;}
.sec--navy .btn-note,.sec--navy-deep .btn-note,.hero .btn-note{color:rgba(244,240,231,.72);}

/* ---------- header ---------- */
.hdr{
  position:sticky; top:0; z-index:50; background:rgba(16,26,44,.94);
  backdrop-filter:saturate(140%) blur(8px); border-bottom:1px solid rgba(244,240,231,.1);
}
.hdr-in{display:flex; align-items:center; gap:24px; min-height:70px;}
.brand{
  font-family:var(--serif); font-size:21px; font-weight:700; color:var(--ivory);
  text-decoration:none; letter-spacing:-.3px; display:flex; align-items:center; gap:11px;
}
.brand .dot{width:11px; height:11px; border-radius:3px; background:var(--orange); flex:0 0 auto;}
.nav{margin-left:auto; display:flex; align-items:center; gap:28px;}
.nav a{
  color:rgba(244,240,231,.78); text-decoration:none; font-size:15px; font-weight:500;
  padding:8px 0; border-bottom:2px solid transparent;
}
.nav a:hover{color:var(--ivory); border-bottom-color:var(--orange);}
@media(max-width:860px){ .nav .navlink{display:none;} .hdr-in{gap:12px;} }

/* ---------- hero ---------- */
.hero{background:var(--navy-deep); color:var(--ivory); padding:clamp(56px,7vw,92px) 0 0;}
.hero-grid{display:grid; grid-template-columns:.775fr 1fr; gap:clamp(28px,4vw,64px); align-items:center;}
.hero h1{color:var(--ivory);}
.hero h1 em{font-style:italic; color:var(--orange-bright); font-weight:600;}
.hero-sub{margin-top:22px; font-size:clamp(17px,1.5vw,20px); color:rgba(244,240,231,.8); max-width:52ch;}
.hero-fig{position:relative; aspect-ratio:4/3; overflow:hidden; border-radius:14px;
  box-shadow:0 30px 70px rgba(0,0,0,.45);}
.hero-fig img{position:absolute; left:0; top:-18%; width:100%; height:136%;
  object-fit:cover; object-position:center 38%; border-radius:0; box-shadow:none;}
.hero-fig figcaption{
  position:absolute; left:16px; bottom:14px; background:rgba(16,26,44,.82);
  color:var(--ivory); font-size:12.5px; letter-spacing:.4px; padding:7px 12px; border-radius:6px;
}
@media(max-width:880px){ .hero-grid{grid-template-columns:1fr;} .hero-fig{aspect-ratio:3/2; max-height:320px;} }

/* ---------- bande de preuve ---------- */
.proof{background:var(--navy); border-top:3px solid var(--orange); padding:clamp(44px,5vw,64px) 0;}
.proof-grid{display:grid; grid-template-columns:repeat(6,1fr); gap:clamp(14px,1.6vw,22px);}
.proof-grid .metric:nth-child(-n+2){grid-column:span 3;}   /* ligne 1 : 2 blocs */
.proof-grid .metric:nth-child(n+3){grid-column:span 2;}    /* ligne 2 : 3 blocs */
.metric{
  display:flex; gap:18px; align-items:flex-start;
  border:1px solid rgba(244,240,231,.15); border-radius:12px;
  padding:clamp(20px,2.2vw,26px) clamp(18px,2.2vw,28px);
  background:rgba(244,240,231,.02);
}
.metric .ico{flex:0 0 auto; width:30px; height:30px; color:var(--orange); margin-top:3px;}
.metric .ico svg{width:100%; height:100%; display:block;}
.metric .pre{
  font-size:12px; font-weight:700; letter-spacing:1.3px; text-transform:uppercase;
  color:rgba(244,240,231,.5); display:block; margin-bottom:3px;
}
.metric .pre--ghost{visibility:hidden;}
@media(max-width:940px){ .metric .pre--ghost{display:none;} }
.metric .n{
  font-family:var(--serif); font-size:clamp(30px,3.3vw,40px); font-weight:700;
  color:var(--orange-bright); line-height:1.02; letter-spacing:-.5px;
  font-variant-numeric:tabular-nums; display:block;
}
.metric .l{font-size:15px; line-height:1.45; color:rgba(244,240,231,.74); margin-top:7px; max-width:28ch;}
@media(max-width:940px){
  .proof-grid{grid-template-columns:repeat(2,1fr);}
  .proof-grid .metric:nth-child(-n+2),
  .proof-grid .metric:nth-child(n+3){grid-column:span 1;}
  .proof-grid .metric:last-child{grid-column:span 2;}
}
@media(max-width:620px){
  .proof-grid{grid-template-columns:1fr;}
  .proof-grid .metric,
  .proof-grid .metric:last-child{grid-column:span 1;}
  .metric{padding:18px 20px; gap:15px;}
  .metric .ico{width:26px; height:26px;}
}

/* ---------- grilles ---------- */
.cards{display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(16px,2vw,24px); margin-top:48px;}
@media(max-width:720px){ .cards{grid-template-columns:1fr;} }
.card{
  background:var(--navy); color:var(--ivory); border-radius:14px;
  padding:clamp(26px,3vw,34px) clamp(24px,3vw,34px) clamp(24px,3vw,30px);
  display:flex; flex-direction:column; position:relative; overflow:hidden;
}
.card::after{
  content:''; position:absolute; left:0; top:0; width:3px; height:100%;
  background:linear-gradient(var(--orange), rgba(226,125,28,0));
}
.card .num{
  font-family:var(--serif); font-size:13px; font-weight:700; letter-spacing:2px;
  color:rgba(244,240,231,.4); display:block; margin-bottom:12px;
}
.card h3{color:var(--ivory); margin-bottom:10px; font-size:clamp(21px,2.2vw,25px);}
.card p{font-size:16px; color:rgba(244,240,231,.76); max-width:42ch; flex:1;}
.card .flip{
  margin-top:20px; padding-top:16px; border-top:1px solid rgba(244,240,231,.16);
  font-family:var(--serif); font-style:italic; font-size:17px; line-height:1.45;
  color:var(--orange-bright); display:flex; gap:10px; align-items:baseline;
}
.card .flip .arw{font-style:normal; font-family:var(--sans); flex:0 0 auto;}
.cards-foot{
  margin-top:clamp(34px,4vw,52px);
  background:var(--paper); border:1px solid var(--ivory-deep); border-radius:16px;
  padding:clamp(24px,3vw,34px) clamp(24px,3.4vw,40px);
  display:grid; grid-template-columns:auto 1px 1fr auto;
  align-items:center; gap:clamp(20px,2.8vw,38px);
  box-shadow:0 1px 0 rgba(22,36,61,.03);
}
.cards-foot .big{
  font-family:var(--serif); font-weight:700; color:var(--orange-deep);
  font-size:clamp(52px,5.8vw,78px); line-height:.86; letter-spacing:-2.5px;
  display:flex; align-items:flex-start; gap:4px;
}
.cards-foot .big sup{font-size:.42em; line-height:1; margin-top:.18em; letter-spacing:0;}
.cf-sep{width:1px; align-self:stretch; min-height:78px; background:linear-gradient(rgba(235,229,214,0), var(--ink-faint), rgba(235,229,214,0)); opacity:.45;}
.cards-foot .cf-txt p{
  font-size:clamp(16.5px,1.35vw,19px); line-height:1.5; color:var(--ink-muted);
  max-width:46ch; margin:0;
}
.cards-foot .cf-txt strong{color:var(--ink); font-weight:600; display:block; margin-top:6px;}
.cf-mosaic{
  position:relative; flex:0 0 auto; width:clamp(240px,22vw,300px);
  border-radius:12px; overflow:hidden; line-height:0;
  box-shadow:0 6px 20px rgba(22,36,61,.14);
}
.cf-mosaic img{width:100%; filter:saturate(.62) contrast(1.02);}
.cf-mosaic::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(140deg, rgba(22,36,61,.18), rgba(226,125,28,.1));
  mix-blend-mode:multiply;
}
.cf-link{
  display:inline-flex; align-items:center; gap:6px; margin-top:14px;
  font-size:14.5px; font-weight:700; color:var(--orange-deep); text-decoration:none;
}
.cf-link::after{content:'\2192'; transition:transform .2s ease;}
.cf-link:hover::after{transform:translateX(4px);}
.src{
  font-size:12.5px; color:var(--ink-faint); margin-top:14px; max-width:none;
  font-style:italic;
}
@media(max-width:1080px){
  .cards-foot{grid-template-columns:auto 1px 1fr;}
  .cf-mosaic{grid-column:1 / -1; width:100%;}
}
@media(max-width:600px){
  .cards-foot{grid-template-columns:1fr; gap:18px;}
  .cf-sep{display:none;}
}

.steps{display:grid; grid-template-columns:repeat(auto-fit,minmax(228px,1fr)); gap:26px; margin-top:46px;}
.step{border-top:1px solid rgba(244,240,231,.2); padding-top:22px;}
.step .num{font-family:var(--serif); font-size:15px; font-weight:700; color:var(--orange-bright); letter-spacing:1px; display:block; margin-bottom:10px;}
.step h3{color:var(--ivory); margin-bottom:9px; font-size:20px;}
.step p{font-size:15.5px; max-width:none;}

.split{display:grid; grid-template-columns:1fr 1fr; gap:clamp(26px,4vw,56px); align-items:stretch;}
.split > div{align-self:center;}
@media(max-width:880px){ .split{grid-template-columns:1fr;} }
.split img{border-radius:14px; width:100%; height:100%; object-fit:cover; min-height:clamp(300px,38vw,470px); max-height:560px;}

.two-col{display:grid; grid-template-columns:1fr 1fr; gap:clamp(24px,3.4vw,44px); margin-top:44px;}
@media(max-width:760px){ .two-col{grid-template-columns:1fr;} }
.list{list-style:none;}
.list li{
  display:flex; gap:12px; align-items:flex-start; padding:11px 0;
  border-bottom:1px solid var(--ivory-deep); font-size:16px;
}
.list li:last-child{border-bottom:0;}
.list .mk{flex:0 0 auto; font-weight:700; line-height:1.5;}
.list--yes .mk{color:var(--orange-deep);}
.list--no .mk{color:var(--ink-faint);}
.list--no li{color:var(--ink-muted);}
.col-h{font-family:var(--serif); font-size:21px; font-weight:600; margin-bottom:6px;}

/* ---------- témoignages ---------- */
.testis{display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(18px,2.2vw,26px); margin-top:46px;}
@media(max-width:760px){ .testis{grid-template-columns:1fr;} }
.testi{
  background:var(--navy-soft); border-radius:14px; overflow:hidden;
  display:flex; flex-direction:column;
}

/* vignette video cliquable */
.vthumb{
  position:relative; display:block; width:100%; padding:0; border:0; cursor:pointer;
  background:var(--navy-deep); line-height:0; font:inherit; color:inherit;
}
.vthumb img{width:100%; aspect-ratio:3/2; object-fit:cover; transition:transform .4s ease, filter .3s ease;}
.vthumb::before{
  content:''; position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, rgba(16,26,44,.05) 40%, rgba(16,26,44,.72) 100%);
}
.vthumb:hover img,.vthumb:focus-visible img{transform:scale(1.035); filter:brightness(1.06);}
.vthumb .play{
  position:absolute; z-index:2; left:50%; top:50%; transform:translate(-50%,-50%);
  width:62px; height:62px; border-radius:50%; background:var(--orange);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 8px 26px rgba(0,0,0,.4); transition:transform .2s ease, background .2s ease;
}
.vthumb:hover .play,.vthumb:focus-visible .play{transform:translate(-50%,-50%) scale(1.08); background:var(--orange-bright);}
.vthumb .play svg{width:22px; height:22px; margin-left:3px; color:var(--navy);}
.vthumb .vlabel{
  position:absolute; z-index:2; left:16px; bottom:14px; line-height:1;
  font-size:12px; font-weight:700; letter-spacing:1.2px; text-transform:uppercase;
  color:var(--ivory); display:flex; align-items:center; gap:7px;
}
.vthumb .vlabel::before{content:''; width:7px; height:7px; border-radius:50%; background:var(--orange-bright);}
.vthumb:focus-visible{outline:3px solid var(--orange-bright); outline-offset:-3px;}

.testi-body{padding:26px 26px 24px; display:flex; flex-direction:column; flex:1; border-left:3px solid var(--orange);}
.testi blockquote{
  font-family:var(--serif); font-size:18px; font-style:italic; line-height:1.5;
  color:var(--ivory); margin-bottom:18px; flex:1;
}
.testi .nm{font-weight:700; font-size:15.5px; color:var(--ivory); line-height:1.3; display:block;}
.testi .rl{font-size:13.5px; color:rgba(244,240,231,.62); line-height:1.35; display:block;}
.testi .res{
  margin-top:16px; padding-top:14px; border-top:1px solid rgba(244,240,231,.14);
  font-size:14px; color:var(--orange-bright); font-weight:600; letter-spacing:.2px;
}

/* lecteur en surimpression */
.vmodal{
  position:fixed; inset:0; z-index:200; display:none;
  align-items:center; justify-content:center; padding:clamp(16px,4vw,48px);
  background:rgba(10,16,28,.9); backdrop-filter:blur(4px);
}
.vmodal[open],.vmodal.on{display:flex;}
.vmodal .frame{
  position:relative; width:min(980px,100%); aspect-ratio:16/9;
  background:#000; border-radius:12px; overflow:hidden; box-shadow:0 30px 90px rgba(0,0,0,.6);
}
.vmodal .frame.vertical{width:min(420px,100%); aspect-ratio:9/16;}
.vmodal iframe{width:100%; height:100%; border:0; display:block;}
.vmodal .close{
  position:absolute; top:-52px; right:0; width:44px; height:44px; border-radius:50%;
  border:1px solid rgba(244,240,231,.35); background:rgba(244,240,231,.1); color:var(--ivory);
  font-size:22px; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center;
}
.vmodal .close:hover{background:rgba(244,240,231,.12);}
@media(max-width:620px){ .vmodal .close{top:-48px;} }

/* ---------- guide ---------- */
.guide{
  background:var(--navy); border-radius:16px; padding:clamp(30px,4vw,52px);
  display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(28px,4vw,54px); align-items:center;
}
.guide h2{color:var(--ivory); margin-bottom:14px;}

/* la mention de gratuite : une pastille, pas un simple surtitre.
   Contour et non fond plein, pour ne pas concurrencer le bouton
   d'envoi, qui doit rester le seul aplat orange du bloc.        */
.offert{
  display:inline-flex; align-items:center; gap:8px;
  border:1px solid var(--orange); border-radius:999px;
  padding:7px 15px 7px 12px; margin-bottom:20px;
  font-family:var(--sans); font-size:12.5px; font-weight:700;
  letter-spacing:1.5px; text-transform:uppercase; color:var(--orange-bright);
  background:rgba(226,125,28,.10);
}
.offert svg{width:16px; height:16px; flex:0 0 auto;}
.guide p{color:rgba(244,240,231,.8);}
.guide-cover{position:relative;}
.guide-cover img{
  width:100%; border-radius:8px; box-shadow:0 30px 64px rgba(0,0,0,.5);
  transform:rotate(-1.6deg); transition:transform .3s ease;
}
.guide-cover:hover img{transform:rotate(0deg) scale(1.015);}
.guide-cover .badge{
  position:absolute; z-index:2; right:-12px; top:-16px;
  background:var(--orange); color:var(--navy); border-radius:8px;
  font-size:12px; font-weight:700; letter-spacing:1.2px; text-transform:uppercase;
  padding:8px 13px; box-shadow:0 8px 22px rgba(0,0,0,.35);
}
@media(max-width:820px){
  .guide{grid-template-columns:1fr;}
  .guide-cover{max-width:268px; margin:0 auto 8px; order:-1;}
}

/* formulaire de capture */
.lead-form{margin-top:26px; display:grid; gap:12px; max-width:440px;}
.lead-form .row{display:grid; gap:12px;}
.lead-form .row--duo{grid-template-columns:1fr 1fr;}
@media(max-width:520px){ .lead-form .row--duo{grid-template-columns:1fr;} }
.lead-form label{
  font-size:12.5px; font-weight:700; letter-spacing:1.1px; text-transform:uppercase;
  color:rgba(244,240,231,.6); display:block; margin-bottom:6px;
}
.lead-form input[type=text],.lead-form input[type=email]{
  width:100%; min-height:50px; padding:12px 15px; border-radius:8px;
  border:1px solid rgba(244,240,231,.22); background:rgba(244,240,231,.06);
  color:var(--ivory); font-family:var(--sans); font-size:16px;
}
.lead-form input::placeholder{color:rgba(244,240,231,.38);}
.lead-form input:focus{outline:2px solid var(--orange-bright); outline-offset:1px; border-color:transparent;}
.lead-form .consent{
  display:flex; gap:11px; align-items:flex-start; font-size:14px;
  color:rgba(244,240,231,.72); line-height:1.45; margin-top:4px; text-transform:none;
  letter-spacing:0; font-weight:400;
}
.lead-form .consent input{width:20px; height:20px; flex:0 0 auto; margin-top:2px; accent-color:var(--orange);}
.lead-form .btn{width:100%; margin-top:6px;}
.form-legal{font-size:13px; color:rgba(244,240,231,.5); margin-top:12px; line-height:1.5; max-width:46ch;}
.form-legal a{text-decoration:underline;}
.form-ok{
  margin-top:18px; padding:16px 18px; border-radius:10px; max-width:440px;
  border:1px solid var(--orange); background:rgba(226,125,28,.12);
  color:var(--ivory); font-size:15.5px; display:none;
}
.form-ok.on{display:block;}

/* ---------- FAQ ---------- */
.faq{margin-top:42px; max-width:820px;}
.faq details{border-bottom:1px solid var(--ivory-deep);}
.faq summary{
  cursor:pointer; list-style:none; padding:20px 40px 20px 0; position:relative;
  font-family:var(--serif); font-size:19px; font-weight:600; color:var(--ink);
}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{
  content:'+'; position:absolute; right:6px; top:50%; transform:translateY(-50%);
  font-family:var(--sans); font-size:24px; font-weight:400; color:var(--orange-deep);
}
.faq details[open] summary::after{content:'\2212';}
.faq details p{padding:0 0 22px; color:var(--ink-muted); font-size:16px;}

/* ---------- CTA final ---------- */
.final h2{color:var(--ivory); max-width:17ch; text-wrap:balance;}
.final .lead{max-width:46ch;}
.final .split img{
  border-radius:14px; box-shadow:0 26px 60px rgba(0,0,0,.45);
  min-height:clamp(320px,36vw,460px); max-height:520px;
}
@media(max-width:880px){
  .final .split img{min-height:0; aspect-ratio:4/3; max-height:300px; object-position:center 18%;}
  .final h2{max-width:20ch;}
}

/* ---------- footer ---------- */
.ft{background:var(--navy-deep); color:rgba(244,240,231,.68); padding:56px 0 30px; font-size:15px;}
.ft-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:34px;}
.ft h4{font-family:var(--sans); font-size:13px; letter-spacing:1.4px; text-transform:uppercase; color:var(--orange-bright); margin-bottom:14px; font-weight:700;}
.ft a{color:rgba(244,240,231,.78); text-decoration:none; display:inline-block; padding:6px 0;}
.ft a:hover{color:var(--ivory); text-decoration:underline;}
.ft .brand{margin-bottom:12px;}
.ft-bot{margin-top:38px; padding-top:20px; border-top:1px solid rgba(244,240,231,.12); font-size:13.5px; color:rgba(244,240,231,.45); display:flex; flex-wrap:wrap; gap:16px; justify-content:space-between;}
@media(max-width:760px){ .ft-grid{grid-template-columns:1fr;} }

.note{
  background:var(--orange); color:var(--navy); font-size:14px; font-weight:600;
  padding:11px 0; text-align:center; letter-spacing:.2px;
}


/* ============================================================
   Briques ajoutees pour le site multi-pages
   ============================================================ */

/* --- bandeau de page interieure --- */
.pagehead{background:var(--navy-deep); color:var(--ivory); padding:clamp(56px,7vw,92px) 0 clamp(48px,6vw,72px); position:relative;}
.pagehead h1{color:var(--ivory); font-size:clamp(32px,4.8vw,54px); max-width:20ch; text-wrap:balance;}
.pagehead .lead{color:rgba(244,240,231,.8); margin-top:20px;}
.crumbs{font-size:13.5px; color:rgba(244,240,231,.5); margin-bottom:18px;}
.crumbs a{text-decoration:none;}
.crumbs a:hover{color:var(--ivory); text-decoration:underline;}

/* --- corps de texte long --- */
.prose{max-width:70ch;}
.prose p{margin-bottom:18px;}
.prose h2{margin:52px 0 4px;}
.prose h3{margin:34px 0 10px;}
.prose > .rule{margin:18px 0 26px;}
.prose ul{list-style:none; margin:18px 0;}
.prose ul li{position:relative; padding:8px 0 8px 26px; border-bottom:1px solid var(--ivory-deep);}
.prose ul li::before{content:'+'; position:absolute; left:0; top:8px; color:var(--orange-deep); font-weight:700;}
.prose ul li:last-child{border-bottom:0;}
.prose .pull{
  font-family:var(--serif); font-style:italic; font-size:clamp(21px,2.4vw,27px); line-height:1.4;
  color:var(--navy); border-left:3px solid var(--orange); padding:6px 0 6px 24px; margin:34px 0;
}
.sec--navy .prose .pull,.sec--navy-deep .prose .pull{color:var(--ivory);}
.sec--navy .prose ul li,.sec--navy-deep .prose ul li{border-bottom-color:rgba(244,240,231,.14);}
.sec--navy .prose ul li::before,.sec--navy-deep .prose ul li::before{color:var(--orange-bright);}
.prose a{color:var(--orange-deep); font-weight:600;}
.prose dl{margin:18px 0;}
.prose dt{font-weight:700; margin-top:16px;}
.prose dd{color:var(--ink-muted); margin-left:0;}

/* --- etapes numerotees (page Services) --- */
.stepslist{counter-reset:st; margin-top:40px;}
.stepitem{
  counter-increment:st; position:relative; padding:26px 0 26px 76px;
  border-top:1px solid rgba(244,240,231,.16);
}
.stepitem::before{
  content:counter(st,decimal-leading-zero); position:absolute; left:0; top:26px;
  font-family:var(--serif); font-size:30px; font-weight:700; color:var(--orange); line-height:1;
}
.stepitem h3{color:var(--ivory); margin-bottom:8px;}
.stepitem p{color:rgba(244,240,231,.78); max-width:62ch;}
@media(max-width:620px){ .stepitem{padding-left:56px;} .stepitem::before{font-size:24px;} }

/* --- blog --- */
.postgrid{display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:clamp(20px,2.5vw,30px); margin-top:46px;}
.post{
  background:var(--paper); border:1px solid var(--ivory-deep); border-radius:14px;
  overflow:hidden; display:flex; flex-direction:column; text-decoration:none;
  transition:transform .2s ease, box-shadow .2s ease;
}
.post:hover{transform:translateY(-3px); box-shadow:0 14px 34px rgba(22,36,61,.1);}
.post img{width:100%; aspect-ratio:3/2; object-fit:cover;}
.post .in{padding:24px 24px 26px; display:flex; flex-direction:column; flex:1;}
.post .meta{font-size:12.5px; letter-spacing:1.2px; text-transform:uppercase; color:var(--orange-deep); font-weight:700; margin-bottom:10px;}
.post h3{margin-bottom:9px; font-size:21px;}
.post p{font-size:15.5px; color:var(--ink-muted); flex:1;}
.post .more{font-size:14.5px; font-weight:700; color:var(--orange-deep); margin-top:16px;}
.post .more::after{content:'\2192'; margin-left:6px; display:inline-block; transition:transform .2s ease;}
.post:hover .more::after{transform:translateX(4px);}
.empty{
  border:1px dashed var(--ink-faint); border-radius:14px; padding:clamp(34px,5vw,56px);
  text-align:center; color:var(--ink-muted); margin-top:40px;
}
.empty h3{margin-bottom:10px;}
.empty p{margin-inline:auto; max-width:52ch;}

/* --- article --- */
.article{max-width:none;}
.article-head{max-width:74ch;}
.article-meta{font-size:14px; color:var(--ink-faint); margin-top:18px;}
.article figure{margin:34px 0;}
.article figure img{width:100%; border-radius:12px;}
.article figcaption{font-size:13.5px; color:var(--ink-faint); margin-top:10px; font-style:italic;}

/* --- formulaire de contact --- */
.form{display:grid; gap:16px; max-width:520px; margin-top:34px;}
.form .duo{display:grid; grid-template-columns:1fr 1fr; gap:16px;}
@media(max-width:520px){ .form .duo{grid-template-columns:1fr;} }
.form label{font-size:12.5px; font-weight:700; letter-spacing:1.1px; text-transform:uppercase; color:var(--ink-faint); display:block; margin-bottom:6px;}
.form input,.form textarea,.form select{
  width:100%; min-height:52px; padding:13px 15px; border-radius:8px;
  border:1px solid var(--ivory-deep); background:#fff; color:var(--ink);
  font-family:var(--sans); font-size:16px;
}
.form textarea{min-height:150px; resize:vertical;}
.form input:focus,.form textarea:focus,.form select:focus{outline:2px solid var(--orange); outline-offset:1px;}
.form .consent{display:flex; gap:11px; align-items:flex-start; font-size:14.5px; color:var(--ink-muted); text-transform:none; letter-spacing:0; font-weight:400; line-height:1.45;}
.form .consent input{width:20px; height:20px; min-height:0; flex:0 0 auto; margin-top:2px; accent-color:var(--orange);}
.form .btn{width:100%;}

/* --- tableaux de donnees (mentions, confidentialite) --- */
.dtable{width:100%; border-collapse:collapse; margin:20px 0; font-size:15.5px;}
.dtable th,.dtable td{text-align:left; padding:12px 12px; border-bottom:1px solid var(--ivory-deep); vertical-align:top;}
.dtable th{font-size:12px; letter-spacing:1.1px; text-transform:uppercase; color:var(--ink-faint); font-weight:700;}
.dtable td:first-child{font-weight:600; width:32%;}

/* --- encadre d'avertissement --- */
.callout{
  background:var(--ivory); border-left:3px solid var(--orange); border-radius:0 10px 10px 0;
  padding:20px 22px; margin:26px 0; font-size:15.5px; color:var(--ink-muted);
}
.callout strong{color:var(--ink);}

/* --- 404 --- */
.err{text-align:center; padding:clamp(80px,12vw,160px) 0;}
.err .code{font-family:var(--serif); font-size:clamp(80px,14vw,160px); font-weight:700; color:var(--orange); line-height:.9;}
.err h1{margin:18px 0 14px;}
.err p{margin-inline:auto;}
.err .btns{justify-content:center;}

/* --- lien d'evitement, accessibilite --- */
.skip{
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--orange); color:var(--navy); padding:12px 18px; font-weight:700; border-radius:0 0 8px 0;
}
.skip:focus{left:0;}

/* bande de metriques a 3 blocs (pages interieures) */
.proof-grid--3{grid-template-columns:repeat(3,1fr);}
.proof-grid--3 .metric:nth-child(-n+2),
.proof-grid--3 .metric:nth-child(n+3){grid-column:span 1;}
@media(max-width:940px){
  .proof-grid--3{grid-template-columns:repeat(2,1fr);}
  .proof-grid--3 .metric:last-child{grid-column:span 2;}
}
@media(max-width:620px){
  .proof-grid--3{grid-template-columns:1fr;}
  .proof-grid--3 .metric:last-child{grid-column:span 1;}
}

/* lecteur video insere dans la carte, a la place de la vignette */
.vplayer{position:relative; width:100%; aspect-ratio:3/2; background:#000; line-height:0;}
.vplayer iframe{position:absolute; inset:0; width:100%; height:100%; border:0;}
.vplayer--vertical{aspect-ratio:3/2;}   /* le format vertical est mis en boite par YouTube */
.vplayer video{position:absolute; inset:0; width:100%; height:100%; object-fit:contain; background:#000;}

/* ---------- bandeau de consentement ---------- */
.cbar{
  position:fixed; left:0; right:0; bottom:0; z-index:120;
  background:var(--navy-deep); color:var(--ivory);
  border-top:3px solid var(--orange);
  padding:20px clamp(20px,5vw,48px);
  box-shadow:0 -10px 40px rgba(0,0,0,.35);
  display:none;
}
.cbar.on{display:block;}
.cbar-in{
  max-width:1180px; margin:0 auto;
  display:flex; align-items:center; gap:clamp(16px,3vw,40px); flex-wrap:wrap;
}
.cbar p{
  flex:1 1 380px; margin:0; font-size:15px; line-height:1.5;
  color:rgba(244,240,231,.82); max-width:70ch;
}
.cbar a{color:var(--orange-bright); text-decoration:underline;}
.cbar-btns{display:flex; gap:12px; flex:0 0 auto;}
.cbar .btn{min-height:46px; padding:12px 22px; font-size:15px;}
@media(max-width:620px){
  .cbar{padding:18px 20px;}
  .cbar-btns{width:100%;}
  .cbar .btn{flex:1;}
}

/* ---------- parallaxe sur les photos ----------
   Le mouvement est pilote en JavaScript, qui ecrit directement
   object-position ou transform sur chaque image. Ce bloc ne sert
   qu'au cadrage de depart, quand le script n'a pas encore tourne
   ou qu'il est desactive. Deux mecaniques :
   - les photos de section pannent dans leur propre debordement,
     il y a 150 a 190 px de matiere en reserve ;
   - la photo de la une glisse dans son cadre, parce qu'elle
     deborde trop peu pour que le pan se voie.                       */

.split img{ object-position: 50% 35%; }
.post img{ object-position: 50% 42%; }
.hero-fig img{ will-change: transform; }

@media (prefers-reduced-motion: reduce){
  .split img{ object-position: 50% 35% !important; }
  .post img{ object-position: 50% 42% !important; }
  .hero-fig img{ transform: none !important; }
}

/* les vignettes video ne bougent pas : ce sont des cibles a cliquer */
.vthumb img{object-position:center center !important;}


/* ---------- apparition au defilement ----------
   Deux effets, en CSS pur, declenches par l'ajout de la classe "in" :

   .mask   un bloc a debordement cache. Le texte est pose 103 % plus bas
           et remonte a sa place. C'est l'effet de rideau : la ligne
           semble sortir de derriere un bord invisible.
   .rv     une remontee de 22 px avec fondu, pour tout le reste.

   Le decalage entre elements d'une meme section vient de --i, que le
   script pose au chargement. Rien n'est cache tant que la classe "js"
   n'est pas sur <html> : sans JavaScript, la page reste lisible.      */

.rv{
  transition: opacity var(--base) var(--eo), transform var(--base) var(--eo);
  transition-delay: calc(var(--i,0) * var(--stag));
}
.js .rv{ opacity:0; transform:translateY(22px); }
.rv.in{ opacity:1; transform:none; }

.mask{
  overflow:hidden; display:block;
  padding-bottom:.12em; margin-bottom:-.12em;   /* ne pas rogner les jambages */
}
.mask > span{
  display:block;
  transition: transform var(--slow) var(--eo);
  transition-delay: calc(var(--i,0) * 90ms);
}
.js .mask > span{ transform:translateY(103%); }
.mask.in > span{ transform:none; }

@media (prefers-reduced-motion: reduce){
  .js .rv, .js .mask > span{ opacity:1 !important; transform:none !important; }
}