/* public/assets/css/app.css - mise en page de l'application (pages publiques, espace client, administration).
 * Modèle du site CRA : fond de page continu, sections en panneaux arrondis dans le conteneur. */
*, *::before, *::after { box-sizing: border-box; }
html { font-size: 16px; }
body { margin: 0; background: var(--fond); color: var(--encre); font-family: var(--police-texte); line-height: 1.6; }
h1, h2, h3 { font-family: var(--police-titres); line-height: 1.2; margin: 0 0 var(--espace-4); }
h1 { font-size: 2.1rem; }
h2 { font-size: 1.5rem; }
h3 { font-size: 1.15rem; }
p { margin: 0 0 var(--espace-4); }
a { color: var(--emerald-700); }
a:visited { color: var(--emerald-700); }
a:hover { color: var(--encre); }
code { font-family: var(--police-code); font-size: 0.9em; }

.conteneur { width: 100%; max-width: var(--largeur-conteneur); margin: 0 auto; padding: 0 var(--espace-4); }
.contenu { padding-top: var(--espace-6); padding-bottom: var(--espace-12); display: grid; gap: var(--espace-6); }

.entete { background: var(--blanc); box-shadow: var(--ombre-sm); }
.entete__ligne { display: flex; align-items: center; justify-content: space-between; gap: var(--espace-4); min-height: 64px; flex-wrap: wrap; }
.entete__marque, .entete__marque:visited { display: flex; align-items: center; gap: var(--espace-3); text-decoration: none; color: var(--encre); }
.entete__produit { font-family: var(--police-titres); font-weight: 700; font-size: 1.05rem; }
.entete__nav { display: flex; gap: var(--espace-4); flex-wrap: wrap; }
.lien-nav, .lien-nav:visited { color: var(--encre); text-decoration: none; font-weight: 500; }
.lien-nav:hover { color: var(--primaire); }

.pied { padding: var(--espace-6) 0; color: var(--gris-600); font-size: 0.9rem; }
.pied__ligne { display: flex; justify-content: space-between; gap: var(--espace-4); flex-wrap: wrap; }
.pied nav { display: flex; gap: var(--espace-4); flex-wrap: wrap; }
.lien-pied, .lien-pied:visited { color: var(--gris-600); }

.panneau { background: var(--blanc); border-radius: var(--rayon-xl); padding: var(--espace-8); box-shadow: var(--ombre-sm); }
.panneau--fort { background: var(--encre); color: var(--blanc); }
.panneau--fort h1, .panneau--fort h2 { color: var(--blanc); }
.panneau--fort a, .panneau--fort a:visited { color: var(--mint); }
.chapeau { font-size: 1.15rem; color: var(--gris-600); }
.panneau--fort .chapeau { color: var(--emerald-100); }

.grille { display: grid; gap: var(--espace-4); grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.carte { background: var(--blanc); border: 1px solid var(--gris-200); border-radius: var(--rayon-lg); padding: var(--espace-6); }
.carte h3 { margin-bottom: var(--espace-2); }

.formulaire { display: grid; gap: var(--espace-4); }
.formulaire--ligne { grid-template-columns: 1fr auto; align-items: end; }
.champ { display: grid; gap: var(--espace-1); }
.champ label { font-weight: 500; }
.champ input, .champ select, .champ textarea { font: inherit; padding: 0.7rem 0.9rem; border: 1px solid var(--gris-200); border-radius: var(--rayon-md); background: var(--blanc); color: var(--encre); width: 100%; }
.champ textarea { min-height: 160px; }
.champ input:focus, .champ textarea:focus { outline: 2px solid var(--primaire); outline-offset: 1px; }
.aide { font-size: 0.875rem; color: var(--gris-600); }
.case { display: flex; gap: var(--espace-2); align-items: flex-start; }

.bouton, .bouton:visited { display: inline-block; background: var(--primaire); color: var(--blanc); border: 0; border-radius: var(--rayon-md); padding: 0.75rem 1.3rem; font: inherit; font-weight: 700; text-decoration: none; cursor: pointer; }
.bouton:hover { background: var(--primaire-survol); color: var(--blanc); }
.bouton--cta, .bouton--cta:visited { background: var(--terra-cta); }
.bouton--cta:hover { background: var(--emerald-800); }
.bouton--secondaire, .bouton--secondaire:visited { background: var(--blanc); color: var(--encre); border: 1px solid var(--gris-200); }
.bouton--secondaire:hover { background: var(--gris-100); color: var(--encre); }
.bouton--danger, .bouton--danger:visited { background: var(--erreur); }

.message-info { background: var(--dew); border-radius: var(--rayon-md); padding: var(--espace-3) var(--espace-4); margin: 0; }
.message-erreur { background: #FDECEC; color: var(--erreur); border-radius: var(--rayon-md); padding: var(--espace-3) var(--espace-4); margin: 0; }

.tableau { width: 100%; border-collapse: collapse; }
.tableau th, .tableau td { text-align: left; padding: var(--espace-3); border-bottom: 1px solid var(--gris-200); vertical-align: top; }
.tableau th { font-size: 0.85rem; color: var(--gris-600); font-weight: 500; }
.tableau tr.ligne-lien { cursor: pointer; position: relative; }
/* Ligne entière cliquable sans JavaScript : le lien de la première cellule couvre la ligne. */
.tableau tr.ligne-lien a.lien-ligne::after { content: ""; position: absolute; inset: 0; }
.tableau tr.ligne-lien:hover { background: var(--emerald-50); }
.tableau a.lien-ligne, .tableau a.lien-ligne:visited { color: var(--encre); text-decoration: none; font-weight: 500; }
.defilement { overflow-x: auto; }

.etiquette { display: inline-block; padding: 0.1rem 0.55rem; border-radius: 999px; font-size: 0.8rem; font-weight: 700; background: var(--gris-100); color: var(--gris-600); }
.etiquette--ok { background: var(--emerald-50); color: var(--succes); }
.etiquette--majeure { background: #FDECEC; color: var(--erreur); }
.etiquette--moyenne { background: #FEF3E2; color: var(--alerte); }
.etiquette--mineure { background: var(--gris-100); color: var(--gris-600); }

.jauges { display: grid; gap: var(--espace-4); grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.jauge { background: var(--emerald-50); border-radius: var(--rayon-lg); padding: var(--espace-4); }
.jauge__valeur { font-family: var(--police-titres); font-size: 2rem; font-weight: 700; }

.pagination { display: flex; gap: var(--espace-3); align-items: center; margin-top: var(--espace-4); }

@media (max-width: 640px) {
    h1 { font-size: 1.6rem; }
    .panneau { padding: var(--espace-6); border-radius: var(--rayon-lg); }
    .formulaire--ligne { grid-template-columns: 1fr; }
}
.sans-marge { margin: 0; }
.espace-bas { margin-bottom: var(--espace-3); }