/* ==========================================================
   CHEZ SPAMOSO : feuille de style commune à toutes les pages
   ========================================================== */

/* Police hébergée en local (Bricolage Grotesque, licence SIL OFL) */
@font-face{
  font-family:"Bricolage Grotesque";font-style:normal;font-weight:200 800;font-stretch:75% 100%;font-display:swap;
  src:url("../fonts/bricolage-grotesque-latin-wdth-normal.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Bricolage Grotesque";font-style:normal;font-weight:200 800;font-stretch:75% 100%;font-display:swap;
  src:url("../fonts/bricolage-grotesque-latin-ext-wdth-normal.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

:root{
  /* Police provisoire : à remplacer par celle d'OTW Production dès qu'elle est identifiée. */
  --font:"Bricolage Grotesque","Arial Narrow",Impact,system-ui,sans-serif;

  /* thème clair par défaut */
  --bg:#FBFAF7;
  --fg:#0C0C0C;
  --muted:#5E5D59;
  --line:rgba(12,12,12,.2);
  --alt-bg:#0C0C0C;
  --alt-fg:#F7F6F2;
  --alt-muted:#A9A7A1;
  --alt-line:rgba(247,246,242,.22);
  --card-bg:#0C0C0C;
  --card-line:transparent;
  /* logos blancs-sur-transparent (OTW, plateformes…) affichés directement
     sur le fond de la page : noir en thème clair, blanc en thème sombre —
     toujours dans la couleur du texte courant (--fg), jamais invisible.
     --icon-filter-invert est la version opposée, utilisée quand une carte
     s'inverse au survol (fond et texte inversés, ex. .team-card:hover). */
  --icon-filter:brightness(0);
  --icon-filter-invert:brightness(0) invert(1);
}
@media (prefers-color-scheme:dark){
  :root{
    --bg:#0C0C0C;
    --fg:#F7F6F2;
    --muted:#A9A7A1;
    --line:rgba(247,246,242,.22);
    --alt-bg:#F7F6F2;
    --alt-fg:#0C0C0C;
    --alt-muted:#5E5D59;
    --alt-line:rgba(12,12,12,.2);
    --card-bg:#1A1918;
    --card-line:rgba(247,246,242,.16);
    --icon-filter:brightness(0) invert(1);
    --icon-filter-invert:brightness(0);
  }
}
/* bande de logos « ils nous ont fait confiance » : toujours noire avec des
   logos blancs, quel que soit le thème clair/sombre du téléphone ou de
   l'ordinateur — pour ne jamais risquer un logo blanc invisible sur fond
   blanc (comme sur mobile avant ce correctif) */
.band-wrap{ --band-bg:#0C0C0C; --band-fg:#F7F6F2; --logo-filter:brightness(0) invert(1); }
/* sections inversées : noir sur fond clair, blanc sur fond sombre */
.alt{
  --bg:var(--alt-bg);--fg:var(--alt-fg);--muted:var(--alt-muted);--line:var(--alt-line);
  background:var(--bg);color:var(--fg);
}
/* carte toujours sombre (les logos blancs y restent visibles dans les deux thèmes) */
.dark-card{
  --bg:#0C0C0C;--fg:#F7F6F2;--muted:#A9A7A1;--line:rgba(247,246,242,.22);
  background:var(--card-bg);color:var(--fg);border:1px solid var(--card-line);
}

*,*::before,*::after{box-sizing:border-box}
html{
  background:var(--bg);
  scroll-behavior:smooth;
  scroll-padding-top:calc(env(safe-area-inset-top,0px) + 84px);
  -webkit-text-size-adjust:100%;
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition:none!important}
}
body{
  margin:0;background:var(--bg);color:var(--fg);
  font-family:var(--font);font-size:1.0625rem;line-height:1.55;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%}
a{color:inherit}
:focus-visible{outline:3px solid var(--fg);outline-offset:3px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.wrap{width:min(1240px,100% - 2.5rem);margin-inline:auto}
.skip{position:absolute;left:-999px;top:0;background:#0C0C0C;color:#F7F6F2;padding:.75rem 1rem;font-weight:700;z-index:80}
.skip:focus{left:1rem;top:1rem}

/* titres : majuscules condensées, comme "SPAMOSO" dans le logo */
.display{
  margin:0;font-weight:800;text-transform:uppercase;
  font-variation-settings:"wdth" 75;letter-spacing:-.01em;line-height:.94;
}

/* ---------- boutons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.75rem;
  font-family:var(--font);font-weight:700;font-size:1.05rem;line-height:1;
  min-height:52px;padding:1rem 1.6rem;border-radius:999px;
  background:var(--fg);color:var(--bg);border:2px solid var(--fg);
  text-decoration:none;cursor:pointer;transition:transform .15s ease;
}
.btn:hover{transform:translateY(-2px)}
.btn-ghost{background:transparent;color:var(--fg)}
.pill{
  display:inline-block;font-weight:700;font-size:.85rem;line-height:1;
  padding:.5em .9em;border:2px solid var(--fg);border-radius:999px;
}
.pill-solid{background:var(--fg);color:var(--bg)}

/* ---------- en-tête ---------- */
.bar{
  position:sticky;top:0;z-index:40;
  background:var(--bg);border-bottom:2px solid var(--fg);
  padding-top:env(safe-area-inset-top,0px);
}
.bar-in{display:flex;align-items:center;gap:1.5rem;min-height:72px}
.brand{margin-right:auto;display:inline-flex;text-decoration:none;color:var(--fg)}
.logo-sm{width:64px;height:auto;aspect-ratio:340/264;display:block}
.nav{display:flex;gap:clamp(1rem,1.8vw,1.75rem);align-items:center}
.nav a{
  font-weight:600;font-size:1rem;text-decoration:none;
  padding:.4rem 0;border-bottom:3px solid transparent;
}
.nav a:hover{border-bottom-color:var(--fg)}
.nav a[aria-current="page"]{border-bottom-color:var(--fg)}
.menu-btn{
  display:none;align-items:center;min-height:44px;
  font-family:var(--font);font-weight:700;font-size:.95rem;
  padding:.5rem 1.1rem;border-radius:999px;border:2px solid var(--fg);
  background:transparent;color:var(--fg);cursor:pointer;
}

/* ---------- accueil : hero ---------- */
.hero{padding:clamp(2.5rem,6vw,5rem) 0 clamp(2rem,4vw,3.5rem)}
.hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(1.5rem,4vw,3rem);align-items:center}
.hero h1{font-size:clamp(3rem,8.4vw,7.6rem)}
.hero-sub{margin:1.5rem 0 2rem;max-width:32rem;font-size:clamp(1.15rem,2vw,1.4rem);line-height:1.4}
.hero-actions{display:flex;flex-wrap:wrap;gap:.75rem}
.hero-logo{display:block;width:min(100%,600px);height:auto;aspect-ratio:340/264;justify-self:center;transform:rotate(-4deg);color:var(--fg)}
@media (prefers-reduced-motion:no-preference){
  .hero-logo{animation:splat 1.1s cubic-bezier(.2,1.4,.4,1) .15s both}
}
@keyframes splat{
  0%{transform:scale(.15) rotate(-16deg);opacity:0}
  35%{opacity:1}
  100%{transform:scale(1) rotate(-4deg);opacity:1}
}

/* ---------- en-têtes des pages intérieures ---------- */
.page-head{position:relative;overflow:hidden;padding:clamp(3rem,7vw,6rem) 0 clamp(2rem,4vw,3.5rem)}
.page-head .wrap{position:relative}
.page-head h1{font-size:clamp(2.9rem,9.5vw,8.4rem);overflow-wrap:break-word}
.lead{max-width:42rem;margin:1.5rem 0 0;font-size:clamp(1.15rem,2vw,1.45rem);line-height:1.45;color:var(--muted)}
.head-blob{
  position:absolute;right:-6%;top:50%;width:min(52vw,560px);height:auto;aspect-ratio:337/262;
  transform:translateY(-50%) rotate(14deg);color:var(--fg);opacity:.06;pointer-events:none;
}
.tags{display:flex;flex-wrap:wrap;gap:.6rem;margin:1.75rem 0 0;padding:0;list-style:none}

/* ---------- sections ---------- */
.section{position:relative;padding-block:clamp(4rem,9vw,8rem)}
.section-tight{position:relative;padding-block:0 clamp(3rem,7vw,6rem)}
/* section qui s'arrête pile contre ce qui suit, sans espace en dessous
   (utilisé pour la bande de logos, qui s'enchaîne directement avec le pied
   de page sombre juste après, comme un seul bloc propre) */
.section-flush{padding-bottom:0}
.h2{font-size:clamp(2.2rem,5.6vw,4.8rem);margin-bottom:1rem}
.intro{max-width:36rem;margin:0 0 clamp(1.75rem,4vw,3rem);font-size:1.2rem;color:var(--muted)}
.wave{position:absolute;left:0;width:100%;height:clamp(28px,5vw,64px);fill:var(--bg);display:block}
.wave-t{top:0;transform:translateY(calc(-100% + 1px))}
.wave-b{bottom:0;transform:translateY(calc(100% - 1px)) scaleY(-1)}

/* ---------- photos (avec repli tant que le fichier n'existe pas) ---------- */
.photo{
  --a:#7a7a76;--b:#444442;
  position:relative;overflow:hidden;
  background:
    radial-gradient(70% 80% at 28% 30%,var(--a) 0%,transparent 65%),
    radial-gradient(90% 90% at 85% 90%,var(--b) 0%,transparent 70%),
    #1c1c1b;
}
.photo::before{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(120% 120% at 50% 40%,transparent 50%,rgba(0,0,0,.55) 100%);
}
.photo::after{
  content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode:overlay;opacity:.5;
}
.ph-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;display:block}
.vf{position:absolute;z-index:3;width:18px;height:18px;border:2px solid rgba(247,246,242,.55);pointer-events:none}
.vf-tl{top:16px;left:16px;border-right:0;border-bottom:0}
.vf-tr{top:16px;right:16px;border-left:0;border-bottom:0}
.vf-bl{bottom:16px;left:16px;border-right:0;border-top:0}
.vf-br{bottom:16px;right:16px;border-left:0;border-top:0}
.ph-label{
  position:absolute;z-index:3;top:50%;left:50%;transform:translate(-50%,-50%);
  font-size:.82rem;font-weight:500;color:rgba(247,246,242,.55);white-space:nowrap;pointer-events:none;
}
/* quand la vraie image est chargée : plus d'effets, l'image reste intacte */
.photo.has-img{background:#111}
.photo.has-img::before,.photo.has-img::after,
.photo.has-img .vf,.photo.has-img .ph-label{display:none}

/* ---------- carte épisode ---------- */
.last{
  display:grid;grid-template-columns:7fr 5fr;gap:clamp(1.25rem,4vw,3.5rem);
  padding:14px;border-radius:44px 44px 44px 10px;
}
.last-media{display:block;aspect-ratio:16/9;border-radius:32px 32px 32px 8px;color:#0C0C0C;text-decoration:none}
.last-media .ph-label{top:auto;bottom:1.1rem;left:1.1rem;transform:none}
.bigplay{
  position:absolute;z-index:4;left:50%;top:50%;transform:translate(-50%,-50%);
  width:88px;height:88px;border-radius:50%;background:#F7F6F2;color:#0C0C0C;
  display:grid;place-items:center;transition:transform .2s ease;
}
.bigplay svg{width:32px;height:32px;margin-left:5px}
a.last-media:hover .bigplay{transform:translate(-50%,-50%) scale(1.08)}
.last-body{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;padding:clamp(.5rem,2vw,2rem) clamp(1rem,3vw,2.5rem) clamp(.5rem,2vw,2rem) 0}
.last-kicker{margin:0 0 .9rem;font-weight:700;color:var(--muted)}
.last-name{font-size:clamp(2.4rem,5vw,4.4rem);margin-top:1rem}
.last-title{margin:1rem 0 1.75rem;font-size:1.2rem;line-height:1.4;color:var(--muted);max-width:28rem}
.plats{display:flex;flex-wrap:wrap;align-items:center;gap:clamp(1.5rem,3vw,2.25rem);margin:0;padding:0}
.plat{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:44px;padding:.25rem 0;
  color:#F7F6F2;text-decoration:none;
  transition:transform .15s ease,opacity .15s ease;
}
.plat:hover{transform:translateY(-2px);opacity:.75}
.plat:focus-visible{outline:3px solid #F7F6F2;outline-offset:6px;border-radius:4px}
.plat-img{display:block;height:clamp(40px,5.5vw,54px);width:auto;max-width:200px;filter:brightness(0) invert(1)}
.plat-name{display:none;font-weight:700;font-size:1.1rem}
.plat.is-missing .plat-img{display:none}
.plat.is-missing .plat-name{display:inline}
.ep-list{display:grid;gap:clamp(1.5rem,3vw,2.5rem)}

/* ---------- les pièces de la maison ---------- */
.house-head{max-width:52rem;margin:0 0 clamp(2rem,5vw,4rem)}
.rooms{list-style:none;margin:0;padding:0;border-bottom:2px solid var(--fg)}
.rooms li{border-top:2px solid var(--fg)}
.room{
  display:grid;grid-template-columns:5fr 6fr 56px;
  grid-template-areas:"name desc go";
  gap:1rem clamp(1.5rem,4vw,4rem);align-items:center;
  margin-inline:-.75rem;padding:clamp(1.5rem,3.5vw,2.75rem) .75rem;
  text-decoration:none;color:var(--fg);border-radius:22px;
  transition:background .2s ease,color .2s ease;
}
.room-name{grid-area:name;font-size:clamp(2.2rem,5vw,4.4rem)}
.room-desc{grid-area:desc;margin:0;max-width:34rem;font-size:1.12rem;color:var(--muted);transition:color .2s ease}
.room-go{
  grid-area:go;justify-self:end;display:grid;place-items:center;
  width:56px;height:56px;border-radius:50%;border:2px solid currentColor;
  transition:transform .2s ease;
}
.room-go svg{width:22px;height:22px}
.room:hover{background:var(--fg);color:var(--bg)}
.room:hover .room-desc{color:var(--bg)}
.room:hover .room-go{transform:translateX(4px)}
.room:focus-visible{outline-offset:-3px}

/* ---------- à propos ---------- */
.about{display:grid;grid-template-columns:5fr 6fr;gap:clamp(2rem,6vw,5.5rem);align-items:center}
.portrait-photo{aspect-ratio:4/5;clip-path:url(#waveclip);width:100%}
.portrait-photo .ph-img{object-position:50% 25%}
.about-name{font-size:clamp(3rem,7vw,6rem)}
.about-role{margin:1rem 0 1.5rem;font-weight:700;font-size:1.15rem}
.about-body{max-width:36rem;font-size:1.2rem;line-height:1.65}
.about-body p{margin:0 0 1.1rem}
.about-body p:last-child{margin-bottom:0}
.about .btn{margin-top:1.75rem}

/* ---------- équipe / agence (page à propos) ---------- */
.team-card{
  position:relative;
  display:flex;align-items:center;gap:clamp(1.5rem,4vw,3rem);
  max-width:44rem;margin-top:clamp(1.5rem,3.5vw,2.5rem);
  padding:clamp(1.5rem,4vw,2.5rem);padding-right:clamp(3.5rem,7vw,5rem);
  border:2px solid var(--fg);border-radius:32px 32px 32px 8px;
  text-decoration:none;color:inherit;
  transition:transform .15s ease,background .15s ease,color .15s ease;
}
.team-card:hover{transform:translateY(-3px);background:var(--fg);color:var(--bg)}
.team-card:hover .team-role,.team-card:hover p:last-child{color:var(--bg);opacity:.75}
.team-card:hover .team-logo{filter:var(--icon-filter-invert)}
.team-logo{flex:0 0 auto;height:56px;width:auto;max-width:180px;object-fit:contain;filter:var(--icon-filter);transition:filter .15s ease}
.team-name{font-size:clamp(1.6rem,2.6vw,2.1rem)}
.team-role{margin:.35rem 0 .75rem;font-weight:700;color:var(--muted);transition:color .15s ease}
.team-card p:last-child{margin:0;color:var(--muted);transition:color .15s ease}
.team-go{
  position:absolute;top:clamp(1.5rem,4vw,2.5rem);right:clamp(1.5rem,4vw,2.5rem);
  display:grid;place-items:center;width:44px;height:44px;
  border-radius:50%;border:2px solid currentColor;
}
.team-go svg{width:18px;height:18px}
@media (max-width:640px){
  .team-card{flex-direction:column;align-items:flex-start;text-align:left;padding-right:clamp(1.5rem,4vw,2.5rem)}
  .team-go{position:static;margin-top:.5rem}
}

/* ---------- bannière « Ils nous ont fait confiance » ---------- */
.band-wrap{
  position:relative;
  /* pleine largeur de l'écran, même si la section qui la contient est centrée */
  width:100vw;margin-left:calc(50% - 50vw);
  /* marge au-dessus de la vague : elle remonte jusqu'à clamp(28px,5vw,64px)
     au-dessus de ce bloc — on laisse un peu plus de respiration que ça pour
     qu'elle ne touche jamais le titre juste au-dessus */
  margin-top:clamp(3.5rem,7.5vw,6rem);
  /* petit espace clair après la bande : la bande n'a plus SA PROPRE vague en
     bas (on a essayé, mais collée à la vague du haut du pied de page juste
     en dessous, les deux se chevauchaient et donnaient l'effet de « double
     vague » façon œil/lentille). Une seule vague suffit pour la transition :
     celle du pied de page, juste en dessous — comme partout ailleurs sur le
     site. On garde donc juste un espace clair simple ici. */
  margin-bottom:clamp(2rem,4.5vw,3.5rem);
}
.band-wrap .wave{fill:var(--band-bg)}
.band{
  background:var(--band-bg);color:var(--band-fg);
  overflow:hidden;
  container-type:inline-size;
  padding:clamp(1rem,2.2vw,1.6rem) 0;
}
.track{display:flex;width:max-content;animation:marquee 20s linear infinite}
.band:hover .track,.band:focus-within .track{animation-play-state:paused}
.set{display:flex;flex:none;margin:0;padding:0;list-style:none}
.slot{
  flex:0 0 180px;flex:0 0 18cqw;
  display:flex;align-items:center;justify-content:center;
  height:clamp(80px,8.5vw,116px);padding:clamp(.5rem,1.2cqw,.9rem);
}
/* boîte fixe + object-fit:contain : chaque logo est cadré proprement dans son
   emplacement, à la même échelle, quel que soit son format d'origine — jamais
   étiré, jamais tronqué, jamais superposé au logo voisin. Peu de marge autour :
   le logo occupe presque toute la hauteur disponible. */
.slot img{display:block;width:100%;height:100%;object-fit:contain;filter:var(--logo-filter)}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){
  .track{animation:none;width:100%}
  .set{flex-wrap:wrap;justify-content:center;width:100%}
  .set-2{display:none}
}

/* ---------- projets (micro-trottoirs, immersions, reportages) ---------- */
.statement{font-size:clamp(2rem,5.2vw,4.4rem);line-height:1.02;max-width:60rem}
.deco{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.deco-blob{position:absolute;right:-12%;top:50%;width:min(90vw,980px);height:auto;aspect-ratio:337/262;transform:translateY(-50%) rotate(14deg);color:var(--fg);opacity:.08}
.origin .wrap{position:relative}
.proj-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(2rem,4vw,3rem) clamp(1.25rem,2.5vw,2rem)}
.proj-media{display:block;aspect-ratio:16/10;border-radius:36px 36px 36px 8px}
.proj-meta{margin:1.1rem 0 .6rem}
.proj-title{font-size:clamp(1.7rem,2.6vw,2.3rem)}
.proj-desc{margin:.6rem 0 0;color:var(--muted)}
.proj .btn{margin-top:1.1rem}

/* ---------- « Les réalisations » : catégories de vidéos TikTok ---------- */
.cat-block{margin-top:clamp(3rem,6vw,4.5rem)}
.cat-block:first-child{margin-top:0}
.cat-title{font-size:clamp(1.8rem,3.2vw,2.5rem)}
.cat-desc{margin:.5rem 0 0;color:var(--muted);max-width:36rem}
.vid-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:clamp(.9rem,1.8vw,1.4rem);margin-top:clamp(1.5rem,3vw,2.25rem)}
.vid-media{display:block;position:relative;aspect-ratio:9/16;border-radius:24px 24px 24px 8px;color:#0C0C0C;text-decoration:none}
.vid-media .bigplay{width:52px;height:52px}
.vid-media .bigplay svg{width:20px;height:20px}
.vid-media:hover .bigplay{transform:translate(-50%,-50%) scale(1.08)}
@media (max-width:860px){
  .vid-grid{grid-template-columns:repeat(4,1fr)}
}
@media (max-width:640px){
  .vid-grid{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:420px){
  .vid-grid{grid-template-columns:repeat(2,1fr)}
}
.note{
  max-width:44rem;padding:clamp(1.5rem,4vw,2.5rem);
  border:2px solid var(--fg);border-radius:32px 32px 32px 8px;
  font-size:1.25rem;line-height:1.4;
}

/* ---------- cadre de contact (À propos) ---------- */
.contact-block{
  max-width:34rem;margin-top:1.75rem;
  padding:clamp(1.75rem,4vw,2.5rem);
  background:#0C0C0C;border-radius:32px 32px 32px 8px;
}
.contact-kicker{
  color:#F7F6F2;font-weight:800;text-transform:uppercase;letter-spacing:-.01em;
  font-size:clamp(1.4rem,2.6vw,1.9rem);line-height:1.05;margin:0 0 .85rem;
  font-variation-settings:"wdth" 75;
}
.contact-block p:not(.contact-kicker){margin:0 0 1.5rem;font-size:1.08rem;line-height:1.5;color:#A9A7A1}
.contact-block .btn{background:#F7F6F2;color:#0C0C0C;border-color:#F7F6F2}

/* ---------- bande "en cours de tournage" (emplacements vides) ----------
   Fluide, sans cadre : deux banderoles rayées noir/blanc qui défilent en
   continu, chacune dans un sens, façon adhésif de tournage. */
.tape-block{position:relative;min-height:230px;margin:.5rem -1.5rem}
.tape{
  position:absolute;left:-8%;width:116%;overflow:hidden;
  background:repeating-linear-gradient(45deg,#0C0C0C 0 26px,#F7F6F2 26px 52px);
  border-top:3px solid #0C0C0C;border-bottom:3px solid #0C0C0C;
  padding:.5rem 0;
}
.tape-track{background:#0C0C0C;overflow:hidden;padding:.55rem 0}
.tape-inner{display:inline-flex;white-space:nowrap;width:max-content;animation:tape-marquee 16s linear infinite}
.tape.t2 .tape-inner{animation-direction:reverse;animation-duration:20s}
.tape-set{display:inline-flex}
.tape-inner span{
  padding:0 1.1rem;display:inline-block;color:#F7F6F2;
  font-weight:800;text-transform:uppercase;letter-spacing:.02em;
  font-size:1rem;font-variation-settings:"wdth" 75;
}
.tape-inner span::after{content:"✱";margin-left:1.1rem;opacity:.6}
.tape.t1{top:26px;transform:rotate(-4deg)}
.tape.t2{top:120px;transform:rotate(3deg)}
@keyframes tape-marquee{
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}
}
@media (prefers-reduced-motion:reduce){
  .tape-inner{animation:none}
}

/* ---------- pages légales ---------- */
.legal-doc{max-width:46rem;padding-bottom:clamp(3rem,7vw,6rem)}
.legal-doc h2{margin:2.5rem 0 .75rem;font-size:1.6rem;line-height:1.15;font-weight:800}
.legal-doc p,.legal-doc li{font-size:1.08rem;line-height:1.65}
.legal-doc ul{padding-left:1.25rem}
.legal-doc a{text-decoration-thickness:2px;text-underline-offset:4px}
.legal-date{color:var(--muted);margin-top:0}

/* ---------- pied de page ---------- */
.foot{position:relative;margin-top:clamp(3rem,7vw,5rem);padding:clamp(4rem,9vw,7rem) 0 calc(2.5rem + env(safe-area-inset-bottom,0px))}
.foot-top{display:grid;grid-template-columns:7fr 5fr;gap:2.5rem clamp(2rem,5vw,4.5rem);align-items:start}
.foot-tag{font-size:clamp(1.9rem,4.4vw,3.6rem);line-height:1}
.foot-cols{display:grid;grid-template-columns:1fr 1fr;gap:2rem}
.foot-h{margin:0 0 .5rem;font-size:1.05rem;font-weight:800;text-transform:uppercase;font-variation-settings:"wdth" 75;letter-spacing:.01em}
.foot ul{list-style:none;margin:0;padding:0}
.foot li a,.linkbtn{
  display:inline-block;padding:.55rem 0;font-weight:600;text-decoration:none;color:inherit;
  overflow-wrap:anywhere;
}
.foot li a:hover,.linkbtn:hover{text-decoration:underline;text-decoration-thickness:3px;text-underline-offset:6px}
.foot-bottom{
  display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.75rem 2rem;
  margin-top:clamp(2.5rem,6vw,4.5rem);padding-top:1.25rem;border-top:1px solid var(--line);
  font-size:.95rem;color:var(--muted);
}
.foot-bottom p{margin:0}
.legal{display:flex;flex-wrap:wrap;gap:0 1.5rem}
.foot-bottom .legal a,.foot-bottom .linkbtn{font-weight:500;font-size:.95rem;color:var(--fg)}
.linkbtn{background:none;border:0;font-family:var(--font);cursor:pointer}

/* ---------- fenêtre « Gérer les cookies » ---------- */
.dlg{
  width:min(560px,calc(100vw - 2rem));padding:clamp(1.5rem,4vw,2.25rem);
  background:var(--bg);color:var(--fg);
  border:2px solid var(--fg);border-radius:28px 28px 28px 6px;
}
.dlg::backdrop{background:rgba(0,0,0,.6)}
.dlg h2{margin:0 0 .9rem;font-size:1.8rem;line-height:1}
.dlg p{margin:0 0 1rem;line-height:1.55}
.dlg .btn{margin-top:.5rem}

/* ---------- tablette ---------- */
@media (max-width:1000px){
  .nav{
    display:none;position:absolute;left:0;right:0;top:100%;
    flex-direction:column;align-items:stretch;gap:0;background:var(--bg);
    border-bottom:2px solid var(--fg);padding:.5rem 1.25rem 1rem;
  }
  .bar.open .nav{display:flex}
  .nav a{padding:.9rem 0;font-size:1.2rem;border-bottom:1px solid var(--line)}
  .nav a:hover,.nav a[aria-current="page"]{border-bottom-color:var(--fg)}
  .menu-btn{display:inline-flex}
  .slot{flex:0 0 200px;flex:0 0 33.3333cqw}
  .proj-grid{grid-template-columns:repeat(2,1fr)}
}

/* ---------- mobile ---------- */
@media (max-width:860px){
  .hero-grid,.last,.about,.foot-top{grid-template-columns:1fr}
  .hero-logo{width:min(82%,420px);order:-1}
  .last-body{padding:.5rem 1rem 1.25rem}
  .last-media{border-radius:26px 26px 26px 8px}
  .bigplay{width:72px;height:72px}
  .bigplay svg{width:26px;height:26px}
  .room{grid-template-columns:1fr 56px;grid-template-areas:"name go" "desc desc";align-items:center}
  .about .portrait-wrap{order:-1}
  .portrait-photo{max-width:440px;margin-inline:auto}
  .head-blob{display:none}
}
@media (max-width:640px){
  .proj-grid{grid-template-columns:1fr}
  .foot-cols{grid-template-columns:1fr 1fr;gap:1.25rem}
  .foot-bottom{flex-direction:column;align-items:flex-start}
}
@media (max-width:420px){
  /* Colonnes du footer empilées : l'adresse e-mail garde toute la largeur
     et ne se coupe plus au milieu du mot (media@chezspamoso.com). */
  .foot-cols{grid-template-columns:1fr;gap:1.75rem}
}