/* ==========================================================================
   Espace d'administration — feuille de style commune
   --------------------------------------------------------------------------
   Reprend la palette du site public (vert #00896C, sarcelle #026D7E) dans une
   mise en page plus sobre : cartes blanches sur fond clair, une seule échelle
   typographique, des contrôles de formulaire homogènes.

   Chaque page d'administration portait auparavant son propre bloc <style>,
   d'où des écarts d'une page à l'autre. Tout est centralisé ici.
   ========================================================================== */

:root {
  --adm-primaire:      #00896C;
  --adm-primaire-fonce:#026D7E;
  --adm-primaire-pale: #E8F3F0;

  --adm-fond:      #F5F7F8;
  --adm-carte:     #FFFFFF;
  --adm-carte-alt: #F0F3F5;

  --adm-texte:     #23302E;
  --adm-texte-doux:#5A6A68;
  --adm-texte-pale:#8695A0;

  --adm-trait:     #DDE4E6;
  --adm-trait-fort:#C3CFD2;

  --adm-alerte:    #C0392B;
  --adm-alerte-fonce:#9C2D21;
  --adm-alerte-pale:#FCEBE9;
  --adm-succes:    #1E7A54;
  --adm-succes-pale:#E4F3EC;
  --adm-attention: #8A5A00;
  --adm-attention-pale:#FBEED6;

  --adm-rayon:  8px;
  --adm-ombre:  0 1px 2px rgba(35, 48, 46, .06), 0 1px 3px rgba(35, 48, 46, .04);
  --adm-police: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

/* ---------- Structure ---------------------------------------------------- */

/* La largeur est fixée par la coquille (.content-backoffice), jamais par la
   page : quatre valeurs différentes cohabitaient auparavant — 680, 900, 1060
   et 1180 px — et la mise en page sautait d'un écran à l'autre. */
.adm { width: 100%; margin: 0; padding: 0 0 3rem; font-family: var(--adm-police); }
.adm-large { max-width: none; }

.adm-entete { padding: 1.75rem 0 1.5rem; border-bottom: 1px solid var(--adm-trait); margin-bottom: 1.75rem; }
.adm-entete h1 { margin: 0; font-size: 1.6rem; font-weight: 600; letter-spacing: -.01em; color: var(--adm-texte); }
.adm-entete p  { margin: .45rem 0 0; color: var(--adm-texte-doux); font-size: .93rem; max-width: 68ch; }

.adm-colonnes { display: grid; gap: 1.75rem; grid-template-columns: minmax(0,1fr) 340px; align-items: start; }
@media (max-width: 980px) { .adm-colonnes { grid-template-columns: 1fr; } }

/* ---------- Cartes ------------------------------------------------------- */

.adm-carte {
  background: var(--adm-carte);
  border: 1px solid var(--adm-trait);
  border-radius: var(--adm-rayon);
  box-shadow: var(--adm-ombre);
  padding: 1.4rem 1.5rem;
  margin-bottom: 1.25rem;
}
.adm-carte > :first-child { margin-top: 0; }
.adm-carte > :last-child  { margin-bottom: 0; }

.adm-carte h2 {
  margin: 0 0 .3rem; font-size: 1.05rem; font-weight: 600; color: var(--adm-texte);
}
.adm-carte h2 .adm-compteur {
  font-weight: 400; color: var(--adm-texte-pale); font-size: .87rem; margin-left: .35rem;
}
.adm-aide { margin: 0 0 1.2rem; color: var(--adm-texte-doux); font-size: .87rem; line-height: 1.55; max-width: 70ch; }

.adm-section { margin-top: 1.5rem; padding-top: 1.3rem; border-top: 1px solid var(--adm-trait); }

/* ---------- Formulaires -------------------------------------------------- */

.adm-champs { display: grid; gap: 1.1rem; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }

.adm-champ label,
.adm-libelle {
  display: block; font-size: .78rem; font-weight: 600; letter-spacing: .01em;
  color: var(--adm-texte-doux); margin-bottom: .35rem;
}

.adm-champ input[type=text],
.adm-champ input[type=email],
.adm-champ input[type=url],
.adm-champ input[type=number],
.adm-champ input[type=password],
.adm-champ input[type=date],
.adm-champ select,
.adm-champ textarea,
.adm-saisie {
  width: 100%;
  padding: .5rem .65rem;
  border: 1px solid var(--adm-trait-fort);
  border-radius: 6px;
  background: var(--adm-carte);
  font: inherit; font-size: .9rem; color: var(--adm-texte);
  transition: border-color .15s, box-shadow .15s;
}
.adm-champ input:focus, .adm-champ select:focus, .adm-champ textarea:focus, .adm-saisie:focus {
  outline: none;
  border-color: var(--adm-primaire);
  box-shadow: 0 0 0 3px var(--adm-primaire-pale);
}
.adm-champ input[type=file] { font-size: .85rem; color: var(--adm-texte-doux); }
.adm-champ textarea { resize: vertical; min-height: 90px; line-height: 1.55; }
.adm-note { margin: .35rem 0 0; font-size: .78rem; color: var(--adm-texte-pale); }

/* ---------- Passerelle vers l'ancien motif de champ -----------------------

   LE GABARIT DE LA MAISON, pour tout nouveau formulaire :

       <div class="adm-champ">
         <label for="x">Libellé</label>
         <input type="text" id="x" name="x">
         <p class="adm-note">Une phrase d'aide, si elle sert.</p>
       </div>

   plusieurs de ces blocs dans un <div class="adm-champs">, qui les range en
   colonnes. C'est le seul motif à écrire désormais.

   Beaucoup d'écrans portent encore l'ancien : <label>Libellé <input></label>,
   où le libellé se retrouvait collé à gauche de la saisie, sans style — d'où
   des formulaires qui paraissaient bâclés. Les règles ci-dessous leur donnent
   l'allure du gabarit en attendant qu'ils soient convertis. Elles ne
   dispensent pas de le faire : elles évitent seulement qu'un écran non encore
   repris soit illisible.

   La sélection est volontairement étroite — un label qui enveloppe une vraie
   saisie — pour ne pas attraper les cases à cocher, qui se lisent en ligne.
   -------------------------------------------------------------------------- */

.adm-champs > label:has(> input:not([type=checkbox]):not([type=radio])),
.adm-champs > label:has(> select),
.adm-champs > label:has(> textarea),
.adm-carte > form > label:has(> input:not([type=checkbox]):not([type=radio])),
.adm-carte > form > label:has(> select),
.adm-carte > form > label:has(> textarea) {
  display: block; min-width: 0;
  font-size: .78rem; font-weight: 600; letter-spacing: .01em;
  color: var(--adm-texte-doux);
}

.adm-champs > label > input:not([type=checkbox]):not([type=radio]),
.adm-champs > label > select,
.adm-champs > label > textarea,
.adm-carte > form > label > input:not([type=checkbox]):not([type=radio]),
.adm-carte > form > label > select,
.adm-carte > form > label > textarea {
  display: block; width: 100%; margin-top: .35rem;
  padding: .5rem .65rem;
  border: 1px solid var(--adm-trait-fort); border-radius: 6px;
  background: var(--adm-carte);
  font: inherit; font-size: .9rem; font-weight: 400; color: var(--adm-texte);
  transition: border-color .15s, box-shadow .15s;
}
.adm-champs > label > input:focus,
.adm-champs > label > select:focus,
.adm-champs > label > textarea:focus,
.adm-carte > form > label > input:focus,
.adm-carte > form > label > select:focus,
.adm-carte > form > label > textarea:focus {
  outline: none;
  border-color: var(--adm-primaire);
  box-shadow: 0 0 0 3px var(--adm-primaire-pale);
}
.adm-champs > label > textarea,
.adm-carte > form > label > textarea { resize: vertical; min-height: 90px; line-height: 1.55; }

/* La phrase d'aide, écrite en <small> dans l'ancien motif. */
.adm-champs > label > small,
.adm-carte > form > label > small {
  display: block; margin-top: .35rem;
  font-size: .78rem; font-weight: 400; color: var(--adm-texte-pale); line-height: 1.5;
}

/* Un formulaire sans grille : ses champs s'espacent quand même. */
.adm-carte > form > label { margin-bottom: 1.1rem; }

/* Couleur : sélecteur et valeur hexadécimale côte à côte */
.adm-couleur { display: flex; gap: .5rem; align-items: center; }
.adm-couleur input[type=color] {
  width: 44px; height: 38px; flex: none; padding: 0; cursor: pointer;
  border: 1px solid var(--adm-trait-fort); border-radius: 6px; background: none;
}
.adm-couleur input[type=text] { flex: 1; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; text-transform: uppercase; }

fieldset.adm-groupe { border: 0; padding: 0; margin: 0; min-width: 0; }
fieldset.adm-groupe[disabled] { opacity: .55; }

.adm-cases { display: grid; gap: .3rem; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.adm-cases label { display: flex; align-items: center; gap: .4rem; font-size: .87rem; font-weight: 400; color: var(--adm-texte); }

.adm-actions { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; margin-top: 1.4rem; }

/* Une séance annulée reste dans la liste, en retrait : elle a existé, elle
   n'aura pas lieu. La barrer la rendrait illisible sur une ligne entière. */
.adm-tableau tr.ev-annulee td { opacity: .55; }
.adm-tableau tr.ev-annulee td:first-child { opacity: 1; }

/* ---------- Boutons ------------------------------------------------------ */

.adm-bouton {
  display: inline-flex; align-items: center; gap: .4rem;
  background: var(--adm-primaire); color: #fff; border: 1px solid var(--adm-primaire);
  padding: .55rem 1.15rem; border-radius: 6px;
  font: inherit; font-size: .9rem; font-weight: 600; cursor: pointer; text-decoration: none;
  transition: background .15s, border-color .15s;
}
.adm-bouton:hover  { background: var(--adm-primaire-fonce); border-color: var(--adm-primaire-fonce); color: #fff; }
.adm-bouton:focus-visible { outline: 2px solid var(--adm-primaire-fonce); outline-offset: 2px; }

.adm-bouton-second {
  background: var(--adm-carte); color: var(--adm-texte); border-color: var(--adm-trait-fort);
}
.adm-bouton-second:hover { background: var(--adm-carte-alt); color: var(--adm-texte); border-color: var(--adm-trait-fort); }

.adm-bouton-fin {
  background: none; border: 1px solid var(--adm-trait-fort); color: var(--adm-texte-doux);
  padding: .3rem .7rem; font-size: .82rem; font-weight: 500; border-radius: 6px; cursor: pointer;
}
.adm-bouton-fin:hover { border-color: var(--adm-primaire); color: var(--adm-primaire); }
.adm-bouton-fin.actif { border-color: var(--adm-primaire); color: var(--adm-primaire); font-weight: 600; }

/* Une action destructrice se voit. Sur un bouton plein, elle prend le rouge
   pour fond : la règle ne changeait que la couleur du texte, qui restait
   donc posé sur le vert du bouton principal — illisible, et rien ne
   distinguait « Supprimer » de « Enregistrer » au premier coup d'œil. */
.adm-bouton.adm-bouton-danger {
  background: var(--adm-alerte);
  border-color: var(--adm-alerte);
  color: #fff;
}
.adm-bouton.adm-bouton-danger:hover {
  background: var(--adm-alerte-fonce);
  border-color: var(--adm-alerte-fonce);
  color: #fff;
}

/* Sur un bouton fin — ceux des tableaux — le rouge reste au texte : une
   ligne de boutons pleins rouges serait une alarme permanente. */
.adm-bouton-fin.adm-bouton-danger { color: var(--adm-alerte); }
.adm-bouton-fin.adm-bouton-danger:hover {
  border-color: var(--adm-alerte); color: var(--adm-alerte);
}

/* Repli pour l'usage isolé de la classe, hors des deux gabarits ci-dessus. */
.adm-bouton-danger { color: var(--adm-alerte); }

/* css/style.css impose « .fas { color: #026D7E } » à toutes les icônes du
   site. Dans un bouton coloré, cela donnait une icône turquoise sur fond
   vert ou rouge. L'icône suit désormais la couleur de son bouton. */
.adm-bouton i,
.adm-bouton .fas,
.adm-bouton .far,
.adm-bouton-fin i,
.adm-bouton-fin .fas,
.adm-bouton-fin .far {
  color: inherit;
  margin-right: 0;
}

/* ---------- Tableaux ----------------------------------------------------- */

.adm-tableau-cadre { overflow-x: auto; border: 1px solid var(--adm-trait); border-radius: var(--adm-rayon); background: var(--adm-carte); }
.adm-tableau { width: 100%; border-collapse: collapse; font-size: .9rem; }
.adm-tableau th {
  text-align: left; padding: .6rem .8rem; white-space: nowrap;
  font-size: .72rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  color: var(--adm-texte-pale); background: var(--adm-carte-alt);
  border-bottom: 1px solid var(--adm-trait);
}
.adm-tableau td { padding: .65rem .8rem; border-bottom: 1px solid var(--adm-trait); vertical-align: middle; color: var(--adm-texte); }
.adm-tableau tbody tr:last-child td { border-bottom: 0; }
.adm-tableau tbody tr:hover { background: var(--adm-carte-alt); }
.adm-tableau .adm-principal { font-weight: 600; }
.adm-tableau .adm-secondaire { color: var(--adm-texte-doux); font-size: .82rem; margin-top: .1rem; }
.adm-tableau input[type=number] { width: 70px; }
.adm-tableau select { padding: .35rem .5rem; font-size: .86rem; border: 1px solid var(--adm-trait-fort); border-radius: 6px; font-family: inherit; }
.adm-chiffres { font-variant-numeric: tabular-nums; }

/* ---------- Messages ----------------------------------------------------- */

.adm-message {
  padding: .75rem 1rem; border-radius: 6px; margin-bottom: 1.25rem;
  font-size: .9rem; border: 1px solid transparent;
}
.adm-message-succes    { background: var(--adm-succes-pale);    color: var(--adm-succes);    border-color: rgba(30,122,84,.25); }
.adm-message-erreur    { background: var(--adm-alerte-pale);    color: var(--adm-alerte);    border-color: rgba(192,57,43,.25); }
.adm-message-attention { background: var(--adm-attention-pale); color: var(--adm-attention); border-color: rgba(138,90,0,.25); }

.adm-etiquette {
  display: inline-flex; align-items: center; gap: .25rem;
  font-size: .7rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  padding: .18em .55em; border-radius: 4px;
  background: var(--adm-primaire-pale); color: var(--adm-primaire-fonce);
}
.adm-etiquette-verrou { background: var(--adm-attention-pale); color: var(--adm-attention); }

.adm-vide { text-align: center; color: var(--adm-texte-pale); padding: 2.5rem 1rem; font-size: .92rem; }

/* ---------- Pastille des paramètres en vigueur ---------------------------
   Dit, sur chaque écran concerné, quelle valeur agit réellement et d'où
   elle vient — sans quoi on règle un paramètre sans savoir s'il s'applique.
   -------------------------------------------------------------------------- */

.par-pastille {
  background: var(--adm-carte); border: 1px solid var(--adm-trait);
  border-left: 3px solid var(--adm-primaire);
  border-radius: var(--adm-rayon); padding: .5rem .9rem; margin-bottom: 1rem;
}
.par-pastille > summary {
  cursor: pointer; list-style: none; font-size: .88rem;
  display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap;
}
.par-pastille > summary::-webkit-details-marker { display: none; }
.par-pastille > summary::before {
  content: ''; width: 7px; height: 7px; flex: none;
  border-right: 1.5px solid var(--adm-texte-pale); border-bottom: 1.5px solid var(--adm-texte-pale);
  transform: rotate(-45deg); transition: transform .15s;
}
.par-pastille[open] > summary::before { transform: rotate(45deg); }
.par-pastille > summary span { color: var(--adm-texte-doux); font-size: .82rem; }
.par-pastille .adm-aide { margin: .5rem 0 0; font-size: .8rem; }

/* Une ligne par réglage : libellé, valeur, niveau d'origine. */
.par-liste { list-style: none; margin: .6rem 0 0; padding: 0; }
.par-liste li {
  display: flex; align-items: baseline; gap: .6rem;
  padding: .28rem 0; border-top: 1px solid var(--adm-trait); font-size: .85rem;
}
.par-cle { color: var(--adm-texte-doux); flex: 0 0 auto; min-width: 12rem; }
.par-valeur {
  font-weight: 600; font-variant-numeric: tabular-nums;
  flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.par-source {
  display: inline-block; flex: none; font-size: .68rem; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase;
  padding: .1em .45em; border-radius: 4px;
  background: var(--adm-carte-alt); color: var(--adm-texte-pale);
}

@media (max-width: 640px) {
  .par-liste li { flex-wrap: wrap; gap: .2rem .5rem; }
  .par-cle { min-width: 100%; }
}
.par-general { background: var(--adm-attention-pale); color: var(--adm-attention); }
.par-reseau  { background: var(--adm-primaire-pale);  color: var(--adm-primaire-fonce); }
.par-club    { background: var(--adm-succes-pale);    color: var(--adm-succes); }

.par-verrou { font-size: .72rem; font-weight: 700; color: var(--adm-alerte); white-space: nowrap; }

/* Un champ imposé plus haut : visible, lisible, mais hors d'atteinte. */
.par-impose input, .par-impose select { background: var(--adm-carte-alt); color: var(--adm-texte-pale); }
.par-impose > span:first-child { display: flex; align-items: center; gap: .4rem; }

/* Pastille de statut : chaque statut porte sa couleur, réglée dans les
   paramètres. Un fond très pâle du même ton garde la liste lisible même
   quand un membre en cumule quatre. */
.st-badge {
  display: inline-block; margin-left: .35rem;
  font-size: .68rem; font-weight: 700; letter-spacing: .03em;
  padding: .12em .5em; border-radius: 10px; white-space: nowrap;
  color: var(--st, var(--adm-primaire));
  background: color-mix(in srgb, var(--st, var(--adm-primaire)) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--st, var(--adm-primaire)) 28%, transparent);
}

/* Repli pour les navigateurs sans color-mix : le texte coloré suffit. */
@supports not (background: color-mix(in srgb, red 10%, transparent)) {
  .st-badge { background: var(--adm-carte-alt); border-color: var(--adm-trait); }
}

/* Bloc de code : exemples d'appel, extraits de configuration. */
.adm-code {
  background: var(--adm-carte-alt); border: 1px solid var(--adm-trait);
  border-radius: var(--adm-rayon); padding: .9rem 1.1rem; margin: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .8rem; line-height: 1.6; color: var(--adm-texte);
}

/* ---------- Repliables --------------------------------------------------- */

.adm-repliable {
  border: 1px solid var(--adm-trait); border-radius: 6px;
  padding: .7rem .9rem; margin-bottom: .5rem; background: var(--adm-carte);
}
.adm-repliable > summary { cursor: pointer; font-weight: 600; font-size: .9rem; color: var(--adm-texte); }
.adm-repliable > summary::marker { color: var(--adm-primaire); }
.adm-repliable > summary:focus-visible { outline: 2px solid var(--adm-primaire); outline-offset: 2px; border-radius: 3px; }
.adm-repliable > summary .adm-compteur { font-weight: 400; color: var(--adm-texte-pale); }
.adm-repliable-corps { margin-top: .8rem; padding-top: .8rem; border-top: 1px solid var(--adm-trait); }

/* ---------- Aperçu du mobile -------------------------------------------- */

.adm-apercu { position: sticky; top: 1rem; }
.adm-apercu h2 { font-size: .95rem; margin: 0 0 .8rem; font-weight: 600; color: var(--adm-texte); }

.tel {
  width: 320px; max-width: 100%;
  border: 10px solid #1F2523; border-radius: 38px; overflow: hidden;
  background: #F2F4F5; box-shadow: 0 14px 34px rgba(35,48,46,.20);
}
.tel-encoche { background: var(--ap-primaire); height: 26px; position: relative; }
.tel-encoche::after {
  content: ""; position: absolute; left: 50%; transform: translateX(-50%); top: 5px;
  width: 78px; height: 16px; background: #1F2523; border-radius: 10px;
}
.tel-entete { background: var(--ap-primaire); color: #fff; padding: .5rem .8rem .9rem; display: flex; align-items: center; gap: .6rem; }
.tel-logo {
  width: 38px; height: 38px; border-radius: 7px; background: rgba(255,255,255,.18); flex: none;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.tel-logo img { max-width: 100%; max-height: 100%; }
.tel-logo span { font-size: .52rem; font-weight: 700; text-align: center; line-height: 1.1; padding: 2px; }
.tel-titre { flex: 1; text-align: center; font-size: 1.15rem; font-weight: 300; letter-spacing: .02em; }

.tel-corps { padding: .85rem; font-size: .72rem; }
.tel-profil { display: flex; align-items: center; gap: .55rem; margin-bottom: .9rem; }
.tel-avatar { width: 40px; height: 40px; border-radius: 50%; background: #D6DBE0; flex: none; border: 2px solid var(--ap-primaire); }
.tel-profil b { display: block; font-size: .8rem; color: var(--adm-texte); }
.tel-profil small { color: var(--adm-texte-pale); }
.tel-assiduite { margin-left: auto; text-align: right; }
.tel-assiduite b { color: var(--ap-accent); font-size: 1.1rem; }

.tel-section { color: var(--ap-primaire); font-weight: 700; font-size: .82rem; margin: .95rem 0 .45rem; }
.tel-bloc { background: #fff; border-radius: 8px; padding: .6rem .7rem; box-shadow: 0 1px 3px rgba(35,48,46,.10); }
.tel-bloc b { color: var(--ap-primaire); }

.tel-tuiles { display: flex; gap: .45rem; }
.tel-tuile {
  flex: 1; min-width: 0; background: #fff; border-radius: 8px; padding: .7rem .3rem;
  text-align: center; box-shadow: 0 1px 3px rgba(35,48,46,.10);
}
.tel-tuile svg { width: 26px; height: 26px; fill: var(--ap-primaire); }
.tel-tuile span {
  display: block; margin-top: .25rem; font-size: .66rem; font-weight: 600; color: var(--ap-primaire);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tel-vide { color: var(--adm-texte-pale); font-style: italic; font-size: .7rem; }

.tel-nav { display: flex; background: #fff; border-top: 1px solid var(--adm-trait); padding: .45rem 0 .6rem; }
.tel-nav div { flex: 1; text-align: center; font-size: .6rem; color: var(--adm-texte-pale); }
.tel-nav div svg { width: 20px; height: 20px; fill: var(--adm-texte-pale); display: block; margin: 0 auto .1rem; }
.tel-nav div.actif { color: var(--ap-primaire); }
.tel-nav div.actif svg { fill: var(--ap-primaire); }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }


/* ==========================================================================
   Coquille de l'espace membre : menu fixe à gauche, contenu à largeur
   constante. Les pages ne déclarent plus leur propre largeur.
   ========================================================================== */

.container-backoffice {
  display: -webkit-box; -webkit-box-align: start;   /* repli moteurs anciens */
  display: flex; align-items: flex-start;
  /* Pleine largeur, sans plafond : le contenu s'étale jusqu'aux bords de
     l'écran, seule la marge de respiration le sépare du bord. */
  width: 100%; max-width: none;
  margin: 1.5rem auto; padding: 0 2rem;
  box-sizing: border-box; box-shadow: none; overflow: visible;
}

/* ---------- Menu ---------- */

.sidebar-backoffice {
  width: 236px; flex: none; -webkit-box-flex: 0;
  margin-right: 2rem;
  /* Reste visible pendant le défilement plutôt que de remonter avec la page. */
  position: sticky; top: 1.25rem;
  max-height: calc(100vh - 2.5rem); overflow-y: auto;
  background: var(--adm-carte); border: 1px solid var(--adm-trait);
  border-radius: var(--adm-rayon); box-shadow: var(--adm-ombre);
  padding: .6rem; box-sizing: border-box;
}
.sidebar-backoffice::-webkit-scrollbar { width: 6px; }
.sidebar-backoffice::-webkit-scrollbar-thumb { background: var(--adm-trait-fort); border-radius: 3px; }

/* Sections repliables : dix-huit entrées d'affilée noyaient la navigation.
   Seule la section contenant la page ouverte est dépliée au chargement. */
.menu-groupe { border: 0; margin: 0; }
.menu-groupe + .menu-groupe { border-top: 1px solid var(--adm-trait); }

.menu-groupe > summary {
  display: flex; align-items: center; gap: .45rem;
  padding: .55rem .6rem; cursor: pointer; list-style: none;
  font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--adm-texte-pale); border-radius: 6px;
  transition: color .12s, background .12s;
}
.menu-groupe > summary::-webkit-details-marker { display: none; }
.menu-groupe > summary:hover { color: var(--adm-primaire-fonce); background: var(--adm-carte-alt); }
.menu-groupe > summary:focus-visible { outline: 2px solid var(--adm-primaire); outline-offset: -2px; }

.menu-chevron {
  margin-left: auto; flex: none; width: 9px; height: 9px;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(-45deg); transition: transform .15s;
}
.menu-groupe[open] > summary .menu-chevron { transform: rotate(45deg); }
.menu-groupe[open] > summary { color: var(--adm-primaire-fonce); }

.menu-groupe ul { list-style: none; margin: 0 0 .35rem; padding: 0; }

.sidebar-backoffice a {
  display: flex; align-items: center; gap: .55rem;
  padding: .42rem .6rem .42rem 1.1rem; border-radius: 6px;
  color: var(--adm-texte); text-decoration: none;
  font-size: .865rem; line-height: 1.3;
  transition: background .12s, color .12s;
}
.sidebar-backoffice a:hover { background: var(--adm-primaire-pale); color: var(--adm-primaire-fonce); }
.sidebar-backoffice a.actif {
  background: var(--adm-primaire-pale); color: var(--adm-primaire-fonce); font-weight: 600;
  box-shadow: inset 2px 0 0 var(--adm-primaire);
}
.sidebar-backoffice a i { width: 15px; text-align: center; flex: none; font-size: .8rem; color: var(--adm-texte-pale); }
.sidebar-backoffice a:hover i, .sidebar-backoffice a.actif i { color: var(--adm-primaire); }

.sidebar-backoffice a.deconnexion, .sidebar-backoffice a.deconnexion i { color: var(--adm-alerte); }
.sidebar-backoffice a.deconnexion:hover { background: var(--adm-alerte-pale); color: var(--adm-alerte); }

.pastille {
  margin-left: auto; background: var(--adm-alerte); color: #fff;
  border-radius: 10px; padding: .05em .45em;
  font-size: .68rem; font-weight: 700; font-variant-numeric: tabular-nums;
}
.menu-groupe > summary .pastille { margin-left: 0; }

/* ---------- Nouveautés dans la barre du haut ----------
   Le même signal qu'au menu, mais visible d'où qu'on soit sur le site.
   Le libellé « Nouveau » n'apparaît que s'il y a réellement du neuf ;
   sans cela, la fusée reste un lien parmi les autres. */

.lien-nouveautes { position: relative; display: inline-flex; align-items: center; gap: .4rem; }
.lien-nouveautes .fa-rocket { font-size: 1rem; }
.lien-nouveautes.a-du-neuf .fa-rocket { color: #c0392b; }

.etiquette-neuf {
  background: #c0392b; color: #fff; border-radius: 10px;
  padding: .1em .5em; font-size: .62rem; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase; line-height: 1.5;
}

.pastille-haut {
  position: absolute; top: -.5em; left: .78em;
  min-width: 1.15em; height: 1.15em; padding: 0 .2em;
  background: #c0392b; color: #fff; border-radius: 10px;
  font-size: .6rem; font-weight: 700; line-height: 1.15em;
  text-align: center; font-variant-numeric: tabular-nums;
}

/* Sur mobile le menu se déplie en colonne : l'étiquette suffit, la
   pastille superposée deviendrait illisible. */
@media (max-width: 768px) {
  .pastille-haut { position: static; margin-left: .3rem; }
}

/* ---------- Contenu ---------- */

.content-backoffice {
  flex: 1; -webkit-box-flex: 1; min-width: 0;
  /* Plus de plafond : le contenu occupe la place disponible. Les blocs de
     texte long gardent leur propre mesure de lecture. */
  background: transparent; padding: 0; overflow: visible;
}

/* ---------- Écrans étroits ---------- */

@media (max-width: 900px) {
  .container-backoffice { display: block; padding: 0 1rem; }
  .sidebar-backoffice {
    width: 100%; margin: 0 0 1.25rem; position: static; max-height: none;
  }
  .content-backoffice { max-width: none; }
}

/* ==========================================================================
   Onglets — contrôle segmenté
   Une pastille claire glisse sous l'onglet actif, plutôt que des boutons
   aux bordures par défaut du navigateur.
   ========================================================================== */

.onglets-barre {
  display: inline-flex; gap: .15rem;
  padding: .25rem;
  background: var(--adm-carte-alt);
  border: 1px solid var(--adm-trait);
  border-radius: 10px;
  margin-bottom: 1.75rem;
  max-width: 100%; overflow-x: auto;
  scrollbar-width: none;
}
.onglets-barre::-webkit-scrollbar { display: none; }

.onglets-barre button {
  appearance: none; -webkit-appearance: none;
  background: transparent; border: 0; border-radius: 7px;
  padding: .5rem 1rem; cursor: pointer; white-space: nowrap;
  display: inline-flex; align-items: center; gap: .45rem;
  font: inherit; font-size: .875rem; font-weight: 600;
  color: var(--adm-texte-doux);
  transition: color .16s ease, background .16s ease, box-shadow .16s ease;
}
.onglets-barre button i { font-size: .82rem; opacity: .75; }

.onglets-barre button:hover { color: var(--adm-texte); }

.onglets-barre button[aria-selected="true"] {
  background: var(--adm-carte);
  color: var(--adm-primaire-fonce);
  box-shadow: 0 1px 2px rgba(35,48,46,.10), 0 0 0 1px rgba(35,48,46,.04);
}
.onglets-barre button[aria-selected="true"] i { opacity: 1; color: var(--adm-primaire); }

.onglets-barre button:focus-visible {
  outline: 2px solid var(--adm-primaire); outline-offset: 1px;
}

/* Compteur discret dans un onglet (nombre de modules, de membres…). */
.onglet-compteur {
  font-size: .72rem; font-weight: 700; font-variant-numeric: tabular-nums;
  padding: .1em .42em; border-radius: 20px;
  background: var(--adm-trait); color: var(--adm-texte-doux);
}
.onglets-barre button[aria-selected="true"] .onglet-compteur {
  background: var(--adm-primaire-pale); color: var(--adm-primaire-fonce);
}

.onglet-vue[hidden] { display: none; }
.onglet-vue { animation: onglet-apparition .18s ease; }
@keyframes onglet-apparition {
  from { opacity: 0; transform: translateY(3px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) { .onglet-vue { animation: none; } }

/* Dans l'onglet des couleurs, l'aperçu accompagne les champs. */
.onglet-vue > .adm-colonnes { align-items: start; }

@media (max-width: 560px) {
  .onglets-barre { display: flex; width: 100%; }
  .onglets-barre button { flex: 1; justify-content: center; padding: .5rem .6rem; font-size: .82rem; }
  .onglets-barre button i { display: none; }
}

/* Boîte à idées : une catégorie tient sur une ligne, son formulaire de
   renommage et son bouton de suppression côte à côte. Un <form> ne pouvant
   être fille de <tr>, ces fiches remplacent le tableau qu'on aurait attendu. */
.idee-categorie {
  display: flex; flex-wrap: wrap; align-items: center; gap: .6rem;
  padding: .6rem .8rem; margin-bottom: .5rem;
  border: 1px solid var(--adm-trait); border-radius: 6px; background: var(--adm-carte);
}
.idee-categorie .adm-actions { margin-top: 0; flex: 1 1 auto; }
.idee-categorie input[type=text] { min-width: 12rem; }
.idee-categorie .adm-note { flex-basis: 100%; margin: 0; }

/* ---------- Recommandations --------------------------------------------- */
/* Une affaire tient sur une fiche : d'où elle vient, qui est le client, ce
   qu'il cherche, et où en est le suivi. Le statut se lit à la couleur. */
.reco-fiche {
  border: 1px solid var(--adm-trait); border-radius: 6px;
  padding: .9rem 1rem; margin-bottom: .7rem; background: var(--adm-carte);
}
.reco-entete {
  display: flex; flex-wrap: wrap; align-items: center; gap: .6rem;
  margin-bottom: .6rem;
}
.reco-sens { font-size: .92rem; }
.reco-client { font-size: .9rem; line-height: 1.5; }
.reco-client a { color: var(--adm-primaire); }
.reco-description {
  margin: .7rem 0 0; padding: .6rem .8rem;
  background: var(--adm-carte-alt); border-radius: 5px;
  font-size: .9rem; line-height: 1.55;
}
.reco-avancement { display: flex; align-items: center; gap: .5rem; font-size: .87rem; }
.reco-besoin { display: block; margin-top: 1.1rem; font-size: .9rem; }
.reco-besoin textarea {
  width: 100%; margin-top: .3rem; padding: .5rem .7rem; font: inherit;
  border: 1px solid var(--adm-trait-fort); border-radius: 6px;
}

/* Du plus ouvert au plus fermé : à contacter, en cours, conclue, close. */
.reco-statut-nouveau { background: var(--adm-attention-pale); color: var(--adm-attention); }
.reco-statut-encours { background: var(--adm-primaire-pale);  color: var(--adm-primaire-fonce); }
.reco-statut-conclue { background: var(--adm-succes-pale);    color: var(--adm-succes); }
.reco-statut-clos    { background: var(--adm-carte-alt);      color: var(--adm-texte-pale); }

/* Bilan d'une affaire : montant réalisé et note du suivi. */
.reco-bilan {
  margin: .6rem 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: .8rem;
  font-size: .9rem;
}
.reco-note { color: #c8991a; letter-spacing: .08em; }
.reco-suivi {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: .7rem; margin-top: .9rem;
}
.reco-motif { display: flex; flex-direction: column; gap: .25rem; flex: 1 1 16rem; font-size: .87rem; }
.reco-motif input, .reco-avancement input {
  padding: .35rem .55rem; font: inherit;
  border: 1px solid var(--adm-trait-fort); border-radius: 6px;
}

/* Barre de filtre : une grille de champs, mais serrée et non étirée. */
.adm-filtre { grid-template-columns: repeat(auto-fit, minmax(160px, 220px)); margin: 1rem 0; }

/* Les étiquettes ne sont plus enveloppantes : elles précèdent leur contrôle
   dans .reco-avancement et .reco-motif, dont la mise en forme est définie
   plus haut avec le reste des recommandations. */
.reco-avancement label, .reco-motif label { font-size: .87rem; }

/* Dispense de compte rendu : la séance, sa raison et la validation sur une
   ligne, pour trancher plusieurs séances à la suite sans changer d'écran. */
.cr-dispense {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: .7rem;
  padding: .7rem .85rem; margin-bottom: .5rem;
  border: 1px solid var(--adm-trait); border-radius: 6px; background: var(--adm-carte);
}
.cr-dispense-seance { flex: 0 0 11rem; font-size: .9rem; }
.cr-dispense .adm-champ { flex: 1 1 18rem; }

/* ---------- Secteurs d'activité ----------------------------------------- */
/* Un secteur déjà tenu dans le club se signale sans se barrer : la règle
   avertit, elle ne bloque pas. */
.sec-occupe { color: var(--adm-attention); }
.sec-occupe small { color: var(--adm-attention); opacity: .8; }
.sec-famille { margin-bottom: .4rem; }
.sec-famille .adm-cases { max-height: 22rem; overflow-y: auto; }

/* ---------- Version de l'application mobile ----------------------------- */
/* Les deux plateformes côte à côte, comme sur la maquette : on compare
   iOS et Android d'un coup d'œil plutôt que de faire défiler. */
.app-plateformes { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.app-plateforme h2 {
  margin: 0 0 .8rem; font-size: 1.05rem; display: flex; align-items: center; gap: .4rem;
}
.app-plateforme .adm-champ { margin-bottom: .9rem; }
/* L'adresse de la fiche est longue et se lit rarement : discrète, en
   monospace, comme sur la maquette. */
.app-store {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .78rem; color: var(--adm-texte-doux);
}
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}