/* Korso — landing page marketing. Feuille autonome : aucune librairie, aucun framework CSS. */

/* Polices auto-hébergées (fichiers variables 400–700 issus de Google Fonts, licence OFL) :
   pas de connexion à un domaine tiers avant le premier rendu. Le sous-ensemble latin couvre
   le français ; latin-ext ne se télécharge que si un caractère de sa plage apparaît. */
@font-face {
    font-family: 'Outfit';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('fonts/outfit-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Outfit';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('fonts/outfit-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Public Sans';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('fonts/public-sans-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Public Sans';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('fonts/public-sans-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
    /* Fonds */
    --page: #F5F8FC;
    --surface: #FFFFFF;
    --tint: #E7EEF7;
    --tint-alt: #EDF2F9;
    --blue-soft: #DCE9FA;
    --blue-faint: #EAF1FD;

    /* Encre et textes */
    --ink: #0B1B2B;
    --ink-hover: #08131F;
    --text-strong: #22374F;
    --text: #4A6280;
    --text-muted: #7D9AB8;
    --text-disabled: #9FB4C9;
    --text-on-dark: #9DB8D4;
    --text-on-ink: #EAF2FA;

    /* Accent */
    --accent: #2E6FE8;
    --accent-hover: #245BC4;
    --accent-light: #8FB6EE;

    /* Bordures */
    --border: #D3E0EE;
    --border-soft: rgba(11, 27, 43, 0.1);
    --border-strong: rgba(11, 27, 43, 0.2);
    --border-button: rgba(11, 27, 43, 0.22);
    --border-on-dark: rgba(234, 242, 250, 0.14);
    --tile-on-dark: rgba(234, 242, 250, 0.06);

    /* Ombres — il n'en existe que deux */
    --shadow-nav: 0 10px 30px -22px rgba(11, 27, 43, 0.55);
    --shadow-price: 0 30px 60px -34px rgba(11, 27, 43, 0.7);

    /* Formes */
    --r-block: clamp(28px, 4vw, 44px);
    --r-card: 24px;
    --r-inset: 14px;
    --r-pill: 999px;

    /* Rythme */
    --shell: 1160px;
    --gutter: 24px;
    --section: clamp(48px, 6vw, 88px);
    --inset-block: clamp(8px, 2vw, 24px);
}

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

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    background: var(--page);
    color: var(--text);
    font-family: 'Public Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
    font-size: 16.5px;
    font-weight: 400;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4 {
    font-family: 'Outfit', system-ui, -apple-system, 'Segoe UI', sans-serif;
    font-weight: 600;
    letter-spacing: -0.03em;
    line-height: 1.04;
    color: var(--text-strong);
    margin: 0;
    text-wrap: balance;
}

p {
    margin: 0;
    text-wrap: pretty;
}

a {
    color: inherit;
    text-decoration: none;
}

img {
    max-width: 100%;
    display: block;
}

ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

button,
input {
    font: inherit;
    color: inherit;
}

:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
}

.shell {
    width: 100%;
    max-width: var(--shell);
    margin: 0 auto;
    padding: 0 var(--gutter);
}

.section {
    padding: var(--section) 0;
}

.eyebrow {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    /* --accent (#2E6FE8) ne tient que 4,3:1 sur le fond de page à 13px : sa teinte foncée
       passe le seuil de 4,5:1 sur les fonds clairs. */
    color: var(--accent-hover);
}

.lead {
    font-size: clamp(17px, 1.6vw, 20px);
    color: var(--text);
}

.small {
    font-size: 14.5px;
}

.caption {
    font-size: 13px;
    color: var(--text-muted);
}

/* ---------- Animations ---------- */

@keyframes monte {
    from {
        opacity: 0;
        transform: translateY(14px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes defile {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }
}

@keyframes clignote {
    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.3;
    }
}

.monte {
    animation: monte 0.6s ease-out both;
}

/* ---------- Boutons ---------- */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 46px;
    padding: 12px 22px;
    border-radius: var(--r-pill);
    border: 1px solid transparent;
    font-size: 15.5px;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.18s ease, background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.btn:hover {
    transform: translateY(-2px);
}

.btn-accent {
    background: var(--accent);
    color: #FFFFFF;
}

.btn-accent:hover {
    background: var(--accent-hover);
}

.btn-ink {
    background: var(--ink);
    color: var(--text-on-ink);
}

.btn-ink:hover {
    background: var(--ink-hover);
}

.btn-surface {
    background: var(--surface);
    color: var(--text-strong);
}

.btn-surface:hover {
    background: var(--tint-alt);
}

.btn-outline {
    background: transparent;
    color: var(--text-strong);
    border-color: var(--border-strong);
}

.btn-outline:hover {
    background: var(--tint);
}

.btn-block {
    width: 100%;
}

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

.site-header {
    position: sticky;
    top: 0;
    z-index: 40;
    padding-top: 14px;
}

.bar {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 10px 10px 10px 14px;
    background: rgba(245, 248, 252, 0.86);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    border: 1px solid var(--border-soft);
    border-radius: 22px;
    box-shadow: var(--shadow-nav);
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: 'Outfit', system-ui, sans-serif;
    font-size: 20px;
    font-weight: 600;
    letter-spacing: -0.03em;
    color: var(--text-strong);
}

/* Le PNG porte déjà ses angles arrondis sur fond transparent : le cadre reprend le même
   rayon plutôt que de rogner dessus, et n'ajoute aucun fond derrière. */
/* Le logo est un badge rond : cadre circulaire, jamais rogné. */
.brand-logo {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    overflow: hidden;
    flex: none;
}

.brand-logo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.nav {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-inline-start: auto;
}

.nav a {
    padding: 9px 14px;
    border-radius: var(--r-pill);
    font-size: 15px;
    font-weight: 500;
    color: var(--text);
    transition: background-color 0.18s ease, color 0.18s ease;
}

.nav a:hover {
    background: var(--tint);
    color: var(--text-strong);
}

.nav-cta {
    flex: none;
}

.burger {
    display: none;
    width: 56px;
    height: 46px;
    margin-inline-start: auto;
    padding: 0;
    background: transparent;
    border: 1px solid var(--border-button);
    border-radius: var(--r-pill);
    cursor: pointer;
    position: relative;
}

.burger span {
    position: absolute;
    left: 50%;
    width: 20px;
    height: 2px;
    background: var(--text-strong);
    border-radius: 2px;
    transition: transform 0.18s ease, opacity 0.18s ease;
}

.burger span:nth-child(1) {
    transform: translate(-50%, -5px);
}

.burger span:nth-child(2) {
    transform: translate(-50%, 5px);
}

.burger[aria-expanded='true'] span:nth-child(1) {
    transform: translate(-50%, 0) rotate(45deg);
}

.burger[aria-expanded='true'] span:nth-child(2) {
    transform: translate(-50%, 0) rotate(-45deg);
}

.mobile-panel {
    display: none;
    margin-top: 10px;
    padding: 12px;
    background: var(--surface);
    border: 1px solid var(--border-soft);
    border-radius: 22px;
}

.mobile-panel.is-open {
    display: block;
    animation: monte 0.5s ease-out both;
}

.mobile-panel a:not(.btn) {
    display: block;
    min-height: 44px;
    padding: 11px 14px;
    border-radius: var(--r-pill);
    font-weight: 500;
    color: var(--text-strong);
}

.mobile-panel a:not(.btn):hover {
    background: var(--tint);
}

.mobile-panel .btn {
    margin-top: 8px;
}

/* ---------- Hero ---------- */

.hero {
    padding: clamp(36px, 5vw, 68px) 0 clamp(24px, 3vw, 40px);
    text-align: center;
}

.hero-inner {
    max-width: 860px;
    margin: 0 auto;
}

.hero h1 {
    margin: 0;
    font-size: clamp(38px, 6vw, 74px);
    line-height: 1.02;
    letter-spacing: -0.035em;
}

.hero h1 em {
    font-style: normal;
    color: var(--accent);
}

.hero .lead {
    margin: 20px auto 0;
    max-width: 640px;
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin-top: 30px;
}

.reassurance {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 10px 18px;
    margin-top: 26px;
    font-size: 14.5px;
    color: var(--text);
}

.reassurance li {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.reassurance li::before {
    content: '';
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--accent-light);
}

/* ---------- Capture produit ---------- */

.capture-frame {
    padding: clamp(14px, 1.6vw, 22px);
    background: var(--ink);
    border-radius: 34px;
}

.capture {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px;
    background: var(--border);
    border-radius: 22px;
    overflow: hidden;
}

.pane {
    background: var(--surface);
    padding: clamp(18px, 2.2vw, 26px);
}

.pane-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 18px;
}

.pane-title {
    font-family: 'Outfit', system-ui, sans-serif;
    font-size: 19px;
    font-weight: 600;
    letter-spacing: -0.03em;
    color: var(--text-strong);
}

.live {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 12px;
    background: var(--blue-faint);
    border-radius: var(--r-pill);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--accent-hover);
}

.live i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent);
    animation: clignote 2s ease-in-out infinite;
}

.counter {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    font-size: 14.5px;
    color: var(--text);
}

.counter b {
    font-family: 'Outfit', system-ui, sans-serif;
    font-size: 26px;
    font-weight: 600;
    letter-spacing: -0.04em;
    color: var(--text-strong);
}

.progress {
    height: 6px;
    margin: 10px 0 18px;
    background: var(--tint);
    border-radius: var(--r-pill);
    overflow: hidden;
}

.progress span {
    display: block;
    height: 100%;
    width: 0;
    background: var(--accent);
    border-radius: var(--r-pill);
    transition: width 0.4s ease;
}

.roll {
    display: grid;
    gap: 8px;
}

.roll li {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 14px;
    background: var(--tint-alt);
    border: 1px solid transparent;
    border-radius: var(--r-inset);
    font-size: 15px;
    color: var(--text-strong);
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

.roll .mark {
    width: 22px;
    height: 22px;
    flex: none;
    border-radius: 50%;
    border: 1.5px solid var(--border);
    background: var(--surface);
    position: relative;
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

.roll .mark::after {
    content: '';
    position: absolute;
    left: 7px;
    top: 3px;
    width: 5px;
    height: 10px;
    border: solid #FFFFFF;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg) scale(0);
    transition: transform 0.25s ease;
}

.roll li.is-done .mark {
    background: var(--accent);
    border-color: var(--accent);
}

.roll li.is-done .mark::after {
    transform: rotate(45deg) scale(1);
}

.roll li.is-done {
    background: var(--blue-faint);
    border-color: var(--border);
}

.roll li.is-absent.is-done .mark {
    background: var(--accent-light);
    border-color: var(--accent-light);
}

.roll li.is-absent.is-done {
    background: var(--blue-soft);
}

.roll .status {
    margin-inline-start: auto;
    font-size: 13px;
    color: var(--text);
}

.grid-30 {
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    gap: 6px;
}

.grid-30 i {
    display: block;
    aspect-ratio: 1;
    border-radius: 5px;
    background: var(--tint);
    border: 1px solid var(--border);
    opacity: 0;
    animation: monte 0.5s ease-out both;
}

.grid-30 i.is-present {
    background: var(--accent);
    border-color: var(--accent);
}

.grid-30 i.is-late {
    background: var(--accent-light);
    border-color: var(--accent-light);
}

.legend {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 18px;
    margin-top: 16px;
    font-size: 13px;
    color: var(--text);
}

.legend li {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.legend i {
    width: 10px;
    height: 10px;
    border-radius: 3px;
    border: 1px solid var(--border);
    background: var(--tint);
}

.legend i.is-present {
    background: var(--accent);
    border-color: var(--accent);
}

.legend i.is-late {
    background: var(--accent-light);
    border-color: var(--accent-light);
}

.notice {
    margin-top: 18px;
    padding: 14px 16px;
    background: var(--blue-faint);
    border: 1px solid var(--border);
    border-radius: var(--r-inset);
    font-size: 14.5px;
    color: var(--text-strong);
}

/* ---------- Bandeau défilant ---------- */

.marquee {
    margin: var(--section) var(--inset-block);
    padding: 22px 0;
    background: var(--tint-alt);
    border-radius: var(--r-block);
    overflow: hidden;
}

.marquee-track {
    display: flex;
    width: max-content;
    gap: 12px;
    animation: defile 38s linear infinite;
}

.marquee-track li {
    padding: 9px 18px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-pill);
    font-size: 14.5px;
    font-weight: 500;
    color: var(--text-strong);
    white-space: nowrap;
}

/* ---------- Blocs pleine largeur ---------- */

.block {
    margin: 0 var(--inset-block);
    padding: var(--section) 0;
    border-radius: var(--r-block);
}

.block-ink {
    background: var(--ink);
    color: var(--text-on-dark);
}

.block-ink h2,
.block-ink h3 {
    color: var(--text-on-ink);
}

/* #2E6FE8 ne tient que 3,8:1 sur l'encre : le surtitre passe au bleu clair. */
.block-ink .eyebrow {
    color: var(--accent-light);
}

.block-surface {
    background: var(--surface);
}

/* Trois blocs pleine largeur se suivent désormais : sans cet écart ils se toucheraient
   et leurs angles arrondis ne se liraient plus. */
.block + .block {
    margin-top: var(--inset-block);
}

.section-head {
    max-width: 720px;
}

.section-head.is-centered {
    margin: 0 auto;
    text-align: center;
}

.section-head h2 {
    margin: 14px 0 0;
    font-size: clamp(30px, 4vw, 50px);
}

.section-head p {
    margin-top: 16px;
}

/* Titre d'un bloc en deux colonnes : même échelle qu'un h2 de section. */
.split-title {
    margin-top: 14px;
    font-size: clamp(30px, 4vw, 50px);
}

.split-title + .lead {
    margin-top: 16px;
}

.block-ink .lead {
    color: var(--text-on-dark);
}

/* ---------- Modules ---------- */

.modules {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    margin-top: 44px;
}

.module {
    padding: 22px;
    background: var(--tile-on-dark);
    border: 1px solid var(--border-on-dark);
    border-radius: var(--r-card);
}

.module .num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    background: var(--accent);
    border-radius: var(--r-pill);
    font-family: 'Outfit', system-ui, sans-serif;
    font-size: 14.5px;
    font-weight: 600;
    color: #FFFFFF;
}

.module h3 {
    margin: 16px 0 8px;
    font-size: 20px;
}

.module p {
    font-size: 14.5px;
    color: var(--text-on-dark);
}

/* ---------- Portails ---------- */

.tabs {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin: 34px 0 34px;
}

.tab {
    min-height: 44px;
    padding: 11px 22px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-pill);
    font-size: 15px;
    font-weight: 600;
    color: var(--text);
    cursor: pointer;
    transition: transform 0.18s ease, background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.tab:hover {
    transform: translateY(-2px);
}

.tab[aria-selected='true'] {
    background: var(--ink);
    border-color: var(--ink);
    color: var(--text-on-ink);
}

.portal {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(24px, 4vw, 56px);
    align-items: center;
    padding: clamp(24px, 3vw, 38px);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-card);
}

/* `display: grid` l'emporterait sur la règle [hidden] du navigateur : le panneau
   inactif resterait visible. */
.portal[hidden] {
    display: none;
}

.portal h3 {
    font-size: clamp(22px, 2.5vw, 31px);
}

.portal p {
    margin-top: 14px;
}

.checks {
    display: grid;
    gap: 12px;
    margin-top: 24px;
}

.checks li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 15.5px;
    color: var(--text-strong);
}

/* Pastille cochée, dessinée en CSS (deux bordures) — pas d'icône externe. */
.tick {
    position: relative;
    flex: none;
    width: 20px;
    height: 20px;
    margin-top: 4px;
    border-radius: 50%;
    background: var(--accent);
}

.tick::after {
    content: '';
    position: absolute;
    left: 7px;
    top: 4px;
    width: 4px;
    height: 8px;
    border: solid #FFFFFF;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.browser {
    background: var(--tint-alt);
    border: 1px solid var(--border);
    border-radius: 18px;
    overflow: hidden;
}

.browser-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--border);
}

.browser-dots {
    display: flex;
    gap: 6px;
}

.browser-dots i {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--border);
}

.browser-url {
    flex: 1;
    padding: 6px 12px;
    background: var(--surface);
    border-radius: var(--r-pill);
    font-size: 13px;
    color: var(--text);
}

.placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: var(--tint);
    text-align: center;
    font-size: 13px;
    color: var(--text);
}

.placeholder.is-1610 {
    aspect-ratio: 16 / 10;
}

/* La capture est produite au format 16:10 : le ratio est imposé ici aussi pour que la
   place soit réservée pendant le chargement, même si le fichier arrive tard. */
.shot {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    object-position: top center;
    background: var(--tint);
}

/* ---------- Tarifs ---------- */

.switch {
    display: inline-flex;
    gap: 4px;
    margin: 30px auto 0;
    padding: 5px;
    background: var(--tile-on-dark);
    border: 1px solid var(--border-on-dark);
    border-radius: var(--r-pill);
}

.switch button {
    min-height: 44px;
    padding: 10px 22px;
    background: transparent;
    border: none;
    border-radius: var(--r-pill);
    font-size: 15px;
    font-weight: 600;
    color: var(--text-on-dark);
    cursor: pointer;
    transition: background-color 0.18s ease, color 0.18s ease;
}

.switch button[aria-pressed='true'] {
    background: var(--surface);
    color: var(--text-strong);
}

/* Cinq paliers de front : les cartes sont plus étroites que sur une grille à trois,
   d'où un rembourrage et une échelle de prix réduits. */
.plans {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 14px;
    margin-top: 44px;
    align-items: start;
}

/* Le bloc étant en #0B1B2B, les paliers courants sont des tuiles translucides — comme les
   modules — et c'est le palier mis en avant qui passe en clair pour ressortir. */
.plan {
    padding: 26px 20px;
    background: var(--tile-on-dark);
    border: 1px solid var(--border-on-dark);
    border-radius: 26px;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

/* Survol : la carte monte d'un cran. Même durée que les boutons (0,18 s), et réservé
   aux pointeurs — sur écran tactile, un :hover resterait collé après le tap. */
@media (hover: hover) {
    .plan:hover {
        transform: translateY(-8px);
    }

    .plan:not(.is-featured):hover {
        border-color: rgba(234, 242, 250, 0.3);
        box-shadow: 0 22px 45px -28px rgba(46, 111, 232, 0.4);
    }
}

.plan h3,
.plan .price b {
    color: var(--text-on-ink);
}

.plan .plan-only,
.plan .per-student,
.plan .price span {
    color: var(--text-on-dark);
}

.plan .btn-outline {
    color: var(--text-on-ink);
    border-color: var(--border-on-dark);
}

.plan .btn-outline:hover {
    background: var(--tile-on-dark);
}

/* Élévation du palier mis en avant.
   L'ombre de la charte (--shadow-price) est en rgba(11,27,43,0.7) : du sombre sur le
   #0B1B2B du bloc, donc invisible ici. Sur fond sombre, l'élévation se rend par la
   lumière, pas par l'ombre — d'où un halo bleu diffus sous la carte, doublé d'un liseré
   clair qui détache son bord. Le décalage vertical fait le reste. */
.plan.is-featured {
    background: var(--surface);
    border-color: var(--surface);
    box-shadow:
        0 0 0 1px rgba(234, 242, 250, 0.16),
        0 26px 50px -26px rgba(46, 111, 232, 0.55);
    transform: translateY(-22px);
    padding-block: 38px;
}

/* Le palier mis en avant part déjà de −22 px : son survol prolonge le mouvement
   au lieu de le contredire, et le halo se resserre. */
@media (hover: hover) {
    .plan.is-featured:hover {
        transform: translateY(-30px);
        box-shadow:
            0 0 0 1px rgba(234, 242, 250, 0.22),
            0 34px 62px -26px rgba(46, 111, 232, 0.7);
    }
}

.plan.is-featured h3,
.plan.is-featured .price b {
    color: var(--text-strong);
}

/* --text-muted ne tient que 2,9:1 sur la carte blanche : même teinte que le prix par élève. */
.plan.is-featured .price span {
    color: var(--text);
}

.plan.is-featured .per-student,
.plan.is-featured .plan-only {
    color: var(--text);
}

.plan-tag {
    display: inline-block;
    padding: 5px 12px;
    background: var(--accent);
    border-radius: var(--r-pill);
    font-size: 13px;
    font-weight: 700;
    color: #FFFFFF;
}

.plan h3 {
    margin-top: 14px;
    font-size: 20px;
}

/* Le montant et sa période s'empilent : « 120 000 DA » ne tient pas sur une ligne
   partagée dans une carte de cette largeur. */
.price {
    display: flex;
    flex-direction: column;
    margin-top: 20px;
}

.price b {
    font-family: 'Outfit', system-ui, sans-serif;
    font-size: clamp(26px, 2.4vw, 32px);
    font-weight: 600;
    letter-spacing: -0.04em;
    line-height: 1.02;
    color: var(--text-strong);
}

.price span {
    margin-top: 4px;
    font-size: 14.5px;
    color: var(--text-muted);
}

.per-student {
    margin-top: 10px;
    font-size: 13px;
    color: var(--text);
}

.plan-only {
    margin-top: 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
}

.plan .btn {
    margin-top: 22px;
}

/* Ce qui est compris ne varie pas d'un palier à l'autre : la mention est commune
   à la grille plutôt que répétée sur chaque carte. */
.plans-note {
    max-width: 620px;
    margin: 28px auto 0;
    text-align: center;
    font-size: 14.5px;
    color: var(--text-on-dark);
}

/* ---------- Démo ---------- */

/* Le bloc est blanc : le panneau d'action se détache en bleu clair. */
/* Trois rangées partagées par les deux options (message, bouton, téléphone) :
   les deux boutons tombent sur la même ligne quel que soit le nombre de lignes
   des messages ou la présence du bloc téléphone sous « Nous contacter ». */
.demo-panel {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    grid-template-rows: 1fr auto auto;
    gap: clamp(14px, 2vw, 26px);
    padding: clamp(22px, 3vw, 32px);
    background: var(--blue-soft);
    border-radius: var(--r-card);
}

.demo-option {
    display: grid;
    grid-row: 1 / -1;
    grid-template-rows: subgrid;
    row-gap: 18px;
}

.demo-message {
    font-size: 14.5px;
    color: var(--text);
}

/* Second moyen de contact : un lien sous le bouton, pas un troisième bouton.
   La marge négative rattrape une partie du gap de 18 px de .demo-option. */
.demo-phone {
    margin-top: -8px;
    text-align: center;
    font-size: 13px;
    color: var(--text);
}

.demo-phone a {
    font-weight: 600;
    color: var(--accent-hover);
}

.demo-phone a:hover {
    text-decoration: underline;
}

.demo-hours {
    margin-top: 4px;
    color: var(--text);
}

/* Séparateur vertical : deux filets et la mention « OU » entre les deux. */
.demo-or {
    display: grid;
    grid-row: 1 / -1;
    grid-template-rows: 1fr auto 1fr;
    justify-items: center;
    gap: 10px;
}

.demo-or::before,
.demo-or::after {
    content: '';
    width: 1px;
    background: var(--border);
}

.demo-or span {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--text);
}

/* ---------- Pied de page ---------- */

.footer {
    padding: var(--section) 0 40px;
}

/* Marque + deux colonnes de liens (Produit, Contact). */
.footer-top {
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr;
    gap: 34px;
    padding-bottom: 34px;
    border-bottom: 1px solid var(--border);
}

.footer-baseline {
    margin-top: 14px;
    font-size: 14.5px;
    color: var(--text);
    max-width: 280px;
}

.footer .footer-heading {
    font-size: 14.5px;
    font-family: 'Public Sans', system-ui, sans-serif;
    font-weight: 700;
    letter-spacing: 0;
    color: var(--text-strong);
    margin-bottom: 12px;
}

.footer-links {
    display: grid;
    gap: 9px;
}

.footer-links a {
    font-size: 14.5px;
    color: var(--text);
}

.footer-links a:hover {
    color: var(--accent);
}

.footer-bottom {
    margin-top: 26px;
    font-size: 13px;
    color: var(--text);
}

/* ---------- Responsive ---------- */

/* Cinq paliers ne tiennent de front qu'en pleine largeur : la grille descend
   par paliers explicites plutôt que de laisser auto-fit décider. */
@media (max-width: 1080px) {
    .plans {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 1000px) {
    .modules {
        grid-template-columns: repeat(2, 1fr);
    }

    .footer-top {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 820px) {
    .plans {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 980px) {
    .capture,
    .portal,
    .split {
        grid-template-columns: 1fr;
    }

    .capture {
        gap: 1px;
    }
}

@media (max-width: 900px) {
    .nav,
    .nav-cta {
        display: none;
    }

    .burger {
        display: block;
    }
}

@media (max-width: 560px) {
    .modules {
        grid-template-columns: 1fr;
    }

    .plans {
        grid-template-columns: 1fr;
        max-width: 420px;
        margin-inline: auto;
    }

    /* En colonne unique, la carte décollée laisserait un trou dans la pile :
       l'élévation retombe, le fond blanc suffit à la distinguer. Le survol s'aligne
       alors sur celui des autres paliers. */
    .plan.is-featured {
        transform: none;
    }

    .plan.is-featured:hover {
        transform: translateY(-8px);
    }

    .demo-panel {
        grid-template-columns: 1fr;
        grid-template-rows: none;
    }

    /* En colonne unique, chaque option redevient un bloc autonome. */
    .demo-option {
        grid-row: auto;
        grid-template-rows: none;
    }

    .demo-or {
        grid-row: auto;
        grid-template-rows: auto;
        grid-template-columns: 1fr auto 1fr;
        align-items: center;
    }

    .demo-or::before,
    .demo-or::after {
        width: auto;
        height: 1px;
    }

    .footer-top {
        grid-template-columns: 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {
    * {
        animation: none !important;
        transition: none !important;
    }
}