/* ===================================================================
   GBU Connect — refonte visuelle (septembre 2026)

   Le site public construit par Pierre (gbum-hub-site) part de la MÊME charte
   que l'application — mêmes crème, ambre, encre, mêmes Newsreader et Hanken
   Grotesk — et paraît pourtant bien plus abouti. La différence n'est pas
   dans les couleurs : elle est dans la composition. Des titres qui osent
   leur taille, de l'air, des filets plutôt que des boîtes, et deux tons
   profonds (l'encre, la terre) qui donnent du rythme à une page crème.

   Ce fichier transpose cela à l'outil de travail, SANS changer une ligne de
   structure : il est chargé après app.css et finition.css, et ne fait que
   surcharger. Le retirer de base.html rend l'apparence d'avant, telle quelle.

   Deux garde-fous tenus partout :
     - un outil n'est pas une vitrine : les écrans denses (listes, tableaux,
       formulaires) gagnent en respiration, pas en spectacle ;
     - Esaïe a déjà tranché deux fois (« les couleurs sont fortes », puis le
       vert refusé pour le comité) : les tons profonds restent l'encre et la
       terre du logo, jamais un aplat vif, et jamais de vert.
   =================================================================== */

:root {
  --creme:#FBF6EF; --sable:#F4EADC; --encre:#2A211B; --terre:#7A3208;
  --trait:#E5D9C9; --trait-sable:#D9C7AE; --trait-encre:#4A3D33;
  --bord-controle:#8A7458;
  --sur-encre:#FBF6EF; --sur-encre-2:#B9AA98; --sur-encre-accent:#F0A868;
  --sur-terre:#FBF6EF; --sur-terre-2:#EFC9A6;
  --courbe:cubic-bezier(.05,.7,.1,1);
  --duree-courte:120ms; --duree-moyenne:320ms;
  --gouttiere:clamp(18px, 3.2vw, 40px);
  --largeur-page:1240px;
  /* L'échelle de titres : fluide, pour que le même écran tienne sur un
     téléphone et respire sur un grand moniteur. */
  --t-display:clamp(2.125rem, 1.5rem + 2.6vw, 3.5rem);
  --t-titre:clamp(1.75rem, 1.45rem + 1.2vw, 2.375rem);
  --t-section:clamp(1.3125rem, 1.2rem + .55vw, 1.625rem);
  --shadow:0 1px 0 rgba(42,33,27,.04), 0 8px 24px rgba(42,33,27,.05);
}

body { font-size:15px; line-height:1.5; text-rendering:optimizeLegibility; }
:focus-visible { outline:3px solid var(--terre); outline-offset:2px; }

/* ------------------------------------------------------------ l'ossature */
.sidebar { background:var(--sable); border-right-color:var(--trait-sable); }
.nav-item { border-radius:10px; transition:background-color var(--duree-courte) var(--courbe); }
.nav-item:hover { background:rgba(122,50,8,.07); }
.nav-item.active {
  background:var(--creme); color:var(--terre);
  box-shadow:inset 3px 0 0 var(--terre);
}

/* L'en-tête de page : le sous-titre passe AU-DESSUS du titre, en étiquette,
   et le titre prend la taille d'un vrai titre. C'est ce seul geste qui fait
   passer un écran de « formulaire » à « page ». */
.topbar {
  background:var(--creme); border-bottom-color:var(--trait);
  padding:clamp(18px, 2.4vw, 30px) var(--gouttiere) clamp(16px, 2vw, 24px);
  align-items:flex-end;
}
.topbar > div:first-child { display:flex; flex-direction:column-reverse; gap:7px; }
.topbar .title {
  font-size:var(--t-titre); font-weight:500; line-height:1.08;
  letter-spacing:-.015em; text-wrap:balance;
}
.topbar .subtitle {
  font-size:.8125rem; font-weight:700; text-transform:uppercase;
  letter-spacing:.08em; color:var(--terre); margin:0;
}

.content { padding:clamp(22px, 2.8vw, 36px) var(--gouttiere) 56px; }
/* PAS de largeur maximale sur le contenu. Le premier jet de la refonte le
   plafonnait à 1240 px, comme un site public : sur un grand écran, un tiers
   de la fenêtre restait vide à droite pendant qu'il fallait faire défiler
   (remarque d'Esaïe, photo à l'appui, le soir même). Une vitrine se lit, un
   outil se parcourt : ici la place disponible se remplit. */

/* L'accueil en grille : deux colonnes et le rail sur un écran large, une
   colonne et le rail sur un écran ordinaire, tout empilé sur un téléphone. */
.accueil-grille { display:grid; grid-template-columns:minmax(0,1fr) 300px;
  gap:26px; align-items:start; }
.accueil-grille > .col-main   { grid-column:1; grid-row:1; min-width:0; }
.accueil-grille > .col-second { grid-column:1; grid-row:2; min-width:0; }
.accueil-grille > .rail       { grid-column:2; grid-row:1 / span 2; }
@media (min-width: 1680px) {
  .accueil-grille { grid-template-columns:minmax(0,1.15fr) minmax(0,1fr) 320px; gap:30px; }
  .accueil-grille > .col-second { grid-column:2; grid-row:1; }
  .accueil-grille > .rail { grid-column:3; grid-row:1; width:auto; }
  .accueil-grille > .col-second > .section-title:first-child { margin-top:0; }
}
@media (max-width: 980px) {
  .accueil-grille { grid-template-columns:minmax(0,1fr); gap:16px; }
  .accueil-grille > .col-main, .accueil-grille > .col-second,
  .accueil-grille > .rail { grid-column:1; grid-row:auto; width:100%; }
}

/* --------------------------------------------------------- les composants */
.section-title {
  font-size:var(--t-section); font-weight:500; letter-spacing:-.01em;
  margin:clamp(30px, 3.4vw, 44px) 2px 16px; text-wrap:balance;
}
.section-title:first-child { margin-top:0; }

.card {
  border-radius:14px; border-color:var(--trait); box-shadow:var(--shadow);
  transition:transform var(--duree-courte) var(--courbe),
             border-color var(--duree-courte) var(--courbe);
}
a.card:hover, .card.cliquable:hover { transform:translateY(-2px); border-color:var(--trait-sable); }
.card-tight { border-radius:12px; }

/* Les boutons : plus hauts, plus francs. L'ambre reste la couleur de
   l'action principale ; l'action secondaire se dit en terre, au trait. */
.btn {
  min-height:46px; padding:0 18px; border-radius:12px;
  font-size:.90625rem; font-weight:700; letter-spacing:.005em;
  transition:background-color var(--duree-courte) var(--courbe),
             border-color var(--duree-courte) var(--courbe),
             transform var(--duree-courte) var(--courbe);
}
.btn:active { transform:translateY(1px); }
.btn-primary { border:1px solid var(--primary-bord); box-shadow:none; }
.btn-lg { min-height:54px; padding:0 26px; border-radius:13px; font-size:1rem; }
.btn-ghost { background:transparent; border:1.5px solid var(--trait-sable); color:var(--encre); }
.btn-ghost:hover { border-color:var(--terre); color:var(--terre); background:transparent; }
.btn-soft { background:var(--sable); color:var(--terre); border:1px solid var(--trait-sable); }
.btn-soft:hover { background:#EFE0CB; }
.btn.mini { min-height:38px; padding:0 13px; }

/* Les champs : blancs, au trait net. Le fond beige les faisait ressembler à
   des zones inactives — on hésitait à y cliquer. */
.field label { font-size:.8125rem; font-weight:700; color:var(--muted); }
.field input, .field select, .field textarea, .input {
  background:#fff; border:1px solid var(--bord-controle); border-radius:11px;
  min-height:48px; font-size:.96875rem;
  transition:border-color var(--duree-courte) var(--courbe),
             box-shadow var(--duree-courte) var(--courbe);
}
.field input:focus, .field select:focus, .field textarea:focus, .input:focus {
  border-color:var(--terre); box-shadow:0 0 0 3px rgba(122,50,8,.14); outline:none;
}
/* Une zone de texte prend toute la largeur. Hors d'un « .field », elle
   gardait sa largeur native de vingt colonnes : sur l'écran des envois, on
   écrivait un message entier dans une case de 180 px. */
textarea.input, .field textarea { min-height:110px; line-height:1.55; width:100%; display:block; }
input[type="checkbox"], input[type="radio"] { min-height:0; accent-color:var(--terre); }
input[type="file"].input { padding:11px 12px; }

.tag { border-radius:999px; font-weight:600; }
.note { font-size:.84375rem; line-height:1.55; }
/* Une note posée en tête d'écran devient un encadré au filet, comme les
   « encadrés d'attente » du site public. Les notes logées DANS une carte ou
   un formulaire restent de simples petites lignes : elles ont déjà leur boîte. */
.content > .note { border-inline-start:3px solid var(--terre); padding:10px 0 10px 14px;
  color:var(--muted); max-width:78ch; }

/* ------------------------------------------------ l'accueil : son bandeau */
/* Un bandeau d'encre : le seul aplat profond de l'écran. La salutation y
   prend la taille d'un titre de une, le verset celle d'une citation. */
.banner.accueil-hero {
  background:var(--encre); color:var(--sur-encre); border:0; border-radius:18px;
  padding:clamp(26px, 3.6vw, 48px) clamp(22px, 3.4vw, 46px);
}
.accueil-hero .salut {
  font-size:var(--t-display); line-height:1.04; letter-spacing:-.02em;
  font-weight:500; text-wrap:balance;
}
.accueil-hero .sous {
  font-size:.8125rem; font-weight:700; text-transform:uppercase;
  letter-spacing:.08em; color:var(--sur-encre-accent); opacity:1; margin-top:14px;
}
.accueil-hero .verset {
  font-size:clamp(1.125rem, 1.02rem + .5vw, 1.4375rem); line-height:1.45;
  border-top:1px solid var(--trait-encre); margin-top:22px; padding-top:20px;
  max-width:62ch; color:var(--sur-encre);
}
.accueil-hero .verset .ref { color:var(--sur-encre-2); opacity:1; margin-top:10px; }

/* ----------------------------------------------------------- la connexion */
.page-connexion { background:var(--creme); }
.carte-connexion { border-radius:20px; border-color:var(--trait); max-width:1000px;
  box-shadow:0 1px 0 rgba(42,33,27,.04), 0 24px 60px rgba(42,33,27,.10); }
.banner.volet-marque {
  background:var(--terre); color:var(--sur-terre); border:0;
  padding:clamp(28px, 4vw, 52px); justify-content:space-between; min-height:520px;
}
.volet-marque .brand .name, .volet-marque .name { color:var(--sur-terre); }
.volet-marque .brand .sub, .volet-marque .sub { color:var(--sur-terre-2); }
.volet-marque .logo { background:var(--creme); border-radius:10px; padding:5px; }
.volet-marque .accroche {
  font-size:clamp(2rem, 1.4rem + 2.2vw, 3.125rem); line-height:1.06;
  letter-spacing:-.02em; margin-top:0; text-wrap:balance;
}
.volet-marque > div:nth-child(3) { color:var(--sur-terre-2); font-size:1rem; line-height:1.6; }
.volet-formulaire { padding:clamp(28px, 4vw, 56px) clamp(24px, 3.6vw, 52px); }
.volet-formulaire > .serif:first-child { font-size:var(--t-titre) !important; letter-spacing:-.015em; }
.carte-simple { border-radius:18px; padding:clamp(24px, 3vw, 36px); width:460px; }

/* ------------------------------------------------------------ l'aération */
/* Audit du 19/09/2026 (« texte vivant ») : 758 réglages de 10 à 12 px posés
   en ligne dans 106 gabarits rendaient tout le texte gris illisible et de
   même poids. Trois niveaux seulement : le titre (Newsreader), le corps
   (15 px, interligne 1,6), la légende (13 px). Rien en dessous. Les tailles
   étant écrites dans les attributs style, seule une surcharge par attribut
   les atteint sans toucher aux cent six gabarits. */
body { line-height:1.6; }
[style*="font-size:10"], [style*="font-size: 10"],
[style*="font-size:11"], [style*="font-size: 11"],
[style*="font-size:12"], [style*="font-size: 12"] { font-size:.8125rem !important; line-height:1.5; }
.avatar[style] { line-height:1; }
.card p, .card li, .note { max-width:72ch; }
.section-title { margin-top:36px; }

/* Un bouton ne se casse jamais sur trois lignes, un champ ne sort jamais de
   sa carte (« Par e-mail » dans Comptes, la date en trésorerie). */
.btn { white-space:nowrap; }
.field { min-width:0; }
.field > .input, .field > select, .field > textarea { width:100%; min-width:0; max-width:100%; box-sizing:border-box; }

/* WhatsApp sans vert : Esaïe l'a refusé. L'encre porte le geste principal. */
.btn-wa { background:var(--encre); color:var(--sur-encre); border:1px solid var(--encre); }
.btn-wa:hover { background:#3A2F27; }

/* L'annuaire en liste : une ligne par personne, deux colonnes sur grand écran. */
.annuaire-liste { display:grid; grid-template-columns:1fr; background:#fff;
  border:1px solid var(--trait); border-radius:16px; overflow:hidden; }
.annuaire-ligne { display:flex; align-items:center; gap:14px; padding:14px 18px;
  border-bottom:1px solid var(--trait); min-width:0; }
.annuaire-ligne .qui { flex:1; min-width:0; }
.annuaire-ligne .nom { font-weight:600; font-size:.96875rem; }
.annuaire-ligne .nom a { color:inherit; text-decoration:none; }
.annuaire-ligne .nom a:hover { color:var(--terre); }
.annuaire-ligne .ou { color:var(--faint); font-size:.8125rem; margin-top:2px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.annuaire-ligne .gestes { display:flex; gap:8px; flex-shrink:0; }
.annuaire-ligne .gestes .btn { min-height:36px; padding:0 14px; font-size:.8125rem; border-radius:10px; }
@media (min-width: 1500px) {
  .annuaire-liste { grid-template-columns:1fr 1fr; }
  .annuaire-ligne:nth-child(odd) { border-right:1px solid var(--trait); }
}
@media (max-width: 640px) {
  .annuaire-ligne { flex-wrap:wrap; }
  .annuaire-ligne .gestes { width:100%; padding-left:56px; }
}

/* Une explication repliee : une ligne visible, le reste a un geste. */
.aide-repliee { background:var(--sable); border-color:var(--trait-sable); box-shadow:none; }
.aide-repliee > summary { cursor:pointer; font-weight:600; color:var(--terre); list-style:none; }
.aide-repliee > summary::-webkit-details-marker { display:none; }
.aide-repliee > summary::after { content:" +"; }
.aide-repliee[open] > summary::after { content:" –"; }
.aide-repliee > div { margin-top:12px; font-size:.875rem; line-height:1.6; color:var(--muted); max-width:78ch; }

/* Sur telephone, tout ce qui se touche fait au moins 40 px de haut. Audit du
   19/09/2026 : 84 cibles trop fines en tresorerie, 70 dans les fonds du
   comite, 49 dans l'annuaire. */
@media (max-width: 780px) {
  .btn, .btn.mini, select.input, input.input, .clf-pastilles a, .pagination .btn,
  .annuaire-ligne .gestes .btn { min-height:40px; }
  .btn, .btn.mini, .clf-pastilles a { display:inline-flex; align-items:center; justify-content:center; }
  input[type="checkbox"], input[type="radio"] { width:22px; height:22px; }
  /* Mesure du 20/09/2026 : les cibles trop fines n'etaient PAS des boutons —
     62 croix de suppression en tresorerie (21 px), les noms cliquables des
     listes (19 a 21 px), les lignes depliables. */
  .btn-x, .retirer { min-width:40px; min-height:40px; display:inline-flex;
    align-items:center; justify-content:center; }
  .annuaire-ligne .nom a, .clf-ligne .qui a, .caisse-liste a, .tb-vierges .villes a,
  td > a:only-child, .sources a { display:inline-block; padding:9px 0; }
  /* Du remplissage, pas un changement d'affichage : le triangle natif d'une
     ligne depliable dit qu'elle se deplie, il doit rester. */
  summary { padding-top:9px; padding-bottom:9px; }
  /* Le menu et l'ecran des Amis ont leur propre remplissage, plus precis que
     cette regle : ne surtout pas le remettre a zero (regression du 20/09). */
}

/* Nettoyage des styles en ligne, tranche 1 (20/09/2026) : les attributs style
   les plus repetes des gabarits sont devenus ces classes. */
.legende { font-size:.8125rem; line-height:1.5; }
.grandit { flex:1; min-width:0; }
.grandit-simple { flex:1; }

/* La pagination des longues listes. */
.pagination { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:12px; margin-top:16px; color:var(--faint); font-size:.875rem; }
.pagination .liens { display:flex; align-items:center; gap:10px; }
.pagination .page { font-weight:600; color:var(--text); }
.pagination .btn { min-height:40px; padding:0 16px; }

/* ---- utilitaires (genere par codemod_styles_2.py) ---- */
/* Nettoyage des styles en ligne, tranche 2 (20/09/2026). Chaque classe vaut
   UNE declaration, dans la convention deja en place (mt8, mt18, gap8). Elles
   portent !important parce qu'elles remplacent un style en ligne, qui
   l'emportait sur tout. Ne pas editer a la main : regenerer. */
.aligne { align-items:center !important; }
.aligne-base { align-items:baseline !important; }
.aligne-haut { align-items:flex-start !important; }
.b-trait { border-color:var(--border) !important; }
.c-accent { color:var(--primary-press) !important; }
.c-alerte { color:#B0473F !important; }
.centre { text-align:center !important; }
.centre-flex { justify-content:center !important; }
.colonne { flex-direction:column !important; }
.couleur-heritee { color:inherit !important; }
.curseur-main { cursor:pointer !important; }
.d-bloc { display:block !important; }
.d-bloc-ligne { display:inline-block !important; }
.d-flex { display:flex !important; }
.d-grille { display:grid !important; }
.droite { text-align:right !important; }
.ecarte { justify-content:space-between !important; }
.f-alerte { background:#FBEAE7 !important; }
.f-doux { background:var(--soft) !important; }
.f-panneau { background:var(--panel2) !important; }
.fin-flex { justify-content:flex-end !important; }
.fw4 { font-weight:400 !important; }
.fw5 { font-weight:500 !important; }
.fw6 { font-weight:600 !important; }
.fw7 { font-weight:700 !important; }
.gap10 { gap:10px !important; }
.gap11 { gap:11px !important; }
.gap12 { gap:12px !important; }
.gap14 { gap:14px !important; }
.gap16 { gap:16px !important; }
.gap4 { gap:4px !important; }
.gap5 { gap:5px !important; }
.gap6 { gap:6px !important; }
.gap7 { gap:7px !important; }
.gap8 { gap:8px !important; }
.gap9 { gap:9px !important; }
.italique { font-style:italic !important; }
.l-100 { width:100% !important; }
.l-auto { width:auto !important; }
.lh1-3 { line-height:1.3 !important; }
.lh1-4 { line-height:1.4 !important; }
.lh1-45 { line-height:1.45 !important; }
.lh1-5 { line-height:1.5 !important; }
.lh1-55 { line-height:1.55 !important; }
.lh1-6 { line-height:1.6 !important; }
.lh1-65 { line-height:1.65 !important; }
.lh1-7 { line-height:1.7 !important; }
.lh1-75 { line-height:1.75 !important; }
.lmax110 { max-width:110px !important; }
.lmax120 { max-width:120px !important; }
.lmax130 { max-width:130px !important; }
.lmax150 { max-width:150px !important; }
.lmax160 { max-width:160px !important; }
.lmax180 { max-width:180px !important; }
.lmax190 { max-width:190px !important; }
.lmax200 { max-width:200px !important; }
.lmax210 { max-width:210px !important; }
.lmax220 { max-width:220px !important; }
.lmax230 { max-width:230px !important; }
.lmax240 { max-width:240px !important; }
.lmax260 { max-width:260px !important; }
.lmax310 { max-width:310px !important; }
.lmax520 { max-width:520px !important; }
.lmax680 { max-width:680px !important; }
.lmax760 { max-width:760px !important; }
.lmax820 { max-width:820px !important; }
.lmax88 { max-width:88px !important; }
.lmin110 { min-width:110px !important; }
.lmin120 { min-width:120px !important; }
.lmin130 { min-width:130px !important; }
.lmin140 { min-width:140px !important; }
.lmin150 { min-width:150px !important; }
.lmin170 { min-width:170px !important; }
.lmin180 { min-width:180px !important; }
.lmin190 { min-width:190px !important; }
.lmin200 { min-width:200px !important; }
.lmin220 { min-width:220px !important; }
.lmin230 { min-width:230px !important; }
.lmin240 { min-width:240px !important; }
.lmin260 { min-width:260px !important; }
.lmin64 { min-width:64px !important; }
.m0 { margin:0 !important; }
.mb10 { margin-bottom:10px !important; }
.mb12 { margin-bottom:12px !important; }
.mb14 { margin-bottom:14px !important; }
.mb16 { margin-bottom:16px !important; }
.mb18 { margin-bottom:18px !important; }
.mb20 { margin-bottom:20px !important; }
.mb22 { margin-bottom:22px !important; }
.mb24 { margin-bottom:24px !important; }
.mb4 { margin-bottom:4px !important; }
.mb5 { margin-bottom:5px !important; }
.mb6 { margin-bottom:6px !important; }
.mb8 { margin-bottom:8px !important; }
.ml10 { margin-left:10px !important; }
.ml6 { margin-left:6px !important; }
.ml8 { margin-left:8px !important; }
.mt10 { margin-top:10px !important; }
.mt11 { margin-top:11px !important; }
.mt12 { margin-top:12px !important; }
.mt14 { margin-top:14px !important; }
.mt16 { margin-top:16px !important; }
.mt18 { margin-top:18px !important; }
.mt2 { margin-top:2px !important; }
.mt20 { margin-top:20px !important; }
.mt22 { margin-top:22px !important; }
.mt24 { margin-top:24px !important; }
.mt26 { margin-top:26px !important; }
.mt28 { margin-top:28px !important; }
.mt3 { margin-top:3px !important; }
.mt30 { margin-top:30px !important; }
.mt32 { margin-top:32px !important; }
.mt4 { margin-top:4px !important; }
.mt5 { margin-top:5px !important; }
.mt6 { margin-top:6px !important; }
.mt7 { margin-top:7px !important; }
.mt8 { margin-top:8px !important; }
.mt9 { margin-top:9px !important; }
.pad0 { padding:0 !important; }
.pad12 { padding:12px !important; }
.pad16 { padding:16px !important; }
.pad18 { padding:18px !important; }
.pad20 { padding:20px !important; }
.pad22 { padding:22px !important; }
.pad24 { padding:24px !important; }
.pad26 { padding:26px !important; }
.pad30 { padding:30px !important; }
.pad8 { padding:8px !important; }
.pleine-ligne { grid-column:1/-1 !important; }
.plie { flex-wrap:wrap !important; }
.r10 { border-radius:10px !important; }
.r11 { border-radius:11px !important; }
.r12 { border-radius:12px !important; }
.r14 { border-radius:14px !important; }
.r18 { border-radius:18px !important; }
.r2 { border-radius:2px !important; }
.r7 { border-radius:7px !important; }
.r9 { border-radius:9px !important; }
.relatif { position:relative !important; }
.retours { white-space:pre-wrap !important; }
.retrecit { min-width:0 !important; }
.rogne { overflow:hidden !important; }
.sans-ombre { box-shadow:none !important; }
.sans-retour { white-space:nowrap !important; }
.sans-trait { text-decoration:none !important; }
.t10-5 { font-size:0.8125rem !important; }
.t11-5 { font-size:0.8125rem !important; }
.t12 { font-size:0.8125rem !important; }
.t12-5 { font-size:0.8125rem !important; }
.t13 { font-size:0.8125rem !important; }
.t13-5 { font-size:0.84375rem !important; }
.t14 { font-size:0.875rem !important; }
.t14-5 { font-size:0.90625rem !important; }
.t15 { font-size:0.9375rem !important; }
.t15-5 { font-size:0.96875rem !important; }
.t16 { font-size:1rem !important; }
.t17 { font-size:1.0625rem !important; }
.t18 { font-size:1.125rem !important; }
.t19 { font-size:1.1875rem !important; }
.t20 { font-size:1.25rem !important; }
.t21 { font-size:1.3125rem !important; }
.t22 { font-size:1.375rem !important; }
.t23 { font-size:1.4375rem !important; }
.t24 { font-size:1.5rem !important; }
.t25 { font-size:1.5625rem !important; }
.t26 { font-size:1.625rem !important; }
.t27 { font-size:1.6875rem !important; }
.t34 { font-size:2.125rem !important; }
/* ---- fin des utilitaires ---- */

/* ------------------------------------------------------ petits et mobiles */
@media (max-width: 780px) {
  .banner.volet-marque { min-height:0; padding:22px; }
  .topbar { align-items:center; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration:.01ms !important; animation-duration:.01ms !important; }
}

/* --- Aeration du texte (20/09/2026) ---------------------------------------
   Mesure sur les 73 ecrans : des lignes de lecture de 130 a 150 caracteres
   (apercus de messages, notes, encadres d'aide). Au-dela de ~78, l'oeil perd
   le debut de la ligne suivante. :where() ne pese rien : toute largeur deja
   posee ailleurs garde la main. */
.content :where(.faint, .note, .clf-meta, .retours, .bandeau-brouillon,
  .lh1-5, .lh1-55, .lh1-6, .lh1-65, .lh1-7, .lh1-75, [style*="pre-wrap"]) { max-width:78ch; }
.aide-repliee > div p { margin:0 0 10px; }
.aide-repliee > div p:last-child { margin-bottom:0; }

/* Guides en etapes repliables (20/09/2026) : un titre par ligne, on ouvre ce
   qu'on cherche. Meme famille que .aide-repliee. */
.etapes-aide { max-width:760px; }
.etape-aide { background:#fff; border:1px solid var(--trait); border-radius:14px; margin:0 0 10px; }
.etape-aide > summary { cursor:pointer; list-style:none; padding:14px 18px; font-weight:600; color:var(--encre); }
.etape-aide > summary::-webkit-details-marker { display:none; }
.etape-aide > summary::after { content:"+"; float:right; color:var(--terre); font-weight:700; }
.etape-aide[open] > summary::after { content:"–"; }
.etape-aide > p { margin:0; padding:0 18px 16px; font-size:.90625rem; line-height:1.65; color:var(--muted); max-width:72ch; }

/* Charte : pas de vert dans l'application (la visio, hors refonte, garde le
   sien sur qui parle). « Reussi, regle, solde » se dit en terre sur sable. */
:root { --ok:#7A3208; --ok-bg:#F4EADC; }
/* Sans le vert, « oui » et « peut-etre » se ressemblaient trop : le oui est PLEIN. */
.avail-btn.on-yes, .dispo-cell.c-yes, .resume-creneaux .cr.oui { background:#7A3208; color:#FBF6EF; border-color:#7A3208; }
.codes-message { margin-top:0; padding-left:18px; line-height:1.7; }
.codes-message li { margin:0 0 4px; }
/* Utilitaires nes du nettoyage des styles en ligne (21/09/2026) : ces declarations revenaient six fois ou plus dans les gabarits. */
.flex2 { flex:2 !important; }
.flex-fixe { flex:none !important; }
.op92 { opacity:.92 !important; }
.op9 { opacity:.9 !important; }
.c-muted { color:var(--muted) !important; }
.c-ok { color:var(--ok) !important; }
.redim-v { resize:vertical !important; }
.chiffres-alignes { font-variant-numeric:tabular-nums !important; }
.ml-auto { margin-left:auto !important; }
.pb18 { padding-bottom:18px !important; }
.trait-bas { border-bottom:1px solid var(--border) !important; }
.trait-haut { border-top:1px solid var(--border) !important; }