/* ============================================================================
   eneideproduction.com — feuille de style de la maquette
   Reprise à l'identique du site Wix, relevée le 07/09/2026.
   Les valeurs ne sont pas choisies : elles sont MESURÉES sur l'original
   (couleurs comptées dans les fichiers, polices lues dans le HTML servi).
   ========================================================================== */

:root {
  /* ⭐ Le jaune de MARQUE, relevé dans les pixels du logo (99,8 %). */
  --jaune-marque: #F6B215;
  /* ⚠️ Le jaune que le SITE utilise réellement pour ses boutons et ses cadres.
     Les deux ne sont pas les mêmes — la maquette reproduit l'existant, et
     l'arbitrage « on aligne sur la marque ? » revient à Guilhem.
     Pour basculer tout le site sur la couleur de marque : une seule ligne. */
  --jaune: #F7C25F;
  --jaune-clair: #FFCB6A;

  /* ⛔ Trois gris différents, MESURÉS sur le site en ligne (couleur calculée du
     DOM, pas lue dans un fichier de thème) — les confondre change l'allure de
     toutes les pages :
       #26262A = l'en-tête · #1D1D1D = le pied de page et le fond du hero
       #414141 = les bandeaux sombres du corps de page                        */
  --sombre: #26262A;
  --sombre-pied: #1D1D1D;
  --sombre-bandeau: #414141;
  --creme: #FCF8ED;
  --clair: #F6F6F6;
  --blanc: #FFFFFF;

  --texte: #3D3D3D;
  --texte-gris: #8F8F8F;
  --texte-clair: #E2E2E2;

  /* Le bleu d'Eneide Pictures — la branche fiction a sa propre couleur. */
  --bleu-pictures: #59B4FF;

  --police: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --largeur: 1100px;
  --hauteur-entete: 118px;
}

/* ── Base ────────────────────────────────────────────────────────────────── */

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--police);
  font-size: 16px;
  line-height: 1.6;
  color: var(--texte);
  background: var(--blanc);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: inherit; }

h1, h2, h3, h4 { margin: 0; font-weight: 700; line-height: 1.2; }

.conteneur {
  width: 100%;
  max-width: var(--largeur);
  margin: 0 auto;
  padding: 0 24px;
}

.visuellement-cache {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* ── En-tête ─────────────────────────────────────────────────────────────── */

/* ⛔ L'en-tête de l'original n'est PAS collant : il défile avec la page, sur
   toutes les pages (vérifié en défilant : à 1 300 px, aucun en-tête en haut de
   la fenêtre). La maquette le collait — un ajout qui n'était pas demandé. */
.entete {
  position: relative; z-index: 50;
  background: var(--sombre);
  height: var(--hauteur-entete);
  display: flex; align-items: center;
}
/* ⭐ Sur l'ACCUEIL — et seulement là — le menu est posé SUR la vidéo, sans
   bandeau gris. Mesuré sur les captures : bandeau plein sur /realisations et
   /notre-studio, image de la vidéo derrière le menu sur l'accueil. */
.entete--sur-media {
  position: absolute; top: 0; left: 0; right: 0;
  background: transparent;
}
.entete--sur-media + main .hero { padding-top: 0; }
body:has(.entete--sur-media) .hero__titre { margin-top: 24px; }
.entete__interieur {
  width: 100%; max-width: 1360px; margin: 0 auto; padding: 0 32px;
  display: flex; align-items: center; gap: 24px;
}
.entete__marque { display: flex; align-items: center; gap: 14px; text-decoration: none; }
.entete__logo { width: 72px; height: 72px; object-fit: contain; }
.entete__nom {
  color: var(--blanc); font-weight: 700; font-size: 16px; line-height: 1.25;
  letter-spacing: .01em;
}

.nav { margin-left: auto; display: flex; align-items: center; gap: 30px; }
/* ⛔ Sans ça, le bouton « Contact » est COMPRIMÉ par flexbox et son texte
   déborde de sa pastille — vu à l'écran, pas déduit. Un enfant de flex se
   rétrécit par défaut. */
.nav > * { flex-shrink: 0; white-space: nowrap; }
.nav a {
  color: var(--blanc); text-decoration: none; font-weight: 600; font-size: 15px;
  letter-spacing: .03em; padding: 6px 0; border-bottom: 2px solid transparent;
  text-transform: uppercase;
}
/* ⛔ Le bouton Contact est un `<a>` DANS `.nav` : la règle `.nav a` le gagne en
   spécificité et lui rendait ses marges internes à 0 — sa pastille se refermait
   sur le texte. Il faut donc le ré-armer explicitement.
   Vu à l'écran (padding calculé « 6px 0px »), pas supposé. */
.nav a.bouton {
  text-transform: none; letter-spacing: .01em;
  padding: 11px 26px; border-bottom-width: 2px; border-bottom-style: solid;
}
.nav a.bouton--contour { border-color: var(--jaune); }
.nav a.bouton--contour:hover { background: var(--jaune); color: var(--sombre); }
.nav a:hover { color: var(--jaune); }
.nav a[aria-current="page"] { color: var(--jaune); }

.entete__contact { margin-left: 34px; }

.nav-bascule {
  display: none; margin-left: auto; background: none; border: 0; cursor: pointer;
  padding: 10px; color: var(--blanc);
}
.nav-bascule span {
  display: block; width: 26px; height: 2px; background: currentColor; margin: 5px 0;
}

/* ── Boutons ─────────────────────────────────────────────────────────────── */

.bouton {
  display: inline-block; text-decoration: none; cursor: pointer;
  font-weight: 600; font-size: 15px; letter-spacing: .01em;
  padding: 11px 26px; border-radius: 999px; border: 2px solid transparent;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}
.bouton--plein { background: var(--jaune); color: var(--sombre); }
.bouton--plein:hover { background: var(--jaune-clair); }
.bouton--contour { border-color: var(--jaune); color: var(--jaune); background: transparent; }
.bouton--contour:hover { background: var(--jaune); color: var(--sombre); }
.bouton--bleu { background: var(--bleu-pictures); color: var(--blanc); }
.bouton--bleu:hover { filter: brightness(1.08); }
.bouton--petit { padding: 6px 20px; font-size: 13px; }

/* ── Sections ────────────────────────────────────────────────────────────── */

/* Densité calée sur l'original : 84px rendait les pages 1,5 fois plus
   longues que celles du site actuel. */
.section { padding: 62px 0; }
.section--clair  { background: var(--clair); }
.section--blanc  { background: var(--blanc); }
.section--sombre { background: var(--sombre-bandeau); color: var(--blanc); }
/* ⭐ #1D1D1D, relevé au pixel sur la capture de l'original : c'est le fond de la
   section « Notre équipe ! ». Ce n'est PAS le #414141 des bandeaux du corps.
   [Giz, 09/09/2026 : « passe sur fond sombre »] */
.section--noir { background: var(--sombre-pied); color: var(--blanc); }
.section--creme  { background: var(--creme); }
.section--serre  { padding: 44px 0; }
/* Deux sections qui racontent la même chose ne se séparent pas d'un blanc de
   62 px : `colle` supprime la marge basse, `collee` la marge haute. */
.section--colle { padding-bottom: 0; }
.section--collee { padding-top: 24px; }

.section--sombre .section__titre,
.section--sombre p,
.section--noir .section__titre,
.section--noir p { color: var(--blanc); }

/* Le titre de page de l'original : gros, centré, souligné d'un trait plein. */
.titre-page {
  text-align: center; font-size: clamp(34px, 4.6vw, 58px); color: var(--texte);
  display: inline-block; border-bottom: 3px solid currentColor; padding-bottom: 4px;
}
.titre-page__enveloppe { text-align: center; }
.titre-page__soustitre {
  text-align: center; color: var(--texte-gris); font-size: 15px; margin: 18px 0 0;
}

.section__titre { text-align: center; font-size: clamp(26px, 3vw, 40px); margin: 0 0 14px; }
.section__chapeau {
  max-width: 640px; margin: 0 auto; text-align: center; color: var(--texte-gris);
}

/* ── Hero ────────────────────────────────────────────────────────────────── */

.hero {
  position: relative; min-height: 722px; display: flex; align-items: center;
  justify-content: center; text-align: center; overflow: hidden;
  background: var(--sombre-pied);
}
.hero--court { min-height: 420px; }
/* Le hero de la page studio : 549 px sur l'original, et la vidéo porte déjà le
   logo Streamset — aucun texte par-dessus, donc aucun voile. */
.hero--media { min-height: 549px; }
.hero--media .hero__voile { display: none; }
/* ⭐ La vidéo du hero est à 0,85 d'opacité sur l'original, sur un fond #1D1D1D :
   c'est ce qui donne son contraste au titre, pas un voile noir ajouté. */
.hero__fond--voilee { opacity: .85; }
.hero__fond {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: 0;
}
.hero__voile { position: absolute; inset: 0; background: rgba(0,0,0,.34); z-index: 1; }
.hero__contenu { position: relative; z-index: 2; padding: 60px 24px; max-width: 860px; }
.hero__titre {
  color: var(--blanc); font-size: clamp(32px, 4.6vw, 56px); margin: 0;
  text-shadow: 0 2px 18px rgba(0,0,0,.45);
}
.hero__soustitre { color: var(--blanc); margin: 18px 0 0; font-size: 17px; }
.hero__actions { margin-top: 30px; }

/* Le hero « filet » des pages intérieures : deux traits qui encadrent le titre. */
.hero__filet { width: 190px; height: 2px; background: var(--blanc); margin: 0 auto 26px; }
.hero__filet--bas { margin: 26px auto 0; }

/* ── Bloc « offre » de l'accueil ─────────────────────────────────────────── */

.offre { text-align: center; }
.offre__pastille {
  display: inline-block; border: 2px solid var(--jaune); border-radius: 6px;
  padding: 12px 30px; font-size: 24px; font-weight: 700; color: var(--texte);
  text-decoration: none;
}
.offre__pastille:hover { background: var(--jaune); }
.offre__texte { max-width: 620px; margin: 34px auto 0; color: var(--texte); }
.offre__points { list-style: none; padding: 0; margin: 30px auto 0; max-width: 560px; }
.offre__points li { margin: 6px 0; }
.offre__points li::before { content: "• "; color: var(--texte); }

/* ── Bandeau sombre « On vous accompagne » ───────────────────────────────── */

/* ── Fond média d'une section ─────────────────────────────────────────────── */
/* ⭐ CE QUE FAIT VRAIMENT L'ORIGINAL, et ce que deux versions ont raté avant :
   la bande « On vous accompagne » est haute de 283 px et porte une vidéo de
   813 px cadrée PAR LE HAUT. On n'en voit donc que le tiers supérieur, et le
   mouvement vient de la LECTURE, pas du défilement.
   ⛔ La bande des logos, elle, ne porte PAS de vidéo : c'est une photo fixe et
   floue. `[Giz, 07/09/2026]` La confondre avec la vidéo était l'erreur. */
.section--media { position: relative; overflow: hidden; isolation: isolate; }

/* ── UNE SEULE VIDÉO POUR PLUSIEURS BLOCS ────────────────────────────────── */
/* ⭐ `[Giz, 09/09/2026]` : « c'est une vidéo unique visible sur les 2 blocs,
   comme si le bloc entre les 2 n'était qu'un masque ».
   La vidéo couvre le groupe ENTIER ; le bloc du milieu porte un fond opaque et
   la cache ; les deux autres la laissent voir. ⛔ Il n'y a donc qu'UN fichier —
   deux vidéos posées l'une sous l'autre, c'est ce qui était faux. */
.groupe-media { position: relative; isolation: isolate; overflow: hidden; }
.groupe-media__fond {
  position: absolute; top: 0; left: 0; z-index: 0;
  width: 100%; height: calc(100% + 260px); object-fit: cover; object-position: center;
  opacity: .85;
}
/* Chaque bloc du groupe passe AU-DESSUS de la vidéo.
   ⛔ `:not(.groupe-media__fond)` n'est pas une précaution : sans lui cette règle
   a la MÊME spécificité que celle du fond et, venant après, elle lui imposait
   `position:relative`. La vidéo repassait dans le flux, sa hauteur en
   pourcentage n'avait plus de référent, et elle se rendait à 0 px de haut —
   silencieusement. C'est le troisième piège de spécificité de la journée
   (médaillon écrasé par `.duo__media img`, images de relecture écrasées par
   `.section__fond`) : quand une règle « ne prend pas », c'est presque toujours
   qu'une autre, aussi spécifique et écrite plus bas, l'emporte. */
.groupe-media > *:not(.groupe-media__fond) { position: relative; z-index: 1; }
/* Le masque : un aplat opaque, c'est lui qui coupe la vidéo en deux morceaux
   visibles. Sans `background` explicite il laisserait tout passer. */
.section--masque { background: var(--blanc); }
/* Les blocs qui la laissent voir : aucun fond à eux.
   ⚠️ Le voile de la bande basse n'est pas décoratif — sur l'original la vidéo y
   est à 0,62 d'opacité sur du #414141, ce qui l'assombrit nettement par rapport
   au hero. Sans lui, le titre jaune se lit mal. */
.section--sur-groupe { background: transparent; }
.section--sur-groupe.section--sombre { background: rgba(65, 65, 65, .42); }
.hero--sur-groupe { background: transparent; }
.hero--sur-groupe > .hero__voile { background: rgba(0, 0, 0, .22); }

/* ⭐ LA RÉVÉLATION (BgReveal chez Wix), et pourquoi ce n'est pas un fond ordinaire
   Le média est fixé à la FENÊTRE ; la bande n'est qu'une découpe qui passe
   devant. C'est pour ça que la même bande montre un pied de caméra à un endroit
   du défilement et un visage à un autre : ce n'est pas la vidéo qui bouge, c'est
   la fenêtre qui se déplace sur elle. Vérifié à l'œil sur le site en ligne.
   ⛔ `clip-path` n'est pas décoratif ici : c'est LUI qui fait de la bande le
   référent d'un enfant `position:fixed`. Sans lui le fond se fixerait à l'écran
   entier et déborderait sur toute la page. `overflow:hidden` ne suffit pas. */
.section--media:has(> .section__fond--revele) { clip-path: inset(0); }
.section__fond--revele {
  position: fixed; top: 0; left: 0;
  width: 100vw; height: 100vh; object-fit: cover; object-position: center;
}
.section--media > .conteneur { position: relative; z-index: 2; }
.section__fond {
  position: absolute; top: 0; left: 0; right: 0; z-index: 0;
  width: 100%; height: 813px; object-fit: cover; object-position: top;
  pointer-events: none;
}
.section__fond--video { opacity: .62; }
/* La photo de la bande des logos est floutée sur l'original ; l'agrandissement
   évite la frange claire que le flou crée sur les bords. */
/* ⚠️ Gardé pour d'autres pages, mais PAS utilisé sur l'accueil : l'image du
   bandeau des logos n'a aucun filtre dans le Wix, sa douceur est celle de la
   photo. Un flou CSS par-dessus l'écrasait. */
.section__fond--flou { filter: blur(7px); transform: scale(1.06); }

/* La parallaxe du hero : le fond est plus HAUT que sa section, sinon la
   translation découvrirait un bord vide en bas. 0,2 × la course du défilement
   sur une section de 722 px, ça fait ~150 px : on en donne 200. */
[data-parallaxe] { will-change: transform; }
.hero:has(> [data-parallaxe]) { overflow: hidden; }
.hero > [data-parallaxe] { height: calc(100% + 200px); }
/* Le groupe se déplace plus longtemps qu'un hero seul : il est trois fois plus
   haut, donc la course de la parallaxe est trois fois plus longue. */
.groupe-media > [data-parallaxe] { height: calc(100% + 320px); }
.section--media.section--sombre { background: var(--sombre-bandeau); }

.accroche { text-align: center; }
.accroche__titre { color: var(--jaune); font-size: clamp(28px, 3.4vw, 42px); margin: 0; }
.accroche__lignes { margin: 34px 0 0; font-weight: 600; line-height: 2; }

/* ── Grille de logos ─────────────────────────────────────────────────────── */

.logos {
  display: flex; flex-wrap: wrap; justify-content: center;
  align-items: center; gap: 46px 64px; margin: 46px auto 0; max-width: 860px;
}
.logos a, .logos span { display: block; text-decoration: none; color: inherit; }
/* ⭐ Le lissage demandé : sur l'original chaque logo garde sa taille de fichier
   (de 129 à 451 px de large), et la rangée paraît bancale. Ici tous tiennent
   dans la MÊME boîte optique, quelle que soit leur forme. */
.logos img {
  max-height: 104px; max-width: 232px; width: auto; height: auto;
  object-fit: contain;
}
/* ⭐ Les partenaires ne sont pas des références : ils sont DEUX, en grand, et
   chacun est centré sur sa légende de deux lignes. Mesuré sur l'original :
   bluevista ~380 px de large, moonloc ~330. La première version les rendait à
   270 px dans une boîte plus étroite que leur légende — le logo débordait à
   gauche de son texte. [Giz, 09/09/2026 : « il déborde à gauche c'est moche »] */
.logos--partenaires { gap: 40px 90px; max-width: 1000px; }
.logos--partenaires img { max-height: 92px; max-width: 380px; }
.logos--partenaires .partenaire__legende { max-width: 230px; }

/* ⛔ `display:block` sur le lien et `margin:auto` sur la légende ne suffisent
   pas : le logo, lui, reste calé à gauche de la colonne. Il faut que la colonne
   soit une pile CENTRÉE, sinon logo et légende n'ont pas le même axe. */
.partenaire { display: flex; flex-direction: column; align-items: center;
              text-align: center; }
.partenaire__legende {
  margin: 14px auto 0; font-size: 13px; font-weight: 600; color: var(--texte);
  max-width: 190px;
}

/* ── Cartes de projet ────────────────────────────────────────────────────── */

.cartes {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 34px; margin-top: 44px;
}
.carte { text-align: center; display: flex; flex-direction: column; }
.carte__visuel {
  display: block; overflow: hidden; border-radius: 2px; background: var(--clair);
  aspect-ratio: 4 / 5;
}
.carte__visuel img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.carte__visuel:hover img { transform: scale(1.04); }
.carte__titre { margin: 20px 0 0; font-size: 19px; }
.carte__mention { margin: 4px 0 0; font-size: 13px; color: var(--texte-gris); }
/* `margin-top: auto` aligne tous les boutons d'une rangée sur la même ligne,
   quelle que soit la longueur des mentions au-dessus. */
.carte__action { margin-top: auto; padding-top: 16px; }

.famille { text-align: center; margin-top: 26px; }
.famille__titre {
  display: inline-block; font-size: clamp(24px, 2.6vw, 34px);
  border-bottom: 3px solid currentColor; padding-bottom: 2px;
}
.famille__signature {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  margin: 12px 0 0; font-size: 13px; font-weight: 600; color: var(--texte);
}
.famille__signature img { height: 22px; width: auto; }

/* ── Texte + médias ──────────────────────────────────────────────────────── */

.duo {
  display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center;
}
.duo--inverse .duo__texte { order: 2; }
/* ⭐ Le texte se ferre DU CÔTÉ DE LA PHOTO — c'est l'original, et je l'avais
   laissé à gauche partout. Photo à droite → texte à droite ; l'inverse quand la
   photo est à gauche. [Giz, 09/09/2026] */
.duo .duo__texte { text-align: right; }
.duo--inverse .duo__texte { text-align: left; }
.duo .duo__actions { text-align: center; }

/* ⭐ Le médaillon : un disque de 75 px qui MORD le coin bas-gauche de la photo.
   Il déborde de moitié — c'est ce débordement qui le fait lire comme une
   signature posée dessus, et non comme une vignette rangée dans un coin. */
.duo__media { position: relative; }
/* ⛔ `.duo__media img` (0,1,1) l'emporte sur `.duo__medaillon` seul (0,1,0), même
   écrit plus bas : le disque héritait `width:100%` et s'étalait sur toute la
   largeur de la photo. Le sélecteur doit être AU MOINS aussi spécifique. */
.duo__media img.duo__medaillon {
  position: absolute; left: -22px; bottom: -22px;
  width: 75px; height: 75px; max-height: none; object-fit: contain;
}

/* Une enseigne : un logo seul qui tient lieu de titre.
   ⛔ `text-align:center` ne centre pas : la règle générale `img{display:block}`
   fait de l'image un bloc, et un bloc ne se centre qu'avec `margin:auto`. */
.enseigne { margin: 0; }
.enseigne img { width: 100%; height: auto; margin-inline: auto; }
.enseigne a { display: block; }
.duo__titre { font-size: 22px; margin: 0 0 16px; }
.duo__titre--jaune { color: var(--jaune); }
.duo__titre--bleu { color: var(--bleu-pictures); }
.duo p { margin: 0 0 14px; }
/* ⛔ Une image en pleine résolution dans une colonne fluide fait exploser la
   hauteur de la page : la page « à propos » sortait à 5 555 px contre 3 332 px
   sur l'original. On borne la hauteur, sans jamais déformer. */
.duo__media { display: grid; gap: 18px; }
.duo__media img { width: 100%; max-height: 420px; object-fit: cover; }
.duo__media--deux { grid-template-columns: 1fr 1fr; }
.duo__actions { margin-top: 22px; }

.colonne-texte { max-width: 760px; margin: 0 auto; }
.colonne-texte p { margin: 0 0 18px; }
.colonne-texte--gauche { text-align: left; }
.colonne-texte--centre { text-align: center; }

/* ── Mosaïque ────────────────────────────────────────────────────────────── */
/* ⛔ L'original ne pose pas ses photos dans une grille régulière : il compose
   des COLONNES de largeurs inégales, avec une légende sous chacune (page
   studio : 362 / 668 / 362 px). Une grille à trois colonnes égales rendait une
   page différente, et perdait les légendes. */
.mosaique {
  display: grid; gap: 20px; align-items: start; margin: 34px auto 0;
  /* ⭐ Sur l'original la mosaïque DÉBORDE la colonne de texte : ses images vont
     de -224 à +1203 px autour d'un canevas de 980, soit ~1420 px de large.
     La laisser dans les 1100 px du texte rend une page plus étroite que le
     modèle. */
  width: min(1400px, calc(100vw - 48px));
  max-width: none;
  margin-inline: calc(50% - min(700px, 50vw - 24px));
}
.mosaique__colonne { display: grid; gap: 20px; align-content: start; }
/* ⭐ La grande photo du plateau descend jusqu'au BAS des colonnes voisines :
   sur l'original elle va de y=753 à 1198, exactement comme la pile
   « espace + cuisine » à côté. Son seul rapport d'image la laissait 35 px trop
   courte. [Giz, 09/09/2026 : « agrandis un peu pour aligner avec le bas »] */
.mosaique { align-items: stretch; }
.mosaique__colonne--pleine { align-content: stretch; }
.mosaique__colonne--pleine img { height: 100%; aspect-ratio: auto !important; }
.mosaique__colonne img { width: 100%; height: 100%; object-fit: cover; }
/* Les logos partenaires vont CÔTE À CÔTE, chacun avec son bouton dessous —
   c'est la disposition de l'original, pas une pile verticale. */
.mosaique__logos {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: end;
  gap: 26px 40px;
}
/* ⭐ Les deux logos s'alignent par le BAS : relevé sur l'original, moonloc
   (258×51) et Streamset (321×86) ont tous deux leur bas à y=1434. Sans hauteur
   de rangée commune, le petit logo flotte plus haut que le grand et les deux
   boutons se décalent. [Giz, 09/09/2026 : « aligne les 2 logos verticalement »] */
.mosaique__logo { text-align: center; display: grid; gap: 16px; justify-items: center;
                  grid-template-rows: 90px auto; }
.mosaique__logo img { align-self: end; }
.mosaique__logo img { width: auto; max-width: 260px; max-height: 74px; object-fit: contain; }
/* ⭐ Le texte ne touche pas les photos voisines : il vaut mieux une ligne de
   plus qu'un texte collé aux bords.
   [Giz, 09/09/2026 : « plus d'espace à gauche et à droite »] */
.mosaique__texte { margin: 0; text-align: center; align-self: center; padding-inline: 34px; }
/* ⭐ Le bouton « Notre studio ! » se centre sous son texte. [Guilhem, 14/09/2026 : « centrer ce bouton »] */
.mosaique__actions { margin: 0; text-align: center; }
.mosaique__legende {
  margin: 6px 0 0; text-align: center; font-size: 14px; line-height: 1.5;
  color: var(--texte);
}

/* ── Collage ─────────────────────────────────────────────────────────────── */
/* ⛔ POURQUOI PAS UNE MOSAÏQUE ICI. Les pages projet portent 7 à 15 photos de
   formats très variés. Rejouer les colonnes exactes de l'original y creuse des
   trous énormes : sur « Les Choralies », une colonne recevait 6 images et les
   autres une seule, laissant 600 px de blanc. Vu à l'écran.
   👉 Colonnes ÉQUILIBRÉES, chaque photo gardant son format : c'est le collage
      de l'original dans son esprit, sans ses accidents. Les compositions à
      trois zones et légendes (studio, films corporate) gardent, elles, la
      mosaïque exacte. */
.collage { columns: 3 260px; column-gap: 18px; margin-top: 34px; }
.collage img {
  width: 100%; height: auto; margin: 0 0 18px;
  break-inside: avoid; -webkit-column-break-inside: avoid;
}
.collage--2 { columns: 2 320px; }
@media (max-width: 560px) { .collage { columns: 1; } }

/* ── Galeries ────────────────────────────────────────────────────────────── */

.galerie { display: grid; gap: 22px; margin-top: 40px; }
.galerie--2 { grid-template-columns: repeat(2, 1fr); }
.galerie--3 { grid-template-columns: repeat(3, 1fr); }
.galerie img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 3 / 2; }
.galerie--libre img { aspect-ratio: auto; }
/* ⛔ Une affiche de film est un PORTRAIT. Passée dans une cellule 3/2 en
   `object-fit: cover`, elle se fait rogner son titre — vu sur la galerie des
   Choralies, où le logo « Choralies » était coupé en deux.
   👉 Une affiche occupe donc deux rangées, dans son propre rapport. */
.galerie img.portrait {
  aspect-ratio: auto; height: auto; object-fit: contain;
  grid-row: span 2; align-self: start;
}

/* ── Équipe ──────────────────────────────────────────────────────────────── */

.equipe {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px;
  margin: 36px auto 0; max-width: 880px;
}
.equipe__fiche { position: relative; }
.equipe__fiche img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
/* ⛔ LES PRÉNOMS SONT INCRUSTÉS DANS LES PHOTOS D'ORIGINE. Une première version
   ajoutait le nom en texte par-dessus : à l'écran, chaque prénom apparaissait
   DEUX FOIS, superposé. Vu, puis retiré.
   👉 Le nom reste donc dans l'image, et vit en texte dans l'`alt`.
   ⏳ Le vrai correctif — refaire les photos sans texte incrusté, et poser le nom
      en HTML — demande de nouveaux fichiers : c'est une question pour Guilhem,
      pas une décision de maquette.
   ⭐ Ce qui EST corrigé ici : sur l'original, « Marine », « Gaspard » et
      « Maurice » sont coupés au bord droit. Des colonnes égales et un rapport
      4/5 respecté suppriment le rognage. */
.equipe__nom { display: none; }

/* ── Vidéo YouTube, en click-to-load ─────────────────────────────────────── */
/* ⛔ Pas d'iframe YouTube au chargement : ça poserait un cookie tiers et
   déclencherait l'obligation de bandeau de consentement. L'iframe n'est
   insérée qu'au clic du visiteur. */
.video { position: relative; aspect-ratio: 16 / 9; background: #000; cursor: pointer; border: 0; padding: 0; width: 100%; }
.video img { width: 100%; height: 100%; object-fit: cover; opacity: .82; }
.video__lecture {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
}
.video__lecture::after {
  content: ""; width: 76px; height: 54px; border-radius: 12px;
  background: rgba(0,0,0,.7) ; box-shadow: 0 0 0 2px var(--jaune) inset;
  clip-path: none;
}
.video__triangle {
  position: absolute; width: 0; height: 0;
  border-left: 20px solid var(--jaune); border-top: 13px solid transparent;
  border-bottom: 13px solid transparent; margin-left: 6px; z-index: 1;
}
.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ── Formulaire ──────────────────────────────────────────────────────────── */

.formulaire { max-width: 560px; margin: 0 auto; }
.formulaire__ligne { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.formulaire label { display: block; margin-bottom: 16px; }
.formulaire input, .formulaire textarea {
  width: 100%; font-family: inherit; font-size: 15px; color: var(--texte);
  padding: 12px 14px; border: 1px solid #CFCFCF; border-radius: 4px; background: var(--blanc);
}
.formulaire input:focus, .formulaire textarea:focus {
  outline: 2px solid var(--jaune); outline-offset: 1px; border-color: transparent;
}
.formulaire textarea { min-height: 140px; resize: vertical; }
.formulaire__envoi { text-align: center; margin-top: 8px; }
.formulaire__piege { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.formulaire__issue { margin: 18px 0 0; padding: 12px 16px; text-align: center; border: 1px solid var(--jaune); }
.formulaire__issue--erreur { border-color: #d9534f; }
.formulaire__note { font-size: 13px; color: var(--texte-gris); margin-top: 18px; text-align: center; }

/* ── Encart « expliquez-nous votre projet » ──────────────────────────────── */

.encart-contact { text-align: center; }
.encart-contact__titre { font-size: 24px; margin: 0 0 22px; }

/* ── Bouton retour ───────────────────────────────────────────────────────── */

.retour { text-align: center; padding: 20px 0 70px; }

/* ── Pied de page ────────────────────────────────────────────────────────── */

/* ⭐ Le chapeau d'une page : le « Un studio de 275 m² » de la page studio est
   bien plus gros que le corps sur l'original — c'est lui qui annonce la page.
   [Giz, 09/09/2026 : « plus gros »] */
/* ⛔ Le PREMIER paragraphe seulement : sur l'original « Un studio de 275 m² »
   est en gros, et le paragraphe qui suit revient à la taille du corps. Tout
   agrandir donnait une page qui crie. */
.colonne-texte--grand p:first-child { font-size: 26px; line-height: 1.45; }
@media (max-width: 720px) { .colonne-texte--grand p:first-child { font-size: 21px; } }

/* ── Le récit d'une réalisation ─────────────────────────────────────────── */
/* ⭐ Trois colonnes : photos, texte, photos. Le titre et la date vivent au-dessus
   de la colonne de GAUCHE, comme sur l'original (« Le projet » à x=-53,
   « Juin 2025 » juste dessous). */
.projet {
  display: grid; gap: 26px 34px; align-items: start;
  grid-template-areas: "entete texte ." "gauche texte droite";
  width: min(1400px, calc(100vw - 48px));
  margin-inline: calc(50% - min(700px, 50vw - 24px));
}
.projet__entete { grid-area: entete; }
.projet__cote--gauche { grid-area: gauche; }
.projet__texte { grid-area: texte; }
.projet__cote--droite { grid-area: droite; }
.projet__titre { font-size: 34px; margin: 0 0 6px; }
.projet__mention { margin: 0; font-size: 13px; color: var(--texte-gris); }
/* Deux sous-colonnes : une photo occupe les deux, une photo « demi » une seule
   — c'est ainsi que l'original pose deux portraits côte à côte. */
.projet__cote { display: grid; grid-template-columns: 1fr 1fr; gap: 22px;
                align-content: start; }
.projet__cote > * { grid-column: span 2; }
.projet__cote > .projet__photo--demi, .projet__cote > .projet__intitule--demi {
  grid-column: span 1; }
.projet__intitule { margin: 0; font-size: 14px; font-weight: 600; line-height: 1.5; }
.projet__photo { margin: 0; }
/* ⛔ Pas de `height:100%` : la figure est un élément de grille qui s'étire à la
   hauteur de sa rangée, la rangée est mesurée d'après son contenu, et l'image
   réclamait alors toute la figure — la légende passait DESSOUS l'image
   suivante. `aspect-ratio` suffit à donner sa hauteur à l'image. */
.projet__photo img { width: 100%; height: auto; object-fit: cover; }
.projet__photo { align-self: start; }
.projet__photo figcaption {
  margin-top: 9px; text-align: center; font-size: 13px; line-height: 1.5;
}
/* ⭐ Le texte est justifié sur l'original — c'est ce qui fait tenir la colonne
   centrale entre deux colonnes de photos. */
.projet__texte { text-align: justify; }
.projet__texte p { margin: 0 0 16px; }

@media (max-width: 900px) {
  /* Une colonne : le titre, le texte, puis les photos — l'ordre du récit. */
  .projet { grid-template-areas: "entete" "texte" "gauche" "droite";
            grid-template-columns: 1fr !important; }
  .projet__texte { text-align: left; }
}

.pied { background: var(--sombre-pied); color: var(--blanc); padding: 66px 0 34px; }
/* ⭐ « Contact » est À GAUCHE, au-dessus du filet et de la carte d'adresse —
   c'est la disposition de l'original, et je l'avais centré. [Giz, 09/09/2026] */
.pied__titre { color: var(--jaune); font-size: 38px; margin: 0 0 8px; text-align: left; }
.pied__grille {
  display: grid; grid-template-columns: 1fr auto; gap: 48px; align-items: start;
  margin-top: 30px;
}
.pied__filet { width: 62px; height: 2px; background: var(--blanc); margin-bottom: 22px; }
.pied__raison { color: var(--jaune); font-weight: 600; margin: 0 0 12px; }
.pied__coordonnees {
  font-style: normal; margin: 0; font-size: 14px; line-height: 1.9; font-weight: 600; }
.pied__coordonnees a { color: inherit; text-decoration: none; }
.pied__coordonnees a:hover { color: var(--jaune); }
.pied__marque { text-align: center; }
.pied__marque img { width: 104px; margin: 0 auto 12px; }
.pied__reseaux { display: flex; gap: 14px; margin-top: 26px; }
.pied__reseaux img { width: 26px; height: 26px; object-fit: contain; }
.pied__bas {
  margin-top: 42px; text-align: center; font-size: 12px; color: var(--texte-clair);
  line-height: 1.8;
}
.pied__bas a { color: var(--texte-clair); }

/* ── Écrans étroits ──────────────────────────────────────────────────────── */

@media (max-width: 900px) {
  .nav-bascule { display: block; }
  .nav {
    /* ⛔ `fixed` supposait un en-tête collant : depuis qu'il défile avec la
       page, un menu fixé s'ouvrirait n'importe où sur l'écran. Il s'ancre
       maintenant SOUS son en-tête. */
    position: absolute; top: 100%; left: 0; right: 0; margin: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--sombre); padding: 12px 24px 26px;
    border-top: 1px solid rgba(255,255,255,.12);
  }
  .nav[hidden] { display: none; }
  .nav a { padding: 14px 0; border-bottom: 1px solid rgba(255,255,255,.08); }
  .entete__contact { margin: 16px 0 0; align-self: flex-start; }

  .cartes, .equipe, .galerie--3 { grid-template-columns: repeat(2, 1fr); }
  /* Sur écran étroit, une mosaïque redevient une colonne : les largeurs
     inégales n'ont plus de sens sous 900 px. */
  .mosaique { grid-template-columns: 1fr !important; }
  .duo { grid-template-columns: 1fr; gap: 28px; }
  .duo--inverse .duo__texte { order: 0; }
  .pied__grille { grid-template-columns: 1fr; }
  .section { padding: 58px 0; }
}

@media (max-width: 560px) {
  .cartes, .equipe, .galerie--2, .galerie--3 { grid-template-columns: 1fr; }
  .formulaire__ligne { grid-template-columns: 1fr; }
  .hero { min-height: 480px; }
  .logos { gap: 30px 34px; }
  .logos img { max-height: 58px; max-width: 140px; }
}

/* Le visiteur qui a demandé « moins d'animations » l'obtient. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}