/* ======================================
   MISE EN PAGE COMMUNE DES PAGES DU SITE
   Chargé sur toutes les pages (app/Config/Assets.php, css_frontend).

   Une page « harmonisée » :
     <div class="container my-5 page-rqs">                      (container-fluid px-lg-5 my-5 pour une page large)
       <header class="page-entete">
         <p class="page-surtitre">Administration</p>             (facultatif)
         <h1 class="page-titre">Titre de la page</h1>
         <p class="page-texte">Une phrase qui dit à quoi sert la page.</p>
       </header>
       <div class="page-grille">                                (facultatif : contenu à gauche, encarts à droite)
         <section> ... le contenu ... </section>
         <aside class="page-cote"> <section class="encart"> ... </section> </aside>
       </div>
     </div>

   Exemples : pages/requaconsult_view.php (choix des bases), export/requaconsult_export.php,
   statistique/requaconsult_stats_view.php. Les outils d'administration : pages/outils_admin_view.php.
   La liste des bases (accueil, choix, export, consultation) a son propre fichier : requaconsult-bases.css.
   ====================================== */

/* Police des titres et des chiffres : Manrope (licence libre OFL), hébergée sur le site (public/assets/fonts/manrope) :
   aucun appel à Google Fonts, donc aucune donnée de visiteur envoyée ailleurs.
   Une seule police « variable » pour toutes les graisses (200 à 800). */
@font-face {
  font-family: 'Manrope';
  src: url('../fonts/manrope/manrope-latin-wght-normal.woff2') format('woff2');
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;   /* le texte s'affiche tout de suite dans la police du système, puis en Manrope */
}

/* Couleurs et police communes (l'accueil les redéfinit aussi sur .accueil, avec les mêmes valeurs) */
:root {
  --vert-requasud: var(--requasud-primary, #2c5f2d);
  --vert-requasud-fonce: var(--requasud-primary-dark, #1e4620);
  --encre: #1f2523;                 /* texte principal */
  --encre-douce: #5d6662;           /* texte secondaire */
  --trait: #e2e6e3;                 /* lignes fines */
  --police-titres: 'Manrope', system-ui, sans-serif;
}

/* Couleur de chaque base dans --couleur : lignes de la liste des bases, badges des modules (Suivi)...
   Les 5 couleurs (--couleur-sol, ...) sont dans requaconsult-theme.css. */
.base-sol    { --couleur: var(--couleur-sol); }
.base-nirc   { --couleur: var(--couleur-nirc); }
.base-nirmin { --couleur: var(--couleur-nirmin); }
.base-eff    { --couleur: var(--couleur-eff); }
.base-mic    { --couleur: var(--couleur-mic); }
.base-nit    { --couleur: #2f7e9a; }   /* Analyse de nitrate (pages d'administration seulement) : bleu « eau » */

/* ---------- En-tête ---------- */
.page-entete {
  max-width: 52rem;                 /* le titre tient sur une ligne sur grand écran */
  margin-bottom: 2.5rem;
}

/* Petite ligne au-dessus du titre (« Bonjour Julien », « Administration »), en capitales vertes */
.page-surtitre {
  margin: 0 0 0.5rem;
  font-family: var(--police-titres);
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--vert-requasud);
}

.page-rqs .page-titre {
  font-family: var(--police-titres);
  color: var(--encre);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.05;
  margin-bottom: 1rem;
}

.page-texte {
  font-size: 1.15rem;
  line-height: 1.55;
  color: var(--encre-douce);
  margin: 0;
}

/* Intertitres d'une page harmonisée : police des titres, en encre (le thème les met en vert) */
.page-rqs :is(h2, h3, h4, h5) {
  font-family: var(--police-titres);
  color: var(--encre);
  letter-spacing: -0.01em;
}

/* Intertitre de section : <h2 class="page-sous-titre"> */
.page-rqs .page-sous-titre {
  font-size: 1.35rem;
  font-weight: 700;
}

.page-sous-titre i {
  color: var(--vert-requasud);
}

/* ---------- Grille : le contenu à gauche, les encarts à droite ---------- */
.page-grille {
  display: grid;
  grid-template-columns: minmax(0, 2.4fr) minmax(0, 1fr);
  gap: 2rem 3rem;
  align-items: start;
}

.page-aide {
  margin: 1.5rem 0 0;
  color: var(--encre-douce);
}

.page-aide i {
  color: var(--vert-requasud);
  margin-right: 0.25rem;
}

.page-aide a {
  color: var(--vert-requasud);
  font-weight: 600;
}

/* L'encart reste visible pendant qu'on fait défiler la liste (sous la barre de navigation) */
.page-cote {
  position: sticky;
  top: calc(var(--hauteur-navbar, 68px) + 1.5rem);
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

/* ---------- Encarts ---------- */
.encart {
  border: 1px solid var(--trait);
  border-radius: 14px;
  padding: 1.5rem;
  background-color: #ffffff;
}

/* Accès public : même fond clair que l'introduction de l'accueil */
.encart-public {
  background-color: #f4f5f2;
}

/* Accès complet : un léger fond vert REQUASUD */
.encart-membre {
  background-color: color-mix(in srgb, var(--vert-requasud) 7%, #ffffff);
  border-color: color-mix(in srgb, var(--vert-requasud) 25%, #ffffff);
}

.page-rqs .encart-titre {
  font-family: var(--police-titres);
  color: var(--encre);
  font-size: 1.2rem;
  font-weight: 700;
  margin-bottom: 1rem;
}

.encart-titre i {
  color: var(--vert-requasud);
  margin-right: 0.35rem;
}

.encart-liste {
  list-style: none;
  margin: 0 0 1rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

/* Une ligne : l'icône (coche ou cadenas) | le texte */
.encart-liste li {
  display: grid;
  grid-template-columns: 1.25rem minmax(0, 1fr);
  gap: 0.5rem;
  line-height: 1.4;
}

.encart-liste i {
  margin-top: 0.2rem;
}

.encart-ouvert i  { color: var(--vert-requasud); }
.encart-reserve   { color: var(--encre-douce); }
.encart-reserve i { color: #8a938f; }

.encart-texte {
  color: var(--encre-douce);
  line-height: 1.5;
}

.encart-boutons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

/* Mêmes boutons que l'accueil : vert REQUASUD plein, et en contour */
.page-bouton,
.page-bouton-secondaire {
  flex: 1 1 auto;
  font-family: var(--police-titres);
  font-weight: 700;
  padding: 0.7rem 1.1rem;
  border-radius: 0.6rem;
  border: 2px solid var(--vert-requasud);
}

.page-bouton {
  background-color: var(--vert-requasud);
  color: #ffffff;
}

.page-bouton:hover,
.page-bouton:focus-visible {
  background-color: var(--vert-requasud-fonce);
  border-color: var(--vert-requasud-fonce);
  color: #ffffff;
}

.page-bouton-secondaire {
  background-color: transparent;
  color: var(--vert-requasud);
}

.page-bouton-secondaire:hover,
.page-bouton-secondaire:focus-visible {
  background-color: var(--vert-requasud);
  color: #ffffff;
}

/* Clavier : contour vert bien visible */
.page-rqs .encart a:focus-visible {
  outline: 3px solid var(--vert-requasud);
  outline-offset: 3px;
  box-shadow: none;
}

/* ---------- Outils d'administration : une ligne cliquable par outil ---------- */
.outils-liste {
  list-style: none;
  margin: 0;
  padding: 0;
}

.outils-liste li + li {
  border-top: 1px solid var(--trait);
}

.outils-liste a {
  display: grid;
  grid-template-columns: 1.5rem minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.6rem;
  padding: 0.65rem 0.5rem;
  border-radius: 8px;
  color: var(--encre);
  text-decoration: none;
  font-weight: 600;
}

.outils-liste a i:first-child {
  color: var(--vert-requasud);
}

.outils-fleche {
  font-size: 0.8rem;
  color: #a0a8a4;
  transition: transform 0.2s ease;
}

.outils-liste a:hover,
.outils-liste a:focus-visible {
  background-color: color-mix(in srgb, var(--vert-requasud) 7%, #ffffff);
}

.outils-liste a:hover .outils-fleche {
  transform: translateX(3px);
  color: var(--vert-requasud);
}

/* La page affichée : surlignée, sans lien, avec « vous êtes ici » à droite */
.outils-courant {
  display: grid;
  grid-template-columns: 1.5rem minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.6rem;
  padding: 0.65rem 0.5rem;
  border-radius: 8px;
  font-weight: 700;
  color: var(--vert-requasud-fonce);
  background-color: color-mix(in srgb, var(--vert-requasud) 10%, #ffffff);
}

.outils-courant i {
  color: var(--vert-requasud);
}

.outils-ici {
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--encre-douce);
}

/* ---------- Consultation complète : le dessus du tableau (consultation/requaconsult_consult_generique_view.php) ----------
   La classe base-sol, base-nirc... du bloc donne la couleur de la base (--couleur). */

/* Lien « ← Toutes les bases » au-dessus du titre */
.consult-retour {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 1.25rem;
  font-weight: 600;
  color: var(--encre-douce);
  text-decoration: none;
}

.consult-retour:hover,
.consult-retour:focus-visible {
  color: var(--vert-requasud);
}

.consult-retour i {
  transition: transform 0.2s ease;
}

.consult-retour:hover i {
  transform: translateX(-3px);
}

/* En-tête : le picto de la base à gauche du titre */
.consult-entete {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  margin-bottom: 1.5rem;
}

.page-rqs .consult-entete .page-titre {
  margin-bottom: 0.4rem;
}

.consult-picto {
  flex-shrink: 0;
  width: 4.5rem;
  height: 4.5rem;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  color: var(--couleur, var(--vert-requasud));
  background-color: color-mix(in srgb, var(--couleur, var(--vert-requasud)) 14%, #ffffff);
}

/* Barre au-dessus du tableau : le choix validés / non validés à gauche, l'aide à droite */
.consult-barre {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1.5rem;
  padding: 0.6rem;
  border: 1px solid var(--trait);
  border-radius: 14px;
  background-color: #f4f5f2;
}

/* Deux boutons collés (« segmented control ») : le tableau affiché est en blanc, avec la couleur de la base */
.consult-choix {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  padding: 0.25rem;
  border-radius: 10px;
  background-color: #e8ebe7;
}

.consult-choix-lien {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.5rem 1rem;
  border-radius: 8px;
  font-family: var(--police-titres);
  font-weight: 700;
  color: var(--encre-douce);
  text-decoration: none;
}

.consult-choix-lien:hover,
.consult-choix-lien:focus-visible {
  color: var(--encre);
  background-color: rgba(255, 255, 255, 0.6);
}

.consult-choix-lien.actif {
  color: var(--encre);
  background-color: #ffffff;
  box-shadow: 0 1px 3px rgba(31, 37, 35, 0.12);
}

.consult-choix-lien.actif i {
  color: var(--couleur, var(--vert-requasud));
}

.consult-choix-lien:focus-visible,
.consult-retour:focus-visible {
  outline: 3px solid var(--vert-requasud);
  outline-offset: 2px;
}

.consult-astuce {
  margin: 0;
  padding-right: 0.5rem;
  font-size: 0.95rem;
  color: var(--encre-douce);
}

.consult-astuce i {
  color: var(--vert-requasud);
  margin-right: 0.25rem;
}

/* Mobile : picto plus petit, l'aide passe sous les boutons */
@media (max-width: 576px) {
  .consult-picto { width: 3.25rem; height: 3.25rem; font-size: 1.4rem; border-radius: 12px; }
  .consult-astuce { padding: 0 0.4rem 0.2rem; }
}

/* ---------- Éléments Bootstrap dans une page harmonisée (.page-rqs) ---------- */

/* Badge d'une base : <span class="badge badge-module base-sol">Sols</span> (gris si la base est inconnue) */
.badge-module {
  background-color: var(--couleur, #6c757d);
  color: #ffffff;
  font-weight: 600;
}

/* Onglets : texte gris, onglet actif en encre */
.page-rqs .nav-tabs .nav-link {
  color: var(--encre-douce);
}

.page-rqs .nav-tabs .nav-link:hover {
  color: var(--vert-requasud);
}

.page-rqs .nav-tabs .nav-link.active {
  color: var(--encre);
}

/* Tableaux : en-tête clair (comme le tableau des métadonnées) au lieu du noir de Bootstrap */
.page-rqs .table > thead > tr > th {
  background-color: #f4f5f2;
  color: var(--encre-douce);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--trait);
}

/* Pagination en vert REQUASUD */
.page-rqs .pagination {
  --bs-pagination-color: var(--vert-requasud);
  --bs-pagination-hover-color: var(--vert-requasud-fonce);
  --bs-pagination-active-bg: var(--vert-requasud);
  --bs-pagination-active-border-color: var(--vert-requasud);
  --bs-pagination-focus-box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--vert-requasud) 25%, transparent);
}

/* Champs de formulaire : contour vert au focus */
.page-rqs .form-control:focus,
.page-rqs .form-select:focus {
  border-color: var(--vert-requasud);
  box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--vert-requasud) 18%, transparent);
}

/* ---------- Tablette et mobile : les encarts passent sous le contenu ---------- */
@media (max-width: 992px) {
  .page-grille { grid-template-columns: 1fr; }
  .page-cote { position: static; }
}

/* Mouvements réduits (réglage du système) : pas de transition */
@media (prefers-reduced-motion: reduce) {
  .outils-fleche { transition: none; }
  .consult-retour i { transition: none; }
}