/* ============================================================
   TÉLÉPHONE : resserrer ce qui est pensé pour un grand écran.
   ============================================================ */

/* carrousel : le texte sous chaque carte est mis en page à la largeur de la carte ouverte,
   sinon les cartes étroites l'empilent sur 6 lignes et réservent un grand vide sous le carrousel */
.fc-meta{width:var(--cw)}

@media (max-width:560px){
  /* moins d'air entre les sections (144 px de vide entre deux blocs, c'était trop pour un écran de téléphone) */
  main>section{padding-block:52px}

  /* outils : 4 par ligne, plus petits, la description arrive plus vite */
  .tools{gap:10px;margin-top:28px}
  .tool{flex-basis:calc((100% - 30px) / 4);padding:14px 4px;border-radius:18px}
  .tool img,.tool .mono{width:38px;height:38px;border-radius:9px}
  .tool-detail{margin-top:14px;min-height:0}

  /* la barre du bas reste fixe : le pied de page (confidentialité) doit pouvoir passer au-dessus d'elle */
  footer{padding-bottom:150px}
}

/* ---------- première section, état final, sur téléphone ----------
   comme une carte de visite : une ligne nom | disponibilité, la phrase d'un seul tenant (pas de retour à la ligne forcé au milieu),
   le sous-titre, le bouton, puis la photo en dessous */
@media (max-width:560px){
  .hb-split:not(.flat):not(.pk){min-height:0;align-content:start;gap:28px;padding-top:8px}
  .hb-split:not(.flat):not(.pk) .hb-txt{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:baseline;column-gap:12px;padding-top:0;width:100%}
  .hb-split:not(.flat):not(.pk) .hb-txt>*,.hb-split:not(.flat):not(.pk) .hb-l2{grid-column:1/-1}
  /* ligne du haut : le nom à gauche, la disponibilité à droite */
  .hb-split:not(.flat):not(.pk) .hb-l4{grid-column:1;grid-row:1;font-size:15px;font-weight:600;color:var(--ink)}
  .hb-split:not(.flat):not(.pk) .hb-l4{font-size:0}
  .hb-split:not(.flat):not(.pk) .hb-l4 [data-g="name"]{font-size:15px}
  .hb-split:not(.flat):not(.pk) .hb-l4 [data-g="role"]{display:none}
  .hb-split:not(.flat):not(.pk) .hb-l1{grid-column:2;grid-row:1;margin:0;font-size:12px;color:var(--mute);white-space:nowrap;display:flex;align-items:center;gap:0}
  .hb-split:not(.flat):not(.pk) .hb-l1 [data-g="et"],.hb-split:not(.flat):not(.pk) .hb-l1 [data-g="end"]{display:none}
  .hb-split:not(.flat):not(.pk) .hb-l1 [data-g="mandats"]{font-size:0}
  .hb-split:not(.flat):not(.pk) .hb-l1 [data-g="mandats"]::before{content:"Mandats";font-size:12px}
  .hb-split:not(.flat):not(.pk) .hb-l1 [data-g="stage"]::before{content:" · ";white-space:pre}
  .hb-split:not(.flat):not(.pk) .hb-l1 [data-g]::after{content:none}
  /* la phrase : d'un seul tenant, plus petite */
  .hb-split:not(.flat):not(.pk) .hb-br{display:none}
  .hb-split:not(.flat):not(.pk) .hb-l2{font-size:clamp(19px,5.5vw,23px);font-weight:600;letter-spacing:-.02em;line-height:1.2;margin-top:16px;max-width:none}
  .hb-split:not(.flat):not(.pk) .hb-txt .sub{font-size:15px;line-height:1.4;margin-top:6px}
  .hb-split:not(.flat):not(.pk) .hb-txt .pill.big{justify-self:start;margin-top:24px}
  /* la photo passe sous le texte, en large */
  .hb-split:not(.flat):not(.pk) .hb-photo{order:1;width:100%;max-width:none;aspect-ratio:4/3;border-radius:24px;overflow:hidden}
  .hb-split:not(.flat):not(.pk) .hb-photo img{width:100%;height:100%;object-fit:cover;object-position:50% 22%}
}

/* ---------- première section, PENDANT l'animation, sur téléphone ----------
   tout reste aligné à gauche (plus de lignes centrées coupées au milieu) ; la photo est une petite vignette au-dessus du texte,
   le texte prend toute la largeur au lieu d'une colonne étroite à côté de la photo */
@media (max-width:560px){
  .hero.eq{text-align:left;align-items:stretch}
  .hero.eq .hb-split,.hero.eq .hb-split.flat,.hb-split.pk{grid-template-columns:1fr;text-align:left;gap:16px}
  .hero.eq .hb-split.flat .hb-photo,.hb-split.pk .hb-photo{order:-1;justify-self:start;width:64px;max-width:64px;border-radius:14px}
  .hero.eq .hb-split:not(.flat) .hb-txt{align-items:flex-start}
  .hero.eq .hb-nav{justify-content:flex-start}
  .hero.eq .hb-pa,.hero.eq .hb-txt .hb-pa{margin-left:0;margin-right:0;text-align:left}
  .hero.eq .pill.big,.hero.eq .hb-txt .pill.big{align-self:flex-start;margin-left:0}
  .hero.eq>.hb-l1{align-self:flex-start}
}

/* ---------- la barre du bas (île) sur téléphone : plus large, plus d'air entre les liens ---------- */
@media (max-width:520px){
  .isl-top{gap:8px;padding:0 8px 0 16px}
  .isl-links{gap:4px;margin-right:6px}
  .isl-links a{padding:12px 12px}
  .isl-cta{padding:0 22px}
}

/* ---------- téléphone : un seul système (taille des titres, alignement, vides) ----------
   - la phrase du haut reste la plus forte : les titres de section passent sous elle en poids visuel
   - tout est aligné à gauche, sauf la carte de contact (un bloc de fin, centré exprès)
   - plus de grand vide au-dessus de la première section */
@media (max-width:560px){
  .hero{justify-content:flex-start;padding-top:28px;padding-bottom:28px;min-height:540px}
  .hb-split:not(.flat):not(.pk) .hb-l2{font-weight:700}
  h2{font-size:24px;letter-spacing:-.03em;line-height:1.12}
  .eyebrow{font-size:12px;margin-bottom:10px}
  .contact h2{font-size:28px}
  .wrow h3{font-size:19px;letter-spacing:-.02em}
  .wrow{padding-block:18px}
  .trust{text-align:left}
  .trust .eyebrow{margin-bottom:14px;padding-inline:var(--pad)}
}