/* Socle commun de l'appli SHINE : charte (fond à taches, verre, bleu #2a78d6, clair / sombre), connexion, menu des outils.
   Chargé par l'accueil (index.html) ; les pages s'y brancheront une par une. Les règles propres à une page restent dans la page. */
:root {
  color-scheme: light;
  --page: #eef1f6; --surface: #fbfcfe; --surface-2: rgba(255,255,255,0.55);
  --glass: rgba(255,255,255,0.52); --glass-strong: rgba(255,255,255,0.78);
  --glass-edge: rgba(255,255,255,0.85); --glass-edge-2: rgba(255,255,255,0.25);
  --glass-shadow: 0 8px 32px rgba(31,41,74,0.10), 0 1px 2px rgba(31,41,74,0.06);
  --ink: #0b0b0b; --ink-2: #45454a; --muted: #66666d;
  --grid: rgba(60,60,67,0.12); --ring: rgba(60,60,67,0.14);
  --accent: #2a78d6; --good: #006300; --bad: #b42828; --bad-bg: rgba(220,50,50,0.10);
  --warn-bg: rgba(255,214,120,0.30); --warn-ink: #5c4000;
  --blob-1: #b8d4ff; --blob-2: #ffd3bd; --blob-3: #c6f0de; --blob-4: #e3d9ff;
  /* Repères des pôles (accueil, 28/10/2026) : couleur pleine du médaillon, et couleur « texte » lisible sur le verre */
  --p-pilotage: #2a78d6; --p-distributeur: #12996a; --p-finances: #6a4fd1; --p-marketing: #d23f87; --p-logistique: #e0661f; --p-nexus: #0e93a8;
  --p-pilotage-t: #1f63b8; --p-distributeur-t: #0d7a54; --p-finances-t: #5a3fc0; --p-marketing-t: #b52f72; --p-logistique-t: #b9500f; --p-nexus-t: #0b7686;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --page: #0b0c10; --surface: #1c1d22; --surface-2: rgba(255,255,255,0.06);
    --glass: rgba(34,35,42,0.50); --glass-strong: rgba(40,41,48,0.82);
    --glass-edge: rgba(255,255,255,0.22); --glass-edge-2: rgba(255,255,255,0.04);
    --glass-shadow: 0 10px 40px rgba(0,0,0,0.45), 0 1px 2px rgba(0,0,0,0.3);
    --ink: #f3f3f6; --ink-2: #d0d0d6; --muted: #9c9ca5;
    --grid: rgba(235,235,245,0.10); --ring: rgba(255,255,255,0.12);
    --accent: #4a95ec; --good: #30c030; --bad: #ff7a7a; --bad-bg: rgba(255,90,90,0.14);
    --warn-bg: rgba(255,190,70,0.14); --warn-ink: #f3d58a;
    --blob-1: #1d3f78; --blob-2: #5a2c1c; --blob-3: #124a38; --blob-4: #36295e;
    --p-pilotage-t: #79b6f6; --p-distributeur-t: #47d19d; --p-finances-t: #ad99f6; --p-marketing-t: #f37fb8; --p-logistique-t: #f6a067; --p-nexus-t: #55cfe1;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --page: #0b0c10; --surface: #1c1d22; --surface-2: rgba(255,255,255,0.06);
  --glass: rgba(34,35,42,0.50); --glass-strong: rgba(40,41,48,0.82);
  --glass-edge: rgba(255,255,255,0.22); --glass-edge-2: rgba(255,255,255,0.04);
  --glass-shadow: 0 10px 40px rgba(0,0,0,0.45), 0 1px 2px rgba(0,0,0,0.3);
  --ink: #f3f3f6; --ink-2: #d0d0d6; --muted: #9c9ca5;
  --grid: rgba(235,235,245,0.10); --ring: rgba(255,255,255,0.12);
  --accent: #4a95ec; --good: #30c030; --bad: #ff7a7a; --bad-bg: rgba(255,90,90,0.14);
  --warn-bg: rgba(255,190,70,0.14); --warn-ink: #f3d58a;
  --blob-1: #1d3f78; --blob-2: #5a2c1c; --blob-3: #124a38; --blob-4: #36295e;
  --p-pilotage-t: #79b6f6; --p-distributeur-t: #47d19d; --p-finances-t: #ad99f6; --p-marketing-t: #f37fb8; --p-logistique-t: #f6a067; --p-nexus-t: #55cfe1;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; }
body {
  background: var(--page); color: var(--ink); min-height: 100vh;
  font: 15px/1.45 -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}
body::before, .shine-auth::before {
  content: ""; position: fixed; inset: -10vmax; z-index: -1; pointer-events: none;
  background:
    radial-gradient(38vmax 32vmax at 12% 8%, var(--blob-1), transparent 70%),
    radial-gradient(34vmax 30vmax at 92% 14%, var(--blob-2), transparent 70%),
    radial-gradient(40vmax 34vmax at 78% 88%, var(--blob-3), transparent 70%),
    radial-gradient(36vmax 30vmax at 8% 82%, var(--blob-4), transparent 70%),
    var(--page);
  filter: saturate(115%);
}
button, input, select { font: inherit; color: inherit; }
a { color: var(--accent); }
.hidden { display: none !important; }
.muted { color: var(--muted); }
.sous { color: var(--ink-2); font-size: 13px; }
h1 { font-size: 22px; font-weight: 700; margin: 0; letter-spacing: -0.02em; }
h2 { font-size: 15px; font-weight: 680; margin: 0 0 8px; }

/* Verre */
.card, header.top, .btn, input, select, .shine-menu {
  background: var(--glass);
  -webkit-backdrop-filter: blur(24px) saturate(180%); backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid var(--glass-edge-2);
  box-shadow: var(--glass-shadow), inset 0 1px 0 var(--glass-edge), inset 0 -1px 0 var(--glass-edge-2);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .card, header.top, .btn, input, select, .shine-menu { background: var(--surface); }
}
@media (prefers-reduced-transparency: reduce) {
  .card, header.top, .btn, input, select, .shine-menu { background: var(--surface); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
.card { border-radius: 22px; padding: 16px 18px; }
header.top { display: flex; align-items: center; gap: 10px; padding: 8px 10px 8px 16px; border-radius: 24px; background: var(--glass-strong); }
.btn { border-radius: 999px; padding: 9px 18px; min-height: 44px; cursor: pointer; transition: transform .12s; font-weight: 550; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.btn:active { transform: scale(0.97); }
.btn.primary { background: var(--accent); color: #fff; border-color: rgba(255,255,255,0.35); }
.btn.rond { width: 44px; height: 44px; padding: 0; border-radius: 50%; flex: none; }
.btn[disabled] { opacity: .5; cursor: default; }
input, select { border-radius: 14px; padding: 10px 14px; min-height: 48px; outline: none; background: var(--glass-strong); width: 100%; font-size: 16px; }
input:focus, select:focus { box-shadow: var(--glass-shadow), 0 0 0 3px color-mix(in srgb, var(--accent) 35%, transparent); }
.lien { background: none; border: 0; padding: 8px 0; color: var(--accent); cursor: pointer; font-weight: 550; min-height: 44px; text-align: left; }
.pastille { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; padding: 2px 9px; border-radius: 999px; border: 1px solid var(--ring); color: var(--ink-2); white-space: nowrap; }
.shine-ico { width: 22px; height: 22px; flex: none; }
/* Médaillon d'un pôle : son icône en blanc sur sa couleur (--c posée par la page) */
.shine-medal { width: 34px; height: 34px; border-radius: 11px; flex: none; display: grid; place-items: center; color: #fff; background: var(--c, var(--accent));
  box-shadow: 0 6px 14px -6px var(--c, var(--accent)), inset 0 1px 0 rgba(255,255,255,0.35); }
.shine-medal .shine-ico { width: 20px; height: 20px; stroke-width: 2; }

/* Connexion, choix du mot de passe, refus : plein écran par-dessus la page */
.shine-auth { position: fixed; inset: 0; z-index: 100; overflow-y: auto; padding: 12vh 16px 40px; isolation: isolate; }
.shine-carte { max-width: 420px; margin: 0 auto; }
.shine-marque { display: flex; align-items: center; margin: 4px 0 18px; color: var(--ink); }
.shine-marque svg { width: 132px; height: auto; display: block; }
.sh-col { display: grid; gap: 10px; margin-top: 14px; }
.sh-msg { margin-top: 6px; }
/* Double authentification : étapes, QR code (toujours sur fond blanc pour rester lisible en sombre), clé à recopier */
.sh-etapes { margin: 10px 0 0; padding-left: 20px; display: grid; gap: 4px; }
.sh-qr { display: block; width: 184px; height: 184px; margin: 14px auto 6px; padding: 8px; background: #fff; border-radius: 12px; }
.sh-cle { display: block; margin-top: 6px; word-break: break-all; font-size: 13px; user-select: all; }
/* Première fois en deux étapes (28/10/2026) : numéro d'étape, applis à installer, clé à copier */
.sh-etape-n { font-size: 12.5px; font-weight: 650; color: var(--accent); margin-bottom: 4px; letter-spacing: .02em; }
.sh-titre { display: block; margin: 16px 0 8px; font-weight: 650; font-size: 14px; color: var(--ink); }
.sh-applis { display: grid; gap: 8px; }
.sh-appli { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border: 1px solid var(--ring); border-radius: 14px; }
.sh-appli b { font-size: 14px; }
.sh-appli span { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.sh-appli a { font-size: 13px; font-weight: 650; color: var(--accent); text-decoration: none; padding: 7px 12px; border-radius: 999px; background: color-mix(in srgb, var(--accent) 10%, transparent); }
.sh-note { margin-top: 10px; }
.sh-cle-ligne { display: flex; gap: 8px; align-items: center; margin-top: 8px; }
.sh-cle-ligne .sh-cle { flex: 1; margin: 0; font-size: 15px; letter-spacing: .06em; padding: 8px 10px; border-radius: 10px; background: var(--surface-2); }
.sh-copier { min-height: 38px; padding: 6px 14px; flex: none; }
.sh-liens { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
/* Code à 6 chiffres animé (28/10/2026) : la carte arrive, les chiffres sautent en place, curseur dans la case à remplir,
   balayage pendant la vérification, vague verte et coche quand c'est bon, secousse rouge sinon, puis la carte s'efface.
   Le vrai champ est transparent par-dessus les cases. Tour des 30 secondes à droite de la consigne. */
.shine-carte.sh-entree { animation: sh-entree .45s cubic-bezier(.2,.8,.2,1) both; }
.shine-auth.sh-sortie { opacity: 0; transition: opacity .38s ease; }
.shine-auth.sh-sortie .shine-carte { transform: translateY(-10px) scale(.985); filter: blur(3px); transition: transform .38s ease, filter .38s ease; }
.sh-code-tete { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 4px; }
.sh-code-tete .sh-titre { margin: 0; }
.sh-chrono { position: relative; width: 30px; height: 30px; flex: none; display: grid; place-items: center; color: var(--muted); }
.sh-chrono svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); fill: none; stroke-width: 3; }
.sh-chrono circle { stroke: var(--ring); }
.sh-chrono .sh-arc { stroke: var(--accent); stroke-linecap: round; stroke-dasharray: 100; animation: sh-chrono 30s linear infinite; transition: stroke .3s; }
.sh-chrono b { font-size: 10.5px; font-weight: 650; font-variant-numeric: tabular-nums; }
.sh-chrono.fin .sh-arc { stroke: var(--bad); }
.sh-chrono.fin b { color: var(--bad); }
.sh-otp { position: relative; }
.sh-otp input, .sh-otp input:focus { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; min-height: 0; padding: 0; margin: 0; border: 0; border-radius: 0;
  background: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; color: transparent; caret-color: transparent;
  font-size: 16px; letter-spacing: -.5em; outline: none; cursor: text; }
.sh-otp input::selection { background: transparent; color: transparent; }
.sh-cases { display: grid; grid-template-columns: repeat(3, minmax(0, 52px)) 12px repeat(3, minmax(0, 52px)); justify-content: center; gap: 8px; }
.sh-tiret { align-self: center; height: 2px; border-radius: 2px; background: var(--muted); opacity: .45; }
.sh-case { position: relative; overflow: hidden; height: 60px; display: grid; place-items: center; border-radius: 14px;
  background-color: var(--glass-strong); border: 1px solid var(--ring); box-shadow: inset 0 1px 0 var(--glass-edge);
  transition: border-color .2s, box-shadow .2s, background-color .35s, transform .2s; }
.sh-case b { font-size: 27px; font-weight: 650; font-variant-numeric: tabular-nums; line-height: 1; transition: color .2s; }
.sh-case.pleine { border-color: color-mix(in srgb, var(--accent) 45%, var(--ring)); }
.sh-case.pop b { animation: sh-pop .34s cubic-bezier(.2,.9,.3,1.35) both; animation-delay: var(--d, 0ms); }
.sh-otp.focus .sh-case.actif { border-color: var(--accent); transform: translateY(-1px);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent), inset 0 1px 0 var(--glass-edge); }
.sh-otp.focus .sh-case.actif::before { content: ""; position: absolute; left: 50%; top: 50%; width: 2px; height: 28px; margin: -14px 0 0 -1px;
  border-radius: 2px; background: var(--accent); animation: sh-curseur 1.05s steps(1) infinite; }
.sh-otp.verif .sh-case { border-color: color-mix(in srgb, var(--accent) 60%, var(--ring)); }
.sh-otp.verif .sh-case::after { content: ""; position: absolute; inset: 0; background-size: 300% 100%;
  background-image: linear-gradient(100deg, transparent 20%, color-mix(in srgb, var(--accent) 30%, transparent) 50%, transparent 80%);
  animation: sh-balayage 1.2s ease-in-out infinite; animation-delay: calc(var(--i) * 90ms); }
.sh-otp.ok .sh-case { border-color: var(--good); background-color: color-mix(in srgb, var(--good) 14%, var(--glass-strong));
  animation: sh-vague .5s cubic-bezier(.3,.7,.3,1) both; animation-delay: calc(var(--i) * 55ms); transition-delay: calc(var(--i) * 55ms); }
.sh-otp.ok .sh-case b { color: var(--good); transition-delay: calc(var(--i) * 55ms); }
.sh-otp.erreur .sh-cases { animation: sh-secousse .45s cubic-bezier(.36,.07,.19,.97) both; }
.sh-otp.erreur .sh-case { border-color: var(--bad); background-color: var(--bad-bg); }
.sh-otp.erreur .sh-case b { color: var(--bad); }
.sh-etat { min-height: 24px; display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 13.5px; color: var(--ink-2); text-align: center; }
.sh-etat > span { animation: sh-fondu .25s ease both; }
.sh-etat.erreur { color: var(--bad); }
.sh-etat.ok { color: var(--good); font-weight: 650; }
.sh-roue { flex: none; width: 14px; height: 14px; border-radius: 50%; border: 2px solid color-mix(in srgb, var(--accent) 25%, transparent); border-top-color: var(--accent); animation: sh-tour .7s linear infinite; }
.sh-coche { flex: none; width: 22px; height: 22px; fill: none; stroke: var(--good); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sh-coche circle, .sh-coche path { stroke-dasharray: 100; stroke-dashoffset: 100; }
.sh-coche circle { animation: sh-trace .45s ease-out .1s forwards; }
.sh-coche path { animation: sh-trace .3s ease-out .45s forwards; }
@keyframes sh-entree { from { opacity: 0; transform: translateY(14px) scale(.985); } }
@keyframes sh-pop { from { opacity: 0; transform: translateY(8px) scale(.55); filter: blur(6px); } }
@keyframes sh-curseur { 50% { opacity: 0; } }
@keyframes sh-chrono { to { stroke-dashoffset: 100; } }
@keyframes sh-balayage { from { background-position: 100% 0; } to { background-position: 0% 0; } }
@keyframes sh-vague { 40% { transform: translateY(-6px) scale(1.05); } }
@keyframes sh-secousse { 10%, 90% { transform: translateX(-2px); } 20%, 80% { transform: translateX(4px); } 30%, 50%, 70% { transform: translateX(-7px); } 40%, 60% { transform: translateX(7px); } }
@keyframes sh-fondu { from { opacity: 0; transform: translateY(3px); } }
@keyframes sh-tour { to { transform: rotate(360deg); } }
@keyframes sh-trace { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) {
  .shine-carte.sh-entree, .sh-otp *, .sh-otp *::before, .sh-otp *::after, .sh-etat *, .sh-chrono .sh-arc {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important; animation-delay: 0ms !important; transition: none !important; }
}

/* Menu des outils (bouton « Outils » des pages) */
.shine-menu { position: fixed; z-index: 90; border-radius: 20px; padding: 6px; min-width: 260px; max-height: 70vh; overflow-y: auto; background: var(--glass-strong); }
.shine-menu .pole { font-size: 11.5px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; padding: 8px 10px 4px; }
.shine-menu a { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 14px; color: var(--ink); text-decoration: none; min-height: 44px; }
.shine-menu a:hover, .shine-menu a:focus-visible { background: color-mix(in srgb, var(--accent) 10%, transparent); outline: none; }
.shine-menu a[aria-current="true"] { color: var(--accent); font-weight: 650; }
/* Repères des pôles dans le menu : mini médaillon, intitulé et icônes d'outils à la couleur du pôle */
.shine-menu .pole.a-repere { display: flex; align-items: center; gap: 8px; color: var(--ct); }
.shine-menu .pole.a-repere .shine-ico { width: 18px; height: 18px; padding: 3px; border-radius: 6px; background: var(--c); color: #fff; stroke-width: 2.4; }
.shine-menu a.a-repere > .shine-ico { color: var(--ct); }