/* =========================================================
   Page d'accueil (index.html / index-fr.html)
   Chargée après style.css ; tout est limité aux pages dont le
   <body> porte la classe « home ». Reprend les variables, boutons,
   cartes (.news-card) et apparitions (.reveal) du site.

   Système : une grille (conteneur de 1120 px, 12 colonnes pour
   les blocs texte + image), un espacement vertical unique entre
   sections, un seul style de carte.
   ========================================================= */

.home {
  --home-space: clamp(80px, 10vw, 136px);   /* entre deux sections */
  --home-gap:   clamp(24px, 3.4vw, 56px);   /* gouttière de la grille */
  --home-head:  clamp(36px, 4vw, 56px);     /* titre de section → contenu */
  --home-ink:   #060a13;                    /* fond du hero (photo assombrie) */
}

/* ──────────── Rythme des sections ──────────── */
.home main > section { padding: var(--home-space) 0; }
.home-soft {
  background: var(--bg-soft);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.home h2 {
  font-size: clamp(30px, 4.2vw, 50px);
  line-height: 1.08;
  letter-spacing: -0.022em;
  margin: 0 0 16px;
}

/* En-tête centré des sections pleine largeur (offre, galerie,
   actualités, écosystème, contact) */
.home-head {
  max-width: 760px;
  margin: 0 auto var(--home-head);
  text-align: center;
}
.home-head p { margin: 0; color: var(--muted); font-size: 17px; line-height: 1.55; }

/* Petit libellé au-dessus des titres des blocs texte + image */
.home-eyebrow {
  margin: 0 0 18px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brand);
}

.home-text {
  margin: 0;
  color: var(--muted);
  font-size: 17px;
  line-height: 1.65;
}
.home-text + .home-text { margin-top: 14px; }
.home-actions { margin-top: 32px; display: flex; flex-wrap: wrap; gap: 14px; }

/* ──────────── Blocs texte + image (12 colonnes : 5 + 7) ──────────── */
.home-split {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--home-gap);
  align-items: center;
}
.home-split-text  { grid-column: span 5; }
.home-split-media { grid-column: span 7; margin: 0; }

.home-media picture { display: block; }
.home-media img {
  width: 100%;
  height: auto;
  border-radius: var(--radius);
  border: 1px solid var(--line);
}
.home-media figcaption {
  margin-top: 12px;
  font-size: 13px;
  color: var(--muted);
}

@media (max-width: 860px) {
  .home-split { grid-template-columns: 1fr; }
  .home-split-text, .home-split-media { grid-column: auto; }
}

/* =========================================================
   1. Hero plein écran
   ========================================================= */
.home main > .home-hero {
  position: relative;
  isolation: isolate;
  min-height: calc(100vh - 64px);
  min-height: calc(100svh - 64px);
  display: flex;
  align-items: flex-end;
  padding: 120px 0 clamp(56px, 10vh, 112px);
  overflow: hidden;
  background: var(--home-ink);
  color: #fff;
}

/* Visuel : photo (toujours présente, image de repli) + vidéo éventuelle */
.home-hero-visual {
  position: absolute;
  inset: 0;
  z-index: -1;
}
.home-hero-visual picture { display: block; height: 100%; }
.home-hero-visual img,
.home-hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 70% 50%;
}
.home-hero-video { opacity: 0; transition: opacity 0.8s ease; }
.home-hero-video.is-playing { opacity: 1; }

/* Voile sombre : lisibilité du texte, identique en thème clair et sombre */
.home-hero-visual::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(6,10,19,0.86) 0%, rgba(6,10,19,0.62) 34%, rgba(6,10,19,0.10) 64%, rgba(6,10,19,0) 100%),
    linear-gradient(0deg, rgba(6,10,19,0.55) 0%, rgba(6,10,19,0) 42%);
}

.home-hero-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 26px;
  max-width: 620px;
  animation: home-rise 0.9s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes home-rise {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: none; }
}

.home-hero h1 {
  font-size: clamp(40px, 6vw, 80px);
  line-height: 1.02;
  letter-spacing: -0.03em;
  color: #fff;
}
.home-hero-lead {
  max-width: 520px;
  margin: 0;
  font-size: clamp(17px, 1.6vw, 20px);
  line-height: 1.55;
  color: rgba(255,255,255,0.84);
}

/* Badge « Micron d'Argent » */
.home-badge {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 7px 14px 7px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.22);
  background: rgba(255,255,255,0.08);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: #fff;
}
.home-badge svg { flex-shrink: 0; color: #d6dde8; }

/* Bouton pause de la vidéo (visible seulement si une vidéo joue) */
.home-video-toggle {
  position: absolute;
  right: 4vw;
  bottom: 24px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.3);
  background: rgba(6,10,19,0.45);
  color: #fff;
  font-size: 12px;
  cursor: pointer;
}
.home-video-toggle:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* Écrans en portrait (téléphones, tablettes) : la photo (4:5), puis le texte
   sur fond sombre, pour ne pas masquer les capteurs */
@media (max-aspect-ratio: 4/5) {
  .home main > .home-hero { display: block; min-height: 0; padding: 0 0 56px; }
  .home-hero-visual { position: relative; aspect-ratio: 4 / 5; max-height: 68svh; width: 100%; z-index: auto; }
  .home-hero-visual img, .home-hero-video { object-position: 50% 50%; }
  .home-hero-visual::after { background: linear-gradient(0deg, var(--home-ink) 0%, rgba(6,10,19,0) 32%); }
  .home-hero-content { position: relative; gap: 20px; margin-top: -40px; }
  .home-video-toggle { top: 16px; bottom: auto; }
}

/* =========================================================
   2. Chiffres clés
   ========================================================= */
.home main > .home-proof { padding: clamp(40px, 5vw, 64px) 0; }

.home-metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin: 0;
}
.home-metric {
  padding: 4px 24px;
  text-align: center;
  border-left: 1px solid var(--line);
}
.home-metric:first-child { border-left: none; }
.home-metric dd {
  margin: 0;
  font-size: clamp(30px, 4vw, 48px);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
  white-space: nowrap;
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
          background-clip: text;
}
.home-metric dt {
  margin-top: 8px;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.home-metric { display: flex; flex-direction: column-reverse; }

@media (max-width: 600px) {
  .home-metrics { grid-template-columns: 1fr; gap: 20px; }
  .home-metric { border-left: none; padding: 0; }
}

/* =========================================================
   3. Le défi — une phrase forte
   ========================================================= */
.home-statement { font-size: clamp(32px, 4.4vw, 54px); }

/* =========================================================
   4. Partenaires — bandeau de logos qui défile (CSS seul)
   La liste des logos est écrite deux fois (la copie est masquée
   aux lecteurs d'écran). La piste glisse de la moitié de sa
   largeur, soit exactement une liste, puis repart de zéro : le
   raccord est invisible. L'espace entre logos est porté par chaque
   logo (padding), pas par « gap », pour que cette moitié tombe
   juste. Une liste (7 logos : ≈ 1 040 à 1 260 px selon l'écran)
   reste plus large que le bandeau (92 % de l'écran, 1 120 px au
   plus) : jamais de trou. Avec moins de logos, augmenter le padding.
   Taille de chaque logo : attributs width / height, calculés par
   scripts/accueil-images.mjs pour une même taille perçue.
   ========================================================= */
.home main > .home-backers { padding: clamp(36px, 4.5vw, 56px) 0; }
.home .home-backers-title {
  margin: 0 0 clamp(18px, 2.2vw, 26px);
  text-align: center;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.home-marquee {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 12%, #000 88%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 12%, #000 88%, transparent 100%);
}
.home-marquee-track {
  display: flex;
  align-items: center;
  width: max-content;
  margin: 0;
  padding: 0;
  list-style: none;
  animation: home-marquee 45s linear infinite;
}
.home-marquee:hover .home-marquee-track { animation-play-state: paused; }
@keyframes home-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.home-logo {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 64px;
  padding: 0 clamp(24px, 3vw, 40px);
}
.home-logo picture { display: contents; }
/* Gris en thème clair (couleurs d'origine au survol), blanc en thème sombre */
.home-logo img {
  max-width: none;
  height: auto;
  filter: brightness(0);
  opacity: 0.55;
  transition: filter 0.25s ease, opacity 0.25s ease;
}
.home-logo:hover img { filter: none; opacity: 1; }
:root:not(.light) .home-logo img { filter: brightness(0) invert(1); opacity: 0.72; }
:root:not(.light) .home-logo:hover img { filter: brightness(0) invert(1); opacity: 1; }

/* =========================================================
   5. Offre — deux cartes (même style que les actualités)
   ========================================================= */
.home-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--home-gap);
}
.home-cards .news-card-body { padding: 28px 30px 30px; }
@media (max-width: 760px) {
  .home-cards { grid-template-columns: 1fr; }
}

/* =========================================================
   6. Galerie « Ce que nous avons mesuré »
   Grille sur ordinateur, carrousel à faire glisser sur mobile.
   ========================================================= */
.home-gallery {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--home-gap);
}
/* Deux vignettes : deux colonnes, centrées */
.home-gallery--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 920px; margin-inline: auto; }
.home-shot { display: flex; flex-direction: column; color: inherit; }
.home-shot-media {
  aspect-ratio: 5 / 4;
  overflow: hidden;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--bg-soft);
}
.home-shot-media picture { display: block; height: 100%; }
.home-shot-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}
.home-shot:hover .home-shot-media img { transform: scale(1.04); }
.home-shot:focus-visible { outline: 2px solid var(--brand); outline-offset: 4px; border-radius: var(--radius); }
.home-shot-title { margin: 18px 0 6px; font-size: 17px; font-weight: 600; line-height: 1.35; }
.home-shot-meta  { margin: 0; font-size: 14px; color: var(--muted); line-height: 1.5; }
.home-shot .glass-arrow { padding-top: 12px; }
.home-shot:hover .glass-arrow { gap: 8px; }

@media (max-width: 760px) {
  .home-gallery {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    margin-inline: -4vw;
    padding: 0 4vw 12px;
    scrollbar-width: thin;
  }
  .home-shot { flex: 0 0 80%; scroll-snap-align: center; }
}

/* =========================================================
   7. Actualités (section générée, inchangée sur le fond)
   ========================================================= */
.home .news-home { border-top: none; } /* les sections voisines portent déjà un filet */
.home .news-home .news-grid { margin-top: var(--home-head); gap: var(--home-gap); }

/* =========================================================
   Réduire les animations (réglage du système)
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .home .reveal { opacity: 1; transform: none; transition: none; }
  .home-hero-content { animation: none; }
  .home .news-card,
  .home .news-card-media img,
  .home-shot-media img,
  .home .btn { transition: none; }
  .home .news-card:hover,
  .home .btn:hover { transform: none; }
  .home .news-card:hover .news-card-media img,
  .home-shot:hover .home-shot-media img { transform: none; }
  .home-gallery { scroll-behavior: auto; }

  /* Logos fixes : une seule liste, sans fondu, en grille centrée */
  .home-marquee { -webkit-mask-image: none; mask-image: none; }
  .home-marquee-track {
    animation: none;
    display: grid;
    grid-template-columns: repeat(4, auto);
    justify-content: center;
    row-gap: 20px;
    width: auto;
  }
  .home-marquee-track > [aria-hidden="true"] { display: none; }
  .home-logo img { transition: none; }
}
@media (prefers-reduced-motion: reduce) and (max-width: 600px) {
  .home-marquee-track { grid-template-columns: repeat(2, auto); }
}