/* ============================================================
   styleCHASSEINFO.css  —  Sky & White theme
   ChasseInfo v4 — fond blanc, bleu ciel, moderne iOS
   ============================================================ */

/* ---- Variables ---- */
:root {
  --ci-blue-deep:   #1565C0;
  --ci-blue:        #1976D2;
  --ci-blue-mid:    #2196F3;
  --ci-blue-light:  #64B5F6;
  --ci-blue-sky:    #90CAF9;
  --ci-blue-tint:   #E3F2FD;
  --ci-blue-tint2:  #BBDEFB;

  --ci-white:       #FFFFFF;
  --ci-bg:          #FFFFFF;
  --ci-bg2:         #F7FAFF;
  --ci-surface:     #FFFFFF;
  --ci-border:      #DDEAF8;
  --ci-border2:     #B3CDE8;

  --ci-text:        #0D2137;
  --ci-text-mid:    #2C5282;
  --ci-text-dim:    #5A7FA8;
  --ci-text-muted:  #90A4AE;

  --ci-red:         #EF9A9A;
  --ci-orange:      #FFCC80;
  --ci-green:       #A5D6A7;
  --ci-amber:       #FFE082;

  --ci-radius-xl:   24px;
  --ci-radius-lg:   16px;
  --ci-radius:      12px;
  --ci-radius-sm:   8px;

  --ci-shadow:      0 4px 20px rgba(0,0,0,0.25);
  --ci-shadow-sm:   0 2px 10px rgba(0,0,0,0.18);
  --ci-shadow-btn:  0 4px 14px rgba(0,0,0,0.20);

  --ci-transition:  0.2s ease;
}

/* ============================================================
   BASE
   ============================================================ */

/* Base 17px : toutes les valeurs em de l'appli montent de ~6% sans toucher au code */
html {
  font-size: 17px;
  /* Sur Android edge-to-edge (API 35+), la status bar transparente laisse voir le fond html.
     On met le bleu appli ici pour qu'il apparaisse derrière la barre native. */
  background: #1565C0;
  background-color: #1565C0;
}

body {
  font-family: 'Roboto', 'Inter', 'Segoe UI', Arial, sans-serif;
  background: #ffffff;
  background-color: #ffffff;
  min-height: 100vh;
  color: var(--ci-text);
  -webkit-font-smoothing: antialiased;
}

/* ============================================================
   TOPBAR / TOOLBAR  — blanc sur fond bleu
   ============================================================ */
.toolbar {
  background: #FFFFFF !important;
  border-bottom: 1px solid rgba(21,101,192,0.15) !important;
  box-shadow: 0 2px 12px rgba(0,0,0,0.12) !important;
  height: 56px !important;
}

.toolbar__left,
.toolbar__center,
.toolbar__right {
  color: var(--ci-blue-deep) !important;
}

.toolbar__center {
  font-size: 1.05em;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--ci-blue-deep) !important;
}

.toolbar-button {
  color: var(--ci-blue) !important;
  font-size: 1.1em !important;
}

.back-button {
  color: var(--ci-blue) !important;
}

.back-button__label {
  color: var(--ci-blue) !important;
}

/* ============================================================
   SIDEBAR / MENU
   ============================================================ */
ons-splitter-side,
ons-splitter-side .page,
ons-splitter-side .page__background,
ons-splitter-side .page__content {
  background: linear-gradient(180deg, #1565C0 0%, #1976D2 100%) !important;
  background-color: #1565C0 !important;
  border-right: none !important;
  box-shadow: 4px 0 24px rgba(0,0,0,0.25) !important;
}

/* Header sidebar avec logo */
.ci-sidebar-header {
  padding: 24px 16px 16px;
  border-bottom: 1px solid rgba(255,255,255,0.15);
  text-align: center;
}

.ci-sidebar-logo {
  max-height: 40px;
  width: auto;
  filter: brightness(10);
  opacity: 0.90;
}

.ci-sidebar-list {
  margin-top: 8px !important;
}

.ci-sidebar-version {
  position: absolute;
  bottom: 16px;
  left: 0; right: 0;
  text-align: center;
  color: rgba(255,255,255,0.40);
  font-size: 0.75em;
  letter-spacing: 0.05em;
}

.ci-sidebar-icon {
  color: rgba(255,255,255,0.75) !important;
  font-size: 1.1em !important;
  width: 22px;
  text-align: center;
}

ons-splitter-side .list-item {
  background: transparent !important;
  border-bottom: 1px solid rgba(255,255,255,0.10) !important;
  color: #FFFFFF !important;
  font-size: 0.95em;
  font-weight: 500;
  padding: 14px 16px !important;
  transition: background var(--ci-transition), padding-left var(--ci-transition);
}

ons-splitter-side .list-item .list-item__center,
ons-splitter-side .list-item .center {
  color: #FFFFFF !important;
  font-weight: 500;
}

ons-splitter-side .list-item .list-item__left,
ons-splitter-side .list-item .left {
  color: rgba(255,255,255,0.75) !important;
  padding-right: 14px !important;
  min-width: 36px;
}

ons-splitter-side .list-item:last-child {
  border-bottom: none !important;
}

ons-splitter-side .list-item--tappable:active {
  background: rgba(255,255,255,0.15) !important;
  padding-left: 22px !important;
}

ons-splitter-side ons-icon {
  color: rgba(255,255,255,0.80) !important;
  font-size: 1.05em;
}

/* ============================================================
   PAGE & CONTENT
   Onsen force background:none sur .page et .page__content,
   on cible .page__background pour appliquer le dégradé.
   ============================================================ */
.page {
  background: transparent !important;
  color: var(--ci-text) !important;
}

.page__content {
  background: transparent !important;
}

.page__background {
  background: #ffffff !important;
  background-color: #ffffff !important;
}

ons-splitter-content,
ons-splitter-content > .page__background,
ons-navigator > .page__background {
  background: #ffffff !important;
  background-color: #ffffff !important;
}

/* ============================================================
   BOUTONS — pill blanc sur fond bleu
   ============================================================ */
.button,
ons-button .button {
  background: #FFFFFF !important;
  color: var(--ci-blue-deep) !important;
  border: none !important;
  border-radius: var(--ci-radius-xl) !important;
  box-shadow: 0 4px 16px rgba(0,0,0,0.18) !important;
  font-weight: 700 !important;
  font-size: 0.95em !important;
  letter-spacing: 0.03em;
  padding: 12px 22px !important;
  line-height: 1.3em;
  min-width: 90%;
  transition: filter var(--ci-transition), transform var(--ci-transition), box-shadow var(--ci-transition) !important;
  text-shadow: none;
}

.button:active {
  filter: brightness(0.94) !important;
  transform: scale(0.97) !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.12) !important;
}

.buttonMED {
  line-height: 1.3em;
  min-width: auto !important;
  background: #FFFFFF !important;
  color: var(--ci-blue-deep) !important;
  border-radius: var(--ci-radius-xl) !important;
  font-weight: 700 !important;
  box-shadow: 0 4px 16px rgba(0,0,0,0.18) !important;
  padding: 10px 18px !important;
}

.buttonPRELEV {
  line-height: 1.3em;
  min-width: 10% !important;
  background: #FFFFFF !important;
  color: #E65100 !important;
  border-radius: var(--ci-radius-xl) !important;
  font-weight: 700 !important;
  box-shadow: 0 4px 16px rgba(0,0,0,0.18) !important;
}

/* Bouton rouge — blanc + texte rouge */
ons-button[style*="red"] .button,
.button[style*="#ff0000"],
.button[style*="red"] {
  background: #FFFFFF !important;
  color: #C62828 !important;
  box-shadow: 0 4px 16px rgba(0,0,0,0.18) !important;
}

/* Bouton bleu explicite */
ons-button[style*="#3498db"] .button {
  background: #FFFFFF !important;
  color: var(--ci-blue-deep) !important;
}

/* Bouton orange/alerte */
ons-button[style*="#fd7e14"] .button,
ons-button[style*="orange"] .button {
  background: #FFFFFF !important;
  color: #E65100 !important;
  box-shadow: 0 4px 16px rgba(0,0,0,0.18) !important;
}

/* Bouton vert (valider, connexion) */
ons-button[style*="#35ff84"] .button,
ons-button[style*="#27ae60"] .button {
  background: #FFFFFF !important;
  color: #2E7D32 !important;
  box-shadow: 0 4px 16px rgba(0,0,0,0.18) !important;
}

/* Bouton calendrier */
#btnCALENDARmap {
  background: rgba(255,255,255,0.20) !important;
  border: 1px solid rgba(255,255,255,0.50) !important;
  border-radius: var(--ci-radius-lg) !important;
  font-size: 0.9em !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15) !important;
  padding: 8px 14px !important;
  font-weight: 700 !important;
  color: #fff !important;
}

.btnMOMENTdate {
  vertical-align: bottom;
  padding: 9px 18px !important;
  border-radius: var(--ci-radius-xl) !important;
  margin-bottom: 10px;
  background: #FFFFFF !important;
  color: var(--ci-blue-deep) !important;
  font-weight: 700 !important;
  box-shadow: 0 4px 16px rgba(0,0,0,0.18) !important;
}

/* ============================================================
   FAB BUTTONS (carte)
   ============================================================ */
ons-fab.fab,
ons-speed-dial-item.fab,
button.fab {
  background: #FFFFFF !important;
  color: var(--ci-blue-deep) !important;
  font-size: 22px !important;
  line-height: 33px !important;
  box-shadow: 0 6px 20px rgba(0,0,0,0.25) !important;
  border: none !important;
}

ons-fab.fab ons-icon,
ons-speed-dial-item.fab ons-icon {
  color: var(--ci-blue-deep) !important;
}

/* ============================================================
   LISTE / LIST-ITEMS
   ============================================================ */
.list-item {
  background-color: rgba(255,255,255,0.10) !important;
  border-bottom: 1px solid rgba(255,255,255,0.15) !important;
  color: #fff !important;
  transition: background var(--ci-transition);
}

.list-item--tappable:active {
  background-color: rgba(255,255,255,0.22) !important;
}

.list-item__center {
  color: #fff !important;
  font-weight: 500;
}

.list-item__right,
.list-item__left {
  color: rgba(255,255,255,0.70) !important;
}

/* ============================================================
   MODAL SPINNER
   ============================================================ */
ons-modal {
  background: rgba(13,71,161,0.88) !important;
  backdrop-filter: blur(5px) !important;
}

ons-modal ons-icon {
  color: #fff !important;
}

#infoLOADER {
  color: rgba(255,255,255,0.90) !important;
  font-size: 1em;
  font-weight: 600;
  letter-spacing: 0.03em;
}

/* ============================================================
   HOME PAGE
   ============================================================ */
#home .page__content {
  background: transparent !important;
}

#menuAPPLI {
  padding: 12px 16px;
}

#logoFEDE {
  opacity: 1;
  filter: none;
}

/* ---- Bloc texte intro ---- */


/* ---- Boutons sélection département ---- */
#menuAPPLI .user_cover {
  margin: 8px 0 !important;
}

#menuAPPLI ons-button .button,
#menuAPPLI .buttonMED {
  width: 260px !important;
  min-width: 260px !important;
  max-width: 92vw !important;
  padding: 14px 20px !important;
  font-size: 1em !important;
  font-weight: 700 !important;
  border-radius: var(--ci-radius-xl) !important;
  background: rgba(255,255,255,0.92) !important;
  color: var(--ci-blue-deep) !important;
  box-shadow: 0 4px 18px rgba(0,0,0,0.16) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px;
  text-align: center !important;
}

/* ============================================================
   CARTE / MAP
   ============================================================ */
.legendeZONE {
  position: absolute;
  left: 14px;
  bottom: 90px;
  margin-right: 12px;
  font-size: 0.72em;
  z-index: 999999;
  background: rgba(255,255,255,0.92);
  color: var(--ci-blue-deep);
  font-weight: bold;
  border: 1px solid rgba(21,101,192,0.20);
  border-radius: var(--ci-radius-sm);
  padding: 6px 10px;
  backdrop-filter: blur(6px);
  box-shadow: var(--ci-shadow-sm);
}

.menuZONEgeo {
  position: absolute;
  left: 10px;
  z-index: 999999;
}

.menuZONE {
  position: absolute;
  left: 10px;
  top: 48px;
  width: 40px;
  min-width: 40px;
  z-index: 999999;
}

.btnMENUzone2 {
  display: inline-block;
}

.btnMENUzone2 button,
.btnMENUzone3 button {
  background: rgba(255,255,255,0.92) !important;
  border: none !important;
  color: var(--ci-blue-deep) !important;
  border-radius: var(--ci-radius-sm) !important;
  padding: 8px 12px !important;
  font-size: 0.82em;
  font-weight: 700;
  max-width: 50%;
  backdrop-filter: blur(6px);
  box-shadow: 0 2px 10px rgba(0,0,0,0.20);
}

.btnMENUzone3 {
  display: inline-block;
  margin-top: 10px;
}

.btnPERIODES {
  margin-top: 10px;
  display: none;
}

.btnPERIODESbutton {
  vertical-align: bottom;
  padding: 8px 14px !important;
  border-radius: var(--ci-radius-lg) !important;
  font-size: 0.85em;
  font-weight: 600;
  box-shadow: var(--ci-shadow-sm) !important;
}

.greyed {
  background: rgba(120,140,160,0.75) !important;
  opacity: 0.9;
}

#warnPERIODEdiff {
  margin: 15px auto;
  width: 80%;
  border: 2px solid var(--ci-amber) !important;
  border-radius: var(--ci-radius) !important;
  padding: 16px 12px;
  font-size: 0.88em;
  color: var(--ci-text) !important;
  background: #FFFDE7 !important;
  box-shadow: 0 2px 10px rgba(249,168,37,0.18);
}

/* Informations département (ciDocViewer) */
.ci-infos-dept { padding: 4px 2px; }
.ci-info-bloc {
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid #EEF3FA;
}
.ci-info-bloc h2 {
  font-size: 1.05em;
  color: #1565C0;
  margin: 0 0 8px;
}
.ci-info-long { font-size: 0.92em; line-height: 1.55; color: #333; }

/* Rubriques de navigation */
.ci-info-rubriques {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}
.ci-info-rubrique {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #E3F2FD;
  color: #1565C0;
  border: 1px solid #90CAF9;
  border-radius: 20px;
  padding: 10px 18px;
  font-size: 0.95em;
  font-weight: 700;
  cursor: pointer;
}
.ci-info-rubrique:active { background: #BBDEFB; }

/* Tampon de validation des informations */
.ci-info-tampon {
  margin-top: 10px;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 0.82em;
  font-weight: 600;
  line-height: 1.4;
}
.ci-info-tampon--ok {
  color: #1B5E20;
  background: #E8F5E9;
  border: 1px solid #A5D6A7;
}
.ci-info-tampon--ko {
  color: #B71C1C;
  background: #FFEBEE;
  border: 1px solid #EF9A9A;
}

/* Rubrique Numéros utiles */
.ci-info-numeros { line-height: 2; }
.ci-info-numeros a {
  color: #1565C0;
  font-weight: 700;
  text-decoration: none;
}
.ci-info-numeros a:active { color: #0D47A1; }

.ci-vignette-canvas {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: 996;
  display: none;
}

/* Voile rouge : jour avec différence matin/après-midi, en attente d'une sélection */
.ci-cal-red-overlay {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: none; /* la carte reste manipulable */
  z-index: 997;
  background: rgba(200, 0, 0, 0.28);
  animation: ci-red-pulse 1.6s ease-in-out infinite;
}

@keyframes ci-red-pulse {
  0%, 100% { background: rgba(200, 0, 0, 0.20); }
  50%      { background: rgba(200, 0, 0, 0.34); }
}

.cibleCENTERED {
  display: none;
  position: absolute;
  z-index: 9999;
  top: calc(50% - 40px);
  left: calc(50% - 40px);
  filter: drop-shadow(0 2px 8px rgba(21,101,192,0.5));
}

/* Mode CAL : bouton de chargement manuel des zones du secteur affiché */
.ci-btn-charger-secteur {
  position: fixed;
  bottom: 70px; /* valeur par défaut, recalculée par JS */
  left: 50%;
  transform: translateX(-50%);
  z-index: 10004; /* au-dessus de tout : cal-bar(10001), bottom-bar(10003) */
  border: none;
  border-radius: 26px;
  padding: 13px 24px;
  font-size: 1.05em;
  font-weight: 700;
  color: #fff;
  background: #1565C0;
  box-shadow: 0 3px 10px rgba(0,0,0,0.3);
  cursor: pointer;
  white-space: nowrap;
  animation: ci-charger-pop 0.18s ease-out;
}
.ci-btn-charger-secteur:active { background: #0D47A1; }

@keyframes ci-charger-pop {
  0%   { opacity: 0; transform: translateX(-50%) translateY(6px); }
  100% { opacity: 1; transform: translateX(-50%) translateY(0); }
}

.ol-scale-line {
  bottom: 100px;
  left: 10px;
  max-width: 48%;
  background: rgba(255,255,255,0.80);
  border-radius: var(--ci-radius-sm);
  color: var(--ci-text);
  box-shadow: var(--ci-shadow-sm);
}

.ol-scale-line-inner {
  border-color: var(--ci-blue);
  color: var(--ci-text-mid);
}

.ol-attribution.ol-uncollapsible { bottom: -50px !important; }
.ol-zoom-in, .ol-zoom-out, .ol-zoomslider { display: none !important; }

/* Boutons centrer/géoloc carte */
#ICONgeolocBOUTON button,
#ICONgeolocENATTENTE button {
  background: rgba(255,255,255,0.92) !important;
  border: 1px solid var(--ci-border2) !important;
  color: var(--ci-text-mid) !important;
  backdrop-filter: blur(6px);
  border-radius: var(--ci-radius-sm) !important;
  box-shadow: var(--ci-shadow-sm) !important;
  font-weight: 600;
}

/* ============================================================
   POPOVERS / CALENDRIER
   ============================================================ */
.popover__content {
  background: var(--ci-white) !important;
  border: 1px solid var(--ci-border) !important;
  border-radius: var(--ci-radius) !important;
  box-shadow: var(--ci-shadow) !important;
  color: var(--ci-text) !important;
}

.popover__arrow {
  background: var(--ci-white) !important;
  border-color: var(--ci-border) !important;
}

.calendar-popover .popover__content {
  width: 285px !important;
}

/* ============================================================
   JQUERY CONFIRM ($.confirm)
   ============================================================ */
.jconfirm-bg,
.jconfirm.jconfirm-light .jconfirm-bg {
  opacity: 0.55 !important;
  background-color: #0D47A1 !important;
}

.jconfirm .jconfirm-box {
  background: #FFFFFF !important;
  border: none !important;
  border-radius: var(--ci-radius-lg) !important;
  box-shadow: 0 12px 50px rgba(0,0,0,0.30) !important;
  color: var(--ci-blue-deep) !important;
  overflow: hidden;
}

.jconfirm .jconfirm-box .jconfirm-title-c {
  background: #FFFFFF !important;
  color: var(--ci-blue-deep) !important;
  border-bottom: 2px solid var(--ci-blue-tint2) !important;
  font-size: 1.05em !important;
  font-weight: 700 !important;
  letter-spacing: 0.03em;
  padding: 16px 20px !important;
}

.jconfirm .jconfirm-box .jconfirm-content {
  color: #333 !important;
  padding: 16px 20px !important;
  font-size: 0.95em;
  line-height: 1.65;
}

.jconfirm.jconfirm-white .jconfirm-box .jconfirm-buttons button,
.jconfirm.jconfirm-light .jconfirm-box .jconfirm-buttons button {
  font-size: 14px !important;
  margin: 6px !important;
  border-radius: var(--ci-radius-xl) !important;
  font-weight: 700 !important;
  padding: 10px 22px !important;
  transition: filter var(--ci-transition), transform var(--ci-transition) !important;
}

.jconfirm-box .jconfirm-buttons button.btn-default {
  background: linear-gradient(135deg, var(--ci-blue-mid) 0%, var(--ci-blue) 100%) !important;
  color: #fff !important;
  border: none !important;
  box-shadow: 0 4px 14px rgba(21,101,192,0.35) !important;
  margin: 5px !important;
}

.jconfirm-box .jconfirm-buttons button.btn-default:active {
  filter: brightness(1.08) !important;
  transform: scale(0.97) !important;
}

.jconfirm .jconfirm-scrollpane {
  width: 94% !important;
  margin: auto !important;
}

/* ============================================================
   ALERTS / DIALOGS ONSEN
   ============================================================ */
.alert-dialog {
  background: #FFFFFF !important;
  border: none !important;
  border-radius: var(--ci-radius-lg) !important;
  box-shadow: 0 12px 50px rgba(0,0,0,0.30) !important;
  overflow: hidden;
}

.alert-dialog-title {
  background: #FFFFFF !important;
  color: var(--ci-blue-deep) !important;
  font-size: 1em !important;
  font-weight: 700 !important;
  padding: 14px 18px !important;
  border-bottom: 2px solid #E3F2FD !important;
  letter-spacing: 0.04em;
}

.alert-dialog-content {
  color: #333 !important;
  padding: 16px 18px !important;
  font-size: 0.92em;
  line-height: 1.65;
}

.alert-dialog-footer {
  border-top: 1px solid #E3F2FD !important;
}

.alert-dialog-button {
  color: var(--ci-blue) !important;
  font-weight: 700 !important;
}

ons-dialog .page {
  background: #FFFFFF !important;
}

/* ============================================================
   BADGES
   ============================================================ */
.badge {
  background-color: var(--ci-blue);
  color: #fff;
  border-radius: 50%;
  padding: 2px 5px;
  font-size: 0.72em;
  font-weight: 700;
  box-shadow: 0 0 6px rgba(21,101,192,0.30);
}

.badgeBIG {
  background-color: var(--ci-blue);
  color: #fff;
  border-radius: 50%;
  padding: 4px 8px;
  font-size: 1em;
  font-weight: 700;
}

/* ============================================================
   FORMULAIRES / INPUTS
   ============================================================ */
.text-input,
.search-input,
ons-search-input input {
  background-color: var(--ci-bg2) !important;
  color: var(--ci-text) !important;
  border-bottom: 2px solid var(--ci-blue-light) !important;
  border-radius: var(--ci-radius-sm) var(--ci-radius-sm) 0 0 !important;
}

.text-input:focus,
.search-input:focus {
  border-bottom-color: var(--ci-blue) !important;
  box-shadow: 0 2px 0 var(--ci-blue) !important;
}

.text-input::placeholder,
.search-input::placeholder {
  color: var(--ci-text-muted) !important;
}

.search-input {
  border: 1px solid var(--ci-border2);
  background-color: var(--ci-bg2);
  height: 40px;
  font-size: 17px;
  width: 228px !important;
  border-radius: var(--ci-radius-sm) !important;
}

.form-control {
  display: block;
  width: 90%;
  height: 36px;
  padding: 0 12px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--ci-text);
  background-color: var(--ci-bg2);
  border: 1px solid var(--ci-border2);
  border-radius: var(--ci-radius-sm);
  box-shadow: inset 0 1px 3px rgba(21,101,192,0.06);
  transition: border-color var(--ci-transition), box-shadow var(--ci-transition);
}

.form-control:focus {
  border-color: var(--ci-blue);
  outline: 0;
  box-shadow: inset 0 1px 3px rgba(21,101,192,0.06), 0 0 0 3px rgba(33,150,243,0.15);
}

.form-control::placeholder {
  color: var(--ci-text-muted);
}

/* ============================================================
   CHECKBOXES / SWITCHES
   ============================================================ */
:checked + .switch__toggle {
  background-color: var(--ci-blue) !important;
}

:checked + .checkbox__checkmark::before {
  background: var(--ci-blue) !important;
  border: none;
}

/* ============================================================
   SEGMENTS
   ============================================================ */
.segment__button {
  background: var(--ci-bg2) !important;
  color: var(--ci-text-dim) !important;
  border: 1px solid var(--ci-border2) !important;
  font-size: 0.85em;
  font-weight: 500;
}

.segment__input:checked + .segment__button {
  background: var(--ci-blue) !important;
  color: #fff !important;
  border-color: var(--ci-blue) !important;
  box-shadow: 0 2px 8px rgba(21,101,192,0.25);
  font-weight: 700;
}

/* ============================================================
   THUMBNAILS / TUILES MENU
   ============================================================ */
.user_cover {
  margin: 10px 0 20px 0;
}

.user_thumbnail {
  border: 1.5px solid var(--ci-border2);
  color: var(--ci-white);
  background: linear-gradient(135deg, var(--ci-blue-mid) 0%, var(--ci-blue-deep) 100%);
  border-radius: var(--ci-radius-lg);
  padding: 12px 8px;
  width: 40%;
  display: table;
  text-align: center;
  margin: auto;
  box-shadow: var(--ci-shadow-sm);
  transition: filter var(--ci-transition), transform var(--ci-transition);
}

.user_thumbnail:active {
  filter: brightness(1.1);
  transform: scale(0.97);
}

.user_thumbnail ons-icon {
  font-size: 26px;
  display: table-cell;
  vertical-align: middle;
  color: #fff;
}

.user_thumbnailMENUz {
  border: 1.5px solid var(--ci-border2);
  color: var(--ci-text);
  background: var(--ci-white);
  border-radius: var(--ci-radius-lg);
  padding: 12px 8px;
  width: 80%;
  display: block;
  text-align: center;
  margin: auto;
  box-shadow: var(--ci-shadow-sm);
  transition: background var(--ci-transition);
}

.user_thumbnailMENUz:active {
  background: var(--ci-blue-tint);
}

.user_thumbnailMENUz ons-icon {
  font-size: 34px;
  vertical-align: middle;
  color: var(--ci-blue);
}

/* ============================================================
   DATEPICKER jQuery UI — thème clair bleu
   ============================================================ */
.ui-datepicker {
  width: 98%;
  background: var(--ci-white) !important;
  border: 1px solid var(--ci-border) !important;
  border-radius: var(--ci-radius) !important;
  box-shadow: var(--ci-shadow) !important;
  color: var(--ci-text) !important;
}

.ui-datepicker-header {
  background: linear-gradient(135deg, #1565C0 0%, #2196F3 100%) !important;
  color: #fff !important;
  border: none !important;
  border-radius: var(--ci-radius) var(--ci-radius) 0 0 !important;
  font-weight: 700;
}

.ui-datepicker-prev,
.ui-datepicker-next {
  color: #fff !important;
}

.ui-datepicker-prev .ui-icon,
.ui-datepicker-next .ui-icon {
  background-image: none !important;
  text-indent: 0 !important;
  font-size: 1em;
  color: #fff !important;
}

.ui-datepicker-prev .ui-icon::before { content: '‹'; }
.ui-datepicker-next .ui-icon::before { content: '›'; }

.ui-datepicker th {
  color: var(--ci-text-dim) !important;
}

.ui-datepicker td a,
.ui-datepicker td span {
  background: var(--ci-bg2) !important;
  color: var(--ci-text) !important;
  border: 1px solid var(--ci-border) !important;
  border-radius: var(--ci-radius-sm) !important;
  text-decoration: none;
}

.ui-datepicker td a:hover {
  background: var(--ci-blue-tint2) !important;
  color: var(--ci-blue-deep) !important;
}

.ui-datepicker .ui-state-highlight a,
.ui-datepicker .ui-state-active a {
  background: var(--ci-blue) !important;
  color: #fff !important;
  border-color: var(--ci-blue) !important;
  box-shadow: 0 2px 8px rgba(21,101,192,0.30) !important;
}

.ui-widget {
  font-size: 1em !important;
  font-family: 'Roboto', Arial, sans-serif !important;
}

.ui-autocomplete {
  max-height: 200px;
  overflow-y: auto;
  overflow-x: hidden;
  background: var(--ci-white) !important;
  border: 1px solid var(--ci-border) !important;
  border-radius: var(--ci-radius-sm) !important;
  color: var(--ci-text) !important;
  box-shadow: var(--ci-shadow) !important;
}

.ui-menu-item-wrapper:hover {
  background: var(--ci-blue-tint) !important;
  color: var(--ci-blue-deep) !important;
}

/* ============================================================
   MISC UTILITAIRES
   ============================================================ */
.ligne_espace5  { min-height: 5px; height: 5px; }
.ligne_espace10 { min-height: 8px; height: 8px; }
.hidden { display: none; }
.Bcenter { text-align: center; }
.formCOLg { width: 70%; text-align: center; }
.formCOLw { width: 100%; text-align: center; }

.blink {
  color: var(--ci-blue);
  opacity: 1;
  animation: colorblink 1s infinite;
  text-decoration: none;
}
@keyframes colorblink {
  0%   { }
  50%  { opacity: 0.15; }
}

/* Icône clignotante : indique que le mode Alerte est en cours */
.ci-blink {
  animation: ci-blink-anim 1s ease-in-out infinite;
}
@keyframes ci-blink-anim {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.35; transform: scale(1.18); }
}

.page .norm {
  font-weight: bold;
  font-size: 0.85em;
  color: var(--ci-text);
}
.page .grise {
  font-size: 0.85em;
  color: var(--ci-text-dim);
}
.page .nomod {
  font-size: 0.85em;
  color: var(--ci-red);
}

.redStar {
  font-size: 1.6em;
  color: var(--ci-red);
  position: relative;
  top: 0.2em;
}

.espaceCONTACT {
  margin-top: 35px;
  display: none;
}

.countTOTAL {
  line-height: 1.2em;
  font-weight: bold;
  font-size: 1.4em;
  color: var(--ci-blue);
}

.cS-hidden {
  height: 1px;
  opacity: 0;
  filter: alpha(opacity=0);
  overflow: hidden;
}

.espaceBR {
  display: block;
  height: 2px;
}

/* Couleurs d'état */
.coulBLEU       { background-color: #29A1BA !important; }
.coul_vivant    { background-color: #43A047 !important; }
.coul_predation { background-color: #E53935 !important; }
.coul_rose      { background-color: #D81B60 !important; }
.coul_collision { background-color: #F57C00 !important; }
.coul_indice    { background-color: #6D4C41 !important; }

.coulBLEUcolETAT    { border-right: 5px solid #29A1BA; }
.coulVERTcolETAT    { border-right: 5px solid #43A047; }
.coulROUGEcolETAT   { border-right: 5px solid #E53935; }
.coulROSEcolETAT    { border-right: 5px solid #D81B60; }
.coulORANGEcolETAT  { border-right: 5px solid #F57C00; }
.coulMARRONcolETAT  { border-right: 5px solid #6D4C41; }

/* Calendrier — events */
.eventVIDE a              { background-color: #F5F5F5 !important; color: #000 !important; font-weight: bold !important; }
.eventJCvoisin a          { background-color: #F57C00 !important; color: #fff !important; font-weight: bold !important; }
.eventJCannuleZONE a      { background-color: #43A047 !important; color: #fff !important; font-weight: bold !important; }
.eventJCjdcHORSreserve a  { background-color: #66BB6A !important; color: #fff !important; font-weight: bold !important; }
.eventDEPT a              { background-color: #FDD835 !important; color: #000 !important; font-weight: bold !important; }

.legZONEcouleur {
  display: inline-block;
  width: 40px;
  height: 25px;
  border: 2px solid;
  vertical-align: middle;
  border-radius: 4px;
}

.Ccadre    { border: 1px solid var(--ci-border); padding: 3px 6px; border-radius: var(--ci-radius-sm); }
.CbordureCom { background-color: #FFF9C4; }
.Cvide     { background-color: var(--ci-white); }

.badge-temp { position: absolute; top: 1px; right: 1px; }

/* Identification */
#btn_logg ons-button .button {
  background: #FFFFFF !important;
  color: #2E7D32 !important;
  box-shadow: 0 4px 16px rgba(0,0,0,0.18) !important;
}

#btn_deconnex ons-button .button {
  background: #FFFFFF !important;
  color: #C62828 !important;
  box-shadow: 0 4px 16px rgba(0,0,0,0.18) !important;
}

/* Thumbnails (tuiles menu) sur fond bleu */
.user_thumbnail {
  background: rgba(255,255,255,0.15) !important;
  border: 1px solid rgba(255,255,255,0.35) !important;
  color: #fff !important;
}

.user_thumbnail ons-icon {
  color: #fff !important;
}

.user_thumbnailMENUz {
  background: rgba(255,255,255,0.12) !important;
  border: 1px solid rgba(255,255,255,0.25) !important;
  color: #fff !important;
}

.user_thumbnailMENUz:active {
  background: rgba(255,255,255,0.22) !important;
}

.user_thumbnailMENUz ons-icon {
  color: rgba(255,255,255,0.85) !important;
}

/* Segments sur fond bleu */
.segment__button {
  background: rgba(255,255,255,0.12) !important;
  color: rgba(255,255,255,0.80) !important;
  border: 1px solid rgba(255,255,255,0.25) !important;
}

.segment__input:checked + .segment__button {
  background: #FFFFFF !important;
  color: var(--ci-blue-deep) !important;
  border-color: #FFFFFF !important;
  font-weight: 700;
}

/* Inputs sur fond bleu */
.text-input,
.search-input,
ons-search-input input {
  background-color: rgba(255,255,255,0.15) !important;
  color: #fff !important;
  border-bottom: 2px solid rgba(255,255,255,0.50) !important;
}

.text-input::placeholder,
.search-input::placeholder {
  color: rgba(255,255,255,0.55) !important;
}

.form-control {
  background-color: rgba(255,255,255,0.15);
  border: 1px solid rgba(255,255,255,0.30);
  color: #fff;
}

.form-control::placeholder {
  color: rgba(255,255,255,0.55);
}

/* Badges sur fond bleu */
.badge {
  background-color: #fff;
  color: var(--ci-blue-deep);
  box-shadow: 0 0 6px rgba(0,0,0,0.20);
}

.badgeBIG {
  background-color: #fff;
  color: var(--ci-blue-deep);
}

/* Popovers — fond blanc sur fond bleu */
.popover__content {
  background: #FFFFFF !important;
  border: none !important;
  border-radius: var(--ci-radius) !important;
  box-shadow: 0 8px 30px rgba(0,0,0,0.25) !important;
  color: var(--ci-blue-deep) !important;
}

.popover__arrow {
  background: #FFFFFF !important;
}

/* Ol scale */
.ol-scale-line {
  background: rgba(255,255,255,0.85);
  color: var(--ci-blue-deep);
}

.ol-scale-line-inner {
  border-color: var(--ci-blue);
  color: var(--ci-blue-deep);
}

/* Géoloc boutons carte */
#ICONgeolocBOUTON button,
#ICONgeolocENATTENTE button {
  background: rgba(255,255,255,0.92) !important;
  border: none !important;
  color: var(--ci-blue-deep) !important;
  font-weight: 700;
}

/* Alerte période carte */
#warnPERIODEdiff {
  border: 2px solid #FFE082 !important;
  background: rgba(255,255,255,0.15) !important;
  color: #fff !important;
  border-radius: var(--ci-radius) !important;
}

/* countTOTAL */
.countTOTAL {
  color: #fff;
}

/* blink */
.blink {
  color: rgba(255,255,255,0.85);
}

/* page .norm / .grise / .nomod sur fond bleu */
.page .norm  { color: #fff; }
.page .grise { color: rgba(255,255,255,0.70); }
.page .nomod { color: #EF9A9A; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 768px) {
  .bottom-bar {
    height: 42px !important;
    font-size: 0.75em;
  }

  ons-fab.fab--bottom__left, button.fab--bottom__left, .speed-dial.fab--bottom__left {
    left: 15px !important;
  }

  ons-fab.fab, ons-speed-dial-item.fab, button.fab {
    font-size: 22px !important;
    line-height: 33px !important;
  }
}

.bottom-bar { height: auto !important; }


/* ============================================================
   SPLIT HERO (home + dept) — moitié image / moitié contenu
   ============================================================ */
.ci-split-hero {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 64px);
  position: relative; /* ancrage pour ci-split-top-intro */
}

/* Visuel home : 65% de la hauteur */
.ci-split-top {
  position: relative;
  height: calc(65vh - 20px);
  flex: 0 0 calc(65vh - 20px);
  overflow: hidden; /* coupe l'image mais pas l'overlay texte */
  min-height: 0;
  /* z-index bas pour que la zone blanche soit au-dessus côté stacking */
  z-index: 1;
}

.ci-hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

.ci-split-top-logo {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 14px 20px 0;
  text-align: center;
}

.ci-hero-logo {
  height: 64px;
  width: auto;
  filter: brightness(10);
  margin-bottom: 10px;
}

.ci-hero-logo--sm {
  height: 44px;
  margin-bottom: 6px;
}

.ci-hero-dept-nom {
  color: #fff;
  font-size: 1.45em;
  font-weight: 700;
  text-shadow: 0 1px 8px rgba(0,0,0,0.6);
  margin: 20px 0 0;
}

/* Zone blanche — sous le visuel, remonte de 24px pour l'arrondi */
.ci-split-bottom {
  flex: 1;
  background: #fff;
  border-radius: 24px 24px 0 0;
  margin-top: -40px;
  position: relative;
  z-index: 10;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 12px 16px 16px;
  box-shadow: 0 -8px 24px rgba(21,101,192,0.12);
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 0;
}

html.ci-platform-ios .ci-split-bottom {
  margin-top: -66px;
}

/* .ci-split-bottom--dept — voir section PAGE DEPT en bas du fichier */

/* Texte intro home */
.ci-home-intro {
  font-size: 0.9em;
  color: #2C4A6E;
  line-height: 1.6;
  margin-bottom: 14px;
  text-align: center;
}

/* ============================================================
   CARTES ILLUSTRÉES (boutons principaux)
   ============================================================ */
.ci-cards-row {
  display: flex;
  gap: 6px;
  justify-content: space-between;
  align-items: stretch;
  margin: 12px -4px 0;
  flex: 1;
}

html.ci-platform-ios .ci-cards-row {
  margin: 0 -4px 0;
}

.ci-illus-card {
  flex: 1;
  max-width: 48%; /* ~moitié chacun, poussés aux bords par space-between */
  background: #fff;
  border: 1.5px solid #BBDEFB;
  border-radius: 18px;
  overflow: hidden;
  cursor: pointer;
  box-shadow: 0 4px 18px rgba(21,101,192,0.12);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.ci-illus-card:active {
  transform: scale(0.96);
  box-shadow: 0 2px 8px rgba(21,101,192,0.10);
}

.ci-illus-img {
  width: 100%;
  aspect-ratio: 4/3;
  overflow: hidden;
  background: #E3F2FD;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ci-illus-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* SVG fallback container */
.ci-illus-svg {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #E3F2FD 0%, #BBDEFB 100%);
}

.ci-illus-label {
  padding: 10px 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ci-illus-label strong {
  font-size: 0.93em;
  font-weight: 700;
  color: var(--ci-blue-deep);
  line-height: 1.2;
}

.ci-illus-label span {
  font-size: 0.78em;
  color: var(--ci-text-dim);
  line-height: 1.2;
}

.ci-illus-label--blue strong { color: #1565C0; }
.ci-illus-label--blue span   { color: #1976D2; }
.ci-illus-label--green strong { color: #2E7D32; }
.ci-illus-label--green span   { color: #388E3C; }
.ci-illus-label--orange strong { color: #f9b90f; }
.ci-illus-label--orange span   { color: #f9b90f; }

/* ============================================================
   INTRO DÉPARTEMENT
   ============================================================ */
.ci-dept-intro {
  background: #F0F6FF;
  border-left: 4px solid var(--ci-blue-mid);
  border-radius: 0 10px 10px 0;
  padding: 10px 12px;
  margin-bottom: 14px;
  font-size: 0.85em;
  line-height: 1.6;
  color: #1a3a5c;
}

/* Bouton alerte TR */
.ci-btn-alerte {
  background: linear-gradient(135deg, #2196F3 0%, #1565C0 100%) !important;
  color: #fff !important;
  border-radius: 24px !important;
  padding: 12px 28px !important;
  font-weight: 700 !important;
  font-size: 1em !important;
  box-shadow: 0 4px 14px rgba(21,101,192,0.35) !important;
  margin-top: 4px;
}

/* ============================================================
   BOTTOM BARS
   ============================================================ */
.ci-bottom-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 64px;
  background: #fff;
  border-top: 1px solid #DDEAF8;
  display: flex;
  align-items: stretch;
  justify-content: space-around;
  z-index: 10002;
  box-shadow: 0 -2px 16px rgba(21,101,192,0.10);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

/* Bottom bar carte : au-dessus des FAB Onsen */
.ci-bottom-bar--map {
  z-index: 10003;
}

/* Bouton global flottant — Mode Alerte actif (toutes pages) */
#ci-global-alerte-btn {
  display: none;
  position: fixed;
  bottom: 200px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10020;
  background: rgba(200, 20, 20, 0.93);
  color: #fff;
  border-radius: 30px;
  padding: 14px 28px;
  font-size: 1em;
  font-weight: 700;
  align-items: center;
  gap: 12px;
  white-space: nowrap;
  box-shadow: 0 4px 22px rgba(200,20,20,0.55);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  letter-spacing: 0.01em;
}
#ci-global-alerte-btn.active {
  display: flex;
}

.ci-bottom-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  cursor: pointer;
  padding: 6px 2px;
  color: #5A7FA8;
  transition: color 0.15s ease, background 0.15s ease;
  border-radius: 0;
}

.ci-bottom-item:active {
  background: #F0F6FF;
  color: var(--ci-blue-deep);
}

.ci-bottom-item--accent {
  color: var(--ci-blue-deep);
  font-weight: 700;
}

.ci-bottom-item--accent ons-icon {
  color: var(--ci-blue) !important;
}

.ci-bottom-item ons-icon {
  font-size: 1.35em !important;
  color: inherit !important;
}

.ci-bottom-item span {
  font-size: 0.70em;
  font-weight: 600;
  color: inherit;
  text-align: center;
  line-height: 1.2;
}

/* ============================================================
   MODALES (dept + calendrier + contact)
   ============================================================ */
.ci-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(13,71,161,0.50);
  z-index: 20000;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  backdrop-filter: blur(3px);
}

.ci-modal-box {
  background: #fff;
  border-radius: 24px 24px 0 0;
  width: 100%;
  max-height: 78vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 -8px 40px rgba(21,101,192,0.22);
  overflow: hidden;
}

.ci-modal-header {
  padding: 16px 20px;
  font-size: 1em;
  font-weight: 700;
  color: var(--ci-blue-deep);
  border-bottom: 1px solid #DDEAF8;
  display: flex;
  align-items: center;
  position: relative;
  flex-shrink: 0;
  gap: 8px;
}

.ci-modal-header ons-icon {
  color: var(--ci-blue) !important;
  font-size: 1.1em !important;
}

.ci-modal-close {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1em;
  color: #90A4AE;
  cursor: pointer;
  padding: 6px 10px;
  border-radius: 50%;
  line-height: 1;
}

.ci-modal-close:active { background: #F0F6FF; }

.ci-modal-body {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  flex: 1;
  padding: 8px 0;
}

.ci-dept-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 20px;
  border-bottom: 1px solid #F0F6FF;
  cursor: pointer;
  transition: background 0.12s ease;
}

.ci-dept-item:active { background: #E3F2FD; }
.ci-dept-item:last-child { border-bottom: none; }

.ci-dept-num {
  font-size: 1.05em;
  font-weight: 700;
  color: var(--ci-blue-deep);
  min-width: 34px;
}

.ci-dept-nom {
  flex: 1;
  font-size: 0.92em;
  font-weight: 500;
  color: #1a3a5c;
}

.ci-dept-badge {
  font-size: 0.70em;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 12px;
  white-space: nowrap;
}

.ci-dept-badge--cal { background: #E3F2FD; color: var(--ci-blue-deep); }
.ci-dept-badge--tr  { background: #E8F5E9; color: #2E7D32; }
.ci-dept-badge--no  { background: #ECEFF1; color: #90A4AE; }
.ci-dept-item--no   { opacity: 0.6; }

.ci-modal-btn {
  background: #F0F6FF !important;
  color: var(--ci-blue-deep) !important;
  border-radius: 20px !important;
  font-weight: 700 !important;
  margin: 4px !important;
  box-shadow: none !important;
  border: 1.5px solid #BBDEFB !important;
}

/* ============================================================
   SIDEBAR masquée + pages sans toolbar
   ============================================================ */
#menu { display: none !important; }

#home > .page__content {
  top: 0 !important;
  padding-top: 0 !important;
  overflow: hidden !important;
  position: relative !important;
}

#homeDEPT > .page__content {
  top: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  position: relative !important;
}

/* Carte : overflow:hidden bloque le scroll Onsen */
#gps > .page__content,
#gps .page__content {
  overflow: hidden !important;
  -webkit-overflow-scrolling: auto !important;
}

/* OL a besoin de touch-action:none pour gérer lui-même pan + pinch.
   Sans ça, le navigateur capture le glissement à un doigt et OL ne le reçoit jamais. */
#viewerDiv,
#viewerDiv .ol-viewport,
#viewerDiv .ol-viewport canvas {
  touch-action: none !important;
}

/* ============================================================
   HERO DÉPARTEMENT — plein écran avec texte superposé en bas
   ============================================================ */
.ci-dept-hero {
  position: relative;
  width: 100%;
  height: 50vh;
  min-height: 240px;
  overflow: hidden;
  flex-shrink: 0;
}

.ci-dept-hero .ci-hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Gradient top pour le logo */
.ci-dept-hero-top {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 2;
  padding: 20px 16px 10px;
  background: linear-gradient(180deg, rgba(13,71,161,0.75) 0%, transparent 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* Gradient bas pour le texte */


/* ============================================================
   TUILES ACTION DÉPARTEMENT (3 tuiles illustrées)
   ============================================================ */


.ci-action-tile {
  flex: 1;
  background: #F7FAFF;
  border: 1.5px solid #BBDEFB;
  border-radius: 16px;
  overflow: hidden;
  cursor: pointer;
  box-shadow: 0 3px 12px rgba(21,101,192,0.10);
  transition: transform 0.14s ease;
}


.btnINFOS {
  background: #0178f859 !important;
  color: #fff !important
}


.btnTEXTvert {
  color: #538c61 !important
}

.btnBORDERbleu {
  border: 1.5px solid #57b2fe !important;
}


.btnBORDERorange {
  border: 1.5px solid #f9ba0d91 !important;
}


.btnBORDERvert {
  border: 1.5px solid #508a5ab5 !important;
}

.btnCARTE {
  background: #f9b90f57 !important;
  color: #fff !important
}



/* .ci-action-tile:active {
  transform: scale(0.96);
} */

.ci-action-tile-img {
  width: 100%;
  padding-top: 45.5%; /* ratio 600×273 — affiche l'image entière sans recadrage */
  overflow: hidden;
  background-color: #E3F2FD;
  background-size: 100% 100%; /* étire à la taille exacte du conteneur */
  background-position: center center;
  background-repeat: no-repeat;
}

.ci-action-tile-img img {
  display: none;
}

/* Fallback icône pour urgences */
.ci-action-tile-img--urgence {
  background: linear-gradient(135deg, #FFEBEE, #FFCDD2);
}

.ci-action-tile-img--urgence ons-icon {
  font-size: 2em !important;
  color: #C62828 !important;
}

.ci-action-tile-label {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 10px 10px 12px;
}

.ci-action-tile-label ons-icon {
  font-size: 1.1em !important;
  flex-shrink: 0;
}

.ci-action-tile-texts {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.ci-action-tile-texts strong {
  font-size: 0.87em;
  font-weight: 700;
  color: var(--ci-blue-deep);
  line-height: 1.2;
}

.ci-action-tile-texts span {
  font-size: 0.73em;
  color: var(--ci-text-dim);
  line-height: 1.3;
}

.ci-action-tile-texts--green strong { color: #2E7D32; }
.ci-action-tile-texts--green span { color: #2E7D32; }
.ci-action-tile-texts--blue  strong { color: #1565C0; }
.ci-action-tile-texts--blue  span { color: #1565C0; }
.ci-action-tile-texts--orange strong { color: #f9b90f; }
.ci-action-tile-texts--orange span { color: #f9b90f; }

.ci-action-icon--blue  { color: #1565C0 !important; }
.ci-action-icon--green { color: #2E7D32 !important; }
.ci-action-icon--orange { color: #f9b90f !important; }
.ci-action-icon--red   { color: #C62828 !important; }

/* Page dept : content sans padding-top Onsen — règle principale dans section SIDEBAR */

/* ============================================================
   PAGE CARTE — barre calendrier fixe + géoloc bar
   ============================================================ */

/* Barre calendrier fixe juste au-dessus de la bottom bar */
.ci-cal-bar {
  position: fixed;
  bottom: 64px;
  left: 0; right: 0;
  z-index: 10001;
  background: rgba(255,255,255,0.95);
  border-top: 1px solid #DDEAF8;
  backdrop-filter: blur(4px);
  padding: 4px 8px;
  pointer-events: none; /* le fond ne capture pas les touches */
}
.ci-cal-bar > * {
  pointer-events: auto; /* les enfants visibles restent cliquables */
}

.ci-cal-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 4px 0;
}

.ci-cal-date-label {
  font-size: 0.72em;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ci-text-dim);
  text-align: center;
  padding-top: 4px;
}

.ci-cal-arrow {
  background: rgba(255,255,255,0.90) !important;
  color: var(--ci-blue-deep) !important;
  border: 1px solid #BBDEFB !important;
  border-radius: 20px !important;
  min-width: 0 !important;
  padding: 6px 10px !important;
  box-shadow: none !important;
}

.ci-cal-date {
  flex: 1;
  max-width: 220px;
  border-radius: 20px !important;
  font-size: 0.88em !important;
  font-weight: 700 !important;
  padding: 6px 14px !important;
  min-width: 0 !important;
}

.ci-cal-periodes {
  flex-wrap: wrap;
  gap: 4px;
}

.ci-cal-periode {
  border-radius: 16px !important;
  font-size: 0.75em !important;
  padding: 5px 8px !important;
  min-width: 0 !important;
  color: #000 !important;
}

.ci-cal-periode--main {
  font-size: 0.88em !important;
  padding: 8px 16px !important;
  font-weight: 700 !important;
}

/* Bouton période non sélectionné : filtre gris uniquement (préserve le background-color inline) */
.ci-cal-periode.greyed {
  filter: grayscale(0.55) brightness(0.60) !important;
  background: rgba(120,140,160,0) !important; /* transparent = laisse le bg inline s'exprimer */
  opacity: 0.80 !important;
}

/* Bouton période sélectionné : couleur vive + contour blanc bien visible */
.ci-cal-periode--selected {
  filter: none !important;
  opacity: 1 !important;
  border: 2px solid #fff !important;
  box-shadow: 0 0 0 3px rgba(255,255,255,0.55), 0 3px 10px rgba(0,0,0,0.4) !important;
  transform: scale(1.08);
  background: #ff7602a3 !important;
}
/* L'inner .button d'Onsen est blanc (global !important) — on le rend transparent
   pour laisser voir le background-color inline du ons-button parent */
.ci-cal-periode--selected .button {
  background: transparent !important;
  color: #fff !important;
}

.ci-cal-periode-hint {
  margin: 2px 8px 4px;
  padding: 6px 10px;
  font-size: 0.80em;
  color: #ffffff;
  background: #e02205;
  border-radius: 8px;
  border: 1px solid #90CAF9;
  text-align: center;
  display: none;
}

.ci-cal-warn {
  display: none;
}

/* Barre géoloc (masquée par défaut) — positionnée en bas via JS */
.ci-geoloc-bar {
  position: fixed;
  bottom: 64px;
  left: 0; right: 0;
  z-index: 10001;
  background: rgba(255,255,255,0.95);
  border-top: 1px solid #DDEAF8;
  backdrop-filter: blur(4px);
  padding: 4px 8px;
}

.ci-geoloc-btn {
  border-radius: 20px !important;
  font-size: 0.85em !important;
  padding: 7px 14px !important;
  min-width: 0 !important;
}






/* ============================================================
   LOGO CHASSEINFO HTML (reproduction du PNG)
   ============================================================ */
.ci-logo {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  user-select: none;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.45));
}

.ci-logo--sm {
  transform: scale(0.75);
  transform-origin: center center;
}

/* "CHASSE" — jaune/orangé, contour noir, police condensée bold */
.ci-logo-chasse {
  font-family: 'Arial Black', 'Arial Bold', 'Impact', sans-serif;
  font-weight: 900;
  font-size: 1.8em;
  letter-spacing: -0.02em;
  color: #F5A800;
  -webkit-text-stroke: 2px #222;
  text-stroke: 2px #222;
  paint-order: stroke fill;
  line-height: 1;
  text-transform: uppercase;
}

/* Pictos dans carrés coins arrondis */
.ci-logo-pictos {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  margin: 0 2px;
}

.ci-logo-picto {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.7em;
  height: 1.7em;
  font-size: 1.25em;
  background: #fff;
  border: 2px solid #222;
  border-radius: 5px;
  color: #111;
  line-height: 1;
}

.ci-logo-picto i,
.ci-logo-picto .ons-icon {
  font-size: 1em !important;
  color: #111 !important;
}

/* "INFO" — vert vif, contour noir */
.ci-logo-info {
  font-family: 'Arial Black', 'Arial Bold', 'Impact', sans-serif;
  font-weight: 900;
  font-size: 1.8em;
  letter-spacing: -0.02em;
  color: #5BBD2F;
  -webkit-text-stroke: 2px #222;
  text-stroke: 2px #222;
  paint-order: stroke fill;
  line-height: 1;
  text-transform: uppercase;
}

/* Variante sm (page dept) */
.ci-logo--sm .ci-logo-chasse,
.ci-logo--sm .ci-logo-info {
  font-size: 1.6em;
}

.ci-logo--sm .ci-logo-picto {
  width: 1.5em;
  height: 1.5em;
  font-size: 1em;
}

/* ============================================================
   iOS safe-area — ons-navigator absorbe la status bar
   env(safe-area-inset-top) pousse le navigator sous la status bar.
   Sur Android : env() = 0 (webview démarre déjà sous la status bar via JS overlay:false).
   ============================================================ */

/* safe area gérée par JS (adjustiOSStatusBar) qui pousse ons-splitter */

/* Pages avec toolbar — content sous la toolbar seulement (safe area dans le splitter) */
.toolbar:not(.toolbar--cover-content)+.page__background,
.toolbar:not(.toolbar--cover-content)+.page__background+.page__content {
  top: 56px !important;
}

/* Override Onsen iphonex portrait — safe area gérée par JS (splitter.style.top).
   Onsen ajouterait padding-top:44px à la toolbar + top:88px au content → icônes trop basses. */
html[onsflag-iphonex-portrait] .toolbar {
  padding-top: 0 !important;
  box-sizing: border-box !important;
}
html[onsflag-iphonex-portrait] .page__content {
  padding-top: 0 !important;
}
html[onsflag-iphonex-portrait] .toolbar:not(.toolbar--cover-content)+.page__background,
html[onsflag-iphonex-portrait] .toolbar:not(.toolbar--cover-content)+.page__background+.page__content {
  top: 56px !important;
}

/* ============================================================
   CORRECTIONS FINALES
   ============================================================ */

/* Fond blanc partout — écrase Onsen et toute variable bleue résiduelle */
body,
.page, .page__content, .page__background,
.page--material, .page--material__content, .page--material__background,
ons-splitter-content,
ons-splitter-content > .page__background,
ons-navigator > .page__background {
  background: #ffffff !important;
  background-color: #ffffff !important;
}

/* Bandeau bleu derrière la status bar iOS (overlaysWebView:true = barre transparente).
   Ciblé uniquement iOS via la classe ci-platform-ios ajoutée par appliOUsite.js.
   Sur Android, overlay:false est forcé en JS → pas besoin de ce bandeau. */
html.ci-platform-ios::before {
  content: '';
  position: fixed;
  top: 0; left: 0; right: 0;
  height: env(safe-area-inset-top, 0px);
  background: #1565C0;
  z-index: 99999;
  pointer-events: none;
}

/* Sauf sidebar qui reste bleue */
ons-splitter-side,
ons-splitter-side .page,
ons-splitter-side .page__background,
ons-splitter-side .page__content {
  background: linear-gradient(180deg, #1565C0 0%, #1976D2 100%) !important;
  background-color: #1565C0 !important;
}

/* ci-split-top-logo : logo collé en haut — safe area gérée par ons-navigator */
.ci-split-top-logo {
  justify-content: flex-start !important;
  padding-top: 12px !important;
}

/* Texte présentation home — flex-grow pour occuper l'espace */



/* Logo FDC dept — pleine largeur, collé à la bottom bar */
.ci-dept-logo-fdc {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 144px;
  z-index: 1000;
  background: #f0f0f0;
  border-top: 1px solid #ddd;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  box-sizing: border-box;
}

.ci-dept-logo-fdc img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Bottom bar dept — collée tout en bas, logo FDC juste au-dessus */
/* Bouton Accueil overlay haut gauche page dept */
.ci-dept-btn-home {
  position: absolute;
  top: 10px;
  right: 12px;
  z-index: 9999; /* au-dessus vignette(996) et red-overlay(997), sous les barres(10001+) */
  background: #f5a700e6;
  border: none;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 20px;
  cursor: pointer;
}
.ci-dept-btn-home:active {
  background: rgba(0,0,0,0.7);
}

/* Page dept — le padding-bottom est géré par ci-dept-middle (144px = logo) */

/* Géoloc bar — même style que ci-cal-bar */
.ci-geoloc-bar .ci-cal-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 4px 0;
}

/* Champ recherche ville dans géoloc bar */
.ci-geoloc-bar ons-search-input {
  flex: 1;
}

.ci-geoloc-bar ons-search-input input {
  width: 100% !important;
  border-radius: 20px !important;
  background: #F0F6FF !important;
  border: 1px solid #BBDEFB !important;
  padding: 6px 14px !important;
  font-size: 0.9em !important;
}

.ci-geoloc-bar .ci-geoloc-btn {
  background: #fff !important;
  color: var(--ci-blue-deep) !important;
  border: 1px solid #BBDEFB !important;
  border-radius: 20px !important;
  font-size: 0.85em !important;
  padding: 6px 12px !important;
  min-width: 0 !important;
  box-shadow: none !important;
}

/* ============================================================
   TEXTE EN BAS DU VISUEL (home + dept — même structure)
   ============================================================ */





/* Page dept : visuel 52vh — assez grand mais laisse place aux tuiles */
.ci-split-top--dept {
  position: relative;
  width: 100%;
  height: calc(65vh - 20px);
  min-height: 260px;
  overflow: hidden;
  flex-shrink: 0;
  flex: none;
}

/* Page dept : scroll normal sous le hero — voir règle dans section SIDEBAR */

/* ============================================================
   CARTE — CORRECTIONS GÉOLOC + LISIBILITÉ
   ============================================================ */

/* Cal bar : texte sombre lisible sur fond blanc */
.ci-cal-bar {
  color: #1a1a1a !important;
}

.ci-cal-row {
  color: #1a1a1a;
}

/* Bouton date calendrier : texte sombre */
.ci-cal-date {
  color: #1565C0 !important;
  background: #F0F6FF !important;
  border: 1.5px solid #BBDEFB !important;
}

/* Flèches calendrier */
.ci-cal-arrow {
  color: #1565C0 !important;
  background: #F0F6FF !important;
}

/* Span date dans bouton calendrier */
#OPTIONScalendarZONESdate {
  color: #1565C0 !important;
}

/* Quand le cal-bar est masqué, géoloc se colle juste au-dessus de la bottom bar */
.ci-geoloc-bar.ci-geoloc--no-cal {
  bottom: 64px;
}

/* Ligne géoloc */
.ci-geoloc-bar .ci-cal-row {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
}

/* Input recherche ville — natif, texte sombre */
.ci-map-search-input {
  flex: 1;
  height: 36px;
  border: 1.5px solid #BBDEFB;
  border-radius: 20px;
  padding: 0 14px;
  font-size: 0.9em;
  color: #1a1a1a !important;
  background: #F0F6FF;
  outline: none;
  -webkit-appearance: none;
}

.ci-map-search-input::placeholder {
  color: #5A7FA8;
}

.ci-map-search-input:focus {
  border-color: #1565C0;
}

/* Boutons natifs carte (Centrer, Localisation) */
.ci-map-btn {
  height: 36px;
  padding: 0 14px;
  border: 1.5px solid #BBDEFB;
  border-radius: 20px;
  background: #F0F6FF;
  color: #1565C0 !important;
  font-size: 0.85em;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
  -webkit-appearance: none;
}

.ci-map-btn--red {
  background: #FFEBEE !important;
  border-color: #FFCDD2 !important;
  color: #C62828 !important;
}

/* ============================================================
   PAGE OPTIONS CARTE
   ============================================================ */
#optionsZONES > .page__content {
  display: flex;
  flex-direction: column;
}

.ci-options-body {
  flex: 1;
  overflow-y: auto;
  padding: 16px 16px 100px;
}

.ci-options-section {
  margin-bottom: 20px;
}

.ci-options-label {
  font-size: 0.83em;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ci-text-dim);
  margin-bottom: 8px;
  padding-left: 4px;
}

/* 3 boutons fond de carte en vertical */
.ci-maptype-btns {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ci-maptype-btn {
  width: 100%;
  padding: 14px 18px;
  background: #F0F6FF;
  border: 1.5px solid #BBDEFB;
  border-radius: var(--ci-radius);
  color: var(--ci-blue-deep);
  font-size: 1em;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 12px;
  -webkit-appearance: none;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.ci-maptype-btn:active {
  background: #DDEAF8;
  border-color: var(--ci-blue);
}

.ci-maptype-btn ons-icon {
  color: var(--ci-blue) !important;
  font-size: 1.1em !important;
  width: 20px;
  text-align: center;
}

/* 3 boutons rayon de recherche (mode CAL) */
.ci-rayon-btns {
  display: flex;
  gap: 8px;
}

.ci-rayon-btn {
  flex: 1;
  padding: 14px 8px;
  background: #F0F6FF;
  border: 1.5px solid #BBDEFB;
  border-radius: var(--ci-radius);
  color: var(--ci-blue-deep);
  font-size: 1.05em;
  font-weight: 700;
  text-align: center;
  cursor: pointer;
  -webkit-appearance: none;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.ci-rayon-btn:active {
  background: #DDEAF8;
  border-color: var(--ci-blue);
}

.ci-rayon-btn--active {
  background: var(--ci-blue);
  border-color: var(--ci-blue);
  color: #fff;
}

/* Bouton Valider en bas, fixe */
.ci-options-footer {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  padding: 12px 16px;
  background: #fff;
  border-top: 1px solid #DDEAF8;
  box-shadow: 0 -2px 12px rgba(21,101,192,0.08);
  padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
}

.ci-options-validate {
  width: 100%;
  padding: 14px;
  background: linear-gradient(135deg, var(--ci-blue-mid) 0%, var(--ci-blue-deep) 100%);
  color: #fff;
  border: none;
  border-radius: var(--ci-radius-xl);
  font-size: 1em;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-shadow: 0 4px 14px rgba(21,101,192,0.30);
  -webkit-appearance: none;
}

.ci-options-validate ons-icon {
  color: #fff !important;
}

/* ============================================================
   BOUTON ALERTE TR — page carte, barre fixe au-dessus du reste
   ============================================================ */
.ci-tr-bar {
  position: fixed;
  left: 0; right: 0;
  z-index: 10003;
  background: #fff;
  border-top: 1px solid #DDEAF8;
  padding: 8px 16px;
  text-align: center;
  /* bottom recalculé dynamiquement via updateGeolocBarPosition() */
  bottom: 64px;
}

html.ci-platform-ios .ci-tr-bar,
html.ci-platform-ios .ci-cal-bar,
html.ci-platform-ios .ci-geoloc-bar {
  bottom: calc(64px + env(safe-area-inset-bottom, 0px));
}

.ci-tr-countdown {
  font-size: 0.82em;
  font-weight: 600;
  color: var(--ci-text-mid);
  padding: 4px 0 6px;
  text-align: center;
}

.ci-tr-no-network {
  font-size: 0.82em;
  font-weight: 600;
  color: #B71C1C;
  background: #FFEBEE;
  border-radius: 8px;
  padding: 6px 10px;
  margin-bottom: 6px;
  text-align: center;
}

/* ===== Overlay réseau perdu en mode TR ===== */
.ci-tr-network-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 64px;
  z-index: 19000;
  background: rgba(150, 0, 0, 0.55);
  backdrop-filter: blur(3px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.ci-tr-network-card {
  background: #fff;
  border-radius: 16px;
  padding: 28px 22px 20px;
  max-width: 340px;
  width: 100%;
  text-align: center;
  box-shadow: 0 8px 32px rgba(0,0,0,0.35);
}

.ci-tr-network-icon {
  font-size: 3em;
  color: #C62828;
  margin-bottom: 12px;
}

.ci-tr-network-title {
  font-size: 1.2em;
  font-weight: 800;
  color: #B71C1C;
  margin-bottom: 12px;
}

.ci-tr-network-body {
  font-size: 0.88em;
  color: #333;
  line-height: 1.55;
  margin-bottom: 14px;
}

.ci-tr-network-since {
  font-size: 0.78em;
  color: #888;
  margin-bottom: 16px;
}

.ci-tr-network-btn {
  background: #EF9A9A;
  color: #B71C1C;
  border: none;
  border-radius: 20px;
  padding: 10px 18px;
  font-size: 0.82em;
  font-weight: 700;
  cursor: pointer;
}

.ci-tr-btn {
  width: 100%;
  max-width: 320px;
  padding: 13px 20px;
  border: none;
  border-radius: var(--ci-radius-xl);
  font-size: 1em;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  -webkit-appearance: none;
  box-shadow: 0 4px 14px rgba(0,0,0,0.18);
  transition: filter 0.15s ease, transform 0.15s ease;
}

.ci-tr-btn:active {
  filter: brightness(0.94);
  transform: scale(0.97);
}

.ci-tr-btn--start {
  background: linear-gradient(135deg, #1E88E5, #1565C0);
  color: #fff;
  box-shadow: 0 4px 14px rgba(21,101,192,0.35);
}

.ci-tr-btn--stop {
  background: linear-gradient(135deg, #EF5350, #C62828);
  color: #fff;
  box-shadow: 0 4px 14px rgba(229,57,53,0.35);
}

.ci-tr-btn-row {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: center;
}

.ci-tr-btn-row .ci-tr-btn--start,
.ci-tr-btn-row .ci-tr-btn--stop {
  flex: 1;
  max-width: 260px;
}

.ci-tr-btn--aide {
  flex: 0 0 auto;
  width: auto;
  max-width: none;
  padding: 13px 14px;
  background: #f5f5f5;
  color: #555;
  box-shadow: 0 2px 6px rgba(0,0,0,0.12);
}

.ci-tr-btn--aide:active {
  background: #e0e0e0;
}

/* Aide — mode alerte : panel contenu */
.ci-aide-alerte h2 { font-size: 1.1em; color: #1565C0; margin: 0 0 10px; }
.ci-aide-alerte h3 { font-size: 0.95em; color: #333; margin: 14px 0 6px; }
.ci-aide-alerte p, .ci-aide-alerte li { font-size: 0.88em; color: #444; line-height: 1.5; }
.ci-aide-alerte ul { padding-left: 18px; margin: 4px 0; }
.ci-aide-alerte .ci-aide-test-btn,
.ci-options-section .ci-aide-test-btn {
  display: block; width: 100%; margin-top: 18px;
  padding: 13px; border: none; border-radius: 12px;
  background: linear-gradient(135deg, #1E88E5, #1565C0);
  color: #fff; font-size: 0.95em; font-weight: 700;
  cursor: pointer; text-align: center;
  box-shadow: 0 4px 12px rgba(21,101,192,0.3);
}

/* ============================================================
   OVERLAY TEXTE SUR VISUEL — HOME + DEPT
   Règles uniques, sans conflit
   ============================================================ */

/* Overlay texte — sibling APRÈS ci-split-top, remonte sur le visuel via margin-top négatif */
/* Overlay commun home + dept — DANS le parent position:relative + overflow:hidden */
.ci-split-top,
.ci-split-top--dept {
  overflow: hidden !important;
}

/* Overlay texte — dans le parent overflow:hidden, z-index sous le texte */
.ci-split-top-intro {
  position: absolute;
  left: 0; right: 0;
  bottom: 0;
  height: 45%;
  background: transparent;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 0 14px 12px;
  pointer-events: none;
  z-index: 2;
}

/* Home et dept : texte en haut, juste sous le logo+nom */
.ci-split-top:not(.ci-split-top--dept) .ci-split-top-intro,
.ci-split-top--dept .ci-split-top-intro {
  top: 0;
  bottom: auto;
  height: auto;
  justify-content: flex-start;
  padding: 0 14px;
  padding-top: 72px; /* sous le logo (~80px) + petit espace */
}

/* Gradient haut → bas : noir en haut (lisibilité logo+texte), transparent en bas (border-radius visible) */
.ci-split-top--dept::after,
.ci-split-top.has-home-text::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  top: 0;
  height: 55%;
  background: linear-gradient(180deg,
    rgba(0,0,0,0.82) 0%,
    rgba(0,0,0,0.50) 25%,
    transparent 100%
  );
  pointer-events: none;
  z-index: 1;
}

/* Texte blanc avec ombre forte — forcé visible, le JS met display:block inline */
.ci-split-top-intro-text,
#menuAPPLIinfo {
  display: block !important;
  background: none !important;
  border: none !important;
  border-left: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  margin: 0 auto !important;
  max-width: 75% !important;
  padding: 0 !important;
  flex: none !important;
  color: #ffffff !important;
  font-size: 0.88em !important;
  font-weight: 500 !important;
  line-height: 1.6 !important;
  text-shadow:
    0 1px 0 rgba(0,0,0,1),
    0 2px 6px rgba(0,0,0,0.9),
    0 0 16px rgba(0,0,0,0.8) !important;
  pointer-events: auto;
  text-align: center;
}
/* Texte blanc avec ombre forte — forcé visible, le JS met display:block inline */
.ci-split-top-intro-text,
#menuAPPLIinfoDEPT {
  display: block !important;
  background: none !important;
  border: none !important;
  border-left: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  margin: 20px auto 0 !important;
  max-width: 75% !important;
  padding: 0 !important;
  flex: none !important;
  color: #ffffff !important;
  font-size: 0.88em !important;
  font-weight: 500 !important;
  line-height: 1.6 !important;
  text-shadow:
    0 1px 0 rgba(0,0,0,1),
    0 2px 6px rgba(0,0,0,0.9),
    0 0 16px rgba(0,0,0,0.8) !important;
  pointer-events: auto;
  text-align: center;
}

/* Tous les descendants aussi en blanc */
.ci-split-top-intro *,
.ci-split-top-intro #menuAPPLIinfo *,
.ci-split-top-intro #menuAPPLIinfoDEPT * {
  color: #ffffff !important;
  background: none !important;
  border: none !important;
  text-shadow:
    0 1px 0 rgba(0,0,0,1),
    0 2px 6px rgba(0,0,0,0.9),
    0 0 16px rgba(0,0,0,0.8) !important;
}

/* Supprimé — overlay dept géré par .ci-split-top-intro dans .ci-split-top--dept */

/* Badge type INF dans la modale département */
.ci-dept-badge--inf {
  background: #FFF3E0;
  color: #E65100;
}
.ci-dept-badge--infok {
  background: #EDE7F6;
  color: #6A1B9A;
}

/* ============================================================
   OVERLAY TEXTE DEPT — variante avec hauteur ajustée
   ============================================================ */
/* Pas de surcharge nécessaire — .ci-split-top-intro gère déjà bottom:0 */







/* Ancrage absolu pour l'overlay texte dept — voir règle dans section SIDEBAR */



/* ============================================================
   PAGE DEPT — tuiles et logo FDC (règle unique, nettoyée)
   ============================================================ */

/* Zone blanche remontante dept — fonctionne sans parent flex (flow normal) */
.ci-split-bottom--dept {
  padding-top: 8px;
  padding-bottom: 0;
  justify-content: flex-start;
  overflow-y: visible !important;
  min-height: 0;
  flex: none;
  display: block;
  margin-top: -50px; /* remonte dans le hero pour rendre le border-radius visible */
}

.ci-dept-middle {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0px 0 156px; /* pas de padding horizontal — le parent a déjà 16px */
  background: transparent;
}

.ci-dept-actions {
  display: flex;
  gap: 16px;
  justify-content: space-between;
  align-items: stretch;
  width: 100%;
  margin: 0 -4px; /* même traitement que .ci-cards-row → bords à ~12px des bords écran */
  background: transparent;
}

.ci-dept-actions .ci-action-tile-img {
  padding-top: 45.5%; /* ratio 600×273 — identique au ratio des tilenew */
}

/* ============================================================
   DOC VIEWER — slide-up, scroll natif, ancres
   ============================================================ */
.ci-docviewer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(13,71,161,0.45);
  z-index: 25000;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  backdrop-filter: blur(3px);
  opacity: 0;
  transition: opacity 0.22s ease;
  pointer-events: none;
}
.ci-docviewer-overlay.ci-dv-visible {
  opacity: 1;
  pointer-events: auto;
}

.ci-docviewer-panel {
  background: var(--ci-bg, #fff);
  border-radius: 24px 24px 0 0;
  width: 100%;
  height: 92vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 -8px 40px rgba(21,101,192,0.22);
  overflow: hidden;
  transform: translateY(100%);
  transition: transform 0.28s cubic-bezier(0.32, 0.72, 0, 1);
  will-change: transform;
}
.ci-docviewer-overlay.ci-dv-visible .ci-docviewer-panel {
  transform: translateY(0);
}

.ci-docviewer-header {
  padding: 14px 20px;
  border-bottom: 1px solid #DDEAF8;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  background: var(--ci-bg, #fff);
}

.ci-docviewer-drag {
  position: absolute;
  top: 7px;
  left: 50%;
  transform: translateX(-50%);
  width: 36px;
  height: 4px;
  border-radius: 2px;
  background: #CBD5E1;
}

.ci-docviewer-title {
  flex: 1;
  font-size: 1em;
  font-weight: 700;
  color: var(--ci-blue-deep);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ci-docviewer-top {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #64B5F6;
  font-size: 1.3em;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.12s;
}
.ci-docviewer-top:active { background: #F0F6FF; }
.ci-docviewer-close {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #90A4AE;
  font-size: 1.3em;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.12s;
}
.ci-docviewer-close:active { background: #F0F6FF; }

/* TOC — table des matières ancres */
.ci-docviewer-toc {
  padding: 8px 16px;
  border-bottom: 1px solid #DDEAF8;
  display: flex;
  gap: 8px;
  overflow-x: auto;
  flex-shrink: 0;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.ci-docviewer-toc::-webkit-scrollbar { display: none; }
.ci-docviewer-toc:empty { display: none; padding: 0; border: none; }

.ci-dv-toc-chip {
  flex-shrink: 0;
  padding: 9px 16px;
  border-radius: 20px;
  background: var(--ci-blue-tint, #E3F2FD);
  color: var(--ci-blue-deep);
  font-size: 0.88em;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.12s;
  white-space: nowrap;
}
.ci-dv-toc-chip:active,
.ci-dv-toc-chip.ci-dv-toc-active {
  background: var(--ci-blue);
  color: #fff;
}

/* Corps scrollable */
.ci-docviewer-body {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 16px 18px 32px;
  scroll-behavior: smooth;
  /* Base fixe en rem : indépendante des body{font-size} injectés par les fichiers HTML.
     Garantit ~15px pour le texte courant quel que soit le fichier chargé. */
  font-size: 1rem;
}

/* Styles du contenu HTML injecté */
.ci-docviewer-body h1,
.ci-docviewer-body h2,
.ci-docviewer-body h3 {
  color: var(--ci-blue-deep);
  margin-top: 1.4em;
  margin-bottom: 0.4em;
  scroll-margin-top: 12px;
}
.ci-docviewer-body h1 { font-size: 1.2em; }
.ci-docviewer-body h2 { font-size: 1.1em; }
.ci-docviewer-body h3 { font-size: 1em; }
.ci-docviewer-body p  { margin: 0.5em 0; line-height: 1.65; color: #1a3a5c; font-size: 0.95em; }
.ci-docviewer-body a  { color: var(--ci-blue); }
.ci-docviewer-body ul,
.ci-docviewer-body ol { padding-left: 1.4em; margin: 0.5em 0; color: #1a3a5c; font-size: 0.95em; }
.ci-docviewer-body li { margin-bottom: 0.35em; line-height: 1.6; }
.ci-docviewer-body hr { border: none; border-top: 1px solid #DDEAF8; margin: 1.2em 0; }

/* Neutralise les petits em hardcodés dans les fichiers HTML injectés */
.ci-docviewer-body .dv-step p,
.ci-docviewer-body .dv-intro,
.ci-docviewer-body .ci-info-long,
.ci-docviewer-body .ci-disc-block { font-size: 0.93em; line-height: 1.65; }
.ci-docviewer-body .dv-step-num  { font-size: 0.85em; }
.ci-docviewer-body .dv-alert     { font-size: 0.9em; line-height: 1.65; }
.ci-docviewer-body .cf-theme-label strong { font-size: 0.92em; }
.ci-docviewer-body .cf-theme-label span  { font-size: 0.82em; }