/* ===========================
   ALU.css — Alertes (User)
   Scope strict :
     body.ALU-page-gerer-alertes …
     body.ALU-page-voir-alertes …
   =========================== */

/* ===== ALU x GN — Compat Layer ===== */
.ALU-page-gerer-alertes,
.ALU-page-voir-alertes{
  --bg: #f6f8fb;
  --text: #1f2a44;
  --bd: rgba(16,24,40,.12);
  --GN-border: #d6d9de;
  --GN-brand: #20466e;
  --GN-brand-weak: #eef6ff;
  background: var(--bg);
  color: var(--text);
}

/* Titres */
.ALU-page-gerer-alertes h1,
.ALU-page-voir-alertes h1{
  font-size: clamp(1.25rem, 1.1rem + 1vw, 1.75rem);
  margin: 8px 0 12px;
}

/* ===== Boutons (alias GN) ===== */
.ALU-page-gerer-alertes .btn,
.ALU-page-voir-alertes .btn{
  all: unset;
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  font-weight:600;
  line-height:1;
  padding:8px 12px;
  border-radius:10px;
  border:1px solid var(--GN-border, #d6d9de);
  background:#fff;
  color:#111;
  cursor:pointer;
  text-decoration:none;
  transition: background .15s ease, border-color .15s ease, box-shadow .15s ease, color .15s ease;
}
.ALU-page-gerer-alertes .btn:hover,
.ALU-page-voir-alertes .btn:hover{
  background:#f8fafc;
  border-color:#c9cdd4;
}
.ALU-page-gerer-alertes .btn:active,
.ALU-page-voir-alertes .btn:active{
  background:#f1f5f9;
  border-color:#bfc4cc;
}
.ALU-page-gerer-alertes .btn:focus-visible,
.ALU-page-voir-alertes .btn:focus-visible{
  outline:none;
  box-shadow:0 0 0 3px var(--GN-brand-weak, #eef6ff);
  border-color:var(--GN-brand, #20466e);
}
.ALU-page-gerer-alertes .btn-primary,
.ALU-page-voir-alertes .btn-primary{
  background:var(--GN-brand,#20466e);
  border-color:var(--GN-brand,#20466e);
  color:#fff;
}
.ALU-page-gerer-alertes .btn-primary:hover,
.ALU-page-voir-alertes .btn-primary:hover{
  filter:brightness(1.05);
}
.ALU-page-gerer-alertes .btn-primary:active,
.ALU-page-voir-alertes .btn-primary:active{
  filter:brightness(.95);
}
.ALU-page-gerer-alertes .btn-secondary,
.ALU-page-voir-alertes .btn-secondary{
  background:var(--GN-brand-weak,#eef6ff);
  border-color:var(--GN-brand,#20466e);
  color:var(--GN-brand,#20466e);
}
.ALU-page-gerer-alertes .btn-secondary:hover,
.ALU-page-voir-alertes .btn-secondary:hover{
  background:#e6f0ff;
}
.ALU-page-gerer-alertes .btn-secondary:active,
.ALU-page-voir-alertes .btn-secondary:active{
  background:#dbe8ff;
}
.ALU-page-gerer-alertes .btn-danger,
.ALU-page-voir-alertes .btn-danger{
  background:#dc2626;
  border-color:#dc2626;
  color:#fff;
}
.ALU-page-gerer-alertes .btn-danger:hover,
.ALU-page-voir-alertes .btn-danger:hover{
  filter:brightness(1.05);
}
.ALU-page-gerer-alertes .btn-danger:active,
.ALU-page-voir-alertes .btn-danger:active{
  filter:brightness(.95);
}
.ALU-page-gerer-alertes .btn:disabled,
.ALU-page-voir-alertes .btn:disabled,
.ALU-page-gerer-alertes .btn[aria-disabled="true"],
.ALU-page-voir-alertes .btn[aria-disabled="true"]{
  opacity:.55;
  cursor:not-allowed;
  box-shadow:none;
}

/* ===== Formulaires ===== */
.form-grid{
  display:grid;
  gap:12px;
  grid-template-columns: repeat(12, minmax(0,1fr));
}
.form-grid > .form-field{ grid-column: span 12; }
@media (min-width:768px){
  .form-grid > .form-field--half{ grid-column: span 6; }
  .form-grid > .form-field--third{ grid-column: span 4; }
}
.form-field label{ display:block; font-weight:600; margin-bottom:6px; }
.form-field .muted{ color:#6b7280; font-size:.9rem; }
.form-field input[type="text"],
.form-field input[type="number"],
.form-field input[type="time"],
.form-field select,
.form-field textarea{
  width:100%;
  box-sizing:border-box;
  padding:10px 12px;
  border-radius:10px;
  border:1px solid var(--bd,rgba(16,24,40,.12));
  background:#fff;
  outline:none;
  transition: box-shadow .15s ease, border-color .15s ease;
}
.form-field textarea{ resize:vertical; }
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus{
  border-color: rgba(32,70,110,.35);
  box-shadow: 0 0 0 3px rgba(32,70,110,.15);
}

/* ===== Badges / Chips ===== */
.chip{
  display:inline-block;
  padding:4px 8px;
  border-radius:999px;
  border:1px solid var(--bd,rgba(16,24,40,.12));
  background:#fff;
}
.muted{ color:#6b7280; }

/* ===== Switch simple ===== */
.ALU-switch input{ appearance:auto; transform: scale(1.05); }

/* ===== Layout (contenu centré) ===== */
.ALU-page-gerer-alertes .layout,
.ALU-page-voir-alertes .layout{
  max-width:1100px;
  margin:0 auto;
  padding:0 12px;
  box-sizing:border-box;
  display:grid;
  grid-template-columns:1fr;
}
.ALU-page-gerer_alertes .content,
.ALU-page-voir-alertes .content{
  width:100%;
  max-width:none;
  margin:0;
  padding:8px 0 20px;
  box-sizing:border-box;
}

/* (doublon normalisé pour cohérence) */
.ALU-page-gerer-alertes .content,
.ALU-page-voir-alertes .content{
  width:100%;
  margin:0 auto;
  padding:12px 0;
  box-sizing:border-box;
}

/* ===== Cartes ===== */
.ALU-card{
  border:1px solid var(--bd,#e5e7eb);
  border-radius:12px;
  background:#fff;
  padding:12px;
  margin: 12px 0;
  box-shadow: 0 1px 2px rgba(16,24,40,.04);
  transition: box-shadow .18s ease, transform .18s ease;
}
.ALU-card:hover{ box-shadow: 0 8px 24px rgba(16,24,40,.10); }
.ALU-cardHeader{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
}
.ALU-headerBtns{ display:flex; gap:8px; align-items:center; }

/* ===== Toolbar (en-tête de page) ===== */
.ALU-toolbar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin:8px 0 16px;
}

/* ===== Règles ===== */
.ALU-rules{ display:flex; flex-direction:column; gap:10px; margin-top:8px; }
.ALU-ruleRow{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  border:1px solid #e5e7eb;
  border-radius:12px;
  padding:10px 12px;
  background:#fff;
}
.ALU-ruleRow.is-off{ opacity:.6; }
.ALU-ruleMain{
  display:grid;
  grid-template-columns: 1.2fr auto auto auto auto;
  gap:10px;
  align-items:center;
  flex:1;
}
.ALU-ruleActions{
  margin-left:auto;
  display:flex;
  align-items:center;
  gap:8px;
}
.ALU-cat{ font-weight:600; }
.ALU-cat strong{ font-size:1.05rem; font-weight:800; }
.ALU-days{ display:flex; gap:4px; flex-wrap:wrap; }
.ALU-day{
  padding:2px 6px;
  border-radius:999px;
  font-size:.85rem;
  border:1px solid #e5e7eb;
  background:#fff;
}
.ALU-day.on{ background:rgba(32,70,110,.08); border-color:rgba(32,70,110,.18); }
.ALU-day.off{ opacity:.45; }
.ALU-time{ font-variant-numeric: tabular-nums; white-space:nowrap; }
.ALU-mode{ font-size:.85rem; color:#6b7280; white-space:nowrap; }
.ALU-addRule{ margin-top:12px; border-top:1px dashed #e5e7eb; padding-top:12px; }

/* ===== “Contrôles en ligne” + toggleBtn + segments ===== */
.ALU-controls-inline{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.ALU-oneLine{ white-space:nowrap; }

.ALU-toggleBtn{
  border:1px solid var(--GN-border,#d6d9de);
  background:#fff;
  border-radius:999px;
  padding:8px 12px;
  cursor:pointer;
  font-weight:600;
}
.ALU-toggleBtn.is-on{
  background:var(--GN-brand-weak,#eef6ff);
  border-color:var(--GN-brand,#20466e);
  color:var(--GN-brand,#20466e);
}

.ALU-seg{
  display:inline-flex;
  border:1px solid var(--GN-border,#d6d9de);
  border-radius:10px;
  overflow:hidden;
}
.ALU-seg button{
  padding:8px 12px;
  border:0;
  background:#fff;
  cursor:pointer;
  font-weight:600;
}
.ALU-seg button + button{ border-left:1px solid var(--GN-border,#d6d9de); }
.ALU-seg button.is-active{ background:var(--GN-brand,#20466e); color:#fff; }

/* ===== Rayon (slider + input number) ===== */
.ALU-rangeWrap{ display:flex; align-items:center; gap:10px; }
.ALU-rangeWrap .ALU-rangeFlex{ flex:1; min-width:0; }
.ALU-rangeWrap .ALU-rangeFlex input[type="range"]{ width:100%; display:block; }
.ALU-rangeWrap .ALU-num{
  flex:0 0 90px;
  width:90px !important;
  max-width:90px;
  text-align:right;
  box-sizing:border-box;
}
.ALU-rangeVal{ min-width:56px; text-align:right; font-variant-numeric: tabular-nums; }

/* ===== Jours + heures sur une même ligne ===== */
.ALU-inlineRow{ display:flex; flex-wrap:wrap; align-items:center; gap:14px; }
.ALU-inlineRow .ALU-time{ display:flex; gap:10px; }
.ALU-inlineRow input[type="time"]{ width:120px; }

/* ===== People picker ===== */
.ALU-peoplePicker{ display:flex; flex-direction:column; gap:8px; }
.ALU-peopleChips{ display:flex; gap:8px; flex-wrap:wrap; }
.ALU-personChip{
  display:inline-flex; align-items:center; gap:8px;
  border:1px solid #e5e7eb; border-radius:999px; background:#fff; padding:4px 8px;
}
.ALU-personChip img{ width:24px; height:24px; border-radius:50%; object-fit:cover; background:#f3f4f6; }
.ALU-personChip button{ border:0; background:transparent; cursor:pointer; font-size:16px; line-height:1; }

.ALU-quick-menu{
  position:absolute; z-index:60; left:0; right:0;
  background:#fff; border:1px solid var(--GN-border,#d6d9de); border-radius:10px;
  display:none; max-height:260px; overflow:auto;
  box-shadow:0 4px 14px rgba(0,0,0,.08);
}
.ALU-personItem{
  display:flex; align-items:center; gap:10px;
  padding:8px 10px; cursor:pointer;
}
.ALU-personItem:hover{ background:#EEF3FB; }
.ALU-personItem img{ width:28px; height:28px; border-radius:50%; object-fit:cover; background:#f3f4f6; }

/* Actif dans le menu d'autocomplétion (jaune) */
.ALU-quick-menu .is-active{ background:#fff7cc; }

/* Flash “contour jaune” bref */
.ALU-flash{
  outline:3px solid #ffd54f;
  outline-offset:2px;
  transition: outline-color .6s ease;
}

/* ===== Visually hidden ===== */
.visually-hidden{
  position:absolute!important;
  clip:rect(1px,1px,1px,1px);
  padding:0; border:0; height:1px; width:1px; overflow:hidden;
}


/* ===== Date-range calendar ===== */
.ALU-cal{ user-select:none; width:100%; max-width:680px; }
.ALU-cal .ALU-cal-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; }
.ALU-cal .ALU-cal-nav button{
  border:1px solid #e5e7eb; background:#fff; border-radius:8px; padding:6px 10px; cursor:pointer;
}
.ALU-cal .ALU-months{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
@media (max-width:768px){ .ALU-cal .ALU-months{ grid-template-columns:1fr; } }
.ALU-cal .ALU-month{
  border:1px solid #e5e7eb; border-radius:12px; overflow:hidden; background:#fff;
}
.ALU-cal .ALU-month h4{
  margin:0; padding:8px 10px; background:#f8fafc; border-bottom:1px solid #e5e7eb; font-size:.95rem; text-transform:capitalize;
}
.ALU-cal .ALU-grid{ display:grid; grid-template-columns: repeat(7, 1fr); gap:0; }
.ALU-cal .ALU-dow,
.ALU-cal .ALU-day{ padding:8px; text-align:center; font-size:.9rem; border-bottom:1px solid #f1f5f9; }
.ALU-cal .ALU-dow{ background:#fafafa; font-weight:600; }
.ALU-cal .ALU-day{ cursor:pointer; position:relative; }
.ALU-cal .ALU-day.is-out{ color:#c0c4cc; cursor:default; }
.ALU-cal .ALU-day.is-disabled{ color:#cbd5e1; pointer-events:none; }
.ALU-cal .ALU-day.is-inrange{ background:#e6f0fb; }
.ALU-cal .ALU-day.is-start,
.ALU-cal .ALU-day.is-end{ background:#20466e; color:#fff; border-radius:12px; }
.ALU-legend{ margin-top:8px; color:#6b7280; font-size:.9rem; }

.ALU-rangeChips{ display:flex; gap:8px; flex-wrap:wrap; margin-top:8px; }
.ALU-rangeChip{
  border:1px solid #e5e7eb; border-radius:999px; padding:4px 8px; background:#fff;
  display:flex; gap:6px; align-items:center;
}
.ALU-rangeChip button{ border:0; background:transparent; cursor:pointer; font-size:14px; }

/* ===== Sélecteurs cat/sub (utiles si manuel plus tard) ===== */
.ALU-suggest{
  position:absolute; top:100%; left:0; right:0; z-index:30;
  background:#fff; border:1px solid var(--bd,#e5e7eb); border-radius:10px;
  box-shadow:0 6px 18px rgba(0,0,0,.08);
  max-height:260px; overflow:auto;
}
.ALU-suggest[hidden]{ display:none; }
.ALU-suggest-item{ padding:8px 10px; cursor:pointer; }
.ALU-suggest-item:hover{ background:#eef3fb; }

.ALU-targetChips{ display:flex; gap:8px; flex-wrap:wrap; }
.ALU-targetChip{
  display:inline-flex; align-items:center; gap:6px;
  border:1px solid var(--bd,#e5e7eb); border-radius:999px; background:#fff; padding:4px 8px;
}
.ALU-targetChip button{ border:0; background:transparent; cursor:pointer; font-size:14px; line-height:1; }

.ALU-manual.hidden{ display:none; }

.ALU-subwrap{ margin:10px 0; display:flex; flex-direction:column; gap:10px; }
.ALU-subpanel{
  border:1px dashed var(--bd,#e5e7eb); border-radius:10px; padding:8px;
}
.ALU-subgrid{ display:flex; flex-wrap:wrap; gap:6px; margin-top:6px; }
.ALU-subbtn{
  border:1px solid var(--bd,#e5e7eb); background:#fff; border-radius:999px; padding:6px 10px; cursor:pointer;
}
.ALU-subbtn.is-on{ background:#eef6ff; border-color:#cfe3ff; }

/* ===== Compacité mobile ===== */
@media (max-width: 767px){
  .ALU-card{ padding:10px; }
  .ALU-event{ grid-template-columns: 56px 1fr; }
  .ALU-event > div:last-child{ grid-column: 1 / -1; justify-self:end; }
}

/* ===== Liste résultats voir_alertes ===== */
.ALU-list{ display:flex; flex-direction:column; gap:12px; }
.ALU-event{
  display:grid; grid-template-columns: 72px 1fr auto; gap:12px; align-items:center;
  border:1px solid #e5e7eb; border-radius:12px; background:#fff; padding:10px 12px;
}
.ALU-eventPhoto{ width:72px; height:72px; border-radius:10px; object-fit:cover; background:#f2f4f7; }
.ALU-eventMeta{ font-size:.9rem; color:#555; }
.ALU-badges{ display:flex; gap:6px; flex-wrap:wrap; }

/* ===== Footer visible sur ces pages ===== */
body.ALU-page-gerer-alertes,
body.ALU-page-voir-alertes{
  min-height:100dvh;
  display:flex;
  flex-direction:column;
}
body.ALU-page-gerer-alertes main.layout,
body.ALU-page-voir-alertes main.layout{
  flex:1 0 auto;
}
body.ALU-page-gerer-alertes .GN-footer,
body.ALU-page-voir-alertes .GN-footer{
  position:relative;
  z-index:2;                 /* passe au-dessus d'éventuels backgrounds/overlays */
  background:#ffffff;
  color:#111827;
  border-top:1px solid #e5e7eb;
  padding:16px 20px;
  flex:0 0 auto;
}
body.ALU-page-gerer-alertes .GN-footer a,
body.ALU-page-voir-alertes .GN-footer a{
  color:#0f62fe;
  text-decoration:underline;
}
body.ALU-page-gerer-alertes .GN-footer .muted,
body.ALU-page-voir-alertes .GN-footer .muted{
  color:#6b7280;
}
/* FERME par défaut */
.ALU-collapsible[aria-hidden="true"]{
  display: none !important;
}

/* OUVERT quand demandé */
.ALU-collapsible[aria-hidden="false"]{
  display: block !important;
}
/* Footer toujours visible sur la page alertes */
body.ALU-page-gerer-alertes,
body.ALU-page-voir-alertes{
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

body.ALU-page-gerer-alertes main.layout,
body.ALU-page-voir-alertes main.layout{
  flex: 1 0 auto;
}

/* Force visibilité + contraste + au-dessus des overlays */
body.ALU-page-gerer-alertes .GN-footer,
body.ALU-page-voir-alertes .GN-footer{
  display: block !important;
  position: relative !important;
  z-index: 9999 !important;
  background: #ffffff !important;
  color: #111827 !important;
  border-top: 1px solid #e5e7eb !important;
  padding: 16px 20px !important;
  opacity: 1 !important;
  filter: none !important;
}

/* Liens du footer lisibles */
body.ALU-page-gerer-alertes .GN-footer a,
body.ALU-page-voir-alertes .GN-footer a{
  color: #0f62fe !important;
  text-decoration: underline !important;
}

/* Si un parent impose un opacity, on neutralise à l’intérieur */
body.ALU-page-gerer-alertes .GN-footer *,
body.ALU-page-voir-alertes .GN-footer *{
  opacity: 1 !important;
  color: inherit !important;
}

/* Sécurité: aucun overlay ne doit couvrir le bas */
body.ALU-page-gerer-alertes [class*="modal"],
body.ALU-page-gerer-alertes [class*="overlay"],
body.ALU-page-gerer-alertes [class*="drawer"]{
  pointer-events: none;
}
body.ALU-page-gerer-alertes [class*="modal"].is-open,
body.ALU-page-gerer-alertes [class*="overlay"].is-open,
body.ALU-page-gerer-alertes [class*="drawer"].is-open{
  pointer-events: auto;
}