/* ==========================================================================
EIS RÉUNION — Système de design "VIGIE"
----------------------------------------------------------------------
Inspiration : les postes de veille réunionnais — l'Observatoire
volcanologique du Piton de la Fournaise, la station atmosphérique du
Maïdo, le suivi cyclonique en saison chaude. Un ciel nocturne bleu nuit
profond, un jaune signal (lueur de lave, alerte, repère radar) et un
cyan lagon pour les données secondaires. Le motif signature est une
ligne de trace — sismographe / écho radar — répétée en frise, jamais
en fond plein.
========================================================================== */
/* Les polices Google Fonts sont chargées via dans le de chaque
page (pas ici en @import) : un @import CSS force le navigateur à attendre
d'avoir reçu CE fichier avant même de découvrir qu'il faut aller chercher
la police, ce qui ajoute un aller-retour réseau complet au chargement de
chaque page. Un découvert directement dans le HTML
part en parallèle, avec un preconnect — nettement plus rapide, même rendu. */
:root{
/* --- Couleurs : nuit profonde + signal jaune + lagon cyan --- */
--basalte: #0A1130; /* fond très sombre : boutons pleins, sidebar, bulles */
--basalte-2: #12194A; /* état hover des surfaces sombres */
--basalte-3: #1B2360; /* surfaces sombres surélevées */
--canne: #F8C630; /* jaune signal — accent principal, lecture de données */
--canne-fonce: #C99A1E;
--canne-clair: #FFE68A;
--letchi: #35D0F5; /* cyan lagon — accent secondaire (variante de bleu) */
--letchi-fonce: #159AC0;
--vert-bassin: #35D0F5; /* repris en cyan : badges décoratifs, jamais un vrai statut */
--vert-clair: rgba(53,208,245,.14);
--papier: #060A20; /* fond de page — nuit */
--vanille: #0E1638; /* surfaces secondaires : champs, colonnes de pipeline */
--encre: #EDEFFB; /* texte principal — presque blanc */
--encre-douce: #93A0C9; /* texte secondaire */
--trait: rgba(255,255,255,.11);
--blanc: #101A44; /* "surface" — cartes, tableaux, modales (plus blanc à proprement parler) */
--alerte: #FF6B5B;
--alerte-fond: rgba(255,107,91,.14);
--ok: #33C17D;
--ok-fond: rgba(51,193,125,.14);
--radius: 12px;
--radius-lg: 20px;
--ombre: 0 10px 30px rgba(0,0,0,.38);
--ombre-lg: 0 24px 70px rgba(0,0,0,.55);
}
*{ box-sizing:border-box; margin:0; padding:0; }
html{ -webkit-font-smoothing:antialiased; }
body{
font-family:'Inter',system-ui,-apple-system,sans-serif;
background:
radial-gradient(ellipse 60% 40% at 15% -10%, rgba(53,208,245,.07), transparent 60%),
radial-gradient(ellipse 50% 35% at 100% 0%, rgba(248,198,48,.06), transparent 55%),
var(--papier);
color:var(--encre);
line-height:1.55;
}
a{ color:inherit; }
button, input, select, textarea{ font-family:inherit; }
.disp{ font-family:'Fraunces','Inter',serif; font-weight:600; letter-spacing:-0.01em; }
.mono{ font-family:'IBM Plex Mono',monospace; }
h1,h2,h3{ font-family:'Fraunces',serif; font-weight:600; letter-spacing:-0.01em; color:var(--encre); }
/* --- Motif signature : la trace de VIGIE ------------------------------
Frise en écho radar / sismographe, répétée en fine bande de transition,
jamais en fond plein. */
.lambrequin{
height:12px;
width:100%;
background-repeat:repeat-x;
background-size:40px 12px;
background-image:url("data:image/svg+xml;utf8,");
opacity:.9;
}
.lambrequin.dark{
background-image:url("data:image/svg+xml;utf8,");
opacity:.32;
}
.lambrequin.rose{
background-image:url("data:image/svg+xml;utf8,");
opacity:.85;
}
/* --- Boutons --- */
.btn{
display:inline-flex; align-items:center; justify-content:center; gap:8px;
padding:12px 22px; border-radius:9px; border:none; cursor:pointer;
font-weight:700; font-size:.92rem; font-family:'Inter',sans-serif;
text-decoration:none; transition:transform .12s ease, box-shadow .12s ease, opacity .12s ease, border-color .12s ease;
}
.btn:active{ transform:translateY(1px); }
.btn-canne{ background:var(--canne); color:var(--basalte); box-shadow:0 0 0 rgba(248,198,48,0); }
.btn-canne:hover{ background:var(--canne-clair); box-shadow:0 0 22px rgba(248,198,48,.35); }
.btn-basalte{ background:var(--basalte); color:var(--encre); border:1px solid var(--trait); }
.btn-basalte:hover{ background:var(--basalte-2); border-color:var(--letchi); }
.btn-ghost{ background:transparent; border:1.5px solid var(--trait); color:var(--encre); }
.btn-ghost:hover{ border-color:var(--canne); color:var(--canne-clair); }
.btn-letchi{ background:var(--letchi); color:#04202B; }
.btn-letchi:hover{ box-shadow:0 0 22px rgba(53,208,245,.35); }
.btn-block{ width:100%; }
.btn-sm{ padding:7px 13px; font-size:.8rem; border-radius:7px; }
.btn:disabled{ opacity:.4; cursor:not-allowed; pointer-events:none; }
/* --- Cartes / structure --- */
.carte{
background:var(--blanc); border:1px solid var(--trait); border-radius:var(--radius-lg);
padding:22px; box-shadow:var(--ombre);
position:relative;
}
.field{ margin-bottom:14px; text-align:left; }
.field label{ display:block; font-size:.76rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--encre-douce); margin-bottom:6px; }
.field input, .field select, .field textarea{
width:100%; padding:11px 13px; border:1.5px solid var(--trait); border-radius:8px;
font-size:.92rem; background:var(--vanille); color:var(--encre); outline:none; transition:border-color .15s, box-shadow .15s;
}
.field input:focus, .field select:focus, .field textarea:focus{ border-color:var(--canne-fonce); box-shadow:0 0 0 3px rgba(248,198,48,.14); }
/* ===== Sélecteur de client réutilisable — recherche + création à la volée =====
Utilisé partout où un client doit être choisi (événement, délégation…) :
jamais de nom de client tapé librement, toujours rattaché à une vraie
fiche "demandes" via son id, avec la possibilité d'en créer une sur place
si elle n'existe pas encore. */
.client-picker-wrap{ position:relative; }
.client-picker-dropdown{
position:absolute; top:100%; left:0; right:0; margin-top:4px; z-index:60;
background:var(--blanc); border:1.5px solid var(--trait); border-radius:11px;
box-shadow:0 14px 34px rgba(0,0,0,.4); max-height:280px; overflow-y:auto; padding:6px;
}
.cp-option{ display:flex; align-items:baseline; gap:8px; width:100%; text-align:left; background:none; border:none;
padding:9px 10px; border-radius:8px; cursor:pointer; font-family:inherit; color:var(--encre); font-size:.88rem; }
.cp-option:hover{ background:var(--vanille); }
.cp-option .cp-code{ font-family:'IBM Plex Mono',monospace; font-size:.68rem; color:var(--encre-douce); }
.cp-option .cp-sub{ margin-left:auto; font-size:.76rem; color:var(--encre-douce); }
.cp-empty{ padding:9px 10px; font-size:.82rem; color:var(--encre-douce); }
.cp-create{ display:block; width:100%; text-align:left; background:none; border:none; border-top:1px solid var(--trait); margin-top:4px;
padding:9px 10px; border-radius:8px; cursor:pointer; font-family:inherit; color:var(--canne-fonce); font-weight:700; font-size:.86rem; }
.cp-create:hover{ background:var(--vanille); }
.cp-nouveau{ padding:8px; display:flex; flex-direction:column; gap:7px; }
.cp-nouveau-titre{ font-size:.78rem; font-weight:700; color:var(--encre-douce); text-transform:uppercase; letter-spacing:.04em; }
.cp-nouveau input{ width:100%; padding:9px 11px; border:1.5px solid var(--trait); border-radius:8px; font-size:.86rem; font-family:inherit; background:var(--vanille); color:var(--encre); }
.cp-nouveau-btns{ display:flex; gap:8px; margin-top:2px; }
.pill{ display:inline-flex; align-items:center; gap:6px; font-size:.72rem; font-weight:700; padding:4px 11px; border-radius:999px; text-transform:uppercase; letter-spacing:.03em; }
.pill.ok{ background:var(--ok-fond); color:var(--ok); }
.pill.attn{ background:rgba(248,198,48,.14); color:var(--canne-clair); }
.pill.stop{ background:var(--alerte-fond); color:var(--alerte); }
::selection{ background:var(--canne-clair); color:var(--basalte); }
/* Focus visible partout (accessibilité) */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible{
outline:2.5px solid var(--letchi); outline-offset:2px;
}
@media (prefers-reduced-motion: reduce){
*{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
}
/* --- Badges de confiance (assets/badges.js) ------------------------------
Pastilles sobres : le jaune signal est réservé à "Agréé EIS", le reste en
cyan lagon, pour que le badge le plus fort se remarque au premier coup
d'œil sur une fiche. */
.badges-eis{ display:flex; flex-wrap:wrap; gap:8px; }
.badge-eis{
display:inline-flex; align-items:center; gap:7px;
padding:5px 11px 5px 8px; border-radius:999px;
background:var(--vert-clair); color:var(--letchi);
border:1px solid rgba(53,208,245,.28);
font-size:.76rem; font-weight:700; line-height:1.25;
}
.badge-eis.badge-agreeEis{ background:rgba(248,198,48,.14); color:var(--canne-clair); border-color:rgba(248,198,48,.4); }
.badge-eis-ic{ font-size:.95rem; }
.badge-eis-txt{ display:flex; flex-direction:column; }
.badge-eis-sous{ font-weight:500; font-size:.68rem; color:var(--encre-douce); }
.badge-eis.detail{ border-radius:12px; padding:7px 12px 7px 9px; }
/* Puces de sélection (zones, communes, services) */
.puces{ display:flex; flex-wrap:wrap; gap:7px; }
.puce{
display:inline-flex; align-items:center; gap:6px; cursor:pointer; user-select:none;
padding:6px 12px; border-radius:999px; border:1.5px solid var(--trait);
font-size:.8rem; font-weight:600; color:var(--encre-douce); background:var(--vanille);
}
.puce input{ display:none; }
.puce.on{ border-color:var(--canne-fonce); color:var(--canne-clair); background:rgba(248,198,48,.1); }
/* --- Avis vérifiés ------------------------------------------------------ */
.etoiles-eis{ color:var(--canne); letter-spacing:1px; }
.etoiles-eis .off{ color:var(--trait); }
.resume-avis{ font-size:.86rem; color:var(--encre-douce); }
.resume-avis b{ color:var(--encre); }
.avis-eis{ padding:14px 0; border-bottom:1px solid var(--trait); }
.avis-eis:last-child{ border-bottom:none; }
.avis-eis.masque{ opacity:.7; }
.avis-tete{ display:flex; align-items:center; gap:9px; flex-wrap:wrap; font-size:.88rem; }
.avis-verifie{ font-size:.7rem; font-weight:700; color:var(--ok); background:var(--ok-fond); padding:2px 8px; border-radius:999px; }
.avis-date{ font-size:.74rem; color:var(--encre-douce); margin-left:auto; }
.avis-meta{ font-size:.76rem; color:var(--encre-douce); margin-top:3px; }
.avis-texte{ font-size:.9rem; line-height:1.6; margin-top:8px; white-space:pre-line; }
.avis-reponse{ margin-top:10px; padding:10px 12px; border-left:3px solid var(--letchi); background:var(--vanille); border-radius:0 8px 8px 0; font-size:.86rem; line-height:1.55; }
.avis-reponse .avis-date{ margin-left:6px; }
/* --- Notifications (assets/notifications.js) --------------------------- */
.notif-cloche{ position:fixed; top:14px; right:16px; z-index:90; width:42px; height:42px; border-radius:50%;
border:1px solid var(--trait); background:var(--blanc); color:var(--encre); font-size:1.1rem; cursor:pointer; box-shadow:var(--ombre); }
.notif-compte{ position:absolute; top:-4px; right:-4px; min-width:19px; height:19px; padding:0 5px; border-radius:999px;
background:var(--alerte); color:#fff; font-size:.66rem; font-weight:800; place-items:center; }
.notif-panneau{ position:fixed; top:62px; right:16px; z-index:91; width:min(380px, calc(100vw - 32px)); max-height:70vh; overflow-y:auto;
background:var(--blanc); border:1px solid var(--trait); border-radius:14px; box-shadow:var(--ombre-lg); }
.notif-tete{ display:flex; justify-content:space-between; align-items:center; padding:12px 14px; border-bottom:1px solid var(--trait); position:sticky; top:0; background:var(--blanc); }
.notif-tete button{ background:none; border:none; color:var(--letchi); font-size:.78rem; cursor:pointer; font-family:inherit; }
.notif-item{ padding:11px 14px; border-bottom:1px solid var(--trait); cursor:pointer; }
.notif-item:hover{ background:var(--vanille); }
.notif-item.non-lu{ border-left:3px solid var(--canne); }
.notif-titre{ font-size:.86rem; font-weight:700; }
.notif-texte{ font-size:.8rem; color:var(--encre-douce); margin-top:3px; line-height:1.45; }
.notif-quand{ font-size:.7rem; color:var(--encre-douce); margin-top:4px; }
.notif-vide{ padding:22px 14px; text-align:center; font-size:.84rem; color:var(--encre-douce); }
.pastille-nav{ margin-left:auto; min-width:20px; height:20px; padding:0 6px; border-radius:999px; background:var(--canne); color:var(--basalte);
font-size:.68rem; font-weight:800; display:inline-grid; place-items:center; }
body.avec-cloche .topbar{ padding-right:56px; }
/* --- Première connexion : « Bonjour » (assets/bienvenue.js) ------------- */
.bonjour-overlay{
position:fixed; inset:0; z-index:300; display:grid; place-content:center; justify-items:center; gap:6px;
background:var(--papier); opacity:0; transition:opacity .6s ease;
}
.bonjour-overlay.on{ opacity:1; }
.bonjour-overlay.sortie{ opacity:0; }
.bonjour-mot{
font-family:'Fraunces',serif; font-weight:600; font-size:clamp(2.6rem,10vw,4.6rem); letter-spacing:-.02em;
color:var(--encre); opacity:0; transform:translateY(14px); transition:opacity .9s ease .25s, transform .9s ease .25s;
}
.bonjour-prenom{
font-family:'Fraunces',serif; font-size:clamp(1.2rem,5vw,1.9rem); color:var(--canne);
opacity:0; transform:translateY(10px); transition:opacity .8s ease 1s, transform .8s ease 1s;
}
.bonjour-overlay.on .bonjour-mot,
.bonjour-overlay.on .bonjour-prenom{ opacity:1; transform:none; }
.bonjour-passer{
margin-top:26px; background:none; border:none; color:var(--encre-douce); font-size:.8rem; cursor:pointer;
font-family:inherit; opacity:0; transition:opacity .5s ease 1.8s;
}
.bonjour-overlay.on .bonjour-passer{ opacity:1; }
/* Progression de la mise en route, dans l'en-tête de JIM-E */
.bv-progression{ display:flex; align-items:center; gap:10px; padding:8px 4px 4px; font-size:.74rem; color:var(--encre-douce); }
.bv-barre{ flex:1; height:5px; border-radius:999px; background:var(--vanille); overflow:hidden; }
.bv-barre i{ display:block; height:100%; background:var(--canne); border-radius:999px; transition:width .5s ease; }
.bv-carte{ max-width:100%; }
.bv-carte .field label{ margin-bottom:4px; }
@media (prefers-reduced-motion: reduce){
.bonjour-mot, .bonjour-prenom, .bonjour-passer{ opacity:1 !important; transform:none !important; }
}
/* --- JIM-E : fourmis (logo) et fondu d'accueil ------------------------- */
.ant{ display:block; }
.nav-coach .ant{ display:inline-block; width:26px; height:20px; vertical-align:middle; margin-right:6px; color:var(--canne); }
.coach-head .ant-logo{ width:40px; height:30px; color:var(--canne); flex:none; }
.bonjour-fourmis{ display:flex; align-items:flex-end; gap:12px; margin-bottom:18px; opacity:0; transform:translateY(10px); transition:opacity .9s ease .1s, transform .9s ease .1s; }
.bonjour-overlay.on .bonjour-fourmis{ opacity:1; transform:none; }
.bonjour-fourmis .ant-ouvriere{ width:120px; height:90px; color:var(--canne); }
.bonjour-fourmis .ant-tisserande{ width:104px; height:78px; color:#EE7B30; }
.bonjour-sous{ font-family:'Fraunces',serif; font-size:clamp(1rem,4vw,1.4rem); color:var(--encre-douce);
opacity:0; transform:translateY(8px); transition:opacity .8s ease 1.2s, transform .8s ease 1.2s; }
.bonjour-overlay.on .bonjour-sous{ opacity:1; transform:none; }
/* Zone de saisie de JIM-E : texte blanc sur fond bleu, toujours lisible. */
.input-row textarea{ background:#1B2F8A !important; color:#fff !important; caret-color:#fff; border-color:rgba(255,255,255,.25) !important; }
.input-row textarea::placeholder{ color:rgba(255,255,255,.65); }
@media (prefers-reduced-motion: reduce){
.bonjour-fourmis, .bonjour-sous{ opacity:1 !important; transform:none !important; }
}