/* ==========================================================================
   JANGUINOU — FEUILLE DE STYLE DE LA VITRINE
   --------------------------------------------------------------------------
   POURQUOI PAS TAILWIND ICI. Les écrans de l'application chargent Tailwind
   depuis un CDN : ils s'ouvrent après connexion, sur un poste qui a déjà
   chargé la page une fois. Une vitrine, elle, est vue par quelqu'un qui
   arrive pour la première fois, souvent en 3G. Si le CDN tarde, la page
   s'affiche NUE — texte noir sur fond blanc, sans mise en page. On ne fait
   pas cette impression-là à un directeur d'école qu'on veut convaincre.
   Tout tient donc dans ce fichier, servi par le même serveur que la page.

   La palette est celle de l'application (violets #311060 → #8b5cf6), pour
   qu'un visiteur qui installe l'application retrouve la même maison.
   ========================================================================== */

:root {
    --nuit: #1a0838;
    --violet-900: #311060;
    --violet-800: #4c1d95;
    --violet-700: #6d28d9;
    --violet-600: #7c3aed;
    --violet-500: #8b5cf6;
    --violet-300: #c4b5fd;
    --violet-100: #ede9fe;
    --violet-50: #f5f3ff;

    --ambre: #f59e0b;
    --emeraude: #10b981;
    --ciel: #3b82f6;

    --encre: #12101c;
    --encre-2: #3f3d56;
    --encre-3: #6b6880;
    --trait: #e6e3f0;
    --papier: #ffffff;
    --papier-2: #faf9fe;

    --rayon: 16px;
    --ombre: 0 1px 2px rgba(26, 8, 56, .04), 0 8px 24px rgba(26, 8, 56, .06);
    --ombre-forte: 0 2px 4px rgba(26, 8, 56, .06), 0 18px 50px rgba(26, 8, 56, .14);
    --largeur: 1140px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    margin: 0;
    font-family: Inter, "Segoe UI", system-ui, -apple-system, sans-serif;
    color: var(--encre);
    background: var(--papier);
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; }

a { color: var(--violet-700); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3, h4 { line-height: 1.15; margin: 0 0 .5em; letter-spacing: -.02em; }
h1 { font-size: clamp(2.1rem, 5.5vw, 3.6rem); font-weight: 800; }
h2 { font-size: clamp(1.6rem, 3.6vw, 2.4rem); font-weight: 800; }
h3 { font-size: 1.15rem; font-weight: 700; }
p { margin: 0 0 1em; }

.enveloppe { max-width: var(--largeur); margin: 0 auto; padding: 0 24px; }

/* ---------- Barre de navigation ---------------------------------------- */

.entete {
    position: sticky; top: 0; z-index: 50;
    background: rgba(255, 255, 255, .86);
    backdrop-filter: saturate(180%) blur(14px);
    border-bottom: 1px solid var(--trait);
}
.entete--sombre {
    /* À .72 la barre paraissait GRISE au-dessus du bandeau violet : le flou
       d'arrière-plan laissait remonter le blanc du corps de page. On monte
       l'opacité pour qu'elle se fonde dans le bandeau au lieu de le salir. */
    background: rgba(26, 8, 56, .88);
    border-bottom-color: rgba(255, 255, 255, .12);
}
.entete__rangee {
    display: flex; align-items: center; gap: 28px;
    height: 68px;
}
.marque { display: flex; align-items: center; gap: 10px; font-weight: 800; letter-spacing: -.02em; }
.marque:hover { text-decoration: none; }
.marque img { width: 30px; height: 30px; border-radius: 8px; }
.marque span { font-size: 1.05rem; color: var(--encre); }
.entete--sombre .marque span { color: #fff; }
.marque small {
    display: block; font-size: .62rem; font-weight: 600; letter-spacing: .16em;
    text-transform: uppercase; color: var(--violet-500); line-height: 1;
}
/* Sur l'en-tête sombre, le violet 500 se fondait dans le fond : « Xaralé Yi »
   n'était plus lisible. On l'éclaircit. */
.entete--sombre .marque small, .pied .marque small { color: var(--violet-300); }

.nav { display: flex; align-items: center; gap: 22px; margin-left: auto; }

/* `:not(.bouton)` N'EST PAS UNE COQUETTERIE.
   Sans lui, `.entete--sombre .nav a` (deux classes + un élément) l'emportait
   sur `.bouton--clair` (une classe) : le bouton « Se connecter » héritait du
   blanc des liens de navigation et devenait BLANC SUR BLANC — invisible.
   Le même piège rendait le texte du bouton violet gris foncé sur les pages à
   en-tête clair. Les boutons gardent donc leurs propres couleurs. */
.nav a:not(.bouton) { color: var(--encre-2); font-size: .93rem; font-weight: 500; }
.nav a:not(.bouton):hover { color: var(--violet-700); text-decoration: none; }
.nav a:not(.bouton).actif { color: var(--violet-700); font-weight: 700; }
.entete--sombre .nav a:not(.bouton) { color: rgba(255, 255, 255, .78); }
.entete--sombre .nav a:not(.bouton):hover,
.entete--sombre .nav a:not(.bouton).actif { color: #fff; }

.menu-bouton {
    display: none; margin-left: auto; background: none; border: 0; cursor: pointer;
    font-size: 1.6rem; line-height: 1; color: var(--encre); padding: 4px 8px;
}
.entete--sombre .menu-bouton { color: #fff; }

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

.bouton {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 12px 22px; border-radius: 999px; border: 1px solid transparent;
    font-size: .95rem; font-weight: 700; cursor: pointer;
    transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
    white-space: nowrap;
}
.bouton:hover { text-decoration: none; transform: translateY(-1px); }
.bouton--plein {
    background: linear-gradient(135deg, var(--violet-600), var(--violet-800));
    color: #fff; box-shadow: 0 8px 22px rgba(109, 40, 217, .32);
}
.bouton--plein:hover { box-shadow: 0 12px 30px rgba(109, 40, 217, .42); }
.bouton--clair { background: #fff; color: var(--violet-800); box-shadow: var(--ombre); }
.bouton--fantome { border-color: rgba(255, 255, 255, .34); color: #fff; }
.bouton--fantome:hover { background: rgba(255, 255, 255, .1); }
.bouton--contour { border-color: var(--trait); color: var(--encre-2); background: #fff; }
.bouton--contour:hover { border-color: var(--violet-300); color: var(--violet-700); }
.bouton--large { width: 100%; }

/* LE BOUTON WHATSAPP PORTE LA COULEUR DE WHATSAPP. On le reconnaît sans le
   lire, et personne ne se demande où mène le clic. Le vert officiel (#25d366)
   est trop clair pour du texte blanc : l'écriture est donc vert très sombre,
   ce qui donne un contraste largement lisible. */
.bouton--whatsapp { background: #25d366; color: #073b23; }
.bouton--whatsapp:hover { background: #1fbe5a; color: #062e1c; }

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

.section { padding: 84px 0; }
.section--serre { padding: 56px 0; }
.section--pale { background: var(--papier-2); border-block: 1px solid var(--trait); }
.section--nuit {
    background: radial-gradient(1200px 500px at 15% -10%, #5b21b6 0%, transparent 60%),
                linear-gradient(160deg, var(--nuit) 0%, var(--violet-900) 55%, var(--violet-800) 100%);
    color: #fff;
}
.section--nuit h2 { color: #fff; }
.section--nuit p { color: rgba(255, 255, 255, .78); }

.oeil {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: .74rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
    color: var(--violet-600); margin-bottom: 14px;
}
.section--nuit .oeil { color: var(--violet-300); }

.chapeau { font-size: 1.06rem; color: var(--encre-3); max-width: 62ch; }
.section--nuit .chapeau { color: rgba(255, 255, 255, .74); }

.titre-centre { text-align: center; }
.titre-centre .chapeau { margin-inline: auto; }

/* ---------- Bandeau d'ouverture ----------------------------------------- */

.heros {
    position: relative; overflow: hidden; color: #fff;
    background: radial-gradient(1000px 460px at 78% -12%, #7c3aed 0%, transparent 62%),
                radial-gradient(900px 500px at 6% 108%, #4c1d95 0%, transparent 58%),
                linear-gradient(160deg, var(--nuit) 0%, var(--violet-900) 60%, #3b1470 100%);
    padding: 76px 0 92px;
}
.heros::after {
    /* Trame discrète : sans elle, l'aplat violet paraît plat sur grand écran. */
    content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
    background-image: linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px),
                      linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px);
    background-size: 68px 68px;
    mask-image: radial-gradient(70% 60% at 50% 20%, #000 0%, transparent 78%);
}
.heros > * { position: relative; z-index: 1; }
.heros h1 { color: #fff; max-width: 17ch; }
.heros h1 em { font-style: normal; color: var(--violet-300); }
.heros .chapeau { font-size: 1.12rem; color: rgba(255, 255, 255, .8); margin-top: 18px; }

.preuve {
    display: inline-flex; align-items: center; gap: 12px; flex-wrap: wrap;
    padding: 9px 18px 9px 10px; border-radius: 22px;
    background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .2);
    font-size: .9rem; color: rgba(255, 255, 255, .92); margin-bottom: 26px;
}
.preuve b { color: #fff; font-weight: 800; }
.preuve i { font-size: 1.15rem; color: var(--violet-300); font-style: normal; }
.preuve__pastille {
    background: var(--violet-500); color: #fff; font-weight: 800;
    padding: 3px 11px; border-radius: 999px; font-size: .8rem; letter-spacing: .02em;
    /* SANS CECI, « +5 000 élèves testés » SE COUPE EN TROIS LIGNES sur
       téléphone : la pastille devenait un pavé illisible, alors que c'est la
       première chose que le visiteur doit lire. */
    white-space: nowrap;
}

.heros__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.heros__note { margin-top: 16px; font-size: .84rem; color: rgba(255, 255, 255, .55); }

/* ---------- La couche publicitaire -------------------------------------- */
/*
   LE SLOGAN D'ABORD, LA PREUVE DESSOUS.
   Le site ne disait que des faits : « Trois formules selon l'effectif »,
   « Une école sait tout, mais trop tard ». C'est juste, et c'est plat — rien
   ne se retient. Une accroche donne la raison d'y croire en trois mots ; le
   chiffre qui suit la rend crédible. L'inverse — le slogan sans preuve — est
   ce qui fait fuir un directeur d'école.
*/
.slogan {
    display: block; font-size: clamp(1.05rem, 2.1vw, 1.32rem); font-weight: 700;
    color: var(--violet-300); letter-spacing: -.01em; margin-bottom: 14px;
}
.slogan--sombre { color: var(--violet-700); }

/* La bande d'accroches : trois punchlines, chacune adossée à un fait. */
.accroches {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
    margin-top: 26px; background: rgba(255, 255, 255, .16);
    border: 1px solid rgba(255, 255, 255, .16); border-radius: var(--rayon);
    overflow: hidden;
}
.accroche { background: rgba(26, 8, 56, .5); padding: 26px 24px; }
.accroche b {
    display: block; font-size: 1.16rem; font-weight: 800; color: #fff;
    line-height: 1.25; margin-bottom: 8px;
}
.accroche span { font-size: .88rem; color: rgba(255, 255, 255, .68); }

/* La signature de marque, répétée au pied de chaque page. */
.signature {
    font-size: 1.02rem; font-weight: 700; color: #fff;
    margin: 0 0 10px; line-height: 1.35;
}

/* ---------- Compteurs --------------------------------------------------- */

.compteurs {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
    margin-top: 58px; background: rgba(255, 255, 255, .16);
    border: 1px solid rgba(255, 255, 255, .16); border-radius: var(--rayon); overflow: hidden;
}
.compteur { background: rgba(26, 8, 56, .42); padding: 22px 20px; }
.compteur b { display: block; font-size: 1.85rem; font-weight: 800; color: #fff; line-height: 1.1; }
.compteur span { font-size: .82rem; color: rgba(255, 255, 255, .66); }

/* ---------- Maquettes d'écran ------------------------------------------- */
/*
   MONTRER LE PRODUIT, PAS SEULEMENT LE DÉCRIRE.
   Le site expliquait par des phrases ce qu'un tableau de bord fait voir en
   une seconde. Ces cadres reproduisent les vrais écrans — mêmes couleurs,
   même cadran, même échelle a cinq niveaux que `/api/ia/echelle/`. Les noms
   et les nombres sont des EXEMPLES : c'est une illustration du produit, pas
   la copie d'un dossier réel.
*/
.ecran {
    border-radius: 14px; overflow: hidden; background: #fff;
    border: 1px solid var(--trait); box-shadow: var(--ombre-forte);
}
.ecran--nuit { background: #150a2e; border-color: rgba(255, 255, 255, .14); }
.ecran__barre {
    display: flex; align-items: center; gap: 7px;
    padding: 10px 14px; background: var(--papier-2);
    border-bottom: 1px solid var(--trait);
}
.ecran--nuit .ecran__barre { background: rgba(255, 255, 255, .05); border-bottom-color: rgba(255, 255, 255, .1); }
.ecran__pastille { width: 9px; height: 9px; border-radius: 50%; background: #e2e0ec; }
.ecran__titre {
    margin-left: 8px; font-size: .74rem; font-weight: 700; letter-spacing: .04em;
    color: var(--encre-3); text-transform: uppercase;
}
.ecran--nuit .ecran__titre { color: rgba(255, 255, 255, .55); }
.ecran__corps { padding: 18px; }

/* Les tuiles de chiffres d'un tableau de bord. */
.tuiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.tuile {
    border: 1px solid var(--trait); border-radius: 11px; padding: 12px 13px;
    background: var(--papier-2);
}
.tuile b { display: block; font-size: 1.32rem; font-weight: 800; line-height: 1.15; }
.tuile span { font-size: .7rem; color: var(--encre-3); }

/* Une ligne « élève à surveiller » : le nom, la mesure, le niveau. */
.ligne-eleve {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 0; border-bottom: 1px solid var(--trait); font-size: .84rem;
}
.ligne-eleve:last-child { border-bottom: 0; }
.ligne-eleve b { flex: 1; font-weight: 700; color: var(--encre); }
.ligne-eleve i { font-style: normal; color: var(--encre-3); font-size: .78rem; }
.niveau {
    padding: 2px 9px; border-radius: 999px; font-size: .68rem; font-weight: 800;
    color: #fff; white-space: nowrap;
}

/* ---------- Le coach ---------------------------------------------------- */
.coach { border-radius: 16px; padding: 22px; background: var(--violet-50); border: 1px solid var(--violet-100); }
.coach--nuit { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .14); }
.coach__nom {
    display: flex; align-items: center; gap: 10px; margin-bottom: 16px;
    font-weight: 800; color: var(--violet-700);
}
.coach--nuit .coach__nom { color: var(--violet-300); }
.coach__nom span {
    width: 34px; height: 34px; border-radius: 10px; display: flex;
    align-items: center; justify-content: center; font-size: 1.1rem;
    background: var(--violet-700); color: #fff;
}
.coach__bloc { margin-bottom: 14px; }
.coach__bloc:last-child { margin-bottom: 0; }
.coach__etiquette {
    font-size: .66rem; font-weight: 800; letter-spacing: .13em;
    text-transform: uppercase; color: var(--violet-600); margin-bottom: 3px;
}
.coach--nuit .coach__etiquette { color: var(--violet-300); }
.coach__texte { font-size: .93rem; color: var(--encre-2); margin: 0; }
.coach--nuit .coach__texte { color: rgba(255, 255, 255, .8); }

/* ---------- L'image de synthèse ----------------------------------------- */
.visuel { width: 100%; height: auto; display: block; }

/* ---------- Grilles et cartes ------------------------------------------- */

.grille { display: grid; gap: 20px; }
.grille--2 { grid-template-columns: repeat(2, 1fr); }
.grille--3 { grid-template-columns: repeat(3, 1fr); }
.grille--4 { grid-template-columns: repeat(4, 1fr); }

.carte {
    background: var(--papier); border: 1px solid var(--trait);
    border-radius: var(--rayon); padding: 26px; box-shadow: var(--ombre);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.carte:hover { transform: translateY(-3px); box-shadow: var(--ombre-forte); border-color: var(--violet-300); }
.carte h3 { margin-bottom: .35em; }
.carte p { color: var(--encre-3); font-size: .95rem; margin-bottom: 0; }

.jeton {
    display: inline-flex; align-items: center; justify-content: center;
    width: 46px; height: 46px; border-radius: 13px; margin-bottom: 16px;
    background: var(--violet-100); color: var(--violet-700); font-size: 1.45rem;
}
.jeton--ambre { background: #fef3c7; color: #b45309; }
.jeton--emeraude { background: #d1fae5; color: #047857; }
.jeton--ciel { background: #dbeafe; color: #1d4ed8; }
.jeton--rose { background: #fce7f3; color: #be185d; }

.carte--nuit {
    background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .14);
    box-shadow: none; color: #fff;
}
.carte--nuit:hover { border-color: rgba(255, 255, 255, .3); box-shadow: none; }
.carte--nuit h3 { color: #fff; }
.carte--nuit p { color: rgba(255, 255, 255, .7); }
.carte--nuit .jeton { background: rgba(255, 255, 255, .12); color: var(--violet-300); }

/* ---------- Listes cochées ---------------------------------------------- */

.liste { list-style: none; padding: 0; margin: 0; }
.liste li {
    position: relative; padding-left: 30px; margin-bottom: 11px;
    color: var(--encre-2); font-size: .95rem;
}
.liste li::before {
    content: "\2713"; position: absolute; left: 0; top: 1px;
    width: 20px; height: 20px; border-radius: 50%;
    background: var(--violet-100); color: var(--violet-700);
    font-size: .72rem; font-weight: 800;
    display: flex; align-items: center; justify-content: center;
}
.section--nuit .liste li { color: rgba(255, 255, 255, .8); }
.section--nuit .liste li::before { background: rgba(255, 255, 255, .14); color: var(--violet-300); }

/* ---------- Deux colonnes ----------------------------------------------- */

.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.duo--penche { grid-template-columns: 1.05fr .95fr; }

/* ---------- Tableau ----------------------------------------------------- */

.tableau { width: 100%; border-collapse: collapse; font-size: .94rem; }
.tableau th, .tableau td { padding: 14px 16px; text-align: left; border-bottom: 1px solid var(--trait); }
.tableau th { font-size: .76rem; letter-spacing: .09em; text-transform: uppercase; color: var(--encre-3); }
.tableau td b { font-weight: 700; }
.tableau tr:last-child td { border-bottom: 0; }
.defilant { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ---------- Étapes numérotées ------------------------------------------- */

.etapes { counter-reset: pas; list-style: none; padding: 0; margin: 0; }
.etapes li { counter-increment: pas; position: relative; padding-left: 54px; margin-bottom: 26px; }
.etapes li::before {
    content: counter(pas); position: absolute; left: 0; top: -2px;
    width: 36px; height: 36px; border-radius: 50%;
    background: linear-gradient(135deg, var(--violet-600), var(--violet-800));
    color: #fff; font-weight: 800; font-size: .95rem;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 6px 16px rgba(109, 40, 217, .3);
}
.etapes h3 { margin-bottom: .2em; }
.etapes p { color: var(--encre-3); font-size: .95rem; margin-bottom: 0; }

/* ---------- Onglets (page Installer) ------------------------------------ */

.onglets { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 26px; }
.onglet {
    padding: 10px 20px; border-radius: 999px; border: 1px solid var(--trait);
    background: #fff; color: var(--encre-2); font-weight: 600; font-size: .92rem;
    cursor: pointer; font-family: inherit; display: inline-flex; align-items: center; gap: 8px;
}
.onglet[aria-selected="true"] {
    background: var(--violet-800); border-color: var(--violet-800); color: #fff;
}

/* ---------- Appel final ------------------------------------------------- */

.appel {
    border-radius: 24px; padding: 54px 44px; text-align: center; color: #fff;
    background: radial-gradient(700px 300px at 50% -30%, #7c3aed 0%, transparent 65%),
                linear-gradient(150deg, var(--violet-900), var(--violet-800));
    box-shadow: var(--ombre-forte);
}
.appel h2 { color: #fff; }
.appel p { color: rgba(255, 255, 255, .78); max-width: 56ch; margin-inline: auto; }
.appel__actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 26px; }

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

.pied { background: var(--nuit); color: rgba(255, 255, 255, .62); padding: 56px 0 30px; font-size: .92rem; }
.pied a { color: rgba(255, 255, 255, .74); }
.pied a:hover { color: #fff; }
.pied__rangee { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 34px; }
.pied h4 { color: #fff; font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 14px; }
.pied ul { list-style: none; padding: 0; margin: 0; }
.pied li { margin-bottom: 9px; }
.pied__bas {
    margin-top: 40px; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, .12);
    display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: .85rem;
}

/* ---------- Petits écrans ----------------------------------------------- */

@media (max-width: 900px) {
    .duo, .duo--penche, .grille--2, .grille--3, .grille--4 { grid-template-columns: 1fr; }
    .compteurs { grid-template-columns: repeat(2, 1fr); }
    .accroches { grid-template-columns: 1fr; }
    .tuiles { grid-template-columns: 1fr; }
    .pied__rangee { grid-template-columns: 1fr 1fr; }
    .section { padding: 60px 0; }
    .duo { gap: 34px; }

    /* LE MENU SE REPLIE. Sept liens côte à côte débordent sous 900 px : ils
       passaient à la ligne et poussaient le logo hors de l'écran. */
    .menu-bouton { display: block; }
    .nav {
        display: none; position: absolute; top: 68px; left: 0; right: 0;
        flex-direction: column; align-items: stretch; gap: 0;
        background: #fff; border-bottom: 1px solid var(--trait);
        padding: 8px 24px 18px; box-shadow: var(--ombre-forte);
    }
    .nav.ouvert { display: flex; }
    .nav a { padding: 13px 0; border-bottom: 1px solid var(--trait); color: var(--encre-2); }
    .nav .bouton { margin-top: 14px; border-bottom: 0; justify-content: center; }
    .entete--sombre .nav { background: var(--violet-900); border-color: rgba(255, 255, 255, .14); }
    .entete--sombre .nav a { border-bottom-color: rgba(255, 255, 255, .12); }
}

@media (max-width: 560px) {
    /* UN BOUTON NE DOIT PAS DÉBORDER DE L'ÉCRAN.
       `.bouton` interdit le retour à la ligne, pour qu'un libellé court ne se
       casse pas en deux. Sur un téléphone étroit, un libellé long devient
       alors plus large que la page entière : mesuré, « Découvrez le détail,
       métier par métier » faisait 340 px sur un écran de 319. Sous cette
       largeur, on autorise donc le retour à la ligne. */
    .bouton { white-space: normal; text-align: center; max-width: 100%; }
}

@media (max-width: 520px) {
    .compteurs { grid-template-columns: 1fr; }
    .pied__rangee { grid-template-columns: 1fr; }
    .appel { padding: 40px 24px; }
    .heros { padding: 54px 0 68px; }
}

/* ---------- Impression --------------------------------------------------- */

@media print {
    .entete, .pied, .heros__actions, .appel__actions { display: none; }
    body { color: #000; }
    .section--nuit, .heros, .appel { background: none !important; color: #000; }
}