/* =========================================================================
   Compteur d'impact RSE — GCC AURECA!
   Feuille de style principale. CSS vanilla, sans framework, sans CDN.
   Palette et réglages centralisés en custom properties (:root),
   conformes à la charte graphique officielle GCC AURECA!.
   ========================================================================= */

/* --- Police Groupe : Work Sans (OFL), 100 % auto-hébergée --------------- */
/* Fichier variable (axe de graisse 100–900), sous-ensemble latin.          */
@font-face {
  font-family: "Work Sans";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/fonts/work-sans-latin.woff2") format("woff2");
}

:root {
  /* === Charte GCC AURECA! ============================================== */

  /* Jaune GCC (accent signature, vif) — jamais en texte sur fond clair */
  --jaune-gcc:      #FCEA10;
  --jaune-gcc-txt:  #3C3C3C;   /* texte gris foncé à poser SUR le jaune vif */

  /* Gris GCC — texte principal & fonds sombres */
  --gris:           #3C3C3C;
  --gris-texte:     #3C3D3A;
  --gris-800:       #2f2f2c;

  /* Jaune AURECA! (moutarde) — COULEUR PRINCIPALE de l'agence */
  --moutarde:       #D3BF4D;
  --moutarde-fonce: #3A3524;
  --moutarde-050:   #F8F3DC;
  --moutarde-100:   #ECE3B8;

  /* Vert = couleur RSE de la charte (positif, gains, terminé) */
  --vert:           #95DAC0;
  --vert-fonce:     #1A4030;
  --vert-050:       #EAF6F0;
  --vert-100:       #D2ECE0;

  /* Secondaires (disponibles, usage parcimonieux) */
  --bleu:    #9AC6DE;  --bleu-fonce:   #1E3B64;
  --rose:    #E8A2D6;  --rose-fonce:   #352856;
  --orange:  #F9AD71;  --orange-fonce: #401F15;
  --violet:  #A496D3;  --violet-fonce: #1E2C52;

  /* --- neutres --- */
  --page:      #EDEEEC;   /* fond de page, gris très clair charte */
  --surface:   #FFFFFF;   /* cartes */
  --surface-2: #F5F6F3;
  --encre:     #3C3C3C;   /* texte principal = Gris GCC */
  --encre-2:   #63635E;   /* texte secondaire / muet */
  --encre-3:   #8C8C86;
  --trait:     #E2E3DF;   /* bordures douces */
  --trait-2:   #D2D3CE;

  /* --- états --- */
  --succes:    #1A4030;   /* vert RSE foncé */
  --succes-bg: #E6F4EC;
  --succes-bd: #BEE3D3;
  --erreur:    #B23B3B;   /* rouge sobre & accessible (la charte n'a pas de rouge) */
  --erreur-bg: #F8E7E4;
  --erreur-bd: #EDC4BE;

  /* --- volets split-flap (réalisme SMIIRL, inchangés) --- */
  --flap-haut:   #23292c;
  --flap-bas:    #171b1e;
  --flap-fond:   #0a0d0e;
  --flap-chiffre:#f6f4ec;

  /* --- rayons & ombres --- */
  --r-sm: 10px;
  --r:    14px;
  --r-lg: 20px;
  --r-pill: 999px;
  --ombre-sm: 0 1px 2px rgba(40,40,36,.06), 0 1px 1px rgba(40,40,36,.04);
  --ombre:    0 10px 26px -14px rgba(40,40,30,.22), 0 2px 6px -3px rgba(40,40,30,.10);
  --ombre-lg: 0 26px 52px -22px rgba(30,30,24,.30);

  --font: "Work Sans", system-ui, -apple-system, "Segoe UI", Roboto,
          "Helvetica Neue", Arial, "Noto Sans", sans-serif;

  --largeur: 1120px;
}

/* --- base ---------------------------------------------------------------- */
* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font);
  color: var(--encre);
  background-color: var(--page);
  background-image:
    radial-gradient(1100px 560px at 12% -8%, rgba(149,218,192,.10), transparent 60%),
    radial-gradient(1000px 520px at 108% 0%, rgba(211,191,77,.12), transparent 55%);
  background-attachment: fixed;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: var(--gris); text-decoration-color: var(--jaune-gcc); text-decoration-thickness: 2px; text-underline-offset: 2px; }
a:hover { color: #000; text-decoration-color: var(--moutarde); }

h1 { font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2rem); margin: 0 0 1rem; font-weight: 700; letter-spacing: -.01em; line-height: 1.2; color: var(--encre); }
h2 { font-size: 1.2rem; margin: 0 0 .75rem; font-weight: 600; letter-spacing: -.01em; color: var(--encre); }
h3 { font-size: 1.02rem; margin: 1.4rem 0 .6rem; font-weight: 600; color: var(--encre); }
p  { margin: 0 0 1rem; }

/* =========================================================================
   Barre de navigation — bandeau Jaune AURECA! (moutarde)
   ========================================================================= */
.topbar {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding: .7rem clamp(1rem, 4vw, 2rem);
  background: var(--moutarde);
  color: var(--moutarde-fonce);
  flex-wrap: wrap;
  box-shadow: var(--ombre-sm);
  position: relative;
}
/* fine touche Jaune GCC vif en pied de bandeau */
.topbar::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 3px;
  background: var(--jaune-gcc);
  opacity: .9;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: .75rem;
  color: var(--moutarde-fonce);
  text-decoration: none;
}
/* logo complet posé dans un cartouche blanc avec un peu d'air */
.brand__logo {
  display: inline-flex;
  align-items: center;
  background: #fff;
  padding: .34rem .6rem;
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(40,40,30,.14), inset 0 0 0 1px rgba(0,0,0,.03);
}
.brand__logo img { display: block; height: 34px; width: auto; }
.brand__app {
  font-size: .96rem;
  font-weight: 600;
  color: var(--moutarde-fonce);
  letter-spacing: .1px;
  line-height: 1.15;
}
.brand__app small { display: block; font-size: .68rem; font-weight: 500; color: rgba(58,53,36,.72); letter-spacing: .2px; margin-top: 1px; }

.nav {
  display: flex;
  align-items: center;
  gap: .3rem;
  margin-left: auto;
  flex-wrap: wrap;
}
.nav a {
  color: rgba(58,53,36,.86);
  text-decoration: none;
  padding: .4rem .8rem;
  border-radius: var(--r-pill);
  font-size: .94rem;
  font-weight: 500;
  line-height: 1;
  transition: background-color .15s, color .15s;
}
.nav a:hover { color: var(--moutarde-fonce); background: rgba(58,53,36,.12); }
.nav a.actif { color: #fff; background: var(--gris); font-weight: 600; }
.nav .lien {
  background: none;
  border: 1px solid rgba(58,53,36,.4);
  color: var(--moutarde-fonce);
  cursor: pointer;
  font: inherit;
  font-size: .9rem;
  font-weight: 500;
  padding: .36rem .8rem;
  border-radius: var(--r-pill);
  margin-left: .35rem;
  transition: background-color .15s, border-color .15s, color .15s;
}
.nav .lien:hover { color: #fff; background: var(--gris); border-color: var(--gris); }
.nav .inline { display: inline; margin: 0; }

/* =========================================================================
   Conteneur & pied de page
   ========================================================================= */
.container {
  max-width: var(--largeur);
  margin: clamp(1.25rem, 3vw, 2.25rem) auto;
  padding: 0 clamp(1rem, 4vw, 2rem);
}
.container--large { --largeur: 1420px; }

.footer {
  text-align: center;
  padding: 2.5rem 1rem 2rem;
  color: var(--encre-3);
  font-size: .82rem;
}
.footer::before {
  content: "";
  display: block;
  width: 44px; height: 3px;
  margin: 0 auto 1rem;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--moutarde), var(--vert));
}

/* =========================================================================
   Messages flash
   ========================================================================= */
.flashs { margin-bottom: 1.25rem; display: grid; gap: .5rem; }
.flash {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  padding: .7rem 1rem;
  border-radius: var(--r-sm);
  font-size: .95rem;
  border: 1px solid transparent;
  box-shadow: var(--ombre-sm);
  animation: flash-in .35s ease;
}
.flash::before {
  font-weight: 700;
  flex: 0 0 auto;
  width: 1.25rem; height: 1.25rem;
  display: grid; place-items: center;
  border-radius: 50%;
  font-size: .8rem;
  line-height: 1;
}
.flash-succes { background: var(--succes-bg); color: var(--vert-fonce); border-color: var(--succes-bd); }
.flash-succes::before { content: "\2713"; background: var(--vert-fonce); color: #fff; }
.flash-erreur { background: var(--erreur-bg); color: #8a2626; border-color: var(--erreur-bd); }
.flash-erreur::before { content: "\0021"; background: var(--erreur); color: #fff; }
@keyframes flash-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* =========================================================================
   Cartes
   ========================================================================= */
.carte {
  background: var(--surface);
  border: 1px solid var(--trait);
  border-radius: var(--r);
  padding: 1.4rem 1.5rem;
  margin-bottom: 1.5rem;
  box-shadow: var(--ombre-sm);
}
.carte-etroite { max-width: 440px; margin: 0 auto; }

.cartes-liens {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.1rem;
}
.carte-lien {
  display: block;
  position: relative;
  background: var(--surface);
  border: 1px solid var(--trait);
  border-radius: var(--r);
  padding: 1.3rem 1.4rem 1.3rem 1.5rem;
  text-decoration: none;
  color: inherit;
  box-shadow: var(--ombre-sm);
  overflow: hidden;
  transition: transform .15s, box-shadow .2s, border-color .2s;
}
.carte-lien::before {
  content: "";
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 4px;
  background: linear-gradient(var(--moutarde), var(--moutarde-fonce));
  opacity: 0;
  transition: opacity .2s;
}
.carte-lien:hover { transform: translateY(-2px); box-shadow: var(--ombre); border-color: var(--moutarde-100); }
.carte-lien:hover::before { opacity: 1; }
.carte-lien h2 { margin-bottom: .35rem; color: var(--encre); }
.carte-lien p { margin: 0; color: var(--encre-2); font-size: .92rem; }

/* =========================================================================
   Boutons
   ========================================================================= */
.btn {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .55rem 1.1rem;
  border: 1px solid var(--trait-2);
  border-radius: var(--r-pill);
  background: var(--surface);
  color: var(--encre);
  cursor: pointer;
  font: inherit;
  font-size: .94rem;
  font-weight: 500;
  line-height: 1.2;
  text-decoration: none;
  box-shadow: var(--ombre-sm);
  transition: background-color .15s, border-color .15s, color .15s, transform .08s, box-shadow .15s;
}
.btn:hover { border-color: var(--gris); background: var(--surface-2); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 2px solid var(--gris); outline-offset: 1px; box-shadow: 0 0 0 4px rgba(252,234,16,.55); }

/* primaire : pastille Gris GCC → hover Jaune GCC vif texte gris foncé */
.btn-primaire {
  background: var(--gris);
  border-color: var(--gris);
  color: #fff;
  font-weight: 600;
}
.btn-primaire:hover { background: var(--jaune-gcc); border-color: var(--jaune-gcc); color: var(--jaune-gcc-txt); }

.btn-danger { background: var(--erreur); border-color: #9a2f2f; color: #fff; }
.btn-danger:hover { background: #9a2f2f; border-color: #832727; color: #fff; }

.lien {
  background: none;
  border: none;
  color: var(--gris);
  cursor: pointer;
  font: inherit;
  padding: 0;
  text-decoration: underline;
  text-decoration-color: var(--jaune-gcc);
  text-decoration-thickness: 2px;
  text-underline-offset: 2px;
}
.lien:hover { color: #000; text-decoration-color: var(--moutarde); }
.lien-danger { color: var(--erreur); text-decoration-color: rgba(178,59,59,.4); }
.lien-danger:hover { color: #8a2626; }
.inline { display: inline; }
.actions { margin-top: 1rem; display: flex; gap: .6rem; flex-wrap: wrap; }

/* =========================================================================
   Titres d'action & notes
   ========================================================================= */
.titre-action {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1.25rem;
}
.titre-action h1 { margin: 0; }
.note { color: var(--encre-2); font-size: .92rem; }
.repere { font-size: .92rem; color: var(--encre-2); }
.repere li { margin: .2rem 0; }
.repere strong { color: var(--encre); }
.detail { margin-top: 2.25rem; }
.danger-zone {
  margin-top: 2.25rem;
  padding: 1.1rem 1.25rem;
  border: 1px dashed var(--erreur-bd);
  border-radius: var(--r);
  background: rgba(178,59,59,.03);
}

/* =========================================================================
   Formulaires
   ========================================================================= */
.form label,
.form-large label {
  display: block;
  margin-bottom: 1rem;
  font-size: .9rem;
  font-weight: 500;
  color: var(--encre);
}
.form input, .form textarea, .form select,
.form-large input, .form-large textarea, .form-large select,
.form-inline input, .form-inline select {
  display: block;
  width: 100%;
  padding: .55rem .7rem;
  margin-top: .35rem;
  border: 1px solid var(--trait-2);
  border-radius: var(--r-sm);
  font: inherit;
  color: var(--encre);
  background: #fff;
  transition: border-color .15s, box-shadow .15s;
}
.form input:focus, .form textarea:focus, .form select:focus,
.form-large input:focus, .form-large textarea:focus, .form-large select:focus,
.form-inline input:focus, .form-inline select:focus {
  outline: none;
  border-color: var(--gris);
  box-shadow: 0 0 0 3px rgba(252,234,16,.5);
}
.form input::placeholder, .form-inline input::placeholder { color: var(--encre-3); }
.form textarea { resize: vertical; min-height: 3rem; }

.form label.checkbox, .form-large label.checkbox, .form label.radio {
  display: flex;
  align-items: center;
  gap: .55rem;
  font-weight: 500;
}
.form label.checkbox input, .form-large label.checkbox input, .form label.radio input {
  width: auto;
  margin: 0;
  accent-color: var(--gris);
  width: 1.05rem; height: 1.05rem;
}
.grille-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0 1.2rem; }
.grille-5 { display: grid; grid-template-columns: repeat(auto-fit, minmax(84px, 1fr)); gap: 0 .9rem; }

fieldset {
  border: 1px solid var(--trait);
  border-radius: var(--r);
  margin: 0 0 1.4rem;
  padding: 1.1rem 1.35rem 1.25rem;
  background: var(--surface);
  box-shadow: var(--ombre-sm);
}
legend {
  padding: .15rem .7rem;
  font-weight: 600;
  font-size: .92rem;
  color: var(--moutarde-fonce);
  background: var(--moutarde-050);
  border: 1px solid var(--moutarde-100);
  border-radius: var(--r-pill);
}
.modes { display: flex; flex-direction: column; gap: .5rem; margin-bottom: 1.1rem; }
.modes label.radio {
  padding: .6rem .8rem;
  border: 1px solid var(--trait-2);
  border-radius: var(--r-sm);
  background: var(--surface-2);
  cursor: pointer;
  transition: border-color .15s, background-color .15s;
}
.modes label.radio:hover { border-color: var(--moutarde); }

.form-inline {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  align-items: center;
  margin: .9rem 0;
}
.form-inline input, .form-inline select { width: auto; margin: 0; }
.form-inline label.checkbox { margin: 0; }

/* =========================================================================
   Tableaux
   ========================================================================= */
.table-scroll {
  overflow-x: auto;
  border: 1px solid var(--trait);
  border-radius: var(--r);
  background: var(--surface);
  box-shadow: var(--ombre-sm);
  -webkit-overflow-scrolling: touch;
}
.tableau {
  width: 100%;
  border-collapse: collapse;
  background: transparent;
  font-size: .93rem;
}
.tableau th, .tableau td {
  padding: .65rem .85rem;
  border-bottom: 1px solid var(--trait);
  text-align: left;
  vertical-align: middle;
}
.tableau thead th {
  background: var(--surface-2);
  font-size: .74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--encre-2);
  white-space: nowrap;
  position: sticky;
  top: 0;
  box-shadow: inset 0 -2px 0 var(--moutarde-100);
}
.tableau tbody tr:nth-child(even) td { background: rgba(237,238,236,.5); }
.tableau tbody tr:hover td { background: var(--moutarde-050); }
.tableau tbody tr:last-child td { border-bottom: none; }
.tableau td.num, .tableau th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tableau .vide {
  text-align: center;
  color: var(--encre-2);
  padding: 2rem 1rem;
  background: var(--surface);
}
.tableau td a { font-weight: 600; }

/* Champs éditables directement dans un tableau (admin énergies, rôles…) */
.tableau input:not([type="checkbox"]):not([type="radio"]),
.tableau select {
  width: 100%;
  min-width: 5rem;
  padding: .4rem .55rem;
  border: 1px solid var(--trait-2);
  border-radius: var(--r-sm);
  font: inherit;
  color: var(--encre);
  background: #fff;
  transition: border-color .15s, box-shadow .15s;
}
.tableau input:focus, .tableau select:focus {
  outline: none;
  border-color: var(--gris);
  box-shadow: 0 0 0 3px rgba(252,234,16,.5);
}
.tableau input[type="checkbox"] { accent-color: var(--gris); width: 1.1rem; height: 1.1rem; }
.tableau .form-inline { margin: 0; }
.tableau .form-inline input { min-width: 8rem; }

/* Badges de statut */
.badge {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .2rem .6rem .2rem .5rem;
  border-radius: var(--r-pill);
  font-size: .76rem;
  font-weight: 600;
  line-height: 1.3;
  white-space: nowrap;
  border: 1px solid transparent;
}
.badge::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: currentColor; }
.badge-termine  { background: var(--vert);      color: var(--vert-fonce);     border-color: rgba(26,64,48,.18); }
.badge-en_cours { background: var(--moutarde);  color: var(--moutarde-fonce); border-color: rgba(58,53,36,.18); }
.badge-a_venir  { background: var(--surface-2); color: var(--encre-2);        border-color: var(--trait-2); }

/* Pourcentage de gains coloré */
.pourcent { font-weight: 700; font-variant-numeric: tabular-nums; }
.pourcent--fort  { color: var(--vert-fonce); }
.pourcent--moyen { color: var(--moutarde-fonce); }
.pourcent--faible{ color: var(--erreur); }

/* =========================================================================
   Tableau de bord — synthèse (chips)
   ========================================================================= */
.synthese {
  display: flex;
  flex-wrap: wrap;
  gap: .7rem;
  margin: 0 0 1.75rem;
}
.chip {
  background: var(--surface);
  border: 1px solid var(--trait);
  border-radius: var(--r-pill);
  padding: .45rem 1rem;
  font-size: .9rem;
  color: var(--encre-2);
  box-shadow: var(--ombre-sm);
  display: inline-flex;
  align-items: baseline;
  gap: .4rem;
}
.chip strong { color: var(--vert-fonce); font-size: 1.02rem; font-weight: 600; font-variant-numeric: tabular-nums; }

/* =========================================================================
   Tableau de bord — les 3 compteurs SMIIRL (split-flap)
   ========================================================================= */
.compteurs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(1rem, 2.5vw, 1.75rem);
  margin: .5rem 0 2.25rem;
}
.compteur {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .9rem;
  padding: 2rem 1.25rem 1.4rem;
  background: linear-gradient(180deg, var(--surface), var(--surface-2));
  border: 1px solid var(--trait);
  border-radius: var(--r-lg);
  box-shadow: var(--ombre);
  /* Chaque carte est un conteneur de requête : la taille des volets se calcule
     sur la LARGEUR DE LA CARTE (cqi) et non sur le viewport → le bandeau ne peut
     jamais déborder de sa carte, quel que soit le nombre de chiffres. La
     containment inline empêche aussi la largeur intrinsèque du bandeau de forcer
     l'élargissement de la carte. */
  container-type: inline-size;
  min-width: 0;
}
/* liseré Jaune GCC vif en tête (touche signature) */
.compteur::before {
  content: "";
  position: absolute; left: 0; right: 0; top: 0;
  height: 5px;
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  background: linear-gradient(90deg, var(--moutarde), var(--jaune-gcc), var(--moutarde));
}

/* étiquette au-dessus du compteur : pastille arrondie sobre (charte) */
.compteur__etiquette {
  max-width: 24rem;
  margin-top: .3rem;
  padding: .4rem 1rem;
  background: var(--surface-2);
  color: var(--encre);
  font-size: .86rem;
  font-weight: 600;
  line-height: 1.3;
  text-align: center;
  border: 1px solid var(--trait);
  border-radius: var(--r-pill);
  /* Hauteur réservée = 2 lignes de pastille (2 × line-height + padding + bordure),
     exprimée en em → suit automatiquement la taille de police de chaque contexte
     (le dashboard/embed en .86rem, l'affichage en clamp()). Ainsi le bandeau de
     volets démarre TOUJOURS à la même hauteur dans une rangée, que l'étiquette
     tienne sur 1 ou 2 lignes ; le texte est centré verticalement dans la zone. */
  min-height: calc(2.6em + .8rem + 2px);
  display: grid;
  align-content: center;
}

/* le bandeau de volets noirs */
.flapboard {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 0;
  padding: .55em .5em;
  border-radius: .28em;
  background: linear-gradient(180deg, #101416, #05080a);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05),
    inset 0 0 0 1px rgba(0,0,0,.6),
    0 10px 22px -14px rgba(0,0,0,.7);
  /* Repli (navigateurs sans container queries) : dimension au viewport. */
  font-size: clamp(30px, 4.4vw, 60px);
  /* Dimension pilotée par la largeur de la carte : 8 chiffres + 2 séparateurs
     ≈ 7,65em ; à 11cqi cela occupe ~84 % de la carte (marge dure de 16 %). */
  font-size: clamp(24px, 11cqi, 60px);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.container--large .flapboard {
  font-size: clamp(34px, 4.8vw, 74px);
  font-size: clamp(28px, 11cqi, 74px);
}

.flapboard__fallback {
  color: var(--flap-chiffre);
  font-weight: 800;
  letter-spacing: .02em;
  font-variant-numeric: tabular-nums;
  padding: .1em .1em;
}
.flapboard__sep { display: inline-block; width: .3em; }

/* un volet (un chiffre) */
.flap {
  position: relative;
  display: inline-block;
  width: .7em;
  height: 1.14em;
  margin: 0 .028em;
  border-radius: .1em;
  background: var(--flap-fond);
  box-shadow: 0 .04em .1em rgba(0,0,0,.45);
  perspective: 180px;
}
.flap__card, .flap__flip {
  position: absolute;
  left: 0; right: 0;
  height: calc(50% - 1px);
  overflow: hidden;
  background: linear-gradient(180deg, var(--flap-haut), #1c2225);
}
.flap__card--top, .flap__flip--top {
  top: 0;
  border-radius: .1em .1em 0 0;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}
.flap__card--bottom, .flap__flip--bottom {
  bottom: 0;
  border-radius: 0 0 .1em .1em;
  background: linear-gradient(180deg, #191e21, var(--flap-bas));
  box-shadow: inset 0 -1px 0 rgba(0,0,0,.5);
}
.flap__d {
  position: absolute;
  left: 0; right: 0;
  height: 1.14em;
  line-height: 1.14em;
  text-align: center;
  font-weight: 800;
  color: var(--flap-chiffre);
  text-shadow: 0 1px 1px rgba(0,0,0,.5);
}
.flap__card--top .flap__d, .flap__flip--top .flap__d { top: 0; }
.flap__card--bottom .flap__d, .flap__flip--bottom .flap__d { bottom: 0; }

.flap__flip {
  z-index: 2;
  visibility: hidden;
  backface-visibility: hidden;
}
.flap__flip--top { transform-origin: bottom center; }
.flap__flip--bottom { transform-origin: top center; transform: rotateX(90deg); }

.flap.is-flipping .flap__flip { visibility: visible; }
.flap.is-flipping .flap__flip--top    { animation: flapFoldTop .13s ease-in forwards; }
.flap.is-flipping .flap__flip--bottom { animation: flapFoldBottom .13s ease-out .13s forwards; }

@keyframes flapFoldTop {
  from { transform: rotateX(0deg); }
  to   { transform: rotateX(-90deg); }
}
@keyframes flapFoldBottom {
  from { transform: rotateX(90deg); }
  to   { transform: rotateX(0deg); }
}

/* légende sous le compteur */
.compteur__unite {
  margin-top: .25rem;
  color: var(--encre-2);
  font-size: .9rem;
  text-align: center;
}
.compteur__unite strong { color: var(--vert-fonce); font-weight: 600; }

@media (prefers-reduced-motion: reduce) {
  .flap.is-flipping .flap__flip { animation: none !important; }
}

/* =========================================================================
   Page d'authentification (login / setup)
   ========================================================================= */
.page-auth { min-height: 100vh; display: flex; flex-direction: column; }
.page-auth .container { flex: 1 0 auto; display: flex; align-items: center; justify-content: center; width: 100%; }
.page-auth .carte-etroite {
  width: 100%;
  padding: 2rem 2rem 2.25rem;
  box-shadow: var(--ombre-lg);
  border-radius: var(--r-lg);
  margin: 1rem auto;
}
.page-auth .carte-etroite h1 { text-align: center; }
.page-auth .carte-etroite h1::after {
  content: "";
  display: block;
  width: 46px; height: 3px;
  margin: .7rem auto 0;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--moutarde), var(--jaune-gcc));
}
.page-auth .btn-primaire { width: 100%; justify-content: center; margin-top: .3rem; }
.page-auth .note { text-align: center; margin-top: 1.1rem; margin-bottom: 0; }

/* =========================================================================
   Responsive
   ========================================================================= */
@media (max-width: 640px) {
  .titre-action { align-items: stretch; }
  .titre-action .btn { width: 100%; justify-content: center; }
  .nav { gap: .15rem; }
  .nav a { padding: .34rem .6rem; font-size: .88rem; }
  .brand__app { display: none; }
  .compteur { padding: 1.6rem 1rem 1.25rem; }
  .flap { width: .68em; }
}

/* Grand écran (TV en salle) : compteurs bien lisibles de loin */
@media (min-width: 1200px) {
  .container--large .compteurs { grid-template-columns: repeat(3, 1fr); }
}

/* Légende courte sous un compteur (mode embed sans étiquette) */
.compteur__legende {
  margin-top: .15rem;
  color: var(--encre-2);
  font-size: .82rem;
  font-weight: 600;
  text-align: center;
  letter-spacing: .01em;
}

/* Lien discret « Affichage public » du tableau de bord */
.affichage-lien {
  margin: -1rem 0 2rem;
  text-align: right;
  font-size: .86rem;
}
.affichage-lien a { color: var(--encre-2); }
.affichage-lien a:hover { color: var(--gris); }

/* =========================================================================
   Affichage public plein écran (/affichage) — pensé pour un écran TV en salle
   ========================================================================= */
body.page-affichage {
  min-height: 100vh;
  margin: 0;
}
.affichage {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(1.5rem, 4vh, 3rem);
  padding: clamp(1.25rem, 4vw, 3rem);
  text-align: center;
}
.affichage__entete {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .55rem;
}
.affichage__logo {
  display: inline-flex;
  align-items: center;
  background: #fff;
  padding: .55rem 1rem;
  border-radius: 16px;
  box-shadow: var(--ombre-sm);
}
.affichage__logo img { display: block; height: clamp(38px, 6vh, 66px); width: auto; }
.affichage__surtitre {
  font-size: clamp(.95rem, 1.5vw, 1.35rem);
  font-weight: 600;
  color: var(--encre-2);
  letter-spacing: .02em;
}
.affichage__pied {
  color: var(--encre-3);
  font-size: clamp(.8rem, 1.2vw, 1rem);
  letter-spacing: .02em;
}

/* Les 3 compteurs, en grand, sur une rangée qui wrappe si l'écran est étroit */
.compteurs--affichage {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  gap: clamp(1.25rem, 3vw, 3rem);
  width: 100%;
  max-width: 2400px;
  margin: 0;
}
.compteurs--affichage .compteur {
  flex: 1 1 360px;
  max-width: 720px;
  padding: 2.25rem 1.5rem 1.75rem;
}
/* Volets bien grands pour un écran TV, mais toujours bornés à la largeur de la
   carte via cqi (repli viewport pour les navigateurs anciens). */
.compteurs--affichage .flapboard {
  font-size: clamp(40px, 6.2vw, 104px);
  font-size: clamp(30px, 11cqi, 120px);
}
.compteurs--affichage .compteur__etiquette {
  font-size: clamp(.9rem, 1.4vw, 1.18rem);
  max-width: 26rem;
}

/* =========================================================================
   Embed embarquable en iframe (/embed) — pas de header/footer, marges minimales
   ========================================================================= */
body.page-embed {
  margin: 0;
  min-height: 0;
  background: transparent;
  background-image: none;
}
body.page-embed.page-embed--transparent { background: transparent; }
body.page-embed.page-embed--blanc { background: var(--surface); }       /* blanc charte */
body.page-embed.page-embed--gris  { background: var(--page); }          /* gris clair charte */

/* Flex horizontal centré qui wrappe, sans le chrome « carte » du tableau de bord */
.compteurs--embed {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: clamp(1rem, 3vw, 2.25rem);
  margin: 0;
  padding: clamp(.5rem, 2vw, 1.1rem);
}
.compteurs--embed .compteur {
  background: none;
  border: none;
  border-radius: 0;
  box-shadow: none;
  padding: .4rem .5rem;
  gap: .6rem;
  /* Largeur déterminée par la rangée flex (et non par le contenu) : indispensable
     pour que la containment inline de la carte ait une taille de référence stable
     et que les volets (dimensionnés en cqi) tiennent toujours dans la carte. */
  flex: 1 1 240px;
  max-width: 460px;
}
.compteurs--embed .compteur::before { display: none; } /* pas de liseré */
.compteurs--embed .compteur__etiquette { margin-top: 0; max-width: 22rem; }