/* ==========================================================
   Fonds Burdigala — « Registre à ciel ouvert », édition bordeaux
   ========================================================== */
:root{
  --fx-color-fond:#f4ecdf;              /* pierre blonde */
  --fx-color-surface:#fbf7f0;           /* papier de registre */
  --fx-color-texte:#2a1a1c;             /* encre de nuit */
  --fx-color-texte-secondaire:#5e4a46;  /* encre passée */
  --fx-color-accent:#781428;            /* bordeaux Burdigala */
  --fx-color-accent-2:#3d5a5b;          /* eau de Garonne */
  --fx-color-accent-clair:#ecd3cc;      /* lie de vin claire */
  --fx-color-contraste:#781428;         /* aplat bordeaux */
  --fx-color-sur-contraste:#fbf7f0;     /* texte posé sur l'aplat */
  --fx-color-sur-accent:#fbf7f0;
  --fx-color-bordure:#d8c8b0;           /* joint de pierre */
  --fx-font-display:"Fraunces", Georgia, "Times New Roman", serif;
  --fx-font-body:"Public Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --fx-font-mono:"DM Mono", ui-monospace, Menlo, monospace;

  --gap:clamp(14px,2vw,28px);
  --pad:clamp(16px,4vw,56px);
  --max:1360px;
  --over:clamp(56px,8vw,120px);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--fx-color-fond);color:var(--fx-color-texte);
  font-family:var(--fx-font-body);font-size:1.0625rem;line-height:1.6;
  overflow-x:hidden;
}
img,svg{max-width:100%;display:block}
h1,h2,h3,h4{font-family:var(--fx-font-display);font-weight:600;line-height:1.02;margin:0;letter-spacing:-.025em;
  font-variation-settings:"opsz" 144,"SOFT" 100,"WONK" 0}
p{margin:0 0 1em}
em{font-style:italic}
h1 em,h2 em,h3 em,.pull em,.bigquote em{font-weight:400}
a{color:inherit;text-decoration-line:underline;text-decoration-color:var(--fx-color-accent);
  text-decoration-thickness:1.5px;text-underline-offset:.2em;transition:text-decoration-thickness .15s}
a:hover{text-decoration-thickness:4px}
:focus-visible{outline:3px solid var(--fx-color-accent);outline-offset:3px}
.on-dark :focus-visible,.on-dark:focus-visible,.page-head :focus-visible,.une-band :focus-visible,.topline :focus-visible{outline-color:var(--fx-color-accent-clair)}
.on-dark a,.page-head a,.une-band a{text-decoration-color:var(--fx-color-accent-clair)}
.wrap{max-width:var(--max);margin-inline:auto;padding-inline:var(--pad)}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:12px;top:-60px;z-index:100;background:var(--fx-color-texte);color:var(--fx-color-surface);padding:10px 16px;font-weight:600}
.skip:focus{top:12px}

/* ---------- Petits éléments typographiques ---------- */
.kicker{font-family:var(--fx-font-mono);font-weight:400;font-size:.8125rem;letter-spacing:.09em;text-transform:uppercase;line-height:1.35;
  display:inline-flex;align-items:center;gap:.6em;margin:0 0 1rem}
.kicker::before{content:"";width:.7em;height:.7em;background:currentColor;border-radius:50%;flex:none}
.kicker--plain::before{display:none}
.on-dark .kicker,.page-head .kicker,.une-band .kicker{color:var(--fx-color-accent-clair)}
.mono{font-family:var(--fx-font-mono);font-size:.875rem;letter-spacing:.03em}
.lede{font-size:clamp(1.125rem,1.4vw,1.3rem);line-height:1.55;max-width:38em}
.muted{color:var(--fx-color-texte-secondaire)}
.glyph{font-family:var(--fx-font-display);font-weight:400;color:var(--fx-color-accent);font-variation-settings:"opsz" 144}
.stamp{display:inline-block;font-family:var(--fx-font-mono);font-size:.8125rem;letter-spacing:.08em;text-transform:uppercase;
  border:2px solid currentColor;padding:.3em .7em;transform:rotate(-2deg);white-space:nowrap;color:var(--fx-color-accent)}

/* ---------- Boutons ---------- */
.btn{display:inline-flex;align-items:center;gap:.7em;min-height:52px;padding:.8em 1.4em;
  background:var(--fx-color-accent);color:var(--fx-color-sur-accent);font-weight:600;text-decoration:none;
  border:2px solid var(--fx-color-accent);font-size:1.0625rem;cursor:pointer;font-family:var(--fx-font-body);
  transition:background .15s,color .15s,border-color .15s}
.btn:hover{background:var(--fx-color-texte);border-color:var(--fx-color-texte);color:var(--fx-color-surface)}
.btn .arr{transition:transform .2s}
.btn:hover .arr{transform:translateX(4px)}
.btn--light{background:var(--fx-color-surface);color:var(--fx-color-accent);border-color:var(--fx-color-surface)}
.btn--light:hover{background:var(--fx-color-accent-clair);border-color:var(--fx-color-accent-clair);color:var(--fx-color-texte)}
.textlink{font-weight:600;display:inline-flex;align-items:center;min-height:44px}

/* ---------- En-tête ---------- */
.topline{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;padding-block:.55rem;
  font-family:var(--fx-font-mono);font-size:.8125rem;letter-spacing:.06em;text-transform:uppercase;
  background:var(--fx-color-accent);color:var(--fx-color-accent-clair);
  box-shadow:0 0 0 100vmax var(--fx-color-accent);clip-path:inset(0 -100vmax)}
.topline a{color:var(--fx-color-surface);text-decoration-color:var(--fx-color-accent-clair)}
.bar{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;padding-block:1.1rem;position:relative}
.brand{display:flex;align-items:center;gap:.8rem;text-decoration:none;min-height:44px}
.brand-mark{display:flex;align-items:center;justify-content:center;white-space:nowrap;letter-spacing:-.04em;width:52px;height:52px;
  background:var(--fx-color-accent);border-radius:50% 50% 50% 0;
  font-family:var(--fx-font-display);font-weight:600;font-size:1.9rem;line-height:1;color:var(--fx-color-surface);flex:none;
  font-variation-settings:"opsz" 144,"SOFT" 100}
.brand-mark i{font-style:normal;color:var(--fx-color-accent-clair)}
.brand-name{font-family:var(--fx-font-display);font-weight:600;font-size:1.35rem;line-height:.95;letter-spacing:-.02em;color:var(--fx-color-accent)}
.nav ul{list-style:none;margin:0;padding:0;display:flex;gap:clamp(.5rem,1.6vw,1.6rem);flex-wrap:wrap}
.nav a{display:inline-flex;align-items:center;min-height:44px;font-weight:600;text-decoration:none;
  border-bottom:3px solid transparent;padding-top:3px}
.nav a:hover{border-bottom-color:var(--fx-color-accent-clair)}
.nav a[aria-current="page"]{border-bottom-color:var(--fx-color-accent);color:var(--fx-color-accent)}
.nav .nav-cta a{background:var(--fx-color-accent);color:var(--fx-color-sur-accent);padding:0 1.1rem;border-bottom:0;padding-top:0;border-radius:999px}
.nav .nav-cta a:hover{background:var(--fx-color-texte)}
.menu-btn{display:none}

@media (max-width:980px){
  .js .menu-btn{display:inline-flex;align-items:center;gap:.6em;min-height:48px;padding:0 1.1rem;border:2px solid var(--fx-color-accent);border-radius:999px;
    background:var(--fx-color-surface);color:var(--fx-color-accent);font:600 1rem var(--fx-font-body);cursor:pointer;position:relative;z-index:60}
  .js .menu-btn::before{content:"";width:18px;height:10px;border-block:2px solid currentColor}
  .js body.menu-open .menu-btn::before{height:0;border-bottom:0}
  .js .nav{display:none}
  .js body.menu-open .nav{display:flex;position:fixed;inset:0;z-index:50;background:var(--fx-color-accent);color:var(--fx-color-surface);
    padding:110px var(--pad) 40px;overflow:auto;flex-direction:column}
  .js body.menu-open .nav :focus-visible{outline-color:var(--fx-color-accent-clair)}
  .js body.menu-open{overflow:hidden}
  .js body.menu-open .nav ul{flex-direction:column;gap:0;border-top:2px solid var(--fx-color-accent-clair)}
  .js body.menu-open .nav li{border-bottom:1px solid rgba(236,211,204,.4)}
  .js body.menu-open .nav a{font-family:var(--fx-font-display);font-weight:500;font-size:clamp(2rem,8vw,3rem);min-height:64px;width:100%;border:0;letter-spacing:-.02em;color:var(--fx-color-surface)}
  .js body.menu-open .nav a[aria-current="page"]{font-style:italic;color:var(--fx-color-accent-clair)}
  .js body.menu-open .nav .nav-cta a{background:none;color:var(--fx-color-accent-clair);padding:0;border-radius:0}
  .nav ul{gap:.25rem 1rem}
}

/* ---------- Arcs du Port de la Lune (bandeaux bordeaux) ---------- */
.une-band,.page-head{position:relative;isolation:isolate}
.une-band::before,.une-band::after,.page-head::before,.page-head::after{content:"";position:absolute;z-index:-1;border-radius:50%;pointer-events:none;
  border:1.5px solid rgba(236,211,204,.32)}
.une-band::before{width:min(1500px,150vw);aspect-ratio:1;right:-38%;top:-118%}
.une-band::after{width:min(1300px,130vw);aspect-ratio:1;right:-26%;top:-100%;border-color:rgba(236,211,204,.18)}
.page-head::before{width:min(1100px,120vw);aspect-ratio:1;right:-30%;top:-140%}
.page-head::after{width:min(950px,104vw);aspect-ratio:1;right:-20%;top:-125%;border-color:rgba(236,211,204,.18)}

/* ---------- Une (accueil) ---------- */
.une-band{background:linear-gradient(to bottom,var(--fx-color-accent) calc(100% - var(--over)),var(--fx-color-fond) calc(100% - var(--over)));
  color:var(--fx-color-sur-accent);overflow:hidden}
.une{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gap);padding-top:clamp(32px,5vw,80px)}
.une-text{grid-column:1 / span 7;display:flex;flex-direction:column;justify-content:space-between;gap:2rem;padding-bottom:calc(var(--over) + clamp(28px,4vw,56px))}
.une{position:relative}
.une-reg{position:absolute;left:var(--pad);bottom:calc(var(--over) / 2);transform:translateY(50%);margin:0;display:flex;flex-wrap:wrap;gap:.3rem 0;
  font-family:var(--fx-font-mono);font-size:.8125rem;letter-spacing:.08em;text-transform:uppercase;color:var(--fx-color-accent);max-width:calc(58.33% - var(--pad))}
.une-reg span + span::before{content:"→";margin:0 .8em;font-family:var(--fx-font-body)}
.une h1{font-size:clamp(2.75rem,6.4vw,6.2rem);line-height:.95;letter-spacing:-.035em}
.une h1 em{color:var(--fx-color-accent-clair)}
.une .lede{margin-top:1.8rem;columns:2 16em;column-gap:var(--gap);max-width:none}
.une .lede::first-letter{font-family:var(--fx-font-display);font-weight:600;float:left;font-size:3.6em;line-height:.82;padding:.06em .1em 0 0;color:var(--fx-color-accent-clair)}
.une-actions{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem 1.6rem;border-top:1px solid rgba(236,211,204,.45);padding-top:1.2rem}
.une-actions .textlink{color:var(--fx-color-surface)}
.cover{grid-column:8 / span 5;background:var(--fx-color-accent-clair);position:relative;min-height:540px;display:flex;flex-direction:column;
  justify-content:space-between;padding:clamp(18px,2.4vw,32px);overflow:hidden;color:var(--fx-color-accent);
  border-radius:0 0 0 clamp(80px,12vw,200px)}
.cover .kicker{position:relative;color:var(--fx-color-accent)}
.cover-art{position:absolute;left:-10%;bottom:-6%;width:100%;color:var(--fx-color-accent);pointer-events:none}
.cover-num{position:relative;font-family:var(--fx-font-display);font-weight:600;font-size:clamp(6rem,13vw,12rem);line-height:.8;letter-spacing:-.06em;
  text-align:right;font-variation-settings:"opsz" 144,"SOFT" 100}
.cover-num span{font-size:.45em;letter-spacing:0;vertical-align:.9em;margin-left:.04em;font-style:italic;font-weight:400}
.cover-cap{position:relative;background:var(--fx-color-surface);color:var(--fx-color-texte);padding:1rem 1.1rem;max-width:22rem;margin-left:auto;font-size:1rem;border-top:4px solid var(--fx-color-accent)}
.cover-cap p{margin:0}

/* ---------- Sommaire ---------- */
.sommaire{border-top:6px solid var(--fx-color-accent);border-bottom:1px solid var(--fx-color-texte);margin-top:clamp(32px,4vw,56px)}
.sommaire-head{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;padding-block:.8rem;border-bottom:1px solid var(--fx-color-texte)}
.sommaire-head h2{font-size:1.5rem}
.sommaire ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr)}
.sommaire li + li{border-left:1px solid var(--fx-color-texte)}
.sommaire a{display:grid;grid-template-columns:auto 1fr;align-content:start;gap:.2rem 1rem;padding:1.2rem clamp(.8rem,1.5vw,1.4rem);text-decoration:none;height:100%;
  transition:background .15s}
.sommaire a:hover{background:var(--fx-color-accent-clair)}
.sommaire .n{min-width:1.45em;font-family:var(--fx-font-display);font-weight:400;font-style:italic;font-size:2.6rem;line-height:.9;color:var(--fx-color-accent);grid-row:span 2}
.sommaire .t{font-family:var(--fx-font-display);font-weight:600;font-size:1.25rem;line-height:1.1}
.sommaire .d{font-size:.9375rem;color:var(--fx-color-texte-secondaire);line-height:1.4}

/* ---------- Sections & grille modulaire ---------- */
.section{padding-block:clamp(48px,7vw,104px)}
.section-head{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gap);align-items:end;margin-bottom:clamp(24px,3vw,40px);
  border-bottom:1px solid var(--fx-color-texte);padding-bottom:1.1rem}
.section-head h2{grid-column:1 / span 8;font-size:clamp(2.2rem,4.6vw,4.2rem)}
.section-head h2 em{color:var(--fx-color-accent)}
.section-head .side{grid-column:9 / span 4;margin:0;color:var(--fx-color-texte-secondaire);font-size:1rem}
.section-head .kicker{grid-column:1 / -1;margin:0;color:var(--fx-color-accent)}

.mosaic{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gap)}
.tile{position:relative;padding:clamp(20px,2.4vw,34px);border-top:6px solid var(--fx-color-accent);background:var(--fx-color-surface);
  display:flex;flex-direction:column;gap:.2rem;overflow:hidden}
.tile h3{font-size:clamp(1.6rem,2.4vw,2.2rem);margin-bottom:.8rem}
.tile h3 em{color:var(--fx-color-accent)}
.tile p:last-child{margin-bottom:0}
.tile .textlink{margin-top:auto}
.tile--bordeaux{background:var(--fx-color-accent);color:var(--fx-color-sur-accent);border-top-color:var(--fx-color-texte)}
.tile--bordeaux h3 em{color:var(--fx-color-accent-clair)}
.tile--rose{background:var(--fx-color-accent-clair)}
.tile--rose a{text-decoration-color:var(--fx-color-texte)}
.tile--eau{background:var(--fx-color-accent-2);color:var(--fx-color-surface);border-top-color:var(--fx-color-texte)}
.tile--paper{background:transparent;border:1px solid var(--fx-color-texte);border-top:6px solid var(--fx-color-accent)}
.s-8{grid-column:span 8}.s-7{grid-column:span 7}.s-6{grid-column:span 6}.s-5{grid-column:span 5}.s-4{grid-column:span 4}.s-3{grid-column:span 3}.s-12{grid-column:span 12}
.row-2{grid-row:span 2}

/* trame de points */
.dots{position:absolute;pointer-events:none;
  background-image:radial-gradient(circle,currentColor 38%,transparent 41%);background-size:12px 12px;
  -webkit-mask-image:linear-gradient(135deg,#000 10%,transparent 75%);mask-image:linear-gradient(135deg,#000 10%,transparent 75%)}

/* circuit */
.circuit{list-style:none;margin:1.4rem 0 1.6rem;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;counter-reset:c;position:relative}
.circuit li{position:relative;padding:1.1rem 1.1rem 0 0;border-top:2px solid currentColor}
.circuit li::before{counter-increment:c;content:"0" counter(c);font-family:var(--fx-font-mono);font-size:.8125rem;letter-spacing:.08em;display:block;margin-bottom:.4rem}
.circuit li::after{content:"→";position:absolute;top:-.95rem;right:.4rem;font-family:var(--fx-font-display);font-size:1.4rem;line-height:1;
  background:var(--fx-color-accent);padding:0 .2rem}
.circuit li:last-child::after{content:"✳"}
.circuit .g{font-family:var(--fx-font-display);font-weight:400;font-style:italic;font-size:clamp(2.4rem,4vw,3.6rem);line-height:1;display:block;margin-bottom:.5rem;color:var(--fx-color-accent-clair)}
.circuit strong{font-family:var(--fx-font-display);font-weight:600;font-size:1.25rem;display:block;line-height:1.1;margin-bottom:.4rem}
.circuit p{font-size:.9688rem;line-height:1.45;margin:0}

.tile-statement{position:relative;margin-top:auto;font-family:var(--fx-font-display);font-weight:500;font-size:clamp(1.5rem,2.4vw,2.2rem);line-height:1.1;letter-spacing:-.015em;max-width:18em;border-top:1px solid currentColor;padding-top:1rem}
.tile-statement + .textlink{margin-top:.6rem;position:relative}
.dots--tile{color:var(--fx-color-accent-clair);right:0;bottom:0;width:60%;height:70%;opacity:.4;
  -webkit-mask-image:radial-gradient(circle at 100% 100%,#000 0,transparent 70%);mask-image:radial-gradient(circle at 100% 100%,#000 0,transparent 70%)}
.bigquote{font-family:var(--fx-font-display);font-weight:600;font-size:clamp(2rem,3.2vw,3rem);line-height:.98;letter-spacing:-.03em;margin:0 0 1.2rem}
.tile--paper .bigquote{color:var(--fx-color-accent)}
.bigglyph{font-family:var(--fx-font-display);font-weight:300;font-size:clamp(4rem,7vw,6rem);line-height:.8;margin-bottom:.8rem;font-variation-settings:"opsz" 144}
.tile--paper .bigglyph,.tile:not([class*="tile--"]) .bigglyph,.tile--rose .bigglyph{color:var(--fx-color-accent)}

/* ---------- Agenda (module + page) ---------- */
.agenda-list{list-style:none;margin:0;padding:0;border-top:6px solid var(--fx-color-accent)}
.agenda-row{display:grid;grid-template-columns:minmax(80px,1.2fr) 6fr 2.4fr;gap:var(--gap);align-items:center;padding-block:1.4rem;border-bottom:1px solid var(--fx-color-texte)}
.agenda-row .n{font-family:var(--fx-font-display);font-weight:400;font-style:italic;font-size:clamp(2.6rem,5vw,4.6rem);line-height:.8;color:var(--fx-color-accent);letter-spacing:-.04em}
.agenda-row h3{font-size:clamp(1.5rem,2.6vw,2.3rem)}
.agenda-row p{margin:.4rem 0 0;color:var(--fx-color-texte-secondaire);max-width:40em}
.agenda-row .stamp{justify-self:end}
.acc-btn{all:unset;box-sizing:border-box;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:1rem;width:100%;min-height:48px;
  font-family:var(--fx-font-display);font-weight:600;font-size:clamp(1.5rem,2.6vw,2.3rem);line-height:1.05;letter-spacing:-.02em}
.acc-btn:focus-visible{outline:3px solid var(--fx-color-accent);outline-offset:4px}
.acc-btn .pm{flex:none;width:40px;height:40px;border:2px solid var(--fx-color-accent);color:var(--fx-color-accent);border-radius:50%;display:grid;place-items:center;font-family:var(--fx-font-mono);font-size:1.3rem;font-weight:400}
.acc-btn[aria-expanded="true"] .pm{background:var(--fx-color-accent);color:var(--fx-color-sur-accent)}
.acc-panel{grid-column:2 / -1;padding-top:.6rem}
.acc-panel p{color:var(--fx-color-texte);max-width:42em}
.acc-panel dl{display:grid;grid-template-columns:auto 1fr;gap:.3rem 1.2rem;margin:.8rem 0 0;font-size:1rem}
.acc-panel dt{font-family:var(--fx-font-mono);font-size:.8125rem;text-transform:uppercase;letter-spacing:.08em;padding-top:.2em;color:var(--fx-color-accent)}
.acc-panel dd{margin:0}

/* ---------- Portraits ---------- */
.portrait{background:var(--fx-color-surface);border-top:6px solid var(--fx-color-accent);display:flex;flex-direction:column}
.portrait-art{position:relative;aspect-ratio:4/3;background:var(--fx-color-accent-clair);overflow:hidden;display:grid;place-items:center;color:var(--fx-color-accent)}
.portrait-art .dots{inset:0;-webkit-mask-image:radial-gradient(circle at 50% 50%,transparent 26%,#000 27%,transparent 78%);mask-image:radial-gradient(circle at 50% 50%,transparent 26%,#000 27%,transparent 78%)}
.portrait-art .disc{position:relative;width:46%;aspect-ratio:1;border-radius:50%;background:var(--fx-color-surface);display:grid;place-items:center;
  font-family:var(--fx-font-display);font-size:clamp(3rem,5vw,4.6rem);line-height:1;color:var(--fx-color-accent)}
.portrait:nth-child(2) .portrait-art{background:var(--fx-color-accent);color:var(--fx-color-accent-clair)}
.portrait:nth-child(3) .portrait-art{background:var(--fx-color-accent-2);color:var(--fx-color-surface)}
.portrait:nth-child(3) .disc{color:var(--fx-color-accent-2)}
.portrait-body{padding:1.3rem clamp(18px,2vw,28px) 1.6rem}
.portrait-body h3{font-size:1.75rem;margin-bottom:.6rem}
.portrait-body .kicker{margin-bottom:.6rem;color:var(--fx-color-accent)}
.note{font-family:var(--fx-font-mono);font-size:.875rem;letter-spacing:.02em;border-left:6px solid var(--fx-color-accent);padding:.6rem 0 .6rem 1rem;margin-top:var(--gap);color:var(--fx-color-texte)}

/* ---------- Ressources ---------- */
.res-list{list-style:none;margin:0;padding:0;border-top:6px solid var(--fx-color-accent)}
.res-list li{display:grid;grid-template-columns:3.2rem 1fr auto;gap:1rem;align-items:center;padding-block:1.1rem;border-bottom:1px solid var(--fx-color-texte)}
.res-ico{width:2.6rem;height:3.2rem;border:2px solid var(--fx-color-accent);position:relative;background:var(--fx-color-surface);
  clip-path:polygon(0 0,70% 0,100% 22%,100% 100%,0 100%)}
.res-ico::after{content:"";position:absolute;left:18%;right:18%;top:45%;height:30%;
  background:repeating-linear-gradient(var(--fx-color-accent) 0 2px,transparent 2px 6px)}
.res-list strong{font-family:var(--fx-font-display);font-weight:600;font-size:1.25rem;display:block;line-height:1.15}
.res-list span.muted{font-size:.9375rem}
.res-list .res-act{font-weight:600;white-space:nowrap}

/* ---------- Lettre d'information & formulaires ---------- */
.letter{background:var(--fx-color-accent);color:var(--fx-color-sur-accent);position:relative;overflow:hidden}
.letter .dots{color:var(--fx-color-accent-clair);left:-60px;bottom:-60px;width:min(620px,90vw);height:520px;
  -webkit-mask-image:radial-gradient(circle at 0 100%,#000 0,transparent 66%);mask-image:radial-gradient(circle at 0 100%,#000 0,transparent 66%);opacity:.35}
.letter-in{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gap);padding-block:clamp(48px,7vw,96px);position:relative}
.letter-text{grid-column:1 / span 6}
.letter-text h2{font-size:clamp(2.4rem,5vw,4.6rem);margin-bottom:1rem}
.letter-text h2 em{color:var(--fx-color-accent-clair)}
.letter-form{grid-column:8 / span 5;background:var(--fx-color-surface);color:var(--fx-color-texte);padding:clamp(20px,2.4vw,32px);border-top:6px solid var(--fx-color-texte);align-self:start}
.letter-form :focus-visible{outline-color:var(--fx-color-accent)}

.form{display:grid;gap:1.1rem}
.form .two{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem}
.field label,.field legend{display:block;font-weight:600;margin-bottom:.35rem;font-size:1rem}
.field .hint{display:block;font-weight:400;font-size:.875rem;color:var(--fx-color-texte-secondaire);margin-top:.1rem}
.field input,.field select,.field textarea{width:100%;min-height:50px;padding:.7rem .85rem;font:inherit;font-size:1rem;color:var(--fx-color-texte);
  background:var(--fx-color-fond);border:2px solid var(--fx-color-texte);border-radius:0}
.field textarea{min-height:150px;resize:vertical}
.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible{outline:3px solid var(--fx-color-accent);outline-offset:2px;background:var(--fx-color-surface)}
.field fieldset{border:0;margin:0;padding:0}
.choices{display:flex;flex-wrap:wrap;gap:.5rem}
.choices label{display:inline-flex;align-items:center;gap:.5rem;min-height:44px;padding:.3rem .9rem;border:2px solid var(--fx-color-texte);border-radius:999px;font-weight:500;cursor:pointer;margin:0}
.choices input{width:18px;height:18px;min-height:0;accent-color:var(--fx-color-accent);margin:0}
.choices label:has(input:checked){background:var(--fx-color-accent-clair);border-color:var(--fx-color-accent)}
.form .small{font-size:.875rem;color:var(--fx-color-texte-secondaire);margin:0}
.hp{position:absolute!important;left:-10000px!important;width:1px;height:1px;overflow:hidden}
.confirm{background:var(--fx-color-accent-clair);color:var(--fx-color-texte);border:2px solid var(--fx-color-accent);padding:1rem 1.2rem;margin-bottom:1.2rem}
.confirm strong{font-family:var(--fx-font-display);font-weight:600;font-size:1.4rem;display:block;margin-bottom:.2rem;color:var(--fx-color-accent)}
.confirm:focus-visible{outline:3px solid var(--fx-color-texte);outline-offset:3px}
.confirm p{margin:0}

/* ---------- Bandeau « s'engager » ---------- */
.engage{display:grid;grid-template-columns:repeat(3,1fr);border-top:6px solid var(--fx-color-accent);border-bottom:1px solid var(--fx-color-texte)}
.engage a{display:flex;flex-direction:column;gap:.4rem;padding:clamp(20px,2.6vw,36px);text-decoration:none;min-height:200px;transition:background .15s,color .15s}
.engage a + a{border-left:1px solid var(--fx-color-texte)}
.engage .kicker{color:var(--fx-color-accent)}
.engage .t{font-family:var(--fx-font-display);font-weight:600;font-size:clamp(1.8rem,3vw,2.8rem);line-height:1;letter-spacing:-.02em}
.engage .d{color:var(--fx-color-texte-secondaire);margin-top:auto}
.engage .t::after{content:" →";color:var(--fx-color-accent)}
.engage a:hover{background:var(--fx-color-accent-clair)}
.engage a:hover .d{color:var(--fx-color-texte)}

/* ---------- En-tête de pages intérieures : aplat bordeaux plein cadre ---------- */
.page-head{padding-block:clamp(40px,6vw,96px) clamp(36px,5vw,72px);display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gap);align-items:end;
  background:var(--fx-color-accent);color:var(--fx-color-sur-accent);
  box-shadow:0 0 0 100vmax var(--fx-color-accent);clip-path:inset(0 -100vmax);margin-bottom:clamp(40px,6vw,88px)}
.page-head .kicker{grid-column:1 / -1;margin:0}
.page-head h1{grid-column:1 / span 8;font-size:clamp(2.75rem,6.6vw,6.4rem);line-height:.95;letter-spacing:-.035em}
.page-head h1 em{color:var(--fx-color-accent-clair)}
.page-head .lede{grid-column:1 / span 7;margin:0}
.page-head .aside{grid-column:9 / span 4;grid-row:2 / span 2;align-self:end;font-family:var(--fx-font-mono);font-size:.875rem;border-top:2px solid var(--fx-color-accent-clair);padding-top:.8rem;margin:0}
.page-head .aside dt{text-transform:uppercase;letter-spacing:.08em;color:var(--fx-color-accent-clair);font-size:.8125rem}
.page-head .aside dd{margin:0 0 .6rem}

/* Article sur colonnes */
.article{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gap)}
.article-side{grid-column:1 / span 3}
.article-side .kicker{color:var(--fx-color-accent)}
.article-body{grid-column:4 / span 8;max-width:44em}
.article-body h2{font-size:clamp(1.8rem,3vw,2.6rem);margin:2.4rem 0 1rem}
.article-body h2:first-child{margin-top:0}
.article-body h3{font-family:var(--fx-font-body);font-weight:700;font-size:1.1875rem;letter-spacing:0;line-height:1.3;margin:1.6rem 0 .4rem}
.article-body ul{padding-left:1.2em}
.article-body li{margin-bottom:.4rem}
.article-body li::marker{color:var(--fx-color-accent)}
.pull{font-family:var(--fx-font-display);font-weight:600;font-size:clamp(1.8rem,3.4vw,3rem);line-height:1.02;letter-spacing:-.025em;
  border-top:6px solid var(--fx-color-accent);border-bottom:1px solid var(--fx-color-texte);padding:1.2rem 0;margin:2.4rem 0}
.pull em{color:var(--fx-color-accent)}

/* Schéma du circuit (page Comprendre) */
.flow{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;border-top:6px solid var(--fx-color-accent);border-bottom:1px solid var(--fx-color-texte)}
.flow > div{position:relative;padding:clamp(18px,2vw,28px);min-height:300px;display:flex;flex-direction:column;overflow:hidden}
.flow > div + div{border-left:1px solid var(--fx-color-texte)}
.flow > div:nth-child(1){background:var(--fx-color-surface);color:var(--fx-color-texte)}
.flow > div:nth-child(1) .g{color:var(--fx-color-accent)}
.flow > div:nth-child(2){background:var(--fx-color-accent-clair)}
.flow > div:nth-child(2) .g{color:var(--fx-color-accent)}
.flow > div:nth-child(3){background:var(--fx-color-accent);color:var(--fx-color-sur-accent)}
.flow > div:nth-child(4){background:var(--fx-color-accent-2);color:var(--fx-color-surface)}
.flow .g{font-family:var(--fx-font-display);font-weight:400;font-style:italic;font-size:clamp(3.4rem,6vw,5.6rem);line-height:.85;margin-bottom:auto;letter-spacing:-.04em;position:relative}
.flow h3{font-size:clamp(1.4rem,2vw,1.9rem);margin:1.4rem 0 .5rem;position:relative}
.flow p{margin:0;font-size:1rem;line-height:1.45;position:relative}
.flow .step{font-family:var(--fx-font-mono);font-size:.8125rem;letter-spacing:.08em;text-transform:uppercase;margin-bottom:1rem;position:relative}
.flow .dots{inset:-10px -10px auto auto;width:50%;height:50%;opacity:.3;-webkit-mask-image:radial-gradient(circle at 100% 0,#000,transparent 70%);mask-image:radial-gradient(circle at 100% 0,#000,transparent 70%)}
.article-side{position:sticky;top:1.5rem;align-self:start}

.criteria{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap)}
.faq details{border-bottom:1px solid var(--fx-color-texte)}
.faq details:first-of-type{border-top:6px solid var(--fx-color-accent)}
.faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:1rem;align-items:center;padding-block:1.1rem;min-height:56px;
  font-family:var(--fx-font-display);font-weight:600;font-size:clamp(1.25rem,2vw,1.6rem);line-height:1.15}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--fx-font-mono);font-weight:400;flex:none;width:36px;height:36px;border:2px solid var(--fx-color-accent);color:var(--fx-color-accent);border-radius:50%;display:grid;place-items:center}
.faq details[open] summary::after{content:"–";background:var(--fx-color-accent);color:var(--fx-color-sur-accent)}
.faq details > div{padding-bottom:1.2rem;max-width:44em}

/* Contact */
.contact-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gap)}
.contact-cards{grid-column:1 / span 5;display:grid;gap:var(--gap);align-content:start}
.contact-form{grid-column:7 / span 6;background:var(--fx-color-surface);padding:clamp(20px,2.6vw,36px);border-top:6px solid var(--fx-color-accent)}
.contact-form h2{font-size:clamp(1.8rem,3vw,2.6rem);margin-bottom:1.2rem}
.coord{font-family:var(--fx-font-display);font-weight:500;font-size:clamp(1.3rem,2.2vw,1.9rem);line-height:1.15;word-break:break-word}
.coord a{text-decoration-thickness:2px}

/* Mentions */
.legal dl{display:grid;grid-template-columns:minmax(10rem,14rem) 1fr;margin:0;border-top:6px solid var(--fx-color-accent)}
.legal dt,.legal dd{padding:.9rem 0;border-bottom:1px solid var(--fx-color-bordure);margin:0}
.legal dt{font-family:var(--fx-font-mono);font-size:.8125rem;text-transform:uppercase;letter-spacing:.08em;padding-right:1rem;padding-top:1.05rem;color:var(--fx-color-accent)}
.todo{font-family:var(--fx-font-mono);font-size:.875rem;background:var(--fx-color-surface);border:1px dashed var(--fx-color-texte-secondaire);padding:.15em .5em;color:var(--fx-color-texte-secondaire)}

/* ---------- Pied de page ---------- */
.foot{background:var(--fx-color-texte);color:var(--fx-color-surface);margin-top:0;border-top:10px solid var(--fx-color-accent)}
.foot a{text-decoration-color:var(--fx-color-accent-clair)}
.foot-title{font-family:var(--fx-font-display);font-weight:500;font-size:clamp(3rem,11vw,10.5rem);line-height:.84;letter-spacing:-.05em;
  margin:0;padding-block:clamp(36px,5vw,64px) clamp(20px,3vw,36px);border-bottom:1px solid rgba(236,211,204,.25);font-variation-settings:"opsz" 144,"SOFT" 100}
.foot-title i{font-style:normal;color:var(--fx-color-accent-clair)}
.foot-grid{display:grid;grid-template-columns:2fr 1.4fr 1fr 1fr;gap:var(--gap);padding-block:clamp(28px,4vw,48px)}
.foot h2{font-family:var(--fx-font-mono);font-weight:400;font-size:.8125rem;letter-spacing:.09em;text-transform:uppercase;margin-bottom:.8rem;color:var(--fx-color-accent-clair)}
.foot ul{list-style:none;margin:0;padding:0}
.foot li a{display:inline-flex;min-height:40px;align-items:center}
.foot address{font-style:normal}
.foot address a{display:inline-flex;min-height:36px;align-items:center}
.foot-base{display:flex;justify-content:space-between;flex-wrap:wrap;gap:.6rem 1.4rem;padding-block:1rem 1.6rem;border-top:1px solid rgba(236,211,204,.25);
  font-family:var(--fx-font-mono);font-size:.8125rem;color:var(--fx-color-accent-clair)}
.foot-base a{color:var(--fx-color-accent-clair)}

/* ---------- 404 ---------- */
.lost{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gap);padding-block:clamp(40px,7vw,100px)}
.lost .big{grid-column:1 / span 5;font-family:var(--fx-font-display);font-weight:400;font-style:italic;font-size:clamp(7rem,20vw,16rem);line-height:.8;color:var(--fx-color-accent);letter-spacing:-.06em}
.lost > div{grid-column:7 / span 6}
.lost h1{font-size:clamp(2.2rem,4.6vw,4rem);margin-bottom:1rem}
.lost .kicker{color:var(--fx-color-accent)}

/* ---------- Apparition douce ---------- */
@media (prefers-reduced-motion:no-preference){
  .une-text,.cover{animation:rise .7s ease-out both}
  .cover{animation-delay:.12s}
  .une-band::before,.page-head::before{animation:arc 1.4s ease-out both}
  @keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
  @keyframes arc{from{transform:rotate(-8deg);opacity:0}to{transform:none;opacity:1}}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}

/* ---------- Responsive ---------- */
@media (max-width:1100px){
  .s-8,.s-7{grid-column:span 12}
  .s-5,.s-4,.s-3{grid-column:span 6}
  .row-2{grid-row:auto}
  .t-full{grid-column:span 12}
  .une-text{grid-column:1 / -1;padding-bottom:clamp(8px,2vw,24px)}
  .une-reg{display:none}
  .cover{grid-column:1 / -1;min-height:420px}
  .cover-art{width:70%;left:-6%;bottom:-20%}
  .sommaire ol{grid-template-columns:repeat(2,1fr)}
  .sommaire li:nth-child(3){border-left:0}
  .sommaire li:nth-child(n+3){border-top:1px solid var(--fx-color-texte)}
  .letter-text,.letter-form{grid-column:1 / -1}
  .flow{grid-template-columns:repeat(2,1fr)}
  .flow > div:nth-child(3){border-left:0}
  .flow > div:nth-child(n+3){border-top:1px solid var(--fx-color-texte)}
  .contact-cards,.contact-form{grid-column:1 / -1}
  .foot-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:760px){
  body{font-size:1.0625rem}
  .s-5,.s-4,.s-3,.s-6{grid-column:span 12}
  .section-head h2,.section-head .side{grid-column:1 / -1}
  .page-head h1,.page-head .lede,.page-head .aside{grid-column:1 / -1;grid-row:auto}
  .article-side,.article-body{grid-column:1 / -1}
  .article-side{position:static}
  .circuit{grid-template-columns:1fr 1fr;row-gap:1.6rem}
  .agenda-row{grid-template-columns:1fr;gap:.6rem}
  .agenda-row .stamp{justify-self:start}
  .acc-panel{grid-column:1 / -1}
  .criteria{grid-template-columns:1fr}
  .engage{grid-template-columns:1fr}
  .engage a + a{border-left:0;border-top:1px solid var(--fx-color-texte)}
  .engage a{min-height:0}
  .form .two{grid-template-columns:1fr}
  .lost .big,.lost > div{grid-column:1 / -1}
  .legal dl{grid-template-columns:1fr}
  .legal dt{border-bottom:0;padding-bottom:0}
  .res-list li{grid-template-columns:2.8rem 1fr}
  .res-list .res-act{grid-column:2}
  .topline span{display:none}
  .topline{justify-content:flex-end}
  .une-band::before{right:-90%;top:-40%}
  .une-band::after{right:-70%;top:-30%}
  .page-head::before{right:-80%;top:-60%}
  .page-head::after{right:-60%;top:-50%}
}
@media (max-width:520px){
  .sommaire ol{grid-template-columns:1fr}
  .sommaire li + li{border-left:0;border-top:1px solid var(--fx-color-texte)}
  .circuit{grid-template-columns:1fr}
  .flow{grid-template-columns:1fr}
  .flow > div + div{border-left:0;border-top:1px solid var(--fx-color-texte)}
  .flow > div{min-height:0}
  .flow .g{margin-bottom:0}
  .foot-grid{grid-template-columns:1fr}
  .brand-name{font-size:1.15rem}
  .brand-mark{width:46px;height:46px;font-size:1.7rem}
  .cover{min-height:380px}
  .cover-art{width:100%;left:-18%;bottom:-14%}
  .une .lede{columns:1}
}