/* =====================================================================
   LA SECTION PROMOTIONS DE L'ACCUEIL — sa fiche n° 03, 21/10/2026
   ---------------------------------------------------------------------
   ⭐ TOUTES LES VALEURS VIENNENT DE SA FICHE, et aucune n'est inventée.
   Ses tableaux des sections 1, 2 et 6.2 sont recopiés tels quels :

     la section   1320 px de large · centrée · 80 px de haut en bas sur
                  grand écran, 48 px sur téléphone · fond #05080F avec
                  un léger dégradé bleu
     le titre     42 px · 700 · #F5F7FC
     le sous-titre 17 px · #AEBBD0 · 36 px d'espace en dessous
     les cartes   fond #0D1421 · bordure 1 px #2A3B54 · coin 14 px ·
                  marge intérieure 28 px · titre 22 px / 700 ·
                  description 15 px / 400 · texte #F5F7FC ·
                  texte secondaire #AEBBD0 · accent #4F8BFF ·
                  ombre légère, sans néon
     le bouton    fond #142747 · bordure #4F8BFF · texte #FFFFFF ·
     de demande   survol #1D3966 · 44 px de haut · 20 px de côté ·
                  coin 8 px · texte 13–14 px · graisse 600 ·
                  pleine largeur sur téléphone

   ⛔ TOUT EST SOUS LA CLOCHE `#promotions` : cette feuille n'habille que
   cette section, et rien d'autre sur la page. C'est la même précaution
   que celle de la feuille du configurateur.
   ===================================================================== */

#promotions {
  /* Son fond, et son « léger dégradé bleu ». Léger veut dire léger :
     le bleu ne dépasse pas 10 % d'opacité, et la règle 7 du projet
     interdit qu'il bouge. */
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(79, 139, 255, 0.1) 0%, rgba(79, 139, 255, 0) 60%),
    #05080f;
  padding: 80px 0;
}

#promotions .pq-wrap {
  max-width: 1320px;
  margin: 0 auto;
  text-align: center;
}

#promotions .pq-head {
  /* Ses 36 px d'espace sous le sous-titre vivent ici, une seule fois. */
  margin-bottom: 36px;
}

#promotions .pq-h2 {
  margin: 0;
  font-size: 42px;
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.025em;
  color: #f5f7fc;
}

#promotions .pq-sous {
  margin: 16px auto 0;
  max-width: 760px;
  font-size: 17px;
  line-height: 1.55;
  color: #aebbd0;
}

/* ---------------------------------------------------------------------
   LA GRILLE — trois par ligne, puis deux, puis une
   ---------------------------------------------------------------------
   ⭐ `1fr` et non une largeur fixe : les cartes gardent la MÊME hauteur
   sur une ligne (`align-items: stretch`, qui est le défaut), et leurs
   boutons s'alignent en bas parce que chaque carte est elle-même une
   colonne dont le bas est poussé (`margin-top: auto`). C'est sa
   section 9, mot pour mot : « hauteur cohérente, boutons alignés en
   bas ».
   --------------------------------------------------------------------- */
#promotions .pq-grille {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
  text-align: left;
}

/* 🔴 « LA PROMOTION PRINCIPALE OCCUPE DEUX COLONNES » A ÉTÉ RETIRÉ LE
   22/10/2026, ET IL FAUT DIRE PAR QUOI : cette règle tenait sa FICHE
   N° 03, section 8 (« une campagne majeure dans une carte plus
   grande »). ⭐ Sa FICHE N° 12, POINT 4 est plus RÉCENTE, et c'est LUI
   qui l'écrit : « TOUTES les cartes ont la MÊME taille et la MÊME
   importance (cela REMPLACE ma fiche n° 03 sur ce point). » */

/* ⭐ UNE SEULE PROMOTION ACTIVE : une carte plus large et plus
   valorisée (sa section 2). Elle prend toute la ligne, sans dépasser
   une largeur lisible. */
#promotions .pq-grille.pq-une-seule {
  grid-template-columns: minmax(0, 860px);
  justify-content: center;
}

#promotions .pq-carte {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  background: #0d1421;
  border: 1px solid #2a3b54;
  border-radius: 14px;
  padding: 28px;
  /* « Ombre légère, sans néon excessif. » */
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.32);
}

/* 🔴 LE LISERÉ BLEU ET LE FOND DÉGRADÉ DE LA CARTE PRINCIPALE SONT
   PARTIS LE 22/10/2026, ET IL FAUT DIRE PAR QUOI : ils tenaient sa
   FICHE N° 03, section 8. ⭐ Sa FICHE N° 12, POINT 4 les remplace :
   « la MÊME taille et la MÊME importance ». ⛔ Une couleur qui dort
   dans la feuille revient au premier agent qui relit ce bloc. */

/* ---------------------------------------------------------------------
   LE HAUT DE LA CARTE
   --------------------------------------------------------------------- */
#promotions .pq-gros {
  margin: 0 0 12px;
  line-height: 1;
}

#promotions .pq-pct {
  font-size: 40px;
  font-weight: 750;
  color: #4f8bff;
}

#promotions .pq-off,
#promotions .pq-av {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #4f8bff;
}

#promotions .pq-av {
  font-size: 26px;
  letter-spacing: -0.01em;
  line-height: 1.15;
}

#promotions .pq-titre {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.25;
  color: #f5f7fc;
}

#promotions .pq-desc {
  margin: 10px 0 0;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.55;
  color: #aebbd0;
}

/* ---------------------------------------------------------------------
   LE MILIEU — les montants, les conditions, la fin
   --------------------------------------------------------------------- */
#promotions .pq-milieu {
  margin-top: 18px;
}

#promotions .pq-px {
  display: flex;
  gap: 22px;
  margin-bottom: 14px;
}

#promotions .pq-lb {
  display: block;
  font-size: 11.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #aebbd0;
}

#promotions .pq-plein {
  font-size: 18px;
  color: #aebbd0;
}

#promotions .pq-promo {
  font-size: 20px;
  font-weight: 700;
  color: #f5f7fc;
}

#promotions .pq-cond {
  margin: 0 0 12px;
  font-size: 13.5px;
  line-height: 1.5;
  color: #aebbd0;
}

#promotions .pq-cond-lb {
  font-weight: 700;
  color: #f5f7fc;
}

#promotions .pq-fin {
  margin: 0;
  font-size: 13px;
  color: #aebbd0;
}

#promotions .pq-fin-lb {
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

#promotions [data-promo-rebours] {
  font-weight: 700;
  color: #f5f7fc;
}

/* Le dernier jour se voit : c'est le seul jour où le visiteur a une
   raison de se dépêcher. La classe est posée par le script. */
#promotions .pq-fin.pc-fin-today {
  color: #4f8bff;
  font-weight: 700;
}

/* ---------------------------------------------------------------------
   LE BAS — les boutons, alignés en bas
   --------------------------------------------------------------------- */
#promotions .pq-bas {
  /* ⭐ C'EST CETTE LIGNE QUI ALIGNE LES BOUTONS : elle pousse le bas de
     la carte vers le bas, quelle que soit la longueur du texte. */
  margin-top: auto;
  padding-top: 20px;
}

#promotions .pq-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-height: 44px;
  padding: 0 22px;
  border-radius: 8px;
  /* ⛔ LA COULEUR DE CE BOUTON N'EST PLUS ÉCRITE ICI : le costume
     neutre du 03/11/2026 au soir est posé en bas de cette feuille,
     et il lit les jetons `--btn-neutre-*` de `socle.css`. Laisser
     un fond plein ici ferait deux feuilles qui se contredisent. */
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-decoration: none;
}

/* ⭐ LE BOUTON DE DEMANDE DE CODE — ses couleurs exactes (6.2).
   ⛔ Il ne doit pas concurrencer le bouton principal : il est donc en
   fond sombre et bordé, là où le principal est plein. */
#promotions .pq-demande {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid #2a3b54;
}

#promotions .pq-veut {
  margin: 0 0 10px;
  font-size: 13.5px;
  color: #aebbd0;
}

#promotions .pq-code {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-height: 44px;
  padding: 0 20px;
  border-radius: 8px;
  /* ⛔ LA COULEUR DE CE BOUTON N'EST PLUS ÉCRITE ICI : le costume
     neutre du 03/11/2026 au soir est posé en bas de cette feuille,
     et il lit les jetons `--btn-neutre-*` de `socle.css`. Laisser
     un fond plein ici ferait deux feuilles qui se contredisent. */
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-decoration: none;
}

#promotions .pq-note {
  margin: 10px 0 0;
  font-size: 11.5px;
  line-height: 1.45;
  color: #aebbd0;
}

/* =====================================================================
   TABLETTE — deux cartes par ligne (sa section 9)
   ===================================================================== */
@media (max-width: 1039px) {
  #promotions .pq-grille {
    grid-template-columns: repeat(2, 1fr);
  }
  /* ⛔ `span 2` sur deux colonnes ferait une carte pleine largeur, ce
     qui est voulu : la principale reste la plus grande. */
}

/* =====================================================================
   TÉLÉPHONE — une carte par ligne, boutons pleine largeur
   ---------------------------------------------------------------------
   ⭐ SES 20 px DE MARGE : ils sont posés sur le conteneur, pas sur les
   cartes, pour qu'aucune carte ne puisse dépasser l'écran. Sa
   section 9 : « aucun débordement horizontal ».
   ===================================================================== */
@media (max-width: 767px) {
  #promotions {
    padding: 48px 0;
  }
  #promotions .pq-wrap {
    padding-left: 20px;
    padding-right: 20px;
  }
  #promotions .pq-h2 {
    font-size: 30px;
  }
  #promotions .pq-sous {
    font-size: 15px;
  }
  #promotions .pq-grille,
  #promotions .pq-grille.pq-une-seule {
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
  }
  /* 🔴 La remise à une colonne de la carte principale est partie avec
     elle (fiche n° 12, point 4) : il n'y a plus de carte à ramener. */
  #promotions .pq-carte {
    padding: 22px;
  }
  #promotions .pq-cta,
  #promotions .pq-code {
    /* « Sur mobile : bouton pleine largeur. » */
    display: flex;
    width: 100%;
  }
  #promotions .pq-px {
    gap: 16px;
  }
}

/* =====================================================================
   L'ECHELLE — PASSE D'HARMONISATION DU 22/10/2026
   ---------------------------------------------------------------------
   Ecrite EN DERNIER dans cette feuille, et c'est volontaire : cette
   feuille est chargee APRES celle du socle, donc le socle ne peut pas
   la corriger de l'exterieur. La lecon d'hier : une valeur ECRITE n'est
   pas une valeur APPLIQUEE tant qu'une autre feuille passe apres.
   ⛔ AUCUNE COULEUR de sa fiche n'est touchee. AUCUN texte. AUCUNE
   animation. Seules les TAILLES, les ESPACEMENTS, les HAUTEURS DE
   BOUTON et les RAYONS entrent dans l'echelle du socle.
   ⭐ Les graisses 700 et 750 demandees ici n'existent pas dans les
   fichiers de polices servis (Inter 400 et 600, Space Grotesk 600) :
   le navigateur les IMITAIT. On demande donc la graisse qui existe.
   ===================================================================== */
#promotions { padding: var(--sec-pt) 0 var(--sec-pb); }
#promotions .pq-h2 { font-size: clamp(var(--ts-7), 3.4vw, var(--ts-8)); font-weight: var(--poids-titre); }
#promotions .pq-sous { font-size: var(--ts-5); }
#promotions .pq-carte { border-radius: var(--rd-3); }
#promotions .pq-pct { font-size: var(--ts-9); font-weight: var(--poids-titre); }
#promotions .pq-off { font-size: var(--ts-4); font-weight: var(--poids-titre); }
#promotions .pq-av { font-size: var(--ts-7); font-weight: var(--poids-titre); }
#promotions .pq-titre { font-size: var(--ts-6); font-weight: var(--poids-titre); }
#promotions .pq-desc { font-size: var(--ts-3); }
#promotions .pq-plein { font-size: var(--ts-5); }
#promotions .pq-promo { font-size: var(--ts-6); font-weight: var(--poids-titre); }
#promotions .pq-cond { font-size: var(--ts-2); }
#promotions .pq-cond-lb { font-weight: var(--poids-titre); }
#promotions .pq-fin { font-size: var(--ts-2); }
#promotions .pq-lb { font-size: var(--ts-1); }
#promotions .pq-note { font-size: var(--ts-1); }
#promotions .pq-veut { font-size: var(--ts-2); }
#promotions .pq-cta {
  min-height: var(--btn-h);
  border-radius: var(--rd-2);
  font-size: var(--ts-3);
  font-weight: var(--poids-titre);
}
#promotions .pq-code {
  min-height: var(--btn-h);
  border-radius: var(--rd-2);
  font-size: var(--ts-2);
  font-weight: var(--poids-titre);
}
@media (max-width: 767px) {
  #promotions .pq-h2 { font-size: var(--ts-7); }
  #promotions .pq-sous { font-size: var(--ts-3); }
}

/* =====================================================================
   ====  SA FICHE N° 10 DU 22/10/2026 — SON POINT 6, « PROMOTIONS »  ====
   ---------------------------------------------------------------------
   🔴 SES MOTS : « la composition ne va pas, ni dans l'alignement ni
   dans le design. C'est une partie TRÈS importante : présente-la
   beaucoup mieux (hiérarchie claire, la promotion principale mise en
   valeur, cartes alignées et de même hauteur, effet glass). Montre-moi
   ce que tu proposes. »

   ⭐ CE QUI N'ALLAIT PAS, MESURÉ À L'ÉCRAN AVANT DE TOUCHER À QUOI QUE
   CE SOIT (accueil anglaise, 1280 px) : la grille avait TROIS colonnes
   et la carte principale en occupait DEUX. Avec cinq promotions, cela
   donnait une première rangée de 2 cartes de hauteurs différentes,
   puis une rangée de 3. ⛔ Aucune des deux rangées ne s'alignait sur
   l'autre, et la carte principale n'était pas « mise en valeur » : elle
   était seulement plus large que sa voisine, qui la touchait.

   ⭐ CE QUE JE PROPOSE, EN TROIS GESTES, ET AUCUN NE TOUCHE AU TEXTE :
   ① LA PRINCIPALE DEVIENT UN BANDEAU, SEULE SUR SA LIGNE. Elle prend
      toute la largeur et se lit de gauche à droite en trois temps :
      l'offre (le grand pourcentage et le titre), ce qu'elle coûte et à
      quelles conditions, puis les boutons. ⛔ Rien n'est ajouté : ce
      sont les trois blocs que la carte portait DÉJÀ, posés côte à côte
      au lieu d'être empilés.
   ② LES AUTRES DEVIENNENT UNE SEULE RANGÉE DE QUATRE, toutes de la
      même largeur et de la même hauteur, leurs boutons sur une même
      ligne en bas. ⛔ Plus de rangée bancale : quatre colonnes, quatre
      cartes.
   ③ LE VERRE REMPLACE LES CADRES (son point 5). La principale se
      distingue par un verre BLEU et un filet bleu qui s'éteint vers le
      bas — ⛔ pas par un liseré qui fait le tour, et ⛔ pas par une
      lueur qui vit : la règle 7 du projet interdit ce qui bouge.
   ⭐ La hiérarchie se lit donc à TROIS signes au lieu d'un : la place,
   la taille du pourcentage, et la teinte du verre.
   ===================================================================== */
/* ⚠️ ET VOICI LE DÉFAUT QUE LA PREMIÈRE VERSION A RAMENÉ, VU À L'ÉCRAN
   ET PAS DEVINÉ : avec QUATRE colonnes et CINQ cartes secondaires, la
   cinquième se retrouvait SEULE sur une deuxième rangée. C'est le même
   défaut qu'avant, déplacé d'un cran.
   ⛔ Un nombre de colonnes ÉCRIT EN DUR ne peut pas marcher : le jour
   où une promotion s'ajoute ou s'arrête, la rangée redevient bancale,
   et personne ne le verra.
   ✅ ON PASSE DONC EN RANGÉE SOUPLE. Chaque carte demande 200 px et
   accepte de grandir : tant que l'ensemble tient sur une ligne, elles
   y tiennent toutes et se partagent la largeur ; quand il y en a trop,
   celles de la dernière ligne GRANDISSENT pour la remplir, au lieu de
   laisser un trou. ⭐ Les cartes d'une même ligne gardent la même
   hauteur, parce que c'est le comportement par défaut d'une rangée
   souple. ⭐ Le nombre de promotions n'est écrit NULLE PART. */
#promotions .pq-grille {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  align-items: stretch;
}
#promotions .pq-carte { flex: 1 1 200px; }

/* 🔴 LES SIX RÈGLES DU BANDEAU DE LA PROMOTION PRINCIPALE ONT ÉTÉ
   RETIRÉES LE 22/10/2026, ET IL FAUT DIRE PAR QUOI : elles donnaient à
   la carte `pq-grande` toute la largeur, trois colonnes, un
   pourcentage au plus haut pas de l'échelle et un verre bleu.
   ⭐ SA FICHE N° 12, POINT 4 — plus RÉCENTE, et il l'écrit lui-même —
   dit : « TOUTES les cartes ont la MÊME taille et la MÊME importance :
   plus de promotion "principale" plus grande (cela REMPLACE ma fiche
   n° 03 sur ce point). »
   ⛔ La classe `pq-grande` n'est plus posée du tout (voir
   `src/promos/accueil.ts`) : ces règles ne visaient plus rien, et une
   règle qui ne vise plus rien revient au premier agent qui relit ce
   bloc — avec sa taille et son bleu.
   ⭐ La nouvelle grille est écrite dans le bloc de la fiche n° 12, à la
   fin de cette feuille. */

/* ② LES CARTES, DE MÊME HAUTEUR
   ⭐ `1fr` et `stretch` suffisent à la hauteur ; ce qui manquait, c'est
   que leurs BOUTONS tombent sur la même ligne, et c'est le
   `margin-top: auto` du bas de carte qui le fait — il existait déjà. */
#promotions .pq-carte { height: 100%; }
/* ⭐ LA HIÉRARCHIE SE LIT AUSSI DANS LES TAILLES, ET PAS SEULEMENT
   DANS LA PLACE : le pourcentage du bandeau est au plus haut pas de
   l'échelle, celui des secondaires deux pas en dessous, et leur titre
   descend d'un pas pour ne plus se couper en trois lignes dans une
   carte étroite. ⛔ Toutes ces valeurs sont des pas de l'échelle : on
   ne rouvre pas le désordre qu'on vient de fermer. */
#promotions .pq-carte .pq-pct { font-size: var(--ts-8); }
#promotions .pq-carte .pq-titre { font-size: var(--ts-5); }
#promotions .pq-carte .pq-av { font-size: var(--ts-6); }

/* ③ LE VERRE — plus une seule bordure pleine */
#promotions .pq-carte {
  border: 1px solid transparent;
  background-color: transparent;
  background-image:
    linear-gradient(180deg, var(--verre-a), var(--verre-b)),
    linear-gradient(180deg, var(--filet-haut), var(--filet-bas));
  background-origin: border-box;
  background-clip: padding-box, border-box;
  backdrop-filter: var(--verre-flou);
  -webkit-backdrop-filter: var(--verre-flou);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.32);
}
/* ⛔ LE VERRE BLEU DE LA CARTE PRINCIPALE EST PARTI AVEC ELLE (fiche
   n° 12, point 4) : plus aucune carte n'a une matière différente. */
/* ⛔ LE VERRE BLEU DE CE BOUTON EST PARTI LE 03/11/2026 AU SOIR, avec
   le balayage : il a demandé « couleur NEUTRE fixe … même style pour
   les six ». Un verre bleu sur l'un des six aurait fait mentir
   « même style ». Le costume neutre est posé en bas de cette feuille. */
/* Le filet qui sépare la demande de code : un fondu, plus un trait. */
#promotions .pq-demande {
  border-top: 0;
  background: linear-gradient(90deg,
    var(--filet-haut), rgba(150, 185, 230, 0)) top left / 100% 1px no-repeat;
}

/* =====================================================================
   ====  SA FICHE N° 12 DU 22/10/2026 — SON POINT 4, « PROMOTIONS »  ===
   ---------------------------------------------------------------------
   🔴 SES MOTS : « PROMOTIONS : à refaire entièrement (organisation et
   design). TOUTES les cartes ont la MÊME taille et la MÊME importance :
   plus de promotion "principale" plus grande (cela REMPLACE ma fiche
   n° 03 sur ce point). »

   ⭐ CE QUE « LA MÊME TAILLE » INTERDIT, ET C'EST MESURABLE : une
   RANGÉE SOUPLE — celle de la fiche n° 10 — fait GRANDIR les cartes de
   la dernière ligne pour qu'elles remplissent la largeur. Deux cartes
   seules sur une ligne devenaient donc deux fois plus larges que les
   autres. ⛔ Une rangée souple ne peut PAS tenir « la même taille ».
   ✅ ON PASSE DONC EN GRILLE À COLONNES ÉGALES. Toutes les colonnes ont
   exactement la même largeur, à toutes les largeurs d'écran, quel que
   soit le nombre de promotions — et toutes les lignes la même hauteur.
   ⛔ LE NOMBRE DE COLONNES N'EST ÉCRIT NULLE PART : la grille en met
   autant que la largeur en autorise. C'est la leçon de la fiche n° 10
   (« un nombre de colonnes écrit en dur ne peut pas marcher »), gardée
   telle quelle — seule la façon de remplir la dernière ligne change.
   ⭐ `min(300px, 100%)` : sur un écran étroit, la carte ne réclame
   jamais plus que la place disponible — c'est ce qui empêche la grille
   de déborder, et c'est aussi le point 3 de sa fiche, « rien qui
   dépasse ».
   ===================================================================== */
#promotions .pq-grille {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
  grid-auto-rows: 1fr;
  gap: 20px;
  align-items: stretch;
}
/* ⛔ `flex` ne gouverne plus rien ici : on l'éteint pour que la carte
   ne garde pas une largeur de base héritée de la rangée souple. */
#promotions .pq-carte {
  flex: none;
  height: 100%;
  min-width: 0;
}

/* =====================================================================
   🔴 « VIEW PLANS », « DISCOVER THE OFFER » ET « REQUEST YOUR PROMO
      CODE » NE BALAIENT PLUS — SA DÉCISION DU 03/11/2026 AU SOIR
   ---------------------------------------------------------------------
   SES MOTS : « CES BOUTONS NE BALAIENT PAS : … "Request your promo
   code", "View plans", "Discover the offer" — dans les 3 langues,
   partout où ils apparaissent (y compris les cartes de promotions).
   → couleur NEUTRE fixe (pas de dégradé rouge↔bleu), et au survol un
   effet SIMPLE … Même style pour les six. »

   ⛔ CE QUI A ÉTÉ RETIRÉ ICI, ET IL FAUT SAVOIR QUE C'ÉTAIT DEUX BLOCS :
   celui de sa fiche n° 12 (le balayage d'un aller au survol) ET celui du
   03/11 au matin (le balayage sans fin). Les deux vivaient à cet
   endroit précis parce que `.pq-cta` et `.pq-code` sont les SEULS
   boutons du site qui ne portent pas la classe `.btn`, et que cette
   feuille est chargée APRÈS le socle.
   ⭐ C'est exactement pour cela que le costume neutre est REPOSÉ ici au
   lieu d'être simplement attendu du socle : une règle `.btn-neutre`
   écrite là-bas serait démentie par les `#promotions .pq-…` de cette
   feuille, qui pèsent plus lourd. « Une valeur écrite n'est pas une
   valeur appliquée. »
   ⛔ MAIS AUCUNE VALEUR N'EST RECOPIÉE : les cinq jetons
   `--btn-neutre-*` vivent dans `socle.css` et sont LUS ici. Un seul
   endroit à changer, et un essai refuse qu'une valeur soit réécrite.
   ===================================================================== */
#promotions .pq-cta::before,
#promotions .pq-code::before,
#promotions .pq-cta::after,
#promotions .pq-code::after { content: none; }

#promotions .pq-cta,
#promotions .pq-code,
#promotions .pq-cta:hover,
#promotions .pq-code:hover,
#promotions .pq-cta:focus-visible,
#promotions .pq-code:focus-visible {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: var(--btn-neutre-fond);
  background-image: none;
  background-color: var(--btn-neutre-fond);
  border: 1px solid var(--btn-neutre-cadre);
  color: var(--btn-neutre-encre);
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  transition: color .18s var(--ease), border-color .18s var(--ease);
}

#promotions .pq-cta:hover,
#promotions .pq-code:hover,
#promotions .pq-cta:focus-visible,
#promotions .pq-code:focus-visible {
  border-color: var(--btn-neutre-cadre-survol);
  color: var(--btn-neutre-encre-survol);
}

@media (prefers-reduced-motion: reduce) {
  #promotions .pq-cta,
  #promotions .pq-code { transition: none; }
}
:root[data-motion="off"] #promotions .pq-cta,
:root[data-motion="off"] #promotions .pq-code { transition: none; }

/* =====================================================================
   ====  SA FICHE N° 13 DU 22/10/2026 — SON POINT 2, « PROMOTIONS »  ===
   ---------------------------------------------------------------------
   🔴 SES MOTS : « "Want a promo code?" et le bouton "REQUEST YOUR PROMO
   CODE" sortent de la carte du PRIME BUNDLE : ils concernent TOUTES les
   promotions, donc ils se placent UNE seule fois, À L'EXTÉRIEUR des
   cartes (sous la grille, centrés). »

   ⭐ CE QUE CELA REMPLACE : sa fiche n° 03, section 6, qui posait ce
   bloc DANS chaque carte demandeuse. Le bloc est DÉPLACÉ, pas réécrit —
   son texte n'a pas changé d'un caractère, dans aucune des trois
   langues.

   ⭐ CE QUI PORTE « À L'EXTÉRIEUR », ET C'EST MESURABLE : le bloc n'est
   plus un enfant de `.pq-carte`, il est un frère de `.pq-grille`. Les
   trois règles de la maquette (marge du haut, remplissage, trait de
   séparation) étaient faites pour un PIED DE CARTE : elles sont donc
   remplacées ici, et pas seulement complétées.
   ⛔ Le filet du haut s'en va : à l'extérieur, il couperait la section
   en deux au lieu de séparer un pied de carte de son contenu.
   ===================================================================== */
#promotions .pq-demande {
  margin: var(--sp-5) 0 0;
  padding-top: 0;
  border-top: 0;
  background: none;
  display: grid;
  justify-items: center;
  text-align: center;
  gap: 10px;
}

/* Les deux phrases se centrent elles aussi, et leur largeur de lecture
   reste courte : une phrase centrée sur 1 200 px ne se lit pas. */
#promotions .pq-demande .pq-veut,
#promotions .pq-demande .pq-note {
  margin: 0;
  max-width: 46ch;
}