/* ======================================================================
   accueil.module.css  —  préfixe .acc-
   ====================================================================== */
/* Page d'accueil — valeurs reprises de `RELAYA Homepage v3.dc.html`. */

.acc-page {
  padding: 22px;
  background: var(--color-bord-2);
}

.acc-cadre {
  width: 100%;
  max-width: 1760px;
  margin: 0 auto;
  border-radius: 22px;
  overflow: hidden;
  background: var(--color-page);
  box-shadow: var(--shadow-ecran);
}

/* ------------------------------------------------------------------- entête */

.acc-entete {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 16px 28px;
  background: rgb(246 247 251 / 0.9);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--color-bord);
}

.acc-marque {
  display: flex;
  align-items: center;
  gap: 12px;
}

.acc-motMarque {
  font-size: 16px;
  letter-spacing: 0.34em;
  color: var(--color-nuit);
  font-weight: 500;
}

.acc-outilsEntete {
  display: flex;
  align-items: center;
  gap: 20px;
}

/* Menu en pastilles, style application. */
.acc-menu {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px;
  border-radius: 11px;
  background: var(--color-bord-3);
}

.acc-lienMenu {
  padding: 9px 15px;
  border-radius: 8px;
  font-size: 13.5px;
  color: var(--color-texte-2);
  transition: all 0.22s ease;
}

.acc-lienMenu:hover {
  background: #fff;
  color: var(--color-nuit);
  box-shadow: 0 1px 3px rgb(14 18 38 / 0.12);
}

/* §4.1 : pas de « Se connecter » — l'accès se fait par numéro de suivi. */
.acc-suivi {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 6px 5px 14px;
  border-radius: 10px;
  border: 1px solid var(--color-bord);
  background: #fff;
}

.acc-libelleSuivi {
  font-size: 13.5px;
  color: var(--color-texte-4);
  white-space: nowrap;
}

.acc-accesDossier {
  padding: 6px 12px;
  border: 0;
  border-radius: 7px;
  background: var(--color-bord-3);
  color: var(--color-accent);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.22s ease;
  white-space: nowrap;
}

.acc-accesDossier:hover {
  background: var(--color-nuit);
  color: #fff;
}

.acc-ctaEntete {
  padding: 11px 20px;
  border-radius: 10px;
  background: var(--color-nuit);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  transition: all 0.22s ease;
  white-space: nowrap;
}

.acc-ctaEntete:hover {
  background: var(--color-accent);
  color: #fff;
}

/* --------------------------------------------------------------------- hero */

.acc-hero {
  padding: 76px 40px 0;
  background: #fff;
  text-align: center;
}

.acc-titreHero {
  margin: 0 auto;
  max-width: 22ch;
  font-family: var(--font-titre);
  font-weight: 200;
  font-size: clamp(34px, 6.2vw, 74px);
  line-height: 1.08;
  letter-spacing: -0.032em;
  color: var(--color-nuit);
}

.acc-sousTitreHero {
  margin: 26px auto 0;
  max-width: 66ch;
  font-size: 19px;
  line-height: 1.6;
  color: var(--color-texte-2);
  text-wrap: pretty;
}

.acc-ctasHero {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 34px;
  flex-wrap: wrap;
}

.acc-ctaPrincipal {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 18px 32px;
  border-radius: 12px;
  background: var(--color-nuit);
  color: #fff;
  font-size: 17px;
  font-weight: 600;
  box-shadow: var(--shadow-cta);
  transition: all 0.25s cubic-bezier(0.2, 0.7, 0.3, 1);
}

.acc-ctaPrincipal:hover {
  background: var(--color-accent);
  color: #fff;
  transform: translateY(-2px);
}

.acc-ctaSecondaire {
  padding: 18px 28px;
  border-radius: 12px;
  border: 1px solid var(--color-bord-pointille);
  color: var(--color-nuit);
  font-size: 17px;
  font-weight: 500;
  transition: all 0.25s ease;
}

.acc-ctaSecondaire:hover {
  border-color: var(--color-pervenche);
  background: var(--color-page);
  color: var(--color-nuit);
}

.acc-mentionHero {
  margin-top: 16px;
  font-size: 14.5px;
  color: var(--color-texte-4);
}

.acc-gages {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 34px;
}

.acc-gage {
  padding: 8px 14px;
  border-radius: 9px;
  background: var(--color-page);
  border: 1px solid var(--color-bord-3);
  font-size: 13px;
  color: var(--color-texte);
}

/* ------------------------------------------------------- fenêtre application */

.acc-zoneApp {
  padding: 48px 40px 56px;
  background: #fff;
  border-bottom: 1px solid var(--color-bord);
}

.acc-fenetre {
  border-radius: 16px;
  background: #fff;
  border: 1px solid var(--color-bord);
  overflow: hidden;
  box-shadow: var(--shadow-encadre);
  min-height: 620px;
  display: flex;
}

.acc-railApp {
  width: 210px;
  flex: 0 0 210px;
  background: var(--color-nuit);
  padding: 20px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.acc-marqueRail {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 6px 8px 18px;
}

.acc-motMarqueRail {
  font-size: 11.5px;
  letter-spacing: 0.28em;
  color: #fff;
}

.acc-entreeRail {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 11px 12px;
  border: 0;
  border-radius: 9px;
  font-size: 13.5px;
  cursor: pointer;
  color: #a7aec9;
  background: transparent;
  transition: all 0.2s ease;
  text-align: left;
  width: 100%;
}

.acc-entreeRail:hover {
  background: rgb(255 255 255 / 0.09);
  color: #fff;
}

.acc-entreeActive {
  background: rgb(139 155 216 / 0.18);
  color: #fff;
}

.acc-badgeRail {
  font-size: 11.5px;
  color: var(--color-pervenche);
}

.acc-encartRail {
  margin-top: auto;
  padding: 14px 12px;
  border-radius: 10px;
  background: rgb(255 255 255 / 0.05);
}

.acc-encartTitre {
  font-size: 12px;
  color: var(--color-pervenche);
}

.acc-encartTexte {
  font-size: 12.5px;
  color: #7c85a6;
  margin-top: 5px;
  line-height: 1.4;
}

.acc-encartPiste {
  height: 3px;
  border-radius: 999px;
  background: rgb(255 255 255 / 0.12);
  margin-top: 10px;
  overflow: hidden;
}

.acc-contenuApp {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.acc-titreApp {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 22px;
  border-bottom: 1px solid var(--color-bord-3);
}

.acc-nomPanneau {
  font-size: 15px;
  color: var(--color-nuit);
  font-weight: 500;
}

.acc-etatPanneau {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: var(--color-texte-4);
}

.acc-pointEtat {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--color-succes-point);
}

/* ------------------------------------------------------------ panneaux app */

.acc-panneauApp {
  padding: 44px 34px;
}

.acc-intituleApp {
  font-size: 11.5px;
  letter-spacing: 0.18em;
  color: var(--color-texte-5);
}

.acc-questionApp {
  margin-top: 16px;
  font-size: 27px;
  color: var(--color-nuit);
  line-height: 1.25;
  letter-spacing: -0.015em;
  max-width: 26ch;
}

.acc-optionsApp {
  display: flex;
  flex-direction: column;
  gap: 9px;
  margin-top: 28px;
  max-width: 460px;
}

.acc-optionApp {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 17px 18px;
  border-radius: 12px;
  border: 1px solid var(--color-bord);
  background: #fff;
  cursor: pointer;
  transition: all 0.22s ease;
  text-align: left;
}

.acc-optionApp:hover {
  border-color: var(--color-pervenche);
  background: var(--color-clair-2);
}

.acc-optionAppChoisie {
  border-color: var(--color-nuit);
  background: var(--color-page);
}

.acc-rondApp {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1.5px solid var(--color-bord);
  flex: 0 0 18px;
  transition: all 0.22s ease;
}

.acc-rondAppChoisi {
  border-color: var(--color-nuit);
  background: var(--color-nuit);
  box-shadow: inset 0 0 0 3.5px #fff;
}

.acc-libelleOptionApp {
  font-size: 16px;
  color: var(--color-nuit);
}

.acc-actionsApp {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 28px;
  flex-wrap: wrap;
}

.acc-continuerApp {
  padding: 14px 26px;
  border: 0;
  border-radius: 11px;
  background: var(--color-nuit);
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.22s ease;
}

.acc-continuerApp:hover:not(:disabled) {
  background: var(--color-accent);
}

.acc-continuerApp:disabled {
  background: var(--color-bord);
  color: var(--color-texte-6);
  cursor: not-allowed;
}

.acc-mentionApp {
  font-size: 13px;
  color: var(--color-texte-5);
}

/* Conséquence de la réponse, affichée dès le choix : la démonstration montre
   que la réponse compte, au lieu de mener partout au même écran. */
.acc-suiteApp {
  margin: 16px 0 0;
  padding-left: 13px;
  border-left: 2px solid var(--color-pervenche);
  font-size: 14px;
  line-height: 1.5;
  color: var(--color-texte-3);
}

/* Relance de fin de démonstration. */
.acc-relance {
  margin-top: 24px;
  padding: 22px 24px;
  border-radius: 14px;
  background: var(--color-nuit);
}

.acc-texteRelance {
  margin: 0 0 12px;
  font-size: 14.5px;
  line-height: 1.62;
  color: rgb(255 255 255 / 0.82);
}

.acc-texteRelance strong {
  color: #fff;
  font-weight: 600;
}

.acc-ctaRelance {
  display: inline-flex;
  align-items: center;
  margin-top: 6px;
  padding: 13px 24px;
  border-radius: 11px;
  background: var(--color-pervenche);
  color: var(--color-nuit);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
}

.acc-ctaRelance:hover {
  background: #fff;
}

.acc-entreeRail:disabled {
  opacity: 0.45;
  cursor: default;
}

/* analyse dans la fenêtre */

.acc-analyseApp {
  position: relative;
  padding: 64px 34px;
  overflow: hidden;
}

.acc-bandeauApp {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 120px;
  background: linear-gradient(
    180deg,
    rgb(139 155 216 / 0),
    rgb(139 155 216 / 0.16),
    rgb(139 155 216 / 0)
  );
  animation: rl-scan-vertical 2.4s linear infinite;
}

@keyframes rl-scan-vertical {
  from {
    transform: translateY(-100%);
  }
  to {
    transform: translateY(500%);
  }
}

.acc-titreAnalyseApp {
  position: relative;
  font-family: var(--font-titre);
  font-size: 34px;
  font-weight: 200;
  color: var(--color-nuit);
}

.acc-lignesAnalyseApp {
  position: relative;
  display: flex;
  flex-direction: column;
  margin-top: 28px;
  max-width: 520px;
}

.acc-ligneAnalyseApp {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 0;
  border-bottom: 1px solid var(--color-bord-4);
  opacity: 0.22;
  transition: opacity 0.4s ease;
  font-size: 15px;
  color: var(--color-nuit);
}

.acc-ligneAnalyseAppRevelee {
  opacity: 1;
}

.acc-marqueAnalyseApp {
  font-size: 12.5px;
  color: var(--color-succes-point);
}

/* dossier dans la fenêtre */

.acc-chiffresApp {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 20px;
}

.acc-chiffreApp {
  padding: 16px 18px;
  border-radius: 12px;
  background: var(--color-page);
  border: 1px solid var(--color-bord-2);
}

.acc-chiffreAppValeur {
  font-size: 24px;
  color: var(--color-nuit);
  font-weight: 500;
  line-height: 1;
}

.acc-chiffreAppLibelle {
  font-size: 12.5px;
  color: var(--color-texte-3);
  margin-top: 7px;
}

.acc-taches {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 18px;
}

.acc-tache {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border-radius: 11px;
  border: 1px solid var(--color-bord-2);
  background: #fff;
  transition: all 0.25s cubic-bezier(0.2, 0.7, 0.3, 1);
}

.acc-tache:hover {
  border-color: var(--color-pervenche);
  transform: translateY(-2px);
  box-shadow: var(--shadow-survol);
}

.acc-pastilleTache {
  width: 26px;
  height: 26px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  flex: 0 0 26px;
}

/* Le libellé occupe la place restante ; `min-width: 0` l'autorise à se
   couper plutôt qu'à imposer sa largeur à toute la rangée. */
.acc-corpsTache {
  flex: 1;
  min-width: 0;
}

.acc-orgTache {
  font-size: 14.5px;
  color: var(--color-nuit);
  font-weight: 500;
}

.acc-descTache {
  font-size: 12.5px;
  color: var(--color-texte-4);
  margin-top: 2px;
}

/* Le courrier offert se distingue au premier coup d'œil des verrouillés. */
.acc-tacheOfferte {
  border-color: var(--color-succes);
  background: var(--color-succes-fond);
}

.acc-delaiTache {
  font-size: 12.5px;
  color: var(--color-texte-2);
  white-space: nowrap;
}

.acc-actionTache {
  padding: 8px 14px;
  border-radius: 8px;
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
}

/* ------------------------------------------------------------------- étapes */

.acc-sectionEtapes {
  padding: 64px 40px;
  background: var(--color-page);
  border-bottom: 1px solid var(--color-bord);
}

.acc-grilleEtapes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.acc-etape {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 26px 24px;
  border-radius: 14px;
  background: #fff;
  border: 1px solid var(--color-bord-2);
  transition: all 0.25s cubic-bezier(0.2, 0.7, 0.3, 1);
}

.acc-etape:hover {
  transform: translateY(-3px);
  border-color: var(--color-pervenche);
  box-shadow: var(--shadow-survol);
}

.acc-numeroEtape {
  width: 28px;
  height: 28px;
  border-radius: 9px;
  background: var(--color-bord-3);
  color: var(--color-accent);
  font-size: 13px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 28px;
}

.acc-titreEtape {
  font-size: 18px;
  color: var(--color-nuit);
  font-weight: 500;
  line-height: 1.3;
}

.acc-detailEtape {
  font-size: 14.5px;
  color: var(--color-texte-3);
  margin-top: 6px;
  line-height: 1.5;
}

/* ----------------------------------------------------------------- chiffres */

.acc-sectionChiffres {
  padding: 72px 40px;
  background: #fff;
  border-bottom: 1px solid var(--color-bord);
}

.acc-enteteSection {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
  flex-wrap: wrap;
}

.acc-titreSection {
  margin: 0;
  font-family: var(--font-titre);
  font-weight: 200;
  font-size: 44px;
  line-height: 1.06;
  letter-spacing: -0.028em;
  color: var(--color-nuit);
  max-width: 26ch;
}

.acc-avertissement {
  font-size: 13px;
  color: var(--color-texte-5);
  max-width: 34ch;
  line-height: 1.55;
}

.acc-grilleIndicateurs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  margin-top: 40px;
  background: var(--color-bord-2);
  border: 1px solid var(--color-bord-2);
  border-radius: 14px;
  overflow: hidden;
}

.acc-indicateur {
  background: #fff;
  padding: 28px 24px 26px;
  transition: all 0.22s ease;
}

.acc-indicateur:hover {
  background: #f9fafd;
}

.acc-valeurIndicateur {
  font-family: var(--font-titre);
  font-size: 52px;
  font-weight: 200;
  color: var(--color-nuit);
  line-height: 0.92;
}

.acc-libelleIndicateur {
  margin-top: 14px;
  font-size: 14.5px;
  color: var(--color-texte);
  line-height: 1.45;
}

.acc-sourceIndicateur {
  margin-top: 8px;
  font-size: 12.5px;
  color: var(--color-texte-5);
}

.acc-grilleGraphiques {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 16px;
  margin-top: 16px;
}

.acc-carteGraphique {
  padding: 28px 26px;
  border-radius: 14px;
  border: 1px solid var(--color-bord-2);
  background: #f9fafd;
}

.acc-carteGraphiqueSombre {
  padding: 28px 26px;
  border-radius: 14px;
  border: 1px solid var(--color-bord-2);
  background: var(--color-nuit);
}

.acc-intituleGraphique {
  font-size: 11.5px;
  letter-spacing: 0.18em;
  color: var(--color-texte-5);
}

.acc-intituleGraphiqueSombre {
  font-size: 11.5px;
  letter-spacing: 0.18em;
  color: var(--color-pervenche);
}

.acc-chapoGraphique {
  margin-top: 8px;
  font-size: 17px;
  color: var(--color-nuit);
}

.acc-chapoGraphiqueSombre {
  margin-top: 8px;
  font-size: 17px;
  color: #fff;
}

.acc-listeDelais {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 24px;
}

.acc-delai {
  display: grid;
  grid-template-columns: 170px 1fr 96px;
  gap: 14px;
  align-items: center;
}

.acc-orgDelai {
  font-size: 14px;
  color: var(--color-texte);
}

.acc-pisteDelai {
  height: 10px;
  border-radius: 999px;
  background: var(--color-bord-3);
  overflow: hidden;
}

.acc-remplissageDelai {
  height: 100%;
  border-radius: 999px;
  transition: width 0.5s ease;
}

.acc-valeurDelai {
  font-size: 13px;
  color: var(--color-texte-3);
  text-align: right;
}

.acc-barreEmpilee {
  display: flex;
  height: 12px;
  border-radius: 999px;
  overflow: hidden;
  margin-top: 24px;
}

.acc-legendeRepartition {
  display: flex;
  flex-direction: column;
  gap: 11px;
  margin-top: 22px;
}

.acc-ligneRepartition {
  display: flex;
  align-items: center;
  gap: 11px;
}

.acc-puce {
  width: 9px;
  height: 9px;
  border-radius: 3px;
  flex: 0 0 9px;
}

.acc-libelleRepartition {
  font-size: 14px;
  color: var(--color-sur-nuit);
  flex: 1;
}

.acc-nombreRepartition {
  font-size: 13.5px;
  color: var(--color-pervenche);
}

.acc-grilleComparaison {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin-top: 16px;
}

.acc-comparaison {
  padding: 26px;
  border-radius: 14px;
  border: 1px solid var(--color-bord-2);
  background: #f9fafd;
}

.acc-comparaisonMiseEnAvant {
  border-color: var(--color-pervenche);
  background: #fff;
}

.acc-hautComparaison {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
}

.acc-libelleComparaison {
  font-size: 14px;
  color: var(--color-texte-3);
}

.acc-libelleComparaisonMiseEnAvant {
  color: var(--color-accent);
}

.acc-valeurComparaison {
  font-family: var(--font-titre);
  font-size: 32px;
  font-weight: 200;
  line-height: 1.1;
  text-align: right;
  color: var(--color-nuit);
}

.acc-pisteComparaison {
  height: 8px;
  border-radius: 999px;
  background: var(--color-bord-3);
  overflow: hidden;
  margin-top: 18px;
}

.acc-noteComparaison {
  margin-top: 14px;
  font-size: 13.5px;
  color: var(--color-texte-3);
  line-height: 1.5;
}

/* ---------------------------------------------------------------- paperasse */

.acc-sectionPaperasse {
  padding: 72px 40px;
  background: #fff;
  border-bottom: 1px solid var(--color-bord);
}

.acc-grillePaperasse {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 56px;
  align-items: center;
}

.acc-titrePaperasse {
  margin: 0;
  font-family: var(--font-titre);
  font-weight: 200;
  font-size: 46px;
  line-height: 1.05;
  letter-spacing: -0.028em;
  color: var(--color-nuit);
}

.acc-pastillesOrganismes {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.acc-pastilleOrganisme {
  padding: 10px 16px;
  border-radius: 9px;
  background: var(--color-page);
  border: 1px solid var(--color-bord-2);
  font-size: 14px;
  color: var(--color-texte-2);
  transition: all 0.22s ease;
}

.acc-pastilleOrganisme:hover {
  background: var(--color-nuit);
  border-color: var(--color-nuit);
  color: #fff;
}

/* ------------------------------------------------------------------- tarifs */

.acc-sectionTarifs {
  padding: 72px 40px 80px;
  background: var(--color-page);
}

.acc-mentionTarifs {
  font-size: 13.5px;
  letter-spacing: 0.14em;
  color: var(--color-texte-4);
}

.acc-grilleTarifs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 36px;
}

.acc-offre {
  padding: 32px 30px;
  border-radius: 16px;
  background: #fff;
  border: 1px solid var(--color-bord);
  box-sizing: border-box;
  transition: all 0.28s cubic-bezier(0.2, 0.7, 0.3, 1);
  display: flex;
  flex-direction: column;
}

.acc-offre:hover {
  transform: translateY(-4px);
  box-shadow: 0 30px 60px -34px rgb(14 18 38 / 0.3);
}

.acc-offreRecommandee {
  background: var(--color-nuit);
  border-color: var(--color-nuit);
}

.acc-offreRecommandee:hover {
  box-shadow: 0 34px 66px -34px rgb(14 18 38 / 0.55);
}

.acc-hautOffre {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.acc-nomOffre {
  font-size: 12px;
  letter-spacing: 0.18em;
  color: var(--color-accent);
}

.acc-nomOffreRecommandee {
  color: var(--color-pervenche);
}

.acc-badgeRecommande {
  font-size: 10.5px;
  letter-spacing: 0.1em;
  padding: 4px 9px;
  border-radius: 6px;
  background: var(--color-pervenche);
  color: var(--color-nuit);
  font-weight: 600;
}

.acc-prix {
  font-family: var(--font-titre);
  font-size: 36px;
  font-weight: 200;
  color: var(--color-nuit);
}

.acc-prixRecommande {
  color: #fff;
}

.acc-promesse {
  margin-top: 20px;
  font-size: 21px;
  color: var(--color-nuit);
}

.acc-promesseRecommandee {
  color: #fff;
}

.acc-avantages {
  display: flex;
  flex-direction: column;
  margin-top: 20px;
}

.acc-avantage {
  display: flex;
  gap: 11px;
  padding: 10px 0;
  border-top: 1px solid var(--color-bord-4);
  font-size: 14.5px;
  color: var(--color-texte);
  line-height: 1.45;
}

.acc-avantageSombre {
  border-top-color: rgb(255 255 255 / 0.09);
  color: var(--color-sur-nuit);
}

.acc-coche {
  color: var(--color-pervenche);
  flex: 0 0 auto;
}

.acc-ctaOffre {
  margin-top: auto;
  padding: 15px;
  border: 0;
  border-radius: 11px;
  background: var(--color-nuit);
  color: #fff;
  text-align: center;
  font-size: 15.5px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.22s ease;
  display: block;
}

.acc-ctaOffre:hover {
  background: var(--color-accent);
  color: #fff;
}

.acc-espaceAvantCta {
  margin-top: 26px;
}

.acc-ctaOffreRecommandee {
  background: var(--color-pervenche);
  color: var(--color-nuit);
}

.acc-ctaOffreRecommandee:hover {
  background: #fff;
  color: var(--color-nuit);
}

/* ---------------------------------------------------------------- pied de page */

.acc-pied {
  padding: 56px 40px 34px;
  background: var(--color-nuit);
}

.acc-grillePied {
  display: grid;
  grid-template-columns: 1.1fr repeat(4, 1fr);
  gap: 32px;
}

.acc-chapoPied {
  margin-top: 16px;
  font-size: 13.5px;
  color: #8a93b4;
  line-height: 1.6;
  max-width: 30ch;
}

.acc-titreColonnePied {
  font-size: 11.5px;
  letter-spacing: 0.16em;
  color: var(--color-pervenche);
}

.acc-liensPied {
  display: flex;
  flex-direction: column;
  gap: 9px;
  margin-top: 16px;
}

.acc-lienPied {
  font-size: 13.5px;
  color: #a7aec9;
  transition: color 0.2s ease;
}

.acc-lienPied:hover {
  color: #fff;
}

.acc-basPied {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  margin-top: 44px;
  padding-top: 22px;
  border-top: 1px solid rgb(255 255 255 / 0.09);
  flex-wrap: wrap;
}

.acc-mentionPied {
  font-size: 12.5px;
  color: #6e769b;
}

/* §28 : ne jamais laisser croire à un service public. */
.acc-independance {
  font-size: 12.5px;
  color: #6e769b;
  max-width: 60ch;
  text-align: right;
  line-height: 1.55;
}

/* ------------------------------------------------------------------- mobile */

@media (max-width: 1100px) {
  .acc-page {
    padding: 0;
  }

  .acc-cadre {
    border-radius: 0;
    box-shadow: none;
  }

  /* L'entête reste sur une ligne : le logo à gauche, le CTA à droite, à portée
     de pouce. Le menu et le champ de suivi passent en second plan. */
  .acc-entete {
    gap: 12px;
    padding: 12px 16px;
  }

  .acc-motMarque {
    font-size: 13px;
    letter-spacing: 0.28em;
  }

  .acc-ctaEntete {
    padding: 10px 14px;
    font-size: 13.5px;
  }

  /* Le menu et le champ de suivi passent en second plan sur mobile : le CTA
     principal doit rester atteignable au pouce. */
  .acc-menu,
  .acc-suivi {
    display: none;
  }

  .acc-hero {
    padding: 44px 20px 0;
  }

  .acc-titreHero {
    font-size: 38px;
  }

  .acc-sousTitreHero {
    font-size: 16px;
  }

  .acc-ctasHero {
    flex-direction: column;
    align-items: stretch;
  }

  .acc-ctaPrincipal,
  .acc-ctaSecondaire {
    justify-content: center;
    text-align: center;
    min-height: 52px;
    box-sizing: border-box;
  }

  .acc-zoneApp,
  .acc-sectionEtapes,
  .acc-sectionChiffres,
  .acc-sectionPaperasse,
  .acc-sectionTarifs,
  .acc-pied {
    padding-left: 20px;
    padding-right: 20px;
  }

  .acc-fenetre {
    flex-direction: column;
    min-height: 0;
  }

  /* Les lignes de courrier sont des rangées de cinq colonnes : sur un
     téléphone elles se replient en deux lignes, le libellé d'abord, le délai
     et l'état ensuite. */
  .acc-tache {
    flex-wrap: wrap;
    row-gap: 10px;
    padding: 14px;
  }

  .acc-corpsTache {
    flex: 1 1 calc(100% - 40px);
  }

  /* Deuxième ligne : le délai à gauche, l'état à droite. Le délai se coupe
     plutôt que d'imposer sa largeur et de rejeter l'état sur une ligne de
     plus. */
  .acc-delaiTache {
    flex: 1 1 0;
    min-width: 0;
    margin-left: 40px;
  }

  .acc-actionTache {
    flex: none;
    margin-left: auto;
  }

  .acc-relance {
    padding: 20px 18px;
  }

  .acc-ctaRelance {
    display: flex;
    justify-content: center;
    text-align: center;
    min-height: 52px;
    box-sizing: border-box;
  }

  .acc-railApp {
    width: auto;
    flex: none;
    flex-direction: row;
    overflow-x: auto;
    gap: 6px;
    padding: 12px;
  }

  .acc-marqueRail,
  .acc-encartRail {
    display: none;
  }

  .acc-entreeRail {
    width: auto;
    white-space: nowrap;
  }

  .acc-offre {
    padding: 26px 20px;
  }

  .acc-grilleEtapes,
  .acc-grilleIndicateurs,
  .acc-grilleGraphiques,
  .acc-grilleComparaison,
  .acc-grillePaperasse,
  .acc-grilleTarifs,
  .acc-chiffresApp {
    grid-template-columns: 1fr;
  }

  .acc-grillePied {
    grid-template-columns: 1fr 1fr;
  }

  .acc-grillePaperasse {
    gap: 28px;
  }

  .acc-titreSection,
  .acc-titrePaperasse {
    font-size: 30px;
  }

  .acc-delai {
    grid-template-columns: 120px 1fr 74px;
  }

  .acc-basPied {
    flex-direction: column;
    align-items: flex-start;
  }

  .acc-independance {
    text-align: left;
  }
}
/* ======================================================================
   parcours.module.css  —  préfixe .qst-
   ====================================================================== */
/* Questionnaire — valeurs reprises de `RELAYA Questionnaire.dc.html`. */

/* Les écrans « application » — questionnaire, diagnostic, espace, console —
   occupent toute la hauteur de la fenêtre : sans cela le cadre s'arrête à sa
   hauteur minimale et laisse une bande grise sous la page. */
.qst-page {
  padding: 22px;
  display: flex;
  background: var(--color-bord-2);
  min-height: 100vh;
}

.qst-cadre {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 1760px;
  margin: 0 auto;
  border-radius: 22px;
  overflow: hidden;
  background: var(--color-page);
  box-shadow: var(--shadow-ecran);
}

/* ------------------------------------------------------------------- entête */

.qst-barre {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 16px 28px;
  background: #fff;
  border-bottom: 1px solid var(--color-bord);
}

.qst-marque {
  display: flex;
  align-items: center;
  gap: 12px;
}

.qst-motMarque {
  font-size: 15px;
  letter-spacing: 0.34em;
  color: var(--color-nuit);
  font-weight: 500;
}

.qst-infosEntete {
  display: flex;
  align-items: center;
  gap: 20px;
}

.qst-sauvegarde {
  font-size: 13px;
  color: var(--color-texte-4);
}

.qst-numeroSuivi {
  padding: 8px 14px;
  border-radius: 9px;
  background: var(--color-bord-3);
  font-size: 13px;
  color: var(--color-accent);
  font-weight: 600;
  white-space: nowrap;
}

/* --------------------------------------------------------------------- corps */

.qst-corps {
  display: grid;
  grid-template-columns: 288px 1fr;
  min-height: 780px;
  flex: 1;
}

/* ---------------------------------------------------------------- rail gauche */

.qst-rail {
  background: var(--color-nuit);
  padding: 26px 18px 22px;
  display: flex;
  flex-direction: column;
}

.qst-intituleRail {
  font-size: 11.5px;
  letter-spacing: 0.18em;
  color: var(--color-pervenche);
}

.qst-listeSections {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 18px;
}

.qst-sectionRail {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 12px;
  border-radius: 9px;
  transition: all 0.25s ease;
}

.qst-sectionCourante {
  background: rgb(255 255 255 / 0.06);
}

.qst-pastilleSection {
  width: 20px;
  height: 20px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10.5px;
  flex: 0 0 20px;
}

.qst-libelleSection {
  font-size: 13.5px;
  flex: 1;
}

.qst-compteurSection {
  font-size: 11.5px;
  color: #6e769b;
}

.qst-encartRail {
  margin-top: auto;
  padding: 16px 14px;
  border-radius: 11px;
  background: rgb(255 255 255 / 0.05);
}

.qst-encartTitre {
  font-size: 12.5px;
  color: var(--color-pervenche);
}

.qst-encartTexte {
  margin-top: 6px;
  font-size: 12.5px;
  color: #7c85a6;
  line-height: 1.5;
}

/* --------------------------------------------------------------- panneau droit */

.qst-panneau {
  display: flex;
  flex-direction: column;
  background: #fff;
}

.qst-barreProgression {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 18px 34px;
  border-bottom: 1px solid var(--color-bord-3);
}

.qst-retour {
  font-size: 13.5px;
  color: var(--color-texte-2);
  padding: 8px 14px;
  border-radius: 9px;
  border: 1px solid var(--color-bord);
  background: transparent;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.qst-retour:hover:not(:disabled) {
  border-color: var(--color-pervenche);
  color: var(--color-nuit);
}

.qst-retour:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.qst-piste {
  flex: 1;
  height: 5px;
  border-radius: 999px;
  background: var(--color-bord-3);
  overflow: hidden;
}

.qst-remplissage {
  height: 100%;
  border-radius: 999px;
  background: var(--color-bleu);
  transition: width 0.35s ease;
}

.qst-etape {
  font-size: 13px;
  color: var(--color-texte-4);
  white-space: nowrap;
}

/* ------------------------------------------------------------------ question */

.qst-question {
  padding: 56px 34px 40px;
  max-width: 760px;
}

.qst-sectionQuestion {
  font-size: 11.5px;
  letter-spacing: 0.18em;
  color: var(--color-texte-5);
}

.qst-titreQuestion {
  margin-top: 16px;
  font-family: var(--font-titre);
  font-weight: 200;
  font-size: 44px;
  line-height: 1.08;
  letter-spacing: -0.025em;
  color: var(--color-nuit);
}

.qst-aideQuestion {
  margin-top: 14px;
  font-size: 16px;
  color: var(--color-texte-2);
  line-height: 1.55;
}

.qst-optionsUniques {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 32px;
}

.qst-optionUnique {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 18px;
  border-radius: 12px;
  border: 1px solid var(--color-bord);
  background: #fff;
  cursor: pointer;
  transition: all 0.22s ease;
  text-align: left;
}

.qst-optionUnique:hover {
  border-color: var(--color-pervenche);
  background: var(--color-clair-2);
}

.qst-optionChoisie {
  border-color: var(--color-nuit);
  background: var(--color-page);
}

.qst-rond {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1.5px solid var(--color-bord);
  flex: 0 0 18px;
  transition: all 0.22s ease;
}

.qst-rondChoisi {
  border-color: var(--color-nuit);
  background: var(--color-nuit);
  box-shadow: inset 0 0 0 3.5px #fff;
}

.qst-libelleOption {
  font-size: 16px;
  color: var(--color-nuit);
}

.qst-optionsMultiples {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 32px;
}

.qst-optionMultiple {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 14px 18px;
  border-radius: 11px;
  border: 1px solid var(--color-bord);
  background: #fff;
  cursor: pointer;
  transition: all 0.22s ease;
}

.qst-optionMultiple:hover {
  border-color: var(--color-pervenche);
}

.qst-carre {
  width: 16px;
  height: 16px;
  border-radius: 5px;
  border: 1.5px solid var(--color-bord);
  color: #fff;
  font-size: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 16px;
  transition: all 0.22s ease;
}

.qst-carreCoche {
  border-color: var(--color-nuit);
  background: var(--color-nuit);
}

.qst-libelleMultiple {
  font-size: 15.5px;
  color: var(--color-nuit);
}

.qst-mentionMultiple {
  margin-top: 16px;
  font-size: 13.5px;
  color: var(--color-texte-5);
}

.qst-champs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 32px;
  max-width: 620px;
}

.qst-libelleChamp {
  font-size: 13px;
  color: var(--color-texte-3);
}

.qst-champ {
  margin-top: 8px;
  width: 100%;
  box-sizing: border-box;
  padding: 15px 16px;
  border-radius: 11px;
  border: 1px solid var(--color-bord);
  background: var(--color-clair);
  font-size: 16px;
  color: var(--color-nuit);
}

/* Champ de date : la saisie, et le bouton qui ouvre le calendrier du système. */

.qst-champDate {
  position: relative;
}

.qst-champDate .qst-champ {
  padding-right: 52px;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}

.qst-boutonCalendrier {
  position: absolute;
  right: 6px;
  bottom: 5px;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--color-texte-4);
  font-size: 17px;
  cursor: pointer;
}

.qst-boutonCalendrier:hover,
.qst-boutonCalendrier:focus-visible {
  background: var(--color-bord-3);
  color: var(--color-accent);
}

.qst-questionsRail {
  list-style: none;
  margin: 2px 0 10px;
  padding: 0 0 0 26px;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.qst-lienQuestion {
  display: block;
  padding: 5px 8px;
  border-radius: 7px;
  font-size: 12.5px;
  line-height: 1.35;
  color: #8f97b8;
  text-decoration: none;
  transition: background .12s, color .12s;
}

a.qst-lienQuestion:hover {
  background: rgb(255 255 255 / 0.07);
  color: #fff;
}

.qst-lienQuestionActif {
  background: rgb(255 255 255 / 0.12);
  color: #fff;
  font-weight: 500;
}

.qst-lienQuestionInactif {
  color: #5d6488;
  opacity: .45;
  cursor: default;
}

.qst-erreurGenerale {
  margin: 0.6rem 0 0;
  padding: 0.7rem 0.95rem;
  border-radius: 10px;
  background: #faeceb;
  border: 1px solid #e5b8b3;
  color: #8c3128;
  font-size: 0.95rem;
  line-height: 1.5;
}

.qst-indiceChamp {
  margin: 7px 2px 0;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--color-alerte);
}

.qst-champRefuse {
  border-color: var(--color-alerte);
  background: var(--color-alerte-fond);
}

.qst-note {
  display: flex;
  gap: 12px;
  margin-top: 30px;
  padding: 16px 18px;
  border-radius: 12px;
  background: var(--color-page);
  border: 1px solid var(--color-bord-3);
  max-width: 620px;
}

.qst-pastilleNote {
  font-size: 13px;
  color: var(--color-pervenche);
  flex: 0 0 auto;
}

.qst-texteNote {
  font-size: 14px;
  color: var(--color-texte-2);
  line-height: 1.55;
}

.qst-actions {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 40px;
}

.qst-continuer {
  padding: 16px 30px;
  border: 0;
  border-radius: 12px;
  background: var(--color-nuit);
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.22s ease;
}

.qst-continuer:hover:not(:disabled) {
  background: var(--color-accent);
}

/* §5 : bouton désactivé sans curseur pointer. */
.qst-continuer:disabled {
  background: var(--color-bord);
  color: var(--color-texte-6);
  cursor: not-allowed;
}

.qst-indice {
  font-size: 13.5px;
  color: var(--color-texte-5);
}

/* ------------------------------------------------------------------- analyse */

.qst-analyse {
  position: relative;
  padding: 80px 34px;
  overflow: hidden;
}

.qst-bandeau {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 140px;
  background: linear-gradient(
    180deg,
    rgb(139 155 216 / 0),
    rgb(139 155 216 / 0.16),
    rgb(139 155 216 / 0)
  );
  animation: rl-scan-vertical 2.4s linear infinite;
}

@keyframes rl-scan-vertical {
  from {
    transform: translateY(-100%);
  }
  to {
    transform: translateY(500%);
  }
}

.qst-titreAnalyse {
  position: relative;
  font-family: var(--font-titre);
  font-size: 40px;
  font-weight: 200;
  color: var(--color-nuit);
}

.qst-lignesAnalyse {
  position: relative;
  display: flex;
  flex-direction: column;
  margin-top: 34px;
  max-width: 560px;
}

.qst-ligneAnalyse {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 15px 0;
  border-bottom: 1px solid var(--color-bord-4);
  opacity: 0.22;
  transition: opacity 0.4s ease;
}

.qst-ligneRevelee {
  opacity: 1;
}

.qst-texteLigne {
  font-size: 16px;
  color: var(--color-nuit);
}

.qst-marqueLigne {
  font-size: 13px;
  color: var(--color-succes-point);
}

/* ---------------------------------------------------------------- diagnostic */

.qst-diagnostic {
  padding: 52px 34px 44px;
}

.qst-intituleDiagnostic {
  font-size: 11.5px;
  letter-spacing: 0.18em;
  color: var(--color-texte-5);
}

.qst-titreDiagnostic {
  margin-top: 14px;
  font-family: var(--font-titre);
  font-weight: 200;
  font-size: 46px;
  line-height: 1.06;
  color: var(--color-nuit);
}

.qst-chiffres {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 32px;
  max-width: 900px;
}

.qst-chiffre {
  padding: 18px;
  border-radius: 12px;
  background: var(--color-page);
  border: 1px solid var(--color-bord-2);
}

.qst-chiffreHaut {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.qst-chiffreValeur {
  font-size: 26px;
  color: var(--color-nuit);
  font-weight: 500;
  line-height: 1;
}

.qst-chiffreTag {
  font-size: 12px;
}

.qst-chiffreLibelle {
  font-size: 13px;
  color: var(--color-texte-3);
  margin-top: 8px;
}

.qst-offerte {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 34px;
  padding: 20px 22px;
  border-radius: 13px;
  border: 1px solid var(--color-pervenche);
  background: var(--color-clair-2);
  max-width: 700px;
}

.qst-coche {
  width: 26px;
  height: 26px;
  border-radius: 9px;
  background: var(--color-nuit);
  color: #fff;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 26px;
}

.qst-offerteNom {
  font-size: 16px;
  color: var(--color-nuit);
  font-weight: 500;
}

.qst-offerteDetail {
  font-size: 13.5px;
  color: var(--color-texte-4);
  margin-top: 2px;
}

.qst-telecharger {
  padding: 12px 18px;
  border: 0;
  border-radius: 10px;
  background: var(--color-nuit);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.22s ease;
}

.qst-telecharger:hover {
  background: var(--color-accent);
}

.qst-piedDiagnostic {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 26px;
  flex-wrap: wrap;
}

.qst-rejouer {
  font-size: 14px;
  color: var(--color-texte-2);
  padding: 12px 20px;
  border-radius: 10px;
  border: 1px solid var(--color-bord);
  background: transparent;
  cursor: pointer;
  transition: all 0.2s ease;
}

.qst-rejouer:hover {
  border-color: var(--color-pervenche);
  color: var(--color-nuit);
}

.qst-verrouilles {
  font-size: 13.5px;
  color: var(--color-texte-5);
}

/* ------------------------------------------------------------------- mobile */

@media (max-width: 1100px) {
  .qst-page {
    padding: 0;
  }

  .qst-motMarque {
    font-size: 13px;
    letter-spacing: 0.28em;
  }

  .qst-cadre {
    border-radius: 0;
    box-shadow: none;
  }

  .qst-corps {
    grid-template-columns: 1fr;
  }

  /* Le rail des sections cède la place à la barre de progression sur mobile. */
  .qst-rail {
    display: none;
  }

  /* La mention de sauvegarde tient sur deux lignes à côté du logo et pousse
     l'entête : sur un téléphone, le numéro de suivi suffit. */
  .qst-barre {
    padding: 12px 16px;
  }

  .qst-sauvegarde {
    display: none;
  }

  .qst-barreProgression {
    padding: 12px 16px;
    gap: 12px;
  }

  .qst-etape {
    white-space: nowrap;
    font-size: 13px;
  }

  .qst-question {
    padding: 32px 20px 40px;
  }

  .qst-titreQuestion {
    font-size: 30px;
  }

  .qst-optionsUniques,
  .qst-champs {
    grid-template-columns: 1fr;
  }

  /* §5 : cibles tactiles ≥ 44 px. */
  .qst-optionUnique,
  .qst-optionMultiple {
    min-height: 52px;
  }

  .qst-continuer {
    width: 100%;
    min-height: 52px;
  }

  .qst-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .qst-chiffres {
    grid-template-columns: 1fr 1fr;
  }

  .qst-offerte {
    flex-wrap: wrap;
  }

  .qst-titreAnalyse,
  .qst-titreDiagnostic {
    font-size: 30px;
  }
}
/* ======================================================================
   diagnostic.module.css  —  préfixe .dia-
   ====================================================================== */
/* Diagnostic gratuit et paywall — d'après `RELAYA Diagnostic.dc.html`. */

.dia-page {
  padding: 22px;
  display: flex;
  background: var(--color-bord-2);
  min-height: 100vh;
}

.dia-cadre {
  display: flex;
  flex-direction: column;
  position: relative;
  width: 100%;
  max-width: 1760px;
  margin: 0 auto;
  border-radius: 22px;
  overflow: hidden;
  background: var(--color-page);
  box-shadow: var(--shadow-ecran);
}

.dia-entete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 16px 28px;
  background: #fff;
  border-bottom: 1px solid var(--color-bord);
}

.dia-marque {
  display: flex;
  align-items: center;
  gap: 12px;
}

.dia-motMarque {
  font-size: 15px;
  letter-spacing: 0.34em;
  color: var(--color-nuit);
  font-weight: 500;
}

.dia-infosEntete {
  display: flex;
  align-items: center;
  gap: 18px;
}

.dia-mentionEntete {
  font-size: 13px;
  color: var(--color-texte-4);
}

.dia-numeroSuivi {
  padding: 8px 14px;
  border-radius: 9px;
  background: var(--color-bord-3);
  font-size: 13px;
  color: var(--color-accent);
  font-weight: 600;
  white-space: nowrap;
}

/* --------------------------------------------------------------------- corps */

.dia-corps {
  display: grid;
  grid-template-columns: 288px 1fr;
  min-height: 900px;
  flex: 1;
}

.dia-rail {
  background: var(--color-nuit);
  padding: 26px 18px 22px;
  display: flex;
  flex-direction: column;
}

.dia-intituleRail {
  font-size: 11.5px;
  letter-spacing: 0.18em;
  color: var(--color-pervenche);
}

.dia-entrees {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 18px;
}

.dia-entree {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 11px 12px;
  border: 0;
  border-radius: 9px;
  font-size: 13.5px;
  cursor: pointer;
  color: #a7aec9;
  background: transparent;
  transition: all 0.2s ease;
  text-align: left;
  width: 100%;
}

.dia-entree:hover {
  background: rgb(255 255 255 / 0.09);
  color: #fff;
}

.dia-entreeActive {
  background: rgb(139 155 216 / 0.18);
  color: #fff;
}

.dia-badge {
  font-size: 11.5px;
  color: var(--color-pervenche);
}

.dia-encart {
  margin-top: 26px;
  padding: 16px 14px;
  border-radius: 11px;
  background: rgb(255 255 255 / 0.05);
}

.dia-encartTitre {
  font-size: 12.5px;
  color: var(--color-pervenche);
}

.dia-encartTexte {
  margin-top: 6px;
  font-size: 12.5px;
  color: #7c85a6;
  line-height: 1.5;
}

.dia-encartPiste {
  height: 3px;
  border-radius: 999px;
  background: rgb(255 255 255 / 0.12);
  margin-top: 10px;
  overflow: hidden;
}

.dia-debloquerRail {
  margin-top: auto;
  padding: 15px 16px;
  border: 0;
  border-radius: 11px;
  background: var(--color-pervenche);
  color: var(--color-nuit);
  font-size: 14px;
  font-weight: 600;
  text-align: center;
  cursor: pointer;
  transition: all 0.22s ease;
}

.dia-debloquerRail:hover {
  background: #fff;
}

/* ------------------------------------------------------------------ panneau */

.dia-panneau {
  background: #fff;
  min-width: 0;
}

.dia-titrePanneau {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 18px 30px;
  border-bottom: 1px solid var(--color-bord-3);
}

.dia-nomPanneau {
  font-size: 15px;
  color: var(--color-nuit);
  font-weight: 500;
}

.dia-etatPanneau {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: var(--color-texte-4);
}

.dia-pointEtat {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--color-succes-point);
}

.dia-contenu {
  padding: 34px 30px 40px;
}

.dia-titre {
  font-family: var(--font-titre);
  font-weight: 200;
  font-size: 46px;
  line-height: 1.04;
  letter-spacing: -0.026em;
  color: var(--color-nuit);
}

.dia-chapo {
  margin-top: 14px;
  font-size: 16.5px;
  color: var(--color-texte-2);
  max-width: 64ch;
  line-height: 1.55;
}

.dia-chiffres {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 30px;
}

.dia-chiffre {
  padding: 18px;
  border-radius: 13px;
  background: var(--color-page);
  border: 1px solid var(--color-bord-2);
  transition: all 0.22s ease;
}

.dia-chiffre:hover {
  background: #fff;
  border-color: var(--color-pervenche);
}

.dia-chiffreHaut {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.dia-chiffreValeur {
  font-size: 28px;
  color: var(--color-nuit);
  font-weight: 500;
  line-height: 1;
}

.dia-chiffreTag {
  font-size: 12px;
}

.dia-chiffreLibelle {
  font-size: 13.5px;
  color: var(--color-texte-3);
  margin-top: 8px;
}

/* ------------------------------------------------- proposition commerciale */
/* §4.3 : la vente vient AVANT la démarche offerte. Ne pas réinverser. */

.dia-vente {
  margin-top: 30px;
  border-radius: 15px;
  background: var(--color-nuit);
  overflow: hidden;
}

.dia-grilleVente {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
}

.dia-colonneSerenite {
  padding: 30px 28px;
}

.dia-enteteOffre {
  display: flex;
  align-items: center;
  gap: 11px;
  flex-wrap: wrap;
}

.dia-nomOffre {
  font-size: 11.5px;
  letter-spacing: 0.18em;
  color: var(--color-pervenche);
}

.dia-badgeRecommande {
  font-size: 10.5px;
  letter-spacing: 0.1em;
  padding: 4px 9px;
  border-radius: 6px;
  background: var(--color-pervenche);
  color: var(--color-nuit);
  font-weight: 600;
}

.dia-accrocheVente {
  margin-top: 18px;
  font-family: var(--font-titre);
  font-weight: 200;
  font-size: 38px;
  line-height: 1.06;
  color: #fff;
  max-width: 26ch;
}

.dia-avantagesVente {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 20px;
  margin-top: 22px;
  max-width: 620px;
}

.dia-avantageVente {
  display: flex;
  gap: 10px;
  font-size: 14.5px;
  color: var(--color-sur-nuit);
  line-height: 1.4;
}

.dia-coche {
  color: var(--color-pervenche);
  flex: 0 0 auto;
}

.dia-actionsVente {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 26px;
  flex-wrap: wrap;
}

.dia-ctaSerenite {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 26px;
  border: 0;
  border-radius: 12px;
  background: var(--color-pervenche);
  color: var(--color-nuit);
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.22s ease;
}

.dia-ctaSerenite:hover:not(:disabled) {
  background: #fff;
  transform: translateY(-2px);
}

.dia-ctaSerenite:disabled {
  opacity: 0.7;
  cursor: progress;
}

.dia-mentionVente {
  font-size: 13.5px;
  color: #7c85a6;
}

.dia-colonneEssentiel {
  padding: 30px 28px;
  background: rgb(255 255 255 / 0.04);
  border-left: 1px solid rgb(255 255 255 / 0.08);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.dia-promesseEssentiel {
  margin-top: 14px;
  font-size: 21px;
  color: #fff;
  line-height: 1.3;
}

.dia-detailEssentiel {
  margin-top: 10px;
  font-size: 14.5px;
  color: #aab2ce;
  line-height: 1.5;
}

.dia-prixEssentiel {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-top: 20px;
}

.dia-montant {
  font-family: var(--font-titre);
  font-size: 34px;
  font-weight: 200;
  color: #fff;
}

.dia-uniqueEssentiel {
  font-size: 13px;
  color: #7c85a6;
}

.dia-ctaEssentiel {
  margin-top: 20px;
  padding: 14px;
  border: 1px solid rgb(255 255 255 / 0.22);
  border-radius: 11px;
  background: transparent;
  color: #fff;
  text-align: center;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.22s ease;
}

.dia-ctaEssentiel:hover:not(:disabled) {
  border-color: var(--color-pervenche);
  background: rgb(255 255 255 / 0.06);
}

.dia-ctaEssentiel:disabled {
  opacity: 0.7;
  cursor: progress;
}

.dia-erreurPaiement {
  margin-top: 12px;
  font-size: 13.5px;
  color: #f0b3b0;
}

/* -------------------------------------------------------- démarche offerte */
/* §4.3 : carte neutre, bouton de téléchargement SECONDAIRE (bordé, pas plein). */

.dia-offerte {
  margin-top: 16px;
  border-radius: 15px;
  border: 1px solid var(--color-bord-2);
  overflow: hidden;
}

.dia-enteteOfferte {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 16px 22px;
  background: var(--color-page);
  border-bottom: 1px solid var(--color-bord-2);
}

.dia-intituleOfferte {
  font-size: 11.5px;
  letter-spacing: 0.16em;
  color: var(--color-accent);
}

.dia-etiquettePrete {
  font-size: 12px;
  padding: 5px 11px;
  border-radius: 7px;
  background: var(--color-nuit);
  color: #fff;
}

.dia-corpsOfferte {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
}

.dia-colonneOfferte {
  padding: 26px 22px;
}

.dia-titreOfferte {
  font-family: var(--font-titre);
  font-size: 29px;
  font-weight: 300;
  color: var(--color-nuit);
  line-height: 1.15;
}

.dia-checklist {
  display: flex;
  flex-direction: column;
  gap: 9px;
  margin-top: 20px;
}

.dia-elementChecklist {
  display: flex;
  align-items: center;
  gap: 11px;
  font-size: 15px;
}

.dia-pastilleChecklist {
  width: 19px;
  height: 19px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  flex: 0 0 19px;
}

.dia-telecharger {
  display: block;
  width: 100%;
  margin-top: 24px;
  padding: 15px 22px;
  border-radius: 11px;
  border: 1px solid var(--color-bord-pointille);
  background: transparent;
  color: var(--color-nuit);
  text-align: center;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.22s ease;
}

.dia-telecharger:hover {
  border-color: var(--color-pervenche);
  background: var(--color-page);
}

.dia-detailCourrier {
  padding: 26px 22px;
  background: var(--color-clair);
  border-left: 1px solid var(--color-bord-3);
}

.dia-intituleDetail {
  font-size: 11.5px;
  letter-spacing: 0.16em;
  color: var(--color-texte-5);
}

.dia-lignesDetail {
  display: flex;
  flex-direction: column;
  gap: 9px;
  margin-top: 16px;
}

.dia-ligneDetail {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  font-size: 13.5px;
  padding-bottom: 9px;
  border-bottom: 1px solid var(--color-bord-3);
}

.dia-cleDetail {
  color: var(--color-texte-4);
}

.dia-valeurDetail {
  color: var(--color-nuit);
  text-align: right;
}

/* ------------------------------------------------------------ listes verrouillées */

.dia-liste {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 20px;
}

.dia-element {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 15px 18px;
  border-radius: 12px;
  border: 1px solid var(--color-bord-2);
  background: #fff;
  transition: all 0.25s cubic-bezier(0.2, 0.7, 0.3, 1);
  text-align: left;
  width: 100%;
}

.dia-elementCliquable {
  cursor: pointer;
}

.dia-elementCliquable:hover {
  border-color: var(--color-pervenche);
  transform: translateY(-2px);
  box-shadow: var(--shadow-survol);
}

.dia-pastilleElement {
  width: 26px;
  height: 26px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  flex: 0 0 26px;
}

.dia-nomElement {
  font-size: 15px;
  color: var(--color-nuit);
  font-weight: 500;
}

.dia-descElement {
  font-size: 13px;
  color: var(--color-texte-4);
  margin-top: 3px;
}

.dia-metaElement {
  font-size: 12.5px;
  color: var(--color-texte-2);
  white-space: nowrap;
}

.dia-etiquetteElement {
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
}

.dia-prudence {
  margin-top: 20px;
  font-size: 13.5px;
  color: var(--color-texte-5);
  line-height: 1.55;
  max-width: 70ch;
}

/* ------------------------------------------------------------------ paywall */

/* La maquette plaçait le voile en `absolute` dans le cadre. En vrai, le cadre
   fait plus de 900 px : ouvrir le paywall depuis un élément verrouillé en bas
   de page centrait la modale hors de l'écran. `fixed` la cale sur la fenêtre. */
.dia-voile {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: rgb(14 18 38 / 0.55);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 56px;
}

.dia-modale {
  width: 1060px;
  max-width: 100%;
  max-height: 100%;
  overflow-y: auto;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 50px 100px -40px rgb(14 18 38 / 0.7);
}

.dia-enteteModale {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 30px;
  padding: 32px 34px 26px;
}

.dia-titreModale {
  font-family: var(--font-titre);
  font-weight: 200;
  font-size: 38px;
  line-height: 1.08;
  color: var(--color-nuit);
  max-width: 26ch;
}

.dia-pastilles {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 20px;
}

.dia-pastille {
  padding: 8px 14px;
  border-radius: 9px;
  background: var(--color-page);
  border: 1px solid var(--color-bord-3);
  font-size: 13.5px;
  color: var(--color-texte-3);
}

.dia-fermer {
  font-size: 20px;
  color: var(--color-texte-6);
  cursor: pointer;
  padding: 4px 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  transition: all 0.2s ease;
  flex: 0 0 auto;
}

.dia-fermer:hover {
  background: var(--color-bord-4);
  color: var(--color-nuit);
}

.dia-offresModale {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  padding: 0 34px 34px;
}

.dia-offreModale {
  padding: 26px 24px;
  border-radius: 15px;
  border: 1px solid var(--color-bord);
  background: #fff;
  box-sizing: border-box;
  transition: all 0.25s ease;
  display: flex;
  flex-direction: column;
}

.dia-offreModale:hover {
  border-color: var(--color-pervenche);
  transform: translateY(-3px);
}

.dia-offreModaleSombre {
  background: var(--color-nuit);
  border-color: var(--color-nuit);
}

.dia-hautOffreModale {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.dia-nomOffreModale {
  font-size: 12px;
  letter-spacing: 0.18em;
  color: var(--color-accent);
}

.dia-montantModale {
  font-family: var(--font-titre);
  font-size: 34px;
  font-weight: 200;
  color: var(--color-nuit);
}

.dia-promesseModale {
  margin-top: 16px;
  font-size: 19px;
  color: var(--color-nuit);
}

.dia-avantagesModale {
  display: flex;
  flex-direction: column;
  margin-top: 16px;
}

.dia-avantageModale {
  display: flex;
  gap: 11px;
  padding: 9px 0;
  border-top: 1px solid var(--color-bord-4);
  font-size: 14px;
  color: var(--color-texte);
}

.dia-avantageModaleSombre {
  border-top-color: rgb(255 255 255 / 0.09);
  color: var(--color-sur-nuit);
}

.dia-ctaModale {
  margin-top: auto;
  padding: 14px;
  border: 0;
  border-radius: 11px;
  background: var(--color-nuit);
  color: #fff;
  text-align: center;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.22s ease;
}

.dia-espaceCta {
  margin-top: 22px;
}

.dia-ctaModale:hover:not(:disabled) {
  background: var(--color-accent);
}

.dia-ctaModaleClair {
  background: var(--color-pervenche);
  color: var(--color-nuit);
}

.dia-ctaModaleClair:hover:not(:disabled) {
  background: #fff;
}

.dia-ctaModale:disabled {
  opacity: 0.7;
  cursor: progress;
}

.dia-piedModale {
  padding: 0 34px 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}

.dia-mentionModale {
  font-size: 13px;
  color: var(--color-texte-4);
}

.dia-plusTard {
  font-size: 13.5px;
  color: var(--color-texte-2);
  background: none;
  border: 0;
  cursor: pointer;
  font-weight: 600;
  padding: 0;
}

.dia-plusTard:hover {
  color: var(--color-nuit);
}

/* ------------------------------------------------------------------- mobile */


/* Bandeau de retard : ce qui presse, avant le reste de l'écran. */

.dia-bandeauRetard {
  display: flex;
  gap: 14px;
  margin: 26px 0 4px;
  padding: 18px 20px;
  border-radius: 13px;
  border-left: 3px solid;
}

.dia-pastilleRetard {
  flex: none;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
}

.dia-texteRetard {
  min-width: 0;
}

.dia-titreRetard {
  display: block;
  font-size: 15.5px;
  font-weight: 600;
  margin-bottom: 5px;
}

.dia-texteRetard p {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--color-texte-3);
}

.dia-listeRetard {
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 7px;
}

.dia-listeRetard li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding-top: 7px;
  border-top: 1px solid rgb(14 18 38 / 0.07);
  font-size: 13.5px;
  color: var(--color-texte-2);
}

@media (max-width: 1100px) {
  .dia-page {
    padding: 0;
  }

  .dia-motMarque {
    font-size: 13px;
    letter-spacing: 0.28em;
  }

  .dia-bandeauRetard {
    padding: 16px;
    margin: 20px 0 0;
  }

  .dia-listeRetard li {
    flex-direction: column;
    gap: 2px;
  }

  .dia-cadre {
    border-radius: 0;
    box-shadow: none;
  }

  .dia-corps {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .dia-rail {
    flex-direction: row;
    overflow-x: auto;
    gap: 6px;
    padding: 12px;
    align-items: center;
  }

  .dia-intituleRail,
  .dia-encart {
    display: none;
  }

  .dia-entrees {
    flex-direction: row;
    margin-top: 0;
    gap: 6px;
  }

  .dia-entree {
    width: auto;
    white-space: nowrap;
  }

  .dia-debloquerRail {
    margin-top: 0;
    margin-left: auto;
    white-space: nowrap;
    flex: 0 0 auto;
  }

  .dia-contenu {
    padding: 24px 20px 36px;
  }

  .dia-titre {
    font-size: 30px;
  }

  .dia-chiffres,
  .dia-grilleVente,
  .dia-corpsOfferte,
  .dia-avantagesVente,
  .dia-offresModale {
    grid-template-columns: 1fr;
  }

  .dia-colonneEssentiel {
    border-left: 0;
    border-top: 1px solid rgb(255 255 255 / 0.08);
  }

  .dia-detailCourrier {
    border-left: 0;
    border-top: 1px solid var(--color-bord-3);
  }

  .dia-accrocheVente,
  .dia-titreModale {
    font-size: 27px;
  }

  /* §5 : le paywall devient une feuille glissante sur mobile. */
  .dia-voile {
    padding: 0;
    align-items: flex-end;
  }

  .dia-modale {
    max-height: 92vh;
    border-radius: 20px 20px 0 0;
  }

  .dia-enteteModale,
  .dia-offresModale,
  .dia-piedModale {
    padding-left: 20px;
    padding-right: 20px;
  }

  .dia-ctaSerenite,
  .dia-ctaEssentiel,
  .dia-ctaModale,
  .dia-telecharger {
    min-height: 52px;
  }
}
/* ======================================================================
   espace.module.css  —  préfixe .esp-
   ====================================================================== */
/* Espace client — d'après `RELAYA Espace client.dc.html`. */

.esp-page {
  padding: 22px;
  display: flex;
  background: var(--color-bord-2);
  min-height: 100vh;
}

.esp-cadre {
  display: flex;
  flex-direction: column;
  position: relative;
  width: 100%;
  max-width: 1760px;
  margin: 0 auto;
  border-radius: 22px;
  overflow: hidden;
  background: var(--color-page);
  box-shadow: var(--shadow-ecran);
}

.esp-entete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 16px 28px;
  background: #fff;
  border-bottom: 1px solid var(--color-bord);
}

.esp-marque {
  display: flex;
  align-items: center;
  gap: 12px;
}

.esp-motMarque {
  font-size: 15px;
  letter-spacing: 0.34em;
  color: var(--color-nuit);
  font-weight: 500;
}

.esp-infosEntete {
  display: flex;
  align-items: center;
  gap: 18px;
}

.esp-offre {
  padding: 8px 14px;
  border-radius: 9px;
  background: var(--color-nuit);
  color: #fff;
  font-size: 12.5px;
  letter-spacing: 0.06em;
  font-weight: 600;
  white-space: nowrap;
}

.esp-numeroSuivi {
  padding: 8px 14px;
  border-radius: 9px;
  background: var(--color-bord-3);
  font-size: 13px;
  color: var(--color-accent);
  font-weight: 600;
  white-space: nowrap;
}

/* --------------------------------------------------------------------- corps */

.esp-corps {
  display: grid;
  grid-template-columns: 288px 1fr;
  min-height: 900px;
  flex: 1;
}

.esp-rail {
  background: var(--color-nuit);
  padding: 26px 18px 22px;
  display: flex;
  flex-direction: column;
}

.esp-intituleRail {
  font-size: 11.5px;
  letter-spacing: 0.18em;
  color: var(--color-pervenche);
}

.esp-entrees {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 18px;
}

.esp-entree {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 11px 12px;
  border: 0;
  border-radius: 9px;
  font-size: 13.5px;
  cursor: pointer;
  color: #a7aec9;
  background: transparent;
  transition: all 0.2s ease;
  text-align: left;
  width: 100%;
}

.esp-entree:hover {
  background: rgb(255 255 255 / 0.09);
  color: #fff;
}

.esp-entreeActive {
  background: rgb(139 155 216 / 0.18);
  color: #fff;
}

.esp-badge {
  font-size: 11.5px;
  color: var(--color-pervenche);
}

.esp-encart {
  margin-top: auto;
  padding: 16px 14px;
  border-radius: 11px;
  background: rgb(255 255 255 / 0.05);
}

.esp-encartTitre {
  font-size: 12.5px;
  color: var(--color-pervenche);
}

.esp-encartTexte {
  margin-top: 6px;
  font-size: 12.5px;
  color: #7c85a6;
  line-height: 1.5;
}

/* ------------------------------------------------------------------ panneau */

.esp-panneau {
  background: #fff;
  min-width: 0;
}

.esp-titrePanneau {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 18px 30px;
  border-bottom: 1px solid var(--color-bord-3);
}

.esp-nomPanneau {
  font-size: 15px;
  color: var(--color-nuit);
  font-weight: 500;
}

.esp-etatPanneau {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: var(--color-texte-4);
}

.esp-pointEtat {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--color-succes-point);
}

.esp-contenu {
  padding: 26px 30px 40px;
}

/* --------------------------------------------------------------- suivi (kanban) */

.esp-colonnes {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

.esp-colonne {
  min-width: 0;
}

.esp-enteteColonne {
  display: flex;
  align-items: center;
  gap: 9px;
  padding-bottom: 12px;
}

.esp-titreColonne {
  font-size: 13.5px;
  color: var(--color-nuit);
  font-weight: 600;
}

.esp-compteurColonne {
  font-size: 11.5px;
  padding: 3px 8px;
  border-radius: 6px;
  font-weight: 600;
}

.esp-cartes {
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.esp-carte {
  display: block;
  width: 100%;
  padding: 15px 16px;
  border-radius: 12px;
  border: 1px solid var(--color-bord-2);
  background: #fff;
  cursor: pointer;
  text-align: left;
  transition: all 0.25s cubic-bezier(0.2, 0.7, 0.3, 1);
}

.esp-carte:hover {
  border-color: var(--color-pervenche);
  transform: translateY(-3px);
  box-shadow: var(--shadow-survol);
}

.esp-orgCarte {
  font-size: 14.5px;
  color: var(--color-nuit);
  font-weight: 500;
}

.esp-descCarte {
  font-size: 12.5px;
  color: var(--color-texte-4);
  margin-top: 4px;
  line-height: 1.4;
}

.esp-piedCarte {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 12px;
  flex-wrap: wrap;
}

.esp-echeanceCarte {
  font-size: 12px;
}

.esp-etiquetteCarte {
  font-size: 11.5px;
  padding: 4px 9px;
  border-radius: 6px;
  font-weight: 600;
}

.esp-resteColonne {
  margin-top: 10px;
  font-size: 12.5px;
  color: var(--color-texte-5);
  text-align: center;
  padding: 10px;
  border-radius: 10px;
  border: 1px dashed var(--color-bord-pointille);
}

/* ------------------------------------------------------------------- coffre */

.esp-principeCoffre {
  font-family: var(--font-titre);
  font-weight: 200;
  font-size: 32px;
  line-height: 1.1;
  color: var(--color-nuit);
  max-width: 30ch;
}

.esp-chapo {
  margin-top: 12px;
  font-size: 15px;
  color: var(--color-texte-2);
  max-width: 64ch;
  line-height: 1.55;
}

.esp-grillePieces {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-top: 26px;
}

.esp-piece {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 18px;
  border-radius: 13px;
}

.esp-pieceDeposee {
  border: 1px solid var(--color-pervenche);
  background: var(--color-clair-2);
}

.esp-pieceManquante {
  border: 1px dashed #e9c6c3;
  background: #fdf7f6;
}

.esp-pieceOptionnelle {
  border: 1px dashed var(--color-bord-pointille);
  background: var(--color-clair);
}

.esp-pastillePiece {
  width: 26px;
  height: 26px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  flex: 0 0 26px;
  font-weight: 600;
}

.esp-nomPiece {
  font-size: 15px;
  color: var(--color-nuit);
  font-weight: 500;
}

.esp-etatPiece {
  font-size: 12.5px;
  margin-top: 4px;
}

.esp-usagePiece {
  font-size: 12.5px;
  color: var(--color-texte-4);
  margin-top: 3px;
}

/* ------------------------------------------------------------------- envois */

.esp-tableau {
  margin-top: 22px;
  border-radius: 13px;
  border: 1px solid var(--color-bord-2);
  overflow: hidden;
}

.esp-ligneEntete,
.esp-ligneEnvoi {
  display: grid;
  grid-template-columns: 1.3fr 1.4fr 1fr 130px 130px 110px;
  gap: 14px;
  align-items: center;
}

.esp-ligneEntete {
  padding: 12px 18px;
  background: var(--color-page);
  border-bottom: 1px solid var(--color-bord-2);
  font-size: 11.5px;
  letter-spacing: 0.06em;
  color: var(--color-texte-4);
}

.esp-ligneEnvoi {
  padding: 14px 18px;
  border-bottom: 1px solid var(--color-bord-4);
  transition: all 0.2s ease;
}

.esp-ligneEnvoi:hover {
  background: var(--color-clair-2);
}

.esp-orgEnvoi {
  font-size: 14.5px;
  color: var(--color-nuit);
  font-weight: 500;
}

.esp-celluleEnvoi {
  font-size: 13px;
  color: var(--color-texte-2);
}

.esp-statutEnvoi {
  font-size: 12.5px;
  padding: 5px 10px;
  border-radius: 7px;
  text-align: center;
  font-weight: 600;
}

.esp-preuve {
  padding: 7px 12px;
  border: 0;
  border-radius: 8px;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.esp-preuve:hover {
  filter: brightness(0.96);
}

.esp-rappelEnvois {
  margin-top: 18px;
  padding: 18px 20px;
  border-radius: 13px;
  background: var(--color-nuit);
}

.esp-rappelIntitule {
  font-size: 11.5px;
  letter-spacing: 0.18em;
  color: var(--color-pervenche);
}

.esp-rappelTexte {
  margin-top: 8px;
  font-size: 15px;
  color: #fff;
}

/* ------------------------------------------------------------------- droits */

.esp-droits {
  display: flex;
  flex-direction: column;
  gap: 9px;
  margin-top: 22px;
}

.esp-droit {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 18px;
  border-radius: 12px;
  border: 1px solid var(--color-bord-2);
  background: #fff;
}

.esp-nomDroit {
  font-size: 15px;
  color: var(--color-nuit);
  font-weight: 500;
}

.esp-orgDroit {
  font-size: 12.5px;
  color: var(--color-texte-4);
  margin-top: 3px;
}

.esp-etapeDroit {
  font-size: 13.5px;
  color: var(--color-texte-2);
  white-space: nowrap;
}

.esp-echeanceDroit {
  font-size: 12.5px;
  color: var(--color-texte-4);
  white-space: nowrap;
}

.esp-statutDroit {
  font-size: 11px;
  letter-spacing: 0.08em;
  padding: 5px 10px;
  border-radius: 7px;
  font-weight: 600;
  white-space: nowrap;
}

.esp-prudence {
  margin-top: 20px;
  font-size: 13.5px;
  color: var(--color-texte-5);
  line-height: 1.55;
  max-width: 70ch;
}

/* ------------------------------------------------------- panneau latéral */

.esp-voile {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: rgb(14 18 38 / 0.4);
  backdrop-filter: blur(3px);
  display: flex;
  justify-content: flex-end;
}

.esp-panneauLateral {
  width: 560px;
  max-width: 100%;
  background: #fff;
  height: 100%;
  overflow-y: auto;
  box-shadow: var(--shadow-panneau);
  display: flex;
  flex-direction: column;
}

.esp-entetePanneau {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding: 30px 30px 22px;
  border-bottom: 1px solid var(--color-bord-3);
}

.esp-tagPanneau {
  font-size: 11.5px;
  letter-spacing: 0.18em;
  color: var(--color-texte-5);
}

.esp-orgPanneau {
  margin-top: 10px;
  font-family: var(--font-titre);
  font-weight: 200;
  font-size: 32px;
  line-height: 1.1;
  color: var(--color-nuit);
}

.esp-descPanneau {
  margin-top: 8px;
  font-size: 14.5px;
  color: var(--color-texte-2);
}

.esp-fermer {
  font-size: 20px;
  color: var(--color-texte-6);
  cursor: pointer;
  padding: 4px 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  transition: all 0.2s ease;
  flex: 0 0 auto;
}

.esp-fermer:hover {
  background: var(--color-bord-4);
  color: var(--color-nuit);
}

.esp-corpsPanneau {
  padding: 24px 30px;
  flex: 1;
}

.esp-intitulePanneau {
  font-size: 11.5px;
  letter-spacing: 0.18em;
  color: var(--color-texte-5);
}

.esp-lignesPanneau {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 14px;
}

.esp-lignePanneau {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  font-size: 13.5px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--color-bord-3);
}

.esp-clePanneau {
  color: var(--color-texte-4);
  flex: 0 0 auto;
}

.esp-valeurPanneau {
  color: var(--color-nuit);
  text-align: right;
}

.esp-documentsPanneau {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 14px;
}

.esp-documentPanneau {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 15px;
  border-radius: 11px;
  border: 1px solid var(--color-bord-2);
  background: var(--color-clair);
}

.esp-nomDocument {
  font-size: 14px;
  color: var(--color-nuit);
  flex: 1;
}

.esp-etatDocument {
  font-size: 12.5px;
  white-space: nowrap;
}

.esp-apercuCourrier {
  margin-top: 24px;
  padding: 20px 22px;
  border-radius: 12px;
  background: var(--color-clair);
  border: 1px solid var(--color-bord-2);
  font-size: 13.5px;
  color: var(--color-texte);
  line-height: 1.8;
}

.esp-actionsPanneau {
  display: flex;
  gap: 10px;
  padding: 20px 30px 30px;
  border-top: 1px solid var(--color-bord-3);
}

.esp-actionPrincipale {
  flex: 1;
  padding: 15px;
  border: 0;
  border-radius: 11px;
  background: var(--color-nuit);
  color: #fff;
  text-align: center;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.22s ease;
}

.esp-actionPrincipale:hover {
  background: var(--color-accent);
}

.esp-actionSecondaire {
  padding: 15px 20px;
  border: 1px solid var(--color-bord);
  border-radius: 11px;
  background: transparent;
  color: var(--color-nuit);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.22s ease;
}

.esp-actionSecondaire:hover {
  border-color: var(--color-pervenche);
}

/* ------------------------------------------------------------------- mobile */


/* Bandeau de retard : ce qui presse, avant le reste de l'écran. */

.esp-bandeauRetard {
  display: flex;
  gap: 14px;
  margin: 26px 0 4px;
  padding: 18px 20px;
  border-radius: 13px;
  border-left: 3px solid;
}

.esp-pastilleRetard {
  flex: none;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
}

.esp-texteRetard {
  min-width: 0;
}

.esp-titreRetard {
  display: block;
  font-size: 15.5px;
  font-weight: 600;
  margin-bottom: 5px;
}

.esp-texteRetard p {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--color-texte-3);
}

.esp-listeRetard {
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 7px;
}

.esp-listeRetard li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding-top: 7px;
  border-top: 1px solid rgb(14 18 38 / 0.07);
  font-size: 13.5px;
  color: var(--color-texte-2);
}

@media (max-width: 1100px) {
  .esp-page {
    padding: 0;
  }

  .esp-motMarque {
    font-size: 13px;
    letter-spacing: 0.28em;
  }

  .esp-bandeauRetard {
    padding: 16px;
    margin: 20px 0 0;
  }

  .esp-listeRetard li {
    flex-direction: column;
    gap: 2px;
  }

  .esp-cadre {
    border-radius: 0;
    box-shadow: none;
  }

  .esp-corps {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .esp-rail {
    flex-direction: row;
    overflow-x: auto;
    gap: 6px;
    padding: 12px;
  }

  .esp-intituleRail,
  .esp-encart {
    display: none;
  }

  .esp-entrees {
    flex-direction: row;
    margin-top: 0;
    gap: 6px;
  }

  .esp-entree {
    width: auto;
    white-space: nowrap;
  }

  .esp-contenu {
    padding: 20px 16px 36px;
  }

  /* Les quatre colonnes deviennent une pile : une seule liste à parcourir. */
  .esp-colonnes,
  .esp-grillePieces {
    grid-template-columns: 1fr;
  }

  .esp-ligneEntete {
    display: none;
  }

  /* Les envois passent en cartes empilées, le tableau à six colonnes étant
     illisible en 390 px. */
  .esp-ligneEnvoi {
    grid-template-columns: 1fr auto;
    gap: 8px 12px;
    padding: 16px;
  }

  .esp-panneauLateral {
    width: 100%;
  }

  .esp-voile {
    align-items: flex-end;
  }

  .esp-actionsPanneau {
    flex-direction: column;
  }

  .esp-actionPrincipale,
  .esp-actionSecondaire {
    min-height: 52px;
  }

  .esp-principeCoffre {
    font-size: 24px;
  }
}
/* ======================================================================
   dossier.module.css  —  préfixe .dos-
   ====================================================================== */
/* Reprise de dossier et confirmation — d'après `RELAYA Reprise de dossier.dc.html`. */

.dos-page {
  padding: 22px;
  background: var(--color-bord-2);
  min-height: 100vh;
}

.dos-cadre {
  width: 100%;
  max-width: 1760px;
  margin: 0 auto;
  border-radius: 22px;
  overflow: hidden;
  background: var(--color-page);
  box-shadow: var(--shadow-ecran);
}

.dos-entete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 16px 28px;
  background: #fff;
  border-bottom: 1px solid var(--color-bord);
}

.dos-marque {
  display: flex;
  align-items: center;
  gap: 12px;
}

.dos-motMarque {
  font-size: 15px;
  letter-spacing: 0.34em;
  color: var(--color-nuit);
  font-weight: 500;
}

.dos-mentionEntete {
  font-size: 13px;
  color: var(--color-texte-4);
}

/* --------------------------------------------------------------------- corps */

.dos-corps {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  min-height: 760px;
}

.dos-colonneClaire {
  padding: 80px 56px;
  background: #fff;
}

.dos-colonneSombre {
  padding: 80px 48px;
  background: var(--color-nuit);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.dos-colonneGrise {
  padding: 60px 44px;
  background: var(--color-page);
  border-left: 1px solid var(--color-bord);
}

.dos-intitule {
  font-size: 11.5px;
  letter-spacing: 0.18em;
  color: var(--color-texte-5);
}

.dos-intituleSombre {
  font-size: 11.5px;
  letter-spacing: 0.18em;
  color: var(--color-pervenche);
}

.dos-titre {
  margin-top: 18px;
  font-family: var(--font-titre);
  font-weight: 200;
  font-size: 56px;
  line-height: 1.02;
  letter-spacing: -0.03em;
  color: var(--color-nuit);
  max-width: 20ch;
}

.dos-chapo {
  margin-top: 20px;
  font-size: 17px;
  color: var(--color-texte-2);
  line-height: 1.6;
  max-width: 52ch;
}

/* -------------------------------------------------------------- formulaire */

.dos-formulaire {
  display: flex;
  gap: 10px;
  margin-top: 34px;
  max-width: 520px;
}

.dos-champ {
  flex: 1;
  min-width: 0;
  padding: 18px 20px;
  border-radius: 12px;
  border: 1px solid var(--color-bord);
  background: var(--color-clair);
  font-size: 18px;
  letter-spacing: 0.06em;
  color: var(--color-nuit);
}

.dos-champErreur {
  border-color: var(--color-alerte);
}

.dos-acceder {
  padding: 18px 26px;
  border: 0;
  border-radius: 12px;
  background: var(--color-nuit);
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.22s ease;
}

.dos-acceder:hover:not(:disabled) {
  background: var(--color-accent);
}

.dos-acceder:disabled {
  background: var(--color-bord);
  color: var(--color-texte-6);
  cursor: not-allowed;
}

.dos-aide {
  margin-top: 12px;
  font-size: 13.5px;
  color: var(--color-texte-5);
}

.dos-erreur {
  margin-top: 12px;
  font-size: 13.5px;
  color: var(--color-alerte);
}

/* ------------------------------------------------------------------- état */

.dos-bloc {
  margin-top: 48px;
  padding-top: 30px;
  border-top: 1px solid var(--color-bord-3);
  max-width: 560px;
}

.dos-lignes {
  display: flex;
  flex-direction: column;
  gap: 9px;
  margin-top: 16px;
}

.dos-ligne {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 15px 18px;
  border-radius: 12px;
  background: var(--color-page);
  border: 1px solid var(--color-bord-2);
}

.dos-ligneLibelle {
  font-size: 15px;
  color: var(--color-nuit);
}

.dos-ligneValeur {
  font-size: 13.5px;
  color: var(--color-texte-2);
}

/* --------------------------------------------------------- démarches restantes */

.dos-restantes {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 22px;
}

.dos-restante {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 18px;
  border-radius: 12px;
  background: rgb(255 255 255 / 0.05);
  border: 1px solid rgb(255 255 255 / 0.08);
}

.dos-orgRestante {
  font-size: 15px;
  color: #fff;
}

.dos-descRestante {
  font-size: 12.5px;
  color: #8a93b4;
  margin-top: 3px;
}

.dos-delaiRestante {
  font-size: 12px;
  white-space: nowrap;
}

.dos-rassurance {
  margin-top: 24px;
  font-size: 13.5px;
  color: #7c85a6;
  line-height: 1.6;
}

/* ------------------------------------------------------------ confirmation */

.dos-pastilleSucces {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: var(--color-nuit);
  color: #fff;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.dos-titreConfirmation {
  margin-top: 26px;
  font-family: var(--font-titre);
  font-weight: 200;
  font-size: 54px;
  line-height: 1.02;
  letter-spacing: -0.03em;
  color: var(--color-nuit);
  max-width: 22ch;
}

.dos-actions {
  display: flex;
  gap: 12px;
  margin-top: 34px;
  flex-wrap: wrap;
}

.dos-actionPrincipale {
  padding: 17px 28px;
  border-radius: 12px;
  background: var(--color-nuit);
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  transition: all 0.22s ease;
}

.dos-actionPrincipale:hover {
  background: var(--color-accent);
  color: #fff;
}

.dos-actionSecondaire {
  padding: 17px 24px;
  border-radius: 12px;
  border: 1px solid var(--color-bord);
  background: transparent;
  color: var(--color-nuit);
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.22s ease;
}

.dos-actionSecondaire:hover {
  border-color: var(--color-pervenche);
}

.dos-encartSuivi {
  margin-top: 44px;
  padding: 22px 24px;
  border-radius: 14px;
  background: var(--color-page);
  border: 1px solid var(--color-bord-2);
  max-width: 560px;
}

.dos-texteSuivi {
  font-size: 13.5px;
  color: var(--color-texte-2);
  line-height: 1.6;
}

.dos-numeroSuivi {
  margin-top: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 16px;
  border-radius: 11px;
  background: #fff;
  border: 1px solid var(--color-bord);
}

.dos-valeurSuivi {
  font-size: 19px;
  letter-spacing: 0.1em;
  color: var(--color-nuit);
}

.dos-copier {
  font-size: 13.5px;
  color: var(--color-accent);
  cursor: pointer;
  font-weight: 600;
  background: none;
  border: 0;
  padding: 0;
}

.dos-copier:hover {
  color: var(--color-nuit);
}

/* --------------------------------------------------------------- prochaines */

.dos-etapes {
  display: flex;
  flex-direction: column;
  margin-top: 20px;
}

.dos-etape {
  display: flex;
  gap: 16px;
  padding: 18px 16px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid var(--color-bord-2);
  margin-bottom: 8px;
}

.dos-numeroEtape {
  width: 26px;
  height: 26px;
  border-radius: 9px;
  background: var(--color-bord-3);
  color: var(--color-accent);
  font-size: 12px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 26px;
}

.dos-titreEtape {
  font-size: 15.5px;
  color: var(--color-nuit);
  font-weight: 500;
}

.dos-detailEtape {
  font-size: 13.5px;
  color: var(--color-texte-4);
  margin-top: 4px;
  line-height: 1.5;
}

/* ------------------------------------------------------------------- mobile */

@media (max-width: 1100px) {
  .dos-page {
    padding: 0;
  }

  .dos-motMarque {
    font-size: 13px;
    letter-spacing: 0.28em;
  }

  .dos-marque {
    flex: none;
  }

  .dos-mentionEntete {
    min-width: 0;
    font-size: 12px;
    text-align: right;
  }

  .dos-cadre {
    border-radius: 0;
    box-shadow: none;
  }

  .dos-corps {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .dos-colonneClaire,
  .dos-colonneSombre,
  .dos-colonneGrise {
    padding: 40px 20px;
  }

  .dos-colonneGrise {
    border-left: 0;
    border-top: 1px solid var(--color-bord);
  }

  .dos-titre,
  .dos-titreConfirmation {
    font-size: 32px;
  }

  .dos-formulaire {
    flex-direction: column;
  }

  .dos-acceder,
  .dos-actionPrincipale,
  .dos-actionSecondaire {
    min-height: 52px;
    text-align: center;
  }

  .dos-actions {
    flex-direction: column;
    align-items: stretch;
  }
}
/* ======================================================================
   article.module.css  —  préfixe .gui-
   ====================================================================== */
/* Gabarit d'article SEO — d'après `RELAYA Page SEO capital deces.dc.html`. */

.gui-page {
  padding: 22px;
  background: var(--color-bord-2);
}

.gui-cadre {
  width: 100%;
  max-width: 1760px;
  margin: 0 auto;
  border-radius: 22px;
  overflow: hidden;
  background: #fff;
  box-shadow: var(--shadow-ecran);
}

.gui-entete {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 16px 28px;
  background: rgb(255 255 255 / 0.92);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--color-bord);
}

.gui-marque {
  display: flex;
  align-items: center;
  gap: 12px;
}

.gui-motMarque {
  font-size: 15px;
  letter-spacing: 0.34em;
  color: var(--color-nuit);
  font-weight: 500;
}

.gui-ctaEntete {
  padding: 11px 20px;
  border-radius: 10px;
  background: var(--color-nuit);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  transition: all 0.22s ease;
}

.gui-ctaEntete:hover {
  background: var(--color-accent);
  color: #fff;
}

/* --------------------------------------------------------------------- corps */

.gui-corps {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 56px;
  padding: 48px 56px 72px;
  align-items: start;
}

.gui-article {
  min-width: 0;
}

/* ------------------------------------------------------------- fil d'Ariane */

.gui-ariane {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--color-texte-4);
  flex-wrap: wrap;
}

.gui-lienAriane {
  color: var(--color-texte-4);
}

.gui-lienAriane:hover {
  color: var(--color-nuit);
}

.gui-titre {
  margin: 20px 0 0;
  font-family: var(--font-titre);
  font-weight: 200;
  font-size: 62px;
  line-height: 1.02;
  letter-spacing: -0.03em;
  color: var(--color-nuit);
}

/* -------------------------------------------------------- réponse directe */

.gui-reponse {
  margin-top: 34px;
  padding: 28px 30px;
  border-radius: 15px;
  border: 1px solid var(--color-pervenche);
  background: var(--color-clair-2);
}

.gui-intituleReponse {
  font-size: 11.5px;
  letter-spacing: 0.18em;
  color: var(--color-accent);
}

.gui-texteReponse {
  margin-top: 14px;
  font-size: 18px;
  line-height: 1.6;
  color: var(--color-nuit);
}

.gui-faits {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 24px;
}

.gui-fait {
  padding: 16px 18px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid var(--color-bord-2);
}

.gui-intituleFait {
  font-size: 10.5px;
  letter-spacing: 0.16em;
  color: var(--color-texte-5);
}

.gui-valeurFait {
  margin-top: 8px;
  font-size: 15px;
  color: var(--color-nuit);
  font-weight: 500;
  line-height: 1.35;
}

.gui-precisionFait {
  margin-top: 5px;
  font-size: 12.5px;
  color: var(--color-texte-4);
}

/* ---------------------------------------------------------------- sections */

.gui-section {
  margin-top: 52px;
  scroll-margin-top: 84px;
}

.gui-titreSection {
  margin: 0;
  font-family: var(--font-titre);
  font-weight: 200;
  font-size: 38px;
  line-height: 1.1;
  letter-spacing: -0.024em;
  color: var(--color-nuit);
}

.gui-deuxColonnes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 24px;
}

.gui-carteConditions {
  padding: 24px 26px;
  border-radius: 14px;
  border: 1px solid var(--color-bord-2);
  background: var(--color-page);
}

.gui-intituleCarte {
  font-size: 11.5px;
  letter-spacing: 0.16em;
  color: var(--color-texte-5);
}

.gui-listeConditions {
  list-style: none;
  padding: 0;
  margin: 16px 0 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.gui-condition {
  display: flex;
  gap: 11px;
  font-size: 14.5px;
  color: var(--color-texte);
  line-height: 1.5;
}

.gui-puce {
  color: var(--color-pervenche);
  flex: 0 0 auto;
}

/* ordre de priorité, sur fond bleu nuit */

.gui-ordre {
  margin-top: 16px;
  padding: 26px 28px;
  border-radius: 14px;
  background: var(--color-nuit);
}

.gui-intituleOrdre {
  font-size: 11.5px;
  letter-spacing: 0.18em;
  color: var(--color-pervenche);
}

.gui-rangs {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 18px;
}

.gui-rang {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 15px 18px;
  border-radius: 11px;
  background: rgb(255 255 255 / 0.05);
  border: 1px solid rgb(255 255 255 / 0.1);
  flex-wrap: wrap;
}

.gui-rangMisEnAvant {
  background: rgb(139 155 216 / 0.16);
  border-color: rgb(139 155 216 / 0.4);
}

.gui-numeroRang {
  font-size: 10.5px;
  letter-spacing: 0.14em;
  color: var(--color-pervenche);
  flex: 0 0 88px;
}

.gui-beneficiaire {
  font-size: 15px;
  color: #fff;
  flex: 1;
  min-width: 0;
}

.gui-precisionRang {
  font-size: 13px;
  color: #8a93b4;
}

/* frise des délais */

.gui-frise {
  display: flex;
  gap: 4px;
  margin-top: 24px;
}

.gui-segment {
  height: 12px;
  border-radius: 999px;
}

.gui-etapesFrise {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 18px;
}

.gui-etapeFrise {
  padding-top: 14px;
  border-top: 2px solid;
}

.gui-libelleEtape {
  font-size: 15px;
  color: var(--color-nuit);
  font-weight: 500;
}

.gui-descEtape {
  margin-top: 7px;
  font-size: 13.5px;
  color: var(--color-texte-3);
  line-height: 1.5;
}

/* tableau des documents */

.gui-tableau {
  margin-top: 24px;
  border-radius: 13px;
  border: 1px solid var(--color-bord-2);
  overflow: hidden;
  width: 100%;
  border-collapse: collapse;
}

.gui-tableau th {
  padding: 12px 18px;
  background: var(--color-page);
  border-bottom: 1px solid var(--color-bord-2);
  font-size: 11.5px;
  letter-spacing: 0.06em;
  color: var(--color-texte-4);
  text-align: left;
  font-weight: 400;
}

.gui-tableau td {
  padding: 14px 18px;
  border-bottom: 1px solid var(--color-bord-4);
  font-size: 14px;
  color: var(--color-texte);
}

.gui-tableau tr:last-child td {
  border-bottom: 0;
}

.gui-nomDocument {
  color: var(--color-nuit);
  font-weight: 500;
}

.gui-exigence {
  font-size: 12.5px;
  white-space: nowrap;
}

/* FAQ */

.gui-faq {
  display: flex;
  flex-direction: column;
  gap: 9px;
  margin-top: 24px;
}

.gui-question {
  border-radius: 12px;
  border: 1px solid var(--color-bord-2);
  background: #fff;
  overflow: hidden;
  transition: all 0.22s ease;
}

.gui-question[open] {
  border-color: var(--color-pervenche);
  background: var(--color-clair-2);
}

.gui-intituleQuestion {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 20px;
  font-size: 16px;
  color: var(--color-nuit);
  cursor: pointer;
  list-style: none;
  font-weight: 500;
}

/* Masque le marqueur natif de <summary> dans tous les moteurs. */
.gui-intituleQuestion::-webkit-details-marker {
  display: none;
}

.gui-signe {
  font-size: 18px;
  color: var(--color-pervenche);
  flex: 0 0 auto;
}

.gui-reponseQuestion {
  padding: 0 20px 20px;
  font-size: 14.5px;
  color: var(--color-texte);
  line-height: 1.65;
}

/* CTA diagnostic */

.gui-appel {
  margin-top: 52px;
  padding: 40px 44px;
  border-radius: 16px;
  background: var(--color-nuit);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
}

.gui-titreAppel {
  margin: 0;
  font-family: var(--font-titre);
  font-weight: 200;
  font-size: 34px;
  line-height: 1.1;
  color: #fff;
  max-width: 24ch;
}

.gui-detailAppel {
  margin-top: 12px;
  font-size: 14.5px;
  color: #8a93b4;
  max-width: 40ch;
  line-height: 1.55;
}

.gui-ctaAppel {
  padding: 17px 30px;
  border-radius: 12px;
  background: var(--color-pervenche);
  color: var(--color-nuit);
  font-size: 16px;
  font-weight: 600;
  white-space: nowrap;
  transition: all 0.22s ease;
}

.gui-ctaAppel:hover {
  background: #fff;
  color: var(--color-nuit);
}

/* pages liées */

.gui-liees {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 24px;
}

.gui-pageLiee {
  display: block;
  padding: 18px 20px;
  border-radius: 12px;
  border: 1px solid var(--color-bord-2);
  background: #fff;
  transition: all 0.25s cubic-bezier(0.2, 0.7, 0.3, 1);
}

.gui-pageLieeCliquable:hover {
  border-color: var(--color-pervenche);
  transform: translateY(-3px);
  box-shadow: var(--shadow-survol);
}

/* Un article non encore écrit ne doit pas être un lien mort. */
.gui-pageLieeAVenir {
  background: var(--color-page);
  opacity: 0.75;
}

.gui-titreLiee {
  font-size: 15.5px;
  color: var(--color-nuit);
  font-weight: 500;
}

.gui-descLiee {
  margin-top: 5px;
  font-size: 13px;
  color: var(--color-texte-4);
}

.gui-aVenir {
  margin-top: 8px;
  font-size: 11.5px;
  letter-spacing: 0.1em;
  color: var(--color-texte-5);
}

/* ---------------------------------------------------------- colonne latérale */

.gui-colonne {
  position: sticky;
  top: 84px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.gui-carteColonne {
  padding: 22px 24px;
  border-radius: 14px;
  border: 1px solid var(--color-bord-2);
  background: var(--color-page);
}

.gui-intituleColonne {
  font-size: 11.5px;
  letter-spacing: 0.18em;
  color: var(--color-texte-5);
}

.gui-sommaire {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 14px;
}

.gui-lienSommaire {
  padding: 9px 11px;
  border-radius: 9px;
  font-size: 14px;
  color: var(--color-texte-2);
  transition: all 0.2s ease;
}

.gui-lienSommaire:hover {
  background: #fff;
  color: var(--color-nuit);
}

.gui-verification {
  display: flex;
  flex-direction: column;
  gap: 9px;
  margin-top: 14px;
}

.gui-questionVerif {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 12px 14px;
  border-radius: 10px;
  background: #fff;
  border: 1px solid var(--color-bord-2);
  font-size: 13.5px;
  color: var(--color-nuit);
}

.gui-pastilleVerif {
  width: 17px;
  height: 17px;
  border-radius: 5px;
  background: var(--color-bord-3);
  color: var(--color-accent);
  font-size: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 17px;
}

.gui-ctaColonne {
  display: block;
  margin-top: 16px;
  padding: 14px;
  border-radius: 11px;
  background: var(--color-nuit);
  color: #fff;
  text-align: center;
  font-size: 14.5px;
  font-weight: 600;
  transition: all 0.22s ease;
}

.gui-ctaColonne:hover {
  background: var(--color-accent);
  color: #fff;
}

/* §28 : mention d'indépendance obligatoire. */
.gui-independance {
  font-size: 12.5px;
  color: var(--color-texte-4);
  line-height: 1.6;
}

/* ---------------------------------------------------------------- pied de page */

.gui-pied {
  padding: 40px 56px;
  background: var(--color-nuit);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
}

.gui-mentionPied {
  font-size: 12.5px;
  color: #6e769b;
}

/* ------------------------------------------------------------------- mobile */

@media (max-width: 1100px) {
  .gui-page {
    padding: 0;
  }

  .gui-motMarque {
    font-size: 13px;
    letter-spacing: 0.28em;
  }

  .gui-marque {
    flex: none;
  }

  .gui-mentionEntete {
    min-width: 0;
    font-size: 12px;
    text-align: right;
  }

  .gui-cadre {
    border-radius: 0;
    box-shadow: none;
  }

  .gui-corps {
    grid-template-columns: 1fr;
    gap: 32px;
    padding: 28px 20px 48px;
  }

  /* Le sommaire collant n'a pas de sens sur mobile : il passe sous l'article. */
  .gui-colonne {
    position: static;
  }

  .gui-titre {
    font-size: 34px;
  }

  .gui-titreSection,
  .gui-titreAppel {
    font-size: 26px;
  }

  .gui-faits,
  .gui-deuxColonnes,
  .gui-etapesFrise,
  .gui-liees {
    grid-template-columns: 1fr;
  }

  .gui-texteReponse {
    font-size: 16px;
  }

  /* Le tableau des documents déborde en 390 px : on le fait défiler seul. */
  .gui-enveloppeTableau {
    overflow-x: auto;
  }

  .gui-tableau {
    min-width: 520px;
  }

  .gui-pied {
    padding: 28px 20px;
  }

  .gui-ctaAppel,
  .gui-ctaColonne {
    display: block;
    text-align: center;
    min-height: 52px;
    box-sizing: border-box;
  }
}
/* ======================================================================
   console.module.css  —  préfixe .adm-
   ====================================================================== */
/* Console interne — valeurs reprises de `RELAYA Back-office.dc.html`.
   Les états de survol que la maquette déclarait en `style-hover` (non
   interprété par son moteur de rendu) sont ici de vraies règles `:hover`. */

.adm-page {
  padding: 22px;
  display: flex;
  background: var(--color-bord-2);
  min-height: 100vh;
}

.adm-cadre {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 1760px;
  margin: 0 auto;
  border-radius: 20px;
  overflow: hidden;
  background: var(--color-page);
  box-shadow: var(--shadow-ecran);
}

/* ---------------------------------------------------------------- barre haute */

.adm-barre {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 14px 24px;
  background: var(--color-nuit);
}

.adm-marque {
  display: flex;
  align-items: center;
  gap: 22px;
}

.adm-logo {
  display: flex;
  align-items: center;
  gap: 10px;
}

.adm-motMarque {
  font-size: 13px;
  letter-spacing: 0.32em;
  color: #fff;
}

.adm-sousTitre {
  font-size: 12px;
  letter-spacing: 0.16em;
  color: var(--color-pervenche);
}

.adm-onglets {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px;
  border-radius: 10px;
  background: rgb(255 255 255 / 0.07);
}

.adm-onglet {
  padding: 8px 15px;
  border: 0;
  border-radius: 7px;
  font-size: 13px;
  cursor: pointer;
  color: #a7aec9;
  background: transparent;
  transition: all 0.2s ease;
}

.adm-onglet:hover {
  color: #fff;
}

.adm-ongletActif,
.adm-ongletActif:hover {
  color: var(--color-nuit);
  background: #fff;
}

.adm-meta {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 12.5px;
  color: #8a93b4;
}

/* ------------------------------------------------------------------- communs */

.adm-entete {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 30px;
}

.adm-titre {
  font-family: var(--font-titre);
  font-weight: 200;
  font-size: 36px;
  line-height: 1.06;
  color: var(--color-nuit);
}

.adm-chapo {
  margin-top: 8px;
  font-size: 14.5px;
  color: var(--color-texte-2);
}

.adm-actions {
  display: flex;
  gap: 8px;
}

.adm-boutonSecondaire {
  padding: 11px 18px;
  border-radius: 9px;
  border: 1px solid var(--color-bord);
  background: transparent;
  font-size: 13.5px;
  color: var(--color-nuit);
  cursor: pointer;
  transition: all 0.2s ease;
}

.adm-boutonSecondaire:hover {
  border-color: var(--color-pervenche);
}

.adm-boutonPrincipal {
  padding: 11px 18px;
  border: 0;
  border-radius: 9px;
  background: var(--color-nuit);
  color: #fff;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.adm-boutonPrincipal:hover {
  background: var(--color-accent);
}

.adm-legende {
  margin-top: 14px;
  font-size: 12.5px;
  color: var(--color-texte-5);
  line-height: 1.55;
}

.adm-intitule {
  font-size: 11.5px;
  letter-spacing: 0.18em;
  color: var(--color-texte-5);
}

/* -------------------------------------------------------------------- règles */

.adm-grilleRegles {
  display: grid;
  grid-template-columns: 1fr 520px;
  min-height: 900px;
}

.adm-colonnePrincipale {
  padding: 26px 26px 40px;
  background: #fff;
  min-width: 0;
}

.adm-barreRecherche {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 22px;
}

.adm-champRecherche {
  flex: 1;
  padding: 13px 16px;
  border-radius: 10px;
  border: 1px solid var(--color-bord);
  background: var(--color-clair);
  font-size: 14.5px;
  color: var(--color-nuit);
}

.adm-filtre {
  padding: 11px 15px;
  border-radius: 9px;
  font-size: 13px;
  cursor: pointer;
  border: 1px solid var(--color-bord);
  background: #fff;
  color: #6b7391;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.adm-filtre:hover {
  border-color: var(--color-pervenche);
}

.adm-filtreActif {
  border-color: #5c6fbf;
  background: var(--color-page);
  color: var(--color-nuit);
}

.adm-tableau {
  margin-top: 18px;
  border-radius: 12px;
  border: 1px solid var(--color-bord-2);
  overflow: hidden;
}

.adm-ligneEntete,
.adm-ligneRegle {
  display: grid;
  grid-template-columns: 130px 1.5fr 1fr 90px 110px 90px;
  gap: 14px;
}

.adm-ligneEntete {
  padding: 12px 18px;
  background: var(--color-page);
  border-bottom: 1px solid var(--color-bord-2);
  font-size: 11.5px;
  letter-spacing: 0.06em;
  color: var(--color-texte-4);
}

.adm-ligneRegle {
  width: 100%;
  align-items: center;
  padding: 13px 18px;
  border: 0;
  border-bottom: 1px solid var(--color-bord-4);
  background: #fff;
  text-align: left;
  cursor: pointer;
  transition: all 0.2s ease;
}

.adm-ligneRegle:hover {
  background: var(--color-clair-2);
}

.adm-ligneSelectionnee,
.adm-ligneSelectionnee:hover {
  background: var(--color-page);
}

.adm-identifiant {
  font-size: 12px;
  color: var(--color-texte-4);
  font-family: var(--font-mono);
  line-height: 1.35;
}

.adm-nomRegle {
  font-size: 14px;
  color: var(--color-nuit);
  font-weight: 500;
}

.adm-conditionRegle {
  font-size: 12px;
  color: var(--color-texte-6);
  margin-top: 2px;
}

.adm-celluleTexte {
  font-size: 13px;
  color: var(--color-texte-2);
}

.adm-celluleDelai {
  font-size: 12.5px;
  color: var(--color-texte-2);
}

.adm-etat {
  font-size: 11.5px;
  padding: 4px 9px;
  border-radius: 6px;
  text-align: center;
}

.adm-aucunResultat {
  padding: 28px 18px;
  font-size: 13.5px;
  color: var(--color-texte-4);
  background: #fff;
}

/* --------------------------------------------------------- éditeur de règle */

.adm-editeur {
  padding: 26px 26px 40px;
  background: var(--color-page);
  border-left: 1px solid var(--color-bord);
  min-width: 0;
}

.adm-titreEditeur {
  margin-top: 12px;
  font-family: var(--font-titre);
  font-weight: 200;
  font-size: 30px;
  line-height: 1.1;
  color: var(--color-nuit);
}

.adm-idEditeur {
  margin-top: 8px;
  font-size: 12.5px;
  color: var(--color-texte-4);
  font-family: var(--font-mono);
}

.adm-blocConditions {
  margin-top: 22px;
  padding: 20px;
  border-radius: 12px;
  background: var(--color-nuit);
}

.adm-intituleSombre {
  font-size: 11.5px;
  letter-spacing: 0.16em;
  color: var(--color-pervenche);
}

.adm-listeConditions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 14px;
}

.adm-condition {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 9px;
  background: rgb(255 255 255 / 0.05);
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--color-sur-nuit);
  overflow-wrap: anywhere;
}

.adm-operateur {
  color: var(--color-pervenche);
  flex: 0 0 auto;
}

.adm-consequence {
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: 9px;
  background: rgb(139 155 216 / 0.14);
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: #fff;
  overflow-wrap: anywhere;
}

.adm-attributs {
  display: flex;
  flex-direction: column;
  gap: 9px;
  margin-top: 18px;
}

.adm-attribut {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 13px 16px;
  border-radius: 11px;
  background: #fff;
  border: 1px solid var(--color-bord-2);
}

.adm-attributCle {
  font-size: 13px;
  color: var(--color-texte-4);
  flex: 0 0 auto;
}

.adm-attributValeur {
  font-size: 13.5px;
  color: var(--color-nuit);
  text-align: right;
}

.adm-actionsEditeur {
  display: flex;
  gap: 9px;
  margin-top: 20px;
}

.adm-boutonEnregistrer {
  flex: 1;
  padding: 14px;
  border: 0;
  border-radius: 11px;
  background: var(--color-nuit);
  color: #fff;
  text-align: center;
  font-size: 14.5px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.adm-boutonEnregistrer:hover {
  background: var(--color-accent);
}

.adm-boutonTester {
  padding: 14px 18px;
  border-radius: 11px;
  border: 1px solid var(--color-bord);
  background: transparent;
  color: var(--color-nuit);
  font-size: 14.5px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.adm-boutonTester:hover {
  border-color: var(--color-pervenche);
}

/* ---------------------------------------------------------------- organismes */

.adm-panneau {
  padding: 26px 26px 40px;
  background: #fff;
  min-height: 900px;
}

.adm-indicateurs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-top: 22px;
}

.adm-indicateur {
  padding: 18px;
  border-radius: 12px;
  background: var(--color-page);
  border: 1px solid var(--color-bord-2);
}

.adm-indicateurValeur {
  font-size: 24px;
  color: var(--color-nuit);
  font-weight: 500;
  line-height: 1;
}

.adm-indicateurLibelle {
  font-size: 13px;
  color: var(--color-texte-3);
  margin-top: 8px;
}

.adm-ligneEnteteOrg,
.adm-ligneOrg {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1.4fr 1fr 130px 120px;
  gap: 14px;
}

.adm-ligneEnteteOrg {
  padding: 12px 18px;
  background: var(--color-page);
  border-bottom: 1px solid var(--color-bord-2);
  font-size: 11.5px;
  letter-spacing: 0.06em;
  color: var(--color-texte-4);
}

.adm-ligneOrg {
  align-items: center;
  padding: 13px 18px;
  border-bottom: 1px solid var(--color-bord-4);
  transition: all 0.2s ease;
}

.adm-ligneOrg:hover {
  background: var(--color-clair-2);
}

.adm-nomOrg {
  font-size: 14px;
  color: var(--color-nuit);
  font-weight: 500;
}

.adm-adresseOrg {
  font-size: 12.5px;
  color: var(--color-texte-2);
  line-height: 1.4;
}

/* ------------------------------------------------------------------ courriers */

.adm-grilleCourriers {
  display: grid;
  grid-template-columns: 280px 1fr 480px;
  min-height: 900px;
}

.adm-listeModeles {
  padding: 22px 16px;
  background: var(--color-page);
  border-right: 1px solid var(--color-bord);
}

.adm-modeles {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 14px;
}

.adm-modele {
  width: 100%;
  padding: 12px 14px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  text-align: left;
  cursor: pointer;
  transition: all 0.2s ease;
}

.adm-modele:hover {
  background: #fff;
}

.adm-modeleActif {
  background: #fff;
}

.adm-nomModele {
  font-size: 13.5px;
  color: var(--color-nuit);
  font-weight: 500;
}

.adm-metaModele {
  font-size: 11.5px;
  color: var(--color-texte-4);
  margin-top: 3px;
}

.adm-corpsModele {
  margin-top: 22px;
  padding: 26px 28px;
  border-radius: 12px;
  border: 1px solid var(--color-bord-2);
  background: var(--color-clair);
  font-size: 14.5px;
  color: var(--color-texte);
  line-height: 1.9;
}

.adm-paragrapheModele {
  margin-bottom: 12px;
  white-space: pre-wrap;
}

.adm-variables {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

.adm-variable {
  padding: 8px 13px;
  border: 0;
  border-radius: 8px;
  background: var(--color-bord-3);
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--color-accent);
  cursor: pointer;
  transition: all 0.2s ease;
}

.adm-variable:hover {
  background: var(--color-nuit);
  color: #fff;
}

.adm-colonneApercu {
  padding: 26px;
  background: var(--color-page);
  border-left: 1px solid var(--color-bord);
  min-width: 0;
}

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

.adm-lienApercu {
  font-size: 12px;
  color: var(--color-accent);
  cursor: pointer;
  font-weight: 600;
  background: none;
  border: 0;
  padding: 0;
}

.adm-apercu {
  margin-top: 14px;
  padding: 28px 26px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid var(--color-bord);
  box-shadow: 0 20px 40px -30px rgb(14 18 38 / 0.3);
  font-size: 13.5px;
  color: var(--color-texte);
  line-height: 1.85;
}

.adm-paragrapheApercu {
  margin-bottom: 11px;
  white-space: pre-wrap;
}

.adm-controles {
  display: flex;
  flex-direction: column;
  gap: 9px;
  margin-top: 18px;
}

.adm-controle {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 12px 14px;
  border-radius: 10px;
  background: #fff;
  border: 1px solid var(--color-bord-2);
  font-size: 13.5px;
  color: var(--color-nuit);
}

.adm-pastilleControle {
  width: 17px;
  height: 17px;
  border-radius: 5px;
  font-size: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 17px;
}

.adm-pastilleOk {
  background: var(--color-nuit);
  color: #fff;
}

.adm-pastilleAlerte {
  background: var(--color-alerte-fond);
  color: var(--color-alerte);
}

.adm-actionsApercu {
  display: flex;
  gap: 9px;
  margin-top: 18px;
}

.adm-boutonApercu {
  flex: 1;
  padding: 13px;
  border-radius: 10px;
  border: 1px solid var(--color-bord);
  background: #fff;
  text-align: center;
  font-size: 13.5px;
  color: var(--color-nuit);
  cursor: pointer;
  transition: all 0.2s ease;
}

.adm-boutonApercu:hover {
  border-color: var(--color-pervenche);
}

.adm-boutonApercu:disabled {
  background: var(--color-bord);
  color: var(--color-texte-6);
  cursor: not-allowed;
  border-color: var(--color-bord);
}

/* ------------------------------------------------------------------ pilotage */

.adm-grillePilotage {
  display: grid;
  grid-template-columns: 1.25fr 0.75fr;
  gap: 16px;
  margin-top: 26px;
}

.adm-carteClaire {
  padding: 26px 24px;
  border-radius: 13px;
  border: 1px solid var(--color-bord-2);
  background: var(--color-page);
}

.adm-colonnePilotage {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.adm-carteSombre {
  padding: 24px 22px;
  border-radius: 13px;
  background: var(--color-nuit);
}

.adm-entonnoir {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 22px;
}

.adm-etapeEntonnoir {
  display: grid;
  grid-template-columns: 210px 1fr 90px 70px;
  gap: 14px;
  align-items: center;
}

.adm-libelleEtape {
  font-size: 13.5px;
  color: var(--color-texte);
}

.adm-piste {
  height: 12px;
  border-radius: 999px;
  background: var(--color-bord-3);
  overflow: hidden;
}

.adm-remplissage {
  height: 100%;
  border-radius: 999px;
}

.adm-valeurEtape {
  font-size: 13px;
  color: var(--color-nuit);
  text-align: right;
}

.adm-pourcentEtape {
  font-size: 12px;
  color: var(--color-texte-4);
  text-align: right;
}

.adm-abandons {
  display: flex;
  flex-direction: column;
  gap: 11px;
  margin-top: 18px;
}

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

.adm-questionAbandon {
  font-size: 13.5px;
  color: var(--color-sur-nuit);
  flex: 1;
}

.adm-pisteSombre {
  width: 90px;
  height: 6px;
  border-radius: 999px;
  background: rgb(255 255 255 / 0.12);
  overflow: hidden;
  flex: 0 0 90px;
}

.adm-pourcentAbandon {
  font-size: 12.5px;
  color: var(--color-pervenche);
  width: 38px;
  text-align: right;
}

.adm-versions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 16px;
}

.adm-version {
  padding: 15px 16px;
  border-radius: 11px;
  background: #fff;
  border: 1px solid var(--color-bord-2);
}

.adm-versionRecommandee {
  border-color: var(--color-pervenche);
}

.adm-enteteVersion {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.adm-nomVersion {
  font-size: 13.5px;
  color: var(--color-nuit);
  font-weight: 500;
}

.adm-cibleVersion {
  font-size: 12px;
  color: var(--color-texte-4);
}

.adm-mesuresVersion {
  display: flex;
  gap: 18px;
  margin-top: 12px;
}

.adm-mesureValeur {
  font-size: 17px;
  color: var(--color-nuit);
}

.adm-mesureCle {
  font-size: 11.5px;
  color: var(--color-texte-4);
  margin-top: 3px;
}
@media (max-width: 1100px) {
  .adm-page {
    padding: 0;
  }

  .adm-cadre {
    border-radius: 0;
    box-shadow: none;
  }

  /* La barre du haut porte la marque, les onglets et le compte : sur un
     téléphone elle s'empile, et la rangée d'onglets défile horizontalement
     plutôt que d'écraser les libellés. */
  .adm-barre {
    flex-wrap: wrap;
    gap: 12px;
    padding: 12px 16px;
  }

  .adm-motMarque {
    font-size: 13px;
    letter-spacing: 0.28em;
  }

  .adm-onglets {
    order: 3;
    width: 100%;
    overflow-x: auto;
    justify-content: flex-start;
  }

  .adm-onglet {
    white-space: nowrap;
  }

  .adm-colonnePrincipale,
  .adm-colonneApercu,
  .adm-colonnePilotage {
    padding-left: 16px;
    padding-right: 16px;
  }

  /* Les deux volets ne tiennent plus côte à côte : le second passe dessous et
     perd sa hauteur imposée. */
  .adm-grilleRegles,
  .adm-grilleCourriers,
  .adm-grillePilotage {
    min-height: 0;
  }

  .adm-entete {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
  }

  .adm-titre {
    font-size: 28px;
  }

  /* Les listes à deux volets se lisent l'une sous l'autre. */
  .adm-grilleRegles,
  .adm-grilleCourriers,
  .adm-grillePilotage {
    grid-template-columns: 1fr;
  }

  .adm-indicateurs {
    grid-template-columns: 1fr 1fr;
  }

  /* Les tableaux gardent leurs colonnes et défilent : les replier en cartes
     rendrait la comparaison ligne à ligne impossible, ce qui est justement
     l'usage de cette console. */
  .adm-tableau {
    overflow-x: auto;
  }

  .adm-ligneEntete,
  .adm-ligneRegle,
  .adm-ligneOrg,
  .adm-etapeEntonnoir {
    min-width: 720px;
  }

  .adm-barreRecherche {
    flex-wrap: wrap;
  }
}
/* ======================================================================
   connexion.module.css  —  préfixe .cnx-
   ====================================================================== */
/* Écran de connexion à la console interne. */

.cnx-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  background: var(--color-nuit);
}

.cnx-carte {
  width: 100%;
  max-width: 420px;
  padding: 40px 38px;
  border-radius: 18px;
  background: #fff;
  box-shadow: var(--shadow-ecran);
}

.cnx-marque {
  display: flex;
  align-items: center;
  gap: 11px;
}

.cnx-motMarque {
  font-size: 14px;
  letter-spacing: 0.32em;
  color: var(--color-nuit);
  font-weight: 500;
}

.cnx-titre {
  margin-top: 26px;
  font-family: var(--font-titre);
  font-weight: 200;
  font-size: 32px;
  line-height: 1.1;
  color: var(--color-nuit);
}

.cnx-chapo {
  margin-top: 10px;
  font-size: 14.5px;
  color: var(--color-texte-2);
  line-height: 1.55;
}

.cnx-libelle {
  display: block;
  margin-top: 26px;
  font-size: 13px;
  color: var(--color-texte-3);
}

.cnx-champ {
  margin-top: 8px;
  width: 100%;
  box-sizing: border-box;
  padding: 15px 16px;
  border-radius: 11px;
  border: 1px solid var(--color-bord);
  background: var(--color-clair);
  font-size: 16px;
  color: var(--color-nuit);
}

.cnx-champErreur {
  border-color: var(--color-alerte);
}

.cnx-bouton {
  width: 100%;
  margin-top: 20px;
  padding: 15px;
  border: 0;
  border-radius: 11px;
  background: var(--color-nuit);
  color: #fff;
  font-size: 15.5px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.22s ease;
}

.cnx-bouton:hover:not(:disabled) {
  background: var(--color-accent);
}

.cnx-bouton:disabled {
  background: var(--color-bord);
  color: var(--color-texte-6);
  cursor: not-allowed;
}

.cnx-erreur {
  margin-top: 14px;
  font-size: 13.5px;
  color: var(--color-alerte);
  line-height: 1.5;
}

.cnx-mention {
  margin-top: 26px;
  padding-top: 20px;
  border-top: 1px solid var(--color-bord-3);
  font-size: 12.5px;
  color: var(--color-texte-4);
  line-height: 1.6;
}
.dia-mentionRetractation {
  display: block;
  margin-top: 0.55rem;
  font-size: 0.78rem;
  line-height: 1.5;
  color: #8A90A6;
  max-width: 52ch;
}

/* ============================================================
   Couche téléphone (≤ 640 px).
   Le site n'avait qu'un point de rupture à 1100 px, pensé pour
   tablette : sur un téléphone, les grilles restaient en 2-4
   colonnes écrasées. Ici, tout passe en colonne unique, les
   marges respirent moins large, rien ne déborde.
   ============================================================ */
@media (max-width: 640px) {
  /* Entête : le menu passe sous le logo au lieu de le chevaucher. */
  .acc-entete {
    flex-wrap: wrap;
    row-gap: 8px;
    padding-top: 10px;
    padding-bottom: 10px;
  }

  .acc-menu {
    order: 3;
    width: 100%;
    justify-content: flex-start;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .acc-lienMenu { white-space: nowrap; }

  /* La « fenêtre d'application » occupe tout l'écran du téléphone. */
  .acc-fenetre {
    border-radius: 0;
    border-left: none;
    border-right: none;
  }

  .acc-chiffresApp,
  .acc-grilleEtapes,
  .acc-grilleIndicateurs,
  .acc-grilleGraphiques,
  .acc-grilleComparaison,
  .acc-grillePaperasse,
  .acc-grilleTarifs,
  .acc-grillePied,
  .qst-optionsUniques,
  .qst-champs,
  .qst-chiffres,
  .dia-chiffres,
  .dia-grilleVente,
  .dia-avantagesVente,
  .dia-corpsOfferte,
  .dia-offresModale,
  .esp-colonnes,
  .esp-grillePieces {
    grid-template-columns: 1fr;
  }

  .acc-delai {
    grid-template-columns: 1fr;
    row-gap: 0.35rem;
  }

  /* Colonnes latérales (progression, sommaire) : au-dessus du contenu. */
  .qst-corps,
  .dia-corps,
  .esp-corps {
    grid-template-columns: 1fr;
  }

  /* Les conteneurs gardent l'écran entier, sans gouttières géantes. */
  .acc-cadre,
  .qst-cadre,
  .dia-cadre,
  .esp-cadre {
    padding-left: 1.05rem;
    padding-right: 1.05rem;
  }

  /* Boutons d'action : pleine largeur, faciles au pouce. */
  .acc-ctaPrincipal,
  .acc-ctaSecondaire,
  .qst-boutonSuivant,
  .dia-ctaPrincipal {
    display: block;
    width: 100%;
    text-align: center;
  }

  /* Typographie : les titres desktop débordent d'un petit écran. */
  .acc-titreHero { font-size: 2.1rem; line-height: 1.15; }
  .acc-titreSection, .dia-titre, .esp-titre { font-size: 1.55rem; }
  .qst-titreQuestion { font-size: 1.5rem; }

  /* Rien ne doit provoquer de défilement horizontal. */
  img, svg, video, table { max-width: 100%; }
  h1, h2, h3, p, a, li { overflow-wrap: anywhere; }
}

/* Suggestions d'adresse (Base Adresse Nationale) */
.qst-suggestions {
  list-style: none;
  margin: 4px 0 0;
  padding: 4px;
  border: 1px solid var(--color-bord);
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 8px 24px rgb(16 20 40 / 0.10);
  max-height: 230px;
  overflow-y: auto;
  position: relative;
  z-index: 5;
}

.qst-suggestions li {
  padding: 9px 11px;
  border-radius: 7px;
  font-size: 14px;
  line-height: 1.35;
  cursor: pointer;
}

.qst-suggestions li:hover {
  background: var(--color-brume, #f2f4fa);
}

/* ============================================================
   Diagnostic — deux blocs : ce qui rapporte, ce qui oblige.
   ============================================================ */
.dia-deuxBlocs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 26px;
}

.dia-bloc {
  border: 1px solid var(--color-bord);
  border-radius: 14px;
  padding: 18px 18px 16px;
  background: #fff;
}

.dia-blocDroits {
  border-color: var(--color-pervenche);
  background: linear-gradient(180deg, rgb(92 111 191 / 0.05), #fff 60%);
}

.dia-blocIntitule {
  font-size: 11px;
  letter-spacing: .09em;
  color: var(--color-ardoise, #6b7391);
  margin-bottom: 12px;
}

.dia-blocListe {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.dia-blocListe li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding-bottom: 9px;
  border-bottom: 1px solid var(--color-bord);
}

.dia-blocListe li:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.dia-blocNom { font-size: 14.5px; line-height: 1.35; }

.dia-blocDelai {
  font-size: 12px;
  color: var(--color-ardoise, #6b7391);
  white-space: nowrap;
}

.dia-blocNote {
  margin-top: 12px;
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--color-ardoise, #6b7391);
}

.dia-blocVide {
  font-size: 14px;
  color: var(--color-ardoise, #6b7391);
}

@media (max-width: 640px) {
  .dia-deuxBlocs { grid-template-columns: 1fr; }
}

/* Trois piliers (accueil) */
.acc-piliers {
  list-style: none;
  margin: 30px auto 0;
  padding: 0;
  max-width: 1080px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  text-align: left;
}

.acc-piliers li {
  border: 1px solid var(--color-bord);
  border-radius: 14px;
  padding: 18px;
  background: #fff;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.acc-pilierNum {
  font-size: 11px;
  letter-spacing: .1em;
  color: var(--color-pervenche);
}

.acc-pilierTitre { font-size: 16px; font-weight: 500; }

.acc-pilierTexte {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--color-ardoise, #6b7391);
}

.dia-troisBlocs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-top: 26px;
}

@media (max-width: 1000px) {
  .acc-piliers { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
  .acc-piliers { grid-template-columns: 1fr; }
}

/* ============================================================
   Tableau de bord : rubriques et cartes de démarche.
   ============================================================ */
.dia-rubrique { margin-top: 34px; }

.dia-rubriqueTitre {
  font-family: var(--font-titre);
  font-weight: 300;
  font-size: 22px;
  margin: 0 0 4px;
}

.dia-rubriqueIntro {
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--color-ardoise, #6b7391);
  margin: 0 0 14px;
}

.dia-cartes {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.dia-carte {
  border: 1px solid var(--color-bord);
  border-radius: 14px;
  padding: 16px;
  background: #fff;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.dia-carteEntete {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
}

.dia-carteNom { font-size: 15px; font-weight: 500; line-height: 1.3; }

.dia-carteEtat {
  font-size: 10.5px;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 999px;
  white-space: nowrap;
  background: rgb(92 111 191 / 0.10);
  color: var(--color-pervenche);
}

.dia-etatHaute { background: rgb(192 69 63 / 0.10); color: #C0453F; }

.dia-carteOrganisme {
  font-size: 12.5px;
  color: var(--color-ardoise, #6b7391);
  margin: 0;
}

.dia-carteAction {
  margin-top: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 14px;
  border-radius: 10px;
  background: var(--color-nuit, #101428);
  color: #fff;
  font-size: 13.5px;
  font-weight: 500;
  text-decoration: none;
}

.dia-carteActionOfficielle {
  background: #fff;
  color: var(--color-nuit, #101428);
  border: 1px solid var(--color-nuit, #101428);
}

.dia-carteMention {
  font-size: 11.5px;
  color: var(--color-ardoise, #6b7391);
}

@media (max-width: 700px) {
  .dia-cartes { grid-template-columns: 1fr; }
}

/* Second formulaire (informations propres à une lettre) */
.cpl-form { margin-top: 22px; display: flex; flex-direction: column; gap: 14px; }
.cpl-champ { display: flex; flex-direction: column; gap: 5px; position: relative; }
.cpl-libelle { font-size: 13px; color: var(--color-ardoise, #6b7391); }
.cpl-champErreur .qst-champ { border-color: #C0453F; }
.cpl-note { font-size: 12px; color: var(--color-ardoise, #6b7391); text-align: center; margin: 4px 0 0; }

/* Fiche formulaire officiel */
.frm-points { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.frm-points li { font-size: 14px; line-height: 1.55; padding-left: 14px; position: relative; }
.frm-points li::before { content: "—"; position: absolute; left: 0; color: var(--color-pervenche); }

.dia-carteExplication {
  margin: 4px 0 0;
  font-size: 13px;
  line-height: 1.55;
  color: var(--color-ardoise, #6b7391);
}

/* ============================================================
   Avant paiement : montrer l'ampleur, garder le travail.
   ============================================================ */
.dia-ampleur {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin: 18px 0 4px;
  padding: 16px;
  border: 1px solid var(--color-bord);
  border-radius: 14px;
  background: #fff;
}

.dia-ampleurItem {
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--color-ardoise, #6b7391);
}

.dia-ampleurItem b {
  display: block;
  font-family: var(--font-titre);
  font-weight: 300;
  font-size: 26px;
  color: var(--color-nuit, #101428);
}

.dia-carteVerrou {
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.dia-carteVerrou span {
  font-size: 12.5px;
  color: var(--color-ardoise, #6b7391);
}

/* Coquille d'application des écrans de préparation */
.esp-lienRail {
  display: block;
  padding: 8px 10px;
  border-radius: 8px;
  font-size: 13.5px;
  color: #8f97b8;
  text-decoration: none;
}

.esp-lienRail:hover { background: rgb(255 255 255 / 0.07); color: #fff; }
.esp-lienRailActif { background: rgb(255 255 255 / 0.12); color: #fff; }

@media (max-width: 640px) {
  .dia-ampleur { grid-template-columns: 1fr; }
}

button.dia-carteAction {
  border: 0;
  width: 100%;
  cursor: pointer;
  font-family: inherit;
}

/* ============================================================
   TÉLÉPHONE — écrans applicatifs et accueil.
   Les barres latérales sombres sont faites pour un écran large :
   sur un téléphone elles repoussaient le contenu hors de vue.
   La maquette animée de l'accueil (620 px de haut) disparaît :
   le message et les boutons suffisent.
   ============================================================ */
@media (max-width: 640px) {
  .qst-rail,
  .dia-rail,
  .esp-rail {
    display: none;
  }

  .qst-corps,
  .dia-corps,
  .esp-corps {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .qst-panneau,
  .dia-panneau,
  .esp-panneau {
    padding: 18px 16px 40px;
  }

  .acc-fenetre {
    display: none;
  }

  .dia-carte,
  .acc-piliers li {
    padding: 14px;
  }

  .dia-titre { font-size: 26px; line-height: 1.15; }
  .qst-titreQuestion { font-size: 22px; }
  .esp-titre { font-size: 24px; }

  /* Boutons pleine largeur, faciles au pouce */
  .dia-carteAction,
  .qst-boutonSuivant,
  .acc-ctaPrincipal {
    width: 100%;
    display: flex;
    justify-content: center;
  }

  html, body { overflow-x: hidden; }
}