/*
 * Theme Angie -- surcharges editoriales, chargees APRES style.css.
 *
 * tokens.css donne les couleurs et les formes ; ce fichier donne la grammaire
 * de angie.fr que les tokens ne portent pas : en-tete creme sous filet noir,
 * titres en capitales condensees, boutons a plat en capitales larges, champs
 * cernes de noir, logo officiel. Meme esprit que app-tools/src/ui/theme/
 * angie.css.
 *
 * Separe de style.css pour que le theme de repli Solstice Lab reste intact :
 * retirer le <link> de base.html (et restaurer tokens.css depuis git) suffit
 * a le retrouver. Charge par son propre <link>, jamais par @import (le
 * cache-busting de static_versioned() ne verrait pas un changement importe).
 *
 * Ecart assume avec la charte : les cartes et tableaux gardent un fin cadre en
 * plus du filet noir, parce qu'ils contiennent des formulaires et des donnees
 * denses.
 */

/* Chiffres alignes : Archivo n'a pas de chasse fixe, ses chiffres tabulaires
   tiennent la colonne (tableaux de metriques, mois, pourcentages). */
body,
.mono,
input,
select {
  font-variant-numeric: tabular-nums;
}

/* ---------- Marque : logo officiel Angie + nom de l'outil en aplat bleu ---------- */
.brand-marque {
  --h: 30px;
  display: inline-flex;
  align-items: baseline; /* le bas du logo est sa ligne de base */
  gap: calc(var(--h) * 0.3);
  line-height: 1;
  color: var(--texte);
}
.brand-angie {
  height: var(--h);
  width: auto;
  display: block;
}
/* Greed Condensed approchee par l'axe de chasse d'Archivo. Le bleu sur creme
   ne fait que 3,9:1 : il ne tient en AA que parce que le mot est en gros et
   gras (>= 18,66 px, 700) -- ne pas descendre sous 0,78. */
.brand-outil {
  font-size: calc(var(--h) * 0.78);
  font-weight: 800;
  font-stretch: 75%;
  letter-spacing: 0.02em;
  color: var(--couleur-accent);
}

/* ---------- En-tete : onglets en capitales, panneau de compte cerne ---------- */
.compte-panneau {
  border: 2px solid var(--texte);
}
/* Les entrees du panneau (lien Reglages, bouton Deconnexion) se lisent pareil :
   le bouton est de type submit et heritait du gabarit des boutons d'action
   (capitales larges, cerne de 2 px), qui passe devant .compte-entree. */
.compte-panneau .compte-entree,
.compte-panneau button.compte-entree[type="submit"] {
  padding: 9px 10px;
  border: 0;
  font-size: 14px;
  font-weight: 500;
  font-stretch: 100%;
  letter-spacing: normal;
  text-transform: none;
}
nav.app-nav a {
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
}
nav.app-nav a.active {
  font-weight: 700;
}

/* ---------- Titres : capitales condensees ---------- */
h1,
h2 {
  text-transform: uppercase;
  font-weight: 800;
  font-stretch: 70%;
  letter-spacing: 0.04em;
  line-height: 1.05;
}
h1 {
  font-size: 2.4rem;
}
h2 {
  font-size: 1.5rem;
  /* Filet noir au-dessus d'une section, comme les titres de bloc de angie.fr. */
  padding-top: 14px;
  border-top: 2px solid var(--texte);
}
h1 + h2,
.entete-page + h2,
.messages + h2,
.objectifs-form-col > h2:first-child,
.benchmark-form-col > h2,
.export-column > h2:first-child {
  /* Un filet sous un titre de page ou en tete de colonne doublerait celui de
     l'en-tete de page. */
  border-top: none;
  padding-top: 0;
}
.entete-page + h2 {
  margin-top: 0;
}
h3 {
  font-weight: 700;
}
.entete-page {
  border-bottom: 2px solid var(--texte);
}
.entete-page h1,
.entete-page h1:has(+ .page-subtitle),
.accueil h1,
.accueil h1:has(+ .accueil-date) {
  font-size: 2.6rem;
}
/* Salutation du tableau de bord : meme filet et meme titre que les en-tetes des
   autres onglets (style.css lui donnait 36 px / 500, plus specifique que h1). */
.accueil {
  border-bottom: 2px solid var(--texte);
}
.accueil h1,
.accueil h1:has(+ .accueil-date) {
  font-weight: 800;
  line-height: 1.05;
}

/* ---------- Boutons : a plat, capitales larges, cernes de 2 px ---------- */
button[type="submit"],
button.btn,
.btn {
  border-width: 2px; /* toutes les variantes : meme encombrement */
  font-size: 0.72rem;
  font-weight: 700;
  font-stretch: 125%;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 9px 20px;
}
button.secondary,
.btn.secondary {
  background: transparent;
  color: var(--texte);
  border-color: var(--texte);
  font-weight: 700;
}
button.secondary:hover,
.btn.secondary:hover {
  background: var(--texte);
  border-color: var(--texte);
  color: var(--fond-page);
}
/* Destructif : le rouge s'assombrit vers le texte pour tenir AA sur creme
   (le terracotta pur plafonne sous 4,5:1), sans cesser d'etre rouge. */
.btn.danger {
  color: color-mix(in srgb, var(--texte) 40%, var(--negatif));
  border-color: var(--negatif);
}
.btn.danger:hover {
  background: var(--negatif);
  border-color: var(--negatif);
  color: var(--surface);
}
.btn.disabled,
.btn.disabled:hover {
  background: transparent;
  border-color: var(--bordure);
  color: var(--texte-secondaire);
}

/* ---------- Formulaires ---------- */
/* Un champ = une colonne : libelle, saisie, erreur, aide. Le <br> du gabarit
   champ_formulaire.html n'a plus de raison d'etre. */
.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-width: 360px;
  margin-bottom: 18px;
}
.field br {
  display: none;
}
.field label {
  margin: 0;
}
.field-aide {
  margin: 0;
  font-size: 0.78rem;
}
/* Erreur de validation Django : sous le champ, en rouge assombri (AA sur creme). */
.errorlist {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 0.82rem;
  font-weight: 500;
  color: color-mix(in srgb, var(--texte) 40%, var(--negatif));
}
.field:has(.errorlist) input,
.field:has(.errorlist) select {
  border-color: var(--negatif);
}

/* Champs cernes de noir. */
input[type="text"],
input[type="password"],
input[type="date"],
input[type="number"],
input[type="email"],
input[type="url"],
input[type="month"],
select {
  border: 2px solid var(--texte);
  padding: 9px 11px;
}
input[type="text"]:hover,
input[type="password"]:hover,
input[type="date"]:hover,
input[type="number"]:hover,
input[type="email"]:hover,
input[type="url"]:hover,
input[type="month"]:hover,
select:hover {
  border-color: var(--texte);
}
/* Champs figes (lecture seule apres extraction) : ils doivent rester du texte. */
input:disabled,
select:disabled {
  border-color: transparent;
}
/* Fleche de la liste deroulante dessinee en degrades : le menu natif garde sa
   fleche systeme, d'un gris qui jure avec le cerne noir. currentColor, donc
   aucune couleur en dur. */
select:not(:disabled) {
  appearance: none;
  padding-right: 34px;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 17px) 55%, calc(100% - 12px) 55%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
/* Champs a l'interieur d'un tableau (objectifs, concurrence) : un cadre noir de
   2 px par cellule transformait la grille en grille de cases. Le champ se lit
   comme la cellule elle-meme, sans aucun trait ; un fond beige leger signale
   qu'on peut ecrire, il fonce au survol, et un cadre d'accent n'apparait qu'au
   focus. */
td input[type="text"],
td input[type="number"],
td input[type="email"],
td input[type="url"],
td input[type="date"],
td input[type="month"],
td select {
  border: 0;
  background-color: color-mix(in srgb, var(--surface-douce) 55%, var(--surface));
  padding: 9px 8px;
}
td input[type="text"]:hover,
td input[type="number"]:hover,
td input[type="email"]:hover,
td input[type="url"]:hover,
td input[type="date"]:hover,
td input[type="month"]:hover,
td select:hover {
  background-color: var(--surface-douce);
}
td input[type="text"]:focus,
td input[type="number"]:focus,
td input[type="email"]:focus,
td input[type="url"]:focus,
td input[type="date"]:focus,
td input[type="month"]:focus,
td select:focus {
  background-color: var(--surface);
  box-shadow: inset 0 0 0 2px var(--couleur-accent);
}
/* Champs figes dans un tableau (apres extraction Meta/LinkedIn) : sans cette
   regle, le fond « on peut ecrire » ci-dessus l'emporte sur la transparence de
   style.css (plus specifique) et date/texte/impressions gardaient un fond, alors
   que Engagement (texte brut) et Payant LinkedIn (select desactive) n'en avaient
   pas. Declaree apres le survol pour que le fond ne reapparaisse pas dessus. */
td input:disabled,
td input:disabled:hover {
  background-color: transparent;
}

/* Formulaire de saisie YouTube : champs en aplat, sans aucun trait. Le fond est
   plus soutenu que dans les tableaux : hors tableau, un aplat trop pale ne se
   lit plus comme un champ modifiable (retour utilisateur). */
.youtube-metric-field input[type="text"],
.youtube-metric-field input[type="number"],
.youtube-metric-field input[type="month"],
.youtube-metric-field input[type="date"],
.youtube-metric-field select,
.youtube-month-field input[type="text"],
.youtube-month-field input[type="number"],
.youtube-month-field input[type="month"],
.youtube-month-field input[type="date"],
.youtube-month-field select {
  border: 0;
  background-color: var(--surface-douce);
  padding: 10px 12px;
}
.youtube-metric-field input[type="text"]:hover,
.youtube-metric-field input[type="number"]:hover,
.youtube-metric-field input[type="month"]:hover,
.youtube-metric-field input[type="date"]:hover,
.youtube-metric-field select:hover,
.youtube-month-field input[type="text"]:hover,
.youtube-month-field input[type="number"]:hover,
.youtube-month-field input[type="month"]:hover,
.youtube-month-field input[type="date"]:hover,
.youtube-month-field select:hover {
  background-color: color-mix(in srgb, var(--texte) 8%, var(--surface-douce));
}
.youtube-metric-field input[type="text"]:focus,
.youtube-metric-field input[type="number"]:focus,
.youtube-metric-field input[type="month"]:focus,
.youtube-metric-field input[type="date"]:focus,
.youtube-metric-field select:focus,
.youtube-month-field input[type="text"]:focus,
.youtube-month-field input[type="number"]:focus,
.youtube-month-field input[type="month"]:focus,
.youtube-month-field input[type="date"]:focus,
.youtube-month-field select:focus {
  background-color: var(--surface);
  box-shadow: inset 0 0 0 2px var(--couleur-accent);
}

/* Fichier a importer : le bouton natif prend le gabarit des boutons secondaires. */
input[type="file"] {
  max-width: 100%;
  font-family: inherit;
  font-size: 0.86rem;
}
input[type="file"]::file-selector-button {
  margin-right: 14px;
  padding: 9px 18px;
  background: transparent;
  color: var(--texte);
  border: 2px solid var(--texte);
  font-family: inherit;
  font-size: 0.72rem;
  font-weight: 700;
  font-stretch: 125%;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  cursor: pointer;
}
input[type="file"]::file-selector-button:hover {
  background: var(--texte);
  color: var(--fond-page);
}
label {
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--texte-secondaire);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* Formulaire de creation / modification d'un utilisateur : une carte posee sous
   l'en-tete, champs pleine largeur, actions separees par un filet. Le meme
   formulaire sert a la creation et a la modification. */
.form-utilisateur {
  max-width: 560px;
  padding: 28px;
  background: var(--surface);
  border: 1px solid var(--bordure);
  border-top: 2px solid var(--texte);
}
.form-utilisateur .field {
  max-width: none;
}
.form-utilisateur .actions {
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid var(--bordure);
}

/* ---------- Messages : tenus AA sur creme, trait d'etat a gauche ---------- */
ul.messages li {
  background: color-mix(in srgb, var(--positif) 12%, transparent);
  color: color-mix(in srgb, var(--texte) 40%, var(--positif));
  border-left: 4px solid var(--positif);
}
ul.messages li.error {
  background: color-mix(in srgb, var(--negatif) 12%, transparent);
  color: color-mix(in srgb, var(--texte) 40%, var(--negatif));
  border-left-color: var(--negatif);
}

/* ---------- Tableaux : en-tete cerne de noir, lecture en lignes ---------- */
table {
  border-color: var(--bordure);
}
th,
td {
  padding: 12px 16px;
}
th {
  background: var(--fond-page);
  border-bottom: 2px solid var(--texte);
  color: var(--texte);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
/* Separateurs de ligne plus discrets que le trait d'en-tete : le noir marque la
   structure, le beige ne fait que guider l'oeil le long de la ligne. */
td {
  border-bottom-color: color-mix(in srgb, var(--bordure) 60%, transparent);
}
/* Survol : fond doux plus un trait d'accent a gauche, pour suivre la ligne
   sur un tableau large. Les lignes deja teintees (avertissement, erreur)
   gardent leur couleur, qui est une information. */
tbody tr:not([class]):hover > :first-child {
  box-shadow: inset 3px 0 0 var(--couleur-accent);
}

/* ---------- Gestion des acces : role segmente, acces en interrupteur ---------- */
/* Memes composants que app-tools (ChoixEnLigne, InterrupteurEnLigne). Ici ce
   sont des formulaires : un clic poste le choix, la page se recharge. Les
   boutons sont qualifies par .choix / .interrupteur pour passer devant la
   regle des boutons d'envoi. */
.choix-form {
  margin: 0;
}
.choix {
  display: inline-flex;
  padding: 3px;
  background: var(--surface-douce);
  border: 1px solid var(--bordure);
  border-radius: 999px; /* forme, pas un rayon thematisable */
}
.choix button.choix-option {
  padding: 5px 14px;
  background: transparent;
  color: var(--texte-secondaire);
  border: 0;
  border-radius: 999px;
  font-family: inherit;
  font-size: 0.8rem;
  font-weight: 500;
  font-stretch: 100%;
  letter-spacing: normal;
  text-transform: none;
  cursor: pointer;
}
.choix button.choix-option[aria-checked="true"] {
  background: var(--couleur-structure);
  color: var(--texte-sur-structure);
  cursor: default;
}
.choix button.choix-option[aria-checked="false"]:hover {
  background: transparent;
  color: var(--texte);
}

/* button.interrupteur : meme specificite que la regle des boutons d'envoi, placee
   plus haut, pour la battre a l'ordre. */
button.interrupteur {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 0;
  background: transparent;
  border: 0;
  color: var(--texte-secondaire);
  font-family: inherit; /* meme police et meme taille que Membre / Admin a cote */
  font-size: 0.8rem;
  font-weight: 500;
  font-stretch: 100%;
  letter-spacing: normal;
  text-transform: none;
  white-space: nowrap;
  cursor: pointer;
}
button.interrupteur:hover {
  background: transparent;
}
.interrupteur-piste {
  position: relative;
  width: 34px;
  height: 20px;
  border-radius: 999px;
  background: var(--bordure-forte);
  transition: background var(--transition-douce);
}
.interrupteur-bille {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--surface);
  transition: transform var(--transition-douce);
}
.interrupteur[aria-checked="true"] .interrupteur-piste {
  background: var(--positif);
}
.interrupteur[aria-checked="true"] .interrupteur-bille {
  transform: translateX(14px);
}
/* Meme assombrissement que les badges : le vert pur en texte sur creme reste
   sous le seuil AA. */
.interrupteur[aria-checked="true"] .interrupteur-libelle {
  color: color-mix(in srgb, var(--texte) 40%, var(--positif));
}
/* Le libelle reprend explicitement la police de Membre / Admin : le bouton qui
   le porte est un submit, dont les capitales larges se transmettaient sinon. */
.interrupteur-libelle {
  font-size: 0.8rem;
  font-weight: 500;
  font-stretch: 100%;
  letter-spacing: normal;
  text-transform: none;
}

/* Tableau des utilisateurs : crayon de modification hors du cadre, a droite de la
   ligne, comme dans app-tools (la modification porte sur le compte, ce n'est
   pas une de ses donnees). La derniere colonne est donc de largeur nulle : elle
   ancre le crayon sur sa ligne sans occuper de place, et le cadre ne la compte
   pas. Le conteneur ne coupe plus, sinon le crayon serait rogne. */
.table-wrap-flottant {
  overflow: visible;
}
.tableau-utilisateurs th:last-child,
.tableau-utilisateurs td:last-child {
  position: relative;
  width: 0;
  padding: 0;
  border-bottom-color: transparent;
}
.tableau-utilisateurs th:last-child {
  border-bottom: 0;
  background: transparent;
}
.tableau-utilisateurs td:last-child .bouton-icone {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
}
/* Traits verticaux entre les colonnes de donnees, pas apres la derniere. */
.tableau-utilisateurs th:not(:nth-last-child(-n + 2)),
.tableau-utilisateurs td:not(:nth-last-child(-n + 2)) {
  border-right: 1px solid var(--bordure);
}

/* ---------- Cartes : filet noir en haut ---------- */
.dashboard-card,
.login-card {
  border-top: 2px solid var(--texte);
}
.dashboard-card:hover {
  border-color: var(--texte);
}
.dashboard-card::after {
  border-color: var(--texte);
}
.dashboard-card-label {
  font-weight: 800;
  font-stretch: 70%;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 1.15rem;
}

/* ---------- Modale : sans ombre, la charte la cerne ---------- */
.modale-boite {
  border: 2px solid var(--texte);
}

/* ---------- Ecran de connexion : marque, tampon, carte ---------- */
.login-marque,
.login-tampon {
  display: flex;
  justify-content: center;
}
.login-marque {
  margin: 8vh 0 0;
}
.login-tampon {
  margin: 28px 0 0;
}
.login-tampon img {
  width: clamp(64px, 9vw, 96px);
  height: auto;
  animation: tampon-tour 28s linear infinite;
}
@keyframes tampon-tour {
  to {
    transform: rotate(360deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  .login-tampon img {
    animation: none;
  }
}
/* Le tampon prend la place du grand vide au-dessus de la carte. */
.login-tampon + .login-card {
  margin-top: 12px;
}
.login-card h1 {
  font-size: 1.8rem;
}

/* ---------- Pages d'erreur : le code en capitales condensees ---------- */
.error-page-code {
  font-weight: 800;
  font-stretch: 70%;
  letter-spacing: 0.04em;
  color: var(--texte);
}

/* ---------- Signature Solstice Lab : filet noir, comme le pied de angie.fr ---------- */
.solstice-signature {
  border-top: 2px solid var(--texte);
}