/* ============================================================
   VITRINE — L'EN-TÊTE ET LES BOUTONS
   ============================================================
   Sorti de `vitrine.css` le 23/09 : le fichier passait 300 lignes
   (`scripts/check-file-length.mjs`).

   ⚑ CETTE FEUILLE SE CHARGE **AVANT** `vitrine.css`, ET CE N'EST PAS UN
   DÉTAIL. Les replis pour écran étroit de `.menu`, `.entete-in`, `.marque` et
   `.actions .btn` sont restés dans les `@media` de `vitrine.css`. À
   spécificité égale, c'est la feuille chargée EN DERNIER qui gagne : si
   celle-ci passait après, elle écraserait les replis et l'en-tête déborderait
   de nouveau au téléphone. C'est exactement la panne mesurée le 23/09 quand
   le découpage avait envoyé des règles de base dans une feuille plus tardive
   que ses propres `@media`. Le test « aucune correction responsive à
   distance » de `site-admin/tests/vitrine-quatre-pages.test.js` veille sur
   cet ordre : il lit l'ordre réel des `<link>` de `index.html`.
   ============================================================ */

/* ── L'en-tête ──────────────────────────────────────────────────────── */

.entete {
  position: sticky; top: 0;
  z-index: 10; background: var(--v-surface); border-bottom: 1px solid var(--v-bordure);
}

.entete-in,
.pied-in,
.large { max-width: var(--v-large); margin: 0 auto; padding: 0 24px; }

.entete-in {
  display: flex;
  align-items: center; gap: 20px; min-height: var(--hauteur-entete);
}

.marque {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-weight: var(--graisse-forte);
  font-size: 17px;
  letter-spacing: -0.02em;
  text-decoration: none;
}

/* La tuile du logo : le seul aplat de couleur principale de l'en-tête. */
.tuile {
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: var(--rayon-petit);
  background: var(--logo-tuile);
  color: var(--logo-signe);
}

.menu { display: flex; gap: 4px; }

.menu a {
  padding: 8px 12px;
  border-radius: var(--rayon);
  color: var(--v-texte-2);
  text-decoration: none;
  font-size: var(--taille-texte);
  font-weight: var(--graisse-moyenne);
  transition: background var(--transition), color var(--transition);
}

.menu a:hover { background: var(--fond-principale-doux); color: var(--v-texte); }
.menu a[aria-current='page'] { color: var(--v-principale); background: var(--fond-principale-doux); }

.pousse { flex: 1; }
.actions { display: flex; gap: 8px; }

/* ── Le menu du telephone ───────────────────────────────────────────── */
/* ⚑ IL N'EXISTE PAS SUR GRAND ECRAN : la barre y montre deja ses quatre
   liens. C'est le repli de `vitrine.css` qui l'allume sous 900 px. */
.menu-tel { display: none; position: relative; }

.menu-bouton {
  /* `list-style` et le marqueur WebKit : sans eux, `summary` affiche un
     triangle. On ne met rien a la place — ni chevron ni emoji (DEC-017) :
     le mot « Menu » se lit, un signe se devine. */
  list-style: none;
  display: inline-flex;
  align-items: center;
  /* DEC-015 : une cible tactile de 48 px. C'est le seul moyen d'atteindre
     les autres pages depuis un telephone, donc elle se rate difficilement. */
  min-height: var(--hauteur-cible-tactile);
  padding: 0 14px;
  /* ⚑ LES JETONS DE LA PAGE, PAS CEUX DE L'EN-TETE. Ma premiere version prenait
     `--entete-texte` et `--entete-contour` : ils existent pour le bandeau BLEU
     de l'espace admin, ou le texte est blanc. Sur la barre blanche de la
     vitrine, cela donnait un bouton blanc sur fond blanc — INVISIBLE, alors
     qu'il etait bien la, bien cliquable, et que toutes mes mesures disaient
     « ok ». C'est la capture qui l'a montre : une geometrie juste n'est pas un
     contraste juste. D'ou la verification de contraste ajoutee au script. */
  border: 1px solid var(--v-bordure);
  border-radius: var(--rayon);
  background: var(--v-surface);
  color: var(--v-texte);
  font-size: var(--taille-petit);
  font-weight: var(--graisse-moyenne);
  cursor: pointer;
  user-select: none;
}

.menu-bouton::-webkit-details-marker { display: none; }

/* ⚑ LE FOCUS EST PORTE PAR `summary`, ET IL DOIT RESTER VISIBLE : c'est un
   bouton qu'on atteint a la tabulation, et qui s'ouvre a Entree ou Espace. */
.menu-bouton:focus-visible {
  outline: 2px solid var(--v-principale);
  outline-offset: 2px;
}

.menu-bouton:hover { background: var(--v-creux); }
.menu-tel[open] .menu-bouton {
  background: var(--fond-principale-doux);
  border-color: var(--v-principale);
  color: var(--v-principale);
}

/* Le panneau tombe sous la barre, sur toute sa largeur, et ne pousse donc
   aucun contenu : la page garde exactement la hauteur qu'elle avait. */
/* ⚑ LE PANNEAU SE FERME PAR NOTRE CSS, PAS PAR CELLE DU NAVIGATEUR, et c'est
   un defaut que j'ai eu a mesurer pour le voir. Un `details` ferme cache son
   contenu par une regle `display: none` de sa feuille interne — qu'une regle
   d'auteur de meme specificite ECRASE. En posant `display: grid` sans
   condition, je laissais donc le panneau ouvert en permanence : les quatre
   liens etaient visibles, superposes a la page, menu ferme. Le vrai Chrome l'a
   dit ; aucune relecture de CSS ne l'aurait dit. Ce qui suit ne depend plus du
   tout du mecanisme interne du navigateur. */
.menu-panneau {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 20;
  min-width: 15rem;
  display: none;
  gap: 2px;
  padding: 8px;
  border: 1px solid var(--v-bordure);
  border-radius: var(--rayon);
  background: var(--v-surface);
  box-shadow: var(--v-ombre-haute);
}

.menu-panneau a {
  display: flex;
  align-items: center;
  min-height: var(--hauteur-cible-tactile);
  padding: 0 12px;
  border-radius: var(--rayon-petit);
  color: var(--v-texte);
  text-decoration: none;
  font-size: var(--taille-texte);
  font-weight: var(--graisse-moyenne);
}

.menu-tel[open] .menu-panneau { display: grid; }

.menu-panneau a:hover { background: var(--fond-principale-doux); }
.menu-panneau a[aria-current='page'] {
  color: var(--v-principale);
  background: var(--fond-principale-doux);
}

/* « Se connecter » n'est pas une page du site : un filet le detache. */
.menu-panneau-connexion {
  margin-top: 4px;
  border-top: 1px solid var(--v-bordure);
  padding-top: 4px;
  color: var(--v-texte-2);
}

/* ── Les boutons ────────────────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: var(--hauteur-controle);
  padding: 0 16px;
  border: 1px solid transparent;
  border-radius: var(--rayon);
  font: inherit;
  font-weight: var(--graisse-moyenne);
  text-decoration: none;
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition);
}

/* ⚑ LA CIBLE TACTILE DE 48 px (DEC-015) SUR LES GRANDS BOUTONS : ce sont ceux
   qu'on touche sur un téléphone, et un appel à l'action qu'on rate coûte cher. */
.btn-grand { min-height: var(--hauteur-cible-tactile); padding: 0 22px; font-size: 16px; }

.btn-plein { background: var(--v-principale); color: var(--v-principale-texte); }
.btn-plein:hover { background: var(--entete-bordure); }

.btn-clair {
  background: var(--v-surface);
  color: var(--v-texte); border-color: var(--v-bordure);
}
.btn-clair:hover { background: var(--fond-principale-doux); border-color: var(--v-bordure-carte); }

/* Sur fond bleu : les jetons d'en-tête du thème, faits pour cela. */
.btn-blanc { background: var(--entete-texte); color: var(--v-principale); }
.btn-blanc:hover { background: var(--entete-texte); opacity: 0.9; }

.btn-contour {
  background: transparent;
  color: var(--entete-texte); border-color: var(--entete-contour);
}
.btn-contour:hover { background: var(--entete-survol); }