/* =====================================================================
   Back-office des prix · THÈME CSD Connect

   Charte reprise de la plateforme csd-connect.com (thème TYPO3 du site, octobre 2026) :
   bleu pétrole #064651, turquoise #35CAC0 / #28B0A6, gris teintés #F6F8F8 → #1F2223,
   police Raleway, boutons en pilule, cartes blanches arrondies.

   Ce fichier contient TOUTE la charte : couleurs, polices, tailles, rayons, ombres, espacements,
   en thème clair et en thème sombre. layout.css n'utilise que ces variables. Le logo est
   static/img/logo.svg (affiché automatiquement dans l'en-tête et sur la page de connexion).

   Police : Raleway (SIL Open Font License 1.1), hébergée dans static/fonts/ (pas de CDN),
   version variable 300 à 700, sous-ensembles latin et latin étendu.

   Thème sombre : suit le réglage du système, sauf choix explicite de l'utilisateur (bouton de l'en-tête,
   mémorisé dans le navigateur : attribut data-theme="light" ou "dark" sur <html>).
   Contrastes visés : texte ≥ 4,5:1 sur son fond, bordures et indicateurs ≥ 3:1 (WCAG 2.2 AA).
   ===================================================================== */

@font-face {
  font-family: "Raleway";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("../fonts/raleway-latin-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Raleway";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("../fonts/raleway-latin-ext-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Raleway";
  font-style: italic;
  font-weight: 300 700;
  font-display: swap;
  src: url("../fonts/raleway-latin-italique.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Raleway";
  font-style: italic;
  font-weight: 300 700;
  font-display: swap;
  src: url("../fonts/raleway-latin-ext-italique.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  color-scheme: light;

  /* --- Polices ------------------------------------------------------ */
  --police-texte: "Raleway", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --police-titres: var(--police-texte);
  --police-chiffres: var(--police-texte);          /* chiffres alignés (lining-nums, tabular-nums) dans layout.css */
  --police-code: ui-monospace, "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace;
  --taille-base: 1rem;                             /* 16 px, comme le site */
  --taille-petite: 0.875rem;
  --taille-mini: 0.8125rem;
  --taille-grille: 0.8125rem;                      /* cases de la grille tarifaire */
  --taille-h1: 1.75rem;
  --taille-h2: 1.3125rem;
  --taille-h3: 1.0625rem;
  --taille-tuile: 1.875rem;                        /* chiffre clé des tuiles du tableau de bord */
  --interligne: 1.5;
  --interligne-serre: 1.25;
  --graisse-normale: 400;
  --graisse-moyenne: 600;
  --graisse-forte: 700;

  /* --- Espacements --------------------------------------------------- */
  --espace-1: 0.25rem;
  --espace-2: 0.5rem;
  --espace-3: 0.75rem;
  --espace-4: 1rem;
  --espace-5: 1.5rem;
  --espace-6: 2rem;
  --espace-7: 3rem;
  --marge-page: 1rem;                              /* gouttière latérale sur téléphone */

  /* --- Dimensions ---------------------------------------------------- */
  --largeur-max: 90rem;
  --largeur-connexion: 26rem;
  --largeur-champ: 22rem;
  --hauteur-grille: 70vh;                          /* zone de défilement de la grille tarifaire */
  --largeur-colonne-arrivee: 11rem;
  --largeur-case: 3.6rem;
  --hauteur-histogramme: 9rem;
  --hauteur-barre-empilee: 1.25rem;
  --taille-cible: 2.75rem;                         /* cible tactile minimale (tablette) */
  --hauteur-logo: 2.125rem;

  /* --- Rayons, bordures, ombres --------------------------------------- */
  --rayon-petit: 4px;
  --rayon: 8px;                                    /* champs de saisie */
  --rayon-grand: 14px;                             /* cartes, comme les encarts du site */
  --rayon-bouton: 999px;                           /* boutons en pilule, comme le site */
  --rayon-pastille: 999px;
  --bordure: 1px;
  --bordure-forte: 2px;
  --epaisseur-focus: 3px;
  --decalage-focus: 2px;                           /* écart entre l'élément et son contour de focus */
  --epaisseur-repere: 3px;                         /* trait sous une case modifiée */
  --decalage-repere: -3px;                         /* contour intérieur des cases signalées */
  --espace-separateur: 2px;                        /* écart entre les barres et segments des graphiques */
  --ombre: 0 1px 2px rgb(16 24 40 / 0.06), 0 1px 3px rgb(16 24 40 / 0.1);
  --ombre-forte: 0 4px 12px rgb(16 24 40 / 0.12);
  --duree-transition: 120ms;
  --filtre-logo: none;

  /* --- Couleurs : surfaces et texte ----------------------------------- */
  --couleur-fond: #f6f8f8;
  --couleur-surface: #ffffff;
  --couleur-surface-2: #eaeff0;                   /* en-têtes de tableau, zones secondaires */
  --couleur-surface-3: #dce3e5;
  --couleur-texte: #1f2223;
  --couleur-texte-secondaire: #3a4042;
  --couleur-texte-discret: #5c6668;
  --couleur-bordure: #d1d9db;
  --couleur-bordure-forte: #7f8d90;
  --couleur-ligne-survol: #f0fbfa;

  /* --- Couleurs : marque et interaction -------------------------------- */
  --couleur-accent: #35cac0;                      /* boutons principaux (turquoise du site), repères actifs */
  --couleur-accent-survol: #28b0a6;
  --couleur-sur-accent: #053a43;                  /* texte sur le turquoise (bleu pétrole foncé) */
  --couleur-accent-doux: #e5fffd;
  --couleur-lien: #064651;                        /* bleu pétrole du site */
  --couleur-lien-survol: #0b6b78;
  --couleur-focus: #1465b4;
  --couleur-entete: #ffffff;                      /* bandeau du logo, blanc comme le site */
  --couleur-sur-entete: #064651;
  --couleur-sur-entete-discret: #5c6668;
  --couleur-entete-actif: #e5fffd;
  --couleur-menu: #064651;                        /* bandeau du menu */
  --couleur-sur-menu: #ffffff;
  --couleur-menu-actif: #0a5a66;
  --couleur-menu-souligne: #35cac0;

  /* --- Couleurs : messages et états ----------------------------------- */
  --couleur-succes: #045130;
  --couleur-succes-fond: #d6f3e9;
  --couleur-erreur: #bb251a;
  --couleur-erreur-fond: #fde1e1;
  --couleur-attention: #7f3004;
  --couleur-attention-fond: #fcf0db;
  --couleur-info: #0f4e8c;
  --couleur-info-fond: #dcedfc;
  --couleur-neutre: #3a4042;
  --couleur-neutre-fond: #eaeff0;
  --couleur-danger: #bb251a;                      /* boutons d'action irréversible */
  --couleur-danger-survol: #912018;
  --couleur-sur-danger: #ffffff;
  --couleur-pastille: #e30613;                    /* compteur « à valider » du menu */
  --couleur-sur-pastille: #ffffff;

  /* --- Couleurs : niveaux de confiance (palette d'état, toujours avec pictogramme et libellé) --- */
  --couleur-confiance-vert: #039855;
  --couleur-confiance-orange: #dc6803;
  --couleur-confiance-rouge: #e30613;

  /* --- Couleurs : graphiques -------------------------------------------- */
  --couleur-serie-1: #1a8c84;                     /* série unique (demandes par jour) */
  --couleur-grille-graphique: #dce3e5;

  /* --- Couleurs : grille tarifaire (doublées d'un motif : jamais la couleur seule) --- */
  --couleur-case-anomalie-fond: #fcf0db;
  --couleur-case-anomalie-bord: #dc6803;
  --couleur-case-erreur-fond: #fde1e1;
  --couleur-case-erreur-bord: #bb251a;
  --couleur-case-modifiee-fond: #dcedfc;
  --couleur-case-modifiee-bord: #1465b4;
  --couleur-case-ajoutee-fond: #d6f3e9;
  --couleur-case-vide-fond: #eaeff0;
  --couleur-case-selection: #1465b4;
}

/* Thème sombre : réglage du système (sauf choix « clair » explicite)… */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --ombre: 0 1px 2px rgb(0 0 0 / 0.4);
    --ombre-forte: 0 4px 12px rgb(0 0 0 / 0.5);
    --filtre-logo: brightness(0) invert(0.93);      /* logo en blanc cassé sur fond sombre */
    --couleur-fond: #0f1617;
    --couleur-surface: #172123;
    --couleur-surface-2: #1f2b2d;
    --couleur-surface-3: #283638;
    --couleur-texte: #eaeff0;
    --couleur-texte-secondaire: #c7d1d3;
    --couleur-texte-discret: #a1b1b4;
    --couleur-bordure: #2e3c3f;
    --couleur-bordure-forte: #7f8d90;
    --couleur-ligne-survol: #18292b;
    --couleur-accent: #35cac0;
    --couleur-accent-survol: #8ae5df;
    --couleur-sur-accent: #052b31;
    --couleur-accent-doux: #0d3439;
    --couleur-lien: #8ae5df;
    --couleur-lien-survol: #cafffb;
    --couleur-focus: #84caff;
    --couleur-entete: #0b1213;
    --couleur-sur-entete: #eaeff0;
    --couleur-sur-entete-discret: #a1b1b4;
    --couleur-entete-actif: #0d3439;
    --couleur-menu: #06343c;
    --couleur-sur-menu: #eaeff0;
    --couleur-menu-actif: #0a4a55;
    --couleur-menu-souligne: #35cac0;
    --couleur-succes: #42d38b;
    --couleur-succes-fond: #0c2d1e;
    --couleur-erreur: #fca5a5;
    --couleur-erreur-fond: #3b1512;
    --couleur-attention: #ffd481;
    --couleur-attention-fond: #3a2509;
    --couleur-info: #84caff;
    --couleur-info-fond: #0f2840;
    --couleur-neutre: #c7d1d3;
    --couleur-neutre-fond: #283638;
    --couleur-danger: #fca5a5;
    --couleur-danger-survol: #fde1e1;
    --couleur-sur-danger: #2b0b08;
    --couleur-pastille: #ff6b72;
    --couleur-sur-pastille: #2b0b08;
    --couleur-confiance-vert: #42d38b;
    --couleur-confiance-orange: #ffb44d;
    --couleur-confiance-rouge: #ff6b72;
    --couleur-serie-1: #35cac0;
    --couleur-grille-graphique: #283638;
    --couleur-case-anomalie-fond: #3d2a0c;
    --couleur-case-anomalie-bord: #ffb44d;
    --couleur-case-erreur-fond: #4a1a16;
    --couleur-case-erreur-bord: #fca5a5;
    --couleur-case-modifiee-fond: #102e4a;
    --couleur-case-modifiee-bord: #84caff;
    --couleur-case-ajoutee-fond: #0f3324;
    --couleur-case-vide-fond: #1f2b2d;
    --couleur-case-selection: #84caff;
  }
}

/* … ou choix explicite « sombre » de l'utilisateur. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --ombre: 0 1px 2px rgb(0 0 0 / 0.4);
  --ombre-forte: 0 4px 12px rgb(0 0 0 / 0.5);
  --filtre-logo: brightness(0) invert(0.93);
  --couleur-fond: #0f1617;
  --couleur-surface: #172123;
  --couleur-surface-2: #1f2b2d;
  --couleur-surface-3: #283638;
  --couleur-texte: #eaeff0;
  --couleur-texte-secondaire: #c7d1d3;
  --couleur-texte-discret: #a1b1b4;
  --couleur-bordure: #2e3c3f;
  --couleur-bordure-forte: #7f8d90;
  --couleur-ligne-survol: #18292b;
  --couleur-accent: #35cac0;
  --couleur-accent-survol: #8ae5df;
  --couleur-sur-accent: #052b31;
  --couleur-accent-doux: #0d3439;
  --couleur-lien: #8ae5df;
  --couleur-lien-survol: #cafffb;
  --couleur-focus: #84caff;
  --couleur-entete: #0b1213;
  --couleur-sur-entete: #eaeff0;
  --couleur-sur-entete-discret: #a1b1b4;
  --couleur-entete-actif: #0d3439;
  --couleur-menu: #06343c;
  --couleur-sur-menu: #eaeff0;
  --couleur-menu-actif: #0a4a55;
  --couleur-menu-souligne: #35cac0;
  --couleur-succes: #42d38b;
  --couleur-succes-fond: #0c2d1e;
  --couleur-erreur: #fca5a5;
  --couleur-erreur-fond: #3b1512;
  --couleur-attention: #ffd481;
  --couleur-attention-fond: #3a2509;
  --couleur-info: #84caff;
  --couleur-info-fond: #0f2840;
  --couleur-neutre: #c7d1d3;
  --couleur-neutre-fond: #283638;
  --couleur-danger: #fca5a5;
  --couleur-danger-survol: #fde1e1;
  --couleur-sur-danger: #2b0b08;
  --couleur-pastille: #ff6b72;
  --couleur-sur-pastille: #2b0b08;
  --couleur-confiance-vert: #42d38b;
  --couleur-confiance-orange: #ffb44d;
  --couleur-confiance-rouge: #ff6b72;
  --couleur-serie-1: #35cac0;
  --couleur-grille-graphique: #283638;
  --couleur-case-anomalie-fond: #3d2a0c;
  --couleur-case-anomalie-bord: #ffb44d;
  --couleur-case-erreur-fond: #4a1a16;
  --couleur-case-erreur-bord: #fca5a5;
  --couleur-case-modifiee-fond: #102e4a;
  --couleur-case-modifiee-bord: #84caff;
  --couleur-case-ajoutee-fond: #0f3324;
  --couleur-case-vide-fond: #1f2b2d;
  --couleur-case-selection: #84caff;
}