/* Audit mobile first du 16/10 (AUDIT-MOBILE-UX-1610.md). Points validés par Pierre : 1, 3, 4A, 5 (hub), 6 (frise), 8, 9, 10.
   Rien ne change au-dessus de 1023 px, sauf l'indication de défilement et l'appel, masqués. Chargé en dernier (inc/mobile.php). */

/* ---------- 1. Appels intermédiaires : une phrase et un lien fléché vers Contact ---------- */
.lw-relance { display: none; }
@media (max-width: 1023px) {
  .lw-relance {
    display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
    margin-top: 48px; padding-top: 24px; border-top: 1px solid rgb(0 0 0 / .15);
    font-size: 1.125rem; line-height: 1.45; text-align: left;
  }
  .lw-relance--sombre { border-top-color: rgb(255 255 255 / .2); color: var(--lw-white); }
  .lw-relance__txt { font-weight: var(--lw-fw-medium); }
  .lw-relance__lien { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font-weight: var(--lw-fw-semibold); color: inherit; }
  .lw-relance__lien span { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
  .lw-relance__lien svg { width: 28px; height: 28px; flex: none; }
  .lw-relance--sombre .lw-relance__lien span { text-decoration-color: var(--lw-lime); }
  /* home : sections centrées */
  .lw-realisations .lw-relance, .lw-methode .lw-relance { align-items: center; text-align: center; }
  .lw-realisations .lw-relance { margin-top: 40px; }
  .lw-methode .lw-relance { margin-top: 40px; }
}

/* ---------- 3. Contact : le formulaire juste sous le titre ---------- */
@media (max-width: 1023px) {
  .lw-page-contact__card { order: -1; }
  .lw-page-contact__aside { margin-top: 16px; }
}

/* ---------- 4A. Home, réalisations : 6 tuiles (4 projets, 2 chiffres), puis « Voir toutes les réalisations » ---------- */
@media (max-width: 1023px) {
  .lw-realisations__grid > li:nth-child(n+7) { display: none; }
}

/* ---------- 5. Hub : comparatif en tableau qui défile, critères figés à gauche ---------- */
.lw-cmp-hint { display: none; }
@media (max-width: 1023px) {
  .lw-cmp-hint {
    display: flex; justify-content: flex-end; align-items: flex-start; gap: 2px; margin: -18px 0 4px;
    font-family: "Caveat", "Figma Hand", cursive; font-weight: var(--lw-fw-bold); font-size: var(--lw-fs-hand); line-height: 1.15; color: #6e6e6e;
  }
  .lw-cmp-hint span { padding-top: 2px; }
  .lw-cmp-hint__fleche { width: 48px; height: 31px; flex: none; margin-top: 6px; } /* part de la fin du texte, file à droite vers les colonnes cachées */

  .lw-xp-cmp {
    display: grid; grid-template-columns: 96px repeat(3, 236px); grid-template-rows: repeat(7, auto); column-gap: 12px; gap: 0 12px;
    overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-left: 108px;
    margin-right: calc(-1 * var(--lw-gutter)); padding: 4px var(--lw-gutter) 16px 0; scrollbar-width: thin;
  }
  .lw-xp-cmp:focus-visible { outline: 3px solid var(--lw-focus, #000); outline-offset: 4px; }
  .lw-xp-cmp { position: relative; } /* sinon les intitulés masqués (position absolue) s'échappent du conteneur et élargissent la page */
  .lw-xp-cmp__col { position: relative; display: grid; grid-row: 1 / -1; grid-template-rows: subgrid; scroll-snap-align: start; }
  .lw-xp-cmp__col--labels { display: grid; position: sticky; left: 0; z-index: 2; background: var(--lw-cream); box-shadow: 10px 0 10px -6px var(--lw-cream); }
  .lw-xp-cmp__head { padding: 18px 16px 12px; }
  .lw-xp-cmp__head h3 { font-size: 1.25rem; }
  .lw-xp-cmp__label { display: block; padding: 14px 8px 14px 0; font-size: 0.875rem; line-height: 1.3; }
  .lw-xp-cmp__cell { display: block; padding: 14px 16px; font-size: 1rem; line-height: 1.4; }
  .lw-xp-cmp__cell-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .lw-xp-cmp__cell--prix { font-size: 1.125rem; line-height: 1.3; }
  .lw-xp-cmp__foot { padding: 12px 16px 16px; }
}

/* ---------- 6. Home, méthode : frise verticale compacte (numéro, étape, titre, une phrase) ---------- */
@media (max-width: 1023px) {
  .lw-methode__steps { display: block; position: relative; max-width: 560px; margin: 0 auto; text-align: left; }
  .lw-methode__steps::before { content: ""; position: absolute; left: 17px; top: 18px; bottom: 40px; width: 2px; background: #d0d0d0; }
  .lw-step { position: relative; top: auto; left: auto; width: auto; display: block; padding: 0 0 28px 52px; background: none; border: 0; border-radius: 0; box-shadow: none; }
  .lw-step__col { margin-bottom: 4px; font-size: 0.8125rem; color: #6e6e6e; }
  .lw-step__head { display: block; }
  .lw-step__num { position: absolute; left: 0; top: 0; margin: 0; }
  .lw-step:not(:has(.lw-step__num))::before { content: ""; position: absolute; left: 11px; top: 4px; width: 14px; height: 14px; border-radius: 50%; background: var(--lw-lime); border: 2px solid var(--lw-black); } /* « Vous testez » : étape sans numéro, un point sur la frise */
  .lw-step__title { font-size: 1.125rem; line-height: 1.3; }
  .lw-methode .lw-step__text { margin-top: 4px; font-size: 1rem; line-height: 1.5; color: #3d3d3d; } /* .lw-methode : passe devant .lw-step--light .lw-step__text (noir) */
  .lw-step--dark { margin-left: 0; padding: 20px 20px 22px 72px; border-radius: var(--lw-radius); background: var(--lw-black); box-shadow: 6px 8px 0 0 #d0d0d0; }
  .lw-step--dark .lw-step__head { display: block; }
  .lw-step--dark .lw-step__num { left: 20px; top: 20px; }
  .lw-step--dark .lw-step__col { color: var(--lw-lime); }
  .lw-methode .lw-step--dark .lw-step__text { color: var(--lw-white); }
  .lw-step--dark .lw-step__picto { display: none; }
}

/* ---------- 8. Pages produit, « Ce que contient » : liste compacte au lieu de cartes ---------- */
@media (max-width: 1023px) {
  .lw-xp-contenu__grid { display: block; padding-right: 0; }
  .lw-xp-feature, .lw-xp-feature--lime {
    display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 16px; row-gap: 4px; align-items: start;
    padding: 18px 0; background: none; border-radius: 0; box-shadow: none; border-top: 1px solid rgb(0 0 0 / .15);
  }
  .lw-xp-feature:last-child { border-bottom: 1px solid rgb(0 0 0 / .15); }
  .lw-xp-feature .lw-xp-feature__icon { grid-row: 1 / 3; width: 44px; height: 44px; }
  .lw-xp-feature .lw-xp-feature__icon svg { width: 24px; height: 24px; }
  .lw-xp-feature h3 { font-size: 1.125rem; line-height: 1.3; }
  .lw-xp-feature p { font-size: 1rem; line-height: 1.5; }
}

/* ---------- 9. Footer : présentation sur toute la largeur, puis deux colonnes de liens ---------- */
@media (max-width: 599px) {
  .lw-footer__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 20px; }
  .lw-footer__col:first-child { grid-column: 1 / -1; }
}

/* ---------- 10. Citations plus légères, H1 réduits sur très petit écran ---------- */
@media (max-width: 599px) {
  .lw-avis__quote, .lw-xp-quote blockquote p, .lw-rf-avis blockquote p { font-size: 1.25rem; line-height: 1.4; }
}
@media (max-width: 359px) {
  .lw-hero__title { font-size: 2.125rem; }
  .lw-xp-hero__title, .lw-xp--hub .lw-xp-hero__title--hub { font-size: 1.75rem; }
}

/* ---------- 5 bis. Studio, comparatif : freelance et agence réduits à une ligne (nom + force), puis la carte Lille Web complète (Pierre, 16/10).
   Côte à côte essayé d'abord : « L'accompagnement » débordait de la carte à 390 et 320. ---------- */
@media (max-width: 1023px) {
  .lw-st-cols { row-gap: 8px; }
  .lw-st-col:not(.lw-st-col--lw) { display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 14px; align-items: center; padding: 14px 16px; }
  .lw-st-col:not(.lw-st-col--lw) .lw-st-col__icon { grid-row: 1 / 3; width: 40px; height: 40px; margin: 0; }
  .lw-st-col:not(.lw-st-col--lw) .lw-st-col__icon svg { width: 22px; height: 22px; }
  .lw-st-col:not(.lw-st-col--lw) .lw-st-col__nom { font-size: 1.125rem; line-height: 1.25; }
  .lw-st-col:not(.lw-st-col--lw) .lw-st-col__force { margin-top: 2px; padding-bottom: 0; border-bottom: 0; font-size: 1rem; line-height: 1.3; }
  .lw-st-col:not(.lw-st-col--lw) .lw-st-col__list { display: none; } /* repris mot pour mot ou en mieux dans la carte Lille Web */
  .lw-st-cols > .lw-st-op { font-size: 2rem; }
}

/* ---------- Retours de Pierre sur iPhone (16/10) ---------- */
@media (max-width: 1023px) {
  /* Home : la carte Suivi est hors de la grille des trois offres, elle collait à la carte Plateforme (marge 0) : même écart que la grille */
  .lw-offre__card--suivi { margin-top: 20px; }
  /* Home, méthode : pastilles d'engagement de même largeur (celle de la plus longue), puces alignées */
  .lw-methode__chips { display: grid; grid-template-columns: fit-content(100%); justify-content: center; }
  .lw-methode__chips li { justify-content: flex-start; text-align: left; }
  .lw-methode__chips li:last-child { grid-column: auto; } /* la règle ordinateur (span 2) créait une seconde colonne */
}
@media (max-width: 599px) {
  /* Home, hero (Pierre, iPhone 16/10) : le rond crème s'arrêtait sur la fin du texte d'intro (et dès le titre à 320 px, car sa
     position suivait la hauteur du hero). Il est maintenant calé par le bas : il passe sous la note Google, avant le carrousel,
     comme sur ordinateur où il entoure tout le texte du hero. Écart mesuré : 530 px entre le bas de la note et le bas du hero à 320, 390 et 430. */
  .lw-hero::before { top: auto; bottom: 490px; width: max(200vw, 780px); height: max(200vw, 780px); }
}