@font-face {
  font-family: "roboto_condensed";
  src:
    url("../fonts/RobotoCondensed-Light.woff2") format("woff2"),
    url("../fonts/RobotoCondensed-Light.woff") format("woff");
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "roboto_condensed";
  src:
    url("../fonts/RobotoCondensed-Regular.woff2") format("woff2"),
    url("../fonts/RobotoCondensed-Regular.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "roboto_condensed";
  src:
    url("../fonts/RobotoCondensed-Bold.woff2") format("woff2"),
    url("../fonts/RobotoCondensed-Bold.woff") format("woff");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ==========================================================================
     COULEURS — Nomenclature couleur-1, couleur-2… (1 = plus clair, N = plus foncé)
     ========================================================================== */

  /* Blanc */
  --blanc-1: rgb(255, 255, 255);
  --blanc-2: rgb(255, 255, 255, 0.7);
  --blanc-3: rgb(255, 255, 255, 0.4);

  /* Gris / neutres */
  --gris-1: rgb(249, 249, 249);
  --gris-2: rgb(237, 237, 237);
  --gris-3: rgb(226, 226, 226);
  --gris-4: rgb(199, 199, 200);
  --gris-5: rgb(155, 155, 155);
  --gris-6: rgb(112, 112, 112);
  --gris-7: rgb(41, 50, 60);

  /* Noir */
  --noir-1: rgba(42, 44, 45, 1);
  --noir-2: rgba(0, 0, 0, 0.8);
  --noir-3: rgba(0, 0, 0, 0.4);
  --black: rgb(0, 0, 0);

  /* Environnement (dev / staging / prod) */
  --env-1: var(--gris-6);
  --env-2: var(--bleu-3);
  --env-3: var(--blanc-1);

  /* Vert */
  --vert-1: rgb(246, 248, 240);
  --vert-2: rgb(237, 244, 213);
  --vert-3: rgb(218, 232, 167);
  --vert-4: rgb(168, 200, 45);
  --vert-5: rgb(110, 145, 16);
  --vert-6: rgba(65, 117, 5, 1);
  --vert-7: rgba(65, 117, 5, 0.28);
  --vert-8: rgba(168, 200, 45, 0.42);

  /* Primary / secondary / fond */
  --primary-1: rgb(246, 253, 217);
  --primary-2: var(--vert-5);
  --secondary-1: var(--vert-4);
  --fond-1: rgb(110, 146, 61);

  /* Stats / sémantique (ok, warning, danger) */
  --stats-1: #a7c72d;
  --stats-2: var(--vert-5);
  --stats-3: #f66c15;
  --stats-4: #a7260f;

  /* Rouge / erreur */
  --rouge-1: rgb(254, 242, 238);
  --rouge-2: rgb(251, 191, 170);
  --rouge-3: rgb(226, 27, 27);
  --rouge-4: #ff554d;

  /* Orange / warning */
  --orange-1: rgb(250, 236, 209);
  --orange-2: rgb(252, 218, 154);
  --orange-3: rgb(247, 165, 9);
  --orange-4: rgb(255, 146, 33);

  /* Jaune */
  --jaune-1: rgb(249, 241, 181);
  --jaune-2: rgb(251, 225, 28);
  --jaune-3: rgb(247, 182, 5);

  /* Bleu / indigo / violet */
  --bleu-1: rgb(209, 242, 208);
  --bleu-2: rgb(102, 234, 191);
  --bleu-3: rgb(145, 164, 218);
  --violet-1: rgb(180, 149, 215);

  --indigo-1: rgb(242, 245, 250);
  --indigo-2: rgb(211, 213, 240);
  --indigo-3: rgb(148, 154, 229);
  --indigo-4: rgb(118, 123, 183);

  /* REV */
  --rev-1: rgb(245, 110, 61);
  --rev-2: var(--orange-3);
  --rev-3: rgb(255, 216, 154);
  --rev-4: rgb(219, 56, 85);
  --rev-5: rgb(199, 172, 204);

  /* États (études, prévisionnel) */
  --previsionnel: var(--indigo-4);
  --etat-1: var(--gris-5);
  --etat-2: var(--primary-2);
  --etat-3: var(--orange-4);
  --etat-4: var(--gris-5);
  --etat-5: var(--danger);

  /* Mois (calendrier) */
  --mois-1: rgba(175, 237, 242, 1);
  --mois-2: rgba(172, 235, 218, 1);
  --mois-3: rgba(209, 230, 129, 1);
  --mois-4: rgba(235, 230, 100, 1);
  --mois-5: rgba(245, 181, 61, 1);
  --mois-6: rgba(254, 157, 160, 1);
  --mois-7: rgba(245, 141, 145, 1);
  --mois-8: rgba(244, 86, 91, 1);
  --mois-9: rgba(167, 199, 45, 1);
  --mois-10: var(--orange-3);
  --mois-11: rgba(196, 129, 23, 1);
  --mois-12: rgba(173, 220, 245, 1);

  /* Congés */
  --conge-1: rgba(243, 163, 82, 0.5);
  --conge-2: rgba(247, 219, 24, 0.5);

  /* ==========================================================================
     COULEURS BOOTSTRAP (origine)
     ========================================================================== */
  --indigo: #6610f2;
  --pink: #e83e8c;
  --red: #dc3545;
  --orange: #fd7e14;
  --yellow: #ffc107;
  --green: #28a745;
  --teal: #20c997;
  --cyan: #17a2b8;
  --white: #fff;
  --gray: #6c757d;
  --gray-dark: #343a40;
  --primary: #007bff;
  --secondary: var(--gray);
  --success: var(--green);
  --info: var(--cyan);
  --warning: var(--orange-3);
  --danger: var(--red);
  --light: #f8f9fa;
  --dark: var(--gray-dark);

  /* ==========================================================================
     DÉGRADÉS — Nomenclature degrade-{famille}-{variant}
     ========================================================================== */

  /* Principal (vert) */
  --degrade-principal-1: linear-gradient(
    90deg,
    rgba(123, 146, 10, 1) 0%,
    rgba(173, 209, 0, 1) 100%
  );

  /* Été (rouge → jaune) */
  --degrade-ete-1: linear-gradient(
    90deg,
    rgba(255, 78, 80, 1) 0%,
    rgba(249, 212, 35, 1) 100%
  );
  --degrade-ete-2: linear-gradient(
    0deg,
    rgba(255, 78, 80, 1) 0%,
    rgba(249, 212, 35, 1) 100%
  );

  /* Violet (bleu → violet) */
  --degrade-violet-1: linear-gradient(
    90deg,
    rgba(145, 164, 218, 1) 0%,
    rgba(180, 149, 215, 1) 100%
  );

   --degrade-violet-2: linear-gradient(
    90deg,
    rgba(180, 149, 215, 1) 0%,
    rgba(145, 164, 218, 1) 100%
  );

  /* Bleu (cyan → bleu) */
  --degrade-bleu-1: linear-gradient(
    90deg,
    rgba(147, 206, 214, 1) 0%,
    rgba(140, 166, 219, 1) 100%
  );
  --degrade_rose_1: linear-gradient(
    to top,
    rgba(245, 152, 156, 1) 0%,
    rgba(246, 206, 195, 1) 100%
  );
  --degrade_rose_2: linear-gradient(
    180deg,
    rgba(250, 205, 194, 1) 0%,
    rgba(255, 154, 158, 1) 100%
  );

  /* ==========================================================================
     ARRONDIS — Nomenclature arrondi-{contexte?}-{n}
     (1 = plus petit, N = plus grand ; contexte = bouton, modale, form-field)
     ========================================================================== */

  /* Général */
  --arrondi-1: 5px;
  --arrondi-2: 10px;
  --arrondi-3: 15px;
  --arrondi-4: 20px;
  --arrondi-5: 50px;

  /* Bouton */
  --arrondi-bouton-10: 5px;
  --arrondi-bouton-15: 12px;
  --arrondi-bouton-20: 25px;
  --arrondi-bouton-30: 50%;

  /* Modale */
  --arrondi-modale-1: 30px;
  --arrondi-round: 50%;

  /* Champ de formulaire */
  --arrondi-form-field-1: 0.28571429rem;

  /* ==========================================================================
     LAYOUT
     ========================================================================== */
  --contenu-listing-left: 3vw;
  --contenu-listing-right: 3vw;

  --mobile-container-margin-correction: -0.5rem;

  /* ==========================================================================
     TRANSITIONS — Nomenclature transition-{n} et transition-{contexte}-{n}
     (1 = plus court, N = plus long ; contexte = form-field)
     ========================================================================== */

  /* Durées */
  --transition-1-duration: 0.1s;
  --transition-2-duration: 0.3s;
  --transition-3-duration: 0.8s;

  /* Timing (partagé) */
  --transition-timing: ease;

  /* Transitions prêtes à l’emploi (duration + timing + all) */
  --transition-1: var(--transition-1-duration) var(--transition-timing) all;
  --transition-2: var(--transition-2-duration) var(--transition-timing) all;
  --transition-3: var(--transition-3-duration) var(--transition-timing) all;

  /* Contexte formulaire */
  --transition-form-field-1: color 0.1s ease, border-color 0.1s ease;

  /* ==========================================================================
     OMBRAGES — Nomenclature box-shadow-{n} et box-shadow-{contexte}-{n}
     (1 = plus léger, N = plus marqué ; contexte = over, select…)
     ========================================================================== */

  /* Ombrages généraux */
  --box-shadow-1: 0px 3px 6px 0px rgba(0, 0, 0, 0.16); /* diffus léger */
  --box-shadow-2: 0px 3px 6px 0px rgba(0, 0, 0, 0.4); /* basic */
  --box-shadow-3: 6px 6px 8px 0px rgba(0, 0, 0, 0.3); /* over */

  /* Ombrages contextuels */
  --box-shadow-select-1: 0px 3px 6px 0px rgba(0, 0, 0, 0.06) inset;

  /* ==========================================================================
     TYPOGRAPHIE / FONTS — Nomenclature font-size-{n} et font-size-{contexte}-{n}
     (1 = plus petit, N = plus grand ; contexte = title, button, input)
     ========================================================================== */
  --font-contenu: "roboto_condensed", sans-serif;
  --font-title: "roboto_condensed", sans-serif;

  /* Tailles de texte générales */
  --font-size-1: 0.65rem;
  --font-size-2: 0.75rem;
  --font-size-3: 0.9rem;
  --font-size-4: 1rem;
  --font-size-5: 1.1rem;
  --font-size-6: 1.3rem;
  --font-size-7: 1.7rem;
  --font-size-8: 1.9rem;

  /* Titres (0 = plus grand niveau) */
  --font-size-title-0: 4rem;
  --font-size-title-1: 3.5rem;
  --font-size-title-2: 3.1rem;
  --font-size-title-3: 2.9rem;
  --font-size-title-4: 2.3rem;
  --font-size-title-5: 1.7rem;
  --font-size-title-6: 1.3rem;

  /* Boutons */
  --font-size-button-1: 0.8rem; /* micro */
  --font-size-button-2: 0.9rem; /* small */
  --font-size-button-3: 1rem;   /* medium */
  --font-size-button-4: 1.3rem; /* big */

  /* Champs de formulaire */
  --font-size-input-1: 0.85rem;
  --font-size-input-2: 0.9rem;
  --font-size-input-3: 1rem;
  --font-size-input-4: 1.3rem;
  /* Paddings champs (n = 1..4, 1 = plus petit) */
  --padding-input-1: 0.2em 0.25em;
  --padding-input-2: 0.25em 0.5em;
  --padding-input-3: 0.67857143em 1em;
  --padding-input-4: 0.6em 0.7em;

  /* ==========================================================================
     PICTOS — Nomenclature picto-height-{n}
     (1 = plus petit, N = plus grand)
     ========================================================================== */
  --picto-height-1: 13px;
  --picto-height-2: 17px;
  --picto-height-3: 22px;

  /* ========================================================================
     ALIAS (A MIGRER - TODO) — À nettoyer une fois la migration faite
     ======================================================================== */

  /* Couleurs FWF / états / mois / congés */
  /* Environnement */
  --fwf_color_env_dev: var(--gris-6);
  --fwf_color_env_staging: var(--bleu-3);
  --fwf_color_env_prod: var(--blanc-1);

  /* Couleurs principales */
  --fwf_primary_color_light: var(--primary-1);
  --fwf_primary_color: var(--vert-5);
  --fwf_secondary_color: var(--vert-4);
  --fwf_fond_color: var(--fond-1);

  /* Blanc / gris / noir */
  --fwf_blanc: var(--blanc-1);
  --fwf_blanc_translucide: var(--blanc-2);
  --fwf_blanc_translucide_2: var(--blanc-3);
  --fwf_gris_clair: var(--gris-1);
  --fwf_gris_moyen: var(--gris-2);
  --fwf_gris_leger: var(--gris-3);
  --fwf_gris_medium: var(--gris-4);
  --fwf_gris: var(--gris-5);
  --fwf_gris_fonce: var(--gris-6);
  --fwf_anthracite: var(--gris-7);
  --fwf_noir: var(--noir-1);
  --fwf_noir_translucide: var(--noir-2);
  --fwf_noir_translucide_2: var(--noir-3);

  /* Vert */
  --fwf_vert_tres_tres_clair: var(--vert-1);
  --fwf_vert_tres_clair: var(--vert-2);
  --fwf_vert_clair: var(--vert-3);
  --fwf_vert: var(--vert-4);
  --fwf_vert_fonce: var(--vert-5);
  --fwf_vert_tres_fonce: var(--vert-6);
  --fwf_vert_tres_fonce_translucide: var(--vert-7);
  --fwf_vert_translucide: var(--vert-8);

  /* Jaune / orange */
  --fwf_jaune_clair: var(--jaune-1);
  --fwf_jaune: var(--jaune-2);
  --fwf_jaune_orange: var(--jaune-3);

  --fwf_orange_warning_tres_clair: var(--orange-1);
  --fwf_orange_warning_clair: var(--orange-2);
  --fwf_orange_warning: var(--orange-3);
  --fwf_orange: var(--orange-4);

  /* Stats */
  --fwf_stats_ok: var(--stats-1);
  --fwf_stats_ok_alternative: var(--stats-2);
  --fwf_stats_warning: var(--stats-3);
  --fwf_stats_danger: var(--stats-4);

  /* Rouge */
  --fwf_rouge_clair: var(--rouge-1);
  --fwf_rouge: var(--rouge-2);
  --fwf_rouge_fonce: var(--rouge-3);
  --fwf_magenta: var(--rouge-4);

  /* Bleu / violet / indigo */
  --fwf_bleu_clair: var(--bleu-1);
  --fwf_bleu: var(--bleu-2);
  --blue: var(--bleu-3);
  --purple: var(--violet-1);

  --fwf_indigo_tres_clair: var(--indigo-1);
  --fwf_indigo_clair: var(--indigo-2);
  --fwf_indigo: var(--indigo-3);
  --fwf_indigo_fonce: var(--indigo-4);

  /* REV (anciens noms) */
  --rev_rouge: var(--rev-1);
  --rev_orange: var(--rev-2);
  --rev_jaune: var(--rev-3);
  --rev_magenta: var(--rev-4);
  --rev_mauve: var(--rev-5);

  /* États (anciens noms) */
  --etat-termine: var(--gris-5);
  --etat-en-cours: var(--primary-2);
  --etat-a-venir: var(--orange-4);
  --etat-stand-by: var(--gris-5);
  --etat-stopped: var(--danger);

  /* Mois (anciens noms mois_*) */
  --mois_1: var(--mois-1);
  --mois_2: var(--mois-2);
  --mois_3: var(--mois-3);
  --mois_4: var(--mois-4);
  --mois_5: var(--mois-5);
  --mois_6: var(--mois-6);
  --mois_7: var(--mois-7);
  --mois_8: var(--mois-8);
  --mois_9: var(--mois-9);
  --mois_10: var(--mois-10);
  --mois_11: var(--mois-11);
  --mois_12: var(--mois-12);

  /* Congés (anciens noms) */
  --conge-fullday: var(--conge-1);
  --conge-halfday: var(--conge-2);

  /* Alias dégradés */
  --degrade_normal: var(--degrade-principal-1);
  --degrade_ete: var(--degrade-ete-1);
  --degrade_ete_vertical: var(--degrade-ete-2);
  --degrade_violet: var(--degrade-violet-1);
  --degrade_violet_2: var(--degrade-violet-2);
  --degrade_bleu: var(--degrade-bleu-1);

  /* Alias arrondis */
  --arrondi-small: var(--arrondi-1);
  --arrondi-medium: var(--arrondi-2);
  --arrondi-large: var(--arrondi-3);
  --arrondi-extra-large: var(--arrondi-4);
  --arrondi-xxl: var(--arrondi-5);
  --arrondi-bouton-small: var(--arrondi-bouton-10);
  --arrondi-bouton-medium: var(--arrondi-bouton-20);
  --arrondi-bouton-large: var(--arrondi-bouton-30);
  --arrondi-modale: var(--arrondi-modale-1);
  --arrondi-form-field: var(--arrondi-form-field-1);

  /* Alias transitions */
  --transition-quick-duration: var(--transition-1-duration);
  --transition-basic-duration: var(--transition-2-duration);
  --transition-medium-duration: var(--transition-3-duration);
  --transition-basic-timing-function: var(--transition-timing);
  --transition-quick: var(--transition-1);
  --transition-basic: var(--transition-2);
  --transition-medium: var(--transition-3);
  --transition-form-field: var(--transition-form-field-1);

  /* Alias tailles texte */
  --font-size-xxs: var(--font-size-1);
  --font-size-xs: var(--font-size-2);
  --font-size-s: var(--font-size-3);
  --font-size-regular: var(--font-size-4);
  --font-size-l: var(--font-size-5);
  --font-size-xl: var(--font-size-6);
  --font-size-xxl: var(--font-size-7);
  --font-size-xxxl: var(--font-size-8);

  /* Alias tailles boutons */
  --font-size-button-micro: var(--font-size-button-1);
  --font-size-button-small: var(--font-size-button-2);
  --font-size-button-medium: var(--font-size-button-3);
  --font-size-button-big: var(--font-size-button-4);

  /* Alias tailles champs */
  --font-size-input-xs: var(--font-size-input-1);
  --font-size-input-small: var(--font-size-input-2);
  --font-size-input-normal: var(--font-size-input-3);
  --font-size-input-large: var(--font-size-input-4);

  /* Alias paddings champs */
  --padding-input-xs: var(--padding-input-1);
  --padding-input-small: var(--padding-input-2);
  --padding-input-normal: var(--padding-input-3);
  --padding-input-large: var(--padding-input-4);

  /* Alias pictos */
  --picto-height-tiny: var(--picto-height-1);
  --picto-height-normal: var(--picto-height-2);
  --picto-height-large: var(--picto-height-3);

}

/* Ecrans moyens et petits */
@media (max-width: 1600px) {
  :root {
    /* Tailles de texte générales */
    --font-size-2: 0.7rem;
    --font-size-3: 0.8rem;
    --font-size-4: 0.9rem;
    --font-size-5: 1rem;
    --font-size-6: 1.1rem;
    --font-size-7: 1.5rem;

    /* Titres */
    --font-size-title-2: 2rem;
    --font-size-title-4: 1.9rem;
    --font-size-title-5: 1.4rem;

    /* Boutons */
    --font-size-button-1: 0.8rem;
    --font-size-button-2: 0.9rem;
    --font-size-button-3: 1rem;
    --font-size-button-4: 1.1rem;
  }
}

/* Ecrans moyens */
@media (min-width: 992px) and (max-width: 1600px) {
  :root {
    /* Layout */
    --contenu-listing-left: 1rem;
    --contenu-listing-right: 1rem;
  }
}

/* Ecrans petits */
@media (max-width: 991px) {
  :root {
    /* Layout */
    --contenu-listing-left: 0.15rem;
    --contenu-listing-right: 0.15rem;

    /* Champs de formulaire */
    --font-size-input-3: 0.8rem;
    --padding-input-3: 0.25rem 0.1rem;
  }
}

html,
body {
  height: 100%;
}

body {
  font-family: var(--font-contenu);
  font-weight: 100;
}

body.scroll-blocked {
  overflow-y: hidden;
}

a:focus,
a:active {
  outline: 0;
  text-decoration: none;
}

a {
  text-decoration: none;
  transition: var(--transition-2);
  color: var(--gris-7);
}