/* planning.batmax.fr — habillage repris du CRM (jetons, entête, onglets en pilules, blocs, tiroir) avec l'orange de batmax.fr (Benoît, 10/10/2026). Polices système seulement. */
:root {
  color-scheme: light;
  --bg: #f3f4fb; --surface: #ffffff; --surface-2: #eceefa; --line: #dde0f1;
  --fg: #1f2140; --muted: #666a88;
  --accent: #d97000; --accent-fg: #ffffff; --accent-soft: #fff4e6;
  --warn: #8f4a07; --warn-soft: #fdecd2; --bad: #b3261e; --bad-soft: #fde1e4; --good: #14703a; --good-soft: #d9f4e4;
  --auj: #d92d20; --auj-fg: #fff;
  --p-plomberie: #2a78d6; --p-couverture: #b86b00; --p-electricite: #e5a000; --p-chauffage: #00b884; --p-recherche_de_fuite: #a25ddc; --p-remise_en_etat: #8a8fae; --p-support: #8a8fae; --p-: #8a8fae;
  --bande: linear-gradient(100deg, #ff8c1e 0%, #e87d0c 55%, #d97000 100%);
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}
@media (prefers-color-scheme: dark) {
  :root { color-scheme: dark; --bg: #14152a; --surface: #1e2038; --surface-2: #2a2d4d; --line: #363a63; --fg: #eceeff; --muted: #a3a7cc;
    --accent: #ffb366; --accent-fg: #3a2000; --accent-soft: #4a2e10; --warn: #f5b968; --warn-soft: #473219; --bad: #f5a0a8; --bad-soft: #4d2330;
    --good: #7fdca0; --good-soft: #17402a; --auj: #ff6b61; --auj-fg: #1b1b1b;
    --bande: linear-gradient(100deg, #b85f00 0%, #9e4f00 55%, #8a4500 100%); }
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--bg); color: var(--fg); font: 14px/1.45 var(--font); -webkit-text-size-adjust: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
[hidden] { display: none !important; }
.sr { position: absolute; left: -9999px; }

/* Connexion */
.connexion { min-height: 100dvh; display: grid; place-items: center; padding: 24px 16px; }
.connexion .boite { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 24px; width: min(380px, 100%); display: flex; flex-direction: column; gap: 14px; }
.connexion h1 { font-size: 20px; margin: 0; }
.connexion p { margin: 0; color: var(--muted); }
.champ { display: flex; flex-direction: column; gap: 4px; }
.champ label { font-size: 13px; color: var(--muted); }
.champ input, .champ select, .champ textarea { background: var(--bg); border: 1px solid var(--line); border-radius: 6px; padding: 9px 10px; width: 100%; min-width: 0; }
.msg { font-size: 13px; min-height: 1.3em; }
.msg.err { color: var(--bad); }
.msg.ok { color: var(--good); }

/* Boutons */
.btn { background: var(--accent); color: var(--accent-fg); border: 0; border-radius: 8px; padding: 8px 14px; font-weight: 600; }
.btn.second { background: var(--surface-2); color: var(--fg); font-weight: 500; }
.btn.petit { padding: 5px 10px; font-size: 13px; }
.btn.clair { background: #fff; color: #d97000; font-weight: 700; }
.btn.danger { color: var(--bad); }
.btn[disabled] { opacity: .55; cursor: default; }
.btn.on { box-shadow: inset 0 0 0 2px var(--accent); }

/* Entête colorée, onglets en pilules */
.entete { position: sticky; top: 0; z-index: 5; background: var(--bande); color: #fff; padding: 10px 20px; padding-top: calc(10px + env(safe-area-inset-top, 0px)); display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; box-shadow: 0 2px 12px rgba(217, 112, 0, .30); }
.entete h1 { color: #fff; font-size: 17px; margin: 0; letter-spacing: .2px; }
.onglets { display: flex; gap: 2px; background: rgba(255,255,255,.16); padding: 3px; border-radius: 8px; overflow-x: auto; max-width: 100%; }
.onglets button { border: 0; background: transparent; padding: 6px 12px; border-radius: 6px; color: rgba(255,255,255,.92); font-weight: 600; white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; }
.onglets button:hover { background: rgba(255,255,255,.14); }
.onglets button[aria-selected="true"] { background: #fff; color: #d97000; box-shadow: 0 1px 4px rgba(0,0,0,.2); }
.onglets .n { background: #111314; color: #fff; border-radius: 9px; padding: 0 6px; margin-left: 2px; font-size: 11px; line-height: 17px; font-family: var(--mono); }
.onglets .n.calme { background: rgba(255,255,255,.3); }
.onglets button[aria-selected="true"] .n.calme { background: var(--surface-2); color: var(--muted); }
.outils { margin-left: auto; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.entete input[type="search"] { background: rgba(255,255,255,.96); color: #1f2140; border: 0; border-radius: 6px; padding: 7px 10px; width: 210px; max-width: 100%; }
.entete input[type="search"]::placeholder { color: #6b6f8f; }
.entete .compte { color: rgba(255,255,255,.88); font-size: 13px; }
.entete .compte button { border: 0; background: none; color: #fff; text-decoration: underline; padding: 0 0 0 6px; font-size: 13px; }

/* Barre de vue, résumé, blocs */
#contenu { padding: 14px 20px 24px; }
.barre-vue { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-bottom: 12px; }
.barre-vue .droite { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }
.cal-titre { font-size: 22px; font-weight: 400; margin: 0 6px 0 0; }
.cal-titre b { font-weight: 700; }
.titre-vue { font-size: 18px; margin: 0; display: flex; gap: 8px; align-items: baseline; }
.titre-vue .n { font-family: var(--mono); font-size: 13px; color: var(--muted); font-weight: 400; }
.barre-vue select, .barre-vue input[type="text"], .barre-vue input[type="date"], .barre-vue input[type="search"] { background: var(--surface); border: 1px solid var(--line); border-radius: 6px; padding: 6px 8px; }
.nav { display: flex; gap: 6px; }
.resume { display: flex; flex-wrap: wrap; gap: 4px 24px; color: var(--muted); font-size: 13px; padding: 0 0 10px; }
.resume b { color: var(--fg); font-family: var(--mono); font-weight: 500; }
.bandeau { background: var(--warn-soft); color: var(--warn); border: 1px solid var(--warn); border-radius: 6px; padding: 8px 12px; margin-bottom: 10px; font-size: 13px; }
.bandeau.mauvais { background: var(--bad-soft); color: var(--bad); border-color: var(--bad); }
.onglets-mini { display: flex; gap: 2px; background: var(--surface-2); padding: 3px; border-radius: 8px; align-self: flex-start; flex-wrap: wrap; }
.onglets-mini button { border: 0; background: transparent; padding: 4px 10px; border-radius: 6px; color: var(--muted); font-weight: 500; font-size: 13px; white-space: nowrap; }
.onglets-mini button[aria-selected="true"] { background: var(--surface); color: var(--fg); box-shadow: 0 1px 2px rgba(0,0,0,.14); }
.onglets-mini .n { font-family: var(--mono); font-size: 12px; margin-left: 5px; color: var(--bad); }
.onglets-mini .n.calme { color: var(--muted); }
.colonne { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.bloc { background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.bloc h3 { margin: 0; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.bloc h3 .n { font-family: var(--mono); color: var(--fg); font-size: 12px; }
.bloc h3 .discret { text-transform: none; letter-spacing: 0; font-weight: 400; }
.bloc p.note { margin: 0; color: var(--muted); font-size: 13px; }
.vide { color: var(--muted); font-size: 13px; padding: 6px 0; }
.discret { color: var(--muted); font-size: 12px; }
.mono { font-family: var(--mono); }
.boutons { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

/* Tableaux */
.boite-tableau { overflow-x: auto; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; }
table { border-collapse: collapse; width: 100%; }
th, td { text-align: left; padding: 8px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); background: var(--surface-2); font-weight: 600; white-space: nowrap; position: sticky; top: 0; z-index: 1; }
tbody tr.cliquable { cursor: pointer; }
tbody tr.cliquable:hover td { background: var(--surface-2); }
td.num, th.num { text-align: right; font-family: var(--mono); }
td .sous { color: var(--muted); font-size: 12px; }
tr.grp td { background: var(--bg); color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .06em; font-weight: 600; padding: 6px 12px; }
tr.gris td { color: var(--muted); }
.etiq { display: inline-block; font-size: 11px; padding: 1px 6px; border-radius: 4px; border: 1px solid var(--line); color: var(--muted); white-space: nowrap; margin: 1px 2px 1px 0; }
.etiq.ok { color: var(--good); border-color: var(--good); background: var(--good-soft); }
.etiq.att { color: var(--warn); border-color: var(--warn); background: var(--warn-soft); }
.etiq.mauvais { color: var(--bad); border-color: var(--bad); background: var(--bad-soft); }
.etiq.auto { color: var(--warn); border-color: var(--warn); background: var(--warn-soft); font-weight: 600; }
.etiq.pole { background: var(--surface-2); color: var(--fg); }
.actions { white-space: nowrap; }
.actions button { border: 1px solid var(--line); background: var(--surface); border-radius: 6px; padding: 3px 8px; font-size: 13px; margin-right: 4px; }
.actions button:hover { border-color: var(--accent); }
.liste-sal td { white-space: nowrap; }

/* Fiche, champs, journal */
.champs { display: grid; grid-template-columns: 170px 1fr; gap: 6px 12px; align-items: baseline; font-size: 13px; }
.champs label { color: var(--muted); }
.champs input, .champs select, .champs textarea { background: var(--bg); border: 1px solid var(--line); border-radius: 6px; padding: 6px 8px; width: 100%; min-width: 0; }
.champs textarea { min-height: 64px; resize: vertical; }
.champs .duo { display: flex; gap: 6px; }
.champs .duo > * { min-width: 0; flex: 1; }
.cases { display: flex; flex-wrap: wrap; gap: 4px 12px; }
.cases label { display: inline-flex; gap: 5px; align-items: center; font-size: 13px; color: var(--fg); }
.liste-docs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.liste-docs li { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; background: var(--bg); border-radius: 6px; padding: 7px 9px; font-size: 13px; align-items: center; }
.liste-docs li a { color: var(--accent); }
.liste-docs li .sous2 { grid-column: 1 / 3; color: var(--muted); font-size: 12px; }
.liste-docs li.gris { opacity: .6; }
.journal { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.journal li { display: grid; grid-template-columns: 112px 1fr; gap: 3px 10px; font-size: 13px; }
.journal .dt { font-family: var(--mono); color: var(--muted); font-size: 12px; }
.journal .qui { font-weight: 600; font-size: 12px; margin-right: 6px; }
.journal .qui.sys { color: #3a4fa3; }
.nom-fiche { font-size: 20px; font-weight: 600; margin: 0; }
.sous-fiche { color: var(--muted); font-size: 13px; }
.depot-docs { border: 1px dashed var(--line); border-radius: 6px; padding: 10px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.depot-docs.sur { border-color: var(--accent); background: var(--accent-soft); }
.depot-docs label.btn { cursor: pointer; }
.depot-docs select { background: var(--bg); border: 1px solid var(--line); border-radius: 6px; padding: 5px 8px; }

/* Tiroir : la fiche glisse depuis la droite, sans assombrir la feuille (Benoît, 10/10) */
.voile { position: fixed; inset: 0; background: transparent; z-index: 20; }
.tiroir { position: fixed; top: 0; right: 0; bottom: 0; width: clamp(560px, 44vw, 820px); max-width: 100%; background: var(--bg); border-left: 1px solid var(--line); z-index: 21; overflow-y: auto; padding: 16px 18px calc(28px + env(safe-area-inset-bottom, 0px)); padding-top: calc(16px + env(safe-area-inset-top, 0px)); display: flex; flex-direction: column; gap: 14px; box-shadow: -8px 0 30px rgba(0,0,0,.18); }
.tiroir .haut { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.tiroir .fermer { border: 0; background: var(--surface-2); border-radius: 6px; padding: 4px 10px; font-size: 13px; }
.tiroir .erreur { background: var(--bad-soft); color: var(--bad); border-radius: 6px; padding: 8px 10px; font-size: 13px; }
.tiroir .avert { background: var(--warn-soft); color: var(--warn); border-radius: 6px; padding: 8px 10px; font-size: 13px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
@media (max-width: 700px) { .tiroir { width: 100%; } }

/* Grille semaine : une ligne par personne, une colonne par jour */
.corps { display: grid; grid-template-columns: 1fr 310px; gap: 14px; align-items: start; }
.corps.sans-aside { grid-template-columns: 1fr; }
@media (max-width: 1100px) { .corps { grid-template-columns: 1fr; } }
.semaine { overflow: auto; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; max-height: calc(100dvh - 210px); }
.semaine table { min-width: 1180px; border-collapse: separate; border-spacing: 0; }
.semaine th { position: sticky; top: 0; z-index: 2; background: var(--surface-2); border-right: 1px solid var(--line); }
.semaine th.jour small { display: block; color: var(--muted); font-weight: 400; text-transform: none; letter-spacing: 0; }
.semaine th.auj { box-shadow: inset 0 -3px 0 var(--auj); }
.semaine th .num { font-family: var(--mono); }
.semaine th.auj .num { background: var(--auj); color: var(--auj-fg); border-radius: 11px; padding: 0 7px; }
.semaine td { border-right: 1px solid var(--line); padding: 4px; height: 56px; width: 205px; min-width: 205px; vertical-align: top; }
.semaine td.nom { position: sticky; left: 0; z-index: 1; background: var(--surface); padding: 8px 10px; width: 200px; min-width: 200px; cursor: pointer; }
.semaine td.nom .emploi { color: var(--muted); font-size: 12px; }
.semaine td.nom:hover { background: var(--surface-2); }
.semaine td.case:hover { background: color-mix(in srgb, var(--accent-soft) 60%, var(--surface)); }
.semaine td.case.sur { outline: 2px dashed var(--accent); outline-offset: -2px; }
.semaine td.gris { background: color-mix(in srgb, var(--surface-2) 55%, var(--surface)); }
.semaine tr.pole td { background: var(--bg); padding: 5px 10px; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 600; height: auto; position: sticky; left: 0; }
.semaine tr.pole td span { font-family: var(--mono); color: var(--fg); margin-left: 8px; text-transform: none; letter-spacing: 0; }
.semaine.global td { height: 36px; }
.chip { display: flex; flex-direction: column; width: 100%; text-align: left; border: 0; border-left: 3px solid var(--accent); border-radius: 4px; padding: 3px 6px; margin-bottom: 4px; font-size: 11.5px; line-height: 1.25; color: var(--fg); background: color-mix(in srgb, var(--accent) 14%, var(--surface)); cursor: pointer; }
.chip:hover { filter: brightness(.96); }
.chip.glisse { opacity: .45; }
.chip.p-plomberie { border-left-color: var(--p-plomberie); background: color-mix(in srgb, var(--p-plomberie) 14%, var(--surface)); }
.chip.p-couverture { border-left-color: var(--p-couverture); background: color-mix(in srgb, var(--p-couverture) 14%, var(--surface)); }
.chip.p-electricite { border-left-color: var(--p-electricite); background: color-mix(in srgb, var(--p-electricite) 16%, var(--surface)); }
.chip.p-chauffage { border-left-color: var(--p-chauffage); background: color-mix(in srgb, var(--p-chauffage) 14%, var(--surface)); }
.chip.p-recherche_de_fuite { border-left-color: var(--p-recherche_de_fuite); background: color-mix(in srgb, var(--p-recherche_de_fuite) 14%, var(--surface)); }
.chip.p-remise_en_etat, .chip.p-support, .chip.p- { border-left-color: var(--p-remise_en_etat); background: var(--surface-2); }
.chip.abs { border-left-color: var(--muted); background: var(--surface-2); color: var(--muted); cursor: default; }
.chip.auto { border-left: 3px dashed var(--warn); background: var(--warn-soft); color: var(--warn); }
.chip.vide { border-left: 3px dashed var(--line); background: transparent; color: var(--muted); box-shadow: inset 0 0 0 1px var(--line); cursor: default; }
.chip.pas-fait { box-shadow: inset 0 0 0 1px var(--bad); }
.chip-l1 { display: flex; gap: 5px; align-items: baseline; min-width: 0; }
.chip-h { font-family: var(--mono); font-size: 10.5px; color: var(--muted); flex: 0 0 auto; }
.chip-t { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; flex: 1 1 auto; }
.chip-l2, .chip-l3 { color: var(--muted); font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chip-l3 { white-space: normal; }
.chip-ok { color: var(--good); font-weight: 700; flex: 0 0 auto; }
.chip-att { color: var(--warn); font-weight: 700; flex: 0 0 auto; }
.chip-bad { color: var(--bad); font-weight: 700; flex: 0 0 auto; }
.chip.ligne { flex-direction: row; gap: 5px; align-items: baseline; padding: 2px 6px; margin-bottom: 2px; }
.chip.ligne .chip-l2 { flex: 1 1 auto; }
.plus { border: 0; background: transparent; color: var(--muted); font-size: 11px; text-align: left; padding: 0 4px; }
.plus:hover { color: var(--fg); text-decoration: underline; }
.niveau { display: flex; gap: 2px; background: var(--surface-2); padding: 3px; border-radius: 8px; }
.niveau button { border: 0; background: transparent; padding: 4px 10px; border-radius: 6px; color: var(--muted); font-size: 13px; }
.niveau button[aria-selected="true"] { background: var(--surface); color: var(--fg); box-shadow: 0 1px 2px rgba(0,0,0,.14); }

/* Panneau à planifier */
.a-planifier { display: flex; flex-direction: column; gap: 8px; }
.carte-d { background: var(--surface); border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: 6px; padding: 9px 10px; display: flex; flex-direction: column; gap: 4px; cursor: grab; }
.carte-d:hover { border-color: var(--accent); }
.carte-d.glisse { opacity: .45; }
.carte-d .client { font-weight: 600; }
.carte-d .objet { color: var(--muted); font-size: 13px; }
.carte-d .src { color: var(--muted); font-size: 12px; }
.carte-d.retard { border-left-color: var(--bad); }

/* Vue jour : colonne horaire par personne */
.jour-grille { display: grid; grid-template-columns: 60px repeat(var(--cols, 1), minmax(180px, 1fr)); background: var(--surface); border: 1px solid var(--line); border-radius: 10px; overflow: auto; }
.jour-grille .heure { font-family: var(--mono); font-size: 11px; color: var(--muted); border-top: 1px solid var(--line); padding: 2px 6px; height: 48px; }
.jour-grille .tete { position: sticky; top: 0; background: var(--surface-2); padding: 8px 10px; font-weight: 600; border-bottom: 1px solid var(--line); border-left: 1px solid var(--line); z-index: 1; }
.jour-grille .tete .sous { color: var(--muted); font-size: 12px; font-weight: 400; }
.jour-grille .col { position: relative; border-left: 1px solid var(--line); background-image: repeating-linear-gradient(to bottom, transparent 0 47px, var(--line) 47px 48px); }
.jour-grille .evt { position: absolute; left: 4px; right: 4px; overflow: hidden; }
.jour-grille .evt .chip { height: 100%; margin: 0; }

/* Semaine des absences (cinq cases) */
.cinq { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
@media (max-width: 900px) { .cinq { grid-template-columns: 1fr 1fr; } }
.jour-case { background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; min-height: 86px; }
.jour-case b { display: block; margin-bottom: 6px; }
.jour-case div { font-size: 13px; }
.jour-case div span { color: var(--muted); }
.jour-case.ferie { background: color-mix(in srgb, var(--surface-2) 55%, var(--surface)); }

/* Téléphone : la semaine d'un technicien se lit en colonne */
@media (max-width: 700px) {
  .entete { padding: 8px 12px; }
  #contenu { padding: 10px 12px 20px; }
  .semaine table { min-width: 0; }
  .semaine.moi th, .semaine.moi td.nom { display: none; }
  .semaine.moi tr { display: flex; flex-direction: column; }
  .semaine.moi td.case { width: 100%; min-width: 0; height: auto; border-right: 0; }
  .semaine.moi td.case::before { content: attr(data-jour); display: block; font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; padding: 6px 4px 2px; }
  .champs { grid-template-columns: 1fr; }
  .cal-titre { font-size: 18px; }
}

/* Formations : matrice */
.matrice td, .matrice th { white-space: nowrap; }
.matrice td.c { text-align: center; font-family: var(--mono); font-size: 12px; }
.matrice td.c.ok { color: var(--good); }
.matrice td.c.bientot { color: var(--warn); background: var(--warn-soft); font-weight: 600; }
.matrice td.c.manque { color: var(--bad); background: var(--bad-soft); font-weight: 600; }
.matrice td.c.sans_objet { color: var(--line); }
.matrice td.c.prevu { color: var(--accent); }
.matrice th.f { writing-mode: vertical-rl; transform: rotate(180deg); text-align: left; padding: 10px 6px; height: 150px; white-space: normal; max-width: 34px; font-size: 11px; position: static; }
.legende { display: flex; gap: 18px; flex-wrap: wrap; font-size: 12px; color: var(--muted); }
.legende span b { font-family: var(--mono); font-weight: 500; }

/* Module intervention : compte rendu et photos */
.photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; }
.photo { position: relative; background: var(--surface-2); border-radius: 6px; overflow: hidden; aspect-ratio: 4 / 3; }
.photo img { width: 100%; height: 100%; object-fit: cover; display: block; cursor: zoom-in; }
.photo .leg { position: absolute; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,.55); color: #fff; font-size: 11px; padding: 3px 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.photo .mom { position: absolute; top: 4px; left: 4px; background: rgba(255,255,255,.9); color: #1f2140; font-size: 10px; padding: 1px 5px; border-radius: 4px; }
.photo .x { position: absolute; top: 4px; right: 4px; border: 0; background: rgba(255,255,255,.9); border-radius: 4px; font-size: 11px; padding: 1px 6px; }
.cr { border-left: 2px solid var(--line); padding: 4px 0 4px 10px; display: flex; flex-direction: column; gap: 3px; }
.cr .tete { font-weight: 600; }
.cr .texte { white-space: pre-wrap; }
.grande-photo { position: fixed; inset: 0; background: rgba(10,16,22,.85); z-index: 30; display: grid; place-items: center; cursor: zoom-out; }
.grande-photo img { max-width: 96vw; max-height: 92vh; }
.avert-liste { display: flex; flex-direction: column; gap: 4px; }