/* ==========================================================================
   AKEO Auth — habillage v4, feuille commune aux pages du service d'authentification
   --------------------------------------------------------------------------
   Ticket : https://akeoit.atlassian.net/browse/AUTH-45
   Écrite le 27/10/2026 sur le balisage réel d'akeo-it/auth@c5ce3e5 (src/Akeo.Auth.Service/Views),
   alignée sur le DS « Front-end v2 (Svelte) » (thème clair Espace Conseiller / Intranet).

   AUTH-45 : appliquée à tous les Clients, sur les pages publiques et Mon compte, via le partial Views/Shared/_AuthTheme dans chaque vue
   autonome et dans _AccountLayout, chargé en plus des blocs <style> existants. Jamais dans l'admin : la console a son
   propre layout, et la page d'erreur commune ne charge la feuille que hors /admin (ErrorController).

   Tous les sélecteurs commencent par « :root » : un cran de spécificité de plus, pour que cette feuille l'emporte sur
   les anciens blocs <style> des vues (par ex. button.submit teal de Login), quel que soit l'ordre des deux dans la page.

   Limites assumées, faute de toucher au balisage :
   - bandeau d'environnement en rouge (danger) partout, développement compris ;
   - pages d'arrivée sans logo en tête de carte : LoggedOut garde son ancienne pastille ;
   - boutons sans classe (« Me déconnecter », « Changer de compte ») habillés par des sélecteurs de repli.
   - Accueil connecté : couvre l'ancien balisage (main) et le nouveau (AUTH-42).
   - Branding par Client : la couleur primaire n'habille plus les pages (bouton principal noir pour tous) ; le nom
     d'application et le logo restent, le logo gardant ses couleurs (seul le logo AKEO par défaut passe en noir).
   Police Inter auto-hébergée (la CSP n'autorise que font-src 'self') : Inter-Regular, -Medium et -SemiBold en .woff2
   dans wwwroot/fonts/inter/, avec sa licence SIL OFL 1.1. Source : release officielle rsms/inter v4.1, dossier web/ de
   https://github.com/rsms/inter/releases/download/v4.1/Inter-4.1.zip
   (sha256 9883fdd4a49d4fb66bd8177ba6625ef9a64aa45899767dde3d36aa425756b11e).
   Image de fond sur image-ui.akeo.fr (CSP img-src https:). La valeur ci-dessous n'est qu'un défaut : le partial
   Views/Shared/_AuthTheme la redéfinit depuis Auth:Theme:BackgroundImageUrl (config du serveur, sans redéploiement).
   ========================================================================== */

/* ---------- Jetons (DS « Front-end v2 », thème clair Espace Conseiller) ---------- */
:root {
  --text-primary: #1a1a1a;
  --text-helper: #61686e;
  --border-subtle: #e6e9e8;
  --border-default: #d6dbd9;
  --border-strong: #b2b9b6;
  --bg-elevated: #ffffff;
  --bg-surface: #fbfcfd;
  --bg-neutral: #f4f4f4;
  --c-primary: #1864ab;
  --c-info: #03a6a0;
  --c-success: #2a8009;
  --c-warning: #f08c00;
  --c-danger: #c92a2a;
  --r-1: 8px;
  --r-2: 12px;
  --btn-bg: #000000;          /* bouton principal noir, branding AKEO par défaut (26/10/2026) */
  --btn-bg-hover: #292929;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --photo: url("https://image-ui.akeo.fr/akeofr/mon-compte-mon-espace-akeo-oct26.png");
  color-scheme: light;        /* case à cocher, liste déroulante : contrôles natifs toujours en clair, comme le DS */
}

@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/inter/Inter-Regular.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/inter/Inter-Medium.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/inter/Inter-SemiBold.woff2") format("woff2"); }

:root *, :root *::before, :root *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root [hidden] { display: none !important; }

/* ---------- Page : photo en plein fond, encart à droite (ordinateur) ---------- */
/* La personne reste visible à gauche, en couleurs naturelles ; seule la partie droite, où se posent le logo,
   le bandeau et le pied de page, est assombrie. */
:root body {
  min-height: 100vh; min-height: 100dvh;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem;
  padding: 1.5rem 1.5rem 1.5rem calc(55% + 1.5rem);
  font-family: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  font-size: .875rem; line-height: 1.5; color: var(--text-primary);
  background: linear-gradient(90deg, rgba(20, 26, 14, .08) 40%, rgba(20, 26, 14, .62) 62%),
              var(--photo) 100% 40% / cover no-repeat, #3a4a2c;
}
/* Pages du compte et de récupération d'accès (_AccountLayout) : barre d'en-tête, carte en dessous ; l'ensemble est centré
   verticalement, comme les pages d'arrivée (27/10/2026). */
:root .shell { width: 100%; max-width: 460px; }

/* ---------- Bandeau d'environnement = Badge du DS (forme square), agrandi à 12 px ---------- */
/* Danger dans tous les environnements ; fond opaque pour rester lisible sur la photo.
   Au-dessus de la carte, à l'endroit où les vues le placent. */
:root .env-banner {
  --role: var(--c-danger);
  display: block; width: fit-content; padding: 8px 12px; white-space: nowrap;
  border: 1px solid var(--role); border-radius: var(--r-1);
  background: color-mix(in srgb, var(--role) 15%, #fff); color: var(--role);
  font-size: .75rem; font-weight: 600; letter-spacing: .04em; line-height: 1;
  text-box: trim-both cap alphabetic;
}

/* ---------- Barre d'en-tête des pages du compte ---------- */
:root header.top {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem;
  margin-bottom: 1rem;
}
:root header.top > img { display: block; height: 32px; width: auto; filter: brightness(0) invert(1); } /* logo blanc sur la photo */
:root header.top form { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: .5rem .75rem; }

/* ---------- Carte (Card du DS : bordure border-subtle, rayon 12 px, sans ombre) ---------- */
:root .card {
  width: 100%; max-width: 460px; padding: 2rem 2rem 1.75rem;
  background: var(--bg-elevated); border: 1px solid var(--border-subtle); border-radius: var(--r-2); box-shadow: none;
  /* « backwards », jamais « both » : une animation de transform maintenue après sa fin fait de la carte le repère des
     éléments fixed qu'elle contient (voile et popin « Résolution de problèmes » de Turnstile, décalés et coupés). */
  animation: card-in .5s var(--ease) backwards;
}
@keyframes card-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
/* Pages d'arrivée (sans _AccountLayout) : contenu centré comme la connexion ; formulaires et encarts alignés à gauche. */
:root body:not(:has(> .shell)) .card { text-align: center; }
:root .card form, :root .card .error, :root .card .notice, :root .card .warn, :root .card .session, :root .card .perimeter-denied,
:root .card div.hint, :root .card .panel, :root .card dl.rows { text-align: left; }

/* Logo en tête de carte (le fichier est teal : rendu en noir, branding AKEO par défaut). */
:root .brand { margin-bottom: 1.5rem; text-align: center; }
:root .brand .logo { display: block; height: 48px; width: auto; max-width: 220px; margin: 0 auto; }
/* Le logo AKEO par défaut (teal) passe en noir ; le logo d'un Client garde ses couleurs. */
:root .brand .logo[src$="/img/akeo-logo.svg"] { filter: brightness(0); }
:root .brand .name { margin-top: 1rem; font-size: 1.25rem; font-weight: 600; line-height: 1.3; letter-spacing: -.01em; color: var(--text-primary); }
:root .brand .baseline { margin-top: 1rem; color: var(--text-helper); }
/* Première connexion, transfert de session : le h1 tient lieu de titre, le nom d'application est masqué
   (le h1 masqué « Accueil » du nouvel Accueil ne compte pas). */
:root .card:has(> h1:not(.visually-hidden)) .brand .name { display: none; }
:root .card:has(> h1:not(.visually-hidden)) .brand { margin-bottom: 1rem; }

/* ---------- Textes (Heading niveau 2, HelperText) ---------- */
:root h1 { font-size: 1.25rem; font-weight: 600; line-height: 1.3; letter-spacing: -.01em; text-wrap: balance; }
:root h2 { font-size: 1rem; font-weight: 600; line-height: 1.35; }
:root .lede, :root .card > h1 + p { margin-top: .5rem; color: var(--text-helper); }
:root .note { margin-top: 1rem; font-size: .75rem; color: var(--text-helper); }

/* ---------- Champs (FIELD_BASE, hauteur portée à 44 px pour le mobile) ---------- */
:root .card form { margin-top: 1.5rem; }
:root .brand + form { margin-top: 0; }
:root label { display: block; margin: 1rem 0 .25rem; font-size: .6875rem; font-weight: 400; color: var(--text-helper); }
:root form > label:first-of-type { margin-top: 0; }
:root .field { position: relative; }
:root input[type=text], :root input[type=password], :root input[type=email], :root select {
  width: 100%; height: 2.75rem; padding: 0 .5rem;
  border: 1px solid var(--border-subtle); border-radius: var(--r-1); background: #fff;
  font: inherit; font-size: .8125rem; color: var(--text-primary);
}
:root .field input[type=password] { padding-right: 3rem; }
:root input::placeholder { color: var(--text-helper); }
:root input:hover, :root select:hover { border-color: var(--border-default); }
/* Focus global du DS : 2 px c-primary, décalé de 2 px (les sélecteurs nommés couvrent les anciens anneaux teal et dorés). */
:root :focus-visible, :root .reveal:focus-visible, :root .submit:focus-visible, :root .button:focus-visible, :root .forgot:focus-visible, :root a.back:focus-visible,
:root .remember input[type=checkbox]:focus-visible { outline: 2px solid var(--c-primary); outline-offset: 2px; }
:root input:focus-visible, :root select:focus-visible { border-color: var(--c-primary); box-shadow: none; }

/* Afficher le mot de passe */
:root .reveal {
  position: absolute; right: .3rem; top: 50%; transform: translateY(-50%);
  width: 2.5rem; height: 2.5rem; display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: 6px; background: none; color: var(--text-helper); cursor: pointer;
}
:root .reveal:hover { color: var(--text-primary); background: var(--bg-neutral); }
:root .reveal svg { width: 1.25rem; height: 1.25rem; }
:root .reveal .icon-off { display: none; }
:root .reveal[aria-pressed="true"] .icon-on { display: none; }
:root .reveal[aria-pressed="true"] .icon-off { display: block; }

/* Checkbox du DS : case native, libellé 13 px, écart 8 px. */
:root .remember { display: flex; align-items: center; gap: .5rem; margin-top: 1rem; }
:root .remember input[type=checkbox] { flex: none; width: auto; height: auto; margin: 0; accent-color: auto; cursor: pointer; }
:root .remember label { margin: 0; font-size: .8125rem; font-weight: 400; color: var(--text-primary); cursor: pointer; }

/* Règles du mot de passe, aides */
:root .rules { margin-top: .5rem; padding-left: 1.1rem; font-size: .75rem; color: var(--text-helper); }
:root .rules li { margin: .125rem 0; }
:root p.hint, :root .help, :root .meta, :root .fine { margin-top: .25rem; font-size: .75rem; color: var(--text-helper); }
:root .section { margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--border-subtle); }

/* ---------- Encarts : erreur (danger), avis (info), avertissement (warning), aide (neutre) ---------- */
:root .error, :root .notice, :root .warn, :root .perimeter-denied, :root div.hint, :root .field-error {
  display: flex; align-items: flex-start; gap: .5rem; margin-top: 1rem; padding: .625rem .75rem;
  border-radius: var(--r-1); font-size: .8125rem; line-height: 1.5; color: var(--text-primary);
}
:root .error, :root .perimeter-denied {
  color: var(--c-danger);
  background: color-mix(in srgb, var(--c-danger) 10%, #fff); border: 1px solid color-mix(in srgb, var(--c-danger) 25%, #fff);
}
:root .notice { background: color-mix(in srgb, var(--c-info) 10%, #fff); border: 1px solid color-mix(in srgb, var(--c-info) 30%, #fff); }
:root .notice svg { color: #027a76; }
:root .warn { flex-direction: column; background: color-mix(in srgb, var(--c-warning) 10%, #fff); border: 1px solid color-mix(in srgb, var(--c-warning) 35%, #fff); }
:root .warn .head { display: flex; align-items: center; gap: .5rem; font-weight: 600; }
:root .warn .head svg { color: #b06700; }
/* Aide d'Accès refusé : encart d'attention, teinte « content » du rôle warning comme l'avertissement de Mon compte
   (27/10/2026) ; il dit quoi faire pour obtenir l'accès. Texte suivi du nom du groupe AD en gras, sur une seule ligne de
   texte (pas de flex, qui les découperait en colonnes). */
:root div.hint {
  display: block;
  background: color-mix(in srgb, var(--c-warning) 10%, #fff); border: 1px solid color-mix(in srgb, var(--c-warning) 35%, #fff);
}
:root .field-error { margin-top: .375rem; padding: 0; color: var(--c-danger); font-size: .75rem; }
:root .error svg, :root .notice svg, :root .warn svg, :root .field-error svg { flex: none; width: 1rem; height: 1rem; margin-top: .15rem; }

/* ---------- Turnstile ---------- */
:root .turnstile { margin-top: 1rem; }
:root [data-turnstile-status] { margin-top: .375rem; font-size: .75rem; color: var(--text-helper); }

/* ---------- Boutons ---------- */
/* Button primary lg : noir, toute la largeur de la carte. Survol (27/10/2026) : le bouton s'éclaircit en anthracite
   et se soulève d'une ombre douce, puis redescend à l'appui ; 150 ms.
   Les boutons sans classe des vues sont couverts : principal par défaut (« Me déconnecter »),
   secondaire quand un bouton principal le précède dans .actions (« Changer de compte » d'Accès refusé). */
:root .submit, :root .button, :root button.secondary, :root .card button[type=submit]:not([class]) {
  position: relative; display: flex; align-items: center; justify-content: center;
  width: 100%; height: 2.75rem; margin-top: 1.5rem; padding: 0 1rem;
  border: 1px solid transparent; border-radius: var(--r-1); background: var(--btn-bg); color: #fff;
  font: inherit; font-size: .8125rem; font-weight: 500; text-decoration: none; cursor: pointer;
  transition: background-color .15s ease-out, border-color .15s ease-out, box-shadow .15s ease-out, transform .06s var(--ease);
}
:root .submit:hover, :root .button:hover, :root .card button[type=submit]:not([class]):hover {
  background: var(--btn-bg-hover); box-shadow: 0 4px 12px rgba(0, 0, 0, .18);
}
:root .submit:active, :root .button:active, :root .card button[type=submit]:not([class]):active {
  background: var(--btn-bg); box-shadow: none; transform: translateY(1px);
}
/* Button secondary : contour border-default ; au survol, bordure border-strong sur le gris neutre de la page. */
:root .button.secondary, :root button.secondary, :root .actions > .button + form button:not([class]) {
  margin-top: .75rem; background: transparent; color: var(--text-primary); border-color: var(--border-default);
}
:root .button.secondary:hover, :root button.secondary:hover, :root .actions > .button + form button:not([class]):hover {
  background: var(--bg-neutral); border-color: var(--border-strong); box-shadow: none;
}
:root .button.secondary:active, :root button.secondary:active, :root .actions > .button + form button:not([class]):active { background: #e9ecef; }
:root header.top .button.secondary { background: var(--bg-elevated); } /* posé sur la photo */
:root header.top .button.secondary:hover { background: var(--bg-neutral); }
/* Button sm (Se déconnecter, Renseigner mon adresse, Réessayer la vérification). */
:root .button.small, :root .button[data-turnstile-retry] {
  display: inline-flex; width: auto; height: 2rem; margin-top: 0; padding: 0 .625rem; font-size: .75rem;
}
:root .button[data-turnstile-retry] { margin-top: .5rem; }
/* « Renseigner mon adresse » dans l'avertissement de Mon compte : bouton secondaire sm, comme dans la maquette. */
:root .warn .button.small { margin-top: .5rem; background: var(--bg-elevated); color: var(--text-primary); border-color: var(--border-default); }
:root .warn .button.small:hover { background: var(--bg-neutral); border-color: var(--border-strong); box-shadow: none; }
:root .submit:disabled, :root .button:disabled { cursor: not-allowed; opacity: .5; box-shadow: none; transform: none; }
:root .submit:disabled:hover { background: var(--btn-bg); }
:root .submit.is-loading { cursor: progress; opacity: .85; }
:root .submit .label-loading { display: none; }
:root .submit.is-loading .label-default { visibility: hidden; }
:root .submit.is-loading .label-loading { position: absolute; inset: 0; display: inline-flex; align-items: center; justify-content: center; gap: .5rem; }
:root .spinner { width: 1.05rem; height: 1.05rem; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .4); border-top-color: #fff; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Boutons empilés (Accueil : Mon compte, puis Se déconnecter) : 12 px entre eux. */
:root .button + .button { margin-top: .75rem; }
:root .button + form { margin-top: 0; }
/* Deux boutons côte à côte se partagent la ligne ; empilés sur mobile. */
:root .actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.5rem; }
/* Libellé sur une ligne : un libellé trop long passe le bouton sur sa propre ligne plutôt que de se couper. */
:root .actions > *, :root .actions > form > button { flex: 1 1 10rem; white-space: nowrap; }
:root .actions .submit, :root .actions .button, :root .actions button { margin-top: 0; }
:root .actions > form { display: flex; margin-top: 0; }
/* Accès refusé : le formulaire « Changer de compte » porte style="flex:1; min-width:140px" ;
   sans ce !important, les deux boutons ne se partageraient pas la ligne à parts égales. */
:root .actions > form[style] { flex: 1 1 10rem !important; }
/* Même rangée que « Retour à l'accueil » : pas de marge haute de bouton secondaire. */
:root .actions > .button + form button:not([class]) { margin-top: 0; }

/* ---------- Liens (Button ghost, en noir) ---------- */
:root .forgot-links { display: flex; flex-wrap: wrap; justify-content: center; gap: .25rem 1.25rem; margin-top: 1rem; }
:root .forgot, :root a.back, :root a.other { font-size: .8125rem; font-weight: 500; color: #000; text-decoration: none; }
:root .forgot:hover, :root a.back:hover, :root a.other:hover { color: #000; text-decoration: underline; }
:root a.back { display: inline-flex; margin-top: 1.25rem; }
:root a.other { display: inline-block; margin-top: 1rem; }

/* ---------- Badges : erreur (danger) et type de compte (primary) ---------- */
:root .card > .badge {
  display: block; width: fit-content; margin: 0 auto .75rem; padding: 4px 8px;
  border: 1px solid var(--c-danger); border-radius: var(--r-1);
  background: color-mix(in srgb, var(--c-danger) 15%, #fff); color: var(--c-danger);
  font-size: .75rem; font-weight: 600; letter-spacing: .04em;
}
:root .session .badge {
  display: inline-block; margin-left: .5rem; padding: 2px 6px; vertical-align: 1px;
  border: 1px solid var(--c-primary); border-radius: 4px; background: color-mix(in srgb, var(--c-primary) 15%, #fff);
  color: var(--c-primary); font-size: .625rem; font-weight: 600; letter-spacing: .04em; line-height: 1.4;
}

/* ---------- Blocs propres à certaines pages ---------- */
/* Accueil connecté, ancien balisage (main) : bloc de session sous le logo. */
:root .card > .session {
  margin-top: 1.25rem; padding: .75rem .875rem; border-radius: var(--r-1);
  background: var(--bg-surface); border: 1px solid var(--border-subtle); font-size: .8125rem;
}
:root .session .who { font-weight: 600; color: var(--text-primary); overflow-wrap: anywhere; }
:root .session .sub { margin-top: .25rem; font-family: ui-monospace, Consolas, monospace; font-size: .75rem; color: var(--text-helper); }
/* Continuer en tant que : l'identité en évidence (p.identity, à ne pas confondre avec .session .identity de l'Accueil). */
:root p.identity {
  display: flex; flex-direction: column; align-items: center; gap: .25rem; margin-top: 1.25rem; padding: .875rem;
  border-radius: var(--r-1); background: var(--bg-surface); border: 1px solid var(--border-subtle);
}
:root p.identity .label { font-size: .75rem; color: var(--text-helper); }
:root p.identity .value { font-size: 1.125rem; font-weight: 600; letter-spacing: .02em; }

/* Accueil connecté, nouveau balisage (AUTH-42, branche preprod du 27/10/2026) : logo et identité côte à côte,
   liste « Vos accès », note et « Se déconnecter » sur une ligne. Tout en noir et gris neutres, sans teal. */
:root .visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
:root .brand.connected {
  display: flex; align-items: center; gap: 1rem; margin-bottom: 0; padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--border-subtle); text-align: left;
}
:root .brand.connected .logo { flex: none; height: 40px; margin: 0; }
:root .brand.connected .session { min-width: 0; margin: 0; padding: 0; background: none; border: 0; font-size: .8125rem; }
:root .session .label { font-size: .75rem; color: var(--text-helper); }
:root .session .identity { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .5rem; }
:root .session .identity .badge { margin-left: 0; }
:root .session .details { margin-top: .125rem; font-size: .8125rem; color: var(--text-primary); overflow-wrap: anywhere; }
:root .card > h2 { margin-top: 1.5rem; text-align: left; }
:root .accesses {
  margin-top: .75rem; overflow: hidden; text-align: left;
  border: 1px solid var(--border-subtle); border-radius: var(--r-1);
}
:root .access {
  display: flex; align-items: center; gap: .875rem; padding: .875rem 1rem;
  color: var(--text-primary); text-decoration: none; background: var(--bg-elevated);
  transition: background-color .15s ease-out;
}
:root .access + .access { border-top: 1px solid var(--border-subtle); }
:root .access:hover { background: var(--bg-neutral); }
:root .access:hover .access-title { color: var(--text-primary); }
:root .access:active { background: #e9ecef; }
:root .access:focus-visible { outline: 2px solid var(--c-primary); outline-offset: -2px; border-radius: var(--r-1); }
/* Icône dans la vignette du DS (IdentityTile) : carré au rayon des champs, bordure border-default, fond gris, picto noir. */
:root .access-icon {
  flex: none; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--border-default); border-radius: var(--r-1); background: #edeff1; color: #000;
}
:root .access-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .125rem; }
:root .access-title { font-size: .875rem; font-weight: 600; }
:root .access-desc { font-size: .8125rem; line-height: 1.45; color: var(--text-helper); }
/* Session « Se connecter en tant que » en cours : Badge success du DS. */
:root .access-live {
  align-self: flex-start; margin-top: .25rem; padding: 2px 6px; border-radius: 4px;
  background: color-mix(in srgb, var(--c-success) 12%, #fff); border: 1px solid color-mix(in srgb, var(--c-success) 35%, #fff);
  color: #1f6107; font-size: .6875rem; font-weight: 600;
}
:root .access-chevron { flex: none; color: var(--text-helper); }
:root .closing {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem;
  margin-top: 1.25rem; text-align: left;
}
:root .closing .note { flex: 1 1 14rem; margin-top: 0; text-align: left; }
:root .closing form { flex: none; margin-top: 0; }
:root .closing button.secondary { width: auto; margin-top: 0; padding: 0 1rem; }
/* Mon compte : lignes d'information. */
:root dl.rows { margin-top: 1.25rem; }
:root dl.rows > div {
  display: flex; flex-direction: row; align-items: baseline; justify-content: space-between; gap: 1rem;
  padding: .625rem 0; border-top: 0; border-bottom: 1px solid var(--border-subtle);
}
:root dl.rows > div:first-child { border-top: 1px solid var(--border-subtle); }
:root dl.rows dt, :root dl.rows dd { flex: none; }
:root dl.rows dt { font-size: .75rem; color: var(--text-helper); }
:root dl.rows dd { font-size: .8125rem; font-weight: 500; word-break: break-word; }
:root dl.rows dd .none { color: var(--text-helper); font-style: italic; font-weight: 400; }
/* Se connecter en tant que : recherche, fiche de la personne, session en cours. */
:root .search { display: flex; gap: .5rem; }
:root .search input { flex: 1; min-width: 0; }
:root .search .button { flex: none; width: auto; margin-top: 0; }
:root .panel { margin-top: 1.5rem; padding: 1rem; border: 1px solid var(--border-subtle); border-radius: var(--r-1); background: var(--bg-surface); }
/* Session en cours : surface neutre du DS. */
:root .panel.current { border-color: var(--border-default); background: var(--bg-surface); }
:root .panel h2 { font-size: 1rem; font-weight: 600; }
:root .panel .meta { margin-top: .25rem; font-size: .75rem; color: var(--text-helper); }
/* Formulaire « Ouvrir ensuite » de la fiche personne ; pas le formulaire « Arrêter », rangé dans la ligne de boutons
   de la session en cours (il s'aligne sur les boutons « Ouvrir … »). */
:root .panel > form { margin-top: .75rem; }

/* ---------- Pied de page ---------- */
:root footer { color: #fff; opacity: .92; font-size: .75rem; text-align: center; }
:root .shell > footer { margin-top: 1rem; }

/* ---------- Mobile et tablette portrait : la photo en bandeau en haut ---------- */
/* L'encart à droite n'aurait que 300 px et la photo perdrait la personne : la photo passe en bandeau, sans voile,
   et la carte vient la recouvrir par le bas, sur le fond neutre. Le bandeau grandit avec la largeur (320 px en 390,
   422 px en 768) ; toutes les cartes commencent au même niveau, 70 px avant le bas de la photo. */
@media (max-width: 900px), (orientation: portrait) {
  :root body {
    --band: clamp(320px, 55vw, 440px); --card-top: calc(var(--band) - 70px);
    position: relative; z-index: 0; justify-content: flex-start;
    padding: var(--card-top) .75rem 1.25rem; background: var(--bg-neutral);
  }
  :root body::before {
    content: ""; position: absolute; inset: 0 0 auto 0; height: var(--band); z-index: -1;
    background: linear-gradient(rgba(20, 26, 14, .45), rgba(20, 26, 14, 0) 96px), var(--photo) 50% 20% / cover no-repeat, #3a4a2c;
  }
  /* Le bandeau d'environnement se pose sur la photo, 12 px au-dessus de la carte, sans la pousser. */
  :root body > .env-banner { position: absolute; top: calc(var(--card-top) - 39px); left: 50%; transform: translateX(-50%); }
  /* Pages du compte : logo et « Se déconnecter » en haut, sur la photo ; 16 + barre + 16 = --card-top. */
  :root body:has(> .shell) { padding-top: 1rem; }
  :root header.top { min-height: calc(var(--card-top) - 2rem); align-items: flex-start; align-content: flex-start; }
  :root footer { color: var(--text-helper); opacity: 1; }
}
@media (max-width: 520px) {
  :root .card { padding: 1.5rem 1rem 1.25rem; }
  :root .actions > *, :root .actions > form > button { flex-basis: 100%; }
  /* Accueil : note puis « Se déconnecter » sur toute la largeur. */
  :root .closing { flex-direction: column; align-items: stretch; }
  :root .closing .note { flex: none; }
  :root .closing button.secondary { width: 100%; }
  :root .brand.connected { align-items: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  :root *, :root *::before, :root *::after { animation: none !important; transition-duration: .01ms !important; }
}