:root{--bleu:#23305e;--turquoise:#038391;--vert:#6dbd8d;--orange:#f7ad71;--rouge:#d9534f; --fond:#f4f6fb;--carte:#fff;--gris:#5d6c7b;--trait:#e3e7f0} *{box-sizing:border-box;margin:0;padding:0} body{font-family:Montserrat,system-ui,sans-serif;color:var(--bleu);background:var(--fond);font-size:14px;line-height:1.45} a{color:var(--turquoise)} .chargement{padding:60px;text-align:center;color:var(--gris)} .cache{display:none!important} .ms{font-family:'Material Symbols Outlined';font-weight:normal;font-style:normal;font-size:20px;line-height:1;letter-spacing:normal;text-transform:none; display:inline-block;white-space:nowrap;direction:ltr;-webkit-font-feature-settings:'liga';font-feature-settings:'liga';-webkit-font-smoothing:antialiased; font-variation-settings:'FILL' 0,'wght' 400,'GRAD' 0,'opsz' 20;vertical-align:middle} .btn .ms{font-size:18px} aside nav a .ms{font-size:20px} aside .bas button{display:inline-flex;align-items:center;gap:6px} aside .bas button .ms{font-size:16px} .bandeau-telephone{display:none} .btn{display:inline-flex;align-items:center;gap:8px;background:var(--turquoise);color:#fff;border:0;border-radius:8px;padding:10px 16px;font:inherit;font-weight:600;text-decoration:none;cursor:pointer;white-space:nowrap} .btn:disabled{opacity:.55;cursor:default} .btn.clair{background:#fff;color:var(--bleu);border:1px solid var(--trait)} .btn.danger{background:#fff;color:var(--rouge);border:1px solid #f1c7c5} .btn.petit{padding:6px 11px;font-size:12.5px;color:#fff} .btn.clair.petit{color:var(--bleu)} .btn.danger.petit{color:var(--rouge)} input,select{font:inherit;color:var(--bleu);border:1px solid var(--trait);border-radius:8px;padding:10px 12px;width:100%;background:#fff} input:focus,select:focus{outline:2px solid rgba(3,131,145,.35);border-color:var(--turquoise)} label{display:block;font-weight:600;font-size:13px;margin:14px 0 6px} .aide,.petit{font-size:12px;color:var(--gris)} .erreur{background:#fde2e0;color:#8d2320;border-radius:8px;padding:10px 12px;font-size:13px;margin-top:12px} /* Connexion */ .connexion{display:grid;place-items:center;min-height:100vh;padding:20px} .boite{background:#fff;border-radius:16px;box-shadow:0 10px 40px rgba(35,48,94,.08);padding:36px;width:100%;max-width:420px} .boite .logo-img{height:34px} .boite h1{font-size:22px;margin:22px 0 6px} .boite p{color:var(--gris);margin-bottom:8px} .boite .btn{width:100%;justify-content:center;margin-top:20px} .code{text-align:center;font-size:24px;font-weight:700;letter-spacing:10px} .lien-bouton{background:none;border:0;color:var(--turquoise);font:inherit;font-weight:600;cursor:pointer;margin-top:14px} /* Cadre */ .cadre{display:grid;grid-template-columns:230px 1fr;min-height:100vh} aside{background:var(--bleu);color:#c9d2ea;padding:22px 16px;display:flex;flex-direction:column;gap:6px;position:sticky;top:0;height:100vh;align-self:start;overflow-y:auto} aside .logo{display:flex;align-items:center;gap:10px;color:#fff;font-weight:800;font-size:18px;margin:0 8px 24px;text-decoration:none} aside .logo img{height:26px;filter:brightness(0) invert(1)} aside .logo b{color:var(--vert);font-weight:800} aside nav a{color:inherit;text-decoration:none;padding:10px 12px;border-radius:8px;font-weight:600;display:flex;gap:10px} aside nav a.sel{background:rgba(255,255,255,.12);color:#fff} aside nav{display:flex;flex-direction:column;gap:2px} .groupe{display:flex;flex-direction:column} .groupe-tete{display:flex;align-items:center;justify-content:space-between;width:100%;border:0;background:transparent;color:rgba(255,255,255,.5);font:inherit;font-weight:700;font-size:10.5px;letter-spacing:.05em;text-transform:uppercase;padding:12px 12px 4px;cursor:pointer} .groupe-tete .chev{font-size:18px;opacity:.7;transition:transform .15s} .groupe-liens{display:flex;flex-direction:column;gap:2px} .groupe:not(.ouvert) .groupe-liens{display:none} .groupe:not(.ouvert) .groupe-tete .chev{transform:rotate(-90deg)} aside .bas{margin-top:auto;font-size:12px;border-top:1px solid rgba(255,255,255,.15);padding:14px 8px 0} aside .bas b{display:block;color:#fff;font-size:13px} aside .bas button{background:none;border:0;color:#c9d2ea;font:inherit;font-weight:600;cursor:pointer;padding:8px 0 0;text-decoration:underline} main{padding:28px 32px;min-width:0} .entete{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;margin-bottom:22px;flex-wrap:wrap} .entete h1{font-size:24px} .entete p{color:var(--gris);margin-top:4px} .carte{background:var(--carte);border-radius:14px;box-shadow:0 2px 10px rgba(35,48,94,.05);padding:20px} .carte.tableau{padding:6px 8px;overflow-x:auto} .filtres{display:flex;gap:10px;margin-bottom:16px;flex-wrap:wrap} .filtres input,.filtres select{width:auto;min-width:190px;flex:0 1 auto} .vide{padding:30px;text-align:center;color:var(--gris)} table{width:100%;border-collapse:collapse} th{text-align:left;font-size:12px;color:var(--gris);font-weight:600;padding:10px 12px;border-bottom:1px solid var(--trait);white-space:nowrap} td{padding:11px 12px;border-bottom:1px solid var(--trait);vertical-align:middle} tr:last-child td{border-bottom:0} tr.lien{cursor:pointer} tr.lien:hover td{background:#f8faff} .pastille{display:inline-block;font-size:11px;font-weight:700;padding:3px 9px;border-radius:20px;white-space:nowrap} .p-ok{background:#e7f5ec;color:#2f7d4f}.p-al{background:#fde2e0;color:var(--rouge)} .p-to{background:#fdeedd;color:#b56a1e}.p-hl{background:#fdeedd;color:#b56a1e}.p-off{background:#eceff4;color:#6b7686} .role{font-size:12px;font-weight:600;padding:3px 8px;border-radius:6px;background:#eaf6ff;color:var(--turquoise);white-space:nowrap} .actions{display:flex;gap:6px;justify-content:flex-end;flex-wrap:wrap} .droite{text-align:right} /* Pastille « base de test » (DEV uniquement) */ #lc-dev-badge{position:fixed;top:8px;left:50%;transform:translateX(-50%);z-index:9999;background:#e0a62e;color:#3a2d14;font-weight:800;font-size:12px;letter-spacing:.05em;padding:4px 14px;border-radius:20px;box-shadow:0 2px 10px rgba(0,0,0,.25);pointer-events:none;white-space:nowrap} @media print{#lc-dev-badge{display:none}} /* Barre latérale : lien Paramètres (dans le bloc du bas) */ aside .bas .param-lien{display:flex;align-items:center;gap:8px;color:#c9d2ea;text-decoration:none;font-weight:600;padding:8px 10px;border-radius:8px;margin-bottom:12px} aside .bas .param-lien:hover{background:rgba(255,255,255,.08);color:#fff} aside .bas .param-lien.sel{background:rgba(255,255,255,.12);color:#fff} aside .bas .param-lien .ms{font-size:20px} /* Mon compte */ .cartes-compte{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:16px;align-items:start} .cartes-compte .carte h2{display:flex;align-items:center;gap:8px;font-size:16px;margin:0 0 12px} .cartes-compte .carte h2 .ms{font-size:20px;color:var(--turquoise)} .carte-avenir{opacity:.9} .champ-ro{display:flex;flex-direction:column;gap:1px;padding:8px 0;border-bottom:1px solid var(--trait)} .champ-ro:last-of-type{border-bottom:0} .cartes-compte .carte .btn{margin-top:12px} .jauge-ligne{margin:8px 0} .jauge-tete{display:flex;justify-content:space-between;align-items:baseline;gap:8px;margin-bottom:4px;font-weight:600;font-size:13px} .jauge{height:9px;border-radius:20px;background:#eceff4;overflow:hidden} .jauge-fill{height:100%;border-radius:20px;background:var(--turquoise);transition:width .3s} .jauge-fill.moyen{background:#e0a62e}.jauge-fill.haut{background:var(--rouge)} .sep{height:1px;background:var(--trait);margin:12px 0} .gest{display:flex;align-items:center;gap:12px;margin:4px 0 12px} .gest-ava{width:44px;height:44px;border-radius:50%;background:var(--turquoise);color:#fff;display:grid;place-items:center;font-weight:800;font-size:18px;flex:0 0 auto} .gest-info b{display:block;color:var(--bleu)} .gest-info .petit{display:flex;align-items:center;gap:6px;margin-top:2px} .gest-info .petit .ms{font-size:15px;color:var(--gris)} .gest-info a{text-decoration:none;font-weight:600} /* Fiche capteur */ .fil{font-size:13px;color:var(--gris);margin-bottom:8px} .fil a{font-weight:600;text-decoration:none} .chiffres{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:16px} .chiffre{background:#fff;border-radius:14px;padding:16px 18px;box-shadow:0 2px 10px rgba(35,48,94,.05)} .chiffre small{color:var(--gris);font-weight:600;font-size:12px} .chiffre b{display:block;font-size:24px;margin-top:4px} .onglets{display:inline-flex;background:var(--fond);border-radius:8px;padding:3px} .onglets button{border:0;background:transparent;padding:7px 14px;border-radius:6px;font:inherit;font-weight:600;color:var(--gris);cursor:pointer} .onglets button.sel{background:#fff;color:var(--bleu);box-shadow:0 1px 3px rgba(0,0,0,.08)} .titre-carte{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;gap:10px;flex-wrap:wrap} .titre-carte h2{font-size:16px} .courbe{position:relative} .courbe svg{display:block;width:100%;height:280px} .courbe svg text{font-family:Montserrat,sans-serif;font-size:11px;fill:#8a96a8} .bulle{position:absolute;top:6px;background:var(--bleu);color:#fff;font-size:12px;padding:6px 9px;border-radius:8px;pointer-events:none;white-space:nowrap;transform:translateX(-50%)} .legende{display:flex;gap:18px;font-size:12px;color:var(--gris);margin-top:8px;flex-wrap:wrap} .legende i{display:inline-block;width:14px;height:4px;border-radius:2px;margin-right:6px;vertical-align:middle} .deux{display:grid;grid-template-columns:1.2fr 1fr;gap:16px;margin-top:16px} .rouge{color:var(--rouge)} /* Graphique (façon BlueCold) */ .carte-graphique{position:relative;margin-bottom:16px} .carte-graphique h2{font-size:20px} .bouton-fenetre{background:none;border:0;font:inherit;color:var(--gris);cursor:pointer;padding:4px 0;font-size:14px;display:inline-flex;align-items:center;gap:6px} .bouton-fenetre .ms{font-size:20px} .bouton-fenetre:hover{color:var(--turquoise)} /* Barre d'actions (Material 3 : boutons icônes groupés) */ .barre-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap} .champ-enligne{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--gris);font-weight:600} .champ-enligne select,#r-perso input[type=date]{margin:0;font-size:13px} .badge{display:inline-block;min-width:18px;text-align:center;margin-left:6px;padding:1px 6px;border-radius:20px;background:var(--rouge);color:#fff;font-size:11px;font-weight:700;line-height:1.4} .rapport-entete{display:flex;align-items:center;gap:16px} .rapport-entete .r-logo{height:30px} .chiffre .pastille{margin-top:8px} .barre-kpi{height:10px;background:#eef1f7;border-radius:6px;overflow:hidden;margin-top:6px} .barre-kpi span{display:block;height:100%;border-radius:6px} .kpi-ligne{display:flex;justify-content:space-between;align-items:baseline;gap:12px;font-size:13.5px} .kpi-ligne b{font-size:16px;white-space:nowrap} .liste-attention{list-style:none;margin:0;padding:0} .liste-attention li{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-bottom:1px solid var(--trait)} .liste-attention li:last-child{border-bottom:0} .lien-texte{display:inline-block;margin-top:12px;color:var(--turquoise);font-weight:600;font-size:13px;text-decoration:none} .lien-texte:hover{text-decoration:underline} .bascule-module{width:18px;height:18px;cursor:pointer;accent-color:var(--turquoise)} #mod-recherche{min-width:220px} .bloc-selection{align-items:center;gap:10px;margin:8px 0 4px} .pf-item{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--trait)} .pf-item:last-child{border-bottom:0} .pf-mod{display:flex;align-items:center;gap:8px;margin-top:8px;font-weight:600;cursor:pointer} .pf-mod input{width:17px;height:17px;accent-color:var(--turquoise)} .groupe-actions{display:inline-flex;border:1px solid var(--trait);border-radius:20px;overflow:hidden;background:#fff} .groupe-actions .icone{border:0;border-radius:0} .groupe-actions .icone + .icone{border-left:1px solid var(--trait)} .icone{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:40px;min-width:44px;padding:0 12px;background:#fff;color:var(--bleu); border:1px solid var(--trait);border-radius:20px;font:inherit;font-weight:600;font-size:13.5px;cursor:pointer} .icone.seul{width:40px;min-width:40px;padding:0} .icone .ms{font-size:20px} .icone:hover:not(:disabled){background:#eef7f8;color:var(--turquoise)} .icone:disabled{color:#b8c0cc;cursor:default} .icone.actif{background:#d5eef0;color:#02626c} .icone.actif .ms{font-variation-settings:'FILL' 1} .icone:focus-visible{outline:2px solid var(--turquoise);outline-offset:-2px} .graphique{height:400px;width:100%} .graphique.attente{opacity:.45} .periode-visible{font-size:12.5px;color:var(--gris);margin-top:6px} .carte-graphique:fullscreen{padding:24px;overflow:auto} .carte-graphique:fullscreen .graphique{height:calc(100vh - 170px)} #fenetre-choix{position:absolute;z-index:15;top:86px;left:20px} .fenetre{background:#fff;border-radius:12px;box-shadow:0 12px 40px rgba(35,48,94,.22);padding:16px;width:440px;max-width:calc(100vw - 60px)} .segments.grand{background:var(--fond);border-radius:30px;padding:4px;gap:4px} .segments.grand button{border:0;border-radius:30px;padding:10px;background:transparent} .segments.grand button.sel{background:var(--bleu);color:#fff} .fenetre-corps{border:1px solid var(--trait);border-radius:10px;padding:14px;margin-top:12px} .fenetre-ligne{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:12px;flex-wrap:wrap} .fenetre-ligne b{font-size:15px} .fuseau{border:1px solid var(--trait);border-radius:8px;padding:8px 10px;font-weight:700;font-size:12.5px;color:var(--turquoise)} .deux-champs{display:grid;grid-template-columns:1fr 1fr;gap:10px} .deux-champs label{margin:0;font-size:12px;color:var(--gris)} .deux-champs input{margin-top:4px} .fenetre .actions-bas{margin-top:14px} /* Parc */ .synchro{display:flex;align-items:center;gap:10px;background:#fff;border-radius:12px;padding:10px 14px;box-shadow:0 2px 10px rgba(35,48,94,.05);font-size:13px;color:var(--gris);margin-bottom:16px;flex-wrap:wrap} .synchro b{color:var(--bleu)} .synchro-actions{margin-left:auto;display:flex;align-items:center;gap:10px;flex-wrap:wrap} .sous-titre{font-size:16px;margin:4px 0 10px} .anomalies{background:#fff3e6;border:1px solid #f7d2ab;border-radius:12px;margin:-6px 0 16px;color:#8a4b12} .anomalies-titre{display:flex;align-items:center;gap:8px;width:100%;background:none;border:0;padding:10px 14px;font:inherit;font-weight:700;font-size:13px;color:inherit;cursor:pointer;text-align:left} .anomalies-titre .ms:last-child{margin-left:auto} .anomalies-titre[aria-expanded=true] .ms:last-child{transform:rotate(180deg)} .anomalies-liste{padding:0 14px 12px} .anomalies-liste td{padding:8px 10px;border-color:#f5dcc2;font-size:13px} .anomalies-liste a{color:#8a4b12;font-weight:600} .source{font-size:10px;font-weight:700;color:#8a96a8;background:#f0f2f6;border-radius:4px;padding:1px 5px;margin-left:6px;vertical-align:middle} .sites{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px;margin-bottom:20px} .site-carte{border:1px solid var(--trait);border-radius:12px;padding:14px 16px;display:flex;justify-content:space-between;align-items:center;gap:10px;background:#fff;font:inherit;color:var(--bleu);text-align:left} .site-carte b{display:block} .site-carte.ajout{border-style:dashed;justify-content:center;color:var(--turquoise);font-weight:600;cursor:pointer} .site-carte.ajout:hover{background:#f0fafa} tr.a-placer td{background:#fffaf3} a.icone{text-decoration:none} /* Tableau de bord du parc */ .tdb{display:grid;grid-template-columns:minmax(290px,1.6fr) repeat(4,minmax(0,1fr));gap:14px;margin-bottom:22px} .tuile{background:#fff;border-radius:14px;box-shadow:0 2px 10px rgba(35,48,94,.05);padding:16px 18px;cursor:pointer; border:2px solid transparent;display:flex;flex-direction:column;gap:10px;text-align:left;transition:border-color .15s,transform .15s;min-width:0} .tuile:hover{border-color:#cfe9ec;transform:translateY(-1px)} .tuile:focus-visible{outline:3px solid #9fd8de;outline-offset:2px} .tuile.sel{border-color:var(--turquoise);box-shadow:0 4px 16px rgba(3,131,145,.14)} .tuile-tete{display:flex;align-items:center;gap:8px;font-size:13.5px;font-weight:700} .rond{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-size:18px;flex:none} .t-rouge{background:#fde2e0;color:var(--rouge)}.t-orange{background:#fdeedd;color:#b56a1e}.t-vert{background:#e7f5ec;color:#2f7d4f} .tuile-chiffre{display:flex;align-items:baseline;gap:8px} .tuile-chiffre b{font-size:30px;line-height:1;font-weight:800} .tuile-chiffre span{font-size:12px;color:var(--gris)} .tuile-note{font-size:12px;color:var(--gris);line-height:1.45} .empile{display:flex;height:10px;border-radius:6px;overflow:hidden;background:#eef1f6;gap:2px} .empile i{display:block;min-width:4px} .legende-tdb{list-style:none;margin:0;padding:0;font-size:11.5px;color:var(--gris);display:grid;gap:3px} .legende-tdb li{display:flex;align-items:center;gap:6px} .legende-tdb b{margin-left:auto;color:var(--bleu)} .puce{width:9px;height:9px;border-radius:3px;flex:none} .c-ok{background:var(--vert)}.c-to{background:var(--orange)}.c-al{background:var(--rouge)}.c-off{background:#c9d0dc} .sante{flex-direction:row;align-items:center;gap:18px;background:linear-gradient(135deg,#fff 55%,#eef8f9)} .anneau{--p:0;--c:var(--vert);width:96px;height:96px;border-radius:50%;flex:none;display:grid;place-items:center; background:conic-gradient(var(--c) calc(var(--p)*1%),#eef1f6 0)} .anneau::before{content:"";grid-area:1/1;width:72px;height:72px;border-radius:50%;background:#fff} .anneau b{grid-area:1/1;font-size:22px;font-weight:800;z-index:1} .sante-texte{display:flex;flex-direction:column;gap:6px;font-size:12.5px;color:var(--gris);line-height:1.45} .sante-texte b{font-size:16px;color:var(--bleu)} .lien-vue{display:inline-flex;align-items:center;gap:2px;font-weight:700;color:var(--turquoise)} .lien-vue .ms{font-size:18px} .liste-titre{display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap} .compte{display:inline-block;margin-left:8px;background:var(--bleu);color:#fff;border-radius:20px;font-size:11px;padding:2px 8px;vertical-align:2px} .vide-ok{display:flex;align-items:center;gap:10px;color:#2f7d4f;font-weight:600;font-size:14px} .vide-ok .ms{font-size:22px} .jauge{display:inline-block;width:28px;height:12px;border:1.5px solid #9aa6b5;border-radius:3px;padding:1px;margin-right:6px;vertical-align:-2px;position:relative} .jauge::after{content:"";position:absolute;right:-4px;top:3px;width:2px;height:4px;background:#9aa6b5;border-radius:0 1px 1px 0} .jauge i{display:block;height:100%;background:var(--vert);border-radius:1px} .jauge.faible i{background:var(--orange)} .nowrap{white-space:nowrap} @media (max-width:1350px){ .tdb{grid-template-columns:repeat(2,1fr)} .tdb .sante{grid-column:1/-1} } /* Panneau latéral */ .voile{position:fixed;inset:0;background:rgba(35,48,94,.35);display:flex;justify-content:flex-end;z-index:20} .panneau{background:#fff;width:460px;max-width:100%;height:100%;padding:28px;overflow:auto} .panneau h2{font-size:20px} .panneau.large{width:720px} /* Visionneuse de dépôt (modale plein écran + grille de vignettes) */ .voile.centre{justify-content:center;align-items:center} .panneau.plein{width:min(1150px,95vw);height:92vh;border-radius:16px;display:flex;flex-direction:column} .dep-haut{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:6px 0 10px} .dep-haut select{margin:0} .dep-barre{display:flex;align-items:center;gap:10px;background:var(--fond);border-radius:10px;padding:6px 10px;margin-bottom:8px} .dep-barre #dep-type-sel{flex:1;min-width:160px;margin:0} .panneau.plein .note{font-size:12px;padding:8px 12px;margin:6px 0 0} .dep-grille{flex:1;overflow:auto;display:grid;grid-template-columns:repeat(auto-fill,minmax(var(--vig,200px),1fr));gap:14px;align-content:start;padding:4px} .dep-grille .vide{grid-column:1/-1} .dep-grille.survol{outline:2px dashed var(--turquoise);outline-offset:-10px;background:rgba(3,131,145,.05)} #dep-vide.depot-zone{border:2px dashed var(--trait);border-radius:12px;padding:44px 24px;text-align:center;color:var(--gris);align-self:start;line-height:1.7} .dep-carte{border:1px solid var(--trait);border-radius:10px;padding:8px;background:#fff;position:relative;display:flex;flex-direction:column;gap:6px} .dep-carte.depot-encours{opacity:.45;pointer-events:none;filter:grayscale(.3)} .dep-auto-lbl:has(#dep-auto:checked){color:var(--turquoise);font-weight:700} .dep-sel{position:absolute;top:10px;left:10px;background:#fff;border-radius:4px;padding:1px 2px;box-shadow:0 1px 3px rgba(0,0,0,.15)} .dep-vignette{height:calc(var(--vig,200px) * 1.3);display:grid;place-items:center;overflow:hidden;background:var(--fond);border-radius:6px} .dep-vignette img,.dep-vignette canvas{max-width:100%;max-height:100%;object-fit:contain} .dep-nom{font-size:12px;color:var(--gris);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .dep-type,.dep-type-sel{width:100%;font:inherit;font-size:13px;padding:7px 9px;border:1px solid var(--trait);border-radius:8px;background:#fff;color:var(--bleu);cursor:pointer} .dep-type:focus,.dep-type-sel:focus{outline:2px solid var(--turquoise);outline-offset:-1px;border-color:var(--turquoise)} .dep-type:disabled{opacity:.6;cursor:default} /* Grille documentaire (Tabulator) */ .grille{background:#fff;border-radius:14px;box-shadow:0 2px 10px rgba(35,48,94,.05);overflow:hidden;font-size:13px} .tabulator{border:0;background:transparent;font-family:inherit} .tabulator .tabulator-header{background:#fff;border-bottom:2px solid var(--trait);font-weight:700;color:var(--bleu)} .tabulator .tabulator-col{background:#fff} .tabulator .tabulator-row{border-bottom:1px solid var(--trait)} .tabulator .tabulator-row.tabulator-row-even{background:#fbfcfe} /* Lignes compactes (hauteur ramenée au niveau du texte) */ .grille .tabulator-cell{padding-top:2px;padding-bottom:2px} .grille .cell-actions{gap:0} .grille .btn-icone.sm{width:26px;height:26px} .grille .btn-icone.sm .ms{font-size:18px} .grille .tabulator-footer{display:none} .page-docs{display:flex;flex-direction:column;height:calc(100vh - 56px);min-height:0} .page-docs .barre-actions{margin-bottom:16px} .page-docs .grille{flex:1;min-height:0} /* ===== Centre Alertes & Échéances ===== */ .al-sub{display:inline-flex;background:var(--fond);border-radius:30px;padding:3px;gap:2px;flex-wrap:wrap} .al-sub button{border:0;background:transparent;color:var(--gris);font:inherit;font-weight:600;font-size:12.5px;padding:8px 15px;border-radius:30px;cursor:pointer} .al-sub button.on{background:#fff;color:var(--bleu);box-shadow:0 1px 4px rgba(35,48,94,.12)} .al-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:14px 0} .al-pane{display:none}.al-pane.on{display:block;animation:alfade .18s ease} @keyframes alfade{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}} .al-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-bottom:14px} .al-kpi{background:#fff;border-radius:14px;padding:13px 16px;box-shadow:0 2px 10px rgba(35,48,94,.06);border-left:5px solid var(--trait)} .al-kpi .n{font-size:28px;font-weight:700;line-height:1}.al-kpi .l{color:var(--gris);font-size:12px;margin-top:5px} .al-kpi.r{border-left-color:#e5484d}.al-kpi.r .n{color:#e5484d} .al-kpi.o{border-left-color:#f08c00}.al-kpi.o .n{color:#f08c00} .al-kpi.j{border-left-color:#c99a06}.al-kpi.j .n{color:#c99a06} .al-kpi.g{border-left-color:var(--turquoise,#038391)}.al-kpi.g .n{color:var(--turquoise,#038391)} .ech-badge{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:700;padding:3px 9px;border-radius:20px;white-space:nowrap} .ech-badge .ms{font-size:14px} .ech-exp{background:#fdecec;color:#c0282d}.ech-30{background:#fff4e6;color:#c77f00}.ech-90{background:#fcf6e3;color:#9a7a06} .al-table{width:100%;border-collapse:collapse;font-size:13px;background:#fff;border-radius:14px;overflow:hidden;box-shadow:0 2px 10px rgba(35,48,94,.06)} .al-table th{text-align:left;font-weight:700;color:var(--gris);font-size:11px;text-transform:uppercase;letter-spacing:.03em;padding:10px 12px;border-bottom:2px solid var(--trait)} .al-table td{padding:10px 12px;border-bottom:1px solid var(--trait)} body.al-compact .al-table td{padding:5px 12px} .al-table tbody tr{cursor:pointer;transition:.1s}.al-table tbody tr:hover td{background:var(--fond)} .al-table td:first-child{border-left:4px solid transparent} .al-table tr.exp td:first-child{border-left-color:#e5484d}.al-table tr.u30 td:first-child{border-left-color:#f08c00}.al-table tr.u90 td:first-child{border-left-color:#c99a06} .al-doc b{font-weight:600}.al-doc small{color:var(--gris);display:block;font-size:11.5px} .al-niv{display:inline-block;font-size:11px;font-weight:600;color:var(--gris);background:var(--fond);border-radius:20px;padding:2px 8px} /* Règles */ .rg-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:14px} .rg-rule{background:#fff;border-radius:14px;box-shadow:0 2px 10px rgba(35,48,94,.06);margin-bottom:12px;overflow:hidden} .rg-rule.open{box-shadow:0 12px 40px rgba(35,48,94,.16)} .rg-top{display:flex;gap:12px;align-items:center;padding:13px 16px} .rg-sw{width:40px;height:22px;border-radius:20px;background:#2f9e44;position:relative;flex-shrink:0;cursor:pointer} .rg-sw.off{background:#cfd6e2} .rg-sw::after{content:"";position:absolute;top:2px;left:20px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.3);transition:.15s} .rg-sw.off::after{left:2px} .rg-main{flex:1;min-width:0}.rg-main .nom{font-weight:700;font-size:14px}.rg-main .desc{color:var(--gris);font-size:12px;margin-top:2px} .rg-ed{display:none;border-top:1px solid var(--trait);padding:16px} .rg-rule.open .rg-ed{display:grid;grid-template-columns:1.25fr .75fr;gap:16px} @media(max-width:820px){.rg-rule.open .rg-ed{grid-template-columns:1fr}} .rg-phrase{background:var(--turq-bg,#e2f3f5);border-radius:12px;padding:14px 15px;font-size:14.5px;line-height:2.1;grid-column:1/-1} .rg-pill{display:inline-block;background:#fff;border:1.5px solid var(--turquoise,#038391);color:var(--turquoise,#038391);border-radius:20px;padding:2px 10px;font-weight:700;font-size:13px;margin:0 2px} .rg-blk{border:1px solid var(--trait);border-radius:10px;margin-bottom:8px} .rg-blk-h{display:flex;align-items:center;gap:8px;padding:10px 13px;cursor:pointer;font-weight:600;font-size:13px} .rg-blk-h .chev{margin-left:auto;color:var(--gris);transition:.15s}.rg-blk.open .chev{transform:rotate(90deg)} .rg-blk-b{display:none;padding:2px 13px 13px}.rg-blk.open .rg-blk-b{display:block} .rg-chips{display:flex;gap:7px;flex-wrap:wrap;margin-top:6px} .rg-chip{border:1px solid var(--trait);background:var(--fond);border-radius:20px;padding:6px 11px;font-size:12.5px;font-weight:600;color:var(--gris);cursor:pointer;user-select:none} .rg-chip.on{background:var(--turquoise,#038391);color:#fff;border-color:transparent} .rg-preview{align-self:start} .rg-pv-mail{border:1px solid var(--trait);border-radius:12px;overflow:hidden;box-shadow:0 2px 10px rgba(35,48,94,.06)} .rg-pv-top{background:linear-gradient(90deg,#1b2a52,#23305e);color:#fff;padding:11px 15px;font-weight:700;font-size:13px} .rg-pv-meta{background:var(--fond);padding:7px 14px;font-size:11px;color:var(--gris)} .rg-pv-body{padding:14px;font-size:13px} .rg-actions{grid-column:1/-1;display:flex;gap:8px;justify-content:flex-end;border-top:1px solid var(--trait);padding-top:13px} .doc-footer{flex:0 0 auto;display:flex;align-items:center;gap:14px;padding:8px 4px 2px;flex-wrap:wrap;border-top:1px solid var(--trait);background:#fff} .doc-footer .champ-enligne select{width:auto;min-width:62px;margin:0} .pagineur{display:flex;align-items:center;gap:2px} .pagineur #doc-pagenum{margin:0 8px;color:var(--gris)} .btn-icone{width:38px;height:38px;border-radius:50%;border:0;background:transparent;color:var(--bleu);display:grid;place-items:center;cursor:pointer} .btn-icone .ms{font-size:22px} .btn-icone:hover{background:rgba(35,48,94,.08)} .btn-icone:disabled{color:var(--trait);cursor:default} .btn-icone:disabled:hover{background:transparent} .btn-icone.sm{width:32px;height:32px} .btn-icone.sm .ms{font-size:20px} .btn-icone.ok{color:var(--vert)} .btn-icone.no{color:var(--rouge)} .cell-actions{display:flex;gap:2px;align-items:center} .menu-wrap{position:relative} .menu-flot{position:absolute;right:0;top:calc(100% + 6px);background:#fff;border-radius:10px;box-shadow:0 10px 30px rgba(35,48,94,.2);padding:6px;z-index:16;display:flex;flex-direction:column;min-width:230px} .menu-flot button{display:flex;align-items:center;gap:10px;border:0;background:transparent;font:inherit;font-weight:600;color:var(--bleu);padding:10px 12px;border-radius:8px;cursor:pointer;text-align:left} .menu-flot button:hover{background:var(--fond)} .chip-search{display:flex;align-items:center;border:1px solid var(--trait);border-radius:10px;padding:2px 8px;background:#fff;position:relative;min-width:240px} .chip-search:focus-within{border-color:var(--turquoise)} .chip-inner{display:flex;align-items:center;gap:4px;overflow-x:auto;flex:1;padding:4px 0;scrollbar-width:thin} .chip-inner::-webkit-scrollbar{height:6px} .chip-inner::-webkit-scrollbar-thumb{background:var(--trait);border-radius:3px} #chip-zone{display:contents} .chip-search input{border:0;outline:0;flex:1 0 140px;min-width:140px;font:inherit;padding:4px 2px;background:transparent} .chip{flex:0 0 auto;display:inline-flex;align-items:center;gap:2px;background:#eaf5f6;color:var(--bleu);border-radius:14px;padding:2px 2px 2px 10px;font-size:12.5px;font-weight:600;white-space:nowrap} .chip button{border:0;background:transparent;color:var(--gris);cursor:pointer;font-size:15px;line-height:1;padding:0 4px;border-radius:50%} .chip button:hover{background:rgba(35,48,94,.1);color:var(--bleu)} .chip-sugg{position:absolute;top:calc(100% + 4px);left:0;right:0;background:#fff;border-radius:10px;box-shadow:0 10px 30px rgba(35,48,94,.2);padding:6px;z-index:17;display:flex;flex-direction:column;max-height:260px;overflow:auto} .chip-sugg button{border:0;background:transparent;text-align:left;font:inherit;padding:8px 10px;border-radius:8px;cursor:pointer;color:var(--bleu)} .chip-sugg button:hover{background:var(--fond)} .col-profils{background:var(--fond);border-radius:10px;padding:12px;margin-top:12px} .col-profils > label{font-weight:700;font-size:12.5px;color:var(--bleu)} .col-profils select,.col-profils input{margin:0} .combo{position:relative} .combo input[type=text]{width:100%;margin:0} .combo-list{position:absolute;top:calc(100% + 4px);left:0;right:0;background:#fff;border-radius:10px;box-shadow:0 10px 30px rgba(35,48,94,.2);padding:6px;z-index:18;display:flex;flex-direction:column;max-height:300px;overflow:auto} .combo-list button{border:0;background:transparent;text-align:left;font:inherit;padding:8px 10px;border-radius:8px;cursor:pointer;color:var(--bleu)} .combo-list button:hover{background:var(--fond)} .lien-grid{border:0;background:transparent;color:var(--turquoise);font:inherit;font-weight:600;font-size:12.5px;cursor:pointer;padding:0 2px} .lien-grid:hover{text-decoration:underline} .selbar{display:flex;align-items:center;gap:8px;background:#eaf5f6;border:1px solid #bfe3e7;border-radius:10px;padding:8px 12px;margin-bottom:10px} .fab{position:fixed;right:28px;bottom:28px;width:56px;height:56px;border-radius:50%;background:var(--turquoise);color:#fff;border:0;cursor:pointer;box-shadow:0 6px 20px rgba(3,131,145,.4);display:grid;place-items:center;z-index:15} .fab .ms{font-size:28px} .fab:hover{filter:brightness(1.07)} .fab-menu{position:fixed;right:28px;bottom:94px;background:#fff;border-radius:12px;box-shadow:0 10px 30px rgba(35,48,94,.2);padding:6px;z-index:16;display:flex;flex-direction:column;min-width:240px} .fab-menu button{display:flex;align-items:center;gap:10px;border:0;background:transparent;font:inherit;font-weight:600;color:var(--bleu);padding:11px 14px;border-radius:8px;cursor:pointer;text-align:left} .fab-menu button:hover{background:var(--fond)} .choix{display:grid;grid-template-columns:1fr 1fr;gap:8px} .choix button{border:1px solid var(--trait);border-radius:10px;padding:10px 12px;background:#fff;text-align:left;font:inherit;color:var(--bleu);cursor:pointer} .choix button.sel{border-color:var(--turquoise);background:#f0fafa;box-shadow:0 0 0 1px var(--turquoise) inset} .choix b{display:block;font-size:13px} .choix span{font-size:11.5px;color:var(--gris)} .segments{display:flex;gap:6px} .segments button{flex:1;border:1px solid var(--trait);border-radius:8px;padding:8px;background:#fff;font:inherit;font-weight:600;color:var(--gris);cursor:pointer} .segments button.sel{border-color:var(--turquoise);color:var(--turquoise);background:#f0fafa} .actions-bas{display:flex;gap:10px;justify-content:flex-end;margin-top:26px} .note{background:#eaf6ff;border-radius:10px;padding:12px 14px;font-size:12.5px;margin-top:18px} #toast{position:fixed;bottom:18px;left:50%;transform:translateX(-50%);background:var(--bleu);color:#fff;padding:10px 16px;border-radius:10px;font-weight:600;font-size:13px;opacity:0;transition:opacity .2s;pointer-events:none;z-index:30;max-width:90vw} #toast.visible{opacity:1} #toast.mauvais{background:var(--rouge)} /* Impression du relevé */ .entete-impression{display:none} @media print{ @page{size:A4;margin:14mm} body{background:#fff;font-size:11px} aside,.no-print,.onglets,#toast{display:none!important} .cadre{display:block} main{padding:0} .carte,.chiffre{box-shadow:none;border:1px solid var(--trait)} .entete-impression{display:block;margin-bottom:12px;border-bottom:2px solid var(--bleu);padding-bottom:8px} .entete-impression b{font-size:15px} .deux{grid-template-columns:1fr 1fr} .graphique{height:260px!important} .periode-visible{font-size:11px} #fenetre-choix{display:none} tr,.carte{break-inside:avoid} } @media (max-width:700px){ .bandeau-telephone{display:flex;gap:10px;align-items:center;background:#fff3e6;color:#8a4b12;border-radius:10px;padding:10px 12px;font-size:12.5px;font-weight:600;margin-bottom:16px} .barre-actions{flex-wrap:wrap;gap:6px} } @media (max-width:900px){ main{padding:20px 16px} .chiffres{grid-template-columns:1fr 1fr} .deux{grid-template-columns:1fr} .masque-mobile{display:none} .filtres input,.filtres select{min-width:0;flex:1 1 100%} } /* Étalonnage (fiche capteur) */ .etalonnage{margin-top:16px} .etalonnage .titre-carte{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:12px} .etalonnage-corps{display:grid;grid-template-columns:auto auto 1fr;gap:28px;align-items:center} .etalonnage-corps > div > .petit{display:block;margin-bottom:2px} .etalonnage-corps b{font-size:16px} .certificats{display:flex;flex-wrap:wrap;gap:10px;justify-content:flex-end} .certificat{display:flex;align-items:center;gap:10px;border:1px solid var(--trait);border-radius:10px;padding:8px 14px;background:#fff;font:inherit;color:var(--bleu);cursor:pointer;text-align:left} .certificat:hover{border-color:var(--turquoise);background:#f0fafa} .certificat .ms{color:var(--rouge);font-size:26px} .certificat b{display:block;font-size:13.5px} @media (max-width:900px){ .etalonnage-corps{grid-template-columns:1fr 1fr} .certificats{grid-column:1/-1;justify-content:flex-start} } /* Écran de connexion : bloc d'installation de l'app (QR) à côté du formulaire. PC : côte à côte ; mobile : empilé (flex-wrap). */ .connexion .duo{display:flex;flex-wrap:wrap;gap:22px;align-items:flex-start;justify-content:center;width:100%;max-width:880px} .connexion .duo .boite{flex:1 1 360px;max-width:420px;margin:0} .boite.app{text-align:center} .boite.app .app-surtitre{color:var(--turquoise);font-weight:700;font-size:13px} .boite.app .app-titre{font-size:19px;margin:4px 0 2px} .boite.app .app-sous{color:var(--gris);font-size:13px;margin-bottom:18px} .boite.app .qr{width:176px;height:176px;margin:0 auto;border:1px solid var(--trait);border-radius:12px;padding:10px;background:#fff} .boite.app .qr img{width:100%;height:100%;display:block} .boite.app .qr-leg{font-size:12px;color:var(--gris);margin:10px 0 18px} .boite.app .pas{list-style:none;counter-reset:p;display:grid;gap:12px;text-align:left;margin:0 0 20px;padding:0} .boite.app .pas li{position:relative;padding-left:40px;color:var(--gris);font-size:13.5px;min-height:28px;padding-top:4px} .boite.app .pas li b{color:var(--bleu)} .boite.app .pas li::before{counter-increment:p;content:counter(p);position:absolute;left:0;top:0;width:27px;height:27px;border-radius:50%;background:var(--turquoise);color:#fff;font-weight:800;font-size:13px;display:grid;place-items:center} .boite.app .app-note{font-size:11.5px;color:var(--gris);margin-top:12px} /* ---- Panneau « Documents & conformité » (socle LogiFleet) ---- */ .cf-titre{margin:4px 0 8px;font-size:15px} .cf-sep{border:none;border-top:1px solid var(--trait);margin:18px 0 10px} .cf-form .duo{display:flex;gap:12px} .cf-form .duo>div{flex:1} .cf-choix{cursor:pointer;margin:6px 0;display:inline-flex;align-items:center;gap:6px} table.mini{width:100%;border-collapse:collapse} table.mini td{padding:7px 8px;border-bottom:1px solid var(--trait);vertical-align:top} table.mini tr:last-child td{border-bottom:none} table.mini td.droite{text-align:right;white-space:nowrap} table.mini td.vide{color:var(--gris);text-align:center;padding:14px} /* ---- Tableau de bord conformité (KPI) ---- */ .kpi-grille{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:14px;margin-top:4px} .carte.kpi{display:flex;flex-direction:column;gap:6px;padding:16px;text-decoration:none;color:inherit} a.carte.kpi{transition:box-shadow .15s,transform .15s} a.carte.kpi:hover{box-shadow:0 3px 14px rgba(0,0,0,.09);transform:translateY(-1px)} .kpi-num{font-size:30px;font-weight:800;line-height:1;color:var(--bleu)} .kpi-lbl{font-size:13px;color:var(--gris);display:flex;flex-direction:column;gap:2px} .kpi-lbl .petit{font-size:11px} .kpi.kpi-al .kpi-num{color:#c0392b} .kpi.kpi-to .kpi-num{color:#c77f00} .kpi-taux{flex-direction:row;align-items:center;gap:14px} .kpi-jauge{--p:0;position:relative;width:90px;height:90px;border-radius:50%;flex:0 0 auto;background:conic-gradient(currentColor calc(var(--p)*1%),#e6e8ec 0)} .kpi-jauge::after{content:"";position:absolute;inset:9px;background:#fff;border-radius:50%} .kpi-jauge span{position:relative;z-index:1;display:grid;place-items:center;width:100%;height:100%;font-weight:800;font-size:20px;color:var(--bleu)} .kpi-jauge.p-ok{color:#1a9f5a} .kpi-jauge.p-to{color:#e0a400} .kpi-jauge.p-al{color:#c0392b} /* Barre d'outils de liste (recherche + Colonnes + Export) ancrée à droite, position constante */ .ba-outils{display:flex;align-items:center;gap:10px;margin-left:auto;flex:1 1 320px;min-width:0;justify-content:flex-end} .ba-outils .chip-search{flex:1 1 auto;min-width:150px;max-width:480px;margin:0} @media (max-width:700px){.ba-outils{flex-wrap:wrap;flex-basis:100%;justify-content:flex-start}} /* ===== Phase 6 : cloche (notifications d'échéances) ===== */ .cloche-wrap{position:fixed;top:14px;right:18px;z-index:60} .cloche-btn{position:relative;width:44px;height:44px;border-radius:50%;border:1px solid var(--trait);background:#fff;color:var(--bleu);cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 14px rgba(35,48,94,.14)} .cloche-btn:hover{background:var(--fond)} .cloche-btn .ms{font-size:22px} .cloche-badge{position:absolute;top:-4px;right:-4px;min-width:18px;height:18px;padding:0 5px;border-radius:20px;background:var(--rouge);color:#fff;font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;border:2px solid #fff} .cloche-panel{position:absolute;top:52px;right:0;width:360px;max-width:92vw;max-height:70vh;display:flex;flex-direction:column;background:#fff;border:1px solid var(--trait);border-radius:14px;box-shadow:0 12px 34px rgba(35,48,94,.20);overflow:hidden} .cloche-panel[hidden]{display:none} .cloche-tete{padding:13px 16px;font-weight:700;color:var(--bleu);border-bottom:1px solid var(--fond);display:flex;align-items:center;justify-content:space-between} .cloche-tete span{background:var(--rouge);color:#fff;font-size:12px;font-weight:700;padding:1px 9px;border-radius:20px} .cloche-corps{overflow-y:auto} .cloche-vide{padding:28px 16px;text-align:center;color:var(--gris);font-size:13px} .cloche-item{display:block;padding:11px 16px;border-bottom:1px solid var(--fond);text-decoration:none;color:var(--bleu)} .cloche-item:hover{background:var(--fond)} .cloche-item .ci-h{display:flex;align-items:center;gap:8px;margin-bottom:3px} .cloche-item .ci-t{font-weight:700;font-size:13.5px} .cloche-item .ci-s{font-size:12px;color:var(--gris);margin-top:1px} .cloche-enc{font-size:11px;font-weight:700;color:#2d5bd0;background:#eaf1ff;padding:1px 8px;border-radius:20px} .cloche-pied{display:block;padding:12px 16px;text-align:center;font-weight:700;font-size:13px;color:var(--turquoise);text-decoration:none;border-top:1px solid var(--fond)} .cloche-pied:hover{background:var(--fond)} @media print{.cloche-wrap{display:none!important}} /* ===== Phase 6 : chips de suivi dans l'onglet Suivi ===== */ .al-suivi{white-space:nowrap} .suivi-sel{width:auto;min-width:118px;padding:5px 26px 5px 10px;border-radius:20px;font-size:12px;font-weight:700;cursor:pointer;border:1px solid var(--trait)} .suivi-sel.sv-a_relancer{background:var(--fond);color:var(--gris)} .suivi-sel.sv-en_cours{background:#eaf1ff;color:#2d5bd0;border-color:#cdddff} .suivi-sel.sv-renouvele{background:#e7f5ec;color:#2f7d4f;border-color:#bfe6cf} /* ============================================================ Refonte navigation modulaire (shell : barre sup. + rail + switcher) ============================================================ */ .cadre{grid-template-columns:234px 1fr} .cadre.plie{grid-template-columns:72px 1fr} .col{display:flex;flex-direction:column;min-width:0} aside .logo .label{color:#fff} /* --- barre supérieure --- */ .topbar{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:12px;height:58px;padding:0 16px;background:#fff;border-bottom:1px solid var(--trait)} .topbar .crumb{font-weight:700;font-size:16px;color:var(--bleu);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0} .ic-btn{width:40px;height:40px;border-radius:10px;border:1px solid transparent;background:transparent;color:var(--bleu);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;text-decoration:none;flex:0 0 auto} .ic-btn:hover{background:var(--fond)} .ic-btn.sel{background:var(--fond)} .ic-btn .ms{font-size:22px} .tb-right{margin-left:auto;display:flex;align-items:center;gap:6px} .me{display:flex;align-items:center;gap:8px;padding:4px 10px 4px 4px;border-radius:30px;border:1px solid var(--trait)} .me .ava2{width:30px;height:30px;border-radius:50%;background:var(--bleu);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:12px;flex:0 0 auto} .me .who2{font-size:12px;line-height:1.15} .me .who2 b{display:block;color:var(--bleu)} .me .who2 small{color:var(--gris)} /* --- cloche dans la barre --- */ .cloche{position:relative} .bell{position:relative} .bell .cloche-badge{position:absolute;top:2px;right:2px;min-width:17px;height:17px;background:var(--rouge);color:#fff;border-radius:20px;font-size:10.5px;font-weight:700;display:flex;align-items:center;justify-content:center;border:2px solid #fff;padding:0 4px} .cloche .cloche-panel{position:absolute;top:50px;right:0;left:auto;width:368px;max-width:86vw;max-height:70vh;background:#fff;border:1px solid var(--trait);border-radius:14px;box-shadow:0 16px 40px rgba(35,48,94,.22);display:flex;flex-direction:column;overflow:hidden;z-index:50} /* --- sélecteur de module --- */ .switch{padding:0 8px 10px;position:relative} .switch-btn{width:100%;display:flex;align-items:center;gap:10px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);color:#fff;border-radius:10px;padding:10px 11px;cursor:pointer;font:inherit;font-weight:700;white-space:nowrap;overflow:hidden} .switch-btn:hover{background:rgba(255,255,255,.14)} .switch-btn[disabled]{cursor:default} .switch-btn .dotm{flex:0 0 22px;font-size:18px;text-align:center} .switch-btn .nm{overflow:hidden;text-overflow:ellipsis} .switch-btn .chev{margin-left:auto;font-size:18px;opacity:.8} .mod-menu{position:absolute;top:calc(100% - 4px);left:8px;right:8px;background:#fff;color:var(--bleu);border:1px solid var(--trait);border-radius:12px;box-shadow:0 14px 34px rgba(10,20,50,.3);z-index:40;padding:5px} .mod-menu .mm-h{font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--gris);font-weight:700;padding:8px 10px 4px} .mod-menu button{width:100%;display:flex;align-items:center;gap:10px;background:transparent;border:0;color:var(--bleu);font:inherit;font-weight:600;padding:9px 10px;border-radius:8px;cursor:pointer;text-align:left} .mod-menu button:hover{background:var(--fond)} .mod-menu button .mi{font-size:18px} .mod-menu button .ck{margin-left:auto;color:var(--turquoise);font-size:18px} /* --- zones de menu --- */ .grp{display:flex;align-items:center;gap:7px;font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.5);font-weight:700;padding:14px 12px 5px} .grp.commun{color:var(--vert)} .grp .tag{font-size:8.5px;background:rgba(109,189,141,.22);color:var(--vert);padding:1px 6px;border-radius:10px;letter-spacing:.02em} .nav-i{position:relative;align-items:center} .nav-i .ic{flex:0 0 22px;text-align:center;font-size:20px} .nav-i .pip{margin-left:auto;background:var(--rouge);color:#fff;font-size:11px;font-weight:700;min-width:18px;height:18px;border-radius:20px;display:inline-flex;align-items:center;justify-content:center;padding:0 5px} .nav-i.sel{box-shadow:inset 3px 0 0 var(--vert)} .nav-vide{padding:8px 12px;color:rgba(255,255,255,.4);font-size:12px} aside .bas .who b{color:#fff} aside .bas .who .qui{color:#8793bd} aside .bas #deconnexion{display:inline-flex;align-items:center;gap:6px} /* --- menu replié (rail) --- */ .cadre.plie .label{display:none!important} .cadre.plie aside{padding:16px 10px} .cadre.plie .logo{justify-content:center;margin:0 0 14px} .cadre.plie .switch{padding:0 0 8px} .cadre.plie .switch-btn{justify-content:center;padding:10px 0;gap:0} .cadre.plie .grp{justify-content:center;padding:12px 0 4px} .cadre.plie .grp .tag{display:none} .cadre.plie .nav-i{justify-content:center;padding:10px 0} .cadre.plie .nav-i .pip{position:absolute;top:2px;right:12px;margin:0} .cadre.plie .bas{padding-left:0;padding-right:0;text-align:center} .cadre.plie .param-lien{justify-content:center} .cadre.plie #deconnexion{justify-content:center} /* --- matrice admin (modules + communs) --- */ .mat .mat-h{text-align:center;vertical-align:bottom;white-space:nowrap} .mat .mat-l{display:block} .mat .mat-t{display:inline-block;margin-top:4px;font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;padding:1px 6px;border-radius:10px} .mat .mat-t.module{background:#e9eefb;color:var(--bleu)} .mat .mat-t.commun{background:#e7f5ec;color:#2f7d4f} /* --- backdrop mobile --- */ .cadre-bd{display:none} /* --- responsive : rail + aside en surimpression --- */ @media (max-width:760px){ .cadre, .cadre.plie{grid-template-columns:60px 1fr} aside{position:fixed;top:0;left:0;height:100%;width:234px;transform:translateX(-100%);transition:transform .2s ease;z-index:60;flex-direction:column;overflow-y:auto;padding:16px;gap:6px} .cadre .label{display:none} .cadre.nav-open aside{transform:none;box-shadow:0 0 44px rgba(0,0,0,.45)} .cadre.nav-open .label{display:inline!important} aside .logo{margin:0 0 12px} aside nav{flex-direction:column} .cadre-bd{display:block} .cadre-bd[hidden]{display:none} .me .who2{display:none} main{padding:18px 16px} } /* --- en-tête du panneau cloche : badge + croix de fermeture --- */ .cloche-tete{display:flex;align-items:center;justify-content:space-between} .cloche-tete span{background:none;color:inherit;padding:0;border-radius:0;font-size:inherit;font-weight:inherit} .cloche-tete .ct-n{background:var(--rouge);color:#fff;font-size:12px;font-weight:700;padding:1px 9px;border-radius:20px;margin-left:6px} .cloche-x{border:0;background:transparent;color:var(--gris);cursor:pointer;width:30px;height:30px;border-radius:8px;display:inline-flex;align-items:center;justify-content:center} .cloche-x:hover{background:var(--fond);color:var(--bleu)} .cloche-x .ms{font-size:20px} /* L'attribut hidden doit l'emporter sur display:flex du panneau (sinon il reste ouvert). */ .cloche-panel[hidden]{display:none!important} /* ============================================================ Affinage typographique + compacité du menu (inspiration Qonto) ============================================================ */ /* Marque */ aside .logo{font-weight:700;font-size:15px;margin:2px 6px 12px;gap:9px} aside .logo img{height:22px} /* Sidebar compacte ; le défilement vit dans