/* =====================================================================================
   Carte de France 3D des IFMK : styles de la pièce « pieces/carte.js ».
   Tout est rangé sous .carte-fr : rien ne sort vers la page du CRM, et les classes
   internes sont préfixées « cf- » pour ne croiser aucune classe du CRM (.carte, .kpi,
   .infobulle…). Les jetons --sc-* et --etape-* sont ceux de l'artefact d'origine
   (archives/carte-tournee-ifmk/carte-ecoles.html), lus par le moteur 3D.
   Thème « sombre » (défaut) : fond marine + rouge PhysioFit. Thème « clair » : l'artefact.
   ===================================================================================== */

.carte-fr,
.carte-fr[data-theme="sombre"] {
  color-scheme: dark;
  --cf-fond: #0b1020;
  --cf-surface: #131a2e;
  --cf-surface-2: #1a2340;
  --cf-encre: #eef1f7;
  --cf-doux: #9aa3b8;
  --cf-trait: #263050;
  --cf-trait-fort: #3a4566;
  --cf-marque: #e63946;
  --cf-marque-fort: #ff6b7a;
  --cf-retard: #ff6b7a;
  --cf-ok: #34d399;
  --cf-focus: #eef1f7;
  --cf-ombre: 0 10px 28px rgba(0, 0, 0, .5);
  --etape-a_contacter: #7b9be8;
  --etape-contacte: #3bbab3;
  --etape-rdv: #f0b23a;
  --etape-devis: #a684ea;
  --etape-signe: #34d399;
  --etape-perdu: #7f8885;
  --sc-plateau: #131c38;
  --sc-socle: #1c2647;
  --sc-terre: #2d3a63;
  --sc-terre-flanc: #1f2a4c;
  --sc-region-0: #3a4774;
  --sc-region-100: #2fb873;
  --sc-bureau: #6e5c45;
  --sc-pied: #5a6280;
  --sc-mur: #dde2ee;
  --sc-toit: #4b5878;
  --sc-mur-signe: #a9e2c4;
  --sc-ecran: #10172b;
  --sc-ecran-encre: #eef1f7;
  --sc-ecran-doux: #9aa3b8;
  --sc-ecran-piste: #263052;
  --sc-cadre: #060913;
  --sc-peau: #c99d7d;
  --sc-siege: #3a4466;
  --sc-pantalon: #232a40;
  --sc-skai: #4f7f79;
  --sc-feuille: #557a4a;
  --sc-pot: #5b5750;
  --sc-ciel: #d4dcf5;
  --sc-sol-lumiere: #262a3d;
}
.carte-fr[data-theme="clair"] {
  color-scheme: light;
  --cf-fond: #eef1f0;
  --cf-surface: #ffffff;
  --cf-surface-2: #f4f6f5;
  --cf-encre: #1a1e1d;
  --cf-doux: #59625f;
  --cf-trait: #d6dcd9;
  --cf-trait-fort: #b8c1be;
  --cf-marque: #e63946;
  --cf-marque-fort: #cf2f3c;
  --cf-retard: #d42c3a;
  --cf-ok: #2e9a57;
  --cf-focus: #1a1e1d;
  --cf-ombre: 0 10px 28px rgba(20, 32, 28, .12);
  --etape-a_contacter: #4f78d1;
  --etape-contacte: #16948e;
  --etape-rdv: #d4930f;
  --etape-devis: #8657cf;
  --etape-signe: #2e9a57;
  --etape-perdu: #98a09d;
  --sc-plateau: #cfdbe2;
  --sc-socle: #c9b493;
  --sc-terre: #f7f7f1;
  --sc-terre-flanc: #cfd6c6;
  --sc-region-0: #dfe2da;
  --sc-region-100: #3a9d5d;
  --sc-bureau: #bfa47e;
  --sc-pied: #8b908e;
  --sc-mur: #ffffff;
  --sc-toit: #62717c;
  --sc-mur-signe: #d9efdf;
  --sc-ecran: #ffffff;
  --sc-ecran-encre: #1a1e1d;
  --sc-ecran-doux: #616a67;
  --sc-ecran-piste: #e3e8e6;
  --sc-cadre: #2b3130;
  --sc-peau: #e7c2a0;
  --sc-siege: #5d6866;
  --sc-pantalon: #3a4245;
  --sc-skai: #6fa39c;
  --sc-feuille: #79a669;
  --sc-pot: #d9d4cb;
  --sc-ciel: #ffffff;
  --sc-sol-lumiere: #d8d2c4;
}

/* ---------- Racine ---------- */
.carte-fr {
  position: relative;
  isolation: isolate;
  width: 100%;
  height: 100%;
  min-height: 320px;
  overflow: hidden;
  background: var(--cf-fond);
  color: var(--cf-encre);
  font-family: inherit;
  font-size: 14px;
  line-height: 1.45;
  text-align: left;
  -webkit-font-smoothing: antialiased;
}
.carte-fr *,
.carte-fr *::before,
.carte-fr *::after { box-sizing: border-box; }
.carte-fr [hidden] { display: none !important; }
.carte-fr .cf-sr {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap; margin: -1px; padding: 0; border: 0;
}

/* ---------- Toile 3D ---------- */
.carte-fr .cf-toile {
  position: absolute; inset: 0; display: block; width: 100%; height: 100%;
  touch-action: none; cursor: grab; outline: none;
}
.carte-fr .cf-toile.cf-survol { cursor: pointer; }
.carte-fr .cf-toile.cf-glisse { cursor: grabbing; }
.carte-fr .cf-toile:focus-visible { outline: 2px solid var(--cf-focus); outline-offset: -2px; }

/* ---------- Étiquettes HTML posées sur la 3D ---------- */
.carte-fr .cf-etiquettes { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.carte-fr .cf-etq {
  position: absolute; left: 0; top: 0; white-space: nowrap; pointer-events: none;
  font-size: 12px; font-weight: 500; line-height: 1.2;
  padding: 3px 7px; border-radius: 4px;
  background: var(--cf-surface); color: var(--cf-encre); border: 1px solid var(--cf-trait);
  will-change: transform;
}
.carte-fr .cf-etq-ecole.cf-etq-sel { background: var(--cf-marque); color: #ffffff; border-color: var(--cf-marque); font-weight: 600; }
.carte-fr .cf-etq-ilot { font-weight: 600; padding: 4px 9px 4px 22px; font-variant-numeric: tabular-nums; }
.carte-fr .cf-etq-ilot::before {
  content: ""; position: absolute; left: 8px; top: 50%; width: 8px; height: 8px; margin-top: -4px;
  border-radius: 2px; background: var(--c, var(--cf-doux));
}
.carte-fr .cf-etq-membre { font-size: 11.5px; padding: 2px 6px 2px 18px; }
.carte-fr .cf-etq-membre::before {
  content: ""; position: absolute; left: 6px; top: 50%; width: 7px; height: 7px; margin-top: -3.5px;
  border-radius: 50%; background: var(--c, var(--cf-doux));
}
.carte-fr .cf-etq-zone { font-size: 11.5px; font-weight: 600; background: var(--cf-surface-2); font-variant-numeric: tabular-nums; }
.carte-fr .cf-etq-tuile {
  font-size: 11px; font-weight: 600; background: transparent; border-color: transparent; color: var(--cf-doux); padding: 0 2px;
}

/* ---------- Infobulle, message ---------- */
.carte-fr .cf-infobulle {
  position: absolute; z-index: 4; left: 0; top: 0; max-width: 300px; pointer-events: none;
  padding: 10px 12px; border-radius: 8px;
  background: var(--cf-surface); color: var(--cf-encre); border: 1px solid var(--cf-trait-fort); box-shadow: var(--cf-ombre);
  font-size: 13px; line-height: 1.4;
}
.carte-fr .cf-infobulle strong { display: block; margin-bottom: 3px; font-weight: 600; }
.carte-fr .cf-infobulle .cf-ligne { display: block; color: var(--cf-doux); }
.carte-fr .cf-infobulle .cf-etape { display: flex; align-items: center; gap: 6px; margin-top: 4px; font-weight: 600; color: var(--cf-encre); }
.carte-fr .cf-infobulle .cf-etape::before { content: ""; width: 8px; height: 8px; border-radius: 2px; background: var(--c, var(--cf-doux)); flex: none; }
.carte-fr .cf-infobulle .cf-retard { display: block; margin-top: 4px; color: var(--cf-retard); font-weight: 600; }
.carte-fr .cf-message {
  position: absolute; z-index: 2; left: 50%; top: 44%; transform: translate(-50%, -50%);
  width: min(440px, calc(100% - 32px)); pointer-events: none; text-align: center;
  padding: 14px 18px; border-radius: 8px;
  background: var(--cf-surface); border: 1px solid var(--cf-trait-fort); box-shadow: var(--cf-ombre);
}
.carte-fr .cf-message p { margin: 0; font-size: 15px; font-weight: 500; }

/* ---------- Commandes de vue ---------- */
.carte-fr .cf-commandes { position: absolute; z-index: 3; right: 12px; bottom: 12px; display: flex; gap: 6px; }
.carte-fr .cf-btn {
  -webkit-appearance: none; appearance: none; margin: 0;
  min-height: 36px; padding: 0 12px;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  border: 1px solid var(--cf-trait-fort); border-radius: 6px;
  background: var(--cf-surface); color: var(--cf-encre);
  font: inherit; font-size: 14px; font-weight: 500; line-height: 1; cursor: pointer; white-space: nowrap;
}
.carte-fr .cf-btn:hover { background: var(--cf-surface-2); }
.carte-fr .cf-btn:focus-visible { outline: 2px solid var(--cf-focus); outline-offset: 2px; }
.carte-fr .cf-btn-carre { width: 36px; padding: 0; font-size: 18px; }
.carte-fr .cf-btn-marque { background: var(--cf-marque); border-color: var(--cf-marque); color: #ffffff; font-weight: 600; }
.carte-fr .cf-btn-marque:hover { background: var(--cf-marque-fort); border-color: var(--cf-marque-fort); }
.carte-fr .cf-aide {
  position: absolute; z-index: 1; left: 14px; bottom: 14px; right: 300px; margin: 0;
  font-size: 12px; color: var(--cf-doux); pointer-events: none;
}
.carte-fr .cf-aide-tactile { display: none; }

/* ---------- Repli sans WebGL : les écoles par étape ---------- */
.carte-fr .cf-grille { position: absolute; inset: 0; overflow: auto; padding: 16px 16px 68px; display: grid; gap: 14px; align-content: start; }
.carte-fr .cf-grille-note { margin: 0; font-size: 13px; color: var(--cf-doux); }
.carte-fr .cf-colonnes { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; align-items: start; }
.carte-fr .cf-colonne h3 { margin: 0 0 6px; font-size: 13px; font-weight: 600; display: flex; align-items: center; gap: 8px; color: var(--cf-encre); }
.carte-fr .cf-colonne h3::before { content: ""; width: 9px; height: 9px; border-radius: 2px; background: var(--c, var(--cf-doux)); }
.carte-fr .cf-colonne ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.carte-fr .cf-carte-ecole {
  -webkit-appearance: none; appearance: none; margin: 0;
  width: 100%; text-align: left; display: grid; gap: 2px; padding: 9px 11px; min-height: 44px;
  border: 1px solid var(--cf-trait); border-radius: 6px; background: var(--cf-surface); color: var(--cf-encre);
  font: inherit; font-size: 13.5px; cursor: pointer;
}
.carte-fr .cf-carte-ecole:hover { border-color: var(--cf-trait-fort); }
.carte-fr .cf-carte-ecole:focus-visible { outline: 2px solid var(--cf-focus); outline-offset: 2px; }
.carte-fr .cf-carte-ecole strong { font-weight: 600; }
.carte-fr .cf-sous { font-size: 12.5px; color: var(--cf-doux); }
.carte-fr .cf-carte-ecole .cf-retard { font-size: 12.5px; color: var(--cf-retard); font-weight: 600; }

/* ---------- Conteneur étroit (classe posée par le script selon la largeur réelle) ---------- */
.carte-fr.cf-etroit .cf-commandes { top: 10px; bottom: auto; right: 10px; flex-direction: column; align-items: flex-end; }
/* bloc étroit (téléphone) : l'aide recouvrait le haut de la carte ; elle est masquée (la toile garde les mêmes consignes en aria-label) */
.carte-fr.cf-etroit .cf-aide { display: none; }
.carte-fr.cf-etroit .cf-btn { min-height: 44px; }
.carte-fr.cf-etroit .cf-btn-carre { width: 44px; }

@media (pointer: coarse) {
  .carte-fr .cf-aide-souris { display: none; }
  .carte-fr .cf-aide-tactile { display: inline; }
  .carte-fr .cf-btn { min-height: 44px; }
  .carte-fr .cf-btn-carre { width: 44px; }
}