/* ==========================================================================
   Corinne Nadin — avocate, Liège · système visuel v2 « lumière et verre »
   (08-09-2026 soir, Seenly). Voir DA.md. Une seule feuille pour les huit pages.
   ========================================================================== */

:root{
  --paper:#F4F2ED; --mist:#E8ECF2; --ink:#12182A; --ink-2:#1B2338; --ink-3:#242D45;
  --text:#141821; --text-2:#4A5062; --text-3:#636A7A;
  --line:rgba(20,24,33,.12); --line-2:rgba(20,24,33,.26);
  --red:#8A2A32; --red-2:#B0424A; --steel:#4C6190;
  --gold:#A3864C; --gold-2:#C9AD72; /* or champagne (essayé puis abandonné pour les accents : le rouge est conservé) */
  --on-dark:#F4F2ED; --on-dark-2:rgba(244,242,237,.7); --on-dark-3:rgba(244,242,237,.58); --line-dark:rgba(244,242,237,.14);
  --glass:rgba(255,255,255,.52); --glass-b:rgba(255,255,255,.78); --glass-dark:rgba(255,255,255,.06); --glass-dark-b:rgba(255,255,255,.13);
  --shadow:0 20px 60px rgba(18,24,42,.08), 0 2px 6px rgba(18,24,42,.04);
  --shadow-2:0 30px 80px rgba(18,24,42,.14), 0 4px 12px rgba(18,24,42,.06);
  --shadow-dark:0 24px 70px rgba(0,0,0,.35);

  --display:"Sora","Helvetica Neue",Helvetica,Arial,sans-serif;
  --body:"Schibsted Grotesk","Helvetica Neue",Helvetica,Arial,sans-serif;
  --accent:"Newsreader","Iowan Old Style",Georgia,serif;
  --serif:var(--accent); --sans:var(--body);

  --gutter:clamp(20px,5vw,84px); --max:1440px; --gap:clamp(16px,2vw,32px);
  --s-section:clamp(88px,10vw,160px); --header-bar:72px; --header-h:72px;
  --r:24px; --r-s:14px;
  --ease:cubic-bezier(.2,.7,.2,1); --ease-out:cubic-bezier(.16,1,.3,1); --d-fast:.22s; --d:.45s; --d-slow:.8s;
}
@media (min-width:1800px){ :root{ --gutter:clamp(84px,7vw,140px); } }

/* ---------- base ---------- */
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{ margin:0; background:var(--paper); color:var(--text); font-family:var(--body); font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
*,*::before,*::after{ box-sizing:border-box; }
img,video{ display:block; max-width:100%; }
button,input,select,textarea{ font:inherit; color:inherit; }
::selection{ background:var(--red); color:#fff; }
:focus-visible{ outline:2px solid var(--red); outline-offset:3px; border-radius:6px; }
a{ color:inherit; }
p{ margin:0; }
ul,ol{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4{ margin:0; font-weight:600; font-family:var(--display); }
.cn-site{ position:relative; overflow-x:clip; min-height:100vh; isolation:isolate; }
.cn-site>main,.cn-site>footer,.cn-site>section{ position:relative; z-index:1; }
@media (max-width:1023px){ .cn-site{ padding-bottom:64px; } }
.cn-sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.cn-skip{ position:absolute; left:-9999px; top:12px; z-index:200; background:var(--ink); color:var(--paper); padding:12px 16px; font-family:var(--display); font-size:13px; text-decoration:none; border-radius:999px; }
.cn-skip:focus{ left:var(--gutter); }

/* ---------- fond vivant : halos + balance ---------- */
.cn-bg{ position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
.cn-bg__halo{ position:absolute; border-radius:50%; filter:blur(64px); will-change:transform; }
.cn-bg__halo--a{ width:72vw; height:72vw; max-width:1040px; max-height:1040px; left:-18vw; top:-22vw; background:radial-gradient(circle, rgba(88,112,160,.32), rgba(88,112,160,0) 68%); animation:cn-breathe 16s ease-in-out infinite alternate; }
.cn-bg__halo--b{ width:58vw; height:58vw; max-width:880px; max-height:880px; right:-14vw; top:36vh; background:radial-gradient(circle, rgba(150,70,70,.22), rgba(150,70,70,0) 68%); animation:cn-breathe 20s ease-in-out 3s infinite alternate; }
.cn-bg__halo--c{ width:52vw; height:52vw; max-width:760px; max-height:760px; left:22vw; bottom:-18vw; background:radial-gradient(circle, rgba(88,112,160,.2), rgba(88,112,160,0) 68%); animation:cn-breathe 18s ease-in-out 6s infinite alternate; }
@keyframes cn-breathe{ from{ transform:scale(1) translate3d(0,0,0); } to{ transform:scale(1.12) translate3d(2vw,-1.5vw,0); } }
.cn-balance{ position:absolute; right:-9vw; top:14vh; width:min(54vw,720px); color:var(--text); opacity:.085; }
.cn-balance svg{ width:100%; height:auto; display:block; }
.cn-balance__beam{ transform-box:fill-box; transform-origin:50% 4%; animation:cn-sway 12s ease-in-out infinite; }
.cn-dark>.cn-balance--dark,.cn-band>.cn-balance--dark,.cn-footer>.cn-balance--dark,.cn-balance--dark{ position:absolute; right:-4vw; bottom:-4vh; width:min(46vw,600px); color:var(--on-dark); opacity:.08; pointer-events:none; z-index:0; }
.cn-dark>.cn-wrap,.cn-band>.cn-wrap,.cn-footer>.cn-wrap{ z-index:1; }
.cn-photos{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--gap); }
.cn-photos>.cn-span2{ grid-column:1/-1; }
@media (max-width:639px){ .cn-photos{ grid-template-columns:1fr; } }

/* ---------- défilement de fiches photo (slider à scroll-snap, avance douce) ---------- */
.cn-slider{ position:relative; }
.cn-slider__track{ display:flex; gap:var(--gap); overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; -ms-overflow-style:none; -webkit-overflow-scrolling:touch; padding:8px 0 12px; margin:-8px 0 -12px; scroll-behavior:smooth; }
.cn-slider__track::-webkit-scrollbar{ display:none; }
.cn-slider__track:focus-visible{ outline:2px solid var(--on-dark); outline-offset:4px; border-radius:var(--r); }
.cn-slider__track>*{ flex:0 0 var(--slide,min(62%,340px)); scroll-snap-align:start; margin:0; }
.cn-slider--bleed .cn-slider__track{ margin-right:calc(-1 * var(--gutter)); padding-right:var(--gutter); }
.cn-slider__nav{ display:flex; align-items:center; gap:8px; margin-top:18px; }
.cn-slider__btn{ width:44px; height:44px; border-radius:999px; border:1px solid var(--glass-dark-b); background:var(--glass-dark); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); color:var(--on-dark); cursor:pointer; display:inline-flex; align-items:center; justify-content:center; font-family:var(--body); font-size:18px; line-height:1; transition:background var(--d-fast) var(--ease), color var(--d-fast) var(--ease), transform var(--d-fast) var(--ease); }
.cn-slider__btn:hover{ background:var(--on-dark); color:var(--ink); transform:translateY(-2px); }
.cn-slider__dots{ display:flex; gap:4px; align-items:center; margin-left:auto; }
/* largeur fixe + transform (pas d'animation de layout) : le point inactif est le même trait réduit à 30 % */
.cn-slider__dot{ width:20px; height:6px; border-radius:3px; background:rgba(244,242,237,.32); transform:scaleX(.3); transform-origin:center; transition:transform var(--d) var(--ease), background var(--d-fast); }
.cn-slider__dot.is-active{ transform:scaleX(1); background:var(--on-dark); }
.cn-slider--light .cn-slider__btn{ background:var(--glass); border-color:var(--glass-b); color:var(--text); box-shadow:var(--shadow); }
.cn-slider--light .cn-slider__btn:hover{ background:var(--ink); color:var(--paper); }
.cn-slider--light .cn-slider__dot{ background:rgba(20,24,33,.18); } .cn-slider--light .cn-slider__dot.is-active{ background:var(--ink); }
.cn-slider--light .cn-slider__track:focus-visible{ outline-color:var(--red); }
@media (max-width:1023px){ .cn-slider__track>*{ --slide:min(72%,360px); } }
@media (max-width:639px){ .cn-slider__track>*{ --slide:78%; } }

/* ---------- fiches empilées au scroll (chapitres) : chaque fiche se colle en haut, la suivante remonte par-dessus ---------- */
.cn-stack-cards{ position:relative; }
.cn-stack-card{ position:sticky; top:calc(var(--header-h) + 20px + var(--i,0) * 10px); background:#FBFAF7; border:1px solid rgba(255,255,255,.85); border-radius:var(--r); box-shadow:var(--shadow-2), inset 0 1px 0 rgba(255,255,255,.9); padding:clamp(24px,3vw,40px); transform:scale(calc(1 - var(--p,0) * .045)) translateY(calc(var(--p,0) * -6px)); transform-origin:50% 0; will-change:transform; }
.cn-stack-card+.cn-stack-card{ margin-top:clamp(28px,3.5vw,48px); }
.cn-stack-cards.is-static .cn-stack-card{ position:relative; top:auto; transform:none; }

/* ---------- carrousel de fiches au scroll (chapitres) ---------- */
html.cn-snap{ scroll-snap-type:y proximity; }
.cn-deck{ position:relative; }
.cn-deck__steps{ position:absolute; inset:0 0 auto 0; pointer-events:none; }
.cn-deck__step{ scroll-snap-align:start; scroll-margin-top:92px; }
.cn-deck__stage{ position:sticky; top:92px; }
.cn-deck__card{ position:absolute; top:0; left:0; right:0; background:#FBFAF7; border:1px solid rgba(255,255,255,.85); border-radius:var(--r); box-shadow:var(--shadow-2), inset 0 1px 0 rgba(255,255,255,.9); padding:clamp(22px,2.1vw,28px) clamp(24px,2.6vw,36px); display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); column-gap:clamp(20px,2.6vw,40px); align-content:start; opacity:0; pointer-events:none; }
.cn-deck__card.is-active{ pointer-events:auto; }
.cn-deck__card>.cn-deck__head{ grid-column:1/-1; }
.cn-deck__card>.cn-deck__main{ margin-top:14px; }
/* Toutes les fiches ont la hauteur de la plus haute : la colonne latérale s'étire jusqu'en bas
   pour que le reliquat soit tenu par le panneau, et non laissé en blanc au pied de la fiche. */
.cn-deck__card{ grid-template-rows:auto 1fr auto; }
.cn-deck__card>.cn-deck__side{ align-self:stretch; margin-top:14px; }
.cn-deck__side>.cn-card{ height:100%; }
/* la note pratique ferme la fiche sur toute la largeur : les deux colonnes se terminent ensemble */
.cn-deck__card>.cn-deck__note{ grid-column:1/-1; margin-top:14px; padding:16px clamp(18px,2vw,26px); }
.cn-deck__card>.cn-deck__note .cn-label{ display:block; margin-bottom:6px; }
.cn-deck__card>.cn-deck__note .cn-measure{ max-width:none; }
.cn-deck__card>.cn-deck__note .cn-body{ font-size:15px; line-height:1.55; }
.cn-deck__side .cn-list--2{ columns:1; }
.cn-deck__side .cn-list li{ padding:4px 0; }
.cn-deck__card .cn-runhead{ margin-bottom:10px; }
.cn-deck__card .cn-h2{ font-size:clamp(26px,2.4vw,34px); }
.cn-deck__card .cn-stack{ --stack:14px; }
.cn-deck__card .cn-lead{ font-size:clamp(16.5px,1.3vw,18.5px); }
.cn-deck__card .cn-deck__side .cn-card{ padding:clamp(18px,1.8vw,24px); }
/* Fenêtre trop basse pour l'empilement : on resserre la fiche au lieu de renoncer au deck. */
.cn-deck.is-dense .cn-deck__card{ padding:clamp(18px,1.7vw,22px) clamp(20px,2.2vw,28px); }
.cn-deck.is-dense .cn-deck__card .cn-runhead{ margin-bottom:8px; }
.cn-deck.is-dense .cn-deck__card .cn-h2{ font-size:clamp(22px,2vw,27px); }
.cn-deck.is-dense .cn-deck__card .cn-lead{ font-size:15.5px; line-height:1.48; }
.cn-deck.is-dense .cn-deck__card .cn-body{ font-size:15px; line-height:1.55; }
.cn-deck.is-dense .cn-deck__card .cn-stack{ --stack:11px; }
.cn-deck.is-dense .cn-deck__card>.cn-deck__main,
.cn-deck.is-dense .cn-deck__card>.cn-deck__side{ margin-top:10px; }
.cn-deck.is-dense .cn-deck__side .cn-card{ padding:14px 16px; }
.cn-deck.is-dense .cn-deck__side .cn-list li{ padding:2px 0; font-size:13.5px; }
.cn-deck.is-flat .cn-deck__steps{ display:none; }
.cn-deck.is-flat .cn-deck__stage{ position:static; height:auto; }
.cn-deck.is-flat .cn-deck__card{ position:relative; opacity:1 !important; transform:none !important; pointer-events:auto; height:auto !important; grid-template-columns:1fr; grid-template-rows:none; scroll-margin-top:108px; }
.cn-deck.is-flat .cn-deck__side>.cn-card{ height:auto; }
.cn-deck.is-flat .cn-deck__side .cn-list li{ padding:8px 0; }
.cn-deck.is-flat .cn-deck__card+.cn-deck__card{ margin-top:clamp(24px,3vw,40px); }
@media (max-width:1023px){ .cn-deck__card{ grid-template-columns:1fr; } }

/* ---------- bande continue de fiches photo (défile toute seule, boucle sans coupure) ---------- */
.cn-marquee{ position:relative; overflow:hidden; --card:min(38vw,340px); --marquee-dur:48s; }
.cn-marquee--bleed{ margin-right:calc(-1 * var(--gutter)); }
.cn-marquee__track{ display:flex; gap:var(--gap); width:max-content; padding:8px 0 12px; margin:-8px 0 -12px; will-change:transform; }
.cn-marquee__track>*{ flex:0 0 var(--card); margin:0; }
.cn-marquee .cn-marquee__track{ cursor:grab; touch-action:pan-y; }
.cn-marquee.is-drag .cn-marquee__track{ cursor:grabbing; }
html.cn-js [data-marquee] .cn-marquee__track>figure{ opacity:0; transform:translateY(30px) scale(.94); clip-path:inset(16% 0 10% 0 round var(--r)); transition:opacity .7s var(--ease-out) var(--d,0s), transform .85s var(--ease-out) var(--d,0s), clip-path .9s var(--ease-out) var(--d,0s); }
html.cn-js [data-marquee].is-in .cn-marquee__track>figure{ opacity:1; transform:none; clip-path:inset(0 0 0 0 round var(--r)); }
.cn-marquee__fade{ position:absolute; inset:0 auto 0 0; width:56px; z-index:2; pointer-events:none; background:linear-gradient(90deg, var(--ink), rgba(18,24,42,0)); }
.cn-marquee--light .cn-marquee__fade{ background:linear-gradient(90deg, var(--paper), rgba(244,242,237,0)); }
.cn-marquee__caption{ margin-top:14px; font-family:var(--body); font-size:12.5px; color:var(--on-dark-3); }
@media (max-width:1023px){ .cn-marquee{ --card:min(58vw,300px); } .cn-marquee--bleed{ margin-left:calc(-1 * var(--gutter)); padding-left:var(--gutter); } .cn-marquee__fade{ display:none; } }
@media (max-width:639px){ .cn-marquee{ --card:66vw; --marquee-dur:40s; } }
@keyframes cn-sway{ 0%,100%{ transform:rotate(-1.6deg); } 50%{ transform:rotate(1.6deg); } }

/* ---------- typographie ---------- */
.cn-h1{ font-family:var(--display); font-weight:600; font-size:clamp(44px,6.4vw,96px); line-height:1.0; letter-spacing:-.035em; text-wrap:balance; }
.cn-h2{ font-family:var(--display); font-weight:600; font-size:clamp(32px,4vw,58px); line-height:1.04; letter-spacing:-.03em; text-wrap:balance; }
.cn-h3{ font-family:var(--display); font-weight:600; font-size:clamp(20px,1.8vw,26px); line-height:1.2; letter-spacing:-.02em; }
.cn-h4{ font-family:var(--display); font-weight:600; font-size:17px; line-height:1.3; letter-spacing:-.01em; }
.cn-acc{ font-family:var(--accent); font-style:italic; font-weight:400; letter-spacing:-.01em; color:var(--red); }
.cn-on-dark .cn-acc,.cn-dark .cn-acc,.cn-band .cn-acc,.cn-card--ink .cn-acc,.cn-card--dark .cn-acc,.cn-footer .cn-acc{ color:var(--red-2); }
.cn-lead{ font-size:clamp(18px,1.4vw,21px); line-height:1.5; color:var(--text-2); }
.cn-body{ font-size:16px; line-height:1.65; }
.cn-body p+p{ margin-top:1em; }
.cn-measure{ max-width:60ch; } .cn-measure--s{ max-width:46ch; }
.cn-ui{ font-family:var(--body); font-size:14px; line-height:1.55; }
.cn-ui p+p{ margin-top:.9em; }
.cn-label{ font-family:var(--display); font-size:11px; letter-spacing:.14em; text-transform:uppercase; font-weight:600; color:var(--steel); line-height:1.4; }
.cn-meta{ font-family:var(--body); font-size:12.5px; line-height:1.5; color:var(--text-3); }
.cn-num{ font-family:var(--display); font-size:12px; letter-spacing:.08em; color:var(--red); font-variant-numeric:tabular-nums; font-weight:600; }
.cn-quote{ font-family:var(--accent); font-style:italic; font-size:clamp(22px,2.1vw,32px); line-height:1.35; letter-spacing:-.005em; }
.cn-muted{ color:var(--text-2); }
.cn-serif{ font-family:var(--accent); } .cn-sans{ font-family:var(--body); } .cn-display{ font-family:var(--display); }

/* ---------- layout ---------- */
.cn-wrap{ width:min(100% - 2*var(--gutter), var(--max)); margin-inline:auto; }
.cn-grid{ display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); column-gap:var(--gap); row-gap:var(--gap); }
.cn-grid>*{ grid-column:var(--start,auto) / span var(--span,12); min-width:0; --start:auto; --span:12; }
.c1{--span:1}.c2{--span:2}.c3{--span:3}.c4{--span:4}.c5{--span:5}.c6{--span:6}.c7{--span:7}.c8{--span:8}.c9{--span:9}.c10{--span:10}.c11{--span:11}.c12{--span:12}
.o1{--start:2}.o2{--start:3}.o3{--start:4}.o4{--start:5}.o5{--start:6}.o6{--start:7}.o7{--start:8}.o8{--start:9}.o9{--start:10}
@media (max-width:1023px){
  .cn-grid{ grid-template-columns:repeat(6,minmax(0,1fr)); row-gap:clamp(28px,5vw,44px); }
  .cn-grid>*{ --start:auto; --span:6; }
  .t2{--span:2}.t3{--span:3}.t4{--span:4}
}
@media (max-width:639px){
  .cn-grid{ grid-template-columns:repeat(4,minmax(0,1fr)); }
  .cn-grid>*{ --start:auto; --span:4; }
  .m2{--span:2}
}
.cn-section{ padding-block:var(--s-section); position:relative; }
.cn-section--top{ padding-top:calc(var(--header-h) + clamp(40px,7vw,96px)); }
.cn-section--tight{ padding-block:calc(var(--s-section)*.6); }
.cn-section--flush-b{ padding-bottom:0; } .cn-section--flush-t{ padding-top:0; }
.cn-mist{ background:var(--mist); }
.cn-section--quiet{ background:var(--mist); }
.cn-dark,.cn-band{ background:var(--ink); color:var(--on-dark); position:relative; border-radius:32px; margin:clamp(24px,3.5vw,48px) clamp(12px,2vw,28px); padding-block:calc(var(--s-section)*.85); overflow:hidden; box-shadow:0 -30px 80px rgba(18,24,42,.18), 0 30px 80px rgba(18,24,42,.14); }
.cn-dark::before,.cn-band::before{ content:""; position:absolute; inset:0; pointer-events:none; background:
  radial-gradient(60% 50% at 85% 10%, rgba(176,66,74,.18), transparent 70%),
  radial-gradient(50% 45% at 10% 90%, rgba(90,112,160,.22), transparent 70%); }
.cn-dark>*,.cn-band>*{ position:relative; }
.cn-dark--flat{ border-radius:0; margin:0; box-shadow:none; }
/* une section sombre suivie d'une section claire se lit comme une grande fiche : bas arrondi aussi, et de l'air en dessous */

.cn-dark .cn-label,.cn-band .cn-label{ color:rgba(244,242,237,.55); }
.cn-dark .cn-lead,.cn-dark .cn-body,.cn-dark .cn-muted,.cn-band .cn-lead,.cn-band .cn-body{ color:var(--on-dark-2); }
.cn-dark .cn-meta,.cn-band .cn-meta{ color:var(--on-dark-3); }
.cn-on-dark{ color:var(--on-dark); }
.cn-hr{ height:1px; background:var(--line); border:0; margin:0; }
.cn-stack{ display:flex; flex-direction:column; } .cn-stack>*+*{ margin-top:var(--stack,20px); }
.cn-row{ display:flex; align-items:center; gap:clamp(14px,2vw,24px); flex-wrap:wrap; }
.cn-between{ display:flex; justify-content:space-between; align-items:flex-end; gap:24px; flex-wrap:wrap; }
.cn-bleed{ width:100vw; margin-left:calc(50% - 50vw); }

/* ---------- running head ---------- */
.cn-runhead{ display:flex; align-items:center; gap:16px; font-family:var(--display); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--steel); font-weight:600; line-height:1.4; }
.cn-runhead__line{ flex:1; height:1px; background:var(--line); display:block; }
.cn-runhead__meta{ font-variant-numeric:tabular-nums; color:var(--text-3); white-space:nowrap; font-weight:500; }
.cn-dark .cn-runhead,.cn-band .cn-runhead{ color:rgba(244,242,237,.6); } .cn-dark .cn-runhead__line{ background:var(--line-dark); } .cn-dark .cn-runhead__meta{ color:var(--on-dark-3); }
@media (max-width:639px){ .cn-runhead{ flex-wrap:nowrap; } .cn-runhead__line{ min-width:24px; } .cn-runhead__meta{ display:none; } }

/* ---------- verre : fiches, puces ---------- */
.cn-glass,.cn-card{ background:var(--glass); -webkit-backdrop-filter:blur(18px) saturate(1.25); backdrop-filter:blur(18px) saturate(1.25); border:1px solid var(--glass-b); box-shadow:var(--shadow), inset 0 1px 0 rgba(255,255,255,.85); border-radius:var(--r); }
.cn-card{ padding:clamp(22px,2.6vw,34px); position:relative; transition:transform var(--d) var(--ease), box-shadow var(--d) var(--ease); }
.cn-card--tight{ padding:18px 20px; }
.cn-card--lift:hover{ transform:translateY(-4px); box-shadow:var(--shadow-2), inset 0 1px 0 rgba(255,255,255,.85); z-index:4; }
.cn-card--dark,.cn-glass--dark{ background:var(--glass-dark); border-color:var(--glass-dark-b); box-shadow:var(--shadow-dark), inset 0 1px 0 rgba(255,255,255,.08); color:var(--on-dark); }
.cn-card--dark .cn-label{ color:rgba(244,242,237,.55); }
.cn-card--accent{ background:linear-gradient(135deg, rgba(138,42,50,.96), rgba(176,66,74,.92)); border-color:rgba(255,255,255,.18); color:#fff; box-shadow:0 24px 60px rgba(138,42,50,.28); }
.cn-card--accent .cn-label{ color:rgba(255,255,255,.7); }
.cn-card--ink{ background:var(--ink); border-color:rgba(255,255,255,.1); color:var(--on-dark); box-shadow:var(--shadow-2); }
.cn-card--ink .cn-label{ color:rgba(244,242,237,.55); }
.cn-card--ink .cn-body,.cn-card--ink .cn-muted,.cn-card--ink .cn-lead,.cn-card--dark .cn-body,.cn-card--dark .cn-muted,.cn-card--dark .cn-lead{ color:var(--on-dark-2); }
.cn-card--ink .cn-meta,.cn-card--dark .cn-meta{ color:var(--on-dark-3); }
.cn-chip{ display:inline-flex; align-items:center; gap:8px; padding:8px 14px; border-radius:999px; background:var(--glass); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); border:1px solid var(--glass-b); box-shadow:0 8px 24px rgba(18,24,42,.08); font-family:var(--display); font-size:11px; letter-spacing:.12em; text-transform:uppercase; font-weight:600; color:var(--text); white-space:nowrap; line-height:1; }
.cn-chip::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--red); flex:none; }
.cn-chip--dark{ background:var(--glass-dark); border-color:var(--glass-dark-b); color:var(--on-dark); box-shadow:none; }
.cn-chip--dark::before{ background:var(--red-2); }
.cn-chip--plain::before{ display:none; }
.cn-chip--float{ animation:cn-float 7s ease-in-out infinite; }
.cn-chip--float:nth-of-type(2){ animation-delay:-2.3s; animation-duration:8s; }
.cn-chip--float:nth-of-type(3){ animation-delay:-4.1s; animation-duration:9s; }
@keyframes cn-float{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-6px); } }

/* ---------- photos en fiches ---------- */
.cn-photo,.cn-figure{ margin:0; position:relative; overflow:hidden; background:var(--mist); border-radius:var(--r); border:1px solid rgba(255,255,255,.7); box-shadow:var(--shadow); transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(var(--ty,0)); transition:transform var(--d) var(--ease), box-shadow var(--d) var(--ease); transform-style:preserve-3d; }
.cn-photo>image-slot,.cn-photo>video,.cn-photo>img,.cn-figure>image-slot,.cn-figure>video,.cn-figure>img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform 1.2s var(--ease-out); }
.cn-photo:hover,.cn-figure:hover{ box-shadow:var(--shadow-2); --ty:-4px; }
.cn-photo:hover>image-slot,.cn-figure:hover>image-slot{ transform:scale(1.03); }
.cn-photo--4x5,.cn-figure--4x5{ aspect-ratio:4/5; } .cn-photo--3x4,.cn-figure--3x4{ aspect-ratio:3/4; } .cn-photo--1x1,.cn-figure--1x1{ aspect-ratio:1/1; }
.cn-photo--16x9,.cn-figure--16x9{ aspect-ratio:16/9; } .cn-photo--21x9,.cn-figure--21x9{ aspect-ratio:21/9; } .cn-photo--3x2,.cn-figure--3x2{ aspect-ratio:3/2; } .cn-photo--4x3,.cn-figure--4x3{ aspect-ratio:4/3; } .cn-photo--2x3,.cn-figure--2x3{ aspect-ratio:2/3; }
.cn-photo--film>video,.cn-figure--film>video{ z-index:2; }
.cn-photo__tag,.cn-photo__meta{ position:absolute; z-index:3; bottom:14px; display:inline-flex; align-items:center; gap:8px; padding:9px 14px; border-radius:999px; background:rgba(18,24,42,.55); -webkit-backdrop-filter:blur(14px) saturate(1.2); backdrop-filter:blur(14px) saturate(1.2); border:1px solid rgba(255,255,255,.22); color:#fff; font-family:var(--display); font-size:11px; letter-spacing:.1em; text-transform:uppercase; font-weight:600; line-height:1; max-width:calc(100% - 28px); white-space:normal; overflow-wrap:anywhere; line-height:1.35; pointer-events:none; }
.cn-photo__tag{ left:14px; } .cn-photo__meta{ right:14px; }
.cn-photo__tag::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--red-2); flex:none; }
.cn-photo__meta{ font-weight:500; letter-spacing:.06em; text-transform:none; font-size:12px; }
.cn-photo__scrim{ position:absolute; inset:0; z-index:2; pointer-events:none; background:linear-gradient(180deg, rgba(18,24,42,0) 62%, rgba(18,24,42,.28) 100%); }
image-slot::part(image){ object-position:var(--pos,50% 50%); transition:object-position .9s var(--ease); }
image-slot::part(empty){ font-family:var(--body); }
image-slot::part(ring){ display:none; }
.cn-cap{ display:flex; justify-content:space-between; gap:16px; padding:12px 4px 0; font-family:var(--body); font-size:12.5px; line-height:1.5; color:var(--text-3); }
.cn-cap span+span{ white-space:nowrap; }
@media (max-width:767px){ .cn-photo--21x9,.cn-figure--21x9{ aspect-ratio:4/3; } .cn-photo__meta{ display:none; } }

/* ---------- boutons & liens ---------- */
.cn-btn{ display:inline-flex; align-items:center; gap:12px; font-family:var(--display); font-size:12.5px; letter-spacing:.1em; text-transform:uppercase; font-weight:600; line-height:1; color:var(--paper); background:var(--ink); border:1px solid var(--ink); padding:17px 26px; text-decoration:none; cursor:pointer; border-radius:999px; white-space:nowrap; box-shadow:0 10px 30px rgba(18,24,42,.18); transition:background var(--d-fast) var(--ease), border-color var(--d-fast) var(--ease), color var(--d-fast) var(--ease), transform var(--d-fast) var(--ease), box-shadow var(--d-fast) var(--ease); }
.cn-btn:hover{ background:var(--red); border-color:var(--red); color:#fff; transform:translateY(-2px); box-shadow:0 14px 34px rgba(138,42,50,.28); }
.cn-btn--ghost{ background:transparent; color:var(--text); box-shadow:none; border-color:var(--line-2); }
.cn-btn--ghost:hover{ background:var(--ink); border-color:var(--ink); color:var(--paper); }
.cn-btn--glass{ background:var(--glass); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); color:var(--text); border-color:var(--glass-b); box-shadow:0 10px 30px rgba(18,24,42,.08); }
.cn-btn--glass:hover{ background:var(--ink); border-color:var(--ink); color:var(--paper); }
.cn-btn--light{ background:var(--on-dark); color:var(--ink); border-color:var(--on-dark); box-shadow:0 10px 30px rgba(0,0,0,.25); }
.cn-btn--light:hover{ background:var(--red-2); border-color:var(--red-2); color:#fff; }
.cn-btn--red{ background:var(--red); border-color:var(--red); color:#fff; box-shadow:0 12px 30px rgba(138,42,50,.28); }
.cn-btn--red:hover{ background:var(--red-2); border-color:var(--red-2); }
.cn-btn--sm{ padding:12px 18px; font-size:11.5px; }
.cn-btn .cn-arrow{ transition:transform var(--d) var(--ease); }
.cn-btn:hover .cn-arrow{ transform:translateX(4px); }
.cn-arrow{ font-family:var(--body); display:inline-block; }
.cn-link{ color:inherit; text-decoration:none; padding-bottom:2px; background-image:linear-gradient(var(--red),var(--red)), linear-gradient(var(--line-2),var(--line-2)); background-size:0 1px, 100% 1px; background-repeat:no-repeat; background-position:0 100%, 0 100%; transition:background-size var(--d) var(--ease), color var(--d-fast) var(--ease); }
.cn-link:hover,.cn-link:focus-visible{ background-size:100% 1px, 100% 1px; color:var(--red); }
.cn-link--arrow{ display:inline-flex; align-items:baseline; gap:10px; font-family:var(--display); font-size:14px; font-weight:600; padding-block:5px 4px; }
.cn-link--arrow .cn-arrow{ transition:transform var(--d) var(--ease); }
.cn-link--arrow:hover .cn-arrow{ transform:translateX(4px); }
.cn-on-dark .cn-link,.cn-dark .cn-link,.cn-band .cn-link{ background-image:linear-gradient(var(--red-2),var(--red-2)), linear-gradient(var(--line-dark),var(--line-dark)); }
.cn-on-dark .cn-link:hover,.cn-dark .cn-link:hover,.cn-band .cn-link:hover,.cn-dark .cn-link:focus-visible{ color:var(--on-dark); }
.cn-dark :focus-visible,.cn-band :focus-visible,.cn-footer :focus-visible,.cn-on-dark :focus-visible{ outline-color:var(--on-dark); }

/* ---------- header ---------- */
.cn-header{ position:fixed; inset:0 0 auto 0; z-index:100; height:var(--header-h); padding-top:env(safe-area-inset-top, 0px); box-sizing:border-box; display:flex; align-items:center; background:rgba(244,242,237,0); -webkit-backdrop-filter:blur(0); backdrop-filter:blur(0); box-shadow:0 1px 0 rgba(20,24,33,0); transition:background var(--d) var(--ease), box-shadow var(--d) var(--ease), backdrop-filter var(--d) var(--ease); }
html.cn-scrolled .cn-header{ background:rgba(244,242,237,.72); -webkit-backdrop-filter:blur(18px) saturate(1.3); backdrop-filter:blur(18px) saturate(1.3); box-shadow:0 1px 0 var(--line); }
html.cn-menu-open .cn-header{ background:rgba(244,242,237,.9); -webkit-backdrop-filter:blur(18px); backdrop-filter:blur(18px); box-shadow:0 1px 0 var(--line); }
.cn-header__in{ width:min(100% - 2*var(--gutter), var(--max)); margin-inline:auto; display:flex; align-items:center; justify-content:space-between; gap:24px; }
.cn-wordmark{ display:flex; align-items:center; gap:12px; text-decoration:none; color:var(--text); }
.cn-wordmark__name{ font-family:var(--display); font-size:18px; font-weight:600; letter-spacing:-.02em; line-height:1; white-space:nowrap; }
.cn-wordmark__role{ font-family:var(--display); font-size:9.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--steel); font-weight:600; white-space:nowrap; padding:6px 10px; border:1px solid var(--line); border-radius:999px; line-height:1; }
.cn-header__right{ display:flex; align-items:center; gap:clamp(16px,2.2vw,36px); }
.cn-nav{ display:flex; align-items:center; gap:clamp(4px,1vw,10px); }
.cn-nav a{ font-family:var(--display); font-size:13px; font-weight:500; color:var(--text-2); text-decoration:none; padding:9px 12px; border-radius:999px; white-space:nowrap; transition:color var(--d-fast), background var(--d-fast); }
.cn-nav a:hover{ color:var(--text); background:rgba(20,24,33,.05); }
.cn-nav a[aria-current="page"]{ color:var(--text); background:var(--glass); box-shadow:inset 0 0 0 1px var(--glass-b); }
.cn-lang{ display:flex; align-items:center; gap:2px; font-family:var(--display); font-size:11px; letter-spacing:.1em; }
.cn-lang button{ background:none; border:0; padding:11px 6px; cursor:pointer; color:var(--text-3); font-weight:600; letter-spacing:inherit; font-size:inherit; border-radius:999px; transition:color var(--d-fast); }
.cn-lang button:hover{ color:var(--text); }
.cn-lang button[aria-pressed="true"]{ color:var(--red); }
.cn-lang__sep{ color:var(--line-2); }
.cn-menu-btn{ display:none; background:var(--glass); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); border:1px solid var(--glass-b); padding:11px 16px; cursor:pointer; font-family:var(--display); font-size:12px; letter-spacing:.12em; text-transform:uppercase; font-weight:600; color:var(--text); align-items:center; gap:10px; border-radius:999px; }
.cn-menu-btn__ic{ width:16px; height:9px; position:relative; display:block; }
.cn-menu-btn__ic::before,.cn-menu-btn__ic::after{ content:""; position:absolute; left:0; right:0; height:1.5px; background:var(--text); border-radius:2px; transition:transform var(--d) var(--ease); }
.cn-menu-btn__ic::before{ top:0; } .cn-menu-btn__ic::after{ bottom:0; }
html.cn-menu-open .cn-menu-btn__ic::before{ transform:translateY(3.75px) rotate(45deg); }
html.cn-menu-open .cn-menu-btn__ic::after{ transform:translateY(-3.75px) rotate(-45deg); }
.cn-menu-btn__label--close{ display:none; }
html.cn-menu-open .cn-menu-btn__label--open{ display:none; }
html.cn-menu-open .cn-menu-btn__label--close{ display:inline; }
@media (max-width:1180px){ /* entre 1024 et 1180 px la barre est trop pleine : on resserre */
  .cn-wordmark__role{ display:none; }
  .cn-nav a{ padding:9px 8px; font-size:12.5px; }
  .cn-header__right{ gap:12px; }
  .cn-header .cn-lang button{ padding:8px 4px; }
  .cn-header__cta{ padding:12px 14px; font-size:11px; }
}
@media (max-width:1023px){
  .cn-nav,.cn-header__cta,.cn-header .cn-lang{ display:none; }
  .cn-menu-btn{ display:inline-flex; }
  .cn-wordmark__role{ display:none; }
  .cn-wordmark__name{ font-size:17px; }
}

/* menu plein écran (≤1023) */
.cn-menu{ position:fixed; inset:0; z-index:90; background:rgba(244,242,237,.96); -webkit-backdrop-filter:blur(24px) saturate(1.3); backdrop-filter:blur(24px) saturate(1.3); display:none; flex-direction:column; padding:calc(var(--header-h) + 20px) var(--gutter) 32px; overflow:auto; overscroll-behavior:contain; }
html.cn-menu-open .cn-menu{ display:flex; }
html.cn-menu-open{ overflow:hidden; }
html.cn-menu-open body{ position:fixed; width:100%; top:var(--lock-top,0); overflow:hidden; }
.cn-menu__list{ display:flex; flex-direction:column; gap:8px; }
.cn-menu__list a{ display:flex; align-items:center; gap:16px; padding:16px 18px; border-radius:18px; background:var(--glass); border:1px solid var(--glass-b); box-shadow:var(--shadow); text-decoration:none; color:var(--text); font-family:var(--display); font-size:clamp(22px,6vw,30px); font-weight:600; letter-spacing:-.02em; line-height:1.1; opacity:0; transform:translateY(10px); }
/* L'apparition entrée par entrée est pilotée par revealMenu() dans nadin.js, avec son filet
   de sécurité : une animation CSS ici écrasait les styles en ligne du script (une animation
   l'emporte sur le style en ligne pour les propriétés qu'elle anime), et les six entrées
   apparaissaient donc toutes ensemble, sans le décalage voulu. */
.cn-menu__list a .cn-num{ min-width:26px; }
.cn-menu__list a[aria-current="page"]{ color:var(--red); }
.cn-menu__foot{ margin-top:auto; padding-top:28px; display:flex; flex-direction:column; gap:20px; }
.cn-menu__foot .cn-lang{ font-size:13px; } .cn-menu__foot .cn-lang button{ padding:12px 10px; }
.cn-menu__coord{ font-family:var(--body); font-size:14px; line-height:1.7; color:var(--text-2); }
.cn-menu__coord a{ text-decoration:none; color:var(--text); display:inline-block; padding-block:3px; }

/* barre mobile */
.cn-mbar{ display:none; position:fixed; left:12px; right:12px; bottom:calc(12px + env(safe-area-inset-bottom)); z-index:95; gap:8px; }
.cn-mbar a{ flex:1; text-align:center; padding:17px 0; text-decoration:none; border-radius:999px; font-family:var(--display); font-size:12px; letter-spacing:.12em; text-transform:uppercase; font-weight:600; }
.cn-mbar a:first-child{ background:var(--glass); -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px); border:1px solid var(--glass-b); color:var(--text); box-shadow:var(--shadow); }
.cn-mbar a:last-child{ background:var(--ink); color:var(--paper); box-shadow:0 12px 30px rgba(18,24,42,.28); }
@media (max-width:1023px){ .cn-mbar{ display:flex; } html.cn-menu-open .cn-mbar{ display:none; } }

/* ---------- hero (Accueil) ---------- */
.cn-hero{ position:relative; padding-top:calc(var(--header-h) + clamp(36px,6vw,80px)); padding-bottom:clamp(48px,6vw,88px); min-height:calc(100vh - 40px); display:flex; align-items:center; }
.cn-hero__grid{ display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr); column-gap:clamp(32px,5vw,96px); align-items:center; }
.cn-hero__name{ font-family:var(--display); font-weight:600; font-size:clamp(52px,7.6vw,118px); line-height:.96; letter-spacing:-.04em; margin:22px 0 16px; }
.cn-hero__name span{ display:block; }
.cn-hero__tag{ font-family:var(--accent); font-style:italic; font-weight:400; font-size:clamp(24px,2.4vw,36px); line-height:1.2; color:var(--red); letter-spacing:-.01em; }
.cn-hero__role{ font-family:var(--display); font-size:12px; letter-spacing:.12em; text-transform:uppercase; font-weight:600; color:var(--text-2); line-height:1.6; margin-top:22px; }
.cn-hero__role .cn-sep,.cn-footer__role .cn-sep{ color:var(--line-2); margin:0 8px; }
@media (max-width:639px){ .cn-hero__role .cn-sep,.cn-footer__role .cn-sep{ display:none; } .cn-role2{ display:block; } }
.cn-hero__quote{ font-family:var(--body); font-size:clamp(16px,1.25vw,18px); line-height:1.6; color:var(--text-2); max-width:44ch; margin-top:18px; }
.cn-hero__actions{ display:flex; align-items:center; gap:18px; flex-wrap:wrap; margin-top:34px; }
.cn-hero__visual{ position:relative; }
.cn-hero .cn-hero__photo{ width:min(100%, 520px); margin-left:auto; margin-right:0; border:0; background:transparent; overflow:hidden;
  border-radius:260px 260px 28px 28px; box-shadow:0 44px 90px rgba(18,24,42,.16);
  transition:clip-path 1.15s var(--ease-out) .15s, transform 1.15s var(--ease-out) .15s, opacity .9s var(--ease-out) .15s; }
.cn-hero .cn-hero__visual::after{ content:""; position:absolute; top:-16px; right:16px; width:min(100%,520px); height:calc(100% + 16px); border-radius:260px 260px 28px 28px; border:1px solid rgba(138,42,50,.38); pointer-events:none; }
.cn-hero__chips{ left:-6%; top:26%; }
.cn-hero__photo image-slot{ display:block; transform-origin:50% 18%; animation:cn-heroken 26s ease-in-out infinite alternate; }
html.cn-js .cn-hero .cn-hero__visual:not(.is-in) .cn-hero__photo{ clip-path:inset(2% 0 6% 34%); transform:scale(1.05) translateX(26px); opacity:0; }
.cn-hero{ overflow:visible; }
.cn-hero::before{ content:""; position:absolute; right:6%; top:14%; width:min(46vw,580px); aspect-ratio:1; border-radius:50%; pointer-events:none;
  background:radial-gradient(circle, rgba(138,42,50,.09), rgba(18,24,42,.07) 46%, transparent 72%); filter:blur(14px); animation:cn-halo 15s ease-in-out infinite alternate; }
.cn-hero>.cn-wrap{ position:relative; z-index:1; }
.cn-hero__name span{ transition:opacity .8s var(--ease-out), transform .95s var(--ease-out); }
.cn-hero__name span:nth-child(2){ transition-delay:.12s; }
html.cn-js .cn-hero__name[data-rise]:not(.is-in) span{ opacity:0; transform:translateY(36px) rotate(1.2deg); }
.cn-chip--balance::before{ display:none; }
.cn-chip__scales{ width:15px; height:14px; flex:none; fill:none; stroke:var(--red); stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; overflow:visible; }
.cn-scales__sway{ transform-origin:12px 5.4px; animation:cn-scales 4.6s ease-in-out infinite alternate; }
@keyframes cn-scales{ from{ transform:rotate(-5deg); } to{ transform:rotate(5deg); } }
@keyframes cn-heroken{ from{ transform:scale(1); } to{ transform:scale(1.05); } }
@keyframes cn-halo{ from{ transform:translate3d(0,0,0) scale(1); opacity:.85; } to{ transform:translate3d(-4%,5%,0) scale(1.12); opacity:1; } }
.cn-hero__chips{ position:absolute; left:-8%; top:12%; display:flex; flex-direction:column; gap:12px; align-items:flex-start; z-index:4; }
.cn-hero__chips .cn-chip:nth-child(2){ margin-left:22px; } .cn-hero__chips .cn-chip:nth-child(3){ margin-left:-10px; }
.cn-hero__facts{ margin-top:clamp(40px,5vw,72px); display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--gap); }
.cn-fact{ display:flex; flex-direction:column; gap:10px; }
.cn-fact__val{ font-family:var(--display); font-weight:600; font-size:clamp(18px,1.5vw,21px); letter-spacing:-.02em; line-height:1.25; }
.cn-fact__txt{ font-family:var(--body); font-size:13.5px; line-height:1.5; color:var(--text-2); }
[data-rise]{ opacity:0; transform:translateY(18px); transition:opacity .8s var(--ease-out), transform .8s var(--ease-out); }
[data-rise].is-in{ opacity:1; transform:none; }
@media (max-width:1023px){
  .cn-hero{ min-height:0; display:block; }
  .cn-hero__grid{ grid-template-columns:1fr; row-gap:36px; }
  .cn-hero .cn-hero__photo{ width:100%; margin:0; }
  .cn-hero__chips{ position:static; flex-direction:row; flex-wrap:wrap; margin-top:14px; }
  .cn-hero__chips .cn-chip{ margin:0 !important; }
  .cn-hero__facts{ grid-template-columns:1fr; }
  .cn-hero__name{ font-size:clamp(52px,14vw,88px); }
}
@media (min-width:1024px) and (max-width:1279px){ .cn-hero__chips{ left:-4%; } }

/* ---------- pages intérieures : tête ---------- */
.cn-pagehead{ padding-top:calc(var(--header-h) + clamp(40px,7vw,96px)); }
.cn-pagehead .cn-h1{ margin-top:clamp(18px,2.6vw,32px); }
.cn-pagehead .cn-lead{ color:var(--text-2); }

/* ---------- reveals ---------- */
html.cn-js [data-reveal]:not([data-reveal="mask"]){ opacity:0; transform:translateY(16px) scale(.985); transition:opacity .65s var(--ease-out), transform .65s var(--ease-out); }
html.cn-js [data-reveal].is-in:not([data-reveal="mask"]){ opacity:1; transform:none; }
html.cn-js [data-reveal-delay="1"]{ transition-delay:.08s } html.cn-js [data-reveal-delay="2"]{ transition-delay:.16s } html.cn-js [data-reveal-delay="3"]{ transition-delay:.24s }
html.cn-js [data-reveal="mask"]{ clip-path:inset(4% 0 4% 0 round var(--r)); opacity:0; transition:clip-path 1s var(--ease-out), opacity .8s var(--ease-out); }
html.cn-js [data-reveal="mask"].is-in{ clip-path:inset(0 0 0 0 round var(--r)); opacity:1; }
html.cn-js [data-line]{ transform:scaleX(0); transform-origin:left; transition:transform 1s var(--ease); }
html.cn-js [data-line].is-in{ transform:scaleX(1); }
.cn-site{ opacity:1; transition:opacity .28s var(--ease); }
html.cn-leaving .cn-site{ opacity:0; }
html.cn-entering .cn-site{ opacity:0; }

/* ---------- index éditorial (domaines) ---------- */
.cn-index{ display:flex; flex-direction:column; gap:4px; }
.cn-index__row{ display:grid; grid-template-columns:48px minmax(0,1.35fr) minmax(0,1fr) 32px; align-items:center; column-gap:clamp(14px,2vw,28px); padding:clamp(16px,2vw,22px) clamp(14px,1.6vw,22px); border-radius:18px; text-decoration:none; color:inherit; position:relative; border:1px solid transparent; transition:background var(--d) var(--ease), border-color var(--d) var(--ease), box-shadow var(--d) var(--ease), transform var(--d) var(--ease); }
.cn-index__row::after{ content:""; position:absolute; left:clamp(14px,1.6vw,22px); right:clamp(14px,1.6vw,22px); bottom:-3px; height:1px; background:var(--line); }
.cn-index__row:last-child::after{ display:none; }
.cn-index__row:hover,.cn-index__row:focus-visible{ background:var(--glass); border-color:var(--glass-b); box-shadow:var(--shadow); transform:translateX(4px); outline:none; }
.cn-index__row:focus-visible{ box-shadow:0 0 0 2px var(--red), var(--shadow); }
.cn-index__num{ font-family:var(--display); font-size:12px; letter-spacing:.08em; color:var(--red); font-variant-numeric:tabular-nums; font-weight:600; }
.cn-index__title{ font-family:var(--display); font-weight:600; font-size:clamp(20px,1.9vw,27px); line-height:1.15; letter-spacing:-.025em; transition:transform var(--d) var(--ease); }
.cn-index__desc{ font-family:var(--body); font-size:13.5px; line-height:1.5; color:var(--text-2); max-width:40ch; }
.cn-index__arrow{ font-family:var(--body); color:var(--red); font-size:18px; opacity:0; transform:translateX(-8px); transition:opacity var(--d) var(--ease), transform var(--d) var(--ease); justify-self:end; }
.cn-index__row:hover .cn-index__arrow,.cn-index__row:focus-visible .cn-index__arrow{ opacity:1; transform:none; }
.cn-index-figure{ position:sticky; top:calc(var(--header-h) + 24px); display:flex; flex-direction:column; gap:var(--gap); }
@media (max-width:1023px){
  .cn-index__row{ grid-template-columns:40px minmax(0,1fr); row-gap:6px; }
  .cn-index__desc{ grid-column:2; max-width:none; }
  .cn-index__arrow{ display:none; }
  .cn-index__row:hover{ transform:none; }
  .cn-index-figure{ position:static; }
  .cn-first-m{ order:-1; }
}

/* ---------- listes, définitions, chronologie, tableaux ---------- */
.cn-dl{ margin:0; }
.cn-dl__row{ display:grid; grid-template-columns:minmax(138px,.34fr) 1fr; column-gap:26px; padding:14px 0; border-bottom:1px solid var(--line); align-items:baseline; }
.cn-dl__row:last-child{ border-bottom:0; }
.cn-dl dt{ font-family:var(--display); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--steel); font-weight:600; margin:0; line-height:1.6; }
.cn-dl dd{ margin:0; font-family:var(--body); font-size:15px; line-height:1.55; }
.cn-dl dd a{ text-decoration:none; display:inline-block; padding-block:3px; }
.cn-dl dd a:hover{ color:var(--red); }
.cn-list{ font-family:var(--body); font-size:15px; line-height:1.5; }
.cn-list li{ padding:12px 0; border-bottom:1px solid var(--line); display:flex; gap:16px; align-items:baseline; }
.cn-list li:last-child{ border-bottom:0; }
.cn-list li::before{ content:""; width:12px; height:2px; border-radius:2px; background:var(--red); flex:none; transform:translateY(-4px); }
.cn-list--2{ columns:2; column-gap:var(--gap); } .cn-list--2 li{ break-inside:avoid; border-bottom:1px solid var(--line); } .cn-list--2 li:last-child{ border-bottom:1px solid var(--line); }
@media (max-width:639px){ .cn-list--2{ columns:1; } }
.cn-facts{ display:flex; flex-direction:column; }
.cn-facts__row{ display:grid; grid-template-columns:minmax(96px,.38fr) 1fr; column-gap:16px; padding:13px 0; border-bottom:1px solid var(--line); font-family:var(--body); font-size:14px; line-height:1.5; align-items:baseline; }
.cn-facts__row:last-child{ border-bottom:0; }
.cn-facts__row>span:first-child{ color:var(--steel); font-family:var(--display); font-size:11px; letter-spacing:.14em; text-transform:uppercase; font-weight:600; }
.cn-chrono{ display:flex; flex-direction:column; }
.cn-chrono__row{ display:grid; grid-template-columns:minmax(170px,.3fr) minmax(0,.5fr) minmax(0,1fr); column-gap:var(--gap); padding:clamp(18px,2.2vw,28px) 0; border-bottom:1px solid var(--line); align-items:baseline; }
.cn-chrono__row:last-child{ border-bottom:0; }
.cn-chrono__when{ font-family:var(--display); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--red); font-weight:600; line-height:1.6; }
.cn-chrono__what{ font-family:var(--display); font-weight:600; font-size:clamp(18px,1.6vw,22px); line-height:1.25; letter-spacing:-.02em; }
.cn-chrono__how{ font-family:var(--body); font-size:14px; line-height:1.55; color:var(--text-2); }
@media (max-width:767px){ .cn-chrono__row{ grid-template-columns:1fr; row-gap:6px; } }
.cn-table{ width:100%; border-collapse:collapse; font-family:var(--body); font-size:15px; line-height:1.5; }
.cn-table th,.cn-table td{ padding:13px 0; border-bottom:1px solid var(--line); text-align:left; vertical-align:baseline; font-weight:400; }
.cn-table tr:last-child td{ border-bottom:0; }
.cn-table th{ font-family:var(--display); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--steel); font-weight:600; }
.cn-table td:last-child,.cn-table th:last-child{ text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; padding-left:24px; font-weight:500; }
.cn-bignum{ font-family:var(--display); font-weight:600; font-size:clamp(60px,7.5vw,120px); line-height:.95; letter-spacing:-.045em; display:flex; align-items:baseline; gap:12px; }
.cn-bignum small{ font-family:var(--display); font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--steel); font-weight:600; }
.cn-steps{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--gap); }
.cn-steps>li{ display:flex; flex-direction:column; gap:12px; }
.cn-steps__title{ font-family:var(--display); font-weight:600; font-size:clamp(20px,1.8vw,26px); line-height:1.15; letter-spacing:-.02em; }
.cn-steps__text{ font-family:var(--body); font-size:14px; line-height:1.55; color:var(--text-2); }
@media (max-width:767px){ .cn-steps{ grid-template-columns:1fr; } }
.cn-toc{ position:sticky; top:calc(var(--header-h) + 24px); font-family:var(--display); font-size:13.5px; display:flex; flex-direction:column; gap:2px; }
.cn-toc a{ display:flex; gap:12px; align-items:baseline; padding:10px 14px; text-decoration:none; color:var(--text-3); border-radius:12px; font-weight:500; transition:color var(--d-fast), background var(--d-fast); }
.cn-toc a .cn-num{ color:var(--text-3); transition:color var(--d-fast); }
.cn-toc a:hover,.cn-toc a.is-active{ color:var(--text); background:rgba(20,24,33,.05); }
.cn-toc a.is-active{ background:var(--glass); box-shadow:inset 0 0 0 1px var(--glass-b); }
.cn-toc a.is-active .cn-num{ color:var(--red); }
@media (max-width:1023px){ .cn-toc{ position:static; flex-direction:row; flex-wrap:wrap; gap:6px; } .cn-toc a{ padding:8px 12px; } }

/* ---------- formulaire ---------- */
.cn-form{ display:grid; grid-template-columns:1fr 1fr; gap:18px 18px; }
.cn-field{ display:flex; flex-direction:column; gap:8px; }
.cn-field--full{ grid-column:1/-1; }
.cn-field>span{ font-family:var(--display); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--steel); font-weight:600; padding-left:2px; }
.cn-field:focus-within>span{ color:var(--red); }
.cn-field input,.cn-field select,.cn-field textarea{ font-family:var(--body); font-size:15.5px; line-height:1.4; color:var(--text); background:rgba(255,255,255,.55); border:1px solid rgba(20,24,33,.12); border-radius:var(--r-s); padding:13px 16px; width:100%; outline:none; -webkit-appearance:none; appearance:none; box-shadow:inset 0 1px 0 rgba(255,255,255,.8); transition:border-color var(--d-fast) var(--ease), box-shadow var(--d-fast) var(--ease), background var(--d-fast); }
.cn-field input::placeholder,.cn-field textarea::placeholder{ color:var(--text-3); opacity:1; }
.cn-field input:focus,.cn-field select:focus,.cn-field textarea:focus{ border-color:var(--red); box-shadow:0 0 0 3px rgba(138,42,50,.14); background:#fff; }
.cn-field select{ background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14' fill='none' stroke='%23141821' stroke-width='1.4'><path d='M2 5l5 5 5-5'/></svg>"); background-repeat:no-repeat; background-position:right 14px center; padding-right:38px; cursor:pointer; }
.cn-field textarea{ resize:vertical; min-height:120px; }
.cn-form__foot{ grid-column:1/-1; display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap; padding-top:8px; }
.cn-form__note{ font-family:var(--body); font-size:12.5px; line-height:1.55; color:var(--text-3); max-width:44ch; }
.cn-form__note a{ color:var(--text-2); display:inline-block; padding-block:3px; }
.cn-form-ok{ display:none; }
.cn-form-ko{ display:none; }
.cn-form-ko .cn-label{ display:block; margin-bottom:14px; color:var(--red); }
.cn-form-ko:focus{ outline:none; }
.cn-form-ko a{ display:inline-block; padding-block:3px; }
.cn-form-ok .cn-label{ display:block; margin-bottom:14px; color:var(--red); }
.cn-form-ok:focus{ outline:none; }
.cn-form-ok a{ display:inline-block; padding-block:3px; }
html.cn-sent .cn-form{ display:none; }
html.cn-sent .cn-form-ok{ display:block; }
html.cn-failed .cn-form{ display:none; }
html.cn-failed .cn-form-ko{ display:block; }
.cn-form__btn [data-btn-sending]{ display:none; }
html.cn-sending .cn-form__btn [data-btn-idle]{ display:none; }
html.cn-sending .cn-form__btn [data-btn-sending]{ display:inline; }
html.cn-sending .cn-form__btn{ pointer-events:none; opacity:.7; }
@media (max-width:639px){ .cn-form{ grid-template-columns:1fr; } }

/* ---------- footer ---------- */
.cn-footer{ background:var(--ink); color:var(--on-dark); padding:clamp(72px,8vw,120px) 0 28px; position:relative; overflow:hidden; border-radius:32px 32px 0 0; margin-top:-32px; box-shadow:0 -30px 80px rgba(18,24,42,.18); }
.cn-footer::before{ content:""; position:absolute; inset:0; pointer-events:none; background:radial-gradient(55% 60% at 90% 0%, rgba(176,66,74,.16), transparent 70%), radial-gradient(45% 50% at 5% 100%, rgba(90,112,160,.2), transparent 70%); }
.cn-footer>*{ position:relative; }
.cn-footer__grid{ display:grid; grid-template-columns:minmax(0,5fr) minmax(0,2fr) minmax(0,3fr); column-gap:clamp(32px,5vw,96px); row-gap:40px; align-items:start; }
.cn-footer__name{ font-family:var(--display); font-weight:600; font-size:clamp(30px,3.2vw,44px); line-height:1; letter-spacing:-.035em; margin:0; }
.cn-footer__role{ font-family:var(--display); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--on-dark-2); margin-top:16px; font-weight:600; line-height:1.7; }
.cn-footer__intro{ font-family:var(--body); font-size:15px; line-height:1.6; color:var(--on-dark-2); max-width:44ch; margin-top:18px; }
.cn-footer__card{ margin-top:28px; display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; }
.cn-footer__phone{ font-family:var(--display); font-weight:600; font-size:clamp(22px,2vw,28px); letter-spacing:-.02em; color:var(--on-dark); text-decoration:none; }
.cn-footer__col{ display:flex; flex-direction:column; gap:10px; font-family:var(--body); font-size:14.5px; line-height:1.6; }
.cn-footer__col .cn-label{ color:rgba(244,242,237,.5); margin-bottom:8px; }
.cn-footer a{ color:var(--on-dark); text-decoration:none; }
.cn-footer .cn-btn--light,.cn-dark .cn-btn--light,.cn-band .cn-btn--light{ color:var(--ink); }
.cn-footer .cn-btn--light:hover,.cn-dark .cn-btn--light:hover,.cn-band .cn-btn--light:hover{ color:#fff; }
.cn-footer__col a{ display:inline-block; padding-block:2px; transition:color var(--d-fast); }
.cn-footer__col a:hover{ color:var(--red-2); }
.cn-footer__bottom{ display:flex; justify-content:space-between; gap:14px 32px; flex-wrap:wrap; margin-top:clamp(48px,5vw,72px); padding-top:20px; border-top:1px solid var(--line-dark); font-family:var(--display); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--on-dark-3); font-weight:500; }
.cn-footer__bottom a{ color:var(--on-dark-3); display:inline-block; padding-block:6px; } .cn-footer__bottom a:hover{ color:var(--on-dark); }
.cn-footer .cn-meta{ color:var(--on-dark-3); }
/* quand la page se termine par une section sombre, le footer s'y fond : pas de second arrondi ni de seconde balance */
main:has(> .cn-dark:last-child) + .cn-footer,main:has(> .cn-band:last-child) + .cn-footer{ border-radius:0; margin-top:0; box-shadow:none; border-top:1px solid var(--line-dark); padding-top:clamp(56px,6vw,88px); }
main:has(> .cn-dark:last-child) + .cn-footer > .cn-balance--dark,main:has(> .cn-band:last-child) + .cn-footer > .cn-balance--dark{ display:none; }
.cn-footer__legal{ display:flex; gap:20px; flex-wrap:wrap; }
@media (max-width:1023px){ .cn-footer__grid{ grid-template-columns:1fr 1fr; } .cn-footer__grid>:first-child{ grid-column:1/-1; } }
@media (max-width:639px){ .cn-footer__grid{ grid-template-columns:1fr; } }

/* ---------- pages légales / articles / plan ---------- */
.cn-prose h2{ font-family:var(--display); font-weight:600; font-size:clamp(20px,1.8vw,26px); line-height:1.2; margin:2.2em 0 .7em; letter-spacing:-.02em; }
.cn-prose h2:first-child{ margin-top:0; }
.cn-prose p+p{ margin-top:1em; }
.cn-prose a{ color:var(--red); text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px; }
.cn-prose mark{ background:rgba(138,42,50,.08); color:var(--red); font-style:italic; padding:0 4px; border-radius:4px; }
.cn-article,[id]{ scroll-margin-top:calc(var(--header-h) + 24px); }
.cn-aside{ padding:0; }
.cn-aside .cn-label{ margin-bottom:14px; display:block; }
.cn-map{ position:relative; aspect-ratio:21/9; background:var(--mist); overflow:hidden; border-radius:var(--r); border:1px solid rgba(255,255,255,.7); box-shadow:var(--shadow); }
.cn-map iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.cn-map__actions{ position:absolute; z-index:3; left:14px; bottom:14px; display:flex; gap:8px; flex-wrap:wrap; }
@media (max-width:767px){ .cn-map{ aspect-ratio:4/3; } }


/* ── Le verre Seenly, repris du site de l'agence (2026-09-11) ─────────────────
   Recette : le fond du bouton reste ; on ajoute le reflet intérieur et le FILET
   dégradé (masque composite XOR : seule l'épaisseur du padding reste) qui brille
   en haut et en bas et s'efface au milieu. Filet crème sur corps foncé, filet
   encre sur corps clair. Le flou appuyé ne va qu'aux corps translucides. */
.cn-btn,.cn-mbar a{ position:relative; overflow:hidden; }
.cn-btn,.cn-mbar a{ border-color:transparent !important; }
.cn-btn::before,.cn-mbar a::before{
  content:""; position:absolute; inset:0; border-radius:inherit; padding:1.4px; pointer-events:none; z-index:1;
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor; mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0); mask-composite:exclude;
  background:linear-gradient(180deg,rgba(253,250,242,.55) 0%,rgba(253,250,242,.22) 20%,rgba(253,250,242,0) 40%,rgba(253,250,242,0) 60%,rgba(253,250,242,.22) 80%,rgba(253,250,242,.55) 100%);
}
/* corps clairs : le filet devient encre, sinon il ne trancherait pas */
.cn-btn--ghost::before,.cn-btn--glass::before,.cn-btn--light::before,.cn-mbar a:first-child::before{
  background:linear-gradient(180deg,rgba(18,24,42,.34) 0%,rgba(18,24,42,.13) 22%,rgba(18,24,42,0) 42%,rgba(18,24,42,0) 58%,rgba(18,24,42,.13) 78%,rgba(18,24,42,.34) 100%);
}
/* reflets intérieurs + ombre posée, par variante */
.cn-btn{ box-shadow:0 10px 30px rgba(18,24,42,.18), 4px 4px 4px rgba(18,24,42,.05), inset 0 1px 1px rgba(253,250,242,.18); }
.cn-btn--ghost{ box-shadow:2px 2px 4px rgba(18,24,42,.05), inset 0 1px 1px rgba(255,255,255,.55); }
.cn-btn--glass{ -webkit-backdrop-filter:blur(50px) saturate(1.15); backdrop-filter:blur(50px) saturate(1.15); background-blend-mode:luminosity;
  box-shadow:0 10px 30px rgba(18,24,42,.08), 2px 2px 4px rgba(18,24,42,.05), inset 0 1px 1px rgba(255,255,255,.55); }
.cn-btn--light{ box-shadow:0 10px 30px rgba(0,0,0,.25), 2px 2px 4px rgba(0,0,0,.05), inset 0 1px 1px rgba(255,255,255,.6); }
.cn-btn--red{ box-shadow:0 12px 30px rgba(138,42,50,.28), 4px 4px 4px rgba(18,24,42,.05), inset 0 1px 1px rgba(253,250,242,.2); }
.cn-mbar a:first-child{ box-shadow:var(--shadow), 2px 2px 4px rgba(18,24,42,.05), inset 0 1px 1px rgba(255,255,255,.55); }
.cn-mbar a:last-child{ box-shadow:0 12px 30px rgba(18,24,42,.28), 4px 4px 4px rgba(18,24,42,.05), inset 0 1px 1px rgba(253,250,242,.18); }

/* ── Logo dans la barre du haut + crédit Seenly (2026-09-11) ── */
.cn-wordmark__logo{ width:46px; height:46px; display:block; flex:none; object-fit:contain; }
@media (max-width:639px){ .cn-wordmark__logo{ width:40px; height:40px; } }
.cn-footer__credit{ margin:14px 0 0; font-family:var(--body); font-size:12.5px; color:var(--on-dark-3); }
.cn-footer__credit a{ color:var(--on-dark); text-decoration:none; border-bottom:1px solid rgba(244,242,237,.35); padding-bottom:1px; transition:border-color var(--d-fast) var(--ease), color var(--d-fast) var(--ease); }
.cn-footer__credit a:hover{ color:#fff; border-color:#fff; }

/* ── Survols cohérents : toute la famille réagit dans la même gamme (rouge cuir),
   sans jamais perdre son verre ni sa nature (plein reste plein, verre reste verre) ── */
.cn-btn--glass:hover{ background:rgba(255,255,255,.74); border-color:transparent; color:var(--red);
  box-shadow:0 14px 34px rgba(138,42,50,.14), 2px 2px 4px rgba(18,24,42,.05), inset 0 1px 1px rgba(255,255,255,.7); }
.cn-btn--ghost:hover{ background:rgba(138,42,50,.06); border-color:transparent; color:var(--red);
  box-shadow:0 14px 34px rgba(138,42,50,.12), inset 0 1px 1px rgba(255,255,255,.55); }
.cn-btn--light:hover{ box-shadow:0 14px 34px rgba(138,42,50,.35), 4px 4px 4px rgba(0,0,0,.05), inset 0 1px 1px rgba(253,250,242,.22); }
.cn-btn--light:hover::before{ background:linear-gradient(180deg,rgba(253,250,242,.55) 0%,rgba(253,250,242,.22) 20%,rgba(253,250,242,0) 40%,rgba(253,250,242,0) 60%,rgba(253,250,242,.22) 80%,rgba(253,250,242,.55) 100%); }
.cn-btn--red:hover{ box-shadow:0 14px 34px rgba(138,42,50,.36), 4px 4px 4px rgba(18,24,42,.05), inset 0 1px 1px rgba(253,250,242,.22); }
.cn-btn:active{ transform:translateY(0) scale(.98); }
.cn-btn:focus-visible,.cn-mbar a:focus-visible{ outline:2px solid var(--red); outline-offset:3px; }
.cn-mbar a{ transition:transform var(--d-fast) var(--ease), background var(--d-fast) var(--ease); }
.cn-mbar a:active{ transform:scale(.97); }

/* Verre blanc = pas de blanc : le fond est déjà clair, on ne garde que le flou, le filet et le reflet (2026-09-11) */
.cn-btn--glass{ background:transparent; }
.cn-btn--glass:hover{ background:rgba(138,42,50,.06); }
.cn-mbar a:first-child{ background:transparent; -webkit-backdrop-filter:blur(26px) saturate(1.2); backdrop-filter:blur(26px) saturate(1.2); }

/* ── Mobile : lecture intuitive, proportions, barre fixe (2026-09-11) ── */
@media (max-width:1023px){
  .cn-footer{ padding-bottom:44px; }
  .cn-first-m{ order:0; }                                   /* une section commence par son titre, la photo suit */
  .cn-hero .cn-hero__photo{ width:100%; margin:14px 0 0; border-radius:200px 200px 24px 24px; }
  .cn-hero .cn-hero__visual::after{ display:none; }   /* sur mobile les badges sont au-dessus de la photo : pas de liseré */
  .cn-hero .cn-hero__photo{ box-shadow:0 30px 60px rgba(18,24,42,.16); }
  .cn-hero__chips{ margin-top:18px; }
}
@media (max-width:639px){
  .cn-hero__actions .cn-btn,.cn-row .cn-btn{ width:100%; justify-content:center; }
  .cn-hero__actions,.cn-row{ gap:12px; }
  .cn-p-map .cn-photo__tag{ font-size:9.5px; letter-spacing:.1em; padding:8px 12px; max-width:calc(100% - 28px); }
  .cn-marquee{ --card:70vw; }
}

/* ── Barre du haut : logo grand au départ, qui se range dans la barre au scroll ; navigation centrée (2026-09-11) ── */
.cn-header__in{ position:relative; }
/* Le logo se range par une mise à l'échelle, pas par sa largeur : animer width/height ferait
   recalculer la mise en page à chaque cran de scroll, dans une barre fixe. La boîte reste à 46 px
   (le reste de la barre n'en dépend pas) et le grand logo déborde simplement vers le bas. */
.cn-wordmark__logo{ transition:transform .5s var(--ease-out); transform-origin:left center; }
@media (min-width:1024px){
  .cn-header__in{ height:var(--header-bar); }
  .cn-wordmark{ align-self:flex-start; margin-top:calc((var(--header-bar) - 46px) / 2); }   /* le bord haut ne bouge pas : le logo grandit vers le bas */
  .cn-wordmark__logo{ transform-origin:left top; transform:scale(1.913); }   /* 88 px pour une boîte de 46 */
  html.cn-scrolled .cn-wordmark__logo{ transform:none; }
  .cn-nav{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); }
}
@media (max-width:1023px){ .cn-site{ padding-bottom:0; } }   /* la réserve pour la barre fixe est portée par le footer */

/* ── Filigrane : le logo remplace la balance, en fond, subtil et animé (2026-09-11) ── */
.cn-balance--logo{ width:min(40vw,520px); }
.cn-balance--logo img{ width:100%; height:auto; display:block; transform-origin:50% 58%; animation:cn-logo-drift 18s ease-in-out infinite alternate; }
.cn-balance.cn-balance--logo{ opacity:.06; right:-6vw; top:10vh; }
.cn-balance--dark.cn-balance--logo{ opacity:.075; right:-3vw; bottom:-8vh; width:min(36vw,440px); }
@keyframes cn-logo-drift{ from{ transform:translate3d(0,0,0) rotate(-2deg) scale(1); } to{ transform:translate3d(-2.5%,-4%,0) rotate(2deg) scale(1.045); } }
@media (max-width:1023px){ .cn-balance--dark.cn-balance--logo{ width:min(60vw,320px); right:-10vw; bottom:-4vh; } .cn-balance.cn-balance--logo{ width:70vw; right:-22vw; } }

/* ══ Éventail des trois photos du cabinet (Accueil) ══ */
.cn-fan{ position:relative; width:100%; max-width:none; margin:0 auto; aspect-ratio:1.22; }
.cn-fan__card{ position:absolute; left:50%; bottom:0; width:58%; margin:0; transform-origin:50% 100%; cursor:pointer;
  --rot:calc((var(--i) - 1) * 7deg); --tx:calc(-50% + (var(--i) - 1) * 31%); --ty:calc((var(--i) - 1) * (var(--i) - 1) * 10px);
  transform:translate(var(--tx), var(--ty)) rotate(var(--rot)); z-index:calc(2 - var(--i) * 0); box-shadow:0 30px 60px rgba(18,24,42,.22);
  transition:transform .8s var(--ease-out), opacity .8s var(--ease-out), box-shadow .4s var(--ease); }
.cn-fan__card:nth-child(2){ z-index:3; }
html.cn-js .cn-fan:not(.is-in) .cn-fan__card{ transform:translate(-50%, 30px) rotate(0deg); opacity:0; }
.cn-fan.is-in .cn-fan__card{ transition-delay:calc(var(--i) * .13s); }
.cn-fan.is-in .cn-fan__card{ animation:cn-fan-breathe 6s ease-in-out calc(var(--i) * -1.7s) infinite alternate; }
@keyframes cn-fan-breathe{ from{ translate:0 0; } to{ translate:0 -4px; } }
.cn-fan__card:hover,.cn-fan__card.is-front{ transform:translate(var(--tx), calc(var(--ty) - 16px)) rotate(calc(var(--rot) * .4)) scale(1.05); z-index:6; box-shadow:0 40px 80px rgba(18,24,42,.32); transition-delay:0s !important; }
.cn-fan__card img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:var(--pos,50% 50%); }
@media (max-width:1023px){ .cn-fan{ max-width:none; aspect-ratio:1.15; } .cn-fan__card{ width:56%; } }

/* ══ Timeline Le cabinet : les étapes s'allument dans l'ordre ══ */
.cn-chrono__when{ position:relative; padding-left:16px; }
.cn-chrono__when::before{ content:""; position:absolute; left:0; top:.45em; width:7px; height:7px; border-radius:50%; background:var(--line-2); transition:background .45s var(--ease), box-shadow .45s var(--ease), transform .45s var(--ease-out); }
.cn-chrono__row.is-lit .cn-chrono__when::before{ background:var(--red); transform:scale(1.15);
  animation:cn-chrono-pulse 4.8s ease-in-out infinite; animation-delay:var(--d,0ms); }
@keyframes cn-chrono-pulse{
  0%,55%{ box-shadow:0 0 0 3px rgba(138,42,50,.12); }
  68%{ box-shadow:0 0 0 7px rgba(138,42,50,0); }
  80%,100%{ box-shadow:0 0 0 3px rgba(138,42,50,.12); }
}
.cn-chrono__row .cn-chrono__what{ transition:color .45s var(--ease); }
html.cn-js .cn-chrono__row:not(.is-lit) .cn-chrono__what{ color:var(--text-2); }


/* ══ Pictogrammes animés (trait fin) : base commune ══ */
.cn-pic{ display:inline-block; width:26px; height:26px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; vertical-align:middle; flex:none; overflow:visible; }
.cn-pic__acc{ stroke:var(--red); }
.cn-pic--lg{ width:44px; height:44px; }
.cn-runhead .cn-pic{ width:22px; height:22px; margin-right:10px; }
.cn-index__num .cn-pic,.cn-toc .cn-pic{ width:20px; height:20px; margin-right:8px; }
.cn-toc a .cn-pic{ opacity:.7; } .cn-toc a.is-active .cn-pic,.cn-toc a:hover .cn-pic{ opacity:1; }

/* Barre mobile : « Appeler » en verre sombre, lisible sur fond clair comme sur fond encre (2026-09-11) */
.cn-mbar a:first-child{ background:rgba(18,24,42,.55); color:var(--on-dark); }
.cn-mbar a:first-child::before{ background:linear-gradient(180deg,rgba(253,250,242,.55) 0%,rgba(253,250,242,.22) 20%,rgba(253,250,242,0) 40%,rgba(253,250,242,0) 60%,rgba(253,250,242,.22) 80%,rgba(253,250,242,.55) 100%); }

/* Crédit Seenly : plus visible, avec le vrai logo cliquable (2026-09-11) */
.cn-footer__credit{ display:flex; align-items:center; gap:12px; margin-top:20px; font-size:13.5px; color:var(--on-dark-2); }
.cn-footer__credit a{ display:inline-flex; align-items:center; border:0; padding:4px 0; transition:opacity var(--d-fast) var(--ease), transform var(--d-fast) var(--ease); }
.cn-footer__credit img{ height:17px; width:auto; display:block; }
.cn-footer__credit a:hover{ opacity:.85; transform:translateY(-1px); }

/* ══ Pictogrammes v2 : boucles narratives, cycle commun de 4,8 s, phase --cn-sync ══ */
/* Picto « famille » — les deux silhouettes se penchent l'une vers l'autre,
   le cœur naît entre elles au temps fort, puis chacune reprend sa place. */
.cn-pic--famille .cn-pic__a1,
.cn-pic--famille .cn-pic__a2,
.cn-pic--famille .cn-pic__a3{transform-box:fill-box}

.cn-pic--famille .cn-pic__a1{transform-origin:50% 100%;animation:cn-pic-famille-l 4.8s ease-in-out var(--cn-sync,0ms) infinite}
.cn-pic--famille .cn-pic__a2{transform-origin:50% 100%;animation:cn-pic-famille-r 4.8s ease-in-out var(--cn-sync,0ms) infinite}
.cn-pic--famille .cn-pic__a3{transform-origin:50% 100%;opacity:0;transform:translateY(1.2px) scale(.5);animation:cn-pic-famille-heart 4.8s ease-in-out var(--cn-sync,0ms) infinite}

/* Silhouette gauche : glisse et se penche vers la droite */
@keyframes cn-pic-famille-l{
  0%,10%{transform:translateX(0) rotate(0deg);animation-timing-function:ease-in-out}
  55%,70%{transform:translateX(1.4px) rotate(5.5deg);animation-timing-function:ease-in-out}
  90%,100%{transform:translateX(0) rotate(0deg)}
}
/* Silhouette droite : miroir */
@keyframes cn-pic-famille-r{
  0%,10%{transform:translateX(0) rotate(0deg);animation-timing-function:ease-in-out}
  55%,70%{transform:translateX(-1.4px) rotate(-5.5deg);animation-timing-function:ease-in-out}
  90%,100%{transform:translateX(0) rotate(0deg)}
}
/* Cœur : apparaît quand elles sont proches, respire une fois, s'efface avant qu'elles repartent */
@keyframes cn-pic-famille-heart{
  0%,36%{opacity:0;transform:translateY(1.2px) scale(.5);animation-timing-function:cubic-bezier(.16,1,.3,1)}
  55%{opacity:1;transform:translateY(0) scale(1);animation-timing-function:ease-in-out}
  62%{opacity:1;transform:translateY(0) scale(1.08);animation-timing-function:ease-in-out}
  70%{opacity:1;transform:translateY(0) scale(1);animation-timing-function:ease-in-out}
  84%,100%{opacity:0;transform:translateY(1.2px) scale(.5)}
}

/* Picto « jeunesse » — deux enfants viennent se blottir contre l'adulte, dont les bras
   (en accent) se referment sur eux. Même amplitude que le picto famille. */
.cn-pic--jeunesse .cn-pic__a1,
.cn-pic--jeunesse .cn-pic__a2,
.cn-pic--jeunesse .cn-pic__a4,
.cn-pic--jeunesse .cn-pic__a5{transform-box:fill-box}

.cn-pic--jeunesse .cn-pic__a1{transform-origin:50% 100%;animation:cn-pic-jeunesse-l 4.8s ease-in-out var(--cn-sync,0ms) infinite}
.cn-pic--jeunesse .cn-pic__a2{transform-origin:50% 100%;animation:cn-pic-jeunesse-r 4.8s ease-in-out var(--cn-sync,0ms) infinite}
.cn-pic--jeunesse .cn-pic__a4{transform-origin:100% 0;animation:cn-pic-jeunesse-arm-l 4.8s ease-in-out var(--cn-sync,0ms) infinite}
.cn-pic--jeunesse .cn-pic__a5{transform-origin:0 0;animation:cn-pic-jeunesse-arm-r 4.8s ease-in-out var(--cn-sync,0ms) infinite}

/* L'enfant de gauche se rapproche et se penche vers l'adulte */
@keyframes cn-pic-jeunesse-l{
  0%,10%{transform:translateX(0) rotate(0deg)}
  55%,70%{transform:translateX(2px) rotate(4deg)}
  90%,100%{transform:translateX(0) rotate(0deg)}
}
/* Celui de droite fait le geste inverse */
@keyframes cn-pic-jeunesse-r{
  0%,10%{transform:translateX(0) rotate(0deg)}
  55%,70%{transform:translateX(-2px) rotate(-4deg)}
  90%,100%{transform:translateX(0) rotate(0deg)}
}
/* Les bras de l'adulte se referment sur eux */
@keyframes cn-pic-jeunesse-arm-l{
  0%,10%{transform:rotate(0deg)}
  55%,70%{transform:rotate(9deg)}
  90%,100%{transform:rotate(0deg)}
}
@keyframes cn-pic-jeunesse-arm-r{
  0%,10%{transform:rotate(0deg)}
  55%,70%{transform:rotate(-9deg)}
  90%,100%{transform:rotate(0deg)}
}

/* Picto « pénal » — la balance penchée se rééquilibre, tient l'horizontale au temps fort,
   puis repenche. Les plateaux restent suspendus à la verticale : ils montent et descendent
   sans tourner (13,5 unités de bras × sin θ). */
.cn-pic--penal .cn-pic__a1,
.cn-pic--penal .cn-pic__a2,
.cn-pic--penal .cn-pic__a3{transform-box:fill-box}

.cn-pic--penal .cn-pic__a1{transform-origin:50% 50%;animation:cn-pic-penal-beam 4.8s ease-in-out var(--cn-sync,0ms) infinite}
.cn-pic--penal .cn-pic__a2{transform-origin:50% 0;animation:cn-pic-penal-left 4.8s ease-in-out var(--cn-sync,0ms) infinite}
.cn-pic--penal .cn-pic__a3{transform-origin:50% 0;animation:cn-pic-penal-right 4.8s ease-in-out var(--cn-sync,0ms) infinite}

/* Fléau : penché de 6° au repos, horizontal au temps fort */
@keyframes cn-pic-penal-beam{
  0%,10%{transform:rotate(6deg)}
  55%,70%{transform:rotate(0deg)}
  90%,100%{transform:rotate(6deg)}
}
/* Plateau gauche : haut au repos, revient à hauteur au temps fort */
@keyframes cn-pic-penal-left{
  0%,10%{transform:translateY(-1.41px)}
  55%,70%{transform:translateY(0)}
  90%,100%{transform:translateY(-1.41px)}
}
/* Plateau droit : bas au repos, remonte au temps fort */
@keyframes cn-pic-penal-right{
  0%,10%{transform:translateY(1.41px)}
  55%,70%{transform:translateY(0)}
  90%,100%{transform:translateY(1.41px)}
}

/* Picto « civil » — la porte s'ouvre sur son gond, la fenêtre s'éclaire au temps fort,
   puis la porte se referme. */
.cn-pic--civil .cn-pic__a2,
.cn-pic--civil .cn-pic__a3,
.cn-pic--civil .cn-pic__a4{transform-box:fill-box}

.cn-pic--civil .cn-pic__a3{transform-origin:0 100%;animation:cn-pic-civil-door 4.8s ease-in-out var(--cn-sync,0ms) infinite}
.cn-pic--civil .cn-pic__a4{transform-origin:50% 50%;opacity:.4;animation:cn-pic-civil-window 4.8s ease-in-out var(--cn-sync,0ms) infinite}
.cn-pic--civil .cn-pic__a2{transform-origin:50% 100%;animation:cn-pic-civil-roof 4.8s ease-in-out var(--cn-sync,0ms) infinite}

/* Porte : pivote sur son gond gauche (raccourci en largeur = battant qui s'ouvre) */
@keyframes cn-pic-civil-door{
  0%,10%{transform:scaleX(1)}
  55%,70%{transform:scaleX(.26)}
  90%,100%{transform:scaleX(1)}
}
/* Fenêtre : s'allume quand la porte est ouverte */
@keyframes cn-pic-civil-window{
  0%,14%{opacity:.4;transform:scale(1)}
  55%{opacity:1;transform:scale(1.06)}
  70%{opacity:1;transform:scale(1.06)}
  88%,100%{opacity:.4;transform:scale(1)}
}
/* Toit : se pose d'un cheveu, pour que la maison respire */
@keyframes cn-pic-civil-roof{
  0%,10%{transform:translateY(0)}
  55%,70%{transform:translateY(-.8px)}
  90%,100%{transform:translateY(0)}
}

/* Picto « roulage » — la voiture avance à peine, marque son arrêt devant le panneau,
   qui s'allume une fois. Amplitude volontairement faible, au niveau des pictos famille
   et jeunesse : on perçoit le geste sans que l'œil soit attiré. */
.cn-pic--roulage .cn-pic__a4,
.cn-pic--roulage .cn-pic__a5,
.cn-pic--roulage .cn-pic__a6,
.cn-pic--roulage .cn-pic__a7{transform-box:fill-box}

.cn-pic--roulage .cn-pic__a5{transform-origin:50% 100%;animation:cn-pic-roulage-car 4.8s ease-in-out var(--cn-sync,0ms) infinite}
.cn-pic--roulage .cn-pic__a6,
.cn-pic--roulage .cn-pic__a7{transform-origin:50% 50%;animation:cn-pic-roulage-wheel 4.8s ease-in-out var(--cn-sync,0ms) infinite}
.cn-pic--roulage .cn-pic__a4{transform-origin:50% 50%;animation:cn-pic-roulage-sign 4.8s ease-in-out var(--cn-sync,0ms) infinite}

/* La voiture avance de 3 px, s'immobilise, puis reprend sa place */
@keyframes cn-pic-roulage-car{
  0%,10%{transform:translateX(-3px)}
  55%,70%{transform:translateX(0)}
  90%,100%{transform:translateX(-3px)}
}
/* Les roues accompagnent ce court déplacement, puis reviennent */
@keyframes cn-pic-roulage-wheel{
  0%,10%{transform:rotate(0deg)}
  55%,70%{transform:rotate(48deg)}
  90%,100%{transform:rotate(0deg)}
}
/* Le panneau s'atténue une fois, au moment de l'arrêt */
@keyframes cn-pic-roulage-sign{
  0%,52%{opacity:1}
  61%{opacity:.45}
  70%,100%{opacity:1}
}

/* Picto « dettes » — la dette s'affaisse et, une fois au plus bas, le cadenas s'ouvre :
   le poids descend, la situation se dénoue. Le cadenas suit la courbe vers le bas pour
   que les deux gestes se lisent comme un seul. */
.cn-pic--dettes .cn-pic__a2,
.cn-pic--dettes .cn-pic__a3,
.cn-pic--dettes .cn-pic__a4{transform-box:fill-box}

.cn-pic--dettes .cn-pic__a2{transform-origin:50% 100%;animation:cn-pic-dettes-curve 4.8s ease-in-out var(--cn-sync,0ms) infinite}
.cn-pic--dettes .cn-pic__a3{transform-origin:50% 100%;animation:cn-pic-dettes-body 4.8s ease-in-out var(--cn-sync,0ms) infinite}
.cn-pic--dettes .cn-pic__a4{transform-origin:100% 100%;animation:cn-pic-dettes-shackle 4.8s ease-in-out var(--cn-sync,0ms) infinite}

/* La courbe de la dette s'affaisse depuis sa base, franchement, puis remonte */
@keyframes cn-pic-dettes-curve{
  0%,10%{transform:scaleY(1)}
  55%,70%{transform:scaleY(.34)}
  90%,100%{transform:scaleY(1)}
}
/* Le cadenas descend avec elle : le poids se relâche */
@keyframes cn-pic-dettes-body{
  0%,10%{transform:translateY(0)}
  55%,70%{transform:translateY(2.4px)}
  90%,100%{transform:translateY(0)}
}
/* L'anse s'ouvre au plus bas de la courbe, puis se referme en remontant */
@keyframes cn-pic-dettes-shackle{
  0%,26%{transform:translateY(0) rotate(0deg)}
  55%,70%{transform:translateY(1.2px) rotate(-38deg)}
  88%,100%{transform:translateY(0) rotate(0deg)}
}

/* Picto « horloge » — l'aiguille des minutes fait un tour complet (les 60 minutes de la
   consultation), l'heure avance d'un cran, puis les aiguilles reviennent à midi en fondu. */
.cn-pic--horloge .cn-pic__a1,
.cn-pic--horloge .cn-pic__a2{transform-box:fill-box;transform-origin:50% 100%}

.cn-pic--horloge .cn-pic__a1{animation:cn-pic-horloge-min 4.8s ease-in-out var(--cn-sync,0ms) infinite}
.cn-pic--horloge .cn-pic__a2{animation:cn-pic-horloge-hour 4.8s ease-in-out var(--cn-sync,0ms) infinite}

/* Minutes : un tour entier, tenue, puis retour à midi pendant le fondu */
@keyframes cn-pic-horloge-min{
  0%,10%{transform:rotate(0deg);opacity:1}
  55%,70%{transform:rotate(360deg);opacity:1}
  78%{transform:rotate(360deg);opacity:0}
  80%{transform:rotate(0deg);opacity:0}
  90%,100%{transform:rotate(0deg);opacity:1}
}
/* Heures : un cran, même rythme */
@keyframes cn-pic-horloge-hour{
  0%,10%{transform:rotate(0deg);opacity:1}
  55%,70%{transform:rotate(30deg);opacity:1}
  78%{transform:rotate(30deg);opacity:0}
  80%{transform:rotate(0deg);opacity:0}
  90%,100%{transform:rotate(0deg);opacity:1}
}

/* Picto « jauge » — l'aiguille monte du premier repère au milieu puis aux deux tiers,
   chaque repère s'allume à son passage, puis l'aiguille redescend. */
.cn-pic--jauge .cn-pic__a1{transform-box:fill-box;transform-origin:50% 81.5%;animation:cn-pic-jauge-needle 4.8s ease-in-out var(--cn-sync,0ms) infinite}
.cn-pic--jauge .cn-pic__a2{animation:cn-pic-jauge-t1 4.8s ease-in-out var(--cn-sync,0ms) infinite}
.cn-pic--jauge .cn-pic__a3{animation:cn-pic-jauge-t2 4.8s ease-in-out var(--cn-sync,0ms) infinite}
.cn-pic--jauge .cn-pic__a4{animation:cn-pic-jauge-t3 4.8s ease-in-out var(--cn-sync,0ms) infinite}

/* L'aiguille : du premier repère aux deux tiers, tenue, puis retour */
@keyframes cn-pic-jauge-needle{
  0%,10%{transform:rotate(-55deg)}
  55%,70%{transform:rotate(30deg)}
  90%,100%{transform:rotate(-55deg)}
}
/* Repère bas : s'allume dès le départ de l'aiguille */
@keyframes cn-pic-jauge-t1{
  0%,12%{opacity:.35}
  20%,70%{opacity:1}
  88%,100%{opacity:.35}
}
/* Repère milieu : s'allume à mi-course */
@keyframes cn-pic-jauge-t2{
  0%,34%{opacity:.35}
  43%,70%{opacity:1}
  88%,100%{opacity:.35}
}
/* Repère haut : effleuré au temps fort */
@keyframes cn-pic-jauge-t3{
  0%,52%{opacity:.35}
  60%,70%{opacity:.85}
  84%,100%{opacity:.35}
}

/* Picto « pièce » — la pièce bascule sur sa tranche, revient face à nous en montrant
   son symbole, respire au temps fort, puis se repose à plat. */
.cn-pic--piece .cn-pic__a1{transform-box:fill-box;transform-origin:50% 50%;animation:cn-pic-piece-flip 4.8s ease-in-out var(--cn-sync,0ms) infinite}
.cn-pic--piece .cn-pic__a2{animation:cn-pic-piece-face 4.8s ease-in-out var(--cn-sync,0ms) infinite}
.cn-pic--piece .cn-pic__a3{animation:cn-pic-piece-face 4.8s ease-in-out var(--cn-sync,0ms) infinite}

/* La bascule : la pièce se réduit jusqu'à sa tranche puis revient */
@keyframes cn-pic-piece-flip{
  0%,10%{transform:scale(1,1)}
  32%{transform:scale(.08,1)}
  50%{transform:scale(1,1)}
  60%{transform:scale(1.06,1.06)}
  70%{transform:scale(1,1)}
  90%,100%{transform:scale(1,1)}
}
/* Les détails de la face s'effacent le temps que la pièce montre sa tranche */
@keyframes cn-pic-piece-face{
  0%,16%{opacity:1}
  26%,42%{opacity:0}
  54%,100%{opacity:1}
}

/* cn-pic--plume — la plume se pose sur la ligne, signe de gauche à droite, se relève ; la signature s'efface, la plume revient.
   Repos (0-10 % / 90-100 %) : plume levée à gauche de la ligne, aucune signature.
   a1 = déplacement de la plume (translation) · a3 = balancement autour de la pointe (rotation) · a2 = signature (masque + fondu). */

.cn-pic--plume .cn-pic__a1 {
  transform-box: fill-box;
  transform-origin: 12% 100%;
  transform: translate(-24px, -3.5px);
  animation: cn-pic-plume-deplace 4.8s ease-in-out var(--cn-sync, 0ms) infinite;
}

.cn-pic--plume .cn-pic__a3 {
  transform-box: fill-box;
  transform-origin: 12% 100%;              /* la pointe de la plume */
  transform: rotate(-7deg);
  animation: cn-pic-plume-balance 4.8s ease-in-out var(--cn-sync, 0ms) infinite;
}

.cn-pic--plume .cn-pic__a2 {
  clip-path: inset(-2px calc(100% + 2px) -2px -2px);
  opacity: 1;
  animation: cn-pic-plume-signature 4.8s ease-in-out var(--cn-sync, 0ms) infinite;
}

@keyframes cn-pic-plume-deplace {
  0%, 10%   { transform: translate(-24px, -3.5px); }
  18%       { transform: translate(-24px, 0); }                                   /* la plume se pose */
  55%       { transform: translate(0, 0); animation-timing-function: cubic-bezier(.16, 1, .3, 1); }
  63%, 70%  { transform: translate(0, -4.5px); animation-timing-function: ease-in-out; }  /* elle se relève */
  90%, 100% { transform: translate(-24px, -3.5px); }
}

@keyframes cn-pic-plume-balance {
  0%, 10%   { transform: rotate(-7deg); }
  18%       { transform: rotate(0deg); }
  28%       { transform: rotate(2.5deg); }
  38%       { transform: rotate(-2deg); }
  48%       { transform: rotate(2deg); }
  55%       { transform: rotate(0deg); animation-timing-function: cubic-bezier(.16, 1, .3, 1); }
  63%, 70%  { transform: rotate(-9deg); animation-timing-function: ease-in-out; }
  90%, 100% { transform: rotate(-7deg); }
}

@keyframes cn-pic-plume-signature {
  0%, 18%   { clip-path: inset(-2px calc(100% + 2px) -2px -2px); opacity: 1; }
  55%, 70%  { clip-path: inset(-2px -1px -2px -2px);             opacity: 1; }   /* le masque suit la pointe */
  83%, 86%  { clip-path: inset(-2px -1px -2px -2px);             opacity: 0; }   /* la signature s'efface */
  88%       { clip-path: inset(-2px calc(100% + 2px) -2px -2px); opacity: 0; }
  92%, 100% { clip-path: inset(-2px calc(100% + 2px) -2px -2px); opacity: 1; }
}

/* cn-pic--enveloppe — le rabat se referme depuis le haut, l'enveloppe se soulève, la coche apparaît ; puis tout se rouvre.
   Repos (0-10 % / 90-100 %) : enveloppe posée, rabat ouvert (relevé), coin complet, aucune coche. */

.cn-pic--enveloppe .cn-pic__a3 {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  transform: translateY(0);
  animation: cn-pic-enveloppe-corps 4.8s ease-in-out var(--cn-sync, 0ms) infinite;
}

.cn-pic--enveloppe .cn-pic__a2 {
  transform-box: fill-box;
  transform-origin: 50% 0;                 /* charnière : bord haut du rabat */
  transform: scaleY(-1);
  animation: cn-pic-enveloppe-rabat 4.8s ease-in-out var(--cn-sync, 0ms) infinite;
}

.cn-pic--enveloppe .cn-pic__a5 {
  opacity: 1;
  animation: cn-pic-enveloppe-coin 4.8s ease-in-out var(--cn-sync, 0ms) infinite;
}

.cn-pic--enveloppe .cn-pic__a4 {
  transform-box: fill-box;
  transform-origin: 50% 50%;
  transform: scale(.6);
  opacity: 0;
  animation: cn-pic-enveloppe-coche 4.8s ease-in-out var(--cn-sync, 0ms) infinite;
}

@keyframes cn-pic-enveloppe-rabat {
  0%, 12%   { transform: scaleY(-1); }
  50%, 72%  { transform: scaleY(1); }
  90%, 100% { transform: scaleY(-1); }
}

@keyframes cn-pic-enveloppe-corps {
  0%, 38%   { transform: translateY(0); }
  56%, 70%  { transform: translateY(-2px); }
  88%, 100% { transform: translateY(0); }
}

@keyframes cn-pic-enveloppe-coin {
  0%, 50%   { opacity: 1; }
  57%, 70%  { opacity: 0; }
  80%, 100% { opacity: 1; }
}

@keyframes cn-pic-enveloppe-coche {
  0%, 54%   { transform: scale(.6); opacity: 0; animation-timing-function: cubic-bezier(.16, 1, .3, 1); }
  62%, 70%  { transform: scale(1);  opacity: 1; animation-timing-function: ease-in-out; }
  78%, 100% { transform: scale(.6); opacity: 0; }
}

/* cn-pic--telephone — le combiné vibre trois fois, puis les deux ondes s'étendent et s'effacent l'une après l'autre ; silence.
   Repos (0-10 % / 90-100 %) : combiné immobile, aucune onde. */

.cn-pic--telephone .cn-pic__a1 {
  transform-box: fill-box;
  transform-origin: 50% 50%;
  transform: rotate(0deg);
  animation: cn-pic-telephone-vibre 4.8s ease-in-out var(--cn-sync, 0ms) infinite;
}

.cn-pic--telephone .cn-pic__a4 {
  transform-box: fill-box;
  transform-origin: -4.2px 50%;            /* centre des ondes : bord droit du combiné */
  transform: scale(.55);
  opacity: 0;
  animation: cn-pic-telephone-onde1 4.8s ease-in-out var(--cn-sync, 0ms) infinite;
}

.cn-pic--telephone .cn-pic__a5 {
  transform-box: fill-box;
  transform-origin: -7.7px 50%;
  transform: scale(.6);
  opacity: 0;
  animation: cn-pic-telephone-onde2 4.8s ease-in-out var(--cn-sync, 0ms) infinite;
}

/* vibration régulière : six secousses amorties, une toutes les 13 % du cycle,
   du repos initial au repos final — la cadence se lit comme une sonnerie */
@keyframes cn-pic-telephone-vibre {
  0%       { transform: rotate(0deg); }
  10%      { transform: rotate(0deg); }
  11.5%    { transform: rotate(5deg); }
  13%      { transform: rotate(-5deg); }
  14.5%    { transform: rotate(4deg); }
  16%      { transform: rotate(-2.5deg); }
  17.5%    { transform: rotate(0deg); }
  23%      { transform: rotate(0deg); }
  24.5%    { transform: rotate(5deg); }
  26%      { transform: rotate(-5deg); }
  27.5%    { transform: rotate(4deg); }
  29%      { transform: rotate(-2.5deg); }
  30.5%    { transform: rotate(0deg); }
  36%      { transform: rotate(0deg); }
  37.5%    { transform: rotate(5deg); }
  39%      { transform: rotate(-5deg); }
  40.5%    { transform: rotate(4deg); }
  42%      { transform: rotate(-2.5deg); }
  43.5%    { transform: rotate(0deg); }
  49%      { transform: rotate(0deg); }
  50.5%    { transform: rotate(5deg); }
  52%      { transform: rotate(-5deg); }
  53.5%    { transform: rotate(4deg); }
  55%      { transform: rotate(-2.5deg); }
  56.5%    { transform: rotate(0deg); }
  62%      { transform: rotate(0deg); }
  63.5%    { transform: rotate(5deg); }
  65%      { transform: rotate(-5deg); }
  66.5%    { transform: rotate(4deg); }
  68%      { transform: rotate(-2.5deg); }
  69.5%    { transform: rotate(0deg); }
  75%      { transform: rotate(0deg); }
  76.5%    { transform: rotate(5deg); }
  78%      { transform: rotate(-5deg); }
  79.5%    { transform: rotate(4deg); }
  81%      { transform: rotate(-2.5deg); }
  82.5%    { transform: rotate(0deg); }
  100%     { transform: rotate(0deg); }
}

@keyframes cn-pic-telephone-onde1 {
  0%, 53%   { transform: scale(.55); opacity: 0; animation-timing-function: cubic-bezier(.16, 1, .3, 1); }
  59%       { transform: scale(1);   opacity: 1; animation-timing-function: ease-in-out; }
  66%, 100% { transform: scale(1.1); opacity: 0; }
}

@keyframes cn-pic-telephone-onde2 {
  0%, 57%   { transform: scale(.6);  opacity: 0; animation-timing-function: cubic-bezier(.16, 1, .3, 1); }
  64%       { transform: scale(1);   opacity: 1; animation-timing-function: ease-in-out; }
  72%, 100% { transform: scale(1.08); opacity: 0; }
}

/* cn-pic--marqueur — au repos le marqueur est suspendu au-dessus du plan ; il descend et se pose
   en douceur (l'ombre s'élargit), le point pulse une fois au temps fort, puis il se soulève à nouveau.
   Boucle unique 4.8s · repos 0-10 % · action 10-55 % · temps fort 55-70 % · retour 70-90 % · repos 90-100 %
   Hors animation (base) : dessin complet, posé. */

.cn-pic--marqueur .cn-pic__a1,
.cn-pic--marqueur .cn-pic__a2,
.cn-pic--marqueur .cn-pic__a3,
.cn-pic--marqueur .cn-pic__a4 {
  transform-box: fill-box;
  animation-duration: 4.8s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  animation-delay:var(--cn-sync,0ms);
}

/* le marqueur (corps + point) : descend et se pose sur le plan */
.cn-pic--marqueur .cn-pic__a1 {
  transform-origin: 50% 100%;
  animation-name: cn-pic-marqueur-drop;
}

/* l'ombre portée : s'élargit quand le marqueur touche le plan */
.cn-pic--marqueur .cn-pic__a2 {
  transform-origin: 50% 50%;
  animation-name: cn-pic-marqueur-shadow;
}

/* le point central (accent) : pulse une fois au temps fort */
.cn-pic--marqueur .cn-pic__a3 {
  transform-origin: 50% 50%;
  animation-name: cn-pic-marqueur-pulse;
}

/* l'onde du point (accent) : invisible hors du temps fort */
.cn-pic--marqueur .cn-pic__a4 {
  transform-origin: 50% 50%;
  stroke-width: .9;
  opacity: 0;
  animation-name: cn-pic-marqueur-ripple;
}

@keyframes cn-pic-marqueur-drop {
  0%, 10%   { transform: translateY(-5px); opacity: 1;  animation-timing-function: cubic-bezier(.16,1,.3,1); }
  44%, 70%  { transform: translateY(0);    opacity: 1;  animation-timing-function: ease-in-out; }
  90%, 100% { transform: translateY(-5px); opacity: 1; }
}

@keyframes cn-pic-marqueur-shadow {
  0%, 24%   { transform: scaleX(.5); opacity: .4; animation-timing-function: ease-in-out; }
  44%, 70%  { transform: scaleX(1);  opacity: 1;  animation-timing-function: ease-in-out; }
  90%, 100% { transform: scaleX(.5); opacity: .4; }
}

@keyframes cn-pic-marqueur-pulse {
  0%, 55%   { transform: scale(1);    animation-timing-function: ease-in-out; }
  60%       { transform: scale(1.28); animation-timing-function: ease-in-out; }
  68%, 100% { transform: scale(1); }
}

@keyframes cn-pic-marqueur-ripple {
  0%, 56%     { transform: scale(1);   opacity: 0;  animation-timing-function: cubic-bezier(.16,1,.3,1); }
  57%         { opacity: .55; animation-timing-function: ease-in-out; }
  70%         { transform: scale(2.4); opacity: 0; }
  70.1%, 100% { transform: scale(1);   opacity: 0; }
}

/* cn-pic--frais — au repos la note est vierge ; ses trois lignes s'inscrivent une à une
   (fondu + petit glissement), le montant (accent) s'inscrit au temps fort, puis tout s'efface
   dans l'ordre inverse.
   Boucle unique 4.8s · repos 0-10 % · action 10-55 % · temps fort 55-70 % · retour 70-90 % · repos 90-100 %
   Hors animation (base) : dessin complet. */

.cn-pic--frais .cn-pic__a2,
.cn-pic--frais .cn-pic__a3,
.cn-pic--frais .cn-pic__a4,
.cn-pic--frais .cn-pic__a5 {
  transform-box: fill-box;
  transform-origin: 0% 50%;
  animation-duration: 4.8s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  animation-delay:var(--cn-sync,0ms);
}

/* ligne 1 */
.cn-pic--frais .cn-pic__a2 { animation-name: cn-pic-frais-l1; }
/* ligne 2 */
.cn-pic--frais .cn-pic__a3 { animation-name: cn-pic-frais-l2; }
/* ligne 3 */
.cn-pic--frais .cn-pic__a4 { animation-name: cn-pic-frais-l3; }
/* le montant (accent), aligné à droite : il arrive de la droite */
.cn-pic--frais .cn-pic__a5 {
  transform-origin: 100% 50%;
  animation-name: cn-pic-frais-total;
}

@keyframes cn-pic-frais-l1 {
  0%, 10%   { transform: translateX(-2.5px); opacity: 0; animation-timing-function: cubic-bezier(.16,1,.3,1); }
  24%, 84%  { transform: translateX(0);      opacity: 1; animation-timing-function: ease-in-out; }
  90%, 100% { transform: translateX(-2.5px); opacity: 0; }
}

@keyframes cn-pic-frais-l2 {
  0%, 25%   { transform: translateX(-2.5px); opacity: 0; animation-timing-function: cubic-bezier(.16,1,.3,1); }
  39%, 79%  { transform: translateX(0);      opacity: 1; animation-timing-function: ease-in-out; }
  85%, 100% { transform: translateX(-2.5px); opacity: 0; }
}

@keyframes cn-pic-frais-l3 {
  0%, 40%   { transform: translateX(-2.5px); opacity: 0; animation-timing-function: cubic-bezier(.16,1,.3,1); }
  54%, 74%  { transform: translateX(0);      opacity: 1; animation-timing-function: ease-in-out; }
  80%, 100% { transform: translateX(-2.5px); opacity: 0; }
}

@keyframes cn-pic-frais-total {
  0%, 55%   { transform: translateX(2.5px); opacity: 0; animation-timing-function: cubic-bezier(.16,1,.3,1); }
  63%, 70%  { transform: translateX(0);     opacity: 1; animation-timing-function: ease-in-out; }
  75%, 100% { transform: translateX(2.5px); opacity: 0; }
}

/* cn-pic--provisions — au repos une seule pièce ; les pièces s'empilent une à une de bas en haut
   (glissement + fondu), la pièce du dessus (accent) se pose au temps fort et scintille,
   puis la pile se défait dans l'ordre inverse.
   Boucle unique 4.8s · repos 0-10 % · action 10-55 % · temps fort 55-70 % · retour 70-90 % · repos 90-100 %
   Hors animation (base) : pile complète. */

.cn-pic--provisions .cn-pic__a2,
.cn-pic--provisions .cn-pic__a3,
.cn-pic--provisions .cn-pic__a4 {
  transform-box: fill-box;
  transform-origin: 50% 50%;
  animation-duration: 4.8s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  animation-delay:var(--cn-sync,0ms);
}

/* pièce du milieu : arrive d'en haut et se pose sur la base */
.cn-pic--provisions .cn-pic__a2 { animation-name: cn-pic-provisions-coin2; }

/* pièce du dessus (accent) : se pose exactement au temps fort */
.cn-pic--provisions .cn-pic__a3 { animation-name: cn-pic-provisions-coin3; }

/* l'éclat (accent) : scintille une fois la pièce posée, invisible sinon */
.cn-pic--provisions .cn-pic__a4 {
  opacity: 0;
  animation-name: cn-pic-provisions-shine;
}

@keyframes cn-pic-provisions-coin2 {
  0%, 12%   { transform: translateY(-6px); opacity: 0; animation-timing-function: cubic-bezier(.16,1,.3,1); }
  34%, 80%  { transform: translateY(0);    opacity: 1; animation-timing-function: ease-in-out; }
  90%, 100% { transform: translateY(-6px); opacity: 0; }
}

@keyframes cn-pic-provisions-coin3 {
  0%, 34%   { transform: translateY(-7px); opacity: 0; animation-timing-function: cubic-bezier(.16,1,.3,1); }
  55%, 70%  { transform: translateY(0);    opacity: 1; animation-timing-function: ease-in-out; }
  80%, 100% { transform: translateY(-7px); opacity: 0; }
}

@keyframes cn-pic-provisions-shine {
  0%, 55%   { transform: scale(.3) rotate(-60deg); opacity: 0; animation-timing-function: cubic-bezier(.16,1,.3,1); }
  61%, 64%  { transform: scale(1) rotate(0deg);    opacity: 1; animation-timing-function: ease-in-out; }
  70%, 100% { transform: scale(.3) rotate(60deg);  opacity: 0; }
}

/* placements */
.cn-pic--btn{ width:18px; height:18px; margin-right:2px; }
.cn-pic--mbar{ width:18px; height:18px; margin-right:8px; vertical-align:-4px; }
.cn-mbar a{ display:inline-flex; align-items:center; justify-content:center; }
.cn-chrono__what .cn-pic{ width:22px; height:22px; margin-right:8px; vertical-align:-5px; }
.cn-label .cn-pic,h3 .cn-pic{ width:22px; height:22px; margin-right:8px; vertical-align:-6px; }
.cn-deck__card .cn-runhead .cn-pic{ width:26px; height:26px; }
.cn-footer__credit{ margin-top:26px; }

/* Halo supplémentaire au cœur de chaque page, plus de présence partout (2026-09-11) */
.cn-bg__halo--d{ width:46vw; height:46vw; max-width:700px; max-height:700px; right:8vw; bottom:18vh; background:radial-gradient(circle, rgba(150,70,70,.16), rgba(150,70,70,0) 68%); animation:cn-breathe 22s ease-in-out 9s infinite alternate; }

/* Tactile : toucher une photo ne déclenche jamais le glisser natif de l'image — le doigt fait défiler la page */
.cn-photo,.cn-fan__card,.cn-hero__photo{ touch-action:pan-y; -webkit-touch-callout:none; -webkit-user-select:none; user-select:none; }
.cn-photo img,.cn-fan__card img,.cn-photo image-slot{ -webkit-user-drag:none; pointer-events:none; }
.cn-photo image-slot::part(image){ -webkit-user-drag:none; pointer-events:none; }

/* ══ Mobile : le hero devient la photo en fond (format vertical), texte posé en bas (2026-09-11) ══ */
.cn-mbar{ display:none !important; }
@media (max-width:1023px){
  .cn-hero{ padding-top:0; padding-bottom:0; min-height:0; display:block; overflow:visible; }
  .cn-hero::before{ display:none; }
  .cn-hero .cn-hero__grid{ position:relative; display:flex; flex-direction:column; justify-content:flex-end; row-gap:0; min-height:min(92vh,820px);
    margin:0 calc(-1 * var(--gutter)); padding:calc(var(--header-h) + 24px) var(--gutter) 34px; border-radius:0 0 28px 28px; overflow:hidden; isolation:isolate; background:var(--ink); }
  .cn-hero .cn-hero__visual{ position:absolute; inset:0; z-index:0; margin:0; opacity:1 !important; transform:none !important; }
  .cn-hero .cn-hero__visual::before{ content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
    background:linear-gradient(180deg, rgba(18,24,42,.22) 0%, rgba(18,24,42,.06) 28%, rgba(18,24,42,.70) 60%, rgba(18,24,42,.95) 100%); }
  .cn-hero .cn-hero__visual::after{ display:none; }
  .cn-hero .cn-hero__photo{ position:absolute; inset:0; width:100%; height:100%; margin:0; border-radius:0; box-shadow:none; aspect-ratio:auto;
    clip-path:none !important; transform:none !important; opacity:1 !important; }
  .cn-hero .cn-hero__photo image-slot{ display:block; height:100%; }
  .cn-hero .cn-hero__photo image-slot::part(image){ height:100%; object-fit:cover; object-position:50% 50%; }
  .cn-hero__chips{ display:none; }
  .cn-hero .cn-hero__grid>div:first-child{ position:relative; z-index:2; color:var(--on-dark); }
  .cn-hero .cn-hero__name{ color:#F4F2ED; margin-top:16px; }
  .cn-hero .cn-hero__tag{ color:var(--red-2); }
  .cn-hero .cn-hero__quote{ color:rgba(244,242,237,.82); }
  .cn-hero .cn-hero__actions{ margin-top:26px; }
  .cn-hero .cn-hero__actions .cn-btn:first-child{ background:var(--on-dark); color:var(--ink); }
  .cn-hero .cn-hero__actions .cn-btn:first-child::before{ background:linear-gradient(180deg,rgba(18,24,42,.34) 0%,rgba(18,24,42,.13) 22%,rgba(18,24,42,0) 42%,rgba(18,24,42,0) 58%,rgba(18,24,42,.13) 78%,rgba(18,24,42,.34) 100%); }
  .cn-hero .cn-hero__actions .cn-btn--glass{ color:var(--on-dark); }
  .cn-hero .cn-hero__actions .cn-btn--glass::before{ background:linear-gradient(180deg,rgba(253,250,242,.55) 0%,rgba(253,250,242,.22) 20%,rgba(253,250,242,0) 40%,rgba(253,250,242,0) 60%,rgba(253,250,242,.22) 80%,rgba(253,250,242,.55) 100%); }
  .cn-hero .cn-hero__facts{ margin-top:26px; }
}

/* ══ Menu mobile : ouverture progressive, façon iOS ══ */
.cn-menu{ display:flex; opacity:0; visibility:hidden; pointer-events:none; transform:translateY(-10px) scale(.985); transform-origin:50% 0;
  transition:opacity .45s var(--ease-out), transform .65s var(--ease-out), visibility 0s linear .5s; }
html.cn-menu-open .cn-menu{ opacity:1; visibility:visible; pointer-events:auto; transform:none; transition:opacity .45s var(--ease-out), transform .65s var(--ease-out), visibility 0s; }
/* l'état par défaut est VISIBLE : le script se charge de l'apparition */
.cn-menu__list a{ opacity:1; }
/* pied de menu : langue, adresse et contact centrés dans une fiche */
.cn-menu__foot{ margin-top:auto; padding:22px 20px 20px; align-items:center; text-align:center; gap:14px; border-radius:22px;
  background:linear-gradient(180deg, rgba(255,255,255,.62), rgba(255,255,255,.34)); border:1px solid var(--glass-b); box-shadow:var(--shadow); }
.cn-menu__foot .cn-lang{ justify-content:center; }
.cn-menu__coord{ text-align:center; }

/* Fiche coordonnées sur téléphone : libellé au-dessus de la valeur, plus de colonne étroite (2026-09-12) */
@media (max-width:639px){ .cn-dl__row{ grid-template-columns:1fr; row-gap:5px; padding:13px 0; } }

/* L'ombre d'une fiche survolée passe au-dessus de la section suivante (plus de ligne nette) */
.cn-hero__facts{ position:relative; z-index:3; }
.cn-card{ z-index:1; }

/* Pilules sur photo : plus compactes quand la fiche est petite */
@media (max-width:1023px){ .cn-photo__tag,.cn-photo__meta{ font-size:10px; padding:8px 12px; letter-spacing:.08em; } }
@media (max-width:639px){ .cn-photo__tag,.cn-photo__meta{ font-size:9.5px; padding:7px 11px; bottom:10px; } }

/* ══ Actualités : ouverture d'article — la photo et la fiche de titre se partagent la largeur ══ */
.cn-article__head{ position:relative; margin-top:clamp(28px,3.5vw,48px); padding-bottom:clamp(30px,4vw,58px); }
.cn-article__cover{ width:100%; aspect-ratio:16/9; border-radius:var(--r); }
.cn-article__cover .cn-photo__scrim{ background:linear-gradient(180deg, rgba(18,24,42,.10) 0%, rgba(18,24,42,.02) 45%, rgba(18,24,42,.34) 100%); }
/* illustration d'article : elle ne se soulève pas et ne zoome pas sous la souris */
.cn-photo.cn-article__cover:hover{ box-shadow:var(--shadow); --ty:0px; }
.cn-photo.cn-article__cover:hover>image-slot{ transform:none; }
.cn-article__plate{ position:absolute; left:clamp(18px,3vw,54px); right:auto; bottom:0; width:min(680px, 72%);
  background:linear-gradient(180deg, rgba(255,255,255,.80), rgba(255,255,255,.62));
  -webkit-backdrop-filter:blur(22px) saturate(1.3); backdrop-filter:blur(22px) saturate(1.3);
  border:1px solid var(--glass-b); border-radius:22px; box-shadow:var(--shadow-2), inset 0 1px 0 rgba(255,255,255,.9);
  padding:clamp(20px,2.2vw,30px) clamp(22px,2.6vw,34px); display:flex; flex-direction:column; gap:14px; }
.cn-article__plate .cn-runhead{ margin:0; }
.cn-article__plate .cn-h2{ margin:0; font-size:clamp(24px,2.5vw,36px); }
/* À partir du bureau, la photo cesse d'être un bandeau : elle tient dans une colonne et la
   fiche de titre vient la chevaucher sur le côté. Le titre pèse alors autant que l'image. */
@media (min-width:1024px){
  .cn-article__head{ display:grid; grid-template-columns:minmax(0,1.22fr) minmax(0,1fr); align-items:center; padding-bottom:0; }
  .cn-article__cover{ aspect-ratio:3/2; }
  .cn-article__cover .cn-photo__scrim{ background:linear-gradient(180deg, rgba(18,24,42,.05), rgba(18,24,42,.15)); }
  .cn-article__plate{ position:relative; left:auto; right:auto; bottom:auto; width:auto; z-index:2;
    margin-left:clamp(-88px,-4.6vw,-44px); }
  .cn-article__plate .cn-h2{ font-size:clamp(26px,2.2vw,33px); }
}
@media (max-width:767px){
  .cn-article__head{ padding-bottom:0; }
  .cn-article__cover{ aspect-ratio:4/3; }
  .cn-article__plate{ position:static; width:auto; margin-top:-28px; margin-inline:clamp(10px,3vw,18px); }
}

/* ══ Carrousel discret dans une fiche photo (page Le cabinet) ══ */
.cn-swap image-slot{ position:absolute; inset:0; width:100%; height:100%; opacity:0; transition:opacity 1s var(--ease-out); }
.cn-swap image-slot.is-on{ opacity:1; }
.cn-swap__dots{ position:absolute; z-index:4; left:50%; bottom:4px; transform:translateX(-50%); display:flex; gap:5px; align-items:center; }
.cn-swap__dots span{ position:relative; width:26px; height:44px; display:flex; align-items:center; justify-content:center; background:none; box-shadow:none; }
.cn-swap__dots span::before{ content:""; width:18px; height:5px; border-radius:3px; background:rgba(244,242,237,.5); transform:scaleX(.34); transform-origin:center;
  transition:transform var(--d) var(--ease), background var(--d-fast) var(--ease); box-shadow:0 1px 5px rgba(18,24,42,.45); }
.cn-swap__dots span.is-active::before{ transform:scaleX(1); background:#F4F2ED; }

/* ══ Pages légales : une mise en page unique, centrée, sans visuel ══ */
.cn-p-head-col{ text-align:center; }
/* le chapeau s'aligne sur le corps de page (même bord gauche que les titres numérotés) */
.cn-p-lead{ text-align:left; }
.cn-p-lead .cn-lead{ margin-inline:0; max-width:none; }
.cn-p-col{ margin-inline:auto; }
.cn-p-col .cn-prose{ max-width:none; }
.cn-p-col .cn-prose h2{ text-align:left; }
.cn-p-maj{ margin-top:clamp(30px,3.4vw,44px); text-align:center; }
.cn-p-links{ display:flex; flex-wrap:wrap; gap:14px; justify-content:center; margin:clamp(14px,1.6vw,20px) auto 0; max-width:none; padding-top:0; border-top:0; }
.cn-p-maj{ position:relative; padding-top:clamp(14px,1.6vw,20px); margin-top:0; }
.cn-p-maj::before{ content:""; position:absolute; top:0; left:50%; transform:translateX(-50%); width:min(420px,60%); height:1px; background:var(--line); }
@media (max-width:639px){ .cn-p-links .cn-btn{ width:100%; justify-content:center; } }

/* Citation : les deux lignes sont équilibrées (plus d'effet « phrase coupée ») */
.cn-quote{ text-wrap:balance; }

/* Pages légales : le bloc de fin suit le texte de près */
.cn-p-body{ padding-bottom:clamp(6px,0.8vw,12px) !important; }
main > section[aria-label="Autres pages légales"]{ padding-top:0; padding-bottom:clamp(48px,6vw,84px); }

/* Barre du haut sur mobile : toujours posée sur un fond clair, le logo reste lisible */
@media (max-width:1023px){
  .cn-header{ background:var(--paper) !important; box-shadow:0 1px 0 var(--line); }
}

/* Le cabinet sur mobile : de l'air entre les boutons et la photo */
@media (max-width:1023px){
  .cn-p-head{ margin-top:clamp(26px,5vw,36px); }
  .cn-hero__visual{ margin-top:clamp(22px,4vw,32px); }
}

/* Carrousel : on peut le faire défiler au doigt et choisir une photo */
.cn-swap{ touch-action:pan-y; }
.cn-swap__dots{ pointer-events:auto; }
.cn-swap__dots span{ cursor:pointer; }

/* Mobile : la mention du barreau se place en haut du hero, jamais sur le visage */
@media (max-width:1023px){
  .cn-hero .cn-hero__grid>div:first-child{ position:static; }
  .cn-hero .cn-chip--balance{ position:absolute; z-index:3; top:calc(var(--header-h) + 18px); left:var(--gutter); }
}

/* Pilules : le point vit, comme les points de la chronologie */
.cn-chip::before{ animation:cn-chip-pulse 4.8s ease-in-out var(--cn-sync,0ms) infinite; }
@keyframes cn-chip-pulse{
  0%,52%{ box-shadow:0 0 0 0 rgba(138,42,50,.34); transform:scale(1); }
  66%{ box-shadow:0 0 0 5px rgba(138,42,50,0); transform:scale(1.18); }
  80%,100%{ box-shadow:0 0 0 0 rgba(138,42,50,0); transform:scale(1); }
}
.cn-chip--dark::before{ animation-name:cn-chip-pulse-light; }
@keyframes cn-chip-pulse-light{
  0%,52%{ box-shadow:0 0 0 0 rgba(176,66,74,.42); transform:scale(1); }
  66%{ box-shadow:0 0 0 5px rgba(176,66,74,0); transform:scale(1.18); }
  80%,100%{ box-shadow:0 0 0 0 rgba(176,66,74,0); transform:scale(1); }
}

/* Une pilule n'est jamais collée au titre qui suit */
.cn-stack > div:first-child > .cn-chip{ margin-bottom:2px; }
.cn-p-chip{ margin-bottom:clamp(14px,1.6vw,20px); display:inline-flex; }

/* Domaines : blocs de complément dans les fiches du deck (note sombre et « à apporter ») */
.cn-deck__bring{ margin-top:16px; padding-top:14px; border-top:1px solid var(--line); }
.cn-deck__bring .cn-label{ margin-bottom:6px; display:block; }
.cn-deck.is-dense .cn-deck__bring{ margin-top:11px; padding-top:10px; }
.cn-deck.is-dense .cn-deck__card>.cn-deck__note{ padding:12px 18px; margin-top:10px; }
.cn-deck.is-dense .cn-deck__card>.cn-deck__note .cn-body{ font-size:14px; line-height:1.5; }
.cn-deck.is-dense .cn-deck__bring .cn-meta{ font-size:12.5px; line-height:1.45; }

/* ══ Tactile : aucune cible sous 44 px (2026-09-13) ══
   Au doigt, un lien de 20 px de haut se rate une fois sur deux. On élargit la zone
   sensible sans toucher au dessin : le contenu ne bouge pas, seule la surface grandit. */
@media (hover:none){
  .cn-btn, .cn-menu-btn, .cn-wordmark{ min-height:46px; }
  .cn-wordmark{ display:inline-flex; align-items:center; }
  .cn-lang button{ min-width:44px; min-height:44px; }
  .cn-toc a{ padding-block:12px; }
  .cn-index__row{ padding-block:14px; }
  /* tout lien de texte reçoit une surface de 44 px sans que son dessin bouge */
  .cn-dl dd a, .cn-footer a, .cn-menu__coord a, .cn-prose a, .cn-p-links a,
  .cn-index__row, .cn-toc a, .cn-link, .cn-meta a, .cn-muted a, main p a{ position:relative; }
  .cn-dl dd a::after, .cn-footer a:not(.cn-btn)::after, .cn-menu__coord a::after,
  .cn-prose a::after, .cn-toc a::after, .cn-link::after, .cn-meta a::after,
  .cn-muted a::after, main p a:not(.cn-btn)::after{
    content:""; position:absolute; left:-6px; right:-6px; top:50%; height:44px;
    transform:translateY(-50%); pointer-events:auto; }
}
/* Un numéro de téléphone et une adresse email sont des actions : ils doivent se voir. */
.cn-dl dd a[href^="tel:"], .cn-dl dd a[href^="mailto:"],
.cn-footer a[href^="tel:"], .cn-footer a[href^="mailto:"],
.cn-menu__coord a[href^="tel:"], .cn-menu__coord a[href^="mailto:"]{
  border-bottom:1px solid currentColor; padding-bottom:1px; }
.cn-dl dd a[href^="tel:"], .cn-dl dd a[href^="mailto:"]{ color:var(--red); }
@media (max-width:639px){
  /* les deux numéros se touchaient, chacun sur sa ligne et espacé */
  .cn-dl dd a[href^="tel:"]{ display:inline-block; margin-block:3px; }
}

/* ══ Bandes sombres : alignement et raccord au pied (2026-09-13) ══
   Leur marge latérale valait 12 px sur téléphone alors que toute la page s'aligne sur la
   gouttière de 20 px : le bloc dépassait de 8 px de chaque côté, et son texte commençait
   12 px plus à droite que le reste. On l'aligne sur la gouttière. */
.cn-dark,.cn-band{ margin-inline:max(var(--gutter), clamp(12px,2vw,28px)); }
/* Quand la bande sombre termine la page, elle se raccorde au pied sans bande crème entre
   les deux : le pied perdait déjà sa marge, il manquait celle de la bande. */
main:has(> .cn-dark:last-child) > .cn-dark:last-child,
main:has(> .cn-band:last-child) > .cn-band:last-child{ margin-bottom:0; border-bottom-left-radius:0; border-bottom-right-radius:0; }

/* ══ Sommaire sur mobile : une barre de pastilles collée sous l'en-tête (2026-09-13) ══
   Empilé, le sommaire latéral se retrouvait au-dessus de tous les chapitres puis disparaissait
   au premier écran : il était calculé et surligné pour personne. Il devient une barre
   horizontale qui reste à l'écran pendant la lecture et suit le chapitre en cours. */
@media (max-width:1023px){
  .cn-tocbar{ position:sticky; top:var(--header-h); z-index:40;
    margin-inline:calc(-1 * var(--gutter)); padding:9px var(--gutter); border-radius:0; border-left:0; border-right:0;
    background:var(--paper); box-shadow:0 1px 0 var(--line);
    -webkit-backdrop-filter:none; backdrop-filter:none; }   /* .cn-card apporte un flou : inutile ici, et c'est une couche composée de plus */
  .cn-tocbar .cn-label{ display:none; }
  .cn-tocbar .cn-toc{ flex-wrap:nowrap; overflow-x:auto; gap:8px; scroll-snap-type:x proximity;
    scrollbar-width:none; -ms-overflow-style:none; -webkit-overflow-scrolling:touch;
    margin-inline:calc(-1 * var(--gutter)); padding-inline:var(--gutter); }
  .cn-tocbar .cn-toc::-webkit-scrollbar{ display:none; }
  .cn-tocbar .cn-toc a{ flex:none; scroll-snap-align:center; white-space:nowrap;
    padding:11px 15px; border-radius:999px; border:1px solid var(--line);
    background:rgba(255,255,255,.62); color:var(--text-2); }
  .cn-tocbar .cn-toc a .cn-pic{ display:none; }
  .cn-tocbar .cn-toc a.is-active{ background:var(--ink); border-color:var(--ink); color:var(--paper); }
  .cn-tocbar .cn-toc a.is-active .cn-num{ color:rgba(244,242,237,.6); }
}

/* Pour que la barre de sommaire colle vraiment, son bloc conteneur doit couvrir la section :
   enfermée dans la colonne latérale, elle repartait avec elle au premier écran. On efface les
   boîtes intermédiaires sur mobile. L'appel à l'action passe du même coup APRÈS les chapitres,
   à sa place logique : on ne propose pas un rendez-vous avant d'avoir dit de quoi on parle. */
@media (max-width:1023px){
  .cn-sidecol, .cn-sidecol > .cn-p-side, .cn-sidecol > .cn-index-figure{ display:contents; }
  .cn-sidecol .cn-tocbar{ grid-column:1/-1; order:1; }
  .cn-maincol{ order:2; }
  .cn-sidecol .cn-card--ink{ grid-column:1/-1; order:3; }
}

/* ══ Zone sûre de l'iPhone et couches fixes (2026-09-13) ══
   La page déclare « viewport-fit=cover » : le contenu passe donc sous l'encoche et la barre
   du haut touche enfin le bord de l'écran. --header-h vaut la hauteur TOTALE de la barre,
   encoche comprise, si bien que tous les calages collants (sommaire, ancres, hauts de page)
   suivent sans autre changement. */
@supports (top: env(safe-area-inset-top)){
  :root{ --header-h: calc(var(--header-bar) + env(safe-area-inset-top, 0px)); }
  /* en paysage, l'encoche mange un côté : le contenu ne passe jamais dessous */
  .cn-wrap{ width:min(100% - 2*max(var(--gutter), env(safe-area-inset-left), env(safe-area-inset-right)), var(--max)); }
  .cn-menu{ padding-bottom:calc(32px + env(safe-area-inset-bottom, 0px)); }
}
/* Un calque fixe plein écran avec un flou d'arrière-plan reste composité en permanence et
   désynchronise les éléments fixes pendant le défilement sous Safari. Le menu fermé ne floute
   donc plus rien, et la barre du haut se passe du flou sur mobile : son fond est déjà opaque. */
html:not(.cn-menu-open) .cn-menu{ -webkit-backdrop-filter:none; backdrop-filter:none; }
@media (max-width:1023px){
  .cn-header{ -webkit-backdrop-filter:none !important; backdrop-filter:none !important; }
}

/* ══ Sommaire latéral : largeur ajustée à son contenu (2026-09-13) ══
   Occupant toute sa colonne, il frôlait la fiche voisine (29 px) tout en laissant un large
   vide à l'intérieur, criant sur Honoraires où les libellés tiennent en un mot. On le borne,
   à la même largeur sur Domaines et sur Honoraires, et l'espace gagné devient de la respiration. */
@media (min-width:1024px){
  .cn-sidecol .cn-tocbar,
  .cn-sidecol .cn-card--ink{ max-width:350px; }
}