/* Charte AYSI « Jardin », avec le mode « Nuit dorée » (docs/charte-jardin.md).
   Toutes les couleurs passent par les variables ci-dessous ; le thème est porté
   par l'attribut data-theme de <html> (static/js/theme.js). */

@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/cormorant-garamond-500-latin.woff2") format("woff2");
}

@font-face {
  font-family: "Cormorant Garamond";
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/cormorant-garamond-500-italique-latin.woff2") format("woff2");
}

@font-face {
  font-family: "Jost";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("../fonts/jost-latin.woff2") format("woff2");
}

:root,
[data-theme="jardin"] {
  --font-titre: "Cormorant Garamond", Georgia, serif;
  --font-texte: "Jost", "Segoe UI", system-ui, sans-serif;

  --fond: #f4f1e8;
  --nav: #ffffff;
  --surface: #ffffff;
  --ligne: #eceadf;
  --champ-bord: #cbd5c3;
  --champ-fond: #ffffff;
  --texte: #1e2b22;
  --texte-2: #56635a;
  --marque: #1f5c3a;
  --slogan-accent: #1f7a4d;
  --primaire: #1f5c3a;
  --primaire-survol: #174a2e;
  --sur-primaire: #ffffff;
  --accent: #e9a47a;
  --sur-accent: #1e2b22;
  --doux: #dde6d5;
  --doux-texte: #1f5c3a;
  --chaud: #fbe3d2;
  --chaud-texte: #5b4130;
  --bandeau: #1f5c3a;
  --bandeau-bord: #1f5c3a;
  --bandeau-texte: #f4f1e8;
  --bandeau-texte-2: #d8e4d3;
  --bandeau-accent: #f2c9a9;
  --feuille: #2b6e48;
  --feuille-2: #c5d4bb;
  --feuille-3: #f2c9a9;
  --chiffre: #1e2b22;
  --chiffre-2: #1e2b22;
  --ok-fond: #e3f0e7;
  --ok-texte: #1f5c3a;
  --attente-fond: #fbe3d2;
  --attente-texte: #8a4a22;
  --retard-fond: #f8dcdd;
  --retard-texte: #9a2f3e;
  --neutre-fond: #eef1e8;
  --neutre-texte: #3f4d43;
  --pastille-theme: #1c1419;
  --pastille-theme-coupe: #d4af5a;

  --rayon-carte: 22px;
  --rayon-bandeau: 28px;
  --rayon-champ: 14px;
  --rayon-pilule: 999px;

  color-scheme: light;
}

[data-theme="nuit"] {
  --fond: #1c1419;
  --nav: #150f13;
  --surface: #2a1f26;
  --ligne: #3a2c34;
  --champ-bord: #4a3a44;
  --champ-fond: #1f161c;
  --texte: #f6eee8;
  --texte-2: #bfafb6;
  --marque: #d4af5a;
  --slogan-accent: #3faf7a;
  --primaire: #d4af5a;
  --primaire-survol: #e2c37a;
  --sur-primaire: #1c1419;
  --accent: #d4af5a;
  --sur-accent: #1c1419;
  --doux: #2e2229;
  --doux-texte: #d4af5a;
  --chaud: #3a2a30;
  --chaud-texte: #e8dcd6;
  --bandeau: #2a1f26;
  --bandeau-bord: #4a3a2a;
  --bandeau-texte: #f6eee8;
  --bandeau-texte-2: #bfafb6;
  --bandeau-accent: #e7c3b5;
  --feuille: #3a2c34;
  --feuille-2: #3a2c34;
  --feuille-3: #4a3a2a;
  --chiffre: #d4af5a;
  --chiffre-2: #e7c3b5;
  --ok-fond: #1f3a2b;
  --ok-texte: #9fd3b2;
  --attente-fond: #3d3220;
  --attente-texte: #e8cc86;
  --retard-fond: #4a2228;
  --retard-texte: #f2a9b0;
  --neutre-fond: #33282e;
  --neutre-texte: #d9ccd2;
  --pastille-theme: #dde6d5;
  --pastille-theme-coupe: #1f5c3a;

  color-scheme: dark;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--fond);
  color: var(--texte);
  font-family: var(--font-texte);
  font-size: 16px;
  line-height: 1.5;
  transition:
    background 0.3s,
    color 0.3s;
}

h1,
h2,
h3 {
  font-family: var(--font-titre);
  font-weight: 500;
  line-height: 1.1;
  margin: 0 0 0.75rem;
}

h1 {
  font-size: 44px;
}

h2 {
  font-size: 30px;
}

a {
  color: var(--primaire);
}

a:hover {
  color: var(--primaire-survol);
}

/* --- Barre de menu --- */

.entete {
  background: var(--nav);
  border-bottom: 1px solid var(--ligne);
}

.entete-contenu {
  max-width: 1200px;
  margin: 0 auto;
  padding: 16px 32px;
  display: flex;
  align-items: center;
  gap: 28px;
  flex-wrap: wrap;
}

.marque {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--marque);
  text-decoration: none;
}

.marque:hover {
  color: var(--marque);
}

.marque svg {
  width: 30px;
  height: 30px;
}

.marque-nom {
  font-family: var(--font-titre);
  font-weight: 500;
  font-size: 26px;
  letter-spacing: 3px;
}

.nav-principale {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  flex: 1 1 auto;
  font-size: 15px;
}

.nav-principale a {
  padding: 10px 16px;
  border-radius: var(--rayon-pilule);
  color: var(--texte-2);
  text-decoration: none;
}

.nav-principale a:hover {
  color: var(--texte);
}

.nav-principale a[aria-current="page"] {
  background: var(--doux);
  color: var(--doux-texte);
  font-weight: 500;
}

.outils {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.bouton-theme {
  min-height: 44px;
  padding: 0 16px;
  border-radius: var(--rayon-pilule);
  border: 1px solid var(--champ-bord);
  background: var(--surface);
  color: var(--texte);
  font: inherit;
  font-size: 14px;
  font-weight: 400;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

.bouton-theme:hover {
  background: var(--doux);
  color: var(--texte);
}

.pastille-theme {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--pastille-theme);
  box-shadow: inset -4px -2px 0 var(--pastille-theme-coupe);
}

.menu-compte {
  position: relative;
}

.menu-compte summary {
  list-style: none;
  cursor: pointer;
  border-radius: 50%;
}

.menu-compte summary::-webkit-details-marker {
  display: none;
}

.avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--chaud);
  color: var(--chaud-texte);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 14px;
  flex: none;
}

.avatar-petit {
  width: 36px;
  height: 36px;
  font-size: 13px;
}

.avatar-doux {
  background: var(--doux);
  color: var(--doux-texte);
}

.menu-compte-liste {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  z-index: 10;
  min-width: 240px;
  background: var(--surface);
  border: 1px solid var(--ligne);
  border-radius: 16px;
  padding: 8px;
  box-shadow: 0 12px 32px rgb(0 0 0 / 0.12);
  display: flex;
  flex-direction: column;
}

.menu-compte-liste .nom {
  padding: 8px 12px;
  color: var(--texte-2);
  font-size: 14px;
}

.menu-compte-liste a,
.menu-compte-liste button {
  display: block;
  width: 100%;
  text-align: left;
  padding: 10px 12px;
  border-radius: 10px;
  color: var(--texte);
  text-decoration: none;
  background: none;
  border: 0;
  font: inherit;
  font-size: 15px;
  font-weight: 400;
  min-height: 0;
  cursor: pointer;
}

.menu-compte-liste a:hover,
.menu-compte-liste button:hover {
  background: var(--doux);
  color: var(--texte);
}

.menu-compte-liste form {
  margin: 0;
}

/* --- Bande de navigation à gauche (demande de Touria, 18/10/2026) --- */

.mise-en-page {
  display: grid;
  grid-template-columns: 264px minmax(0, 1fr);
  min-height: 100vh;
}

.barre-laterale {
  position: sticky;
  top: 0;
  height: 100vh;
  background: var(--nav);
  border-right: 1px solid var(--ligne);
  padding: 28px 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 36px;
}

.barre-laterale .marque {
  padding: 0 10px;
}

.nav-laterale {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1 1 auto;
  font-size: 15px;
}

.nav-laterale a {
  padding: 12px 16px;
  border-radius: 12px;
  color: var(--texte-2);
  text-decoration: none;
  white-space: nowrap;
}

.nav-laterale a:hover {
  background: var(--doux);
  color: var(--texte);
}

.nav-laterale a[aria-current="page"] {
  background: var(--doux);
  color: var(--doux-texte);
  font-weight: 500;
  box-shadow: inset 3px 0 0 var(--primaire);
}

.barre-pied {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 4px 0;
  border-top: 1px solid var(--ligne);
}

.barre-pied .bouton-theme {
  padding: 0 14px;
  white-space: nowrap;
}

/* Le menu du compte s'ouvre vers le haut depuis le bas de la bande. */
.barre-laterale .menu-compte-liste {
  top: auto;
  bottom: calc(100% + 8px);
  right: auto;
  left: 0;
}

.mise-en-page .contenu {
  width: 100%;
}

@media (max-width: 900px) {
  .mise-en-page {
    display: block;
  }

  .barre-laterale {
    position: static;
    height: auto;
    border-right: 0;
    border-bottom: 1px solid var(--ligne);
    padding: 12px 16px;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
  }

  .barre-laterale .marque {
    padding: 0;
  }

  .nav-laterale {
    order: 3;
    flex-basis: 100%;
    flex-direction: row;
    overflow-x: auto;
  }

  .nav-laterale a[aria-current="page"] {
    box-shadow: inset 0 -3px 0 var(--primaire);
  }

  .barre-pied {
    margin-left: auto;
    padding: 0;
    border-top: 0;
  }

  .barre-laterale .menu-compte-liste {
    top: calc(100% + 8px);
    bottom: auto;
    left: auto;
    right: 0;
  }
}

/* --- Contenu --- */

.contenu {
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px 32px;
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.carte {
  background: var(--surface);
  border: 1px solid var(--ligne);
  border-radius: var(--rayon-carte);
  padding: 24px;
}

.titre-page h1 {
  margin-bottom: 0.25rem;
}

.sous-titre,
.discret {
  color: var(--texte-2);
}

.visuellement-cache {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* --- Bandeau d'accueil et chiffres clés --- */

.bandeau {
  position: relative;
  overflow: hidden;
  background: var(--bandeau);
  color: var(--bandeau-texte);
  border: 1px solid var(--bandeau-bord);
  border-radius: var(--rayon-bandeau);
  padding: 32px 36px;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 20px;
}

.bandeau::before {
  content: "";
  position: absolute;
  width: 220px;
  height: 220px;
  border-radius: 0 100% 0 100%;
  background: var(--feuille);
  right: 40px;
  top: -80px;
  transform: rotate(20deg);
}

.bandeau > * {
  position: relative;
}

.bandeau h1 {
  margin: 0;
  color: var(--bandeau-texte);
}

.bandeau h1 i {
  color: var(--bandeau-accent);
}

.bandeau p {
  margin: 8px 0 0;
  color: var(--bandeau-texte-2);
}

/* Double classe : doit l'emporter sur .bouton, défini plus bas. */
.bouton.bouton-accent,
.bouton.bouton-accent:hover {
  background: var(--accent);
  color: var(--sur-accent);
  font-weight: 600;
  min-height: 48px;
}

.bouton.bouton-accent:hover {
  filter: brightness(1.05);
}

.chiffres {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.chiffre {
  background: var(--surface);
  border: 1px solid var(--ligne);
  border-radius: var(--rayon-carte);
  padding: 22px;
}

.chiffre p {
  margin: 0;
}

.chiffre-libelle {
  font-size: 14px;
  color: var(--texte-2);
}

.chiffre .chiffre-valeur {
  margin-top: 6px;
  font-family: var(--font-titre);
  font-size: 44px;
  font-weight: 500;
  line-height: 1.1;
  color: var(--chiffre);
}

.chiffre-chaud {
  background: var(--chaud);
}

.chiffre-chaud .chiffre-libelle {
  color: var(--chaud-texte);
}

.chiffre-chaud .chiffre-valeur,
.chiffre-doux .chiffre-valeur {
  color: var(--chiffre-2);
}

.chiffre-doux {
  background: var(--doux);
}

@media (max-width: 960px) {
  .chiffres {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .chiffres {
    grid-template-columns: 1fr;
  }

  .entete-contenu,
  .contenu {
    padding-left: 16px;
    padding-right: 16px;
  }

  .bandeau {
    padding: 24px;
  }

  h1 {
    font-size: 36px;
  }
}

/* --- Formulaires (y compris les éléments générés par allauth) --- */

form p {
  margin: 0 0 1rem;
}

label {
  display: block;
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 6px;
}

input[type="email"],
input[type="password"],
input[type="text"],
input[type="number"],
input[type="search"],
input[type="date"],
input[type="month"],
input[type="tel"],
input[type="url"],
textarea,
select {
  width: 100%;
  min-height: 50px;
  padding: 0 16px;
  border: 1px solid var(--champ-bord);
  border-radius: 16px;
  background: var(--champ-fond);
  font: inherit;
  color: var(--texte);
}

textarea {
  padding: 12px 16px;
}

input:focus,
textarea:focus,
select:focus,
button:focus-visible,
a:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--primaire);
  vertical-align: middle;
}

input[type="checkbox"] + label {
  display: inline;
  font-weight: 400;
  margin-left: 0.4rem;
}

button,
.bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 24px;
  border: 0;
  border-radius: 16px;
  background: var(--primaire);
  color: var(--sur-primaire);
  font: inherit;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
}

button:hover,
.bouton:hover {
  background: var(--primaire-survol);
  color: var(--sur-primaire);
}

.bouton-secondaire {
  background: transparent;
  color: var(--texte);
  border: 1px solid var(--champ-bord);
}

.bouton-secondaire:hover {
  background: var(--doux);
  color: var(--texte);
}

.errorlist {
  list-style: none;
  margin: 0 0 1rem;
  padding: 0.75rem 1rem;
  border-radius: var(--rayon-champ);
  background: var(--retard-fond);
  color: var(--retard-texte);
}

.messages {
  list-style: none;
  margin: 0;
  padding: 0;
}

.messages li {
  padding: 0.75rem 1rem;
  border-radius: var(--rayon-champ);
  background: var(--ok-fond);
  color: var(--ok-texte);
  margin-bottom: 0.5rem;
}

.messages li.error,
.messages li.warning {
  background: var(--retard-fond);
  color: var(--retard-texte);
}

/* --- Mes clients --- */

.carte-clients {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.carte-clients-entete {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}

.carte-clients-entete h2 {
  margin: 0;
}

.filtres {
  display: flex;
  gap: 8px;
  font-size: 14px;
  flex-wrap: wrap;
  align-items: center;
  margin: 0;
}

.filtre {
  min-height: 36px;
  padding: 0 16px;
  border-radius: var(--rayon-pilule);
  border: 1px solid var(--champ-bord);
  background: transparent;
  color: var(--texte);
  font-size: 14px;
  font-weight: 400;
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

.filtre:hover {
  background: var(--doux);
  color: var(--texte);
}

.filtre[aria-current="true"] {
  background: var(--primaire);
  border-color: var(--primaire);
  color: var(--sur-primaire);
}

.filtres input[type="search"] {
  min-height: 40px;
  height: 40px;
  width: 240px;
  max-width: 100%;
  border-radius: var(--rayon-pilule);
}

.defilement-horizontal {
  overflow-x: auto;
}

.tableau {
  width: 100%;
  min-width: 760px;
  border-collapse: collapse;
  font-size: 15px;
}

.tableau th {
  text-align: left;
  font-size: 13px;
  font-weight: 500;
  color: var(--texte-2);
  padding: 10px 8px;
  white-space: nowrap;
}

.tableau td {
  padding: 14px 8px;
  border-top: 1px solid var(--ligne);
  vertical-align: middle;
}

.cellule-client {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--texte);
  text-decoration: none;
}

.cellule-client:hover {
  color: var(--primaire);
}

.cellule-client small {
  display: block;
  color: var(--texte-2);
  font-size: 13px;
}

.badge {
  display: inline-block;
  min-width: 2.2rem;
  text-align: center;
  padding: 2px 8px;
  border-radius: var(--rayon-pilule);
  background: var(--doux);
  color: var(--doux-texte);
  font-size: 13px;
  font-weight: 500;
}

.statut {
  display: inline-block;
  padding: 5px 12px;
  border-radius: var(--rayon-pilule);
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  background: var(--neutre-fond);
  color: var(--neutre-texte);
}

.statut-ok,
.statut-actif {
  background: var(--ok-fond);
  color: var(--ok-texte);
}

.statut-attente,
.statut-prospect {
  background: var(--attente-fond);
  color: var(--attente-texte);
}

.statut-retard {
  background: var(--retard-fond);
  color: var(--retard-texte);
}

.statut-neutre,
.statut-sorti {
  background: var(--neutre-fond);
  color: var(--neutre-texte);
}

.pagination {
  display: flex;
  gap: 16px;
  align-items: center;
  flex-wrap: wrap;
  color: var(--texte-2);
  font-size: 14px;
}

.vide {
  padding: 1.5rem 0;
  margin: 0;
  color: var(--texte-2);
}

/* --- Fiche client --- */

.grille-fiche {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 16px;
}

.contenu section.carte h2 {
  font-size: 26px;
}

.champs {
  display: grid;
  grid-template-columns: minmax(140px, auto) 1fr;
  gap: 8px 16px;
  margin: 0;
}

.champs dt {
  color: var(--texte-2);
}

.champs dd {
  margin: 0;
}

/* --- Pages d'entrée : connexion, mot de passe oublié, erreurs --- */

.entree {
  min-height: 100vh;
  display: flex;
  flex-wrap: wrap;
}

.entree-illustration {
  flex: 1 1 420px;
  position: relative;
  overflow: hidden;
  background: var(--doux);
  padding: 56px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 32px;
  min-height: 360px;
}

.forme {
  position: absolute;
  pointer-events: none;
}

.forme-1 {
  width: 300px;
  height: 300px;
  border-radius: 0 100% 0 100%;
  background: var(--feuille-2);
  right: -40px;
  top: 60px;
  transform: rotate(-12deg);
}

.forme-2 {
  width: 180px;
  height: 180px;
  border-radius: 100% 0 100% 0;
  background: var(--feuille-3);
  right: 160px;
  bottom: -40px;
  transform: rotate(18deg);
}

.forme-3 {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: var(--fond);
  left: -30px;
  bottom: 120px;
}

.entree-illustration > :not(.forme) {
  position: relative;
}

/* Logo mis en évidence sur la page de connexion (demande de Touria, 18/10/2026). */
.entree-illustration .marque {
  gap: 18px;
}

.entree-illustration .marque svg {
  width: clamp(56px, 6vw, 84px);
  height: clamp(56px, 6vw, 84px);
}

.entree-illustration .marque-nom {
  font-size: clamp(44px, 4.6vw, 64px);
  letter-spacing: 8px;
}

.slogan p {
  max-width: 440px;
}

.slogan h1 {
  font-size: clamp(28px, 3.5vw, 52px);
  line-height: 1.05;
  margin: 0;
  /* Slogan sur une seule ligne, demande de Touria (18/10/2026). */
  white-space: nowrap;
}

.slogan h1 i {
  color: var(--marque);
}

.slogan h1 .accent {
  color: var(--slogan-accent);
}

.slogan p {
  margin: 20px 0 0;
  font-size: 17px;
  line-height: 1.6;
  color: var(--texte-2);
}

.entree-formulaire {
  flex: 1 1 420px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 24px;
  padding: 48px 24px;
}

.entree-formulaire {
  position: relative;
}

.entree-formulaire > .bouton-theme {
  position: absolute;
  top: 24px;
  right: 24px;
}

@media (max-width: 860px) {
  .entree-formulaire > .bouton-theme {
    position: static;
    align-self: flex-end;
  }
}

.entree-carte {
  width: 100%;
  max-width: 400px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.entree-carte h1 {
  font-size: 40px;
  margin-bottom: 4px;
}

.entree-carte button[type="submit"] {
  width: 100%;
  min-height: 54px;
  border-radius: 18px;
  font-size: 16px;
  margin-top: 8px;
}

.securise {
  margin: 8px 0 0;
  font-size: 13px;
  color: var(--texte-2);
  display: flex;
  align-items: center;
  gap: 8px;
}

.securise::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--accent);
}

.lien-secondaire {
  margin-top: 1rem;
  font-size: 15px;
}

@media (max-width: 560px) {
  .entree-illustration {
    padding: 32px 24px;
    min-height: 280px;
  }

  .slogan h1 {
    font-size: clamp(24px, 8vw, 40px);
  }
}

/* --- Pages de gestion du compte (allauth : MFA, mot de passe) --- */

.page-gestion .contenu {
  max-width: 760px;
  margin-top: 40px;
  margin-bottom: 40px;
  background: var(--surface);
  border: 1px solid var(--ligne);
  border-radius: var(--rayon-carte);
  padding: 32px 36px;
  gap: 12px;
}

.page-gestion .contenu h2 {
  font-size: 26px;
  margin-top: 16px;
}

.page-gestion .contenu ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.page-gestion .contenu ul a {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 18px;
  border-radius: var(--rayon-pilule);
  background: var(--primaire);
  color: var(--sur-primaire);
  text-decoration: none;
  font-weight: 500;
}

.page-gestion .contenu ul a:hover {
  background: var(--primaire-survol);
  color: var(--sur-primaire);
}

.page-gestion img {
  max-width: 220px;
  border-radius: 12px;
  background: #ffffff;
  padding: 8px;
}

/* --- Formulaires de fiche (création, modification) --- */

.grille-champs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px 24px;
}

.champ small {
  display: block;
  margin-top: 4px;
}

.champ .errorlist {
  margin: 6px 0 0;
  padding: 6px 12px;
}

.champ-case {
  align-self: center;
}

.champ-large {
  grid-column: 1 / -1;
}

.actions-formulaire,
.actions-fiche {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 24px;
}

.actions-fiche {
  margin-top: 12px;
}

.form-ligne {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
  margin: 0;
}

.form-ligne select {
  min-width: 0;
  min-height: 44px;
}

.champs dd {
  min-width: 0;
}

/* --- Planning du mois --- */

.filtres input[type="month"],
.filtres select {
  width: auto;
  min-height: 40px;
  font-size: 14px;
}

.frise {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 14px;
}

.frise li {
  padding: 6px 14px;
  border-radius: var(--rayon-pilule);
  background: var(--doux);
}

.frise li[aria-current="true"] {
  background: var(--primaire);
  color: var(--sur-primaire);
}

.tableau-planning td {
  white-space: nowrap;
}

/* --- Saisie rapide --- */

.tableau-saisie td {
  padding-top: 6px;
  padding-bottom: 6px;
}

.tableau-saisie .saisie {
  min-height: 36px;
  width: auto;
  min-width: 0;
  padding: 0 8px;
  border-radius: 10px;
  font-size: 14px;
}

.tableau-saisie input[type="number"].saisie {
  width: 72px;
}

.cellule-enregistree .saisie {
  border-color: var(--ok-texte);
  background: var(--ok-fond);
}

.cellule-erreur .saisie {
  border-color: var(--retard-texte);
}

.erreur-saisie {
  display: block;
  color: var(--retard-texte);
  font-size: 12px;
  white-space: normal;
  max-width: 180px;
}

/* --- Prestations annexes --- */

.actions-ligne {
  display: flex;
  gap: 12px;
  align-items: center;
}

.actions-ligne form {
  margin: 0;
}

.lien-bouton {
  min-height: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--retard-texte);
  font: inherit;
  text-decoration: underline;
  cursor: pointer;
}

.lien-bouton:hover {
  background: none;
  color: var(--retard-texte);
}

/* --- Tableau de bord (J2, T07a) --- */

.tdb-entete {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.tdb-entete h1 {
  margin: 0;
}

.tdb-entete p {
  margin: 4px 0 0;
}

.onglets {
  display: flex;
  gap: 6px;
  padding: 4px;
  border: 1px solid var(--ligne);
  border-radius: var(--rayon-pilule);
  background: var(--surface);
}

.onglets a {
  padding: 8px 18px;
  border-radius: var(--rayon-pilule);
  color: var(--texte-2);
  text-decoration: none;
  font-size: 15px;
}

.onglets a[aria-selected="true"] {
  background: var(--primaire);
  color: var(--sur-primaire);
  font-weight: 500;
}

.etapes {
  list-style: none;
  margin: 16px 0 20px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 12px;
}

.etape {
  border: 1px solid var(--ligne);
  border-radius: 16px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}

.etape-finale {
  background: var(--doux);
  color: var(--doux-texte);
}

.etape-numero {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid var(--champ-bord);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
}

.etape-libelle {
  font-size: 14px;
  color: var(--texte-2);
}

.etape-finale .etape-libelle {
  color: var(--doux-texte);
}

.etape-nombre {
  font-family: var(--font-titre);
  font-size: 36px;
  font-weight: 500;
  line-height: 1;
  color: var(--chiffre);
  /* Chiffres alignés : le « 1 » ancien style de Cormorant ressemble à un « I ». */
  font-variant-numeric: lining-nums tabular-nums;
}

.repartition {
  display: flex;
  height: 12px;
  border-radius: var(--rayon-pilule);
  overflow: hidden;
  background: var(--ligne);
}

.repartition span {
  flex-basis: 0;
}

.repartition-1 { background: var(--retard-texte); }
.repartition-2 { background: var(--attente-texte); }
.repartition-3 { background: var(--neutre-texte); }
.repartition-4 { background: var(--accent); }
.repartition-5 { background: var(--slogan-accent); }

.tdb-colonnes {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}

.tdb-colonnes-seule {
  grid-template-columns: minmax(0, 1fr);
}

.equipe {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.equipe li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 4px 12px;
  align-items: center;
}

.equipe-nom small {
  display: block;
  color: var(--texte-2);
  font-size: 13px;
}

.progression {
  grid-column: 2;
  height: 6px;
  border-radius: var(--rayon-pilule);
  background: var(--ligne);
  overflow: hidden;
}

.progression span {
  display: block;
  height: 100%;
  background: var(--primaire);
}

.texte-retard {
  color: var(--retard-texte);
}

@media (max-width: 960px) {
  .tdb-colonnes {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 560px) {
  .etapes {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .etape-finale {
    grid-column: 1 / -1;
  }
}

/* --- Accueil : bandeau à trois tuiles et partie « Aujourd'hui » (J2, T07b) --- */

.bandeau {
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 24px;
}

.tuiles-bandeau {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
}

.tuile-bandeau {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px 18px;
  border-radius: 16px;
  background: var(--feuille);
  color: var(--bandeau-texte);
  text-decoration: none;
}

.tuile-bandeau:hover {
  background: var(--feuille-2);
  color: var(--bandeau-texte);
}

.tuile-libelle {
  font-size: 12px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--bandeau-texte-2);
}

.tuile-chiffre {
  font-family: var(--font-titre);
  font-size: 26px;
  font-weight: 500;
  line-height: 1.1;
  font-variant-numeric: lining-nums;
}

.tuile-texte {
  font-size: 14px;
  color: var(--bandeau-texte-2);
}

.partie {
  display: flex;
  flex-direction: column;
  gap: 20px;
  scroll-margin-top: 24px;
}

.partie-entete {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--champ-bord);
}

.partie-entete h2 {
  margin: 0;
  font-size: 36px;
}

.colonne-gauche,
.colonne-droite {
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-width: 0;
}

.decisions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 12px;
  margin-top: 12px;
}

.decision {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: 16px;
  border-radius: 16px;
  background: var(--neutre-fond);
}

.decision-retard {
  background: var(--retard-fond);
}

.decision-chaud {
  background: var(--chaud);
}

.decision-doux {
  background: var(--doux);
}

.decision-libelle {
  font-size: 14px;
}

.decision-nombre {
  font-family: var(--font-titre);
  font-size: 36px;
  font-weight: 500;
  line-height: 1;
  font-variant-numeric: lining-nums;
}

.decision-detail {
  font-size: 13px;
  color: var(--texte-2);
  margin-bottom: 6px;
}

.fil,
.notes,
.echeances,
.liste-du-jour {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.fil li {
  display: flex;
  gap: 12px;
  align-items: center;
}

.fil small,
.notes small,
.echeances small,
.action-texte small {
  display: block;
  color: var(--texte-2);
  font-size: 13px;
}

.echeances li {
  display: flex;
  gap: 12px;
  align-items: center;
}

.pastille-echeance {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex: none;
}

.pastille-ok {
  background: var(--primaire);
}

.pastille-attente {
  background: var(--accent);
}

.pastille-retard {
  background: var(--retard-texte);
}

.calendrier {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  margin-top: 8px;
  text-align: center;
  font-size: 14px;
}

.calendrier th {
  padding: 4px 0;
  font-weight: 400;
  color: var(--texte-2);
}

.calendrier td {
  padding: 6px 0;
  height: 44px;
  vertical-align: top;
}

.calendrier td > span:first-child {
  display: inline-flex;
  width: 28px;
  height: 28px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}

.calendrier td.passe,
.calendrier td.hors-mois {
  color: var(--texte-2);
}

.calendrier td.hors-mois {
  opacity: 0.45;
}

.calendrier td.aujourdhui > span:first-child {
  background: var(--primaire);
  color: var(--sur-primaire);
}

.calendrier .pastille-echeance {
  display: block;
  margin: 2px auto 0;
}

.liste-entete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.liste-entete h3 {
  margin: 0;
}

.groupe-titre {
  margin: 20px 0 0;
  font-size: 13px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--texte-2);
  font-family: var(--font-texte);
  font-weight: 500;
}

.action {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  gap: 12px;
  align-items: center;
}

.action-case {
  margin: 0;
  display: flex;
}

.action-case input {
  width: 22px;
  height: 22px;
  accent-color: var(--primaire);
}

.action-texte {
  margin: 0;
  font-size: 15px;
  cursor: pointer;
}

.action-faite .action-texte {
  opacity: 0.55;
  text-decoration: line-through;
}

@media (max-width: 560px) {
  .action {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .action .statut,
  .action .bouton {
    grid-column: 2;
    justify-self: start;
  }

  .partie-entete h2 {
    font-size: 30px;
  }
}

/* --- Tendances : histogrammes (J2, T07c) --- */

.tdb-chiffres {
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.histogramme {
  display: grid;
  grid-template-columns: repeat(12, minmax(34px, 1fr));
  gap: 8px;
  align-items: end;
  height: 240px;
  margin: 16px 0;
  overflow-x: auto;
}

.histo-colonne {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  gap: 4px;
  height: 100%;
  min-width: 34px;
}

.histo-valeur {
  font-size: 12px;
  color: var(--texte-2);
  font-variant-numeric: lining-nums tabular-nums;
}

.histo-barre {
  display: block;
  width: 100%;
  min-height: 2px;
  border-radius: 8px 8px 0 0;
  background: var(--doux-texte);
  opacity: 0.55;
}

.histo-precedent .histo-barre {
  background: var(--primaire);
  opacity: 1;
}

.histo-prevision .histo-barre {
  background: transparent;
  border: 2px dashed var(--primaire);
  border-bottom: 0;
  opacity: 1;
}

.histo-mois {
  font-size: 12px;
  color: var(--texte-2);
  text-transform: capitalize;
}