@charset "utf-8";
/* ─── Revue de cohérence design (desktop 1440×900), 15/09 ───
   Ce fichier ne porte que des corrections de SYSTÈME sur les styles que les écrans injectent eux-mêmes (screens/sN.js, <style> dans #screen).
   Un <style> d'écran arrive après les feuilles du <head> : à spécificité égale il gagne, d'où les sélecteurs préfixés #screen / .console.
   Tout ce qui touche la mise en page est borné à ≥ 960 px (la passe mobile vit dans mobile-a.css / mobile-b.css) ; les couleurs et rayons, eux, sont globaux.
   Règles : .title identique partout · eyebrow 12 px/.08em, micro-label 11 px/.04em · un seul gris sombre (--c-bg / --c-panel / --c-line)
   · rayons 8 (boutons, champs) / 12 (cartes) / 14 (grands blocs) · espacements 8/16/24/32/40 · retour secondaire = texte mono gris, jamais un bouton bordé. */

/* ── Couleurs : un seul gris sombre, texte secondaire lisible (spécificité > celle des <style> d'écran) ── */
#console .s2-panel,#console .s7-panel,#screen .s2-panel-mobile.block-dark{background:var(--c-bg)}   /* #141414 → --c-bg */
.s2-panel .s2-kcard,.s2-panel .s2-wrow{background:var(--c-panel)}                                    /* #1F1F1F → --c-panel */
.s2-panel .s2-wall .s2-kcase .s2-kface.s2-klogo{background:var(--c-line)}                            /* #2A2A2A → --c-line */
.s2-panel .s2-quote{border-top-color:var(--c-line)}
.s2-panel .s2-panel-top .eyebrow,.s2-panel .s2-kmeta,.s2-panel .s2-quote figcaption small,#console .s7-panel .s7-brand,#console .s7-panel-foot .note{color:var(--c-muted)}
.s2-panel .s2-kmeta .s2-kmeet::before{color:var(--c-dim)}
.shell .s7-screen{border-color:var(--c-line)}
.shell .s7-screen .bar span{color:var(--c-dim)}    /* #6A6A6A sur #222 = 2,9:1 → 4,6:1 */
#screen .s2-pen{color:var(--grey)}                 /* icône crayon : #B8B8B8 = 2:1 sur blanc → 4,9:1 */
#screen .s2-row-v:hover .s2-pen,#screen .s2-row-v:focus-visible .s2-pen{color:var(--black)}

/* ── Rayons hors système ── */
#screen .s2-logo{border-radius:var(--r2)}          /* tuile logo 64 px : 14 → 12 (carte) */
#screen .s2-row{border-radius:var(--rb)}           /* anneau de focus des lignes : 6 → 8 */
#screen .s2-field-name .s2-row,#screen .s2-field-site .s2-row{border-radius:var(--rb)}   /* 4 → 8 */
.shell .s7-screen{border-radius:var(--r2)}         /* cadre de l'aperçu OS : 10 → 12 */

/* ── Labels : deux tiers seulement ── */
#screen .s2-lab{letter-spacing:.04em}              /* micro-label 11 px : .06 → .04em */
.s2-panel .s2-wtxt small{letter-spacing:.04em}
.shell .s7-brand{letter-spacing:.08em}             /* eyebrow 12 px : .06 → .08em */
.s2-panel .s2-kres small,.s2-panel .s2-wres small{font-size:11px}   /* 10 → 11 px, comme les autres micro-labels */

/* ── Focus : même anneau, même décalage ── */
#screen .s5-person:focus-visible{outline-offset:2px}

/* ── Desktop : titres, leads, rythme vertical, retours secondaires ── */
@media(min-width:960px){
  /* .title identique partout : les écrans 2 (recherche) et 4 (questions) réduisaient le titre (40 et 42 px) */
  #screen .title,#screen .s2-scan .title{font-size:clamp(32px,3.4vw,48px)}
  #screen .s2-done .title{margin-top:0}
  /* lead : 20 px / --soft partout (l'écran 2 le passait en 18 px gris) */
  #screen .s2-lead{font-size:20px;color:var(--soft)}
  /* rythme 8/16/24/32 */
  #screen .s2-scan{gap:24px}
  #screen .s2-scancard{padding:24px;gap:16px}
  #screen .s2-groups{gap:16px}
  #screen .s2-done{gap:24px}
  #screen .s2-done>.btn{margin-top:0}
  #screen .s2-card{padding:32px 32px 16px;gap:24px}
  #screen .s2-head{gap:16px}
  #screen .s2-rows{column-gap:32px}
  #screen .s4-qh{gap:16px}
  #screen .s4-opts.s4-source,#screen .s4-yesno{gap:8px}
  #screen .s6-days{gap:24px}
  #screen .s6-day{gap:8px}
  #screen .s6-grid{gap:8px}
  #screen .s1-form{gap:8px}
  /* bouton principal → retour secondaire : 16 px partout (écran 2 : 24 − 8 ; écran 4 : gap ; écran 5 : 24 − 8) */
  #screen .s2-done>.back{margin-top:-8px}
  #screen .s4-nav{gap:16px}
  #screen .s5-nav{margin-top:-8px}
  /* retour secondaire : le style .back (texte mono gris, 44 px), pas un bouton bordé (écran 5) ni un hover bordé (écran 4) */
  #screen .s4-nav .btn-ghost,#screen .s5-nav .btn-ghost{align-self:flex-start;min-height:44px;padding:0 8px;margin-left:-8px;font-size:13px;letter-spacing:.04em;color:var(--grey);background:transparent;border-color:transparent;border-radius:var(--rb)}
  #screen .s4-nav .btn-ghost:hover,#screen .s5-nav .btn-ghost:hover{color:var(--black);border-color:transparent}
  /* panneaux alternatifs (écrans 2 et 7) : mêmes marges que le panneau par défaut (40, 32 sous 1180 px), gap 24 */
  .console.custom .s2-panel,.console.custom .s7-panel{padding:40px;gap:24px}
  .console.custom .s2-panel-top{gap:16px}
  .console.custom .s2-known,.console.custom .s2-wall{gap:8px}
  .console.custom .s2-kcard{padding:16px;column-gap:16px}
  .console.custom .s2-quote{padding-top:24px;gap:16px}
  .console.custom .s7-panel-foot{gap:16px}
}
@media(min-width:960px) and (max-width:1180px){
  .console.custom .s2-panel,.console.custom .s7-panel{padding:32px;gap:24px}
}