/* Passeport Orateur — Cap Éloquence. Feuille de style unique, sans dépendance externe. */

@font-face { font-family: "Hanken Grotesk"; src: url("fonts/hanken-grotesk-latin-wght-normal.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Cormorant Garamond"; src: url("fonts/cormorant-garamond-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Cormorant Garamond"; src: url("fonts/cormorant-garamond-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Cormorant Garamond"; src: url("fonts/cormorant-garamond-latin-600-italic.woff2") format("woff2"); font-weight: 600; font-style: italic; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }

:root {
  --nuit: #00447d;
  --roi: #00447d;
  --roi-fonce: #00315c;
  --roi-pale: #e6eef6;
  --or: #d2a428;
  --or-fonce: #7f5a00;
  --or-pale: #fbf4dc;
  --papier: #f2f5f9;
  --blanc: #ffffff;
  --encre: #0e1e33;
  --encre-2: #43536a;
  --encre-3: #5f6e84;
  --trait: #d9e1ea;
  --trait-fort: #b5c1d0;
  --ok: #17704a;
  --ok-pale: #e3f4eb;
  --jaune: #7d5c00;
  --jaune-pale: #fff3c9;
  --orange: #a84a0a;
  --orange-pale: #ffe8d8;
  --rouge: #b3261e;
  --rouge-pale: #fce8e6;
  --texte: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --titre: "Cormorant Garamond", "Iowan Old Style", Georgia, serif;
  --mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --rayon: 10px;
  --rayon-page: 14px;
  --lateral: 268px;
  --entete: 60px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--entete) + 16px); }
body { margin: 0; background: var(--papier); color: var(--encre); font: 400 16px/1.55 var(--texte); font-variant-numeric: tabular-nums; -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote, fieldset { margin: 0; padding: 0; }
ul, ol { list-style: none; }
fieldset { border: 0; min-width: 0; }
img, svg { max-width: 100%; }
a { color: var(--roi); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--roi-fonce); text-decoration-thickness: 2px; }
strong { font-weight: 650; }
:focus-visible { outline: 3px solid var(--or); outline-offset: 2px; border-radius: 4px; }
[hidden] { display: none !important; }
.masque, .masque-visuel { position: absolute !important; width: 1px !important; height: 1px !important; min-height: 0 !important; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0 !important; padding: 0 !important; margin: -1px !important; opacity: 0; }
.mono { font-family: var(--mono); font-weight: 500; letter-spacing: 0.02em; }
.ic { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

.evitement { position: absolute; left: 12px; top: -60px; z-index: 50; background: var(--blanc); color: var(--nuit); padding: 10px 16px; border-radius: var(--rayon); font-weight: 650; }
.evitement:focus { top: 10px; }

/* ---------- Titres et texte ---------- */
h1 { font: 700 2.15rem/1.08 var(--titre); letter-spacing: -0.012em; color: var(--nuit); text-wrap: balance; }
h2 { font: 600 1.62rem/1.15 var(--titre); color: var(--nuit); margin-bottom: 14px; text-wrap: balance; }
h3 { font: 650 1rem/1.3 var(--texte); margin-bottom: 8px; }
ul + h3, ol + h3, p + h3, .table-cadre + h3 { margin-top: 24px; }
h4 { font: 650 0.84rem/1.3 var(--texte); color: var(--encre-2); margin-bottom: 6px; }
.chapeau { font-size: 1.06rem; color: var(--encre-2); margin-top: 8px; max-width: 62ch; }
.aide { font-size: 0.86rem; line-height: 1.45; color: var(--encre-3); }
p + p, p + ul, ul + p { margin-top: 10px; }
.question-titre { font-style: italic; }

/* ---------- Structure de l'application ---------- */
.page-app { padding-top: var(--entete); padding-bottom: calc(72px + env(safe-area-inset-bottom)); }
.entete { position: fixed; inset: 0 0 auto 0; height: var(--entete); z-index: 30; background: var(--nuit); color: var(--blanc); display: flex; align-items: center; justify-content: space-between; padding: 0 16px; }
.marque { display: flex; align-items: center; gap: 11px; color: var(--blanc); text-decoration: none; min-width: 0; }
.marque:hover { color: var(--blanc); }
.marque-texte { display: flex; flex-direction: column; line-height: 1.05; min-width: 0; }
.marque-club { font: 700 1.22rem/1 var(--titre); letter-spacing: 0.01em; white-space: nowrap; }
.marque-produit { font-size: 0.72rem; color: #f1d352; letter-spacing: 0.04em; margin-top: 3px; }
.logo-img { height: 42px; width: 42px; display: block; flex: none; }
.entete-compte { display: flex; align-items: center; gap: 10px; color: var(--blanc); text-decoration: none; font-weight: 600; font-size: 0.92rem; border-radius: 999px; padding: 4px; }
.entete-nom { display: none; }
.avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--or); color: var(--nuit); display: inline-grid; place-items: center; font-weight: 700; font-size: 0.82rem; letter-spacing: 0.02em; flex: none; }
.avatar.grand { width: 60px; height: 60px; font-size: 1.2rem; }

.lateral { display: none; }
.contenu { padding: 26px 18px 40px; max-width: 940px; margin: 0 auto; }
.contenu:focus { outline: none; }
.contenu > section, .contenu > .colonnes, .contenu > article, .contenu > form, .contenu > details, .contenu > .table-cadre, .contenu > .passeport { margin-top: 38px; }
.contenu > h1 + section, .contenu > .chapeau + section { margin-top: 30px; }

.barre-bas { position: fixed; inset: auto 0 0 0; z-index: 30; background: var(--blanc); border-top: 1px solid var(--trait); padding-bottom: env(safe-area-inset-bottom); }
.barre-bas ul { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; }
.barre-bas a { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 9px 2px 8px; font-size: 0.69rem; font-weight: 600; color: var(--encre-3); text-decoration: none; position: relative; }
.barre-bas a .ic { width: 23px; height: 23px; }
.barre-bas a[aria-current] { color: var(--roi); }
.barre-bas a[aria-current]::before { content: ""; position: absolute; top: -1px; left: 26%; right: 26%; height: 3px; background: var(--or); border-radius: 0 0 3px 3px; }

@media (min-width: 1020px) {
  .page-app { padding-left: var(--lateral); padding-bottom: 0; }
  .entete { padding: 0 28px 0 22px; }
  .entete-nom { display: inline; padding-right: 10px; }
  .entete-compte { flex-direction: row-reverse; }
  .barre-bas { display: none; }
  .lateral { display: block; position: fixed; top: var(--entete); bottom: 0; left: 0; width: var(--lateral); overflow-y: auto; background: var(--blanc); border-right: 1px solid var(--trait); padding: 22px 14px 28px; }
  .contenu { padding: 44px 48px 72px; }
  h1 { font-size: 2.85rem; }
  h2 { font-size: 1.85rem; }
}
.lateral-titre { font-size: 0.78rem; font-weight: 650; color: var(--encre-3); padding: 0 12px; margin: 18px 0 6px; }
.lateral-titre:first-child { margin-top: 0; }
.lateral a, .lien-nav { display: flex; align-items: center; gap: 12px; width: 100%; padding: 9px 12px; border-radius: var(--rayon); color: var(--encre); text-decoration: none; font: 500 0.95rem/1.3 var(--texte); background: none; border: 0; cursor: pointer; text-align: left; }
.lateral a:hover, .lien-nav:hover { background: var(--papier); color: var(--encre); }
.lateral a[aria-current] { background: var(--roi-pale); color: var(--roi-fonce); font-weight: 650; box-shadow: inset 3px 0 0 var(--or); }
.lateral a .ic, .lien-nav .ic { color: var(--encre-3); }
.lateral a[aria-current] .ic { color: var(--roi); }
.lateral a span:first-of-type { flex: 1; }
.lateral-pied { margin-top: 22px; padding-top: 14px; border-top: 1px solid var(--trait); }
.compteur { background: var(--roi); color: var(--blanc); font-size: 0.74rem; font-weight: 700; min-width: 22px; height: 22px; border-radius: 999px; display: inline-grid; place-items: center; padding: 0 7px; flex: none; }

.page-tete { display: flex; flex-wrap: wrap; gap: 14px 24px; align-items: flex-end; justify-content: space-between; }
.section-tete { display: flex; flex-wrap: wrap; gap: 6px 20px; align-items: baseline; justify-content: space-between; margin-bottom: 14px; }
.section-tete h2 { margin-bottom: 0; }
.section-tete > a { font-size: 0.9rem; font-weight: 600; }
.fil { margin-bottom: 14px; }
.fil a { display: inline-flex; align-items: center; gap: 4px; font-size: 0.9rem; font-weight: 600; text-decoration: none; margin-left: -6px; }
.fil .ic { width: 18px; height: 18px; }
.colonnes { display: grid; gap: 38px 44px; }
@media (min-width: 760px) { .colonnes { grid-template-columns: 1fr 1fr; align-items: start; } }
.identite { display: flex; gap: 16px; align-items: center; }

/* ---------- Boutons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 9px 18px; border: 1px solid var(--trait-fort); border-radius: var(--rayon); background: var(--blanc); color: var(--encre); font: 650 0.94rem/1.2 var(--texte); text-decoration: none; cursor: pointer; transition: background-color 0.12s, border-color 0.12s; -webkit-tap-highlight-color: transparent; }
.btn:hover { border-color: var(--encre-2); color: var(--encre); background: var(--blanc); }
.btn .ic { width: 18px; height: 18px; }
.btn-primaire { background: var(--roi); border-color: var(--roi); color: var(--blanc); }
.btn-primaire:hover { background: var(--roi-fonce); border-color: var(--roi-fonce); color: var(--blanc); }
.btn-discret { border-color: transparent; background: transparent; color: var(--encre-2); }
.btn-discret:hover { background: rgba(14, 30, 51, 0.06); border-color: transparent; }
.btn-danger { border-color: var(--rouge); color: var(--rouge); }
.btn-danger:hover { background: var(--rouge); border-color: var(--rouge); color: var(--blanc); }
.btn-mini { min-height: 36px; padding: 6px 12px; font-size: 0.86rem; }
.btn-large { width: 100%; min-height: 52px; font-size: 1.02rem; }
.lien-discret { background: none; border: 0; padding: 4px 0; font: 500 0.82rem var(--texte); color: var(--encre-3); text-decoration: underline; cursor: pointer; }
.actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 16px; }
.actions form { display: contents; }
.separe { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--trait); }

/* ---------- Formulaires ---------- */
.formulaire { display: grid; gap: 18px; max-width: 640px; }
.formulaire.compact { gap: 14px; }
.formulaire.evaluation { max-width: 760px; gap: 30px; }
#bloc-eval { display: grid; gap: 30px; }
.formulaire.en-ligne { margin-top: 18px; }
@media (min-width: 620px) {
  .formulaire.en-ligne { grid-template-columns: 1fr auto; align-items: end; }
  .formulaire.en-ligne > input[type="hidden"] { display: none; }
}
.champ { display: grid; gap: 6px; min-width: 0; }
.champ label, .groupe > legend { font-weight: 650; font-size: 0.92rem; }
.facultatif { font-weight: 400; font-size: 0.8rem; color: var(--encre-3); margin-left: 4px; }
input[type="text"], input[type="email"], input[type="password"], input[type="date"], input[type="url"], input[type="tel"], input[type="number"], input[type="search"], input[type="file"], select, textarea {
  width: 100%; min-height: 48px; padding: 11px 14px; border: 1px solid var(--trait-fort); border-radius: var(--rayon); background: var(--blanc); color: var(--encre); font: 400 1rem/1.4 var(--texte); appearance: none; -webkit-appearance: none; }
input[type="file"] { padding: 9px 10px; font-size: 0.9rem; }
textarea { resize: vertical; min-height: 0; }
select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2348506c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; background-size: 18px; padding-right: 40px; }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid var(--or); outline-offset: 1px; border-color: var(--roi); border-radius: var(--rayon); }
input[readonly], textarea[readonly] { background: var(--papier); color: var(--encre-2); font-family: var(--mono); font-size: 0.84rem; }
::placeholder { color: #8d94ab; opacity: 1; }
.grille-2, .grille-3 { display: grid; gap: 14px; }
@media (min-width: 560px) { .grille-2 { grid-template-columns: 1fr 1fr; } .grille-3 { grid-template-columns: 1.3fr 1fr 1fr; align-items: end; } }
.groupe { display: grid; gap: 14px; }
.groupe > legend { font: 600 1.4rem/1.2 var(--titre); color: var(--nuit); padding: 0; margin-bottom: 12px; }
.formulaire:not(.evaluation) .groupe > legend { font: 650 0.92rem var(--texte); color: var(--encre); margin-bottom: 8px; }
.case { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: start; cursor: pointer; }
.case input { width: 22px; height: 22px; margin: 2px 0 0; accent-color: var(--roi); }
.case-label { display: block; font-weight: 550; }
.case .aide { display: block; margin-top: 2px; }
.lien-notice { margin-left: 34px; margin-top: -8px; }

.segments { display: flex; flex-wrap: wrap; gap: 8px; }
.segments label { position: relative; cursor: pointer; }
.segments input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.segments span { display: inline-flex; align-items: center; min-height: 38px; padding: 6px 14px; border: 1px solid var(--trait-fort); border-radius: 999px; background: var(--blanc); font-weight: 600; font-size: 0.88rem; color: var(--encre-2); }
.segments input:checked + span { background: var(--nuit); border-color: var(--nuit); color: var(--blanc); }
.segments input:focus-visible + span { outline: 3px solid var(--or); outline-offset: 2px; }
.segments.large span { min-height: 46px; padding: 8px 18px; font-size: 0.95rem; }

.notes-grille { display: grid; gap: 4px 28px; }
@media (min-width: 700px) { .notes-grille { grid-template-columns: 1fr 1fr; } }
.note { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--trait); }
.note legend { float: left; font-weight: 600; font-size: 0.95rem; padding: 0; }
.note-choix { display: flex; gap: 6px; flex: none; }
.note-choix label { position: relative; cursor: pointer; }
.note-choix input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.note-choix span { display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid var(--trait-fort); border-radius: 50%; background: var(--blanc); font-weight: 650; color: var(--encre-2); }
.note-choix input:checked + span { background: var(--roi); border-color: var(--roi); color: var(--blanc); }
.note-choix input:focus-visible + span { outline: 3px solid var(--or); outline-offset: 2px; }
@media (max-width: 380px) { .note-choix span { width: 37px; height: 37px; } .note-choix { gap: 4px; } }
.echelle { margin-top: -6px; }
.defi-precedent { background: var(--or-pale); border-radius: var(--rayon); padding: 14px 16px; display: grid; gap: 10px; }
.suggestions-liste { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
.suggestions-liste button { text-align: left; background: var(--roi-pale); color: var(--roi-fonce); border: 0; border-radius: var(--rayon); padding: 9px 12px; font: 500 0.88rem/1.35 var(--texte); cursor: pointer; }
.suggestions-liste button:hover { background: #d6e3f0; }
.barre-validation { position: sticky; bottom: calc(72px + env(safe-area-inset-bottom)); background: linear-gradient(to top, var(--papier) 72%, rgba(242, 245, 249, 0)); padding: 18px 0 12px; margin-top: 0; z-index: 5; }
@media (min-width: 1020px) { .barre-validation { bottom: 0; } }
.barre-validation .btn-large { width: auto; flex: 1; }
.prompt { font-size: 0.8rem !important; line-height: 1.5; }

.onglets { display: flex; gap: 6px; overflow-x: auto; margin: 18px -18px 12px; padding: 2px 18px 6px; scrollbar-width: none; }
.onglets::-webkit-scrollbar { display: none; }
.onglets a { flex: none; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--trait-fort); background: var(--blanc); color: var(--encre-2); font-weight: 600; font-size: 0.88rem; text-decoration: none; }
.onglets a[aria-current] { background: var(--nuit); border-color: var(--nuit); color: var(--blanc); }
.sommaire { display: flex; gap: 4px 18px; flex-wrap: wrap; margin-top: 22px; padding: 12px 0; border-block: 1px solid var(--trait); font-size: 0.9rem; font-weight: 600; }
.sommaire a { text-decoration: none; }

/* ---------- Messages, pastilles, états ---------- */
.message { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: start; padding: 13px 16px; border-radius: var(--rayon); margin-bottom: 18px; font-size: 0.95rem; }
.message .ic { margin-top: 2px; }
.message-ok { background: var(--ok-pale); color: #0d4a30; }
.message-erreur { background: var(--rouge-pale); color: #7a1711; }
.message-info { background: var(--roi-pale); color: var(--roi-fonce); }
.message ul { list-style: disc; padding-left: 18px; margin-top: 6px; }
.pastille { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 999px; font-size: 0.78rem; font-weight: 650; line-height: 1.35; background: var(--roi-pale); color: var(--roi-fonce); white-space: nowrap; vertical-align: middle; }
.pastille .ic { width: 14px; height: 14px; stroke-width: 2; }
.pastille.ok { background: var(--ok-pale); color: var(--ok); }
.pastille.neutre { background: #e9ecf4; color: var(--encre-2); }
.pastille.niveau-1 { background: #dce8f3; color: #00447d; }
.pastille.niveau-2 { background: #a9c6e0; color: #002a4f; }
.pastille.niveau-3 { background: #2a6aa3; color: #fff; }
.pastille.niveau-4 { background: var(--nuit); color: #f1d352; }
.pastille.alerte-jaune { background: var(--jaune-pale); color: var(--jaune); }
.pastille.alerte-orange { background: var(--orange-pale); color: var(--orange); }
.pastille.alerte-rouge { background: var(--rouge-pale); color: var(--rouge); }
.signal { display: grid; gap: 8px; padding: 14px 16px; border-radius: var(--rayon); margin-top: 14px; font-size: 0.94rem; justify-items: start; }
.signal-jaune { background: #fffaea; box-shadow: inset 3px 0 0 #d9a400; }
.signal-orange { background: #fff4ec; box-shadow: inset 3px 0 0 #d9640f; }
.signal-rouge { background: #fdf1f0; box-shadow: inset 3px 0 0 var(--rouge); }
.signal.attenue { opacity: 0.72; }
.vide { border: 1px dashed var(--trait-fort); border-radius: var(--rayon-page); padding: 26px 22px; color: var(--encre-2); display: grid; gap: 6px; justify-items: start; }
.vide-titre { font: 600 1.3rem/1.2 var(--titre); color: var(--nuit); }
.vide .btn { margin-top: 8px; }
.encadre-important { background: var(--or-pale); border: 1px solid #e6d5a3; border-radius: var(--rayon-page); padding: 20px; margin-top: 26px; display: grid; gap: 12px; }
.encadre-important h2 { margin-bottom: 0; }
.note-equipe { margin-top: 16px; padding: 12px 16px; background: var(--or-pale); border-radius: var(--rayon); font-size: 0.94rem; }
.repli { margin-top: 16px; }
.repli > summary { cursor: pointer; font-weight: 650; font-size: 0.94rem; color: var(--roi); padding: 6px 0; }
.repli[open] > summary { margin-bottom: 12px; }
.repli > p { max-width: 62ch; margin-bottom: 12px; }
.repli > ul { list-style: disc; padding-left: 20px; display: grid; gap: 6px; }

.pips { display: inline-flex; gap: 4px; vertical-align: middle; }
.pips i { width: 9px; height: 9px; border-radius: 50%; background: var(--trait); }
.pips i.plein { background: var(--roi); }
.pips.vide { border: 0; padding: 0; display: inline-flex; }
.pips.vide i { background: transparent; box-shadow: inset 0 0 0 1px var(--trait-fort); }
.tend { font-weight: 700; font-size: 0.84rem; color: var(--encre-3); }
.tend-plus { color: var(--ok); }
.tend-moins { color: var(--orange); }

/* ---------- Listes ---------- */
.liste-liens { border-top: 1px solid var(--trait); }
.liste-liens li { border-bottom: 1px solid var(--trait); }
.liste-liens a { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 13px 4px; color: var(--encre); text-decoration: none; }
.liste-liens a:hover { background: rgba(0, 68, 125, 0.05); }
.liste-liens a > span:first-child { display: grid; gap: 2px; min-width: 0; }
.liste-liens a > .ic { color: var(--encre-3); }
.liste-liens .avec-icone { display: flex !important; align-items: center; gap: 12px; }
.liste-liens .avec-icone .ic { color: var(--roi); }
.liste-simple { border-top: 1px solid var(--trait); }
.liste-simple li { display: flex; justify-content: space-between; align-items: baseline; gap: 6px 16px; flex-wrap: wrap; padding: 10px 2px; border-bottom: 1px solid var(--trait); }
.liste-simple li > span:first-child { min-width: 0; flex: 1 1 240px; }
.liste-simple.petit { font-size: 0.9rem; margin-top: 14px; }
.liste-simple form { display: inline; }
.classement { counter-reset: rang; border-top: 1px solid var(--trait); }
.classement li { counter-increment: rang; display: flex; justify-content: space-between; gap: 12px; padding: 10px 2px; border-bottom: 1px solid var(--trait); }
.classement li::before { content: counter(rang); font-weight: 700; color: var(--encre-3); width: 22px; flex: none; }
.classement li a { flex: 1; }
.etapes { list-style: decimal; padding-left: 22px; display: grid; gap: 10px; max-width: 66ch; }
.etapes li::marker { font-weight: 700; color: var(--roi); }
.controle { display: grid; gap: 10px; margin: 12px 0 20px; }
.controle li { display: grid; grid-template-columns: auto 1fr; gap: 10px; font-size: 0.94rem; }
.controle .ok .ic { color: var(--ok); }
.controle .ko .ic { color: var(--orange); }
.controle .attente .ic { color: var(--encre-3); }
.engagements { display: grid; gap: 10px; margin: 20px 0 26px; }
.engagements li { display: grid; grid-template-columns: auto 1fr; gap: 10px; }
.engagements .ic { color: var(--ok); margin-top: 2px; }
.codes { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; max-width: 340px; }
.codes li { background: var(--blanc); border: 1px solid #e6d5a3; border-radius: 8px; padding: 8px 10px; text-align: center; font-size: 0.95rem; }
.cle-2fa { display: inline-block; background: var(--papier); padding: 4px 8px; border-radius: 6px; margin-top: 4px; word-break: break-all; }
.liens-activation { display: grid; gap: 16px; }
.liens-activation li { display: grid; gap: 8px; padding-top: 14px; border-top: 1px solid #e6d5a3; }
.liens-activation .actions { margin-top: 0; }
.pagination { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 20px; }
.texte-ia { max-width: 68ch; }
.deconnexion-mobile { margin-top: 34px; }
@media (min-width: 1020px) { .deconnexion-mobile { display: none; } }

.fiche-courte { display: grid; gap: 0; border-top: 1px solid var(--trait); margin: 18px 0; max-width: 640px; }
.fiche-courte > div { display: flex; justify-content: space-between; gap: 16px; padding: 10px 2px; border-bottom: 1px solid var(--trait); flex-wrap: wrap; }
.fiche-courte dt { color: var(--encre-2); font-size: 0.92rem; }
.fiche-courte dd { font-weight: 600; text-align: right; word-break: break-word; }

.chiffres { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--trait); border: 1px solid var(--trait); border-radius: var(--rayon-page); overflow: hidden; margin: 6px 0 22px; }
.chiffres > div { background: var(--blanc); padding: 14px 16px; display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 2px; }
.chiffres dt { font-size: 0.84rem; color: var(--encre-2); line-height: 1.3; }
.chiffres dt .aide { display: block; font-size: 0.76rem; }
.chiffres dd { font: 700 2.1rem/1 var(--titre); color: var(--nuit); }
.chiffres dd.texte { font: 650 1rem/1.3 var(--texte); padding: 6px 0 4px; }
.chiffres .sur { font: 500 0.84rem var(--texte); color: var(--encre-3); }
@media (min-width: 700px) { .chiffres { grid-template-columns: repeat(4, 1fr); } }

/* ---------- Accueil ---------- */
.accueil-tete { padding-bottom: 6px; }
.question { font: italic 600 1.55rem/1.2 var(--titre); color: var(--roi); margin: 12px 0 26px; max-width: 26ch; text-wrap: balance; }
@media (min-width: 1020px) { .question { font-size: 2rem; } }
.accueil-niveau { margin-top: 22px; color: var(--encre-2); max-width: 62ch; }

.cap { display: grid; grid-template-columns: repeat(4, 1fr); position: relative; max-width: 620px; }
.cap::before { content: ""; position: absolute; top: 21px; left: 12.5%; right: 12.5%; height: 2px; background: repeating-linear-gradient(to right, var(--trait-fort) 0 6px, transparent 6px 11px); }
.cap + .chiffres { margin-top: 20px; }
.contenu section > p + .colonnes { margin-top: 24px; }
.page-tete > .actions { margin-top: 0; }
.cap-etape { display: grid; justify-items: center; gap: 8px; position: relative; text-align: center; }
.cap-point { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--blanc); border: 2px solid var(--trait-fort); color: var(--encre-3); font-weight: 700; position: relative; }
.cap-nom { font-size: 0.82rem; font-weight: 600; color: var(--encre-3); }
.cap-etape.franchi .cap-point { background: var(--roi); border-color: var(--roi); color: var(--blanc); }
.cap-etape.franchi .cap-nom { color: var(--encre-2); }
.cap-etape.actuel .cap-point { background: var(--nuit); border-color: var(--or); color: #f1d352; box-shadow: 0 0 0 4px var(--papier), 0 0 0 5.500px var(--or); }
.cap-etape.actuel .cap-nom { color: var(--nuit); font-weight: 700; font-size: 0.92rem; }

.defi-carte { background: var(--blanc); border-radius: var(--rayon-page); padding: 22px 22px 20px; box-shadow: inset 4px 0 0 var(--or), 0 0 0 1px var(--trait); }
.defi-carte + .defi-carte { margin-top: 16px; }
.defi-carte h2 { font: 650 0.86rem/1.3 var(--texte); color: var(--or-fonce); margin-bottom: 8px; }
.defi-texte { font: 600 1.5rem/1.22 var(--titre); color: var(--nuit); max-width: 34ch; text-wrap: balance; }
.defi-texte.attenue { color: var(--encre-3); }
.defi-carte .aide { margin-top: 8px; }
.defi-carte .formulaire { margin-top: 16px; }
.nouveau-badge { display: grid; grid-template-columns: 62px 1fr; gap: 16px; align-items: center; margin-top: 26px; padding: 14px 18px; background: var(--nuit); color: var(--blanc); border-radius: var(--rayon-page); text-decoration: none; }
.nouveau-badge:hover { color: var(--blanc); }
.nouveau-badge .medaille { width: 62px; height: 62px; }
.nouveau-badge > span { display: grid; gap: 2px; }
.nouveau-badge > span > span { font-size: 0.88rem; color: #d5e2ef; }
.atelier-date { font-weight: 650; }
.atelier-theme { font: 600 1.4rem/1.2 var(--titre); color: var(--nuit); }
.reperes { display: grid; gap: 10px; margin: 12px 0; }
.reperes li { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: start; font-size: 0.95rem; }
.reperes .ok .ic { color: var(--ok); }
.reperes .en-cours .ic { color: var(--encre-3); }
.repere-actuel { display: block; font-size: 0.84rem; color: var(--encre-3); }
.reperes-intro { color: var(--encre-2); font-size: 0.95rem; }

/* ---------- Prises de parole et retours ---------- */
.prises { display: grid; gap: 18px; }
.prise { background: var(--blanc); border-radius: var(--rayon-page); box-shadow: 0 0 0 1px var(--trait); padding: 20px 22px; }
.prise-date { font-size: 0.84rem; font-weight: 600; color: var(--encre-3); }
.prise h3 { font: 600 1.4rem/1.2 var(--titre); color: var(--nuit); margin: 2px 0 2px; }
.prise-titre { font-style: italic; }
.prise-meta { font-size: 0.86rem; color: var(--encre-3); }
.prise-sans { margin-top: 12px; color: var(--encre-3); }
.retour { display: grid; gap: 16px; margin-top: 18px; }
@media (min-width: 760px) { .retour { grid-template-columns: 1.15fr 1fr 1fr; gap: 26px; } }
.retour-bloc { padding-top: 12px; border-top: 2px solid var(--trait); }
.retour-forces { border-color: var(--ok); }
.retour-axe { border-color: var(--roi); }
.retour-defi { border-color: var(--or); }
.retour-forces ul { display: grid; gap: 4px; }
.retour-forces li { padding-left: 16px; position: relative; }
.retour-forces li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 7px; height: 7px; border-radius: 50%; background: var(--ok); }
.prise-commentaire { margin-top: 16px; padding-left: 14px; border-left: 2px solid var(--trait-fort); color: var(--encre-2); font-style: italic; }
.prise-media { margin-top: 12px; font-size: 0.92rem; font-weight: 600; }
.notes { margin-top: 16px; }
.notes > summary { cursor: pointer; font-weight: 650; font-size: 0.9rem; color: var(--roi); }
.notes-moy { font-weight: 500; color: var(--encre-3); margin-left: 6px; }
.notes-liste { margin-top: 10px; display: grid; gap: 0; }
.notes-liste li { display: grid; grid-template-columns: 1fr auto; gap: 4px 14px; align-items: center; padding: 7px 0; border-bottom: 1px solid var(--trait); font-size: 0.92rem; }
.note-libelle { grid-column: 1 / -1; font-size: 0.8rem; color: var(--encre-3); margin-top: -4px; }
@media (min-width: 560px) { .notes-liste li { grid-template-columns: 1fr auto 110px; } .note-libelle { grid-column: auto; margin-top: 0; } }
.prise-lien { margin-top: -8px; font-size: 0.86rem; text-align: right; }
.liste-defis { border-top: 1px solid var(--trait); }
.liste-defis li { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; padding: 13px 2px; border-bottom: 1px solid var(--trait); }
.defi-ligne { font-weight: 550; }
.liste-actions { display: grid; gap: 8px; justify-items: end; flex: none; }

/* ---------- Compétences ---------- */
.profil-graphes { display: grid; gap: 26px; margin-top: 26px; }
.tend.stable { font-weight: 500; font-size: 0.8rem; }
@media (min-width: 820px) { .profil-graphes { grid-template-columns: 1fr 1fr; align-items: start; } }
.figure { background: var(--blanc); border-radius: var(--rayon-page); box-shadow: 0 0 0 1px var(--trait); padding: 18px 16px 16px; }
.figure figcaption { font-weight: 650; font-size: 0.92rem; margin-bottom: 8px; }
.graph { display: block; width: 100%; max-width: 480px; margin: 0 auto; height: auto; }
.g-grille { fill: none; stroke: var(--trait); stroke-width: 1; }
.g-serie { fill: rgba(0, 68, 125, 0.13); stroke: var(--roi); stroke-width: 2; stroke-linejoin: round; }
.g-prec { fill: none; stroke: var(--encre-3); stroke-width: 1.5; stroke-dasharray: 4 4; stroke-linejoin: round; }
.g-point { fill: var(--roi); stroke: var(--blanc); stroke-width: 2; }
.g-ligne { fill: none; stroke: var(--roi); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.g-barre { fill: var(--roi); }
.g-barre.ton-1 { fill: #a3c3e0; }
.g-barre.ton-2 { fill: #5791c4; }
.g-barre.ton-3 { fill: #00447d; }
.g-barre.ton-4 { fill: #002a4f; }
.g-etiquette { font: 650 12.5px var(--texte); fill: var(--encre); }
.g-valeur { font: 500 12px var(--texte); fill: var(--encre-2); }
.g-valeur-forte { font: 700 14px var(--texte); fill: var(--encre); }
.g-axe { font: 500 11px var(--texte); fill: var(--encre-3); }
.legende { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 0.82rem; color: var(--encre-2); margin-top: 6px; }
.legende li { display: flex; align-items: center; gap: 8px; }
.cle { width: 22px; height: 0; border-top: 2px solid var(--roi); }
.cle-prec { border-top: 2px dashed var(--encre-3); }
.dimension { margin-top: 34px; }
.dimension header { display: flex; justify-content: space-between; align-items: baseline; gap: 6px 16px; flex-wrap: wrap; border-bottom: 2px solid var(--nuit); padding-bottom: 8px; }
.dimension h2 { margin-bottom: 0; }
.dimension-moy strong { font: 700 1.5rem var(--titre); color: var(--nuit); }
.competences li { display: grid; grid-template-columns: 1fr auto; gap: 2px 14px; align-items: center; padding: 11px 2px; border-bottom: 1px solid var(--trait); }
.comp-nom { font-weight: 600; }
.comp-etat { font-size: 0.86rem; color: var(--encre-2); }
.comp-date { font-size: 0.8rem; color: var(--encre-3); text-align: right; }
@media (min-width: 700px) { .competences li { grid-template-columns: 1.4fr auto 1fr 90px; } }
.grille-lecture { margin-top: 30px; }
.grille-lecture summary { cursor: pointer; font-weight: 650; color: var(--roi); }
.grille-lecture dl { margin: 12px 0; display: grid; gap: 8px; }
.grille-lecture dl > div { display: grid; gap: 2px; }
.grille-lecture dt { font-weight: 650; }
.grille-lecture dd { color: var(--encre-2); font-size: 0.92rem; }
@media (min-width: 700px) { .grille-lecture dl > div { grid-template-columns: 240px 1fr; } }

/* ---------- Badges ---------- */
.medailles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 26px 16px; margin-top: 26px; }
@media (min-width: 620px) { .medailles { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 900px) { .medailles { grid-template-columns: repeat(4, 1fr); } }
.medailles li { display: grid; justify-items: center; text-align: center; gap: 4px; align-content: start; }
.medaille { width: 92px; height: 92px; margin-bottom: 6px; }
.medaille-nom { font: 600 1.18rem/1.15 var(--titre); color: var(--nuit); }
.medaille-date { font-size: 0.8rem; font-weight: 600; color: var(--or-fonce); }
.medaille-preuve { font-size: 0.82rem; color: var(--encre-3); line-height: 1.4; max-width: 24ch; }
.medailles .a-venir .medaille-nom { color: var(--encre-2); }
.medailles.compact { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 18px 10px; margin-top: 14px; }
.medailles.compact .medaille { width: 68px; height: 68px; }
.medailles.compact .medaille-nom { font-size: 1.02rem; }
.medaille.obtenue .m-fond { fill: var(--nuit); }
.medaille.obtenue .m-filet { fill: none; stroke: var(--or); stroke-width: 3; }
.medaille.obtenue .m-filet.fin { stroke-width: 1; }
.medaille.obtenue .m-motif { fill: var(--or); stroke: none; }
.medaille.obtenue .m-motif .trait { fill: none; stroke: var(--or); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.medaille.a-venir .m-fond { fill: var(--blanc); }
.medaille.a-venir .m-filet { fill: none; stroke: var(--trait-fort); stroke-width: 2; stroke-dasharray: 3 5; }
.medaille.a-venir .m-filet.fin { stroke-dasharray: none; stroke-width: 1; stroke: var(--trait); }
.medaille.a-venir .m-motif { fill: var(--trait-fort); }
.medaille.a-venir .m-motif .trait { fill: none; stroke: var(--trait-fort); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Le passeport ---------- */
.passeport { display: grid; gap: 20px; }
@media (min-width: 860px) { .passeport { grid-template-columns: 5fr 7fr; } .pp-visas, .pp-distinctions { grid-column: 1 / -1; } }
.pp-couverture { background: var(--nuit); color: var(--blanc); border-radius: var(--rayon-page); min-height: 300px; padding: 30px 24px 32px; display: grid; justify-items: center; align-content: center; gap: 6px; text-align: center; box-shadow: 0 14px 34px -18px rgba(0, 49, 92, 0.7); position: relative; }
.pp-couverture::after { content: ""; position: absolute; inset: 10px; border: 1px solid rgba(241, 211, 82, 0.55); border-radius: 8px; pointer-events: none; }
.couv-logo { width: 190px; height: 190px; display: block; margin-bottom: 10px; }
.couv-titre { font: 600 1.06rem/1.2 var(--titre); letter-spacing: 0.3em; text-transform: uppercase; color: #f1d352; margin-right: -0.3em; }
.couv-devise { font: italic 600 1.08rem var(--titre); color: var(--blanc); margin-top: 10px; }
.pp-page { background: #fbfdff url("guilloche.svg") center / 420px auto; border-radius: var(--rayon-page); box-shadow: 0 14px 34px -22px rgba(10, 26, 79, 0.5), 0 0 0 1px var(--trait); padding: 22px; position: relative; overflow: hidden; }
.pp-page h2 { font-size: 1.45rem; }
.pp-bandeau { display: flex; justify-content: space-between; gap: 12px; font: 700 0.92rem var(--titre); letter-spacing: 0.14em; text-transform: uppercase; color: var(--roi-fonce); border-bottom: 1px solid var(--roi); padding-bottom: 8px; margin-bottom: 18px; }
.pp-corps { display: grid; grid-template-columns: 92px 1fr; gap: 18px; align-items: start; }
.pp-portrait { aspect-ratio: 7 / 9; border: 1px solid var(--roi); border-radius: 6px; background: linear-gradient(160deg, #dfeaf4, #f8fbfe); display: grid; place-items: center; }
.pp-portrait span { font: 700 2.1rem var(--titre); color: var(--roi-fonce); letter-spacing: 0.04em; }
.pp-champs { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; }
.pp-champs .large { grid-column: 1 / -1; }
.pp-champs dt { font-size: 0.7rem; font-weight: 600; color: var(--encre-3); letter-spacing: 0.03em; }
.pp-champs dd { font-weight: 650; line-height: 1.25; word-break: break-word; }
.pp-note { font-weight: 400; font-size: 0.8rem; color: var(--encre-3); }
.pp-note.bloc { display: block; }
.pp-champs dd.mono { white-space: nowrap; font-size: 0.92rem; }
@media (max-width: 479px) { .pp-bandeau { font-size: 0.74rem; letter-spacing: 0.08em; } .pp-corps { grid-template-columns: 70px 1fr; gap: 14px; } .pp-portrait span { font-size: 1.6rem; } .pp-page { padding: 18px; } .pp-mrz { margin: 18px -18px -18px; padding: 10px 18px; font-size: 0.64rem; letter-spacing: 0.06em; } }
.reperes-atteints { display: grid; grid-template-columns: auto 1fr; gap: 10px; background: var(--ok-pale); color: #0d4a30; border-radius: var(--rayon); padding: 12px 14px; font-weight: 600; font-size: 0.94rem; margin-bottom: 12px; }
.pp-mrz { font: 500 0.7rem/1.6 var(--mono); letter-spacing: 0.1em; color: var(--encre-2); margin: 20px -22px -22px; padding: 12px 22px; background: rgba(255, 255, 255, 0.72); border-top: 1px solid var(--trait); white-space: nowrap; overflow: hidden; }
@media (min-width: 480px) { .pp-mrz { font-size: 0.82rem; letter-spacing: 0.14em; } }
.pp-legende { font-size: 0.9rem; color: var(--encre-2); }
.tampons { display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 14px 10px; margin-top: 18px; max-width: 880px; }
.tampons li { max-width: 108px; }
.tampon { width: 100%; height: auto; display: block; opacity: 0.88; }
.tampon .t-filet { fill: none; stroke: currentColor; stroke-width: 2.4; }
.tampon .t-filet.fin { stroke-width: 0.9; }
.tampon .t-texte { font: 700 9.5px var(--texte); letter-spacing: 0.16em; fill: currentColor; }
.tampon .t-texte.petit { font-size: 6.6px; letter-spacing: 0.1em; }
.tampon .t-jour { font: 700 24px var(--titre); fill: currentColor; }
.tampon .t-mois { font: 700 7.5px var(--texte); letter-spacing: 0.1em; fill: currentColor; }
.tampon-0 { color: #00447d; }
.tampon-1 { color: #a3352b; }
.tampon-2 { color: #17665a; }
.rot-0 { transform: rotate(-7deg); }
.rot-1 { transform: rotate(4deg); }
.rot-2 { transform: rotate(-2deg); }
.rot-3 { transform: rotate(8deg); }
.rot-4 { transform: rotate(-11deg); }

/* ---------- Ateliers, brief, revue ---------- */
.ateliers { display: grid; gap: 14px; }
.atelier { display: grid; grid-template-columns: 62px 1fr; gap: 16px; background: var(--blanc); border-radius: var(--rayon-page); box-shadow: 0 0 0 1px var(--trait); padding: 18px; }
.atelier-jour { background: var(--nuit); color: #f1d352; border-radius: var(--rayon); display: grid; place-items: center; align-content: center; height: 66px; font-size: 0.76rem; font-weight: 650; line-height: 1.1; }
.atelier-jour span { font: 700 1.7rem/1 var(--titre); color: var(--blanc); }
.atelier-corps .actions { margin-top: 12px; }
.brief { border-top: 1px solid var(--trait); }
.brief > li { padding: 16px 2px; border-bottom: 1px solid var(--trait); display: grid; gap: 10px; }
.brief-qui { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; }
.brief-nom { font: 600 1.3rem/1.2 var(--titre); color: var(--nuit); text-decoration: none; }
.brief-infos { display: grid; gap: 6px; font-size: 0.93rem; }
.brief-infos > div { display: grid; grid-template-columns: 112px 1fr; gap: 10px; }
.brief-infos dt { color: var(--encre-3); font-size: 0.84rem; padding-top: 1px; }
.brief-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.proposition { background: var(--blanc); border-radius: var(--rayon-page); box-shadow: 0 0 0 1px var(--trait); padding: 20px 22px; display: grid; gap: 12px; margin-top: 14px; }
.proposition h3 { font: 600 1.35rem/1.2 var(--titre); margin-bottom: 4px; }
.proposition h3 a { color: var(--nuit); text-decoration: none; }
.proposition-objet { margin-bottom: 8px; }
.proposition-badge .medaille { width: 64px; height: 64px; margin: 0; }
.proposition .actions { margin-top: 4px; }
@media (min-width: 760px) { .proposition:has(.proposition-badge) { grid-template-columns: 64px 1fr; } .proposition:has(.proposition-badge) .actions { grid-column: 2; } }
.suivi { margin-top: 30px; padding-top: 22px; border-top: 1px solid var(--trait); }
.suivi header { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; }
.suivi h2 { margin-bottom: 0; font-size: 1.5rem; }
.suivi h2 a { color: var(--nuit); text-decoration: none; }

/* ---------- Tableaux ---------- */
.table-cadre { overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; font-size: 0.93rem; }
.table th, .table td { text-align: left; padding: 11px 12px 11px 2px; border-bottom: 1px solid var(--trait); vertical-align: top; }
.table thead th { font-size: 0.8rem; font-weight: 650; color: var(--encre-3); border-bottom: 2px solid var(--nuit); white-space: nowrap; }
.table tbody th { font-weight: 650; }
.table tbody th a { text-decoration: none; }
.table .num { text-align: right; }
.table .tronque { max-width: 260px; color: var(--encre-2); font-size: 0.88rem; }
.table .pastille { margin-left: 4px; }
@media (max-width: 759px) {
  .table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .table tbody tr { display: block; padding: 12px 0; border-bottom: 1px solid var(--trait); }
  .table tbody th, .table tbody td { display: flex; justify-content: space-between; gap: 14px; border: 0; padding: 3px 2px; text-align: right; max-width: none !important; }
  .table tbody th { display: block; text-align: left; font-size: 1.02rem; padding-bottom: 6px; }
  .table tbody td::before { content: attr(data-label); color: var(--encre-3); font-size: 0.84rem; text-align: left; flex: none; }
}

/* ---------- Bilan (document) ---------- */
.bilan-doc { background: var(--blanc); border-radius: var(--rayon-page); box-shadow: 0 0 0 1px var(--trait); padding: 28px 22px; max-width: 760px; }
@media (min-width: 760px) { .bilan-doc { padding: 46px 54px; } }
.bilan-sur { font: 700 0.86rem var(--titre); letter-spacing: 0.16em; text-transform: uppercase; color: var(--or-fonce); margin-bottom: 8px; }
.bilan-doc header { border-bottom: 2px solid var(--nuit); padding-bottom: 18px; }
.bilan-mot { font: italic 600 1.5rem/1.25 var(--titre); color: var(--roi); margin: 26px 0 6px; padding-left: 18px; border-left: 3px solid var(--or); }
.bilan-doc section { margin-top: 26px; }
.bilan-doc section h2 { font-size: 1.4rem; margin-bottom: 8px; }
.bilan-doc section p { max-width: 64ch; }
.bilan-cap { background: var(--or-pale); border-radius: var(--rayon); padding: 16px 18px; }
.bilan-doc footer { margin-top: 30px; padding-top: 14px; border-top: 1px solid var(--trait); font-size: 0.84rem; color: var(--encre-3); }

/* ---------- Notice ---------- */
.notice h2 { font-size: 1.4rem; margin: 26px 0 8px; }
.notice p, .notice li { max-width: 66ch; }
.notice ul { list-style: disc; padding-left: 20px; display: grid; gap: 6px; margin-top: 8px; }

/* ---------- Écrans de connexion ---------- */
.page-auth { background: var(--nuit); min-height: 100vh; }
.auth-scene { min-height: 100vh; display: grid; grid-template-rows: auto 1fr; }
.auth-couverture { color: var(--blanc); text-align: center; padding: 22px 20px 20px; display: grid; justify-items: center; gap: 2px; }
.auth-couverture .couv-logo { width: 104px; height: 104px; margin-bottom: 6px; }
.auth-couverture .couv-titre { font-size: 0.86rem; }
.auth-couverture .couv-devise { display: none; }
.auth-carte { background: var(--papier); border-radius: 22px 22px 0 0; padding: 30px 22px 44px; }
.auth-carte > * { max-width: 460px; margin-left: auto; margin-right: auto; }
.auth-carte .formulaire { margin-top: 24px; }
.auth-carte h1 { font-size: 2.2rem; }
.auth-liens { margin-top: 20px; text-align: center; font-weight: 600; }
.auth-note { margin-top: 14px; text-align: center; font-size: 0.88rem; color: var(--encre-3); }
.auth-pied { margin-top: 30px; padding-top: 16px; border-top: 1px solid var(--trait); display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 0.86rem; }
.h-section { font-size: 1.35rem; margin: 26px auto 10px; }
body.page-auth > .auth-carte { min-height: 100vh; border-radius: 0; }
@media (min-width: 900px) {
  .auth-scene { grid-template-rows: none; grid-template-columns: minmax(340px, 5fr) 7fr; }
  .auth-couverture { align-content: center; padding: 40px; position: sticky; top: 0; height: 100vh; }
  .auth-couverture .couv-logo { width: 300px; height: 300px; margin-bottom: 18px; }
  .auth-couverture .couv-titre { font-size: 1.2rem; }
  .auth-couverture .couv-devise { display: block; font-size: 1.3rem; }
  .auth-carte { border-radius: 0; padding: 64px 48px; display: flex; flex-direction: column; justify-content: center; }
  .auth-carte > * { width: 100%; }
  .auth-carte h1 { font-size: 2.9rem; }
}
.contenu-nu { max-width: 760px; margin: 0 auto; padding: 30px 20px; }

/* ---------- Impression ---------- */
@media print {
  @page { margin: 14mm; }
  body, .page-app { background: #fff; padding: 0; }
  .entete, .lateral, .barre-bas, .non-imprime, .message, .evitement, .fil { display: none !important; }
  .contenu { max-width: none; padding: 0; }
  .passeport, .bilan-doc, .prise, .figure { box-shadow: none; break-inside: avoid; }
  .pp-couverture, .pp-page, .pastille, .atelier-jour, .medaille, .tampon, .cap-point { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .brief > li { break-inside: avoid; }
  a { color: inherit; text-decoration: none; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; scroll-behavior: auto !important; } }

/* ---------- Version 2 : parcours déclaratif ---------- */
.pastille.niveau-0 { background: #e9ecf4; color: var(--encre-2); }
progress.barre { -webkit-appearance: none; appearance: none; width: 100%; max-width: 560px; height: 12px; border: 0; border-radius: 999px; background: var(--trait); overflow: hidden; display: block; margin: 12px 0 8px; }
progress.barre::-webkit-progress-bar { background: var(--trait); border-radius: 999px; }
progress.barre::-webkit-progress-value { background: linear-gradient(90deg, var(--roi), #2a6aa3); border-radius: 999px; }
progress.barre::-moz-progress-bar { background: var(--roi); border-radius: 999px; }
.progression-texte { font-size: 1.02rem; color: var(--encre-2); margin-bottom: 18px; }
.declarer-carte { background: var(--blanc); border-radius: var(--rayon-page); padding: 22px; box-shadow: inset 4px 0 0 var(--or), 0 0 0 1px var(--trait); margin-top: 26px; }
.declarer-carte h2 { font: 650 0.86rem/1.3 var(--texte); color: var(--or-fonce); margin-bottom: 6px; }
.declarer-atelier { font: 600 1.55rem/1.2 var(--titre); color: var(--nuit); }
.declarer-carte .btn-large { width: auto; }
@media (max-width: 559px) { .declarer-carte .btn-large { width: 100%; } }
.encart-club { margin-top: 26px; }
.encart-club .chiffres { margin-bottom: 0; }
.score-implication { font: 700 3rem/1 var(--titre); color: var(--nuit); margin-bottom: 8px; }
.score-implication span { font: 500 1rem var(--texte); color: var(--encre-3); }
.etapes-parcours { display: grid; gap: 14px; }
.etape { display: grid; grid-template-columns: 76px 1fr; gap: 16px; align-items: start; background: var(--blanc); border-radius: var(--rayon-page); box-shadow: 0 0 0 1px var(--trait); padding: 16px 18px; }
.etape .medaille { width: 76px; height: 76px; margin: 0; }
.etape.en-cours { box-shadow: inset 4px 0 0 var(--or), 0 0 0 1px var(--trait); }
.etape.a-venir { background: transparent; }
.etape-corps { min-width: 0; }
.etape-nom { font: 600 1.45rem/1.15 var(--titre); color: var(--nuit); }
.etape-question { font: italic 600 1.05rem/1.3 var(--titre); color: var(--roi); margin-top: 2px; }
.etape-seuil { font-size: 0.92rem; color: var(--encre-2); margin-top: 6px; }
.etape-etat { margin-top: 8px; }
.etape progress.barre { margin-top: 10px; }
.revues { display: grid; gap: 12px; }
.revues li { background: var(--blanc); border-radius: var(--rayon-page); box-shadow: 0 0 0 1px var(--trait); padding: 16px 18px; }
.revue-periode { font-size: 0.84rem; font-weight: 650; color: var(--or-fonce); margin-bottom: 4px; }
.revue-ligne { margin-top: 10px; max-width: 68ch; }
.table tr.invalide th, .table tr.invalide td { opacity: 0.55; }
.ligne-action { display: inline; margin-left: 8px; }
.feuille { border-top: 1px solid var(--trait); }
.feuille > li { display: grid; gap: 8px; padding: 12px 2px; border-bottom: 1px solid var(--trait); }
.feuille > li.present { background: rgba(0, 68, 125, 0.035); }
@media (min-width: 760px) { .feuille > li { grid-template-columns: 1fr auto; align-items: center; } }
.feuille-nom { display: flex; align-items: center; gap: 10px; font-weight: 600; cursor: pointer; flex-wrap: wrap; }
.feuille-nom input { width: 22px; height: 22px; accent-color: var(--roi); margin: 0; }
.feuille-champs { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding-left: 32px; }
@media (min-width: 760px) { .feuille-champs { padding-left: 0; } }
.mini-case { display: inline-flex; align-items: center; gap: 6px; font-size: 0.88rem; cursor: pointer; border: 1px solid var(--trait-fort); border-radius: 999px; padding: 4px 12px; background: var(--blanc); }
.mini-case input { accent-color: var(--roi); width: 18px; height: 18px; margin: 0; }
.mini-select select { min-height: 36px; padding: 5px 34px 5px 12px; font-size: 0.88rem; border-radius: 999px; width: auto; background-position: right 10px center; }
.pp-certifie { display: grid; grid-template-columns: 54px 1fr; gap: 12px; align-items: center; margin-top: 18px; padding: 10px 12px; background: var(--or-pale); border-radius: var(--rayon); font-size: 0.92rem; }
.pp-certifie .medaille { width: 54px; height: 54px; margin: 0; }
.certificat { background: var(--blanc); border-radius: var(--rayon-page); box-shadow: 0 0 0 1px var(--trait), inset 0 0 0 8px var(--blanc), inset 0 0 0 9px var(--or); padding: 40px 26px; max-width: 760px; margin: 0 auto; text-align: center; display: grid; justify-items: center; gap: 10px; }
.certificat .couv-logo { width: 120px; height: 120px; margin: 0 0 6px; }
.certificat-sur { font: 600 0.95rem var(--texte); color: var(--encre-2); }
.certificat h1 { font-size: 2.4rem; }
.certificat-titre { font: italic 600 1.5rem var(--titre); color: var(--roi); }
.certificat-texte { max-width: 56ch; color: var(--encre-2); }
.certificat-numero { font-weight: 650; margin-top: 6px; }
.vitrine .chiffres { margin-top: 22px; }
.vitrine h2 { margin-top: 34px; }
.vitrine > p { max-width: 66ch; }
.page-auth .auth-carte .vitrine h1, .page-auth .auth-carte .certificat h1 { font-size: 2.2rem; }
.page-auth .auth-carte > .certificat { max-width: 640px; }
.declaration .segments span { white-space: nowrap; }

/* ---------- Version 3 : programme, retours, invités, saisons ---------- */
.m-trou { fill: var(--nuit); }
.medaille.a-venir .m-trou { fill: var(--blanc); }
.carte-soir { background: var(--nuit); color: var(--blanc); border-radius: var(--rayon-page); padding: 20px 22px; margin-top: 26px; display: grid; gap: 8px; }
.carte-soir h2 { color: #f1d352; font: 600 1.45rem/1.2 var(--titre); margin: 0; }
.carte-soir .aide { color: #c8d6e5; }
.carte-soir .pastille { background: rgba(255, 255, 255, 0.14); color: var(--blanc); }
.carte-soir .pastille.ok { background: #d6efe2; color: var(--ok); }
.carte-soir .btn { background: var(--blanc); color: var(--nuit); border-color: var(--blanc); }
.carte-soir .btn-primaire { background: #f1d352; border-color: #f1d352; color: var(--nuit); }
.carte-soir .actions { margin-top: 4px; }
.carte-discours { background: var(--blanc); border-radius: var(--rayon-page); box-shadow: 0 0 0 1px var(--trait); padding: 20px 22px; display: grid; gap: 10px; }
.carte-discours h2 { margin: 0; }
.carte-discours > p { max-width: 66ch; }
.sommaire { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 18px; font-size: 0.9rem; font-weight: 600; }
.onglets.discret { margin-top: 0; }
.onglets.discret a { padding: 5px 12px; font-size: 0.82rem; }
.envoi { display: inline-flex; flex-wrap: wrap; gap: 8px; }

/* Projets de discours */
.projets { display: grid; gap: 10px; counter-reset: projet; }
.projet { display: grid; grid-template-columns: 38px 1fr; gap: 12px; align-items: start; background: var(--blanc); border-radius: var(--rayon); box-shadow: 0 0 0 1px var(--trait); padding: 12px 14px; }
.projet-num { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font: 700 1.05rem var(--titre); color: var(--roi); border: 1.5px dashed var(--trait-fort); }
.projet.fait .projet-num { background: var(--nuit); color: #f1d352; border: 0; }
.projet.fait .projet-num .ic { width: 18px; height: 18px; stroke-width: 2.4; }
.projet-nom { font: 600 1.15rem/1.2 var(--titre); color: var(--nuit); }
.projet-etat { margin-top: 6px; }
.projets.compact .projet { padding: 10px 12px; }

/* Retours d'évaluation */
.retours { display: grid; gap: 12px; margin-top: 14px; }
.retour { background: var(--blanc); border-radius: var(--rayon-page); box-shadow: 0 0 0 1px var(--trait); padding: 16px 18px; display: grid; gap: 8px; }
.retour-tete { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; }
.retour-tete strong { font: 600 1.2rem var(--titre); color: var(--nuit); }
.retour-criteres { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 14px; }
@media (min-width: 760px) { .retour-criteres { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.retour-criteres div { display: grid; gap: 2px; }
.retour-criteres dt { font-size: 0.78rem; color: var(--encre-3); }
.degre { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 0.78rem; font-weight: 650; background: #e9ecf4; color: var(--encre-2); white-space: nowrap; }
.degre.d1 { background: #fde9df; color: #8a3b0a; }
.degre.d2 { background: #fff3c9; color: var(--jaune); }
.degre.d3 { background: #dce8f3; color: var(--roi-fonce); }
.degre.d4 { background: var(--nuit); color: #f1d352; }
.progres { display: inline-flex; align-items: center; gap: 2px; font-size: 0.78rem; font-weight: 650; color: var(--ok); }
.progres .ic { width: 14px; height: 14px; transform: rotate(-90deg); stroke-width: 2.4; }
.segments.degres span { min-width: 104px; justify-content: center; }
.table.compacte th, .table.compacte td { padding-top: 8px; padding-bottom: 8px; }
.graph-courbe { max-width: 560px; }
.figure figcaption { font-size: 0.84rem; color: var(--encre-3); margin-top: 6px; }

/* Programme de séance */
.programme { display: grid; gap: 26px; margin-top: 24px; }
@media (min-width: 900px) { .programme { grid-template-columns: 1.2fr 1fr; align-items: start; } }
.programme-liste { display: grid; gap: 10px; counter-reset: disc; }
.programme-liste li { background: var(--blanc); border-radius: var(--rayon); box-shadow: 0 0 0 1px var(--trait); padding: 12px 14px 12px 50px; position: relative; display: grid; gap: 3px; }
.programme-liste li::before { counter-increment: disc; content: counter(disc); position: absolute; left: 14px; top: 12px; width: 26px; height: 26px; border-radius: 50%; background: var(--nuit); color: #f1d352; font: 700 0.95rem/26px var(--titre); text-align: center; }
.programme-liste li.moi, .programme-roles div.moi { box-shadow: inset 4px 0 0 var(--or), 0 0 0 1px var(--trait); }
.programme-roles { display: grid; gap: 1px; background: var(--trait); border: 1px solid var(--trait); border-radius: var(--rayon); overflow: hidden; }
.programme-roles div { background: var(--blanc); padding: 10px 14px; display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.programme-roles dt { color: var(--encre-2); font-size: 0.9rem; }
.programme-roles dd { font-weight: 650; }
.file-attente { background: var(--or-pale); border-radius: var(--rayon-page); padding: 18px 20px; margin-top: 26px; }
.file-attente h2 { margin-bottom: 4px; }
.file { display: grid; gap: 8px; margin-top: 12px; counter-reset: file; }
.file li { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; background: var(--blanc); border-radius: var(--rayon); padding: 10px 12px; }
.file li > div { display: grid; gap: 2px; min-width: 0; flex: 1 1 260px; }
.file li > div > .aide { display: block; }
.creneau { background: var(--blanc); border-radius: var(--rayon); box-shadow: 0 0 0 1px var(--trait); padding: 14px 16px 6px; margin-bottom: 12px; }
.creneau legend { font: 600 1.1rem var(--titre); color: var(--nuit); padding: 0 4px; }
.feuille > li.prevu { box-shadow: inset 3px 0 0 var(--or); }

/* Code QR de séance */
.page-nue .qr-page { max-width: 620px; margin: 0 auto; padding: 28px 18px 40px; text-align: center; display: grid; justify-items: center; gap: 12px; }
.qr-logo { width: 64px; height: 64px; }
.qr-sur { font-weight: 650; color: var(--encre-2); }
.qr-page h1 { font-size: 2.4rem; }
.qr-cadre { width: min(82vw, 420px); background: var(--blanc); border-radius: 18px; padding: 14px; box-shadow: 0 0 0 1px var(--trait), 0 0 0 10px var(--or-pale); }
.qr { display: block; width: 100%; height: auto; }
.qr-etapes { list-style: decimal; text-align: left; padding-left: 24px; display: grid; gap: 4px; font-size: 1.05rem; max-width: 40ch; }
.qr-secours { color: var(--encre-2); font-size: 0.92rem; }

/* Invités, saisons, jury */
.visiteurs { display: grid; gap: 12px; margin-top: 16px; }
.visiteur { background: var(--blanc); border-radius: var(--rayon-page); box-shadow: 0 0 0 1px var(--trait); padding: 14px 16px; display: grid; gap: 6px; }
.visiteur-tete { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.visiteur-tete strong { font: 600 1.2rem var(--titre); color: var(--nuit); }
.visiteur .repli { margin-top: 2px; }
.palmares { display: grid; gap: 12px; margin-top: 10px; }
.palmares li { display: grid; grid-template-columns: 56px 1fr; gap: 12px; align-items: center; }
.palmares .medaille { width: 56px; height: 56px; margin: 0; }
.encadre-jury { background: var(--roi-pale); border-radius: var(--rayon-page); padding: 16px 18px; margin-top: 14px; display: grid; gap: 8px; }
.encadre-jury h3 { margin: 0; }
.tampons li.avec-discours .t-filet { stroke: var(--or); }
.actions-liste .pastille { margin-left: 6px; }

@media print {
  .page-nue .qr-page { padding-top: 0; }
  .qr-cadre { box-shadow: none; width: 120mm; }
  .programme-liste li, .programme-roles, .retour, .creneau { break-inside: avoid; }
}
.liste-liens a > span:first-child > .pastille, .liste-liens a > span:first-child > strong + .pastille { justify-self: start; }

/* Version 3.1 : téléchargements */
.medailles-partage { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; margin-top: 14px; }
.medailles-partage li { background: var(--blanc); border-radius: var(--rayon-page); box-shadow: 0 0 0 1px var(--trait); padding: 14px 10px; display: grid; justify-items: center; gap: 4px; text-align: center; }
.medailles-partage .medaille { width: 76px; height: 76px; margin-bottom: 2px; }
.medailles-partage .btn { margin-top: 6px; }
.partage-badges { margin-top: 38px; }

/* ---------- v3.2 : signature numérisée ---------- */
.js-seul { display: none !important; }
.js div.js-seul { display: block !important; }
.js span.js-seul { display: inline !important; }
.js .sans-js { display: none !important; }
.signature-pad canvas { display: block; width: 100%; max-width: 540px; aspect-ratio: 3 / 1; background: #fff; border: 1px dashed var(--trait, #c9d3df); border-radius: 10px; touch-action: none; cursor: crosshair; }
.signature-pad .etiquette { font-weight: 600; margin: 0 0 .4rem; }
.signature-pad .actions { margin-top: .4rem; }
.signature-apercu { margin: 0 0 1rem; padding: 1rem 1.25rem; background: #fff; border: 1px solid var(--trait, #d9e1ea); border-radius: 10px; max-width: 540px; }
.signature-apercu img { display: block; max-width: 100%; max-height: 110px; }
.signature-apercu figcaption { margin-top: .5rem; font-size: .85rem; color: var(--encre-3); }

/* ---------- Version 4 : parcours simplifié, coachs, distinctions ---------- */

.manifeste { background: var(--nuit); color: var(--blanc); border-radius: var(--rayon-page); padding: 22px 22px 18px; margin-top: 26px; box-shadow: 0 14px 34px -22px rgba(0, 49, 92, 0.7); position: relative; }
.manifeste::after { content: ""; position: absolute; inset: 8px; border: 1px solid rgba(241, 211, 82, 0.45); border-radius: 9px; pointer-events: none; }
.manifeste summary { cursor: pointer; list-style: none; position: relative; z-index: 1; }
.manifeste summary::-webkit-details-marker { display: none; }
.manifeste summary h2 { display: inline; color: var(--blanc); font-size: 1.7rem; }
.manifeste summary::after { content: "Lire"; float: right; font: 650 0.8rem var(--texte); color: #f1d352; letter-spacing: 0.08em; text-transform: uppercase; margin-top: 10px; }
.manifeste details[open] summary::after { content: "Replier"; }
.manifeste p, .manifeste ul { position: relative; z-index: 1; max-width: 68ch; margin-top: 12px; color: #e8eef5; }
.manifeste-etapes { list-style: none; padding: 0; display: grid; gap: 6px; }
.manifeste-etapes strong { color: #f1d352; letter-spacing: 0.06em; }
.manifeste-appel { font: italic 600 1.35rem/1.3 var(--titre); color: #f1d352 !important; }

.prochaine-action { background: var(--blanc); border-radius: var(--rayon-page); box-shadow: inset 4px 0 0 var(--or), 0 0 0 1px var(--trait); padding: 16px 18px; margin-top: 22px; }
.prochaine-action h2 { margin-bottom: 8px; }
.prochaine-action .progression-texte { margin-top: 8px; font-weight: 600; }

.etape-num { font: 700 0.72rem var(--texte); letter-spacing: 0.14em; text-transform: uppercase; color: var(--or-fonce); }
.criteres { list-style: none; padding: 0; margin-top: 10px; display: grid; gap: 4px; }
.criteres li { display: flex; align-items: center; gap: 8px; font-size: 0.94rem; color: var(--encre-2); }
.criteres li .ic { width: 18px; height: 18px; flex: 0 0 18px; color: var(--trait-fort); }
.criteres li.fait { color: var(--encre); }
.criteres li.fait .ic { color: var(--ok); }
.critere-compte { font: 650 0.84rem var(--mono); color: var(--roi); margin-left: 4px; }

.distinctions .multiple { font: 650 0.82rem var(--texte); color: var(--or-fonce); }
.distinctions li .btn { margin-top: 4px; }

.recommandations { list-style: none; padding: 0; display: grid; gap: 10px; margin-top: 14px; }
.recommandations li { background: var(--blanc); border-radius: var(--rayon); box-shadow: 0 0 0 1px var(--trait); padding: 12px 14px; }
.recommandations li > p:first-child { max-width: 70ch; }

.equipe { list-style: none; padding: 0; display: grid; gap: 10px; margin-top: 10px; }
.equipe-membre a { display: grid; grid-template-columns: 44px 1fr 20px; gap: 14px; align-items: center; background: var(--blanc); border-radius: var(--rayon-page); box-shadow: 0 0 0 1px var(--trait); padding: 14px 16px; text-decoration: none; color: inherit; }
.equipe-membre a:hover { box-shadow: 0 0 0 2px var(--or); }
.equipe-corps { display: grid; gap: 4px; min-width: 0; }
.equipe-etape { display: flex; gap: 6px; flex-wrap: wrap; }
.equipe-libre { display: grid; grid-template-columns: 44px 1fr; gap: 14px; align-items: center; border: 1px dashed var(--trait-fort); border-radius: var(--rayon-page); padding: 12px 16px; }
.avatar.vide { background: transparent; color: var(--encre-3); box-shadow: inset 0 0 0 1px var(--trait-fort); }

.repartition { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin-top: 4px; }
.repartition li { background: var(--blanc); border-radius: var(--rayon); box-shadow: 0 0 0 1px var(--trait); padding: 10px 8px; text-align: center; display: grid; gap: 2px; font-size: 0.8rem; color: var(--encre-2); }
.repartition-n { font: 700 1.6rem/1 var(--titre); color: var(--nuit); }

.coachs { list-style: none; padding: 0; display: grid; gap: 16px; margin-top: 18px; }
@media (min-width: 900px) { .coachs { grid-template-columns: 1fr 1fr; } }
.coach-carte { background: var(--blanc); border-radius: var(--rayon-page); box-shadow: 0 0 0 1px var(--trait); padding: 16px 18px; display: grid; gap: 8px; align-content: start; }
.coach-carte.libre { background: transparent; box-shadow: 0 0 0 1px var(--trait), inset 0 0 0 1px transparent; border: 1px dashed var(--trait-fort); }
.coach-carte header h2 { font-size: 1.4rem; margin: 2px 0 0; }
.coach-rang { font: 700 0.72rem var(--texte); letter-spacing: 0.14em; text-transform: uppercase; color: var(--or-fonce); }
.coach-sous { font-weight: 650; font-size: 0.9rem; color: var(--encre-2); }
.coach-membres { list-style: decimal; padding-left: 22px; display: grid; gap: 4px; }
.coach-membres li { padding: 4px 0; border-bottom: 1px solid var(--trait); }
.coach-membres li::marker { color: var(--roi); font-weight: 700; }
.coach-membres form { display: inline; margin-left: 6px; }
.place-libre { color: var(--encre-3); }

.suggestions { background: var(--or-pale); border-radius: var(--rayon); padding: 12px 14px; margin: 12px 0; }
.suggestions .liste-simple { border-top: 0; margin-top: 4px; }
.jury-dossier { background: var(--blanc); border-radius: var(--rayon-page); box-shadow: 0 0 0 1px var(--trait); padding: 16px 18px; margin-top: 14px; }
.certificat-devise { font: italic 600 1.15rem var(--titre); color: var(--or-fonce); }
.pp-etapes { grid-column: 1 / -1; }
.liste-simple li .medaille { width: 34px; height: 34px; vertical-align: middle; margin-right: 8px; }
.medailles-partage .actions { display: flex; gap: 8px; align-items: center; justify-content: center; flex-wrap: wrap; }
@media print {
  .manifeste, .prochaine-action { display: none; }
  .pp-etapes { break-inside: avoid; }
}

/* ---------- Vitrine des badges ---------- */
.vitrine-tete { position: relative; overflow: hidden; background: var(--nuit); color: var(--blanc); border-radius: var(--rayon-page); padding: 34px 30px 30px; margin-bottom: 34px; }
.vitrine-tete::after { content: ""; position: absolute; right: -90px; top: -90px; width: 300px; height: 300px; border-radius: 50%; border: 1px solid rgba(241, 211, 82, .35); box-shadow: 0 0 0 26px rgba(241, 211, 82, .06), 0 0 0 60px rgba(241, 211, 82, .04); pointer-events: none; }
.vitrine-sur { font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: #f1d352; font-weight: 650; }
.vitrine-tete h1 { color: var(--blanc); font-size: clamp(2.1rem, 5vw, 3rem); margin: 6px 0 4px; }
.vitrine-devise { font: italic 600 1.3rem/1.3 var(--titre); color: #f1d352; }
.vitrine-intro { max-width: 62ch; margin-top: 14px; color: rgba(255, 255, 255, .88); }
.vitrine-intro strong { color: var(--blanc); }
.vitrine-score { position: relative; z-index: 1; display: grid; grid-template-columns: auto 1fr; gap: 4px 16px; align-items: center; margin-top: 22px; padding: 14px 18px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .16); border-radius: var(--rayon); max-width: 520px; }
.vitrine-score-chiffre { grid-row: span 2; font: 700 2.6rem/1 var(--titre); color: #f1d352; }
.vitrine-score-chiffre small { font-size: 1.2rem; color: rgba(255, 255, 255, .7); }
.vitrine-score-texte { font-size: .92rem; }
.vitrine-points { display: flex; gap: 6px; }
.vitrine-points i { width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid rgba(241, 211, 82, .7); }
.vitrine-points i.plein { background: #f1d352; border-color: #f1d352; }

.vitrine-section { margin-bottom: 40px; }
.vitrine-section-tete { display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: start; margin-bottom: 18px; }
.vitrine-numero { font: 700 1.1rem/1 var(--titre); color: var(--or-fonce); width: 42px; height: 42px; border-radius: 50%; border: 1.5px solid var(--or); display: grid; place-items: center; background: var(--or-pale); }
.vitrine-section-tete .aide { max-width: 64ch; margin-top: 4px; }

.vitrine-chemin { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; position: relative; counter-reset: etape; }
.vitrine-chemin::before { content: ""; position: absolute; left: 12%; right: 12%; top: 62px; border-top: 2px dashed var(--trait-fort); z-index: 0; }
.vitrine-etape { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; text-align: center; background: var(--blanc); border: 1px solid var(--trait); border-radius: var(--rayon-page); padding: 18px 16px 16px; transition: transform .18s ease, box-shadow .18s ease; }
.vitrine-etape:hover { transform: translateY(-3px); box-shadow: 0 12px 28px -16px rgba(0, 49, 92, .45); }
.vitrine-etape.obtenue { border-color: var(--or); box-shadow: inset 0 0 0 1px var(--or); }
.vitrine-etape.en-cours { border-color: var(--roi); box-shadow: inset 0 0 0 1px var(--roi); }
.vitrine-etape.a-venir .vitrine-medaille { opacity: .55; }
.vitrine-medaille { background: var(--blanc); border-radius: 50%; padding: 4px; }
.vitrine-medaille .medaille { width: 96px; height: 96px; margin: 0; }
.vitrine-rang { margin-top: 8px; font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 650; color: var(--or-fonce); }
.vitrine-etape h3, .vitrine-distinction h3 { font: 700 1.55rem/1.1 var(--titre); color: var(--nuit); margin: 2px 0 6px; }
.vitrine-phrase { font: italic 600 1.08rem/1.35 var(--titre); color: var(--encre-2); }
.vitrine-pour { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--trait); width: 100%; font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 650; color: var(--encre-3); }
.vitrine-conditions { width: 100%; display: grid; gap: 6px; margin-top: 8px; text-align: left; }
.vitrine-conditions li { display: grid; grid-template-columns: 22px 1fr auto; gap: 8px; align-items: center; font-size: .9rem; line-height: 1.3; padding: 7px 9px; border-radius: 8px; background: var(--papier); }
.vitrine-conditions li .ic { width: 18px; height: 18px; color: var(--roi); }
.vitrine-conditions li.fait { background: var(--ok-pale); }
.vitrine-conditions li.fait .ic { color: var(--ok); }
.vitrine-compte { font-weight: 700; font-size: .84rem; color: var(--encre-2); }
.vitrine-conditions li.fait .vitrine-compte { color: var(--ok); }
.vitrine-etat { margin-top: auto; padding-top: 12px; font-size: .84rem; font-weight: 650; }
.vitrine-etat::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 7px; background: var(--trait-fort); vertical-align: 1px; }
.obtenue .vitrine-etat { color: var(--or-fonce); }
.obtenue .vitrine-etat::before { background: var(--or); }
.en-cours .vitrine-etat { color: var(--roi); }
.en-cours .vitrine-etat::before { background: var(--roi); }
.a-venir .vitrine-etat { color: var(--encre-3); }

.vitrine-distinctions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.vitrine-distinction { display: grid; grid-template-columns: auto 1fr; gap: 18px; align-items: start; background: var(--blanc); border: 1px solid var(--trait); border-radius: var(--rayon-page); padding: 18px; transition: transform .18s ease, box-shadow .18s ease; }
.vitrine-distinction:hover { transform: translateY(-3px); box-shadow: 0 12px 28px -16px rgba(0, 49, 92, .45); }
.vitrine-distinction.obtenue { border-color: var(--or); box-shadow: inset 0 0 0 1px var(--or); }
.vitrine-distinction.a-venir .vitrine-medaille { opacity: .55; }
.vitrine-distinction .vitrine-medaille .medaille { width: 84px; height: 84px; }
.vitrine-comment { margin-top: 8px; font-size: .92rem; color: var(--encre-2); }
.vitrine-etiquettes { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.vitrine-rythme, .vitrine-recue { font-size: .78rem; font-weight: 650; padding: 3px 10px; border-radius: 99px; }
.vitrine-rythme { background: var(--roi-pale); color: var(--roi); }
.vitrine-recue { background: var(--papier); color: var(--encre-2); }
.obtenue .vitrine-recue { background: var(--or-pale); color: var(--or-fonce); }

.vitrine-savoir { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.vitrine-savoir li { background: var(--blanc); border-left: 3px solid var(--or); border-radius: 0 var(--rayon) var(--rayon) 0; padding: 14px 16px; display: grid; gap: 4px; }
.vitrine-savoir strong { color: var(--nuit); }
.vitrine-savoir span { font-size: .92rem; color: var(--encre-2); }
.vitrine-appel { text-align: center; font: italic 700 1.7rem/1.2 var(--titre); color: var(--nuit); margin: 10px 0 14px; }
.vitrine-actions { justify-content: center; margin-bottom: 20px; }

@media (max-width: 1360px) {
  .vitrine-chemin { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vitrine-chemin::before { display: none; }
}
@media (max-width: 1100px) {
  .vitrine-savoir { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .vitrine-tete { padding: 26px 20px 22px; }
  .vitrine-chemin, .vitrine-distinctions { grid-template-columns: 1fr; }
  .vitrine-distinction { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .vitrine-etiquettes { justify-content: center; }
}
@media (prefers-reduced-motion: reduce) { .vitrine-etape, .vitrine-distinction { transition: none; } .vitrine-etape:hover, .vitrine-distinction:hover { transform: none; } }
@media print { .vitrine-tete { background: none; color: var(--encre); border: 1px solid var(--trait); } .vitrine-tete h1 { color: var(--nuit); } .vitrine-actions { display: none; } }