/* :: CryptoJackpotz - feuille de style :: */

:root {
  --blanc: #FFFFFF;
  --neige: #F6F7FC;
  --givre: #EBEEF9;
  --trait: #D8DCEE;
  --trait-fort: #B7BEDB;
  --encre: #121833;
  --encre-douce: #414A68;
  --encre-pale: #5A6382;
  --fleur: #0B3FA8;
  --fleur-vif: #1B52CC;
  --fleur-nuit: #06276F;
  --fleur-abysse: #041A4D;
  --fleur-lait: #E7EDFC;
  --prune: #6B2FB9;
  --prune-nuit: #45197F;
  --prune-lait: #F2EBFC;
  --lilas: #B89BF0;
  --lilas-clair: #DCCEF8;
  --police-titre: "Onest", "Segoe UI", system-ui, sans-serif;
  --police-texte: "Public Sans", "Segoe UI", system-ui, sans-serif;
  --largeur: 1220px;
  --mesure: 740px;
  --rayon: 16px;
  --rayon-petit: 10px;
  --ombre: 0 1px 2px rgba(18, 24, 51, .06), 0 10px 28px rgba(18, 24, 51, .07);
  --ombre-forte: 0 2px 4px rgba(4, 26, 77, .12), 0 22px 48px rgba(4, 26, 77, .18);
}

@font-face {
  font-family: "Onest";
  src: url("/polices/cj-titres.woff2") format("woff2");
  font-weight: 500 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Public Sans";
  src: url("/polices/cj-texte.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Public Sans";
  src: url("/polices/cj-texte-italique.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

/* :: Base :: */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 20px; }
body {
  margin: 0;
  background: var(--blanc);
  color: var(--encre);
  font-family: var(--police-texte);
  font-size: 1.0625rem;
  line-height: 1.68;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--fleur); text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:hover { color: var(--fleur-vif); }
:focus-visible { outline: 3px solid var(--lilas); outline-offset: 2px; border-radius: 4px; }
h1, h2, h3, h4 { font-family: var(--police-titre); line-height: 1.2; color: var(--encre); margin: 0 0 .6em; letter-spacing: -.01em; }
h2 { font-size: clamp(1.45rem, 1.1rem + 1.2vw, 1.95rem); font-weight: 750; }
h3 { font-size: clamp(1.15rem, 1rem + .5vw, 1.35rem); font-weight: 700; margin-top: 1.6em; }
p { margin: 0 0 1em; }
ul, ol { padding-left: 1.2em; margin: 0 0 1.1em; }
li { margin-bottom: .35em; }
strong { font-weight: 700; }
blockquote { margin: 0; }
table { border-collapse: collapse; width: 100%; }
.cache-visuel { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.cadre { width: 100%; max-width: var(--largeur); margin-inline: auto; padding-inline: 18px; }
.picto { width: 22px; height: 22px; flex: none; }

/* :: Boutons :: */

.bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 48px; padding: .7rem 1.35rem; border-radius: 999px;
  background: var(--fleur); color: var(--blanc); font-family: var(--police-titre);
  font-weight: 700; font-size: 1rem; text-decoration: none; border: 0; cursor: pointer;
  box-shadow: 0 6px 16px rgba(11, 63, 168, .28);
  transition: background .15s ease, transform .15s ease;
}
.bouton:hover { background: var(--fleur-vif); color: var(--blanc); transform: translateY(-1px); }
.bouton img { width: 20px; height: 20px; }
.bouton-contour { background: var(--blanc); color: var(--fleur); box-shadow: inset 0 0 0 2px var(--fleur); }
.bouton-contour:hover { background: var(--fleur-lait); color: var(--fleur-nuit); }
.bouton-lune { background: var(--blanc); color: var(--fleur-abysse); box-shadow: 0 6px 18px rgba(0, 0, 0, .25); }
.bouton-lune:hover { background: var(--prune-lait); color: var(--fleur-abysse); }

/* :: Enseigne (en-tete) :: */

/* l'entete est injectee par site.js : on reserve sa hauteur exacte pour qu'elle
   ne pousse pas <main> vers le bas au premier rendu (decalage cumulatif) */
#zone-entete { min-height: 126px; }
@media (min-width: 900px) and (max-width: 1239.98px) { #zone-entete { min-height: 140px; } }

.enseigne { background: var(--blanc); border-bottom: 1px solid var(--trait); position: relative; z-index: 30; }
.enseigne-rangee { display: flex; align-items: center; gap: 10px; min-height: 68px; }
.enseigne-marque { display: inline-flex; align-items: center; gap: 9px; min-width: 0; text-decoration: none; color: var(--encre); margin-right: auto; }
.enseigne-marque img { width: auto; height: 34px; max-width: 100%; }

.enseigne-nav { display: flex; align-items: center; gap: 8px; min-width: 0; }
.enseigne-nav [aria-controls="panneauGuides"], .enseigne-long { display: none; }
.enseigne-bouton {
  display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 10px;
  border: 0; border-radius: 10px; background: transparent; cursor: pointer; white-space: nowrap;
  font: 600 .94rem var(--police-titre); color: var(--encre-douce);
}
.enseigne-bouton:hover, .enseigne-bouton[aria-expanded="true"] { background: var(--fleur-lait); color: var(--fleur); }
.enseigne-bouton .chevron { width: 14px; height: 14px; opacity: .6; transition: transform .2s ease; }
.enseigne-bouton[aria-expanded="true"] .chevron { transform: rotate(180deg); opacity: 1; }
.age-pastille {
  display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
  border: 2px solid var(--prune); color: var(--prune); font: 800 .82rem var(--police-titre); flex: none;
  text-decoration: none; transition: background .15s ease, color .15s ease;
}
.age-pastille:hover, .age-pastille:focus-visible { background: var(--prune); color: var(--blanc); }
.enseigne-menu {
  display: inline-grid; place-items: center; width: 46px; height: 46px; border-radius: 12px;
  border: 1px solid var(--trait); background: var(--blanc); cursor: pointer;
}
.enseigne-menu img { width: 26px; height: 26px; }
.enseigne-panneau { border-top: 1px solid var(--trait); background: var(--neige); padding-block: 22px 26px; box-shadow: 0 18px 30px rgba(18, 24, 51, .10); }
.enseigne-panneau[hidden] { display: none; }
.panneau-tete { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 16px; margin-bottom: 14px; }
.panneau-tete p { margin: 0; font-family: var(--police-titre); font-weight: 700; font-size: 1.1rem; }
.panneau-tete span { color: var(--encre-pale); font-size: .92rem; }
.panneau-grille { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); }
.panneau-grille li { margin: 0; }
.panneau-carte {
  display: grid; grid-template-columns: 92px 1fr; align-items: center; gap: 10px;
  padding: 10px; border-radius: 12px; background: var(--blanc); border: 1px solid var(--trait);
  text-decoration: none; color: var(--encre); min-height: 64px;
}
.panneau-carte:hover { border-color: var(--fleur); box-shadow: var(--ombre); color: var(--encre); }
.panneau-carte .plaque { width: 92px; height: 40px; padding: 5px 8px; border-radius: 8px; }
.panneau-nom { display: block; font-weight: 700; font-size: .95rem; line-height: 1.25; }
.panneau-note { display: block; font-size: .85rem; color: var(--encre-pale); }
.panneau-note b { color: var(--prune); }

.panneau-colonnes { display: grid; gap: 18px; }
.panneau-colonne h3 { margin: 0 0 8px; padding-bottom: 7px; border-bottom: 1px solid var(--trait); font: 700 .95rem var(--police-titre); color: var(--encre); }
.panneau-colonne ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.panneau-lien { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 9px; align-items: center; padding: 7px 8px; border-radius: 9px; font-size: .92rem; color: var(--encre-douce); text-decoration: none; }
.panneau-colonne-mince .panneau-lien { grid-template-columns: minmax(0, 1fr); }
.panneau-lien img { width: 28px; height: 28px; }
.panneau-lien:hover { background: var(--fleur-lait); color: var(--fleur); }
.panneau-lien[aria-current="page"] { background: var(--fleur-lait); color: var(--fleur); font-weight: 600; }

.etalage { border-top: 1px solid var(--givre); background: var(--blanc); }
.etalage-liste {
  list-style: none; margin: 0 -18px; padding: 6px 18px; display: flex; gap: 4px;
  overflow-x: auto; scroll-snap-type: x proximity; scroll-padding-inline: 18px; scrollbar-width: none;
}
.etalage-liste::-webkit-scrollbar { display: none; }
.etalage.deborde .etalage-liste { -webkit-mask-image: linear-gradient(to right, transparent, #000 14%, #000 82%, transparent); mask-image: linear-gradient(to right, transparent, #000 14%, #000 82%, transparent); }
.etalage.deborde.au-debut .etalage-liste { -webkit-mask-image: linear-gradient(to right, #000 82%, transparent); mask-image: linear-gradient(to right, #000 82%, transparent); }
.etalage.deborde.au-bout .etalage-liste { -webkit-mask-image: linear-gradient(to right, transparent, #000 18%); mask-image: linear-gradient(to right, transparent, #000 18%); }
.etalage-liste li { margin: 0; flex: none; scroll-snap-align: start; }
.etalage-lien {
  display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 4px 12px 4px 6px; border-radius: 12px;
  text-decoration: none; color: var(--encre); font: 600 .93rem var(--police-titre); white-space: nowrap;
}
.etalage-lien img { width: 32px; height: 32px; flex: none; }
.etalage-lien:hover { background: var(--neige); color: var(--fleur); }
.etalage-lien[aria-current="page"] { background: var(--fleur-lait); color: var(--fleur); }

/* :: Plaques (logos) :: */

.plaque { display: grid; place-items: center; background: var(--plaque-fond, var(--blanc)); border: 1px solid var(--plaque-bord, var(--trait)); }
.plaque img { max-height: 100%; width: auto; object-fit: contain; }
.plaque[data-fond="charbon"] { --plaque-fond: #17191A; --plaque-bord: #17191A; }
.plaque[data-fond="nuit"] { --plaque-fond: #0C121E; --plaque-bord: #0C121E; }
.plaque[data-fond="abysse"] { --plaque-fond: #0A0C15; --plaque-bord: #0A0C15; }
.plaque[data-fond="lagune"] { --plaque-fond: #03121A; --plaque-bord: #03121A; }
.plaque[data-fond="ardoise"] { --plaque-fond: #172B39; --plaque-bord: #172B39; }
.plaque[data-fond="encre"] { --plaque-fond: #1B1E2A; --plaque-bord: #1B1E2A; }
.plaque[data-fond="prune"] { --plaque-fond: #131013; --plaque-bord: #131013; }
.plaque[data-fond="minuit"] { --plaque-fond: #0B1926; --plaque-bord: #0B1926; }
.plaque[data-fond="orage"] { --plaque-fond: #161A28; --plaque-bord: #161A28; }
.plaque[data-fond="graphite"] { --plaque-fond: #1A1A1A; --plaque-bord: #1A1A1A; }

/* :: Bandeau (hero) :: */

.bandeau {
  position: relative; overflow: hidden; padding-block: 34px 30px;
  background:
    radial-gradient(60% 55% at 50% 0%, rgba(107, 47, 185, .09), transparent 70%),
    radial-gradient(circle at 1px 1px, #DDE2F6 1.1px, transparent 1.6px) 0 0 / 22px 22px,
    var(--blanc);
  border-bottom: 1px solid var(--trait);
}
.bandeau-titre { font-size: clamp(1.85rem, 1.2rem + 2.6vw, 3.05rem); font-weight: 800; text-align: center; max-width: 900px; margin: 0 auto .45em; letter-spacing: -.025em; }
.bandeau-chapeau { max-width: 760px; margin: 0 auto 1.1em; text-align: center; font-size: 1.12rem; color: var(--encre-douce); }
.auteur-ligne { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px 16px; margin: 0 auto 26px; font-size: .93rem; color: var(--encre-pale); }
.auteur-ligne img { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; border: 2px solid var(--blanc); box-shadow: 0 0 0 1px var(--trait); }
.auteur-ligne a { font-weight: 600; }
.auteur-ligne .point { display: inline-flex; align-items: center; gap: 6px; }
.auteur-ligne .point img { width: 18px; height: 18px; border: 0; box-shadow: none; border-radius: 0; }

/* :: Compteur (score display) :: */

.compteur {
  position: relative; color: var(--blanc); border-radius: 24px; padding: 22px;
  background:
    radial-gradient(90% 120% at 100% 0%, rgba(107, 47, 185, .55), transparent 55%),
    linear-gradient(150deg, var(--fleur-nuit), var(--fleur-abysse) 70%);
  /* fond plein sous les degrades : sinon le calcul de contraste retombe sur le blanc du parent */
  background-color: var(--fleur-abysse);
  box-shadow: var(--ombre-forte);
  display: grid; gap: 22px;
}
.compteur::before {
  content: ""; position: absolute; inset: 8px; border-radius: 18px; pointer-events: none;
  border: 1px solid rgba(184, 155, 240, .28);
}
.compteur-casino { display: grid; gap: 14px; justify-items: center; text-align: center; position: relative; }
.compteur-casino .plaque { width: 200px; height: 74px; padding: 12px 18px; border-radius: 14px; border: 0; }
.compteur-casino p { margin: 0; color: #D8DEF6; font-size: .95rem; }
.compteur-casino .bouton { width: 100%; max-width: 300px; }
.guichet-petit { font-size: .8rem !important; color: #B9C3E6 !important; }
.guichet-petit a { color: var(--blanc); }
.compteur-note { display: grid; justify-items: center; align-content: center; gap: 10px; position: relative; }
.compteur-etiquette { font: 700 .78rem var(--police-titre); text-transform: uppercase; letter-spacing: .14em; color: var(--lilas-clair); margin: 0; }
.chiffres { display: flex; align-items: flex-end; gap: 6px; margin: 0; }
.chiffre {
  position: relative; display: grid; place-items: center; width: 64px; height: 88px; border-radius: 12px;
  background: linear-gradient(180deg, #FFFFFF 0%, #F3EFFD 49%, #E4DCFA 51%, #FFFFFF 100%);
  color: var(--fleur-abysse); font: 800 3.4rem/1 var(--police-titre);
  box-shadow: inset 0 -4px 0 rgba(69, 25, 127, .18), 0 0 0 2px rgba(184, 155, 240, .55), 0 8px 18px rgba(0, 0, 0, .3);
}
.chiffre::after { content: ""; position: absolute; left: 6px; right: 6px; top: 50%; height: 1px; background: rgba(69, 25, 127, .22); }
.chiffre-virgule { font: 800 3rem/1 var(--police-titre); color: var(--lilas-clair); padding-bottom: 6px; }
.chiffres-sur { font: 600 1.05rem var(--police-titre); color: #D8DEF6; padding-bottom: 10px; margin-left: 4px; }
.compteur-mot { margin: 0; font: 700 1.05rem var(--police-titre); color: var(--blanc); }
.compteur-jauges { list-style: none; padding: 0; margin: 0; display: grid; gap: 11px; align-content: center; position: relative; }
.compteur-jauges li { margin: 0; display: grid; grid-template-columns: 26px 1fr auto; grid-template-rows: auto 7px; column-gap: 10px; row-gap: 5px; align-items: center; }
.compteur-jauges img { width: 26px; height: 26px; grid-row: 1 / 3; }
.compteur-jauges span { font-size: .9rem; color: #E3E7F8; }
.compteur-jauges b { font: 700 .95rem var(--police-titre); }
.jauge { grid-column: 2 / 4; height: 7px; border-radius: 99px; background: rgba(255, 255, 255, .14); overflow: hidden; }
.jauge i { display: block; height: 100%; width: var(--niveau, 50%); border-radius: inherit; background: linear-gradient(90deg, var(--lilas), #FFFFFF); }

/* :: Fiche (payments + key facts, under the score) :: */

.fiche {
  margin-top: 22px; border-radius: 20px; overflow: hidden;
  background: var(--blanc); border: 1px solid var(--trait); box-shadow: var(--ombre);
  display: grid;
}
.fiche-bloc { padding: 20px 18px; min-width: 0; }
.fiche-paiements { background: linear-gradient(180deg, var(--givre), var(--neige)); border-bottom: 1px solid var(--trait); }
.fiche-titre {
  display: flex; align-items: center; gap: 8px; margin: 0 0 14px;
  font: 700 .78rem var(--police-titre); letter-spacing: .12em; text-transform: uppercase; color: var(--prune);
}
.fiche-titre img { width: 24px; height: 24px; }
.fiche-logos { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: 8px; }
.fiche-logos li { margin: 0; }
.fiche-logos img { display: block; width: 100%; aspect-ratio: 8 / 3; object-fit: contain; background: var(--blanc); border: 1px solid var(--trait); border-radius: 8px; }
.fiche-note { margin: 14px 0 0; font-size: .9rem; color: var(--encre-douce); }
.fiche-note a { font-weight: 600; white-space: nowrap; }
.fiche-faits { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; }
.fiche-fait { padding: 10px 0 11px; border-bottom: 1px dashed var(--trait); min-width: 0; }
.fiche-fait dt {
  display: flex; align-items: center; gap: 7px; margin-bottom: 3px;
  font: 700 .7rem var(--police-titre); letter-spacing: .06em; text-transform: uppercase; color: var(--encre-pale);
}
.fiche-fait dt img { width: 20px; height: 20px; }
.fiche-fait dd { margin: 0; font: 600 .93rem/1.35 var(--police-titre); color: var(--encre); overflow-wrap: break-word; }
.fiche-fait dd small { display: block; font: 400 .82rem/1.35 var(--police-texte); color: var(--encre-pale); }
.fiche-fait.alerte dd { color: var(--prune-nuit); }

/* :: Plan (article + echelle) :: */

.plan { display: grid; gap: 28px; padding-block: 26px 60px; }
.corps { min-width: 0; }
.echelle-boite { order: -1; border: 1px solid var(--trait); border-radius: var(--rayon); background: var(--neige); }
.echelle-boite > summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: 10px;
  padding: 14px 16px; font: 700 1rem var(--police-titre);
}
.echelle-boite > summary::-webkit-details-marker { display: none; }
.echelle-boite > summary img { width: 24px; height: 24px; }
.echelle-boite > summary .chevron { width: 18px; height: 18px; margin-left: auto; transition: transform .2s ease; }
.echelle-boite[open] > summary .chevron { transform: rotate(180deg); }
.echelle { position: relative; padding: 4px 16px 16px; }
.echelle ol { list-style: none; margin: 0; padding: 0 0 0 4px; position: relative; counter-reset: barreau; }
.echelle ol::before { content: ""; position: absolute; left: 15px; top: 10px; bottom: 10px; width: 3px; border-radius: 3px; background: var(--trait); }
.echelle ol::after { content: ""; position: absolute; left: 15px; top: 10px; width: 3px; height: var(--avance, 0px); max-height: calc(100% - 20px); border-radius: 3px; background: linear-gradient(180deg, var(--fleur), var(--prune)); transition: height .25s ease; }
.barreau { margin: 0; position: relative; counter-increment: barreau; }
.barreau a {
  display: grid; grid-template-columns: 26px 1fr; align-items: center; gap: 10px;
  padding: 6px 6px 6px 0; text-decoration: none; color: var(--encre-douce); font-size: .93rem; line-height: 1.3; border-radius: 8px;
}
.barreau a::before {
  content: counter(barreau); position: relative; z-index: 1; display: grid; place-items: center;
  width: 26px; height: 26px; border-radius: 50%; background: var(--blanc); border: 2px solid var(--trait-fort);
  font: 700 .72rem var(--police-titre); color: var(--encre-pale);
}
.barreau a:hover { color: var(--fleur); }
.barreau.actif a { color: var(--encre); font-weight: 700; }
.barreau.actif a::before, .barreau.franchi a::before { background: var(--prune); border-color: var(--prune); color: var(--blanc); }
.echelle-guichet { margin-top: 14px; padding: 14px; border-radius: 14px; background: var(--blanc); border: 1px solid var(--trait); display: grid; gap: 10px; justify-items: center; text-align: center; }
.echelle-guichet .plaque { width: 150px; height: 54px; padding: 8px 12px; border-radius: 10px; }
.echelle-guichet p { margin: 0; font-size: .9rem; color: var(--encre-douce); }
.echelle-guichet .bouton { width: 100%; }
.guichet-fin { max-width: 440px; margin-inline: auto; }

/* :: Volets (sections) :: */

.volet { padding-top: 12px; margin-bottom: 46px; }
.volet-tete { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.volet-tete img { width: 44px; height: 44px; }
.volet-tete h2 { margin: 0; }
.corps > .volet > p, .corps > .volet > ul, .corps > .volet > ol, .corps > .volet > h3 { max-width: var(--mesure); }
.chapeau-volet { font-size: 1.1rem; color: var(--encre-douce); }
.mise-a-jour { font-size: .88rem; color: var(--encre-pale); }

/* pour / contre */
.pour-contre { display: grid; gap: 14px; margin: 18px 0 20px; }
.pour-contre > div { border: 1px solid var(--trait); border-radius: var(--rayon); padding: 16px 18px; background: var(--blanc); }
.pour-contre .pour { background: linear-gradient(180deg, var(--fleur-lait), var(--blanc) 60%); }
.pour-contre .contre { background: linear-gradient(180deg, var(--prune-lait), var(--blanc) 60%); }
.pour-contre h3 { margin: 0 0 10px; font-size: 1.1rem; display: flex; align-items: center; gap: 8px; }
.pour-contre h3 img { width: 26px; height: 26px; }
.pour-contre ul { list-style: none; padding: 0; margin: 0; }
.pour-contre li { position: relative; padding-left: 28px; margin-bottom: .55em; }
.pour-contre li::before { content: ""; position: absolute; left: 0; top: .28em; width: 18px; height: 18px; background: var(--puce) center / contain no-repeat; }
.pour-contre .pour li { --puce: url("/pictos/coche.svg"); }
.pour-contre .contre li { --puce: url("/pictos/moins.svg"); }

/* encarts */
.encart {
  display: grid; grid-template-columns: 34px 1fr; gap: 12px; align-items: start;
  margin: 18px 0 22px; padding: 16px 18px; border-radius: var(--rayon);
  background: var(--fleur-lait); border: 1px solid #CFDAF7; max-width: var(--mesure);
}
.encart img { width: 34px; height: 34px; }
.encart p:last-child, .encart ul:last-child { margin-bottom: 0; }
.encart-alerte { background: var(--prune-lait); border-color: #DFD0F6; }
.encart-titre { font: 700 1.02rem var(--police-titre); margin: 2px 0 6px; }
.divulgation { font-size: .9rem; color: var(--encre-pale); border-top: 1px dashed var(--trait-fort); padding-top: 12px; max-width: var(--mesure); }

/* sceau (licence) */
.sceau { display: grid; gap: 16px; margin: 18px 0 24px; padding: 18px; border-radius: var(--rayon); border: 1px solid var(--trait); background: var(--neige); }
.sceau blockquote { margin: 0; padding: 0 0 0 16px; border-left: 3px solid var(--prune); font-size: 1rem; color: var(--encre-douce); }
.sceau blockquote p:last-child { margin-bottom: 0; }
.sceau cite { display: block; margin-top: 8px; font-style: normal; font-size: .86rem; color: var(--encre-pale); }
.sceau figure { margin: 0; }
.sceau figure img { border-radius: 10px; border: 1px solid var(--trait); background: var(--blanc); }
.sceau figcaption, .album figcaption, .preuve figcaption { font-size: .86rem; color: var(--encre-pale); margin-top: 7px; line-height: 1.45; }

/* releves (tables) */
.releve-defile { overflow-x: auto; margin: 16px 0 24px; border: 1px solid var(--trait); border-radius: var(--rayon); background: var(--blanc); }
.releve { font-size: .95rem; min-width: 560px; }
.releve.releve-etroit { min-width: 0; }
.releve.releve-ample { min-width: 780px; }
.releve.releve-serre th, .releve.releve-serre td { padding-inline: 8px; }
.releve caption { text-align: left; padding: 12px 16px; font: 700 1rem var(--police-titre); caption-side: top; border-bottom: 1px solid var(--trait); }
.releve th, .releve td { padding: 10px 14px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--givre); }
.releve thead th { background: var(--neige); font: 700 .85rem var(--police-titre); color: var(--encre-douce); text-transform: uppercase; letter-spacing: .05em; }
.releve tbody tr:last-child td, .releve tbody tr:last-child th { border-bottom: 0; }
.releve tbody th { font-weight: 700; }
.releve .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.releve .reseau { white-space: nowrap; }
.releve .vedette { background: var(--prune-lait); }

/* preuve (single figure in text) */
.preuve { margin: 18px 0 26px; max-width: var(--mesure); }
.preuve img { margin-inline: auto; border-radius: 12px; border: 1px solid var(--trait); box-shadow: var(--ombre); cursor: zoom-in; }
.preuve-etroite { max-width: 330px; margin-inline: auto; }
.preuve-large { max-width: none; }

/* caisse (payment tiles) */
.caisse { list-style: none; padding: 0; margin: 16px 0 22px; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.caisse li { margin: 0; flex: 0 1 152px; }
.caisse img { width: 100%; aspect-ratio: 8 / 3; object-fit: contain; background: var(--blanc); border: 1px solid var(--trait); border-radius: 10px; }

/* cagnottes (jackpot data) */
.cagnottes { display: grid; gap: 12px; margin: 18px 0 24px; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.cagnotte { border: 1px solid var(--trait); border-radius: var(--rayon); padding: 16px; background: var(--blanc); display: grid; gap: 6px; align-content: start; }
.cagnotte img { width: 40px; height: 40px; }
.cagnotte strong { font: 800 1.7rem/1.1 var(--police-titre); color: var(--prune); }
.cagnotte span { font-weight: 700; }
.cagnotte p { margin: 0; font-size: .92rem; color: var(--encre-pale); }
.barres { list-style: none; padding: 0; margin: 14px 0 22px; max-width: var(--mesure); display: grid; gap: 8px; }
.barres li { margin: 0; display: grid; grid-template-columns: minmax(96px, 150px) 1fr 44px; gap: 10px; align-items: center; font-size: .93rem; }
.barres .barre { height: 12px; border-radius: 99px; background: var(--givre); overflow: hidden; }
.barres .barre i { display: block; height: 100%; width: var(--part); border-radius: inherit; background: linear-gradient(90deg, var(--fleur), var(--prune)); }
.barres b { text-align: right; font-variant-numeric: tabular-nums; }

/* calcul (worked maths) */
.calcul { margin: 18px 0 24px; max-width: var(--mesure); border-radius: var(--rayon); border: 1px solid var(--trait); overflow: hidden; }
.calcul-tete { display: flex; align-items: center; gap: 10px; padding: 12px 16px; background: var(--fleur-nuit); color: var(--blanc); font: 700 1rem var(--police-titre); }
.calcul-tete img { width: 28px; height: 28px; }
.calcul dl { margin: 0; padding: 6px 16px 10px; display: grid; grid-template-columns: minmax(0, 1fr); }
.calcul dt, .calcul dd { margin: 0; padding: 9px 0; border-bottom: 1px solid var(--givre); }
.calcul dt { padding-bottom: 0; border-bottom: 0; }
.calcul dd { padding-top: 2px; font-weight: 700; font-variant-numeric: tabular-nums; }
.calcul dd:last-of-type { border-bottom: 0; }
.calcul p { margin: 0; padding: 12px 16px; background: var(--prune-lait); font-size: .95rem; }

/* etapes */
.etapes { list-style: none; padding: 0; margin: 16px 0 24px; max-width: var(--mesure); counter-reset: etape; }
.etapes li { position: relative; padding: 0 0 14px 50px; margin: 0; counter-increment: etape; }
.etapes li::before {
  content: counter(etape); position: absolute; left: 0; top: 0; width: 34px; height: 34px; border-radius: 10px;
  display: grid; place-items: center; background: var(--fleur-lait); color: var(--fleur); font: 800 .95rem var(--police-titre);
  box-shadow: 3px 3px 0 var(--lilas-clair);
}
.etapes strong { display: block; }

/* album */
.album { display: grid; gap: 18px; margin: 18px 0 26px; }
.album figure { margin: 0; }
.album img { border-radius: 12px; border: 1px solid var(--trait); box-shadow: var(--ombre); cursor: zoom-in; background: var(--neige); }
.album-duo { display: grid; gap: 18px; align-items: start; }
.album-paire { display: grid; gap: 18px; align-items: start; }
.album-telephones { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: start; }
.album-mobile img { max-width: min(300px, 100%); margin-inline: auto; }
.album-mobile figcaption { text-align: center; }
.studios { columns: 2; column-gap: 24px; max-width: var(--mesure); }
.studios li { break-inside: avoid; }

/* jugement (verdict) */
.jugement { display: grid; gap: 18px; margin: 16px 0 24px; padding: 20px; border-radius: 20px; border: 1px solid var(--trait); background: linear-gradient(160deg, var(--neige), var(--blanc)); }
.jugement-note { display: grid; justify-items: center; align-content: center; gap: 6px; text-align: center; }
.jugement-note .chiffres .chiffre { width: 52px; height: 72px; font-size: 2.7rem; }
.jugement-note .chiffre-virgule { color: var(--prune); font-size: 2.4rem; }
.jugement-note .chiffres-sur { color: var(--encre-pale); }
.jugement-note p { margin: 0; font: 700 1rem var(--police-titre); }
.jugement ul.detail { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.jugement ul.detail li { margin: 0; display: grid; grid-template-columns: 26px 1fr auto; grid-template-rows: auto 8px; column-gap: 10px; row-gap: 4px; align-items: center; font-size: .95rem; }
.jugement ul.detail img { width: 26px; height: 26px; grid-row: 1 / 3; }
.jugement ul.detail .jauge { background: var(--givre); }
.jugement ul.detail .jauge i { background: linear-gradient(90deg, var(--fleur), var(--prune)); }
.jugement ul.detail small { color: var(--encre-pale); font-weight: 400; }

/* comparaison (avis) */
.ecarts { margin: 16px 0 22px; padding: 16px 18px 18px; border: 1px solid var(--trait); border-radius: var(--rayon); background: var(--neige); max-width: var(--mesure); }
.ecarts ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px 30px; }
.ecarts li { margin: 0; min-width: 0; }
.ecarts-legende { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0 0 14px; font-size: .86rem; color: var(--encre-pale); }
.ecarts-legende span { display: inline-flex; align-items: center; gap: 8px; }
.cle-barre { display: inline-block; width: 24px; height: 8px; border-radius: 99px; background: linear-gradient(90deg, var(--fleur), var(--prune)); }
.cle-moyenne { display: inline-block; width: 3px; height: 16px; border-radius: 2px; background: var(--encre); }
.ecart-tete { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin: 0 0 7px; font-weight: 600; font-size: .95rem; }
.ecart-tete small { color: var(--encre-pale); font-weight: 400; }
.ecart-tete b { font: 800 1.05rem var(--police-titre); color: var(--prune); }
.ecart-piste { position: relative; display: block; height: 8px; border-radius: 99px; background: var(--givre); }
.ecart-barre { position: absolute; top: 0; bottom: 0; left: 0; width: var(--niveau); border-radius: inherit; background: linear-gradient(90deg, var(--fleur), var(--prune)); }
.ecart-moyenne { position: absolute; top: -5px; bottom: -5px; left: var(--niveau); width: 3px; margin-left: -1.5px; border-radius: 2px; background: var(--encre); box-shadow: 0 0 0 2px var(--neige); }
.ecart-note { margin: 7px 0 0; font-size: .85rem; line-height: 1.4; color: var(--encre-pale); }

/* carnet (FAQ) */
.carnet { display: grid; gap: 10px; margin: 16px 0 10px; max-width: var(--mesure); }
.carnet details { border: 1px solid var(--trait); border-radius: 14px; background: var(--blanc); }
.carnet details[open] { border-color: #C9D3F2; box-shadow: var(--ombre); }
.carnet summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 1fr 24px; gap: 12px; align-items: center; padding: 14px 16px; font: 700 1.02rem/1.35 var(--police-titre); }
.carnet summary::-webkit-details-marker { display: none; }
.carnet summary img { width: 24px; height: 24px; transition: transform .2s ease; }
.carnet details[open] summary img { transform: rotate(45deg); }
.carnet .reponse { padding: 0 16px 6px; }

/* signature (author box) */
.signature { display: grid; gap: 16px; margin: 30px 0 10px; padding: 20px; border-radius: 20px; border: 1px solid var(--trait); background: var(--neige); max-width: var(--mesure); }
.signature img { width: 132px; height: 132px; border-radius: 18px; object-fit: cover; box-shadow: 5px 5px 0 var(--lilas-clair); }
.signature h3 { margin: 0 0 2px; }
.signature .role { margin: 0 0 10px; color: var(--prune); font-weight: 600; font-size: .95rem; }
.signature p:last-child { margin-bottom: 0; }

/* aide Quebec (RG) */
.aide-qc { margin: 18px 0 24px; padding: 18px; border-radius: 20px; background: var(--fleur-nuit); color: var(--blanc); display: grid; gap: 14px; max-width: var(--mesure); }
.aide-qc-tete { display: flex; align-items: center; gap: 12px; }
.aide-qc-tete img { width: 44px; height: 44px; }
.aide-qc-tete p { margin: 0; font: 700 1.1rem var(--police-titre); }
.aide-qc ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.aide-qc li { margin: 0; padding: 10px 12px; border-radius: 12px; background: rgba(255, 255, 255, .08); }
.aide-qc li strong { display: block; }
.aide-qc a { color: var(--blanc); }
.aide-qc p { margin: 0; color: #D8DEF6; font-size: .93rem; }

/* comparaison */
.releve .lien-avis { font-weight: 700; }

/* :: Pages argent (affiche, palmares, billets) :: */

.affiche { position: relative; overflow: hidden; padding-block: 22px 28px; text-align: center; background: radial-gradient(circle at 50% 88px, rgba(107, 47, 185, .14), rgba(11, 63, 168, .05) 120px, transparent 250px), var(--blanc); border-bottom: 1px solid var(--trait); }
.affiche::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: repeating-radial-gradient(circle at 50% 88px, transparent 0 38px, rgba(11, 63, 168, .08) 38px 39px);
  -webkit-mask-image: radial-gradient(circle at 50% 88px, #000 0 150px, transparent 430px);
  mask-image: radial-gradient(circle at 50% 88px, #000 0 150px, transparent 430px);
}
.affiche .cadre { position: relative; }
.affiche-objet { width: 124px; height: 124px; margin: 0 auto 8px; filter: drop-shadow(0 14px 18px rgba(11, 63, 168, .26)); }
.affiche-titre { font-size: clamp(1.8rem, 1.2rem + 2.4vw, 2.9rem); font-weight: 800; max-width: 860px; margin: 0 auto .4em; letter-spacing: -.025em; }
.affiche-chapeau { max-width: 720px; margin: 0 auto 1em; font-size: 1.1rem; color: var(--encre-douce); }
.affiche .auteur-ligne { margin-bottom: 18px; }
.affiche-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }

.corps > .volet > .palmares { list-style: none; padding: 0; margin: 16px 0 18px; display: grid; gap: 12px; max-width: none; }
.rang {
  margin: 0; display: grid; gap: 12px 14px; align-items: center; padding: 14px;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  grid-template-areas: "num plaque note" "corps corps corps" "actions actions actions";
  border: 1px solid var(--trait); border-radius: 18px; background: var(--blanc); box-shadow: var(--ombre);
}
.rang:first-child { border-color: #CDBBF1; background: linear-gradient(180deg, var(--prune-lait), var(--blanc) 60%); }
.rang-numero {
  grid-area: num; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px;
  background: var(--fleur-lait); color: var(--fleur); font: 800 1.1rem var(--police-titre); box-shadow: 3px 3px 0 var(--lilas-clair);
}
.rang:nth-child(-n+3) .rang-numero, .billet-medaille .rang-numero { background: var(--prune); color: var(--blanc); }
.rang .plaque { grid-area: plaque; justify-self: start; width: 132px; height: 50px; padding: 7px 10px; border-radius: 10px; }
.rang-note { grid-area: note; margin: 0; text-align: right; line-height: 1; white-space: nowrap; }
.rang-note b { font: 800 1.65rem var(--police-titre); color: var(--prune); }
.rang-note span { font: 600 .85rem var(--police-titre); color: var(--encre-pale); }
.rang-note small { display: block; margin-top: 5px; font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: var(--encre-pale); }
.rang-corps { grid-area: corps; min-width: 0; }
.rang-nom { margin: 0 0 8px; font: 700 1.1rem/1.3 var(--police-titre); }
.rang-nom span { display: block; margin-top: 2px; font: 400 .95rem/1.4 var(--police-texte); color: var(--encre-douce); }
.rang-faits { list-style: none; padding: 0; margin: 0 0 8px; display: flex; flex-wrap: wrap; gap: 6px; }
.rang-faits li { margin: 0; padding: 4px 10px; border-radius: 8px; background: var(--neige); border: 1px solid var(--givre); font-size: .86rem; line-height: 1.35; color: var(--encre-douce); }
.rang-faits b { color: var(--encre); font-family: var(--police-titre); }
.rang-bonus { margin: 0; display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 8px; font-size: .9rem; line-height: 1.45; color: var(--encre-douce); }
.rang-bonus img { width: 20px; height: 20px; margin-top: 1px; }
.rang-actions { grid-area: actions; display: grid; gap: 6px; text-align: center; }
.rang-liens { margin: 0; font-size: .86rem; }
.rang-liens small { display: block; color: var(--encre-pale); }
.classement-note { font-size: .9rem; color: var(--encre-pale); max-width: var(--mesure); }

.tirage { width: min(640px, calc(100vw - 24px)); max-height: calc(100vh - 32px); padding: 0; border: 0; border-radius: 22px; background: var(--blanc); color: var(--encre); box-shadow: var(--ombre-forte); }
.tirage::backdrop { background: rgba(4, 26, 77, .62); }
.tirage-tete { position: sticky; top: 0; z-index: 1; display: grid; grid-template-columns: 56px minmax(0, 1fr) 44px; gap: 12px; align-items: center; padding: 14px 16px; background: linear-gradient(180deg, var(--prune-lait), var(--blanc)); border-bottom: 1px solid var(--trait); }
.tirage-tete img { width: 56px; height: 56px; }
.tirage-tete p { margin: 0; font: 700 1.1rem/1.3 var(--police-titre); }
.tirage-tete button { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--trait); background: var(--blanc); cursor: pointer; display: grid; place-items: center; }
.tirage-tete button img { width: 22px; height: 22px; }
.tirage-liste { list-style: none; margin: 0; padding: 8px 16px; }
.tirage-liste li { margin: 0; padding: 10px 0; border-bottom: 1px solid var(--givre); display: grid; grid-template-columns: 26px 92px minmax(0, 1fr); gap: 6px 10px; align-items: center; }
.tirage-liste li:last-child { border-bottom: 0; }
.tirage-liste .rang-rang { font: 800 1rem var(--police-titre); color: var(--prune); text-align: center; }
.tirage-liste .plaque { width: 92px; height: 38px; padding: 5px 8px; border-radius: 8px; }
.tirage-infos { min-width: 0; font-size: .86rem; line-height: 1.4; color: var(--encre-douce); }
.tirage-infos b { display: block; font: 700 .98rem var(--police-titre); color: var(--encre); }
.tirage-liste .bouton { grid-column: 2 / 4; min-height: 40px; padding-block: .45rem; font-size: .93rem; }
.tirage-pied { margin: 0; padding: 12px 16px 16px; font-size: .84rem; color: var(--encre-pale); border-top: 1px solid var(--trait); background: var(--neige); }

.ecrin { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 14px; align-items: center; margin-bottom: 14px; }
.ecrin img { width: 84px; height: 84px; filter: drop-shadow(0 8px 14px rgba(23, 20, 20, .22)); }
.ecrin h2 { margin: 0; }

.billet { margin: 0 0 30px; padding: 18px; border: 1px solid var(--trait); border-radius: 20px; background: var(--blanc); }
.billet-tete { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 10px 12px; align-items: center; margin-bottom: 12px; }
.billet-tete .rang-numero, .billet-tete .rang-note { grid-area: auto; }
.billet-tete .plaque { grid-row: 1; grid-column: 1 / 4; justify-self: start; width: 150px; height: 56px; padding: 8px 12px; border-radius: 12px; }
.billet-tete h3 { margin: 0; font-size: clamp(1.12rem, 1rem + .45vw, 1.32rem); }
.billet > p, .billet > ul { max-width: var(--mesure); }
.billet .fiche-faits { margin: 6px 0 14px; }
.billet .pour-contre { margin: 14px 0; }
.billet .pour-contre h4 { margin: 0 0 8px; font: 700 1rem var(--police-titre); display: flex; align-items: center; gap: 8px; }
.billet .pour-contre h4 img { width: 22px; height: 22px; }
.billet-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: 12px; }
.billet-actions small { color: var(--encre-pale); font-size: .84rem; }

.criteres { list-style: none; padding: 0; margin: 16px 0 24px; display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.criteres li { margin: 0; display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 12px; align-items: start; }
.criteres img { width: 64px; height: 64px; filter: drop-shadow(0 6px 10px rgba(23, 20, 20, .2)); }
.criteres strong { display: block; font-family: var(--police-titre); margin-bottom: 2px; }
.criteres p { margin: 0; font-size: .93rem; color: var(--encre-douce); }

/* :: Pied (footer) :: */

.pied { background: var(--fleur-abysse); color: #D5DBF2; font-size: .95rem; }
.pied a { color: var(--blanc); }
.pied-aide { border-bottom: 1px solid rgba(255, 255, 255, .12); padding-block: 22px; display: grid; gap: 14px; align-items: center; }
.pied-aide-age { display: inline-grid; place-items: center; width: 58px; height: 58px; border-radius: 50%; border: 3px solid var(--lilas); color: var(--blanc); font: 800 1.1rem var(--police-titre); }
.pied-aide p { margin: 0; }
.pied-aide ul { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px 22px; }
.pied-aide li { margin: 0; }
.pied-guides { border-bottom: 1px solid rgba(255, 255, 255, .12); padding-block: 26px 28px; }
.pied-guides ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.pied-guides li { margin: 0; flex: 1 1 230px; }
.pied-guides a {
  display: grid; grid-template-columns: 40px minmax(0, 1fr); align-items: center; gap: 12px; min-height: 64px;
  padding: 10px 12px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, .14); background: rgba(255, 255, 255, .05);
  text-decoration: none; color: var(--blanc);
}
.pied-guides a:hover { border-color: var(--lilas); background: rgba(255, 255, 255, .09); }
.pied-guides img { width: 40px; height: 40px; }
.pied-guides b { display: block; font: 700 .95rem var(--police-titre); }
.pied-guides small { display: block; font-size: .84rem; color: #B7C0E2; }
.pied-colonnes { display: grid; gap: 26px; padding-block: 30px; }
.pied-marque { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--blanc); }
.pied-marque img { width: 36px; height: 36px; }
.pied-marque span { font: 800 1.2rem var(--police-titre); }
.pied-marque span b { color: var(--lilas); font-weight: 800; }
.pied h2 { color: var(--blanc); font-size: 1rem; margin: 0 0 12px; letter-spacing: .02em; }
.pied ul.liens { list-style: none; padding: 0; margin: 0; columns: 2; column-gap: 20px; }
.pied ul.liens li { margin: 0 0 8px; break-inside: avoid; }
.pied ul.liens a { text-decoration: none; }
.pied ul.liens a:hover { text-decoration: underline; }
.pied-bas { border-top: 1px solid rgba(255, 255, 255, .12); padding-block: 18px 26px; font-size: .86rem; color: #B7C0E2; }
.pied-bas p { margin: 0 0 8px; }
.pied-bas ul.legal { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 6px 18px; }
.pied-bas ul.legal li { margin: 0; }

/* remonter */
.remonter {
  position: fixed; right: 16px; bottom: 16px; z-index: 40; width: 48px; height: 48px; border-radius: 50%;
  display: grid; place-items: center; border: 1px solid var(--trait); background: var(--blanc);
  box-shadow: var(--ombre); cursor: pointer; opacity: 0; transform: translateY(12px); pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
}
.remonter img { width: 24px; height: 24px; }
.remonter.visible { opacity: 1; transform: none; pointer-events: auto; }

/* visionneuse (lightbox) */
.visionneuse { border: 0; padding: 0; background: transparent; max-width: 96vw; max-height: 94vh; overflow: auto; }
.visionneuse::backdrop { background: rgba(4, 26, 77, .82); }
.visionneuse img { max-width: none; width: auto; border-radius: 10px; }
.visionneuse button { position: fixed; top: 14px; right: 14px; width: 46px; height: 46px; border-radius: 50%; border: 0; background: var(--blanc); cursor: pointer; display: grid; place-items: center; }
.visionneuse button img { width: 26px; height: 26px; }

/* :: Tailles moyennes :: */

@media (min-width: 640px) {
  .visionneuse img { max-width: 96vw; max-height: 88vh; }
  .fiche-faits { column-gap: 24px; }
  .fiche-fait dt { letter-spacing: .1em; }
  .fiche-fait dd { margin-left: 27px; }
  .pour-contre { grid-template-columns: 1fr 1fr; }
  .album-duo { grid-template-columns: minmax(0, 2.3fr) minmax(0, 1fr); }
  .album-paire { grid-template-columns: 1fr 1fr; }
  .studios { columns: 3; }
  .signature { grid-template-columns: 132px 1fr; align-items: start; }
  .aide-qc ul { grid-template-columns: 1fr 1fr; }
  .pied-aide { grid-template-columns: auto 1fr; }
  .pied-colonnes { grid-template-columns: 1.2fr 1fr; }
  .pied-guides li { max-width: calc(50% - 5px); }
  .affiche-objet { width: 144px; height: 144px; }
  .tirage-liste li { grid-template-columns: 26px 92px minmax(0, 1fr) auto; }
  .tirage-liste .bouton { grid-column: auto; }
  .ecrin { grid-template-columns: 112px minmax(0, 1fr); gap: 18px; }
  .ecrin img { width: 112px; height: 112px; }
  .billet { padding: 22px 24px; }
  .billet-tete { grid-template-columns: 40px 150px minmax(0, 1fr) auto; }
  .billet-tete .plaque { grid-row: auto; grid-column: auto; }
  .calcul dl { grid-template-columns: minmax(0, 1fr) auto; }
  .ecarts ul { grid-template-columns: 1fr 1fr; }
  .calcul dt { padding-bottom: 9px; border-bottom: 1px solid var(--givre); }
  .calcul dd { padding: 9px 0 9px 12px; text-align: right; }
  .calcul dt:last-of-type { border-bottom: 0; }
}

@media (min-width: 900px) {
  .enseigne-rangee { gap: 14px; }
  .enseigne-marque img { height: 40px; }
  .enseigne-nav { gap: 10px; }
  .enseigne-nav [aria-controls="panneauGuides"] { display: inline-flex; }
  .enseigne-long { display: inline; }
  .enseigne-menu { display: none; }
  .panneau-colonnes { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
  .etalage-liste { justify-content: space-between; gap: 2px; }
  .etalage-lien { flex-direction: column; gap: 2px; padding: 6px 8px 5px; font-size: .84rem; }
  .etalage-lien img { width: 28px; height: 28px; }
  .bandeau { padding-block: 44px 38px; }
  .compteur { grid-template-columns: 1fr 1.05fr 1.2fr; padding: 28px 30px; align-items: center; }
  .compteur-casino { border-right: 1px solid rgba(255, 255, 255, .14); padding-right: 24px; }
  .compteur-note { border-right: 1px solid rgba(255, 255, 255, .14); padding-right: 24px; }
  .fiche { grid-template-columns: minmax(0, 5fr) minmax(0, 8fr); }
  .fiche-bloc { padding: 24px 26px; }
  .fiche-paiements { border-bottom: 0; border-right: 1px solid var(--trait); }
  .sceau { grid-template-columns: 1.1fr 1fr; align-items: start; }
  .sceau-empile { grid-template-columns: 1fr; }
  .jugement { grid-template-columns: 220px 1fr; align-items: center; padding: 26px; }
  .pied-colonnes { grid-template-columns: 1.3fr 1fr 1fr; }
  .pied-guides li { max-width: calc(25% - 7.5px); }
  .affiche { padding-block: 18px 26px; }
  .affiche-titre { margin-bottom: .3em; }
  .affiche .auteur-ligne { margin-bottom: 14px; }
  .rang { grid-template-columns: 40px 140px minmax(0, 1fr) 88px 176px; grid-template-areas: "num plaque corps note actions"; padding: 16px 18px; }
  .rang .plaque { width: 140px; height: 52px; }
  .rang-actions { align-self: center; }
}

@media (min-width: 1080px) {
  .plan { grid-template-columns: minmax(0, 1fr) 290px; gap: 44px; align-items: start; }
  .echelle-boite { order: 0; position: sticky; top: 18px; background: transparent; border: 0; max-height: calc(100vh - 36px); overflow-y: auto; }
  .echelle-boite > summary { display: none; }
  .fiche-faits { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .fiche-faits.fiche-quatre { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .echelle { padding: 0; }
}

@media (min-width: 1240px) {
  .etalage-lien { flex-direction: row; gap: 7px; padding: 4px 10px 4px 4px; font-size: .93rem; }
  .etalage-lien img { width: 30px; height: 30px; }
}

@media (max-width: 380px) {
  .chiffre { width: 54px; height: 76px; font-size: 2.8rem; }
  .cadre { padding-inline: 16px; }
  .etalage-liste { margin-inline: -16px; padding-inline: 16px; scroll-padding-inline: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; scroll-behavior: auto !important; }
}

/* :: Accueil - architecture propre a la page d'accueil (parvis) :: */

.parvis { background: linear-gradient(180deg, var(--fleur-lait), var(--blanc) 64%); border-bottom: 1px solid var(--trait); padding-block: 30px 36px; }
.parvis-tete { max-width: var(--largeur); margin: 0 auto 26px; text-align: center; }
.parvis-tete h1 { font: 800 clamp(2.05rem, 4.2vw, 2.9rem)/1.12 var(--police-titre); color: var(--encre); margin: 0 0 14px; letter-spacing: -.015em; text-wrap: balance; }
.parvis-tete p { font-size: clamp(1.02rem, 1.5vw, 1.16rem); line-height: 1.6; color: var(--encre-douce); margin: 0 auto; max-width: none; text-wrap: pretty; }

/* pied de bande : les liens sous une section */
.bande-pied { margin: 20px 0 0; text-align: center; }
.bande-pied a { font-weight: 600; }

/* compteurs : les pots lus depuis le Quebec */
.compteurs { margin: 30px auto 0; border-radius: 22px; padding: 26px 18px 22px; background: linear-gradient(155deg, var(--fleur-nuit), var(--fleur-abysse) 72%); background-color: var(--fleur-abysse); box-shadow: 0 18px 46px rgba(4, 26, 77, .30); }
.compteurs-tete { text-align: center; max-width: 84ch; margin: 0 auto 20px; }
.compteurs-tete h2 { font: 800 clamp(1.14rem, 2.4vw, 1.5rem) var(--police-titre); color: var(--blanc); margin: 0 0 6px; text-wrap: balance; }
.compteurs-tete p { margin: 0; font-size: .93rem; color: #B7C4E7; text-wrap: pretty; }
.compteurs-grille { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.compteurs-tuile { display: grid; gap: 6px; justify-items: center; align-content: start; text-align: center; padding: 22px 14px 17px; border-radius: 16px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(184, 155, 240, .30); }
.compteurs-nom {
  display: grid; place-items: center; width: 100%; max-width: 268px; aspect-ratio: 720 / 236;
  margin-bottom: 2px; padding: 0 9%;
  background: center / 100% 100% no-repeat;
  font: 800 .96rem var(--police-titre); text-transform: uppercase; letter-spacing: .1em; line-height: 1.1;
  text-shadow: 0 2px 5px rgba(0, 0, 0, .55);
}
.compteurs-nom[data-teinte="or"] { background-image: url("/images/enseignes/compteur-plaque-or.webp"); color: #FFE9B8; }
.compteurs-nom[data-teinte="lilas"] { background-image: url("/images/enseignes/compteur-plaque-lilas.webp"); color: #F3E6FF; }
.compteurs-nom[data-teinte="ciel"] { background-image: url("/images/enseignes/compteur-plaque-ciel.webp"); color: #DCEFFF; }
@media (forced-colors: active) {
  .compteurs-nom { color: CanvasText; background-image: none; }
}
.compteurs-pied { margin: 20px 0 0; text-align: center; }
.compteurs-pied a { color: var(--lilas-clair); font-weight: 600; }
.compteurs-somme { font: 800 clamp(2rem, 5.4vw, 3.05rem) var(--police-titre); color: var(--blanc); line-height: 1; font-variant-numeric: tabular-nums; text-shadow: 0 0 24px rgba(184, 155, 240, .52); }
.compteurs-source { font-size: .85rem; color: #9DAFDA; font-variant-numeric: tabular-nums; }
.compteurs-etat { display: inline-flex; align-items: center; gap: 8px; margin-top: 3px; padding: 5px 13px; border-radius: 999px; font-size: .85rem; background: rgba(255, 255, 255, .09); color: #DDE4F8; }
.compteurs-etat::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #58DEA6; flex: none; }
/* chiffres : trois nombres tires des guides */
.bande-chiffres { padding-block: 40px; background: var(--blanc); }
.chiffres-guides { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.chiffres-guides li { display: grid; justify-items: center; text-align: center; align-content: start; gap: 2px; border: 1px solid var(--trait); border-radius: 14px; padding: 16px 14px; background: var(--neige); }
.chiffres-guides img { width: 58px; height: 58px; margin-bottom: 4px; filter: drop-shadow(0 6px 10px rgba(23, 20, 20, .18)); }
.chiffres-guides b { display: block; font: 800 1.8rem var(--police-titre); color: var(--prune); line-height: 1.1; }
.chiffres-guides p { margin: 4px 0 8px; font-size: .93rem; color: var(--encre-douce); }
.chiffres-guides a { font-size: .9rem; font-weight: 600; }

/* denombrement : la bande de chiffres */
.denombrement { background: var(--givre); border-block: 1px solid var(--trait); padding-block: 26px; }
.denombrement ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; text-align: center; }
.denombrement b { display: block; font: 800 1.9rem var(--police-titre); color: var(--fleur-nuit); line-height: 1.1; }
.denombrement span { display: block; font-size: .9rem; color: var(--encre-pale); margin-top: 4px; }
.denombrement li[data-vedette] b { color: var(--prune); }

/* devanture : l'etagere des casinos */
.devanture { padding-block: 40px; }
.bande-tete { max-width: 1100px; margin: 0 auto 26px; text-align: center; }
.bande-tete h2 { font: 800 clamp(1.5rem, 3.2vw, 2.15rem) var(--police-titre); color: var(--encre); margin: 0 0 10px; text-wrap: balance; }
.bande-tete p { margin: 0; color: var(--encre-douce); text-wrap: pretty; }
.devanture-grille { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.devanture-carte { display: grid; gap: 10px; padding: 14px; border: 1px solid var(--trait); border-radius: var(--rayon); background: var(--blanc); box-shadow: var(--ombre); height: 100%; align-content: start; }
.devanture-carte .plaque { width: 128px; height: 48px; padding: 6px 10px; border-radius: 10px; }
.devanture-nom { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.devanture-nom b { font: 700 1.04rem var(--police-titre); color: var(--encre); }
.devanture-note { font: 800 1.02rem var(--police-titre); color: var(--fleur); white-space: nowrap; }
.devanture-carte p { margin: 0; font-size: .92rem; color: var(--encre-douce); }
.devanture-carte a.lire { font-size: .92rem; font-weight: 600; text-decoration: none; }
.devanture-carte a.lire:hover { text-decoration: underline; }

/* gage : ce que nous verifions */
.gage { background: var(--neige); border-block: 1px solid var(--trait); padding-block: 40px; }
.gage-grille { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; }
.gage-grille li { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 14px; align-items: start; }
.gage-grille img { width: 56px; height: 56px; filter: drop-shadow(0 6px 10px rgba(23, 20, 20, .18)); }
.gage-grille b { display: block; font: 700 1rem var(--police-titre); color: var(--encre); margin-bottom: 3px; }
.gage-grille p { margin: 0; font-size: .93rem; color: var(--encre-douce); }

/* rayon : les guides */
.rayon { padding-block: 40px; }
.rayon-grille { display: grid; gap: 22px; }
.rayon-groupe h3 { font: 700 1.04rem var(--police-titre); color: var(--encre); margin: 0 0 10px; padding-bottom: 8px; border-bottom: 1px solid var(--trait); }
.rayon-groupe ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.rayon-groupe a { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 10px; align-items: center; padding: 7px 8px; border-radius: 10px; text-decoration: none; color: var(--encre-douce); }
.rayon-groupe a:hover { background: var(--fleur-lait); color: var(--fleur); }
.rayon-groupe img { width: 34px; height: 34px; }

/* chronique : les dernieres verifications */
.chronique { background: var(--neige); border-top: 1px solid var(--trait); padding-block: 40px; }
.chronique ol { list-style: none; margin: 0 auto; padding: 0; max-width: 1040px; display: grid; gap: 0; }
.chronique li { display: grid; grid-template-columns: 1fr; gap: 4px; padding: 14px 0; border-bottom: 1px solid var(--trait); }
.chronique li:last-child { border-bottom: 0; }
.chronique time { font: 700 .82rem var(--police-titre); color: var(--prune); }
.chronique b { font: 700 1.01rem var(--police-titre); color: var(--encre); }
.chronique p { margin: 0 0 6px; font-size: .93rem; color: var(--encre-douce); }
.chronique .lire { display: inline-block; font-size: .92rem; font-weight: 600; }
.chronique a { font-weight: 600; }

/* mission : ce que fait le site */
.mission { padding-block: 44px; background: var(--blanc); }
.mission-grille { list-style: none; margin: 0; padding: 0; display: grid; gap: 26px; }
.mission-grille li { display: grid; gap: 10px; align-content: start; justify-items: center; text-align: center; }
.mission-grille img { width: 104px; height: 104px; filter: drop-shadow(0 10px 16px rgba(23, 20, 20, .18)); }
.mission-grille b { font: 700 1.1rem var(--police-titre); color: var(--encre); }
.mission-grille p { margin: 0; font-size: .96rem; line-height: 1.62; color: var(--encre-douce); max-width: 38ch; }

/* repertoire : les sept classements */
.repertoire { background: var(--neige); border-block: 1px solid var(--trait); padding-block: 44px; }
.repertoire-grille { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.repertoire-carte { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 14px; align-items: start; padding: 16px; border: 1px solid var(--trait); border-radius: var(--rayon); background: var(--blanc); box-shadow: var(--ombre); height: 100%; text-decoration: none; }
.repertoire-carte:hover { border-color: var(--trait-fort); box-shadow: var(--ombre-forte); }
.repertoire-carte img { width: 64px; height: 64px; filter: drop-shadow(0 6px 10px rgba(23, 20, 20, .18)); }
.repertoire-grille li:first-child .repertoire-carte { background: var(--fleur-lait); border-color: var(--lilas-clair); }
.repertoire-carte b { display: block; font: 700 1.05rem var(--police-titre); color: var(--encre); margin-bottom: 4px; }
.repertoire-carte p { margin: 0 0 6px; font-size: .92rem; color: var(--encre-douce); }
.repertoire-meneur { font-size: .87rem; color: var(--encre-pale); }
.repertoire-meneur b { display: inline; font-size: .87rem; color: var(--fleur); }

/* rappel : trois choses a savoir */
.rappel { padding-block: 40px; background: var(--blanc); }
.rappel-liste { list-style: none; margin: 0; padding: 0; counter-reset: rappel; display: grid; gap: 20px; }
.rappel-liste li { counter-increment: rappel; display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 14px; align-items: start; }
.rappel-liste li::before {
  content: counter(rappel); width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center;
  background: var(--prune-lait); color: var(--prune); font: 800 1.15rem var(--police-titre);
  box-shadow: 3px 3px 0 var(--lilas-clair);
}
.rappel-liste b { display: block; font: 700 1.05rem var(--police-titre); color: var(--encre); margin-bottom: 5px; }
.rappel-liste p { margin: 0 0 6px; font-size: .95rem; color: var(--encre-douce); }
.rappel-liste a { font-size: .92rem; font-weight: 600; }

/* bande d'aide */
.parvis-aide { padding-block: 44px; }
.parvis-aide .aide-qc { margin-inline: auto; }

@media (min-width: 620px) {
  .compteurs { padding: 30px 26px 24px; }
  .compteurs-grille { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .denombrement ul { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .devanture-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gage-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mission-grille { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .repertoire-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .chiffres-guides { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .rayon-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .chronique li { grid-template-columns: 116px minmax(0, 1fr); gap: 14px; align-items: baseline; }
  .chronique time { padding-top: 2px; }
}

@media (min-width: 980px) {
  .parvis { padding-block: 40px 48px; }
  .compteurs { padding: 34px 32px 26px; }
  .denombrement ul { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .devanture-grille { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .gage-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 40px; }
  .gage-grille li { grid-template-columns: 76px minmax(0, 1fr); gap: 18px; }
  .gage-grille img { width: 76px; height: 76px; }
  .gage-grille b { font-size: 1.08rem; margin-bottom: 5px; }
  .gage-grille p { font-size: .96rem; }
  .rayon-grille { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .mission-grille { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px; }
  .repertoire-grille { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .repertoire-grille li:first-child { grid-column: 1 / -1; }
  .repertoire-grille li:first-child .repertoire-carte { grid-template-columns: 104px minmax(0, 1fr); gap: 22px; align-items: center; padding: 20px 24px; }
  .repertoire-grille li:first-child img { width: 104px; height: 104px; }
  .repertoire-grille li:first-child b { font-size: 1.35rem; margin-bottom: 6px; }
  .repertoire-grille li:first-child .repertoire-meneur b { font-size: .95rem; margin-bottom: 0; }
  .repertoire-grille li:first-child p { font-size: 1.02rem; max-width: 74ch; }
  .rappel-liste { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
  .rappel-liste li { grid-template-columns: minmax(0, 1fr); gap: 12px; align-content: start; padding: 22px; border: 1px solid var(--trait); border-radius: var(--rayon); background: var(--neige); }
}

@media (min-width: 1120px) {
  .devanture-grille { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .devanture-carte .plaque { width: 118px; height: 44px; }
}

.parvis-plume { padding-block: 40px; background: var(--neige); border-top: 1px solid var(--trait); }
.parvis-plume .signature { margin-inline: auto; max-width: 820px; }