/* ============================================================================
   Vitrine publique de La Horde - direction « Salle de rendu »
   Charbon chaud, le rouge seule couleur, Archivo (axe de largeur) pour tout.
   Aucune dépendance : ni Tailwind, ni Font Awesome. Icônes en SVG inline.
   ============================================================================ */

:root {
    --bg: #1C1A1E;
    --surf: #26232A;
    --surf-2: #2F2B33;
    --line: #3A353C;
    --ink: #F3EEE8;
    --muted: #A9A1A7;
    --rouge: #E63946;
    --rouge-2: #FF6B5B;
    --rouge-ombre: rgba(230, 57, 70, 0.25);
    --font: "Archivo", "Arial Narrow", Arial, sans-serif;
    --gutter: clamp(20px, 5vw, 72px);
    --largeur: 1440px;
    --header-h: 84px;
}

/* ---------- socle ---------- */

*, *::before, *::after { box-sizing: border-box; }

/* La place de l'ascenseur est toujours reservee : sans elle, une page trop courte
   pour defiler (la candidature) decale tout le contenu vers la droite au passage. */
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scrollbar-gutter: stable; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font-family: var(--font);
    font-size: 16px;
    line-height: 1.55;
    font-variation-settings: "wdth" 100;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, p, figure, blockquote, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
a:hover { color: var(--rouge-2); }
img, svg { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
input, textarea, select { font: inherit; color: inherit; }

:focus-visible { outline: 2px solid var(--rouge-2); outline-offset: 3px; border-radius: 4px; }

.hidden { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------- typographie ---------- */

.disp {
    font-variation-settings: "wdth" 125;
    font-weight: 900;
    letter-spacing: -0.02em;
    line-height: 1;
    text-wrap: balance;
}
.cond { font-variation-settings: "wdth" 75; font-weight: 600; }
.muted { color: var(--muted); }
.rouge { color: var(--rouge); }

.h1 { font-size: clamp(40px, 4.4vw, 64px); }
.h2 { font-size: clamp(30px, 3.4vw, 46px); }

/* ---------- gabarit de page ---------- */

.v-wrap {
    width: 100%;
    max-width: var(--largeur);
    margin: 0 auto;
    padding-left: var(--gutter);
    padding-right: var(--gutter);
}

.sec { padding: clamp(56px, 7vw, 88px) 0; }
.sec > .v-wrap { display: flex; flex-direction: column; gap: clamp(28px, 3.5vw, 44px); }
.sec-surf { background: var(--surf); }
.sec-line { border-top: 1px solid var(--line); }

.head { display: flex; align-items: flex-end; justify-content: space-between; gap: 48px; }
.head h1, .head h2 { font-size: clamp(30px, 3.4vw, 46px); }
.head p { max-width: 460px; color: var(--muted); font-size: 17px; }
.head .btn { flex-shrink: 0; }

.g2, .g3, .g4, .g5 { display: grid; gap: 40px; }
.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.g5 { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 32px; }
.g-serre { gap: 24px; }

.item { display: flex; flex-direction: column; gap: 10px; }
.item h3 { font-size: 22px; }
.item p { color: var(--muted); font-size: 15px; }
.rule { border-top: 1px solid var(--line); padding-top: 24px; }

.card { background: var(--surf-2); border: 1px solid var(--line); border-radius: 6px; padding: 24px; }
.card-rouge { border-color: var(--rouge); }

.chip {
    display: inline-flex; align-items: center; height: 30px; padding: 0 12px;
    border-radius: 999px; border: 1px solid var(--line); font-size: 13px; color: var(--ink); white-space: nowrap;
}
.chip-r { border-color: var(--rouge); color: var(--rouge-2); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }

.num { font-size: 13px; color: var(--muted); display: flex; align-items: center; gap: 10px; }
.num::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--rouge); flex-shrink: 0; }

.grand { font-size: clamp(34px, 3.4vw, 44px); color: var(--rouge-2); }

/* ---------- boutons ---------- */

.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    height: 56px; padding: 0 28px; border-radius: 999px;
    font-weight: 700; font-size: 16px; white-space: nowrap; line-height: 1;
    transition: background-color .15s, border-color .15s, color .15s, transform .15s;
}
.btn:active { transform: translateY(1px); }
.btn-p { background: var(--rouge); color: var(--ink); }
.btn-p:hover { background: var(--rouge-2); color: var(--ink); }
.btn-o { border: 2px solid var(--line); color: var(--ink); }
.btn-o:hover { border-color: var(--ink); color: var(--ink); }
.btn-i { background: var(--ink); color: var(--rouge); }
.btn-i:hover { background: #fff; color: var(--rouge); }
.btn-s { height: 44px; padding: 0 22px; font-size: 15px; }
.btn:disabled { opacity: .35; cursor: not-allowed; pointer-events: none; }
.lien { font-weight: 600; text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 2px; }
.actions { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }

/* ---------- barre de tête ---------- */

.v-header {
    position: sticky; top: 0; z-index: 40;
    background: color-mix(in srgb, var(--bg) 88%, transparent);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid transparent;
    transition: border-color .2s;
}
.v-header.is-scrolled { border-bottom-color: var(--line); }
.v-header > .v-wrap { display: flex; align-items: center; justify-content: space-between; min-height: var(--header-h); gap: 24px; }
.v-logo { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.v-logo:hover { color: inherit; }
.v-logo .marque { width: 28px; height: 28px; fill: var(--rouge); }
.v-logo .mot { height: 15px; width: auto; fill: var(--ink); }
.v-nav { display: flex; align-items: center; gap: 36px; font-size: 15px; font-weight: 600; }
.v-nav a[aria-current="page"] { color: var(--rouge-2); }
.v-nav .discret { color: var(--muted); }
/* Le trait sous l'entree courante : il se trace au chargement, puis une lueur le
   parcourt sans fin. Au survol d'une autre entree, son trait se trace aussi. */
/* Le bouton rond de connexion, a droite de « Candidater » : un picto, pas un mot. */
.v-login { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 999px; border: 1px solid var(--line); color: var(--ink); flex-shrink: 0; transition: border-color .15s, color .15s, background-color .15s; }
.v-login svg { width: 20px; height: 20px; }
.v-login:hover { border-color: var(--rouge); color: var(--rouge-2); }
.v-nav a:not(.btn):not(.v-login) { position: relative; }
.v-nav a:not(.btn):not(.v-login)::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: -7px; height: 2px; border-radius: 2px;
    background: var(--rouge);
    transform: scaleX(0); transform-origin: left center;
    transition: transform .25s cubic-bezier(.2, .7, .2, 1);
}
.v-nav a:not(.btn):not(.v-login):hover::after { transform: scaleX(1); }
.v-nav a[aria-current="page"]::after {
    background: linear-gradient(90deg, var(--rouge) 0%, var(--rouge) 35%, var(--rouge-2) 50%, var(--rouge) 65%, var(--rouge) 100%);
    background-size: 250% 100%;
    animation: trait-trace .45s cubic-bezier(.2, .7, .2, 1) both, trait-lueur 3.6s linear .45s infinite;
}
@keyframes trait-trace { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes trait-lueur { from { background-position: 150% 0; } to { background-position: -150% 0; } }
.v-burger { display: none; width: 44px; height: 44px; align-items: center; justify-content: center; border-radius: 999px; }
.v-burger span { display: block; width: 22px; height: 2px; background: var(--ink); position: relative; transition: transform .2s, background .2s; }
.v-burger span::before, .v-burger span::after { content: ""; position: absolute; left: 0; width: 22px; height: 2px; background: var(--ink); transition: transform .2s, top .2s; }
.v-burger span::before { top: -7px; } .v-burger span::after { top: 7px; }
.v-burger[aria-expanded="true"] span { background: transparent; }
.v-burger[aria-expanded="true"] span::before { top: 0; transform: rotate(45deg); }
.v-burger[aria-expanded="true"] span::after { top: 0; transform: rotate(-45deg); }

/* ---------- hero ---------- */

.hero { padding: clamp(24px, 4vw, 48px) 0 clamp(24px, 3vw, 40px); }
.hero > .v-wrap { display: grid; grid-template-columns: 1.15fr 1fr; gap: 48px; align-items: center; }
.hero-txt { display: flex; flex-direction: column; gap: 28px; min-width: 0; }
.hero-txt p { max-width: 520px; font-size: 19px; color: var(--muted); }
.hero-3d { position: relative; display: flex; justify-content: center; align-items: center; aspect-ratio: 1; max-width: 560px; margin: 0 auto; width: 100%; }
.hero-3d canvas { width: 100% !important; height: 100% !important; display: block; cursor: crosshair; }
.hero-3d img { width: 100%; height: auto; }
.hero-compact > .v-wrap { grid-template-columns: 1.3fr 1fr; align-items: start; gap: 72px; }
.hero-simple > .v-wrap { grid-template-columns: 1fr; }
.hero-sessions > .v-wrap { grid-template-columns: 1fr 1fr; align-items: stretch; }
.hero-simple .hero-txt { max-width: 760px; }

/* mot tournant : cinq mots, deux secondes chacun, glissement vertical */
/* Chaque mot occupe une case plus haute que sa ligne de texte (1.32em) : sans cette
   marge, les jambages de « Infographiste Dev » dépassaient de leur case et le bas du
   mot precedent restait visible sous celui qui s'affiche. La marge negative rend au
   titre la hauteur que la case lui ajoute. */
.rot { display: inline-block; max-width: 100%; height: 1.32em; margin-bottom: -0.16em; overflow: hidden; vertical-align: bottom; color: var(--rouge); font-variation-settings: "wdth" 105; }
.rot-in { display: block; animation: rot 10s cubic-bezier(.7, 0, .2, 1) infinite; }
.rot-in span { display: block; height: 1.32em; line-height: 1.32em; white-space: nowrap; }
@keyframes rot {
    0%, 16% { transform: translateY(0); }
    20%, 36% { transform: translateY(-1.32em); }
    40%, 56% { transform: translateY(-2.64em); }
    60%, 76% { transform: translateY(-3.96em); }
    80%, 96% { transform: translateY(-5.28em); }
    100% { transform: translateY(-6.6em); }
}

.reperes { display: flex; flex-direction: column; }
.reperes > div { display: flex; flex-direction: column; gap: 4px; padding: 20px 0; border-top: 1px solid var(--line); }
.reperes .grand { font-size: 34px; }
.reperes span:last-child { color: var(--muted); font-size: 14px; }

/* ---------- faits, étapes, chiffres ---------- */

.faits { padding: 24px 0 clamp(48px, 6vw, 80px); }
.fil { height: 2px; background: linear-gradient(90deg, var(--rouge) 0 74%, var(--line) 74%); }
.chiffres { display: flex; justify-content: space-between; gap: 32px; flex-wrap: wrap; padding: 56px 0; }
.chiffres > div { display: flex; align-items: baseline; gap: 12px; }
.chiffres .grand { font-size: 44px; }
.chiffres span:last-child { color: var(--muted); font-size: 15px; }

/* ---------- témoignages ---------- */

.temoin { display: flex; flex-direction: column; gap: 20px; padding: 28px; border-left: 2px solid var(--rouge); }
/* Les guillemets francais viennent du style, pas des donnees : les citations restent
   propres dans `vitrine/contenu.py`. L'espace collee est insecable. */
.temoin blockquote { font-size: 17px; line-height: 1.5; quotes: "« " " »"; }
.temoin blockquote::before { content: open-quote; color: var(--rouge); }
.temoin blockquote::after { content: close-quote; color: var(--rouge); }
.temoin figcaption { display: flex; flex-direction: column; gap: 2px; }
.temoin figcaption strong { font-weight: 700; }
.temoin figcaption span { color: var(--muted); font-size: 13px; }

/* ---------- logos ---------- */

.logos { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 16px; }
/* Les deux images d'un logo sont empilees dans la meme cellule de grille : elles
   subissent exactement les memes contraintes de taille, donc rien ne bouge au survol.
   En les superposant en absolu, la version couleur echappait au padding et grossissait. */
.logos a, .logos div { display: grid; place-items: center; height: 88px; border: 1px solid var(--line); border-radius: 6px; padding: 16px; transition: border-color .15s, background-color .2s; }
.logos a:hover { border-color: var(--muted); background: #FFFFFF; }
.logos img { grid-area: 1 / 1; max-height: 40px; max-width: 100%; width: auto; height: auto; object-fit: contain; transition: opacity .2s; }
.logos .logo-nb { opacity: .85; }
.logos .svg { filter: brightness(0) invert(1); }
/* La couleur apparait sur une plaque claire : beaucoup de ces logos sont en encre
   sombre et disparaitraient sur le fond charbon. */
.logos .logo-coul { opacity: 0; }
/* La case « ... » qui ferme la grille de l'accueil et mene a la liste complete. */
.logos-plus { font-size: 30px; letter-spacing: 2px; color: var(--muted); line-height: 1; }
.logos-plus:hover { color: var(--rouge); }
.logos a:hover .logo-nb { opacity: 0; }
.logos a:hover .logo-coul { opacity: 1; }

/* ---------- bande studio, appel final ---------- */

.bande { background: var(--rouge); color: var(--ink); padding: 72px 0; }
.bande > .v-wrap { display: grid; grid-template-columns: 1.1fr 2fr; gap: 56px; align-items: center; }
.bande h2 { font-size: clamp(30px, 3.4vw, 44px); }
.bande .intro { display: flex; flex-direction: column; gap: 20px; }
.bande .intro p { opacity: .9; }
.bande .item h3 { font-size: 20px; }
.bande .item p { color: var(--ink); opacity: .85; }
/* Les liens de la bande rouge s'eclaircissent au survol, sauf le bouton : lui inverse
   ses couleurs, et l'encre ivoire disparaissait sur son fond blanc. */
.bande a:not(.btn):hover { color: var(--ink); }

.cta-final { padding: 80px 0; }
.cta-final > .v-wrap { display: flex; align-items: center; justify-content: space-between; gap: 48px; }
.cta-final .txt { display: flex; flex-direction: column; gap: 14px; }
.cta-final h2 { font-size: clamp(28px, 3.2vw, 44px); }
.cta-final .txt p { color: var(--muted); max-width: 560px; }
.cta-final .boutons { display: flex; flex-direction: column; gap: 14px; align-items: flex-end; flex-shrink: 0; }

.placeholder { color: var(--rouge-2); font-variation-settings: "wdth" 75; font-weight: 600; }

/* ---------- pied de page ---------- */

.v-footer { border-top: 1px solid var(--line); padding: 56px 0; font-size: 14px; color: var(--muted); }
.v-footer > .v-wrap { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; }
.v-footer .col { display: flex; flex-direction: column; gap: 10px; }
.v-footer .col > span { color: var(--ink); }
.v-footer .col p { max-width: 320px; }
.v-footer .v-logo .marque { width: 24px; height: 24px; }
.v-footer .v-logo .mot { height: 13px; }

/* ---------- frise des 41 semaines ---------- */

.frise { display: flex; flex-direction: column; gap: 16px; }
.frise-barre { display: flex; gap: 3px; }
.frise-seg { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.frise-seg i { display: block; height: 56px; border-radius: 3px; }
.frise-seg span { font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; }
.frise-seg:last-child span { text-align: right; }
.frise-legende { display: flex; gap: 24px; flex-wrap: wrap; }
.frise-legende span { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); }
.frise-legende b { width: 14px; height: 14px; border-radius: 3px; }
.k-mod { background: var(--rouge); }
.k-studio { background: var(--ink); }
.k-conso { background: #6F6670; }
.k-autre { background: #4A444D; }
.k-eval { background: #8E2530; }

/* ---------- pédagogie ---------- */

.paliers { position: relative; height: 10px; border-radius: 5px; background: var(--line); margin: 64px 0 56px; }
.paliers .fait { position: absolute; left: 0; top: 0; height: 10px; width: 58%; border-radius: 5px; background: var(--rouge); }
.paliers .cran { position: absolute; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.paliers .cran i { display: block; width: 2px; height: 26px; background: var(--ink); }
.paliers .cran span { font-size: 12px; color: var(--muted); white-space: nowrap; font-variation-settings: "wdth" 75; font-weight: 600; }
.paliers .cran.bas { top: -8px; }
.paliers .cran.haut { bottom: -8px; flex-direction: column-reverse; }
.paliers .cran:last-child { transform: translateX(-100%); align-items: flex-end; }
.jauges > div { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-top: 1px solid var(--line); font-size: 14px; align-items: center; }
.jauges b { width: 120px; height: 6px; border-radius: 3px; background: var(--line); position: relative; flex-shrink: 0; }
.jauges b i { position: absolute; left: 0; top: 0; height: 6px; background: var(--rouge); border-radius: 3px; }

.cert { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; padding: 24px 28px; border: 1px solid var(--line); border-radius: 6px; }
.cert div { display: flex; flex-direction: column; gap: 4px; }
.cert span:first-child { color: var(--muted); font-size: 13px; }
.cert span:last-child { font-weight: 700; }

/* ---------- sessions ---------- */

.session-card { display: flex; flex-direction: column; gap: 20px; padding: 36px; }
.session-card .dates { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.session-card .dates span:first-child { color: var(--muted); font-size: 13px; }
.session-card .dates span:last-child { font-size: 20px; font-weight: 700; }
.session-card .dates div { display: flex; flex-direction: column; gap: 4px; }

.gantt { position: relative; height: 390px; }
.gantt .an { position: absolute; top: 0; bottom: 30px; border-left: 1px solid var(--line); }
.gantt .an span { position: absolute; top: 100%; left: 6px; margin-top: 8px; font-size: 12px; color: var(--muted); }
.gantt .barre { position: absolute; height: 22px; border-radius: 4px; }
.gantt .barre span { position: absolute; top: 3px; font-size: 12px; font-weight: 700; white-space: nowrap; color: var(--ink); }
.gantt .barre.droite span { left: calc(100% + 10px); }
.gantt .barre.gauche span { right: calc(100% + 10px); }

.passees > div { display: grid; grid-template-columns: 140px 1fr 160px 120px; gap: 24px; padding: 18px 0; border-top: 1px solid var(--line); align-items: baseline; }
.passees > div:last-child { border-bottom: 1px solid var(--line); }
.passees strong { font-weight: 700; }
.passees .fin { text-align: right; }

/* ---------- formulaires ---------- */

.fld { display: flex; flex-direction: column; gap: 8px; }
.fld > label, .fld > .lab { font-size: 13px; color: var(--muted); }
.fld input:not([type="radio"]):not([type="checkbox"]), .fld textarea, .fld select {
    width: 100%; min-height: 52px; border-radius: 6px; border: 1px solid var(--line); background: var(--bg);
    padding: 12px 16px; color: var(--ink); font-size: 15px; transition: border-color .15s, box-shadow .15s;
}
.fld textarea { resize: vertical; min-height: 120px; }
.fld input::placeholder, .fld textarea::placeholder { color: var(--muted); opacity: .8; }
.fld input:focus, .fld textarea:focus, .fld select:focus { outline: none; border-color: var(--rouge); box-shadow: 0 0 0 3px var(--rouge-ombre); }
.fld input[type="date"] { color-scheme: dark; }
.fld .aide { font-size: 12px; color: var(--muted); }
.err { font-size: 13px; color: var(--rouge-2); font-weight: 600; }
.v-form { display: flex; flex-direction: column; gap: 20px; padding: 36px; }

.cases { display: flex; gap: 12px; flex-wrap: wrap; }
.case { position: relative; display: inline-flex; align-items: center; gap: 10px; height: 44px; padding: 0 16px; border: 1px solid var(--line); border-radius: 999px; cursor: pointer; font-size: 15px; transition: border-color .15s, color .15s; }
.case input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.case i { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--line); flex-shrink: 0; position: relative; }
.case input:checked ~ i { border-color: var(--rouge); background: var(--rouge); box-shadow: inset 0 0 0 3px var(--bg); }
.case:has(input:checked) { border-color: var(--rouge); color: var(--ink); }
.case:has(input:focus-visible) { outline: 2px solid var(--rouge-2); outline-offset: 3px; }
.cases-col { flex-direction: column; align-items: flex-start; }
.cases-col .case { width: 100%; justify-content: flex-start; }

.v-flash { padding: 14px var(--gutter); font-size: 15px; font-weight: 600; text-align: center; background: var(--surf-2); border-bottom: 1px solid var(--line); }
.v-flash.success { color: var(--ink); border-bottom-color: var(--rouge); }
.v-flash.error { color: var(--rouge-2); }

/* ---------- contact ---------- */

.contact > .v-wrap { display: grid; grid-template-columns: 1fr 1.2fr; gap: 96px; align-items: start; padding-top: clamp(24px, 4vw, 48px); padding-bottom: clamp(56px, 7vw, 96px); }
.contact .canaux { display: flex; flex-direction: column; gap: 32px; }
.contact .canaux > p { font-size: 19px; color: var(--muted); }
.contact .canaux .item { margin-top: 24px; }
.contact .canaux .item:first-of-type { margin-top: 0; }
.contact .canaux .item h3 { font-size: 20px; }

/* ---------- connexion ---------- */

.login > .v-wrap { min-height: calc(100vh - var(--header-h)); display: flex; align-items: center; justify-content: center; padding-top: 48px; padding-bottom: 48px; }
.login .boite { width: 100%; max-width: 440px; display: flex; flex-direction: column; gap: 24px; }
.login h1 { font-size: 44px; }

/* ---------- candidature ---------- */

.cand-header { border-bottom: 1px solid var(--line); }
/* meme hauteur que la barre de tete des autres pages : le logo ne saute pas d'une page a l'autre */
.cand-header > .v-wrap { display: flex; align-items: center; justify-content: space-between; min-height: var(--header-h); gap: 24px; }
.cand-header .note { font-size: 14px; color: var(--muted); }
.cand > .v-wrap { display: grid; grid-template-columns: 300px 1fr; gap: 64px; padding-top: 48px; padding-bottom: 64px; }
.cand-rail { display: flex; flex-direction: column; gap: 18px; padding-top: 8px; position: sticky; top: 100px; align-self: start; }
.cand-rail div { display: flex; align-items: center; gap: 14px; font-size: 15px; color: var(--muted); }
.cand-rail i { width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--muted); flex-shrink: 0; }
.cand-rail .done { color: var(--ink); } .cand-rail .done i { border-color: var(--ink); background: var(--ink); }
.cand-rail .on { color: var(--rouge); font-weight: 700; } .cand-rail .on i { border-color: var(--rouge); background: var(--rouge); }
.cand-main { display: flex; flex-direction: column; gap: 28px; max-width: 820px; }
.cand-step { display: none; flex-direction: column; gap: 28px; }
.cand-step.on { display: flex; }
.cand-prog { display: flex; flex-direction: column; gap: 10px; }
.cand-prog .barres { display: flex; gap: 6px; max-width: 320px; }
.cand-prog .barres i { height: 4px; flex: 1; border-radius: 2px; background: var(--line); }
.cand-prog .barres i.done, .cand-prog .barres i.on { background: var(--rouge); }
.cand-step h1, .cand-step h2 { font-size: clamp(32px, 4vw, 52px); }
.cand-step .intro { font-size: 17px; color: var(--muted); max-width: 600px; }
.cand-card { display: flex; flex-direction: column; gap: 20px; padding: 32px; transition: border-color .15s, box-shadow .15s; }
.cand-card.card-error { border-color: var(--rouge); box-shadow: 0 0 0 3px var(--rouge-ombre); }
.cand-card.card-valid { border-color: #6F6670; }
.cand-nav { display: flex; justify-content: space-between; align-items: center; gap: 16px; }

.cand-grille { padding: 20px 0 8px; display: flex; flex-direction: column; }
.cand-grille table { width: 100%; border-collapse: collapse; font-size: 15px; }
.cand-grille thead th { font-size: 13px; font-weight: 400; color: var(--muted); text-align: center; padding: 0 8px 12px; }
.cand-grille thead th:first-child { text-align: left; padding-left: 16px; }
.cand-grille tbody td { border-top: 1px solid var(--line); padding: 12px 8px; text-align: center; }
.cand-grille tbody td:first-child { text-align: left; padding-left: 16px; }
.cand-grille label { display: inline-flex; justify-content: center; align-items: center; cursor: pointer; min-width: 44px; min-height: 28px; }
.cand-grille input[type="radio"] { appearance: none; width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--line); margin: 0; cursor: pointer; transition: border-color .15s, background .15s; }
.cand-grille input[type="radio"]:checked { border-color: var(--rouge); background: var(--rouge); box-shadow: inset 0 0 0 4px var(--surf-2); }
.cand-grille .defile { max-height: 52vh; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
.cand-grille .defile thead th { position: sticky; top: 0; background: var(--surf-2); z-index: 1; }
.cand-grille .aide { padding: 16px 16px 8px; font-size: 13px; color: var(--muted); }

.cand-ok { min-height: 60vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 24px; text-align: center; padding: 96px var(--gutter); }
.cand-ok .coche { width: 72px; height: 72px; border-radius: 50%; background: var(--rouge); display: flex; align-items: center; justify-content: center; }
.cand-ok .coche svg { width: 32px; height: 32px; stroke: var(--ink); }
.cand-ok h1 { font-size: 52px; }
.cand-ok p { color: var(--muted); font-size: 18px; max-width: 520px; }

/* ---------- révélations au défilement (une fois) ---------- */

.reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s cubic-bezier(.2, .7, .2, 1), transform .7s cubic-bezier(.2, .7, .2, 1); }
.reveal.revealed { opacity: 1; transform: none; }
.reveal.d1 { transition-delay: .1s; } .reveal.d2 { transition-delay: .2s; } .reveal.d3 { transition-delay: .3s; }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .rot-in { animation: none; }
    .v-nav a[aria-current="page"]::after { animation: none; transform: scaleX(1); background: var(--rouge); }
    .v-nav a:not(.btn):not(.v-login)::after { transition: none; }
    .reveal { opacity: 1; transform: none; transition: none; }
    .btn, .v-burger span, .v-burger span::before, .v-burger span::after { transition: none; }
}

/* ---------- écrans étroits ---------- */

@media (max-width: 1100px) {
    .g4, .g5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .logos { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .cert { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .bande > .v-wrap { grid-template-columns: 1fr; gap: 36px; }
    .cand > .v-wrap { grid-template-columns: 1fr; gap: 32px; }
    .cand-rail { position: static; flex-direction: row; flex-wrap: wrap; gap: 12px 20px; }
    .cand-rail div { font-size: 13px; }
    .passees > div { grid-template-columns: 120px 1fr 120px; }
    .passees .fin { grid-column: 1 / -1; text-align: left; }
    .v-footer > .v-wrap { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 900px) {
    :root { --header-h: 68px; }
    .v-nav { display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0; padding: 8px var(--gutter) 20px; background: var(--bg); border-bottom: 1px solid var(--line); font-size: 17px; }
    .v-nav.ouvert { display: flex; }
    .v-nav a { padding: 14px 0; border-top: 1px solid var(--line); }
    .v-nav a:not(.btn):not(.v-login)::after { left: 0; right: auto; width: 26px; bottom: 8px; }
    .v-nav a.btn { margin-top: 12px; border-top: 0; }
    .v-nav .v-login { margin-top: 12px; border-top: 1px solid var(--line); }
    .v-burger { display: flex; }
    .hero > .v-wrap, .hero-compact > .v-wrap, .hero-sessions > .v-wrap, .contact > .v-wrap { grid-template-columns: 1fr; gap: 32px; }
    .cand-header .note { display: none; }
    .hero-3d { max-width: 320px; order: -1; }
    .head { flex-direction: column; align-items: flex-start; gap: 12px; }
    .g3 { grid-template-columns: 1fr; }
    .g2 { grid-template-columns: 1fr; }
    .cta-final > .v-wrap { flex-direction: column; align-items: flex-start; }
    .cta-final .boutons { align-items: flex-start; }
    .chiffres { gap: 20px 32px; }
    .chiffres > div { flex-direction: column; gap: 2px; }
    .gantt { overflow: hidden; }
    .gantt .barre span { font-size: 11px; top: -20px; }
    .gantt .barre.droite span { left: 0; }
    .gantt .barre.gauche span, .gantt .barre.moitie-droite span { left: auto; right: 0; }
    .session-card { padding: 24px; }
    .frise-seg span { display: none; }
    .frise-seg:first-child span, .frise-seg:nth-child(4) span, .frise-seg:nth-child(7) span { display: block; }
    .paliers .cran span { display: none; }
    .paliers .cran:nth-child(odd) span { display: block; }
}

@media (max-width: 600px) {
    .g4, .g5 { grid-template-columns: 1fr; }
    .logos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .logos a, .logos div { height: 64px; }
    .logos img { height: 26px; }
    .cert { grid-template-columns: 1fr; }
    .v-footer > .v-wrap { grid-template-columns: 1fr; }
    .btn { white-space: normal; text-align: center; height: auto; min-height: 52px; padding: 14px 24px; }
    .actions { flex-direction: column; align-items: flex-start; gap: 16px; }
    .hero-txt p { font-size: 17px; }
    .h1 { font-size: clamp(30px, 8.6vw, 40px); }
    .card, .v-form, .cand-card { padding: 20px; }
    .temoin { padding: 20px; }
    .passees > div { grid-template-columns: 1fr; gap: 4px; }
    .session-card .dates { grid-template-columns: 1fr; }
    .cand-nav { flex-direction: column-reverse; align-items: stretch; }
    .cand-grille .defile { max-height: none; }
    .cand-grille thead th, .cand-grille tbody td { padding-left: 4px; padding-right: 4px; }
    /* « Intermédiaire » ne se coupe pas : à cinq colonnes (les langues), l'en-tête
       décide de la largeur de la table et la poussait hors de l'écran. */
    .cand-grille thead th { font-size: 11px; }
    .cand-grille label { min-width: 32px; }
    .cand-ok h1 { font-size: 36px; }
}