/* ==========================================================================
   PRISME STUDIOS — feuille de style
   Charte PRISME 2026 :
   - couleurs : principale #0D0E95, secondaire #008AE6, tertiaire #000000,
     complémentaires #023ABA, #02043E, #0057C7, blanc ;
   - dégradé primaire (mode sombre) : noir → bleu principal, lumière bleu secondaire ;
   - titres : Ostra Centra Regular (remplacée par League Spartan Regular tant que
     les fichiers web ne sont pas fournis) ; sous-titres, annotations et boutons :
     League Spartan ExtraBold ; textes : Arial Unicode MS Regular.
   Fonds : alternance noir / bleu nuit ; dégradés réservés aux zones fortes
   (premier écran et appel à l'action).
   ========================================================================== */

/* ---------- Polices (League Spartan, licence SIL OFL, voir /fonts) ---------- */
@font-face { font-family: "League Spartan"; src: url("/fonts/LeagueSpartan-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "League Spartan"; src: url("/fonts/LeagueSpartan-ExtraBold.woff2") format("woff2"); font-weight: 800; font-style: normal; font-display: swap; }

:root {
  color-scheme: dark;

  /* Couleurs de la charte */
  --prisme: #0D0E95;      /* principale */
  --azur: #008AE6;        /* secondaire */
  --noir: #000000;        /* tertiaire */
  --cobalt: #023ABA;      /* complémentaire 1 */
  --nuit: #02043E;        /* complémentaire 2 */
  --roi: #0057C7;         /* complémentaire 3 */
  --blanc: #FFFFFF;

  /* Dégradé primaire de la charte (mode sombre) */
  --degrade-principal:
    radial-gradient(75% 85% at 0% 105%, rgba(0, 138, 230, 0.95) 0%, rgba(0, 138, 230, 0) 62%),
    radial-gradient(90% 95% at 100% 110%, rgba(13, 14, 149, 1) 0%, rgba(13, 14, 149, 0) 72%),
    linear-gradient(180deg, var(--noir) 35%, #03052a 100%);

  /* Dérivés */
  --texte: var(--blanc);
  --texte-doux: rgba(255, 255, 255, 0.78);
  --texte-discret: rgba(255, 255, 255, 0.64);
  --ligne: rgba(255, 255, 255, 0.16);
  --ligne-forte: rgba(255, 255, 255, 0.36);
  --surface: rgba(255, 255, 255, 0.045);
  --erreur: #FF9E9E;
  --succes: #8FE3B0;
  --provisoire: #FFD166;

  /* Typographie */
  --f-titre: "Ostra Centra", "League Spartan", "Arial Unicode MS", Arial, sans-serif;
  --f-sous-titre: "League Spartan", "Arial Unicode MS", Arial, sans-serif;
  --f-texte: "Arial Unicode MS", Arial, "Helvetica Neue", Helvetica, sans-serif;
  --w-titre: 400; /* Ostra Centra Regular */

  /* Échelle */
  --t-0: 0.875rem;
  --t-1: 1.0625rem;
  --t-2: 1.25rem;
  --t-3: 1.6rem;
  --t-4: clamp(1.6rem, 1.25rem + 1.4vw, 2.2rem);   /* titres d'expertise */
  --t-5: clamp(1.9rem, 1.35rem + 2.2vw, 3rem);     /* titres de section */
  --t-6: clamp(2.3rem, 1.5rem + 3.2vw, 4rem);      /* titres de page */
  --t-hero: clamp(2.1rem, 1.3rem + 2.9vw, 3.6rem);

  /* Espacements */
  --gutter: clamp(1rem, 0.5rem + 2.5vw, 2.5rem);
  --section: clamp(4rem, 2.6rem + 5vw, 7rem);
  --max: 88rem;
  --header-h: 5rem;
  --logo-h: 3rem;   /* 48 px de haut = 156 px de large : au-dessus du minimum de 150 px de la charte */
  --radius: 1.25rem;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 1rem); }
body {
  text-wrap: pretty;
  margin: 0;
  background: var(--nuit);
  color: var(--texte);
  font-family: var(--f-texte);
  font-size: var(--t-1);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
img, picture, video, iframe { display: block; max-width: 100%; }
img { height: auto; }
h1, h2, h3, h4 { margin: 0; font-weight: inherit; }
p, ul, ol, dl, figure { margin: 0; }
ul[class], ol[class], nav ul, footer ul { list-style: none; padding: 0; margin: 0; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
a:hover { color: var(--azur); }
button { font: inherit; color: inherit; }
main:focus { outline: none; }
::selection { background: var(--azur); color: var(--noir); }

:focus-visible { outline: 3px solid var(--azur); outline-offset: 3px; border-radius: 2px; }

.container { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }
.narrow { max-width: 46rem; }
.muted { color: var(--texte-discret); }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: 1rem; top: -4rem; z-index: 100;
  background: var(--blanc); color: var(--noir); padding: 0.75rem 1.25rem; border-radius: 999px;
  font-family: var(--f-sous-titre); font-weight: 800; text-decoration: none;
}
.skip-link:focus { top: 1rem; }

/* ---------- Fonds alternés ---------- */
.band--noir { background: var(--noir); }
.band--nuit { background: var(--nuit); }
.band--degrade { background: var(--degrade-principal); background-color: var(--noir); }
.band { padding-block: var(--section); }
.band--head { padding-bottom: clamp(1.5rem, 3vw, 2.5rem); }
.band--head + .band { padding-top: clamp(2.5rem, 5vw, 4rem); }

/* ---------- Titres ---------- */
.section__head {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 1rem 2rem;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}
.section__title {
  font-family: var(--f-titre); font-weight: var(--w-titre);
  font-size: var(--t-5); line-height: 1.08; letter-spacing: -0.02em;
  max-width: 28ch; text-wrap: balance;
}
.section__title--spaced { margin-bottom: clamp(2rem, 4vw, 3rem); }

/* ---------- Boutons et liens (pilules, charte) ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem;
  min-height: 3rem; padding: 0.85rem 1.6rem 0.75rem;
  border: 1.5px solid transparent; border-radius: 999px;
  font-family: var(--f-sous-titre); font-weight: 800; font-size: 1rem; line-height: 1; letter-spacing: 0.01em;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background-color 0.25s var(--ease), color 0.25s var(--ease), border-color 0.25s var(--ease);
}
.btn--primary { background: var(--prisme); border-color: var(--azur); color: var(--blanc); }
.btn--primary:hover { background: var(--azur); border-color: var(--azur); color: var(--noir); }
.btn--ghost { border-color: var(--ligne-forte); color: var(--blanc); }
.btn--ghost:hover { border-color: var(--blanc); color: var(--blanc); background: rgba(255, 255, 255, 0.08); }
.btn--small { min-height: 2.5rem; padding: 0.6rem 1.2rem 0.5rem; font-size: 0.95rem; border-color: var(--ligne-forte); }
.btn--small:hover, .btn--small[aria-current="page"] { border-color: var(--azur); color: var(--blanc); background: var(--prisme); }
.btn[disabled] { opacity: 0.6; cursor: progress; }

.actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }
@media (max-width: 39.99em) {
  /* Boutons empilés : même largeur, espacement régulier */
  .actions { display: grid; grid-template-columns: 1fr; width: 100%; }
}

.link-more {
  font-family: var(--f-sous-titre); font-weight: 800; font-size: 1rem;
  color: var(--blanc); text-decoration: none;
  padding-bottom: 0.2rem; border-bottom: 2px solid var(--azur);
}
.link-more:hover { color: var(--azur); }

/* Mentions provisoires (à faire disparaître avant la mise en ligne) */
.todo {
  display: inline; padding: 0.05em 0.35em; border: 1px dashed var(--provisoire);
  color: var(--provisoire); font-size: 0.92em; box-decoration-break: clone; -webkit-box-decoration-break: clone;
}
.notice { margin-block: 1.5rem; padding: 1rem 1.25rem; border: 1px dashed var(--provisoire); border-radius: 0.75rem; color: var(--provisoire); }
.badge-example {
  position: absolute; top: 0.75rem; left: 0.75rem; z-index: 2;
  padding: 0.35rem 0.75rem 0.25rem; background: rgba(0, 0, 0, 0.82);
  border: 1px dashed var(--provisoire); border-radius: 999px; color: var(--provisoire);
  font-family: var(--f-sous-titre); font-weight: 800; font-size: 0.8rem; pointer-events: none;
}

/* ---------- En-tête ---------- */
.site-header {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50;
  background: var(--noir);
  transition: background-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.site-header[data-scrolled] { background: rgba(0, 0, 0, 0.9); box-shadow: 0 1px 0 var(--ligne); }
@supports (backdrop-filter: blur(1px)) {
  .site-header[data-scrolled] { background: rgba(0, 0, 0, 0.74); backdrop-filter: blur(14px) saturate(1.2); }
}
.site-header__inner {
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter);
  min-height: var(--header-h);
}

.brand { display: inline-flex; align-items: center; flex-shrink: 0; color: var(--blanc); text-decoration: none; padding-block: 0.5rem; }
.brand:hover { color: var(--blanc); }
/* Logo : proportions conservées (largeur automatique), jamais sous 150 px de large */
.brand__logo { height: var(--logo-h); width: auto; min-width: 150px; }
.brand--footer .brand__logo { height: 3.75rem; }
.brand__word {
  display: inline-flex; align-items: baseline; gap: 0.4em;
  font-family: var(--f-sous-titre); font-weight: 800; font-size: 1.2rem; letter-spacing: 0.16em; line-height: 1;
}
.brand__studios { font-weight: 400; letter-spacing: 0.24em; }

.site-nav ul { display: flex; align-items: center; gap: clamp(1rem, 2.4vw, 2.25rem); }
.site-nav a:not(.btn) {
  font-family: var(--f-sous-titre); font-weight: 800; font-size: 1rem; text-decoration: none;
  padding-block: 0.6rem; border-bottom: 2px solid transparent;
}
.site-nav a:not(.btn)[aria-current="page"] { border-bottom-color: var(--azur); }

.nav-toggle {
  display: none; align-items: center; gap: 0.6rem;
  min-height: 2.75rem; padding: 0.5rem 0.25rem 0.5rem 0.75rem;
  background: none; border: 0; cursor: pointer;
  font-family: var(--f-sous-titre); font-weight: 800;
}
.nav-toggle__bars, .nav-toggle__bars::before, .nav-toggle__bars::after {
  display: block; width: 1.4rem; height: 2px; background: currentColor; transition: transform 0.25s var(--ease), opacity 0.2s;
}
.nav-toggle__bars { position: relative; }
.nav-toggle__bars::before, .nav-toggle__bars::after { content: ""; position: absolute; left: 0; }
.nav-toggle__bars::before { top: -6px; }
.nav-toggle__bars::after { top: 6px; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 55.99em) {
  :root { --header-h: 4.5rem; }
  .js .nav-toggle { display: inline-flex; }
  .js .site-nav {
    position: fixed; inset: calc(var(--header-h) + env(safe-area-inset-top, 0px)) 0 0 0; z-index: 49;
    background: var(--degrade-principal); background-color: var(--noir);
    padding: 2.5rem var(--gutter) calc(2rem + env(safe-area-inset-bottom, 0px));
    overflow-y: auto;
    visibility: hidden; opacity: 0; transform: translateY(-0.5rem);
    transition: opacity 0.25s var(--ease), transform 0.25s var(--ease), visibility 0s linear 0.25s;
  }
  .js .site-nav[data-open] { visibility: visible; opacity: 1; transform: none; transition-delay: 0s; }
  .js .site-nav ul { flex-direction: column; align-items: flex-start; gap: 0.25rem; }
  .js .site-nav a:not(.btn) { font-family: var(--f-titre); font-weight: var(--w-titre); font-size: 2.2rem; line-height: 1.25; letter-spacing: -0.02em; }
  .js .site-nav li:last-child { margin-top: 1.5rem; }
  .js .site-nav .btn--small { min-height: 3rem; font-size: 1.05rem; padding-inline: 1.6rem; }
  html:not(.js) .site-header__inner { flex-wrap: wrap; padding-block: 0.5rem; }
  html:not(.js) .site-nav ul { flex-wrap: wrap; gap: 0.5rem 1.25rem; }
  body[data-menu-open] { overflow: hidden; }
}

/* ---------- Accueil : premier écran ---------- */
.hero { padding-bottom: clamp(2.5rem, 5vw, 4.5rem); }
.hero__frame {
  position: relative; width: 100%;
  aspect-ratio: 2.39 / 1;
  /* Laisse la place au titre et aux boutons dans le premier écran */
  max-height: calc(100svh - var(--header-h) - 18rem); min-height: 15rem;
  background: var(--noir); overflow: hidden;
}
.hero__frame::after { /* ligne de lumière sous le cadre */
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; z-index: 3; pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--prisme) 18%, var(--azur) 52%, rgba(255, 255, 255, 0.85) 70%, transparent);
}
.hero__frame .player { position: absolute; inset: 0; }
.hero__frame[data-playing] { aspect-ratio: 16 / 9; max-height: none; }
.hero__pending {
  position: absolute; right: var(--gutter); bottom: 1rem; z-index: 2;
  font-family: var(--f-sous-titre); font-weight: 800; font-size: 0.95rem; color: var(--texte-doux);
}


.hero__text {
  display: grid; gap: 1.25rem 3rem;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: end;
  padding-top: clamp(1.25rem, 2.5vw, 2rem);
}
.hero__title {
  font-family: var(--f-titre); font-weight: var(--w-titre);
  font-size: var(--t-hero); line-height: 1.04; letter-spacing: -0.025em;
  max-width: 18ch; text-wrap: balance;
}
.hero__aside { display: grid; gap: 1.25rem; }
.hero__intro { color: var(--texte-doux); max-width: 44ch; font-size: 1rem; }

@media (max-width: 55.99em) {
  .hero__text { grid-template-columns: 1fr; }
}
@media (max-width: 39.99em) {
  .hero__frame { aspect-ratio: 4 / 3; max-height: 40svh; min-height: 11rem; }
  .hero__frame[data-playing] { aspect-ratio: 16 / 9; max-height: none; }
  .hero__intro { font-size: 0.95rem; }
  /* Sur mobile, les boutons suivent directement le titre */
  .hero__aside { display: flex; flex-direction: column; gap: 1.25rem; }
  .hero .actions { order: -1; display: grid; grid-template-columns: 1fr; }
}

/* ---------- Intro de l'accueil (signature PRISME) ----------
   Unique séquence d'entrée, 1,6 s au total, une fois par session (#intro pour la revoir).
   0,00–0,58 s : trois masques diagonaux (60°, angle du symbole) révèlent le symbole.
   0,42–0,82 s : révélation horizontale nette du logotype « Prisme. ».
   0,80–1,20 s : une fine lumière bleue souligne l'ensemble.
   1,12–1,60 s : le fond noir s'ouvre par une découpe diagonale sur l'accueil.
   Seuls des masques (clip-path) et des transformations sont animés : aucun fondu
   comme effet principal, aucune déformation du logo.
   Masquée sans JavaScript (classe « has-intro » absente) et si l'utilisateur
   demande moins d'animations. Clic ou Échap : passage immédiat. */
.intro { display: none; }
html.has-intro .intro {
  display: grid; place-items: center;
  position: fixed; inset: 0; z-index: 300;
  background: var(--noir); cursor: pointer;
  clip-path: polygon(-30% 0, 130% 0, 130% 100%, 0% 100%);
  animation: intro-open 0.48s cubic-bezier(0.7, 0, 0.25, 1) 1.12s forwards;
}
html.intro-done .intro { display: none !important; }
.intro__stage {
  position: relative;
  /* Repère du logo principal : 1348,33 × 414,94 (symbole + logotype) */
  width: min(72vw, 30rem); min-width: 150px; aspect-ratio: 1348.33 / 414.94;
}
.intro__symbol, .intro__type { position: absolute; }
.intro__symbol svg, .intro__type svg { display: block; width: 100%; height: 100%; }

/* Symbole : trois bandes diagonales qui se déploient l'une après l'autre.
   Côté oblique : décalage horizontal de 45 % de la largeur sur toute la hauteur (pente de 60°). */
.intro__symbol { left: 0; top: 0; width: 39.4163%; height: 100%; }
.intro__symbol--1 {
  clip-path: polygon(0% 0, 0% 0, -45% 100%, -45% 100%);
  animation: intro-band-1 0.36s cubic-bezier(0.7, 0, 0.2, 1) 0.02s forwards;
}
.intro__symbol--2 {
  clip-path: polygon(65% 0, 65% 0, 20% 100%, 20% 100%);
  animation: intro-band-2 0.36s cubic-bezier(0.7, 0, 0.2, 1) 0.12s forwards;
}
.intro__symbol--3 {
  clip-path: polygon(100% 0, 100% 0, 55% 100%, 55% 100%);
  animation: intro-band-3 0.36s cubic-bezier(0.7, 0, 0.2, 1) 0.22s forwards;
}
@keyframes intro-band-1 { to { clip-path: polygon(0% 0, 70% 0, 25% 100%, -45% 100%); } }
@keyframes intro-band-2 { to { clip-path: polygon(65% 0, 105% 0, 60% 100%, 20% 100%); } }
/* La dernière bande couvre tout le symbole : aucune jointure visible à la fin */
@keyframes intro-band-3 { to { clip-path: polygon(-45% 0, 145% 0, 100% 100%, -90% 100%); } }

/* Logotype : révélation horizontale nette, légèrement après le symbole */
.intro__type {
  left: 46.2201%; top: 29.9321%; width: 53.7799%; height: 54.2054%;
  clip-path: inset(0 100% 0 0);
  animation: intro-type 0.4s cubic-bezier(0.65, 0, 0.25, 1) 0.42s forwards;
}
@keyframes intro-type { to { clip-path: inset(0 0 0 0); } }

/* Fine lumière bleue qui souligne l'ensemble */
.intro__line {
  position: absolute; left: 0; right: 0; top: calc(100% + 0.9rem); height: 1px;
  background: linear-gradient(90deg, rgba(0, 138, 230, 0), var(--azur) 20%, #ffffff 55%, var(--azur) 85%, rgba(0, 138, 230, 0));
  box-shadow: 0 0 12px 1px rgba(0, 138, 230, 0.9);
  transform: scaleX(0); transform-origin: left center;
  animation: intro-line 0.4s cubic-bezier(0.6, 0, 0.3, 1) 0.8s forwards;
}
@keyframes intro-line {
  0% { transform: scaleX(0); opacity: 1; }
  65% { transform: scaleX(1); opacity: 1; }
  100% { transform: scaleX(1); opacity: 0; }
}

/* Le fond s'ouvre : bord diagonal qui balaie l'écran de gauche à droite */
@keyframes intro-open {
  to { clip-path: polygon(100% 0, 130% 0, 130% 100%, 130% 100%); visibility: hidden; }
}
@media (prefers-reduced-motion: reduce) {
  html.has-intro .intro { display: none !important; }
}

/* ---------- Lecteur vidéo différé ---------- */
.player { position: relative; background: var(--noir); overflow: hidden; }
.player__poster, .player__poster img { width: 100%; height: 100%; }
.player__poster img { object-fit: cover; }
.player::before { /* voile pour la lisibilité du bouton */
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 45%, rgba(0, 0, 0, 0.55));
}
.player--empty::before { display: none; }
.player__play {
  position: absolute; left: var(--gutter); bottom: clamp(1rem, 3vw, 2rem); z-index: 2;
  display: inline-flex; align-items: center; gap: 0.9rem;
  color: var(--blanc); text-decoration: none;
  font-family: var(--f-sous-titre); font-weight: 800; font-size: 1.05rem;
}
.player__play:hover { color: var(--blanc); }
.player__icon {
  width: 3.75rem; height: 3.75rem; border-radius: 50%;
  border: 1.5px solid var(--azur);
  display: grid; place-items: center;
  background: var(--prisme);
  transition: background-color 0.25s var(--ease);
}
.player__icon::before {
  content: ""; width: 0; height: 0; margin-left: 0.25rem;
  border-style: solid; border-width: 0.6rem 0 0.6rem 0.95rem; border-color: transparent transparent transparent currentColor;
}
.player__play:hover .player__icon { background: var(--azur); }
.player__note {
  position: absolute; right: var(--gutter); bottom: clamp(1rem, 3vw, 2rem); z-index: 2;
  font-size: var(--t-0); color: var(--texte-doux); max-width: 22ch; text-align: right;
}
.player iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; z-index: 3; background: var(--noir); }
@media (max-width: 39.99em) { .player__note { display: none; } }

/* ---------- Grilles de projets ---------- */
.project-grid { display: grid; gap: clamp(2.5rem, 4vw, 4rem) var(--gutter); }
.project-grid--editorial { grid-template-columns: repeat(12, minmax(0, 1fr)); grid-auto-flow: dense; }
.project-grid--editorial .project-card--large { grid-column: span 8; }
.project-grid--editorial .project-card--small { grid-column: span 4; }
.project-grid--editorial .project-card--medium { grid-column: span 6; }
@media (min-width: 56em) {
  /* Même hauteur d'image pour les grands et petits formats d'une même rangée */
  .project-grid--editorial .project-card--large .project-card__media,
  .project-grid--editorial .project-card--small .project-card__media { aspect-ratio: auto; height: clamp(20rem, 32vw, 34rem); }
}
.project-grid--portfolio { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 55.99em) {
  .project-grid--editorial .project-card--large { grid-column: span 12; }
  .project-grid--editorial .project-card--small, .project-grid--editorial .project-card--medium { grid-column: span 6; }
}
@media (max-width: 39.99em) {
  .project-grid--editorial .project-card { grid-column: span 12 !important; }
  .project-grid--portfolio { grid-template-columns: 1fr; }
}

.project-card { position: relative; }
.project-card__link { display: block; text-decoration: none; color: var(--blanc); }
.project-card__link:hover { color: var(--blanc); }
.project-card__media { display: block; overflow: hidden; background: var(--noir); aspect-ratio: 16 / 10; }
.project-card--large .project-card__media { aspect-ratio: 16 / 9; }
.project-card--small .project-card__media { aspect-ratio: 8 / 9; }
.project-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease), filter 0.6s var(--ease); }
.project-card__link:hover .project-card__media img { transform: scale(1.025); filter: brightness(1.08); }
.project-card__text { padding-top: 1rem; }
.project-card__title {
  font-family: var(--f-sous-titre); font-weight: 800; font-size: var(--t-2); line-height: 1.2; text-wrap: balance;
  transition: color 0.25s var(--ease);
}
.project-card__link:hover .project-card__title { color: var(--azur); }
.project-card__link:focus-visible { outline-offset: 6px; }
.project-card__meta { display: flex; flex-wrap: wrap; gap: 0 0.75rem; margin-top: 0.35rem; color: var(--texte-discret); font-size: var(--t-0); }
.project-card__meta span + span { padding-left: 0.75rem; border-left: 1px solid var(--ligne-forte); }

/* ---------- Expertises (accueil) ---------- */
.expertise-list { border-top: 1px solid var(--ligne); }
.expertise-row { border-bottom: 1px solid var(--ligne); }
.expertise-row__link {
  display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 6fr); gap: 0.5rem 2rem; align-items: baseline;
  padding: clamp(1.4rem, 2.6vw, 2rem) 0.5rem; text-decoration: none; color: var(--blanc);
  transition: background-color 0.35s var(--ease);
}
.expertise-row__link:hover { color: var(--blanc); background-color: rgba(13, 14, 149, 0.45); }
.expertise-row__link:hover .expertise-row__title { color: var(--blanc); }
.expertise-row__title { font-family: var(--f-titre); font-weight: var(--w-titre); font-size: var(--t-4); line-height: 1.1; letter-spacing: -0.015em; }
.expertise-row__need { color: var(--texte-doux); max-width: 52ch; }
@media (max-width: 47.99em) { .expertise-row__link { grid-template-columns: 1fr; } }

/* ---------- Présentation (accueil) ---------- */
/* Portrait et texte côte à côte dès que la largeur le permet ; disposition verticale sur mobile. */
.presentation {
  display: grid; grid-template-columns: clamp(14rem, 26vw, 22rem) minmax(0, 44rem);
  gap: 2rem clamp(2rem, 4.5vw, 4rem); align-items: center;
}
.presentation__portrait img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.presentation__text { display: grid; gap: 1.25rem; justify-items: start; }
.presentation__text p { color: var(--texte-doux); }
.presentation__text .section__title { margin-bottom: 0.25rem; }
@media (max-width: 39.99em) {
  .presentation { grid-template-columns: 1fr; }
  .presentation__visual { max-width: 16rem; }
}

/* ---------- Fond animé : lumière diffusée à travers un prisme ----------
   Section de présentation (accueil) et bandeau de contact.
   Halos bleu profond / bleu lumineux / cobalt de la charte qui se croisent, et un faisceau
   diagonal qui traverse la zone. Cycles de 10 à 14 s décalés, en aller-retour (aucun saut),
   démarrés en cours de mouvement (délais négatifs) pour être perceptibles immédiatement.
   Seule la propriété transform est animée. Un voile sombre placé sous les textes
   garantit leur contraste. Bouton de pause (tous les fonds), pause hors écran,
   effet simplifié sur mobile, dégradé fixe si l'utilisateur demande moins d'animations. */
.has-ambient { position: relative; isolation: isolate; overflow: hidden; }
.ambient { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.ambient__halo, .ambient__ray { position: absolute; will-change: transform; }
.ambient__halo { border-radius: 50%; }

/* Bleu profond (principal #0D0E95) : traverse de gauche à droite */
.ambient__halo--profond {
  width: 72vmax; height: 72vmax; left: -34vmax; top: -22vmax;
  background: radial-gradient(closest-side, rgba(13, 14, 149, 0.95), rgba(13, 14, 149, 0.45) 45%, rgba(13, 14, 149, 0) 100%);
  animation: ambient-profond 13s cubic-bezier(0.45, 0, 0.55, 1) -4s infinite alternate;
}
/* Bleu lumineux (secondaire #008AE6) : traverse de droite à gauche et croise le bleu profond */
.ambient__halo--lumineux {
  width: 52vmax; height: 52vmax; right: -22vmax; bottom: -30vmax;
  background: radial-gradient(closest-side, rgba(0, 138, 230, 0.72), rgba(0, 138, 230, 0.28) 45%, rgba(0, 138, 230, 0) 100%);
  animation: ambient-lumineux 11s cubic-bezier(0.45, 0, 0.55, 1) -6s infinite alternate;
}
/* Diffusion cobalt (complémentaire #023ABA) */
.ambient__halo--diffus {
  width: 58vmax; height: 36vmax; left: 30%; top: -16vmax;
  background: radial-gradient(closest-side, rgba(2, 58, 186, 0.55), rgba(2, 58, 186, 0) 100%);
  animation: ambient-diffus 14s cubic-bezier(0.45, 0, 0.55, 1) -9s infinite alternate;
}
/* Faisceau diagonal, comme la lumière qui traverse un prisme */
.ambient__ray {
  top: -12%; bottom: -12%; left: -40%; width: 180%;
  background: linear-gradient(112deg,
    transparent 39%, rgba(0, 138, 230, 0.14) 44.5%, rgba(110, 195, 255, 0.30) 48.8%,
    rgba(225, 242, 255, 0.24) 50%, rgba(0, 138, 230, 0.26) 51.4%, rgba(13, 14, 149, 0.14) 55.5%, transparent 61%);
  animation: ambient-ray 12s cubic-bezier(0.45, 0, 0.55, 1) -2s infinite alternate;
}

@keyframes ambient-profond { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(58vw, 18vh, 0) scale(1.15); } }
@keyframes ambient-lumineux { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(-62vw, -26vh, 0) scale(1.2); } }
@keyframes ambient-diffus { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(-36vw, 24vh, 0) scale(0.85); } }
@keyframes ambient-ray { from { transform: translate3d(-28%, 0, 0); } to { transform: translate3d(22%, 0, 0); } }

/* Voile sombre sous les textes (au-dessus des halos, sous le contenu) */
.ambient::after { content: ""; position: absolute; inset: 0; }
.ambient--presentation::after {
  background: linear-gradient(90deg, rgba(2, 4, 62, 0) 28%, rgba(2, 4, 62, 0.72) 46%, rgba(2, 4, 62, 0.76) 100%);
}
.ambient--cta::after {
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.62) 0%, rgba(2, 4, 62, 0.5) 42%, rgba(2, 4, 62, 0) 75%);
}

/* Textes posés sur le fond animé : un ton plus clair que le texte courant, pour garder la marge de contraste */
.has-ambient .presentation__text p, .has-ambient .cta-band__text { color: #e3e5ee; }

/* Bandeau de contact : base noir → bleu nuit, lumière surtout en bas, comme le dégradé de la charte */
.cta-band { background: linear-gradient(180deg, var(--noir) 0%, var(--nuit) 100%); }
.ambient--cta .ambient__halo--profond { left: -20vmax; top: auto; bottom: -46vmax; }
.ambient--cta .ambient__halo--lumineux { right: -18vmax; bottom: -34vmax; }

/* Bouton de pause : discret, en bas à droite de chaque zone animée */
.ambient-toggle {
  position: absolute; right: var(--gutter); bottom: 1rem; z-index: 2;
  display: none; align-items: center; gap: 0.5rem;
  min-height: 2.25rem; padding: 0.4rem 0.8rem 0.35rem 0.6rem;
  border: 1px solid var(--ligne-forte); border-radius: 999px; background: rgba(0, 0, 0, 0.45);
  color: var(--texte-doux); cursor: pointer;
  font-family: var(--f-sous-titre); font-weight: 800; font-size: 0.78rem; line-height: 1;
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.js .ambient-toggle { display: inline-flex; }
.ambient-toggle:hover { color: var(--blanc); border-color: var(--blanc); }
.ambient-toggle__icon { position: relative; width: 0.7rem; height: 0.75rem; }
.ambient-toggle__icon::before, .ambient-toggle__icon::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 0.22rem; background: currentColor; border-radius: 1px;
}
.ambient-toggle__icon::before { left: 0.05rem; }
.ambient-toggle__icon::after { right: 0.05rem; }
.ambient-toggle[aria-pressed="true"] .ambient-toggle__icon::after { display: none; }
.ambient-toggle[aria-pressed="true"] .ambient-toggle__icon::before {
  left: 0.12rem; width: 0; background: none; border-radius: 0;
  border-style: solid; border-width: 0.375rem 0 0.375rem 0.6rem; border-color: transparent transparent transparent currentColor;
}

/* Pause : par le bouton (tous les fonds) ou hors de l'écran */
html[data-ambient-paused] .ambient__halo, html[data-ambient-paused] .ambient__ray,
[data-ambient][data-paused] .ambient__halo, [data-ambient][data-paused] .ambient__ray { animation-play-state: paused; }

/* Mobile : deux halos et le faisceau, amplitude adaptée ; voile sous tout le texte */
@media (max-width: 39.99em) {
  .ambient__halo--diffus { display: none; }
  .ambient--presentation::after { background: linear-gradient(180deg, rgba(2, 4, 62, 0.2) 0%, rgba(2, 4, 62, 0.62) 42%, rgba(2, 4, 62, 0.66) 100%); }
  .ambient--cta::after { background: rgba(2, 4, 62, 0.5); }
}

/* Moins d'animations : dégradé fixe, pas de bouton de pause */
@media (prefers-reduced-motion: reduce) {
  .ambient__halo, .ambient__ray { animation: none !important; }
  .js .ambient-toggle { display: none; }
}

/* ---------- Bandeau d'appel à l'action (zone forte : dégradé) ---------- */
.cta-band { border-top: 1px solid var(--ligne); }
.cta-band__inner { display: grid; gap: 1.25rem; justify-items: start; padding-block: clamp(4rem, 8vw, 6.5rem); }
.cta-band__title { font-family: var(--f-titre); font-weight: var(--w-titre); font-size: var(--t-5); line-height: 1.08; letter-spacing: -0.02em; max-width: 20ch; text-wrap: balance; }
.cta-band__text { color: var(--texte-doux); max-width: 44ch; }

/* ---------- Pied de page ---------- */
.site-footer { background: var(--noir); padding-block: clamp(3.5rem, 6vw, 5rem) 2rem; font-size: 0.95rem; }
.site-footer__grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1.4fr); gap: 2.5rem var(--gutter); }
.site-footer__brand { display: grid; gap: 0.75rem; justify-items: start; color: var(--texte-doux); }
.site-footer__brand .brand { padding: 0 0 0.75rem; }
.site-footer__nav ul, .site-footer__legal ul { display: grid; gap: 0.5rem; }
.site-footer__nav a, .site-footer__contact a, .site-footer__legal a { text-decoration: none; }
.site-footer__nav a:hover, .site-footer__contact a:hover, .site-footer__legal a:hover { text-decoration: underline; }
.site-footer__contact { display: grid; gap: 0.5rem; align-content: start; }
.site-footer__contact a { font-family: var(--f-sous-titre); font-weight: 800; font-size: 1.05rem; }
.site-footer__legal {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem;
  margin-top: 3rem; padding-top: 1.5rem; color: var(--texte-discret);
  background: linear-gradient(var(--ligne), var(--ligne)) no-repeat var(--gutter) 0 / calc(100% - 2 * var(--gutter)) 1px;
}
.site-footer__legal ul { grid-auto-flow: column; gap: 1.5rem; }
@media (max-width: 47.99em) {
  .site-footer__grid { grid-template-columns: 1fr 1fr; }
  .site-footer__brand, .site-footer__contact { grid-column: 1 / -1; }
  .site-footer__contact { order: -1; grid-row: 2; }
}

/* ---------- En-tête de page ---------- */
.page-header { padding-top: clamp(2.5rem, 6vw, 5rem); }
.page-header__title { font-family: var(--f-titre); font-weight: var(--w-titre); font-size: var(--t-6); line-height: 1.04; letter-spacing: -0.025em; max-width: 18ch; text-wrap: balance; }
.page-header__intro, .lead { margin-top: 1.1rem; font-size: var(--t-2); line-height: 1.5; color: var(--texte-doux); max-width: 48ch; text-wrap: pretty; }

/* Filtres (pilules) */
.filters { margin-top: clamp(1.75rem, 3vw, 2.5rem); }
.filters ul { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.filters__item {
  display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0.55rem 1.25rem 0.45rem;
  border: 1.5px solid var(--ligne-forte); border-radius: 999px;
  font-family: var(--f-sous-titre); font-weight: 800; text-decoration: none; color: var(--texte-doux);
}
.filters__item:hover { color: var(--blanc); border-color: var(--blanc); }
.filters__item[aria-current="page"] { color: var(--blanc); background: var(--prisme); border-color: var(--azur); }
.empty { padding-block: 3rem; color: var(--texte-doux); }

/* ---------- Page projet ---------- */
.project__header { padding-block: clamp(2.5rem, 5vw, 4rem) clamp(1.5rem, 3vw, 2.5rem); position: relative; }
.project__header .badge-example { position: static; display: inline-block; margin-top: 1.25rem; }
.project__back a { font-family: var(--f-sous-titre); font-weight: 800; color: var(--texte-doux); text-decoration: none; }
.project__back a::before { content: "‹"; margin-right: 0.5rem; }
.project__back a:hover { color: var(--azur); }
.project__title { margin-top: 1rem; font-family: var(--f-titre); font-weight: var(--w-titre); font-size: var(--t-6); line-height: 1.04; letter-spacing: -0.025em; max-width: 18ch; text-wrap: balance; }
.project__summary { margin-top: 1.1rem; font-size: var(--t-2); line-height: 1.5; color: var(--texte-doux); max-width: 46ch; }
.project__media { padding-bottom: clamp(1.5rem, 4vw, 3rem); }
.project__media > .player, .project__media > picture { max-width: calc(var(--max) - 2 * var(--gutter)); margin-inline: auto; aspect-ratio: 16 / 9; }
.project__cover img { width: 100%; height: 100%; object-fit: cover; }
.project__body { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: 3rem var(--gutter); padding-block: clamp(3rem, 6vw, 5rem); }
.project__main { display: grid; gap: 2.5rem; max-width: 42rem; }
.project__main h2, .project__facts-title {
  font-family: var(--f-sous-titre); font-weight: 800; font-size: var(--t-2); margin-bottom: 0.75rem;
}
.project__main p + p { margin-top: 1rem; }
.project__main p { color: var(--texte-doux); }
.project__facts { align-self: start; border-top: 1px solid var(--ligne-forte); padding-top: 1.25rem; display: grid; gap: 2rem; }
.project__facts dl { display: grid; gap: 1rem; }
.project__facts dt { font-size: var(--t-0); color: var(--texte-discret); }
.project__facts dd { margin: 0.15rem 0 0; font-family: var(--f-sous-titre); font-weight: 800; font-size: 1.1rem; }
@media (max-width: 55.99em) { .project__body { grid-template-columns: 1fr; } }

.prose { color: var(--texte-doux); }
.prose > * + * { margin-top: 1rem; }
.prose h2, .prose h3 { color: var(--blanc); font-family: var(--f-sous-titre); font-weight: 800; }
.prose a { color: var(--azur); }

.tick-list { display: grid; gap: 0.6rem; }
.tick-list li { position: relative; padding-left: 1.5rem; color: var(--texte-doux); }
.tick-list li::before { content: ""; position: absolute; left: 0; top: 0.7em; width: 0.75rem; height: 1.5px; background: var(--azur); }

/* Galerie */
.gallery__grid { columns: 2; column-gap: var(--gutter); }
.gallery__item { break-inside: avoid; margin-bottom: var(--gutter); }
.gallery__link { display: block; position: relative; cursor: zoom-in; background: var(--noir); }
.gallery__link img { width: 100%; transition: filter 0.4s var(--ease); }
.gallery__link:hover img { filter: brightness(1.08); }
.gallery__item figcaption { margin-top: 0.6rem; font-size: var(--t-0); color: var(--texte-discret); }
@media (max-width: 39.99em) { .gallery__grid { columns: 1; } }

/* Visionneuse */
.lightbox {
  width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0;
  background: rgba(0, 0, 0, 0.95); color: var(--blanc);
}
.lightbox::backdrop { background: rgba(0, 0, 0, 0.95); }
.lightbox__figure { position: absolute; inset: 3.5rem 4.5rem 4rem; display: grid; place-items: center; }
.lightbox__figure img { max-width: 100%; max-height: calc(100dvh - 8rem); width: auto; height: auto; object-fit: contain; }
.lightbox__caption { position: absolute; left: 0; right: 0; bottom: -3rem; text-align: center; font-size: var(--t-0); color: var(--texte-doux); }
.lightbox__btn {
  position: absolute; z-index: 2; display: grid; place-items: center;
  width: 3rem; height: 3rem; border: 1.5px solid var(--ligne-forte); border-radius: 50%; background: rgba(0, 0, 0, 0.6);
  color: var(--blanc); cursor: pointer; font-size: 1.5rem; line-height: 1;
}
.lightbox__btn:hover { border-color: var(--azur); background: var(--prisme); }
.lightbox__close { top: 0.75rem; right: 0.75rem; }
.lightbox__prev { left: 0.75rem; top: 50%; transform: translateY(-50%); }
.lightbox__next { right: 0.75rem; top: 50%; transform: translateY(-50%); }
.lightbox__count { position: absolute; top: 1.4rem; left: 1rem; font-family: var(--f-sous-titre); font-weight: 800; font-size: var(--t-0); color: var(--texte-doux); }
@media (max-width: 39.99em) {
  .lightbox__figure { inset: 3.5rem 0.5rem 4.5rem; }
  .lightbox__prev, .lightbox__next { top: auto; bottom: 0.75rem; transform: none; }
}

/* Navigation entre projets */
.project-nav { display: grid; grid-template-columns: 1fr 1fr; padding-block: clamp(2.5rem, 5vw, 4rem); }
.project-nav__link { display: grid; gap: 0.4rem; align-content: start; padding: 0.5rem 1rem 0.5rem 0; text-decoration: none; color: var(--blanc); }
.project-nav__link--next { text-align: right; padding: 0.5rem 0 0.5rem 1rem; border-left: 1px solid var(--ligne); }
.project-nav__hint { font-size: var(--t-0); color: var(--texte-discret); }
.project-nav__title { font-family: var(--f-titre); font-weight: var(--w-titre); font-size: var(--t-3); line-height: 1.15; text-wrap: balance; }
.project-nav__link:hover .project-nav__title { color: var(--azur); }

/* ---------- Expertises (page) ---------- */
.expertises { display: grid; padding-block: clamp(1rem, 2vw, 2rem) var(--section); }
.expertise {
  display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 1.5rem clamp(2rem, 5vw, 4.5rem);
  padding-block: clamp(2.5rem, 5vw, 4rem); border-top: 1px solid var(--ligne);
}
.expertise:first-child { border-top: 0; }
.expertise__aside { display: grid; gap: 1.5rem; align-content: start; }
.expertise__title { font-family: var(--f-titre); font-weight: var(--w-titre); font-size: var(--t-4); line-height: 1.1; letter-spacing: -0.015em; text-wrap: balance; }
.expertise__media img { aspect-ratio: 3 / 2; }
.expertise__body { display: grid; gap: 1rem; align-content: start; }
.expertise__lead { font-size: var(--t-2); line-height: 1.45; max-width: 44ch; }
.expertise__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; margin-top: 1rem; }
.expertise__cols p { color: var(--texte-doux); }
.expertise__label { font-family: var(--f-sous-titre); font-weight: 800; font-size: 1.05rem; margin-bottom: 0.9rem; }
@media (max-width: 55.99em) {
  .expertise { grid-template-columns: 1fr; }
  .expertise__media { max-width: 34rem; }
}
@media (max-width: 39.99em) { .expertise__cols { grid-template-columns: 1fr; } }

/* Images d'illustration (tournage, coulisses, réalisations) */
.media-figure { margin: 0; }
.media-figure img { width: 100%; height: auto; object-fit: cover; background: var(--noir); }
.media-figure figcaption { margin-top: 0.6rem; font-size: var(--t-0); color: var(--texte-discret); }
.media-figure--wide { margin-block: 2.5rem 0.5rem; }
.media-figure--wide img { aspect-ratio: 3 / 2; }
.media-figure--tall img { aspect-ratio: 4 / 5; }
.media-pair { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(0.75rem, 2vw, 1.25rem); margin-block: 2.5rem 0.5rem; }
.media-band .media-figure--band img { width: 100%; aspect-ratio: 21 / 9; max-height: 75vh; }
@media (max-width: 39.99em) { .media-band .media-figure--band img { aspect-ratio: 3 / 2; } }

.steps { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 2rem var(--gutter); counter-reset: step; }
.steps__item { counter-increment: step; border-top: 1px solid var(--ligne-forte); padding-top: 1.25rem; }
.steps__item::before {
  content: counter(step); display: block; margin-bottom: 1rem;
  font-family: var(--f-sous-titre); font-weight: 800; font-size: var(--t-3); line-height: 1; color: var(--azur);
}
.steps__title { font-family: var(--f-sous-titre); font-weight: 800; font-size: 1.15rem; margin-bottom: 0.6rem; }
.steps__item p { color: var(--texte-doux); font-size: 0.98rem; }
@media (max-width: 63.99em) { .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 47.99em) { .steps { grid-template-columns: 1fr; } }

/* ---------- À propos ---------- */
.about { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 3rem clamp(2rem, 6vw, 6rem); padding-block: clamp(3rem, 6vw, 5rem) var(--section); }
.about__visual { align-self: start; position: sticky; top: calc(var(--header-h) + 2rem); }
.about__portrait img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.about__text { max-width: 40rem; }
.about__text h2 { font-family: var(--f-sous-titre); font-weight: 800; font-size: var(--t-3); margin: 2.75rem 0 1rem; line-height: 1.2; text-wrap: balance; }
.about__text p + p { margin-top: 1rem; }
.about__text > p:not(.lead) { color: var(--texte-doux); }
.about__text .lead { margin-bottom: 1.5rem; max-width: none; }
.about__text .actions { margin-top: 3rem; }
@media (max-width: 55.99em) {
  .about { grid-template-columns: 1fr; }
  .about__visual { position: static; max-width: 24rem; }
}

/* ---------- Contact ---------- */
.contact {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); grid-template-rows: auto 1fr;
  grid-template-areas: "intro action" "more action";
  gap: 0 clamp(2rem, 6vw, 6rem); padding-block: clamp(3rem, 6vw, 5rem) var(--section);
}
.contact__intro { grid-area: intro; }
.contact__more { grid-area: more; }
.contact > .form, .contact > .contact-mail { grid-area: action; align-self: start; }
.contact__intro .lead { max-width: 30ch; }
.contact__hints { margin-top: 2.5rem; }
.contact__hints-title { font-family: var(--f-sous-titre); font-weight: 800; font-size: 1.05rem; margin-bottom: 1rem; }
.contact__direct { display: grid; gap: 1.25rem; margin-top: 2.5rem; padding-top: 2rem; border-top: 1px solid var(--ligne); }
.contact__direct dt { font-size: var(--t-0); color: var(--texte-discret); }
.contact__direct dd { margin: 0.15rem 0 0; font-family: var(--f-sous-titre); font-weight: 800; font-size: 1.1rem; }
.contact__direct a { text-decoration: none; }
.contact__direct a:hover { text-decoration: underline; }
@media (max-width: 55.99em) {
  /* Mobile : le formulaire (ou l'adresse email) juste après l'introduction */
  .contact { grid-template-columns: 1fr; grid-template-rows: none; grid-template-areas: "intro" "action" "more"; row-gap: 2.5rem; }
  .contact__hints { margin-top: 0; }
}

.form {
  display: grid; gap: 1.5rem; align-content: start;
  padding: clamp(1.5rem, 4vw, 2.5rem); background: var(--noir); border: 1px solid var(--ligne); border-radius: var(--radius);
}
.form__row { display: grid; gap: 0.5rem; }

/* Contact par email (tant que le formulaire n'est pas actif) */
.contact-mail {
  display: grid; gap: 1.25rem; justify-items: start; align-content: start;
  padding: clamp(1.5rem, 4vw, 2.5rem); background: var(--noir); border: 1px solid var(--ligne); border-radius: var(--radius);
}
.contact-mail__title { font-family: var(--f-sous-titre); font-weight: 800; font-size: var(--t-2); }
.contact-mail__address { font-family: var(--f-sous-titre); font-weight: 800; font-size: clamp(1.2rem, 2.6vw, 1.6rem); overflow-wrap: anywhere; }
.contact-mail__address a { text-decoration: none; }
.contact-mail__address a:hover { text-decoration: underline; }
.contact-mail__hint { font-size: var(--t-0); color: var(--texte-doux); max-width: 46ch; }
.form label { font-family: var(--f-sous-titre); font-weight: 800; font-size: 1rem; }
.req { color: var(--azur); }
.form input, .form textarea {
  width: 100%; padding: 0.85rem 1rem; border-radius: 0.75rem;
  background: rgba(2, 4, 62, 0.75); color: var(--blanc);
  border: 1px solid var(--ligne-forte);
  font: inherit; font-size: 1rem; /* 16 px minimum : pas de zoom automatique sur iPhone */
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.form textarea { resize: vertical; min-height: 10rem; line-height: 1.5; }
.form input:hover, .form textarea:hover { border-color: rgba(255, 255, 255, 0.55); }
.form input:focus, .form textarea:focus { outline: none; border-color: var(--azur); box-shadow: 0 0 0 3px rgba(0, 138, 230, 0.45); }
.form [aria-invalid="true"] { border-color: var(--erreur); }
.form__hint { font-size: var(--t-0); color: var(--texte-discret); }
.form__error { font-size: var(--t-0); color: var(--erreur); }
.form__error:empty { display: none; }
.form__legal { font-size: var(--t-0); color: var(--texte-discret); }
.form__legal a { color: var(--texte-doux); }
.form__submit { display: grid; gap: 1rem; justify-items: start; }
.form__status:empty { display: none; }
.form__status { padding: 0.9rem 1rem; border-left: 3px solid var(--azur); border-radius: 0 0.5rem 0.5rem 0; background: rgba(0, 138, 230, 0.12); }
.form__status[data-state="error"] { border-left-color: var(--erreur); background: rgba(255, 158, 158, 0.1); }
.form__status[data-state="success"] { border-left-color: var(--succes); background: rgba(143, 227, 176, 0.1); }
.form__trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
@media (max-width: 39.99em) { .form .btn { width: 100%; } .form__submit { justify-items: stretch; } }

/* ---------- Pages simples ---------- */
.result { padding-block: clamp(4rem, 10vw, 8rem); display: grid; gap: 1.25rem; justify-items: start; }
.result .actions { margin-top: 1rem; }
.legal { padding-block: clamp(3rem, 6vw, 5rem) var(--section); }
.legal h2 { font-family: var(--f-sous-titre); font-weight: 800; font-size: var(--t-2); margin: 2.5rem 0 0.75rem; }
.legal p, .legal li { color: var(--texte-doux); }
.legal p + p { margin-top: 0.75rem; }
.legal ul { margin-block: 0.75rem; }
.legal a { color: var(--blanc); }
.legal .muted { margin-top: 3rem; }

/* ---------- Réduction des animations ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important; animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important; scroll-behavior: auto !important;
  }
}