/* e-permutations : palette FSU-SNUipp, signature propre (bande sombre, tracé, frise, vert pour l'action) */
@font-face {
  font-family: 'Work Sans';
  font-weight: 400 800;
  font-display: swap;
  src: url('/work-sans.woff2') format('woff2');
}

:root {
  --nuit: #15212b;
  --nuit-2: #1f3140;
  --texte: #15212b;
  --discret: #5a6b76;
  --encre: #1c6e92;
  --bleu: #0493cf;
  --vert: #8ec03b;
  --vert-vif: #a4d150;
  --vert-fonce: #3d6b10;
  --vert-clair: #eef6e2;
  --jaune: #ffe602;
  --jaune-clair: #fff8c2;
  --rouge: #ff1f49;
  --rouge-texte: #b8002b;
  --fond: #f4f6f3;
  --carte: #ffffff;
  --ligne: #d9e1dd;
  --rayon: 14px;
  --ombre: 0 1px 2px rgb(21 33 43 / 8%), 0 8px 24px rgb(21 33 43 / 10%);
  --largeur: 72rem;
}

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

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

body {
  margin: 0;
  background: var(--fond);
  color: var(--texte);
  font-family: 'Work Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 1.0625rem;
  line-height: 1.6;
}

a {
  color: var(--encre);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}
a:hover {
  color: var(--texte);
}
:focus-visible {
  outline: 3px solid var(--bleu);
  outline-offset: 2px;
}

h1,
h2,
h3 {
  line-height: 1.15;
  margin: 0 0 0.5em;
  letter-spacing: -0.01em;
}
h1 {
  font-size: clamp(2rem, 6vw, 3.25rem);
  font-weight: 800;
}
h2 {
  font-size: 1.625rem;
  font-weight: 800;
}
h3 {
  font-size: 1.125rem;
  font-weight: 700;
}

.conteneur {
  max-width: var(--largeur);
  margin: 0 auto;
  padding: 0 1rem;
}

.evitement {
  position: absolute;
  left: -999px;
  top: 0;
  padding: 0.75rem 1rem;
  background: var(--nuit);
  color: #fff;
  z-index: 10;
}
.evitement:focus {
  left: 0;
}

/* En-tête : le nom du site d'abord, le syndicat en signature */
.entete {
  background: var(--carte);
}
.entete::before {
  content: '';
  display: block;
  height: 4px;
  background: linear-gradient(
    90deg,
    var(--vert) 0 25%,
    var(--bleu) 25% 50%,
    var(--jaune) 50% 75%,
    var(--rouge) 75% 100%
  );
}
.entete__ligne {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1rem;
  padding-top: 0.875rem;
  padding-bottom: 0.875rem;
}
.marque {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-width: 0;
  color: var(--texte);
  text-decoration: none;
}
.marque__logo {
  flex: none;
  height: 3.25rem;
  width: auto;
}
.marque__texte {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.1;
  padding-left: 1rem;
  border-left: 2px solid var(--ligne);
}
.marque__syndicat {
  font-size: 0.9375rem;
  font-weight: 800;
  color: var(--encre);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.marque__dep {
  font-weight: 600;
}
.marque__nom {
  font-size: 1.375rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}
@media (max-width: 30rem) {
  .marque__dep {
    display: none;
  }
  .entete__ligne {
    column-gap: 0.75rem;
  }
  .marque {
    gap: 0.5rem;
  }
  .marque__logo {
    height: 2.25rem;
  }
  .marque__texte {
    padding-left: 0.5rem;
  }
  .marque__syndicat {
    font-size: 0.8125rem;
  }
  .marque__nom {
    font-size: 1.0625rem;
  }
}
@media (min-width: 48rem) {
  .entete__ligne {
    padding-top: 1.125rem;
    padding-bottom: 1.125rem;
  }
  .marque__logo {
    height: 5rem;
    margin: -0.375rem 0;
  }
  .marque__syndicat {
    font-size: 1.0625rem;
  }
  .marque__nom {
    font-size: 1.875rem;
  }
}

/* Bandeau d'information */
.bandeau {
  background: var(--jaune-clair);
  border-bottom: 1px solid #ede3a0;
  font-size: 0.9375rem;
}
.bandeau p {
  margin: 0;
  padding: 0.5rem 0;
}

main {
  padding-bottom: 3rem;
}

/* Bande d'accroche sombre */
.hero {
  position: relative;
  background: var(--nuit);
  color: #fff;
  overflow: hidden;
}
.hero::after {
  /* quadrillage léger, comme une carte */
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgb(255 255 255 / 4%) 1px, transparent 1px),
    linear-gradient(90deg, rgb(255 255 255 / 4%) 1px, transparent 1px);
  background-size: 40px 40px;
  pointer-events: none;
}
.hero__grille {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 2rem;
  align-items: center;
  padding-top: 2.5rem;
  padding-bottom: 2.5rem;
}
@media (min-width: 60rem) {
  .hero__grille--deux {
    grid-template-columns: 1.1fr 0.9fr;
    gap: 3.5rem;
    padding-top: 3.5rem;
    padding-bottom: 3.5rem;
  }
}
.hero h1 {
  margin-bottom: 0.4em;
}
.hero__suite {
  display: block;
  color: var(--vert-vif);
}
.hero__surtitre {
  display: inline-block;
  margin: 0 0 1rem;
  padding: 0.25rem 0.75rem;
  border: 1px solid rgb(255 255 255 / 30%);
  border-radius: 999px;
  font-size: 0.875rem;
  font-weight: 600;
}
.hero__intro {
  max-width: 36rem;
  margin: 0;
  font-size: 1.125rem;
  color: #d5dde2;
}
.hero a {
  color: #fff;
}

/* Tracé « d'ici vers ailleurs » */
.trajet {
  display: block;
  width: min(100%, 22rem);
  height: auto;
  margin-top: 1.75rem;
  color: rgb(255 255 255 / 55%);
}
.trajet__depart {
  fill: #fff;
}
.trajet__arrivee {
  fill: var(--vert);
}
.trajet text {
  fill: var(--nuit);
  font-family: 'Work Sans', system-ui, sans-serif;
  font-size: 15px;
  font-weight: 800;
}

section {
  margin-top: 3rem;
}

.carte {
  background: var(--carte);
  border-radius: var(--rayon);
  box-shadow: var(--ombre);
  padding: 1.5rem 1.25rem;
}

.maj {
  color: var(--discret);
  font-size: 0.9375rem;
}

/* Carte de contact de la section (posée sur la bande sombre) */
.section {
  margin: 0;
  background: var(--carte);
  color: var(--texte);
  border-radius: var(--rayon);
  box-shadow: var(--ombre);
  padding: 1.5rem 1.25rem;
}
.hero .section a {
  color: var(--encre);
}
.section h2 {
  font-size: 1.375rem;
}
.section__etiquette {
  display: inline-block;
  margin: 0 0 0.75rem;
  padding: 0.125rem 0.625rem;
  border-radius: 999px;
  background: var(--vert-clair);
  color: var(--vert-fonce);
  font-size: 0.8125rem;
  font-weight: 700;
}
.section__tel {
  margin: 1rem 0 0.25rem;
  font-size: 1.75rem;
  font-weight: 800;
  line-height: 1.3;
}
.hero .section .section__tel a,
.section__tel a {
  color: var(--texte);
  text-decoration: none;
}
.section__tel a:hover {
  text-decoration: underline;
}
.section__mail {
  margin: 0.25rem 0;
  font-weight: 600;
}
.section__adresse {
  margin: 0.5rem 0 0;
  font-size: 0.9375rem;
  color: var(--discret);
}
.section .actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.25rem;
}
.section--compacte {
  margin-top: 2rem;
  border-left: 6px solid var(--vert);
}
.section--compacte p {
  margin: 0.25rem 0;
}

/* Calendrier : une frise, comme un trajet */
.etapes {
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 0;
  counter-reset: etape;
}
.etape {
  position: relative;
  counter-increment: etape;
  padding: 0 0 1.75rem 3.5rem;
}
.etape::before {
  content: counter(etape);
  position: absolute;
  left: 0;
  top: 0;
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background: var(--carte);
  border: 2px solid var(--ligne);
  font-weight: 800;
  z-index: 1;
}
.etape::after {
  content: '';
  position: absolute;
  left: calc(1.125rem - 1.5px);
  top: 2.25rem;
  bottom: 0;
  border-left: 3px dotted var(--ligne);
}
.etape:last-child::after {
  display: none;
}
.etape h3 {
  margin: 0.375rem 0 0.25rem;
}
.etape p {
  margin: 0.375rem 0 0;
}
.etape__statut {
  display: inline-block;
  font-size: 0.8125rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--discret);
}
.etape__quand {
  font-weight: 700;
}
.etape__aide {
  display: inline-block;
  padding: 0.375rem 0.75rem;
  border-radius: 8px;
  background: var(--vert-clair);
  font-weight: 600;
}
.etape__aide a {
  font-weight: 800;
  color: var(--vert-fonce);
  white-space: nowrap;
}
.etape__ministere {
  font-size: 0.9375rem;
  color: var(--discret);
}
.etape--termine {
  color: var(--discret);
}
.etape--termine::before {
  content: '✓';
  background: var(--fond);
  color: var(--discret);
}
.etape--en-cours::before,
.etape--prochaine::before {
  background: var(--vert);
  border-color: var(--vert);
  color: var(--nuit);
  box-shadow: 0 0 0 6px var(--vert-clair);
}
.etape--en-cours > :not(.etape__statut),
.etape--prochaine > :not(.etape__statut) {
  position: relative;
}
/* La carte déborde à gauche pour que la pastille reste dans l'axe de la frise. */
.etape--en-cours,
.etape--prochaine {
  margin: 0 -1rem 1.75rem;
  padding: 1.25rem 1.25rem 1.25rem 4.5rem;
  background: var(--carte);
  border-radius: var(--rayon);
  box-shadow: var(--ombre);
}
.etape--en-cours::before,
.etape--prochaine::before {
  left: 1rem;
  top: 1.25rem;
}
.etape--en-cours::after,
.etape--prochaine::after {
  left: calc(2.125rem - 1.5px);
  top: 3.5rem;
  bottom: -1.75rem;
}
.etape--en-cours .etape__statut,
.etape--prochaine .etape__statut {
  padding: 0.125rem 0.625rem;
  border-radius: 999px;
  background: var(--nuit);
  color: #fff;
}
.alerte {
  font-weight: 700;
  color: var(--rouge-texte);
}

/* Trois entrées */
.entrees {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  margin-top: 1rem;
}
.entree {
  background: var(--carte);
  border-radius: var(--rayon);
  border-top: 5px solid var(--ligne);
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.entree p {
  margin: 0.375rem 0 1rem;
}
/* Boutons alignés en bas des cartes, quelle que soit la longueur du texte. */
.entree .bouton {
  margin-top: auto;
}
.entree--forte {
  border-top-color: var(--vert);
  box-shadow: var(--ombre);
}
.entree--bleu {
  border-top-color: var(--bleu);
}
.entree--jaune {
  border-top-color: var(--jaune);
}

/* Boutons : vert pour l'action, zone cliquable d'au moins 44 px */
.bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0.5rem 1.25rem;
  border-radius: 10px;
  border: 2px solid var(--vert);
  background: var(--vert);
  color: var(--nuit);
  font-weight: 800;
  text-decoration: none;
}
.bouton:hover,
.hero .section .bouton:hover {
  color: var(--nuit);
  background: var(--vert-vif);
  border-color: var(--vert-vif);
}
.hero .section .bouton {
  color: var(--nuit);
}
.bouton--secondaire,
.hero .section .bouton--secondaire {
  background: var(--carte);
  color: var(--texte);
  border-color: var(--ligne);
}
.bouton--secondaire:hover,
.hero .section .bouton--secondaire:hover {
  background: var(--fond);
  color: var(--texte);
  border-color: var(--texte);
}
.bouton--entete {
  flex: none;
  font-size: 0.9375rem;
  padding: 0.375rem 1rem;
}
.libelle-court {
  display: none;
}
@media (max-width: 30rem) {
  .bouton--entete {
    padding: 0.375rem 0.5rem;
    font-size: 0.875rem;
  }
  .libelle-long {
    display: none;
  }
  .libelle-court {
    display: inline;
  }
}

/* Choix du département : carte, liste déroulante avec saisie, listes complémentaires */
.choix {
  display: grid;
  gap: 1rem;
  margin-top: 1rem;
}
@media (min-width: 56rem) {
  .choix {
    grid-template-columns: 1.6fr 1fr;
    align-items: start;
  }
}
.choix__listes {
  display: grid;
  gap: 1rem;
}
.choix__listes h3 {
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--discret);
}
.combo {
  position: relative;
  margin-bottom: 1.25rem;
}
.combo label {
  display: block;
  margin-bottom: 0.375rem;
  font-weight: 700;
}
.combo__champ {
  position: relative;
}
.combo input {
  width: 100%;
  min-height: 52px;
  padding: 0.625rem 3rem 0.625rem 1rem;
  font: inherit;
  font-size: 1.0625rem;
  color: inherit;
  background: var(--carte);
  border: 2px solid var(--ligne);
  border-radius: 10px;
}
.combo input:focus {
  border-color: var(--nuit);
  outline: 3px solid var(--vert);
  outline-offset: 1px;
}
.combo__ouvrir {
  position: absolute;
  right: 4px;
  top: 4px;
  bottom: 4px;
  width: 44px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--texte);
  cursor: pointer;
}
.combo__liste {
  position: absolute;
  z-index: 5;
  left: 0;
  right: 0;
  max-height: 18rem;
  overflow-y: auto;
  margin: 0.375rem 0 0;
  padding: 0.375rem;
  list-style: none;
  background: var(--carte);
  border: 1px solid var(--ligne);
  border-radius: 10px;
  box-shadow: var(--ombre);
}
.combo__liste [role='option'] {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  min-height: 44px;
  padding: 0.25rem 0.5rem;
  border-radius: 8px;
  cursor: pointer;
}
.combo__liste [role='option']:hover,
.combo__liste [aria-selected='true'] {
  background: var(--vert-clair);
}
.combo__liste [aria-selected='true'] {
  outline: 2px solid var(--vert);
}

/* Carte de France : chaque département est un lien */
.france {
  display: block;
  width: 100%;
  height: auto;
}
.france path {
  fill: #e7eef0;
  stroke: #fff;
  stroke-width: 0.8;
  transition: fill 0.15s;
}
.france a:hover path {
  fill: var(--vert);
}
.france a:focus {
  outline: none;
}
.france a:focus-visible path {
  fill: var(--vert);
  stroke: var(--nuit);
  stroke-width: 2;
}
@media (prefers-reduced-motion: reduce) {
  .france path {
    transition: none;
  }
}
.france__source {
  margin: 0.5rem 0 0;
  font-size: 0.75rem;
  color: var(--discret);
}

.departements {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0.125rem;
}
.departements a {
  display: flex;
  align-items: center;
  min-height: 44px;
  gap: 0.625rem;
  padding: 0 0.375rem;
  border-radius: 8px;
  color: var(--texte);
  text-decoration: none;
}
.departements a:hover {
  background: var(--vert-clair);
}
.num {
  display: inline-grid;
  place-items: center;
  min-width: 2.75rem;
  height: 1.75rem;
  padding: 0 0.25rem;
  border-radius: 6px;
  background: var(--nuit);
  color: #fff;
  font-size: 0.875rem;
  font-weight: 800;
}

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

/* Contacts et textes officiels */
.liens {
  padding-left: 1.25rem;
}
.liens li + li {
  margin-top: 0.375rem;
}

/* Contenu rédigé */
.prose {
  max-width: 48rem;
  margin-top: 2rem;
}
.prose h2 {
  margin-top: 2rem;
  font-size: 1.375rem;
}
.prose li + li {
  margin-top: 0.375rem;
}
.tableau {
  width: 100%;
  overflow-x: auto;
}
table {
  border-collapse: collapse;
  width: 100%;
  min-width: 32rem;
}
th,
td {
  text-align: left;
  vertical-align: top;
  padding: 0.625rem;
  border-bottom: 1px solid var(--ligne);
}
th[scope='col'] {
  background: var(--fond);
}
.note {
  padding: 0.875rem 1rem;
  border-left: 4px solid var(--vert);
  border-radius: 0 8px 8px 0;
  background: var(--vert-clair);
}

/* Pied de page */
.pied {
  background: var(--nuit);
  color: #fff;
  font-size: 0.9375rem;
}
.pied a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: #fff;
}
.pied ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0 1.5rem;
}
.pied__marque {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0;
  padding: 1.5rem 0 0.5rem;
  font-weight: 600;
}
.pied__marque img {
  height: 2rem;
  width: auto;
  padding: 0.25rem;
  background: #fff;
  border-radius: 6px;
}
.pied__maj {
  margin: 0;
  padding: 0.5rem 0 1.5rem;
  color: #c3cdd2;
}

/* Calculateur de barème : un écran par question */
.calculateur {
  display: grid;
  gap: 1.5rem;
  margin: 2rem 0 3rem;
}
@media (min-width: 56rem) {
  .calculateur {
    grid-template-columns: 1.6fr 1fr;
    align-items: start;
  }
}
.calculateur:has(> .section--calculateur[hidden]) {
  grid-template-columns: minmax(0, 48rem);
}
.calculateur__carte {
  min-width: 0;
}
.calculateur section {
  margin-top: 0;
}
.ecran {
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}
.ecran legend {
  padding: 0;
}
.ecran__titre {
  margin: 0 0 1rem;
  font-size: 1.375rem;
  line-height: 1.3;
}
.ecran__titre:focus {
  outline: none;
}
.ecran__titre:focus-visible {
  outline: 3px solid var(--bleu);
  outline-offset: 4px;
}
.ecran__erreur {
  margin: 1rem 0 0;
  padding: 0.75rem 1rem;
  border-left: 4px solid var(--rouge);
  background: #fff0f3;
  color: var(--rouge-texte);
  font-weight: 700;
}
.champ {
  display: block;
  margin: 1rem 0 0.375rem;
  font-weight: 700;
}
.ecran select {
  width: 100%;
  max-width: 28rem;
  min-height: 44px;
  padding: 0.5rem 0.75rem;
  border: 2px solid var(--discret);
  border-radius: 8px;
  background: var(--carte);
  color: var(--texte);
  font: inherit;
}
.ecran select[aria-invalid='true'] {
  border-color: var(--rouge-texte);
}
.champs-ligne {
  display: flex;
  flex-wrap: wrap;
  gap: 0 1rem;
}
.champs-ligne > div {
  flex: 1 1 10rem;
}
.reponses {
  display: grid;
  gap: 0.5rem;
}
.reponses--ligne {
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
}
.choix-reponse {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  min-height: 44px;
  padding: 0.75rem 1rem;
  border: 2px solid var(--ligne);
  border-radius: 10px;
  background: var(--carte);
  cursor: pointer;
}
.choix-reponse:hover {
  border-color: var(--discret);
}
.choix-reponse:has(input:checked) {
  border-color: var(--vert-fonce);
  background: var(--vert-clair);
}
.choix-reponse input {
  flex: none;
  width: 1.25rem;
  height: 1.25rem;
  margin: 0.125rem 0 0;
  accent-color: var(--vert-fonce);
}
.choix-reponse span {
  font-weight: 600;
}
.choix-reponse small {
  display: block;
  margin-top: 0.125rem;
  color: var(--discret);
  font-size: 0.9375rem;
  font-weight: 400;
}
.cest-quoi {
  margin-top: 1.25rem;
}
.cest-quoi summary {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--encre);
  font-weight: 700;
  cursor: pointer;
}
.cest-quoi p {
  margin: 0.25rem 0 0;
  padding: 0.75rem 1rem;
  border-radius: 8px;
  background: var(--fond);
}
.rappel {
  margin: 0 0 1rem;
  color: var(--vert-fonce);
  font-weight: 700;
}
.liste-rassurante {
  padding-left: 1.25rem;
}
.liste-rassurante li + li {
  margin-top: 0.5rem;
}
.progression {
  margin-bottom: 1.25rem;
}
.progression__texte {
  margin: 0 0 0.375rem;
  color: var(--discret);
  font-size: 0.9375rem;
  font-weight: 600;
}
.progression__barre {
  height: 6px;
  border-radius: 3px;
  background: var(--ligne);
  overflow: hidden;
}
.progression__barre span {
  display: block;
  height: 100%;
  width: 0;
  background: var(--vert);
}
.navigation,
.calculateur .actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.75rem;
  margin-top: 1.5rem;
}
.resultat__total {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 0.5rem;
  margin: 0 0 1.5rem;
  font-size: 1.125rem;
  font-weight: 600;
}
.resultat__nombre {
  font-size: 3rem;
  font-weight: 800;
  line-height: 1;
  color: var(--vert-fonce);
}
.detail {
  min-width: 0;
}
.detail caption {
  margin-bottom: 0.5rem;
  text-align: left;
  font-weight: 800;
}
.detail .nombre {
  text-align: right;
  white-space: nowrap;
}
.detail th[scope='row'] {
  font-weight: 600;
}
.detail tfoot th,
.detail tfoot td {
  font-weight: 800;
  border-bottom: 0;
}
.resultat__autres,
.resultat__messages {
  padding-left: 1.25rem;
}
.note--importante {
  border-left-color: var(--jaune);
  background: var(--jaune-clair);
}
.section--calculateur {
  border-top: 6px solid var(--vert);
}
.section--calculateur .section__contact {
  font-size: 1.125rem;
  font-weight: 700;
}

[hidden] {
  display: none !important;
}