/* ============================================================
   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 */
}
*{ 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 (esprit Matt Wolf) — 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; }