/* ═══════════════════════════════════════════════════════════════
   Audio Creation Vision — système graphique « Studio »
   Papier / encre, une seule couleur signal (le voyant REC).
   Polices : Geist + Geist Mono (OFL), hébergées sur le site.
   ═══════════════════════════════════════════════════════════════ */

@font-face { font-family: 'Geist'; src: url('assets/fonts/geist.woff2') format('woff2');
  font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: 'Geist Mono'; src: url('assets/fonts/geist-mono.woff2') format('woff2');
  font-weight: 100 900; font-style: normal; font-display: swap; }

:root {
  --papier: #F2F0EB;
  --papier-2: #E8E5DE;
  --encre: #121211;
  --signal: #FF4A1C;

  /* thème clair (par défaut) */
  --bg: var(--papier);
  --bg-2: var(--papier-2);
  --fg: var(--encre);
  --fg-2: #46443F;
  --fg-3: #6B6862;
  --trait: rgba(18,18,17,.13);
  --trait-2: rgba(18,18,17,.30);
  --signal-texte: #B8340F;

  --marge: clamp(20px, 4vw, 56px);
  --largeur: 1360px;
  --section: clamp(80px, 10vw, 152px);
  --sans: 'Geist', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --mono: 'Geist Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
}

/* Thème nuit : écoute, films, pied de page */
.nuit {
  --bg: var(--encre);
  --bg-2: #1C1C1A;
  --fg: var(--papier);
  --fg-2: #B5B2AA;
  --fg-3: #8A877F;
  --trait: rgba(242,240,235,.13);
  --trait-2: rgba(242,240,235,.30);
  --signal-texte: var(--signal);
  background: var(--bg);
  color: var(--fg);
}

/* Thème jour forcé (ex. bandeau sur une page nuit) */
.jour {
  --bg: var(--papier); --bg-2: var(--papier-2); --fg: var(--encre); --fg-2: #46443F; --fg-3: #6B6862;
  --trait: rgba(18,18,17,.13); --trait-2: rgba(18,18,17,.30); --signal-texte: #B8340F;
  background: var(--bg); color: var(--fg);
}

/* ── Base ───────────────────────────────────────────────────── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 88px; }
body {
  background: var(--bg); color: var(--fg);
  font-family: var(--sans); font-size: 17px; line-height: 1.6; font-weight: 400;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility; overflow-x: hidden;
}
img, svg, iframe, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: none; cursor: pointer; }
::selection { background: var(--signal); color: var(--encre); }
:focus-visible { outline: 2px solid var(--signal); outline-offset: 3px; border-radius: 2px; }
[hidden] { display: none !important; }

.conteneur { width: 100%; max-width: var(--largeur); margin: 0 auto; padding-inline: var(--marge); }
.grille { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(16px, 2vw, 32px); }

/* ── Typographie ────────────────────────────────────────────── */
.etiquette {
  font-family: var(--mono); font-size: 12px; font-weight: 500; line-height: 1.4;
  letter-spacing: .06em; text-transform: uppercase; color: var(--fg-3);
}
.etiquette .num { color: var(--fg); }
.affiche {
  font-size: clamp(46px, 8.4vw, 132px); font-weight: 500; line-height: .95;
  letter-spacing: -.048em; text-wrap: balance;
}
.titre-2 {
  font-size: clamp(34px, 4.8vw, 68px); font-weight: 500; line-height: 1;
  letter-spacing: -.04em; text-wrap: balance;
}
.titre-3 { font-size: clamp(22px, 2vw, 28px); font-weight: 500; line-height: 1.15; letter-spacing: -.02em; }
.chapeau {
  font-size: clamp(19px, 1.75vw, 24px); line-height: 1.45; letter-spacing: -.012em;
  color: var(--fg-2); text-wrap: pretty;
}
.chapeau strong, .texte strong { color: var(--fg); font-weight: 500; }
.texte { color: var(--fg-2); text-wrap: pretty; }
.texte p + p { margin-top: .9em; }
.texte a, .chapeau a { text-decoration: underline; text-decoration-color: var(--signal); text-underline-offset: 3px; color: var(--fg); }
.point { color: var(--signal); }

/* ── Boutons & liens ────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: 50px; padding: 0 24px; border-radius: 999px;
  font-size: 15px; font-weight: 500; letter-spacing: -.005em; white-space: nowrap;
  border: 1px solid var(--trait-2); color: var(--fg);
  transition: background-color .25s, border-color .25s, color .25s;
}
.btn:hover { border-color: var(--fg); }
.btn-plein { background: var(--fg); border-color: var(--fg); color: var(--bg); }
.btn-plein:hover { background: var(--signal); border-color: var(--signal); color: var(--encre); }
.btn-petit { height: 38px; padding: 0 16px; font-size: 14px; }
.btn .fl { transition: transform .25s; }
.btn:hover .fl { transform: translateX(3px); }
.lien {
  display: inline-flex; align-items: center; gap: 8px; font-weight: 500;
  border-bottom: 1px solid var(--trait-2); padding-bottom: 2px; transition: border-color .25s;
}
.lien:hover { border-color: var(--signal); }
.lien .fl { transition: transform .25s; }
.lien:hover .fl { transform: translateX(3px); }

/* ── En-tête ────────────────────────────────────────────────── */
.entete { position: relative; z-index: 40; border-bottom: 1px solid var(--trait); background: var(--bg); }
.entete .conteneur { display: flex; align-items: center; justify-content: space-between; height: 76px; gap: 24px; }
.marque { display: inline-flex; align-items: center; gap: 12px; font-weight: 500; font-size: 15px; letter-spacing: -.01em; }
.marque svg { width: 40px; height: auto; }
.nav { display: flex; align-items: center; gap: clamp(18px, 2.4vw, 36px); }
.nav a { font-size: 15px; color: var(--fg-2); transition: color .2s; }
.nav a:hover, .nav a[aria-current] { color: var(--fg); }
.nav a[aria-current]::before { content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--signal); margin-right: 8px; vertical-align: 2px; }
.nav a.btn-plein { color: var(--bg); }
.nav a.btn-plein:hover { color: var(--encre); }
.btn-menu { display: none; font-family: var(--mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; height: 38px; padding: 0 14px; border: 1px solid var(--trait-2); border-radius: 999px; }
@media (max-width: 820px) {
  .btn-menu { display: inline-flex; align-items: center; }
  .nav { display: none; position: absolute; top: 76px; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0;
    background: var(--bg); border-bottom: 1px solid var(--trait); padding: 8px var(--marge) 20px; }
  .entete.ouvert .nav { display: flex; }
  .nav a { font-size: 22px; padding: 12px 0; border-bottom: 1px solid var(--trait); color: var(--fg); letter-spacing: -.02em; }
  .nav a.btn { margin-top: 16px; font-size: 16px; justify-content: center; border-bottom: none; height: 50px; padding: 0 24px; }
}

/* ── Sections ───────────────────────────────────────────────── */
.section { padding-block: var(--section); border-top: 1px solid var(--trait); }
.section.nuit { border-top: none; }
.sec-tete { margin-bottom: clamp(40px, 5vw, 72px); row-gap: 18px; align-items: end; }
.sec-tete .etiquette { grid-column: 1 / 4; align-self: start; padding-top: .7em; }
.sec-tete .titre-2 { grid-column: 4 / 11; }
.sec-tete .sec-action { grid-column: 11 / 13; justify-self: end; }
.sec-tete .sec-desc { grid-column: 4 / 11; }
@media (max-width: 900px) {
  .sec-tete .etiquette, .sec-tete .titre-2, .sec-tete .sec-desc, .sec-tete .sec-action { grid-column: 1 / -1; justify-self: start; }
  .sec-tete .etiquette { padding-top: 0; }
}

/* ── Accueil : héros ────────────────────────────────────────── */
.heros { padding-top: clamp(28px, 4vw, 56px); padding-bottom: clamp(40px, 5vw, 64px); }
.heros-meta { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: clamp(36px, 5vw, 64px); }
.rec { display: inline-flex; align-items: center; gap: 10px; }
.rec::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--signal); animation: rec 2.4s ease-in-out infinite; }
@keyframes rec { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
.heros-centre { display: flex; flex-direction: column; align-items: center; text-align: center; }
.heros-logo { width: clamp(150px, 19vw, 270px); height: auto; margin-bottom: clamp(32px, 4vw, 52px); }
.heros-centre .affiche { max-width: 13ch; font-size: clamp(44px, 7.4vw, 116px); }
.heros-centre .chapeau { max-width: 56ch; margin-top: clamp(24px, 3vw, 36px); }
.heros-actions { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; margin-top: 32px; }
.heros-metiers { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 22px; margin-top: 36px; }
.heros-metiers li { font-family: var(--mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--fg-3); }
.heros-metiers li + li::before { content: '·'; margin-right: 22px; color: var(--fg-3); }
@media (max-width: 560px) { .heros-metiers li + li::before { content: none; } .heros-metiers { gap: 6px 14px; } }

/* Onde abstraite (décor) */
.onde { margin-top: clamp(24px, 4vw, 64px); height: clamp(150px, 17vw, 250px); margin-inline: calc(var(--marge) * -1); }
.onde canvas { width: 100%; height: 100%; display: block; }

/* ── Services (liste numérotée) ─────────────────────────────── */
.services { border-bottom: 1px solid var(--trait); }
.service {
  display: grid; grid-template-columns: 3fr 4fr 4fr 1fr; column-gap: clamp(16px, 2vw, 32px); align-items: baseline;
  padding: clamp(24px, 2.6vw, 36px) 0; border-top: 1px solid var(--trait);
}
.service .etiquette { transition: color .25s; }
.service .titre-3 { font-size: clamp(26px, 3.2vw, 46px); letter-spacing: -.035em; line-height: 1.02; transition: transform .35s cubic-bezier(.2,.7,.2,1); }
.service .texte { font-size: 16px; }
.service .fl { justify-self: end; font-size: 22px; transition: transform .3s, color .3s; }
.service:hover .etiquette, .service:hover .fl { color: var(--signal-texte); }
.service:hover .titre-3 { transform: translateX(10px); }
.service:hover .fl { transform: translateX(4px); }
@media (max-width: 760px) {
  .service { grid-template-columns: 1fr auto; row-gap: 8px; }
  .service .etiquette { grid-column: 1 / -1; }
  .service .texte { grid-column: 1 / -1; }
  .service .fl { grid-row: 2; grid-column: 2; }
}

/* ── Morceaux : lecteurs SoundCloud intégrés tels quels ─────── */
.morceaux { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(40px, 5vw, 64px) clamp(16px, 2vw, 32px); }
.morceaux.x4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.morceau-lecteur { aspect-ratio: 1; border-radius: 4px; overflow: hidden; background: var(--bg-2); outline: 1px solid var(--trait); outline-offset: -1px; }
.morceau-lecteur iframe, .lecteur-sc iframe { width: 100%; height: 100%; border: 0; display: block; }
.morceau .etiquette { margin-top: 16px; }
.morceau-titre { font-size: clamp(18px, 1.6vw, 22px); font-weight: 500; letter-spacing: -.02em; line-height: 1.2; margin-top: 4px; }
.morceau-desc { font-size: 15px; color: var(--fg-2); margin-top: 6px; line-height: 1.6; }
.lecteur-sc { border-radius: 4px; overflow: hidden; background: var(--bg-2); outline: 1px solid var(--trait); outline-offset: -1px; }
.lecteur-sc.bandeau-sc { height: 166px; }
.lecteur-sc.carre { aspect-ratio: 4 / 3; }
@media (max-width: 1000px) { .morceaux, .morceaux.x4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .morceaux, .morceaux.x4 { grid-template-columns: 1fr; } }
sup.tm { font-size: .38em; vertical-align: .95em; margin-left: .04em; letter-spacing: 0; font-weight: 400; }

/* Visuels de section (sound design, mixage) */
.sec-visuel { margin: 0 0 clamp(40px, 5vw, 72px); border-radius: 3px; overflow: hidden; background: var(--bg-2); }
.sec-visuel img { width: 100%; aspect-ratio: 21 / 9; object-fit: cover; display: block; }
@media (max-width: 760px) { .sec-visuel img { aspect-ratio: 16 / 9; } }

/* ── Cas d'étude (myLiV) ────────────────────────────────────── */
.cas { row-gap: 40px; align-items: start; }
.cas-media { grid-column: 1 / 6; }
.cas-corps { grid-column: 7 / 13; }
.cas-corps .titre-2 { margin: 16px 0 14px; }
.cas-bloc { margin-top: 36px; padding-top: 24px; border-top: 1px solid var(--trait); }
.cas-bloc .etiquette { margin-bottom: 12px; }
.cas-credit { font-family: var(--mono); font-size: 12px; color: var(--fg-3); margin-top: 18px; }
.cas-liens { display: flex; flex-wrap: wrap; gap: 12px 28px; margin-top: 36px; }
@media (max-width: 900px) { .cas-media, .cas-corps { grid-column: 1 / -1; } .cas-media { max-width: 420px; } }

/* Façade vidéo (chargée au clic) */
.video { position: relative; width: 100%; background: var(--encre); border-radius: 4px; overflow: hidden; color: var(--papier); }
.video.v916 { aspect-ratio: 9 / 16; width: min(100%, calc(80vh * 9 / 16)); }
.video.v169 { aspect-ratio: 16 / 9; }
.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-facade { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: space-between; padding: 20px; text-align: left;
  background: radial-gradient(120% 80% at 50% 110%, rgba(255,74,28,.22), transparent 60%), var(--encre); }
.video-facade .etiquette { color: rgba(242,240,235,.6); }
.video-facade .lire { align-self: center; display: inline-flex; align-items: center; gap: 10px; height: 54px; padding: 0 24px; border-radius: 999px;
  background: var(--papier); color: var(--encre); font-weight: 500; transition: background .25s; }
.video-facade:hover .lire { background: var(--signal); }
.video-facade .mono { width: 48px; opacity: .9; position: relative; }
.video-facade .lire, .video-facade .etiquette { position: relative; }
.video-facade .vignette { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .5s, transform .6s cubic-bezier(.2,.7,.2,1); }
.video-facade.avec-vignette { background: var(--encre); }
.video-facade.avec-vignette .vignette { opacity: 1; }
.video-facade.avec-vignette::after { content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to bottom, rgba(18,18,17,.45) 0%, rgba(18,18,17,0) 28%, rgba(18,18,17,0) 62%, rgba(18,18,17,.7) 100%); }
.video-facade.avec-vignette .mono, .video-facade.avec-vignette .lire, .video-facade.avec-vignette .etiquette { z-index: 1; }
.video-facade.avec-vignette .etiquette { color: rgba(242,240,235,.85); }
.video-facade.avec-vignette:hover .vignette { transform: scale(1.03); }

/* ── Références (affiches) ──────────────────────────────────── */
.affiches { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(16px, 2vw, 32px); }
.affiche-carte img { width: 100%; aspect-ratio: 2 / 3; object-fit: cover; background: var(--bg-2); border-radius: 3px; transition: opacity .3s; }
.affiche-carte:hover img { opacity: .82; }
.affiche-carte .titre-carte { font-weight: 500; font-size: 17px; letter-spacing: -.01em; margin-top: 14px; }
.affiche-carte .etiquette { margin-top: 4px; }
@media (max-width: 760px) { .affiches { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ── Articles (cartes) ──────────────────────────────────────── */
.art-une { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(16px, 2vw, 32px); row-gap: 24px; align-items: center; }
.art-une .art-img { grid-column: 1 / 7; }
.art-une .art-corps { grid-column: 8 / 13; }
.art-img img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 3px; background: var(--bg-2); }
.art-corps .titre-3 { font-size: clamp(26px, 3vw, 40px); letter-spacing: -.03em; margin: 12px 0; }
.art-corps .texte { margin-bottom: 20px; }
.art-grille { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(32px, 4vw, 56px) clamp(16px, 2vw, 32px); }
.art-carte .titre-3 { margin: 12px 0 8px; }
.art-carte .art-img { margin-bottom: 18px; }
.art-carte:hover .titre-3, .art-une:hover .titre-3 { text-decoration: underline; text-decoration-color: var(--signal); text-underline-offset: 4px; text-decoration-thickness: 1px; }
@media (max-width: 900px) { .art-une .art-img, .art-une .art-corps { grid-column: 1 / -1; } .art-grille { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 600px) { .art-grille { grid-template-columns: 1fr; } }

/* ── Aussi (prestations annexes) ────────────────────────────── */
.section.aussi { padding-block: clamp(56px, 7vw, 96px); }
.aussi .grille { row-gap: 20px; align-items: start; }
.aussi-etiq { grid-column: 1 / 4; padding-top: .5em; }
.aussi-corps { grid-column: 4 / 10; }
.aussi-titre { font-size: clamp(24px, 2.6vw, 36px); letter-spacing: -.03em; margin-bottom: 14px; }
.aussi-corps .texte { max-width: 56ch; margin-bottom: 20px; }
.aussi-corps .puces { margin-bottom: 0; }
.aussi-lien { grid-column: 11 / 13; justify-self: end; margin-top: .5em; }
@media (max-width: 900px) { .aussi-etiq, .aussi-corps, .aussi-lien { grid-column: 1 / -1; justify-self: start; } }

/* ── Contact ────────────────────────────────────────────────── */
.contact { row-gap: 48px; }
.contact-intro { grid-column: 1 / 6; }
.contact-intro .affiche { font-size: clamp(44px, 6vw, 92px); margin: 20px 0 24px; }
.contact-mail { display: inline-block; margin-top: 32px; font-size: clamp(20px, 2vw, 26px); font-weight: 500; letter-spacing: -.02em;
  border-bottom: 1px solid var(--signal); padding-bottom: 2px; }
.contact-lieu { margin-top: 16px; }
.formulaire { grid-column: 7 / 13; }
@media (max-width: 900px) { .contact-intro, .formulaire { grid-column: 1 / -1; } }
.champ { display: flex; flex-direction: column; gap: 6px; margin-bottom: 26px; }
.champ label { font-family: var(--mono); font-size: 12px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--fg-3); }
.champ input:not([type=checkbox]), .champ select, .champ textarea {
  width: 100%; background: transparent; border: 0; border-bottom: 1px solid var(--trait-2); border-radius: 0;
  padding: 10px 0 12px; font-size: 18px; letter-spacing: -.01em; outline: none; -webkit-appearance: none; appearance: none; transition: border-color .2s;
}
.champ input::placeholder, .champ textarea::placeholder { color: var(--fg-3); opacity: .7; }
.champ input:focus, .champ select:focus, .champ textarea:focus { border-bottom-color: var(--fg); }
.champ select { cursor: pointer; padding-right: 28px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' stroke='%23121211' stroke-width='1.4' fill='none'/%3E%3C/svg%3E") no-repeat right 4px center; }
.champ textarea { resize: vertical; min-height: 130px; line-height: 1.6; }
.champ.erreur input, .champ.erreur textarea { border-bottom-color: var(--signal-texte); }
.rang2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 28px; }
@media (max-width: 560px) { .rang2 { grid-template-columns: 1fr; } }
.rgpd { display: flex; gap: 14px; align-items: flex-start; padding: 16px 18px; border: 1px solid var(--trait); border-radius: 4px; font-size: 14px; color: var(--fg-2); line-height: 1.6; }
.rgpd input { width: 18px; height: 18px; flex-shrink: 0; margin-top: 2px; accent-color: var(--encre); }
.rgpd a { text-decoration: underline; text-underline-offset: 2px; }
.rgpd.erreur { border-color: var(--signal-texte); }
.form-erreur { display: none; font-size: 13px; color: var(--signal-texte); margin-top: 8px; }
.form-erreur.on { display: block; }
.form-envoi { margin-top: 28px; }
.form-envoi:disabled { opacity: .45; cursor: not-allowed; }
.form-ok { display: none; padding: 32px; border: 1px solid var(--trait-2); border-radius: 4px; }
.form-ok.on { display: block; }

/* ── Pied de page ───────────────────────────────────────────── */
.pied { padding-top: clamp(72px, 9vw, 128px); padding-bottom: 32px; }
.pied-haut { row-gap: 40px; padding-bottom: clamp(56px, 7vw, 96px); }
.pied-marque { grid-column: 1 / 5; }
.pied-marque svg { width: 64px; margin-bottom: 20px; }
.pied-marque p { color: var(--fg-2); font-size: 15px; max-width: 30ch; }
.pied-nav { grid-column: 6 / 8; }
.pied-contact { grid-column: 8 / 11; }
.pied-reseaux { grid-column: 11 / 13; }
.pied-col a, .pied-col span { overflow-wrap: anywhere; }
.pied-col span { display: block; color: var(--fg-3); font-size: 15px; padding: 3px 0; }
.pied-col .etiquette { margin-bottom: 14px; }
.pied-col a { display: block; color: var(--fg-2); padding: 3px 0; transition: color .2s; font-size: 15px; }
.pied-col a:hover { color: var(--fg); }
@media (max-width: 900px) { .pied-marque { grid-column: 1 / -1; } .pied-nav, .pied-contact, .pied-reseaux { grid-column: span 4; } }
@media (max-width: 560px) { .pied-nav, .pied-reseaux { grid-column: span 6; } .pied-contact { grid-column: 1 / -1; order: 3; } }
.pied-nom { font-size: clamp(38px, 7.6vw, 124px); font-weight: 500; letter-spacing: -.05em; line-height: .9; padding: 28px 0 32px; border-top: 1px solid var(--trait); }
.pied-bas { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 32px; padding-top: 20px; border-top: 1px solid var(--trait); }
.pied-bas p, .pied-bas button { font-family: var(--mono); font-size: 12px; color: var(--fg-3); letter-spacing: .02em; }
.pied-bas button { text-decoration: underline; text-underline-offset: 3px; }
.pied-bas button:hover { color: var(--fg); }

/* ── Bandeau cookies & fenêtre mentions ─────────────────────── */
.bandeau { position: fixed; left: 16px; bottom: 16px; z-index: 500; max-width: 420px; padding: 20px 22px; border-radius: 6px;
  box-shadow: 0 18px 50px rgba(0,0,0,.28); transform: translateY(140%); transition: transform .5s cubic-bezier(.2,.7,.2,1); }
.bandeau.on { transform: none; }
.bandeau p { font-size: 14px; color: var(--fg-2); line-height: 1.6; }
.bandeau p a { color: var(--fg); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.bandeau-btns { display: flex; gap: 8px; margin-top: 16px; }
@media (max-width: 560px) { .bandeau { left: 8px; right: 8px; bottom: 8px; max-width: none; } }

.modale { display: none; position: fixed; inset: 0; z-index: 900; background: rgba(18,18,17,.55); backdrop-filter: blur(6px);
  overflow-y: auto; padding: clamp(16px, 4vw, 48px); }
.modale.on { display: flex; align-items: flex-start; justify-content: center; }
.modale-boite { background: var(--papier); color: var(--encre); width: 100%; max-width: 760px; margin: auto; padding: clamp(28px, 4vw, 56px);
  border-radius: 6px; position: relative; }
.modale-fermer { position: absolute; top: 14px; right: 14px; width: 44px; height: 44px; border-radius: 50%; font-size: 22px; color: var(--fg-2); }
.modale-fermer:hover { background: var(--papier-2); color: var(--encre); }
.modale h2 { font-size: clamp(26px, 3vw, 36px); font-weight: 500; letter-spacing: -.03em; margin-bottom: 28px; padding-right: 40px; }
.modale section { padding: 18px 0; border-top: 1px solid var(--trait); }
.modale section .etiquette { margin-bottom: 8px; }
.modale section p, .modale section li { font-size: 15px; color: var(--fg-2); line-height: 1.7; }
.modale section a { text-decoration: underline; text-underline-offset: 2px; }
.modale section strong { color: var(--encre); font-weight: 500; }

/* ── Pages intérieures ──────────────────────────────────────── */
.page-tete { padding-top: clamp(40px, 6vw, 88px); padding-bottom: clamp(48px, 6vw, 88px); }
.page-tete .affiche { margin: 24px 0 28px; }
.page-tete .chapeau { max-width: 40ch; }
.sous-nav { position: sticky; top: 0; z-index: 30; background: var(--bg); border-top: 1px solid var(--trait); border-bottom: 1px solid var(--trait); }
.sous-nav .conteneur { display: flex; gap: clamp(18px, 3vw, 44px); overflow-x: auto; scrollbar-width: none; }
.sous-nav a { flex-shrink: 0; font-family: var(--mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--fg-3);
  padding: 18px 0; border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color .2s, border-color .2s; }
.sous-nav a:hover { color: var(--fg); }
.sous-nav a.actif { color: var(--fg); border-bottom-color: var(--signal); }

.duo { row-gap: 40px; align-items: start; }
.duo > :first-child { grid-column: 1 / 7; }
.duo > :last-child { grid-column: 8 / 13; }
@media (max-width: 900px) { .duo > :first-child, .duo > :last-child { grid-column: 1 / -1; } }
.encadre { padding-top: 20px; border-top: 1px solid var(--fg); }
.encadre .etiquette { margin-bottom: 12px; }

.blocs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px clamp(16px, 2vw, 32px); }
.bloc { padding-top: 20px; border-top: 1px solid var(--fg); }
.bloc .etiquette { margin-bottom: 28px; }
.bloc h3 { font-size: 21px; font-weight: 500; letter-spacing: -.02em; line-height: 1.2; margin-bottom: 10px; }
.bloc .texte { font-size: 16px; }
@media (max-width: 1000px) { .blocs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .blocs { grid-template-columns: 1fr; } }

/* ── Films ──────────────────────────────────────────────────── */
.film { padding-block: clamp(56px, 7vw, 104px); border-top: 1px solid var(--trait); row-gap: 32px; align-items: start; }
.film-affiche { grid-column: 1 / 5; }
.film-affiche img { width: 100%; height: auto; border-radius: 3px; background: var(--bg-2); }
.film-infos { grid-column: 6 / 13; }
.film-tete { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-bottom: 18px; }
.badge { font-family: var(--mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; padding: 5px 10px; border-radius: 999px;
  border: 1px solid var(--signal); color: var(--signal-texte); }
.badge.neutre { border-color: var(--trait-2); color: var(--fg-2); }
.film h2 { margin-bottom: 10px; }
.film-real { margin-bottom: 24px; }
.puces { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 28px; }
.puces span { font-family: var(--mono); font-size: 12px; color: var(--fg-2); border: 1px solid var(--trait); border-radius: 999px; padding: 5px 12px; }
.film-synopsis { font-size: clamp(18px, 1.5vw, 21px); line-height: 1.55; color: var(--fg-2); max-width: 58ch; margin-bottom: 28px; letter-spacing: -.01em; }
.generique-btn { font-family: var(--mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--fg-2);
  display: inline-flex; align-items: center; gap: 10px; padding: 8px 0; }
.generique-btn:hover { color: var(--fg); }
.generique-btn .plus { display: inline-block; transition: transform .25s; font-size: 16px; }
.generique-btn[aria-expanded="true"] .plus { transform: rotate(45deg); }
.generique { display: none; margin: 8px 0 20px; padding: 20px 0; border-top: 1px solid var(--trait); border-bottom: 1px solid var(--trait);
  font-size: 15px; color: var(--fg-2); line-height: 1.8; max-width: 70ch; }
.generique.on { display: block; }
.generique strong { color: var(--fg); font-weight: 500; }
.generique p + p { margin-top: 12px; }
.film-actions { margin-top: 24px; display: flex; gap: 12px; flex-wrap: wrap; }
@media (max-width: 900px) { .film-affiche { grid-column: 1 / -1; max-width: 360px; } .film-infos { grid-column: 1 / -1; } }

.lecteur { display: none; position: fixed; inset: 0; z-index: 1000; background: rgba(10,10,9,.96); align-items: center; justify-content: center;
  flex-direction: column; padding: 20px; }
.lecteur.on { display: flex; }
.lecteur-boite { width: 100%; max-width: 1100px; }
.lecteur-haut { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; color: var(--papier); }
.lecteur-haut button { color: var(--papier); font-family: var(--mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; height: 40px; padding: 0 16px;
  border: 1px solid rgba(242,240,235,.3); border-radius: 999px; }
.lecteur-haut button:hover { border-color: var(--papier); }

/* ── Appel à l'action ─────────────────────────────────────── */
.cta { row-gap: 32px; align-items: end; }
.cta .affiche { grid-column: 1 / 9; font-size: clamp(44px, 7vw, 112px); }
.cta-cote { grid-column: 9 / 13; }
.cta-cote .texte { margin-bottom: 24px; }
@media (max-width: 900px) { .cta .affiche, .cta-cote { grid-column: 1 / -1; } }
.fil { display: flex; flex-wrap: wrap; gap: 4px 8px; }
.fil a { color: var(--fg-3); transition: color .2s; }
.fil a:hover { color: var(--fg); }

/* ── Vidéos (production audiovisuelle) ─────────────────────── */
.videos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(40px, 5vw, 64px) clamp(16px, 2vw, 32px); }
.video-carte .etiquette { margin-top: 16px; }
.video-carte .titre-3 { margin-top: 4px; font-size: clamp(19px, 1.7vw, 24px); }
.video-carte .texte { font-size: 15px; margin-top: 6px; }
.video-carte .video-facade .mono { visibility: hidden; }
@media (max-width: 760px) { .videos { grid-template-columns: 1fr; } }

/* ── Article ────────────────────────────────────────────────── */
.article { max-width: 760px; margin: 0 auto; padding-top: clamp(40px, 6vw, 80px); padding-bottom: var(--section); }
.article h1 { font-size: clamp(38px, 6vw, 76px); font-weight: 500; letter-spacing: -.045em; line-height: 1; margin: 20px 0 28px; text-wrap: balance; }
.article .couverture { width: 100%; border-radius: 3px; margin: 8px 0 44px; }
.article .corps { font-size: 19px; line-height: 1.75; color: var(--fg-2); }
.article .corps p + p { margin-top: 1.1em; }
.article .corps strong { color: var(--fg); font-weight: 500; }
.article .corps a { color: var(--fg); text-decoration: underline; text-decoration-color: var(--signal); text-underline-offset: 3px; }
.article .medias { margin-top: 40px; display: flex; flex-direction: column; gap: 20px; }
.article .medias iframe { width: 100%; border: 0; border-radius: 4px; }

/* ── Apparition au défilement ───────────────────────────────── */
.js .apparait { opacity: 0; transform: translateY(22px); transition: opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1); }
.js .apparait.on { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .js .apparait { opacity: 1; transform: none; }
}