/* TRACE — maquette-ajustements.css : ce que le portage de la variante « Retenu C » ne peut pas reprendre tel quel.
   maquette.css est généré (règles de styles-autonome.html réellement utilisées par le menu et l'accueil) ; ce fichier-ci
   est écrit à la main : la coquille du prototype autour, les couleurs que la maquette mettait dans le HTML (personnes),
   les textes qu'elle écrivait dans le CSS (repris du dictionnaire), le téléphone, et quelques contrastes. */

/* ---------- Le menu dans la barre du prototype ---------- */
.barre.sd { background: var(--mqc-06, var(--nav-fond)); }
.barre.sd .sd-nav { min-height: 100%; flex: 1 0 auto; }
.sd-marque .lg circle { fill: var(--mq-logo); }
.sd-marque .lg:hover { text-decoration: none; }
.ch-nrech input { flex: 1 1 auto; min-width: 0; border: 0; background: none; color: inherit; font: inherit; font-size: 13px; padding: 0; outline-offset: 2px; }
.ch-nrech input::placeholder { color: inherit; opacity: 1; }
.sd-nav a.nav-admin { margin-top: 10px; }
.sd-moi small a { display: inline; padding: 0; color: inherit; text-decoration: underline; }
.sd-moi small a::before { content: none; }

/* L'accueil n'a pas de fil d'Ariane au-dessus de 900 px : la recherche est dans le menu */
.entete.entete-accueil { display: none; }
@container app (max-width: 900px) { .entete.entete-accueil { display: flex; } }

/* ---------- La page d'accueil occupe toute la largeur, comme dans la maquette ---------- */
.contenu:has(> .bd-main) { padding: 0; max-width: none; margin: 0; }
.bd-main { min-height: 100%; font-size: 15px; line-height: 1.5; }

/* ---------- Les personnes : la maquette portait leur couleur dans le HTML ---------- */
.sd-av.t0 { --h: var(--mqp-0); } .sd-av.t1 { --h: var(--mqp-1); } .sd-av.t2 { --h: var(--mqp-2); } .sd-av.t3 { --h: var(--mqp-3); }
.sd-av.t4 { --h: var(--mqp-4); } .sd-av.t5 { --h: var(--mqp-5); } .sd-av.t6 { --h: var(--mqp-6); } .sd-av.t7 { --h: var(--mqp-7); } .sd-av.t8 { --h: var(--mqp-8); }
.sd-av.moi { --h: var(--sol); color: var(--nuit); }

/* ---------- Les textes que la maquette écrivait dans le CSS ou le HTML viennent du dictionnaire ---------- */
.ch-jour[open] .plier::before { content: attr(data-replier); }
.ch-jour:not([open]) .plier::before { content: attr(data-deplier); }
.ch-lignes::after { content: attr(data-maintenant); }

/* ---------- La petite carte : l'île partagée de l'aperçu prend les couleurs de la maquette ---------- */
.ch-carte .terre .carte-terre { fill: inherit; stroke: inherit; stroke-width: 1px; vector-effect: non-scaling-stroke; }

/* ---------- Ce que la variante ne dessinait pas : l'état « à surveiller », le VIP, la vue Direction ---------- */
.sd-et.f4 { background: var(--mq-surveiller-fond); color: var(--mq-surveiller); }
.sd-li .si .vip { display: inline-block; margin-left: 4px; padding: 0 4px; border-radius: 4px; font: 700 10px var(--pl-police); color: var(--f2); box-shadow: inset 0 0 0 1px currentColor; vertical-align: 1px; }
.mq-detail { margin: -4px 0 8px; font-size: 13px; color: var(--e2); }
.mq-direction .sd-cols, .mq-direction .sd-li { grid-template-columns: minmax(0, 2fr) repeat(4, 112px); }
.mq-direction .sd-cols span:not(:first-child), .mq-direction .num { text-align: right; }
.mq-direction .num { font-weight: 650; font-variant-numeric: tabular-nums; }
.mq-direction .num.rouge { color: var(--r); }
.mq-direction .num.zero { color: var(--e3); font-weight: 400; }
.ch-p.ok .ch-c .ic { width: 20px; height: 20px; color: var(--mq-surveiller); }

/* ---------- Au téléphone (la variante n'a été dessinée qu'au bureau : mise en colonne, mêmes pièces) ---------- */
@container (max-width: 640px) {
  .bd-main { padding: 0 12px 24px; }
  .bd-main .sd-tete { margin: 0 -12px; padding: 12px 12px 14px; }
  .ch-l2 { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .chc-haut { grid-template-columns: minmax(0, 1fr); }
  .chc-ins { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  /* La frise devient une liste : une ligne par personne, ses visites à la suite, dans l'ordre des heures */
  .ch-axe, .ch-lignes::after { display: none; }
  .chc .ch-fl { grid-template-columns: 84px minmax(0, 1fr); height: auto; padding: 4px 0; }
  .ch-fl .piste { display: flex; flex-wrap: wrap; gap: 4px; height: auto; }
  .ch-fl .ch-v { position: static; }
  .chc .chb-carte { min-height: 220px; }
  .sd-barre-outils { flex-wrap: wrap; }
  .sd-cols { display: none; }
  .ch .sd-li, .bd-main .sd-li {
    grid-template-columns: 30px minmax(0, 1fr) auto;
    grid-template-areas: "pr pb pb" ". si si" ". et ech";
    row-gap: 3px; padding-top: 7px; padding-bottom: 7px; align-items: center;
  }
  .sd-li .ref, .sd-li .sd-qui { display: none; }
  .sd-li .pr { grid-area: pr; } .sd-li .pb { grid-area: pb; } .sd-li .si { grid-area: si; }
  .sd-li .sd-et { grid-area: et; justify-self: start; } .sd-li .sd-ech { grid-area: ech; }
  .sd .sd-li .mc { white-space: normal; }
  .mq-direction .sd-cols, .mq-direction .sd-li { grid-template-columns: minmax(0, 1fr) repeat(4, 34px); grid-template-areas: none; }
}

/* ---------- Ce que les feuilles du prototype imposaient (svg en bloc) ---------- */
:where(.sd) svg { display: inline; max-width: none; }

/* ---------- Une visite passée : grisée par la couleur (la transparence de la maquette tombe sous 4,5 de contraste) ---------- */
.ch-v.passe { opacity: 1; background: var(--fond); border-left-color: var(--f1); color: var(--e2); }
.ch-v.passe b { color: var(--e2); }
/* P4 : le gris de la maquette (3,6) passe à l'encre 3 (4,9) */
.sd .pr.p4 { color: var(--e3); }
/* Le compte à côté du titre de liste, sur le fond sable (4,3 → 7) */
.sd-barre-outils h2 span { color: var(--e2); }

/* ---------- Les animations d'arrivée de la maquette (lignes qui montent, chiffres qui comptent) sont coupées ----------
   L'écran s'ouvre vingt fois par jour ; et un état en cours d'animation fausse le contrôle de rendu. */
.sd, .sd * { animation: none !important; }

/* ---------- La petite carte : un nom décalé est relié à son point ---------- */
.ch-carte .lot .rappel { stroke: var(--e2); stroke-width: 1.2; fill: none; }

/* =====================================================================================================================
   E08 · File de travail : disposition de 3-maquettes/e08-file.html (maquette-e08.css), lignes de l'accueil validé.
   ===================================================================================================================== */
.contenu:has(> .mq-file) { padding: 0; max-width: none; margin: 0; }
.bd-main.mq-file { padding: 24px 32px 56px; }
.mq-file .page-tete h1 { font-size: 26px; }
/* Les lignes : la case des actions groupées en tête, puis les colonnes de l'accueil ; toute la ligne ouvre le ticket */
.mq-file .sd-li.mq-sel { position: relative; grid-template-columns: 22px 76px 30px minmax(0, 1fr) minmax(0, 1.3fr) 144px 96px 200px; }
.mq-file .mq-coche { position: relative; z-index: 1; width: 16px; height: 16px; margin: 0; opacity: 0; cursor: pointer; }
.mq-file .sd-li:hover .mq-coche, .mq-file .mq-coche:checked, .mq-file .mq-coche:focus-visible { opacity: 1; }
.mq-file .sd-li .pb { color: inherit; text-decoration: none; }
.mq-file .sd-li .pb::after { content: ""; position: absolute; inset: 0; }
.mq-file .sd-li .pb:focus-visible { outline: 2px solid var(--lien); outline-offset: 2px; }
.mq-file .groupe { margin-top: 18px; }
.mq-file .groupe-tete .sd-av.grand { width: 26px; height: 26px; font-size: 10px; }
.mq-file .suite-lien { display: block; padding: 8px 16px; font-size: 13px; font-weight: 650; color: var(--lien); background: var(--surface-2); text-decoration: none; }
.mq-file .suite-lien:hover { text-decoration: underline; }
.mq-file .liste { background: var(--surface); border-radius: var(--r-l); box-shadow: var(--ombre-carte); overflow: hidden; }
/* Le panneau « Type, canal… » : la puce ouvre les filtres, sous elle */
.mq-filtres { position: relative; }
.mq-filtres > summary { list-style: none; }
.mq-filtres > summary::-webkit-details-marker { display: none; }
.mq-filtres-champs { position: absolute; right: 0; top: calc(100% + 6px); z-index: 8; width: min(560px, 90vw); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 12px; align-items: end;
  padding: 14px; background: var(--surface); border: 1px solid var(--filet); border-radius: var(--r-l); box-shadow: var(--ombre-2); }
.mq-filtres-champs label { display: grid; gap: 4px; font-size: 12px; font-weight: 650; color: var(--encre-2); }
.mq-filtres-champs label.large { grid-column: 1 / -1; }
.mq-filtres-champs .champ { width: 100%; }
@container (max-width: 1060px) {
  .mq-file .sd-li.mq-sel { grid-template-columns: 22px 70px 30px minmax(0, 1.25fr) minmax(0, 1fr) 138px 30px 196px; }
}
@container app (max-width: 900px) { .bd-main.mq-file { padding: 20px 20px 48px; } }
@container (max-width: 640px) {
  .bd-main.mq-file { padding: 16px 12px 40px; }
  .mq-file .sd-li.mq-sel { grid-template-columns: 30px minmax(0, 1fr) auto; grid-template-areas: "pr pb pb" ". si si" ". et ech"; }
  .mq-file .mq-coche { display: none; }
  .mq-file .groupe-tete .droite { margin-left: 0; white-space: normal; }
  .mq-filtres-champs { grid-template-columns: minmax(0, 1fr); right: auto; left: 0; }
}
/* La barre de sélection : en pied de liste ; elle ne flotte en bas de l'écran que quand un ticket est coché */
.mq .barre-selection { position: static; }
.mq-file:has(.mq-coche:checked) .barre-selection { position: sticky; }
.mq .barre-selection .champ { width: auto; min-width: 0; flex: 0 1 auto; }
.mq .barre-selection select.champ { max-width: 220px; }
/* Sur le fond sable, le gris 3 de la maquette tombe à 4,3 de contraste : la file prend l'encre 2 de la variante */
.mq.mq-file { --encre-3: var(--e2); }

/* =====================================================================================================================
   E09 · Fiche d'un ticket : 3-maquettes/e09-ticket.html (maquette-ecrans.css).
   ===================================================================================================================== */
.contenu:has(> .mq-fiche) { padding: 0; max-width: none; margin: 0; }
.bd-main.mq-fiche { padding: 14px 32px 56px; }
@container app (max-width: 900px) { .bd-main.mq-fiche { padding: 12px 20px 48px; } }
@container app (max-width: 640px) { .bd-main.mq-fiche { padding: 12px 12px 40px; } }
.mq-fiche .fiche-demande { margin-top: 6px; max-width: 90ch; font-size: 14px; color: var(--encre-2); }
/* Demande de Loïc (28/09) : le premier bloc du corps remonte au niveau du panneau ; le corps se rapproche de la frise */
.mq-fiche .fiche-corps { margin-top: var(--e4, 16px); }
.mq-fiche .fiche-corps > div > .section-fiche:first-child { margin-top: 0; }
/* Décision du 28/09 : le titre de la frise, lu seulement par les lecteurs d'écran dans la maquette, devient visible */
.mq-fiche .mq-bande-titre { margin: var(--e5) 0 0; font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--encre-3); }
.mq-fiche .mq-bande-titre + .bande { margin-top: 6px; }
.mq-fiche .rouge-mq { color: var(--rouge); }
.mq-fiche .secondaire-mq { color: var(--encre-2); font-weight: 400; }
/* La légende de la vie du dossier : les couleurs de la maquette, tenues par des classes */
.mq .bande .legende .mq-leg { display: inline-block; width: 14px; height: 8px; border-radius: 2px; }
.mq .bande .legende .leg-nous { background: var(--bleu); }
.mq .bande .legende .leg-tiers { background: repeating-linear-gradient(135deg, var(--ardoise) 0 3px, var(--ardoise-fond) 3px 6px); }
.mq .bande .legende .leg-partiel { background: var(--ambre-vif); }
.mq .bande .legende .leg-visite { width: 3px; height: 12px; background: var(--encre); border-radius: 0; }
.mq .bande .legende .leg-msg { width: 8px; height: 8px; border-radius: 50%; background: var(--vert); }
.mq .bande .legende .leg-silence { width: 16px; height: 10px; border: 2px solid var(--rouge); background: none; }
/* Les encarts d'état : une ligne, le texte, puis l'action */
.mq-fiche .mq-encart-ligne { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.mq-fiche .mq-encart-texte { flex: 1 1 240px; min-width: 0; }
.mq-fiche .mq-encart-texte > b { font-size: 16px; }
.mq-fiche .mq-encart-texte p { margin-top: 4px; color: var(--encre-2); }
.mq-fiche .encart.rouge { background: var(--rouge-fond); }
.mq-fiche .encart.rouge > .ic { color: var(--rouge); }
.mq-fiche .encart.vert { background: var(--vert-fond); }
.mq-fiche .encart.vert > .ic { color: var(--vert); }
.mq-fiche .mq-proximite { display: grid; gap: 8px; font-size: 14px; }
.mq-fiche .mq-proximite > li { display: flex; gap: 8px; align-items: flex-start; }
.mq-fiche .mq-proximite .ic { margin-top: 3px; flex: 0 0 auto; }
.mq-fiche .mq-equipements { display: grid; gap: 8px; font-size: 14px; }
.mq-fiche .mq-equipements small { display: block; color: var(--encre-3); font-size: 12.5px; }
.mq-fiche .panneau .sd-qui .pn { display: inline; }
.mq-fiche .mq-gamme { margin-top: 8px; }
.mq-fiche .mq-gamme-tete { font-size: 13px; font-weight: 650; color: var(--encre-2); margin-bottom: 6px; }
.mq-fiche .msg-boutons { margin-top: 6px; display: flex; flex-wrap: wrap; gap: 6px; }
.mq-fiche .fil[data-filtre="message"] .evt:not([data-sorte="message"]),
.mq-fiche .fil[data-filtre="visite"] .evt:not([data-sorte="visite"]),
.mq-fiche .fil[data-filtre="enquete"] .evt:not([data-sorte="enquete"]),
.mq-fiche .fil:not([data-filtre="tout"]) .silence-fil { display: none; }
/* Ce que les feuilles du prototype imposaient aux mêmes noms de classes (.visite, .panneau, .fil, .calcul, .constat) */
.mq .evt.visite { border: 0; border-radius: 0; margin-bottom: 0; background: none; }
.mq .bande .marques i.visite { border: 0; border-radius: 0; margin: 0; padding: 0; }
.mq .panneau { border: 0; }
.mq .fil { display: block; }
.mq details.prio-calc .calcul { display: block; }
.mq .constat { padding: 0; }
.mq .panneau .site-court { margin: 0; padding: 0; }
/* Sur le fond sable, le gris 3 de la maquette tombe à 4,3 : la fiche prend l'encre 2 de la variante, comme la file */
.mq.mq-fiche { --encre-3: var(--e2); }
.mq .vip { color: var(--marque); }
.mq .constat .photo figcaption { color: var(--encre-2); }
/* Au téléphone, le calcul de la priorité s'ouvre sur toute la largeur de l'en-tête au lieu de déborder de l'écran */
.mq-fiche .fiche-tete { position: relative; }
@container app (max-width: 640px) {
  .mq details.prio-calc { position: static; }
  .mq details.prio-calc .calcul { left: 0; right: 0; width: auto; max-width: none; }
}
/* Au téléphone, la vie du dossier ne garde que ses deux bornes : l'ouverture et aujourd'hui */
@container app (max-width: 640px) {
  .mq .bande .dates span:not(:first-child):not(:last-child) { display: none; }
}

/* ---------- Fiche d'un site (E03), portée depuis 3-maquettes/e03-site.html (28/09/2026) ---------- */
.mq-site .surtitre .mq-position { display: inline-flex; gap: 6px; align-items: center; }
.mq-site .mq-situation { color: var(--encre); display: inline-flex; gap: 6px; align-items: center; }
.mq-site .mq-situation svg { color: var(--gris); }
.mq-site .mq-situation[data-situation="urgence"] svg { color: var(--rouge); }
.mq-site .mq-situation[data-situation="monitoring_muet"] svg { color: var(--muet); }
.mq-site .mq-situation[data-situation="ticket_ouvert"] svg { color: var(--bleu); }
.mq-site .mq-situation[data-situation="preventif_echu"] svg { color: var(--ambre-vif); }
.mq-site .mq-situation[data-situation="rien_a_signaler"] svg { color: var(--vert); }
.mq-site .signal.ambre { color: var(--ambre); }
.mq-site .mq-ambre { color: var(--ambre); }
.mq-site .mq-site-tickets { background: var(--surface); border-radius: var(--r-l); box-shadow: var(--ombre-carte); overflow: hidden; }
.mq-site .mq-site-suite { margin-top: 8px; font-size: 13px; }
.mq-site .mq-site-suite a, .mq-site .mq-lien { color: var(--lien); }
.mq-site .mq-site-vide { font-size: 14px; color: var(--encre-2); }
.mq-site .mq-vide-cadre { border: 1px dashed var(--filet-fort); border-radius: var(--r-l); }
.mq-site .panneau .mq-p { font-size: 14px; }
.mq-site .panneau .mq-p-sous { display: block; font-size: 12.5px; color: var(--encre-3); margin-top: 3px; }
.mq-site .panneau .mq-acces { display: flex; gap: 8px; align-items: flex-start; margin-bottom: 8px; }
.mq-site .panneau .mq-acces .ic { flex: 0 0 auto; color: var(--ambre); margin-top: 2px; }
.mq-site .panneau .mq-btn-panneau { margin-top: 8px; }
.mq-site .panneau .ref { font-family: var(--police-mono); font-size: 12.5px; word-break: break-all; }
.mq-site .evt.mq-a-venir .nature { color: var(--ambre); }
.mq-site .ac-carte { margin-bottom: var(--e8); }
.mq-site .ac-tete p a { color: var(--lien); }
/* Règles propres à la page e03-site.html (dans son <style>, pas dans trace.css), reprises à la main */
.mq-site .table-simple { width: 100%; border-collapse: collapse; font-size: 14px; }
.mq-site .table-simple th, .mq-site .table-simple td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--filet); }
.mq-site .table-simple th { font-size: 12px; color: var(--encre-3); font-weight: 650; }
.mq-site .grille-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.mq-site .mini { font-size: 12.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--encre-3); margin-bottom: 6px; }
.mq-site .liste-docs li { display: flex; gap: 8px; align-items: center; padding: 5px 0; font-size: 14px; }
.mq-site .manque-l li::before { content: "—"; color: var(--encre-3); margin-right: 4px; }
@container app (max-width: 640px) { .mq-site .grille-2 { grid-template-columns: 1fr; } }
/* Au téléphone, le tableau garde famille, modèle et garantie : le n° de série et la pose restent sur la fiche de l'équipement */
@container app (max-width: 640px) { .mq-site .table-simple th:nth-child(3), .mq-site .table-simple td:nth-child(3), .mq-site .table-simple th:nth-child(4), .mq-site .table-simple td:nth-child(4) { display: none; } .mq-site .table-simple th, .mq-site .table-simple td { padding: 8px 6px; overflow-wrap: anywhere; } }
/* La ligne de ticket dans la colonne de la fiche : la maquette E03 empile le problème et le site, sans référence ni personne */
.mq-site .mq-site-tickets .sd-li { grid-template-columns: 30px minmax(0, 1fr) 118px 150px; grid-template-areas: "pr pb et ech" "pr si et ech"; row-gap: 1px; padding-top: 6px; padding-bottom: 6px; }
.mq-site .mq-site-tickets .sd-li .ref, .mq-site .mq-site-tickets .sd-li .sd-qui { display: none; }
.mq-site .mq-site-tickets .sd-li .pr { grid-area: pr; } .mq-site .mq-site-tickets .sd-li .pb { grid-area: pb; } .mq-site .mq-site-tickets .sd-li .si { grid-area: si; }
.mq-site .mq-site-tickets .sd-li .sd-et { grid-area: et; } .mq-site .mq-site-tickets .sd-li .sd-ech { grid-area: ech; }
.mq-site .mq-site-tickets .sd-li .pb, .mq-site .mq-site-tickets .sd-li .si { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@container app (max-width: 640px) {
  .mq-site .mq-site-tickets .sd-li { grid-template-columns: 30px minmax(0, 1fr) auto; grid-template-areas: "pr pb pb" ". si si" ". et ech"; row-gap: 3px; }
  .mq-site .mq-site-tickets .sd-li .pb, .mq-site .mq-site-tickets .sd-li .si { white-space: normal; }
}
/* Demande de Loïc (28/09) : la jauge « Fiche à compléter » prend la couleur de son niveau — rouge sous un tiers, ambre jusqu'aux deux tiers, vert au-delà */
.mq-site .ac-anneau[data-niveau="bas"] { background: conic-gradient(var(--rouge) calc(var(--p) * 1%), color-mix(in srgb, var(--rouge) 16%, var(--surface)) 0); }
.mq-site .ac-anneau[data-niveau="bas"] b { color: var(--rouge); }
.mq-site .ac-anneau[data-niveau="haut"] { background: conic-gradient(var(--vert) calc(var(--p) * 1%), color-mix(in srgb, var(--vert) 16%, var(--surface)) 0); }
.mq-site .ac-anneau[data-niveau="haut"] b { color: var(--vert); }


/* ===== passe 2 ter / 4 — E02-E04 : début (règles propres à la maquette, reprises à la main) ===== */
/* E02 · Liste des sites et E04 · Liste des clients, portées depuis 3-maquettes/e02-sites.html (28/09/2026). La coquille est celle
   du prototype ; le contenu occupe la largeur comme la page de la maquette (.contenu : 24 px 32 px 56 px, 1 400 px au plus). */
.contenu:has(> .mq-liste-sites), .contenu:has(> .mq-clients) { padding: 0; max-width: none; margin: 0; }
.bd-main.mq-liste-sites, .bd-main.mq-clients { padding: 24px 32px 56px; }
.mq-liste-sites > *, .mq-clients > * { max-width: 1336px; }
@container app (max-width: 900px) { .bd-main.mq-liste-sites, .bd-main.mq-clients { padding: 20px 20px 48px; } }
@container app (max-width: 640px) { .bd-main.mq-liste-sites, .bd-main.mq-clients { padding: 16px 12px 40px; } }
.mq-liste-sites .page-tete h1, .mq-clients .page-tete h1 { font-size: 26px; }
/* Ce que la maquette écrivait en attributs style= : le compte du bouton, la largeur de la recherche, les colonnes des rangs,
   les cellules à 14 px et leur seconde ligne, le lieu avec sa précision, le nom du client en 500, le pied de liste */
.mq-liste-sites .mq-compte { margin-left: 4px; }
.mq-liste-sites .mq-recherche { min-width: 240px; }
.mq-liste-sites .rangs { --cols: minmax(0,1.6fr) minmax(0,1.3fr) minmax(0,1.2fr) 170px 110px minmax(0,1.2fr); }
:is(.mq-liste-sites, .mq-rangs-sites) .rang .mq-c14 { font-size: 14px; }
:is(.mq-liste-sites, .mq-rangs-sites) .rang .cellule small { display: block; color: var(--encre-3); font-size: 12.5px; }
:is(.mq-liste-sites, .mq-rangs-sites) .rang .s.mq-lieu { display: flex; gap: 6px; align-items: center; }
:is(.mq-liste-sites, .mq-rangs-sites) .mq-precision { display: inline-flex; flex: 0 0 auto; }
:is(.mq-liste-sites, .mq-rangs-sites) .mq-lieu-t { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
:is(.mq-liste-sites, .mq-rangs-sites) .rang .p.mq-p-moyen { font-weight: 500; }
.mq-liste-sites .mq-pied { display: flex; justify-content: space-between; align-items: center; gap: 8px 12px; flex-wrap: wrap; padding: 12px; font-size: 13.5px; color: var(--encre-3); }
/* La situation SAV : la pastille de la maquette, sa couleur portée par la situation (plein pour 1 à 4, pointillé « inconnue »,
   petit disque pâle « rien à signaler ») */
:is(.mq-liste-sites, .mq-rangs-sites) .mq-situation { color: var(--encre); }
:is(.mq-liste-sites, .mq-rangs-sites) .mq-situation.mq-calme { color: var(--encre-2); }
:is(.mq-liste-sites, .mq-rangs-sites) .mq-situation svg { flex: 0 0 auto; }
:is(.mq-liste-sites, .mq-rangs-sites) .mq-situation[data-situation="urgence"] svg { color: var(--rouge); }
:is(.mq-liste-sites, .mq-rangs-sites) .mq-situation[data-situation="monitoring_muet"] svg { color: var(--muet); }
:is(.mq-liste-sites, .mq-rangs-sites) .mq-situation[data-situation="ticket_ouvert"] svg { color: var(--bleu); }
:is(.mq-liste-sites, .mq-rangs-sites) .mq-situation[data-situation="preventif_echu"] svg { color: var(--ambre-vif); }
:is(.mq-liste-sites, .mq-rangs-sites) .mq-situation[data-situation="inconnu"] svg { color: var(--gris); }
:is(.mq-liste-sites, .mq-rangs-sites) .mq-situation[data-situation="rien_a_signaler"] svg { color: var(--vert); }
:is(.mq-liste-sites, .mq-rangs-sites) .mq-situation .mq-pale { opacity: .55; }
/* Les filtres posés derrière la puce */
.mq-liste-sites .mq-posees { margin-top: calc(-1 * var(--e2)); }
.mq-liste-sites .mq-filtres > summary { cursor: pointer; }
.mq-liste-sites .mq-filtres-champs { left: 0; right: auto; }
/* E04 : le monogramme prend sa teinte d'une classe (la maquette la mettait en style=), et « 0 » en encre 3 (trace.css) */
.mq-clients .cl-mono[data-teinte="1"] { --h: var(--p1-f); } .mq-clients .cl-mono[data-teinte="2"] { --h: var(--p2-f); }
.mq-clients .cl-mono[data-teinte="3"] { --h: var(--p4-f); } .mq-clients .cl-mono[data-teinte="4"] { --h: var(--p5-f); }
.mq-clients .cl-mono[data-teinte="5"] { --h: var(--p6-f); } .mq-clients .cl-mono[data-teinte="6"] { --h: var(--p7-f); }
.mq-clients .cl-mono[data-teinte="7"] { --h: var(--exa); } .mq-clients .cl-mono[data-teinte="8"] { --h: var(--mqc-32); }
.mq-clients .cl-tk b.zero { color: var(--encre-3); }
/* Le filtre VIP (gardé : états de l'écran) prend la droite de la ligne de légende, pour laisser l'en-tête à la maquette */
.mq-clients .cl-leg .seg.mq-vip { margin-left: auto; }
/* Sous .sd (menu « Retenu C »), --e2 et --e3 sont des couleurs : les écarts de la maquette qui les emploient sont redits en px */
.mq-liste-sites .actions, .mq-clients .actions { gap: 8px; }
.mq-liste-sites .barre-outils { gap: 8px 12px; }
:is(.mq-liste-sites, .mq-rangs-sites) .rang { padding: 7px 12px; }
:is(.mq-liste-sites, .mq-rangs-sites) .rangs-tete { padding: 6px 12px; }
.mq-liste-sites .mq-recherche { width: auto; flex: 0 1 auto; }
/* Sur le fond sable, le gris 3 de la maquette tombe à 4,3 de contraste : l'encre 2 de la variante, comme la file (S-48) */
.mq.mq-liste-sites, .mq.mq-clients { --encre-3: var(--e2); }
/* Au téléphone rien ne se coupe : le nom, le lieu et les puces passent à la ligne */
@container app (max-width: 640px) {
  .mq-liste-sites .barre-outils .espace { display: none; }
  :is(.mq-liste-sites, .mq-rangs-sites) .rang .p, :is(.mq-liste-sites, .mq-rangs-sites) .rang .s, :is(.mq-liste-sites, .mq-rangs-sites) .mq-lieu-t { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; }
  :is(.mq-liste-sites, .mq-rangs-sites) .rang .s.mq-lieu { align-items: flex-start; }
  :is(.mq-liste-sites, .mq-rangs-sites) .mq-precision { margin-top: 3px; }
  .mq-liste-sites .puce { white-space: normal; height: auto; min-height: 30px; padding-top: 4px; padding-bottom: 4px; max-width: 100%; }
}
/* ===== E02-E04 : fin ===== */


/* ===== passe 2 ter / 4 — E10 : début (règles propres à la maquette, reprises à la main) ===== */
/* E10 · Nouveau ticket : 3-maquettes/e10-nouveau-ticket.html. Les styles en ligne de la maquette deviennent des classes. */
.contenu:has(> .mq-nouveau) { padding: 0; max-width: none; margin: 0; }
.bd-main.mq-nouveau { padding: 24px 32px 56px; }
/* Sur le fond sable, le gris 3 de la maquette tombe à 4,3 de contraste : l'écran prend l'encre 2 de la variante (comme S-48) */
.mq.mq-nouveau { --encre-3: var(--e2); }
@container app (max-width: 900px) { .bd-main.mq-nouveau { padding: 20px 20px 48px; } }
@container app (max-width: 640px) { .bd-main.mq-nouveau { padding: 16px 12px 40px; } }
/* la grille du formulaire et du panneau (style en ligne de la maquette, et sa règle @media 900 px) */
.mq-nouveau .mq-e10-grille { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 28px; align-items: start; }
.mq-nouveau .mq-e10-grille.mq-e10-sans-site { grid-template-columns: minmax(0, 1fr); gap: 18px; }
@container app (max-width: 900px) { .mq-nouveau .mq-e10-grille { grid-template-columns: minmax(0, 1fr); } }
.mq-nouveau .form input[type="text"], .mq-nouveau .form input[type="search"] { color: var(--encre); }
/* l'encart de l'origine */
.mq-nouveau .mq-e10-encart { margin-bottom: 6px; }
.mq-nouveau .mq-e10-sans-site, .mq-nouveau .mq-e10-site ~ .mq-e10-grille { margin-top: 18px; }
.mq-nouveau .mq-e10-encart + .mq-e10-site { margin-top: 18px; }
.mq-nouveau .encart .mq-e10-citation { margin-top: 4px; }
.mq-nouveau .encart .mq-e10-encart-actions { margin-top: 6px; font-size: 13.5px; }
.mq-nouveau .mq-e10-lien { color: var(--lien); font-size: inherit; }
.mq-nouveau .mq-e10-fil { margin-top: 10px; border-top: 1px solid var(--filet); padding-top: 10px; }
.mq-nouveau .mq-e10-fil .aide { font-size: 12.5px; color: var(--encre-3); margin-bottom: 8px; }
/* le site introuvable : la liste bordée (style en ligne de la maquette), les candidats, les trois sorties */
.mq-nouveau .mq-e10-liste { border: 1px solid var(--filet); border-radius: var(--r-l); }
.mq-nouveau .mq-e10-resultat { padding: 12px 16px 6px; font-size: 13.5px; color: var(--encre-2); }
.mq-nouveau .mq-e10-candidats li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 16px; border-top: 1px solid var(--filet); }
.mq-nouveau .mq-e10-candidat { display: grid; gap: 2px; min-width: 0; }
.mq-nouveau .mq-e10-candidat small { color: var(--encre-3); font-size: 12.5px; }
.mq-nouveau .mq-e10-candidats + .vide-etat { border-top: 1px solid var(--filet); }
.mq-nouveau .vide-etat { border-bottom: 0; }
.mq-nouveau .mq-e10-sorties { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-top: 12px; }
.mq-nouveau .mq-e10-sorties .btn { margin-top: 0; }
/* créer le site : le formulaire s'ouvre avec lui (le bouton « Créer le site » n'ouvre que la fiche minimale) */
.mq-nouveau .mq-e10-creer { max-width: 760px; }
.mq-nouveau .mq-e10-creer .aide { font-size: 12.5px; color: var(--encre-3); margin-top: 4px; }
.mq-nouveau .mq-e10-champs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; margin-top: 12px; }
.mq-nouveau .mq-e10-champs .ligne-champ { display: grid; gap: 6px; }
.mq-nouveau .mq-e10-champs .l { font-size: 13.5px; font-weight: 600; color: var(--encre-2); }
.mq-nouveau .mq-e10-champs input, .mq-nouveau .mq-e10-champs select { width: 100%; min-height: 40px; border: 1px solid var(--filet-fort); border-radius: var(--r-m); background: var(--surface); padding: 8px 12px; font-size: 15px; }
@container app (max-width: 640px) { .mq-nouveau .mq-e10-champs { grid-template-columns: minmax(0, 1fr); } }
.mq-nouveau .mq-e10-sans-site:has(> #e10-creer:not([hidden])) > .mq-e10-probleme[hidden] { display: grid !important; }
/* les choix : l'état coché suit le choix sans script (la maquette le posait par la classe « on ») */
.mq-nouveau .choix label:has(input:checked) { border-color: var(--marque-2); background: var(--marque-pale); font-weight: 600; }
.mq-nouveau .choix label:has(input:focus-visible) { outline: 2px solid var(--lien); outline-offset: 2px; }
/* les replis : ce que le formulaire et le panneau gardent sans place dans la maquette */
.mq-nouveau .mq-e10-plus > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 600; color: var(--lien); }
.mq-nouveau .mq-e10-plus > summary::-webkit-details-marker { display: none; }
.mq-nouveau .mq-e10-plus[open] > summary .ic { transform: rotate(180deg); }
.mq-nouveau .form .mq-e10-plus[open] { display: grid; gap: 10px; }
.mq-nouveau .form .mq-e10-plus .aide { font-size: 12.5px; color: var(--encre-3); }
.mq-nouveau .pre-rempli .mq-e10-plus { margin-top: 12px; border-top: 1px solid var(--filet); padding-top: 10px; }
.mq-nouveau .pre-rempli .mq-e10-plus .cv { margin-top: 10px; }
.mq-nouveau .mq-e10-clos li { font-size: 13px; margin-top: 3px; }
.mq-nouveau .mq-e10-clos .num { color: var(--encre-3); }
/* la ligne de la priorité calculée (style en ligne de la maquette) : une variante par effet, la feuille montre celle du choix */
.mq-nouveau .mq-e10-prio { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; border-top: 1px solid var(--filet); padding-top: 16px; }
.mq-nouveau .mq-e10-calc { display: none; align-items: center; gap: 14px; flex-wrap: wrap; }
.mq-nouveau .mq-e10-calc[data-defaut] { display: flex; }
.mq-nouveau form:has(input[name="impact"]:checked) .mq-e10-calc[data-defaut] { display: none; }
.mq-nouveau form:has(input[name="impact"][value="service_interrompu"]:checked) .mq-e10-calc[data-impact="service_interrompu"],
.mq-nouveau form:has(input[name="impact"][value="service_degrade"]:checked) .mq-e10-calc[data-impact="service_degrade"],
.mq-nouveau form:has(input[name="impact"][value="sans_effet_immediat"]:checked) .mq-e10-calc[data-impact="sans_effet_immediat"],
.mq-nouveau form:has(input[name="impact"][value="programme"]:checked) .mq-e10-calc[data-impact="programme"] { display: flex; }
.mq-nouveau form:has(input[name="danger"][value="1"]:checked) .mq-e10-calc[data-impact],
.mq-nouveau form:has(input[name="danger"][value="1"]:checked) .mq-e10-calc[data-defaut] { display: none; }
.mq-nouveau form:has(input[name="danger"][value="1"]:checked) .mq-e10-calc[data-danger] { display: flex; }
.mq-nouveau .mq-e10-boutons { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }
/* le panneau « pré-rempli » : le lien « changer » et la liste (styles en ligne de la maquette) */
.mq-nouveau .pre-rempli h3 a:first-child { color: inherit; }
.mq-nouveau .pre-rempli .mq-e10-changer { font-size: 13px; font-weight: 400; color: var(--lien); }
.mq-nouveau .mq-e10-cv { margin-top: 10px; }
.mq-nouveau .mq-e10-cv .ref { color: inherit; }
.mq-nouveau .mq-e10-cv small a { color: inherit; }

/* ===== E10 : fin ===== */


/* ===== passe 2 ter / 4 — E11 : début (règles propres à la maquette, reprises à la main) ===== */
.bd-main.mq-planning { padding: 24px 32px 56px; }
/* .sd (Retenu C, maquette.css) redéfinit --e2 et --e3 en couleurs : on rend au planning les espacements de la maquette */
.mq.mq-planning { --e2: 8px; --e3: 12px; }
@container app (max-width: 900px) { .bd-main.mq-planning { padding: 20px 20px 48px; } }
@container app (max-width: 640px) { .bd-main.mq-planning { padding: 16px 12px 40px; } }
/* le préventif échu, par zone : les colonnes de la maquette (style="--cols:…" dans la page) */
.mq-planning .mq-rangs-a-placer { --cols: minmax(0,1.5fr) minmax(0,2fr) 170px; }
.mq-planning .conflit > span { min-width: 0; }
.mq-planning .mq-case-jour { display: none; }
/* gris secondaires plus foncés sur le sable (contraste 4,3 et 4,2 dans la maquette ; comme S-48) */
.mq-planning .page-tete .sous, .mq-planning .planning .jour small { color: var(--encre-2); }
/* au téléphone, le nom de la zone et sa ligne passent à la ligne au lieu d'être coupés */
@container app (max-width: 640px) { .mq-planning .rang .p, .mq-planning .rang .s { white-space: normal; } }
/* Sous 900 px, la grille se lit par personne, jour par jour : la maquette la faisait défiler dans son cadre,
   le contrôle de rendu refuse une coupe au téléphone. Mêmes cases, même ordre ; les cases vides se retirent. */
@container app (max-width: 900px) {
  .mq-planning .planning-defile { overflow: visible; }
  .mq-planning .planning { display: block; }
  .mq-planning .planning > .jour { display: none; }
  .mq-planning .planning > div { border-right: 0; }
  .mq-planning .planning .qui { flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; background: var(--surface-2); }
  .mq-planning .planning .case { position: relative; padding-left: 102px; }
  .mq-planning .planning .case > .mq-case-jour { display: block; position: absolute; left: 8px; top: 8px; width: 86px; font-size: 12.5px; font-weight: 650; color: var(--encre-2); }
  .mq-planning .planning .case.mq-case-vide { display: none; }
  .mq-planning .planning .libre { padding: 4px 6px; }
  .mq-planning .planning > div:last-child { border-bottom: 0; border-radius: 0 0 var(--r-l) var(--r-l); }
}

/* ===== E11 : fin ===== */


/* ===== passe 2 ter / 4 — E36-E38-E39 : début (règles propres à la maquette, reprises à la main) ===== */
/* E36 · Recherche, E38 · À compléter, E39 · Intervenants extérieurs, portés depuis 3-maquettes/e36-e38-e39.html (28/09/2026) */
.bd-main.mq-recherche, .bd-main.mq-a-completer, .bd-main.mq-intervenants { padding: 24px 32px 56px; }
@container app (max-width: 900px) { .bd-main.mq-recherche, .bd-main.mq-a-completer, .bd-main.mq-intervenants { padding: 20px 20px 48px; } }
@container app (max-width: 640px) { .bd-main.mq-recherche, .bd-main.mq-a-completer, .bd-main.mq-intervenants { padding: 16px 12px 40px; } }
/* Sur le fond sable, le gris 3 de la maquette tombe à 4,3 : l'encre 2 de la variante, comme la file et les fiches.
   La variante « Retenu C » (.sd) nomme --e2 et --e3 deux encres, la maquette des écrans (.mq) deux espacements : ces pages
   gardent les espacements (la ligne, les gouttières), et la liste des tickets retrouve les encres de la ligne validée. */
.mq.mq-recherche, .mq.mq-a-completer, .mq.mq-intervenants { --encre-3: var(--mqc-15); --e2: 8px; --e3: 12px; }
.mq-recherche .sd-tab { --e2: var(--mqc-15); --e3: var(--mqc-16); }
/* Ce que la maquette écrivait dans des attributs style : colonnes des lignes, graisses, tailles, cadre des états vides */
.mq-recherche .mq-champ-recherche { width: auto; min-width: 320px; }
.mq-recherche .mq-rangs-sites { --cols: minmax(0,1.6fr) minmax(0,1.3fr) minmax(0,1.2fr) 170px 110px minmax(0,1.2fr); }
.mq-recherche .mq-rangs-deux { --cols: minmax(0,1fr) minmax(0,2fr); }
.mq-a-completer .mq-rangs-manque { --cols: minmax(0,1fr) 190px; }
.mq .rang .p.mq-p-client { font-weight: 500; }
.mq .rang .mq-c14 { font-size: 14px; }
.mq .rang .mq-sous { display: block; color: var(--encre-3); font-size: 12.5px; }
.mq .rang .s.mq-lieu { display: flex; gap: 6px; align-items: center; }
.mq .rang .s.mq-lieu svg { flex: 0 0 auto; }
.mq .mq-vide-cadre { border: 1px dashed var(--filet-fort); border-radius: var(--r-l); }
.mq .mq-vide-actions { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-top: 12px; }
.mq .mq-vide-actions .btn { margin-top: 0; }
.mq .vide-etat p.mq-vide-conversation { margin-top: 14px; font-size: 13.5px; }
.mq .mq-vide-conversation a { color: var(--lien); }
/* La situation du site : la pastille de la maquette (pleine, creuse en pointillé pour « inconnue », pâle pour « rien ») */
.mq-recherche .mq-situation { color: var(--encre); }
.mq-recherche .mq-situation svg { color: var(--gris); }
.mq-recherche .mq-situation .mq-pastille { fill: currentColor; }
.mq-recherche .mq-situation[data-situation="urgence"] svg { color: var(--rouge); }
.mq-recherche .mq-situation[data-situation="monitoring_muet"] svg { color: var(--muet); }
.mq-recherche .mq-situation[data-situation="ticket_ouvert"] svg { color: var(--bleu); }
.mq-recherche .mq-situation[data-situation="preventif_echu"] svg { color: var(--ambre-vif); }
.mq-recherche .mq-situation[data-situation="inconnu"], .mq-recherche .mq-situation[data-situation="rien_a_signaler"] { color: var(--encre-2); }
.mq-recherche .mq-situation[data-situation="inconnu"] .mq-pastille { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-dasharray: 2 1.6; r: 4.6px; }
.mq-recherche .mq-situation[data-situation="rien_a_signaler"] svg { color: var(--vert); }
.mq-recherche .mq-situation[data-situation="rien_a_signaler"] .mq-pastille { r: 3px; opacity: .55; }
/* Le « bloc » du prototype est une carte ; celui de la maquette n'est qu'un titre au-dessus de sa liste */
.mq-recherche .bloc, .mq-a-completer .bloc, .mq-intervenants .bloc { background: none; border: 0; box-shadow: none; border-radius: 0; }
/* Les tickets : la ligne validée de la file de travail, dans le cadre des listes de la maquette ; comme dans la maquette,
   le prénom suit l'avatar, et la colonne de l'état tient « Résolution partielle » */
.mq-recherche .sd-li { grid-template-columns: 76px 30px minmax(0, 1fr) minmax(0, 1.3fr) 164px 104px 200px; }
.mq-recherche .sd-li .pn { display: inline; }
@container app (max-width: 1100px) {
  .mq-recherche .sd-li { grid-template-columns: 70px 30px minmax(0, 1.25fr) minmax(0, 1fr) 156px 30px 180px; }
  .mq-recherche .sd-li .pn { display: none; }
}
.mq-recherche .mq-liste { background: var(--surface); border-radius: var(--r-l); box-shadow: var(--ombre-carte); overflow: hidden; }
.mq-recherche .mq-suite { display: block; padding: 8px 16px; font-size: 13px; font-weight: 650; color: var(--lien); background: var(--surface-2); }
/* Un seul résultat : l'application ouvre la fiche ; l'aperçu le dit au-dessus du résultat */
.mq-recherche .mq-unique { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: var(--e2); font-size: 14px; color: var(--encre-2); }
/* E39 : les teintes des monogrammes, que la maquette portait dans le HTML (celles des personnes, jamais porteuses de sens) */
.mq .cl-mono.mq-teinte-0 { --h: var(--mqp-1); } .mq .cl-mono.mq-teinte-1 { --h: var(--mqp-4); } .mq .cl-mono.mq-teinte-2 { --h: var(--mqp-2); }
.mq .cl-mono.mq-teinte-3 { --h: var(--mqp-5); } .mq .cl-mono.mq-teinte-4 { --h: var(--mqp-6); }
.mq-intervenants .it-carte h2 a { color: inherit; }
.mq-intervenants .it-carte li.it-plus { display: block; font-size: 13px; }
.mq-intervenants .it-carte li.it-plus a { color: var(--lien); font-weight: 600; }
.mq-intervenants .it-carte footer form { margin: 0; }
.mq-intervenants .it-calmes a { color: inherit; }
.mq-intervenants .mq-filtre-tiers { margin-bottom: var(--e4); font-size: 14px; color: var(--encre-2); }
.mq-intervenants .mq-filtre-tiers a { color: var(--lien); }
@container app (max-width: 640px) {
  .mq-recherche .mq-champ-recherche { min-width: 0; flex: 1 1 100%; }
  .mq-intervenants .page-tete .actions { width: 100%; }
  /* Au téléphone, rien ne se coupe : le nom d'un site et sa ligne passent à la ligne au lieu de s'abréger */
  .mq-recherche .rang .p, .mq-recherche .rang .s, .mq-a-completer .rang .p { white-space: normal; overflow: visible; overflow-wrap: anywhere; }
  .mq-recherche .rang .s.mq-lieu { align-items: flex-start; }
  .mq-recherche .rang .s.mq-lieu svg { margin-top: 4px; }
  /* La ligne de ticket reprend la disposition téléphone de la ligne validée (les colonnes du bureau ci-dessus l'écrasaient) */
  .mq-recherche .sd-li { grid-template-columns: 30px minmax(0, 1fr) auto; }
}
/* ===== E36-E38-E39 : fin ===== */


/* ===== passe 2 ter / 4 — E00-E34-E35 : début (règles propres à la maquette, reprises à la main) ===== */
/* E00 · Connexion (3-maquettes/e00-connexion.html) : la page publique entière, la marque à gauche, le formulaire à droite */
.app-public .contenu:has(> .mq-connexion) { display: block; padding: 0; max-width: none; margin: 0; }
.bd-main.mq-connexion, .bd-main.mq-connexion.sd { padding: 0; }          /* la marge de l'accueil (.bd-main) ne vaut pas ici */
/* L'île déborde de la marque, qui la coupe : un cadre à elle, pour que la marque ne se lise pas comme un texte coupé */
.mq-connexion .mq-ile-cadre { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.mq-connexion .cx-logo .logo circle { fill: var(--mq-logo); }       /* la maquette portait la couleur dans le HTML */
.mq-connexion .form.mq-champ { gap: 6px; max-width: none; }          /* idem : style="gap:6px" */
.mq-connexion .cx-form input::placeholder { color: var(--encre-3); opacity: 1; }
/* Écart voulu (relecture n° 12) : au bureau, l'île occupe l'espace entre le logo et l'accroche, à droite, sans chevaucher aucun
   texte (en position absolue sur 88 % de la marque, son tracé coupait l'accroche). Au téléphone, le bandeau de la maquette. */
@container app (min-width: 901px) {
  .mq-connexion .mq-ile-cadre { position: relative; inset: auto; order: 1; flex: 1 1 0; min-height: 0; margin: 20px -48px 28px; }
  .mq-connexion .cx-ile { top: 0; height: 100%; right: 3%; }
  .mq-connexion .cx-texte { order: 2; margin-top: 0; }
  .mq-connexion .cx-pied { order: 3; }
}
/* E34, E35 (3-maquettes/administration.html) : le « main.contenu » de la maquette dans la coquille du prototype */
/* .sd (variante « Retenu C ») fait de --e2 et --e3 des couleurs ; ici, ce sont les espacements de trace.css */
.bd-main.mq-admin { --e2: 8px; --e3: 12px; padding: var(--e6) var(--e8) var(--e14); max-width: 1400px; }
@container app (max-width: 900px) { .bd-main.mq-admin { padding: var(--e5) var(--e5) var(--e14); } }
@container app (max-width: 640px) { .bd-main.mq-admin { padding: 16px 16px 96px; } }
/* Écarts voulus (contraste 4,5) : gris secondaires plus foncés sur le sable (4,30 sinon, comme S-48), teinte 3 plus foncée (4,45) */
.bd-main.mq-admin { --encre-3: var(--mqc-15); }
.mq-e34 .av.t3 { background: var(--mqp-0); }
.mq-e34 .rangs { --cols: minmax(0,1.6fr) 140px 120px 200px minmax(0,1fr); }   /* MC-D10 : la colonne « Valide les annonces » */  /* style="--cols:…" de la maquette */
.mq-e35 .rangs { --cols: minmax(0,1.2fr) 150px minmax(0,1.6fr); }
.mq-e34 .mq-personne { display: flex; gap: 10px; align-items: center; }
.mq-e34 .mq-tel { color: inherit; }
/* « Créer un compte » : un formulaire replié sous l'en-tête (pas de page de création), deux champs par ligne, un au téléphone */
.mq-e34 .mq-e34-creer { gap: 12px; margin-bottom: 16px; }
.mq-e34 .mq-e34-champs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; }
@container app (max-width: 640px) { .mq-e34 .mq-e34-champs { grid-template-columns: minmax(0, 1fr); } }
/* Écart voulu : dans la maquette, l'icône de l'étiquette passe au-dessus du mot (svg en bloc) ; ici elle reste sur la ligne */
.mq-e35 .etiq .ic { display: inline-block; vertical-align: -3px; }
/* Écarts voulus : le détail d'une source passe à la ligne plutôt que d'être coupé (à 900 px, il l'était) ; au téléphone, il
   passe sous le nom, sur toute la largeur, et le nom passe à la ligne à côté de son étiquette */
.mq-e35 .rang .cellule.s { white-space: normal; }
@container app (max-width: 640px) { .mq-e35 .rang .cellule.s { grid-column: 1 / -1; } .mq-e35 .rang .p { white-space: normal; } }
.mq-e35 .mq-consequence { margin-top: 14px; font-size: 14px; color: var(--encre-2); }

/* ===== E00-E34-E35 : fin ===== */


/* ===== passe 2 ter / 4 — E12 : début (règles propres à la maquette, reprises à la main) ===== */
/* E12 · Conversations, portée depuis 3-maquettes/e12-conversations.html (28/09/2026). Le « main.contenu » de la maquette dans la
   coquille du prototype : 24 px 32 px 56 px ; les attributs style= de la maquette deviennent des classes. */
.contenu:has(> .mq-conversations) { padding: 0; max-width: none; margin: 0; }
.bd-main.mq-conversations { padding: 24px 32px 56px; }
@container app (max-width: 900px) { .bd-main.mq-conversations { padding: 20px 20px 48px; } }
@container app (max-width: 640px) { .bd-main.mq-conversations { padding: 16px 16px 40px; } }
/* .sd (« Retenu C ») fait de --e2 et --e3 des encres ; ici ce sont les espacements de trace.css (S-109). Sur le fond sable, le
   gris 3 de la maquette passe à l'encre 2 de la variante (contraste 4,5, comme S-48). */
.mq.mq-conversations { --e2: 8px; --e3: 12px; --encre-3: var(--mqc-15); }
/* La liste des fils : l'avatar sur fond gris 3, le nombre de non-lus sous l'heure, les conversations plus anciennes */
.mq-conversations .fils .mq-e12-av { background: var(--surface-3); }
.mq-conversations .fils .mq-e12-nl { grid-column: 3; grid-row: 2; }
.mq-conversations .fils .rat .etiq .ic { vertical-align: -3px; }
.mq-conversations .fils .mq-e12-plus { padding: 10px 14px; font-size: 13px; color: var(--encre-3); }
.mq-conversations .boite .fils .mq-e12-plus a { display: inline; padding: 0; border: 0; font-size: inherit; color: var(--lien); }
/* L'en-tête du fil ouvert */
.mq-conversations .mq-e12-qui { font-size: 16px; }
.mq-conversations .mq-e12-tel { color: var(--encre-3); font-size: 13.5px; white-space: nowrap; }
.mq-conversations .mq-e12-sous { font-size: 13.5px; color: var(--encre-3); }
.mq-conversations .mq-e12-sous a { color: inherit; }
.mq-conversations .conv-tete .etiq .ic { vertical-align: -3px; }
.mq-conversations .mq-e12-fenetre { margin-left: auto; }
/* Le fil : la photo que la maquette dessinait (le jeu n'a pas l'image), les boutons et la liste d'un message */
.mq-conversations .mq-e12-photo { display: block; width: 220px; max-width: 100%; height: auto; border-radius: 8px; margin-top: 8px; }
.mq-conversations .mq-e12-photo .f1 { fill: var(--mqe-06); }
.mq-conversations .mq-e12-photo .f2 { fill: var(--mqc-32); }
.mq-conversations .mq-e12-photo .f3 { fill: var(--mqc-23); }
.mq-conversations .mq-e12-photo .f4 { fill: var(--mqe-19); }
.mq-conversations .mq-e12-boutons { margin-top: 6px; display: flex; flex-wrap: wrap; gap: 6px; }
/* Rattacher (les gestes d'E13) */
.mq-conversations .mq-e12-p { font-size: 14px; color: var(--encre-2); }
.mq-conversations .mq-e12-ligne { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.mq-conversations .mq-e12-chercher { flex: 1; min-width: 200px; }
.mq-conversations .mq-e12-gestes { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.mq-conversations .mq-e12-autres { font-size: 13px; color: var(--encre-3); margin-top: 10px; }
.mq-conversations .mq-e12-retenir { display: flex; gap: 8px; align-items: center; font-size: 13.5px; margin-top: 10px; }
.mq-conversations .candidat .vip { margin-left: 2px; }
/* Écrire : les réponses types à un geste, le message ; fenêtre fermée, la phrase qui le dit à la place du champ */
.mq-conversations .mq-e12-reponses { display: flex; gap: 6px; flex-wrap: wrap; }
.mq-conversations .mq-e12-reponses .lab { font-size: 12.5px; color: var(--encre-3); align-self: center; }
.mq-conversations .mq-e12-reponses .puce { cursor: pointer; }
.mq-conversations .mq-e12-ecrire { display: flex; gap: 8px; }
.mq-conversations .mq-e12-ecrire textarea { flex: 1; height: 64px; padding-top: 8px; }
.mq-conversations .mq-e12-ecrire .btn { align-self: flex-end; }
.mq-conversations .mq-e12-ferme { font-size: 13px; color: var(--encre-3); }
/* Au bureau, la boîte tient dans la fenêtre, comme dans la maquette : deux panneaux à hauteur fixe ; la liste des fils et le
   fil ouvert défilent chacun dans son panneau, la zone de réponse reste en bas, visible (relecture passe 4, constat 6). Le fil
   s'ouvre sur son dernier message (scroll-initial-target ; sans lui, sur le premier). La hauteur retranche l'en-tête de la
   page et les marges ; la maquette garde son plancher de 640 px. Sous 900 px, comme la maquette : la liste se masque et le
   fil ouvert suit la page. */
@container app (min-width: 901px) {
  .mq-conversations .boite { height: calc(100vh - 136px); grid-template-rows: minmax(0, 1fr); }
  .mq-conversations .boite .fils { overflow-y: auto; min-height: 0; }
  .mq-conversations .boite .conv { min-height: 0; }
  .mq-conversations .boite .conv-corps { display: flex; flex-direction: column; min-height: 0; padding: 0; }
  .mq-conversations .boite .conv-corps .fil { flex: 1 1 0; min-height: 0; overflow-y: auto; padding: 10px 18px; }
  .mq-conversations .boite .fil > .evt:last-child { scroll-initial-target: nearest; }
}
/* Q4 (revue 3 du 28/09) : sous 900 px, là où la maquette masque la liste, sans conversation choisie on voit la liste seule ;
   une conversation choisie, le fil seul avec « ← Conversations » en tête. Au bureau, rien ne change (le retour est caché). */
.mq-conversations .mq-e12-retour { display: none; }
@container app (max-width: 900px) {
  .mq-conversations .boite:not(.mq-e12-choisie) .fils { display: block; border-right: 0; }
  .mq-conversations .boite:not(.mq-e12-choisie) .conv { display: none; }
  .mq-conversations .boite:not(.mq-e12-choisie) { min-height: 0; }
  /* la liste occupe la largeur : qui et le dernier message passent à la ligne au lieu de se couper (rien ne se coupe au téléphone) */
  .mq-conversations .boite .fils .qui, .mq-conversations .boite .fils .extrait { white-space: normal; overflow-wrap: anywhere; }
  .mq-conversations .mq-e12-retour { display: block; padding: 10px 18px; border-bottom: 1px solid var(--filet); font-size: 14px; font-weight: 650; color: var(--lien); }
}

/* ===== E12 : fin ===== */


/* ===== passe 2 ter / 4 — E14 : début (règles propres à la maquette, reprises à la main) ===== */
.bd-main.mq-apercu { padding: 24px 32px 56px; }
/* .sd (Retenu C, maquette.css) redéfinit --e2 et --e3 en couleurs : on rend à l'aperçu les espacements de la maquette (S-109) */
.mq.mq-apercu { --e2: 8px; --e3: 12px; }
@container app (max-width: 900px) { .bd-main.mq-apercu { padding: 20px 20px 56px; } }
@container app (max-width: 640px) { .bd-main.mq-apercu { padding: 16px 16px 40px; } }
/* Le cadre de téléphone : règles .tel de trace.css que porter_e08.py a retirées (maquette-ecrans.css garde .tel, .bulle,
   .boutons-wa, .limite, .tel-legende) */
.mq-apercu .tel .ecran { height: 844px; max-height: 80vh; display: flex; flex-direction: column; background: var(--surface-2); border-radius: 26px; overflow: hidden; }
.mq-apercu .tel .barre-tel { background: var(--marque); color: var(--mqe-01); padding: 14px 16px 12px; display: flex; align-items: center; gap: 10px; }
.mq-apercu .tel .barre-tel .rond { width: 34px; height: 34px; border-radius: 50%; background: var(--soleil); display: grid; place-items: center; flex: none; }
.mq-apercu .tel .barre-tel .rond svg { width: 18px; height: 18px; stroke: var(--marque); fill: none; stroke-width: 2; stroke-linecap: round; }
.mq-apercu .tel .barre-tel b { display: block; font-size: 15px; }
.mq-apercu .tel .barre-tel small { display: block; font-size: 12px; opacity: .75; color: inherit; }
.mq-apercu .tel .flux { flex: 1; overflow-y: auto; padding: 12px 12px 16px; display: flex; flex-direction: column; gap: 8px; }
.mq-apercu .tel .flux > * { flex-shrink: 0; }
/* La bulle du prototype (composants.css) est une colonne flexible ombrée : la bulle de la maquette est un bloc de texte */
.mq-apercu .bulle { display: block; box-shadow: none; }
.mq-apercu .bulle strong { font-weight: 700; }
/* gris secondaire plus foncé sur le sable (comme S-48) */
.mq-apercu .page-tete .sous, .mq-apercu .tel-legende { color: var(--encre-2); }
/* l'heure d'une bulle du client, sur le bleu pâle : 4,19 de contraste dans la maquette */
.mq-apercu .bulle.moi .h { color: var(--encre-2); }
/* ===== E14 : fin ===== */


/* ===== ONGLETS-TEL : début — la barre d'onglets du bas au téléphone (proposition du 28/09), reprise à la main des
   règles .onglets-tel de 3-maquettes/trace.css (retirées par porter_e08.py). Au lieu de position: fixed par rapport à
   la fenêtre, la barre est collante au bas de .app-corps, dans le flux, après le pied : elle reste dans le cadre de
   l'aperçu et le bas du contenu ne passe jamais dessous en fin de page. ===== */
.onglets-tel { display: none; --ot-encre: var(--mqc-16); --ot-actif: var(--mqc-31); }
:root[data-theme="dark"] .onglets-tel { --ot-encre: var(--texte-faible); --ot-actif: var(--accent); }
@container app (max-width: 640px) {
  .onglets-tel { display: grid; grid-template-columns: repeat(5, 1fr); position: sticky; bottom: 0; z-index: 9; background: var(--surface); border-top: 1px solid var(--bordure); padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0px)); font-family: var(--police); line-height: 16px; }
  .onglets-tel a, .onglets-tel button { display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 11px; color: var(--ot-encre); position: relative; text-decoration: none; }
  .onglets-tel button { margin: 0; padding: 0; border: 0; background: none; font-family: inherit; line-height: inherit; cursor: pointer; }
  .onglets-tel .ic { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
  .onglets-tel a.actif { color: var(--ot-actif); font-weight: 650; }
  .onglets-tel .cpt { position: absolute; top: -3px; left: calc(50% + 6px); background: var(--alerte); color: var(--texte-inverse); border-radius: 99px; font-size: 10px; line-height: 15px; padding: 0 5px; font-weight: 700; }
  .onglets-tel .cpt.n { background: var(--texte-faible); }
}
/* ===== ONGLETS-TEL : fin ===== */


/* ===== TELEPHONE-DEZOOM : début — D-TRACE-PROTOTYPE-TELEPHONE-DEZOOME (Loïc, 28/09/2026 : « dézoomer toutes les interfaces
   sur le téléphone ») ; PROPOSITION de réglage, journal §13. Au téléphone (520 px et moins : les téléphones tenus droit ; à 640 px, la mise en page intermédiaire ne supporte pas l'échelle), l'en-tête, le contenu et le pied
   sont rendus à l'échelle --zoom-tel : on voit davantage sans défiler. La barre d'onglets du bas garde sa taille (ses libellés
   sont déjà à 11 px). Plancher : les quelques textes dessinés sous 11,5 px (pastilles, avatars, priorités, échéances) sont
   remontés à --police-plancher-tel, pour ne pas descendre sous 10 px une fois réduits. Le bureau ne change pas. ===== */
.app-conteneur { --zoom-tel: .82; --police-plancher-tel: 12.2px; }
@container app (max-width: 520px) {
  .app-corps > .entete, .app-corps > .contenu, .app-corps > .pied { zoom: var(--zoom-tel); }
  /* !important : ces textes sont posés par des règles portées plus spécifiques (maquette.css, maquette-ecrans.css) */
  .app-corps .sd-av, .app-corps .vip, .app-corps .av, .app-corps .ch-p > h2,
  .app-corps .pr, .app-corps .ch-v > b, .app-corps .sd-ech > small { font-size: var(--police-plancher-tel) !important; }
}
/* ===== TELEPHONE-DEZOOM : fin ===== */


/* ===== S-109 E03-E08-E09 : début — espacements de la maquette rendus aux trois écrans validés (revue n° 3, Q3,
   D-TRACE-PROTOTYPE-REVUE-3-RECOMMANDATIONS-ACCEPTEES). Sous .sd (menu « Retenu C », maquette.css), --e2 et --e3 sont deux
   encres ; dans .mq (maquette-ecrans.css, porté de trace.css), deux espacements : les écarts de la maquette qui les emploient
   (.actions, .barre-outils, .barre-selection) tombaient à 0. Ils reprennent les valeurs de trace.css (8 et 12 px) ; le gris 3
   des deux écrans reste l'encre 2 de la variante (--mqc-15, même couleur qu'avant) ; les lignes « Retenu C » et les autres
   pièces de la variante reprennent leurs encres. E03 porte mq-fiche et mq-site : la première règle le couvre. ===== */
.mq.mq-file, .mq.mq-fiche { --encre-3: var(--mqc-15); --e2: 8px; --e3: 12px; }
/* Les pièces de la variante « Retenu C » (lignes de ticket, groupes, segments, priorités, personnes) lisent --e2 et --e3 en encres */
.mq:is(.mq-file, .mq-fiche) :is(.sd-tab, .sd-li, .sd-cols, .sd-grp, .sd-qui, .sd-ech, .sd-seg, .sd-barre-outils, .sd-res, .sd-bt, .sd-leg, .pr, h1 small) { --e2: var(--mqc-15); --e3: var(--mqc-16); }
/* ===== S-109 E03-E08-E09 : fin ===== */

/* ===== E03-DONNEES-REELLES : début — la fiche site sur les données réelles (demande FONDATION du 28/09) : plusieurs
   numéros du contact sur place, un par ligne ; ce qui manque au régime reste sur la ligne. ===== */
.mq.mq-site .mq-tel { display: block; }
.mq.mq-site .mq-manque-regime { white-space: nowrap; }
/* ===== E03-DONNEES-REELLES : fin ===== */
/* ===== S-152 E09 : début — le message avec pièce jointe : le repère « [photo] » effacé du texte, une icône à sa place ===== */
.mq.mq-fiche .msg .mq-pj { display: inline-flex; vertical-align: -2px; color: var(--encre-2); }
/* ===== S-152 E09 : fin ===== */

/* ===== passe 5 — atelier A, E15 · E16 : début ===== */
/* Sur le fond sable, le gris 3 de la maquette tombe sous 4,5 : la clôture prend l'encre 2 de la variante, comme la fiche E09 */
.mq.mq-cloture { --encre-3: var(--e2); }
/* Ce que la maquette portait en style="…" : le bloc de photos sans bord ni marge, le formulaire pleine largeur sous les photos */
.mq-cloture .constat.mq-nu { border: 0; background: none; }
.mq-cloture .constat.mq-nu .photos { padding: 0; }
.mq-cloture .form.mq-large { max-width: none; }
.mq-cloture .form.mq-apres-photos { margin-top: 14px; }
.mq-cloture .encart .trois.mq-registre { margin-top: 8px; }
.mq-cloture .mq-pied { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; margin-top: 24px; }
/* Les photos : le jeu n'a pas l'image, on la dessine comme la maquette (fond, objet) ; cinq teintes tirées des jetons */
/* le fond de la figure reste un jeton plein (l'image le couvre) : le contrôle de contraste lit la légende sur lui */
.mq-cloture .constat .photo { --ph: color-mix(in srgb, var(--mqe-06) 85%, var(--mqe-04)); background: var(--mqe-06); }
.mq-cloture .photo.mq-ph-1 { --ph: color-mix(in srgb, var(--mqc-116) 30%, var(--mqe-06)); }
.mq-cloture .photo.mq-ph-2 { --ph: color-mix(in srgb, var(--mqc-92) 55%, var(--mqe-06)); }
.mq-cloture .photo.mq-ph-3 { --ph: color-mix(in srgb, var(--mqc-26) 25%, var(--mqe-06)); }
.mq-cloture .photo.mq-ph-4 { --ph: color-mix(in srgb, var(--mqc-18) 28%, var(--mqe-06)); }
.mq-cloture .photo .ph-fond { fill: var(--ph); }
.mq-cloture .photo .ph-objet { fill: color-mix(in srgb, var(--ph), var(--mqe-01) 25%); }
.mq-cloture .constat .photo figcaption { color: var(--mqe-01); }
/* Les entrées de la famille cochée : des cartes plus petites que celles des familles */
.mq-cloture .causes.mq-entrees { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.mq-cloture .causes.mq-entrees label { padding: 6px 10px; font-size: 13.5px; }
/* Le cas semblable (capture/L1 §5 : « à vérifier », jamais « cause ») et le texte brut du technicien */
.mq-cloture .mq-semblable { display: flex; gap: 8px; align-items: flex-start; margin-top: 12px; padding: 10px 14px; border-radius: var(--r-m); background: var(--surface); border: 1px dashed var(--filet-fort); font-size: 14px; color: var(--encre-2); }
.mq-cloture .mq-semblable b { color: var(--encre); font-weight: 600; }
.mq-cloture .mq-semblable .ic { flex: 0 0 auto; margin-top: 2px; }
.mq-cloture .mq-brut { padding: 8px 12px; border-left: 3px solid var(--filet-fort); background: var(--surface); font: 14px/1.5 var(--police-mono); color: var(--encre); overflow-wrap: anywhere; }
.mq-cloture .form textarea.mq-court { min-height: 56px; }
/* E16 : l'encart du guidé et celui de l'imputation, sous leur question */
.mq-cloture .pre-rempli { display: grid; gap: 14px; }
.mq-cloture .mq-guide { margin-top: 10px; }
.mq-cloture .choix label small { font-size: 12px; color: var(--encre-3); font-weight: 400; }
.mq-cloture .mq-interne h4 { margin-bottom: 4px; }
.mq-cloture .mq-imputation .cv dd b { font-weight: 600; }
.mq-cloture .verrou-aide .ic { vertical-align: -3px; }
.mq-cloture .mq-note-proposition { margin-top: 20px; font-size: 12.5px; color: var(--encre-3); }
@container app (max-width: 640px) {
  .mq-cloture .mq-pied { justify-content: stretch; }
  .mq-cloture .mq-pied .btn { flex: 1 1 auto; justify-content: center; }
  .mq-cloture .choix label { white-space: normal; }
}
/* ===== passe 5 — atelier A, E15 · E16 : fin ===== */



/* ===== passe 5 — atelier B, E17 · E18 : début ===== */
/* Le rapport (partials/rapport-client), dans E18 et dans le téléphone d'E17. Portage de 3-maquettes/e18-rapport.html : les
   règles .rp-* sont dans maquette-ecrans.css ; ici, ce que la maquette portait dans son HTML (couleurs du logo et des photos)
   et les blocs que CAPTURE L5 ajoute (ce qui a déclenché l'intervention, pièces, mention du régime). */
.mq .rp .rp-logo circle { fill: var(--mqe-07); stroke: none; }
/* La frise : trois étapes datées (Signalé · Intervention · Rapport ; L5 : ni délais ni heures), sur une ligne à toute largeur */
.mq .rp .rp-frise { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mq .rp .rp-frise li:nth-child(2)::after { display: block; }
.mq .rp .rp-frise li:last-child::after { display: none; }
.mq .rp .rp-pieces > p { margin-top: 6px; font-size: 14px; color: var(--encre-2); }
.mq .rp .rp-faits { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
.mq .rp h2 { font: 800 16px/1.3 var(--police-titre); }
.mq .rp-demande p { font-size: 14.5px; margin-top: 4px; }
.mq .rp-demande small { display: block; font-size: 12.5px; color: var(--encre-2); }
.mq .rp-pieces ul { display: grid; gap: 4px; margin-top: 6px; font-size: 14px; color: var(--encre-2); }
.mq .rp-pieces b { color: var(--encre); font-weight: 600; }
.mq .rp-reco h2 { font-size: 15px; }
.mq .rp-reco p + p { margin-top: 6px; }
.mq .rp-reco p b { font-weight: 650; }
.mq .rp-regime { font-size: 14px; font-weight: 600; color: var(--encre); }
.mq .rp-equipe small { color: var(--encre-2); }
/* Les photos : le dessin de la maquette (un cadre, un bandeau, un rond), ses trois teintes en jetons */
.mq .rp .constat .photo { overflow: hidden; }
.mq .rp .constat .photo.ph0 { background: var(--p8-f); }
.mq .rp .constat .photo.ph1 { background: var(--p4-f); }
.mq .rp .constat .photo.ph2 { background: var(--p2-f); }
.mq .rp .constat .photo .f { fill: currentColor; opacity: 0; }
.mq .rp .constat .photo .m { fill: var(--mqe-01); opacity: .18; }
.mq .rp .constat .photo .c { fill: var(--mqe-01); opacity: .45; }
.mq .rp .constat .photo .r { fill: var(--mqe-01); opacity: .3; }
.mq .rp .constat .photo figcaption { color: var(--mqe-01); }
.mq .rp .constat .photo.trou { background: repeating-linear-gradient(135deg, var(--surface-3) 0 6px, var(--surface-2) 6px 12px); }
.mq .rp .constat .photo.trou span { padding: 6px; }
.mq .rp .constat dd b { font-weight: 650; }
.mq .rp .rp-valide .btn { font-family: inherit; }
/* E18, la page publique : l'écran entier, comme la connexion (E00) */
.app-public .contenu:has(> .mq-rapport) { display: block; padding: 0; max-width: none; margin: 0; }
.bd-main.mq-rapport, .bd-main.mq-rapport.sd { padding: 0; }
/* E17 : l'aperçu dans le cadre de téléphone, à côté de la validation (la maquette portait ces règles en style="…") */
.mq-e17 .e17-grille { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 28px; align-items: start; }
.mq-e17 .e17-grille > div { min-width: 0; }
.mq-e17 .tel { width: 330px; max-width: 100%; }
.mq-e17 .tel .ecran { height: 560px; overflow-y: auto; display: block; background: var(--surface); border-radius: 26px; }
.mq-e17 .tel .rapport { min-height: 0; }
.mq-e17 .tel-legende { color: var(--encre-2); }
.mq-e17 .form { max-width: none; gap: 16px; }
.mq-e17 .aide, .mq-e17 .form .aide { font-size: 12.5px; color: var(--encre-2); }
/* L'en-tête commun (partials/cloture-tete) : l'encre 3 de la maquette sur le sable fait 4,30 ; l'encre 2 (comme E14, S-131) */
.mq-e17 .page-tete .sous, .mq-e17 .page-tete .ref { color: var(--encre-2); }
.mq-e17 .e17-trous h4 { color: var(--ambre); }
.mq-e17 .e17-trous ul { display: grid; gap: 4px; margin-top: 8px; padding-left: 18px; list-style: disc; font-size: 14px; }
.mq-e17 .e17-projet p { font-size: 14px; }
.mq-e17 .e17-projet a { color: var(--lien); }
.mq-e17 .e17-textes { border: 0; padding: 0; margin: 0; min-width: 0; display: grid; gap: 10px; }
.mq-e17 .e17-textes legend { padding: 0; margin-bottom: 2px; }
.mq-e17 .e17-texte { display: grid; gap: 4px; }
.mq-e17 .e17-texte-l { font-size: 13px; color: var(--encre-2); }
.mq-e17 .e17-a-cote { display: block; font-size: 13px; color: var(--encre-2); background: var(--surface-2); border-left: 3px solid var(--filet-fort); padding: 6px 10px; border-radius: 0 var(--r-m) var(--r-m) 0; }
.mq-e17 .e17-a-cote b { font-weight: 600; }
.mq-e17 .form textarea { min-height: 64px; font-size: 14.5px; }
.mq-e17 .e17-case { display: flex; gap: 10px; align-items: flex-start; border: 1px solid var(--filet-fort); border-radius: var(--r-m); padding: 10px 12px; background: var(--surface); cursor: pointer; }
.mq-e17 .e17-case input { margin-top: 3px; accent-color: var(--marque-2); }
.mq-e17 .e17-case b { display: block; font-size: 14px; }
.mq-e17 .e17-case small { display: block; font-size: 13px; color: var(--encre-2); }
.mq-e17 .e17-validation p { font-size: 14px; margin-top: 4px; color: var(--encre-2); }
.mq-e17 .e17-validation .btn { margin-top: 12px; width: 100%; justify-content: center; height: auto; min-height: 44px; white-space: normal; text-align: center; padding-block: 8px; font-family: inherit; }
.mq-e17 .e17-validation .e17-transmission { font-size: 12.5px; margin-top: 8px; }
.mq-e17 .e17-fige { background: var(--vert-fond); }
.mq-e17 .e17-envoi { background: var(--bleu-fond); }
.mq-e17 .e17-etat-titre { display: flex; gap: 8px; align-items: center; }
.mq-e17 .e17-fige .cv, .mq-e17 .e17-envoi .cv { margin-top: 10px; }
.mq-e17 .cv dt { color: var(--encre-2); }
.mq-e17 .cv dd small { color: var(--encre-2); }
.mq-e17 .e17-etat-texte { font-size: 13.5px; color: var(--encre-2); margin-top: 10px; }
.mq-e17 .e17-fige a { display: inline-block; margin-top: 8px; font-size: 14px; color: var(--lien); }
@container app (max-width: 900px) {
  .mq-e17 .e17-grille { grid-template-columns: minmax(0, 1fr); }
}
/* Au téléphone, l'aperçu se lit en entier dans la page : pas de second défilement dans le cadre */
@container app (max-width: 640px) {
  .mq-e17 .tel .ecran { height: auto; overflow: visible; }
  .mq-e17 .tel { width: 100%; }
}
/* ===== passe 5 — atelier B, E17 · E18 : fin ===== */

/* ===== VAGUE-28-09 E08-E09 : début — les huit états en configuration (D-TRACE-A9-HUIT-ETATS) et la priorité retenue
   (A10 clos, D-TRACE-PRIORITE-CONSEILLEE-PAS-IMPOSEE) : journal de dessin §19 ===== */
.mq details.prio-calc .retenir-priorite { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--filet); }
.mq details.prio-calc .retenir-priorite .filtre { flex: 1 1 150px; margin: 0; }
.mq details.prio-calc .retenir-priorite .champ { width: 100%; }
/* ===== VAGUE-28-09 E08-E09 : fin ===== */

/* ==== VAGUE-29-09 E15-E17 (point 3 de la vague : clôture sur L4 v3.1, L5 v2) ==== */
.mq-cloture .mq-nature { margin: 8px 0 20px; }
.mq-cloture .mq-nature .choix small { color: var(--encre-3); font-weight: 400; }
.mq-cloture .mq-code { margin: 0; font-size: 15px; color: var(--encre-2); }
.mq-cloture .mq-code .mono { font-family: var(--mono, ui-monospace, monospace); color: var(--encre); margin-right: 4px; }
.mq-cloture .mq-code-bloc { margin-top: 12px; }
/* ==== fin VAGUE-29-09 E15-E17 ==== */
/* ==== VAGUE-29-09 E17 (alertes internes, état depuis « Terminer », suite à donner) ==== */
.mq-e17 .e17-alertes { border-left: 3px solid var(--filet-fort); margin-bottom: 16px; }
.mq-e17 .e17-alertes ul { margin: 6px 0 0; padding-left: 18px; }
.mq-e17 .e17-apres p { margin: 0; }
.mq-e17 .e17-suite { margin-top: 10px; }
.mq-e17 .e17-suite ul { margin: 6px 0 10px; padding-left: 18px; }
/* E18 : la réponse « Non » du client, neutre (ni vert ni alarme) */
.mq .rp-valide.non { display: flex; gap: 10px; align-items: flex-start; }
.mq .rp-valide.non .ic { width: 22px; height: 22px; flex: 0 0 auto; color: var(--encre-2); }
/* E09 : le geste « Rattacher la cause » sous un constat à cause non trouvée ou « Autre » */
.constat .constat-rattacher { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 10px 16px 14px; }
.constat .constat-rattacher small { flex: 1 1 260px; }
/* ==== fin VAGUE-29-09 E17 ==== */

/* ==== VAGUE-29-09 E01 petite carte (symboles et « État temps réel » de la page « Contrôle FONDATION », D-TRACE-PETITE-CARTE-ACCUEIL-A-PROTOTYPE) ==== */
.ch-carte [data-sit="alarme"] { --sit: var(--carte-urgence); }
.ch-carte [data-sit="ticket"] { --sit: var(--carte-ticket-ouvert); }
.ch-carte [data-sit="intervention"] { --sit: var(--carte-cat-1); }
.ch-carte [data-sit="ras"] { --sit: var(--carte-rien-a-signaler); }
.ch-carte [data-sit="nonbranche"] { --sit: var(--carte-inconnu); }
.ch .ch-carte .lot.sym circle.sym-plein, .ch .ch-carte .ch-carte-cle circle.sym-plein { fill: var(--sit); stroke: var(--surface); stroke-width: 1.6; }
.ch .ch-carte .lot.sym circle.sym-vide, .ch .ch-carte .ch-carte-cle circle.sym-vide { fill: var(--surface); stroke: var(--sit); stroke-width: 2.6; }
.ch .ch-carte .lot.sym circle.sym-verifier, .ch .ch-carte .ch-carte-cle circle.sym-verifier { fill: none; stroke: var(--sit); stroke-width: 1.5; stroke-dasharray: 2.4 2.1; }
.ch .ch-carte .lot.sym circle.sym-groupe, .ch .ch-carte .ch-carte-cle circle.sym-groupe { fill: var(--surface); stroke: var(--e3); stroke-width: .6; }
.ch .ch-carte .lot.sym circle.sym-arc, .ch .ch-carte .ch-carte-cle circle.sym-arc { fill: none; stroke: var(--sit); }
.ch .ch-carte .lot.sym text.sym-n { fill: var(--e); font: 700 9px var(--police); text-anchor: middle; }
.ch .ch-carte .lot.sym text.sym-compte { fill: var(--e); font: 600 10.5px var(--police); text-anchor: middle; paint-order: stroke; stroke: var(--surface); stroke-width: 2.4px; }
.ch-carte .ch-carte-cle { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 6px; margin-top: 1px; font-size: 8.5px; line-height: 1.15; }
.ch-carte .ch-carte-cle i { display: inline-flex; align-items: center; gap: 2px; font-style: normal; white-space: nowrap; }
.ch .ch-carte-g .ch-carte-cle svg { position: static; width: 8px; height: 8px; display: inline-block; max-height: none; }
.ch .ch-carte-g > svg { inset: 0 0 30px; height: calc(100% - 30px); }
.ch .ch-carte .lot.sym circle.sym-vrai { fill: var(--e2); stroke: none; }
/* ==== fin VAGUE-29-09 E01 ==== */
/* ==== VAGUE-29-09 régime « à compléter » (D-TRACE-REGIME-A-COMPLETER-ET-GARANTIE-SOLARMA) ==== */
.pastille-regime[data-regime="a_completer"] { background: var(--attention-fond); color: var(--attention); }
.mq .r-completer { background: var(--attention-fond); border: 1px dashed var(--attention); }
/* ==== fin VAGUE-29-09 régime ==== */
/* ==== VAGUE-29-09 point 4, suites de relecture ==== */
.btn[disabled], .btn:disabled, .mq .btn[disabled], .mq .btn.inactif { color: var(--texte-doux); background: var(--surface-2); border-style: dashed; box-shadow: none; cursor: not-allowed; opacity: 1; }
span.mq-coche { display: inline-block; width: 16px; }
/* ==== fin VAGUE-29-09 point 4 ==== */
/* ==== PASSES-6-7 (29/09/2026) : écrans après la V1, N2 — E19 à E29, E40 à E43 ==== */
.mq-apres .tb-tuiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.mq-apres .tb-grille { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 14px; }
.mq-apres .av-chiffres { display: flex; gap: 28px; flex-wrap: wrap; margin-bottom: 16px; }
.mq-apres .av-chiffres .av-alerte b { color: var(--rouge); }
.mq-apres .av-e19 { --cols: minmax(0,1.6fr) minmax(0,1.4fr) 120px 120px 180px; }
.mq-apres .av-e20 { --cols: minmax(0,2fr) 110px minmax(0,1fr) minmax(0,1.2fr); }
.mq-apres .av-e21 { --cols: minmax(0,2fr) 170px 150px 150px 130px; }
.mq-apres .av-e22 { --cols: minmax(0,1.4fr) minmax(0,1fr); }
.mq-apres .av-e23 { --cols: minmax(0,1.4fr) minmax(0,1.2fr) 130px 110px minmax(0,1.4fr); }
.mq-apres .av-e25 { --cols: minmax(0,1.4fr) 90px minmax(0,1fr) minmax(0,1fr); }
.mq-apres .av-e28 { --cols: minmax(0,2fr) minmax(0,1.2fr) 80px 150px; }
.mq-apres .av-e41 { --cols: minmax(0,1.6fr) 150px minmax(0,1.2fr) minmax(0,1.4fr); }
.mq-apres .av-e42, .mq-apres .av-e40 { --cols: minmax(0,1fr) 170px; }
.mq-apres .av-e43 { --cols: 240px minmax(0,1fr) minmax(0,1.6fr); }
.mq-apres .rang .d small { white-space: normal; }
.mq-apres .etiq { display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px; border-radius: 99px; font-size: 12.5px; font-weight: 600; background: var(--ardoise-fond); color: var(--ardoise); }
.mq-apres .etiq.av-st-alerte, .mq-apres .etiq.av-nok { background: var(--rouge-fond); color: var(--rouge); }
.mq-apres .etiq.av-st-en_retard, .mq-apres .etiq.av-st-passee_sans_statut, .mq-apres .etiq.av-st-sous_30_j, .mq-apres .etiq.av-st-echu { background: var(--ambre-fond); color: var(--ambre); }
.mq-apres .etiq.av-st-a_jour, .mq-apres .etiq.av-ok { background: var(--vert-fond); color: var(--vert); }
.mq-apres .av-rouge { color: var(--rouge); }
.mq-apres .av-note { font-size: 13px; color: var(--encre-3); margin-top: 12px; max-width: 900px; }
.mq-apres .av-plus { font-size: 13px; color: var(--encre-3); margin: 8px 12px; }
.mq-apres .av-ref { font-family: var(--police-mono); font-size: 12px; color: var(--encre-3); margin-right: 4px; }
.mq-apres .av-elec { color: var(--ambre); }
.mq-apres .av-deux { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 12px; }
.mq-apres .av-liste { display: grid; gap: 6px; font-size: 14px; margin: 0; padding: 0; list-style: none; }
.mq-apres .av-liste .s, .mq-apres .av-ligne { color: var(--encre-3); font-size: 13px; }
.mq-apres .av-seg { margin-bottom: 14px; }
.mq-apres .av-etape { display: flex; gap: 10px; align-items: flex-start; }
.mq-apres .av-etape input { margin-top: 4px; accent-color: var(--marque-2); }
.mq-apres .av-ordre { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--surface-3); font-size: 12px; font-weight: 700; flex: 0 0 auto; }
.mq-apres .av-actions { display: flex; gap: 6px; justify-content: flex-end; align-items: center; flex-wrap: wrap; }
.mq-apres .av-dl { display: grid; gap: 6px; margin: 0; }
.mq-apres .av-dl div { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 12px; }
.mq-apres .av-dl dt { color: var(--encre-3); font-size: 13px; }
.mq-apres .av-dl dd { margin: 0; }
.mq-apres .av-bloc { margin-top: 14px; }
.mq-apres .av-barres { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 6px; align-items: end; height: 170px; margin-top: 10px; }
.mq-apres .av-barres.av-petites { height: 150px; }
.mq-apres .av-col { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; height: 100%; text-align: center; gap: 3px; }
.mq-apres .av-col small { font-size: 11px; color: var(--encre-3); }
.mq-apres .av-col .av-v { font-size: 11px; color: var(--encre-2); }
.mq-apres .av-pile { display: flex; flex-direction: column-reverse; justify-content: flex-start; height: 100%; background: var(--surface-2); border-radius: 3px; overflow: hidden; }
.mq-apres .av-s1 { display: block; background: var(--s1); }
.mq-apres .av-s3 { display: block; background: var(--s3); }
.mq-apres .tb-cb .piste i.av-s1 { height: 100%; }
.mq-apres .av-h2 { margin-top: 18px; }
.mq-apres .av-rec { margin-bottom: 12px; }
.mq-apres .av-rec.av-non-vue { border-left: 3px solid var(--rouge); }
.mq-apres .av-citation, .mq-apres .av-brut { margin: 8px 0; padding: 10px 14px; border-left: 3px solid var(--filet-fort); background: var(--surface-2); }
.mq-apres .av-brut { font-family: var(--police-mono); font-size: 13.5px; white-space: pre-line; }
.mq-apres .av-trou { background: var(--rouge-fond); }
.mq-apres .av-recherche { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.mq-apres .av-champ { display: flex; align-items: center; gap: 6px; flex: 1 1 320px; background: var(--surface); border: 1px solid var(--filet-fort); border-radius: var(--r-m); padding: 6px 10px; }
.mq-apres .av-champ input { border: 0; background: none; flex: 1; font: inherit; color: inherit; }
.mq-apres .av-recherche select { font: inherit; color: inherit; background: var(--surface); border: 1px solid var(--filet-fort); border-radius: var(--r-m); padding: 6px 10px; }
.mq-apres .av-message { max-width: 620px; }
.mq-apres .av-bulle { background: var(--surface-2); border-radius: var(--r-l); padding: 12px 14px; }
.mq-apres .av-boutons { display: flex; gap: 8px; margin-top: 8px; }
.mq-apres .av-boutons span { flex: 1; text-align: center; padding: 6px; border-radius: var(--r-m); background: var(--surface); color: var(--lien); font-weight: 600; font-size: 13.5px; }
@container app (max-width: 1100px) { .mq-apres .tb-tuiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } .mq-apres .tb-grille { grid-template-columns: 1fr; } }
@container app (max-width: 640px) {
  .mq-apres .tb-tuiles, .mq-apres .av-deux { grid-template-columns: 1fr; }
  .mq-apres .rang { grid-template-columns: minmax(0, 1fr) auto !important; }
  .mq-apres .av-dl div { grid-template-columns: 1fr; gap: 0; }
  .mq-apres .av-barres { gap: 2px; }
  .mq-apres .av-col small { font-size: 9px; }
}
/* ==== fin PASSES-6-7 ==== */
/* ==== PASSES-6-7, contraste et coupes (contrôle de rendu du 29/09) ==== */
.mq-apres .page-tete .sous, .mq-apres .av-note, .mq-apres .av-plus, .mq-apres .tb-sinc, .mq-apres .av-dl dt, .mq-apres .section-fiche h2 small, .mq-apres .seg .n { color: var(--encre-2); }
.mq-apres .av-note a { color: var(--lien); }
@container app (max-width: 640px) { .mq-apres .rang .p, .mq-apres .rang .s { white-space: normal; overflow: visible; overflow-wrap: anywhere; } }
.mq-apres .av-e28 .rang .p { white-space: normal; }
/* ==== fin PASSES-6-7, contraste ==== */
.mq-apres .av-col .av-v { grid-row: 1; } .mq-apres .av-col .av-pile { grid-row: 2; } .mq-apres .av-col small { grid-row: 3; }
.mq-apres .bloc { background: var(--surface); border-radius: var(--r-l); box-shadow: var(--ombre-carte); padding: 12px 16px; }
.mq-apres .bloc .rangs { box-shadow: none; border-radius: 0; margin: 0 -16px -12px; }
.mq-apres .bloc .bloc-tete h2 { font-size: 16px; }
.mq-apres .bloc .bloc-tete p { font-size: 13px; color: var(--encre-2); }
.mq-apres .av-unite { color: var(--encre-2); font-size: 13px; }
.mq-apres .av-e19 { --cols: minmax(0,1.8fr) 100px 170px 100px 150px; }
.mq-apres .av-frise { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 2px; align-items: center; }
.mq-apres .av-frise i { display: block; height: 12px; border-radius: 2px; background: var(--surface-2); font-style: normal; font-size: 8.5px; text-align: center; }
.mq-apres .rangs-tete .av-frise i { background: none; height: auto; color: var(--encre-2); }
.mq-apres .av-m-fait { background: var(--vert) !important; }
.mq-apres .av-m-echu { background: var(--ambre-vif) !important; }
.mq-apres .av-m-a_venir { background: var(--filet-fort) !important; }
.mq-apres .av-m-courant { outline: 1.5px solid var(--encre-2); }
.mq-apres .av-legende { font-size: 12.5px; color: var(--encre-2); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 0 0 8px; }
.mq-apres .av-legende i { display: inline-block; width: 14px; height: 10px; border-radius: 2px; }

/* ---- A49 · E08, file du bureau : les sites dont la garantie Solarma finit (fil PROTOTYPE du 29/09/2026 après-midi) ---- */
.mq .mq-garanties { margin-top: var(--e4); }
.mq .mq-garanties h3 { font-size: var(--t-l); margin: 0 0 2px; }
.mq .mq-garanties h3 .n { color: var(--e2); font-weight: 600; margin-left: 4px; }
.mq .mq-garanties .aide { color: var(--e2); font-size: 13px; margin: 0 0 var(--e3); }
.mq .mq-gar { border-top: 1px solid var(--filet); }
.mq .mq-gar-tete, .mq .mq-gar-li { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1.6fr) minmax(0, 1.2fr); gap: var(--e3); padding: 9px var(--e3); border-bottom: 1px solid var(--filet); align-items: baseline; }
.mq .mq-gar-tete { font-size: 12px; font-weight: 600; color: var(--e2); text-transform: uppercase; letter-spacing: .04em; }
.mq .mq-gar-li small { display: block; color: var(--e2); font-size: 12.5px; }
.mq .mq-gar-li a { color: var(--accent); font-weight: 600; text-decoration: none; }
@container app (max-width: 640px) {
  .mq .mq-gar-tete { display: none; }
  .mq .mq-gar-li { grid-template-columns: 1fr; gap: 2px; }
  .mq .mq-gar-li > span:nth-child(2) { font-size: 13px; color: var(--e2); }
}

/* ---- S37 · E45 et E46, les rapports de production (fil PROTOTYPE du 29/09/2026 après-midi) ---- */
.mq-apres .av-e45 { --cols: minmax(0,1.6fr) minmax(0,1fr) 100px minmax(0,1fr) 340px; }
.mq-apres .av-e45 .av-actions { flex-wrap: nowrap; }
.mq-apres .av-e45 .rang .cellule.s { white-space: normal; }
.mq-apres .etiq.av-pr-a_envoyer { background: var(--bleu-fond); color: var(--bleu); }
.mq-apres .etiq.av-pr-incomplet, .mq-apres .etiq.av-pr-sans_destinataire, .mq-apres .etiq.av-pr-collecte_en_retard, .mq-apres .etiq.av-pr-cle_a_confirmer { background: var(--ambre-fond); color: var(--ambre); }
.mq-apres .etiq.av-pr-envoye { background: var(--vert-fond); color: var(--vert); }
.mq-apres .rang .cellule .etiq + .s { display: block; margin-top: 2px; }
.mq-e46 .rpp { background: var(--surface); box-shadow: var(--ombre-carte); border-radius: var(--r-l); max-width: 820px; padding: 28px 32px; margin-top: 12px; }
.mq-e46 .rpp-tete { display: flex; gap: 20px; align-items: flex-start; border-bottom: 2px solid var(--marque-2); padding-bottom: 14px; }
.mq-e46 .rpp-marque { font-weight: 800; letter-spacing: .12em; color: var(--marque-2); font-size: 15px; padding-top: 4px; }
.mq-e46 .rpp-sur { margin: 0; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--encre-2); }
.mq-e46 .rpp-tete h2 { margin: 2px 0; font-size: 22px; }
.mq-e46 .rpp-tete .s { margin: 0; color: var(--encre-2); font-size: 13.5px; }
.mq-e46 .rpp-chiffre { display: grid; gap: 2px; margin: 18px 0 6px; }
.mq-e46 .rpp-chiffre b { font-size: 34px; line-height: 1.1; }
.mq-e46 .rpp-chiffre small { color: var(--encre-2); font-size: 13px; }
.mq-e46 .rpp-bloc { margin-top: 18px; }
.mq-e46 .rpp-bloc h3 { font-size: 14px; margin: 0 0 8px; }
.mq-e46 .rpp-jours, .mq-e46 .rpp-mois { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 3px; align-items: end; height: 130px; }
.mq-e46 .rpp-mois { height: 140px; gap: 6px; }
.mq-e46 .rpp-j, .mq-e46 .rpp-m { display: grid; grid-template-rows: minmax(0, 1fr) auto auto; height: 100%; text-align: center; }
.mq-e46 .rpp-j i, .mq-e46 .rpp-m i { align-self: end; display: block; background: var(--prod); border-radius: 2px 2px 0 0; min-height: 2px; }
.mq-e46 .rpp-j small, .mq-e46 .rpp-m small { font-size: 10px; color: var(--encre-2); }
.mq-e46 .rpp-m em { font-style: normal; font-size: 9.5px; color: var(--encre-2); }
.mq-e46 .rpp-manque i, .mq-e46 .rpp-cle.rpp-manque { background: repeating-linear-gradient(135deg, var(--surface-3) 0 3px, var(--surface) 3px 6px); border: 1px dashed var(--filet-fort); }
.mq-e46 .rpp-incomplet i, .mq-e46 .rpp-cle.rpp-incomplet { background: repeating-linear-gradient(135deg, var(--prod) 0 3px, var(--surface-2) 3px 6px); }
.mq-e46 .rpp-avant i { background: none; }
.mq-e46 .rpp-leg { font-size: 12.5px; color: var(--encre-2); margin: 6px 0 0; display: flex; align-items: center; gap: 6px; }
.mq-e46 .rpp-cle { display: inline-block; width: 14px; height: 10px; border-radius: 2px; }
.mq-e46 .rpp-cumul { display: flex; justify-content: space-between; align-items: baseline; border-top: 1px solid var(--filet); padding-top: 12px; }
.mq-e46 .rpp-cumul b { font-size: 20px; }
.mq-e46 .rpp-pied { margin-top: 22px; padding-top: 10px; border-top: 1px solid var(--filet); font-size: 12px; color: var(--encre-2); }
@container app (max-width: 640px) {
  .mq-e46 .rpp { padding: 18px 16px; }
  .mq-e46 .rpp-j small { font-size: 8px; }
  .mq-e46 .rpp-j:nth-child(even) small { visibility: hidden; }
  .mq-e46 .rpp-m em { display: none; }
}
@container app (max-width: 640px) {
  .mq-apres .av-e45 .rang { grid-template-columns: minmax(0, 1fr) !important; }
  .mq-apres .av-e45 .av-actions { flex-wrap: wrap; justify-content: flex-start; }
}

/* ===== LEGENDE-DISCRETE (revue n° 5, D-TRACE-PROTOTYPE-REVUE-5-REPONSES, R9 et R7 b) : début — la légende de la petite carte
   d'E01 en petit et en gris, sur deux lignes au plus ; au téléphone, la ligne des totaux seule, au plancher de lecture, et la
   clé des symboles masquée ; le groupe, un peu agrandi, porte en son centre le nombre de tickets seul ; les deux chiffres
   « n sites · m tickets » restent sous le groupe au bureau. ===== */
.ch .ch-carte-g > span { margin-top: 0; font-size: 9px; line-height: 1.15; color: var(--e3); }
.ch .ch-carte-g .ch-carte-tot { font-weight: 400; }
.ch .ch-carte-g .ch-carte-cle { color: var(--e3); }
.ch .ch-carte .lot.sym text.sym-n-tel { display: none; fill: var(--e); font: 700 13.5px var(--police); text-anchor: middle; dominant-baseline: central; }
.ch .ch-carte .lot.sym .sym-g { transform-box: fill-box; transform-origin: center; }
@container app (max-width: 640px) {
  .ch .ch-carte .lot.sym text.sym-compte { display: none; }
  .ch .ch-carte .lot.sym text.sym-n-tel { display: inline; }
  .ch .ch-carte .lot.sym .sym-g { transform: scale(1.15); }
  .ch .ch-carte-g > span { font-size: var(--police-plancher-tel); }
  .ch .ch-carte-g .ch-carte-cle { display: none; }
}
/* ===== LEGENDE-DISCRETE : fin ===== */

/* E46 : la production dans la couleur du soleil du logo (revue n° 5, R9) : jeton --prod, jetons.css. */

/* ===== LOT B 30-09 · E18 (R4 b) : l'aperçu interne du message WhatsApp et du PDF joint — journal de dessin §28 ===== */
.mq-e18 .e18-grille { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 28px; align-items: start; }
.mq-e18 .e18-grille > * { min-width: 0; }
.mq-e18 .tel { width: 360px; }
.mq-e18 .tel .ecran { height: 620px; }
.mq-e18 .doc-wa { display: flex; gap: 10px; align-items: center; background: var(--surface-2); border: 1px solid var(--filet); border-radius: 8px; padding: 8px 10px; margin: 0 0 8px; white-space: normal; }
.mq-e18 .doc-wa .ic { width: 26px; height: 26px; flex: none; color: var(--marque); }
.mq-e18 .doc-wa b { display: block; font-size: 12.5px; line-height: 1.3; word-break: break-all; }
.mq-e18 .doc-wa small { display: block; font-size: 11.5px; color: var(--encre-2); }
.mq-e18 .e18-legende { list-style: none; padding: 0; margin: 10px 0 0; display: grid; gap: 6px; max-width: 360px; }
.mq-e18 .e18-pdf-tete { display: flex; gap: 16px; justify-content: space-between; align-items: flex-start; margin-bottom: 12px; }
.mq-e18 .e18-pdf-tete h2 { font-size: 17px; margin: 0 0 4px; }
.mq-e18 .e18-pdf-tete .aide { max-width: 60ch; }
.mq-e18 .e18-feuille { background: var(--surface); border: 1px solid var(--filet); border-radius: 6px; box-shadow: var(--ombre-2); max-width: 640px; overflow: hidden; }
.mq .rp-avis { display: flex; gap: 10px; align-items: flex-start; }
.mq .rp-avis .ic { width: 22px; height: 22px; flex: 0 0 auto; color: var(--marque); }
@container app (max-width: 900px) { .mq-e18 .e18-grille { grid-template-columns: minmax(0, 1fr); } }
@container app (max-width: 640px) {
  .mq-e18 .tel, .mq-e18 .e18-legende { width: 100%; max-width: none; }
  .mq-e18 .tel .ecran { height: auto; overflow: visible; }
  .mq-e18 .e18-pdf-tete { flex-direction: column; }
}
/* ===== LOT B 30-09 · E18 : fin ===== */

/* ===== LOT B 30-09 · E45 et E46 sur detection/L8 v5 ===== */
.mq-apres .av-cle { display: flex; gap: 10px; align-items: flex-start; margin: 4px 0 12px; }
.mq-apres .av-cle .ic { width: 18px; height: 18px; flex: none; color: var(--ambre); margin-top: 2px; }
.mq-apres .av-partagee { display: inline-block; margin-top: 4px; font-size: 11.5px; }
.mq-e46 .rpp-cumul small { display: block; color: var(--encre-2); font-size: 12.5px; }
/* ===== LOT B 30-09 · E45 et E46 : fin ===== */

/* ===== LOT B 30-09 · E23 et E24, soin visuel (R10 a) ===== */
.mq-apres .etiq.av-f-silence { background: var(--muet-fond); color: var(--muet); }
.mq-apres .etiq.av-f-alarme { background: var(--rouge-fond); color: var(--rouge); }
.mq-apres .etiq.av-f-mesure { background: var(--ambre-fond); color: var(--ambre); }
.mq-apres .etiq[class*="av-f-"] { display: inline-flex; gap: 5px; align-items: center; white-space: nowrap; }
.mq-apres .av-familles { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0 0 12px; }
.mq-apres .av-e23 .rang, .mq-apres .av-e23 .rangs-tete { padding-left: 12px; }
.mq-apres .av-e23 .rang.av-nouvelle { border-left: 3px solid var(--marque-2); padding-left: 9px; }
.mq-apres .av-e23 .cellule.num span.s, .mq-apres .av-e23 .cellule span.s { display: block; font-size: 12px; color: var(--encre-2); }
.mq-e24 .av-sur { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: 0 0 4px; }
.mq-e24 .av-fait { display: flex; gap: 14px; align-items: baseline; flex-wrap: wrap; background: var(--surface); border-radius: var(--r-l); box-shadow: var(--ombre-carte); padding: 18px 22px; margin-bottom: 16px; border-left: 4px solid var(--filet); }
.mq-e24 .av-fait b { font-size: 30px; line-height: 1.1; }
.mq-e24 .av-fait span { color: var(--encre-2); font-size: 14px; }
.mq-e24 .av-fait.av-f-silence { border-left-color: var(--muet); }
.mq-e24 .av-fait.av-f-alarme { border-left-color: var(--rouge); }
.mq-e24 .av-fait.av-f-mesure { border-left-color: var(--ambre); }
.mq-e24 .av-carte { background: var(--surface); border-radius: var(--r-l); box-shadow: var(--ombre-carte); padding: 18px 22px; }
/* ===== LOT B 30-09 · E23 et E24 : fin ===== */

/* ===== LOT B 30-09 · la passation : rubrique d'E08 et E47 ===== */
.mq-passations { margin-top: 8px; }
.mq-passations h3 .n, .mq-pas-groupe h4 .n { color: var(--encre-2); font-weight: 600; margin-left: 6px; }
.mq-pas-groupe { margin: 14px 0 0; }
.mq-pas-groupe h4 { margin: 0 0 2px; font-size: 15px; }
.mq-pas { background: var(--surface); border-radius: var(--r-l); box-shadow: var(--ombre-carte); margin-top: 6px; }
.mq-pas-tete, .mq-pas-li { display: grid; grid-template-columns: minmax(0, 2fr) 120px minmax(0, 1fr) 150px 170px; gap: 12px; align-items: center; padding: 8px 14px; }
.mq-pas-tete { font-size: 12px; color: var(--encre-2); font-weight: 600; border-bottom: 1px solid var(--filet); }
.mq-pas-li + .mq-pas-li { border-top: 1px solid var(--filet); }
.mq-pas-li small { display: block; color: var(--encre-2); font-size: 12px; }
.mq-pas-li em { color: var(--ambre); font-style: normal; font-size: 13px; }
.mq-pas-li span:last-child { text-align: right; }
@container app (max-width: 900px) {
  .mq-pas-tete { display: none; }
  .mq-pas-li { grid-template-columns: minmax(0, 1fr) auto; }
  .mq-pas-li span:nth-child(2), .mq-pas-li span:nth-child(3), .mq-pas-li span:nth-child(4) { grid-column: 1; font-size: 13px; color: var(--encre-2); }
  .mq-pas-li span:last-child { grid-column: 2; grid-row: 1; }
}
.mq-e47 .e47-etape h2 { display: flex; gap: 10px; align-items: center; }
.mq-e47 .e47-n { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--marque-pale); color: var(--marque); font-size: 14px; flex: none; }
.mq-e47 .e47-etape { background: var(--surface); border-radius: var(--r-l); box-shadow: var(--ombre-carte); padding: 16px 20px; margin-bottom: 14px; }
.mq-e47 .e47-sites, .mq-e47 .e47-garanties { list-style: none; padding: 0; margin: 8px 0; display: grid; gap: 8px; }
.mq-e47 .e47-sites li { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.mq-e47 .e47-chercher { display: grid; gap: 8px; margin-top: 8px; }
.mq-e47 .e47-gestes { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.mq-e47 .etiq.e47-soumise { background: var(--bleu-fond); color: var(--bleu); }
.mq-e47 .etiq.e47-a_faire { background: var(--ardoise-fond); color: var(--ardoise); }
.mq-e47 .etiq.e47-renvoyee { background: var(--ambre-fond); color: var(--ambre); }
.mq-e47 .etiq.e47-validee { background: var(--vert-fond); color: var(--vert); }
.mq-e47 .av-sur { margin: 0 0 4px; }
.mq-e47 .page-tete .sous, .mq-e47 .aide, .mq-e47 .s { color: var(--encre-2); }
.mq-e47 .av-dl { display: grid; gap: 6px; margin: 8px 0 0; }
.mq-e47 .av-dl > div { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 12px; }
.mq-e47 .av-dl dt { color: var(--encre-2); font-size: 13px; }
.mq-e47 .av-dl dd { margin: 0; }
.mq-e47 .av-dl em { color: var(--ambre); font-style: normal; }
.mq-e47 .choix { display: flex; flex-wrap: wrap; gap: 12px; margin: 6px 0; }
@container app (max-width: 640px) { .mq-e47 .av-dl > div { grid-template-columns: minmax(0, 1fr); gap: 0; } }
/* ===== LOT B 30-09 · la passation : fin ===== */
.mq-e47 .e17-case { display: flex; gap: 10px; align-items: flex-start; }
.mq-e47 .e17-case span b, .mq-e47 .e17-case span small { display: block; }
.mq-e47 .e17-case span small { color: var(--encre-2); font-size: 13px; }

/* ===== LOT B 30-09 · E48, l'éditeur de règles ===== */
.mq-e48 .e48-aide { max-width: 80ch; color: var(--encre-2); margin: 0 0 12px; }
.mq-e48 .e48-groupe h2 { font-size: 15px; margin: 18px 0 6px; }
.mq-e48 .e48-liste { background: var(--surface); border-radius: var(--r-l); box-shadow: var(--ombre-carte); }
.mq-e48 .e48-li { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1.4fr) 130px; gap: 14px; align-items: center; padding: 10px 16px; color: inherit; text-decoration: none; }
.mq-e48 .e48-li + .e48-li { border-top: 1px solid var(--filet); }
.mq-e48 .e48-li:hover { background: var(--surface-2); }
.mq-e48 .e48-li small { display: block; color: var(--encre-2); font-size: 12px; }
.mq-e48 .e48-li code, .mq-e48 .av-sur code { font-family: var(--police-mono); font-size: 12px; overflow-wrap: anywhere; }
.mq-e48 .e48-niv { color: var(--encre-2); font-size: 13px; text-align: right; }
.mq-e48 .e48-prop { color: var(--ambre) !important; font-weight: 600; }
.mq-e48 .e48-carte { background: var(--surface); border-radius: var(--r-l); box-shadow: var(--ombre-carte); padding: 16px 20px; margin: 0 0 14px; max-width: 760px; display: grid; gap: 8px; }
.mq-e48 .e48-carte h2 { font-size: 16px; margin: 0; }
.mq-e48 .e48-vigueur { display: flex; gap: 14px; align-items: baseline; }
.mq-e48 .e48-vigueur span { color: var(--encre-2); }
.mq-e48 .e48-vigueur b { font-size: 24px; }
.mq-e48 .e48-a-decider { border-left: 4px solid var(--ambre); }
.mq-e48 .e48-gestes { display: flex; gap: 8px; flex-wrap: wrap; }
.mq-e48 .e48-hist { margin: 0; padding-left: 18px; display: grid; gap: 6px; }
.mq-e48 .e48-hist small { display: block; color: var(--encre-2); }
.mq-e48 .page-tete .sous, .mq-e48 .s { color: var(--encre-2); }
@container app (max-width: 640px) { .mq-e48 .e48-li { grid-template-columns: minmax(0, 1fr); gap: 2px; } .mq-e48 .e48-niv { text-align: left; } }
/* ===== LOT B 30-09 · E48 : fin ===== */

/* ===== LOT B 30-09 · E20, la fiche de visite préventive ===== */
.mq-e20 .e20-aide { max-width: 90ch; color: var(--encre-2); margin: 0 0 12px; }
.mq-e20 .etiq.e20-brouillon { background: var(--ambre-fond); color: var(--ambre); }
.mq-e20 .etiq.e20-figee { background: var(--vert-fond); color: var(--vert); }
.mq-e20 .e20-bloc { background: var(--surface); border-radius: var(--r-l); box-shadow: var(--ombre-carte); padding: 14px 18px; margin: 0 0 14px; }
.mq-e20 .e20-bloc h2 { font-size: 16px; margin: 0 0 6px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.mq-e20 .e20-sec { display: inline-grid; place-items: center; min-width: 26px; height: 26px; border-radius: 50%; background: var(--marque-pale); color: var(--marque); font-size: 13px; }
.mq-e20 .e20-points { list-style: none; margin: 0; padding: 0; }
.mq-e20 .e20-points li { display: grid; grid-template-columns: 44px minmax(0, 1fr) 220px 200px; gap: 10px; align-items: center; padding: 7px 0; border-top: 1px solid var(--filet); }
.mq-e20 .e20-n { font-family: var(--police-mono); font-size: 13px; color: var(--encre-2); }
.mq-e20 .e20-lib small { display: block; color: var(--encre-2); font-size: 12px; }
.mq-e20 .e20-nat { font-size: 12.5px; color: var(--encre-2); }
.mq-e20 .e20-g { text-align: right; }
.mq-e20 .e20-retire .e20-lib { text-decoration: line-through; color: var(--encre-2); }
.mq-e20 .e20-retire .e20-lib small { text-decoration: none; }
.mq-e20 .e20-sans p { margin: 0 0 8px; }
.mq-e20 .e20-gestes { display: flex; gap: 8px; flex-wrap: wrap; }
.mq-e20 .page-tete .sous, .mq-e20 .s { color: var(--encre-2); }
@container app (max-width: 640px) {
  .mq-e20 .e20-points li { grid-template-columns: 40px minmax(0, 1fr); }
  .mq-e20 .e20-nat, .mq-e20 .e20-g { grid-column: 2; text-align: left; }
}
.mq-e03 .e03-fiche-visite { background: var(--surface); border-radius: var(--r-l); box-shadow: var(--ombre-carte); padding: 14px 18px; margin: 14px 0; }
.mq-e03 .e03-fiche-visite h3 { margin: 0 0 4px; font-size: 15px; }
.mq-e03 .e03-fiche-visite p { margin: 4px 0; }
/* ===== LOT B 30-09 · E20 : fin ===== */
.mq-e46 .av-partage { margin: 8px 0; max-width: 820px; text-align: left; } .mq-e46 .av-partage .filtre { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }


/* R6 (fil PROTOTYPE final, 30/09/2026) : E14, bouton à lien ; E11, « Planifier l'intervention » */
.mq .boutons-wa span.wa-lien { display: flex; align-items: center; justify-content: center; gap: 6px; }
.mq .boutons-wa span.wa-lien .ic { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.mq-planning .e11-planifier { background: var(--surface); border-radius: var(--r-l); box-shadow: var(--ombre-carte); border-left: 4px solid var(--marque); padding: 14px 18px; margin: 0 0 16px; display: grid; gap: 8px; max-width: 820px; }
.mq-planning .e11-planifier h2 { font-size: 16px; margin: 0; }
.mq-planning .e11-pl-quoi { margin: 0; color: var(--encre-2); }
.mq-planning .e11-pl-champs { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
.mq-planning .e11-planifier .aide { margin: 0; display: block; }

/* E33 · Encyclopédie et E29b · Fiche d'une entrée (fil PROTOTYPE final, 30/09/2026) */
.mq-e33 .e33-signal { background: var(--surface); border-radius: var(--r-l); box-shadow: var(--ombre-carte); padding: 12px 16px; margin: 0 0 14px; }
.mq-e33 .e33-signal h2 { font-size: 15px; margin: 0 0 8px; }
.mq-e33 .e33-signal h2 small { font-weight: 400; color: var(--encre-2); font-size: 13px; }
.mq-e33 .e33-signal-cases { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
.mq-e33 .e33-sc { display: grid; gap: 2px; padding: 8px 10px; border-radius: var(--r-m); background: var(--surface-2); color: inherit; text-decoration: none; }
.mq-e33 .e33-sc b { font-size: 20px; }
.mq-e33 .e33-sc span { font-size: 12.5px; color: var(--encre-2); }
.mq-e33 .e33-sc-file { box-shadow: inset 3px 0 0 var(--ambre); }
.mq-e33 .e33-onglets { display: flex; flex-wrap: wrap; gap: 4px; border-bottom: 1px solid var(--filet); margin: 0 0 12px; }
.mq-e33 .e33-onglets a { padding: 8px 12px; color: var(--encre-2); text-decoration: none; font-weight: 600; font-size: 14px; }
.mq-e33 .e33-onglets a.on { color: var(--encre); box-shadow: inset 0 -3px 0 var(--marque); }
.mq-e33 .e33-onglets .n, .mq-e33 h2 .n { font-size: 12px; background: var(--surface-2); border-radius: 99px; padding: 1px 7px; color: var(--encre-2); }
.mq-e33 .e33-filtres { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; margin: 0 0 10px; }
.mq-e33 .e33-case { display: flex; gap: 6px; align-items: center; font-size: 13px; min-height: 36px; }
.mq-e33 .e33-creer { background: var(--surface); border-radius: var(--r-l); box-shadow: var(--ombre-carte); padding: 10px 16px; margin: 0 0 12px; max-width: 820px; }
.mq-e33 .e33-creer summary { cursor: pointer; font-weight: 600; }
.mq-e33 .e33-creer form { display: grid; gap: 8px; margin-top: 10px; }
.mq-e33 .e33-semblables { margin: 0; padding: 8px 10px; background: var(--surface-2); border-radius: var(--r-m); font-size: 13px; color: var(--encre-2); }
.mq-e33 .e33-compte, .mq-e33 .e33-aide { color: var(--encre-2); font-size: 13px; margin: 0 0 10px; max-width: 90ch; }
.mq-e33 .e33-famille h2 { font-size: 15px; margin: 16px 0 6px; }
.mq-e33 .e33-liste { background: var(--surface); border-radius: var(--r-l); box-shadow: var(--ombre-carte); }
.mq-e33 .e33-li { display: grid; grid-template-columns: 84px minmax(0, 1fr) minmax(0, 170px) 130px; gap: 12px; align-items: center; padding: 9px 16px; color: inherit; text-decoration: none; }
.mq-e33 .e33-li + .e33-li { border-top: 1px solid var(--filet); }
.mq-e33 a.e33-li:hover { background: var(--surface-2); }
.mq-e33 .e33-constat { grid-template-columns: minmax(0, 190px) minmax(0, 1fr) minmax(0, 170px) auto; }
.mq-e33 .e33-li small { display: block; color: var(--encre-2); font-size: 12px; }
.mq-e33 .e33-id { font-family: var(--police-mono); font-size: 12px; color: var(--encre-2); }
.mq-e33 .e33-titre .etiq { margin-left: 8px; }
.mq-e33 .e33-denom, .mq-e33 .e33-wa { font-size: 13px; color: var(--encre-2); }
.mq-e33 .etiq.e33-verif { background: var(--ambre-fond); color: var(--ambre); }
.mq-e33 .e33-retard { box-shadow: inset 3px 0 0 var(--alerte); }
.mq-e33 .e33-r { color: var(--alerte); font-weight: 600; }
.mq-e33 .e33-vide { padding: 12px 16px; color: var(--encre-2); }
.mq-e33 .e33-paire { background: var(--surface); border-radius: var(--r-l); box-shadow: var(--ombre-carte); padding: 12px 16px; margin: 0 0 12px; max-width: 900px; display: grid; gap: 8px; }
.mq-e33 .e33-paire-cotes { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.mq-e33 .e33-cote { display: grid; gap: 2px; padding: 8px 10px; border: 1px solid var(--filet); border-radius: var(--r-m); color: inherit; text-decoration: none; }
.mq-e33 .e33-cote small { color: var(--encre-2); font-size: 12px; }
.mq-e33 .e33-raison { margin: 0; font-size: 13px; color: var(--encre-2); }
.mq-e33 .e33-gestes, .mq-e29b .e29b-gestes { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; }
.mq-e29b .e29b-id { margin: 0 0 4px; color: var(--encre-2); font-size: 13px; }
.mq-e29b .etiq.e29b-active { background: var(--vert-fond); color: var(--vert); }
.mq-e29b .etiq.e29b-fusion { background: var(--ardoise-fond); color: var(--ardoise); }
.mq-e29b .e29b-carte { background: var(--surface); border-radius: var(--r-l); box-shadow: var(--ombre-carte); padding: 14px 18px; margin: 0 0 14px; max-width: 820px; }
.mq-e29b .e29b-carte h2 { font-size: 15px; margin: 0 0 8px; }
.mq-e29b .e29b-fusionnee { border-left: 4px solid var(--ardoise); }
.mq-e29b .e29b-champs { display: grid; grid-template-columns: minmax(0, 220px) minmax(0, 1fr); gap: 6px 14px; margin: 0 0 8px; }
.mq-e29b .e29b-champs dt { color: var(--encre-2); font-size: 13px; }
.mq-e29b .e29b-champs dd { margin: 0; }
.mq-e29b .nr { color: var(--encre-3); font-style: italic; }
.mq-e29b .e29b-constats { list-style: none; padding: 0; margin: 0 0 8px; display: grid; gap: 6px; }
.mq-e29b .e29b-constats small { display: block; color: var(--encre-2); font-size: 12px; margin-left: 22px; }
@media (max-width: 900px) {
  .mq-e33 .e33-li, .mq-e33 .e33-constat { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .mq-e33 .e33-paire-cotes, .mq-e29b .e29b-champs { grid-template-columns: minmax(0, 1fr); }
}
.mq-e33 .page-tete .sous, .mq-e33 .av-note, .mq-e33 .aide { color: var(--encre-2); }
.mq-e33 .e33-signal-note { margin: 0 0 8px; font-size: 12.5px; color: var(--encre-2); } .mq-e33 .e33-inactive b { font-weight: 500; } .mq-e33 .etiq.e33-fusion { background: var(--ardoise-fond); color: var(--ardoise); margin-left: 8px; } .mq-e29b .e29b-constats form { display: inline; margin-left: 8px; }

/* ---- MC-R7 : E54 « Équipe TRACE » (archive v29) — règles reprises du dessin ---- */
.v11-erreur-texte { color: var(--rouge); font-size: 13px; margin: 0; }
.v11-erreur .champ { border-color: var(--rouge); }
.v11-inline { display: inline; margin: 0; }
/* V1.1, fil n° 6 — E54 « Équipe TRACE » (V1, ajout du 02/10) : au téléphone, le numéro passe sous la personne ; sous-titres sur deux lignes */
.mq-e54 .rang .s { white-space: normal; }
.mq-e54 .v11-radio { display: flex; gap: 8px; align-items: center; }
.mq-e54 .mq-e54-desactives { margin: 22px 0 8px; font-size: 15px; }
.mq-e54 .rang.mq-e54-inactif .p { color: var(--encre-3); }
@container app (max-width: 640px) {
  .mq-e54 .rang .cellule:nth-child(2) { grid-column: 1 / -1; }
  .mq-e54 .rang .p { white-space: normal; }
}


/* ---- MC-104 · V1.1, E25 « Couverture du monitoring » (archive v29, règles reprises du dessin ; CH128) ---- */
.mq-apres .etiq.v11-n-plateforme { background: var(--info-fond); color: var(--info); }
.v11 .s, .v11 .v11-al-quand { color: var(--encre-2); font-size: 13px; }
.v11 .v11-rangs .rang, .v11 .v11-rangs .rangs-tete { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.4fr) minmax(0, .8fr) minmax(0, 1.3fr); }
.v11 .v11-rangs .cellule { display: grid; gap: 2px; align-content: start; min-width: 0; overflow-wrap: anywhere; }
@container app (max-width: 900px) {
  .v11 .v11-rangs .rang { display: grid; grid-template-columns: minmax(0, 1fr) !important; gap: 4px; }
  .v11 .v11-rangs .rang > .cellule { width: auto; max-width: none; }
  .v11 .v11-rangs .rangs-tete { display: none; }
}
.v11-e25 .v11-e25-resume { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; margin: 4px 0 16px; max-width: 1100px; }
@container app (max-width: 900px) { .v11-e25 .v11-e25-resume { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@container app (max-width: 480px) { .v11-e25 .v11-e25-resume { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.v11-e25 .v11-e25-resume a { display: grid; gap: 2px; padding: 8px 10px; border: 1px solid var(--filet); border-radius: var(--r-m); background: var(--surface); text-decoration: none; color: var(--texte); min-width: 0; }
.v11-e25 .v11-e25-resume b { font-size: 22px; font-variant-numeric: tabular-nums; }
.v11-e25 .v11-e25-resume span { font-size: 12px; color: var(--encre-2); overflow-wrap: anywhere; }
.v11-e25 .v11-e25-resume a.v11-e25-zero b { color: var(--encre-3); }
.v11-e25 .v11-e25-r { margin: 0 0 16px; display: grid; gap: 6px; min-width: 0; max-width: 1100px; }
.v11-e25 .v11-e25-r h2 { font-size: 16px; margin: 0; }
.v11-e25 .v11-e25-r h2 .n, .v11-e25 .v11-e25-zone .n { color: var(--encre-2); font-weight: 400; margin-left: 4px; }
.v11-e25 .v11-e25-tete { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; justify-content: space-between; }
.v11-e25 .v11-e25-zone { font-size: 14px; margin: 6px 0 0; }
.v11-e25 .v11-e25-liste { margin: 0; padding-left: 18px; display: grid; gap: 4px; }
.v11-e25 .v11-e25-liste li, .v11-e25 .v11-e25-ligne { overflow-wrap: anywhere; }
.v11-e25 .v11-e25-ligne { margin: 0; line-height: 1.7; }
.v11-e25 .v11-e25-ligne .v11-e25-sep:last-child { display: none; }
.v11-e25 .s { color: var(--encre-2); }
.v11-e25 .v11-e25-rien { margin: 0; color: var(--encre-2); font-style: italic; }
.v11-e25 .v11-e25-pf .rang, .v11-e25 .v11-e25-pf .rangs-tete { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, .6fr) minmax(0, 2fr); }
.v11-e25 .v11-e25-pf .cellule { white-space: normal; overflow-wrap: anywhere; min-width: 0; }
.v11-e25 .v11-e25-pf .num { font-variant-numeric: tabular-nums; }
.v11-e25 .v11-e25-etat { display: inline-block; font-size: 12px; padding: 1px 6px; margin: 2px 2px 0 0; border-radius: 999px; background: var(--ardoise-fond); color: var(--ardoise); white-space: nowrap; }
.v11-e25 .v11-e25-etat.v11-e25-e-muet { background: var(--muet-fond); color: var(--muet); }
.v11-e25 .v11-e25-etat.v11-e25-e-intermittent { background: var(--muet-fond); color: var(--muet); }
.v11-e25 .v11-e25-lib { display: none; color: var(--encre-2); font-size: 12px; }
@container app (max-width: 900px) {
  .v11-e25 .v11-e25-pf .rang { grid-template-columns: minmax(0, 1fr) !important; gap: 4px; }
  .v11-e25 .v11-e25-pf .rangs-tete { display: none; }
  .v11-e25 .v11-e25-lib { display: inline; }
}
.v11-e25 .v11-e25-pf .rang .cellule { display: block; align-self: center; }
.v11-e25 .v11-e25-pf .etiq { display: inline-block; width: auto; }
.v11-e25 .v11-e25-pf .rang { padding-left: 10px; padding-right: 10px; }
.v11-e25 .v11-e25-pf .rang.v11-e25-zero-rang { color: var(--encre-2); }
.v11-e25 .v11-e25-pli { border-top: 1px solid var(--filet); padding: 6px 0; }
.v11-e25 .v11-e25-pli summary { cursor: pointer; }
.v11-e25 .v11-e25-pli .v11-e25-liste { margin-top: 6px; }

/* ---- MC-107 · V1.1, E06 « Fiche d'un équipement », E07b « Parc par modèle », E03 liste des équipements (archive v29, règles reprises du dessin ; CH112) ---- */
.v11-eqp .v11-eqp-barre { text-decoration: line-through; text-decoration-thickness: 2px; color: var(--encre-2); }
.v11-eqp .v11-eqp-lot { color: var(--encre-2); font-weight: 400; }
.v11-eqp .v11-eqp-etat { background: var(--ardoise-fond); color: var(--ardoise); border-radius: 999px; padding: 2px 8px; font-size: 12px; }
.v11-eqp .v11-eqp-propose, .v11-eqp .v11-eqp-vrm { margin: 10px 0 0; }
.v11-eqp .v11-eqp-motif { margin: 8px 0 0; color: var(--encre-2); }
.v11-eqp .v11-eqp-dl { grid-template-columns: max-content minmax(0, 1fr); }
.v11-eqp .v11-eqp-g { font-weight: 600; margin: 0 0 6px; }
.v11-eqp .v11-eqp-constats { margin: 0; padding-left: 18px; display: grid; gap: 8px; }
.v11-eqp .v11-eqp-constats li, .v11-eqp .panneau p { overflow-wrap: anywhere; }
.v11-eqp-form { display: grid; gap: 10px; max-width: 640px; margin: 14px 0; padding: 14px 16px; background: var(--surface); border: 1px solid var(--filet); border-radius: var(--r-l); }
.v11-eqp-form h2 { font-size: 16px; margin: 0; }
.v11-eqp-form .filtre { display: grid; gap: 4px; }
.v11-eqp-form .champ { width: 100%; max-width: 420px; }
.v11-eqp-form fieldset { border: 1px solid var(--filet); border-radius: var(--r-m); padding: 8px 12px 12px; display: grid; gap: 10px; margin: 0; min-width: 0; }
.v11-eqp-form .v11-gestes, .v11-eqp .v11-gestes { display: flex; flex-wrap: wrap; gap: 8px; }
.v11-e07b .v11-e07b-type { margin: 0 0 14px; display: grid; gap: 6px; max-width: 900px; }
.v11-e07b .v11-e07b-type h2 { font-size: 16px; margin: 0; }
.v11-e07b .v11-e07b-type h2 .n { color: var(--encre-2); font-weight: 400; font-size: 13px; margin-left: 6px; }
.v11-e07b .v11-e07b-rangs .rang, .v11-e07b .v11-e07b-rangs .rangs-tete { grid-template-columns: minmax(0, 3fr) minmax(0, 1fr) minmax(0, 1fr); padding-left: 10px; padding-right: 10px; }
.v11-e07b .v11-e07b-rangs .cellule { white-space: normal; overflow-wrap: anywhere; min-width: 0; }
.v11-e07b .v11-e07b-rangs .num { font-variant-numeric: tabular-nums; }
.v11-e07b .v11-e07b-libres { color: var(--encre-2); font-style: italic; }
.v11-e07b .v11-e07b-liste { margin: 0; padding-left: 18px; display: grid; gap: 6px; max-width: 900px; }
.v11-e07b .v11-e07b-liste li { overflow-wrap: anywhere; }
.v11-e07b .s { color: var(--encre-2); }
.v11-e07b-form { display: grid; gap: 8px; margin: 8px 0; padding: 10px 12px; border: 1px solid var(--filet); border-radius: var(--r-m); background: var(--surface); max-width: 520px; }
.v11-e07b-form .filtre { display: grid; gap: 4px; }
.v11-e07b-form .v11-gestes { display: flex; flex-wrap: wrap; gap: 8px; }
.v11-e03-eqp .v11-eqp-ligne-barree td { color: var(--encre-2); }
.v11-e03-eqp .v11-eqp-ligne-barree td:nth-child(2) a { text-decoration: line-through; }
.v11-eqp .v11-eqp-deux { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0 0 16px; }
.v11-eqp .v11-eqp-deux > .aide { grid-column: 1 / -1; margin: 0; }
@container app (max-width: 700px) { .v11-eqp .v11-eqp-deux { grid-template-columns: minmax(0, 1fr); } }
.v11-eqp .v11-eqp-lu { margin: 2px 0; }
.v11-e07b .v11-e07b-type-lien { font-size: 13px; font-weight: 400; margin-left: 8px; }
.v11-eqp .v11-eqp-deux > form { align-content: start; }

/* ---- MC-110 · V1.1, AV-08 (CH108) : E19, la marque « à planifier d'urgence », le panneau d'E09 (archive v29, règles reprises du dessin) ---- */
/* ---- V1.1 · E19, le calendrier du préventif (AV-08, CH108) ---- */
.v11-e19 .v11-e19-filtres { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: flex-end; margin: 0 0 12px; }
.v11-e19 .v11-e19-filtres .filtre { display: grid; gap: 4px; min-width: 0; }
.v11-e19 .v11-e19-chiffres { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; margin: 0 0 10px; max-width: 1100px; }
@container app (max-width: 900px) { .v11-e19 .v11-e19-chiffres { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@container app (max-width: 480px) { .v11-e19 .v11-e19-chiffres { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.v11-e19 .v11-e19-chiffres > div { display: grid; gap: 2px; padding: 8px 10px; border: 1px solid var(--filet); border-radius: var(--r-m); background: var(--surface); min-width: 0; }
.v11-e19 .v11-e19-chiffres b { font-size: 20px; font-variant-numeric: tabular-nums; }
.v11-e19 .v11-e19-chiffres span { font-size: 12px; color: var(--encre-2); overflow-wrap: anywhere; }
.v11-e19 .v11-e19-chiffres .v11-e19-alerte b, .v11-e19 .v11-e19-chiffres .v11-e19-urgent b { color: var(--rouge); }
.v11-e19 .v11-e19-legende { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 12px; color: var(--encre-2); margin: 0 0 8px; }
.v11-e19 .v11-e19-legende span { display: inline-flex; gap: 4px; align-items: center; }
.v11-e19 .v11-m { display: inline-block; width: 12px; height: 12px; border-radius: 3px; border: 1px solid var(--filet-fort); background: var(--surface); vertical-align: middle; }
.v11-e19 .v11-m-fait { background: var(--vert); border-color: var(--vert); }
.v11-e19 .v11-m-declaree_faite { background: var(--vert-fond); border-color: var(--vert); }
.v11-e19 .v11-m-non_realisee { background: var(--ardoise-fond); border-color: var(--ardoise); border-style: dotted; border-width: 2px; }
.v11-e19 .v11-m-echu { background: var(--rouge); border-color: var(--rouge); }
.v11-e19 .v11-m-a_venir { background: var(--surface); border-color: var(--info); border-style: dashed; }
.v11-e19 .v11-m-courant { outline: 1px solid var(--encre-2); outline-offset: 1px; }
.v11-e19 .v11-e19-frise { display: grid; grid-template-columns: repeat(12, 12px); gap: 3px; align-items: center; }
.v11-e19 .v11-e19-rangs .rang, .v11-e19 .v11-e19-rangs .rangs-tete { grid-template-columns: minmax(0, 1.6fr) minmax(190px, 1fr) minmax(0, 1.4fr) minmax(0, 1fr); padding-left: 10px; padding-right: 10px; }
.v11-e19 .v11-e19-rangs .cellule { white-space: normal; overflow-wrap: anywhere; min-width: 0; display: grid; gap: 2px; align-content: center; }
.v11-e19 .v11-e19-rang-alerte { border-left: 3px solid var(--rouge); }
.v11-e19 .v11-e19-etiq-urgent { background: var(--rouge-fond); color: var(--rouge); }
.v11-e19 .v11-e19-statut { font-weight: 600; }
.v11-e19 .s { color: var(--encre-2); }
.v11-e19 .v11-e19-vide { padding: 12px; color: var(--encre-2); margin: 0; }
@container app (max-width: 900px) {
  .v11-e19 .v11-e19-rangs .rang { grid-template-columns: minmax(0, 1fr) !important; gap: 6px; padding-top: 8px; padding-bottom: 8px; }
  .v11-e19 .v11-e19-rangs .rangs-tete { display: none; }
}
.v11-e19 .v11-e19-rangs .s, .v11-e19 .v11-e19-rangs .p { white-space: normal; overflow: visible; text-overflow: clip; display: block; }
.v11-e19 .v11-m { font-size: 9px; line-height: 10px; text-align: center; color: var(--encre); font-style: normal; font-weight: 700; }
.v11-e19 .v11-m-fait, .v11-e19 .v11-m-echu { color: var(--surface); }
.v11-e19 .v11-e19-lib { display: none; color: var(--encre-2); font-size: 12px; }
@container app (max-width: 900px) {
  .v11-e19 .v11-e19-lib { display: inline; }
  .v11-e19 .v11-e19-frise { grid-template-columns: repeat(12, 18px); }
  .v11-e19 .v11-m { width: 18px; height: 18px; font-size: 11px; line-height: 16px; }
}

/* ---- V1.1 · fin d'AV-08 (CH108 §1.1, §1.3) : la marque « à planifier d'urgence » sur E08 et E09, le compte d'E01 ---- */
.v11-etiq-urgent { display: inline-block; font-size: 11px; font-weight: 600; line-height: 16px; padding: 0 6px; border-radius: var(--r-s, 4px); background: var(--dec-fond); color: var(--dec); white-space: nowrap; vertical-align: 1px; }
.ch-c .v11-case-urgent, .v11-case-urgent { display: block; font-size: 11px; line-height: 14px; margin-top: 2px; color: var(--dec); font-weight: 600; }
.v11-e09ech .v11-e09ech-liste { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 4px; }
.v11-e09ech .v11-e09ech-urgent { margin: 0 0 8px; }
.v11-e09ech .s { color: var(--encre-2); font-size: 13px; }
/* ---- V1.1 · AV-15, l'encyclopédie (CH115) : E28, la rédaction d'E29b, la recherche par code, E50 ---- */
.v11-enc .s, .v11-enc-res .s, .v11-enc-res .mono, .v11-dico .s, .v11-red .s, .v11-dico .vide-etat p { color: var(--encre-2); }
.v11-enc .v11-enc-comptes { display: flex; flex-wrap: wrap; gap: 8px 16px; margin: 0 0 12px; font-size: 13px; }
.v11-enc .v11-enc-form, .mq-e33 .e33-filtres { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: end; margin: 0 0 12px; }
.v11-enc-res { border: 1px solid var(--filet); border-radius: var(--r-m); background: var(--surface); padding: 12px 14px; margin: 0 0 16px; display: grid; gap: 6px; }
.v11-enc-res h3 { font-size: 13px; margin: 6px 0 0; }
.v11-enc-res .v11-enc-res-tete { margin: 0; }
.v11-enc-aussi { display: inline-block; padding: 0 6px; border-radius: var(--r-s); background: var(--surface-3); color: var(--encre); font-family: var(--police-mono); font-size: 12px; }
.v11-enc .v11-enc-rangs .rang, .v11-enc .v11-enc-rangs .rangs-tete { grid-template-columns: minmax(0, 2fr) minmax(0, 1.4fr) minmax(0, 1fr); padding-left: 12px; padding-right: 12px; }
.v11-enc .v11-enc-rangs .s { white-space: normal; overflow: visible; text-overflow: clip; display: block; }
.v11-enc-st-sans { background: var(--surface-3); color: var(--encre-2); }
.v11-enc-st-redigee { background: var(--ambre-fond); color: var(--ambre); }
.v11-enc-st-verifiee { background: var(--vert-fond); color: var(--vert); }
.v11-enc .v11-enc-st { color: var(--encre-2); }
.v11-enc .v11-enc-marque { color: var(--ambre); font-weight: 600; }
.v11-red .v11-red-etapes { margin: 0 0 8px; padding-left: 22px; display: grid; gap: 4px; }
.v11-red h3 { font-size: 13px; margin: 12px 0 4px; }
.v11-red .v11-red-reverifier { color: var(--ambre); font-weight: 600; margin: 0 0 8px; }
.v11-red .v11-red-form { display: grid; gap: 10px; margin: 8px 0; }
.v11-red .v11-red-form fieldset { border: 1px solid var(--filet); border-radius: var(--r-m); padding: 8px 12px 12px; display: grid; gap: 8px; margin: 0; min-width: 0; }
.v11-red .v11-red-form textarea.champ { width: 100%; max-width: 680px; min-height: 64px; }
.v11-red .v11-red-photos, .v11-red .v11-red-choix { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.v11-red .photo { margin: 0; display: grid; gap: 4px; }
.v11-red .photo svg { width: 100%; height: auto; aspect-ratio: 4 / 3; border-radius: var(--r-s); }
.v11-red .photo .ph-fond { fill: var(--surface-3); }
.v11-red .photo .ph-objet { fill: var(--filet-fort); }
.v11-red .photo figcaption { font-size: 12px; color: var(--encre-2); }
.v11-red .v11-red-ph { display: grid; gap: 4px; font-size: 12px; }
.v11-red .v11-gestes { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0; }
.v11-dico .v11-dico-rangs .rang, .v11-dico .v11-dico-rangs .rangs-tete { grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr) minmax(0, 1fr); padding-left: 12px; padding-right: 12px; }
.v11-dico .v11-dico-inactif { color: var(--encre-2); }
.v11-dico .v11-dico-form { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: end; margin: 0 0 12px; }
.v11-dico .seg { margin: 0 0 12px; }
@container app (max-width: 900px) {
  .v11-enc .v11-enc-rangs .rang, .v11-dico .v11-dico-rangs .rang { grid-template-columns: minmax(0, 1fr) !important; gap: 4px; padding-top: 8px; padding-bottom: 8px; }
  .v11-enc .v11-enc-rangs .rangs-tete, .v11-dico .v11-dico-rangs .rangs-tete { display: none; }
}
.v11-enc .etiq.v11-enc-st-sans, .v11-red .etiq.v11-enc-st-sans { background: var(--surface-3); color: var(--encre-2); }
.v11-enc .etiq.v11-enc-st-redigee, .v11-red .etiq.v11-enc-st-redigee { background: var(--ambre-fond); color: var(--ambre); }
.v11-enc .etiq.v11-enc-st-verifiee, .v11-red .etiq.v11-enc-st-verifiee { background: var(--vert-fond); color: var(--vert); }
.v11-enc .v11-enc-rangs .etiq { justify-self: start; }
.v11-red ol.v11-red-etapes { list-style: decimal; }



/* MC-111 · V1.1 AV-18, les réclamations (CH118) : E27, E27b, mention d'E08 et d'E09 — copié de l'archive v29 */
.v11-bandeau { display: flex; gap: 12px; align-items: flex-start; background: var(--info-fond); color: var(--texte); border: 1px solid var(--bordure); border-left: 4px solid var(--info); border-radius: 10px; padding: 12px 14px; margin: 0 0 14px; max-width: 1100px; }
.v11-bandeau > .ic { color: var(--info); flex: none; margin-top: 2px; }
.v11-bandeau-corps { flex: 1 1 auto; min-width: 0; display: grid; gap: 4px; }
.v11-bandeau-corps p { margin: 0; overflow-wrap: anywhere; }
.v11-bandeau .s { color: var(--texte-doux); }
.v11-bandeau-e01 { text-decoration: none; margin: 12px 16px 0; }
.v11-bandeau-e01 span { overflow-wrap: anywhere; }
.v11-bandeau-e01:hover { text-decoration: none; border-left-color: var(--accent); }
.v11-bandeau { flex-wrap: wrap; }
/* ---- V1.1 · AV-18, les réclamations (CH118) : E27, E27b, la mention sur E08 et E09 ---- */
.v11-rec .v11-rec-rangs .rang, .v11-rec .v11-rec-rangs .rangs-tete { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1.2fr) minmax(0, .9fr) minmax(0, 1fr) minmax(0, 1fr); }
.v11-rec .v11-rec-retard { border-left: 3px solid var(--rouge); }
.v11-rec-rouge { color: var(--rouge); font-weight: 600; }
.v11-rec .v11-rec-etat { font-size: 12px; justify-self: start; }
.v11-rec .v11-rec-e-ouverte { background: var(--ambre-fond); color: var(--ambre); }
.v11-rec .v11-rec-e-en_traitement { background: var(--bleu-fond); color: var(--bleu); }
.v11-rec .v11-rec-e-repondue { background: var(--vert-fond); color: var(--vert); }
.v11-rec .v11-rec-e-close { background: var(--ardoise-fond); color: var(--ardoise); }
.v11-rec .v11-rec-form { display: grid; gap: 10px; margin: 0 0 16px; }
.v11-rec .v11-rec-grille { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 16px; }
.v11-rec .v11-rec-form .champ { width: 100%; max-width: 520px; }
.v11-rec .v11-rec-choix { border: 1px solid var(--filet); border-radius: var(--r-m); padding: 8px 12px 12px; display: grid; gap: 8px; margin: 0; min-width: 0; }
.v11-rec .v11-rec-hors { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: end; }
.v11-rec .v11-rec-reponses { margin: 0 0 12px; padding-left: 20px; display: grid; gap: 10px; }
.v11-rec .v11-rec-reponses p { margin: 2px 0; }
.v11-rec .v11-rec-tickets { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 8px; }
.v11-rec .v11-rec-retire > a, .v11-rec .v11-rec-retire { text-decoration: line-through; text-decoration-color: var(--encre-3); }
.v11-rec .v11-rec-retire .s { text-decoration: none; display: inline-block; }
.v11-rec .v11-rec-lier { display: flex; flex-wrap: wrap; gap: 8px; align-items: end; }
.v11-rec .s { color: var(--encre-2); }
.v11-etiq-rec { display: inline-block; font-size: 11px; font-weight: 600; line-height: 16px; padding: 0 6px; border-radius: var(--r-s); background: var(--surface-3); color: var(--encre-2); white-space: nowrap; font-family: var(--police-mono); }
@container app (max-width: 900px) {
  .v11-rec .v11-rec-rangs .rang { grid-template-columns: minmax(0, 1fr) !important; gap: 4px; padding-top: 8px; padding-bottom: 8px; }
  .v11-rec .v11-rec-rangs .rangs-tete { display: none; }
}
@container app (max-width: 600px) { .v11-rec .v11-rec-grille { grid-template-columns: minmax(0, 1fr); } }
.v11-rec .v11-rec-rangs .rang, .v11-rec .v11-rec-rangs .rangs-tete { padding-left: 12px; padding-right: 12px; }
.v11-rec .v11-rec-rangs .s, .v11-rec .v11-rec-rangs .p { white-space: normal; overflow: visible; text-overflow: clip; display: block; }

/* ---- V1.1 · AV-21, le dossier (CH121) : E52, la rubrique d'E08, le bloc d'E09, la section d'E03 ---- */
.v11-ds .v11-ds-action { border: 1px solid var(--filet); border-radius: var(--r-m); background: var(--surface); padding: 10px 14px; margin: 0 0 16px; display: grid; gap: 2px; }
.v11-ds .v11-ds-action p { margin: 0; }
.v11-ds .v11-ds-action-l { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--encre-2); }
.v11-ds .v11-ds-relancer { border-left: 3px solid var(--rouge); }
.v11-ds-rouge { color: var(--rouge); font-weight: 600; }
.v11-ds .etiq.v11-ds-e-ouvert { background: var(--bleu-fond); color: var(--bleu); }
.v11-ds .etiq.v11-ds-e-clos { background: var(--ardoise-fond); color: var(--ardoise); }
.v11-ds .v11-ds-form { display: grid; gap: 10px; margin: 0 0 16px; }
.v11-ds .v11-ds-form .champ, .v11-e09ds .v11-ds-form .champ { width: 100%; max-width: 520px; }
.v11-ds .v11-ds-prop { margin: 0; color: var(--encre); background: var(--bleu-fond); border-radius: var(--r-s); padding: 6px 10px; }
.v11-ds .v11-ds-episodes, .v11-ds .v11-ds-hyp, .v11-ds-liste { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 8px; }
.v11-ds .v11-ds-retire > a, .v11-ds .v11-ds-retire { text-decoration: line-through; text-decoration-color: var(--encre-3); }
.v11-ds .v11-ds-retire .s { text-decoration: none; display: inline-block; }
.v11-ds .etiq.v11-ds-h-ouverte { background: var(--bleu-fond); color: var(--bleu); }
.v11-ds .etiq.v11-ds-h-ecartee { background: var(--ardoise-fond); color: var(--ardoise); }
.v11-ds .etiq.v11-ds-h-confirmee { background: var(--vert-fond); color: var(--vert); }
.v11-ds .v11-ds-chrono { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.v11-ds .v11-ds-chrono li { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 8px; }
.v11-ds .v11-ds-chrono-retire { color: var(--encre-2); }
.v11-ds .s, .v11-e09ds .s, .v11-e08ds .s { color: var(--encre-2); }
.v11-e09ds .v11-ds-form { display: grid; gap: 8px; margin: 8px 0; }
.v11-e08ds { border: 1px solid var(--rouge-filet); border-left: 3px solid var(--rouge); border-radius: var(--r-m); background: var(--surface); padding: 10px 14px; margin: 0 0 14px; }
.v11-e08ds h3 { margin: 0 0 6px; font-size: 14px; color: var(--rouge); }
.v11-e08ds ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
@container app (max-width: 600px) { .v11-ds .v11-ds-chrono li { grid-template-columns: minmax(0, 1fr); gap: 0; } }

/* MC-123 · G-13 : une date ou un identifiant ne se coupe jamais sur deux lignes (E02, E03) */
.ins { white-space: nowrap; }
.mq-liste-sites .rang .ref { white-space: nowrap; }

/* MC-118 : le bloc AV-11 de l'archive v29 (E53, le bloc accès d'E03, E09), repris tel quel du dessin ; les règles des tournées (E42, E37b) y sont aussi, à MC-119 */
/* ---- V1.1 · AV-11, les tournées et les trajets (CH111) : E42, E53, le bloc d'accès d'E03, le bloc d'E09, la carte E37b ---- */
.v11-trj .v11-trj-demo, .v11-trj-e03 .v11-trj-demo { margin: 0 0 12px; padding: 6px 10px; border-radius: var(--r-s); background: var(--ambre-fond); color: var(--encre); }
.v11-trj .v11-trj-chiffres { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 0 0 12px; }
.v11-trj .v11-trj-chiffres small { display: block; color: var(--encre-2); font-size: 11px; }
.v11-trj .v11-trj-equipe { margin: 0 0 10px; display: flex; flex-wrap: wrap; gap: 6px; align-items: baseline; }
.v11-trj .v11-trj-pers { border: 1px solid var(--filet); border-radius: 999px; padding: 1px 8px; font-size: 12px; }
.v11-trj .v11-trj-manque { margin: 0 0 10px; padding: 6px 10px; border-left: 3px solid var(--ambre); background: var(--surface); }
.v11-trj .v11-trj-manque-t { color: var(--ambre); }
.v11-trj .v11-trj-ordre { margin: 0 0 8px; }
.v11-trj .v11-trj-etapes { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 4px; }
.v11-trj .v11-trj-agence { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; padding: 6px 0; }
.v11-trj .v11-trj-agence .v11-trj-troncon { flex-basis: 100%; }
.v11-trj .v11-trj-troncon { display: block; padding-left: 34px; font-size: 12px; border-left: 2px dotted var(--filet-fort); margin-left: 11px; }
.v11-trj .v11-trj-n { flex: none; display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--encre); color: var(--surface); font-size: 12px; font-weight: 600; }
.v11-trj .v11-trj-agence .v11-trj-n { background: var(--surface); border: 2px solid var(--encre); width: 20px; height: 20px; }
.v11-trj .v11-trj-carte { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: start; border: 1px solid var(--filet); border-radius: var(--r-m); background: var(--surface); padding: 8px 10px; }
.v11-trj .v11-trj-corps p { margin: 0; }
.v11-trj .v11-trj-gestes { display: flex; flex-wrap: wrap; gap: 4px; justify-content: flex-end; }
.v11-inline { display: inline; margin: 0; }
.v11-trj-corrige { color: var(--exa); font-weight: 600; }
.v11-trj .v11-trj-ajout { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; margin: 0 0 12px; }
.v11-trj .v11-trj-ajout .champ { max-width: 100%; }
.v11-trj .v11-trj-journal ul, .v11-trj .v11-trj-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.v11-trj .v11-trj-journal h2 { font-size: 14px; margin: 14px 0 6px; }
.v11-trj .v11-trj-form, .v11-trj-e03 .v11-trj-form { display: grid; gap: 10px; margin: 8px 0 14px; }
.v11-trj .v11-trj-champs { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: flex-end; }
.v11-trj .v11-trj-choix { border: 1px solid var(--filet); border-radius: var(--r-m); padding: 8px 12px; margin: 0; display: grid; gap: 6px; }
.v11-trj .v11-trj-ligne { display: flex; gap: 8px; align-items: flex-start; }
.v11-trj .v11-trj-ligne .s { display: block; }
.v11-trj .v11-trj-grise { color: var(--encre-2); }
.v11-trj .s, .v11-trj-e03 .s, .v11-e09trj .s { color: var(--encre-2); }
.v11-trj .v11-trj-bloc { margin: 0 0 18px; }
.v11-trj .v11-trj-bloc h2 { font-size: 15px; margin: 0 0 8px; }
.v11-trj .v11-trj-agences .rangs-tete, .v11-trj .v11-trj-agences .rang { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, .6fr) minmax(0, .8fr) auto; }
.v11-trj .v11-trj-table { overflow-x: auto; margin: 0 0 10px; }
.v11-trj .v11-trj-table table { border-collapse: collapse; min-width: 320px; font-size: 13px; }
.v11-trj .v11-trj-table th, .v11-trj .v11-trj-table td { border-bottom: 1px solid var(--filet); padding: 4px 12px 4px 0; text-align: left; }
.v11-trj .v11-trj-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.v11-trj .v11-trj-plafond { margin-right: 12px; }
.v11-trj .v11-trj-vitesses .champ { width: 90px; }
.v11-trj-e03 { margin-top: 8px; border-top: 1px solid var(--filet); padding-top: 8px; }
.v11-trj-e03 .v11-trj-e03-gestes { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0; }
.v11-trj-e03 .champ { width: 100%; }
.v11-trj-e03 h4 { margin: 0; font-size: 13px; }
.v11-e09trj .v11-trj-jh { margin: 6px 0; }
.v11c .v11c-tournee { fill: none; stroke: var(--texte); stroke-width: 3; stroke-dasharray: 4 3; vector-effect: non-scaling-stroke; }
.v11c .v11c-lasso { fill: none; stroke: var(--accent); stroke-width: 2; stroke-dasharray: 6 4; vector-effect: non-scaling-stroke; }
.v11c .v11c-dans-lasso .v11c-disque { stroke: var(--accent); stroke-width: 2; vector-effect: non-scaling-stroke; }
.v11c .v11c-etape { fill: var(--texte); font-weight: 700; paint-order: stroke; stroke: var(--surface); stroke-width: 3; vector-effect: non-scaling-stroke; }
.v11c .v11c-trj { margin: 0 0 12px; }
.v11c .v11c-trj h2 { font-size: 14px; margin: 0 0 6px; }
.v11c .v11c-trj-etapes { margin: 0 0 6px; padding-left: 20px; }
@container app (max-width: 640px) {
  .v11-trj .v11-trj-chiffres { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .v11-trj .v11-trj-carte { grid-template-columns: auto minmax(0, 1fr); }
  .v11-trj .v11-trj-gestes { grid-column: 1 / -1; justify-content: flex-start; }
  .v11-trj .v11-trj-agences .rangs-tete, .v11-trj .v11-trj-agences .rang { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto auto; }
}
.v11-trj .page-tete .sous { color: var(--encre-2); }
.v11-trj .av-note { font-size: 12px; color: var(--encre-2); margin: 12px 0 0; }
.v11-trj .etiq.v11-trj-e-brouillon { background: var(--ambre-fond); color: var(--ambre); }
.v11-trj .etiq.v11-trj-e-validee { background: var(--vert-fond); color: var(--vert); }

/* ---- MC-120 · V1.1, AV-07 les contrats (CH107) : E21, E22 ; marques sur E03, E08, E09 (archive v29, règles reprises du dessin telles quelles) ---- */
.v11-ctr .s, .v11-e03ctr .s, .v11-e09delai .s { color: var(--encre-2); }
.v11-ctr .page-tete .sous { color: var(--encre-2); }
.v11-ctr .av-note, .v11-e09delai .av-note { font-size: 12px; color: var(--encre-2); margin: 12px 0 0; }
.v11-ctr .barre-outils { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; }
.v11-ctr .v11-ctr-rangs .rang, .v11-ctr .v11-ctr-rangs .rangs-tete { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1.2fr) minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, .6fr); padding-left: 12px; padding-right: 12px; }
.v11-ctr .v11-ctr-rangs .cellule { display: grid; gap: 2px; align-content: start; min-width: 0; }
.v11-ctr .v11-ctr-rangs .s, .v11-ctr .v11-ctr-rangs .p, .v11-ctr .v11-ctr-sites .s, .v11-ctr .v11-ctr-sites .p { white-space: normal; overflow: visible; text-overflow: clip; display: block; }
.v11-ctr .v11-ctr-r-renouveler { border-left: 3px solid var(--ambre); }
.v11-ctr .v11-ctr-r-preavis { border-left: 3px solid var(--rouge); }
.v11-ctr .etiq.v11-ctr-etat, .v11-e03ctr .etiq.v11-ctr-etat { font-size: 12px; justify-self: start; }
.v11-ctr-e-en_cours { background: var(--vert-fond); color: var(--vert); }
.v11-ctr-e-a_renouveler { background: var(--ambre-fond); color: var(--ambre); }
.v11-ctr-e-termine, .v11-ctr-e-resilie { background: var(--ardoise-fond); color: var(--ardoise); }
.etiq.v11-ctr-preavis { font-size: 12px; justify-self: start; background: var(--rouge-fond); color: var(--rouge); }
.v11-ctr .puce.v11-ctr-puce-preavis { background: var(--rouge-fond); color: var(--rouge); }
.v11-ctr .puce.v11-ctr-puce-renouveler { background: var(--ambre-fond); color: var(--ambre); }
.v11-ctr-au-dela { color: var(--encre); font-weight: 600; }
.v11-ctr-rouge { color: var(--rouge); font-weight: 600; }
.v11-ctr-ambre { color: var(--ambre); font-weight: 600; }
.v11-ctr .v11-ctr-zero { color: var(--encre-2); }
.v11-ctr .v11-ctr-vide { color: var(--encre-3); font-style: italic; }
.v11-ctr .v11-ctr-cv dd small { display: block; color: var(--encre-2); }
.v11-ctr .v11-ctr-annees { margin: 0 0 6px; flex-wrap: wrap; }
.v11-ctr .v11-ctr-total { margin: 6px 0 10px; }
.v11-ctr .v11-ctr-sites .rang, .v11-ctr .v11-ctr-sites .rangs-tete { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, .9fr); padding-left: 12px; padding-right: 12px; }
.v11-ctr .v11-ctr-sites .cellule { display: grid; gap: 2px; align-content: start; min-width: 0; }
.v11-ctr .v11-ctr-detache { opacity: .7; }
.v11-ctr .v11-ctr-mesure { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px; margin: 8px 0; }
.v11-ctr .v11-ctr-mesure > div { display: grid; gap: 2px; padding: 8px 10px; border: 1px solid var(--filet); border-radius: var(--r-m); }
.v11-ctr .v11-ctr-mesure b { font-size: 20px; font-variant-numeric: tabular-nums; }
.v11-ctr .v11-ctr-mesure span { font-size: 12px; color: var(--encre-2); }
.v11-ctr .v11-ctr-mesure .v11-ctr-a-part { background: var(--surface-2); }
.v11-ctr .v11-ctr-detail summary { cursor: pointer; color: var(--lien); margin: 4px 0; }
.v11-ctr .v11-ctr-journal { margin: 0 0 8px; padding-left: 18px; display: grid; gap: 8px; font-size: 13px; }
.v11-ctr .v11-ctr-journal p { margin: 0; }
.v11-ctr .v11-ctr-journal ul { margin: 2px 0 0; padding-left: 16px; }
.v11-ctr .v11-ctr-journal s { color: var(--encre-2); }
.v11-ctr .v11-ctr-dossier { margin-bottom: 12px; }
.v11-ctr .v11-ctr-form { display: grid; gap: 12px; margin: 0 0 16px; }
.v11-ctr .v11-ctr-grille { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 16px; border: 1px solid var(--filet); border-radius: var(--r-m); padding: 8px 12px 12px; margin: 0; min-width: 0; }
.v11-ctr .v11-ctr-grille > legend { font-weight: 600; padding: 0 4px; }
.v11-ctr .v11-ctr-oui-non { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: center; min-width: 0; }
.v11-ctr .v11-ctr-oui-non > legend { font-size: 13px; color: var(--encre-2); padding: 0; margin-bottom: 4px; width: 100%; }
.v11-ctr .v11-ctr-form .champ { width: 100%; max-width: 360px; }
.v11-etiq-delai { display: inline-block; font-size: 11px; font-weight: 600; line-height: 16px; padding: 0 6px; border-radius: var(--r-s, 4px); white-space: nowrap; vertical-align: 1px; }
.v11-delai-bientot { background: var(--ambre-fond); color: var(--ambre); }
.v11-delai-depasse { background: var(--rouge-fond); color: var(--rouge); }
.v11-e09delai .cv { margin: 6px 0; }
.v11-e03ctr { margin-top: 6px; border-top: 1px solid var(--filet); padding-top: 6px; }
.v11-e03ctr dd small { display: block; color: var(--encre-2); }
@container app (max-width: 900px) {
  .v11-ctr .v11-ctr-rangs .rang { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; gap: 6px 12px; padding-top: 8px; padding-bottom: 8px; }
  .v11-ctr .v11-ctr-rangs .rangs-tete { display: none; }
}
@container app (max-width: 640px) {
  .v11-ctr .v11-ctr-rangs .rang { grid-template-columns: minmax(0, 1fr) !important; }
  .v11-ctr .v11-ctr-sites .rang { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 4px 10px; padding-top: 8px; padding-bottom: 8px; }
  .v11-ctr .v11-ctr-sites .rangs-tete { display: none; }
  .v11-ctr .v11-ctr-grille { grid-template-columns: minmax(0, 1fr); }
}
.v11-ctr .vide-etat p { color: var(--encre-2); }

/* ---- MC-R17 · G-23 : les règles `.v11 …` de la feuille de l'archive v47 absentes de cette feuille (alertes en cartes, E23) ---- */
.mq-apres .etiq.v11-n-silence { background: var(--muet-fond); color: var(--muet); }
.mq-apres .etiq.v11-n-alarme { background: var(--rouge-fond); color: var(--rouge); }
.mq-apres .etiq.v11-hs { background: var(--ardoise-fond); color: var(--ardoise); }
.v11 .v11-onglets { margin: 0 0 14px; }
.v11 .v11-liste { display: grid; gap: 10px; max-width: 1100px; margin: 0 0 12px; }
.v11 .v11-al { background: var(--surface); border-radius: var(--r-l); box-shadow: var(--ombre-carte); padding: 12px 16px; display: grid; gap: 6px; border-left: 4px solid var(--filet-fort); }
.v11 .v11-al.v11-n-silence { border-left-color: var(--muet); }
.v11 .v11-al.v11-n-alarme { border-left-color: var(--rouge); }
.v11 .v11-al.v11-al-calme { border-left-color: var(--filet-fort); }
.v11 .v11-al-tete { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: baseline; }
.v11 .v11-al-site { color: var(--encre); }
.v11 .v11-al p { margin: 0; }
.v11 .v11-al-fait { overflow-wrap: anywhere; }
.v11 q.v11-libelle { font-family: var(--police-mono); font-size: 13px; quotes: "« " " »"; overflow-wrap: anywhere; }
.v11 .v11-gelees summary { cursor: pointer; color: var(--encre-2); font-size: 13px; }
.v11 .v11-gelees ul { margin: 6px 0; padding-left: 18px; }
.v11 .v11-gestes { display: flex; flex-wrap: wrap; gap: 8px; }
.v11 .v11-note { color: var(--encre-2); font-size: 13px; max-width: 900px; }
.v11 .v11-vide { display: flex; gap: 10px; align-items: flex-start; background: var(--vert-fond); color: var(--vert); border-radius: var(--r-l); padding: 12px 16px; max-width: 900px; margin: 0 0 12px; }
.v11 .v11-vide p { margin: 0; color: var(--encre); }
.v11 .v11-sort { font-weight: 600; }
.v11 .v11-sort-ouverte { color: var(--rouge); }
.v11 .v11-sort-resolue { color: var(--vert); }
.v11 .v11-sort-ticket { color: var(--lien); }
.v11 .v11-sort-ecartee { color: var(--ardoise); }
.v11 .v11-carte { background: var(--surface); border-radius: var(--r-l); box-shadow: var(--ombre-carte); padding: 14px 18px; margin: 0 0 14px; max-width: 900px; }
.v11 .v11-carte h2 { font-size: 15px; margin: 0 0 8px; }
.v11 .v11-carte h3 { font-size: 14px; margin: 12px 0 6px; }
.v11 .v11-carte p { margin: 0 0 6px; }
.v11 .v11-emails { background: var(--ambre-fond); color: var(--encre); border-radius: var(--r-m); padding: 8px 10px; }
.v11 .v11-recap-cases { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; margin: 10px 0; }
.v11 .v11-recap-cases > * { display: grid; gap: 2px; padding: 8px 10px; border: 1px solid var(--filet); border-radius: var(--r-m); color: inherit; text-decoration: none; }
.v11 .v11-recap-cases b { font-size: 22px; font-variant-numeric: tabular-nums; }
.v11 .v11-recap-cases span { font-size: 13px; color: var(--encre-2); }
.v11 .v11-recap-fort { border-color: var(--rouge-filet); background: var(--rouge-fond); }
.v11 .v11-recap-liste { list-style: none; padding: 0; margin: 0 0 8px; display: grid; gap: 4px; }
.v11 .v11-ecarter fieldset { border: 0; padding: 0; margin: 0 0 10px; display: grid; gap: 6px; }
.v11 .v11-ecarter legend { font-weight: 600; margin-bottom: 4px; }
.v11 .v11-radio { display: flex; gap: 8px; align-items: center; }
.v11 .v11-ecarter textarea { width: 100%; max-width: 560px; }
.v11 .v11-fait { display: grid; gap: 4px; }
.v11 .v11-fait p { margin: 0; overflow-wrap: anywhere; }
.v11 .v11-fait-libelle small { color: var(--encre-2); font-size: 12px; margin-left: 6px; }
.v11 .v11-occ { margin: 0; padding-left: 22px; display: grid; gap: 2px; font-variant-numeric: tabular-nums; }
.v11 .v11-occ li span + span { margin-left: 10px; }
.v11 .v11-sites, .v11 .v11-vie { margin: 0; padding-left: 18px; display: grid; gap: 4px; }
.v11-enligne { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 2px 0; font-size: 13px; }
.v11-enligne li:not(:last-child)::after { content: "·"; margin: 0 6px; color: var(--texte-doux); }
.v11 .v11-fait { border-left: 4px solid var(--filet-fort); }
.v11 .v11-fait.v11-n-silence { border-left-color: var(--muet); }
.v11 .v11-fait.v11-n-alarme { border-left-color: var(--rouge); }
.v11 .v11-fait.v11-n-plateforme { border-left-color: var(--info); }
.v11 .v11-suggestion { margin: 0; font-size: 13px; color: var(--encre-2); background: var(--surface-2); border-radius: var(--r-m); padding: 6px 8px; overflow-wrap: anywhere; }
.v11 .v11-exc { border-left-color: var(--ardoise); }
.v11 .v11-exc-proposee { border-left-color: var(--ambre-vif); }
.mq-apres .etiq.v11-exc-statut { background: var(--ardoise-fond); color: var(--ardoise); }
.v11 .v11-traiter .v11-issue { border: 1px solid var(--filet); border-radius: var(--r-m); padding: 8px 12px; margin: 0 0 10px; display: grid; gap: 6px; }
.v11 .v11-traiter legend { padding: 0 4px; font-weight: 600; }
.v11 .v11-choix { display: grid; gap: 4px; }
.v11 .v11-choix .v11-radio { align-items: baseline; overflow-wrap: anywhere; }
.v11 .v11-traiter textarea { width: 100%; max-width: 560px; }
.v11-exc-site { margin: 6px 0 0; font-size: 13px; }
ul.v11-exc-site { padding-left: 18px; display: grid; gap: 2px; }
.v11 .v11-revenue { background: var(--ambre-fond); color: var(--encre); }
.v11 .v11-exc-compte { background: var(--surface-2); border-radius: var(--r-m); padding: 8px 10px; margin: 0; }
.v11 .v11-parts .rang, .v11 .v11-parts .rangs-tete { grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)); }
.v11 .v11-choix .v11-radio { display: block; }
.v11 .v11-choix .v11-radio input { margin-right: 6px; }
.v11 .v11-traiter p.aide { display: block; }
.v11c [data-etat="alarme"] { --sit: var(--carte-urgence); }
.v11c [data-etat="ticket"] { --sit: var(--carte-ticket-ouvert); }
.v11c [data-etat="intervention"] { --sit: var(--carte-cat-1); }
.v11c [data-etat="ras"] { --sit: var(--carte-rien-a-signaler); }
.v11c [data-etat="nonbranche"] { --sit: var(--carte-inconnu); }
.v11c [data-etat="sorti"], .v11c .v11c-sorti { --sit: var(--carte-estompe); }
.v11c .v11c-cadre { display: grid; gap: 14px; max-width: 1180px; }
.v11c .v11c-cartes { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: 10px; background: var(--carte-mer); border: 1px solid var(--filet); border-radius: var(--r-l); padding: 10px; position: relative; }
.v11c .v11c-cartes > .v11c-plateforme, .v11c .v11c-cartes > .v11c-bandeau-temps { grid-column: 1 / -1; }
.v11c .v11c-vue { margin: 0; display: grid; gap: 4px; min-width: 0; }
.v11c .v11c-vue figcaption { font-size: 12px; color: var(--encre-2); }
.v11c .v11c-vue svg { width: 100%; height: auto; max-height: 520px; display: block; }
.v11c .v11c-terre { fill: var(--carte-terre); stroke: var(--carte-cote); stroke-width: 1.2; }
.v11c .v11c-terre-tana { stroke-width: .12; }
.v11c .v11c-cadre-tana { fill: none; stroke: var(--carte-repere); stroke-width: 2; stroke-dasharray: 6 5; }
.v11c .v11c-disque { fill: var(--sit); stroke: var(--surface); stroke-width: 1.6; }
.v11c .v11c-pt-tana .v11c-disque { stroke-width: .18; }
.v11c .v11c-sorti .v11c-disque { fill: var(--surface); stroke: var(--carte-estompe); stroke-width: 2.4; opacity: .85; }
.v11c .v11c-pt-tana.v11c-sorti .v11c-disque { stroke-width: .3; }
.v11c .v11c-carre { stroke: var(--surface); stroke-width: 1; }
.v11c .v11c-pt-tana .v11c-carre { stroke-width: .12; }
.v11c .v11c-carre[data-nature="alarme"] { fill: var(--texte); }
.v11c .v11c-carre[data-nature="silence"] { fill: var(--surface); stroke: var(--carte-monitoring-muet); stroke-width: 2.4; }
.v11c .v11c-pt-tana .v11c-carre[data-nature="silence"] { stroke-width: .3; }
.v11c .v11c-anneau { fill: none; stroke: var(--carte-selection); stroke-width: 2.4; }
.v11c .v11c-pt-tana .v11c-anneau { stroke-width: .3; }
.v11c .v11c-plateforme { display: flex; gap: 10px; align-items: flex-start; background: var(--info-fond); border-left: 4px solid var(--info); border-radius: var(--r-m); padding: 8px 10px; color: var(--encre); text-decoration: none; }
.v11c .v11c-plateforme .ic { color: var(--info); flex: none; margin-top: 2px; }
.v11c .v11c-plateforme span { display: grid; gap: 2px; min-width: 0; overflow-wrap: anywhere; }
.v11c .v11c-plateforme small { color: var(--encre-2); font-size: 12px; }
.v11c .v11c-bandeau-temps { margin: 0; font-weight: 600; font-size: 13px; }
.v11c .v11c-volet { background: var(--surface); border-radius: var(--r-l); box-shadow: var(--ombre-carte); padding: 12px 14px; display: grid; gap: 10px; min-width: 0; }
.v11c .v11c-volet h2 { font-size: 15px; margin: 0; }
.v11c .v11c-onglets { display: flex; flex-wrap: wrap; }
.v11c .v11c-jour { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; }
.v11c .v11c-temps, .v11c .v11c-legende, .v11c .v11c-vignette { display: grid; gap: 8px; min-width: 0; }
.v11c .v11c-ligne { border-top: 1px solid var(--filet); padding-top: 6px; display: grid; gap: 2px; min-width: 0; }
.v11c .v11c-ligne p { margin: 0; overflow-wrap: anywhere; }
.v11c .v11c-ligne-plateforme { border-left: 4px solid var(--info); padding-left: 8px; }
.v11c .v11c-al { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; font-size: 13px; }
.v11c .v11c-al li { padding-left: 14px; position: relative; overflow-wrap: anywhere; }
.v11c .v11c-al li::before { content: ""; position: absolute; left: 0; top: .45em; width: 8px; height: 8px; background: var(--texte); }
.v11c .v11c-al li[data-nature="silence"]::before { background: var(--surface); border: 2px solid var(--carte-monitoring-muet); width: 4px; height: 4px; }
.v11c .v11c-cles { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: 13px; }
.v11c .v11c-cles li { display: flex; gap: 6px; align-items: center; }
.v11c .v11c-cles svg { width: 18px; height: 18px; flex: none; }
.v11c .v11c-nouveau { font-weight: 600; }
.v11c .v11c-vide p { margin: 0; }
.v11c .v11c-vig-tete { margin: 0; display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: baseline; overflow-wrap: anywhere; }
.v11c .v11c-fermer { margin-left: auto; font-size: 13px; }
.v11c .v11c-vignette dl.cv { margin: 0; }
.v11c .v11c-vignette dd { overflow-wrap: anywhere; }
.v11c .v11c-pied { margin: 0; }
.v11-e26 .v11-e26-fenetre { margin: 6px 0 8px; font-size: 13px; color: var(--encre-2); }
.v11-e26 .v11-e26-rubriques { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 0 0 14px; font-size: 13px; }
.v11-e26 .v11-e26-r { margin: 0 0 14px; display: grid; gap: 8px; min-width: 0; }
.v11-e26 .v11-e26-r h2 { font-size: 16px; margin: 0; }
.v11-e26 .v11-e26-r h3 { font-size: 14px; margin: 6px 0 0; }
.v11-e26 .v11-e26-trois { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.v11-e26 .v11-e26-pas-assez b { font-size: 16px; color: var(--encre-2); }
.v11-e26 .v11-e26-non { color: var(--encre-2); font-style: italic; }
.v11-e26 .v11-e26-sav .rang, .v11-e26 .v11-e26-sav .rangs-tete { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr) minmax(0, 1.3fr) minmax(0, 1.1fr); }
.v11-e26 .v11-e26-pers .rang, .v11-e26 .v11-e26-pers .rangs-tete { grid-template-columns: minmax(0, 1.3fr) repeat(5, minmax(0, 1fr)); }
.v11-e26 .v11-e26-parts .rang, .v11-e26 .v11-e26-parts .rangs-tete { grid-template-columns: minmax(0, 1.3fr) repeat(3, minmax(0, 1fr)); }
.v11-e26 .rang .num { font-variant-numeric: tabular-nums; }
.v11-e26 .v11-e26-lib { display: none; color: var(--encre-2); font-size: 12px; }
.v11-e26 .v11-e26-chiffres { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 8px; }
.v11-e26 .v11-e26-chiffres > div { display: grid; gap: 2px; padding: 8px 10px; border: 1px solid var(--filet); border-radius: var(--r-m); min-width: 0; }
.v11-e26 .v11-e26-chiffres b { font-size: 22px; font-variant-numeric: tabular-nums; }
.v11-e26 .v11-e26-chiffres span { font-size: 13px; color: var(--encre-2); overflow-wrap: anywhere; }
.v11-e26 .v11-e26-defile { overflow-x: auto; max-width: 100%; }
.v11-e26 .v11-e26-bilan { border-collapse: collapse; font-size: 13px; font-variant-numeric: tabular-nums; min-width: 760px; }
.v11-e26 .v11-e26-bilan th, .v11-e26 .v11-e26-bilan td { padding: 4px 8px; border-bottom: 1px solid var(--filet); text-align: right; }
.v11-e26 .v11-e26-bilan th:first-child, .v11-e26 .v11-e26-bilan thead th { text-align: left; }
.v11-e26 .v11-e26-def { margin: 0; padding-left: 18px; display: grid; gap: 4px; }
.v11-e26 .page-tete .actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.v11-e26 .rang .cellule { white-space: normal; overflow-wrap: anywhere; min-width: 0; }
.v11-e26 .v11-e26-val { display: block; }
.v11-e26 .v11-e26-val + .v11-e26-val { margin-top: 4px; }
.v11-e26 .v11-e26-mois { display: flex; gap: 6px; align-items: flex-end; }
.v11-e26 .v11-e26-mois .champ { min-width: 0; width: 150px; }
.v11-e26 .v11-e26-bilan td.v11-e26-vide { text-align: left; color: var(--encre-3); font-style: italic; }
.v11-e26 .v11-e26-sav .cellule, .v11-e26 .v11-e26-sav .cellule * { white-space: normal; overflow-wrap: anywhere; }
.v11-e26 .v11-e26-sav .cellule { overflow: hidden; }
.etat.v11-sorti { background: var(--ardoise-fond); color: var(--ardoise); border-radius: 999px; padding: 2px 8px; font-size: 12px; white-space: nowrap; }
.v11-sorti-bandeau { border-left-color: var(--ardoise); background: var(--ardoise-fond); margin: 10px 0 0; }
.v11-sortie-form { display: grid; gap: 10px; max-width: 640px; margin: 14px 0 0; padding: 14px 16px; background: var(--surface); border: 1px solid var(--filet); border-radius: var(--r-l); }
.v11-sortie-form h2 { font-size: 16px; margin: 0; }
.v11-sortie-form .filtre { display: grid; gap: 4px; }
.v11-sortie-form .champ { width: 100%; max-width: 360px; }
.v11-sortie-effets ul { margin: 4px 0; padding-left: 18px; display: grid; gap: 3px; }
.v11-sortie-effets p { margin: 0; }
.v11-sortie-form .v11-gestes { display: flex; flex-wrap: wrap; gap: 8px; }
.v11-sorti-aide { color: var(--encre-2); font-size: 12px; }
.v11-e03-props { margin: 8px 0 0; padding: 8px 12px; border: 1px dashed var(--filet-fort); border-radius: var(--r-m); }
.v11-e03-props p, .v11-e03-props ul { margin: 0; }
.v11-e03-props ul { padding-left: 18px; }
.v11-e47-eqp .v11-e47-site { border-top: 1px solid var(--filet); padding: 8px 0 4px; display: grid; gap: 6px; }
.v11-e47-eqp h3 { font-size: 14px; margin: 0; }
.v11-e47-eqp .v11-e47-liste, .v11-e47-eqp .v11-e47-docs { margin: 0; padding-left: 0; list-style: none; display: grid; gap: 4px; }
.v11-e47-eqp .v11-e47-liste li { overflow-wrap: anywhere; }
.v11-e47-eqp .v11-e47-docs-t { margin: 4px 0 0; }
.v11-e47-eqp .s { color: var(--encre-2); }
.v11-e15p .v11-e15p-liste { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.v11-e15p .v11-e15p-liste li { display: grid; gap: 6px; border-top: 1px solid var(--filet); padding-top: 8px; }
.v11-e15p p { margin: 0; overflow-wrap: anywhere; }
.v11-e15p .filtre { display: grid; gap: 4px; max-width: 420px; }
.v11-e15p .v11-gestes { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.v11-e15p .s { color: var(--encre-2); }
.v11-e47-eqp .v11-e47-docs li { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; }
.v11-e47-eqp .v11-e47-date { width: 160px; max-width: 100%; }
.v11-e47-eqp .v11-eqp-form h3 { font-size: 14px; margin: 0; }
.v11-ch-lien { display: block; margin: 6px 8px 0; font-size: 12px; font-weight: 600; color: var(--dec); text-decoration: none; }
.v11-ch-lien:hover { text-decoration: underline; }
.mq-e45 .v11-prod-seg { margin: 0 0 10px; }
.mq-e45 .v11-prod-trim, .v11 .v11-prod-trim { font-size: 11px; }
.mq-e46 .rpp-jours.v11-trim { gap: 1px; }
.mq-e46 .rpp-jours.v11-trim .rpp-j small { visibility: hidden; white-space: nowrap; }
.mq-e46 .rpp-jours.v11-trim .rpp-j.v11-j1 small { visibility: visible; }
.mq-e46 .v11-trois { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.mq-e46 .v11-trois-m { display: grid; gap: 2px; padding: 8px 10px; border: 1px solid var(--filet); border-radius: var(--r-s); }
.mq-e46 .v11-trois-m small { color: var(--encre-2); }
.mq-e46 .v11-trois-m .s { font-size: 11px; color: var(--encre-2); }
.mq-e46 .v11-trois-m.rpp-incomplet { border-style: dashed; }
.v11 .v11-prod-attente { color: var(--ambre); }
.v11 .v11-prod-form { display: grid; gap: 8px; margin: 8px 0; }
.v11 .v11-prod-form fieldset { border: 1px solid var(--filet); border-radius: var(--r-m); padding: 8px 12px; display: flex; flex-wrap: wrap; gap: 8px 16px; margin: 0; }
@container app (max-width: 640px) {
  .mq-e46 .rpp { padding: 18px 16px; }
  .mq-e46 .rpp-j small { font-size: 8px; }
  .mq-e46 .rpp-j:nth-child(even) small { visibility: hidden; }
  .mq-e46 .rpp-mois:not(.v11-quatre) .rpp-m em { display: none; }
}
@container app (min-width: 901px) {
  .v11 .v11-al { grid-template-columns: minmax(0, 1fr) auto; column-gap: 16px; }
  .v11 .v11-al > * { grid-column: 1; }
  .v11 .v11-al > .v11-gestes { grid-column: 2; grid-row: 1 / span 3; align-self: center; flex-direction: column; align-items: stretch; }
}
@container app (max-width: 900px) {
  .v11 .v11-rangs .rang { display: grid; grid-template-columns: minmax(0, 1fr) !important; gap: 4px; }
  .v11 .v11-rangs .rang > .cellule { width: auto; max-width: none; }
  .v11 .v11-rangs .rangs-tete { display: none; }
  .v11-bandeau { flex-wrap: wrap; }
}
@container app (min-width: 901px) { .v11c .v11c-cadre { grid-template-columns: minmax(0, 1fr) 360px; align-items: start; } }
@container app (max-width: 640px) { .v11c .v11c-cartes { grid-template-columns: minmax(0, 1fr); } }
@container app (max-width: 900px) { .v11-e26 .v11-e26-trois { grid-template-columns: minmax(0, 1fr); } }
@container app (max-width: 900px) { .v11-e26 .v11-e26-lib { display: inline; } }
@container app (max-width: 900px) { .v11-e26 .rang .cellule.num { display: flex; gap: 6px; align-items: baseline; } .v11-e26 .v11-e26-pers .rang, .v11-e26 .v11-e26-parts .rang { gap: 0; } }
@container app (max-width: 640px) {
  .v11-e26 .v11-e26-defile { overflow: visible; }
  .v11-e26 .v11-e26-bilan { min-width: 0; width: 100%; display: block; }
  .v11-e26 .v11-e26-bilan thead { display: none; }
  .v11-e26 .v11-e26-bilan tbody { display: grid; gap: 8px; }
  .v11-e26 .v11-e26-bilan tr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2px 10px; border-bottom: 1px solid var(--filet); padding-bottom: 6px; }
  .v11-e26 .v11-e26-bilan th { grid-column: 1 / -1; border: 0; }
  .v11-e26 .v11-e26-bilan td { border: 0; text-align: left; padding: 0; overflow-wrap: anywhere; }
  .v11-e26 .v11-e26-bilan td::before { content: attr(data-l) " : "; color: var(--encre-2); }
}
@container app (max-width: 900px) { .v11-e26 .v11-e26-sav .rang, .v11-e26 .v11-e26-sav .rangs-tete { grid-template-columns: minmax(0, 1fr) !important; } .v11-e26 .v11-e26-sav .rangs-tete { display: none; } }
@container app (max-width: 640px) { .v11-e26 .v11-e26-bilan td.v11-e26-vide::before { content: none; } .v11-e26 .v11-e26-bilan td.v11-e26-vide { grid-column: 1 / -1; } }
@container app (max-width: 600px) { .mq-e46 .v11-trois { grid-template-columns: minmax(0, 1fr); } }