/* ============================================================
   dod production — book vidéaste
   Palette sombre, accent unique, typographie serrée.
   ============================================================ */

:root {
  --bg:          #0a0a0a;
  --bg-soft:     #0e0e0e;
  --surface:     #141414;
  --surface-2:   #1c1c1c;
  --line:        rgba(255,255,255,.08);
  --line-strong: rgba(255,255,255,.16);
  --text:        #fbfbfb;
  --muted:       #8c8c8c;
  --muted-2:     #868686;
  --accent:      #b5561f;
  --accent-dim:  rgba(181,86,31,.18);
  --accent-hi:   #a34a15;   /* survol du bouton, contraste AA avec du blanc */
  --accent-text: #e07a34;   /* accent lisible sur fond sombre, ratio > 4.5:1 */

  --radius:      14px;
  --radius-lg:   20px;
  --maxw:        1560px;
  --header-h:    88px;

  --ease:        cubic-bezier(.22,.61,.36,1);
  --font: -apple-system, BlinkMacSystemFont, "Inter", system-ui, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-display: "Unbounded", "Inter", -apple-system, sans-serif;
  --font-accent:  "Newsreader", Georgia, "Times New Roman", serif;
}

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  /* Sans ça, un élément large en flux caché (marquee défilant, grille figée)
     force les navigateurs mobiles à dézoomer toute la page pour le faire
     tenir, même quand il est visuellement masqué par overflow:hidden sur son
     conteneur direct. Bloque ce dézoom au niveau racine. */
  overflow-x: hidden;
  max-width: 100vw;
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background:
    linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.4) 15%, rgba(0,0,0,.68) 35%, rgba(0,0,0,.86) 55%, rgba(0,0,0,.95) 75%, #000 100%),
    linear-gradient(100deg, #000 0%, #141414 40%, #1a1a1a 100%);
  color: var(--text);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
  position: relative;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .12;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch' result='t'/><feColorMatrix in='t' type='matrix' values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 9 -4'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}
body > main { display: block; min-height: 55vh; }

img, svg, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }

::selection { background: var(--accent); color: #fff; }

/* ---------- Layout ---------- */
.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 clamp(16px, 1.4vw, 24px); }
.section { padding: clamp(36px, 4.5vw, 56px) 0; }
.section--tight { padding: clamp(28px, 3.5vw, 44px) 0; }

.eyebrow {
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--accent-text);
  font-weight: 600;
  margin: 0 0 14px;
}

h1, h2, h3 { margin: 0; font-family: var(--font-display); font-weight: 700; letter-spacing: -.035em; line-height: 1.02; }
h1 { font-size: clamp(38px, 8vw, 92px); }
h2 { font-size: clamp(28px, 4.6vw, 52px); }
h3 { font-size: clamp(18px, 2.4vw, 24px); letter-spacing: -.02em; }

.lead { color: var(--muted); font-size: clamp(15px, 1.6vw, 18px); max-width: 62ch; }

.section-head { margin-bottom: 30px; }
.accent-word { position: relative; display: inline-block; isolation: isolate; white-space: nowrap; }
.accent-word::before {
  content: ""; position: absolute; z-index: 0;
  left: 0; top: 8%; width: 0; height: 84%;
  background: var(--accent); opacity: 0; filter: blur(0);
}
/* Le texte passe dans son propre calque, au-dessus du rectangle : plus
   fiable qu'un z-index négatif sur le rectangle, qui pouvait selon les mots
   se retrouver peint par-dessus au lieu de derrière. */
.accent-word__text { position: relative; z-index: 1; }
.section-head.accent-in .accent-word::before {
  animation: accentWord .85s cubic-bezier(.22,.61,.36,1) .15s forwards;
}
@keyframes accentWord {
  0%   { width: 0;   opacity: 0; filter: blur(7px); }
  100% { width: 75%; opacity: 1; filter: blur(0); }
}
@media (prefers-reduced-motion: reduce) {
  .accent-word::before { transition: none; animation: none !important; width: 75%; opacity: 1; filter: blur(0); }
}
.section-head p { margin: 14px 0 0; }
#photos-section .section-head h2 { margin-top: 45px; }
#portfolio .section-head h2 { margin-top: 25px; }
#photos-section .tabs { margin-top: 0; }

/* ---------- Boutons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 26px;
  border-radius: 999px;
  font-weight: 600; font-size: 14px; letter-spacing: .01em;
  border: 1px solid var(--line-strong);
  transition: background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease), transform .25s var(--ease);
}
.btn:hover { transform: translateY(-2px); }
.btn--primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn--primary:hover { background: var(--accent-hi); border-color: var(--accent-hi); }
.btn--ghost:hover { background: rgba(255,255,255,.06); border-color: var(--line-strong); }
.btn svg { width: 14px; height: 14px; }

/* ---------- Loader / splash ---------- */
#splash {
  position: fixed; inset: 0; z-index: 200;
  display: grid; place-items: center;
  background: var(--bg);
  transition: opacity .5s var(--ease), visibility .5s;
}
#splash img { width: 120px; opacity: .92; animation: splashPulse 1.6s ease-in-out infinite; }
#splash.is-done { opacity: 0; visibility: hidden; }
@keyframes splashPulse { 0%,100% { opacity: .35; transform: scale(.98); } 50% { opacity: 1; transform: scale(1); } }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  height: var(--header-h);
  display: flex; align-items: center;
  border-bottom: 1px solid transparent;
  transition: border-color .3s var(--ease);
}
.site-header::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background: rgba(10,10,11,.55);
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  clip-path: inset(0 0 100% 0);
  transition: clip-path .4s var(--ease);
}
.site-header.is-scrolled { border-bottom-color: var(--line); }
.site-header.is-scrolled::before { clip-path: inset(0 0 0% 0); }
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand { display: flex; align-items: center; gap: 12px; }
.brand img { height: 35px; width: auto; }
.brand span { font-family: var(--font-display); font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }

/* Liquid glass : chaque lien de nav est une bulle de verre dépoli. */
.nav { display: flex; align-items: center; gap: 6px; }
.nav a {
  font-size: 14.5px; font-weight: 400; letter-spacing: -.005em;
  color: rgba(251,251,251,.82);
  padding: 9px 18px;
  border-radius: 999px;
  background: rgba(255,255,255,.045);
  border: 1px solid rgba(255,255,255,.09);
  backdrop-filter: blur(14px) saturate(180%);
  -webkit-backdrop-filter: blur(14px) saturate(180%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14), inset 0 -6px 10px -8px rgba(0,0,0,.5);
  transition: background .3s var(--ease), border-color .3s var(--ease), color .2s var(--ease), transform .25s var(--ease), box-shadow .3s var(--ease);
}
.nav a:hover {
  color: var(--text);
  background: rgba(255,255,255,.09);
  border-color: rgba(255,255,255,.2);
  transform: translateY(-1px);
}
.nav a.is-active {
  color: #fff; font-weight: 500;
  background: rgba(181,86,31,.24);
  border-color: rgba(224,122,52,.5);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 6px 18px -8px rgba(181,86,31,.65);
}

.burger { display: none; width: 44px; height: 44px; align-items: center; justify-content: center; }
.burger i { display: block; width: 20px; height: 1.5px; background: var(--text); position: relative; transition: background .2s; }
.burger i::before, .burger i::after { content: ""; position: absolute; left: 0; width: 20px; height: 1.5px; background: var(--text); transition: transform .3s var(--ease); }
.burger i::before { top: -6px; } .burger i::after { top: 6px; }
.is-nav-open .burger i { background: transparent; }
.is-nav-open .burger i::before { transform: translateY(6px) rotate(45deg); }
.is-nav-open .burger i::after { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 780px) {
  .burger { display: flex; }
  .nav {
    position: fixed; inset: var(--header-h) 0 auto 0;
    flex-direction: column; align-items: flex-start; gap: 0;
    background: rgba(10,10,11,.98);
    backdrop-filter: blur(18px);
    padding: 8px 24px 26px;
    border-bottom: 1px solid var(--line);
    transform: translateY(-12px); opacity: 0; pointer-events: none;
    transition: opacity .25s var(--ease), transform .25s var(--ease);
  }
  .is-nav-open .nav { opacity: 1; transform: none; pointer-events: auto; }
  .nav a { width: 100%; padding: 16px 0; font-size: 17px; border-bottom: 1px solid var(--line); }
  .nav a:last-child { border-bottom: none; }
}

/* ---------- Hero ---------- */
/* ---------- Bandeau catégories ---------- */
.hero-fold { min-height: calc(100svh - var(--header-h)); display: flex; flex-direction: column; }
.hero-fold .hero { flex: 1 1 auto; }
.marquee { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); overflow: hidden; padding: 14px 0; }
.marquee__track { display: flex; gap: 56px; white-space: nowrap; animation: slide 32s linear infinite; width: max-content; }
.marquee__cat {
  font-size: 12px; letter-spacing: .3em; text-transform: uppercase;
  color: var(--muted-2); background: none; border: none; padding: 6px 0;
  cursor: pointer; white-space: nowrap;
  transition: color .25s var(--ease);
}
.marquee__cat:hover { color: var(--text); }
.marquee span { font-size: 12px; letter-spacing: .3em; text-transform: uppercase; color: var(--muted-2); }
.marquee span::before, .marquee__cat::before { content: "◆"; color: var(--accent); margin-right: 56px; font-size: 8px; vertical-align: middle; }
.marquee:hover .marquee__track { animation-play-state: paused; }
@keyframes slide { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .marquee__track { animation: none; } }

/* ---------- Grille projets (masonry par colonnes) ---------- */
.filters { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 34px; }
.filter {
  min-height: 44px; padding: 11px 18px; border-radius: 999px;
  border: 1px solid var(--line);
  font-size: 13px; color: var(--muted); font-weight: 500;
  transition: all .22s var(--ease);
}
.filter:hover { color: var(--text); border-color: var(--line-strong); }
.filter.is-active { background: var(--text); border-color: var(--text); color: #0a0a0b; }

/* Grille masonry : le span de chaque carte est calculé dans js/masonry.js */
.masonry {
  display: grid;
  /* Grille fine (cellules de 100px) : chaque carte occupe un multiple de
     cellules (par défaut 3, soit ~300-400px comme avant) — ça permet de
     découper une ligne en tiers, quarts, etc., pas juste en moitiés. */
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  grid-auto-rows: 8px;
  column-gap: 22px;
  align-items: start;
}
.masonry[hidden] { display: none; }
@media (max-width: 680px) { .masonry { grid-template-columns: 1fr; } }

/* Bloc orange décoratif : comble un trou de la grille, aspect carré par
   défaut, nom du genre en blanc en bas à droite. */
.card--filler { margin: 0; }
.card__media.card__media--filler {
  position: relative; border-radius: var(--radius); overflow: hidden;
  aspect-ratio: 1 / 1;
  background: linear-gradient(135deg, var(--accent), #a85c1f);
}
/* Le min-height ne sert que de repère avant tout réglage à la main (pas de
   mediaWidth/mediaHeight enregistrés) : une fois une taille choisie, le
   ratio choisi doit primer, sinon le bloc dépasse la hauteur voulue. */
.card__media.card__media--filler:not([style*="aspect-ratio"]) { min-height: 220px; }
.filler__label {
  position: absolute; right: 18px; bottom: 16px; color: #fff;
  font-family: var(--font-display); font-weight: 700; font-size: 14px;
  text-transform: uppercase; letter-spacing: .04em;
}
.masonry > * { align-self: start; margin: 0; }

/* Repli si le JS ne tourne pas : simple grille régulière */
.no-js .masonry { grid-auto-rows: auto; row-gap: 22px; }

/* ---------- Bento de "Travaux récents" : cases fixes à remplir à la main ---------- */
.bento { display: grid; grid-template-columns: 1.7fr 1fr; grid-template-rows: auto auto; gap: 22px; margin-bottom: 22px; }
.bento[hidden] { display: none; }
.bento__slot { position: relative; border-radius: var(--radius); overflow: hidden; }
.bento__slot--1 { grid-column: 1; grid-row: 1; aspect-ratio: 2.3 / 1; }
.bento__slot--2 { grid-column: 1; grid-row: 2; aspect-ratio: 2.3 / 1; }
.bento__slot--3 { grid-column: 2; grid-row: 1 / span 2; }
@media (max-width: 780px) {
  .bento { grid-template-columns: 1fr; grid-template-rows: none; }
  .bento__slot--1, .bento__slot--2, .bento__slot--3 { grid-column: 1; aspect-ratio: 4 / 3; }
  .bento__slot--1 { grid-row: 1; } .bento__slot--2 { grid-row: 2; } .bento__slot--3 { grid-row: 3; }
}
.bento__slot .card { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; }
.bento__slot .card__media { height: 100%; aspect-ratio: auto !important; }
.bento__slot .card__body { display: none; }
.bento__empty {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  border-radius: var(--radius); border: 2px dashed rgba(255,255,255,.16);
  background: rgba(255,255,255,.02); color: var(--muted); font-size: 13.5px; font-weight: 500; cursor: pointer;
  transition: border-color .2s var(--ease), background .2s var(--ease), color .2s var(--ease);
}
.bento__empty:hover { border-color: rgba(224,122,52,.6); background: rgba(224,122,52,.06); color: var(--text); }
.bento__empty .addtile__plus {
  width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center;
  border: 2px dashed rgba(255,255,255,.2);
  font-size: 22px; line-height: 1;
  transition: border-color .2s var(--ease), transform .2s var(--ease);
}
.bento__empty:hover .addtile__plus { border-color: var(--accent-text); transform: rotate(90deg); }
body:not(.is-admin-preview) .bento__empty { display: none; }

/* Bouton "changer la vidéo" sur une case déjà remplie */
.bento__swap {
  display: none; position: absolute; z-index: 8; top: 10px; right: 10px;
  width: 34px; height: 34px; border-radius: 50%;
  align-items: center; justify-content: center;
  background: rgba(10,10,10,.65); border: 1px solid rgba(255,255,255,.28);
  cursor: pointer; opacity: 0; transform: translateY(-4px);
  transition: opacity .2s var(--ease), transform .2s var(--ease), background .2s var(--ease), border-color .2s var(--ease);
}
.bento__swap svg { width: 17px; height: 17px; fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.bento__swap:hover { background: var(--accent); border-color: var(--accent); }
body.is-admin-preview .bento__swap { display: flex; }
body.is-admin-preview .bento__slot:hover .bento__swap { opacity: 1; transform: translateY(0); }

/* Barre d'outils d'édition : superposée en haut à gauche de la vignette
   (jamais dans le flux normal, donc la carte garde exactement la même
   taille qu'en mode public), là où il n'y a ni bouton lecture (au centre)
   ni étiquette Drone/IA (en haut à droite). */
.card__toolbar {
  display: none; position: absolute; z-index: 8; top: 10px; left: 10px;
  flex-direction: column; align-items: center; gap: 6px;
}
body.is-admin-preview .card__toolbar { display: flex; }
.card__toolbar-spacer { display: none; }
.card__grip, .card__duplicate, .card__delete, .card__reposition, .card__resize-reset {
  width: 30px; height: 30px; border-radius: 50%; flex: none;
  display: flex; align-items: center; justify-content: center;
  background: rgba(10,10,10,.65); border: 1px solid rgba(255,255,255,.28);
  cursor: pointer;
  transition: background .2s var(--ease), border-color .2s var(--ease);
}
.card__grip svg, .card__reposition svg, .card__resize-reset svg { width: 15px; height: 15px; fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.card__duplicate svg, .card__delete svg { width: 15px; height: 15px; fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.card__grip:hover, .card__duplicate:hover, .card__reposition:hover, .card__resize-reset:hover { background: var(--accent); border-color: var(--accent); }
.card--filler .card__reposition { display: none; }
.card__reposition-done {
  display: none; height: 30px; padding: 0 14px; border-radius: 999px; flex: none;
  align-items: center; justify-content: center;
  background: var(--accent); border: 1px solid var(--accent); color: #fff;
  font-size: 12px; font-weight: 700; letter-spacing: .02em;
  cursor: pointer;
}
/* Le bouton "recadrer" arme un glissé direct sur la miniature, pour repositionner
   l'image/vidéo dans son cadre découpé (object-fit:cover) sans changer sa taille. */
.card.is-repositioning .card__media { cursor: move; outline: 2px dashed var(--accent); outline-offset: -2px; }
/* Recadrage actif : plus rien d'autre ne doit gêner, seul "Valider" reste
   (c'est la seule façon d'en sortir, plus de clic ailleurs). */
.card.is-repositioning .card__toolbar > *:not(.card__reposition-done),
.card.is-repositioning .card__edit-hint,
.card.is-repositioning .resize-handle,
.card.is-repositioning .card__badges { display: none !important; }
.card.is-repositioning .card__reposition-done { display: flex; }
.card__grip:hover svg { fill: #fff; }
.card__duplicate:hover svg { stroke: #fff; }
.card__delete:hover { background: #c0392b; border-color: #c0392b; }
.card__delete:hover svg { stroke: #fff; }
.card__grip { cursor: grab; }
.card__grip:active { cursor: grabbing; }

/* Étiquettes Drone / IA en haut à droite de la miniature, visibles pour
   tout le monde (pas juste en édition). */
/* Petite étiquette "Modifier" en haut à droite de la vignette, en édition
   seulement : rappelle que cliquer dessus ouvre la fiche (aucun clic
   supplémentaire nécessaire, juste un repère visuel). */
.card__edit-hint {
  display: none; position: absolute; z-index: 7; top: 10px; right: 10px;
  padding: 5px 10px; border-radius: 999px;
  font-size: 10.5px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase;
  background: rgba(224,122,52,.92); color: #fff; pointer-events: none;
}
body.is-admin-preview .card__edit-hint { display: block; }
body.is-admin-preview .card--filler .card__edit-hint { display: none; }

.card__badges { position: absolute; z-index: 6; top: 10px; right: 10px; display: flex; flex-direction: column; gap: 6px; align-items: flex-end; }
body.is-admin-preview .card__badges { top: 42px; }
.badge {
  display: flex; align-items: center; gap: 5px;
  padding: 5px 10px; border-radius: 999px;
  font-size: 10px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: #fff; background: rgba(10,10,10,.6); border: 1px solid rgba(255,255,255,.28);
  backdrop-filter: blur(6px);
}
.badge svg { width: 12px; height: 12px; flex: none; }
.badge--ia svg { fill: var(--accent-text, #e07a34); }

.card.is-dragging { box-shadow: 0 30px 70px -20px rgba(0,0,0,.9); cursor: grabbing; }
.card__placeholder {
  border-radius: var(--radius); border: 2px dashed rgba(224,122,52,.5);
  background: rgba(224,122,52,.06);
}

/* Choix "nouveau projet / déjà en ligne" et liste des projets existants */
.ipick { display: grid; gap: 10px; margin: 4px 0 6px; }
.ipick__btn {
  display: flex; align-items: center; gap: 12px; padding: 14px 16px;
  border-radius: 12px; border: 1px solid var(--line); background: var(--surface-2);
  text-align: left; color: var(--text); cursor: pointer;
  transition: border-color .2s var(--ease), background .2s var(--ease);
}
.ipick__btn:hover { border-color: rgba(224,122,52,.55); background: rgba(224,122,52,.08); }
.ipick__btn b { display: block; font-size: 14.5px; }
.ipick__btn span { display: block; font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.ipick-filters { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 12px; }
.ipicklist { display: grid; gap: 8px; max-height: 50vh; overflow-y: auto; margin: 4px 0 6px; }
.ipicklist__row {
  display: flex; align-items: center; gap: 12px; padding: 8px; border-radius: 10px;
  border: 1px solid var(--line); background: var(--surface-2); cursor: pointer; text-align: left;
  transition: border-color .2s var(--ease), background .2s var(--ease);
}
.ipicklist__row:hover { border-color: rgba(224,122,52,.55); background: rgba(224,122,52,.08); }
.ipicklist__row img, .ipicklist__row video { width: 56px; height: 44px; object-fit: cover; border-radius: 6px; background: #000; flex: none; }
.ipicklist__row b { font-size: 13.5px; display: block; }
.ipicklist__row span { font-size: 12px; color: var(--muted); }

/* ---------- Carte projet ---------- */
.card {
  position: relative; display: block;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--line);
  cursor: pointer;
  transform-style: preserve-3d;
  transition: transform .4s var(--ease), border-color .4s var(--ease), box-shadow .4s var(--ease);
  will-change: transform;
}
.card:hover { border-color: var(--line-strong); box-shadow: 0 26px 60px -24px rgba(0,0,0,.9), 0 0 0 1px rgba(255,255,255,.03); }
.card__media { position: relative; width: 100%; background: #000; overflow: hidden; }
.card__media img, .card__media video { width: 100%; height: 100%; object-fit: cover; }
.card__media video { position: absolute; inset: 0; background: #000; opacity: 0; transition: opacity .45s var(--ease); }
.card.is-previewing .card__media video { opacity: 1; }
.card__media img { transition: transform .6s var(--ease), opacity .45s var(--ease); }
.card:hover .card__media img { transform: scale(1.04); }
.card.is-previewing .card__media img { opacity: 0; }

.card__play {
  position: absolute; left: 50%; top: 50%; z-index: 2;
  transform: translate(-50%, -50%);
  width: 58px; height: 58px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(10,10,10,.42);
  backdrop-filter: blur(7px);
  border: 1px solid rgba(255,255,255,.3);
  transition: background .3s var(--ease), transform .3s var(--ease), border-color .3s var(--ease);
}
.card:hover .card__play, .featured:hover .card__play {
  background: var(--accent); border-color: var(--accent);
  transform: translate(-50%, -50%) scale(1.08);
}
.card__play svg { width: 15px; height: 16px; fill: #fff; margin-left: 3px; transition: fill .25s; }
.featured__media .card__play { width: 76px; height: 76px; }
.featured__media .card__play svg { width: 19px; height: 21px; }

.card__body { padding: 16px 18px 18px; container-type: inline-size; }
.card__title {
  font-family: var(--font-display); font-size: 15px; font-weight: 700; letter-spacing: -.01em;
  margin: 0 0 4px; line-height: 1.3;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  line-clamp: 2; overflow: hidden; text-overflow: ellipsis;
}
.card__desc {
  margin: 0 0 12px; font-size: 13px; line-height: 1.5; color: var(--muted); min-height: 3em;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  line-clamp: 2; overflow: hidden; text-overflow: ellipsis;
}
.tags { display: flex; flex-direction: column; gap: 6px; }
.tags__row { display: flex; flex-wrap: wrap; gap: 6px; min-height: 22px; }
/* Assez large (carte à moitié écran ou plus) : catégorie et client/date
   tiennent sur la même ligne, pas besoin de les empiler. */
@container (min-width: 480px) {
  .tags { flex-direction: row; flex-wrap: wrap; }
  .tags__row { min-height: 0; }
}
.tag {
  font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
  padding: 4px 9px; border-radius: 999px;
  color: var(--muted); background: var(--surface-2); border: 1px solid var(--line);
}
.tag--cat { color: var(--accent-text); background: var(--accent-dim); border-color: transparent; }
.tag--tech { color: var(--text); background: rgba(255,255,255,.08); border-color: transparent; }

/* ---------- Projet à la une ---------- */
.featured { position: relative; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--line); background: var(--surface); cursor: pointer; }
.featured__grid { display: grid; grid-template-columns: 1.55fr 1fr; }
.featured__media { position: relative; background: #000; aspect-ratio: 16/9; overflow: hidden; }
.featured__media img, .featured__media video { width: 100%; height: 100%; object-fit: cover; }
.featured__media video { position: absolute; inset: 0; background: #000; opacity: 0; transition: opacity .5s var(--ease); }
.featured.is-previewing .featured__media video { opacity: 1; }
.featured.is-previewing .featured__media img { opacity: 0; }
.featured__media img { transition: transform .7s var(--ease), opacity .5s var(--ease); }
.featured:hover .featured__media img { transform: scale(1.03); }
.featured__body { padding: clamp(24px, 3.4vw, 44px); display: flex; flex-direction: column; justify-content: center; gap: 16px; }
.featured__body h3 { font-size: clamp(22px, 2.6vw, 34px); font-weight: 700; letter-spacing: -.035em; }
.featured__body p { margin: 0; color: var(--muted); font-size: 15px; }
@media (max-width: 900px) { .featured__grid { grid-template-columns: 1fr; } }

/* ---------- Photos : deux lignes qui défilent en continu ---------- */
.photorows { display: flex; flex-direction: column; margin-top: -20px; }
.photorows[hidden] { display: none; }

/* ---------- Photos : onglet "Tous", mosaïque en colonnes ---------- */
.photomasonry { display: flex; align-items: flex-start; gap: 14px; }
.photomasonry[hidden] { display: none; }
.photomasonry__col { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.photomasonry__item {
  display: block; margin: 0; border-radius: var(--radius); overflow: hidden;
  border: 1px solid var(--line); background: var(--surface); cursor: pointer;
  transition: transform .4s var(--ease), border-color .3s var(--ease), box-shadow .4s var(--ease);
}
.photomasonry__item:hover { border-color: var(--line-strong); box-shadow: 0 22px 50px -22px rgba(0,0,0,.9); transform: translateY(-3px); }
.photomasonry__item img { display: block; width: 100%; height: auto; opacity: 1; transition: transform .6s var(--ease), opacity .3s var(--ease); }
.photomasonry__item:hover img { transform: scale(1.03); }
.photomasonry__item--loading {
  background: linear-gradient(100deg, var(--surface) 30%, var(--surface-2) 45%, var(--surface) 60%);
  background-size: 300% 100%;
  animation: photoShimmer 1.5s ease-in-out infinite;
}
.photomasonry__item--loading[data-orientation="v"] { aspect-ratio: 4 / 5; }
.photomasonry__item--loading[data-orientation="h"] { aspect-ratio: 5 / 4; }
.photomasonry__item--loading img { opacity: 0; }
@keyframes photoShimmer { 0% { background-position: 200% 0; } 100% { background-position: -100% 0; } }
@media (prefers-reduced-motion: reduce) { .photomasonry__item--loading { animation: none; } }
@media (max-width: 620px) { .photomasonry { gap: 10px; } .photomasonry__col { gap: 10px; } }
.photorow[data-row="vertical"] { margin-bottom: var(--gap-rows, -8px); }
.photorow {
  position: relative; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}
.photorow__track { display: flex; width: max-content; animation: photoslide linear infinite; }
@keyframes photoslide { to { transform: translateX(-50%); } }
.photorow-add { display: flex; justify-content: center; margin-top: 4px; }
.photorow-add .addtile { width: 240px; min-height: 90px; margin: 0; }
.addtile--avis { min-height: 64px; flex-direction: row; margin-top: 4px; }
.addtile--avis .addtile__plus { width: 30px; height: 30px; font-size: 16px; }

.photorow__arrows {
  position: absolute; z-index: 7; inset: 0;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 10px; pointer-events: none;
}
.photorow__arrow {
  pointer-events: auto; flex: none;
  width: 38px; height: 38px; border-radius: 50%;
  display: grid; place-items: center;
  border: 1px solid rgba(255,255,255,.25); background: rgba(10,10,10,.5);
  color: #fff; font-size: 20px; line-height: 1; cursor: pointer;
  opacity: 0; transition: opacity .2s var(--ease), background .2s var(--ease), transform .15s var(--ease);
}
.photorow:hover .photorow__arrow { opacity: 1; }
.photorow__arrow:hover { background: var(--accent); border-color: var(--accent); }
.photorow__arrow:active { transform: scale(.92); }

.photo {
  display: block; flex: none; border-radius: var(--radius); overflow: hidden;
  border: 1px solid var(--line); background: var(--surface); cursor: pointer;
  transition: transform .4s var(--ease), border-color .3s var(--ease), box-shadow .4s var(--ease);
}
.photo:hover { border-color: var(--line-strong); box-shadow: 0 22px 50px -22px rgba(0,0,0,.9); }
.photorow[data-row="vertical"] .photo { width: 280px; margin-right: var(--gap-v, -8px); }
.photorow[data-row="horizontal"] .photo { width: 350px; margin-right: var(--gap-h, -8px); }
.photo img { width: 100%; height: 100%; aspect-ratio: 4 / 5; object-fit: cover; transition: transform .6s var(--ease); }
.photo--h img { aspect-ratio: 5 / 4; }
.photo:hover img { transform: scale(1.04); }
@media (prefers-reduced-motion: reduce) { .photorow__track { animation: none; } }

/* ---------- Lightbox ---------- */
.lightbox {
  position: fixed; inset: 0; z-index: 400;
  display: none; align-items: center; justify-content: center;
  background: rgba(5,5,6,.6);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  padding: 24px;
  opacity: 0; transition: opacity .3s var(--ease);
}
.lightbox.is-open { display: flex; }
.lightbox.is-visible { opacity: 1; }
.lightbox__stage { position: relative; width: 100%; max-width: 1200px; display: flex; flex-direction: column; align-items: stretch; justify-content: center; }
.lightbox__stage.is-vertical { max-width: 440px; }
.lightbox__frame {
  position: relative; width: 100%; max-height: 84vh; background: #000; border-radius: 12px; overflow: hidden;
  box-shadow: 0 40px 120px -30px rgba(0,0,0,1);
  transform: scale(.88); opacity: 0;
  transition: transform .4s cubic-bezier(.22,1,.36,1), opacity .3s var(--ease);
}
.lightbox.is-visible .lightbox__frame { transform: scale(1); opacity: 1; }
.lightbox__frame iframe, .lightbox__frame video, .lightbox__frame img { width: 100%; height: 100%; display: block; border: 0; }
.lightbox__frame video, .lightbox__frame img { max-height: 86vh; object-fit: contain; }
.lightbox__caption { margin-top: 14px; text-align: center; font-size: 13px; color: var(--muted); }
.lightbox__caption strong { color: var(--text); font-weight: 600; display: block; font-size: 15px; margin-bottom: 3px; }

/* Photo : cadre à la taille réelle de l'image (pas de bandes noires), infos
   dans une bulle "verre liquide" à droite au lieu d'une légende sous l'image. */
.lightbox__stage.is-photo {
  max-width: 1100px; width: fit-content; flex-direction: row; align-items: center; justify-content: center;
}
.lightbox__stage.is-photo .lightbox__frame {
  position: relative; width: auto; flex: none; background: transparent; box-shadow: none; border-radius: 0;
}
.lightbox__stage.is-photo .lightbox__frame img {
  width: auto; height: auto; max-width: 75vw; max-height: 67.5vh; object-fit: contain;
  border-radius: 14px; box-shadow: 0 40px 120px -30px rgba(0,0,0,1);
}
.lightbox__stage.is-photo .lightbox__caption {
  position: absolute; left: 100%; top: 0; margin: 0;
  text-align: left; flex: none; width: 260px; color: rgba(255,255,255,.85);
  background: rgba(255,255,255,.08);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 20px; padding: 22px 24px;
  box-shadow: 0 20px 60px -20px rgba(0,0,0,.8), inset 0 1px 0 rgba(255,255,255,.22);
  opacity: 0; transform: translateY(16px);
  transition: opacity .5s var(--ease) .5s, transform .5s var(--ease) .5s;
}
.lightbox.is-visible .lightbox__stage.is-photo .lightbox__caption { opacity: 1; transform: translateY(0); }
.lightbox__stage.is-photo .lightbox__caption strong { font-size: 16px; }
.lightbox__meta-line { display: block; margin-top: 4px; }
@media (prefers-reduced-motion: reduce) {
  .lightbox__stage.is-photo .lightbox__frame img { animation: none; }
  .lightbox__stage.is-photo .lightbox__caption { transition: none; opacity: 1; transform: none; }
}
@media (max-width: 780px) {
  .lightbox__stage.is-photo { flex-direction: column; max-width: 92vw; }
  .lightbox__stage.is-photo .lightbox__frame img { max-width: 90vw; max-height: 58vh; }
  .lightbox__stage.is-photo .lightbox__caption { position: static; margin: 14px 0 0; width: 100%; box-sizing: border-box; }
}
.lightbox__close {
  position: fixed; top: 20px; right: 22px; z-index: 3;
  width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(20,20,20,.75); border: 1px solid rgba(255,255,255,.22);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  box-shadow: 0 4px 16px rgba(0,0,0,.4);
  transition: background .2s, transform .2s, border-color .2s;
}
.lightbox__close:hover { background: rgba(224,122,52,.9); border-color: var(--accent-text); transform: rotate(90deg); }
.lightbox__close::before { content: "\00d7"; font-size: 26px; line-height: 1; color: #fff; }
.lightbox__nav {
  position: fixed; top: 50%; z-index: 2; transform: translateY(-50%);
  width: 48px; height: 48px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(255,255,255,.07); border: 1px solid var(--line);
  color: var(--text); font-size: 26px; line-height: 1;
  transition: background .2s, border-color .2s;
}
.lightbox__nav:hover { background: rgba(255,255,255,.14); border-color: var(--line-strong); }
.lightbox__nav--prev { left: 22px; }
.lightbox__nav--next { right: 22px; }
@media (max-width: 780px) {
  .lightbox__nav--prev { left: 8px; }
  .lightbox__nav--next { right: 8px; }
}
body.is-locked { overflow: hidden; }

/* ---------- Témoignages ---------- */
.quotes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px 7px; align-items: start; }
@media (max-width: 940px) { .quotes { grid-template-columns: 1fr; } }

/* Bandeau défilant, une fois qu'il y a de vrais avis à faire glisser */
.quotesmarquee {
  position: relative; overflow: hidden; padding: 22px 0 18px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent);
}
.quotes.quotes--track {
  display: flex; align-items: stretch; gap: var(--quotes-gap, 20px);
  width: max-content;
  will-change: transform;
}
.quotes--track .bubble { flex: none; width: min(78vw, 360px); }
.quotes-nav {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
  width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--surface); border: 1px solid var(--line); color: var(--text);
  font-size: 20px; line-height: 1; cursor: pointer;
  transition: border-color .2s, background .2s;
}
.quotes-nav:hover { border-color: var(--accent); background: var(--accent-dim); }
.quotes-nav--prev { left: 6px; }
.quotes-nav--next { right: 6px; }
@media (prefers-reduced-motion: reduce) {
  .quotes--track { animation: none; flex-wrap: wrap; width: 100%; }
}
.quote {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 30px 26px;
  display: flex; flex-direction: column; gap: 18px;
  transition: transform .35s var(--ease), border-color .35s var(--ease), box-shadow .35s var(--ease);
}
.quote:hover { transform: translateY(-4px); border-color: var(--line-strong); box-shadow: 0 24px 50px -26px rgba(0,0,0,.9); }
.quote__mark { font-size: 40px; line-height: .6; color: var(--accent); font-family: Georgia, serif; }
.quote p { margin: 0; font-size: 15px; line-height: 1.65; color: #d6d6dc; }
.quote footer { font-size: 12px; color: var(--muted); border-top: 1px solid var(--line); padding-top: 16px; }
.quote footer strong { display: block; color: var(--text); font-size: 13px; font-weight: 600; }

/* ---------- Blocs (À propos, process) ---------- */
.about-grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(28px, 5vw, 64px); align-items: start; }
@media (max-width: 900px) { .about-grid { grid-template-columns: 1fr; } }
.about-photo { position: relative; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--line); background: var(--surface); }
.about-photo img, .about-photo video { width: 100%; aspect-ratio: 3/4; object-fit: cover; object-position: 50% 14%; }
/* Zoom + léger recadrage vers le bas pour sortir du cadre le filigrane
   généré par l'IA en bas à droite de la vidéo. */
.about-photo video { transform: scale(1.18) translateY(4%); transform-origin: 50% 50%; }
.about-photo__badge { position: absolute; top: 14px; right: 14px; z-index: 2; }
.about-text p { color: #c2c2c9; }
.signature { width: 190px; margin-top: 28px; opacity: .95; filter: invert(1); mix-blend-mode: lighten; }

.blocks { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (min-width: 901px) { .blocks--5 { grid-template-columns: repeat(5, 1fr); } }
@media (max-width: 900px) { .blocks { grid-template-columns: 1fr; } }
.block {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 28px 26px; transition: transform .35s var(--ease), border-color .35s, box-shadow .35s;
}
.block:hover { transform: translateY(-4px); border-color: var(--line-strong); box-shadow: 0 24px 50px -26px rgba(0,0,0,.9); }
.block__num { font-size: 12px; letter-spacing: .2em; color: var(--accent-text); font-weight: 700; }
.block h3 { margin: 14px 0 10px; font-size: 19px; }
.block p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.6; }
.block--note {
  border-left: 3px solid var(--accent-text);
  background: linear-gradient(135deg, var(--surface), rgba(224,122,52,.08));
}

.logos { display: flex; flex-wrap: wrap; gap: 12px; }
.logos span {
  padding: 12px 20px; border: 1px solid var(--line); border-radius: 10px;
  background: var(--surface); color: var(--muted); font-size: 13px; font-weight: 600; letter-spacing: .04em;
}

/* Liquid glass, comme les bulles de la nav. */
.stats { display: flex; flex-wrap: nowrap; gap: 14px; margin-top: 34px; }
@media (max-width: 640px) { .stats { flex-wrap: wrap; } .stat { flex: 1 1 calc(50% - 7px); } }
.stat {
  flex: 1 1 0; min-width: 0;
  padding: 20px 26px;
  border-radius: 22px;
  background: rgba(255,255,255,.045);
  border: 1px solid rgba(255,255,255,.09);
  backdrop-filter: blur(14px) saturate(180%);
  -webkit-backdrop-filter: blur(14px) saturate(180%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14), inset 0 -10px 16px -12px rgba(0,0,0,.5);
  transition: background .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease);
}
.stat:hover { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.18); transform: translateY(-2px); }
.stat b { display: block; font-family: var(--font-display); font-size: clamp(26px, 3.2vw, 36px); font-weight: 700; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.stat span { display: block; margin-top: 6px; font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted-2); }

/* ---------- Contact ---------- */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 64px); align-items: stretch; }
@media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; } }

/* Glass card : double conteneur pour un liseré en dégradé orange très doux. */
.form-glass {
  height: 100%; box-sizing: border-box;
  padding: 2px; border-radius: var(--radius-lg);
  background: linear-gradient(135deg, rgba(224,122,52,.08), rgba(224,122,52,0));
  border: 1px solid rgba(224,122,52,.2);
}
.form-glass__inner { height: 100%; box-sizing: border-box; padding: 26px; border-radius: 18px; background: var(--bg); display: flex; flex-direction: column; }
@media (max-width: 520px) { .form-glass__inner { padding: 20px; } }

.form { flex: 1; display: flex; flex-direction: column; gap: 16px; }
.field { display: grid; gap: 8px; }
.field--grow { flex: 1; display: flex; flex-direction: column; }
.field--grow textarea { flex: 1; height: 100%; min-height: 150px; }
.field label { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.field input, .field select, .field textarea {
  width: 100%; padding: 14px 16px;
  background: var(--surface-2); color: var(--text);
  border: 1px solid var(--line); border-radius: 10px;
  font: inherit; font-size: 15px;
  transition: border-color .2s var(--ease), background .2s var(--ease), box-shadow .2s var(--ease);
}
.field textarea { min-height: 150px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: rgba(224,122,52,.6); background: var(--surface-2);
  box-shadow: 0 0 0 4px rgba(224,122,52,.14);
}
.field select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: calc(100% - 20px) 22px, calc(100% - 14px) 22px; background-size: 6px 6px; background-repeat: no-repeat; }
.form-note { font-size: 13px; color: var(--muted); margin: 0; }
.form-note a { color: var(--accent-text); }
.form-note a:hover { text-decoration: underline; }
.form-status { font-size: 14px; padding: 14px 16px; border-radius: 10px; display: none; }
.form-status.is-ok { display: block; background: var(--accent-dim); color: var(--accent); }
.form-status.is-err { display: block; background: rgba(255,80,80,.12); color: #ff8080; }

#contact-form .btn--primary {
  background: linear-gradient(135deg, var(--accent-text), var(--accent));
  border-color: transparent;
}
#contact-form .btn--primary:hover { filter: brightness(1.08); transform: translateY(-2px); }

.contact-list { display: grid; gap: 2px; }
.contact-row-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; border-bottom: 1px solid var(--line); }
@media (max-width: 480px) { .contact-row-pair { grid-template-columns: 1fr; border-bottom: none; } }
.contact-row-pair .contact-row { border-bottom: none; }
@media (max-width: 480px) { .contact-row-pair .contact-row { border-bottom: 1px solid var(--line); } }
.contact-row {
  display: flex; align-items: center; gap: 16px;
  padding: 18px 0; border-bottom: 1px solid var(--line);
  transition: padding-left .25s var(--ease);
}
.contact-row[hidden] { display: none; }
a.contact-row:hover { padding-left: 8px; }
.contact-row__icon {
  display: grid; place-items: center; flex: none;
  width: 38px; height: 38px; border-radius: 11px;
  background: rgba(224,122,52,.12);
}
.contact-row svg { width: 17px; height: 17px; flex: none; stroke: var(--accent-text); fill: none; stroke-width: 1.6; }
.contact-row b { display: block; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted-2); font-weight: 600; }
.contact-row span { font-size: 15px; }
.socials { display: flex; gap: 12px; margin-top: 28px; }
.socials a {
  width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center;
  border: 1px solid var(--line); background: var(--surface);
  transition: all .25s var(--ease);
}
.socials a:hover { background: var(--accent); border-color: var(--accent); transform: translateY(-3px); }
.socials svg { width: 17px; height: 17px; fill: var(--text); transition: fill .25s; }
.socials a:hover svg { fill: #0a0a0b; }

/* ---------- CTA bande ---------- */
.cta-band { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: linear-gradient(180deg, var(--bg-soft), var(--bg)); text-align: center; }
.cta-band h2 { max-width: 18ch; margin: 0 auto 18px; }
.cta-band p { margin: 0 auto 30px; }

/* ---------- Footer ---------- */
.site-footer { padding: 44px 0 32px; }
.site-footer .wrap { display: flex; flex-wrap: wrap; gap: 24px; justify-content: space-between; align-items: center; }
.site-footer img { height: 46px; opacity: .8; }
.site-footer nav { display: flex; flex-wrap: wrap; gap: 24px; }
.site-footer a { font-size: 13px; color: var(--muted); transition: color .2s; }
.site-footer a:hover { color: var(--text); }
.site-footer small { color: var(--muted-2); font-size: 12px; width: 100%; padding-top: 24px; border-top: 1px solid var(--line); }
.site-footer .legal-nav { width: 100%; gap: 6px; margin-top: -8px; }
.site-footer .legal-nav a { font-size: 11.5px; color: var(--muted-2); }

/* ---------- Page header (sous-pages) ---------- */
.page-head { padding: clamp(44px, 7vh, 78px) 0 34px; }
.page-head h1 { font-size: clamp(38px, 7vw, 78px); text-transform: uppercase; }

/* ---------- Pages légales : discrètes, pas de gros titre ---------- */
.legal-page { padding: clamp(36px, 6vh, 60px) 0 80px; }
.legal-page .wrap { max-width: 760px; }
.legal-title { font-size: clamp(28px, 4.6vw, 40px); margin-bottom: 8px; }
.legal-updated { color: var(--muted-2); font-size: 12.5px; margin: 0 0 40px; }
.legal-page h2 { font-size: clamp(19px, 2.4vw, 22px); margin: 40px 0 12px; }
.legal-page h2:first-of-type { margin-top: 0; }
.legal-page p { color: #c2c2c9; font-size: 15px; line-height: 1.7; margin: 0 0 14px; }
.legal-page ul { margin: 0 0 14px; padding-left: 20px; color: #c2c2c9; font-size: 15px; line-height: 1.7; }
.legal-page li { margin-bottom: 6px; }
.legal-page a { color: var(--accent-text); }
.legal-page a:hover { text-decoration: underline; }
.legal-page strong { color: var(--text); font-weight: 600; }

/* ---------- Reveal au scroll ---------- */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .card, .quote, .block { transition: none; }
}

.empty { color: var(--muted); font-size: 15px; padding: 40px 0; }

/* ---------- Variantes média ---------- */
.card__media--file-nothumb video, .featured__media--file-nothumb video { position: relative; opacity: 1; }
.card__media--file, .featured__media--file { background: #000; }
.ratio-h { aspect-ratio: 16 / 9; }
.ratio-v { aspect-ratio: 9 / 16; }
/* Dans la grille, toutes les cartes occupent le même espace quelle que soit l'orientation de la vidéo (recadrage via object-fit: cover). */
/* Même case, même nombre de pixels en largeur et en hauteur pour les deux
   formats : celle du vertical pivotée à 90° pour l'horizontal (4:5 -> 5:4),
   pas son vrai ratio 16:9 qui donnerait une case plus petite ou plus large. */
.card__media.ratio-v { aspect-ratio: 4 / 5; }
.card__media.ratio-h { aspect-ratio: 5 / 4; }
.lightbox__frame.ratio-h { aspect-ratio: 16 / 9; height: auto; }
.lightbox__frame.ratio-v { aspect-ratio: 9 / 16; height: auto; max-height: 86vh; margin: 0 auto; }
.lightbox__frame.is-free { aspect-ratio: auto; }

/* ---------- Avis Google (deux fiches) ---------- */
.gplaces { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 34px; }
.gplace {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 22px 14px 18px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  transition: transform .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.gplace:hover { transform: translateY(-3px); border-color: var(--line-strong); box-shadow: 0 20px 44px -24px rgba(0,0,0,.9); }
.gplace__body b { display: block; font-size: 14px; font-weight: 600; letter-spacing: -.01em; }
.gplace__body span { font-size: 12.5px; color: var(--muted); }
.g-logo { width: 17px; height: 17px; flex: none; }
.quote__src .g-logo { width: 13px; height: 13px; vertical-align: -2px; margin-right: 5px; }

.stars { color: var(--accent-text); letter-spacing: .08em; font-size: 14px; }
.stars__off { color: var(--line-strong); }
.quote__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.quote__src { font-size: 11px; color: var(--muted-2); letter-spacing: .04em; }
.quote p { display: -webkit-box; -webkit-line-clamp: 8; -webkit-box-orient: vertical; overflow: hidden; }

.places { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 26px; }
@media (max-width: 520px) { .places { grid-template-columns: 1fr; } }
.place-card {
  display: grid; gap: 8px; align-content: start;
  padding: 18px; border-radius: var(--radius); background: var(--surface);
}
.place-card b { font-size: 15px; font-weight: 600; }
.place-card > span { font-size: 13px; color: var(--muted); }
.place-card__links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.place-pill {
  display: inline-flex; align-items: center;
  padding: 13px 16px; min-height: 44px; box-sizing: border-box; border-radius: 999px;
  background: rgba(224,122,52,.12); border: 1px solid rgba(224,122,52,.3);
  color: var(--accent-text); font-size: 12.5px; font-weight: 600;
  transition: background .2s var(--ease), border-color .2s var(--ease);
}
.place-pill:hover { background: rgba(224,122,52,.2); border-color: rgba(224,122,52,.5); }

/* ============================================================
   Hero v2 : titre Unbounded + accroche Newsreader, carte showreel
   ============================================================ */
.hero {
  /* Le hero s'ajuste à son contenu (avec un plafond confortable) plutôt que de
     forcer toute la hauteur de l'écran : sur un grand écran, un vide figé
     apparaissait au-dessus et en dessous du bloc de texte. */
  min-height: 0;
  margin-top: 0;
  display: flex; align-items: center;   /* bloc centré dans la hauteur restante */
  overflow: visible;
  padding: clamp(48px, 7vh, 80px) 0 clamp(40px, 6vh, 64px);
}
.hero__grid {
  width: 100%;
  display: grid;
  grid-template-columns: 1.12fr .88fr;
  gap: clamp(20px, 2.4vw, 40px);
  align-items: stretch;   /* la vidéo se cale sur la hauteur du texte */
}
.hero__left { min-width: 0; container-type: inline-size; }

.hero__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(46px, 20.4cqw, 210px);
  line-height: .92;
  letter-spacing: -.055em;
  text-transform: uppercase;
  overflow-wrap: break-word;
  margin: 0;
}
.hero__accroche {
  font-family: var(--font-accent);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(26px, 9.2cqw, 74px);
  line-height: 1.05;
  letter-spacing: -.02em;
  color: var(--accent);
  margin: 6px 0 0;
}
.hero__sub {
  margin: 20px 0 0;
  max-width: 36ch;
  color: #c2c2c2;
  font-size: clamp(14px, 2.7cqw, 18px);
  line-height: 1.65;
}

.hero__socials { display: flex; gap: 12px; margin: 26px 0 0; }
.hero__socials a {
  width: 52px; height: 52px; border-radius: 50%;
  display: grid; place-items: center;
  border: 1px solid var(--line-strong);
  transition: all .25s var(--ease);
}
.hero__socials svg { width: 19px; height: 19px; fill: rgba(251,251,251,.72); transition: fill .25s var(--ease); }
.hero__socials a:hover { background: var(--accent); border-color: var(--accent); transform: translateY(-3px); }
.hero__socials a:hover svg { fill: #fff; }

.hero__stats { display: flex; flex-wrap: wrap; align-items: flex-start; gap: clamp(22px, 3vw, 42px); margin-top: 24px; }
.hero__stats b {
  display: block; font-family: var(--font-display); font-weight: 700;
  font-size: clamp(26px, 6.6cqw, 46px); letter-spacing: -.05em; line-height: 1;
}
.hero__stats span { display: block; margin-top: 9px; max-width: 21ch; font-size: clamp(12.5px, 2.5cqw, 16px); color: var(--muted); line-height: 1.5; }

/* Carte showreel */
.showreel {
  position: relative; overflow: hidden; cursor: pointer;
  width: 100%;
  aspect-ratio: 1 / 1;          /* format carré, comme validé */
  align-self: end;
  max-height: calc(100svh - var(--header-h) - 130px);
  border-radius: 30px;
  /* Safari : le mix-blend-mode de la vidéo ignore le border-radius sans ce masque. */
  -webkit-mask-image: -webkit-radial-gradient(#fff, #000);
  isolation: isolate;
  background: linear-gradient(155deg, #d2732f 0%, var(--accent) 46%, #6f3210 100%);
  box-shadow: 0 40px 90px -40px rgba(181,86,31,.6), 0 0 0 1px rgba(255,255,255,.05);
  transition: transform .5s var(--ease), box-shadow .5s var(--ease);
}
.showreel:hover { transform: translateY(-5px); box-shadow: 0 54px 110px -44px rgba(181,86,31,.75), 0 0 0 1px rgba(255,255,255,.09); }
.showreel__bg { position: absolute; inset: 0; overflow: hidden; }
/* Masque le temps que YouTube démarre la lecture, pour ne jamais laisser
   apparaître ses propres flèches ou son bouton lecture le temps d'un flash. */
.showreel__mask {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(155deg, #d2732f 0%, var(--accent) 46%, #6f3210 100%);
  opacity: 1;
  transition: opacity .6s var(--ease);
}
.showreel__mask.is-hidden { opacity: 0; visibility: hidden; transition: opacity .6s var(--ease), visibility 0s .6s; }
@media (prefers-reduced-motion: reduce) { .showreel__mask { transition: none; } }

/* Grain VHS : scanlines + bruit léger + vignettage, purement décoratif */
.showreel__vhs {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background:
    repeating-linear-gradient(180deg, rgba(0,0,0,.32) 0px, rgba(0,0,0,.32) 1px, transparent 1px, transparent 3px),
    radial-gradient(120% 90% at 50% 50%, transparent 45%, rgba(0,0,0,.5) 100%);
  mix-blend-mode: multiply;
  opacity: .8;
  animation: showreelFlicker 6s steps(1) infinite;
}
.showreel__vhs::before {
  content: "";
  position: absolute; inset: -4% -2%;
  background-image:
    linear-gradient(90deg, transparent 7.5%, rgba(255,255,255,.55) 7.6%, transparent 7.9%),
    linear-gradient(90deg, transparent 26.2%, rgba(255,255,255,.4) 26.3%, transparent 26.5%),
    linear-gradient(90deg, transparent 61.8%, rgba(255,255,255,.5) 61.9%, transparent 62.2%),
    linear-gradient(90deg, transparent 83.4%, rgba(255,255,255,.35) 83.5%, transparent 83.7%);
  mix-blend-mode: screen;
  opacity: 0;
  animation: showreelScratch 5s steps(1) infinite;
}
.showreel__vhs::after {
  content: "";
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
  opacity: .75;
}
@keyframes showreelScratch {
  0%, 100% { opacity: 0; transform: translateX(0); }
  4%  { opacity: .8; transform: translateX(-1%); }
  6%  { opacity: 0; }
  47% { opacity: 0; }
  50% { opacity: .6; transform: translateX(1.5%); }
  53% { opacity: 0; }
}
@keyframes showreelFlicker {
  0%, 92%, 100% { opacity: .8; }
  93% { opacity: .58; }
  95% { opacity: .95; }
}
@media (prefers-reduced-motion: reduce) { .showreel__vhs { animation: none; } }
.showreel__bg iframe {
  position: absolute; top: 50%; left: 50%;
  width: 340%; height: 191%;
  transform: translate(-50%, -50%);
  border: 0; pointer-events: none;
  opacity: .92; mix-blend-mode: luminosity;
  filter: blur(1.1px) brightness(1.25);   /* vidéo à peine adoucie, le temps d'avoir le vrai showreel */
  transform-origin: center;
}
.showreel__veil { position: absolute; inset: 0; z-index: 3; background: linear-gradient(190deg, rgba(0,0,0,.05), rgba(0,0,0,.5)); }
.showreel__logo { position: absolute; top: 28px; left: 28px; height: 24px; opacity: .95; }
.showreel__center {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  z-index: 4;
  display: flex; flex-direction: column; align-items: center; gap: 22px;
  text-align: center; width: 78%;
}
.showreel__notice {
  display: flex; flex-direction: column; gap: 5px;
  font-family: var(--font-display); font-weight: 500;
  font-size: 13.5px; letter-spacing: -.005em; line-height: 1.3;
  color: rgba(255,255,255,.82); text-shadow: 0 2px 14px rgba(0,0,0,.55);
}
.showreel__notice b { font-size: 16px; font-weight: 700; color: #fff; }
.showreel__gear {
  display: grid; place-items: center;
  color: rgba(255,255,255,.92);
  filter: drop-shadow(0 2px 10px rgba(0,0,0,.4));
  animation: showreelSpin 6s linear infinite;
}
.showreel__gear svg { width: 60px; height: 60px; }
@keyframes showreelSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .showreel__gear { animation: none; } }
.showreel__label {
  position: absolute; left: 30px; bottom: 30px;
  font-size: 17px; font-weight: 600; letter-spacing: -.01em; color: #fff;
}
.showreel__play {
  position: relative;
  width: 100px; height: 100px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(255,255,255,.22);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,.35);
  transition: background .3s var(--ease), transform .3s var(--ease);
}
.showreel:hover .showreel__play { background: rgba(255,255,255,.34); transform: scale(1.06); }
.showreel__play svg { width: 24px; height: 27px; fill: #fff; margin-left: 4px; }
.showreel__play--wip svg { width: 30px; height: 30px; fill: none; stroke: #fff; margin-left: 0; }
.showreel__next {
  position: absolute; right: 26px; bottom: 26px;
  width: 64px; height: 64px; border-radius: 50%;
  display: grid; place-items: center;
  background: #0a0a0a; border: 1px solid rgba(255,255,255,.14);
  transition: transform .3s var(--ease), background .3s var(--ease);
}
.showreel__next:hover { transform: translateY(-3px); background: #171717; }
.showreel__next svg { width: 22px; height: 22px; fill: none; stroke: #fff; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

@media (max-width: 900px) {
  .hero-fold { min-height: 0; }
  .hero { min-height: 0; padding-bottom: 44px; }
  .hero__grid { grid-template-columns: 1fr; gap: 34px; min-height: 0; align-items: start; }
  .showreel { aspect-ratio: 4 / 3.2; height: auto; order: 2; }
  .hero__left { order: 1; }
  .hero__stats { margin-top: 32px; gap: 30px; }
  .hero__title { font-size: clamp(38px, 13.5cqw, 90px); }
}

/* Header : catégories + Contact à droite */
.header-end { display: flex; align-items: center; gap: 12px; }
.btn--sm { padding: 9px 20px; font-size: 12.5px; }
.nav__sec { opacity: .72; }
@media (max-width: 1080px) and (min-width: 781px) {
  .nav { gap: 22px; }
  .nav a { font-size: 12px; }
}

/* ---------- Parcours ---------- */
.parcours-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 40px; margin-top: -20px; }
@media (max-width: 900px) {
  .parcours-grid { grid-template-columns: 1fr; gap: 0; }
  .parcours-grid > div + div { margin-top: 44px; }
}
.timeline { display: grid; gap: 0; }
.tl {
  display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 12px; row-gap: 5px;
  padding: 11px 0; border-top: 1px solid var(--line);
  transition: background .3s var(--ease);
}
.tl:last-child { border-bottom: 1px solid var(--line); }
.tl:hover { background: rgba(255,255,255,.02); }
.tl b { flex: none; font-family: var(--font-display); font-size: 16px; font-weight: 700; letter-spacing: -.03em; }
.tl i { flex: none; font-family: var(--font-accent); font-style: italic; font-size: 15px; color: var(--accent-text); }
.tl p { flex: 0 0 100%; margin: 0; color: var(--muted); font-size: 14px; line-height: 1.6; }
@media (max-width: 780px) {
  .tl i { font-size: 14px; }
}
.quotes--empty { display: block; }
.quotes--empty a { color: var(--accent-text); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Pilule du header ---------- */
.pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 18px; border-radius: 999px;
  background: var(--surface); border: 1px solid var(--line);
  font-size: 13px; color: var(--text); white-space: nowrap;
  transition: background .25s var(--ease), border-color .25s var(--ease);
}
.pill:hover { background: var(--surface-2); border-color: var(--line-strong); }
.pill i { font-family: var(--font-accent); font-style: italic; color: var(--muted); font-size: 13px; }
.pill i::before { content: "· "; }
.pill:empty { display: none; }
@media (max-width: 1180px) { .pill { display: none; } }

/* ---------- Onglets de catégories dans la page ---------- */
.tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 30px; }
/* #filters (vidéos) et #photo-filters ont tous les deux un genre principal +
   "Plus" ; seul #filters a en plus la rangée de techniques cumulables. */
#filters.tabs, #photo-filters.tabs { flex-direction: column; flex-wrap: nowrap; }
.tabs__row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.tabwrap { position: relative; display: inline-flex; }
.tab {
  min-height: 44px; padding: 12px 17px; border-radius: 999px;
  border: 1px solid var(--line); background: transparent;
  font-size: 11px; color: var(--muted); font-weight: 500;
  transition: all .22s var(--ease);
}
.tab:hover { color: var(--text); border-color: var(--line-strong); }
.tab.is-active { background: var(--text); border-color: var(--text); color: #0a0a0a; }

/* Catégorie masquée par Dorian : invisible pour le public, visible en
   grisé (avec la pastille pour la réafficher) uniquement en mode édition. */
.tabwrap[data-hidden="1"] .tab { display: none; }
body:not(.is-admin-preview) .tabwrap[data-hidden="1"] { display: none; }
body.is-admin-preview .tabwrap[data-hidden="1"] .tab { display: inline-flex; opacity: .4; }
.tab__vis { display: none; }
body.is-admin-preview .tab__vis {
  position: absolute; top: -7px; right: -7px; z-index: 2;
  width: 20px; height: 20px; padding: 0; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--surface-2); border: 1px solid var(--line-strong); color: var(--muted);
  cursor: pointer;
}
body.is-admin-preview .tab__vis:hover { color: var(--text); border-color: var(--accent); }
.tab__vis svg { width: 11px; height: 11px; }

/* Bouton "Plus" : le + tourne en croix quand le second rang est ouvert */
.tab--more { display: inline-flex; align-items: center; gap: 6px; }
.tab--more__icon { display: inline-block; font-size: 14px; line-height: 1; transition: transform .25s var(--ease); }
.tab--more.is-open .tab--more__icon { transform: rotate(45deg); }

/* Second rang de genres ("Plus") : hauteur animée en CSS pur, sans mesurer le contenu en JS */
.tabs__more-wrap { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .35s var(--ease); }
.tabs__more-wrap.is-open { grid-template-rows: 1fr; }
.tabs__more-inner { overflow: hidden; display: flex; flex-wrap: wrap; gap: 8px; }

/* Techniques : rang cumulable, séparé visuellement du choix de genre */
.tabs__techniques { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding-top: 14px; border-top: 1px dashed var(--line); }
.tabs__techniques-label { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted-2); margin-right: 2px; }
.tab--tech.is-active { background: var(--accent); border-color: var(--accent); color: #fff; }

/* ---------- Logiciels ---------- */
.toolmarquee {
  position: relative; overflow: hidden; padding: 6px 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent);
}
.tools {
  display: flex; align-items: stretch; gap: 12px;
  width: max-content;
  will-change: transform;
}
@media (prefers-reduced-motion: reduce) {
  .tools { flex-wrap: wrap; width: 100%; }
}
.tool {
  flex: none; width: 248px;
  display: grid;
  grid-template-columns: 46px 1fr;
  grid-template-rows: auto auto;
  column-gap: 14px; align-items: center;
  padding: 14px 16px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  transition: transform .3s var(--ease), border-color .3s var(--ease), background .3s var(--ease);
}
.tool:hover { transform: translateY(-3px); border-color: var(--line-strong); background: var(--surface-2); }
.tool__ico {
  grid-row: 1 / span 2; align-self: center;
  width: 46px; height: 46px; border-radius: 11px;
  display: grid; place-items: center;
  background: var(--tb); color: var(--tf);
  border: 1px solid rgba(255,255,255,.1);
  font-size: 16px; font-weight: 700; letter-spacing: -.02em;
}
.tool__ico--resolve {
  background: #16171b; color: #f2f2f2;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.12);
  position: relative;
}
.tool__ico--resolve::after {
  content: ""; position: absolute; inset: 6px; border-radius: 50%;
  background: conic-gradient(#ff5f5f, #ffcf5f, #7bff9c, #5fd0ff, #b98cff, #ff5f5f);
  opacity: .22;
}
.tool b { grid-column: 2; align-self: end; font-size: 14px; font-weight: 600; letter-spacing: -.01em; line-height: 1.25; }
.tool i {
  grid-column: 2; align-self: start; margin-top: 2px;
  font-family: var(--font-accent); font-style: italic;
  font-size: 12.5px; color: var(--muted);
}

/* ---------- Vignette de repli (contenus Instagram, TikTok) ---------- */
.card__media--poster, .featured__media--poster {
  display: grid; place-items: center; position: relative;
  background:
    radial-gradient(120% 90% at 30% 10%, rgba(181,86,31,.34), transparent 62%),
    linear-gradient(165deg, #1a1a1c 0%, #101012 100%);
}
.poster__logo { width: 44%; max-width: 190px; opacity: .5; }
.poster__cat {
  position: absolute; left: 14px; bottom: 14px;
  font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--muted);
}
.card__media--poster .card__play svg, .featured__media--poster .card__play svg { fill: none; stroke: #fff; }
.card:hover .card__media--poster .card__play svg { stroke: #0a0a0a; }

/* Projet à la une : garder une hauteur raisonnable même en format vertical */
.featured__media.ratio-v { aspect-ratio: 4 / 5; max-height: 560px; }
.featured__media.ratio-h { aspect-ratio: 16 / 9; max-height: 560px; }
.poster__logo { width: min(44%, 160px); }
.featured__media--poster .poster__logo { width: min(38%, 170px); }

.tl-label {
  margin: 16px 0 4px;
  font-size: 11px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--muted-2); font-weight: 600;
}
.timeline + .tl-label { margin-top: 28px; }

/* ---------- Matériel : onglets + coverflow ---------- */
.gear-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 26px 0 6px; }
.gear-tab {
  min-height: 44px; padding: 12px 17px; border-radius: 999px;
  border: 1px solid var(--line); background: transparent;
  font-size: 11px; color: var(--muted); font-weight: 500; cursor: pointer;
  transition: all .22s var(--ease);
}
.gear-tab:hover { color: var(--text); border-color: var(--line-strong); }
.gear-tab.is-active { background: var(--text); border-color: var(--text); color: #0a0a0b; }

.coverflow { padding: 10px 0 4px; }
.coverflow__viewport {
  position: relative; height: 390px;
  perspective: 1400px;
  overflow: hidden;
}
.coverflow__track { position: absolute; inset: 0; }
.coverflow__card {
  position: absolute; top: 50%; left: 50%;
  width: min(78vw, 300px); height: 360px;
  display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--line); border-radius: 16px;
  padding: 26px 24px;
  cursor: pointer; transform-style: preserve-3d; will-change: transform, filter, opacity;
  transition: transform .5s cubic-bezier(.22,.9,.3,1), filter .5s cubic-bezier(.22,.9,.3,1), opacity .5s cubic-bezier(.22,.9,.3,1), border-color .35s;
}
.coverflow__card.is-active {
  cursor: default; border-color: var(--accent);
  box-shadow: 0 30px 70px -24px rgba(0,0,0,.9), 0 0 0 1px rgba(224,122,52,.25);
}
.coverflow__card:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.coverflow__badge {
  width: 44px; height: 44px; border-radius: 12px;
  display: grid; place-items: center; margin-bottom: 16px;
}
.coverflow__badge svg { width: 22px; height: 22px; }
.coverflow__title { margin: 0 0 14px; font-size: 19px; font-weight: 700; }
.coverflow__list {
  flex: 1 1 auto; min-height: 0; overflow-y: auto;
  margin: 0; padding: 0 4px 0 0; list-style: none; display: grid; gap: 6px; align-content: start;
  scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent;
}
.coverflow__list::-webkit-scrollbar { width: 5px; }
.coverflow__list::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 3px; }
.coverflow__list li { font-size: 13.5px; color: var(--muted); line-height: 1.5; }
.coverflow__count {
  margin-top: auto; padding-top: 14px; border-top: 1px solid var(--line);
  font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted-2);
}
.coverflow__arrows { display: flex; justify-content: center; gap: 14px; margin-top: 18px; }
.coverflow__arrow {
  width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid var(--line); background: var(--surface);
  display: grid; place-items: center; cursor: pointer;
  transition: border-color .2s, background .2s;
}
.coverflow__arrow:hover { border-color: var(--accent); background: var(--accent-dim); }
.coverflow__arrow svg { width: 16px; height: 16px; stroke: var(--text); }

/* Le logo de repli ne doit pas hériter du cover des vignettes */
.card__media--poster img.poster__logo,
.featured__media--poster img.poster__logo {
  width: min(42%, 150px); height: auto; object-fit: contain; opacity: .45;
}
.featured__media--poster img.poster__logo { width: min(34%, 165px); }

/* ---------- Avis clients : cartes façon Compétences ---------- */
.quote-card {
  position: relative;
  display: flex; flex-direction: column; gap: 14px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 46px 26px 28px;
  transition: transform .35s var(--ease), border-color .35s var(--ease), box-shadow .35s var(--ease);
}
.quote-card:hover { transform: translateY(-4px); border-color: var(--line-strong); box-shadow: 0 24px 50px -26px rgba(0,0,0,.9); }
.quote-card__stars {
  position: absolute; top: 0; left: 26px; transform: translateY(-50%);
  z-index: 2; line-height: 1;
}
.quote-card__stars .stars { color: var(--accent); font-size: 28px; letter-spacing: .06em; }
.quote-card__stars .stars__off { color: var(--line-strong); }
.quote-card__who { display: flex; align-items: center; gap: 12px; min-width: 0; }
.quote-card__avatar {
  width: 38px; height: 38px; border-radius: 50%; flex: none;
  display: grid; place-items: center;
  background: #000; color: #fff;
  border: 1px solid rgba(255,255,255,.16);
  font-family: var(--font-display); font-size: 14px; font-weight: 700;
}
.quote-card__avatar--photo { object-fit: cover; background: none; border-color: rgba(181,86,31,.4); }
.quote-card__name {
  flex: 1 1 auto; min-width: 0;
  font-family: var(--font-display); font-size: 19px; font-weight: 700;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.quote-card__actions {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-top: 6px;
}
.quote-card__actions .bubble__project { margin-left: auto; }
.quote-card__textwrap { flex: 1 1 auto; min-height: 0; margin-top: 14px; }
.quote-card__text {
  margin: 0; color: var(--muted); font-size: 14px; line-height: 1.6;
  overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 6;
}

/* ---------- Avis en bulles (fiche agrandie) ---------- */
.bubble { display: block; margin: 0; }
body.is-admin-preview .bubble[data-tid] { cursor: pointer; }
body.is-admin-preview .bubble[data-tid]:hover .bubble__msg { outline: 2px dashed rgba(224,122,52,.65); outline-offset: 2px; }
.bubble__msg {
  position: relative;
  display: flex; flex-direction: column;
  height: 220px;
  background: linear-gradient(155deg, rgba(255,255,255,.10), rgba(255,255,255,.03));
  -webkit-backdrop-filter: blur(20px) saturate(160%);
          backdrop-filter: blur(20px) saturate(160%);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 20px 20px 20px 6px;
  padding: 22px 24px 20px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 20px 44px -26px rgba(0,0,0,.85);
  transition: transform .35s var(--ease), border-color .35s var(--ease), box-shadow .35s var(--ease);
}
.bubble:hover .bubble__msg {
  transform: translateY(-4px);
  border-color: rgba(181,86,31,.55);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 26px 54px -28px rgba(0,0,0,.95);
}
.bubble__msg::after {
  content: ""; position: absolute; left: 16px; bottom: -9px;
  width: 16px; height: 16px;
  background: rgba(255,255,255,.06);
  -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
  border-right: 1px solid rgba(255,255,255,.16); border-bottom: 1px solid rgba(255,255,255,.16);
  transform: rotate(45deg) skew(6deg, 6deg);
  border-bottom-right-radius: 3px;
}
.bubble__msg p {
  flex: 1; min-height: 0; margin: 12px 0 0; font-size: 15px; line-height: 1.6; color: #dcdcdc;
  overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 6;
}
.bubble__more {
  padding: 0; border: none; background: none; cursor: pointer;
  font-family: var(--font-display); font-style: italic; font-size: 13px; color: var(--accent-text);
}
.bubble__more:hover { text-decoration: underline; }

.photogrid-modal {
  position: fixed; inset: 0; z-index: 400; display: none;
  padding: clamp(20px, 5vw, 60px); overflow-y: auto;
  background: rgba(0,0,0,.85); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.photogrid-modal.is-open { display: block; }
.photogrid-modal__close {
  position: fixed; top: 20px; right: 22px; z-index: 2;
  width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(255,255,255,.07); border: 1px solid var(--line);
  transition: background .2s, transform .2s;
}
.photogrid-modal__close:hover { background: rgba(255,255,255,.14); transform: rotate(90deg); }
.photogrid-modal__close::before { content: "\00d7"; font-size: 24px; line-height: 1; color: var(--text); }
.photogrid-modal__grid {
  max-width: 1100px; margin: 0 auto;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px;
}
.photogrid-modal__item {
  position: relative; padding: 0; border: 1px solid var(--line); border-radius: 12px;
  overflow: hidden; cursor: pointer; background: var(--surface);
  aspect-ratio: 4/5; transition: border-color .2s, transform .2s;
}
.photogrid-modal__item:hover { border-color: var(--accent); transform: translateY(-3px); }
.photogrid-modal__item img { width: 100%; height: 100%; object-fit: cover; display: block; }

.quote-modal {
  position: fixed; inset: 0; z-index: 400; display: grid; place-items: center; padding: 24px;
  background: rgba(0,0,0,.7); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  opacity: 0; animation: quotemodal-in .25s var(--ease) forwards;
}
@keyframes quotemodal-in { to { opacity: 1; } }
.quote-modal__card {
  position: relative; width: min(560px, 100%); max-height: 80vh; overflow-y: auto;
  background: linear-gradient(155deg, rgba(30,30,30,.98), rgba(14,14,14,.98));
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 20px;
  padding: 30px 30px 26px;
  box-shadow: 0 40px 90px -30px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.14);
  transform: translateY(8px); animation: quotemodal-card-in .3s var(--ease) forwards;
}
@keyframes quotemodal-card-in { to { transform: translateY(0); } }
.quote-modal__close {
  position: absolute; top: 14px; right: 14px; width: 32px; height: 32px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.16); background: rgba(255,255,255,.06); color: #fff;
  font-size: 18px; line-height: 1; cursor: pointer; display: grid; place-items: center;
}
.quote-modal__close:hover { background: rgba(255,255,255,.14); }
.quote-modal__card p { margin: 14px 0 0; font-size: 15.5px; line-height: 1.7; color: #dcdcdc; white-space: pre-wrap; }
.quote-modal__card .bubble__who { margin-top: 22px; }
.bubble__who { display: flex; align-items: center; gap: 12px; margin: 22px 0 0 6px; }
.bubble__avatar {
  width: 38px; height: 38px; border-radius: 50%; flex: none;
  display: grid; place-items: center;
  background: #000; color: #fff;
  border: 1px solid rgba(255,255,255,.16);
  font-family: var(--font-display); font-size: 14px; font-weight: 700;
}
.bubble__avatar--photo { object-fit: cover; background: none; border-color: rgba(181,86,31,.4); }
.bubble__who b { display: block; font-size: 14px; font-weight: 600; }
.bubble__who span { display: block; font-family: var(--font-accent); font-style: italic; font-size: 13px; color: var(--muted); }
.bubble__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.bubble__project {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-display); font-style: italic; font-size: 13px;
  color: var(--accent-text); background: none; border: none; padding: 0; cursor: pointer;
}
.bubble__project:hover { text-decoration: underline; }

/* ============================================================
   Accessibilité : focus clavier, lien d'évitement, mouvement réduit
   ============================================================ */
:focus-visible {
  outline: 2px solid var(--accent-text);
  outline-offset: 3px;
  border-radius: 6px;
}
.card:focus-visible, .featured:focus-visible, .photo:focus-visible, .showreel:focus-visible { outline-offset: 4px; }

.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 300;
  padding: 12px 20px; border-radius: 10px;
  background: var(--text); color: #0a0a0a;
  font-size: 14px; font-weight: 600;
  transition: top .2s var(--ease);
}
.skip-link:focus { top: 12px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .showreel__bg, .card__media video { display: none; }
  .card__media--file, .showreel { background: linear-gradient(155deg, #d2732f, var(--accent) 46%, #6f3210); }
}

/* Sur écran tactile, tous les liens de texte atteignent 44 px de haut */
@media (hover: none) {
  .site-footer nav a,
  .site-footer small a,
  .quotes--empty a,
  .place-row a,
  .contact-row {
    display: inline-flex; align-items: center; min-height: 44px;
  }
  .site-footer nav { gap: 8px 22px; }
  .place-row a { padding-right: 6px; }
}

/* ---------- Bandeau de logos clients ---------- */
.brandmarquee {
  position: relative;
  overflow: hidden;
  padding: 6px 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent);
}
.brandtrack {
  display: flex; align-items: center; gap: 14px;
  width: max-content;
  will-change: transform;
}

.brandcard {
  display: inline-flex; align-items: center; gap: 12px;
  flex: none;
  width: 248px;
  padding: 12px 18px 12px 12px;
  border: 1px solid var(--line); border-radius: 14px;
  background: var(--surface);
  transition: transform .3s var(--ease), border-color .3s var(--ease), background .3s var(--ease);
}
a.brandcard:hover { transform: translateY(-3px); border-color: var(--line-strong); background: var(--surface-2); }
.brandcard img {
  width: 60px; height: 60px; border-radius: 15px; object-fit: contain; padding: 7px;
  flex: none; background: #111; box-sizing: border-box;
}
.brandcard span { font-size: 14px; font-weight: 600; letter-spacing: -.01em; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.brandcard--static span { color: var(--muted); font-weight: 500; }
.brandcard--static { padding: 12px 20px; }

@media (prefers-reduced-motion: reduce) {
  .brandtrack { animation: none; flex-wrap: wrap; width: 100%; }
}

/* Grand écran : le titre reste cantonné à sa colonne (retour à la ligne
   naturel si besoin) pour ne jamais chevaucher la carte showreel. */
@media (min-width: 1000px) {
  .hero__title { font-size: clamp(46px, 10.6cqw, 108px); white-space: nowrap; position: relative; z-index: 1; }
  .hero__accroche { position: relative; z-index: 1; }
  .showreel { position: relative; z-index: 3; }
  .hero__left { position: relative; z-index: 2; }
}

/* ---------- Note client dans le hero ---------- */
.rating {
  display: block;
  padding: 0 0 0 20px;
  border-left: 2px solid rgba(181,86,31,.45);
  transition: border-color .3s var(--ease), transform .3s var(--ease);
}
a.rating:hover { border-color: var(--accent-text); transform: translateY(-2px); }
.hero__stats .rating__top { display: flex; align-items: baseline; gap: 12px; margin: 0; max-width: none; }
.hero__stats .rating__stars { display: flex; gap: 4px; align-self: center; margin: 0; max-width: none; }
.hero__stats .rating__stars span { display: inline-flex; margin: 0; max-width: none; line-height: 0; }
.rating__stars svg { width: 15px; height: 15px; fill: rgba(255,255,255,.16); transition: fill .3s var(--ease); }
.rating__stars .on svg { fill: var(--accent-text); }
a.rating:hover .rating__stars svg { fill: var(--accent-text); }
.rating b {
  display: block; font-family: var(--font-display); font-weight: 700; color: var(--text);
  font-size: clamp(26px, 6.6cqw, 46px); letter-spacing: -.05em; line-height: 1;
}
.rating b i { font-style: normal; font-size: .42em; color: var(--muted); letter-spacing: 0; margin-left: 4px; }
.hero__stats .rating__label { display: block; margin-top: 9px; max-width: 21ch; font-size: clamp(12.5px, 2.5cqw, 16px); color: var(--muted); line-height: 1.5; }
a.rating:hover .rating__label { color: var(--text); }

/* ---------- Navigation en une page ---------- */
#accueil, #portfolio, #apropos, #contact, .anchor { scroll-margin-top: var(--header-h); }
.anchor { display: block; }
body:not(.is-admin-preview) .adminlink { display: none; }
.adminlink {
  display: inline-block; margin-left: 14px; padding: 4px 12px;
  border: 1px solid var(--line); border-radius: 999px;
  font-size: 12px; color: var(--muted);
}
.adminlink:hover { color: var(--accent-text); border-color: var(--accent-text); }

/* ---------- Lecture des contenus Instagram et TikTok ---------- */
.lightbox__frame.is-embed { background: #fff; border-radius: 14px; aspect-ratio: auto; height: 86vh; max-height: 860px; }
.lightbox__frame.is-embed iframe { width: 100%; height: 100%; border: 0; }
.lightbox__stage.is-vertical { max-width: 460px; }
.poster__title {
  position: absolute; left: 16px; right: 16px; bottom: 38px;
  font-family: var(--font-display); font-weight: 700; font-size: 15px; letter-spacing: -.02em;
  color: rgba(255,255,255,.9); line-height: 1.2;
}
.featured__media--poster .poster__title { font-size: 19px; bottom: 46px; }

/* ============================================================
   Édition inline (local uniquement) : modale + affordance sur les cartes
   ============================================================ */
body.is-admin-preview #grid .card,
body.is-admin-preview #featured .featured {
  cursor: pointer;
  outline: 2px dashed transparent;
  outline-offset: -2px;
  transition: outline-color .2s var(--ease), transform .2s var(--ease);
}
body.is-admin-preview #grid .card:hover,
body.is-admin-preview #featured .featured:hover {
  outline-color: rgba(224,122,52,.65);
}
body.is-admin-preview #featured .featured::before {
  content: "Cliquer pour modifier";
  position: absolute; z-index: 5; top: 10px; left: 10px;
  font-size: 10.5px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase;
  padding: 5px 10px; border-radius: 999px;
  background: rgba(224,122,52,.92); color: #fff;
  opacity: 0; transform: translateY(-4px);
  transition: opacity .2s var(--ease), transform .2s var(--ease);
  pointer-events: none;
}
body.is-admin-preview #featured .featured:hover::before {
  opacity: 1; transform: translateY(0);
}
body.is-admin-preview .photo { position: relative; }

/* Photos : "Modifier" est un vrai bouton en haut à gauche, pour que le
   centre de l'image reste cliquable et ouvre l'aperçu en grand. */
.photo__edit {
  position: absolute; z-index: 6; top: 10px; left: 10px;
  font-size: 10.5px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase;
  padding: 5px 10px; border-radius: 999px; border: none;
  background: rgba(224,122,52,.92); color: #fff; cursor: pointer;
  opacity: 0; transform: translateY(-4px);
  transition: opacity .2s var(--ease), transform .2s var(--ease), background .2s var(--ease);
  display: none;
}
body.is-admin-preview .photo:hover .photo__edit { opacity: 1; transform: translateY(0); }
body.is-admin-preview .photo__edit { display: block; }

/* Poignées de redimensionnement d'une vignette vidéo (édition locale uniquement) :
   bas = hauteur, droite = largeur, coin = les deux à la fois. */
.resize-handle {
  display: none;
  position: absolute; z-index: 7;
  width: 30px; height: 22px; border-radius: 999px;
  align-items: center; justify-content: center;
  background: rgba(10,10,10,.6); border: 1px solid rgba(255,255,255,.25);
  opacity: 0;
  transition: opacity .2s var(--ease), background .2s var(--ease), border-color .2s var(--ease);
}
.resize-handle svg { width: 15px; height: 15px; fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.resize-handle--v { bottom: 8px; left: 50%; transform: translateX(-50%); cursor: ns-resize; }
.resize-handle--h { right: 8px; top: 50%; transform: translateY(-50%) rotate(90deg); cursor: ew-resize; }
.resize-handle--d { bottom: 6px; right: 6px; width: 24px; height: 24px; transform: rotate(45deg); cursor: nwse-resize; }
body.is-admin-preview .resize-handle { display: flex; }
body.is-admin-preview .card:hover .resize-handle,
.card__media.is-resizing .resize-handle {
  opacity: 1;
}
.resize-handle:hover { background: var(--accent); border-color: var(--accent); }

/* Liseré orange : juste un repère pendant le glissé, tant qu'on est dans la
   petite zone d'aimantation d'une taille repère. En dehors, il disparaît et
   la carte prend la taille exacte de la souris, sans contrainte. */
.card.is-size-snapped { outline: 2px dashed var(--accent); outline-offset: 2px; }
.photo__edit:hover { background: var(--accent-hi); }

.photo--empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  aspect-ratio: 4 / 5;
  border: 1px dashed rgba(255,255,255,.22);
  color: var(--muted);
}
.photo--empty:hover { border-color: rgba(224,122,52,.65); }
.photo__empty-plus { font-size: 30px; line-height: 1; font-weight: 300; }
.photo__empty-label { font-size: 12px; letter-spacing: .04em; }
body.is-admin-preview .photo--empty::before { content: none; }

.imodal {
  position: fixed; inset: 0; z-index: 400;
  display: none; align-items: center; justify-content: center;
  padding: 24px;
  opacity: 0; transition: opacity .25s var(--ease);
}
.imodal.is-open { display: flex; }
.imodal.is-visible { opacity: 1; }
.imodal__backdrop { position: absolute; inset: 0; background: rgba(5,5,6,.72); backdrop-filter: blur(6px); }
.imodal__panel {
  position: relative; width: 100%; max-width: 560px; max-height: 88vh; overflow: auto;
  background: #141416; border: 1px solid rgba(255,255,255,.12); border-radius: 18px;
  box-shadow: 0 40px 100px -30px rgba(0,0,0,.9);
  padding: 30px;
  transform: translateY(10px); transition: transform .25s var(--ease);
}
.imodal.is-visible .imodal__panel { transform: translateY(0); }
.imodal__close {
  position: absolute; top: 16px; right: 16px;
  width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center; font-size: 20px; line-height: 1;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); color: #fff;
}
.imodal__close:hover { background: rgba(255,255,255,.12); }

.ipreview-toggle {
  position: fixed; z-index: 300; top: 18px; right: 18px;
  padding: 12px 22px; border-radius: 999px; border: 1px solid rgba(255,255,255,.16);
  background: #141416; color: #fff; font-size: 13.5px; font-weight: 600; letter-spacing: .01em;
  cursor: pointer; box-shadow: 0 16px 40px -14px rgba(0,0,0,.8);
  transition: background .2s var(--ease), border-color .2s var(--ease);
}
.ipreview-toggle:hover { background: #1c1c1f; }
.ipreview-toggle.is-public { background: var(--accent); border-color: var(--accent); }
.ipreview-toggle.is-public:hover { background: var(--accent-hi); }

.iform h2 { font-family: var(--font-display); font-size: 19px; margin: 0 0 18px; padding-right: 30px; }
.iform label { display: block; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: 14px; }
.iform input, .iform textarea, .iform select {
  display: block; width: 100%; margin-top: 6px; padding: 11px 13px;
  background: #1c1c1f; color: var(--text);
  border: 1px solid rgba(255,255,255,.12); border-radius: 9px;
  font: inherit; font-size: 14.5px; text-transform: none; letter-spacing: normal;
}
.iform input:focus, .iform textarea:focus, .iform select:focus { outline: none; border-color: var(--accent-text); }
.iform input[type="file"] { display: none; }
.igrid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
@media (max-width: 480px) { .igrid { grid-template-columns: 1fr; } }
.iupload {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
  margin: -4px 0 16px; padding: 8px; border-radius: 10px;
  border: 1px dashed transparent; transition: border-color .2s var(--ease), background .2s var(--ease);
}
.iupload.is-drag { border-color: var(--accent); background: rgba(224,122,52,.08); }
.idrop-hint { font-size: 11.5px; color: var(--muted); }
.iai-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: -4px 0 16px; }

.ipaste {
  display: flex; align-items: center; gap: 12px;
  margin: -4px 0 16px; padding: 12px; border-radius: 10px;
  border: 1px dashed var(--line-strong); cursor: text;
  transition: border-color .2s var(--ease), background .2s var(--ease);
}
.ipaste:focus { outline: none; border-color: var(--accent); background: rgba(224,122,52,.06); }
.ipaste__preview { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; flex: none; }
.ipaste__preview[hidden] { display: none; }
.ipaste [data-paste-hint] { font-size: 13px; color: var(--muted); }

.iaddr-row { display: flex; align-items: flex-start; gap: 14px; }
.iaddr-row label { flex: 1 1 auto; min-width: 0; }
.iaddr-row .iupload {
  flex: none; flex-direction: column; align-items: flex-start; gap: 6px;
  margin: 17px 0 16px 0; padding: 8px;
}
@media (max-width: 560px) { .iaddr-row { flex-direction: column; } }
.iframepicker { margin: -4px 0 16px; padding: 14px; border: 1px solid rgba(255,255,255,.14); border-radius: 12px; background: rgba(255,255,255,.03); }
.iframepicker video { width: 100%; border-radius: 8px; background: #000; margin-bottom: 10px; }
.iframepicker input[type="range"] { width: 100%; margin: 0 0 12px; accent-color: var(--accent); }
.ibtn {
  padding: 10px 16px; border-radius: 9px; border: 1px solid rgba(255,255,255,.16);
  background: none; color: var(--text); font-size: 13.5px; cursor: pointer;
}
.ibtn--ghost:hover { background: rgba(255,255,255,.06); }
.ibtn--primary { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }
.ibtn--primary:hover { background: var(--accent-hi); }
.ibtn--danger { margin-left: auto; border-color: rgba(255,107,107,.4); color: #ff6b6b; }
.ibtn--danger:hover { background: rgba(255,107,107,.12); border-color: #ff6b6b; }
.iupstate { font-size: 12.5px; color: var(--muted); }
.iupstate.is-ok { color: #3ecf8e; }
.iupstate.is-err { color: #ff6b6b; }
.iactions {
  display: flex; gap: 10px; margin-top: 6px;
  position: sticky; bottom: -30px; z-index: 3;
  padding: 14px 0; margin-left: -30px; margin-right: -30px; padding-left: 30px; padding-right: 30px;
  background: linear-gradient(#141416 40%, #141416);
  box-shadow: 0 -12px 20px -8px rgba(0,0,0,.5);
}

.itoast {
  position: fixed; left: 50%; bottom: 26px; transform: translate(-50%, 20px);
  z-index: 410;
  padding: 13px 22px; border-radius: 11px; background: #1c1c1f;
  border: 1px solid rgba(255,255,255,.16); font-size: 14px; color: #fff;
  opacity: 0; pointer-events: none; transition: opacity .25s, transform .25s;
}
.itoast.is-on { opacity: 1; transform: translate(-50%, 0); }
.itoast.is-ok { border-color: rgba(62,207,142,.5); }
.itoast.is-err { border-color: rgba(255,107,107,.5); }

/* Cases à cocher catégories (admin + édition inline) */
.icheckgrid, .agrid + .icheckgrid { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.clientpicker { margin-bottom: 14px; }
.clientpicker select { width: 100%; margin-bottom: 8px; }

.tagpicker, .catpicker { margin-bottom: 14px; }
.tagpicker select, .catpicker select { width: 100%; }
.tagpicker__chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.tagpicker__chips:empty { display: none; }
.tagchip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 6px 5px 12px; border-radius: 999px;
  background: rgba(224,122,52,.14); border: 1px solid rgba(224,122,52,.35);
  color: var(--text); font-size: 12.5px;
}
.tagchip button {
  display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%;
  background: rgba(255,255,255,.08); color: var(--text); font-size: 13px; line-height: 1; cursor: pointer;
}
.tagchip button:hover { background: rgba(255,107,107,.3); }

.iplaces {
  position: absolute; z-index: 20; left: 0; right: 0; top: 100%; margin-top: 4px;
  background: #1a1a1c; border: 1px solid rgba(255,255,255,.14); border-radius: 10px;
  overflow: hidden; box-shadow: 0 20px 50px -18px rgba(0,0,0,.9);
}
.iplaces button {
  display: block; width: 100%; text-align: left; padding: 10px 14px;
  background: none; color: var(--text); font-size: 13px; border: none;
  border-bottom: 1px solid rgba(255,255,255,.06); cursor: pointer;
}
.iplaces button:last-child { border-bottom: none; }
.iplaces button:hover { background: rgba(224,122,52,.14); }
.icheck {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 13px; border-radius: 999px;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12);
  font-size: 13px; color: var(--muted); cursor: pointer; margin: 0; text-transform: none; letter-spacing: normal;
  transition: background .2s, border-color .2s, color .2s;
}
.icheck input { width: auto; margin: 0; }
.icheck:has(input:checked) { background: rgba(224,122,52,.18); border-color: rgba(224,122,52,.5); color: #fff; }

/* ---------- Bloc vide « Ajouter » (édition inline, local uniquement) ---------- */
.addtile {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; width: 100%; min-height: 220px;
  border-radius: var(--radius);
  border: 2px dashed rgba(255,255,255,.16);
  background: rgba(255,255,255,.02);
  color: var(--muted); font-size: 13.5px; font-weight: 500;
  cursor: pointer;
  transition: border-color .2s var(--ease), background .2s var(--ease), color .2s var(--ease);
}
.addtile:hover { border-color: rgba(224,122,52,.6); background: rgba(224,122,52,.06); color: var(--text); }
.addtile__plus {
  width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center;
  border: 2px dashed rgba(255,255,255,.2);
  font-size: 22px; line-height: 1;
  transition: border-color .2s var(--ease), transform .2s var(--ease);
}
.addtile:hover .addtile__plus { border-color: var(--accent-text); transform: rotate(90deg); }
body:not(.is-admin-preview) .addtile,
body:not(.is-admin-preview) .photo--empty { display: none; }

.grid-actions { display: flex; gap: 10px; margin-top: 22px; }
body:not(.is-admin-preview) .grid-actions { display: none; }

/* ---------- Ajout de catégorie à la volée (édition inline + admin) ---------- */
.icheck-add { display: flex; gap: 8px; margin: 4px 0 16px; }
.icheck-add input {
  flex: 1; padding: 9px 13px; border-radius: 999px;
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.12);
  color: var(--text); font-size: 13px;
}
.icheck-add input:focus { outline: none; border-color: var(--accent-text); }
.icheck-add button { flex: none; border-radius: 999px; font-size: 12.5px; padding: 9px 16px; }