/*
 * home.css — la page d'accueil marketing d'atlavo.app (story 9.6).
 *
 * 🔒 AUCUNE ORIGINE TIERCE. Pas d'`@import`, pas d'`url()` distante, pas une
 *    seule police téléchargée. `ThirdPartyAssetsTest` ouvre cette feuille dans
 *    sa seconde passe et la lit, précisément parce que la fuite la plus discrète
 *    du 12/08/2026 était un `@import` de Google Fonts en première ligne de
 *    `style.css`, invisible du HTML servi.
 *
 * 🔒 PILE SYSTÈME UNIQUEMENT. Une police de marque coûterait soit un domaine
 *    tiers, soit 150 Ko sur la page qui promet d'être rapide.
 *
 * 🔒 CETTE FEUILLE EST LA SEULE DE LA PAGE (dette D9.6-1, soldée le 18/08/2026).
 *    `index.php` pose `$PAGE_NO_TEMPLATE_CSS`, donc `/style.css` n'est PAS
 *    chargée ici. Avant, elle l'était, et cette feuille en DÉFAISAIT trois
 *    règles :
 *      · `body { overflow: hidden; height: 100% }` ;
 *      · `body { background: url("src/img/bg.jpg") }`, une photographie de forêt
 *        venue du gabarit, sans rapport avec le produit ;
 *      · `footer { position: fixed; bottom: 0 }`, une barre sombre qui flotterait
 *        en permanence au-dessus du contenu.
 *    Les trois contre-règles étaient des sélecteurs de TYPE nus, qui ne gagnent
 *    que par l'ordre du document : à spécificité égale, le dernier lu l'emporte.
 *    Un `html body { overflow: hidden }` ou un `!important` ajouté un jour dans
 *    la feuille du gabarit aurait donc repris le dessus, EN PRODUCTION, sans
 *    qu'aucun test ne bouge. On supprime la classe de défaut au lieu de la
 *    contrer : il n'y a plus rien à défaire.
 *    On ne touche toujours PAS à `style.css` : elle habille les cinq autres
 *    pages du site.
 *
 * ⚠️ CE QUE CETTE FEUILLE DOIT DONC PORTER ELLE-MÊME. Le pied de page rendu par
 *    `templates/footer.php` est COMMUN à tout le site et il était habillé par
 *    `/style.css`. Ses règles sont reprises telles quelles en section 7, plus la
 *    remise à zéro universelle des marges dont toute la mise en page dépendait.
 *    Le sélecteur de langue, lui, porte son propre `<style>` EN LIGNE dans
 *    `templates/footer.php` : il n'a jamais rien tenu de `/style.css` et n'est
 *    donc pas concerné.
 *
 * ⚠️ LES CHEMINS SONT ABSOLUS. Cette feuille est servie depuis `/home/home.css`,
 *    donc un chemin relatif se résoudrait depuis `/home/` et non depuis la
 *    racine. Il n'y a aujourd'hui aucun `url()` ici, et s'il en naissait un il
 *    devra commencer par `/`.
 *
 * Charte : accent unique `#5946B2` (l'indigo lu dans
 * `packages/verticals/parking.json`), les cinq teintes de la légende comme motif
 * graphique, `prefers-color-scheme` sur les deux thèmes, aucune animation.
 */

/* ══════════════════════════════════════════════════════════════════════
   0. BASE DU DOCUMENT
   ══════════════════════════════════════════════════════════════════════ */

/* ⚠️ REMISE À ZÉRO REPRISE DE `/style.css`, ET ELLE N'EST PAS DÉCORATIVE.
   Toute la mise en page de cette feuille a été écrite AU-DESSUS de ce `*`, donc
   sans lui les marges par défaut du navigateur reviennent là où aucune règle
   n'en pose : la marge de 8 points du `body`, les marges verticales des `<p>`
   qui n'en déclarent pas (le remerciement des crédits), le retrait des `<ul>`.
   Mesuré avant le retrait de `/style.css` plutôt que supposé.
   Le sélecteur est celui du gabarit, à l'identique : `*` seul, sans les
   pseudo-éléments. Y ajouter `::before` et `::after` aurait été « mieux » et
   aurait changé le rendu, ce qui n'est pas ce qu'on veut prouver ici. */
* {
    padding: 0;
    margin: 0;
}

/* Les deux hauteurs à 100 % venaient de `/style.css` (`html`, `body`). Elles ne
   servaient qu'à son `overflow: hidden` : ici on veut l'inverse, une page qui
   défile. `min-height` garde un fond pleine hauteur sur un écran plus long que
   le contenu. */
html {
    height: auto;
    min-height: 100%;
}

body {
    height: auto;
    min-height: 100%;
    background: var(--home-bg);
    color: var(--home-fg);
    font: 400 17px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        "Helvetica Neue", Arial, "Noto Sans", sans-serif;
    -webkit-text-size-adjust: 100%;
}

/* Les titres du gabarit. `/style.css` posait `h1..h6 { font-weight: bold }` :
   c'est le défaut du navigateur, mais on le reprend parce que la remise à zéro
   ci-dessus est reprise elle aussi, et qu'un jeu partiel est plus difficile à
   relire qu'un jeu complet. */
h1, h2, h3, h4, h5, h6 {
    font-weight: bold;
}

/* 🐞 LE SÉLECTEUR DE LANGUE FLOTTAIT PAR-DESSUS LE TEXTE (revue 9.6).
   `templates/footer.php` le pose en `position: fixed` en bas à droite, sur
   toutes les pages du site. Sur une page courte cela ne se voit pas. Sur une
   page d'accueil longue, la pastille sombre de onze drapeaux passait par-dessus
   le titre du deuxième bloc, mesuré sur le rendu.
   On le remet DANS LE FLUX pour cette page seulement, où il devient un pied de
   choix de langue au lieu d'un cache-titre. Le sélecteur reste FIXE partout
   ailleurs, où les pages sont courtes.
   ⚠️ La règle du gabarit vit dans un `<style>` EN LIGNE, écrit APRÈS cette
   feuille : à spécificité égale, c'est lui qui gagnerait. On monte donc d'un
   cran (`main.home ~ …`), pas par confort mais par nécessité. */
main.home ~ .language-switcher-fixed {
    position: static;
    width: max-content;
    max-width: calc(100% - 32px);
    margin: 26px auto 34px;
    flex-wrap: wrap;
    justify-content: center;
}

/* ══════════════════════════════════════════════════════════════════════
   1. JETONS
   ══════════════════════════════════════════════════════════════════════ */

:root {
    --home-accent: #5946B2;
    --home-accent-ink: #ffffff;
    /* Le fond du bloc de marque. Plus sombre que l'accent parce qu'il porte du
       TEXTE : recalculé, pas choisi à l'œil. Blanc sur `#4A379E` rend 9,01:1, et
       le gris clair des libellés 6,20:1, tous deux au-dessus des 4,5:1. */
    --home-brand-bg: #4A379E;
    --home-brand-ink: #ffffff;
    --home-brand-muted: #d8d2f4;
    --home-bg: #ffffff;
    --home-bg-soft: #f6f5fb;
    --home-fg: #16161a;
    --home-muted: #5c5c68;
    --home-line: #e4e2ee;
    --home-shadow: 0 18px 48px rgba(24, 20, 54, 0.14);
    --home-radius: 18px;
    /* La pastille du lien de boutique (story 12.2). Encre claire sur fond
       quasi noir : 18,85:1, très au-dessus des 4,5:1, et c'est la teinte du
       badge officiel Apple, que ce lien remplacera à l'identique le jour où
       l'asset sera vendorisé. */
    --home-store-bg: #111114;
    --home-store-bg-hover: #2a2a32;
    --home-store-ink: #ffffff;
}

@media (prefers-color-scheme: dark) {
    :root {
        --home-accent: #A896F5;
        --home-accent-ink: #16121f;
        --home-brand-bg: #2E2360;
        --home-brand-ink: #f1eeff;
        --home-brand-muted: #bdb3e8;
        --home-bg: #0f0f13;
        --home-bg-soft: #171722;
        --home-fg: #f3f2f7;
        --home-muted: #a7a6b4;
        --home-line: #2b2a38;
        --home-shadow: 0 18px 48px rgba(0, 0, 0, 0.5);
        /* Inversée, comme le badge officiel : la pastille noire disparaîtrait
           sur un fond `#0f0f13`. Encre `#101014` sur `#f3f2f7` rend 17,04:1. */
        --home-store-bg: #f3f2f7;
        --home-store-bg-hover: #d9d7e4;
        --home-store-ink: #101014;
    }
}

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

.home {
    display: block;
    color: var(--home-fg);
    background: var(--home-bg);
}

.home__inner {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 22px;
}

/* ══════════════════════════════════════════════════════════════════════
   2. TYPOGRAPHIE
   ══════════════════════════════════════════════════════════════════════ */

.home__h1 {
    margin: 0 0 18px;
    font-size: clamp(2.2rem, 6vw, 3.6rem);
    line-height: 1.06;
    letter-spacing: -0.022em;
    font-weight: 800;
}

.home__h2 {
    margin: 0 0 14px;
    font-size: clamp(1.6rem, 3.6vw, 2.4rem);
    line-height: 1.14;
    letter-spacing: -0.016em;
    font-weight: 750;
}

.home__lead {
    margin: 0 0 30px;
    font-size: clamp(1.08rem, 2.1vw, 1.32rem);
    line-height: 1.5;
    color: var(--home-muted);
    max-width: 34em;
}

.home__section-lead,
.home__section-body {
    margin: 0 0 26px;
    font-size: 1.08rem;
    color: var(--home-muted);
    max-width: 40em;
}

.home__note {
    margin: 26px 0 0;
    font-size: 0.95rem;
    color: var(--home-muted);
    max-width: 44em;
}

/* ══════════════════════════════════════════════════════════════════════
   2 bis. LA PORTE D'ENTRÉE DU COMPTE (story 9.16)
   ══════════════════════════════════════════════════════════════════════ */

/* 🚪 UN SEUL LIEN, EN HAUT À DROITE, ET SANS UNE LIGNE DE SCRIPT.
   Il remplace la barre de compte du gabarit (`#auth-nav`), qui n'était pas
   rendue ici : elle vit du côté « scripts » de `$PAGE_NO_SCRIPTS` parce qu'elle
   est écrite en jQuery et stylée par Bootstrap. Le motif complet est dans
   `index.php`, à l'endroit où le lien est écrit.

   ⚠️ IL EST DISCRET, PAS INVISIBLE. Le contraste du texte est celui de
   `--home-fg`, pas de `--home-muted` : cette page a un verrou de contraste
   (`HomePageTest`) et, surtout, un lien qu'on ne voit pas ne répare pas un
   défaut dont l'énoncé est « je ne vois pas où me connecter ». La bordure lui
   donne une surface cliquable franche, ce qui compte sur un écran tactile.

   Le bloc reste dans le FLUX, il ne flotte pas : un `position: fixed` aurait
   recouvert le contenu au défilement sur mobile, et un `absolute` serait passé
   sous le halo du hero. Le hero commence juste dessous et son propre rembourrage
   supérieur absorbe la différence. */
.home__account-bar {
    display: flex;
    justify-content: flex-end;
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    padding: 14px 22px 0;
}

.home__account {
    display: inline-block;
    padding: 8px 18px;
    border: 1px solid var(--home-line);
    border-radius: 999px;
    color: var(--home-fg);
    background: var(--home-bg);
    font-size: 0.98rem;
    font-weight: 600;
    text-decoration: none;
}

.home__account:hover,
.home__account:focus-visible {
    border-color: var(--home-accent);
    color: var(--home-accent);
}

/* ══════════════════════════════════════════════════════════════════════
   3. HERO
   ══════════════════════════════════════════════════════════════════════ */

/* L'accent de marque était presque absent d'une page blanche de bout en bout.
   Le halo du hero le pose sans jamais passer sous le texte : le dégradé s'arrête
   bien avant la colonne de gauche, et l'encre du titre reste sur `--home-bg`. */
.home__hero {
    padding: clamp(34px, 6vw, 78px) 0 clamp(30px, 5vw, 60px);
    background:
        radial-gradient(90% 120% at 88% -10%, rgba(89, 70, 178, 0.16) 0%, rgba(89, 70, 178, 0) 58%),
        radial-gradient(120% 96% at 8% -4%, var(--home-bg-soft) 0%, var(--home-bg) 62%);
}

.home__hero-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(30px, 5vw, 54px);
    align-items: center;
}

@media (min-width: 900px) {
    .home__hero-grid {
        grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.18fr);
    }
}

.home__wordmark {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 24px;
    font-size: 1.02rem;
}

/* LE LOGOTYPE (18/08/2026). Blason plus lettrage, en un seul SVG inliné, produit
   par `packages/brand/src/logotype_build.py` et copié tel quel dans `home/img/`.
   Avant, le blason était redessiné ici et le mot « Atlavo » composé en typographie
   système, donc la marque changeait d'une machine à l'autre.

   La taille se pilote par la HAUTEUR, jamais par la largeur : les proportions du
   verrouillage sont définies dans le générateur, et `width: auto` les laisse
   décider. Poser une largeur ici rouvrirait la porte à une déformation, ce que la
   charte interdit explicitement.

   `color` n'est PAS posé : le lettrage est peint en `currentColor` et hérite donc
   de la couleur du texte, ce qui le rend juste dans les deux thèmes sans seconde
   variante. Le blason, lui, porte ses couleurs de marque en dur, comme il doit. */
.home__lockup {
    flex: 0 0 auto;
    display: inline-flex;
}

.home__lockup svg {
    display: block;
    height: 30px;
    width: auto;
}

.home__wordmark-vertical {
    color: var(--home-muted);
    font-weight: 500;
}

.home__cta-wrap {
    margin: 0 0 10px;
}

.home__cta {
    display: inline-block;
    padding: 15px 30px;
    border-radius: 999px;
    background: var(--home-accent);
    color: var(--home-accent-ink);
    font-size: 1.06rem;
    font-weight: 700;
    text-decoration: none;
    box-shadow: 0 8px 22px rgba(89, 70, 178, 0.28);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.home__cta:hover,
.home__cta:focus-visible {
    transform: translateY(-1px);
    box-shadow: 0 12px 28px rgba(89, 70, 178, 0.34);
    color: var(--home-accent-ink);
    text-decoration: none;
}

.home__cta-note {
    margin: 0;
    font-size: 0.95rem;
    color: var(--home-muted);
}

/* Le lien de boutique (story 12.2). Les deux règles `.home__stores` qui
   vivaient ici avaient été RETIRÉES le 18/08/2026 avec la mention qu'elles
   habillaient, et non « réservées » comme l'affirmaient l'en-tête d'`index.php`
   et le dossier de conception : elles sont réécrites, pas rallumées.

   ⚠️ ELLES N'HABILLENT UN ÉLÉMENT QUE SOUS LA GARDE. Le bloc n'est émis que si
   la configuration servie porte `stores.app_store_url`. Une règle qui ne
   s'applique à rien est invisible et devient fausse en silence, mais celle-ci a
   un élément dès que la garde est ouverte, ce qui est le cas en production
   depuis le 21/08.

   La forme reprend celle du badge officiel Apple (pastille sombre, encre
   claire, inversée en thème sombre) pour que la pose de l'asset, quand Mickaël
   l'aura téléchargé chez Apple, soit un remplacement de balise et non une
   refonte de mise en page. */
.home__stores {
    margin: 22px 0 0;
}

.home__store {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 11px 22px;
    border-radius: 10px;
    background: var(--home-store-bg);
    color: var(--home-store-ink);
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
}

.home__store:hover,
.home__store:focus-visible {
    background: var(--home-store-bg-hover);
    color: var(--home-store-ink);
    text-decoration: none;
}

/* 🤖 STORY 15.2 : « OBTENIR SUR ANDROID », sous la garde de `$androidUrl`.
   Le lien mène à la page `/{locale}/android`, jamais à l'APK, mais il porte la
   même pastille sombre que le lien App Store (`.home__store`) pour que les deux
   canaux d'obtention se lisent comme une paire. Un talon de marge le pose sous
   le lien App Store quand les deux gardes sont ouvertes. */
.home__android {
    margin: 10px 0 0;
}

.home__hero-figure {
    margin: 0;
}

.home__hero-img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--home-radius);
    border: 1px solid var(--home-line);
    box-shadow: var(--home-shadow);
}

/* Sur téléphone, la capture 16:9 réduite à 350 points rendait les objets trop
   petits pour que la couleur se lise, c'est-à-dire qu'elle cessait de démontrer
   la phrase juste au-dessus. On la RECADRE au lieu de la rétrécir : même image,
   même poids, objets deux fois plus gros. Mesuré à 390 points, le hero entier
   reste au-dessus du pli. */
@media (max-width: 899px) {
    .home__hero-img {
        aspect-ratio: 4 / 3;
        object-fit: cover;
        object-position: 46% 48%;
    }
}

.home__hero-caption {
    margin-top: 10px;
    font-size: 0.85rem;
    color: var(--home-muted);
}

/* ══════════════════════════════════════════════════════════════════════
   4. SECTIONS
   ══════════════════════════════════════════════════════════════════════ */

.home__section {
    padding: clamp(46px, 7vw, 88px) 0;
    border-top: 1px solid var(--home-line);
}

.home__section--colors,
.home__section--premium {
    background: var(--home-bg-soft);
}

/* ── Le bloc de marque, pleine largeur, en indigo ───────────────────── */

.home__section--brand {
    background: var(--home-brand-bg);
    color: var(--home-brand-ink);
    border-top: 0;
    border-bottom: 0;
}

.home__section--brand .home__h2 {
    color: var(--home-brand-ink);
}

.home__section--brand .home__figure-value {
    color: var(--home-brand-ink);
}

/* ⚠️ `.home__section--brand .home__section-body` A ÉTÉ RETIRÉ DE CE SÉLECTEUR
   LE 01/09/2026, ET C'EST VOULU. Le bandeau indigo ne porte plus de paragraphe
   depuis que `home.world.body` est rendue par la section « la boucle » : la
   règle ne pouvait plus rien atteindre. Une déclaration qui ne peut plus
   s'appliquer se retire, elle ne se garde pas « au cas où », sinon elle finit
   par habiller un jour un élément qu'on n'avait pas prévu. */
.home__section--brand .home__figure-label {
    color: var(--home-brand-muted);
}

/* Le bandeau ne porte plus que DEUX chiffres, le délai de propagation étant
   passé dans la boucle qu'il mesure. La grille suit le contenu au lieu de
   laisser une troisième colonne vide.
   🔒 AUCUN `!important` ET AUCUNE DÉPENDANCE À L'ORDRE DU DOCUMENT : ce
   sélecteur porte deux classes contre une, donc il gagne par SPÉCIFICITÉ où
   qu'il soit écrit. La leçon du 18/08 (dette D9.6-1) était exactement
   celle-là : une neutralisation qui ne gagne que par l'ordre se fait reprendre
   au premier ajout. */
@media (min-width: 700px) {
    .home__section--brand .home__figures {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* ── Légende des cinq états ────────────────────────────────────────── */

.home__legend {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
}

@media (min-width: 760px) {
    .home__legend {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.home__legend-row {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 16px 18px;
    background: var(--home-bg);
    border: 1px solid var(--home-line);
    border-radius: 14px;
    color: var(--home-state);
    /* L'encre du glyphe suit le THÈME, comme la pastille. Les deux valeurs
       arrivent de `index.php`, où elles sont CALCULÉES depuis la luminance de
       chaque teinte : elles ne sont écrites nulle part à la main. */
    --home-ink: var(--home-state-ink);
}

@media (prefers-color-scheme: dark) {
    .home__legend-row {
        color: var(--home-state-dark);
        --home-ink: var(--home-state-ink-dark);
    }
}

/* 🐞 LES CINQ GLYPHES ÉTAIENT BLANCS EN DUR, DONC ILLISIBLES EN MODE SOMBRE :
   2,74, 1,86, 2,99, 2,57 et 2,68 pour un seuil de 4,5:1, cinq échecs sur cinq,
   juste sous la phrase qui promet en onze langues que chaque état porte aussi
   son symbole. L'encre est maintenant celle des deux extrêmes qui contraste le
   plus avec SA pastille, teinte par teinte et thème par thème. */
.home__glyph {
    fill: var(--home-ink);
}

.home__glyph--line {
    fill: none;
    stroke: var(--home-ink);
}

.home__legend-visuals {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.home__swatch {
    display: block;
    width: 48px;
    height: 48px;
}

.home__pattern {
    display: block;
    width: 48px;
    height: 9px;
}

.home__legend-text {
    display: block;
    padding-top: 2px;
}

.home__legend-label {
    display: block;
    font-size: 1.06rem;
    font-weight: 700;
    color: var(--home-fg);
}

.home__legend-sense {
    display: block;
    margin-top: 3px;
    font-size: 0.95rem;
    line-height: 1.45;
    color: var(--home-muted);
}

/* ── Chiffres ──────────────────────────────────────────────────────── */

.home__figures {
    list-style: none;
    margin: 0 0 26px;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 22px;
}

@media (min-width: 700px) {
    .home__figures {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 28px;
    }

    /* ⚠️ RÉSERVE DE HAUTEUR CONSERVÉE, MAIS ELLE N'EST PLUS LE CORRECTIF.
       Une valeur qui passait sur deux lignes (« Moins d'une minute ») pendant
       que ses deux voisines tenaient sur une désalignait la rangée. La réserve
       corrigeait l'alignement sans corriger le déséquilibre : deux chiffres
       courts et une phrase longue, ce n'est pas une rangée de chiffres.
       Le vrai correctif est éditorial et il est ailleurs : la valeur est
       devenue « 2 minutes » et la nuance est passée dans le libellé. Cette
       réserve reste pour les langues où le mot « minutes » est plus long. */
    .home__figure-value {
        min-height: 2.1em;
    }

    /* La colonne de chiffres du bloc hors ligne vit à côté du téléphone : elle
       ne peut plus prendre toute la largeur. */
    .home__figures--stack {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 18px;
    }
}

.home__figure {
    display: block;
}

.home__figure-value {
    display: block;
    font-size: clamp(1.9rem, 4.6vw, 3rem);
    line-height: 1.05;
    letter-spacing: -0.02em;
    font-weight: 800;
    color: var(--home-accent);
}

.home__figure-label {
    display: block;
    margin-top: 8px;
    font-size: 0.98rem;
    color: var(--home-muted);
    max-width: 22em;
}

.home__figures--compact .home__figure-value {
    font-size: clamp(1.6rem, 3.4vw, 2.2rem);
}

/* ── Bloc à deux colonnes, et le téléphone ─────────────────────────── */

.home__split {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(30px, 5vw, 56px);
    align-items: center;
}

@media (min-width: 900px) {
    .home__split {
        grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
    }
}

.home__split-copy > :last-child {
    margin-bottom: 0;
}

.home__split-figure {
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Le cadre du téléphone est composé ICI, en CSS, et jamais en image : une
   photographie de téléphone vieillit au premier changement de modèle, pèse, et
   ne sait pas suivre le thème. L'image à l'intérieur est une capture BRUTE de
   l'application, sans habillage marketing incrusté. */
.home__phone {
    width: min(292px, 74vw);
    padding: 9px;
    border-radius: 44px;
    background: #101014;
    box-shadow: var(--home-shadow), 0 0 0 1px rgba(255, 255, 255, 0.06) inset;
}

.home__phone-screen {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 36px;
}

/* ── Puces ─────────────────────────────────────────────────────────── */

.home__points {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 12px;
    max-width: 46em;
}

.home__points li {
    position: relative;
    padding-left: 26px;
    font-size: 1rem;
    line-height: 1.5;
}

.home__points li::before {
    content: "";
    position: absolute;
    left: 4px;
    top: 0.62em;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--home-accent);
}

/* ── La boucle (story 12.9) ────────────────────────────────────────── */

/* Trois temps numérotés, et le numéro vient du navigateur : c'est une `<ol>`,
   donc l'ordre est porté par le balisage et annoncé par un lecteur d'écran, pas
   dessiné. Aucun composant neuf, aucune couleur neuve : les jetons `--home-*`
   déjà déclarés plus haut portent le mode sombre sans une seconde
   déclaration. */
.home__loop {
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: home-loop;
    display: grid;
    gap: 18px;
    max-width: 46em;
}

.home__loop-step {
    counter-increment: home-loop;
    position: relative;
    padding-left: 44px;
    font-size: 1.06rem;
    line-height: 1.5;
    color: var(--home-muted);
}

.home__loop-step::before {
    content: counter(home-loop);
    position: absolute;
    left: 0;
    top: 0;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.92rem;
    font-weight: 700;
    /* 🔒 L'ENCRE N'EST PAS ÉCRITE EN DUR, ET C'EST UNE LEÇON PAYÉE. Les cinq
       glyphes de la légende portaient `#ffffff` en dur et échouaient TOUS au
       contraste en mode sombre (2,74 à 2,99 pour un seuil de 4,5:1). Le couple
       `--home-accent` / `--home-accent-ink` est déclaré dans les deux thèmes et
       c'est le même que celui du bouton d'appel à l'action. */
    color: var(--home-accent-ink);
    background: var(--home-accent);
}

/* Le troisième temps porte le SEUL chiffre de la section, et c'est celui du
   verrou du délai. Il est composé de la même façon que les chiffres du bandeau
   (valeur forte, libellé atténué), en plus petit : c'est une phrase, pas une
   statistique de plus. */
.home__loop-value {
    display: block;
    font-size: 1.5rem;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.01em;
    color: var(--home-accent);
}

.home__loop-label {
    display: block;
    margin-top: 4px;
}

/* ── Villes (story 12.7) ───────────────────────────────────────────── */

/* Des liens, rien que des liens : la section est une liste de destinations, pas
   un composant neuf. Elle emprunte les jetons de la charte déjà déclarés plus
   haut, donc elle suit le mode sombre sans une seconde déclaration. */
.home__towns {
    list-style: none;
    margin: 24px 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.home__town {
    display: inline-block;
    padding: 10px 16px;
    border: 1px solid var(--home-line);
    border-radius: 12px;
    background: var(--home-bg-soft);
    color: var(--home-fg);
    font-size: 1rem;
    text-decoration: none;
}

.home__town:hover,
.home__town:focus {
    border-color: var(--home-accent);
    color: var(--home-accent);
}

/* ── Premium ───────────────────────────────────────────────────────── */

.home__price {
    margin: 0 0 6px;
    font-size: clamp(1.5rem, 3.4vw, 2.1rem);
    font-weight: 800;
    letter-spacing: -0.018em;
    color: var(--home-accent);
}

.home__price-note {
    margin: 0 0 30px;
    font-size: 0.92rem;
    color: var(--home-muted);
}

.home__benefits {
    list-style: none;
    margin: 0 0 26px;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
    max-width: 52em;
}

@media (min-width: 760px) {
    .home__benefits {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.home__benefits li {
    padding: 20px 22px;
    background: var(--home-bg);
    border: 1px solid var(--home-line);
    border-radius: 14px;
}

.home__benefits strong {
    display: block;
    margin-bottom: 6px;
    font-size: 1.08rem;
    font-weight: 700;
}

.home__benefits span {
    display: block;
    font-size: 0.98rem;
    line-height: 1.5;
    color: var(--home-muted);
}

.home__free-note {
    margin: 0 0 30px;
    padding: 16px 20px;
    border-left: 4px solid var(--home-accent);
    background: var(--home-bg);
    border-radius: 0 12px 12px 0;
    font-size: 1rem;
    max-width: 52em;
}

/* Le chemin d'achat de la section Premium (story 12.2).

   ⚠️ IL EST DÉLIBÉRÉMENT MOINS FORT QUE « OUVRIR LA CARTE ». Deux pastilles
   pleines côte à côte se disputeraient l'attention, et la carte gratuite reste
   l'entrée du produit : le lien d'abonnement est souligné, à l'accent, avec une
   cible de 44 points de haut pour rester confortable au doigt. Aucune animation
   (sobriété AC10g), aucun prix barré, aucun compte à rebours. */
.home__subscribe-wrap {
    margin: 0 0 6px;
}

.home__subscribe {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    color: var(--home-accent);
    font-size: 1.06rem;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 4px;
}

.home__subscribe:hover,
.home__subscribe:focus-visible {
    color: var(--home-accent);
    text-decoration: underline;
}

.home__subscribe-note {
    margin: 0 0 26px;
    font-size: 0.95rem;
    color: var(--home-muted);
}

.home__cta-wrap--secondary {
    margin: 0;
}

/* ══════════════════════════════════════════════════════════════════════
   5. COLOPHON
   ══════════════════════════════════════════════════════════════════════ */

.home__colophon {
    padding: 40px 0 56px;
    border-top: 1px solid var(--home-line);
    font-size: 0.9rem;
    color: var(--home-muted);
}

.home__colophon-title {
    margin: 0 0 10px;
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--home-muted);
}

.home__colophon-line {
    margin: 0 0 10px;
    max-width: 54em;
}

.home__colophon-links {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 18px;
    margin: 0 0 14px;
}

.home__colophon a {
    color: var(--home-accent);
}

.home__colophon-details summary {
    cursor: pointer;
}

.home__colophon-details ul {
    margin: 10px 0 6px;
    padding-left: 20px;
}

.home__colophon-details li {
    margin: 4px 0;
}

/* ══════════════════════════════════════════════════════════════════════
   6. ACCESSIBILITÉ
   ══════════════════════════════════════════════════════════════════════ */

.home a:focus-visible,
.home summary:focus-visible {
    outline: 3px solid var(--home-accent);
    outline-offset: 3px;
    border-radius: 4px;
}

/* Aucune animation gadget sur cette page. Les deux seules transitions sont
   celles du bouton, et elles sont retirées pour qui demande moins de mouvement. */
@media (prefers-reduced-motion: reduce) {
    .home__cta {
        transition: none;
    }

    .home__cta:hover,
    .home__cta:focus-visible {
        transform: none;
    }
}

/* ══════════════════════════════════════════════════════════════════════
   7. LE PIED DE PAGE PARTAGÉ, PORTÉ DEPUIS `/style.css`
   ══════════════════════════════════════════════════════════════════════

   🔒 C'EST LE COÛT RÉEL DE `$PAGE_NO_TEMPLATE_CSS`, ET IL EST PAYÉ ICI.
      `templates/footer.php` est rendu par cette page comme par toutes les
      autres, mais son habillage vivait dans la feuille du gabarit. Sans ces
      règles, le pied de page de la seule page d'accueil deviendrait du texte
      noir sur fond blanc, à la taille du corps, ce qui se verrait immédiatement
      et serait donc réparé, mais qui n'a aucune raison d'arriver.

   ⚠️ CE QUI VIENT D'OÙ, VÉRIFIÉ AVANT DE PORTER QUOI QUE CE SOIT.
      Le pied de page du site est habillé par DEUX sources, pas une :
        · `/style.css` pour le bandeau sombre et ses liens, reproduit ci-dessous
          règle pour règle ;
        · un `<style>` EN LIGNE dans `templates/footer.php` pour le SÉLECTEUR DE
          LANGUE, qui n'a jamais rien tenu de `/style.css`. Il n'est donc pas
          porté, et son retrait n'était pas en jeu.
      Le rendu a été comparé AVANT et APRÈS dans un navigateur, en style calculé
      et en capture pleine page, à 1280 et à 390 points de large.

   🔴 CE QUI N'EST DÉLIBÉRÉMENT PAS PORTÉ, ET C'EST TOUT L'OBJET DE L'OPÉRATION :
        · `footer { position: fixed; bottom: 0 }`, la barre flottante,
        · `body { overflow: hidden; height: 100% }` et la photographie de fond ;
        · `.footer-distributed .footer-right` et ses liens, qui habillent une
          colonne que `templates/footer.php` ne rend PAS. Porter du style pour
          un élément inexistant, c'est écrire une règle que rien ne peut
          contredire.
      Les sélecteurs restent NUS, comme dans le gabarit, et c'est sans risque
      maintenant : plus aucune autre feuille ne les dispute sur cette page. */

.footer-distributed {
    background-color: #292c2f;
    box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.12);
    box-sizing: border-box;
    width: 100%;
    text-align: left;
    font: normal 16px sans-serif;
    padding: 5px 40px;
    margin-bottom: 0;
}

.footer-distributed .footer-left {
    margin-top: 10px;
}

.footer-distributed .footer-left p {
    color: #8f9296;
    font-size: 14px;
    margin: 0;
}

.footer-distributed p.footer-links {
    font-size: 14px;
    font-weight: bold;
    color: #ffffff;
    margin: 0 0 10px;
    padding: 0;
}

.footer-distributed p.footer-links a {
    display: inline-block;
    line-height: 1.8;
    text-decoration: none;
    color: inherit;
}

/* Le `!important` est celui du gabarit, repris tel quel. Il n'est plus utile
   ici (plus aucune autre feuille ne peint ce texte), mais le retirer aurait été
   une modification de plus à prouver, dans une opération dont la promesse est
   que le pied de page ne bouge pas d'un pixel. */
.footer-company-name, .footer-company-name * * {
    color: #8f9296 !important;
    font-size: 11px;
    font-weight: normal;
}

/* La bascule mobile du gabarit, aux MÊMES bornes (`max-width: 640px` ou
   `max-height: 480px`), sans la ligne `footer { position: static }` qui n'a plus
   d'objet.
   ⚠️ LE `padding-bottom` DU CORPS EST PORTÉ, ET IL MÉRITE SON EXPLICATION. Il
   existait pour ménager une place de défilement sous le pied de page FIXE sur
   iPhone. Ce pied de page n'est plus fixe ici, donc cette réserve ne sert plus
   à rien, mais elle était bel et bien appliquée à la page d'accueil avant ce
   changement, et la retirer aurait fait remonter la fin de page de 80 points.
   On porte à l'identique, on ne réforme pas dans la même passe. Elle pourra
   partir le jour où quelqu'un le décidera en connaissance de cause. */
@media (max-width: 640px), (max-height: 480px) {
    .footer-distributed .footer-left {
        text-align: center;
    }

    .footer-distributed .footer-left p.footer-links {
        line-height: 1.8;
    }

    .footer-distributed {
        padding: 10px 15px !important;
        margin-bottom: 0 !important;
        padding-bottom: calc(10px + env(safe-area-inset-bottom)) !important;
    }

    body {
        padding-bottom: calc(80px + env(safe-area-inset-bottom));
    }
}