@charset "utf-8";
/* ─── Mobile B · écrans 4 à 7 (≤ 959 px) ───
   Chargé en dernier : à spécificité égale, ces règles gagnent sur app.css / testimonial.css.
   Les règles propres à un écran vivent dans le <style> de screens/s4-s7.js (préfixe .sN- / #screen .sN-) ;
   ici, ce qui est transversal : boutons collants, témoignage, débordements, mouvement réduit, focus. */
@media(max-width:959px){
  /* Boutons collants (« Continuer » à la question contexte, « Voir les créneaux ») : 14 px du bas, + l'encoche s'il y en a une */
  .s4-cta,.s5-cta{bottom:calc(14px + env(safe-area-inset-bottom,0px))}
  /* Le témoignage suit le dernier élément à 24 px (gap 22 px + 2 px ; 20 px + 4 px sous 480 px, testimonial.css) ;
     un défilement programmé vers lui laisse la place du bouton collant au-dessus */
  #screen .screen>.testimonial{scroll-margin-block:24px 96px}
  /* Rien ne dépasse : noms, rôles, adresses et phrases se replient au besoin ; les adresses en ellipsis restent en ellipsis (s5.js) */
  #screen .lead,#screen .note,#screen .s5-name,#screen .s5-role,#screen .s7-h2,#screen .s5-count{overflow-wrap:anywhere}
  #screen .field label{overflow-wrap:anywhere}
  #screen .input[type="email"]{overflow-wrap:anywhere;text-overflow:ellipsis}
  /* Liens texte de navigation (retours, « Rejouer le parcours », « + 2 autres personnes », « + ajouter une adresse email ») : zone de 44 px, focus dessiné */
  #screen .s4-nav .btn-ghost,#screen .s5-nav .btn-ghost,#screen .s7-replay,#screen .s5-morebtn,#screen .s5-emailbtn{min-height:44px}
  #screen .s7-replay:focus-visible,#screen .s5-morebtn:focus-visible,#screen .s5-emailbtn:focus-visible{outline:3px solid var(--lime-dark);outline-offset:3px;border-radius:4px}
  /* Un créneau, une option, une personne : l'état pressé se voit aussi au clavier */
  #screen .opt:focus-visible,#screen .s5-person:focus-visible{outline:3px solid var(--lime-dark);outline-offset:3px}
}
/* Mouvement réduit : aucune transition sur les écrans 4-7 (les animations sont déjà coupées par app.css et les <style> des écrans) */
@media(prefers-reduced-motion:reduce){
  #screen .opt,#screen .btn,#screen .s5-person,#screen .s5-add i,#screen .s7-screen{transition:none;animation:none}
  #screen .s7-check circle,#screen .s7-check path{animation:none;stroke-dashoffset:0}
}

/* ── 15/09 · CTA mobile unifié : chaque écran a UN bouton principal lime, pleine largeur, 56 px, collé en bas avec la zone sûre iOS ── */
@media(max-width:959px){
  #screen .s2-done>.btn-full,#screen .s4-cta,#screen .s5-cta,#screen .s7-cta .btn{min-height:56px;font-size:15px;letter-spacing:.03em}
  .s2-done>.btn-full,.s4-cta,.s5-cta,#screen .s7-cta{bottom:calc(12px + env(safe-area-inset-bottom,0px))}
  #screen .s4-who .s4-cta{margin-top:8px}
  /* 28/09 (Romain, Claap avec Enguerrand : « valider l'entreprise, que ça suive ton scroll ») : un bouton collant en bas
     ne suit que tant que sa place naturelle est sous l'écran ; placé sous la fiche, il partait dès qu'on descendait dans
     les cas clients. Il passe dernier de la colonne (order, le balisage ne change pas) : visible en bas dès l'arrivée,
     et il reste en bas jusqu'à la fin de la page. Même mécanique que « Continuer » aux questions. */
  .s2-done>.btn-full{order:99}
  /* la bande sous le bouton collant suit le fond, sans liseré visible */
  .s2-done>.btn-full::after,.s4-cta::after,.s5-cta::after,#screen .s7-cta::after{background:var(--smoke)}
  /* décideurs : rôle sur deux lignes au plus */
  #screen .s2-panel-mobile .s2-kmeta{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
}

/* ── 15/09 · passe mobile 2 : fiches plus courtes, bouton collant plus propre ── */
@media(max-width:959px){
  /* fiches entreprise et profil en deux colonnes : la carte passe de 6 à 3 lignes, le bloc de preuve et le bouton remontent */
  #screen .s2-card .s2-rows{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:16px}
  #screen .s2-card .s2-rows>:last-child:nth-child(odd){grid-column:1 / -1}
  /* champs longs (rôle, ancienneté, LinkedIn, secteur détaillé) sur toute la largeur : jamais tronqués */
  #screen .s2-card .s2-rows>[data-key="role"],#screen .s2-card .s2-rows>[data-key="tenure"],#screen .s2-card .s2-rows>[data-key="linkedin"]{grid-column:1 / -1}
  /* plus de voile dégradé au-dessus du bouton collant : il salissait les blocs sombres ; l'ombre suffit à le détacher */
  .s2-done>.btn-full::before,.s4-cta::before,.s5-cta::before,#screen .s7-cta::before{display:none}
}
@media(max-width:360px){
  #screen .s2-card .s2-rows{grid-template-columns:minmax(0,1fr)}
}