/* ═══════════════════════════════════════════════════════════════════
   TRONC COMMUN des pages publiques statiques
   (accueil.html, compagnie.html, solo.html, apropos.html)

   Contrat :
   - Ce fichier ne contient QUE ce qui est identique au caractère près
     entre les quatre pages : variables, reset, anneau décoratif,
     en-tête marque + guichet de connexion, pied de page, et leur
     déclinaison mobile. La charte de l'en-tête est UNE : toute
     retouche ici vaut pour les quatre pages d'un coup.
   - Chaque page le charge AVANT son <style> local : une divergence
     assumée (focus et hovers bleu nuit du solo, paddings du footer
     d'apropos…) se surcharge localement, jamais ici.
   - La page tutos (tutos-*.html) ne le charge pas : sa topbar est
     celle de l'app, pas l'en-tête des pages publiques.
   - Fichier servi à la racine du site (web/ est copié tel quel dans
     le build) : référencer par « /publique.css ».
   ═══════════════════════════════════════════════════════════════════ */

:root {
  --bordeaux: #7F0408;
  --bordeaux-deep: #5A0205;
  --bleu-nuit: #1A2951;
  --bleu-deep: #111C3A;
  --creme: #F2E9C8;
  --creme-light: #FAF6EC;
  --cuivre: #8F5337;
  --or-doux: #DBBF6B;
  --or-pale: #E2C46A;
  --or-fonce: #C4962A;
  --texte-fonce: #1A0A0B;
  --pjs: 'Plus Jakarta Sans', -apple-system, sans-serif;
}
* { box-sizing: border-box; margin: 0; }

/* Anneaux décoratifs : la règle générique et le grand anneau haut droit,
   communs aux quatre pages ; .anneau-2 (position variable) reste local. */
.anneau { position: absolute; border-radius: 50%; border: 1px solid; pointer-events: none; }
.anneau-1 { width: 560px; height: 560px; top: -180px; right: -170px; border-color: rgba(196,150,42,.30); }
.br-mobile { display: none; }  /* retours à la ligne actifs uniquement sur mobile */

/* ══ En-tête : marque et guichet sur le même axe horizontal ══ */
header {
  position: relative; z-index: 3;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 20px clamp(20px, 4vw, 52px) 0;
}
.brand { display: flex; align-items: center; gap: 18px; text-decoration: none; }
.brand img { width: 68px; height: 68px; object-fit: contain; }
.brand .nom { font-family: 'Lobster', cursive; font-size: 31px; color: var(--bordeaux); letter-spacing: .5px; }

.guichet { position: relative; }
.guichet form { display: flex; align-items: center; gap: 10px; }
.guichet form > input, .guichet .champ-mdp { flex: 0 1 370px; min-width: 150px; }
.guichet .champ-mdp { position: relative; }
.guichet input {
  width: 100%; height: 46px; padding: 0 16px; border-radius: 8px;
  font: 300 14px var(--pjs); color: var(--texte-fonce);
  background: #fff; border: 1.5px solid rgba(143,83,55,.22); outline: none;
}
.guichet .champ-mdp input { padding-right: 42px; }
.guichet .oeil {
  position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  display: flex; padding: 0; border: 0; background: none; cursor: pointer;
  color: rgba(143,83,55,.5);
}
.guichet .oeil:hover { color: var(--bordeaux); }
.guichet .oeil .oeil-on { display: none; }
.guichet .champ-mdp.mdp-visible .oeil-on { display: block; }
.guichet .champ-mdp.mdp-visible .oeil-off { display: none; }
.guichet input::placeholder { color: rgba(26,10,11,.30); }
.guichet input:focus { border-color: var(--bordeaux); }
.guichet .btn-texte {
  flex: 0 0 auto; white-space: nowrap;
  height: 46px; padding: 0 20px; border: 0; border-radius: 8px; cursor: pointer;
  background: var(--bordeaux); color: var(--creme);
  font: 700 12px var(--pjs); letter-spacing: 1.1px; text-transform: uppercase;
}
.guichet .btn-texte:hover { background: var(--bordeaux-deep); }
.guichet .btn-fleche { display: none; }
/* Session déjà ouverte : le guichet propose de reprendre au lieu du formulaire
   (posé par guichet.js). Même gabarit que le bouton « Se connecter ». */
.guichet .reprendre {
  display: inline-flex; align-items: center; height: 46px; padding: 0 20px;
  border-radius: 8px; background: var(--bordeaux); color: var(--creme);
  font: 700 12px var(--pjs); letter-spacing: 1.1px; text-transform: uppercase;
  text-decoration: none; white-space: nowrap;
}
.guichet .reprendre:hover, .guichet .reprendre:focus-visible { background: var(--bordeaux-deep); }
.guichet .ligne-basse { position: absolute; top: 100%; right: 0; margin-top: 6px; }
.guichet .erreur {
  display: none; position: absolute; top: 100%; left: 0; margin: 6px 0 0;
  font-size: 12px; font-weight: 600; color: var(--bordeaux);
}
.guichet .oubli { font-size: 11.5px; color: rgba(143,83,55,.85); text-decoration: none; }
.guichet .oubli:hover, .guichet .oubli:focus-visible { color: var(--bordeaux); text-decoration: underline; }
:focus-visible { outline: 2px solid var(--bordeaux); outline-offset: 3px; }

/* ══ Pied de page ══ */
footer {
  position: relative; z-index: 2; text-align: center;
  padding: 24px 20px 22px; font-size: 12px; color: rgba(26,10,11,.55);
}
footer a { color: rgba(143,83,55,.88); text-decoration: none; margin: 0 10px; }
footer a:hover, footer a:focus-visible { color: var(--bordeaux); text-decoration: underline; }
footer .liens + .liens { margin-top: 12px; }

/* ══ Mobile : en-tête empilé, guichet une ligne, pied aéré ══ */
@media (max-width: 899px) {
  header { flex-direction: column; align-items: stretch; gap: 16px; padding-top: 16px; }
  .brand { justify-content: center; gap: 12px; }
  .brand img { width: 48px; height: 48px; }
  .brand .nom { font-size: 24px; }

  /* guichet : UNE ligne — e-mail · mot de passe · bouton flèche carré */
  .guichet form { gap: 8px; }
  .guichet form > input, .guichet .champ-mdp { flex: 1 1 0; min-width: 0; }
  .guichet input { height: 44px; font-size: 13px; }
  .guichet .btn-texte { display: none; }
  .guichet .btn-fleche {
    display: flex; align-items: center; justify-content: center;
    flex: 0 0 44px; height: 44px; border: 0; border-radius: 8px; cursor: pointer;
    background: var(--bordeaux); color: var(--creme); font-size: 17px;
  }
  .guichet .ligne-basse { position: static; margin-top: 6px; text-align: right; }
  .guichet .erreur { position: static; }
  .guichet .oubli { font-size: 11px; }
  .guichet .reprendre { width: 100%; height: 44px; justify-content: center; }
  .br-mobile { display: inline; }

  footer { line-height: 2.1; padding-top: 18px; }
  footer .liens-nav a { display: block; margin: 0; }  /* un lien par ligne, centré */
}