/* =============================================================
   LAISSEZ-PASSER BON VIEUX-QUÉBEC
   Feuille de styles — normes graphiques SDC Vieux-Québec
   Échelle : 1rem = 10px (comme le thème du site)
   ============================================================= */

/* Roobert — la police de marque, hébergée localement (pas de CDN tiers).
   Deux graisses suffisent au guide : Regular pour le texte, SemiBold pour
   les titres. Les graisses plus lourdes demandées dans le CSS retombent
   automatiquement sur SemiBold, sans fausse graisse synthétique. */
@font-face{
  font-family:'Roobert';font-style:normal;font-weight:400;font-display:swap;
  src:url('roobert-regular.woff2?v=57') format('woff2');
}
@font-face{
  font-family:'Roobert';font-style:normal;font-weight:600;font-display:swap;
  src:url('roobert-semibold.woff2?v=57') format('woff2');
}

:root{
  --sarcelle:#063835;
  --sarcelle-fonce:#042523;
  --vert-de-gris:#D7FFD7;
  --frontenac:#50D794;
  --acier:#94C9EA;
  --or:#FFC127;
  --coquelicot:#FF6543;
  --abricot:#FFA076;
  --font:'Roobert',-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;
  --r1:0.8rem; --r2:1.6rem; --r3:2.4rem;
  --haut:env(safe-area-inset-top,0px);
  --bas:env(safe-area-inset-bottom,0px);
}

html{font-size:62.5%;-webkit-text-size-adjust:100%;height:100%}
*{box-sizing:border-box;margin:0;padding:0}

body{
  font-family:var(--font);
  font-size:1.6rem;
  line-height:150%;
  background:var(--sarcelle);
  color:var(--vert-de-gris);
  height:100%;
  overflow:hidden;               /* le défilement appartient à .corps */
  -webkit-font-smoothing:antialiased;
  overscroll-behavior-y:none;
}

/* Links: vert-de-gris on sarcelle, the brand's only text colour there
   (NG p. 26). The browser's default blue was unreadable (1.03:1, U-01). */
a{color:var(--vert-de-gris);text-decoration:underline;text-underline-offset:.25em}

.app{
  max-width:52rem;margin:0 auto;
  /* Hauteur FIXE, jamais min-height : sans quoi le contenu pousse la
     barre de navigation hors de l'écran. Sur iPhone, la barre d'outils
     de Safari masque alors les boutons et la personne est bloquée. */
  height:100vh;
  height:-webkit-fill-available;
  height:100dvh;
  overflow:hidden;
  display:flex;flex-direction:column;position:relative;
  background-image:
    linear-gradient(rgba(255,255,255,.02) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.02) 1px,transparent 1px);
  background-size:64px 34px;
}

/* ---------- Chargement ---------- */
.chargement{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2rem;opacity:.6}
.anneau{width:4rem;height:4rem;border:3px solid rgba(215,255,215,.2);border-top-color:var(--frontenac);border-radius:50%;animation:tourne .8s linear infinite}
@keyframes tourne{to{transform:rotate(360deg)}}

/* ---------- Écrans ---------- */
.ecran{display:none;flex-direction:column;flex:1;min-height:0}
.ecran.on{display:flex}

.top{padding:calc(2.6rem + var(--haut)) 2.2rem 1.6rem;display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;flex:0 0 auto}
.wordmark{font-size:1.15rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;opacity:.6;line-height:140%;display:block}
.top h1{font-size:2.8rem;font-weight:600;line-height:115%;letter-spacing:-.015em;margin-top:.5rem}
.top .sub{font-size:1.45rem;opacity:.65;margin-top:.5rem;line-height:145%}

.avatar{width:4.4rem;height:4.4rem;border-radius:50%;flex:0 0 auto;background:var(--frontenac);
  color:var(--sarcelle);display:grid;place-items:center;font-weight:600;font-size:1.6rem;
  font-family:inherit;border:0;cursor:pointer;transition:.15s;-webkit-tap-highlight-color:transparent}
.avatar:hover{filter:brightness(1.08);transform:scale(1.05)}
.avatar:focus-visible{outline:2px solid var(--or);outline-offset:3px}

.retour{
  flex:0 0 auto;width:4.4rem;height:4.4rem;border-radius:50%;border:0;cursor:pointer;
  background:rgba(215,255,215,.1);color:var(--vert-de-gris);
  display:grid;place-items:center;margin:.4rem 1rem 0 -.6rem;transition:.15s;
  -webkit-tap-highlight-color:transparent
}
.retour:hover{background:rgba(215,255,215,.2)}
.retour:active{transform:scale(.93)}
.retour:focus-visible{outline:2px solid var(--or);outline-offset:3px}
.retour svg{width:2.4rem;height:2.4rem;fill:none;stroke:currentColor;stroke-width:2.2;
  stroke-linecap:round;stroke-linejoin:round}
.ecran--ok .retour,.ecran--non .retour{background:rgba(6,56,53,.14);color:var(--sarcelle)}

.corps{flex:1;min-height:0;padding:0 2.2rem 2.6rem;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
.corps--centre{display:flex;flex-direction:column;justify-content:center}

/* ---------- Logo de la marque ---------- */
.logo{display:block;width:auto;height:8.4rem;margin-bottom:1.4rem}
.top--accueil{padding-top:calc(4rem + var(--haut))}

/* ---------- Pied de page ---------- */
.pied{
  margin-top:2.6rem;padding-top:1.6rem;
  border-top:1px solid rgba(215,255,215,.12);
  font-size:1.2rem;line-height:150%;text-align:center
}
/* L'opacité vit sur le texte, pas sur le bloc : sans quoi le logo SDC,
   enfant du pied, hériterait du même voile et deviendrait illisible. */
.pied p{margin-bottom:.4rem;opacity:.6}
.pied p:last-child{margin-bottom:0}
.pied b{font-weight:600}
.pied a:hover{opacity:1}
.pied .pied-prod{opacity:.6;margin-bottom:.5rem;letter-spacing:.02em}
.pied .pied-prp{opacity:.7;margin-top:.5rem}
/* Le logo SDC en signature de producteur : vert-de-gris sur le sarcelle,
   discret mais lisible. */
.pied-sdc{display:block;height:2.1rem;width:auto;margin:0 auto .9rem;opacity:.85}

/* ---------- Logo d'un commerce ---------- */
.blason{
  width:5.6rem;height:5.6rem;border-radius:var(--r2);flex:0 0 auto;
  object-fit:cover;background:rgba(215,255,215,.1);display:block
}
.blason--vide{display:grid;place-items:center;font-weight:600;font-size:1.9rem;
  color:var(--vert-de-gris);opacity:.6}
.offre-tete .blason{width:4.8rem;height:4.8rem;border-radius:var(--r1)}
.televerse{
  display:flex;gap:1.6rem;align-items:center;
  background:rgba(215,255,215,.06);border:1.5px solid rgba(215,255,215,.13);
  border-radius:var(--r2);padding:1.6rem;margin-bottom:1rem
}
.televerse .blason{width:7.2rem;height:7.2rem}
.televerse-txt{flex:1;min-width:0}
.televerse-txt b{display:block;font-size:1.55rem;font-weight:600;margin-bottom:.3rem}
.televerse-txt p{font-size:1.3rem;opacity:.6;line-height:150%}

/* ---------- Carte de laissez-passer ---------- */
/* La carte de laissez-passer : la pierre vert-de-gris de la marque, avec le
   logo Bon Vieux-Québec et un badge or. Pas de cercle — la pierre suffit. */
.passe{background:var(--vert-de-gris);color:var(--sarcelle);border-radius:var(--r3);padding:2.2rem 2.2rem 2rem;margin-bottom:1.6rem}
.passe-tete{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;margin-bottom:1.8rem}
.passe-logo{height:4rem;width:auto;display:block}
.passe-badge{flex:0 0 auto;background:var(--or);color:var(--sarcelle);font-size:1.15rem;font-weight:600;letter-spacing:.02em;padding:.5rem 1.1rem;border-radius:var(--r1)}
.passe-nom{font-size:2.9rem;font-weight:600;line-height:106%;letter-spacing:-.02em;margin-bottom:.3rem}
.passe-meta{font-size:1.45rem;font-weight:400;opacity:.72}
.passe-statut{display:flex;align-items:center;flex-wrap:wrap;gap:.5rem 1.2rem;margin-top:1.8rem;padding-top:1.5rem;border-top:1.5px solid rgba(6,56,53,.14)}
.passe-etat{display:inline-flex;align-items:center;gap:.7rem;font-size:1.45rem;font-weight:600}
.passe-etat i{width:1rem;height:1rem;border-radius:50%;background:var(--frontenac);display:inline-block;flex:0 0 auto}
.passe-etat--attente i{background:var(--or)}
.passe-etat--refuse i{background:var(--coquelicot)}
.passe-exp{font-size:1.3rem;opacity:.7}

.pastille{font-size:1.25rem;font-weight:600;padding:.45rem 1.1rem;border-radius:var(--r1);background:var(--sarcelle);color:var(--vert-de-gris)}
.pastille--ok{background:var(--frontenac);color:var(--sarcelle)}
.pastille--attente{background:var(--or);color:var(--sarcelle)}
.pastille--off{background:rgba(6,56,53,.14);color:var(--sarcelle)}
/* Every pastille--off sits in a .ligne, on sarcelle: sarcelle text on 14 %
   sarcelle there was invisible (A2). */
.ligne .pastille--off{background:rgba(215,255,215,.12);color:var(--vert-de-gris)}
/* Several pastilles on one request: stacked on the right, never split. */
.pastilles{display:flex;flex-direction:column;align-items:flex-end;gap:.6rem;flex:0 0 auto}
.pastilles .pastille{white-space:nowrap}

/* ---------- Boutons ---------- */
.btn{display:block;width:100%;font-family:inherit;font-size:1.7rem;font-weight:600;padding:1.7rem;border:0;border-radius:var(--r2);cursor:pointer;text-align:center;background:var(--frontenac);color:var(--sarcelle);transition:.16s;line-height:120%;-webkit-tap-highlight-color:transparent}
.btn:hover{filter:brightness(1.08)}
.btn:active{transform:scale(.985)}
.btn:focus-visible{outline:2px solid var(--or);outline-offset:3px}
.btn[disabled]{opacity:.45;cursor:not-allowed;transform:none;filter:none}
.btn--ghost{background:transparent;color:var(--vert-de-gris);border:1.5px solid rgba(215,255,215,.3)}
.btn--ghost:hover{background:rgba(215,255,215,.08);filter:none}
/* Rembourrage asymétrique : la hauteur porte la cible tactile (44 px), la
   largeur reste serrée pour que trois boutons tiennent sur une rangée. */
.btn--sm{font-size:1.4rem;padding:1.4rem 1rem;border-radius:var(--r1)}
.btn--danger{background:transparent;color:var(--vert-de-gris);border:1.5px solid var(--coquelicot)}
.btn--danger:hover{background:rgba(255,101,67,.1);filter:none}
.btn--sombre{background:var(--sarcelle);color:var(--vert-de-gris)}
.btn + .btn{margin-top:1rem}

/* ---------- Sections ---------- */
.sect{margin:2.8rem 0 1.2rem;display:flex;justify-content:space-between;align-items:baseline;gap:1rem}
.sect h2{font-size:1.15rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;opacity:.6}
.sect span{font-size:1.3rem;opacity:.6;font-weight:500}

/* ---------- Filtres ---------- */
.filtres{display:flex;gap:.6rem;overflow-x:auto;padding-bottom:.6rem;margin-bottom:1.4rem;scrollbar-width:none}
.filtres::-webkit-scrollbar{display:none}
.filtres button{font-family:inherit;font-size:1.3rem;font-weight:600;white-space:nowrap;padding:.7rem 1.4rem;border-radius:var(--r1);border:1.5px solid rgba(215,255,215,.22);background:transparent;color:var(--vert-de-gris);cursor:pointer;opacity:.7;transition:.15s}
.filtres button[aria-pressed="true"]{background:var(--vert-de-gris);color:var(--sarcelle);border-color:var(--vert-de-gris);opacity:1}

/* ---------- Offre ---------- */
.offre{display:block;width:100%;text-align:left;font-family:inherit;cursor:pointer;background:rgba(215,255,215,.06);border:1.5px solid rgba(215,255,215,.13);color:var(--vert-de-gris);border-radius:var(--r2);padding:1.8rem;margin-bottom:1rem;transition:.16s}
.offre:hover{background:rgba(215,255,215,.11);border-color:rgba(215,255,215,.28)}
.offre:focus-visible{outline:2px solid var(--or);outline-offset:2px}
.offre-tete{display:flex;justify-content:space-between;align-items:flex-start;gap:1.4rem}
.offre-com{font-size:1.85rem;font-weight:600;line-height:125%}
.offre-cat{font-size:1.25rem;opacity:.6;margin-top:.25rem;font-weight:500}
.offre-val{flex:0 0 auto;background:var(--or);color:var(--sarcelle);font-size:1.6rem;font-weight:600;padding:.5rem 1.1rem;border-radius:var(--r1);white-space:nowrap}
.offre-titre{font-size:1.5rem;font-weight:600;margin-top:1.2rem;line-height:140%}
.offre-cond{font-size:1.3rem;opacity:.6;margin-top:.5rem;line-height:145%}

/* ---------- Scanner ---------- */
.scan{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:2rem 2.4rem;text-align:center}
.viseur{width:min(26rem,72vw);aspect-ratio:1;border-radius:var(--r3);position:relative;background:#000;margin-bottom:2.6rem;overflow:hidden}
.viseur video{width:100%;height:100%;object-fit:cover;display:block}
.viseur i{position:absolute;width:4.5rem;height:4.5rem;border:3px solid var(--frontenac);z-index:2}
.viseur i:nth-of-type(1){top:0;left:0;border-right:0;border-bottom:0;border-radius:var(--r3) 0 0 0}
.viseur i:nth-of-type(2){top:0;right:0;border-left:0;border-bottom:0;border-radius:0 var(--r3) 0 0}
.viseur i:nth-of-type(3){bottom:0;left:0;border-right:0;border-top:0;border-radius:0 0 0 var(--r3)}
.viseur i:nth-of-type(4){bottom:0;right:0;border-left:0;border-top:0;border-radius:0 0 var(--r3) 0}
.laser{position:absolute;left:1.5rem;right:1.5rem;height:2px;background:var(--frontenac);box-shadow:0 0 1.6rem var(--frontenac);animation:balaie 2s ease-in-out infinite;z-index:2}
@keyframes balaie{0%,100%{top:12%}50%{top:86%}}
.scan h2{font-size:2.2rem;font-weight:600;line-height:125%;margin-bottom:.8rem}
.scan p{font-size:1.5rem;opacity:.62;line-height:150%;max-width:30rem;margin:0 auto}

/* ---------- Résultat de validation ---------- */
.resultat{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;padding:calc(3.4rem + var(--haut)) 2.6rem calc(2.6rem + var(--bas));text-align:center;align-items:center}
.ecran--ok{background:var(--frontenac);color:var(--sarcelle)}
.ecran--non{background:var(--coquelicot);color:var(--sarcelle)}
.ecran--attente .motif{background:rgba(215,255,215,.08)}

.sceau{width:11rem;height:11rem;margin-bottom:2.4rem;flex:0 0 auto}
.sceau circle,.sceau path{fill:none;stroke:var(--sarcelle);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.sceau circle{stroke-dasharray:302;stroke-dashoffset:302;animation:trace .75s cubic-bezier(.2,.7,.3,1) forwards}
.sceau path{stroke-dasharray:60;stroke-dashoffset:60;animation:trace .4s cubic-bezier(.2,.7,.3,1) .55s forwards;stroke-width:5}
@keyframes trace{to{stroke-dashoffset:0}}

.res-mot{font-size:1.2rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase}
.res-com{font-size:3.4rem;font-weight:600;line-height:110%;margin:1rem 0 .6rem;letter-spacing:-.02em}
.res-offre{font-size:1.9rem;font-weight:600;line-height:140%;opacity:.82;max-width:30rem}
.res-heure{font-size:1.7rem;font-weight:600;margin-top:.8rem}

.horloge{margin-top:auto;width:100%;background:var(--sarcelle);color:var(--vert-de-gris);border-radius:var(--r2);padding:1.8rem 2rem;display:flex;justify-content:space-between;align-items:center;gap:1.4rem}
.horloge-g{text-align:left}
.horloge-g b{display:block;font-size:1.9rem;font-weight:600;line-height:125%}
.horloge-g span{font-size:1.3rem;opacity:.6}
.horloge-d{text-align:right;font-variant-numeric:tabular-nums}
.horloge-d b{display:block;font-size:2.6rem;font-weight:600;line-height:110%}
.horloge-d span{font-size:1.2rem;opacity:.6}
.pouls{display:inline-block;width:.8rem;height:.8rem;border-radius:50%;background:var(--frontenac);margin-right:.6rem;animation:pouls 1s ease-in-out infinite}
@keyframes pouls{0%,100%{opacity:1}50%{opacity:.25}}
.res-note{font-size:1.3rem;margin-top:1.4rem;line-height:145%}

.motif{width:100%;margin-top:auto;background:var(--sarcelle);color:var(--vert-de-gris);border-radius:var(--r2);padding:1.9rem 2rem;text-align:left}
.motif b{display:block;font-size:1.2rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;opacity:.6;margin-bottom:.7rem}
.motif p{font-size:1.7rem;font-weight:600;line-height:145%}

/* ---------- Choix d'offre après scan ---------- */
.choix{width:100%;text-align:left;font-family:inherit;cursor:pointer;background:rgba(215,255,215,.06);border:1.5px solid rgba(215,255,215,.15);color:var(--vert-de-gris);border-radius:var(--r2);padding:1.8rem;margin-bottom:1rem;transition:.16s}
.choix:hover{background:rgba(215,255,215,.12)}
.choix b{display:block;font-size:1.85rem;font-weight:600;line-height:130%}
.choix span{display:block;font-size:1.35rem;opacity:.6;margin-top:.5rem;line-height:145%}

.choix--offre{padding:2rem 1.8rem}
.choix-tete{display:flex;justify-content:space-between;align-items:flex-start;gap:1.4rem}
.choix-tete b{font-size:2rem;line-height:125%}
.choix--offre .offre-val{flex:0 0 auto}

/* ---------- Compteur commerçant ---------- */
.compteur{background:var(--vert-de-gris);color:var(--sarcelle);border-radius:var(--r3);padding:2.4rem 2.2rem;margin-bottom:1.6rem}
button.compteur{display:block;width:100%;border:0;font:inherit;text-align:left;cursor:pointer;-webkit-tap-highlight-color:transparent}
.compteur-jour{display:block;position:relative;z-index:1}
.compteur-jour span{font-size:1.1rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;opacity:.7;display:block}
.compteur-jour b{font-size:7.4rem;font-weight:600;line-height:95%;letter-spacing:-.045em;display:block;margin:.6rem 0 .3rem}
.compteur-jour em{font-style:normal;font-size:1.55rem;font-weight:600;opacity:.72}
.compteur-mois{position:relative;z-index:1;display:flex;justify-content:space-between;align-items:baseline;margin-top:1.8rem;padding-top:1.5rem;border-top:1.5px solid rgba(6,56,53,.16)}
.compteur-mois span{font-size:1.4rem;font-weight:600;opacity:.7}
.compteur-mois b{font-size:2.5rem;font-weight:600;letter-spacing:-.02em}

/* ---------- Accueil d'un commerçant sans offre ---------- */
.bienvenue{
  background:var(--vert-de-gris);color:var(--sarcelle);border-radius:var(--r3);
  padding:2.6rem 2.2rem;margin-bottom:1.6rem
}
.bienvenue-mot{position:relative;z-index:1;font-size:1.1rem;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;opacity:.7;display:block}
.bienvenue h2{position:relative;z-index:1;font-size:2.6rem;font-weight:600;
  line-height:115%;margin:.8rem 0 .8rem;letter-spacing:-.015em}
.bienvenue p{position:relative;z-index:1;font-size:1.5rem;line-height:155%;opacity:.78}

.conseil{border-left:3px solid var(--frontenac);padding:.2rem 0 .2rem 1.6rem;margin-bottom:1.8rem}
.conseil b{display:block;font-size:1.6rem;font-weight:600;margin-bottom:.5rem}
.conseil p{font-size:1.4rem;line-height:155%;opacity:.65}

/* ---------- Code de comptoir ---------- */
.comptoir{
  background:var(--vert-de-gris);color:var(--sarcelle);border-radius:var(--r3);
  padding:2rem;display:flex;gap:2rem;align-items:center;margin-bottom:1rem
}
.comptoir-qr{flex:0 0 auto;width:13rem;height:13rem;border-radius:var(--r2);
  background:var(--vert-de-gris);display:grid;place-items:center;overflow:hidden}
.comptoir-qr img{width:100%;height:100%;display:block}
.comptoir-txt{flex:1;min-width:0}
.comptoir-txt span{font-size:1.1rem;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;opacity:.7;display:block}
.comptoir-txt b{display:block;font-size:3.6rem;font-weight:600;letter-spacing:.18em;
  line-height:120%;margin:.4rem 0 .8rem;font-variant-numeric:tabular-nums}
.comptoir-txt p{font-size:1.3rem;line-height:150%;opacity:.7}
.qr-echec{font-size:1.15rem;line-height:145%;opacity:.7;text-align:center;padding:1rem}
@media (max-width:400px){
  .comptoir{flex-direction:column;text-align:center}
  .comptoir-txt b{letter-spacing:.24em}
}

/* ---------- Fil d'activité ---------- */
.acti{display:flex;justify-content:space-between;align-items:center;gap:1.2rem;padding:1.35rem .2rem;border-bottom:1px solid rgba(215,255,215,.1);font-size:1.45rem}
.acti:last-child{border-bottom:0}
.acti-t{font-weight:600;line-height:135%}
.acti-t small{display:block;font-size:1.25rem;font-weight:400;opacity:.6;margin-top:.2rem}
.acti-h{font-variant-numeric:tabular-nums;opacity:.6;font-size:1.3rem;font-weight:600}
.acti-d{display:flex;align-items:center;gap:1rem;flex:0 0 auto}
.acti-btn{
  position:relative;
  width:3.2rem;height:3.2rem;border-radius:50%;border:0;cursor:pointer;
  background:rgba(215,255,215,.1);color:var(--vert-de-gris);font-size:1.5rem;
  display:grid;place-items:center;transition:.15s;font-family:inherit;line-height:1
}
.acti-btn:hover{background:rgba(255,101,67,.22);box-shadow:inset 0 0 0 1.5px var(--coquelicot)}
.acti-btn:focus-visible{outline:2px solid var(--or);outline-offset:2px}
.acti-btn::before{content:"";position:absolute;inset:-.6rem}
.acti--contestee .acti-t{text-decoration:line-through;text-decoration-thickness:1px}
.jour-nav{display:flex;align-items:center;gap:.8rem;margin-bottom:1.6rem}
.jour-nav input{flex:1;min-width:0;font-family:inherit;font-size:1.6rem;color:var(--vert-de-gris);background:rgba(215,255,215,.07);border:1.5px solid rgba(215,255,215,.2);border-radius:var(--r1);padding:1.3rem 1.4rem;-webkit-appearance:none;appearance:none}
.jour-nav input:focus{outline:0;border-color:var(--frontenac);background:rgba(215,255,215,.11)}
.jour-nav .btn{flex:0 0 auto;width:auto;margin:0;padding-inline:1.6rem}
.acti--nouvelle{animation:acti-nouvelle 2.4s ease-out}
@keyframes acti-nouvelle{from{background:rgba(255,255,255,.18)}to{background:transparent}}
@media (prefers-reduced-motion:reduce){.acti--nouvelle{animation:none;outline:1px solid rgba(255,255,255,.4)}}

/* ---------- Formulaires ---------- */
.champ{margin-bottom:1.8rem}
.champ label{display:block;font-size:1.25rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;opacity:.6;margin-bottom:.7rem}
.champ input,.champ textarea,.champ select{width:100%;font-family:inherit;font-size:1.6rem;color:var(--vert-de-gris);background:rgba(215,255,215,.07);border:1.5px solid rgba(215,255,215,.2);border-radius:var(--r1);padding:1.3rem 1.4rem;transition:.15s;-webkit-appearance:none;appearance:none}
.champ select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D7FFD7' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 1.3rem center;background-size:1.8rem;padding-right:4.4rem}
.champ select option{background:var(--sarcelle);color:var(--vert-de-gris)}
.champ textarea{min-height:9rem;resize:vertical;line-height:150%}
.champ input:focus,.champ textarea:focus,.champ select:focus{outline:0;border-color:var(--frontenac);background:rgba(215,255,215,.11)}
.champ input::placeholder,.champ textarea::placeholder{color:rgba(215,255,215,.6)}
.champ .aide{font-size:1.25rem;opacity:.6;margin-top:.6rem;line-height:145%}
.corps > .aide{font-size:1.25rem;opacity:.6;line-height:145%;margin:.6rem 0 1.2rem}
.preuve-apercu{display:flex;align-items:center;gap:1.2rem;margin:.8rem 0 1.2rem}
.preuve-apercu img{max-width:9rem;max-height:9rem;border-radius:var(--r1);object-fit:cover}
.champ.erreur input,.champ.erreur select,.champ.erreur textarea{border-color:var(--coquelicot)}
.champ .msg{font-size:1.3rem;color:var(--vert-de-gris);border-left:3px solid var(--coquelicot);padding-left:.8rem;margin-top:.6rem;font-weight:600;display:none}

/* Case de consentement (Loi 25) : la case et son texte alignés, cible tactile ample */
.consent{display:flex;gap:1.1rem;align-items:flex-start;cursor:pointer;font-size:1.4rem;line-height:150%;opacity:.9}
/* La règle .champ input met appearance:none (pour styliser les champs texte) :
   sur une case à cocher, ça supprime la coche native et rien ne s'affiche —
   la case paraît impossible à cocher, surtout sur Android. On rétablit ici son
   apparence native, avec l'accent vert de la marque. */
.consent input{flex:0 0 auto;width:2rem;height:2rem;margin:.2rem 0 0;padding:0;
  -webkit-appearance:checkbox;appearance:auto;accent-color:var(--frontenac);
  background:none;border:0;border-radius:0;cursor:pointer}
.champ.erreur .consent{opacity:1;border-left:3px solid var(--coquelicot);padding-left:1rem}
.champ.erreur .msg{display:block}

/* A state that needs attention, on sarcelle: the text stays vert-de-gris,
   the coquelicot dot carries the alert. Coquelicot text on sarcelle is
   4.4:1, under AA (A1). */
.alerte{color:var(--vert-de-gris);font-weight:600;white-space:nowrap}
.alerte::before{content:"";display:inline-block;width:.8rem;height:.8rem;border-radius:50%;
  background:var(--coquelicot);margin-right:.5rem;vertical-align:.05em}

/* `minmax(0,1fr)` et non `1fr` : une colonne `1fr` ne descend jamais sous la
   largeur intrinsèque de son contenu, et un sélecteur de date natif est large.
   À 320 px, le champ « fin » sortait de l'écran de 61 px. */
.duo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.2rem}
.duo .champ,.duo input,.duo select{min-width:0}
.jours{display:flex;gap:.5rem;flex-wrap:wrap}
/* Publics visés : même bascule que les jours, mais à largeur libre — les
   étiquettes sont des mots, pas des initiales. */
.publics{display:flex;gap:.6rem;flex-wrap:wrap}
.publics button{font-family:inherit;font-size:1.35rem;font-weight:600;padding:1.3rem 1.6rem;border-radius:var(--r1);border:1.5px solid rgba(215,255,215,.22);background:transparent;color:var(--vert-de-gris);cursor:pointer;opacity:.6;transition:.15s}
.publics button[aria-pressed="true"]{background:var(--frontenac);color:var(--sarcelle);border-color:var(--frontenac);opacity:1}
.champ.erreur .publics button{border-color:var(--coquelicot)}
.jours button{font-family:inherit;font-size:1.3rem;font-weight:600;width:4.4rem;padding:1.3rem 0;border-radius:var(--r1);border:1.5px solid rgba(215,255,215,.22);background:transparent;color:var(--vert-de-gris);cursor:pointer;opacity:.6;transition:.15s}
.jours button[aria-pressed="true"]{background:var(--frontenac);color:var(--sarcelle);border-color:var(--frontenac);opacity:1}

/* Code à usage unique */
.otp{display:flex;gap:.8rem;justify-content:center;margin:1rem 0 2rem}
.otp input{width:100%;max-width:5.4rem;text-align:center;font-size:2.6rem;font-weight:600;font-variant-numeric:tabular-nums;padding:1.4rem .4rem}

/* ---------- Lignes de gestion ---------- */
.ligne{background:rgba(215,255,215,.06);border:1.5px solid rgba(215,255,215,.13);border-radius:var(--r2);padding:1.8rem;margin-bottom:1rem}
.ligne-tete{display:flex;justify-content:space-between;align-items:flex-start;gap:1.2rem}
.ligne-titre{font-size:1.75rem;font-weight:600;line-height:130%}
.ligne-meta{font-size:1.3rem;opacity:.6;margin-top:.5rem;line-height:150%}
/* `flex-wrap` : sans lui, trois boutons côte à côte débordaient de 6 px à
   320 px et « Supprimer » se retrouvait coupé. */
.ligne-actions{display:flex;gap:.8rem;margin-top:1.5rem;flex-wrap:wrap}
.ligne-actions .btn{flex:1 1 8rem;margin-top:0}

.bascule{position:relative;flex:0 0 auto;width:5.4rem;height:3rem;border-radius:1.5rem;border:0;cursor:pointer;background:rgba(215,255,215,.2);transition:.2s}
/* La bascule mesure 30 px de haut, l'écusson d'activité 32 : trop peu pour un
   doigt (44 pt chez Apple, 48 dp chez Android). On étend la zone sensible
   sans rien changer au dessin. */
.bascule::before{content:"";position:absolute;inset:-.7rem -.4rem}
.bascule::after{content:"";position:absolute;top:.35rem;left:.35rem;width:2.3rem;height:2.3rem;border-radius:50%;background:var(--vert-de-gris);transition:.2s}
.bascule[aria-checked="true"]{background:var(--frontenac)}
.bascule[aria-checked="true"]::after{left:2.75rem;background:var(--sarcelle)}
.bascule:focus-visible{outline:2px solid var(--or);outline-offset:3px}

/* ---------- Statistiques ---------- */
.stats{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-bottom:2rem}
.stat{background:var(--vert-de-gris);color:var(--sarcelle);border-radius:var(--r2);padding:1.8rem}
.stat b{display:block;font-size:3.4rem;font-weight:600;line-height:105%;letter-spacing:-.02em}
.stat span{font-size:1.25rem;font-weight:600;opacity:.7;line-height:135%;display:block;margin-top:.4rem}
.stat--or{background:var(--or)}
.stat--acier{background:var(--acier)}
/* .stat span's .7 (4.88:1 on the vert-de-gris tile) is shared by these two
   lighter tiles, where sarcelle text needs more opacity for 4.5:1. Computed
   (sarcelle blended over each tile background, WCAG relative luminance):
   .7 on or -> 4.16:1, on acier -> 3.75:1, both fail; .75 on or -> 4.67:1,
   .8 on acier -> 4.70:1. */
.stat--or span{opacity:.75}
.stat--acier span{opacity:.8}

/* ---------- Avis ---------- */
.avis{background:rgba(255,193,39,.13);border:1.5px solid rgba(255,193,39,.35);border-radius:var(--r2);padding:1.6rem 1.8rem;margin-bottom:2rem}
.avis b{display:block;font-size:1.5rem;font-weight:600;margin-bottom:.5rem;color:var(--or)}
.avis p{font-size:1.35rem;opacity:.75;line-height:150%}
.avis--info{background:rgba(148,201,234,.12);border-color:rgba(148,201,234,.32)}
.avis--info b{color:var(--acier)}
.conditions p{margin:0 0 .8rem;line-height:150%}

.vide{text-align:center;padding:5rem 2rem;opacity:.6;font-size:1.5rem;line-height:155%}

/* Tableau de fréquentation (tableau de bord SDC) */
.freq{width:100%;border-collapse:collapse;margin-bottom:.8rem}
.freq th,.freq td{padding:1rem .6rem;text-align:right;font-size:1.4rem;border-bottom:1px solid rgba(215,255,215,.1)}
.freq thead th{font-size:1.15rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;opacity:.6;text-align:right}
.freq tbody th{text-align:left;font-weight:600}
.freq tbody td{font-variant-numeric:tabular-nums;font-weight:600}
.freq tr:last-child td,.freq tr:last-child th{border-bottom:0}
.freq-note{font-size:1.3rem;opacity:.6;line-height:155%;margin-bottom:.6rem}

/* ---------- Navigation ---------- */
.nav{display:flex;border-top:1.5px solid rgba(215,255,215,.13);background:var(--sarcelle);flex:0 0 auto;padding-bottom:var(--bas);position:relative;z-index:5}
.nav button{flex:1;font-family:inherit;font-size:1.15rem;font-weight:600;background:transparent;border:0;color:var(--vert-de-gris);cursor:pointer;padding:1.5rem .4rem 1.8rem;position:relative;transition:.15s;line-height:130%;-webkit-tap-highlight-color:transparent}
.nav button[aria-current="true"]{color:var(--frontenac)}
/* Dimmed on the icon and label, not the button: the badge stays at full opacity. */
.nav button svg,.nav-libelle{opacity:.6;transition:opacity .15s}
.nav button[aria-current="true"] svg,.nav button[aria-current="true"] .nav-libelle{opacity:1}
.nav button:focus-visible{outline:2px solid var(--or);outline-offset:-3px}
.nav-pastille{position:absolute;top:.2rem;left:calc(50% + .6rem);min-width:1.8rem;height:1.8rem;padding:0 .5rem;border-radius:.9rem;background:var(--or);color:var(--sarcelle);font-size:1.1rem;font-weight:700;line-height:1.8rem;text-align:center}
.nav svg{display:block;margin:0 auto .5rem;width:2.2rem;height:2.2rem;stroke:currentColor;stroke-width:1.8;fill:none;stroke-linecap:round;stroke-linejoin:round}

/* ---------- Bandeau de message ---------- */
.bandeau{position:fixed;left:50%;transform:translateX(-50%) translateY(-8rem);top:calc(1.6rem + var(--haut));z-index:99;background:var(--vert-de-gris);color:var(--sarcelle);padding:1.3rem 2rem;border-radius:var(--r2);font-size:1.45rem;font-weight:600;box-shadow:0 1.2rem 3rem rgba(0,0,0,.35);opacity:0;transition:.28s;max-width:calc(100% - 3rem);text-align:center;line-height:140%}
.bandeau.on{transform:translateX(-50%) translateY(0);opacity:1}
.bandeau.non{background:var(--coquelicot)}

/* ---------- Divers ---------- */
.lien{background:none;border:0;font-family:inherit;font-size:1.4rem;color:var(--vert-de-gris);opacity:.6;text-decoration:underline;cursor:pointer;padding:1.35rem;display:block;margin:1.4rem auto 0}
.lien:hover{opacity:1}
.centre{text-align:center}
/* Fixed, outside the flow: .app has a fixed height, and a banner above it
   would push the bottom bar off the screen. The headers move down instead.
   Shown by body.deconnecte, which main.js sets on 'offline'. */
.hors-ligne{position:fixed;top:0;left:50%;transform:translateX(-50%);width:100%;max-width:52rem;z-index:6;
  background:var(--or);color:var(--sarcelle);font-size:1.3rem;font-weight:600;text-align:center;
  line-height:140%;padding:calc(.8rem + var(--haut)) 1.6rem .8rem;display:none}
body.deconnecte .hors-ligne{display:block}
body.deconnecte .top,body.deconnecte .resultat{padding-top:calc(6.2rem + var(--haut))}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .sceau circle,.sceau path{stroke-dashoffset:0}
}
.preuve-doc{display:block;width:100%;height:auto;border-radius:var(--r2);margin-bottom:1.2rem}
.passe-numero{font-size:1.3rem;letter-spacing:.06em;opacity:.8;margin-top:.2rem}
.res-numero{font-size:3.2rem;font-weight:700;letter-spacing:.06em;margin:.2rem 0 1rem}
.consentement p{margin-bottom:.4rem}
.consentement .ligne-meta{opacity:.95}