/* =====================================================================
   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 color-mix(in srgb, var(--sur-fort) 35%, transparent);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}
.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 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:color-mix(in srgb, var(--alerte) 25%, transparent)}
.message--ok{background:var(--ok-doux);color:var(--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 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:color-mix(in srgb, var(--sur-fort) 12%, transparent);color:var(--sur-fort);border-color:color-mix(in srgb, var(--sur-fort) 45%, transparent)}
.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: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:color-mix(in srgb, var(--sur-fort) 14%, transparent);border-radius:4px;padding:.5rem .9rem}
.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 color-mix(in srgb, var(--attente) 30%, transparent);border-radius:4px;padding:.9rem 1.1rem;margin-bottom:1rem}
.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: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:#FFF4D6;color:#5A4300;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: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: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:color-mix(in srgb, var(--fort) 6%, var(--surface));box-shadow:inset 0 0 0 1px var(--fort)}
.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 color-mix(in srgb, var(--attente) 30%, transparent);border-radius:4px;padding:.6rem .8rem;margin:.4rem 0;font-size:.92rem}
.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{border-color:#E8C76A;background:#FFFDF5}
.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:color-mix(in srgb, var(--accent) 82%, #000);border-color:color-mix(in srgb, var(--accent) 82%, #000);filter:none}
.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: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 color-mix(in srgb, var(--navy-3) 25%, transparent);color:var(--navy);padding:.75rem .9rem;margin:.5rem 0;font-size:.93rem;flex-basis:100%;width:100%}
.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:color-mix(in srgb, var(--red) 30%, transparent);color:#7A0A12}
.confirmation--danger .confirmation__act .btn:last-child{background:var(--red);border-color:var(--red);color:#fff}
.confirmation--avertir{background:var(--attente-doux);border-color:color-mix(in srgb, var(--attente) 30%, transparent);color:var(--attente)}
.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 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:1px dashed var(--line);border-radius:var(--rayon-s,12px)}
.cbs-outil__btn{margin-top:.6rem}
.carte--cible{outline:2px solid var(--navy-3);outline-offset:2px}
.etiq--demo{background:#FFF1D6;color:#8A5A00;border:1px dashed #E0A93B}

/* outils de test (vue CBS Trading) */
.outils-test{border-style:dashed}
.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-groupe{margin:.2rem 0 .8rem;padding:.4rem .8rem;border:1px solid var(--line-soft);border-radius:var(--rayon-s,12px)}
.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: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 .4rem;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}
}