/* =====================================================================
   connexion.css : pages de connexion (connexion.html, connexion_admin.html).
   Refonte HIG du 21/10/2026, concept « split vivant » validé par l'utilisateur :
   - à gauche, panneau de marque sur un dégradé rouge OneRetail profond, courbes
     abstraites qui dérivent très lentement (arrêtées si mouvement réduit) ;
   - à droite, carte de connexion HIG (bouton capsule, liste groupée, champs 44 px).
   Chargé par ces deux pages seulement, après tokens.css et app.css.
   Le panneau de marque n'affiche AUCUNE donnée de gestion (page publique).

   Palette bleue du portail (28/10/2026) : les pages de connexion restent telles
   quelles (décision de l'utilisateur). Les jetons de couleur d'avant la palette
   bleue sont donc FIGÉS ici, sur .page-connexion (clair, sombre choisi, sombre
   automatique, contraste renforcé) : tokens.css peut changer sans modifier
   l'aspect de ces deux pages.
   ===================================================================== */

/* ---------- Jetons figés (valeurs de tokens.css v=2, avant la palette bleue) ---------- */
.page-connexion {
  --brand-deep: #A41018;
  --brand-bright: #DF3334;
  --accent: #C72226;
  --accent-fill: #C72226;
  --accent-fill-hover: #B21C20;
  --accent-fill-active: #A41018;
  --accent-tint: rgba(199, 34, 38, .10);
  --accent-tint-hover: rgba(199, 34, 38, .16);
  --accent-ring: rgba(199, 34, 38, .30);
  --on-accent: #FFFFFF;
  --label: #1D1D1F;
  --label-2: #6E6E73;
  --label-3: #8E8E93;
  --label-4: #C7C7CC;
  --bg: #F2F2F7;
  --bg-elevated: #FFFFFF;
  --bg-inset: #F2F2F7;
  --bg-hover: rgba(120, 120, 128, .08);
  --bg-pressed: rgba(120, 120, 128, .16);
  --bg-chrome: rgba(249, 249, 251, .80);
  --bg-chrome-solid: #F9F9FB;
  --bg-tooltip: #1D1D1F;
  --on-tooltip: #FFFFFF;
  --scrim: rgba(0, 0, 0, .40);
  --fill-1: rgba(120, 120, 128, .20);
  --fill-2: rgba(120, 120, 128, .16);
  --fill-3: rgba(120, 120, 128, .12);
  --fill-4: rgba(120, 120, 128, .08);
  --seg-track: rgba(118, 118, 128, .12);
  --seg-thumb: #FFFFFF;
  --seg-thumb-shadow: 0 3px 8px rgba(0, 0, 0, .12), 0 3px 1px rgba(0, 0, 0, .04);
  --separator: rgba(60, 60, 67, .29);
  --separator-soft: rgba(60, 60, 67, .13);
  --separator-opaque: #C6C6C8;
  --field-border: rgba(60, 60, 67, .18);
  --green: #1E7A34;  --green-fill: #34C759;  --green-tint: rgba(52, 199, 89, .14);
  --orange: #B25000; --orange-fill: #FF9500; --orange-tint: rgba(255, 149, 0, .16);
  --critical: #7A0C12;
  --critical-tint: rgba(122, 12, 18, .09);
  --negative: #7A0C12;
  --neutral: #3A3A3C; --neutral-tint: rgba(120, 120, 128, .14);
  /* jetons apparus avec la palette bleue, ramenés aux valeurs d'avant pour les règles communes (app.css) */
  --alert: #B25000; --alert-fill: #FF9500; --alert-tint: rgba(255, 149, 0, .16);
  --danger: #7A0C12; --danger-tint: rgba(122, 12, 18, .09);
  --info: #3A3A3C; --info-tint: rgba(120, 120, 128, .14);
  --shadow-1: 0 1px 2px rgba(0, 0, 0, .04), 0 1px 3px rgba(0, 0, 0, .05);
  --shadow-2: 0 4px 16px rgba(0, 0, 0, .08), 0 1px 3px rgba(0, 0, 0, .05);
  --shadow-3: 0 24px 60px rgba(0, 0, 0, .18), 0 6px 18px rgba(0, 0, 0, .08);
  --shadow-focus: 0 0 0 4px var(--accent-ring);
}
@media (prefers-contrast: more) {
  .page-connexion { --label-2: #4A4A4F; --separator: rgba(60, 60, 67, .5); --separator-soft: rgba(60, 60, 67, .3); --field-border: rgba(60, 60, 67, .45); }
}

.page-connexion {
  /* panneau de marque : rouge OneRetail → bordeaux (texte blanc ≥ 5,9:1 partout) */
  --cx-fond: linear-gradient(158deg, #C72226 0%, #A41018 42%, #6E0B11 78%, #4A070B 100%);
  --cx-texte: #FFFFFF;
  --cx-texte-2: rgba(255, 255, 255, .88);   /* ≥ 4,9:1 sur #C72226, davantage vers le bordeaux */
  --cx-trait: rgba(255, 255, 255, .26);
  --cx-trait-fin: rgba(255, 255, 255, .07);
  --cx-pastille: rgba(255, 255, 255, .13);
  --cx-pastille-bord: rgba(255, 255, 255, .22);
  --cx-ok: #4ADE80;
  --cx-ancien: #FFD60A;
  background: var(--bg);
}
/* thème sombre choisi (data-theme="dark") ou automatique (sauf choix « Clair ») : mêmes valeurs, comme tokens.css */
@media screen {
  :root[data-theme="dark"] .page-connexion {
    --cx-fond: linear-gradient(158deg, #9A161B 0%, #6A0D12 40%, #34060A 76%, #160204 100%);
    --cx-texte-2: rgba(255, 255, 255, .84);
    --cx-trait: rgba(255, 255, 255, .22);
    /* jetons sombres figés (tokens.css v=2) */
    --accent: #FF5A5F;
    --accent-fill: #D92D33;
    --accent-fill-hover: #E3393F;
    --accent-fill-active: #C72226;
    --accent-tint: rgba(255, 90, 95, .16);
    --accent-tint-hover: rgba(255, 90, 95, .24);
    --accent-ring: rgba(255, 90, 95, .45);
    --label: #F5F5F7;
    --label-2: #98989F;
    --label-3: #6E6E73;
    --label-4: #48484A;
    --bg: #000000;
    --bg-elevated: #1C1C1E;
    --bg-inset: #2C2C2E;
    --bg-hover: rgba(120, 120, 128, .16);
    --bg-pressed: rgba(120, 120, 128, .28);
    --bg-chrome: rgba(22, 22, 24, .78);
    --bg-chrome-solid: #161618;
    --bg-tooltip: #3A3A3C;
    --on-tooltip: #F5F5F7;
    --scrim: rgba(0, 0, 0, .60);
    --fill-1: rgba(120, 120, 128, .36);
    --fill-2: rgba(120, 120, 128, .32);
    --fill-3: rgba(120, 120, 128, .24);
    --fill-4: rgba(120, 120, 128, .18);
    --seg-track: rgba(118, 118, 128, .24);
    --seg-thumb: #636366;
    --seg-thumb-shadow: 0 3px 8px rgba(0, 0, 0, .3);
    --separator: rgba(84, 84, 88, .65);
    --separator-soft: rgba(84, 84, 88, .40);
    --separator-opaque: #38383A;
    --field-border: rgba(84, 84, 88, .55);
    --green: #30D158;  --green-fill: #30D158;  --green-tint: rgba(48, 209, 88, .18);
    --orange: #FF9F0A; --orange-fill: #FF9F0A; --orange-tint: rgba(255, 159, 10, .18);
    --critical: #FF8E95;
    --critical-tint: rgba(255, 110, 120, .16);
    --negative: #FF8E95;
    --neutral: #D1D1D6; --neutral-tint: rgba(120, 120, 128, .28);
    --alert: #FF9F0A; --alert-fill: #FF9F0A; --alert-tint: rgba(255, 159, 10, .18);
    --danger: #FF8E95; --danger-tint: rgba(255, 110, 120, .16);
    --info: #D1D1D6; --info-tint: rgba(120, 120, 128, .28);
    --shadow-1: 0 0 0 1px rgba(255, 255, 255, .04);
    --shadow-2: 0 8px 28px rgba(0, 0, 0, .55), 0 0 0 1px rgba(255, 255, 255, .06);
    --shadow-3: 0 24px 70px rgba(0, 0, 0, .7), 0 0 0 1px rgba(255, 255, 255, .08);
  }
}
@media screen and (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .page-connexion {
    --cx-fond: linear-gradient(158deg, #9A161B 0%, #6A0D12 40%, #34060A 76%, #160204 100%);
    --cx-texte-2: rgba(255, 255, 255, .84);
    --cx-trait: rgba(255, 255, 255, .22);
    /* jetons sombres figés (tokens.css v=2) */
    --accent: #FF5A5F;
    --accent-fill: #D92D33;
    --accent-fill-hover: #E3393F;
    --accent-fill-active: #C72226;
    --accent-tint: rgba(255, 90, 95, .16);
    --accent-tint-hover: rgba(255, 90, 95, .24);
    --accent-ring: rgba(255, 90, 95, .45);
    --label: #F5F5F7;
    --label-2: #98989F;
    --label-3: #6E6E73;
    --label-4: #48484A;
    --bg: #000000;
    --bg-elevated: #1C1C1E;
    --bg-inset: #2C2C2E;
    --bg-hover: rgba(120, 120, 128, .16);
    --bg-pressed: rgba(120, 120, 128, .28);
    --bg-chrome: rgba(22, 22, 24, .78);
    --bg-chrome-solid: #161618;
    --bg-tooltip: #3A3A3C;
    --on-tooltip: #F5F5F7;
    --scrim: rgba(0, 0, 0, .60);
    --fill-1: rgba(120, 120, 128, .36);
    --fill-2: rgba(120, 120, 128, .32);
    --fill-3: rgba(120, 120, 128, .24);
    --fill-4: rgba(120, 120, 128, .18);
    --seg-track: rgba(118, 118, 128, .24);
    --seg-thumb: #636366;
    --seg-thumb-shadow: 0 3px 8px rgba(0, 0, 0, .3);
    --separator: rgba(84, 84, 88, .65);
    --separator-soft: rgba(84, 84, 88, .40);
    --separator-opaque: #38383A;
    --field-border: rgba(84, 84, 88, .55);
    --green: #30D158;  --green-fill: #30D158;  --green-tint: rgba(48, 209, 88, .18);
    --orange: #FF9F0A; --orange-fill: #FF9F0A; --orange-tint: rgba(255, 159, 10, .18);
    --critical: #FF8E95;
    --critical-tint: rgba(255, 110, 120, .16);
    --negative: #FF8E95;
    --neutral: #D1D1D6; --neutral-tint: rgba(120, 120, 128, .28);
    --alert: #FF9F0A; --alert-fill: #FF9F0A; --alert-tint: rgba(255, 159, 10, .18);
    --danger: #FF8E95; --danger-tint: rgba(255, 110, 120, .16);
    --info: #D1D1D6; --info-tint: rgba(120, 120, 128, .28);
    --shadow-1: 0 0 0 1px rgba(255, 255, 255, .04);
    --shadow-2: 0 8px 28px rgba(0, 0, 0, .55), 0 0 0 1px rgba(255, 255, 255, .06);
    --shadow-3: 0 24px 70px rgba(0, 0, 0, .7), 0 0 0 1px rgba(255, 255, 255, .08);
  }
}
@media screen and (prefers-contrast: more) {
  :root[data-theme="dark"] .page-connexion { --label-2: #C7C7CC; --separator: rgba(120, 120, 128, .8); --separator-soft: rgba(120, 120, 128, .5); --field-border: rgba(120, 120, 128, .8); }
}
@media screen and (prefers-contrast: more) and (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .page-connexion { --label-2: #C7C7CC; --separator: rgba(120, 120, 128, .8); --separator-soft: rgba(120, 120, 128, .5); --field-border: rgba(120, 120, 128, .8); }
}

.cx { display: grid; grid-template-columns: minmax(0, 45fr) minmax(0, 55fr); min-height: 100vh; min-height: 100dvh; }

/* ---------- Panneau de marque ---------- */
.cx-marque {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; flex-direction: column; justify-content: flex-start; gap: var(--space-8);
  padding: var(--space-10) var(--space-12);
  background: var(--cx-fond); color: var(--cx-texte);
}
.cx-courbes { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; }
.cx-grille path { fill: none; stroke: var(--cx-trait-fin); stroke-width: 1; }
.cx-c path { fill: none; stroke: #FFFFFF; stroke-width: 1.5; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.cx-c.c1 path { opacity: .10; }
.cx-c.c2 path { opacity: .16; }
.cx-c.c3 path { opacity: .09; }
.cx-c.c4 path { opacity: .06; }
.cx-vedette path { vector-effect: none; stroke: url(#cx-fondu); stroke-width: 2.25; opacity: .55; stroke-dasharray: 1; stroke-dashoffset: 0; }
.cx-vedette circle { fill: #FFFFFF; opacity: .75; }
.cx-halo { transform-box: fill-box; transform-origin: center; }

/* dérive très lente : chaque courbe glisse de quelques dizaines de pixels en une minute environ */
@keyframes cx-derive { from { transform: translate(-36px, 8px); } to { transform: translate(36px, -8px); } }
@keyframes cx-derive-inv { from { transform: translate(30px, -6px); } to { transform: translate(-30px, 6px); } }
@keyframes cx-respire { from { transform: translate(0, 0) scale(1); } to { transform: translate(-40px, 30px) scale(1.12); } }
@keyframes cx-trace { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes cx-apparait { from { opacity: 0; } to { opacity: .75; } }
.cx-c.c1 { animation: cx-derive 64s var(--ease-in-out) -12s infinite alternate; }
.cx-c.c2 { animation: cx-derive-inv 52s var(--ease-in-out) -30s infinite alternate; }
.cx-c.c3 { animation: cx-derive 76s var(--ease-in-out) -5s infinite alternate; }
.cx-c.c4 { animation: cx-derive-inv 88s var(--ease-in-out) -44s infinite alternate; }
.cx-vedette { animation: cx-derive 70s var(--ease-in-out) -20s infinite alternate; }
.cx-vedette path { animation: cx-trace 2.4s var(--ease-out) .2s both; }
.cx-vedette circle { animation: cx-apparait .6s var(--ease-out) 2.4s both; }
.cx-halo.h1 { animation: cx-respire 90s var(--ease-in-out) infinite alternate; }
.cx-halo.h2 { animation: cx-respire 110s var(--ease-in-out) -40s infinite alternate-reverse; }
@media (prefers-reduced-motion: reduce) {
  .cx-c, .cx-vedette, .cx-vedette path, .cx-vedette circle, .cx-halo { animation: none !important; }
}

.cx-marque-haut { display: flex; }
.cx-plaque { display: inline-flex; background: var(--logo-plate); border-radius: var(--radius-lg); overflow: hidden; box-shadow: 0 8px 24px rgba(0, 0, 0, .18); }
.cx-plaque img { display: block; height: 104px; width: auto; max-width: none; margin: -27px -16px; }

.cx-marque-texte { display: flex; flex-direction: column; gap: var(--space-4); max-width: 460px; margin-top: clamp(var(--space-8), 11vh, 120px); }
.cx-etat { margin-top: auto !important; }
.cx-nom { font-family: var(--font-display); font-size: var(--fs-large); line-height: var(--lh-large); font-weight: var(--fw-bold); letter-spacing: var(--tr-large); text-wrap: balance; }
.cx-nom-2 { display: block; font-weight: var(--fw-semibold); }
/* le point médian reste lu par les lecteurs d'écran (« Rapports SI · Contrôle de gestion ») sans s'afficher */
.cx-point { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.cx-accroche { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--cx-texte-2); text-wrap: pretty; max-width: 400px; }

.cx-etat { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2); }
.cx-pastille { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 32px; padding: var(--space-1-5) var(--space-3-5); border-radius: var(--radius-full);
  background: var(--cx-pastille); box-shadow: inset 0 0 0 1px var(--cx-pastille-bord); font-size: var(--fs-footnote); line-height: var(--lh-footnote); font-weight: var(--fw-medium); color: var(--cx-texte); font-variant-numeric: tabular-nums; }
.cx-pastille svg { flex: none; opacity: .9; }
.cx-point-etat { flex: none; width: 8px; height: 8px; border-radius: 50%; background: rgba(255, 255, 255, .7); }
.cx-pastille[data-etat="ok"] .cx-point-etat { background: var(--cx-ok); box-shadow: 0 0 0 3px rgba(74, 222, 128, .25); }
.cx-pastille[data-etat="ancien"] .cx-point-etat { background: var(--cx-ancien); box-shadow: 0 0 0 3px rgba(255, 214, 10, .25); }

/* ---------- Panneau de connexion ---------- */
.cx-panneau { display: flex; align-items: center; justify-content: center; padding: var(--space-12) var(--space-8); background: var(--bg); min-width: 0; }
.cx-carte {
  width: 100%; max-width: 432px; display: flex; flex-direction: column;
  padding: var(--space-10) var(--space-10) var(--space-6);
  background: var(--bg-elevated); border-radius: var(--radius-sheet); box-shadow: var(--shadow-2);
}
.cx-logo { align-self: flex-start; display: inline-flex; background: var(--logo-plate); border-radius: var(--radius-md); overflow: hidden; margin-bottom: var(--space-6); }
.cx-logo img { display: block; height: 76px; width: auto; max-width: none; margin: -20px -12px; }
.cx-salut { font-size: var(--fs-subhead); line-height: var(--lh-subhead); font-weight: var(--fw-semibold); color: var(--label-2); }
.cx-carte h1 { margin-top: var(--space-0-5); font-family: var(--font-display); font-size: var(--fs-title1); line-height: var(--lh-title1); font-weight: var(--fw-bold); letter-spacing: var(--tr-large); text-wrap: balance; }
.cx-intro { margin-top: var(--space-2); font-size: var(--fs-subhead); line-height: var(--lh-subhead); color: var(--label-2); text-wrap: pretty; }
.cx-carte > .cx-intro { margin-bottom: var(--space-6); }

/* messages (pas d'alert()) : bannières intégrées, icône + texte, couleur de gravité distincte de l'accent */
.cx-messages { display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-5); }
.cx-msg { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-3) var(--space-3-5); border-radius: var(--radius-lg);
  font-size: var(--fs-footnote); line-height: var(--lh-footnote); color: var(--label); }
.cx-msg p + p { margin-top: var(--space-1); }
.cx-msg b { font-weight: var(--fw-semibold); }
.cx-msg .mono { overflow-wrap: anywhere; }
.cx-msg-err { background: var(--critical-tint); }
.cx-msg-err .cx-ico { color: var(--critical); }
.cx-msg-warn { background: var(--orange-tint); }
.cx-msg-warn .cx-ico { color: var(--orange); }
.cx-msg-info { background: var(--fill-4); }
.cx-msg-info .cx-ico { color: var(--label-2); }
.cx-form .cx-msg { margin-bottom: var(--space-1); }

.cx-ico { flex: none; width: 18px; height: 18px; margin-top: -1px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.cx-chevron { flex: none; width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

/* bouton principal : capsule pleine largeur, 50 px (action unique de la page) */
.cx-btn { width: 100%; height: 50px; min-height: 50px; font-size: var(--fs-body); gap: var(--space-3); transition: background-color var(--dur-fast) var(--ease-out), transform var(--dur-instant) var(--ease-out); }
.cx-btn[aria-busy="true"] { pointer-events: none; opacity: .75; }
.cx-btn[aria-busy="true"]::after { content: ""; width: 16px; height: 16px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .35); border-top-color: #FFFFFF; animation: cx-tourne .8s linear infinite; }
@keyframes cx-tourne { to { transform: rotate(1turn); } }
.cx-ms { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: var(--radius-xs); background: #FFFFFF; }
.cx-aide { margin-top: var(--space-3); font-size: var(--fs-footnote); line-height: var(--lh-footnote); color: var(--label-2); text-wrap: pretty; }

/* mode développement : bandeau discret */
.cx-dev { display: flex; gap: var(--space-2-5); align-items: flex-start; padding: var(--space-2-5) var(--space-3-5); border-radius: var(--radius-lg);
  background: var(--orange-tint); font-size: var(--fs-footnote); line-height: var(--lh-footnote); color: var(--label); }
.cx-dev .cx-ico { width: 16px; height: 16px; margin-top: 1px; color: var(--orange); }
.cx-dev b { font-weight: var(--fw-semibold); }

/* liste groupée des comptes (HIG) : avatars en initiales, chevrons, séparateurs en retrait */
.cx-comptes { margin-top: var(--space-5); }
.cx-entete-liste { padding: 0 var(--space-4) var(--space-1-5); font-size: var(--fs-footnote); line-height: var(--lh-footnote); font-weight: var(--fw-regular); text-transform: uppercase; letter-spacing: .02em; color: var(--label-2); }
.cx-liste { list-style: none; margin: 0; padding: 0; max-height: min(46vh, 372px); overflow-y: auto; overscroll-behavior: contain;
  background: var(--bg-inset); border-radius: var(--radius-lg); scrollbar-width: thin; }
.cx-liste li { position: relative; }
.cx-liste li + li::before { content: ""; position: absolute; top: 0; inset-inline: 64px 0; border-top: 1px solid var(--separator-soft); }
.cx-liste button { width: 100%; display: flex; align-items: center; gap: var(--space-3); min-height: 60px; padding: var(--space-2) var(--space-3) var(--space-2) var(--space-4);
  border: 0; background: transparent; color: var(--label); text-align: start; cursor: pointer; border-radius: 0; transition: background-color var(--dur-fast) var(--ease-out); }
.cx-liste li:first-child button { border-start-start-radius: var(--radius-lg); border-start-end-radius: var(--radius-lg); }
.cx-liste li:last-child button { border-end-start-radius: var(--radius-lg); border-end-end-radius: var(--radius-lg); }
.cx-liste button:hover { background: var(--bg-hover); }
.cx-liste button:active { background: var(--bg-pressed); }
.cx-liste button:focus-visible { box-shadow: inset 0 0 0 3px var(--accent-ring); border-radius: var(--radius-lg); }
.cx-avatar { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%;
  background: var(--accent-tint); color: var(--accent); font-size: var(--fs-caption1); font-weight: var(--fw-bold); letter-spacing: .02em; }
.cx-ligne-texte { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.cx-ligne-texte b { font-size: var(--fs-subhead); line-height: var(--lh-subhead); font-weight: var(--fw-semibold); overflow-wrap: anywhere; }
.cx-ligne-texte span { font-size: var(--fs-footnote); line-height: var(--lh-footnote); color: var(--label-2); overflow-wrap: break-word; }
.cx-liste .cx-chevron { color: var(--label-3); width: 14px; height: 14px; }

/* formulaire administrateur */
.cx-form { display: flex; flex-direction: column; gap: var(--space-4); }
.cx-form .input { font-size: var(--fs-body); }
.cx-mdp { position: relative; }
.cx-mdp .input { padding-inline-end: 52px; }
.cx-oeil { position: absolute; top: 0; inset-inline-end: 0; width: var(--touch); height: var(--touch); display: inline-flex; align-items: center; justify-content: center;
  border: 0; background: transparent; color: var(--label-2); cursor: pointer; border-radius: var(--radius-field); transition: color var(--dur-fast) var(--ease-out); }
.cx-oeil:hover { color: var(--label); }
.cx-oeil:focus-visible { box-shadow: inset 0 0 0 3px var(--accent-ring); }
.cx-oeil .cx-ico { width: 20px; height: 20px; margin: 0; }
.cx-maj { min-height: 0; font-size: var(--fs-footnote); line-height: var(--lh-footnote); color: var(--orange); font-weight: var(--fw-medium); }
.cx-maj:empty { display: none; }
.cx-form .cx-btn { margin-top: var(--space-2); }

/* liens discrets (« Administrateur local › », « ‹ Retour ») : cible de 44 px */
.cx-lien { display: inline-flex; align-items: center; gap: var(--space-0-5); min-height: var(--touch); padding: 0 var(--space-1); color: var(--accent); font-size: var(--fs-subhead); font-weight: var(--fw-medium); border-radius: var(--radius-sm); white-space: nowrap; }
.cx-lien:hover { text-decoration: underline; text-underline-offset: 3px; }
.cx-lien .cx-chevron { width: 14px; height: 14px; }
.cx-retour { align-self: center; margin-top: calc(var(--space-2) * -1); }

.cx-pied { display: flex; flex-direction: column; align-items: center; gap: var(--space-1);
  margin-top: var(--space-5); padding-top: var(--space-2); border-top: 1px solid var(--separator-soft); }
.cx-securite { display: block; max-width: 340px; min-width: 0; text-align: center; text-wrap: balance;
  font-size: var(--fs-caption1); line-height: var(--lh-caption1); color: var(--label-2); }
.cx-securite .cx-ico { display: inline-block; width: 13px; height: 13px; margin: 0 var(--space-1) 0 0; vertical-align: -2px; }
.cx-securite .mono { font-size: 1em; white-space: nowrap; }
.cx-pied .cx-lien + .cx-securite, .cx-pied .cx-securite:first-child { margin-top: var(--space-1); }
.cx-pied .cx-securite:first-child { margin-top: var(--space-3); }
/* mention d'information CNDP (C16) : texte du responsable du traitement, affiché seulement s'il est renseigné */
.cx-mention { max-width: 340px; min-width: 0; margin-top: var(--space-3); padding-top: var(--space-2);
  border-top: 1px solid var(--separator-soft); text-align: left;
  font-size: var(--fs-caption1); line-height: var(--lh-caption1); color: var(--label-2); }
.cx-mention-titre { margin: 0 0 var(--space-1); font-size: inherit; line-height: inherit; font-weight: 600; color: var(--label-2); }
.cx-mention p { margin: 0; text-wrap: pretty; }
.cx-mention p + p { margin-top: var(--space-1); }
/* sélecteur d'apparence (Clair / Sombre / Auto) : discret, en bas de la carte */
.cx-pied .theme-choix { justify-content: center; margin-top: var(--space-3); }

/* ---------- Écrans moyens ---------- */
@media (max-width: 1100px) {
  .cx-marque { padding: var(--space-8); }
  .cx-nom { font-size: var(--fs-title1); line-height: var(--lh-title1); }
  .cx-panneau { padding: var(--space-8) var(--space-5); }
  .cx-carte { padding: var(--space-8) var(--space-8) var(--space-5); }
}

/* ---------- Mobile : le panneau de marque devient un bandeau compact ---------- */
@media (max-width: 760px) {
  .cx { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; }
  .cx-marque { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "logo nom" "etat etat"; align-items: center; column-gap: var(--space-3); row-gap: var(--space-3);
    padding: calc(var(--space-5) + env(safe-area-inset-top, 0px)) var(--space-5) calc(var(--space-5) + var(--space-5)); max-height: 220px; }
  .cx-marque-haut { grid-area: logo; }
  .cx-plaque { border-radius: var(--radius-md); box-shadow: 0 4px 12px rgba(0, 0, 0, .18); }
  .cx-plaque img { height: 64px; margin: -17px -10px; }
  .cx-marque-texte { grid-area: nom; gap: 0; margin-top: 0; }
  .cx-etat { margin-top: 0 !important; }
  .cx-nom { font-size: var(--fs-headline); line-height: var(--lh-headline); letter-spacing: var(--tr-text); }
  .cx-point { display: none; }
  .cx-nom-2 { display: block; font-size: var(--fs-footnote); line-height: var(--lh-footnote); font-weight: var(--fw-medium); color: var(--cx-texte-2); }
  .cx-accroche { display: none; }
  .cx-etat { grid-area: etat; gap: var(--space-1-5); }
  .cx-pastille { min-height: 28px; padding: var(--space-1) var(--space-2-5); font-size: var(--fs-caption1); line-height: var(--lh-caption1); }
  .cx-panneau { align-items: flex-start; padding: 0 var(--space-3) calc(var(--space-6) + env(safe-area-inset-bottom, 0px)); background: var(--bg); }
  /* la carte remonte sur le bandeau, à la manière d'une feuille */
  .cx-carte { position: relative; max-width: none; margin-top: calc(var(--space-5) * -1); padding: var(--space-6) var(--space-5) var(--space-4); border-radius: var(--radius-sheet); }
  .cx-logo { display: none; }
  .cx-carte h1 { font-size: var(--fs-title2); line-height: var(--lh-title2); }
  .cx-carte > .cx-intro { margin-bottom: var(--space-5); }
  .cx-liste { max-height: none; }
  .cx-pastille-nb { display: none; }
}

/* ---------- Impression : pas de dégradé ---------- */
@media print {
  .cx { display: block; }
  .cx-marque { background: none; color: #000; }
  .cx-courbes { display: none; }
}