/* ══════════════════════════════════════════════════════════════════════════════════════════
   MODULE CONTRATS — styles dédiés · créé ch.554, REFONDU ch.555 (charte + tuiles 3D)
   ══════════════════════════════════════════════════════════════════════════════════════════
   ⚠️ Le nom du fichier reste `contrats-c554.css` : il est déjà déclaré dans `index.html:91` et
      il est l'UNIQUE feuille de ce module. En créer une seconde donnerait deux vérités pour le
      même écran (R60) — on refond celle-ci, et on le DIT.

   ⛔⛔ RÈGLE DE CE FICHIER : aucun sélecteur générique, aucune balise nue. Tout est préfixé
      `ct-` ou vit dans une `@media` ⇒ le rendu DESKTOP des autres pages ⛔ ne peut PAS bouger.

   ⛔⛔ ch.555 — LA CHARTE, MESURÉE (⛔ pas choisie) : dans tout le CRM, un élément ACTIF est
      **vert `#34D399` avec texte `#0F172A`** — forme identique à `factures.js:1268` et
      `devis.js:1562`, et `background:#34D399;color:#0F172A` apparaît **37 fois** dans
      `js/pages/*.js`. ⛔ AUCUN écran du CRM ne peint un actif en fond sombre.
      ⇒ mes onglets `#0F172A` du ch.554 étaient hors charte : Anis avait raison.
      ⚠️ `#0F172A` reste employé — mais comme TEXTE (sa fonction réelle : 167 occurrences,
      majoritairement `color:`), notamment POSÉ SUR le vert.

   ⚠️⚠️ PIÈGE MESURÉ QUI AURAIT CASSÉ LES TUILES — `responsive.css:66` **et** `:265` :
        body > div[style*="position:fixed"] [style*="display:grid"] { grid-template-columns:1fr !important }
      Le modal est monté sur `body` avec `position:fixed` ⇒ il EST matché. Toute grille
      déclarée **en ligne** y serait écrasée en UNE colonne, avec `!important`, sous 1024 px.
      ⇒ PARADE : les grilles de ce module sont déclarées **PAR UNE CLASSE** (`ct-grid-*`)
      ⇒ le sélecteur d'attribut ⛔ ne les matche même pas. ⛔ La règle générique n'est PAS
      retirée (R59) : elle protège les autres modules.
   ══════════════════════════════════════════════════════════════════════════════════════════ */

/* ══ LA CHARTE, EN UN SEUL ENDROIT (⛔ pas de CSS variables — piège projet n°7) ═══════════ */
/*  actif    : #34D399 / texte #0F172A        inactif : #F1F5F9 / texte #64748B
    bordure  : #E2E8F0                        survol  : #F8FAFC
    danger   : #EF4444 (vrais refus SEULEMENT) avertissement : #F59E0B                      */

/* ── onglets : ils DÉFILENT, ils ne s'empilent pas ───────────────────────────────────────── */
#ct-page .ct-tabs {
  display: flex; gap: 8px; overflow-x: auto; -webkit-overflow-scrolling: touch;
  scrollbar-width: thin; padding-bottom: 4px;
}
/* ⛔ ceinture NOMMÉE contre la règle générique du ch.469 (⛔ la règle d'origine reste intacte) */
#pageContent #ct-page .ct-tabs { flex-wrap: nowrap; }
#ct-page .ct-tabs::-webkit-scrollbar { height: 6px; }
#ct-page .ct-tabs::-webkit-scrollbar-thumb { background: #CBD5E1; border-radius: 3px; }

#ct-page .ct-tab {
  flex: 0 0 auto; min-height: 44px;          /* ⛔ cible tactile (ch.459/495) */
  padding: 10px 16px; border-radius: 10px;
  border: 1px solid #E2E8F0; background: #F1F5F9; color: #64748B;
  font-size: 13px; font-weight: 600; cursor: pointer; white-space: nowrap;
  transition: background .15s, color .15s, box-shadow .15s, transform .15s;
}
#ct-page .ct-tab:hover { background: #E2E8F0; color: #475569; }
/* ⭐ L'ACTIF — la forme exacte du reste du CRM (factures.js:1268) */
#ct-page .ct-tab[aria-selected="true"] {
  background: #34D399; color: #0F172A; border-color: #34D399;
  box-shadow: 0 2px 8px rgba(52, 211, 153, .3);
}
#ct-page .ct-tab .ct-count {
  display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 999px;
  background: #E2E8F0; color: #475569; font-size: 11px; font-weight: 700;
}
/* ⛔ sur le vert, le compteur reste LISIBLE : voile sombre translucide, ⛔ pas du blanc */
#ct-page .ct-tab[aria-selected="true"] .ct-count { background: rgba(15, 23, 42, .12); color: #0F172A; }

/* ── la pastille de sous-section (« Facturation ») ───────────────────────────────────────── */
#ct-page .ct-sub {
  display: inline-block; padding: 7px 14px; border-radius: 9px;
  background: #34D399; color: #0F172A; font-size: 12px; font-weight: 700;
  box-shadow: 0 2px 8px rgba(52, 211, 153, .3);
}

/* ══ LA TUILE 3D — patron du CRM (banque.js:143 « 3D léger + transparence ») ══════════════
   Recette mesurée : rayon 14-16px · DEUX ombres (une serrée + une diffuse) · arête de lumière
   `inset 0 1px 0 rgba(255,255,255,.75)` · fond teinté à 8 % de l'accent · bordure à 18 %.    */
.ct-tile {
  position: relative; border-radius: 16px; padding: 18px 20px;
  background: linear-gradient(135deg, rgba(52, 211, 153, .08), rgba(255, 255, 255, .72));
  border: 1px solid rgba(52, 211, 153, .18);
  box-shadow: 0 2px 8px rgba(15, 23, 42, .08), inset 0 1px 0 rgba(255, 255, 255, .75);
  overflow: hidden;
}
/* le liseré supérieur qui donne le relief */
.ct-tile::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, #34D399, rgba(52, 211, 153, .33));
}
/* variantes d'accent — ⛔ ÉNUMÉRÉES (R56), ⛔ jamais calculées */
.ct-tile.ct-tile-bleu   { background: linear-gradient(135deg, rgba(59,130,246,.08), rgba(255,255,255,.72)); border-color: rgba(59,130,246,.18); }
.ct-tile.ct-tile-bleu::before   { background: linear-gradient(90deg, #3B82F6, rgba(59,130,246,.33)); }
.ct-tile.ct-tile-ambre  { background: linear-gradient(135deg, rgba(245,158,11,.08), rgba(255,255,255,.72)); border-color: rgba(245,158,11,.18); }
.ct-tile.ct-tile-ambre::before  { background: linear-gradient(90deg, #F59E0B, rgba(245,158,11,.33)); }
.ct-tile.ct-tile-ardoise{ background: linear-gradient(135deg, rgba(100,116,139,.07), rgba(255,255,255,.72)); border-color: #E2E8F0; }
.ct-tile.ct-tile-ardoise::before{ background: linear-gradient(90deg, #94A3B8, rgba(148,163,184,.33)); }

.ct-tile-titre {
  font-size: 11px; font-weight: 700; color: #64748B;
  text-transform: uppercase; letter-spacing: .05em; margin-bottom: 12px;
}

/* ══ LES GRILLES — PAR CLASSE, ⛔ JAMAIS EN LIGNE (cf. en-tête, responsive.css:66/265) ═════ */
.ct-grid-tuiles { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
.ct-grid-2      { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.ct-grid-3      { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; }

/* ── champs ──────────────────────────────────────────────────────────────────────────────── */
.ct-lab { display: block; font-size: 12px; font-weight: 600; color: #475569; margin-bottom: 5px; }
.ct-in {
  width: 100%; min-height: 44px; padding: 9px 11px; box-sizing: border-box;
  border: 1px solid #E2E8F0; border-radius: 9px; font-size: 13px; color: #1E293B;
  background: #fff; font-family: inherit;
}
.ct-in:focus { outline: none; border-color: #34D399; box-shadow: 0 0 0 3px rgba(52, 211, 153, .15); }
.ct-aide { display: block; font-size: 11px; color: #94A3B8; margin-top: 5px; }

/* ── badge d'environnement ───────────────────────────────────────────────────────────────
   ⚠️ ch.555 — le badge PROD était peint en ROUGE D'ERREUR au ch.554. C'est l'état le plus
      NORMAL du CRM : le peindre en rouge fait crier chaque ligne, et **R108** dit qu'une
      alerte qui crie sur le cas normal sera ignorée le jour du cas grave.
   ⇒ PROD passe en AMBRE — la sémantique que `env-banner.js:29` emploie déjà pour la
      production (R60) — et le rouge est rendu aux vrais refus.                              */
.ct-env {
  display: inline-block; padding: 2px 8px; border-radius: 999px;
  font-size: 10px; font-weight: 800; letter-spacing: .3px; vertical-align: middle;
}
.ct-env.ct-env-prod { background: #FEF3C7; color: #92400E; border: 1px solid #FDE68A; }
.ct-env.ct-env-test { background: #DBEAFE; color: #1E40AF; border: 1px solid #93C5FD; }

/* ── pastilles de l'écran « À valider » ──────────────────────────────────────────────────── */
.ct-pill {
  display: inline-block; padding: 2px 8px; border-radius: 999px;
  font-size: 11px; font-weight: 700; border: 1px solid transparent;
}
.ct-pill-identique { background: #ECFDF5; color: #047857; border-color: #A7F3D0; }
.ct-pill-different { background: #FEF3C7; color: #92400E; border-color: #FDE68A; }
.ct-pill-client    { background: #FEE2E2; color: #991B1B; border-color: #FCA5A5; }
.ct-pill-premiere  { background: #F1F5F9; color: #475569; border-color: #E2E8F0; }

/* ── table ───────────────────────────────────────────────────────────────────────────────── */
#ct-page .ct-wrap, .ct-modal .ct-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }      /* ⛔ jamais `overflow:hidden` (défaut ch.469) */
#ct-page .ct-table, .ct-modal .ct-table { width: 100%; border-collapse: collapse; font-size: 13px; }
#ct-page .ct-table th, .ct-modal .ct-table th {
  text-align: left; padding: 10px 12px; color: #64748B; font-size: 11px;
  text-transform: uppercase; letter-spacing: .4px; border-bottom: 1px solid #E2E8F0; white-space: nowrap;
}
#ct-page .ct-table td, .ct-modal .ct-table td { padding: 12px; border-bottom: 1px solid #F1F5F9; vertical-align: middle; color: #1E293B; }
#ct-page .ct-table tbody tr:hover, .ct-modal .ct-table tbody tr:hover { background: #F8FAFC; cursor: pointer; }

/* ── boutons — relief léger, patron `system.js:437` ──────────────────────────────────────── */
#ct-page .ct-btn, .ct-modal .ct-btn {
  min-height: 44px; padding: 10px 16px; border-radius: 10px;
  font-size: 13px; font-weight: 700; cursor: pointer; font-family: inherit;
  border: 1px solid #E2E8F0; background: #fff; color: #1E293B;
  transition: transform .15s, box-shadow .15s, background .15s;
}
#ct-page .ct-btn:hover, .ct-modal .ct-btn:hover { background: #F8FAFC; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(15, 23, 42, .07); }
#ct-page .ct-btn-primary, .ct-modal .ct-btn-primary {
  background: #34D399; color: #0F172A; border-color: #34D399;
  box-shadow: 0 2px 8px rgba(52, 211, 153, .3);
}
#ct-page .ct-btn-primary:hover, .ct-modal .ct-btn-primary:hover {
  background: #34D399; transform: translateY(-2px); box-shadow: 0 6px 16px rgba(52, 211, 153, .4);
}
#ct-page .ct-btn:disabled, .ct-modal .ct-btn:disabled { opacity: .5; cursor: not-allowed; transform: none; box-shadow: none; }
/* ⚠️ le rouge est RÉSERVÉ aux vrais refus — ⛔ pas à une action de cycle de vie ordinaire */
.ct-btn-danger { color: #EF4444 !important; border-color: #FECACA !important; background: #FEF2F2 !important; }

/* ── la sélection multiple (« À valider ») — verte, comme partout ailleurs ───────────────── */
#ct-page .ct-bulk {
  display: none; align-items: center; gap: 10px; flex-wrap: wrap;
  background: linear-gradient(135deg, rgba(52, 211, 153, .14), rgba(255, 255, 255, .8));
  border: 1px solid rgba(52, 211, 153, .3); color: #0F172A;
  padding: 10px 14px; border-radius: 12px; font-size: 12px; margin-bottom: 10px;
  box-shadow: 0 2px 8px rgba(15, 23, 42, .06), inset 0 1px 0 rgba(255, 255, 255, .75);
}
#ct-page .ct-case {
  width: 30px; height: 30px; min-width: 30px; border-radius: 8px; cursor: pointer;
  border: 1px solid #CBD5E1; background: #fff; color: #0F172A; font-size: 14px; line-height: 1;
}
#ct-page .ct-case[aria-pressed="true"] { border-color: #34D399; background: #34D399; color: #0F172A; }

/* ── état vide : NEUTRE. ⛔ Ni icône d'interdiction, ni rouge (R108) ─────────────────────── */
#ct-page .ct-vide, .ct-modal .ct-vide { padding: 28px 18px; text-align: center; color: #64748B; font-size: 13px; }
#ct-page .ct-vide .ct-vide-ico, .ct-modal .ct-vide .ct-vide-ico { display: block; font-size: 26px; margin-bottom: 8px; opacity: .55; }

/* ══ LE MODAL PLEIN ÉCRAN (demande d'Anis) ════════════════════════════════════════════════
   ⚠️ Le plus grand modal existant du CRM est `expenses.js:455` — `min(96vw,1480px) × min(94vh,1040px)`.
      Anis demande « peut-être sur toute la page » : on va plus loin sur bureau, et on passe
      VRAIMENT plein écran sous 768 px, où chaque pixel compte.                              */
.ct-modal-plein {
  width: min(98vw, 1680px); height: min(96vh, 1120px);
  background: #fff; border-radius: 16px;
  box-shadow: 0 24px 70px rgba(15, 23, 42, .35);
  display: flex; flex-direction: column; overflow: hidden;
}
.ct-modal-entete {
  flex-shrink: 0; padding: 14px 22px; display: flex; align-items: center; gap: 12px;
  background: linear-gradient(135deg, #34D399, #10B981); color: #0F172A;
  position: relative; overflow: hidden;
}
/* le halo du patron `system.js:418` */
.ct-modal-entete::after {
  content: ''; position: absolute; top: -30px; right: -30px; width: 110px; height: 110px;
  background: radial-gradient(circle, rgba(255, 255, 255, .22), transparent 70%); pointer-events: none;
}
.ct-modal-corps { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: 18px 22px; background: #F8FAFC; }
.ct-modal-pied {
  flex-shrink: 0; padding: 12px 22px; border-top: 1px solid #E2E8F0; background: #fff;
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
}

/* ══ TABLETTE ≤ 1024 px ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  #ct-page .ct-table .ct-col-site { display: none; }
  .ct-grid-tuiles { grid-template-columns: 1fr; }
  .ct-grid-3 { grid-template-columns: 1fr 1fr; }
  .ct-modal-plein { width: 100vw; height: 100vh; max-height: 100vh; border-radius: 0; }
}

/* ══ MOBILE ≤ 768 px ══════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  #ct-page .ct-table .ct-col-periodicite { display: none; }
  #ct-page .ct-actions { display: flex; flex-wrap: wrap; gap: 8px; }
  #ct-page .ct-actions .ct-btn { flex: 1 1 auto; }
  .ct-grid-2, .ct-grid-3 { grid-template-columns: 1fr; }
  .ct-modal-entete { padding: 12px 14px; }
  .ct-modal-corps { padding: 14px; }
  .ct-modal-pied { padding: 10px 14px; }
  .ct-tile { padding: 14px 15px; border-radius: 14px; }
}

/* ══ TÉLÉPHONE ≤ 480 px — la table devient des CARTES ═════════════════════════════════════ */
@media (max-width: 480px) {
  #ct-page .ct-table thead { display: none; }
  #ct-page .ct-table, #ct-page .ct-table tbody, #ct-page .ct-table tr, #ct-page .ct-table td { display: block; width: 100%; }
  #ct-page .ct-table tr { border: 1px solid #E2E8F0; border-radius: 12px; margin-bottom: 10px; padding: 8px; background: #fff; }
  #ct-page .ct-table td { border: 0; padding: 6px 8px; }
  #ct-page .ct-table td[data-label]::before {
    content: attr(data-label) " : "; color: #94A3B8; font-size: 11px; font-weight: 700; text-transform: uppercase;
  }
  .ct-modal .ct-modal-box { width: 100%; max-width: 100%; border-radius: 12px; padding: 18px; }
}

/* ══════════════════════════════════════════════════════════════════════════════════════════
   ch.556 — LE TABLEAU DU MODAL ÉTAIT SANS STYLE, ET COUPÉ SOUS 1024 px
   ══════════════════════════════════════════════════════════════════════════════════════════
   ⛔⛔ DÉFAUT DE MON ch.555, mesuré : `.ct-table` / `.ct-wrap` / `.ct-vide` étaient scopées
   `#ct-page` alors que le modal est monté sur `body` ⇒ la tuile « lignes du document »
   n'héritait d'AUCUNE règle. Combiné à `responsive.css:68`
   (`body > div[style*="position:fixed"] { overflow-x: hidden !important }`), la partie qui
   déborde était **CUT et INATTEIGNABLE** sous 1024 px — ⛔ sans aucun défilement.
   ⇒ Le sélecteur `.ct-modal …` est AJOUTÉ à côté de `#ct-page …` (R59 : rien n'est retiré),
   exactement comme `.ct-btn` le faisait déjà.
   ⚠️ `overflow-x:auto` vit sur `.ct-wrap`, qui est À L'INTÉRIEUR de l'overlay : la règle
   générique de `responsive.css` porte sur l'overlay lui-même et ⛔ n'est PAS contredite. */
.ct-modal .ct-wrap { display: block; }
.ct-modal .ct-table th, .ct-modal .ct-table td { white-space: nowrap; }
.ct-modal .ct-table td.ct-td-libelle { white-space: normal; min-width: 180px; }
@media (max-width: 1024px) {
  .ct-modal .ct-table { font-size: 12px; }
  .ct-modal .ct-table th, .ct-modal .ct-table td { padding: 8px 10px; }
}

/* ── ch.556 — la ligne « libellé / valeur » des tuiles de lecture ────────────────────────
   ⚠️ Classe INTRODUITE par le ch.556 : mon premier jet l'employait sans la définir
   (0 occurrence dans la feuille) — le même motif que `.ct-table` scopée `#ct-page`. */
.ct-modal .ct-kv, #ct-page .ct-kv {
  display: flex; align-items: baseline; gap: 10px;
  padding: 7px 0; border-bottom: 1px dashed #E2E8F0; font-size: 13px;
}
.ct-modal .ct-kv:last-child, #ct-page .ct-kv:last-child { border-bottom: none; }
.ct-modal .ct-kv > span, #ct-page .ct-kv > span { color: #64748B; flex: 0 0 auto; min-width: 116px; }
.ct-modal .ct-kv > b, #ct-page .ct-kv > b { color: #0F172A; font-weight: 700; margin-left: auto; text-align: right; }
@media (max-width: 1024px) {
  .ct-modal .ct-kv, #ct-page .ct-kv { flex-wrap: wrap; }
  .ct-modal .ct-kv > span, #ct-page .ct-kv > span { min-width: 0; }
}

/* ══════════════════════════════════════════════════════════════════════════════════════════
   ch.557 — LA PAGE EN ONGLETS, LES CONTRATS EN TUILES, LE GRAND FORMULAIRE
   ══════════════════════════════════════════════════════════════════════════════════════════
   ⚠️⚠️ LE PIÈGE, POUR LA 2ᵉ FOIS : une classe scopée `#ct-page` est **MORTE dans le modal**,
   qui est monté sur `body`. Le ch.556 l'a payé sur `.ct-table` ; `.ct-case` (les cases de mois
   et de jours) est dans le même cas et sert ICI, dans le formulaire ⇒ sélecteur AJOUTÉ à côté,
   ⛔ `#ct-page` conservé (R59). */
.ct-modal .ct-case {
  min-width: 44px; min-height: 44px; padding: 6px 10px;
  border: 1px solid #E2E8F0; border-radius: 9px; background: #fff;
  font-size: 12px; font-weight: 600; color: #64748B; cursor: pointer; font-family: inherit;
}
.ct-modal .ct-case[aria-pressed="true"] { border-color: #34D399; background: #34D399; color: #0F172A; }
.ct-modal .ct-sub {
  display: inline-block; padding: 5px 12px; border-radius: 999px;
  background: #34D399; color: #0F172A; font-size: 12px; font-weight: 700;
}

/* ── LES CONTRATS EN TUILES (demande d'Anis : « utiliser des tuiles ») ───────────────────── */
#ct-page .ct-grid-contrats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
#ct-page .ct-carte { cursor: pointer; transition: transform .15s, box-shadow .15s; }
/* ⭐ R119 cite `translateY(-2px)` au survol — MESURÉ absent de la feuille jusqu'ici. */
#ct-page .ct-carte:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(15, 23, 42, .10), inset 0 1px 0 rgba(255, 255, 255, .75);
}
#ct-page .ct-carte-ref { font-size: 14px; font-weight: 800; color: #0F172A; }
#ct-page .ct-carte-titre {
  font-size: 12px; color: #475569; margin: 2px 0 10px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
#ct-page .ct-carte-pied {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-top: 12px; padding-top: 10px; border-top: 1px dashed #E2E8F0;
}

/* ── LE FORMULAIRE : grilles de mois et de jours ─────────────────────────────────────────── */
.ct-modal .ct-grille-mois { display: grid; grid-template-columns: repeat(12, 1fr); gap: 5px; }
.ct-modal .ct-grille-jours { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; }
.ct-modal .ct-ligne {
  border: 1px solid #E2E8F0; border-radius: 12px; padding: 14px; background: #fff; margin-bottom: 10px;
}
.ct-modal .ct-ligne-tete { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
.ct-modal .ct-zone {
  border: 1px solid #E2E8F0; border-radius: 14px; padding: 14px; background: #F8FAFC; margin-bottom: 14px;
}
.ct-modal .ct-err { color: #B91C1C; font-size: 12px; margin-top: 4px; }
.ct-modal .ct-in.ct-in-err { border-color: #EF4444; box-shadow: 0 0 0 3px rgba(239, 68, 68, .12); }

@media (max-width: 1024px) {
  #ct-page .ct-grid-contrats { grid-template-columns: repeat(2, 1fr); }
  .ct-modal .ct-grille-mois { grid-template-columns: repeat(6, 1fr); }
}
@media (max-width: 768px) {
  #ct-page .ct-grid-contrats { grid-template-columns: 1fr; }
  .ct-modal .ct-grille-mois { grid-template-columns: repeat(4, 1fr); }
  .ct-modal .ct-grille-jours { grid-template-columns: repeat(4, 1fr); }
}

/* ══════════════════════════════════════════════════════════════════════════════════════════
   ch.559 — EN-TÊTE FIXE · RÉGLAGES LISIBLES · MODAL DE ZONE-TYPE
   ══════════════════════════════════════════════════════════════════════════════════════════
   ⭐ L'en-tête colle en haut de `#pageContent` — le SEUL conteneur qui défile
      (`index.html:268`, `flex-1 overflow-y-auto p-6`). Patron du CRM : `agents-ia.js:612`
      (`position:sticky;top:0;z-index:5;background:#fff`). ⛔ Aucune hauteur imposée : il reste
      DANS le flux, donc ⛔ il ne masque jamais le contenu qui le suit.
   ⚠️ z-index 20 : AU-DESSUS du contenu, SOUS le hamburger flottant (990, responsive.css:58)
      et SOUS tous les modals (≥ 1000) — R87.
   ⚠️ Marge négative = la gouttière `p-6` (24 px) : le fond opaque couvre toute la largeur. */
#ct-page .ct-entete {
  position: sticky; top: -24px; z-index: 20;
  margin: -24px -24px 0; padding: 24px 24px 10px;
  background: #F8FAFC; border-bottom: 1px solid transparent;
  transition: box-shadow .15s, border-color .15s;
}
#ct-page .ct-entete.ct-entete-ombre { border-bottom-color: #E2E8F0; box-shadow: 0 6px 14px -8px rgba(15, 23, 42, .18); }

/* ⛔ ch.559 — DÉFAUT PRÉEXISTANT trouvé au passage : `.ct-case` n'était stylée que sous
   `#ct-page` ⇒ dans le MODAL (formulaire contrat), un jour ou un mois coché ⛔ ne se voyait pas.
   Le sélecteur `.ct-modal …` est AJOUTÉ (R59 : rien n'est retiré). */
.ct-modal .ct-case {
  min-width: 30px; height: 36px; border-radius: 8px; cursor: pointer;
  border: 1px solid #CBD5E1; background: #fff; color: #0F172A; font-size: 13px; font-weight: 600; line-height: 1;
}
.ct-modal .ct-case[aria-pressed="true"] { border-color: #34D399; background: #34D399; color: #0F172A; }

/* ── réglages ───────────────────────────────────────────────────────────────────────────── */
#ct-page .ct-rg-ligne {
  display: flex; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid #F1F5F9; flex-wrap: wrap;
}
#ct-page .ct-rg-ligne .ct-rg-nom { flex: 1 1 180px; min-width: 0; }
/* ch.569 — l'icône d'une catégorie (un emoji) : case étroite, centrée, cible tactile 44 px */
#ct-page .ct-rg-ligne .ct-rg-ico { flex: 0 0 56px; width: 56px; min-height: 44px; text-align: center; font-size: 20px; padding: 4px; }
#ct-page .ct-tab .ct-tab-ico { margin-right: 6px; }
#ct-page .ct-rg-inactif { opacity: .6; background: #F8FAFC; }
#ct-page .ct-rg-inactif .ct-rg-nom { background: #F1F5F9; color: #64748B; }
#ct-page .ct-rg-etat {
  display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 11px; font-weight: 700;
  background: #E2E8F0; color: #475569;
}
#ct-page .ct-rg-ajout { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
#ct-page .ct-rg-ajout .ct-in { flex: 1 1 200px; min-width: 0; }
#ct-page .ct-rg-note, .ct-modal .ct-rg-note { margin-top: 8px; font-size: 12px; color: #64748B; }
/* ⛔ R108 : un refus reste lisible et distinct — ambre, ⛔ pas une icône rouge décorative */
#ct-page .ct-rg-note-alerte, .ct-modal .ct-rg-note-alerte {
  margin: 0 0 10px; padding: 10px 12px; border-radius: 10px;
  background: #FFFBEB; border: 1px solid #FDE68A; color: #92400E;
}
#ct-page .ct-rg-coche { display: flex; align-items: center; gap: 8px; min-height: 44px; font-size: 13px; color: #475569; cursor: pointer; }
#ct-page .ct-rg-coche input { width: 18px; height: 18px; accent-color: #34D399; }
#ct-page .ct-rg-outils { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 4px; }
#ct-page .ct-rg-outils .ct-in { flex: 1 1 160px; min-width: 0; }
#ct-page .ct-rg-zone {
  border: 1px solid #E2E8F0; border-radius: 12px; padding: 12px; background: #fff; margin-top: 8px;
  cursor: pointer; transition: transform .15s, box-shadow .15s;
}
#ct-page .ct-rg-zone:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(15, 23, 42, .10); }
#ct-page .ct-rg-zone:focus-visible { outline: 3px solid rgba(52, 211, 153, .45); outline-offset: 2px; }
#ct-page .ct-rg-zone-tete { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
#ct-page .ct-rg-zone-nom { font-weight: 700; color: #0F172A; font-size: 14px; }
#ct-page .ct-rg-zone-texte {
  margin-top: 6px; font-size: 12px; color: #475569;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
#ct-page .ct-rg-zone-pied { display: flex; align-items: center; gap: 12px; margin-top: 8px; font-size: 12px; color: #64748B; flex-wrap: wrap; }

/* ── le modal d'une zone-type : MOYEN sur bureau, plein écran sous 768 px ──────────────── */
.ct-modal-moyen {
  width: min(96vw, 860px); max-height: 94vh;
  background: #fff; border-radius: 16px; box-shadow: 0 24px 70px rgba(15, 23, 42, .35);
  display: flex; flex-direction: column; overflow: hidden;
}
.ct-modal .ct-rg-tache { display: flex; gap: 6px; align-items: center; margin-bottom: 6px; }
.ct-modal .ct-rg-tache .ct-in { flex: 1 1 auto; min-width: 0; }
.ct-modal .ct-btn-icone { min-width: 44px; padding: 0 10px; justify-content: center; }

@media (max-width: 1024px) {
  /* ⛔ le hamburger flotte à gauche (8→52 px) : le titre collé ⛔ passe pas dessous */
  #ct-page .ct-entete { top: -56px; margin-top: -56px; padding-top: 56px; }
  #ct-page .ct-entete.ct-entete-ombre .ct-entete-titre { padding-left: 52px; }
}
@media (max-width: 768px) {
  .ct-modal .ct-case { height: 44px; }          /* ⛔ cible tactile (ch.459) */
  .ct-modal-moyen { width: 100vw; max-height: 100vh; height: 100vh; border-radius: 0; }
}
.ct-modal .ct-fermer { min-width: 44px; min-height: 44px; }

/* ══ ch.560 — L'ANNUAIRE DES SYNDICS : tuiles 3D, logo, 3 / 2 / 1 colonnes (R120 : PAR CLASSE) ══ */
#ct-page .ct-grid-syndics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 8px; }
.ct-syn-logo {
  flex-shrink: 0; border-radius: 12px; object-fit: contain; background: #fff;
  border: 1px solid #E2E8F0; box-shadow: 0 1px 3px rgba(15, 23, 42, .08);
}
.ct-syn-initiales {
  display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, rgba(52, 211, 153, .22), rgba(255, 255, 255, .9));
  color: #0F172A; font-weight: 800; font-size: 14px;
}
#ct-page .ct-syn-tete { display: flex; align-items: center; gap: 12px; }
#ct-page .ct-syn-nom { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#ct-page .ct-syn-ville { font-size: 12px; color: #64748B; margin-top: 2px; }
#ct-page .ct-syn-carte:focus-visible { outline: 3px solid rgba(52, 211, 153, .45); outline-offset: 2px; }
@media (max-width: 1024px) { #ct-page .ct-grid-syndics { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { #ct-page .ct-grid-syndics { grid-template-columns: 1fr; } }
/* ⚠️ ch.560 — la liste d'interlocuteurs est CELLE du carnet (R60) ; ses ✎ / ✕ font ~17 px (défaut
   PRÉEXISTANT du carnet, consigné au backlog). ⛔ On ⛔ touche PAS au rendu du carnet : la cible
   tactile est agrandie ICI SEULEMENT, dans la fiche syndic, sous 768 px (R59). */
@media (max-width: 768px) { #ct-syndic-modal #ctpInterlocuteurs button { min-width: 44px; min-height: 44px; } }

/* ══ ch.561 — LE WIZARD DE CRÉATION (classes seulement : R120 — un modal fixé au body voit ses
   grilles EN LIGNE écrasées par responsive.css:66) ═════════════════════════════════════════ */
.ct-modal .ct-etapes {
  position: sticky; top: -18px; z-index: 5; margin: -18px -22px 16px; padding: 12px 22px;
  display: flex; gap: 6px; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: thin;
  background: #F8FAFC; border-bottom: 1px solid #E2E8F0;
}
.ct-modal .ct-etape {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px; min-height: 44px;
  padding: 6px 12px; border-radius: 999px; border: 1px solid #E2E8F0; background: #fff;
  color: #64748B; font-size: 12px; font-weight: 700; cursor: pointer; font-family: inherit; white-space: nowrap;
}
.ct-modal .ct-etape:disabled { cursor: not-allowed; opacity: .55; }
.ct-modal .ct-etape-num {
  display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px;
  border-radius: 999px; background: #E2E8F0; color: #475569; font-size: 11px;
}
.ct-modal .ct-etape-courant { border-color: #34D399; background: #34D399; color: #0F172A; box-shadow: 0 2px 8px rgba(52, 211, 153, .3); }
.ct-modal .ct-etape-courant .ct-etape-num { background: rgba(15, 23, 42, .12); color: #0F172A; }
.ct-modal .ct-etape-fait { border-color: #A7F3D0; color: #047857; }
.ct-modal .ct-etape-fait .ct-etape-num { background: #ECFDF5; color: #047857; }
.ct-modal .ct-etape-erreur { border-color: #FDE68A; background: #FFFBEB; color: #92400E; }
.ct-modal .ct-etape-erreur .ct-etape-num { background: #FDE68A; color: #92400E; }

.ct-modal .ct-tuiles-choix { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.ct-modal .ct-choix {
  display: flex; align-items: center; gap: 10px; min-height: 56px; padding: 12px; text-align: left;
  border: 1px solid #E2E8F0; border-radius: 14px; background: #fff; color: #0F172A; cursor: pointer;
  font-family: inherit; font-size: 13px; font-weight: 700;
  box-shadow: 0 2px 8px rgba(15, 23, 42, .06), inset 0 1px 0 rgba(255, 255, 255, .75);
  transition: transform .15s, box-shadow .15s, border-color .15s;
}
.ct-modal .ct-choix:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(15, 23, 42, .10); }
.ct-modal .ct-choix[aria-pressed="true"] {
  border-color: #34D399; background: linear-gradient(135deg, rgba(52, 211, 153, .16), rgba(255, 255, 255, .9));
  box-shadow: 0 0 0 2px rgba(52, 211, 153, .45);
}
.ct-modal .ct-choix-ico { font-size: 24px; flex-shrink: 0; }
.ct-modal .ct-choix-lib { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ct-modal .ct-choix-sous { font-size: 11px; font-weight: 500; color: #64748B; }
.ct-modal .ct-rg-coche { display: flex; align-items: center; gap: 8px; min-height: 44px; font-size: 13px; color: #334155; cursor: pointer; margin-top: 12px; }
.ct-modal .ct-rg-coche input { width: 20px; height: 20px; accent-color: #34D399; }
.ct-modal .ct-desc-oui-non { margin-top: 14px; display: flex; flex-direction: column; gap: 8px; }
.ct-modal .ct-desc-ligne { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ct-modal .ct-desc-ligne > span { flex: 1 1 180px; font-size: 13px; color: #334155; }
.ct-modal .ct-desc-ligne .ct-case { min-width: 64px; }
.ct-modal .ct-recap-tete { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.ct-modal .ct-recap-tete .ct-tile-titre { margin: 0; }
@media (max-width: 768px) {
  .ct-modal .ct-etapes { top: -14px; margin: -14px -14px 14px; padding: 10px 14px; }
  .ct-modal .ct-etape-lib { display: none; }
  .ct-modal .ct-etape-courant .ct-etape-lib { display: inline; }
  .ct-modal .ct-tuiles-choix { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 420px) { .ct-modal .ct-tuiles-choix { grid-template-columns: 1fr; } }

/* ══ ch.567 — LA LISTE « FACTURATION », LA FICHE D'ABONNEMENT, L'AJOUT EXPRESS, LES TUILES ══
   ⛔ Même règle que tout le fichier : préfixe `ct-`, ⛔ aucune balise nue, ⛔ aucune variable CSS
      (piège n°7). ⛔ Aucun fond vert dans les cellules (ch.563).                              */
#ct-page .ct-fact-outils { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 10px; }
#ct-page .ct-fact-outils .ct-in { width: auto; flex: 0 1 220px; min-width: 0; }
#ct-page .ct-fact-wrap {
  border-radius: 14px; background: linear-gradient(135deg, rgba(52, 211, 153, .05), #fff);
  box-shadow: 0 2px 8px rgba(15, 23, 42, .06), inset 0 1px 0 rgba(255, 255, 255, .75);
}
#ct-page .ct-table.ct-fact { min-width: 1180px; }
#ct-page .ct-table.ct-fact thead th { background: #F8FAFC; position: sticky; top: 0; }
#ct-page .ct-table.ct-fact td { vertical-align: top; }
#ct-page .ct-num, .ct-modal .ct-num { text-align: right; white-space: nowrap; }
#ct-page .ct-sous, .ct-modal .ct-sous { font-size: 11.5px; color: #64748B; margin-top: 2px; }
#ct-page .ct-manque, .ct-modal .ct-manque {
  display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 11px; font-weight: 700;
  background: #FFF7ED; color: #9A3412; border: 1px dashed #FDBA74;
}
#ct-page .ct-actions-ligne { display: flex; gap: 6px; }
#ct-page .ct-btn-icone, .ct-modal .ct-btn-icone { min-width: 44px; padding: 0 10px; justify-content: center; }

/* ── textes longs : coupés proprement, défilement doux au survol, texte complet en bulle ───── */
.ct-trunc {
  display: block; max-width: 220px; overflow: hidden; white-space: nowrap; outline: none;
  text-overflow: ellipsis;
}
.ct-trunc .ct-trunc-in { display: inline-block; white-space: nowrap; }
.ct-trunc.ct-defile { text-overflow: clip; }
.ct-trunc.ct-defile .ct-trunc-in { animation: ct-defile 4s ease-in-out .3s infinite alternate; }
@keyframes ct-defile { from { transform: translateX(0); } to { transform: translateX(var(--ct-dx, 0)); } }
.ct-kv .ct-trunc { max-width: 100%; }
.ct-bulle {
  display: none; position: fixed; z-index: 4000; max-width: min(420px, 92vw);
  padding: 8px 11px; border-radius: 10px; background: #FFFFFF; color: #0F172A; border: 1px solid #CBD5E1;
  font-size: 12px; line-height: 1.45; white-space: normal; word-break: break-word;
  box-shadow: 0 10px 28px rgba(15, 23, 42, .35); pointer-events: none;
}

/* ── la fiche d'abonnement : onglets ────────────────────────────────────────────────────── */
.ct-onglets-fiche {
  display: flex; gap: 8px; overflow-x: auto; padding: 10px 22px; background: #fff;
  border-bottom: 1px solid #E2E8F0; flex-shrink: 0;
}
.ct-onglet-fiche {
  flex: 0 0 auto; min-height: 44px; padding: 10px 16px; border-radius: 10px; cursor: pointer;
  border: 1px solid #E2E8F0; background: #F1F5F9; color: #64748B; font-size: 13px; font-weight: 600; white-space: nowrap;
}
.ct-onglet-fiche[aria-selected="true"] { background: #34D399; color: #0F172A; border-color: #34D399; box-shadow: 0 2px 8px rgba(52, 211, 153, .3); }
.ct-modal .ct-fin-choix { display: flex; flex-direction: column; gap: 4px; }
.ct-modal .ct-rg-coche { display: flex; align-items: center; gap: 8px; min-height: 44px; font-size: 13px; color: #475569; cursor: pointer; flex-wrap: wrap; }
.ct-modal .ct-rg-coche input[type="radio"], .ct-modal .ct-rg-coche input[type="checkbox"] { width: 18px; height: 18px; accent-color: #34D399; }
.ct-modal .ct-case-mois { display: flex; align-items: center; gap: 4px; font-size: 12px; color: #475569; min-height: 36px; }
.ct-modal .ct-evt { display: flex; gap: 14px; padding: 10px 0; border-bottom: 1px solid #E2E8F0; font-size: 13px; color: #0F172A; }
.ct-modal .ct-evt-date { flex: 0 0 130px; color: #64748B; font-size: 12px; }
.ct-modal .ct-x-total {
  margin-top: 12px; padding: 10px 12px; border-radius: 10px; font-size: 13px; color: #0F172A; line-height: 1.6;
  background: linear-gradient(135deg, rgba(52, 211, 153, .10), rgba(255, 255, 255, .8)); border: 1px solid rgba(52, 211, 153, .3);
}

/* ── les tuiles de contrats : un bandeau par état (⛔ ÉNUMÉRÉ, R56) ─────────────────────── */
#ct-page .ct-carte.ct-etat-brouillon { background: linear-gradient(135deg, rgba(100,116,139,.07), rgba(255,255,255,.8)); border-color: #E2E8F0; }
#ct-page .ct-carte.ct-etat-brouillon::before { background: linear-gradient(90deg, #94A3B8, rgba(148,163,184,.3)); height: 5px; }
#ct-page .ct-carte.ct-etat-envoye { background: linear-gradient(135deg, rgba(59,130,246,.08), rgba(255,255,255,.8)); border-color: rgba(59,130,246,.2); }
#ct-page .ct-carte.ct-etat-envoye::before { background: linear-gradient(90deg, #3B82F6, rgba(59,130,246,.3)); height: 5px; }
#ct-page .ct-carte.ct-etat-signe { background: linear-gradient(135deg, rgba(16,185,129,.08), rgba(255,255,255,.8)); border-color: rgba(16,185,129,.22); }
#ct-page .ct-carte.ct-etat-signe::before { background: linear-gradient(90deg, #10B981, rgba(16,185,129,.3)); height: 5px; }
#ct-page .ct-carte.ct-etat-actif { background: linear-gradient(135deg, rgba(52,211,153,.14), rgba(255,255,255,.8)); border-color: rgba(52,211,153,.35); }
#ct-page .ct-carte.ct-etat-actif::before { background: linear-gradient(90deg, #34D399, #10B981); height: 5px; }
#ct-page .ct-carte.ct-etat-suspendu { background: linear-gradient(135deg, rgba(245,158,11,.09), rgba(255,255,255,.8)); border-color: rgba(245,158,11,.25); }
#ct-page .ct-carte.ct-etat-suspendu::before { background: linear-gradient(90deg, #F59E0B, rgba(245,158,11,.3)); height: 5px; }
#ct-page .ct-carte.ct-etat-resilie { background: linear-gradient(135deg, rgba(239,68,68,.07), rgba(255,255,255,.8)); border-color: rgba(239,68,68,.2); }
#ct-page .ct-carte.ct-etat-resilie::before { background: linear-gradient(90deg, #EF4444, rgba(239,68,68,.3)); height: 5px; }
#ct-page .ct-carte.ct-etat-termine { background: linear-gradient(135deg, rgba(71,85,105,.07), rgba(255,255,255,.8)); border-color: #CBD5E1; }
#ct-page .ct-carte.ct-etat-termine::before { background: linear-gradient(90deg, #475569, rgba(71,85,105,.3)); height: 5px; }
#ct-page .ct-carte { box-shadow: 0 2px 8px rgba(15, 23, 42, .08), 0 10px 24px -14px rgba(15, 23, 42, .25), inset 0 1px 0 rgba(255, 255, 255, .8); }

@media (max-width: 1024px) {
  .ct-onglets-fiche { padding: 8px 14px; }
  .ct-trunc { max-width: 180px; }
}
@media (max-width: 768px) {
  #ct-page .ct-fact-outils .ct-in { flex: 1 1 100%; }
  .ct-modal .ct-evt { flex-direction: column; gap: 2px; }
  .ct-modal .ct-evt-date { flex: none; }
}
@media (max-width: 480px) {
  #ct-page .ct-table.ct-fact { min-width: 0; }
  .ct-trunc { max-width: 60vw; }
}

/* ══════════════════════════════════════════════════════════════════════════════════════════
   ch.570 — WIZARD : NATURE · ÉTAPE SITES · CONTENEURS · COLLER UNE LISTE · SITES DE LA FICHE
   ⛔ R120 : le modal est monté sur `body` ⇒ tout passe par des CLASSES préfixées `.ct-modal`.
   ⛔ R119 : actif = vert #34D399 / texte #0F172A ; ambre = « à vérifier » ; ⛔ aucun fond sombre.
   ══════════════════════════════════════════════════════════════════════════════════════════ */
.ct-modal .ct-tuiles-nature { grid-template-columns: repeat(3, 1fr); }
.ct-modal .ct-compteur-sites {
  display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 800;
  background: #ECFDF5; color: #065F46; border: 1px solid #A7F3D0;
}
.ct-modal .ct-note-principal { background: #ECFDF5; color: #065F46; padding: 8px 11px; border-radius: 10px; font-weight: 600; }
.ct-modal .ct-rg-note-ambre { background: #FFFBEB; color: #92400E; padding: 8px 11px; border-radius: 10px; border: 1px solid #FDE68A; }
.ct-modal .ct-sites { display: flex; flex-direction: column; gap: 12px; margin-top: 10px; }
.ct-modal .ct-site {
  border: 1px solid #E2E8F0; border-radius: 14px; padding: 12px 14px; background: #fff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .05), 0 6px 16px rgba(15, 23, 42, .06), inset 0 1px 0 rgba(255, 255, 255, .8);
}
.ct-modal .ct-site-tete, .ct-sites-fiche .ct-site-tete { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.ct-modal .ct-site-poignee { cursor: grab; color: #94A3B8; font-size: 18px; user-select: none; }
.ct-modal .ct-site-num, .ct-sites-fiche .ct-site-num {
  display: inline-flex; align-items: center; justify-content: center; min-width: 26px; height: 26px; border-radius: 999px;
  background: #F1F5F9; color: #0F172A; font-size: 12px; font-weight: 800;
}
.ct-modal .ct-site-nom, .ct-sites-fiche .ct-site-nom { font-size: 14px; color: #0F172A; flex: 1 1 140px; min-width: 0; overflow-wrap: anywhere; }
.ct-modal .ct-badge-principal, .ct-sites-fiche .ct-badge-principal {
  padding: 2px 9px; border-radius: 999px; font-size: 11px; font-weight: 800; background: #34D399; color: #0F172A;
}
.ct-modal .ct-badge-verifier { padding: 2px 9px; border-radius: 999px; font-size: 11px; font-weight: 800; background: #FEF3C7; color: #92400E; border: 1px solid #FDE68A; }
.ct-modal .ct-site-outils { display: inline-flex; gap: 6px; margin-left: auto; }
.ct-modal .ct-btn-icone { min-width: 44px; min-height: 44px; padding: 0; display: inline-flex; align-items: center; justify-content: center; font-size: 16px; }
.ct-modal .ct-btn-icone[disabled] { opacity: .35; cursor: default; }
.ct-modal .ct-sites-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 12px; }
.ct-modal .ct-sites-actions .ct-btn, .ct-modal .ct-sites-actions select { min-height: 44px; }
.ct-modal .ct-sites-actions select { flex: 1 1 220px; min-width: 0; }
.ct-modal .ct-collectes { border-top: 1px dashed #E2E8F0; margin-top: 10px; padding-top: 10px; display: flex; flex-direction: column; gap: 10px; }
.ct-modal .ct-collecte { border: 1px solid #E2E8F0; border-radius: 12px; padding: 10px; background: #F8FAFC; }
.ct-modal .ct-collecte-tete { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.ct-modal .ct-collecte .ct-case { min-height: 44px; }
.ct-modal .ct-jours-deduits, .ct-sites-fiche .ct-jours-deduits {
  font-size: 12px; color: #065F46; background: #ECFDF5; padding: 8px 10px; border-radius: 10px; margin-top: 4px;
}
.ct-modal .ct-colle { border: 1px solid #E2E8F0; border-radius: 14px; padding: 12px; background: #F8FAFC; margin-top: 12px; }
.ct-modal .ct-colle-apercu { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.ct-modal .ct-colle-ligne {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; background: #fff; border: 1px solid #E2E8F0;
}
.ct-modal .ct-colle-illisible { background: #FEF2F2; border-color: #FECACA; }
.ct-modal .ct-colle-doublon { background: #FFFBEB; border-color: #FDE68A; }
.ct-modal .ct-colle-case { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
.ct-modal .ct-colle-case input { width: 20px; height: 20px; }
.ct-modal .ct-colle-texte { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; font-size: 12px; color: #475569; overflow-wrap: anywhere; }
.ct-modal .ct-colle-texte b { font-size: 13px; color: #0F172A; }
.ct-modal .ct-colle-etat { font-size: 11px; font-weight: 700; color: #475569; white-space: nowrap; }
.ct-modal .ct-forfaits-sites { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.ct-modal .ct-forfait-site { display: grid; grid-template-columns: minmax(0, 1fr) 140px 170px; gap: 8px; align-items: center; }
.ct-modal .ct-forfait-nom { font-size: 13px; color: #0F172A; overflow-wrap: anywhere; }
.ct-modal .ct-tableau-site-titre, .ct-tableau-site-titre { font-size: 13px; font-weight: 800; color: #0F172A; margin: 14px 0 6px; }
.ct-modal .ct-recap-jours { display: block; font-size: 11px; color: #065F46; font-weight: 500; }
.ct-sites-fiche { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.ct-sites-fiche .ct-site-carte {
  border: 1px solid #E2E8F0; border-radius: 14px; padding: 12px; background: #fff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .05), 0 6px 16px rgba(15, 23, 42, .06);
}
.ct-sites-fiche .ct-site-adr { font-size: 12px; color: #64748B; margin-bottom: 6px; }
.ct-sites-fiche .ct-site-collectes { display: flex; flex-direction: column; gap: 3px; font-size: 12px; color: #334155; margin-top: 6px; }
@media (max-width: 768px) {
  .ct-modal .ct-tuiles-nature { grid-template-columns: 1fr; }
  .ct-modal .ct-forfait-site { grid-template-columns: 1fr 1fr; }
  .ct-modal .ct-forfait-nom { grid-column: 1 / -1; }
}
/* la liste des sites de la fiche passe en cartes pleine largeur SOUS 768 px (A.6) — ⚠️ 767, ⛔ pas 768 */
@media (max-width: 767px) {
  .ct-sites-fiche { grid-template-columns: 1fr; }
}

/* ══ ch.571 — devis du contrat (fiche) · détail par site de la prochaine facture ══ */
.ct-modal .ct-devis-ligne { border-top: 1px solid #E2E8F0; padding: 8px 0; }
.ct-modal .ct-devis-ligne:first-of-type { border-top: none; }
.ct-modal .ct-devis-table .ct-devis-section td { background: #F0FDF4; color: #065F46; }
.ct-modal .ct-sites-detail { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; margin-top: 8px; }
.ct-modal .ct-site-detail { border: 1px solid #E2E8F0; border-radius: 10px; padding: 8px 10px; display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: 13px; }
.ct-modal .ct-site-detail b { overflow-wrap: anywhere; }
@media (max-width: 767px) {
  .ct-modal .ct-sites-detail { grid-template-columns: 1fr; }
}

/* ⭐ ch.574 — assurances et certifications · sections de la proposition (R120 : colonnes par CLASSE, ⛔ en ligne) */
#ct-page .ct-gar-grille, .ct-modal .ct-gar-grille { display: grid; grid-template-columns: 1fr; gap: 12px; margin-top: 12px; }
#ct-page .ct-gar-grille .ct-tile, .ct-modal .ct-gar-grille .ct-tile { margin: 0; min-width: 0; }
@media (min-width: 1025px) { #ct-page .ct-gar-grille, .ct-modal .ct-gar-grille { grid-template-columns: 1fr 1fr; } }
#ct-page .ct-gar-cats, .ct-modal .ct-gar-cats { display: flex; flex-wrap: wrap; gap: 4px 16px; }
#ct-page .ct-gar-cats .ct-rg-coche, .ct-modal .ct-gar-cats .ct-rg-coche { margin-top: 0; min-width: 0; overflow-wrap: anywhere; }
#ct-page .ct-sec-tete, .ct-modal .ct-sec-tete { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; border-top: 1px solid #E2E8F0; margin-top: 10px; padding-top: 6px; color: #0F172A; }

/* ═══ ch.576 — la tuile d'assurance garde ses LOGOS À DROITE, y compris sur téléphone.
   ⚠️ responsive.css:261 (`#pageContent [style*="display:flex"][style*="gap"] { flex-wrap: wrap }`) faisait passer
   la colonne des logos SOUS le texte à ≤1024 px (mesuré au navigateur, 375 px). ⛔ La règle générique n'est PAS
   retirée (R59, elle protège d'autres modules) : on surcharge CE cas, nommément (patron ch.469). ═══ */
#pageContent #ct-page .ct-gar-rang, #pageContent .ct-modal .ct-gar-rang { flex-wrap: nowrap; }