/* Les deux encres de la maison sont celles du logo, relevees dans le fichier. La declaration
   que pose l'habillage vient apres celle-ci et la recouvre ; ces valeurs-la sont ce que la
   feuille montre toute seule, si elle est servie sans le site autour. */
:root{--rouge:#b8152d;--rouge-fonce:#991125;--bleu:#004c8d;--encre:#333;--gris:#666;
--gris-clair:#f4f4f4;--bord:#e2e2e2;--vert:#1DAE22;--blanc:#fff;--rayon:6px}
*{box-sizing:border-box}
body{margin:0;font-family:Quicksand,system-ui,sans-serif;color:#595959;font-size:14.4px;
background:var(--blanc);line-height:1.8}
h1,h2,h3{font-family:Montserrat,Quicksand,sans-serif;font-weight:600;color:var(--encre);line-height:1.25}
a{color:var(--rouge);text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%;height:auto;display:block}
.entete{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;flex-wrap:wrap;
padding:1rem 1.5rem;border-bottom:3px solid var(--rouge);max-width:1000px;margin:0 auto}
.logo img{max-height:70px;width:auto}
.menu{display:flex;gap:1.5rem;align-items:center;font-weight:600;text-transform:uppercase;
letter-spacing:.04em;font-size:.86rem}
.menu a{color:var(--encre)}
.menu a:hover{color:var(--rouge)}
.pastille{background:var(--rouge);color:#fff;border-radius:999px;padding:.1rem .5rem;font-size:.78rem}
.contenu{max-width:1000px;margin:0 auto;padding:2rem 1.5rem;min-height:60vh}
.banniere{text-align:center;padding:2rem 0 2.5rem;border-bottom:1px solid var(--bord);margin-bottom:2.5rem}
.banniere h1{font-size:2.4rem;margin:0 0 .4rem;color:var(--rouge)}
.banniere p{color:var(--gris);margin:0;font-size:1.05rem}
.grille{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:1.8rem}
.carte{border:1px solid var(--bord);border-radius:var(--rayon);padding:1rem;text-align:center;
display:flex;flex-direction:column;gap:.6rem;transition:box-shadow .18s,transform .18s}
.carte:hover{box-shadow:0 6px 20px rgba(0,0,0,.09);transform:translateY(-2px)}
.carte img{height:190px;object-fit:contain;margin:0 auto}
.carte h2{font-size:1rem;margin:.3rem 0;color:var(--encre)}
.prix{color:var(--rouge);font-weight:700;font-size:1.1rem;margin:0}
.prix.gros{font-size:1.7rem}
.prix s{color:var(--gris);font-weight:400;font-size:.9rem}
.bouton{display:inline-block;background:var(--rouge);color:#fff;padding:.6rem 1.3rem;border:0;
border-radius:var(--rayon);font:inherit;font-weight:600;cursor:pointer;text-align:center}
.bouton:hover{background:var(--rouge-fonce);text-decoration:none;color:#fff}
.bouton.gros{padding:.85rem 1.8rem;font-size:1.02rem}
.lien{background:none;border:0;color:var(--rouge);cursor:pointer;font:inherit;text-decoration:underline;padding:0}
.rupture{color:var(--gris);font-style:italic;font-size:.92rem}
/* Sur commande : l'article n'est pas en stock mais il s'achete. L'etiquette doit se
   distinguer d'une rupture — elle annonce une attente, pas un refus. */
.sur-commande{display:inline-block;margin-left:.5rem;padding:.12rem .5rem;border-radius:999px;
  background:#fdf0f0;color:var(--rouge-fonce);font-size:.8rem;font-weight:600;letter-spacing:.02em}
.sur-commande-avis{background:#fdf0f0;border-left:3px solid var(--rouge);padding:.7rem .9rem;
  margin:.8rem 0;font-size:.95rem;color:var(--encre);border-radius:var(--rayon)}
.fiche{display:grid;grid-template-columns:minmax(280px,1fr) 1fr;gap:2.5rem;align-items:start}
.galerie{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:.8rem}
.galerie img{width:78px;height:78px;object-fit:cover;border:1px solid var(--bord);border-radius:4px}
.resume{color:var(--gris)}
.achat{display:flex;flex-direction:column;gap:.8rem;max-width:340px;margin:1.4rem 0;
background:var(--gris-clair);padding:1.1rem;border-radius:var(--rayon)}
.achat label{display:flex;flex-direction:column;gap:.25rem;font-weight:600;font-size:.9rem}
input,select{font:inherit;padding:.55rem;border:1px solid var(--bord);border-radius:4px;background:#fff;max-width:100%}
input:focus,select:focus{outline:2px solid var(--rouge);outline-offset:1px}
/* Safari (iPhone) compte le texte de l'option la plus longue d'une liste dans la largeur de la
   page, meme quand la liste est bornee a l'ecran : la page defilait de cote (espace fournisseur,
   fiche produit, editeur de blocs). La liste contient desormais sa mise en page : ce qui deborde
   d'elle ne pousse plus rien. Seules les listes dans un libelle, pour ne rien changer ailleurs. */
label select{contain:layout}
.description{margin-top:1.6rem;line-height:1.75}
.description img{margin:1rem 0;border-radius:var(--rayon)}
.tableau{width:100%;border-collapse:collapse;margin:1.2rem 0}
.tableau th,.tableau td{padding:.65rem .5rem;border-bottom:1px solid var(--bord);text-align:left;font-size:.94rem}
.tableau th{font-family:Montserrat,sans-serif;font-size:.78rem;text-transform:uppercase;
letter-spacing:.05em;color:var(--gris)}
.tableau tr.total td{font-weight:700;border-top:2px solid var(--rouge);border-bottom:0;font-size:1.05rem}
.formulaire{display:flex;flex-direction:column;gap:.9rem;max-width:520px;margin-top:1.5rem}
.formulaire.etroit{max-width:340px}
.formulaire label{display:flex;flex-direction:column;gap:.25rem;font-weight:600;font-size:.9rem}
fieldset{border:1px solid var(--bord);border-radius:var(--rayon);padding:1rem;min-width:0}
legend{font-weight:600;padding:0 .4rem;font-size:.9rem}
.radio{flex-direction:row!important;align-items:center;gap:.5rem;font-weight:400!important}
.note{font-size:.85rem;color:var(--gris)}
.alerte{background:#fdecea;border-left:4px solid var(--rouge);padding:.8rem 1rem;border-radius:4px}
.succes{background:#eaf7ea;border-left:4px solid var(--vert);padding:.8rem 1rem;border-radius:4px}
.chiffres{font-size:1.05rem;font-weight:600}
.pied{border-top:3px solid var(--rouge);margin-top:3rem;padding:2rem 1.5rem;text-align:center;
color:var(--gris);font-size:.9rem;background:var(--gris-clair)}
.devise{font-family:Montserrat,serif;font-style:italic;color:var(--rouge);font-size:1.1rem;margin:0 0 .5rem}
.mentions{font-size:.8rem;margin-top:.8rem}
.page-age{display:flex;align-items:center;justify-content:center;min-height:100vh;
background:var(--gris-clair);margin:0;padding:1rem}
.porte{background:#fff;padding:2.5rem;border-radius:10px;max-width:440px;width:100%;text-align:center;
box-shadow:0 8px 30px rgba(0,0,0,.12);border-top:5px solid var(--rouge)}
.porte img{width:74px;margin:0 auto 1rem}
.porte form{display:flex;flex-direction:column;gap:.9rem;margin-top:1.4rem}
.porte input[type=text]{font-size:1.35rem;text-align:center;letter-spacing:.1em;padding:.7rem;min-width:0}
@media(max-width:760px){.porte{padding:1.8rem 1.4rem}}
.porte .alerte{text-align:left;margin:1rem 0 0}
.cache{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media(max-width:760px){.fiche{grid-template-columns:1fr}.entete{justify-content:center}
.banniere h1{font-size:1.8rem}}
/* ==================== back-office : la coque d'administration ====================
   Tout est scope sous .admin-body : le site public n'est jamais touche. La barre laterale
   est FIXE et defile toute seule ; le contenu defile de son cote. Deux habillages possibles
   (clair par defaut, sombre via data-skin="sombre") ; les jetons changent, pas la structure. */
.admin-body{
  --fond:#f5f6f8; --carte:#fff; --rayon-a:10px; --rail-l:258px;
  --ombre-a:0 1px 2px rgba(16,24,40,.06),0 1px 3px rgba(16,24,40,.08);
  /* habillage CLAIR (defaut) */
  --nav-fond:#fff; --nav-bord:var(--bord); --nav-titre:#9aa1ac;
  --nav-lien:#3a4048; --nav-hover-fond:#f0f1f4; --nav-hover:#111;
  --nav-actif-fond:#fbe9ec; --nav-actif:var(--rouge); --nav-barre:var(--rouge);
  --nav-marque-fond:#fff; --nav-marque:var(--bleu);
  margin:0;background:var(--fond);color:#2b2f36;line-height:1.5;font-size:14px;
  font-family:Montserrat,system-ui,sans-serif;-webkit-font-smoothing:antialiased}
.admin-body[data-skin="sombre"]{
  --nav-fond:#0e2742; --nav-bord:#0b1f34; --nav-titre:#6f88a6;
  --nav-lien:#c6d2e2; --nav-hover-fond:#173857; --nav-hover:#fff;
  --nav-actif-fond:#1e4f80; --nav-actif:#fff; --nav-barre:var(--rouge);
  --nav-marque-fond:#0b1f34; --nav-marque:#fff}
.admin-shell{display:flex;min-height:100vh}

/* --- barre laterale --- */
.admin-rail{position:fixed;top:0;left:0;width:var(--rail-l);height:100vh;display:flex;flex-direction:column;
  background:var(--nav-fond);border-right:1px solid var(--nav-bord);z-index:30;transition:transform .18s ease}
.admin-marque{display:flex;align-items:center;gap:.6rem;padding:.9rem 1.1rem;background:var(--nav-marque-fond);
  border-bottom:1px solid var(--nav-bord);flex:0 0 auto}
.admin-marque:hover{text-decoration:none}
.admin-marque .avion{width:30px;height:30px;flex:0 0 auto}
.admin-marque b{font-weight:800;letter-spacing:.18em;font-size:.92rem;color:var(--nav-marque);display:block}
.admin-marque small{font-size:.64rem;letter-spacing:.05em;color:var(--nav-titre);font-weight:600}
.admin-liens{flex:1 1 auto;overflow-y:auto;padding:.55rem .6rem 1.4rem;scrollbar-width:thin}
.admin-liens::-webkit-scrollbar{width:8px}
.admin-liens::-webkit-scrollbar-thumb{background:rgba(120,130,145,.35);border-radius:8px}
.admin-groupe{margin-top:.95rem}.admin-groupe:first-child{margin-top:.15rem}
.admin-groupe h4{font-size:.66rem;text-transform:uppercase;letter-spacing:.09em;color:var(--nav-titre);
  font-weight:700;margin:0;padding:.2rem .85rem .3rem}
.admin-rail a{display:flex;align-items:center;padding:.46rem .85rem;border-radius:8px;color:var(--nav-lien);
  font-weight:600;font-size:.88rem;position:relative;transition:background .12s,color .12s}
.admin-rail a:hover{background:var(--nav-hover-fond);color:var(--nav-hover);text-decoration:none}
.admin-rail a.actif{background:var(--nav-actif-fond);color:var(--nav-actif);font-weight:700;
  box-shadow:inset 3px 0 0 var(--nav-barre)}
.admin-rail a .n{margin-left:auto;background:var(--rouge);color:#fff;border-radius:999px;font-size:.7rem;
  padding:.02rem .42rem;font-weight:700;line-height:1.5}
.admin-rail a.admin-fort{font-weight:800}

/* --- zone principale --- */
.admin-principal{flex:1 1 auto;margin-left:var(--rail-l);min-width:0;display:flex;flex-direction:column;transition:margin-left .18s ease}
.admin-topbar{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:1rem;
  background:rgba(255,255,255,.92);backdrop-filter:saturate(180%) blur(8px);
  border-bottom:1px solid var(--bord);padding:.6rem 1.5rem}
.admin-burger{display:inline-flex;align-items:center;justify-content:center;border:0;background:transparent;font-size:1.25rem;line-height:1;cursor:pointer;color:var(--gris);padding:.25rem .5rem;border-radius:8px}
.admin-burger:hover{background:var(--gris-clair);color:var(--encre)}
.admin-fil{font-size:.9rem;color:var(--gris);font-weight:700}
.admin-droite{margin-left:auto;display:flex;align-items:center;gap:.5rem}
.admin-lien{font-size:.82rem;font-weight:600;color:var(--gris);padding:.35rem .55rem;border-radius:7px}
.admin-lien:hover{background:var(--gris-clair);color:var(--encre);text-decoration:none}
.admin-sortie{color:var(--rouge)}
.admin-lien{white-space:nowrap}
.admin-court{display:none}
.admin-compte{display:inline-flex;align-items:center;gap:.45rem;padding:.28rem .6rem;border:1px solid var(--bord);
  border-radius:999px;font-size:.8rem;font-weight:600;background:#fff;max-width:260px}
.admin-compte .rond{width:22px;height:22px;border-radius:50%;background:var(--bleu);color:#fff;display:grid;
  place-items:center;font-size:.72rem;font-weight:800;flex:0 0 auto}
.admin-compte .qui{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:130px}
.admin-compte .rang{background:var(--rouge);color:#fff;border-radius:5px;padding:.02rem .34rem;font-size:.64rem;font-weight:800;flex:0 0 auto}
.admin-corps{min-width:0;padding:1.5rem 1.6rem 3rem;width:100%}
/* Les ecrans d'administration occupent TOUTE la largeur : les formulaires du back-office ne
   sont plus brides a 520/900 px comme ceux du site public (ou une colonne etroite se lit
   mieux). Le site public, lui, garde ses largeurs : ces regles sont scopees a l'admin. */
.admin-corps .formulaire,.admin-corps .formulaire.large{max-width:none}
.admin-corps h1{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;font-size:1.5rem;margin:.1rem 0 1.2rem}
.admin-corps h1 .bouton{font-size:.85rem;padding:.45rem 1rem}
.admin-corps h2{font-size:1.1rem;margin:1.6rem 0 .6rem}
/* les tableaux et grilles du back-office poses sur une carte blanche, plus lisibles */
.admin-corps .tableau{background:var(--carte);border:1px solid var(--bord);border-radius:var(--rayon-a);
  box-shadow:var(--ombre-a);overflow:hidden}
.admin-corps .tableau th{background:#fafbfc;text-transform:uppercase;font-size:.7rem;letter-spacing:.05em;color:var(--gris)}
.admin-corps .tableau tbody tr:hover{background:#fafbfc}
/* REPLI a volonte : plie par le bouton du bandeau, l'etat est garde d'une page a l'autre */
body.rail-plie .admin-rail{transform:translateX(-100%)}
body.rail-plie .admin-principal{margin-left:0}
@media(max-width:860px){
  .admin-rail{transform:translateX(-100%);transition:transform .2s;box-shadow:0 0 40px rgba(0,0,0,.3)}
  body.rail-ouvert .admin-rail{transform:none}
  /* le tiroir ouvert assombrit la page ; toucher a cote le referme (editeur.js) */
  body.rail-ouvert::after{content:"";position:fixed;inset:0;z-index:25;background:rgba(10,20,35,.45)}
  .admin-principal{margin-left:0}
  .admin-burger{display:inline-block}
  .admin-corps{padding:1.1rem}
  .admin-topbar{padding:.5rem .9rem;gap:.6rem}
}
/* La barre du haut tient dans un telephone : « Site ↗ », la pastille sans le nom, « Sortir ». */
@media(max-width:600px){
  .admin-fil,.admin-compte .qui,.admin-long{display:none}
  .admin-court{display:inline}
  .admin-droite{gap:.25rem}
  .admin-lien{padding:.35rem .4rem}
}
/* Chaque tableau est pose dans un cadre (gabarits) : plus large que l'ecran, il defile DANS
   son cadre et la page ne bouge plus de cote ; plus etroit, il garde toute la largeur. */
.tableau-cadre{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%;margin:1.2rem 0}
.tableau-cadre>table.tableau{margin:0}
/* Dans l'administration, un paragraphe de note ne s'etire pas sur toute la largeur d'un grand ecran. */
.admin-corps p.note,.admin-corps>p{max-width:95ch}
.tuiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1rem;margin:1rem 0 2rem}
.tuile{background:var(--gris-clair);border-radius:var(--rayon);padding:1rem;text-align:center;color:var(--gris);font-size:.85rem;text-transform:uppercase;letter-spacing:.05em}
.tuile span{display:block;font-size:1.8rem;font-weight:700;color:var(--encre);font-family:Montserrat,sans-serif}
.tuile.attention span{color:var(--rouge)}
.admin-corps .tuiles{grid-template-columns:repeat(auto-fit,minmax(170px,1fr))}
.admin-corps .tuile{background:var(--carte);border:1px solid var(--bord);border-radius:var(--rayon-a);
  box-shadow:var(--ombre-a);text-align:left;color:var(--gris);padding:1.05rem 1.15rem}
.admin-corps .tuile span{font-size:1.9rem;letter-spacing:-.02em;margin-top:.2rem}
.formulaire.large{max-width:900px}.formulaire.ligne{flex-direction:row;align-items:center;flex-wrap:wrap}
.deux-colonnes{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:.9rem 1.5rem}
.deux-colonnes>*{min-width:0}
textarea{font:inherit;padding:.55rem;border:1px solid var(--bord);border-radius:4px;width:100%}
.mini{width:44px;height:44px;object-fit:cover;border-radius:4px}.apercu{max-height:160px;border:1px solid var(--bord);border-radius:4px}
.editeur{border:1px solid var(--bord);border-radius:var(--rayon);overflow:hidden}
.editeur .barre{display:flex;gap:.3rem;flex-wrap:wrap;padding:.4rem;background:var(--gris-clair);border-bottom:1px solid var(--bord)}
.editeur .barre button{font:inherit;font-size:.82rem;padding:.3rem .6rem;border:1px solid var(--bord);background:#fff;border-radius:4px;cursor:pointer}
.editeur .barre button:hover{border-color:var(--rouge);color:var(--rouge)}
.editeur .zone{min-height:220px;padding:1rem;outline:none;line-height:1.65}.editeur .zone:focus{box-shadow:inset 0 0 0 2px var(--rouge)}
.editeur .zone img{max-width:320px}
.danger{color:#b00020}.bouton.danger{background:#b00020;color:#fff}.zone-danger{margin-top:2.5rem;padding-top:1rem;border-top:1px dashed var(--bord)}
.inline{display:inline}.lien.danger{margin-left:.6rem}
.statut-en_attente{color:var(--gris)}.statut-payee{color:var(--vert);font-weight:600}.statut-expediee{color:#0a6ebd;font-weight:600}.statut-annulee{color:#b00020}
.grille-medias{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:1rem;margin-top:1.5rem}
.grille-medias figure{margin:0;border:1px solid var(--bord);border-radius:var(--rayon);padding:.5rem;font-size:.78rem;text-align:center;min-width:0;overflow-wrap:anywhere}
.grille-medias img{height:110px;width:100%;object-fit:cover;border-radius:4px}
.grille-medias code{font-size:.7rem;word-break:break-all}
@media(max-width:860px){.deux-colonnes{grid-template-columns:1fr}}
/* ---- blocs ---- */
.bloc{margin:0 0 2rem}.bloc-int{max-width:1000px;margin:0 auto}
.bloc.largeur-pleine{margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);padding:0 1.5rem}
.bloc.fond-gris{background:var(--gris-clair);padding:2rem 1.5rem;border-radius:var(--rayon)}
.bloc.fond-principal{background:var(--rouge);color:#fff;padding:2rem 1.5rem;border-radius:var(--rayon)}
.bloc.fond-principal h1,.bloc.fond-principal h2,.bloc.fond-principal h3,.bloc.fond-principal a{color:#fff}
.bloc.largeur-pleine.fond-gris,.bloc.largeur-pleine.fond-principal{border-radius:0}
.bloc .texte{line-height:1.75}.bloc .texte img{border-radius:var(--rayon);margin:1rem 0}
.image-texte{display:grid;grid-template-columns:var(--ratio-image,50%) 1fr;gap:2rem;align-items:center}
.image-texte figure{margin:0}.image-texte img{width:100%;height:auto}
.image-texte.pos-droite{grid-template-columns:1fr var(--ratio-image,50%)}
.image-texte.pos-droite .it-media{order:2}
.it-media{text-align:center}.it-media img{max-width:100%;width:auto;display:inline-block}
.it-titre{margin:0 0 .8rem}.it-sous{margin:0 0 .8rem;font-weight:400}
.bloc.fond-couleur{padding:80px 0}
.bloc.fond-couleur .it-texte,.bloc.fond-couleur .it-texte p,.bloc.fond-couleur .it-texte li{color:#fff}
.bloc-bandeau.fond-couleur{padding:65px 0}
.bloc-bandeau.fond-couleur .bandeau h2,.bloc-bandeau.fond-couleur .bandeau p{color:#fff}
.bloc-bandeau.fond-couleur .bandeau h2 a{color:inherit;text-decoration:none}
.bandeau.al-gauche{text-align:left}.bandeau.al-droite{text-align:right}
.mini-diapo{position:relative;display:inline-block;max-width:100%}
.mini-diapo img{display:none;max-width:100%;height:auto}
.mini-diapo img.actif{display:inline-block}
.mini-puces{position:absolute;right:.2rem;bottom:.2rem;display:flex;gap:0}
.mini-puces .puce{--puce:var(--bleu-puce,var(--bleu));--puce-t:10px;--puce-b:1px}
.colonnes{display:grid;grid-template-columns:1fr 1fr;gap:2.5rem}
.bandeau{text-align:center;padding:3rem 1.5rem;border-radius:var(--rayon);background:var(--gris-clair)}
.bandeau.avec-image{background-size:cover;background-position:center;color:#fff;position:relative;min-height:300px;display:flex;align-items:center;justify-content:center}
.bandeau.avec-image::before{content:"";position:absolute;inset:0;background:rgba(0,0,0,.42);border-radius:inherit}
.bandeau-int{position:relative}.bandeau h2{font-size:2.3rem;margin:0 0 .4rem;color:var(--rouge)}
.bandeau.avec-image h2{color:#fff}.bandeau p{font-size:1.08rem;margin:0 0 1.2rem;opacity:.92}
.galerie-bloc{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:.8rem}
.galerie-bloc img{width:100%;height:200px;object-fit:cover;border-radius:var(--rayon)}
.bouton-bloc{margin:0}.bouton-bloc.al-centre{text-align:center}.bouton-bloc.al-droite{text-align:right}
.citation{margin:0;padding:1.5rem 2rem;border-left:5px solid var(--rouge);background:var(--gris-clair);border-radius:0 var(--rayon) var(--rayon) 0;font-family:Montserrat,serif;font-style:italic;font-size:1.25rem}
.citation footer{font-style:normal;font-size:.9rem;color:var(--gris);margin-top:.6rem}
.separateur{border:0;border-top:2px solid var(--bord);width:120px;margin:.5rem auto}
/* editeur de blocs (admin) */
.editeur-blocs{margin:.5rem 0 1.5rem}.bloc-carte{border:1px solid var(--bord);border-radius:var(--rayon);margin-bottom:1rem;background:#fff}
.bloc-tete{display:flex;justify-content:space-between;align-items:center;padding:.5rem .9rem;background:var(--gris-clair);border-bottom:1px solid var(--bord);border-radius:var(--rayon) var(--rayon) 0 0}
.bloc-outils button{font:inherit;border:1px solid var(--bord);background:#fff;border-radius:4px;padding:.15rem .5rem;margin-left:.25rem;cursor:pointer}
.bloc-outils button:hover{border-color:var(--rouge);color:var(--rouge)}
.bloc-options{display:flex;flex-wrap:wrap;gap:.6rem 1.2rem;padding:.5rem .9rem;font-size:.85rem;border-bottom:1px dashed var(--bord)}
.bloc-options label{display:flex;gap:.4rem;align-items:center}.bloc-champs{padding:.9rem;display:flex;flex-direction:column;gap:.8rem}
.bloc-champs label{display:flex;flex-direction:column;gap:.25rem;font-weight:600;font-size:.88rem}
.zone-riche{border:1px solid var(--bord);border-radius:4px;overflow:hidden}.zone-riche .barre{display:flex;gap:.3rem;flex-wrap:wrap;padding:.35rem;background:var(--gris-clair)}
.zone-riche .barre button{font:inherit;font-size:.8rem;padding:.25rem .55rem;border:1px solid var(--bord);background:#fff;border-radius:4px;cursor:pointer}
.zone-riche .zone{min-height:120px;padding:.8rem;outline:none}.zone-riche .zone:focus{box-shadow:inset 0 0 0 2px var(--rouge)}
.ajout select{font:inherit;padding:.55rem .8rem;border:2px dashed var(--rouge);border-radius:var(--rayon);color:var(--rouge);font-weight:600;background:#fff;width:100%}
/* Au telephone, image et texte l'un sous l'autre, l'image d'abord — y compris quand elle est a
   droite : .image-texte.pos-droite (deux classes) primait sur la regle a une classe. */
@media(max-width:760px){.image-texte,.image-texte.pos-droite,.colonnes{grid-template-columns:minmax(0,1fr)}.image-texte.pos-droite .it-media{order:0}}
/* ---- glisser-deposer ---- */
.editeur-blocs.avec-biblio{display:grid;grid-template-columns:minmax(0,1fr) 230px;gap:1.2rem;align-items:start}
.editeur-blocs.avec-biblio>*{min-width:0}
.biblio-panneau{position:sticky;top:1rem;border:1px solid var(--bord);border-radius:var(--rayon);padding:.8rem;background:#fff;max-height:calc(100vh - 2rem);overflow:auto}
.biblio-panneau h3{margin:0 0 .3rem;font-size:1rem}
#biblio{display:grid;grid-template-columns:repeat(3,1fr);gap:.4rem;margin-top:.6rem}
#biblio img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:4px;cursor:grab;border:2px solid transparent}
#biblio img:hover{border-color:var(--rouge)}
.zone-depot{border:2px dashed var(--bord);border-radius:var(--rayon);padding:1rem;text-align:center;color:var(--gris);font-size:.85rem;background:var(--gris-clair)}
.zone-depot.grande{padding:2rem;font-size:1rem;margin:1rem 0}
.survol-depot{outline:3px dashed var(--rouge)!important;outline-offset:2px;background:#fff5f5!important}
.bloc-tete[draggable="true"]{cursor:grab}.bloc-carte.en-deplacement{opacity:.45}
.bloc-carte.cible-haut{box-shadow:0 -4px 0 0 var(--rouge)}.bloc-carte.cible-bas{box-shadow:0 4px 0 0 var(--rouge)}
@media(max-width:900px){.editeur-blocs.avec-biblio{grid-template-columns:minmax(0,1fr)}.biblio-panneau{position:static;max-height:none}#biblio{grid-template-columns:repeat(6,1fr)}}

/* ---- bloc diaporama (accueil) ---- */
.bloc-diaporama .bloc-int{max-width:none}
.diaporama{position:relative;overflow:hidden;border-radius:var(--rayon)}
.bloc-diaporama.largeur-pleine .diaporama{border-radius:0}
.diaporama.h-haut{height:var(--hauteur,min(72vh,620px))}
.diaporama.h-moyen{height:var(--hauteur,min(52vh,420px))}
.diaporama.riche{height:auto;min-height:var(--hauteur,420px)}
.diaporama.riche .diapo{position:relative;inset:auto;display:none;min-height:var(--hauteur,420px)}
.diaporama.riche .diapo.actif{display:flex}
.diapo{position:absolute;inset:0;background-size:cover;background-position:center;
display:flex;align-items:center;justify-content:center;text-align:center;
opacity:0;transition:opacity .8s ease;pointer-events:none}
.diapo.actif{opacity:1;pointer-events:auto}
.diapo::before{content:"";position:absolute;inset:0;background:rgba(0,0,0,var(--voile,.45))}
.diapo-int{position:relative;color:#fff;max-width:760px;padding:1.5rem}
.diapo-int h2{color:#fff;font-size:2.8rem;margin:0 0 .6rem;text-shadow:0 2px 12px rgba(0,0,0,.5)}
.diapo-int p{font-size:1.25rem;margin:0 0 1.4rem;text-shadow:0 1px 8px rgba(0,0,0,.5)}
.diapo-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:2;background:rgba(0,0,0,.35);
color:#fff;border:0;width:44px;height:44px;border-radius:999px;font-size:1.8rem;line-height:1;cursor:pointer}
.diapo-nav:hover{background:var(--rouge)}
.diapo-nav.prec{left:1rem}.diapo-nav.suiv{right:1rem}
.diapo-puces{position:absolute;left:0;right:0;bottom:1rem;z-index:2;display:flex;gap:.5rem;justify-content:center}
/* Les puces : un point de 12 px a l'oeil, une cible de 24 px au doigt (WCAG 2.2, 2.5.8). Le point
   est dessine par ::before ; le bouton garde toute sa surface. */
.diapo-puces{gap:.15rem}
.diapo-puces .puce,.mini-puces .puce{position:relative;width:24px;height:24px;border:0;border-radius:999px;background:transparent;cursor:pointer;padding:0;
  --puce:#fff;--puce-t:12px;--puce-b:2px}
.diapo-puces .puce::before,.mini-puces .puce::before{content:"";position:absolute;left:50%;top:50%;width:var(--puce-t);height:var(--puce-t);
  transform:translate(-50%,-50%);border-radius:999px;border:var(--puce-b) solid var(--puce);box-sizing:border-box}
.diapo-puces .puce.actif::before,.mini-puces .puce.actif::before{background:var(--puce)}
@media(max-width:760px){.diaporama.h-haut,.diaporama.h-moyen{height:min(60vh,440px)}
.diapo-int h2{font-size:1.9rem}.diapo-int p{font-size:1.05rem}}
/* ---- bloc atouts ---- */
.atouts-titre{text-align:center;font-size:2rem;margin:0 0 2rem;color:var(--rouge)}
.atouts{display:grid;gap:1.8rem}
.atouts.par-2{grid-template-columns:repeat(2,1fr)}
.atouts.par-3{grid-template-columns:repeat(3,1fr)}
.atouts.par-4{grid-template-columns:repeat(4,1fr)}
.atout{text-align:center;padding:.5rem}
.atout-ic{display:flex;align-items:center;justify-content:center;width:74px;height:74px;margin:0 auto 1rem;
border-radius:999px;background:var(--gris-clair);color:var(--rouge)}
.atout-ic svg{width:38px;height:38px}
.bloc.fond-principal .atout-ic{background:rgba(255,255,255,.16);color:#fff}
.atout h3{font-size:1.15rem;margin:0 0 .4rem}
.atout p{margin:0;color:var(--gris);font-size:.96rem}
.bloc.fond-principal .atout p{color:rgba(255,255,255,.9)}
@media(max-width:860px){.atouts.par-3,.atouts.par-4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.atouts.par-2,.atouts.par-3,.atouts.par-4{grid-template-columns:1fr}}

/* ---- menu a deux niveaux + panier ---- */
.menu-groupe{position:relative}
.menu .sous-menu{display:none;position:absolute;top:100%;left:0;min-width:200px;background:#fff;border:1px solid var(--bord);
  box-shadow:0 8px 24px rgba(0,0,0,.08);padding:.4rem 0;z-index:20;text-align:left}
.menu .sous-menu a{display:block;padding:.55rem 1.1rem;font-weight:400;text-transform:none;letter-spacing:0;font-size:.95rem;color:var(--gris)}
.menu .sous-menu a:hover{background:var(--gris-clair);color:var(--encre)}
.menu-groupe:hover .sous-menu,.menu-groupe:focus-within .sous-menu{display:block}
.panier-lien{display:inline-flex;align-items:center;position:relative;color:var(--encre)}
.panier-lien svg{width:22px;height:22px}
.panier-lien .pastille{position:absolute;top:-10px;right:-12px;min-width:18px;height:18px;line-height:18px;padding:0 .3rem;font-size:.7rem;text-align:center}
@media(max-width:760px){
  .menu .sous-menu{display:block;position:static;border:0;box-shadow:none;padding:0;background:transparent;text-align:center}
  .menu .sous-menu a{padding:.5rem 0;border-top:1px solid var(--bord)}
  .panier-lien{justify-content:center;padding:.7rem 0;border-top:1px solid var(--bord)}
}
/* ---- journal de bord ---- */
.titre-rubrique{text-align:center;font-size:2.2rem;margin:.5rem 0 1rem}
.rubriques{display:flex;gap:.4rem 1.2rem;justify-content:center;flex-wrap:wrap;margin:0 0 2.2rem;font-size:.85rem;text-transform:uppercase;letter-spacing:.05em}
.rubriques a{color:var(--gris);padding:.3rem 0;border-bottom:2px solid transparent}
.rubriques a.actif,.rubriques a:hover{color:var(--encre);border-color:var(--rouge);text-decoration:none}
.articles{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:2rem}
.article-carte{border:1px solid var(--bord);border-radius:var(--rayon);overflow:hidden;background:#fff;display:flex;flex-direction:column}
.article-vignette{display:block;background:var(--gris-clair);aspect-ratio:16/10;overflow:hidden}
.article-vignette img{width:100%;height:100%;object-fit:cover}
.article-corps{padding:1.1rem 1.2rem 1.3rem;display:flex;flex-direction:column;gap:.5rem}
.article-meta{margin:0;font-size:.8rem;color:var(--gris);text-transform:uppercase;letter-spacing:.05em}
.article-meta a{color:var(--gris)}
.article-corps h2{margin:0;font-size:1.25rem;line-height:1.3}.article-corps h2 a{color:var(--encre)}
.article-corps p{margin:0;color:var(--gris);font-size:.95rem}
.article-corps .lire{margin-top:auto;font-weight:600;font-size:.9rem}
.article{max-width:860px;margin:0 auto}
.article-tete{text-align:center;margin:0 0 1.6rem}.article-tete h1{font-size:2.2rem;margin:.3rem 0 0}
.article-image{margin:0 0 2rem}.article-image img{width:100%;border-radius:var(--rayon)}
.article-retour{margin-top:3rem;text-align:center}
/* ---- bloc image ---- */
.image-bloc{margin:0;display:flex;flex-direction:column;gap:.5rem}
.image-bloc.al-centre{align-items:center;text-align:center}.image-bloc.al-droite{align-items:flex-end}.image-bloc.al-gauche{align-items:flex-start}
.image-bloc img{border-radius:var(--rayon)}
.image-bloc.t-petite img{max-width:320px}.image-bloc.t-moyenne img{max-width:640px}.image-bloc.t-grande img{max-width:100%}
.image-bloc figcaption{font-size:.88rem;color:var(--gris)}
/* ---- bloc formulaire ---- */
.formulaire-bloc{max-width:620px;margin:0 auto}
.formulaire-bloc h2{text-align:center;margin:0 0 .8rem}.formulaire-bloc .intro{color:var(--gris);text-align:center;margin:0 0 1rem}
.formulaire-bloc .formulaire{max-width:none;margin-top:1rem}.formulaire-bloc textarea{font:inherit}
/* ---- bloc carte ---- */
.carte-bloc h2{text-align:center;margin:0 0 1rem}
.carte-bloc iframe{display:block;width:100%;border:0;border-radius:var(--rayon)}
/* ---- atouts avec lien / couleur ---- */
.atouts{--atout-couleur:var(--encre)}
.atout-lien{text-decoration:none;color:inherit}.atout-lien:hover{text-decoration:none}
.atout-lien .atout-ic{color:var(--atout-couleur)}.atout-lien:hover .atout-ic{opacity:.75}
.atouts .atout-ic{color:var(--atout-couleur)}
/* ---- admin messages ---- */
.tableau tr.non-lu td{font-weight:600;background:#fff8f0}.message-texte{white-space:pre-wrap;max-width:420px;font-weight:400}

/* ---- alignements conserves depuis l'ancien site (seules classes admises dans le texte saisi) ---- */
.al-gauche{text-align:left}.al-centre{text-align:center}.al-droite{text-align:right}
/* ---- vue de diaporama a texte riche : titres et paragraphes, mesures du bloc (--titre, --texte, --largeur-texte) ---- */
.diapo-riche{text-align:left;width:100%;max-width:var(--largeur-texte,912px);padding:6rem 2.5rem}
.diapo-riche h2,.diapo-riche h3,.diapo-riche h4,.diapo-riche h5,.diapo-riche h6{color:#fff;font-size:min(var(--titre,2.4rem),9vw);font-weight:300;line-height:1.2;margin:0 0 .45em;text-shadow:0 1px 2px rgba(0,0,0,.5)}
.diapo-riche p{color:#fff;font-size:min(var(--texte,1.05rem),5vw);line-height:1.55;margin:0 0 .9em;text-shadow:0 1px 2px rgba(0,0,0,.35)}
.diapo-riche > :last-child{margin-bottom:0}
.diapo-riche .bouton{margin-top:.8rem}
@media(max-width:760px){.diapo-riche{padding:1.4rem 2.6rem 2.6rem}
.bloc-diaporama .diaporama.riche{height:auto}
.bloc-diaporama .diaporama.riche .diapo{position:relative;inset:auto;display:none;min-height:min(var(--hauteur,440px),60vh)}
.bloc-diaporama .diaporama.riche .diapo.actif{display:flex}}

/* ---- lot fidelite : boutons a contour (style de l'ancien site), diaporama naturel, contenu ---- */
.bouton-bloc{display:flex;gap:30px;justify-content:center;align-items:stretch;flex-wrap:wrap}
.bouton-bloc.al-gauche{justify-content:flex-start}.bouton-bloc.al-droite{justify-content:flex-end}
.bouton-bloc .bouton.contour{background:transparent;border:2px solid var(--bouton-couleur,var(--bleu));color:var(--bouton-couleur,var(--bleu));
border-radius:3.6px;font-size:.9rem;line-height:1.5;padding:1.1em 1.4em;text-transform:none;letter-spacing:0;
display:flex;align-items:center;justify-content:center;gap:.5em;text-align:center}
.bouton-bloc.par-2 .bouton.contour,.bouton-bloc.par-3 .bouton.contour,.bouton-bloc.par-4 .bouton.contour{flex:1 1 0;max-width:340px}
@media(max-width:760px){.bouton-bloc{gap:14px}.bouton-bloc.par-2 .bouton.contour,.bouton-bloc.par-3 .bouton.contour,.bouton-bloc.par-4 .bouton.contour{flex:1 1 100%}}
.bouton-bloc .bouton.contour:hover{background:var(--bouton-couleur,var(--bleu));color:#fff}
.bouton-ic{display:inline-flex;width:1em;height:1em;flex:none}.bouton-ic svg{width:100%;height:100%}
.diaporama.naturel{height:auto}
.diaporama.naturel .diapo{position:relative;inset:auto;display:none;background:none;text-align:center;opacity:1;pointer-events:auto}
.diaporama.naturel .diapo.actif{display:block}
.diaporama.naturel .diapo::before{display:none}
.diaporama.naturel img{max-width:100%;height:auto}
.diaporama.naturel .diapo-puces{justify-content:flex-end;padding-right:.6rem;bottom:.6rem}
.diaporama.naturel .diapo-puces .puce{--puce:var(--bleu-puce,var(--bleu));--puce-t:10px}
.diaporama.naturel .diapo-nav{background:transparent;color:var(--bleu-puce,var(--bleu));font-size:1.8rem}
.bandeau-trait{display:block;width:10%;min-width:56px;height:1px;background:#333;margin:1rem auto 0}
.bandeau.al-gauche .bandeau-trait{margin-left:0}.bandeau.al-droite .bandeau-trait{margin-right:0}
.texte h5{font-size:18px;font-weight:400;margin:0 0 .9em}
.texte h6{font-size:16px;font-weight:400;margin:0 0 .9em}
.atouts.cote-droite{margin-left:auto}
.commentaires{margin-top:3rem}
.commentaires h3{font-size:.95rem;text-transform:uppercase;letter-spacing:.04em;font-weight:600;margin:0 0 .6rem}
.commentaires p{font-size:.9rem}

/* ---- lot habillage : volets image mesures, images de colonnes, formulaire gris de l'ancien site ---- */
.diaporama.naturel .diapo img{max-height:var(--hauteur,none)}
.diaporama.naturel{min-height:0}
.mini-diapo img{max-height:var(--hauteur-media,none)}
.it-media figure{margin:0}
.it-media img.t-petite{max-width:min(150px,100%)}.it-media img.t-moyenne{max-width:min(300px,100%);max-height:300px}.it-media img.t-grande{max-width:100%}
.formulaire-bloc h2{text-align:left;font-size:22px;font-weight:400;color:#595959;margin:0 0 1rem}
.formulaire-bloc .formulaire{max-width:none;background:#f2f2f2;border:1px solid #c0c0c0;padding:10px;gap:.7rem}
.formulaire-bloc .form-note{margin:.2rem 0 .4rem;font-size:14.4px}
.formulaire-bloc label{font-weight:700;font-size:14.4px;color:#595959;gap:.35rem}
.formulaire-bloc input[type=text],.formulaire-bloc input[type=email],.formulaire-bloc input:not([type]),.formulaire-bloc textarea{background:#fff;border:1px solid #c0c0c0;border-radius:0;font-size:13.4px}
.formulaire-bloc select{width:auto;min-width:195px;background:#efefef;border:1px solid #c0c0c0;border-radius:0;font-size:14.4px;padding:.15rem .3rem}
.bouton-form{align-self:flex-start;font:inherit;font-size:12.24px;font-weight:500;color:#5a5a5a;background:#efefef;
border:1px solid #98999c;border-radius:2px;padding:.5rem 1.1rem;cursor:pointer}
.bouton-form:hover{background:#e2e2e2}
.carte-bloc h2{text-align:left;font-size:22px;font-weight:400;color:#595959;margin:0 0 1.2rem}
.commentaires .succes,.commentaires .alerte{margin-top:.6rem}

/* ---- finitions mesurees sur l'ancien site ---- */
.diaporama.naturel .diapo img{display:inline-block;margin:0 auto}
.it-media figure{text-align:left}
.articles-flux .article-flux{margin-bottom:3.5rem}

/* ---- fiche produit fidele a l'ancien site : prix, promo, onglets, bouton violet ---- */
.fiche-tete{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;flex-wrap:wrap}
.fiche-tete h1{font-size:23px;color:#292929;font-weight:400;margin:0}
.fiche-tete .prix{font-size:17.28px;font-weight:400;margin:0}
.prix s{color:#8a8a8a;margin-right:.35rem}
.fiche-meta{font-size:11.52px;color:#8a8a8a;margin:.3rem 0 1rem}
.fiche-meta .fiche-cat{margin-left:1rem}
.visuel{position:relative}
.promo{position:absolute;top:.6rem;left:.6rem;z-index:2;background:var(--rouge);color:#fff;
font-size:.8rem;padding:.25rem .7rem;border-radius:999px}
.carte .promo{top:.4rem;left:.4rem}
.carte-visuel{position:relative;display:block}
.bouton-achat{align-self:flex-start;font:inherit;font-size:12.24px;font-weight:600;letter-spacing:.04em;
text-transform:uppercase;color:#fff;background:var(--rouge);border:0;border-radius:var(--rayon);padding:.75rem 1.6rem;cursor:pointer}
.bouton-achat:hover{background:var(--rouge-fonce)}
.onglets{margin-top:1.8rem;border-bottom:1px solid var(--bord);display:flex;gap:.3rem}
.onglet{font:inherit;font-size:12.96px;padding:.55rem 1rem;border:1px solid var(--bord);border-bottom:0;
background:#fff;color:#292929;cursor:pointer;border-radius:4px 4px 0 0}
.onglet.actif{background:var(--rouge);color:#fff;border-color:var(--rouge)}
.onglet-panneau{display:none}
.onglet-panneau.actif{display:block}
.onglet-panneau h2{font-size:19px;font-weight:400;margin:1.2rem 0 .6rem}
.infos-produit th{width:160px;text-transform:none;letter-spacing:0;font-size:.94rem;color:#595959}
.retour-boutique{display:inline-block;margin-top:.4rem}

/* ---- Refueling : ventes suspendues, message a la place des produits et du panier ---- */
.refueling{margin:2.5rem auto;padding:1.4rem 1.6rem;max-width:760px;text-align:center;
background:var(--gris-clair);border-left:4px solid var(--rouge);border-radius:var(--rayon);
font-size:1.02rem;color:var(--encre);line-height:1.6}
.fiche .refueling{margin:1.4rem 0;text-align:left;max-width:none}

/* ---- porte d'age en voile : la page est servie (les moteurs la lisent), le visiteur ne peut pas
       l'atteindre avant d'avoir confirme son age. Tient sans JavaScript. ---- */
body.sous-porte{overflow:hidden;height:100vh}
.voile-age{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;
padding:1.5rem;background:rgba(244,244,244,.98);overflow:auto}
.voile-age .porte{background:#fff;padding:2.5rem;border-radius:10px;max-width:440px;width:100%;text-align:center;
box-shadow:0 8px 30px rgba(0,0,0,.12);border-top:5px solid var(--rouge)}
.voile-age .porte img{width:74px;margin:0 auto 1rem}
.voile-age .porte h1{font-size:1.9rem;margin:0 0 .6rem}
.voile-age .porte form{display:flex;flex-direction:column;gap:.9rem;margin-top:1.4rem}
.voile-age .porte input[type=text]{font-size:1.35rem;text-align:center;letter-spacing:.1em;padding:.7rem}
.voile-age .porte .alerte{text-align:left;margin:1rem 0 0}
.voile-age .porte .mentions{margin-top:1.2rem}
@media(max-width:760px){.voile-age .porte{padding:1.8rem 1.4rem}}

/* ---- espace client, suivi de commande, file des courriels ---- */
.etroit{max-width:760px;margin:0 auto;padding:0 1rem}
.etroit h1{margin-top:1.4rem}
.etat-commande{font-weight:600;margin:.2rem 0 .6rem}
.commande-carte{border:1px solid #e3e3e3;border-radius:4px;padding:1rem 1.2rem;margin:0 0 1.1rem}
.commande-carte h2{margin:0 0 .2rem;font-size:1.1rem}
.commande-resume{margin:.5rem 0 0;padding-left:1.1rem;color:#595959}
.commande-lignes{width:100%}
.compte-facultatif{margin-top:1rem}
.formulaire .case{display:flex;flex-direction:row;align-items:center;gap:.5rem;font-weight:400}
.formulaire .case input{width:auto;margin:0;flex:0 0 auto}
.pied-compte{margin:0 0 .3rem;font-size:.85rem;text-align:center}
.pied-compte a{color:#8c8c8c;text-decoration:none}
.pied-compte a:hover{text-decoration:underline}
.tableau tr.inactif{opacity:.55}
.etat-en_attente{color:#8a6d00}.etat-envoye{color:var(--vert);font-weight:600}.etat-echec{color:#b00020;font-weight:600}
.tableau form{display:inline;margin:0}

/* ---- file des courriels : colonnes lisibles, erreurs en ligne ---- */
.tableau.courriels td:nth-child(1),.tableau.courriels td:nth-child(2),
.tableau.courriels td:nth-child(4),.tableau.courriels td:nth-child(5){white-space:nowrap}
.tableau.courriels{width:100%}
.tableau.courriels td:nth-child(3){min-width:14rem}
/* Le corps du back-office est une colonne souple : sans min-width:0, un large tableau
   l'elargit au lieu de se laisser faire defiler, et toute la page deborde. */
.admin-corps{min-width:0}
.deroulant-large{overflow-x:auto}
.erreur-ligne{color:#b00020;font-size:.85rem}
.reference-courriel{color:#8c8c8c;font-size:.8rem}

/* ---- pages legales, conditions de vente, stock ---- */
.page-legale h2{font-size:1.15rem;margin:1.6rem 0 .4rem}
.page-legale p,.page-legale li{line-height:1.6}
.formulaire .case.conditions{margin:.6rem 0 .2rem;font-size:.9rem}
.note.retractation{margin:.2rem 0 .9rem}
.pied-legal{margin:0 0 .3rem;font-size:.85rem;text-align:center}
.pied-legal a{color:#8c8c8c;text-decoration:none}
.pied-legal a:hover{text-decoration:underline}
.formulaire textarea{width:100%;font-family:inherit;font-size:.9rem;line-height:1.5;padding:.5rem .6rem;border:1px solid #d5d5d5;border-radius:3px}

/* ---- le module d'edition (SSA) ---- */
.cartes-edition{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:1rem;margin:1.2rem 0 2rem}
.carte-edition{border:1px solid #e3e3e3;border-radius:6px;padding:1rem 1.2rem;background:#fff}
.carte-edition h2{margin:0 0 .4rem;font-size:1.1rem}
.carte-edition p{margin:0 0 .7rem;font-size:.92rem;color:#555}
.carte-edition.a-venir{background:#fafafa;border-style:dashed;color:#777}
.carte-edition.a-venir h2{color:#777}
.rappel-charte{border:1px solid #cddcee;border-left:4px solid #3d72ab;background:#f6f9fd;
  border-radius:6px;padding:.9rem 1.1rem;margin:1.2rem 0}
.rappel-charte p{margin:0 0 .4rem}.rappel-charte p:last-child{margin:0}
.bloc-charte{border:1px solid #e3e3e3;border-radius:6px;padding:.8rem 1.2rem 1rem;margin:0 0 1.2rem}
.bloc-charte legend{font-weight:700;padding:0 .4rem}
.bloc-charte .note{margin:.2rem 0 .8rem}
.bloc-charte input[type=color]{width:4rem;height:2rem;padding:0;border:1px solid #ccc}
.apercus{display:flex;flex-wrap:wrap;gap:.4rem;margin:.6rem 0 1.4rem}
.bouton.petit{padding:.3rem .7rem;font-size:.85rem}
.deux-formulaires{display:flex;flex-wrap:wrap;gap:1.5rem;align-items:flex-start;margin:1.5rem 0}
.deux-formulaires>form{flex:1 1 280px}
.texte-ligne{border-top:1px solid #efefef;padding:.7rem 0}
.texte-ligne:first-child{border-top:0}
.texte-ligne label{display:block;font-weight:700;font-size:.9rem;margin-bottom:.2rem}
.texte-ligne textarea{width:100%;font:inherit;padding:.4rem .5rem;border:1px solid #ccc;border-radius:4px}
.texte-ligne.pose textarea{border-color:#0b6e4f;background:#f6fbf8}
.texte-origine{margin:.3rem 0 0;font-size:.85rem;color:#6b6b6b}
.etiquette-origine{display:inline-block;background:#eee;border-radius:3px;padding:0 .35rem;
  font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:#666;margin-right:.3rem}
.champs-permis{margin:.2rem 0 .6rem;font-size:.88rem}
.champs-permis code{background:#eef4fa;border:1px solid #cddcee;border-radius:3px;
  padding:.05rem .35rem;margin-right:.2rem;font-family:ui-monospace,Menlo,Consolas,monospace}
.corps-message{width:100%;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.9rem;
  padding:.6rem .7rem;border:1px solid #ccc;border-radius:4px;line-height:1.5}
.apercu-message{margin:.5rem 0 0;font-size:.9rem}
.apercu-message summary{cursor:pointer;color:var(--rouge)}
.message-rendu{background:#fafafa;border:1px solid #e3e3e3;border-radius:4px;padding:.8rem 1rem;
  white-space:pre-wrap;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.86rem;
  line-height:1.55;margin:.4rem 0 0}
.message-rendu.origine{background:#fff;color:#666}
.case-charte{display:flex;align-items:center;gap:.5rem;font-weight:400}
.case-charte input{width:auto;margin:0}
.bouton.secondaire{background:#6b6b6b}
.bouton.secondaire:hover{background:#555}
.echantillon{border:1px solid var(--bord);border-radius:var(--rayon);padding:1rem 1.2rem;
  margin:.8rem 0 1.6rem;max-width:44rem}
.formulaire .ligne-serree{display:flex;align-items:center;gap:.4rem;margin:0;flex-wrap:wrap}
form.ligne-serree{display:flex;align-items:center;gap:.4rem;margin:0;flex-wrap:wrap}
form.ligne-serree .case{font-size:.8rem;gap:.25rem}
form.ligne-serree input[type=password]{width:auto}

/* ---- messagerie securisee : les memes bulles des deux cotes ---- */
/* ---- La navigation de l'espace client, en onglets ; au telephone, une rangee qui defile. ---- */
.compte-nav{display:flex;flex-wrap:wrap;gap:.4rem;margin:.2rem 0 1.1rem;padding:0;font-size:.88rem}
.compte-nav a{display:inline-flex;align-items:center;gap:.3rem;min-height:36px;padding:.3rem .8rem;
  border:1px solid var(--bord);border-radius:999px;color:var(--rouge);text-decoration:none;white-space:nowrap;background:#fff}
.compte-nav a:hover{border-color:var(--rouge);text-decoration:none}
.compte-nav a.ici{background:var(--rouge);border-color:var(--rouge);color:#fff;font-weight:700}
@media(max-width:760px){
  .compte-nav{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:.3rem;margin-right:-1rem}
}
.pastille-msg{display:inline-block;background:var(--rouge);color:#fff;border-radius:999px;
  min-width:1.15rem;padding:0 .35rem;font-size:.72rem;line-height:1.15rem;text-align:center;vertical-align:.05rem}
.code-secours{margin:.6rem 0 1rem;text-align:center}
.code-secours code{display:inline-block;background:#f4f4f4;border:1px dashed #bbb;border-radius:4px;
  padding:.7rem 1.1rem;font-size:1.25rem;letter-spacing:.12em;font-family:ui-monospace,Menlo,Consolas,monospace}

.liste-fils{list-style:none;margin:0 0 1.4rem;padding:0}
.fil-carte{border:1px solid #e3e3e3;border-radius:4px;margin-bottom:.5rem}
.fil-carte.a-lire{border-color:var(--rouge)}
.fil-carte a{display:block;padding:.6rem .8rem;text-decoration:none;color:inherit}
.fil-carte a:hover{background:#fafafa}
.fil-sujet{display:block;font-weight:700}
.fil-extrait{display:block;color:#6b6b6b;font-size:.88rem;margin-top:.15rem;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fil-date{display:block;color:#9a9a9a;font-size:.78rem;margin-top:.2rem}

.messagerie{margin:1rem 0 2rem}
.messagerie .fil{max-height:60vh;overflow-y:auto;padding:.6rem;background:#f7f7f7;
  border:1px solid #e3e3e3;border-radius:4px}
.fil-jour{text-align:center;color:#8c8c8c;font-size:.75rem;margin:.9rem 0 .5rem;
  text-transform:lowercase;letter-spacing:.03em}
.fil-vide{text-align:center;color:#8c8c8c;font-size:.88rem;margin:1.5rem 0}
.bulle{max-width:min(78%,32rem);margin:.35rem 0;padding:.5rem .7rem;border-radius:12px;
  background:#fff;border:1px solid #e3e3e3}
.bulle.moi{margin-left:auto;background:var(--vert);border-color:var(--vert);color:#fff}
.bulle.eux{margin-right:auto}
.bulle.en-vol{opacity:.6}
.bulle.echoue{background:#b00020;border-color:#b00020;color:#fff}
.bulle-nom{margin:0 0 .15rem;font-size:.75rem;color:#8c8c8c;font-weight:700}
.bulle-corps{margin:0;white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.45;font-size:.93rem}
.bulle-pied{margin:.2rem 0 0;font-size:.72rem;text-align:right;opacity:.75}
.bulle.moi .bulle-pied{color:#fff}
.bulle .coche{margin-left:.3rem;letter-spacing:-.05em}
.bulle .coche.lu{font-weight:700}
.fil-clos{margin:.5rem 0 0}
.fil-ecrire{display:flex;gap:.5rem;align-items:flex-end;margin-top:.7rem}
.fil-ecrire textarea{flex:1;font-family:inherit;font-size:.93rem;line-height:1.5;padding:.5rem .6rem;
  border:1px solid #d5d5d5;border-radius:3px;resize:vertical;min-height:2.6rem}
.fil-ecrire button{white-space:nowrap}
.ecrire-client{margin-top:.3rem}
.ecrire-client summary{cursor:pointer;color:var(--rouge);font-size:.85rem}
.ecrire-client .formulaire{margin-top:.4rem;min-width:16rem}
.bo-nav a .pastille-msg{margin-left:.25rem}
@media(max-width:600px){.bulle{max-width:88%}.messagerie .fil{max-height:none}}

/* ---- calendrier de la remorque ---- */
.calendrier{margin:.8rem 0 1.6rem}
.calendrier-tete{display:flex;justify-content:space-between;align-items:center;margin:0 0 .4rem;font-size:.92rem}
.calendrier-tete a{color:var(--rouge);text-decoration:none}
.calendrier-tete a:hover{text-decoration:underline}
table.mois{width:100%;border-collapse:collapse;table-layout:fixed}
table.mois th{font-size:.75rem;color:#8c8c8c;font-weight:400;padding:.25rem 0;text-transform:lowercase}
table.mois td{text-align:center;padding:.5rem 0;font-size:.9rem;border:1px solid #ececec}
table.mois td.hors{color:#d5d5d5;border-color:#f4f4f4}
table.mois td.passe{color:#c4c4c4}
table.mois td.libre{background:#fff}
table.mois td.pris{background:#eee;color:#9a9a9a;text-decoration:line-through}
.formulaire input[type=date]{padding:.45rem .5rem;border:1px solid #d5d5d5;border-radius:3px;font-family:inherit}
.demande{border:1px solid #e3e3e3;border-radius:4px;padding:.8rem 1rem;margin:0 0 .8rem}
.demande.a-traiter{border-color:var(--rouge);background:#fffaf9}
.demande-tete{margin:0 0 .3rem;font-size:.95rem}
.demande-qui{margin:0 0 .5rem;font-size:.88rem;color:#5c5c5c}
.demande-texte{margin:0 0 .6rem;white-space:pre-wrap;line-height:1.5}
.demande-reponse{margin:0}
.demande-reponse textarea{width:100%}
.demande-boutons{display:flex;gap:1rem;align-items:center;margin:.5rem 0 0}

/* --- le reseau : candidature publique et espace du partenaire --- */
.cartes-niveaux{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin:1.6rem 0}
.carte-niveau{border:1px solid #ddd;border-radius:6px;padding:1rem 1.1rem;background:#fafafa}
.carte-niveau h2{margin:0 0 .5rem;font-size:1.15rem;color:var(--rouge)}
.carte-niveau p{margin:0 0 .5rem;font-size:.93rem;line-height:1.5}
.carte-niveau .note{margin:0;font-size:.82rem;color:#777}
.choix-niveau{border:1px solid #ddd;border-radius:6px;padding:.8rem 1rem;margin:0}
.choix-niveau legend{font-weight:700;font-size:.9rem;padding:0 .4rem}
.choix-niveau .case{display:inline-flex;align-items:center;gap:.4rem;margin-right:1.4rem;font-weight:400}
.choix-niveau .case input{width:auto;margin:0}
.qr-bloc{display:flex;gap:1.4rem;align-items:center;flex-wrap:wrap;margin:1rem 0}
.qr-bloc img{width:190px;height:190px;border:1px solid #ddd;border-radius:6px;background:#fff;padding:.4rem}
.qr-bloc .qr-mot{flex:1 1 260px}
.code-partenaire{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:1.5rem;letter-spacing:.18em;
  background:#f2f2f2;border:1px solid #ddd;border-radius:5px;padding:.3rem .6rem;display:inline-block}
.chiffres-reseau{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:.9rem;margin:1.2rem 0}
.chiffre{border:1px solid #ddd;border-radius:6px;padding:.8rem 1rem;background:#fafafa}
.chiffre .valeur{display:block;font-size:1.7rem;font-weight:700;color:var(--encre);line-height:1.2;overflow-wrap:anywhere}
.chiffre .quoi{display:block;font-size:.82rem;color:#777;margin-top:.15rem}
@media(max-width:760px){.cartes-niveaux{grid-template-columns:1fr}}
.fiche-demande{border:1px solid #ddd;border-left:4px solid var(--rouge);border-radius:6px;
  padding:1rem 1.2rem;margin:1.2rem 0;background:#fff}
.fiche-demande h3{margin:0 0 .4rem;font-size:1.1rem}
.fiche-demande h4{margin:0 0 .5rem;font-size:.95rem;color:#555}
.fiche-demande .presentation{margin:.6rem 0 1rem;padding:.6rem .9rem;border-left:3px solid #e0e0e0;
  color:#555;font-size:.93rem;white-space:pre-wrap}
.deux-formulaires{display:grid;grid-template-columns:2fr 1fr;gap:1.5rem;align-items:start;
  border-top:1px dashed #ddd;padding-top:.9rem}
.deux-formulaires .formulaire{margin-top:0;max-width:none}
.bouton.discret{background:#f0f0f0;color:#444;border:1px solid #ccc}
.bouton.discret:hover{background:#e6e6e6;color:#222}
@media(max-width:860px){.deux-formulaires{grid-template-columns:1fr}}
.pied-reseau,.pied-evenements{margin:.3rem 0;font-size:.88rem;text-align:center}

.reseau-liste{min-width:920px}
.reseau-liste td,.reseau-liste th{white-space:nowrap}
.reseau-liste td:nth-child(2),.reseau-liste td:nth-child(5){white-space:normal}

/* --- la feuille de route d'une tournee --- */
.feuille{max-width:900px}
.feuille-tete{color:#666;font-size:.92rem;margin:.2rem 0}
.feuille-arret{display:grid;grid-template-columns:minmax(0,1fr) 170px;gap:1.2rem;align-items:start;
  border-top:2px solid #ddd;padding:1rem 0;page-break-inside:avoid;break-inside:avoid}
.feuille-arret h2{margin:0 0 .4rem;font-size:1.15rem}
.feuille-bl{color:#666;font-size:.85rem;margin:.3rem 0}
.feuille-qr{text-align:center}
.feuille-qr img{width:150px;height:150px;border:1px solid #ddd;background:#fff;padding:.3rem}
.feuille-qr p{font-size:.75rem;color:#777;margin:.4rem 0 0;line-height:1.35}
.feuille-signature{margin-top:.8rem;color:#555;font-size:.9rem}
.feuille-recu{margin-top:.8rem;color:#1a7f37;font-size:.9rem;font-weight:600}
@media print{
  .entete,.pied,.admin-rail,.admin-topbar,.ecran-seul,.bandeau-info{display:none}
  .admin-principal{margin-left:0}.admin-corps{padding:0}
  .feuille-arret{border-top:1px solid #999}
}
@media(max-width:700px){.feuille-arret{grid-template-columns:minmax(0,1fr)}}
tr.total.remise td{color:#1a7f37}
.remise-etat{border:1px solid #ddd;border-left:4px solid #1a7f37;border-radius:6px;
  padding:.9rem 1.1rem;margin:1.2rem 0;background:#f7fbf8}
.remise-etat.attente{border-left-color:#c8a200;background:#fffdf5}
.remise-etat.refus{border-left-color:#b00020;background:#fdf7f7}
.remise-etat h3{margin:0 0 .4rem;font-size:1.05rem}
.remise-etat p{margin:.3rem 0;font-size:.94rem}
.registre-remises{min-width:1100px}
.registre-remises td:nth-child(8){white-space:normal;min-width:240px}
.registre-achats{min-width:1180px}
.registre-achats td:nth-child(8){white-space:normal;min-width:260px}
.registre-achats td:nth-child(9){white-space:nowrap}

/* ---- la commande groupee ---- */
/* Le bandeau suit le visiteur sur toutes les pages : a tout moment il doit savoir qu'il
   commande pour un groupe, et pouvoir en sortir d'un geste. */
.bandeau-groupe{background:#eef4fb;border-bottom:1px solid #cddcee;color:#1c3d63;
  padding:.55rem 1.2rem;text-align:center;font-size:.92rem}
.bandeau-groupe a{color:#1c3d63;text-decoration:underline}
.bandeau-groupe .en-ligne{display:inline}
.lien-bouton{background:none;border:0;padding:0;font:inherit;color:#1c3d63;
  text-decoration:underline;cursor:pointer}
.lien-bouton:hover{color:var(--rouge)}
.groupe-entete{border:1px solid #cddcee;border-left:4px solid #3d72ab;border-radius:6px;
  padding:1rem 1.2rem;margin:1.2rem 0;background:#f6f9fd}
.groupe-entete h2{margin-top:0;font-size:1.15rem}
.groupe-entete .bouton.discret{background:none;border:1px solid #cddcee;color:#1c3d63;
  padding:.35rem .8rem;font-size:.85rem}
.groupe-code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:1.6rem;letter-spacing:.22em;font-weight:700;color:var(--rouge)}
.groupe-lien{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.9rem;
  background:var(--gris-clair);padding:.4rem .7rem;border-radius:4px;display:inline-block;
  word-break:break-all}
.groupe-jauge{height:.6rem;background:#e3ebf4;border-radius:999px;overflow:hidden;margin:.5rem 0}
.groupe-jauge span{display:block;height:100%;background:#3d72ab}
.groupe-etat{border:1px solid #ddd;border-radius:6px;padding:.9rem 1.1rem;margin:1rem 0}
.groupe-etat.complet{border-left:4px solid var(--vert);background:#f7fbf8}
.groupe-etat.ouvert{border-left:4px solid #3d72ab;background:#f6f9fd}
.etat-pastille{display:inline-block;padding:.12rem .55rem;border-radius:999px;font-size:.78rem;
  font-weight:600}
.etat-pastille.reglee{background:#eaf7ea;color:#1a7f37}
.etat-pastille.attente{background:#fff6e0;color:#8a6200}

/* ---- les points bonus ---- */
.points-compte{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:1rem;
  margin:1.4rem 0}
.points-case{border:1px solid #ddd;border-left:4px solid #3d72ab;border-radius:6px;
  padding:.9rem 1.1rem;background:#f6f9fd;display:flex;flex-direction:column;gap:.15rem}
.points-n{font-size:1.9rem;font-weight:700;line-height:1.1;color:#1c3d63;
  font-variant-numeric:tabular-nums}
.points-l{font-size:.9rem;font-weight:600}
.points-e{font-size:.82rem;color:var(--gris)}
.points-plus{color:#1a7f37;font-weight:700;font-variant-numeric:tabular-nums}
.points-moins{color:var(--rouge);font-weight:700;font-variant-numeric:tabular-nums}
.bloc-points{border:1px solid #cddcee;border-left:4px solid #3d72ab;background:#f6f9fd;
  border-radius:6px;padding:.9rem 1.1rem;margin:1.1rem 0}
.bloc-points legend{font-weight:700;padding:0 .4rem}
.bloc-points input[type=number]{width:6rem}
.dette{border:1px solid #ddd;border-left:4px solid #c8a200;background:#fffdf5;border-radius:6px;
  padding:.9rem 1.1rem;margin:1rem 0}

/* ---- les événements ---- */
/* Le pop-up est centre par ses marges automatiques, pas par align-items : centre en flex, un
   pop-up plus haut que l'ecran debordait PAR LE HAUT, hors de portee du defilement. */
.voile-evenement{position:fixed;inset:0;z-index:60;background:rgba(20,26,34,.72);
  display:flex;align-items:flex-start;justify-content:center;padding:1.2rem;overflow-y:auto}
.popup-evenement{background:#fff;border-radius:10px;max-width:460px;width:100%;margin:auto;
  padding:1.6rem 1.7rem 1.3rem;text-align:center;box-shadow:0 24px 60px -20px rgba(0,0,0,.5);
  border-top:5px solid var(--rouge)}
.popup-evenement img{max-width:100%;max-height:42vh;width:auto;object-fit:contain;border-radius:6px;margin-bottom:.9rem}
.popup-evenement h2{margin:.2rem 0 .4rem;font-size:1.45rem}
.popup-evenement .bouton.gros{margin:.9rem 0 .4rem}
.popup-evenement form{margin:0}
.bandeau-evenement{background:#fff4ec;border-bottom:1px solid #f0d6c2;color:#8a4218;
  padding:.55rem 1.2rem;text-align:center;font-size:.92rem}
.bandeau-evenement a{color:#8a4218;text-decoration:underline}
.bandeau-evenement .en-ligne{display:inline}
.bandeau-evenement .lien-bouton{color:#8a4218}
.evenement-quand{font-size:.82rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--rouge);margin:0 0 .2rem}
.evenement-ou{color:var(--gris);margin:.15rem 0 .6rem}
.evenement-offre{display:flex;gap:.5rem;flex-wrap:wrap;justify-content:center;margin:.7rem 0}
.offre-pastille{background:var(--rouge);color:#fff;border-radius:999px;padding:.2rem .8rem;
  font-size:.82rem;font-weight:700}
.evenement-carte{display:grid;grid-template-columns:220px 1fr;gap:1.4rem;align-items:start;
  border:1px solid #ddd;border-radius:8px;padding:1.2rem;margin:1.4rem 0;background:#fff}
.evenement-carte h2{margin:.1rem 0 .3rem;font-size:1.3rem}
.evenement-carte h2 a{color:inherit;text-decoration:none}
.evenement-carte h2 a:hover{color:var(--rouge)}
.evenement-visuel img{width:100%;border-radius:6px;display:block}
.evenement-carte .evenement-offre{justify-content:flex-start}
.evenement-affiche{width:100%;border-radius:8px;margin-bottom:1.2rem}
.chapo-evenement{font-size:1.1rem;font-weight:300;margin:.6rem 0 1rem}
.evenement-offre-bloc{border:1px solid #ddd;border-left:4px solid var(--rouge);border-radius:8px;
  padding:1.1rem 1.3rem;margin:1.4rem 0;background:#fffaf8}
.evenement-offre-bloc h2{margin-top:0;font-size:1.2rem}
.offre-liste{margin:.6rem 0 1rem;padding-left:1.2rem}
.offre-liste li{margin-bottom:.35rem}
.evenement-offre-bloc .evenement-offre{justify-content:flex-start}
.pied-evenements a{font-weight:700}
.evenement-carte>.evenement-corps:only-child{grid-column:1/-1}
@media(max-width:700px){.evenement-carte{grid-template-columns:1fr}}

/* ---- le comptoir d'un événement, fait pour un téléphone ---- */
.comptoir-titre{font-size:1.4rem;margin-bottom:.2rem}
.comptoir-fait{border:1px solid #cddcee;border-left:4px solid #3d72ab;background:#f6f9fd;
  border-radius:8px;padding:1rem 1.2rem;margin:1rem 0;text-align:center}
.comptoir-fait.succes{border-left-color:var(--vert);background:#f7fbf8}
.comptoir-qr{width:230px;max-width:80vw;height:auto;margin:.6rem auto;display:block;
  background:#fff;padding:.5rem;border-radius:6px}
.comptoir-articles input[type=number]{width:4.5rem;font-size:1.15rem;padding:.35rem}
.comptoir-vente fieldset{margin:1rem 0}
.comptoir-vente .bouton.gros{width:100%;padding:.9rem;font-size:1.05rem}
@media(max-width:700px){.comptoir-articles th:nth-child(2),.comptoir-articles td:nth-child(2){display:none}}
.verif-majorite{border:1px solid #f0d6c2;border-left:4px solid var(--rouge);background:#fff7f5;
  border-radius:6px}
.verif-majorite legend{font-weight:700;padding:0 .4rem}

/* ---- la caisse du bar, faite pour un téléphone tenu d'une main ---- */
.bar-tete{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:.2rem 1rem}
.bar-tete h1{font-size:1.4rem;margin:0}
.bar-onglets{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.2rem;margin:.8rem 0;
  border-bottom:2px solid #dfe5ee}
.bar-onglets [role=tab]{min-height:48px;border:0;background:none;font:inherit;font-weight:700;
  color:#4a5360;border-bottom:3px solid transparent;margin-bottom:-2px;cursor:pointer}
.bar-onglets [role=tab][aria-selected=true]{color:#1d3f73;border-bottom-color:#1d3f73}
.bar-onglets .n{display:inline-block;min-width:1.4em;padding:0 .3em;border-radius:1em;
  background:#e7edf6;font-size:.8rem}
.bar-panneau{padding-bottom:1rem}
.bar-montant{font-size:2.4rem;font-weight:700;text-align:center;margin:.6rem 0;
  font-variant-numeric:tabular-nums}
.bar-pave{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem;max-width:420px;margin:0 auto}
.bar-pave button{min-height:64px;font:inherit;font-size:1.5rem;font-weight:700;border:1px solid #d4dbe6;
  border-radius:10px;background:#fff;cursor:pointer}
.bar-pave button:active{background:#e7edf6}
.bar-pave-options{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.6rem;max-width:420px;margin:1rem auto}
.bar-pave-options label{display:flex;flex-direction:column;min-width:0;font-size:.9rem;font-weight:700}
.bar-pave-options input,.bar-pave-options select{font-size:16px;padding:.5rem;min-height:44px;width:100%;
  min-width:0;box-sizing:border-box}
#panneau-pave .bouton.gros{display:block;width:100%;max-width:420px;margin:0 auto}
.bar-tuiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:.5rem}
.bar-tuile{position:relative;display:flex;flex-direction:column;justify-content:flex-end;
  min-height:96px;padding:.5rem;border:0;border-radius:10px;color:#fff;font:inherit;text-align:left;
  cursor:pointer;overflow:hidden;overflow-wrap:anywhere}
/* L'image est une vignette en tete de tuile, jamais un fond : un nom et un prix poses sur une
   photo se lisent mal, et au bar on lit vite. */
.bar-tuile img{display:block;width:100%;height:56px;object-fit:cover;border-radius:6px;
  margin-bottom:auto;background:rgba(255,255,255,.15)}
.bar-tuile-nom,.bar-tuile-prix{position:relative;font-weight:700;line-height:1.2}
.bar-tuile-prix{font-weight:400;font-size:.92rem}
.bar-tuile-q{position:absolute;top:.35rem;right:.35rem;min-width:1.6em;padding:0 .35em;border-radius:1em;
  background:#fff;color:#1d2530;font-weight:700;text-align:center}
.bar-tuile-q:empty{display:none}
.bar-tuile.prise{outline:3px solid #1d2530;outline-offset:2px}
.tuile-bleu{background:#2f55c8}.tuile-vert{background:#2e7342}.tuile-orange{background:#b2541a}
.tuile-violet{background:#8a3fbf}.tuile-rouge{background:#b3203a}.tuile-gris{background:#5f646c}
.bar-garde{padding-left:1.1rem}
.bar-garde li{margin:.45rem 0}
.bar-panier{position:sticky;bottom:0;z-index:5;background:#fff;border-top:1px solid #d4dbe6;
  box-shadow:0 -4px 14px rgba(0,0,0,.08);padding:.5rem .2rem calc(.5rem + env(safe-area-inset-bottom))}
.bar-panier.ouvert{position:static;box-shadow:none}
.bar-panier-barre{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:.5rem}
.bar-vider-vite{min-height:48px;min-width:48px;padding:0 .7rem;border:1px solid #d4dbe6;border-radius:10px;background:#fff;
  color:#9b1c2e;font:inherit;font-size:1.1rem;font-weight:800;white-space:nowrap;cursor:pointer}
.bar-vider-vite[hidden]{display:none}
.bar-vider-mot{display:none}
.bar-vider-vite.arme{background:#b3203a;border-color:#b3203a;color:#fff}
.bar-vider-vite.arme .bar-vider-mot{display:inline}
body.mode-caisse .bar-panier.ouvert #panier-vider-vite{display:none}
.bar-panier-barre>.bouton{min-height:48px;white-space:nowrap}
.bar-panier-barre>.bouton:disabled{opacity:.5;cursor:not-allowed}
.bar-panier-resume{min-height:48px;border:0;background:none;font:inherit;font-size:1.05rem;color:inherit;
  text-align:left;cursor:pointer;padding:0 .2rem}
.bar-panier-resume::after{content:' ▴';color:#6b7482}
.bar-panier-resume[aria-expanded=true]::after{content:' ▾'}
.bar-panier-contenu[hidden]{display:none}
/* Seules les lignes defilent : les gestes du panier restent sous le doigt. */
.bar-panier-contenu .bar-lignes{max-height:34vh;overflow-y:auto;overscroll-behavior:contain}
.bar-encaisser{display:grid;gap:.6rem;padding:.6rem 0 .2rem}
.bar-encaisser[hidden]{display:none}
.bar-encaisser h2{margin:0;font-size:1.2rem}
.bar-encaisser .lien-bouton{justify-self:start;min-height:44px}
.bar-lignes{list-style:none;padding:0;margin:.3rem 0}
.bar-lignes li{display:grid;grid-template-columns:1fr auto auto auto;align-items:center;gap:.4rem;
  padding:.25rem 0;border-bottom:1px solid #eef1f5}
.bar-lignes li>span:first-child{overflow-wrap:anywhere}
.bar-lignes button{min-width:44px;min-height:44px;font-size:1.2rem;border:1px solid #d4dbe6;
  border-radius:8px;background:#fff;cursor:pointer}
.bar-ligne-prix{font-variant-numeric:tabular-nums;white-space:nowrap}
.bar-panier-gestes{display:flex;gap:1.2rem;margin:.2rem 0}
.bar-panier label{font-weight:400}
.bar-evenement{display:flex;flex-direction:column;font-size:.9rem}
.bar-evenement select{font-size:16px;min-height:44px}
.bar-majeur{display:flex;gap:.5rem;align-items:center;border-left:4px solid var(--rouge);
  background:#fff7f5;padding:.5rem;border-radius:6px}
.bar-majeur[hidden]{display:none}
.bar-majeur input{width:22px;height:22px;flex:0 0 auto}
.bar-reglement{border:0;padding:0;margin:0;display:grid;gap:.2rem}
.bar-reglement legend{font-weight:700;padding:0;margin-bottom:.2rem}
.bar-reglement .radio{display:flex;min-height:44px}
.bar-panier .bouton.gros,.bar-vente .bouton.gros{width:100%;padding:.9rem;font-size:1.1rem;text-align:center}
.bar-article{border:1px solid #dfe5ee;border-radius:8px;padding:.3rem .8rem;margin:.6rem 0;background:#fff}
.bar-article summary{min-height:44px;display:flex;align-items:center;gap:.5rem;cursor:pointer;flex-wrap:wrap}
.bar-pastille{display:inline-block;width:1.1rem;height:1.1rem;border-radius:4px}
.ticket{border:1px dashed #b9c3d1;border-radius:8px;padding:1rem;background:#fff;margin:1rem 0}
.ticket-emetteur{text-align:center;font-weight:700;margin-top:0}
.ticket-ref{text-align:center;color:#4a5360}
.ticket .tableau th,.ticket .tableau td{padding-left:.3rem;padding-right:.3rem}
@media(max-width:400px){.ticket{padding:1rem .5rem}}
.ticket .tableau td:not(:first-child),.ticket .tableau th:not(:first-child){text-align:right;white-space:nowrap}

/* ---- la caisse figee : un outil, pas une page ----
   Rien ne zoome, la page ne defile pas : tout tient dans l'ecran. La caisse est une colonne
   (en-tete, bandeau, onglets, panneau, panier) ; seul le panneau du milieu prend la place qui
   reste, et seules ses listes defilent, chacune dans son cadre. */
html:has(body.mode-caisse),body.mode-caisse{height:100%;overflow:hidden;overscroll-behavior:none}
body.mode-caisse{touch-action:manipulation;-webkit-text-size-adjust:100%;-webkit-user-select:none;user-select:none}
body.mode-caisse input,body.mode-caisse select{-webkit-user-select:text;user-select:text}
body.mode-caisse .admin-shell{height:100dvh;min-height:0;overflow:hidden}
body.mode-caisse .admin-principal{height:100dvh;min-height:0;overflow:hidden}
body.mode-caisse .admin-corps{flex:1 1 auto;min-height:0;overflow:hidden;display:flex;flex-direction:column;
  padding:.6rem .8rem calc(.4rem + env(safe-area-inset-bottom))}
body.mode-caisse .bar-caisse{flex:1 1 auto;min-height:0;display:flex;flex-direction:column}
body.mode-caisse .bar-caisse>*,body.mode-caisse .bar-principal>*,body.mode-caisse .bar-cote>*{flex:none}
/* Les deux blocs de la caisse (bar-principal, bar-cote) ne comptent pas sur un telephone : leurs
   enfants se rangent dans la colonne de la caisse comme s'ils en etaient les enfants directs.
   Sur une tablette, ils deviennent les deux colonnes (voir « la caisse sur tablette »). */
.bar-principal,.bar-cote{display:contents}
.bar-repos{display:none}
.texte-court{display:none}
body.mode-caisse .texte-long{display:none}
body.mode-caisse .texte-court{display:inline}
body.mode-caisse .bar-tete{flex-wrap:nowrap;align-items:center;gap:.6rem}
body.mode-caisse .bar-tete h1{font-size:1.05rem;margin:0;white-space:nowrap}
body.mode-caisse .bar-tete .note{margin:0;font-size:.85rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Les liens de la caisse ne se coupent jamais : trop longs pour la ligne du titre, ils passent
   dessous, chacun entier (un lien coupe en « … » est un lien qu'on ne trouve pas). */
body.mode-caisse .bar-tete:has(.bar-tete-liens){flex-wrap:wrap;row-gap:.1rem}
body.mode-caisse .bar-tete .bar-tete-liens{white-space:normal;overflow:visible;text-overflow:clip;line-height:1.5}
body.mode-caisse .bar-tete .bar-tete-liens a{white-space:nowrap}
body.mode-caisse .bar-pastille-v{min-height:34px;padding:.2rem .65rem;font-size:.85rem}
body.mode-caisse .bar-onglets [role=tab]{min-height:42px;white-space:nowrap}
body.mode-caisse .bar-onglets .n{font-size:.75rem}
/* Au pave, les etiquettes « Libelle » et « TVA » s'effacent (le champ dit ce qu'il attend) :
   chaque ligne gagnee va aux touches. */
body.mode-caisse .etiquette-pave{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
body.mode-caisse .bar-principal>.alerte,body.mode-caisse .bar-principal>.succes{margin:.3rem 0;padding:.3rem .6rem;font-size:.8rem;line-height:1.3}
body.mode-caisse .bar-onglets{margin:.4rem 0}
body.mode-caisse .bar-panneau:not([hidden]){flex:1 1 auto;min-height:0;display:flex;flex-direction:column;padding-bottom:.4rem}
body.mode-caisse #panneau-tuiles,body.mode-caisse #panneau-servir,body.mode-caisse #panneau-attente{
  overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
body.mode-caisse .bar-tuiles{flex:none}
/* Le pave remplit la hauteur qui reste : ses touches grandissent ou rapetissent avec l'ecran. */
body.mode-caisse #panneau-pave{overflow:hidden}
body.mode-caisse .bar-montant{margin:0 0 .25rem;font-size:clamp(1.4rem,5.4vh,2.4rem);line-height:1.2;flex:none}
body.mode-caisse .bar-pave{flex:1 1 auto;min-height:calc(160px + 1.05rem);width:100%;max-height:340px;grid-template-rows:repeat(4,minmax(40px,1fr));gap:.35rem}
body.mode-caisse .bar-pave button{min-height:0;font-size:clamp(1.2rem,4vh,1.6rem)}
body.mode-caisse .bar-pave-options{flex:none;grid-template-columns:minmax(0,1fr) auto auto;align-items:end;
  margin:.4rem auto 0;width:100%;gap:.4rem}
body.mode-caisse .bar-pave-options .bouton{min-height:44px}
/* Les autres ecrans de l'encaissement (la vente, le bon a servir, les ventes du jour) sont figes
   de la meme facon : une colonne qui tient dans l'ecran, dont seule la liste (.bar-defile)
   defile, dans son cadre. Le code a scanner se reduit plutot que de pousser la page. */
body.mode-caisse .bar-fige{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;width:100%}
body.mode-caisse .bar-fige>*{flex:none}
body.mode-caisse .bar-fige>form,body.mode-caisse .bar-fige>p{margin-top:.35rem;margin-bottom:.35rem}
body.mode-caisse .bar-fige h1{margin:.2rem 0 .3rem;font-size:1.3rem}
body.mode-caisse .bar-fige h2{margin:.6rem 0 .3rem;font-size:1.05rem}
body.mode-caisse .bar-fige>.bar-defile{flex:1 1 auto;min-height:3.5rem;overflow:auto;overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;margin-bottom:0}
body.mode-caisse .bar-fige .comptoir-qr{flex:none;height:min(230px,26dvh);width:auto;aspect-ratio:1/1;max-width:80vw;
  object-fit:contain;align-self:center;margin:.3rem auto}
body.mode-caisse .bar-fige .comptoir-fait{margin:.3rem 0;padding:.6rem .8rem}
body.mode-caisse .bar-fige .gros-succes{margin:.3rem 0;padding:.6rem .8rem}
body.mode-caisse .bar-fige .bar-montant{margin:.1rem 0}
body.mode-caisse .bar-fige .bon-comptoir{margin:.3rem 0;padding:.8rem 1rem}
body.mode-caisse .bar-fige .bon-comptoir-numero{font-size:clamp(2.4rem,9dvh,3.6rem)}
body.mode-caisse .bar-ventes .tableau-cadre{margin-bottom:.6rem}
/* Le journal des ventes : la periode, ses fleches, et les compteurs qui sont aussi des filtres. */
.journal-periodes{display:flex;gap:.3rem;overflow-x:auto;scrollbar-width:none;margin:.2rem 0 .35rem}
.journal-periodes a{flex:none;min-height:40px;display:flex;align-items:center;padding:0 .8rem;border-radius:999px;
  border:1px solid #d4dbe6;background:#fff;color:#2b3440;text-decoration:none;font-weight:600}
.journal-periodes a[aria-current=page]{background:#1f2f86;border-color:#1f2f86;color:#fff}
.journal-nav{display:flex;align-items:center;gap:.4rem;margin:.1rem 0 .35rem}
.journal-fleche{flex:none;width:44px;height:44px;display:flex;align-items:center;justify-content:center;border-radius:12px;
  background:#fff;border:1px solid #d4dbe6;font-size:1.6rem;line-height:1;text-decoration:none;color:#1f2f86}
.journal-dates{flex:1 1 auto;min-width:0;display:flex;align-items:center;gap:.3rem;margin:0;flex-wrap:wrap;justify-content:center}
.journal-dates input[type=date]{min-height:40px;max-width:100%}
.journal-libelle{display:flex;flex-direction:column;align-items:center;gap:.15rem;text-align:center;width:100%}
.journal-libelle strong{font-size:1.05rem}
.journal-compteurs{display:flex;gap:.4rem;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;padding-bottom:.2rem;margin:.1rem 0 .3rem}
.journal-compteur{flex:none;min-width:6.4rem;display:flex;flex-direction:column;padding:.4rem .6rem;border-radius:12px;
  background:#fff;border:2px solid #e3e8ef;text-decoration:none;color:#2b3440;line-height:1.2}
.journal-compteur[aria-current=true]{border-color:#1f2f86;box-shadow:0 0 0 1px #1f2f86 inset}
.journal-compteur-nom{font-size:.8rem;font-weight:600;color:#4a5360}
.journal-compteur strong{font-size:1.05rem;font-variant-numeric:tabular-nums}
.journal-compteur-n{font-size:.75rem;color:#4a5360}
.journal-compteur.encaissee strong{color:#1e6b36}.journal-compteur.attente strong{color:#8a4a00}
.journal-compteur.annulee strong,.journal-compteur.echouee strong{color:#9b1c2e}
.journal-moyen{margin:.1rem 0 .5rem}
.journal-moyen label{display:flex;align-items:center;gap:.5rem;font-weight:600}
.journal-moyen select{flex:1 1 auto;min-width:0;min-height:40px}
@media (max-height:640px){
  body.mode-caisse .bar-ventes h1{font-size:1.1rem;margin:.1rem 0 .2rem}
  .journal-compteur{padding:.3rem .5rem}
  .journal-compteur-n{display:none}}
.journal-ventes tr.journal-annulee td,.journal-ventes tr.journal-echouee td{color:#6b7482}
.journal-ventes tr.journal-attente td:last-child{color:#8a4a00;font-weight:600}
/* L'encaissement s'ouvre en volet par-dessus, au lieu de faire descendre la page. */
body.mode-caisse .bar-panier.ouvert{position:fixed;left:var(--rail-l);right:0;bottom:0;z-index:40;max-height:88dvh;
  overflow-y:auto;overscroll-behavior:contain;padding:.8rem 1rem calc(1rem + env(safe-area-inset-bottom));
  border-radius:16px 16px 0 0;box-shadow:0 -10px 40px rgba(0,0,0,.3)}
body.mode-caisse .bar-panier{position:relative;bottom:auto}
body.mode-caisse.rail-plie .bar-panier.ouvert{left:0}
@media(max-width:860px){body.mode-caisse .bar-panier.ouvert{left:0}}
/* Volet ouvert : la caisse derriere est voilee et ne repond plus au doigt — un appui a cote
   referme le volet (caisse_bar.js), il ne tape jamais une touche par megarde. */
body.mode-caisse .bar-caisse:has(.bar-panier.ouvert)::before{content:"";position:fixed;inset:0;z-index:39;
  background:rgba(10,20,35,.45)}
/* Dans le volet, « Facturer » est deja fait : il laisse la place, « Revenir au panier » referme. */
body.mode-caisse .bar-panier.ouvert #panier-facturer{display:none}

/* ---- le bandeau du rush : une pastille par paiement en cours ---- */
.bar-bandeau{position:relative;margin:.6rem 0 0;min-height:0;overflow:hidden}
/* Une seule ligne, qui defile du doigt : le bandeau ne mange jamais les tuiles, meme en plein
   rush. La vente la plus recente est a gauche. */
.bar-pastilles{list-style:none;margin:0;padding:.1rem 0 .3rem;display:flex;flex-wrap:nowrap;gap:.4rem;
  overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.bar-pastilles::-webkit-scrollbar{display:none}
.bar-pastilles>li{flex:0 0 auto}
.bar-pastille-v{white-space:nowrap}
.bar-pastilles:empty{display:none}
.bar-pastille-v{display:inline-flex;align-items:center;gap:.35rem;min-height:40px;padding:.3rem .75rem;
  border-radius:999px;font-weight:700;font-size:.9rem;border:0;font-family:inherit;cursor:pointer;
  font-variant-numeric:tabular-nums;transition:background-color .3s,color .3s}
.bar-pastille-v.attente{background:#fff1dc;color:#8a4a00}
.bar-pastille-v.attente::before{content:'';width:.6rem;height:.6rem;border-radius:50%;background:#e07b00;
  animation:bar-pouls 1.2s ease-in-out infinite}
.bar-pastille-v.valide{background:#e3f4e8;color:#1e6b36}
.bar-pastille-v.valide::before{content:'✓'}
.bar-pastille-v.refuse{background:#fde7ea;color:#9b1c2e}
.bar-pastille-v.refuse::before{content:'✕'}
@keyframes bar-pouls{50%{transform:scale(.55);opacity:.5}}
.bar-avion{position:absolute;left:-70px;top:4px;width:56px;height:35px;pointer-events:none;opacity:0}
.bar-avion.vole{animation:bar-vol 1.3s cubic-bezier(.45,.05,.4,1) forwards}
@keyframes bar-vol{0%{opacity:1;transform:translate(0,14px) rotate(8deg)}
  45%{transform:translate(45vw,-2px) rotate(-6deg)}
  100%{opacity:1;transform:translate(calc(100vw + 90px),-12px) rotate(-14deg)}}

@media(max-width:400px){.bar-onglets [role=tab]{font-size:.85rem;padding:0 .1rem}}
/* ---- les bons a servir, cote comptoir ---- */
.bar-bons{list-style:none;margin:0;padding:0;display:grid;gap:.5rem}
.bar-bon{display:flex;align-items:center;gap:.8rem;min-height:56px;padding:.5rem .8rem;border-radius:10px;
  background:#e3f4e8;color:#14532a;text-decoration:none;border:1px solid #bfe3ca}
.bar-bon-n{font-size:1.5rem;font-weight:800;font-variant-numeric:tabular-nums;white-space:nowrap}
.bar-bon-quoi{overflow-wrap:anywhere}
.bon-comptoir{border-radius:16px;padding:1.2rem 1rem;text-align:center;margin:.6rem 0;color:#fff}
.bon-comptoir.a-servir{background:#1e7a3c}
.bon-comptoir.deja-servi,.bon-comptoir.pas-paye{background:#b3203a}
.bon-comptoir-etat{margin:0;font-size:1.3rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em}
.bon-comptoir-numero{margin:.2rem 0 0;font-size:3.6rem;font-weight:800;line-height:1.1;font-variant-numeric:tabular-nums}
.bon-comptoir-heure{margin:.2rem 0 0;font-size:1.3rem;font-weight:700}
.bon-articles{list-style:none;padding:0;margin:1rem 0;font-size:1.2rem}
.bon-articles li{padding:.4rem 0;border-bottom:1px solid #eef1f5}
.bar-servir .bouton-servi{width:100%;min-height:64px;font-size:1.4rem}

/* ---- le bon du client : un tampon vivant ---- */
.bon-client{text-align:center}
.bon-tampon{position:relative;overflow:hidden;border-radius:18px;padding:1.4rem 1rem 1.2rem;margin:1rem 0;color:#fff}
.bon-tampon.paye{background:repeating-linear-gradient(135deg,#1e7a3c 0 22px,#23873f 22px 44px);
  background-size:62px 62px;animation:bon-defile 1.6s linear infinite}
.bon-tampon.servi{background:#5f646c}
.bon-tampon.attente{background:#b8650a}
.bon-tampon.refuse{background:#b3203a}
@keyframes bon-defile{to{background-position:62px 0}}
.bon-mot{margin:0;font-size:1.6rem;font-weight:800;text-transform:uppercase;letter-spacing:.08em}
.bon-numero{margin:.1rem 0;font-size:4.2rem;font-weight:800;line-height:1.05;font-variant-numeric:tabular-nums}
.bon-horloge{margin:0;font-size:1.6rem;font-weight:700;font-variant-numeric:tabular-nums}
.bon-avion{position:absolute;top:10px;left:-60px;width:48px;height:30px;animation:bon-vol 3.2s ease-in-out infinite}
@keyframes bon-vol{0%{transform:translate(0,10px) rotate(6deg)}50%{transform:translate(55vw,-2px) rotate(-6deg)}
  100%{transform:translate(calc(100vw + 60px),8px) rotate(4deg)}}
.bon-consigne{font-size:1.15rem;font-weight:700}
.bon-client .bon-articles{text-align:left}
.bon-qr{display:block;width:220px;max-width:70vw;height:auto;margin:1rem auto;background:#fff;padding:.5rem;border-radius:8px}
.bon-recu{text-align:left;margin-top:1.5rem}
.bon-recu summary{min-height:44px;display:flex;align-items:center;cursor:pointer;font-weight:700}
@media (prefers-reduced-motion:reduce){.bon-tampon.paye{animation:none}.bon-avion{display:none}}

/* ---- la scene du QR code : la chope TAGAZOU qui eclate ---- */
.bar-scene{position:fixed;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;
  padding:1rem;background:rgba(15,20,30,.62)}
.bar-scene[hidden]{display:none}
.bar-scene-carte{background:#fff;border-radius:16px;padding:1rem 1rem 1.2rem;width:min(360px,100%);
  max-height:100%;overflow:auto;text-align:center;box-shadow:0 12px 40px rgba(0,0,0,.35)}
.bar-scene-montant{font-size:2.2rem;font-weight:700;margin:.2rem 0 .4rem;font-variant-numeric:tabular-nums}
.bar-scene-coeur{position:relative;width:240px;height:240px;margin:0 auto}
.bar-chope{position:absolute;inset:0;width:100%;height:100%;transform-origin:50% 90%}
/* La chope TAGAZOU (gabarit _chope.html) : « Tagazou » a la plume, « Biere » en gothique. */
.chope-script{font:400 17px Yellowtail,'Brush Script MT',cursive;fill:#111}
.chope-gothique{font:700 30px UnifrakturCook,'Old English Text MT',serif;fill:#35a9e1;stroke:#111;stroke-width:1.6px;paint-order:stroke}
.chope-biere{transform-box:fill-box;transform-origin:50% 100%;transform:scaleY(0)}
.chope-mousse{transform-box:fill-box;transform-origin:50% 100%;transform:translateY(160px) scale(.4);opacity:0}
.chope-bulle{opacity:0}
.bar-scene-qr{position:absolute;inset:0;width:100%;height:100%;opacity:0;transform:scale(.3) rotate(-8deg);
  background:#fff;border-radius:10px}
.bar-eclats{position:absolute;inset:0;pointer-events:none}
.eclat{position:absolute;left:50%;top:22%;width:22px;height:22px;margin:-11px;border-radius:50%;
  background:#fffaf0;box-shadow:0 0 0 2px #f3e6c7;opacity:0}
.eclat.e0{--dx:-110px;--dy:-60px}.eclat.e1{--dx:-80px;--dy:-120px}.eclat.e2{--dx:-20px;--dy:-140px}.eclat.e3{--dx:40px;--dy:-135px}.eclat.e4{--dx:95px;--dy:-100px}.eclat.e5{--dx:125px;--dy:-40px}.eclat.e6{--dx:115px;--dy:30px}.eclat.e7{--dx:70px;--dy:95px}.eclat.e8{--dx:0px;--dy:120px}.eclat.e9{--dx:-70px;--dy:100px}.eclat.e10{--dx:-120px;--dy:40px}.eclat.e11{--dx:-135px;--dy:-10px}
.bar-scene.joue .chope-biere{animation:chope-remplir .45s ease-out forwards}
.bar-scene.joue .chope-bulle{animation:chope-bulle .5s ease-out .15s forwards}
.bar-scene.joue .chope-mousse{animation:chope-mousse .3s ease-out .35s forwards}
.bar-scene.joue .bar-chope{animation:chope-eclate .35s ease-in .62s forwards}
.bar-scene.joue .eclat{animation:eclat .55s cubic-bezier(.2,.7,.3,1) .7s forwards}
.bar-scene.joue .bar-scene-qr{animation:qr-parait .4s cubic-bezier(.2,1.4,.4,1) .78s forwards}
@keyframes chope-remplir{to{transform:scaleY(1)}}
@keyframes chope-bulle{0%{opacity:.9;transform:translateY(0)}100%{opacity:0;transform:translateY(-110px)}}
@keyframes chope-mousse{to{transform:translateY(0) scale(1);opacity:1}}
@keyframes chope-eclate{0%{transform:scale(1)}40%{transform:scale(1.12) rotate(-3deg)}100%{transform:scale(1.35);opacity:0}}
@keyframes eclat{0%{opacity:1;transform:translate(0,0) scale(.6)}100%{opacity:0;transform:translate(var(--dx),var(--dy)) scale(1.1)}}
@keyframes qr-parait{to{opacity:1;transform:none}}
/* Rouverte depuis le bandeau : le code tout de suite, la chope a deja eclate. */
.bar-scene.sans-anim .bar-chope,.bar-scene.sans-anim .bar-eclats{display:none}
.bar-scene.sans-anim .bar-scene-qr{opacity:1;transform:none}
.bar-scene-etat{margin:.8rem 0;font-weight:700;color:#8a4a00}
.bar-scene-etat.valide{color:#1e6b36}
.bar-scene-etat.refuse{color:#9b1c2e}
.bar-scene .bouton.gros{width:100%}
/* Un telephone regle pour reduire les animations voit le code tout de suite, sans chope. */
@media (prefers-reduced-motion:reduce){
  .bar-scene .bar-chope,.bar-scene .bar-eclats{display:none}
  .bar-scene .bar-scene-qr{opacity:1;transform:none;animation:none!important}
  .bar-pastille-v.attente::before{animation:none}
  .bar-avion{display:none}
}

/* ---- les abonnements ---- */
.abo-prix{font-size:1.05rem}
.abo-visuel{display:block;width:100%;max-height:360px;object-fit:cover;border-radius:10px;margin:.6rem 0}
.abo-description{white-space:pre-line}
.abo-contenu{padding-left:1.2rem}
.abo-contenu li{margin:.25rem 0}
.abo-formule fieldset{margin:1rem 0}
.abo-etat{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:.4rem 1rem;margin:1rem 0}
.abo-etat dt{font-weight:700;color:#4a5360}
.abo-etat dd{margin:0;overflow-wrap:anywhere}
@media(max-width:520px){.abo-etat{grid-template-columns:1fr}.abo-etat dd{margin-bottom:.4rem}}
.abo-geste{border:1px solid #dfe5ee;border-radius:8px;padding:.3rem .8rem;margin:.8rem 0;background:#fff}
.abo-geste summary{min-height:44px;display:flex;align-items:center;cursor:pointer;font-weight:700}
.abo-resilier{margin-top:2rem}
.abo-champ-carte{min-height:56px;border:1px solid #cfd6e0;border-radius:8px;padding:.8rem;margin:1rem 0;background:#fff}
.abo-carte-page .bouton.gros{width:100%}
.abo-admin .case,.abo-formule .case{min-height:44px}
.ticket-detail{display:block;color:#4a5360;font-size:.85rem}

/* Le diaporama du pop-up et de la page d'événement reprend le mécanisme de l'accueil ;
   seules les dimensions changent. */
.popup-diapo{position:relative;height:210px;border-radius:6px;overflow:hidden;
  margin-bottom:.9rem;background:#eceff3}
.evenement-diapo{position:relative;height:340px;border-radius:8px;overflow:hidden;
  margin-bottom:1.2rem;background:#eceff3}
.popup-diapo .diapo,.evenement-diapo .diapo{position:absolute;inset:0;background-size:cover;
  background-position:center;opacity:0;transition:opacity .7s ease}
.popup-diapo .diapo.actif,.evenement-diapo .diapo.actif{opacity:1}
.popup-diapo .diapo-nav,.evenement-diapo .diapo-nav{position:absolute;top:50%;
  transform:translateY(-50%);background:rgba(0,0,0,.35);color:#fff;border:0;border-radius:50%;
  width:2rem;height:2rem;font-size:1.3rem;line-height:1;cursor:pointer}
.popup-diapo .diapo-nav.prec,.evenement-diapo .diapo-nav.prec{left:.5rem}
.popup-diapo .diapo-nav.suiv,.evenement-diapo .diapo-nav.suiv{right:.5rem}
.popup-diapo .diapo-puces,.evenement-diapo .diapo-puces{position:absolute;bottom:.2rem;left:0;
  right:0;display:flex;gap:0;justify-content:center}
.popup-diapo .puce,.evenement-diapo .puce{--puce:rgba(255,255,255,.7);--puce-t:.55rem;--puce-b:0px}
.popup-diapo .puce::before,.evenement-diapo .puce::before{background:var(--puce)}
.popup-diapo .puce.actif,.evenement-diapo .puce.actif{--puce:#fff}
.evenement-diapo .diapo-int{position:absolute;left:0;right:0;bottom:0;padding:1.4rem 1.2rem .9rem;
  background:linear-gradient(transparent,rgba(0,0,0,.6));color:#fff}
.evenement-diapo .diapo-int p{margin:0;font-size:.95rem}
@media (prefers-reduced-motion:reduce){
  .popup-diapo .diapo,.evenement-diapo .diapo{transition:none}
}
.images-evenement{display:flex;flex-wrap:wrap;gap:.8rem;margin:.8rem 0}
.image-evenement{border:1px solid #ddd;border-radius:6px;padding:.4rem;width:150px;text-align:center}
.image-evenement img{width:100%;height:90px;object-fit:cover;border-radius:4px;display:block}
.image-evenement form{margin:.3rem 0 0}

/* ---- le laissez-passer ---- */
.laissez-passer{text-align:center;margin:1rem 0}
.laissez-passer img{background:#fff;padding:.7rem;border:1px solid #ddd;border-radius:8px;
  width:240px;height:240px;max-width:80vw}
.laissez-passer .note{max-width:34ch;margin:.5rem auto 0}
.laissez-passer-liste{margin:.8rem 0 .2rem;text-align:left;display:flex;gap:1rem;align-items:center;flex-wrap:wrap}
.laissez-passer-liste img{width:170px;height:170px;padding:.5rem}
.laissez-passer-liste .note{margin:0;max-width:30ch}
.laissez-passer-liste code{background:#f4f4f4;border:1px dashed #bbb;border-radius:4px;
  padding:.1rem .4rem;letter-spacing:.12em;font-family:ui-monospace,Menlo,Consolas,monospace}
.laissez-passer-vendeur{text-align:center;padding-block:1.5rem}
.laissez-passer-vendeur h1{font-size:1.9rem;margin:.3rem 0}
.eyebrow-vendeur{font-size:.82rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--vert)}
.gros-succes{font-size:1.3rem;font-weight:700;padding:1.2rem}
.colis-contenu{border:1px solid #ddd;border-radius:8px;padding:1rem 1.2rem;margin:1.2rem 0;
  text-align:left}
.colis-contenu h2{margin-top:0;font-size:1.05rem}
.colis-contenu ul{margin:.4rem 0;padding-left:1.2rem}
.bouton-remise{width:100%;padding:1rem;font-size:1.1rem}
.rappel-scan{border:1px solid #cddcee;border-left:4px solid #3d72ab;background:#f6f9fd;
  border-radius:6px;padding:.85rem 1.1rem;margin:1rem 0}

/* --- le bar a biere mobile : la grille des formules ------------------------------------- */
.formules{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:1rem;
margin:.9rem 0 1.4rem}
.formule{border:1px solid var(--bord);border-radius:var(--rayon);padding:1.1rem 1.2rem;
background:var(--blanc);display:flex;flex-direction:column;gap:.45rem}
.formule h3{margin:0;font-size:1.02rem}
.formule-prix{margin:0;font-size:1.3rem;color:var(--rouge);line-height:1.2}
.formule-prix strong{font-weight:700}
.formule-prix em{font-size:.95rem;color:var(--gris);font-style:italic}
.formule-unite{display:block;font-size:.8rem;color:var(--gris);letter-spacing:.02em}
.formule-compris{margin:0;font-size:.9rem;color:#6e6e6e;line-height:1.65}
.formules-conditions{border-left:3px solid var(--rouge);background:var(--gris-clair);
padding:.9rem 1.1rem;border-radius:0 var(--rayon) var(--rayon) 0;margin:0 0 .8rem;font-size:.92rem}
.formules-conditions p:first-child{margin-top:0}
.formules-conditions p:last-child{margin-bottom:0}
.formules-alcool{font-size:.82rem;color:#8c8c8c;margin:0 0 1.6rem}
/* Le texte de presentation d'avant les blocs, montre tel quel dans l'administration. */
.ancien-texte{white-space:pre-wrap;background:var(--gris-clair);border:1px solid var(--bord);
border-radius:var(--rayon);padding:.7rem .9rem;font-size:.85rem;max-height:14rem;overflow:auto}

/* ---------- le traqueur ---------- */
/* Les onglets de l'ecran : deux vues d'une meme periode, jamais deux periodes. */
.bo-onglets{display:flex;gap:.4rem;margin:1rem 0 .4rem;border-bottom:1px solid var(--bord)}
.bo-onglets a{padding:.5rem .95rem;border:1px solid transparent;border-bottom:0;
  border-radius:var(--rayon) var(--rayon) 0 0;font-size:.9rem;color:#666;text-decoration:none}
.bo-onglets a.actif{background:#fff;border-color:var(--bord);color:var(--encre);font-weight:600;
  margin-bottom:-1px}
.bo-onglets a:hover{color:var(--encre)}
/* Les vingt-quatre heures, toujours les vingt-quatre : une case vide est une information. */
.heures{display:flex;align-items:flex-end;gap:2px;height:120px;margin:1rem 0 1.6rem;
  padding-bottom:1.1rem;position:relative}
.heure{flex:1;height:100%;display:flex;flex-direction:column;justify-content:flex-end;
  position:relative}
.heure .barre{background:var(--rouge);border-radius:2px 2px 0 0;min-height:1px}
.heure .etiquette{position:absolute;bottom:-1.05rem;left:0;right:0;text-align:center;
  font-size:.62rem;color:#999}
.heure:hover .barre{background:var(--bleu)}
/* Une requete refusee se voit sans la chercher ; une session ouverte aussi. */
.tableau tr.refus td{color:#9b1c1c}
.tableau tr.en-cours td{background:#f2f8ff}
.alerte-pastille{display:inline-block;background:#9b1c1c;color:#fff;border-radius:999px;
  padding:.05rem .5rem;font-size:.7rem;font-weight:600}
.formulaire.inline{display:flex;flex-direction:row;flex-wrap:wrap;align-items:flex-end;gap:.8rem;margin:.8rem 0}
.formulaire.inline label{margin:0}
.formulaire.inline>label,.formulaire.ligne>label{max-width:100%;min-width:0}
.formulaire.inline .bouton{margin:0}
/* La carte du traqueur : un fond servi a part (donc mis en cache) et une couche de points. */
.carte-monde{position:relative;margin:1rem 0;border:1px solid var(--bord);
  border-radius:var(--rayon);background:#f7f9fb url(/static/images/monde.svg) center/contain no-repeat;
  aspect-ratio:1000/394}
.carte-monde svg{position:absolute;inset:0;width:100%;height:100%}
.carte-monde .point{fill:var(--rouge);fill-opacity:.35;stroke:var(--rouge);stroke-width:.8}
.carte-monde .point:hover{fill-opacity:.7}

/* --- la liste de propositions d'adresses ---------------------------------
   Elle est DESSINEE SOUS LE CHAMP, dans son cadre. La liste native du navigateur
   (<datalist>) s'affiche, dans Safari, a l'autre bout de l'ecran, detachee du champ :
   inutilisable sur un telephone, et c'est sur un telephone qu'on remplit une adresse. */
label:has(> [data-adresse]){position:relative}
.propositions{position:absolute;left:0;right:0;top:100%;z-index:60;background:#fff;
  border:1px solid var(--trait,#d8d8d8);border-radius:6px;box-shadow:0 8px 24px rgba(0,0,0,.14);
  max-height:16rem;overflow-y:auto}
.propositions[hidden]{display:none}
.proposition{display:block;width:100%;text-align:left;padding:.55rem .7rem;border:0;
  background:none;font:inherit;color:inherit;cursor:pointer;line-height:1.3}
.proposition + .proposition{border-top:1px solid var(--trait,#eee)}
.proposition:hover,.proposition.choisie{background:var(--rouge,#c62828);color:#fff}
@media (max-width:640px){.propositions{max-height:12rem}.proposition{padding:.7rem}}

/* Le tableau des lignes d'une facture d'achat est large par nature : treize colonnes, et
   chacune porte un chiffre qu'on recopie d'une piece papier. Plutot que de le retrecir
   jusqu'a le rendre illisible, on le laisse defiler lateralement — c'est la seule facon de
   garder une ligne de facture sur UNE ligne d'ecran. */
.tableau-large{overflow-x:auto;max-width:100%}
.tableau-large .tableau{min-width:1100px}
.tableau-large .tableau th,.tableau-large .tableau td{padding:.35rem .3rem;font-size:.82rem}
.tableau-large input,.tableau-large select{font-size:.82rem;padding:.25rem .3rem;width:100%}

/* Le squelette des rôles : l'espace d'un (SA), la liste des accès, les cases de permissions. */
.carte-acces{display:block;padding:1rem;border:1px solid var(--bord);border-radius:var(--rayon);
  text-decoration:none;color:inherit;background:#fff}
.carte-acces:hover{border-color:var(--rouge)}
.cases-perms{border:1px solid var(--bord);border-radius:var(--rayon);padding:.8rem 1rem;
  margin:.4rem 0;display:flex;flex-direction:column;gap:.45rem}
.cases-perms legend{font-family:Montserrat,sans-serif;font-size:.78rem;text-transform:uppercase;
  letter-spacing:.03em;padding:0 .4rem}
.cases-perms .case{flex-direction:row;align-items:baseline;gap:.5rem;font-weight:400}
.bloc-role{border:1px solid var(--bord);border-radius:var(--rayon);padding:1rem;margin:1rem 0}
.ligne-boutons{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:.4rem}
.etiquette{display:inline-block;background:#1c3d63;color:#fff;border-radius:3px;
  padding:0 .4rem;font-size:.72rem;vertical-align:middle}

/* La fenêtre courrier : un rail à gauche (boîtes + dossiers), le corps à droite. */
.courrier{display:flex;gap:1.2rem;align-items:flex-start;margin-top:1rem}
.courrier-rail{flex:0 0 210px;border-right:1px solid var(--bord);padding-right:1rem}
.courrier-boites{display:flex;flex-wrap:wrap;gap:.3rem;margin-bottom:.8rem}
.courrier-boites a,.courrier-dossiers a{display:block;padding:.35rem .5rem;border-radius:6px;
  text-decoration:none;color:inherit;font-size:.9rem}
.courrier-boites a.ici,.courrier-dossiers a.ici{background:#1c3d63;color:#fff}
.courrier-boite-seule{font-family:Montserrat,sans-serif;font-weight:700;margin:.2rem 0 .8rem}
.courrier-dossiers{display:flex;flex-direction:column;gap:.15rem}
.courrier-composer{margin-top:1rem}
.courrier-corps{flex:1 1 auto;min-width:0}
.courrier-liste td{padding:.45rem .4rem;vertical-align:top}
.courrier-de{max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.9rem}
.courrier-sujet a{text-decoration:none;color:inherit}
.courrier-liste tr.non-lu td{font-weight:700;background:#fff8f0}
.courrier-date{white-space:nowrap}
.courrier-entete{margin:.4rem 0 .8rem;font-size:.92rem}
.courrier-html{width:100%;height:calc(100vh - 20rem);min-height:420px;border:1px solid var(--bord);
  border-radius:var(--rayon);background:#fff}
/* Le repli du telephone : invisible par defaut, et partout sans le script (courrier.js l'arme). */
.courrier-tiroir-bouton,.courrier-resume,.courrier-details-bouton{display:none}
.courrier-actions{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;margin-top:1rem}
.courrier-actions form{margin:0}
.courrier-remonter{margin-top:.6rem}
.courrier-signe{margin:.2rem 0 .6rem}
.carnet-liste{list-style:none;margin:-.35rem 0 .7rem;padding:.25rem 0;border:1px solid var(--bord);
  border-radius:8px;background:var(--carte,#fff);box-shadow:0 4px 14px rgba(16,24,40,.10);
  max-height:15rem;overflow:auto;font-size:.9rem}
.carnet-liste li{padding:.45rem .75rem;cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.carnet-liste li:hover{background:rgba(0,76,141,.08)}
.courrier-pages{display:flex;gap:1rem;align-items:center;margin-top:.8rem}
.courrier-recherche{margin-bottom:.8rem}
@media (max-width:720px){.courrier{flex-direction:column}.courrier-rail{flex-basis:auto;
  border-right:0;border-bottom:1px solid var(--bord);padding:0 0 .8rem;width:100%}
  .courrier-dossiers{flex-direction:row;flex-wrap:wrap}
  /* le message d'abord : les dossiers en tiroir, l'en-tete replie derriere « Détails » */
  .courrier.avec-tiroir:not(.tiroir-ouvert) .courrier-rail{display:none}
  .courrier.avec-tiroir .courrier-tiroir-bouton{display:inline-flex;align-items:center;gap:.3rem;
    min-height:44px;padding:.4rem .9rem;margin:0 0 .6rem;border:1px solid var(--bord);border-radius:8px;
    background:var(--carte,#fff);color:inherit;font:inherit;font-weight:600;cursor:pointer}
  /* « ← la liste » se range a cote de « ☰ Réception » : une ligne de gagnee */
  .courrier.avec-tiroir .courrier-retour{display:inline-block;margin:0 0 .6rem .8rem;vertical-align:middle}
  /* qui · quand a gauche (sur deux lignes au plus), « Détails » a droite, sur la meme ligne */
  .courrier-resume{display:flex;align-items:flex-start;gap:.6rem;margin:.2rem 0 .5rem;font-size:.92rem}
  .courrier-resume span{flex:1 1 auto;min-width:0}
  .courrier-message.avec-details .courrier-details-bouton{display:inline-flex;align-items:center;flex:0 0 auto;
    min-height:36px;padding:.2rem .7rem;border:1px solid var(--bord);border-radius:6px;
    background:transparent;color:inherit;font:inherit;font-size:.85rem;cursor:pointer}
  .courrier-message.replie .courrier-details{display:none}
  .courrier-html{height:calc(100vh - 11rem);height:calc(100dvh - 11rem);min-height:320px}
  /* la liste : une carte par message — l'expediteur et la date sur une ligne, l'objet dessous */
  .admin-corps table.courrier-liste{display:block;overflow:visible;border:0;box-shadow:none;background:transparent}
  .tableau-cadre:has(>.courrier-liste){overflow:visible}
  .courrier-liste tbody{display:block}
  .courrier-liste tr{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.1rem .6rem;padding:.55rem .6rem;
    border:1px solid var(--bord);border-radius:8px;margin:0 0 .45rem;background:var(--carte,#fff)}
  .courrier-liste td{display:block;padding:0;border:0}
  .courrier-liste .courrier-de{max-width:none;grid-column:1;grid-row:1}
  .courrier-liste .courrier-date{grid-column:2;grid-row:1;font-size:.8rem}
  .courrier-liste .courrier-sujet{grid-column:1/-1;grid-row:2}}

/* ---- Sur un ecran tactile (telephone, tablette), aucun champ sous 16 px : l'iPhone et l'iPad
        zoomeraient toute la page au premier toucher et la laisseraient zoomee. Les champs qui ont
        leur propre taille sont nommes ici. Un bouton-lien garde au moins 24 px de haut. ---- */
@media(max-width:760px),(pointer:coarse){
  button.lien{min-height:24px}
  input,select,textarea,.formulaire textarea,.formulaire-bloc select,.tableau-large input,.tableau-large select,
  .formulaire-bloc input[type=text],.formulaire-bloc input[type=email],.formulaire-bloc input:not([type]),
  .formulaire-bloc textarea,.ajout select,.fil-ecrire textarea{font-size:16px}
}
/* ---- Les pages juridiques : une ligne de lecture confortable (environ 80 signes). ---- */
.page-legale p,.page-legale li{max-width:80ch}
/* ---- La comptabilite : ses onglets, et des chiffres qui s'alignent a la virgule. ---- */
.compta-onglets{position:relative;display:flex;gap:.3rem;flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;
  margin:.4rem 0 1rem;border-bottom:2px solid #d4dbe6}
.compta-onglets::-webkit-scrollbar{display:none}
.compta-onglets a{flex:none;white-space:nowrap;padding:.55rem .9rem;min-height:44px;display:inline-flex;align-items:center;font-weight:600;
  color:#4a5566;border-bottom:3px solid transparent;margin-bottom:-2px;text-decoration:none}
.compta-onglets a[aria-current=page]{color:var(--bleu,#1d3b6a);border-bottom-color:currentColor}
.tableau td.nombre,.tableau th.nombre{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.compta-saisie input{width:100%;min-width:6rem}
.compta-saisie tr[hidden]{display:none}
/* Au telephone, chaque ligne de l'ecriture devient une carte : le compte, puis debit et credit
   cote a cote, puis le libelle facultatif. Plus de colonne coupee au bord de l'ecran. */
@media(max-width:700px){
  .compta-saisie,.compta-saisie tbody{display:block}
  .compta-saisie tr:first-child{display:none}
  .compta-saisie tr{display:grid;grid-template-columns:1fr 1fr;gap:.4rem;padding:.6rem .5rem;border-bottom:1px solid #e3e8ef}
  .compta-saisie td,.compta-saisie th{display:block;padding:0;border:0;min-width:0}
  .compta-saisie tr.saisie-ligne td:nth-child(1){grid-column:1/-1;order:1}
  .compta-saisie tr.saisie-ligne td:nth-child(3){order:2}
  .compta-saisie tr.saisie-ligne td:nth-child(4){order:3}
  .compta-saisie tr.saisie-ligne td:nth-child(2){grid-column:1/-1;order:4}
  .compta-saisie input{min-width:0;font-size:16px}
  .compta-saisie tr:last-child th{grid-column:1/-1}
}
.compta-bilan{display:grid;grid-template-columns:1fr;gap:1rem}
@media(min-width:900px){.compta-bilan{grid-template-columns:1fr 1fr;align-items:start}}
.compta-periodes a{font-weight:500}
/* ---- Les depenses : la photo a cote de la saisie, sur grand ecran ; l'une sous l'autre au telephone. ---- */
.depense-photo{position:relative;display:inline-flex;align-items:center;justify-content:center;min-height:56px;cursor:pointer}
.depense-photo input[type=file]{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%}
.depense-grille{display:grid;grid-template-columns:minmax(0,1fr);gap:1.2rem}
.depense-grille>*{min-width:0}
@media(min-width:900px){.depense-grille{grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);align-items:start}}
.depense-apercu{display:block;max-width:100%;max-height:70vh;margin:0 auto;border-radius:8px;box-shadow:0 2px 12px rgba(0,0,0,.15)}
.depense-empreinte{word-break:break-all}
.depense-ocr{white-space:pre-wrap;overflow-wrap:anywhere;max-width:100%;font-size:.85rem;max-height:40vh;overflow:auto;background:#f6f7f9;padding:.6rem;border-radius:6px}
.depense-tva{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.5rem}
.depense-tva legend{grid-column:1/-1}
/* ---- Le ticket du client : bon et ticket de caisse, sur un ecran fige ----
   Une colonne qui tient dans l'ecran : en haut, le tampon vivant et le code a montrer, cote a
   cote ; puis la note (la maison, le numero, le lieu), la liste des articles — SEULE a defiler,
   dans son cadre —, et les totaux, toujours visibles. Sur un petit ecran, tout se resserre, mais
   la liste garde toujours de quoi montrer deux articles. */
body.ticket-page{margin:0;background:#f3f5f8;height:100dvh;overflow:hidden}
.ticket-fige{height:100dvh;box-sizing:border-box;max-width:560px;margin:0 auto;display:flex;flex-direction:column;
  padding:max(.6rem,env(safe-area-inset-top)) .8rem max(.6rem,env(safe-area-inset-bottom));gap:.45rem}
.ticket-fige>*{flex:none;margin:0}
.ticket-haut{display:flex;gap:.6rem;align-items:stretch}
.ticket-haut .bon-tampon{flex:1 1 auto;margin:0;padding:.7rem .6rem;display:flex;flex-direction:column;justify-content:center;
  text-align:center;min-width:0}
.ticket-haut .bon-mot{font-size:1.15rem}
.ticket-haut .bon-numero{font-size:clamp(2.2rem,8dvh,4rem);white-space:nowrap}
.bon-numero .bon-n{font-size:.42em;vertical-align:.95em;margin-right:.08em;letter-spacing:0}
.ticket-haut .bon-horloge{font-size:1.15rem}
.ticket-haut .bon-qr{flex:none;width:auto;height:clamp(92px,min(19dvh,36vw),170px);aspect-ratio:1/1;margin:0;
  padding:.35rem;box-sizing:border-box;align-self:center}
.ticket-fige .bon-consigne{font-size:1rem;line-height:1.3;text-align:center}
.ticket-note{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;background:#fff;border:1px dashed #b9c3d1;
  border-radius:10px;padding:.6rem .7rem;gap:.35rem;overflow:hidden}
.ticket-note>*{flex:none;margin:0}
.ticket-note .ticket-emetteur{font-size:.8rem;line-height:1.3;text-align:center;color:#333}
.ticket-note .ticket-ref{font-size:.8rem;line-height:1.3;text-align:center;color:#4a5360}
.ticket-lignes{flex:1 1 auto !important;min-height:5.6rem;overflow:auto;overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;border-top:1px solid #eef1f5;border-bottom:1px solid #eef1f5}
.ticket-lignes .tableau{margin:0;font-size:.9rem;width:100%}
.ticket-lignes .tableau th,.ticket-lignes .tableau td{padding:.3rem .25rem}
.ticket-lignes .tableau td:not(:first-child),.ticket-lignes .tableau th:not(:first-child){text-align:right;white-space:nowrap}
.ticket-lignes thead th{position:sticky;top:0;background:#fff}
.ticket-totaux{display:grid;gap:.1rem;font-size:.9rem}
.ticket-totaux>div{display:flex;justify-content:space-between;gap:.6rem}
.ticket-totaux dt{font-weight:600}.ticket-totaux dd{margin:0;text-align:right;font-variant-numeric:tabular-nums}
.ticket-totaux .ticket-tva{font-size:.85em}.ticket-totaux .ticket-tva dt{font-weight:500}.ticket-base{color:#4a5360}
.ticket-totaux .ticket-ttc{font-size:1.15rem;font-weight:800;border-top:1px solid #d4dbe6;padding-top:.2rem}
.ticket-reglement{font-size:.8rem;line-height:1.3;color:#4a5360;text-align:center}
/* La page du client AVANT de payer : le montant en tete, le bouton qui mene a Revolut en bas,
   toujours a l'ecran (la liste des articles, seule, defile). */
/* Aux couleurs de la chope TAGAZOU : bleu roi, et le liseré bleu ciel, rouge, bleu roi. */
.bon-tampon.apayer{background:#1f2f86}
.bon-tampon.apayer::after,.bon-tampon.attente::after{content:"";position:absolute;left:0;right:0;bottom:0;height:6px;
  background:linear-gradient(90deg,#35a9e1 0 33.3%,#d8262f 33.3% 66.6%,#2b3f9e 66.6%)}
.ticket-page .bon-tampon.attente{background:#1a7fbf}
.ticket-mentions{display:block;font-size:.72rem;font-weight:400;line-height:1.3;color:#5b6573;margin-top:.15rem}
/* La chope au milieu de la page, dans la place que la commande laisse libre. Avant de payer,
   elle attend, vide ; pendant la confirmation, c'est elle qu'on regarde : la commande se
   resserre et la chope garde au moins un tiers de l'ecran. */
.ticket-fige{overflow-x:clip}
.ticket-scene{flex:1 1 0 !important;min-height:0;display:flex;align-items:center;justify-content:center}
.ticket-scene .ticket-chope{position:relative;height:100%;max-height:320px;aspect-ratio:200/240}
.ticket-chope .chope-tagazou{position:relative;z-index:2;display:block;width:100%;height:100%}
.ticket-fige.attente .ticket-scene{min-height:34dvh}
.ticket-fige.apayer .ticket-scene{padding-block:.6rem}
.ticket-fige.attente .ticket-note{flex:0 1 auto}
.ticket-fige.attente .ticket-lignes{flex:0 1 auto !important;min-height:3.2rem}
.ticket-fige.attente .ticket-haut .bon-numero{font-size:clamp(1.9rem,6dvh,3rem)}
/* Paiement en cours : la chope se remplit, la mousse monte, et l'avion en papier TAGAZOU en fait
   le tour en montant — devant, puis derriere le verre. */
.ticket-chope.remplit .chope-biere{animation:chope-monte 6s ease-in-out infinite}
.ticket-chope.remplit .chope-mousse{animation:mousse-monte 6s ease-out infinite}
.ticket-chope.remplit .chope-bulle{animation:chope-bulle 2s ease-out infinite}
.ticket-chope.remplit .chope-bulle.b2{animation-delay:.7s}.ticket-chope.remplit .chope-bulle.b3{animation-delay:1.3s}
@keyframes chope-monte{0%{transform:scaleY(.04)}78%,100%{transform:scaleY(1)}}
@keyframes mousse-monte{0%,68%{transform:translateY(160px) scale(.4);opacity:0}84%,100%{transform:translateY(0) scale(1);opacity:1}}
.avion-tourne{position:absolute;width:34%;height:auto;left:50%;top:90%;z-index:3;pointer-events:none;
  transform:translate(-50%,-50%);animation:avion-spirale 6s linear infinite}
@keyframes avion-spirale{
  0%{left:50%;top:90%;z-index:3;transform:translate(-50%,-50%) scale(1,1);opacity:0}
  5%{opacity:1}
  12.5%{left:88%;top:81%;z-index:3;transform:translate(-50%,-50%) scale(.8,.8)}
  12.6%{z-index:1}
  25%{left:50%;top:70%;z-index:1;transform:translate(-50%,-50%) scale(-.6,.6)}
  37.4%{z-index:1}
  37.5%{left:12%;top:60%;z-index:3;transform:translate(-50%,-50%) scale(.8,.8)}
  50%{left:50%;top:50%;z-index:3;transform:translate(-50%,-50%) scale(1,1)}
  62.5%{left:88%;top:40%;z-index:3;transform:translate(-50%,-50%) scale(.8,.8)}
  62.6%{z-index:1}
  75%{left:50%;top:30%;z-index:1;transform:translate(-50%,-50%) scale(-.6,.6)}
  87.4%{z-index:1}
  87.5%{left:12%;top:20%;z-index:3;transform:translate(-50%,-50%) scale(.8,.8)}
  95%{opacity:1}
  100%{left:50%;top:10%;z-index:3;transform:translate(-50%,-50%) scale(1,1);opacity:0}}
@media (prefers-reduced-motion:reduce){
  .ticket-chope.remplit .chope-biere{animation:none;transform:scaleY(1)}
  .ticket-chope.remplit .chope-mousse{animation:none;transform:none;opacity:1}
  .ticket-chope.remplit .chope-bulle,.avion-tourne{animation:none;display:none}}
.ticket-haut .ticket-montant{font-size:clamp(2rem,7dvh,3.4rem)}
.ticket-payer{display:flex;align-items:center;justify-content:center;box-sizing:border-box;width:100%;
  min-height:56px;font-size:1.25rem;font-weight:800;text-decoration:none;border-radius:14px}
.ticket-enseigne{font-size:1.15rem;letter-spacing:.06em}
/* Avant de payer, la note prend la place de ce qu'elle porte ; le bouton reste en bas, sous le
   pouce. Une longue commande defile dans son cadre, comme sur le ticket. */
.ticket-fige.apayer .ticket-note{flex:0 1 auto}
.ticket-fige.apayer .ticket-lignes{flex:0 1 auto !important;min-height:3.2rem}
.ticket-fige.apayer>.ticket-payer{margin-top:auto}
.ticket-reglement a{display:inline-block;min-height:44px;line-height:44px;padding:0 .4rem;font-weight:700}
/* Un petit ecran (iPhone SE et plus petit) : le tampon, le texte de la maison et les marges se
   resserrent ; la maison tient sur moins de lignes (plus petite, meme contenu). */
@media (max-height:700px){
  .ticket-fige{gap:.3rem;padding-top:max(.4rem,env(safe-area-inset-top));padding-bottom:max(.4rem,env(safe-area-inset-bottom))}
  .ticket-haut .bon-tampon{padding:.4rem .5rem}
  .ticket-haut .bon-mot,.ticket-haut .bon-horloge{font-size:1rem}
  .ticket-haut .bon-qr{height:clamp(84px,17dvh,130px)}
  .ticket-fige .bon-consigne{font-size:.88rem}
  .ticket-note{padding:.4rem .5rem;gap:.2rem}
  .ticket-note .ticket-emetteur,.ticket-note .ticket-ref{font-size:.68rem;line-height:1.25}
  .ticket-lignes{min-height:5rem}
  .ticket-lignes .tableau{font-size:.82rem}
  .ticket-lignes .tableau th,.ticket-lignes .tableau td{padding:.2rem .2rem}
  .ticket-totaux{font-size:.82rem}
  .ticket-totaux .ticket-ttc{font-size:1rem}
  .ticket-reglement{font-size:.7rem}
}
/* ---- Les pieces jointes d'un courriel, et les pieces recues aux achats ---- */
.courrier-pieces{margin:.6rem 0 1rem;padding:.6rem .8rem;border:1px solid #e3e8ef;border-radius:8px;background:#fafbfc}
.courrier-pieces h3{margin:0 0 .4rem;font-size:1rem}
.courrier-pieces ul{list-style:none;margin:0;padding:0}
.courrier-pieces li{padding:.45rem 0;border-top:1px solid #eef1f5;overflow-wrap:anywhere}
.courrier-pieces li:first-child{border-top:0}
.courrier-piece-gestes{display:flex;flex-wrap:wrap;gap:.35rem;align-items:center;margin:.35rem 0 0}
.courrier-piece-gestes .bouton{min-height:40px}
.piece-lue{margin:.4rem 0 .8rem}
.pieces-a-classer{padding-left:1.1rem}
/* La releve du courrier : un message par carte, ses pieces dessous, chacune avec son issue. */
.releve-etat{margin:.4rem 0 1rem;padding:.6rem .8rem;border:1px solid #e3e8ef;border-radius:8px;background:#fafbfc}
.releve-etat p{margin:.2rem 0 .5rem}
.releve-reglages{margin:0 0 1rem}
.releve-reglages summary{cursor:pointer;min-height:40px;display:flex;align-items:center}
.releve-message{margin:.6rem 0;padding:.6rem .8rem;border:1px solid #e3e8ef;border-radius:8px;overflow-wrap:anywhere}
.releve-sujet{margin:0 0 .3rem}
.releve-sujet a{display:inline-block;margin-left:.3rem}
.releve-pieces{list-style:none;margin:0;padding:0}
.releve-pieces li{padding:.4rem 0;border-top:1px solid #eef1f5}
.releve-pieces li:first-child{border-top:0}
.releve-nom{font-weight:600;margin-right:.4rem}
/* La banque : les etapes du branchement, le certificat (qui ne doit jamais elargir la page), les mouvements. */
.banque-etapes{padding-left:1.2rem}
.banque-etapes li{margin:.5rem 0;overflow-wrap:anywhere}
.banque-etapes li.en-cours{font-weight:500}
.banque-code{white-space:pre-wrap;overflow-wrap:anywhere;word-break:break-all;font-size:.8rem;background:#f5f7fa;padding:.2rem .35rem;border-radius:4px}
pre.banque-code{max-height:12rem;overflow:auto}
.banque-mouvement{margin:.5rem 0;padding:.5rem .7rem;border:1px solid #e3e8ef;border-radius:8px;overflow-wrap:anywhere}
.banque-mouvement p{margin:.2rem 0}
.banque-mouvement select,.banque-mouvement input{max-width:100%}
.banque-entree{color:#1c7c3c}
.banque-sortie{color:#b3261e}
/* Les consignes rapportees : une rangee de boutons sous les tuiles, un par consigne ; chaque
   appui deduit le montant de la consigne de l'achat en cours. */
.bar-retours{display:flex;flex-wrap:wrap;gap:.4rem;margin:.5rem 0 0}
.bar-retour{flex:1 1 9rem;min-height:44px;border:2px dashed #5f646c;border-radius:10px;background:#fff;color:#2f3640;
  font:inherit;font-weight:600;padding:.4rem .6rem;cursor:pointer}
.bar-retour.prise{border-style:solid;border-color:#2e7342;color:#2e7342}
.bar-retour-q{margin-left:.3rem}
/* L'import du catalogue SumUp : une carte par article, lisible au telephone. */
.import-sumup .import-ligne{border:1px solid #e3e8ef;border-radius:8px;padding:.6rem .8rem;margin:.5rem 0;min-width:0}
.import-sumup .import-ligne legend{padding:0 .3rem;overflow-wrap:anywhere}
.import-sumup .import-refus{opacity:.75}

/* ---- les QR en vitrail TAGAZOU (codes.vitrail) ----
   Le vitrail porte son propre cadre (le plomb) : pas de carte blanche autour. Il est plus haut
   que large ; sa hauteur suit toujours sa largeur, et on le montre aussi grand que la place le
   permet. */
.qr-vitrail{background:none!important;padding:0!important;border:0!important;border-radius:0!important;
  height:auto;aspect-ratio:auto}
.comptoir-qr.qr-vitrail{width:min(300px,80vw)}
/* A la caisse (ecran fige), le vitrail prend toute la place que laissent le montant et les
   boutons, sans jamais les pousser hors de l'ecran. */
body.mode-caisse .bar-fige .comptoir-qr.qr-vitrail{flex:1 1 0;min-height:min(300px,28dvh);max-height:min(380px,44dvh);height:auto;
  width:auto;max-width:86vw;aspect-ratio:auto;object-fit:contain}
/* Le coeur de la scene (la chope, puis le vitrail) se regle sur la HAUTEUR qui reste : la carte
   entiere — le montant, le code, ses six chiffres, l'etat, « Client suivant » — tient dans
   l'ecran sans defiler, du plus petit telephone au plus grand. */
.bar-scene-coeur{width:auto;height:min(377px,93.6vw,calc(100dvh - 360px));aspect-ratio:10/13;max-width:100%}
@media (max-height:700px){
  .bar-scene{padding:.5rem}
  .bar-scene-carte{padding:.6rem .8rem .8rem}
  .bar-scene-montant{font-size:1.8rem;margin:0 0 .2rem}
  .bar-scene-etat{margin:.4rem 0}
  .bar-scene-code{margin-top:.25rem}
  .bar-scene-coeur{height:min(377px,93.6vw,calc(100dvh - 300px))}
}
.bar-scene-qr.qr-vitrail{object-fit:contain}
.bon-qr.qr-vitrail{width:260px;max-width:76vw}
.ticket-haut .bon-qr.qr-vitrail{width:auto;aspect-ratio:auto;height:clamp(110px,min(24dvh,44vw),220px)}
@media (max-height:700px){.ticket-haut .bon-qr.qr-vitrail{height:clamp(96px,20dvh,150px)}}
.laissez-passer img.qr-vitrail{width:260px;height:auto;max-width:80vw}
.laissez-passer-liste img.qr-vitrail{width:170px;height:auto}
.qr-partenaire{display:block;width:240px;max-width:80vw}
.groupe-qr{display:block;width:min(260px,80vw);margin:.6rem 0 .2rem}


/* ---- le code a six chiffres du bar (« 123-456 ») ----
   Trois et trois, en gros, en chiffres de meme largeur : il se lit de loin et se dit a voix
   haute. Sous le vitrail du vendeur, sous le bon du client, et sur la page ou il se tape. */
.bon-code{font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;font-weight:800;letter-spacing:.06em;
  font-variant-numeric:tabular-nums;white-space:nowrap;color:#1f2f86}
.bon-qr-bloc{flex:none;margin:0;display:flex;flex-direction:column;align-items:center;gap:.15rem;align-self:center}
.bon-qr-bloc .bon-code{font-size:clamp(1.05rem,3.2dvh,1.45rem);line-height:1.1}
.ticket-code{text-align:center;font-size:.95rem;line-height:1.3}
.ticket-code .bon-code{font-size:1.35rem}
.ticket-code-ou{color:#4a5360;font-size:.85em}
.bar-scene-code{margin:.45rem 0 0;text-align:center;font-size:1rem;line-height:1.25}
.bar-scene-code .bon-code{font-size:1.7rem;margin:0 .15rem}
.bar-scene-code-ou{display:block;font-size:.85rem;color:#4a5360}
.bar-scene-code[hidden]{display:none}
/* Sur l'ecran de la vente, le code tient sur une ligne : le vitrail garde la place. */
body.mode-caisse .bar-fige>.bar-code-ligne{margin:.1rem 0 .2rem;white-space:nowrap}
.bar-code-ligne .bon-code{font-size:1.5rem}
/* L'onglet « A servir » : le champ du code et son bouton, sur une ligne, au-dessus des bons. */
.bar-code-saisie{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.2rem .5rem;align-items:end;margin:.1rem 0 .6rem}
.bar-code-saisie label{grid-column:1/-1;font-size:.9rem;font-weight:700}
.bar-code-saisie input{min-width:0;width:100%;box-sizing:border-box;min-height:48px;padding:.3rem .6rem;
  font:800 1.45rem/1 ui-monospace,"SF Mono",Menlo,Consolas,monospace;letter-spacing:.08em;border:2px solid #1f2f86;border-radius:10px}
.bar-code-saisie .bouton{min-height:48px}
/* La page du code : l'enseigne, la chope, le champ, le pave — tout tient dans l'ecran. La chope
   prend la place qui reste, et s'efface sur un tout petit ecran. */
.code-fige{text-align:center}
.code-enseigne{margin:0}
.code-chope{flex:1 1 0 !important;min-height:0;display:flex;justify-content:center;align-items:center}
.code-chope .chope-tagazou{height:100%;max-height:160px;width:auto}
.code-chope .chope-biere{transform:scaleY(1)}
.code-chope .chope-mousse{transform:none;opacity:1}
.code-titre{font-size:1.5rem;line-height:1.2}
.code-aide{font-size:.9rem;line-height:1.3;color:#4a5360}
.code-message{margin:0;font-size:.9rem}
.code-form{display:flex;flex-direction:column;gap:.45rem;width:100%;max-width:380px;margin:0 auto}
.code-champ{box-sizing:border-box;width:100%;min-height:62px;text-align:center;border:2px solid #1f2f86;border-radius:14px;
  background:#fff;color:#1f2f86;font:800 2.3rem/1 ui-monospace,"SF Mono",Menlo,Consolas,monospace;letter-spacing:.1em}
.code-champ::placeholder{color:#b9c3d1}
.code-pave{display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:minmax(46px,7.5dvh);gap:.4rem}
.code-pave[hidden]{display:none}
.code-pave button{font:inherit;font-size:1.55rem;font-weight:700;border:1px solid #d4dbe6;border-radius:12px;
  background:#fff;color:#1f2a37;cursor:pointer;touch-action:manipulation}
.code-pave button:active{background:#e7edf6}
.code-ouvrir{width:100%;min-height:52px}
@media (max-height:600px){.code-chope{display:none}.code-aide{display:none}}

/* ---- la caisse deportee (/caisse) : un telephone prete, sans compte ----
   Pas de barre laterale : le volet d'encaissement prend toute la largeur. Une colonne qui tient
   dans l'ecran — l'enseigne, puis la caisse, dont seules les listes defilent. */
.caisse-deportee-page{--rail-l:0px}
.deportee-shell{height:100dvh;box-sizing:border-box;max-width:760px;margin:0 auto;display:flex;flex-direction:column;
  padding:max(.4rem,env(safe-area-inset-top)) .75rem max(.35rem,env(safe-area-inset-bottom))}
.deportee-tete{flex:none;display:flex;align-items:center;justify-content:space-between;gap:.5rem;min-height:32px}
.deportee-tete .ticket-enseigne{font-size:1rem}
.deportee-badge{font-size:.78rem;font-weight:700;color:#fff;background:#1f2f86;border-radius:999px;padding:.15rem .6rem;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:60%}
.deportee-corps{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;overflow:hidden}
.deportee-ouvrir{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;gap:.45rem;text-align:center}
.deportee-ouvrir>*{flex:none;margin:0}
.deportee-etat.ouverte{color:#1e6b36;font-weight:700}
.deportee-etat.attente{color:#8a4a00;font-weight:700}
.deportee-etat.fermee,.deportee-etat.expiree{color:#6b7482}
/* La caisse a confier : le vitrail d'ouverture tient dans l'ecran avec son code, sous le titre. */
.bar-deportee .comptoir-qr.qr-vitrail{display:block;width:auto;height:min(390px,104vw,52dvh);margin:.4rem auto .2rem}
.bar-deportee .bar-code-ligne{text-align:center;margin:0 0 .6rem}
/* ---- le scanner des bons (scanner_bar.js) : la camera plein ecran, un viseur carre ---- */
.bar-scanner-ouvrir{width:100%;margin:.1rem 0 .4rem;min-height:52px}
.bar-scanner{position:fixed;inset:0;z-index:60;background:#000;display:flex;flex-direction:column;align-items:center;
  justify-content:flex-end;padding:0 1rem max(1rem,env(safe-area-inset-bottom))}
.bar-scanner[hidden]{display:none}
.bar-scanner-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.bar-scanner-viseur{position:absolute;left:50%;top:44%;width:min(70vw,48dvh);aspect-ratio:1/1;transform:translate(-50%,-50%);
  border:4px solid #fff;border-radius:18px;box-shadow:0 0 0 100vmax rgba(0,0,0,.45);pointer-events:none}
.bar-scanner-message{position:relative;z-index:1;margin:0 0 .8rem;color:#fff;font-weight:700;text-align:center;
  text-shadow:0 1px 3px #000;max-width:30rem}
.bar-scanner-fermer{position:relative;z-index:1;width:100%;max-width:30rem}

/* ---- la caisse sur tablette (iPad et autres) ----
   Un grand ecran n'empile plus : la caisse (tuiles, onglets) d'un cote, et de l'autre le panier,
   toujours deplie, avec le vitrail du client — qui reste affiche pendant qu'on compose la vente
   suivante. Tablette couchee : le panier et le vitrail a droite. Tablette debout : en bas, cote a
   cote. La largeur jugee est celle de la caisse elle-meme (requete de conteneur) : la barre de
   l'administration, ouverte ou pliee, ne fausse rien. Le telephone ne change pas. */
body.mode-caisse .admin-corps,.deportee-corps{container:caisse / inline-size}
.bar-caisse-deportee .bar-onglets{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (min-width:700px) and (min-height:560px){.deportee-shell{max-width:none}}

@container caisse (min-width: 700px) {
  @media (min-height: 560px) {
    body.mode-caisse .bar-caisse{--caisse-large:1;display:grid;gap:.6rem 1rem;min-height:0}
    .bar-principal,.bar-cote{display:flex;flex-direction:column;min-height:0;min-width:0}
    .bar-principal{overflow:hidden}
    .bar-cote{gap:.6rem}
    /* Les tuiles, plus grandes : on tape debout, vite, sans viser. */
    .bar-tuiles{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:.6rem}
    .bar-tuile{min-height:118px;padding:.65rem;font-size:1.05rem;border-radius:12px}
    .bar-tuile img{height:66px}
    /* Le panier : une carte, toujours depliee ; l'encaissement s'y ouvre sur place, sans volet. */
    body.mode-caisse .bar-cote .bar-panier{position:relative;bottom:auto;display:flex;flex-direction:column;min-height:0;
      background:#fff;border:1px solid #d4dbe6;border-radius:14px;padding:.6rem .8rem;box-shadow:none}
    body.mode-caisse .bar-cote .bar-panier.ouvert{position:relative;left:auto;right:auto;bottom:auto;z-index:auto;max-height:none;
      overflow-y:auto;border-radius:14px;box-shadow:none;padding:.6rem .8rem}
    body.mode-caisse .bar-caisse:has(.bar-panier.ouvert)::before{content:none}
    body.mode-caisse .bar-cote .bar-panier.ouvert #panier-facturer{display:inline-flex}
    .bar-cote .bar-panier-resume::after{content:none}
    .bar-cote .bar-panier-contenu{display:flex;flex-direction:column;min-height:0;flex:1 1 auto}
    .bar-cote .bar-panier-contenu .bar-lignes{max-height:none;flex:1 1 auto;min-height:2.8rem}
    /* Le vitrail : un panneau, plus un voile. Entre deux ventes, la chope l'attend. */
    body.mode-caisse .bar-cote .bar-scene{position:relative;inset:auto;z-index:auto;background:none;padding:0;flex:1 1 0;min-height:0;display:flex;align-items:stretch}
    body.mode-caisse .bar-cote .bar-scene[hidden]{display:none}
    .bar-cote .bar-scene-carte{width:100%;max-height:none;display:flex;flex-direction:column;align-items:center;
      box-shadow:none;border:1px solid #d4dbe6;border-radius:14px;padding:.6rem .8rem .7rem;overflow:hidden;min-height:0}
    .bar-cote .bar-scene-carte>*{flex:none;margin-top:0;margin-bottom:.3rem}
    .bar-cote .bar-scene-montant{font-size:1.9rem;margin:0}
    .bar-cote .bar-scene-coeur{flex:1 1 0;min-height:140px;height:auto;width:auto;max-width:100%;aspect-ratio:10/13;align-self:center}
    .bar-cote .bar-scene-etat{margin:.2rem 0;font-size:.92rem}
    .bar-cote .bar-scene-code{margin-top:.1rem}
    .bar-cote .bar-scene .bouton.gros{width:100%}
    .bar-cote .bar-scene[hidden] ~ .bar-repos{display:flex}
    body.mode-caisse .bar-cote .bar-repos{flex:1 1 0;min-height:0;flex-direction:column;align-items:center;justify-content:center;gap:.4rem;
      border:1px dashed #b9c3d1;border-radius:14px;color:#4a5360;text-align:center;padding:.6rem}
    .bar-repos p{margin:0;font-weight:600}
    .bar-repos-chope{flex:0 1 auto;height:min(220px,60%);width:auto;min-height:0}
    .bar-repos-chope .chope-biere{transform:scaleY(1)}
    .bar-repos-chope .chope-mousse{transform:none;opacity:1}
  }
  /* Tablette couchee : deux colonnes. */
  @media (min-height: 560px) and (orientation: landscape) {
    body.mode-caisse .bar-caisse{grid-template-columns:minmax(0,1fr) clamp(320px,36cqw,460px);grid-template-rows:minmax(0,1fr)}
    body.mode-caisse .bar-cote .bar-panier{flex:0 1 auto;max-height:58%}
  }
  /* Tablette debout : la caisse en haut, et en bas le panier et le vitrail cote a cote. */
  @media (min-height: 560px) and (orientation: portrait) {
    body.mode-caisse .bar-caisse{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr) minmax(0,48%)}
    .bar-cote{flex-direction:row;align-items:stretch}
    body.mode-caisse .bar-cote .bar-panier{flex:1 1 42%;min-width:0}
    body.mode-caisse .bar-cote .bar-scene,body.mode-caisse .bar-cote .bar-repos{flex:1 1 58%;min-width:0}
    .bar-cote .bar-scene-montant{font-size:1.6rem}
  }
}

/* ---- le Wi-Fi des clients : un bandeau sur la caisse, deux vitraux dans la scene ---- */
.bar-wifi-bandeau{display:flex;align-items:center;justify-content:space-between;gap:.5rem;margin:.3rem 0;padding:.25rem .6rem;
  border-radius:10px;background:#e3f2fb;color:#0a4f7e;font-size:.82rem;font-weight:700;line-height:1.3}
.bar-wifi-bandeau form{margin:0}
.bar-wifi-bandeau .lien-bouton{min-height:36px}
.bar-scene-choix{display:grid;grid-template-columns:1fr 1fr;gap:.3rem;margin:0 0 .4rem;width:100%}
.bar-scene-choix button{min-height:44px;border:2px solid #1f2f86;border-radius:10px;background:#fff;color:#1f2f86;
  font:inherit;font-weight:800;cursor:pointer;touch-action:manipulation}
.bar-scene-choix button[aria-pressed=true]{background:#1f2f86;color:#fff}
.bar-scene-wifi{margin:.4rem 0 0;font-size:.9rem;font-weight:600;color:#0a4f7e;line-height:1.3}
.bar-scene-wifi[hidden]{display:none}
.bar-repos-wifi{flex:0 1 auto;min-height:0;max-height:70%;width:auto;max-width:100%;object-fit:contain}
.bar-wifi-qr{display:block;margin:.4rem 0}
/* L'affiche a imprimer : une page A4, le vitrail au centre. */
.wifi-affiche-page{margin:0;background:#fff;font-family:Montserrat,system-ui,sans-serif;color:#1f2a37}
.wifi-affiche{max-width:180mm;margin:0 auto;padding:12mm 8mm;text-align:center}
.wifi-affiche-enseigne{font-size:1.6rem;font-weight:800;letter-spacing:.08em;margin:0}
.wifi-affiche h1{font-size:2.6rem;margin:.4rem 0}
.wifi-affiche-sous,.wifi-affiche-pied{font-size:1.25rem;margin:.4rem 0}
.wifi-affiche-qr{display:block;width:min(120mm,80vw);height:auto;margin:6mm auto}
.wifi-affiche-nom{font-size:1.5rem;font-weight:800;margin:.4rem 0}
.wifi-affiche-nom span{font-size:1.1rem;font-weight:600}
@media print{.wifi-affiche{padding:0}}
/* La chope qui eclate, et ses eclats, ne prennent jamais le doigt : invisibles, ils recouvraient
   encore ce qui est autour du vitrail (les boutons « Wi-Fi » et « Commande »). */
.bar-chope,.bar-eclats{pointer-events:none}
/* Avec les deux vues (Wi-Fi puis commande), la scene porte une ligne de plus : le vitrail cede
   la hauteur de ces deux boutons, pour que la carte tienne toujours dans l'ecran. */
.bar-scene-carte:has(.bar-scene-choix) .bar-scene-coeur{height:min(377px,93.6vw,calc(100dvh - 420px))}
@media (max-height:700px){.bar-scene-carte:has(.bar-scene-choix) .bar-scene-coeur{height:min(377px,93.6vw,calc(100dvh - 372px))}}
/* Un petit telephone (hauteur de 600 px et moins) : les liens de la tete prennent une ligne ; la
   caisse reprend cette place sur ses marges, pour que le pave tienne toujours au-dessus du panier. */
@media (max-height:600px){
  body.mode-caisse .bar-tete .bar-tete-liens{line-height:1.3}
  body.mode-caisse .bar-principal>.alerte,body.mode-caisse .bar-principal>.succes{margin:.15rem 0}
  body.mode-caisse .bar-bandeau{margin-top:.25rem}
  body.mode-caisse .bar-onglets{margin:.2rem 0}
  body.mode-caisse .bar-onglets [role=tab]{min-height:40px}
}

/* ---- la porte d'age, comme sur l'ancien site ----
   Le fond de l'ancien site (Age Gate, WordPress) : l'aeroplane a l'aquarelle, voile de blanc a 50 %.
   Une version legere pour le telephone (64 Ko), une plus grande pour les grands ecrans. */
.page-age,.voile-age{background:linear-gradient(rgba(255,255,255,.5),rgba(255,255,255,.5)),
  url(/static/images/porte/fond-age-900.jpg) center/cover no-repeat,#e9eef4}
@media (min-width:901px){
  .page-age,.voile-age{background:linear-gradient(rgba(255,255,255,.5),rgba(255,255,255,.5)),
    url(/static/images/porte/fond-age-1600.jpg) center/cover no-repeat,#e9eef4}
}