/*
 * Vitrine commerciale de Planning ERP.
 *
 * Feuille écrite à la main, sans Tailwind : une page publique doit s'afficher d'emblée, et le
 * Tailwind « play » de l'application compile ses classes dans le navigateur après chargement.
 *
 * L'identité s'appuie sur le tableau de planning mural : papier quadrillé, encre bleu nuit,
 * bandes de couleur par activité. Elle s'écarte volontairement de la charte AVEM (orange,
 * ardoise, verre dépoli), qui reste celle de l'instance AVEM.
 */

:root {
    --papier: #F5F7F6;
    --surface: #FFFFFF;
    --grille: #E1E6E4;
    --grille-forte: #CBD3D0;
    --encre: #13203B;
    --encre-douce: #4A5670;
    --encre-pale: #6B7590;
    --vert: #1A9A68;
    --vert-pale: #DDF2E8;
    --bleu: #2C64DD;
    --bleu-pale: #E1EAFB;
    --bureau: #64708A;
    --bureau-pale: #E7EAF0;
    --rouge: #D9434A;
    --rouge-pale: #FBE3E4;
    --jaune: #F2C230;
    --jaune-pale: #FDF3D1;

    --titre: 'Plus Jakarta Sans', system-ui, sans-serif;
    --texte: 'Inter', system-ui, sans-serif;
    --chiffres: 'JetBrains Mono', ui-monospace, monospace;

    --rayon-grand: 20px;
    --rayon: 12px;
    --rayon-petit: 6px;
    --ombre: 0 1px 2px rgba(19, 32, 59, .06), 0 12px 32px -12px rgba(19, 32, 59, .18);

    color-scheme: light;
}

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

/* Un `display` posé par une classe l'emporte sur l'attribut hidden : le formulaire, en grille,
   resterait affiché après l'envoi. */
[hidden] { display: none !important; }

html { scroll-behavior: smooth; scroll-padding-top: 84px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
    margin: 0;
    background: var(--papier);
    color: var(--encre);
    font-family: var(--texte);
    font-size: 1.0625rem;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { font-family: var(--titre); margin: 0; color: var(--encre); }
h2 { font-size: clamp(1.75rem, 1.2rem + 2vw, 2.5rem); font-weight: 800; line-height: 1.15; letter-spacing: -0.025em; }
h3 { font-size: 1.125rem; font-weight: 700; line-height: 1.3; letter-spacing: -0.01em; }
p { margin: 0; }
a { color: var(--bleu); }

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

.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.evitement {
    position: absolute; left: 16px; top: -60px; z-index: 100;
    background: var(--encre); color: #fff; padding: 10px 16px; border-radius: var(--rayon-petit);
}
.evitement:focus { top: 12px; }

.conteneur { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 24px; }
.conteneur-etroit { max-width: 780px; }

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

.bouton {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 48px; padding: 0 24px;
    border-radius: 999px; border: 2px solid transparent;
    font-family: var(--titre); font-weight: 700; font-size: 1rem;
    text-decoration: none; cursor: pointer; white-space: nowrap;
    transition: background-color .15s, border-color .15s, transform .15s;
}
.bouton:active { transform: translateY(1px); }
.bouton-plein { background: var(--encre); color: #fff; }
.bouton-plein:hover { background: #22325A; }
.bouton-contour { border-color: var(--grille-forte); color: var(--encre); background: transparent; }
.bouton-contour:hover { border-color: var(--encre); }
.bouton-jaune { background: var(--jaune); color: var(--encre); }
.bouton-jaune:hover { background: #E5B31C; }
.bouton-jaune:disabled { opacity: .6; cursor: progress; }
.bouton-petit { min-height: 40px; padding: 0 18px; font-size: .9375rem; }

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

.entete {
    position: sticky; top: 0; z-index: 50;
    background: rgba(245, 247, 246, .85);
    backdrop-filter: saturate(1.4) blur(10px);
    -webkit-backdrop-filter: saturate(1.4) blur(10px);
    border-bottom: 1px solid transparent;
    transition: border-color .2s;
}
.entete.entete-defile { border-bottom-color: var(--grille); }
.entete-ligne { display: flex; align-items: center; gap: 32px; height: 72px; }

.marque {
    display: inline-flex; align-items: center; gap: 10px;
    font-family: var(--titre); font-weight: 800; font-size: 1.125rem; letter-spacing: -0.02em;
    color: var(--encre); text-decoration: none; white-space: nowrap;
}
.marque-logo { width: 30px; height: 30px; }

.nav { display: flex; gap: 4px; margin-left: auto; }
.nav a {
    color: var(--encre-douce); text-decoration: none; font-weight: 500; font-size: .9375rem;
    padding: 8px 12px; border-radius: 999px; white-space: nowrap;
}
.nav a:hover { color: var(--encre); background: rgba(19, 32, 59, .05); }
.entete-actions { display: flex; align-items: center; gap: 8px; }

.bouton-menu {
    display: none; width: 44px; height: 44px; border-radius: 999px;
    border: 1px solid var(--grille-forte); background: var(--surface); cursor: pointer;
    align-items: center; justify-content: center;
}
.bouton-menu svg { width: 22px; height: 22px; stroke: var(--encre); stroke-width: 2; stroke-linecap: round; fill: none; }

/* ------------------------------------------------------------------ Accueil */

.accueil {
    position: relative;
    padding: 72px 0 96px;
    /* Le papier quadrillé du tableau de planning, discret. */
    background-image:
        linear-gradient(var(--grille) 1px, transparent 1px),
        linear-gradient(90deg, var(--grille) 1px, transparent 1px);
    background-size: 48px 48px;
    background-position: -1px -1px;
}
.accueil::after {
    /* Le quadrillage s'efface vers le bas, pour que la section suivante ne soit pas coupée net. */
    content: ""; position: absolute; inset: auto 0 0 0; height: 160px;
    background: linear-gradient(transparent, var(--papier));
    pointer-events: none;
}
.accueil-grille {
    position: relative; z-index: 1;
    display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px; align-items: center;
}
.accueil-titre {
    font-size: clamp(2.75rem, 1.6rem + 4.6vw, 5.25rem);
    font-weight: 800; line-height: .98; letter-spacing: -0.045em;
}
.accueil-chapo { margin-top: 24px; font-size: 1.1875rem; color: var(--encre-douce); max-width: 34em; }
.accueil-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.accueil-garanties { margin-top: 20px; font-size: .9375rem; color: var(--encre-pale); }

/* --- Le tableau de planning --- */

.tableau {
    margin: 0;
    background: var(--surface);
    border: 1px solid var(--grille);
    border-radius: var(--rayon-grand);
    box-shadow: var(--ombre);
    padding: 18px 18px 14px;
}
.tableau-haut { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.tableau-semaine { font-family: var(--titre); font-weight: 700; font-size: .9375rem; }
.tableau-rejouer {
    font: inherit; font-size: .8125rem; color: var(--encre-douce);
    background: none; border: 1px solid var(--grille); border-radius: 999px;
    padding: 4px 12px; cursor: pointer;
}
.tableau-rejouer:hover { border-color: var(--grille-forte); color: var(--encre); }

.alerte {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 14px; border-radius: var(--rayon);
    background: var(--rouge-pale); color: #8E1F25;
    font-weight: 600; font-size: .9375rem;
}
.alerte-point { width: 8px; height: 8px; border-radius: 50%; background: var(--rouge); flex: none; }
.alerte-resolue { background: var(--vert-pale); color: #0E5E3E; }
.alerte-resolue .alerte-point { background: var(--vert); }

/* L'alerte du tableau occupe sa place dès le départ : son apparition ne fait pas sauter la grille. */
.tableau .alerte { margin-bottom: 12px; opacity: 0; transform: translateY(-4px); transition: opacity .35s, transform .35s, background-color .4s, color .4s; }
.tableau .alerte.visible { opacity: 1; transform: none; }

.grille {
    display: grid;
    grid-template-columns: 92px repeat(5, minmax(0, 1fr));
    gap: 6px;
}
.grille-jour {
    font-family: var(--titre); font-weight: 700; font-size: .8125rem; color: var(--encre-pale);
    text-align: center; padding: 4px 0; border-radius: var(--rayon-petit);
    transition: background-color .3s, color .3s;
}
.grille-jour-cible.marque-jour { background: var(--jaune-pale); color: var(--encre); }
.grille-personne {
    display: flex; align-items: center; gap: 8px;
    font-weight: 600; font-size: .875rem; white-space: nowrap; overflow: hidden;
}
.pastille {
    display: inline-flex; align-items: center; justify-content: center; flex: none;
    width: 28px; height: 28px; border-radius: 50%;
    background: var(--encre); color: #fff;
    font-family: var(--titre); font-weight: 700; font-size: .6875rem; letter-spacing: .02em;
}
.pastille-claire { background: var(--bleu-pale); color: var(--bleu); }

.case { min-height: 46px; display: flex; }
.bande {
    flex: 1; display: flex; flex-direction: column; justify-content: center;
    padding: 6px 8px; border-radius: 8px; border-left: 4px solid;
    font-weight: 600; font-size: .8125rem; line-height: 1.2;
    transition: background-color .35s, border-color .35s, color .35s, box-shadow .35s;
}
.bande small { font-family: var(--chiffres); font-weight: 400; font-size: .6875rem; opacity: .8; margin-top: 2px; }
.bande-accueil { background: var(--bleu-pale); border-color: var(--bleu); color: #1D4BB0; }
.bande-atelier { background: var(--vert-pale); border-color: var(--vert); color: #0E6E49; }
.bande-bureau { background: var(--bureau-pale); border-color: var(--bureau); color: #434E66; }
.bande-teletravail { background: transparent; border: 1px dashed var(--grille-forte); border-left: 4px solid var(--grille-forte); color: var(--encre-douce); }
.bande-conge, .bande-absent {
    background: repeating-linear-gradient(-45deg, var(--rouge-pale) 0 6px, #FDEEEF 6px 12px);
    border-color: var(--rouge); color: #9E2A30;
}
.bande-releve { box-shadow: 0 0 0 3px var(--jaune); }

/* Pose des bandes, colonne après colonne, comme des aimants sur un tableau. Le délai de chaque
   case est posé par vitrine.js ; sans script, tout est visible d'emblée. */
.tableau.anime .case .bande { opacity: 0; transform: translateY(6px) scale(.96); }
.tableau.anime.pose .case .bande {
    opacity: 1; transform: none;
    transition: opacity .3s ease-out, transform .35s cubic-bezier(.2, .8, .3, 1.2), background-color .35s, border-color .35s, color .35s, box-shadow .35s;
    transition-delay: var(--delai, 0ms), var(--delai, 0ms), 0ms, 0ms, 0ms, 0ms;
}
.case.secousse .bande { animation: secousse .45s ease-in-out; }
@keyframes secousse {
    20% { transform: translateX(-3px); } 40% { transform: translateX(3px); }
    60% { transform: translateX(-2px); } 80% { transform: translateX(2px); }
}

.legende { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 14px; font-size: .8125rem; color: var(--encre-pale); }
.legende span { display: inline-flex; align-items: center; gap: 6px; }
.puce { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.puce-accueil { background: var(--bleu); }
.puce-atelier { background: var(--vert); }
.puce-bureau { background: var(--bureau); }
.puce-absence { background: var(--rouge); }

/* ------------------------------------------------------------------ Sections */

.section { padding: 104px 0; }
.section-teinte { background: #EBEFEE; }
.section-intro { max-width: 640px; margin-bottom: 56px; }
.section-intro p { margin-top: 16px; font-size: 1.125rem; color: var(--encre-douce); }
.section-intro-centree { margin-left: auto; margin-right: auto; text-align: center; }

/* --- La semaine --- */

.semaine { list-style: none; margin: 0; padding: 0; }
.jour {
    display: grid; grid-template-columns: 140px minmax(0, 1fr) minmax(0, 1fr); gap: 40px;
    padding: 40px 0; border-top: 1px solid var(--grille-forte); align-items: start;
}
.jour:last-child { border-bottom: 1px solid var(--grille-forte); }
.jour-repere { display: flex; flex-direction: column; gap: 2px; }
.jour-nom { font-family: var(--titre); font-weight: 800; font-size: 1.5rem; letter-spacing: -0.02em; }
.jour-heure { font-family: var(--chiffres); font-size: .875rem; color: var(--encre-pale); }
.jour-texte p { margin-top: 10px; color: var(--encre-douce); }

.mini {
    background: var(--surface); border: 1px solid var(--grille); border-radius: var(--rayon);
    padding: 16px; display: flex; flex-direction: column; gap: 10px; font-size: .9375rem;
}
.mini-titre { font-family: var(--titre); font-weight: 700; font-size: .9375rem; }
.mini-note { font-size: .8125rem; color: var(--encre-pale); }

.rotation { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.rotation-pas { padding: 6px 12px; border-radius: 999px; background: var(--bleu-pale); color: #1D4BB0; font-weight: 600; font-size: .875rem; }
.rotation-pas-actif { background: var(--bleu); color: #fff; }
.rotation-fleche { width: 18px; height: 2px; background: var(--grille-forte); position: relative; }
.rotation-fleche::after { content: ""; position: absolute; right: -1px; top: -3px; border: 4px solid transparent; border-left-color: var(--grille-forte); border-right: 0; }

.conge-ligne { display: flex; align-items: center; gap: 12px; }
.conge-ligne div { display: flex; flex-direction: column; line-height: 1.35; }
.conge-ligne span:not(.pastille) { color: var(--encre-douce); font-size: .875rem; }
.conge-solde { font-size: .875rem; color: var(--encre-douce); background: var(--papier); border-radius: var(--rayon-petit); padding: 8px 10px; }
.conge-boutons { display: flex; gap: 8px; justify-content: flex-end; }
.faux-bouton { padding: 6px 14px; border-radius: 999px; border: 1px solid var(--grille-forte); font-weight: 600; font-size: .8125rem; }
.faux-bouton-plein { background: var(--vert); border-color: var(--vert); color: #fff; }

.pause { display: grid; grid-template-columns: 64px 1fr; align-items: center; gap: 12px; padding: 4px 8px; border-radius: var(--rayon-petit); }
.pause-heure { font-family: var(--chiffres); font-size: .875rem; color: var(--encre-douce); }
.pause-places { display: flex; gap: 6px; }
.pause-places i { width: 22px; height: 22px; border-radius: 50%; background: var(--encre); }
.pause-places i.vide { background: transparent; border: 2px dashed var(--grille-forte); }
.pause-echange { background: var(--jaune-pale); }

.recap { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 0; }
.recap div { background: var(--papier); border-radius: var(--rayon-petit); padding: 10px; }
.recap dt { font-size: .75rem; color: var(--encre-pale); line-height: 1.3; }
.recap dd { margin: 4px 0 0; font-family: var(--titre); font-weight: 800; font-size: 1.5rem; }

/* --- Mobile --- */

.mobile-grille { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 72px; align-items: center; }
.mobile-chapo { margin-top: 16px; font-size: 1.125rem; color: var(--encre-douce); }
.liste-points { list-style: none; margin: 28px 0 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.liste-points li { padding-left: 22px; position: relative; color: var(--encre-douce); }
.liste-points li::before { content: ""; position: absolute; left: 0; top: .55em; width: 10px; height: 10px; border-radius: 3px; background: var(--vert); }
.liste-points strong { color: var(--encre); }

.telephone {
    justify-self: center;
    width: 300px; padding: 12px; border-radius: 44px;
    background: var(--encre); box-shadow: 0 30px 60px -20px rgba(19, 32, 59, .45);
}
.telephone-ecran {
    background: var(--papier); border-radius: 34px; padding: 28px 16px 14px;
    display: flex; flex-direction: column; gap: 10px; min-height: 560px;
}
.tel-haut { display: flex; flex-direction: column; padding: 0 4px 6px; }
.tel-salut { font-family: var(--titre); font-weight: 800; font-size: 1.375rem; letter-spacing: -0.02em; }
.tel-date { font-size: .8125rem; color: var(--encre-pale); }
.tel-carte { background: var(--surface); border-radius: 16px; padding: 14px; display: flex; flex-direction: column; gap: 2px; border: 1px solid var(--grille); }
.tel-carte strong { font-family: var(--titre); font-size: 1.125rem; }
.tel-carte-principale { background: var(--bleu); border-color: var(--bleu); color: #fff; }
.tel-carte-principale strong { color: #fff; font-size: 1.5rem; }
.tel-carte-principale .tel-libelle { color: rgba(255, 255, 255, .75); }
.tel-libelle { font-size: .75rem; color: var(--encre-pale); }
.tel-horaire { font-family: var(--chiffres); font-size: .875rem; }
.tel-releve { margin-top: 8px; align-self: flex-start; background: var(--jaune); color: var(--encre); font-weight: 700; font-size: .75rem; padding: 4px 10px; border-radius: 999px; }
.tel-ligne { flex-direction: row; justify-content: space-between; align-items: center; }
.tel-equipe { display: flex; gap: 6px; margin-top: 6px; }
.tel-bouton { margin-top: auto; text-align: center; background: var(--encre); color: #fff; border-radius: 999px; padding: 12px; font-family: var(--titre); font-weight: 700; font-size: .9375rem; }
.tel-nav { display: flex; justify-content: space-around; padding: 10px 8px 0; }
.tel-nav i { width: 22px; height: 6px; border-radius: 3px; background: var(--grille-forte); }
.tel-nav i.actif { background: var(--encre); }

/* --- Modules --- */

.modules { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.module {
    background: var(--surface); border: 1px solid var(--grille); border-radius: var(--rayon-grand);
    padding: 32px; display: flex; flex-direction: column; gap: 16px;
}
.module-tete { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 16px; }
.module-tete h3 { font-size: 1.375rem; }
.module-prix { font-weight: 600; font-size: .9375rem; color: var(--encre-douce); }
.module > p { color: var(--encre-douce); }
.module-visuel { margin-top: auto; padding-top: 8px; display: flex; gap: 16px; align-items: flex-end; }

.chrono { flex: none; background: var(--encre); color: #fff; border-radius: var(--rayon); padding: 14px 18px; display: flex; flex-direction: column; }
.chrono-libelle { font-size: .75rem; color: rgba(255, 255, 255, .7); }
.chrono-valeur { font-family: var(--chiffres); font-size: 2rem; font-weight: 500; letter-spacing: -0.02em; }
.chrono-motif { font-size: .8125rem; color: rgba(255, 255, 255, .85); }
.barres { flex: 1; display: flex; align-items: flex-end; gap: 6px; height: 96px; border-bottom: 1px solid var(--grille-forte); }
.barres span { flex: 1; height: var(--h); background: var(--bleu-pale); border-radius: 4px 4px 0 0; }
.barres span:nth-child(3) { background: var(--bleu); }

.prets { list-style: none; margin: 0; padding: 0; width: 100%; display: flex; flex-direction: column; gap: 8px; }
.prets li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 12px; border-radius: var(--rayon-petit); background: var(--papier); font-size: .9375rem; }
.etat { flex: none; font-size: .75rem; font-weight: 700; padding: 3px 10px; border-radius: 999px; background: var(--vert-pale); color: #0E6E49; }
.etat-cours { background: var(--bleu-pale); color: #1D4BB0; }
.etat-retard { background: var(--rouge-pale); color: #9E2A30; }

/* --- Confiance --- */

.confiance { background: var(--encre); color: #fff; padding: 96px 0; }
.confiance h2 { color: #fff; max-width: 18em; }
.confiance-grille { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px; margin-top: 48px; }
.confiance-grille > div { border-top: 2px solid var(--jaune); padding-top: 20px; }
.confiance h3 { color: #fff; }
.confiance p { margin-top: 10px; color: rgba(255, 255, 255, .72); font-size: .9688rem; }

/* --- Tarifs --- */

.periode {
    /* Un fieldset : on retire sa bordure, sa marge et sa largeur minimale par défaut. */
    min-inline-size: 0;
    display: flex; width: max-content; margin: 0 auto 40px; padding: 4px;
    background: var(--surface); border: 1px solid var(--grille); border-radius: 999px;
}
.periode-choix {
    font: inherit; font-weight: 600; font-size: .9375rem; color: var(--encre-douce);
    background: none; border: 0; border-radius: 999px; padding: 10px 20px; cursor: pointer;
    display: inline-flex; align-items: center; gap: 8px;
    transition: background-color .2s, color .2s;
}
.periode-choix[aria-pressed="true"] { background: var(--encre); color: #fff; }
.periode-bonus { font-size: .75rem; font-weight: 700; background: var(--jaune); color: var(--encre); padding: 2px 8px; border-radius: 999px; }

.formules { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid var(--grille-forte); border-radius: var(--rayon-grand); background: var(--surface); overflow: hidden; }
.formule { padding: 28px 24px; display: flex; flex-direction: column; gap: 12px; }
.formule + .formule { border-left: 1px solid var(--grille); }
.formule h3 { font-size: 1rem; color: var(--encre-douce); font-weight: 600; font-family: var(--texte); letter-spacing: 0; }
.formule-prix { font-family: var(--titre); font-weight: 800; font-size: 3rem; line-height: 1; letter-spacing: -0.04em; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 6px; }
.formule-prix small { font-family: var(--texte); font-weight: 500; font-size: .875rem; letter-spacing: 0; color: var(--encre-pale); flex-basis: 100%; margin-top: 8px; }
.formule-prix [data-prix] { display: inline-block; transition: opacity .18s, transform .18s; }
.formule-prix [data-prix].change { opacity: 0; transform: translateY(-6px); }
.formule-prix-texte { font-size: 2.25rem; }
.formule-cible { font-size: .9375rem; color: var(--encre-douce); }
.formule-devis { background: var(--papier); }

.inclus { margin-top: 40px; display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 16px 40px; }
.inclus ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 32px; }
.inclus li { position: relative; padding-left: 26px; }
.inclus li::before {
    content: ""; position: absolute; left: 2px; top: .4em; width: 12px; height: 7px;
    border-left: 2.5px solid var(--vert); border-bottom: 2.5px solid var(--vert); transform: rotate(-45deg);
}
.inclus-modules { grid-column: 2; color: var(--encre-douce); font-size: .9688rem; padding-top: 16px; border-top: 1px solid var(--grille); }

.lancement {
    margin: 40px auto 0; max-width: 720px; text-align: center;
    background: var(--jaune-pale); border: 1px solid #F0DC94; border-radius: var(--rayon);
    padding: 14px 20px; font-size: .9688rem;
}

/* --- Étapes --- */

.etapes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; }
.etapes li { position: relative; }
.etape-num {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; border-radius: 50%; margin-bottom: 18px;
    border: 2px solid var(--encre); font-family: var(--titre); font-weight: 800;
}
.etapes li:not(:last-child)::after {
    /* Le fil qui relie une étape à la suivante. */
    content: ""; position: absolute; top: 22px; left: 60px; right: -28px;
    border-top: 2px dashed var(--grille-forte);
}
.etapes p { margin-top: 8px; color: var(--encre-douce); }

/* --- Questions --- */

.faq { margin-top: 40px; border-top: 1px solid var(--grille-forte); }
.faq details { border-bottom: 1px solid var(--grille-forte); }
.faq summary {
    list-style: none; cursor: pointer; padding: 22px 40px 22px 0; position: relative;
    font-family: var(--titre); font-weight: 700; font-size: 1.0625rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
    content: ""; position: absolute; right: 8px; top: 50%; width: 10px; height: 10px; margin-top: -7px;
    border-right: 2px solid var(--encre); border-bottom: 2px solid var(--encre); transform: rotate(45deg);
    transition: transform .2s;
}
.faq details[open] summary::after { transform: rotate(-135deg); margin-top: -2px; }
.faq details p { padding: 0 40px 24px 0; color: var(--encre-douce); }

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

.demo { background: var(--encre); color: #fff; padding: 104px 0; }
.demo-grille { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 64px; align-items: start; }
.demo h2 { color: #fff; }
.demo-texte p { margin-top: 16px; color: rgba(255, 255, 255, .78); font-size: 1.125rem; }
.demo-texte .demo-note { font-size: .875rem; color: rgba(255, 255, 255, .6); }

.formulaire {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 16px;
    background: var(--surface); color: var(--encre); border-radius: var(--rayon-grand); padding: 32px;
}
.champ { display: flex; flex-direction: column; gap: 6px; min-width: 0; margin: 0; border: 0; padding: 0; }
.champ-large { grid-column: 1 / -1; }
.champ label, .champ legend { font-weight: 600; font-size: .9375rem; padding: 0; }
.facultatif { font-weight: 400; color: var(--encre-pale); font-size: .8125rem; margin-left: 4px; }
.champ input, .champ select, .champ textarea {
    font: inherit; font-size: 1rem; color: var(--encre);
    border: 1px solid var(--grille-forte); border-radius: 10px; background: var(--surface);
    padding: 11px 12px; min-height: 46px; width: 100%;
}
.champ textarea { resize: vertical; min-height: 90px; }
.champ input:focus, .champ select:focus, .champ textarea:focus { outline: none; border-color: var(--bleu); box-shadow: 0 0 0 3px var(--bleu-pale); }
.champ [aria-invalid="true"] { border-color: var(--rouge); }
fieldset.champ { flex-direction: row; flex-wrap: wrap; gap: 8px 24px; }
fieldset.champ legend { margin-bottom: 8px; width: 100%; float: left; }
.champ .case-cocher { display: inline-flex; align-items: center; gap: 8px; font-weight: 500; cursor: pointer; }
.champ .case-cocher input { width: 18px; height: 18px; min-height: 0; accent-color: var(--encre); }
.adresse-espace { display: flex; align-items: center; gap: 8px; }
.adresse-espace input { flex: 1; min-width: 0; }
.adresse-suffixe { font-weight: 600; color: var(--encre-pale); white-space: nowrap; }
[data-champ-adresse][hidden] { display: none; }
.piege { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.formulaire-erreur { grid-column: 1 / -1; background: var(--rouge-pale); color: #8E1F25; border-radius: 10px; padding: 10px 14px; font-weight: 600; font-size: .9375rem; }
.formulaire .bouton { margin-top: 4px; }

/* « Se connecter » : la fenêtre qui mène chacun à son espace (vitrine.js, section 5). */
.connexion {
    border: 0; border-radius: var(--rayon-grand); padding: 0; width: min(480px, calc(100vw - 32px));
    background: var(--surface); color: var(--encre); box-shadow: 0 24px 60px rgba(19, 32, 59, .25);
}
.connexion::backdrop { background: rgba(19, 32, 59, .45); }
.connexion-formulaire { display: grid; gap: 16px; padding: 28px 24px; }
.connexion-formulaire h2 { font-size: 1.375rem; }
.connexion-chapo { margin: 0; color: var(--encre-douce); }
.connexion-formulaire .formulaire-erreur[hidden] { display: none; }
.connexion-actions { display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }

.confirmation { background: var(--surface); color: var(--encre); border-radius: var(--rayon-grand); padding: 40px 32px; border-top: 6px solid var(--vert); }
.confirmation p { margin-top: 10px; color: var(--encre-douce); }
.confirmation:focus { outline: none; }

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

.pied { background: #0D172C; color: rgba(255, 255, 255, .7); padding: 32px 0; font-size: .9375rem; }
.pied-ligne { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 32px; }
.pied-marque { font-family: var(--titre); font-weight: 800; color: #fff; }
.pied-liens { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.pied a { color: rgba(255, 255, 255, .7); text-decoration: none; }
.pied a:hover { color: #fff; text-decoration: underline; }
.pied-copie { margin-left: auto; }

/* ------------------------------------------------------------------ Adaptation */

@media (max-width: 1080px) {
    /* Six liens et le bouton de démo ne tiennent plus sur une ligne : le menu se replie. */
    .nav {
        display: none; position: absolute; top: 72px; left: 0; right: 0;
        flex-direction: column; gap: 0; padding: 8px 16px 16px;
        background: var(--papier); border-bottom: 1px solid var(--grille);
    }
    .nav.ouvert { display: flex; }
    .nav a { padding: 14px 12px; border-radius: var(--rayon-petit); font-size: 1rem; }
    .bouton-menu { display: inline-flex; }
    .entete-actions { margin-left: auto; }
    .accueil-grille { grid-template-columns: 1fr; gap: 48px; }
    .accueil-texte { max-width: 640px; }
    .confiance-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .formules { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .formule + .formule { border-left: 0; }
    .formule:nth-child(even) { border-left: 1px solid var(--grille); }
    .formule:nth-child(n + 3) { border-top: 1px solid var(--grille); }
}

@media (max-width: 900px) {
    .jour { grid-template-columns: 1fr; gap: 16px; }
    .jour-repere { flex-direction: row; align-items: baseline; gap: 12px; }
    .mobile-grille { grid-template-columns: 1fr; gap: 56px; }
    .mobile-texte { order: -1; }
    .modules { grid-template-columns: 1fr; }
    .inclus { grid-template-columns: 1fr; }
    .inclus-modules { grid-column: 1; }
    .etapes { grid-template-columns: 1fr; gap: 32px; }
    .etapes li:not(:last-child)::after { display: none; }
    .demo-grille { grid-template-columns: 1fr; gap: 40px; }
}

@media (max-width: 640px) {
    .conteneur { padding: 0 16px; }
    .entete-actions .bouton-petit { display: none; }
    .accueil { padding: 40px 0 64px; background-size: 36px 36px; }
    .accueil-actions .bouton { flex: 1 1 auto; }
    .section { padding: 72px 0; }
    .section-intro { margin-bottom: 40px; }
    .tableau { padding: 14px 12px 12px; }
    /* Sur téléphone, le tableau garde les trois derniers jours : jeudi, celui de l'histoire, reste au centre.
       Chaque ligne compte six enfants (nom + cinq jours) : lundi et mardi sont les 2e et 3e. */
    .grille { grid-template-columns: 64px repeat(3, minmax(0, 1fr)); gap: 5px; }
    .grille > :nth-child(6n + 2), .grille > :nth-child(6n + 3) { display: none; }
    .grille-personne { font-size: .75rem; gap: 0; }
    .grille-personne .pastille { display: none; }
    .bande { font-size: .75rem; padding: 6px; }
    .confiance { padding: 72px 0; }
    .confiance-grille { grid-template-columns: 1fr; gap: 28px; }
    .formules { grid-template-columns: 1fr; }
    .formule:nth-child(even) { border-left: 0; }
    .formule + .formule { border-top: 1px solid var(--grille); }
    .inclus ul { grid-template-columns: 1fr; }
    .periode { width: 100%; border-radius: 22px; }
    .periode-choix { flex: 1; flex-direction: column; justify-content: center; gap: 4px; padding: 8px 12px; border-radius: 18px; white-space: nowrap; }
    .demo { padding: 72px 0; }
    .formulaire { grid-template-columns: 1fr; padding: 20px; }
    .telephone { width: 272px; }
    .pied-copie { margin-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}