/* Portage des maquettes des écrans (3-maquettes : e08, e09, e03 ; passe 2 ter : e02, e10, e11, e36-e38-e39, e00, administration ; passe 4 : e12, e14 — trace.css, 27-28/09/2026).
   Généré par porter_e08.py depuis les règles réellement utilisées par ces maquettes (sauf les lignes, reprises de « Retenu C ») : ne pas éditer à la main. */
.mq { margin: 0px; background: var(--fond); color: var(--encre); font: var(--t-l)/1.5 var(--police); -webkit-font-smoothing: antialiased; text-rendering: optimizelegibility; }
.mq h1, .mq h2, .mq h3, .mq h4, .mq p, .mq ul, .mq ol, .mq dl, .mq dd, .mq figure { margin: 0px; }
.mq ul, .mq ol { padding: 0px; list-style: none; }
.mq a { color: inherit; text-decoration: none; }
.mq a:hover { text-decoration: underline; text-underline-offset: 2px; }
.mq button, .mq input, .mq select, .mq textarea { font: inherit; color: inherit; }
.mq .num, .mq .ref, .mq .echeance, .mq .chiffre { font-variant-numeric: tabular-nums; }
.mq .ic { width: 20px; height: 20px; flex: 0 0 auto; fill: none; stroke: currentcolor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.mq .ic.s { width: 16px; height: 16px; }
@media (prefers-reduced-motion: reduce) {
}
.mq .contenu { padding: var(--e6) var(--e8) var(--e14); max-width: 1400px; width: 100%; }
.mq .page-tete { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--e4); flex-wrap: wrap; margin-bottom: var(--e5); }
.mq .page-tete h1 { font: 700 var(--t-3xl)/1.15 var(--police-titre); letter-spacing: -0.01em; text-wrap: balance; }
.mq .page-tete .sous { color: var(--encre-3); font-size: var(--t-m); margin-top: 4px; }
.mq .actions { display: flex; gap: var(--e2); flex-wrap: wrap; align-items: center; }
.mq .btn { display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0px 14px; border-radius: var(--r-m); border: 1px solid var(--filet-fort); background: var(--surface); font-size: 14px; font-weight: 550; color: var(--encre); cursor: pointer; white-space: nowrap; }
.mq .btn:hover { background: var(--surface-2); text-decoration: none; }
.mq .btn .ic { width: 17px; height: 17px; }
.mq .btn.principal-btn { background: var(--marque); border-color: var(--marque); color: var(--mqe-01); }
.mq .btn.principal-btn:hover { filter: brightness(1.08); }
.mq .btn.discret { border-color: var(--mqe-02); background: var(--mqe-02); color: var(--encre-2); }
.mq .btn.petit { height: 30px; padding: 0px 10px; font-size: 13px; }
.mq .btn[disabled], .mq .btn.inactif { opacity: 0.45; cursor: not-allowed; }
.mq .seg { display: inline-flex; background: color-mix(in srgb,var(--encre) 8%,var(--fond)); border-radius: 9px; padding: 3px; gap: 2px; }
.mq .seg a, .mq .seg button { border: 0px; background: none; padding: 5px 12px; border-radius: 7px; font-size: 13.5px; color: var(--encre-2); cursor: pointer; white-space: nowrap; }
.mq .seg .n { color: var(--encre-3); margin-left: 5px; font-variant-numeric: tabular-nums; }
.mq .seg .on { background: var(--surface); color: var(--encre); font-weight: 600; box-shadow: var(--ombre-1); }
.mq .barre-outils { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e2) var(--e3); margin-bottom: var(--e4); }
.mq .barre-outils .lab { font-size: 12.5px; color: var(--encre-3); }
.mq .barre-outils .espace { flex: 1 1 0%; }
.mq .champ { height: 36px; border: 1px solid var(--filet-fort); border-radius: var(--r-m); background: var(--surface); padding: 0px 12px; font-size: 14px; }
.mq .puce { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0px 11px; border-radius: var(--r-pilule); border: 1px solid var(--filet-fort); background: var(--surface); font-size: 13.5px; color: var(--encre-2); white-space: nowrap; }
.mq .puce:hover { text-decoration: none; border-color: var(--encre-3); }
.mq .puce b { color: var(--encre); font-variant-numeric: tabular-nums; }
.mq .puce.on { background: var(--marque-pale); border-color: var(--marque-2); color: var(--encre); }
.mq .puce.alarme b { color: var(--rouge); }
.mq .puce.ajout { border-style: dashed; }
.mq .ref { font: 500 12.5px/1 var(--police-mono); color: var(--encre-3); letter-spacing: -0.01em; white-space: nowrap; }
.mq .etat { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; white-space: nowrap; border-radius: var(--r-pilule); padding: 2px 9px 2px 6px; justify-self: start; background: var(--surface-3); color: var(--encre-2); }
.mq .etat .forme { width: 13px; height: 13px; flex: 0 0 auto; }
.mq .etat.f-prendre { background: var(--surface-3); color: var(--encre-2); }
.mq .etat.f-mouvement { background: var(--bleu-fond); color: var(--bleu); }
.mq .etat.f-bloque { background: var(--ardoise-fond); color: var(--ardoise); box-shadow: inset 0 0 0 1px var(--filet-fort); }
.mq .etat.f-surveiller { background: var(--surveiller-fond); color: var(--surveiller); }
.mq .etat.f-ferme { background: var(--mqe-02); color: var(--encre-3); box-shadow: inset 0 0 0 1px var(--filet); }
.mq .etat.grand { font-size: 14px; padding: 4px 11px 4px 8px; }
.mq .prio { display: inline-grid; place-items: center; min-width: 26px; height: 20px; padding: 0px 5px; border-radius: 5px; font: 700 11.5px/1 var(--police); letter-spacing: 0.02em; white-space: nowrap; }
.mq .prio.p1 { background: var(--rouge); color: var(--mqe-01); }
.mq .prio.p2 { border: 1.5px solid var(--ambre-vif); color: var(--ambre); }
.mq .prio.p3 { border: 1px solid var(--filet-fort); color: var(--encre-2); }
.mq .prio.p4 { color: var(--encre-3); font-weight: 600; }
.mq details.prio-calc { position: relative; display: inline-block; }
.mq details.prio-calc > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; padding: 3px 8px 3px 4px; border-radius: var(--r-pilule); border: 1px solid var(--filet-fort); font-size: 14px; font-weight: 600; }
.mq details.prio-calc > summary::-webkit-details-marker { display: none; }
.mq details.prio-calc > summary .ic { width: 14px; height: 14px; color: var(--encre-3); }
.mq details.prio-calc .calcul { position: absolute; z-index: 8; top: calc(100% + 6px); left: 0px; width: 300px; background: var(--surface); border: 1px solid var(--filet); border-radius: var(--r-m); box-shadow: var(--ombre-2); padding: 12px 14px; font-size: 13.5px; }
.mq .calcul dl { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; }
.mq .calcul dt { color: var(--encre-3); }
.mq .calcul dd { font-weight: 600; }
.mq .calcul .res { border-top: 1px solid var(--filet); margin-top: 8px; padding-top: 8px; color: var(--encre-2); }
.mq .personne { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; white-space: nowrap; min-width: 0px; }
.mq .av { width: 24px; height: 24px; border-radius: 50%; display: inline-grid; place-items: center; font: 700 10px/1 var(--police); letter-spacing: 0.02em; flex: 0 0 auto; background: var(--surface-3); color: var(--encre-2); }
.mq .av.grand { width: 34px; height: 34px; font-size: 13px; }
.mq .av.t1 { background: var(--p1-f); color: var(--p1-t); }
.mq .av.t2 { background: var(--p2-f); color: var(--p2-t); }
.mq .av.t3 { background: var(--p3-f); color: var(--p3-t); }
.mq .av.t4 { background: var(--p4-f); color: var(--p4-t); }
.mq .av.t5 { background: var(--p5-f); color: var(--p5-t); }
.mq .av.t6 { background: var(--p6-f); color: var(--p6-t); }
.mq .av.t7 { background: var(--p7-f); color: var(--p7-t); }
.mq .av.t8 { background: var(--p8-f); color: var(--p8-t); }
.mq .av.vide { background: var(--mqe-02); border: 1.5px dashed var(--filet-fort); color: var(--encre-3); }
.mq .personne.vide { color: var(--encre-3); }
.mq .vip { display: inline-block; font: 700 10.5px/1 var(--police); letter-spacing: 0.06em; padding: 3px 5px; border-radius: 4px; border: 1px solid var(--marque-2); color: var(--marque-2); vertical-align: 1px; }
.mq .vip.echu { border-style: dashed; border-color: var(--filet-fort); color: var(--encre-3); text-decoration: line-through; font-weight: 600; }
.mq .manque { color: var(--encre-3); }
.mq .inconnu { color: var(--encre); border-bottom: 1px dotted var(--encre-3); cursor: help; }
.mq .manque-critique { display: inline-block; color: var(--rouge); font-weight: 700; background: var(--rouge-fond); border-radius: 4px; padding: 1px 6px; box-shadow: inset 0 0 0 1px var(--rouge-filet); white-space: nowrap; }
.mq .chiffre { display: flex; flex-direction: column; gap: 2px; }
.mq .chiffre b { font: 700 var(--t-4xl)/1 var(--police-titre); letter-spacing: -0.02em; }
.mq .chiffre .base { font-size: 12.5px; color: var(--encre-3); line-height: 1.35; }
.mq .canal { display: inline-flex; align-items: center; gap: 5px; color: var(--encre-3); font-size: 13px; white-space: nowrap; }
.mq .canal .ic { width: 15px; height: 15px; }
.mq .etiq { display: inline-block; font-size: 12px; padding: 1px 7px; border-radius: 5px; background: var(--surface-3); color: var(--encre-2); white-space: nowrap; }
.mq .etiq.bleu { background: var(--bleu-fond); color: var(--bleu); }
.mq .etiq.vert { background: var(--vert-fond); color: var(--vert); }
.mq .etiq.rouge { background: var(--rouge-fond); color: var(--rouge); font-weight: 600; }
.mq .etiq.muet { background: var(--muet-fond); color: var(--muet); }
.mq .etiq.contour { background: none; box-shadow: inset 0 0 0 1px var(--filet-fort); }
.mq .liste { background: var(--surface); border-radius: var(--r-l); box-shadow: var(--ombre-carte); overflow: hidden; }
.mq .echeance { text-align: right; line-height: 1.2; min-width: 0px; }
.mq .echeance .sig { display: block; font-weight: 650; font-size: 13.5px; }
.mq .echeance .ctx { display: block; font-size: 11.5px; color: var(--encre-3); }
.mq .echeance.rouge .sig { color: var(--rouge); }
.mq .echeance.faible .sig { color: var(--encre-3); font-weight: 500; }
.mq .echeance.manque .sig { color: var(--rouge); font-weight: 700; }
.mq .echeance .manque-critique { font-size: 12px; padding: 0px 5px; }
.mq .groupe { margin-top: var(--e6); }
.mq .groupe-tete { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; padding: 0px 4px 8px; }
.mq .groupe-tete h3 { font: 650 var(--t-xl)/1.3 var(--police-titre); display: flex; align-items: center; gap: 8px; }
.mq .groupe-tete h3 .forme { width: 16px; height: 16px; }
.mq .groupe-tete .n { font-variant-numeric: tabular-nums; color: var(--encre-3); font-weight: 500; }
.mq .groupe-tete p { color: var(--encre-3); font-size: 13.5px; }
.mq .groupe-tete .droite { margin-left: auto; font-size: 13.5px; color: var(--encre-2); white-space: nowrap; }
.mq .groupe-tete .droite b { color: var(--rouge); }
.mq .famille { font-size: 11.5px; letter-spacing: 0.09em; text-transform: uppercase; color: var(--encre-3); font-weight: 700; margin: var(--e8) 0 0; padding: 0px 4px; display: flex; align-items: center; gap: 8px; }
.mq .famille::after { content: ""; flex: 1 1 0%; height: 2px; border-radius: 2px; background: currentcolor; opacity: 0.2; }
.mq details.suite > summary { list-style: none; cursor: pointer; padding: 8px 16px; font-size: 13px; font-weight: 650; color: var(--lien); background: var(--surface-2); }
.mq details.suite > summary::-webkit-details-marker { display: none; }
.mq details.suite[open] > summary { display: none; }
.mq .plus-lien { display: block; padding: 8px 16px; font-size: 13px; font-weight: 650; color: var(--lien); }
.mq .barre-selection { position: sticky; bottom: 16px; z-index: 6; margin: var(--e5) auto 0; max-width: 760px; display: flex; align-items: center; gap: var(--e3); flex-wrap: wrap; background: var(--encre); color: var(--fond); border-radius: var(--r-l); padding: 10px 12px 10px 18px; box-shadow: var(--ombre-2); }
.mq .barre-selection b { font-variant-numeric: tabular-nums; }
.mq .barre-selection .champ { height: 32px; background: var(--mqe-02); border-color: color-mix(in srgb,var(--fond) 35%,var(--mqe-02)); color: var(--fond); }
.mq .barre-selection .btn { height: 32px; background: var(--fond); color: var(--encre); border-color: var(--mqe-02); }
.mq .barre-selection .btn.discret { background: var(--mqe-02); color: var(--fond); }
.mq .vide-etat { padding: var(--e10) var(--e4); text-align: center; border-bottom: 1px solid var(--filet); }
.mq .vide-etat b { display: block; font-size: var(--t-xl); margin-bottom: 4px; }
.mq .vide-etat p { color: var(--encre-3); font-size: 14px; max-width: 48ch; margin-inline: auto; }
.mq .vide-etat .btn { margin-top: 14px; }
.mq .bloc { margin-top: var(--e6); }
.mq .bloc-tete { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; padding: 0px 4px 8px; }
.mq .bloc-tete h2 { font: 750 var(--t-xl)/1.25 var(--police-titre); letter-spacing: -0.005em; display: flex; align-items: center; gap: 8px; }
.mq .bloc-tete h2 .n {font:750 12.5px/1 var(--police);font-variant-numeric:tabular-nums;background:var(--surface-3);color:var(--encre-2);border-radius:var(--r-pilule);padding:3px 8px;order:2}
.mq .bloc-tete p { color: var(--encre-3); font-size: 13.5px; flex: 1 1 0%; min-width: 220px; }
.mq .bloc-tete a.tout { margin-left: auto; font-size: 13.5px; color: var(--lien); white-space: nowrap; }
.mq .bloc.leger .bloc-tete h2 { font-size: var(--t-l); }
.mq .fiche-tete { padding-bottom: var(--e5); border-bottom: 1px solid var(--filet); }
.mq .fiche-tete .surtitre { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; font-size: 13.5px; color: var(--encre-3); margin-bottom: 6px; }
.mq .fiche-tete h1 { font: 700 28px/1.2 var(--police-titre); letter-spacing: -0.01em; text-wrap: balance; max-width: 34ch; }
.mq .fiche-tete .faits { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: 14px; font-size: 14.5px; }
.mq .fiche-tete .faits .sep { width: 1px; height: 18px; background: var(--filet-fort); }
.mq .fiche-tete .faits .cle { color: var(--encre-3); font-size: 13px; margin-right: 4px; }
.mq .fiche-tete .ligne-actions { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.mq .signaux { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 14px; }
.mq .signal { display: inline-flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 600; }
.mq .signal .ic { width: 17px; height: 17px; }
.mq .signal.rouge { color: var(--rouge); }
.mq .signal.ambre { color: var(--ambre); }
.mq .signal.neutre { color: var(--encre-2); font-weight: 500; }
.mq .fiche-corps { display: grid; grid-template-columns: minmax(0px, 1fr) 340px; gap: var(--e8); margin-top: var(--e6); align-items: start; }
.mq .panneau { background: var(--surface); border-radius: var(--r-l); box-shadow: var(--ombre-carte); padding: 4px 18px 10px; position: sticky; top: 60px; }
.mq .panneau section { padding: 14px 0px; border-bottom: 1px solid var(--filet); }
.mq .panneau section:last-child { border-bottom: 0px; }
.mq .panneau h3 { font: 650 13px/1.3 var(--police); letter-spacing: 0.06em; text-transform: uppercase; color: var(--encre-3); margin-bottom: 10px; display: flex; justify-content: space-between; align-items: baseline; }
.mq .panneau h3 a { text-transform: none; letter-spacing: 0px; font-weight: 500; color: var(--lien); font-size: 13px; }
.mq .cv { display: grid; grid-template-columns: 118px minmax(0px, 1fr); gap: 7px 12px; font-size: 14px; }
.mq .cv dt { color: var(--encre-3); font-size: 13px; padding-top: 1px; }
.mq .cv dd { min-width: 0px; }
.mq .cv dd small { display: block; color: var(--encre-3); font-size: 12.5px; }
.mq .section-fiche { margin-top: var(--e8); }
.mq .section-fiche > h2 { font: 700 var(--t-xl)/1.3 var(--police-titre); display: flex; align-items: baseline; gap: 10px; margin-bottom: 12px; }
.mq .section-fiche > h2 small { font: 400 13px var(--police); color: var(--encre-3); }
.mq .encart { border-radius: var(--r-l); padding: 16px 18px; background: var(--surface); box-shadow: var(--ombre-carte); }
.mq .encart.ambre { background: var(--ambre-fond); }
.mq .encart .trois { display: grid; grid-template-columns: repeat(3, minmax(0px, 1fr)); gap: 18px; }
.mq .encart h4 { font-size: 12.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--encre-3); font-weight: 650; margin-bottom: 6px; display: flex; gap: 6px; align-items: center; }
.mq .encart.ambre h4 { color: var(--ambre); }
.mq .encart p { font-size: 14.5px; }
.mq .encart ul.ecarte li { padding: 6px 0px; border-bottom: 1px dashed var(--filet-fort); font-size: 14px; }
.mq .encart ul.ecarte li:last-child { border-bottom: 0px; }
.mq .encart ul.ecarte li b { display: block; }
.mq .encart ul.ecarte li s { color: var(--encre-2); text-decoration-thickness: 1px; }
.mq .bande { margin-top: var(--e5); }
.mq .bande .axe { position: relative; height: 14px; border-radius: 4px; overflow: hidden; background: var(--surface-3); display: flex; }
.mq .bande .seg-t { height: 100%; }
.mq .bande .seg-t.nous { background: var(--bleu); }
.mq .bande .seg-t.tiers { background: repeating-linear-gradient(135deg,var(--ardoise) 0 3px,var(--ardoise-fond) 3px 6px); }
.mq .bande .seg-t.partiel { background: var(--ambre-vif); }
.mq .bande .marques { position: relative; height: 18px; margin-top: 3px; }
.mq .bande .marques i { position: absolute; top: 0px; width: 2px; height: 8px; background: var(--encre-2); border-radius: 1px; }
.mq .bande .marques i.visite { height: 12px; width: 3px; background: var(--encre); }
.mq .bande .marques i.msg { width: 7px; height: 7px; border-radius: 50%; background: var(--vert); top: 1px; margin-left: -3px; }
.mq .bande .silence { position: absolute; top: -24px; height: 14px; border: 2px solid var(--rouge); border-radius: 4px; pointer-events: none; }
.mq .bande .dates { display: flex; justify-content: space-between; font-size: 12px; color: var(--encre-3); margin-top: 2px; }
.mq .bande .legende { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 12.5px; color: var(--encre-2); margin-top: 8px; }
.mq .bande .legende span { display: inline-flex; align-items: center; gap: 6px; }
.mq .bande .legende .pastille { width: 14px; height: 8px; border-radius: 2px; display: inline-block; }
.mq .fil { position: relative; }
.mq .fil .mois { font-size: 12px; font-weight: 650; letter-spacing: 0.08em; text-transform: uppercase; color: var(--encre-3); padding: 18px 0px 6px 64px; }
.mq .evt { display: grid; grid-template-columns: 52px 24px minmax(0px, 1fr); column-gap: 10px; padding: 5px 0px; position: relative; font-size: 14px; }
.mq .evt::before { content: ""; position: absolute; left: 73px; top: 0px; bottom: 0px; width: 1px; background: var(--filet-fort); }
.mq .evt .date { font-size: 12.5px; color: var(--encre-3); text-align: right; line-height: 1.3; padding-top: 2px; font-variant-numeric: tabular-nums; }
.mq .evt .date small { display: block; font-size: 11.5px; }
.mq .evt .pt { position: relative; z-index: 1; width: 24px; height: 24px; border-radius: 50%; background: var(--surface); border: 1.5px solid var(--filet-fort); display: grid; place-items: center; color: var(--encre-2); }
.mq .evt .pt .ic { width: 13px; height: 13px; }
.mq .evt .corps { padding-top: 2px; min-width: 0px; }
.mq .evt .corps .qui { color: var(--encre-3); font-size: 13px; }
.mq .evt .nature { font-size: 11.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--encre-3); margin-right: 6px; }
.mq .evt.visite .pt { background: var(--encre); border-color: var(--encre); color: var(--fond); }
.mq .evt.visite .corps > b { font-weight: 650; }
.mq .evt.enquete .pt { border-color: var(--ambre-vif); color: var(--ambre); }
.mq .evt.attente .pt { border-color: var(--ardoise); color: var(--ardoise); }
.mq .evt .msg { margin-top: 4px; padding: 10px 14px; border-radius: 4px 12px 12px; background: var(--surface-2); max-width: 62ch; font-size: 14.5px; border: 1px solid var(--filet); }
.mq .evt.sortant .msg { background: var(--marque-pale); border-color: var(--mqe-02); border-radius: 12px 4px 12px 12px; }
.mq .evt.entrant .pt { border-color: var(--encre-2); }
.mq .evt.sortant .pt { background: var(--marque-2); border-color: var(--marque-2); color: var(--mqe-01); }
.mq .evt .msg .meta-msg { display: flex; gap: 8px; align-items: center; font-size: 12.5px; color: var(--encre-3); margin-bottom: 4px; }
.mq .evt .msg .meta-msg b { color: var(--encre-2); font-weight: 600; }
.mq .silence-fil { display: grid; grid-template-columns: 52px 24px minmax(0px, 1fr); column-gap: 10px; padding: 6px 0px; position: relative; }
.mq .silence-fil::before { content: ""; position: absolute; left: 73px; top: 0px; bottom: 0px; border-left: 2px dotted var(--rouge-filet); }
.mq .silence-fil span { grid-column: 3; font-size: 13px; font-weight: 650; color: var(--rouge); display: inline-flex; align-items: center; gap: 6px; }
.mq .silence-fil.neutre::before { border-left-color: var(--filet-fort); }
.mq .silence-fil.neutre span { color: var(--encre-3); font-weight: 500; }
.mq .fil-filtres { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 6px; }
.mq .constat { border: 1px solid var(--filet); border-radius: var(--r-l); overflow: hidden; background: var(--surface); }
.mq .constat .c-tete { display: flex; align-items: baseline; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--filet); flex-wrap: wrap; }
.mq .constat .c-tete .num-c { font: 700 12px/1 var(--police); letter-spacing: 0.06em; color: var(--encre-3); text-transform: uppercase; }
.mq .constat .c-tete h4 { font-size: 16px; font-weight: 650; }
.mq .constat .photos { display: grid; grid-template-columns: repeat(3, minmax(0px, 1fr)); gap: 4px; padding: 4px; }
.mq .constat .photo { aspect-ratio: 4 / 3; border-radius: 6px; background: var(--surface-3); display: grid; place-items: center; color: var(--encre-3); font-size: 12px; text-align: center; position: relative; overflow: hidden; }
.mq .constat .photo svg { width: 100%; height: 100%; display: block; }
.mq .constat .photo figcaption { position: absolute; left: 6px; bottom: 6px; right: 6px; font-size: 11.5px; color: var(--mqe-01); text-shadow: var(--mqe-03) 0px 1px 2px; text-align: left; }
.mq .constat .photo.trou { background: repeating-linear-gradient(135deg,var(--surface-3) 0 6px,var(--surface-2) 6px 12px); border: 1px dashed var(--filet-fort); color: var(--encre-2); }
.mq .constat dl { display: grid; grid-template-columns: 120px minmax(0px, 1fr); gap: 8px 14px; padding: 12px 16px; font-size: 14.5px; }
.mq .constat dt { color: var(--encre-3); font-size: 13px; padding-top: 1px; }
@container app (max-width: 1100px) {
.mq .fiche-corps { grid-template-columns: minmax(0px, 1fr) 300px; }
}
@container app (max-width: 900px) {
.mq .contenu { padding: var(--e5) var(--e5) var(--e14); }
.mq .fiche-corps { grid-template-columns: 1fr; }
.mq .panneau { position: static; }
}
@container app (max-width: 640px) {
.mq { font-size: 15px; }
.mq .contenu { padding: 16px 16px 96px; }
.mq .page-tete h1 { font-size: 23px; }
.mq .bloc { margin-top: 28px; }
.mq .bloc-tete h2 { font-size: 18px; }
.mq .bloc-tete p { display: none; }
.mq .fiche-tete h1 { font-size: 22px; }
.mq .fiche-tete .faits .sep { display: none; }
.mq .section-fiche > h2 { flex-wrap: wrap; gap: 2px 10px; }
.mq .encart .trois { grid-template-columns: 1fr; }
.mq .cv { grid-template-columns: 110px minmax(0px, 1fr); }
.mq .evt { grid-template-columns: 44px 22px minmax(0px, 1fr); column-gap: 8px; }
.mq .evt::before { left: 62px; }
.mq .silence-fil { grid-template-columns: 44px 22px minmax(0px, 1fr); column-gap: 8px; }
.mq .silence-fil::before { left: 62px; }
.mq .fil .mois { padding-left: 52px; }
.mq .constat dl { grid-template-columns: 1fr; gap: 2px; }
.mq .constat dt { margin-top: 8px; }
.mq .barre-selection { display: none; }
.mq .barre-outils .seg.densite, .mq .barre-outils .seg.grouper, .mq .barre-outils .lab { display: none; }
}
.mq .rangs { background: var(--surface); border-radius: var(--r-l); box-shadow: var(--ombre-carte); overflow: hidden; }
.mq .rang { display: grid; grid-template-columns: var(--cols,minmax(0,2fr) minmax(0,1fr) minmax(0,1fr) 170px); column-gap: var(--e4); align-items: center; min-height: var(--h-ligne); padding: 7px var(--e3); border-bottom: 1px solid var(--filet); font-size: 14px; color: inherit; }
.mq a.rang:hover { background: var(--surface-2); text-decoration: none; }
.mq .rang .p { display: block; font-weight: 600; font-size: 14.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mq .rang .s { display: block; font-size: 13px; color: var(--encre-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 400; }
.mq .rang .d { text-align: right; }
.mq .rang .d b { display: block; font-size: 14px; }
.mq .rang .d small { display: block; font-size: 12.5px; color: var(--encre-3); }
.mq .rang .cellule { min-width: 0px; }
.mq .rangs-tete { display: grid; grid-template-columns: var(--cols); column-gap: var(--e4); padding: 6px var(--e3); font-size: 12px; color: var(--encre-3); font-weight: 600; border-bottom: 1px solid var(--filet); }
.mq .rangs-tete .d { text-align: right; }
@container app (max-width: 640px) {
.mq .rang { grid-template-columns: minmax(0px, 1fr) auto !important; row-gap: 4px; }
.mq .rang .cache-tel, .mq .rangs-tete { display: none; }
}
.mq .form { display: grid; gap: 18px; max-width: 760px; }
.mq .form .ligne-champ { display: grid; gap: 6px; }
.mq .form .l { font-size: 13.5px; font-weight: 600; color: var(--encre-2); }
.mq .form .aide { font-size: 12.5px; color: var(--encre-3); }
.mq .form input[type="text"], .mq .form input[type="search"], .mq .form textarea, .mq .form 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; }
.mq .form textarea { min-height: 88px; resize: vertical; }
.mq .choix { display: flex; flex-wrap: wrap; gap: 8px; }
.mq .choix label { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--filet-fort); border-radius: var(--r-m); padding: 8px 12px; font-size: 14px; cursor: pointer; background: var(--surface); }
.mq .choix label.on { border-color: var(--marque-2); background: var(--marque-pale); font-weight: 600; }
.mq .choix input { accent-color: var(--marque-2); }
.mq .pre-rempli { background: var(--surface-2); border-radius: var(--r-l); padding: 14px 16px; }
.mq .pre-rempli h3 { font-size: 16px; font-weight: 650; display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.mq .etapes { display: flex; gap: 0px; margin-bottom: 22px; border-bottom: 1px solid var(--filet); flex-wrap: wrap; }
.mq .etapes span { display: flex; align-items: center; gap: 8px; padding: 10px 16px 10px 0px; margin-right: 16px; font-size: 14px; color: var(--encre-3); border-bottom: 2px solid var(--mqe-02); margin-bottom: -1px; }
.mq .etapes span i { font-style: normal; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 700; border: 1.5px solid var(--filet-fort); }
.mq .etapes span.fait { color: var(--encre-2); }
.mq .etapes span.fait i { background: var(--vert); border-color: var(--vert); color: var(--mqe-01); }
.mq .etapes span.on { color: var(--encre); font-weight: 650; border-bottom-color: var(--encre); }
.mq .etapes span.on i { border-color: var(--encre); background: var(--encre); color: var(--fond); }
.mq .causes { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 6px; counter-reset: c 0; }
.mq .causes label { display: flex; gap: 10px; align-items: flex-start; border: 1px solid var(--filet); border-radius: var(--r-m); padding: 8px 12px; font-size: 14px; background: var(--surface); cursor: pointer; }
.mq .causes label .code { font: 600 12px/1.6 var(--police-mono); color: var(--encre-3); flex: 0 0 auto; }
.mq .causes label.on { border-color: var(--marque-2); background: var(--marque-pale); }
.mq .causes label.autre { border-style: dashed; }
.mq .planning { display: grid; grid-template-columns: 170px repeat(7, minmax(0px, 1fr)); background: var(--surface); border-radius: var(--r-l); box-shadow: var(--ombre-carte); }
.mq .planning > div:first-child { border-top-left-radius: var(--r-l); }
.mq .planning > div:nth-child(8) { border-top-right-radius: var(--r-l); }
.mq .planning > div { border-right: 1px solid var(--filet); border-bottom: 1px solid var(--filet); padding: 8px; min-width: 0px; }
.mq .planning .qui .personne { white-space: normal; align-items: flex-start; }
.mq .planning .jour { font-size: 12.5px; font-weight: 650; color: var(--encre-2); background: var(--surface-2); position: sticky; top: 44px; z-index: 2; }
.mq .planning .jour.auj { background: var(--marque-pale); color: var(--encre); }
.mq .planning .jour small { display: block; font-weight: 400; color: var(--encre-3); }
.mq .planning .qui { display: flex; flex-direction: column; gap: 4px; font-size: 14px; background: var(--surface); }
.mq .planning .qui small { color: var(--encre-3); font-size: 12.5px; }
.mq .planning .case { display: flex; flex-direction: column; gap: 6px; background: var(--surface); }
.mq .planning .case.auj { background: color-mix(in srgb,var(--marque-pale) 45%,var(--surface)); }
.mq .planning .case.passe { background: var(--surface-2); }
.mq .visite-carte {display:block;border:1px solid var(--filet);border-left:3px solid var(--bleu);border-radius:6px;padding:6px 8px;font-size:13px;background:var(--surface);line-height:1.3}
.mq .visite-carte:hover { text-decoration: none; border-color: var(--filet-fort); }
.mq .visite-carte b { display: block; font-size: 13px; font-weight: 650; }
.mq .visite-carte .h { font: 600 12px var(--police-mono); color: var(--encre-2); }
.mq .visite-carte .lot { font-size: 11.5px; color: var(--encre-3); }
.mq .visite-carte .tk { display: flex; flex-wrap: wrap; gap: 4px 8px; margin-top: 3px; font-size: 12px; color: var(--encre-3); }
.mq .visite-carte.retard { border-left-color: var(--rouge); }
.mq .visite-carte.retard .r { color: var(--rouge); font-weight: 650; }
.mq .visite-carte.preventif { border-left-color: var(--encre-3); border-left-style: dashed; }
.mq .conflit { font-size: 12px; font-weight: 650; color: var(--rouge); display: flex; gap: 5px; align-items: flex-start; line-height: 1.3; }
.mq .conflit .ic { width: 14px; height: 14px; flex: 0 0 auto; margin-top: 1px; }
.mq .regroupe { font-size: 12px; color: var(--vert); font-weight: 600; display: flex; gap: 5px; }
@container app (max-width: 900px) {
.mq .planning { grid-template-columns: 110px repeat(7, minmax(120px, 1fr)); }
.mq .planning-defile { overflow-x: auto; }
}
.mq .boite { display: grid; grid-template-columns: 340px minmax(0px, 1fr); border: 1px solid var(--filet); border-radius: var(--r-l); overflow: hidden; min-height: 640px; background: var(--surface); }
.mq .boite .fils { border-right: 1px solid var(--filet); background: var(--surface); }
.mq .boite .fils a { display: grid; grid-template-columns: 36px minmax(0px, 1fr) auto; gap: 4px 10px; padding: 12px 14px; border-bottom: 1px solid var(--filet); font-size: 14px; }
.mq .boite .fils a:hover { background: var(--surface-2); text-decoration: none; }
.mq .boite .fils a.on { background: var(--marque-pale); }
.mq .boite .fils .qui { font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mq .boite .fils .extrait { grid-column: 2 / 3; color: var(--encre-3); font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mq .boite .fils .rat { grid-column: 2 / 4; font-size: 12.5px; display: flex; gap: 6px; flex-wrap: wrap; }
.mq .boite .fils .nl { background: var(--marque-2); color: var(--mqe-01); border-radius: 99px; font-size: 11px; font-weight: 700; padding: 0px 7px; align-self: center; }
.mq .boite .fils time { font-size: 12px; color: var(--encre-3); }
.mq .boite .conv { display: flex; flex-direction: column; min-width: 0px; }
.mq .boite .conv-tete { padding: 12px 18px; border-bottom: 1px solid var(--filet); display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; }
.mq .boite .conv-corps { padding: 10px 18px; flex: 1 1 0%; background: var(--surface-2); }
.mq .boite .composer { border-top: 1px solid var(--filet); padding: 10px 18px; display: grid; gap: 8px; }
.mq .fenetre { font-size: 12.5px; color: var(--encre-2); display: flex; gap: 6px; align-items: center; }
.mq .fenetre.fermee { color: var(--ambre); }
.mq .rattacher { border: 1px solid var(--marque-2); background: var(--marque-pale); border-radius: var(--r-l); padding: 14px 16px; margin: 12px 18px; }
.mq .rattacher h3 { font-size: 15px; font-weight: 650; margin-bottom: 8px; }
.mq .candidat { display: grid; grid-template-columns: minmax(0px, 1fr) auto; gap: 4px 12px; align-items: center; background: var(--surface); border: 1px solid var(--filet); border-radius: var(--r-m); padding: 10px 12px; margin-top: 8px; }
.mq .candidat .pourquoi { font-size: 12.5px; color: var(--encre-3); }
@container app (max-width: 900px) {
.mq .boite { grid-template-columns: 1fr; }
.mq .boite .fils { display: none; }
}
.mq .telephones { display: flex; flex-wrap: wrap; gap: 28px; align-items: flex-start; }
.mq .tel { width: 390px; max-width: 100%; border-radius: 36px; border: 10px solid var(--mqe-04); background: var(--mqe-04); box-shadow: var(--ombre-2); overflow: hidden; flex: 0 0 auto; }
.mq .bulle { max-width: 84%; padding: 8px 11px 6px; border-radius: 12px; font-size: 14.5px; line-height: 1.4; background: var(--surface); border: 1px solid var(--filet); white-space: pre-line; position: relative; }
.mq .bulle.moi { align-self: flex-end; background: var(--marque-pale); border-color: var(--mqe-02); }
.mq .bulle.trace { align-self: flex-start; }
.mq .bulle .h { display: block; text-align: right; font-size: 11px; color: var(--encre-3); margin-top: 2px; }
.mq .bulle.modele { border-style: dashed; }
.mq .bulle.modele::before { content: "Modèle pré-approuvé"; display: block; font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--encre-3); margin-bottom: 3px; }
.mq .boutons-wa { align-self: flex-start; max-width: 84%; width: 84%; display: grid; gap: 4px; }
.mq .boutons-wa span { display: block; text-align: center; background: var(--surface); border: 1px solid var(--filet); border-radius: 10px; padding: 8px; font-size: 14px; color: var(--marque-2); font-weight: 600; }
.mq .limite { align-self: center; font-size: 11.5px; color: var(--ambre); border: 1px dashed var(--ambre-vif); border-radius: 6px; padding: 3px 8px; text-align: center; max-width: 90%; }
.mq .photo-wa { width: 200px; height: 140px; border-radius: 10px; overflow: hidden; align-self: flex-end; }
.mq .tel-legende { font-size: 13px; color: var(--encre-3); margin-top: 10px; max-width: 390px; }
.mq .public { min-height: 100vh; background: var(--surface-2); }
.mq .rapport { max-width: 560px; margin: 0px auto; background: var(--surface); min-height: 100vh; }
.mq .rapport h2 { font: 700 16px/1.3 var(--police-titre); }
.mq .qr-planche { display: grid; grid-template-columns: repeat(3, minmax(0px, 1fr)); gap: 10px; background: var(--mqe-01); padding: 14px; border: 1px solid var(--filet); border-radius: 8px; color: var(--mqe-05); }
.mq .qr-etiq { border: 1.5px solid var(--mqe-05); border-radius: 10px; padding: 10px 12px; display: grid; grid-template-columns: 86px minmax(0px, 1fr); gap: 10px; align-items: center; break-inside: avoid; }
.mq .qr-etiq b { font-size: 13.5px; display: block; line-height: 1.25; }
.mq .qr-etiq small { display: block; font-size: 11px; color: var(--mqe-06); line-height: 1.35; }
.mq .qr-etiq .code { font: 700 12px var(--police-mono); color: var(--mqe-07); margin-top: 4px; display: block; }
@container app (max-width: 640px) {
.mq .qr-planche { grid-template-columns: 1fr; }
}
.mq .liste { container-type: inline-size; }
@container (max-width: 1060px) {
}
@container (max-width: 860px) {
}
@container (max-width: 560px) {
}
.mq .seg { max-width: 100%; flex-wrap: wrap; }
.mq .telephones > div { min-width: 0px; max-width: 100%; }
.mq details.prio-calc .calcul { max-width: calc(-32px + 100vw); }
@container app (max-width: 900px) {
.mq .fiche-corps { grid-template-columns: minmax(0px, 1fr); }
}
.mq .cx { min-height: 100vh; display: grid; grid-template-columns: minmax(0px, 1.15fr) minmax(360px, 1fr); background: var(--fond); }
.mq .cx-marque { position: relative; overflow: hidden; display: flex; flex-direction: column; padding: 36px 48px 28px; color: var(--mqe-08); background: radial-gradient(90% 70% at 85% 10%, var(--mqe-09) 0%, var(--mqe-10) 45%, var(--mqe-11) 100%); }
.mq .cx-marque::after { content: ""; position: absolute; left: 0px; right: 0px; bottom: 0px; height: 4px; background: linear-gradient(90deg,var(--soleil),var(--mqe-12) 70%,var(--mqe-02)); }
.mq .cx-logo { position: relative; z-index: 1; display: flex; align-items: center; gap: 12px; }
.mq .cx-logo .logo { width: 44px; height: 44px; border-radius: 12px; background: var(--soleil); display: grid; place-items: center; box-shadow: var(--mqe-13) 0px 10px 24px -8px; }
.mq .cx-logo .logo svg { width: 26px; height: 26px; stroke: var(--mqe-11); fill: none; stroke-width: 2.2; stroke-linecap: round; }
.mq .cx-logo b { font: 800 24px/1 var(--police-titre); letter-spacing: 0.16em; color: var(--mqe-01); }
.mq .cx-texte { position: relative; z-index: 1; margin-top: auto; max-width: 480px; }
.mq .cx-sur { font-size: 12.5px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--soleil); }
.mq .cx-marque h1 { font: 800 34px/1.12 var(--police-titre); letter-spacing: -0.02em; color: var(--mqe-01); margin-top: 10px; text-wrap: balance; }
.mq .cx-texte p:last-child { margin-top: 12px; font-size: 15px; color: var(--mqe-14); }
.mq .cx-pied { position: relative; z-index: 1; margin-top: 28px; font-size: 12.5px; color: var(--mqe-15); }
.mq .cx-ile { position: absolute; right: -4%; top: 6%; height: 88%; width: auto; pointer-events: none; }
.mq .cx-ile .grille line { stroke: var(--mqe-16); stroke-width: 1; }
.mq .cx-ile .terre { fill: var(--mqe-17); }
.mq .cx-ile .trait { fill: none; stroke: var(--mqe-13); stroke-width: 1.4; stroke-dasharray: 4, 4; stroke-dashoffset: 0; animation: 3s ease-out 0s 1 normal both running cx-trace; }
.mq .cx-form { display: grid; place-items: center; padding: 32px 24px; }
.mq .cx-form form { width: 100%; max-width: 380px; display: grid; gap: 16px; background: var(--surface); border-radius: 18px; padding: 30px 28px; box-shadow: var(--ombre-carte),0 30px 60px -40px var(--mqe-18); }
.mq .cx-form h2 { font: 800 26px/1.1 var(--police-titre); letter-spacing: -0.01em; }
.mq .cx-bienvenue { font-size: 14px; color: var(--encre-3); margin-top: -8px; }
.mq .cx-form input { width: 100%; height: 44px; border: 1px solid var(--filet-fort); border-radius: var(--r-m); padding: 0px 12px; font-size: 15px; background: var(--surface); }
.mq .cx-form input:focus { border-color: var(--marque-2); box-shadow: 0 0 0 3px color-mix(in srgb,var(--marque-2) 20%,var(--mqe-02)); outline: 0px; }
.mq .cx-form .btn { height: 46px; justify-content: center; width: 100%; font-size: 15px; }
.mq .cx-form .erreur { display: flex; gap: 8px; align-items: flex-start; background: var(--rouge-fond); color: var(--rouge); border-radius: var(--r-m); padding: 10px 12px; font-size: 14px; }
.mq .cx-form .erreur .ic { margin-top: 2px; }
.mq .cx-aide { font-size: 13px; color: var(--encre-3); }
@container app (max-width: 900px) {
.mq .cx { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
.mq .cx-marque { padding: 20px 20px 22px; min-height: 230px; }
.mq .cx-marque h1 { font-size: 23px; }
.mq .cx-texte { margin-top: 22px; max-width: 300px; }
.mq .cx-texte p:last-child, .mq .cx-pied { display: none; }
.mq .cx-ile { right: -12%; top: -8%; height: 120%; }
.mq .cx-form { place-items: start center; padding: 20px 16px 32px; }
.mq .cx-form form { margin-top: -36px; position: relative; }
}
.mq .planning .libre { display: block; border: 1.5px dashed var(--filet-fort); border-radius: 6px; padding: 10px 6px; text-align: center; font-size: 12px; color: var(--encre-3); }
.mq .e11-vide { background: var(--surface); border-radius: var(--r-l); box-shadow: var(--ombre-carte); padding: 18px 20px; margin-bottom: 16px; position: relative; overflow: hidden; }
.mq .e11-vide::before { content: ""; position: absolute; left: 0px; right: 0px; top: 0px; height: 3px; background: linear-gradient(90deg,var(--vert),var(--marque-2)); }
.mq .e11-v-tete { display: flex; gap: 14px; align-items: center; }
.mq .e11-v-ic { width: 46px; height: 46px; border-radius: 14px; background: var(--vert-fond); color: var(--vert); display: grid; place-items: center; flex: 0 0 auto; }
.mq .e11-v-ic .ic { width: 24px; height: 24px; }
.mq .e11-vide h2 { font: 800 20px/1.2 var(--police-titre); }
.mq .e11-v-tete p { color: var(--encre-3); font-size: 14px; margin-top: 2px; }
.mq .e11-v-cartes { display: grid; grid-template-columns: repeat(3, minmax(0px, 1fr)); gap: 12px; margin-top: 16px; }
.mq .e11-v-c { display: grid; grid-template-columns: auto minmax(0px, 1fr); gap: 0px 12px; align-items: baseline; padding: 12px 14px; border-radius: 12px; background: linear-gradient(180deg,var(--gf),var(--surface) 80%); box-shadow: inset 0 0 0 1px var(--filet); color: inherit; transition: transform 0.15s; }
.mq .e11-v-c:hover { text-decoration: none; transform: translateY(-2px); }
.mq .e11-v-c.dec { --g: var(--dec); --gf: var(--dec-fond); }
.mq .e11-v-c.exa { --g: var(--exa); --gf: var(--exa-fond); }
.mq .e11-v-c.fait { --g: var(--vert); --gf: var(--vert-fond); }
.mq .e11-v-c b { grid-row: span 3; font: 800 32px/1 var(--police-titre); color: var(--g); letter-spacing: -0.03em; }
.mq .e11-v-c .t { font-weight: 700; font-size: 14.5px; }
.mq .e11-v-c .d { font-size: 12.5px; color: var(--encre-3); }
.mq .e11-v-c .g { font-size: 13px; font-weight: 700; color: var(--lien); margin-top: 6px; }
@container app (max-width: 900px) {
.mq .e11-v-cartes { grid-template-columns: 1fr; }
}
.mq .r-contrat { background: var(--marque-2); }
.mq .r-garantie { background: var(--surveiller); }
.mq .r-hors { background: repeating-linear-gradient(135deg,var(--mqe-19) 0 3px,color-mix(in srgb,var(--mqe-19) 45%,var(--surface)) 3px 6px); }
.mq .cl-leg { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; margin-bottom: 10px; font-size: 12.5px; color: var(--encre-2); }
.mq .cl-leg .t { font-weight: 700; color: var(--encre-3); text-transform: uppercase; letter-spacing: 0.08em; font-size: 11px; }
.mq .cl-leg span { display: inline-flex; align-items: center; gap: 6px; }
.mq .cl-leg i { width: 12px; height: 9px; border-radius: 2px; display: inline-block; }
.mq .cl-liste { background: var(--surface); border-radius: var(--r-l); box-shadow: var(--ombre-carte); overflow: hidden; container-type: inline-size; }
.mq .cl-tete, .mq .cl-ligne { display: grid; grid-template-columns: 32px minmax(0px, 1.6fr) minmax(0px, 1.4fr) minmax(0px, 1fr) 150px 110px; gap: 12px; align-items: center; padding: 0px 16px; }
.mq .cl-tete { font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--encre-3); background: var(--surface-2); padding-top: 7px; padding-bottom: 6px; border-bottom: 1px solid var(--filet); }
.mq .cl-tete .d { text-align: right; }
.mq .cl-ligne { min-height: 46px; padding-top: 4px; padding-bottom: 4px; border-bottom: 1px solid var(--filet); color: inherit; font-size: 13.5px; }
.mq .cl-ligne:last-child { border-bottom: 0px; }
.mq .cl-ligne:hover { background: var(--surface-2); text-decoration: none; }
.mq .cl-mono { width: 32px; height: 32px; border-radius: 9px; background: var(--h); color: var(--mqe-01); display: grid; place-items: center; font: 800 12px var(--police); letter-spacing: 0.02em; }
.mq .cl-nom b { font-weight: 700; }
.mq .cl-nom .doublon { display: block; font-size: 11.5px; color: var(--ambre); }
.mq .cl-sites { display: grid; grid-template-columns: 28px minmax(0px, 1fr); gap: 0px 8px; align-items: center; }
.mq .cl-sites > b { grid-row: span 2; font: 800 18px var(--police-titre); text-align: right; }
.mq .cl-barre { display: flex; gap: 2px; height: 8px; }
.mq .cl-barre i { border-radius: 2px; }
.mq .cl-sites small { font-size: 11.5px; color: var(--encre-3); }
.mq .cl-lots { font-size: 12.5px; color: var(--encre-2); }
.mq .cl-vip small { display: block; font-size: 11.5px; color: var(--encre-3); }
.mq .cl-tk { text-align: right; }
.mq .cl-tk b { font: 800 17px var(--police-titre); }
.mq .cl-tk small { display: block; font-size: 11.5px; color: var(--encre-3); }
.mq .cl-tk .r { color: var(--rouge); font-weight: 700; }
@container (max-width: 760px) {
.mq .cl-tete { display: none; }
.mq .cl-ligne { grid-template-columns: 32px minmax(0px, 1fr) auto; grid-template-areas: "m n t" "m s t"; row-gap: 2px; padding-top: 8px; padding-bottom: 8px; }
.mq .cl-mono { grid-area: m; }
.mq .cl-nom { grid-area: n; }
.mq .cl-sites { grid-area: s; }
.mq .cl-tk { grid-area: t; }
.mq .cl-lots, .mq .cl-vip { display: none; }
}
.mq .acompleter { display: inline-block; font-size: 12px; font-weight: 700; color: var(--rel); background: var(--rel-fond); border: 1.5px dashed var(--rel-vif); border-radius: 6px; padding: 0px 6px; line-height: 1.5; white-space: nowrap; }
.mq .ac-carte { background: var(--surface); border-radius: var(--r-l); box-shadow: var(--ombre-carte); overflow: hidden; position: relative; }
.mq .ac-carte::before { content: ""; position: absolute; left: 0px; right: 0px; top: 0px; height: 3px; background: var(--rel-vif); }
.mq .ac-tete { display: flex; gap: 16px; align-items: center; padding: 16px 18px; background: linear-gradient(180deg,var(--rel-fond),var(--surface)); }
.mq .ac-tete h2 { font: 800 19px/1.2 var(--police-titre); }
.mq .ac-tete p { font-size: 14px; color: var(--encre-2); margin-top: 2px; }
.mq .ac-anneau { --p: 50; width: 64px; height: 64px; border-radius: 50%; flex: 0 0 auto; display: grid; place-items: center; background: conic-gradient(var(--rel-vif) calc(var(--p) * 1%),color-mix(in srgb,var(--rel-vif) 18%,var(--surface)) 0); }
.mq .ac-anneau b { width: 48px; height: 48px; border-radius: 50%; background: var(--surface); display: grid; place-items: center; font: 800 14px var(--police-titre); color: var(--rel); }
.mq .ac-liste li { display: grid; grid-template-columns: 36px minmax(0px, 1fr) 190px; gap: 12px; align-items: center; padding: 10px 18px; border-top: 1px solid var(--filet); }
.mq .ac-ic { width: 34px; height: 34px; border-radius: 10px; background: var(--rel-fond); color: var(--rel); display: grid; place-items: center; }
.mq .ac-ic .ic { width: 18px; height: 18px; }
.mq .ac-q b { font-weight: 700; margin-right: 8px; }
.mq .ac-q small { display: block; font-size: 12.5px; color: var(--encre-3); margin-top: 2px; }
.mq .ac-g { text-align: right; }
.mq .ac-g small { display: block; font-size: 11.5px; color: var(--encre-3); margin-top: 3px; }
@container app (max-width: 640px) {
.mq .ac-liste li { grid-template-columns: 36px minmax(0px, 1fr); }
.mq .ac-g { grid-column: 2; text-align: left; }
}
.mq .it-grille { display: grid; grid-template-columns: repeat(2, minmax(0px, 1fr)); gap: 14px; align-items: start; }
.mq .it-carte { background: var(--surface); border-radius: var(--r-l); box-shadow: var(--ombre-carte); overflow: hidden; }
.mq .it-carte header { display: flex; align-items: center; gap: 12px; padding: 12px 16px 6px; }
.mq .it-carte h2 { font: 800 17px/1.2 var(--police-titre); }
.mq .it-carte header p { font-size: 12.5px; color: var(--encre-3); }
.mq .it-n { margin-left: auto; text-align: right; }
.mq .it-n b { font: 800 26px/1 var(--police-titre); }
.mq .it-n small { display: block; font-size: 11.5px; color: var(--encre-3); }
.mq .it-res { padding: 0px 16px 8px 60px; font-size: 13px; color: var(--encre-2); }
.mq .it-res .r { color: var(--rouge); font-weight: 700; }
.mq .it-carte ul { border-top: 1px solid var(--filet); }
.mq .it-carte li { display: grid; grid-template-columns: 78px minmax(0px, 1fr) auto; gap: 10px; align-items: center; padding: 7px 16px; border-bottom: 1px solid var(--filet); font-size: 13px; }
.mq .it-s small { display: block; font-size: 11.5px; color: var(--encre-3); }
.mq .it-st { text-align: right; font-size: 12.5px; }
.mq .it-dep { color: var(--encre); }
.mq .it-carte footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 10px 16px; background: var(--surface-2); font-size: 12.5px; color: var(--encre-3); }
.mq .it-calmes { font-size: 14px; padding: 4px 4px 12px; color: var(--encre-2); }
@container app (max-width: 1100px) {
.mq .it-grille { grid-template-columns: 1fr; }
}
@container app (max-width: 640px) {
.mq .it-carte li { grid-template-columns: minmax(0px, 1fr); gap: 2px; }
.mq .it-st { text-align: left; }
.mq .it-res { padding-left: 16px; }
}
.mq .choix label.verrou { display: inline-grid; grid-template-columns: auto; gap: 1px; cursor: not-allowed; border-style: dashed; background: var(--surface-2); color: var(--encre); }
.mq .choix label.verrou input { position: absolute; opacity: 0; pointer-events: none; }
.mq .choix label.verrou .v-t { display: inline-flex; align-items: center; gap: 6px; font-weight: 650; }
.mq .choix label.verrou .v-t .ic { width: 16px; height: 16px; color: var(--ardoise); }
.mq .choix label.verrou small { font-size: 12px; color: var(--encre-3); }
.mq .verrou-aide { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 8px; font-size: 13px; color: var(--encre-2); }
.mq .verrou-aide a { color: var(--lien); font-weight: 650; }
.mq .rp { background: var(--surface); }
.mq .rp-tete { position: relative; padding: 18px 20px; background: linear-gradient(var(--mqe-01) 0%, var(--mqe-20) 100%); border-bottom: 1px solid var(--filet); color: var(--mqe-05); }
.mq .rp-tete::before { content: ""; position: absolute; left: 0px; right: 0px; top: 0px; height: 4px; background: linear-gradient(90deg,var(--mqe-21) 0 60%,var(--soleil) 60%); }
.mq .rp-marque { display: flex; align-items: center; gap: 10px; }
.mq .rp-logo { width: 34px; height: 34px; border-radius: 10px; background: var(--soleil); display: grid; place-items: center; flex: 0 0 auto; }
.mq .rp-logo svg { width: 20px; height: 20px; stroke: var(--mqe-07); fill: none; stroke-width: 2.2; stroke-linecap: round; }
.mq .rp-marque b { display: block; font: 800 16px/1 var(--police-titre); letter-spacing: 0.14em; color: var(--mqe-07); }
.mq .rp-marque small { font-size: 11.5px; color: var(--mqe-22); }
.mq .rp-num { margin-left: auto; text-align: right; font-size: 11px; line-height: 1.3; color: var(--mqe-22); }
.mq .rp-num b { font: 700 13px var(--police-mono); color: var(--mqe-05); }
.mq .rp-site { margin-top: 18px; font-size: 13px; color: var(--mqe-22); }
.mq .rp-tete h1 { font: 800 23px/1.2 var(--police-titre); letter-spacing: -0.01em; margin-top: 2px; color: var(--mqe-05); }
.mq .rp-statut { display: flex; gap: 12px; align-items: flex-start; margin-top: 14px; padding: 12px 14px; border-radius: 14px; background: var(--vert-fond); color: var(--vert); }
.mq .rp-statut .ic { width: 26px; height: 26px; flex: 0 0 auto; margin-top: 1px; }
.mq .rp-statut b { display: block; font: 800 17px/1.25 var(--police-titre); }
.mq .rp-statut span { font-size: 14px; color: var(--encre-2); }
.mq .rp-statut.partiel { background: var(--ambre-fond); color: var(--ambre); }
.mq .rp-corps { padding: 16px 18px 22px; display: grid; gap: 18px; }
.mq .rp-corps h2 { font: 800 16px/1.3 var(--police-titre); }
.mq .rp-frise { display: grid; grid-template-columns: repeat(4, minmax(0px, 1fr)); gap: 4px; counter-reset: e 0; }
.mq .rp-frise li { position: relative; padding-top: 18px; font-size: 12px; line-height: 1.3; }
.mq .rp-frise li::before { content: ""; position: absolute; left: 0px; top: 4px; width: 10px; height: 10px; border-radius: 50%; background: var(--vert); box-shadow: 0 0 0 3px var(--vert-fond); }
.mq .rp-frise li::after { content: ""; position: absolute; left: 14px; right: -2px; top: 8px; height: 2px; background: var(--vert-fond); }
.mq .rp-frise li:last-child::after { display: none; }
.mq .rp-frise b { display: block; font-size: 12.5px; }
.mq .rp-frise span { display: block; color: var(--encre-2); font-variant-numeric: tabular-nums; }
.mq .rp-frise small { display: block; color: var(--encre-3); font-size: 11px; }
.mq .rp-faits { display: grid; grid-template-columns: repeat(3, minmax(0px, 1fr)); gap: 8px; }
.mq .rp-faits > div { background: var(--surface-2); border-radius: 10px; padding: 8px 10px; }
.mq .rp-faits dt { font-size: 11.5px; color: var(--encre-3); }
.mq .rp-faits dd { font: 750 15px/1.25 var(--police-titre); }
.mq .rp-faits dd small { display: block; font: 400 11.5px var(--police); color: var(--encre-3); }
.mq .rp .constat { border-radius: 14px; box-shadow: var(--ombre-carte); border-color: var(--mqe-02); }
.mq .rp-reco { border-left: 4px solid var(--soleil); background: color-mix(in srgb,var(--soleil) 8%,var(--surface)); border-radius: 0px 12px 12px 0px; padding: 10px 14px; }
.mq .rp-reco p { font-size: 14.5px; margin-top: 2px; }
.mq .rp-equipe { display: grid; gap: 10px; }
.mq .rp-equipe > div { display: flex; gap: 10px; align-items: center; }
.mq .rp-equipe b { display: block; font-size: 14px; }
.mq .rp-equipe small { font-size: 12.5px; color: var(--encre-3); }
.mq .rp-valide { background: var(--surface-2); border-radius: 14px; padding: 14px 16px; font-size: 14px; display: grid; gap: 8px; }
.mq .rp-valide p { color: var(--encre-2); }
.mq .rp-valide .btn { width: 100%; justify-content: center; height: 46px; font-size: 15px; }
.mq .rp-valide.ok { display: flex; gap: 10px; align-items: flex-start; background: var(--vert-fond); color: var(--vert); }
.mq .rp-valide.ok .ic { width: 22px; height: 22px; flex: 0 0 auto; }
.mq .rp-valide.ok p { color: var(--encre-2); }
.mq .rp-pied { padding: 14px 18px 30px; font-size: 13.5px; color: var(--encre-2); border-top: 1px solid var(--filet); background: var(--surface-2); }
.mq .rp-pied small { display: block; margin-top: 6px; font-size: 12px; color: var(--encre-3); }
.mq .rp { container-type: inline-size; }
@container (max-width: 440px) {
.mq .rp-frise { grid-template-columns: repeat(2, minmax(0px, 1fr)); row-gap: 10px; }
.mq .rp-frise li:nth-child(2)::after { display: none; }
}
.mq .tb-t { background: var(--surface); border-radius: var(--r-l); box-shadow: var(--ombre-carte); padding: 12px 14px; display: flex; flex-direction: column; gap: 4px; }
.mq .tb-t h3 { font-size: 13px; font-weight: 700; color: var(--encre-2); }
.mq .tb-v { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.mq .tb-v b { font: 800 28px/1 var(--police-titre); letter-spacing: -0.02em; }
.mq .tb-v b.r { color: var(--rouge); }
.mq .tb-t .base { font-size: 11.5px; color: var(--encre-3); line-height: 1.35; }
.mq .tb-spark { width: 120px; height: 34px; flex: 0 0 auto; }
.mq .tb-spark .l { fill: none; stroke: var(--s1); stroke-width: 2; stroke-linejoin: round; }
.mq .tb-spark .a { fill: color-mix(in srgb,var(--s1) 14%,var(--mqe-02)); }
.mq .tb-spark circle { fill: var(--s1); stroke: var(--surface); stroke-width: 2; }
.mq .tb-anneau { width: 46px; height: 46px; flex: 0 0 auto; }
.mq .tb-anneau .p { fill: none; stroke: var(--surface-3); stroke-width: 6; }
.mq .tb-anneau .v { fill: none; stroke: var(--s1); stroke-width: 6; stroke-linecap: round; }
.mq .tb-sinc { margin: 10px 2px 0px; font-size: 12.5px; color: var(--encre-3); }
.mq .tb-sinc b { color: var(--encre-2); }
.mq .tb-c { background: var(--surface); border-radius: var(--r-l); box-shadow: var(--ombre-carte); padding: 14px 16px; min-width: 0px; }
.mq .tb-c.large { grid-column: 1 / -1; }
.mq .tb-c h2 { font: 800 16px/1.25 var(--police-titre); }
.mq .tb-c > p { font-size: 12.5px; color: var(--encre-3); margin-top: 2px; }
.mq .tb-svg { width: 100%; height: auto; display: block; margin-top: 8px; }
.mq .tb-svg .grille { stroke: var(--filet); stroke-width: 1; }
.mq .tb-svg .ax { font: 11px var(--police); fill: var(--encre-3); }
.mq .tb-svg .val { font: 700 11px var(--police); fill: var(--encre-2); }
.mq .tb-svg .lab { font: 700 11px var(--police); fill: var(--encre); }
.mq .tb-svg .s1 { fill: var(--s1); }
.mq .tb-svg .s3 { fill: var(--s3); }
.mq .tb-svg .med { fill: color-mix(in srgb,var(--s1) 70%,var(--encre)); }
.mq .tb-svg .mediane { stroke: var(--encre); stroke-width: 1.5; stroke-dasharray: 3, 3; }
.mq .tb-svg .barre:hover rect { filter: brightness(1.08); }
.mq .tb-leg { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12px; color: var(--encre-2); margin-top: 8px; }
.mq .tb-leg span { display: inline-flex; align-items: center; gap: 6px; }
.mq .tb-leg i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.mq .tb-leg b { color: var(--encre); }
.mq :is(.tb-leg, .tb-pile, .tb-causes) .s1 { background: var(--s1); }
.mq :is(.tb-leg, .tb-pile, .tb-causes) .s2 { background: var(--s2); }
.mq :is(.tb-leg, .tb-pile, .tb-causes) .s3 { background: var(--s3); }
.mq :is(.tb-leg, .tb-pile, .tb-causes) .s4 { background: var(--s4); }
.mq :is(.tb-leg, .tb-pile, .tb-causes) .s5 { background: var(--s5); }
.mq :is(.tb-leg, .tb-pile, .tb-causes) .s6 { background: var(--s6); }
.mq :is(.tb-leg, .tb-pile, .tb-causes) .s7 { background: var(--s7); }
.mq :is(.tb-leg, .tb-pile, .tb-causes) .inconnu-p, .mq .tb-causes .autre { background: repeating-linear-gradient(135deg,var(--encre-3) 0 2px,var(--surface-3) 2px 5px); }
.mq .tb-pile { margin-top: 10px; }
.mq .tb-pile .p { display: flex; gap: 2px; height: 22px; }
.mq .tb-pile .p i { border-radius: 4px; }
.mq .tb-note { font-size: 12.5px; color: var(--encre-2); margin-top: 10px; }
.mq .tb-leg-f { margin: 10px 0px 6px; }
.mq .tb-causes { display: grid; gap: 3px; }
.mq .tb-cb { display: grid; grid-template-columns: 34px minmax(0px, 150px) minmax(0px, 1fr) 28px; gap: 8px; align-items: center; font-size: 12.5px; }
.mq .tb-cb .c { font: 11px var(--police-mono); color: var(--encre-3); }
.mq .tb-cb .piste { height: 10px; background: var(--surface-2); border-radius: 3px; }
.mq .tb-cb .piste i { display: block; height: 100%; border-radius: 0px 3px 3px 0px; }
.mq .tb-cb .v { text-align: right; font-weight: 650; font-variant-numeric: tabular-nums; }
.mq .tb-chaleur { display: grid; grid-template-columns: 90px repeat(12, minmax(0px, 1fr)); gap: 3px; margin-top: 10px; font-size: 11px; }
.mq .tb-chaleur .m { text-align: center; color: var(--encre-3); }
.mq .tb-chaleur .lot { font-size: 12px; color: var(--encre-2); align-self: center; }
.mq .tb-chaleur .h { display: grid; place-items: center; height: 26px; border-radius: 4px; font-weight: 650; font-variant-numeric: tabular-nums; }
.mq .h0 { background: var(--surface-2); color: var(--encre-3); }
.mq .h1 { background: color-mix(in srgb,var(--s1) 12%,var(--surface)); }
.mq .h2 { background: color-mix(in srgb,var(--s1) 25%,var(--surface)); }
.mq .h3 { background: color-mix(in srgb,var(--s1) 42%,var(--surface)); }
.mq .h4 { background: color-mix(in srgb,var(--s1) 60%,var(--surface)); color: var(--mqe-01); }
.mq .h5 { background: color-mix(in srgb,var(--s1) 80%,var(--encre)); color: var(--mqe-01); }
.mq .h6 { background: color-mix(in srgb,var(--s1) 70%,var(--mqe-23)); color: var(--mqe-01); }
.mq .tb-echelle { display: flex; align-items: center; gap: 3px; justify-content: flex-end; margin-top: 8px; font-size: 11px; color: var(--encre-3); }
.mq .tb-echelle i { width: 18px; height: 10px; border-radius: 2px; display: inline-block; }
.mq .tb-echelle span { margin: 0px 4px; }
.mq .tb-mds { display: grid; gap: 8px; margin-top: 12px; }
.mq .tb-md, .mq .tb-md-ax { display: grid; grid-template-columns: minmax(0px, 230px) minmax(0px, 1fr) 190px; gap: 14px; align-items: center; font-size: 13px; }
.mq .tb-md .piste { position: relative; height: 10px; background: var(--surface-2); border-radius: 5px; }
.mq .tb-md .piste em { position: absolute; left: 0px; top: 0px; bottom: 0px; border-radius: 5px; background: color-mix(in srgb,var(--s7) 25%,var(--mqe-02)); }
.mq .tb-md .piste i { position: absolute; top: 50%; width: 14px; height: 14px; margin: -7px 0px 0px -7px; border-radius: 50%; background: var(--s7); box-shadow: 0 0 0 2px var(--surface); }
.mq .tb-md .v { font-size: 12.5px; color: var(--encre-3); }
.mq .tb-md .v b { color: var(--encre); }
.mq .tb-md.inconnu-b .piste { background: repeating-linear-gradient(135deg,var(--surface-3) 0 4px,var(--surface) 4px 8px); }
.mq .tb-md-ax .ax { display: flex; justify-content: space-between; font-size: 11px; color: var(--encre-3); }
.mq .tb-md-ax i { font-style: normal; }
@container app (max-width: 1100px) {
}
@container app (max-width: 640px) {
.mq .tb-md, .mq .tb-md-ax { grid-template-columns: 1fr; gap: 4px; }
.mq .tb-md-ax { display: none; }
.mq .tb-chaleur { grid-template-columns: 64px repeat(12, minmax(0px, 1fr)); gap: 2px; }
.mq .tb-chaleur .h { height: 22px; font-size: 9.5px; }
.mq .tb-chaleur .m { font-size: 9px; }
.mq .tb-cb { grid-template-columns: 30px minmax(0px, 110px) minmax(0px, 1fr) 24px; }
}
.mq .tb-tel { display: none !important; }
@container app (max-width: 640px) {
.mq .tb-bureau { display: none !important; }
.mq .tb-tel { display: block !important; }
}