/* shared/pages/index.css — feuille de index.html, sortie de son bloc \3c style> le 17/10/2026 (lot 8 du dossier 1 : CSP sans
   style en ligne). Chargée par une balise <link> à la place exacte de l’ancien bloc : même ordre dans la cascade. */
/* ============================================================================
 * CSS spécifique à la page Connexion (layout 2 colonnes, pas de sidebar)
 * ============================================================================ */
/* Hauteur RELATIVE (100%) au lieu de 100vh : 100vh = le plus grand viewport iOS (plus
   haut que la zone visible) → scroll parasite. height:100% se cale sur le conteneur réel
   → pas de scroll, identique sur web ET natif (pas de hack in-app). margin:0 pour éviter
   qu'une marge body fasse déborder le 100%. */
html, body { height: 100%; }
body { margin: 0; }
.shell { display: grid; grid-template-columns: 1fr 1fr; min-height: 100%; }
/* Login mobile/app : on centre TOUT le contenu dans la zone visible via le <body>.
   Le body fait déjà 100% (hauteur réelle du conteneur = stable, donc PAS de saut, ≠
   100dvh qui bouge). On le passe en flex + justify-content:center → bloc centré
   automatiquement sur tout écran (en %, pas de px). .shell sans hauteur forcée
   (min-height:0) → pas de scroll. En media-query → rendu immédiat. Desktop (>900px) intact. */
@media (max-width: 900px) {
  body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* Réserve la barre de statut (encoche) + la barre home AVANT de centrer → le
       centrage se fait dans la zone RÉELLEMENT visible, marges équilibrées. env() =
       valeurs iOS automatiques par appareil → marche sur tous les écrans, sans px. */
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
    box-sizing: border-box;
  }
  .shell { min-height: 0; }
}

/* ── Mode EMBARQUÉ (iframe du popup d'inscription façade) ─────────────────────
   Formulaire SEUL, fond neutre, marges resserrées, carte sans bordure/ombre
   (le popup fait déjà office de conteneur) → l'inscription se fond dans le popup.
   Scopé à .gsm-embed (posé uniquement en iframe) → page normale INCHANGÉE. */
.gsm-embed .panel { display: none !important; }
.gsm-embed .shell { grid-template-columns: 1fr !important; min-height: 100%; }
.gsm-embed, .gsm-embed body { background: var(--palette-surface-cabinet-conversation) !important; }
/* TOP-ALIGN en mode embarqué : le centrage vertical (mobile media query
   `body{justify-content:center}`) + le padding de .form-wrap poussaient le
   formulaire SOUS la zone visible de l'iframe → contenu invisible. On force
   l'alignement en haut avec un padding minimal. */
.gsm-embed body { justify-content: flex-start !important; display: block !important; }
.gsm-embed .form-side { background: var(--palette-surface-cabinet-conversation) !important; padding: var(--palette-espacement-cabinet-conversation-10) var(--palette-espacement-composants-3) !important; justify-content: flex-start; }
.gsm-embed .form-wrap { flex: none !important; padding: var(--palette-espacement-cabinet-conversation-3) 0 var(--palette-espacement-cabinet-conversation-10) !important; }
.gsm-embed .auth-card { border: 0 !important; box-shadow: none !important; padding: var(--palette-espacement-cabinet-conversation-11) 0 0 !important; max-width: 100% !important; }

/* Lien discret « Espace de démonstration » (coin bas-droite) : accès INVITÉ au
   catalogue public des psys (façade « navigation publique »), sans créer de
   compte. Caché en mode embarqué (.gsm-embed) et en white-label (danone) ; un
   petit script le retire si une session existe déjà. */
.demo-link { position: fixed; right: 16px; bottom: 14px; z-index: 60; display: inline-flex;
  align-items: center; gap: var(--palette-espacement-components); padding: var(--palette-espacement-cabinet-conversation-4) var(--palette-espacement-composants-7); border-radius: var(--palette-rayon-components-2);
  background: var(--palette-surface-index); backdrop-filter: blur(6px);
  border: 1px solid var(--palette-bordure-action-index); box-shadow: 0 6px 22px -10px var(--palette-ombre-composants-3);
  color: var(--palette-texte-action-index); font: 600 .82rem/1 "Kumbh Sans", system-ui, sans-serif; text-decoration: none;
  transition: transform .14s ease, box-shadow .14s ease; }
.demo-link:hover { transform: translateY(-1px); box-shadow: 0 12px 28px -10px var(--palette-ombre-composants-10); }
.demo-link .demo-dot { width: 7px; height: 7px; border-radius: var(--palette-rayon-composants-2); background: var(--palette-fond-succes-index);
  box-shadow: 0 0 0 3px var(--palette-ombre-index); flex: none; }
.demo-link .demo-arw { transition: transform .14s ease; }
.demo-link:hover .demo-arw { transform: translateX(2px); }
.gsm-embed .demo-link { display: none !important; }
html[data-brand="danone"] .demo-link { display: none !important; }
/* App mobile (31/08, demande Alexandre) : pas d'espace de démonstration dans
   l'app — le lien est une porte d'entrée WEB pour les visiteurs sans compte. */
html.in-app .demo-link { display: none !important; }
@media (max-width: 640px) { .demo-link { right: 12px; bottom: 12px; padding: var(--palette-espacement-cabinet-conversation-11) var(--palette-espacement-composants-6); font-size: var(--palette-typographie-composants-8); } }

/* Panneau gauche éditorial */
.panel {
  position: relative;
  background:
    radial-gradient(120% 80% at 80% 10%, var(--palette-fond-action-index), transparent 50%),
    radial-gradient(90% 60% at 0% 100%, var(--palette-fond-danger-index), transparent 60%),
    linear-gradient(180deg, var(--palette-surface-action-index) 0%, var(--palette-surface-action-composants-2) 100%);
  padding: var(--palette-espacement-components-3) var(--palette-espacement-demarrer-suivi);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-right: 1px solid var(--line);
}
.panel::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--palette-fond-action-index-2) 1px, transparent 1px),
    linear-gradient(90deg, var(--palette-fond-action-index-2) 1px, transparent 1px);
  background-size: 32px 32px;
  mask-image: radial-gradient(80% 80% at 30% 60%, var(--palette-masque-1) 0%, transparent 80%);
  pointer-events: none;
}
.panel-inner { position: relative; flex: 1; display: flex; flex-direction: column; max-width: 520px; }
.brand-row { display: inline-flex; align-items: center; gap: var(--palette-espacement-components-2); }
.brand-mark { width: 32px; height: 32px; border-radius: var(--palette-rayon-cabinet-conversation-4); background: radial-gradient(120% 120% at 30% 20%, var(--adaptation-fond-action-accent, var(--accent)) 0%, var(--adaptation-fond-inverse-accent-ink, var(--accent-ink)) 100%); position: relative; flex: 0 0 32px; }
.brand-mark::after { content: ""; position: absolute; inset: 8px; border-radius: var(--palette-rayon-composants-2); background: radial-gradient(circle at 35% 35%, var(--palette-surface-index-2), transparent 55%); }
.brand-name { font-weight: 600; letter-spacing: var(--palette-typographie-layout-4); font-size: var(--palette-typographie-components-3); color: var(--ink); }
.brand-name span { color: var(--muted); font-weight: 400; }

.panel-headline { margin-top: auto; max-width: 480px; }
.eyebrow { font-size: var(--palette-typographie-composants-3); text-transform: uppercase; letter-spacing: var(--palette-typographie-changer-psychologue); color: var(--accent); font-weight: 700; margin-bottom: var(--palette-espacement-cabinet-conversation-8); display: inline-flex; align-items: center; gap: var(--palette-espacement-cabinet-conversation-11); }
.eyebrow::before { content: ""; width: 18px; height: 1.5px; background: var(--adaptation-fond-action-accent, var(--accent)); display: inline-block; border-radius: var(--palette-rayon-consultation); }
.panel-headline h2 { font-size: var(--palette-typographie-demarrer-3); line-height: 1.12; letter-spacing: var(--palette-typographie-demarrer); margin: 0 0 var(--palette-espacement-cabinet-conversation-8); font-weight: 700; color: var(--ink); }
.panel-headline h2 em { font-style: normal; color: var(--accent); font-weight: 700; }
.panel-headline p { font-size: var(--palette-typographie-composants-10); line-height: 1.6; color: var(--ink-2); margin: 0 0 var(--palette-espacement-cabinet); max-width: 440px; }

.points { display: flex; flex-direction: column; gap: var(--palette-espacement-cabinet-conversation-5); margin-bottom: var(--palette-espacement-invitation-4); }
.point { display: flex; align-items: flex-start; gap: var(--palette-espacement-cabinet-conversation-7); font-size: var(--palette-typographie-components); color: var(--ink-2); font-weight: 500; }
.point .pi { width: 24px; height: 24px; border-radius: var(--palette-rayon-composants-7); background: var(--surface); border: 1px solid var(--line-strong); display: inline-flex; align-items: center; justify-content: center; flex: 0 0 24px; color: var(--accent); box-shadow: 0 1px 0 var(--palette-ombre-consultation-2); }

/* Bloc avis (quote-card) retiré le 15/06 (demande user). panel-foot reprend
   margin-top:auto pour rester ancré en bas du panneau. */
.panel-foot { margin-top: auto; display: flex; align-items: center; gap: var(--palette-espacement-cabinet-conversation-8); font-size: var(--palette-typographie-components-4); color: var(--muted); font-weight: 500; }
.panel-foot .badge { display: inline-flex; align-items: center; gap: var(--palette-espacement-cabinet-conversation-3); padding: var(--palette-espacement-cabinet-conversation-9) var(--palette-espacement-cabinet-conversation-4); border-radius: var(--palette-rayon-cabinet-2); background: var(--surface); border: 1px solid var(--line); color: var(--ink-2); font-weight: 600; }

/* Panneau droit (formulaire) */
.form-side { display: flex; flex-direction: column; padding: var(--palette-espacement-cabinet) var(--palette-espacement-components-3); background: var(--bg); min-width: 0; }
.top-bar { display: flex; justify-content: flex-end; align-items: center; gap: var(--palette-espacement-cabinet-conversation-5); font-size: var(--palette-typographie-cabinet-conversation-3); color: var(--muted); }
.top-bar .switch { color: var(--ink-2); }
.top-bar a.link { color: var(--accent); font-weight: 600; }
.top-bar a.link:hover { color: var(--accent-hover); text-decoration: underline; }

/* Carte ANCRÉE PAR LE HAUT (15/06) : hauteur naturelle par vue (pas de blanc
   en bas sur la connexion), et la carte grandit vers le BAS quand on passe à
   l'inscription → onglets + champs ne bougent plus (plus de « saut »).
   align-items:flex-start = haut ; le padding-top en clamp garde un placement
   agréable quelle que soit la hauteur d'écran. */
.form-wrap { flex: 1; display: flex; align-items: flex-start; justify-content: center; padding: clamp(var(--palette-espacement-cabinet-conversation), 7vh, var(--palette-espacement-changer-psychologue)) 0 var(--palette-espacement-cabinet); }
.auth-card { width: 100%; max-width: 440px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--palette-rayon-composants); padding: var(--palette-espacement-invitation-4); box-shadow: var(--shadow-card); }
.auth-card h1 { font-size: var(--palette-typographie-invitation-3); letter-spacing: var(--palette-typographie-layout-2); margin: 0 0 var(--palette-espacement-cabinet-conversation-11); font-weight: 700; color: var(--ink); }
.auth-card .sub { color: var(--muted); font-size: var(--palette-typographie-cabinet-conversation-2); margin: 0 0 var(--palette-espacement-composants-2); }

/* Tabs Connexion / Inscription */
.seg { display: inline-flex; gap: var(--palette-espacement-cabinet-2); padding: var(--palette-espacement-cabinet-2); background: var(--surface-2); border-radius: var(--palette-rayon-cabinet-conversation-3); border: 1px solid var(--line); margin-bottom: var(--palette-espacement-cabinet-conversation); width: 100%; }
.seg button { flex: 1; padding: var(--palette-espacement-cabinet-conversation-11) var(--palette-espacement-cabinet-conversation-7); border-radius: var(--palette-rayon-cabinet-conversation-2); font-size: var(--palette-typographie-components); font-weight: 600; color: var(--muted); background: transparent; cursor: pointer; transition: all .15s; }
.seg button:hover { color: var(--ink-2); }
.seg button.on { background: var(--surface); color: var(--ink); box-shadow: 0 1px 2px var(--palette-ombre-index-2); }

/* Form fields */
.field-group { display: flex; flex-direction: column; gap: var(--palette-espacement-cabinet-conversation-3); margin-bottom: var(--palette-espacement-cabinet-conversation-5); }
.field-group label { font-size: var(--palette-typographie-components-2); font-weight: 600; color: var(--ink-2); }
.label-row { display: flex; justify-content: space-between; align-items: baseline; }
.label-row .forgot { font-size: var(--palette-typographie-cabinet-conversation-4); color: var(--accent); font-weight: 600; cursor: pointer; }
.label-row .forgot:hover { color: var(--accent-hover); text-decoration: underline; }
.in-wrap { position: relative; display: flex; align-items: center; }
.in-wrap .lead { position: absolute; left: 14px; color: var(--muted-2); display: inline-flex; pointer-events: none; }
/* Bouton œil : reset du style natif <button> (sinon Chrome iOS affiche une
   boîte blanche qui déborde) + centrage vertical robuste (16/06). */
.in-wrap .trail { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); color: var(--muted); padding: var(--palette-espacement-cabinet-conversation-3); border-radius: var(--palette-rayon-conversation); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; background: none; border: 0; -webkit-appearance: none; appearance: none; }
.in-wrap .trail:hover { color: var(--ink-2); background: var(--surface-2); }
input.txt { width: 100%; height: 44px; padding: 0 var(--palette-espacement-cabinet-conversation-5) 0 var(--palette-espacement-index); border: 1px solid var(--line-strong); border-radius: var(--palette-rayon-components); background: var(--surface); font-size: var(--palette-typographie-cabinet-conversation-2); color: var(--ink); outline: none; transition: border-color .15s, box-shadow .15s; }
input.txt::placeholder { color: var(--muted-2); }
input.txt:hover { border-color: var(--adaptation-bordure-muted-2, var(--muted-2)); }
input.txt:focus { border-color: var(--adaptation-bordure-action-accent, var(--accent)); box-shadow: 0 0 0 4px var(--accent-softer); }
input.txt.with-trail { padding-right: var(--palette-espacement-conversation-6); }
.row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--palette-espacement-cabinet-conversation-7); }

.pwd-meter { margin-top: var(--palette-espacement-cabinet-conversation-11); display: flex; flex-direction: column; gap: var(--palette-espacement-cabinet-conversation-3); }
.pwd-bars { display: grid; grid-template-columns: repeat(4,1fr); gap: var(--palette-espacement-cabinet-2); }
.pwd-bars span { height: 4px; border-radius: var(--palette-rayon-home); background: var(--line); }
.pwd-bars span.on-1 { background: var(--adaptation-fond-danger-danger, var(--danger)); }
.pwd-bars span.on-2 { background: var(--adaptation-fond-danger-warning, var(--warning)); }
.pwd-bars span.on-3 { background: var(--palette-fond-avertissement-index); }
.pwd-bars span.on-4 { background: var(--adaptation-fond-succes-success, var(--success)); }
.pwd-hint { font-size: var(--palette-typographie-components-4); color: var(--muted); display: flex; justify-content: space-between; gap: var(--palette-espacement-cabinet-conversation-11); }
.pwd-hint b { font-weight: 600; color: var(--ink-2); }

.check-row { display: flex; align-items: flex-start; gap: var(--palette-espacement-cabinet-conversation-6); margin: var(--palette-espacement-cabinet-conversation-5) 0; font-size: var(--palette-typographie-cabinet-conversation-3); color: var(--ink-2); }
.check-row input[type=checkbox] { appearance: none; width: 18px; height: 18px; border: 1.5px solid var(--line-strong); border-radius: var(--palette-rayon-conversation-2); background: var(--surface); cursor: pointer; flex: 0 0 18px; margin-top: var(--palette-espacement-conversation); position: relative; }
.check-row input:checked { background: var(--adaptation-fond-action-accent, var(--accent)); border-color: var(--adaptation-bordure-action-accent, var(--accent)); }
.check-row input:checked::after { content: ""; position: absolute; left: 4px; top: 1px; width: 6px; height: 11px; border: solid var(--palette-bordure-composants-8); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.check-row label { cursor: pointer; line-height: 1.45; }
.check-row a { color: var(--accent); font-weight: 600; }

.btn-block-auth { width: 100%; height: 46px; background: var(--adaptation-fond-action-accent, var(--accent)); color: var(--palette-texte-inverse-components); border: 0; border-radius: var(--palette-rayon-cabinet-conversation-3); font-size: var(--palette-typographie-composants-14); font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: var(--palette-espacement-cabinet-conversation-11); transition: background .15s, transform .05s; margin-top: var(--palette-espacement-cabinet-conversation-3); }
.btn-block-auth:hover { background: var(--adaptation-fond-action-accent-hover, var(--accent-hover)); }
.btn-block-auth:active { transform: translateY(1px); }
.btn-block-auth:disabled { opacity: 0.5; cursor: not-allowed; }

.legal { font-size: var(--palette-typographie-components-4); color: var(--muted); margin-top: var(--palette-espacement-composants-3); text-align: center; line-height: 1.5; }
.legal a { color: var(--ink-2); text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 2px; }

.back-link { display: inline-flex; align-items: center; gap: var(--palette-espacement-cabinet-conversation-3); font-size: var(--palette-typographie-cabinet-conversation-3); color: var(--muted); font-weight: 500; margin-bottom: var(--palette-espacement-cabinet-conversation-8); cursor: pointer; padding: var(--palette-espacement-cabinet-conversation-3) var(--palette-espacement-cabinet-conversation-6); border-radius: var(--palette-rayon-cabinet-2); margin-left: var(--palette-espacement-conversation-5); }
.back-link:hover { color: var(--ink-2); background: var(--surface-2); }

.sent-state { text-align: center; padding: var(--palette-espacement-cabinet-conversation-11) 0 var(--palette-espacement-cabinet-conversation-3); }
.sent-icon { width: 64px; height: 64px; border-radius: var(--palette-rayon-composants-2); background: var(--success-soft); color: var(--palette-texte-succes-components); display: inline-flex; align-items: center; justify-content: center; margin-bottom: var(--palette-espacement-cabinet-conversation-8); }
.mail-tag { display: inline-flex; align-items: center; gap: var(--palette-espacement-cabinet-conversation-11); padding: var(--palette-espacement-cabinet-conversation-11) var(--palette-espacement-cabinet-conversation-5); border-radius: var(--palette-rayon-cabinet-conversation-4); background: var(--surface-2); border: 1px solid var(--line); font-size: var(--palette-typographie-components); font-weight: 600; color: var(--ink-2); margin: var(--palette-espacement-cabinet-conversation-3) 0 var(--palette-espacement-composants-3); }
.resend { font-size: var(--palette-typographie-components-2); color: var(--muted); margin-top: var(--palette-espacement-cabinet-conversation-5); }
.resend a { color: var(--accent); font-weight: 600; cursor: pointer; }

.error-box { padding: var(--palette-espacement-cabinet-conversation-6) var(--palette-espacement-cabinet-conversation-7); background: var(--palette-surface-danger-index); color: var(--palette-texte-danger-changer-psychologue-2); border-radius: var(--palette-rayon-cabinet-conversation-4); font-size: var(--palette-typographie-cabinet-conversation-3); margin-bottom: var(--palette-espacement-cabinet-conversation-6); border: 1px solid var(--palette-bordure-changer-psychologue); display: none; }
.error-box.show { display: block; }

.form-foot { padding-top: var(--palette-espacement-cabinet-conversation-10); font-size: var(--palette-typographie-components-4); color: var(--muted); text-align: center; }
.form-foot a { color: var(--muted); }

.view { display: none; }
.view.active { display: block; }

/* Logo mobile-only : caché par défaut (le panel gauche desktop a déjà le logo),
   affiché en <900px quand le panel disparaît pour que la marque reste visible
   sur la page d'accueil/login mobile. Audit responsive 20/05/2026. */
.form-logo-mobile { display: none; }

@media (max-width: 900px) {
  .shell { grid-template-columns: 1fr; }
  .panel { display: none; }
  /* Affiche le logo en haut de la form-side mobile, centré */
  .form-logo-mobile {
    display: flex;
    justify-content: center;
    padding: var(--palette-espacement-cabinet-conversation-8) var(--palette-espacement-cabinet-conversation) var(--palette-espacement-cabinet-conversation-6);  /* compact mais pas tassé (ajusté 15/06) */
    text-decoration: none;
  }
  .form-logo-mobile img {
    height: 32px;
    width: auto;
    display: block;
  }
  /* La top-bar "Pas encore inscrit ? Créer un compte" est REDONDANTE en
     mobile : les tabs Connexion/Inscription dans la auth-card jouent
     déjà ce rôle. On la cache pour aérer l'écran. */
  .form-side .top-bar { display: none; }
  /* Le grand padding-top en clamp sert à ancrer la carte en desktop ; en
     mobile (logo au-dessus) il crée un vide → on le réduit pour remonter le
     formulaire. */
  /* 11/09/2026 (Alexandre, Android) : l'écran de connexion dépassait de ~15 px la
     hauteur visible (827 px de contenu pour 812 px) → page « légèrement scrollable ».
     On resserre les marges verticales du bloc (~65 px gagnés) : il tient sans défiler. */
  .form-wrap { padding-top: var(--palette-espacement-cabinet-conversation-3); padding-bottom: var(--palette-espacement-cabinet-conversation-3); }
  .auth-card { padding: var(--palette-espacement-cabinet-conversation) var(--palette-espacement-cabinet-conversation-10); }
  .auth-card .sub { margin-bottom: var(--palette-espacement-cabinet-conversation-8); }
  .seg { margin-bottom: var(--palette-espacement-cabinet-conversation-8); }
  /* Moins d'air autour du logo (déjà réduit ci-dessus) et de la form-side. */
  .form-side { padding-top: var(--palette-espacement-cabinet-conversation-5); padding-bottom: var(--palette-espacement-cabinet-conversation-11); }
}

/* Téléphone : Prénom / Nom passent en UNE colonne (1 champ par ligne, demande
   15/06). gap:0 → l'espacement vertical vient du margin-bottom des field-group,
   cohérent avec les autres champs. Tablettes (≤900px) gardent les 2 colonnes. */
@media (max-width: 600px) {
  .row-2 { grid-template-columns: 1fr; gap: 0; }
}

/* ============================================================================
 * WHITE-LABEL DANONE — activé par html[data-brand="danone"] (détection hostname).
 * On ne touche QUE l'accent + le panneau éditorial : tout le reste (typo, lignes,
 * surfaces) reste hérité du thème psyfr.
 *
 * CHARTE OFFICIELLE DANONE (fournie par l'user 22/06/2026) :
 *   #324BAA (bleu profond, primaire) · #11ACED (bleu ciel, secondaire)
 *   #5BB5E9 · #89C8F2 (bleus clairs) · #FFFFFF
 * ============================================================================ */
html[data-brand="danone"] {
  --accent: var(--palette-texte-action-index-2);
  --accent-ink: var(--palette-texte-principal-index);
  --accent-hover: var(--palette-texte-action-index-3);
  --accent-softer: var(--palette-fond-action-index-3);
}
html[data-brand="danone"] .panel {
  background:
    radial-gradient(120% 80% at 82% 8%, var(--palette-page-index-5), transparent 52%),
    radial-gradient(85% 55% at 5% 98%, var(--palette-page-index-4), transparent 60%),
    radial-gradient(70% 50% at 100% 100%, var(--palette-page-index-3), transparent 60%),
    linear-gradient(180deg, var(--palette-page-index-2) 0%, var(--palette-page-index) 100%);
}
html[data-brand="danone"] .panel::before {
  background-image:
    linear-gradient(var(--palette-page-index-6) 1px, transparent 1px),
    linear-gradient(90deg, var(--palette-page-index-6) 1px, transparent 1px);
}
html[data-brand="danone"] .brand-mark {
  background: radial-gradient(120% 120% at 30% 20%, var(--palette-page-index-8) 0%, var(--palette-page-index-7) 100%);
}
/* Pastille HDS/RGPD du panneau : teinte officielle claire */
html[data-brand="danone"] .panel-foot .badge { border-color: var(--palette-bordure-information-index); }
html[data-brand="danone"] .eyebrow { color: var(--palette-texte-information-index); }
html[data-brand="danone"] .eyebrow::before { background: var(--palette-page-index-8); }
/* Logo Danone : le vrai fichier (/shared/danone-logo.svg|png) ; fallback wordmark
   texte si le fichier n'est pas (encore) présent. */
.danone-logo-img { height: 38px; width: auto; display: block; }
.danone-logo { font: 700 26px "Kumbh Sans", system-ui, sans-serif; letter-spacing: var(--palette-typographie-layout-2); color: var(--palette-texte-action-index-2); line-height: 1; }
.danone-logo b { color: var(--palette-texte-information-index); font-weight: 700; }
.powered-by { color: var(--muted); font-size: var(--palette-typographie-components-4); }
.powered-by b { color: var(--ink-2); font-weight: 600; }

/* ============================================================================
 * INSCRIPTION MULTI-ÉTAPES (refonte 29/06/2026) — flux style Doctolib.
 * Toute la mécanique vit dans la vue [data-view="signup"] de index.html :
 * une suite d'« écrans » (.su-step) affichés un par un, pilotés par le JS de
 * la page (objet Signup). Progress bar segmentée en haut, bouton Retour entre
 * étapes, reprise d'état via les flags serveur. Mobile-first + safe-area iOS.
 * ============================================================================ */

/* En-tête du wizard : bouton Retour (gauche) + compteur « Étape n/N » (droite) */
.su-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--palette-espacement-cabinet-conversation-5); min-height: 30px; }
.su-back { display: inline-flex; align-items: center; gap: var(--palette-espacement-cabinet-conversation-3); font-size: var(--palette-typographie-cabinet-conversation-3); color: var(--muted); font-weight: 600; cursor: pointer; padding: var(--palette-espacement-cabinet-conversation-3) var(--palette-espacement-cabinet-conversation-6); border-radius: var(--palette-rayon-cabinet-2); margin-left: var(--palette-espacement-conversation-5); background: none; border: 0; -webkit-appearance: none; appearance: none; font-family: inherit; }
.su-back:hover { color: var(--ink-2); background: var(--surface-2); }
.su-back[hidden] { display: none; }
.su-count { font-size: var(--palette-typographie-cabinet-conversation-4); font-weight: 600; color: var(--muted); letter-spacing: var(--palette-typographie-components-5); }

/* Progress bar segmentée Doctolib : N segments, ceux franchis sont colorés.
   `role=progressbar` + aria-valuenow pour l'accessibilité (lecteurs d'écran). */
.su-progress { display: flex; gap: var(--palette-espacement-cabinet-conversation-9); margin-bottom: var(--palette-espacement-composants-2); }
.su-progress .seg { flex: 1; height: 5px; border-radius: var(--palette-rayon-home); background: var(--line); overflow: hidden; transition: background .3s ease; }
.su-progress .seg .fill { display: block; height: 100%; width: 0; border-radius: var(--palette-rayon-home); background: var(--adaptation-fond-action-accent, var(--accent)); transition: width .35s cubic-bezier(.4,0,.2,1); }
.su-progress .seg.done .fill { width: 100%; }
.su-progress .seg.current .fill { width: 100%; }

/* Écrans : un seul visible à la fois. Transition douce (fade + léger slide) —
   pas d'alert() ni de saut brutal, requis pour le shell Capacitor. */
.su-step { display: none; }
.su-step.active { display: block; animation: suIn .28s cubic-bezier(.4,0,.2,1); }
@keyframes suIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.su-step h1 { font-size: var(--palette-typographie-composants-15); letter-spacing: var(--palette-typographie-layout-2); margin: 0 0 var(--palette-espacement-components); font-weight: 700; color: var(--ink); }
.su-step .sub { color: var(--muted); font-size: var(--palette-typographie-cabinet-conversation-2); line-height: 1.5; margin: 0 0 var(--palette-espacement-composants-3); }
.su-step .sub b { color: var(--ink); font-weight: 600; }

/* Boutons radio Femme / Homme (étape sexe) : deux grandes cartes cliquables. */

/* Champ code 6 chiffres — calque de verify-email.html (cohérence UX). */
.su-code { width: 100%; height: 58px; text-align: center; font-size: var(--palette-typographie-invitation-3); font-weight: 700; letter-spacing: var(--palette-typographie-cabinet-conversation-4); border: 1.5px solid var(--line-strong); border-radius: var(--palette-rayon-composants-3); background: var(--surface); color: var(--ink); padding: 0 var(--palette-espacement-cabinet-conversation-5) 0 var(--palette-espacement-cabinet-conversation); box-sizing: border-box; outline: none; transition: border-color .15s, box-shadow .15s; font-family: var(--palette-police-monospace-index); }
.su-code:focus { border-color: var(--adaptation-bordure-action-accent, var(--accent)); box-shadow: 0 0 0 3px var(--accent-softer); }
.su-code.error { border-color: var(--adaptation-bordure-danger-danger, var(--danger)); }

/* Lien « renvoyer le code » + timer de cooldown */
.su-resend { display: flex; align-items: center; justify-content: space-between; gap: var(--palette-espacement-cabinet-conversation-7); margin-top: var(--palette-espacement-cabinet-conversation-2); flex-wrap: wrap; font-size: var(--palette-typographie-components-2); color: var(--muted); }
.su-resend a { color: var(--accent); font-weight: 600; cursor: pointer; }
.su-resend a[aria-disabled="true"] { color: var(--muted); cursor: not-allowed; pointer-events: none; }

/* Boîte d'info neutre (ex: SMS indisponible 503) — moins alarmante qu'une erreur. */
.su-info { display: none; padding: var(--palette-espacement-cabinet-conversation-6) var(--palette-espacement-cabinet-conversation-7); background: var(--warning-soft); color: var(--palette-texte-avertissement-index); border: 1px solid var(--palette-bordure-index); border-radius: var(--palette-rayon-cabinet-conversation-4); font-size: var(--palette-typographie-cabinet-conversation-3); margin-bottom: var(--palette-espacement-cabinet-conversation-7); line-height: 1.45; }
.su-info.show { display: block; }

/* Écran final « validé » + écran de blocage mineur : centrés, illustratifs. */
.su-final { text-align: center; padding: var(--palette-espacement-cabinet-conversation-11) 0 var(--palette-espacement-cabinet-2); }
.su-final .orb { width: 72px; height: 72px; border-radius: var(--palette-rayon-composants-2); display: inline-flex; align-items: center; justify-content: center; margin-bottom: var(--palette-espacement-cabinet-conversation-8); }
.su-final .orb.ok { background: var(--success-soft); color: var(--palette-texte-succes-components); }
.su-final h1 { font-size: var(--palette-typographie-conversation-5); margin-bottom: var(--palette-espacement-cabinet-conversation-11); }
.su-final .lead { color: var(--muted); font-size: var(--palette-typographie-cabinet-conversation-2); line-height: 1.55; margin: 0 0 var(--palette-espacement-cabinet-2); }

/* Ressources d'orientation (écran mineur) : liste de cartes contact. */

/* Spinner d'amorçage (reprise d'état au boot) : évite un flash de la 1re étape. */
.su-boot { display: flex; align-items: center; justify-content: center; padding: var(--palette-espacement-components-3) 0; color: var(--muted); }
.su-boot .sp { width: 22px; height: 22px; border: 2.5px solid var(--line); border-top-color: var(--adaptation-bordure-action-accent, var(--accent)); border-radius: var(--palette-rayon-composants-2); animation: suSpin .7s linear infinite; }
@keyframes suSpin { to { transform: rotate(360deg); } }