/* optionnels/synchro-supabase/synchro.css — bouton ☁, fenêtre du compte, porte de connexion (module optionnel)
   Extrait de styles.css à l'étape 8 du découpage. L'ordre de chargement (index.html) est celui
   de l'ancienne feuille : à spécificité égale, la dernière règle l'emporte (voir CARTE.md, CSS). */
 /* SUPABASE:DEBUT — bouton ☁ et fenêtre Compte & synchronisation */
 .cloud-account-btn{position:relative;width:calc(28px * var(--ui-scale-factor));padding-left:0;padding-right:0;display:inline-flex;align-items:center;justify-content:center;gap:0;}
 .cloud-account-icon{font-size:calc(12px * var(--ui-scale-factor));line-height:1;}
 .cloud-account-dot{position:absolute;right:calc(3px * var(--ui-scale-factor));top:calc(3px * var(--ui-scale-factor));width:calc(5px * var(--ui-scale-factor));height:calc(5px * var(--ui-scale-factor));border-radius:50%;background:var(--text-faint);box-shadow:0 0 0 calc(1px * var(--ui-scale-factor)) var(--surface-2);}
 .cloud-account-btn[data-cloud-state="online"] .cloud-account-dot{background:#64d98b;}
 .cloud-account-btn[data-cloud-state="saving"] .cloud-account-dot{background:#e3b155;animation:cloudPulse .9s ease-in-out infinite alternate;}
 .cloud-account-btn[data-cloud-state="pending"] .cloud-account-dot{background:#f0883e;}
 .cloud-account-btn[data-cloud-state="error"] .cloud-account-dot{background:var(--danger);}
 @keyframes cloudPulse{from{opacity:.45}to{opacity:1}}
 .cloud-account-modal{max-width:calc(420px * var(--ui-scale-factor));}
 .cloud-account-modal .modal-body{gap:calc(10px * var(--ui-scale-factor));}
 .cloud-account-modal .field input[type=email],.cloud-account-modal .field input[type=password],.cloud-account-modal .field input[type=url]{width:100%;background:var(--surface-3);border:calc(1px * var(--ui-scale-factor)) solid var(--border);border-radius:calc(5.25px * var(--ui-scale-factor));color:var(--text);font-size:calc(11px * var(--ui-scale-factor));padding:calc(6.75px * var(--ui-scale-factor)) calc(7.5px * var(--ui-scale-factor));font-family:inherit;}
 .cloud-account-modal .field input:focus{outline:none;border-color:var(--accent);}
 .cloud-status-card{padding:calc(9px * var(--ui-scale-factor));border:calc(1px * var(--ui-scale-factor)) solid var(--border-soft);border-radius:calc(6px * var(--ui-scale-factor));background:rgba(255,255,255,.025);font-size:calc(9px * var(--ui-scale-factor));line-height:1.45;color:var(--text-dim);}
 .cloud-status-card strong{color:var(--text);font-weight:700;}
 .cloud-status-card.cloud-warning{border-color:rgba(227,177,85,.45);background:rgba(227,177,85,.07);}
 .cloud-status-card.cloud-error{border-color:rgba(217,88,79,.5);background:rgba(217,88,79,.08);color:#f1b1ac;}
 .cloud-account-actions{display:flex;gap:calc(6px * var(--ui-scale-factor));flex-wrap:wrap;}
 .cloud-account-actions .btn-primary,.cloud-account-actions .btn-ghost{flex:1 1 auto;}
 .cloud-account-note{font-size:calc(8.5px * var(--ui-scale-factor));line-height:1.45;color:var(--text-faint);}
 .cloud-account-email{overflow-wrap:anywhere;}
 .cloud-backups{display:grid;gap:calc(5px * var(--ui-scale-factor));}
 .cloud-backup-row{display:flex;align-items:center;justify-content:space-between;gap:calc(8px * var(--ui-scale-factor));padding:calc(7px * var(--ui-scale-factor));border:calc(1px * var(--ui-scale-factor)) solid var(--border-soft);border-radius:calc(6px * var(--ui-scale-factor));background:rgba(255,255,255,.025);font-size:calc(9px * var(--ui-scale-factor));line-height:1.4;color:var(--text-dim);}
 .cloud-backup-info{min-width:0;flex:1 1 auto;overflow-wrap:anywhere;}
 .cloud-backup-info strong{color:var(--text);font-weight:700;}
 .cloud-backup-actions{display:flex;gap:calc(4px * var(--ui-scale-factor));flex:0 0 auto;}
 .cloud-notice{position:fixed;left:50%;bottom:calc(78px * var(--ui-scale-factor));z-index:12000;display:flex;align-items:center;gap:calc(8px * var(--ui-scale-factor));max-width:min(calc(520px * var(--ui-scale-factor)),calc(100vw - calc(21px * var(--ui-scale-factor))));transform:translateX(-50%);padding:calc(7.5px * var(--ui-scale-factor)) calc(10.5px * var(--ui-scale-factor));border:calc(1px * var(--ui-scale-factor)) solid rgba(227,177,85,.55);border-radius:calc(6px * var(--ui-scale-factor));background:#33291a;color:#fff;font:600 calc(9px * var(--ui-scale-factor))/1.4 system-ui;box-shadow:0 calc(6px * var(--ui-scale-factor)) calc(18px * var(--ui-scale-factor)) rgba(0,0,0,.38);}
 .cloud-notice[hidden]{display:none;}
 .cloud-notice-text{flex:1 1 auto;}
 .cloud-notice-btn{flex:0 0 auto;border:calc(1px * var(--ui-scale-factor)) solid rgba(255,255,255,.35);border-radius:calc(5px * var(--ui-scale-factor));background:transparent;color:#fff;font:inherit;cursor:pointer;padding:calc(3px * var(--ui-scale-factor)) calc(7px * var(--ui-scale-factor));}
 .cloud-notice-btn[hidden]{display:none;}
 .cloud-notice-btn:hover{background:rgba(255,255,255,.12);}

 /* Porte d’entrée : authentification obligatoire avant accès à ColorKanva.
    Même fond que l'intro : le passage connexion → intro se fait sans coupure. Nom en dégradé de la
    palette et mini-cartes repris de l'intro (c'est l'unique élément marquant, le reste reste sobre).
    Calque autonome : dimensions en px fixes, sans --ui-scale-factor (comme l'arène).
    États portés par la classe de .auth-gate : is-checking (session mémorisée en cours de vérification :
    aucun formulaire, donc aucun clignotement) ; is-leaving (la carte s'efface juste avant que l'intro
    prenne le relais). Le formulaire de création de compte est celui de la connexion, avec un champ de
    confirmation (mode géré en JS : cloudGateInit). */
 .auth-gate{position:fixed;inset:0;z-index:50000;display:flex;padding:24px;overflow:auto;color:#f5f7fb;color-scheme:dark;
  background:radial-gradient(circle at 50% 44%,rgb(40,48,76) 0,rgb(18,20,30) 38%,#090a0f 78%,#06070b 100%);
  font-family:system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;}
 .auth-gate.hidden{display:none;}
 .auth-gate [hidden]{display:none !important;}
 /* Tant que la porte est affichée, l'intro reste cachée : elle démarre à l'instant où la porte disparaît. */
 .auth-gate:not(.hidden) ~ .ck-intro{display:none;}
 .auth-card{position:relative;width:min(380px,100%);margin:auto;padding:30px 30px 24px;border:1px solid rgba(255,255,255,.13);border-radius:18px;
  background:linear-gradient(160deg,rgba(35,40,55,.96),rgba(17,21,34,.97));box-shadow:0 28px 90px rgba(0,0,0,.55),0 1px 0 rgba(255,255,255,.07) inset;
  transition:opacity .16s ease,transform .16s ease;}
 .auth-gate.is-leaving .auth-card{opacity:0;transform:scale(.985);pointer-events:none;}
 .auth-brand{display:flex;flex-direction:column;align-items:center;margin:0 0 24px;}
 .auth-brand-mark{position:relative;width:64px;height:40px;}
 .auth-brand-mark i{position:absolute;top:5px;width:30px;height:34px;border-radius:7px;background:linear-gradient(160deg,#232837,#111522);border:1px solid rgba(255,255,255,.18);box-shadow:0 6px 16px rgba(0,0,0,.45);}
 .auth-brand-mark i::before{content:"";position:absolute;left:5px;right:5px;top:5px;height:3px;border-radius:3px;background:var(--c);box-shadow:0 0 8px color-mix(in srgb,var(--c) 60%,transparent);}
 .auth-brand-mark i::after{content:"";position:absolute;left:5px;top:13px;width:60%;height:3px;border-radius:3px;background:rgba(255,255,255,.15);box-shadow:0 7px 0 rgba(255,255,255,.075);}
 .auth-brand-mark i:nth-child(1){left:0;transform:rotate(-10deg);}
 .auth-brand-mark i:nth-child(2){left:17px;top:0;z-index:1;}
 .auth-brand-mark i:nth-child(3){left:34px;transform:rotate(9deg);}
 .auth-logo{margin:14px 0 0;text-align:center;font:900 34px/1.1 system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;letter-spacing:-.065em;
  background:linear-gradient(90deg,#ff356d 0%,#ff8f36 15%,#ffd63d 29%,#3cde8f 44%,#29d4d0 59%,#31adff 73%,#725cff 87%,#d64fff 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;}
 .auth-tagline{margin:6px 0 0;font-size:12px;line-height:1.4;color:#8a93a6;text-align:center;}
 .auth-form{display:grid;gap:14px;}
 .auth-form.hidden{display:none;}
 .auth-field{display:grid;gap:6px;}
 .auth-field label{font-size:12px;font-weight:650;color:#b4bccb;}
 .auth-label-row{display:flex;align-items:baseline;justify-content:space-between;gap:8px;}
 .auth-pw{position:relative;}
 .auth-pw input{padding-right:84px;}
 .auth-field input{width:100%;padding:11px 12px;border:1px solid rgba(255,255,255,.14);border-radius:9px;background:rgba(6,8,13,.55);color:#fff;font-family:inherit;font-size:14px;line-height:1.2;outline:none;transition:border-color .15s,box-shadow .15s,background .15s;}
 .auth-field input::placeholder{color:#5c6376;}
 .auth-field input:hover{background:rgba(6,8,13,.72);}
 .auth-field input:focus{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 24%,transparent);}
 .auth-field input[aria-invalid="true"]{border-color:rgba(243,154,148,.75);}
 .auth-field input[aria-invalid="true"]:focus{box-shadow:0 0 0 3px rgba(243,154,148,.18);}
 .auth-field input:-webkit-autofill{-webkit-text-fill-color:#fff;caret-color:#fff;box-shadow:0 0 0 100px #0d111a inset;}
 .auth-peek{position:absolute;right:5px;top:50%;transform:translateY(-50%);padding:5px 9px;border:0;border-radius:6px;background:transparent;color:#8a93a6;font:inherit;font-size:12px;font-weight:600;cursor:pointer;}
 .auth-peek:hover{color:#e7e9ee;background:rgba(255,255,255,.07);}
 .auth-hint{font-size:11.5px;color:var(--remind);}
 .auth-note{margin:0;font-size:12.5px;line-height:1.45;color:#aeb5c2;text-align:center;}
 .auth-primary{margin-top:2px;padding:12px 14px;border:0;border-radius:10px;background:var(--accent);color:#08110f;font-family:inherit;font-size:14px;font-weight:700;cursor:pointer;box-shadow:0 8px 22px color-mix(in srgb,var(--accent) 20%,transparent);transition:filter .15s,transform .1s,box-shadow .15s;}
 .auth-primary:hover{filter:brightness(1.08);}
 .auth-primary:active{transform:translateY(1px);}
 .auth-primary:disabled{opacity:.55;cursor:default;filter:none;transform:none;}
 .auth-link{padding:2px 3px;border:0;border-radius:4px;background:transparent;color:var(--accent);font-family:inherit;font-size:12px;font-weight:600;cursor:pointer;}
 .auth-link:hover{text-decoration:underline;}
 .auth-link:disabled{opacity:.55;cursor:default;text-decoration:none;}
 .auth-gate button:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
 .auth-switch{margin:0;text-align:center;font-size:12.5px;color:#8a93a6;}
 .auth-switch .auth-link{font-size:12.5px;}
 .auth-message{min-height:18px;margin:-4px 0;font-size:12.5px;line-height:1.45;text-align:center;color:#9fa8b7;}
 .auth-message.error{color:#f39a94;}
 .auth-message.ok{color:#82dca0;}
 .auth-checking{display:none;align-items:center;justify-content:center;gap:10px;padding:14px 0 4px;font-size:13px;color:#aeb5c2;}
 .auth-gate.is-checking .auth-checking{display:flex;}
 .auth-gate.is-checking .auth-form{display:none;}
 .auth-spinner{width:16px;height:16px;border-radius:50%;border:2px solid rgba(255,255,255,.16);border-top-color:var(--accent);animation:authSpin .8s linear infinite;}
 @keyframes authSpin{to{transform:rotate(360deg);}}
 .auth-logout-btn{display:none;}
 .auth-logout-btn.is-visible{display:inline-flex;}
 @media (max-width:520px){.auth-gate{padding:16px;}.auth-card{padding:26px 20px 20px;}.auth-logo{font-size:30px;}.auth-field input{font-size:16px;}}
 @media (prefers-reduced-motion:reduce){.auth-spinner{animation-duration:2.4s;}.auth-card{transition:none;}}
 @media (forced-colors:active){.auth-logo{background:none;color:CanvasText;}}
 /* SUPABASE:FIN */