/* ==========================================================================
   SiriusLogic Formation — feuille de style unique
   Site public, espace client, lecteur de séquences, attestation, back-office.
   Palette de la marque : sarcelle profond et or (logo SiriusLogic).
   Syne (titres), IBM Plex Sans (texte), IBM Plex Mono (repères).
   ========================================================================== */

:root{
  /* Nuit sarcelle (bandeaux sombres) */
  --nuit:        #00161A;
  --nuit-2:      #031F24;
  --nuit-3:      #072A2F;
  --nuit-4:      #0B3439;
  --creme:       #F2ECDF;
  --brume:       #A9BCB8;

  /* Or */
  --or:          #D8AE55;
  --or-clair:    #F0D08A;
  --or-profond:  #B8862F;
  --or-texte:    #8A6420;      /* or lisible sur fond clair */
  --or-doux:     #FBF3E0;
  --degrade-or:  linear-gradient(135deg, #F7E2A6 0%, #E2BC67 38%, #C89840 72%, #A87526 100%);
  --degrade-texte: linear-gradient(100deg, #F7E2A6 0%, #E2BC67 45%, #C89840 100%);

  /* Surfaces claires */
  --papier:      #F6F4EE;
  --surface:     #FFFFFF;
  --surface-2:   #F0EDE5;
  --surface-3:   #E7E3D8;
  --encre:       #11262A;
  --encre-2:     #45605F;
  --encre-3:     #6B8280;
  --trait:       #DDD8CC;
  --trait-fort:  #C9C2B2;

  /* Accent principal (sarcelle) et états */
  --sarcelle:        #0F6E6A;
  --sarcelle-fonce:  #0A4D4A;
  --sarcelle-doux:   #E2F0EE;
  --ok:          #1E7F4F;
  --ok-doux:     #E1F2E8;
  --alerte:      #A5521B;
  --alerte-doux: #FBEEDC;
  --danger:      #B23A2E;
  --danger-doux: #F8E3DF;
  --violet:      #5B3F9E;
  --violet-doux: #EEE9F8;

  /* Couleur du domaine courant (surchargée par data-couleur / style) */
  --dom: var(--sarcelle);
  --pastille: "Nouveau";

  --display: "Syne", system-ui, sans-serif;
  --corps:   "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --data:    "IBM Plex Mono", ui-monospace, "Cascadia Code", Consolas, monospace;

  --large: 1240px;
  --marge: clamp(1rem, 4vw, 2.5rem);
  --rayon: 16px;
  --rayon-petit: 10px;
  --ombre: 0 1px 2px rgba(10, 40, 42, .05), 0 6px 22px rgba(10, 40, 42, .07);
  --ombre-forte: 0 2px 6px rgba(10, 40, 42, .08), 0 18px 48px rgba(10, 40, 42, .14);
  --haut-entete: 64px;
  --ease: cubic-bezier(.2, .7, .2, 1);

  /* Alias du vocabulaire des contenus pédagogiques repris */
  --primary: var(--sarcelle); --primary-dark: var(--sarcelle-fonce); --primary-soft: var(--sarcelle-doux);
  --accent: var(--or-profond); --accent-dark: var(--or-texte); --accent-soft: var(--or-doux);
  --text: var(--encre); --muted: var(--encre-2); --border: var(--trait); --bg: var(--papier);
  --warn: var(--alerte); --warn-soft: var(--alerte-doux); --danger-soft: var(--danger-doux);
  --ok-soft: var(--ok-doux); --radius: var(--rayon-petit); --font: var(--corps); --mono: var(--data);
}

*, *::before, *::after{ box-sizing: border-box; }
[hidden]{ display: none !important; }

html{
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--haut-entete) + 1.5rem);
}
body{
  margin: 0;
  min-height: 100vh;
  display: flex; flex-direction: column;
  font-family: var(--corps);
  font-size: 16.5px;
  line-height: 1.65;
  color: var(--encre);
  background: var(--papier);
  -webkit-font-smoothing: antialiased;
}
main{ flex: 1 0 auto; }
img{ max-width: 100%; height: auto; }
a{ color: var(--sarcelle); text-underline-offset: .18em; }
a:hover{ color: var(--sarcelle-fonce); }
::selection{ background: var(--or-clair); color: var(--nuit); }
:focus-visible{ outline: 2px solid var(--or); outline-offset: 3px; border-radius: 6px; }

h1, h2, h3, h4{ font-family: var(--display); line-height: 1.18; color: var(--encre); margin: 0 0 .55em; letter-spacing: -.01em; }
h1{ font-size: clamp(2rem, 1.4rem + 2.4vw, 3.2rem); font-weight: 700; letter-spacing: -.025em; }
h2{ font-size: clamp(1.45rem, 1.2rem + 1vw, 2rem); font-weight: 700; }
h3{ font-size: 1.18rem; font-weight: 600; }
h4{ font-size: 1.02rem; font-weight: 600; }
p{ margin: 0 0 1em; }
ul, ol{ padding-left: 1.3em; margin: 0 0 1em; }
li{ margin-bottom: .3em; }
code{ font-family: var(--data); font-size: .88em; background: var(--surface-2); padding: .1em .35em; border-radius: 4px; }
hr{ border: 0; border-top: 1px solid var(--trait); margin: 2rem 0; }

.visuellement-cache, .sr-only{
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.lien-evitement{
  position: absolute; left: 1rem; top: -4rem; z-index: 200;
  padding: .6rem 1rem; border-radius: 999px; background: var(--or); color: var(--nuit);
  font-family: var(--data); font-size: .8rem; text-decoration: none;
}
.lien-evitement:focus{ top: .8rem; }

.conteneur{ width: 100%; max-width: var(--large); margin: 0 auto; padding: 0 var(--marge); }
.etroit{ max-width: 860px; }

.etiquette{
  display: inline-flex; align-items: center; gap: .65rem;
  font-family: var(--data); font-size: .72rem; font-weight: 500; letter-spacing: .16em; text-transform: uppercase;
  color: var(--or-texte); margin: 0 0 .8rem;
}
.etiquette::before{ content: ""; width: 22px; height: 1px; background: currentColor; }
.sombre .etiquette, .etiquette--claire{ color: var(--or); }
.mono{ font-family: var(--data); font-size: .85em; letter-spacing: .02em; }
.discret{ color: var(--encre-3); }
.or{ color: var(--or-texte); }
em.or-degrade, .titre-or em{
  font-style: normal;
  background: var(--degrade-texte); -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ================================================================ En-tête */

.entete{
  position: sticky; top: 0; z-index: 100;
  background: rgba(0, 22, 26, .96);
  backdrop-filter: saturate(1.3) blur(10px);
  border-bottom: 1px solid rgba(216, 174, 85, .18);
  color: var(--creme);
}
.entete__barre{
  display: flex; align-items: center; gap: 1.2rem;
  max-width: var(--large); margin: 0 auto; padding: 0 var(--marge);
  height: var(--haut-entete);
}
.marque{
  display: inline-flex; align-items: center; gap: .6rem; text-decoration: none; color: var(--creme);
  flex-shrink: 0;
}
.marque:hover{ color: #fff; }
.marque img{ width: 30px; height: auto; }
.marque__nom{ font-family: var(--display); font-weight: 700; font-size: 1.05rem; letter-spacing: .06em; line-height: 1; }
.marque__nom b{ color: var(--or); font-weight: 700; }
.marque__sous{
  display: block; font-family: var(--data); font-size: .6rem; letter-spacing: .28em; text-transform: uppercase;
  color: var(--brume); margin-top: .28rem;
}
.nav{ display: flex; align-items: center; gap: .2rem; margin-left: auto; }
.nav a{
  color: #D6E0DD; text-decoration: none; font-size: .92rem; font-weight: 500;
  padding: .45rem .7rem; border-radius: 8px; white-space: nowrap;
}
.nav a:hover{ color: #fff; background: rgba(255,255,255,.06); }
.nav a[aria-current="page"]{ color: var(--or-clair); }
.nav .bouton-espace{
  margin-left: .5rem; border: 1px solid rgba(216,174,85,.55); color: var(--or-clair);
  border-radius: 999px; padding: .42rem .95rem; display: inline-flex; align-items: center; gap: .45rem;
}
.nav .bouton-espace:hover{ background: var(--or); color: var(--nuit); border-color: var(--or); }
.nav .bouton-espace svg{ width: 15px; height: 15px; }
.menu-bouton{
  display: none; margin-left: auto; background: none; border: 1px solid rgba(255,255,255,.18); color: var(--creme);
  border-radius: 10px; width: 42px; height: 38px; cursor: pointer; font-size: 1.1rem;
}
.entete .avatar{
  width: 30px; height: 30px; border-radius: 50%; background: var(--degrade-or); color: var(--nuit);
  display: inline-grid; place-items: center; font-weight: 700; font-size: .78rem; font-family: var(--data);
}

@media (max-width: 980px){
  .menu-bouton{ display: inline-grid; place-items: center; }
  .nav{
    position: absolute; left: 0; right: 0; top: var(--haut-entete);
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--nuit); border-bottom: 1px solid rgba(216,174,85,.25);
    padding: .5rem var(--marge) 1rem; display: none;
  }
  .nav.ouvert{ display: flex; }
  .nav a{ padding: .8rem .4rem; border-bottom: 1px solid rgba(255,255,255,.06); border-radius: 0; }
  .nav .bouton-espace{ margin: .8rem 0 0; justify-content: center; border-radius: 999px; }
}

/* ================================================================ Boutons */

.btn{
  --b-fond: var(--surface); --b-texte: var(--encre); --b-trait: var(--trait-fort);
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font: 500 .95rem/1.2 var(--corps); letter-spacing: .01em;
  padding: .72rem 1.25rem; border-radius: 999px; cursor: pointer;
  background: var(--b-fond); color: var(--b-texte); border: 1px solid var(--b-trait);
  text-decoration: none; transition: transform .15s var(--ease), background .15s, box-shadow .15s, border-color .15s;
  white-space: nowrap;
}
.btn:hover{ color: var(--b-texte); transform: translateY(-1px); box-shadow: var(--ombre); }
.btn:active{ transform: none; }
.btn svg{ width: 17px; height: 17px; flex-shrink: 0; }
.btn[disabled], .btn.desactive{ opacity: .5; cursor: not-allowed; transform: none; box-shadow: none; }
.btn--or{ --b-fond: var(--degrade-or); --b-texte: var(--nuit); --b-trait: transparent; background: var(--degrade-or); font-weight: 600; }
.btn--sarcelle{ --b-fond: var(--sarcelle); --b-texte: #fff; --b-trait: var(--sarcelle); }
.btn--sarcelle:hover{ background: var(--sarcelle-fonce); }
.btn--sombre{ --b-fond: var(--nuit); --b-texte: var(--creme); --b-trait: var(--nuit); }
.btn--ligne-claire{ --b-fond: transparent; --b-texte: var(--creme); --b-trait: rgba(242,236,223,.35); }
.btn--ligne-claire:hover{ background: rgba(255,255,255,.07); }
.btn--fantome{ --b-fond: transparent; --b-trait: transparent; color: var(--sarcelle); padding-left: .6rem; padding-right: .6rem; }
.btn--fantome:hover{ box-shadow: none; background: var(--sarcelle-doux); }
.btn--danger{ --b-fond: var(--surface); --b-texte: var(--danger); --b-trait: #E8B9B2; }
.btn--danger:hover{ background: var(--danger-doux); }
.btn--petit{ padding: .42rem .85rem; font-size: .85rem; }
.btn--bloc{ width: 100%; }
.actions{ display: flex; flex-wrap: wrap; gap: .7rem; align-items: center; }

.lien-fleche{ display: inline-flex; align-items: center; gap: .35rem; font-weight: 500; text-decoration: none; }
.lien-fleche::after{ content: "→"; transition: transform .15s; }
.lien-fleche:hover::after{ transform: translateX(3px); }

/* ============================================================== Badges */

.badge{
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .16em .62em; border-radius: 999px;
  font-size: .76rem; font-weight: 600; line-height: 1.5;
  background: var(--sarcelle-doux); color: var(--sarcelle-fonce); vertical-align: middle; white-space: nowrap;
}
.badge.ok{ background: var(--ok-doux); color: var(--ok); }
.badge.warn, .badge.alerte{ background: var(--alerte-doux); color: var(--alerte); }
.badge.danger{ background: var(--danger-doux); color: var(--danger); }
.badge.accent, .badge.or{ background: var(--or-doux); color: var(--or-texte); }
.badge.new{ background: var(--or-profond); color: #fff; }
.badge.mod{ background: var(--sarcelle-doux); color: var(--sarcelle); }
.badge.min, .badge.muted, .badge.neutre{ background: var(--surface-2); color: var(--encre-2); }
.badge.sombre{ background: var(--nuit); color: var(--or-clair); }
.ref{ font-family: var(--data); font-size: .74rem; letter-spacing: .06em; color: var(--encre-3); }
.puce-domaine{
  display: inline-flex; align-items: center; gap: .4rem; font-family: var(--data); font-size: .7rem;
  letter-spacing: .12em; text-transform: uppercase; color: var(--dom);
}
.puce-domaine::before{ content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--dom); }

/* ============================================================ Formulaires */

.champ{ display: grid; gap: .35rem; margin-bottom: 1rem; }
.champ > label, .champ > .libelle{ font-weight: 500; font-size: .92rem; }
.champ small{ color: var(--encre-3); font-size: .82rem; }
input[type=text], input[type=email], input[type=password], input[type=tel], input[type=date], input[type=number],
input[type=search], input[type=url], select, textarea{
  width: 100%; font: inherit; font-size: .97rem; color: var(--encre);
  padding: .66rem .85rem; border-radius: var(--rayon-petit);
  border: 1px solid var(--trait-fort); background: var(--surface);
  transition: border-color .15s, box-shadow .15s;
}
textarea{ min-height: 110px; resize: vertical; }
input:focus, select:focus, textarea:focus{ outline: none; border-color: var(--sarcelle); box-shadow: 0 0 0 3px rgba(15,110,106,.15); }
.case{ display: flex; gap: .6rem; align-items: flex-start; font-size: .93rem; cursor: pointer; }
.case input{ margin-top: .3rem; accent-color: var(--sarcelle); width: 17px; height: 17px; flex-shrink: 0; }
.grille-champs{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 1rem; }
.grille-champs .plein{ grid-column: 1 / -1; }
@media (max-width: 640px){ .grille-champs{ grid-template-columns: 1fr; } }
.piege{ position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.message{ padding: .85rem 1.1rem; border-radius: var(--rayon-petit); margin: 0 0 1rem; font-size: .95rem; border-left: 4px solid; }
.message.ok{ background: var(--ok-doux); border-color: var(--ok); color: #14532f; }
.message.erreur{ background: var(--danger-doux); border-color: var(--danger); color: #7a1f16; }
.message.info{ background: var(--sarcelle-doux); border-color: var(--sarcelle); color: var(--sarcelle-fonce); }
.message.alerte{ background: var(--alerte-doux); border-color: var(--alerte); color: #6d3510; }

/* ============================================================= Sections */

.section{ padding: clamp(3rem, 6vw, 5.5rem) 0; }
.section--blanche{ background: var(--surface); border-top: 1px solid var(--trait); border-bottom: 1px solid var(--trait); }
.section--sombre, .sombre{
  background:
    radial-gradient(900px 600px at 85% -20%, rgba(14, 74, 76, .55), transparent 60%),
    radial-gradient(800px 600px at -10% 120%, rgba(8, 52, 56, .5), transparent 60%),
    var(--nuit);
  color: #D5DFDC;
}
.sombre h1, .sombre h2, .sombre h3{ color: var(--creme); }
.sombre a:not(.btn){ color: var(--or-clair); }
.tete-section{ max-width: 760px; margin-bottom: 2.4rem; }
.tete-section p{ color: var(--encre-2); font-size: 1.05rem; }
.sombre .tete-section p{ color: var(--brume); }
.tete-section--centre{ margin-left: auto; margin-right: auto; text-align: center; }
.tete-section--centre .etiquette{ justify-content: center; }

.grille{ display: grid; gap: 1.2rem; }
.grille--2{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grille--3{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grille--4{ grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1020px){ .grille--3, .grille--4{ grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 680px){ .grille--2, .grille--3, .grille--4{ grid-template-columns: 1fr; } }

.carte{
  background: var(--surface); border: 1px solid var(--trait); border-radius: var(--rayon);
  padding: 1.5rem; box-shadow: var(--ombre);
}
.carte h3{ margin-top: 0; }
.carte--plate{ box-shadow: none; }

/* ================================================================ Héros */

.heros{ position: relative; overflow: hidden; padding: clamp(3.5rem, 8vw, 6.5rem) 0 clamp(3rem, 6vw, 5rem); }
.heros canvas.constellation{ position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; opacity: .85; }
.heros .conteneur{ position: relative; z-index: 1; }
.heros__grille{ display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.heros h1{ color: var(--creme); max-width: 16ch; }
.heros h1 em{ font-style: normal; background: var(--degrade-texte); -webkit-background-clip: text; background-clip: text; color: transparent; }
.heros .chapo{ font-size: 1.12rem; color: #C9D5D1; max-width: 56ch; margin-bottom: 1.8rem; }
.heros .actions{ margin-bottom: 2.2rem; }
.chiffres{ display: flex; flex-wrap: wrap; gap: 1.6rem 2.4rem; margin: 0; padding: 0; list-style: none; }
.chiffres li{ margin: 0; }
.chiffres b{ display: block; font-family: var(--display); font-size: 1.9rem; color: var(--or-clair); line-height: 1.1; }
.chiffres span{ font-size: .85rem; color: var(--brume); }
@media (max-width: 920px){ .heros__grille{ grid-template-columns: 1fr; } .heros h1{ max-width: none; } }

/* Maquette de l'espace client dans le héros */
.maquette{
  background: linear-gradient(180deg, rgba(11,52,57,.85), rgba(3,31,36,.92));
  border: 1px solid rgba(216,174,85,.28); border-radius: 20px; padding: 1.2rem;
  box-shadow: 0 30px 80px rgba(0,0,0,.45); color: #D5DFDC; font-size: .88rem;
}
.maquette__barre{ display: flex; gap: .4rem; margin-bottom: 1rem; }
.maquette__barre span{ width: 10px; height: 10px; border-radius: 50%; background: rgba(255,255,255,.18); }
.maquette__titre{ font-family: var(--display); color: var(--creme); font-size: 1.05rem; margin-bottom: .2rem; }
.maquette__ligne{ display: grid; grid-template-columns: 44px 1fr auto; gap: .8rem; align-items: center; padding: .7rem 0; border-top: 1px solid rgba(255,255,255,.08); }
.maquette__ligne b{ color: var(--creme); font-weight: 500; display: block; font-size: .9rem; }
.maquette__ligne small{ color: var(--brume); font-size: .76rem; }
.maquette .anneau{ --taille: 44px; --epaisseur: 5px; }
.maquette .anneau span{ background: #0a3238; color: var(--creme); font-size: .68rem; }

/* ================================================== Anneau de progression */

.anneau{
  --pct: 0; --taille: 56px; --epaisseur: 6px; --coul: var(--dom);
  width: var(--taille); height: var(--taille); border-radius: 50%; flex-shrink: 0;
  background: conic-gradient(var(--coul) calc(var(--pct) * 1%), rgba(128,128,128,.18) 0);
  display: grid; place-items: center;
}
.anneau span{
  width: calc(var(--taille) - var(--epaisseur) * 2); height: calc(var(--taille) - var(--epaisseur) * 2);
  border-radius: 50%; background: var(--surface); display: grid; place-items: center;
  font-family: var(--data); font-size: .78rem; font-weight: 500; color: var(--encre);
}
.barre{ height: 8px; border-radius: 99px; background: var(--surface-3); overflow: hidden; }
.barre > i{ display: block; height: 100%; width: calc(var(--pct, 0) * 1%); background: var(--dom); border-radius: 99px; transition: width .6s var(--ease); }

/* ======================================================= Domaines (filtres) */

.domaines{ display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.8rem; }
.filtre{
  --dom: var(--sarcelle);
  display: inline-flex; align-items: center; gap: .45rem; cursor: pointer;
  padding: .45rem .9rem; border-radius: 999px; font: 500 .88rem var(--corps);
  background: var(--surface); color: var(--encre-2); border: 1px solid var(--trait-fort);
}
.filtre::before{ content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--dom); }
.filtre[aria-pressed="true"]{ background: var(--nuit); color: var(--creme); border-color: var(--nuit); }
.filtre--tous::before{ background: var(--degrade-or); }
.recherche-catalogue{ max-width: 340px; margin-left: auto; }
.barre-filtres{ display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; margin-bottom: 1.8rem; }
.barre-filtres .domaines{ margin: 0; }

/* ======================================================== Carte formation */

.cartes-formations{ display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 1.2rem; }
.carte-formation{
  --dom: var(--sarcelle);
  position: relative; display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--trait); border-radius: var(--rayon);
  padding: 1.35rem 1.35rem 1.15rem; text-decoration: none; color: inherit; overflow: hidden;
  transition: transform .18s var(--ease), box-shadow .18s, border-color .18s;
}
.carte-formation::before{ content: ""; position: absolute; left: 0; top: 0; right: 0; height: 4px; background: var(--dom); }
.carte-formation:hover{ transform: translateY(-3px); box-shadow: var(--ombre-forte); border-color: var(--trait-fort); color: inherit; }
.carte-formation__haut{ display: flex; justify-content: space-between; align-items: center; gap: .5rem; margin-bottom: .7rem; }
.carte-formation h3{ font-size: 1.08rem; line-height: 1.3; margin: 0 0 .55rem; }
.carte-formation p{ color: var(--encre-2); font-size: .92rem; margin: 0 0 1rem; flex: 1; }
.carte-formation__pied{ display: flex; justify-content: space-between; align-items: flex-end; gap: .6rem; padding-top: .85rem; border-top: 1px dashed var(--trait); font-size: .85rem; }
.carte-formation__pied b{ font-family: var(--display); font-size: 1.12rem; color: var(--encre); }
.carte-formation__pied small{ display: block; color: var(--encre-3); font-size: .75rem; }
.carte-formation .signature{ position: absolute; top: .95rem; right: 1rem; }
.carte-formation.masquee{ display: none; }

/* ===================================================== Cartes parcours */

.carte-parcours{
  --dom: var(--sarcelle);
  background: var(--surface); border: 1px solid var(--trait); border-radius: var(--rayon);
  padding: 1.6rem; display: flex; flex-direction: column; box-shadow: var(--ombre); position: relative;
}
.carte-parcours__num{ font-family: var(--data); font-size: .72rem; letter-spacing: .14em; color: var(--dom); text-transform: uppercase; }
.carte-parcours h3{ font-size: 1.3rem; margin: .3rem 0 .5rem; }
.carte-parcours p{ color: var(--encre-2); font-size: .94rem; }
.carte-parcours ol{ padding-left: 0; list-style: none; margin: 0 0 1.2rem; counter-reset: p; }
.carte-parcours ol li{ counter-increment: p; display: grid; grid-template-columns: 26px 1fr; gap: .5rem; font-size: .92rem; padding: .35rem 0; border-top: 1px solid var(--surface-3); }
.carte-parcours ol li::before{ content: counter(p); width: 22px; height: 22px; border-radius: 50%; background: var(--surface-2); color: var(--encre-2); display: grid; place-items: center; font-size: .72rem; font-family: var(--data); }
.carte-parcours__prix{ margin-top: auto; display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; padding-top: 1rem; border-top: 1px solid var(--trait); }
.carte-parcours__prix b{ font-family: var(--display); font-size: 1.6rem; }
.carte-parcours__prix small{ display: block; color: var(--encre-3); font-size: .78rem; }

/* ============================================================ Étapes */

.etapes{ list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 1rem; counter-reset: e; }
.etapes li{ counter-increment: e; background: var(--surface); border: 1px solid var(--trait); border-radius: var(--rayon); padding: 1.3rem 1.2rem; margin: 0; }
.etapes li::before{ content: "0" counter(e); font-family: var(--data); font-size: .8rem; color: var(--or-texte); letter-spacing: .1em; display: block; margin-bottom: .5rem; }
.etapes h3{ font-size: 1.02rem; margin: 0 0 .35rem; }
.etapes p{ margin: 0; font-size: .9rem; color: var(--encre-2); }
.sombre .etapes li{ background: rgba(255,255,255,.04); border-color: rgba(216,174,85,.18); }
.sombre .etapes p{ color: var(--brume); }
.sombre .etapes li::before{ color: var(--or); }

.liste-coches{ list-style: none; padding: 0; margin: 0 0 1rem; }
.liste-coches li{ position: relative; padding-left: 1.7rem; margin-bottom: .45rem; }
.liste-coches li::before{
  content: ""; position: absolute; left: 0; top: .45em; width: 1rem; height: 1rem; border-radius: 50%;
  background: var(--sarcelle-doux) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M4 8.5l2.5 2.5L12 5.5' fill='none' stroke='%230F6E6A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/80% no-repeat;
}
.sombre .liste-coches li::before{ background-color: rgba(216,174,85,.16); background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M4 8.5l2.5 2.5L12 5.5' fill='none' stroke='%23F0D08A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>"); }
.colonnes-2{ columns: 2; column-gap: 2rem; }
@media (max-width: 640px){ .colonnes-2{ columns: 1; } }

.bandeau-cta{
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1.5rem;
  border-radius: 22px; padding: clamp(1.6rem, 4vw, 2.6rem);
}
.bandeau-cta h2{ margin: 0; max-width: 24ch; }
.mention{
  font-size: .88rem; color: var(--encre-2); background: var(--surface-2); border-radius: var(--rayon-petit);
  padding: .9rem 1.1rem; border-left: 3px solid var(--or);
}
.sombre .mention{ background: rgba(255,255,255,.05); color: var(--brume); }

.faq details{ border-bottom: 1px solid var(--trait); padding: .2rem 0; }
.faq summary{ cursor: pointer; padding: 1rem 2rem 1rem 0; font-weight: 500; list-style: none; position: relative; }
.faq summary::-webkit-details-marker{ display: none; }
.faq summary::after{ content: "+"; position: absolute; right: .3rem; top: .85rem; font-size: 1.3rem; color: var(--or-texte); transition: transform .2s; }
.faq details[open] summary::after{ transform: rotate(45deg); }
.faq details p{ color: var(--encre-2); margin: 0 0 1rem; }

/* =================================================== Page tête (intérieure) */

.page-tete{ padding: clamp(2.5rem, 6vw, 4.5rem) 0 clamp(2rem, 4vw, 3rem); position: relative; overflow: hidden; }
.page-tete h1{ color: var(--creme); max-width: 24ch; }
.page-tete .chapo{ color: #C9D5D1; font-size: 1.08rem; max-width: 62ch; }
.fil{ font-family: var(--data); font-size: .74rem; letter-spacing: .06em; color: var(--brume); margin-bottom: 1rem; }
.fil a{ color: var(--brume) !important; text-decoration: none; }
.fil a:hover{ color: var(--or-clair) !important; }
.fil span[aria-hidden]{ margin: 0 .5rem; opacity: .5; }

/* ======================================================= Fiche formation */

.fiche-tete{ --dom: var(--sarcelle); }
.fiche-tete .puce-domaine{ color: var(--or-clair); }
.fiche-tete .puce-domaine::before{ background: var(--dom); box-shadow: 0 0 0 3px rgba(255,255,255,.1); }
.fiche-faits{ display: flex; flex-wrap: wrap; gap: .6rem; margin: 1.4rem 0 1.6rem; padding: 0; list-style: none; }
.fiche-faits li{
  margin: 0; display: inline-flex; align-items: center; gap: .45rem; font-size: .88rem; color: #D5DFDC;
  border: 1px solid rgba(242,236,223,.18); border-radius: 999px; padding: .38rem .85rem; background: rgba(255,255,255,.03);
}
.fiche-faits b{ color: var(--creme); font-weight: 500; }
.fiche{ display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: clamp(1.5rem, 4vw, 3rem); align-items: start; }
.fiche__corps > section{ margin-bottom: 2.6rem; }
.fiche__corps h2{ font-size: 1.45rem; }
.fiche__aside{ position: sticky; top: calc(var(--haut-entete) + 1.2rem); display: grid; gap: 1rem; }
@media (max-width: 980px){ .fiche{ grid-template-columns: 1fr; } .fiche__aside{ position: static; } }
.programme-bloc{ background: var(--surface); border: 1px solid var(--trait); border-radius: var(--rayon); margin-bottom: .9rem; overflow: hidden; }
.programme-bloc h3{ margin: 0; padding: .9rem 1.2rem; font-size: 1rem; background: var(--surface-2); border-bottom: 1px solid var(--trait); }
.programme-bloc ul{ margin: 0; padding: .9rem 1.2rem .9rem 2.4rem; }
.programme-bloc ul.colonnes-2{ padding-left: 2.4rem; }
.deroule{ list-style: none; padding: 0; margin: 0; }
.deroule li{ display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; gap: .8rem; align-items: center; padding: .7rem 0; border-bottom: 1px solid var(--trait); margin: 0; }
.deroule .n{ width: 34px; height: 34px; border-radius: 10px; background: var(--sarcelle-doux); color: var(--sarcelle-fonce); display: grid; place-items: center; font-family: var(--data); font-size: .8rem; }
.deroule .d{ font-family: var(--data); font-size: .78rem; color: var(--encre-3); white-space: nowrap; }
.encart-prix{ background: var(--nuit); color: #D5DFDC; border-radius: var(--rayon); padding: 1.5rem; box-shadow: var(--ombre-forte); }
.encart-prix h2{ color: var(--creme); font-size: 1.1rem; margin-bottom: 1rem; }
.encart-prix .prix{ display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: .7rem 0; border-top: 1px solid rgba(255,255,255,.08); }
.encart-prix .prix span{ font-size: .88rem; color: var(--brume); }
.encart-prix .prix b{ font-family: var(--display); font-size: 1.45rem; color: var(--or-clair); white-space: nowrap; }
.encart-prix .prix small{ display: block; font-size: .76rem; color: var(--brume); font-weight: 400; font-family: var(--corps); text-align: right; }
.encart-prix .btn{ margin-top: .7rem; width: 100%; }
.encart-infos dl{ margin: 0; display: grid; gap: .7rem; }
.encart-infos dt{ font-family: var(--data); font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--encre-3); }
.encart-infos dd{ margin: 0; font-size: .93rem; }

/* ================================================================ Pied */

.pied{ background: var(--nuit); color: #AFC2BE; padding: 3.5rem 0 2rem; margin-top: auto; font-size: .92rem; }
.pied a{ color: #D5DFDC; text-decoration: none; }
.pied a:hover{ color: var(--or-clair); }
.pied__haut{ display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 2rem; margin-bottom: 2.5rem; }
.pied h2{ font-family: var(--data); font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: var(--or); margin-bottom: 1rem; font-weight: 500; }
.pied ul{ list-style: none; padding: 0; margin: 0; }
.pied li{ margin-bottom: .45rem; }
.pied__logo{ width: 120px; margin-bottom: 1rem; opacity: .95; }
.pied__bas{ display: flex; flex-wrap: wrap; gap: .5rem 1.4rem; border-top: 1px solid rgba(255,255,255,.08); padding-top: 1.4rem; font-size: .8rem; color: #85A09C; }
@media (max-width: 860px){ .pied__haut{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px){ .pied__haut{ grid-template-columns: 1fr; } }

/* ============================================================ Connexion */

.page-connexion{ display: grid; place-items: center; padding: clamp(2rem, 6vw, 4.5rem) var(--marge); }
.boite-connexion{ width: 100%; max-width: 440px; background: var(--surface); border: 1px solid var(--trait); border-radius: 20px; padding: 2rem; box-shadow: var(--ombre-forte); }
.boite-connexion h1{ font-size: 1.6rem; }
.boite-connexion .sous{ color: var(--encre-2); margin-bottom: 1.4rem; font-size: .95rem; }
.lien-secondaire{ display: inline-block; margin-top: 1rem; font-size: .9rem; }

/* ====================================================== Espace : structure */

.espace-tete{ padding: 2.2rem 0 1.8rem; }
.espace-tete h1{ color: var(--creme); font-size: clamp(1.6rem, 1.3rem + 1.4vw, 2.3rem); margin-bottom: .3rem; }
.espace-tete p{ color: var(--brume); margin: 0; }
.espace-corps{ padding: 2rem 0 4rem; }
.onglets-espace{ display: flex; gap: .3rem; flex-wrap: wrap; margin-top: 1.4rem; }
.onglets-espace a{ color: #C9D5D1; text-decoration: none; padding: .5rem .95rem; border-radius: 999px; font-size: .9rem; border: 1px solid transparent; }
.onglets-espace a:hover{ color: #fff; background: rgba(255,255,255,.06); }
.onglets-espace a[aria-current="page"]{ border-color: rgba(216,174,85,.5); color: var(--or-clair); }

.tuiles{ display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1rem; margin-bottom: 2.2rem; }
.tuile{ background: var(--surface); border: 1px solid var(--trait); border-radius: var(--rayon); padding: 1.1rem 1.2rem; }
.tuile b{ display: block; font-family: var(--display); font-size: 1.7rem; line-height: 1.1; color: var(--encre); }
.tuile span{ color: var(--encre-2); font-size: .86rem; }
@media (max-width: 1020px){ .tuiles{ grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 600px){ .tuiles{ grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.bloc-parcours{ background: var(--surface); border: 1px solid var(--trait); border-radius: 20px; padding: 1.3rem 1.4rem 1.4rem; margin-bottom: 1.6rem; }
.bloc-parcours__tete{ display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: 1rem; }
.bloc-parcours__tete h2{ font-size: 1.2rem; margin: 0; }

.cartes-espace{ display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 1.1rem; }
.carte-suivi{
  --dom: var(--sarcelle);
  position: relative; background: var(--surface); border: 1px solid var(--trait); border-radius: var(--rayon);
  padding: 1.25rem 1.3rem; display: flex; flex-direction: column; gap: .8rem; overflow: hidden;
}
.carte-suivi::before{ content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--dom); }
.carte-suivi__tete{ display: flex; gap: 1rem; align-items: flex-start; }
.carte-suivi__tete h3{ font-size: 1.02rem; margin: .15rem 0 .3rem; line-height: 1.3; }
.carte-suivi__infos{ display: flex; flex-wrap: wrap; gap: .35rem .9rem; font-size: .82rem; color: var(--encre-3); }
.carte-suivi__suite{ font-size: .9rem; color: var(--encre-2); background: var(--surface-2); border-radius: 10px; padding: .6rem .8rem; }
.carte-suivi__suite b{ color: var(--encre); font-weight: 500; }
.carte-suivi .actions{ margin-top: auto; }
.carte-suivi.fermee{ opacity: .72; }
.vide{ text-align: center; padding: 3rem 1.5rem; background: var(--surface); border: 1px dashed var(--trait-fort); border-radius: var(--rayon); color: var(--encre-2); }

/* =================================================== Espace : formation */

.formation-tete{ --dom: var(--sarcelle); }
.formation-tete .grille-tete{ display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2rem; align-items: center; }
.formation-tete .anneau{ --taille: 104px; --epaisseur: 9px; --coul: var(--or); }
.formation-tete .anneau span{ background: var(--nuit-2); color: var(--creme); font-size: 1.1rem; font-family: var(--display); }
.formation-tete .meta{ display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; font-size: .88rem; color: var(--brume); margin-top: .8rem; }
@media (max-width: 700px){ .formation-tete .grille-tete{ grid-template-columns: 1fr; } }

.jalons{ list-style: none; padding: 0; margin: 0 0 2rem; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .6rem; }
.jalons li{ margin: 0; background: var(--surface); border: 1px solid var(--trait); border-radius: 12px; padding: .8rem .9rem; font-size: .85rem; position: relative; }
.jalons li b{ display: block; font-size: .92rem; font-weight: 600; margin-bottom: .1rem; }
.jalons li small{ color: var(--encre-3); }
.jalons li.fait{ border-color: #B9DEC9; background: var(--ok-doux); }
.jalons li.fait b::before{ content: "✓ "; color: var(--ok); }
.jalons li.actif{ border-color: var(--or); box-shadow: 0 0 0 3px var(--or-doux); }
@media (max-width: 900px){ .jalons{ grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.deux-colonnes{ display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 1.6rem; align-items: start; }
@media (max-width: 1000px){ .deux-colonnes{ grid-template-columns: 1fr; } }
.panneau{ background: var(--surface); border: 1px solid var(--trait); border-radius: var(--rayon); padding: 1.3rem 1.4rem; margin-bottom: 1.3rem; }
.panneau > h2{ font-size: 1.15rem; margin-bottom: .9rem; }
.panneau--or{ border-color: rgba(184,134,47,.45); background: linear-gradient(180deg, var(--or-doux), var(--surface) 70%); }

.liste-seq{ list-style: none; padding: 0; margin: 0; }
.liste-seq li{ margin: 0; border-top: 1px solid var(--trait); }
.liste-seq li:first-child{ border-top: 0; }
.liste-seq a{ display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: .9rem; align-items: center; padding: .8rem .3rem; text-decoration: none; color: inherit; border-radius: 10px; }
.liste-seq a:hover{ background: var(--surface-2); }
.liste-seq .n{ width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; font-family: var(--data); font-size: .82rem; background: var(--surface-2); color: var(--encre-2); }
.liste-seq .valide .n{ background: var(--ok-doux); color: var(--ok); }
.liste-seq .valide .n::before{ content: "✓"; font-size: .95rem; }
.liste-seq .valide .n span{ display: none; }
.liste-seq .encours .n{ background: var(--or-doux); color: var(--or-texte); }
.liste-seq b{ display: block; font-weight: 500; font-size: .96rem; line-height: 1.35; }
.liste-seq small{ color: var(--encre-3); font-size: .8rem; }
.liste-seq .etat{ text-align: right; font-size: .78rem; color: var(--encre-3); white-space: nowrap; }

.positionnement-table{ width: 100%; border-collapse: collapse; font-size: .9rem; }
.positionnement-table th, .positionnement-table td{ padding: .6rem .5rem; border-bottom: 1px solid var(--trait); text-align: center; vertical-align: middle; }
.positionnement-table th:first-child, .positionnement-table td:first-child{ text-align: left; }
.positionnement-table thead th{ font-family: var(--data); font-size: .68rem; letter-spacing: .06em; text-transform: uppercase; color: var(--encre-3); font-weight: 500; background: none; border-top: 0; }
.positionnement-table input{ accent-color: var(--sarcelle); width: 18px; height: 18px; cursor: pointer; }
.etoiles{ display: inline-flex; gap: .15rem; }
.etoiles label{ cursor: pointer; }
.etoiles input{ position: absolute; opacity: 0; pointer-events: none; }
.etoiles span{ display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 8px; border: 1px solid var(--trait-fort); font-size: .85rem; font-family: var(--data); color: var(--encre-2); background: var(--surface); }
.etoiles input:checked + span{ background: var(--sarcelle); color: #fff; border-color: var(--sarcelle); }
.etoiles input:focus-visible + span{ outline: 2px solid var(--or); outline-offset: 2px; }
.ligne-satisf{ display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .6rem 1rem; padding: .6rem 0; border-bottom: 1px solid var(--trait); font-size: .93rem; }

.modeles{ list-style: none; padding: 0; margin: 0; }
.modeles li{ margin: 0; }
.modeles a{ display: flex; align-items: center; gap: .7rem; padding: .6rem .2rem; text-decoration: none; color: var(--encre); border-top: 1px solid var(--trait); font-size: .92rem; }
.modeles li:first-child a{ border-top: 0; }
.modeles a:hover{ color: var(--sarcelle); }
.modeles .ico{ width: 34px; height: 34px; border-radius: 9px; background: var(--ok-doux); color: var(--ok); display: grid; place-items: center; font-family: var(--data); font-size: .62rem; font-weight: 600; flex-shrink: 0; }
.modeles small{ display: block; color: var(--encre-3); font-size: .78rem; }

/* ================================================= Lecteur de séquence */

.lecteur{ display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 0; align-items: start; max-width: 1400px; margin: 0 auto; width: 100%; }
.lecteur__nav{
  position: sticky; top: var(--haut-entete); height: calc(100vh - var(--haut-entete)); overflow-y: auto;
  background: var(--surface); border-right: 1px solid var(--trait); padding: 1.3rem 1rem 2rem; font-size: .88rem;
}
.lecteur__nav .retour{ display: inline-flex; gap: .35rem; font-size: .82rem; text-decoration: none; margin-bottom: .9rem; }
.lecteur__nav h2{ font-size: .98rem; margin: 0 0 .25rem; }
.lecteur__nav .ref{ display: block; margin-bottom: .9rem; }
.lecteur__nav .barre{ margin-bottom: 1.2rem; }
.lecteur__nav ol{ list-style: none; padding: 0; margin: 0 0 1.4rem; }
.lecteur__nav ol li{ margin: 0; }
.lecteur__nav ol a{ display: grid; grid-template-columns: 38px 1fr; gap: .5rem; padding: .45rem .5rem; border-radius: 8px; text-decoration: none; color: var(--encre-2); line-height: 1.35; }
.lecteur__nav ol a:hover{ background: var(--surface-2); color: var(--encre); }
.lecteur__nav ol a .n{ font-family: var(--data); font-size: .74rem; color: var(--encre-3); padding-top: .1rem; }
.lecteur__nav ol a.valide .n{ color: var(--ok); }
.lecteur__nav ol a.valide .n::after{ content: " ✓"; }
.lecteur__nav ol a[aria-current="page"]{ background: var(--sarcelle-doux); color: var(--sarcelle-fonce); font-weight: 500; }
.lecteur__nav .sommaire{ border-top: 1px solid var(--trait); padding-top: 1rem; }
.lecteur__nav .sommaire h3{ font-family: var(--data); font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--encre-3); font-weight: 500; }
.lecteur__nav .sommaire a{ display: block; padding: .3rem .5rem; border-left: 2px solid var(--trait); color: var(--encre-2); text-decoration: none; font-size: .84rem; line-height: 1.35; }
.lecteur__nav .sommaire a:hover, .lecteur__nav .sommaire a.actif{ border-left-color: var(--or); color: var(--encre); }
.lecteur__contenu{ padding: 2rem clamp(1rem, 4vw, 3rem) 4rem; min-width: 0; }
.lecteur__colonne{ max-width: 840px; margin: 0 auto; }
.bouton-nav-lecteur{ display: none; }
@media (max-width: 980px){
  .lecteur{ grid-template-columns: 1fr; }
  .lecteur__nav{ position: fixed; left: 0; top: var(--haut-entete); bottom: 0; width: min(88vw, 340px); height: auto; z-index: 90; transform: translateX(-102%); transition: transform .25s var(--ease); box-shadow: var(--ombre-forte); }
  .lecteur__nav.ouvert{ transform: none; }
  .bouton-nav-lecteur{ display: inline-flex; position: fixed; left: 1rem; bottom: 1rem; z-index: 91; box-shadow: var(--ombre-forte); }
}
.progression-lecture{ position: fixed; left: 0; top: var(--haut-entete); height: 3px; width: 100%; z-index: 99; transform-origin: 0 50%; transform: scaleX(0); background: var(--degrade-texte); pointer-events: none; }

.module-header, .tete-sequence{
  --dom: var(--sarcelle);
  background: var(--surface); border: 1px solid var(--trait); border-radius: var(--rayon);
  padding: 1.6rem 1.8rem; margin-bottom: 1.6rem; position: relative; overflow: hidden;
}
.tete-sequence::before{ content: ""; position: absolute; left: 0; top: 0; right: 0; height: 4px; background: var(--dom); }
.tete-sequence .kicker{ font-family: var(--data); font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; color: var(--dom); }
.tete-sequence h1{ font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.05rem); margin: .4rem 0 .7rem; }
.tete-sequence .meta{ display: flex; gap: .5rem 1.2rem; flex-wrap: wrap; color: var(--encre-2); font-size: .88rem; }
.tete-sequence .apercu{ position: absolute; top: 1rem; right: 1rem; }

/* Contenus pédagogiques (vocabulaire commun aux formations) */
.contenu-seq{ font-size: 1.02rem; }
.contenu-seq h2{ font-size: 1.4rem; margin: 2rem 0 .8rem; }
.contenu-seq h3{ font-size: 1.12rem; margin: 1.6rem 0 .6rem; }
.contenu-seq h4{ margin: 1.2rem 0 .4rem; }
.contenu-seq table{ width: 100%; border-collapse: collapse; margin: 1rem 0 1.5rem; font-size: .92rem; background: var(--surface); display: table; }
.contenu-seq .table-defile{ overflow-x: auto; margin: 1rem 0 1.5rem; }
.contenu-seq .table-defile table{ margin: 0; min-width: 560px; }
.contenu-seq th, .contenu-seq td{ border: 1px solid var(--trait); padding: .55em .75em; vertical-align: top; text-align: left; }
.contenu-seq th{ background: var(--sarcelle-doux); color: var(--sarcelle-fonce); font-weight: 600; }
.contenu-seq tbody tr:nth-child(even){ background: #FAF9F5; }
.objectives, .objectifs{ background: var(--sarcelle-doux); border-radius: 12px; padding: 1rem 1.3rem; margin-bottom: 1.6rem; }
.objectives h2, .objectifs h2{ border: 0; margin: 0 0 .5rem; font-size: .8rem; font-family: var(--data); letter-spacing: .14em; text-transform: uppercase; color: var(--sarcelle-fonce); font-weight: 500; }
.objectives ul, .objectifs ul{ margin: 0; }
.lesson, .lecon{ background: var(--surface); border: 1px solid var(--trait); border-radius: var(--rayon); padding: 1.6rem 1.9rem; margin-bottom: 1.5rem; }
.lesson > h2:first-child, .lecon > h2:first-child, .lesson > .duration + h2, .lecon > .duree + h2{ margin-top: 0; }
.lesson .duration, .lecon .duree, .quiz .duration{ float: right; font-family: var(--data); font-size: .74rem; color: var(--encre-2); background: var(--surface-2); padding: .15em .65em; border-radius: 999px; margin: .3rem 0 .5rem 1rem; }
@media (max-width: 640px){ .lesson, .lecon{ padding: 1.2rem 1.1rem; } .tete-sequence{ padding: 1.3rem 1.1rem; } }

.callout, .encadre{
  border-left: 4px solid var(--sarcelle); background: var(--sarcelle-doux);
  padding: .95rem 1.15rem; border-radius: 10px; margin: 1.2rem 0;
}
.callout > :last-child, .encadre > :last-child{ margin-bottom: 0; }
.callout .title, .encadre .titre{ font-weight: 600; display: block; margin-bottom: .3rem; font-family: var(--display); font-size: .98rem; }
.callout.tip{ border-color: var(--ok); background: var(--ok-doux); }
.callout.warn{ border-color: var(--alerte); background: var(--alerte-doux); }
.callout.new{ border-color: var(--or-profond); background: var(--or-doux); }
.callout.new .title::before{ content: var(--pastille); display: inline-block; background: var(--or-profond); color: #fff; font-family: var(--data); font-size: .7rem; padding: .08em .55em; border-radius: 999px; margin-right: .55em; vertical-align: .12em; letter-spacing: .04em; }
.callout.danger{ border-color: var(--danger); background: var(--danger-doux); }
.callout.example{ border-color: var(--violet); background: var(--violet-doux); }
.callout.reg{ border-color: #4E5F61; background: #EEF0EF; }
.callout.ia{ border-color: var(--violet); background: var(--violet-doux); }
.keypoints{ background: var(--surface-2); border-radius: 12px; padding: 1.1rem 1.4rem; margin: 1.6rem 0; border: 1px solid var(--trait); }
.keypoints h3, .keypoints h2{ margin-top: 0; font-size: 1.05rem; }
.keypoints ul{ margin: 0; }
.two-col{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.2rem; }
.grid{ display: grid; gap: 1rem; }
.grid.cols-2{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid.cols-3{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid.cols-4{ grid-template-columns: repeat(4, minmax(0, 1fr)); }
.contenu-seq .card{ background: var(--surface); border: 1px solid var(--trait); border-radius: 12px; padding: 1rem 1.1rem; }
.contenu-seq .card h3, .contenu-seq .card h4{ margin-top: 0; }
@media (max-width: 760px){ .two-col, .grid.cols-2, .grid.cols-3, .grid.cols-4{ grid-template-columns: 1fr; } }

details.reveal{ border: 1px solid var(--trait); border-radius: 12px; background: var(--surface); margin: 1rem 0; }
details.reveal summary{ cursor: pointer; padding: .85rem 1.1rem; font-weight: 600; color: var(--sarcelle); list-style: none; display: flex; align-items: center; gap: .6rem; }
details.reveal summary::-webkit-details-marker{ display: none; }
details.reveal summary::before{ content: "▸"; transition: transform .15s; }
details.reveal[open] summary::before{ transform: rotate(90deg); }
details.reveal .body{ padding: .9rem 1.2rem 1rem; border-top: 1px solid var(--trait); }
.exercise, .lesson.exercise{ border: 2px dashed rgba(184,134,47,.6); background: #FFFCF6; }
.exercise .kicker{ font-family: var(--data); color: var(--or-texte); font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; }
.fil-rouge{ display: inline-flex; align-items: center; gap: .4rem; font-size: .78rem; font-weight: 600; color: var(--sarcelle-fonce); background: var(--sarcelle-doux); padding: .18em .75em; border-radius: 999px; margin: .3rem 0 .8rem; }
.tp{ border: 2px solid var(--sarcelle); background: linear-gradient(180deg, #F2FAF8, var(--surface) 60%); }
.tp .kicker{ font-family: var(--data); color: var(--sarcelle); font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; }
.tp .modele{ display: inline-flex; align-items: center; gap: .5rem; background: var(--surface); border: 1px solid var(--trait-fort); border-radius: 10px; padding: .5rem .8rem; font-size: .9rem; text-decoration: none; margin: .3rem .4rem .3rem 0; }
.tp .modele::before{ content: "CSV"; font-family: var(--data); font-size: .62rem; background: var(--ok-doux); color: var(--ok); padding: .15em .4em; border-radius: 5px; }
.prompt{ background: #0E2226; color: #DCE8E5; border-radius: 12px; padding: 1rem 1.2rem; margin: 1rem 0; font-family: var(--data); font-size: .85rem; line-height: 1.6; white-space: pre-wrap; position: relative; }
.prompt::before{ content: attr(data-titre); display: block; font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--or); margin-bottom: .5rem; }
.prompt:not([data-titre])::before{ content: "Requête"; }
.prompt__copier{ position: absolute; top: .6rem; right: .6rem; font-family: var(--data); font-size: .66rem; letter-spacing: .08em; text-transform: uppercase; background: rgba(216,174,85,.14); color: var(--or); border: 1px solid rgba(216,174,85,.45); border-radius: 7px; padding: .3em .7em; cursor: pointer; white-space: nowrap; }
.prompt__copier:hover, .prompt__copier:focus-visible{ background: rgba(216,174,85,.28); }
@media print{ .prompt__copier{ display: none; } }
.dialogue{ display: grid; gap: .55rem; margin: 1rem 0; }
.dialogue p{ margin: 0; padding: .6rem .9rem; border-radius: 12px; max-width: 88%; font-size: .95rem; }
.dialogue .auditeur{ background: var(--sarcelle-doux); justify-self: start; }
.dialogue .audite{ background: var(--surface-2); justify-self: end; }
.dialogue .note{ background: var(--or-doux); justify-self: center; font-size: .85rem; font-style: italic; }
.dialogue b{ font-family: var(--data); font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; display: block; color: var(--encre-2); }

.timeline{ list-style: none; padding: 0; margin: 1.5rem 0; position: relative; }
.timeline::before{ content: ""; position: absolute; left: 14px; top: 6px; bottom: 6px; width: 2px; background: var(--trait); }
.timeline li{ position: relative; padding-left: 44px; margin-bottom: 1.1rem; }
.timeline li::before{ content: ""; position: absolute; left: 7px; top: .35em; width: 16px; height: 16px; border-radius: 50%; background: var(--or-profond); border: 3px solid #fff; box-shadow: 0 0 0 2px var(--or-profond); }
.timeline b{ color: var(--sarcelle-fonce); }
.process-flow{ display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: .6rem; margin: 1.2rem 0; }
.process-flow .step{ background: var(--surface); border: 2px solid var(--sarcelle-doux); border-radius: 10px; padding: .7rem .8rem; text-align: center; font-size: .9rem; }
.process-flow .step b{ display: block; color: var(--sarcelle); }
.process-flow .step.hl{ border-color: var(--or-profond); background: var(--or-doux); }
table.matrix{ max-width: 640px; text-align: center; }
table.matrix th, table.matrix td{ text-align: center !important; }
table.matrix tbody th{ background: var(--surface-2); color: var(--encre); white-space: nowrap; text-align: left !important; }
table.matrix td{ font-weight: 700; }
td.m1{ font-weight:700;  background: #DFF1E6; color: #145C3A; }
td.m2{ font-weight:700;  background: #FBF1D0; color: #6B4A0C; }
td.m3{ font-weight:700;  background: #FBDCC0; color: #7A3A06; }
td.m4{ font-weight:700;  background: #F6C9C2; color: #7A2418; }
figure.schema{ margin: 1.4rem 0; text-align: center; }
figure.schema svg{ width: 100%; height: auto; max-width: 760px; }
figure.schema figcaption{ font-size: .85rem; color: var(--encre-2); margin-top: .4rem; }
.schema text{ font-family: var(--corps); }
.legend{ display: flex; gap: 1rem; flex-wrap: wrap; font-size: .85rem; color: var(--encre-2); margin: .4rem 0 1rem; }
table.changes td:first-child{ white-space: nowrap; font-family: var(--data); font-size: .85rem; }
.transition-bar{ display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .5rem; margin: 1.2rem 0; }
.transition-bar div{ background: var(--surface); border: 1px solid var(--trait); border-top: 5px solid var(--sarcelle); border-radius: 10px; padding: .8rem .9rem; font-size: .9rem; }
.transition-bar div.hl{ border-top-color: var(--or-profond); }
.transition-bar b{ display: block; color: var(--sarcelle-fonce); }
/* Accompagnements individuels : phases de séance, touches du clavier, procédures Windows / Mac */
.contenu-seq .phase{ display: inline-block; font-family: var(--data); font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--sarcelle); background: var(--sarcelle-doux); padding: .15em .7em; border-radius: 999px; margin-bottom: .5rem; }
.contenu-seq kbd{ font-family: var(--data); font-size: .82em; background: var(--surface); border: 1px solid var(--trait-fort); border-bottom-width: 2px; border-radius: 5px; padding: .05em .4em; white-space: nowrap; }
.contenu-seq .card.os h4{ display: flex; align-items: center; gap: .45rem; margin: 0 0 .5rem; font-family: var(--data); font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; color: var(--sarcelle-fonce); }
.contenu-seq .card.os h4::before{ content: ""; width: .6rem; height: .6rem; border-radius: 2px; background: var(--sarcelle); }
.contenu-seq .card.os ol, .contenu-seq .card.os ul{ margin: 0; padding-left: 1.2rem; }
.contenu-seq .card.os li{ margin: .25rem 0; }
.contenu-seq .arbo{ font-family: var(--data); font-size: .88rem; line-height: 1.7; background: var(--surface-2); border-radius: 10px; padding: .9rem 1.1rem; white-space: pre; overflow-x: auto; }
@media (max-width: 760px){ .transition-bar{ grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.clause{ display: inline-block; font-family: var(--data); font-size: .76rem; background: var(--nuit); color: var(--or-clair); padding: .05em .45em; border-radius: 5px; }
dl.glossary dt{ font-weight: 600; margin-top: 1rem; color: var(--sarcelle-fonce); }
dl.glossary dd{ margin: .2rem 0 0; }
dl.glossary .hidden{ display: none; }

/* ================================================================ Quiz */

.quiz, .bloc-quiz{ background: var(--surface); border: 1px solid var(--trait); border-radius: var(--rayon); padding: 1.6rem 1.9rem; margin: 2rem 0 1.5rem; }
.bloc-quiz{ border: 2px solid var(--nuit); }
.bloc-quiz > h2{ margin-top: 0; display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.q{ border-top: 1px solid var(--trait); padding: 1.2rem 0; }
.q:first-of-type{ border-top: 0; }
.q-titre{ font-weight: 600; margin-bottom: .65rem; display: flex; gap: .6rem; }
.q-titre .n{ flex-shrink: 0; display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--sarcelle-doux); color: var(--sarcelle-fonce); font-size: .8rem; font-family: var(--data); }
.q-type{ font-size: .78rem; color: var(--encre-3); font-weight: 400; margin-left: .3rem; }
.choix{ list-style: none; padding: 0; margin: 0 0 0 2.2rem; display: grid; gap: .4rem; }
.choix li{ margin: 0; }
.choix label{ display: flex; gap: .7rem; align-items: flex-start; padding: .6rem .85rem; border: 1px solid var(--trait); border-radius: 10px; cursor: pointer; background: var(--surface); transition: border-color .12s, background .12s; }
.choix label:hover{ border-color: var(--sarcelle); }
.choix input{ margin-top: .28rem; accent-color: var(--sarcelle); flex-shrink: 0; width: 16px; height: 16px; }
.choix label.bon{ border-color: var(--ok); background: var(--ok-doux); }
.choix label.faux{ border-color: var(--danger); background: var(--danger-doux); }
.choix label.manque{ border-color: var(--ok); border-style: dashed; }
.explication{ margin: .7rem 0 0 2.2rem; padding: .75rem 1rem; border-radius: 10px; background: var(--surface-2); font-size: .92rem; }
.explication.ok{ background: var(--ok-doux); }
.explication.ko{ background: var(--danger-doux); }
@media (max-width: 640px){ .choix, .explication{ margin-left: 0; } .quiz, .bloc-quiz{ padding: 1.2rem 1rem; } }
.resultat{ display: flex; gap: 1.2rem; align-items: center; flex-wrap: wrap; padding: 1.1rem 1.2rem; border-radius: 14px; margin: 1rem 0; }
.resultat.ok{ background: var(--ok-doux); border: 1px solid #B9DEC9; }
.resultat.ko{ background: var(--alerte-doux); border: 1px solid #EBCBA7; }
.resultat .anneau{ --taille: 70px; --epaisseur: 7px; }
.resultat .anneau span{ font-size: .95rem; }
.resultat p{ margin: 0; }
.pager{ display: flex; justify-content: space-between; gap: 1rem; margin-top: 2rem; flex-wrap: wrap; }
.pager a{ flex: 1; min-width: 220px; display: block; padding: 1rem 1.2rem; border-radius: var(--rayon); background: var(--surface); border: 1px solid var(--trait); text-decoration: none; color: var(--encre); }
.pager a:hover{ border-color: var(--sarcelle); }
.pager a small{ display: block; color: var(--encre-3); font-size: .78rem; font-family: var(--data); letter-spacing: .06em; text-transform: uppercase; }
.pager a b{ color: var(--sarcelle-fonce); font-weight: 500; }
.pager .suivant{ text-align: right; }

/* ======================================================== Attestation */

.page-attestation{ background: #E9E6DD; padding: 2rem 1rem 4rem; }
.barre-attestation{ max-width: 210mm; margin: 0 auto 1rem; display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.attestation{
  --dom: var(--sarcelle);
  width: 210mm; max-width: 100%; min-height: 297mm; margin: 0 auto; background: #fff; color: #1a2a2c;
  padding: 18mm 18mm 16mm; box-shadow: 0 10px 40px rgba(0,0,0,.15); position: relative; display: flex; flex-direction: column;
  font-size: 11pt; line-height: 1.55;
}
.attestation::before{ content: ""; position: absolute; inset: 8mm; border: 1.5px solid #D8AE55; border-radius: 4px; pointer-events: none; }
.attestation::after{ content: ""; position: absolute; inset: 9.5mm; border: .5px solid rgba(216,174,85,.5); border-radius: 3px; pointer-events: none; }
.att-tete{ display: flex; justify-content: space-between; align-items: center; gap: 1rem; border-bottom: 1px solid #E4DCC8; padding-bottom: 6mm; margin-bottom: 8mm; }
.att-tete img{ width: 22mm; height: auto; }
.att-tete .societe{ text-align: right; font-size: 8.5pt; color: #56696A; line-height: 1.45; }
.att-tete .societe b{ font-family: var(--display); font-size: 12pt; color: #0A4D4A; letter-spacing: .06em; }
.attestation h1{ font-family: var(--display); font-size: 22pt; text-align: center; color: #0A4D4A; margin: 0 0 1mm; letter-spacing: .02em; }
.att-sous{ text-align: center; font-family: var(--data); font-size: 8.5pt; letter-spacing: .2em; text-transform: uppercase; color: #8A6420; margin-bottom: 9mm; }
.att-nom{ text-align: center; font-family: var(--display); font-size: 19pt; margin: 3mm 0 1mm; color: #11262A; }
.att-org{ text-align: center; color: #45605F; margin-bottom: 7mm; }
.att-formation{ text-align: center; font-size: 13pt; font-weight: 600; color: #0A4D4A; margin: 2mm 8mm 1mm; line-height: 1.35; }
.att-ref{ text-align: center; font-family: var(--data); font-size: 9pt; color: #6B8280; margin-bottom: 7mm; }
.att-grille{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 3mm; margin: 0 0 7mm; }
.att-grille div{ border: 1px solid #E4DCC8; border-radius: 3mm; padding: 2.5mm 3mm; font-size: 9.5pt; }
.att-grille b{ display: block; font-family: var(--data); font-size: 7pt; letter-spacing: .12em; text-transform: uppercase; color: #8A6420; font-weight: 500; }
.attestation h2{ font-size: 10.5pt; font-family: var(--display); color: #0A4D4A; margin: 0 0 2mm; }
.attestation ul{ margin: 0 0 6mm; padding-left: 5mm; font-size: 9.5pt; }
.attestation li{ margin-bottom: .8mm; }
.att-mention{ font-size: 8pt; color: #56696A; border-top: 1px solid #E4DCC8; padding-top: 4mm; margin-top: auto; }
.att-signature{ display: flex; justify-content: space-between; align-items: flex-end; gap: 8mm; margin: 4mm 0 6mm; font-size: 10pt; }
.att-signature .zone{ width: 70mm; text-align: center; }
.att-signature .trait-sign{ border-bottom: 1px solid #9DB0AD; height: 18mm; margin-bottom: 2mm; }
.att-numero{ font-family: var(--data); font-size: 8.5pt; color: #6B8280; }

/* ===================================================== Back-office */

.admin-tete{ padding: 1.5rem 0 0; }
.admin-tete h1{ color: var(--creme); font-size: 1.6rem; margin: 0 0 .2rem; }
.admin-onglets{ display: flex; gap: .2rem; flex-wrap: wrap; margin-top: 1.1rem; }
.admin-onglets a{ color: #C9D5D1; text-decoration: none; padding: .65rem 1rem; border-radius: 12px 12px 0 0; font-size: .92rem; position: relative; }
.admin-onglets a:hover{ color: #fff; background: rgba(255,255,255,.05); }
.admin-onglets a.actif{ background: var(--papier); color: var(--encre); font-weight: 500; }
.admin-onglets .compteur{ background: var(--or); color: var(--nuit); font-size: .7rem; border-radius: 999px; padding: .05em .45em; margin-left: .35rem; font-weight: 700; }
.admin-corps{ padding: 1.8rem 0 4rem; }
.barre-outils{ display: flex; flex-wrap: wrap; gap: .7rem; align-items: center; margin-bottom: 1.2rem; }
.barre-outils input[type=search]{ max-width: 300px; }
.barre-outils select{ width: auto; min-width: 180px; }
.barre-outils .espaceur{ flex: 1; }
.tableau-conteneur{ overflow-x: auto; background: var(--surface); border: 1px solid var(--trait); border-radius: var(--rayon); }
table.tableau{ width: 100%; border-collapse: collapse; font-size: .9rem; }
table.tableau th{ text-align: left; font-family: var(--data); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--encre-3); font-weight: 500; padding: .8rem .9rem; border-bottom: 1px solid var(--trait); background: #FBFAF6; white-space: nowrap; }
table.tableau td{ padding: .75rem .9rem; border-bottom: 1px solid var(--surface-3); vertical-align: middle; }
table.tableau tr:last-child td{ border-bottom: 0; }
table.tableau tr.cliquable{ cursor: pointer; }
table.tableau tr.cliquable:hover td{ background: #FAF9F4; }
table.tableau .nom b{ display: block; font-weight: 500; }
table.tableau .nom small{ color: var(--encre-3); }
.mini-barres{ display: flex; flex-wrap: wrap; gap: .3rem; }
.mini{ --dom: var(--sarcelle); display: inline-flex; align-items: center; gap: .35rem; font-family: var(--data); font-size: .7rem; background: var(--surface-2); border-radius: 6px; padding: .15rem .45rem; white-space: nowrap; }
.mini i{ width: 34px; height: 5px; border-radius: 3px; background: var(--surface-3); overflow: hidden; display: inline-block; }
.mini i::before{ content: ""; display: block; height: 100%; width: calc(var(--pct, 0) * 1%); background: var(--dom); }
.stat-admin{ display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; margin-bottom: 1.6rem; }
@media (max-width: 900px){ .stat-admin{ grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.detail-grille{ display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 1.4rem; align-items: start; }
@media (max-width: 1000px){ .detail-grille{ grid-template-columns: 1fr; } }
.inscription-admin{ border: 1px solid var(--trait); border-radius: 14px; margin-bottom: 1rem; overflow: hidden; background: var(--surface); }
.inscription-admin > summary{ list-style: none; cursor: pointer; display: grid; grid-template-columns: 6px minmax(0, 1fr) auto; gap: 1rem; align-items: center; padding: .9rem 1.1rem .9rem 0; }
.inscription-admin > summary::-webkit-details-marker{ display: none; }
.inscription-admin > summary::before{ content: ""; align-self: stretch; background: var(--dom); border-radius: 0 4px 4px 0; }
.inscription-admin .corps{ padding: .4rem 1.2rem 1.2rem; border-top: 1px solid var(--trait); }
.seq-admin{ display: grid; grid-template-columns: 34px minmax(0, 1fr) auto auto; gap: .6rem; align-items: center; padding: .45rem 0; border-bottom: 1px solid var(--surface-3); font-size: .88rem; }
.journal{ list-style: none; padding: 0; margin: 0; font-size: .86rem; }
.journal li{ display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: .8rem; padding: .5rem 0; border-bottom: 1px solid var(--surface-3); margin: 0; }
.journal time{ font-family: var(--data); font-size: .74rem; color: var(--encre-3); }
dialog.modale{ border: 0; border-radius: 18px; padding: 0; width: min(640px, 94vw); box-shadow: var(--ombre-forte); color: var(--encre); }
dialog.modale::backdrop{ background: rgba(0, 22, 26, .55); backdrop-filter: blur(2px); }
.modale__tete{ display: flex; justify-content: space-between; align-items: center; padding: 1.1rem 1.4rem; border-bottom: 1px solid var(--trait); }
.modale__tete h2{ font-size: 1.15rem; margin: 0; }
.modale__corps{ padding: 1.3rem 1.4rem; max-height: 72vh; overflow-y: auto; }
.modale__pied{ display: flex; justify-content: flex-end; gap: .6rem; padding: 1rem 1.4rem; border-top: 1px solid var(--trait); background: #FBFAF6; }
.fermer{ background: none; border: 0; font-size: 1.4rem; line-height: 1; cursor: pointer; color: var(--encre-3); }
.lien-copie{ display: flex; gap: .5rem; }
.lien-copie input{ font-family: var(--data); font-size: .8rem; }
.toast{ position: fixed; right: 1.2rem; bottom: 1.2rem; z-index: 300; background: var(--nuit); color: var(--creme); padding: .85rem 1.2rem; border-radius: 12px; box-shadow: var(--ombre-forte); font-size: .92rem; max-width: 380px; border-left: 4px solid var(--or); transform: translateY(20px); opacity: 0; transition: .25s var(--ease); }
.toast.visible{ transform: none; opacity: 1; }
.toast.erreur{ border-left-color: #E07B6E; }
.chargement{ padding: 3rem; text-align: center; color: var(--encre-3); }
.chargement::before{ content: ""; display: block; width: 28px; height: 28px; margin: 0 auto .8rem; border-radius: 50%; border: 3px solid var(--surface-3); border-top-color: var(--or-profond); animation: tourne .8s linear infinite; }
@keyframes tourne{ to{ transform: rotate(360deg); } }

/* ================================================================ Impression */

@media print{
  @page{ size: A4; margin: 0; }
  body{ background: #fff; }
  .entete, .pied, .barre-attestation, .lecteur__nav, .bouton-nav-lecteur, .pager, .progression-lecture, .no-print{ display: none !important; }
  .page-attestation{ padding: 0; background: #fff; }
  .attestation{ box-shadow: none; margin: 0; width: 210mm; min-height: 296mm; }
  .fiche-imprimable .fiche__aside{ position: static; }
  .lecteur{ display: block; }
}

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}