/* ═══════════════════════════════════════════════════════════════════
   photographe-de-mariages.be
   Direction artistique : éditoriale — grille magazine, typographie
   surdimensionnée, blancs généreux. Les photos portent la couleur ;
   l'interface s'efface.
   Fontes auto-hébergées (RGPD). Aucune dépendance externe.
   ═══════════════════════════════════════════════════════════════════ */

/* ---------- fontes ---------- */
@font-face{font-family:Playfair;src:url('/assets/fonts/playfair-display-latin-400-normal.woff2') format('woff2');
  font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Playfair;src:url('/assets/fonts/playfair-display-latin-500-normal.woff2') format('woff2');
  font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:Playfair;src:url('/assets/fonts/playfair-display-latin-400-italic.woff2') format('woff2');
  font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:Inter;src:url('/assets/fonts/inter-latin-300-normal.woff2') format('woff2');
  font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:Inter;src:url('/assets/fonts/inter-latin-400-normal.woff2') format('woff2');
  font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Inter;src:url('/assets/fonts/inter-latin-500-normal.woff2') format('woff2');
  font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:Inter;src:url('/assets/fonts/inter-latin-600-normal.woff2') format('woff2');
  font-weight:600;font-style:normal;font-display:swap}

/* ---------- jetons ---------- */
:root{
  /* couleurs — contrastes vérifiés WCAG AA */
  --ink:#14120F;          /* 18.70:1 sur blanc */
  --ink-2:#5B544B;        /* 7.46:1 */
  --line:#E4DFD8;
  --line-2:#F0ECE6;
  --paper:#FFFFFF;
  --paper-2:#F6F3EF;
  --paper-3:#F1ECE5;
  --accent:#7A5C3B;       /* 6.14:1 sur blanc, 5.5:1 sur --paper-2 */
  --accent-2:#A08256;
  --on-dark:#FFFFFF;
  --on-dark-2:#B9B1A6;    /* 8.82:1 sur --ink */

  /* typo */
  --serif:Playfair,"Iowan Old Style",Palatino,Georgia,serif;
  --sans:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;

  /* échelle typographique */
  --t-display:clamp(2.75rem,8.5vw,7.25rem);
  --t-h1:clamp(2.25rem,5.2vw,4.25rem);
  --t-h2:clamp(1.75rem,3.4vw,3rem);
  --t-h3:clamp(1.25rem,1.8vw,1.65rem);
  --t-lead:clamp(1.0625rem,1.35vw,1.3125rem);
  --t-body:1.0625rem;
  --t-small:0.9375rem;
  --t-label:0.6875rem;

  /* rythme — base 8 */
  --s-1:.5rem; --s-2:1rem; --s-3:1.5rem; --s-4:2rem; --s-5:3rem;
  --s-6:4rem; --s-7:6rem; --s-8:8rem;
  --sec:clamp(4.5rem,9vw,9rem);
  --gut:clamp(1.25rem,5vw,4rem);
  --max:1320px;
  --measure:68ch;

  /* mouvement */
  --e-out:cubic-bezier(.16,.84,.44,1);
  --e-io:cubic-bezier(.65,0,.35,1);
  --d-fast:180ms; --d:280ms; --d-slow:520ms;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important}
}
body{margin:0;background:var(--paper);color:var(--ink);
  font:400 var(--t-body)/1.72 var(--sans);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  font-feature-settings:"kern" 1,"liga" 1}
img{max-width:100%;height:auto;display:block}
ul{margin:0;padding:0;list-style:none}
p{margin:0}
h1,h2,h3,h4{margin:0;font-family:var(--serif);font-weight:400;line-height:1.06;
  letter-spacing:-.022em;text-wrap:balance}
a{color:inherit}
strong{font-weight:600}

.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gut)}
.narrow{max-width:var(--measure);margin:0 auto}
.muted{color:var(--ink-2)}
.skip{position:absolute;left:-9999px;top:0;z-index:999;background:var(--ink);color:#fff;
  padding:14px 22px;font-size:var(--t-small)}
.skip:focus{left:0}
:focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:1px}

/* ---------- micro-typographie ---------- */
.kicker{display:block;font:500 var(--t-label)/1 var(--sans);letter-spacing:.24em;
  text-transform:uppercase;color:var(--accent)}
.kicker .num{color:var(--ink);opacity:.32;margin-right:.7em;font-variant-numeric:tabular-nums}

/* ---------- boutons ---------- */
.btn{display:inline-flex;align-items:center;gap:.7em;min-height:52px;padding:16px 34px;
  font:500 var(--t-label)/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;
  text-decoration:none;cursor:pointer;border:1px solid var(--ink);background:var(--ink);
  color:var(--on-dark);position:relative;overflow:hidden;
  transition:color var(--d) var(--e-out),border-color var(--d) var(--e-out)}
.btn::after{content:"";position:absolute;inset:0;background:var(--accent);z-index:0;
  transform:scaleY(0);transform-origin:bottom;transition:transform var(--d) var(--e-out)}
.btn>*{position:relative;z-index:1}
.btn:hover::after,.btn:focus-visible::after{transform:scaleY(1)}
.btn:hover,.btn:focus-visible{border-color:var(--accent)}
.btn-ghost{background:transparent;color:var(--ink)}
.btn-ghost:hover,.btn-ghost:focus-visible{color:var(--on-dark)}
.btn-ghost::after{background:var(--ink)}
.btn-ghost:hover{border-color:var(--ink)}
.btn-light{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.btn-light:hover,.btn-light:focus-visible{color:var(--on-dark)}
.btn-outline-light{background:transparent;color:var(--on-dark);border-color:rgba(255,255,255,.45)}
.btn-outline-light::after{background:var(--paper)}
.btn-outline-light:hover,.btn-outline-light:focus-visible{color:var(--ink);border-color:var(--paper)}

/* lien texte à soulignement animé */
.prose a:not(.btn),.aside-block a,.site-foot a{
  text-decoration:none;background-image:linear-gradient(currentColor,currentColor);
  background-size:100% 1px;background-repeat:no-repeat;background-position:0 100%;
  padding-bottom:1px;transition:background-size var(--d) var(--e-out),color var(--d) var(--e-out)}
.prose a:not(.btn){color:var(--accent)}
.prose a:not(.btn):hover{background-size:0 1px}
.site-foot a{background-size:0 1px}
.site-foot a:hover{background-size:100% 1px}

/* ---------- en-tête ---------- */
.site-head{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.86);
  backdrop-filter:saturate(180%) blur(14px);-webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid transparent;transition:border-color var(--d)}
.site-head::after{content:"";position:absolute;left:var(--gut);right:var(--gut);bottom:0;
  height:1px;background:var(--line)}
.head-in{display:flex;align-items:center;justify-content:space-between;
  min-height:clamp(68px,7vw,88px);gap:var(--s-3)}
.brand{font-family:var(--serif);font-size:clamp(1.05rem,1.5vw,1.3rem);text-decoration:none;
  line-height:1.15;letter-spacing:-.01em}
.brand span{display:block;font:500 var(--t-label)/1 var(--sans);letter-spacing:.22em;
  text-transform:uppercase;color:var(--ink-2);margin-top:6px}
#nav ul{display:flex;gap:clamp(1.5rem,2.6vw,2.75rem)}
#nav a{position:relative;text-decoration:none;font-size:var(--t-small);color:var(--ink-2);
  padding:8px 0;transition:color var(--d-fast) var(--e-out)}
#nav a::after{content:"";position:absolute;left:0;right:0;bottom:2px;height:1px;
  background:var(--accent);transform:scaleX(0);transform-origin:right;
  transition:transform var(--d) var(--e-out)}
#nav a:hover,#nav a[aria-current]{color:var(--ink)}
#nav a:hover::after,#nav a[aria-current]::after{transform:scaleX(1);transform-origin:left}
.burger{display:none;width:48px;height:48px;background:none;border:0;cursor:pointer;
  flex-direction:column;justify-content:center;align-items:flex-end;gap:6px;padding:0}
.burger span{display:block;height:1px;background:var(--ink);transition:transform var(--d) var(--e-io),
  opacity var(--d-fast),width var(--d) var(--e-out)}
.burger span:nth-child(1){width:26px}.burger span:nth-child(2){width:18px}.burger span:nth-child(3){width:26px}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg);width:26px}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg);width:26px}
@media(max-width:900px){
  .burger{display:flex}
  #nav{position:fixed;left:0;right:0;top:clamp(68px,7vw,88px);background:var(--paper);
    border-bottom:1px solid var(--line);transform:translateY(-115%);visibility:hidden;
    transition:transform var(--d-slow) var(--e-io),visibility var(--d-slow);
    max-height:calc(100dvh - 88px);overflow:auto}
  #nav.open{transform:translateY(0);visibility:visible}
  #nav ul{flex-direction:column;gap:0;padding:var(--s-2) var(--gut) var(--s-5)}
  #nav a{display:block;padding:20px 0;font-family:var(--serif);font-size:1.5rem;color:var(--ink);
    border-bottom:1px solid var(--line-2)}
  #nav a::after{display:none}
}

/* ---------- hero ---------- */
.hero{position:relative;min-height:min(92vh,880px);min-height:min(92dvh,880px);
  display:flex;align-items:flex-end;color:var(--on-dark);overflow:hidden;background:var(--ink)}
.hero>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero::after{content:"";position:absolute;inset:0;background:
  linear-gradient(180deg,rgba(20,18,15,.34) 0%,rgba(20,18,15,.06) 34%,rgba(20,18,15,.5) 72%,rgba(20,18,15,.86) 100%)}
.hero .wrap{position:relative;z-index:2;padding-top:var(--s-8);
  padding-bottom:clamp(3rem,7vw,6rem);width:100%}
.hero h1{font-size:var(--t-display);max-width:15ch;font-weight:400;letter-spacing:-.035em;
  line-height:.98;text-shadow:0 2px 40px rgba(0,0,0,.28)}
.hero .lead{margin-top:var(--s-3);max-width:44ch;font-size:var(--t-lead);font-weight:300;
  color:rgba(255,255,255,.92);text-shadow:0 1px 20px rgba(0,0,0,.32)}
.hero .acts{margin-top:var(--s-4);display:flex;gap:var(--s-2);flex-wrap:wrap}
.hero-meta{position:absolute;bottom:clamp(3rem,7vw,6rem);right:var(--gut);z-index:2;
  writing-mode:vertical-rl;font:500 var(--t-label)/1 var(--sans);letter-spacing:.26em;
  text-transform:uppercase;color:rgba(255,255,255,.62)}
@media(max-width:900px){.hero-meta{display:none}}

/* ---------- en-tête de page ---------- */
.page-head{padding:clamp(4rem,9vw,8rem) 0 clamp(2.5rem,4vw,4rem);position:relative}
.page-head::after{content:"";display:block;position:absolute;left:var(--gut);right:var(--gut);
  bottom:0;height:1px;background:var(--line)}
.page-head h1{font-size:var(--t-h1);max-width:18ch;margin-top:var(--s-3)}
.page-head .lead{margin-top:var(--s-3);max-width:var(--measure);font-size:var(--t-lead);
  color:var(--ink-2);font-weight:300}

/* ---------- sections ---------- */
section{padding:var(--sec) 0}
section.tight{padding:clamp(3rem,5vw,5rem) 0}
.creme{background:var(--paper-2)}
.sec-head{margin-bottom:clamp(2.5rem,4.5vw,4.5rem);max-width:62ch}
.sec-head h2{font-size:var(--t-h2);margin-top:var(--s-2)}
.sec-head p{margin-top:var(--s-2);color:var(--ink-2);font-size:var(--t-lead);font-weight:300}

/* ---------- prose éditoriale ---------- */
.prose{font-size:var(--t-body);line-height:1.78}
.prose p+p{margin-top:1.35em}
.prose h2{font-size:var(--t-h2);margin:1.9em 0 .55em;letter-spacing:-.025em}
.prose h2:first-child{margin-top:0}
.prose h3{font-family:var(--sans);font-size:1.0625rem;font-weight:600;letter-spacing:0;
  margin:2em 0 .45em}
.prose>p:first-of-type::first-letter{float:left;font-family:var(--serif);font-size:4.1em;
  line-height:.82;padding:.06em .12em 0 0;color:var(--accent)}
@media(max-width:520px){.prose>p:first-of-type::first-letter{font-size:3.2em}}

/* ---------- piliers ---------- */
.pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(2rem,4vw,4.5rem)}
@media(max-width:860px){.pillars{grid-template-columns:1fr;gap:var(--s-5)}}
.pillar{padding-top:var(--s-3);border-top:1px solid var(--ink)}
.pillar .n{font:500 var(--t-label)/1 var(--sans);letter-spacing:.24em;color:var(--accent);
  font-variant-numeric:tabular-nums}
.pillar h3{font-size:var(--t-h3);margin:var(--s-2) 0 var(--s-1)}
.pillar p{color:var(--ink-2);font-size:var(--t-small)}

/* ---------- galeries ---------- */
.grid{columns:3;column-gap:clamp(.75rem,1.4vw,1.25rem)}
@media(max-width:1024px){.grid{columns:2}}
@media(max-width:620px){.grid{columns:1}}
.grid .ph{margin:0 0 clamp(.75rem,1.4vw,1.25rem);break-inside:avoid}
.ph{overflow:hidden;background:var(--paper-3);cursor:zoom-in;position:relative}
.ph img{width:100%;transition:transform var(--d-slow) var(--e-out),filter var(--d-slow) var(--e-out)}
.ph::after{content:"";position:absolute;inset:0;background:var(--ink);opacity:0;
  transition:opacity var(--d) var(--e-out);pointer-events:none}
.ph:hover img,.ph:focus-visible img{transform:scale(1.04)}
.ph:hover::after{opacity:.06}
.strip{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(.75rem,1.4vw,1.25rem)}
@media(max-width:820px){.strip{grid-template-columns:repeat(2,1fr)}}
.strip .ph{margin:0;aspect-ratio:3/2}
.strip .ph img{height:100%;object-fit:cover}

/* ---------- tarifs, traitement éditorial ---------- */
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid var(--ink)}
@media(max-width:980px){.plans{grid-template-columns:1fr;border-top:none}}
.plan{display:flex;flex-direction:column;background:transparent;
  border-right:1px solid var(--line);padding:0}
.plan:last-child{border-right:none}
@media(max-width:980px){.plan{border-right:none;border-top:1px solid var(--ink)}}
.plan.vedette{background:var(--paper-2)}
.creme .plan.vedette{background:var(--paper)}
.plan .ph{margin:0;aspect-ratio:4/3;cursor:default}
.plan .ph img{height:100%;object-fit:cover}
.plan-body{padding:clamp(1.75rem,2.6vw,2.5rem);display:flex;flex-direction:column;flex:1}
.plan .tag{font:500 var(--t-label)/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;
  color:var(--accent);margin-bottom:var(--s-2)}
.plan h3{font-size:clamp(1.5rem,2.4vw,2rem)}
.plan .acc{color:var(--ink-2);font-size:var(--t-small);margin-top:var(--s-1)}
.price{font-family:var(--serif);font-size:clamp(2.5rem,4.5vw,3.5rem);line-height:1;
  margin:var(--s-3) 0 var(--s-1);font-variant-numeric:tabular-nums;letter-spacing:-.03em}
.price small{font:400 var(--t-label)/1 var(--sans);letter-spacing:.18em;color:var(--ink-2);
  text-transform:uppercase}
.plan .dur{font:500 var(--t-label)/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink-2)}
.plan ul{margin:var(--s-3) 0 0;flex:1}
.plan li{padding:11px 0 11px 22px;position:relative;font-size:var(--t-small);
  border-top:1px solid var(--line-2);color:var(--ink-2)}
.plan li:first-child{border-top:none}
.plan li::before{content:"";position:absolute;left:0;top:19px;width:9px;height:1px;background:var(--accent)}
.plan .supp{margin-top:var(--s-2);padding-top:var(--s-2);border-top:1px solid var(--line-2);
  font-size:var(--t-label);letter-spacing:.02em;color:var(--ink-2);text-transform:none}
.plan .btn{margin-top:var(--s-3);justify-content:center}
.note{border-left:2px solid var(--accent);padding:var(--s-2) 0 var(--s-2) var(--s-3);
  font-size:var(--t-small);color:var(--ink-2);max-width:var(--measure)}

/* ---------- listes descriptives ---------- */
.incl{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s-4) var(--s-3)}
@media(max-width:960px){.incl{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.incl{grid-template-columns:1fr}}
.incl>div{padding-top:var(--s-2);border-top:1px solid var(--line)}
.incl h3{font-family:var(--sans);font-size:1rem;font-weight:600;letter-spacing:0;
  margin-bottom:var(--s-1);line-height:1.4}
.incl p{font-size:var(--t-small);color:var(--ink-2)}

/* ---------- témoignages, en citations ---------- */
.temoins{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(2rem,3.5vw,3.5rem)}
@media(max-width:900px){.temoins{grid-template-columns:1fr;max-width:60ch;margin-inline:auto}}
.temoin{margin:0;display:flex;flex-direction:column;padding-top:var(--s-3);
  border-top:1px solid var(--ink)}
.temoin blockquote{margin:0;flex:1;font-family:var(--serif);font-style:italic;font-weight:400;
  font-size:clamp(1.125rem,1.6vw,1.375rem);line-height:1.5;letter-spacing:-.01em}
.temoin blockquote strong{font-weight:400;font-style:italic;
  background-image:linear-gradient(var(--accent),var(--accent));background-size:100% 1px;
  background-repeat:no-repeat;background-position:0 96%;padding-bottom:2px}
.temoin figcaption{margin-top:var(--s-3);font:500 var(--t-label)/1.5 var(--sans);
  letter-spacing:.16em;text-transform:uppercase}
.temoin figcaption span{display:block;font-weight:400;letter-spacing:.1em;color:var(--ink-2);
  margin-top:6px;text-transform:none;font-size:var(--t-label)}

/* ---------- FAQ ---------- */
.faq-grp{margin-bottom:clamp(2.5rem,4vw,4rem)}
.faq-grp>h2{font:500 var(--t-label)/1 var(--sans);letter-spacing:.24em;text-transform:uppercase;
  color:var(--accent);margin-bottom:var(--s-2)}
details{border-top:1px solid var(--line)}
.faq-grp details:first-of-type{border-top:1px solid var(--ink)}
details:last-of-type{border-bottom:1px solid var(--line)}
summary{cursor:pointer;padding:var(--s-3) 48px var(--s-3) 0;position:relative;list-style:none;
  font-family:var(--serif);font-size:clamp(1.125rem,1.55vw,1.3125rem);line-height:1.35;
  transition:color var(--d-fast) var(--e-out)}
summary::-webkit-details-marker{display:none}
summary::after,summary::before{content:"";position:absolute;right:8px;background:var(--ink);
  transition:transform var(--d) var(--e-out),background var(--d-fast)}
summary::after{top:calc(var(--s-3) + .62em);width:15px;height:1px}
summary::before{top:calc(var(--s-3) + .62em - 7px);right:15px;width:1px;height:15px}
details[open] summary::before{transform:rotate(90deg);opacity:0}
summary:hover{color:var(--accent)}
summary:hover::after,summary:hover::before{background:var(--accent)}
details[open] summary{color:var(--accent)}
details .ans{padding:0 48px var(--s-3) 0;color:var(--ink-2);max-width:var(--measure)}

/* ---------- formulaire ---------- */
.contact-grid{display:grid;grid-template-columns:1.5fr 1fr;gap:clamp(2.5rem,6vw,6rem);
  align-items:start}
@media(max-width:920px){.contact-grid{grid-template-columns:1fr}}
.field{margin-bottom:var(--s-3)}
.field label{display:block;font:500 var(--t-label)/1 var(--sans);letter-spacing:.16em;
  text-transform:uppercase;margin-bottom:10px}
.field .hint{font-weight:400;color:var(--ink-2);letter-spacing:.08em}
input,select,textarea{width:100%;min-height:52px;padding:14px 0;font:400 var(--t-body) var(--sans);
  color:var(--ink);background:transparent;border:0;border-bottom:1px solid var(--line);
  border-radius:0;transition:border-color var(--d) var(--e-out)}
input::placeholder,textarea::placeholder{color:var(--ink-2);opacity:.55}
input:focus,select:focus,textarea:focus{outline:none;border-bottom-color:var(--accent)}
input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--accent);
  outline-offset:3px}
select{appearance:none;cursor:pointer;padding-right:28px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7'%3E%3Cpath fill='none' stroke='%235B544B' d='M1 1l4.5 4.5L10 1'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 4px center}
textarea{min-height:132px;resize:vertical;line-height:1.7}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-3)}
@media(max-width:600px){.row2{grid-template-columns:1fr}}
.consent{display:flex;gap:14px;align-items:flex-start;font-size:var(--t-small);color:var(--ink-2)}
.consent input{width:20px;height:20px;min-height:20px;flex:0 0 auto;margin-top:3px;
  accent-color:var(--accent);border:1px solid var(--line)}
.aside-block{padding-top:var(--s-2);border-top:1px solid var(--ink);margin-bottom:var(--s-4)}
.aside-block h2{font:500 var(--t-label)/1 var(--sans);letter-spacing:.22em;text-transform:uppercase;
  color:var(--accent);margin-bottom:var(--s-2)}
.aside-block p,.aside-block li{font-size:var(--t-small);color:var(--ink-2)}
.aside-block strong{color:var(--ink)}

/* ---------- appel à l'action ---------- */
.cta{background:var(--ink);color:var(--on-dark);text-align:center;position:relative}
.cta h2{font-size:var(--t-h2);max-width:20ch;margin:0 auto}
.cta p{margin:var(--s-3) auto var(--s-4);max-width:52ch;color:var(--on-dark-2);font-weight:300;
  font-size:var(--t-lead)}

/* ---------- zones ---------- */
.zones{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:1px solid var(--ink)}
@media(max-width:920px){.zones{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.zones{grid-template-columns:1fr}}
.zone{display:block;text-decoration:none;padding:var(--s-3) var(--s-3) var(--s-4) 0;
  border-right:1px solid var(--line);position:relative;transition:padding-left var(--d) var(--e-out)}
.zone:last-child{border-right:none}
@media(max-width:920px){.zone:nth-child(2n){border-right:none}
  .zone:nth-child(n+3){border-top:1px solid var(--line)}}
@media(max-width:520px){.zone{border-right:none}.zone+.zone{border-top:1px solid var(--line)}}
.zone::before{content:"";position:absolute;left:0;top:-1px;height:1px;width:0;background:var(--accent);
  transition:width var(--d-slow) var(--e-out)}
.zone:hover::before,.zone:focus-visible::before{width:100%}
.zone:hover{padding-left:var(--s-2)}
.zone .z-n{font-family:var(--serif);font-size:clamp(1.35rem,2vw,1.75rem);line-height:1.15}
.zone .z-d{font-size:var(--t-small);color:var(--ink-2);margin-top:var(--s-1)}
.zone .z-a{font:500 var(--t-label)/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;
  color:var(--accent);margin-top:var(--s-3)}
.chips{display:flex;flex-wrap:wrap;gap:0}
.chips li{font-size:var(--t-small);color:var(--ink-2);padding:8px 0}
.chips li:not(:last-child)::after{content:"·";margin:0 .75em;color:var(--accent);opacity:.6}

/* ---------- pied ---------- */
.site-foot{background:var(--ink);color:var(--on-dark-2);padding:clamp(3.5rem,7vw,6rem) 0 0;
  font-size:var(--t-small)}
.foot-grid{display:grid;grid-template-columns:1.7fr 1fr 1fr 1fr;gap:var(--s-4)}
@media(max-width:880px){.foot-grid{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.foot-grid{grid-template-columns:1fr;gap:var(--s-4)}}
.foot-brand{font-family:var(--serif);font-size:1.6rem;color:var(--on-dark);margin-bottom:var(--s-1);
  letter-spacing:-.02em}
.foot-t{font:500 var(--t-label)/1 var(--sans);letter-spacing:.22em;text-transform:uppercase;
  color:var(--accent-2);margin-bottom:var(--s-2)}
.site-foot a{color:var(--on-dark-2);text-decoration:none}
.site-foot a:hover{color:var(--on-dark)}
.site-foot li{padding:6px 0}
.foot-legal{margin-top:clamp(3rem,5vw,5rem);padding-top:var(--s-3);padding-bottom:var(--s-3);
  border-top:1px solid rgba(255,255,255,.12);display:flex;justify-content:space-between;
  gap:var(--s-2);flex-wrap:wrap;font-size:var(--t-label);letter-spacing:.04em;color:#7C756C}

/* ---------- visionneuse ---------- */
.lightbox{position:fixed;inset:0;background:rgba(16,14,12,.97);z-index:300;display:none;
  align-items:center;justify-content:center;padding:clamp(1rem,4vw,4rem)}
.lightbox.open{display:flex;animation:lbIn var(--d) var(--e-out)}
@keyframes lbIn{from{opacity:0}to{opacity:1}}
.lightbox figure{margin:0;max-width:100%;max-height:100%;display:flex;flex-direction:column;
  align-items:center;gap:var(--s-2)}
.lightbox img{max-width:100%;max-height:82vh;object-fit:contain}
.lightbox figcaption{color:rgba(255,255,255,.6);font-size:var(--t-small);text-align:center;
  max-width:58ch;font-weight:300}
.lightbox button{position:absolute;background:none;border:0;color:#fff;cursor:pointer;
  line-height:1;padding:16px;opacity:.55;transition:opacity var(--d-fast)}
.lightbox button:hover,.lightbox button:focus-visible{opacity:1}
.lb-close{top:10px;right:14px;font-size:34px}
.lb-prev,.lb-next{top:50%;transform:translateY(-50%);font-size:44px}
.lb-prev{left:4px}.lb-next{right:4px}

/* ---------- marqueurs de travail ---------- */
.todo{background:#FBF3DC;color:#6B5310;padding:2px 8px;font-size:.86em;font-style:normal;
  box-decoration-break:clone;-webkit-box-decoration-break:clone}
.site-foot .todo{background:rgba(251,243,220,.12);color:#CDBE94}

/* ---------- révélation ---------- */
.rv{opacity:0;transform:translateY(18px)}
.rv.in{opacity:1;transform:none;transition:opacity var(--d-slow) var(--e-out),
  transform var(--d-slow) var(--e-out)}
@media(prefers-reduced-motion:reduce){.rv{opacity:1;transform:none}}
.stagger>*{opacity:0;transform:translateY(14px)}
.stagger.in>*{opacity:1;transform:none;
  transition:opacity var(--d-slow) var(--e-out),transform var(--d-slow) var(--e-out)}
.stagger.in>*:nth-child(1){transition-delay:0ms}
.stagger.in>*:nth-child(2){transition-delay:60ms}
.stagger.in>*:nth-child(3){transition-delay:120ms}
.stagger.in>*:nth-child(4){transition-delay:180ms}
.stagger.in>*:nth-child(5){transition-delay:240ms}
.stagger.in>*:nth-child(6){transition-delay:300ms}
@media(prefers-reduced-motion:reduce){.stagger>*{opacity:1;transform:none}}

@media print{.site-head,.cta,.lightbox,.btn{display:none}body{color:#000}}

/* ═══════════════════════════════════════════════════════════════════
   v2 — mise en page éditoriale
   Patterns portés depuis 21st.dev (« Editorial Image Hero », grilles
   mosaïque) et réécrits en CSS natif : aucune dépendance, aucune
   requête tierce, jetons du design system inchangés.
   ═══════════════════════════════════════════════════════════════════ */

/* ---------- hero éditorial : split plein écran + collage ---------- */
.hero-ed{position:relative;padding:0;overflow:hidden}
.hero-ed-grid{display:grid;grid-template-columns:minmax(0,1fr);
  gap:clamp(2rem,5vw,3rem);align-items:center;
  padding-top:clamp(1.5rem,4vw,3rem);padding-bottom:clamp(2.5rem,5vw,4rem)}
/* photo principale + rideaux d'obturateur */
.hero-ed-media{position:relative;order:-1;margin:0 calc(var(--gut)*-1)}
@media(min-width:900px){
  .hero-ed-grid{grid-template-columns:repeat(12,minmax(0,1fr));
    min-height:min(86svh,880px);gap:clamp(2rem,4vw,4rem);
    padding-top:clamp(2rem,5vw,4rem);padding-bottom:clamp(4.5rem,8vw,7.5rem)}
  .hero-ed-copy{grid-column:1/7;grid-row:1}
  .hero-ed-media{position:absolute;top:0;right:0;bottom:0;left:auto;
    order:0;margin:0;width:clamp(340px,46vw,860px)}
}
.hero-ed-cadre{position:relative;overflow:hidden;height:100%;background:var(--paper-3)}
.hero-ed-cadre img{width:100%;height:100%;object-fit:cover;object-position:50% 24%;
  animation:hero-pose 2s var(--e-out) both}
@media(max-width:899px){.hero-ed-cadre{aspect-ratio:1/1}}
@keyframes hero-pose{from{transform:scale(1.09)}to{transform:scale(1)}}
.hero-rideau{position:absolute;left:0;right:0;height:50.5%;
  background:var(--paper);z-index:2;pointer-events:none}
.hero-rideau-h{top:0;animation:rideau-haut 1.05s var(--e-io) both}
.hero-rideau-b{bottom:0;animation:rideau-bas 1.05s var(--e-io) both}
@keyframes rideau-haut{from{transform:translateY(0)}to{transform:translateY(-100.5%)}}
@keyframes rideau-bas {from{transform:translateY(0)}to{transform:translateY(100.5%)}}

/* médaillon en débord, façon tirage papier */
.hero-ed-medaillon{display:none}
@media(min-width:1250px){
  .hero-ed-medaillon{display:block;position:absolute;z-index:3;margin:0;
    left:0;bottom:clamp(2.5rem,5vw,4.5rem);transform:translateX(-32%);
    width:clamp(160px,15.5vw,238px);background:var(--paper);padding:.65rem;
    animation:medaillon 1.1s var(--e-out) 1.15s both}
  .hero-ed-medaillon img{width:100%;aspect-ratio:3/4;object-fit:cover}
}
@keyframes medaillon{from{opacity:0;transform:translateX(-32%) translateY(22px)}
  to{opacity:1;transform:translateX(-32%) translateY(0)}}

/* typographie du hero */
.hero-ed-marque{display:flex;align-items:center;gap:clamp(.9rem,2vw,1.4rem);
  margin:0 0 clamp(1.25rem,2.6vw,2.25rem);
  font:500 var(--t-label)/1 var(--sans);letter-spacing:.24em;
  text-transform:uppercase;color:var(--accent)}
.hero-ed-marque::before{content:"";flex:0 0 auto;
  width:clamp(2rem,5vw,4.5rem);height:1px;background:var(--accent);
  transform-origin:left;animation:trait .95s var(--e-out) .18s both}
.hero-ed-marque span{animation:surgit .8s var(--e-out) .3s both}
@keyframes trait{from{transform:scaleX(0)}to{transform:scaleX(1)}}

.hero-titre{margin:0;font-family:var(--serif);font-weight:400;
  font-size:clamp(2.6rem,6.2vw,5.5rem);line-height:.98;letter-spacing:-.04em}
.hero-titre .hl{display:block;overflow:hidden;
  padding-bottom:.1em;margin-bottom:-.1em;padding-right:.07em;margin-right:-.07em}
.hero-titre .hl>*{display:block;animation:monte 1.05s var(--e-out) both}
.hero-titre .hl:nth-child(1)>*{animation-delay:.44s}
.hero-titre .hl:nth-child(2)>*{animation-delay:.56s}
.hero-titre .hl:nth-child(3)>*{animation-delay:.68s}
.hero-titre em{font-style:italic;color:var(--accent)}
@keyframes monte{from{transform:translateY(106%)}to{transform:translateY(0)}}

.hero-ed-lead{margin:clamp(1.5rem,2.8vw,2.25rem) 0 0;max-width:38ch;
  color:var(--ink-2);font-size:var(--t-lead);font-weight:300;line-height:1.6;
  animation:surgit .9s var(--e-out) .86s both}
.hero-ed-copy .acts{margin-top:clamp(1.75rem,3vw,2.5rem);
  display:flex;gap:var(--s-2);flex-wrap:wrap;
  animation:surgit .9s var(--e-out) .99s both}
@keyframes surgit{from{opacity:0;transform:translateY(15px)}to{opacity:1;transform:none}}

/* invite au défilement */
.hero-ed-defiler{display:none}
@media(min-width:900px){
  .hero-ed-defiler{display:block;position:absolute;margin:0;
    left:var(--gut);bottom:clamp(1.75rem,3.5vw,3rem);padding-left:3rem;
    font:500 var(--t-label)/1 var(--sans);letter-spacing:.24em;
    text-transform:uppercase;color:var(--ink-2);
    animation:surgit .9s var(--e-out) 1.35s both}
  .hero-ed-defiler::before{content:"";position:absolute;left:0;top:50%;
    width:2.25rem;height:1px;background:var(--ink-2);
    animation:glisse 2.6s var(--e-io) 2.2s infinite}
}
@keyframes glisse{
  0%{transform:scaleX(.3);transform-origin:left}
  48%{transform:scaleX(1);transform-origin:left}
  52%{transform:scaleX(1);transform-origin:right}
  100%{transform:scaleX(.3);transform-origin:right}}

/* bandeau de faits */
.ed-facts-bande{padding:0;background:var(--paper-2);border-top:1px solid var(--line)}
.ed-facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));margin:0}
@media(min-width:860px){.ed-facts{grid-template-columns:repeat(4,minmax(0,1fr))}}
.ed-facts li{padding:clamp(1.25rem,2.2vw,1.75rem) var(--s-3) clamp(1.25rem,2.2vw,1.75rem) 0;
  border-bottom:1px solid var(--line);font-size:var(--t-small);line-height:1.45}
@media(min-width:860px){
  .ed-facts li{border-bottom:none;border-left:1px solid var(--line);padding-left:var(--s-3)}
  .ed-facts li:first-child{border-left:none;padding-left:0}
}
.ed-facts li span{display:block;margin-bottom:.75em;
  font:500 var(--t-label)/1 var(--sans);letter-spacing:.24em;
  text-transform:uppercase;color:var(--accent)}

/* ---------- en-têtes de section ---------- */
.ed-sec-head{max-width:64ch}
.ed-sec-head h2{margin-top:var(--s-2);line-height:1.04;letter-spacing:-.022em}

/* ---------- approche : colonne fixe + piliers numérotés ---------- */
.ed-split{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(2.5rem,5vw,4.5rem)}
@media(min-width:980px){
  .ed-split{grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:clamp(3rem,6vw,7rem)}
  .ed-split-head{position:sticky;top:clamp(5.5rem,11vh,8.5rem);align-self:start}
}
.ed-split-head h2{font-size:var(--t-h2);margin-top:var(--s-2);
  line-height:1.02;letter-spacing:-.025em}
.ed-split-sub{margin-top:var(--s-3);color:var(--ink-2);font-weight:300;max-width:34ch}
.ed-pillars{margin:0;padding:0;list-style:none;border-top:1px solid var(--ink)}
.ed-pillar{display:grid;grid-template-columns:clamp(3.25rem,6.2vw,5.5rem) minmax(0,1fr);
  gap:clamp(1rem,2.4vw,2.5rem);align-items:start;
  padding:clamp(1.75rem,3vw,2.75rem) 0;border-bottom:1px solid var(--line)}
.ed-pillar-n{font-family:var(--serif);font-weight:400;
  font-size:clamp(2.25rem,4.6vw,4rem);line-height:.78;
  color:var(--accent-2);opacity:.55;font-variant-numeric:tabular-nums}
.ed-pillar-t h3{margin:0;font-size:var(--t-h3)}
.ed-pillar-t p{margin:var(--s-1) 0 0;color:var(--ink-2);max-width:58ch}

/* ---------- mosaïque ---------- */
.ed-gal .wrap+.wrap{margin-top:0}
.mosaic{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  grid-auto-rows:clamp(9rem,30vw,13rem);gap:clamp(.5rem,1.2vw,1rem)}
@media(min-width:900px){
  .mosaic{grid-template-columns:repeat(6,minmax(0,1fr));
    grid-auto-rows:clamp(8rem,10.5vw,13.5rem);gap:clamp(.75rem,1.4vw,1.25rem);
    grid-auto-flow:dense}
  .mosaic .m-hero{grid-column:span 4;grid-row:span 2}
  .mosaic .m-tall{grid-column:span 2;grid-row:span 2}
  .mosaic .m-wide{grid-column:span 4}
  .mosaic .m-sq  {grid-column:span 2}
  .mosaic .m-full{grid-column:span 6}
}
.mosaic .ph{margin:0;overflow:hidden;background:var(--paper-3)}
.mosaic .ph img{width:100%;height:100%;object-fit:cover;
  transition:transform var(--d-slow) var(--e-out)}
.mosaic .ph:hover img{transform:scale(1.035)}
@media(prefers-reduced-motion:reduce){.mosaic .ph:hover img{transform:none}}
.ed-more{margin-top:clamp(1.75rem,3vw,2.75rem)}

/* ---------- formules : lignes éditoriales, pas de cartes ---------- */
/* Colonnes nommées : texte calé à gauche, prix et lien calés à droite,
   pour que les montants s'alignent verticalement d'une ligne à l'autre. */
.ed-plans{border-top:1px solid var(--ink)}
.ed-plan{position:relative;display:grid;
  grid-template-columns:2.25rem minmax(0,1fr) auto;
  grid-template-areas:"i n n" ". d p" ". go go";
  column-gap:var(--s-2);row-gap:var(--s-2);align-items:baseline;
  padding:clamp(1.5rem,2.8vw,2.25rem) 0;
  border-bottom:1px solid var(--line);text-decoration:none;color:inherit;
  transition:background var(--d) var(--e-out)}
@media(min-width:940px){
  .ed-plan{grid-template-columns:3rem minmax(0,1fr) 9rem 13rem 8rem;
    grid-template-areas:"i n d p go";column-gap:var(--s-3);align-items:center;
    padding-left:var(--s-3);padding-right:var(--s-3)}
}
.ed-plan.vedette{background:var(--paper-2)}
.ed-plan:hover,.ed-plan:focus-visible{background:var(--paper-2)}
.creme .ed-plan.vedette,.creme .ed-plan:hover{background:var(--paper)}

.ed-plan-i{grid-area:i;justify-self:start;
  font:500 var(--t-label)/1 var(--sans);letter-spacing:.22em;
  color:var(--accent);font-variant-numeric:tabular-nums}

.ed-plan-n{grid-area:n;justify-self:start;text-align:left;min-width:0}
.ed-plan-tag{display:block;margin-bottom:.7em;
  font:500 var(--t-label)/1 var(--sans);letter-spacing:.22em;
  text-transform:uppercase;color:var(--accent)}
.ed-plan-h{display:block;margin:0;font-family:var(--serif);font-weight:400;
  font-size:clamp(1.375rem,2.3vw,1.9rem);line-height:1.1;letter-spacing:-.015em}
.ed-plan-acc{display:block;margin-top:.5em;color:var(--ink-2);font-size:var(--t-small);
  line-height:1.5}

.ed-plan-d{grid-area:d;justify-self:start;text-align:left;
  font:500 var(--t-label)/1.4 var(--sans);letter-spacing:.2em;
  text-transform:uppercase;color:var(--ink-2)}

.ed-plan-p{grid-area:p;justify-self:end;text-align:right;white-space:nowrap;
  font-family:var(--serif);font-weight:400;
  font-size:clamp(1.9rem,3.4vw,3rem);line-height:1;letter-spacing:-.025em;
  font-variant-numeric:tabular-nums lining-nums}
.ed-plan-p small{margin-left:.55em;font:500 var(--t-label)/1 var(--sans);
  letter-spacing:.2em;color:var(--ink-2)}

.ed-plan-go{grid-area:go;justify-self:start;
  font:500 var(--t-label)/1 var(--sans);letter-spacing:.18em;
  text-transform:uppercase;color:var(--ink);
  border-bottom:1px solid var(--line);padding-bottom:.55em;
  transition:border-color var(--d) var(--e-out),color var(--d) var(--e-out)}
@media(min-width:940px){.ed-plan-go{justify-self:end}}
.ed-plan:hover .ed-plan-go{color:var(--accent);border-color:var(--accent)}

/* ---------- témoignages : une citation qui porte ---------- */
.ed-avis-lead{margin:0;position:relative;padding-top:clamp(2rem,4vw,3.25rem);
  border-top:1px solid var(--ink);max-width:44ch}
@media(min-width:900px){.ed-avis-lead{margin-left:auto;margin-right:auto;text-align:center;max-width:52ch}}
.ed-avis-lead blockquote{margin:0;font-family:var(--serif);font-style:italic;
  font-weight:400;font-size:clamp(1.25rem,2.3vw,1.95rem);line-height:1.34;
  letter-spacing:-.015em;text-wrap:balance}
.ed-avis-lead blockquote strong{font-weight:400;font-style:italic;color:var(--accent)}
.ed-avis-lead figcaption{margin-top:clamp(1.5rem,2.6vw,2.25rem);
  font:500 var(--t-label)/1.5 var(--sans);letter-spacing:.22em;text-transform:uppercase}
.ed-avis-lead figcaption span{display:block;margin-top:.5em;font-weight:400;
  letter-spacing:.1em;color:var(--ink-2);text-transform:none}
.ed-avis-duo{display:grid;grid-template-columns:minmax(0,1fr);
  gap:clamp(2rem,3.5vw,3.5rem);margin-top:clamp(3rem,6vw,5.5rem)}
@media(min-width:760px){.ed-avis-duo{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ---------- régions : index avec filet qui se déploie ---------- */
.ed-zone-list{border-top:1px solid var(--ink)}
.ed-zone{position:relative;display:grid;
  grid-template-columns:2.25rem minmax(0,1fr);
  grid-template-areas:"i n" ". d" ". a";
  column-gap:var(--s-2);row-gap:var(--s-1);align-items:baseline;
  padding:clamp(1.5rem,2.8vw,2.5rem) 0;border-bottom:1px solid var(--line);
  text-decoration:none;color:inherit}
@media(min-width:860px){
  .ed-zone{grid-template-columns:3rem minmax(0,1fr) minmax(0,1fr) 9rem;
    grid-template-areas:"i n d a";column-gap:var(--s-3);align-items:center}
}
.ed-zone::after{content:"";position:absolute;left:0;bottom:-1px;height:1px;width:0;
  background:var(--ink);transition:width var(--d-slow) var(--e-out)}
.ed-zone:hover::after,.ed-zone:focus-visible::after{width:100%}
.ed-zone-i{grid-area:i;justify-self:start;font:500 var(--t-label)/1 var(--sans);letter-spacing:.22em;
  color:var(--accent);font-variant-numeric:tabular-nums}
.ed-zone-n{grid-area:n;justify-self:start;font-family:var(--serif);font-weight:400;
  font-size:clamp(1.6rem,3.2vw,2.6rem);line-height:1.05;letter-spacing:-.022em;
  transition:color var(--d) var(--e-out)}
.ed-zone:hover .ed-zone-n{color:var(--accent)}
.ed-zone-d{grid-area:d;justify-self:start;color:var(--ink-2);font-size:var(--t-small)}
.ed-zone-a{grid-area:a;justify-self:start;margin-top:var(--s-1);
  font:500 var(--t-label)/1 var(--sans);letter-spacing:.18em;
  text-transform:uppercase;color:var(--ink-2)}
@media(min-width:860px){.ed-zone-a{justify-self:end;margin-top:0}}
.ed-zone:hover .ed-zone-a{color:var(--accent)}

/* ---------- CTA final ---------- */
.ed-cta{text-align:left}
.ed-cta .kicker{color:var(--accent-2)}
.ed-cta h2{margin:var(--s-2) 0 0;max-width:none;
  font-size:clamp(2.5rem,6.4vw,5.5rem);line-height:.96;letter-spacing:-.035em}
.ed-cta h2 em{font-style:italic;color:var(--accent-2)}
.ed-cta p{margin:var(--s-3) 0 var(--s-5);max-width:52ch}

/* ---------- révélation : au-delà de 6 éléments ---------- */
.stagger.in>*:nth-child(7){transition-delay:360ms}
.stagger.in>*:nth-child(8){transition-delay:420ms}
.stagger.in>*:nth-child(9){transition-delay:480ms}
.stagger.in>*:nth-child(10){transition-delay:540ms}
.stagger.in>*:nth-child(11){transition-delay:600ms}
.stagger.in>*:nth-child(12){transition-delay:660ms}

/* ═══════════════════════════════════════════════════════════════════
   v3 — refonte : langage global
   Patterns portés depuis 21st.dev (Horizontal Scroll Gallery pinned,
   Nav Header, Editorial Hero) et réécrits en CSS natif + JS vanilla.
   Toujours aucune dépendance, aucune requête tierce.
   ═══════════════════════════════════════════════════════════════════ */

/* ---------- grain de tirage ---------- */
body::after{content:"";position:fixed;inset:0;z-index:200;pointer-events:none;
  opacity:.032;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:180px 180px}

/* ---------- en-tête : condensation au défilement ---------- */
.site-head{background:var(--paper);backdrop-filter:none;-webkit-backdrop-filter:none;
  transition:box-shadow var(--d) var(--e-out)}
.head-in{transition:min-height var(--d-slow) var(--e-out)}
.site-head.condense .head-in{min-height:clamp(56px,5vw,64px)}
.site-head.condense{box-shadow:0 1px 0 var(--line)}
.brand{transition:font-size var(--d-slow) var(--e-out)}
.site-head.condense .brand{font-size:clamp(.98rem,1.25vw,1.1rem)}
.brand span{transition:opacity var(--d) var(--e-out),max-height var(--d-slow) var(--e-out)}
.site-head.condense .brand span{opacity:0;max-height:0;margin-top:0;overflow:hidden}
#nav a{font:500 var(--t-label)/1 var(--sans);letter-spacing:.16em;text-transform:uppercase}
@media(max-width:900px){#nav a{font:400 1.5rem/1.2 var(--serif);letter-spacing:-.01em;text-transform:none}}

/* ---------- en-tête de page éditorial ---------- */
.page-head{padding:clamp(4.5rem,10vw,9rem) 0 clamp(3rem,5vw,5rem)}
.page-head-in{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(1.5rem,3vw,2.5rem)}
@media(min-width:820px){
  .page-head-in{grid-template-columns:auto minmax(0,1fr);gap:clamp(2.5rem,6vw,6rem);align-items:start}
}
.page-head-num{margin:0;font-family:var(--serif);font-weight:400;line-height:.72;
  font-size:clamp(3.5rem,11vw,9rem);letter-spacing:-.04em;
  color:transparent;-webkit-text-stroke:1px var(--accent-2);
  font-variant-numeric:tabular-nums;opacity:.75;
  animation:surgit 1s var(--e-out) .1s both}
.page-head-txt .kicker{animation:surgit .8s var(--e-out) .2s both}
.page-titre{margin:var(--s-2) 0 0;font-size:clamp(2.25rem,5.4vw,4.5rem);
  line-height:1.02;letter-spacing:-.035em;max-width:19ch}
.page-titre .hl{display:block;overflow:hidden;
  padding-bottom:.1em;margin-bottom:-.1em;padding-right:.06em;margin-right:-.06em}
.page-titre .hl>span{display:block;animation:monte 1.05s var(--e-out) .3s both}
.page-head .lead{margin-top:clamp(1.5rem,2.6vw,2.25rem);max-width:62ch;
  font-size:var(--t-lead);color:var(--ink-2);font-weight:300;line-height:1.62;
  animation:surgit .9s var(--e-out) .5s both}

/* ---------- parallaxe d'image, pilotée par le défilement ---------- */
@supports (animation-timeline:view()){
  @media(prefers-reduced-motion:no-preference){
    .mosaic .ph img,.rail-item img{
      animation:parallaxe linear both;animation-timeline:view();animation-range:cover}
    @keyframes parallaxe{
      from{transform:scale(1.16) translateY(-2.6%)}
      to  {transform:scale(1.16) translateY(2.6%)}}
    .mosaic .ph:hover img{transform:none}
  }
}

/* ---------- bandeau défilant ---------- */
.bandeau{padding:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  overflow:hidden;background:var(--paper)}
.bandeau-piste{display:flex;width:max-content;
  animation:defile 46s linear infinite}
.bandeau:hover .bandeau-piste{animation-play-state:paused}
.bandeau-piste>span{display:flex;align-items:center;flex:0 0 auto;
  padding:clamp(1rem,1.8vw,1.5rem) 0;
  font-family:var(--serif);font-size:clamp(1.15rem,2.2vw,1.85rem);
  letter-spacing:-.015em;color:var(--ink-2);white-space:nowrap}
.bandeau-piste>span::after{content:"—";margin:0 clamp(1.25rem,3vw,2.75rem);
  color:var(--accent-2);font-style:italic}
@keyframes defile{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---------- galerie horizontale épinglée ---------- */
.rail{position:relative;padding:0}
.rail-colle{position:sticky;top:0;height:100svh;overflow:hidden;
  display:flex;align-items:center}
.rail-piste{display:flex;gap:clamp(.75rem,1.4vw,1.5rem);width:max-content;
  padding:0 var(--gut);will-change:transform}
.rail-item{margin:0;flex:0 0 auto;overflow:hidden;background:var(--paper-3);
  height:min(64svh,620px);aspect-ratio:var(--ar,3/2)}
.rail-item img{height:100%;width:100%;max-width:none;object-fit:cover;display:block}
.rail-legende{position:absolute;left:var(--gut);bottom:clamp(1.75rem,3.5vw,3rem);
  margin:0;font:500 var(--t-label)/1 var(--sans);letter-spacing:.24em;
  text-transform:uppercase;color:var(--ink-2)}
.rail-compte{position:absolute;right:var(--gut);bottom:clamp(1.75rem,3.5vw,3rem);
  margin:0;font:500 var(--t-label)/1 var(--sans);letter-spacing:.2em;
  color:var(--ink-2);font-variant-numeric:tabular-nums}
@media(max-width:820px){
  .rail{height:auto!important}
  .rail-colle{position:static;height:auto;padding:clamp(2rem,5vw,3rem) 0}
  .rail-piste{transform:none!important;overflow-x:auto;width:auto;
    scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
    padding-bottom:var(--s-2)}
  .rail-item{height:56vw;max-height:70vh;scroll-snap-align:center}
  .rail-legende,.rail-compte{position:static;margin-top:var(--s-2);padding:0 var(--gut)}
}

/* ---------- curseur de galerie ---------- */
.curseur{position:fixed;top:0;left:0;z-index:250;pointer-events:none;will-change:transform}
.curseur span{display:grid;place-items:center;width:96px;height:96px;margin:-48px 0 0 -48px;
  border:1px solid var(--on-dark);border-radius:50%;color:var(--on-dark);
  font:500 var(--t-label)/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;
  opacity:0;transform:scale(.6);mix-blend-mode:difference;
  transition:opacity var(--d) var(--e-out),transform var(--d) var(--e-out)}
.curseur.actif span{opacity:1;transform:scale(1)}
@media(hover:none),(prefers-reduced-motion:reduce){.curseur{display:none}}

/* ---------- pied de page ---------- */
.site-foot .foot-brand{font-size:clamp(1.75rem,4.2vw,3.25rem);line-height:1;
  letter-spacing:-.03em}

/* ---------- soulignements de liens de navigation ---------- */
#nav a::after{background:var(--accent);height:1px}

/* ---------- retour du formulaire ---------- */
.form-alerte{margin:0 0 var(--s-3);padding:var(--s-2) var(--s-3);
  border-left:2px solid var(--accent);background:var(--paper-2);
  color:var(--ink);font-size:var(--t-small);line-height:1.55}