/* Feuille de style du site vitrine.
 *
 * Toutes les valeurs de ce fichier sont RELEVÉES sur www.tenzenarcade.com le 22 septembre
 * 2026 (styles calculés, pas estimés à l'œil) : palette, tailles de police, épaisseurs,
 * rembourrages de sections, cotes des colonnes et des images. Les captures de
 * docs/reference/ font foi en cas de doute.
 *
 * Le style vit ICI et nulle part ailleurs : l'admin édite le contenu et la structure,
 * jamais la mise en forme (décision 1 de la spec). C'est ce qui garantit « l'identique »
 * et évite de reconstruire un Strikingly.
 */

:root {
  --nuit: #2b3e59;          /* boutons, navigation, sous-titres des sections claires */
  --nuit-survol: #334a6a;
  --beige: #e1e3dc;         /* barre de navigation, relevé sur .navbar */
  --bandeau: #d6d8cf;       /* bandeau de contact — plus SOMBRE que la navigation, lu au pixel */
  --titre: #1d2023;
  --texte: #50555c;         /* corps des textes de partenaires */
  --blanc: #fff;
  --voile: rgba(102, 102, 99, 0.35); /* posé sur toute photo de fond */
  --entete: 78px;           /* 32 px de bandeau + 46 px de navigation */
}

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

html { scroll-behavior: smooth; scroll-padding-top: var(--entete); }

body {
  margin: 0;
  font-family: Raleway, Helvetica, Arial, sans-serif;
  font-weight: 400;
  color: var(--titre);
  background: var(--blanc);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; }

a { color: inherit; }

/* 1020 px de boîte pour 980 px de contenu utile : c'est la cote relevée sur le site
   d'origine, où l'en-tête va de 230 à 1210 sur un écran de 1440. Le rembourrage est DANS
   la boîte pour qu'il devienne la marge latérale sur téléphone sans rien décaler ailleurs. */
.conteneur { width: 100%; max-width: 1020px; margin: 0 auto; padding: 0 20px; }
/* Les cinq colonnes de partenaires occupent 995 px, un peu plus que les 980 des autres. */
.conteneur-large { max-width: 1035px; }

/* ── En-tête ─────────────────────────────────────────────────────────────────────
   Collé en haut, comme sur le site d'origine, où il se pose sur la photo du héros au
   défilement. */
.entete { position: sticky; top: 0; z-index: 10; }

.bandeau { background: var(--bandeau); font-size: 12px; }
.bandeau-contenu { display: flex; align-items: center; justify-content: flex-end; gap: 16px; height: 32px; }
/* Bleu nuit, et non le gris des textes courants : relevé à rgb(43, 62, 89) sur le site
   d'origine, en 12 px. */
.bandeau-mail { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; color: var(--nuit); }
.bandeau-mail:hover { color: var(--nuit-survol); }
.bandeau-social { display: inline-flex; color: var(--nuit); }
.bandeau-social:hover { color: var(--nuit-survol); }

/* Le sélecteur FR | EN, à droite du bandeau, dans la même couleur que le contact. */
.langues { display: inline-flex; align-items: center; gap: 6px; color: var(--nuit); }
.langue-lien { color: var(--nuit); text-decoration: none; }
.langue-lien:hover { color: var(--nuit-survol); }
.langue-lien[aria-current="page"] { font-weight: 700; }

.nav { background: var(--beige); }
.nav-contenu { display: flex; align-items: center; justify-content: space-between; height: 46px; }

.marque { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; }
.marque img { width: 48px; height: 46px; object-fit: contain; }
.marque span { font-size: 20px; font-weight: 700; color: #2d2d2c; }

.nav-liens { display: flex; align-items: stretch; height: 46px; }
.nav-lien {
  display: inline-flex; align-items: center;
  padding: 15px 12px;
  font-size: 16px;
  color: var(--nuit);
  text-decoration: none;
  text-transform: uppercase;
  white-space: nowrap;
}
/* L'entrée de la section en cours de lecture : rectangle plein bleu nuit, coins droits
   — c'est ainsi sur le site d'origine, et non en capsule comme les boutons. */
.nav-lien:hover { color: var(--nuit-survol); }
.nav-lien.actif { background: var(--nuit); color: var(--blanc); }

/* ── Sections ────────────────────────────────────────────────────────────────────
   Le fond photo passe par un <img> placé derrière le contenu, jamais par un style en
   ligne : la CSP du site l'interdirait, et une balise se charge de façon paresseuse. */
.section { position: relative; padding: 80px 0; overflow: hidden; }
.section-contenu { position: relative; z-index: 1; text-align: center; }
/* `inset: 0` puis `height` explicite : le JavaScript des fonds qui traînent remplace la
   hauteur et le décalage haut par des valeurs calculées (public/site.js). Sans lui, ces
   deux déclarations suffisent — l'image reste centrée et cadrée, et c'est un rendu
   correct, jamais cassé. `will-change` prévient le navigateur qu'elle va être translatée :
   sans lui, chaque image de défilement repeint la photo entière. */
.fond {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
.fond[data-parallaxe] { will-change: transform; }
.voile { position: absolute; inset: 0; background: var(--voile); }
.sur-photo, .sur-photo .section-titre, .sur-photo .appel-titre { color: var(--blanc); }

/* ── Boutons ─────────────────────────────────────────────────────────────────────
   Capsule bleu nuit, libellé en gras. Trois tailles, relevées telles quelles. */
.bouton {
  display: inline-block;
  padding: 12px 18px;
  border: none; border-radius: 1000px;
  background: var(--nuit); color: var(--blanc);
  font-family: inherit; font-size: 16px; font-weight: 700; line-height: 1;
  text-decoration: none; cursor: pointer;
  transition: background 0.15s;
}
.bouton:hover { background: var(--nuit-survol); }
.bouton-inactif { cursor: default; opacity: 0.6; }
.bouton-large { display: block; width: 100%; padding: 12px 40px; font-size: 18px; line-height: 1.2; }

/* ── Héros ───────────────────────────────────────────────────────────────────────
   Hauteur de la fenêtre moins l'en-tête. Le titre tient sur deux lignes, chacune dans
   son propre <span> : la coupure vient de la donnée, pas du gabarit. */
/* 100vh moins la seule barre de navigation (48 px), et non moins l'en-tête entier : c'est
   la hauteur relevée — 852 px pour une fenêtre de 900. Le bandeau de contact défile donc
   au-dessus du héros plutôt que de le raccourcir. */
.section-heros { display: flex; align-items: center; min-height: calc(100vh - 48px); }
.section-heros .section-contenu { width: 100%; }
.heros-titre { margin: 0; font-size: 72px; font-weight: 700; line-height: 1.4; color: var(--blanc); }
.heros-titre span { display: block; }
.heros-sous-titre { margin: 8px 0 0; font-size: 18px; line-height: 1.45; color: var(--blanc); }

/* Le retour d'inscription, posé au-dessus du formulaire : il est lu sur la photo du
   héros, donc il lui faut son propre fond — un simple texte blanc s'y perdrait. */
.newsletter-message {
  max-width: 490px; margin: 32px auto -16px; padding: 11px 14px; border-radius: 4px;
  font-size: 16px; line-height: 1.4; text-align: left;
}
.newsletter-message.merci { background: rgba(255, 255, 255, 0.92); color: #2f5233; }
.newsletter-message.erreur { background: rgba(255, 255, 255, 0.92); color: #a3352c; }

.newsletter { width: 100%; max-width: 490px; margin: 40px auto 0; }
.newsletter-ligne { display: flex; gap: 10px; }
.newsletter input[type="text"], .newsletter input[type="email"] {
  width: 100%; margin-bottom: 10px;
  padding: 11px 10px;
  border: none; border-radius: 4px;
  background: var(--blanc); color: #444;
  font-family: inherit; font-size: 18px;
}
/* Pot de miel : invisible pour un humain, rempli par presque tous les robots. `display:
   none` suffirait aux plus simples ; le sortir de l'écran trompe aussi ceux qui ignorent
   les champs masqués. */
.pot-de-miel { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

/* Preuve du consentement, sous le bouton (spec § 5.1). Le héros affiche toujours son
   texte en blanc (.heros-sous-titre ci-dessus, quelle que soit la photo de fond) : la
   même discrétion que le « texte d'aide » du back-office (public/admin.css, .aide) se
   traduit ici par une opacité réduite plutôt que par un gris, qui se perdrait sur la
   photo. */
.newsletter-consentement { margin: 10px 0 0; font-size: 13px; line-height: 1.4; color: rgba(255, 255, 255, 0.75); }

/* ── Appel à l'action ────────────────────────────────────────────────────────────
   Deux variantes, et deux seulement (voir le gabarit). Les rembourrages ci-dessous ne
   sont pas ronds par hasard : ils rendent aux trois sections d'appel les hauteurs
   relevées sur le site d'origine — 309 px pour le bandeau, 351 et 324 pour les compactes. */
.appel-titre { margin: 0; font-weight: 400; }
.appel-texte a { color: inherit; }
.section-appel .bouton { margin-top: 25px; }

.appel-bandeau { padding: 50px 0; }
.appel-bandeau .appel-titre { font-size: 48px; line-height: 1.45; }
.appel-bandeau .appel-texte { margin-top: 30px; font-size: 20px; line-height: 1.5; }
.appel-bandeau .bouton { padding: 16px 28px; font-size: 20px; line-height: 1.1; }

.appel-compact { padding: 90px 0; }
.appel-compact .appel-titre { font-size: 36px; line-height: 1.4; }
.appel-compact .appel-texte { margin-top: 0; font-size: 18px; line-height: 1.5; }

/* ── Titres de section claire ────────────────────────────────────────────────────*/
.section-titre { margin: 0; font-size: 36px; font-weight: 400; line-height: 1.4; color: var(--titre); }
.section-chapeau { margin: 15px 0 0; font-size: 18px; line-height: 1.45; color: var(--nuit); }

/* ── Équipe ──────────────────────────────────────────────────────────────────────
   Colonnes FLUIDES plafonnées à leur cote relevée, jamais fixes : `repeat(3, 209px)`
   déborderait du conteneur dès qu'une fenêtre passe sous la largeur de la grille, et la
   première colonne sortirait de l'écran à gauche. `minmax(0, …)` les laisse rétrécir —
   c'est ce que fait le site d'origine — et le zéro (plutôt que `auto`) est ce qui permet
   à une colonne de grille de descendre sous la largeur de son contenu. */
.membres {
  display: grid; grid-template-columns: repeat(3, minmax(0, 209px)); justify-content: center;
  gap: 40px 41px; margin: 56px 0 0; padding: 0; list-style: none;
}
.membre img { width: 100%; max-width: 195px; aspect-ratio: 1; object-fit: contain; }
.membre-nom { margin: 10px 0 0; font-size: 18px; font-weight: 400; line-height: 1.45; color: var(--titre); }
.membre-role { margin: 4px 0 0; font-size: 18px; line-height: 1.45; color: var(--nuit); }

/* ── Partenaires ─────────────────────────────────────────────────────────────────
   Même règle que pour l'équipe : colonnes fluides plafonnées à 183 px. */
.partenaires {
  display: grid; grid-template-columns: repeat(5, minmax(0, 183px)); justify-content: center;
  gap: 32px 16px; margin: 39px 0 0; padding: 0; list-style: none;
  text-align: left;
}
.partenaire img { width: 100%; max-width: 183px; aspect-ratio: 1; border-radius: 999px; object-fit: cover; }
.partenaire-nom {
  display: inline-block; margin: 16px 0 0;
  font-size: 28px; line-height: 1.5; color: var(--titre);
  /* Souligné par `text-decoration` et non par une bordure : un nom qui passe à la ligne
     — « Game Over Arcade » — doit voir chacune de ses lignes soulignée, comme sur le site
     d'origine, là où une bordure ne soulignerait que la dernière. */
  text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px;
}
.partenaire-texte { margin-top: 12px; font-size: 18px; line-height: 1.45; color: var(--texte); }

/* ── Pied de page ────────────────────────────────────────────────────────────────
   Sur le site d'origine, c'est une barre d'actions FIXE, en bas de l'écran, et elle
   n'existe que sur téléphone : un grand écran n'a pas de pied de page. Reproduit tel
   quel — l'écart se verrait tout de suite à la comparaison des captures. */
.pied { display: none; }

@media (max-width: 900px) {
  /* Sur téléphone, le site d'origine n'a PAS d'en-tête : ni bandeau de contact, ni barre
     de navigation, pas même au défilement. La navigation, c'est la barre d'actions du bas
     — Accueil, Stock, Contact. Reproduit tel quel : l'écart se verrait tout de suite à la
     comparaison des captures, et le mail comme Facebook restent joignables par cette
     barre et par la section Stock. */
  :root { --entete: 0px; }
  .entete { display: none; }
  .section-heros { min-height: 100vh; }

  .appel-bandeau .appel-titre { font-size: 38px; }
  .appel-compact .appel-titre { font-size: 32px; }
  .section-titre { font-size: 32px; }

  .section-appel .bouton, .appel-bandeau .bouton { display: block; width: 100%; }

  /* Prénom et Nom s'empilent : sur le site d'origine, les trois champs font toute la
     largeur sur téléphone. */
  .newsletter-ligne { display: block; }

  .membres { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 16px; }
  .membre img { max-width: none; }
  /* Un dernier membre orphelin — trois membres sur deux colonnes — se met au centre,
     comme sur le site d'origine, plutôt que de rester collé à gauche. */
  .membre:last-child:nth-child(odd) { grid-column: 1 / -1; justify-self: center; width: 50%; }

  .partenaires { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 16px; }
  .partenaire img { max-width: none; }
  .partenaire-nom { font-size: 24px; }

  .pied {
    display: block; position: fixed; bottom: 0; left: 0; right: 0; z-index: 20;
    background: var(--bandeau); border-top: 1px solid rgba(0, 0, 0, 0.08);
  }
  .pied-contenu { display: flex; padding: 0; }
  .pied a {
    flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px;
    padding: 8px 4px;
    font-size: 13px; text-align: center; text-decoration: none; color: var(--texte);
  }
  /* Le lien Facebook double celui du bandeau : sur téléphone, la barre d'origine n'en
     porte que trois. */
  .pied a:nth-child(n + 4) { display: none; }
  body { padding-bottom: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .bouton { transition: none; }
}