/* =========================================================
   ISIF 2027 — Couche « affiche »

   Le langage visuel des supports ISIF/ANSER est celui de
   l'affiche : un titre en capitales qui occupe la largeur,
   une photographie plein cadre, un ruban de couleur qui
   traverse la composition, et des pastilles chiffrées.

   Ce fichier porte ces composants. Il se charge après
   style.css et n'écrase rien : tous les sélecteurs sont
   préfixés « aff- », les anciens composants restent
   utilisables tels quels sur les pages non reprises.
   ========================================================= */

:root {
  /* Le ruban reprend les quatre couleurs de la charte, dans
     l'ordre où elles se lisent sur les supports imprimés. */
  --ruban-1: #0559E8;
  --ruban-2: #00B567;
  --ruban-3: #FFC20D;
  --ruban-4: #F7941F;

  --nuit:      #041B45;
  --nuit-haut: #062a6b;

  /* Échelle d'affiche : un seul pas très marqué entre le
     titre et le reste, comme sur un poster. */
  --t-affiche: clamp(2.6rem, 7.4vw, 6.4rem);
  --t-section: clamp(1.9rem, 3.6vw, 3.1rem);
}

/* ---------------------------------------------------------
   1. Filet de couleur
   Les affiches ISIF s'ouvrent sur un filet à quatre couleurs.
   On le reprend en haut de page, collé au bord.
   --------------------------------------------------------- */
.aff-filet {
  position: fixed; inset: 0 0 auto 0; z-index: 1000;
  height: 4px; display: grid; grid-template-columns: repeat(4, 1fr);
}
.aff-filet span:nth-child(1) { background: var(--ruban-1); }
.aff-filet span:nth-child(2) { background: var(--ruban-2); }
.aff-filet span:nth-child(3) { background: var(--ruban-3); }
.aff-filet span:nth-child(4) { background: var(--ruban-4); }

/* ---------------------------------------------------------
   2. Le ruban
   Motif signature. Trois courbes décalées qui traversent la
   composition. Le tracé est en SVG pour rester net à toutes
   les tailles ; la dérive est lente et continue, jamais une
   animation d'apparition.
   --------------------------------------------------------- */
.aff-ruban {
  position: absolute; left: 0; width: 100%; pointer-events: none;
  overflow: hidden; line-height: 0;
}
.aff-ruban svg { width: 160%; min-width: 1100px; height: auto; display: block; }
.aff-ruban path { fill: none; stroke-linecap: round; }

@media (prefers-reduced-motion: no-preference) {
  .aff-ruban svg { animation: rubanDerive 24s linear infinite alternate; }
}
@keyframes rubanDerive {
  from { transform: translate3d(-6%, 0, 0); }
  to   { transform: translate3d(0, 0, 0); }
}

/* ---------------------------------------------------------
   3. Hero d'affiche
   Photographie plein cadre, titre en capitales aligné à
   gauche, ruban qui traverse, pastilles chiffrées à droite.
   Composition asymétrique : le titre ne fait jamais toute
   la largeur, il laisse respirer les pastilles.
   --------------------------------------------------------- */
.aff-hero {
  position: relative; overflow: hidden;
  background: var(--nuit);
  padding: clamp(150px, 17vw, 230px) 0 clamp(130px, 14vw, 190px);
  color: #fff;
}
.aff-hero__photo {
  position: absolute; inset: 0;
  background-size: cover; background-position: center 38%;
  opacity: .34;
}
/* Le voile part du bas-gauche pour garder le titre lisible
   sans effacer la photo sur la droite. */
.aff-hero__voile {
  position: absolute; inset: 0;
  background:
    linear-gradient(104deg, var(--nuit) 6%, rgba(4,27,69,.86) 42%, rgba(4,27,69,.42) 74%, rgba(4,27,69,.66) 100%),
    linear-gradient(to top, var(--nuit) 2%, transparent 38%);
}
.aff-hero__inner { position: relative; z-index: 2; }
.aff-hero__grille {
  display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, .65fr);
  gap: clamp(2rem, 5vw, 4.5rem); align-items: end;
}

.aff-surtitre {
  display: inline-flex; align-items: center; gap: .7rem;
  font-size: .78rem; font-weight: 700; letter-spacing: 2.4px;
  text-transform: uppercase; color: var(--ruban-3);
  margin-bottom: 1.4rem;
}
.aff-surtitre::before {
  content: ''; width: 34px; height: 3px; background: var(--ruban-4);
}

.aff-titre {
  font-size: var(--t-affiche); font-weight: 900; line-height: .95;
  letter-spacing: -.035em; text-transform: uppercase;
  margin: 0 0 1.5rem;
}
.aff-titre em { font-style: normal; color: var(--ruban-3); }

.aff-chapo {
  font-size: clamp(1rem, 1.3vw, 1.12rem); line-height: 1.6;
  max-width: 52ch; color: rgba(255,255,255,.9); margin-bottom: 2.2rem;
}

/* Deux lieux, deux dates : l'information la plus consultée
   de la page, donc traitée en blocs distincts et non en
   simple ligne de métadonnées. */
.aff-reperes { display: grid; gap: 1px; background: rgba(255,255,255,.18); margin-bottom: 2.4rem; max-width: 620px; }
.aff-repere { background: var(--nuit); padding: 1.1rem 1.3rem; }
.aff-repere__lieu { font-size: .74rem; font-weight: 800; letter-spacing: 2px; text-transform: uppercase; color: var(--ruban-2); }
.aff-repere__date { font-size: 1.14rem; font-weight: 800; margin: .25rem 0 .15rem; }
.aff-repere__note { font-size: .86rem; color: rgba(255,255,255,.72); }
@media (min-width: 720px) { .aff-reperes { grid-template-columns: 1fr 1fr; } }

/* ---------------------------------------------------------
   4. Pastilles chiffrées
   Reprise directe des supports : un cercle plein, le chiffre
   très gras, la légende dessous en petit.
   --------------------------------------------------------- */
.aff-pastilles { display: flex; flex-wrap: wrap; gap: clamp(.8rem, 1.6vw, 1.4rem); }
.aff-pastille {
  width: clamp(116px, 13vw, 158px); aspect-ratio: 1; border-radius: 50%;
  display: grid; place-content: center; text-align: center; padding: .6rem;
  color: var(--nuit);
}
.aff-pastille--bleu  { background: var(--ruban-1); color: #fff; }
.aff-pastille--vert  { background: var(--ruban-2); color: #fff; }
.aff-pastille--or    { background: var(--ruban-3); }
.aff-pastille--orange{ background: var(--ruban-4); }
.aff-pastille b {
  display: block; font-size: clamp(1.7rem, 3.4vw, 2.6rem); font-weight: 900;
  line-height: 1; letter-spacing: -.03em;
}
.aff-pastille small {
  display: block; font-size: clamp(.62rem, .82vw, .72rem); font-weight: 700;
  line-height: 1.25; margin-top: .35rem; text-transform: uppercase; letter-spacing: .4px;
}

@media (max-width: 900px) {
  .aff-hero__grille { grid-template-columns: 1fr; align-items: start; }
  .aff-pastilles { justify-content: flex-start; }
}

/* ---------------------------------------------------------
   5. Titre de section éditorial
   Aligné à gauche, numéroté. Pas de titre centré avec
   sous-titre centré sur chaque section.
   --------------------------------------------------------- */
.aff-tete { display: grid; gap: .9rem; margin-bottom: clamp(2.2rem, 4vw, 3.4rem); max-width: 760px; }
.aff-tete__num {
  font-size: .76rem; font-weight: 800; letter-spacing: 2.2px; text-transform: uppercase;
  color: var(--orange); display: flex; align-items: center; gap: .7rem;
}
.aff-tete__num::after { content: ''; flex: 1; height: 1px; background: var(--line); max-width: 120px; }
.aff-tete h2 {
  font-size: var(--t-section); font-weight: 900; line-height: 1.04;
  letter-spacing: -.028em; color: var(--ink); margin: 0;
}
.aff-tete p { font-size: 1.02rem; line-height: 1.65; color: var(--text-mut); margin: 0; }
.aff-tete--clair h2 { color: #fff; }
.aff-tete--clair p { color: rgba(255,255,255,.78); }
.aff-tete--clair .aff-tete__num { color: var(--ruban-3); }
.aff-tete--clair .aff-tete__num::after { background: rgba(255,255,255,.22); }

/* ---------------------------------------------------------
   6. Section nuit
   Fond bleu profond, utilisé pour les séquences qui pèsent :
   les chiffres, les rendez-vous d'affaires.
   --------------------------------------------------------- */
.aff-nuit {
  position: relative; overflow: hidden;
  background: linear-gradient(160deg, var(--nuit-haut), var(--nuit) 62%);
  color: #fff; padding: clamp(72px, 9vw, 116px) 0;
}
.aff-nuit .container { position: relative; z-index: 2; }

/* ---------------------------------------------------------
   7. Bande photographique
   187 photos de 2026 existent : elles servent de matière,
   pas d'illustration décorative. Chaque bande porte une
   légende qui dit ce qu'on regarde.
   --------------------------------------------------------- */
.aff-bande { position: relative; min-height: clamp(300px, 42vw, 520px); display: grid; align-items: end; overflow: hidden; }
.aff-bande__photo { position: absolute; inset: 0; background-size: cover; background-position: center; }
.aff-bande__voile { position: absolute; inset: 0; background: linear-gradient(to top, rgba(4,27,69,.94) 8%, rgba(4,27,69,.25) 58%, rgba(4,27,69,.5)); }
.aff-bande__texte { position: relative; z-index: 2; padding: clamp(2rem, 4vw, 3.6rem) 0; color: #fff; }
.aff-bande__texte h2 { font-size: var(--t-section); font-weight: 900; line-height: 1.05; letter-spacing: -.028em; margin: 0 0 .8rem; text-transform: uppercase; }
.aff-bande__texte p { max-width: 56ch; color: rgba(255,255,255,.88); line-height: 1.6; margin: 0; }

/* ---------------------------------------------------------
   8. Chiffres en ligne
   Version non circulaire, pour les sections de contenu où
   la pastille serait trop bruyante.
   --------------------------------------------------------- */
.aff-chiffres { display: grid; gap: 1px; background: rgba(255,255,255,.16); }
@media (min-width: 640px) { .aff-chiffres { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .aff-chiffres { grid-template-columns: repeat(4, 1fr); } }
.aff-chiffre { background: var(--nuit); padding: 1.6rem 1.4rem; }
.aff-chiffre b { display: block; font-size: clamp(1.9rem, 3vw, 2.7rem); font-weight: 900; letter-spacing: -.03em; line-height: 1; color: var(--ruban-3); }
.aff-chiffre span { display: block; margin-top: .55rem; font-size: .88rem; line-height: 1.4; color: rgba(255,255,255,.8); }

/* Sur fond clair */
.aff-chiffres--clair { background: var(--line); }
.aff-chiffres--clair .aff-chiffre { background: #fff; }
.aff-chiffres--clair .aff-chiffre b { color: var(--blue); }
.aff-chiffres--clair .aff-chiffre span { color: var(--text-mut); }

/* ---------------------------------------------------------
   9. Liens de parcours
   Remplace la grille de cartes identiques : une liste
   éditoriale, dense, où chaque ligne est cliquable.
   --------------------------------------------------------- */
.aff-liste { border-top: 1px solid var(--line); }
.aff-liste a {
  display: grid; grid-template-columns: auto 1fr auto; gap: 1.2rem; align-items: baseline;
  padding: 1.5rem 0; border-bottom: 1px solid var(--line);
  color: var(--ink); text-decoration: none;
  transition: padding-left .25s var(--ease), border-color .25s;
}
.aff-liste a:hover { padding-left: .6rem; border-color: var(--blue); }
.aff-liste__num { font-size: .78rem; font-weight: 800; color: var(--orange); letter-spacing: 1px; }
.aff-liste__titre { font-size: clamp(1.05rem, 1.8vw, 1.32rem); font-weight: 800; letter-spacing: -.01em; }
.aff-liste__note { display: block; font-size: .92rem; font-weight: 500; color: var(--text-mut); margin-top: .3rem; line-height: 1.5; }
.aff-liste__fleche { font-size: 1.1rem; color: var(--blue); }

/* ---------------------------------------------------------
   10. Apparition au défilement
   Un seul type de mouvement, appliqué aux blocs porteurs
   d'information, pas à chaque élément de la page.
   --------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  .js .aff-monte { opacity: 0; transform: translate3d(0, 18px, 0); transition: opacity .6s var(--ease), transform .6s var(--ease); }
  .js .aff-monte.est-vu { opacity: 1; transform: none; }
}

/* ---------------------------------------------------------
   11. Compte à rebours
   Une seule ligne sous le hero. L'ancienne version occupait
   un quart du hero pour une information secondaire.
   --------------------------------------------------------- */
.aff-compte { background: var(--nuit-haut); color: #fff; padding: 1.1rem 0; border-top: 1px solid rgba(255,255,255,.12); }
.aff-compte__inner { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.8rem; }
.aff-compte__label { font-size: .76rem; font-weight: 800; letter-spacing: 2px; text-transform: uppercase; color: var(--ruban-3); margin: 0; }
.aff-compte .countdown__grid { display: flex; gap: .6rem; margin: 0; }
.aff-compte .countdown__cell { background: rgba(255,255,255,.1); border-radius: 4px; padding: .45rem .8rem; text-align: center; min-width: 62px; }
.aff-compte .countdown__cell span { font-size: 1.12rem; font-weight: 900; display: block; line-height: 1.1; }
.aff-compte .countdown__cell small { font-size: .62rem; text-transform: uppercase; letter-spacing: 1px; opacity: .72; }
.aff-compte__lien { margin-left: auto; color: #fff; font-weight: 700; font-size: .92rem; text-decoration: none; border-bottom: 2px solid var(--ruban-4); padding-bottom: 2px; }
.aff-compte__lien:hover { color: var(--ruban-3); }
@media (max-width: 720px) { .aff-compte__lien { margin-left: 0; } }

/* Le titre de l'accueil est long : il lui faut un cran de
   moins que le maximum de l'échelle d'affiche. */
.aff-hero .aff-titre { font-size: clamp(2.1rem, 5vw, 4.3rem); }

/* ---------------------------------------------------------
   12. Compositions à deux colonnes
   --------------------------------------------------------- */
.aff-deux { display: grid; gap: clamp(2rem, 4vw, 3.6rem); align-items: start; }
@media (min-width: 900px) { .aff-deux { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); } }
.aff-deux .aff-chiffres { grid-template-columns: 1fr; }
@media (min-width: 560px) { .aff-deux .aff-chiffres { grid-template-columns: 1fr 1fr; } }

/* Titre de bloc (hors tête de section) */
.aff-titre-bloc {
  font-size: clamp(1.7rem, 2.9vw, 2.5rem); font-weight: 900; line-height: 1.06;
  letter-spacing: -.028em; color: var(--ink); margin: .5rem 0 1.2rem;
}

/* Actions sur la bande photo */
.aff-bande__actions { display: flex; flex-wrap: wrap; gap: .9rem; margin-top: 1.8rem; }

/* ---------------------------------------------------------
   13. En-tête de page
   Même grammaire que le hero mais en plus court : une photo
   de l'édition 2026 en fond, le fil d'Ariane, le titre en
   capitales, le chapô. Le ruban ferme le bloc.
   --------------------------------------------------------- */
.aff-entete {
  position: relative; overflow: hidden; color: #fff;
  background: var(--nuit);
  padding: clamp(136px, 15vw, 190px) 0 clamp(96px, 11vw, 140px);
}
.aff-entete__photo { position: absolute; inset: 0; background-size: cover; background-position: center 42%; opacity: .32; }
.aff-entete__voile {
  position: absolute; inset: 0;
  background:
    linear-gradient(100deg, var(--nuit) 4%, rgba(4,27,69,.84) 46%, rgba(4,27,69,.46) 100%),
    linear-gradient(to top, var(--nuit) 1%, transparent 34%);
}
.aff-entete__inner { position: relative; z-index: 2; max-width: 860px; }

.aff-entete__inner .page-hero__crumb {
  font-size: .78rem; font-weight: 700; letter-spacing: 1.6px; text-transform: uppercase;
  color: rgba(255,255,255,.62); margin-bottom: 1.2rem;
}
.aff-entete__inner .page-hero__crumb a { color: var(--ruban-3); text-decoration: none; }
.aff-entete__inner .page-hero__crumb a:hover { text-decoration: underline; }

.aff-entete__inner h1 {
  font-size: clamp(2rem, 4.6vw, 3.9rem); font-weight: 900; line-height: 1;
  letter-spacing: -.032em; text-transform: uppercase; margin: 0 0 1.2rem;
}
.aff-entete__inner > p:not(.page-hero__crumb) {
  font-size: clamp(1rem, 1.25vw, 1.1rem); line-height: 1.62;
  color: rgba(255,255,255,.88); max-width: 60ch; margin: 0 0 .9rem;
}

/* Les têtes de section sur fond sombre héritent du bon contraste */
.aff-nuit .aff-tete h2, .aff-entete .aff-tete h2 { color: #fff; }
.aff-nuit .aff-tete p,  .aff-entete .aff-tete p  { color: rgba(255,255,255,.78); }

/* =========================================================
   14. UNIFICATION
   Le site portait trois générations de composants. Cette
   section les ramène toutes au même langage : bleu dominant,
   dégradé chaud du logo en accent, vert en filet seulement.
   ========================================================= */

:root {
  /* Le dégradé de la barre du F, relevé sur le logo. */
  --chaud: linear-gradient(90deg, #F7941F 0%, #FFC20D 100%);
  --chaud-inv: linear-gradient(90deg, #FFC20D 0%, #F7941F 100%);
  --bleu-clair: #2F7BF0;
}

/* Le filet de tête suit la même hiérarchie que la marque :
   deux bleus, puis le dégradé chaud, puis un trait de vert. */
.aff-filet { grid-template-columns: 4fr 3fr 4fr 1fr; }
.aff-filet span:nth-child(1) { background: var(--blue); }
.aff-filet span:nth-child(2) { background: var(--bleu-clair); }
.aff-filet span:nth-child(3) { background: var(--chaud); }
.aff-filet span:nth-child(4) { background: var(--green); }

/* --- Surtitres et numéros : un seul traitement --- */
.eyebrow, .aff-tete__num {
  font-size: .76rem; font-weight: 800; letter-spacing: 2.2px;
  text-transform: uppercase; color: var(--orange);
}
.eyebrow--light, .aff-tete--clair .aff-tete__num,
.aff-nuit .eyebrow, .challenge .eyebrow, .ctaband .eyebrow { color: var(--gold); }

/* --- Titres de section hérités : même graisse que l'affiche --- */
.section__title {
  font-weight: 900; letter-spacing: -.028em; line-height: 1.06;
  font-size: var(--t-section);
}
.section__head { max-width: 760px; margin-inline: 0; text-align: left; }
.section__head .section__sub { margin-inline: 0; }

/* --- Cartes : à plat, pas de boîte à icône ni de lévitation --- */
.sector, .vmcard, .workshop, .acces-carte, .speaker, .form-card, .contact-aside > .vmcard {
  border-radius: 6px; box-shadow: none;
}
.sector {
  padding: 1.7rem 1.5rem 1.6rem; border: 1px solid var(--line);
  border-top: 3px solid var(--blue);
  transition: border-top-color .25s var(--ease), background .25s;
}
.sector::before { display: none; }
.sector:hover { transform: none; box-shadow: none; border-color: var(--line); border-top-color: var(--orange); background: var(--bg-tint); }
.sector h3 { font-size: 1.06rem; font-weight: 800; letter-spacing: -.01em; }

/* L'icône dans sa boîte arrondie était le marqueur de l'ancien
   gabarit : on la réduit à un pictogramme discret. */
.sector__icon, .vmcard__icon {
  width: 30px; height: 30px; margin-bottom: 1rem;
  background: none !important; border-radius: 0; display: block;
}
.sector__icon svg, .vmcard__icon svg { width: 26px; height: 26px; fill: var(--blue); }
.sector--alt .sector__icon svg, .aff-nuit .vmcard__icon svg { fill: var(--gold); }
.step:hover .step__num, .vmcard:hover .vmcard__icon, .sector:hover .sector__icon { transform: none; }

.sector--alt { background: linear-gradient(150deg, var(--nuit-haut), var(--nuit)); border: none; }
.sector--alt h3 { color: #fff; }

.vmcard { border: 1px solid var(--line); padding: 1.6rem 1.5rem; }
.vmcard h3 { font-size: 1.04rem; font-weight: 800; }

/* --- Étapes numérotées : le numéro devient typographique --- */
.step { border: 1px solid var(--line); border-radius: 6px; box-shadow: none; padding: 1.7rem 1.5rem; }
.step:hover { transform: none; box-shadow: none; border-color: var(--blue); }
.step__num {
  width: auto; height: auto; background: none; color: var(--orange);
  font-size: 1.6rem; font-weight: 900; line-height: 1; margin-bottom: .9rem;
  display: block; border-radius: 0;
}
.step--cle { background: linear-gradient(150deg, var(--nuit-haut), var(--nuit)); border: none; color: #fff; }
.step--cle .step__num { color: var(--gold); }
.step--cle h3 { color: #fff; }
.step--cle p { color: rgba(255,255,255,.82); }

/* --- Ateliers --- */
.workshop { border: 1px solid var(--line); border-top: 3px solid var(--blue); padding: 1.8rem 1.6rem; }
.workshop:hover { transform: none; box-shadow: none; }
.workshop__seats { background: var(--chaud); color: var(--ink); border-radius: 3px; font-weight: 800; }

/* --- Chiffres hérités (recap) : même écriture que .aff-chiffre --- */
.recap__card { border: 1px solid var(--line); border-radius: 6px; box-shadow: none; background: #fff; }
.recap__card:hover { transform: none; box-shadow: none; }
.recap__num { font-weight: 900; letter-spacing: -.03em; color: var(--blue); }
.section--tint .recap__card { background: #fff; }

/* --- Bandes d'appel : fond nuit, ruban chaud en liseré --- */
.ctaband, .challenge, .netband {
  background: linear-gradient(150deg, var(--nuit-haut), var(--nuit));
  position: relative;
}
.ctaband::before, .challenge::before, .netband::before {
  content: ''; position: absolute; inset: 0 0 auto 0; height: 4px;
  background: var(--chaud);
}
.ctaband::after, .challenge::after { display: none; }
.ctaband h2, .challenge h2 { font-weight: 900; letter-spacing: -.028em; text-transform: uppercase; }

/* --- Boutons : le bleu reste l'action principale --- */
.btn { border-radius: 4px; }
.btn--primary { box-shadow: none; }
.btn--primary:hover { background: var(--blue-dark); box-shadow: none; }
.btn:hover { transform: none; }
.btn::after { display: none; }
.btn--white:hover { background: var(--gold); color: var(--ink); }
.header__cta { border-radius: 4px; }

/* --- Jalons du calendrier --- */
.jalon__date { color: var(--blue); font-weight: 800; }
.jalon:hover { transform: none; box-shadow: none; }

/* --- Intervenants --- */
.speaker { border: 1px solid var(--line); }
.speaker:hover { transform: none; box-shadow: none; }
.intervenant:hover { transform: none; }

/* --- Formulaires --- */
.field input, .field select, .field textarea { border-radius: 4px; }
.form-card { border: 1px solid var(--line); }

/* --- Onglets --- */
.tabs__btn.is-active, .jour__onglet.est-actif { background: var(--blue); border-radius: 4px; }
.onglets__btn.is-active { border-radius: 4px; }

/* --- Note --- */
.note { border-radius: 4px; border-left: 3px solid var(--orange); }

/* --- Galerie et aperçus : angles nets --- */
.apercu, .galerie .photo, .gallery img { border-radius: 4px; }

/* --- Tableau comparatif --- */
.compare-wrap { border-radius: 6px; }
.compare thead th { background: var(--nuit); color: #fff; }

/* --- Partenaires --- */
.partner { border-radius: 4px; }

/* Le vert ne sert plus qu'à signaler, jamais à décorer. */
.vmcard__icon--green svg { fill: var(--blue); }

/* Pastilles : deux bleus, l'or, et le dégradé du logo. Le vert
   n'y figure pas : il reste un filet de signalisation. */
.aff-pastille--bleuclair { background: var(--bleu-clair); color: #fff; }
.aff-pastille--chaud { background: var(--chaud); color: var(--ink); }

/* La règle .step--cle .step__num de style.css réappliquait un fond
   qui s'étirait une fois la pastille passée en display:block. */
.step--cle .step__num, .jour__onglet .jour__compte { background: none; }
.step--cle .step__num { color: var(--gold); }

/* Les blocs d'accès conservent leur liseré, mais bleu et non vert. */
.acces-carte { border: 1px solid var(--line); border-radius: 6px; }
.acces-carte--oui { border-left: 3px solid var(--blue); }
.acces-carte h3 { font-weight: 800; letter-spacing: -.01em; }