/* ============================================================
   INVprod — style-02-home.css  (FEUILLE DE STYLE « PAGE D'ACCUEIL »)
   ------------------------------------------------------------
   RÔLE : styles propres à la page d'accueil et à ses grands blocs :
     - le header fixe en haut (barre de navigation) ;
     - le « hero » : la grande vidéo plein écran d'ouverture ;
     - la bande clients défilante (marquee) ;
     - le manifesto / texte d'introduction ;
     - la liste des services (lignes interactives) ;
     - le portfolio / médias (grilles d'images et vidéos) ;
     - la « façade » YouTube (vignette cliquable qui charge la vidéo).

   ORDRE DE CHARGEMENT — TRÈS IMPORTANT :
   Ce fichier est la 2e des 4 tranches issues du découpage de style.css,
   chargées dans cet ordre par inc/site-header.php et mon-espace/inc/top.php :
        01-base  →  02-home  →  03-pages  →  04-responsive
   Il s'appuie sur les variables et la typographie définies dans 01-base
   (var(--noir), var(--ligne-forte), var(--ease)...). Ne pas réordonner :
   en CSS, la dernière règle chargée l'emporte (cascade).

   CHARTE v9 : noir/blanc/gris uniquement (aucune couleur d'accent),
   Montserrat, texture rayée, coins droits, cadres blancs fins,
   pas d'ombre ni de dégradé — esprit studio de production premium.
   ============================================================ */
/* ---------- Header (pleine largeur) ----------
   Barre de navigation collée en haut de l'écran, sur toute la largeur. */
.site-header{
  /* position:fixed = la barre reste TOUJOURS visible en haut de l'écran,
     même quand on fait défiler la page (elle ne « scrolle » pas avec elle). */
  position:fixed;top:0;left:0;right:0;
  z-index:60;                    /* passe au-dessus du contenu de la page */
  background:rgba(0,0,0,.2);     /* noir très transparent au sommet de la page */
  transition:background .3s var(--ease),border-color .3s var(--ease);  /* changement doux au scroll */
  border-bottom:1px solid transparent;  /* trait invisible au repos, activé une fois défilé */
}
/* Classe « scrolled » ajoutée en JavaScript dès qu'on descend un peu :
   la barre se densifie pour rester lisible par-dessus le contenu. */
.site-header.scrolled{
  background:rgba(0,0,0,.92);    /* noir presque opaque */
  /* backdrop-filter:blur = FLOUTE ce qui se trouve DERRIÈRE la barre
     (effet « verre dépoli »). Le préfixe -webkit- couvre Safari. */
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
  border-bottom-color:var(--ligne);  /* le trait fin du bas devient visible */
}
/* Intérieur du header : logo à gauche, navigation à droite.
   justify-content:space-between = les deux blocs sont poussés aux extrémités. */
.header-inner{
  width:100%;
  display:flex;align-items:center;justify-content:space-between;
  gap:clamp(16px,3vw,48px);
  height:clamp(64px,7vw,88px);   /* hauteur de la barre, fluide selon l'écran */
  padding:0 clamp(18px,3vw,44px);
}
.logo{flex-shrink:0;display:flex;align-items:center}  /* flex-shrink:0 = le logo ne rétrécit jamais */
.logo img{height:clamp(30px,3.4vw,40px);width:auto}   /* width:auto = garde les proportions du logo */

/* Menu de navigation (liens alignés horizontalement). */
.main-nav{
  display:flex;align-items:center;
  gap:clamp(16px,2.4vw,40px);
  min-width:0;
}
.main-nav a{
  font-size:clamp(.66rem,.85vw,.76rem);font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;
  color:rgba(255,255,255,.9);    /* blanc légèrement atténué au repos */
  padding:8px 0;position:relative;  /* position:relative pour placer le soulignement animé */
  white-space:nowrap;            /* jamais de retour à la ligne au milieu d'un lien */
  transition:color .2s;
}
/* Soulignement animé sous chaque lien (sauf le bouton nav-cta).
   Astuce : le trait part invisible (left:0 mais right:100% = largeur nulle,
   collé à droite) ; au survol right passe à 0, il se déploie de gauche à droite. */
.main-nav a:not(.nav-cta)::after{
  content:"";position:absolute;left:0;right:100%;bottom:2px;
  height:1px;background:var(--blanc);
  transition:right .3s var(--ease);
}
.main-nav a:hover,.main-nav a.active{color:var(--blanc)}  /* lien plein blanc au survol / actif */
.main-nav a:not(.nav-cta):hover::after,
.main-nav a:not(.nav-cta).active::after{right:0}  /* déploie le soulignement */

/* Bouton d'appel à l'action dans le menu (ex. « Nous contacter ») :
   présenté comme un bouton cadré plutôt qu'un simple lien souligné. */
.main-nav .nav-cta{
  border:1px solid var(--ligne-forte);
  padding:12px 24px;
  color:var(--blanc);
  transition:background .25s var(--ease),color .25s var(--ease);
}
.main-nav .nav-cta:hover,
.main-nav .nav-cta.active{background:var(--blanc);color:var(--noir)}  /* inversion noir/blanc au survol */

/* Bouton « Mon compte client » : plein (inversé) pour ressortir dans le header */
.main-nav .nav-account{
  display:inline-flex;align-items:center;gap:8px;  /* icône + texte alignés */
  background:var(--blanc);color:var(--noir);border-color:var(--blanc);  /* plein blanc = ressort du header */
}
.main-nav .nav-account:hover{background:transparent;color:var(--blanc)}  /* s'inverse au survol */
.main-nav .nav-account svg{flex:0 0 auto}  /* l'icône garde sa taille (ne s'étire pas) */

/* Burger : le bouton à trois barres du menu mobile.
   display:none ici = caché sur grand écran ; il n'apparaît qu'en dessous
   de 1000px (voir @media plus bas), quand le menu horizontal ne tient plus. */
.nav-toggle{
  display:none;
  position:relative;z-index:75;
  width:48px;height:48px;
  background:none;border:1px solid var(--ligne-forte);
  cursor:pointer;
  flex-shrink:0;
}
/* Les trois barres du burger (des <span> positionnés à la main). */
.nav-toggle span{
  position:absolute;left:12px;right:12px;height:2px;
  background:var(--blanc);
  transition:transform .3s var(--ease),opacity .2s;  /* anime la transformation en croix */
}
.nav-toggle span:nth-child(1){top:16px}  /* barre du haut */
.nav-toggle span:nth-child(2){top:23px}  /* barre du milieu */
.nav-toggle span:nth-child(3){top:30px}  /* barre du bas */
/* Quand le menu est ouvert (.open), les barres se transforment en croix (×) :
   la 1re et la 3e pivotent et se rejoignent, celle du milieu disparaît. */
.nav-toggle.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle.open span:nth-child(2){opacity:0}
.nav-toggle.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* --- Menu mobile : en dessous de 1000px de large (tablette / téléphone) ---
   @media = ces règles ne s'appliquent QUE sur les écrans concernés. */
@media(max-width:1000px){
  .nav-toggle{display:block}     /* le burger apparaît */
  /* Le menu devient un panneau plein écran, centré, empilé verticalement. */
  .main-nav{
    position:fixed;inset:0;z-index:70;     /* inset:0 = collé aux 4 bords de l'écran */
    background:#000;                       /* opaque : plus de page visible derrière */
    flex-direction:column;justify-content:center;align-items:center;text-align:center;
    gap:clamp(20px,4.5vh,36px);
    padding:max(76px,12vh) 22px max(40px,8vh);  /* dégage le burger en haut */
    /* Caché par défaut : invisible ET non focusable (visibility:hidden). */
    visibility:hidden;opacity:0;
    transition:opacity .3s var(--ease),visibility .3s;
    overflow-y:auto;               /* si beaucoup de liens : on peut faire défiler */
  }
  .main-nav.open{visibility:visible;opacity:1}  /* .open (ajouté en JS) affiche le menu */
  .main-nav a{
    width:auto;max-width:100%;
    font-size:clamp(1.2rem,6vw,1.75rem);   /* liens beaucoup plus gros au doigt */
    font-weight:800;letter-spacing:.08em;line-height:1.15;
    /* État de départ de l'animation d'entrée : invisibles et décalés vers le bas. */
    opacity:0;transform:translateY(16px);
    transition:opacity .35s var(--ease),transform .35s var(--ease),color .2s;
  }
  .main-nav a:not(.nav-cta)::after{display:none}  /* pas de soulignement bancal */
  .main-nav.open a{opacity:1;transform:none}      /* à l'ouverture : ils remontent en fondu */
  /* Effet « cascade » : chaque lien apparaît légèrement après le précédent. */
  .main-nav.open a:nth-child(1){transition-delay:.05s}
  .main-nav.open a:nth-child(2){transition-delay:.1s}
  .main-nav.open a:nth-child(3){transition-delay:.15s}
  .main-nav.open a:nth-child(4){transition-delay:.2s}
  .main-nav.open a:nth-child(5){transition-delay:.25s}
  .main-nav.open a:nth-child(6){transition-delay:.3s}
  .main-nav .nav-cta{padding:14px 28px;max-width:90vw}
}

/* ---------- Hero ----------
   La grande section d'ouverture : vidéo plein écran + titre en bas. */
.hero{
  position:relative;              /* repère pour positionner la vidéo et le texte par-dessus */
  min-height:100svh;              /* svh = hauteur d'écran « stable » sur mobile (barre du navigateur incluse) */
  display:flex;align-items:flex-end;  /* le contenu est aligné EN BAS de la section */
  padding:0 0 clamp(56px,9vh,110px);
  overflow:hidden; /* contient la vidéo sur-cadrée du parallaxe */
}
.hero-video{
  position:absolute;inset:0;width:100%;height:100%;
  /* object-fit:cover = la vidéo remplit tout le cadre sans se déformer,
     quitte à rogner les bords (comme un fond photo plein écran). */
  object-fit:cover;
  /* Retouche colorimétrique légère : un peu plus sombre et contrastée
     pour que le texte blanc reste lisible par-dessus. */
  filter:brightness(.8) saturate(.9) contrast(1.04);
  /* léger sur-cadrage pour permettre le parallaxe sans découvrir les bords */
  /* --hero-shift est mis à jour en JS au défilement : la vidéo glisse
     doucement (parallaxe) ; scale(1.14) l'agrandit de 14 % pour que ce
     glissement ne laisse jamais apparaître de bande noire sur les bords. */
  transform:translateY(var(--hero-shift,0px)) scale(1.14);
  will-change:transform;          /* prévient le navigateur du mouvement (fluidité) */
}
.work-media{will-change:transform}
/* Accessibilité : si l'internaute réduit les animations, on fige la vidéo. */
@media(prefers-reduced-motion:reduce){
  .hero-video{transform:none}
}
.hero-overlay{
  position:absolute;inset:0;
  /* Aucun dégradé : la vidéo s'affiche telle quelle. */
  background:none;
}
.hero-content{position:relative;z-index:2;width:100%}  /* z-index:2 = le texte passe DEVANT la vidéo */
/* Petit sur-titre au-dessus du titre principal (« eyebrow »), précédé
   d'un trait blanc ajouté via ::before. */
.hero-eyebrow{
  font-size:clamp(.7rem,1.2vw,.82rem);font-weight:700;
  letter-spacing:.34em;text-transform:uppercase;
  color:var(--gris-clair);
  margin-bottom:clamp(18px,2.6vw,30px);
  display:flex;align-items:center;gap:18px;
}
.hero-eyebrow::before{content:"";flex:0 0 56px;height:1px;background:var(--ligne-forte)}  /* le petit trait, largeur fixe 56px */
.hero h1{max-width:11em}          /* limite la largeur du titre pour un retour à la ligne maîtrisé */
.hero-sub{
  margin-top:clamp(18px,2.4vw,26px);
  font-size:clamp(.95rem,1.6vw,1.15rem);
  font-weight:400;color:var(--gris-clair);
  max-width:38em;
}
.hero-cta{margin-top:clamp(28px,4vw,44px);display:flex;gap:16px;flex-wrap:wrap}  /* boutons côte à côte, passent à la ligne si étroit */
/* Indice « défiler » vertical, dans le coin bas-droit du hero. */
.scroll-hint{
  position:absolute;right:clamp(24px,4vw,52px);bottom:clamp(56px,9vh,110px);
  z-index:2;
  font-size:.66rem;font-weight:700;letter-spacing:.3em;text-transform:uppercase;
  color:var(--gris-moyen);
  writing-mode:vertical-rl;       /* écrit le texte VERTICALEMENT (de haut en bas) */
  display:flex;align-items:center;gap:12px;
}
/* Le petit trait vertical animé sous « scroll ». */
.scroll-hint::after{
  content:"";width:1px;height:54px;background:var(--ligne-forte);
  animation:scrollPulse 2.2s var(--ease) infinite;  /* boucle sans fin */
}
/* Animation du trait : il « grandit » depuis le haut, puis se rétracte
   vers le bas — évoque un mouvement de descente répété. */
@keyframes scrollPulse{
  0%{transform:scaleY(0);transform-origin:top}
  45%{transform:scaleY(1);transform-origin:top}
  55%{transform:scaleY(1);transform-origin:bottom}
  100%{transform:scaleY(0);transform-origin:bottom}
}
@media(max-width:700px){.scroll-hint{display:none}}  /* masqué sur petit écran (pas de place) */

/* ---------- Bande clients ----------
   Le bandeau qui fait défiler en boucle les noms/logos des clients
   (effet « marquee », comme un bandeau d'actualités qui défile). */
.clients-band{
  border-top:1px solid var(--ligne);
  border-bottom:1px solid var(--ligne);
  padding:26px 0;
  overflow:hidden;                /* cache la partie du bandeau qui sort de l'écran */
  background:rgba(0,0,0,.5);
}
.clients-band .band-label{
  font-size:.66rem;font-weight:700;letter-spacing:.3em;
  text-transform:uppercase;color:var(--gris-moyen);
  text-align:center;margin-bottom:14px;
}
.marquee{display:flex;overflow:hidden;user-select:none}  /* user-select:none = texte non sélectionnable (purement décoratif) */
/* La « piste » qui contient les logos et glisse horizontalement.
   Le HTML duplique cette piste pour donner l'illusion d'un défilement
   sans fin (quand la 1re sort à gauche, la copie prend le relais). */
.marquee-track{
  display:flex;flex-shrink:0;align-items:center;
  min-width:100%;justify-content:space-around;
  gap:clamp(36px,6vw,84px);
  padding-right:clamp(36px,6vw,84px);
  /* Animation : glisse en continu, 36s par cycle, vitesse constante (linear),
     à l'infini. Voir @keyframes marquee plus bas. */
  animation:marquee 36s linear infinite;
}
/* Au survol de la souris, le défilement se met en pause (le visiteur
   peut lire un nom tranquillement). */
.marquee:hover .marquee-track{animation-play-state:paused}
.marquee-track span{
  white-space:nowrap;             /* chaque nom reste sur une seule ligne */
  font-size:clamp(.82rem,1.4vw,1.02rem);
  font-weight:600;letter-spacing:.22em;text-transform:uppercase;
  color:var(--gris-clair);
}
.marquee-track .client-logo{display:flex;align-items:center}
.marquee-track .client-logo img{
  height:clamp(30px,4vw,44px);width:auto;max-width:200px;
  object-fit:contain;             /* le logo entier reste visible (pas de rognage) */
  /* logos ramenés au noir/blanc de la charte */
  /* grayscale(1) = noir & blanc ; brightness/contrast éclaircissent pour la lisibilité sur fond noir. */
  filter:grayscale(1) brightness(1.35) contrast(1.05);
  opacity:.85;
  transition:opacity .25s,filter .25s;
}
.marquee-track .client-logo img:hover{opacity:1;filter:grayscale(1) brightness(1.6)}  /* logo plus lumineux au survol */
/* Le déplacement : de sa position d'origine (0) à -100% de sa largeur
   (tout à gauche). Combiné à la piste dupliquée = boucle fluide. */
@keyframes marquee{to{transform:translateX(-100%)}}
/* Accessibilité : pas de défilement si l'internaute réduit les animations —
   on affiche alors les logos sagement centrés, sur plusieurs lignes. */
@media(prefers-reduced-motion:reduce){
  .marquee-track{animation:none;flex-wrap:wrap;justify-content:center;padding:0}
}

/* ---------- Manifesto / intro ----------
   Le grand texte de positionnement du studio et son bloc d'introduction. */
.manifesto{
  font-size:clamp(1.35rem,3.2vw,2.3rem);
  font-weight:600;line-height:1.35;
  letter-spacing:-.01em;
  max-width:30em;
  color:var(--blanc);
}
/* Les mots mis en <em> ne sont PAS en italique ici : on les grise
   au contraire pour créer un contraste discret dans la phrase. */
.manifesto em{font-style:normal;color:var(--gris-moyen)}
/* Grille en deux colonnes : la principale (1.4fr) est plus large que la
   colonne latérale (1fr). « fr » = fraction de l'espace disponible.
   align-items:end = les deux colonnes sont alignées par le bas. */
.intro-grid{
  display:grid;grid-template-columns:1.4fr 1fr;
  gap:clamp(28px,5vw,72px);align-items:end;
}
.intro-side p{color:var(--gris-clair);font-size:.98rem;margin-bottom:26px;max-width:34em}
@media(max-width:880px){.intro-grid{grid-template-columns:1fr}}  /* sur petit écran : une seule colonne empilée */

/* ---------- Services : lignes interactives (accueil) ----------
   Liste des prestations affichée en lignes cliquables (style « index »),
   qui s'inversent en blanc au survol. */
.services-index{border-top:1px solid var(--ligne)}
/* Chaque ligne = une grille de 4 colonnes : numéro / titre (extensible) /
   prix (auto = juste sa largeur) / flèche (30px). */
.service-line{
  display:grid;
  grid-template-columns:64px 1fr auto 30px;
  gap:clamp(14px,3vw,40px);
  align-items:baseline;           /* aligne les textes sur leur ligne de base */
  padding:clamp(20px,3vw,30px) clamp(8px,1.5vw,18px);
  border-bottom:1px solid var(--ligne);
  /* Transition sur padding-left aussi : au survol la ligne se décale
     légèrement vers la droite (voir :hover plus bas). */
  transition:background .25s var(--ease),color .25s var(--ease),padding-left .25s var(--ease);
}
.service-line .num{
  font-size:.74rem;font-weight:700;letter-spacing:.18em;color:var(--gris-moyen);
  transition:color .25s;
}
.service-line .titre{
  font-size:clamp(1.15rem,2.6vw,1.9rem);
  font-weight:800;text-transform:uppercase;letter-spacing:-.01em;
  line-height:1.15;
}
.service-line .prix{
  font-size:.82rem;font-weight:600;letter-spacing:.12em;
  color:var(--gris-clair);white-space:nowrap;
  transition:color .25s;
}
/* La flèche est invisible et légèrement décalée à gauche au repos ;
   elle apparaît en glissant au survol de la ligne. */
.service-line .fleche{
  font-weight:800;opacity:0;transform:translateX(-8px);
  transition:opacity .25s var(--ease),transform .25s var(--ease);
}
/* Survol : la ligne s'inverse (fond blanc, texte noir) et se décale à droite. */
.service-line:hover{
  background:var(--blanc);color:var(--noir);
  padding-left:clamp(16px,2.5vw,30px);
}
.service-line:hover .num,
.service-line:hover .prix{color:rgba(0,0,0,.6)}  /* numéro et prix en gris foncé sur le fond blanc */
.service-line:hover .fleche{opacity:1;transform:none}  /* la flèche apparaît et se remet en place */
@media(max-width:700px){
  .service-line{grid-template-columns:42px 1fr auto}  /* sur mobile : plus que 3 colonnes */
  .service-line .fleche{display:none}                 /* on retire la flèche (colonne supprimée) */
  .service-line .prix{font-size:.72rem}
}

/* ---------- Portfolio / médias ----------
   Vignettes des réalisations : cadre blanc fin + image qui zoome au survol. */
.work-media{
  position:relative;overflow:hidden;  /* overflow:hidden = le zoom de l'image reste dans le cadre */
  border:1px solid var(--ligne-forte);
  background:var(--gris-fonce);
}
.work-media img{
  /* aspect-ratio:16/10 = format imposé au cadre, quelle que soit l'image d'origine ;
     object-fit:cover = l'image remplit ce cadre en rognant si besoin. */
  width:100%;aspect-ratio:16/10;object-fit:cover;
  filter:saturate(.85);           /* couleurs légèrement désaturées au repos */
  transition:transform .8s var(--ease),filter .5s;
}
.work-media--portrait img{aspect-ratio:4/5}  /* variante portrait (plus haute que large) */
/* Au survol de la vignette : léger zoom (scale 1.045) + couleurs pleines. */
.work:hover .work-media img{transform:scale(1.045);filter:saturate(1)}
/* Légende sous chaque vignette : titre à gauche, catégorie à droite. */
.work-caption{
  display:flex;justify-content:space-between;align-items:baseline;gap:14px;
  padding:14px 2px 0;
}
.work-caption strong{
  font-size:.86rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.08em;
}
.work-caption span{
  font-size:.7rem;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;
  color:var(--gris-moyen);white-space:nowrap;
}

/* grille asymétrique (accueil) ----------------------------------------
   Grille de 12 colonnes (repeat(12,1fr)) qui sert de « trame ». Chaque
   vignette occupe une PLAGE de colonnes via grid-column: début / fin.
   Ex. « 1/8 » = de la colonne 1 (incluse) à la 8 (exclue), soit 7 colonnes.
   Résultat : une composition volontairement irrégulière, plus vivante
   qu'une grille régulière. */
.asym-grid{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:clamp(16px,2.6vw,30px);
}
.asym-grid .work:nth-child(1){grid-column:1/8}              /* large, à gauche */
.asym-grid .work:nth-child(2){grid-column:8/13;align-self:end}  /* à droite, calée en bas */
.asym-grid .work:nth-child(3){grid-column:1/6}
.asym-grid .work:nth-child(4){grid-column:6/13}
/* Sur mobile : chaque vignette occupe toute la largeur (les 12 colonnes).
   !important force cette règle par-dessus les placements ci-dessus. */
@media(max-width:700px){.asym-grid .work{grid-column:1/13 !important}}

/* grille standard (page réalisations) — 3 colonnes égales. */
.portfolio-grid{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(16px,2.6vw,30px);
}
.video-grid{
  display:grid;grid-template-columns:repeat(2,1fr);  /* vidéos par 2 */
  gap:clamp(16px,2.6vw,30px);
  margin-bottom:var(--s2);
}
/* Adaptation progressive du nombre de colonnes selon la largeur d'écran. */
@media(max-width:980px){.portfolio-grid{grid-template-columns:repeat(2,1fr)}}  /* tablette : 2 colonnes */
@media(max-width:640px){.portfolio-grid,.video-grid{grid-template-columns:1fr}}  /* mobile : 1 colonne */

/* vidéo mise en avant (accueil) */
.featured{margin-bottom:clamp(24px,4vw,44px)}
.featured .yt{aspect-ratio:16/9}   /* format vidéo classique 16:9 */

/* ---------- Façade YouTube ----------
   « Façade » = on n'insère PAS tout de suite le lecteur YouTube (lourd et
   traqueur). On affiche juste une vignette légère avec un bouton lecture ;
   ce n'est qu'AU CLIC que le JS remplace la vignette par la vraie iframe
   YouTube. Gain : page plus rapide et respect de la vie privée. */
.yt{
  position:relative;display:block;width:100%;
  aspect-ratio:16/9;               /* réserve le format vidéo (évite les sauts de mise en page) */
  background-color:var(--gris-fonce);
  background-size:cover;background-position:center;  /* la vignette (miniature) est posée en background */
  cursor:pointer;overflow:hidden;
}
/* Voile sombre par-dessus la vignette (assombri au repos, éclairci au survol). */
.yt::before{
  content:"";position:absolute;inset:0;
  background:rgba(0,0,0,.35);
  transition:background .3s;
}
.yt:hover::before{background:rgba(0,0,0,.15)}
/* Le rectangle du bouton lecture, parfaitement centré.
   top/left:50% + translate(-50%,-50%) = astuce standard de centrage exact. */
.yt-play{
  position:absolute;top:50%;left:50%;
  transform:translate(-50%,-50%);
  width:84px;height:58px;
  border:1px solid var(--ligne-forte);
  background:rgba(0,0,0,.55);
  display:flex;align-items:center;justify-content:center;
  transition:background .25s;
}
/* Le triangle « play » est dessiné SANS image : un bloc sans largeur dont
   seule la bordure gauche est colorée (les bords haut/bas transparents
   forment la pointe). Technique CSS classique du triangle. */
.yt-play span{
  border-left:15px solid var(--blanc);
  border-top:9px solid transparent;
  border-bottom:9px solid transparent;
  margin-left:4px;                /* recentre optiquement le triangle */
  transition:border-color .25s;
}
.yt:hover .yt-play{background:var(--blanc)}          /* bouton blanc au survol */
.yt:hover .yt-play span{border-left-color:var(--noir)}  /* triangle noir au survol */
/* La vraie iframe YouTube, injectée en JS au clic : elle recouvre tout le cadre. */
.yt iframe{position:absolute;inset:0;width:100%;height:100%;border:0}