/* ares.css — feuille commune de la plateforme GMAO ARES.
   Extraite de lib.php le 28/07/2026. Les cinq blocs sont concatenes DANS
   L ORDRE OU LE NAVIGATEUR LES RECEVAIT : socle, aide, coller/deposer,
   cartes contrat, visionneuse. Ne pas reordonner : la cascade en depend. */

/* ===== socle (page_header) ===== */
:root{
      /* Palette sombre « dark high-tech » alignée sur le site vitrine */
      --bleu:#4da3ff; --bleu-fonce:#eaf2ff; --bleu-clair:rgba(77,163,255,.25);
      --fond:#070d18; --carte:rgba(255,255,255,.045); --texte:#e8eefb; --gris:#9fb0ca;
      --ok:#57c785; --err:#ff7a72; --bordure:rgba(255,255,255,.10);
      --ombre:0 16px 40px rgba(0,0,0,.35); --radius:14px;

      /* ------------------------------------------------------------------
         JETONS DE DESIGN (28/07/2026) — SOURCE UNIQUE des valeurs visuelles.
         Avant : 21 tailles de police, 9 rayons et 247 couleurs en dur pour un
         meme produit. Ici : une echelle et une palette NOMMEES PAR ROLE. Toute
         nouvelle regle CSS doit sy referer plutot que de poser une valeur en
         clair. Les styles en ligne existants continuent de fonctionner : les
         jetons cohabitent avec eux, la reprise se fait progressivement.
         ------------------------------------------------------------------ */
      /* Echelle typographique — 6 degres. PLANCHER 12,5 px : en dessous, un
         technicien ne lit plus son ecran en plein soleil, avec des gants. */
      --t-xs:12.5px; --t-sm:13.5px; --t-md:15px; --t-lg:17px; --t-xl:21px; --t-2xl:26px;
      /* Rayons — 4 degres au lieu de 9. */
      --r-sm:8px; --r-md:12px; --r-lg:16px; --r-pill:999px;
      /* Rythme despacement — multiples de 4. */
      --e-1:4px; --e-2:8px; --e-3:12px; --e-4:16px; --e-5:24px; --e-6:32px;
      /* Cible tactile minimale (WCAG 2.5.8) — cet outil se manipule au doigt. */
      --cible:24px;

      /* PALETTE DES BADGES — deux familles, chaque paire VERIFIEE >= 4,5:1.
         ALERTE = une action est attendue : fond sature, texte blanc, cela doit
         dominer le regard. ETAT = information : fond sombre teinte, texte clair,
         lisible sans crier, pour ne pas concurrencer les alertes. */
      --al-rouge:#c1121f;  --al-orange:#a85c00; --al-ambre:#8a6600;
      --al-vert:#1f7a45;   --al-bleu:#1a56a0;
      /* Extremite SOMBRE du degrade de chaque alerte (29/07/2026). Tous les
         boutons et pastilles d alerte s ecrivent linear-gradient(135deg,
         var(--al-X), var(--al-X-f)) : sans ces jetons, changer une couleur de
         marque laissait son degrade en arriere. Valeurs inchangees, seul le nom
         est nouveau. --al-bleu-f vaut la meme chose que --et-bleu-f et reste un
         jeton DISTINCT : ce sont deux roles differents, retinter les pastilles
         d etat ne doit pas retinter les boutons. */
      --al-rouge-f:#8a1c17; --al-orange-f:#7d4400; --al-ambre-f:#6b4f00;
      --al-vert-f:#145530;  --al-bleu-f:#123d73;
      --et-orange-f:#5a3000; --et-orange-t:#ffd9a3;
      --et-bleu-f:#123d73;   --et-bleu-t:#cfe4ff;
      --et-rouge-f:#6b1410;  --et-rouge-t:#ffcfcb;
      --et-vert-f:#12492b;   --et-vert-t:#b7f0cd;
      --et-gris-f:#2a3446;   --et-gris-t:#d3dcea;
      --et-clair-f:#e8eefb;  --et-clair-t:#16202f;
    }
    *{box-sizing:border-box}
    html,body{margin:0}
    body{font-family:"Satoshi",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
      background:
        radial-gradient(900px 420px at 85% -5%, rgba(26,86,160,.35), transparent 60%),
        radial-gradient(700px 380px at -10% 30%, rgba(255,138,0,.08), transparent 55%),
        var(--fond);
      color:var(--texte);line-height:1.5;-webkit-font-smoothing:antialiased}
    header.top{position:sticky;top:0;z-index:10;color:#fff;padding:10px 18px;
      background:rgba(7,13,24,.85);
      -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
      border-bottom:1px solid var(--bordure);
      display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px}
    header.top .brand{display:flex;align-items:center;gap:10px;font-weight:700;font-size:17px;letter-spacing:.2px}
    header.top .brand img{height:30px;width:auto;display:block}
    header.top nav{display:flex;gap:6px;flex-wrap:wrap}
    header.top nav a{color:#fff;text-decoration:none;font-size:13.5px;font-weight:600;
      padding:7px 12px;border-radius:8px;background:rgba(255,255,255,.12);transition:.15s}
    header.top nav a:hover{background:rgba(255,255,255,.26)}
    /* « Reprendre où j'en étais » (30/07/2026) : le déclencheur du menu reprend EXACTEMENT
       l'apparence des boutons voisins ; le panneau reprend les jetons de carte. */
    header.top nav .nav-recents-btn{display:inline-block;color:#fff;font-size:13.5px;font-weight:600;
      padding:7px 12px;border-radius:8px;background:rgba(255,255,255,.12);transition:.15s}
    header.top nav .nav-recents summary::-webkit-details-marker{display:none}
    header.top nav .nav-recents[open] .nav-recents-btn,
    header.top nav .nav-recents-btn:hover{background:rgba(255,255,255,.26)}
    header.top nav .nav-recents a{background:transparent}
    header.top nav .nav-recents a:hover{background:rgba(255,255,255,.14)}
    /* Page en cours de consultation : bouton mis en évidence */
    header.top nav a.actif{background:linear-gradient(135deg,#1a56a0,#123d73);
      box-shadow:0 4px 14px rgba(47,127,224,.4);border:1px solid rgba(255,255,255,.25)}
    header.top nav a.actif:hover{filter:brightness(1.12);background:linear-gradient(135deg,#1a56a0,#123d73)}
    main{max-width:820px;margin:0 auto;padding:18px 16px 40px}
    .card{background:var(--carte);border:1px solid var(--bordure);border-radius:var(--radius);
      -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
      box-shadow:var(--ombre);padding:20px 22px;margin-bottom:18px}
    h1{font-size:21px;margin:0 0 16px;color:var(--bleu-fonce)}
    small{font-size:var(--t-xs)}
    h1 small{font-weight:400;color:var(--gris);font-size:var(--t-sm)}
    h2{font-size:15.5px;margin:20px 0 10px;color:var(--bleu-fonce);padding-bottom:6px;border-bottom:2px solid var(--bleu-clair)}
    .badge{display:inline-block;padding:3px 11px;border-radius:var(--r-pill);font-size:var(--t-xs);
      font-weight:700;letter-spacing:.3px;white-space:nowrap;vertical-align:middle}
    /* Famille ALERTE — fond sature + blanc. Reservee au « il faut agir ». */
    .badge.al-rouge {background:var(--al-rouge); color:#fff;border:1px solid rgba(0,0,0,.28);font-weight:800}
    .badge.al-orange{background:var(--al-orange);color:#fff;border:1px solid rgba(0,0,0,.28);font-weight:800}
    .badge.al-ambre {background:var(--al-ambre); color:#fff;border:1px solid rgba(0,0,0,.28);font-weight:800}
    .badge.al-vert  {background:var(--al-vert);  color:#fff;border:1px solid rgba(0,0,0,.28)}
    .badge.al-bleu  {background:var(--al-bleu);  color:#fff;border:1px solid rgba(0,0,0,.28)}
    /* Famille ETAT — fond sombre teinte + texte clair. Information, pas alarme. */
    .badge.et-orange{background:var(--et-orange-f);color:var(--et-orange-t);border:1px solid rgba(255,217,163,.30)}
    .badge.et-bleu  {background:var(--et-bleu-f);  color:var(--et-bleu-t);  border:1px solid rgba(207,228,255,.28)}
    .badge.et-rouge {background:var(--et-rouge-f); color:var(--et-rouge-t); border:1px solid rgba(255,207,203,.28)}
    .badge.et-vert  {background:var(--et-vert-f);  color:var(--et-vert-t);  border:1px solid rgba(183,240,205,.28)}
    .badge.et-gris  {background:var(--et-gris-f);  color:var(--et-gris-t);  border:1px solid rgba(211,220,234,.22)}
    .badge.et-clair {background:var(--et-clair-f); color:var(--et-clair-t); border:1px solid #c3cede}
    /* Un badge ne doit JAMAIS deborder de sa carte (plainte client 13/07 : texte hors du cadre
       « rapport valide ») : borne a 100% et retour a la ligne quand le libelle est long. */
    .card .badge{max-width:100%;white-space:normal;overflow-wrap:anywhere;height:auto}
    /* Nature du document = information, donc famille ETAT. Le journalier orange en
       blanc plafonnait a 3,0 pour un seuil de 4,5 : il etait illisible au soleil. */
    .badge.i{background:var(--et-bleu-f);  color:var(--et-bleu-t);  border:1px solid rgba(207,228,255,.28)}
    .badge.j{background:var(--et-orange-f);color:var(--et-orange-t);border:1px solid rgba(255,217,163,.30)}
    .badge.m{background:var(--et-vert-f);  color:var(--et-vert-t);  border:1px solid rgba(183,240,205,.28)}
    label{display:block;font-weight:600;font-size:13.5px;margin:14px 0 5px;color:#c6d4ea}
    input[type=text],input[type=date],input[type=time],input[type=number],input[type=password],
    input[type=email],input[type=tel],textarea,select{
      width:100%;padding:11px 12px;border:1px solid var(--bordure);border-radius:10px;
      font-size:16px;background:rgba(255,255,255,.06);color:var(--texte);transition:border-color .15s,box-shadow .15s;
      color-scheme:dark}
    select option{color:#101820;background:#fff}
    /* CIBLES TACTILES (WCAG 2.5.8) — les cases natives font 17 px sur cet ecran, soit
       moins que le minimum de 24. Sur un chantier, au doigt et parfois avec des gants,
       cela se traduit par des coches manquees. */
    input[type=checkbox],input[type=radio]{
      width:var(--cible);height:var(--cible);min-width:var(--cible);
      accent-color:var(--bleu);vertical-align:middle;cursor:pointer;margin:0 6px 0 0}
    input:focus,textarea:focus,select:focus{outline:none;border-color:var(--bleu);box-shadow:0 0 0 3px rgba(77,163,255,.2)}
    textarea{min-height:74px;resize:vertical}
    /* Bouton « Choisir les fichiers » : même taille que le bouton « Envoyer le rapport » */
    input[type=file]{width:100%;color:#e8eefb;font-size:14px;font-weight:600}
    input[type=file]::file-selector-button{
      display:block;width:100%;height:50px;margin:0 0 8px;padding:0 20px;
      border:1px solid #d7dee8;border-radius:10px;
      background:#ffffff;color:#5a6675;
      font-size:16px;font-weight:600;font-family:inherit;cursor:pointer;
      box-shadow:0 8px 22px rgba(0,0,0,.18);transition:.15s}
    input[type=file]::file-selector-button:hover{background:#f2f5f9}
    /* iPhone/Safari : les champs date restent DANS leur cadre (pas de débordement à droite)
       et ont exactement la même hauteur que les listes déroulantes (ex. cadre Motif). */
    input[type=date],input[type=time]{-webkit-appearance:none;appearance:none;min-width:0;max-width:100%;height:46px}
    select{height:46px}
    /* MENUS DEROULANTS SIGNALES (docx client 16/07/2026) : chevron visible sur TOUS les
       select ET sur les champs a liste de choix (datalist input[list]) de TOUS les formulaires. */
    select, input[list]{
      -webkit-appearance:none;appearance:none;
      background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2714%27%20height%3D%279%27%3E%3Cpath%20d%3D%27M1.5%201.5l5.5%205.5%205.5-5.5%27%20stroke%3D%27%237cbcff%27%20stroke-width%3D%272.2%27%20fill%3D%27none%27%20stroke-linecap%3D%27round%27%2F%3E%3C%2Fsvg%3E");
      background-repeat:no-repeat;background-position:right 12px center;padding-right:36px}
    input[type=text],input[type=number],input[type=password],input[type=email],input[type=tel]{height:46px}
    .row{display:flex;gap:12px;flex-wrap:wrap}
    /* ALIGNEMENT UNIFORME DES CADRES (demande client 18/07/2026) : dans une rangée,
       les champs sont ANCRES EN BAS de leur colonne — un libelle qui passe sur 2 lignes
       (ex. Heure d arrivee sur site * + pastille d aide) ne decale plus son cadre par
       rapport a Temps de pose / Temps sur site. Toutes les pages (CSS commun). */
    .row>div{flex:1;min-width:140px;display:flex;flex-direction:column;justify-content:flex-end}
    .row>div, .filtres>div{max-width:100%;min-width:0}
    .row>div{flex:1 1 140px}.filtres>div{flex:1 1 130px}
    .btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;
      height:46px;padding:0 20px;border:1px solid transparent;border-radius:10px;
      background:linear-gradient(135deg,#1a56a0,#123d73);color:#fff;font-size:15px;font-weight:600;line-height:1;
      cursor:pointer;text-decoration:none;text-align:center;transition:.15s;white-space:nowrap;
      box-shadow:0 8px 22px rgba(47,127,224,.25)}
    .btn:hover{filter:brightness(1.1)}
    .btn:active{transform:translateY(1px)}
    .btn.sec{background:rgba(255,255,255,.09);border-color:var(--bordure);box-shadow:none}
    .btn.sec:hover{background:rgba(255,255,255,.16)}
    .btn.danger{background:linear-gradient(135deg,#c1121f,#8a1c17);box-shadow:0 8px 22px rgba(217,69,60,.25)}
    .btn.ghost{background:rgba(255,255,255,.04);color:#8ec5ff;border-color:var(--bordure);box-shadow:none}
    .btn.ghost:hover{background:rgba(77,163,255,.15)}
    .btn.small{height:36px;padding:0 14px;font-size:13.5px;border-radius:8px}
    .btn.wide{width:100%;height:50px;font-size:16px;margin-top:18px}
    .actions{display:grid;grid-template-columns:1fr 1fr;gap:6px;width:236px;max-width:100%}
    /* Aucun bloc d actions ne doit sortir de sa cellule, quelle que soit la largeur d ecran. */
    .tablewrap{max-width:100%}
    td .rangee-actions, td .actions{max-width:100%}
    .actions>*{width:100%;margin:0}
    .actions .btn{width:100%;padding-left:6px;padding-right:6px}
    .actions>form:last-child{grid-column:1 / -1}
    /* Rangées d’actions HOMOGÈNES : GRILLE à cellules identiques — tous les boutons ont
       exactement la même dimension, sur une ou plusieurs lignes uniformes.
       Sur téléphone : boutons empilés pleine largeur. */
    .rangee-actions{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));grid-auto-rows:1fr;gap:10px;margin-top:18px}
    .rangee-actions .btn{width:100%;height:100%;justify-content:center;text-align:center;white-space:normal;min-height:46px;padding:10px 12px}
    .rangee-actions form{margin:0;display:flex;gap:10px}
    .rangee-actions form .btn{flex:1}
    /* Couple « menu technicien + bouton » : DEUX cellules de la grille, chacune STRICTEMENT
       de la même largeur que toutes les autres cellules (grille interne 1fr/1fr). */
    .rangee-actions form.deux{grid-column:span 2;display:grid;grid-template-columns:1fr 1fr;gap:10px}
    .rangee-actions form.deux select{width:100%;min-width:0;height:100%;min-height:46px}
    .rangee-actions form.deux .btn{width:100%}
    @media(max-width:640px){
      .rangee-actions{grid-template-columns:1fr;grid-auto-rows:auto;gap:8px}
      .rangee-actions form.deux{grid-column:auto;grid-template-columns:1fr}
      .rangee-actions form.deux select,.rangee-actions form.deux .btn{width:100%}
    }
    /* POLISSAGE GLOBAL MOBILE (demande client 19/07/2026 — usage iPhone Pro Max) :
       lisibilite, contraste et confort de saisie d une main, sur TOUTES les pages. */
    h1,h2{color:#ffffff}
    label{color:#dbe6f7}
    .btn.sec{color:#eaf2ff;border:1px solid rgba(255,255,255,.28)}
    a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
      outline:2px solid #7cbcff;outline-offset:2px}
    @media(max-width:640px){
      /* iOS zoome sur tout champ < 16px : on garantit 16px en mobile (fin du zoom intempestif) */
      input,select,textarea{font-size:16px}
      body{font-size:16px}
      .card{padding:16px 14px}
      h1{font-size:21px}h2{font-size:17px}
    }
    .msg{padding:13px 15px;border-radius:10px;margin-bottom:16px;font-size:14.5px;font-weight:500}
    .msg.ok{background:rgba(87,199,133,.12);color:#8fe3a8;border:1px solid rgba(87,199,133,.35)}
    .msg.err{background:rgba(255,99,92,.12);color:#ffa39d;border:1px solid rgba(255,99,92,.35)}
    .tablewrap{overflow-x:auto;border:1px solid var(--bordure);border-radius:12px}
    /* AUCUNE TABLE NE DOIT SORTIR DE L ECRAN, MEME EN TABLETTE PAYSAGE / PC (audit 11/07/2026) :
       les cellules coupent les mots longs et aucun contenu n impose une largeur minimale. */
    table{width:100%;max-width:100%;border-collapse:collapse;font-size:14px;table-layout:auto}
    th,td{padding:11px 12px;border-bottom:1px solid rgba(255,255,255,.07);text-align:left;vertical-align:middle;
          overflow-wrap:anywhere;word-break:break-word}
    td .btn, td .badge, td input, td select, td form{max-width:100%}
    td input[type=date]{width:100%;min-width:112px;max-width:150px}
    th{background:rgba(255,255,255,.045);font-size:12.5px;text-transform:uppercase;letter-spacing:.4px;color:var(--gris)}
    tbody tr:last-child td{border-bottom:0}
    tbody tr:hover{background:rgba(255,255,255,.035)}
    .site-bloc{border:1px solid var(--bordure);border-left:4px solid var(--bleu);border-radius:12px;padding:14px 16px;margin:16px 0;background:rgba(255,255,255,.03)}
    .photo-grid{display:flex;flex-wrap:wrap;gap:10px;margin-top:10px}
    .photo-grid img{width:104px;height:104px;object-fit:cover;border-radius:10px;border:1px solid var(--bordure)}
    /* Styles .badge unifiés : définis plus haut (bleu = Intervention, orange = Journalier) */
    .filtres{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end;margin-bottom:16px}
    .filtres>div{min-width:130px}.filtres label{margin:0 0 4px}
    a{color:var(--bleu)}
    /* Filet anti-débordement (portrait mobile) : images et boutons bornés à leur conteneur. */
    .card img{max-width:100%}
    .btn{max-width:100%}
    @media(max-width:600px){
      main{padding:14px 12px 32px}.card{padding:16px}
      th,td{padding:9px 8px;font-size:13px}
      /* Telephone : un libelle de bouton long revient a la ligne au lieu d etre COUPE. */
      .btn{white-space:normal;height:auto;min-height:46px;line-height:1.25;padding-top:8px;padding-bottom:8px}
      .btn.small{height:auto;min-height:38px}
      header.top .brand{font-size:15px}
    }
    /* ==========================================================================
       TÉLÉPHONE EN PORTRAIT — RÈGLE GLOBALE ANTI-DÉBORDEMENT (cause racine).
       TOUTES les tables de données (liste admin, historique, astreinte, planning,
       stats, éditeurs…) deviennent des CARTES EMPILÉES : chaque ligne = une carte,
       chaque cellule sur sa propre ligne, avec le libellé de colonne (attribut data-l)
       affiché en tête, et retour à la ligne forcé des longs libellés/URL. Résultat :
       AUCUNE colonne coupée, AUCUN défilement horizontal, sur 320→640 px.
       Opt-out possible avec la classe .no-stack (à réserver aux cas très particuliers). */
    /* EMPILEMENT UNIVERSEL DES TABLES — A TOUTES LES LARGEURS (12/07/2026).
       Historique : le seuil est passe de 640 a 900 px, mais le probleme d ECRASEMENT
       DES COLONNES persistait AU-DESSUS de 900 px (une table de 6-8 colonnes placee dans
       une carte de ~780 px : chaque colonne fait 60-90 px, les mots se coupent lettre par
       lettre => texte illisible/tronque : « A-s-s-i-g-n-e-r », « PERIOD. »).
       CAUSE RACINE : une liste de donnees en COLONNES ne tient pas dans une carte.
       => REGLE PERMANENTE : plus AUCUNE liste de donnees en tableau a colonnes.
       Chaque ligne devient une CARTE (libelle de colonne via data-l), a TOUTES les largeurs.
       Opt-out : .no-stack (grille etroite qui tient toujours : stats, 2 colonnes)
                 .stack-mobile (editeur de lignes : colonnes en PC, cartes sous 900 px). */
    table:not(.no-stack):not(.stack-mobile), table:not(.no-stack):not(.stack-mobile) tbody,
    table:not(.no-stack):not(.stack-mobile) tr, table:not(.no-stack):not(.stack-mobile) th,
    table:not(.no-stack):not(.stack-mobile) td{display:block;width:auto;max-width:100%}
    /* Masque les lignes de titres de colonnes (uniquement des th, aucune td),
       avec ou sans classe .entetes — les lignes cle/valeur (th + td) restent affichees. */
    table:not(.no-stack):not(.stack-mobile) thead,
    table:not(.no-stack):not(.stack-mobile) tr.entetes,
    table:not(.no-stack):not(.stack-mobile) tr:not(:has(td)){display:none}
    table:not(.no-stack):not(.stack-mobile) tr{border:1px solid var(--bordure);border-radius:12px;margin:0 0 12px;padding:12px 14px;background:rgba(255,255,255,.05);box-shadow:var(--ombre)}
    table:not(.no-stack):not(.stack-mobile) tbody tr:hover{background:rgba(255,255,255,.08)}
    table:not(.no-stack):not(.stack-mobile) td{border-bottom:0;padding:3px 0;white-space:normal;overflow-wrap:anywhere;word-break:break-word}
    table:not(.no-stack):not(.stack-mobile) td:last-child{padding-top:10px}
    table:not(.no-stack):not(.stack-mobile) td[data-l]::before{content:attr(data-l) " : ";font-weight:700;color:var(--gris);margin-right:4px}
    /* Boutons d une ligne-carte : tous a la meme hauteur, jamais de texte vertical. */
    table:not(.no-stack) td .btn{height:42px;min-height:42px;min-width:120px;white-space:nowrap;display:inline-flex;align-items:center;justify-content:center;margin:0 6px 6px 0}
    table:not(.no-stack) td .actions{display:flex;flex-wrap:wrap;gap:8px}
    /* Filet ultime : aucun mot / URL / référence ne dépasse le bord de sa carte. */
    .card, .card p, .card li, .card td, .card th, .card a, .card small, .card strong, .card span{overflow-wrap:anywhere;word-break:break-word}
    @media(max-width:900px){
      /* Les editeurs de lignes (.stack-mobile) restent en colonnes sur PC mais
         s empilent en cartes sur telephone / tablette. */
      table.stack-mobile, table.stack-mobile tbody, table.stack-mobile tr,
      table.stack-mobile th, table.stack-mobile td{display:block;width:auto;max-width:100%}
      table.stack-mobile thead, table.stack-mobile tr.entetes, table.stack-mobile tr:not(:has(td)){display:none}
      table.stack-mobile tr{border:1px solid var(--bordure);border-radius:12px;margin:0 0 12px;padding:12px 14px;background:rgba(255,255,255,.05)}
      table.stack-mobile td{border-bottom:0;padding:3px 0;white-space:normal;overflow-wrap:anywhere}
      table.stack-mobile td[data-l]::before{content:attr(data-l) " : ";font-weight:700;color:var(--gris);margin-right:4px}
      .actions{width:100%;display:flex;flex-wrap:wrap;gap:6px}
      .actions .btn{flex:1 1 auto;white-space:normal}
      /* Filtres admin : 2 champs par ligne (Type|Technicien puis Du|Au). */
      .filtres>div{flex:1 1 calc(50% - 5px);min-width:calc(50% - 5px)}
      .filtres>div[style*="flex-basis:100%"]{flex:1 1 100%;min-width:100%}
      .filtres .btn.small{padding-left:10px;padding-right:10px}
    }

/* ===== aide contextuelle ===== */
.aide-q{display:inline-flex;align-items:center;justify-content:center;
  width:var(--cible,24px);height:var(--cible,24px);min-width:var(--cible,24px);margin-left:6px;
  border-radius:50%;background:var(--al-bleu,#1a56a0);color:#fff;font-size:var(--t-xs,12.5px);
  font-weight:800;cursor:pointer;border:0;
  vertical-align:middle;flex:0 0 auto;line-height:1;
  /* La CIBLE reste a 24 px (WCAG 2.5.8) mais le disque VISIBLE en fait 18 : le
     padding est transparent grace a background-clip, donc la pastille reste
     discrete a cote du libelle tout en restant facile a toucher au doigt. */
  padding:3px;background-clip:content-box}
.aide-q:hover{filter:brightness(1.25)}
#aideVoile{display:none;position:fixed;inset:0;z-index:1005;background:rgba(10,20,38,.9);padding:18px;overflow:auto}
#aideVoile .aide-carte{max-width:460px;margin:12vh auto 0;background:#101d33;border:1px solid #2f7fe0;
  border-radius:14px;padding:20px 22px;box-shadow:0 20px 60px rgba(0,0,0,.5)}
#aideVoile h3{margin:0 0 8px;color:#7cbcff;font-size:17px}
#aideVoile p{margin:0 0 12px;color:#e8eefb;font-size:14.5px;line-height:1.5;white-space:pre-line}
#aideVoile small{color:#9fb0ca}

/* ===== coller / glisser-deposer ===== */
.ares-filewrap{position:relative}
.ares-drophint{display:block;margin:4px 0 0;font-size:var(--t-xs,12.5px);color:#8fa3c2}
.ares-drophint b{color:#9fdcae}
.ares-fileinput.ares-dragover{outline:2px dashed #2f9e5f;outline-offset:3px;background:rgba(47,158,95,.10)}
#aresPasteToast{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);background:#0d1b30;border:1px solid #2f9e5f;color:#cfe9d8;padding:10px 16px;border-radius:10px;z-index:4000;box-shadow:0 6px 24px rgba(0,0,0,.4);font-size:13.5px;opacity:0;transition:opacity .2s;pointer-events:none;max-width:90vw}
#aresPasteToast.show{opacity:1}

/* ===== cartes contrat (maintenance) ===== */
.contrats-grid{display:grid;grid-template-columns:1fr;gap:12px}                 /* TOUJOURS 1 colonne */
.contrat{border:1px solid var(--bordure);border-radius:12px;padding:14px 16px;background:rgba(255,255,255,.03);min-width:0;overflow-wrap:anywhere}
.contrat.epinglee{border-color:#c1121f;background:rgba(193,18,31,.10)}
.contrat.urgente{border-color:#ff8c00;background:rgba(255,140,0,.08)}
.contrat-tete{display:flex;gap:10px;align-items:flex-start;justify-content:space-between;flex-wrap:wrap}
.contrat-site strong{font-size:16.5px;line-height:1.3}
.contrat-type{color:#9fb0ca;font-size:13.5px;margin-top:2px}
.contrat-badges{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.contrat-infos{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px 16px;margin:12px 0;padding:10px 0;border-top:1px solid rgba(255,255,255,.07);border-bottom:1px solid rgba(255,255,255,.07)}
.contrat-infos > div{min-width:0}
.contrat-infos dt{font-size:var(--t-xs,12.5px);text-transform:uppercase;letter-spacing:.05em;color:#9fb0ca;margin:0}
.contrat-infos dd{margin:3px 0 0;font-size:15px;font-weight:600}
.contrat-infos dd.pv{font-size:18px;color:#fff}
/* RANGÉE D ACTIONS UNIFORMISÉE (demande client 18/07/2026) : GRILLE homogène — chaque
   commande occupe une cellule de même gabarit (hauteur 46 px), l assignation occupe la
   pleine largeur. Fini les boutons de tailles disparates qui s empilent en escalier. */
.contrat-actions{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:8px;align-items:stretch;margin-top:2px}
.contrat-actions>*{margin:0;min-width:0}
.contrat-actions .btn{height:46px;width:100%;min-width:0;padding:0 14px;display:inline-flex;align-items:center;justify-content:center;white-space:normal;font-size:14px}
.contrat-actions .assign-form{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:8px;align-items:stretch}
.contrat-actions .assign-form select{flex:1 1 200px;min-width:150px;max-width:100%;height:46px;margin:0;padding:0 10px;font-size:14px}
.contrat-actions .assign-form .btn{width:auto;min-width:120px;flex:0 0 auto}
.contrat-actions .assign-form .btn.ghost{min-width:46px;padding:0 12px}
.contrat-actions .lot-sel{width:100%;justify-content:center}
.prio-form{display:flex;align-items:center;gap:8px;background:rgba(255,255,255,.06);border:1px solid var(--bordure);border-radius:9px;padding:0 10px;min-height:46px;margin:0;min-width:0}
.prio-form .prio-lbl{font-size:var(--t-xs,12.5px);color:#c6d4ea;font-weight:700;white-space:nowrap;text-transform:uppercase;letter-spacing:.03em}
.prio-form select{flex:1 1 auto;min-width:0;height:36px;margin:0;padding:0 8px;font-size:13.5px;border:0;background-color:transparent}
.contrat-reglages{margin-top:12px;border-top:1px solid rgba(255,255,255,.07);padding-top:8px}
.contrat-reglages summary{cursor:pointer;color:#9fb0ca;font-size:13.5px;font-weight:600;list-style:none;padding:5px 0}
.contrat-reglages summary::-webkit-details-marker{display:none}
.contrat-reglages summary:before{content:"\25B8 ";color:#7cbcff}
.contrat-reglages[open] summary:before{content:"\25BE "}
.reglage{margin:12px 0}
.reglage-lbl{display:block;font-size:12.5px;color:#c6d4ea;font-weight:600;margin-bottom:6px}
.reglage-lbl small{font-weight:400;color:#9fb0ca}
.reglage-form{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.reglage-form input[type=date],.reglage-form input[type=month]{margin:0;flex:1 1 150px;min-width:0;max-width:190px;height:42px}
.reglage-form .btn,.peri-choix .btn{height:42px;min-width:120px;display:inline-flex;align-items:center;justify-content:center;white-space:nowrap}
/* Case de sélection pour l assignation en masse (14/07/2026) */
.contrat .lot-sel{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:14px;color:#cfe0f5;
  background:rgba(255,255,255,.06);border:1px solid var(--bordure);border-radius:9px;padding:0 14px;min-height:46px;cursor:pointer;flex:0 0 auto;margin:0}
.contrat .lot-sel input{width:var(--cible);height:var(--cible);margin:0}
.lot-barre{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.lot-barre select{flex:1 1 200px;max-width:280px;height:44px;margin:0}
.lot-barre .btn{height:44px;white-space:normal}
.reglage .montant{font-weight:700;color:#4fd08a;font-size:15px}
.peri-choix{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center}
.peri-choix label{display:inline-flex;align-items:center;gap:5px;font-size:13.5px;white-space:nowrap;margin:0}
.peri-choix input[type=checkbox]{width:var(--cible);height:var(--cible);margin:0}

/* ===== visionneuse photos ===== */
a.ares-photo{cursor:zoom-in}
#aresLb{position:fixed;inset:0;background:rgba(0,0,0,.93);z-index:100000;display:none;align-items:center;justify-content:center;flex-direction:column}
#aresLb.on{display:flex}
#aresLbImg{max-width:94vw;max-height:80vh;object-fit:contain;border-radius:8px;box-shadow:0 8px 34px rgba(0,0,0,.6);-webkit-user-select:none;user-select:none}
#aresLb .lb-cap{color:#e6eefc;font-size:14px;margin-top:12px;max-width:90vw;text-align:center;padding:0 12px}
#aresLb .lb-count{color:#9fb0ca;font-size:13px;margin-top:4px}
#aresLb button{position:absolute;background:rgba(20,28,44,.72);color:#fff;border:1px solid rgba(255,255,255,.28);border-radius:50%;width:56px;height:56px;font-size:28px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;-webkit-tap-highlight-color:transparent}
#aresLb button:active{background:rgba(47,127,224,.6)}
#aresLb .lb-prev{left:14px;top:50%;transform:translateY(-50%)}
#aresLb .lb-next{right:14px;top:50%;transform:translateY(-50%)}
#aresLb .lb-close{top:16px;right:16px;width:46px;height:46px;font-size:24px}
@media(max-width:600px){#aresLb button{width:48px;height:48px;font-size:24px}#aresLbImg{max-height:74vh}}