/* REDFIRE — feuille de style du site (redfireagency.com)
   Tout en noir, une seule police (Jost, fine), des capitales très espacées, de fins contours,
   et le rouge de l'éléphant en toutes petites touches. Écrit à la main, sans bibliothèque. */

:root {
  --noir: #000;
  --noir-2: #0b0b0b;
  --noir-3: #121212;
  --blanc: #fff;
  --gris: rgba(255, 255, 255, 0.62);
  --gris-2: rgba(255, 255, 255, 0.42);
  --trait: rgba(255, 255, 255, 0.12);
  --trait-2: rgba(255, 255, 255, 0.22);
  --rouge: #d61f26;
  --police: "Jost", "Futura", "Century Gothic", "Avenir Next", Arial, sans-serif;
  --marge: clamp(20px, 4.4vw, 64px);
  --largeur: 1440px;
  --ease: cubic-bezier(0.22, 0.61, 0.24, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 120px; }
body {
  margin: 0; background: var(--noir); color: var(--blanc);
  font-family: var(--police); font-weight: 300; font-size: 16px; line-height: 1.6;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden;
}
img, video, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
p { margin: 0; }
h1, h2, h3, h4 { margin: 0; font-weight: 300; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
::selection { background: var(--rouge); color: var(--blanc); }
:focus-visible { outline: 1px solid var(--blanc); outline-offset: 4px; }

.lien-evitement { position: absolute; left: 16px; top: -60px; z-index: 200; background: var(--blanc); color: var(--noir); padding: 10px 16px; font-size: 12px; letter-spacing: .2em; text-transform: uppercase; }
.lien-evitement:focus { top: 46px; }

.cadre { width: 100%; max-width: var(--largeur); margin: 0 auto; padding: 0 var(--marge); }

/* Petits textes en capitales espacées */
.surtitre { font-size: 10px; font-weight: 400; letter-spacing: .28em; text-transform: uppercase; color: var(--gris); }
.capitales { font-size: 12px; font-weight: 400; letter-spacing: .2em; text-transform: uppercase; }
.gris { color: var(--gris); }
.trait-court { width: 48px; height: 1px; background: var(--trait-2); margin: 40px auto 0; border: 0; }

.lien-fleche { display: inline-flex; align-items: center; gap: 10px; font-size: 11px; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; padding-bottom: 6px; border-bottom: 1px solid currentColor; transition: gap .4s var(--ease), color .3s; }
.lien-fleche:hover, .lien-fleche:focus-visible { gap: 16px; }
.lien-fleche.sans-trait { border-bottom: 0; padding-bottom: 0; }

.pastille { display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 14px; border: 1px solid var(--trait-2); border-radius: 999px; background: rgba(0, 0, 0, .78); font-size: 10px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; white-space: nowrap; }
.badge-rouge { display: inline-block; padding: 2px 6px; border: 1px solid var(--rouge); color: var(--rouge); font-size: 9px; font-weight: 500; letter-spacing: .15em; text-transform: uppercase; line-height: 1.4; }

/* ——— Bandeau défilant ——— */
.bandeau { height: 32px; overflow: hidden; display: flex; align-items: center; background: var(--noir); border-bottom: 1px solid var(--trait); position: relative; z-index: 51; }
.bandeau .piste { display: flex; flex-shrink: 0; animation: defile 46s linear infinite; }
.bandeau span { flex-shrink: 0; padding: 0 44px; font-size: 11px; font-weight: 400; letter-spacing: .22em; text-transform: uppercase; white-space: nowrap; }
.bandeau span::after { content: ""; display: inline-block; width: 4px; height: 4px; margin-left: 44px; border-radius: 50%; background: var(--rouge); vertical-align: middle; }
@keyframes defile { to { transform: translateX(-50%); } }

/* ——— En-tête ——— */
.entete { position: sticky; top: 0; z-index: 50; background: rgba(0, 0, 0, .92); border-bottom: 1px solid var(--trait); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.entete .cadre { height: 74px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; }
.entete nav { display: flex; gap: clamp(20px, 2.6vw, 40px); align-items: center; }
.entete nav.droite { justify-content: flex-end; }
.entete nav a { font-size: 12px; font-weight: 300; letter-spacing: .2em; text-transform: uppercase; color: var(--gris); transition: color .3s; }
.entete nav a:hover, .entete nav a:focus-visible, .entete nav a[aria-current="true"] { color: var(--blanc); }
.entete nav a.cadre-fin { color: var(--blanc); border: 1px solid var(--trait-2); padding: 9px 16px; transition: border-color .3s, background-color .3s; }
.entete nav a.cadre-fin:hover { border-color: var(--blanc); }
.mot { font-size: 24px; font-weight: 400; letter-spacing: .5em; text-transform: uppercase; line-height: 1; padding-left: .5em; white-space: nowrap; }
.bouton-menu { display: none; width: 40px; height: 40px; align-items: center; }
.bouton-menu span, .bouton-menu span::before, .bouton-menu span::after { display: block; width: 20px; height: 1px; background: var(--blanc); position: relative; }
.bouton-menu span::before, .bouton-menu span::after { content: ""; position: absolute; left: 0; }
.bouton-menu span::before { top: -6px; }
.bouton-menu span::after { top: 6px; }

.menu-plein { position: fixed; inset: 0; z-index: 100; background: var(--noir); display: flex; flex-direction: column; padding: 0 var(--marge) 40px; opacity: 0; visibility: hidden; transition: opacity .35s var(--ease), visibility .35s; }
.menu-plein.ouvert { opacity: 1; visibility: visible; }
.menu-plein .haut { height: 106px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--trait); }
.menu-plein .fermer { font-size: 11px; letter-spacing: .22em; text-transform: uppercase; }
.menu-plein nav { margin-top: 48px; }
.menu-plein nav a { display: flex; justify-content: space-between; align-items: baseline; padding: 18px 0; border-bottom: 1px solid var(--trait); font-size: 22px; font-weight: 300; letter-spacing: .14em; text-transform: uppercase; }
.menu-plein nav a span { font-size: 10px; color: var(--gris-2); letter-spacing: .2em; }
.menu-plein .pied-menu { margin-top: auto; text-align: center; }

/* ——— Accueil : la liste à gauche, le projet à droite ——— */
.accueil { padding: clamp(56px, 8vw, 104px) 0 clamp(80px, 10vw, 128px); }
.accueil .cadre { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 88px); align-items: center; }
.accueil h1 { font-size: clamp(34px, 3.4vw, 50px); line-height: 1.12; letter-spacing: -.025em; margin: 26px 0 22px; }
.accueil .chapeau { font-size: 17px; color: var(--gris); max-width: 30em; }
.liste-projets { margin-top: 44px; max-width: 440px; }
.liste-projets li { display: grid; grid-template-columns: 34px 1fr; align-items: center; }
.liste-projets .num { font-size: 9px; letter-spacing: .2em; color: var(--gris-2); }
.liste-projets button { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; text-align: left; padding: 14px 0 12px; border-bottom: 1px solid var(--trait); font-size: 11px; font-weight: 400; letter-spacing: .2em; text-transform: uppercase; color: var(--gris-2); transition: color .35s, border-color .35s; }
.liste-projets button:hover { color: var(--gris); }
.liste-projets button[aria-selected="true"] { color: var(--blanc); border-bottom-color: var(--blanc); }
.liste-projets button .fleche { opacity: 0; transform: translateX(-6px); transition: opacity .35s, transform .35s var(--ease); }
.liste-projets button[aria-selected="true"] .fleche { opacity: 1; transform: none; }
.liste-projets li[aria-hidden] { display: none; }

.scene { position: relative; }
.scene .ecran { position: relative; height: clamp(360px, 46vw, 600px); background: var(--noir); overflow: hidden; }
.scene .diapo { position: absolute; inset: 0; margin: 0; display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transition: opacity .7s var(--ease), visibility .7s; }
.scene .diapo.active { opacity: 1; visibility: visible; }
.scene .diapo.vertical video, .scene .diapo.vertical img { height: 100%; width: auto; max-width: none; }
.scene .diapo.paysage video, .scene .diapo.paysage img { width: 100%; height: 100%; object-fit: cover; }
.scene .diapo.logo img { width: min(62%, 460px); height: auto; }
.scene .fleches { position: absolute; inset: 0; display: flex; align-items: center; justify-content: space-between; pointer-events: none; }
.rond { pointer-events: auto; width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--trait-2); background: rgba(0, 0, 0, .7); display: grid; place-items: center; font-size: 16px; transition: border-color .3s, background-color .3s; }
.rond:hover, .rond:focus-visible { border-color: var(--blanc); background: var(--noir); }
.scene .legende { margin-top: 26px; }
.scene .legende .ligne-haut { display: flex; align-items: center; gap: 14px; }
.scene .legende .ligne-haut::after { content: ""; order: 2; width: 34px; height: 1px; background: var(--trait-2); }
.scene .legende .ligne-haut .compteur { order: 1; }
.scene .legende .ligne-haut .genre { order: 3; }
.scene .legende h2 { font-size: clamp(26px, 2.6vw, 38px); font-weight: 400; letter-spacing: -.015em; margin: 12px 0 18px; }
.scene .legende .bas { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding-top: 18px; border-top: 1px solid var(--trait); }
.scene .legende .bas p { font-size: 15px; color: var(--gris); }

/* ——— Sections centrées ——— */
.section { padding: clamp(80px, 10vw, 136px) 0; }
.intro { max-width: 860px; margin: 0 auto; text-align: center; padding: 0 var(--marge); }
.intro h2 { font-size: clamp(28px, 3vw, 42px); line-height: 1.25; letter-spacing: -.01em; margin-top: 22px; }
.intro h2 .gris { color: var(--gris-2); }
.intro .titre-section { font-size: clamp(28px, 2.8vw, 38px); font-weight: 400; letter-spacing: .02em; text-transform: uppercase; margin-top: 18px; }
.intro p.texte { margin: 24px auto 0; max-width: 40em; font-size: 16px; color: var(--gris); }
.tete-grille { display: flex; justify-content: flex-end; margin: 56px 0 28px; }

/* Cartes à fin contour (métiers) */
.cartes-metiers { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
.carte-metier { border: 1px solid var(--trait); display: flex; flex-direction: column; transition: border-color .4s var(--ease); }
.carte-metier:hover { border-color: var(--trait-2); }
.carte-metier .visuel { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--noir-2); }
.carte-metier .visuel video, .carte-metier .visuel img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.carte-metier:hover .visuel video, .carte-metier:hover .visuel img { transform: scale(1.03); }
.carte-metier .visuel::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.85), rgba(0,0,0,0) 55%); pointer-events: none; }
.carte-metier .texte { padding: 0 28px 30px; margin-top: -54px; position: relative; z-index: 1; }
.carte-metier h3 { font-size: 22px; font-weight: 400; letter-spacing: .06em; text-transform: uppercase; margin: 10px 0 12px; }
.carte-metier p { font-size: 14px; color: var(--gris); min-height: 4.8em; }
.carte-metier .lien-fleche { margin-top: 20px; }

.atouts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0 44px; margin-top: clamp(64px, 8vw, 104px); }
.atouts li { padding: 26px 0; border-top: 1px solid var(--trait); }
.atouts li:nth-child(-n+4) { border-top-color: var(--trait-2); }
.atouts h4 { font-size: 11px; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; display: flex; align-items: center; gap: 12px; }
.atouts h4::before { content: ""; width: 10px; height: 1px; background: var(--rouge); }
.atouts p { margin-top: 10px; font-size: 14px; color: var(--gris); }

/* Grille des réalisations (façon vitrine) */
.grille-projets { display: grid; grid-template-columns: repeat(4, 1fr); gap: 56px 22px; }
.projet { text-align: center; }
.projet .visuel { position: relative; aspect-ratio: 4 / 5; background: var(--noir-2); overflow: hidden; }
.projet .visuel video, .projet .visuel img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.projet .visuel.logo { display: grid; place-items: center; }
.projet .visuel.logo img { width: 66%; height: auto; object-fit: contain; }
.projet:hover .visuel video, .projet:hover .visuel img { transform: scale(1.03); }
.projet .visuel .pastille { position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%); }
.projet h3 { margin-top: 22px; font-size: 18px; font-weight: 500; letter-spacing: .01em; }
.projet .ref { margin-top: 4px; font-size: 13px; color: var(--gris); }
.projet .metiers { margin-top: 10px; font-size: 14px; font-weight: 500; }

/* Artistes : deux grands panneaux côte à côte */
.artistes { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; margin-top: 56px; }
.artiste { border: 1px solid var(--trait); display: flex; flex-direction: column; transition: border-color .4s var(--ease); }
.artiste:hover { border-color: var(--trait-2); }
.artiste .visuel { position: relative; aspect-ratio: 3 / 2; overflow: hidden; background: var(--noir-2); }
.artiste .visuel video, .artiste .visuel img { width: 100%; height: 100%; object-fit: cover; }
.artiste .visuel .pastille { position: absolute; left: 22px; top: 22px; }
.artiste .corps { padding: 34px clamp(24px, 3vw, 44px) 40px; display: flex; flex-direction: column; flex: 1; }
.artiste h3 { font-size: clamp(40px, 4.4vw, 64px); font-weight: 300; letter-spacing: .32em; text-transform: uppercase; line-height: 1; margin: 18px 0 20px; }
.artiste .presentation { font-size: 15px; color: var(--gris); max-width: 34em; }
.chiffres { display: grid; grid-template-columns: repeat(3, 1fr); margin: 30px 0 0; border-top: 1px solid var(--trait); border-bottom: 1px solid var(--trait); }
.chiffres div { padding: 18px 0 16px; }
.chiffres div + div { border-left: 1px solid var(--trait); padding-left: 18px; }
.chiffres dt { font-size: 9px; font-weight: 400; letter-spacing: .24em; text-transform: uppercase; color: var(--gris); }
.chiffres dd { margin: 10px 0 0; font-size: clamp(24px, 2.2vw, 32px); font-weight: 300; line-height: 1; }
.liste-lignes { margin-top: 26px; }
.liste-lignes a { display: grid; grid-template-columns: 34px 1fr auto; align-items: baseline; gap: 10px; padding: 13px 0; border-bottom: 1px solid var(--trait); transition: border-color .3s; }
.liste-lignes a:hover, .liste-lignes a:focus-visible { border-bottom-color: var(--blanc); }
.liste-lignes .num { font-size: 9px; letter-spacing: .2em; color: var(--gris-2); }
.liste-lignes .nom { font-size: 13px; font-weight: 400; letter-spacing: .16em; text-transform: uppercase; }
.liste-lignes .info { font-size: 13px; color: var(--gris); }
.artiste .note { margin-top: 12px; font-size: 11px; color: var(--gris-2); }
.artiste .liens, .univers .liens { display: flex; flex-wrap: wrap; gap: 10px 18px; }
.artiste .corps > .liens { margin-top: auto; padding-top: 28px; }
.artiste .liens a { font-size: 10px; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: var(--gris); border-bottom: 1px solid transparent; padding-bottom: 3px; transition: color .3s, border-color .3s; }
.artiste .liens a:hover, .artiste .liens a:focus-visible { color: var(--blanc); border-bottom-color: var(--rouge); }
.univers { margin-top: 26px; }
.univers li { display: grid; grid-template-columns: 80px 1fr; gap: 4px 16px; padding: 16px 0; border-bottom: 1px solid var(--trait); }
.univers .nom { grid-row: span 2; font-size: 13px; font-weight: 400; letter-spacing: .2em; text-transform: uppercase; }
.univers .info { font-size: 14px; color: var(--gris); }
.univers .liens { margin-top: 6px; }
.galerie-bibz { display: grid; grid-template-columns: 1fr 1.5fr; gap: 22px; margin-top: 22px; }
.galerie-bibz figure { margin: 0; aspect-ratio: 3 / 2; overflow: hidden; background: var(--noir-2); border: 1px solid var(--trait); }
.galerie-bibz figure.logo { aspect-ratio: 1; }
.galerie-bibz img { width: 100%; height: 100%; object-fit: cover; }
.galerie-bibz figure.logo { display: grid; place-items: center; background: var(--noir); }
.galerie-bibz figure.logo img { width: 78%; height: auto; object-fit: contain; }

/* PLB : film, identité et vitrine de produits */
.plb-medias { display: grid; grid-template-columns: 2fr 1fr; gap: 22px; margin-top: 56px; }
.plb-medias .visuel { position: relative; overflow: hidden; background: var(--noir-2); }
.plb-medias .visuel:first-child { aspect-ratio: 16 / 9; }
.plb-medias .visuel video, .plb-medias .visuel img { width: 100%; height: 100%; object-fit: cover; }
.plb-medias .visuel:last-child img { position: absolute; inset: 0; }
.plb-medias .pastille { position: absolute; left: 20px; bottom: 20px; }
.grille-produits { display: grid; grid-template-columns: repeat(4, 1fr); gap: 44px 22px; }
.produit { text-align: center; }
.produit .visuel { position: relative; aspect-ratio: 1; overflow: hidden; background: #e8e8e8; }
.produit .visuel img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.produit a:hover .visuel img, .produit a:focus-visible .visuel img { transform: scale(1.04); }
.produit .visuel .pastille { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); }
.produit h3 { margin-top: 18px; font-size: 15px; font-weight: 400; letter-spacing: .01em; }

/* Savoir-faire : matériel et outils, présentés comme une fiche technique */
.savoir { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 clamp(32px, 5vw, 88px); margin-top: 56px; }
.fiche h3 { padding-bottom: 18px; border-bottom: 1px solid var(--trait-2); color: var(--blanc); display: flex; align-items: center; gap: 12px; }
.fiche h3::before { content: ""; width: 10px; height: 1px; background: var(--rouge); }
.fiche li { display: grid; grid-template-columns: 120px 1fr; gap: 4px 20px; padding: 22px 0; border-bottom: 1px solid var(--trait); }
.fiche .role { grid-row: span 2; padding-top: 7px; font-size: 9px; font-weight: 400; letter-spacing: .24em; text-transform: uppercase; color: var(--gris-2); }
.fiche .nom { font-size: clamp(19px, 1.7vw, 24px); font-weight: 400; letter-spacing: .01em; }
.fiche .info { font-size: 14px; color: var(--gris); }

/* Studio */
.studio .elephant { width: min(380px, 72vw); margin: 0 auto 28px; }
.reperes { display: grid; grid-template-columns: repeat(3, 1fr); max-width: 860px; margin: clamp(56px, 7vw, 88px) auto 0; text-align: center; }
.reperes div + div { border-left: 1px solid var(--trait); }
.reperes strong { display: block; font-size: clamp(34px, 3.6vw, 52px); font-weight: 300; letter-spacing: .02em; line-height: 1; }
.reperes span { display: block; margin-top: 14px; font-size: 10px; font-weight: 400; letter-spacing: .26em; text-transform: uppercase; color: var(--gris); }

/* Contact */
.contact .courriel { display: inline-block; margin-top: 34px; font-size: clamp(22px, 3vw, 40px); font-weight: 300; letter-spacing: .02em; border-bottom: 1px solid var(--trait-2); padding-bottom: 6px; transition: border-color .3s; word-break: break-word; }
.contact .courriel:hover { border-bottom-color: var(--blanc); }
.contact .actions { margin-top: 36px; display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; }
.bouton-contour { display: inline-flex; align-items: center; gap: 12px; height: 50px; padding: 0 28px; border: 1px solid var(--trait-2); border-radius: 999px; font-size: 11px; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; transition: border-color .3s, background-color .3s, color .3s; }
.bouton-contour:hover, .bouton-contour:focus-visible { background: var(--blanc); color: var(--noir); border-color: var(--blanc); }
.contact .coordonnees { margin-top: 56px; display: flex; justify-content: center; gap: 12px 48px; flex-wrap: wrap; font-size: 13px; color: var(--gris); }
.contact .autre-contact { margin-top: clamp(64px, 8vw, 104px); }
.contact .autre-contact .courriel { margin-top: 22px; }

/* Formulaire de contact : champs à fin trait, choix en pastilles */
.formulaire { position: relative; max-width: 900px; margin: 56px auto 0; padding: clamp(28px, 4vw, 56px); border: 1px solid var(--trait); background: rgba(0, 0, 0, .82); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.formulaire .piege { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.champs { display: grid; grid-template-columns: 1fr 1fr; gap: 34px 36px; }
.champ { min-width: 0; }
.champ.large { grid-column: 1 / -1; }
.champ > label, .choix legend { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; width: 100%; padding: 0; font-size: 10px; font-weight: 400; letter-spacing: .24em; text-transform: uppercase; color: var(--blanc); }
.champ > label span, .choix legend span { font-size: 9px; letter-spacing: .2em; color: var(--gris-2); }
.champ > label .requis, .choix legend .requis { color: var(--gris); }
.champ input:not([type=checkbox]), .champ textarea {
  display: block; width: 100%; margin-top: 10px; padding: 12px 0; border: 0; border-bottom: 1px solid var(--trait-2); border-radius: 0;
  background: transparent; color: var(--blanc); font: inherit; font-size: 16px; font-weight: 300; letter-spacing: .01em;
  transition: border-color .3s; -webkit-appearance: none; appearance: none;
}
.champ textarea { resize: vertical; min-height: 150px; line-height: 1.6; }
.champ input::placeholder, .champ textarea::placeholder { color: var(--gris-2); opacity: 1; }
.champ input:not([type=checkbox]):focus, .champ textarea:focus { outline: 0; border-bottom-color: var(--blanc); }
.champ input:-webkit-autofill { -webkit-text-fill-color: var(--blanc); -webkit-box-shadow: 0 0 0 1000px var(--noir) inset; caret-color: var(--blanc); }
.champ.erreur input, .champ.erreur textarea { border-bottom-color: var(--rouge); }
.champ .message-erreur { margin-top: 8px; font-size: 12px; color: var(--rouge); }
.choix { margin: 0; padding: 0; border: 0; }
.choix .aide { margin-top: 8px; font-size: 13px; color: var(--gris); }
.pastilles { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.pastilles label { position: relative; cursor: pointer; }
.pastilles input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.pastilles span { display: inline-flex; align-items: center; height: 38px; padding: 0 18px; border: 1px solid var(--trait-2); border-radius: 999px; font-size: 10px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--gris); transition: color .3s, border-color .3s, background-color .3s; }
.pastilles label:hover span { color: var(--blanc); border-color: var(--blanc); }
.pastilles input:checked + span { background: var(--blanc); border-color: var(--blanc); color: var(--noir); }
.pastilles input:focus-visible + span { outline: 1px solid var(--blanc); outline-offset: 3px; }
.choix.erreur .pastilles span { border-color: rgba(214, 31, 38, .7); }
.consentement { display: grid; grid-template-columns: 20px 1fr; gap: 14px; align-items: start; }
.consentement input { -webkit-appearance: none; appearance: none; width: 18px; height: 18px; margin: 2px 0 0; border: 1px solid var(--trait-2); border-radius: 0; background: transparent; cursor: pointer; display: grid; place-items: center; transition: border-color .3s, background-color .3s; }
.consentement input:checked { background: var(--blanc); border-color: var(--blanc); }
.consentement input:checked::after { content: ""; width: 9px; height: 5px; border-left: 1.5px solid var(--noir); border-bottom: 1.5px solid var(--noir); transform: translateY(-1px) rotate(-45deg); }
.consentement input:focus-visible { outline: 1px solid var(--blanc); outline-offset: 3px; }
.consentement label { display: block; font-size: 14px; line-height: 1.6; color: var(--gris); text-transform: none; letter-spacing: 0; cursor: pointer; }
.consentement label a { color: var(--blanc); border-bottom: 1px solid var(--trait-2); }
.consentement.erreur input { border-color: var(--rouge); }
.consentement .message-erreur { grid-column: 2; margin-top: -6px; }
.envoi { display: flex; align-items: center; gap: 18px 28px; flex-wrap: wrap; margin-top: 40px; padding-top: 32px; border-top: 1px solid var(--trait); }
.bouton-contour.plein { background: var(--blanc); color: var(--noir); border-color: var(--blanc); }
.bouton-contour.plein:hover, .bouton-contour.plein:focus-visible { background: transparent; color: var(--blanc); }
.bouton-contour[disabled] { opacity: .5; cursor: wait; }
.etat { flex: 1; min-width: 220px; font-size: 14px; color: var(--gris); }
.etat:empty { display: none; }
.etat.ok { color: var(--blanc); display: flex; gap: 12px; align-items: baseline; }
.etat.ok::before { content: ""; flex-shrink: 0; width: 10px; height: 1px; background: var(--rouge); transform: translateY(-4px); }
.etat.ko { color: #ff8a8f; }
.etat a { color: var(--blanc); border-bottom: 1px solid var(--trait-2); }

/* ——— Pied de page ——— */
.pied { margin-top: 40px; padding: 72px var(--marge) 40px; border-top: 1px solid var(--trait); text-align: center; }
.pied .elephant { width: 74px; margin: 0 auto 22px; }
.pied .mot { font-size: 20px; letter-spacing: .4em; }
.pied nav { margin: 30px auto 0; display: flex; justify-content: center; flex-wrap: wrap; gap: 14px 30px; max-width: 980px; }
.pied nav a { font-size: 10px; font-weight: 300; letter-spacing: .3em; text-transform: uppercase; color: var(--gris); transition: color .3s; }
.pied nav a:hover, .pied nav a:focus-visible { color: var(--blanc); }
.pied nav + nav { margin-top: 18px; }
.pied .pied-projets a { color: var(--gris-2); }
.pied .pied-projets a:hover, .pied .pied-projets a:focus-visible { color: var(--blanc); }
.pied .adresse { margin-top: 30px; font-size: 11px; letter-spacing: .14em; color: var(--gris-2); }
.pied .droits { margin-top: 14px; font-size: 10px; letter-spacing: .26em; text-transform: uppercase; color: var(--gris-2); }

/* ——— Pages de texte ——— */
.page-texte { padding: clamp(72px, 9vw, 120px) 0 clamp(64px, 8vw, 104px); }
.page-texte .intro { margin-bottom: clamp(48px, 6vw, 80px); }
.page-texte .corps { max-width: 720px; margin: 0 auto; padding: 0 var(--marge); }
.page-texte .corps section { padding: 28px 0; border-top: 1px solid var(--trait); }
.page-texte .corps h2 { font-size: 13px; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; margin-bottom: 14px; }
.page-texte .corps p { color: var(--gris); font-size: 15px; }
.page-texte .corps p + p { margin-top: 10px; }
.page-texte .corps strong { color: var(--blanc); font-weight: 400; }
.page-texte .corps a { color: var(--blanc); border-bottom: 1px solid var(--trait-2); }
.page-texte .maj { margin-top: 18px; font-size: 12px; color: var(--gris-2) !important; }

/* ——— Apparition douce ——— */
.js .apparait { opacity: 0; transform: translateY(18px); transition: opacity 1s var(--ease), transform 1s var(--ease); }
.js .apparait.vu { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .bandeau .piste { animation: none; }
  *, *::before, *::after { transition-duration: .01ms !important; }
  .js .apparait { opacity: 1; transform: none; }
}

/* ——— Écrans moyens ——— */
@media (max-width: 1100px) {
  .entete nav .secondaire { display: none; }
  .accueil .cadre { grid-template-columns: 1fr; }
  .accueil .texte { order: 2; }
  .accueil .scene { order: 1; }
  .liste-projets { max-width: none; }
  .grille-projets { grid-template-columns: 1fr 1fr; }
  .atouts { grid-template-columns: 1fr 1fr; }
  .atouts li:nth-child(-n+4) { border-top-color: var(--trait); }
  .atouts li:nth-child(-n+2) { border-top-color: var(--trait-2); }
  .artistes { grid-template-columns: 1fr; }
  .grille-produits { grid-template-columns: repeat(2, 1fr); }
  .savoir { grid-template-columns: 1fr; gap: 56px; }
}

/* ——— Téléphones ——— */
@media (max-width: 760px) {
  body { font-size: 15px; }
  .entete .cadre { height: 64px; grid-template-columns: 40px 1fr 40px; }
  .entete nav { display: none; }
  .bouton-menu { display: inline-flex; }
  .mot { font-size: 17px; letter-spacing: .36em; text-align: center; }
  .accueil { padding-top: 24px; }
  .liste-projets { display: none; }
  .scene .ecran { height: 68vh; max-height: 560px; }
  .rond { width: 40px; height: 40px; }
  .scene .legende .bas { flex-direction: column; align-items: flex-start; }
  .cartes-metiers { grid-template-columns: 1fr; }
  .carte-metier .visuel { aspect-ratio: 4 / 3; }
  .atouts { grid-template-columns: 1fr; }
  .atouts li:nth-child(-n+2) { border-top-color: var(--trait); }
  .atouts li:first-child { border-top-color: var(--trait-2); }
  .grille-projets { grid-template-columns: 1fr; gap: 48px; }
  .artistes, .plb-medias { margin-top: 40px; }
  .chiffres div + div { padding-left: 12px; }
  .liste-lignes a { grid-template-columns: 28px 1fr; }
  .liste-lignes .info { grid-column: 2; }
  .univers li { grid-template-columns: 1fr; }
  .univers .nom { grid-row: auto; }
  .galerie-bibz { grid-template-columns: 1fr; gap: 12px; }
  .galerie-bibz figure.logo { aspect-ratio: 3 / 2; }
  .plb-medias { grid-template-columns: 1fr; gap: 12px; }
  .plb-medias .visuel:last-child { aspect-ratio: 1; }
  .grille-produits { gap: 32px 12px; }
  .produit h3 { font-size: 13px; }
  .produit .visuel .pastille { display: none; }
  .formulaire { margin-top: 40px; padding: 26px 20px 30px; }
  .champs { grid-template-columns: 1fr; gap: 28px; }
  .pastilles span { height: 36px; padding: 0 14px; }
  .envoi .bouton-contour { width: 100%; justify-content: center; }
  .fiche li { grid-template-columns: 1fr; }
  .fiche .role { grid-row: auto; padding-top: 0; }
  .reperes { grid-template-columns: 1fr; gap: 28px; }
  .reperes div + div { border-left: 0; border-top: 1px solid var(--trait); padding-top: 28px; }
  .tete-grille { justify-content: center; margin-top: 40px; }
  .pied nav { gap: 14px 22px; }
}

/* ═══════════ Pages intérieures (projets, publicité, matériel, contact) ═══════════ */
.page-tete { padding-top: clamp(56px, 8vw, 112px); padding-bottom: clamp(36px, 4vw, 56px); }
.fil { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-size: 10px; font-weight: 400; letter-spacing: .26em; text-transform: uppercase; color: var(--gris-2); }
.fil a { color: var(--gris); transition: color .3s; }
.fil a:hover, .fil a:focus-visible { color: var(--blanc); }
.fil span[aria-hidden] { color: var(--rouge); }
.page-tete h1 { margin-top: 30px; font-size: clamp(42px, 7.4vw, 118px); font-weight: 300; letter-spacing: .12em; text-transform: uppercase; line-height: .98; overflow-wrap: anywhere; }
.page-tete .genre { margin-top: 22px; }
.page-tete .chapeau { margin-top: 26px; max-width: 42em; font-size: clamp(17px, 1.45vw, 21px); line-height: 1.6; color: var(--gris); }
.fiche-projet { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: clamp(40px, 5vw, 64px) 0 0; border-top: 1px solid var(--trait-2); border-bottom: 1px solid var(--trait); }
.fiche-projet div { padding: 20px 20px 22px 0; min-width: 0; }
.fiche-projet div + div { padding-left: 20px; border-left: 1px solid var(--trait); }
.fiche-projet dt { font-size: 9px; font-weight: 400; letter-spacing: .26em; text-transform: uppercase; color: var(--gris-2); }
.fiche-projet dd { margin: 10px 0 0; font-size: 15px; line-height: 1.5; }
.fiche-projet dd a { border-bottom: 1px solid var(--trait-2); }

.couverture { position: relative; overflow: hidden; background: var(--noir-2); border: 1px solid var(--trait); aspect-ratio: 16 / 8; }
.couverture video, .couverture img { width: 100%; height: 100%; object-fit: cover; }
.couverture.logo { display: grid; place-items: center; background: radial-gradient(ellipse at 50% 55%, rgba(214, 31, 38, .16), rgba(0, 0, 0, 0) 62%), var(--noir-2); }
.couverture.logo img { width: min(46%, 520px); height: auto; object-fit: contain; }
.couverture-trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.couverture-trio .media { aspect-ratio: 9 / 16; overflow: hidden; background: var(--noir-2); border: 1px solid var(--trait); }
.couverture-trio video, .couverture-trio img { width: 100%; height: 100%; object-fit: cover; }

.bloc { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(28px, 5vw, 96px); padding-top: clamp(64px, 8vw, 112px); padding-bottom: clamp(64px, 8vw, 112px); border-top: 1px solid var(--trait); }
.couverture-zone { margin-bottom: clamp(64px, 8vw, 112px); }
.bloc .etiquette .num { font-size: 10px; letter-spacing: .26em; color: var(--rouge); }
.bloc .etiquette h2 { margin-top: 14px; font-size: clamp(24px, 2.4vw, 34px); font-weight: 400; letter-spacing: .04em; text-transform: uppercase; line-height: 1.2; }
.bloc .etiquette p { margin-top: 14px; font-size: 14px; color: var(--gris); max-width: 22em; }
.bloc .contenu > p { font-size: clamp(16px, 1.3vw, 19px); line-height: 1.75; color: var(--gris); max-width: 46em; }
.bloc .contenu > p + p { margin-top: 18px; }
.bloc .contenu strong { color: var(--blanc); font-weight: 400; }
.bloc .contenu > * + .galerie, .bloc .contenu > * + .livrables { margin-top: 36px; }
.bloc .contenu > .galerie + *, .bloc .contenu > .livrables + * { margin-top: 36px; }
.bloc.large { grid-template-columns: 1fr; gap: 40px; }

.livrables { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 40px; }
.livrables li { padding: 24px 0 26px; border-top: 1px solid var(--trait); }
.livrables li:nth-child(-n+2) { border-top-color: var(--trait-2); }
.livrables h3 { display: flex; align-items: center; gap: 12px; font-size: 11px; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; }
.livrables h3::before { content: ""; flex-shrink: 0; width: 10px; height: 1px; background: var(--rouge); }
.livrables p { margin-top: 10px; font-size: 15px; line-height: 1.65; color: var(--gris); }

.galerie { display: grid; gap: 22px; }
.galerie.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.galerie.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.galerie.g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.galerie.g5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.galerie figure { margin: 0; min-width: 0; }
.galerie .media { position: relative; overflow: hidden; background: var(--noir-2); border: 1px solid var(--trait); }
.galerie .media.v { aspect-ratio: 9 / 16; }
.galerie .media.t { aspect-ratio: 9 / 20; border-radius: 22px; }
.galerie .media.h { aspect-ratio: 16 / 9; }
.galerie .media.e { aspect-ratio: 16 / 10; }
.galerie .media.c { aspect-ratio: 1; }
.galerie .media.p { aspect-ratio: 4 / 5; }
.galerie .media.a { aspect-ratio: 1232 / 1600; }
.galerie .media.l { aspect-ratio: 1600 / 1036; }
.galerie .media video, .galerie .media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.galerie .media.entier img { object-fit: contain; }
.galerie .media.clair { background: #e8e8e8; }
.galerie figure:hover .media img, .galerie figure:hover .media video { transform: scale(1.025); }
.galerie figcaption { margin-top: 12px; font-size: 12px; line-height: 1.5; letter-spacing: .02em; color: var(--gris); }
.galerie figcaption strong { display: block; margin-bottom: 2px; color: var(--blanc); font-weight: 400; font-size: 13px; }
.galerie .large { grid-column: 1 / -1; }
.galerie .double { grid-column: span 2; }

.etiquettes { display: flex; flex-wrap: wrap; gap: 10px; }
.etiquettes li { display: inline-flex; align-items: center; height: 36px; padding: 0 16px; border: 1px solid var(--trait-2); border-radius: 999px; font-size: 10px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--gris); }
.liens-projet { display: flex; flex-wrap: wrap; gap: 12px; }
.liens-projet .bouton-contour { height: 44px; padding: 0 22px; }
.note-projet { margin-top: 22px; font-size: 13px; color: var(--gris-2); }
.page-projet .reperes { margin: 0; width: 100%; max-width: none; grid-template-columns: repeat(var(--n, 3), 1fr); }

.projet-suivant { display: block; padding-top: clamp(64px, 8vw, 112px); padding-bottom: clamp(64px, 8vw, 112px); border-top: 1px solid var(--trait); text-align: center; }
.projet-suivant .nom { display: inline-flex; align-items: center; gap: .4em; margin-top: 20px; font-size: clamp(38px, 7vw, 110px); font-weight: 300; letter-spacing: .12em; text-transform: uppercase; line-height: 1; transition: color .4s; }
.projet-suivant .nom span { font-size: .5em; transition: transform .5s var(--ease); }
.projet-suivant:hover .nom, .projet-suivant:focus-visible .nom { color: var(--blanc); }
.projet-suivant:hover .nom span, .projet-suivant:focus-visible .nom span { transform: translateX(10px); color: var(--rouge); }
.appel { padding: clamp(72px, 9vw, 128px) var(--marge); border-top: 1px solid var(--trait); text-align: center; }
.appel h2 { margin-top: 18px; font-size: clamp(28px, 3vw, 44px); font-weight: 300; line-height: 1.25; }
.appel .actions { margin-top: 34px; display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; }

/* Publicité : plateformes et méthode */
.plateformes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.plateformes.trois { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.plateforme { position: relative; display: flex; flex-direction: column; min-height: 300px; padding: clamp(28px, 3.2vw, 46px); border: 1px solid var(--trait); background: linear-gradient(160deg, rgba(255, 255, 255, .035), rgba(255, 255, 255, 0) 55%); transition: border-color .4s var(--ease); }
.plateforme:hover { border-color: var(--trait-2); }
.plateformes.trois .plateforme { min-height: 250px; }
.plateforme .badge-rouge { position: absolute; top: 24px; right: 24px; }
.plateforme .nom { margin-top: 16px; font-size: clamp(30px, 3.2vw, 50px); font-weight: 300; letter-spacing: .02em; line-height: 1.05; }
.plateformes.trois .plateforme .nom { font-size: clamp(26px, 2.4vw, 36px); }
.plateforme ul { margin-top: 20px; display: flex; flex-wrap: wrap; gap: 8px; }
.plateforme ul li { padding: 5px 12px; border: 1px solid var(--trait); border-radius: 999px; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--gris); }
.plateforme p { margin-top: auto; padding-top: 28px; font-size: 15px; line-height: 1.65; color: var(--gris); }
.publics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 44px; }
.publics li { padding: 26px 0; border-top: 1px solid var(--trait-2); }
.publics h3 { font-size: 22px; font-weight: 400; }
.publics p { margin-top: 12px; font-size: 15px; line-height: 1.65; color: var(--gris); }
.etapes { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0 28px; counter-reset: etape; }
.etapes li { padding-top: 22px; border-top: 1px solid var(--trait-2); counter-increment: etape; }
.etapes li::before { content: counter(etape, decimal-leading-zero); display: block; font-size: clamp(30px, 3vw, 44px); font-weight: 300; line-height: 1; color: var(--blanc); }
.etapes h3 { margin-top: 18px; font-size: 11px; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; }
.etapes p { margin-top: 10px; font-size: 14px; line-height: 1.6; color: var(--gris); }

/* Matériel : la caméra en vedette, puis les objets DJI sur fond sombre */
.vedette-materiel { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); border: 1px solid var(--trait); }
.vedette-materiel .media { position: relative; aspect-ratio: 1280 / 873; overflow: hidden; background: var(--noir-2); }
.vedette-materiel .media img { width: 100%; height: 100%; object-fit: cover; }
.vedette-materiel .texte { display: flex; flex-direction: column; justify-content: center; padding: clamp(28px, 4vw, 60px); }
.vedette-materiel h2 { margin-top: 14px; font-size: clamp(34px, 3.6vw, 56px); font-weight: 300; letter-spacing: .02em; }
.vedette-materiel p { margin-top: 16px; font-size: 15px; line-height: 1.7; color: var(--gris); }
.credit { margin-top: 18px; font-size: 11px; line-height: 1.5; color: var(--gris-2); }
.credit a { border-bottom: 1px solid var(--trait); }
.grille-materiel { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; margin-top: 22px; }
.objet { display: flex; flex-direction: column; border: 1px solid var(--trait); transition: border-color .4s var(--ease); }
.objet:hover { border-color: var(--trait-2); }
.objet .media { aspect-ratio: 1; display: grid; place-items: center; overflow: hidden; background: radial-gradient(circle at 50% 46%, #2b2b2b 0%, #141414 46%, #070707 100%); }
.objet .media img { width: 74%; height: auto; filter: drop-shadow(0 28px 36px rgba(0, 0, 0, .65)); transition: transform 1.2s var(--ease); }
.objet:hover .media img { transform: translateY(-6px) scale(1.04); }
.objet .texte { padding: 24px 26px 30px; border-top: 1px solid var(--trait); }
.objet h3 { margin-top: 10px; font-size: 22px; font-weight: 400; }
.objet p { margin-top: 10px; font-size: 14px; line-height: 1.65; color: var(--gris); }
.objet.drone { grid-column: span 2; flex-direction: row; }
.objet.drone .media { flex: 1.2; aspect-ratio: auto; min-height: 340px; }
.objet.drone .texte { flex: 1; border-top: 0; border-left: 1px solid var(--trait); display: flex; flex-direction: column; justify-content: center; }
.objet.drone h3 { font-size: clamp(26px, 2.4vw, 36px); font-weight: 300; }

@media (max-width: 1100px) {
  .fiche-projet { grid-template-columns: 1fr 1fr; }
  .fiche-projet div:nth-child(3) { padding-left: 0; border-left: 0; }
  .fiche-projet div:nth-child(n+3) { border-top: 1px solid var(--trait); }
  .galerie.g4, .galerie.g5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .plateformes.trois, .publics { grid-template-columns: 1fr; }
  .etapes { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px 28px; }
  .vedette-materiel { grid-template-columns: 1fr; }
  .grille-materiel { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .objet.drone { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  .page-tete h1 { letter-spacing: .06em; }
  .fiche-projet { grid-template-columns: 1fr; }
  .fiche-projet div, .fiche-projet div + div { padding: 16px 0; border-left: 0; }
  .fiche-projet div + div { border-top: 1px solid var(--trait); }
  .couverture { aspect-ratio: 4 / 3; }
  .couverture-trio { gap: 8px; }
  .bloc { grid-template-columns: 1fr; gap: 24px; }
  .livrables { grid-template-columns: 1fr; }
  .livrables li:nth-child(2) { border-top-color: var(--trait); }
  .galerie { gap: 12px; }
  .galerie.g2, .galerie.g3, .galerie.g4, .galerie.g5 { grid-template-columns: 1fr 1fr; }
  .galerie.g2.pile { grid-template-columns: 1fr; }
  .galerie .double { grid-column: 1 / -1; }
  .plateformes { grid-template-columns: 1fr; }
  .plateforme { min-height: 0; }
  .etapes { grid-template-columns: 1fr; }
  .grille-materiel { grid-template-columns: 1fr; }
  .objet.drone { flex-direction: column; }
  .objet.drone .media { min-height: 0; aspect-ratio: 1; }
  .objet.drone .texte { border-left: 0; border-top: 1px solid var(--trait); }
  .page-projet .reperes { grid-template-columns: 1fr 1fr; gap: 28px 0; }
  .page-projet .reperes div + div { border-top: 0; padding-top: 0; }
  .page-projet .reperes div:nth-child(odd) { border-left: 0; }
  .page-projet .reperes div:nth-child(even) { border-left: 1px solid var(--trait); }
}

/* ═══════════ Fond vivant : halo et éléphant en particules ═══════════ */
.fond-vivant { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.fond-vivant canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.fond-vivant .halo { position: absolute; width: 70vmax; height: 70vmax; border-radius: 50%; filter: blur(60px); opacity: .55; will-change: transform; }
.fond-vivant .halo.rouge { left: -18vmax; top: -22vmax; background: radial-gradient(circle, rgba(214, 31, 38, .30) 0%, rgba(214, 31, 38, 0) 62%); animation: derive-a 38s ease-in-out infinite alternate; }
.fond-vivant .halo.gris { right: -24vmax; bottom: -30vmax; background: radial-gradient(circle, rgba(140, 150, 170, .16) 0%, rgba(140, 150, 170, 0) 60%); animation: derive-b 46s ease-in-out infinite alternate; }
@keyframes derive-a { to { transform: translate(28vw, 34vh) scale(1.15); } }
@keyframes derive-b { to { transform: translate(-30vw, -26vh) scale(.9); } }
.fond-vivant::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 50%, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, .55) 100%); }
@media (prefers-reduced-motion: reduce) { .fond-vivant .halo { animation: none; } }

/* Liens de l'accueil vers les pages projets */
.projet { position: relative; }
.projet h3 a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.projet h3 a:focus-visible { outline: 0; }
.projet:has(h3 a:focus-visible) .visuel { outline: 1px solid var(--blanc); outline-offset: 4px; }
.artiste .lien-fleche.voir { align-self: flex-start; margin-top: 28px; }
.tete-grille.deux { gap: 16px 36px; flex-wrap: wrap; }
.fiche .plus { margin-top: 26px; }

/* Les cartes restent lisibles au-dessus du fond vivant */
.carte-metier, .artiste, .plateforme, .objet, .vedette-materiel { background-color: rgba(0, 0, 0, .6); }
.page-tete .chapeau { max-width: 36em; }

/* Page contact : les coordonnées en grandes cartes */
.contacts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.contacts.n1 { grid-template-columns: minmax(0, 720px); justify-content: center; }
.contacts.n2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.contact-carte { display: flex; flex-direction: column; gap: 18px; min-height: 240px; padding: clamp(28px, 3.2vw, 44px); border: 1px solid var(--trait); background: rgba(0, 0, 0, .6); transition: border-color .4s var(--ease), background-color .4s var(--ease); }
.contact-carte:hover, .contact-carte:focus-visible { border-color: var(--blanc); background: rgba(255, 255, 255, .04); }
.contact-carte .valeur { margin-top: auto; font-size: clamp(22px, 2.2vw, 32px); font-weight: 300; letter-spacing: .01em; overflow-wrap: anywhere; }
.contact-carte .action { font-size: 11px; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: var(--gris); transition: color .3s; }
.contact-carte:hover .action { color: var(--blanc); }
.contacts + .lieu { margin-top: 28px; text-align: center; }
@media (max-width: 900px) { .contacts, .contacts.n2 { grid-template-columns: 1fr; } .contact-carte { min-height: 0; } }
.contacts.n4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.livrables p a { color: var(--blanc); border-bottom: 1px solid var(--trait-2); white-space: nowrap; }
.bloc .contenu > p a { color: var(--blanc); border-bottom: 1px solid var(--trait-2); transition: border-color .3s; }
.bloc .contenu > p a:hover { border-bottom-color: var(--blanc); }

/* Outils IA : le logo de chaque outil à côté de son nom */
.fiche.outils li { grid-template-columns: 64px 1fr; gap: 0 22px; align-items: center; }
.fiche.outils .role { grid-row: auto; display: block; padding-top: 0; margin-bottom: 6px; }
.logo-outil { width: 64px; height: 64px; border-radius: 16px; display: grid; place-items: center; overflow: hidden; background: radial-gradient(circle at 50% 30%, #222, #0b0b0b 75%); border: 1px solid var(--trait-2); }
.logo-outil img { width: 34px; height: 34px; object-fit: contain; }
.logo-outil.plein { background: none; border: 0; }
.logo-outil.plein img { width: 100%; height: 100%; }
@media (max-width: 760px) { .fiche.outils li { grid-template-columns: 52px 1fr; gap: 0 16px; } .logo-outil { width: 52px; height: 52px; border-radius: 13px; } .logo-outil img { width: 28px; height: 28px; } }

/* Logos animés (vidéo sur fond noir) dans le carrousel, les cartes et les couvertures */
.scene .diapo.logo video { width: min(72%, 540px); height: auto; aspect-ratio: 1; object-fit: contain; }
.projet .visuel.logo video { width: 86%; height: auto; aspect-ratio: 1; object-fit: contain; }
.couverture.logo video { width: auto; height: 100%; aspect-ratio: 1; object-fit: contain; margin: 0 auto; }
.couverture.logo:has(video), .projet .visuel.logo:has(video) { background: #000; }

/* Page contact : un pictogramme par moyen de contact */
.icone-contact { width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center; color: var(--blanc); background: radial-gradient(circle at 50% 30%, #232323, #0b0b0b 75%); border: 1px solid var(--trait-2); transition: border-color .4s var(--ease), transform .5s var(--ease); }
.icone-contact svg { width: 26px; height: 26px; }
.contact-carte.whatsapp .icone-contact { background: radial-gradient(circle at 50% 30%, rgba(37, 211, 102, .22), rgba(37, 211, 102, .04) 75%); border-color: rgba(37, 211, 102, .45); }
.contact-carte.whatsapp .icone-contact svg { width: 28px; height: 28px; }
.contact-carte:hover .icone-contact { border-color: var(--blanc); transform: translateY(-2px); }
.contact-carte.whatsapp:hover { border-color: #25D366; }
.contact-carte .surtitre { margin-top: 6px; }
@media (max-width: 900px) { .contacts.n4 { grid-template-columns: 1fr; } .contact-carte { gap: 14px; padding: 26px 24px 28px; } }
.scene .diapo.logo video.large, .projet .visuel.logo video.large { aspect-ratio: 4 / 3; }