/* Tirages au sort Le District : page publique et règlement.
   Référence visuelle : design/maquettes/ecrans/*.html. Toutes les valeurs viennent de tokens.css (chargé avant ce fichier). */

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body { min-height: 100vh; overflow-x: hidden; }
img { max-width: 100%; }
p { margin: 0; }
b, strong { font-weight: 700; }
a { color: var(--lien); text-underline-offset: 3px; }
button { font: inherit; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: var(--e-2); top: -60px; z-index: 10; padding: var(--e-3) var(--e-4); background: var(--action); color: var(--sur-action); border-radius: var(--r-champ); font-weight: 600; }
.skip:focus { top: var(--e-2); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.noscript { padding: var(--e-4); }

/* ---------------------------------------------------------------- typographie */
.h { font-family: var(--police-titre); font-weight: 800; text-transform: uppercase; letter-spacing: .01em; line-height: 1.02; margin: 0; }
.k { font-family: var(--police-titre); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; font-size: var(--corps-s); color: var(--lien); margin: 0; }
.m { color: var(--texte-2); }
.d-only { display: none !important; }

/* ---------------------------------------------------------------- composants communs */
.card { background: var(--surface); border: 1px solid var(--trait); border-radius: var(--r-carte); }
.ic { width: 20px; height: 20px; flex: none; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--e-2); width: 100%; min-height: var(--bouton-h); padding: 0 22px; border: 0; border-radius: var(--r-champ); background: var(--action); color: var(--sur-action); font: 600 17px var(--police-corps); text-decoration: none; cursor: pointer; }
.btn:hover { background: var(--action-survol); color: var(--sur-action); }
.btn:disabled, .btn[aria-disabled="true"] { background: var(--desactive-fond); color: var(--desactive-texte); cursor: not-allowed; }
.btn2 { display: inline-flex; align-items: center; justify-content: center; gap: var(--e-2); min-height: 48px; padding: 0 var(--e-4); border: 1.5px solid var(--trait-champ); border-radius: var(--r-champ); background: transparent; color: var(--texte); font: 600 15px var(--police-corps); text-decoration: none; cursor: pointer; }
.btn2.full { width: 100%; }
.linkbtn { display: inline-flex; align-items: center; justify-content: center; min-height: var(--cible-min); padding: 0 var(--e-1); background: none; border: 0; color: var(--lien); font: 600 15px var(--police-corps); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.lab { display: block; font-weight: 600; font-size: 15px; margin-bottom: 6px; }
.opt { font-weight: 400; color: var(--texte-2); font-size: var(--corps-s); }
.inp { display: block; width: 100%; height: var(--champ-h); padding: 0 14px; background: var(--champ); border: 1.5px solid var(--trait-champ); border-radius: var(--r-champ); color: var(--texte); font: 400 var(--corps-m) var(--police-corps); }
.inp::placeholder { color: var(--indice); }
.inp[aria-invalid="true"] { border: 2px solid var(--erreur-champ); }
.cbr { display: flex; gap: var(--e-3); align-items: flex-start; min-height: var(--cible-min); font-size: 15px; }
.cbr label { cursor: pointer; }
.cb { width: 24px; height: 24px; margin: 1px 0 0; accent-color: var(--action); flex: none; cursor: pointer; }
.cb[aria-invalid="true"] { outline: 2px solid var(--erreur-champ); outline-offset: 1px; }
.rd { width: 22px; height: 22px; margin: 0; accent-color: var(--action); flex: none; cursor: pointer; }
.em { display: flex; gap: 6px; align-items: flex-start; color: var(--erreur); font-size: var(--corps-s); line-height: 1.35; margin-top: 6px; }
.em:empty { display: none; }
.ind { padding-left: 36px; }
.alert { display: flex; gap: var(--e-3); padding: 14px; border-radius: 12px; border: 2px solid var(--erreur-bord); background: var(--erreur-fond); color: var(--texte); font-size: 15px; outline: none; }
.alert > .ic { color: var(--erreur); }
.alert b { display: block; color: var(--texte); }
.alert ul { margin: 6px 0 0; padding-left: 18px; line-height: 1.6; }
.alert p.m { color: var(--texte-2); font-size: var(--corps-s); margin-top: var(--e-2); }
.ph { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: var(--e-2); border: 1.5px dashed var(--trait-champ); border-radius: 12px; background: color-mix(in srgb, var(--action) 10%, transparent); color: var(--indice); font-size: 12px; }
.st { display: inline-flex; align-self: flex-start; align-items: center; gap: 6px; padding: 5px 12px 5px 9px; border-radius: var(--r-pilule); border: 1.5px solid; font-weight: 600; font-size: var(--corps-s); line-height: 1.3; }
.st .ic { width: 18px; height: 18px; }
.s-win { color: var(--gagnant); border-color: var(--gagnant-bord); background: var(--gagnant-fond); }
.s-wait { color: var(--attente); border-color: var(--attente-bord); background: var(--attente-fond); }
.s-no { color: var(--non-retenu); border-color: var(--non-retenu-bord); background: var(--non-retenu-fond); }
.s-done { color: var(--remis); border-color: var(--remis-bord); background: var(--remis-fond); }
.s-err { color: var(--erreur); border-color: var(--erreur-bord); background: var(--erreur-fond); }
.hx { width: 40px; height: 46px; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); background: var(--action); color: var(--sur-action); display: flex; align-items: center; justify-content: center; font-family: var(--police-titre); font-weight: 800; font-size: var(--corps-s); letter-spacing: .04em; flex: none; }
.badge-slot { display: block; flex: none; }
.badge-slot img { display: block; }
:focus-visible { outline: var(--focus); outline-offset: 2px; }

/* logo officiel (SVG blanc, fond foncé), à la hauteur des emplacements des maquettes : 40 px, 44 px sur ordinateur */
.logo { display: flex; align-items: center; color: inherit; text-decoration: none; }
.logo-img { display: block; height: 40px; width: auto; }

/* ---------------------------------------------------------------- page */
.page { display: flex; flex-direction: column; min-height: 100vh; }
.bar { border-bottom: 1px solid var(--trait); background: color-mix(in srgb, var(--fond) 90%, transparent); }
.bar-in { display: flex; align-items: center; justify-content: space-between; gap: var(--e-4); padding: var(--e-3) var(--e-4); }
.bar-end { display: flex; align-items: center; gap: var(--e-4); }
.bar-slogan { font-size: var(--corps-xs); display: none; }
main { display: block; outline: none; }
.vue { display: flex; flex-direction: column; gap: 20px; padding: 20px var(--e-4) var(--e-6); }

/* en-tête du tirage */
.intro { display: flex; flex-direction: column; gap: 10px; }
.intro .h { font-size: var(--titre-m); }
.pitch { font-size: var(--corps-m); }

/* compte à rebours (sans animation : simple mise à jour du texte) */
.cd-row { display: flex; align-items: center; justify-content: space-between; gap: var(--e-3); }
.cd-txt { font-size: var(--corps-s); font-weight: 600; line-height: 1.3; }
.cd-txt .m { font-weight: 400; }
.cd-boxes { display: flex; gap: 6px; }
.cd { background: var(--surface); border: 1px solid var(--trait); border-radius: var(--r-champ); padding: var(--e-1) 10px; text-align: center; min-width: 56px; }
.cd .h { font-size: 24px; }
.cd .m { font-size: 11px; }

/* formulaire */
.form { display: flex; flex-direction: column; gap: var(--e-4); padding: 18px var(--e-4); }
.row2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-3); }
.row2.d-row { display: flex; flex-direction: column; gap: var(--e-4); }
.cbs { display: flex; flex-direction: column; gap: 10px; padding-top: var(--e-1); border-top: 1px solid var(--trait); }
.cbs .f { display: flex; flex-direction: column; gap: 10px; }
.cbs > .f:first-child .cbr { padding-top: var(--e-3); }
.cbs .em { margin-top: -4px; }
.cbs .f.ind { gap: 0; }
.cbs .f.ind .em { margin-top: 6px; }
.help { margin: -6px 0 var(--e-1); font-size: var(--corps-s); padding-left: 36px; }
.cardlink { font-size: 15px; }
.cardlink a { font-weight: 600; }
[data-f="consent"] .em { margin-top: 0; }
.form-note { font-size: var(--corps-xs); text-align: center; }
.form-title { font-size: var(--titre-s); }

/* magasin dans le formulaire */
.store-box { display: flex; align-items: center; gap: var(--e-3); padding: var(--e-3); border-radius: var(--r-champ); background: var(--action-doux); border: 1.5px solid var(--action); }
.store-box .ic { color: var(--lien); }
.store-box-txt { flex: 1; font-size: 15px; line-height: 1.3; }
.store-box-txt .m { font-size: var(--corps-xs); }
.store-box a, .store-box button { display: flex; align-items: center; min-height: var(--cible-min); padding: 0 var(--e-1); font-weight: 600; font-size: 15px; color: var(--lien); background: none; border: 0; text-decoration: underline; cursor: pointer; }
.store-fs { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.store-fs legend { padding: 0; }
.store-cards { display: flex; flex-direction: column; gap: 10px; }
.sc { display: flex; gap: var(--e-3); align-items: center; padding: 14px; min-height: 56px; cursor: pointer; }
.sc.sel { border: 2px solid var(--action); background: var(--action-doux); }
.sc.off { cursor: not-allowed; opacity: .75; }
.sc-txt b { display: block; }
.sc-txt .m { font-size: var(--corps-s); }
.sc-d { display: none; }
[data-f="store"][data-bad] .sc { border: 2px solid var(--erreur-champ); }
[data-f="store"] .em { margin-top: 0; }
.store-pick { justify-content: space-between; width: 100%; text-align: left; }

/* sections sous le formulaire */
.sec-title { font-size: 24px; }
.steps { display: flex; flex-direction: column; gap: 14px; padding-top: var(--e-2); }
.step { display: flex; gap: 14px; align-items: flex-start; }
.num { width: 32px; height: 32px; border-radius: 50%; border: 2px solid var(--action); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 15px; flex: none; }
.pack { margin: 0; }
.pack img { display: block; width: 100%; height: auto; max-height: 360px; object-fit: contain; }
.pack-ph { height: 300px; }
.pack-ph b { margin-top: var(--e-2); }
.others { display: flex; flex-direction: column; gap: var(--e-3); padding-top: var(--e-2); }
.others > .m { font-size: 15px; }
.others-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.other { display: flex; flex-direction: column; gap: var(--e-2); padding: 10px; }
.other .ph, .other img { height: 96px; }
.other img { width: 100%; object-fit: contain; display: block; }
.other-name { font-size: var(--corps-s); font-weight: 600; line-height: 1.3; }
.other-detail { font-size: var(--corps-xs); line-height: 1.3; }
.others-note { font-size: var(--corps-s); }

/* résultat */
.resultat { display: flex; flex-direction: column; gap: var(--e-4); outline: none; }
.resultat .form { gap: 14px; }
.verdict-slot:empty { display: none; }
.verdict { display: flex; flex-direction: column; gap: 14px; padding: 20px 18px; }
.verdict .h { font-size: 32px; line-height: 1.05; }
.verdict.win { border: 2px solid var(--gagnant-bord); }
.verdict.wait { border: 2px solid var(--attente-bord); }
.verdict.err { border: 2px solid var(--erreur-bord); }
.verdict .btn { min-height: 52px; font-size: var(--corps-m); }
.verdict .small { font-size: var(--corps-xs); }
.rank { display: flex; align-items: baseline; gap: 10px; }
.rank .h { font-size: 64px; line-height: 1.05; }
.kv { display: flex; flex-direction: column; gap: var(--e-2); font-size: 15px; border-top: 1px solid var(--trait); padding-top: var(--e-3); }
.kv div { display: flex; justify-content: space-between; gap: var(--e-3); }
.kv b { text-align: right; }
.store-info { font-size: 15px; display: flex; flex-direction: column; gap: var(--e-1); }

/* états hors inscriptions (Tirage-Etats) */
.tirage.is-etat { padding-top: 28px; gap: 18px; }
.tirage.is-etat .intro { gap: 18px; }
.etat { display: flex; flex-direction: column; gap: 18px; }
.etat .h { font-size: var(--titre-m); }
.etat-card { display: flex; flex-direction: column; gap: 14px; padding: 18px var(--e-4); }
.etat-card > b { font-size: var(--corps-l); }
.etat-card > p { font-size: 15px; }
.etat-card .cd-boxes { gap: var(--e-2); }
.etat-card .cd { flex: 1; padding: 6px 10px; }
.etat-card .cd .h { font-size: var(--titre-s); }
.etat-card .cd .m { font-size: 12px; }
.note { display: flex; gap: var(--e-3); padding: var(--e-4); }
.note .ic { color: var(--lien); }
.note p { font-size: 15px; }
.big { width: 64px; height: 64px; border-radius: 50%; border: 2px solid var(--trait-champ); display: flex; align-items: center; justify-content: center; color: var(--lien); }
.big.err { color: var(--erreur); border-color: var(--erreur-bord); }
.etat .lead { font-size: var(--corps-m); }
.etat .lead b { color: var(--texte); }
.etat .after { font-size: 15px; }
.etat .small { font-size: var(--corps-s); }
.etat .btn2 { width: 100%; }

/* bulletin validé (Tirage-Valide) */
.valide { padding-top: 28px; outline: none; }
.valide-head { display: flex; flex-direction: column; gap: var(--e-3); }
.valide-head .h { font-size: var(--titre-l); }
.ok-dot { width: 56px; height: 56px; border-radius: 50%; background: var(--action); color: var(--sur-action); display: flex; align-items: center; justify-content: center; }
.bulletin { display: flex; flex-direction: column; gap: var(--e-3); padding: 20px; border: 1.5px solid var(--action); }
.bulletin-top { display: flex; align-items: center; justify-content: space-between; }
.bulletin-no { font-size: 44px; letter-spacing: .06em; }
.dash { border-top: 2px dashed var(--trait-champ); }
.kvr { display: flex; justify-content: space-between; gap: var(--e-3); font-size: 15px; }
.kvr b { text-align: right; }
.duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.infos { display: flex; flex-direction: column; gap: var(--e-4); padding: 18px var(--e-4); }
.row { display: flex; gap: var(--e-3); align-items: flex-start; }
.row .ic { color: var(--lien); }
.tip { font-size: var(--corps-s); text-align: center; }
.valide .linkbtn { align-self: center; margin-top: -8px; }

/* choix du magasin (Magasins) */
.magasins { padding: var(--e-5) var(--e-4); gap: 14px; min-height: 100vh; }
.magasins > .h { font-size: 30px; line-height: 1.05; outline: none; }
#magBody { flex: 1; display: flex; flex-direction: column; gap: 14px; }
#magBody > .m { font-size: 15px; }
.mag-cards { border: 0; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--e-3); min-width: 0; }
.mc { display: flex; gap: 14px; align-items: flex-start; padding: var(--e-4); cursor: pointer; }
.mc.sel { border: 2px solid var(--action); background: var(--action-doux); }
.mc.off { cursor: not-allowed; opacity: .75; }
.mc .rd { margin-top: 2px; }
.mc-txt { flex: 1; display: flex; flex-direction: column; gap: var(--e-1); }
.mc-txt b { font-size: 17px; }
.mc-txt .m { font-size: var(--corps-s); }
.mc-tag { display: flex; align-items: center; gap: var(--e-1); color: var(--lien); font-size: var(--corps-xs); font-weight: 600; }
.mc-tag .ic { width: 18px; height: 18px; }
.spacer { flex: 1; }
.search { position: relative; }
.search .lab { margin-bottom: 6px; }
.search .ic { position: absolute; left: 14px; top: 47px; width: 18px; height: 18px; color: var(--texte-2); pointer-events: none; }
.search .inp { height: 52px; padding-left: 44px; }
.mag-count { font-size: var(--corps-s); }
.res-list:empty { display: none; }
.res { display: flex; align-items: center; gap: var(--e-3); width: 100%; padding: var(--e-3) 14px; min-height: 60px; border: 0; border-bottom: 1px solid var(--trait); background: none; color: var(--texte); text-align: left; text-decoration: none; font: inherit; cursor: pointer; }
.res:last-child { border-bottom: 0; }
.res:disabled { cursor: not-allowed; opacity: .75; }
.res-txt { flex: 1; }
.res-txt b { display: block; }
.res-txt .m { font-size: var(--corps-s); }
.res .ic { width: 18px; height: 18px; color: var(--texte-2); }
.mag-note { margin-top: var(--e-2) !important; font-size: var(--corps-s); }
.lbl { font-family: var(--police-titre); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; font-size: 15px; color: var(--texte-2); margin: 0; }
.chips { display: flex; flex-wrap: wrap; gap: var(--e-2); }
.chip { min-height: var(--cible-min); display: inline-flex; align-items: center; padding: 0 14px; border: 1.5px solid var(--trait-champ); border-radius: var(--r-pilule); background: none; color: var(--texte); font: 400 var(--corps-s) var(--police-corps); cursor: pointer; }
.chip[aria-pressed="true"] { border-color: var(--action); background: var(--action-doux); }

/* accueil (Accueil) */
.accueil { padding-top: var(--e-5); }
.accueil .h { font-size: var(--titre-l); }
.accueil-lead { margin-top: 6px; }
.ops { display: flex; flex-direction: column; gap: 20px; }
.op { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--trait); }
.op-vis { height: 150px; display: flex; align-items: center; justify-content: space-between; gap: var(--e-3); padding: var(--e-4); background: var(--action); }
.op-vis .vis-ph { flex: 1; height: 118px; border: 1.5px dashed color-mix(in srgb, var(--sur-action) 35%, transparent); border-radius: var(--e-2); display: flex; align-items: center; justify-content: center; text-align: center; font-size: 12px; color: var(--sur-action); padding: 6px; }
.op-vis .vis-img { flex: 1; height: 118px; min-width: 0; object-fit: contain; }
.op-vis .badge-op { display: block; flex: none; }
[data-univers]:not([data-univers="tcg"]) .op-vis .badge-op { background: var(--fond); border-radius: var(--r-badge); }
.op-body { display: flex; flex-direction: column; gap: 10px; padding: var(--e-4); }
.op-body .h { font-size: 26px; }
.op-body > .m { font-size: 15px; }
.op .st, .recent .st { padding: var(--e-1) 10px var(--e-1) var(--e-2); font-size: var(--corps-xs); }
.op .st .ic, .recent .st .ic { width: 16px; height: 16px; }
.cta { display: flex; align-items: center; justify-content: center; min-height: 52px; border-radius: var(--r-champ); font: 600 var(--corps-m) var(--police-corps); text-decoration: none; background: var(--action); color: var(--sur-action); }
.cta.ghost { background: none; border: 1.5px solid var(--action); color: var(--lien); }
.accueil .recent-title { font-size: var(--titre-xs); margin-top: var(--e-2); }
.recent { display: flex; flex-direction: column; gap: var(--e-3); }
.recent-row { display: flex; align-items: center; gap: 14px; padding: 14px; min-height: 64px; background: var(--surface); border: 1px solid var(--trait); border-radius: var(--r-champ); color: var(--texte); text-decoration: none; }
.recent-row .st { margin-top: var(--e-1); }
.recent-txt { flex: 1; }
.recent-txt b { display: block; }
.recent-row > svg { color: var(--texte-2); flex: none; }
.empty { font-size: 15px; }

/* pied de page */
.foot { margin-top: auto; border-top: 1px solid var(--trait); }
.foot-in { display: flex; flex-direction: column; align-items: center; gap: var(--e-3); padding: var(--e-5) var(--e-4) var(--e-6); text-align: center; }
.slogan { font-size: 20px; letter-spacing: .03em; }
.foot-links { display: flex; gap: 20px; font-size: var(--corps-s); }

/* variantes par vue */
body[data-vue="valide"] .foot-logo, body[data-vue="valide"] .foot-links,
body[data-vue="accueil"] .foot-logo, body[data-vue="accueil"] .foot-links,
body[data-vue="etat"] .foot-logo, body[data-vue="etat"] .foot-links { display: none; }
body[data-vue="accueil"] .bar-slogan { display: block; }
body[data-vue="accueil"] .bar-end { display: none; }
body[data-vue="magasins"] .bar, body[data-vue="magasins"] .foot { display: none; }
body[data-vue="chargement"] .foot-logo, body[data-vue="chargement"] .foot-links { display: none; }

/* ---------------------------------------------------------------- règlement (Reglement) */
.bar.motif { background: var(--fond) var(--motif) repeat; }
.back { display: flex; align-items: center; gap: 6px; min-height: var(--cible-min); font-weight: 600; text-decoration: none; }
.legal { padding: var(--e-5) var(--e-4) 40px; max-width: 68ch; line-height: 1.6; }
.legal .h { font-size: 32px; line-height: 1.05; margin-bottom: var(--e-2); }
.legal > p, .legal > ul { margin: 0 0 var(--e-3); }
.legal ul { padding-left: 20px; }
.legal h2 { font-family: var(--police-titre); font-weight: 700; text-transform: uppercase; font-size: var(--titre-xs); letter-spacing: .02em; line-height: 1.6; margin: 28px 0 var(--e-2); color: var(--texte); }
.legal .sub { font-size: var(--corps-s); }
.toc { margin: var(--e-4) 0 var(--e-2); }
.toc a { display: flex; align-items: center; min-height: var(--cible-min); border-bottom: 1px solid var(--trait); text-decoration: none; color: var(--texte); font-size: 15px; }
.todo { background: var(--gagnant-fond); color: var(--gagnant); padding: 0 var(--e-1); border-radius: var(--e-1); }
.legal-foot .foot-in { padding-top: var(--e-5); }

/* ---------------------------------------------------------------- ordinateur (Tirage-Desktop) */
@media (min-width: 960px) {
  .m-only { display: none !important; }
  .d-only { display: revert !important; }
  .bar-in, .foot-in { max-width: 1200px; margin: 0 auto; }
  .bar-in { padding: 14px var(--e-5); }
  .logo-img { height: 44px; }
  .vue { max-width: 1200px; width: 100%; margin: 0 auto; padding: var(--e-7) var(--e-5); }
  .k { font-size: 15px; }

  .tirage { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 520px); grid-template-rows: auto auto auto 1fr; column-gap: var(--e-7); row-gap: 20px; align-items: start; }
  .tirage > * { grid-column: 1; }
  .tirage > .form, .tirage > .etat { grid-column: 2; grid-row: 1 / span 4; }
  .tirage > .intro { grid-row: 1; }
  .tirage > .cd-row { grid-row: 2; }
  .tirage > .pack { grid-row: 3; }
  .tirage > .steps, .tirage > .resultat, .tirage > .others { grid-column: 1 / -1; margin-top: 36px; }
  .intro { gap: 20px; }
  .intro .h, .tirage.is-etat .intro .h { font-size: clamp(36px, 5vw, 60px); }
  .pitch { font-size: var(--corps-l); max-width: 52ch; }
  .cd-row { justify-content: flex-start; flex-wrap: wrap; gap: var(--e-4); }
  .cd-row .cd-boxes { order: -1; gap: var(--e-2); }
  .cd-txt { font-size: 15px; font-weight: 400; line-height: 1.5; }
  .cd { padding: 6px 14px; min-width: 72px; }
  .cd .h { font-size: 32px; }
  .cd .m { font-size: 12px; }
  .pack-ph { height: 360px; font-size: 13px; }
  .pack-ph svg { display: none; }
  .pack-ph b { margin-top: 0; }
  .pack-ph::before { content: none; }

  .form { padding: 28px; gap: 18px; }
  .tirage > .form { max-width: 520px; width: 100%; }
  .row2 { gap: 14px; }
  .row2.d-row { display: grid; gap: 14px; }
  .cbs { padding-top: 14px; }
  .cbs > .f:first-child .cbr { padding-top: 0; }
  .btn { min-height: 56px; padding: 0 var(--e-5); }
  .store-cards { flex-direction: row; flex-wrap: wrap; }
  .store-cards .sc { flex: 1; min-width: 200px; }
  .sc-m { display: none; }
  .sc-d { display: block; }
  .sc-d .m { font-size: var(--corps-xs); }

  .steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--e-5); padding-top: 0; }
  .step.card-d { background: var(--surface); border: 1px solid var(--trait); border-radius: var(--r-carte); padding: 22px; }
  .num { width: 36px; height: 36px; font-size: var(--corps-m); }
  .others { gap: var(--e-4); padding-top: 0; }
  .others .sec-title { font-size: 32px; }
  .others > .m { font-size: var(--corps-m); }
  .others-grid { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: var(--e-4); }
  .other { padding: var(--e-3); gap: 10px; }
  .other .ph, .other img { height: 130px; }
  .other-name { font-weight: 700; }
  .others-note { font-size: var(--corps-s); }
  .tirage > .resultat { max-width: 520px; }

  .valide, .magasins, .accueil { max-width: 640px; }
  .foot-in { flex-direction: row; flex-wrap: wrap; justify-content: space-between; gap: var(--e-4); padding: 28px var(--e-5); text-align: left; }
  .foot .slogan { font-size: var(--titre-xs); }
  body[data-vue="valide"] .foot-in, body[data-vue="accueil"] .foot-in, body[data-vue="etat"] .foot-in { justify-content: center; }
}
.res-after { font-size: 15px; }
.tirage.is-etat .resultat { gap: 18px; }
.alert:focus-visible, .vue:focus-visible, main:focus-visible, .resultat:focus-visible, h1[tabindex]:focus-visible { outline: none; } /* conteneurs focalisés par script : pas d’anneau (les champs gardent le leur) */
#turnstile:empty { display: none; }
body[data-vue="reglement"] { background: var(--fond); } /* maquette Reglement : texte long sur noir uni, motif dans l’en-tête */
/* cibles ≥ 44 px sans changer la mise en page : zone cliquable agrandie */
.logo, .foot-links a, .alert li a, .back { position: relative; }
.logo::after { content: ""; position: absolute; inset: -2px; }
.foot-links a::after { content: ""; position: absolute; inset: -12px -10px; }
.alert li a::after { content: ""; position: absolute; inset: -4px -4px; } /* liste serrée : 27 px de haut, sans chevauchement */

/* ---------------------------------------------------------------- maquettes v2 (design/maquettes/page-tirage-telephone) */
.h { line-height: 1; }
.k { font: 700 var(--corps-xs)/1.2 var(--police-corps); letter-spacing: .1em; }
.pitch { font-size: 15px; }
.logo-img { height: 44px; }
.vue { gap: 18px; }
.cd { padding: var(--e-1) var(--e-2); min-width: 54px; }
.btn { font-weight: 700; }
.inp { background: var(--champ); }
.cbr { line-height: 1.4; }
.cb { margin: 0; }
.emp { display: flex; align-items: center; justify-content: center; text-align: center; padding: var(--e-1); background: var(--emplacement); border: 1.5px dashed var(--emplacement-trait); border-radius: var(--e-2); color: var(--emplacement-texte); font: 600 11px/1.3 var(--police-corps); }
.vis-wrap img { display: block; width: 100%; height: 100%; object-fit: contain; }

/* cases obligatoires */
.cbs { border: 0; border-top: 1px solid var(--trait); margin: 0; padding: 14px 0 0; min-width: 0; }
.cbs > legend { font-size: var(--corps-xs); padding: 0 var(--e-2) 0 0; }
.cbs > .f:first-child .cbr { padding-top: 0; }
.cbs .f { gap: 10px; }
.sub { margin: -4px 0 var(--e-1); padding-left: 36px; font-size: var(--corps-s); line-height: 1.4; }
.sub a { font-weight: 600; }
.cbs .em { margin-top: 0; padding-left: 36px; }
.cbs .f + .f { margin-top: 0; }

/* choix du magasin en tête du formulaire */
.sc { min-height: 64px; }
.sc-txt { flex: 1; line-height: 1.35; }
.store-help { margin: 0 0 var(--e-1); font-size: var(--corps-s); }
.store-fs legend { margin-bottom: var(--e-1); }
.alert ul { line-height: 1.7; }

/* frise « Comment ça marche » */
.steps { padding-top: 10px; gap: 14px; }
.steps .sec-title { font-size: var(--titre-s); }
.frise { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.frise li { display: flex; gap: 14px; }
.frise-col { display: flex; flex-direction: column; align-items: center; }
.frise-trait { flex: 1; width: 3px; min-height: 18px; background: var(--action); }
.frise .num { width: 34px; height: 34px; border: 0; background: var(--action); color: var(--sur-action); font-weight: 800; font-size: 15px; }
.frise-txt { padding-bottom: 14px; }
.frise li:last-child .frise-txt { padding-bottom: 0; }
.frise-txt .h { display: block; font-size: var(--titre-xs); }

/* produit au tirage, produits en vente, retrait */
.pack { display: flex; flex-direction: column; gap: 18px; }
.au-tirage { display: flex; flex-direction: column; gap: var(--e-3); padding: var(--e-4); }
.au-tirage .emp-pack, .etat .emp-pack, .etat .vis-wrap { height: 250px; font-size: var(--corps-xs); }
.etat .emp-pack, .etat .vis-wrap { height: 200px; }
.au-tirage .vis-wrap { height: 250px; }
.au-tirage .h { font-size: 24px; }
.au-tirage > .m { font-size: 15px; }
.others { gap: var(--e-3); padding-top: 6px; }
.others .sec-title { font-size: var(--titre-s); }
.other { gap: var(--e-2); }
.other .emp-other, .other .vis-wrap { height: 100px; }
.other-txt { font-size: var(--corps-s); line-height: 1.3; }
.retrait { display: flex; flex-direction: column; gap: 10px; padding: var(--e-4); font-size: 15px; }
.retrait .h { font-size: 22px; }

/* états */
.etat .h, .tirage.is-etat .intro .h { font-size: 36px; }
.tirage.is-etat:has(.etat-card) .intro .h { font-size: var(--titre-m); }

/* bulletin validé */
.bulletin { gap: 10px; padding: 18px; }
.bulletin-lab { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; }
.bulletin-no { font-size: 42px; }
.dash { border-top-color: var(--trait); }
.kvr { font-size: var(--corps-s); }
.infos { padding: 0; background: none; border: 0; gap: 18px; }
.ok-dot { width: 64px; height: 64px; }

@media (min-width: 960px) {
  .k { font-size: var(--corps-xs); }
  .frise { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--e-5); }
  .frise-trait { display: none; }
  .tirage > .retrait { grid-column: 1 / -1; margin-top: 0; }
  .pack { grid-row: 3; }
  .au-tirage .emp-pack, .au-tirage .vis-wrap { height: 300px; }
}
#turnstile:not(:empty) { min-height: 66px; }
.cbs .f .em { margin-top: -6px; }
.legal .sub { padding-left: 0; margin: 0 0 var(--e-3); }