/* Page P2 « Se connecter », M3 « Mot de passe oublié » (C2-563), M4 « Nouveau mot de passe » (C2-564), P3 « Créer un
   compte » et P4 (C2-561, C2-562), V1 et « Renvoyer le lien de confirmation » (C2-562) et page « bientôt » (C2-560) :
   maquettes v0.6 et v0.7,
   ordinateur (1280 px) et téléphone (390 px). Charte de caseone.fr et de Feedback : Instrument Sans, papier #f5f5f3,
   encre #242625, sauge #4b665b.
   Fichier servi sans session, comme la police, le logo et le décor (app/accounts, PUBLIC_ASSETS). Les tailles sont en rem :
   la taille du texte choisie dans les réglages de l'application (connexion.js) et celle du navigateur s'appliquent. */
@font-face{font-family:Instrument;src:url('/static/moteur/assets/fonts/InstrumentSans.woff2') format('woff2');font-style:normal;font-weight:400 700;font-display:swap}

:root{
  --cx-ink:#242625;--cx-muted:#5d6360;--cx-paper:#f5f5f3;--cx-phone-paper:#f7f5f1;--cx-card:#ffffffed;--cx-line:#e3e5e1;
  --cx-field:#767981;--cx-sage:#4b665b;--cx-dark:#242625;--cx-dark-hover:#3a3d3b;
  --cx-alert-ink:#a4271c;--cx-alert-paper:#fdf0ee;--cx-status-paper:#edf1ed;
  --cx-surface:#ffffff;--cx-on-dark:#ffffff;--cx-bar:#ffffffb8;--cx-disabled:#f3f3f1;--cx-edge:#d9d6cf;--cx-placeholder:#6b6f6c;
  --cx-decor-image:linear-gradient(90deg,#fbfbfaf5,#fbfbfae0 32%,#fbfbfac9 64%,#fbfbfab8),url('/static/assets/landscape-light-v1.webp');
  color-scheme:light
}
/* Thème sombre : le même que celui de l'application (choisi dans ses Réglages, ou sur caseone.fr : cookie caseone-theme). */
:root[data-theme=dark]{
  --cx-ink:#f3f3f4;--cx-muted:#b9bdba;--cx-paper:#1c1b19;--cx-phone-paper:#1c1b19;--cx-card:#262523ed;--cx-line:#3b3a37;
  --cx-field:#8f9391;--cx-sage:#a7cbb9;--cx-dark:#f3f3f4;--cx-dark-hover:#dcdcde;
  --cx-alert-ink:#ff9d92;--cx-alert-paper:#3a1f1c;--cx-status-paper:#2a2f2b;
  --cx-surface:#1f1e1c;--cx-on-dark:#242625;--cx-bar:#1c1b19b8;--cx-disabled:#2a2a28;--cx-edge:#4a4845;--cx-placeholder:#a0a3a1;
  --cx-decor-image:linear-gradient(90deg,#1c1b19f5,#1c1b19e0 32%,#1c1b19c9 64%,#1c1b19b8),url('/static/assets/landscape-light-v1.webp');
  color-scheme:dark
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body.cx{margin:0;min-height:100vh;font-family:Instrument,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;font-size:1rem;line-height:1.5;color:var(--cx-ink);background:var(--cx-paper);-webkit-font-smoothing:antialiased}
.cx a{color:var(--cx-sage)}
.cx a:hover{color:var(--cx-ink)}
.cx a:focus-visible,.cx button:focus-visible,.cx input:focus-visible{outline:2px solid var(--cx-sage);outline-offset:2px}

/* Décor : le paysage de Feedback derrière un voile clair, comme la photo de la maquette. */
.cx-decor{min-height:100vh;display:flex;flex-direction:column;background-color:var(--cx-paper);
  background-image:var(--cx-decor-image);background-size:cover;background-position:center}

.cx-bar{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:4.5rem;padding:0 2rem;background:var(--cx-bar);border-bottom:1px solid var(--cx-line)}
.cx-brand{display:flex;align-items:center;gap:.625rem;min-height:2.75rem;text-decoration:none}
.cx a.cx-brand{color:var(--cx-ink)}
/* La marque (cube, nom, couleurs) est celle de caseone.fr : marque.css, chargée après cette feuille (C2-595). */
.cx-back{display:inline-flex;align-items:center;min-height:2.75rem;font-size:.95rem}

.cx-main{flex:1;width:100%;max-width:80rem;margin:0 auto;padding:2.5rem 2rem;display:flex;flex-wrap:wrap;align-items:center;gap:2rem 5rem}
.cx-card{flex:0 1 28rem;padding:2rem;border-radius:1.5rem;background:var(--cx-card);box-shadow:0 2px 4px #20242003,0 16px 44px -24px #20242020;display:flex;flex-direction:column;gap:1.125rem}
.cx-card h1{margin:0;font-size:1.8rem;line-height:1.15;font-weight:600;letter-spacing:-.04em}
.cx-lede{margin:0;color:var(--cx-muted);font-size:.95rem}
.cx-lede strong{color:var(--cx-ink);font-weight:600}

.cx-message{margin:0;padding:.75rem 1rem;border-left:.25rem solid var(--cx-sage);border-radius:.5rem;background:var(--cx-status-paper);font-weight:500}
.cx-message.cx-alert{border-left-color:var(--cx-alert-ink);background:var(--cx-alert-paper);color:var(--cx-alert-ink)}

.cx-form{display:flex;flex-direction:column;gap:.875rem;margin:0}
.cx-field{display:flex;flex-direction:column;gap:.375rem}
.cx-field label{font-size:.9rem;font-weight:500}
.cx-field input{width:100%;min-height:2.75rem;padding:0 .875rem;border:1px solid var(--cx-field);border-radius:.875rem;font:inherit;font-weight:400;background:var(--cx-surface);color:var(--cx-ink)}
.cx-field input::placeholder{color:var(--cx-placeholder);opacity:1}
.cx-field input[aria-invalid="true"]{border-color:var(--cx-alert-ink);box-shadow:0 0 0 1px var(--cx-alert-ink)}
/* M4 : la règle du mot de passe, sous le champ. */
.cx-rule{margin:0;font-size:.85rem;line-height:1.45;color:var(--cx-muted)}
.cx-message[hidden]{display:none}
.cx-forgot{align-self:flex-start;display:inline-flex;align-items:center;min-height:2.75rem;font-size:.9rem}

.cx-primary,.cx-secondary{display:flex;align-items:center;justify-content:center;width:100%;min-height:3rem;padding:0 1.25rem;border-radius:999px;font:inherit;font-weight:600;text-decoration:none;cursor:pointer}
.cx-primary{border:0;background:var(--cx-dark);color:var(--cx-on-dark)}
.cx a.cx-primary{color:var(--cx-on-dark)}
.cx-primary:hover,.cx a.cx-primary:hover{background:var(--cx-dark-hover);color:var(--cx-on-dark)}
.cx-secondary{border:1px solid var(--cx-edge);background:var(--cx-surface);color:var(--cx-ink);font-weight:500}
.cx-secondary:hover{background:#edf1ed}
.cx-primary[aria-busy="true"]{cursor:progress;opacity:.85}

.cx-signup{margin:0;font-size:.95rem;text-align:center}
/* M3 : le message après une demande (texte simple, comme la maquette) et la mention Google ou Microsoft. */
.cx-sent{margin:0;font-size:1rem;line-height:1.55}
.cx-note{margin:0;font-size:.85rem;color:var(--cx-muted)}
.cx-strong{font-weight:600}

/* Google et Microsoft (C2-559) : les deux boutons au-dessus du formulaire, puis « ou avec votre e-mail » entre deux filets,
   comme la maquette. Sur P3, les boutons restent inactifs tant que la case des conditions n'est pas cochée. */
.cx-providers{gap:.625rem}
.cx-secondary:disabled{cursor:not-allowed;color:var(--cx-muted);background:var(--cx-disabled)}
.cx-secondary:disabled:hover{background:var(--cx-disabled)}
.cx-secondary[aria-busy="true"]{cursor:progress;opacity:.85}
.cx-or{display:flex;align-items:center;gap:.75rem;margin:0;color:var(--cx-muted);font-size:.85rem}
.cx-or::before,.cx-or::after{content:"";flex:1;height:1px;background:var(--cx-line)}
.cx-note[hidden]{display:none}

/* P3 (C2-561) : Standard « pour moi » (choisi) ou Pro « pour mon équipe » (lien vers E1), la mention de l'essai, les
   erreurs sous chaque champ et la case des conditions. */
.cx-offers{display:grid;grid-template-columns:1fr 1fr;gap:.625rem}
.cx-offer{display:flex;flex-direction:column;justify-content:center;min-height:3.5rem;padding:.5rem .875rem;border:1px solid var(--cx-field);border-radius:.875rem;background:var(--cx-surface);color:var(--cx-ink);text-decoration:none;line-height:1.3}
.cx a.cx-offer{color:var(--cx-ink)}
.cx a.cx-offer:hover{background:var(--cx-status-paper);color:var(--cx-ink)}
.cx-offer-on{border:2px solid var(--cx-sage);background:var(--cx-status-paper)}
.cx-offer-name{font-weight:600}
.cx-offer-for{font-size:.9rem;color:var(--cx-muted)}
.cx-trial{margin:0;padding:.625rem .875rem;border-radius:.75rem;background:var(--cx-status-paper);font-size:.95rem;font-weight:500}
.cx-field-error{margin:0;font-size:.9rem;font-weight:500;color:var(--cx-alert-ink)}
.cx-consent{display:flex;align-items:flex-start;gap:.625rem;font-size:.95rem}
.cx-consent input{flex:none;width:1.375rem;height:1.375rem;margin:.0625rem 0 0;accent-color:var(--cx-sage)}
.cx-consent input[aria-invalid="true"]{outline:2px solid var(--cx-alert-ink);outline-offset:2px}
/* P4 (C2-562) : « Modifier l'adresse » se déplie sous les deux boutons, sans script. */
.cx-details{border-top:1px solid var(--cx-line);padding-top:.75rem}
.cx-details summary{display:flex;align-items:center;min-height:2.75rem;color:var(--cx-sage);font-weight:600;cursor:pointer}
.cx-details summary:focus-visible{outline:2px solid var(--cx-sage);outline-offset:2px}
.cx-details[open] summary{margin-bottom:.5rem}
.cx-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* Téléphone (maquette 390 px) : barre de 56 px, carte pleine largeur, cibles de 44 px au moins, texte de 16 px. */
@media (max-width:640px){
  .cx-decor{background-image:none;background-color:var(--cx-phone-paper)}
  .cx-bar{height:3.5rem;padding:0 .75rem 0 1rem;background:var(--cx-phone-paper)}
  .cx-brand{gap:.375rem}
  .cx-back{padding:0 .25rem;font-size:1rem}
  .cx-main{display:block;padding:1.5rem 1rem 6rem}
  .cx-card{padding:1.5rem 1.25rem;border:1px solid var(--cx-line);border-radius:1.25rem;background:#ffffff;box-shadow:0 16px 44px -28px #20242033;gap:1rem}
  .cx-card h1{font-size:1.6rem;letter-spacing:-.035em}
  .cx-lede{font-size:1rem;line-height:1.45}
  .cx-field label{font-size:1rem}
  .cx-field input{min-height:3rem;font-size:1rem}
  .cx-forgot{font-size:1rem}
  .cx-primary,.cx-secondary{min-height:3.25rem;font-size:1rem}
  .cx-signup{font-size:1rem}
  .cx-signup .cx-link{display:inline-flex;align-items:center;min-height:2.75rem}
  .cx-note{font-size:.95rem;line-height:1.45}
  .cx-or{font-size:.95rem}
  .cx-rule{font-size:.95rem}
  .cx-offer{min-height:3.75rem}
  .cx-offer-for,.cx-field-error,.cx-consent,.cx-trial{font-size:1rem}
  .cx-consent input{width:1.5rem;height:1.5rem}
}

/* Entre 601 et 640 px, la barre reste à 72 px : le cube de la marque y fait encore 72 px (marque.css, 56 px sous 600 px). */
@media (min-width:601px) and (max-width:640px){.cx-bar{height:4.5rem}}

@media (prefers-reduced-motion:reduce){*{transition:none !important;animation:none !important}}

/* Bouton « thème clair / sombre » de la barre (connexion.js) : la lune en thème clair, le soleil en thème sombre. */
.cx-bar-actions{display:flex;align-items:center;gap:.75rem}
.cx-theme{display:inline-flex;align-items:center;justify-content:center;width:2.75rem;height:2.75rem;padding:0;border:1px solid var(--cx-line);border-radius:50%;background:transparent;color:var(--cx-ink);cursor:pointer}
.cx-theme:hover{background:var(--cx-status-paper)}
.cx-theme svg{width:1.25rem;height:1.25rem;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.cx-theme .cx-sun{display:none}
:root[data-theme=dark] .cx-theme .cx-sun{display:block}
:root[data-theme=dark] .cx-theme .cx-moon{display:none}

/* M1, choisir son espace (C2-566, maquette v0.6) : une tuile par espace, toutes de la même largeur (une colonne), chacune un
   bouton du formulaire de bascule (C2-567). « Se déconnecter » de la barre est un bouton de formulaire à l'allure d'un lien. */
.cx-wide .cx-card{flex-basis:34rem}
.cx-bar-form{margin:0}
.cx-link-button{border:0;background:none;padding:0;font:inherit;color:var(--cx-sage);text-decoration:underline;cursor:pointer}
.cx-link-button:hover{color:var(--cx-ink)}
.cx-spaces-form{margin:0}
.cx-spaces{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:minmax(0,1fr);gap:.75rem}
.cx-space{display:flex;flex-direction:column;gap:.25rem;box-sizing:border-box;width:100%;min-height:2.75rem;padding:1.25rem 1.375rem;border-radius:1.375rem;border:1px solid var(--cx-line);background:var(--cx-surface);color:var(--cx-ink);font:inherit;text-align:left;cursor:pointer}
.cx-space:hover{border-color:var(--cx-ink)}
.cx-space:focus-visible{outline:2px solid var(--cx-sage);outline-offset:2px}
.cx-space-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:.5rem}
.cx-space-name{font-size:1.15rem;font-weight:600}
.cx-space-last{font-size:.85rem;font-weight:600;color:var(--cx-sage)}
.cx-space-text{color:var(--cx-muted);font-size:.95rem}

/* C2-604 : les textes longs de l'allemand, du portugais et de l'espagnol à 390 px : les mots très longs se coupent plutôt que de
   déborder, les boutons passent à la ligne et grandissent au lieu de rogner leur libellé. */
.cx-card,.cx-message,.cx-note,.cx-rule,.cx-lede,.cx-field-error,.cx-sent,.cx-consent label{overflow-wrap:anywhere;hyphens:auto}
.cx-primary,.cx-secondary{height:auto;padding-block:.65rem;text-align:center;overflow-wrap:anywhere}
.cx-back{overflow-wrap:anywhere}