/*
 * landings.css — pages d'atterrissage SEO par ville (story 2.4).
 * Page LÉGÈRE (aucune lib carte). Classes neutres `.landing-*` (renommables).
 * Mobile-first, lisible. Tokens d'état alignés sur la légende (couleurs injectées
 * inline depuis packages/verticals/parking.json — jamais de hex de marque en dur ici).
 *
 * ── LES CINQ FAMILLES QUE CETTE FEUILLE HABILLE, ET IL FAUT LE SAVOIR ──────
 *
 * ⚠️ ELLE NE SERT PAS QUE LES LANDINGS. Mesuré sur le source le 01/09/2026, six
 *    SITES DE LIAISON dans cinq fichiers : `landings/town.php` (la ville ET sa branche 404),
 *    `landings/country.php` (le hub pays de la 12.7), `legal.php` (les trois
 *    documents légaux, donc 33 URL), `support.php` et `odbl.php`. Toute
 *    couleur posée ici part sur les cinq familles à la fois. C'est ce qui rend
 *    cette feuille bonne pour la charte, et ce qui oblige à ne rien y écrire
 *    « juste pour une page ».
 *
 * ── LA CHARTE, DEPUIS LA STORY 12.8 (S7, AC3) ──────────────────────────────
 *
 * 🎨 CE QUE CETTE FEUILLE PEIGNAIT AVANT, ET D'OÙ ÇA VENAIT. Le bouton
 *    principal des cinq familles (« Voir la carte », « Retour à la carte ») était
 *    un VERT `#1b873f`. Ce vert n'était pas une couleur de marque : c'est la
 *    teinte de l'état `free` de la légende (`packages/verticals/parking.json`),
 *    empruntée à la donnée pour peindre un bouton. Les liens étaient en
 *    `#1565c0`, la teinte de l'état `disc`. Le produit peignait donc ses gestes
 *    avec le vocabulaire de ses données, pendant que l'accueil, la 404 et les
 *    pages de compte portent l'indigo `#5946B2`.
 *    ⚠️ Le vert `#38e23e` du gabarit MLFloriKit, lui, n'a JAMAIS peint ces
 *       surfaces : il ne vivait que dans `theme-color`, et la 12.1 l'en a
 *       chassé. Mesuré, pas supposé, et refusé par NOM dans le verrou de la
 *       12.8 pour qu'il ne revienne par aucune des deux portes.
 *
 * 🔒 POURQUOI LES JETONS SONT RECOPIÉS ICI, et ce qui ferme la dérive : même
 *    motif qu'`account/account.css` et `notfound/notfound.css`. `home/home.css`
 *    n'est chargée que par l'accueil, qui renonce à `/style.css` : la lier ici
 *    importerait sa mise en page entière. Il n'existe toujours aucune feuille
 *    de jetons partagée, donc les valeurs sont RECOPIÉES, et
 *    `BoilerplateAssetsTest` DÉCOUVRE toute feuille servie qui déclare un jeton
 *    `--home-*` pour la confronter à la charte, clair contre clair et sombre
 *    contre sombre. Cette feuille y entre d'office par le fait de déclarer.
 *
 * 🔒 ET LA PILE SYSTÈME SUIT DANS LE MÊME GESTE. Elle était voisine mais
 *    différente de celle de la charte (`Helvetica` au lieu de
 *    `"Helvetica Neue"`, pas de `"Noto Sans"`), donc deux rendus pour une même
 *    marque. Le verrou `testLaPileSystemeRecopieeEgaleCelleDeLaCharte` ne la
 *    voyait pas, parce qu'il ne regarde que les feuilles qui se réclament de la
 *    charte. En déclarant les jetons, cette feuille se réclame de la charte, et
 *    la pile devient exigible : les deux moitiés arrivent ensemble.
 */

/* ══════════════════════════════════════════════════════════════════════
   0. LE RESET DE BASE, PORTÉ DEPUIS `/style.css` (story 16.1, dette D9.6-1)
   ══════════════════════════════════════════════════════════════════════

   🐞 LE BUG, REMONTÉ PAR MICKAËL EN USAGE RÉEL : « impossible de scroller »
      sur `/fr/support` et les pages voisines. `/style.css` pose sur le corps
      `overflow: hidden` et `height: 100 pour cent`, et sur le pied de page
      `position: fixed`. Ces six familles de pages (légales, assistance, ODbL,
      téléchargement Android, landings de ville et hub pays) chargeaient cette
      feuille SANS jamais la défaire : elles reçoivent `/style.css` faute de
      poser `$PAGE_NO_TEMPLATE_CSS`, alors que cette feuille-ci ne cible
      JAMAIS `body` ni `html` (vérifié), seulement `.landing` et ses
      descendants. Sur un écran plus court que le contenu, le bas de la page
      devenait inatteignable.

   🔒 LE CORRECTIF EST LE MÉCANISME DOCUMENTÉ (D9.6-1), PAS UN PARI SUR LA
      CASCADE. `home/home.css` a déjà fait ce geste pour l'accueil : les six
      pages qui chargent cette feuille posent désormais `$PAGE_NO_TEMPLATE_CSS`
      (patron `index.php`), donc `/style.css` n'est PLUS chargée du tout. Il
      n'y a plus rien à défaire : ce bloc porte ce que `/style.css` fournissait
      et qui manquait, section 7 pour le pied de page.

   ⚠️ LE RESET UNIVERSEL ET LE CORPS DE TEXTE À 14 PIXELS SONT REPRIS À
      L'IDENTIQUE, ET CE N'EST PAS UN DÉTAIL. Ces six pages portent des
      éléments NUS (un `<h2 id="…">` sans classe, un `<p>` de section, un
      `<ul><li>` de liste) dans `support.php`, `legal.php`, `odbl.php` et
      `android.php` : leur taille et leurs marges dépendaient du reset
      `* { padding: 0; margin: 0; }` et du corps à `font: 14px/1.5 Arial,
      Helvetica, sans-serif` de `/style.css`, hérité par ces éléments qui ne
      déclarent pas leur propre taille (une taille en `rem`, elle, comme
      `.landing__title`, est relative à la racine et n'en dépend pas). Les
      retirer aurait changé silencieusement la taille de ces titres et
      paragraphes NUS, ce que la mesure a confirmé avant d'écrire ce bloc :
      confronté au HTML servi des six pages, aucune ne porte de sélecteur de
      `/style.css` hors ce reset (aucun `.btn`, aucun `#body_container`, aucun
      des sélecteurs de la carte).

   🔴 CE QUI N'EST DÉLIBÉRÉMENT PAS REPRIS : `overflow: hidden` et
      `height: 100 pour cent` sur `body`/`html` (c'est tout l'objet de
      l'opération), et le fond `#f6f5fb` en dur de `/style.css` (remplacé par
      le jeton `--home-bg`, patron `home/home.css`). */

* {
    padding: 0;
    margin: 0;
}

html {
    height: auto;
    min-height: 100%;
}

body {
    height: auto;
    min-height: 100%;
    font: 14px/1.5 Arial, Helvetica, sans-serif;
    background: var(--home-bg);
    color: var(--home-fg);
}

h1, h2, h3, h4, h5, h6 {
    font-weight: bold;
}

/* ══════════════════════════════════════════════════════════════════════
   LES JETONS DE LA CHARTE (story 12.8)
   ══════════════════════════════════════════════════════════════════════ */

:root {
    --home-accent: #5946B2;
    --home-accent-ink: #ffffff;
    --home-bg: #ffffff;
    --home-bg-soft: #f6f5fb;
    --home-fg: #16161a;
    --home-muted: #5c5c68;
    --home-line: #e4e2ee;
    /* La pastille du lien de boutique, reprise telle quelle de la charte : elle
       y existe précisément pour ce bouton-là (la forme du badge officiel
       Apple), et elle s'inverse en thème sombre parce qu'une pastille noire
       disparaîtrait sur un fond `#0f0f13`. */
    --home-store-bg: #111114;
    --home-store-bg-hover: #2a2a32;
    --home-store-ink: #ffffff;
}

.landing {
    box-sizing: border-box;
    width: 100%;
    padding: 24px 16px 64px;
    color: var(--home-fg);
    background: var(--home-bg);
    /* La pile système de la 9.6, reprise MOT POUR MOT de `home/home.css`. Seule
       la famille est reprise : la taille et l'interligne de ces pages leur
       appartiennent (`line-height: 1.55` ci-dessous), et les changer serait
       redessiner cinq familles de pages sans pouvoir le vérifier. */
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        "Helvetica Neue", Arial, "Noto Sans", sans-serif;
    line-height: 1.55;
}

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

.landing__inner {
    max-width: 720px;
    margin: 0 auto;
}

/* Fil d'Ariane */
.landing__breadcrumb {
    font-size: 0.85rem;
    color: var(--home-muted);
    margin-bottom: 16px;
}

.landing__breadcrumb ol {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

/* Le chevron de séparation prend le gris de texte de la charte, comme le reste
   du fil d'Ariane. Il valait `#b0b4b8`, plus clair que le texte qu'il sépare :
   la charte n'a aucun jeton pour « un peu plus clair que le gris de texte », et
   en inventer un serait une couleur de plus (P3 du dossier). */
.landing__breadcrumb li:not(:last-child)::after {
    content: "›";
    margin-left: 6px;
    color: var(--home-muted);
}

.landing__breadcrumb a {
    color: var(--home-accent);
    text-decoration: none;
}

.landing__breadcrumb a:hover {
    text-decoration: underline;
}

.landing__breadcrumb li[aria-current="page"] {
    color: var(--home-fg);
    font-weight: 600;
}

/* Titres & intro */
.landing__title {
    font-size: 1.9rem;
    line-height: 1.2;
    margin: 0 0 16px;
}

.landing__intro {
    font-size: 1.05rem;
    margin: 0 0 28px;
}

/* Résumé de couleur en texte */
.landing__summary {
    background: var(--home-bg-soft);
    border: 1px solid var(--home-line);
    border-radius: 12px;
    padding: 20px;
    margin: 0 0 28px;
}

.landing__summary-heading {
    font-size: 1.1rem;
    margin: 0 0 14px;
}

.landing__states {
    list-style: none;
    margin: 0 0 12px;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.landing__state {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: var(--home-bg);
    border: 1px solid var(--home-line);
    border-radius: 999px;
    padding: 6px 12px;
    font-size: 0.95rem;
}

.landing__swatch {
    display: inline-block;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    flex: 0 0 auto;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.12) inset;
}

.landing__state-count {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.landing__state-label {
    color: var(--home-muted);
}

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

/* Liste des villes du hub pays (story 12.7). La 12.7 écrivait ici « aucun jeton
   `--home-*` n'est déclaré : la mise à la charte des landings est la story S7 ».
   C'est cette story-ci, les jetons sont déclarés en tête, et cette feuille est
   entrée dans le verrou de parité. */
.landing__towns {
    list-style: none;
    margin: 0 0 32px;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

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

.landing__town-link:hover,
.landing__town-link:focus {
    border-color: var(--home-accent);
    text-decoration: underline;
}

/* Appel à l'action -> carte */
.landing__cta-wrap {
    margin: 0 0 8px;
}

/* 🎨 LE GESTE PRINCIPAL DES CINQ FAMILLES, EN INDIGO DE MARQUE (story 12.8).
   Il valait `#1b873f`, la teinte de l'état `free` de la légende, et `#156c32`
   au survol. Peindre un bouton avec la couleur d'un ÉTAT DE DONNÉE est une
   confusion de vocabulaire : sur la même page, ce vert désigne les parkings
   gratuits dans les pastilles juste au-dessus. L'indigo est la couleur du
   geste, partout ailleurs sur le site.

   🔒 LE SURVOL NE REPEINT PLUS, IL ASSOMBRIT. Une seconde teinte en dur
      (`#156c32`) serait une couleur de plus à tenir à jour à la main : le
      filtre dérive du jeton, donc il suit la charte et le thème sombre sans
      qu'aucune valeur ne soit recopiée. Même geste que `.account-sell-cta`. */
.landing__cta {
    display: inline-block;
    background: var(--home-accent);
    color: var(--home-accent-ink);
    font-weight: 600;
    font-size: 1.05rem;
    text-decoration: none;
    padding: 14px 24px;
    border-radius: 10px;
    transition: filter 0.15s ease;
}

.landing__cta:hover,
.landing__cta:focus {
    background: var(--home-accent);
    color: var(--home-accent-ink);
    filter: brightness(0.92);
}

.landing__cta-hint {
    margin: 0 0 32px;
    font-size: 0.9rem;
    color: var(--home-muted);
}

/* Prompts d'installation (boutons neutres — pas d'artwork officiel : dette go-live) */
.landing__install {
    border-top: 1px solid var(--home-line);
    padding-top: 24px;
}

.landing__install-heading {
    font-size: 1.1rem;
    margin: 0 0 6px;
}

.landing__install-lead {
    margin: 0 0 16px;
    color: var(--home-muted);
}

.landing__store-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

/* Le lien de boutique. Il porte les jetons `--home-store-*` de la charte, qui
   existent pour cette forme exacte (la pastille sombre du badge officiel Apple,
   inversée en thème sombre) et sont déjà les lecteurs de l'accueil depuis la
   12.2. Le jour où l'asset officiel sera vendorisé, ce sera un remplacement de
   balise, pas une refonte de mise en page. */
.landing__store {
    display: inline-block;
    padding: 12px 20px;
    border-radius: 8px;
    border: 1px solid var(--home-store-bg);
    background: var(--home-store-bg);
    color: var(--home-store-ink);
    font-weight: 600;
    text-decoration: none;
    font-size: 0.95rem;
}

.landing__store:hover,
.landing__store:focus {
    border-color: var(--home-store-bg-hover);
    background: var(--home-store-bg-hover);
    color: var(--home-store-ink);
}

/* ══════════════════════════════════════════════════════════════════════
   STORY 15.2 : LA PAGE DE TÉLÉCHARGEMENT ANDROID (/{locale}/android)
   ══════════════════════════════════════════════════════════════════════
   Elle réutilise le squelette `landing--legal` et les jetons de la charte.
   Aucun jeton `--home-*` neuf n'est DÉCLARÉ ici (les couleurs sont lues), donc
   la découverte de `BoilerplateAssetsTest` ne gagne aucune surface à confronter.
   Les pictogrammes sont des SVG en ligne dessinés par `android.php`, peints en
   `currentColor` : ils suivent la charte et le thème sans un octet tiers. */

/* Le robot Android en tête de page. Peint en indigo de marque, taille fixée par
   la hauteur (un SVG en ligne sans dimension s'étalerait sur toute la largeur). */
.landing--android .landing__mark {
    margin: 0 0 8px;
    line-height: 0;
}

.landing__mark-svg {
    display: inline-block;
    width: 56px;
    height: auto;
    color: var(--home-accent);
}

/* Le pictogramme d'une friction, aligné au titre de sa section. */
.landing__step-icon {
    width: 1.15em;
    height: 1.15em;
    margin-right: 8px;
    vertical-align: -0.18em;
    color: var(--home-accent);
}

/* Le repli fail-closed : quand aucune URL n'est servie, la page dit que le
   téléchargement n'est pas disponible, dans un encart lisible plutôt qu'un
   paragraphe nu. Encre pleine sur fond doux, contraste large. */
.landing__notice {
    margin: 0 0 16px;
    padding: 12px 16px;
    background: var(--home-bg-soft);
    border: 1px solid var(--home-line);
    border-radius: 8px;
    color: var(--home-fg);
}

/* Story 21.9 (AC1) : le QR code de la page, pour qui la lit sur un
 * ordinateur. MASQUÉ SOUS 720px : sur un téléphone, le bouton de
 * téléchargement direct suffit, et un code à scanner soi-même n'aurait
 * aucun sens. Le module est un `<svg>` généré côté serveur (`QrCode.php`),
 * sombre sur clair dans LES DEUX THÈMES (un lecteur optique a besoin d'un
 * contraste fort, pas de suivre le mode sombre du visiteur). */
.landing__qr {
    display: none;
    margin: 0 0 16px;
    text-align: center;
}

.landing__qr-svg {
    display: inline-block;
    width: 132px;
    height: 132px;
    border: 1px solid var(--home-line);
    border-radius: 8px;
}

.landing__qr-caption {
    margin: 8px 0 0;
    font-size: 0.85rem;
    color: var(--home-fg-muted, var(--home-fg));
}

/* Le bouton de téléchargement reprend le geste principal (indigo). Le retour à
   la carte devient un bouton FANTÔME (fond de page, bordé, encre indigo) pour
   ne pas mettre deux gestes pleins de même poids côte à côte. Le fond est le
   jeton `--home-bg` (et non `transparent`) : une couleur RÉSOLUBLE, sur laquelle
   le recalcul de contraste de la charte peut travailler (l'indigo sur blanc rend
   7,7:1, largement au-dessus du plancher). Le filtre de survol du `.landing__cta`
   de base est neutralisé ici, il assombrirait à peine ce fond clair. */
.landing__cta--ghost {
    background: var(--home-bg);
    color: var(--home-accent);
    border: 1px solid var(--home-line);
}

.landing__cta--ghost:hover,
.landing__cta--ghost:focus {
    background: var(--home-bg-soft);
    color: var(--home-accent);
    border-color: var(--home-accent);
    filter: none;
}

/* 404 */
.landing--not-found .landing__title {
    margin-top: 24px;
}

/* ══════════════════════════════════════════════════════════════════════
   STORY 16.2 : LES TROIS PAGES DE TUTORIEL ANDROID PAR APPAREIL
   ══════════════════════════════════════════════════════════════════════
   Aucun jeton `--home-*` NEUF n'est déclaré ici (les couleurs sont LUES),
   donc la découverte de `BoilerplateAssetsTest` ne gagne aucune surface à
   confronter. Les boutons-cartes de `/android` et les illustrations des
   pages de tutoriel partagent les mêmes règles. */

/* ── Les boutons-cartes de `/android` (AC5) ──────────────────────────── */
.device-buttons {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    margin: 0 0 28px;
}

.device-button {
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 44px;
    padding: 14px 18px;
    border: 1px solid var(--home-line);
    border-radius: 12px;
    background: var(--home-bg-soft);
    color: var(--home-fg);
    text-decoration: none;
}

.device-button:hover,
.device-button:focus {
    border-color: var(--home-accent);
    background: var(--home-bg);
}

.device-button__icon {
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    color: var(--home-accent);
}

.device-button__text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.device-button__label {
    font-weight: 700;
    font-size: 1.05rem;
}

.device-button__os {
    font-size: 0.9rem;
    color: var(--home-muted);
}

@media (min-width: 560px) {
    .device-buttons {
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    }
}

/* ── Le pas à pas d'une page de tutoriel (AC2, AC3) ──────────────────── */
.tuto-step {
    border-top: 1px solid var(--home-line);
    padding-top: 20px;
    margin-bottom: 20px;
}

.tuto-step h2 {
    font-size: 1.15rem;
    margin: 0 0 10px;
}

/* ── Les illustrations maison, SVG en ligne, SCHÉMATIQUES (AC4) ──────── */
.tuto-illus {
    display: block;
    width: 140px;
    height: auto;
    margin: 8px 0 12px;
}

.tuto-illus__frame {
    fill: none;
    stroke: var(--home-line);
    stroke-width: 3;
}

.tuto-illus__screen {
    fill: var(--home-bg-soft);
}

.tuto-illus__toggle-track {
    fill: var(--home-accent);
    opacity: 0.35;
}

.tuto-illus__toggle-knob {
    fill: var(--home-bg);
    stroke: var(--home-accent);
    stroke-width: 2.5;
}

.tuto-illus__ring {
    fill: none;
    stroke: var(--home-accent);
    stroke-width: 2.5;
    opacity: 0.5;
}

.tuto-illus__dialog {
    fill: var(--home-bg);
    stroke: var(--home-line);
    stroke-width: 2;
}

.tuto-illus__button-quiet {
    fill: var(--home-line);
}

.tuto-illus__button-accent {
    fill: var(--home-accent);
}

/* Desktop */
@media (min-width: 720px) {
    .landing {
        padding-top: 40px;
    }

    .landing__title {
        font-size: 2.3rem;
    }

    .landing__qr {
        display: block;
    }
}

/* Respect du thème sombre du navigateur.
 *
 * 🔑 CE BLOC A FONDU LE 01/09/2026, ET C'EST LE BÉNÉFICE DES JETONS. Il portait
 *    sept règles qui redéclaraient une à une les couleurs sombres de chaque
 *    élément (`.landing`, `.landing__summary`, `.landing__state`, les trois
 *    textes secondaires, le fil d'Ariane, le lien de boutique et son survol),
 *    en valeurs propres à cette feuille. Elles étaient toutes des VALEURS, donc
 *    toutes des surfaces de dérive : une teinte changée dans la charte ne les
 *    atteignait pas. Les règles au-dessus lisant désormais des jetons, il ne
 *    reste qu'à redéclarer les jetons, et le verrou de parité les confronte à
 *    la charte, sombre contre sombre.
 *
 * ⚠️ CE QUI CHANGE VRAIMENT À L'ŒIL, et il faut le dire : le fond sombre passe
 *    de `#16181a` à `#0f0f13`, celui de l'accueil et de la 404. Les cinq
 *    familles servies par cette feuille cessent d'avoir un noir à elles. */
@media (prefers-color-scheme: dark) {
    :root {
        --home-accent: #A896F5;
        --home-accent-ink: #16121f;
        --home-bg: #0f0f13;
        --home-bg-soft: #171722;
        --home-fg: #f3f2f7;
        --home-muted: #a7a6b4;
        --home-line: #2b2a38;
        --home-store-bg: #f3f2f7;
        --home-store-bg-hover: #d9d7e4;
        --home-store-ink: #101014;
    }
}

/* ══════════════════════════════════════════════════════════════════════
   LE PIED DE PAGE PARTAGÉ, PORTÉ DEPUIS `/style.css` (story 16.1, D9.6-1)
   ══════════════════════════════════════════════════════════════════════

   🔒 C'EST LE COÛT RÉEL DE `$PAGE_NO_TEMPLATE_CSS`, ET IL EST PAYÉ ICI.
      `templates/footer.php` est rendu par ces six familles de pages comme par
      toutes les autres, mais son habillage vivait dans la feuille du gabarit.
      Sans ces règles, le pied de page deviendrait du texte noir sur fond
      blanc, à la taille du corps. Même geste, même règles, que la section 7
      de `home/home.css`, qui a fait cette preuve la première.

   ⚠️ 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.

   🔴 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,
        · `.footer-distributed .footer-right` et ses liens, qui habillent une
          colonne que `templates/footer.php` ne rend PAS (vérifié : seul
          `.footer-left` existe dans le HTML servi). 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 : plus aucune autre
      feuille ne les dispute sur ces six familles de pages. */

.footer-distributed {
    position: static;
    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 (patron
   `home/home.css`) : il n'est plus utile ici, plus aucune autre feuille ne
   peint ce texte, mais le retirer serait 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 : la règle de tête ci-dessus le pose désormais à toute taille
   d'écran, ce qui est tout l'objet de cette story.
   ⚠️ LE `padding-bottom` DU CORPS EST PORTÉ, MÊME MOTIF QUE `home/home.css` :
   il ménageait une place de défilement sous le pied de page FIXE sur iPhone.
   Il n'est plus fixe nulle part sur ces pages, donc cette réserve ne sert
   plus à rien, mais elle était bel et bien appliquée 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. */
@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));
    }
}

/* 🔒 STORY 20.2 (revue, point 5, puis passe 3) : SUR CES PAGES, LE PIED EST
   STATIQUE, DONC LE SÉLECTEUR DE LANGUE LE SUIT DANS LE FLUX. Fixé en bas à
   droite (règle de base de `templates/footer.php`), il retombait sur
   « Renoncer au contrat ici » et « Résilier votre contrat » une fois la page
   défilée jusqu'au pied (mesuré par la revue sur `/fr/sales` et `/de/sales`
   entre 1024 et 1280 px). La passe 2 avait posé cette règle dans
   `templates/footer.php`, donc aussi sur la carte et les pages du gabarit,
   où elle cassait la mise en page (voir le commentaire de ce fichier-là) :
   elle vit ici, sur les seules pages dont le pied est statique, patron exact
   de `main.home ~ .language-switcher-fixed` dans `home/home.css`. */
footer.footer-distributed ~ .language-switcher-fixed {
    position: static;
    width: max-content;
    max-width: calc(100% - 32px);
    margin: 26px auto 34px;
    flex-wrap: wrap;
    justify-content: center;
}