/* ════════════════════════════════════════════════════════════════════
   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;
    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;
}

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

.alerte-scan {
    position: absolute;
    right: 0;
    bottom: var(--r3);
    width: min(19rem, 84%);
    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
   ════════════════════════════════════════════════════════════════════ */

.etapes__liste {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--r5);
    list-style: none;
    margin: 0;
    padding: 0;
}

@media (min-width: 48rem) {
    .etapes__liste { grid-template-columns: repeat(3, 1fr); gap: var(--r6); }
}

.etape { position: relative; padding-top: var(--r5); }

/* Le trait au-dessus de chaque étape marque le passage de l'une à
   l'autre. Le premier segment est doré : c'est là que tout commence. */
.etape::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background: var(--bordure);
}

.etape:first-child::before { background: var(--or); opacity: .55; }

.etape__rang {
    display: block;
    font-family: var(--police-mono);
    font-size: .8125rem;
    color: var(--or);
    margin-bottom: var(--r3);
}

.etape__titre {
    font-family: var(--police-titre);
    font-size: 1.1875rem;
    font-weight: 600;
    margin-bottom: var(--r3);
}

.etape p { color: var(--texte-doux); line-height: 1.65; }

/* ════════════════════════════════════════════════════════════════════
   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
   ════════════════════════════════════════════════════════════════════ */

.cloture {
    text-align: center;
    padding: var(--r7) var(--r4);
    background: var(--fond-carte);
    border: 1px solid var(--bordure);
    border-radius: var(--arrondi-large);
}

.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. */

.etapes,
.avis {
    background: var(--fond-eleve);
}

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

/* Un filet marque la limite entre deux sections de même fond : sans lui,
   « matière » et « aperçu boutique » se touchent sans transition. */
/* La section « matiere » a été remplacée par « atouts » en 0.80.0 : le
   filet marque maintenant la limite entre les atouts et la vitrine. */
.atouts + .apercu-boutique { border-top: 1px solid var(--bordure); }

/* ── 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);

    /* 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:has(#avis-google:checked) .avis-carte:not(.avis-carte--google),
.avis:has(#avis-facebook:checked) .avis-carte:not(.avis-carte--facebook),
.avis:has(#avis-trustpilot:checked) .avis-carte:not(.avis-carte--trustpilot),
.avis: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,
.etapes,
.atouts,
.apercu-boutique,
.avis,
.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 > *,
.etapes > *,
.apercu-boutique > *,
.avis > *,
.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 {
    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. */

.etapes,
.avis {
    padding-top: var(--r7);
    padding-bottom: var(--r7);
    border-radius: var(--arrondi-large);
    margin-top: var(--r6);
    margin-bottom: var(--r6);
}

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

/* ── Les étapes ──────────────────────────────────────────────────────
   Le trait sous le titre s'arrêtait au tiers de la page : il suivait la
   largeur de la première colonne au lieu de celle du bloc. */

.etapes__liste {
    margin-top: var(--r6);
    padding-top: var(--r5);
    border-top: 1px solid var(--bordure);
}

.etape {
    /* Une marge intérieure sépare les colonnes du filet qui les
       divise : collé, le texte semble déborder de sa colonne. */
    padding-right: var(--r5);
}

.etape:not(:first-child) {
    padding-left: var(--r5);
    border-left: 1px solid var(--bordure);
}

@media (max-width: 52rem) {
    .etape:not(:first-child) {
        padding-left: 0;
        border-left: none;
        border-top: 1px solid var(--bordure);
        padding-top: var(--r5);
    }
}

/* ════════════════════════════════════════════════════════════════════
   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: Georgia, 'Times New Roman', serif;
    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);
}

.atouts__grille {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(18rem, 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%
    );
}

.atout__icone {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    margin-bottom: var(--r2);
    background: var(--fond-eleve);
    border: 1px solid var(--bordure);
    border-radius: var(--arrondi);
    font-size: 1.25rem;
}

.atout--phare .atout__icone {
    background: rgba(251, 191, 36, .12);
    border-color: rgba(251, 191, 36, .35);
}

/* 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: Georgia, 'Times New Roman', serif;
    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 {
    max-width: 46rem;
    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: Georgia, 'Times New Roman', serif;
    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. */

.cloture__preuves {
    display: flex;
    flex-wrap: wrap;
    gap: var(--r3) var(--r5);
    justify-content: center;
    margin: var(--r5) 0 0;
    padding: 0;
    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: Georgia, 'Times New Roman', serif;
    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; }
}