/* ════════════════════════════════════════════════════════════════════
   ACCUEIL

   Le socle visuel est déjà posé dans base.css : fond sombre, doré
   réservé aux actions, Bricolage Grotesque en titre. Rien n'est
   redéfini ici, tout en découle.

   L'audace tient à un seul endroit, la scène du haut de page. Le reste
   est calme, et c'est ce contraste qui la fait exister.
   ════════════════════════════════════════════════════════════════════ */

/* ── Éléments communs ────────────────────────────────────────────── */

.surtitre {
    font-family: var(--police-texte);
    font-size: .8125rem;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--or);
    margin-bottom: var(--r4);
}

.titre-section {
    font-family: var(--police-titre);
    font-size: clamp(1.5rem, 3vw, 2.125rem);
    font-weight: 600;
    letter-spacing: -.02em;
    margin-bottom: var(--r5);
}

.lien-discret {
    color: var(--texte-doux);
    text-decoration: none;
    border-bottom: 1px solid var(--bordure);
    padding-bottom: 2px;
    transition: color .15s ease, border-color .15s ease;
}

.lien-discret:hover,
.lien-discret:focus-visible {
    color: var(--texte);
    border-color: var(--or);
}

.bouton--large {
    min-height: 52px;
    padding: 0 var(--r6);
    font-size: 1rem;
}

/* Les sections respirent, sans que chacune redéfinisse son écart. */
.public main > section { margin-bottom: var(--r8); }
.public main > section:last-child { margin-bottom: var(--r7); }

/* ════════════════════════════════════════════════════════════════════
   HAUT DE PAGE
   ════════════════════════════════════════════════════════════════════ */

.phare {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--r7);
    align-items: center;
    padding-top: var(--r5);
}

@media (min-width: 62rem) {
    .phare {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: var(--r8);
        padding-top: var(--r7);
    }
}

.phare__titre {
    font-family: var(--police-titre);
    font-size: clamp(2.25rem, 6.5vw, 3.75rem);
    font-weight: 700;
    line-height: 1.04;
    letter-spacing: -.035em;
    margin-bottom: var(--r5);
}

/* La dernière ligne est la promesse : elle change de voix, pas de
   taille. Un italique suffit, un doré ici volerait l'attention du
   bouton. */
.phare__titre em {
    font-style: italic;
    font-weight: 500;
    color: var(--texte-doux);
}

.phare__texte {
    max-width: 46ch;
    color: var(--texte-doux);
    margin-bottom: var(--r4);
    line-height: 1.65;
}

.phare__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--r5);
    margin: var(--r6) 0 var(--r5);
}

.rassurances {
    display: flex;
    flex-wrap: wrap;
    gap: var(--r3) var(--r5);
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: .875rem;
    color: var(--texte-faible);
}

/* Le point n'est pas une puce décorative : il sépare trois faits de même
   niveau, là où une virgule les hiérarchiserait. */
.rassurances li { position: relative; padding-left: var(--r4); }

.rassurances li::before {
    content: "";
    position: absolute;
    left: 0;
    top: .55em;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--or);
    opacity: .7;
}

/* ── La scène ────────────────────────────────────────────────────── */

.phare__scene {
    position: relative;

    /* L'espace du cartouche qui déborde en bas : sans lui, il toucherait
       la section suivante. */
    margin-bottom: var(--r6);
    display: flex;
    justify-content: center;
    padding: var(--r6) 0;
}

/* Halo diffus derrière la médaille : c'est ce qui la détache du fond
   sans lui ajouter de contour. */
.phare__scene::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(
        circle at 50% 42%,
        rgba(224, 168, 0, .13),
        transparent 62%
    );
    pointer-events: none;
}

.scene__medaille {
    position: relative;
    width: min(20rem, 68vw);
    filter: drop-shadow(0 18px 34px rgba(0, 0, 0, .55));
}

.medaille { display: block; width: 100%; height: auto; }

.medaille__nom {
    font-family: var(--police-titre);
    font-size: 30px;
    font-weight: 600;
    letter-spacing: .01em;
}

.medaille__tel {
    font-family: var(--police-mono);
    font-size: 15px;
    letter-spacing: .02em;
}

/* ── DEUX POLICES DE TITRE, ET UNE SEULE RAISON ────────────────────
   Le serif est réservé à l'accroche, tout en haut : c'est le seul
   endroit où il dit quelque chose. Quatre titres l'employaient, en dur,
   et le reste de la page en Bricolage : l'œil changeait de registre
   quatre fois en descendant. (1.37.0) */
.phare { --police-accroche: Georgia, 'Times New Roman', serif; }

/* ── L'alerte ────────────────────────────────────────────────────── */

/* ── LE CARTOUCHE NE RECOUVRE PLUS LA MÉDAILLE ─────────────────────
   Ancré en bas à droite avec 84 % de largeur, il cachait le nom gravé :
   les deux éléments se marchaient dessus.

   Il descend sous la médaille et déborde du cadre par le bas : la
   médaille reste entière, et le cartouche ressemble à ce qu'il est, une
   notification qui arrive. La scène gagne un peu de hauteur en bas pour
   qu'il ne touche pas la section suivante. (1.37.0) */
.alerte-scan {
    position: absolute;
    right: 0;
    bottom: calc(-1 * var(--r6));
    width: min(17rem, 78%);
    margin: 0;
    padding: var(--r4);
    background: var(--fond-carte);
    border: 1px solid var(--bordure);
    border-left: 3px solid var(--or);
    border-radius: var(--arrondi);
    box-shadow: 0 14px 30px rgba(0, 0, 0, .5);
}

@media (min-width: 62rem) {
    .alerte-scan { right: calc(-1 * var(--r5)); }
}

.alerte-scan__source {
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--or);
    margin-bottom: var(--r2);
}

.alerte-scan__corps {
    font-size: .9375rem;
    line-height: 1.5;
    color: var(--texte-doux);
}

.alerte-scan__corps strong { display: block; color: var(--texte); }

.alerte-scan__position {
    margin-top: var(--r2);
    font-family: var(--police-mono);
    font-size: .8125rem;
    color: var(--texte-faible);
}

/* ── La séquence d'ouverture ─────────────────────────────────────────
   Un seul enchaînement : la médaille apparaît, le balayage passe,
   l'alerte arrive. Trois effets indépendants donneraient l'impression
   d'une page qui s'agite ; celui-ci raconte quelque chose.            */

@media (prefers-reduced-motion: no-preference) {

    .scene__medaille {
        animation: medaille-entree .8s cubic-bezier(.22, 1, .36, 1) both;
    }

    .medaille__balayage {
        animation: balayage 3.4s cubic-bezier(.4, 0, .2, 1) 1s infinite;
    }

    .alerte-scan {
        animation: alerte-entree .55s cubic-bezier(.22, 1, .36, 1) 1.9s both;
    }

    @keyframes medaille-entree {
        from { opacity: 0; transform: translateY(18px) scale(.96); }
        to   { opacity: 1; transform: none; }
    }

    /* Le balayage descend, marque un temps, puis disparaît : c'est le
       rythme d'un scan réel, pas un va-et-vient continu. */
    @keyframes balayage {
        0%        { transform: translateY(0);    opacity: 0; }
        8%        { opacity: 1; }
        38%       { transform: translateY(230px); opacity: 1; }
        46%, 100% { transform: translateY(230px); opacity: 0; }
    }

    @keyframes alerte-entree {
        from { opacity: 0; transform: translateY(14px); }
        to   { opacity: 1; transform: none; }
    }
}

/* Sans animation, l'alerte doit rester lisible : elle est simplement
   déjà là. */
@media (prefers-reduced-motion: reduce) {
    .medaille__balayage { display: none; }
}

/* ════════════════════════════════════════════════════════════════════
   LA SÉQUENCE
   ════════════════════════════════════════════════════════════════════ */






/* ════════════════════════════════════════════════════════════════════
   LA MATIÈRE
   ════════════════════════════════════════════════════════════════════ */

/*
 * ── L'ANCIENNE SECTION « MATIÈRE » A ÉTÉ REMPLACÉE ────────────────────
 *
 * Ses règles ont été retirées en 0.80.0 avec la section elle-même. Les
 * laisser aurait fait chercher, plus tard, quel élément elles habillent.
 */


/* ════════════════════════════════════════════════════════════════════
   CATALOGUE
   ════════════════════════════════════════════════════════════════════ */

.produit-carte__visuel {
    display: flex;
    justify-content: center;
    padding: var(--r5) 0 var(--r4);
}

.produit-carte__visuel .medaille {
    width: 8.5rem;
    transition: transform .25s cubic-bezier(.22, 1, .36, 1);
}

.produit-carte:hover .medaille,
.produit-carte:focus-visible .medaille { transform: translateY(-4px); }

/* ════════════════════════════════════════════════════════════════════
   CLÔTURE
   ════════════════════════════════════════════════════════════════════ */

/* ── UN SEUL CADRE, PAS DEUX ───────────────────────────────────────
   La section portait un fond et une bordure, et le bloc intérieur
   aussi : deux cadres imbriqués, dont le second était plus étroit. La
   section redevient un simple espace ; c'est le bloc qui porte le
   cadre. (1.37.0) */
.cloture {
    text-align: center;
    padding: var(--r7) var(--r4);
}

.cloture__titre {
    font-family: var(--police-titre);
    font-size: clamp(1.375rem, 3.5vw, 2rem);
    font-weight: 600;
    letter-spacing: -.02em;
    margin-bottom: var(--r4);
}

.cloture p {
    color: var(--texte-doux);
    max-width: 44ch;
    margin: 0 auto var(--r6);
    line-height: 1.65;
}

/* ════════════════════════════════════════════════════════════════════
   SECTIONS ALTERNÉES
   ════════════════════════════════════════════════════════════════════

   Six sections du même fond se lisent comme une seule page interminable :
   rien ne dit où l'une finit et où la suivante commence.

   L'alternance est légère, pas contrastée : deux fonds trop différents
   feraient croire à deux sites collés bout à bout. */

/* ── « avis-accueil », PAS « avis » ────────────────────────────────
   « .avis » est la classe du bloc d'avis d'une fiche produit, large de
   46 rem dans « base.css ». La section d'accueil la réutilisait et
   héritait de sa largeur : elle faisait 40 % de la page quand tout le
   reste en faisait 100. (1.37.0) */
.appli,
.avis-accueil {
    background: var(--fond-eleve);
}

.atouts,
.apercu-boutique,
.avis-accueil,
.cloture {
    padding: var(--r7) 0;
}

/* ── LES FILETS D'UN PIXEL ONT ÉTÉ REMPLACÉS ──────────────────────────

   Deux règles marquaient la limite entre sections de même fond par un
   « border-top » d'un pixel. Elles faisaient leur travail et ne disaient
   rien : sur une page qui enchaîne neuf sections, un filet se lit comme
   une bordure de tableau.

   Les séparateurs dessinés plus bas les remplacent, et distinguent un
   changement de chapitre d'un simple passage à la suite — ce qu'un filet
   uniforme ne pouvait pas faire.

   Les garder tous les deux donnerait DEUX marques pour une seule
   frontière. (1.98.0) */

/* ── Les trois preuves du bloc d'accueil ─────────────────────────────
   Des blocs plutôt qu'une liste à puces : une liste se survole, un
   chiffre se lit. */

.phare__preuves {
    display: flex;
    flex-wrap: wrap;
    gap: var(--r5);
    margin: var(--r5) 0;
}

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

.preuve__chiffre {
    color: var(--or);
    font-size: 1.375rem;
    font-weight: 700;
    line-height: 1.1;
}

.preuve__mot {
    color: var(--texte-doux);
    font-size: .8125rem;
}

/* ════════════════════════════════════════════════════════════════════
   LE CARROUSEL D'AVIS
   ════════════════════════════════════════════════════════════════════ */

.avis__resume {
    margin: 0;
    color: var(--texte-doux);
    font-size: .9375rem;
}

.avis__note {
    color: var(--or);
    font-size: 1.25rem;
    font-weight: 700;
}

/* Un défilement horizontal natif : il marche sans JavaScript, au doigt
   sur téléphone comme à la molette sur ordinateur. */
.avis__piste {
    display: flex;
    gap: var(--r4);
    overflow-x: auto;
    padding: var(--r4) 0 var(--r5);

    /* Cette piste est un enfant de « .avis-accueil » (une grille) : sans
       « min-width: 0 », un enfant de grille (ou de flex) garde la largeur
       de son contenu et refuse de rétrécir. La rangée de cartes la
       poussait alors au-delà de l'écran — le défilement horizontal ne
       clippait rien, et toute la page débordait à droite (Chrome étirait
       jusqu'au bandeau cookies). Avec « min-width: 0 », la piste tient
       dans la fenêtre et les cartes défilent enfin à l'intérieur.
       (1.247.7) */
    min-width: 0;

    /* L'accroche fait s'arrêter le défilement sur une carte entière :
       sans elle, on s'arrête sur une carte coupée en deux. */
    scroll-snap-type: x mandatory;

    /* La barre de défilement est masquée sur les navigateurs qui le
       permettent : le geste reste, l'élément visuel disparaît. */
    scrollbar-width: thin;
}

.avis-carte {
    flex: 0 0 min(22rem, 82vw);
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
    gap: var(--r3);
    padding: var(--r5);
    background: var(--fond-carte);
    border: 1px solid var(--bordure);
    border-radius: var(--arrondi-large);
}

/* Les étoiles sur leur propre ligne, sous le nom : mêlées au logo, on ne
   savait plus où la note commençait. */
.avis-carte__etoiles {
    color: var(--or);
    font-size: 1rem;
    letter-spacing: 2px;
    line-height: 1;
}

/* Les étoiles manquantes restent affichées en creux : quatre étoiles
   seules laissent croire à une note sur quatre. */
.avis-carte__vides { color: var(--bordure); }

.avis-carte__texte {
    flex: 1 1 auto;
    margin: 0;
    color: var(--texte);
    line-height: 1.6;
}

/* ── L'en-tête : logo, nom, date ─────────────────────────────────────
   Le logo était collé aux étoiles : il se lisait comme une sixième
   étoile d'une autre couleur, et la note paraissait fausse.

   Posé près du nom, il répond à la question qu'on se pose d'abord :
   qui a écrit cet avis, et où. */

.avis-carte__entete {
    display: flex;
    align-items: center;
    gap: var(--r2);
    font-size: .8125rem;
}

.avis-carte__auteur {
    font-weight: 600;
    font-size: .9375rem;
}

/* La date est poussée à droite : collée au nom, on lit « Declève 07/2026 »
   comme un seul bloc. */
.avis-carte__date {
    margin-left: auto;
    color: var(--texte-doux);
}

/* « .sr-only » vivait ici. Déplacée dans base.css : l'administration en a
   besoin et ne charge pas cette feuille, ce qui aurait affiché en clair
   un texte destiné aux seuls lecteurs d'écran. (0.88.0) */

/* La photo du produit dans la vitrine.
   « contain » plutôt que « cover » : une médaille rognée perd sa forme,
   et c'est précisément la forme qui distingue les modèles entre eux. */
.produit-carte__photo {
    width: 100%;
    aspect-ratio: 1;
    object-fit: contain;
}

/* ── Le filtre par source ────────────────────────────────────────────
   Des boutons radio cachés et des règles de voisinage : le navigateur
   sait masquer des éléments seul, un script serait un fichier de plus à
   charger pour rien. */

.avis__filtre {
    display: flex;
    flex-wrap: wrap;
    gap: var(--r2);
    justify-content: center;
    margin: var(--r4) 0 0;
}

.avis__filtre input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.avis__onglet {
    display: inline-flex;
    align-items: center;
    gap: var(--r2);
    padding: var(--r2) var(--r4);
    background: var(--fond-carte);
    border: 1px solid var(--bordure);
    border-radius: 999px;
    color: var(--texte-doux);
    font-size: .875rem;
    cursor: pointer;
    transition: border-color .15s var(--sortie), color .15s var(--sortie);
}

.avis__onglet:hover { border-color: var(--or); color: var(--texte); }

/* L'onglet actif : le bouton radio est caché, mais son état pilote le
   style de son étiquette. */
.avis__filtre input:checked + .avis__onglet {
    border-color: var(--or);
    color: var(--texte);
    background: var(--fond-eleve);
}

/* Un contour visible au clavier : sans lui, on ne sait plus où l'on est
   en naviguant à la tabulation. */
.avis__filtre input:focus-visible + .avis__onglet {
    outline: 2px solid var(--or);
    outline-offset: 2px;
}

/* ── Le masquage des cartes ──────────────────────────────────────────
   « :has() » regarde en arrière dans le document : chaque règle dit
   « quand la section contient ce bouton coché, masque les cartes des
   autres sources ». */

.avis-accueil:has(#avis-google:checked) .avis-carte:not(.avis-carte--google),
.avis-accueil:has(#avis-facebook:checked) .avis-carte:not(.avis-carte--facebook),
.avis-accueil:has(#avis-trustpilot:checked) .avis-carte:not(.avis-carte--trustpilot),
.avis-accueil:has(#avis-manuel:checked) .avis-carte:not(.avis-carte--manuel) {
    display: none;
}

/* ── Le logo de la source ────────────────────────────────────────────── */

.avis-logo {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
}

.avis__onglet .avis-logo { width: 16px; height: 16px; }

/* ── La grille des médailles ─────────────────────────────────────────
   Elle vivait dans « boutique.css », que l'accueil ne charge pas : les
   cartes s'empilaient donc en colonne, une par ligne.

   Recopiée ici plutôt que de charger toute la feuille boutique : celle-ci
   porte le filtre, la pagination et le panier, dont l'accueil n'a rien à
   faire. */

.catalogue {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
    gap: var(--r4);
    margin-top: var(--r5);
}

.apercu-boutique .produit-carte {
    display: block;
    text-decoration: none;
    color: inherit;
    padding: var(--r4);
    background: var(--fond-carte);
    border: 1px solid var(--bordure);
    border-radius: var(--arrondi-large);
    transition: border-color .15s var(--sortie), transform .15s var(--sortie);
}

.apercu-boutique .produit-carte:hover {
    border-color: var(--or);
    transform: translateY(-2px);
}

.produit-carte__nom {
    margin: var(--r3) 0 var(--r2);
    font-size: .9375rem;
    font-weight: 500;
    line-height: 1.4;
}

.produit-carte__prix {
    margin: 0;
    color: var(--or);
    font-weight: 700;
}

/* ── La carte d'avis, corrigée ───────────────────────────────────────
   Un avis seul occupait une colonne étroite : dix lignes de texte sur
   deux mots de large, illisibles.

   La largeur minimale garantit une ligne lisible même à un seul avis. */

.avis-carte {
    flex: 0 0 clamp(20rem, 30vw, 26rem);
}

/* Un texte long est tronqué : une carte de quarante lignes déforme tout
   le carrousel, et personne ne lit un avis aussi long sur une page
   d'accueil. */
.avis-carte__texte {
    display: -webkit-box;
    -webkit-line-clamp: 8;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Avec un ou deux avis, la piste les centre au lieu de les coller à
   gauche dans un grand vide. */
.avis__piste:has(.avis-carte:nth-child(-n+2):last-child) {
    justify-content: center;
}

/* ════════════════════════════════════════════════════════════════════
   LA LARGEUR ET LES MARGES DES SECTIONS
   ════════════════════════════════════════════════════════════════════

   Aucune section n'avait de conteneur : le contenu touchait les bords de
   l'écran, et sur un large moniteur les lignes traversaient toute la
   page.

   Plutôt que d'ajouter un div dans chaque section du gabarit, les
   sections portent elles-mêmes la contrainte : un seul endroit à régler,
   et une section ajoutée demain en hérite. */

.phare,
.atouts,
.apercu-boutique,
.avis-accueil,
.cloture {
    /* La marge intérieure s'ajoute à la largeur bornée : sans elle, le
       texte colle au bord sur téléphone, où il n'y a pas de marge
       automatique. */
    padding-left: var(--r5);
    padding-right: var(--r5);
}

.phare > *,
.apercu-boutique > *,
.avis-accueil > *,
.cloture > * {
    max-width: 1280px;
    margin-left: auto;
    margin-right: auto;
}

/* Le bloc phare est une grille : borner ses enfants un par un les
   séparerait. C'est la grille elle-même qui se borne. */
.phare {
    /* « position: relative » rattache le motif pleine largeur (::before,
       calé sur 50vw) à ce bloc plutôt qu'à la racine. Son léger
       dépassement — la barre de défilement incluse dans 50vw, que Chrome
       affiche — est alors coupé par le « overflow-x: clip » de body, au
       lieu de remonter élargir la page. On ne touche pas à l'overflow de
       html : le bandeau cookies en position fixe reste calé sur l'écran.
       (1.247.5) */
    position: relative;
    max-width: 1280px;
    margin-left: auto;
    margin-right: auto;
}

.phare > * { max-width: none; }

/* La piste d'avis déborde volontairement de la largeur bornée : un
   carrousel qui s'arrête net au bord semble coupé, alors qu'il continue.
   Elle garde donc sa marge, mais pas la limite. */
.avis__piste {
    max-width: none;
    padding-left: max(0px, calc((100% - 1280px) / 2));
    padding-right: var(--r5);
}

/* ── Les sections respirent ──────────────────────────────────────────
   « padding: var(--r7) 0 » ne laissait aucune marge latérale, et les
   titres touchaient le bord de la carte de fond. */

/* Les deux sections sur fond relevé : « appli » et « avis ». Elles
   alternent avec les autres, qui sont sur le fond de page. (1.40.0) */
.appli,
.avis-accueil {
    padding-top: var(--r7);
    padding-bottom: var(--r7);
    border-radius: var(--arrondi-large);
    margin-top: var(--r6);
    margin-bottom: var(--r6);
}

/* Deux colonnes sur tablette : trois y feraient des cartes de dix-huit
   caractères de large, et une colonne gâcherait la place. */
@media (max-width: 64rem) {
    .atouts__grille { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Sur téléphone, un fond arrondi qui touche les bords paraît cassé :
   il reprend toute la largeur. */
@media (max-width: 40rem) {
    .appli,
    .avis-accueil {
        border-radius: 0;
        padding-left: var(--r4);
        padding-right: var(--r4);
    }
}

/* ════════════════════════════════════════════════════════════════════
   QUALITÉ ET TECHNOLOGIE
   ════════════════════════════════════════════════════════════════════ */

.atouts {
    padding: var(--r7) var(--r5);
    max-width: 1280px;
    margin: var(--r6) auto;
}

.atouts__entete {
    text-align: center;
    margin-bottom: var(--r6);
}

/* Un titre en serif au milieu d'une page en sans-serif : le contraste
   marque une section importante mieux qu'une taille plus grande, qui ne
   ferait que pousser le reste vers le bas. */
.atouts__titre {
    margin: 0 0 var(--r3);
    font-family: var(--police-titre);
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    font-weight: 600;
    line-height: 1.2;
}

/* Le mot en italique doré : il porte l'idée de la section, et le reste du
   titre le pose. Tout mettre en doré n'aurait rien souligné. */
.atouts__titre em {
    color: var(--or);
    font-style: italic;
}

.atouts__sous-titre {
    margin: 0;
    color: var(--texte-doux);
}

/* ── TROIS COLONNES POUR SIX CARTES ────────────────────────────────
   « auto-fit » en donnait quatre sur un écran large : six cartes
   laissaient deux orphelines sur la seconde ligne, avec la moitié
   droite vide. Deux lignes de trois remplissent la grille. (1.37.0) */
.atouts__grille {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--r4);
}

.atout {
    display: flex;
    flex-direction: column;
    gap: var(--r2);
    padding: var(--r5);
    background: var(--fond-carte);
    border: 1px solid var(--bordure);
    border-radius: var(--arrondi-large);
}

/* ── LA CARTE MISE EN AVANT ──────────────────────────────────────────
   Une bordure dorée et un fond légèrement plus clair. Pas de taille
   différente : une carte plus grande casserait l'alignement de la grille
   et laisserait un trou sous elle. */
.atout--phare {
    border-color: var(--or);
    background: linear-gradient(
        180deg,
        rgba(251, 191, 36, .06),
        var(--fond-carte) 40%
    );
}

/* ── LA VIGNETTE ALLUMÉE, DÉFINIE UNE SEULE FOIS ─────────────────────

   Deux situations l'allument : la carte mise en avant, et le survol.
   Écrire les couleurs deux fois les ferait diverger au premier
   ajustement — l'une changerait, l'autre non, et personne ne saurait
   laquelle est la bonne.

   Elles sont donc posées ici, et les deux règles plus bas ne font que
   les reprendre. (1.99.0) */
.atouts {
    --vignette-allumee-fond:    rgba(251, 191, 36, .12);
    --vignette-allumee-bordure: rgba(251, 191, 36, .35);
}

.atout__icone {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    margin-bottom: var(--r2);

    /* Éteinte par défaut. Les deux variables ne sont posées que par la
       carte en avant ou par le survol. */
    background: var(--vignette-fond, var(--fond-eleve));
    border: 1px solid var(--vignette-bordure, var(--bordure));
    border-radius: var(--arrondi);
    font-size: 1.25rem;
}

.atout--phare {
    --vignette-fond:    var(--vignette-allumee-fond);
    --vignette-bordure: var(--vignette-allumee-bordure);
}

/* ── LE SURVOL ALLUME LA VIGNETTE ────────────────────────────────────

   « hover: hover » écarte les écrans tactiles. Sans cette condition, un
   doigt qui effleure une carte l'allume et la laisse allumée jusqu'au
   prochain toucher ailleurs : sur téléphone, une carte reste éclairée
   sans qu'on comprenne pourquoi.

   La carte s'éclaire aussi, mais moins : c'est la vignette qui doit
   attirer l'œil, pas le cadre. (1.99.0) */
@media (hover: hover) {
    .atout,
    .atout__icone {
        transition:
            background-color .18s ease,
            border-color .18s ease,
            transform .18s ease;
    }

    .atout:hover {
        --vignette-fond:    var(--vignette-allumee-fond);
        --vignette-bordure: var(--vignette-allumee-bordure);

        border-color: color-mix(in srgb, var(--or) 40%, var(--bordure));
    }

    /* Un déplacement d'un pixel : assez pour que le survol se sente,
       trop peu pour décaler la grille. */
    .atout:hover .atout__icone {
        transform: translateY(-1px);
    }
}

/* Un mouvement peut gêner, voire donner la nausée. La couleur, elle,
   reste : elle porte l'information, l'animation ne fait que l'adoucir. */
@media (prefers-reduced-motion: reduce) {
    .atout,
    .atout__icone {
        transition: none;
    }

    .atout:hover .atout__icone {
        transform: none;
    }
}

/* Le surtitre en majuscules et en petit : il annonce le thème sans
   concurrencer le titre, qui porte l'argument. */
.atout__sur {
    margin: 0;
    color: var(--or);
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.atout__titre {
    margin: 0;
    font-family: var(--police-titre);
    font-size: 1.125rem;
    font-weight: 600;
    line-height: 1.35;
}

.atout__texte {
    margin: 0;
    color: var(--texte-doux);
    font-size: .9375rem;
    line-height: 1.65;
}

.atout__texte strong { color: var(--texte); }

/* Sur téléphone, une seule colonne : deux cartes côte à côte à 18 rem
   forceraient un défilement horizontal. */
@media (max-width: 40rem) {
    .atouts { padding-left: var(--r4); padding-right: var(--r4); }

    .atouts__grille { grid-template-columns: 1fr; }
}

/* ════════════════════════════════════════════════════════════════════
   LA CLÔTURE
   ════════════════════════════════════════════════════════════════════

   C'est le dernier écran avant de partir ou d'acheter. Un titre, une
   phrase et un bouton nu ne retenaient personne : le bloc a maintenant un
   fond, une bordure, et les trois réponses aux questions qui restent. */

.cloture {
    padding: var(--r7) var(--r5);
}

.cloture__bloc {
    /* La même largeur que les autres sections : à 46 rem, le bloc
       paraissait rétréci au bout d'une page pleine largeur. Le texte
       garde sa largeur de lecture par sa propre règle. (1.42.2) */
    max-width: 1280px;
    margin: 0 auto;
    padding: var(--r7) var(--r6);
    text-align: center;

    /* Un dégradé doré très léger vers le haut : la carte se détache du
       fond sans devenir une boîte de couleur, ce qui la ferait passer
       pour une publicité. */
    background: linear-gradient(
        180deg,
        rgba(251, 191, 36, .07),
        var(--fond-carte) 55%
    );

    border: 1px solid rgba(251, 191, 36, .25);
    border-radius: var(--arrondi-large);
}

.cloture__titre {
    margin: 0 0 var(--r3);
    font-family: var(--police-titre);
    font-size: clamp(1.5rem, 3.5vw, 2.125rem);
    font-weight: 600;
    line-height: 1.25;
}

.cloture__titre em {
    color: var(--or);
    font-style: italic;
}

.cloture__texte {
    max-width: 34rem;
    margin: 0 auto var(--r5);
    color: var(--texte-doux);
    line-height: 1.65;
}

/* ── Les trois rassurances ───────────────────────────────────────────
   Sous le bouton, au moment où l'on hésite : plus haut, on les lirait
   avant que la question ne se pose, donc on les oublierait. */

/* ── TROIS GARANTIES, TROIS LIGNES ─────────────────────────────────
   En ligne avec retour, deux tenaient et la troisième tombait seule
   dessous. Une liste de trois se lit mieux empilée : chaque promesse a
   sa ligne, et l'œil descend d'une à l'autre au lieu de zigzaguer.
   (1.37.0) */
.cloture__preuves {
    display: grid;
    gap: var(--r2);
    justify-content: center;
    justify-items: start;
    margin: var(--r5) auto 0;
    padding: 0;
    width: fit-content;
    list-style: none;
}

.cloture__preuves li {
    display: inline-flex;
    align-items: center;
    gap: var(--r2);
    color: var(--texte-doux);
    font-size: .875rem;
}

.cloture__marque {
    color: var(--or);
    font-weight: 700;
}

@media (max-width: 40rem) {
    .cloture { padding-left: var(--r4); padding-right: var(--r4); }

    .cloture__bloc { padding: var(--r6) var(--r4); }

    /* Empilées sur téléphone : trois éléments côte à côte tiennent sur
       deux lignes bancales, une par ligne se lit mieux. */
    .cloture__preuves { flex-direction: column; align-items: center; }
}

/* ════════════════════════════════════════════════════════════════════
   LE BLOC D'ACCUEIL
   ════════════════════════════════════════════════════════════════════ */

.surtitre {
    display: inline-flex;
    align-items: center;
    gap: var(--r2);
    margin: 0 0 var(--r4);
    padding: var(--r2) var(--r4);

    /* Une pastille plutôt qu'une ligne de texte : le surtitre annonçait
       la catégorie du produit sans qu'on le distingue du reste, et il se
       lisait comme le début du titre. */
    background: rgba(251, 191, 36, .1);
    border: 1px solid rgba(251, 191, 36, .3);
    border-radius: 999px;

    color: var(--or);
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.phare__titre {
    margin: 0 0 var(--r4);
    font-family: var(--police-accroche);
    font-size: clamp(2rem, 5vw, 3.25rem);
    font-weight: 600;
    line-height: 1.15;
}

/* La troisième ligne porte la promesse : l'italique doré la détache des
   deux premières, qui posent la situation. */
.phare__titre em {
    color: var(--or);
    font-style: italic;
}

.phare__texte {
    max-width: 34rem;
    margin: 0 0 var(--r5);
    color: var(--texte-doux);
    font-size: 1.0625rem;
    line-height: 1.7;
}

/* ── Les trois chiffres ──────────────────────────────────────────────
   Séparés par un filet vertical : collés, ils se lisaient comme une
   phrase de trois mots sans lien. */

.phare__preuves {
    gap: 0;
    border-top: 1px solid var(--bordure);
    border-bottom: 1px solid var(--bordure);
    padding: var(--r4) 0;
}

.preuve {
    padding: 0 var(--r5);
}

.preuve:first-child { padding-left: 0; }

.preuve:not(:last-child) { border-right: 1px solid var(--bordure); }

.phare__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--r4);
    align-items: center;
    margin-top: var(--r5);
}

@media (max-width: 40rem) {
    /* Trois colonnes de chiffres à l'étroit se coupent en plein milieu
       d'un mot : deux par ligne restent lisibles. */
    .phare__preuves { flex-wrap: wrap; }

    .preuve { padding: var(--r2) var(--r4) var(--r2) 0; }

    .preuve:not(:last-child) { border-right: none; }
}

/* ── La section « tous les animaux » ───────────────────────────────
   Le fond clair alterne avec le réseau qui suit, sur fond relevé : deux
   sections de même fond se toucheraient sans transition. (1.39.0) */
.animaux {
    padding: var(--r7) var(--r4);
}

.animaux__dedans {
    max-width: 46rem;
    margin: 0 auto;
    text-align: center;
}

.animaux__intro {
    margin: var(--r4) 0 0;
    color: var(--texte-doux);
    line-height: 1.6;
}

/* ── La liste est en mots, pas en icônes ───────────────────────────
   Ce sont ces mots que Google lit. Chaque ligne est une pastille : on
   la parcourt d'un regard, et les noms en gras ressortent. */
.animaux__liste {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--r2);
    margin: var(--r5) 0 0;
    padding: 0;
    list-style: none;
}

.animaux__liste li {
    padding: var(--r2) var(--r4);
    background: var(--fond-eleve);
    border: 1px solid var(--bordure);
    border-radius: 999px;
    color: var(--texte-doux);
    font-size: .9375rem;
}

.animaux__liste strong { color: var(--texte); font-weight: 600; }

.animaux__note {
    max-width: 36rem;
    margin: var(--r5) auto 0;
    color: var(--texte-faible);
    font-size: .9375rem;
    line-height: 1.6;
}

/* ═══════════════════════════════════════════════════════════════════
   L'APPLICATION

   Remplace « Ce qui se passe, dans l'ordre ». Ce qu'on vend ici, ce
   n'est pas une application : c'est le réseau. Le visuel montre des
   voisins qui s'allument autour d'un animal disparu. (1.40.0)
   ═══════════════════════════════════════════════════════════════════ */

/* Le fond, l'arrondi et les marges sont dans la règle groupée avec
   « .avis-accueil » : les deux sections se ressemblent, et une seule
   règle les tient d'accord. Ici, seulement ce qui lui est propre. */
.appli {
    padding-left: var(--r4);
    padding-right: var(--r4);
    max-width: 1280px;
    margin-left: auto;
    margin-right: auto;
}

.appli__dedans {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: var(--r6);
    align-items: center;
    max-width: 1100px;
    margin: 0 auto;
}

.appli__titre {
    margin: 0 0 var(--r4);
    font-family: var(--police-titre);
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    line-height: 1.15;
}

.appli__titre em {
    color: var(--or);
    font-style: normal;
}

.appli__texte {
    margin: 0 0 var(--r5);
    color: var(--texte-doux);
    line-height: 1.65;
}

/* ── Les trois gestes ──────────────────────────────────────────────
   Le temps d'abord, en gros et en doré : « 30 s » se lit avant le
   reste, et c'est l'argument. */
.appli__gestes {
    display: grid;
    gap: var(--r3);
    margin: 0 0 var(--r5);
    padding: 0;
    list-style: none;
}

.appli__gestes li {
    display: flex;
    align-items: flex-start;
    gap: var(--r4);
    padding: var(--r3) var(--r4);
    background: var(--fond-carte);
    border: 1px solid var(--bordure);
    border-radius: var(--arrondi);
}

.appli__geste-temps {
    flex: 0 0 3.5rem;
    color: var(--or);
    font-size: 1.375rem;
    font-weight: 700;
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
}

.appli__geste-quoi {
    color: var(--texte-doux);
    font-size: .9375rem;
    line-height: 1.5;
}

.appli__geste-quoi strong { color: var(--texte); }

/* ── Le bouton de téléchargement ───────────────────────────────────
   Il ressemble aux badges de boutique que tout le monde connaît :
   une icône, deux lignes, fond sombre. C'est ce qu'on cherche des yeux
   quand on veut une application. */
.appli__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--r4);
}

.appli__bouton {
    display: inline-flex;
    align-items: center;
    gap: var(--r3);
    padding: var(--r2) var(--r5) var(--r2) var(--r4);
    background: var(--fond);
    border: 1px solid rgba(var(--or-rvb), .4);
    border-radius: var(--arrondi);
    color: var(--texte);
    text-decoration: none;
    transition: border-color .15s var(--sortie), transform .15s var(--sortie);
}

.appli__bouton:hover {
    border-color: var(--or);
    transform: translateY(-1px);
}

.appli__bouton-ico {
    color: var(--or);
    font-size: 1.5rem;
}

.appli__bouton-texte {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

.appli__bouton-petit {
    color: var(--texte-faible);
    font-size: .6875rem;
    text-transform: uppercase;
    letter-spacing: .06em;
}

.appli__bouton-grand {
    font-size: 1.125rem;
    font-weight: 600;
}

.appli__gratuit {
    margin: 0;
    color: var(--texte-faible);
    font-size: .8125rem;
}

/* ── Le visuel : le réseau qui s'allume ────────────────────────────
   Un point au centre, des voisins autour, et une onde qui part. Sans
   image à charger, sans texte dedans. */
.appli__visuel { display: flex; justify-content: center; }

.appli__carte {
    width: 100%;
    max-width: 22rem;
    height: auto;
}

@keyframes appli-onde {
    0%   { r: 16; opacity: .6; }
    100% { r: 110; opacity: 0; }
}

.appli__pulse {
    animation: appli-onde 2.4s ease-out infinite;
}

/* Les voisins s'allument l'un après l'autre : c'est le message. */
@keyframes appli-allume {
    0%, 60%  { fill: var(--fond-carte); }
    70%, 100% { fill: var(--or); }
}

.appli__voisins circle {
    animation: appli-allume 2.4s ease-out infinite;
}

.appli__voisins circle:nth-child(1) { animation-delay: .3s; }
.appli__voisins circle:nth-child(2) { animation-delay: .5s; }
.appli__voisins circle:nth-child(3) { animation-delay: .8s; }
.appli__voisins circle:nth-child(4) { animation-delay: .6s; }
.appli__voisins circle:nth-child(5) { animation-delay: .9s; }
.appli__voisins circle:nth-child(6) { animation-delay: .2s; }
.appli__voisins circle:nth-child(7) { animation-delay: .4s; }

/* Pas d'animation pour qui l'a demandé : le mouvement peut gêner, et
   l'image sans lui dit la même chose. */
@media (prefers-reduced-motion: reduce) {
    .appli__pulse,
    .appli__voisins circle { animation: none; }

    .appli__voisins circle { fill: var(--or); }
}

@media (max-width: 62rem) {
    .appli__dedans { grid-template-columns: 1fr; }

    /* Le visuel passe au-dessus du texte : sur téléphone, on voit
       d'abord, on lit ensuite. */
    .appli__visuel { order: -1; }

    .appli__carte { max-width: 16rem; }
}

@media (max-width: 40rem) {
    .appli__bouton { width: 100%; justify-content: center; }
}

/* ═══════════════════════════════════════════════════════════════════
   LA GALERIE

   Des animaux qui portent leur médaille. Même mécanique que les avis :
   une piste qui défile au doigt, l'accroche sur chaque photo. (1.43.0)
   ═══════════════════════════════════════════════════════════════════ */

.galerie {
    padding: var(--r7) 0;

    /* ── PLUS DE FILET ICI ────────────────────────────────────────────

       Un « border-top » marquait le début de la section. Depuis la
       1.98.0, un séparateur à points la précède : le trait passait donc
       juste dessous, et l'on voyait deux marques pour une seule
       frontière — exactement ce que les séparateurs devaient éviter.

       Le filet des atouts avait été retiré pour la même raison ;
       celui-ci vivait ailleurs dans la feuille et avait survécu.
       (1.100.0) */
}

.galerie__dedans > .titre-section {
    max-width: 1280px;
    margin: 0 auto var(--r5);
    padding: 0 var(--r4);
}

.galerie__piste {
    display: flex;
    gap: var(--r3);
    overflow-x: auto;
    padding: 0 max(var(--r4), calc((100% - 1280px) / 2)) var(--r4);
    scroll-snap-type: x mandatory;
    scroll-padding-left: max(var(--r4), calc((100% - 1280px) / 2));

    /* Même garde-fou que la piste d'avis : « min-width: 0 » empêche la
       rangée de photos de pousser la piste au-delà de l'écran si elle se
       retrouve enfant d'un flex/grid ; elle défile alors à l'intérieur.
       (1.247.7) */
    min-width: 0;

    /* La barre de défilement est masquée : les photos qui dépassent du
       bord disent déjà qu'on peut faire glisser. */
    scrollbar-width: none;
}

.galerie__piste::-webkit-scrollbar { display: none; }

/* ── Les photos sont carrées ───────────────────────────────────────
   Un chien en portrait, un cheval en paysage : sans cadre commun, la
   piste devient une dentelure. Le carré recadre, et « object-fit »
   garde le centre, où est l'animal. */
.galerie__photo {
    flex: 0 0 min(18rem, 70vw);
    margin: 0;
    scroll-snap-align: start;
}

.galerie__photo img {
    display: block;
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: var(--arrondi-large);
    background: var(--fond-eleve);
}

.galerie__legende {
    margin-top: var(--r2);
    color: var(--texte-doux);
    font-size: .875rem;
    text-align: center;
}

@media (max-width: 40rem) {
    .galerie__photo { flex-basis: 78vw; }
}

/* ─────────────────────────────────────────────────────────────────────
   SÉPARATEURS DE SECTION

   Un filet d'un pixel séparait déjà deux sections de même fond. Il fait
   son travail et ne dit rien : sur une page qui enchaîne neuf sections,
   il se lit comme une bordure de tableau.

   ── DEUX FORMES, DEUX NIVEAUX ─────────────────────────────────────────

   Le LOSANGE marque un changement de chapitre : on quitte un sujet pour
   un autre. Les POINTS marquent un changement de paragraphe : on reste
   dans le même sujet, on passe à la suite.

   Sans cette distinction, neuf séparateurs identiques ne hiérarchisent
   rien — ils rythment, ce qui n'est pas la même chose que structurer.

   ── PAS ENTRE DEUX FONDS DIFFÉRENTS ───────────────────────────────────

   Le changement de fond sépare déjà. Y ajouter un ornement ferait deux
   marques pour une seule frontière, et la page paraîtrait hésitante.

   ── AUCUNE IMAGE ──────────────────────────────────────────────────────

   Tout est dessiné en CSS : une icône en fichier serait une requête de
   plus, et ne suivrait pas la couleur du thème. (1.98.0)
   ───────────────────────────────────────────────────────────────────── */

.separateur {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--r3);

    /* La marge fait le silence autour : un séparateur collé à son
       voisin sépare moins qu'il n'encombre. */
    margin: 0 auto;
    padding: var(--r6) var(--r4);
    max-width: 60rem;
}

/* ── Le losange, pour un changement de chapitre ───────────────────── */

.separateur--losange::before,
.separateur--losange::after {
    content: '';
    flex: 1 1 auto;
    height: 1px;

    /* Le filet naît du vide et meurt au centre : une ligne pleine d'un
       bord à l'autre couperait la page en deux au lieu de l'articuler. */
    max-width: 16rem;
}

.separateur--losange::before {
    background: linear-gradient(to right, transparent, var(--bordure));
}

.separateur--losange::after {
    background: linear-gradient(to left, transparent, var(--bordure));
}

.separateur__losange {
    flex: 0 0 auto;
    width: 10px;
    height: 10px;
    background: var(--or);

    /* Un carré tourné, pas un caractère : « ◆ » change de dessin selon
       la police installée, et disparaît sur certains systèmes. */
    transform: rotate(45deg);
    border-radius: 2px;
}

/* ── Les points, pour un changement de paragraphe ─────────────────── */

.separateur--points {
    gap: 10px;
}

.separateur__point {
    flex: 0 0 auto;
    width: 5px;
    height: 5px;
    border-radius: 50%;

    /* Les points d'appui sont en retrait : c'est le point central qui
       porte le regard, les deux autres l'encadrent. */
    background: var(--or-sombre);
}

.separateur__point--majeur {
    width: 8px;
    height: 8px;
    background: var(--or);
}

/* Sur téléphone, l'espace vertical est précieux : le silence se réduit
   de moitié, la forme ne change pas. */
@media (max-width: 640px) {
    .separateur {
        padding: var(--r5) var(--r4);
    }

    .separateur--losange::before,
    .separateur--losange::after {
        max-width: 6rem;
    }
}

/* ─────────────────────────────────────────────────────────────────────
   LE FOND D'EMPREINTES DE L'ACCROCHE

   Une texture discrète derrière le premier écran : des pattes, assez
   pâles pour qu'on les remarque sans les lire.

   ── DESSINÉE, PAS PHOTOGRAPHIÉE ───────────────────────────────────────

   Une photo d'animal aurait trois défauts. Elle pèse, et l'accroche est
   la première chose qui se charge. Elle impose une espèce, alors que la
   médaille va aussi bien à un cheval qu'à une chèvre. Et elle vieillit :
   une photo datée date toute la page.

   Le motif est un SVG posé directement dans la feuille. Aucun fichier,
   aucune requête, et il reste net sur un écran de portable comme sur un
   écran de bureau.

   ── UN MASQUE TROP ZÉLÉ L'AVAIT RENDUE INVISIBLE ──────────────────────

   Le premier essai éteignait le motif au centre gauche par un dégradé
   circulaire. Le calcul donnait : caché jusqu'à 63 % de la largeur,
   pleine intensité seulement à 116 % — hors de l'écran. Il ne restait
   qu'une bande à 1,4 % d'opacité, que personne ne pouvait voir.

   Le motif couvre maintenant toute l'accroche, à une intensité assez
   basse pour ne pas gêner la lecture. Un simple fondu en bas le fait
   mourir dans la section suivante, au lieu de s'arrêter net sur une
   ligne droite. (1.102.1)

   ── DEUX PATTES PAR TUILE, ET DU VIDE AUTOUR ──────────────────────────

   Une patte seule, répétée, dessinait des lignes et des colonnes
   régulières : l'œil suit la grille au lieu de percevoir une texture.

   La tuile fait maintenant 300 unités pour une patte de 120, et en
   porte deux, décalées et tournées différemment. Le motif se répète
   toujours, mais le rythme ne se lit plus.

   C'est le VIDE qui aère, pas la taille : agrandir la patte l'aurait
   rendue plus présente, pas plus légère. (1.103.0)
   ───────────────────────────────────────────────────────────────────── */

.phare {
    --empreintes-force: .07;

    position: relative;

    /* Le fond reste sous le contenu sans que chaque élément ait à
       déclarer son propre plan. */
    isolation: isolate;
}

.phare::before {
    content: '';
    position: absolute;

    /* ── JUSQU'AUX BORDS DE LA FENÊTRE ────────────────────────────────

       L'accroche vit dans « .conteneur », large de 1280 px au plus et
       centré. Le motif s'y arrêtait donc, et sur un grand écran on
       voyait deux bandes noires de chaque côté : la texture se lisait
       comme un panneau posé au milieu, pas comme un fond.

       « 50% - 50vw » ramène chaque bord à celui de la fenêtre, quelle
       que soit la largeur du conteneur. La règle n'a rien à savoir de
       cette largeur, et continuera de fonctionner si elle change.
       (1.103.1) */
    inset-block: calc(var(--r7) * -1) 0;
    inset-inline: calc(50% - 50vw);
    z-index: -1;

    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 300'><g fill='%23ffffff'><g transform='translate(10 20) rotate(-8 60 60)'><ellipse cx='34' cy='40' rx='10' ry='14' transform='rotate(-18 34 40)'/><ellipse cx='56' cy='30' rx='10' ry='15'/><ellipse cx='78' cy='34' rx='10' ry='14' transform='rotate(14 78 34)'/><ellipse cx='96' cy='54' rx='9' ry='12' transform='rotate(30 96 54)'/><path d='M62 56c16 0 27 11 27 23 0 10-9 17-27 17s-27-7-27-17c0-12 11-23 27-23z'/></g><g transform='translate(160 165) rotate(22 60 60) scale(.86)'><ellipse cx='34' cy='40' rx='10' ry='14' transform='rotate(-18 34 40)'/><ellipse cx='56' cy='30' rx='10' ry='15'/><ellipse cx='78' cy='34' rx='10' ry='14' transform='rotate(14 78 34)'/><ellipse cx='96' cy='54' rx='9' ry='12' transform='rotate(30 96 54)'/><path d='M62 56c16 0 27 11 27 23 0 10-9 17-27 17s-27-7-27-17c0-12 11-23 27-23z'/></g></g></svg>");
    background-size: 340px 340px;
    opacity: var(--empreintes-force);
    pointer-events: none;

    /* Un fondu vers le bas, rien de plus. Le motif meurt avant la
       section suivante ; il ne s'arrête pas sur une ligne. */
    -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 55%, transparent 100%);
}

/* Sur téléphone, le texte occupe toute la largeur et passe forcément sur
   le motif : il descend d'un tiers. */
@media (max-width: 62rem) {
    .phare {
        --empreintes-force: .045;
    }

    .phare::before {
        background-size: 240px 240px;
    }
}

/* Un fond à fort contraste rend chaque texture gênante : l'accroche se
   lit alors sur un fond nu, comme prévu. */
@media (prefers-contrast: more) {
    .phare::before {
        display: none;
    }
}

/* ════════════════════════════════════════════════════════════════════
   L'ACCUEIL SUR TÉLÉPHONE

   ── LES ESPACES D'UN GRAND ÉCRAN NE TIENNENT PAS ──────────────────────

   Ce fichier n'avait AUCUNE règle mobile : les mêmes marges
   s'appliquaient à un écran de 1400 pixels et à un téléphone de 360.

   Soixante-quatre pixels entre deux sections, c'est un cinquième de la
   largeur sur un ordinateur — et le TIERS de la hauteur visible sur un
   téléphone. On fait défiler du vide entre chaque bloc, et l'on croit la
   page vide.

   L'échelle est resserrée d'environ un tiers, pas supprimée : sans
   respiration, les sections se lisent comme un seul bloc et l'on ne sait
   plus où l'une finit. (1.165.0)
   ════════════════════════════════════════════════════════════════════ */

@media (max-width: 48rem) {
    .public main > section { margin-bottom: var(--r6); }
    .public main > section:last-child { margin-bottom: var(--r5); }

    /*
     * L'accroche garde un peu plus d'air : c'est la première chose vue,
     * et la serrer donnerait une page qui commence par une bousculade.
     */
    .phare { gap: var(--r5); }
    .phare__actions { margin: var(--r5) 0 var(--r4); }

    .atouts,
    .apercu-boutique,
    .avis-accueil,
    .galerie,
    .animaux,
    .cloture { padding: var(--r5) var(--r4); }

    .appli { padding: var(--r5) var(--r4); }

    .cloture__bloc { padding: var(--r5) var(--r4); }

    /*
     * Le séparateur perd la moitié de sa hauteur : son rôle est de
     * marquer un changement, pas d'occuper l'écran.
     */
    .separateur { padding: var(--r4) var(--r4); }
}