/* ════════════════════════════════════════════════════════════
   L'ATELIER CONODOR
   Le troisième atelier du Studio, pour la gestion de l'association.

   La charte Conodor est déclinée en rose carnaval, mais le logo
   réellement utilisé est le TURQUOISE — c'est lui qui fait foi.
   Typos de la charte : Bebas Neue pour les titres, Montserrat
   pour le texte courant.

   Le MADRAS est en accent, jamais en fond : un tissu à carreaux
   derrière du texte se lit dix secondes et fatigue au bout de
   deux minutes. Il tient les liserés, les séparateurs, et il
   prend toute la place dans l'animation d'entrée — là où on ne
   lit rien.
   ════════════════════════════════════════════════════════════ */

body.espace-conodor {
  --noir:    #02090C;
  --bg:      #04141A;                    /* nuit turquoise */
  --panel:   #07222B;
  --panel-2: #0A2E39;
  --line:    rgba(234,247,247,.10);
  --border:  #14414C;
  --txt:     #EAF7F7;
  --soft:    rgba(234,247,247,.66);
  --mute:    rgba(234,247,247,.40);
  --faint:   rgba(234,247,247,.18);
  --blue:    #2BD9D2;                    /* le turquoise prend la place du bleu */
  --blue-dk: #1F9E86;
  --primaire: 43,217,210;                /* et tous les fonds translucides suivent */
  --serif:   'Bebas Neue', 'Montserrat', sans-serif;
  --sans:    'Montserrat', -apple-system, 'Segoe UI', sans-serif;
  --tan:     #E4B209;                    /* le jaune du madras, pour les accents */
}

/* Bebas est une capitale étroite : elle n'a pas d'italique et ses lettres se
   touchent. Sans cet écartement, les titres se lisent comme un bloc. */
body.espace-conodor .gw-titre,
body.espace-conodor h1,
body.espace-conodor h2 {
  letter-spacing: .03em;
}
body.espace-conodor .gw-titre em,
body.espace-conodor h1 em { font-style: normal; color: var(--blue); }

/* Le fond : la nuit, deux halos, et le madras en filigrane très bas —
   assez pour qu'on sente le tissu, pas assez pour qu'on le lise. */
body.espace-conodor::before {
  content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(58vw 42vh at 8% 0%, rgba(43,217,210,.13), transparent 66%),
    radial-gradient(50vw 40vh at 94% 98%, rgba(228,178,9,.09), transparent 70%);
}
body.espace-conodor::after {
  content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: url('/assets/img/madras.svg') repeat;
  background-size: 240px;
  opacity: .035;
}

/* Le liseré de madras sous la barre : c'est le seul endroit où le tissu est
   à pleine couleur, et il ne fait que trois pixels. */
body.espace-conodor .barre {
  border-bottom: 0;
  box-shadow: inset 0 -3px 0 0 transparent;
}
body.espace-conodor .barre::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
  background: url('/assets/img/madras-bande.svg') repeat-x;
  background-size: auto 3px;
  opacity: .9;
}

/* ── LE MENU DES TROIS ATELIERS ─────────────────────────────
   Il vit dans studio.css : il s'affiche dans les trois ateliers. */

/* ── LES SORTIES ────────────────────────────────────────────
   Repris le 17/09/2026. Trois temps : la prochaine sortie en grand, ce
   qu'il reste à régler, puis le parcours — piste, devis, confirmée,
   jouée — une colonne par étape. L'état donne sa couleur à tout ce qui
   le concerne : c'est ce qu'on cherche en premier. */
.cnd-etat {
  padding: .1rem .5rem; border-radius: 999px;
  font-size: 9.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: var(--etat, var(--blue));
  background: color-mix(in srgb, var(--etat, var(--blue)) 14%, transparent);
}

/* ── la prochaine ── */
.cnd-prochaine {
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: 150px minmax(0, 1fr) auto; gap: 1.8rem; align-items: stretch;
  margin: 0 0 2.4rem; padding: 1.6rem 1.7rem 1.5rem; border-radius: 16px;
  border: 1px solid var(--border);
  background: radial-gradient(90% 150% at 0% 0%, color-mix(in srgb, var(--etat, var(--blue)) 15%, transparent), transparent 62%),
              var(--panel);
}
/* le madras en haut du bloc, comme en haut des fenêtres */
.cnd-prochaine::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px;
  background: url('/assets/img/madras-bande.svg') repeat-x; background-size: auto 3px;
}
.cnd-prochaine.vide { display: block; color: var(--soft); font-size: 14px; }
.cnd-pro-date {
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  padding-right: 1.6rem; border-right: 1px solid var(--line);
}
.cnd-pro-jour { font-size: 11px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--soft); }
.cnd-pro-date b { font-family: var(--serif); font-weight: 400; font-size: 5.4rem; line-height: .88; color: var(--txt); }
.cnd-pro-mois { font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--blue); }
.cnd-pro-heure { margin-top: .45rem; font-size: 12px; color: var(--mute); font-variant-numeric: tabular-nums; }
.cnd-pro-corps { display: flex; flex-direction: column; justify-content: center; min-width: 0; }
.cnd-pro-sur { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem .7rem; }
.cnd-pro-sur .micro { color: var(--mute); }
.cnd-pro-dans {
  padding: .16rem .6rem; border-radius: 999px; font-size: 11px; font-weight: 600;
  color: var(--blue); background: color-mix(in srgb, var(--blue) 12%, transparent);
}
.cnd-pro-dans.proche { color: var(--noir); background: var(--tan); }
.cnd-pro-nom {
  margin-top: .35rem; font-family: var(--serif); font-weight: 400;
  font-size: clamp(2.1rem, 3.6vw, 3.2rem); line-height: 1; letter-spacing: .03em; color: var(--txt);
}
.cnd-pro-ou { margin-top: .3rem; color: var(--soft); font-size: 13.5px; }
.cnd-pro-faits { display: flex; flex-wrap: wrap; gap: .7rem 2.2rem; margin-top: 1.1rem; }
.cnd-pro-faits div { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.cnd-pro-faits div.large { flex-basis: 100%; }
.cnd-pro-faits dt { font-size: 9.5px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--mute); }
.cnd-pro-faits dd { margin: 0; font-size: 13px; color: var(--txt); overflow-wrap: anywhere; }
.cnd-pro-faits a { color: var(--blue); }
.cnd-pro-faits a:hover { text-decoration: underline; text-underline-offset: 3px; }
.cnd-manque { color: var(--faint); font-style: italic; }
.cnd-pro-fin {
  display: flex; flex-direction: column; align-items: flex-end; justify-content: center; gap: .6rem;
  padding-left: 1.5rem; border-left: 1px solid var(--line);
}
.cnd-pro-cachet {
  font-family: var(--serif); font-size: 2.5rem; line-height: 1; letter-spacing: .02em;
  color: var(--tan); white-space: nowrap;
}
.cnd-pro-cachet i { font-family: var(--sans); font-style: normal; font-size: 12px; letter-spacing: 0; color: var(--mute); }
.cnd-pro-suite {
  padding: .65rem 1.05rem; border-radius: 9px; white-space: nowrap;
  background: var(--blue); color: var(--noir);
  font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  transition: filter .2s, transform .2s;
}
.cnd-pro-suite:hover { filter: brightness(1.12); transform: translateY(-1px); }
.cnd-pro-ouvrir {
  padding: .5rem .9rem; border-radius: 9px; white-space: nowrap;
  border: 1px solid var(--border); color: var(--soft);
  font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
}
.cnd-pro-ouvrir:hover { border-color: var(--blue); color: var(--txt); }

/* ── à régler ── */
.cnd-rappels.gw-bloc { margin-top: 0; }
.cnd-rappels-liste { display: flex; flex-direction: column; gap: .45rem; }
.cnd-rappel {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .5rem 1rem;
  padding: .65rem .8rem .65rem 1rem; border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--tan) 30%, var(--border));
  background: color-mix(in srgb, var(--tan) 6%, transparent);
}
.cnd-rappel p { color: var(--txt); font-size: 13px; line-height: 1.5; }
.cnd-rappel-actions { display: flex; flex-wrap: wrap; gap: .4rem; }
.cnd-rappel-actions button {
  padding: .38rem .75rem; border-radius: 8px; white-space: nowrap;
  border: 1px solid var(--border); background: rgba(255,255,255,.02); color: var(--txt);
  font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
}
.cnd-rappel-actions button:first-child {
  border-color: color-mix(in srgb, var(--blue) 55%, var(--border));
  background: color-mix(in srgb, var(--blue) 12%, transparent);
}
.cnd-rappel-actions button:hover { border-color: var(--blue); }

/* ── le parcours ── */
.cnd-parcours { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .8rem; align-items: start; }
.cnd-col {
  min-width: 0; padding: .7rem .6rem .6rem; border-radius: 14px;
  border: 1px solid var(--line); background: color-mix(in srgb, var(--panel) 55%, transparent);
}
.cnd-col-tete {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: .1rem .5rem;
  margin-bottom: .6rem; padding: .1rem .35rem .65rem; border-bottom: 2px solid var(--etat);
}
.cnd-col-tete h3 { font-family: var(--serif); font-weight: 400; font-size: 1.35rem; letter-spacing: .04em; color: var(--txt); }
.cnd-col-n { font-size: 12px; font-weight: 700; color: var(--etat); }
.cnd-col-tete p { grid-column: 1 / -1; font-size: 11px; color: var(--mute); }
.cnd-col-corps { display: flex; flex-direction: column; gap: .5rem; }
.cnd-col-vide { padding: .8rem 0; text-align: center; color: var(--faint); }
.cnd-col-plus { padding: .2rem 0; text-align: center; font-size: 11px; color: var(--mute); }

.cnd-pc {
  overflow: hidden; border-radius: 11px; border: 1px solid var(--border); background: var(--panel);
  transition: border-color .2s, transform .2s var(--ease);
}
.cnd-pc:hover { border-color: color-mix(in srgb, var(--etat) 60%, var(--border)); transform: translateY(-2px); }
.cnd-pc.passee { border-style: dashed; }
.cnd-pc-ouvrir {
  display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: start; gap: .7rem;
  width: 100%; padding: .7rem .75rem; text-align: left;
}
.cnd-pc-date {
  display: flex; flex-direction: column; align-items: center; padding: .2rem 0 .25rem;
  border-radius: 8px; background: color-mix(in srgb, var(--etat) 13%, transparent);
}
.cnd-pc-date b { font-family: var(--serif); font-weight: 400; font-size: 1.6rem; line-height: 1; color: var(--txt); }
.cnd-pc-date i { font-style: normal; font-size: 9px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--soft); }
.cnd-pc-date u { text-decoration: none; font-size: 9px; font-weight: 700; color: var(--tan); }
.cnd-pc-mots { display: flex; flex-direction: column; gap: .12rem; min-width: 0; }
.cnd-pc-nom { font-family: var(--serif); font-size: 1.15rem; line-height: 1.1; letter-spacing: .03em; color: var(--txt); overflow-wrap: anywhere; }
.cnd-pc-quand { font-size: 11px; color: var(--soft); }
.cnd-pc.passee .cnd-pc-quand { color: var(--tan); }
.cnd-pc-ou { font-size: 11px; color: var(--mute); }
.cnd-pc-cachet { font-size: 12.5px; font-weight: 700; color: var(--tan); white-space: nowrap; font-variant-numeric: tabular-nums; }
.cnd-pc-bas {
  display: flex; flex-wrap: wrap; align-items: center; gap: .35rem;
  padding: .5rem .6rem .55rem .75rem; border-top: 1px solid var(--line);
}
.cnd-pc-piece {
  padding: .2rem .5rem; border-radius: 6px;
  font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--blue); background: color-mix(in srgb, var(--blue) 12%, transparent);
}
.cnd-pc-piece.facture { color: var(--tan); background: color-mix(in srgb, var(--tan) 12%, transparent); }
.cnd-pc-piece:hover { filter: brightness(1.2); }
.cnd-pc-suite {
  margin-left: auto; padding: .3rem .6rem; border-radius: 7px; white-space: nowrap;
  border: 1px solid color-mix(in srgb, var(--etat) 45%, transparent); color: var(--etat);
  font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  transition: background .15s, color .15s;
}
.cnd-pc-suite:hover { background: color-mix(in srgb, var(--etat) 18%, transparent); color: var(--txt); }
.cnd-annulees { margin-top: 1rem; }
.cnd-annulees summary { cursor: pointer; padding: .4rem .2rem; color: var(--mute); font-size: 12px; }
.cnd-annulees-liste {
  display: grid; gap: .5rem; margin-top: .5rem; opacity: .65;
  grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr));
}

/* ── LE GROUPE ──────────────────────────────────────────────── */
.cnd-groupe {
  display: grid; gap: .7rem;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
}
.cnd-membre {
  display: flex; flex-direction: column; gap: .15rem; text-align: left;
  padding: .9rem 1rem; border-radius: 12px;
  border: 1px solid var(--border); background: var(--panel); cursor: pointer;
  transition: border-color .2s var(--ease), background .2s var(--ease);
}
.cnd-membre:hover { background: var(--panel-2); border-color: var(--blue); }
.cnd-membre-nom {
  font-family: var(--serif); font-size: 1.25rem; color: var(--txt); letter-spacing: .03em;
}
.cnd-membre-role { color: var(--blue); }
.cnd-membre-tel { font-size: 12.5px; color: var(--soft); font-variant-numeric: tabular-nums; }
.cnd-membre-depuis { color: var(--mute); }

/* Les rôles et les instruments (17/09/2026) : les instruments d'une fiche
   en pastilles, puis le tableau des instruments — qui tient quoi, et ce
   qui manque. */
.cnd-membre-instr { display: flex; flex-wrap: wrap; gap: .25rem; margin: .35rem 0 .15rem; }
.cnd-puce-lue {
  padding: .12rem .5rem; border-radius: 999px;
  font-size: 11.5px; line-height: 1.45; color: var(--txt);
  background: color-mix(in srgb, var(--blue) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--blue) 32%, transparent);
}
.cnd-pupitres {
  display: grid; gap: .6rem;
  grid-template-columns: repeat(auto-fill, minmax(min(165px, 100%), 1fr));
}
.cnd-pupitre {
  display: flex; flex-direction: column; gap: .15rem;
  padding: .8rem .95rem; border-radius: 12px;
  border: 1px solid var(--border); background: var(--panel);
}
.cnd-pupitre b {
  font-family: var(--serif); font-size: 2rem; line-height: 1; color: var(--blue);
}
.cnd-pupitre-mot {
  font-size: 10px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--txt);
}
.cnd-pupitre-qui { font-size: 12.5px; color: var(--soft); }
.cnd-pupitre.vide b { color: var(--mute); }
.cnd-pupitre.vide .cnd-pupitre-qui { color: var(--mute); font-style: italic; }
.cnd-partis { margin-top: 1.8rem; }
.cnd-partis summary { cursor: pointer; padding: .4rem .2rem; color: var(--mute); font-size: 12px; }
.cnd-partis .cnd-groupe { margin-top: .5rem; opacity: .65; }

/* ── LA CAISSE ──────────────────────────────────────────────
   Repris le 17/09/2026 : le solde et d'où il vient (la courbe, la
   répartition par genre), une ligne se note sans ouvrir de fenêtre, le
   registre se lit par mois avec le solde après chaque mouvement — et
   au centime près. */
.cnd-solde {
  position: relative; overflow: hidden;
  margin: 2rem 0 2.6rem; padding: 1.4rem 1.6rem;
  border-radius: 14px; border: 1px solid var(--border); background: var(--panel);
}
/* le madras signe le bloc, sur trois pixels au bord */
.cnd-solde::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: url('/assets/img/madras-debout.svg') repeat-y;
  background-size: 3px auto;
}
.cc-tableau {
  display: grid; grid-template-columns: minmax(220px, .8fr) minmax(0, 1.35fr) minmax(250px, .9fr);
  gap: 2rem; align-items: stretch;
}
.cc-gauche { display: flex; flex-direction: column; justify-content: space-between; gap: 1.2rem; }
.cnd-solde-gros { display: flex; flex-direction: column; gap: .3rem; }
.cnd-solde-gros b {
  font-family: var(--serif); font-size: 3.6rem; line-height: .95; white-space: nowrap;
  color: var(--blue); letter-spacing: .02em; font-variant-numeric: tabular-nums;
}
.cnd-solde.dans-le-rouge .cnd-solde-gros b { color: #FF6B6B; }
.cc-depuis { font-size: 11.5px; color: var(--mute); }
.cnd-solde-detail { display: flex; flex-wrap: wrap; gap: .8rem 1.6rem; }
.cnd-solde-detail div { display: flex; flex-direction: column; gap: .2rem; }
.cnd-solde-detail b {
  font-family: var(--sans); font-size: 1.05rem; font-weight: 700; white-space: nowrap;
  color: var(--txt); font-variant-numeric: tabular-nums;
}
.cc-plus { color: var(--blue); }
.cc-moins { color: #FF8E8E; }
.cnd-solde-detail b.cc-plus { color: var(--blue); }
.cnd-solde-detail b.cc-moins { color: #FF8E8E; }

.cc-milieu {
  display: flex; flex-direction: column; gap: .7rem; min-width: 0;
  padding: 0 2rem; border-left: 1px solid var(--line); border-right: 1px solid var(--line);
}
.cc-courbe { width: 100%; height: 150px; color: var(--blue); overflow: visible; }
.cc-aire { fill: url(#cc-degrade); }
.cc-trait { fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.cc-zero { stroke: rgba(255,107,107,.45); stroke-dasharray: 4 4; vector-effect: non-scaling-stroke; }
.cc-axe { display: flex; justify-content: space-between; gap: 1rem; font-size: 10.5px; color: var(--mute); }
.cc-droite { display: flex; flex-direction: column; gap: .42rem; min-width: 0; }
.cc-sous-titre { margin-top: .7rem; }
.cc-barre { display: grid; grid-template-columns: 80px minmax(0, 1fr) auto; align-items: center; gap: .6rem; font-size: 12px; }
.cc-barre-nom { color: var(--soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cc-barre-rail { height: 6px; border-radius: 6px; overflow: hidden; background: rgba(255,255,255,.06); }
.cc-barre-rail i { display: block; height: 100%; border-radius: 6px; background: #FF8E8E; }
.cc-barre.entree .cc-barre-rail i { background: var(--blue); }
.cc-barre-montant { color: var(--txt); font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
.cc-rien { color: var(--mute); font-size: 12px; }

/* ── noter une ligne ── */
.cc-ajout {
  display: grid; grid-template-columns: auto minmax(0, 1fr) 118px 140px 150px auto;
  align-items: center; gap: .5rem; margin-bottom: 1.1rem; padding: .6rem;
  border-radius: 12px; border: 1px solid var(--border); background: var(--panel);
  transition: border-color .2s;
}
.cc-ajout:focus-within { border-color: color-mix(in srgb, var(--blue) 50%, var(--border)); }
.cc-ajout input, .cc-ajout select {
  width: 100%; padding: .5rem .65rem; border-radius: 8px; outline: none;
  border: 1px solid var(--border); background: var(--noir); color: var(--txt);
  font-family: var(--sans); font-size: 13px; color-scheme: dark;
}
.cc-ajout input:focus, .cc-ajout select:focus { border-color: var(--blue); }
.cc-ajout input[name="montant"] { text-align: right; font-variant-numeric: tabular-nums; }
.cc-sens { display: inline-flex; padding: 2px; border-radius: 9px; border: 1px solid var(--border); background: var(--noir); }
.cc-sens button {
  padding: .42rem .72rem; border-radius: 7px; white-space: nowrap;
  font-size: 11px; font-weight: 700; letter-spacing: .05em; color: var(--soft);
}
.cc-sens button[data-sens="entree"].ici { color: var(--blue); background: color-mix(in srgb, var(--blue) 20%, transparent); }
.cc-sens button[data-sens="depense"].ici { color: #FF8E8E; background: rgba(255,107,107,.18); }

/* ── filtrer ── */
.cc-filtres { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-bottom: .9rem; }
.cc-puces { display: inline-flex; gap: .3rem; }
.cc-puces button {
  padding: .36rem .75rem; border-radius: 999px; border: 1px solid var(--line);
  color: var(--soft); font-size: 12px; transition: all .15s;
}
.cc-puces button:hover { color: var(--txt); border-color: var(--border); }
.cc-puces button.ici { background: var(--txt); border-color: var(--txt); color: var(--noir); }
.cc-filtres select, .cc-filtres input {
  padding: .4rem .65rem; border-radius: 8px; outline: none;
  border: 1px solid var(--border); background: var(--panel); color: var(--txt);
  font-family: var(--sans); font-size: 12px;
}
.cc-filtres input { margin-left: auto; width: 200px; }
.cc-filtres select:focus, .cc-filtres input:focus { border-color: var(--blue); }

/* ── le registre ── */
.cc-registre { display: flex; flex-direction: column; gap: 1.4rem; }
.cc-mois-tete {
  display: flex; align-items: baseline; gap: 1rem;
  margin-bottom: .3rem; padding: 0 .8rem .45rem; border-bottom: 1px solid var(--line);
}
.cc-mois-tete h3 {
  margin-right: auto; font-family: var(--serif); font-weight: 400;
  font-size: 1.4rem; letter-spacing: .05em; color: var(--txt);
}
.cc-mois-tete span { font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cnd-ligne {
  display: grid; grid-template-columns: 64px minmax(0, 1fr) 96px 120px 104px;
  align-items: baseline; gap: 1rem; width: 100%; text-align: left;
  padding: .55rem .8rem; border-radius: 8px;
  border: 1px solid transparent; cursor: pointer;
  transition: background .18s, border-color .18s;
}
.cnd-ligne:hover { background: rgba(255,255,255,.04); border-color: var(--border); }
.cnd-ligne-date { color: var(--mute); font-size: 11.5px; font-variant-numeric: tabular-nums; }
.cnd-ligne-quoi { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--txt); font-size: 13.5px; }
.cc-sortie {
  margin-left: .5rem; padding: .08rem .45rem; border-radius: 5px; font-style: normal;
  font-size: 10.5px; color: var(--tan); background: color-mix(in srgb, var(--tan) 12%, transparent);
}
.cc-note {
  margin-left: .4rem; padding: 0 .3rem; border-radius: 4px; font-style: normal;
  font-size: 10px; color: var(--mute); border: 1px solid var(--line);
}
.cnd-ligne-genre { font-size: 9.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--mute); }
.cnd-ligne-montant { text-align: right; font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.cnd-ligne.entree .cnd-ligne-montant { color: var(--blue); }
.cnd-ligne.depense .cnd-ligne-montant { color: #FF8E8E; }
.cc-apres { text-align: right; font-size: 11.5px; color: var(--mute); white-space: nowrap; font-variant-numeric: tabular-nums; }

/* ── LE FORMULAIRE ──────────────────────────────────────────── */
.cnd-modale {
  position: fixed; inset: 0; z-index: 90;
  display: grid; place-items: center; padding: 1.5rem;
  background: rgba(2,9,12,.72); backdrop-filter: blur(6px);
}
.cnd-boite {
  width: min(760px, 100%); max-height: 88vh; overflow-y: auto;
  padding: 1.7rem; border-radius: 16px;
  border: 1px solid var(--border); background: var(--panel);
  box-shadow: 0 40px 80px -30px rgba(0,0,0,.8);
  position: relative;
}
.cnd-boite::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px;
  border-radius: 16px 16px 0 0;
  background: url('/assets/img/madras-bande.svg') repeat-x;
  background-size: auto 3px;
}
.cnd-modale-tete { margin-bottom: 1.3rem; }
.cnd-modale-tete h2 {
  font-family: var(--serif); font-size: 1.9rem; color: var(--txt); letter-spacing: .03em;
}
.cnd-modale-tete p { color: var(--mute); margin-top: .2rem; }

.cnd-grille {
  display: grid; gap: .9rem;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}
.cnd-large { grid-column: 1 / -1; }
.cnd-form .champ { display: flex; flex-direction: column; gap: .3rem; }
.cnd-form .champ > span {
  font-size: 9.5px; font-weight: 700; letter-spacing: .18em;
  text-transform: uppercase; color: var(--mute);
}
.cnd-form input, .cnd-form select, .cnd-form textarea {
  width: 100%; padding: .55rem .7rem; border-radius: 8px;
  border: 1px solid var(--border); background: var(--noir);
  color: var(--txt); font-family: var(--sans); font-size: 13px;
  transition: border-color .2s;
}
.cnd-form input:focus, .cnd-form select:focus, .cnd-form textarea:focus {
  outline: none; border-color: var(--blue);
}
.cnd-form textarea { resize: vertical; min-height: 62px; }

/* Plusieurs choix d'un coup (les rôles, les instruments) : des cases à
   cocher habillées en pastilles. Sélecteurs en `.cnd-form` : la règle des
   champs, plus haut, donne sinon à la case 100 % de large. */
.cnd-form .cnd-puces { border: 0; padding: 0; margin: 0; min-width: 0; }
.cnd-form .cnd-puces legend {
  padding: 0; margin-bottom: .45rem;
  font-size: 9.5px; font-weight: 700; letter-spacing: .18em;
  text-transform: uppercase; color: var(--mute);
}
.cnd-puces-liste { display: flex; flex-wrap: wrap; gap: .4rem; }
.cnd-form .cnd-puce { position: relative; cursor: pointer; }
.cnd-form .cnd-puce input {
  position: absolute; inset: 0; width: 100%; height: 100%;
  margin: 0; padding: 0; opacity: 0; cursor: pointer;
}
.cnd-puce span {
  display: inline-block; padding: .45rem .85rem; border-radius: 999px;
  border: 1px solid var(--border); background: var(--noir); color: var(--soft);
  font-size: 13px; line-height: 1.3;
  transition: background .15s, border-color .15s, color .15s, opacity .15s;
}
.cnd-puce:hover span { border-color: var(--blue); color: var(--txt); }
.cnd-form .cnd-puce input:checked + span {
  background: var(--blue); border-color: var(--blue); color: var(--noir); font-weight: 600;
}
.cnd-form .cnd-puce input:focus-visible + span { outline: 2px solid var(--blue); outline-offset: 2px; }
.cnd-puces-aide { margin-top: .45rem; font-size: 11.5px; color: var(--mute); }
.cnd-puces.eteint .cnd-puces-liste { opacity: .45; }

.cnd-actions { display: flex; align-items: center; gap: .6rem; margin-top: 1.5rem; }
.cnd-espace { flex: 1; }
.cnd-actions button {
  padding: .55rem 1.1rem; border-radius: 8px; cursor: pointer;
  border: 1px solid var(--border); background: transparent; color: var(--soft);
  font-family: var(--sans); font-size: 11px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  transition: border-color .2s, color .2s, background .2s;
}
.cnd-actions button:hover { border-color: var(--blue); color: var(--txt); }
.cnd-actions .cnd-sup { border-color: transparent; color: rgba(255,140,140,.7); }
.cnd-actions .cnd-sup:hover { border-color: #FF6B6B; color: #FF8E8E; background: rgba(255,107,107,.08); }

/* ── LES DEVIS ET LES FACTURES ─────────────────────────────────
   Le devis en turquoise, la facture au jaune du madras — la couleur des
   cachets : c'est elle qui fait entrer l'argent. */

/* sur la carte d'une sortie : ce qui a déjà été émis */
.cnd-sortie-pieces {
  font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--tan); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* dans la fiche d'une sortie */
.cnd-pieces-sortie {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .8rem;
  margin-top: 1.2rem; padding: .85rem 1rem; border-radius: 10px;
  border: 1px dashed var(--border); background: color-mix(in srgb, var(--panel-2) 60%, transparent);
}
.cnd-pieces-sortie-mot {
  font-size: 9.5px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--mute);
}
.cnd-pieces-sortie-liste { display: flex; flex-wrap: wrap; gap: .45rem; min-width: 0; }
.cnd-piece-puce {
  display: inline-flex; align-items: baseline; gap: .45rem; cursor: pointer;
  padding: .3rem .65rem; border-radius: 999px; border: 1px solid var(--border);
  background: transparent; color: var(--txt); font: 600 11.5px var(--sans);
}
.cnd-piece-puce i { font-style: normal; color: var(--tan); }
.cnd-piece-puce:hover { border-color: var(--blue); }
.cnd-pieces-sortie-actions { display: flex; gap: .45rem; }
.cnd-pieces-sortie-actions button {
  padding: .45rem .8rem; border-radius: 8px; cursor: pointer; white-space: nowrap;
  border: 1px solid color-mix(in srgb, var(--blue) 45%, var(--border));
  background: color-mix(in srgb, var(--blue) 10%, transparent); color: var(--txt);
  font: 700 10.5px var(--sans); letter-spacing: .1em; text-transform: uppercase;
}
.cnd-pieces-sortie-actions button:hover { background: color-mix(in srgb, var(--blue) 22%, transparent); }

/* la liste, sur l'écran des sorties */
.gw-bloc-tete .btn-fin + .btn-fin { margin-left: 0; }
.cnd-pieces { display: grid; gap: .45rem; }
/* Chaque ligne est sa propre grille : une dernière colonne en `auto` y prenait
   la largeur de SON contenu, plus large sur une facture « acquittée », et la
   date et le montant de cette ligne-là se décalaient. Toutes les colonnes ont
   donc une largeur fixe, sauf celle du client. */
.cnd-piece {
  display: grid; align-items: center; gap: .9rem;
  grid-template-columns: 74px 104px minmax(0, 1fr) 110px 110px 250px;
  padding: .7rem 1rem; border-radius: 10px;
  border: 1px solid var(--line); border-left: 3px solid var(--blue);
  background: color-mix(in srgb, var(--panel) 70%, transparent);
}
.cnd-piece.facture { border-left-color: var(--tan); }
.cnd-piece-type {
  justify-self: start; padding: .18rem .5rem; border-radius: 5px;
  font-size: 9.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--blue); background: color-mix(in srgb, var(--blue) 13%, transparent);
}
.cnd-piece.facture .cnd-piece-type { color: var(--tan); background: color-mix(in srgb, var(--tan) 13%, transparent); }
.cnd-piece-num { font-family: var(--serif); font-size: 1.25rem; letter-spacing: .04em; color: var(--txt); }
.cnd-piece-client { display: flex; flex-direction: column; min-width: 0; }
.cnd-piece-client b, .cnd-piece-client i {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cnd-piece-client b { font-weight: 600; font-size: 13px; color: var(--txt); }
.cnd-piece-client i { font-style: normal; font-size: 11.5px; color: var(--mute); }
.cnd-piece-date { font-size: 12px; color: var(--soft); }
.cnd-piece-montant { font-size: 13.5px; font-weight: 700; color: var(--txt); text-align: right; font-variant-numeric: tabular-nums; }
.cnd-piece-fin { display: flex; align-items: center; justify-content: flex-end; gap: .4rem; }
.cnd-piece-etat {
  margin-right: .3rem; font-size: 9.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--tan);
}
.cnd-piece-etat.ok { color: #3FBF78; }
.cnd-piece-fin button {
  padding: .35rem .7rem; border-radius: 7px; cursor: pointer;
  border: 1px solid var(--border); background: transparent; color: var(--soft);
  font: 700 10px var(--sans); letter-spacing: .1em; text-transform: uppercase;
}
.cnd-piece-fin button:hover { border-color: var(--blue); color: var(--txt); }

/* l'éditeur : au-dessus de la fiche de sortie (90), sous la palette (96) */
.cnd-modale-piece { z-index: 92; }
.cnd-boite-piece { width: min(900px, 100%); max-height: 92vh; }
.cnd-type {
  display: inline-flex; padding: 3px; margin-bottom: 1.1rem; border-radius: 10px;
  border: 1px solid var(--border); background: var(--noir);
}
.cnd-type button {
  padding: .45rem 1.2rem; border-radius: 7px; border: 0; cursor: pointer;
  background: transparent; color: var(--soft);
  font: 700 11px var(--sans); letter-spacing: .14em; text-transform: uppercase;
}
.cnd-type button.ici[data-type="devis"]   { background: var(--blue); color: var(--noir); }
.cnd-type button.ici[data-type="facture"] { background: var(--tan);  color: var(--noir); }

.cnd-postes-tete {
  display: flex; align-items: baseline; gap: .8rem;
  margin: 1.5rem 0 .7rem; padding-bottom: .5rem; border-bottom: 1px solid var(--line);
}
.cnd-postes-tete span {
  font-size: 9.5px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--soft);
  white-space: nowrap;
}
/* l'aide se lit comme une phrase : .micro la mettait en capitales espacées */
.cnd-postes-tete em {
  font-style: normal; font-size: 12px; font-weight: 400;
  letter-spacing: 0; text-transform: none; color: var(--mute);
}
.cnd-postes { display: grid; gap: .7rem; }
.cnd-poste {
  margin: 0; min-width: 0; padding: .8rem .9rem .95rem; border-radius: 10px;
  border: 1px solid var(--border); background: color-mix(in srgb, var(--panel-2) 55%, transparent);
}
.cnd-poste-tete { display: flex; align-items: center; justify-content: space-between; margin-bottom: .55rem; }
.cnd-poste-tete b { font-size: 9.5px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--mute); }
.cnd-poste-sup {
  width: 26px; height: 26px; border-radius: 7px; cursor: pointer; line-height: 1;
  border: 1px solid transparent; background: transparent; color: var(--mute); font-size: 18px;
}
.cnd-poste-sup:hover { border-color: #FF6B6B; color: #FF8E8E; }
.cnd-poste-grille { display: grid; gap: .7rem; grid-template-columns: minmax(0, 1fr) 150px; }
.cnd-ajout-poste {
  margin-top: .7rem; padding: .55rem 1rem; border-radius: 8px; cursor: pointer; width: 100%;
  border: 1px dashed var(--border); background: transparent; color: var(--soft);
  font: 700 10.5px var(--sans); letter-spacing: .12em; text-transform: uppercase;
}
.cnd-ajout-poste:hover { border-color: var(--blue); color: var(--txt); }
.cnd-grille-bas { margin-top: 1.3rem; }
.cnd-form input[readonly] { color: var(--soft); border-style: dashed; }
.cnd-form input:disabled { opacity: .45; }

.cnd-total {
  display: flex; align-items: baseline; gap: .8rem; flex-wrap: wrap;
  margin-top: 1.3rem; padding: .9rem 1.1rem; border-radius: 10px;
  border: 1px solid var(--border); background: var(--noir);
}
.cnd-total > span:first-child {
  font-size: 9.5px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--mute);
}
.cnd-total b { font-family: var(--serif); font-size: 2rem; letter-spacing: .03em; color: var(--tan); font-weight: 400; }
.cnd-total em { font-style: normal; font-size: 12px; color: var(--soft); }

/* tablette : sans la date, les colonnes fixes laissent encore de la place au client */
@media (max-width: 1000px) {
  .cnd-piece { grid-template-columns: 74px 104px minmax(0, 1fr) 110px 250px; }
  .cnd-piece-date { display: none; }
}

@media (max-width: 1200px) {
  .cnd-parcours { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1150px) {
  .cc-tableau { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .cc-milieu { grid-column: 1 / -1; order: 3; padding: 1rem 0 0; border: 0; border-top: 1px solid var(--line); }
  .cc-ajout { grid-template-columns: auto minmax(0, 1fr) 118px; }
}
@media (max-width: 900px) {
  .cnd-prochaine { grid-template-columns: 116px minmax(0, 1fr); }
  .cnd-pro-fin {
    grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: flex-start;
    padding: 1rem 0 0; border-left: 0; border-top: 1px solid var(--line);
  }
  .cnd-pro-cachet { margin-right: auto; }
  .cnd-pro-date b { font-size: 4rem; }
}
@media (max-width: 700px) {
  .cnd-pieces-sortie { grid-template-columns: 1fr; }
  .cnd-piece { grid-template-columns: auto 1fr auto; row-gap: .35rem; }
  .cnd-piece-client { grid-column: 1 / -1; order: 3; }
  .cnd-piece-date { display: block; order: 4; }
  .cnd-piece-montant { order: 5; text-align: left; }
  .cnd-piece-fin { grid-column: 1 / -1; order: 6; justify-content: flex-start; }
  .cnd-poste-grille { grid-template-columns: 1fr; }
  .cnd-actions { flex-wrap: wrap; }

  .cnd-parcours { grid-template-columns: 1fr; }
  .cnd-prochaine { grid-template-columns: 1fr; gap: 1rem; padding: 1.3rem 1.1rem 1.1rem; }
  .cnd-pro-date {
    flex-direction: row; flex-wrap: wrap; align-items: baseline; justify-content: flex-start; gap: .2rem .6rem;
    padding: 0 0 .8rem; border-right: 0; border-bottom: 1px solid var(--line); text-align: left;
  }
  .cnd-pro-date b { font-size: 2.8rem; }
  .cnd-rappel { padding: .7rem .8rem; }

  .cc-tableau { grid-template-columns: 1fr; }
  .cc-milieu { order: 0; }
  .cnd-ligne { grid-template-columns: 50px minmax(0, 1fr) auto; row-gap: .1rem; }
  .cnd-ligne-genre, .cc-apres { display: none; }
  .cc-ajout { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .cc-sens, .cc-ajout input[name="libelle"] { grid-column: 1 / -1; }
  .cc-filtres input { width: 100%; margin-left: 0; }
  .cnd-solde { gap: 1.2rem; }
  .cnd-solde-gros b { font-size: 2.6rem; }
  /* sous 16 px, iOS zoome sur le champ */
  .cc-ajout input, .cc-ajout select, .cc-filtres input, .cc-filtres select { font-size: 16px; }
}

/* ── LE GROUPE, repris le 17/09/2026 au soir ─────────────────
   Plus lisible : le bureau par fonction, les pupitres avec les noms, les
   danseuses, puis une ligne par personne avec ses présences. Et l'appel
   dans la fiche d'une sortie. */
.grp-puce {
  display: inline-flex; align-items: center; padding: .28rem .7rem; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--border); background: var(--panel); color: var(--txt);
  font: inherit; font-size: 13px; line-height: 1.3; transition: border-color .15s, background .15s;
}
.grp-puce:hover { border-color: var(--blue); background: var(--panel-2); }
.grp-puce.occasionnel { border-style: dashed; color: var(--soft); }
.grp-puces { display: flex; flex-wrap: wrap; gap: .4rem; }

.grp-bureau { display: grid; gap: .6rem; grid-template-columns: repeat(auto-fill, minmax(min(210px, 100%), 1fr)); }
.grp-fonction {
  display: flex; flex-direction: column; gap: .45rem; padding: .8rem .9rem; border-radius: 12px;
  border: 1px solid var(--border); background: var(--panel);
}
.grp-fonction-mot { font-size: 10px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--blue); }
.grp-fonction-qui { display: flex; flex-wrap: wrap; gap: .35rem; }
.grp-fonction.vide .grp-fonction-mot { color: var(--mute); }
.grp-fonction i, .grp-pupitre i { color: var(--mute); font-size: 12.5px; }

.grp-pupitres { display: grid; gap: .6rem; grid-template-columns: repeat(auto-fill, minmax(min(250px, 100%), 1fr)); }
.grp-pupitre {
  display: flex; flex-direction: column; gap: .55rem; padding: .85rem .95rem; border-radius: 12px;
  border: 1px solid var(--border); background: var(--panel);
}
.grp-pupitre-tete { display: flex; align-items: baseline; gap: .6rem; }
.grp-pupitre-tete b { font-family: var(--serif); font-size: 1.9rem; line-height: 1; color: var(--blue); }
.grp-pupitre-tete span { font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--txt); }
.grp-pupitre.vide b { color: var(--mute); }
.grp-pupitre-qui { display: flex; flex-wrap: wrap; gap: .35rem; }
.grp-note { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin-top: .8rem; color: var(--soft); font-size: 13px; }

.grp-outils { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem .9rem; margin-bottom: .8rem; }
.grp-cherche {
  flex: 1 1 14rem; max-width: 22rem; padding: .55rem .8rem; border-radius: 10px;
  border: 1px solid var(--border); background: var(--panel); color: var(--txt); font: inherit; font-size: 13.5px;
}
.grp-cherche:focus { outline: none; border-color: var(--blue); }
.grp-filtres { display: flex; flex-wrap: wrap; gap: .3rem; }
.grp-filtres button {
  padding: .38rem .75rem; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--border); background: transparent; color: var(--soft); font: inherit; font-size: 12.5px;
}
.grp-filtres button:hover { color: var(--txt); }
.grp-filtres button.ici { background: var(--txt); border-color: var(--txt); color: var(--noir); }

.grp-table { border-top: 1px solid var(--border); }
.grp-ligne {
  display: grid; grid-template-columns: minmax(9rem, 1.2fr) minmax(8rem, 1.2fr) minmax(8rem, 1.6fr) 9rem;
  align-items: center; gap: .9rem; width: 100%; padding: .62rem .6rem;
  border: 0; border-bottom: 1px solid var(--border); background: transparent;
  color: var(--txt); font: inherit; font-size: 14px; text-align: left; cursor: pointer;
}
button.grp-ligne:hover { background: var(--panel); }
.grp-entete { cursor: default; padding-top: .5rem; padding-bottom: .5rem; }
.grp-entete span, .grp-tri {
  font-size: 10px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--mute);
}
.grp-tri { border: 0; background: none; padding: 0; text-align: left; cursor: pointer; font-family: inherit; }
.grp-tri i { font-style: normal; letter-spacing: 0; }
.grp-tri:hover, .grp-tri.ici { color: var(--blue); }
.grp-nom { font-weight: 600; overflow-wrap: anywhere; }
.grp-nom i { font-style: normal; font-weight: 400; font-size: 12px; color: var(--mute); margin-left: .3rem; }
.grp-role { color: var(--blue); font-size: 13px; }
.grp-instr { color: var(--soft); font-size: 13px; }
.grp-pres { display: flex; align-items: center; gap: .6rem; }
.grp-pres b { min-width: 1.6rem; font-variant-numeric: tabular-nums; }
.grp-barre { flex: 1; height: 6px; border-radius: 99px; background: var(--border); overflow: hidden; }
.grp-barre i { display: block; height: 100%; border-radius: 99px; background: var(--blue); }
.grp-vide { color: var(--mute); padding: 1rem .6rem; }

@media (max-width: 760px) {
  /* au téléphone, le bureau en lignes serrées : la fonction à gauche, les noms à droite */
  .grp-bureau { gap: .4rem; }
  .grp-fonction { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between;
    gap: .35rem .6rem; padding: .55rem .8rem; }
  .grp-fonction-qui { justify-content: flex-end; }
  .grp-ligne { grid-template-columns: minmax(0, 1fr) 6.5rem; row-gap: .2rem; }
  .grp-entete { display: none; }
  .grp-nom { grid-column: 1; }
  .grp-pres { grid-column: 2; grid-row: 1 / span 3; }
  .grp-role, .grp-instr { grid-column: 1; }
}

/* l'appel, dans la fiche d'une sortie */
.cnd-appel { margin-top: 1.3rem; padding-top: 1.1rem; border-top: 1px solid var(--border); }
.cnd-appel-tete { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .7rem; margin-bottom: .8rem; }
.cnd-appel-mot { font-size: 9.5px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--mute); }
.cnd-appel-compte { font-family: var(--serif); font-size: 1.35rem; color: var(--blue); font-variant-numeric: tabular-nums; }
.cnd-appel-tete button {
  padding: .3rem .7rem; border-radius: 7px; cursor: pointer; font: inherit; font-size: 12px;
  border: 1px solid var(--border); background: transparent; color: var(--soft);
}
.cnd-appel-tete button:hover { color: var(--txt); border-color: var(--blue); }
/* au téléphone, les deux boutons passent ensemble à la ligne */
@media (max-width: 520px) { .cnd-appel-tete .cnd-espace { flex-basis: 100%; height: 0; } }
.cnd-appel-groupes { display: flex; flex-direction: column; gap: .8rem; }
.cnd-appel-groupe .micro { color: var(--mute); margin-bottom: .35rem; }
.cnd-appel-liste { display: flex; flex-wrap: wrap; gap: .35rem; }
.cnd-appel-puce {
  padding: .35rem .75rem; border-radius: 999px; cursor: pointer; font: inherit; font-size: 13px;
  border: 1px solid var(--border); background: var(--noir); color: var(--soft);
  transition: background .12s, border-color .12s, color .12s;
}
.cnd-appel-puce:hover { border-color: var(--blue); color: var(--txt); }
.cnd-appel-puce.la { background: var(--blue); border-color: var(--blue); color: var(--noir); font-weight: 600; }
.cnd-pc-presents { font-size: 11.5px; color: var(--blue); }

/* ── LA COMMUNICATION DE CONODOR (18/09/2026) ────────────────
   Les films et les shorts de la chaîne YouTube, en vignettes. */
.cnd-comm .comm-chaine { color: var(--blue); white-space: nowrap; }
.comm-souci { margin: .6rem 0 1rem; padding: .7rem .9rem; border-radius: 10px;
  border-left: 3px solid #E4B209; background: var(--panel); color: var(--soft); font-size: 13px; }
.comm-grille { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); }
.comm-shorts { grid-template-columns: repeat(auto-fill, minmax(min(170px, 100%), 1fr)); }
.comm-carte { display: flex; flex-direction: column; gap: .5rem; text-decoration: none; color: inherit;
  border: 1px solid var(--border); border-radius: 12px; overflow: hidden; background: var(--panel);
  transition: border-color .15s, transform .15s; }
.comm-carte:hover { border-color: var(--blue); transform: translateY(-2px); }
.comm-vignette { position: relative; display: block; aspect-ratio: 16 / 9; background: var(--noir); overflow: hidden; }
.comm-carte.court .comm-vignette { aspect-ratio: 9 / 16; }
.comm-vignette img { width: 100%; height: 100%; object-fit: cover; display: block; }
.comm-play { position: absolute; inset: 0; display: grid; place-items: center; font-size: 2rem;
  color: #fff; text-shadow: 0 2px 12px rgba(0,0,0,.6); opacity: .85; transition: opacity .15s, transform .15s; }
.comm-carte:hover .comm-play { opacity: 1; transform: scale(1.12); }
.comm-titre { padding: 0 .8rem; font-size: 14px; line-height: 1.35; font-weight: 600;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.comm-bas { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem;
  padding: 0 .8rem .8rem; font-size: 12px; color: var(--mute); }
.comm-bas b { color: var(--blue); font-variant-numeric: tabular-nums; }
.comm-pied { display: flex; justify-content: center; margin: 1.6rem 0 .5rem; }