@font-face { font-family: Geist; font-weight: 400; font-display: swap; src: url("polices/geist-sans-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: Geist; font-weight: 500; font-display: swap; src: url("polices/geist-sans-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: Geist; font-weight: 600; font-display: swap; src: url("polices/geist-sans-latin-600-normal.woff2") format("woff2"); }

:root {
  --encre: #24342c; --doux: #56635b; --trait: rgba(36, 52, 44, .12); --voile: rgba(36, 52, 44, .06);
  --vert: #8aa997; --vert-f: #4f6f5d; --brun: #c8aa8c; --brun-f: #8f6f50; --erreur: #9c3b2e;
  --bloc: rgba(255, 255, 255, .62); --sortie: cubic-bezier(.16, 1, .3, 1);
}
* { box-sizing: border-box; }
html { background: linear-gradient(125deg, #dfe8e2 0%, #eef0ea 45%, #f1e8de 75%, #e9dccd 100%) fixed; -webkit-text-size-adjust: 100%; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body { margin: 0; font: 15px/1.5 Geist, system-ui, "Segoe UI", Arial, sans-serif; color: var(--encre); overflow-x: hidden; }
#fond { position: fixed; inset: 0; z-index: -1; width: 100%; height: 100%; }
main { max-width: 1120px; margin: 0 auto; padding: 40px 48px 72px; animation: arrive .5s var(--sortie); }
.rail ~ main { margin-left: max(228px, calc(50vw - 446px)); }
.rail ~ main.etroit, main.etroit { max-width: 680px; }
h1, h2, legend { font-weight: 500; letter-spacing: -.03em; text-wrap: balance; }
h1 { font-size: clamp(30px, 3.4vw, 42px); line-height: 1.08; margin: 0 0 10px; }
h2 { font-size: 19px; line-height: 1.2; margin: 0 0 12px; }
p { margin: 0 0 12px; text-wrap: pretty; }
a { color: var(--vert-f); text-underline-offset: 2px; }
.doux { color: var(--doux); font-size: 13.5px; }
.doux a { color: inherit; }
.erreur { color: var(--erreur); font-weight: 500; }
.centre { text-align: center; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--vert-f); outline-offset: 2px; border-radius: 4px; }
td, .cle strong, .geant, .grand-c, .jauge + span { font-variant-numeric: tabular-nums; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.apparait { animation: arrive .55s var(--sortie) backwards; }
@keyframes arrive { from { opacity: 0; transform: translateY(10px); filter: blur(3px); } }
.logo-seul { display: block; width: 64px; height: 64px; border-radius: 50%; margin: 0 auto 14px; background: #fff; }
.logiciel { display: inline-grid; place-items: center; flex: none; min-width: 1.45em; height: 1.45em; padding: 0 .22em; border-radius: .3em; color: #fff; font-weight: 600; font-size: .9em; letter-spacing: -.02em; }
.avec-logiciel { display: inline-flex; align-items: center; gap: .45em; }
h1 .logiciel { font-size: .62em; }
td.avec-cellule { white-space: nowrap; }

/* Menu */
.rail { position: fixed; z-index: 5; inset: 0 auto 0 0; width: 228px; display: flex; flex-direction: column; gap: 28px; padding: 22px 14px; border-right: 1px solid var(--trait); background: rgba(255, 255, 255, .38); backdrop-filter: blur(14px); }
.marque { display: inline-flex; align-items: baseline; padding: 0 10px; font-size: 19px; font-weight: 600; letter-spacing: -.04em; color: var(--encre); text-decoration: none; }
.marque b { font-weight: inherit; color: var(--vert-f); }
.vitrine .marque b, .pilotage .marque b { color: var(--brun); }
.volet-p .marque b { color: #fff; }
.marque i { width: 7px; height: 7px; margin-left: 3px; border-radius: 50%; background: var(--vert); }
.nav { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.nav a, .nav button { display: flex; align-items: center; justify-content: flex-start; gap: 10px; width: 100%; min-height: 40px; padding: 0 10px; border: 0; border-radius: 8px; background: none; color: var(--doux); font: inherit; font-weight: 500; text-decoration: none; transition: background-color .15s, color .15s; }
.nav a:hover, .nav button:hover { background: var(--voile); color: var(--encre); transform: none; }
.nav a.actif { background: rgba(255, 255, 255, .75); color: var(--vert-f); }
.nav svg { width: 18px; height: 18px; flex: none; }
.nav form { margin-top: auto; }

/* Blocs : un voile clair sur le fond, un seul niveau, jamais de bloc dans un bloc */
.carte { padding: 20px 22px; margin-bottom: 16px; border: 1px solid rgba(255, 255, 255, .75); border-radius: 14px; background: var(--bloc); backdrop-filter: blur(10px); box-shadow: 0 1px 2px rgba(36, 52, 44, .04), 0 10px 28px rgba(36, 52, 44, .05); }
.bento { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; margin-bottom: 16px; }
.bento > * { margin-bottom: 0; }
.c3 { grid-column: span 3; } .c4 { grid-column: span 4; } .c5 { grid-column: span 5; } .c6 { grid-column: span 6; } .c7 { grid-column: span 7; } .c8 { grid-column: span 8; } .c12 { grid-column: 1 / -1; }
.vert { background: rgba(138, 169, 151, .42); }
.sable { background: rgba(200, 170, 140, .36); }
.vert .doux, .sable .doux { color: var(--encre); }
.geant { font-size: clamp(38px, 5vw, 52px); font-weight: 500; letter-spacing: -.04em; line-height: 1.1; }
.geant small { font-size: .38em; letter-spacing: -.01em; color: var(--doux); }
.cles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 0; margin: 24px 0 16px; }
.cle { padding: 18px 22px; border-left: 1px solid var(--trait); }
.cle:first-child { border-left: 0; }
.cle strong { display: block; margin-top: 4px; font-size: 34px; font-weight: 500; letter-spacing: -.03em; line-height: 1.1; }
.cle small { font-size: 15px; font-weight: 400; color: var(--doux); letter-spacing: 0; }
.mini-j { display: block; height: 3px; margin-top: 12px; background: var(--voile); border-radius: 2px; overflow: hidden; }
.mini-j span { display: block; height: 100%; background: var(--vert-f); transform-origin: left; animation: etire 1.1s var(--sortie) backwards .2s; }
@keyframes etire { from { transform: scaleX(0); } }

/* Boutons et champs */
.bouton, button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; padding: 0 16px; font: inherit; font-weight: 500; background: var(--vert-f); color: #fff; border: 1px solid var(--vert-f); border-radius: 8px; text-decoration: none; cursor: pointer; transition: transform .15s var(--sortie), background-color .15s, border-color .15s; }
.bouton:hover, button:hover { background: #456352; }
.bouton:active, button:active { transform: scale(.97); }
.bouton.secondaire, button.secondaire { background: rgba(255, 255, 255, .55); border-color: var(--trait); color: var(--encre); }
.bouton.secondaire:hover, button.secondaire:hover { background: #fff; }
.bouton.grand, button.grand { width: 100%; min-height: 46px; }
.actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.entete { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
.champ { margin-bottom: 18px; }
.champ > label, .champ > .libelle { display: block; font-weight: 500; margin-bottom: 4px; }
input[type=text], input[type=password], input[type=number], input[type=search], input[type=date], select, textarea { width: 100%; font: inherit; color: var(--encre); padding: 9px 12px; border: 1px solid var(--trait); border-radius: 8px; background: rgba(255, 255, 255, .7); transition: border-color .15s, box-shadow .15s, background-color .15s; }
input:focus, select:focus, textarea:focus { background: #fff; outline: none; border-color: var(--vert-f); box-shadow: 0 0 0 3px rgba(79, 111, 93, .18); }
.champ div[id] label { display: flex; gap: 10px; align-items: center; font-weight: 400; padding: 5px 0; }
.champ div[id] input { width: 18px; height: 18px; margin: 0; accent-color: var(--vert-f); }
.ligne-volet { display: grid; grid-template-columns: minmax(0, 1fr) 130px; gap: 10px; align-items: center; padding: 6px 0; }
.ligne-volet label { margin: 0; }
.champ-volet { display: grid; grid-template-columns: minmax(0, 1fr) 110px 110px; gap: 10px; align-items: center; padding: 8px 0; }
.champ-volet label { font-size: 13px; color: var(--doux); }

/* Nuage du groupe */
.bloc-tete { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; }
.bloc-tete h2 { margin: 0; }
.choix-log { display: inline-flex; flex-wrap: wrap; padding: 3px; background: var(--voile); border-radius: 9px; }
.choix-log button { min-height: 34px; padding: 0 14px; border: 0; border-radius: 7px; background: none; color: var(--doux); font-size: 14px; transition: background-color .2s, color .2s, box-shadow .2s; }
.choix-log button:hover { background: rgba(255, 255, 255, .5); }
.choix-log button.actif { background: #fff; color: var(--encre); box-shadow: 0 1px 2px rgba(36, 52, 44, .12); }
.zone-nuage { position: relative; }
.zone-nuage svg { display: block; width: 100%; height: auto; overflow: visible; }
.bande { fill-opacity: .18; }
.bande.n1 { fill: var(--brun); } .bande.n2 { fill: var(--vert); } .bande.n3 { fill: var(--vert-f); fill-opacity: .14; } .bande.n0 { fill: var(--vert); }
.point { cursor: pointer; transition: transform .9s var(--sortie); outline: none; }
.point circle { transition: r .15s, fill .4s; }
.point.n1 circle { fill: var(--brun); } .point.n2 circle { fill: var(--vert); } .point.n3 circle { fill: var(--vert-f); }
.point:hover circle, .point:focus-visible circle { stroke: var(--encre); stroke-width: 2; }
.graduation { font-size: 13px; fill: var(--doux); }
.objectif { stroke: var(--brun-f); stroke-width: 2; stroke-dasharray: 6 5; }
.trajet { stroke: var(--doux); stroke-width: 1.2; stroke-opacity: .45; }
.fantome { fill: #fff; stroke: var(--doux); stroke-width: 1.2; }
.bulle { position: absolute; z-index: 2; pointer-events: none; padding: 5px 9px; border-radius: 6px; background: var(--encre); color: #fff; font-size: 12.5px; white-space: nowrap; transform: translate(-50%, -135%); opacity: 0; transition: opacity .12s; }
.legende-nuage { display: grid; margin-top: 10px; }
.legende-nuage div { padding: 8px 0 0 10px; border-left: 2px solid var(--c); }
.legende-nuage strong { display: block; font-size: 24px; font-weight: 500; letter-spacing: -.02em; line-height: 1.1; }
.legende-nuage span { font-size: 13px; color: var(--doux); }

/* Listes et jauges */
.pas { display: flex; justify-content: space-between; gap: 8px; color: var(--doux); font-size: 13.5px; margin-bottom: 8px; }
.progression { height: 4px; background: var(--voile); border-radius: 2px; overflow: hidden; }
.progression span { display: block; height: 100%; background: var(--vert-f); transition: width .5s var(--sortie); }
.ligne-barre { display: grid; grid-template-columns: minmax(0, 1fr) minmax(70px, 150px) 52px; gap: 12px; align-items: center; padding: 9px 0; border-top: 1px solid var(--trait); }
.ligne-barre:first-of-type { border-top: 0; }
.ligne-barre > span:last-child { text-align: right; font-weight: 500; }
.jauge { height: 4px; background: var(--voile); border-radius: 2px; overflow: hidden; }
.jauge span { display: block; height: 100%; background: var(--vert); transform-origin: left; animation: etire 1s var(--sortie) backwards; }
.jauge.faible span { background: var(--brun); }
.cartes-eval { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.carte-eval { display: block; margin: 0; color: inherit; text-decoration: none; transition: background-color .15s, transform .2s var(--sortie); }
.carte-eval:hover { background: #fff; transform: translateY(-2px); }
.carte-eval h2 { font-size: 21px; margin: 4px 0 0; }
.badge { display: inline-block; white-space: nowrap; font-size: 12.5px; font-weight: 500; padding: 1px 8px; border-radius: 5px; background: rgba(200, 170, 140, .32); }
.badge.fini { background: rgba(138, 169, 151, .36); }
.repartition { display: flex; gap: 2px; height: 8px; border-radius: 4px; overflow: hidden; background: var(--voile); margin: 8px 0; }
.repartition span { min-width: 0; }
.n1 { background: var(--brun); } .n2 { background: var(--vert); } .n3 { background: var(--vert-f); color: #fff; }
.chiffres { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 0 20px; }
.chiffre { padding: 6px 0; }
.chiffre strong { display: block; font-size: 22px; font-weight: 500; letter-spacing: -.02em; }
.chiffre strong.avec-logiciel { display: flex; }
.lien-volet { display: block; color: inherit; text-decoration: none; border-radius: 8px; transition: transform .2s var(--sortie); }
.lien-volet:hover { transform: translateX(3px); }
.cel { display: grid; place-items: center; height: 30px; min-width: 44px; border-radius: 4px; font-weight: 500; font-size: 13.5px; color: var(--encre); text-decoration: none; transition: transform .15s; }
.cel:hover { transform: scale(1.05); }
.cel.n3 { color: #fff; }
.cel.attente { background: var(--voile); color: var(--doux); font-weight: 400; font-size: 12.5px; }
.ligne-niveaux { display: grid; grid-template-columns: 120px minmax(0, 1fr) 44px; gap: 12px; align-items: center; padding: 9px 0; border-top: 1px solid var(--trait); color: inherit; text-decoration: none; transition: transform .2s var(--sortie); }
.ligne-niveaux:first-of-type { border-top: 0; }
.ligne-niveaux:hover { transform: translateX(3px); }
.ligne-niveaux .repartition { height: 14px; margin: 0; }
.ligne-niveaux .doux { text-align: right; }
.cles-couleurs { display: flex; gap: 14px; margin-top: 10px; }
.cles-couleurs i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 5px; }
.courbe { display: block; width: 100%; height: 140px; overflow: visible; }
.courbe polyline { fill: none; stroke: var(--vert-f); stroke-width: 2; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.courbe .aire { fill: var(--vert); fill-opacity: .28; }
.deroulant { padding: 0; }
.deroulant > summary { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 56px; padding: 10px 22px; list-style: none; cursor: pointer; font-size: 17px; font-weight: 500; letter-spacing: -.02em; }
.deroulant > summary::-webkit-details-marker { display: none; }
.deroulant > summary::after { content: ""; flex: none; width: 8px; height: 8px; border-right: 1.6px solid var(--doux); border-bottom: 1.6px solid var(--doux); transform: rotate(45deg); transition: transform .2s var(--sortie); }
.deroulant[open] > summary::after { transform: rotate(-135deg); }
.deroulant > summary .doux { margin-left: auto; letter-spacing: 0; font-weight: 400; }
.deroulant > :not(summary) { margin-inline: 22px; }
.deroulant > :last-child { margin-bottom: 20px; }
.reglage { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; align-items: end; margin-bottom: 14px; }
.reglage label { font-size: 13px; color: var(--doux); }
.menu-doc { position: relative; }
.menu-doc > summary { list-style: none; }
.menu-doc > summary::-webkit-details-marker { display: none; }
.menu-doc > div { position: absolute; z-index: 4; right: 0; top: calc(100% + 6px); min-width: 210px; padding: 4px; background: #fff; border-radius: 10px; box-shadow: 0 12px 32px rgba(36, 52, 44, .16); }
.menu-doc a { display: block; padding: 9px 12px; border-radius: 7px; color: var(--encre); text-decoration: none; }
.menu-doc a:hover { background: var(--voile); }
.bascule { display: flex; align-items: center; gap: 10px; min-height: 28px; font-weight: 500; cursor: pointer; }
.bascule input { width: 18px; height: 18px; margin: 0; accent-color: var(--vert-f); }
.bascule-contenu { display: none; margin-top: 12px; }
.bascule:has(input:checked) + .bascule-contenu { display: block; }
.codes { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 10px; }
.code { font-size: 13.5px; font-weight: 500; letter-spacing: .03em; padding: 2px 9px; border-radius: 5px; background: rgba(138, 169, 151, .3); color: var(--encre); text-decoration: none; transition: background-color .15s; font-variant-numeric: tabular-nums; }
a.code:hover { background: var(--vert); }
.code.attente { background: rgba(200, 170, 140, .32); }
.alerte { padding: 11px 14px; margin: 0 0 14px; border-left: 2px solid var(--brun); border-radius: 0 8px 8px 0; background: rgba(200, 170, 140, .24); }
.tableau { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
th, td { text-align: left; padding: 8px 6px; border-bottom: 1px solid var(--trait); vertical-align: middle; }
tr:last-child td { border-bottom: 0; }
th { color: var(--doux); font-weight: 500; font-size: 13px; }
ul.reponses { list-style: none; margin: 0 0 8px; padding: 0; }
ul.reponses li { display: grid; grid-template-columns: 84px minmax(0, 1fr) auto; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--trait); }
ul.reponses li span { color: var(--vert-f); font-weight: 500; font-size: 13.5px; }
ul.reponses li.non span { color: var(--doux); font-weight: 400; }
ul.puces { margin: 10px 0; padding-left: 20px; }
.ligne-logiciel { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding: 14px 0; border-top: 1px solid var(--trait); }
.ligne-logiciel:first-child { border-top: 0; }
.groupe { padding: 12px 0; border-top: 1px solid var(--trait); }
.codes-groupe { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px; margin-top: 8px; }
.code-groupe { display: flex; align-items: center; gap: 8px; }
.code-groupe select { padding: 5px 8px; font-size: 13.5px; }
.sobre { color: inherit; text-decoration: none; }
.sobre:hover { text-decoration: underline; }

/* À faire */
.groupe-t { margin: 26px 0 8px; font-size: 13px; font-weight: 500; color: var(--doux); }
.taches { padding: 0; overflow: hidden; }
.tache { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto 18px; gap: 14px; align-items: center; min-height: 62px; padding: 10px 18px; border-top: 1px solid var(--trait); color: inherit; text-decoration: none; transition: background-color .15s; }
.tache:first-child { border-top: 0; }
.tache:hover { background: #fff; }
.tache svg { width: 18px; height: 18px; color: var(--vert-f); }
.taches.brun .tache > svg:first-child { color: var(--brun-f); }
.tache strong { display: block; font-weight: 500; }
.tache .fin { color: var(--doux); transition: transform .2s var(--sortie); }
.tache:hover .fin { transform: translateX(3px); }
.tache .droite-t { font-size: 13px; color: var(--doux); font-variant-numeric: tabular-nums; }

/* Parcours participant et connexion : un panneau graphique, le contenu à droite */
main.participant { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); max-width: none; min-height: 100vh; padding: 0; }
.volet-p { position: sticky; top: 0; height: 100vh; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; padding: 36px 44px; background: linear-gradient(155deg, var(--vert) 10%, var(--brun) 120%); }
.volet-p canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.volet-p > div { position: relative; }
.volet-p .marque { padding: 0; }
.volet-p .marque i { background: #fff; }
.volet-p p { margin: 8px 0 0; }
.grand-c { font-size: clamp(72px, 10vw, 128px); font-weight: 500; letter-spacing: -.05em; line-height: .95; }
.grand-c small { font-size: .3em; letter-spacing: -.02em; }
.grand-t { font-size: clamp(38px, 5vw, 60px); font-weight: 500; letter-spacing: -.04em; line-height: 1; margin: 0; }
.droite { display: flex; flex-direction: column; justify-content: center; width: 100%; max-width: 680px; min-height: 100vh; margin: 0 auto; padding: 48px; }
fieldset { border: 0; padding: 0; margin: 0 0 16px; min-width: 0; counter-reset: choix; }
legend { font-size: clamp(26px, 3vw, 38px); line-height: 1.14; padding: 0; margin-bottom: 20px; }
fieldset.etape { animation: glisse .45s var(--sortie); }
@keyframes glisse { from { opacity: 0; transform: translateX(26px); } }
.options { padding: 0; margin-bottom: 0; overflow: hidden; }
label.choix { display: flex; gap: 14px; align-items: center; min-height: 54px; padding: 10px 16px; border-top: 1px solid var(--trait); font-weight: 500; cursor: pointer; transition: background-color .15s, color .15s; }
label.choix:first-child { border-top: 0; }
label.choix:hover { background: #fff; }
label.choix:has(input:checked) { background: var(--vert-f); color: #fff; }
label.choix:has(input:focus-visible) { outline: 2px solid var(--vert-f); outline-offset: -2px; }
label.choix input { width: 18px; height: 18px; margin: 0; flex: none; accent-color: var(--vert-f); }
.etape label.choix { position: relative; counter-increment: choix; }
.etape label.choix input { position: absolute; opacity: 0; }
.etape label.choix::before { content: counter(choix); flex: none; width: 18px; font-size: 12.5px; color: var(--doux); }
.etape label.choix:has(input:checked)::before { color: #fff; }
details.commentaire { margin-bottom: 16px; }
details.commentaire summary { cursor: pointer; color: var(--vert-f); font-weight: 500; margin-bottom: 8px; }
.echelle { position: relative; height: 10px; margin: 28px 0 40px; border-radius: 5px; background: linear-gradient(90deg, var(--brun) 0 39.6%, #fff 39.6% 40.4%, var(--vert) 40.4% 69.6%, #fff 69.6% 70.4%, var(--vert-f) 70.4%); }
.echelle i { position: absolute; top: 50%; left: var(--v); width: 22px; height: 22px; margin: -11px 0 0 -11px; border: 4px solid #fff; border-radius: 50%; background: var(--encre); box-shadow: 0 2px 8px rgba(36, 52, 44, .3); animation: curseur 1.5s var(--sortie) backwards .2s; }
@keyframes curseur { from { left: 0; } }
.echelle span { position: absolute; top: 18px; font-size: 12.5px; color: var(--doux); }

/* Cartes QR */
.cartes-qr { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 12px; }
.carte-qr { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--brun); border-radius: 14px; overflow: hidden; break-inside: avoid; }
.carte-qr header { display: flex; align-items: center; gap: 10px; padding: 8px 14px; background: linear-gradient(120deg, var(--vert), var(--brun)); }
.carte-qr header img { width: 34px; height: 34px; border-radius: 50%; background: #fff; }
.carte-qr header strong { display: block; font-size: 17px; font-weight: 600; line-height: 1.1; letter-spacing: -.02em; }
.carte-qr header span { font-size: 12px; }
.carte-qr-corps { flex: 1; display: grid; grid-template-columns: 136px minmax(0, 1fr); gap: 10px; align-items: center; padding: 8px 12px 8px 6px; }
.carte-qr-corps svg { display: block; width: 100%; height: auto; }
.carte-qr-corps p { margin: 4px 0 0; font-size: 11.5px; line-height: 1.3; color: var(--doux); }
.code-grand { font-size: 30px; font-weight: 600; line-height: 1.05; letter-spacing: .04em; }
.logiciels-qr { display: flex; flex-wrap: wrap; gap: 2px 8px; margin-top: 3px; font-size: 11.5px; }

@media (max-width: 860px) {
  .rail { inset: auto 0 0 0; width: auto; flex-direction: row; gap: 0; padding: 4px 6px; background: #fff; border: 0; border-top: 1px solid var(--trait); }
  .rail .marque { display: none; }
  .nav { flex-direction: row; justify-content: space-around; }
  .nav a, .nav button { flex-direction: column; justify-content: center; gap: 1px; min-height: 52px; padding: 0 4px; font-size: 11px; }
  .nav form { margin: 0; flex: 1; }
  .rail ~ main, .rail ~ main.etroit { margin: 0 auto; padding-bottom: 84px; }
  main { padding: 24px 16px 40px; }
  .cles { grid-template-columns: 1fr 1fr; }
  .cle { padding: 14px 16px; }
  .cle:nth-child(odd) { border-left: 0; }
  .cle:nth-child(n+3) { border-top: 1px solid var(--trait); }
  .c3, .c4, .c5, .c6, .c7, .c8 { grid-column: 1 / -1; }
  main.participant { grid-template-columns: 1fr; padding: 0; }
  .volet-p { position: relative; height: auto; min-height: 180px; padding: 20px 16px; }
  .grand-c { font-size: 64px; }
  .droite { min-height: 0; padding: 24px 16px 40px; }
}
@media (max-width: 480px) {
  .carte { padding: 16px; }
  .cles, .options, .taches { padding: 0; }
  .tache { padding: 10px 14px; gap: 10px; grid-template-columns: 26px minmax(0, 1fr) auto; }
  .tache .fin { display: none; }
  .ligne-barre { grid-template-columns: minmax(0, 1fr) 64px 46px; gap: 8px; }
  .champ-volet { grid-template-columns: 1fr 1fr; }
  .champ-volet > span { grid-column: 1 / -1; font-weight: 500; }
  ul.reponses li { grid-template-columns: 84px minmax(0, 1fr); }
  ul.reponses li small { grid-column: 2; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }
@media print {
  @page { size: A4; margin: 9mm; }
  html { background: #fff; }
  #fond, .rail, .actions, .noprint, .volet-p canvas { display: none !important; }
  main, .rail ~ main, main.participant { display: block; max-width: none; margin: 0; padding: 0; min-height: 0; }
  .volet-p { position: static; height: auto; padding: 12px 0; background: none; }
  .droite { min-height: 0; padding: 0; max-width: none; }
  .carte { box-shadow: none; padding: 0; border: 0; background: none; backdrop-filter: none; }
  .cartes-qr { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 67mm; gap: 3mm; }
  .carte-qr { border-style: dashed; }
  * { animation: none !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

.groupe-themes { margin-top: 8px; }
.groupe-themes summary { cursor: pointer; font-weight: 600; padding: 8px 0; }
.ligne-volet[hidden], .groupe-themes[hidden] { display: none; }
.etapes { margin: 0; padding-left: 20px; }
.etapes li { margin-bottom: 14px; }
.etapes .actions { margin-top: 6px; }

.groupe-themes textarea { width: 100%; margin: 8px 0 4px; }
.ligne-besoin { display: grid; grid-template-columns: minmax(0, 200px) minmax(0, 1fr) 72px 76px; gap: 12px; align-items: center; padding: 10px 0; border-top: 1px solid var(--trait); color: inherit; text-decoration: none; }
.ligne-besoin:first-of-type { border-top: 0; }
.ligne-besoin .repartition { height: 14px; margin: 0; }
.ligne-besoin > span:nth-child(3), .ligne-besoin > span:nth-child(4) { text-align: right; }
.anneau { width: 150px; height: 150px; margin: 12px auto 16px; border-radius: 50%; display: grid; place-items: center; }
.anneau span { width: 96px; height: 96px; border-radius: 50%; background: #f6f6f1; display: grid; place-items: center; font-size: 26px; font-weight: 500; }
.ligne-legende { display: grid; grid-template-columns: 12px 1fr auto 48px; gap: 10px; align-items: center; padding: 5px 0; }
.ligne-legende i { width: 12px; height: 12px; border-radius: 3px; }
.ligne-legende strong { text-align: right; font-weight: 500; }
.mois { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 6px; height: 190px; }
.mois-col { display: grid; grid-template-rows: 18px 1fr 18px; gap: 4px; text-align: center; font-size: 12px; min-height: 0; }
.mois-col { position: relative; }
.mois-col i { align-self: end; width: 100%; min-height: 2px; background: var(--vert-f); border-radius: 3px 3px 0 0; }
.ligne-progres { display: grid; grid-template-columns: minmax(0, 200px) minmax(0, 1fr) 190px; gap: 12px; align-items: center; padding: 10px 0; border-top: 1px solid var(--trait); }
.ligne-progres:first-of-type { border-top: 0; }
.piste { position: relative; height: 6px; background: var(--voile); border-radius: 3px; }
.piste i { position: absolute; top: -4px; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%; }
.piste .avant { background: var(--brun); }
.piste .apres { background: var(--vert-f); }
@media (max-width: 760px) {
  .ligne-besoin { grid-template-columns: minmax(0, 1fr) 72px; }
  .ligne-besoin .repartition { grid-column: 1 / -1; grid-row: 2; }
  .ligne-besoin > span:nth-child(4) { display: none; }
  .ligne-progres { grid-template-columns: minmax(0, 1fr); }
}

.lien-eval { display: block; color: inherit; text-decoration: none; }
.rubrique-apres { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--trait); }
.rubrique-apres .pas { margin-top: 6px; }

.logiciel { background: rgba(79, 111, 93, .14); color: var(--vert-f); }
.logiciel svg { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.rubrique-apres .pas { align-items: center; }
.rubrique-apres .badge { flex: none; }
.consigne { font-size: 18px; line-height: 1.45; margin: 0 0 18px; }
legend { font-size: clamp(30px, 3.4vw, 42px); }
label.choix { font-size: 19px; min-height: 62px; padding: 12px 18px; }
.etapes .doux { max-width: 62ch; }
@media print { .consigne { display: none; } }

/* Connexion : la vitrine de la plateforme, une échelle graduée pour trois niveaux */
main.connexion { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); max-width: none; min-height: 100vh; padding: 0; }
.vitrine { position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; gap: 28px; min-height: 100vh; padding: 36px clamp(28px, 5vw, 72px); color: #fff; background: linear-gradient(150deg, #3f5c4c 0%, var(--vert-f) 55%, var(--brun-f) 125%); }
.vitrine canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .35; }
.vitrine > div, .vitrine > ul { position: relative; }
.vitrine .marque { padding: 0; font-size: 24px; color: #fff; }
.vitrine .marque i { background: var(--brun); }
.accroche { max-width: 640px; }
.accroche h1 { font-size: clamp(38px, 4.3vw, 60px); line-height: 1; letter-spacing: -.045em; margin-bottom: 18px; }
.accroche p { font-size: clamp(16px, 1.5vw, 19px); margin: 0; color: rgba(255, 255, 255, .88); }
.signe { display: flex; align-items: baseline; gap: 10px; }
.signe small { font-size: 13px; color: rgba(255, 255, 255, .8); }
.vitrine ul svg, .domaines strong svg, .sur-mesure svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.domaines strong svg { width: 20px; height: 20px; flex: none; }
.sur-mesure { display: flex; align-items: center; gap: 8px; margin: 10px 0 0; font-size: 14px; font-weight: 600; color: #fff; }
.sur-mesure svg { width: 16px; height: 16px; flex: none; }
.domaines li svg { width: 15px; height: 15px; flex: none; }
.preuves li { position: relative; padding-left: 44px; }
.preuves svg { position: absolute; left: 0; top: 2px; width: 34px; height: 34px; padding: 7px; border-radius: 10px; background: rgba(255, 255, 255, .14); }
.domaines strong { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; font-size: 16px; font-weight: 600; }
.domaines ul { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.domaines li { display: flex; align-items: center; gap: 7px; padding: 4px 6px 4px 12px; border-radius: 999px; font-size: 13px; font-weight: 500; background: rgba(255, 255, 255, .14); }
.domaines li span { min-width: 20px; padding: 0 5px; border-radius: 999px; text-align: center; font-size: 12px; color: var(--encre); background: rgba(255, 255, 255, .85); }
.graduation { max-width: 680px; }
.points { position: relative; height: 34px; }
.points i { position: absolute; bottom: 6px; left: calc(var(--x) * 1%); width: 14px; height: 14px; margin-left: -7px; border-radius: 50%; box-shadow: 0 2px 6px rgba(36, 52, 44, .3); animation: tombe .7s var(--sortie) backwards; animation-delay: calc(var(--d) * 90ms + .2s); }
@keyframes tombe { from { opacity: 0; transform: translateY(-30px); } }
.points .p1 { background: var(--brun); } .points .p2 { background: var(--vert); } .points .p3 { background: #fff; }
.regle { height: 16px; background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .9) 0 2px, transparent 2px 10%) 0 0 / 100% 100% no-repeat, repeating-linear-gradient(90deg, rgba(255, 255, 255, .45) 0 1px, transparent 1px 2%) 0 0 / 100% 55% no-repeat; border-top: 2px solid #fff; }
.paliers { display: flex; margin-top: 6px; font-size: 13.5px; font-weight: 600; }
.paliers span { padding: 5px 0 0 8px; border-left: 2px solid currentColor; }
.paliers .p1 { flex: 40; color: #e4d3c0; } .paliers .p2 { flex: 30; color: #cfe0d6; } .paliers .p3 { flex: 30; color: #fff; }
.graduation small { display: block; margin-top: 10px; font-size: 12.5px; color: rgba(255, 255, 255, .78); }
.preuves { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px 16px; margin: 0; padding: 18px 0 0; list-style: none; border-top: 1px solid rgba(255, 255, 255, .3); font-size: 13.5px; color: rgba(255, 255, 255, .88); }
.preuves strong { display: block; font-size: 15px; font-weight: 600; color: #fff; }
.porte { display: flex; flex-direction: column; justify-content: center; gap: 24px; min-height: 100vh; padding: 48px clamp(28px, 4vw, 64px); }
.porte form { width: 100%; max-width: 380px; margin: 0 auto; }
.porte h2 { font-size: clamp(32px, 3vw, 42px); letter-spacing: -.04em; margin-bottom: 24px; }
.porte form > .doux { margin-bottom: 4px; }
.porte .grand { width: 100%; }
.signature { text-align: center; margin: 0; }
@media (max-width: 900px) {
  main.connexion { grid-template-columns: minmax(0, 1fr); }
  .vitrine { min-height: 0; padding: 24px 16px; gap: 20px; }
  .preuves { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .porte { min-height: 0; padding: 32px 16px; }
}

/* Page de la personne RH : l'état en un coup d'œil, puis une seule étape ouverte */
.pilotage { position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px 32px; align-items: center; padding: 28px 32px; margin-bottom: 20px; border-radius: 20px; color: #fff; background: linear-gradient(150deg, #3f5c4c 0%, var(--vert-f) 60%, var(--brun-f) 130%); box-shadow: 0 16px 40px rgba(36, 52, 44, .16); }
.pilotage canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .3; }
.pilotage > div { position: relative; }
.pilotage .marque { padding: 0; font-size: 17px; color: #fff; }
.pilotage .marque i { background: var(--brun); }
.pilotage h1 { font-size: clamp(32px, 4.4vw, 54px); letter-spacing: -.04em; margin: 22px 0 8px; }
.prochaine { font-size: clamp(16px, 1.6vw, 19px); margin: 0; color: rgba(255, 255, 255, .92); }
.delai { display: inline-block; margin-top: 14px; padding: 4px 12px; border-radius: 999px; font-size: 13px; font-weight: 500; background: rgba(255, 255, 255, .16); }
.cercle { position: relative; width: 168px; height: 168px; }
.cercle svg { display: block; width: 100%; height: 100%; transform: rotate(-90deg); }
.cercle circle { fill: none; stroke: rgba(255, 255, 255, .2); stroke-width: 9; }
.cercle .valeur { stroke: #fff; stroke-linecap: round; stroke-dasharray: var(--v) 100; animation: remplit 1.2s var(--sortie) backwards .15s; }
@keyframes remplit { from { stroke-dasharray: 0 100; } }
.cercle > span { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.cercle strong { font-size: 40px; font-weight: 500; letter-spacing: -.04em; line-height: 1; font-variant-numeric: tabular-nums; }
.cercle small { margin-top: 4px; font-size: 12.5px; color: rgba(255, 255, 255, .85); }
.etat-groupe { grid-column: 1 / -1; }
.barre-etat { display: flex; gap: 3px; height: 8px; border-radius: 4px; overflow: hidden; background: rgba(255, 255, 255, .18); }
.barre-etat span { display: block; animation: etire 1.1s var(--sortie) backwards .25s; transform-origin: left; }
.b-fini { background: #fff; }
.b-cours { background: var(--brun); }
.etat-groupe ul { display: flex; flex-wrap: wrap; gap: 8px 28px; margin: 12px 0 0; padding: 0; list-style: none; font-size: 14px; color: rgba(255, 255, 255, .92); }
.etat-groupe li { display: flex; align-items: baseline; gap: 6px; }
.etat-groupe strong { font-size: 18px; font-weight: 600; color: #fff; font-variant-numeric: tabular-nums; }
.etat-groupe i { align-self: center; width: 9px; height: 9px; border-radius: 50%; background: rgba(255, 255, 255, .28); }
.etat-groupe i.b-fini { background: #fff; }
.etat-groupe i.b-cours { background: var(--brun); }
.parcours-rh { margin-bottom: 20px; }
.pas-rh { margin-bottom: 8px; border: 1px solid rgba(255, 255, 255, .75); border-radius: 14px; background: var(--bloc); backdrop-filter: blur(10px); transition: box-shadow .2s, border-color .2s, transform .2s var(--sortie); }
.pas-rh:hover { transform: translateY(-1px); box-shadow: 0 10px 24px rgba(36, 52, 44, .07); }
.pas-rh.actuel { border-color: var(--vert-f); box-shadow: 0 10px 28px rgba(79, 111, 93, .16); }
.pas-rh summary { display: flex; align-items: center; gap: 14px; min-height: 68px; padding: 12px 18px; cursor: pointer; list-style: none; border-radius: 14px; }
.pas-rh summary::-webkit-details-marker { display: none; }
.pas-rh summary::after { content: ""; flex: none; width: 8px; height: 8px; margin: 0 4px 0 2px; border-right: 2px solid var(--doux); border-bottom: 2px solid var(--doux); transform: rotate(45deg); transition: transform .2s var(--sortie); }
.pas-rh[open] summary::after { transform: rotate(-135deg); }
.puce { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; font-weight: 600; color: var(--vert-f); background: rgba(138, 169, 151, .22); }
.actuel .puce { color: #fff; background: var(--vert-f); box-shadow: 0 0 0 0 rgba(79, 111, 93, .4); animation: appel 2.4s ease-out infinite; }
.fait .puce { font-size: 0; color: #fff; background: var(--vert); }
.fait .puce::before { content: ""; width: 11px; height: 6px; margin-top: -3px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(-45deg); }
@keyframes appel { 70%, 100% { box-shadow: 0 0 0 11px rgba(79, 111, 93, 0); } }
.titre-pas { flex: 1; min-width: 0; }
.titre-pas strong { display: block; font-size: 16px; font-weight: 600; letter-spacing: -.01em; }
.titre-pas small { display: block; font-size: 13.5px; color: var(--doux); }
.etat-pas { flex: none; padding: 3px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 600; color: var(--vert-f); background: rgba(138, 169, 151, .22); }
.actuel .etat-pas { color: #fff; background: var(--vert-f); }
.detail-pas { padding: 2px 18px 18px 66px; animation: arrive .35s var(--sortie); }
.detail-pas p { max-width: 62ch; }
.detail-pas textarea { display: block; width: 100%; margin-bottom: 10px; }
@media (max-width: 640px) {
  .pilotage { grid-template-columns: minmax(0, 1fr); padding: 22px 18px; }
  .cercle { width: 132px; height: 132px; margin: 0 auto; }
  .cercle strong { font-size: 32px; }
  .detail-pas { padding: 0 16px 16px; }
  .pas-rh summary { padding: 12px 14px; gap: 10px; }
}

/* Page publique : thèmes, tarifs et appel à l'action */
.lien-offre { display: inline-block; margin-top: 8px; font-size: 14px; font-weight: 600; color: #fff; }
.pilotage .signe { margin-bottom: 8px; }
.appel { margin-top: 20px; }
.bouton.clair { background: #fff; border-color: #fff; color: var(--vert-f); }
.bouton.clair:hover { background: #f1e8de; border-color: #f1e8de; }
.bouton.contour { background: none; border-color: rgba(255, 255, 255, .6); color: #fff; }
.bouton.contour:hover { background: rgba(255, 255, 255, .14); }
.titre-offre { font-size: clamp(26px, 3vw, 36px); letter-spacing: -.03em; margin: 36px 0 16px; }
.liste-themes { columns: 2; column-gap: 16px; }
.groupe-offre { break-inside: avoid; }
.groupe-offre h3, .tarif h3, .carte > h3 { font-size: 17px; font-weight: 600; margin: 0 0 10px; }
.groupe-offre ul { display: grid; gap: 7px; margin: 0; padding: 0; list-style: none; }
.groupe-offre li { display: flex; }
.sur-mesure-offre { font-size: 16px; font-weight: 500; }
.prix { font-size: 44px; font-weight: 500; letter-spacing: -.04em; line-height: 1.1; margin: 0 0 8px; color: var(--vert-f); font-variant-numeric: tabular-nums; }
.prix small { font-size: 15px; letter-spacing: 0; color: var(--doux); }
.tarif.vedette { border-color: var(--vert-f); box-shadow: 0 10px 28px rgba(79, 111, 93, .16); }
.inclus { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 20px; margin: 0; padding-left: 18px; }
.appel-final { grid-template-columns: minmax(0, 1fr); margin-top: 28px; }
.appel-final h2 { font-size: clamp(26px, 3.4vw, 40px); letter-spacing: -.03em; margin-bottom: 8px; }
@media (max-width: 760px) {
  .liste-themes { columns: 1; }
  .inclus { grid-template-columns: minmax(0, 1fr); }
}

/* Secteurs d'une même demande */
.pas > .badge { flex: none; align-self: flex-start; }
.onglets-secteurs { display: flex; gap: 8px; margin-bottom: 4px; overflow-x: auto; padding-bottom: 4px; }
.onglets-secteurs a { flex: 0 1 240px; min-width: 150px; display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; padding: 10px 14px; border: 1px solid rgba(255, 255, 255, .75); border-radius: 12px; background: var(--bloc); color: var(--encre); text-decoration: none; font-size: 13.5px; transition: background-color .15s; }
.onglets-secteurs a:hover { background: #fff; }
.onglets-secteurs a.actif { border-color: var(--vert-f); background: #fff; }
.onglets-secteurs strong { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.onglets-secteurs .progression { grid-column: 1 / -1; margin-top: 4px; }
.themes-choisis { margin: 10px 0 0; font-weight: 500; color: var(--vert-f); }
.themes-choisis:empty { display: none; }

/* Création d'une évaluation : des étapes à gauche, le récapitulatif reste visible */
.creation { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 16px; align-items: start; }
.creation [hidden] { display: none !important; }
.etape-creation h2 { display: flex; align-items: center; gap: 10px; font-size: 20px; margin-bottom: 14px; }
.etape-creation h2 small { font-size: 13px; font-weight: 400; letter-spacing: 0; color: var(--doux); }
.etape-creation .puce { width: 28px; height: 28px; font-size: 14px; color: #fff; background: var(--vert-f); }
.etape-creation input[type="search"] { margin-top: 2px; }
.pilules { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0; }
.pilule, button.pilule { min-height: 34px; padding: 0 12px; font-size: 13.5px; color: var(--encre); background: rgba(255, 255, 255, .6); border: 1px solid var(--trait); border-radius: 999px; }
.pilule:hover, button.pilule:hover { background: #fff; }
.pilule[aria-pressed="true"], button.pilule[aria-pressed="true"] { color: #fff; background: var(--vert-f); border-color: var(--vert-f); }
.pilule span { min-width: 18px; padding: 0 5px; border-radius: 999px; font-size: 12px; color: var(--encre); background: var(--brun); }
.tuiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.groupe-tuiles + .groupe-tuiles { margin-top: 8px; }
.tuile { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 54px; padding: 7px 8px 7px 10px; border: 1px solid var(--trait); border-radius: 10px; background: rgba(255, 255, 255, .55); transition: background-color .15s, border-color .15s; }
.tuile:hover { background: #fff; }
.tuile.choisie { background: #fff; border-color: var(--vert-f); box-shadow: 0 0 0 1px var(--vert-f); }
.tuile-nom { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; margin: 0; font-size: 14px; font-weight: 500; cursor: pointer; }
.formats { flex: none; display: flex; gap: 2px; }
.formats label, .bascule-mode label { margin: 0; cursor: pointer; }
.formats input, .bascule-mode input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.formats span { display: block; padding: 4px 8px; border-radius: 6px; font-size: 12.5px; font-weight: 500; color: var(--doux); }
.formats label:hover span { background: var(--voile); }
.formats input:checked + span { color: #fff; background: var(--vert-f); }
.formats input:focus-visible + span, .bascule-mode input:focus-visible + span { outline: 2px solid var(--vert-f); outline-offset: 2px; }
.bascule-mode { display: inline-flex; gap: 2px; padding: 3px; margin-bottom: 14px; border-radius: 10px; background: var(--voile); }
.bascule-mode span { display: block; padding: 7px 14px; border-radius: 8px; font-weight: 500; color: var(--doux); }
.bascule-mode input:checked + span { color: var(--encre); background: #fff; box-shadow: 0 1px 3px rgba(36, 52, 44, .12); }
.lignes-secteurs { display: grid; gap: 8px; margin-bottom: 10px; }
.ligne-secteur { display: grid; grid-template-columns: minmax(0, 1fr) 120px auto; gap: 8px; }
.recap { position: sticky; top: 24px; margin: 0; }
.recap dl { margin: 0 0 16px; }
.recap dt { margin-top: 10px; font-size: 12.5px; color: var(--doux); }
.recap dd { margin: 0; font-weight: 500; overflow-wrap: anywhere; }
.recap dd span { display: block; }
.recap p { margin: 10px 0 0; }
@media (max-width: 980px) {
  .creation { grid-template-columns: minmax(0, 1fr); }
  .recap { position: static; }
}
@media (max-width: 620px) {
  .tuiles { grid-template-columns: minmax(0, 1fr); }
  .ligne-secteur { grid-template-columns: minmax(0, 1fr) 96px; }
  .ligne-secteur button { grid-column: 1 / -1; }
}

/* Cartes d'évaluation : même structure pour une équipe ou plusieurs secteurs */
.cartes-eval { align-items: start; }
.carte-eval h2 { margin: 0; }
.themes-carte { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; margin: 6px 0 0; font-size: 13.5px; color: var(--doux); }
.date-carte { margin: 2px 0 0; font-size: 13px; color: var(--doux); }
.ligne-suivi { margin-top: 12px; }
.rubrique-apres .ligne-suivi { margin-top: 8px; }
.ligne-suivi .pas { align-items: center; margin-bottom: 5px; }
.suivi-droite { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; font-variant-numeric: tabular-nums; }

/* Suivi RH */
.cle-date { font-size: 24px !important; }
.prevision { padding: 10px 14px; border-radius: 10px; background: rgba(138, 169, 151, .22); }
.prevision.retard { background: rgba(200, 170, 140, .36); }
.pile { display: flex; height: 8px; border-radius: 4px; overflow: hidden; background: var(--voile); }
.p-fini { background: var(--vert-f); }
.p-cours { background: var(--brun); }
.pile span { display: block; animation: etire 1s var(--sortie) backwards; transform-origin: left; }
.jours { display: grid; grid-template-columns: repeat(14, minmax(0, 1fr)); gap: 4px; height: 150px; align-items: end; }
.jours > div { display: grid; grid-template-rows: 18px minmax(0, 1fr) 18px; height: 100%; text-align: center; font-size: 12px; color: var(--doux); }
.jours .barre { align-self: end; width: 100%; min-height: 2px; border-radius: 3px 3px 0 0; background: var(--vert); }

/* Accueil épuré */
.voir-offre { align-self: flex-start; min-height: 48px; padding: 0 22px; font-size: 16px; }
.graduation { margin-top: auto; }
.preuves { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* Page offre : une vraie page de vente, pleine largeur */
main.offre { max-width: none; padding: 0; }
.offre-large { position: relative; width: 100%; max-width: 1080px; margin: 0 auto; padding: 0 24px; }
.offre-hero { position: relative; overflow: hidden; padding: 56px 0; color: #fff; background: linear-gradient(150deg, #3f5c4c 0%, var(--vert-f) 60%, var(--brun-f) 130%); }
.offre-hero canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .3; }
.offre-hero h1 { max-width: 760px; font-size: clamp(38px, 5.6vw, 68px); line-height: 1.02; letter-spacing: -.045em; margin: 44px 0 16px; }
.offre-hero .prochaine { max-width: 620px; }
.offre-preuves { display: flex; flex-wrap: wrap; gap: 6px 22px; margin: 28px 0 0; padding: 0; list-style: none; font-size: 14px; font-weight: 500; }
.offre-preuves li::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 8px; border-radius: 50%; background: var(--brun); }
.offre-corps { padding-top: 8px; padding-bottom: 48px; }
.offre-corps section { margin-top: 44px; }
.offre-corps .titre-offre { margin: 0 0 14px; }
.offre-corps h3 { font-size: 18px; font-weight: 600; margin: 0 0 6px; }
.benefices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.benefices .carte { margin: 0; }
.benefices svg { width: 30px; height: 30px; margin-bottom: 10px; fill: none; stroke: var(--vert-f); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.benefices p { margin: 0; color: var(--doux); }
.trois-etapes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; counter-reset: pas; }
.trois-etapes li { counter-increment: pas; color: var(--doux); }
.trois-etapes li::before { content: counter(pas); display: grid; place-items: center; width: 34px; height: 34px; margin-bottom: 10px; border-radius: 50%; font-weight: 600; color: #fff; background: var(--vert-f); }
.trois-etapes strong { display: block; font-size: 17px; font-weight: 600; color: var(--encre); }
.domaines-offre { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; align-items: start; }
.domaine-offre { margin: 0; padding: 0; }
.domaine-offre summary { display: flex; align-items: center; gap: 10px; min-height: 58px; padding: 10px 16px; cursor: pointer; list-style: none; }
.domaine-offre summary::-webkit-details-marker { display: none; }
.domaine-offre summary svg { flex: none; width: 22px; height: 22px; fill: none; stroke: var(--vert-f); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.domaine-offre summary strong { flex: 1; font-weight: 600; }
.domaine-offre ul { display: grid; gap: 7px; margin: 0; padding: 2px 16px 16px; list-style: none; }
.domaine-offre li { display: flex; }
.sur-mesure-offre { margin-top: 14px; font-size: 16px; font-weight: 500; }
.tarifs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: stretch; margin-top: 8px; }
.tarif { position: relative; display: flex; flex-direction: column; margin: 0; }
.tarif .bouton { margin-top: auto; }
.tarif .inclus { margin: 10px 0 16px; }
.tarif.vedette { background: #fff; border: 2px solid var(--vert-f); }
.conseille { position: absolute; top: -11px; left: 20px; padding: 1px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 600; color: #fff; background: var(--vert-f); }
.inclus { display: grid; gap: 6px 20px; margin: 0; padding: 0; list-style: none; }
.inclus.deux { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.inclus li::before { content: ""; display: inline-block; width: 11px; height: 6px; margin: 0 8px 3px 2px; border-left: 2px solid var(--vert-f); border-bottom: 2px solid var(--vert-f); transform: rotate(-45deg); }
.compris { margin-top: 16px; }
.compris p { margin: 12px 0 0; }
.question { margin-bottom: 8px; padding: 0; }
.question summary { padding: 14px 18px; font-weight: 600; cursor: pointer; }
.question p { margin: 0; padding: 0 18px 16px; color: var(--doux); }
.offre-fin h2 { font-size: clamp(28px, 3.6vw, 42px); letter-spacing: -.03em; margin: 0 0 8px; }
@media (max-width: 760px) {
  .benefices, .trois-etapes, .tarifs, .domaines-offre, .inclus.deux { grid-template-columns: minmax(0, 1fr); }
  .offre-large { padding: 0 16px; }
  .offre-hero { padding: 32px 0; }
  .offre-hero h1 { margin-top: 28px; }
}
.offre-hero .marque { padding: 0; font-size: 22px; color: #fff; }
.offre-hero .marque b { color: var(--brun); }
.offre-hero .marque i { background: var(--brun); }
.offre-hero .signe small { color: rgba(255, 255, 255, .85); }
.tarif .inclus { grid-template-columns: minmax(0, 1fr); padding: 0; }

/* Les fonds animés ne doivent jamais capter un clic. */
canvas[data-lignes], #fond { pointer-events: none; }
.vitrine > a { position: relative; }

/* Le point du logo monte les trois niveaux, puis redescend. */
.marque i { animation: gradue 5s var(--sortie) infinite; }
@keyframes gradue { 0%, 16% { transform: translateY(0); } 28%, 44% { transform: translateY(-4px); } 56%, 76% { transform: translateY(-8px); } 92%, 100% { transform: translateY(0); } }

.publics { position: relative; max-width: 640px; font-size: 15px; color: rgba(255, 255, 255, .92); }
.publics p { margin: 0 0 4px; }
.publics strong { color: #fff; font-weight: 600; }
.publics-offre { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; }
.publics-offre .carte { margin: 0; }
.publics-offre svg { width: 26px; height: 26px; margin-bottom: 8px; fill: none; stroke: var(--vert-f); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.publics-offre p { margin: 0; font-size: 14px; color: var(--doux); }

/* Logo plus présent */
.marque { font-size: 25px; }
.marque i { width: 9px; height: 9px; }
.vitrine .marque, .offre-hero .marque { font-size: 34px; }
.vitrine .marque i, .offre-hero .marque i { width: 11px; height: 11px; }
.pilotage .marque { font-size: 24px; }
.volet-p .marque { font-size: 28px; }

/* Menu sombre : les traits en mouvement ressortent sur le fond clair */
.rail { background: linear-gradient(170deg, #3f5c4c 0%, var(--vert-f) 70%, #6f6a52 130%); border-right: 0; backdrop-filter: none; }
.rail .marque { color: #fff; }
.rail .marque b { color: var(--brun); }
.rail .marque i { background: var(--brun); }
.nav a, .nav button { color: rgba(255, 255, 255, .82); }
.nav a:hover, .nav button:hover { background: rgba(255, 255, 255, .12); color: #fff; }
.nav a.actif { background: rgba(255, 255, 255, .95); color: var(--vert-f); }

/* Bandeau commun des pages principales */
.pilotage { overflow: visible; }
.pilotage canvas { border-radius: 20px; }
.bandeau { padding: 26px 32px; }
.bandeau h1 { margin: 0 0 6px; font-size: clamp(30px, 3.6vw, 44px); }
.bandeau .bouton { margin-top: 16px; }
.bandeau .cercle { width: 128px; height: 128px; }
.bandeau .cercle strong { font-size: 30px; }
.tete-eval .actions { position: relative; align-self: end; justify-content: flex-end; }
.tete-eval .actions .bouton, .tete-eval .actions button { margin: 0; }
.tete-eval .prochaine { font-size: 15px; }
.tete-eval .sobre { color: #fff; }
button.contour { background: none; border-color: rgba(255, 255, 255, .6); color: #fff; }
button.contour:hover { background: rgba(255, 255, 255, .14); }
.retour-clair { font-size: 13.5px; color: rgba(255, 255, 255, .85); }
.pct-carte { float: right; margin-left: 10px; font-size: 26px; font-weight: 500; letter-spacing: -.03em; color: var(--vert-f); font-variant-numeric: tabular-nums; }
.pct-carte small { font-size: 13px; }
.carte-eval { box-shadow: 0 1px 2px rgba(36, 52, 44, .05), 0 14px 34px rgba(36, 52, 44, .08); }
.carte-eval:hover { box-shadow: 0 20px 44px rgba(36, 52, 44, .13); }
.lien-secteurs { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; color: inherit; text-decoration: none; }
.code-pin { font-size: 22px; letter-spacing: .14em; }
.champ-pin { font-size: 26px; letter-spacing: .3em; text-align: center; }

/* Accueil : un seul message, la graduation comme signature */
.vitrine { justify-content: flex-start; gap: 24px; }
.mesure { position: relative; margin-top: auto; max-width: 760px; }
.mesure-tete { display: flex; align-items: baseline; gap: 14px; }
.mesure-tete strong { min-width: 2ch; font-size: clamp(56px, 6vw, 84px); font-weight: 500; letter-spacing: -.05em; line-height: 1; font-variant-numeric: tabular-nums; }
.mesure-tete span { font-size: 13.5px; color: rgba(255, 255, 255, .82); }
.mesure-tete b { display: block; font-size: 20px; font-weight: 500; color: var(--brun); }
.mesure-regle { position: relative; height: 34px; margin-top: 52px; border-top: 3px solid #fff; background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .95) 0 2px, transparent 2px 10%) 0 0 / 100% 100% no-repeat, repeating-linear-gradient(90deg, rgba(255, 255, 255, .5) 0 1px, transparent 1px 2%) 0 0 / 100% 50% no-repeat; }
.personne { position: absolute; bottom: calc(100% + 11px); display: grid; place-items: center; width: 34px; height: 34px; margin-left: -17px; border-radius: 50%; font-size: 14px; font-weight: 600; color: var(--encre); box-shadow: 0 3px 10px rgba(36, 52, 44, .35); transition: left 1.8s var(--sortie), background-color .6s; }
.personne::after { content: ""; position: absolute; top: 100%; left: 50%; width: 2px; height: 11px; margin-left: -1px; background: currentColor; opacity: .55; }
.personne.p1 { background: var(--brun); } .personne.p2 { background: #b9d2c3; } .personne.p3 { background: #fff; }
.preuves-ligne { position: relative; margin: 0; font-size: 13.5px; color: rgba(255, 255, 255, .8); }
.accroche h1 { font-size: clamp(42px, 5vw, 72px); }

/* Parcours des personnes */
.contexte { display: grid; gap: 10px; margin: 0 0 18px; padding: 0; list-style: none; }
.contexte li { padding-left: 14px; border-left: 2px solid var(--vert); color: var(--doux); }
.contexte strong { display: block; font-weight: 600; color: var(--encre); }
.couvre { margin-top: 2px; font-size: 13px; }
.ligne-logiciel { flex-wrap: nowrap; }
.ligne-logiciel > div { flex: 1; min-width: 0; }
.ligne-logiciel .bouton { flex: none; }
.nom-theme { display: flex; align-items: center; gap: .3em; margin: 0 !important; font-size: clamp(38px, 4.6vw, 60px); font-weight: 500; letter-spacing: -.04em; line-height: 1.05; }
.nom-theme .logiciel { font-size: .6em; }
.avance-panneau { font-size: 16px; font-variant-numeric: tabular-nums; }
.regles-cocher { display: grid; gap: 6px; margin: 0 0 12px; padding: 0; list-style: none; font-size: 17px; }
.bloc-commentaire { margin: 16px 0; }
.bloc-commentaire label { display: block; font-size: 17px; font-weight: 600; margin-bottom: 4px; }
.bloc-commentaire label .doux { font-weight: 400; }
.bloc-commentaire p { margin-bottom: 8px; }
.bloc-commentaire textarea { background: #fff; }

/* Bilan remis au client : une page web soignée, en feuilles A4 une fois imprimée */
main.bilan { max-width: 960px; padding: 24px 24px 60px; }
.barre-bilan { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.barre-bilan .doux { flex: 1; }
.couverture { position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; min-height: 640px; padding: 44px 48px; margin-bottom: 20px; border-radius: 20px; color: #fff; background: linear-gradient(150deg, #3f5c4c 0%, var(--vert-f) 55%, var(--brun-f) 125%); }
.couverture canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .4; }
.couverture > div { position: relative; }
.couverture .marque { padding: 0; font-size: 34px; color: #fff; }
.couverture .marque b { color: var(--brun); }
.couverture .marque i { width: 11px; height: 11px; background: var(--brun); }
.couverture-titre p { margin: 0; font-size: 20px; }
.couverture-titre h1 { font-size: clamp(44px, 6.4vw, 76px); letter-spacing: -.045em; margin: 8px 0 14px; }
.couverture-titre .couverture-themes { font-size: 15px; color: rgba(255, 255, 255, .88); }
.couverture-chiffres { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, .35); }
.couverture-chiffres strong { display: block; font-size: 42px; font-weight: 500; letter-spacing: -.04em; line-height: 1.1; }
.couverture-chiffres span { font-size: 13.5px; color: rgba(255, 255, 255, .88); }
.couverture-pied p { margin: 16px 0 0; font-size: 12.5px; color: rgba(255, 255, 255, .8); }
.feuille { padding: 34px 40px; margin-bottom: 20px; border-radius: 16px; background: #fff; box-shadow: 0 10px 28px rgba(36, 52, 44, .07); }
.titre-bilan { font-size: 30px; letter-spacing: -.035em; margin-bottom: 14px; color: var(--vert-f); }
.feuille h3 { font-size: 16px; font-weight: 600; margin: 22px 0 8px; }
.chapeau { font-size: 18px; line-height: 1.45; }
.chapeau strong { font-weight: 600; }
.constats { display: grid; gap: 7px; margin: 0; padding: 0; list-style: none; }
.constats li { padding-left: 16px; position: relative; }
.constats li::before { content: ""; position: absolute; left: 0; top: .55em; width: 7px; height: 7px; border-radius: 50%; background: var(--brun); }
.vue-ligne { display: grid; grid-template-columns: 190px minmax(0, 1fr) 36px; gap: 12px; align-items: center; padding: 7px 0; }
.vue-ligne strong { text-align: right; font-size: 17px; font-weight: 600; }
.vue-ligne .repartition { height: 24px; margin: 0; border-radius: 6px; }
.vue-ligne .repartition span { display: grid; place-items: center; font-size: 12.5px; font-weight: 600; }
.vue-bilan .cles-couleurs { flex-wrap: wrap; }
.plan { font-size: 13.5px; }
.plan th { background: var(--vert-f); color: #fff; }
.plan small { color: var(--doux); font-size: 12px; }
.plan tr { break-inside: avoid; }
.fiche-tete { display: flex; justify-content: space-between; gap: 16px; }
.fiche-tete h2 { font-size: 28px; margin: 0; }
.fiche-tete p { margin: 2px 0 0; }
.fiche-note { text-align: right; line-height: 1; }
.fiche-note strong { display: block; font-size: 52px; font-weight: 500; letter-spacing: -.04em; color: var(--vert-f); }
.fiche-note span { font-size: 13px; color: var(--doux); }
.lecture { margin: 12px 0 6px; padding: 10px 14px; border-radius: 10px; background: rgba(138, 169, 151, .2); font-weight: 500; }
.regle-bilan { position: relative; height: calc(var(--piles) * 12px + 46px); border-bottom: 2px solid var(--encre); }
.regle-bilan .zone { position: absolute; top: 18px; bottom: 0; opacity: .2; }
.regle-bilan i { position: absolute; bottom: calc(var(--rang) * 12px + 3px); width: 10px; height: 10px; margin-left: -5px; border-radius: 50%; }
.regle-bilan em, .regle-bilan b { position: absolute; top: 0; bottom: 0; padding-left: 4px; border-left: 2px solid var(--encre); font-size: 11.5px; font-style: normal; font-weight: 600; line-height: 1.2; white-space: nowrap; }
.regle-bilan b { border-left: 2px dashed var(--brun-f); color: var(--brun-f); }
.echelle-bilan { position: relative; height: 18px; margin-bottom: 12px; font-size: 12px; color: var(--doux); }
.echelle-bilan span { position: absolute; transform: translateX(-50%); }
.echelle-bilan span:first-child { transform: none; }
.echelle-bilan span:last-child { transform: translateX(-100%); }
.niveaux-bilan { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.niveaux-bilan div { display: grid; grid-template-columns: 6px auto minmax(0, 1fr); gap: 8px; align-items: center; }
.niveaux-bilan i { width: 6px; height: 100%; border-radius: 3px; }
.niveaux-bilan strong { font-size: 28px; font-weight: 500; }
.niveaux-bilan span { font-size: 12.5px; line-height: 1.25; color: var(--doux); }
.deux-colonnes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 28px; }
.deux-colonnes .ligne-barre { grid-template-columns: minmax(0, 1fr) 60px 42px; gap: 8px; padding: 6px 0; font-size: 13px; }
.contact-bilan { margin: 18px 0 0; padding-top: 12px; border-top: 1px solid var(--trait); }
@media screen and (max-width: 760px) {
  main.bilan { padding: 12px 12px 40px; }
  .barre-bilan .doux { display: none; }
  .barre-bilan { justify-content: space-between; }
  .couverture { padding: 24px 20px; min-height: 520px; }
  .couverture-chiffres { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .feuille { padding: 20px 16px; }
  .vue-ligne { grid-template-columns: minmax(0, 1fr) 36px; }
  .vue-ligne .repartition { grid-column: 1 / -1; grid-row: 2; }
  .deux-colonnes, .niveaux-bilan { grid-template-columns: minmax(0, 1fr); }
  .tete-eval .actions { justify-content: flex-start; grid-column: 1 / -1; }
  .ligne-logiciel { flex-wrap: wrap; }
}
@media (max-width: 860px) {
  .rail { background: var(--vert-f); }
  .nav a.actif { background: rgba(255, 255, 255, .95); }
}
@page feuille-bilan { size: A4; margin: 13mm 13mm 16mm; @bottom-left { content: "Graduax by Ax&compétences · Confidentiel"; font: 8.5pt Geist, Arial, sans-serif; color: #56635b; } @bottom-right { content: counter(page) " / " counter(pages); font: 8.5pt Geist, Arial, sans-serif; color: #56635b; } }
@page couverture-bilan { size: A4; margin: 0; }
@media print {
  main.bilan { max-width: none; padding: 0; }
  .couverture { page: couverture-bilan; width: 210mm; height: 297mm; min-height: 0; margin: 0; padding: 22mm 18mm; border-radius: 0; break-after: page; }
  .feuille { page: feuille-bilan; padding: 0; margin: 0 0 11mm; border-radius: 0; background: none; box-shadow: none; }
  .fiche-bilan { break-inside: avoid; }
  .trois-etapes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  h2, h3 { break-after: avoid; }
  .vue-ligne, .ligne-barre, .niveaux-bilan { break-inside: avoid; }

  /* Résultat d'une personne : le bandeau devient un en-tête, le contenu tient dans la page */
  main.participant { display: block; }
  .volet-p { height: auto; min-height: 0; flex-direction: row; align-items: flex-end; padding: 0 0 8mm; margin-bottom: 6mm; border-bottom: 1px solid var(--trait); }
  .volet-p .marque b { color: var(--vert-f); }
  .volet-p .marque i { background: var(--vert); }
  .volet-p .marque { font-size: 22px; }
  .grand-c { font-size: 44px; }
  .droite { display: block; width: auto; margin: 0; }
  .ligne-barre { padding: 5px 0; }
  .carte { margin-bottom: 6mm; }
}

.reperes { position: relative; display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 5fr); gap: 28px; max-width: 760px; font-size: 14.5px; color: rgba(255, 255, 255, .9); }
.reperes strong { display: block; margin-bottom: 4px; font-size: 16px; font-weight: 600; color: #fff; }
.reperes p { margin: 0; }
.reperes ol { margin: 0; padding-left: 18px; }
@media (max-width: 640px) { .reperes { grid-template-columns: minmax(0, 1fr); gap: 14px; } }

/* Liens des chefs de secteur */
.titre-chefs { margin: 18px 0 4px; font-size: 15px; font-weight: 600; }
.ligne-chef { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 10px; align-items: center; padding: 10px 0; border-top: 1px solid var(--trait); }
.ligne-chef label { margin: 0; }
.ligne-chef input { font-size: 13px; }

/* Double authentification */
.etapes-a2f { margin: 0 0 14px; padding-left: 20px; }
.etapes-a2f li { margin-bottom: 6px; }
.qr-a2f { width: 220px; margin: 0 auto 12px; padding: 8px; border-radius: 12px; background: #fff; }
.qr-a2f svg { display: block; width: 100%; height: auto; }
.cle-a2f { overflow-wrap: anywhere; font-size: 13px; }
.codes-secours { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0 0 18px; padding: 0; list-style: none; font-variant-numeric: tabular-nums; }
.codes-secours li { padding: 8px 12px; border-radius: 8px; background: #fff; text-align: center; }
@media (max-width: 480px) { .codes-secours { grid-template-columns: minmax(0, 1fr); } }

/* Gestion des utilisateurs */
.alerte-compte { border-color: var(--vert-f); }
.tableau td .actions button { min-height: 32px; padding: 0 10px; font-size: 13px; }