/* Endhan — Flux 1, couche desktop de l'entonnoir d'inscription.
 *
 * Transcription du vocabulaire `dk-*` de la maquette validee
 * (`design-references/F1Desktop.jsx` et `design-references/f1-desktop.css`),
 * qui couvre les six ecrans restes en colonne etroite : langue et pays (02),
 * proposition de valeur (03), creation de compte (06), verification du numero
 * (07), profil initial (08) et bienvenue (09).
 *
 * Trois regles de tenue :
 *
 * 1. **Couche opt-in, jamais retroactive.** Tout est enferme dans la requete
 *    media ; le rendu mobile est celui d'avant, au pixel. Un ecran non encore
 *    repris ne bouge pas.
 * 2. **Un seul DOM.** Le panneau de marque est masque sous le seuil plutot que
 *    rendu deux fois. Dupliquer le balisage dupliquerait aussi les formulaires
 *    — deux champs de meme nom sur une page, et c'est la derniere valeur qui
 *    part. C'est le motif deja retenu par `login.html` et `choice.html`.
 * 3. **Seuil a 768px**, comme ces deux ecrans. La maquette est composee dans
 *    un cadre de 1040px, mais aligner le nouveau seuil sur celui deja livre
 *    compte davantage : deux ruptures differentes dans un meme parcours se
 *    verraient en redimensionnant la fenetre.
 */

/* --------------------------------------------------------------------------
   Sous le seuil : rien de visible.

   Les blocs propres au desktop sont poses dans le balisage (un seul DOM) mais
   retires du flux. CETTE LISTE EST LA MOITIE QUI COMPTE : un element ajoute
   pour la maquette et oublie ici ne disparait pas — il s'affiche sur mobile,
   sans style, au milieu d'un ecran par ailleurs correct. C'est arrive avec
   l'etiquette « Compte cree » de l'ecran de bienvenue.

   Regle : tout selecteur `dk-*` defini plus bas et correspondant a un element
   qui n'existe pas dans la version mobile doit figurer ici.
   -------------------------------------------------------------------------- */

.dk-brand,
.dk-steps,
.dk-succ .tag,
.dk-val .tag,
.dk-val .ic,
.dk-hint { display: none; }

@media (min-width: 768px) {

  /* ------------------------------------------------------------------------
     Coquille : marque a gauche (44%), contenu a droite
     ------------------------------------------------------------------------ */

  .onb-shell .dk-split {
    display: grid;
    grid-template-columns: 44% 1fr;
    min-height: 100vh;
    min-height: 100dvh;
  }
  .onb-shell .dk-split.rev { grid-template-columns: 1fr 44%; }

  .onb-shell .dk-brand {
    background: #2D4A3E;
    color: #fff;
    padding: 40px 42px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    overflow: hidden;
  }

  /* Les deux arcs dores : decoratifs, donc `aria-hidden` dans le balisage. */
  .dk-brand .arc {
    position: absolute;
    border-radius: 999px;
    border: 1.5px solid rgba(201, 168, 76, 0.13);
    pointer-events: none;
  }
  .dk-brand .arc.a {
    width: 400px; height: 400px;
    top: -130px; right: -140px;
    border-style: dashed;
    border-color: rgba(201, 168, 76, 0.2);
  }
  .dk-brand .arc.b {
    width: 250px; height: 250px;
    bottom: -90px; left: -70px;
  }

  .dk-brand img.lg { width: 128px; height: auto; object-fit: contain; z-index: 2; }
  .dk-brand .bq { z-index: 2; }
  .dk-brand .bq h3 {
    margin: 0 0 12px;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 26px;
    line-height: 33px;
    letter-spacing: -0.025em;
    max-width: 340px;
    color: #fff;
  }
  .dk-brand .bq p {
    margin: 0;
    font-family: var(--font-body);
    font-size: 14px;
    line-height: 21px;
    color: rgba(242, 242, 242, 0.72);
    max-width: 330px;
  }
  .dk-brand .ft {
    z-index: 2;
    font-family: var(--font-body);
    font-size: 11.5px;
    color: rgba(242, 242, 242, 0.5);
  }
  .dk-brand .eb {
    z-index: 2;
    font-family: var(--font-display);
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(201, 168, 76, 0.9);
  }

  .onb-shell .dk-pane {
    background: var(--bg);
    color: var(--fg);
    padding: 36px 48px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 16px;
    min-width: 0;
  }
  .onb-shell .dk-pane.top { justify-content: flex-start; }

  .dk-h {
    margin: 0;
    font-family: var(--font-display);
    font-size: 25px;
    font-weight: 700;
    letter-spacing: -0.025em;
  }
  .dk-sub {
    margin: 7px 0 0;
    font-family: var(--font-body);
    font-size: 14.5px;
    line-height: 21px;
    color: var(--fg-muted);
    text-wrap: pretty;
  }
  .dk-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
  .dk-legal {
    font-family: var(--font-body);
    font-size: 11px;
    line-height: 16px;
    color: var(--fg-subtle);
  }
  .dk-legal a { color: inherit; }
  .dk-alt { font-family: var(--font-display); font-size: 13.5px; color: var(--fg-muted); }
  .dk-alt a { color: #2D4A3E; font-weight: 600; text-decoration: none; }
  [data-theme="dark"] .dk-alt a { color: #C9A84C; }

  /* ------------------------------------------------------------------------
     Progression, sur les trois etapes de creation de compte
     ------------------------------------------------------------------------ */

  .dk-steps { display: flex; align-items: center; gap: 6px; }
  .dk-steps .s { width: 26px; height: 3px; border-radius: 999px; background: rgba(30, 42, 38, 0.15); }
  [data-theme="dark"] .dk-steps .s { background: rgba(242, 242, 242, 0.12); }
  .dk-steps .s.on { background: #C9A84C; }
  .dk-steps .s.dn { background: #3E6B57; }
  .dk-steps .lb {
    font-family: var(--font-display);
    font-size: 12px;
    font-weight: 500;
    color: var(--fg-subtle);
    margin-left: 8px;
  }

  /* ------------------------------------------------------------------------
     03 — Proposition de valeur (pleine largeur, pas de panneau de marque)
     ------------------------------------------------------------------------ */

  .onb-shell .dk-full {
    min-height: 100vh;
    min-height: 100dvh;
    background: var(--bg);
    color: var(--fg);
    padding: 40px 56px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 22px;
  }
  /* Le nombre de colonnes vient du backend (`product_count`) et non d'un « 3 »
     ecrit en dur : les produits sont pilotes par des drapeaux, et au pilote
     seul Tontine est actif. Une grille figee laisserait une carte unique
     s'etirer sur toute la largeur — ou flotter au milieu du vide. */
  .dk-vals { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
  .dk-vals--1 { grid-template-columns: minmax(0, 420px); }
  .dk-vals--2 { grid-template-columns: repeat(2, minmax(0, 460px)); }
  .dk-val {
    background: var(--surface);
    border: 1.5px solid var(--border);
    border-radius: 16px;
    padding: 22px 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    box-shadow: 0 2px 8px rgba(45, 74, 62, 0.08);
  }
  [data-theme="dark"] .dk-val {
    background: #1E2A26;
    border-color: #2D4A3E;
    box-shadow: none;
  }
  .dk-val .ic {
    width: 46px; height: 46px;
    border-radius: 999px;
    background: rgba(45, 74, 62, 0.08);
    color: #2D4A3E;
    display: flex; align-items: center; justify-content: center;
  }
  [data-theme="dark"] .dk-val .ic { background: rgba(201, 168, 76, 0.12); color: #C9A84C; }
  .dk-val h4 {
    margin: 0;
    font-family: var(--font-display);
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 22px;
  }
  .dk-val p {
    margin: 0;
    font-family: var(--font-body);
    font-size: 12.5px;
    line-height: 18px;
    color: var(--fg-muted);
    text-wrap: pretty;
  }
  .dk-val .tag {
    display: block;
    font-family: var(--font-display);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #C9A84C;
  }
  .dk-ctas { display: flex; align-items: center; gap: 12px; }

  /* ------------------------------------------------------------------------
     09 — Bienvenue (pleine largeur, aplat foret)
     ------------------------------------------------------------------------ */

  .onb-shell .dk-succ {
    min-height: 100vh;
    min-height: 100dvh;
    background: #2D4A3E;
    color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 32px 64px;
    text-align: center;
    position: relative;
    overflow: hidden;
  }
  .dk-succ .ring {
    position: absolute;
    border-radius: 999px;
    border: 1.5px solid rgba(201, 168, 76, 0.14);
    pointer-events: none;
  }
  .dk-succ .ring.r1 { width: 340px; height: 340px; }
  .dk-succ .ring.r2 { width: 500px; height: 500px; border-style: dashed; border-color: rgba(201, 168, 76, 0.1); }
  .dk-succ .ring.r3 { width: 680px; height: 680px; border-color: rgba(201, 168, 76, 0.06); }
  .dk-succ .badge {
    width: 84px; height: 84px;
    border-radius: 999px;
    background: #C9A84C;
    color: #233A30;
    display: flex; align-items: center; justify-content: center;
    z-index: 2;
  }
  .dk-succ h1 {
    margin: 0; z-index: 2;
    font-family: var(--font-display);
    font-size: 32px;
    font-weight: 700;
    letter-spacing: -0.025em;
    color: #fff;
  }
  .dk-succ p {
    margin: 0; z-index: 2;
    max-width: 460px;
    font-family: var(--font-body);
    font-size: 14.5px;
    line-height: 22px;
    color: rgba(242, 242, 242, 0.76);
    text-wrap: pretty;
  }
  .dk-succ .row { z-index: 2; display: flex; gap: 12px; margin-top: 6px; }
  .dk-succ .tag {
    z-index: 2;
    font-family: var(--font-display);
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(201, 168, 76, 0.9);
  }

  /* ------------------------------------------------------------------------
     07 — Verification du numero
     ------------------------------------------------------------------------ */

  .dk-otp { display: flex; gap: 10px; }
  .dk-otp input {
    width: 54px; height: 62px;
    border-radius: 12px;
    border: 1.5px solid var(--border-strong);
    background: transparent;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 23px;
    text-align: center;
    color: var(--fg);
  }
  [data-theme="dark"] .dk-otp input { border-color: #2D4A3E; }
  .dk-otp input:focus {
    outline: none;
    border-color: #C9A84C;
    box-shadow: 0 0 0 4px rgba(201, 168, 76, 0.22);
  }
  .dk-otp input.f { border-color: #C9A84C; }

  .dk-hint {
    display: flex; align-items: flex-start; gap: 10px;
    background: rgba(45, 74, 62, 0.05);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 13px 15px;
    font-family: var(--font-body);
    font-size: 12.5px;
    line-height: 18px;
    color: var(--fg-muted);
  }
  [data-theme="dark"] .dk-hint { background: rgba(201, 168, 76, 0.06); border-color: #2D4A3E; }
  .dk-hint svg { flex-shrink: 0; color: #2D4A3E; margin-top: 1px; }
  [data-theme="dark"] .dk-hint svg { color: #C9A84C; }

  /* ------------------------------------------------------------------------
     02 — Langue et pays
     ------------------------------------------------------------------------ */

  .dk-lang { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .dk-cgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
  .dk-cwrap { display: grid; grid-template-columns: 1fr 240px; gap: 12px; align-items: end; }
}