/* ============================================================================
   styles.css — Espace client OFA Web
   ----------------------------------------------------------------------------
   Feuille unique des cinq pages : connexion, mes modules, administration,
   clients, retour de paiement.

   Volontairement CLAIRE. La version précédente était sombre, en bleu nuit et
   cyan : elle donnait à l'espace client l'allure d'un outil de développement.
   Or la personne qui arrive ici est une gérante de salon ou un déménageur, pas
   un développeur. Fond clair, cartes blanches, angles francs, ombres douces.

   Indépendante des modules : aucun import depuis demenageur/calculateur/.
   Renommer ou retirer un module ne doit pas défigurer l'espace client.
   ============================================================================ */

:root{
  /* ---- Couleurs ---------------------------------------------------------- */
  --bg:#f4f6fb;
  --card:#ffffff;
  --text:#111827;
  --muted:#5b6472;
  --faint:#68717f;
  --border:#e4e8f0;
  --border-fort:#cfd6e2;

  --accent:#0891b2;
  --accent-clair:#e0f5fa;
  --accent-fonce:#065f76;
  --btn-a:#0e7490;       /* blanc dessus : 5.36:1 */
  --btn-b:#0b7f9e;       /* blanc dessus : 4.62:1 */

  --ok:#047857;
  --ok-fond:#e7f6f0;
  --warn:#a16207;
  --warn-fond:#fdf4e3;
  --danger:#b91c1c;
  --danger-fond:#fdecec;
  --or:#a16207;
  --or-fond:#fdf6e3;

  /* ---- Formes ------------------------------------------------------------ */
  --r-sm:10px;
  --r-md:14px;
  --r-lg:20px;
  --r-pill:999px;

  --ombre-xs:0 1px 2px rgba(17,24,39,.05);
  --ombre-sm:0 4px 14px -4px rgba(17,24,39,.10);
  --ombre-md:0 14px 34px -12px rgba(17,24,39,.16);
  --ombre-lg:0 28px 60px -24px rgba(17,24,39,.24);

  --dur:180ms;
  --ease:cubic-bezier(.22,.61,.36,1);
  --rebond:cubic-bezier(.34,1.56,.64,1);
}

*{ box-sizing:border-box; }

body{
  margin:0;
  min-height:100dvh;
  display:flex;
  flex-direction:column;
  background:
    radial-gradient(56rem 30rem at 8% -12%, #e6f6fb 0%, transparent 62%),
    radial-gradient(48rem 26rem at 104% 0%, #eef0fd 0%, transparent 58%),
    var(--bg);
  color:var(--text);
  font-family:ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
              Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  font-size:15px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3{ margin:0; line-height:1.2; letter-spacing:-.015em; }
h1{ font-size:clamp(1.4rem,1.1rem + 1.1vw,1.9rem); font-weight:800; }
h2{ font-size:1.15rem; font-weight:800; }
h3{ font-size:1rem; font-weight:700; }
p{ margin:0 0 10px; }
a{ color:var(--accent-fonce); text-decoration:none; }
a:hover{ text-decoration:underline; }

:focus-visible{ outline:3px solid var(--accent); outline-offset:2px; border-radius:6px; }

/* ============================== EN-TÊTE ================================== */
.header{
  display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap; gap:12px;
  padding:14px 22px;
  background:rgba(255,255,255,.82);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border);
  position:sticky; top:0; z-index:20;
}
.brand{
  font-weight:800; font-size:1.02rem; letter-spacing:-.01em;
  display:flex; align-items:center; gap:9px;
}
.brand::before{
  content:""; width:9px; height:22px; border-radius:var(--r-pill);
  background:linear-gradient(180deg, var(--accent), #22d3ee);
}
.header nav{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.header nav a:not(.btn){ color:var(--muted); font-weight:600; }
.header nav a:not(.btn):hover{ color:var(--text); }

/* =============================== BLOCS =================================== */
.wrap{ width:100%; max-width:1040px; margin:0 auto; padding:26px 18px 0; }
.container{ flex:1; display:flex; justify-content:center; padding:26px 18px; }
.container > .card{ width:100%; max-width:1040px; }

.card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  padding:24px;
  box-shadow:var(--ombre-sm);
}
.card + .card{ margin-top:16px; }

/* ============================== BOUTONS ================================== */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:11px 18px;
  border:0; border-radius:var(--r-pill);
  background:linear-gradient(135deg, var(--btn-a), var(--btn-b));
  color:#fff; font:inherit; font-weight:700; font-size:.94rem;
  text-decoration:none; cursor:pointer; white-space:nowrap;
  box-shadow:0 8px 18px -8px rgba(14,116,144,.7);
  transition:transform var(--dur) var(--rebond), box-shadow var(--dur) var(--ease),
             filter var(--dur) var(--ease);
}
.btn:hover{ transform:translateY(-1px); box-shadow:0 12px 24px -8px rgba(14,116,144,.8); text-decoration:none; }
.btn:active{ transform:translateY(0) scale(.98); }
.btn.ghost,
.btn.secondary{
  background:var(--card); color:var(--text);
  border:1px solid var(--border-fort); box-shadow:var(--ombre-xs);
}
.btn.ghost:hover,
.btn.secondary:hover{ background:#f8fafc; }
/* Se déconnecter : en rouge, le même partout (espace client, administration,
   modules). C'est le seul bouton qui ferme la session — il ne doit pas se
   confondre avec ceux qui mènent ailleurs. */
.btn.deconnexion{
  background:var(--danger); color:#fff;
  border:1px solid var(--danger); box-shadow:0 8px 18px -8px rgba(185,28,28,.6);
}
.btn.deconnexion:hover{ background:#991b1b; border-color:#991b1b; box-shadow:0 12px 24px -8px rgba(185,28,28,.7); }
.btn[disabled]{ opacity:.5; cursor:not-allowed; transform:none; }

/* ============================== MESSAGES ================================= */
.error,
.success,
.wait{
  padding:12px 16px; border-radius:var(--r-md);
  font-weight:600; margin-bottom:14px;
}
.error{ background:var(--danger-fond); color:var(--danger); border:1px solid #f6cccc; }
.success,
.ok:not(.badge){ background:var(--ok-fond); color:var(--ok); border:1px solid #bfe6d5; }

/* `.ok` sert deux choses : le bandeau de confirmation de stripe-return.php et
   la variante verte de `.badge` dans les tableaux. Le `:not(.badge)` separe
   les deux, sinon les pastilles heriteraient du remplissage d'un bandeau. */
.ok:not(.badge){ padding:12px 16px; border-radius:var(--r-md); font-weight:600; margin-bottom:14px; }

/* --------- Attente après paiement (stripe-return.php) ------------------- */
.wait{ background:var(--warn-fond); color:var(--warn); border:1px solid #f2dfb4; text-align:center; padding:20px; }
.wait__gros{ display:block; font-size:1.35rem; font-weight:800; line-height:1.25; margin-bottom:4px; }
.wait__sous{ display:block; font-size:.98rem; font-weight:600; opacity:.92; }
.wait__points::after{ content:""; animation:points 1.4s steps(4,end) infinite; }
@keyframes points{ 0%{content:""} 25%{content:"."} 50%{content:".."} 75%{content:"..."} }

/* =============================== PUCES =================================== */
.badge,
.puce{
  display:inline-flex; align-items:center; gap:5px;
  padding:3px 10px; border-radius:var(--r-pill);
  background:#eef1f6; color:var(--muted);
  font-size:.76rem; font-weight:800; white-space:nowrap;
}
.badge.ok,  .puce--standard.is-ok{ background:var(--ok-fond); color:var(--ok); }
.badge.no{ background:var(--danger-fond); color:var(--danger); }
.puce--standard{ background:#eef1f6; color:var(--muted); }
.puce--inactif{ background:var(--danger-fond); color:var(--danger); }

/* Premium : or, avec un reflet qui passe. Couleur fixe, hors palette : une
   distinction d'abonnement doit se reconnaître d'un coup d'œil. */
.puce--premium{
  position:relative; overflow:hidden;
  background:var(--or-fond); color:var(--or);
  border:1px solid #ecd9a4;
}
.puce--premium::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(105deg, transparent 38%, rgba(255,225,150,.85) 50%, transparent 62%);
  transform:translateX(-120%);
  animation:reflet 4.5s var(--ease) infinite;
}
@keyframes reflet{ 0%,62%{ transform:translateX(-120%); } 100%{ transform:translateX(120%); } }

@media (prefers-reduced-motion: reduce){
  .puce--premium::after{ animation:none; opacity:0; }
  .wait__points::after{ content:"…"; animation:none; }
  .btn{ transition:none; }
}

/* ============================= FORMULAIRES =============================== */
.grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:14px; }
.input{ display:flex; flex-direction:column; gap:6px; min-width:0; margin-bottom:15px; }
.grid .input{ margin-bottom:0; }
.input label,
label{ font-weight:700; font-size:.86rem; color:var(--muted); }

input[type=text],input[type=email],input[type=password],input[type=number],
input[type=url],input[type=search],input:not([type]),select,textarea{
  width:100%; padding:11px 13px;
  background:#fbfcfe; color:var(--text);
  border:1.5px solid var(--border); border-radius:var(--r-sm);
  font:inherit; font-size:.94rem;
  transition:border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
input:focus,select:focus,textarea:focus{
  outline:none; border-color:var(--accent);
  box-shadow:0 0 0 4px var(--accent-clair); background:var(--card);
}
input[type=checkbox]{ width:17px; height:17px; accent-color:var(--accent); cursor:pointer; }
fieldset{ border:1px solid var(--border); border-radius:var(--r-md); padding:14px; min-inline-size:0; }
legend{ padding:0 6px; color:var(--muted); font-size:.84rem; font-weight:700; }

/* ============================== TABLEAUX ================================= */
.table-wrap{ overflow-x:auto; border-radius:var(--r-md); border:1px solid var(--border); }
.table{ width:100%; border-collapse:collapse; background:var(--card); }
.table th,.table td{ padding:12px 14px; text-align:left; border-bottom:1px solid var(--border); }
.table th{
  background:#f7f9fc; color:var(--muted);
  font-size:.76rem; font-weight:800; text-transform:uppercase; letter-spacing:.06em;
  white-space:nowrap;
}
.table tbody tr:last-child td{ border-bottom:0; }
.table tbody tr:hover{ background:#fafbfe; }
.actions{ text-align:right; white-space:nowrap; }
.actions .btn{ padding:7px 13px; font-size:.85rem; vertical-align:middle; }
.actions > * + *{ margin-left:8px; }
@media (max-width:720px){
  .actions{ white-space:normal; text-align:left; }
  .actions > *{ margin:3px 0; }
  .actions > * + *{ margin-left:6px; }
}

/* ========================== TUILES DE SYNTHÈSE =========================== */
/* Six tuiles sur une ligne a 1040px : au-dela de 150px de minimum, la
   sixieme tombe seule a la ligne suivante. */
.tiles{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px; margin-bottom:16px; }
.tile{
  background:var(--card); border:1px solid var(--border);
  border-radius:var(--r-lg); padding:16px 18px; box-shadow:var(--ombre-xs);
}
.tile__label{
  display:block; color:var(--muted);
  font-size:.72rem; font-weight:800; text-transform:uppercase; letter-spacing:.06em;
}
.tile__value{ display:block; margin-top:4px; font-size:1.7rem; font-weight:800; letter-spacing:-.02em; }
/* Le tableau de bord range ses tuiles en deux familles, « Activité » et
   « Santé » : treize chiffres sur un seul rang ne se lisaient plus. Une
   tuile peut dire d'où vient son chiffre (tile__sous) et mener à la liste
   qui le détaille (tile__lien). */
.tiles__titre{
  margin:4px 0 8px; color:var(--faint);
  font-size:.74rem; font-weight:800; text-transform:uppercase; letter-spacing:.08em;
}
.tile__sous{ display:block; margin-top:4px; color:var(--muted); font-size:.78rem; line-height:1.35; }
.tile__lien{ display:inline-block; margin-top:6px; font-size:.8rem; font-weight:700; text-decoration:underline; }

/* ============================ MES MODULES ================================ */
.espace{ display:grid; grid-template-columns:270px minmax(0,1fr); gap:18px; align-items:start; }
@media (max-width:780px){ .espace{ grid-template-columns:1fr; } }

.liste{ display:flex; flex-direction:column; gap:10px; }
.liste__titre{
  margin:0 0 2px 4px; color:var(--faint);
  font-size:.72rem; font-weight:800; text-transform:uppercase; letter-spacing:.08em;
}
.mod{
  display:block; padding:14px 16px;
  background:var(--card); border:1.5px solid var(--border);
  border-radius:var(--r-md); color:var(--text); text-decoration:none;
  box-shadow:var(--ombre-xs);
  transition:transform var(--dur) var(--rebond), border-color var(--dur) var(--ease),
             box-shadow var(--dur) var(--ease);
}
.mod:hover{ transform:translateY(-2px); border-color:var(--border-fort); box-shadow:var(--ombre-sm); text-decoration:none; }
.mod[aria-current="true"]{ border-color:var(--accent); box-shadow:0 0 0 4px var(--accent-clair); }
.mod__nom{ display:block; font-weight:800; }
.mod__etat{ display:block; margin-top:6px; }

.vide{ color:var(--muted); }
.compte{
  width:100%; max-width:1040px; margin:22px auto 0; padding:16px 18px 0;
  border-top:1px solid var(--border);
  display:flex; flex-wrap:wrap; gap:12px;
}
.compte a{ color:var(--muted); font-size:.88rem; text-decoration:underline; }
.compte a:hover{ color:var(--text); }

/* ============================== CONNEXION ================================ */
.logo{ display:block; margin:0 auto 18px; max-width:150px; height:auto; }
.card > h1{ margin-bottom:20px; }
.meta{ margin-top:16px; color:var(--muted); font-size:.88rem; text-align:center; }

/* Le champ du testeur de la démo (index.php). `.input` pose display:flex, qui
   l'emporterait sur l'attribut hidden : on le rend explicite. */
.input[hidden]{ display:none; }
.demo-testeur{
  padding:12px; border-radius:var(--r-sm);
  background:var(--accent-clair);
  border:1px solid color-mix(in oklab, var(--accent) 30%, var(--card));
}
.demo-testeur__info{ margin:0; font-size:.8rem; line-height:1.45; color:var(--muted); }

/* L'onglet Démo du panneau (lib/demo-vue.php). */
body.admin .demo-ligne{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin:0; }
body.admin .demo-ligne input[type=text]{ min-width:140px; flex:1; }
body.admin .demo-recherche input[type=search]{ min-width:180px; }
body.admin .demo-recherche{ display:flex; gap:8px; align-items:center; margin:0; }
body.admin .demo-table td.actions{ white-space:nowrap; }
body.admin .demo-table td.actions form{ display:inline; margin:0; }
body.admin .demo-table .demo-coche{ width:1%; text-align:center; }
body.admin .demo-table .demo-coche input{ width:18px; height:18px; cursor:pointer; }
body.admin .demo-table tr.demo-desinscrit td{ opacity:.72; }
body.admin .demo-badges{ display:flex; flex-wrap:wrap; gap:4px; margin-top:4px; }
body.admin .demo-badge{
  display:inline-block; padding:1px 8px; border-radius:var(--r-pill);
  background:var(--ok-fond, #e8f6ee); color:var(--ok, #15803d);
  font-size:.74rem; font-weight:700;
}
body.admin .demo-badge--stop{ background:var(--danger-fond); color:var(--danger); }

/* « Leur écrire » (lib/demo-mailing-vue.php) : écrire, relire, envoyer. */
body.admin .demo-mail{
  margin:6px 0 18px; padding:16px 18px;
  border:1px solid var(--border, #e4e8f0); border-radius:var(--r-md);
  background:var(--card);
}
body.admin .demo-mail__titre{ margin:0 0 8px; font-size:1.02rem; }
body.admin .demo-mail__plie > summary{ cursor:pointer; font-weight:700; color:var(--accent, #0e7490); }
body.admin .demo-mail__form{ display:grid; gap:8px; margin-top:14px; max-width:760px; }
body.admin .demo-mail__form label{ font-weight:700; font-size:.88rem; }
body.admin .demo-mail__form input[type=text],
body.admin .demo-mail__form input:not([type]),
body.admin .demo-mail__form textarea{
  width:100%; padding:9px 11px; border:1px solid var(--border-fort); border-radius:10px;
  font:inherit; font-size:.92rem; background:#fff; color:var(--text);
}
body.admin .demo-mail__form textarea{ resize:vertical; line-height:1.5; }
body.admin .demo-mail__form fieldset{ border:0; margin:6px 0; padding:0; display:grid; gap:6px; }
body.admin .demo-mail__form legend{ font-weight:800; margin-bottom:6px; }
body.admin .demo-mail__modeles{ grid-template-columns:repeat(auto-fit, minmax(170px, 1fr)); }
body.admin .demo-mail__modele{
  display:flex; gap:8px; align-items:flex-start;
  padding:10px 12px; border:1px solid var(--border-fort); border-radius:12px;
  cursor:pointer; font-weight:400 !important;
}
body.admin .demo-mail__modele:has(input:checked){ border-color:var(--accent, #0e7490); box-shadow:inset 0 0 0 1px var(--accent, #0e7490); }
body.admin .demo-mail__modele .sous{ display:block; font-size:.8rem; margin-top:2px; }
body.admin .demo-mail__offre{ padding:10px 12px; border-radius:12px; background:#fff8e6; border:1px solid #f3d38a; }
body.admin .demo-mail__offre input{ max-width:220px; text-transform:uppercase; letter-spacing:.04em; }
body.admin .demo-mail__public label{ font-weight:400; }
body.admin .demo-mail__renvoyer{ margin-top:4px; }
body.admin .demo-mail__etape{ margin:0 0 10px; color:var(--muted); }
body.admin .demo-mail__meta{ display:grid; grid-template-columns:max-content 1fr; gap:6px 14px; margin:0 0 12px; }
body.admin .demo-mail__meta dt{ font-weight:700; color:var(--muted); }
body.admin .demo-mail__meta dd{ margin:0; overflow-wrap:anywhere; }
body.admin .demo-mail__corps{
  margin:0 0 14px; padding:14px 16px; max-height:420px; overflow:auto;
  white-space:pre-wrap; overflow-wrap:anywhere;
  background:#f8fafc; border:1px solid var(--border, #e4e8f0); border-radius:12px;
  font:inherit; font-size:.92rem; line-height:1.55;
}
body.admin .demo-mail__actions{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
body.admin .demo-mail__actions form{ margin:0; }
body.admin .demo-mail__historique{ margin-top:14px; }
body.admin .demo-mail__historique > summary{ cursor:pointer; font-weight:700; }

/* ============================== MODALE =================================== */
.dialog-backdrop{
  position:fixed; inset:0; z-index:50;
  background:rgba(17,24,39,.45); backdrop-filter:blur(3px);
  display:none; align-items:flex-start; justify-content:center;
  padding:24px 16px; overflow-y:auto;
}
.dialog-backdrop.show{ display:flex; }
.dialog{
  width:100%; max-width:720px;
  box-shadow:var(--ombre-lg);
  animation:monte 260ms var(--ease);
}
.dialog > h2{ margin-bottom:18px; }
@media (prefers-reduced-motion: reduce){ .dialog{ animation:none; } }
@keyframes monte{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:none; } }

/* =============================== PIED ==================================== */
.footer{ margin-top:auto; padding:26px 16px; text-align:center; color:var(--faint); font-size:.86rem; }

/* ==================== ACCUEIL CLIENT (listmodule.php) ==================== */

.qui{ color:var(--muted); font-weight:700; font-size:.9rem; }
@media (max-width:520px){ .qui{ display:none; } }

/* Pictogrammes : ils prennent la couleur du texte autour, jamais la leur. */
.ico{ width:1.15em; height:1.15em; flex:none; }

.hero{ margin-bottom:20px; }
.hero h1{ margin-bottom:6px; }
.hero__sous{ margin:0; color:var(--muted); font-size:1.02rem; max-width:60ch; }

/* --- Colonne de gauche : un module par ligne ---------------------------- */
.mod{ display:flex; align-items:center; gap:12px; }
.mod__ico{
  display:grid; place-items:center; flex:none;
  width:40px; height:40px; border-radius:12px;
  background:var(--accent-clair); color:var(--accent-fonce);
}
.mod__ico .ico{ width:21px; height:21px; }
.mod__corps{ min-width:0; }
.mod[aria-current="true"] .mod__ico{ background:var(--accent); color:#fff; }

/* --- Fiche du module sélectionné ---------------------------------------- */
.fiche__tete{ display:flex; align-items:center; gap:14px; margin-bottom:14px; }
.fiche__ico{
  display:grid; place-items:center; flex:none;
  width:54px; height:54px; border-radius:16px;
  background:linear-gradient(135deg, var(--btn-a), var(--accent)); color:#fff;
  box-shadow:0 10px 22px -10px rgba(14,116,144,.8);
}
.fiche__ico .ico{ width:27px; height:27px; }
.fiche__tete h2{ margin-bottom:5px; }
.fiche__texte{ color:var(--muted); font-size:1.02rem; max-width:62ch; }

.atouts{ list-style:none; margin:16px 0 20px; padding:0; display:grid; gap:9px; }
.atouts li{ position:relative; padding-left:28px; color:var(--text); }
.atouts li::before{
  content:"✓"; position:absolute; left:0; top:0;
  display:grid; place-items:center; width:19px; height:19px;
  border-radius:var(--r-pill); background:var(--ok-fond); color:var(--ok);
  font-size:.72rem; font-weight:900;
}

.btn--grand{ padding:14px 24px; font-size:1rem; }
.aide{ margin:12px 0 0; color:var(--faint); font-size:.86rem; max-width:56ch; }

/* --- Compte vide --------------------------------------------------------- */
.vide-etat{ text-align:center; padding:44px 24px; }
.vide-etat .ico{ width:46px; height:46px; color:var(--accent); margin-bottom:12px; }
.vide-etat h2{ margin-bottom:8px; }
.vide-etat p{ color:var(--muted); max-width:46ch; margin:0 auto 18px; }

/* ==================== ADMINISTRATION (panel.php) ======================== */

.card__tete{
  display:flex; align-items:center; justify-content:space-between;
  gap:14px; flex-wrap:wrap; margin-bottom:16px;
}
.card__tete h2{ margin-bottom:3px; }

.sous{ display:block; margin:0; color:var(--muted); font-size:.86rem; }
.nom{ display:block; font-weight:700; }
.note{ margin:12px 0 0; color:var(--faint); font-size:.8rem; }

/* Une note d'avertissement. La classe était posée sur le message le plus
   important de l'écran d'administration — « config.local.php n'est pas
   modifiable par le serveur » — sans qu'aucune règle n'existe : il s'affichait
   en petit gris, comme une aide contextuelle qu'on saute.
   Le trait à gauche reste lisible pour qui distingue mal les couleurs. */
.note--attention{
  margin-top:14px; padding:10px 12px;
  border:1px solid var(--border); border-left:3px solid var(--warn);
  border-radius:var(--r-sm);
  background:var(--warn-fond); color:var(--warn);
  font-size:.86rem; font-weight:600; line-height:1.5;
}

.tile--alerte{ border-color:#f0d9a8; background:var(--warn-fond); }
.tile--alerte .tile__label,
.tile--alerte .tile__value{ color:var(--warn); }

.mods{ display:flex; flex-wrap:wrap; gap:6px; }
.col-actions{ width:1%; white-space:nowrap; text-align:right; }
.actions form{ margin:0; display:inline-flex; vertical-align:middle; }

.btn.danger{
  background:var(--card); color:var(--danger);
  border:1px solid #f0bcbc; box-shadow:var(--ombre-xs);
}
.btn.danger:hover{
  background:var(--danger); color:#fff;
  border-color:var(--danger); box-shadow:0 10px 20px -8px rgba(185,28,28,.6);
}

.etat{ font-weight:700; font-size:.86rem; white-space:nowrap; }
.etat--ok{ color:var(--ok); }
.etat--attente{ color:var(--warn); }

code{
  padding:2px 7px; border-radius:7px;
  background:#eef1f6; color:var(--text);
  font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size:.85em;
}

/* --- Modale : accès aux modules ----------------------------------------- */
.modules{ margin-top:16px; }
.mod-ligne{
  display:flex; flex-wrap:wrap; gap:10px; align-items:center;
  padding:11px 0; border-top:1px solid var(--border);
}
.mod-ligne:first-of-type{ border-top:0; }
.mod-ligne__nom{
  display:flex; align-items:center; gap:9px;
  flex:1 1 220px; min-width:0;
  color:var(--text); font-size:.94rem; cursor:pointer;
}
.mod-ligne select{ width:auto; flex:0 0 auto; padding:8px 11px; }
@media (max-width:520px){ .mod-ligne select{ flex:1 1 46%; } }

.dlg-actions{ display:flex; gap:9px; flex-wrap:wrap; margin-top:18px; }

/* ============================ MOT DE PASSE =============================== */
/* L'œil est posé par mdp.js. Sans lui, `.mdp` n'est qu'un conteneur et le
   champ garde toute la largeur : rien ne se voit, rien ne casse. */
.mdp{ position:relative; display:flex; }
.mdp input{ padding-right:46px; }
.mdp__oeil{
  position:absolute; top:50%; right:6px; transform:translateY(-50%);
  display:grid; place-items:center;
  width:34px; height:34px; padding:0;
  border:0; border-radius:var(--r-sm);
  background:transparent; color:var(--muted);
  cursor:pointer;
  transition:color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.mdp__oeil:hover{ color:var(--text); background:#eef1f6; }
.mdp__oeil svg{ width:19px; height:19px; }
@media (prefers-reduced-motion: reduce){ .mdp__oeil{ transition:none; } }

/* ========================= RÉGLAGES DE PAIEMENT ========================== */
.reglages{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:16px; margin-bottom:16px;
}
.reglage{ display:flex; flex-direction:column; gap:6px; min-width:0; }
.reglage__etat{
  margin:0; padding:6px 10px;
  border-radius:var(--r-sm);
  font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size:.78rem; word-break:break-all;
}
.reglage__etat.est-rempli{ background:var(--ok-fond);     color:var(--ok); }
.reglage__etat.est-vide  { background:var(--danger-fond); color:var(--danger); }
.actions--gauche{ justify-content:flex-start; text-align:left; }

/* Le mode de paiement se lit d'un coup d'œil : c'est la première chose à
   vérifier après une bascule, et la première à surveiller ensuite. */
.puce-mode{
  padding:5px 13px; border-radius:var(--r-pill);
  font-size:.76rem; font-weight:800; white-space:nowrap;
}
.puce-mode--live   { background:var(--ok-fond);     color:var(--ok);     border:1px solid #bfe6d5; }
.puce-mode--test   { background:var(--warn-fond);   color:var(--warn);   border:1px solid #f2dfb4; }
.puce-mode--absent,
.puce-mode--inconnu{ background:var(--danger-fond); color:var(--danger); border:1px solid #f6cccc; }

.tile__value--mot{ font-size:1.15rem; }
.tile--live  { border-color:#bfe6d5; background:var(--ok-fond); }
.tile--live   .tile__label, .tile--live   .tile__value{ color:var(--ok); }
.tile--test  { border-color:#f2dfb4; background:var(--warn-fond); }
.tile--test   .tile__label, .tile--test   .tile__value{ color:var(--warn); }
.tile--absent, .tile--inconnu{ border-color:#f6cccc; background:var(--danger-fond); }
.tile--absent .tile__label, .tile--absent .tile__value,
.tile--inconnu .tile__label, .tile--inconnu .tile__value{ color:var(--danger); }

/* Liste sobre, sans les coches vertes : on énumère ici des conséquences, pas
   des avantages. */
.atouts--sobre li::before{ content:"·"; background:transparent; color:var(--muted); font-size:1.1rem; }

/* Liens légaux : présents mais discrets. Ils doivent être trouvables sans
   disputer la place au reste du pied de page. */
.legal{ margin:0 0 6px; font-size:.8rem; }
.legal a{ color:var(--faint); text-decoration:underline; }
.legal a:hover{ color:var(--text); }

/* ===========================================================================
   L'ADMINISTRATION — un menu à gauche, une vue à la fois
   ===========================================================================
   Cette feuille sert SIX pages. Tout ce bloc est donc portée par `body.admin`,
   et rien d'autre ne peut en hériter : ajouter une mise en page globale ici
   aurait déplacé l'espace client, la page de connexion et le retour de
   paiement, qui n'ont rien demandé.

   Pourquoi une colonne plutôt que des ancres : le panneau empilait les quatre
   sections sur une seule page. Il fallait faire défiler trois écrans pour
   passer d'un compte client à une migration, et les liens du haut ne
   servaient qu'à sauter dans un mur de texte. Une vue à la fois, et un menu
   qui dit où l'on est.
   =========================================================================== */

body.admin{ background:var(--bg, #f4f6fb); }

.adm{
  display:grid;
  grid-template-columns:246px minmax(0, 1fr);
  min-height:100dvh;
  min-height:100vh;   /* repli : dvh manque encore sur de vieux navigateurs */
}

/* --- LA COLONNE ------------------------------------------------------------
   Elle reste à l'écran pendant qu'on fait défiler une longue liste de
   membres : c'est tout l'intérêt d'un menu latéral, et sans `sticky` il
   disparaît au premier écran. */
.adm__menu{
  position:sticky;
  top:0;
  align-self:start;
  height:100dvh;
  height:100vh;
  display:flex;
  flex-direction:column;
  gap:18px;
  padding:20px 14px;
  background:var(--card, #fff);
  border-right:1px solid var(--border, #e4e8f0);
}

.adm__marque{
  display:flex;
  flex-direction:column;
  gap:2px;
  padding:6px 10px 14px;
  font-weight:700;
  font-size:1.02rem;
  border-bottom:1px solid var(--border, #e4e8f0);
}
.adm__marque span{
  font-weight:500;
  font-size:.78rem;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--muted, #5b6472);
}

.adm__nav{ display:flex; flex-direction:column; gap:2px; }

.adm__lien{
  display:flex;
  align-items:center;
  gap:11px;
  padding:9px 11px;
  border-radius:10px;
  color:var(--muted, #5b6472);
  font-weight:600;
  font-size:.93rem;
  text-decoration:none;
  transition:background 140ms ease, color 140ms ease;
}
.adm__lien:hover{ background:var(--bg, #f4f6fb); color:var(--text, #111827); }
.adm__lien svg{ flex:0 0 auto; opacity:.85; }

/* L'élément courant se lit sans compter : fond plein, texte foncé, et une
   barre à gauche. Trois signaux valent mieux qu'une nuance de gris. */
.adm__lien.est-actif{
  background:var(--bg, #f4f6fb);
  color:var(--text, #111827);
  box-shadow:inset 3px 0 0 var(--accent, #0891b2);
}
.adm__lien.est-actif svg{ opacity:1; color:var(--accent, #0891b2); }

/* La pastille des migrations en attente. Elle se voit depuis n'importe quelle
   vue : un tableau de bord qui ne signale rien oblige à faire le tour toutes
   les semaines pour découvrir qu'il n'y avait rien à faire. */
.adm__pastille{
  margin-left:auto;
  min-width:20px;
  padding:1px 6px;
  border-radius:999px;
  background:#a8261f;
  color:#fff;
  font-size:.74rem;
  font-weight:700;
  text-align:center;
}

.adm__pied{
  margin-top:auto;
  display:flex;
  flex-direction:column;
  gap:10px;
  padding-top:14px;
  border-top:1px solid var(--border, #e4e8f0);
}
.adm__pied .btn{ justify-content:center; }

/* L'état du paiement, en toutes lettres et pas seulement en couleur : une
   pastille verte ne dit rien à qui ne distingue pas le vert du rouge, et
   « production » ou « test » est justement ce qu'on veut vérifier d'un
   coup d'œil avant de toucher à quoi que ce soit. */
.adm__mode{
  display:block;
  padding:7px 10px;
  border-radius:9px;
  font-size:.8rem;
  font-weight:600;
  text-align:center;
  border:1px solid var(--border, #e4e8f0);
  color:var(--muted, #5b6472);
}
.adm__mode--live{   background:#e6f4ee; border-color:#bfe0d2; color:#0f6b45; }
.adm__mode--test{   background:#fdf3e0; border-color:#ecd9ae; color:#8a5a00; }
.adm__mode--absent{ background:#fceceb; border-color:#eec9c6; color:#a8261f; }

/* --- LE CORPS ------------------------------------------------------------ */
.adm__corps{
  min-width:0;                 /* sans ça, un tableau large pousse la grille */
  padding:26px 26px 60px;
  max-width:1120px;
}
.adm__corps .hero{ margin-bottom:18px; }

/* La barre du haut du téléphone (panel.php, .adm__tete) : absente au-delà. */
.adm__tete{ display:none; }

/* --- SUR TÉLÉPHONE (≤ 900 px) ----------------------------------------------
   La colonne devenait une rangée de 1 600 px qu'on faisait défiler du doigt :
   six vues sur neuf hors de l'écran, « Se déconnecter » au bout (David,
   31/10/2026 : « sur mobile cette page c naze »). Elle disparaît au profit
   de la navigation des modules (/nav-mobile.css) : une barre du haut d'une
   ligne, le menu ☰ rangé par groupes, la barre du bas. 900 px, comme les
   modules : c'est là que leurs volets prennent le relais.

   Placé APRÈS les règles qu'il corrige : une requête média n'ajoute aucune
   spécificité, et une adaptation écrite trop tôt perd contre la règle
   qu'elle prétend remplacer. Ce projet s'est déjà fait prendre. */
@media (max-width:900px){
  .adm{ grid-template-columns:1fr; min-height:0; }
  .adm__menu{ display:none; }
  .adm__tete{
    position:sticky; top:0; z-index:50;
    display:flex; align-items:center; gap:10px;
    min-height:60px;
    padding:8px 12px;
    padding-top:calc(8px + env(safe-area-inset-top));
    background:color-mix(in oklab, var(--card, #fff) 92%, transparent);
    -webkit-backdrop-filter:blur(12px) saturate(140%);
    backdrop-filter:blur(12px) saturate(140%);
    border-bottom:1px solid var(--border, #e4e8f0);
  }
  /* L'état du paiement, en haut à droite : ce qu'on vérifie avant tout le
     reste. Il mène à l'onglet Paiement. */
  .adm__tete .adm__mode{
    margin-left:auto; flex:0 0 auto;
    padding:6px 11px; border-radius:999px;
    font-size:.76rem; font-weight:700; text-decoration:none;
  }
  .tiroir__tete .adm__mode{
    flex:0 0 auto; padding:2px 9px; border-radius:999px;
    font-size:.72rem; font-weight:800;
  }
  .adm__corps{ padding:16px 12px 28px; }
  .adm__corps .hero{ margin-bottom:14px; }
  .adm__corps .hero h1{ font-size:1.4rem; }
  .adm__corps .hero__sous{ font-size:.9rem; }
  body.admin .card{ padding:16px 14px; }
}

/* ===========================================================================
   LE TABLEAU DE BORD (body.admin .tdb)
   =========================================================================== */
/* Une tuile qui mène à sa liste se touche en entier, pas seulement par son
   petit lien souligné. */
body.admin .tile:has(.tile__lien){ position:relative; }
body.admin .tile:has(.tile__lien):hover{ border-color:var(--border-fort, #cbd2de); }
body.admin .tile__lien::after{ content:""; position:absolute; inset:0; border-radius:inherit; }

/* Le mode d'emploi d'un événement Stripe en échec, plié. */
body.admin .tdb__plus{ margin-top:6px; font-weight:500; }
body.admin .tdb__plus > summary{ cursor:pointer; font-weight:700; text-decoration:underline; }
body.admin .tdb__plus[open] > summary{ margin-bottom:4px; }
body.admin .tdb__evt-erreur{ display:inline; }

/* Les nouveaux clients et les départs : alignés sur ordinateur, empilés sur
   téléphone. */
body.admin .tdb-mouv__titre{ margin:10px 0 4px; }
body.admin .tdb-mouv{ list-style:none; margin:0 0 8px; padding:0; display:flex; flex-wrap:wrap; gap:4px 18px; }

@media (max-width:900px){
  /* Ce qui demande une action passe d'abord, quand il y a quelque chose. */
  body.admin .tdb{ display:flex; flex-direction:column; }
  body.admin .tdb__actions--urgent{ order:-1; margin-bottom:18px; border-color:#f0d9a8; }

  /* Des tuiles serrées : deux par rang sur un téléphone, le chiffre lisible,
     sans pavé blanc autour. Treize tuiles faisaient deux écrans. */
  body.admin .tiles{ grid-template-columns:repeat(auto-fit, minmax(140px, 1fr)); gap:8px; margin-bottom:14px; }
  body.admin .tile{ padding:11px 13px; border-radius:14px; }
  body.admin .tile__label{ font-size:.64rem; letter-spacing:.05em; }
  body.admin .tile__value{ margin-top:2px; font-size:1.35rem; }
  body.admin .tile__value--mot{ font-size:1.02rem; }
  body.admin .tile__sous{ font-size:.72rem; }
  body.admin .tile__lien{ margin-top:4px; font-size:.76rem; }

  /* Les boutons d'action prennent la largeur : on les touche du pouce. */
  body.admin .tdb__actions .btn:not(.ghost){ width:100%; }

  /* Un événement en échec par bloc : son type, puis quand, puis l'erreur,
     chacun sur sa ligne ; la note et « Ignorer » sur une seule. */
  body.admin .tdb__evts{ gap:0; }
  body.admin .tdb__evts li{ padding:10px 0; border-top:1px solid var(--border); }
  body.admin .tdb__evts li::before{ display:none; }
  body.admin .tdb__sep{ display:none; }
  body.admin .tdb__evt-quand,
  body.admin .tdb__evt-erreur{ display:block; margin-top:2px; font-size:.84rem; color:var(--muted); }
  body.admin .tdb .secu__form{ flex-wrap:nowrap; }
  body.admin .tdb .secu__form input[type="text"]{ flex:1 1 auto; }

  body.admin .tdb-mouv{ flex-direction:column; gap:6px; }
}
@media (max-width:520px){
  /* Sur deux colonnes, une tuile seule en fin de rang prend toute la largeur. */
  body.admin .tiles .tile:last-child:nth-child(odd){ grid-column:1 / -1; }
}

/* Un tableau en cartes sur téléphone (.table--cartes) : chaque ligne devient
   une carte, son premier champ en titre, les autres sous leur nom
   (data-label). Un tableau de quatre colonnes qui défile de côté cache
   justement le chiffre qu'on était venu lire. */
@media (max-width:640px){
  body.admin .table-wrap:has(> .table--cartes){ overflow:visible; border:0; border-radius:0; }
  body.admin .table--cartes{ display:block; background:transparent; }
  body.admin .table--cartes thead{
    position:absolute; width:1px; height:1px; overflow:hidden;
    clip:rect(0 0 0 0); white-space:nowrap;
  }
  body.admin .table--cartes tbody{ display:grid; gap:8px; }
  body.admin .table--cartes tr{
    display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:8px 12px;
    padding:12px 14px;
    border:1px solid var(--border); border-radius:var(--r-md);
    background:var(--card);
  }
  body.admin .table--cartes tbody tr:hover{ background:var(--card); }
  body.admin .table--cartes td{ display:block; min-width:0; padding:0; border:0; font-size:.9rem; overflow-wrap:anywhere; }
  body.admin .table--cartes td:first-child{ grid-column:1 / -1; font-weight:700; }
  /* Un texte long (le nom d'un module, un état) prend deux colonnes, ou la
     ligne entière : dans un tiers de carte, « déménagement » débordait. */
  body.admin .table--cartes td.carte-large{ grid-column:span 2; }
  body.admin .table--cartes td.carte-pleine{ grid-column:1 / -1; }
  body.admin .table--cartes td[data-label]::before{
    content:attr(data-label); display:block; margin-bottom:2px;
    color:var(--muted); font-size:.66rem; font-weight:800; letter-spacing:.05em; text-transform:uppercase;
  }
  /* Une ligne écartée par la recherche (Membres) reste cachée : la grille
     l'emporterait sinon sur l'attribut hidden. */
  body.admin .table--cartes tr[hidden]{ display:none; }
  /* Les boutons d'une ligne côte à côte, à la largeur de la carte. */
  body.admin .table--cartes td.actions{
    grid-column:1 / -1; display:flex; flex-wrap:wrap; gap:8px;
    text-align:left; white-space:normal;
  }
  body.admin .table--cartes td.actions > *{ flex:1 1 auto; width:auto; margin:0; }
  body.admin .table--cartes td.actions form{ display:flex; }
  body.admin .table--cartes td.actions form .btn{ width:100%; }
  /* Le numéro à côté du nom, pas dessous : une ligne de moins par carte. */
  body.admin .table--cartes td:first-child .nom{ display:inline; }
  body.admin .table--cartes td:first-child .sous{ display:inline; margin-left:6px; }
}

/* ===========================================================================
   LE DIAGNOSTIC (body.admin)
   ===========================================================================
   Trois etats, et un seul exige d'agir. Le piege d'un ecran de diagnostic est
   de tout peindre en rouge : un ecran qui crie en permanence cesse d'etre lu,
   et le jour ou il a raison personne ne le regarde.

   Le vert est donc DISCRET — c'est l'etat normal, il n'a pas a se faire
   remarquer — et seul le rouge porte un fond.
   =========================================================================== */

body.admin .diag__groupe{
  margin:22px 0 8px;
  font-size:.95rem; font-weight:700;
  color:var(--texte, #111827);
}
body.admin .diag__groupe:first-of-type{ margin-top:14px; }

body.admin table.diag td{ vertical-align:top; padding:9px 10px; }
body.admin .diag__pastille{ width:46px; }

body.admin .diag__faire{
  margin-top:3px;
  font-size:.84rem; line-height:1.5;
  color:var(--muted, #5b6472);
}

/* La ligne cassee se voit sans chercher : c'est la seule qui porte un fond. */
body.admin tr.diag--ko{ background:#fdf2f1; }
body.admin tr.diag--ko .diag__faire{ color:#8a2019; }

body.admin .etiq{
  display:inline-block; min-width:30px;
  padding:2px 7px; border-radius:999px;
  font-size:.72rem; font-weight:700; text-align:center;
  border:1px solid transparent;
}
body.admin .etiq--ok{     background:#e9f5ef; border-color:#c3e2d3; color:#0f6b45; }
body.admin .etiq--alerte{ background:#fdf3e0; border-color:#ecd9ae; color:#8a5a00; }
body.admin .etiq--ko{     background:#a8261f; border-color:#a8261f; color:#fff; }

/* `styles.css` ne portait que `.note--attention`. Le bilan du diagnostic a
   besoin des deux autres tons : il annonce aussi bien « tout est en ordre »
   que « quelque chose est casse ».

   La FORME est reprise en entier, pas seulement la couleur : `.note` toute
   seule n'est que du petit texte gris, et une variante qui ne poserait que le
   fond aurait donne un bilan en corps 8 sur un aplat colore. Le trait a gauche
   reste lisible pour qui distingue mal les couleurs. */
body.admin .note--ok,
body.admin .note--ko{
  margin-top:14px; padding:10px 12px;
  border:1px solid var(--border);
  border-radius:var(--r-sm);
  font-size:.86rem; font-weight:600; line-height:1.5;
}
body.admin .note--ok{
  border-left:3px solid #0f6b45;
  background:#e9f5ef; color:#0f5f3f;
}
body.admin .note--ko{
  border-left:3px solid #a8261f;
  background:#fceceb; color:#8a2019;
}

/* ===========================================================================
   LE CONSTAT (body.admin)
   ===========================================================================
   Une liste longue, qu'on parcourt plus qu'on ne la lit : chaque point tient
   sur UNE ligne fermée (gravité, titre, état) et ne s'ouvre qu'à la demande.
   La gravité se lit à la couleur du trait de gauche ET au mot écrit dessus :
   la couleur seule ne suffit pas à qui distingue mal le rouge de l'ambre.
   =========================================================================== */

body.admin .cst-volets{ display:flex; gap:6px; flex-wrap:wrap; }
body.admin .cst-volet{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 14px; border-radius:999px;
  border:1px solid var(--border); background:var(--card);
  color:var(--muted); font-weight:600; font-size:.9rem;
  text-decoration:none;
}
body.admin .cst-volet:hover{ color:var(--text); text-decoration:none; }
body.admin .cst-volet.est-actif{ background:var(--accent-clair); border-color:#9fd9e6; color:var(--accent-fonce); }
body.admin .cst-volet__n{
  min-width:22px; padding:1px 7px; border-radius:999px;
  background:var(--bg); color:var(--text); font-size:.75rem; text-align:center;
}

body.admin .cst-barre{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; flex-wrap:wrap; margin:16px 0 4px;
}
body.admin .cst-filtres{ display:flex; gap:4px; flex-wrap:wrap; }
body.admin .cst-filtre{
  padding:6px 12px; border-radius:var(--r-sm);
  color:var(--muted); font-size:.86rem; font-weight:600; text-decoration:none;
}
body.admin .cst-filtre span{ color:var(--faint); font-weight:500; }
body.admin .cst-filtre:hover{ background:var(--bg); text-decoration:none; }
body.admin .cst-filtre.est-actif{ background:var(--text); color:#fff; }
body.admin .cst-filtre.est-actif span{ color:#cbd5e1; }

body.admin .cst-zones{
  display:flex; gap:6px; flex-wrap:wrap; margin:10px 0 0;
  padding:10px 0 0; border-top:1px solid var(--border);
}
body.admin .cst-zones a{
  font-size:.8rem; color:var(--muted); text-decoration:none;
  padding:3px 9px; border:1px solid var(--border); border-radius:999px;
}
body.admin .cst-zones a:hover{ color:var(--text); border-color:var(--border-fort); }
body.admin .cst-zones span{ color:var(--faint); }

body.admin details.cst{
  margin:6px 0; background:var(--card);
  border:1px solid var(--border); border-left:4px solid var(--border-fort);
  border-radius:var(--r-sm);
}
body.admin details.cst--critique{ border-left-color:#a8261f; }
body.admin details.cst--importante{ border-left-color:#c27c0e; }
body.admin details.cst--amelioration{ border-left-color:#0891b2; }
body.admin details.cst--fait,
body.admin details.cst--ecarte{ opacity:.72; border-left-color:var(--border-fort); }
body.admin details.cst[open]{ box-shadow:var(--ombre-sm); opacity:1; }

body.admin .cst__tete{
  display:flex; align-items:center; gap:10px;
  padding:10px 12px; cursor:pointer; list-style:none;
}
body.admin .cst__tete::-webkit-details-marker{ display:none; }
body.admin .cst__titre{ flex:1 1 auto; min-width:0; overflow-wrap:anywhere; font-weight:600; font-size:.93rem; line-height:1.4; }
body.admin .cst__etiquettes{ display:flex; gap:6px; flex:0 0 auto; align-items:center; }

body.admin .cst__gravite{
  flex:0 0 auto; min-width:92px; text-align:center;
  padding:2px 8px; border-radius:999px;
  font-size:.7rem; font-weight:700; letter-spacing:.02em; text-transform:uppercase;
}
body.admin .cst__gravite--critique{ background:#a8261f; color:#fff; }
body.admin .cst__gravite--importante{ background:#fdf3e0; color:#8a5a00; border:1px solid #ecd9ae; }
body.admin .cst__gravite--amelioration{ background:var(--accent-clair); color:var(--accent-fonce); border:1px solid #bde6ef; }

body.admin .cst__statut{
  padding:2px 8px; border-radius:999px; font-size:.72rem; font-weight:700;
  border:1px solid var(--border); background:var(--bg); color:var(--muted);
}
body.admin .cst__statut--fait{ background:#e9f5ef; border-color:#c3e2d3; color:#0f6b45; }
body.admin .cst__statut--en_cours{ background:#e0f5fa; border-color:#bde6ef; color:#065f76; }

body.admin .cst__corps{ padding:2px 14px 14px; border-top:1px solid var(--border); }
body.admin .cst__mesure{
  margin:12px 0 0; padding:9px 11px; border-radius:var(--r-sm);
  font-size:.86rem; line-height:1.5;
}
body.admin .cst__mesure--ok{ background:#e9f5ef; color:#0f5f3f; }
body.admin .cst__mesure--alerte{ background:#fdf3e0; color:#6f4800; }
body.admin .cst__mesure--ko{ background:#fceceb; color:#8a2019; }

body.admin .cst__grille{
  /* minmax(0, …) et non 1fr : un chemin de fichier ne se coupe pas, et une
     colonne « 1fr » prend la largeur de son contenu le plus long — la grille
     débordait alors de la carte sur téléphone. */
  display:grid; grid-template-columns:140px minmax(0, 1fr); gap:6px 14px;
  margin:12px 0 0; font-size:.88rem; line-height:1.55;
}
body.admin .cst__grille dt{ color:var(--faint); font-weight:600; }
body.admin .cst__grille dd{ margin:0; }
body.admin .cst__fichiers code{
  display:inline-block; max-width:100%; overflow-wrap:anywhere;
  margin:0 4px 4px 0; padding:1px 6px;
  background:var(--bg); border-radius:6px; font-size:.78rem;
}

body.admin .cst__form{
  display:flex; align-items:flex-end; gap:10px; flex-wrap:wrap;
  margin-top:14px; padding-top:12px; border-top:1px dashed var(--border);
}
body.admin .cst__champ{ display:flex; flex-direction:column; gap:4px; font-size:.8rem; color:var(--faint); }
body.admin .cst__champ select,
body.admin .cst__champ input{ min-height:38px; }
body.admin .cst__champ--note{ flex:1 1 240px; }
body.admin .cst__champ--note input{ width:100%; }

@media (max-width:820px){
  body.admin .cst__tete{ flex-wrap:wrap; }
  body.admin .cst__gravite{ min-width:0; }
  body.admin .cst__titre{ flex-basis:100%; order:3; }
  body.admin .cst__grille{ grid-template-columns:minmax(0, 1fr); gap:2px; }
  body.admin .cst__grille dt{ margin-top:8px; }
}

/* ===========================================================================
   LE JOURNAL DES ERREURS (body.admin)
   ===========================================================================
   Même grammaire que le Constat — une ligne fermée par erreur, un trait de
   couleur à gauche pour la gravité, le mot écrit dessus — avec en plus ce
   qu'il faut pour CHERCHER : une recherche libre, des dates, et la bande des
   quatorze derniers jours, où l'on voit d'un coup d'œil le jour qui a dérapé.
   =========================================================================== */

body.admin .jrn-grav{
  flex:0 0 auto; display:inline-block; min-width:92px; text-align:center;
  padding:2px 8px; border-radius:999px;
  font-size:.7rem; font-weight:700; letter-spacing:.02em; text-transform:uppercase;
  border:1px solid transparent;
}
body.admin .jrn-grav--critique{ background:#a8261f; color:#fff; }
body.admin .jrn-grav--erreur{ background:#fceceb; color:#8a2019; border-color:#eec9c6; }
body.admin .jrn-grav--avertissement{ background:#fdf3e0; color:#8a5a00; border-color:#ecd9ae; }
body.admin .jrn-grav--info{ background:var(--bg); color:var(--muted); border-color:var(--border); }

body.admin details.jrn--critique{ border-left-color:#a8261f; }
body.admin details.jrn--erreur{ border-left-color:#d4574e; }
body.admin details.jrn--avertissement{ border-left-color:#c27c0e; }
body.admin details.jrn--info{ border-left-color:var(--border-fort); }
body.admin details.jrn--traitee{ opacity:.68; }
body.admin details.jrn--traitee[open]{ opacity:1; }

body.admin .jrn__quand{
  flex:0 0 auto; min-width:118px;
  font-size:.8rem; color:var(--faint); font-variant-numeric:tabular-nums;
}
body.admin .jrn__code{
  margin-right:6px; padding:1px 6px; border-radius:6px;
  background:var(--bg); font-size:.78rem; font-weight:700;
}
body.admin .jrn__message{
  display:block; margin-top:2px;
  font-weight:400; font-size:.82rem; color:var(--muted);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
body.admin details.jrn[open] .jrn__message{ white-space:normal; }
body.admin .jrn__ref{ font-size:1.05rem; letter-spacing:.12em; }
body.admin .jrn__ctx{
  margin:0; padding:10px 12px; max-height:340px; overflow:auto;
  background:#0f172a; color:#e2e8f0; border-radius:var(--r-sm);
  font-size:.76rem; line-height:1.5; white-space:pre-wrap; overflow-wrap:anywhere;
}

body.admin .jrn-recherche{
  display:flex; align-items:flex-end; gap:10px; flex-wrap:wrap;
  margin:16px 0 4px;
}
body.admin .jrn-recherche__q{ flex:1 1 260px; }
body.admin .jrn-recherche__q input{ width:100%; }

/* La bande des 14 jours : la hauteur ne veut rien dire, le chiffre si. Une
   journée vide reste visible, en pâle : un trou dans la bande est aussi une
   information. */
body.admin .jrn-jours{
  display:grid; grid-template-columns:repeat(14, minmax(0, 1fr)); gap:4px;
  margin:12px 0 4px;
}
body.admin .jrn-jour{
  display:flex; flex-direction:column; align-items:center; gap:2px;
  padding:6px 2px; border-radius:var(--r-sm);
  border:1px solid var(--border); background:var(--card);
  text-decoration:none; color:var(--text);
}
body.admin .jrn-jour:hover{ border-color:var(--border-fort); text-decoration:none; }
body.admin .jrn-jour.est-vide{ color:var(--faint); background:transparent; }
body.admin .jrn-jour.est-actif{ background:var(--text); border-color:var(--text); color:#fff; }
body.admin .jrn-jour__n{ font-weight:800; font-size:1rem; font-variant-numeric:tabular-nums; }
body.admin .jrn-jour__d{ font-size:.66rem; white-space:nowrap; }

body.admin .cst-zones a.est-actif{ background:var(--text); border-color:var(--text); color:#fff; }
body.admin .cst-zones a.est-actif span{ color:#cbd5e1; }

body.admin .jrn-codes td{ vertical-align:top; font-size:.86rem; line-height:1.5; }
body.admin .jrn-codes .sous{ margin-top:2px; }
body.admin .jrn-codes__code{ white-space:nowrap; }
body.admin .jrn-codes__code .jrn-grav{ display:block; margin-top:6px; min-width:0; }
body.admin .jrn-pages{ margin-top:14px; justify-content:center; }

@media (max-width:820px){
  body.admin .jrn-jours{ grid-template-columns:repeat(7, minmax(0, 1fr)); }
  body.admin .jrn__quand{ min-width:0; }
  body.admin .jrn-grav{ min-width:0; }
}

/* ===========================================================================
   MEMBRES : RECHERCHE, FACTURATION STRIPE, SUPPRESSION (body.admin)
   ===========================================================================
   La puce « Facturé par Stripe » dit pourquoi un « Suspendu » posé ici ne
   suspend pas un prélèvement. Couleur de Stripe, mais le texte porte le sens :
   rien ne repose sur la seule teinte. */
body.admin .puce--stripe{ background:#eef0ff; color:#3c3fa8; border:1px solid #d6d9fb; }
body.admin .lien-stripe{ display:inline-block; margin-top:4px; text-decoration:underline; }

body.admin .membres-recherche{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  margin:0 0 12px;
}
body.admin .membres-recherche input{ flex:1 1 280px; width:auto; }

/* L'écran de confirmation d'une suppression : il doit se distinguer de tout
   le reste de la page, sans crier. */
body.admin .carte-suppression{ border:1px solid #f0c5c2; border-left:4px solid var(--danger); }
body.admin .carte-suppression h2{ margin-bottom:6px; }
body.admin .sup-form{ margin-top:16px; }
body.admin .sup-form__case,
body.admin .dlg-stripe__case{
  display:flex; align-items:flex-start; gap:9px;
  margin-top:10px; font-weight:600; color:var(--text);
}
body.admin .sup-form__case input,
body.admin .dlg-stripe__case input{ width:auto; margin-top:3px; flex:none; }

body.admin .dlg-stripe[hidden]{ display:none; }
body.admin .dlg-stripe{ margin-top:16px; }

body.admin .reglage--confirmation{ max-width:360px; margin-top:16px; }

/* L'opération ponctuelle (bascule test -> production) ne ressemble pas à une
   migration : fond ambré, et un champ à remplir au lieu d'un simple bouton. */
body.admin tr.migration-ponctuelle{ background:var(--warn-fond); }
body.admin tr.migration-ponctuelle .sous{ max-width:46ch; margin-top:4px; white-space:normal; }
body.admin .form-ponctuelle{ display:inline-flex; align-items:center; gap:6px; flex-wrap:wrap; }
body.admin .form-ponctuelle input[type=text]{ width:9.5em; padding:7px 9px; }

/* Onglet Sécurité — même tableau que le Diagnostic, avec en plus la façon
   dont chaque ligne est vérifiée, et la case des points à confirmer. */
body.admin .secu__comment{
  display:inline-block; margin-left:8px; padding:1px 8px;
  border:1px solid #d9dbe6; border-radius:999px;
  font-size:11.5px; font-weight:600; color:#5b6077; background:#f6f7fb;
  vertical-align:1px;
}
body.admin .secu__form{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-top:8px; }
body.admin .secu__form input[type="text"]{ flex:1 1 260px; min-width:0; }

/* ===========================================================================
   L'assistant de l'administrateur (assistant-admin.js). La feuille est celle
   de l'assistant des déménageurs (demenageur/calculateur/assets/css/
   assistant.css) : elle attend leurs jetons de couleur, qu'on traduit ici.
   =========================================================================== */
body.admin .assistant{
  --border-soft:var(--border);
  --border-strong:var(--border-fort);
  --accent-strong:var(--accent-fonce);
  --surface-hover:#eef2f7;
  --surface-sunken:#f4f6fb;
  --muted-strong:#374151;
  --input-bg:#fff;
}
body.admin .assistant .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;
}
/* « Ce qui presse » : une ligne par point, la couleur dit l'urgence et le
   mot la répète (la couleur ne porte jamais seule le sens). */
body.admin .assistant__presse ul{ margin:0; padding:0; list-style:none; display:grid; gap:6px; }
body.admin .assistant__point{
  display:flex; align-items:flex-start; gap:8px;
  padding:8px 10px; border-radius:10px;
  background:var(--card); border:1px solid var(--border); border-left:3px solid var(--border-fort);
  font-size:13.5px; line-height:1.4;
}
body.admin .assistant__point--urgent   { border-left-color:var(--danger); }
body.admin .assistant__point--important{ border-left-color:var(--warn); }
body.admin .assistant__point--conseil  { border-left-color:var(--accent); }
body.admin .assistant__niveau{
  flex:0 0 auto; margin-top:1px; padding:2px 7px; border-radius:var(--r-pill);
  font-size:10.5px; font-weight:800; letter-spacing:.04em; text-transform:uppercase;
  background:#eef1f6; color:var(--muted);
}
body.admin .assistant__point--urgent    .assistant__niveau{ background:var(--danger-fond); color:var(--danger); }
body.admin .assistant__point--important .assistant__niveau{ background:var(--warn-fond); color:var(--warn); }
body.admin .assistant__point--conseil   .assistant__niveau{ background:var(--accent-clair); color:var(--accent-fonce); }
body.admin .assistant__pourquoi{ display:block; margin-top:2px; color:var(--muted); font-size:12.5px; }
body.admin .assistant__bulle--urgent .assistant__badge{ background:var(--danger); }