/* HABILLAGE COMMUN À TOUTES LES PAGES DU SITE (10/09/2026).

   POURQUOI CE FICHIER EXISTE, ET CE QU'IL FAUT NE PLUS JAMAIS REFAIRE.
   Signalé par l'utilisateur avec des captures : le mode administrateur de la
   page du groupe ne ressemblait pas du tout à celui de l'accueil. Boutons
   plats et gris au lieu des gélules de la marque, barre du bas différente,
   fond noir au lieu du dégradé, boîtes système blanches pour le mot de passe
   et les confirmations. La cause était bête : `index.html` portait tout son
   habillage dans sa propre balise de style, et `legal.css`, que chargent les
   autres pages, n'avait ni `.bouton`, ni barre d'administration, ni fenêtre
   modale. Chaque page réinventait donc son apparence.

   RÈGLE : tout ce qui doit se ressembler d'une page à l'autre vit ICI, une
   seule fois, et chaque page charge ce fichier. Rien de ce qui est écrit ici
   ne doit être recopié dans une page.

   Il ne dépend d'aucune couleur écrite en dur : tout passe par les variables
   déjà définies par `index.html` ou `legal.css`, avec une valeur de repli
   pour les pages dont la feuille n'a pas la variable. */

/* BANDE BLANCHE AU BOUT DU DÉFILEMENT, signalée le 10/09/2026. La zone de
   rebond, en haut et en bas, montre le fond de la RACINE du document, pas
   celui du corps. Sans cette ligne, c'est le blanc du navigateur qui
   apparaît. `theme.js` remplace ensuite ce fond par celui choisi dans
   l'administration, sur la racine elle aussi. NE PAS RETIRER.
   La COULEUR compte autant que le fond : un fond posé avec
   `background-attachment:fixed` n'est peint que dans l'écran, et seule la
   couleur de fond de la racine couvre la zone de rebond. */
html { background: var(--nuit, #140a1e); background-color: var(--nuit, #140a1e); }

/* Variables de repli, pour les pages qui chargent `legal.css`, laquelle ne
   déclare ni le vert ni les teintes d'accent. */
:root {
  --vert: #22C55E;
  --ambre: #FFC24B;
  --ciel: #38BDF8;
  --nuit-2: #1d0f2b;
}

/* ---- Boutons ---------------------------------------------------------
   Exactement ceux de l'accueil : gélule, ombre portée discrète, léger
   soulèvement au survol. Pas de néon, retiré le 09/09/2026 à la demande
   de l'utilisateur. */
.bouton {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 13px 22px; border-radius: 999px;
  font-weight: 700; font-size: 15px; text-decoration: none;
  border: 1px solid transparent; cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  font-family: var(--corps);
}
.bouton:hover { transform: translateY(-2px); }
.bouton.plein { background: var(--vert); color: #06210f; box-shadow: 0 8px 22px rgba(0, 0, 0, .38); }
.bouton.contour { border-color: var(--bord); background: var(--verre); color: var(--texte); }
.bouton.contour:hover { border-color: rgba(255, 255, 255, .32); }

/* LE FOCUS SUIT LA GELULE, IL NE DESSINE PAS UN RECTANGLE (22/09/2026,
   remarque de HLB devant la fenetre « Essayer LinkReport » : « pourquoi il est
   encadre avec un rectangle alors que les boutons sont des gelules ? »). Le
   cadre par defaut du navigateur, en couleur du systeme, ignore l'arrondi.
   On le remplace par un anneau qui epouse la forme du bouton, et qui reste
   bien visible au clavier. */
.bouton:focus-visible,
a.bouton:focus-visible,
button.bouton:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, .55), 0 0 0 6px rgba(0, 0, 0, .45);
}


/* ---- Barre d'administration ------------------------------------------
   Une seule barre pour tout le site. Une page qui ajoute son mode
   administrateur pose ce balisage et n'écrit aucun style. */
#barre-admin {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; display: none;
  background: rgba(12, 7, 20, .94); backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-top: 1px solid var(--bord);
  padding: 11px 18px calc(11px + env(safe-area-inset-bottom));
}
.admin-actif #barre-admin { display: block; }
.barre-admin-i {
  max-width: var(--large, 1180px); margin: 0 auto;
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.barre-admin-i .info { font-size: 13px; color: var(--texte-doux); flex: 1 1 200px; min-width: 0; }

/* ---- Fenêtre modale ---------------------------------------------------
   PLUS AUCUNE BOÎTE SYSTÈME. Les `prompt`, `confirm` et `alert` du
   navigateur s'affichent sur fond blanc, avec la police du système : sur un
   site entièrement sombre, c'est une rupture visuelle brutale, et
   l'utilisateur l'a signalée. Toute demande de mot de passe, toute
   confirmation et tout message passent par cette fenêtre. */
#voile {
  position: fixed; inset: 0; z-index: 70;
  background: rgba(6, 3, 10, .72); backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: none; place-items: center; padding: 20px;
  opacity: 0; transition: opacity .2s ease;
}
#voile.on { display: grid; opacity: 1; }
.fenetre {
  background: #1a0f26; border: 1px solid var(--bord); border-radius: 20px;
  padding: 26px; width: 100%; max-width: 420px;
  max-height: 86vh; overflow-y: auto; box-sizing: border-box;
}
/* LE TABLEAU DE BORD PREND TOUT L'ÉCRAN (10/09/2026, demandé explicitement :
   "la page est grande, elle est large, pourquoi tu l'as affiché comme ça,
   étale-le sur tout l'écran"). Une fenêtre centrée de 800 pixels laissait
   les graphiques serrés au milieu d'un écran vide. Le tableau de bord se
   comporte donc comme une page à part entière : plein écran, défilement
   normal, aucun arrondi. Les autres fenêtres, elles, restent centrées et
   étroites, c'est ce qui convient à une question courte. */
#voile.plein { padding: 0; place-items: stretch; }
.fenetre.plein {
  max-width: none; width: 100%; height: 100%; max-height: none;
  border-radius: 0; border: none; padding: 26px clamp(16px, 4vw, 48px) 40px;
  background: rgba(10, 6, 18, .96);
}
.fenetre h3 { font-family: var(--display); margin: 0 0 6px; font-size: 20px; }
.fenetre p { margin: 0 0 16px; font-size: 14px; color: var(--texte-doux); }
.champ {
  width: 100%; box-sizing: border-box;
  background: rgba(0, 0, 0, .32); border: 1px solid var(--bord); border-radius: 11px;
  padding: 12px 14px; color: var(--texte); font-size: 15px; font-family: var(--corps);
  margin-bottom: 12px;
}
.rangee { display: flex; gap: 10px; }
.rangee > * { flex: 1; }

/* Bulles de chiffres, partagées par la fréquentation du site et par celle
   de la page du groupe. */
#stats-admin { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; margin-top: 14px; }
.bulle { background: rgba(255, 255, 255, .05); border: 1px solid var(--bord); border-radius: 13px; padding: 12px; }
.bulle b { display: block; font-family: var(--display); font-size: 21px; }
.bulle span { font-size: 12.5px; color: var(--texte-doux); }

/* ---- Commandes de formulaire -----------------------------------------
   DEUXIÈME DÉFAUT SIGNALÉ AVEC CAPTURES : les curseurs s'affichaient en
   BLEU système, les sélecteurs de couleur dans un cadre BLANC, et les
   listes déroulantes avec le fond clair du système. Rien de tout ça
   n'existe nulle part ailleurs dans le produit. Ces trois commandes sont
   donc redessinées ici, une fois, pour tout le site. */

/* Curseurs. `accent-color` suffit sur les navigateurs récents ; le dessin
   complet en dessous couvre les autres et donne la pastille de la marque. */
input[type="range"] {
  accent-color: var(--vert);
  -webkit-appearance: none; appearance: none;
  height: 22px; background: transparent; cursor: pointer;
}
input[type="range"]::-webkit-slider-runnable-track {
  height: 5px; border-radius: 999px;
  background: rgba(255, 255, 255, .16);
}
input[type="range"]::-moz-range-track {
  height: 5px; border-radius: 999px;
  background: rgba(255, 255, 255, .16);
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 16px; height: 16px; margin-top: -5.5px; border-radius: 50%;
  background: var(--vert); border: none;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .45);
}
input[type="range"]::-moz-range-thumb {
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--vert); border: none;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .45);
}

/* Sélecteurs de couleur : le navigateur dessine un cadre blanc autour de la
   pastille. On le retire pour ne garder que la couleur, dans un contour de
   la marque. */
input[type="color"] {
  -webkit-appearance: none; appearance: none;
  width: 44px; height: 30px; padding: 2px; cursor: pointer;
  background: rgba(255, 255, 255, .06);
  border: 1px solid var(--bord); border-radius: 9px;
}
input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
input[type="color"]::-webkit-color-swatch { border: none; border-radius: 7px; }
input[type="color"]::-moz-color-swatch { border: none; border-radius: 7px; }

/* Listes déroulantes : fond du site, texte du site, et SANS FLECHE
   (22/09/2026, HLB : « pourquoi tu mets une flèche ? Quand quelqu'un voit un
   titre comme ça, il sait que quand il clique dessus, il y a quelque chose qui
   s'affiche »). La liste qui s'ouvre reste dessinée par le navigateur. */
select {
  -webkit-appearance: none; -moz-appearance: none; appearance: none;
  background-color: rgba(255, 255, 255, .06);
  background-image: none;
  color: var(--texte); font-family: var(--corps); font-size: 13.5px;
  border: 1px solid var(--bord); border-radius: 10px;
  padding: 9px 12px; cursor: pointer;
}
select::-ms-expand { display: none; }
select option { background: #1a0f26; color: var(--texte); }

/* Déclencheur des cinq appuis, en bas de chaque page. */
.declencheur { cursor: default; user-select: none; -webkit-user-select: none; }

@media (prefers-reduced-motion: reduce) {
  .bouton, #voile { transition: none; }
  .bouton:hover { transform: none; }
}

/* SIGNATURE DU PIED DE PAGE EN DEUX LIENS (10/09/2026, demandé
   explicitement). `footer.pied a` pose 18 px de marge à droite de chaque
   lien, ce qui convient à la rangée de liens du dessus mais creusait un
   trou au milieu de « INAH Group / Tech ». Ces deux noms forment une seule
   ligne de texte : la marge n'a rien à y faire. */
footer.pied .signature a { margin-right: 0; }
footer.pied .signature { white-space: normal; }