/*
   * La palette Golteo : le match du soir.
   *
   * Bleu nuit de tribune, vert de pelouse, creme pour tout le texte. Un seul
   * accent par ecran : il porte les actions, les scores et ce qui se clique ;
   * la brique ne sort que pour ce qui va mal.
   *
   * Le vert est celui du logo, #0B6E4F. Les boutons pleins le portent tel quel
   * avec du creme dessus — le lock-up de la marque, repris tel quel. Ce qui
   * doit se lire en vert sur fond sombre prend une teinte plus claire de la
   * meme famille : meme teinte 161°, plus haut sur l'echelle.
   */
  :root {
    --fond: #0B1622; --surface: #132234; --surface-2: #17293D; --surface-3: #1E3247;
    --bordure: #1E3247; --texte: #F2EBE0; --attenue: #A9B4C0;
    --vert-golteo: #0B6E4F; --vert-golteo-fonce: #085740;
    --accent: #34D5A2; --accent-eteint: #2AB88B; --brique: #E0522F;
    /* Un liseré plus clair que la ligne courante, pour les survols : un second
       accent vif au meme endroit rendrait l'ecran illisible. */
    --bordure-vive: #2E4A66;
    --rayon: 10px; --rayon-sm: 6px;
    /*
     * Titrage en grotesque tres gras, interlettrage negatif : le panneau
     * d'affichage de stade. Le courant reste neutre et lisible en tableau
     * dense. Aucune police n'est telechargee — une vitrine qui attend un
     * fichier distant avant de s'afficher perd ceux qui l'ont ouverte.
     */
    --titrage: 'Archivo Black', 'Arial Black', 'Helvetica Neue', Impact, sans-serif;
    color-scheme: dark;
  }
  * { box-sizing: border-box; }
  html { scroll-behavior: smooth; }
  body {
    margin: 0; background: var(--fond); color: var(--texte);
    font: 16px/1.6 Inter, 'Segoe UI', system-ui, -apple-system, sans-serif;
    /* Non negociable pour un jeu de gestion : sans chiffres tabulaires, un
       classement danse colonne par colonne des qu'un 1 croise un 8. */
    font-variant-numeric: tabular-nums;
  }
  /* Un grain très léger sur toute la page. Sans lui, les grands aplats sombres
     font « fond par défaut » ; avec, la page a une matière. */
  body::before {
    content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
    opacity: .5;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='b'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3CfeColorMatrix values='0 0 0 0 .95 0 0 0 0 .92 0 0 0 0 .84 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23b)'/%3E%3C/svg%3E");
  }
  .large { max-width: 1120px; margin: 0 auto; padding: 0 20px; }
  a { color: inherit; }

  /* --------------------------------------------------- l'en-tête ---- */
  header {
    position: sticky; top: 0; z-index: 10;
    background: color-mix(in srgb, var(--fond) 88%, transparent);
    backdrop-filter: blur(8px); border-bottom: 1px solid var(--bordure);
  }
  header .large { display: flex; align-items: center; gap: 22px; height: 58px; }
  /* La marque, c'est le mot : pas d'icone a cote, rien dans le O. */
  /* L'embleme et le mot, cote a cote : c'est la variante horizontale du
     handoff. L'embleme y tient lieu de G — le mot reprend a son O, ils sont a
     la meme hauteur, et ce qui les separe est l'ecart des lettres (0.3 fois
     cette hauteur) et non une marge choisie. */
  .marque {
    --marque: 22px;
    display: inline-flex; align-items: center;
    gap: calc(var(--marque) * .3); text-decoration: none;
  }
  /* Les 8 % sont une correction optique, pas une taille : a hauteur
     rigoureusement egale — mesuree — l'embleme parait plus petit que les
     lettres, ses chanfreins mordant un cinquieme de sa hauteur contre un
     sixieme pour elles. */
  .marque img { display: block; height: calc(var(--marque) * 1.08); width: auto; }
  /*
   * Le logotype pose en masque, et non en <img> : `currentColor` ne traverse
   * pas une image, qui est un document a part. En masque, c'est le fond de
   * l'element qu'on colore — un seul fichier sert donc sur fond clair comme
   * sur fond sombre.
   */
  .logotype {
    display: block;
    height: var(--marque);
    aspect-ratio: 243.34 / 50.4;
    background: currentColor;
    -webkit-mask: url(/marque/golteo-logotype-accole.svg) no-repeat center / contain;
    mask: url(/marque/golteo-logotype-accole.svg) no-repeat center / contain;
  }
  nav.principale { display: flex; gap: 18px; font-size: .92rem; }
  nav.principale a { color: var(--attenue); text-decoration: none; }
  nav.principale a:hover { color: var(--texte); }
  .actions { margin-left: auto; display: flex; gap: 8px; align-items: center; }
  .bouton {
    display: inline-block; padding: 9px 17px; border-radius: 3px;
    background: var(--vert-golteo); color: #F4F3F0; text-decoration: none;
    font-weight: 700; font-size: .86rem; border: 1px solid transparent;
    letter-spacing: .08em; text-transform: uppercase;
  }
  .bouton:hover { background: var(--vert-golteo-fonce); }
  .bouton.creux { background: transparent; border-color: var(--bordure); color: var(--texte); }
  .bouton.gros { padding: 14px 28px; font-size: .95rem; letter-spacing: .12em; }

  /* ---------------------------------------------------------------- */
  /* Se connecter sans quitter la page                                 */
  /* ---------------------------------------------------------------- */

  .connexion { position: relative; }
  .connexion .volet {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    width: 268px;
    display: grid;
    gap: 9px;
    padding: 14px;
    background: var(--surface);
    border: 1px solid var(--bordure);
    border-radius: var(--rayon, 10px);
    box-shadow: 0 16px 40px rgba(0, 0, 0, .5);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity .14s ease, transform .14s ease, visibility .14s;
    z-index: 60;
  }
  /* Le survol ouvre, mais le clavier aussi : sans `focus-within`, le volet se
     refermerait sous les doigts de qui navigue a la tabulation. */
  .connexion:hover .volet,
  .connexion:focus-within .volet {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
  /* Une zone morte entre le bouton et le volet romprait le survol : on la
     comble sans rien afficher. */
  .connexion .volet::before {
    content: '';
    position: absolute;
    inset: -10px 0 auto;
    height: 10px;
  }
  .connexion .volet label { display: grid; gap: 4px; }
  .connexion .volet label span { font-size: .78rem; color: var(--attenue); }
  .connexion .volet input {
    padding: 8px 10px;
    background: var(--fond);
    border: 1px solid var(--bordure);
    border-radius: 8px;
    color: var(--texte);
    font: inherit;
    font-size: .9rem;
  }
  .connexion .volet input:focus {
    outline: none;
    border-color: var(--bordure-vive);
  }
  .connexion .volet button { justify-self: stretch; text-align: center; border: 0; cursor: pointer; }
  .connexion .volet .erreur { margin: 0; font-size: .8rem; color: #ff8f8f; }
  .connexion .volet .oubli { font-size: .78rem; color: var(--attenue); text-decoration: none; }
  .connexion .volet .oubli:hover { color: var(--texte); }

  /* Sur mobile, il n'y a pas de survol et pas la place : le bouton redevient
     un lien vers l'ecran de connexion du jeu. */
  @media (hover: none), (max-width: 720px) {
    .connexion .volet { display: none; }
  }

  /* ------------------------------------------------------ le pitch -- */
  .heros { position: relative; padding: 84px 0 96px; overflow: hidden;
           /* Assez haut pour que le stade se déploie sous le texte. */
           min-height: 640px; display: flex; align-items: center; }
  .heros .large { position: relative; width: 100%; display: grid;
                  grid-template-columns: 1.05fr .95fr; gap: 44px; align-items: center; }

  /* Le stade occupe tout le bloc et déborde sous la section suivante : une
     image qui s'arrête net sur une ligne droite fait toujours « bandeau
     collé ». */
  /* Le stade est ancré en bas et garde ses proportions : en le forçant à
     couvrir tout le bloc, on recadrait sur le rond central et on perdait
     justement ce qui fait l'ambiance — les projecteurs et la tribune. */
  .stade { position: absolute; left: 0; right: 0; bottom: 0; z-index: 0; }
  .stade svg { width: 100%; height: auto; display: block; }
  .heros::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 160px;
    background: linear-gradient(transparent, var(--fond));
    pointer-events: none;
  }

  /* L'embleme du haut de page : la seule place du site ou le filet respire. */
  .embleme-heros { display: block; height: 80px; width: auto; margin: 0 0 18px; }

  .sur-titre {
    margin: 0 0 14px; font-size: .78rem; letter-spacing: .16em; text-transform: uppercase;
    color: var(--accent); font-weight: 600;
  }
  .sur-titre::before { content: '— '; opacity: .5; }

  h1 { font-family: var(--titrage); font-weight: 900;
       font-size: 3.6rem; line-height: .96; margin: 0 0 18px; letter-spacing: -.045em;
       text-shadow: 0 2px 24px rgba(0,0,0,.55); }
  /* A plat, sans degrade : le degrade fait jaquette de jeu video, et ce jeu-ci
     se joue avec la tete. */
  h1 em { font-style: normal; color: var(--accent); }
  .accroche { font-size: 1.16rem; color: var(--attenue); margin: 0 0 26px; max-width: 46ch; }
  .accroche strong { color: var(--texte); }
  .cta { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
  .gratuit { font-size: .84rem; color: var(--attenue); margin-top: 12px; }

  /* Les visages se chevauchent : une file d'attente sagement alignée aurait
     l'air d'une liste, pas d'un vestiaire. */
  .trombinoscope { margin-top: 26px; }
  .visages { display: block; max-width: 100%; height: auto;
             filter: drop-shadow(0 6px 16px rgba(0,0,0,.45)); }
  .trombinoscope .gratuit { margin-top: 10px; max-width: 44ch; }

  /* le lecteur du trailer */
  .trailer {
    position: relative; aspect-ratio: 16/9; border-radius: var(--rayon);
    border: 1px solid rgba(255,255,255,.14); overflow: hidden;
    background: linear-gradient(160deg, #16241d, #0f1714);
    display: grid; place-items: center; cursor: pointer;
    box-shadow: 0 26px 60px rgba(0,0,0,.5);
  }
  /* La vidéo occupe tout le cadre : c'est elle le décor, l'affiche comprise. */
  .trailer video { width: 100%; height: 100%; display: block; object-fit: cover; }
  .trailer figcaption {
    position: absolute; left: 0; right: 0; bottom: 0; padding: 10px 14px;
    background: linear-gradient(transparent, rgba(0,0,0,.72));
    font-size: .82rem; color: #cfe3d7;
  }

  /* --------------------------------------------------- les blocs ---- */
  section { padding: 54px 0; position: relative; }
  section + section { border-top: 1px solid var(--bordure); }

  /* La promesse : la phrase que le visiteur doit retenir s'il ne lit rien
     d'autre. Pas de bordure au-dessus — elle prolonge le stade. */
  .promesse { border-top: none; padding-top: 10px; }
  .phare {
    font-size: 2.4rem; line-height: 1.18; font-weight: 300; letter-spacing: -.02em;
    text-align: center; margin: 0 auto 14px; max-width: 20ch;
  }
  .phare strong { font-family: var(--titrage); font-weight: 900;
                  letter-spacing: -.04em; color: var(--accent); }
  .centre { text-align: center; margin-left: auto; margin-right: auto; }
  .promesse h2 { margin-top: 48px; }
  h2 { font-size: 1.9rem; margin: 0 0 8px; letter-spacing: -.015em; }
  .chapeau { color: var(--attenue); margin: 0 0 26px; max-width: 62ch; }
  /* `.chapeau` est declare apres `.centre` et sa marge raccourcie remettait les
     marges laterales a zero : le texte etait bien centre, mais dans une boite
     de 62 caracteres collee a gauche. Il fallait le dire ici, apres. */
  .chapeau.centre { margin-inline: auto; }
  h3 { font-size: 1.05rem; margin: 0 0 4px; }

  .duo { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; }
  .duo.inverse > :first-child { order: 2; }
  .capture {
    border: 1px solid var(--bordure); border-radius: var(--rayon);
    background: var(--surface); overflow: hidden;
  }
  .capture .barre {
    display: flex; gap: 6px; padding: 8px 10px; border-bottom: 1px solid var(--bordure);
    background: var(--surface-2);
  }
  .capture .barre i { width: 9px; height: 9px; border-radius: 50%; background: var(--surface-3); }
  .capture .dedans { padding: 12px; }
  .capture img, .capture video { display: block; width: 100%; height: auto; border-radius: 6px; }
  /* La legende sort du cadre de l'ecran filme : elle parle de la prise. */
  .capture figcaption { padding: 0 12px 10px; font-size: .82rem; color: var(--attenue); }

  /* La galerie : des vignettes qui s'ouvrent en grand sans une ligne de
     JavaScript — `dialog` fait ce travail depuis longtemps. */
  .galerie { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; }
  .galerie figure { margin: 0; }
  .galerie figcaption { margin-top: 6px; font-size: .85rem; color: var(--attenue); }
  .galerie .capture { cursor: zoom-in; transition: border-color .18s ease; }
  .galerie .capture:hover { border-color: var(--bordure-vive); }

  dialog.loupe {
    border: none; padding: 0; background: none; max-width: 94vw; max-height: 94vh;
  }
  dialog.loupe::backdrop { background: rgba(6, 10, 8, .86); }
  dialog.loupe img { display: block; max-width: 94vw; max-height: 90vh; width: auto; height: auto;
                     border-radius: var(--rayon); border: 1px solid var(--bordure); }

  /* Trois colonnes plutôt que quatre : à cinq encadrés, quatre colonnes
     laissent un orphelin sur la deuxième ligne. */
  .cartes { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; }
  .carte {
    background: linear-gradient(180deg, var(--surface-2), var(--surface));
    border: 1px solid var(--bordure);
    border-radius: var(--rayon); padding: 18px;
    transition: border-color .18s ease, transform .18s ease;
  }
  .carte:hover { border-color: var(--bordure-vive); transform: translateY(-2px); }

  /* ---------------------------------------------------------------- */
  /* L'apercu au survol                                                */
  /* ---------------------------------------------------------------- */

  /*
   * Une carte qui promet un ecran doit pouvoir le montrer. L'image flotte
   * au-dessus de la carte plutot que de s'inserer dedans : inserer decalerait
   * la grille entiere a chaque survol, et le visiteur perdrait ce qu'il
   * lisait.
   */
  /*
   * L'apercu se pose sur la grille, pas sur la carte.
   *
   * Premiere version : l'image sortait de la carte survolee. Elle etait alors
   * bornee par la place restante sous sa rangee — quatre cents pixels a une
   * position de lecture ordinaire — et l'on n'y voyait pas grand-chose. En la
   * centrant sur la grille entiere, la place disponible devient celle de la
   * fenetre : la capture passe de 560 a 890 pixels de large.
   *
   * Elle recouvre les cartes pendant qu'on la regarde, et c'est voulu : on
   * survole une carte pour voir son ecran, pas pour relire le texte qu'on vient
   * de lire. Passer d'une carte a l'autre feuillette les captures sur place.
   */
  .carte.illustree:hover,
  .carte.illustree:focus-within { z-index: 50; }

  /*
   * Pas de `transform` sur une carte illustree : un element transforme devient
   * le bloc conteneur de ses descendants absolus, et l'apercu se rabattrait
   * brutalement sur la carte au moment meme du survol. Le relief se dit
   * autrement.
   */
  .carte.illustree:hover { transform: none; box-shadow: 0 0 0 1px var(--bordure-vive); }

  .carte .apercu {
    position: fixed;
    /* Un <figure> porte une marge laterale de 40px par defaut. */
    margin: 0;
    top: 50%;
    left: 50%;
    transform: translate(-50%, calc(-50% + 8px));

    /*
     * Aussi grand que la place le permet, et pas un pixel de plus. Trois
     * bornes : la largeur de la grille, celle de la fenetre, et la hauteur
     * disponible — ce dernier terme convertit une hauteur en largeur par le
     * rapport de l'image (1500 x 940), si bien qu'une capture ne depasse jamais
     * du haut ni du bas de l'ecran.
     */
    width: min(1180px, calc(100vw - 48px), calc(82vh * 1500 / 940));

    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .16s ease, transform .16s ease, visibility .16s;
    /* Au-dessus de l'en-tete collante, qui vit a 10. */
    z-index: 80;
  }
  .carte .apercu img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 10px;
    border: 1px solid var(--bordure-vive);
    box-shadow: 0 22px 60px rgba(0, 0, 0, .7);
    background: var(--fond-carte, #10151b);
  }
  .carte .apercu figcaption {
    margin-top: 8px;
    text-align: center;
    font-size: .84rem;
    color: var(--texte);
    text-shadow: 0 1px 6px rgba(0, 0, 0, .8);
  }
  .carte:hover .apercu,
  .carte:focus-within .apercu {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, -50%);
  }

  /* Sans souris, il n'y a pas de survol : on n'impose pas le telechargement
     d'une capture qui ne s'affichera jamais. */
  @media (hover: none), (max-width: 720px) {
    .carte .apercu { display: none; }
  }
  }
  }
  .carte h3 { color: var(--texte); font-weight: 700; letter-spacing: -.01em; }
  /* Des pictogrammes dessinés plutôt que des émojis : un émoji change de tête
     d'un système à l'autre et ne partage aucune ligne avec le reste. */
  .carte .signe { display: block; width: 30px; height: 30px; color: var(--attenue); margin-bottom: 8px; }
  .carte p { color: var(--attenue); font-size: .93rem; margin: 6px 0 0; }

  /* L'etalage des identites : trois rangees qui montrent la variete plutot
     qu'un paragraphe qui l'affirme. */
  .couleurs .etalage {
    display: grid; gap: 16px; justify-items: center;
    background: linear-gradient(180deg, var(--surface-2), var(--surface));
    border: 1px solid var(--bordure); border-radius: var(--rayon); padding: 26px 20px;
  }
  .couleurs .rangee { display: flex; gap: 18px; align-items: flex-end; flex-wrap: wrap;
                      justify-content: center; }
  .couleurs .nuances { gap: 9px; }
  .nuance { width: 26px; height: 26px; border-radius: 7px; border: 1px solid rgba(0,0,0,.35); }

  .chiffres { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 14px; text-align: center; }
  .chiffres strong { display: block; font-family: var(--titrage); font-weight: 900;
                     font-size: 2.4rem; letter-spacing: -.04em; color: var(--accent); }
  .chiffres span { color: var(--attenue); font-size: .88rem; }

  details {
    border-bottom: 1px solid var(--bordure); padding: 14px 0;
  }
  details summary { cursor: pointer; font-weight: 600; list-style: none; }
  details summary::marker { content: ''; }
  details summary::before { content: '＋ '; color: var(--attenue); }
  details[open] summary::before { content: '－ '; }
  details p { color: var(--attenue); margin: 8px 0 0; max-width: 72ch; }

  .final { text-align: center; }
  .final h2 { font-size: 2.2rem; }

  /* Les pages de texte : une colonne étroite. Au-delà de soixante-dix
     caractères par ligne, l'œil perd le début de la suivante. */
  .legal { padding: 40px 20px 60px; max-width: 78ch; }
  .legal h1 { font-size: 2rem; margin: 0 0 4px; letter-spacing: -.02em; }
  .legal h2 { font-size: 1.15rem; margin: 34px 0 8px; }
  .legal .maj { color: var(--attenue); font-size: .84rem; margin: 0 0 26px; }
  .legal .resume {
    background: var(--surface); border: 1px solid var(--bordure);
    border-left: 3px solid var(--accent);
    border-radius: var(--rayon-sm); padding: 14px 16px; margin: 0 0 26px;
  }
  .legal ul { padding-left: 20px; }
  .legal li { margin-bottom: 6px; }
  .legal table { width: 100%; border-collapse: collapse; margin: 12px 0 6px; font-size: .92rem; }
  .legal th { text-align: left; font-size: .72rem; text-transform: uppercase; letter-spacing: .07em;
              color: var(--attenue); padding: 8px 10px 8px 0; border-bottom: 1px solid var(--bordure); }
  .legal td { padding: 10px 10px 10px 0; border-bottom: 1px solid rgba(255,255,255,.05);
              vertical-align: top; }
  .legal .retour { margin-top: 40px; }

  footer { border-top: 1px solid var(--bordure); padding: 30px 0 46px; color: var(--attenue); font-size: .88rem; }
  footer .large { display: flex; flex-wrap: wrap; gap: 26px; }
  footer nav { display: grid; gap: 4px; }
  footer h4 { color: var(--texte); font-size: .82rem; text-transform: uppercase;
              letter-spacing: .08em; margin: 0 0 6px; }
  footer a { text-decoration: none; }
  footer a:hover { color: var(--texte); }
  .a-venir { opacity: .55; }
  .a-venir em {
    font-style: normal; font-size: .68rem; text-transform: uppercase; letter-spacing: .06em;
    border: 1px solid var(--bordure); border-radius: 99px; padding: 0 6px; margin-left: 4px;
  }
  .mention { width: 100%; border-top: 1px solid var(--bordure); padding-top: 16px; font-size: .8rem; }

  @media (max-width: 900px) {
    .heros .large, .duo { grid-template-columns: 1fr; }
    .duo.inverse > :first-child { order: 0; }
    h1 { font-size: 2.4rem; }
    .phare { font-size: 1.7rem; max-width: none; }
    .heros { padding: 46px 0 60px; }
    nav.principale { display: none; }
  }

  /* Sur un téléphone, deux boutons pleine taille passaient à la ligne et
     coupaient l'en-tête en deux. On resserre, et on garde le seul qui compte
     vraiment pour un visiteur qui découvre : créer un compte. */
  @media (max-width: 560px) {
    .marque { font-size: .95rem; }
    .bouton { padding: 7px 11px; font-size: .84rem; }
    .actions .creux { display: none; }
    .heros { padding: 40px 0 30px; }
    .cta .bouton { width: 100%; text-align: center; }
  }