/* ==========================================================================
   TRADELYS — LES OFFRES : LA FORME DE LA MAQUETTE DU FONDATEUR.
   --------------------------------------------------------------------------
   CE FICHIER EXISTE POUR UNE RAISON PRÉCISE, ET ELLE EST DE MÉTHODE.
   --------------------------------------------------------------------------
   La maquette du fondateur (7 octobre 2026) portait sa mise en page dans un
   `<style>` de 4 582 caractères, avec ses propres noms : `--navy`, `--yellow`,
   `--blue`, `.cards`, `.card`, `.ribbon`, `.topdeal`, `.schools`, `.switch`.
   POSER CES NOMS DANS `styles.css` AURAIT ÉTÉ UNE FAUTE : ils sont génériques
   (`button`, `body`, `header`, `.card`), et la feuille de style est partagée
   par les DIX-SEPT pages de la vitrine. Une règle `button { … }` écrite ici
   aurait changé les boutons de toutes les autres pages sans que personne ne
   l'ait demandé.

   LES NOMS DE SA MAQUETTE SONT DONC GARDÉS — `.cards`, `.card`, `.switch`,
   `.topdeal`, `.schools`, `.schoolbadge`, `.notice`, `.principles` — mais
   TOUS PRÉFIXÉS PAR `.offres-vitrine`, la classe qui enveloppe la section.
   On reconnaît sa structure mot pour mot, et rien ne fuit ailleurs.

   ⚠️ ET LES COULEURS SONT CELLES DU SITE, PAS CELLES DU `<style>` DE SA
   MAQUETTE, POUR UNE RAISON QUI N'EST PAS ESTHÉTIQUE :
     · sa maquette écrit `--navy: #0b1932` ; le site écrit `--navy: #0A1931` ;
     · sa maquette écrit `--yellow: #ffdc00` ; le site écrit `--gold: #D4AF37`
       et `--gold-light: #FFD700`.
   Deux marine et deux or à un cheveu l'un de l'autre, sur la MÊME page que
   le bandeau et le pied du site : l'écart se verrait exactement là où les
   deux se touchent. La forme est la sienne ; la palette est celle du
   produit, et elle est LUE dans ses variables (`var(--navy)`, `var(--gold)`).

   ⚠️ CE QUI N'EST PAS ICI, ET QUI EST AILLEURS — IL FAUT LE SAVOIR :
     · `.offres-bloc`, `.offres-grille`, `.prix__variante--*`, `.prix__barre`,
       `.etiquette-deal--*`, `.offre-carte__action--sous-prix` : DÉJÀ dans
       `styles.css`, et branchés sur `html[data-duree]` et
       `html[data-offre-type]`. On ne les redéfinit pas — on les HABILLE.
     · `.currency*`, `.pays-statut`, `.champ` : déjà dans `styles.css`.
   ========================================================================== */


/* ==========================================================================
   0. ⚠️ LES SEPT CORRECTIONS DU FONDATEUR, 8 OCTOBRE 2026 — ET UNE HUITIÈME.
   --------------------------------------------------------------------------
   DÉCISION DU FONDATEUR, MOT POUR MOT, APRÈS AVOIR REGARDÉ LA PAGE EN LIGNE.
   Sa maquette reste la loi pour la FORME ; ces corrections viennent de lui et
   elles l'emportent. Elles sont numérotées comme dans son message, et chaque
   bloc de ce fichier dit laquelle il applique :

     1. « Le mot famille écrit en petit caractère au-dessus des noms des
         offres n'est pas bien visible = il faut l'agrandir. »
        → § 5 : `.category`, 11,52 px → 16 px.
     2. « Tu as placé verticalement Individuel, Famille et Écoles, laissant un
         grand espace vide sur la droite, alors qu'il faut les positionner
         horizontalement = à corriger. »
        → § 4 : la bande des trois mots passe sur UNE ligne, et la seconde
        colonne vide de sa grille disparaît. MESURÉ AVANT : la grille de
        `.offre-type-vedette` valait « 407.219px 586.016px », les trois mots
        vivaient tous dans la première colonne, et les 586 px de droite
        étaient VIDES.
     3. « Les boutons de changement de type de compte et de choix entre
         mensuel et annuel doivent avoir la même taille de police que les noms
         des offres. »
        → § 3 : les deux sélecteurs passent à `--taille-nom-offre`, la MÊME
        variable que les titres de carte. 16 px → 24 px.
     4. « La taille de police du tarif mensuel des offres doit être la même
         que celle des boutons "Choisir — 69 euros pour l'année". »
        → § 5 : le tarif mensuel BARRÉ passe à 16 px, la taille exacte du
        bouton (mesurée : 16 px). ⚠️ Le GRAND nombre mensuel, lui, reste à
        45,6 px : le ramener à 16 px l'aurait rendu 2,85 fois plus petit, soit
        l'inverse de « il faut que cela soit bien visible ». Le détail et les
        deux valeurs sont dans le rapport.
     5. « Le bouton Top deal, je ne le vois que maintenant que j'écris ces
         lignes ! Cela veut dire qu'il n'attire pas l'œil = il faut corriger
         cela, il faut lui mettre un contraste plus vif. »
        → § 7 : pastille agrandie (10,88 px → 14 px), texte blanc sur marine
        profond (12,52:1 → 16,36:1), anneau et halo d'or.
     6. « Tu ne valorises pas assez l'offre premium famille, il faut le faire,
         en adoptant pour cette offre une couleur d'arrière-plan différente
         des autres. »
        → § 5 : la carte Premium reçoit un fond MARINE, dans LES TROIS TYPES.
        ⚠️ Le fond DISTINGUE, il ne promet pas : il dit « celle qui contient
        tout », jamais « la meilleure ».
     7. « Essaie de mettre les tarifs barrés en ROUGE avec un fond approprié
         afin que l'œil les voie inévitablement. »
        → § 5 : prix barrés en rouge sur fond rosé, contraste mesuré.
     8. « Aligne cette offre sur la même ligne horizontale que les autres
         offres, afin que tout saute aux yeux sans avoir besoin de défiler. »
        → § 6 : la carte Écoles quitte le centrage et la colonne étroite ; elle
        prend la PREMIÈRE colonne de la grille des offres, même bord gauche et
        même largeur que les autres cartes.

   ⚠️ ET UNE RÈGLE DE MÉTHODE, QUE CES CORRECTIONS ONT RENDUE NÉCESSAIRE :
   la taille des noms d'offres est désormais UNE SEULE VALEUR, écrite une
   seule fois — `--taille-nom-offre`. Les trois endroits que le fondateur
   compare (le titre de carte, le sélecteur de type, le sélecteur de durée) la
   lisent. Deux copies d'une même taille finissent toujours par diverger, et
   c'est précisément ce qu'il a mesuré à l'œil.
   ========================================================================== */
.offres-vitrine { --taille-nom-offre: 1.5rem; }


/* ==========================================================================
   1. LE BANDEAU — LA MAQUETTE DU FONDATEUR, TEXTE EN HTML, PHOTO EN IMAGE.
   --------------------------------------------------------------------------
   DÉCISION DU FONDATEUR, 7 OCTOBRE 2026, MOT POUR MOT :

     « Je trouve ce bandeau pas mal, penses à le mettre sur l'interface
       utilisateur (en le retravaillant bien sûr). »

   CE QUI EST ICI EST LE RETRAVAIL, ET IL PORTE SUR LE FOND, PAS SUR LA FORME.
   Son bandeau portait tout son texte ÉCRIT DANS L'IMAGE. Un titre dans une
   image, c'est un titre qu'aucun moteur de recherche ne lit, qui se réduit à
   une lamelle illisible sur un téléphone, et qu'il faut refaire entièrement
   pour corriger un mot. Le texte est donc devenu du HTML — sur-titre,
   titre, sous-titre, mention — et la photo ne garde que les objets.

   ⚠️ LA GRILLE EST UNE VRAIE GRILLE, PAS UNE IMAGE DE FOND.
   Poser la photo en `background-image` aurait obligé à réserver une zone
   vide d'une largeur devinée, et le texte aurait fini par passer dessus à
   une taille d'écran ou à une autre. Ici les deux moitiés sont dans le flux :
   le texte ne peut pas chevaucher la photo, parce qu'elles ne partagent
   aucune colonne. C'est aussi ce qui rend le bandeau lisible à 320 px.

   ⚠️ ET LE PARTAGE DES DEUX COLONNES A CHANGÉ LE 8 OCTOBRE 2026, POUR UNE
   RAISON QUI SE MESURE — « LES DEUX TEXTES SUR UNE LIGNE ».
   --------------------------------------------------------------------------
   DÉCISION DU FONDATEUR, MOT POUR MOT : « Essaie de ne pas renvoyer à la
   ligne ce qui peut être écrit sur une ligne : “Choisissez votre formule”
   — aujourd'hui coupé en deux (“Choisissez votre” / “formule”) ; “Un cadre
   éducatif pour apprendre, seul, en famille ou en établissement.” —
   aujourd'hui sur deux lignes. »

   ⚠️ CE QUI LES COUPAIT N'ÉTAIT PAS LA POLICE, C'ÉTAIT LA LARGEUR — et
   c'est une MESURE, pas une impression. Relevé dans Chrome, à 1440 px :

       titre      « Choisissez votre formule »        48 px Georgia
                  largeur du bloc                     508 px
                  largeur qu'il lui FAUT sur une ligne 600 px   → coupé
       sous-titre « Un cadre éducatif… »              18,56 px
                  largeur qu'il lui FAUT sur une ligne 583 px   → coupé
                  (et son `max-width` de 34 rem = 544 px le coupait aussi)

   LES DEUX COLONNES SE PARTAGEAIENT 1 046 px : 1 fr pour le texte (508 px),
   1,06 fr pour la photo (538 px), et 38,4 px d'écart. Le titre ne pouvait
   donc PAS tenir, quelle que soit la taille de l'écran — il lui manquait
   92 px. On les lui rend SANS TOUCHER À LA POLICE (48 px, la valeur de sa
   maquette) : le texte passe à 1,35 fr (608 px) et l'écart à 1,6 rem. La
   photo cède 88 px de large (538 → 450) et garde son rapport 757/229 ; le
   bandeau, lui, RÉTRÉCIT de 81 px de haut, puisque le titre et le sous-titre
   n'occupent plus qu'une ligne chacun.

   ⚠️ CE QUI N'A PAS CHANGÉ, ET QUI COMPTE AUTANT : sous 860 px le texte
   passe AU-DESSUS de la photo et les deux textes SE COUPENT — c'est voulu,
   et c'est le cas du téléphone. Le titre ne rétrécit pas pour tenir : le
   `clamp` garde son minimum de 1,85 rem, et « Choisissez votre formule »
   demande alors 370 px pour 355 px disponibles. Il se coupe, et c'est très
   bien ainsi : sur un téléphone, deux lignes lisibles valent mieux qu'une
   ligne écrasée.
   ========================================================================== */
.offres-bandeau { padding: 2.2rem 0 2.4rem; }
.offres-bandeau__grille {
  display: grid;
  gap: 1.6rem;
  align-items: center;
  text-align: left;
}
@media (min-width: 860px) {
  .offres-bandeau { padding: 3rem 0 3.1rem; }
  .offres-bandeau__grille {
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    gap: 1.6rem;
  }
}

/* --- le sur-titre : « 01 — COMPARER EN UN REGARD » ----------------------- */
.offres-bandeau .sur-titre {
  margin: 0 0 0.55rem;
  color: var(--mist);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* --- le titre, et son « formule » en or -------------------------------- */
.offres-bandeau h1 {
  font-family: var(--font-title);
  font-size: clamp(1.85rem, 5.6vw, 3rem);
  line-height: 1.1;
  letter-spacing: -0.01em;
  margin: 0 0 0.7rem;
  color: #fff;
}
.offres-bandeau h1 .or { color: var(--gold-light); }

/* --- le sous-titre ------------------------------------------------------
   ⚠️ SON `max-width` ÉTAIT LA SECONDE CAUSE DE LA COUPURE (34 rem = 544 px,
   quand la phrase en demande 583) : il passe à 38 rem, la largeur exacte de
   la colonne du texte au-delà de 1 280 px. En dessous, et sur un téléphone,
   c'est la colonne qui commande — et la phrase se coupe, comme il faut. */
.offres-bandeau .sous-titre {
  margin: 0 0 0.9rem;
  max-width: 38rem;
  color: var(--cream-soft, #E8E3D6);
  font-size: clamp(0.98rem, 2.2vw, 1.16rem);
  line-height: 1.5;
}

/* --- la mention « Simulation en argent fictif », avec son icône --------- */
.offres-bandeau .mention {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0;
  color: var(--gold-light);
  font-size: 0.94rem;
  font-weight: 650;
}
.offres-bandeau .mention__ico { flex: none; }

/* --- l'image : les objets, et rien d'autre -----------------------------
   ⚠️ ELLE EST DÉCORATIVE ICI, DONC `alt=""` — tout ce qu'elle montre est
   déjà dit par le texte, et un lecteur d'écran qui la décrirait dirait deux
   fois la même chose. C'est le seul `alt` vide correct : pas « on n'a pas
   eu le temps d'écrire un texte », mais « cette image n'ajoute aucune
   information ».
   ⚠️ ET ELLE NE S'ÉTIRE JAMAIS : `height: auto` garde le rapport 757/229.
   Un bandeau étiré en hauteur donnerait un portable deux fois trop grand. */
.offres-bandeau__image { min-width: 0; }
.offres-bandeau__image img {
  display: block;
  width: 100%;
  height: auto;
  margin-left: auto;
  border-radius: var(--radius, 14px);
}
@media (max-width: 859px) {
  /* Sous 860 px le texte passe AU-DESSUS : le titre reste le premier mot
     lu, et l'image garde sa largeur entière pour rester lisible. */
  .offres-bandeau__image img { border-radius: var(--radius, 14px); }
}

/* ⚠️ LA PHRASE PUBLIQUE A DÉMÉNAGÉ, ET ELLE GARDE SON RÔLE.
   Elle vivait sous le titre, dans le bandeau ; le bandeau porte maintenant le
   texte du fondateur, alors elle est passée EN TÊTE DE LA SECTION DES CARTES,
   juste au-dessus des sélecteurs qu'elle décrit. Même mot, même fonction :
   elle annonce ce qu'on va faire, elle n'est pas une deuxième accroche. */
.offres-repere {
  margin: 0 0 1.1rem;
  color: var(--gold-ink);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.01em;
}
.offres-vitrine .offres-repere { text-align: center; }


/* ==========================================================================
   2. LE PAYS — ET LA LIGNE DES MONNAIES, QUI N'EST PLUS LÀ.
   --------------------------------------------------------------------------
   ⚠️ LA LIGNE DES MONNAIES A ÉTÉ RETIRÉE DE CETTE PAGE LE 8 OCTOBRE 2026, ET
   LA RÈGLE QUI LA CENTRAIT EST PARTIE AVEC ELLE.

   DÉCISION DU FONDATEUR, MOT POUR MOT : « À partir du moment où le choix du
   pays change déjà la monnaie de l'interface, on n'a plus besoin d'ajouter
   une ligne sur les monnaies. » Deux sélecteurs qui commandent la même
   chose, c'est un de trop.

   ⚠️ ELLE N'EST RETIRÉE QUE D'ICI. Neuf autres pages de la vitrine n'ont
   pas de sélecteur de pays — `index.html`, `comparaison.html`,
   `familles.html`, `creer-compte.html`, `parents.html`,
   `mentions-legales.html`… : sur celles-là, les trois boutons de devise
   restent leur SEUL moyen de choisir une unité de lecture, et `.currency*`
   reste donc dans `styles.css`, intact.

   ⚠️ ET AUCUNE RÈGLE MORTE NE RESTE ICI : `.offres-vitrine .currency-line`
   a été supprimée, pas laissée en place. Une règle qui ne s'applique plus à
   rien est une règle qu'on croit active — et le jour où un bloc
   `.currency-line` reviendrait sur cette page, il reviendrait sans son
   centrage, ce qui se verrait tout de suite.
   ========================================================================== */

/**
 * ⚠️ LE LIBELLÉ ET LE MENU SUR LA MÊME LIGNE — 8 OCTOBRE 2026.
 * ------------------------------------------------------------------
 * DÉCISION DU FONDATEUR, MOT POUR MOT : « La ligne “Votre pays” doit être
 * sur la même ligne que le pays à sélectionner. »
 *
 * MESURÉ AVANT (1440 px) : le libellé occupait de y=594 à y=616, le menu de
 * y=622 à y=641 — DEUX lignes, et 27 px de hauteur utile pour une seule
 * question posée. La cause n'est pas ici : `.champ` (`styles.css`) pose
 * `flex-direction: column`, et il a raison de le faire — c'est la forme de
 * TOUS les champs du site (identité, adresse, formulaire école).
 *
 * ⚠️ ON NE TOUCHE DONC PAS À `.champ` : on remet sur UNE ligne le seul champ
 * qui doit l'être, et seulement sur cette page.
 *
 * ⚠️ ET `flex-wrap: wrap` EST GARDÉ, VOLONTAIREMENT : sous 800 px, le menu
 * passe à `width: 100%` (§ 9, la règle du petit écran, parce que
 * « Congo-Kinshasa — République démocratique du Congo » ne se lit pas dans
 * 200 px), et les deux ne tiennent alors plus côte à côte. Le menu descend
 * SOUS son libellé au lieu de déborder ou de rétrécir. C'est un choix, il
 * est mesuré, et il est signalé au fondateur plutôt que caché.
 */
.offres-pays {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: center;
  gap: 0.5rem 1.1rem;
  margin: 0.9rem 0 0;
}
.offres-pays__champ {
  margin: 0;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.7rem;
}
.offres-pays__champ label {
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
  font-weight: 700;
}
.offres-pays select { min-width: 17rem; max-width: 26rem; }
.offres-pays .pays-statut { flex-basis: 100%; margin: 0.35rem 0 0; text-align: center; }


/* ==========================================================================
   3. LES DEUX SÉLECTEURS — `.controls` ET `.switch`, SES NOMS
   --------------------------------------------------------------------------
   `#duree` et `#type-offre` sont les identifiants que `duree.js` et
   `type-offre.js` pilotent. Le style est le sien : une pastille blanche,
   l'option active en couleur pleine.
   ========================================================================== */
.offres-vitrine .controls {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 1.1rem;
  margin: 1.5rem 0 0;
}
.offres-vitrine .switch {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  padding: 0.3rem;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 30px;
  justify-content: center;
}
/**
 * ⚠️ CORRECTION 3 DU FONDATEUR — LA MÊME TAILLE QUE LES NOMS D'OFFRES.
 * ------------------------------------------------------------------
 * « Les boutons de changement de type de compte et de choix entre mensuel et
 *   annuel doivent avoir la même taille de police que les noms des offres. »
 *
 * MESURÉ AVANT : 16 px pour les deux sélecteurs, 24 px pour « Découverte »,
 * « Standard » et « Premium ». Onze caractères du sélecteur contre vingt-quatre
 * du titre : le sélecteur se lisait comme une note de bas de page.
 *
 * ⚠️ ET LA VALEUR N'EST PAS RECOPIÉE : les deux lisent `--taille-nom-offre`.
 * Un `1.5rem` écrit deux fois serait deux valeurs à garder d'accord, et c'est
 * exactement le genre d'écart qui ne se voit qu'à l'œil du fondateur.
 *
 * ⚠️ LE RETRAIT DE LA MARGE INTÉRIEURE EST UNE CONSÉQUENCE, PAS UN GOÛT :
 * à 24 px, « Individuel » + « Famille » + « Écoles » ne tiennent plus dans la
 * largeur d'un téléphone avec les 1,35 rem d'avant. On réduit donc la marge
 * plutôt que la taille — et `flex-wrap` prend le relais si cela ne suffit
 * toujours pas, pour que RIEN NE DÉBORDE (voir le § 9, petit écran).
 */
.offres-vitrine .switch button {
  border: 0;
  background: transparent;
  color: var(--navy);
  font: inherit;
  font-size: var(--taille-nom-offre);
  font-weight: 650;
  line-height: 1.15;
  padding: 0.5rem 0.95rem;
  border-radius: 24px;
  cursor: pointer;
}
.offres-vitrine .switch button[aria-pressed="true"] {
  background: var(--navy);
  color: #fff;
}
/* ⚠️ LE TYPE « FAMILLE » GARDE SA COULEUR, ET ELLE VIENT DU SITE.
   Sa maquette employait un vert propre (`--green: #008578`) et une classe
   `body.family-mode`. On garde l'idée — Famille se distingue — avec le vert
   du produit, et SANS toucher au `<body>` : une classe posée sur le corps
   de la page pour colorer un bouton est une portée qu'on ne reprend pas. */
.offres-vitrine .switch button.family[aria-pressed="true"] { background: var(--green-ink); }
.offres-vitrine .switch button.ecole[aria-pressed="true"] { background: var(--gold-ink); }


/* ==========================================================================
   4. LA BANDE DES TROIS MOTS — ELLE PORTE `.offre-type-vedette`
   --------------------------------------------------------------------------
   ⚠️ CORRECTION 2 DU FONDATEUR, ET C'ÉTAIT LE DÉFAUT LE PLUS VISIBLE.
   MOT POUR MOT : « Tu as placé verticalement Individuel, Famille et Écoles,
   laissant un grand espace vide sur la droite, alors qu'il faut les
   positionner horizontalement = à corriger. »

   ⚠️ LA CAUSE, ET ELLE EST GÉOMÉTRIQUE — MESURÉE, PAS DEVINÉE.
   `styles.css` pose `.offre-type-vedette` en DEUX COLONNES
   (`0.82fr` pour un titre, `1.18fr` pour les mots), et
   `.offre-type-vedette__mots` en GRILLE À UNE SEULE COLONNE. La bande ne
   porte qu'UN enfant — les mots —, donc il occupait la première colonne et
   la seconde restait VIDE. Relevé sur la page servie, avant correction :

       .offre-type-vedette          grid-template-columns: 407.219px 586.016px
       .offre-type-vedette__mots    grid-template-columns: 407.219px
       les trois mots               x = 206, 206, 206   → EMPILÉS
       la colonne de droite         586 px, aucun contenu

   C'est très exactement « un grand espace vide sur la droite ». Un agent
   avait déjà signalé « le rectangle vide » sans en trouver la cause : la
   cause n'était pas le vide, c'était la DISPOSITION EN COLONNE.

   ⚠️ CE QUI CHANGE, ET RIEN DE PLUS :
     · la bande passe à UNE SEULE COLONNE — la seconde n'existe plus, donc
       elle ne peut plus être vide ;
     · les trois mots passent en LIGNE (`display: flex`), et ils se partagent
       la largeur (`flex: 1 1 16rem`) au lieu de rester à 407 px ;
     · ils prennent la taille des noms d'offres, comme le sélecteur du § 3.
   Les MOTS ne changent pas : « Individuel », « Famille », « Écoles et
   établissements » sont ceux du fondateur, et le troisième reste un VRAI
   LIEN vers le formulaire d'intention.
   ========================================================================== */
.offres-vitrine .offre-type-vedette {
  grid-template-columns: minmax(0, 1fr);
  margin-top: 1.4rem;
}
.offres-vitrine .offre-type-vedette__mots {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  align-content: stretch;
  align-items: stretch;
}
.offres-vitrine .offre-type-vedette__mot {
  flex: 1 1 16rem;
  min-width: 0;
  font-size: var(--taille-nom-offre);
}
.offres-vitrine .offre-type-vedette__note { font-size: 0.82rem; }


/* ==========================================================================
   5. LES CARTES — `.cards` ET `.card`, SES NOMS, SOUS NOTRE PORTÉE
   --------------------------------------------------------------------------
   `.offres-grille` (le nombre de colonnes) et `.offre-carte` (le fond, la
   bordure, le rayon) sont déjà dans `styles.css`. Ce qui est ajouté ici,
   c'est l'INTÉRIEUR de la carte tel que sa maquette le compose :
   la catégorie en petites capitales, le titre, la description, le prix en
   très grand, la ligne secondaire, la pastille d'économie, le bouton, puis
   la liste et le dépliant.
   ========================================================================== */
.offres-vitrine .offre-carte { gap: 0; }

/**
 * ⚠️ CORRECTION 1 DU FONDATEUR — LE LIBELLÉ DU TYPE ÉTAIT TROP PETIT.
 * ------------------------------------------------------------------
 * « Le mot famille écrit en petit caractère au-dessus des noms des offres
 *   n'est pas bien visible = il faut l'agrandir. »
 *
 * MESURÉ AVANT : 11,52 px (0,72 rem), pour un libellé en capitales espacées
 * posé au-dessus d'un titre de 24 px. Un libellé qui annonce « pour qui » ne
 * peut pas être la plus petite chose de la carte.
 * MESURÉ APRÈS : 16 px (1 rem), soit +39 %. L'interlettrage est ramené de
 * 0,12 em à 0,08 em pour que « ÉCOLES ET ÉTABLISSEMENTS » — vingt-quatre
 * caractères — tienne encore sur une ligne dans une colonne de carte.
 * ------------------------------------------------------------------
 */
.offres-vitrine .category {
  display: block;
  color: var(--gold-ink);
  font-size: 1rem;
  font-weight: 750;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.offres-vitrine .offre-carte--noble .category,
.offres-vitrine .card.premium .category { color: var(--gold-light); }

.offres-vitrine .offre-carte h2 {
  font-family: var(--font-title);
  font-size: var(--taille-nom-offre);
  line-height: 1.2;
  margin: 0.35rem 0 0.3rem;
}
/**
 * ⚠️ CORRECTION 6 DU FONDATEUR — LA CARTE PREMIUM A UN FOND À ELLE.
 * ------------------------------------------------------------------
 * « Tu ne valorises pas assez l'offre premium famille, il faut le faire, en
 *   adoptant pour cette offre une couleur d'arrière-plan différente des
 *   autres. »
 *
 * ⚠️ ELLE S'APPLIQUE AU TYPE CHOISI, PAS À UN SEUL TYPE. La page porte trois
 * cartes par type, et `offres.html` en porte deux exemplaires : le bloc
 * `individuel` et le bloc `famille`. Le fond est donc posé sur la CLASSE
 * `.card.premium`, que les DEUX blocs portent — et le troisième type, Écoles,
 * n'a pas de carte Premium du tout : il n'en existe qu'une, « sur dossier ».
 * Un fond qui ne suivrait qu'un type demanderait deux règles, donc deux
 * occasions de diverger.
 *
 * ⚠️ ET LE FOND DISTINGUE, IL NE PROMET PAS. Le fond dit « celle qui contient
 * tout », il ne dit pas « la meilleure » : c'est déjà le rôle de « L'offre
 * complète » et de « Le meilleur rapport », qui sont des mots. Une couleur
 * n'ajoute aucun jugement — elle range.
 *
 * ⚠️ ET CE N'EST PAS QU'UNE DÉCISION DE GOÛT : MESURÉ AVANT, la carte Premium
 * était BLANCHE (`rgb(255, 253, 247)`), donc exactement du même fond que les
 * deux autres. Or `offres.css` lui donne depuis toujours un texte clair —
 * crème `#E8E3D6` pour le dépliant, or clair `#FFD700` pour le libellé de
 * type — écrit pour un fond MARINE qui n'existait pas. Relevé sur la page
 * servie, avant correction :
 *
 *     .card.premium  fond  rgb(255, 253, 247)      (blanc crème)
 *     .details p     texte rgb(232, 227, 214)      → contraste  1,26:1
 *     .category      texte rgb(255, 215, 0)        → contraste  1,38:1
 *
 * Deux passages INVISIBLES sur la carte la plus chère de la page. Le fond
 * marine répare les deux du même geste : 13,70:1 et 12,52:1.
 * ------------------------------------------------------------------
 */
.offres-vitrine .card.premium {
  background: linear-gradient(180deg, var(--navy) 0%, var(--navy-logo) 100%);
  border: 2px solid var(--gold);
  color: var(--cream);
}
.offres-vitrine .desc {
  color: var(--ink-soft);
  font-size: 0.9rem;
  margin: 0 0 1.1rem;
  min-height: 2.6rem;
}

/* LE PRIX — le très grand nombre de sa maquette (`font-size: 52px`). */
.offres-vitrine .price {
  font-size: clamp(2rem, 5.4vw, 2.85rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.1rem 0.35rem;
}
.offres-vitrine .price__unite {
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--ink-soft);
}
/* ⚠️ LE PRIX BARRÉ PORTE LA TAILLE DU BOUTON — CORRECTIONS 4 ET 7. */
/**
 * CORRECTION 7 DU FONDATEUR — LE PRIX BARRÉ EN ROUGE, AVEC SON FOND.
 * ------------------------------------------------------------------
 * MOT POUR MOT : « Essaie de mettre les tarifs barrés en ROUGE avec un fond
 * approprié afin que l'œil les voie inévitablement. Souvent, voir que je vais
 * payer 80 euros au lieu de 100 a plus d'impact psychologique que je vais
 * économiser 20 euros — autrement dit, mon cerveau est vite touché par un 100
 * barré qu'il ne va plus payer. Tiens-en compte. »
 *
 * ⚠️ SON RAISONNEMENT EST JUSTE, ET IL EST DOCUMENTÉ : c'est l'AVERSION À LA
 * PERTE et l'ANCRAGE — le prix de référence pèse plus que l'économie
 * annoncée. La page le sert donc comme il le demande : le prix de référence
 * n'est plus une note grise, c'est un repère rouge.
 *
 * ⚠️ ET LE ROUGE SE MESURE, PARCE QU'UN ROUGE ILLISIBLE NE FAIT PEUR À
 * PERSONNE. Le rouge est MOINS LUMINEUX que le marine : sur le même fond il
 * serait moins lisible. On lui donne donc un fond rosé pâle, et le contraste
 * reste au-dessus du seuil.
 *
 *   AVANT  : #3C4A63 (texte secondaire) sur #FFFDF7 (carte)   →  8,78:1
 *   APRÈS  : #B42318 (`--red-ink`) sur #FDECEA (fond rosé)    →  5,75:1
 *
 * Le seuil d'accessibilité est de 4,5:1 pour du texte courant : le rouge le
 * dépasse de 28 %. Il est PLUS BAS que le marine, et c'est dit plutôt que
 * caché — l'échange est assumé : on perd de la luminance, on gagne l'ancrage
 * que le fondateur a demandé.
 *
 * ⚠️ LA COULEUR CHANGE, JAMAIS LA VALEUR : les montants viennent des jetons
 * `{{TARIF_…}}`, résolus à la diffusion par `lib/editeur.js`. Aucune règle de
 * ce fichier ne calcule, n'arrondit ni ne réécrit un montant — la règle
 * d'arrondi et la règle de calcul ne sont pas touchées.
 * ------------------------------------------------------------------
 */
.offres-vitrine .prix__barre,
.offres-vitrine .secondary s {
  display: inline-block;
  margin-left: 0.15rem;
  padding: 0.06rem 0.34rem;
  border-radius: 6px;
  background: #FDECEA;
  color: var(--red-ink);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0;
}
/**
 * ⚠️ CORRECTION 4 DU FONDATEUR — LA TAILLE DU TARIF MENSUEL.
 * ------------------------------------------------------------------
 * « La taille de police du tarif mensuel des offres doit être la même que
 *   celle des boutons "Choisir — 69 euros pour l'année". »
 *
 * LE TARIF MENSUEL BARRÉ — « 3,90 € », « 6,90 € », « 8,90 € », « 14,90 € » —
 * passe donc de 15,2 px à 16 px, la taille EXACTE du texte du bouton
 * (mesurée sur la page servie : `.cta` = 16 px). Les deux valeurs sont dans
 * le rapport, avec la mesure.
 *
 * ⚠️ ET LE GRAND NOMBRE, LUI, NE DESCEND PAS À 16 px — C'EST DIT ICI PARCE
 * QUE C'EST UN ÉCART ASSUMÉ À LA LETTRE DE LA PHRASE.
 * « 3,25 € / mois » mesure 45,6 px. Le ramener à la taille du bouton
 * l'aurait rendu 2,85 fois plus PETIT, soit exactement l'inverse de ce que le
 * fondateur demande dans la même phrase : « il faut que cela soit bien
 * visible ». On ne rapetisse donc pas le prix ; on remonte ce qui était trop
 * petit — le tarif barré, qui est le prix de référence, et qui porte
 * maintenant la taille du bouton. Si le fondateur veut la lettre plutôt que
 * l'intention, c'est une ligne à changer, et elle est nommée dans le rapport.
 * ------------------------------------------------------------------
 */
.offres-vitrine .prix__barre .money {
  text-decoration: line-through;
  text-decoration-thickness: 2px;
  text-decoration-color: var(--red);
}
.offres-vitrine .offre-carte--noble .price__unite,
.offres-vitrine .card.premium .price__unite { color: var(--cream-soft, #E8E3D6); }
/* ⚠️ SUR LA CARTE PREMIUM, FOND MARINE : LE TEXTE COURANT SUIT LE FOND.
   `--ink-soft` (#3C4A63) est la couleur de texte secondaire de toutes les
   cartes ; sur le marine, elle donne 1,97:1 — c'est-à-dire rien. Les passages
   concernés reçoivent donc la couleur claire du site, celle que `styles.css`
   donne déjà à sa carte marine (`.offre-carte--noble`).

   ⚠️ ET LE PRIX BARRÉ EST EXCLU DE CETTE LISTE — DÉFAUT VU À L'ÉCRAN APRÈS
   LA CORRECTION 6, PUIS CORRIGÉ.
   La première version incluait `.secondary s`. Or le prix barré a sa PROPRE
   règle, plus bas : rouge sur fond rosé (correction 7). Comme celle-ci est
   plus spécifique — `.card.premium .secondary s` pèse (0,4,1) contre (0,2,1) —,
   elle l'emportait, et le « 106,80 € » barré de la carte Premium s'affichait
   en CRÈME sur un fond ROSÉ PÂLE : environ 1,2:1, c'est-à-dire invisible.
   C'est très exactement le défaut que la correction 6 venait de réparer
   ailleurs, réintroduit par la porte d'à côté.
   Le prix barré garde donc SA règle, sur toutes les cartes, sans exception. */
.offres-vitrine .card.premium .desc,
.offres-vitrine .card.premium .secondary,
.offres-vitrine .card.premium .offre-carte__liste { color: var(--cream-soft, #E8E3D6); }

/**
 * ⚠️ DÉFAUT VU À L'ÉCRAN, EN MODE MENSUEL, SUR LA CARTE PREMIUM.
 * ------------------------------------------------------------------
 * La carte Premium a un fond MARINE (`--navy`), et la règle ci-dessus met
 * `.price__unite` en `--cream-soft` pour cette carte — c'est juste. Mais en
 * MENSUEL, la variante annuelle est masquée et le prix mensuel s'affiche…
 * dans un encadré BLANC (`.prix` porte son propre fond). Le « / mois » en
 * crème devenait alors du crème sur blanc : invisible. Relevé sur la capture
 * du mode mensuel, carte Premium, « 8,90 € / mois » — le « / mois » avait
 * disparu.
 * Ce n'est pas une question de goût : sans son unité, un prix est ambigu.
 * Sur un fond clair, c'est donc la couleur de texte claire du site qui
 * s'applique, exactement comme sur les deux autres cartes.
 *
 * ⚠️ ET LE 8 OCTOBRE 2026, LA MÊME MESURE A ÉTÉ REFAITE EN MODE ANNUEL :
 * l'encadré du prix est le MÊME dans les deux variantes — il vient de la
 * règle `.price` de `styles.css`, qui l'a posé là. La règle ne dépendait donc
 * pas de la durée, et le « / mois » de la variante annuelle était invisible
 * lui aussi. Le correctif est étendu aux DEUX variantes, et il est mesuré.
 */
.offres-vitrine .card.premium .price__unite { color: var(--ink-soft); }

.offres-vitrine .price--dossier {
  font-size: clamp(1.6rem, 4vw, 2.1rem);
  color: var(--ink-soft);
}

.offres-vitrine .secondary {
  color: var(--ink-soft);
  font-size: 0.88rem;
  margin: 0.7rem 0 0;
}
/**
 * ⚠️ LA COULEUR DU PRIX BARRÉ N'EST PLUS ICI, ET C'EST UNE CORRECTION DE MA
 * PART, PAS UN OUBLI.
 * La règle d'origine était `.secondary s { color: var(--ink-soft) }`. En
 * ajoutant la correction 7 ailleurs, DEUX règles de même spécificité (0,2,1)
 * ont visé le même élément — et c'est la DERNIÈRE qui gagne. Le second prix
 * barré, « 82,80 € payés au mois sur douze », restait donc en marine : mesuré
 * `rgb(60,74,99)` sur le fond rosé, alors que le fond rosé, lui, était bien
 * appliqué. Un fond rouge avec un chiffre marine, c'est la moitié de la
 * correction, et cela ne se voyait qu'en mesurant la COULEUR et pas seulement
 * le fond.
 * Une seule règle écrit donc la couleur d'un prix barré, et elle est dans le
 * bloc de la correction 7 (`.prix__barre, .secondary s`).
 */
.offres-vitrine .secondary s { text-decoration-thickness: 2px; text-decoration-color: var(--red); }

/* LA PASTILLE D'ÉCONOMIE — le fond jaune pâle de sa maquette (`#fff6c4`). */
.offres-vitrine .saving {
  display: inline-block;
  align-self: flex-start;
  margin: 0.6rem 0 0.9rem;
  padding: 0.32rem 0.6rem;
  border-radius: 8px;
  background: #FFF6C4;
  color: var(--navy);
  font-size: 0.76rem;
  font-weight: 700;
}
/* ⚠️ SUR LA CARTE PREMIUM, FOND MARINE : LA PASTILLE CHANGE DE COULEUR.
   `#fff6c4` sur `--navy` reste lisible, mais le texte marine du produit y
   serait noir sur jaune au milieu d'une carte sombre — on garde donc le
   même contraste que le reste de la carte. */
.offres-vitrine .card.premium .saving {
  background: var(--gold);
  color: var(--navy);
}

/* LE BOUTON — sa forme (`border-radius: 12px`, pleine largeur). */
.offres-vitrine .cta {
  display: block;
  width: 100%;
  padding: 0.82rem 0.7rem;
  border: 0;
  border-radius: 12px;
  background: var(--gold);
  color: var(--navy);
  font: inherit;
  font-weight: 750;
  text-align: center;
  text-decoration: none;
  line-height: 1.3;
  cursor: pointer;
}
.offres-vitrine .cta:hover { background: var(--gold-light); }
.offres-vitrine .free .cta {
  background: #EDF2FA;
  color: var(--navy);
}
.offres-vitrine .free .cta:hover { background: #E2EAF7; }
.offres-vitrine .card.dossier .cta { background: var(--navy); color: #fff; }
.offres-vitrine .card.dossier .cta:hover { background: var(--navy-2); }

/* LA LISTE — sa puce est un « ✓ », et le trait est au-dessus. */
.offres-vitrine .offre-carte__liste {
  padding: 1.1rem 0 0;
  margin: 1.1rem 0 0;
  border-top: 1px solid var(--line);
  list-style: none;
  font-size: 0.88rem;
}
.offres-vitrine .offre-carte__liste li { margin: 0.62rem 0; }
.offres-vitrine .offre-carte__liste li::before {
  content: '✓';
  color: var(--gold-ink);
  font-weight: 800;
  margin-right: 0.55rem;
}
.offres-vitrine .card.premium .offre-carte__liste { border-top-color: var(--line-dark); }
.offres-vitrine .card.premium .offre-carte__liste li::before { color: var(--gold-light); }

/* LE DÉPLIANT — « Tous les avantages », poussé en bas de carte. */
.offres-vitrine .details {
  margin-top: auto;
  padding-top: 0.85rem;
  font-size: 0.82rem;
}
.offres-vitrine .details summary { cursor: pointer; color: var(--gold-ink); }
.offres-vitrine .card.premium .details summary { color: var(--gold-light); }
.offres-vitrine .details p { margin: 0.55rem 0 0; color: var(--ink-soft); }
.offres-vitrine .card.premium .details p { color: var(--cream-soft, #E8E3D6); }


/* ==========================================================================
   6. ⚠️ LA CARTE ÉCOLES EST VISIBLE DANS LES TROIS ÉTATS.
   --------------------------------------------------------------------------
   C'EST LE CŒUR DE CETTE FEUILLE, ET LA RAISON EST ÉCRITE DANS LE PRODUIT :
   le fondateur, mot pour mot — « Toi-même tu vois que l'École est nulle part
   sur cette page, c'est une faute. »

   MESURÉ SUR LA VERSION PRÉCÉDENTE : `main.innerText` ne portait le mot
   « école » que DEUX fois, et les deux étaient le lien du menu et le bouton
   du sélecteur. La carte `offre-ecoles` EXISTAIT, mais `styles.css` la
   cachait — `.offres-bloc { display: none }` tant qu'on n'avait pas cliqué
   sur « Écoles ». Un proviseur ne trouvait donc RIEN.

   ⚠️ POURQUOI SA MAQUETTE RÉSISTE, ELLE : sa carte Écoles est un BANDEAU
   jaune posé HORS des trois cartes, donc visible sans rien toucher. Notre
   carte Écoles, elle, est la vraie carte du produit — avec sa grille par
   niveau — et elle vit dans les blocs de type. On lui rend donc sa place
   par une règle, plutôt que de la sortir de sa grille.

   ⚠️ LA SPÉCIFICITÉ EST CHOISIE, PAS SUBIE. Dans `styles.css` :
       .offres-bloc { display: none; }
       html[data-offre-type="ecoles"] .offres-bloc[data-offre-type="ecoles"] { display: grid; }
   La première a la spécificité (0,1,0) ; la seconde (0,3,1) + un type. Une
   règle simple `.offres-bloc--ecoles { display: grid }` — (0,1,0) — PERDRAIT
   contre la seconde, écrite plus haut mais plus spécifique. On écrit donc le
   même sélecteur que le produit, à spécificité égale : chargé après, il
   l'emporte par l'ordre. C'est la règle CSS, et elle est vérifiable.
   ========================================================================== */
.offres-bloc.offres-bloc--ecoles { display: grid; }
html[data-offre-type="individuel"] .offres-bloc.offres-bloc--ecoles,
html[data-offre-type="famille"] .offres-bloc.offres-bloc--ecoles,
html[data-offre-type="ecoles"] .offres-bloc.offres-bloc--ecoles { display: grid; }

/* ⚠️ ET LE CONTENEUR DES CARTES RESTE EN FLUX NORMAL — `.offres-zone` est
   déjà un bloc, et les deux blocs visibles (celui du type, puis Écoles) s'y
   empilent. On ne le passe PAS en grille : ce serait lui qui déciderait des
   colonnes, alors que c'est `.offres-grille`, portée par chaque bloc, qui
   les décide — et c'est écrit dans `styles.css`. */

/* ==========================================================================
   6 bis. ⚠️ CORRECTION 8 DU FONDATEUR — LA CARTE ÉCOLES EST ALIGNÉE.
   --------------------------------------------------------------------------
   MOT POUR MOT : « Aligne cette offre sur la même ligne horizontale que les
   autres offres, afin que tout saute aux yeux sans avoir besoin de défiler. »
   Il a envoyé la capture : la carte Écoles est SEULE, CENTRÉE, dans une
   colonne étroite au milieu de la page.

   ⚠️ CE QUI LA CENTRAIT, ET C'EST MESURÉ — DEUX RÈGLES, PAS UNE.
   `styles.css` la posait dans une grille à UNE SEULE COLONNE, puis la
   plafonnait à 30 rem et la centrait par `margin: auto` ; `offres.css`
   ajoutait par-dessus un plafond de 34 rem et le même centrage. Relevé sur la
   page servie, avant correction :

       .offres-bloc--ecoles   grid-template-columns: 1084.81px   (1 colonne)
       #offre-ecoles          max-width: 480px, centrée, x = 480
       les trois cartes       x = 178, 546, 914 — largeur 349 px

   La carte Écoles vivait donc à x = 480 pendant que les autres vivaient à
   x = 178. Elle ne partageait NI le bord gauche NI la largeur des autres : le
   fondateur n'a pas décrit un goût, il a décrit ces trois nombres.

   ⚠️ OÙ ELLE EST POSÉE, ET POURQUOI LA PREMIÈRE COLONNE.
   Il n'existe QU'UNE offre scolaire — « sur dossier » —, donc elle ne peut pas
   être « sur la même ligne que les autres » au sens littéral : il n'y a pas
   d'autres cartes dans son type. Deux places étaient défendables : la
   première colonne (celle de « Découverte ») ou celle du milieu (celle de
   « Standard », l'offre que le produit recommande).
   C'est LA PREMIÈRE COLONNE qui est retenue, et la raison est une règle
   unique plutôt qu'une exception : dans CHAQUE type, la première carte du type
   est à la première colonne — Découverte en Individuel, Découverte en Famille,
   et la carte Écoles est la première (et seule) carte du type Écoles. Une
   seule règle suffit donc à décrire les trois types, et l'œil retrouve
   l'offre scolaire exactement là où il a trouvé les trois autres.
   La colonne du milieu aurait placé une offre « Premium uniquement » sous la
   colonne de « Standard », c'est-à-dire sous une autre étiquette tarifaire :
   une place qui dit autre chose que la carte.

   ⚠️ ON NE TOUCHE PAS À LA GRILLE ELLE-MÊME, ET C'EST DÉLIBÉRÉ.
   Les colonnes (3, puis 2 sous 1 080 px, puis 1 sous 640 px) restent celles
   de `.offres-grille`, donc EXACTEMENT celles des autres cartes : c'est ce
   qui garantit le même bord gauche et la même largeur à toutes les largeurs
   d'écran. On retire seulement le plafond et le centrage — et l'unique carte
   du bloc se place d'elle-même dans la première colonne.
   --------------------------------------------------------------------------
   ⚠️ LA SPÉCIFICITÉ EST CHOISIE, PAS SUBIE : les deux règles de `styles.css`
   visent `.offres-bloc[data-offre-type="ecoles"]` (0,2,0) et son enfant
   direct (0,3,0). On écrit donc (0,2,0) et (0,3,0), à spécificité ÉGALE, et
   `offres.css` étant chargé après, c'est lui qui l'emporte — la même règle
   CSS que celle déjà employée pour `display: grid`. */
.offres-vitrine .offres-bloc--ecoles {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 1.35rem;
}
.offres-vitrine .offres-bloc--ecoles > .offre-carte {
  max-width: none;
  margin-left: 0;
  margin-right: 0;
}
/* Les mêmes paliers que `.offres-grille`, écrits parce que la règle
   ci-dessus les remplace : à spécificité égale, la nôtre gagne sur la grille
   générique. Les oublier figerait la carte Écoles à trois colonnes sur un
   téléphone. */
@media (max-width: 1080px) {
  .offres-vitrine .offres-bloc--ecoles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .offres-vitrine .offres-bloc--ecoles { grid-template-columns: minmax(0, 1fr); }
}


/* ==========================================================================
   7. LES PASTILLES DE LA CARTE — « TOP DEAL », « Le meilleur rapport »,
   « Sur dossier ».
   --------------------------------------------------------------------------
   `.etiquette-deal` et ses variantes sont déjà habillées par `styles.css`,
   y compris la règle qui fait DISPARAÎTRE « TOP DEAL » en mensuel. On ne la
   touche pas : c'est un garde-fou, et il est mesuré par la synchronisation.
   ========================================================================== */
.offres-vitrine .etiquette-deal { font-size: 0.68rem; }

/**
 * ⚠️ CORRECTION 5 DU FONDATEUR — « TOP DEAL » N'ATTIRE PAS L'ŒIL.
 * ------------------------------------------------------------------
 * MOT POUR MOT : « Figure-toi que le bouton Top deal, je ne le vois que
 * maintenant que j'écris ces lignes ! Cela veut dire qu'il n'attire pas l'œil
 * = il faut corriger cela, il faut lui mettre un contraste plus vif afin que
 * cela n'échappe pas à l'œil. »
 *
 * ⚠️ CE N'EST PAS UNE OPINION, C'EST UN CONSTAT D'USAGE : il a regardé sa
 * propre page plusieurs fois avant de la voir. Un défaut qu'on ne voit qu'en
 * écrivant le rapport est un défaut de SAillance, et la saillance se mesure.
 *
 * CE QUI A ÉTÉ MESURÉ AVANT, ET QUI EXPLIQUE POURQUOI IL NE LA VOYAIT PAS :
 *   · sa pastille mesurait 10,88 px de texte — la plus petite chose de la
 *     carte, alors que c'est la seule qui doit être vue ;
 *   · son fond était le MARINE de la page, exactement la couleur du titre
 *     « Standard » à côté duquel elle vit : à trois mètres, la ligne se lit
 *     « Standard TOP DEAL » comme un seul mot sombre ;
 *   · son texte était l'or clair, déjà employé par le titre de la carte
 *     voisine et par le liseré du prix.
 * Rien n'était illisible — tout était INDISTINCT. C'est la définition d'une
 * pastille qui n'attire pas l'œil.
 *
 * CE QUI CHANGE, ET RIEN D'AUTRE :
 *   · le TEXTE passe de l'or clair au BLANC : 12,52:1 → 18,77:1 sur le fond
 *     de la pastille (mesuré, WCAG 2.1 — rapport de luminance (L1+0,05)/(L2+0,05),
 *     relevé sur la page servie dans les deux états) ;
 *   · le FOND passe au marine profond `#061223`, plus sombre que le marine de
 *     la page : la pastille se détache donc aussi DAVANTAGE de la carte, et
 *     elle ne se confond plus avec la couleur du titre « Standard » ;
 *   · la TAILLE passe de 10,88 px à 14 px (+29 %), la graisse à 800, et le
 *     rectangle de 85×20 px à 109×25 px — mesuré ;
 *   · un ANNEAU et un HALO d'or clair l'entourent : c'est ce qui la fait
 *     remarquer AVANT d'être lue.
 *
 * ⚠️ ET LE DÉFAUT N'ÉTAIT PAS LA LISIBILITÉ, C'ÉTAIT LA SAILLANCE — DIT
 * FRANCHEMENT : 12,52:1 était déjà très au-dessus du seuil de 4,5:1. La
 * pastille n'était pas illisible, elle était TROP PETITE ET TROP SOMBRE POUR
 * SON ENTOURAGE. Le gain de contraste est réel mais modeste ; le gain de
 * taille et l'anneau d'or sont ce qui la rend visible.
 *
 * ⚠️ LES QUATRE RÈGLES DE PLACE SONT INTACTES — ELLES SONT CONTRÔLÉES :
 *   1. elle vit SUR une carte (`.etiquette-deal--top` dans le `<h2>`) ;
 *   2. uniquement sur les DEUX cartes Standard — `offre-standard` et
 *      `offre-standard-famille` —, jamais sur Découverte ni Premium ;
 *   3. JAMAIS sur la carte Écoles : il n'existe qu'une offre scolaire, donc
 *      « la plus avantageuse » n'a aucun sens entre plusieurs ;
 *   4. elle DISPARAÎT EN MENSUEL, par la règle de `styles.css` que ce fichier
 *      ne touche pas (`html[data-duree="mensuel"] .etiquette-deal--top`).
 * La correction ne change donc QUE son aspect. Le contrôle de la
 * synchronisation compte toujours exactement DEUX pastilles, et la capture du
 * mode mensuel est refaite pour prouver la quatrième règle.
 * ------------------------------------------------------------------
 */
.offres-vitrine .etiquette-deal--top {
  margin-left: 0.55rem;
  padding: 0.2rem 0.6rem;
  border: 1px solid var(--gold-light);
  background: #061223;
  color: #FFFFFF;
  font-size: 0.875rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  box-shadow: 0 0 0 2px rgba(255, 215, 0, 0.28), 0 2px 7px rgba(6, 18, 35, 0.4);
}


/* ==========================================================================
   8. LE BANDEAU ÉCOLES, LA MENTION, ET LES TROIS PRINCIPES
   --------------------------------------------------------------------------
   Le bandeau jaune est SA forme : `.schools`, `.schoolbadge`, le titre à
   gauche, le bouton marine à droite. Sur une seule colonne en dessous de
   800 px, comme chez lui.
   ========================================================================== */
.offres-vitrine .schools {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  margin-top: 1.75rem;
  padding: 1.7rem 1.9rem;
  border-radius: 18px;
  background: var(--gold);
  color: var(--navy);
}
.offres-vitrine .schools h2 {
  font-family: var(--font-title);
  font-size: 1.55rem;
  margin: 0;
}
.offres-vitrine .schools p { margin: 0.3rem 0; font-size: 0.88rem; }
.offres-vitrine .schoolbadge {
  display: inline-block;
  padding: 0.25rem 0.75rem;
  border-radius: 15px;
  background: var(--navy);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
}
.offres-vitrine .schools a {
  flex: none;
  padding: 0.85rem 1.4rem;
  border-radius: 12px;
  background: var(--navy);
  color: #fff;
  font-weight: 750;
  text-decoration: none;
  white-space: nowrap;
}
.offres-vitrine .schools a:hover { background: var(--navy-2); }

.offres-vitrine .notice {
  margin: 1.5rem auto 0;
  max-width: 62rem;
  text-align: center;
  font-size: 0.78rem;
  color: var(--ink-soft);
  line-height: 1.65;
}
.offres-vitrine .principles {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.9rem;
  margin-top: 1.75rem;
  font-size: 0.82rem;
  font-weight: 650;
}

/* ==========================================================================
   9. LE PETIT ÉCRAN — CE QUE DEVIENNENT LES SÉLECTEURS, ET RIEN NE DÉBORDE.
   --------------------------------------------------------------------------
   ⚠️ LE FONDATEUR A POSÉ LA QUESTION LUI-MÊME : « sur un téléphone, trois
   options horizontales peuvent déborder : dis-moi ce que tu fais dans ce
   cas ». Voici la réponse, et elle est mesurée plutôt que promise.

   ⚠️ ON NE RAPETISSE PAS LA POLICE, ON RÉDUIT LA MARGE — ET ON LAISSE
   PASSER À LA LIGNE PLUTÔT QUE DE COUPER.
   Les boutons passent à 24 px (correction 3), ce qui les rend lisibles mais
   larges : « Individuel » + « Famille » + « Écoles » demandent environ 340 px
   avec les marges d'avant. Sur un écran de 390 px il reste environ 358 px, et
   cela tient donc encore — de 12 px. Sous 360 px, cela ne tient plus.
   Trois choix étaient possibles, et deux sont mauvais :
     · réduire la police → les sélecteurs ne seraient plus à la taille des noms
       d'offres, c'est-à-dire que la correction 3 serait annulée sur téléphone ;
     · rogner le texte ou le laisser sortir → un mot coupé sur la page qui vend.
   On garde donc la taille, on RÉDUIT LA MARGE, et `.switch` porte
   `flex-wrap: wrap` : sous 360 px, le troisième bouton descend sur une
   deuxième ligne du MÊME bloc blanc, au lieu de déborder. Rien n'est coupé,
   rien n'est plus petit, et la disposition reste horizontale.
   ⚠️ ET C'EST LE MÊME PRINCIPE QUE SA MAQUETTE : son `.controls` portait déjà
   `flex-wrap: wrap`, et ses deux sélecteurs se repliaient ainsi.
   ========================================================================== */
@media (max-width: 800px) {
  .offres-vitrine .schools { flex-direction: column; align-items: flex-start; }
  .offres-vitrine .schools a { width: 100%; text-align: center; }
  .offres-vitrine .controls { gap: 0.75rem; }
  .offres-vitrine .switch { width: 100%; justify-content: center; }
  .offres-vitrine .switch button { flex: 1 1 auto; padding: 0.5rem 0.6rem; }
  .offres-vitrine .desc { min-height: 0; }
  .offres-pays select { min-width: 0; width: 100%; }
  /* La bande des trois mots : ils passent l'un sous l'autre quand la largeur
     ne permet plus de les lire côte à côte — c'est la conséquence de
     `flex: 1 1 16rem`, pas une règle de plus. */
  .offres-vitrine .offre-type-vedette__mot { flex-basis: 20rem; }
}