/* ==========================================================================
   DÉCLIC · Ottawa — feuille de style commune à toutes les pages
   Palette et typographie identiques à la v1 du site.
   ========================================================================== */

:root{
  --navy:#0D1B2A;
  --navy2:#132030;
  --navy3:#182838;
  --red:#E63946;
  --ivory:#F0EBE3;
  --grey:#6B7A8D;
  --line:rgba(240,235,227,.07);
  --line-strong:rgba(240,235,227,.14);
  --txt-2:rgba(240,235,227,.55);
  --txt-3:rgba(240,235,227,.42);
  --header-h:78px;
  --font-display:'Syne',system-ui,sans-serif;
  --font-body:'Inter Tight',system-ui,sans-serif;
  --font-mono:'DM Mono',ui-monospace,monospace;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;scroll-padding-top:var(--header-h);}

body{
  background:var(--navy);
  color:var(--ivory);
  font-family:var(--font-body);
  font-weight:300;
  line-height:1.6;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

img{max-width:100%;display:block;}
a{color:inherit;}

::selection{background:var(--red);color:#fff;}

/* --- Révélation au scroll ------------------------------------------------ */
.r{opacity:0;transform:translateY(18px);transition:opacity .65s ease,transform .65s ease;}
.r.in{opacity:1;transform:none;}
.r[data-d="1"]{transition-delay:.08s;}
.r[data-d="2"]{transition-delay:.16s;}
.r[data-d="3"]{transition-delay:.24s;}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  .r{opacity:1;transform:none;transition:none;}
}

/* --- En-tête -------------------------------------------------------------- */
header{
  position:fixed;inset:0 0 auto 0;z-index:200;
  padding:12px 24px;
  display:flex;justify-content:space-between;align-items:center;gap:16px;
  background:rgba(13,27,42,.92);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.logo{display:flex;align-items:center;text-decoration:none;flex-shrink:0;}
.logo-img{height:34px;width:auto;}

.nav{display:flex;align-items:center;gap:28px;}
.nav a{
  font-family:var(--font-mono);
  font-size:10px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--grey);text-decoration:none;
  padding:6px 0;position:relative;transition:color .25s ease;
}
.nav a:hover{color:var(--ivory);}
.nav a[aria-current="page"]{color:var(--ivory);}
.nav a[aria-current="page"]::after{
  content:'';position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--red);
}

.burger{
  display:none;background:none;border:0;cursor:pointer;
  width:40px;height:40px;padding:9px;flex-direction:column;justify-content:space-between;
}
.burger span{display:block;height:2px;width:100%;background:var(--ivory);transition:transform .3s ease,opacity .3s ease;}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(9px) rotate(45deg);}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0;}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-9px) rotate(-45deg);}

@media (max-width:820px){
  .burger{display:flex;}
  .nav{
    position:fixed;inset:var(--header-h) 0 auto 0;
    flex-direction:column;align-items:flex-start;gap:0;
    background:var(--navy);
    border-bottom:1px solid var(--line);
    padding:8px 24px 24px;
    transform:translateY(-120%);transition:transform .35s cubic-bezier(.4,0,.2,1);
  }
  .nav.open{transform:none;}
  .nav a{width:100%;padding:16px 0;font-size:12px;border-bottom:1px solid var(--line);}
  .nav a[aria-current="page"]::after{display:none;}
  .nav a[aria-current="page"]{color:var(--red);}
}

/* --- Sections ------------------------------------------------------------- */
.sec{padding:80px 24px;border-bottom:1px solid var(--line);}
.sec-inner{max-width:1080px;margin:0 auto;}

.sec-label{
  font-family:var(--font-mono);
  font-size:9px;letter-spacing:.28em;color:var(--red);text-transform:uppercase;
  margin-bottom:36px;display:flex;align-items:center;gap:12px;
}
.sec-label::after{content:'';flex:1;max-width:56px;height:1px;background:var(--line-strong);}

.sec-h2{font-size:clamp(34px,8vw,60px);font-weight:800;line-height:.94;letter-spacing:-.03em;margin-bottom:32px;}
.sec-h2 .accent{color:var(--red);}

.body-p{font-size:16px;color:var(--txt-2);line-height:1.85;max-width:620px;margin-bottom:20px;}
.body-p strong{color:var(--ivory);font-weight:600;}

/* --- Page hero (pages intérieures) ---------------------------------------- */
.page-hero{
  padding:calc(var(--header-h) + 72px) 24px 64px;
  border-bottom:1px solid var(--line);position:relative;overflow:hidden;
}
.page-hero .sec-inner{position:relative;z-index:2;}
.page-hero h1{font-size:clamp(42px,10vw,86px);font-weight:800;line-height:.92;letter-spacing:-.03em;margin-bottom:28px;}
.page-hero h1 .accent{color:var(--red);}
.page-hero .lede{
  font-family:var(--font-mono);font-size:11px;letter-spacing:.16em;
  color:var(--txt-2);line-height:2.1;border-left:2px solid var(--red);
  padding-left:16px;max-width:440px;
}
.ghost{
  position:absolute;right:-.05em;bottom:-.14em;
  font-size:clamp(120px,26vw,280px);font-weight:800;line-height:1;letter-spacing:-.04em;
  color:rgba(255,255,255,.022);pointer-events:none;user-select:none;white-space:nowrap;z-index:1;
}

/* --- Accueil : hero ------------------------------------------------------- */
.hero{
  min-height:100dvh;padding:calc(var(--header-h) + 40px) 24px 72px;
  display:flex;flex-direction:column;justify-content:flex-end;
  position:relative;overflow:hidden;border-bottom:1px solid var(--line);
}
.hero .sec-inner{width:100%;position:relative;z-index:2;}
.hero-edition{
  font-family:var(--font-mono);font-size:10px;letter-spacing:.26em;
  color:var(--red);text-transform:uppercase;margin-bottom:26px;
  display:flex;align-items:center;gap:12px;
}
.hero-edition::before{content:'';width:18px;height:1px;background:var(--red);flex-shrink:0;}
.hero h1{font-size:clamp(52px,12vw,116px);font-weight:800;line-height:.9;letter-spacing:-.03em;margin-bottom:34px;}
.hero h1 .accent{color:var(--red);}
.hero-baseline{
  font-family:var(--font-mono);font-size:11px;letter-spacing:.17em;
  color:var(--txt-2);line-height:2.1;border-left:2px solid var(--red);padding-left:16px;max-width:400px;
}
.hero-infos{
  margin-top:22px;font-family:var(--font-mono);font-size:10px;
  letter-spacing:.2em;color:var(--grey);text-transform:uppercase;
}

/* --- Boutons -------------------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;gap:12px;
  background:var(--red);color:#fff;text-decoration:none;
  padding:17px 30px;font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  border:1px solid var(--red);transition:background .25s ease,color .25s ease;
}
.btn:hover{background:transparent;color:var(--red);}
.btn::after{content:'→';font-weight:400;}

.btn-ghost{
  display:inline-flex;align-items:center;gap:12px;
  background:transparent;color:var(--ivory);text-decoration:none;
  padding:17px 30px;font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  border:1px solid var(--line-strong);transition:border-color .25s ease,color .25s ease;
}
.btn-ghost:hover{border-color:var(--red);color:var(--red);}
.btn-ghost::after{content:'→';font-weight:400;}

.btn-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:36px;}

/* --- Bloc « prochaine édition » ------------------------------------------- */
.next-ed{background:var(--navy2);border-left:3px solid var(--red);padding:36px 28px;position:relative;overflow:hidden;}
.next-ed::after{
  content:'#2';position:absolute;right:18px;bottom:-26px;
  font-size:120px;font-weight:800;color:rgba(255,255,255,.03);line-height:1;pointer-events:none;
}
.next-ed .kicker{
  font-family:var(--font-mono);font-size:9px;letter-spacing:.24em;
  color:var(--red);text-transform:uppercase;margin-bottom:16px;
}
.next-ed h3{font-size:clamp(26px,5.5vw,40px);font-weight:800;line-height:1.02;letter-spacing:-.02em;margin-bottom:18px;position:relative;}
.next-ed p{font-size:15px;color:var(--txt-2);line-height:1.8;max-width:540px;position:relative;}

/* --- Fiche d'informations (clé / valeur) ---------------------------------- */
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:2px;margin-top:40px;}
.fact{background:var(--navy2);padding:24px 22px;}
.fact dt{
  font-family:var(--font-mono);font-size:9px;letter-spacing:.22em;
  color:var(--grey);text-transform:uppercase;margin-bottom:10px;
}
.fact dd{font-size:19px;font-weight:700;line-height:1.25;}
.fact dd.accent{color:var(--red);}

/* --- Liste numérotée (les 3 temps) ---------------------------------------- */
.stack{display:flex;flex-direction:column;gap:2px;margin-top:40px;}
.stack-item{background:var(--navy2);padding:28px 24px;display:flex;gap:20px;align-items:flex-start;position:relative;overflow:hidden;}
.stack-item::after{
  content:attr(data-n);position:absolute;right:14px;bottom:-16px;
  font-size:88px;font-weight:800;color:rgba(255,255,255,.03);line-height:1;pointer-events:none;
}
.stack-num{
  font-family:var(--font-mono);font-size:10px;letter-spacing:.2em;
  color:var(--red);flex-shrink:0;margin-top:5px;width:24px;
}
.stack-title{font-size:19px;font-weight:700;margin-bottom:8px;line-height:1.25;}
.stack-desc{font-size:14px;color:var(--txt-3);line-height:1.78;max-width:520px;}

/* --- Encadré rouge (le rituel) -------------------------------------------- */
.ritual{background:var(--red);padding:34px 28px;margin-top:2px;position:relative;overflow:hidden;}
.ritual::after{
  content:'DÉCLIC';position:absolute;bottom:-14px;right:-6px;
  font-size:72px;font-weight:800;letter-spacing:-.02em;color:rgba(255,255,255,.08);line-height:1;pointer-events:none;
}
.ritual .kicker{
  font-family:var(--font-mono);font-size:9px;letter-spacing:.24em;
  color:rgba(255,255,255,.5);text-transform:uppercase;margin-bottom:12px;
}
.ritual h3{font-size:20px;font-weight:700;color:#fff;margin-bottom:12px;line-height:1.25;position:relative;}
.ritual p{font-size:14.5px;color:rgba(255,255,255,.72);line-height:1.8;position:relative;max-width:540px;}

/* --- Cartes (grille) ------------------------------------------------------ */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:2px;margin-top:40px;}
.card{background:var(--navy2);padding:28px 24px;}
.card .kicker{
  font-family:var(--font-mono);font-size:9px;letter-spacing:.22em;
  color:var(--red);text-transform:uppercase;margin-bottom:14px;
}
.card h3{font-size:18px;font-weight:700;line-height:1.3;margin-bottom:10px;}
.card p{font-size:14px;color:var(--txt-3);line-height:1.8;}

/* --- Liste à puces carrées ------------------------------------------------ */
.checks{list-style:none;display:flex;flex-direction:column;gap:2px;margin-top:36px;}
.checks li{background:var(--navy2);padding:22px 24px;display:flex;align-items:flex-start;gap:16px;}
.checks li::before{content:'';width:8px;height:8px;background:var(--red);flex-shrink:0;margin-top:9px;}
.checks strong{display:block;font-size:16px;font-weight:700;margin-bottom:6px;}
.checks span{font-size:14px;color:var(--txt-3);line-height:1.78;}

/* --- Citation ------------------------------------------------------------- */
.quote{
  border-left:3px solid var(--red);padding:6px 0 6px 22px;margin:36px 0;
  font-size:clamp(19px,3.6vw,26px);font-weight:600;line-height:1.45;letter-spacing:-.01em;max-width:640px;
}

/* --- Galerie photos ------------------------------------------------------- */
/* Les visuels de l'édition #1 sont des posts déjà habillés (logo, hashtag,
   bandeau rouge) au format 4:5. On respecte ce ratio : tout recadrage
   couperait l'habillage. Pas de désaturation non plus, le rouge de la
   marque doit rester rouge. */
.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:2px;margin-top:40px;}
.gallery img{width:100%;aspect-ratio:4/5;object-fit:cover;transition:transform .3s ease,opacity .3s ease;opacity:.92;}
.gallery img:hover{opacity:1;transform:scale(1.012);}
.gallery-empty{
  background:var(--navy2);border:1px dashed var(--line-strong);padding:44px 26px;margin-top:40px;text-align:center;
}
.gallery-empty p{
  font-family:var(--font-mono);font-size:10px;letter-spacing:.2em;
  color:var(--grey);text-transform:uppercase;
}

/* --- Bandeau d'appel final ------------------------------------------------ */
.final{padding:100px 24px 88px;text-align:left;}
.final h2{font-size:clamp(38px,9vw,74px);font-weight:800;line-height:.94;letter-spacing:-.03em;margin-bottom:28px;}
.final h2 .accent{color:var(--red);}
.final .meta{
  font-family:var(--font-mono);font-size:10px;letter-spacing:.2em;
  color:var(--grey);text-transform:uppercase;line-height:2.2;
}

/* --- Pied de page --------------------------------------------------------- */
footer{padding:52px 24px 40px;border-top:1px solid var(--line);}
.footer-inner{
  max-width:1080px;margin:0 auto;
  display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:28px;
}
.footer-tag{font-size:15px;font-weight:600;color:var(--txt-2);}
.footer-links{display:flex;flex-wrap:wrap;gap:22px;}
.footer-links a{
  font-family:var(--font-mono);font-size:10px;letter-spacing:.18em;
  color:var(--grey);text-decoration:none;text-transform:uppercase;transition:color .25s ease;
}
.footer-links a:hover{color:var(--red);}
.footer-legal{
  width:100%;font-family:var(--font-mono);font-size:9px;letter-spacing:.18em;
  color:var(--txt-3);text-transform:uppercase;padding-top:24px;border-top:1px solid var(--line);
}

/* --- Utilitaires ---------------------------------------------------------- */
.mono{font-family:var(--font-mono);}
.center-narrow{max-width:680px;}
.skip{position:absolute;left:-9999px;}
.skip:focus{
  left:16px;top:16px;z-index:999;background:var(--red);color:#fff;
  padding:12px 18px;font-size:13px;text-decoration:none;
}

@media (min-width:900px){
  .sec{padding:104px 40px;}
  .page-hero{padding:calc(var(--header-h) + 96px) 40px 80px;}
  .hero{padding:calc(var(--header-h) + 40px) 40px 88px;}
  header{padding:12px 40px;}
  footer,.final{padding-left:40px;padding-right:40px;}
}

/* ==========================================================================
   Typographie — Syne sur tout ce qui est titre ou accroche.
   Inter Tight reste sur le texte courant, DM Mono sur les libellés.
   ========================================================================== */
h1, h2, h3, h4,
.sec-h2, .hero h1, .page-hero h1, .final h2,
.next-ed h3, .stack-title, .card h3, .ritual h3,
.checks strong, .quote, .footer-tag, .fact dd,
.ghost, .btn, .btn-ghost{
  font-family:var(--font-display);
}

/* Syne a des formes déjà larges : on relâche le crénage négatif hérité d'Outfit. */
.sec-h2, .hero h1, .page-hero h1, .final h2{letter-spacing:-.02em;}
.ghost{letter-spacing:-.02em;}

/* Les gros chiffres fantômes des blocs numérotés. */
.stack-item::after, .next-ed::after, .ritual::after{font-family:var(--font-display);}

/* ==========================================================================
   Page Éditions
   ========================================================================== */
.edition{padding-top:8px;margin-bottom:84px;}
.edition:last-child{margin-bottom:0;}

.edition-head{display:flex;align-items:baseline;gap:20px;flex-wrap:wrap;margin-bottom:8px;}
.edition-num{
  font-family:var(--font-display);font-weight:800;
  font-size:clamp(54px,12vw,110px);line-height:.82;letter-spacing:-.03em;
  color:var(--red);
}
.edition-num.is-past{color:rgba(240,235,227,.16);}
.edition-status{
  font-family:var(--font-mono);font-size:9px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--grey);border:1px solid var(--line-strong);padding:7px 12px;
}
.edition-status.is-next{color:var(--red);border-color:var(--red);}

.edition-theme{
  font-family:var(--font-display);font-weight:800;
  font-size:clamp(28px,6vw,48px);line-height:1;letter-spacing:-.02em;margin-bottom:26px;
}
.edition-theme.is-pending{color:var(--txt-3);}

/* Intervenants et témoins */
.speakers{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:2px;margin-top:36px;}
.speaker{background:var(--navy2);display:flex;flex-direction:column;}
.speaker img{width:100%;aspect-ratio:3/4;object-fit:cover;filter:grayscale(1) contrast(1.08);}
.speaker-body{padding:24px 22px 28px;}
.speaker-role{
  font-family:var(--font-mono);font-size:9px;letter-spacing:.22em;
  color:var(--red);text-transform:uppercase;margin-bottom:12px;
}
.speaker-body h3{font-size:19px;font-weight:700;line-height:1.25;margin-bottom:12px;}
.speaker-body p{font-size:14px;color:var(--txt-3);line-height:1.8;}

.placeholder{
  background:var(--navy2);border:1px dashed var(--line-strong);
  padding:40px 26px;margin-top:36px;text-align:center;
}
.placeholder p{
  font-family:var(--font-mono);font-size:10px;letter-spacing:.2em;
  color:var(--grey);text-transform:uppercase;line-height:2;
}

/* ==========================================================================
   Portrait du fondateur — texte à gauche, image à droite sur grand écran,
   image en premier sur mobile.
   ========================================================================== */
.split{display:grid;grid-template-columns:1fr;gap:36px;align-items:start;}
.split-media img{width:100%;aspect-ratio:4/5;object-fit:cover;}
.split-body{min-width:0;}

@media (min-width:900px){
  .split{grid-template-columns:1.15fr .85fr;gap:56px;}
  .split-media{position:sticky;top:calc(var(--header-h) + 32px);}
}

/* Suite de citations */
.quotes{display:flex;flex-direction:column;gap:2px;margin-top:40px;}
.quote-item{background:var(--navy2);padding:32px 28px;border-left:3px solid var(--red);}
.quote-item blockquote{
  font-family:var(--font-display);font-weight:700;
  font-size:clamp(19px,3.4vw,26px);line-height:1.35;letter-spacing:-.01em;
}
.quote-item blockquote .accent{color:var(--red);}