/* =============================================================
   Cap Soleil — Nouvelle Vague (Variant D)
   Palette: Ink #0a0a0a · Paper #ffffff · Red #e30613 · Grey #8c8c8c
   Type:   Anton (display) · Instrument Serif (body) ·
           JetBrains Mono (timecodes) · Space Grotesk (UI micro)
   All content images rendered B&W via CSS filter + square 1:1.
   ============================================================= */

:root{
  --bg:#ffffff;
  --ink:#0a0a0a;
  --red:#e30613;
  --grey:#8c8c8c;
  --mono:"JetBrains Mono",ui-monospace,Menlo,monospace;
  --serif:"Instrument Serif",Georgia,serif;
  --display:"Anton","Arial Narrow",sans-serif;
  --grotesk:"Space Grotesk",system-ui,sans-serif;
  --ruler:1px solid var(--ink);
  --dot:1px dotted #b7b7b7;
}

/* Base ------------------------------------------------------- */
html,body{background:var(--bg);color:var(--ink);-webkit-font-smoothing:antialiased}
body{font-family:var(--serif);font-size:19px;line-height:1.65}
main{display:block}
a{color:inherit;text-decoration:none}

/* All content images: square + B&W film grade (logo excepted). */
img{max-width:100%;display:block}
.article-content img,
.content-wrap img,
.monologue img,
.plans img,
.shots img,
.scene-card img,
.plan-body img,
.reel img{filter:grayscale(1) contrast(1.08) brightness(0.96)}
.logo img,.ribbon .brand img{filter:none}

/* Grainy overlay — used on black sections */
.grain{position:relative}
.grain::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.32;mix-blend-mode:overlay;
  background-image:radial-gradient(rgba(255,255,255,.08) 1px,transparent 1px),
                   radial-gradient(rgba(0,0,0,.18) 1px,transparent 1px);
  background-size:3px 3px,5px 5px;background-position:0 0,1px 2px;
}

/* Film reel frame (square photo with perforation borders) */
.reel{position:relative;width:100%;aspect-ratio:1/1;overflow:hidden;background:#000}
.reel img{width:100%;height:100%;object-fit:cover}
.reel::before,.reel::after{
  content:"";position:absolute;left:0;right:0;height:10px;z-index:2;
  background:repeating-linear-gradient(90deg,#000 0 6px,#fff 6px 12px);opacity:.85;
}
.reel::before{top:0}.reel::after{bottom:0}

/* Square 1:1 for content images in article body */
.article-content .full-bleed,
.article-content .inline-figure{margin:44px 0;position:relative}
.article-content .full-bleed img,
.article-content .inline-figure img{
  width:100%;aspect-ratio:1/1;object-fit:cover;background:#000;
}
.article-content .full-bleed{margin-left:-40px;margin-right:-40px}
.plan-body .article-content .full-bleed,
.plan-body .article-content .cta-block{margin-left:-40px;margin-right:0}
.article-content .full-bleed::before,
.article-content .full-bleed::after,
.article-content .inline-figure::before,
.article-content .inline-figure::after{
  content:"";position:absolute;left:0;right:0;height:10px;z-index:2;
  background:repeating-linear-gradient(90deg,#000 0 6px,#fff 6px 12px);opacity:.85;pointer-events:none;
}
.article-content .full-bleed::before,
.article-content .inline-figure::before{top:0}
.article-content .full-bleed::after,
.article-content .inline-figure::after{bottom:0}

/* =============================================================
   HEADER / RIBBON
   ============================================================= */
.ribbon{
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  padding:22px 40px;border-bottom:var(--ruler);background:#fff;
  position:sticky;top:0;z-index:40;
}
.ribbon .brand{
  font-family:var(--display);font-size:42px;line-height:.9;letter-spacing:.02em;
  text-transform:uppercase;text-align:center;color:var(--ink);
}
.ribbon .brand .brand-word{display:inline-block}
.ribbon .brand .brand-dot{color:var(--red);padding:0 .18em}
.ribbon-nav{display:flex;gap:28px;align-items:center}
.ribbon-nav-left{justify-content:flex-start}
.ribbon-nav-right{justify-content:flex-end}
.ribbon-nav a,
.nav-dropdown-toggle{
  display:inline-flex;align-items:center;line-height:1;vertical-align:middle;
  font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  padding:4px 0;margin:0;border:none;border-bottom:1px solid transparent;background:transparent;color:var(--ink);cursor:pointer;
  font-weight:inherit;
}
.ribbon-nav a {margin: 3px 0 0 !important}
.nav-dropdown-toggle:focus{outline:none}
.nav-dropdown-toggle:focus-visible{outline:1px dotted var(--red);outline-offset:4px}
.ribbon-nav a:hover,
.nav-dropdown-toggle:hover{color:var(--red);border-color:var(--red)}

/* Bobines dropdown */
.nav-dropdown{position:relative}
.nav-dropdown-menu{
  display:none;position:absolute;top:100%;left:0;margin-top:14px;
  background:var(--ink);color:#fff;border:1px solid #222;padding:18px 22px;
  min-width:280px;z-index:60;
}
.nav-dropdown.open .nav-dropdown-menu{display:block}
.nav-dropdown-menu ol{list-style:none;margin:0;padding:0}
.nav-dropdown-menu li{padding:6px 0;border-bottom:var(--dot);border-bottom-color:#2a2a2a}
.nav-dropdown-menu li:last-child{border-bottom:none}
.nav-dropdown-menu a{
  display:flex;gap:14px;align-items:center;font-family:var(--mono);
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:#fff;border:none;padding:6px 0;
  line-height:1;
}
.nav-dropdown-menu .nav-num{color:var(--red);width:36px;flex-shrink:0;font-family:var(--mono);font-size:12px}
.nav-dropdown-menu .nav-name{font-family:var(--display);font-size:18px;letter-spacing:.02em;line-height:1}
.nav-dropdown-menu a:hover .nav-name{color:var(--red)}

/* Burger (mobile) */
.burger{display:none;background:transparent;border:none;padding:6px;cursor:pointer;flex-direction:column;gap:4px}
.burger span{display:block;width:24px;height:2px;background:var(--ink)}

/* =============================================================
   OPENING / HERO
   ============================================================= */
.opening{
  background:var(--ink);color:#fff;min-height:100vh;padding:60px 40px;
  display:flex;flex-direction:column;justify-content:space-between;position:relative;overflow:hidden;
}
.opening-top,.opening-auteur{
  display:flex;justify-content:space-between;align-items:baseline;
  font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--grey);
}
.opening-auteur .red{color:var(--red)}
.opening-center{align-self:center;text-align:center;margin-top:-40px;max-width:900px}
.supra{color:var(--red);font-family:var(--mono);font-size:12px;letter-spacing:.28em;text-transform:uppercase;margin-bottom:28px}
.reddot{display:inline-block;width:10px;height:10px;border-radius:50%;background:var(--red);margin-right:10px;vertical-align:middle}
.opening-title{
  font-family:var(--display);font-weight:400;font-size:clamp(90px,16vw,220px);
  line-height:.82;letter-spacing:-.02em;text-transform:uppercase;color:#fff;margin:0;
}
.opening-lede{
  margin-top:34px;font-family:var(--serif);font-style:italic;font-size:26px;
  color:#f0f0f0;max-width:620px;margin-left:auto;margin-right:auto;
}

/* =============================================================
   MONOLOGUE / INTRO BLACK BLOCK (homepage)
   ============================================================= */
.monologue{background:var(--ink);color:#f1f1f1;padding:120px 40px;position:relative}
.monologue-inner{max-width:760px;margin:0 auto}
.mono-label{
  color:var(--red);font-family:var(--mono);font-size:11px;letter-spacing:.24em;
  text-transform:uppercase;margin-bottom:28px;text-align:center;
}
.monologue-body p,
.monologue-body li{font-family:var(--serif);font-style:italic;font-size:23px;line-height:1.55;color:#efefef;margin-bottom:22px}
.article-content.monologue-body h2,
.article-content.monologue-body h3,
.article-content.monologue-body h4{
  font-family:var(--display);line-height:1;text-transform:uppercase;
  color:#fff;margin:50px 0 22px;font-style:normal;font-weight:400;letter-spacing:-.01em;
}
.article-content.monologue-body h2{font-size:42px}
.article-content.monologue-body h3{font-size:28px}
.article-content.monologue-body h4{font-size:20px}
.article-content.monologue-body strong{color:#fff}
.article-content.monologue-body blockquote{color:#fff;border-color:var(--red)}
.article-content.monologue-body a{color:var(--red);border-bottom:1px solid var(--red)}
.article-content.monologue-body img{margin:30px auto;max-width:520px}

/* =============================================================
   TITLE CARDS (section dividers)
   ============================================================= */
.title-card{background:var(--ink);color:#fff;padding:100px 40px;text-align:center;position:relative}
.title-card .sc{color:var(--red);font-family:var(--mono);font-size:12px;letter-spacing:.3em;text-transform:uppercase}
.title-card .dash{display:block;width:40px;height:1px;background:#fff;margin:22px auto}
.title-card h2{
  font-family:var(--display);font-weight:400;font-size:clamp(56px,9vw,130px);
  line-height:.88;letter-spacing:-.015em;text-transform:uppercase;color:#fff;margin:0;
}
.title-card .meta{margin-top:24px;color:var(--grey);font-family:var(--mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase}

/* =============================================================
   BOBINES LIST (homepage)
   ============================================================= */
.bobines{padding:100px 40px;background:#fff}
.bobines-inner{max-width:1100px;margin:0 auto}
.bobines-head{display:flex;justify-content:space-between;align-items:baseline;border-bottom:var(--ruler);padding-bottom:16px;margin-bottom:30px}
.bobines-head h3{font-family:var(--display);font-size:42px;text-transform:uppercase;letter-spacing:-.01em;font-weight:400}
.bobines-head .count{font-family:var(--mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--grey)}
.group-label{
  font-family:var(--mono);font-size:11px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--red);margin:44px 0 8px;
}
.group-label:first-child{margin-top:0}
.bobines-list{list-style:none;margin:0;padding:0}
.bobines-list li{border-bottom:var(--dot)}
.bobines-list li a{display:flex;align-items:baseline;padding:22px 0;gap:16px;transition:background .2s}
.bobines-list li a:hover{background:#faf0f1}
.bobines-list li a:hover .name,
.bobines-list li a:hover .arrow{color:var(--red)}
.bobines-list .num{font-family:var(--mono);font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--grey);flex-shrink:0;width:110px}
.bobines-list .name{font-family:var(--display);font-size:34px;text-transform:uppercase;letter-spacing:-.005em;color:var(--ink);flex-shrink:0;font-weight:400}
.bobines-list .dots{flex:1;border-bottom:var(--dot);transform:translateY(-6px);margin:0 8px;min-width:60px}
.bobines-list .dur{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--grey);width:180px;text-align:right}
.bobines-list .arrow{color:var(--grey);font-family:var(--mono);font-size:14px;width:20px;text-align:right}

/* =============================================================
   PLANS SÉLECTIONNÉS (homepage)
   ============================================================= */
.plans{padding:100px 40px;background:#fff;border-top:var(--ruler)}
.plans-inner{max-width:1100px;margin:0 auto}
.plans h3{font-family:var(--display);font-size:42px;text-transform:uppercase;letter-spacing:-.01em;margin-bottom:8px;font-weight:400}
.plans .kicker{font-family:var(--mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--red);margin-bottom:40px}
.plan-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:44px 36px}
.plan{display:block}
.plan .reel{margin-bottom:18px}
.plan .sc{font-family:var(--mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--red);display:block;margin-bottom:6px}
.plan .tc{font-family:var(--mono);font-size:10px;letter-spacing:.14em;color:var(--grey);display:block;margin-bottom:8px}
.plan h4{font-family:var(--display);font-size:26px;line-height:1;text-transform:uppercase;letter-spacing:-.01em;margin-bottom:8px;font-weight:400}
.plan p{font-family:var(--serif);font-size:17px;color:#333}
.plan:hover h4{color:var(--red)}
.plan.offset-down{margin-top:60px}
.plan.offset-up{margin-top:-20px}

/* =============================================================
   COUNTRY HUB — scene card, voix off, shot list
   ============================================================= */
.breadcrumb{
  padding:14px 40px;background:#fff;border-bottom:var(--dot);
  font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--grey);
}
.breadcrumb a:hover{color:var(--red)}
.breadcrumb .sep{margin:0 10px;color:#ccc}

.scene-card{
  background:var(--ink);color:#fff;padding:120px 40px 80px;min-height:72vh;
  display:flex;flex-direction:column;justify-content:space-between;position:relative;overflow:hidden;
}
.scene-top{display:flex;justify-content:space-between;color:var(--grey);font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase}
.scene-top .red{color:var(--red)}
.scene-kicker{color:var(--red);font-family:var(--mono);font-size:12px;letter-spacing:.3em;text-transform:uppercase;margin-top:20px}
.scene-card h1{
  font-family:var(--display);font-weight:400;font-size:clamp(80px,16vw,220px);
  line-height:.82;letter-spacing:-.02em;text-transform:uppercase;color:#fff;margin:20px 0 0;
}
.scene-card h1 .dash{color:var(--red)}
.scene-coord{
  margin-top:30px;display:flex;gap:50px;flex-wrap:wrap;
  font-family:var(--mono);font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:#eee;
}
.scene-coord span b{display:block;color:var(--grey);font-weight:400;font-size:10px;margin-bottom:4px}

.voix-off{padding:100px 40px;background:#fff}
.voix-off-inner{max-width:760px;margin:0 auto}
.vo-label{
  color:var(--red);font-family:var(--mono);font-size:11px;letter-spacing:.22em;
  text-transform:uppercase;display:block;margin-bottom:22px;
}
.voix-off-inner p{font-family:var(--serif);font-style:italic;font-size:22px;line-height:1.55;color:#222;margin-bottom:22px}
.voix-off-inner p:first-of-type::first-letter{color:var(--red);font-size:1.6em;font-family:var(--display);font-style:normal}
.voix-off-inner h2{font-family:var(--display);font-size:38px;text-transform:uppercase;margin:50px 0 22px;font-weight:400}
.voix-off-inner h2::before{content:"§ ";color:var(--red);font-family:var(--mono);font-size:14px;letter-spacing:.14em;vertical-align:super;margin-right:6px}

.intertitle{background:var(--ink);color:#fff;padding:70px 40px;text-align:center}
.intertitle .sc{color:var(--red);font-family:var(--mono);font-size:12px;letter-spacing:.3em;text-transform:uppercase}
.intertitle .dash{display:block;width:40px;height:1px;background:#fff;margin:18px auto}
.intertitle h2{font-family:var(--display);font-weight:400;font-size:clamp(48px,8vw,110px);line-height:.88;letter-spacing:-.015em;text-transform:uppercase;margin:0}
.intertitle .meta{margin-top:18px;color:var(--grey);font-family:var(--mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase}

.shots{padding:90px 40px;background:#fff}
.shots-inner{max-width:1000px;margin:0 auto}
.shot-link{display:block;text-decoration:none}
.shot{
  display:grid;grid-template-columns:170px 1fr auto;gap:30px;
  padding:34px 0;border-bottom:var(--dot);align-items:start;
}
.shot-link:first-child .shot{border-top:var(--ruler)}
.shot .tc{font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--grey);text-transform:uppercase;line-height:1.5}
.shot .tc .n{display:block;color:var(--red);margin-bottom:6px;letter-spacing:.22em}
.shot-body h3{font-family:var(--display);font-size:34px;text-transform:uppercase;letter-spacing:-.01em;line-height:1;margin-bottom:10px;font-weight:400}
.shot-body .sub{font-family:var(--serif);font-style:italic;color:var(--red);font-size:17px;margin-bottom:8px}
.shot-body .q{font-family:var(--serif);font-style:italic;font-size:18px;color:#333;max-width:54ch;margin-bottom:10px}
.shot-body .tags{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--grey)}
.shot-body .tags span{margin-right:14px}
.shot .go{font-family:var(--mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--red);align-self:center;white-space:nowrap}
.shot-link:hover .shot-body h3{color:var(--red)}
.shot-link:hover .go{text-decoration:underline}

/* X-refs */
.xrefs{background:var(--ink);color:#fff;padding:100px 40px}
.xrefs h3{text-align:center;color:var(--grey);font-family:var(--mono);font-size:11px;letter-spacing:.3em;text-transform:uppercase;margin-bottom:50px;font-weight:400}
.xrefs-grid{max-width:1100px;margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr);gap:30px}
.xref{border:1px solid #333;padding:40px 28px;text-align:center;transition:all .2s;display:block}
.xref:hover{background:#151515;border-color:var(--red)}
.xref .sc{color:var(--red);font-family:var(--mono);font-size:11px;letter-spacing:.24em;text-transform:uppercase;display:block;margin-bottom:18px}
.xref h4{font-family:var(--display);font-size:42px;text-transform:uppercase;line-height:.9;color:#fff;margin-bottom:14px;font-weight:400}
.xref .meta{color:var(--grey);font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase}

/* =============================================================
   ARTICLE — title card, meta strip, two-column body
   ============================================================= */
.plan-card{
  background:var(--ink);color:#fff;padding:120px 40px 80px;text-align:center;min-height:62vh;
  display:flex;flex-direction:column;justify-content:center;position:relative;overflow:hidden;
}
.plan-card .pre{color:var(--red);font-family:var(--mono);font-size:12px;letter-spacing:.3em;text-transform:uppercase;margin-bottom:30px}
.plan-card .plan-title{
  font-family:var(--display);font-weight:400;font-size:clamp(64px,13vw,180px);
  line-height:.82;letter-spacing:-.02em;text-transform:uppercase;color:#fff;margin:0;
}
.plan-card .plan-sub{font-family:var(--serif);font-style:italic;font-size:26px;color:#eaeaea;margin-top:24px}
.plan-card .plan-sub::before,
.plan-card .plan-sub::after{content:"—";color:var(--red);margin:0 14px;font-style:normal}
.plan-card .plan-tc{margin-top:44px;font-family:var(--mono);font-size:13px;letter-spacing:.24em;color:#ddd;text-transform:uppercase}

.plan-voice{padding:60px 40px 20px;background:#fff}
.plan-voice-inner{
  max-width:620px;margin:0 auto;padding-left:24px;border-left:2px solid var(--red);
  font-family:var(--serif);font-style:italic;font-size:22px;color:#333;line-height:1.55;
}
.plan-voice .vo-lab{
  display:block;color:var(--red);font-family:var(--mono);font-style:normal;
  font-size:10px;letter-spacing:.22em;text-transform:uppercase;margin-bottom:14px;
}

.meta-strip-wrap{padding:0 40px;background:#fff}
.meta-strip{
  max-width:900px;margin:0 auto;padding:28px 0;border-top:var(--ruler);border-bottom:var(--dot);
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:20px;
  font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--grey);
}
.meta-strip span b{display:block;color:var(--ink);font-weight:400;font-size:11px;margin-bottom:4px;letter-spacing:.2em}

/* Two-column body + sidebar */
.plan-body{padding:80px 40px 40px;background:#fff}
.plan-body-inner{
  max-width:1160px;margin:0 auto;
  display:grid;grid-template-columns:minmax(0,680px) 280px;gap:90px;align-items:start;
}
.plan-body .article-content{min-width:0}

/* =============================================================
   ARTICLE CONTENT typography
   ============================================================= */
.article-content{font-family:var(--serif);font-size:20px;line-height:1.72;color:var(--ink)}
.article-content p{margin-bottom:26px}
.article-content p:first-of-type::first-letter{
  font-family:var(--display);color:var(--red);font-size:80px;line-height:.8;
  float:left;padding:8px 12px 0 0;font-style:normal;
}
.article-content h2{
  font-family:var(--display);font-size:44px;line-height:1;text-transform:uppercase;
  letter-spacing:-.01em;margin:60px 0 24px;color:var(--ink);font-weight:400;
}
.article-content h2::before{content:"§ ";color:var(--red);font-family:var(--mono);font-size:16px;letter-spacing:.14em;vertical-align:super;margin-right:6px}
.article-content h3{
  font-family:var(--display);font-size:30px;line-height:1.05;text-transform:uppercase;
  margin:44px 0 18px;color:var(--ink);font-weight:400;
}
.article-content h3::before{content:"§ ";color:var(--red);font-family:var(--mono);font-size:13px;letter-spacing:.14em;vertical-align:super;margin-right:4px}
.article-content h4{font-family:var(--display);font-size:22px;text-transform:uppercase;margin:32px 0 14px;font-weight:400}

.article-content ul,
.article-content ol{margin:0 0 26px 0;padding-left:24px}
.article-content ul{list-style:disc}
.article-content ol{list-style:decimal}
.article-content li{margin-bottom:8px;padding-left:6px}
.article-content li::marker{color:var(--red)}

.article-content table{width:100%;border-collapse:collapse;margin:30px 0;font-size:16px}
.article-content th,
.article-content td{border-bottom:var(--dot);padding:12px 10px;text-align:left;vertical-align:top}
.article-content th{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--grey);border-bottom:var(--ruler)}

.article-content code{font-family:var(--mono);font-size:.92em;background:#f3f3f3;padding:2px 6px}
.article-content pre{background:var(--ink);color:#eee;padding:20px 22px;overflow:auto;font-family:var(--mono);font-size:14px;margin:30px 0}
.article-content pre code{background:transparent;color:inherit;padding:0}

/* Links: red + underline, but NOT CTA buttons */
.article-content a:not(.cta-button){color:var(--red);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.article-content a:not(.cta-button):hover{color:var(--ink);background:#fbe0e3}
.content-wrap a:not(.cta-button){color:var(--red);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.content-wrap a:not(.cta-button):hover{color:var(--ink);background:#fbe0e3}

/* Pull quote — jump cut offset */
.article-content blockquote{
  margin:72px 0 72px -80px;max-width:780px;padding:0;border:none;
  font-family:var(--serif);font-style:italic;font-size:38px;line-height:1.18;color:var(--red);
}
.article-content blockquote p{margin:0}
.article-content blockquote cite,
.article-content blockquote footer{
  display:block;margin-top:14px;font-family:var(--mono);font-style:normal;
  font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--grey);
}

/* Dialogue block: strong "NAME · V.O." line immediately before a blockquote.
   We can't easily reparent in pure CSS, so style a bold+blockquote pair. */
.article-content p strong:only-child{
  display:inline-block;font-family:var(--mono);font-weight:500;font-size:11px;
  letter-spacing:.22em;text-transform:uppercase;color:var(--red);
}
.article-content p:has(> strong:only-child){
  margin-bottom:6px;text-align:center;
}
.article-content p:has(> strong:only-child) + blockquote{
  margin:10px auto 40px;max-width:560px;padding:22px 28px;
  background:#fafafa;border:1px solid var(--ink);
  font-family:var(--serif);font-style:italic;font-size:21px;line-height:1.5;color:#222;
}
.article-content p:has(> strong:only-child) + blockquote p{margin:0}
.article-content p:has(> strong:only-child) + blockquote::before{content:none}

/* Fin du plan */
.fin-plan-wrap{max-width:680px;margin:80px auto 30px;padding:0 40px;text-align:center}
.fin-plan{
  font-family:var(--mono);font-size:11px;letter-spacing:.28em;text-transform:uppercase;
  color:var(--grey);position:relative;
}
.fin-plan::before,.fin-plan::after{content:"——";color:var(--red);margin:0 14px}
.perf-line{max-width:200px;margin:18px auto 0;height:8px;background:repeating-linear-gradient(90deg,var(--ink) 0 5px,#fff 5px 10px);opacity:.7}

/* Plan nav */
.plan-nav{
  max-width:1100px;margin:60px auto;padding:0 40px;
  display:grid;grid-template-columns:1fr 1fr;gap:30px;
}
.plan-nav a,.plan-nav .placeholder{
  display:block;padding:32px 28px;background:var(--ink);color:#fff;border:1px solid #222;min-height:130px;
}
.plan-nav a:hover{border-color:var(--red)}
.plan-nav a:hover .ttl{color:var(--red)}
.plan-nav .lbl{font-family:var(--mono);font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--grey);display:block;margin-bottom:14px}
.plan-nav .ttl{font-family:var(--display);font-size:24px;text-transform:uppercase;line-height:1.05}
.plan-nav .next{text-align:right}
.plan-nav .placeholder{background:transparent;border:1px dotted #333}

/* =============================================================
   SIDEBAR (article)
   ============================================================= */
.article-sidebar{
  font-family:var(--mono);font-size:11px;letter-spacing:.12em;
  position:sticky;top:120px;align-self:start;
}
.fiche{border:1px solid var(--ink);padding:22px 20px;margin-bottom:30px;background:#fff}
.fiche-head{display:flex;justify-content:space-between;align-items:baseline;border-bottom:1px solid var(--ink);padding-bottom:10px;margin-bottom:14px}
.fiche-kicker{color:var(--red);text-transform:uppercase;letter-spacing:.22em;font-size:10px}
.fiche-reel{color:var(--grey);text-transform:uppercase;letter-spacing:.2em;font-size:10px}
.fiche-table{margin:0;display:grid;grid-template-columns:90px 1fr;row-gap:10px;column-gap:12px}
.fiche-table dt{color:var(--grey);text-transform:uppercase;font-size:10px;letter-spacing:.18em}
.fiche-table dd{margin:0;color:var(--ink);font-family:var(--mono);font-size:11px;letter-spacing:.08em}
.fiche-table dd.tc{font-size:10px;letter-spacing:.14em;color:var(--red)}

.other-plans{border-top:1px dotted var(--grey);padding-top:22px}
.op-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:14px}
.op-kicker{color:var(--red);text-transform:uppercase;letter-spacing:.22em;font-size:10px}
.op-reel{color:var(--grey);text-transform:uppercase;letter-spacing:.2em;font-size:10px}
.other-plans ol{list-style:none;margin:0;padding:0}
.other-plans li{border-bottom:var(--dot);padding:12px 0}
.other-plans li:last-child{border-bottom:none}
.other-plans a{display:block}
.other-plans .op-num{color:var(--red);text-transform:uppercase;letter-spacing:.2em;font-size:10px;display:block;margin-bottom:4px}
.other-plans .op-title{font-family:var(--display);font-size:18px;text-transform:uppercase;letter-spacing:.01em;color:var(--ink);display:block;line-height:1.1}
.other-plans .op-sub{font-family:var(--serif);font-style:italic;font-size:13px;color:var(--grey);letter-spacing:0;display:block;margin-top:4px}
.other-plans a:hover .op-title{color:var(--red)}

/* =============================================================
   CTA — Intermezzo + Générique (custom, via _cta.html.erb)
   ============================================================= */
.cta-block{
  background:var(--ink);color:#fff;margin:70px -60px;padding:56px 50px;position:relative;overflow:hidden;
}
/* Protect CTA from .article-content cascade (drop cap, black headings, § markers) */
.article-content .cta-block h2,
.article-content .cta-block h3,
.article-content .cta-block h4{color:#fff;margin:10px auto 26px;letter-spacing:-.01em}
.article-content .cta-block h2::before,
.article-content .cta-block h3::before,
.article-content .cta-block h4::before{content:none}
.article-content .cta-block p{color:#eee}
.article-content .cta-block p:first-of-type::first-letter{
  all:unset;font:inherit;color:inherit;float:none;padding:0;
}
.cta-top{
  display:flex;justify-content:space-between;align-items:baseline;
  color:var(--grey);font-family:var(--mono);font-size:10px;letter-spacing:.24em;text-transform:uppercase;margin-bottom:30px;
}
.cta-top .red{color:var(--red)}
.cta-top .red::before{content:"";display:inline-block;width:7px;height:7px;background:var(--red);border-radius:50%;margin-right:8px;vertical-align:middle}
.cta-card-title{font-family:var(--serif);font-style:italic;color:#eaeaea;font-size:13px;margin-bottom:8px;text-align:center}
.cta-card-title::before,.cta-card-title::after{content:"—";color:var(--red);margin:0 10px;font-style:normal;font-family:var(--display)}
.cta-h{
  font-family:var(--display);font-weight:400;font-size:44px;line-height:.92;letter-spacing:-.01em;
  text-transform:uppercase;color:#fff;margin:10px auto 26px;text-align:center;max-width:640px;
}
.cta-h .dot{color:var(--red)}
.cta-voice,
.cta-intro{
  font-family:var(--serif);font-style:italic;font-size:22px;line-height:1.52;color:#eee;
  max-width:600px;margin:0 auto 30px;text-align:center;
}
.cta-voice em{color:var(--red);font-style:italic}
.cta-link{text-align:center}
.cta-link a{
  display:inline-block;font-family:var(--mono);font-size:13px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--red);border-bottom:1px solid var(--red);padding:10px 2px 6px;
}
.cta-link a::before{content:"[ "}
.cta-link a::after{content:" ]"}
.cta-link a:hover{color:#fff;border-color:#fff}
.cta-dash{display:block;width:36px;height:2px;background:var(--red);margin:30px auto 0}
.cta-coprod{
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:14px;margin-top:26px;
  padding-top:22px;border-top:var(--dot);border-top-color:#2a2a2a;
  font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--grey);
}
.cta-coprod b{color:#fff;font-weight:400}
.cta-coprod .red{color:var(--red)}

/* Générique variant specifics */
.cta-generique{border:1px solid #2a2a2a}
.cta-generique .cta-head{text-align:center;margin-bottom:28px}
.cta-generique .cta-lab{color:var(--red);font-family:var(--mono);font-size:11px;letter-spacing:.28em;text-transform:uppercase;display:block;margin-bottom:12px}
.cta-perf{height:6px;margin:0 -50px 28px;background:repeating-linear-gradient(90deg,transparent 0 8px,#1a1a1a 8px 14px)}
.cta-credits{
  list-style:none;max-width:560px;margin:0 auto 30px;padding:0;
  font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;
}
.cta-credits li{display:flex;align-items:baseline;padding:10px 0;border-bottom:var(--dot);border-bottom-color:#262626}
.cta-credits li .k{color:var(--grey);width:200px;flex-shrink:0}
.cta-credits li .dots{flex:1;border-bottom:var(--dot);border-bottom-color:#2a2a2a;transform:translateY(-6px);margin:0 12px}
.cta-credits li .v{color:#fff;text-align:right;flex-shrink:0}
.cta-credits li .v.red{color:var(--red)}

/* =============================================================
   SIMPLE (About / Carnets / transverses)
   ============================================================= */
.simple-card{
  background:var(--ink);color:#fff;padding:140px 40px 110px;text-align:center;min-height:62vh;
  display:flex;flex-direction:column;justify-content:center;position:relative;overflow:hidden;
}
.simple-card .pre{color:var(--red);font-family:var(--mono);font-size:12px;letter-spacing:.3em;text-transform:uppercase;margin-bottom:34px}
.simple-title{
  font-family:var(--display);font-weight:400;font-size:clamp(70px,16vw,220px);
  line-height:.82;letter-spacing:-.02em;text-transform:uppercase;margin:0;
}
.simple-sub{margin-top:28px;font-family:var(--mono);font-size:13px;letter-spacing:.3em;text-transform:uppercase;color:#e0e0e0}

.simple-body{padding:100px 40px 60px;background:#fff}
.simple-body-inner{max-width:680px;margin:0 auto}
.simple-body .voice{
  font-family:var(--serif);font-style:italic;font-size:24px;line-height:1.5;color:#222;
  margin-bottom:50px;padding-left:24px;border-left:2px solid var(--red);
}
.simple-body .voice .vo-lab{display:block;color:var(--red);font-family:var(--mono);font-style:normal;font-size:10px;letter-spacing:.22em;text-transform:uppercase;margin-bottom:14px}

/* =============================================================
   FOOTER — générique de clôture
   ============================================================= */
.generique{background:var(--ink);color:#eee;padding:120px 40px 60px;position:relative}
.generique-inner{max-width:900px;margin:0 auto;text-align:center}
.generique-head{margin-bottom:60px}
.generique-head .tag{color:var(--red);font-family:var(--mono);font-size:11px;letter-spacing:.3em;text-transform:uppercase;display:block;margin-bottom:16px}
.generique .fin{font-family:var(--display);font-weight:400;font-size:84px;letter-spacing:.02em;text-transform:uppercase;color:#fff;line-height:.9;margin:0}
.generique .fin .dot{color:var(--red)}
.generique-head .sub{font-family:var(--serif);font-style:italic;color:#bbb;font-size:16px;margin-top:16px;max-width:620px;margin-left:auto;margin-right:auto}

.credits{list-style:none;margin:0 0 50px;padding:0;font-family:var(--mono);font-size:12px;letter-spacing:.14em;color:#ddd}
.credits li{display:flex;align-items:baseline;padding:10px 0;text-transform:uppercase;justify-content:center;gap:16px}
.credits li .k{color:var(--grey);width:220px;text-align:right;flex-shrink:0}
.credits li .dots{flex:0 0 120px;border-bottom:var(--dot);border-bottom-color:#333;transform:translateY(-6px)}
.credits li .v{color:#fff;width:220px;text-align:left;flex-shrink:0}
.credits li .v.red{color:var(--red)}

.generique-bobines .tag{color:var(--red);font-family:var(--mono);font-size:11px;letter-spacing:.3em;text-transform:uppercase;display:block;margin-bottom:18px}
.generique-bobines ol{list-style:none;margin:0 0 40px;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:8px 22px}
.generique-bobines li{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#ccc}
.generique-bobines a:hover{color:var(--red)}
.generique-bobines .r{color:var(--red);margin-right:4px}

.generique-nav{display:flex;justify-content:center;flex-wrap:wrap;gap:8px 22px;margin-bottom:36px;font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:#aaa}
.generique-nav a:hover{color:var(--red)}

.generique-rule{height:1px;background:#333;max-width:260px;margin:10px auto 30px}
.generique-bot{display:flex;align-items:center;justify-content:center;gap:14px;color:var(--red);font-family:var(--mono);font-size:11px;letter-spacing:.3em;text-transform:uppercase}
.generique-bot .red-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--red)}

/* =============================================================
   GDPR — Carton technique №1
   ============================================================= */
.carton-gdpr{
  position:fixed;bottom:20px;left:20px;max-width:440px;z-index:80;
  background:var(--ink);color:#fff;border:1px solid #222;padding:26px 28px;
}
.carton-gdpr[hidden]{display:none}
.carton-top{
  display:flex;justify-content:space-between;align-items:baseline;
  color:var(--grey);font-family:var(--mono);font-size:10px;letter-spacing:.24em;text-transform:uppercase;margin-bottom:18px;
}
.carton-top .no{color:var(--red)}
.carton-top .no::before{content:"";display:inline-block;width:7px;height:7px;background:var(--red);border-radius:50%;margin-right:8px;vertical-align:middle}
.carton-title{font-family:var(--serif);font-style:italic;font-size:12px;color:#ccc;margin-bottom:6px;text-align:center}
.carton-title::before,.carton-title::after{content:"—";color:var(--red);margin:0 10px;font-style:normal}
.carton-h{font-family:var(--display);font-weight:400;font-size:30px;line-height:.95;text-transform:uppercase;color:#fff;margin:4px 0 14px}
.carton-h .dot{color:var(--red)}
.carton-voice{font-family:var(--serif);font-style:italic;font-size:14px;line-height:1.5;color:#ddd;margin-bottom:18px}
.carton-actions{display:flex;flex-wrap:wrap;gap:8px 12px;margin-bottom:18px}
.btn-gdpr{
  font-family:var(--mono);font-size:10px;letter-spacing:.22em;text-transform:uppercase;
  padding:10px 16px;border:1px solid transparent;cursor:pointer;background:transparent;color:#fff;
}
.btn-gdpr.accept{background:#fff;color:var(--ink);border-color:#fff}
.btn-gdpr.accept::before{content:"[ ";color:var(--red)}
.btn-gdpr.accept::after{content:" ]";color:var(--red)}
.btn-gdpr.accept:hover{background:var(--red);color:#fff}
.btn-gdpr.accept:hover::before,.btn-gdpr.accept:hover::after{color:#fff}
.btn-gdpr.reject{border-color:#fff}
.btn-gdpr.reject::before{content:"[ "}
.btn-gdpr.reject::after{content:" ]"}
.btn-gdpr.reject:hover{border-color:var(--red);color:var(--red)}
.btn-gdpr.custom{color:var(--red);padding:10px 0;border:none;border-bottom:1px solid var(--red)}
.btn-gdpr.custom:hover{color:#fff;border-color:#fff}
.carton-foot{
  display:flex;align-items:center;gap:10px;padding-top:14px;border-top:1px solid #222;
  font-family:var(--mono);font-size:9px;letter-spacing:.22em;text-transform:uppercase;color:var(--grey);
}

/* =============================================================
   RESPONSIVE
   ============================================================= */
@media (max-width:900px){
  .ribbon{grid-template-columns:auto 1fr auto;padding:14px 18px;gap:10px}
  .ribbon .brand{font-size:26px}
  .burger{display:flex}
  .ribbon-nav{
    display:none;position:absolute;top:100%;left:0;right:0;background:#fff;border-bottom:var(--ruler);
    flex-direction:column;gap:0;padding:20px;
  }
  .ribbon.nav-open .ribbon-nav{display:flex}
  .ribbon-nav a{padding:12px 0;border-bottom:var(--dot);width:100%}
  .nav-dropdown-menu{position:static;margin:0;min-width:0}

  .opening{padding:40px 22px}
  .opening-title{font-size:72px}
  .opening-lede{font-size:19px}

  .title-card{padding:70px 22px}
  .title-card h2{font-size:44px}

  .monologue{padding:70px 22px}
  .monologue-body p,
  .monologue-body li{font-size:19px}

  .bobines{padding:60px 22px}
  .bobines-list li a{flex-wrap:wrap}
  .bobines-list .name{font-size:22px}
  .bobines-list .num{width:80px;font-size:10px}
  .bobines-list .dur{display:none}

  .plan-grid{grid-template-columns:1fr;gap:30px}
  .plan.offset-down,.plan.offset-up{margin-top:0}

  .scene-card{padding:80px 22px 60px}
  .scene-card h1{font-size:68px}
  .scene-coord{gap:22px}

  .voix-off,.shots,.plan-body,.plan-voice,.simple-body{padding-left:22px;padding-right:22px}
  .shot{grid-template-columns:1fr;gap:10px}
  .shot .go{align-self:start}
  .xrefs-grid{grid-template-columns:1fr}

  .plan-card{padding:80px 22px 60px}
  .plan-card .plan-title{font-size:56px}

  .meta-strip-wrap{padding:0 22px}
  .meta-strip{padding:20px 0;gap:12px}

  .plan-body-inner{grid-template-columns:1fr;gap:40px}
  .article-sidebar{position:static}

  .article-content .full-bleed{margin-left:-22px;margin-right:-22px}
  .article-content blockquote{margin-left:0;font-size:28px}
  .article-content h2{font-size:32px}
  .article-content h3{font-size:24px}
  .article-content p:first-of-type::first-letter{font-size:56px}

  .cta-block{margin:50px -22px;padding:40px 24px}
  .cta-h{font-size:30px}
  .cta-voice,.cta-intro{font-size:18px}
  .cta-perf{margin:0 -24px 24px}
  .cta-credits li{flex-wrap:wrap}
  .cta-credits li .k{width:auto;margin-right:auto}
  .cta-credits li .dots{display:none}

  .simple-card{padding:80px 22px 60px}
  .simple-title{font-size:60px}

  .plan-nav{grid-template-columns:1fr;padding:0 22px}
  .plan-nav .next{text-align:left}

  .generique{padding:70px 22px 40px}
  .generique .fin{font-size:54px}
  .credits li{flex-direction:column;gap:4px}
  .credits li .k,.credits li .v{width:auto;text-align:center}
  .credits li .dots{display:none}

  .carton-gdpr{left:10px;right:10px;bottom:10px;max-width:none;padding:20px 22px}
  .carton-h{font-size:24px}
}