/* ============================================================
   Entre Nous · VEGA — Design system maquette
   Charte : docs/charte.pdf (éd. 2026)
   ============================================================ */

:root {
  --nuit: #122F4A;
  --nuit-2: #0D2338;      /* variante plus sombre pour dégradés */
  --nuit-70: rgba(18, 47, 74, .72);
  --azur: #29B6E8;
  --azur-pale: #E3F4FC;
  --corail: #FF6F5E;
  --corail-pale: #FFE9E6;
  --soleil: #FFC24A;
  --soleil-pale: #FFF3DC;
  --creme: #F6F1E7;
  --blanc: #FFFFFF;
  --gris-texte: #43596E;
  --gris-ligne: #E5DFD2;
  --vert: #2E9E6B;
  --vert-pale: #E4F3EC;

  /* Charte des formats (assets/Charte_des_formats_Entre_Nous V2.pdf) —
     la couleur dit le FINANCEMENT, le picto dit la MODALITÉ.
     Contenu libre : Lire = azur, Live = corail.
     Formation prise en charge FIF PL : Classe virtuelle ET Rencontre en soleil,
     elles ne se distinguent que par leur picto. Valeurs reprises telles quelles
     de assets/tokens.css — ne pas les improviser ailleurs. */
  --chip-lire-fond: #E2F1FB;   --chip-lire-texte: #0C447C;
  --chip-live-fond: #FBE7E2;   --chip-live-texte: #8A2F1C;
  --chip-fifpl-fond: #FBEEDA;  --chip-fifpl-texte: #7A4D09;

  --font-titre: "Bricolage Grotesque", sans-serif;
  --font-edito: "Fraunces", serif;
  --font-texte: "Inter", sans-serif;

  --radius: 14px;
  --radius-lg: 22px;
  --ombre: 0 10px 30px rgba(18, 47, 74, .10);
  --maxw: 1160px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-texte);
  font-size: 16px;
  line-height: 1.65;
  color: var(--nuit);
  background: var(--creme);
}

img { max-width: 100%; display: block; }
a { color: var(--azur); text-decoration: none; }

.conteneur { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }

/* ---------- Typographie ---------- */
h1, h2, h3, h4 { font-family: var(--font-titre); font-weight: 800; line-height: 1.15; }
h1 { font-size: clamp(2.1rem, 4.5vw, 3.4rem); letter-spacing: -.5px; }
h2 { font-size: clamp(1.6rem, 3vw, 2.3rem); letter-spacing: -.4px; }
h3 { font-size: 1.25rem; }

/* Kicker : le sur-titre en capitales espacées au-dessus des h2 (« NOS FORMATS »,
   « LE CATALOGUE »…). Il est en bleu nuit sur fond clair — l'azur en petit corps
   sur crème manque de contraste — et repasse en azur sur les fonds nuit. */
.kicker {
  font-family: var(--font-texte);
  font-weight: 600;
  font-size: .88rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--nuit);
  display: block;
  margin-bottom: .8rem;
}

.chapeau {
  font-family: var(--font-edito);
  font-style: italic;
  font-size: 1.2rem;
  color: var(--gris-texte);
}

.point { color: var(--azur); }

/* ---------- Boutons ---------- */
.btn {
  display: inline-block;
  font-family: var(--font-titre);
  font-weight: 700;
  font-size: 1rem;
  padding: .8rem 1.7rem;
  border-radius: 999px;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.btn:hover { transform: translateY(-2px); box-shadow: var(--ombre); }
.btn-azur { background: var(--azur); color: var(--blanc); }
.btn-nuit { background: var(--nuit); color: var(--blanc); }
.btn-blanc { background: var(--blanc); color: var(--nuit); }
.btn-contour { background: transparent; color: var(--nuit); border-color: var(--nuit); }
.btn-contour-blanc { background: transparent; color: var(--blanc); border-color: rgba(255,255,255,.6); }
.btn-contour-blanc:hover { background: rgba(255,255,255,.1); }
.btn-corail { background: var(--corail); color: var(--blanc); }

/* ---------- Pictos de format ---------- */
/* Les 4 SVG de assets/pictos/ portent leurs couleurs en dur : on les pose en
   <img>, jamais en masque CSS, et on ne les recolore pas. Ils remplacent les
   emojis 📍 et 💻, dont le dessin dépendait du système de la lectrice. */
.picto { width: 16px; height: 16px; display: inline-block; vertical-align: -3px; margin-right: .3rem; flex: none; }
.carte-meta .picto { width: 15px; height: 15px; vertical-align: -2px; }
.session-lieu .picto { width: 14px; height: 14px; vertical-align: -2px; margin-right: .25rem; }

/* ---------- Pastilles / badges ---------- */
.pastille {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: .78rem;
  font-weight: 600;
  padding: .25rem .75rem;
  border-radius: 999px;
}
.pastille::before { content: "●"; font-size: .6rem; }
.pastille-vert { background: var(--vert-pale); color: var(--vert); }
.pastille-neutre { background: var(--creme); color: var(--gris-texte); }
.pastille-neutre::before, .pastille-vert::before { content: "●"; }

/* Pastilles de FORMAT — charte des formats V2.
   Le picto remplace la puce ● : la modalité se lit à la forme, jamais à la
   teinte seule. Le libellé reste toujours écrit à côté (daltonisme). */
.pastille-lire      { background: var(--chip-lire-fond);  color: var(--chip-lire-texte); }
.pastille-live      { background: var(--chip-live-fond);  color: var(--chip-live-texte); }
.pastille-classe,
.pastille-rencontre { background: var(--chip-fifpl-fond); color: var(--chip-fifpl-texte); }
.pastille-lire::before, .pastille-live::before,
.pastille-classe::before, .pastille-rencontre::before { content: none; }
.pastille .picto { width: 15px; height: 15px; margin-right: 0; } /* l'écart vient du gap du flex */

/* Pastilles décoratives — elles n'annoncent aucun format et ne doivent donc
   pas emprunter les classes ci-dessus, sous peine de faire mentir la couleur. */
.pastille-azur { background: var(--azur-pale); color: #0E7EAC; }
.pastille-corail { background: var(--corail-pale); color: #C74332; }

/* ---------- Header ---------- */
.entete {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--blanc);
  border-bottom: 1px solid var(--gris-ligne);
}
.entete .conteneur { max-width: none; padding: 0 28px; }
.entete-inner {
  display: flex;
  align-items: center;
  gap: 2rem;
  height: 76px;
}
.logo-groupe { display: flex; align-items: flex-end; gap: .8rem; flex-shrink: 0; }
.logo-groupe img { height: 56px; width: auto; }
/* Wordmark : Bricolage Grotesque, la police de la charte, traité en
   filigrane — moitié plus petit qu'avant et en gris clair, pour que le
   logo VEGA porte seul la marque. Le léger interlettrage compense la
   petite taille. Le point final reste azur : c'est le seul élément
   coloré, jamais recoloré (charte). */
.wordmark {
  font-family: var(--font-titre);
  font-weight: 700;
  font-size: .65rem;
  letter-spacing: .04em;
  line-height: 1;
  color: rgba(18, 47, 74, .5);
  white-space: nowrap;
  position: relative;
  top: 2px;
}
.logo-groupe > span:not(.wordmark) { display: flex; flex-direction: column; line-height: 1.1; }
.logo-collection { white-space: nowrap; }
.logo-collection {
  font-size: .62rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gris-texte);
  display: block;
  margin-top: -4px;
}
.nav-principale { display: flex; gap: 1.3rem; margin-left: auto; align-items: center; padding-left: 1.5rem; }
.nav-principale a { color: var(--nuit); font-weight: 500; font-size: .95rem; }
.nav-principale a:hover { color: var(--azur); }
.nav-principale .btn { padding: .55rem 1.2rem; font-size: .9rem; white-space: nowrap; }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  background: linear-gradient(150deg, var(--nuit) 0%, var(--nuit-2) 100%);
  color: var(--creme);
  overflow: hidden;
  padding: 5.5rem 0 6.5rem;
}

/* --- Slider d'arrière-plan (bichromie nuit + azur, charte §07) --- */
.hero-slider { position: absolute; inset: 0; overflow: hidden; }
.hero-slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  /* désaturation : la bichromie est posée par le calque de teinte */
  filter: grayscale(100%) contrast(1.05) brightness(1.15);
  opacity: 0;
  transform: scale(1.06);
  transition: opacity 1.4s ease, transform 8s linear;
}
.hero-slide.actif { opacity: 1; transform: scale(1); }

/* Teinte bichromie : multiplie le nuit et l'azur sur l'image en niveaux de gris */
.hero-teinte {
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, var(--nuit) 0%, #2A6E96 50%, var(--azur) 100%);
  mix-blend-mode: multiply;
}
/* Voile de lisibilité : le texte reste lisible quelle que soit la photo */
.hero-voile {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(18,47,74,.92) 0%, rgba(18,47,74,.70) 42%, rgba(18,47,74,.18) 100%),
    linear-gradient(0deg, rgba(18,47,74,.55) 0%, rgba(18,47,74,0) 40%);
}

/* Contrôles du slider */
.hero-puces {
  position: absolute;
  bottom: 1.6rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: .6rem;
  z-index: 3;
}
.hero-puce {
  width: 11px; height: 11px;
  border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,.7);
  background: transparent;
  cursor: pointer;
  padding: 0;
  transition: all .2s;
}
.hero-puce:hover { border-color: var(--azur); }
.hero-puce.actif { background: var(--azur); border-color: var(--azur); transform: scale(1.15); }

.hero-fleche {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,.35);
  background: rgba(18,47,74,.35);
  color: var(--blanc);
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
  transition: all .2s;
  backdrop-filter: blur(4px);
}
.hero-fleche:hover { background: var(--azur); border-color: var(--azur); }
.hero-fleche.prec { left: 1.2rem; }
.hero-fleche.suiv { right: 1.2rem; }
@media (max-width: 800px) { .hero-fleche { display: none; } }

/* Flèches et puces masquées pour l'instant — supprimer cette règle pour les réafficher */
.hero-puces, .hero-fleche { display: none; }

/* Accessibilité : pas d'animation si l'utilisateur la refuse */
@media (prefers-reduced-motion: reduce) {
  .hero-slide { transition: opacity .01s; transform: none; }
  .hero-slide.actif { transform: none; }
}
.hero .kicker { color: var(--azur); }
.hero h1 { color: var(--blanc); max-width: 15em; }
.hero .chapeau { color: rgba(246, 241, 231, .85); max-width: 34em; margin: 1.2rem 0 2rem; }
.hero-actions { display: flex; gap: 1rem; flex-wrap: wrap; }
.fil-svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }

/* Les points du fil : posés en pixels par js/fil.js, donc parfaitement
   ronds quelle que soit la déformation du SVG qui porte la courbe. */
.fil-points { position: absolute; inset: 0; pointer-events: none; }
.fil-point {
  position: absolute;
  width: 13px;
  aspect-ratio: 1;          /* jamais d'ovale */
  height: 13px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;               /* révélé une fois posé sur la courbe */
  transition: opacity .35s ease;
}
.fil-point.pose { opacity: 1; }
.fil-point.azur   { background: var(--azur); }
.fil-point.corail { background: var(--corail); }
.fil-point.soleil { background: var(--soleil); }

.hero-stats {
  display: flex;
  gap: 3rem;
  margin-top: 3.2rem;
  flex-wrap: wrap;
}
.hero-stat strong {
  font-family: var(--font-titre);
  font-size: 1.9rem;
  font-weight: 800;
  color: var(--blanc);
  display: block;
}
.hero-stat span { font-size: .88rem; color: rgba(246,241,231,.75); }

/* ---------- Sections ---------- */
.section { padding: 5rem 0; }
.section-blanc { background: var(--blanc); }
.section-nuit { background: var(--nuit); color: var(--creme); }
.section-nuit h2 { color: var(--blanc); }
.section-nuit .kicker { color: var(--azur); }
.entete-section { max-width: 640px; margin-bottom: 3rem; }
.entete-section.centre { margin-inline: auto; text-align: center; }

/* Sections condensées (« Nos formats », « Qui vous forme ») : peu de texte,
   donc pas besoin de la hauteur des sections qui portent des listes. */
.section-compacte { padding: 3.2rem 0; }
.section-compacte .entete-section { margin-bottom: 1.7rem; }
.section-compacte .grille-formats,
.section-compacte .grille-financement { gap: 1.4rem; }
.section-compacte .carte-format,
.section-compacte .carte-financement { padding: 1.5rem 1.6rem; }
.section-compacte .format-ico { width: 38px; height: 38px; margin-bottom: .5rem; }
.section-compacte .avatars-metiers { margin-bottom: .7rem; }
.section-compacte .formateur-avatar { width: 56px; height: 56px; }
.section-compacte .formateur-avatar img { padding: 7px; }
.section-compacte .avatars-metiers .formateur-avatar + .formateur-avatar { margin-left: -14px; }

/* ---------- Filtres catalogue ---------- */
.filtres {
  display: flex;
  gap: .7rem;
  flex-wrap: wrap;
  margin-bottom: 2.4rem;
}
.filtre {
  font-family: var(--font-texte);
  font-size: .88rem;
  font-weight: 500;
  padding: .5rem 1.1rem;
  background: var(--blanc);
  color: var(--gris-texte);
  border: 1px solid var(--gris-ligne);
  border-radius: 999px;
  cursor: pointer;
  transition: all .15s;
}
.filtre .picto { width: 15px; height: 15px; margin-right: .35rem; }
.filtre:hover { border-color: var(--azur); color: var(--azur); }
.filtre.actif { background: var(--nuit); color: var(--blanc); border-color: var(--nuit); }

/* ---------- Cartes formation ---------- */
.grille-formations {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 1.8rem;
}
.carte-formation {
  background: var(--blanc);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--ombre);
  display: flex;
  flex-direction: column;
  transition: transform .18s ease, box-shadow .18s ease;
}
.carte-formation:hover { transform: translateY(-5px); box-shadow: 0 16px 40px rgba(18,47,74,.16); }
/* Visuel de carte : photo désaturée + bichromie nuit → teinte du format (charte §07) */
.carte-visuel {
  height: 150px;
  position: relative;
  display: flex;
  align-items: flex-end;
  padding: 1rem;
  overflow: hidden;
  background: var(--nuit);
  --teinte: var(--azur);
}
/* La photo, en niveaux de gris */
.carte-visuel img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(100%) contrast(1.02) brightness(1.25);
  transition: transform .45s ease;
}
/* Le calque de teinte qui « soude la collection » */
.carte-visuel::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--nuit) 0%, var(--teinte) 115%);
  mix-blend-mode: multiply;
}
.carte-formation:hover .carte-visuel img { transform: scale(1.06); }
.carte-visuel .pastille {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background: var(--blanc);
  z-index: 2;
}
.visuel-azur { --teinte: var(--azur); }
.visuel-corail { --teinte: var(--corail); }
.visuel-soleil { --teinte: var(--soleil); }
.carte-corps { padding: 1.4rem 1.5rem 1.6rem; display: flex; flex-direction: column; flex: 1; }
.carte-professions { font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 600; color: var(--azur); margin-bottom: .5rem; }
.carte-corps h3 { margin-bottom: .5rem; }
.carte-corps h3 a { color: var(--nuit); }
.carte-corps h3 a:hover { color: var(--azur); }
.carte-resume { font-size: .92rem; color: var(--gris-texte); flex: 1; }
.carte-meta {
  display: flex;
  gap: 1rem;
  font-size: .85rem;
  color: var(--gris-texte);
  margin: 1rem 0;
  flex-wrap: wrap;
}
/* Prochaine session ouverte, posée par js/places.js sur les cartes du
   catalogue. Absente si le serveur ne répond pas : la carte reste lisible.
   ⚠️ Ne pas nommer cette classe « carte-prochaine » : ce nom sert déjà à
   la carte de l'espace apprenant, plus bas dans cette feuille. */
.session-suivante {
  background: var(--creme);
  border-radius: 10px;
  padding: .55rem .75rem;
  margin-bottom: 1rem;
  font-size: .82rem;
}
.session-suivante .etiquette {
  display: block;
  font-size: .67rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--gris-texte);
  margin-bottom: .2rem;
}
.session-suivante .detail {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: .7rem;
}
.session-suivante .quand { color: var(--gris-texte); min-width: 0; }
.session-suivante .picto { width: 14px; height: 14px; vertical-align: -2px; margin-right: .25rem; }
.session-suivante .quand strong { color: var(--nuit); display: block; }
.session-suivante .places { font-weight: 700; color: var(--vert); white-space: nowrap; }
.session-suivante .places.limite { color: var(--corail); }
.session-suivante.complet { background: var(--corail-pale); }
.session-suivante.complet .places { color: var(--corail); }

.carte-pied {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid var(--gris-ligne);
  padding-top: 1rem;
}
/* Bouton du catalogue : « Je découvre » est plus long que « Découvrir ».
   Il doit tenir sur une seule ligne, quitte à céder de la place au tarif. */
.carte-pied .btn {
  white-space: nowrap;
  flex-shrink: 0;
  font-size: .88rem;
  padding: .62rem 1.15rem;
}
.carte-pied .prix { min-width: 0; }

.prix { font-family: var(--font-titre); font-weight: 800; font-size: 1.3rem; }
.prix small { font-family: var(--font-texte); font-weight: 400; font-size: .75rem; color: var(--gris-texte); display: block; }

/* ---------- Financement ---------- */
.grille-financement {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.8rem;
}
.carte-financement {
  background: var(--blanc);
  border-radius: var(--radius-lg);
  padding: 2rem;
  box-shadow: var(--ombre);
  border-top: 5px solid var(--azur);
}
.carte-financement.corail { border-top-color: var(--corail); }
.carte-financement h3 { margin-bottom: .8rem; }
.carte-financement ul { list-style: none; margin-top: 1rem; }
.carte-financement li { padding-left: 1.5rem; position: relative; margin-bottom: .6rem; font-size: .93rem; color: var(--gris-texte); }
.carte-financement li::before { content: "●"; color: var(--azur); position: absolute; left: 0; font-size: .65rem; top: .35rem; }
.carte-financement.corail li::before { color: var(--corail); }

/* ---------- Formats de formation (2 façons de se former) ---------- */
/* Deux cartes seulement : on fixe deux colonnes plutôt qu'un auto-fit, sinon
   une largeur intermédiaire les empilerait alors qu'elles tiennent côte à côte. */
.grille-formats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.8rem; }
@media (max-width: 700px) { .grille-formats { grid-template-columns: 1fr; } }
.carte-format {
  background: var(--blanc);
  border-radius: var(--radius-lg);
  padding: 2rem 1.8rem;
  box-shadow: var(--ombre);
  border-top: 5px solid var(--teinte, var(--azur));
  transition: transform .18s ease, box-shadow .18s ease;
}
.carte-format:hover { transform: translateY(-4px); box-shadow: 0 16px 40px rgba(18,47,74,.14); }
/* Les deux formats sont pris en charge par le FIF PL : même liseré soleil,
   c'est le picto qui dit la modalité (charte des formats V2). */
.carte-format.presentiel,
.carte-format.webinaire { --teinte: var(--soleil); }
.format-ico { width: 44px; height: 44px; margin-bottom: .9rem; display: block; }
.carte-format h3 { font-size: 1.2rem; margin-bottom: .2rem; }
.format-accroche {
  font-family: var(--font-edito);
  font-style: italic;
  font-size: 1rem;
  color: var(--azur);
  display: block;
  margin-bottom: .7rem;
}
.carte-format p { font-size: .93rem; color: var(--gris-texte); }

/* ---------- Nos engagements ---------- */
/* Logo Qualiopi — le fichier est transparent et son texte est bleu nuit :
   il se pose TOUJOURS sur un cartouche blanc, avec une marge de respiration
   autour, comme l'exige la charte d'utilisation de la marque. */
.logo-qualiopi {
  display: inline-block;
  background: #fff;
  border-radius: 10px;
  padding: .7rem .9rem;
  line-height: 0;
  max-width: 210px;
}
.logo-qualiopi img { width: 100%; height: auto; display: block; }
.bandeau-qualiopi {
  margin-top: 2.5rem;
  padding-top: 2rem;
  border-top: 1px solid var(--gris-ligne);
  text-align: center;
}
.bandeau-qualiopi .logo-qualiopi { box-shadow: 0 2px 14px rgba(18, 47, 74, .08); }
/* Le pied de page impose height:52px à ses images (logo VEGA) :
   on rend la main au badge, dont la mention légale doit rester lisible. */
.pied-logo .logo-qualiopi { margin-top: 1.1rem; max-width: 200px; }
.pied-logo .logo-qualiopi img { height: auto; width: 100%; margin-bottom: 0; }

.grille-engagements { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
@media (max-width: 820px) { .grille-engagements { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .grille-engagements { grid-template-columns: 1fr; } }
.engagement { display: flex; flex-direction: column; gap: .4rem; }
.engagement .eng-ico {
  width: 46px; height: 46px;
  border-radius: 50%;
  background: var(--azur-pale);
  color: var(--azur);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.2rem;
  margin-bottom: .3rem;
}
.engagement strong { font-family: var(--font-titre); font-size: 1.02rem; line-height: 1.25; }
.engagement span { font-size: .89rem; color: var(--gris-texte); }
/* Plus employée depuis le retrait du taux de satisfaction de démonstration :
   conservée pour le jour où le taux réel 2026 reprendra sa place. */
.engagement .eng-chiffre {
  font-family: var(--font-titre);
  font-weight: 800;
  font-size: 1.9rem;
  color: var(--nuit);
  line-height: 1;
}

/* ---------- Étapes ---------- */
.etapes { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 2rem; counter-reset: etape; }
.etape { position: relative; }
.etape-num {
  font-family: var(--font-titre);
  font-weight: 800;
  font-size: 1.1rem;
  color: var(--blanc);
  background: var(--azur);
  width: 44px; height: 44px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 1rem;
}
.etape h3 { font-size: 1.05rem; margin-bottom: .4rem; }
.etape p { font-size: .9rem; color: var(--gris-texte); }
.section-nuit .etape p { color: rgba(246,241,231,.75); }

/* ---------- Témoignage ---------- */
.temoignage {
  font-family: var(--font-edito);
  font-style: italic;
  font-size: clamp(1.3rem, 2.4vw, 1.8rem);
  line-height: 1.45;
  max-width: 28em;
  margin: 0 auto;
  text-align: center;
}
.temoignage-auteur {
  font-family: var(--font-texte);
  font-style: normal;
  font-size: .9rem;
  color: var(--azur);
  font-weight: 600;
  display: block;
  margin-top: 1.4rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* ---------- Pied de page ---------- */
.pied {
  background: var(--nuit);
  color: rgba(246,241,231,.8);
  padding: 4rem 0 2rem;
  font-size: .9rem;
}
.pied-grille { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 2.5rem; margin-bottom: 3rem; }
.pied h4 { color: var(--blanc); font-size: .95rem; margin-bottom: 1rem; }
.pied a { color: rgba(246,241,231,.8); display: block; margin-bottom: .5rem; }
.pied a:hover { color: var(--azur); }
.pied-logo img { height: 52px; margin-bottom: 1rem; }
.pied-bas {
  border-top: 1px solid rgba(246,241,231,.15);
  padding-top: 1.5rem;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  font-size: .8rem;
  color: rgba(246,241,231,.55);
}

/* ---------- Fiche formation ---------- */
.fil-ariane { font-size: .85rem; color: var(--gris-texte); padding: 1.2rem 0 0; }
.fil-ariane a { color: var(--gris-texte); }
.fil-ariane a:hover { color: var(--azur); }

/* Bandeau de fiche formation : le même bleu que le bandeau de l'accueil,
   mais bas de plafond — pas de slider ici, seulement le titre et le chapeau.
   Le fil d'Ariane est repris dans le bandeau pour éviter une bande crème
   coincée entre l'en-tête blanc et le bleu. */
.fiche-entete {
  background: linear-gradient(150deg, var(--nuit) 0%, var(--nuit-2) 100%);
  color: var(--creme);
  padding: 1rem 0 2.4rem;
}
.fiche-entete .fil-ariane { padding: 0 0 1.1rem; color: rgba(246, 241, 231, .7); }
.fiche-entete .fil-ariane a { color: rgba(246, 241, 231, .7); }
.fiche-entete .fil-ariane a:hover { color: var(--azur); }
.fiche-entete .kicker { color: var(--azur); }
.fiche-entete h1 {
  color: var(--blanc);
  font-size: clamp(1.7rem, 3.2vw, 2.4rem);
  max-width: 18em;
  margin: .4rem 0 .8rem;
}
.fiche-entete .chapeau { color: rgba(246, 241, 231, .85); }
/* Le bandeau portant sa propre respiration basse, c'est au contenu qui suit
   de reprendre l'air perdu sous le bleu. */
.fiche-entete + .conteneur { padding-top: 2.4rem; }
.fiche-badges { display: flex; gap: .6rem; flex-wrap: wrap; margin-bottom: 1rem; }

.fiche-grille { display: grid; grid-template-columns: 1fr 380px; gap: 3rem; align-items: start; }
@media (max-width: 900px) { .fiche-grille { grid-template-columns: 1fr; } }

/* Liseré haut, comme les cartes « Nos formats » de l'accueil : il rattache
   les blocs de la fiche au reste de la collection. */
.bloc-contenu {
  background: var(--blanc);
  border-radius: var(--radius-lg);
  padding: 2rem;
  margin-bottom: 1.6rem;
  box-shadow: var(--ombre);
  border-top: 5px solid var(--teinte, var(--azur));
}
.bloc-contenu h2 { font-size: 1.35rem; margin-bottom: 1rem; }
.bloc-contenu ul { list-style: none; }
.bloc-contenu ul li { padding-left: 1.6rem; position: relative; margin-bottom: .6rem; color: var(--gris-texte); }
.bloc-contenu ul li::before { content: "●"; color: var(--azur); position: absolute; left: 0; font-size: .65rem; top: .35rem; }

.programme-jour { border-left: 3px solid var(--azur); padding: .2rem 0 .2rem 1.3rem; margin-bottom: 1.4rem; }
.programme-jour h3 { font-size: 1rem; margin-bottom: .4rem; }
.programme-jour p { font-size: .92rem; color: var(--gris-texte); }
/* Objectifs d'une demi-journée. La numérotation court sur toute la formation :
   chaque demi-journée reprend au numéro suivant par l'attribut start de l'<ol>.
   Les numéros restent portés par la liste — les écrire dans le texte les
   priverait de sens à la lecture d'écran, et il faudrait tout renuméroter à la
   main dès qu'un objectif change de place. */
.programme-jour ol { padding-left: 1.5rem; }
.programme-jour ol li { font-size: .92rem; color: var(--gris-texte); margin-bottom: .35rem; padding-left: .2rem; }
.programme-jour ol li::marker { color: var(--azur); font-weight: 600; }

/* Panneau latéral d'inscription */
.panneau-inscription {
  background: var(--blanc);
  border-radius: var(--radius-lg);
  box-shadow: var(--ombre);
  padding: 1.8rem;
  position: sticky;
  top: 100px;
}
.panneau-inscription .prix { font-size: 2rem; }
.panneau-inscription hr { border: none; border-top: 1px solid var(--gris-ligne); margin: 1.2rem 0; }

.session-choix { display: flex; flex-direction: column; gap: .8rem; margin: 1rem 0 1.4rem; }
.session-carte {
  border: 2px solid var(--gris-ligne);
  border-radius: var(--radius);
  padding: .9rem 1rem;
  cursor: pointer;
  transition: border-color .15s;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}
.session-carte:hover { border-color: var(--azur); }
.session-carte.selectionnee { border-color: var(--azur); background: var(--azur-pale); }
.session-date { font-weight: 600; font-size: .95rem; }
.session-lieu { font-size: .82rem; color: var(--gris-texte); }
.session-places { font-size: .78rem; font-weight: 600; color: var(--vert); white-space: nowrap; }
.session-places.limite { color: var(--corail); }

/* Session complète : visible mais non sélectionnable */
.session-carte.complet { opacity: .55; cursor: not-allowed; background: var(--gris-fond, transparent); }
.session-carte.complet:hover { border-color: var(--gris-ligne); }
.session-carte.complet .session-date { text-decoration: line-through; }
.btn.btn-desactive { opacity: .55; cursor: not-allowed; pointer-events: none; }

.choix-financement { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; margin-bottom: 1.4rem; }
.option-financement {
  border: 2px solid var(--gris-ligne);
  border-radius: var(--radius);
  padding: .9rem;
  text-align: center;
  cursor: pointer;
  transition: border-color .15s;
}
.option-financement:hover { border-color: var(--azur); }
.option-financement.selectionnee { border-color: var(--azur); background: var(--azur-pale); }
.option-financement strong { font-family: var(--font-titre); font-size: .95rem; display: block; }
.option-financement span { font-size: .75rem; color: var(--gris-texte); }

.note-fifpl {
  background: var(--soleil-pale);
  border-radius: var(--radius);
  padding: .9rem 1rem;
  font-size: .82rem;
  color: #7A5613;
  margin-bottom: 1.2rem;
}

.formateur { display: flex; gap: 1.2rem; align-items: center; }
.formateur-avatar {
  width: 72px; height: 72px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--nuit), var(--azur));
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  color: var(--blanc);
  font-family: var(--font-titre);
  font-weight: 800;
  font-size: 1.3rem;
  overflow: hidden;      /* l'illustration ne déborde pas du disque */
}
/* Avatar illustré : le PNG est transparent, il se pose sur le dégradé.
   Illustration centrée, avec une marge égale tout autour pour que le
   fond bleu reste visible sur tout le pourtour. */
.formateur-avatar img {
  width: 100%; height: 100%;
  padding: 9px;
  box-sizing: border-box;
  object-fit: contain;
  object-position: center;
  display: block;
}
/* Avatars superposés : équipe mixte d'une fiche, ou métiers de l'accueil */
.formateur-duo,
.avatars-metiers { display: flex; flex-shrink: 0; }
.avatars-metiers { margin-bottom: 1.2rem; }
.formateur-duo .formateur-avatar + .formateur-avatar,
.avatars-metiers .formateur-avatar + .formateur-avatar {
  margin-left: -18px;
  box-shadow: 0 0 0 3px var(--blanc);
}

/* ---------- Programme téléchargeable (fiches formation) ---------- */
.programme-pdf {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 1.4rem;
  margin: 0 0 1.6rem;   /* le cadre se place juste sous le titre du bloc */
  padding: 1.1rem 1.3rem;
  background: var(--azur-pale);
  border-radius: var(--radius);
}
.programme-pdf-texte strong {
  display: block;
  font-family: var(--font-titre);
  font-weight: 700;
  font-size: .98rem;
  margin-bottom: .15rem;
}
.programme-pdf-texte span { font-size: .85rem; color: var(--gris-texte); }
.programme-pdf-liens { display: flex; flex-wrap: wrap; gap: .6rem; }
.lien-pdf {
  display: inline-flex;
  align-items: baseline;
  gap: .45rem;
  background: var(--blanc);
  border: 1.5px solid var(--azur);
  border-radius: 999px;
  padding: .5rem 1.05rem;
  font-weight: 600;
  font-size: .87rem;
  color: var(--nuit);
  white-space: nowrap;
  transition: background .15s ease, color .15s ease;
}
.lien-pdf:hover { background: var(--azur); color: var(--blanc); }

/* ---------- Page création de compte (inscription.html) ---------- */
.page-auth {
  min-height: calc(100vh - 76px);
  display: grid;
  grid-template-columns: 1fr 1fr;
}
@media (max-width: 900px) { .page-auth { grid-template-columns: 1fr; } .auth-visuel { display: none; } }
.auth-visuel {
  background: linear-gradient(150deg, var(--nuit) 0%, var(--nuit-2) 100%);
  color: var(--creme);
  padding: 4rem 3rem;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.auth-visuel h2 { color: var(--blanc); max-width: 12em; margin-bottom: 1rem; }
.auth-formulaire { padding: 4rem 3rem; display: flex; flex-direction: column; justify-content: center; max-width: 560px; width: 100%; margin: 0 auto; }

/* ---------- Page panier (panier.html — liée à une session) ---------- */
.panier-recap {
  background: var(--blanc);
  border-radius: var(--radius-lg);
  box-shadow: var(--ombre);
  padding: 2.2rem 2rem 1.6rem;
  max-width: 780px;
  margin: 0 auto;
  text-align: center;
}
.panier-formation h2 { font-size: clamp(1.2rem, 2.4vw, 1.6rem); }
.panier-meta {
  display: flex;
  justify-content: center;
  gap: 2.5rem;
  flex-wrap: wrap;
  margin: 1.6rem 0 1.2rem;
  padding: 1.2rem 0;
  border-top: 1px solid var(--gris-ligne);
  border-bottom: 1px solid var(--gris-ligne);
}
.panier-item { display: flex; flex-direction: column; align-items: center; }
.panier-item .panier-ico { font-size: 1.2rem; margin-bottom: .2rem; }
.panier-item strong { font-family: var(--font-titre); font-weight: 800; font-size: 1.05rem; }
.panier-item span:last-child { font-size: .78rem; color: var(--gris-texte); }
.panier-note { font-size: .8rem; color: var(--corail); }
.panier-note a { display: block; margin-top: .3rem; color: var(--gris-texte); text-decoration: underline; }
.panier-note a:hover { color: var(--azur); }

.auth-duo {
  display: grid;
  grid-template-columns: 1fr 1.25fr;
  gap: 1.8rem;
  align-items: start;
  max-width: 980px;
  margin: 2.5rem auto 0;
}
@media (max-width: 900px) { .auth-duo { grid-template-columns: 1fr; } }
.auth-carte {
  background: var(--blanc);
  border-radius: var(--radius-lg);
  box-shadow: var(--ombre);
  padding: 2rem;
}

.bascule-statut {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .6rem;
  margin: 1.2rem 0 1.4rem;
}
.bascule {
  font-family: var(--font-texte);
  font-weight: 600;
  font-size: .88rem;
  padding: .65rem .5rem;
  border-radius: 999px;
  border: 2px solid var(--gris-ligne);
  background: var(--blanc);
  color: var(--gris-texte);
  cursor: pointer;
  transition: all .15s;
}
.bascule:hover { border-color: var(--azur); color: var(--azur); }
.bascule.actif { background: var(--azur); border-color: var(--azur); color: var(--blanc); }

.bandeau-aide {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.5rem;
  max-width: 980px;
  margin: 2.5rem auto 0;
  background: var(--blanc);
  border-radius: var(--radius-lg);
  box-shadow: var(--ombre);
  padding: 1.8rem 2rem;
}
.aide-item { display: flex; flex-direction: column; gap: .2rem; font-size: .88rem; color: var(--gris-texte); }
.aide-item .aide-ico { font-size: 1.4rem; }
.aide-item strong { font-family: var(--font-titre); color: var(--nuit); }

.champ { margin-bottom: 1.2rem; }
.champ label { display: block; font-weight: 600; font-size: .88rem; margin-bottom: .4rem; }
.champ input, .champ select {
  width: 100%;
  padding: .75rem 1rem;
  border: 1.5px solid var(--gris-ligne);
  border-radius: 10px;
  font-family: var(--font-texte);
  font-size: .95rem;
  background: var(--blanc);
  color: var(--nuit);
}
.champ input:focus, .champ select:focus { outline: none; border-color: var(--azur); box-shadow: 0 0 0 3px rgba(41,182,232,.15); }
.champ-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.champ-aide { font-size: .78rem; color: var(--gris-texte); margin-top: .3rem; }

.etapes-progression {
  display: flex;
  gap: .5rem;
  margin-bottom: 2rem;
}
.etape-point {
  flex: 1;
  height: 5px;
  border-radius: 99px;
  background: var(--gris-ligne);
}
.etape-point.faite { background: var(--azur); }

/* ---------- Menu latéral (tiroir) ---------- */
.burger {
  display: flex;
  align-items: center;
  gap: .55rem;
  font-family: var(--font-texte);
  font-weight: 600;
  font-size: .9rem;
  color: var(--nuit);
  background: none;
  border: 1.5px solid var(--gris-ligne);
  border-radius: 999px;
  padding: .5rem 1.1rem;
  cursor: pointer;
  transition: all .15s;
  flex-shrink: 0;
}
.burger:hover { border-color: var(--azur); color: var(--azur); }
.burger-icone { font-size: 1.05rem; line-height: 1; }

.voile {
  position: fixed;
  inset: 0;
  background: rgba(18, 47, 74, .55);
  z-index: 90;
}
.tiroir {
  position: fixed;
  top: 0; left: 0; bottom: 0;
  width: min(400px, 92vw);
  background: var(--blanc);
  z-index: 100;
  transform: translateX(-105%);
  transition: transform .25s ease;
  box-shadow: 0 0 50px rgba(18,47,74,.25);
  display: flex;
  flex-direction: column;
}
.tiroir.ouvert { transform: none; }
.tiroir-tete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.1rem 1.5rem;
  border-bottom: 1px solid var(--gris-ligne);
}
.tiroir-tete .wordmark { font-size: 1.2rem; }
.tiroir-fermer {
  background: none;
  border: none;
  font-size: 1.5rem;
  color: var(--gris-texte);
  cursor: pointer;
  line-height: 1;
  padding: .2rem;
}
.tiroir-fermer:hover { color: var(--corail); }
.tiroir-corps { flex: 1; overflow-y: auto; padding: 1.3rem 1.5rem; }

.tiroir-recherche { position: relative; margin-bottom: 1.2rem; }
.tiroir-recherche input {
  width: 100%;
  padding: .75rem 1rem .75rem 2.5rem;
  border: 1.5px solid var(--gris-ligne);
  border-radius: 999px;
  font-family: var(--font-texte);
  font-size: .92rem;
  color: var(--nuit);
  background: var(--creme);
}
.tiroir-recherche input:focus { outline: none; border-color: var(--azur); background: var(--blanc); }
.tiroir-recherche::before {
  content: "🔍";
  position: absolute;
  left: .9rem; top: 50%;
  transform: translateY(-50%);
  font-size: .9rem;
  opacity: .6;
}

.tiroir details { border-bottom: 1px solid var(--gris-ligne); }
.tiroir summary {
  font-family: var(--font-titre);
  font-weight: 700;
  font-size: 1rem;
  padding: .9rem 0;
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.tiroir summary::-webkit-details-marker { display: none; }
.tiroir summary::after { content: "+"; color: var(--azur); font-size: 1.3rem; font-weight: 700; }
.tiroir details[open] summary::after { content: "−"; }

.tiroir-options { display: flex; flex-wrap: wrap; gap: .5rem; padding: 0 0 1.1rem; }
.coche { cursor: pointer; }
.coche input { position: absolute; opacity: 0; pointer-events: none; }
.coche span {
  display: inline-block;
  font-size: .84rem;
  font-weight: 500;
  color: var(--gris-texte);
  border: 1.5px solid var(--gris-ligne);
  border-radius: 999px;
  padding: .35rem .85rem;
  transition: all .15s;
}
.coche:hover span { border-color: var(--azur); color: var(--azur); }
.coche input:checked + span { background: var(--nuit); border-color: var(--nuit); color: var(--blanc); }

.tiroir-liens { padding: 1.1rem 0 0; }
.tiroir-liens a { display: block; color: var(--nuit); font-weight: 500; padding: .45rem 0; }
.tiroir-liens a:hover { color: var(--azur); }
.tiroir-pied { padding: 1.1rem 1.5rem; border-top: 1px solid var(--gris-ligne); }

/* ---------- Actualités ---------- */
.actu-date {
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--gris-texte);
  margin-bottom: .4rem;
}
.actu-vedette {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  background: var(--nuit);
  border-radius: var(--radius-lg);
  overflow: hidden;
  color: var(--creme);
  margin-bottom: 2.5rem;
  box-shadow: var(--ombre);
}
@media (max-width: 800px) { .actu-vedette { grid-template-columns: 1fr; } }
.actu-vedette-visuel {
  background: var(--nuit);
  min-height: 260px;
  position: relative;
  overflow: hidden;
  --teinte: var(--azur);
}
.actu-vedette-visuel img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(100%) contrast(1.02) brightness(1.25);
}
.actu-vedette-visuel::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--nuit) 0%, var(--teinte) 160%);
  mix-blend-mode: multiply;
}
.actu-vedette-visuel .pastille {
  position: absolute;
  top: 1.2rem;
  left: 1.2rem;
  background: var(--blanc);
  z-index: 2;
}
.actu-vedette-corps { padding: 2.2rem; display: flex; flex-direction: column; justify-content: center; }
.actu-vedette-corps h2 { color: var(--blanc); margin: .3rem 0 .8rem; }
.actu-vedette-corps p { color: rgba(246,241,231,.8); font-size: .95rem; }
.actu-vedette-corps .actu-date { color: var(--azur); }

.bloc-lettre {
  background: var(--blanc);
  border-radius: var(--radius-lg);
  box-shadow: var(--ombre);
  padding: 2.5rem;
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 2rem;
  align-items: center;
  margin-top: 3rem;
}
@media (max-width: 800px) { .bloc-lettre { grid-template-columns: 1fr; } }
.champ-lettre { display: flex; gap: .6rem; }
.champ-lettre input {
  flex: 1;
  padding: .75rem 1.1rem;
  border: 1.5px solid var(--gris-ligne);
  border-radius: 999px;
  font-family: var(--font-texte);
  font-size: .92rem;
}
.champ-lettre input:focus { outline: none; border-color: var(--azur); }

/* ============================================================
   ESPACE APPRENANT (espace.html)
   ============================================================ */
.entete-connecte { display: flex; align-items: center; gap: .7rem; margin-left: auto; }
.entete-connecte .formateur-avatar { width: 38px; height: 38px; font-size: .85rem; }
.entete-connecte .qui strong { display: block; font-size: .88rem; line-height: 1.2; white-space: nowrap; }
.entete-connecte .qui span { font-size: .75rem; color: var(--gris-texte); white-space: nowrap; }

.banniere-apprenant {
  background: linear-gradient(150deg, var(--nuit) 0%, var(--nuit-2) 100%);
  color: var(--creme);
  padding: 2.8rem 0 3rem;
  position: relative;
  overflow: hidden;
}
.banniere-apprenant h1 { color: var(--blanc); font-size: clamp(1.7rem, 3.2vw, 2.4rem); }
.banniere-apprenant .kicker { color: var(--azur); }
.banniere-apprenant .chapeau { color: rgba(246,241,231,.8); margin-top: .5rem; }

.espace-grille {
  display: grid;
  grid-template-columns: 230px 1fr;
  gap: 2rem;
  align-items: start;
  margin-top: -2rem;
  position: relative;
  z-index: 2;
}
@media (max-width: 900px) { .espace-grille { grid-template-columns: 1fr; margin-top: 1.5rem; } }

.espace-menu {
  background: var(--blanc);
  border-radius: var(--radius-lg);
  box-shadow: var(--ombre);
  padding: .8rem;
  position: sticky;
  top: 96px;
}
@media (max-width: 900px) { .espace-menu { position: static; display: flex; overflow-x: auto; gap: .3rem; } }
.espace-menu a {
  display: flex;
  align-items: center;
  gap: .6rem;
  color: var(--nuit);
  font-size: .92rem;
  font-weight: 500;
  padding: .65rem .85rem;
  border-radius: 10px;
  white-space: nowrap;
}
.espace-menu a:hover { background: var(--creme); }
.espace-menu a.actif { background: var(--azur); color: var(--blanc); }
.espace-menu .badge-compteur {
  margin-left: auto;
  background: var(--corail);
  color: var(--blanc);
  font-size: .72rem;
  font-weight: 700;
  border-radius: 999px;
  padding: .05rem .5rem;
}

.espace-chiffres { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1rem; margin-bottom: 1.6rem; }
.chiffre-carte { background: var(--blanc); border-radius: var(--radius); box-shadow: var(--ombre); padding: 1.1rem 1.2rem; }
.chiffre-carte .stat-valeur { font-size: 1.6rem; }
.chiffre-carte .stat-libelle { font-size: .74rem; }

/* Prochaine session — carte mise en avant */
.carte-prochaine {
  background: var(--blanc);
  border-radius: var(--radius-lg);
  box-shadow: var(--ombre);
  border-top: 5px solid var(--soleil);
  padding: 1.6rem;
  margin-bottom: 1.6rem;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 1.5rem;
  align-items: center;
}
@media (max-width: 700px) { .carte-prochaine { grid-template-columns: 1fr; } }
.compte-a-rebours {
  text-align: center;
  background: var(--creme);
  border-radius: var(--radius);
  padding: 1rem 1.6rem;
}
.compte-a-rebours strong { font-family: var(--font-titre); font-weight: 800; font-size: 2rem; display: block; color: var(--nuit); }
.compte-a-rebours span { font-size: .76rem; letter-spacing: .08em; text-transform: uppercase; color: var(--gris-texte); }

/* Cartes d'inscription */
.carte-inscription {
  background: var(--blanc);
  border-radius: var(--radius);
  box-shadow: var(--ombre);
  padding: 1.3rem 1.4rem;
  margin-bottom: 1rem;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 1.2rem;
  align-items: center;
  border-left: 4px solid var(--azur);
}
.carte-inscription.attente { border-left-color: var(--soleil); }
.carte-inscription.terminee { border-left-color: var(--vert); }
@media (max-width: 700px) { .carte-inscription { grid-template-columns: 1fr; } }
.carte-inscription h3 { font-size: 1.05rem; margin-bottom: .3rem; }
.carte-inscription .carte-meta { margin: .5rem 0 0; font-size: .82rem; }
.inscription-actions { display: flex; flex-direction: column; gap: .5rem; min-width: 190px; }
.inscription-actions .btn { padding: .55rem 1.1rem; font-size: .88rem; text-align: center; }

/* Encart FIFPL à compléter */
.encart-action {
  background: var(--soleil-pale);
  border-radius: var(--radius);
  padding: 1rem 1.2rem;
  margin-top: .9rem;
  font-size: .86rem;
  color: #7A5613;
  display: flex;
  gap: .8rem;
  align-items: flex-start;
}
.encart-action .btn { margin-top: .6rem; }

/* Dépôt de fichier */
.zone-depot {
  border: 2px dashed var(--gris-ligne);
  border-radius: var(--radius);
  padding: 1.4rem;
  text-align: center;
  font-size: .88rem;
  color: var(--gris-texte);
  cursor: pointer;
  transition: all .15s;
}
.zone-depot:hover { border-color: var(--azur); background: var(--azur-pale); color: var(--nuit); }

/* Étapes de suivi (parcours d'une inscription) */
.suivi { display: flex; gap: .4rem; margin-top: .9rem; }
.suivi-etape { flex: 1; text-align: center; font-size: .7rem; color: var(--gris-texte); }
.suivi-etape .puce {
  height: 6px;
  border-radius: 999px;
  background: var(--gris-ligne);
  margin-bottom: .35rem;
}
.suivi-etape.faite .puce { background: var(--vert); }
.suivi-etape.encours .puce { background: var(--soleil); }
.suivi-etape.faite, .suivi-etape.encours { color: var(--nuit); font-weight: 600; }

/* Documents */
.doc-ligne {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: .8rem 0;
  border-bottom: 1px solid var(--creme);
  font-size: .9rem;
}
.doc-ligne:last-child { border-bottom: none; }
.doc-ico { font-size: 1.3rem; }
.doc-ligne .doc-nom { flex: 1; }
.doc-ligne .doc-nom strong { display: block; }
.doc-ligne .doc-nom span { font-size: .78rem; color: var(--gris-texte); }

/* Étoiles d'évaluation */
.etoiles { color: var(--soleil); font-size: 1.4rem; letter-spacing: .15rem; cursor: pointer; }

/* ============================================================
   MODALE DE PRÉ-INSCRIPTION (reprise de la landing FIF-PL)
   ============================================================ */
.pi-voile { position: fixed; inset: 0; background: rgba(18,47,74,.6); z-index: 90; display: none; }
.pi-voile.ouvert { display: block; }
.pi-modale {
  position: fixed; inset: 0; z-index: 100; display: none;
  align-items: flex-start; justify-content: center;
  padding: 2rem 1rem; overflow-y: auto;
}
.pi-modale.ouvert { display: flex; }
.pi-boite {
  background: var(--blanc); border-radius: var(--radius-lg); max-width: 640px; width: 100%;
  box-shadow: 0 20px 60px rgba(18,47,74,.3); animation: pi-apparait .22s ease;
}
@keyframes pi-apparait { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.pi-tete {
  background: linear-gradient(140deg, var(--nuit), var(--nuit-2)); color: var(--blanc);
  padding: 1.5rem 1.8rem; border-radius: var(--radius-lg) var(--radius-lg) 0 0; position: relative;
}
.pi-tete h2 { color: var(--blanc); font-size: 1.3rem; margin-bottom: .3rem; }
.pi-fermer {
  position: absolute; top: 1rem; right: 1.2rem; background: none; border: none;
  color: var(--blanc); font-size: 1.5rem; cursor: pointer; line-height: 1; opacity: .8;
}
.pi-fermer:hover { opacity: 1; }
.pi-recap {
  background: rgba(255,255,255,.12); border-radius: 10px; padding: .8rem 1rem;
  margin-top: .9rem; font-size: .88rem; line-height: 1.7;
}
.pi-recap b { color: var(--blanc); }
.pi-corps { padding: 1.6rem 1.8rem; }
.pi-pot { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; }
.pi-message { padding: .9rem 1.1rem; border-radius: 10px; font-size: .9rem; margin-bottom: 1rem; display: none; }
.pi-message.erreur { background: var(--corail-pale); color: #A9291A; display: block; }
.pi-message.succes { background: var(--vert-pale); color: #1D6B48; display: block; }
/* Profession imposée par la formation : ni champ de saisie, ni menu —
   une valeur qu'on lit. Le formulaire l'envoie via un input caché. */
.profession-imposee {
  padding: .7rem .9rem;
  border: 1.5px solid var(--gris-ligne);
  border-radius: 10px;
  background: var(--creme);
  color: var(--nuit);
  font-weight: 600;
  font-size: .95rem;
}
.pi-rgpd { display: flex; gap: .6rem; align-items: flex-start; font-size: .84rem; color: var(--gris-texte); margin: 1rem 0; }
.pi-rgpd input { width: auto; margin-top: .25rem; flex-shrink: 0; }

/* ---------- Version maquette ---------- */
.version-maquette { font-size: .78rem; opacity: .8; }
.version-maquette a { color: inherit; text-decoration: underline; }
.version-maquette a:hover { color: var(--azur); }

/* ============================================================
   ESPACE ADMIN (admin.html)
   ============================================================ */
.admin-page { display: flex; min-height: 100vh; background: var(--creme); }

.admin-side {
  width: 250px;
  flex-shrink: 0;
  background: var(--nuit);
  color: var(--creme);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}
.admin-side-logo { padding: 1.4rem 1.5rem 1rem; }
.admin-side-logo img { height: 40px; }
.admin-side-logo span { display: block; font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: rgba(246,241,231,.6); margin-top: .5rem; }
.admin-nav { flex: 1; padding: .8rem; }
.admin-nav-titre { font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: rgba(246,241,231,.45); padding: 1rem .8rem .4rem; }
.admin-nav a {
  display: flex;
  align-items: center;
  gap: .7rem;
  color: rgba(246,241,231,.85);
  font-size: .92rem;
  font-weight: 500;
  padding: .6rem .8rem;
  border-radius: 10px;
  margin-bottom: 2px;
}
.admin-nav a:hover { background: rgba(255,255,255,.08); color: var(--blanc); }
.admin-nav a.actif { background: var(--azur); color: var(--blanc); }
.admin-nav .badge-compteur {
  margin-left: auto;
  background: var(--corail);
  color: var(--blanc);
  font-size: .72rem;
  font-weight: 700;
  border-radius: 999px;
  padding: .05rem .5rem;
}
.admin-side-pied { padding: 1rem 1.5rem; border-top: 1px solid rgba(255,255,255,.12); font-size: .8rem; color: rgba(246,241,231,.6); }
.admin-side-pied a { color: rgba(246,241,231,.8); }

.admin-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.admin-topbar {
  background: var(--blanc);
  border-bottom: 1px solid var(--gris-ligne);
  padding: .9rem 2rem;
  display: flex;
  align-items: center;
  gap: 1.5rem;
  position: sticky;
  top: 0;
  z-index: 20;
}
.admin-recherche { flex: 1; max-width: 420px; position: relative; }
.admin-recherche input {
  width: 100%;
  padding: .6rem 1rem .6rem 2.4rem;
  border: 1.5px solid var(--gris-ligne);
  border-radius: 999px;
  font-family: var(--font-texte);
  font-size: .9rem;
  background: var(--creme);
}
.admin-recherche::before { content: "🔍"; position: absolute; left: .85rem; top: 50%; transform: translateY(-50%); font-size: .85rem; opacity: .6; }
.admin-user { margin-left: auto; display: flex; align-items: center; gap: .8rem; font-size: .88rem; }
.admin-user .formateur-avatar { width: 40px; height: 40px; font-size: .95rem; }
.admin-user strong { display: block; line-height: 1.2; }
.admin-user span { color: var(--gris-texte); font-size: .78rem; }

.admin-contenu { padding: 2rem; }
.admin-contenu > h1 { font-size: 1.7rem; margin-bottom: .3rem; }
.admin-sous-titre { color: var(--gris-texte); font-size: .92rem; margin-bottom: 1.8rem; }

.admin-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 1.2rem; margin-bottom: 1.8rem; }
.stat-carte {
  background: var(--blanc);
  border-radius: var(--radius);
  padding: 1.3rem 1.4rem;
  box-shadow: var(--ombre);
  border-left: 4px solid var(--azur);
}
.stat-carte.corail { border-left-color: var(--corail); }
.stat-carte.soleil { border-left-color: var(--soleil); }
.stat-carte.vert { border-left-color: var(--vert); }
.stat-libelle { font-size: .8rem; font-weight: 600; color: var(--gris-texte); text-transform: uppercase; letter-spacing: .06em; }
.stat-valeur { font-family: var(--font-titre); font-weight: 800; font-size: 1.9rem; margin: .2rem 0; }
.stat-tendance { font-size: .8rem; font-weight: 600; }
.stat-tendance.hausse { color: var(--vert); }
.stat-tendance.baisse { color: var(--corail); }

.admin-grille { display: grid; grid-template-columns: 1.6fr 1fr; gap: 1.2rem; margin-bottom: 1.8rem; }
@media (max-width: 1100px) { .admin-grille { grid-template-columns: 1fr; } }
.admin-bloc { background: var(--blanc); border-radius: var(--radius); box-shadow: var(--ombre); padding: 1.5rem; }
.admin-bloc h2 { font-size: 1.05rem; margin-bottom: 1.1rem; display: flex; justify-content: space-between; align-items: center; }
.admin-bloc h2 a { font-family: var(--font-texte); font-size: .82rem; font-weight: 600; }

.admin-tableau { width: 100%; border-collapse: collapse; font-size: .87rem; }
.admin-tableau th {
  text-align: left;
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--gris-texte);
  padding: .5rem .6rem;
  border-bottom: 1px solid var(--gris-ligne);
}
.admin-tableau td { padding: .65rem .6rem; border-bottom: 1px solid var(--creme); vertical-align: middle; }
.admin-tableau tr:hover td { background: var(--creme); }
.admin-tableau .pastille { font-size: .72rem; padding: .18rem .6rem; }

.jauge { background: var(--creme); border-radius: 999px; height: 8px; overflow: hidden; margin-top: .35rem; }
.jauge-remplie { height: 100%; border-radius: 999px; background: var(--azur); }
.jauge-remplie.alerte { background: var(--corail); }
.session-ligne { display: flex; justify-content: space-between; gap: 1rem; padding: .7rem 0; border-bottom: 1px solid var(--creme); font-size: .88rem; }
.session-ligne:last-child { border-bottom: none; }
.session-ligne strong { display: block; font-size: .9rem; }
.session-ligne .session-lieu { font-size: .78rem; }
.session-jauge { min-width: 130px; text-align: right; font-size: .78rem; color: var(--gris-texte); }

.graph-barres { display: flex; align-items: flex-end; gap: .8rem; height: 180px; padding-top: .5rem; }
.graph-barre { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: .4rem; height: 100%; }
.graph-barre .barre { width: 100%; max-width: 46px; border-radius: 8px 8px 0 0; background: linear-gradient(180deg, var(--azur), #1E9AC8); }
.graph-barre .barre.passe { background: #C9DCE8; }
.graph-barre span { font-size: .72rem; color: var(--gris-texte); }
.graph-barre .valeur { font-weight: 700; color: var(--nuit); font-size: .76rem; }

.repartition-ligne { margin-bottom: 1rem; font-size: .85rem; }
.repartition-ligne .jauge { height: 10px; }

/* ---------- Admin : barre d'actions de page ---------- */
.admin-entete-page {
  display: flex;
  align-items: flex-start;
  gap: 1.5rem;
  margin-bottom: 1.6rem;
  flex-wrap: wrap;
}
.admin-entete-page .actions { margin-left: auto; display: flex; gap: .6rem; align-items: center; }
.admin-entete-page .btn { padding: .55rem 1.2rem; font-size: .9rem; }
.admin-fil { font-size: .82rem; color: var(--gris-texte); margin-bottom: .3rem; }
.admin-fil a { color: var(--gris-texte); }
.admin-fil a:hover { color: var(--azur); }

/* Barre d'outils : recherche + filtres d'un listing */
.admin-outils {
  display: flex;
  gap: .6rem;
  flex-wrap: wrap;
  align-items: center;
  background: var(--blanc);
  border-radius: var(--radius);
  box-shadow: var(--ombre);
  padding: .9rem 1.1rem;
  margin-bottom: 1.2rem;
}
.admin-outils input[type="search"], .admin-outils select {
  padding: .5rem .9rem;
  border: 1.5px solid var(--gris-ligne);
  border-radius: 999px;
  font-family: var(--font-texte);
  font-size: .87rem;
  background: var(--creme);
  color: var(--nuit);
}
.admin-outils input[type="search"] { flex: 1; min-width: 220px; }
.admin-outils input:focus, .admin-outils select:focus { outline: none; border-color: var(--azur); background: var(--blanc); }
.admin-compteur { margin-left: auto; font-size: .82rem; color: var(--gris-texte); }

/* Actions dans les tableaux */
.actions-ligne { display: flex; gap: .4rem; justify-content: flex-end; }
.btn-icone {
  border: 1.5px solid var(--gris-ligne);
  background: var(--blanc);
  border-radius: 8px;
  width: 32px; height: 32px;
  cursor: pointer;
  font-size: .9rem;
  line-height: 1;
  transition: all .15s;
}
.btn-icone:hover { border-color: var(--azur); background: var(--azur-pale); }
.btn-icone.danger:hover { border-color: var(--corail); background: var(--corail-pale); }

/* Onglets */
.admin-onglets {
  display: flex;
  gap: .3rem;
  border-bottom: 2px solid var(--gris-ligne);
  margin-bottom: 1.5rem;
  overflow-x: auto;
}
.admin-onglet {
  font-family: var(--font-texte);
  font-weight: 600;
  font-size: .9rem;
  color: var(--gris-texte);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  padding: .7rem 1.1rem;
  cursor: pointer;
  white-space: nowrap;
}
.admin-onglet:hover { color: var(--azur); }
.admin-onglet.actif { color: var(--nuit); border-bottom-color: var(--azur); }
.panneau-onglet[hidden] { display: none; }

/* Formulaires admin */
.form-grille { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }
@media (max-width: 800px) { .form-grille { grid-template-columns: 1fr; } }
.form-grille .pleine-largeur { grid-column: 1 / -1; }
.champ textarea {
  width: 100%;
  padding: .75rem 1rem;
  border: 1.5px solid var(--gris-ligne);
  border-radius: 10px;
  font-family: var(--font-texte);
  font-size: .95rem;
  color: var(--nuit);
  background: var(--blanc);
  resize: vertical;
  min-height: 120px;
}
.champ textarea:focus { outline: none; border-color: var(--azur); box-shadow: 0 0 0 3px rgba(41,182,232,.15); }

/* Mini éditeur de texte riche */
.editeur-barre {
  display: flex;
  gap: .2rem;
  border: 1.5px solid var(--gris-ligne);
  border-bottom: none;
  border-radius: 10px 10px 0 0;
  padding: .4rem;
  background: var(--creme);
  flex-wrap: wrap;
}
.editeur-barre button {
  background: none;
  border: none;
  border-radius: 6px;
  padding: .25rem .55rem;
  cursor: pointer;
  font-size: .85rem;
  color: var(--nuit);
}
.editeur-barre button:hover { background: var(--blanc); }
.editeur-barre + textarea { border-radius: 0 0 10px 10px; }

/* Interrupteur (publié / brouillon) */
.interrupteur { display: inline-flex; align-items: center; gap: .6rem; cursor: pointer; font-size: .88rem; font-weight: 600; }
.interrupteur input { position: absolute; opacity: 0; }
.interrupteur .piste {
  width: 44px; height: 24px;
  border-radius: 999px;
  background: var(--gris-ligne);
  position: relative;
  transition: background .18s;
  flex-shrink: 0;
}
.interrupteur .piste::after {
  content: "";
  position: absolute;
  top: 3px; left: 3px;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--blanc);
  transition: transform .18s;
}
.interrupteur input:checked + .piste { background: var(--vert); }
.interrupteur input:checked + .piste::after { transform: translateX(20px); }

/* ---------- Admin : éditeur de contenu (CMS) ---------- */
.cms-grille { display: grid; grid-template-columns: 300px 1fr; gap: 1.2rem; align-items: start; }
@media (max-width: 1100px) { .cms-grille { grid-template-columns: 1fr; } }

.cms-blocs { background: var(--blanc); border-radius: var(--radius); box-shadow: var(--ombre); padding: 1rem; }
.cms-blocs h2 { font-size: .95rem; margin-bottom: .8rem; }
.bloc-item {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .65rem .7rem;
  border: 1.5px solid var(--gris-ligne);
  border-radius: 10px;
  margin-bottom: .5rem;
  cursor: pointer;
  font-size: .88rem;
  transition: all .15s;
  background: var(--blanc);
}
.bloc-item:hover { border-color: var(--azur); }
.bloc-item.actif { border-color: var(--azur); background: var(--azur-pale); font-weight: 600; }
.bloc-poignee { color: var(--gris-ligne); cursor: grab; font-size: 1rem; }
.bloc-item:hover .bloc-poignee { color: var(--azur); }
.bloc-nom { flex: 1; }
.bloc-oeil { font-size: .85rem; opacity: .5; }
.bloc-item.masque { opacity: .55; }
.bloc-item.masque .bloc-nom { text-decoration: line-through; }

.cms-edition { background: var(--blanc); border-radius: var(--radius); box-shadow: var(--ombre); padding: 1.5rem; }
.cms-edition h2 { font-size: 1.05rem; margin-bottom: .3rem; }
.cms-edition .aide-bloc { font-size: .84rem; color: var(--gris-texte); margin-bottom: 1.3rem; }

/* Aperçu du rendu public */
.cms-apercu {
  border: 1px solid var(--gris-ligne);
  border-radius: var(--radius);
  overflow: hidden;
  margin-top: 1.2rem;
}
.cms-apercu-tete {
  background: var(--creme);
  padding: .5rem .9rem;
  font-size: .76rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--gris-texte);
  border-bottom: 1px solid var(--gris-ligne);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.cms-apercu-corps {
  background: linear-gradient(150deg, var(--nuit) 0%, var(--nuit-2) 100%);
  color: var(--creme);
  padding: 1.8rem 1.6rem;
}
.cms-apercu-corps .kicker { font-size: .68rem; color: var(--azur); }
.cms-apercu-corps h3 { color: var(--blanc); font-size: 1.5rem; line-height: 1.15; margin-bottom: .5rem; }
.cms-apercu-corps p { color: rgba(246,241,231,.8); font-family: var(--font-edito); font-style: italic; font-size: .92rem; }
.cms-apercu-corps .btn { padding: .45rem 1rem; font-size: .82rem; margin-top: .9rem; margin-right: .4rem; }

/* Médiathèque */
.grille-medias { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: .9rem; }
.media-vignette {
  border: 1.5px solid var(--gris-ligne);
  border-radius: 10px;
  overflow: hidden;
  cursor: pointer;
  background: var(--creme);
  transition: all .15s;
}
.media-vignette:hover { border-color: var(--azur); transform: translateY(-2px); }
.media-vignette.choisie { border-color: var(--azur); border-width: 3px; }
.media-vignette img { width: 100%; height: 92px; object-fit: cover; display: block; }
.media-vignette .media-nom { font-size: .72rem; padding: .4rem .5rem; color: var(--gris-texte); word-break: break-all; }

/* ---------- Admin : fiches et listes secondaires ---------- */
/* Fiche personne (formateur, apprenant) */
.fiche-personne {
  display: flex;
  gap: 1.2rem;
  align-items: center;
  padding-bottom: 1.2rem;
  border-bottom: 1px solid var(--gris-ligne);
  margin-bottom: 1.2rem;
}
.fiche-personne .formateur-avatar { width: 72px; height: 72px; font-size: 1.5rem; }
.fiche-personne h2 { font-size: 1.25rem; margin-bottom: .2rem; }
.fiche-personne .meta { font-size: .86rem; color: var(--gris-texte); }

/* Liste de définitions (fiche détaillée) */
.def-liste { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem 1.5rem; font-size: .88rem; }
@media (max-width: 700px) { .def-liste { grid-template-columns: 1fr; } }
.def-liste dt { font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; color: var(--gris-texte); }
.def-liste dd { font-weight: 600; }

/* Frise chronologique (parcours apprenant) */
.frise { position: relative; padding-left: 1.6rem; }
.frise::before {
  content: "";
  position: absolute;
  left: 5px; top: .4rem; bottom: .4rem;
  width: 2px;
  background: var(--gris-ligne);
}
.frise-item { position: relative; padding-bottom: 1.2rem; font-size: .88rem; }
.frise-item::before {
  content: "";
  position: absolute;
  left: -1.6rem; top: .35rem;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--azur);
  border: 2px solid var(--blanc);
}
.frise-item.vert::before { background: var(--vert); }
.frise-item.soleil::before { background: var(--soleil); }
.frise-item.gris::before { background: var(--gris-ligne); }
.frise-date { font-size: .76rem; color: var(--gris-texte); }
.frise-item strong { display: block; }

/* Calendrier des sessions */
.calendrier { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.calendrier .jour-nom {
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--gris-texte);
  text-align: center;
  padding: .3rem 0;
  font-weight: 600;
}
.calendrier .jour {
  min-height: 74px;
  border: 1px solid var(--gris-ligne);
  border-radius: 8px;
  padding: .3rem;
  font-size: .74rem;
}
.calendrier .jour.hors { background: var(--creme); opacity: .5; }
.calendrier .jour .num { color: var(--gris-texte); font-weight: 600; }
.evt {
  display: block;
  border-radius: 5px;
  padding: .12rem .3rem;
  margin-top: .2rem;
  font-size: .68rem;
  font-weight: 600;
  color: var(--blanc);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.evt.presentiel { background: var(--soleil); color: #6B4A0F; }
.evt.webinaire { background: var(--corail); }

/* Cartes de modèles de documents */
.grille-modeles { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 1rem; }
.carte-modele {
  border: 1.5px solid var(--gris-ligne);
  border-radius: var(--radius);
  padding: 1.1rem;
  transition: all .15s;
  background: var(--blanc);
}
.carte-modele:hover { border-color: var(--azur); box-shadow: var(--ombre); }
.carte-modele .modele-ico { font-size: 1.8rem; }
.carte-modele h3 { font-size: 1rem; margin: .5rem 0 .3rem; }
.carte-modele p { font-size: .82rem; color: var(--gris-texte); margin-bottom: .8rem; }

/* Sections de paramètres */
.param-section { border-bottom: 1px solid var(--gris-ligne); padding: 1.3rem 0; }
.param-section:last-child { border-bottom: none; }
.param-section h3 { font-size: 1rem; margin-bottom: .2rem; }
.param-section .aide-bloc { font-size: .84rem; color: var(--gris-texte); margin-bottom: 1rem; }

/* Étiquette de code / clé technique */
code, .code {
  font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
  font-size: .84rem;
  background: var(--creme);
  padding: .12rem .4rem;
  border-radius: 5px;
  color: var(--nuit);
}

/* Bandeau d'enregistrement */
.barre-sauvegarde {
  position: sticky;
  bottom: 0;
  background: var(--blanc);
  border-top: 1px solid var(--gris-ligne);
  padding: .9rem 2rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 1.5rem -2rem -2rem;
  box-shadow: 0 -6px 20px rgba(18,47,74,.08);
  z-index: 10;
}
.barre-sauvegarde .etat { font-size: .84rem; color: var(--gris-texte); }
.barre-sauvegarde .actions { margin-left: auto; display: flex; gap: .6rem; }

/* ---------- Responsive ---------- */
/* One page : les ancres restent visibles le plus longtemps possible,
   il n'y a pas de menu latéral de secours. */
@media (max-width: 1150px) {
  .nav-principale { gap: .9rem; font-size: .92rem; padding-left: 1rem; }
  .nav-principale a { font-size: .88rem; }
  /* Le bouton reste sur une ligne : on lui prend de la place, pas de la hauteur */
  .nav-principale .btn { padding: .5rem 1rem; font-size: .84rem; }
}
@media (max-width: 900px) {
  /* Sous cette largeur, on ne garde que le bouton d'action */
  .nav-principale a:not(.btn) { display: none; }
}
@media (max-width: 600px) {
  /* En-tête à l'étroit : on récupère de la place sur le logo, et on
     autorise à nouveau le bouton à passer sur deux lignes — mieux vaut
     un bouton haut qu'un bouton coupé. */
  .logo-groupe { gap: .5rem; }
  .logo-groupe img { height: 44px; }
  .wordmark { font-size: .58rem; top: 1px; }
  .nav-principale { padding-left: .7rem; }
  .nav-principale .btn { white-space: normal; padding: .45rem .9rem; font-size: .82rem; }
}
@media (max-width: 800px) {
  .pied-grille { grid-template-columns: 1fr 1fr; }
  .section { padding: 3.5rem 0; }
}