/* ============================================================
NAQSHA Fidélité — design system partagé (étape 1C, lot 1)
------------------------------------------------------------
Jetons de couleur, typographie, espacements et composants de
base, validés sur les maquettes 1A et 1B.
À charger APRÈS polices.css et AVANT la feuille de la page :
Lot 1 : seule la page d'accueil l'utilise. Les autres pages
gardent leurs feuilles actuelles ; elles l'adopteront lot par
lot, sans refonte simultanée.
Icônes : jeu unique Lucide (licence ISC, voir LICENCE-lucide.txt),
écrites en SVG dans le HTML avec la classe .ic. Aucun fichier
tiers, aucun emoji.
Aucune ressource externe, aucun style en ligne : compatible
avec la CSP du .htaccess, y compris en mode bloquant.
============================================================ */
:root{
/* marque — valeurs officielles, non négociables */
--bleu:#032E7A;
--nuit:#022557;
--nuit-2:#011B42;
--or:#DDAA34;
--or-texte:#8A6410; /* or lisible sur fond clair (5,4:1) — petits libellés uniquement */
--or-voile:#FBF4E2;
--or-survol:#E6B94A;
/* neutres */
--encre:#0F1A2E; /* texte principal 17:1 */
--texte-2:#4A5570; /* texte secondaire 7,4:1 */
--texte-3:#5F6881; /* légendes 5,5:1 — minimum autorisé */
--filet:#E3E7EF;
--filet-fort:#CBD2DF;
--fond:#F6F7FA;
--fond-2:#EEF1F6;
--blanc:#FFFFFF;
--bleu-voile:#EDF2FB;
/* sur fond nuit */
--sur-nuit:#FFFFFF;
--sur-nuit-2:#C2CBE0; /* 9,2:1 */
--filet-nuit:rgba(255,255,255,.14);
/* sémantique */
--succes:#177245; --succes-voile:#E8F5EE;
--erreur:#B42318; --erreur-voile:#FDEEEC;
--attention:#8A5A00; --attention-voile:#FFF6E0;
/* typographie */
--titre:'Manrope',system-ui,-apple-system,'Segoe UI',sans-serif;
--texte:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
/* espacements — base 4 */
--e1:4px; --e2:8px; --e3:12px; --e4:16px; --e5:24px; --e6:32px; --e7:48px; --e8:64px; --e9:96px;
/* rayons */
--r1:6px; --r2:10px; --r3:14px; --r4:20px; --rp:999px;
/* ombres — deux niveaux seulement */
--ombre-1:0 1px 2px rgba(15,26,46,.06),0 1px 1px rgba(15,26,46,.04);
--ombre-2:0 12px 32px -12px rgba(2,37,87,.22),0 2px 6px rgba(2,37,87,.06);
--anneau:0 0 0 2px var(--blanc),0 0 0 4px var(--bleu);
--anneau-nuit:0 0 0 2px var(--nuit),0 0 0 4px var(--or);
--duree:.18s;
--courbe:cubic-bezier(.2,.7,.2,1);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;font-family:var(--texte);font-size:16px;line-height:1.55;color:var(--encre);background:var(--blanc);-webkit-font-smoothing:antialiased;font-feature-settings:'cv11','ss01'}
img{max-width:100%;display:block}
h1,h2,h3,h4{font-family:var(--titre);margin:0;letter-spacing:-.02em;line-height:1.12;color:var(--encre)}
p{margin:0}
a{color:var(--bleu)}
button{font:inherit;color:inherit}
.ic{width:20px;height:20px;flex:none}
.ic--s{width:16px;height:16px}
.ic--l{width:24px;height:24px}
.chiffre{font-variant-numeric:tabular-nums}
.visuel-seul{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* ---------- focus : toujours visible au clavier ---------- */
:focus{outline:none}
:focus-visible{box-shadow:var(--anneau);border-radius:var(--r1)}
.sur-nuit :focus-visible{box-shadow:var(--anneau-nuit)}
.evitement{position:absolute;left:16px;top:-60px;z-index:100;background:var(--nuit);color:#fff;padding:10px 16px;border-radius:var(--r2);text-decoration:none;font-weight:600}
.evitement:focus{top:12px}
/* ---------- boutons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 20px;border-radius:var(--r2);border:1px solid transparent;font-family:var(--texte);font-weight:600;font-size:15px;line-height:1;text-decoration:none;cursor:pointer;white-space:nowrap;transition:background var(--duree) var(--courbe),border-color var(--duree) var(--courbe),color var(--duree) var(--courbe),transform var(--duree) var(--courbe)}
.btn:active{transform:translateY(1px)}
.btn--or{background:var(--or);color:var(--nuit)}
.btn--or:hover{background:var(--or-survol)}
.btn--bleu{background:var(--bleu);color:#fff}
.btn--bleu:hover{background:var(--nuit)}
.btn--contour{background:var(--blanc);color:var(--bleu);border-color:var(--filet-fort)}
.btn--contour:hover{border-color:var(--bleu);background:var(--bleu-voile)}
.btn--discret{background:transparent;color:var(--bleu);padding:0 12px}
.btn--discret:hover{background:var(--bleu-voile)}
.btn--danger{background:var(--blanc);color:var(--erreur);border-color:#F1C4BE}
.btn--danger:hover{background:var(--erreur-voile)}
.btn--xl{min-height:52px;padding:0 26px;font-size:16px}
.btn--s{min-height:36px;padding:0 14px;font-size:14px}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.5;cursor:not-allowed}
.btn--nuit-contour{background:transparent;color:#fff;border-color:rgba(255,255,255,.32)}
.btn--nuit-contour:hover{border-color:#fff;background:rgba(255,255,255,.06)}
.lien-fleche{display:inline-flex;align-items:center;gap:6px;font-weight:600;text-decoration:none;color:var(--bleu)}
.lien-fleche:hover{text-decoration:underline;text-underline-offset:4px}
/* ---------- pastilles d'état ---------- */
.pastille{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 10px;border-radius:var(--rp);font-size:12px;font-weight:600;letter-spacing:.01em;white-space:nowrap;vertical-align:middle}
.pastille .ic{width:14px;height:14px}
.pastille--dispo{background:var(--succes-voile);color:var(--succes)}
.pastille--bientot{background:var(--blanc);color:var(--texte-2);border:1px dashed var(--filet-fort)}
.pastille--fictif{background:var(--attention-voile);color:var(--attention)}
.pastille--nuit{background:rgba(255,255,255,.08);color:var(--sur-nuit-2);border:1px dashed rgba(255,255,255,.3)}
.pastille--or{background:var(--or-voile);color:var(--or-texte)}
/* ---------- champs ---------- */
.champ{display:flex;flex-direction:column;gap:6px}
.champ label,.champ .etiquette{font-size:14px;font-weight:600;color:var(--encre)}
.champ .aide{font-size:13px;color:var(--texte-3)}
.saisie{height:48px;width:100%;padding:0 14px;border:1px solid var(--filet-fort);border-radius:var(--r2);background:var(--blanc);font:inherit;font-size:16px;color:var(--encre);transition:border-color var(--duree),box-shadow var(--duree)}
.saisie::placeholder{color:#8891A5}
.saisie:hover{border-color:#AEB7C8}
.saisie:focus-visible,.saisie:focus{border-color:var(--bleu);box-shadow:0 0 0 3px rgba(3,46,122,.16);border-radius:var(--r2)}
.saisie[aria-invalid="true"]{border-color:var(--erreur)}
.champ .erreur-txt{display:flex;gap:6px;align-items:center;font-size:13px;color:var(--erreur);font-weight:500}
[hidden]{display:none!important}
/* ============================================================
Ajouts 1B — composants partagés par toutes les pages hybrides
============================================================ */
.zone{width:100%;max-width:1200px;margin:0 auto;padding-inline:32px}
@media (max-width:900px){.zone{padding-inline:24px}}
@media (max-width:560px){.zone{padding-inline:16px}}
/* marque */
.marque{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:var(--bleu)}
.marque__icone{width:30px;height:30px;display:block;flex:none}
.marque{gap:12px}
.marque__txt{display:flex;flex-direction:column;line-height:1}
.marque__n{font-family:var(--titre);font-weight:800;font-size:16px;letter-spacing:.14em}
.marque__f{font-size:10.5px;font-weight:600;letter-spacing:.3em;text-transform:uppercase;color:var(--or-texte);margin-top:4px}
.sur-nuit .marque{color:#fff}
.sur-nuit .marque__f{color:var(--or)}
.sur-titre{font-size:12.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--or-texte)}
/* bloc « prochainement » : jamais confondu avec une fonction active */
.bloc-bientot{border:1px dashed var(--filet-fort);background:var(--fond);border-radius:var(--r3);padding:18px 20px}
.bloc-bientot .btn{pointer-events:none;opacity:.55}
/* suivi de synchronisation : ce qui est immédiat / ce qui peut attendre */
.sync{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.sync li{display:grid;grid-template-columns:22px 1fr;gap:8px;align-items:start;font-size:14px;line-height:1.4}
.sync li .ic{width:18px;height:18px;margin-top:1px}
.sync small{display:block;font-size:12.5px;color:var(--texte-3)}
.sync__ok .ic{color:var(--succes)}
.sync__attente .ic{color:var(--or-texte)}
.sync__attente .ic--tourne{animation:tourne 1.2s linear infinite}
@keyframes tourne{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.sync__attente .ic--tourne{animation:none}}
.sur-nuit .sync small{color:var(--sur-nuit-2)}
.sur-nuit .sync__ok .ic{color:#7ED9A6}
.sur-nuit .sync__attente .ic{color:var(--or)}
/* navigation inférieure mobile (reprise de la direction B) */
.onglets-bas{display:none}
@media (max-width:900px){
.onglets-bas{display:grid;grid-template-columns:repeat(5,1fr);position:fixed;left:0;right:0;bottom:0;z-index:30;background:var(--blanc);border-top:1px solid var(--filet);padding:6px 6px calc(6px + env(safe-area-inset-bottom,0px))}
.onglets-bas a,.onglets-bas button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-height:54px;border:0;background:transparent;font-size:11.5px;font-weight:500;color:var(--texte-3);text-decoration:none;border-radius:var(--r2);cursor:pointer;font-family:var(--texte)}
.onglets-bas [aria-current="page"]{color:var(--nuit);font-weight:700}
.onglets-bas [aria-current="page"] .ic{color:var(--nuit)}
.onglets-bas__comptoir{background:var(--or)!important;color:var(--nuit)!important;font-weight:700!important;margin:-20px 4px 0;border-radius:18px!important;box-shadow:0 10px 22px -10px rgba(2,37,87,.55)}
}
/* feuille « Plus » */
.feuille{position:fixed;inset:0;z-index:50;display:flex;align-items:flex-end;background:rgba(15,26,46,.45)}
.feuille__boite{width:100%;background:var(--blanc);border-radius:20px 20px 0 0;padding:10px 16px calc(20px + env(safe-area-inset-bottom,0px));max-height:80vh;overflow:auto}
.feuille__poignee{width:40px;height:4px;border-radius:4px;background:var(--filet-fort);margin:4px auto 12px}
.feuille__tete{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}
.feuille__tete h2{font-size:18px}
.feuille a{display:flex;align-items:center;gap:12px;min-height:52px;border-top:1px solid var(--filet);color:var(--encre);text-decoration:none;font-weight:500}
.feuille a .pastille{margin-left:auto}
.bouton-rond{width:44px;height:44px;border-radius:50%;border:1px solid var(--filet-fort);background:var(--blanc);display:grid;place-items:center;cursor:pointer;color:var(--texte-2)}