/* QG Protec54 2.1 – lot 7 : charte Protection Civile (Poppins pour les titres, Arial ou système pour le texte),
 * une seule famille de composants, quatre onglets, barre latérale sur tablette et ordinateur,
 * actions principales en bas de l'écran, pages vides illustrées, transitions natives.
 * Chargé après qg.css : il le complète et le corrige. */

@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 500; font-display: swap; src: url('/fonts/poppins-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 600; font-display: swap; src: url('/fonts/poppins-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 700; font-display: swap; src: url('/fonts/poppins-latin-700-normal.woff2') format('woff2'); }

:root {
  --titre: 'Poppins', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --texte-courant: Arial, 'Helvetica Neue', system-ui, -apple-system, sans-serif;
  --rayon: 14px; --rayon-petit: 10px;
  --ombre: 0 1px 2px rgba(1, 30, 60, 0.06), 0 6px 18px rgba(1, 30, 60, 0.06);
  --ombre-forte: 0 10px 30px rgba(1, 30, 60, 0.18);
  --rail: 240px; --barre: 64px;
}

/* ---------- typographie de la charte */
body { font-family: var(--texte-courant); }
h1, h2, h3, .marque, .heros h1, .dlg-tete h2, .navigation a span, .bouton, .puce, .carte-pilotage strong, .vi-titre, .pm-quand, .direct-chiffres strong {
  font-family: var(--titre);
}
h1 { font-weight: 700; letter-spacing: -0.015em; }
h2 { font-weight: 600; }
h3 { font-weight: 600; font-size: 1rem; margin: 0 0 8px; }
.bouton, .puce { font-weight: 600; letter-spacing: 0; }

/* ---------- une seule famille de composants : cartes, lignes, fenêtres */
.bloc, .tuile, .carte-pilotage, .carte-outil, .lignes, .appareils > li, .invite, .calendrier, .agenda-jour, .vide-illustre, .fm-bloc, .liste-depart {
  border-radius: var(--rayon);
}
section.bloc:not(.liste-depart) { background: var(--surface); border: 1px solid var(--bord); box-shadow: var(--ombre); padding: 16px; }
.blocs-journee > section.bloc:first-child, .contenu > section.bloc:first-child { margin-top: 8px; }
.carte-pilotage, .tuile { box-shadow: var(--ombre); }
.bouton { border-radius: var(--rayon-petit); min-height: 48px; }
.bouton.petit, .puce { min-height: 44px; }
.bouton.principal:hover { filter: brightness(1.08); }
.bouton:active, .puce:active, .carte-pilotage:active { transform: scale(0.98); }
.badge-vert { color: var(--vert); border-color: currentColor; background: var(--vert-fond); }
.badge-rouge { color: var(--rouge); border-color: currentColor; background: var(--rouge-fond); }
dialog.dialogue { border-radius: var(--rayon); }
.actions-ligne { display: flex; gap: 8px; flex-wrap: wrap; }
.defile-x { overflow-x: auto; }
.tableau { width: 100%; border-collapse: collapse; }
.tableau th, .tableau td { text-align: left; padding: 10px 8px; border-bottom: 1px solid var(--bord); vertical-align: top; }
.tableau td:last-child { text-align: right; }
.ou { display: flex; align-items: center; gap: 10px; margin: 14px 0 0; color: var(--texte-2); font-size: 0.9rem; }
.ou::before, .ou::after { content: ''; flex: 1; border-top: 1px solid var(--bord); }

/* ---------- quatre onglets en bas (téléphone) */
.navigation { grid-auto-flow: column; height: calc(var(--barre) + env(safe-area-inset-bottom, 0px)); box-shadow: 0 -4px 18px rgba(1, 30, 60, 0.06); }
.navigation a { position: relative; min-height: var(--barre); font-size: 0.78rem; gap: 4px; }
.navigation a .ic { position: relative; z-index: 1; }
.navigation a::before { content: ''; position: absolute; top: 8px; left: 50%; width: 56px; height: 30px; margin-left: -28px; border-radius: 999px; background: transparent; transition: background-color 0.2s ease; }
.navigation a[aria-current="page"] { box-shadow: none; color: var(--bleu-texte); }
.navigation a[aria-current="page"]::before { background: color-mix(in srgb, var(--orange) 22%, transparent); }
.navigation a.nav-large { display: none !important; }
main#vue { padding-bottom: calc(var(--barre) + 24px + env(safe-area-inset-bottom, 0px)); }

/* ---------- actions principales en bas de l'écran, à portée de pouce */
@media (max-width: 700px) {
  dialog.dialogue .actions, .actions-bas {
    position: sticky; bottom: 0; z-index: 2; margin: 16px -18px 0; padding: 12px 18px calc(12px + env(safe-area-inset-bottom, 0px));
    background: var(--surface); border-top: 1px solid var(--bord);
  }
  dialog.dialogue .actions .bouton, .actions-bas .bouton { flex: 1 1 auto; }
  .contenu .actions-bas { bottom: calc(var(--barre) + env(safe-area-inset-bottom, 0px)); margin: 16px -16px 0; }
  .em-editeur .actions-bas { margin-left: -16px; margin-right: -16px; }
}

/* ---------- tablette et ordinateur : barre latérale, contenu plus large */
@media (min-width: 900px) {
  /* la 1.14 pose déjà une grille (barre de 236 px à gauche, contenu à droite) : on garde cette grille */
  .coquille { grid-template-columns: var(--rail) minmax(0, 1fr); }
  .navigation { position: sticky; top: calc(56px + env(safe-area-inset-top, 0px)); height: calc(100vh - 56px); width: auto; display: flex; flex-direction: column; gap: 4px; padding: 16px 12px; box-shadow: none; }
  .navigation a, .navigation a.nav-large { display: flex !important; flex-direction: row; justify-content: flex-start; gap: 14px; min-height: 48px; padding: 0 14px; border-radius: 12px; font-size: 0.95rem; box-shadow: none; }
  .navigation a::before { display: none; }
  .navigation a:hover { background: var(--surface-2); }
  .navigation a[aria-current="page"] { background: color-mix(in srgb, var(--orange) 18%, transparent); box-shadow: none; }
  .navigation a.nav-large[data-onglet="pilotage"] { margin-top: 12px; position: relative; }
  .navigation a.nav-large[data-onglet="pilotage"]::after { content: ''; position: absolute; left: 0; right: 0; top: -8px; border-top: 1px solid var(--bord); }
  main#vue { padding-bottom: 32px; }
  .fab { right: 32px; bottom: 32px; }
  .contenu { max-width: 1080px; padding: 24px 32px; }
}
@media (min-width: 760px) {
  .agenda-grille { display: grid; grid-template-columns: minmax(300px, 1fr) minmax(280px, 1fr); gap: 20px; align-items: start; }
  .direct-grille { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 20px; }
  .blocs-journee { column-count: 2; column-gap: 20px; }
  .blocs-journee > * { break-inside: avoid; display: block; }
}
@media (min-width: 1000px) {
  .em-editeur { display: grid; grid-template-columns: minmax(340px, 1fr) minmax(360px, 1.2fr); gap: 24px; align-items: start; }
  .em-editeur .em-apercu { position: sticky; top: 80px; }
}

/* ---------- transitions natives entre les pages (navigateurs récents) ; rien si l'on demande moins d'animations */
main#vue { view-transition-name: vue; }
::view-transition-old(vue), ::view-transition-new(vue) { animation-duration: 0.22s; animation-timing-function: cubic-bezier(0.2, 0.7, 0.2, 1); }
html[data-sens="gauche"]::view-transition-old(vue) { animation-name: sortie-gauche; }
html[data-sens="gauche"]::view-transition-new(vue) { animation-name: entree-droite; }
html[data-sens="droite"]::view-transition-old(vue) { animation-name: sortie-droite; }
html[data-sens="droite"]::view-transition-new(vue) { animation-name: entree-gauche; }
@keyframes sortie-gauche { to { transform: translateX(-24%); opacity: 0; } }
@keyframes entree-droite { from { transform: translateX(24%); opacity: 0; } }
@keyframes sortie-droite { to { transform: translateX(24%); opacity: 0; } }
@keyframes entree-gauche { from { transform: translateX(-24%); opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(vue), ::view-transition-new(vue) { animation: none; }
  .bouton:active, .puce:active, .carte-pilotage:active { transform: none; }
}

/* ---------- pages vides illustrées */
.vide-illustre { text-align: center; padding: 20px 16px; background: var(--surface-2); margin: 8px 0; }
.vide-illustre svg { width: 140px; height: auto; display: block; margin: 0 auto 8px; }
.vi-titre { font-weight: 600; margin: 0 0 4px; }
.vi-texte { color: var(--texte-2); margin: 0; font-size: 0.92rem; }
#vue .contenu > p.vide, #resultats > p.vide {
  padding-top: 112px; text-align: center; background-repeat: no-repeat; background-position: center 18px; background-size: 120px 90px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 120'%3E%3Cpath d='M30 50 80 30l50 20v46L80 112 30 96z' fill='%23E6EEF8'/%3E%3Cpath d='M30 50l50 20 50-20M80 70v42' fill='none' stroke='%23014182' stroke-width='5' stroke-linejoin='round'/%3E%3Cpath d='M30 50 18 66l50 20 12-16M130 50l12 16-50 20-12-16' fill='%23F18800'/%3E%3C/svg%3E");
}
.vide-hors-ligne { border-style: solid; }

/* ---------- Mon agenda (calendrier unifié) */
.agenda-filtres { margin: 0 0 12px; }
.agenda-jour { background: var(--surface); border: 1px solid var(--bord); padding: 14px; }
.agenda-jour h3 { margin-bottom: 10px; }
.agenda-items { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.agenda-item { display: flex; gap: 12px; align-items: center; width: 100%; min-height: 56px; padding: 8px 10px; border: 1px solid var(--bord); border-radius: var(--rayon-petit); background: var(--surface); color: var(--texte); text-align: left; font: inherit; text-decoration: none; cursor: pointer; }
div.agenda-item { cursor: default; }
.ai-pastille { width: 36px; height: 36px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; background: var(--et-bg, var(--surface-2)); color: var(--et-tx, var(--texte)); flex-shrink: 0; }
.ai-texte { display: flex; flex-direction: column; min-width: 0; }
.ai-texte small { color: var(--texte-2); }
.t-violet { --et-bg: #EFE7FA; --et-tx: #5B3F8F; }

/* ---------- fiche de mission : équipage, fil, documents, liste */
.fm-bloc { margin: 16px 0 0; padding-top: 12px; border-top: 1px solid var(--bord); }
.fm-bloc h3 { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.fil-apercu { color: var(--texte-2); margin: 0 0 8px; }
.fil-liste { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 8px; max-height: 50vh; overflow-y: auto; }
.fil-message { background: var(--surface-2); border-radius: 12px 12px 12px 4px; padding: 8px 12px; max-width: 88%; }
.fil-message.moi { margin-left: auto; background: color-mix(in srgb, var(--bleu) 12%, var(--surface)); border-radius: 12px 12px 4px 12px; }
.fil-auteur { font-size: 0.8rem; color: var(--texte-2); margin: 0 0 2px; }
.fil-texte { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.fil-ecrire { display: flex; gap: 8px; align-items: flex-end; }
.fil-ecrire textarea { min-height: 48px; }
.fil-ecrire .bouton { flex-shrink: 0; }
.progression { height: 8px; border-radius: 999px; background: var(--surface-2); overflow: hidden; margin: 4px 0 10px; }
.progression span { display: block; height: 100%; background: var(--orange); border-radius: inherit; transition: width 0.25s ease; }
.liste-depart small.perso { font-size: 0.75rem; color: var(--bleu-texte); font-weight: 600; }

/* ---------- Ma journée : prochaine mission, recyclage */
.prochaine-mission { border-left: 5px solid var(--orange); }
.pm-quand { display: flex; align-items: center; gap: 8px; color: var(--orange-texte); font-weight: 600; margin: 0 0 4px; }
.prochaine-mission h2 { margin-bottom: 4px; }
.pm-infos { list-style: none; padding: 0; margin: 10px 0; display: grid; gap: 6px; color: var(--texte-2); }
.pm-infos li { display: flex; gap: 8px; align-items: flex-start; }
.invite-lien { display: flex; gap: 12px; align-items: center; text-decoration: none; color: var(--texte); min-height: 56px; }
.invite-lien span { flex: 1; display: flex; flex-direction: column; }
.invite-lien small { color: var(--texte-2); }

/* ---------- mes qualifications */
.qualifs { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.qualif { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 14px; background: var(--surface); border: 1px solid var(--bord); border-radius: var(--rayon); }
.qualif.a_recycler { border-left: 5px solid var(--orange); }
.qualif.expiree { border-left: 5px solid var(--rouge); }
.qualif-nom { font-weight: 700; margin: 0; }
.qualif-dates { margin: 2px 0 0; color: var(--texte-2); font-size: 0.9rem; }
tr.expiree td:first-child { font-weight: 700; }

/* ---------- En direct */
.direct-chiffres { list-style: none; padding: 0; margin: 8px 0 4px; display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; }
.direct-chiffres li { background: var(--surface); border: 1px solid var(--bord); border-radius: var(--rayon); padding: 12px; display: flex; flex-direction: column; box-shadow: var(--ombre); }
.direct-chiffres strong { font-size: 1.7rem; line-height: 1.1; color: var(--bleu-texte); }
.direct-chiffres li.alerte strong { color: var(--orange-texte); }
.direct-chiffres span { color: var(--texte-2); font-size: 0.88rem; }
.mc-liste { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }

/* ---------- direction dans Outils */
.direction-outils .cartes-pilotage { margin: 0; }

/* ---------- écrans : modèles, programme, éditeur */
.em-pages { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 6px; }
.em-page { display: flex; align-items: center; gap: 6px; padding: 4px 4px 4px 8px; background: var(--surface-2); border: 1px solid var(--bord); border-radius: var(--rayon-petit); }
.em-page.tire { box-shadow: var(--ombre-forte); background: var(--surface); }
.em-poignee { cursor: grab; touch-action: none; display: inline-flex; width: 32px; height: 44px; align-items: center; justify-content: center; color: var(--texte-2); }
.em-nom-page { flex: 1; font-weight: 600; min-width: 0; }
.em-duree select { min-height: 44px; width: auto; padding: 6px 8px; }
.em-ajout-titre { font-weight: 600; margin: 12px 0 6px; }
.em-cadre { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: var(--rayon-petit); overflow: hidden; border: 1px solid var(--bord); background: #000; }
.em-cadre iframe { position: absolute; inset: 0; width: 200%; height: 200%; border: 0; transform: scale(0.5); transform-origin: 0 0; }
.em-programme { list-style: none; padding: 0; margin: 12px 0; display: grid; gap: 10px; }
.em-creneau fieldset { border: 1px solid var(--bord); border-radius: var(--rayon-petit); padding: 10px 12px; margin: 0; }
.em-jours { display: flex; gap: 4px; flex-wrap: wrap; margin: 4px 0 8px; }
.em-jour { position: relative; margin: 0; }
.em-jour input { position: absolute; opacity: 0; width: 1px; height: 1px; min-height: 0; }
.em-jour span[aria-hidden] { display: inline-flex; width: 44px; height: 44px; align-items: center; justify-content: center; border-radius: 50%; border: 1.5px solid var(--bord); font-weight: 700; cursor: pointer; }
.em-jour input:checked + span { background: var(--bleu); border-color: var(--bleu); color: #fff; }
.em-jour input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: 2px; }
.em-heures { display: flex; gap: 12px; flex-wrap: wrap; }
.em-heures label, .em-creneau label { margin-top: 8px; }
.em-heures input { width: auto; }

/* ---------- zones tactiles d'au moins 44 px (reprises de la 1.14) */
.avatar { width: 44px; height: 44px; }
.aide-page { width: 44px !important; height: 44px !important; min-width: 44px; }
.puce, .resume-jour .puce, .dates-rapides .puce, .chiffres dd.detail-types a { min-height: 44px; }
.aller-contenu { min-height: 44px; display: inline-flex; align-items: center; }
.tirer { width: 44px; height: 44px; }
.toast-action { min-height: 44px; }

/* ---------- notifications : centrées dans la zone de contenu sur ordinateur */
@media (min-width: 900px) {
  #toasts { left: calc(50% + var(--rail) / 2); bottom: 24px; }
}