/* =========================================================
   BOUT À BOUT — Styles des sections du site
   Utilise uniquement les variables de styles.css (section 0).
   ========================================================= */

/* ---------- Section 1 : en-tête et menu ---------- */

.entete {
  position: relative;
  /* largeur affichée de la bannière (voir ci-dessous) : 832 px à 320 px d'écran → 1100 px à 1100 px d'écran → 1920 px max */
  --banniere: min(120rem, max(100vw, min(260vw, 17.24vw + 56.9rem)));
  overflow: hidden;
  padding-bottom: var(--e-4);
}

/* La bannière (images/banniere-entete.png, 3840 × 922 = export 2x, insérée telle quelle)
   - de 1100 à 1920 px d'écran : pleine largeur, les bandes touchent les bords ;
   - sous 1100 px (tablette, téléphone) : elle rétrécit avec l'écran, mais moins vite que lui
     (le logo passe progressivement de 27 % à 70 % de la largeur de l'écran) ; elle reste centrée
     et l'écran coupe les bandes sur les côtés, jamais le logo ;
   - au-delà de 1920 px : elle ne grandit plus, les bandes se fondent dans le fond. */
/* Le dessin du logo n'est pas au centre exact du PNG : il est décalé de 37 px vers la gauche sur 3840 (0,96 %).
   On recentre en décalant toute la bannière de 0,96 % vers la droite (translateX −49,04 % au lieu de −50 %),
   et on l'élargit de 2,5 % pour que les bandes touchent toujours les deux bords de l'écran. */
.entete-logo {
  display: block;
  position: relative;
  left: 50%;
  transform: translateX(-49.04%);
  width: calc(var(--banniere) * 1.025);
}
.entete-logo img { width: 100%; max-width: none; }
/* Le bas du PNG est transparent (sous le slogan, 262 px sur 922) : on le fait remonter pour éviter un grand vide avant la photo */
.entete-logo { margin-bottom: calc(var(--banniere) * -0.058); }

@media (min-width: 120.0625rem) {
  .entete-logo {
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent);
            mask-image: linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent);
  }
}

/* ---------- Bandeau du haut : menu + réseaux sociaux, toujours visible (demande de Tom, 02/10/2026) ----------
   Ordinateur et tablette : menu centré, icônes à droite, sur la même ligne.
   Petit téléphone (< 480 px) : menu à gauche, icônes à droite.
   Fond sombre légèrement transparent + flou : le contenu glisse dessous pendant le défilement. */
:root { --barre-h: 3.25rem; --entete-h: var(--barre-h); }   /* --entete-h : décalage des liens du menu (scroll-padding, styles.css) */
.barre {
  position: sticky; top: 0; z-index: 100;
  background: rgba(14, 17, 24, 0.9);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--trait);
}
.barre-in {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--e-2);
  min-height: var(--barre-h); max-width: 120rem; margin-inline: auto; padding-inline: var(--gouttiere);
}
.menu { grid-column: 2; }
.menu ul {
  display: flex; flex-wrap: nowrap; justify-content: center; gap: 1rem;
  margin: 0; padding: 0; list-style: none;
}
@media (max-width: 29.99rem) {
  .barre-in { grid-template-columns: 1fr auto; }
  .menu { grid-column: 1; }
  .menu ul { justify-content: flex-start; }
}
.menu a {
  display: inline-block;
  font-size: 0.8125rem; font-weight: 600; line-height: 1;
  padding: 0.625rem 0.875rem; border-radius: 999px;
  color: var(--texte-2); text-decoration: none; box-shadow: inset 0 0 0 1px var(--trait);
  transition: color var(--duree) var(--courbe), box-shadow var(--duree) var(--courbe);
}
.menu a:hover, .menu a:focus-visible { color: var(--texte); box-shadow: inset 0 0 0 1px var(--texte); outline: none; }
@media (max-width: 29.99rem) { .menu ul { gap: 0.625rem; } .menu a { font-size: 0.75rem; padding: 0.5rem 0.625rem; } }
@media (max-width: 23.74rem) { .menu ul { gap: 0.375rem; } .menu a { font-size: 0.6875rem; padding: 0.5rem 0.5rem; } }   /* petits téléphones (< 380 px) : tout tient sur une ligne */
.menu a { white-space: nowrap; }

/* Réseaux sociaux à droite du bandeau. Icônes officielles fournies par Tom, utilisées comme masques
   (la couleur vient du CSS). Taille 20 px, choix de Tom (Meta recommande 29 px minimum pour Instagram). */
.reseaux-entete {
  justify-self: end;
  display: flex; gap: 0; margin: 0 calc(-1 * 0.3rem) 0 0; padding: 0; list-style: none;   /* marge négative : l'icône YouTube s'aligne sur le bord du contenu */
}
.reseaux-entete a {
  display: grid; place-items: center; padding: 0.3rem;   /* écart visible entre les deux icônes ≈ 10 px */
  color: var(--texte-2); transition: color var(--duree) var(--courbe);
}
.reseaux-entete a:hover, .reseaux-entete a:focus-visible { color: var(--texte); outline: none; }
.ico-reseau {
  display: block; width: 1.25rem; height: 1.25rem;              /* 20 px */
  background-color: currentColor;
  -webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat;
}
.ico-instagram { --ico: url("../assets/img/reseau-instagram.png"); }
.ico-youtube   { --ico: url("../assets/img/reseau-youtube.png"); }

/* ---------- Section 2 : image de fond + accroche ----------
   Effet : l'image reste fixe (position: sticky, sans JavaScript),
   l'accroche défile par-dessus, puis la section 3 vient recouvrir l'image.
   .scene englobe les sections 2 et 3 : c'est la zone où l'image reste accrochée.
   Même composition à toutes les largeurs : une bannière au ratio 2,4:1,
   l'accroche à gauche, le personnage entier à droite. Tout est proportionnel
   à la largeur de l'écran : il n'y a pas de version mobile séparée. */

.scene {
  --fond-h: min(41.667vw, 50rem, 85svh);   /* ratio 2,4:1, 800 px de haut max */
  position: relative;
}

.fond {
  position: sticky; top: 0; z-index: 0;
  height: var(--fond-h);
  max-width: 120rem; margin-inline: auto;   /* 1920 px max, comme l'en-tête */
  overflow: hidden;
}
/* Image calée à droite : seul le fond sombre de gauche peut être rogné, jamais le personnage */
.fond img { width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: right center; }
/* Pas de fondu en haut de l'image : séparation nette avec l'en-tête, comme entre les autres sections (demande de Tom, 02/10/2026) */

@media (min-width: 120.0625rem) {
  .fond {
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent);
            mask-image: linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent);
  }
}

/* Accroche : taille et position calculées sur la largeur de la bannière (--l),
   pour qu'elle s'arrête toujours avant le personnage, qui commence à ~51 % de --l.
   --x : début de l'accroche (10 % de la bannière, ou aligné sur le contenu du site si c'est plus à droite)
   --marge : espace minimum gardé devant le personnage (16 → 40 px) */
.accroche {
  --l: min(100vw, 120rem);
  --x: max(calc(var(--l) * 0.10), calc((var(--l) - 75rem) / 2));
  --marge: clamp(1rem, 4vw, 2.5rem);
  position: relative; z-index: 1;
  height: var(--fond-h);
  margin-top: calc(-1 * var(--fond-h));
  display: flex; align-items: center;
}
.accroche-in { width: 100%; max-width: 120rem; margin-inline: auto; padding-left: var(--x); }
.accroche h1 { width: min(calc(var(--l) * 0.37), calc(var(--l) * 0.51 - var(--marge) - var(--x)), 38rem); }
.accroche img { width: 100%; }

/* Tout ce qui suit l'accroche dans .scene recouvre l'image */
.scene > .recouvre { position: relative; z-index: 1; background: var(--nuit); }

/* ---------- Section 3 : domaines d'activité ----------
   Trois cartes entièrement cliquables (lien vers « Nos réalisations »).
   Couleurs : Évènements = bleu, Clips & Live = jaune, Communication = rose.
   Le titre domine ; la description habille la carte.
   3 cartes sur une ligne dès 768 px ; empilées sur téléphone, où tout rétrécit avec l'écran.
   Description courte : ce qu'on filme, puis pour qui. */

.domaine--communication { --couleur: var(--rose); }

/* Les cartes suivent directement l'image de la section 2 : petit espace en haut seulement */
#activites { padding-top: clamp(1rem, 3vw, 2rem); padding-bottom: clamp(2rem, 5vw, 4rem); }
/* Nos réalisations suit directement les cartes : pas de marge supplémentaire au-dessus */
#realisations { padding-top: 0; padding-bottom: 0; }
#realisations { scroll-margin-top: 1.25rem; }   /* lien « Nos vidéos » : un peu d'air entre le bandeau et le titre */   /* la section Location apporte sa propre marge */

.domaines-grille { display: grid; gap: clamp(0.625rem, 2.5vw, 1rem); grid-template-columns: 1fr; }
@media (min-width: 48rem) { .domaines-grille { grid-template-columns: repeat(3, 1fr); gap: var(--e-3); } }

.carte {
  container-type: inline-size;          /* le titre se dimensionne sur la largeur de la carte */
  display: flex; flex-direction: column; gap: clamp(0.375rem, 2vw, 0.75rem);
  padding: clamp(1.125rem, 5vw, 2rem) clamp(1rem, 4vw, 1.25rem);
  border-radius: var(--r-carte);
  /* Halo de la couleur du domaine dans le coin haut gauche, sur le même noir que le fond du site */
  background: var(--nuit);
  background: radial-gradient(130% 100% at 0% 0%, color-mix(in srgb, var(--couleur) 20%, transparent), transparent 65%), var(--nuit);
  color: var(--texte-2); text-decoration: none;
  transition: transform var(--duree) var(--courbe), box-shadow var(--duree) var(--courbe);
}
.carte:hover { color: var(--texte-2); transform: translateY(-4px); box-shadow: inset 0 0 0 1px var(--couleur); }

/* Titre : aussi grand que possible sans jamais passer à la ligne
   (« Communication », le plus long, occupe ~95 % de la largeur de la carte), 36 px max. */
.carte-titre {
  font-size: 1.75rem;
  font-size: clamp(1.25rem, min(12.5cqi, 6.7vw), 2.25rem);   /* sur téléphone, suit aussi la largeur de l'écran */
  font-weight: 700; line-height: 1.05; letter-spacing: -0.01em; white-space: nowrap;
  color: var(--couleur);
  /* Plus gras que 700 (le maximum de Google Sans) : un contour de la même couleur épaissit les lettres */
  -webkit-text-stroke: 0.02em var(--couleur);
}

/* Description discrète : gris clair atténué, elle habille sans concurrencer le titre */
.carte p { margin: 0; font-size: clamp(0.8125rem, 0.75rem + 0.3vw, 0.875rem); line-height: 1.5; color: var(--texte-2); opacity: 0.85; }

/* Titre lu par les lecteurs d'écran et Google, invisible à l'écran */
.visuellement-cache { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---------- Titres de section (sections 4 et suivantes) ---------- */
/* Titres fournis en PNG par Tom (texte détouré, 104 px de haut), insérés tels quels.
   Tous affichés à la même hauteur (21 → 35 px), entre la taille des titres des cartes et celle de l’accroche. Alignés à gauche. */
.section-titre { margin: 0; line-height: 0; }
.section-titre img { height: clamp(1.3125rem, 6vw, 2.1875rem); width: auto; max-width: 100%; object-fit: contain; object-position: left center; }

/* ---------- Section 4 : nos réalisations — mosaïque de vidéos ----------
   Téléphone et tablette (< 960 px) : mosaïque compacte en 3 blocs (hauteur ≈ 1,7 × la largeur), placés par grid-template-areas :
       a a d d d    a = 1.1 haute (mise en avant)   d, b = 2.1 et 2.2 empilées
       a a b b b
       e c c c f    e, f = 1.2 et 1.4 verticales    c = 3.1 au milieu
       i i i g g    i, h = 3.2 et 2.3 empilées      g = 1.3 haute (mise en avant)
       h h h g g
     Les 5 largeurs de colonnes (symétriques) sont calculées pour que chaque vidéo garde exactement son format (9:16 ou 16:9) :
       v = largeur des grandes verticales = 38,756 % − 0,04306 × écart ; u = largeur des petites verticales = 19,378 % − 0,38756 × écart.
     Si les blocs changent, ce calcul doit être refait.
   Ordinateur (≥ 960 px) : vidéos 1.1 et 1.4 en pleine hauteur à gauche et à droite, 2 rangées au centre.
     Dans une rangée, chaque vidéo prend une largeur proportionnelle à son format (flex-grow = largeur/hauteur),
     donc toutes les vidéos de la rangée ont la même hauteur.
     La largeur des deux colonnes latérales est calculée pour que 1.1 et 1.4 gardent exactement le format 9:16
     sur la hauteur des deux rangées (rangée 1 : 1 verticale + 2 horizontales, donc plus haute ; rangée 2 : 1 verticale + 3 horizontales) :
     colonne latérale = 15,847 % de la largeur − 0,3148 × l'écart entre vidéos.
     Si la composition des rangées change, ce calcul doit être refait. */
.realisations-tete {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--e-4); margin-bottom: clamp(1rem, 2.5vw, 1.5rem);   /* 16 px entre le titre et les boutons quand ils passent dessous */
}

.mosaique-cadre {
  container-type: inline-size; position: relative;
  --hr: clamp(7rem, 13vw, 12rem);   /* vue filtrée : hauteur d'une ligne de la mosaïque (2 lignes) : 112 px sur téléphone → 192 px en plein écran */
}
.mosaique {
  --g: clamp(0.5rem, 1.2vw, 0.875rem);
  display: grid; gap: var(--g);
  grid-template-columns:
    calc(19.378cqw - 0.38756 * var(--g)) calc(19.378cqw - 0.6555 * var(--g))
    calc(22.488cqw - 1.91388 * var(--g))
    calc(19.378cqw - 0.6555 * var(--g)) calc(19.378cqw - 0.38756 * var(--g));
  grid-template-areas: "a a d d d" "a a b b b" "e c c c f" "i i i g g" "h h h g g";
}
.mosaique-centre, .mosaique-rangee { display: contents; }
.tuile--v { --r: 0.5625; aspect-ratio: 9 / 16; }
.tuile--h { --r: 1.7778; aspect-ratio: 16 / 9; }
.zone-a { grid-area: a; } .zone-b { grid-area: b; } .zone-c { grid-area: c; }
.zone-d { grid-area: d; } .zone-e { grid-area: e; } .zone-f { grid-area: f; }
.zone-g { grid-area: g; } .zone-h { grid-area: h; } .zone-i { grid-area: i; }
@media (max-width: 59.99rem) {
  /* 1.1 et 1.3 couvrent deux lignes : leur hauteur vient de la grille (format 9:16 obtenu par le calcul des colonnes) */
  .mosaique:not([data-filtre]) .zone-a, .mosaique:not([data-filtre]) .zone-g { aspect-ratio: auto; }
}

@media (min-width: 60rem) {
  .mosaique { grid-template-columns: calc(15.847cqw - 0.3148 * var(--g)) 1fr calc(15.847cqw - 0.3148 * var(--g)); }
  .mosaique-centre { display: flex; flex-direction: column; gap: var(--g); }
  .mosaique-rangee { display: flex; gap: var(--g); }
  .mosaique { grid-template-areas: none; }
  .mosaique .tuile { grid-area: auto; }
  .tuile { flex: var(--r) 1 0; min-width: 0; }
  .tuile--haute { aspect-ratio: auto; height: 100%; }
}

.tuile {
  position: relative; display: block; overflow: hidden;
  border-radius: var(--r-media);
  background: linear-gradient(160deg, var(--nuit-3), var(--nuit-2));   /* visible tant que la miniature n'est pas chargée */
}
.tuile img { width: 100%; height: 100%; object-fit: cover; transition: transform 400ms var(--courbe), filter var(--duree) var(--courbe); }
.tuile:hover img { transform: scale(1.04); filter: brightness(1.08); }

/* Bouton lecture : caché par défaut ; apparaît au survol de la souris (et au clavier) en rond jaune, triangle nuit.
   Sur téléphone (pas de survol), il reste caché : un appui sur la vignette lance la vidéo. */
.tuile-lecture {
  position: absolute; left: 50%; top: 50%; translate: -50% -50%;
  width: min(clamp(2.75rem, 5vw, 3.5rem), 55%); aspect-ratio: 1; border-radius: 50%;   /* jamais plus de 55 % de la vignette */
  background: var(--accent);
  opacity: 0; scale: 0.85;
  transition: opacity var(--duree) var(--courbe), scale var(--duree) var(--courbe);
}
.tuile-lecture::after {
  content: ""; position: absolute; inset: 0; margin: auto; translate: 8% 0;
  width: 34%; height: 38%; background: var(--nuit);
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}
.tuile:hover .tuile-lecture, .tuile:focus-visible .tuile-lecture { opacity: 1; scale: 1; }

/* Après le clic : la vidéo YouTube remplace la miniature, au même format */
.tuile.en-lecture { background: #000; }
.tuile iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ---------- Filtres par domaine (boutons au-dessus de la mosaïque + clic sur les cartes de la section 3) ----------
   Le script ajoute data-filtre sur .mosaique et masque les vidéos des autres domaines (attribut hidden).
   Vue filtrée, à toutes les largeurs : mosaïque de 2 lignes de hauteur fixe (--hr), remplie colonne par colonne
   (horizontales empilées par 2, verticales et vedettes sur les 2 lignes). Si elle dépasse l'écran, on la fait glisser
   (doigt, trackpad, flèches ou barre fine en dessous). Elle déborde jusqu'aux bords de l'écran. */
.filtres { display: flex; flex-wrap: wrap; gap: 0.375rem; }
.filtres[hidden] { display: none; }
.filtre {
  font: inherit; font-size: 0.8125rem; font-weight: 600; line-height: 1;
  padding: 0.625rem 0.875rem; border: 0; border-radius: 999px; cursor: pointer;
  background: transparent; color: var(--texte-2); box-shadow: inset 0 0 0 1px var(--trait);
  transition: color var(--duree) var(--courbe), background-color var(--duree) var(--courbe), box-shadow var(--duree) var(--courbe);
}
.filtre[data-filtre="tout"] { --couleur: var(--texte); }
.filtre:hover { color: var(--couleur); box-shadow: inset 0 0 0 1px var(--couleur); }
.filtre[aria-pressed="true"] { background: var(--couleur); color: var(--nuit); box-shadow: none; }
/* Téléphone : boutons plus compacts pour tenir sur une ligne */
@media (max-width: 29.99rem) { .filtres { gap: 0.25rem; } .filtre { font-size: 0.75rem; padding: 0.5rem 0.625rem; } }

.tuile[hidden] { display: none; }
.mosaique-plus { display: contents; }                        /* vidéos supplémentaires : dans les vues filtrées… */
.mosaique:not([data-filtre]) .mosaique-plus { display: none; } /* …absentes de la mosaïque « Tout », sauf après « Voir plus » */

/* « Voir plus » (vue « Tout ») : les vidéos cachées apparaissent sous la mosaïque, dans une mosaïque à cases.
   Une case = une vidéo horizontale ; une verticale couvre 3 cases en hauteur ; b1 et b2 couvrent 2 × 2 cases.
   Ordinateur et tablette (4 colonnes, 6 lignes) :   Téléphone (2 colonnes, 12 lignes) :
       v1 b1 b1 h1                                     b1 b1 / b1 b1
       v1 b1 b1 h2                                     v1 h1 / v1 h2 / v1 h3
       v1 h3 v2 h4                                     v2 v3 / v2 v3 / v2 v3
       b2 b2 v2 v3                                     b2 b2 / b2 b2
       b2 b2 v2 v3                                     h4 h5 / h6 h7
       h5 h6 h7 v3
   b1 = 2.6 · b2 = 1.7 · v1 = 1.5 · v2 = 2.8 · v3 = 2.4 · h1 = 1.8 · h2 = 2.5 · h3 = 3.3 · h4 = 3.4 · h5 = 3.5 · h6 = 1.6 · h7 = 2.7
   Pour ajouter une vidéo cachée, il faut revoir ces deux plans. */
.mosaique[data-plus]:not([data-filtre]) .mosaique-plus {
  --col: 2;
  grid-column: 1 / -1; display: grid; gap: var(--g);
  grid-template-columns: repeat(var(--col), 1fr);
  grid-auto-rows: calc((100cqw - (var(--col) - 1) * var(--g)) / var(--col) / 1.7778);   /* hauteur d'une case 16:9 */
  grid-template-areas: "b1 b1" "b1 b1" "v1 h1" "v1 h2" "v1 h3" "v2 v3" "v2 v3" "v2 v3" "b2 b2" "b2 b2" "h4 h5" "h6 h7";
}
@media (min-width: 48rem) {
  .mosaique[data-plus]:not([data-filtre]) .mosaique-plus {
    --col: 4;
    grid-template-areas: "v1 b1 b1 h1" "v1 b1 b1 h2" "v1 h3 v2 h4" "b2 b2 v2 v3" "b2 b2 v2 v3" "h5 h6 h7 v3";
  }
}
.mosaique[data-plus]:not([data-filtre]) .mosaique-plus .tuile { aspect-ratio: auto; height: 100%; }
.mosaique-plus .plus-b1 { grid-area: b1; } .mosaique-plus .plus-b2 { grid-area: b2; }
.mosaique-plus .plus-v1 { grid-area: v1; } .mosaique-plus .plus-v2 { grid-area: v2; } .mosaique-plus .plus-v3 { grid-area: v3; }
.mosaique-plus .plus-h1 { grid-area: h1; } .mosaique-plus .plus-h2 { grid-area: h2; } .mosaique-plus .plus-h3 { grid-area: h3; }
.mosaique-plus .plus-h4 { grid-area: h4; } .mosaique-plus .plus-h5 { grid-area: h5; } .mosaique-plus .plus-h6 { grid-area: h6; }
.mosaique-plus .plus-h7 { grid-area: h7; }
.voir-plus-zone { display: flex; justify-content: center; margin-top: clamp(1rem, 2.5vw, 1.5rem); }
.voir-plus {
  font: inherit; font-size: 0.875rem; font-weight: 600; line-height: 1;
  padding: 0.75rem 1.25rem; border: 0; border-radius: 999px; cursor: pointer;
  background: transparent; color: var(--texte); box-shadow: inset 0 0 0 1px var(--trait);
  transition: color var(--duree) var(--courbe), background-color var(--duree) var(--courbe), box-shadow var(--duree) var(--courbe);
}
.voir-plus:hover { background: var(--accent); color: var(--nuit); box-shadow: none; }
.voir-plus[hidden] { display: none; }
body { overflow-x: clip; }   /* sécurité : la ligne qui va jusqu'aux bords de l'écran ne crée jamais de défilement de la page */

.mosaique[data-filtre] {
  display: grid; gap: var(--g);
  grid-template-rows: var(--hr) var(--hr); grid-template-columns: none; grid-template-areas: none;
  grid-auto-flow: column dense; grid-auto-columns: max-content;
  --decal: calc((100vw - 100cqw) / 2);          /* distance entre le bord du contenu et le bord de l'écran */
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory;
  margin-inline: calc(-1 * var(--decal)); padding-inline: var(--decal); scroll-padding-inline: var(--decal);
  padding-bottom: var(--e-3);                   /* place pour la barre de défilement sur ordinateur */
  scrollbar-width: thin; scrollbar-color: var(--trait) transparent;
}
.mosaique[data-filtre] .mosaique-centre,
.mosaique[data-filtre] .mosaique-rangee { display: contents; }
/* Une horizontale = 1 ligne ; une verticale ou une vidéo vedette (tuile--vedette) = les 2 lignes */
.mosaique[data-filtre] .tuile { grid-area: auto; order: var(--o, 0); flex: none; width: auto; height: var(--hr); aspect-ratio: 16 / 9; scroll-snap-align: start; }
.mosaique[data-filtre] .tuile.tuile--v,
.mosaique[data-filtre] .tuile.tuile--vedette { grid-row: span 2; height: calc(2 * var(--hr) + var(--g)); }
.mosaique[data-filtre] .tuile.tuile--v { aspect-ratio: 9 / 16; }

/* Flèches ‹ › : posées sur la ligne, au bord du contenu, au milieu de la hauteur des vidéos.
   Le script ne les affiche que s'il reste des vidéos à faire défiler de ce côté. */
.defiler {
  position: absolute; top: calc(var(--hr) + 0.4rem); translate: 0 -50%; z-index: 2;
  width: clamp(2.25rem, 4vw, 2.75rem); aspect-ratio: 1; border: 0; border-radius: 50%; cursor: pointer;
  background: rgba(14, 17, 24, 0.75); box-shadow: inset 0 0 0 1px var(--trait);
  transition: background-color var(--duree) var(--courbe);
}
.defiler[hidden] { display: none; }
.defiler--g { left: var(--e-2); }
.defiler--d { right: var(--e-2); }
.defiler::after {   /* chevron */
  content: ""; position: absolute; inset: 0; margin: auto; width: 26%; aspect-ratio: 1;
  border: solid var(--texte); border-width: 2px 2px 0 0; translate: -15% 0; rotate: 45deg;
}
.defiler--g::after { translate: 15% 0; rotate: -135deg; }
.defiler:hover { background: var(--accent); }
.defiler:hover::after { border-color: var(--nuit); }

/* Téléphone : pas de barre de défilement, on glisse au doigt */
@media (max-width: 47.99rem) {
  .mosaique[data-filtre] { padding-bottom: 0; scrollbar-width: none; }
  .mosaique[data-filtre]::-webkit-scrollbar { display: none; }
}

/* ---------- Section 5 : location de matériel ----------
   Bande fine : titre, sous-titre, puis une rangée de photos dans l'ordre du dossier.
   Aucun défilement automatique : on fait glisser la rangée au doigt (ou au trackpad),
   chaque photo se cale au bord gauche. Première photo alignée sur le contenu du site. */
.location { padding-block: clamp(2.5rem, 5vw, 4rem); }
.location-tete { display: grid; gap: var(--e-3); margin-bottom: clamp(1.25rem, 3vw, 2rem); }
/* Mêmes réglages de texte que les descriptions des cartes domaines */
.location-sous-titre { margin: 0; max-width: var(--largeur-texte); font-size: clamp(0.8125rem, 0.75rem + 0.3vw, 0.875rem); line-height: 1.5; color: var(--texte-2); opacity: 0.85; }

.defilement-cadre {
  --marge-g: max(var(--gouttiere), calc((100% - 75rem) / 2));
  --largeur-photo: clamp(12rem, 55vw, 16rem);
  position: relative; max-width: 120rem; margin-inline: auto;
}
.defilement {
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scroll-padding-inline: var(--marge-g);
  scrollbar-width: thin; scrollbar-color: var(--trait) transparent;
  padding-bottom: var(--e-3);   /* place pour la barre de défilement sur ordinateur */
}
.defilement-piste {
  display: flex; gap: clamp(0.75rem, 1.5vw, 1.25rem); width: max-content;
  margin: 0; padding: 0 var(--marge-g); list-style: none;
}
.defilement-piste li { scroll-snap-align: start; }

.materiel { display: grid; gap: var(--e-2); width: var(--largeur-photo); text-decoration: none; color: var(--texte-2); }
.materiel img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--r-media); transition: filter var(--duree) var(--courbe); }
.materiel span { font-size: var(--t-xs); font-weight: 500; text-align: center; transition: color var(--duree) var(--courbe); }
.materiel:hover img { filter: brightness(1.1); }
.materiel:hover span { color: var(--texte); }
/* Flèches de la location : même style que celles de « Nos réalisations », au bord du contenu,
   à mi-hauteur des photos (photo au format 3:2 → milieu = largeur ÷ 3) */
.defilement-cadre .defiler { top: calc(var(--largeur-photo) / 3); }
.defilement-cadre .defiler--g { left: calc(var(--marge-g) + var(--e-2)); }
.defilement-cadre .defiler--d { right: calc(var(--marge-g) + var(--e-2)); }

/* ---------- Section : Bout à Bout en chiffres ----------
   Trois colonnes à toutes les largeurs ; les chiffres et les textes rétrécissent avec l'écran.
   Chiffres : Google Sans Bold poussée au maximum de son axe « grade » (GRAD 200), qui épaissit le trait
   sans élargir les lettres. Fichier dédié de 5 Ko (chiffres, « + » et majuscules), aussi utilisé pour « TOM DUPEYRON ».
   Textes : mêmes réglages que le sous-titre de « Location de matériel ». */
@font-face {
  font-family: "Google Sans Gras";
  src: url("../assets/fonts/google-sans-gras.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}
.chiffres { padding-block: clamp(0.5rem, 2vw, 1.5rem) clamp(2.5rem, 6vw, 4.5rem); }
.chiffres-liste {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(0.75rem, 3vw, 2.5rem);
  margin: 0; padding: 0; list-style: none; text-align: center;
}
.chiffre { display: grid; justify-items: center; align-content: start; gap: clamp(0.25rem, 1vw, 0.5rem); }
.chiffre-nombre {
  display: flex; align-items: center; justify-content: center;
  height: 1em;                                         /* les trois chiffres sur la même ligne */
  font-family: "Google Sans Gras", "Google Sans", system-ui, sans-serif;
  font-size: clamp(2.25rem, 1rem + 6.5vw, 6rem); font-weight: 700; line-height: 1; letter-spacing: -0.01em;
  color: var(--couleur);
}
.chiffre-infini { height: 0.62em; width: auto; overflow: visible; }
.chiffre-infini path { fill: none; stroke: currentColor; stroke-width: 20; stroke-linejoin: round; }
.chiffre-texte {
  max-width: 16em;
  font-size: clamp(0.8125rem, 0.75rem + 0.3vw, 0.875rem); line-height: 1.5; color: var(--texte-2); opacity: 0.85;
}

/* ---------- Scène 2 : « Nos réalisations » + « Location » accrochées, recouvertes par « Contact » ----------
   Le script donne à .empile la classe « colle » et un top négatif = position de « Location » dans le bloc :
   le bloc défile jusqu'à ce que « Location de matériel » arrive tout en haut de l'écran, puis reste immobile
   pendant que la section Contact monte par-dessus. Sans script : défilement normal. */
.scene-2 { position: relative; }
.empile.colle { position: sticky; z-index: 0; }
.contact {
  position: relative; z-index: 1; background: var(--nuit);
  padding-block: clamp(2.5rem, 6vw, 5rem);
  box-shadow: 0 -1.5rem 3rem rgba(0, 0, 0, 0.45);      /* ombre portée sur ce qu'elle recouvre */
}

/* ---------- Section 6 : contact ----------
   Ordinateur et tablette : coordonnées à gauche, formulaire à droite. Téléphone : l'un sous l'autre. */
.contact-grille { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
@media (min-width: 48rem) { .contact-grille { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } }

.contact-coord { container-type: inline-size; }   /* le titre se règle sur la largeur de la colonne */
.contact-coord p { margin: 0; }
/* « Pour nous contacter » : toujours sur une ligne, taille calée sur la largeur de la colonne (7,6 % ≈ 1/13), 36 px max */
.contact-nom {
  font-family: "Google Sans Gras", "Google Sans", system-ui, sans-serif;   /* majuscules extra-grasses (GRAD 200) */
  font-size: clamp(1.125rem, 7.6cqw, 2.25rem); font-weight: 700; line-height: 1.1; text-transform: uppercase; white-space: nowrap;
}
.contact-trait { display: block; width: 100%; height: 0.6rem; margin: var(--e-2) 0 var(--e-3); color: var(--texte); }
.contact-trait path { fill: currentColor; }
/* Taille calée sur la colonne pour que l'adresse e-mail tienne sur une ligne (même sur un petit téléphone) */
.contact-ligne { font-size: clamp(0.8125rem, 5.3cqw, 1.25rem); font-weight: 700; line-height: 1.6; overflow-wrap: anywhere; }
.contact-ligne a { display: inline-flex; align-items: center; gap: 0.55em; color: var(--texte); text-decoration: none; transition: color var(--duree) var(--courbe); }
.contact-icone { flex: none; width: 1.1em; height: 1.1em; fill: none; stroke: var(--accent); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
/* Icône réseau dans une ligne de contact : même taille et même jaune que les icônes e-mail / téléphone */
.contact-icone-reseau { flex: none; width: 1.1em; height: 1.1em; color: var(--accent); }
.contact-ligne a:hover { color: var(--accent); }
.contact-texte {
  margin-top: var(--e-4) !important; max-width: 26em;
  font-size: clamp(0.8125rem, 0.75rem + 0.3vw, 0.875rem); line-height: 1.5; color: var(--texte-2); opacity: 0.85;
}

.formulaire { display: grid; gap: var(--e-3); }
.formulaire-duo { display: grid; gap: var(--e-3); }
@media (min-width: 30rem) { .formulaire-duo { grid-template-columns: 1fr 1fr; } }
.champ { display: grid; gap: var(--e-1); }
.champ span { font-size: clamp(0.8125rem, 0.75rem + 0.3vw, 0.875rem); color: var(--texte-2); }
.champ input, .champ textarea {
  width: 100%; font: inherit; font-size: 1rem; color: var(--texte);          /* 16 px : évite le zoom automatique sur iPhone */
  padding: 0.75rem 0.875rem; border: 0; border-radius: var(--r-media);
  background: var(--nuit-2); box-shadow: inset 0 0 0 1px var(--trait);
  transition: box-shadow var(--duree) var(--courbe);
}
.champ textarea { resize: vertical; min-height: 8rem; }
.champ input:focus, .champ textarea:focus { outline: none; box-shadow: inset 0 0 0 2px var(--accent); }
.formulaire-piege { position: absolute; left: -9999px; }
.formulaire-pied { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-3) var(--e-4); }
.formulaire-envoyer {
  font: inherit; font-size: 0.9375rem; font-weight: 700; line-height: 1;
  padding: 0.875rem 1.5rem; border: 0; border-radius: 999px; cursor: pointer;
  background: var(--accent); color: var(--nuit);
  transition: filter var(--duree) var(--courbe), opacity var(--duree) var(--courbe);
}
.formulaire-envoyer:hover { filter: brightness(1.08); }
.formulaire-envoyer:disabled { opacity: 0.6; cursor: wait; }
.formulaire-etat { margin: 0; font-size: 0.875rem; color: var(--texte-2); }
.formulaire-etat.ok { color: var(--jaune); }
.formulaire-mention { margin: 0; font-size: 0.75rem; color: var(--texte-3); }
.formulaire-mention a { color: var(--texte-2); text-underline-offset: 0.2em; }

/* ---------- Section 7 : pied de page ---------- */
/* Mentions (pied de page, formulaire) un peu plus claires que dans la charte : contraste 4,9:1 au lieu de 4,1:1 (minimum lisible : 4,5:1) */
:root { --texte-3: #7B8292; }
.insecable { white-space: nowrap; }
.pied { position: relative; z-index: 1; background: var(--nuit); border-top: 1px solid var(--trait); padding-block: var(--e-5); }
.pied-in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--e-2) var(--e-5); }
.pied-asso { margin: 0; font-size: var(--t-xs); color: var(--texte-3); }
.pied-liens { display: flex; flex-wrap: wrap; gap: var(--e-2) var(--e-5); margin: 0; padding: 0; list-style: none; }
.pied-liens a { font-size: var(--t-xs); color: var(--texte-2); text-decoration: none; transition: color var(--duree) var(--courbe); }
.pied-liens a:hover { color: var(--accent); }

/* ---------- Page « Mentions légales » ---------- */
.legal { padding-block: clamp(1.5rem, 4vw, 3rem) clamp(3rem, 7vw, 5rem); }
.legal-in { max-width: 46rem; }
.legal h1 { margin: 0 0 var(--e-2); font-size: var(--t-h2); font-weight: 700; line-height: 1.1; text-transform: uppercase; }
.legal-maj { margin: 0 0 var(--e-6); font-size: var(--t-xs); color: var(--texte-3); }
.legal h2 { margin: var(--e-6) 0 var(--e-3); font-size: var(--t-h3); font-weight: 700; color: var(--texte); }
.legal p, .legal li { font-size: 0.9375rem; line-height: 1.65; color: var(--texte-2); }
.legal p { margin: 0 0 var(--e-3); }
.legal ul { margin: 0 0 var(--e-3); padding-left: 1.2em; }
.legal strong { color: var(--texte); font-weight: 600; }
.legal a { color: var(--texte); text-decoration: underline; text-decoration-color: var(--trait); text-underline-offset: 0.2em; }
.legal a:hover { color: var(--accent); text-decoration-color: var(--accent); }