/* Polices hébergées sur le site (aucun appel à Google) : Hanken Grotesk et Baloo 2 (police variable, sous-ensemble latin), licence SIL OFL 1.1. */
@font-face { font-family: "Baloo 2"; font-style: normal; font-weight: 400 800; font-display: swap; src: url(fonts/baloo2-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Hanken Grotesk"; font-style: normal; font-weight: 100 900; font-display: swap; src: url(fonts/hanken-grotesk-latin.woff2) format("woff2"); }

/*
  prixdefou.
  Deux voix : la voix ronde (Baloo 2) pour Le Fou et le jeu, la voix nette (Hanken Grotesk) pour les faits.
  Les couleurs sont des jetons posés sur :root. Tout le reste est rangé sous .pdf.

  Plan
    1. Jetons (clair)               6. Accueil : vitrine, onglets, filtres, carte
    2. Socle                         7. Blocs du jeu : série, mission
    3. En-tête, pied, barre du bas   8. Fiche deal, courbe, commentaires
    4. Boutons, champs, étiquettes   9. Alertes, profil, poster
    5. Votes et Folie               10. Toasts, mouvement
*/

/* ------------------------------------------------------------------
   1. Jetons
   ------------------------------------------------------------------ */

:root {
  --police-ronde: "Baloo 2", "Nunito", "Arial Rounded MT Bold", "Trebuchet MS", system-ui, sans-serif;
  --police-texte: "Hanken Grotesk", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;

  --fond: #f3f1fa;
  --surface: #ffffff;
  --surface-2: #efecf9;
  --encre: #1f1a44;
  --encre-2: #5a5578;
  --trait: #e1ddf0;
  --trait-fort: #c7c1e2;
  --trait-champ: #8782a6;
  --nuit: #1f1a44;
  --nuit-bord: #0c0924;
  --sur-nuit: #ffffff;

  --vert: #1b7f31;
  --vert-bord: #0f5a21;
  --vert-texte: #17692a;
  --vert-pale: #e3f5e6;
  --vert-logo: #2f9e3a;
  --bleu: #17327e;
  --bleu-bord: #0d1f55;
  --bleu-survol: #1f46a6;
  --sur-vert: #ffffff;
  --or: #ffc83d;
  --or-bord: #d99a00;
  --or-pale: #fff3cf;
  --sur-or: #1f1a44;
  --froid: #3b5b8c;
  --froid-bord: #263f66;
  --froid-pale: #e3ebf8;
  --sur-froid: #ffffff;

  /* Couleurs de sens : elles ne changent pas d'une direction à l'autre. */
  --vrai: #0b7a3b;
  --vrai-fond: #e3f5ea;
  --ambre: #8a3f06;
  --ambre-fond: #fdf0d9;
  --neutre: #4b5563;
  --neutre-fond: #eceef2;
  --erreur: #b42318;
  --lien: #0066cc;

  --courbe-aire: rgb(31 26 68 / 0.045);
  --courbe-hachure: rgb(31 26 68 / 0.09);
  --ombre-carte: 0 1px 0 var(--trait), 0 10px 22px -16px rgb(31 26 68 / 0.28);
  --ombre-haut: 0 16px 36px -10px rgb(31 26 68 / 0.38);

  --fou-contour: #1f1a44;
  --fou-bonnet: #d4145a;
  --fou-grelot: #ffc83d;
  --fou-visage: #fff3e2;
  --fou-blanc: #ffffff;
  --fou-verre: #bfd4f2;
}

/* Un seul thème : le clair. */

/* Le fond de la page vient d'un jeton. */
body {
  background: var(--fond);
}

/* ------------------------------------------------------------------
   2. Socle
   ------------------------------------------------------------------ */

.pdf {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  --marge: 16px;
  background: var(--fond);
  color: var(--encre);
  font: 400 16px/1.5 var(--police-texte);
  overflow-wrap: break-word;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

.pdf *,
.pdf *::before,
.pdf *::after {
  box-sizing: border-box;
}

.pdf :where(h1, h2, h3, p, ul, ol, dl, dd, figure, fieldset, legend) {
  margin: 0;
  padding: 0;
}

.pdf :where(ul, ol) { list-style: none; }
.pdf :where(fieldset) { border: 0; min-width: 0; }
.pdf :where(a) { color: inherit; }
.pdf :where(img) { display: block; }
.pdf :where(button, input, select, textarea) { font: inherit; color: inherit; }
.pdf :where(button) { -webkit-tap-highlight-color: transparent; }
.pdf :where(s) { text-decoration-thickness: 1.5px; }

.pdf :focus-visible {
  outline: 2px solid var(--lien);
  outline-offset: 2px;
}

/* Texte réservé aux lecteurs d'écran. */
.pdf .sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.pdf .ico {
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.pdf .fou { flex: none; display: block; }
.pdf .planche-icones { position: absolute; }
.pdf .discret { color: var(--encre-2); font-size: 14px; line-height: 1.45; }

.aller-contenu {
  position: absolute;
  left: 12px;
  top: -80px;
  z-index: 70;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 16px;
  border-radius: 999px;
  background: var(--nuit);
  color: var(--sur-nuit);
  font: 700 16px/1 var(--police-ronde);
}

.aller-contenu:focus { top: 6px; }

/* ------------------------------------------------------------------
   3. En-tête, pied, barre du bas
   ------------------------------------------------------------------ */

.entete {
  position: sticky;
  top: 0;
  z-index: 30;
  background: var(--surface);
  border-bottom: 1px solid var(--trait);
}

.entete-int {
  display: flex;
  align-items: center;
  gap: 4px;
  height: 56px;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 8px 0 12px;
}

.logo {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 44px;
  text-decoration: none;
}

.logo-tete { display: block; width: 34px; height: 34px; }

.logo-mot {
  font: 800 24px/1 var(--police-ronde);
  letter-spacing: -0.015em;
  padding-top: 3px;
}

.logo-mot b { font-weight: 800; color: var(--vert-texte); }

.recherche {
  display: none;
  flex: 1;
  position: relative;
  align-items: center;
  gap: 4px;
  min-width: 0;
}

.recherche > .ico {
  position: absolute;
  left: 14px;
  color: var(--encre-2);
  pointer-events: none;
}

.recherche input {
  flex: 1;
  min-width: 0;
  height: 44px;
  padding: 0 14px 0 42px;
  border: 1.5px solid var(--trait-fort);
  border-radius: 999px;
  background: var(--surface-2);
  font-size: 16px;
}

.recherche input::placeholder { color: var(--encre-2); opacity: 1; }
.recherche input:focus-visible { outline-offset: 0; border-color: var(--lien); }

.recherche-fermer {
  flex: none;
  height: 44px;
  padding: 0 10px;
  border: 0;
  background: none;
  font: 700 16px/1 var(--police-ronde);
  color: var(--vert-texte);
  cursor: pointer;
}

.entete.en-recherche .logo,
.entete.en-recherche .entete-outils { display: none; }
.entete.en-recherche .recherche { display: flex; }

.menu-haut { display: none; }

.entete-outils {
  display: flex;
  align-items: center;
  gap: 0;
  margin-left: auto;
}

.outil {
  position: relative;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--encre);
  cursor: pointer;
  text-decoration: none;
}

.serie-pastille {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 44px;
  height: 44px;
  padding: 0 6px;
  text-decoration: none;
  font: 800 19px/1 var(--police-ronde);
  font-variant-numeric: tabular-nums;
}

.serie-rond {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--surface-2);
  color: var(--encre-2);
  box-shadow: inset 0 0 0 2px var(--trait-fort);
}

.serie-n { padding-top: 2px; }

.serie-pastille.validee .serie-rond {
  background: var(--or);
  color: var(--sur-or);
  box-shadow: 0 2px 0 var(--or-bord);
}

.cloche-nb {
  position: absolute;
  top: 2px;
  right: 0;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--vert);
  color: var(--sur-vert);
  font: 800 14px/20px var(--police-texte);
  text-align: center;
  box-shadow: 0 0 0 2px var(--surface);
}

.contenu {
  flex: 1;
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 4px 0 16px;
}

.contenu > section { padding-inline: var(--marge); }
.contenu > [data-ecran="accueil"] { padding-inline: 0; }

.contenu:focus { outline: none; }

/* La mention d'affiliation : une seule fois par page, en petit, juste au-dessus du pied de page. */
.mention-affiliation {
  margin: 28px var(--marge) 0;
  padding-top: 12px;
  border-top: 1px solid var(--trait);
  font-size: 14px;
  line-height: 1.45;
  color: var(--encre-2);
}

/* Le pied de page : la marque, 3 colonnes de liens, la ligne de l'éditeur. */
.pied {
  border-top: 1px solid var(--trait);
  background: var(--surface);
}

.pied-int {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px 16px;
  max-width: 1280px;
  margin: 0 auto;
  padding: 20px var(--marge) 20px;
  color: var(--encre-2);
  font-size: 15px;
  line-height: 1.4;
}

.pied-marque { grid-column: 1 / -1; }
.pied-marque .logo { color: var(--encre); }
.pied-promesse { max-width: 400px; margin-top: 2px; }
.pied-liens { display: contents; }
.pied-colonne { min-width: 0; }
.pied-colonne-large { grid-column: 1 / -1; }

.pied h2 {
  margin-bottom: 2px;
  font: 700 18px/1.2 var(--police-ronde);
  color: var(--encre);
}

.pied-colonne a {
  display: flex;
  align-items: center;
  min-height: 44px;
  color: var(--encre-2);
  font-weight: 500;
  text-decoration: none;
}

.pied-colonne-large ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px; }

.pied-legal {
  grid-column: 1 / -1;
  padding-top: 16px;
  border-top: 1px solid var(--trait);
  font-size: 14px;
  line-height: 1.5;
}

/* La barre d'onglets du bas : la navigation du téléphone. Elle colle au bas de l'écran. */
.onglets-bas {
  position: sticky;
  bottom: 0;
  z-index: 25;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  padding: 3px 8px calc(3px + env(safe-area-inset-bottom, 0px));
  background: var(--surface);
  border-top: 1px solid var(--trait);
}

.onglets-bas a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  text-decoration: none;
  color: var(--encre-2);
  font: 700 14px/1.1 var(--police-ronde);
}

.onglet-ico {
  display: grid;
  place-items: center;
  width: 54px;
  height: 28px;
  margin-bottom: 1px;
  border-radius: 999px;
}

.onglets-bas a[aria-current="page"] { color: var(--vert-texte); }
.onglets-bas a[aria-current="page"] .onglet-ico { background: var(--vert-pale); }

.onglet-poster .onglet-ico,
.onglets-bas .onglet-poster[aria-current="page"] .onglet-ico {
  background: var(--vert);
  color: var(--sur-vert);
  box-shadow: 0 2px 0 var(--vert-bord);
}

/* ------------------------------------------------------------------
   4. Boutons, champs, étiquettes
   ------------------------------------------------------------------ */

.pdf .bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  margin-bottom: 4px;
  padding: 2px 20px 0;
  border: 0;
  border-radius: 999px;
  font: 700 17px/1.1 var(--police-ronde);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: transform 0.12s ease-out, box-shadow 0.12s ease-out, background-color 0.12s ease-out;
}

.pdf .bouton .ico { margin-top: -2px; }

.pdf .bouton-principal {
  background: var(--vert);
  color: var(--sur-vert);
  box-shadow: 0 4px 0 var(--vert-bord);
}

.pdf .bouton-secondaire {
  background: var(--surface);
  color: var(--encre);
  box-shadow: inset 0 0 0 2px var(--trait-fort), 0 3px 0 var(--trait-fort);
}

.pdf .bouton-nuit {
  background: var(--nuit);
  color: var(--sur-nuit);
  box-shadow: 0 3px 0 var(--nuit-bord);
}

.pdf .bouton:active { transform: translateY(3px); }
.pdf .bouton-principal:active { box-shadow: 0 1px 0 var(--vert-bord); }
.pdf .bouton-secondaire:active { box-shadow: inset 0 0 0 2px var(--trait-fort), 0 0 0 var(--trait-fort); }
.pdf .bouton-nuit:active { box-shadow: 0 0 0 var(--nuit-bord); }

.pdf .bouton-moyen { min-height: 44px; padding: 2px 16px 0; font-size: 16px; }
.pdf .bouton-grand { min-height: 54px; font-size: 20px; }
.pdf .bouton-large { display: flex; width: 100%; }

.lien-bouton {
  min-height: 44px;
  padding: 0 8px;
  border: 0;
  background: none;
  font-weight: 700;
  color: var(--lien);
  text-decoration: underline;
  cursor: pointer;
}

.lien-fleche {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  min-height: 44px;
  font-weight: 700;
  color: var(--lien);
}

/* Champs de formulaire : libellé toujours visible, 48 px de haut. */
.champ { display: block; margin: 16px 0 6px; }
.champ-nom { display: block; font: 700 16px/1.3 var(--police-texte); }
.champ-aide { display: block; font-size: 14px; line-height: 1.4; color: var(--encre-2); }

.pdf input[type="text"],
.pdf input[type="number"],
.pdf textarea,
.pdf .liste select {
  display: block;
  width: 100%;
  min-height: 48px;
  padding: 10px 14px;
  border: 1.5px solid var(--trait-champ);
  border-radius: 14px;
  background: var(--surface);
  font-size: 16px;
  line-height: 1.4;
}

.pdf input::placeholder, .pdf textarea::placeholder { color: var(--encre-2); opacity: 1; }

.pdf input[type="text"]:focus-visible,
.pdf input[type="number"]:focus-visible,
.pdf textarea:focus-visible,
.pdf select:focus-visible {
  outline-offset: 0;
  border-color: var(--lien);
}

.liste { position: relative; display: block; }
.pdf .liste select { appearance: none; -webkit-appearance: none; padding-right: 40px; cursor: pointer; }
.liste .ico { position: absolute; right: 14px; top: 15px; color: var(--encre-2); pointer-events: none; }

.champ-euro { position: relative; display: block; }
.pdf .champ-euro input { padding-right: 36px; font-variant-numeric: tabular-nums; }
.champ-euro > span { position: absolute; right: 14px; top: 11px; font-weight: 700; color: var(--encre-2); }

.champ-icone { position: relative; display: block; }
.champ-icone .ico { position: absolute; left: 14px; top: 14px; color: var(--encre-2); }
.pdf .champ-icone input { padding-left: 42px; }

.champ-erreur {
  margin-top: 8px;
  font-weight: 600;
  font-size: 15px;
  color: var(--erreur);
}

.groupe { margin-top: 16px; }
.groupe legend { margin-bottom: 4px; }
.choix-rang { display: flex; flex-wrap: wrap; gap: 0 8px; }

/* Un choix en pilule : la case ou le bouton radio reste là, invisible, pour le clavier et les lecteurs d'écran. */
.choix {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  cursor: pointer;
}

.choix input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.choix > span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 38px;
  padding: 0 14px;
  border-radius: 999px;
  background: var(--surface);
  box-shadow: inset 0 0 0 1.5px var(--trait-fort);
  font-weight: 600;
  font-size: 15px;
  white-space: nowrap;
}

.choix input:checked + span {
  background: var(--nuit);
  color: var(--sur-nuit);
  box-shadow: none;
}

.choix input:focus-visible + span { outline: 2px solid var(--lien); outline-offset: 2px; }

/* Le badge de prix : une étiquette de fait, coins de 8 px, icône, texte et couleur de sens. */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 24px;
  padding: 0 8px 0 6px;
  border-radius: 8px;
  font: 700 14px/1 var(--police-texte);
  white-space: nowrap;
}

.badge-vrai { color: var(--vrai); background: var(--vrai-fond); }
.badge-ambre { color: var(--ambre); background: var(--ambre-fond); }
.badge-neutre { color: var(--neutre); background: var(--neutre-fond); }
.badge-grand { height: 32px; padding: 0 12px 0 8px; gap: 6px; font-size: 16px; }

.niveau, .type, .categorie, .code-mini {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 8px;
  border-radius: 8px;
  font: 700 14px/1 var(--police-texte);
  white-space: nowrap;
}

.niveau { padding-top: 2px; font-family: var(--police-ronde); font-size: 15px; }
.niveau-fou { background: var(--vert); color: var(--sur-vert); }
.niveau-bon { background: var(--vert-pale); color: var(--vert-texte); }
.type { background: var(--neutre-fond); color: var(--neutre); }
.categorie { padding: 0; color: var(--encre-2); font-weight: 600; }
.code-mini { border: 1.5px dashed var(--trait-champ); font-variant-numeric: tabular-nums; letter-spacing: 0.02em; }

.compte {
  display: inline-flex;
  align-items: center;
  height: 24px;
  margin-left: 6px;
  padding: 0 8px;
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--encre-2);
  font: 700 14px/1 var(--police-texte);
  vertical-align: 2px;
}

/* « Posté par » : la signature du membre, sur chaque deal. */
.poste-par { color: var(--encre-2); }
.poste-par b { font-weight: 600; color: var(--encre); white-space: nowrap; }

/* Le prix : la voix nette, en chiffres tabulaires. */
.prix { font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.prix-ref { color: var(--encre-2); font-size: 14px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.remise { color: var(--vert-texte); font-weight: 800; font-size: 15px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.remise-neutre { color: var(--neutre); }

.bloc {
  padding: 16px;
  border-radius: 20px;
  background: var(--surface);
  box-shadow: var(--ombre-carte);
}

.bloc-titre { font: 700 21px/1.2 var(--police-ronde); }
.bloc-sur { font: 700 16px/1.2 var(--police-ronde); color: var(--encre-2); }

.encadre {
  display: flex;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 14px;
  font-size: 15px;
  line-height: 1.4;
}

.encadre .ico { margin-top: 1px; }
.encadre-info { background: var(--neutre-fond); color: var(--neutre); }

/* ------------------------------------------------------------------
   5. Votes et Folie
   ------------------------------------------------------------------ */

.votes {
  position: relative;
  display: inline-flex;
  align-items: center;
  height: 44px;
}

.vote {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--encre-2);
  cursor: pointer;
}

.vote-rond {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--surface-2);
  transition: background-color 0.12s ease-out, color 0.12s ease-out, transform 0.12s ease-out;
}

.vote:active .vote-rond { transform: scale(0.9); }

.vote-pour[aria-pressed="true"] .vote-rond {
  background: var(--vert);
  color: var(--sur-vert);
  box-shadow: 0 2px 0 var(--vert-bord);
}

.vote-contre[aria-pressed="true"] .vote-rond {
  background: var(--froid);
  color: var(--sur-froid);
  box-shadow: 0 2px 0 var(--froid-bord);
}

.folie {
  min-width: 56px;
  padding: 3px 2px 0;
  text-align: center;
  font: 800 19px/1 var(--police-ronde);
  font-variant-numeric: tabular-nums;
  color: var(--encre-2);
  white-space: nowrap;
}

.folie-chaude { color: var(--vert-texte); }
.folie-froide { color: var(--froid); }

/* Le petit « +15° » qui s'envole au moment du vote. */
.envol {
  position: absolute;
  right: 0;
  top: -6px;
  padding: 2px 8px 0;
  border-radius: 999px;
  font: 800 15px/1.4 var(--police-ronde);
  pointer-events: none;
  animation: envol 0.8s ease-out both;
}

.envol-chaud { background: var(--vert); color: var(--sur-vert); }
.envol-froid { right: auto; left: 0; background: var(--froid); color: var(--sur-froid); }

/* ------------------------------------------------------------------
   6. Accueil : vitrine, onglets, filtres, carte
   ------------------------------------------------------------------ */

/* La vitrine « Prix de fou » : une rangée qui commence par sa propre étiquette. */
.vitrine-rang {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 2px var(--marge) 6px;
  scrollbar-width: none;
}

.vitrine-rang::-webkit-scrollbar,
.barre-onglets::-webkit-scrollbar,
.barre-filtres::-webkit-scrollbar,
.chemin::-webkit-scrollbar { display: none; }

.vitrine-titre {
  flex: none;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 124px;
  height: 76px;
  padding: 4px 12px 0;
  border-radius: 18px;
  background: var(--vert);
  color: var(--sur-vert);
  box-shadow: 0 3px 0 var(--vert-bord);
}

.vitrine-titre h2 { font: 800 19px/1 var(--police-ronde); }
.vitrine-court { font: 700 15px/1.3 var(--police-ronde); }
.vitrine-long { display: none; }

.ticket {
  flex: none;
  display: grid;
  grid-template-columns: 60px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  width: 308px;
  height: 76px;
  padding: 8px;
  border-radius: 18px;
  background: var(--surface);
  box-shadow: var(--ombre-carte);
  text-decoration: none;
}

.ticket img {
  width: 60px;
  height: 60px;
  border-radius: 12px;
  object-fit: cover;
}

/* 3 lignes : le titre, le prix avec sa remise et son badge, puis l'enseigne et « Posté par ». */
.ticket-texte { display: flex; flex-wrap: wrap; align-items: center; gap: 1px 6px; min-width: 0; }

.ticket-titre {
  flex: 0 0 100%;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
  font: 700 14px/18px var(--police-texte);
}

.ticket-prix { display: flex; align-items: baseline; gap: 6px; font-size: 17px; line-height: 22px; }
.ticket-prix .prix-ref { display: none; }
.ticket .badge, .ticket .type { height: 22px; }

.ticket-bas {
  flex: 0 0 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 0 8px;
  font-size: 14px;
  line-height: 18px;
}

.ticket-enseigne { font-weight: 700; white-space: nowrap; }

.deux-colonnes { display: grid; gap: 20px; }
.colonne-fil { min-width: 0; }

.barre-onglets,
.barre-filtres {
  display: flex;
  align-items: center;
  overflow-x: auto;
  padding: 0 calc(var(--marge) - 4px);
  scrollbar-width: none;
}

/* Une pilule de 36 px dans une cible de 44 px : la bordure transparente fait la différence. */
.onglet,
.filtre,
.pdf .filtre-liste select {
  flex: none;
  height: 44px;
  border: 4px solid transparent;
  border-radius: 999px;
  background-clip: padding-box;
  white-space: nowrap;
  cursor: pointer;
}

.onglet {
  padding: 2px 13px 0;
  background-color: transparent;
  font: 700 17px/1 var(--police-ronde);
  color: var(--encre-2);
}

.onglet[aria-pressed="true"] { background-color: var(--nuit); color: var(--sur-nuit); }

/* Le filtre par remise : son titre en clair, puis 4 pastilles côte à côte dans un seul bloc arrondi. */
.filtres-tete {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin: 2px var(--marge) 0;
  font: 700 15px/18px var(--police-ronde);
  color: var(--encre-2);
}

.compteur {
  font: 800 17px/18px var(--police-ronde);
  color: var(--encre);
  white-space: nowrap;
}

.pastilles-remise { flex: none; display: flex; margin: 0 4px; }

/* Une cible de 44 px de haut, la pastille de 36 px dessinée dedans. Le bouton radio reste là, invisible. */
.pastille-remise {
  position: relative;
  flex: none;
  display: flex;
  align-items: center;
  height: 44px;
  cursor: pointer;
}

.pastille-remise input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.pastille-remise > span {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 62px;
  height: 36px;
  padding: 0 12px;
  border: solid var(--trait-fort);
  border-width: 1.5px 0 1.5px 1px;
  background: var(--surface);
  font: 500 15px/1 var(--police-texte);
  font-variant-numeric: tabular-nums;
  color: var(--encre);
  white-space: nowrap;
}

.pastille-remise:first-child > span { min-width: 78px; padding-left: 16px; border-left-width: 1.5px; border-radius: 999px 0 0 999px; }
.pastille-remise:last-child > span { min-width: 66px; padding-right: 16px; border-right-width: 1.5px; border-radius: 0 999px 999px 0; }
.pastille-remise input:checked + span { background: var(--vert-pale); color: var(--vert-texte); font-weight: 800; }
.pastille-remise input:focus-visible + span { position: relative; z-index: 1; outline: 2px solid var(--lien); outline-offset: 2px; }

.filtre,
.pdf .filtre-liste select {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 12px;
  background-color: var(--surface);
  box-shadow: inset 0 0 0 1.5px var(--trait-fort);
  font: 600 15px/1 var(--police-texte);
}

.filtre-case {
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 6px;
  box-shadow: inset 0 0 0 1.5px var(--trait-champ);
  color: transparent;
}

.filtre[aria-checked="true"],
.filtre[aria-pressed="true"] {
  background-color: var(--nuit);
  color: var(--sur-nuit);
  box-shadow: none;
}

.filtre[aria-checked="true"] .filtre-case { background: var(--sur-nuit); color: var(--nuit); box-shadow: none; }

.filtre-liste { position: relative; flex: none; display: inline-flex; }
.pdf .filtre-liste select { appearance: none; -webkit-appearance: none; padding-right: 30px; max-width: 250px; }
.filtre-liste .ico { position: absolute; right: 14px; top: 13px; color: var(--encre-2); pointer-events: none; }

.recherche-etat { display: flex; align-items: center; flex-wrap: wrap; gap: 0 4px; margin: 0 var(--marge); font-weight: 600; }

.fil { display: grid; gap: 8px; margin: 2px var(--marge) 0; }

.vide {
  display: grid;
  justify-items: center;
  gap: 6px;
  padding: 20px 16px 24px;
  border-radius: 20px;
  background: var(--surface);
  text-align: center;
}

.vide-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 10px; margin-top: 8px; }

/* La carte de deal : des faits. Ni mascotte, ni or, ni police ronde dans le prix. */
.carte {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr) auto;
  grid-template-areas:
    "photo corps corps"
    "note note note"
    "meta meta votes";
  column-gap: 10px;
  padding: 8px 6px 2px 10px;
  border-radius: 20px;
  background: var(--surface);
  box-shadow: var(--ombre-carte);
  cursor: pointer;
}

.carte-photo {
  grid-area: photo;
  align-self: start;
  width: 88px;
  height: 88px;
  margin-top: 2px;
  border-radius: 14px;
  overflow: hidden;
  background: var(--surface-2);
}

.carte-photo img { width: 100%; height: 100%; object-fit: cover; }

.carte-corps {
  grid-area: corps;
  min-width: 0;
  padding-right: 4px;
}

.carte-lien { display: block; padding-bottom: 4px; text-decoration: none; }
.carte-faits { display: grid; gap: 3px; }

.carte-titre {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  height: 40px;
  font: 700 16px/20px var(--police-texte);
}

.carte-prix { display: flex; align-items: baseline; gap: 7px; height: 24px; overflow: hidden; }
.carte-prix .prix { font-size: 20px; line-height: 24px; }
.carte-etiquettes { display: flex; flex-wrap: wrap; gap: 0 6px; height: 24px; overflow: hidden; }

.carte-note {
  grid-area: note;
  display: flex;
  gap: 6px;
  margin: 4px 4px 0 0;
  font-size: 14px;
  line-height: 18px;
  font-weight: 600;
  color: var(--ambre);
}

.carte-note .ico { margin-top: 1px; }
.carte-note-info { color: var(--neutre); }

/* Sur mobile : l'enseigne et l'âge sur une ligne, « Posté par » sur la suivante, à côté des votes. */
.carte-meta {
  grid-area: meta;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  align-content: center;
  gap: 0 10px;
  min-width: 0;
  height: 44px;
  font-size: 14px;
  line-height: 18px;
  color: var(--encre-2);
}

.carte-meta .poste-par {
  flex: 0 0 100%;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
}

.carte-meta .poste-niveau { display: none; }

.carte-enseigne {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
  min-width: 0;
  font-weight: 700;
  color: var(--encre);
}

.carte-age, .carte-plus { flex: none; display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.carte-plus { display: none; }
.carte .votes { grid-area: votes; }
.carte-action { display: none; }

/* Le contenu sponsorisé : à part, en pointillés, sans vote. */
.sponsorise {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 10px 12px;
  padding: 12px;
  border: 2px dashed var(--trait-fort);
  border-radius: 20px;
  background: var(--surface-2);
}

.sponsorise img { width: 64px; height: 64px; border-radius: 12px; object-fit: cover; }
.sponsorise-corps { display: grid; gap: 2px; min-width: 0; }
.sponsorise-tete { display: flex; align-items: center; gap: 8px; }

.sponsorise-titre {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  font: 700 16px/20px var(--police-texte);
}

.sponsorise-texte { font-size: 14px; line-height: 1.4; color: var(--encre-2); }
.pdf .sponsorise .bouton { grid-column: 1 / -1; justify-self: start; }

/* ------------------------------------------------------------------
   7. Blocs du jeu : série, mission
   ------------------------------------------------------------------ */

.colonne-cote { display: grid; gap: 12px; align-content: start; margin: 0 var(--marge); }

.bloc-serie { background: var(--or-pale); box-shadow: 0 0 0 1.5px var(--or); }
.serie-tete { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.serie-grand { font: 700 20px/1 var(--police-ronde); }
.serie-nombre { font: 800 44px/1 var(--police-ronde); font-variant-numeric: tabular-nums; }
.serie-fou { margin: -8px 0 0; }

.serie-semaine {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 4px;
  margin-top: 10px;
}

.serie-semaine li { display: grid; justify-items: center; gap: 2px; }
.serie-semaine .jour { font: 700 14px/1.2 var(--police-ronde); color: var(--encre-2); }

.serie-semaine .pastille {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 2px var(--or-bord);
  color: var(--sur-or);
}

.serie-semaine .fait .pastille { background: var(--or); box-shadow: 0 2px 0 var(--or-bord); }
.serie-semaine .aujourdhui .jour { color: var(--encre); }
.serie-semaine .aujourdhui .pastille { outline: 2px solid var(--encre); outline-offset: 2px; }

.serie-phrase { margin-top: 12px; font-weight: 600; line-height: 1.4; }

.serie-gel {
  display: flex;
  gap: 6px;
  margin-top: 8px;
  font-size: 14px;
  line-height: 1.4;
  color: var(--encre-2);
}

.mission-titre { margin-top: 2px; font: 700 21px/1.2 var(--police-ronde); }
.mission-grelots { display: flex; gap: 6px; margin-top: 10px; }

.mission-grelot {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 2px var(--trait-fort);
  color: var(--trait-champ);
}

.mission-grelot.plein { background: var(--or); box-shadow: 0 2px 0 var(--or-bord); color: var(--sur-or); }

.mission-etat {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 12px;
  margin-top: 10px;
  font-weight: 600;
}

.xp {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px 1px 6px;
  border-radius: 999px;
  background: var(--or-pale);
  font: 700 15px/1.4 var(--police-ronde);
}

.mini-liste { display: grid; gap: 10px; margin: 10px 0 14px; }
.mini-liste li { display: flex; gap: 10px; font-size: 14px; line-height: 1.4; color: var(--encre-2); }
.mini-liste strong { font-size: 16px; color: var(--encre); }
.mini-liste .ico { margin-top: 3px; color: var(--encre-2); }

.bloc-pub {
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 8px;
  min-height: 200px;
  padding: 16px;
  border: 2px dashed var(--trait-fort);
  border-radius: 20px;
  color: var(--encre-2);
  font-size: 14px;
  text-align: center;
}

/* ------------------------------------------------------------------
   8. Fiche deal, courbe, commentaires
   ------------------------------------------------------------------ */

.retour {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  font: 700 16px/1 var(--police-ronde);
  color: var(--encre-2);
  text-decoration: none;
}

.fiche {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}

.fiche > * { grid-column: 1 / -1; min-width: 0; }
.fiche-cote, .fiche-caisse { display: contents; }
.fiche > .fiche-photo { grid-column: 1; }
.fiche-prix { grid-column: 2; min-width: 0; }
.fiche-achat, .folie-carte { grid-column: 1 / -1; min-width: 0; }

.fiche-etiquettes { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.fiche-tete h1 { margin-top: 6px; font: 800 21px/1.25 var(--police-texte); }
.fiche-auteur { margin-top: 4px; font-size: 14px; color: var(--encre-2); }

.fiche-photo {
  aspect-ratio: 1;
  border-radius: 16px;
  overflow: hidden;
  background: var(--surface-2);
}

.fiche-photo img { width: 100%; height: 100%; object-fit: cover; }

.fiche-montant { font-size: 32px; line-height: 1.1; }
.fiche-ref { display: flex; align-items: center; gap: 8px; margin-top: 2px; color: var(--encre-2); font-size: 16px; font-variant-numeric: tabular-nums; }

.remise-grande {
  padding: 1px 8px;
  border-radius: 8px;
  background: var(--vert-pale);
  font-size: 17px;
}

.remise-grande.remise-neutre { background: var(--neutre-fond); }
.fiche-origine { margin-top: 6px; font-size: 14px; line-height: 1.4; color: var(--encre-2); }

.fiche-achat { display: grid; gap: 10px; }
.fiche-badge { display: grid; gap: 4px; justify-items: start; }

.badge-bouton {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 10px;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

.badge-pourquoi {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-weight: 700;
  font-size: 15px;
  color: var(--lien);
  text-decoration: underline;
}

.badge-pourquoi .ico { transition: transform 0.2s ease-out; }
.badge-bouton[aria-expanded="true"] .badge-pourquoi .ico { transform: rotate(180deg); }
.badge-detail { font-weight: 700; font-size: 15px; color: var(--ambre); }

.explication {
  display: grid;
  gap: 8px;
  width: 100%;
  padding: 12px 14px;
  border-radius: 14px;
  background: var(--surface);
  box-shadow: inset 0 0 0 1.5px var(--trait-fort);
  font-size: 15px;
  line-height: 1.45;
}

.code { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }

.code-valeur {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 16px;
  border: 2px dashed var(--trait-champ);
  border-radius: 12px;
  background: var(--surface);
  font: 800 19px/1 var(--police-texte);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
}

.pdf .bouton.copie { background: var(--vrai-fond); color: var(--vrai); box-shadow: inset 0 0 0 2px var(--vrai), 0 3px 0 var(--vrai); }
.conditions { font-size: 15px; line-height: 1.45; }
.depart { font-weight: 700; color: var(--vrai); }
.depart:empty { display: none; }

.infos {
  display: grid;
  gap: 8px;
  margin-top: 2px;
  padding: 12px 14px;
  border-radius: 16px;
  background: var(--surface);
  box-shadow: var(--ombre-carte);
  font-size: 15px;
  line-height: 1.4;
}

.infos > div { display: flex; gap: 10px; }
.infos .ico { margin-top: 1px; color: var(--encre-2); }

/* La carte de Folie : le score, la jauge à 3 grelots, les deux grands boutons. */
.folie-carte { position: relative; }
.folie-tete { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }

.folie-grand {
  margin-top: 2px;
  font: 800 44px/1 var(--police-ronde);
  font-variant-numeric: tabular-nums;
  color: var(--encre-2);
}

.folie-grand.folie-chaude { color: var(--vert-texte); }
.folie-grand.folie-froide { color: var(--froid); }
.folie-palier { font: 700 18px/1.2 var(--police-ronde); }
.folie-fou { margin: -6px 0 -10px; }

.jauge { position: relative; margin-top: 14px; }

.jauge-piste {
  position: absolute;
  left: 0;
  right: 0;
  top: 14px;
  height: 8px;
  border-radius: 999px;
  background: var(--surface-2);
  overflow: hidden;
}

.jauge-piste span {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--vert);
  transition: width 0.3s ease-out;
}

.jauge ol { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.jauge li { display: grid; justify-items: center; text-align: center; color: var(--encre-2); }

.jauge-grelot {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  margin-bottom: 4px;
  border-radius: 50%;
  background: var(--surface);
  box-shadow: inset 0 0 0 2px var(--trait-fort);
  color: var(--trait-champ);
}

.jauge .atteint { color: var(--encre); }
.jauge .atteint .jauge-grelot { background: var(--or); box-shadow: 0 2px 0 var(--or-bord); color: var(--sur-or); }
.jauge-nom { font: 700 15px/1.15 var(--police-ronde); }
.jauge-seuil { font-size: 14px; line-height: 1.3; font-variant-numeric: tabular-nums; }

.folie-boutons { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; }

.pdf .bouton-vote {
  min-height: 52px;
  padding: 2px 8px 0;
  background: var(--surface);
  font-size: 18px;
}

.pdf .bouton-vote.vote-pour { color: var(--vert-texte); box-shadow: inset 0 0 0 2px var(--vert), 0 4px 0 var(--vert); }
.pdf .bouton-vote.vote-contre { color: var(--froid); box-shadow: inset 0 0 0 2px var(--froid), 0 4px 0 var(--froid); }
.pdf .bouton-vote.vote-pour[aria-pressed="true"] { background: var(--vert); color: var(--sur-vert); box-shadow: 0 4px 0 var(--vert-bord); }
.pdf .bouton-vote.vote-contre[aria-pressed="true"] { background: var(--froid); color: var(--sur-froid); box-shadow: 0 4px 0 var(--froid-bord); }
.pdf .bouton-vote:active { box-shadow: 0 1px 0 var(--trait-fort); }
.folie-compte { margin-top: 12px; font-size: 14px; line-height: 1.4; color: var(--encre-2); }
.folie-carte .envol { right: 16px; top: 8px; font-size: 18px; }
.folie-carte .envol-froid { left: 16px; right: auto; }

/* La courbe : en escalier, les valeurs écrites en HTML par-dessus le tracé. */
.courbe-tete { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 4px 12px; margin-bottom: 8px; }

.segments {
  display: inline-flex;
  padding: 0 2px;
  border-radius: 999px;
  background: var(--surface-2);
}

.segments button {
  height: 44px;
  padding: 2px 14px 0;
  border: 4px solid transparent;
  border-radius: 999px;
  background-color: transparent;
  background-clip: padding-box;
  font: 700 16px/1 var(--police-ronde);
  color: var(--encre-2);
  cursor: pointer;
}

.segments button[aria-pressed="true"] { background-color: var(--nuit); color: var(--sur-nuit); }

.courbe-cadre {
  position: relative;
  height: 220px;
  border-radius: 14px;
  background: var(--surface-2);
  overflow: hidden;
}

.courbe-trace { display: block; width: 100%; height: 100%; }
.courbe-aire { fill: var(--courbe-aire); }
.courbe-vide { fill: var(--courbe-hachure); }
.courbe-prix { fill: none; stroke: var(--encre); stroke-width: 2.5; stroke-linejoin: round; }
.courbe-reference { stroke: var(--encre-2); stroke-width: 2; stroke-dasharray: 7 5; }
.courbe-annonce { stroke: var(--ambre); stroke-width: 2; stroke-dasharray: 2 5; stroke-linecap: round; }

.courbe-mot {
  position: absolute;
  padding: 1px 8px;
  border-radius: 8px;
  background: var(--surface);
  box-shadow: 0 0 0 1px var(--trait-fort);
  font: 700 14px/20px var(--police-texte);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.courbe-mot-ref { left: 8px; transform: translateY(-50%); }
.courbe-mot-annonce { left: 8px; transform: translateY(-50%); color: var(--ambre); }
.courbe-mot-vide { top: 50%; transform: translate(-50%, -50%); color: var(--encre-2); font-weight: 600; }
.courbe-mot-bas { transform: translate(12px, -50%); color: var(--vert-texte); }
.courbe-mot-bas.a-gauche { transform: translate(calc(-100% - 12px), -50%); }

.courbe-point {
  position: absolute;
  width: 14px;
  height: 14px;
  margin: -7px 0 0 -7px;
  border-radius: 50%;
  background: var(--vert);
  box-shadow: 0 0 0 3px var(--surface);
}

.courbe-axe {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin-top: 6px;
  font-size: 14px;
  color: var(--encre-2);
}

.courbe-legende { margin-top: 10px; font-size: 15px; line-height: 1.45; }
.courbe-cles { display: grid; gap: 4px; margin-top: 8px; font-size: 14px; color: var(--encre-2); }
.courbe-cles li { display: flex; align-items: center; gap: 10px; }
.cle { flex: none; width: 28px; height: 0; }
.cle-prix { border-top: 3px solid var(--encre); }
.cle-reference { border-top: 2px dashed var(--encre-2); }
.cle-annonce { border-top: 2px dotted var(--ambre); }
.cle-point { width: 12px; height: 12px; margin: 0 8px; border-radius: 50%; background: var(--vert); }
.cle-vide { height: 12px; border-radius: 3px; background: var(--courbe-hachure); box-shadow: inset 0 0 0 1px var(--trait-fort); }

.courbe-chiffres { margin-top: 6px; }

.courbe-chiffres summary {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 44px;
  font-weight: 700;
  color: var(--lien);
  cursor: pointer;
  list-style: none;
}

.courbe-chiffres summary::-webkit-details-marker { display: none; }
.courbe-chiffres summary .ico { transition: transform 0.2s ease-out; }
.courbe-chiffres[open] summary .ico { transform: rotate(90deg); }
.courbe-chiffres table { width: 100%; border-collapse: collapse; font-size: 15px; font-variant-numeric: tabular-nums; }
.courbe-chiffres th, .courbe-chiffres td { padding: 8px 0; border-top: 1px solid var(--trait); text-align: left; font-weight: 400; }
.courbe-chiffres td { text-align: right; font-weight: 700; white-space: nowrap; }
.ailleurs { margin-top: 4px; }

.cible { margin-top: 12px; }
.cible-form { margin-top: 4px; }
.cible-ligne { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; }
.cible-ligne .champ-euro { flex: 1 1 120px; max-width: 180px; margin-right: 6px; }
.pdf .cible-form .bouton { margin-top: 12px; }
.cible-posee { display: flex; gap: 10px; padding: 12px 14px; border-radius: 14px; background: var(--vrai-fond); font-size: 15px; line-height: 1.45; }
.cible-posee .ico { margin-top: 2px; color: var(--vrai); }
.cible-posee a { font-weight: 700; color: var(--lien); }

.fiche-desc p { margin-top: 8px; }
.fiche-com > .discret { margin-top: 2px; }
.commentaires { display: grid; gap: 14px; margin: 14px 0 10px; }
.commentaire { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 10px; }

.avatar {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding-top: 2px;
  border-radius: 50%;
  background: var(--surface-2);
  font: 800 18px/1 var(--police-ronde);
  color: var(--encre-2);
}

.commentaire-tete { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; font-size: 15px; }
.commentaire-age { font-size: 14px; color: var(--encre-2); }

.niveau-membre {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 2px 8px 0;
  border-radius: 999px;
  background: var(--or-pale);
  font: 700 14px/1 var(--police-ronde);
}

.commentaire-votes { display: flex; align-items: center; gap: 4px; margin-top: 2px; font-size: 14px; color: var(--encre-2); }
.vide-ligne { margin: 12px 0; font-weight: 600; }
.commenter { display: grid; gap: 8px; justify-items: start; margin-top: 12px; }
.pdf .commenter textarea { resize: vertical; }

.fiche-proches .bloc-titre { margin: 8px 0 10px; }
.proches { display: grid; gap: 8px; }
.proches .ticket { width: auto; height: auto; min-height: 76px; }

/* ------------------------------------------------------------------
   9. Alertes, profil, poster
   ------------------------------------------------------------------ */

.page-tete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 10px 0 14px;
}

.page-tete h1, .niveau-texte h1 { font: 800 30px/1.05 var(--police-ronde); letter-spacing: -0.01em; }
.page-intro { margin-top: 4px; color: var(--encre-2); line-height: 1.4; }
.page-fou { margin: -10px 0; }

.veille {
  display: inline-block;
  margin-top: 8px;
  padding: 4px 12px 2px;
  border-radius: 999px;
  background: var(--or-pale);
  font: 700 16px/1.4 var(--police-ronde);
}

.alertes-grille { display: grid; gap: 20px; }
.alertes-grille > * { min-width: 0; }
.form-alerte .champ:first-child { margin-top: 10px; }

.plus-criteres { margin-top: 12px; border-radius: 14px; background: var(--surface-2); }

.plus-criteres summary {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 6px 12px;
  font-weight: 600;
  font-size: 15px;
  line-height: 1.3;
  cursor: pointer;
  list-style: none;
}

.plus-criteres summary::-webkit-details-marker { display: none; }
.plus-criteres summary > span { flex: 1; }
.plus-chevron { transition: transform 0.2s ease-out; }
.plus-criteres[open] .plus-chevron { transform: rotate(180deg); }
.plus-grille { display: grid; gap: 0 12px; padding: 0 12px 14px; }
.plus-grille .champ { margin-top: 8px; }
.pdf .form-alerte .bouton-grand { margin-top: 18px; }
.confirmation { margin-top: 10px; font-weight: 700; color: var(--vrai); }
.confirmation:empty { display: none; }

.alertes { display: grid; gap: 10px; margin: 12px 0; }

.alerte {
  display: grid;
  gap: 8px;
  padding: 10px 8px 12px 14px;
  border-radius: 20px;
  background: var(--surface);
  box-shadow: var(--ombre-carte);
}

.alerte-tete { display: flex; align-items: center; gap: 10px; }

.alerte-ico {
  flex: none;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--surface-2);
  color: var(--encre-2);
}

.alerte-nom { flex: 1; min-width: 0; font: 700 19px/1.2 var(--police-ronde); padding-top: 2px; }

/* L'interrupteur : 44 px de cible, la piste dedans. */
.bascule {
  flex: none;
  display: grid;
  place-items: center;
  width: 60px;
  height: 44px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

.bascule-piste {
  position: relative;
  width: 52px;
  height: 30px;
  border-radius: 999px;
  background: var(--trait-champ);
  transition: background-color 0.2s ease-out;
}

.bascule-pouce {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--sur-vert);
  transition: transform 0.2s ease-out;
}

.bascule[aria-checked="true"] .bascule-piste { background: var(--vert); }
.bascule[aria-checked="true"] .bascule-pouce { transform: translateX(22px); }

.puces { display: flex; flex-wrap: wrap; gap: 6px; padding-right: 6px; }

.puce {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 28px;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--surface-2);
  font-weight: 600;
  font-size: 14px;
  line-height: 1.3;
}

.puce-mot { background: var(--nuit); color: var(--sur-nuit); }
.puce-sans { box-shadow: inset 0 0 0 1.5px var(--trait-fort); background: none; }

.alerte-cible { display: grid; gap: 4px; padding: 10px 12px; margin-right: 6px; border-radius: 14px; background: var(--surface-2); font-size: 15px; }
.alerte-produit { font-weight: 600; line-height: 1.35; }
.alerte-prix { display: flex; flex-wrap: wrap; gap: 2px 14px; color: var(--encre-2); font-variant-numeric: tabular-nums; }
.alerte-prix strong { color: var(--encre); }

.alerte-pied { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 12px; padding-right: 6px; font-size: 14px; color: var(--encre-2); }
.alerte-etat { font-weight: 700; color: var(--vrai); }
.alerte-canaux { display: inline-flex; flex-wrap: wrap; gap: 2px 12px; }
.canal { display: inline-flex; align-items: center; gap: 4px; }
.alerte.en-pause .alerte-nom, .alerte.en-pause .puces, .alerte.en-pause .alerte-cible { opacity: 0.55; }
.alerte.en-pause .alerte-etat { color: var(--encre-2); }
.alerte.nouvelle { animation: arrivee 0.4s ease-out both, halo 1.2s ease-out both; }

/* Profil : un tableau de jeu. */
.profil-grille { display: grid; gap: 12px; margin-top: 10px; }
.profil-grille > * { min-width: 0; }
.niveau-tete { display: flex; align-items: center; gap: 8px; }
.niveau-mascotte { flex: none; margin: -12px 0 -8px -10px; }
.niveau-texte { min-width: 0; }
.niveau-nom { font: 700 18px/1.3 var(--police-ronde); color: var(--vert-texte); }

/* La bulle : ce que dit Le Fou, en une phrase. */
.bulle {
  position: relative;
  display: inline-block;
  margin-bottom: 8px;
  padding: 7px 12px 5px;
  border-radius: 14px 14px 14px 4px;
  background: var(--or-pale);
  font: 700 15px/1.3 var(--police-ronde);
}

.xp-ligne { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0 12px; margin-top: 12px; font-size: 15px; color: var(--encre-2); }
.xp-ligne strong { font: 800 22px/1.2 var(--police-ronde); color: var(--encre); font-variant-numeric: tabular-nums; }

.xp-barre { height: 14px; margin-top: 4px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.xp-barre span { display: block; height: 100%; border-radius: 999px; background: var(--or); box-shadow: inset 0 -3px 0 var(--or-bord); transition: width 0.3s ease-out; }

.chemin { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 2px; margin-top: 16px; overflow-x: auto; scrollbar-width: none; }
.chemin li { position: relative; display: grid; justify-items: center; gap: 4px; text-align: center; color: var(--encre-2); }

.chemin li + li::before {
  content: "";
  position: absolute;
  top: 15px;
  right: calc(50% + 18px);
  width: calc(100% - 34px);
  height: 3px;
  border-radius: 3px;
  background: var(--trait-fort);
}

.chemin .passe + li::before { background: var(--nuit); }

.chemin-rond {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding-top: 2px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 2px var(--trait-fort);
  font: 800 16px/1 var(--police-ronde);
}

.chemin .passe .chemin-rond { padding-top: 0; background: var(--nuit); color: var(--sur-nuit); box-shadow: none; }
.chemin .courant .chemin-rond { background: var(--vert); color: var(--sur-vert); box-shadow: 0 2px 0 var(--vert-bord); }
.chemin-nom { display: none; font: 700 14px/1.15 var(--police-ronde); }
.chemin .courant { color: var(--encre); }

.stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin-top: 16px; }
.stats li { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 6px; padding: 8px 12px 5px; border-radius: 14px; background: var(--surface-2); font-size: 14px; line-height: 1.3; color: var(--encre-2); }
.stats strong { font: 800 20px/1.2 var(--police-ronde); color: var(--encre); font-variant-numeric: tabular-nums; }

.profil-mission { display: grid; gap: 12px; align-content: start; }

.trophees { display: grid; gap: 12px; margin-top: 12px; }
.trophee { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 12px; align-items: start; }

.trophee-rond {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 2px var(--trait-fort);
  color: var(--trait-champ);
}

.trophee.obtenu .trophee-rond { background: var(--or); box-shadow: 0 3px 0 var(--or-bord); color: var(--sur-or); }
.trophee h3 { font: 700 17px/1.2 var(--police-ronde); }
.trophee p { font-size: 14px; line-height: 1.4; color: var(--encre-2); }
.trophee-etat { display: flex; align-items: center; gap: 4px; font-weight: 700; }
.trophee.obtenu .trophee-etat { color: var(--vrai); }
.trophee-barre { height: 8px; margin: 6px 0 2px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.trophee-barre span { display: block; height: 100%; border-radius: 999px; background: var(--nuit); }

.miens { display: grid; margin: 4px 0 14px; }
.mien { display: flex; align-items: center; gap: 10px; padding: 12px 0; border-top: 1px solid var(--trait); }
.mien:first-child { border-top: 0; }
.mien-corps { flex: 1; min-width: 0; display: grid; gap: 2px; }
.mien-tete { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--encre-2); }
.mien h3 { font: 700 16px/1.3 var(--police-texte); }
.mien-prix { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 8px; font-size: 14px; color: var(--encre-2); font-variant-numeric: tabular-nums; }
.mien-prix strong { font-size: 17px; font-weight: 800; color: var(--encre); }
.mien-motif { font-size: 14px; line-height: 1.4; color: var(--encre-2); }
.mien-chiffres { flex: none; display: grid; justify-items: end; gap: 2px; font-size: 14px; color: var(--encre-2); }
.mien-chiffres span { display: inline-flex; align-items: center; gap: 4px; }
.mien-chiffres .folie { min-width: 0; padding: 0; }

.statut { display: inline-flex; align-items: center; height: 24px; padding: 0 8px; border-radius: 8px; font: 700 14px/1 var(--police-texte); }
.statut-publie { background: var(--vrai-fond); color: var(--vrai); }
.statut-expire, .statut-refuse, .statut-en_attente, .statut-retire, .statut-fusionne { background: var(--neutre-fond); color: var(--neutre); }
.mien-expire h3, .mien-refuse h3 { color: var(--encre-2); }

.notifs { display: grid; margin-top: 4px; }
.notif { border-top: 1px solid var(--trait); }
.notif:first-child { border-top: 0; }
.notif a, .notif-fixe { display: flex; gap: 12px; padding: 12px 0; text-decoration: none; }
.notif-ico { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--surface-2); color: var(--encre-2); }
.notif.non-lue .notif-ico { background: var(--vert-pale); color: var(--vert-texte); }
.notif-corps { display: grid; gap: 2px; min-width: 0; font-size: 15px; line-height: 1.4; color: var(--encre-2); }
.notif-corps strong { color: var(--encre); }
.notif-age { font-size: 14px; }
.notif.non-lue .notif-age { font-weight: 700; color: var(--vert-texte); }

/* Poster : le repère d'étapes, le lien, ce qu'on a reconnu. */
.etape-mot { font: 700 16px/1.2 var(--police-ronde); color: var(--vert-texte); }

.etapes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-bottom: 16px;
}

.etapes li {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 4px;
  text-align: center;
  font: 700 16px/1.2 var(--police-ronde);
  color: var(--encre-2);
}

.etapes li + li::before {
  content: "";
  position: absolute;
  top: 16px;
  right: calc(50% + 24px);
  width: calc(100% - 48px);
  height: 3px;
  border-radius: 3px;
  background: var(--trait-fort);
}

.etape-rond {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding-top: 2px;
  border-radius: 50%;
  background: var(--surface);
  box-shadow: inset 0 0 0 2px var(--trait-fort);
  font: 800 18px/1 var(--police-ronde);
}

.etapes .en-cours { color: var(--encre); }
.etapes .en-cours .etape-rond { background: var(--vert); color: var(--sur-vert); box-shadow: 0 3px 0 var(--vert-bord); }

.poster-grille { display: grid; gap: 12px; }
.poster-grille > * { min-width: 0; }
.poster-saisie .groupe:first-child { margin-top: 0; }
.essais { display: flex; align-items: center; flex-wrap: wrap; gap: 0 4px; margin-top: 4px; }
.poster-fin { display: grid; gap: 14px; }

.apercu { display: grid; gap: 10px; margin-top: 10px; }
.apercu-vide { justify-items: center; padding: 28px 16px; border-radius: 14px; background: var(--surface-2); color: var(--encre-2); text-align: center; }
.apercu-reconnu { display: flex; flex-wrap: wrap; gap: 4px 16px; font-weight: 600; font-size: 15px; }
.apercu-reconnu li { display: inline-flex; align-items: center; gap: 6px; }
.apercu-reconnu .ico { color: var(--vrai); }
.apercu-produit { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 12px; align-items: center; }
.apercu-produit img { width: 88px; height: 88px; border-radius: 14px; object-fit: cover; }
.apercu-titre { font: 700 16px/1.3 var(--police-texte); }
.apercu-enseigne { margin-top: 2px; font-size: 14px; color: var(--encre-2); }
.apercu-calcul { display: grid; border-radius: 14px; background: var(--surface-2); padding: 4px 14px; font-size: 15px; }
.apercu-calcul > div { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 8px 0; border-top: 1px solid var(--trait-fort); }
.apercu-calcul > div:first-child { border-top: 0; }
.apercu-calcul dt { color: var(--encre-2); line-height: 1.35; }
.apercu-calcul dd { flex: none; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.apercu-resultat dd { font-size: 20px; color: var(--vert-texte); }
.apercu-verdict { display: flex; flex-wrap: wrap; gap: 6px; }

/* ------------------------------------------------------------------
   10. Toasts, mouvement
   ------------------------------------------------------------------ */

.toasts {
  position: fixed;
  z-index: 50;
  top: 64px;
  left: 12px;
  right: 12px;
  display: grid;
  gap: 8px;
  pointer-events: none;
}

.toasts:empty { display: none; }

.toast {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 0 4px 12px;
  border-radius: 18px;
  background: var(--nuit);
  color: var(--sur-nuit);
  box-shadow: var(--ombre-haut);
  font-weight: 600;
  font-size: 15px;
  line-height: 1.35;
  pointer-events: auto;
  animation: arrivee 0.2s ease-out both;
}

.toast p { flex: 1; min-width: 0; padding: 6px 0; }
.toast-ico { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--sur-nuit); color: var(--nuit); }
.toast-jeu { background: var(--or); color: var(--sur-or); font: 700 16px/1.3 var(--police-ronde); }
.toast-jeu .toast-ico { background: var(--sur-or); color: var(--or); }
.toast-fou { margin: -2px 0; }

.toast-fermer {
  flex: none;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  cursor: pointer;
}

@keyframes envol {
  0% { opacity: 0; transform: translateY(6px) scale(0.8); }
  25% { opacity: 1; transform: translateY(-8px) scale(1.08); }
  70% { opacity: 1; transform: translateY(-20px) scale(1); }
  100% { opacity: 0; transform: translateY(-28px) scale(1); }
}

@keyframes rebond {
  0% { transform: scale(1); }
  40% { transform: scale(1.22); }
  100% { transform: scale(1); }
}

@keyframes creux {
  0% { transform: scale(1); }
  40% { transform: scale(0.88); }
  100% { transform: scale(1); }
}

@keyframes tinte {
  0%, 100% { transform: rotate(0); }
  20% { transform: rotate(-16deg); }
  45% { transform: rotate(13deg); }
  70% { transform: rotate(-7deg); }
}

@keyframes arrivee {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes halo {
  0% { box-shadow: 0 0 0 3px var(--or), var(--ombre-carte); }
  70% { box-shadow: 0 0 0 3px var(--or), var(--ombre-carte); }
  100% { box-shadow: 0 0 0 0 transparent, var(--ombre-carte); }
}

/* Le vote réagit : le chiffre rebondit, le bouton choisi tinte comme un grelot. */
.folie.monte, .folie-grand.monte { animation: rebond 0.32s ease-out; }
.folie.descend, .folie-grand.descend { animation: creux 0.32s ease-out; }
.vient-de-voter .ico { animation: tinte 0.5s ease-out; }
.palier-franchi .jauge .atteint:last-of-type .jauge-grelot,
.palier-franchi .folie-palier { animation: rebond 0.5s ease-out 0.1s; }
.palier-franchi .jauge .atteint .jauge-grelot .ico { animation: tinte 0.7s ease-out 0.15s; }
.serie-pastille.saute .serie-rond { animation: rebond 0.45s ease-out; }
.serie-pastille.saute .serie-rond .ico { animation: tinte 0.7s ease-out; }

/* Mouvement réduit : plus aucune animation, un simple changement d'état. */
@media (prefers-reduced-motion: reduce) {
  .pdf *, .pdf *::before, .pdf *::after {
    animation-duration: 0.01ms !important;
    animation-delay: 0s !important;
    transition-duration: 0.01ms !important;
  }
  .envol { display: none; }
}

/* Survol : seulement là où il y a une souris. */
@media (hover: hover) {
  .carte:hover { box-shadow: 0 0 0 2px var(--vert), var(--ombre-carte); }
  .carte:hover .carte-titre { text-decoration: underline; }
  .ticket:hover { box-shadow: 0 0 0 2px var(--vert), var(--ombre-carte); }
  .vote-pour:hover .vote-rond { background: var(--vert-pale); color: var(--vert-texte); }
  .vote-contre:hover .vote-rond { background: var(--froid-pale); color: var(--froid); }
  .vote-pour[aria-pressed="true"]:hover .vote-rond { background: var(--vert); color: var(--sur-vert); }
  .vote-contre[aria-pressed="true"]:hover .vote-rond { background: var(--froid); color: var(--sur-froid); }
  .onglet:hover, .segments button:hover { color: var(--encre); }
  .onglet[aria-pressed="true"]:hover, .segments button[aria-pressed="true"]:hover { color: var(--sur-nuit); }
  .menu-haut a:hover { color: var(--vert-texte); }
  .outil:hover { background: var(--surface-2); }
  .pdf .bouton-principal:hover { background: var(--vert-texte); }
  .pdf .bouton-secondaire:hover { background: var(--surface-2); }
  .notif a:hover strong { text-decoration: underline; }
  .pastille-remise:hover > span { background: var(--surface-2); }
  .pastille-remise:hover input:checked + span { background: var(--vert-pale); }
  .pied-colonne a:hover { color: var(--encre); text-decoration: underline; }
}

/* ------------------------------------------------------------------
   Tablette : une colonne plus large, la recherche dans l'en-tête
   ------------------------------------------------------------------ */

@media (min-width: 768px) {
  .entete-int { gap: 12px; padding: 0 24px; }
  .recherche { display: flex; max-width: 460px; margin-left: 12px; }
  .recherche-fermer, .ouvrir-recherche { display: none; }
  .pdf { --marge: 24px; }
  .contenu { padding: 16px 0 20px; }
  .pied-int { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; padding: 28px var(--marge) 24px; }
  .pied-colonne-large { grid-column: auto; }
  .pied-colonne-large ul { display: block; }
  .filtres-tete { margin-top: 6px; }

  [data-ecran-actif="accueil"] .contenu,
  [data-ecran-actif="deal"] .contenu,
  [data-ecran-actif="alertes"] .contenu,
  [data-ecran-actif="profil"] .contenu,
  [data-ecran-actif="poster"] .contenu { max-width: 768px; }

  .vitrine-rang { padding: 2px var(--marge) 10px; gap: 10px; }
  .vitrine-titre, .ticket { height: 84px; }
  .vitrine-titre { width: 132px; }
  .ticket { width: 328px; grid-template-columns: 68px minmax(0, 1fr); }
  .ticket img { width: 68px; height: 68px; }
  .fil { gap: 10px; margin-top: 8px; }

  .carte {
    grid-template-columns: 120px minmax(0, 1fr) auto;
    grid-template-areas:
      "photo corps votes"
      "photo note action"
      "photo meta action";
    grid-template-rows: auto auto 1fr;
    column-gap: 16px;
    padding: 14px;
  }

  .carte-photo { width: 120px; height: 120px; margin: 0; }
  .carte-titre { height: auto; max-height: 46px; font-size: 18px; line-height: 23px; }
  .carte-faits { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; }
  .carte-prix { height: 28px; }
  .carte-prix .prix { font-size: 22px; line-height: 28px; }
  .carte-prix .prix-ref { font-size: 15px; }
  .carte-etiquettes { height: auto; overflow: visible; gap: 4px 6px; }
  .carte-note { margin-top: 6px; }
  .carte-meta { align-self: end; height: auto; margin-top: 8px; gap: 2px 14px; }
  .carte-meta .poste-par { flex: 0 1 auto; display: inline; overflow: visible; }
  .carte-meta .poste-niveau { display: inline; }
  .carte-plus { display: inline-flex; }
  .carte .votes { justify-self: end; margin: -4px -4px 0 0; }
  .carte-action { grid-area: action; display: grid; justify-items: end; align-self: end; gap: 2px; }

  .sponsorise { grid-template-columns: 96px minmax(0, 1fr) auto; align-items: center; padding: 14px; }
  .sponsorise img { width: 96px; height: 96px; }
  .pdf .sponsorise .bouton { grid-column: auto; }

  .colonne-cote { grid-template-columns: 1fr 1fr; }

  .fiche { grid-template-columns: 200px minmax(0, 1fr); gap: 16px 20px; }
  .fiche-tete h1 { font-size: 26px; }
  .fiche-montant { font-size: 40px; }
  .courbe-cadre { height: 280px; }
  .proches { grid-template-columns: 1fr 1fr; }

  .page-tete h1, .niveau-texte h1 { font-size: 36px; }
  .plus-grille { grid-template-columns: 1fr 1fr; }
  .chemin-nom { display: block; }
  .stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .trophees { grid-template-columns: 1fr 1fr; gap: 16px 20px; }
  .toasts { top: auto; bottom: 84px; left: auto; right: 24px; width: 380px; }
}

/* ------------------------------------------------------------------
   Bureau : navigation dans l'en-tête, colonne latérale de 300 px
   ------------------------------------------------------------------ */

@media (min-width: 1024px) {
  .entete-int { height: 64px; }
  .logo-tete, .logo-tete .fou { width: 40px; height: 40px; }
  .logo-mot { font-size: 27px; }
  .onglets-bas { display: none; }

  .menu-haut {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-left: auto;
  }

  .menu-haut a:not(.bouton) {
    display: inline-flex;
    align-items: center;
    height: 44px;
    padding: 2px 14px 0;
    border-radius: 999px;
    font: 700 17px/1 var(--police-ronde);
    color: var(--encre-2);
    text-decoration: none;
  }

  .menu-haut a:not(.bouton)[aria-current="page"] { background: var(--surface-2); color: var(--encre); }
  .pdf .menu-haut .bouton { margin: 0 4px 3px 8px; }
  .entete-outils { margin-left: 4px; }

  [data-ecran-actif="accueil"] .contenu,
  [data-ecran-actif="deal"] .contenu,
  [data-ecran-actif="alertes"] .contenu,
  [data-ecran-actif="profil"] .contenu { max-width: 1280px; }
  [data-ecran-actif="poster"] .contenu { max-width: 1100px; }
  .contenu { padding-top: 20px; padding-bottom: 24px; }
  .toasts { bottom: 24px; left: 50%; right: auto; width: 420px; transform: translateX(-50%); }

  .contenu > [data-ecran="accueil"] { padding-inline: var(--marge); }
  .vitrine { margin: 0 0 20px; }

  .vitrine-rang {
    display: grid;
    grid-template-columns: 216px repeat(5, minmax(0, 1fr));
    gap: 12px;
    overflow: visible;
    padding: 0;
  }

  .vitrine-titre { justify-content: flex-start; width: auto; height: auto; padding: 22px 18px 18px; border-radius: 20px; }
  .vitrine-titre h2 { font-size: 32px; }
  .vitrine-long { display: block; margin-top: 8px; font: 600 15px/1.4 var(--police-texte); }
  .vitrine-court { order: 3; align-self: flex-start; margin-top: auto; padding: 5px 12px 2px; border-radius: 999px; background: var(--sur-vert); color: var(--vert); font-size: 16px; }

  .ticket { grid-template-columns: minmax(0, 1fr); align-items: start; align-content: start; gap: 8px; width: auto; height: auto; padding: 10px 10px 12px; border-radius: 20px; }
  .ticket img { width: 100%; height: auto; aspect-ratio: 4 / 3; border-radius: 12px; }
  .ticket-texte { gap: 4px 6px; padding: 0 2px; }
  .ticket-titre { -webkit-line-clamp: 2; height: 38px; font-size: 15px; line-height: 19px; }
  .ticket-prix { flex: 0 0 100%; flex-wrap: wrap; height: 26px; overflow: hidden; font-size: 20px; line-height: 26px; }
  .ticket-prix .prix-ref { display: inline; }
  .ticket .badge, .ticket .type { height: 24px; }
  .ticket-bas { display: grid; gap: 0; margin-top: 2px; line-height: 20px; }

  .deux-colonnes { grid-template-columns: minmax(0, 1fr) 300px; gap: 24px; align-items: start; }
  .barre-onglets, .barre-filtres { position: relative; left: -4px; padding: 0; overflow: visible; flex-wrap: wrap; }
  .fil, .recherche-etat, .filtres-tete { margin-inline: 0; }
  .pied-int { grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)); gap: 28px 32px; padding: 40px var(--marge) 24px; }
  .pied-marque { grid-column: auto; }
  .pied-colonne a { min-height: 36px; }
  .colonne-cote { grid-template-columns: 1fr; margin: 0; }
  .pdf .filtre-liste select { max-width: 216px; }

  .fiche {
    grid-template-columns: 240px minmax(0, 1fr) 388px;
    grid-template-areas:
      "photo tete cote"
      "photo desc cote"
      "courbe courbe cote"
      "com com cote"
      "proches proches proches";
    gap: 16px 24px;
  }

  .fiche > *, .fiche > .fiche-photo { grid-column: auto; }
  .fiche-tete { grid-area: tete; }
  .fiche > .fiche-photo { grid-area: photo; border-radius: 20px; }
  .fiche-courbe { grid-area: courbe; }
  .fiche-desc { grid-area: desc; }
  .fiche-com { grid-area: com; }
  .fiche-proches { grid-area: proches; }
  .fiche-tete h1 { font-size: 30px; line-height: 1.2; }

  .fiche-cote {
    grid-area: cote;
    display: grid;
    gap: 12px;
    align-self: start;
  }

  .fiche-caisse { display: grid; gap: 12px; padding: 20px; border-radius: 20px; background: var(--surface); box-shadow: var(--ombre-carte); }
  .fiche-prix, .fiche-achat, .folie-carte { grid-column: auto; }
  .infos { padding: 12px 0 0; border-top: 1px solid var(--trait); border-radius: 0; box-shadow: none; }
  .explication { background: var(--surface-2); box-shadow: none; }
  .courbe-cadre { height: 300px; }
  .proches { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }

  .alertes-grille { grid-template-columns: 440px minmax(0, 1fr); gap: 24px; align-items: start; }
  .page-fou { width: 132px; height: 132px; }

  .profil-grille { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; }
  .bloc-niveau { grid-column: 1 / span 8; grid-row: 1 / span 2; display: flex; flex-direction: column; justify-content: space-between; padding: 24px; }
  .profil-grille > .bloc-serie { grid-column: 9 / span 4; grid-row: 1; }
  .profil-mission { grid-column: 9 / span 4; grid-row: 2; }
  .bloc-badges { grid-column: 1 / -1; }
  .trophees { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .bloc-miens { grid-column: span 7; align-self: start; }
  .bloc-notifs { grid-column: span 5; align-self: start; }
  .niveau-mascotte .fou { width: 168px; height: 168px; }
  .bulle { font-size: 17px; }

  .poster-grille { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "saisie apercu" "fin apercu"; grid-template-rows: auto 1fr; gap: 16px 20px; align-items: start; }
  .poster-saisie { grid-area: saisie; }
  .poster-apercu { grid-area: apercu; }
  .poster-fin { grid-area: fin; }
  .etapes { max-width: 560px; }
}

@media (min-width: 1024px) and (min-height: 880px) {
  .fiche-cote { position: sticky; top: 80px; }
}

/* ------------------------------------------------------------------
   11. Alertes montrées 24 h après, toutes expirées
   Éteint : votes, Folie, profil, série, mission, alertes de membre, Poster, courbe, sponsorisé.
   Ajouté : pastille « Erreur de prix » / « Promo », badge « Expiré », bouton d'abonnement, capture de la page,
   pages de texte (conditions générales, mentions légales).
   ------------------------------------------------------------------ */

/* La carte sans votes ni bouton : photo, corps, note, puis la ligne de l'enseigne et de l'âge. */
.carte {
  grid-template-columns: 88px minmax(0, 1fr);
  grid-template-areas:
    "photo corps"
    "note note"
    "meta meta";
  padding-right: 10px;
}

.carte-meta { height: auto; min-height: 44px; padding-bottom: 4px; }

/* Bandeau « ces deals sont expirés », au-dessus de la vitrine. */
.bandeau-expire { margin: 0 var(--marge) 14px; }
.bandeau-expire strong { color: var(--encre); }

/* Le bloc d'abonnement : à côté du fil sur ordinateur, sous le fil sur téléphone. */
.bloc-abonne { display: grid; gap: 10px; justify-items: stretch; }
.bloc-abonne p { font-size: 16px; line-height: 1.45; }
.abonne-fou { margin: -6px 0 -6px -6px; justify-self: start; }
.sous-bouton { margin-top: 0; font-size: 14px; line-height: 1.3; color: var(--encre-2); text-align: center; }
.fiche-achat .sous-bouton { margin-top: -4px; }

/* La barre d'abonnement du téléphone : un seul bouton, collé en bas, avec le prix d'entrée dessous. */
.barre-abonne {
  position: sticky;
  bottom: 0;
  z-index: 25;
  padding: 8px var(--marge) calc(6px + env(safe-area-inset-bottom, 0px));
  background: var(--surface);
  border-top: 1px solid var(--trait);
}

.pdf .barre-abonne .bouton {
  flex-direction: column;
  gap: 2px;
  min-height: 56px;
  margin: 0;
  padding: 6px 16px 2px;
  max-width: 520px;
  margin-inline: auto;
}

.barre-titre { font: 700 17px/1.1 var(--police-ronde); }
.barre-prix { font: 600 14px/1.2 var(--police-texte); opacity: 0.92; }

/* La mention au-dessus du pied de page : un lien discret vers les conditions. */
.mention-affiliation a { font-weight: 600; text-decoration: underline; }

/* La preuve du prix : la capture de la page au moment de l'alerte. */
.fiche-preuve { display: grid; gap: 12px; }
.preuve-grille { display: grid; gap: 14px; }
.preuve-texte { display: grid; gap: 8px; align-content: start; font-size: 16px; line-height: 1.5; }
.capture { margin: 0; max-width: 400px; }
.capture figcaption { margin-top: 8px; font-size: 14px; line-height: 1.4; color: var(--encre-2); }

.capture-image {
  position: relative;
  overflow: hidden;
  width: 100%;
  aspect-ratio: 4 / 5;
  border-radius: 14px;
  background: var(--surface);
  box-shadow: 0 0 0 1.5px var(--trait-fort);
}

.capture-bandeau {
  position: relative;
  z-index: 2;
  padding: 8px 12px;
  background: var(--nuit);
  color: var(--sur-nuit);
  font-size: 14px;
  line-height: 1.35;
}

.capture-bandeau b { font-weight: 800; }
.capture-page { display: grid; gap: 12px; padding: 12px; color: var(--encre); }
.cap-haut { display: flex; align-items: center; gap: 8px; height: 30px; }
.cap-logo { flex: none; width: 56px; height: 16px; border-radius: 8px; background: var(--trait-fort); }
.cap-recherche { flex: 1; height: 24px; border-radius: 8px; background: var(--surface-2); }
.cap-produit { display: grid; grid-template-columns: minmax(0, 38%) minmax(0, 1fr); gap: 12px; align-items: start; }
.cap-produit img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 8px; }
.cap-texte { display: grid; gap: 4px; min-width: 0; }
.cap-titre { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; font: 600 14px/1.3 var(--police-texte); }
.cap-prix { font: 800 26px/1.1 var(--police-texte); font-variant-numeric: tabular-nums; }
.cap-ref, .cap-port { font-size: 14px; line-height: 1.3; color: var(--encre-2); }

.cap-bouton {
  justify-self: start;
  margin-top: 4px;
  padding: 7px 14px;
  border-radius: 999px;
  box-shadow: inset 0 0 0 1.5px var(--trait-fort);
  font: 700 14px/1 var(--police-texte);
}

.cap-lignes { display: grid; gap: 8px; }
.cap-lignes span { display: block; height: 10px; border-radius: 5px; background: var(--surface-2); }
.cap-lignes span:nth-child(2) { width: 82%; }
.cap-lignes span:nth-child(3) { width: 64%; }
.cap-lignes span:nth-child(4) { width: 90%; }

/* Le filigrane Prix De Fou, en travers de toute l'image. */
.capture-filigrane {
  position: absolute;
  inset: -25% -35%;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  transform: rotate(-26deg);
  pointer-events: none;
}

.capture-filigrane span {
  font: 800 26px/1 var(--police-ronde);
  color: var(--vert);
  opacity: 0.13;
  white-space: nowrap;
  text-align: center;
}

/* Les pages de texte : conditions générales, mentions légales. */
.page-texte { display: grid; gap: 12px; max-width: 760px; margin-bottom: 8px; }
.page-texte h1 { font: 800 28px/1.2 var(--police-ronde); }
.page-article { display: grid; gap: 8px; }
.page-article p { font-size: 16px; line-height: 1.55; }

@media (min-width: 768px) {
  .carte {
    grid-template-columns: 120px minmax(0, 1fr);
    grid-template-areas:
      "photo corps"
      "photo note"
      "photo meta";
  }

  .bandeau-expire { margin-inline: var(--marge); }
  .preuve-grille { grid-template-columns: minmax(0, 400px) minmax(0, 1fr); gap: 24px; align-items: start; }
}

@media (min-width: 1024px) {
  .barre-abonne { display: none; }
  .bandeau-expire { margin-inline: 0; }

  .fiche {
    grid-template-areas:
      "photo tete cote"
      "photo desc cote"
      "preuve preuve cote"
      "proches proches proches";
  }

  .fiche-preuve { grid-area: preuve; }
  .page-texte { margin-inline: 0; }
}

/* Le bouton d'abonnement a une longue phrase : elle revient à la ligne au lieu d'élargir la page. */
.pdf .bouton[data-test="abonne"] {
  height: auto;
  min-width: 0;
  padding: 10px 20px 8px;
  white-space: normal;
  text-align: center;
  line-height: 1.15;
}

.colonne-cote, .fiche-achat, .fiche-caisse { min-width: 0; }

/* L'image de la capture garde son carré (l'attribut height de l'image ne doit pas l'étirer). */
.cap-produit img { height: auto; }
.cap-lignes span:nth-child(5) { width: 72%; }
.cap-lignes span:nth-child(6) { width: 94%; }
.cap-lignes span:nth-child(7) { width: 58%; }
.cap-lignes span:nth-child(8) { width: 80%; }

/* La barre d'abonnement collante ne sert que sur l'accueil : la fiche a déjà son grand bouton, les pages de texte n'en ont pas besoin. */
[data-ecran-actif="deal"] .barre-abonne,
[data-ecran-actif="conditions"] .barre-abonne,
[data-ecran-actif="mentions"] .barre-abonne { display: none; }


/* ------------------------------------------------------------------
   12. V1b : le bouffon pour logo, vert pour les pastilles et les accents, bleu foncé pour les boutons d'action
   ------------------------------------------------------------------ */

.pdf .bouton-principal { background: var(--bleu); color: var(--sur-nuit); box-shadow: 0 4px 0 var(--bleu-bord); }
.pdf .bouton-principal:active { box-shadow: 0 1px 0 var(--bleu-bord); }

@media (hover: hover) {
  .pdf .bouton-principal:hover { background: var(--bleu-survol); }
}

/* Le logo : le bouffon, puis « prixde » en bleu foncé et « fou » en vert. */
.logo-tete { width: 32px; height: 40px; }
.logo-tete .bouffon { display: block; width: 100%; height: 100%; }
.logo { gap: 9px; }
.logo-mot { color: var(--bleu); }
.logo-mot b { color: var(--vert-logo); }
.pied-marque .logo { color: var(--bleu); }
.bouffon-grand { display: block; width: auto; height: 76px; margin: 0 0 2px; justify-self: start; }
.vide .bouffon { display: block; width: auto; height: 96px; margin-inline: auto; }

@media (min-width: 1024px) {
  .logo-tete { width: 37px; height: 46px; }
}


/* Pied de page à deux colonnes de liens (plus de colonne « Aide »). */
.pied-colonne ul { display: grid; }

@media (min-width: 1024px) {
  .pied-int { grid-template-columns: minmax(0, 1.6fr) repeat(2, minmax(0, 1fr)); }
}

/* ------------------------------------------------------------------
   13. Site réel : pas de photo de produit (le site n'a ni identifiant ni lien), la remise fait la vignette.
   Capture de preuve : l'image réelle prise au moment de l'alerte.
   ------------------------------------------------------------------ */

.tuile { display: grid; place-items: center; width: 100%; height: 100%; text-align: center; border-radius: inherit; }
.tuile b { padding-top: 3px; font: 800 26px/1 var(--police-ronde); letter-spacing: -0.01em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tuile-edp { background: var(--vert); color: var(--sur-vert); }
.tuile-promo { background: var(--vert-pale); color: var(--vert-texte); box-shadow: inset 0 0 0 1.5px rgb(23 105 42 / 0.22); }

.ticket-vignette { display: block; width: 60px; height: 60px; border-radius: 12px; overflow: hidden; }
.ticket-vignette .tuile b { font-size: 18px; }
.fiche-photo .tuile b { font-size: 28px; }

.capture-lien { display: block; border-radius: 14px; }
.capture-img { display: block; width: 100%; height: auto; border-radius: 14px; background: var(--surface-2); box-shadow: 0 0 0 1.5px var(--trait-fort); }
.preuve-texte p + p { margin-top: 8px; }

@media (min-width: 768px) {
  .ticket-vignette { width: 68px; height: 68px; }
  .ticket-vignette .tuile b { font-size: 20px; }
  .tuile b { font-size: 34px; }
  .fiche-photo .tuile b { font-size: 38px; }
}

@media (min-width: 1024px) {
  .ticket-vignette { width: 100%; height: auto; aspect-ratio: 4 / 3; }
  .ticket-vignette .tuile b { font-size: 40px; }
  .fiche-photo .tuile b { font-size: 46px; }
}

/* La vignette est un lien : pas de soulignement sur la remise. */
.carte-photo, .carte-photo:hover, .ticket-vignette { text-decoration: none; }

/* ------------------------------------------------------------------
   14. Palette violet et rose ; le logo est le bouffon.
   Les jetons --vert* et --bleu* portent ici le rose framboise d'avant (mêmes noms que la V1b, valeurs de l'ancien --framboise).
   ------------------------------------------------------------------ */

:root {
  --vert: #d4145a;
  --vert-bord: #9c0c40;
  --vert-texte: #b80f4e;
  --vert-pale: #ffe4ee;
  --sur-vert: #ffffff;
  --vert-logo: #b80f4e;
  --bleu: #d4145a;
  --bleu-bord: #9c0c40;
  --bleu-survol: #b80f4e;
}

.logo-mot { color: var(--encre); }
.logo-mot b { color: var(--vert-texte); }
.pied-marque .logo { color: var(--encre); }


/* ------------------------------------------------------------------
   15. Fiche : preuve du prix pleine largeur (texte dessous), deals proches hors de la grille (3 au plus, en bandeau compact)
   ------------------------------------------------------------------ */

.fiche-preuve { display: grid; gap: 12px; }
.fiche-preuve .capture { max-width: none; width: 100%; }
.fiche-preuve .capture-img { width: 100%; height: auto; }
.fiche-preuve .preuve-texte { display: grid; gap: 8px; max-width: 70ch; }

.fiche-proches { margin-top: 24px; }
.fiche-proches .bloc-titre { margin: 0 0 12px; }
.proches { display: grid; gap: 10px; grid-template-columns: minmax(0, 1fr); }
.proches .ticket { width: auto; height: auto; min-height: 84px; padding: 10px; grid-template-columns: 68px minmax(0, 1fr); align-items: center; align-content: center; gap: 12px; }
.proches .ticket-vignette { width: 68px; height: 68px; aspect-ratio: auto; }
.proches .ticket-vignette .tuile b { font-size: 20px; }
.proches .ticket-prix { flex-wrap: wrap; height: auto; font-size: 18px; line-height: 24px; }
.proches .ticket-titre { height: auto; max-height: 38px; font-size: 15px; line-height: 19px; }

@media (min-width: 768px) {
  .proches { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}


/* ------------------------------------------------------------------
   16. Téléphone : plus de marge du navigateur, vitrine en bandeau + rangée, onglets et filtres qui tiennent, prix sans débordement
   ------------------------------------------------------------------ */

html, body { margin: 0; }
body { min-height: 100vh; }
.pdf { min-height: 100vh; min-height: 100dvh; }

/* La vignette « Promo » : un liseré rose (il restait un liseré vert de la V1b). */
.tuile-promo { box-shadow: inset 0 0 0 1.5px rgb(212 20 90 / 0.22); }

/* La barre collante d'abonnement ne sert pas non plus sur les pages de texte restantes. */
[data-ecran-actif="confidentialite"] .barre-abonne,
[data-ecran-actif="cookies"] .barre-abonne { display: none; }

/* Pendant une recherche, on ne garde que les résultats. */
.avec-recherche .vitrine,
.avec-recherche .bandeau-expire { display: none; }

/* La vitrine : le bandeau au-dessus, la rangée de deals dessous. */
.vitrine { display: grid; gap: 8px; }

@media (max-width: 767px) {
  .vitrine-titre { flex-direction: row; align-items: center; justify-content: space-between; gap: 12px; width: auto; height: auto; margin: 0 var(--marge); padding: 12px 16px 8px; }
  .vitrine-titre h2 { font-size: 20px; }
  .vitrine-court { white-space: nowrap; }
  .vitrine-rang { padding: 2px var(--marge) 8px; gap: 8px; scroll-snap-type: x proximity; scroll-padding-inline: var(--marge); }
  .ticket { width: min(300px, calc(100vw - 72px)); height: auto; min-height: 84px; scroll-snap-align: start; }
  .ticket-prix .remise { display: none; }

  /* Onglets : les trois tiennent sur la largeur. */
  .onglet { padding: 2px 10px 0; font-size: 16px; }

  /* Filtres : les 4 pastilles de remise sur toute la largeur, la catégorie dessous. */
  .barre-filtres { flex-wrap: wrap; overflow: visible; padding: 0 var(--marge); }
  .pastilles-remise { flex: 1 1 100%; margin: 0; }
  .pastille-remise { flex: 1 1 0; min-width: 0; }
  .pastille-remise > span,
  .pastille-remise:first-child > span,
  .pastille-remise:last-child > span { width: 100%; min-width: 0; padding: 0 4px; }
  .filtre-liste { flex: 1 1 100%; }
  .pdf .filtre-liste select { width: 100%; max-width: none; }

  /* Cartes : la remise est déjà dans la vignette, le prix ne déborde plus. */
  .carte-prix { flex-wrap: wrap; height: auto; row-gap: 0; }
  .carte-prix .remise { display: none; }
}

@media (max-width: 359px) {
  .onglet { padding: 2px 8px 0; border-inline-width: 2px; font-size: 15px; }
  .pied-int, .pied-colonne a { font-size: 14px; }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .vitrine { display: flex; align-items: flex-start; gap: 0; padding-left: var(--marge); }
  .vitrine-titre { margin-top: 2px; }
  .vitrine-rang { flex: 1 1 0; min-width: 0; padding-left: 10px; }
}

@media (min-width: 1024px) {
  .vitrine { grid-template-columns: 216px minmax(0, 1fr); gap: 12px; }
  .vitrine-rang { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}


/* ------------------------------------------------------------------
   17. Photo du produit dans la vignette : la photo sur fond blanc, la remise en pastille en bas à gauche
   ------------------------------------------------------------------ */

.tuile-photo { position: relative; display: block; width: 100%; height: 100%; overflow: hidden; border-radius: inherit; background: #fff; box-shadow: inset 0 0 0 1.5px var(--trait); }
.tuile-photo img { width: 100%; height: 100%; object-fit: contain; padding: 4px; }
.pdf .tuile.tuile-photo b { position: absolute; left: 3px; bottom: 3px; padding: 4px 6px 1px; border-radius: 8px; background: var(--vert); color: var(--sur-vert); font: 800 14px/1 var(--police-ronde); letter-spacing: 0; }
.pdf .fiche-photo .tuile.tuile-photo b { left: 8px; bottom: 8px; padding: 5px 9px 2px; border-radius: 10px; font-size: 18px; }
.pdf .carte-photo .tuile.tuile-photo b { font-size: 14px; }

@media (min-width: 768px) {
  .pdf .carte-photo .tuile.tuile-photo b { left: 6px; bottom: 6px; padding: 5px 8px 2px; font-size: 16px; }
}

@media (min-width: 1024px) {
  .pdf .ticket-vignette .tuile.tuile-photo b { left: 8px; bottom: 8px; padding: 5px 8px 2px; font-size: 16px; }
}


/* ------------------------------------------------------------------
   18. Refonte Apple : réponse immédiate, ressorts sans rebond, matières translucides, ombres teintées d'indigo,
   chiffres et titres réglés (interlettrage selon la taille), mouvement qui respecte « réduire les animations ».
   La palette, le logo et les textes ne changent pas.
   ------------------------------------------------------------------ */

:root {
  /* Un ressort critique (aucun rebond) pour tout ce qu'on touche ; un léger rebond seulement pour le jeu du logo. */
  --ressort: cubic-bezier(0.22, 1, 0.36, 1);
  --ressort-rebond: cubic-bezier(0.34, 1.4, 0.64, 1);

  /* Trois niveaux de relief, teintés d'indigo comme le fond, tous éclairés d'en haut. */
  --ombre-1: 0 1px 2px rgb(31 26 68 / 0.06), 0 6px 16px -8px rgb(31 26 68 / 0.16);
  --ombre-2: 0 2px 4px rgb(31 26 68 / 0.06), 0 16px 32px -14px rgb(31 26 68 / 0.30);
  --ombre-3: 0 4px 10px rgb(31 26 68 / 0.08), 0 30px 60px -24px rgb(31 26 68 / 0.40);
  --ombre-rose: 0 1px 0 rgb(255 255 255 / 0.26) inset, 0 12px 22px -10px rgb(212 20 90 / 0.62);
  --ombre-carte: var(--ombre-1);
}

@supports (transition-timing-function: linear(0, 1)) {
  :root {
    --ressort: linear(0, 0.078 4.2%, 0.234 8.3%, 0.4 12.5%, 0.547 16.7%, 0.667 20.8%, 0.76 25%, 0.83 29.2%, 0.881 33.3%, 0.917 37.5%, 0.943 41.7%, 0.961 45.8%, 0.973 50%, 0.982 54.2%, 0.988 58.3%, 0.992 62.5%, 0.995 66.7%, 0.998 75%, 1);
    --ressort-rebond: linear(0, 0.076 3.3%, 0.244 6.7%, 0.438 10%, 0.619 13.3%, 0.768 16.7%, 0.88 20%, 0.957 23.3%, 1.004 26.7%, 1.028 30%, 1.038 33.3%, 1.037 36.7%, 1.032 40%, 1.018 46.7%, 1.006 53.3%, 1.001 60%, 0.999 70%, 1);
  }
}

html { scroll-behavior: smooth; }

.pdf {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-optical-sizing: auto;
  text-rendering: optimizeLegibility;
}

.pdf ::selection { background: rgb(212 20 90 / 0.18); }

/* ----- Typographie : les grands titres se resserrent, le petit texte respire, les titres s'équilibrent ----- */

.pdf :where(h1, h2, h3) { text-wrap: balance; }
.pdf :where(p, li) { text-wrap: pretty; }
.bloc-titre { letter-spacing: -0.02em; }
.fiche-tete h1 { letter-spacing: -0.025em; line-height: 1.12; }
.fiche-montant { letter-spacing: -0.03em; }
.carte-titre, .ticket-titre { letter-spacing: -0.005em; }
.carte-meta, .sous-bouton, .prix-ref, .ticket-bas, .poste-par { letter-spacing: 0.005em; }
.pied h2 { letter-spacing: -0.01em; }

/* ----- Matières : l'en-tête et la barre du bas sont des vitres, le contenu défile dessous ----- */

.entete {
  background: rgb(255 255 255 / 0.74);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  backdrop-filter: blur(22px) saturate(180%);
  border-bottom: 1px solid rgb(31 26 68 / 0.07);
}

.barre-abonne {
  background: rgb(255 255 255 / 0.8);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  backdrop-filter: blur(22px) saturate(180%);
  border-top: 1px solid rgb(31 26 68 / 0.07);
}

.pied { border-top: 0; background: var(--surface); box-shadow: 0 -1px 0 rgb(31 26 68 / 0.06); }

@media (prefers-reduced-transparency: reduce) {
  .entete, .barre-abonne { background: #fff; -webkit-backdrop-filter: none; backdrop-filter: none; }
}

@media (prefers-contrast: more) {
  .entete, .barre-abonne { background: #fff; border-color: var(--encre); }
  .carte, .ticket, .bloc { box-shadow: inset 0 0 0 1.5px var(--encre); }
}

/* ----- Boutons : une teinte à plat, un relief doux, un appui net (réponse dès le doigt posé) ----- */

.pdf .bouton {
  margin-bottom: 0;
  transition: transform 0.35s var(--ressort), box-shadow 0.35s var(--ressort), background-color 0.2s ease-out, filter 0.2s ease-out;
}

.pdf .bouton-principal { background: var(--vert); box-shadow: var(--ombre-rose); }
.pdf .bouton-nuit { box-shadow: 0 1px 0 rgb(255 255 255 / 0.14) inset, 0 10px 20px -10px rgb(31 26 68 / 0.6); }
.pdf .bouton-secondaire { box-shadow: inset 0 0 0 1.5px var(--trait-fort), 0 1px 2px rgb(31 26 68 / 0.06); }

@media (hover: hover) {
  .pdf .bouton:hover { filter: brightness(1.06); transform: translateY(-1px); }
}

.pdf .bouton:active,
.pdf .bouton-principal:active,
.pdf .bouton-nuit:active,
.pdf .bouton-secondaire:active { transform: scale(0.97); filter: brightness(0.97); transition-duration: 0.1s; }
.pdf .bouton-principal:active { box-shadow: 0 1px 0 rgb(255 255 255 / 0.2) inset, 0 4px 10px -6px rgb(212 20 90 / 0.6); }

.pdf :focus-visible { outline: 3px solid rgb(0 102 204 / 0.6); outline-offset: 3px; }
.recherche input { transition: box-shadow 0.25s var(--ressort), border-color 0.25s ease-out, background-color 0.25s ease-out; }
.recherche input:focus-visible { outline: none; background: #fff; border-color: var(--lien); box-shadow: 0 0 0 4px rgb(0 102 204 / 0.18); }

/* ----- Le logo joue un peu quand on le survole (le seul endroit où le ressort rebondit) ----- */

.logo-tete { transition: transform 0.6s var(--ressort-rebond); transform-origin: 50% 80%; }
@media (hover: hover) {
  .logo:hover .logo-tete { transform: rotate(-7deg) scale(1.05); }
}

/* ----- Cartes et tickets : relief tinté, soulèvement au survol, enfoncement à l'appui ----- */

.carte, .ticket, .bloc { box-shadow: var(--ombre-1); }
.carte { border-radius: 24px; transition: transform 0.4s var(--ressort), box-shadow 0.4s var(--ressort); }
.ticket { transition: transform 0.4s var(--ressort), box-shadow 0.4s var(--ressort); }

@media (hover: hover) {
  .carte:hover, .ticket:hover { transform: translateY(-3px); box-shadow: var(--ombre-2); }
}

.carte:active, .ticket:active { transform: scale(0.985); box-shadow: var(--ombre-1); transition-duration: 0.12s; }

.carte-photo, .ticket-vignette, .fiche-photo { border-radius: 18px; }
.tuile-promo { box-shadow: inset 0 0 0 1px rgb(212 20 90 / 0.14); }

/* Onglets et pastilles de remise : le changement d'état glisse au lieu de sauter. */
.onglet { transition: background-color 0.3s var(--ressort), color 0.2s ease-out, transform 0.3s var(--ressort); }
.onglet:active { transform: scale(0.96); }
.pastille-remise > span { transition: background-color 0.3s var(--ressort), color 0.2s ease-out; }

.bandeau-expire { border-radius: 18px; background: rgb(31 26 68 / 0.05); box-shadow: none; padding: 12px 16px; }

/* ----- Entrées : les premières cartes arrivent l'une après l'autre, chaque écran se pose en douceur ----- */

@keyframes arrivee {
  from { opacity: 0; transform: translateY(12px) scale(0.985); }
}

@keyframes arrivee-ecran {
  from { opacity: 0; transform: translateY(8px); }
}

@keyframes arrivee-douce {
  from { opacity: 0; }
}

[data-ecran]:not([hidden]) { animation: arrivee-ecran 0.45s var(--ressort) backwards; }

.fil > .carte { animation: arrivee 0.55s var(--ressort) backwards; }
.fil > .carte:nth-child(2) { animation-delay: 40ms; }
.fil > .carte:nth-child(3) { animation-delay: 80ms; }
.fil > .carte:nth-child(4) { animation-delay: 120ms; }
.fil > .carte:nth-child(5) { animation-delay: 160ms; }
.fil > .carte:nth-child(6) { animation-delay: 200ms; }
.fil > .carte:nth-child(n+7) { animation-delay: 240ms; }
.fil > .carte:nth-child(n+13) { animation: none; }

.vitrine-rang > .ticket { animation: arrivee 0.6s var(--ressort) backwards; }
.vitrine-rang > .ticket:nth-child(2) { animation-delay: 60ms; }
.vitrine-rang > .ticket:nth-child(3) { animation-delay: 120ms; }
.vitrine-rang > .ticket:nth-child(4) { animation-delay: 180ms; }
.vitrine-rang > .ticket:nth-child(n+5) { animation-delay: 240ms; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  [data-ecran]:not([hidden]), .fil > .carte, .vitrine-rang > .ticket { animation: arrivee-douce 0.2s linear backwards; animation-delay: 0s; }
  .carte, .ticket, .pdf .bouton, .logo-tete, .onglet { transition-duration: 0.01ms; }
  .carte:hover, .ticket:hover, .pdf .bouton:hover, .logo:hover .logo-tete { transform: none; }
  .frise-direct .frise-point { animation: none; }
}

/* ------------------------------------------------------------------
   Encart « Erreurs de prix » (la vitrine) : une étiquette qui a du relief, le bouffon en filigrane
   ------------------------------------------------------------------ */

.vitrine-titre {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: 28px;
  background:
    radial-gradient(120% 80% at 100% 0%, rgb(255 255 255 / 0.2), transparent 55%),
    linear-gradient(165deg, #e2175f 0%, #c3114f 100%);
  box-shadow: 0 1px 0 rgb(255 255 255 / 0.3) inset, 0 22px 36px -20px rgb(212 20 90 / 0.7);
}

.vitrine-titre h2 { letter-spacing: -0.03em; }

.pdf .vitrine-fou {
  position: absolute;
  z-index: -1;
  right: -22px;
  bottom: -26px;
  width: auto;
  height: 150px;
  margin: 0;
  opacity: 0.13;
  transform: rotate(-9deg);
  pointer-events: none;
}

.vitrine-court { box-shadow: 0 6px 14px -8px rgb(31 26 68 / 0.45); }

@media (max-width: 767px) {
  .vitrine-titre { border-radius: 22px; }
  .pdf .vitrine-fou { right: 40px; bottom: -34px; height: 96px; }
}

@media (min-width: 1024px) {
  .vitrine-titre { padding: 26px 22px 22px; }
  .vitrine-titre h2 { font-size: 36px; line-height: 0.98; }
  .vitrine-long { max-width: 20ch; opacity: 0.94; }
  .vitrine-court { font-size: 17px; }
}

/* ------------------------------------------------------------------
   Encart « Ces deals, en direct » : l'écart de 24 h se voit au lieu de se lire
   ------------------------------------------------------------------ */

.bloc-abonne {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  gap: 16px;
  padding: 22px;
  border-radius: 28px;
  background: linear-gradient(180deg, #ffffff 0%, #fbf9ff 100%);
  box-shadow: var(--ombre-2);
}

.bloc-abonne::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -90px;
  right: -90px;
  width: 280px;
  height: 280px;
  background: radial-gradient(closest-side, rgb(212 20 90 / 0.13), transparent);
  pointer-events: none;
}

.abonne-tete { display: flex; align-items: center; gap: 14px; }

.abonne-fou {
  flex: none;
  display: grid;
  place-items: center;
  width: 62px;
  height: 62px;
  border-radius: 18px;
  background: linear-gradient(150deg, #ffffff 0%, #ece8fb 100%);
  box-shadow: inset 0 0 0 1px rgb(31 26 68 / 0.07), 0 8px 16px -10px rgb(31 26 68 / 0.45);
}

.abonne-fou .bouffon { display: block; width: auto; height: 40px; margin: 0; }
.bloc-abonne .bloc-titre { font-size: 24px; line-height: 1.1; letter-spacing: -0.025em; }
.bloc-abonne > p { color: var(--encre-2); }

/* La frise : un point rose qui bat côté abonnés, un point vide côté site, 24 h entre les deux. */
.abonne-frise {
  position: relative;
  display: grid;
  gap: 0;
  padding: 14px 16px;
  border-radius: 18px;
  background: rgb(31 26 68 / 0.04);
  list-style: none;
}

.frise-etape { position: relative; display: grid; grid-template-columns: 14px minmax(0, 1fr); column-gap: 12px; align-items: start; }
.frise-point { position: relative; z-index: 1; width: 14px; height: 14px; margin-top: 4px; border-radius: 50%; }
.frise-texte { display: grid; gap: 1px; font-size: 15px; line-height: 1.35; color: var(--encre-2); }
.frise-texte b { font-weight: 700; color: var(--encre); }

.frise-direct .frise-point { background: var(--vert); animation: pouls 2.4s ease-out infinite; }
.frise-site .frise-point { background: var(--surface); box-shadow: inset 0 0 0 2px var(--trait-champ); }

@keyframes pouls {
  0% { box-shadow: 0 0 0 0 rgb(212 20 90 / 0.45); }
  70%, 100% { box-shadow: 0 0 0 9px rgb(212 20 90 / 0); }
}

/* Le fil entre les deux points, avec la pastille « 24 h » posée dessus. */
.frise-ecart {
  position: relative;
  display: grid;
  grid-template-columns: 14px minmax(0, 1fr);
  column-gap: 12px;
  align-items: center;
  min-height: 34px;
}

.frise-ecart::before {
  content: "";
  grid-column: 1;
  justify-self: center;
  width: 2px;
  height: 100%;
  min-height: 34px;
  background: repeating-linear-gradient(to bottom, var(--trait-champ) 0 4px, transparent 4px 8px);
}

.frise-ecart span {
  grid-column: 2;
  justify-self: start;
  padding: 3px 10px 1px;
  border-radius: 999px;
  background: var(--surface);
  box-shadow: inset 0 0 0 1.5px var(--trait-fort);
  font: 800 14px/1.2 var(--police-ronde);
  letter-spacing: 0.01em;
  color: var(--encre-2);
}

@media (max-width: 767px) {
  .bloc-abonne { padding: 20px; border-radius: 24px; }
}

/* Le bouton de l'encart d'abonnement tient sur deux lignes : colonne latérale un peu plus large, texte à 18 px. */
@media (min-width: 1024px) {
  .deux-colonnes { grid-template-columns: minmax(0, 1fr) 336px; }
}

.bloc-abonne .bouton-grand { font-size: 18px; padding-inline: 16px; }
.bloc-abonne .bouton-grand .ico { flex: none; }

@media (max-width: 767px) {
  .pdf .vitrine-fou { opacity: 0.1; }
}

@media (prefers-reduced-motion: reduce) {
  .frise-direct .frise-point { animation: none; }
}

/* ------------------------------------------------------------------
   Ajustements de la refonte : l'encart d'abonnement sans décalage, la fiche sur téléphone avec la photo en grand
   ------------------------------------------------------------------ */

.bloc-abonne .abonne-fou { margin: 0; justify-self: auto; }

/* Fiche sur téléphone : la photo en grand sur toute la largeur, le prix dessous, puis « Prix habituel » sous le prix. */
@media (max-width: 767px) {
  .fiche { grid-template-columns: minmax(0, 1fr); }
  .fiche > .fiche-photo { grid-column: 1 / -1; width: 100%; aspect-ratio: 4 / 3; max-height: 320px; border-radius: 20px; }
  .fiche-prix { grid-column: 1 / -1; }
  .fiche-montant { font-size: 38px; }
  .fiche-origine { margin-top: 8px; font-size: 15px; }
  .pdf .fiche-photo .tuile b { font-size: 56px; }
}

/* ------------------------------------------------------------------
   21. Consentement : la bannière (en bas, au-dessus de tout) et les interrupteurs de la page « Gérer mes cookies »
   Rien de cela ne s'affiche tant qu'aucun pixel n'est configuré.
   ------------------------------------------------------------------ */

.bandeau-cookies {
  position: fixed;
  z-index: 60;
  left: 12px;
  right: 12px;
  bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  display: grid;
  gap: 8px;
  max-width: 560px;
  margin-inline: auto;
  padding: 14px 16px 12px;
  border-radius: 22px;
  background: rgb(255 255 255 / 0.92);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  backdrop-filter: blur(22px) saturate(180%);
  box-shadow: var(--ombre-3), inset 0 0 0 1px rgb(31 26 68 / 0.06);
  animation: arrivee 0.5s var(--ressort) backwards;
}

.bandeau-cookies p { font-size: 15px; line-height: 1.4; color: var(--encre-2); }

.bandeau-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 4px; }

/* Dans la bannière : une seule rangée. « Tout refuser » et « Tout accepter » ont exactement le même poids : même taille, même style. */
.bandeau-cookies .bandeau-actions { flex-wrap: nowrap; gap: 8px; margin-top: 2px; }
.bandeau-cookies .bandeau-actions .bouton { flex: 1 1 0; min-width: 0; min-height: 44px; padding-inline: 8px; font-size: 15px; }

.bandeau-choisir {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding-inline: 6px;
  font: 700 15px/1 var(--police-ronde);
  color: var(--encre);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.cookies-ouvert .barre-abonne { display: none; }
[data-ecran-actif="cookies"] .bandeau-cookies { display: none; }

@media (min-width: 768px) {
  .bandeau-cookies { left: 24px; right: auto; bottom: 24px; width: 460px; margin-inline: 0; }
}

.categorie-tete { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.page-actions { margin: 4px 0 0; }
.page-actions { flex-wrap: wrap; }
.page-actions .bouton { flex: 1 1 160px; }

/* L'interrupteur : une vraie case à cocher (clavier, lecteur d'écran) habillée en bascule. */
.interrupteur { position: relative; flex: none; width: 56px; height: 44px; display: grid; place-items: center; cursor: pointer; }
.interrupteur input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.interrupteur-piste { position: relative; width: 52px; height: 32px; border-radius: 999px; background: var(--trait-fort); transition: background-color 0.3s var(--ressort); }
.interrupteur-piste::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 6px rgb(31 26 68 / 0.3);
  transition: transform 0.35s var(--ressort);
}
.interrupteur input:checked + .sr + .interrupteur-piste { background: var(--vert); }
.interrupteur input:checked + .sr + .interrupteur-piste::after { transform: translateX(20px); }
.interrupteur input:focus-visible + .sr + .interrupteur-piste { outline: 3px solid rgb(0 102 204 / 0.6); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  .bandeau-cookies { animation: arrivee-douce 0.2s linear backwards; }
  .interrupteur-piste, .interrupteur-piste::after { transition-duration: 0.01ms; }
}


/* L'encart « Ces deals, en direct » reste visible quand on fait défiler la liste (ordinateur). */
@media (min-width: 1024px) and (min-height: 560px) {
  .colonne-cote { position: sticky; top: 84px; align-self: start; }
}

/* ------------------------------------------------------------------
   Tickets en bandeau (deals proches, vitrine sur téléphone) : la photo prend toute la hauteur de la carte, collée au bord
   ------------------------------------------------------------------ */

.proches .ticket { padding: 0; gap: 0; overflow: hidden; align-items: stretch; grid-template-columns: 124px minmax(0, 1fr); min-height: 112px; }
.proches .ticket-vignette { width: 100%; height: 100%; min-height: 112px; aspect-ratio: auto; border-radius: 0; box-shadow: none; }
.proches .ticket-texte { align-content: center; padding: 12px 14px; }

@media (min-width: 768px) {
  .proches .ticket { grid-template-columns: 148px minmax(0, 1fr); min-height: 150px; }
  .proches .ticket-vignette { min-height: 150px; }
}

@media (max-width: 767px) {
  .vitrine-rang .ticket { padding: 0; gap: 0; overflow: hidden; align-items: stretch; grid-template-columns: 96px minmax(0, 1fr); }
  .vitrine-rang .ticket-vignette { width: 100%; height: 100%; min-height: 96px; border-radius: 0; box-shadow: none; }
  .vitrine-rang .ticket-texte { align-content: center; padding: 10px 12px; }
}

/* Photo pleine hauteur : plus de liseré autour de l'image (le bord de la carte suffit). */
.proches .ticket-vignette .tuile-photo,
.vitrine-rang .ticket-vignette .tuile-photo { box-shadow: none; border-radius: 0; }

/* Fiche sur ordinateur : l'encart « Le deal » prend toute la largeur de la colonne de gauche, comme « La preuve du prix ». */
@media (min-width: 1024px) {
  .fiche {
    grid-template-areas:
      "photo tete cote"
      "desc desc cote"
      "preuve preuve cote"
      "proches proches proches";
  }
}


/* Le conteneur du ticket étire déjà la vignette : pas de hauteur en pourcentage (elle laissait 15 px sous la photo quand le texte d'une autre carte était plus haut). */
.proches .ticket-vignette,
.vitrine-rang .ticket-vignette { height: auto; align-self: stretch; }
@media (min-width: 768px) { .proches .ticket-vignette { height: auto; } }

.proches .ticket, .vitrine-rang .ticket { align-content: stretch; }

/* Message affiché sans JavaScript (plus d'attribut style : la politique de sécurité n'autorise plus les styles en ligne). */
.sans-js { padding: 16px; font: 16px system-ui; }

.voir-plus { display: grid; justify-items: center; margin-top: 4px; }

/* ------------------------------------------------------------------
   22. Page Contact et page d'erreur 404
   ------------------------------------------------------------------ */
.lien-contact { color: #D4145A; font-weight: 700; text-decoration: underline; overflow-wrap: anywhere; }
.page-404 { min-height: 100vh; display: grid; place-content: center; justify-items: center; gap: 16px; padding: 24px; text-align: center; }
.page-404 img { width: 96px; height: 120px; }
.page-404 h1 { font: 800 28px/1.2 var(--police-ronde); }