/* ============================================================
   ROARY — typographie mobile et tablette
   Chargée en dernier sur les pages publiques.

   Principe : les titres du site étaient déjà fluides (clamp),
   mais les petits textes en capitales espacées ne l'étaient pas.
   Un libellé à 12,5 px avec .22em d'interlettrage mesure près de
   440 px : sur un téléphone de 375 px, il passe forcément à la
   ligne. C'est ce qui faisait tomber « Coiffure » sous les autres
   secteurs. On rend donc fluides la taille ET l'interlettrage,
   les deux jouant sur la largeur.
   ============================================================ */

/* ---------- 1. Les secteurs, sur une seule ligne ---------- */
@media (max-width: 760px) {
  .bandeau .secteur-tags {
    gap: 6px;
    margin-top: 22px;
  }
  .bandeau .secteur-tags span {
    font-size: clamp(8px, 2.5vw, 12.5px);
    letter-spacing: .1em;
  }
  .bandeau .secteur-tags .sep { letter-spacing: 0; }
}

/* Entre 761 et 900 px, on desserre progressivement sans repasser
   à la valeur de bureau, qui déborderait encore. */
@media (min-width: 761px) and (max-width: 900px) {
  .bandeau .secteur-tags { gap: 9px; }
  .bandeau .secteur-tags span { font-size: 11.5px; letter-spacing: .16em; }
}

/* ---------- 2. Les autres capitales espacées ---------- */
/* Même cause, mêmes effets : ces libellés dépassent sous 400 px. */
@media (max-width: 560px) {
  .label {
    font-size: clamp(9px, 2.7vw, 11px);
    letter-spacing: .1em;
    gap: 10px;
  }
  footer .ffine {
    font-size: clamp(8px, 2.3vw, 10px);
    letter-spacing: .16em;
  }
  footer .fslogan {
    font-size: clamp(9px, 2.6vw, 11px);
    letter-spacing: .22em;
  }
  .brand-quote .bq-label,
  .adhesion .titre {
    font-size: clamp(8.5px, 2.4vw, 10px);
    letter-spacing: .18em;
  }
  .hero-slogan { letter-spacing: .2em; text-indent: .2em; }
  .scroll-cue .txt { letter-spacing: .16em; }
  .pilier-label,
  .mini-dial .of,
  .sc-label { letter-spacing: .16em; }
  .acces .k { letter-spacing: .14em; }
  .cle .num { letter-spacing: .16em; }
}

/* ---------- 3. Corps de texte ---------- */
/* 17 px sur un écran de 375 px produit des lignes trop courtes :
   le texte se hache. On descend légèrement et on resserre
   l'interligne, qui était calé pour du bureau. */
@media (max-width: 760px) {
  body { font-size: 16px; line-height: 1.7; }

  .manifesto .sub,
  .score-intro,
  .brand-quote p,
  .card-inner p,
  .panel p { font-size: 14.5px; line-height: 1.6; }

  .acces p, .cle p { font-size: 13.5px; line-height: 1.6; }
  .adhesion p { font-size: 13.5px; }
}

/* Justifié des deux côtés, sur téléphone et tablette (jusqu'à
   1024 px, la même borne que roary-tablette.css) — avec césure pour
   limiter les rivières blanches que le justifié creuse sur une
   colonne étroite.

   `!important` : chaque page centre ou aligne ces paragraphes avec
   un sélecteur composé propre à sa section (ex. `.c3 .score-intro`),
   plus spécifique qu'un simple `.score-intro` d'ici. Plutôt que de
   traquer chaque variante page par page, on tranche une fois pour
   toutes sur cette plage de largeur. */
@media (max-width: 1024px) {
  .card-inner p,
  .manifesto .sub,
  .score-intro,
  .candidature-note,
  .intro,
  .li-post-body,
  .ro-sous,
  .ro-fine,
  .ro-questions,
  .mindset-line,
  .score-vivant p,
  .head p,
  .plateforme-inner p { text-align: justify !important; hyphens: auto; }
}

/* ---------- 4. Titres ---------- */
/* Les clamp existants descendent parfois trop bas ou pas assez.
   On resserre le crénage, qui devient trop lâche en petit corps. */
@media (max-width: 560px) {
  .bandeau p { font-size: clamp(18px, 5vw, 24px); line-height: 1.3; }
  .manifesto .lead { font-size: clamp(23px, 6.4vw, 30px); line-height: 1.16; }
  .plateforme .head h2 { font-size: clamp(23px, 6.2vw, 30px); }
  .plateforme .head p { font-size: 14.5px; }
  .dual .panel h3 { font-size: clamp(24px, 6.6vw, 32px); }
  .score h2, .conviction .head h2, .dual .head h2 { font-size: clamp(20px, 5.4vw, 26px); }
  .acces h3, .cle h3 { font-size: 16px; }
}

/* ---------- 5. Rythme vertical ---------- */
/* Les 110 à 140 px de respiration du bureau mangent un écran
   entier sur un téléphone. */
@media (max-width: 760px) {
  .manifesto-inner,
  .dual-inner,
  .conviction-inner,
  .plateforme-inner { padding-top: 64px; padding-bottom: 52px; }
  .score { padding-top: 64px; padding-bottom: 52px; }
  footer { padding-top: 72px; }
  .bandeau { padding-left: 6vw; padding-right: 6vw; }
  .cle { padding: 26px 22px; }
  .acces { padding: 24px 22px; }
  .adhesion { padding: 20px 20px; }
}

/* ---------- 6. Bascule Ma carrière / Mon établissement ---------- */
/* Deux boutons à 32 px de padding ne tiennent pas côte à côte
   sous 400 px : le second passait sous le premier, hors de la
   pastille coulissante. */
@media (max-width: 560px) {
  .toggle { width: 100%; max-width: 340px; }
  .toggle button {
    padding: 13px 10px;
    font-size: clamp(10px, 3vw, 12.5px);
    letter-spacing: .04em;
  }
  .panel { padding: 28px 20px; }
}

/* ---------- 7. Confort de lecture ---------- */
@media (max-width: 760px) {
  /* Une césure propre vaut mieux qu'un mot qui déborde. */
  h1, h2, h3, p { overflow-wrap: break-word; }
  /* Pas de coupure au milieu d'un nom de marque ou d'un métier. */
  .cle h3, .acces h3, .plateforme .head h2 { overflow-wrap: normal; hyphens: none; }
}

/* iOS zoome sur un champ dont le texte fait moins de 16 px.
   On force 16 px à la saisie, sans toucher au reste. */
@media (max-width: 760px) {
  input, select, textarea { font-size: 16px !important; }
}

/* ---------- 8. Nous suivre : mosaïque Instagram et carte LinkedIn ---------- */
/* Les hauteurs fixes (400 px / 320 px) calées pour une carte large de
   700-820 px deviennent disproportionnées une fois la carte réduite
   à la largeur d'un téléphone : on les redescend et on desserre le
   padding, trop large sur un écran étroit. */
@media (max-width: 560px) {
  .ig-mosaic-card { min-height: 280px; border-radius: 16px; }
  .ig-content { padding: 22px; }
  .ig-content p { max-width: 30ch; font-size: 13px; }
  .ig-content .fc-icon { width: 44px; height: 44px; margin-bottom: 12px; }
  .ig-content .fc-icon svg { width: 22px; height: 22px; }

  .li-post-card { padding: 24px 20px; }
  .li-post-photo { height: 200px; }
  .li-post-body { font-size: 13.5px; }
}

/* ---------- 9. Ma carrière : badge « 0 € » et checklist ---------- */
/* Le badge est pensé comme une pastille sur une ligne ; sur un écran
   étroit, la phrase qu'il contient doit pouvoir passer à la ligne
   sans casser la forme arrondie. */
@media (max-width: 480px) {
  .cout-badge { flex-wrap: wrap; justify-content: center; text-align: center; border-radius: 20px; }
  .raisons-check span.txt { font-size: 14px; }
}