@charset "utf-8";
/* ─── Mobile, écrans 1 et 2 (≤ 959 px, réglage fin ≤ 480 px) ───
   Chargée après app.css. Les <style> des écrans sont injectés dans #screen, donc APRÈS toute feuille liée :
   chaque règle est préfixée #screen pour gagner sur les deux. Rien ici n'ajoute d'élément : tailles, zones tactiles,
   contrastes, retours à la ligne. Le desktop (≥ 960 px) n'est jamais touché. */

@media(max-width:959px){
  /* Gris lisible pour les petits textes : #7A7A7A ne fait que 4,0:1 sur smoke et 4,3:1 sur blanc ; #6E6E6E passe 4,5:1 partout */
  #screen{--grey-aa:#6E6E6E}
  #screen .eyebrow{color:var(--grey-aa)}
  #screen .block-dark .eyebrow,#screen .s2-panel .eyebrow{color:#A3A3A3}
  #screen .error{overflow-wrap:anywhere}

  /* ═══ 21/09 (Enguerrand) : sur mobile, le pouce doit tomber sur le champ. Titre plus court, phrase d'accroche
     raccourci, champ plus haut dans la page, et le bloc de preuve nettement moins encombrant. ═══ */
  #screen .s1-title,#screen .s1-title .s1-live{font-size:clamp(28px,8.2vw,36px);line-height:1.06;letter-spacing:-.025em}
  #screen .screen>.lead{font-size:15px;line-height:1.45;margin-top:10px}
  #screen .s1-form{margin-top:16px}
  /* la barre de saisie reste visible quand on fait défiler la preuve : elle se colle sous l'en-tête */
  #screen .s1-form .prompt-bar{position:sticky;top:calc(8px + env(safe-area-inset-top,0px));z-index:5}

  /* ═══ Écran 1 : titre, question, barre ; le bloc sombre juste dessous, coins 24 px, jusqu'au bas de la page ═══ */
  #screen .console.pre.mobile-console{margin:-2px -20px -48px;padding:22px 20px 28px;border-radius:24px 24px 0 0;gap:20px}
  #screen .console.pre.mobile-console .csec{gap:12px}
  #screen .console.pre.mobile-console .console-foot{gap:20px}
  /* slider : photo 210 px, logo blanc 56 px, chiffre lime 40 px, citation 14 px, visage 40 px */
  #screen .console.pre.mobile-console .case-visual{min-height:168px}
  #screen .console.pre.mobile-console .case-visual .case-head{top:14px;left:18px;right:18px}
  #screen .console.pre.mobile-console .case-visual .case-head img{height:58px;max-width:180px;margin:-10px 0 0 -12px}
  #screen .console.pre.mobile-console .case-visual{min-height:182px}
  #screen .console.pre.mobile-console .case-visual::before{content:'';position:absolute;left:0;right:0;top:0;height:45%;background:linear-gradient(180deg,rgba(31,31,31,.6) 0%,rgba(31,31,31,0) 100%);pointer-events:none}
  #screen .console.pre.mobile-console .case-body{padding:0 18px 16px;gap:8px}
  #screen .console.pre.mobile-console .case-metric b{font-size:32px}
  #screen .console.pre.mobile-console .case-metric span{font-size:15px}
  #screen .console.pre.mobile-console .case-detail{font-size:13px;overflow-wrap:anywhere}
  #screen .console.pre.mobile-console .case-quote{padding:12px 18px 36px;gap:8px}
  #screen .console.pre.mobile-console .case-quote blockquote{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
  #screen .console.pre.mobile-console .case-quote blockquote{font-size:14px;line-height:1.45;overflow-wrap:anywhere}
  #screen .console.pre.mobile-console .case-quote figcaption img{width:40px;height:40px}
  #screen .console.pre.mobile-console .case-quote figcaption b{font-size:14px;overflow-wrap:anywhere}
  #screen .console.pre.mobile-console .case-quote figcaption small{overflow-wrap:anywhere}
  /* points : le trait reste 4 px, mais chaque bouton fait 24 × 28 px (34 px pour l'actif) : tapable au pouce */
  #screen .cases .cases-dots{padding:0 14px 8px;gap:2px}
  #screen .cases-dots button{width:24px;min-width:24px;height:28px;padding:0}
  #screen .cases-dots button::before{left:4px;right:4px;top:12px}
  #screen .cases-dots button.on{width:34px}
  #screen .cases-dots button:focus-visible{outline-offset:-2px;border-radius:6px}
  /* trois chiffres : 22 px, libellé 10 px qui passe à la ligne entre les mots, jamais hors de sa colonne */
  #screen .console.pre.mobile-console .cstats div{min-width:0;padding:12px 8px 10px 0}
  #screen .console.pre.mobile-console .cstats div:not(:first-child){padding-left:10px}
  #screen .console.pre.mobile-console .cstats b{font-size:22px}
  #screen .console.pre.mobile-console .cstats span{font-size:10px;letter-spacing:.05em;line-height:1.35;margin-top:5px;overflow-wrap:anywhere}
  /* mur de logos : 52 px */
  #screen .console.pre.mobile-console .logos.dark img{height:52px}

  /* ═══ Écran 2 · recherche : anneau 56 px + eyebrow sur une ligne, titre plus court, carte pleine largeur ═══ */
  #screen .s2-scan{gap:16px}
  #screen .s2-scan .title{font-size:clamp(26px,7.5vw,32px);line-height:1.05}
  /* 29/09 : « Analyse en cours de ... » = une copie transparente (.ghost) qui réserve la place + une copie tapée en position
     absolue (s2.js:912-915). La copie tapée (un nœud texte par lettre, plus le curseur) est un peu plus large que la copie
     transparente : sur un titre qui tient sur une ligne, elle passait à la ligne et recouvrait la carte des sources.
     Les deux copies sont empilées dans la même case de grille : le titre prend la hauteur de la plus haute, la carte commence
     toujours dessous. La copie tapée a 0,05 em de marge en plus et le curseur ne compte pas dans la largeur : la carte ne
     saute plus d'une ligne à la dernière lettre (Qonto, Skello, Brevo, Ubisoft à 390 px). */
  #screen .s2-scan .title{display:grid;grid-template-columns:minmax(0,1fr)}
  #screen .s2-scan .title>span{grid-area:1/1;position:static!important}   /* !important : la copie tapée porte position:absolute en style en ligne (s2.js:914) */
  #screen .s2-scan .title>span:last-child{margin-right:-.05em}
  #screen .s2-scan .title .caret{margin-right:-.1em}   /* curseur = .04em de marge + .06em de large (app.css:61) : largeur nette nulle */
  #screen .s2-scancard{padding:16px 16px 14px;gap:12px;border-radius:12px}
  #screen .s2-groups{gap:14px}
  /* lignes 42 px ; le libellé n'est jamais coupé : il passe à la ligne (« Clients de votre secteur » / « · CRM ») */
  #screen .s2-scancard .src{grid-template-columns:18px minmax(0,1fr) auto;gap:10px;min-height:42px;padding:6px 10px}
  #screen .s2-scancard .src .sl{font-size:14px;line-height:1.25;white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:anywhere}
  #screen .s2-scancard .src .sr-{font-size:12px}
  #screen .s2-scancard .s2-step{font-size:13px}
  #screen .s2-scancard .s2-meta{font-size:12px;color:var(--grey-aa)}

  /* ═══ Écran 2 · validation : carte (en-tête 56 px, nom 22 px, une colonne, champs 48 px), bloc sombre, bouton collant ═══ */
  #screen .s2-done{gap:14px}
  #screen .s2-lead{font-size:17px;line-height:1.35;color:var(--grey-aa)}
  #screen .s2-card{padding:16px 16px 4px;gap:14px;border-radius:12px}
  #screen .s2-head{gap:12px}
  #screen .s2-logo{width:56px;height:56px;border-radius:12px;font-size:20px}
  #screen .s2-field-name .s2-val{font-size:22px;line-height:1.1;white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:anywhere}
  #screen .s2-field-name .s2-in{font-size:20px}
  #screen .s2-field-site .s2-val{font-size:13px;color:var(--grey-aa);white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:anywhere}
  #screen .s2-field-site .s2-in{font-size:16px}   /* 14 px zoomait sur iOS */
  #screen .s2-pfull{font-size:22px;overflow-wrap:anywhere}
  #screen .s2-prole{color:var(--grey-aa);overflow-wrap:anywhere}
  #screen .s2-rows{grid-template-columns:minmax(0,1fr);column-gap:0}
  #screen .s2-row{min-height:48px;padding:6px 0;column-gap:10px}
  #screen .s2-lab{font-size:11px;color:var(--grey-aa)}
  #screen .s2-val{font-size:17px}
  #screen .s2-field[data-key="linkedin"] .s2-val{white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:anywhere}
  /* le crayon : 14 px dessinés dans une boîte de 44 px, sans bouger la mise en page (toute la ligne est déjà le bouton) */
  #screen .s2-pen{width:44px;height:44px;padding:15px;box-sizing:border-box;margin:-15px -15px -15px 0}
  #screen .input.s2-in{min-height:48px;font-size:17px}
  #screen select.input.s2-in{font-size:17px}

  /* bloc sombre : listes de 3 (repli en s2.js), tuile logo / visage 48 px, résultat visible ; ni citation ni « et N autres » ici */
  #screen .s2-panel-mobile.block-dark{padding:20px;border-radius:12px}
  #screen .s2-panel-mobile .s2-panel{gap:16px}
  #screen .s2-panel-mobile .s2-panel-top{gap:10px}
  #screen .s2-panel-mobile .s2-panel-title{font-size:22px;line-height:1.15}
  #screen .s2-panel-mobile .s2-panel-mid{overflow:visible;justify-content:flex-start}
  #screen .s2-panel-mobile .s2-wall,#screen .s2-panel-mobile .s2-known{gap:8px}
  #screen .s2-panel-mobile .s2-kcard{grid-template-columns:48px minmax(0,1fr) auto;column-gap:12px;padding:12px;border-radius:10px}
  #screen .s2-panel-mobile .s2-kface{width:48px;height:48px;font-size:15px}
  #screen .s2-panel-mobile .s2-kcard.s2-kcase{grid-template-columns:48px minmax(0,1fr) auto;column-gap:12px}
  #screen .s2-panel-mobile .s2-kcase .s2-klogo{width:48px;height:48px;border-radius:50%}
  #screen .s2-panel-mobile .s2-kcase .s2-klogo img.s2-kmark{height:64px;max-width:112px}
  #screen .s2-panel-mobile .s2-klogo img{height:44px;max-width:44px}
  #screen .s2-panel-mobile .s2-kbody{gap:3px}
  #screen .s2-panel-mobile .s2-kname{font-size:16px;overflow-wrap:anywhere}
  #screen .s2-panel-mobile .s2-kmeta{font-size:12px;overflow-wrap:anywhere}
  #screen .s2-panel-mobile .s2-kres{display:flex;flex-direction:column;align-items:flex-end;text-align:right;white-space:normal;max-width:112px}
  #screen .s2-panel-mobile .s2-kres img{display:none}   /* la société est déjà dans le rôle ; le chiffre suffit */
  #screen .s2-panel-mobile .s2-kres b{font-size:20px;white-space:nowrap}
  #screen .s2-panel-mobile .s2-kres small{font-size:10px;line-height:1.3}
  #screen .s2-panel-mobile .s2-wmore,#screen .s2-panel-mobile .s2-panel-foot{display:none}

  /* 29/09 (Romain, défaut 4 : « aucun truc qui marche sur les 3 cas clients ») : le carrousel « Dans votre secteur » reprenait
     la mise en page du panneau de droite (photo plein cadre, texte posé dessus, bloc de 480 px) : la citation passait sur le
     visage et le haut du texte (le grand chiffre) était coupé. Sur mobile seulement : plus de portrait (le visage reste dans la
     ligne auteur), fond uni, texte dans le flux, citation sur 4 lignes. Les cas restent empilés (grille) : hauteur du plus long,
     ligne auteur calée en bas sur les points, fondu d'entrée sans chevauchement. En-tête de 56 px pour tous les cas. */
  #screen .s2-panel-mobile .s2-hlogo{height:56px;margin-top:4px}
  #screen .s2-panel-mobile .s2-hl-in{height:56px;font-size:28px}
  #screen .s2-panel-mobile .s2-hl-in img:not(.s2-logo-site){height:112px;margin-left:-36px}   /* SVG 192×97 très margés : glyphe de 25 à 40 px, calé à gauche comme le nom en texte */
  #screen .s2-panel-mobile .s2-hl-in img.s2-logo-site{height:40px}
  #screen .s2-panel-mobile .panel-hero{min-height:0;border-radius:10px;background:var(--c-panel)}
  #screen .s2-panel-mobile .panel-slides{position:static;display:grid}
  #screen .s2-panel-mobile .panel-hero .case{position:relative;inset:auto;grid-area:1/1;display:flex;flex-direction:column;background:transparent}
  #screen .s2-panel-mobile .panel-hero .case:not(.on){transition:none}
  #screen .s2-panel-mobile .panel-hero .case-photo,#screen .s2-panel-mobile .panel-hero .case::before,#screen .s2-panel-mobile .panel-hero .case::after{display:none}
  #screen .s2-panel-mobile .case-copy{position:static;flex:1;gap:12px;text-shadow:none}
  #screen .s2-panel-mobile .case-num{gap:4px 10px}
  #screen .s2-panel-mobile .case-num b{font-size:40px}
  #screen .s2-panel-mobile .case-num span{font-size:15px;line-height:1.3}
  #screen .s2-panel-mobile .case-kpis{flex-direction:column;gap:8px;margin:0}
  #screen .s2-panel-mobile .case-kpi{white-space:normal}
  #screen .s2-panel-mobile .case-kpi b{font-size:20px;white-space:nowrap}
  #screen .s2-panel-mobile .case-kpi small{max-width:none;line-height:1.35}
  #screen .s2-panel-mobile .case-sub{margin:0;font-size:14px;line-height:1.4;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
  #screen .s2-panel-mobile .case-say{flex:1;margin-top:4px;gap:16px}
  #screen .s2-panel-mobile .case-say blockquote{max-width:none;font-size:15px;line-height:1.45;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4;overflow:hidden}
  #screen .s2-panel-mobile .case-who{margin-top:auto}

  /* le retour « ← Votre entreprise » : un texte centré sous le bouton collant, 44 px de haut */
  #screen .s2-done>.back{align-self:center;min-height:44px;padding:0 8px;margin-top:-4px;font-size:13px}
}

@media(max-width:480px){
  #screen .s2-card{padding:14px 14px 4px}
  #screen .s2-scancard{padding:14px 14px 12px}
  #screen .console.pre.mobile-console{padding:20px 20px 26px}
}

@media(prefers-reduced-motion:reduce){
  #screen .cases-dots button,#screen .cases-dots button::before{transition:none}
}