/* Les mises en page des pages de texte : /mentions-legales, /cgv, /engagements,
   /merci et /offres.

   ELLES VIVAIENT EN LIGNE, une balise <style> par page, jusqu'au 30 septembre
   2026. La politique de sécurité du site (`vercel.json`) devait donc autoriser
   `'unsafe-inline'` dans `style-src` pour ces cinq balises, et cette valeur
   autorise du même coup tout style qu'un attaquant aurait réussi à écrire dans
   une page. Sorties dans une feuille, elles se servent comme le reste et la
   valeur peut partir.

   Chaque page n'utilise que son propre préfixe (`ml`, `eng`, `mr`, `of`), donc
   les règles ne se rencontrent jamais. `ml` est partagé par /mentions-legales
   et /cgv, qui en recopiaient chacune une version : identiques, à trois règles
   près qui n'existent que sur /cgv. Chargée APRÈS `theme.css`, comme l'étaient
   les balises : l'ordre de la cascade n'a pas changé. */

/* ---- /mentions-legales et /cgv ---- */
/* Mêmes mesures que /engagements : une page de texte long se lit en
   colonne étroite, et chaque section porte son numéro en regard. */
.ml { max-width: 52rem; margin: 0 auto; padding: 48px 24px 90px; }
.ml__intro { font-size: 17px; line-height: 1.65; color: var(--muted-fg); max-width: 62ch; }
.ml__item { margin: 40px 0 0; padding: 26px 0 0; border-top: 1px solid var(--border); }
.ml__item:first-of-type { border-top: 0; padding-top: 0; }
.ml__num { font-family: var(--font-mono); font-size: 12px; color: var(--primary);
           letter-spacing: .1em; margin: 0 0 6px; }
.ml__titre { font-size: 21px; margin: 0 0 10px; }
.ml__texte { font-size: 15.5px; line-height: 1.7; color: var(--fg); max-width: 66ch;
             margin: 0 0 12px; }
/* Les coordonnées se lisent comme une fiche, pas comme un paragraphe : un
   visiteur qui cherche le SIRET ou l'adresse doit le trouver sans lire. */
.ml__fiche { margin: 0 0 12px; display: grid; grid-template-columns: 12rem 1fr;
             gap: 6px 16px; font-size: 15px; line-height: 1.6; }
.ml__cle { color: var(--muted-fg); }
.ml__val { color: var(--fg); }
/* Le formulaire de rétractation se recopie tel quel : il se lit en bloc
   détaché du texte, pour qu'on voie où il commence et où il finit. */
.ml__modele { margin: 0 0 12px; padding: 16px 18px; border-radius: var(--radius-md);
              background: var(--muted); font-size: 14.5px; line-height: 1.7; max-width: 66ch; }
.ml__modele p { margin: 0 0 8px; }
.ml__version { font-size: 12px; color: var(--muted-fg); margin: 48px 0 0; }
@media (max-width: 40rem) {
  .ml__fiche { grid-template-columns: 1fr; gap: 2px 0; }
  .ml__cle { margin-top: 8px; font-size: 13px; }
}

/* ---- /engagements ---- */
/* Une page de texte long : la colonne se resserre pour rester lisible, et
   chaque engagement porte son chiffre en regard plutôt qu'en note. */
.eng { max-width: 52rem; margin: 0 auto; padding: 48px 24px 90px; }
.eng__intro { font-size: 17px; line-height: 1.65; color: var(--muted-fg); max-width: 62ch; }
.eng__item { margin: 40px 0 0; padding: 26px 0 0; border-top: 1px solid var(--border); }
.eng__item:first-of-type { border-top: 0; padding-top: 0; }
.eng__num { font-family: var(--font-mono); font-size: 12px; color: var(--primary);
            letter-spacing: .1em; }
.eng__titre { font-family: var(--font-display); font-size: clamp(21px, 2.6vw, 27px);
              font-weight: 800; letter-spacing: -.02em; line-height: 1.2; margin: 6px 0 12px; }
.eng__texte { font-size: 16px; line-height: 1.65; margin: 0 0 14px; max-width: 64ch; }
.eng__preuve { display: flex; flex-wrap: wrap; gap: 10px 26px; margin: 0; padding: 14px 18px;
               border-radius: var(--radius-md); background: var(--muted); }
.eng__preuve div { min-width: 8rem; }
.eng__preuve dt { font-size: 10px; text-transform: uppercase; letter-spacing: .16em;
                  color: var(--muted-fg); margin: 0 0 3px; }
.eng__preuve dd { font-family: var(--font-display); font-size: 20px; font-weight: 700;
                  margin: 0; font-variant-numeric: tabular-nums; }
.eng__date { font-size: 12px; color: var(--muted-fg); margin: 10px 0 0; }
.eng__refus { margin: 48px 0 0; padding: 22px 24px; border-radius: var(--radius-lg);
              background: var(--low-15); }
.eng__refus h2 { font-family: var(--font-display); font-size: 20px; margin: 0 0 10px;
                 color: var(--low-texte); }
.eng__refus p, .eng__refus li { font-size: 15px; line-height: 1.6; color: var(--fg); }
.eng__refus ul { margin: 10px 0 0; padding-left: 20px; }
.eng__refus li { margin: 6px 0; }

/* ---- /merci ---- */
.mr { max-width: 62rem; margin: 0 auto; padding: 56px 24px 90px; }

/* Les deux ancres du fragment, en haut de page pour que `:target` ne
   déplace jamais la lecture. */
.mr__ancre { display: block; height: 0; overflow: hidden; }

.mr__coche { width: 46px; height: 46px; border-radius: 999px; display: grid;
             place-items: center; background: var(--primary); color: #0b1020;
             font-size: 24px; font-weight: 700; line-height: 1; margin: 0 0 18px; }
.mr__intro { font-size: 17px; line-height: 1.65; color: var(--muted-fg);
             max-width: 60ch; margin: 0 0 8px; }

.mr__cas { display: grid; gap: 14px; padding: 26px 24px 24px; margin: 34px 0 0; }
.mr__pour { font-size: 12px; font-weight: 700; text-transform: uppercase;
            letter-spacing: .14em; color: var(--muted-fg); margin: 0; }
.mr__titre { font-family: var(--font-display); font-size: 24px; font-weight: 700;
             letter-spacing: -0.02em; margin: 0; }
.mr__texte { font-size: 15.5px; line-height: 1.7; margin: 0; max-width: 64ch; }
.mr__liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.mr__liste li { display: grid; grid-template-columns: 20px 1fr; gap: 10px;
                font-size: 15px; line-height: 1.55; }
.mr__puce { color: var(--primary); font-weight: 700; }
.mr__actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 6px 0 0; }

/* L'avertissement qui vaut tous les autres : le droit suit l'adresse qui a
   payé. Une alerte créée avec une autre adresse resterait gratuite. */
.mr__attention { border-left: 3px solid var(--primary); padding: 2px 0 2px 14px;
                 font-size: 15px; line-height: 1.6; margin: 0; }

.mr__apres { margin: 48px 0 0; padding: 26px 0 0; border-top: 1px solid var(--border); }
.mr__q { font-weight: 600; margin: 0 0 4px; font-size: 15.5px; }
.mr__r { font-size: 15px; line-height: 1.65; color: var(--muted-fg);
         margin: 0 0 18px; max-width: 66ch; }

/* Le fragment choisit la formule. Par défaut, et si le navigateur ignore
   `:has()`, les deux restent affichés : le repli montre trop, jamais trop
   peu. */
body:has(#premium:target) .mr__cas--veille { display: none; }
body:has(#veille:target) .mr__cas--premium { display: none; }

/* ---- /offres ---- */
/* Une page de vente lit en colonne large, mais son texte reste étroit :
   les deux offres sont des cartes, le reste est de la prose. Les jetons
   viennent de pokegateur.css, rien n'est codé en dur ici. */
/* `width: 100%` : le corps est une colonne flexible, et des marges automatiques
   y rendent l'élément à la largeur de son contenu, jamais sous sa largeur
   minimale. Le tableau comparatif en impose une (34rem) : sur un téléphone,
   toute la page s'élargissait à 592 px pour 375 de fenêtre, cartes comprises,
   au lieu de faire défiler le seul tableau dans son cadre. Constaté le 30
   septembre 2026 en vérifiant la case de demande expresse. */
.of { width: 100%; max-width: 68rem; margin: 0 auto; padding: 48px 24px 90px; }
.of__intro { font-size: 17px; line-height: 1.65; color: var(--muted-fg); max-width: 60ch; }

.of__offres { display: grid; gap: 20px; margin: 40px 0 0; align-items: start; }
@media (min-width: 56rem) { .of__offres { grid-template-columns: 1fr 1fr; } }

.of__offre { display: flex; flex-direction: column; padding: 26px 24px 24px; height: 100%; }
.of__pour { font-size: 12px; font-weight: 700; text-transform: uppercase;
            letter-spacing: .14em; color: var(--muted-fg); margin: 0 0 6px; }
.of__nom { font-family: var(--font-display); font-size: 26px; font-weight: 700;
           letter-spacing: -0.02em; margin: 0 0 8px; }
.of__promesse { font-size: 15px; line-height: 1.6; color: var(--muted-fg);
                margin: 0 0 20px; }

/* Le prix se lit d'un coup : le montant en grand, la période à côté, et
   l'annuel en dessous sans jamais laisser croire qu'une taxe s'ajoute. */
.of__prix { display: flex; align-items: baseline; gap: 8px; margin: 0 0 4px; }
.of__montant { font-family: var(--font-display); font-size: 40px; font-weight: 700;
               color: var(--primary); font-variant-numeric: tabular-nums; line-height: 1; }
.of__periode { font-size: 15px; color: var(--muted-fg); }
.of__annuel { font-size: 14px; color: var(--muted-fg); margin: 0 0 18px; }
.of__annuel a { color: var(--primary); font-weight: 600; }

.of__liste { list-style: none; margin: 0 0 22px; padding: 0; display: grid; gap: 10px; }
.of__liste li { display: grid; grid-template-columns: 20px 1fr; gap: 10px;
                font-size: 15px; line-height: 1.5; }
.of__coche { color: var(--primary); font-weight: 700; }
.of__liste li.of__moins { color: var(--muted-fg); }
.of__liste li.of__moins .of__coche { color: var(--muted-fg); font-weight: 500; }

.of__actions { margin-top: auto; display: flex; flex-wrap: wrap; gap: 10px; }
/* La demande expresse d'exécution immédiate (L221-25), au-dessus des boutons
   premium. C'est elle qui prend la marge automatique : les boutons la suivent
   au lieu d'être poussés loin d'elle vers le bas de la carte. */
.of__demande { margin-top: auto; }
.of__demande + .of__actions { margin-top: 12px; }
.of__demande-case { display: grid; grid-template-columns: 20px 1fr; gap: 10px;
                    font-size: 13px; line-height: 1.5; color: var(--muted-fg);
                    cursor: pointer; }
.of__demande-case input { width: 16px; height: 16px; margin: 2px 0 0;
                          accent-color: var(--primary); cursor: pointer; }
.of__demande-case a { color: var(--primary); }
.of__demande-rappel { margin: 8px 0 0 30px; font-size: 13px; font-weight: 600;
                      color: var(--primary); }
.of__note { font-size: 13px; color: var(--muted-fg); margin: 12px 0 0; }

.of__bloc { margin: 56px 0 0; padding: 26px 0 0; border-top: 1px solid var(--border); }
.of__titre { font-size: 22px; margin: 0 0 12px; }
.of__texte { font-size: 15.5px; line-height: 1.7; max-width: 66ch; margin: 0 0 12px; }

/* LE TABLEAU DE COMPARAISON. Il repond a la question qu'un visiteur se
   pose en premier : ce que je paie, par rapport a ce que j'ai deja. Trois
   colonnes plutot que deux : la colonne gratuite n'est pas une politesse,
   c'est la reference. Il defile lateralement dans son propre conteneur
   sous 48rem, jamais la page. */
.of__cmp { margin: 24px 0 0; overflow-x: auto; }
.of__cmp table { width: 100%; min-width: 34rem; border-collapse: collapse;
                 font-size: 14.5px; }
.of__cmp caption { text-align: left; font-size: 13px; color: var(--muted-fg);
                   padding: 0 0 10px; }
.of__cmp th, .of__cmp td { text-align: left; padding: 11px 12px;
                           border-bottom: 1px solid var(--border);
                           vertical-align: top; }
.of__cmp thead th { font-size: 12px; text-transform: uppercase;
                    letter-spacing: .1em; color: var(--muted-fg);
                    border-bottom-width: 2px; }
.of__cmp tbody th { font-weight: 600; width: 34%; }
.of__cmp .of__paye { color: var(--primary); font-weight: 600; }
.of__cmp tbody tr:last-child th, .of__cmp tbody tr:last-child td {
  border-bottom: 0; }

/* Les chiffres du site, releves et dates. Ils ne sont pas la pour decorer :
   ils sont la reponse a « qui etes-vous pour me demander 4,99 euros ». */
.of__preuve { display: grid; gap: 10px 26px; margin: 22px 0 0; padding: 0;
              grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); }
.of__preuve div { min-width: 0; }
.of__preuve dt { font-size: 10px; text-transform: uppercase;
                 letter-spacing: .16em; color: var(--muted-fg); margin: 0 0 3px; }
.of__preuve dd { font-family: var(--font-display); font-size: 22px;
                 font-weight: 700; margin: 0; font-variant-numeric: tabular-nums; }
.of__date { font-size: 12.5px; color: var(--muted-fg); margin: 14px 0 0; }

.of__faq { display: grid; gap: 18px; margin: 18px 0 0; }
@media (min-width: 48rem) { .of__faq { grid-template-columns: 1fr 1fr; gap: 18px 32px; } }
.of__q { font-size: 15px; font-weight: 700; margin: 0 0 4px; }
.of__r { font-size: 14.5px; line-height: 1.6; color: var(--muted-fg); margin: 0; max-width: 52ch; }
.of__r a { color: var(--primary); }

/* Le rapport prive d'une boutique (/rapport/<vendor_id>?key=...), servi par
   api/rapport.py dans le gabarit de cette page. Il reprend les blocs de l'offre
   (of__preuve, of__cmp, of__bloc) et n'ajoute que ce qui lui est propre. */
.rp__recap dd { font-size: 20px; }
.rp__sur { font-family: var(--font-body, inherit); font-size: 13px; font-weight: 500;
           color: var(--muted-fg); }
.rp__bloc .of__cmp td { font-variant-numeric: tabular-nums; white-space: nowrap; }
.rp__bloc .of__cmp th a { color: inherit; text-decoration: underline;
                          text-underline-offset: 3px; }
.rp__ecart { font-weight: 700; }
/* Le rang dit sur combien de boutiques EN STOCK il se compte, et dessous
   combien de boutiques referencent le produit : « 1 / 4 » se lisait « quatre
   vendeurs en tout » (retour de La Maison du TCG, 5 octobre 2026). */
.rp__ref { display: block; margin: 3px 0 0; font-size: 12px; font-weight: 400;
           color: var(--muted-fg); }
/* La position de prix en une phrase, sous le recapitulatif qu'elle lit. */
.rp__position { max-width: 66ch; margin: 18px 0 0; font-size: 15.5px; line-height: 1.6;
                font-weight: 600; color: var(--fg); }
/* Les phrases sous un tableau : ce qu'il compte, et ce qu'il ne compte pas. */
.rp__lecture { max-width: 70ch; line-height: 1.6; }
/* La liste des boutiques qui referencent les produits, repliee par defaut :
   un element HTML natif, sans script, que la politique de securite accepte. */
.rp__liste { margin: 18px 0 0; }
.rp__liste summary { cursor: pointer; font-size: 15px; font-weight: 600;
                     color: var(--primary); }
.rp__liste .of__cmp { margin-top: 12px; }
.rp__liste .of__cmp th, .rp__liste .of__cmp td { padding-top: 6px; padding-bottom: 6px; }
/* Quand aucune comparaison n'est possible, la phrase qui dit pourquoi est le
   premier message de la page : elle prend la couleur du texte, pas celle de
   l'introduction. */
.rp__raison { color: var(--fg); font-weight: 600; margin-bottom: 0; }
.rp__raison + .of__intro { font-size: 14.5px; margin-top: 8px; }
/* L'etat du stock de la boutique, toujours affiche sous le recapitulatif. */
.rp__stock { margin: 30px 0 0; }
.rp__sous-titre { font-size: 12px; font-weight: 700; text-transform: uppercase;
                  letter-spacing: .14em; color: var(--muted-fg); margin: 0; }
.rp__stock .of__preuve { margin-top: 10px; }
.rp__limites { max-width: 70ch; margin: 28px 0 0; line-height: 1.6; }
.rp__bandeau { margin: 40px 0 0; padding: 18px 20px; border: 1px solid var(--border);
               border-radius: 12px; background: var(--muted); }
.rp__bandeau p { margin: 0; font-size: 15px; line-height: 1.6; }
.rp__bandeau a { color: var(--primary); font-weight: 600; }