
.duo{position:relative;overflow:hidden;margin:0;isolation:isolate;}
.duo img{width:100%;height:100%;object-fit:cover;display:block;
  filter:grayscale(1) contrast(1.32) brightness(.92);}
.duo::before{content:'';position:absolute;inset:0;background:#0E3A79;mix-blend-mode:multiply;}
.duo::after{content:'';position:absolute;inset:0;background:#DDBA2A;mix-blend-mode:screen;opacity:.18;}
/* Grain : masque la montée en taille d'une photo de 320 px de large. */
.duo .grain,.grain{position:absolute;inset:0;pointer-events:none;opacity:.16;
  background-image:radial-gradient(rgba(255,255,255,.6) .5px,transparent .5px);
  background-size:3px 3px;mix-blend-mode:overlay;}
:root{--page:#FBFBF9;--alt:#F1F3F7;--fg:#14202E;--fg2:#5A6675;--fg3:#8A94A1;
  --line:#E4E7EB;--line2:#C4CBD4;--acc:#014E75;--acc2:#B89416;--band:#0E3A79;--band-fg:#fff;--sp:0;}
.nav{background:rgba(251,251,249,.92);backdrop-filter:blur(14px);}
.cd__in{max-width:1180px;margin:0 auto;padding:0 28px;}

/* ---- ouverture : les anneaux de « Jour » ---- */
.cd__hero{position:relative;overflow:hidden;padding:110px 0 104px;}
.cd__ring{position:absolute;top:50%;right:-13%;width:min(680px,84vw);transform:translateY(-50%);
  pointer-events:none;opacity:.9;}
.cd__ring svg{width:100%;height:auto;}
.cd__arc{transform-origin:center;animation:cdspin 30s linear infinite;}
.cd__arc2{transform-origin:center;animation:cdspin2 22s linear infinite;}
@keyframes cdspin{to{transform:rotate(360deg);}}
@keyframes cdspin2{to{transform:rotate(-360deg);}}
@media(prefers-reduced-motion:reduce){.cd__arc,.cd__arc2{animation:none;}}
.cd__hero .cd__in{position:relative;z-index:1;}
.cd__hero h1{font-weight:800;font-size:clamp(2.3rem,6.4vw,4.6rem);line-height:1.05;
  letter-spacing:-.038em;max-width:16ch;color:var(--navy-800);}
.cd__phrase{margin-top:26px;font-size:1.14rem;line-height:1.56;max-width:54ch;color:var(--fg2);}
.cd__acts{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px;}

/* ---- chapitre épinglé : le cadran pilote la piste ----
   Sans .js, l'épinglage ne s'active pas et la piste redevient une grille :
   les quatre interventions restent lisibles sans aucune animation. */
.cd__pin{height:auto;background:var(--navy-800);color:#fff;padding:80px 0;}
.js .cd__pin{height:340vh;padding:0;}
.cd__sticky{max-width:1180px;margin:0 auto;padding:0 28px;}
.js .cd__sticky{position:sticky;top:0;height:100svh;display:flex;align-items:center;overflow:hidden;}
.cd__stage{display:grid;grid-template-columns:300px minmax(0,1fr);gap:64px;align-items:center;width:100%;}
.cd__dial{display:none;margin:0;position:relative;}
.js .cd__dial{display:block;}
.cd__dial svg{width:100%;height:auto;}
.cd__gauge{stroke-dashoffset:calc(100 - var(--dial,0) * 100);
  transition:stroke-dashoffset .12s linear;}
.cd__gauge2{stroke-dashoffset:calc(100 - var(--dial,0) * 100);
  transition:stroke-dashoffset .22s linear;}
.cd__count{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:6px;
  font-variant-numeric:tabular-nums;}
.cd__count b{font-family:var(--font-display);font-weight:800;font-size:3.2rem;letter-spacing:-.04em;
  line-height:1;}
.cd__count span{font-size:1rem;color:var(--navy-200);padding-top:14px;}
.cd__col h2{font-weight:800;font-size:clamp(1.9rem,4.2vw,2.9rem);line-height:1.06;letter-spacing:-.032em;}
.cd__col .cd__sub{margin-top:16px;color:var(--navy-200);max-width:60ch;}
/* La fenêtre de découpe est bornée à la colonne de droite : une carte qui défile
   ne peut donc jamais passer par-dessus le cadran. Un léger fondu marque le bord. */
.cd__vp{margin-top:38px;}
.js .cd__vp{overflow:hidden;
  -webkit-mask-image:linear-gradient(to right,transparent 0,#000 64px);
  mask-image:linear-gradient(to right,transparent 0,#000 64px);}
.cd__track{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;}
.js .cd__track{display:flex;gap:22px;will-change:transform;
  transform:translate3d(calc(var(--fx,0) * -1px),0,0);}
.cd__st{flex:0 0 min(400px,74vw);border:1px solid rgba(255,255,255,.2);border-radius:18px;
  padding:28px 26px;background:rgba(255,255,255,.05);}
.cd__st b{display:block;font-family:var(--font-display);font-weight:700;
  font-size:1.32rem;letter-spacing:-.024em;}
.cd__st p{margin-top:10px;color:var(--navy-200);}
.cd__st a{display:inline-block;margin-top:18px;font-family:var(--font-display);font-weight:600;
  font-size:.93rem;color:var(--gold-300);text-decoration:none;border-bottom:1.5px solid currentColor;}

/* ---- suite du site, dans le registre clair de « Jour » ---- */
.cd__s{padding:94px 0;border-top:1px solid var(--line);}
.cd__s--alt{background:var(--alt);}
.cd__s h2{font-weight:800;font-size:clamp(1.9rem,4.2vw,2.9rem);line-height:1.06;letter-spacing:-.032em;
  color:var(--navy-800);}
.cd__sub{margin-top:16px;color:var(--fg2);max-width:70ch;}
.cd__forms{margin-top:38px;border-top:1px solid var(--line);}
.cd__f{display:grid;grid-template-columns:minmax(0,1fr) 150px 170px;gap:18px;align-items:baseline;
  padding:18px 0;border-bottom:1px solid var(--line);text-decoration:none;
  transition:transform .26s var(--ease);}
.cd__f:hover{transform:translateX(10px);}
.cd__f b{font-family:var(--font-display);font-weight:600;font-size:1.05rem;color:var(--navy-800);}
.cd__f span{font-size:.88rem;color:var(--fg3);font-variant-numeric:tabular-nums;}
.cd__f em{font-style:normal;font-weight:600;font-size:.92rem;color:var(--gold-700);text-align:right;
  font-variant-numeric:tabular-nums;}
.cd__photo{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:52px;align-items:center;}
.cd__photo .duo{border-radius:20px;aspect-ratio:320/212;max-width:520px;}
.cd__photo .btn{margin-top:26px;}
.cd__split{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:52px;align-items:center;}
.cd__split svg{width:100%;height:auto;}
.cd__dep{margin-top:16px;font-family:var(--font-display);font-weight:700;color:var(--navy-700);}

@media(max-width:1000px){.cd__stage{grid-template-columns:200px minmax(0,1fr);gap:40px;}
  .cd__count b{font-size:2.4rem;}}
@media(max-width:820px){
  /* Sur petit écran on abandonne l'épinglage : piste tactile, cadran retiré. */
  .js .cd__pin{height:auto;padding:72px 0;}
  .js .cd__sticky{position:static;height:auto;display:block;overflow:visible;}
  .cd__stage{grid-template-columns:minmax(0,1fr);gap:0;}
  .js .cd__dial{display:none;}
  .js .cd__vp{overflow:visible;-webkit-mask-image:none;mask-image:none;}
  .js .cd__track{transform:none !important;overflow-x:auto;scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;padding-bottom:10px;}
  .cd__st{scroll-snap-align:start;}
  .cd__track{grid-template-columns:minmax(0,1fr);}
  .cd__photo,.cd__split{grid-template-columns:minmax(0,1fr);gap:34px;}
  .cd__f{grid-template-columns:minmax(0,1fr);gap:5px;} .cd__f em{text-align:left;}
  .cd__ring{opacity:.35;right:-42%;}
}
