/* =====================================================================
   Espaces de commande CBS Trading — styles
   Toutes les couleurs, la police, les angles et la densité viennent du
   thème de l'organisation (base de données), posés en variables par app.js.
   ===================================================================== */
:root{
  --surface:#FFFFFF; --surface-alt:#F2F5F9; --texte:#1B1F33; --texte-doux:#5A6178;
  --accent:#00AFC9; --sur-accent:#FFFFFF; --fort:#1E275F; --sur-fort:#FFFFFF; --filet:#E2E7EF;
  --rayon:14px; --rayon-s:10px; --police:'Plus Jakarta Sans', system-ui, sans-serif; --esp:1;
  --ok:#13734A; --ok-doux:#E6F4EC; --alerte:#B3261E; --alerte-doux:#FCEBEA; --attente:#8A5A00; --attente-doux:#FFF4D6;
  color-scheme: dark;
}
html{background:var(--surface-alt)}
body,.dlg,.aide,.voile,#aide-racine{color-scheme:light}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--surface-alt);color:var(--texte);font-family:var(--police);font-size:16px;line-height:1.5;
  min-height:100vh}
img{max-width:100%;display:block}
h1,h2,h3,h4{line-height:1.2;margin:0;font-weight:800;letter-spacing:-.01em}
p{margin:0 0 .8em}
a{color:var(--fort)}
button,input,select,textarea{font:inherit;color:inherit}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- chargement ---------- */
.chargement{min-height:60vh;display:flex;align-items:center;justify-content:center;gap:.7rem;color:var(--texte-doux)}
.roue{width:22px;height:22px;border:3px solid var(--filet);border-top-color:var(--fort);border-radius:50%;animation:tourne .8s linear infinite}
@keyframes tourne{to{transform:rotate(360deg)}}

/* ---------- en-tête ---------- */
.entete{background:var(--fort);color:var(--sur-fort)}
.entete__in{max-width:1100px;margin:0 auto;padding:calc(.7rem*var(--esp)) 16px;display:flex;align-items:center;gap:.8rem}
.entete__logo{width:44px;height:44px;border-radius:4px;background:#fff;object-fit:contain;padding:3px;flex:none}
.entete__nom{font-weight:800;font-size:1.02rem;line-height:1.2}
.entete__nom small{display:block;font-weight:500;font-size:.8rem;opacity:.85}
.entete__menu{margin-left:auto;display:flex;gap:.4rem;align-items:center}
.entete__btn{background:transparent;border:1.5px solid rgba(255,255,255,0.35);color:var(--sur-fort);
  border-radius:4px;padding:.45rem .85rem;font-weight:700;font-size:.88rem;cursor:pointer;display:inline-flex;align-items:center;gap:.4rem;min-height:40px}
@supports (color: color-mix(in srgb, red 50%, blue)){.entete__btn{border:1.5px solid color-mix(in srgb, var(--sur-fort) 35%, transparent)}}
.entete__btn:hover{background:rgba(255,255,255,0.12)}
@supports (color: color-mix(in srgb, red 50%, blue)){.entete__btn:hover{background:color-mix(in srgb, var(--sur-fort) 12%, transparent)}}
.entete__btn[aria-current="page"]{background:var(--sur-fort);color:var(--fort);border-color:var(--sur-fort)}
@media (max-width:640px){
  .entete__in{flex-wrap:wrap;gap:.55rem .7rem;padding-top:.6rem;padding-bottom:.65rem}
  .entete__logo{width:38px;height:38px}
  .entete__nom{font-size:.95rem;flex:1 1 0;min-width:0}
  .entete__menu{margin-left:0;width:100%}
  .entete__btn{flex:1 1 0;justify-content:center;padding:.4rem .5rem;font-size:.84rem;min-height:38px}
}

/* ---------- mise en page ---------- */
.page{max-width:1100px;margin:0 auto;padding:calc(1.4rem*var(--esp)) 16px calc(5rem*var(--esp))}
.titre-page{margin:0 0 calc(1.1rem*var(--esp))}
.titre-page h1{font-size:1.55rem}
.titre-page p{color:var(--texte-doux);margin:.35rem 0 0}
.surtitre{font-size:.78rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--accent);margin-bottom:.3rem}
.carte{background:var(--surface);border:1px solid var(--filet);border-radius:4px;padding:calc(1.15rem*var(--esp)) calc(1.2rem*var(--esp));margin-bottom:calc(1rem*var(--esp))}
.carte h2{font-size:1.15rem;margin-bottom:.6rem}
.carte h3{font-size:1rem;margin-bottom:.4rem}
.carte--etroite{max-width:460px;margin-left:auto;margin-right:auto}
.carte--demande{margin-top:1rem}
.donnees h3{font-size:1.02rem;margin:1.2rem 0 .35rem}
.donnees ul{padding-left:1.2rem;margin:.3rem 0 .6rem}
.donnees li{margin-bottom:.25rem}
.pied a{color:inherit}
.carte--demande .btn{width:100%}
.grille-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:calc(1rem*var(--esp))}
@media (max-width:760px){ .grille-2{grid-template-columns:1fr} .titre-page h1{font-size:1.32rem} }
.doux{color:var(--texte-doux)}
.petit{font-size:.86rem}
.centre{text-align:center}

/* ---------- boutons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:46px;padding:.6rem 1.25rem;border-radius:4px;
  border:1.5px solid var(--accent);background:var(--accent);color:var(--sur-accent);font-weight:800;font-size:.95rem;cursor:pointer;text-decoration:none;
  transition:filter .15s, background .15s}
.btn:hover{filter:brightness(.95)}
.btn:disabled{opacity:.5;cursor:not-allowed;filter:none}
.btn--second{background:var(--surface);color:var(--fort);border-color:var(--filet)}
.btn--second:hover{background:var(--surface-alt);filter:none}
.btn--texte{background:transparent;border-color:transparent;color:var(--texte-doux)}
.btn--texte:hover{background:var(--surface-alt);color:var(--fort);filter:none}
.btn--fort{background:var(--fort);border-color:var(--fort);color:var(--sur-fort)}
.btn--petit{min-height:38px;padding:.4rem .9rem;font-size:.86rem}
.btn--large{width:100%}
.btn:focus-visible,.puce:focus-visible,.entete__btn:focus-visible,.lien-btn:focus-visible{outline:3px solid var(--fort);outline-offset:2px}
.actions{display:flex;gap:.6rem;flex-wrap:wrap;align-items:center;margin-top:calc(1.1rem*var(--esp))}
.actions--fin{justify-content:space-between}
.actions__droite{display:flex;gap:.6rem;flex-wrap:wrap;margin-left:auto}
@media (max-width:600px){
  .actions--pile{flex-direction:column-reverse;align-items:stretch}
  .actions--pile .btn,.actions--pile .actions__droite{width:100%}
  .actions--pile .actions__droite{flex-direction:column-reverse}
}
.lien-btn{background:none;border:0;padding:.2rem 0;color:var(--fort);font-weight:700;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.retour{display:inline-flex;align-items:center;gap:.5rem;margin-bottom:1rem;background:var(--surface);border:1.5px solid var(--filet);border-radius:4px;
  padding:.4rem .95rem .4rem .6rem;font-weight:700;color:var(--fort);cursor:pointer;min-height:40px}
.retour:hover{background:var(--surface-alt)}
.ico{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}

/* ---------- formulaires ---------- */
.champ{margin-bottom:calc(.95rem*var(--esp))}
.champ label{display:block;font-weight:700;font-size:.9rem;margin-bottom:.35rem}
.champ input,.champ select,.champ textarea{width:100%;min-height:48px;border:1.5px solid var(--filet);border-radius:4px;background:var(--surface);
  padding:.65rem .8rem;font-size:16px}
.champ input:focus,.champ select:focus,.champ textarea:focus{outline:none;border-color:var(--fort);box-shadow:0 0 0 3px var(--fort)}
@supports (color: color-mix(in srgb, red 50%, blue)){.champ input:focus,.champ select:focus,.champ textarea:focus{box-shadow:0 0 0 3px color-mix(in srgb, var(--fort) 18%, transparent)}}
.champ .aide, p.aide{font-size:.82rem;color:var(--texte-doux);margin-top:.3rem}
.champ--erreur input{border-color:var(--alerte)}
.ligne-2{display:grid;grid-template-columns:1fr 1fr;gap:.7rem}
@media (max-width:480px){ .ligne-2{grid-template-columns:1fr} }
.case{display:flex;gap:.6rem;align-items:flex-start;cursor:pointer;font-size:.94rem}
.case input{width:22px;height:22px;margin:.05rem 0 0;accent-color:var(--fort);flex:none}

/* ---------- messages ---------- */
.message{border-radius:4px;padding:.75rem .95rem;margin:0 0 1rem;font-size:.94rem;border:1px solid transparent}
.message--erreur{background:var(--alerte-doux);color:var(--alerte);border-color:rgba(179,38,30,0.25)}
@supports (color: color-mix(in srgb, red 50%, blue)){.message--erreur{border-color:color-mix(in srgb, var(--alerte) 25%, transparent)}}
.message--ok{background:var(--ok-doux);color:var(--ok);border-color:rgba(19,115,74,0.25)}
@supports (color: color-mix(in srgb, red 50%, blue)){.message--ok{border-color:color-mix(in srgb, var(--ok) 25%, transparent)}}
.message--info{background:var(--surface-alt);color:var(--texte);border-color:var(--filet)}
.message--attente{background:var(--attente-doux);color:var(--attente)}
.message p:last-child{margin:0}

/* ---------- étiquettes ---------- */
.etiq{display:inline-flex;align-items:center;gap:.3rem;font-size:.76rem;font-weight:800;border-radius:999px;padding:.2rem .65rem;white-space:nowrap}
.etiq--ok{background:var(--ok-doux);color:var(--ok)}
.etiq--attente{background:var(--attente-doux);color:var(--attente)}
.etiq--neutre{background:var(--surface-alt);color:var(--texte-doux);border:1px solid var(--filet)}

/* ---------- connexion ---------- */
.accueil{min-height:100vh;display:flex;flex-direction:column}
.accueil__haut{background:var(--fort);color:var(--sur-fort);padding:2.2rem 16px 4.5rem;text-align:center}
.accueil__haut img{width:84px;height:84px;margin:0 auto .9rem;background:#fff;border-radius:4px;padding:6px;object-fit:contain}
.accueil__haut h1{font-size:1.5rem}
.accueil__haut p{opacity:.88;margin:.4rem 0 0}
.accueil__corps{margin:-3rem auto 2rem;padding:0 16px;width:100%;max-width:460px}

/* ---------- tableau de bord ---------- */
.bandeau-camp{display:flex;gap:1rem;align-items:center;flex-wrap:wrap;background:var(--surface);border:1px solid var(--filet);border-left:5px solid var(--accent);
  border-radius:4px;padding:calc(1rem*var(--esp)) 1.1rem;margin-bottom:1rem}
.bandeau-camp h2{font-size:1.1rem}
.bandeau-camp .date{margin-left:auto;text-align:right}
.bandeau-camp .date b{display:block;font-size:1.05rem}
@media (max-width:600px){ .bandeau-camp .date{margin-left:0;text-align:left} }
.enfants{list-style:none;margin:0;padding:0;display:grid;gap:.8rem}
.enfant{background:var(--surface);border:1px solid var(--filet);border-radius:4px;padding:calc(1rem*var(--esp)) 1.1rem;display:flex;gap:1rem;align-items:center;flex-wrap:wrap}
.enfant__pastille{width:46px;height:46px;border-radius:50%;background:var(--surface-alt);color:var(--fort);display:flex;align-items:center;justify-content:center;font-weight:800;flex:none;border:1px solid var(--filet)}
.enfant__info{flex:1 1 200px;min-width:0}
.enfant__info b{display:block;font-size:1.05rem}
.enfant__info small{color:var(--texte-doux)}
.enfant__act{display:flex;gap:.5rem;flex-wrap:wrap}
@media (max-width:600px){ .enfant__act{width:100%} .enfant__act .btn{flex:1 1 auto} }

/* ---------- parcours de commande ---------- */
.etapes{display:flex;gap:.4rem;flex-wrap:wrap;margin:0 0 1rem;padding:0;list-style:none}
.etapes li{display:flex;align-items:center;gap:.4rem;font-size:.84rem;font-weight:700;color:var(--texte-doux);background:var(--surface);border:1px solid var(--filet);border-radius:4px;padding:.3rem .75rem .3rem .35rem}
.etapes i{font-style:normal;width:22px;height:22px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:var(--surface-alt);font-size:.76rem}
.etapes .en-cours{color:var(--fort);border-color:var(--fort)}
.etapes .en-cours i{background:var(--fort);color:var(--sur-fort)}
.etapes .fait i{background:var(--ok);color:#fff}
.choix-cat{display:grid;grid-template-columns:1fr 1fr;gap:.8rem}
@media (max-width:600px){ .choix-cat{grid-template-columns:1fr} }
.choix-cat button{text-align:left;background:var(--surface);border:2px solid var(--filet);border-radius:4px;padding:1rem 1.1rem;cursor:pointer}
.choix-cat button:hover{border-color:var(--fort)}
.choix-cat button[aria-pressed="true"]{border-color:var(--fort);box-shadow:0 0 0 3px var(--fort)}
@supports (color: color-mix(in srgb, red 50%, blue)){.choix-cat button[aria-pressed="true"]{box-shadow:0 0 0 3px color-mix(in srgb, var(--fort) 15%, transparent)}}
.choix-cat b{display:block;font-size:1.05rem;margin-bottom:.25rem}
.choix-cat span{color:var(--texte-doux);font-size:.9rem}

.pack-tete{display:flex;gap:1rem;align-items:flex-start;flex-wrap:wrap;margin-bottom:.4rem}
.pack-tete h2{margin:0}
.pack-prix{margin-left:auto;text-align:right}
.pack-prix b{font-size:1.5rem;display:block;line-height:1.1}
.article{display:grid;grid-template-columns:110px minmax(0,1fr);grid-template-rows:auto 1fr;column-gap:1rem;padding:calc(1rem*var(--esp)) 0;border-top:1px solid var(--filet)}
.article__photo{grid-row:1 / span 2}
.article__corps{grid-column:2}
.article:first-of-type{border-top:0}
.article__photo{width:110px;height:110px;border-radius:4px;background:#fff;object-fit:contain;border:1px solid var(--filet)}
.article__nom{display:flex;gap:.6rem;align-items:baseline;flex-wrap:wrap;margin-bottom:.15rem}
.article__nom b{font-size:1.02rem}
.article__nom .prix{margin-left:auto;font-weight:800}
.article__desc{color:var(--texte-doux);font-size:.88rem;margin:0 0 .6rem}
@media (max-width:520px){
  .article{grid-template-columns:76px minmax(0,1fr);column-gap:.8rem;row-gap:.5rem}
  .article__photo{width:76px;height:76px;grid-row:1}
  .article__corps{grid-column:1 / -1}
  .article__desc{font-size:.84rem;margin:0}
}
.tailles{display:grid;grid-template-columns:repeat(auto-fill,minmax(76px,1fr));gap:.35rem;margin:.3rem 0 .4rem;max-width:600px}
.puce{min-width:0;min-height:40px;padding:.25rem .3rem;border-radius:4px;border:1.5px solid var(--filet);background:var(--surface);font-weight:700;font-size:.84rem;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.puce:hover{border-color:var(--fort)}
.puce[aria-pressed="true"]{background:var(--fort);border-color:var(--fort);color:var(--sur-fort)}
.etiquette-champ{font-size:.84rem;font-weight:700;color:var(--texte-doux);display:flex;gap:.6rem;align-items:center;flex-wrap:wrap}
.memo{font-size:.8rem;color:var(--ok);font-weight:700}
.quantite{display:inline-flex;align-items:center;border:1.5px solid var(--filet);border-radius:4px;overflow:hidden;background:var(--surface)}
.quantite button{width:44px;height:44px;border:0;background:transparent;font-size:1.3rem;font-weight:700;cursor:pointer;color:var(--fort)}
.quantite button:disabled{opacity:.35;cursor:not-allowed}
.quantite output{min-width:2.2rem;text-align:center;font-weight:800}

.broderie{margin-top:.6rem;background:var(--surface-alt);border:1px solid var(--filet);border-radius:4px;padding:.75rem .85rem}
.broderie__saisie{display:grid;grid-template-columns:minmax(0,1fr) 200px;gap:.8rem;align-items:start;margin-top:.7rem}
@media (max-width:520px){ .broderie__saisie{grid-template-columns:1fr} }
.apercu{position:relative;width:200px;container-type:inline-size;border-radius:4px;overflow:hidden;background:#fff;border:1px solid var(--filet)}
.apercu img{width:100%;aspect-ratio:1/1;object-fit:contain}
.apercu span{position:absolute;transform:translate(-50%,-50%);color:#fff;font-weight:700;font-size:3.6cqw;letter-spacing:.02em;
  text-shadow:0 0 2px rgba(0,0,0,.35);white-space:nowrap;max-width:46%;overflow:hidden;text-overflow:ellipsis}
.apercu figcaption{font-size:.75rem;color:var(--texte-doux);text-align:center;padding:.25rem}

.unites{display:grid;grid-template-columns:minmax(0,1fr);gap:.8rem}
.ligne-unite,.article__corps,.article__tete{min-width:0}
.tailles{width:100%}
.ligne-unite{border:1px solid var(--filet);border-radius:4px;padding:.75rem .85rem;background:var(--surface)}
.ligne-unite__haut{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap}
.ligne-unite__haut b{flex:1 1 auto}
.catalogue{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.7rem}
@media (max-width:820px){ .catalogue{grid-template-columns:repeat(2,minmax(0,1fr))} }
.produit{background:var(--surface);border:1px solid var(--filet);border-radius:4px;padding:.7rem;display:flex;flex-direction:column;gap:.4rem}
.produit img{aspect-ratio:1/1;object-fit:contain;background:#fff;border-radius:4px;border:1px solid var(--filet)}
.produit b{font-size:.95rem}
.produit .prix{font-weight:800}
.produit .btn{margin-top:auto}

/* ---------- récapitulatif ---------- */
.recap{width:100%;border-collapse:collapse;font-size:.94rem}
.recap th,.recap td{padding:.6rem .5rem;border-bottom:1px solid var(--filet);text-align:right;vertical-align:top}
.recap th:first-child,.recap td:first-child{text-align:left}
.recap thead th{font-size:.78rem;text-transform:uppercase;letter-spacing:.04em;color:var(--texte-doux);font-weight:800}
.recap .sous td{color:var(--texte-doux);font-size:.86rem;padding-top:.15rem}
.recap .sous td:first-child{padding-left:1.1rem}
.recap tfoot td{font-weight:800;border-bottom:0;font-size:1rem}
.recap .reste{color:var(--fort)}
.recap .part{color:var(--ok)}
@media (max-width:600px){
  .recap thead{display:none}
  .recap,.recap tbody,.recap tfoot,.recap tr{display:block}
  .recap tr{border-bottom:1px solid var(--filet);padding:.55rem 0}
  .recap td{display:flex;justify-content:space-between;border:0;padding:.12rem 0;text-align:right}
  .recap td:first-child{font-weight:700}
  .recap td[data-l]::before{content:attr(data-l);color:var(--texte-doux);font-weight:500;text-align:left}
  .recap .sous{padding:0 0 .4rem}
  .recap .sous td:first-child{padding-left:.8rem;font-weight:500}
  .recap tfoot tr{border:0}
}
.total-reste{display:flex;justify-content:space-between;align-items:center;gap:1rem;background:var(--fort);color:var(--sur-fort);border-radius:4px;padding:.9rem 1.1rem;margin-top:1rem}
.total-reste b{font-size:1.35rem}

/* ---------- confirmation ---------- */
.fin{text-align:center;max-width:620px;margin:0 auto}
.fin__pastille{width:72px;height:72px;border-radius:50%;background:var(--ok-doux);color:var(--ok);margin:0 auto 1rem;display:flex;align-items:center;justify-content:center}
.fin__pastille .ico{width:36px;height:36px}
.suite{list-style:none;padding:0;margin:1.2rem 0;text-align:left;display:grid;gap:.6rem}
.suite li{display:flex;gap:.8rem;align-items:flex-start;background:var(--surface);border:1px solid var(--filet);border-radius:4px;padding:.75rem .9rem}
.suite i{font-style:normal;width:28px;height:28px;flex:none;border-radius:50%;background:var(--fort);color:var(--sur-fort);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:.86rem}

/* ---------- fenêtres ---------- */
.voile{position:fixed;inset:0;background:rgba(15,20,35,.5);display:flex;align-items:center;justify-content:center;padding:16px;z-index:50}
.dlg{background:var(--surface);border-radius:4px;max-width:640px;width:100%;max-height:90vh;overflow:auto;box-shadow:0 20px 60px rgba(0,0,0,.25)}
.dlg__tete{display:flex;align-items:center;gap:1rem;padding:1rem 1.2rem;border-bottom:1px solid var(--filet);position:sticky;top:0;background:var(--surface)}
.dlg__tete h2{font-size:1.1rem}
.dlg__fermer{margin-left:auto;width:40px;height:40px;flex:none;border-radius:4px;border:1.5px solid var(--filet);background:var(--surface);cursor:pointer;color:var(--fort);display:inline-flex;align-items:center;justify-content:center;padding:0}
.dlg__fermer:hover{background:var(--surface-alt)}
.ico--croix{width:18px;height:18px;stroke-width:2.6}
.dlg__corps{padding:1rem 1.2rem 1.3rem}
.guide{width:100%;border-collapse:collapse;font-size:.88rem}
.guide th,.guide td{border:1px solid var(--filet);padding:.45rem .5rem;text-align:center;white-space:nowrap}
.guide th:first-child{text-align:left;white-space:normal}
.guide thead th{background:var(--surface-alt)}
.defile{overflow-x:auto;-webkit-overflow-scrolling:touch}

/* ---------- bon de commande ---------- */
.bon{background:#fff;color:#111;border:1px solid var(--filet);border-radius:4px;padding:1.6rem;max-width:820px;margin:0 auto}
.bon__tete{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;border-bottom:2px solid var(--fort);padding-bottom:1rem;margin-bottom:1rem}
.bon__tete img{width:64px;height:64px;object-fit:contain}
.bon h1{font-size:1.35rem}
.bon dl{display:grid;grid-template-columns:auto 1fr;gap:.25rem 1rem;margin:0 0 1rem;font-size:.92rem}
.bon dt{color:#555}
.bon dd{margin:0;font-weight:700}
.bon .mention{font-size:.82rem;color:#555;margin-top:1.2rem}
@media print{
  body{background:#fff}
  .entete,.non-imprime,.bulle{display:none!important}
  .page{padding:0;max-width:none}
  .bon{border:0;padding:0;max-width:none}
  .recap thead{display:table-header-group}
  .recap{display:table}.recap tbody{display:table-row-group}.recap tfoot{display:table-footer-group}.recap tr{display:table-row}
  .recap td{display:table-cell}.recap td[data-l]::before{content:none}
}

/* ---------- pied de page ---------- */
.pied{text-align:center;color:var(--texte-doux);font-size:.8rem;padding:1.5rem 16px 2.5rem}

/* ---------- parcours compact (taille choisie : article replié) ---------- */
.taille-choisie{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;background:var(--ok-doux);color:var(--ok);border-radius:999px;padding:.35rem .8rem;font-size:.92rem;width:fit-content;max-width:100%}
.taille-choisie b{color:var(--texte)}
.article--replie{grid-template-columns:64px minmax(0,1fr);padding:calc(.6rem*var(--esp)) 0}
.article--replie .article__desc{display:none}
.article--replie .article__photo{width:64px;height:64px}
.progression{height:6px;border-radius:4px;background:var(--surface-alt);overflow:hidden;margin:.2rem 0 0;border:1px solid var(--filet)}
.progression span{display:block;height:100%;background:var(--ok);border-radius:4px;transition:width .25s}
.conseil{font-size:.84rem;background:var(--surface-alt);border-left:3px solid var(--fort);border-radius:4px;padding:.45rem .65rem;margin:.3rem 0 .4rem}
/* ---------- Mon compte : lecture seule ---------- */
.fiche{display:grid;gap:.1rem}
.fiche__ligne{display:flex;justify-content:space-between;gap:1rem;padding:.45rem 0;border-bottom:1px solid var(--filet);font-size:.95rem}
.fiche__ligne span{color:var(--texte-doux)}
.fiche__ligne b{text-align:right;word-break:break-word}
.fiche__enfant{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;border-top:1px solid var(--filet);padding:.7rem 0}
.fiche__enfant:first-of-type{border-top:0}
form.fiche__enfant{display:block}
@media (max-width:520px){
  .broderie__saisie{grid-template-columns:1fr}
  .apercu{width:min(240px,100%)}
}

/* mention sous la photo (marquage non visible sur la photo) */
.mention-photo{display:flex;gap:.35rem;align-items:flex-start;font-size:.8rem;font-weight:700;color:var(--fort);margin:.1rem 0 .3rem;line-height:1.3}
.mention-photo::before{content:"✓";color:var(--ok)}

/* ---------- bulle d'aide ---------- */
.bulle{position:fixed;right:16px;bottom:calc(16px + env(safe-area-inset-bottom));z-index:40;display:inline-flex;align-items:center;gap:.45rem;
  background:var(--fort);color:var(--sur-fort);border:0;border-radius:4px;padding:.7rem 1.1rem .7rem .9rem;font-weight:800;font-size:.95rem;
  box-shadow:0 8px 24px rgba(15,20,35,.25);cursor:pointer;min-height:48px}
.bulle .ico{width:22px;height:22px}
.bulle:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.aide-voile{position:fixed;inset:0;background:rgba(15,20,35,.35);z-index:44}
section.aide{position:fixed;right:16px;bottom:16px;z-index:45;width:min(400px,calc(100vw - 32px));max-height:min(620px,calc(100vh - 32px));
  background:var(--surface);border-radius:4px;box-shadow:0 20px 60px rgba(0,0,0,.3);display:flex;flex-direction:column;overflow:hidden}
.aide__tete{display:flex;align-items:center;padding:.8rem 1rem;background:var(--fort);color:var(--sur-fort)}
.aide__tete h2{font-size:1.05rem}
.aide__tete .dlg__fermer{margin-left:auto;background:rgba(255,255,255,0.12);color:var(--sur-fort);border-color:rgba(255,255,255,0.45)}
@supports (color: color-mix(in srgb, red 50%, blue)){.aide__tete .dlg__fermer{background:color-mix(in srgb, var(--sur-fort) 12%, transparent);border-color:color-mix(in srgb, var(--sur-fort) 45%, transparent)}}
.aide__tete .dlg__fermer:hover{background:rgba(255,255,255,0.22)}
@supports (color: color-mix(in srgb, red 50%, blue)){.aide__tete .dlg__fermer:hover{background:color-mix(in srgb, var(--sur-fort) 22%, transparent)}}
.aide__corps{padding:1rem;overflow:auto}
.aide__theme{font-size:.74rem;text-transform:uppercase;letter-spacing:.05em;color:var(--texte-doux);margin:.8rem 0 .3rem}
.aide__liste{list-style:none;margin:0;padding:0;border:1px solid var(--filet);border-radius:4px;overflow:hidden}
.aide__liste li + li{border-top:1px solid var(--filet)}
.aide__liste button{display:block;width:100%;text-align:left;background:var(--surface);border:0;padding:.7rem .8rem;font-weight:600;cursor:pointer}
.aide__liste button:hover{background:var(--surface-alt)}
.aide__contacts{display:grid;gap:.5rem;margin-top:1rem;padding-top:1rem;border-top:1px solid var(--filet)}
.aide__contact{text-align:left;background:var(--surface-alt);border:1px solid var(--filet);border-radius:4px;padding:.7rem .85rem;cursor:pointer}
.aide__contact b{display:block}
.aide__contact span{font-size:.84rem;color:var(--texte-doux)}
.aide__titre{font-size:1.1rem;margin:.2rem 0 .7rem}
.aide__texte{font-size:.94rem}
.aide__texte ul{padding-left:1.1rem;margin:0 0 .8em}
.aide__texte li{margin-bottom:.35rem}
.retour--petit{min-height:34px;padding:.25rem .8rem .25rem .5rem;font-size:.86rem;margin-bottom:.6rem}
.page{padding-bottom:calc(6rem*var(--esp))}
@media (max-width:600px){
  .aide{right:0;left:0;bottom:0;width:100%;max-height:88vh;border-radius:4px}
  .bulle span{display:none}
  .bulle{padding:.75rem}
}
@media print{ #aide-racine{display:none!important} }

.detail-liste{padding-left:1.1rem;margin:.6rem 0 1rem}
.detail-liste li{margin-bottom:.3rem}
.article__desc .lien-btn{font-weight:700}

/* situation de l'enfant (aucun prix sur cet écran) */
.situation{border:1px solid var(--filet);border-radius:4px;padding:.6rem .85rem .2rem;margin:0 0 1rem}
.situation legend{font-weight:700;font-size:.9rem;padding:0 .3rem}
.situation .case{margin-bottom:.55rem}

/* =====================================================================
   Espace gestionnaire
   ===================================================================== */
.onglets{background:var(--surface);border-bottom:1px solid var(--filet);position:sticky;top:0;z-index:20}
.onglets__in{max-width:1100px;margin:0 auto;padding:0 16px;display:flex;gap:.2rem;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.onglets__in::-webkit-scrollbar{display:none}
.onglets button{background:none;border:0;border-bottom:3px solid transparent;padding:.85rem .8rem .7rem;font-weight:700;color:var(--texte-doux);cursor:pointer;white-space:nowrap;display:inline-flex;align-items:center;gap:.4rem}
.onglets button[aria-current="page"]{color:var(--fort);border-bottom-color:var(--accent)}
.onglets button em{font-style:normal;background:var(--accent);color:var(--sur-accent);border-radius:4px;font-size:.72rem;padding:.05rem .45rem;min-width:1.3rem;text-align:center}
.cloture{display:flex;gap:1rem;align-items:center;flex-wrap:wrap;background:var(--fort);color:var(--sur-fort);border-radius:4px;padding:1rem 1.2rem;margin-bottom:1rem}
.cloture .surtitre{color:rgba(255,255,255,0.75)}
@supports (color: color-mix(in srgb, red 50%, blue)){.cloture .surtitre{color:color-mix(in srgb, var(--sur-fort) 75%, transparent)}}
.cloture h2{font-size:1.15rem}
.cloture .lien-btn{color:var(--sur-fort)}
.cloture__j{margin-left:auto;text-align:center;background:rgba(255,255,255,0.14);border-radius:4px;padding:.5rem .9rem}
@supports (color: color-mix(in srgb, red 50%, blue)){.cloture__j{background:color-mix(in srgb, var(--sur-fort) 14%, transparent)}}
.cloture__j b{display:block;font-size:1.6rem;line-height:1}
.cloture__j span{font-size:.8rem}
.cloture--urgente{background:var(--alerte);color:#fff}
.cloture--neutre{background:var(--surface);color:var(--texte);border:1px solid var(--filet)}
.a-traiter{display:flex;gap:1rem;align-items:center;flex-wrap:wrap;background:var(--attente-doux);border:1px solid rgba(138,90,0,0.3);border-radius:4px;padding:.9rem 1.1rem;margin-bottom:1rem}
@supports (color: color-mix(in srgb, red 50%, blue)){.a-traiter{border:1px solid color-mix(in srgb, var(--attente) 30%, transparent)}}
.a-traiter > div{flex:1 1 260px}
.a-traiter p{margin:.2rem 0 0;font-size:.92rem}
.a-traiter--urgent{background:var(--alerte-doux);border-color:rgba(179,38,30,0.4)}
@supports (color: color-mix(in srgb, red 50%, blue)){.a-traiter--urgent{border-color:color-mix(in srgb, var(--alerte) 40%, transparent)}}
.a-traiter--rejet{background:var(--surface)}
.chiffres{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.7rem;margin-bottom:1rem}
@media (max-width:760px){ .chiffres{grid-template-columns:repeat(2,minmax(0,1fr))} }
.chiffre{background:var(--surface);border:1px solid var(--filet);border-radius:4px;padding:.85rem 1rem;display:flex;flex-direction:column;gap:.15rem}
.chiffre b{font-size:1.6rem;line-height:1.1}
.chiffre b small{font-size:1rem;color:var(--texte-doux)}
.chiffre span{font-size:.84rem;color:var(--texte-doux)}
.chiffre--attention b{color:var(--attente)}
.montants{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.6rem}
@media (max-width:600px){ .montants{grid-template-columns:1fr} }
.montants > div{background:var(--surface-alt);border-radius:4px;padding:.6rem .8rem;display:flex;flex-direction:column}
.montants span{font-size:.82rem;color:var(--texte-doux)}
.montants b{font-size:1.1rem}
.sous-titre{font-size:1.1rem;margin:1.4rem 0 .6rem;display:flex;gap:.5rem;align-items:center}
.demande{background:var(--surface);border:1px solid var(--filet);border-radius:4px;padding:1rem 1.1rem;margin-bottom:.8rem}
.demande__tete{display:flex;justify-content:space-between;gap:.8rem;flex-wrap:wrap;align-items:flex-start}
.demande__tete small{display:block;color:var(--texte-doux);font-size:.84rem;margin-top:.15rem}
.decision{border:1px solid var(--filet);border-radius:4px;padding:.6rem .85rem .3rem;margin:.8rem 0 0}
.decision legend{padding:0 .3rem}
.decision .case{margin-bottom:.5rem}
.decision small{display:block;color:var(--texte-doux);font-size:.8rem}
.filtres{display:flex;gap:.6rem;flex-wrap:wrap;align-items:flex-start;margin-bottom:.8rem}
.filtres .champ{flex:1 1 220px;margin:0}
.familles{display:grid;gap:.7rem}
.famille{background:var(--surface);border:1px solid var(--filet);border-radius:4px;padding:.85rem 1rem}
.famille__tete{display:flex;justify-content:space-between;gap:.6rem;flex-wrap:wrap}
.famille__tete small{display:block;color:var(--texte-doux);font-size:.84rem}
.famille__enfants{list-style:none;margin:.6rem 0 0;padding:0;display:grid;gap:.4rem}
.famille__enfants li{display:flex;justify-content:space-between;gap:.6rem;flex-wrap:wrap;align-items:center;border-top:1px solid var(--filet);padding-top:.4rem}
.famille__act{display:flex;gap:.5rem;flex-wrap:wrap;align-items:center;margin-top:.6rem}
.etiq--bouton{border:0;cursor:pointer}
.tableau-liste{display:grid;gap:.5rem}
.ligne-liste{display:flex;justify-content:space-between;gap:.8rem;flex-wrap:wrap;align-items:center;background:var(--surface);border:1px solid var(--filet);border-radius:4px;padding:.65rem .85rem}
.ligne-liste > div:first-child{flex:1 1 240px;min-width:0}
.ligne-liste small{display:block;color:var(--texte-doux);font-size:.84rem;word-break:break-word}
.ligne-liste__act{display:flex;gap:.4rem;flex-wrap:wrap}
.rouge{color:var(--alerte)}
/* Lien d'inscription et affiche du QR code (imprimée seule, format A4) */
.lien-copie{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;margin:.4rem 0}
.lien-copie a{word-break:break-all;font-size:.88rem;flex:1 1 220px;min-width:0}
.affiche-qr{display:none;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:10px;min-height:255mm;
  border:3px solid var(--fort);padding:28px 30px 24px;background:#fff;color:#222}
.affiche-qr__logo{width:130px;height:130px;object-fit:contain}
.affiche-qr__sur{margin:0;color:var(--accent);font-weight:700;letter-spacing:.08em;text-transform:uppercase;font-size:11pt}
.affiche-qr h1{color:var(--fort);font-size:30pt;line-height:1.1;margin:0 0 4px;max-width:16ch}
.affiche-qr__txt{margin:0;font-size:13pt;max-width:42ch}
.affiche-qr__qr{width:9cm;height:9cm;margin:10px 0;padding:8px;border:1px solid #ccc}
.affiche-qr__qr svg{width:100%;height:100%}
.affiche-qr__lien{margin:0;font-size:9.5pt;color:#555;word-break:break-all;max-width:60ch}
.affiche-qr__clo{margin:8px 0 0;font-weight:700;font-size:12pt;color:var(--fort)}
.affiche-qr__nom{margin:0;font-size:10pt;color:#555}
/* Administration */
.bandeau-delegue{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center;justify-content:center;padding:.55rem 1rem;background:var(--attente-doux);color:var(--attente);font-size:.88rem;text-align:center}
.sommaire{margin:-.4rem 0 1rem}
.groupe-admin{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;border-top:1px solid var(--filet);padding:.6rem 0}
.groupe-admin input[name=nom]{flex:1 1 160px}
.groupe-admin input[name=description]{flex:2 1 220px}
.groupe-admin input:not([type=checkbox]), .article-admin input:not([type=checkbox]){min-height:40px;border:1.5px solid var(--filet);border-radius:4px;padding:.4rem .6rem;font-size:16px}
.groupe-admin [data-erreur], .article-admin [data-erreur]{flex-basis:100%}
.article-admin, .campagne-admin{border-top:1px solid var(--filet);padding:.8rem 0}
.article-admin{display:flex;flex-wrap:wrap;gap:.6rem 1rem;align-items:center}
.article-admin__tete{flex-basis:100%}
.article-admin__tete small{display:block}
.article-admin label:not(.case){display:flex;gap:.4rem;align-items:center;font-size:.9rem}
.article-admin .euros input{width:6.5rem}
.tailles-admin{flex-basis:100%;display:flex;flex-wrap:wrap;gap:.35rem;align-items:center}
.pastille-taille{border:1.5px dashed var(--filet);background:var(--surface-alt);color:var(--texte-doux);border-radius:4px;padding:.25rem .65rem;font-size:.82rem;cursor:pointer;text-decoration:line-through}
.pastille-taille.est-active{border-style:solid;border-color:var(--fort);background:var(--surface);color:var(--texte);text-decoration:none;font-weight:600}
/* Groupes de public, options activables */
.groupes{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:.6rem;margin-bottom:1rem}
.groupe{background:var(--surface);border:1px solid var(--filet);border-radius:4px;padding:.7rem .9rem;display:flex;flex-direction:column;gap:.1rem}
.groupe small{color:var(--texte-doux);font-size:.84rem}
.groupe span{font-size:.82rem;color:var(--texte-doux)}
.groupe--inactif{background:var(--surface-alt);border-style:dashed}
.groupe--inactif small{color:var(--fort);font-weight:600}
.carte--option{border-style:dashed}
/* Règlements */
.jauge{height:8px;border-radius:4px;background:var(--surface-alt);overflow:hidden;margin-top:.8rem}
.jauge span{display:block;height:100%;background:var(--fort);border-radius:4px}
.famille__enfants small{font-size:.84rem}
.reglements{list-style:none;margin:.7rem 0 0;padding:0;display:grid;gap:.35rem}
.reglements li{display:flex;justify-content:space-between;gap:.6rem;flex-wrap:wrap;align-items:center;background:var(--surface-alt);border-radius:4px;padding:.5rem .7rem;font-size:.92rem}
.reglements li > div:first-child{flex:1 1 220px;min-width:0}
.reglements small{display:block;color:var(--texte-doux);font-size:.82rem;word-break:break-word}
.reglements li.annule > div:first-child > b{text-decoration:line-through;color:var(--texte-doux)}
.reglements li.annule small.rouge{color:var(--alerte)}
.choix-ligne{display:flex;gap:1.2rem;flex-wrap:wrap}
.champ--ligne{display:flex;justify-content:space-between;align-items:center;gap:.8rem;flex-wrap:wrap;border-top:1px solid var(--filet);padding-top:.5rem}
.champ--ligne label{flex:1 1 200px;margin:0}
.champ--ligne small{display:block}
.euros{display:inline-flex;align-items:center;gap:.35rem;white-space:nowrap}
.euros input{width:7.5rem;text-align:right}
.total-reglement{text-align:right;margin:.6rem 0 1rem}
.engagement{background:var(--surface);border:1.5px solid var(--fort);border-radius:4px;padding:.85rem 1rem;margin-top:1rem;font-weight:600}
.carte--alerte{border-color:rgba(179,38,30,0.35)}
@supports (color: color-mix(in srgb, red 50%, blue)){.carte--alerte{border-color:color-mix(in srgb, var(--alerte) 35%, transparent)}}
.rejet{border-top:1px solid var(--filet);padding:.7rem 0}
.rejet small{display:block;color:var(--alerte);font-size:.84rem}
.rejet__form{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:.5rem}
.rejet__form input{flex:1 1 220px;min-height:42px;border:1.5px solid var(--filet);border-radius:4px;padding:.5rem .7rem;font-size:16px}
.rejet__form [data-erreur]{flex-basis:100%}
.deux-cadres{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
@media (max-width:700px){ .deux-cadres{grid-template-columns:1fr} }
.champ textarea{resize:vertical;font-family:inherit}
.qr{display:flex;gap:1.2rem;flex-wrap:wrap;align-items:center}
.qr > div:first-child{flex:1 1 260px}
.qr__image{width:180px;height:180px;background:#fff;border:1px solid var(--filet);border-radius:4px;padding:6px}
.qr__image svg{width:100%;height:100%}
.carte__tete{display:flex;justify-content:space-between;gap:.6rem;flex-wrap:wrap;align-items:center;margin-bottom:.3rem}
.carte__tete h2{margin:0}
.tableau{width:100%;border-collapse:collapse;font-size:.92rem}
.tableau th,.tableau td{padding:.5rem .55rem;border-bottom:1px solid var(--filet);text-align:left}
.tableau thead th{font-size:.76rem;text-transform:uppercase;letter-spacing:.04em;color:var(--texte-doux)}
.tableau .nombre{text-align:right;font-variant-numeric:tabular-nums}
details.carte summary{cursor:pointer}
.aide__contact--fort{background:var(--fort);color:var(--sur-fort);border-color:var(--fort)}
.aide__contact--fort span{color:rgba(255,255,255,0.8)}
@supports (color: color-mix(in srgb, red 50%, blue)){.aide__contact--fort span{color:color-mix(in srgb, var(--sur-fort) 80%, transparent)}}
a.aide__contact{display:block;text-decoration:none;color:inherit}
@media print{
  .onglets{display:none!important}
  body[data-impression] main > *:not(.imprimable):not(.qr){display:none!important}
  body[data-impression="prod"] [data-export="marq"],body[data-impression="marq"] [data-export="prod"]{display:none!important}
  body[data-impression="qr"] main > *:not(.affiche-qr){display:none!important}
  body[data-impression="qr"] .affiche-qr{display:flex}
  body[data-impression="qr"] .pied{display:none!important}
  @page{margin:12mm}
  body[data-impression] .imprimable{border:0;padding:0}
}

/* =====================================================================
   Grammaire visuelle (lot V2)
   Cliquable = rectangle à 4 px. État non cliquable = pilule (étiquettes de statut).
   Seule exception : les entrées du menu latéral, à 12 px.
   ===================================================================== */
.ico{width:19px;height:19px;stroke-width:2}
.ico--croix{width:19px;height:19px;stroke-width:2}
.champ select,.filtres select,select{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235A6178' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right .7rem center;background-size:19px 19px;padding-right:2.4rem!important}
select{border:1.5px solid var(--filet);border-radius:4px;background-color:var(--surface);min-height:40px;padding:.4rem .7rem;font-size:16px}
details > summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:.5rem}
details > summary::-webkit-details-marker{display:none}
details > summary::before{content:"";width:19px;height:19px;flex:none;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231E275F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l6 6-6 6'/%3E%3C/svg%3E") no-repeat center/19px;transition:transform .15s}
details[open] > summary::before{transform:rotate(90deg)}
input[type=file]{font-size:.9rem}
input[type=file]::file-selector-button{border:1.5px solid var(--filet);background:var(--surface);color:var(--fort);border-radius:4px;padding:.45rem .9rem;font-weight:700;margin-right:.7rem;cursor:pointer}
.fichier{display:block;margin:.4rem 0}
.etiq--bouton{border-radius:4px}

/* ---------- espace du club : colonne latérale au-dessus de 900 px ---------- */
.espace-club{min-height:100vh}
.sidebar{display:none}
@media (min-width:900px){
  .espace-club{display:grid;grid-template-columns:250px minmax(0,1fr)}
  .seulement-mobile{display:none}
  .espace-club__main{min-width:0}
  .espace-club .page{max-width:1240px;padding-left:2rem;padding-right:2rem}
  .sidebar{position:sticky;top:0;align-self:start;height:100vh;background:linear-gradient(180deg,#0B2457 0%,#081B45 100%);color:#C7D3EE;
    padding:20px 14px;display:flex;flex-direction:column;gap:4px;overflow-y:auto}
}
.sb-logo{display:flex;align-items:center;gap:10px;color:#fff;font-weight:800;font-size:.92rem;line-height:1.2;margin:0 4px 22px}
.sb-logo img{width:44px;height:44px;background:#fff;border-radius:4px;padding:3px;flex:none;object-fit:contain}
.sb-logo small{display:block;font-weight:500;font-size:.74rem;color:#8FA3D1;margin-top:2px}
.sb-nav{display:flex;flex-direction:column;gap:3px}
.sb-link{display:flex;align-items:center;gap:11px;width:100%;background:none;border:0;color:#C7D3EE;font:600 .92rem var(--police);
  padding:.7rem .8rem;border-radius:var(--rayon-s,12px);cursor:pointer;text-align:left}
.sb-link .ico{width:19px;height:19px;opacity:.85}
.sb-link:hover{background:rgba(255,255,255,.07);color:#fff}
.sb-link[aria-current=page]{background:#E20C18;color:#fff;box-shadow:0 6px 16px rgba(226,12,24,.35)}
.sb-link[aria-current=page] .ico{opacity:1}
.sb-link:focus-visible{outline:2px solid #fff;outline-offset:2px}
.sb-link em{margin-left:auto;font-style:normal;background:transparent;color:#FF5A64;border:1.5px solid #FF5A64;border-radius:999px;font-size:.72rem;font-weight:800;padding:0 .45rem;min-width:1.4rem;text-align:center}
.sb-link[aria-current=page] em{background:#fff;color:#E20C18;border-color:#fff}
.sb-sep{border:0;border-top:1px solid rgba(255,255,255,.12);margin:12px 6px}
.sb-user{display:flex;align-items:center;gap:10px;margin-top:auto;background:rgba(255,255,255,.06);border:0;border-radius:4px;padding:10px;color:#fff;text-align:left;font-family:var(--police);cursor:pointer;width:100%}
.sb-user:hover{background:rgba(255,255,255,.1)}
.sb-av{flex:none;width:36px;height:36px;border-radius:4px;background:#E20C18;color:#fff;display:grid;place-items:center;font-style:normal;font-weight:800;font-size:.8rem}
.sb-user b{display:block;font-size:.85rem;line-height:1.2}
.sb-user small{display:block;font-size:.74rem;color:#8FA3D1;margin-top:2px}
.sb-quitter{background:none;border:0;color:#8FA3D1;font:600 .8rem var(--police);padding:.5rem .6rem;cursor:pointer;text-align:left;border-radius:4px}
.sb-quitter:hover{color:#fff;background:rgba(255,255,255,.06)}

/* ---------- familles : groupes, bulles de filtre, fiche dépliée ---------- */
.onglets-groupes{display:flex;gap:.4rem;flex-wrap:wrap;margin:0 0 1rem;border-bottom:1px solid var(--filet)}
.onglets-groupes button{background:none;border:0;border-bottom:3px solid transparent;padding:.6rem .9rem .5rem;font-weight:700;color:var(--texte-doux);cursor:pointer;text-align:left;border-radius:4px 4px 0 0}
.onglets-groupes button small{display:block;font-weight:500;font-size:.78rem}
.onglets-groupes button[aria-selected=true]{color:var(--fort);border-bottom-color:#E20C18}
.onglets-groupes button:hover{background:var(--surface)}
.bulles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.7rem;margin:0 0 1rem}
@media (max-width:600px){ .bulles{grid-template-columns:1fr} }
.bulle-filtre{background:var(--surface);border:1.5px solid var(--filet);border-radius:4px;padding:.85rem 1rem;text-align:left;cursor:pointer;display:flex;flex-direction:column;gap:.1rem}
.bulle-filtre b{font-size:1.8rem;line-height:1.1;color:var(--fort)}
.bulle-filtre span{font-size:.88rem;color:var(--texte-doux);font-weight:600}
.bulle-filtre:hover{border-color:var(--fort)}
.bulle-filtre[aria-pressed=true]{border-color:var(--fort);background:var(--surface-alt);box-shadow:inset 0 0 0 1px var(--fort)}
@supports (color: color-mix(in srgb, red 50%, blue)){.bulle-filtre[aria-pressed=true]{background:color-mix(in srgb, var(--fort) 6%, var(--surface))}}
.famille--repliable{padding:0;overflow:hidden}
.famille__ligne{display:flex;align-items:center;gap:.8rem;width:100%;background:none;border:0;padding:.85rem 1rem;text-align:left;cursor:pointer;font:inherit;color:inherit}
.famille__ligne:hover{background:var(--surface-alt)}
.famille__qui{flex:1 1 240px;min-width:0}
.famille__qui b{display:block}
.famille__qui small{display:block;color:var(--texte-doux);font-size:.84rem;word-break:break-word}
.famille__etat{display:flex;gap:.35rem;flex-wrap:wrap;justify-content:flex-end}
.chevron{flex:none;display:inline-flex;margin-left:.6rem;margin-right:.4rem;color:var(--texte-doux);transition:transform .15s}
[aria-expanded=true] > .chevron{transform:rotate(180deg)}
.chevron--droite{transform:rotate(-90deg)}
.famille__fiche{border-top:1px solid var(--filet);padding:1rem}
.fiche-famille{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:1.4rem}
@media (max-width:900px){ .fiche-famille{grid-template-columns:1fr} }
.fiche-famille h3{font-size:.95rem;margin:0 0 .5rem;text-transform:uppercase;letter-spacing:.04em;color:var(--texte-doux)}
.fiche-famille h3:not(:first-child){margin-top:1.1rem}
.fiche-dl{display:grid;grid-template-columns:auto 1fr;gap:.25rem .9rem;margin:0;font-size:.92rem}
.fiche-dl dt{color:var(--texte-doux)}
.fiche-dl dd{margin:0;word-break:break-word}
.fiche-enfant{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem .8rem;padding:.45rem 0;border-top:1px solid var(--filet)}
.fiche-enfant > span:first-child{flex:1 1 140px}
.fiche-enfant select{min-height:38px}
.fiche-enfant .confirmation{flex-basis:100%}
.fiche-actions{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:1rem}
.tableau--compact th,.tableau--compact td{padding:.4rem .45rem;font-size:.86rem}
.montants--petits b{font-size:1rem}
.chargement--petit{min-height:60px}

/* ---------- confirmation sur place ---------- */
.confirmation{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem 1rem;background:var(--attente-doux);border:1px solid rgba(138,90,0,0.3);border-radius:4px;padding:.6rem .8rem;margin:.4rem 0;font-size:.92rem}
@supports (color: color-mix(in srgb, red 50%, blue)){.confirmation{border:1px solid color-mix(in srgb, var(--attente) 30%, transparent)}}
.confirmation > span{flex:1 1 260px}
.confirmation__act{display:flex;gap:.4rem;flex-wrap:wrap}
.confirmation [data-erreur]{flex-basis:100%}
.confirmation [data-erreur]:empty{display:none}

/* ---------- lien à copier ---------- */
.copie{display:flex;margin:.6rem 0 .4rem;max-width:640px}
.copie__champ{flex:1 1 auto;min-width:0;min-height:44px;border:1.5px solid var(--filet);border-right:0;border-radius:4px 0 0 4px;background:var(--surface-alt);padding:.5rem .7rem;font-size:.9rem;color:var(--texte)}
.copie__btn{border-radius:0 4px 4px 0;min-height:44px;white-space:nowrap}

/* ---------- campagnes ---------- */
.titre-page--ligne{display:flex;gap:1rem;align-items:flex-start;justify-content:space-between;flex-wrap:wrap}
.chiffres--3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:600px){ .chiffres--3{grid-template-columns:1fr} }
.carte--cliquable{display:flex;flex-direction:column;gap:.35rem;width:100%;text-align:left;cursor:pointer;font:inherit;color:inherit}
.carte--cliquable:hover{border-color:var(--fort)}
.carte--cliquable .carte__tete{display:flex;justify-content:space-between;align-items:center;gap:.6rem}
/* .carte--cbs : remplacé par .reserve-cbs (12/10) */
.cloture__public{margin:.2rem 0 0;font-weight:700;opacity:.92}
.activation p{margin:.3rem 0}
.tableau tr.annule td{color:var(--texte-doux);text-decoration:line-through}
.tableau tfoot td{font-weight:800;border-top:2px solid var(--filet)}
.bon__vendeur{display:flex;gap:.8rem;align-items:center}
.bon__vendeur span{display:block;font-size:.84rem;color:#555}

/* ---------- affiche imprimée (construite au clic, A4) ---------- */
#impression{display:none}
@media print{
  body.impression-affiche > *:not(#impression){display:none!important}
  body.impression-affiche #impression{display:block}
  @page{size:A4;margin:10mm}
  body.impression-affiche{margin:0!important;padding:0!important;background:#fff}
}
/* une seule feuille A4 quoi qu'il arrive : hauteur fixe (297 − 2 × 10 mm de marge, moins une sécurité), rien ne déborde */
.affiche{box-sizing:border-box;display:flex;flex-direction:column;align-items:center;justify-content:space-between;text-align:center;height:270mm;max-height:270mm;overflow:hidden;break-inside:avoid;page-break-inside:avoid;border:3px solid #0B2457;padding:12mm 12mm 10mm;color:#111;background:#fff}
.affiche__logo{width:50mm;height:auto;max-height:42mm;object-fit:contain}
.affiche__nom{font-size:24pt;font-weight:800;color:#0B2457;margin:0}
.affiche__sur{max-width:100%;overflow-wrap:anywhere;margin:4mm 0 0;color:#E20C18;font-weight:800;letter-spacing:.12em;font-size:15pt}
.affiche h1{color:#0B2457;font-size:30pt;line-height:1.1;margin:3mm 0;max-width:16ch}
.affiche__mode{font-size:14pt;margin:0;max-width:34ch}
.affiche__qr{width:80mm;height:80mm;flex:none;margin:4mm 0}
.affiche__qr svg{width:100%;height:100%}
.affiche__clo{color:#E20C18;font-size:16pt;font-weight:700;margin:0;line-height:1.25}
.affiche__clo b{font-size:23pt;display:block}
.affiche__lien{font-size:7.5pt;color:#666;margin:3mm 0 0;word-break:break-all;max-width:100%;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.tableau--compact td:nth-child(1),.tableau--compact td:nth-child(3),.tableau--compact td.nombre{white-space:nowrap}
.fiche-famille{grid-template-columns:minmax(0,1fr) minmax(0,1.7fr)}
@media (max-width:1100px){ .fiche-famille{grid-template-columns:1fr} }

/* =====================================================================
   Habillage V2 (« THÈME APPLICATION ») : palette et rayons définitifs
   Cartes, panneaux, blocs : 16 px · boutons et champs : 12 px ·
   entrées du menu latéral : 12 px · étiquettes de statut : pilules.
   ===================================================================== */
:root{
  --navy:#0B2457; --navy-2:#081B45; --navy-3:#004090; --navy-soft:#E8F0FB;
  --red:#E01020; --red-2:#B80D1A; --red-soft:#FDECEE;
  --ink:#0F172A; --muted:#64748B; --line:#E2E8F0; --line-soft:#EEF2F7; --paper:#F4F6FB;
  --rayon:16px; --rayon-s:12px;
}
/* blocs de contenu */
.carte,.famille,.enfant,.produit,.bon,.dlg,section.aide,.cloture,.a-traiter,.chiffre,.message,.confirmation,.ligne-liste,.groupe,.bandeau-camp,
.suite li,.broderie,.ligne-unite,.total-reste,.situation,.decision,.demande,.qr__image,.apercu,.article__photo,.produit img,.conseil,
.carte--cliquable,.famille--repliable,.aide__liste,.choix-cat button,.decision-cbs{border-radius:var(--rayon,16px)}
.montants > div,.reglements li,.rejet{border-radius:var(--rayon-s,12px)}
/* boutons et éléments cliquables */
.btn,.entete__btn,.retour,.puce,.quantite,.dlg__fermer,.aide__contact,.etiq--bouton,.sb-user,.sb-quitter,.sb-link,.pastille-taille,.bulle,
.bulle-filtre,input[type=file]::file-selector-button,.lien-btn{border-radius:var(--rayon-s,12px)}
.onglets-groupes button{border-radius:12px 12px 0 0}
/* champs */
.champ input,.champ select,.champ textarea,select,textarea,.rejet__form input,.groupe-admin input:not([type=checkbox]),.article-admin input:not([type=checkbox]),.euros input,
input[type=text],input[type=search],input[type=email],input[type=date],input[type=datetime-local],input[type=password]{border-radius:var(--rayon-s,12px)}
.copie__champ{border-radius:12px 0 0 12px}
.copie__btn{border-radius:0 12px 12px 0}
/* états : pilules */
.etiq,.taille-choisie,.sb-link em,.onglets button em{border-radius:999px}
/* couleur des boutons principaux : rouge V2, survol rouge foncé */
.btn:not(.btn--second):not(.btn--texte):hover{background:var(--accent);border-color:var(--accent);filter:none}
@supports (color: color-mix(in srgb, red 50%, blue)){.btn:not(.btn--second):not(.btn--texte):hover{background:color-mix(in srgb, var(--accent) 82%, #000);border-color:color-mix(in srgb, var(--accent) 82%, #000)}}
.sb-link[aria-current=page]{background:var(--red);box-shadow:0 6px 16px rgba(224,16,32,.35)}
.sb-link[aria-current=page] em{color:var(--red)}
.sb-av{background:var(--red)}
.sb-link em{color:#FF6B74;border-color:#FF6B74}
.onglets-groupes button[aria-selected=true]{border-bottom-color:var(--red)}

/* ---------- couleurs des messages ----------
   bleu nuit : confirmation demandée, information · vert : réussite (s'efface seule)
   rouge : erreur, action destructrice · orange : avertissement réel uniquement */
.message--info{background:var(--navy-soft);color:var(--navy);border-color:rgba(0,64,144,0.22)}
@supports (color: color-mix(in srgb, red 50%, blue)){.message--info{border-color:color-mix(in srgb, var(--navy-3) 22%, transparent)}}
.message--ok{transition:opacity .4s, transform .4s}
.message--ok.disparait{opacity:0;transform:translateY(-4px)}
.confirmation{display:block;background:var(--navy-soft);border:1px solid rgba(0,64,144,0.25);color:var(--navy);padding:.75rem .9rem;margin:.5rem 0;font-size:.93rem;flex-basis:100%;width:100%}
@supports (color: color-mix(in srgb, red 50%, blue)){.confirmation{border:1px solid color-mix(in srgb, var(--navy-3) 25%, transparent)}}
.confirmation > span{display:block;margin-bottom:.6rem}
.confirmation__act{display:flex;gap:.5rem;flex-wrap:wrap;justify-content:flex-end}
.confirmation--danger{background:var(--red-soft);border-color:rgba(224,16,32,0.3);color:#7A0A12}
@supports (color: color-mix(in srgb, red 50%, blue)){.confirmation--danger{border-color:color-mix(in srgb, var(--red) 30%, transparent)}}
.confirmation--danger .confirmation__act .btn:last-child{background:var(--red);border-color:var(--red);color:#fff}
.confirmation--avertir{background:var(--attente-doux);border-color:rgba(138,90,0,0.3);color:var(--attente)}
@supports (color: color-mix(in srgb, red 50%, blue)){.confirmation--avertir{border-color:color-mix(in srgb, var(--attente) 30%, transparent)}}
.fiche-actions .confirmation,.famille__act .confirmation,.actions .confirmation{flex:1 1 100%}
.affiche-choix{display:flex;gap:.6rem;flex-wrap:wrap;align-items:center;margin-top:.6rem}
.affiche-choix select{min-height:46px;max-width:100%}
.sous-bloc{border-top:1px solid var(--line);margin-top:1.2rem;padding-top:1rem}
.choix-ligne{display:flex;gap:1.2rem;flex-wrap:wrap}
/* un élément masqué le reste, même s'il a un affichage propre (boutons) */
[hidden]{display:none!important}

/* ---------- saisie de la participation (montants fixes) et relances à dates fixes ---------- */
.part-saisie .part-detail{margin-top:.6rem}
.part-taux{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem .8rem;margin-bottom:.3rem}
.part-taux label{font-weight:700}
.part-taux input{width:4.5rem;text-align:right}
.part-table td,.part-table th{vertical-align:middle}
.part-table input{width:5.5rem;text-align:right;min-height:40px}
.part-table [data-part-famille]{font-weight:700;white-space:nowrap}
.relances-dates{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:.4rem}
.relances-dates input{width:auto;min-width:10.5rem}
.carte--traitee{opacity:.92}
.onglets-groupes .etiq{margin-left:.3rem}

/* ---------- socle commun de TOUS les champs ----------
   Sans bordure déclarée, le navigateur garde sa bordure native « en relief » (2 px, gris et noir).
   :where() = aucune priorité : les réglages particuliers (largeur, hauteur) restent prioritaires. */
:where(input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=range]):not([type=color]):not([type=submit]):not([type=button]):not([type=reset]), select, textarea){
  border:1px solid var(--line);border-style:solid;border-radius:var(--rayon-s,12px);background-color:#fff;color:var(--ink);box-shadow:none;outline:none;
  padding:.45rem .7rem;font-size:16px;min-height:40px;box-sizing:border-box;color-scheme:light}
:where(input:not([type=checkbox]):not([type=radio]):not([type=file]), select, textarea):focus-visible{
  border-color:var(--navy-3);box-shadow:0 0 0 3px rgba(0,64,144,0.2)}
@supports (color: color-mix(in srgb, red 50%, blue)){:where(input:not([type=checkbox]):not([type=radio]):not([type=file]), select, textarea):focus-visible{box-shadow:0 0 0 3px color-mix(in srgb, var(--navy-3) 20%, transparent)}}
:where(input, select, textarea):disabled{background-color:var(--paper);color:var(--muted)}
.dlg__choix{display:flex;flex-direction:column;gap:.5rem;margin-top:1rem}
.dlg__choix .btn{width:100%;justify-content:center}
.cbs-outil{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem .8rem;margin:.2rem 0 .8rem;padding:.5rem .8rem;border-radius:var(--rayon-s,12px)}
.cbs-outil__btn{margin-top:.6rem}
.carte--cible{outline:2px solid var(--navy-3);outline-offset:2px}
/* pastille d'état « Démo » : couleur d'avertissement du socle, bord pointillé pour la distinguer d'un « en attente » */
.etiq--demo{background:var(--attente-doux);color:var(--attente);border:1px dashed currentColor}

/* outils de test (vue CBS Trading) */
/* .outils-test : bordure portée par .reserve-cbs (12/10) */
.outils-test h3{margin:1.2rem 0 .4rem;font-size:1rem}
.outils-test__liste{display:grid;gap:.5rem}
.outil{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.4rem 1rem;padding:.5rem 0;border-bottom:1px solid var(--line-soft)}
.apercu-mail{width:100%;height:65vh;border:1px solid var(--line);border-radius:var(--rayon-s,12px);background:#fff;margin-top:.6rem}

/* vocabulaire d'un groupe (administration) */
.vocab-ligne{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem .6rem;margin:.4rem 0}
.vocab-ligne > span{flex:1 1 200px;font-weight:600}
.vocab-ligne input{flex:1 1 120px;max-width:180px}

/* ---------- page de production (CBS Trading) ---------- */
.bloc-prod{padding:0}
.bloc-prod > summary{display:flex;gap:.9rem;align-items:center;padding:1rem 1.2rem;cursor:pointer;list-style:none}
.bloc-prod > summary::-webkit-details-marker{display:none}
.bloc-prod > summary small{display:block;font-weight:500}
.bloc-prod__lettre{flex:none;width:2.2rem;height:2.2rem;border-radius:var(--rayon-s,12px);background:var(--navy);color:#fff;display:grid;place-items:center;font-weight:800}
.bloc-prod__corps{padding:0 1.2rem 1.2rem}
.bloc-prod h3{margin:1rem 0 .4rem;font-size:1rem}
details.qui summary{cursor:pointer;list-style:none}
details.qui summary::-webkit-details-marker{display:none}
details.qui summary b{text-decoration:underline dotted}
details.qui ul{margin:.3rem 0 0;padding:0;list-style:none;text-align:left;font-size:.85rem;color:var(--muted);white-space:normal}
.case-remise{font-size:1.4rem;text-align:center}
.etiq-choix{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:.2rem .8rem;max-height:340px;overflow:auto;padding:.4rem;border:1px solid var(--line-soft);border-radius:var(--rayon-s,12px)}
#impression .planche,#impression .bon-page{display:none}
@media print{
  body.impression-prod > *:not(#impression){display:none!important}
  body.impression-prod #impression{display:block}
  body.impression-prod{background:#fff}
  .impr-titre{font-size:16pt;margin:0 0 2mm}
  .impr-sous{margin:0 0 4mm;color:#555}
  body.impression-liste .distribution{width:100%;border-collapse:collapse;font-size:10pt}
  body.impression-liste .distribution th,body.impression-liste .distribution td{border:1px solid #999;padding:2mm;vertical-align:top}
  body.impression-liste .distribution tr{break-inside:avoid}
  body.impression-bons #impression .bon-page{display:block;break-after:page}
  body.impression-bons #impression .bon-page:last-child{break-after:auto}
  /* étiquettes : A4 portrait, 2 colonnes × 5 lignes de 97 × 56,2 mm dans les marges de 8 mm */
  body.impression-etiquettes #impression .planche{display:grid;grid-template-columns:repeat(2,97mm);grid-template-rows:repeat(5,56.2mm);
    width:194mm;height:281mm;break-after:page}
  body.impression-etiquettes #impression .planche:last-child{break-after:auto}
}
}
@page{size:A4;margin:8mm}
/* case = trait de découpe en pointillés ; étiquette = cadre fin continu à l'intérieur */
.etiquette-case{box-sizing:border-box;border:.25mm dashed #9AA3B2;margin:-.125mm;padding:2.2mm;background:#fff;overflow:hidden}
.etiquette{box-sizing:border-box;height:100%;border:.35mm solid #1E2A4A;border-radius:2.5mm;padding:2.2mm 3mm 1.6mm;display:flex;flex-direction:column;gap:1.2mm;color:#111;overflow:hidden}
.etiquette__bande{display:flex;align-items:center;gap:2mm;padding-bottom:1.2mm;border-bottom:.25mm solid #D5DAE3;flex:none}
.etiquette__bande img{height:10mm;width:auto;max-width:18mm;object-fit:contain;flex:none}
.etiquette__club{font-size:8pt;font-weight:700;color:#0B2457;line-height:1.15;flex:1}
.etiquette__rang{flex:none;font-weight:800;font-size:8.5pt;color:#fff;background:#0B2457;border-radius:3mm;padding:.5mm 2.2mm}
.etiquette__qui{flex:1 1 auto;display:flex;flex-direction:column;justify-content:center;min-height:0}
.etiquette__qui b{font-size:17pt;line-height:1.05;color:#0B2457;overflow-wrap:anywhere}
.etiquette__qui span{font-size:8.5pt;color:#4A5568;margin-top:.6mm;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.etiquette--normal .etiquette__qui b{font-size:15pt}
.etiquette--serre .etiquette__qui b{font-size:13pt}
.etiquette--moyen .etiquette__qui b{font-size:13pt}
.etiquette--long .etiquette__qui b{font-size:11pt}
.etiquette__pieces{flex:0 1 auto;margin:0;padding:1mm 0 0 3.2mm;font-size:8pt;line-height:1.25;border-top:.25mm solid #D5DAE3}
.etiquette--aere .etiquette__qui b{font-size:22pt}
.etiquette--aere .etiquette__qui span{font-size:10pt;margin-top:1.2mm}
.etiquette--aere .etiquette__pieces{font-size:10.5pt;line-height:1.45;padding-top:1.6mm}
.etiquette--aere .etiquette__bande img{height:11mm}
.etiquette--aere .etiquette__club{font-size:9pt}
.etiquette--aere.etiquette--moyen .etiquette__qui b{font-size:17pt}
.etiquette--aere.etiquette--long .etiquette__qui b{font-size:13pt}
.etiquette__pieces--2col{columns:2;column-gap:5mm;font-size:7.3pt;padding-left:3mm}
.etiquette__pieces li{break-inside:avoid}
.etiquette__pied{flex:none;font-size:6.5pt;color:#6B7280;text-align:right}

/* ---------- habillage CBS Trading (espace administrateur) ----------
   Charte CBS Trading : marine #1E275F, bleu #19668D, turquoise #00AFC9, gris clair #F2F5F9, Plus Jakarta Sans.
   Les couleurs du client restent celles de son organisation ; seule l'administration change d'habillage. */
body.theme-cbs{
  --cbs-marine:#1E275F; --cbs-bleu:#19668D; --cbs-turquoise:#00AFC9; --cbs-gris:#F2F5F9;
  --fort:var(--cbs-marine); --sur-fort:#FFFFFF; --accent:var(--cbs-bleu); --sur-accent:#FFFFFF;
  --navy:var(--cbs-marine); --navy-2:#151B45; --navy-3:var(--cbs-bleu); --navy-soft:#E5F4F8;
  --paper:var(--cbs-gris); --surface-alt:var(--cbs-gris);
  background:var(--cbs-gris)}
body.theme-cbs .entete{background:var(--cbs-marine);border-bottom:3px solid var(--cbs-turquoise)}
body.theme-cbs .entete__logo--cbs{height:64px;width:auto;margin:-10px -6px -10px -14px;flex:none;background:none;border-radius:0;padding:0}
body.theme-cbs .sb-link[aria-current=page],body.theme-cbs .sb-av{background:var(--cbs-turquoise);box-shadow:none}
body.theme-cbs .sb-link[aria-current=page] em{color:var(--cbs-turquoise)}
body.theme-cbs .onglets button[aria-current=page],body.theme-cbs .onglets-groupes button[aria-selected=true]{border-bottom-color:var(--cbs-turquoise)}
body.theme-cbs .bloc-prod__lettre{background:var(--cbs-bleu)}

/* ---------- administration : colonne latérale CBS Trading ---------- */
.sb-logo--cbs{flex-direction:column;align-items:flex-start;gap:4px;margin:0 4px 24px}
.sb-logo--cbs img{width:100%;max-width:200px;height:auto;background:none;border-radius:0;padding:0;margin:-14px 0 -10px -14px}
.sb-logo--cbs small{margin:0;font-size:.78rem;letter-spacing:.06em;text-transform:uppercase}
body.theme-cbs .sidebar{background:linear-gradient(180deg,var(--cbs-marine) 0%,#151B45 100%)}
body.theme-cbs .sb-logo small{color:var(--cbs-turquoise)}

/* Règle : une action est un bouton (12 px). Le bouton « texte » est un bouton discret, jamais un lien souligné. */
.btn.btn--texte{background:transparent;border:1px solid var(--line);border-radius:var(--rayon-s,12px);color:var(--navy);text-decoration:none}
.btn.btn--texte:hover{background:var(--paper);text-decoration:none}
.boutons-ligne{display:inline-flex;gap:.4rem;flex-wrap:wrap}

.fiche-acces{margin:0 0 1rem;display:flex;flex-wrap:wrap;gap:.6rem}
.onglets-fiche{margin:1.2rem 0 1rem}
.campagne-admin__tete{display:flex;justify-content:space-between;align-items:center;gap:.8rem}
.etiquette--normal .etiquette__qui b{font-size:17pt}
.etiquette--normal .etiquette__pieces,.etiquette--normal .etiquette__pieces--2col{font-size:8.6pt;line-height:1.4;padding-top:1.4mm}
.etiquette--normal.etiquette--moyen .etiquette__qui b{font-size:14pt}
.etiquette--normal.etiquette--long .etiquette__qui b{font-size:11.5pt}

/* liste de distribution : case cliquable à l'écran, case vide à l'impression */
.distribution .centre,.case-remise{text-align:center}
.case-remise__ecran{display:inline-flex;flex-direction:column;align-items:center;gap:2px;cursor:pointer}
.case-remise__ecran input{width:24px;height:24px;accent-color:var(--accent)}
.case-remise__ecran small{font-size:.72rem;color:var(--texte-doux)}
.case-remise__papier{display:none;width:6mm;height:6mm;border:.4mm solid #333;border-radius:1mm}
@media print{.case-remise__ecran{display:none!important}.case-remise__papier{display:inline-block}}

/* Couleurs de l'organisation (trois, pas davantage) : colonne en dégradé principale vers secondaire, accent sur l'entrée active et les boutons principaux */
body:not(.theme-cbs) .sidebar{background:linear-gradient(180deg,var(--fort,#0B2457) 0%,var(--fort-2,var(--fort,#081B45)) 100%)}
body:not(.theme-cbs) .sb-link[aria-current=page],body:not(.theme-cbs) .sb-av{background:var(--accent)}
body:not(.theme-cbs) .sb-link[aria-current=page] em{color:var(--accent)}

/* ---------- couleurs d'une organisation : champs, aperçu, charte ---------- */
.couleurs-champs{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:.6rem 1rem}
.couleur-saisie{display:flex;gap:.5rem;align-items:center}
.couleur-saisie input[type=color]{width:46px;height:42px;padding:2px;border:1px solid var(--line);border-radius:var(--rayon-s,12px);background:#fff;flex:none;cursor:pointer}
.couleur-saisie input[data-couleur-hex]{font-family:ui-monospace,Consolas,monospace;text-transform:uppercase}
.couleurs-fiche{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:1.2rem;align-items:start}
@media (max-width:900px){.couleurs-fiche{grid-template-columns:1fr}}
.apercu-theme{display:grid;grid-template-columns:140px 1fr;border:1px solid var(--line);border-radius:var(--rayon,16px);overflow:hidden;background:var(--paper);min-height:180px;font-size:.8rem}
.apercu-theme__colonne{background:linear-gradient(180deg,var(--ap-p),var(--ap-s));color:#fff;padding:.7rem .5rem;display:flex;flex-direction:column;gap:.25rem}
.apercu-theme__nom{display:flex;gap:.4rem;align-items:center;font-weight:800;font-size:.72rem;line-height:1.15;margin-bottom:.5rem}
.apercu-theme__nom img{width:28px;height:28px;background:#fff;border-radius:6px;padding:2px;object-fit:contain}
.apercu-theme__nom small{display:block;font-weight:500;opacity:.7}
.apercu-theme__lien{padding:.35rem .5rem;border-radius:10px;opacity:.85}
.apercu-theme__lien--actif{background:var(--ap-a);opacity:1}
.apercu-theme__page{padding:.8rem}
.apercu-theme__page b{color:var(--ap-p);font-size:.95rem}
.apercu-theme__page p{margin:.2rem 0 .7rem;color:var(--muted)}
.apercu-theme__btn,.apercu-theme__btn2{display:inline-block;padding:.4rem .7rem;border-radius:var(--rayon-s,12px);font-weight:700;margin:0 .3rem .3rem 0}
.apercu-theme__btn{background:var(--ap-a);color:#fff}
.apercu-theme__btn2{background:#fff;border:1px solid var(--line);color:var(--ap-p)}
.charte__tete{display:flex;gap:1rem;align-items:center;margin-bottom:1rem}
.charte__tete img{width:80px;height:80px;object-fit:contain}
.charte__couleurs{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-bottom:.8rem}
.charte__couleur{display:flex;flex-direction:column;gap:.15rem}
.charte__couleur i{display:block;height:70px;border-radius:var(--rayon-s,12px);border:1px solid var(--line);margin-bottom:.3rem;-webkit-print-color-adjust:exact;print-color-adjust:exact}
.charte__couleur span{font-family:ui-monospace,Consolas,monospace}
.apercu-theme,.apercu-theme *{-webkit-print-color-adjust:exact;print-color-adjust:exact}
@media print{.espace-admin .sidebar,.espace-admin .seulement-mobile,.espace-admin .pied,.non-imprime{display:none!important}.espace-admin{display:block}}

/* ---------- catalogue (administration) ---------- */
.catalogue-admin{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:.8rem}
.article-carte{display:grid;grid-template-columns:88px 1fr;gap:.8rem;border:1px solid var(--line);border-radius:var(--rayon,16px);padding:.7rem;background:#fff}
.article-carte--inactif{opacity:.65}
.article-carte__photo{width:88px;height:88px;border-radius:var(--rayon-s,12px);background:var(--paper);display:grid;place-items:center;overflow:hidden;font-size:.72rem;color:var(--muted)}
.article-carte__photo img{width:100%;height:100%;object-fit:contain}
.article-carte__tete{display:flex;justify-content:space-between;gap:.5rem;align-items:flex-start}
.article-edit__photo{width:80px;height:80px;object-fit:contain;border:1px solid var(--line);border-radius:var(--rayon-s,12px);margin-bottom:.4rem}
body.theme-cbs .a-traiter .btn{background:var(--cbs-bleu);border-color:var(--cbs-bleu);color:var(--surface)}
.articles-campagne{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:.2rem .8rem}
.puce--epuisee{opacity:.55;text-decoration:line-through;cursor:default}
.puce--epuisee small{text-decoration:none;font-size:.72em}

/* bulles de tailles (catalogue) */
.bulles-tailles{display:flex;flex-wrap:wrap;gap:.4rem;padding:.5rem;border:1px solid var(--line);border-radius:var(--rayon-s,12px);min-height:52px;background:var(--surface)}
.bulle-taille{display:inline-flex;align-items:stretch;border:1px solid var(--line);border-radius:var(--rayon-s,12px);background:var(--paper);cursor:grab;user-select:none}
.bulle-taille.est-tiree{opacity:.4}
.bulle-taille__nom{border:0;background:none;padding:.3rem .55rem;font:inherit;font-weight:700;cursor:pointer;display:flex;flex-direction:column;align-items:flex-start;line-height:1.1;color:var(--navy)}
.bulle-taille__nom small{font-weight:500;font-size:.68rem;color:var(--muted)}
.bulle-taille__retirer{border:0;border-left:1px solid var(--line);background:none;padding:0 .5rem;cursor:pointer;color:var(--muted);font-size:1rem}
.bulle-taille--actif{background:var(--navy-soft);border-color:rgba(0,64,144,0.3)}
@supports (color: color-mix(in srgb, red 50%, blue)){.bulle-taille--actif{border-color:color-mix(in srgb, var(--navy-3) 30%, transparent)}}
.bulle-taille--rupture{background:var(--paper);border-style:dashed}
.bulle-taille--rupture .bulle-taille__nom{text-decoration:line-through}
.bulle-taille--inactif{opacity:.55}
.ajout-ligne{display:flex;gap:.5rem;margin-top:.5rem}
.ajout-ligne input{flex:1}
.emplacements{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:.2rem .8rem}

/* ---------- en-tête de colonne : une règle pour l'espace club et l'administration ----------
   Logo à taille fixe, puis le nom de l'organisation, puis le type d'espace, plus petit et plus clair. */
.sidebar .sb-logo{display:flex;flex-direction:column;align-items:flex-start;gap:12px;margin:0 6px 26px}
.sidebar .sb-logo__image{width:64px;height:64px;display:grid;place-items:center;flex:none}
.sidebar .sb-logo__image img{width:64px;height:64px;object-fit:contain;margin:0;padding:4px;background:var(--surface);border-radius:var(--rayon-s,12px)}
.sidebar .sb-logo--cbs .sb-logo__image img{background:none;padding:0}
.sidebar .sb-logo__texte b{display:block;font-size:1rem;font-weight:800;line-height:1.2;color:var(--sur-fort,currentColor)}
.sidebar .sb-logo__texte small{display:block;margin-top:4px;font-size:.78rem;font-weight:500;letter-spacing:.02em;text-transform:none;opacity:.7}

/* étiquettes : une taille unique par élément, calculée pour le cas le plus chargé (nom sur deux lignes, six pièces) */
.etiquette .etiquette__qui b{font-size:14pt;line-height:1.1}
.etiquette .etiquette__qui span{font-size:9pt;margin-top:.6mm}
.etiquette .etiquette__pieces,.etiquette .etiquette__pieces--2col{font-size:8.2pt;line-height:1.3;padding-top:1.2mm}
.etiquette .etiquette__bande img{height:10mm}
.etiquette .etiquette__club{font-size:8.5pt}

/* récapitulatif fournisseur : flèche en bout de ligne, détail en fiche dépliée */
.tableau-depliable .ligne-depliable{cursor:pointer}
.tableau-depliable .ligne-depliable:hover td{background:var(--paper)}
.col-chevron{width:44px;text-align:right}
.chevron-btn{border:1px solid var(--line);background:var(--surface);border-radius:var(--rayon-s,12px);width:34px;height:34px;display:inline-grid;place-items:center;cursor:pointer;color:var(--navy)}
.chevron-btn[aria-expanded=true] .ico{transform:rotate(180deg)}
.ligne-detail > td{background:var(--paper);padding:.6rem .8rem}
.fiche-depliee{background:var(--surface);border:1px solid var(--line-soft);border-radius:var(--rayon-s,12px);padding:.8rem 1rem}
.fiche-depliee h4{margin:0 0 .5rem;font-size:.85rem;color:var(--muted);font-weight:700}
.qui-liste{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:.5rem .9rem}
.qui-liste li{display:flex;flex-wrap:wrap;gap:.1rem .5rem;align-items:baseline}
.qui-liste small{flex-basis:100%;color:var(--muted)}
/* récapitulatifs en PDF (impression) */
#impression .recap-doc{display:none}
@media print{
  body.impression-recap #impression .recap-doc{display:block;font-size:10pt;color:var(--ink)}
  .recap-tete{display:flex;gap:6mm;align-items:center;border-bottom:.4mm solid var(--navy);padding-bottom:3mm;margin-bottom:4mm}
  .recap-tete img{height:16mm;width:auto}
  .recap-tete h1{font-size:16pt;margin:0 0 1mm}
  .recap-tete p{margin:0}
  .recap-doc h2{font-size:12pt;margin:5mm 0 2mm}
  .recap-total,.recap-note{margin:0 0 2mm}
  .recap-table{width:100%;border-collapse:collapse;break-inside:auto}
  .recap-table th,.recap-table td{border:.2mm solid var(--line);padding:1.4mm 2mm;text-align:left;vertical-align:top}
  .recap-table th{font-size:8.5pt;text-transform:uppercase}
  .recap-table tr{break-inside:avoid}
  .recap-table .nombre{text-align:right}
  .recap-table .pointage{width:14mm;text-align:center}
  .case-papier{display:inline-block;width:5mm;height:5mm;border:.35mm solid var(--ink)}
}

/* distribution par famille */
.distribution-tete{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.6rem;margin:0 0 .8rem}
.distribution-tete p{margin:0}
.famille--remise{opacity:.75}
.distribution-papier{display:none}
@media print{.distribution-papier{display:table;width:100%;border-collapse:collapse;font-size:10pt}
  .distribution-papier th,.distribution-papier td{border:.2mm solid var(--line);padding:2mm;vertical-align:top}
  .distribution-papier tr{break-inside:avoid}}

/* Mon compte : sections repliables, une seule ouverte */
.section-compte{padding:0}
.section-compte > summary{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:1rem 1.2rem;cursor:pointer;list-style:none}
.section-compte > summary::-webkit-details-marker{display:none}
.section-compte > summary small{display:block;font-weight:500}
.section-compte[open] > summary .ico{transform:rotate(180deg)}
.section-compte__corps{padding:0 1.2rem 1.2rem}
.droits{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:.8rem;margin:.6rem 0 1rem}
.droits__niveau{border:1px solid var(--line);border-radius:var(--rayon-s,12px);padding:.7rem .9rem;background:var(--paper)}
.droits__niveau h3{margin:0 0 .4rem;font-size:.95rem}
.droits__niveau ul{margin:0;padding-left:1.1rem;font-size:.86rem;display:grid;gap:.25rem}
.droits__non{color:var(--muted);font-style:italic}

/* commande d'une personne en attente : le bouton dit pourquoi */
.bouton-attente{display:inline-flex;flex-direction:column;align-items:flex-end;gap:2px;text-align:right}
.bouton-attente small{font-size:.74rem;color:var(--attente)}
.question-categorie legend{font-weight:700;margin-bottom:.4rem}
.sous-titre-ligne{display:flex;justify-content:space-between;align-items:center;gap:.8rem;flex-wrap:wrap}

/* récapitulatif de commande (écran de vérification et bon) : groupes, puis un seul calcul */
.recap2{display:flex;flex-direction:column;gap:.9rem}
.recap2__groupe{border-bottom:1px solid var(--line-soft);padding-bottom:.7rem}
.recap2__ligne{display:flex;justify-content:space-between;align-items:baseline;gap:1rem}
.recap2__ligne b,.recap2__ligne > span:last-child{white-space:nowrap}
.recap2__titre{font-weight:800;text-transform:uppercase;letter-spacing:.04em;font-size:.86rem;color:var(--navy);margin-bottom:.35rem}
.recap2__titre b{font-size:1rem;letter-spacing:0}
.recap2__pieces{list-style:none;margin:0 0 .3rem;padding:0 0 0 1rem;color:var(--ink)}
.recap2__pieces li{padding:.12rem 0}
.recap2__option{padding-left:1rem;color:var(--muted);font-size:.95rem}
.recap2__groupe > .recap2__ligne:not(.recap2__titre):not(.recap2__option){padding:.15rem 0 .15rem 1rem}
.recap2__totaux{display:flex;flex-direction:column;gap:.35rem;align-items:stretch;margin-left:auto;width:min(100%,360px)}
.recap2__part b{color:var(--muted)}
.recap2__reste{border-top:2px solid var(--navy);padding-top:.5rem;font-weight:800;font-size:1.1rem;text-transform:uppercase;color:var(--navy)}
.recap2__detail summary{cursor:pointer;color:var(--navy);font-weight:600;font-size:.9rem}
.recap2__detail .defile{margin-top:.6rem}
/* panneau d'aide sur téléphone : toute la largeur, marge égale de chaque côté */
@media (max-width:600px){
  section.aide{left:12px;right:12px;bottom:12px;width:auto;max-width:none;max-height:calc(100vh - 24px);box-sizing:border-box}
}

/* validation d'un enfant : une ligne, un geste ; « Refuser » reste un lien discret */
.validation{padding:.7rem 0;border-top:1px solid var(--line-soft)}
.validation__qui{display:flex;flex-wrap:wrap;align-items:center;gap:.25rem .5rem}
.validation__act{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;margin-top:.5rem}
.validation__sep{color:var(--muted)}
.lien-discret{background:none;border:0;padding:.2rem .1rem;color:var(--muted);font-size:.86rem;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.lien-discret:hover{color:var(--red)}

/* administration : logo officiel CBS Trading complet, affiché tel quel ; nom et mention en dessous */
.sidebar .sb-logo--cbs{position:relative;display:block;width:168px;max-width:100%}
.sidebar .sb-logo--cbs .sb-logo__officiel{display:block;width:100%;height:auto;aspect-ratio:694/380;margin:0;padding:0;background:none;border-radius:unset}
/* « Administration » sous le mot TRADING du logo : 55,8 % de la largeur du dessin, juste sous la ligne du mot */
.sidebar .sb-logo--cbs .sb-logo__mention{position:absolute;left:55.8%;top:73%;margin:0;font-size:.68rem;font-weight:600;line-height:1;letter-spacing:.02em;text-transform:none;white-space:nowrap}

/* page de production : avancement de la campagne (bandeau et commandes par jour) */
.avancement .chiffres{margin-bottom:.8rem}
.avancement .chiffre span{line-height:1.35}
.courbe{margin:0}
.courbe svg{display:block;width:100%;height:auto}
.courbe__barre{fill:var(--navy)}
.courbe__grille{stroke:var(--line);stroke-width:1}
.courbe__axe,.courbe__val{font-size:11px;fill:var(--muted);font-family:inherit}
.courbe__val{fill:var(--ink);font-weight:700}
.courbe__relance{stroke:var(--cbs-turquoise,var(--muted));stroke-width:1.5;stroke-dasharray:4 3}
.courbe__relance-txt{font-size:10px;fill:var(--muted);font-family:inherit}
.courbe figcaption{margin-top:.3rem}
.validation__act .validation__refus{margin-left:auto;color:var(--muted);font-weight:500}
.confirmation p{margin:0 0 .35rem}

/* ---------------------------------------------------------------------
   Revue téléphone (375 px), 11/10/2026
   --------------------------------------------------------------------- */
/* onglets : libellé court sous 720 px, jamais sur deux lignes */
.onglets .lib-court{display:none}
@media (max-width:719px){ .onglets .lib-long{display:none} .onglets .lib-court{display:inline} }
.onglets button{white-space:nowrap}
/* un tableau défilant garde ses libellés masqués à l'intérieur (sinon la page défile de côté) */
.defile{position:relative}
/* lien et QR code : le texte n'élargit jamais le bloc */
.qr > div:first-child{min-width:0;max-width:100%}
.validation__act .validation__refus{border-color:var(--filet)}
@media (max-width:600px){
  /* champ du lien et bouton l'un sous l'autre, pleine largeur */
  .copie{flex-direction:column;gap:.5rem}
  .copie__champ{width:100%;border-right:1.5px solid var(--filet);border-radius:var(--rayon-s,12px)}
  .copie__btn{width:100%;justify-content:center;border-radius:var(--rayon-s,12px)}
  .qr__image{margin:0 auto}
  /* boutons côte à côte : ils passent les uns sous les autres en pleine largeur quand la place manque */
  .actions > .btn,.validation__act > .btn,.famille__act > .btn,.confirmation__act > .btn,.affiche-choix > .btn,.affiche-choix > select,
  .ligne-liste__act > .btn,.distribution-tete > .btn,.demande__tete > .btn{flex:1 1 auto;justify-content:center}
  .validation__act .validation__refus{margin-left:0}
  .grille-2{grid-template-columns:1fr}
}
.article__detail{margin-top:.35rem}
/* choix d'un fichier : jamais plus large que son bloc */
input[type=file]{max-width:100%;width:100%}
/* fiche d'une famille : les colonnes ne dépassent jamais l'écran */
.fiche-famille__col{min-width:0}
@media (max-width:1100px){ .fiche-famille{grid-template-columns:minmax(0,1fr)} }
.fiche-famille dd{overflow-wrap:anywhere}
/* texte réservé aux lecteurs d'écran : placé au coin de son bloc, il n'élargit jamais la page */
.sr{top:0;left:0;margin:-1px;padding:0;border:0}
/* un groupe de champs ne s'élargit jamais à la taille de son contenu (tableau défilant à l'intérieur) */
fieldset{min-width:0;max-width:100%}

/* ---------------------------------------------------------------------
   Avis (CBS Trading) · composant étoiles du socle : navy plein, filet vide, jamais de rouge
   --------------------------------------------------------------------- */
:root{--etoile-pleine:var(--navy);--etoile-vide:var(--line)}
.etoiles{display:inline-flex;gap:.25rem;flex-wrap:nowrap}
.etoile{width:44px;height:44px;min-width:44px;display:inline-grid;place-items:center;background:none;border:0;padding:0;cursor:pointer;border-radius:var(--rayon-s,12px)}
.etoile svg{width:32px;height:32px;fill:var(--etoile-vide);transition:fill .12s ease,transform .12s ease}
.etoile.est-pleine svg{fill:var(--etoile-pleine)}
.etoiles:hover .etoile:not(:disabled) svg{fill:var(--etoile-pleine)}
.etoiles .etoile:hover ~ .etoile:not(:disabled) svg{fill:var(--etoile-vide)}
.etoile:hover svg{transform:scale(1.08)}
.etoile:focus-visible{outline:3px solid var(--etoile-pleine);outline-offset:2px}
.etoile:disabled{cursor:default}
/* question après la commande */
.avis-rapide{text-align:center;transition:opacity .4s ease,max-height .4s ease;max-height:520px;overflow:hidden}
.avis-rapide--replie{opacity:0;max-height:0;padding-top:0;padding-bottom:0;margin:0;border-width:0}
.avis-rapide__titre{font-size:1.05rem;margin:0 0 .2rem}
.avis-rapide__question{margin:0 0 .5rem;color:var(--texte-doux)}
.avis-rapide__merci{font-weight:700;margin:.2rem 0 .6rem}
.avis-rapide .champ{text-align:left}
.avis-rapide .actions{justify-content:center}
/* page d'avis */
.avis-logos{display:flex;align-items:center;justify-content:center;gap:18px;margin:0 0 1.2rem;padding-bottom:1rem;border-bottom:1px solid var(--line)}
.avis-logos img{display:block;flex:none}
.avis-logos__club{width:64px;height:64px;object-fit:contain}
.avis-logos__cbs{width:64px;height:64px}
.avis-logos__sep{width:1px;height:38px;background:var(--line);flex:none}
@media (max-width:600px){ .avis-logos__club{width:56px;height:56px} .avis-logos__cbs{width:56px;height:56px} .avis-logos__sep{height:34px} }
.avis-page h1{font-size:1.3rem;text-align:center;margin:0 0 1rem}
.avis-question{border:0;padding:0;margin:0 0 1.1rem}
.avis-question legend{font-weight:700;margin-bottom:.4rem;padding:0}
.avis-oui-non{display:flex;gap:.6rem}
.avis-oui-non .btn{min-width:96px}
.avis-oui-non .btn[aria-pressed="true"]{background:var(--navy);border-color:var(--navy);color:var(--surface)}
.avis-fin{text-align:center;padding:1rem 0}
.avis-fin svg{width:44px;height:44px;color:var(--navy)}
.avis-fin p{font-weight:700;font-size:1.1rem;margin:.4rem 0 0}

/* administration : avis, livraison, données */
.avis-commentaire .etiq{margin-left:.25rem}
.etapes-vidage{margin:.8rem 0 0;padding-left:1.2rem;display:grid;gap:.9rem}
.etapes-vidage li > div{margin-top:.4rem}
.separateur{border:0;border-top:1px solid var(--line);margin:1.4rem 0}
.btn.btn--danger{background:var(--red-2);border-color:var(--red-2);color:var(--surface)}
.btn.btn--danger:disabled{opacity:.45;cursor:not-allowed}
.bandeau-demo{background:var(--attente-doux);color:var(--texte);border-bottom:1px solid var(--filet);padding:.55rem 16px;font-weight:700;font-size:.9rem;text-align:center}
/* avis à rappeler */
.rappel--traite{opacity:.62}
.rappel .etiq{margin-left:.25rem}
.case--petite{min-height:auto;padding:.3rem .2rem;font-size:.9rem}

/* vue du compte d'un parent (CBS Trading) : bandeau permanent */
.bandeau-vue{position:sticky;top:0;z-index:60;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.5rem 1rem;
  background:var(--navy);color:var(--surface);padding:.55rem 16px;font-size:.92rem}
.bandeau-vue .btn{background:var(--surface);color:var(--navy);border-color:var(--surface)}
/* socle : blocs empilés jamais collés, action refusée d'avance (bouton désactivé, raison à côté) */
[data-erreur]:not(:empty){margin-top:.75rem}
[data-erreur] > .message{margin:0}
.message + .message,.message + .confirmation,.confirmation + .message,.confirmation + .confirmation{margin-top:.75rem}
.action-possible{display:inline-flex;flex-wrap:wrap;align-items:center;gap:.25rem .5rem}
.action-refusee__raison{color:var(--texte-doux);font-size:.85rem}

/* socle : espacement des messages par relation (voir socle.css) ; aucune marge écrite dans les écrans */
* + .message,* + .confirmation,* + .a-traiter{margin-top:.75rem}
[data-erreur]:not(:empty){margin-top:.75rem}
[data-erreur] > .message{margin:0}
:where(.carte, .dlg__corps, main) > .message:first-child,:where(.carte, .dlg__corps, main) > .confirmation:first-child{margin-top:0}
.action-possible{gap:.5rem .5rem}

/* socle : une pastille d'état n'est jamais collée à ce qui la jouxte (texte, autre pastille, bouton) et ne contient jamais d'action */
.etat-action{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem}
.etat-action > .taille-choisie{display:inline-flex}
:where(b, strong, span, small, a, .etiq, .btn, button) + .etiq,.etiq + :where(.etiq, .btn, button, b, strong, a){margin-left:.5rem}
:where(.famille__etat, .etat-action, .action-possible, .validation__qui, .actions, .fiche-actions, .famille__act) > .etiq,
:where(.famille__etat, .etat-action, .action-possible, .validation__qui, .actions, .fiche-actions, .famille__act) > .etiq + *{margin-left:0}
/* boutons de taille : chacun prend la largeur de son libellé (« Taille junior » entier), 76 px au moins */
.tailles{display:flex;flex-wrap:wrap;gap:.35rem}
.tailles > .puce{flex:0 0 auto;min-width:76px;max-width:100%;padding-left:.6rem;padding-right:.6rem}

/* socle : bloc de réglages en lecture (valeurs dans .fiche, « Modifier » ouvre la saisie) */
.fiche + .actions,.fiche + .couleurs-fiche,.couleurs-fiche + .actions{margin-top:.8rem}
.teinte{display:inline-block;width:1em;height:1em;margin-right:.4rem;vertical-align:-.15em;border:1px solid var(--filet);border-radius:var(--rayon-pilule)}
.groupe-fiche{border-top:1px solid var(--filet);padding:.8rem 0}
.groupe-fiche h3{margin:0 0 .3rem;font-size:1rem}
.groupe-fiche .groupe-admin{border-top:0}
/* téléphone : le libellé au dessus de la valeur, jamais un mot coupé en deux */
@media (max-width:520px){ .fiche__ligne{flex-direction:column;gap:.1rem} .fiche__ligne b{text-align:left} }
/* rapport d import : un nom au caractere illisible est signale en rouge (socle : couleur de message erreur) */
.ligne--abimee td{background:var(--alerte-doux);color:var(--alerte)}
/* données de démonstration, onglet Données : le champ et ses boutons alignés par le bas (même ligne de base que la case) */
.actions-demo{display:flex;flex-wrap:wrap;align-items:flex-end;gap:.6rem}
.actions-demo .champ{flex:0 1 12rem;margin:0}
/* données de démonstration : filigrane en diagonale sur le bon de commande et sur l'étiquette, à l'écran comme sur le papier.
   Pâle (couleur d'avertissement du socle, très transparente) : lisible sans gêner la lecture du document. */
.bon--demo,.etiquette--demo{position:relative}
.bon--demo::after,.etiquette--demo::after{content:"D\00C9MONSTRATION";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) rotate(-30deg);
  font-weight:800;letter-spacing:.12em;color:var(--attente);opacity:.16;white-space:nowrap;pointer-events:none;z-index:1}
.bon--demo::after{font-size:4.5rem}
.etiquette--demo::after{font-size:1.6rem}
/* impression : il ne reste que le document. Les bandeaux de vue empruntée et de démonstration, le menu, l'en-tête, la navigation
   et les boutons restent à l'écran mais ne vont jamais sur le papier, quelle que soit la vue d'où l'on imprime. */
@media print{
  .bandeau-vue,.bandeau-delegue,.bandeau-demo,.sidebar,.entete,.pied,.non-imprime,.retour,#aide-racine{display:none!important}
  .espace-club,.espace-admin{display:block!important}
  .espace-club__main{margin:0!important;padding:0!important}
}
/* réservé à CBS Trading : bloc, ligne ou bouton que le gestionnaire ne voit jamais. Il est absent de son rendu (non généré,
   données refusées par le serveur) ; ce marquage n'est qu'un repère pour CBS Trading, jamais la sécurité.
   Fond orange pâle, filet orange plein à gauche, étiquette pleine « Vue CBS Trading ». Distinct de la pastille « Démo »
   (pâle, bord pointillé) : le réservé est vrai mais caché au club, la démonstration est visible mais fausse. */
.reserve-cbs{background:var(--attente-doux);border:1px solid var(--attente);border-left-width:4px}
.etiq--cbs{background:var(--attente);color:var(--sur-fort, var(--surface))}
/* socle : une pastille qui suit un nom ou une référence porte son propre écart, même après un simple texte (que les règles par
   relation ne voient pas). Spécificité nulle : dans un conteneur qui espace déjà ses enfants (gap), la remise à zéro l'emporte. */
:where(.etiq--suit){margin-inline-start:.5rem}
/* dans un conteneur qui espace déjà ses enfants (gap de .5rem), l'écart de la pastille ne s'ajoute pas au sien */
:where(.qui-liste li, .famille__etat, .etat-action) > .etiq--suit{margin-inline-start:0}
/* module « À venir » ou « Toujours actif » : grisé, non modifiable (075, 076) */
.case--a-venir{cursor:not-allowed;opacity:.6}
/* suivi de l'envoi des invitations : adresses en échec, nommément (077) */
.liste-echecs{margin:.3rem 0 .6rem;padding-left:1.2rem}
.liste-echecs li{margin:.15rem 0}
/* bouton « afficher le mot de passe » (tous les champs de mot de passe) : dans le champ, à droite, 40 px */
.mdp-champ{position:relative;display:block}
.mdp-champ input{padding-right:3rem;width:100%}
.mdp-oeil{position:absolute;top:50%;right:.25rem;transform:translateY(-50%);width:40px;height:40px;display:inline-flex;align-items:center;justify-content:center;
  border:0;background:transparent;color:var(--texte-doux);border-radius:var(--rayon-s);cursor:pointer;padding:0}
.mdp-oeil:hover{color:var(--texte)}
.mdp-oeil:focus-visible{outline:2px solid var(--fort);outline-offset:1px}
.mdp-oeil svg{width:20px;height:20px}
/* Edge ajoute son propre œil : un seul bouton à l'écran */
.mdp-champ input::-ms-reveal{display:none}

/* ---------------------------------------------------------------------
   Dotation par poste et suivi des équipes (dotation.js)
   --------------------------------------------------------------------- */
.etiq--refus{background:var(--alerte-doux);color:var(--alerte)}
.mention-catalogue{text-align:right;margin:.2rem 0 .8rem;font-style:italic}
.dot-acces{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.8rem;border-left:4px solid var(--repere,var(--fort))}
.dot-quota ul{list-style:none;margin:.5rem 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:.4rem}
.dot-quota li{display:flex;justify-content:space-between;gap:.5rem;padding:.45rem .7rem;border:1px solid var(--filet);border-radius:var(--rayon-s);background:var(--surface-alt)}
.dot-quota li.dot-plein{border-color:var(--ok);color:var(--ok)}
.dot-quota li.dot-depasse{border-color:var(--alerte);color:var(--alerte);background:var(--alerte-doux)}
.dot-famille{font-size:1rem;margin:1.1rem 0 .5rem}
.dot-tuiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:.7rem;margin:0 0 .6rem}
/* cartes de montants : montants en couleur forte (marine), le repère (or) en filet et en pastille */
.dot-tuile{display:flex;flex-direction:column;gap:.15rem;padding:.8rem 1rem;border:1px solid var(--filet);border-top:3px solid var(--repere,var(--filet));border-radius:var(--rayon);background:var(--surface)}
.dot-tuile span{display:flex;align-items:center;gap:.4rem;font-size:.85rem;color:var(--texte-doux)}
.dot-tuile b{font-size:1.35rem;color:var(--fort)}
.dot-tuile small{font-size:.78rem;color:var(--texte-doux)}
.dot-pastille{display:inline-block;width:.6rem;height:.6rem;border-radius:50%;background:var(--repere,var(--fort));flex:none}
.dot-pastille--ok,.dot-tuile--ok .dot-pastille{background:var(--fort)}
.dot-pastille--attente,.dot-tuile--attente .dot-pastille{background:var(--repere,var(--attente))}
.dot-pastille--reste,.dot-tuile--fort .dot-pastille{background:var(--surface-alt);box-shadow:inset 0 0 0 1.5px var(--repere,var(--filet))}
/* jauge de l'enveloppe : validé (fort), en attente (repère), restant (fond des pages) */
.dot-jauge{display:flex;height:12px;border-radius:6px;overflow:hidden;background:var(--surface-alt);border:1px solid var(--filet);margin:0 0 .4rem}
.dot-jauge__ok{background:var(--fort)}
.dot-jauge__att{background:var(--repere,var(--attente))}
.dot-legende{display:flex;flex-wrap:wrap;gap:.4rem 1rem;font-size:.8rem;color:var(--texte-doux);margin:0 0 1.2rem}
.dot-legende span{display:inline-flex;align-items:center;gap:.35rem}
.dot-equipe__tete{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-start;gap:.6rem;margin-bottom:.4rem}
.dot-equipe__tete h2{font-size:1.15rem;margin:0}
.dot-equipe__chiffres{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;font-weight:700}
.dot-liste{list-style:none;margin:0;padding:0}
.dot-personne{padding:.75rem 0;border-top:1px solid var(--filet)}
.dot-personne--brigade{background:var(--surface-alt);padding:.75rem .7rem;border-radius:var(--rayon-s);margin-top:.4rem}
.dot-personne__haut{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.5rem}
.dot-personne__qui{display:flex;flex-direction:column;min-width:0}
.dot-personne__etat{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem}
.dot-montant{font-variant-numeric:tabular-nums}
.dot-personne__act{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:.4rem;margin-top:.5rem}
.dot-detail{margin-top:.5rem}
.dot-lignes{list-style:none;margin:0;padding:0;font-size:.9rem}
.dot-lignes li{display:flex;justify-content:space-between;gap:.6rem;padding:.2rem 0;border-bottom:1px dashed var(--filet)}
.dot-motif{margin:.5rem 0 0;color:var(--alerte)}
.dot-refus{margin-top:.5rem;display:flex;flex-direction:column;gap:.35rem}
.dot-refus textarea{width:100%;font:inherit;padding:.5rem;border:1px solid var(--filet);border-radius:var(--rayon-s)}
.produit small.doux{display:block;font-size:.78rem;margin:.1rem 0 .3rem}


/* ---------------------------------------------------------------------
   Palette de l'organisation (thème) : l'habillage lit les couleurs du thème
   (repère, états, menus). La valeur après la virgule est celle de l'habillage
   d'origine, utilisée quand le thème ne donne pas la couleur.
   --------------------------------------------------------------------- */
body:not(.theme-cbs){
  --navy:var(--fort); --navy-2:var(--fort-2,var(--fort)); --navy-3:var(--repere,#004090); --navy-soft:var(--repere-doux,#E8F0FB);
  --red:var(--repere,#E01020); --red-2:var(--repere,#B80D1A); --red-soft:var(--repere-doux,#FDECEE);
  --ink:var(--texte); --muted:var(--texte-doux); --line:var(--filet); --line-soft:var(--filet-doux,#EEF2F7); --paper:var(--surface-alt);
}
body:not(.theme-cbs) .sidebar,body:not(.theme-cbs) .sb-link{color:var(--sur-fort-doux,#C7D3EE)}
body:not(.theme-cbs) .sb-logo small,body:not(.theme-cbs) .sb-user small,body:not(.theme-cbs) .sb-quitter{color:var(--sur-fort-doux,#8FA3D1)}
body:not(.theme-cbs) .sb-link[aria-current=page]{background:var(--red);color:var(--sur-repere,#fff);box-shadow:var(--halo-menu,0 6px 16px rgba(224,16,32,.35))}
body:not(.theme-cbs) .sb-link[aria-current=page] em{background:var(--sur-repere,#fff);color:var(--red);border-color:var(--sur-repere,#fff)}
body:not(.theme-cbs) .sb-link em{color:var(--repere-clair,#FF6B74);border-color:var(--repere-clair,#FF6B74)}
body:not(.theme-cbs) .sb-av{background:var(--red);color:var(--sur-repere,#fff)}
body:not(.theme-cbs) .sb-link:focus-visible{outline-color:var(--repere,#fff)}
body:not(.theme-cbs) .onglets-groupes button[aria-selected=true]{border-bottom-color:var(--red)}
body:not(.theme-cbs) .lien-discret:hover{color:var(--fort)}
/* repère : focus, sélection, boutons secondaires, barres de progression */
body:not(.theme-cbs) .btn:focus-visible,body:not(.theme-cbs) .puce:focus-visible,body:not(.theme-cbs) .lien-btn:focus-visible,
body:not(.theme-cbs) .mdp-oeil:focus-visible,body:not(.theme-cbs) .bulle:focus-visible{outline-color:var(--repere,var(--fort))}
body:not(.theme-cbs) .champ input:focus,body:not(.theme-cbs) .champ select:focus,body:not(.theme-cbs) .champ textarea:focus{border-color:var(--repere,var(--fort))}
body:not(.theme-cbs) ::selection{background:var(--selection,Highlight);color:var(--texte)}
body:not(.theme-cbs) .btn--second{border-color:var(--bord-second,var(--filet))}
body:not(.theme-cbs) .progression span{background:var(--progression,var(--ok))}
/* états « en attente » : fond du repère très clair, filet du repère */
body:not(.theme-cbs) .a-traiter,body:not(.theme-cbs) .confirmation--avertir,body:not(.theme-cbs) .message--attente{border-color:var(--attente-bord,rgba(138,90,0,0.3))}
body:not(.theme-cbs) .etiq--attente{box-shadow:inset 0 0 0 1px var(--attente-bord,transparent)}
/* logo pour fond sombre dans la barre latérale : sans pastille blanche */
.sb-logo--sombre{flex-direction:column;align-items:flex-start;gap:6px}
.sb-logo--sombre img{width:100%;max-width:200px;height:auto;background:none;padding:0;border-radius:0}
/* barre de démonstration (demo.cbstrading.fr seulement) : fond nuit, filet du repère, contenu aligné sur la page */
.barre-demo{position:fixed;top:0;left:0;right:0;z-index:60;height:36px;background:var(--fort-2,var(--fort));color:var(--surface-alt);
  border-bottom:1px solid var(--repere,var(--accent));font-size:.8rem}
.barre-demo__in{max-width:1100px;height:100%;margin:0 auto;padding:0 16px;display:flex;align-items:center;gap:.8rem;white-space:nowrap}
.barre-demo__titre{flex:none;font-variant:small-caps;text-transform:lowercase;letter-spacing:.08em;font-weight:700;font-size:.92rem;color:var(--repere,var(--accent))}
.barre-demo__court{display:none}
.barre-demo__qui{flex:1 1 auto;min-width:0;display:flex;align-items:center;justify-content:center;gap:.5rem}
.barre-demo__lib{flex:none;opacity:.8}
.barre-demo__menu{position:relative;min-width:0;flex:0 1 330px;display:flex}
.barre-demo__menu::after{content:"";position:absolute;right:.6rem;top:50%;width:.4rem;height:.4rem;margin-top:-.3rem;border-right:1.5px solid var(--repere,var(--accent));
  border-bottom:1.5px solid var(--repere,var(--accent));transform:rotate(45deg);pointer-events:none}
.barre-demo select{appearance:none;-webkit-appearance:none;width:100%;min-width:0;height:26px;padding:0 1.8rem 0 .6rem;border:1px solid var(--repere,var(--accent));
  border-radius:6px;background:transparent;color:var(--surface-alt);font:inherit;font-size:.8rem;text-overflow:ellipsis;cursor:pointer}
.barre-demo select:focus-visible{outline:2px solid var(--repere,var(--accent));outline-offset:1px}
.barre-demo option,.barre-demo optgroup{background:var(--fort-2,var(--fort));color:var(--surface-alt)}
.barre-demo__reinit{flex:none;display:inline-flex;align-items:center;gap:.35rem;background:none;border:0;padding:.2rem .1rem;color:var(--surface-alt);opacity:.85;
  font:inherit;font-size:.8rem;cursor:pointer;text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--repere,var(--accent))}
.barre-demo__reinit:hover{opacity:1}
.barre-demo__reinit svg{width:14px;height:14px}
body.avec-barre-demo{padding-top:36px}
body.avec-barre-demo .sidebar{top:36px;height:calc(100vh - 36px)}
@media (max-width:640px){
  .barre-demo__in{gap:.5rem;padding:0 10px}
  .barre-demo__long,.barre-demo__lib{display:none}
  .barre-demo__court{display:inline}
  .barre-demo__menu{flex:1 1 auto}
  .barre-demo__reinit span{display:none}
}
@media print{.barre-demo{display:none} body.avec-barre-demo{padding-top:0}}
/* page de connexion : logo vertical pour fond sombre, posé directement sur le fond fort */
.accueil__haut img.accueil__logo-sombre{width:auto;height:170px;max-width:80%;margin:0 auto .2rem;background:none;padding:0;border-radius:0}
body:not(.theme-cbs) .sb-sep{color:inherit}
/* administration CBS Trading : textes du menu en blanc atténué sur la marine (plus de bleu lavande de l'habillage d'origine) */
body.theme-cbs .sidebar,body.theme-cbs .sb-link{color:rgba(255,255,255,.82)}
body.theme-cbs .sb-logo small,body.theme-cbs .sb-user small,body.theme-cbs .sb-quitter{color:rgba(255,255,255,.62)}
body.theme-cbs{--muted:var(--texte-doux)}