/* ============================================================
   DAVID BROSS — FEUILLE DE STYLE PARTAGÉE (styles.css)
   Liée par : index · info · bepart · privacy · project_*
   ------------------------------------------------------------
   · Garde tous les fichiers dans le même dossier.
   · Mets tes images dans le sous-dossier "images/".
   · Aucun effet : pas de zoom, pas de transition, pas d'animation.
   ------------------------------------------------------------
   SOMMAIRE
     1. Variables & base
     2. Header (grand, gras)
     3. Hero plein écran (+ slider optionnel)
     4. Mosaïque projets (2 colonnes bureau / 1 mobile)
     5. Page projet (texte 2 colonnes + images)
     6. Page info
     7. Footer
     8. Vidéo intégrée (pleine largeur)
     9. Slideshow 16/6 (pleine largeur)
    10. Page « Be Part » (formulaire + soutien)
    11. Page « Privacy » (texte simple)
   ============================================================ */

/* ---------- 1. VARIABLES & BASE ---------- */
:root{
  --bg:#FBFAF7;        /* blanc chaud */
  --fg:#1A1815;        /* noir chaud */
  --muted:#8C877D;     /* gris : légendes, méta */
  --line:#E6E1D7;      /* filet fin */
  --ph:#ECE7DD;        /* fond placeholder image */
  --ph-fg:#B4AD9F;     /* texte placeholder */
  --sans:'Schibsted Grotesk','Helvetica Neue',Arial,sans-serif;
  --gutter:22px;       /* espace entre images/tuiles */
  --pad:34px;          /* marge latérale du site */
  --gold:#e6ac1d;
}
*{ box-sizing:border-box; }
html,body{ margin:0; }
body{
  background:var(--bg); color:var(--fg); font-family:var(--sans);
  font-size:16px; line-height:1.55; font-weight:400;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
a{ color:inherit; text-decoration:none; }
img{ display:block; width:100%; height:auto; object-fit:cover; }
::selection{ background:var(--fg); color:var(--bg); }
:focus-visible{ outline:2px solid var(--fg); outline-offset:3px; }

/* placeholder image : à remplacer par des <img>. Libellé via data-label="…". */
.ph{ position:relative; background:var(--ph); }
.ph[data-label]::after{
  content:attr(data-label); position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  font-size:12px; letter-spacing:.08em; color:var(--ph-fg); text-transform:uppercase;
}

/* ---------- 2. HEADER (grand, gras) ---------- */
.site-head{
  display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between;
  gap:10px 40px; padding:30px var(--pad) 26px;
}
.site-head .wordmark{
  font-size:clamp(30px,4.4vw,50px); font-weight:700; letter-spacing:-.015em;
  text-transform:uppercase; line-height:1;
}
.site-head nav{ display:flex; flex-wrap:wrap; align-items:baseline; gap:clamp(16px,2.4vw,32px); }
.site-head nav a{
  font-size:clamp(22px,2.8vw,32px); font-weight:700; letter-spacing:-.01em;
  text-transform:uppercase; line-height:1; color:var(--fg);
}
.site-head nav a:hover{ text-decoration:underline; text-underline-offset:4px; }
.site-head nav a[aria-current="page"]{ color:var(--muted); }

/* ---------- 3. HERO PLEIN ÉCRAN ---------- */
.hero-full{ width:100%; height:86vh; height:86svh; background:var(--ph); }
.hero-full .ph, .hero-full img{ width:100%; height:100%; object-fit:cover; }

/* SLIDER OPTIONNEL  — voir note dans index.html */
.band{ display:flex; gap:var(--gutter); overflow-x:auto; scroll-snap-type:x mandatory;
  padding:var(--gutter) var(--pad); scrollbar-width:none; }
.band::-webkit-scrollbar{ display:none; }
.band .slide{ flex:0 0 auto; width:72vw; height:76vh; scroll-snap-align:center; background:var(--ph); }
.band .slide:last-child{ margin-right:var(--pad); }
@media(max-width:640px){ .band .slide{ width:88vw; height:62vh; } }

/* ---------- 4. MOSAÏQUE PROJETS ---------- */
.mosaic{
  display:grid; grid-template-columns:repeat(2,1fr);
  gap:60px var(--gutter); padding:64px var(--pad) 90px;
}
@media(max-width:760px){
  .mosaic{ grid-template-columns:1fr; gap:44px; padding:44px var(--pad) 70px; }
}
.tile{ display:block; }
.tile .ph, .tile img{ aspect-ratio:3/2; width:100%; height:auto; object-fit:cover; }
.tile .cap{ display:flex; justify-content:space-between; align-items:baseline; gap:16px; margin-top:12px; }
.tile .t{ font-size:16px; font-weight:500; }
.tile .m{ font-size:13px; color:var(--muted); white-space:nowrap; }
.tile:hover .t{ text-decoration:underline; text-underline-offset:3px; }

/* ---------- 5. PAGE PROJET ---------- */
.project-head{ padding:52px var(--pad) 8px; }
.project-head h1{ font-size:clamp(28px,4vw,44px); font-weight:500; line-height:1.08;
  letter-spacing:-.01em; margin:0; }
.project-head .meta{ font-size:13px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--muted); margin-top:14px; }

/* texte projet en DEUX COLONNES */
.lead-2col{ columns:2; column-gap:48px; max-width:1040px;
  margin:26px 0 4px; font-size:16.5px; line-height:1.6; }
.lead-2col p{ margin:0 0 16px; break-inside:avoid-column; }
.lead-2col p:last-child{ margin-bottom:0; }
@media(max-width:760px){ .lead-2col{ columns:1; } }

.pbody{ padding:34px var(--pad) 40px; }
figure{ margin:0 0 var(--gutter); }
figure.full .ph, figure.full img{ width:100%; aspect-ratio:16/9; object-fit:cover; }
.pair{ display:grid; grid-template-columns:1fr 1fr; gap:var(--gutter); margin-bottom:var(--gutter); }
.pair figure{ margin:0; }
.pair .ph, .pair img{ aspect-ratio:4/5; object-fit:cover; }
@media(max-width:700px){ .pair{ grid-template-columns:1fr; } }
figcaption{ font-size:13px; color:var(--muted); margin-top:8px; }

/* ratios utilitaires : ajoute la classe sur le .ph ou l'<img> */
.r-32{ aspect-ratio:3/2 !important; } .r-11{ aspect-ratio:1/1 !important; }
.r-169{ aspect-ratio:16/9 !important; } .r-45{ aspect-ratio:4/5 !important; }
.r-23{ aspect-ratio:2/3 !important; } .r-34{ aspect-ratio:3/4 !important; }
.r-54{ aspect-ratio:5/4 !important; }

.pager{ display:flex; justify-content:space-between; gap:16px;
  padding:30px var(--pad) 70px; border-top:1px solid var(--line); font-size:14px; }
.pager a:hover{ text-decoration:underline; text-underline-offset:3px; }
.pager .next{ font-weight:500; }

/* ---------- 6. PAGE INFO ---------- */
.info{ display:grid; grid-template-columns:1.3fr 1fr; gap:60px; padding:64px var(--pad) 90px; align-items:start; }
@media(max-width:820px){ .info{ grid-template-columns:1fr; gap:36px; padding:44px var(--pad) 70px; } }
.bio p{ font-size:19px; line-height:1.55; max-width:60ch; margin:0 0 20px; }
.bio a{ text-decoration:underline; text-underline-offset:3px; }
.side .ph, .side img{ aspect-ratio:4/5; object-fit:cover; }
.contact{ margin-top:26px; font-size:15px; }
.contact .row{ display:flex; justify-content:space-between; gap:16px; padding:10px 0; border-bottom:1px solid var(--line); }
.contact .k{ color:var(--muted); }
.contact a:hover{ text-decoration:underline; text-underline-offset:3px; }

/* ---------- 7. FOOTER ---------- */
footer{ border-top:1px solid var(--line); display:flex; justify-content:space-between;
  flex-wrap:wrap; gap:12px; padding:22px var(--pad); font-size:13px; color:var(--muted); }
footer a:hover{ color:var(--fg); text-decoration:underline; text-underline-offset:3px; }

/* ---------- 8. VIDÉO INTÉGRÉE (pleine largeur du site) ---------- */
.video-block{ padding:34px var(--pad) 10px; }
.embed{ width:100%; aspect-ratio:16/9; background:#000; }
.embed iframe{ width:100%; height:100%; border:0; display:block; }
.video-block .vcap{ font-size:13px; color:var(--muted); margin-top:10px; }

/* ---------- 9. SLIDESHOW 16/6 (pleine largeur du site) ----------
   Un média à la fois, changement instantané (aucune animation).
   Ajoute/retire des <figure class="ss-slide"> ; ne mets .is-active que sur la 1re. */
.slideshow{ padding:30px var(--pad) 48px; }
.ss-frame{ position:relative; width:100%; aspect-ratio:16/6; background:var(--ph); overflow:hidden; }
.ss-slide{ position:absolute; inset:0; margin:0; display:none; }
.ss-slide.is-active{ display:block; }
.ss-slide .ph, .ss-slide img{ width:100%; height:100%; object-fit:cover; }
.ss-controls{ display:flex; align-items:center; justify-content:space-between; gap:16px; margin-top:14px; }
.ss-controls button{ font:inherit; font-size:14px; color:var(--fg); background:none; border:0; padding:0; cursor:pointer; }
.ss-controls button:hover{ text-decoration:underline; text-underline-offset:3px; }
.ss-count{ font-size:13px; letter-spacing:.1em; color:var(--muted); }

/* ---------- 10. PAGE « BE PART » (miroir d'INFO : texte + soutien) ---------- */
.bepart{ display:grid; grid-template-columns:1.15fr 1fr; gap:60px; padding:64px var(--pad) 90px; align-items:start; }
@media(max-width:820px){ .bepart{ grid-template-columns:1fr; gap:40px; padding:44px var(--pad) 70px; } }
.invite p{ font-size:19px; line-height:1.55; max-width:56ch; margin:0 0 20px; }
.invite p:last-child{ margin-bottom:0; }

/* formulaire de contact */
.form{ display:flex; flex-direction:column; gap:16px; max-width:460px; }
.form label{ display:flex; flex-direction:column; gap:6px; font-size:13px;
  letter-spacing:.04em; text-transform:uppercase; color:var(--muted); }
.form input, .form textarea{
  font:inherit; font-size:16px; color:var(--fg); background:var(--bg);
  border:1px solid var(--line); border-radius:0; padding:12px 14px; width:100%;
}
.form input:focus, .form textarea:focus{ outline:none; border-color:var(--fg); }
.form textarea{ min-height:130px; resize:vertical; }
.form button{
  align-self:flex-start; font:inherit; font-size:15px; font-weight:500;
  color:var(--bg); background:var(--fg); border:1px solid var(--fg);
  padding:12px 26px; cursor:pointer;
}
.form button:hover{ background:#000; }

/* bloc soutien / PayPal */
.support{ margin-top:40px; padding-top:26px; border-top:1px solid var(--line); max-width:460px; }
.support h2{ font-size:19px; font-weight:600; margin:0 0 10px; }
.support p{ font-size:15px; color:var(--muted); margin:0 0 18px; max-width:48ch; }
#paypal-container-HPFZLTMUZTJW8{ min-height:48px; }

/* ---------- 11. PAGE « PRIVACY » (texte simple) ---------- */
.legal{ padding:64px var(--pad) 90px; max-width:70ch; }
.legal h1{ font-size:clamp(26px,3.4vw,38px); font-weight:600; margin:0 0 6px; letter-spacing:-.01em; }
.legal .updated{ font-size:13px; letter-spacing:.05em; text-transform:uppercase; color:var(--muted); margin:0 0 30px; }
.legal p{ font-size:17px; line-height:1.6; margin:0 0 16px; }
.legal a{ text-decoration:underline; text-underline-offset:3px; }

/* ---------- 12. COMPARAISON 3 ÉTATS (même cadre, onglets nommés) ----------
   Pour comparer une transformation image (ex. Linear / LOG-C3 / Rec.709) :
   un seul cadre, on bascule entre les vues avec les onglets. Aucune animation.
   Cadre calé sur le ratio des stills 2048×1080. Ajoute/retire une <figure>
   ET son <button> (même ordre) ; ne mets .is-active que sur la 1re de chaque. */
.compare{ padding:30px var(--pad) 48px; }
.cmp-frame{ position:relative; width:100%; aspect-ratio:2048/1080; background:var(--ph); overflow:hidden; }
.cmp-shot{ position:absolute; inset:0; margin:0; display:none; }
.cmp-shot.is-active{ display:block; }
.cmp-shot img{ width:100%; height:100%; object-fit:cover; }
.cmp-tabs{ display:flex; flex-wrap:wrap; gap:26px; margin-top:14px; }
.cmp-tabs button{ font:inherit; font-size:14px; letter-spacing:.02em; color:var(--muted);
  background:none; border:0; padding:0 0 3px; cursor:pointer; border-bottom:2px solid transparent; }
.cmp-tabs button:hover{ color:var(--fg); }
.cmp-tabs button.is-active{ color:var(--fg); border-bottom-color:var(--fg); }
.cmp-cap{ font-size:13px; color:var(--muted); margin-top:12px; max-width:72ch; }

/* ---------- 13. SURLIGNAGE « LABEL » (fixe, comme la sélection) ---------- */
.mark{
  background: var(--fg);
  color: var(--bg);
  padding: .06em .32em;                 /* le petit rembourrage qui fait l'effet "label" */
  box-decoration-break: clone;          /* garde le rembourrage sur chaque ligne si ça passe à la ligne */
  -webkit-box-decoration-break: clone;
}

/* ---------- 14. PROGRAMME « BOLEX REWORKED » (bandeau image plein largeur) ---------- */
.program{
  position:relative; overflow:hidden;
  background:#16210f url('images/bolex-program-bg.jpg') center/cover no-repeat;
  min-height:78vh; display:flex; align-items:center; justify-content:center;
  padding:90px var(--pad); text-align:center;
}
.program::before{ content:""; position:absolute; inset:0; background:rgba(12,18,8,.38); } /* voile lisibilité — baisse à 0 si inutile */
.program-inner{ position:relative; z-index:1; max-width:700px; margin:0 auto; }
.program h2{ font-size:clamp(24px,3.4vw,34px); font-weight:600; margin:0 0 14px; letter-spacing:-.01em; color:#fff; }
.program p{ font-size:17px; line-height:1.6; color:rgba(255,255,255,.9); max-width:52ch; margin:0 auto 26px; }

/* bouton à coins arrondis — blanc pour ressortir sur l'image */
.btn-pill{
  display:inline-block; font:inherit; font-size:15px; font-weight:600; letter-spacing:.06em;
  color:#1A1815; background:#fff; border:1px solid #fff;
  padding:13px 34px; border-radius:999px; cursor:pointer; text-transform:uppercase;
}
.btn-pill:hover{ background:#f2ecdd; }

/* le <summary> déguisé en bouton */
.apply{ display:inline-block; }
.apply summary{ list-style:none; }
.apply summary::-webkit-details-marker{ display:none; }

/* formulaire révélé : panneau centré, lisible sur l'image */
.apply[open] summary.btn-pill{ margin-bottom:22px; }
.apply .form{ max-width:620px; margin:0 auto; text-align:left;
  background:rgba(10,14,8,.42); padding:22px; border-radius:14px; }
.program .form label{ color:rgba(255,255,255,.82); }
.apply .form button.btn-pill{ align-self:center; background:#fff; color:#1A1815; border-color:#fff; }