/*
 * (c) 2026 Myphotoagency - 06-07/11/2026 - correctifs réservés au téléphone et à la tablette portrait (≤ 900 px).
 * Chargé avec media="(max-width: 900px)" ET chaque règle est dans un @media ≤ 900 px : l'affichage bureau
 * ne peut pas bouger (contrôle : empreinte des styles calculés de chaque élément en 1280/1440/1920, avant/après).
 * Sources : panel de 100 visiteurs mobiles simulés (3 passes) + mesures automatiques 360/390/412 px.
 * Skill : aucune (travail fait sans skill). Reste à valider par Antoine : rendu sur vrai téléphone.
 */

/* ── 1. En-tête : la barre utilitaire passait sur 2 lignes (en-tête de 120 px pour 100 réservés, sur-titres
       des héros coupés). Sur téléphone, ses liens passent dans le menu ; l'en-tête = la seule barre logo. ── */
@media (max-width: 900px) {
  :root { --hdr-h: 66px; }
  .site-header .topbar { display: none; }
  .admin-bar { --hdr-h: 66px; }
}
/* Tablette portrait (769-900 px) : la navigation bureau s'y écrasait (liens sur deux lignes, bouton devis plus
   haut que l'en-tête) ; elle passe au même mode menu + barre basse que le téléphone. */
@media (max-width: 900px) {
  .nav-links { display: none; }
  .hamburger { display: flex; }
  .mobile-menu { display: block; }
  .mobile-devis { display: block; }
  .linguise_switcher { display: none !important; }
}
@media (max-width: 900px) {
  .hamburger { width: 48px; height: 48px; padding: 12px; margin-right: -12px; justify-content: center; align-items: center; }
  .close-menu { width: 48px; height: 48px; top: 10px; right: 12px; display: flex; align-items: center; justify-content: center; }

  /* Menu : plein écran, regroupé (titres ajoutés par mobile.js), bouton devis en tête. */
  .mobile-menu { box-sizing: border-box; width: 100%; max-width: none; right: -110%; padding: 68px 24px 32px; display: flex; flex-direction: column; visibility: hidden; transition: right .3s cubic-bezier(.4,0,.2,1), visibility 0s linear .3s; }
  .mobile-menu.open { right: 0; visibility: visible; transition: right .3s cubic-bezier(.4,0,.2,1), visibility 0s; }
  .mobile-menu a { font-size: 16px; padding: 12px 0; }
  .mobile-menu .mob-cta { order: -1; margin: 0 0 8px; padding: 15px 0; font-size: 16px; }
  .mobile-menu .mob-grp { order: 0; margin: 20px 0 2px; font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--rose); }
  .mobile-menu .mob-sec { font-weight: 600; font-size: 15px; color: var(--ink-body, #4a5568); }
  .mobile-menu .mob-langs { margin-top: 20px; }

  /* Barre basse « Demander un devis » : ne masque plus la fin du pied de page, se distingue des sections roses,
     et s'efface quand le dernier appel à l'action (ou le pied de page) est à l'écran (mobile.js). */
  .mobile-devis { padding: 15px 14px calc(15px + env(safe-area-inset-bottom, 0px)); box-shadow: 0 -1px 0 rgba(255,255,255,.55), 0 -6px 18px rgba(20,30,50,.18); transition: transform .25s ease; }
  .mobile-devis.mob-cache { transform: translateY(110%); }
  .site-footer { padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px)) !important; }
  body.page-id-merci .mobile-devis, body.mob-merci .mobile-devis { display: none; }
}

/* ── 2. Débordements à droite : un titre ne sort jamais de sa colonne ; textes justifiés remis à gauche. ── */
@media (max-width: 900px) {
  .post-body p, .post-body li { text-align: left; -webkit-hyphens: manual; hyphens: manual; }
  .wp-block-post-title { -webkit-hyphens: manual; hyphens: manual; }
  .faq-card { min-width: 0; max-width: 100%; box-sizing: border-box; }
}
@media (max-width: 600px) {
  .faq-card { padding: 28px 20px; }
  .wp-block-post-title { font-size: clamp(28px, 8.4vw, 40px); }
}

/* ── 3. Bandeau bleu des savoir-faire (.shoot) : hauteur réglée par mobile.js sur le texte réel
       (le texte blanc sortait du bleu et devenait invisible sur le fond clair). ── */
@media (max-width: 900px) {
  .shoot-bande.mob-ajuste { height: var(--mob-bande-h) !important; }
}

/* ── 4. Barres d'onglets et de filtres qui défilent : flèche « › » pleine, posée au bord droit tant qu'il reste
       des onglets à voir (classe ajoutée par mobile.js). Couleur pleine, pas de dégradé. ── */
@media (max-width: 900px) {
  .mob-defile { position: relative; }
  .mob-defile-fl { position: absolute; right: 0; top: 0; z-index: 3; width: 56px; height: 44px; border: 0; border-radius: 0; background: var(--mob-fond, #fff); display: none; align-items: center; justify-content: flex-end; padding: 0 6px 0 0; cursor: pointer; }
  .mob-defile-fl span { width: 36px; height: 36px; border-radius: 50%; background: var(--blue-deep); color: #fff; font: 800 22px/1 var(--font); display: flex; align-items: center; justify-content: center; padding: 0 0 3px 2px; box-sizing: border-box; }
  .mob-defile.peut-defiler .mob-defile-fl { display: flex; }
  .mag-filters { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-left: -20px; margin-right: -20px; padding: 2px 20px 6px; scroll-padding: 0 20px; }
  .mag-filters::-webkit-scrollbar { display: none; }
  .mag-chip { flex: none; }
}

/* ── 5. Carrousels « Comment ça marche » (étapes) : la carte suivante dépassait avec des bouts de mots.
       Elle reste visible (on comprend qu'on peut glisser) mais s'estompe ; points de position sous le carrousel. ── */
@media (max-width: 860px) {
  .fusion .fusion-cards.mob-suivi .fusion-card:not(.mob-vue) > * { visibility: hidden; }
  .mob-points { display: flex; justify-content: center; gap: 4px; margin-top: 6px; }
  .mob-points button { width: 32px; height: 32px; border: 0; padding: 0; background: none; cursor: pointer; display: flex; align-items: center; justify-content: center; }
  .mob-points button span { display: block; width: 8px; height: 8px; border-radius: 4px; background: #cfcac2; transition: width .2s, background .2s; }
  .mob-points button.is-on span { width: 24px; background: var(--rose); }
  .mob-points--compte { font: 800 13px/1 var(--font); color: var(--blue-deep); padding: 10px 0; letter-spacing: .04em; }
  .testimonials .mob-points--compte { color: #fff; }
  .fusion--dark .mob-points button span { background: rgba(255,255,255,.35); }
  .fusion--dark .mob-points button.is-on span { background: var(--rose); }
}

/* ── 6. Chiffres clés des héros : trois tuiles de 105 px avec des légendes de 10-11 px illisibles.
       Sous 600 px : une ligne par chiffre (chiffre à gauche, légende à droite, 13 px). ── */
@media (max-width: 600px) {
  .ph-hero:not(.ph-hero--plein) .immo-hero-kpis { grid-template-columns: minmax(0, 1fr); gap: 8px; max-width: none; }
  .ph-hero:not(.ph-hero--plein) .immo-hero-kpi { display: flex; align-items: center; gap: 14px; padding: 11px 16px; }
  .ph-hero:not(.ph-hero--plein) .immo-hero-kpi-num { flex: 0 0 86px; font-size: 24px; white-space: nowrap; }
  .ph-hero:not(.ph-hero--plein) .immo-hero-kpi-label { margin-top: 0; font-size: 13px; line-height: 1.3; letter-spacing: .02em; }
  .hero-kpi-label, .hero--b .hero-kpi-label, .hi-map .hero-kpi-label, .hi-cadre-card .hero-kpi-label { font-size: 12px; }
  .immo-hero-kpi-label { font-size: 12.5px; }
}

/* ── 7. Notre agence : nom, poste et surnom écrits sur les visages. Sur téléphone, la légende passe sous la photo,
       sur un aplat bleu (la carte reste à retourner pour lire la présentation). ── */
@media (max-width: 600px) {
  .na-tm { aspect-ratio: 3 / 5; }
  .na-tm-front { display: flex; flex-direction: column; background: var(--blue-deep); }
  .na-tm-front img { height: 58%; flex: none; }
  .na-tm-front::after { display: none; }
  .na-tm-cap { position: static; flex: 1; padding: 10px 12px 12px; justify-content: flex-start; }
  .na-tm-cap b { font-size: 15.5px; }
  main .na-tm-role, main .na-tm-nick { font-size: 13px !important; line-height: 1.3; }
  .na-tm-role { color: rgba(255,255,255,.85); }
}

/* ── 8. Notre agence, « Notre ADN » : trois cartes de 292 px pour une icône et un mot (le texte n'était qu'au dos).
       Sur téléphone : recto et verso l'un sous l'autre, sans retournement. ── */
@media (max-width: 820px) {
  .na-fc { width: 100%; max-width: none; height: auto !important; perspective: none; cursor: default; }
  .na-fc-in { position: static !important; height: auto !important; transform: none !important; transition: none; }
  .na-fc-face { position: relative !important; inset: auto; transform: none !important; opacity: 1 !important; -webkit-backface-visibility: visible; backface-visibility: visible; box-shadow: none; transition: none; }
  .na-fc { border-radius: 18px; overflow: hidden; box-shadow: 0 10px 30px rgba(34,49,90,.16); }
  .na-fc-front { flex-direction: row !important; justify-content: flex-start !important; gap: 14px !important; padding: 18px 22px !important; border-radius: 0 !important; }
  .na-fc-front h3 { font-size: 22px; }
  .na-fc-ico { width: 44px; height: 44px; margin: 0; }
  .na-fc-ico svg { width: 34px; height: 34px; }
  .na-fc-back { border-radius: 0 !important; padding: 18px 22px 22px !important; align-items: flex-start !important; text-align: left !important; justify-content: flex-start !important; }
  .na-fc-back .na-fc-tag { display: none; }
}

/* ── 9. Cibles tactiles : points des carrousels photo et segments des diaporamas agrandis sans changer le dessin ;
       liens du pied de page plus espacés. ── */
@media (max-width: 900px) {
  .sl-dots button { position: relative; }
  .sl-dots button::before { content: ""; position: absolute; left: -6px; right: -6px; top: -14px; bottom: -14px; }
  .site-footer--g5 .footer-list { gap: 0; }
  .site-footer--g5 .footer-list a { display: block; padding: 8px 0; }
  .site-footer--g5 .footer-legal { gap: 4px 18px; }
  .site-footer--g5 .footer-legal a { display: inline-block; padding: 8px 0; font-size: 13px; }
  .site-footer--g5 .footer-copy { font-size: 13px; }
}

/* ── 10. Lisibilité : petites légendes et étiquettes relevées à 12-13 px ; étiquettes du magazine sur aplat. ── */
@media (max-width: 900px) {
  .test-role { font-size: 13px; color: rgba(255,255,255,.78); }
  .mag-badge { background: var(--blue-deep); border-color: var(--blue-deep); -webkit-backdrop-filter: none; backdrop-filter: none; font-size: 11.5px; }
  .mag-date { font-size: 12px; }
  .res-badge { font-size: 12px; }
  .cs-card .cs-big-sub { font-size: 12px; }
}

/* ── 11. Hub « Nos secteurs / Nos services » : cartes à 65 % de la largeur (grille 2 colonnes forcée à 1 avec
       des marges) ; pleine largeur sous 600 px. ── */
@media (max-width: 600px) {
  .cs-grid { padding: 0; gap: 18px; }
}

/* ── 12. Carrousels photo des cartes métiers : compteur « 3 / 8 » (mobile.js) au lieu de la rangée de points
       recouverte par les flèches ; on glisse au doigt. ── */
@media (max-width: 900px) {
  .res-metier-slide .res-metier-dots { display: none; }
  .res-metier-slide .mob-compte { position: absolute; left: 14px; bottom: 22px; z-index: 3; padding: 6px 11px; border-radius: 100px; background: var(--blue-deep); color: #fff; font: 800 13px/1 var(--font); letter-spacing: .02em; pointer-events: none; }
  .res-metier-nav { right: 14px; bottom: 14px; gap: 10px; }
  .res-metier-nav button { width: 44px; height: 44px; font-size: 22px; }
}

/* ── 13. Bloc final rose : les pastilles de réassurance restaient sur une ligne et touchaient le bord. ── */
@media (max-width: 600px) {
  .cta-m3-re li { white-space: normal; }
}

/* ── 14. Onglets des sections métiers (secteurs, expertises) : le défilement latéral derrière une flèche coupait
       les libellés en plein mot (passes 1 et 2 du panel). Sur téléphone ils passent à la ligne, tous visibles. ── */
@media (max-width: 900px) {
  .metiers--bandes .mb-anchors { flex-wrap: wrap !important; justify-content: center !important; gap: 0 18px !important; overflow: visible !important; margin-left: 0 !important; margin-right: 0 !important; padding: 0 !important; }
  .metiers--bandes .mb-anchors a { flex: 0 1 auto !important; white-space: normal !important; text-align: center; font-size: 15px !important; padding: 12px 0 !important; line-height: 1.25; }
}

/* ── 15. Myphotomagazine : filtres remplacés par une liste déroulante (mobile.js) ; cartes compactes (vignette à
       gauche, titre à droite) au lieu de 24 grandes cartes sur 13 écrans ; pagination qui passe à la ligne. ── */
@media (max-width: 900px) {
  .mag-filters.mob-select-ok { display: none; }
  .mob-select { display: block; width: 100%; margin: 0 0 22px; }
  .mob-select label { display: block; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--rose); margin: 0 0 6px; }
  .mob-select select { width: 100%; height: 48px; padding: 0 14px; border: 1.5px solid var(--line); border-radius: 10px; background: #fff; color: var(--blue-deep); font: 700 16px var(--font); }
  .mag-pages { row-gap: 8px; }
}
@media (max-width: 600px) {
  .mag-grid { grid-template-columns: minmax(0, 1fr) !important; gap: 12px !important; }
  .mag-card:not(.is-featured) { flex-direction: row; align-items: stretch; border-radius: 12px; }
  .mag-card:not(.is-featured) .mag-media { flex: 0 0 36%; aspect-ratio: auto; min-height: 112px; }
  .mag-card:not(.is-featured) .mag-badge { display: none; }
  .mag-card:not(.is-featured) .mag-body { padding: 12px 14px; gap: 5px; }
  .mag-card:not(.is-featured) .mag-title { font-size: 15.5px; -webkit-line-clamp: 4; }
  .mag-card:not(.is-featured) .mag-excerpt, .mag-card:not(.is-featured) .mag-readlink { display: none; }
}

/* ── 16. Cartes métiers (.hs-b) : la grille se calait sur le mot le plus long du titre (« trombinoscopes »,
       « restauration collective ») et la carte sortait de l'écran à 360 px. Colonne bornée, titre un cran plus petit. ── */
@media (max-width: 900px) {
  .hs-liste { grid-template-columns: minmax(0, 1fr); }
  .res-metier { min-width: 0; }
  .res-metier-band, .res-metier-band--flip { grid-template-columns: minmax(0, 1fr) !important; min-width: 0; }
  .res-metier-band > * { min-width: 0; }
  .hs-b, .hs-txt, .hs-ph { min-width: 0; }
  .hs-presta .hs-b { min-height: 0 !important; }
  .hs-presta .hs-ph { min-height: 240px; }
  /* Accueil, « Nos secteurs d'expertise » : seule la carte de l'onglet actif occupe la place (plus de grand vide
     sous les cartes courtes, la case prenait la hauteur de la plus haute). */
  .home-secteurs .hs-b:not(.is-on) { display: none; }
}
@media (max-width: 600px) {
  #secteurs .hs-txt h3, .hs-txt h3 { font-size: 24px !important; line-height: 1.2; }
}

/* ── 17. Chiffres clés : même mise en ligne pour tous les héros (Nos photographes : « PHOTOGRAPHE » sortait de sa case). ── */
@media (max-width: 600px) {
  .hi-map .hero-kpis { grid-template-columns: minmax(0, 1fr) !important; gap: 8px; }
  .hi-map .hero-kpi { display: flex; align-items: center; gap: 14px; padding: 10px 16px; }
  .hi-map .hero-kpi-num { flex: 0 0 96px; font-size: 22px; white-space: nowrap; }
  .hi-map .hero-kpi-label { font-size: 13px; margin-top: 0; }
  .immo-hero-kpis { grid-template-columns: minmax(0, 1fr) !important; gap: 8px !important; }
  .immo-hero-kpi { display: flex !important; align-items: center; gap: 14px; padding: 11px 16px !important; }
  .immo-hero-kpi-num { flex: 0 0 86px; white-space: nowrap; }
  .immo-hero-kpi-label { margin-top: 0 !important; font-size: 13px !important; line-height: 1.3; }
}

/* ── 18. Diaporama des héros : le titre de la diapositive était coupé par des points de suspension. ── */
@media (max-width: 600px) {
  .sx-hero-label { white-space: normal; overflow: visible; text-overflow: clip; font-size: 15px; line-height: 1.2; }
}

/* ── 19. Pied de page : la rangée de pictos des prestations doublait la liste « Nos prestations » (un tiers d'écran). ── */
@media (max-width: 600px) {
  .footer-pictos, .site-footer--g5 .footer-pictos { display: none !important; }
}

/* ── 20. Témoignages : le défilé continu (texte qui bouge) devient une rangée à glisser au doigt, une carte par
       écran, sans les doublons du défilé (marqués aria-hidden dans le code). ── */
@media (max-width: 900px) {
  .test-slider-wrap { overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; padding: 0 20px 8px; scroll-padding: 0 20px; }
  .test-slider-wrap::-webkit-scrollbar { display: none; }
  .test-slider { animation: none !important; transform: none !important; width: max-content; gap: 14px; }
  .test-slider { align-items: flex-start; gap: 20px; }
  .test-card { scroll-snap-align: start; min-width: 0 !important; max-width: none !important; width: calc(100vw - 40px); box-sizing: border-box; padding: 24px 22px; }
  .testimonials .mob-points button span { background: rgba(255,255,255,.35); }
  .testimonials .mob-points button.is-on span { background: var(--rose); }
  .test-card[aria-hidden="true"] { display: none; }
  .test-person { flex-direction: column; align-items: flex-start; gap: 2px; }
}

/* ── 21. Finitions passe 3 : onglet actif repérable, titre de diapositive sans coupure en milieu de mot,
       générique du podcast lisible (blanc plein sur le rose). ── */
@media (max-width: 900px) {
  .metiers--bandes .mb-anchors a.is-on { color: var(--rose) !important; }
  .sx-hero-label { -webkit-hyphens: manual; hyphens: manual; padding-right: 10px; }
  .na-moment-credits { color: #fff !important; text-align: left; font-size: 14px; line-height: 1.6; }
}

/* ── 22. Cartes métiers : double retrait (section 20 px + conteneur 24 px) = colonne de 250 px sur un 360. Un seul
       retrait de 16 px ; lecteur podcast à la largeur de l'écran, au doigt, sans flèches posées sur les cartes. ── */
@media (max-width: 600px) {
  .res-sec.metiers--bandes { padding-left: 0 !important; padding-right: 0 !important; }
  .res-sec.metiers--bandes > .container { padding-left: 16px !important; padding-right: 16px !important; }
  .na-pods-nav { display: none !important; }
  .na-pods { padding: 0; }
  .na-pods-track { padding-left: 16px; padding-right: 16px; scroll-padding: 0 16px; }
}

/* ── 23. Grilles « Regardez nos vidéos » / « Entrez dans nos visites » : l'étiquette client recouvrait le bouton
       lecture sur des vignettes de 150 px. Bouton plus petit dans le coin haut droit, étiquette sur deux lignes. ── */
@media (max-width: 600px) {
  .tgr-grid { gap: 10px; }
  .tgr-play { left: auto; right: 8px; top: 8px; transform: none; width: 34px; height: 34px; }
  .tgr-v:hover .tgr-play { transform: none; }
  .tgr-play svg { width: 15px; height: 15px; }
  .tgr-cli { left: 6px; bottom: 6px; max-width: calc(100% - 12px); font-size: 12px; padding: 4px 8px; white-space: normal; line-height: 1.2; }
}

/* ── 24. Pages plus courtes (blocs repliés par mobile.js, rien n'est retiré du contenu). ── */
@media (max-width: 900px) {
  .mob-plus { display: inline-flex; align-items: center; gap: 8px; margin: 10px 0 4px; padding: 10px 0; border: 0; background: none; color: var(--rose); font: 800 15px/1.2 var(--font); cursor: pointer; text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 2px; }
  .mob-plus--equipe { display: flex; width: 100%; justify-content: center; margin: 18px 0 0; padding: 14px 0; border: 2px solid var(--blue-deep); border-radius: 10px; color: var(--blue-deep); text-decoration: none; }
  .mob-plus.mob-plus--clair { color: #fff; }
  /* a) cartes métiers */
  .mob-pli:not(.mob-ouvert) > p:first-of-type { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  .mob-pli:not(.mob-ouvert) > p ~ p, .mob-pli:not(.mob-ouvert) > ul, .mob-pli:not(.mob-ouvert) > .res-metier-list, .mob-pli:not(.mob-ouvert) > .shoot-cta, .mob-pli:not(.mob-ouvert) > .cs-link, .mob-pli:not(.mob-ouvert) > .btn-primary, .mob-pli:not(.mob-ouvert) > .sfc-tags { display: none !important; }
  .res-metier-slide { min-height: 230px !important; }
  /* b) intros */
  .mob-coupe:not(.mob-ouvert) { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; margin-bottom: 0 !important; }
  .mob-plus--intro { margin: 4px 0 16px; }
  /* c) équipe */
  .na-team-grid.mob-pli:not(.mob-ouvert) > .na-tm:nth-child(n+7) { display: none; }
  /* d) pied de page */
  .mob-pied-titre { display: flex; width: 100%; justify-content: space-between; align-items: center; padding: 14px 0; border: 0; border-bottom: 1px solid rgba(255,255,255,.16); background: none; color: #fff; font: 800 13px/1.2 var(--font); letter-spacing: .1em; text-transform: uppercase; cursor: pointer; }
  .mob-pied-titre i { font-style: normal; font-size: 22px; font-weight: 400; }
  .footer-list.mob-pli > h4 { display: none; }
  .footer-list.mob-pli:not(.mob-ouvert) > a { display: none !important; }
  .footer-list.mob-pli.mob-ouvert > a:first-of-type { margin-top: 6px; }
  .site-footer--g5 .footer-main { grid-template-columns: minmax(0, 1fr) !important; gap: 0 !important; }
  .site-footer--g5 .footer-brand { margin-bottom: 14px; }
}

/* ── 25. Encore plus court : cartes métiers resserrées, bloc Myphotomagazine en liste compacte (vignette + titre,
       comme le blog), mosaïque décorative de Notre agence réduite. ── */
@media (max-width: 600px) {
  .res-metier-txt, .metiers--bandes .hs-txt { padding: 22px 20px 18px !important; }
  .res-metier-slide, .hs-ph.res-metier-slide { min-height: 200px !important; }
  .mob-pli:not(.mob-ouvert) > p:first-of-type { -webkit-line-clamp: 2; }
  .res-metier { gap: 16px; }
  .resources .res-grid { grid-template-columns: minmax(0, 1fr) !important; gap: 12px !important; }
  .resources .res-card { display: flex !important; flex-direction: row !important; align-items: stretch; border-radius: 12px; }
  .resources .res-card-img { flex: 0 0 36%; aspect-ratio: auto !important; min-height: 108px; height: auto !important; }
  .resources .res-card-img .res-badge { display: none; }
  .resources .res-card-body { padding: 12px 14px !important; }
  .resources .res-title { font-size: 15.5px !important; margin: 0 !important; }
  .resources .res-excerpt { display: none; }
  .na-sp-media--mosaique { min-height: 0 !important; height: 220px; overflow: hidden; }
}

/* ── 26. Retours passe 4 : rangée de témoignages à la hauteur de la carte affichée (mobile.js), titres du
       Myphotomagazine en entier, trait rose de la liste des savoir-faire dans la carte. ── */
@media (max-width: 900px) {
  .testimonials .test-slider-wrap { transition: height .25s ease; overflow-y: hidden; }
  .shoot-liste { padding-left: 22px; }
  .shoot-liste button[role="tab"][aria-selected="true"]::before { left: -18px; width: 12px; }
}
@media (max-width: 600px) {
  .resources .res-title, .mag-card:not(.is-featured) .mag-title { display: block !important; -webkit-line-clamp: unset !important; overflow: visible !important; }
}

/* ── 27. Retours passe 4 (verbatims) : « carrousels dans les carrousels », « Lire la suite partout », « grand vide
       avec 1/31 », « surlignage rose en escalier ».
       - cartes métiers : une seule photo, sans flèches ni compteur (le doigt peut encore la faire glisser) ;
       - témoignages : les 3 premiers avis empilés, sans carrousel ;
       - étapes : la phrase clé passe en gras rose au lieu d'un surlignage découpé ligne par ligne. ── */
@media (max-width: 600px) {
  .res-metier-slide .res-metier-nav, .res-metier-slide .mob-compte, .res-metier-slide .res-metier-dots { display: none !important; }
  .testimonials .test-slider-wrap { overflow: visible !important; scroll-snap-type: none; padding: 0 16px; } /* 09/11 : hauteur laissée à mobile.js (slider) */
  .testimonials .test-slider { flex-direction: column; width: auto !important; gap: 14px; }
  .testimonials .test-card { width: auto !important; }
  .testimonials .test-card:not([aria-hidden="true"]) ~ .test-card:not([aria-hidden="true"]) ~ .test-card:not([aria-hidden="true"]) ~ .test-card { display: none; }
  .testimonials .mob-points { display: none !important; }
  .fusion .fusion-card b, .fusion .fusion-card strong, .fusion.hl-go .fusion-card b, .fusion.hl-go .fusion-card strong { background: none !important; background-size: 0 0 !important; color: var(--rose) !important; font-weight: 800; padding: 0 !important; }
}

/* ── 28. Lisibilité presbytes : listes à coches et points de carrousel plus marqués. ── */
@media (max-width: 900px) {
  .res-metier-list li { font-size: 15px; color: var(--ink-body, #3b4350); }
  .hs-b--prestige .res-metier-list li, .hs-b--location .res-metier-list li, .res-metier-band--prestige .res-metier-list li, .res-metier-band--location .res-metier-list li { color: #fff; }
  .mob-points button span { width: 10px; height: 10px; border-radius: 5px; }
  .mob-points button.is-on span { width: 28px; }
}

/* ── 29. Retours passe 5 : magazine en pleine largeur (titres sur 4-5 lignes dans une colonne de 290 px) ;
       vidéos de témoins : la carte voisine n'affiche plus de bouts de mots ; lecteurs podcast à leur taille réelle. ── */
@media (max-width: 600px) {
  .resources { padding-left: 0 !important; padding-right: 0 !important; }
  .resources .container { padding-left: 16px !important; padding-right: 16px !important; }
  .resources .res-card-img { flex-basis: 30%; }
  .ncc-trk.mob-suivi .ncc-k:not(.mob-vue) > * { visibility: hidden; }
  .ncc-cnt, .ncc .mob-points { display: none !important; }
  .na-pod { width: 320px !important; height: 390px !important; }
  .na-pod iframe { transform: none !important; }
}

/* ── 30. Onglets lus comme des boutons : pastilles bordées, l'actif plein (rose). Filtres de la grille vidéos
       sur plusieurs lignes. Accueil : mosaïque réduite pour que le titre soit dans le premier écran. ── */
@media (max-width: 900px) {
  .metiers--bandes .mb-anchors { gap: 8px !important; border-bottom: 0 !important; justify-content: center !important; }
  .metiers--bandes .mb-anchors a { padding: 10px 14px !important; border: 1.5px solid var(--line) !important; border-radius: 100px !important; background: #fff !important; font-size: 14px !important; color: var(--blue-deep) !important; }
  .metiers--bandes .mb-anchors a.is-on { background: var(--rose) !important; border-color: var(--rose) !important; color: #fff !important; }
  .metiers--bandes .mb-anchors a::after { display: none !important; }
  .tgr-ong { flex-wrap: wrap !important; overflow: visible !important; justify-content: flex-start; gap: 8px !important; }
  .tgr-ong { border-bottom: 0 !important; }
  .tgr-ong button { flex: 0 1 auto !important; white-space: normal !important; padding: 9px 13px !important; border: 1.5px solid var(--line) !important; border-radius: 100px; background: #fff; font-size: 14px; }
  .tgr-ong button[aria-pressed="true"] { background: var(--blue-deep); border-color: var(--blue-deep) !important; color: #fff; }
  .tgr-ong button[aria-pressed="true"] sup { color: #fff; }
  .tgr-ong button::after { display: none !important; }
}
@media (max-width: 600px) {
  .hero--b .hb-cols { height: 150px !important; }
}

/* ── 31. Carrousels remplacés par des listes sur téléphone (plainte récurrente des 5 passes : « on ne sait pas ce
       qui glisse », « une flèche seule », « des bouts de la carte suivante ») :
       - « Comment ça marche » : les étapes empilées, toutes visibles ;
       - « 3 raisons » : les raisons empilées, sans flèche ni barre de progression. ── */
@media (max-width: 600px) {
  .fusion .fusion-cards { display: flex !important; flex-direction: column !important; overflow: visible !important; grid-auto-flow: row !important; gap: 12px !important; margin-left: 0 !important; margin-right: 0 !important; padding: 0 !important; scroll-snap-type: none !important; }
  .fusion .fusion-card { width: auto !important; padding: 18px 18px !important; }
  .fusion .fusion-card p { max-width: none !important; }
  .fusion .fusion-cards.mob-suivi .fusion-card:not(.mob-vue) > * { visibility: visible !important; }
  .fusion .mob-points { display: none !important; }
  .rsc .rsc-track { display: flex !important; flex-direction: column !important; gap: 28px; overflow: visible !important; min-height: 0 !important; }
  .rsc .rsc-sl { position: static !important; opacity: 1 !important; transform: none !important; pointer-events: auto !important; flex: none !important; }
  .rsc .rsc-nav, .rsc .rsc-bar, .rsc .rsc-ar, .rsc .rsc-cnt { display: none !important; }
}

/* ── 32. Retours passe 6 : pastilles = vrais filtres (une carte métier à la fois, mobile.js) ; texte des cartes
       corail plus épais ; arguments du bloc final sans bordure (ils ressemblaient à des boutons). ── */
@media (max-width: 600px) {
  .mob-filtre .mob-cache-carte { display: none !important; }
  .hs-b--location .hs-txt p, .res-metier-band--location .res-metier-txt p, .hs-b--location .res-metier-list li, .res-metier-band--location .res-metier-list li { font-weight: 600; }
  .cta-m3-re li { border: 0 !important; background: none !important; padding: 2px 0 !important; box-shadow: none !important; }
  .cta-m3-re { gap: 8px !important; }
}

/* ── 33. Retours passe 6 : sur-titres éclaircis sur fond sombre ; accroches « On aurait pu… » en texte courant
       (rose gras sur 3 à 5 lignes fatiguait la lecture) ; titres du magazine qui ne sortent plus de l'écran ;
       textes gris des sections sombres plus contrastés. ── */
@media (max-width: 900px) {
  .mob-label-clair, .shoot .section-label { color: #FFA5AF !important; }
}
@media (max-width: 600px) {
  .rsc-tx em { display: block; color: inherit !important; font-weight: 700 !important; font-style: normal; border-left: 3px solid var(--rose); padding-left: 12px; }
  .resources .res-title { overflow-wrap: normal; -webkit-hyphens: manual; hyphens: manual; }
  .resources .res-card-body { min-width: 0; flex: 1 1 auto; }
  .test-role { color: rgba(255,255,255,.85) !important; }
}

/* ── 34. Retours passe 7 : liens légaux du pied plus grands et espacés ; listes à coches plus contrastées. ── */
@media (max-width: 600px) {
  .site-footer--g5 .footer-legal { gap: 6px 22px !important; }
  .site-footer--g5 .footer-legal a { font-size: 14px !important; padding: 10px 0 !important; color: rgba(255,255,255,.88) !important; }
  main .res-metier-list li { font-size: 15px !important; color: #2f3747; }
  main .hs-b--prestige .res-metier-list li, main .hs-b--location .res-metier-list li, main .res-metier-band--prestige .res-metier-list li, main .res-metier-band--location .res-metier-list li { color: #fff; }
}

@media (max-width: 900px) {
  .na-moment-credits.mob-generique-ok { display: none !important; }
  .mob-generique { list-style: none; margin: 18px 0 0; padding: 0 20px; display: grid; gap: 6px; color: #fff; font-size: 14.5px; line-height: 1.4; }
  .mob-generique li { padding-left: 14px; position: relative; }
  .mob-generique li::before { content: ""; position: absolute; left: 0; top: .6em; width: 6px; height: 6px; border-radius: 50%; background: #fff; }
}

/* ── 35. Bloc « Nos savoir-faire / Nos prestations » : la liste d'onglets ne se lisait pas comme des boutons
       (actif signalé par un tiret seulement). Pastilles bordées, l'actif plein, comme les autres onglets. ── */
@media (max-width: 900px) {
  .shoot-liste { display: flex; flex-wrap: wrap; gap: 8px; padding: 14px 18px 20px !important; list-style: none; }
  .shoot-liste li { margin: 0; }
  .shoot-liste button[role="tab"] { padding: 9px 14px !important; border: 1.5px solid var(--line) !important; border-radius: 100px; font-size: 14.5px !important; line-height: 1.25; background: #fff; color: var(--blue-deep); }
  .shoot-liste button[role="tab"][aria-selected="true"] { background: var(--rose) !important; border-color: var(--rose) !important; color: #fff !important; }
  .shoot-liste button[role="tab"][aria-selected="true"]::before { display: none !important; }
  .shoot-onglet { padding: 18px 18px 0 !important; font-size: 17px !important; }
}

/* ── 36. Hub /shooting/ : 13 grandes cartes = 8 écrans. Lignes compactes (vignette à gauche, titre + 3 lignes),
       voile des photos allégé. Étapes « Comment ça marche » pleine largeur, texte à gauche. ── */
@media (max-width: 600px) {
  .hub-enjeux .cs-grid { gap: 12px !important; }
  .hub-enjeux .cs-card { flex-direction: row !important; align-items: stretch; border-radius: 12px; }
  .hub-enjeux .cs-card-img { flex: 0 0 32%; aspect-ratio: auto !important; min-height: 120px; }
  .hub-enjeux .cs-card-img::after { background: rgba(16,28,55,.12) !important; }
  .hub-enjeux .cs-card-img .cs-cat { display: none; }
  .hub-enjeux .cs-card-body { padding: 12px 14px !important; gap: 4px !important; min-width: 0; }
  .hub-enjeux .cs-title { font-size: 17px !important; margin: 0 !important; }
  .hub-enjeux .cs-result { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; font-size: 14.5px !important; line-height: 1.45 !important; margin: 0 !important; }
  .hub-enjeux .cs-link { font-size: 14px !important; }
  .fusion .fusion-inner, .fusion .fusion-scope { max-width: none !important; width: auto !important; }
  .fusion .fusion-inner { padding-left: 16px !important; padding-right: 16px !important; }
  .fusion .fusion-card { text-align: left !important; }
  .fusion .fusion-card ul { margin: 0 !important; }
}

/* ── 37. Retours passe 8 : textes blancs sur rose (héro et podcast de Notre agence) plus épais et plus grands. ── */
@media (max-width: 600px) {
  .hi-rose p, .hi-photo.hi-rose p { font-weight: 600 !important; font-size: 17px !important; line-height: 1.55 !important; }
  .mob-generique { font-size: 15.5px; font-weight: 600; }
}

/* ── 38. Pages de téléchargement (infographies, baromètre) : formulaire avant la couverture, pas de barre
       « Demander un devis » qui concurrence « Télécharger ». Légendes des chiffres et citations plus lisibles. ── */
@media (max-width: 900px) {
  body:has(.lm-page) .mobile-devis { display: none !important; }
  .lm-hero-grid { display: flex !important; flex-direction: column; }
  .lm-hero-grid .lm-visual { order: 2; max-height: 260px; overflow: hidden; }
  .lm-hero-grid .lm-copy { order: 1; }
  .test-quote { font-size: 16px !important; line-height: 1.55 !important; color: rgba(255,255,255,.95) !important; }
}
@media (max-width: 600px) {
  .hero-kpi-label, .hero--b .hero-kpi-label { font-size: 13px !important; letter-spacing: .03em !important; color: rgba(255,255,255,.92) !important; }
  .immo-hero-kpi-label { color: rgba(255,255,255,.92) !important; }
}

/* ── 39. Retours passe 8 : vignettes plus étroites dans les listes compactes (titres sur 5-6 lignes), descriptions
       du hub /shooting/ en entier (coupées au milieu d'une phrase). ── */
@media (max-width: 600px) {
  .mag-card:not(.is-featured) .mag-media, .resources .res-card-img { flex-basis: 26% !important; }
  .hub-enjeux .cs-card-img { flex-basis: 26% !important; }
  .hub-enjeux .cs-result { display: block !important; -webkit-line-clamp: unset !important; overflow: visible !important; }
}

/* ── 40. Articles : galeries et images centrées dans la colonne (marge à gauche, collées au bord droit). ── */
@media (max-width: 600px) {
  .post-body .wp-block-gallery, .post-body figure, .post-body .wp-block-image { margin-left: 0 !important; margin-right: 0 !important; max-width: 100% !important; width: 100% !important; box-sizing: border-box; }
  .post-body .wp-block-gallery { gap: 8px !important; }
  .post-body img { max-width: 100% !important; height: auto; }
}

/* ── 41. Libellé du diaporama des héros sur une ligne (sur deux lignes il passait sous les traits de progression) ;
       filtres des grilles vidéo / 360 plus compacts (un par ligne sinon). ── */
@media (max-width: 600px) {
  .sx-hero-label { white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; font-size: 13px !important; letter-spacing: .03em !important; }
  .tgr-ong button { font-size: 13px !important; padding: 7px 11px !important; }
}

/* ── 42. Pages condensées sur téléphone (mobile.js §15) : raisons et avis, le premier puis « Voir les N autres » ;
       étapes en accordéon (titre toujours visible, texte de l'étape ouverte). ── */
@media (max-width: 600px) {
  .mob-liste:not(.mob-liste-ouverte) > .mob-cache-item { display: none !important; }
  .mob-plus--liste { display: flex; width: 100%; justify-content: center; margin: 14px 0 0; padding: 13px 0; border: 2px solid currentColor; border-radius: 10px; text-decoration: none; }
  .fusion .fusion-cards.mob-acc { gap: 8px !important; }
  .fusion .fusion-cards.mob-acc .fusion-card { padding: 0 !important; }
  .fusion .fusion-cards.mob-acc .fusion-card > .mob-acc-t { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 !important; padding: 16px 18px !important; min-height: 24px; cursor: pointer; }
  .fusion .fusion-cards.mob-acc .fusion-card > .mob-acc-t::after { content: "+"; flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--rose); color: #fff; font: 700 20px/28px var(--font); text-align: center; }
  .fusion .fusion-cards.mob-acc .fusion-card.mob-acc-ouvert > .mob-acc-t::after { content: "\2212"; }
  .fusion .fusion-cards.mob-acc .fusion-card > :not(.mob-acc-t):not(.fusion-ico) { margin-left: 18px !important; margin-right: 18px !important; }
  .fusion .fusion-cards.mob-acc .fusion-card.mob-acc-ouvert > :not(.mob-acc-t):not(.fusion-ico):last-child { margin-bottom: 18px !important; }
  .fusion .fusion-cards.mob-acc .fusion-card:not(.mob-acc-ouvert) > :not(.mob-acc-t):not(.fusion-ico) { display: none !important; }
}

/* ── 43. Héros des pages secteurs (M4) sur téléphone : la carte bleue ne chevauche plus la photo (« elle en cache
       la moitié », passes 3 à 8). Photo entière en haut, bloc titre + bouton juste dessous, pleine largeur. ── */
@media (max-width: 900px) {
  .sx-hero-media { height: min(300px, 62vw + 60px) !important; }
  .sx-hero-foot { padding: 0 !important; }
  .sx-hero-card { margin-top: 0 !important; padding: 22px 20px 24px !important; }
  .sx-hero-intro { margin: 12px -20px -24px !important; }
}

/* ── 44. Podcast : titre complet de l'épisode au-dessus du lecteur Ausha (le lecteur, lui, reste à 320 px). ── */
@media (max-width: 900px) {
  .na-pod { height: auto !important; }
  .na-pod iframe { height: 390px !important; }
  .mob-pod-titre { margin: 0 0 10px; padding: 0 4px; min-height: 2.5em; color: #fff; font: 800 16px/1.25 var(--font); text-wrap: balance; }
}

/* ── 45. Pages de texte (CGU, mentions) : une adresse longue se coupe au lieu d'élargir la page. ── */
@media (max-width: 900px) {
  .wp-block-post-content a, .wp-block-post-content p, .wp-block-post-content li { overflow-wrap: anywhere; } /* coupe seulement une chaine plus large que la colonne */
}

/* ── 46. Héro de Notre agence : intro moins grasse et repliée à 4 lignes (mobile.js §10), photo d'équipe bord à bord. ── */
@media (max-width: 900px) {
  .hi-rose .hi-sub { font-weight: 500 !important; line-height: 1.6 !important; }
  .hi-rose-pp { width: 100vw !important; max-width: none !important; margin-left: calc(50% - 50vw) !important; }
  .hi-rose .mob-plus { color: #fff; }
}

/* ── 47. Marges doublées (section + conteneur = 44-48 px de chaque côté, « 3 mots par ligne », passe 9) :
       16 px au total sur téléphone pour les cartes métiers, les enjeux du hub /shooting/ et les étapes. ── */
@media (max-width: 600px) {
  .res-sec.res-branches, .hub-enjeux, .fusion { padding-left: 16px !important; padding-right: 16px !important; }
  .res-sec.res-branches > .container, .hub-enjeux > .container, .fusion .fusion-inner { padding-left: 0 !important; padding-right: 0 !important; }
}

/* ── 48. Valeurs de l'agence (accueil) : 3 cartes courtes empilées au lieu d'un carrousel à points minuscules. ── */
@media (max-width: 600px) {
  .home-agency-values { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; gap: 10px !important; overflow: visible !important; margin: 0 !important; padding: 0 !important; scroll-snap-type: none !important; }
  .home-agency-values li { display: grid !important; grid-template-columns: 38px minmax(0, 1fr); column-gap: 12px; row-gap: 4px; align-items: center; padding: 16px 18px !important; }
  .home-agency-values li .home-agency-value-ico { grid-row: 1; width: 38px; height: 38px; margin: 0; }
  .home-agency-values li .home-agency-value-v { grid-column: 1 / -1; }
  .home-agency-dots { display: none !important; }
}

/* ── 49. Pages de texte (CGU, mentions) : texte aligné à gauche sur téléphone (justifié = rivières de blancs). ── */
@media (max-width: 900px) {
  .wp-block-post-content p, .wp-block-post-content li { text-align: left !important; }
}

/* ── 50. Hub /ressources/ : une carte géante par écran (passe 9) → lignes compactes comme le magazine ;
       la ressource en vedette garde sa grande carte. ── */
@media (max-width: 600px) {
  .rhub-grid { gap: 10px !important; }
  .rhub-card:not(.is-featured) { display: flex !important; flex-direction: row !important; align-items: stretch; min-height: 0 !important; }
  .rhub-card:not(.is-featured) .rhub-media { flex: 0 0 30% !important; width: 30% !important; height: auto !important; min-height: 96px; aspect-ratio: auto !important; }
  .rhub-card:not(.is-featured) .rhub-media img { width: 100%; height: 100%; object-fit: cover; }
  .rhub-card:not(.is-featured) .rhub-type { font-size: 10.5px !important; padding: 3px 7px !important; }
  .rhub-card:not(.is-featured) .rhub-body { flex: 1 1 auto; min-width: 0; padding: 12px 14px !important; gap: 6px !important; }
  .rhub-card:not(.is-featured) .rhub-tags, .rhub-card:not(.is-featured) .rhub-excerpt, .rhub-card:not(.is-featured) .rhub-foot { display: none !important; }
  .rhub-card:not(.is-featured) .rhub-title { font-size: 15.5px !important; line-height: 1.3 !important; margin: 0 !important; }
}

/* ── 51. Galeries des articles (.mpa-gal) : débord à droite de 44 px hérité du bureau → dans la colonne. ── */
@media (max-width: 600px) {
  .post-body .mpa-gal { margin-left: 0 !important; margin-right: 0 !important; width: auto !important; max-width: 100% !important; }
}

/* ── 52. Petits textes de la passe 9 : surnoms de l'équipe, légendes des chiffres clés, titres de héros prestation,
       titre des pages de texte (« utilisatio / n »). ── */
@media (max-width: 600px) {
  .na-tm-nick { font-size: 14px !important; font-weight: 700 !important; color: #FFA5AF !important; }
  .bnt-in > span { font-size: 13.5px !important; line-height: 1.35 !important; } /* la légende seule ; le chiffre (b > .bnt-cpt) garde sa taille */
  .ph-text h1 { font-size: 25px !important; line-height: 1.15 !important; }
  main > .wp-block-post-title { font-size: clamp(26px, 7.4vw, 32px) !important; line-height: 1.15 !important; }
  .mob-generique li { font-size: 15px !important; font-weight: 600 !important; line-height: 1.45 !important; }
}

/* ── 53. Rythme vertical : FAQ, magazine et bloc agence avaient 76 à 103 px de vide (« bloc non chargé ? », passe 9) ;
       56 px comme les autres sections. ── */
@media (max-width: 600px) {
  .faq { padding-top: 56px !important; padding-bottom: 56px !important; }
  .resources { padding-bottom: 56px !important; }
  .home-agency { padding-top: 56px !important; padding-bottom: 56px !important; }
}

/* ── 54. Podcast sur téléphone : un épisode puis « Voir les 9 autres épisodes » (mobile.js §15), lecteurs empilés. ── */
@media (max-width: 600px) {
  .na-pods-track.mob-liste { flex-direction: column !important; align-items: center !important; overflow: visible !important; scroll-snap-type: none !important; gap: 24px !important; }
  .na-pods .mob-plus--liste { color: #fff; margin-left: 16px; margin-right: 16px; width: calc(100% - 32px); }
  .na-pods:has(.mob-liste) { flex-direction: column !important; }
}

/* ── 55. Passe 10 : mur des villes et départements (noms entiers, espacés), barre basse plus fine (en-tête + barre
       = 13 % de l'écran). ── */
@media (max-width: 600px) {
  .f101-wall span { white-space: nowrap; margin-right: .45em; }
  .mobile-devis { padding-top: 12px !important; padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)) !important; font-size: 15px; }
}
@media (max-width: 600px) {
  .immo-hero-kpi-label { font-size: 14px !important; letter-spacing: .02em !important; color: #fff !important; line-height: 1.3 !important; }
}
@media (max-width: 600px) {
  .rhub-card:not(.is-featured) .rhub-type { display: none !important; } /* le badge masquait la vignette (passe 10) */
  .rhub-card:not(.is-featured) .rhub-media { flex-basis: 26% !important; width: 26% !important; }
}
@media (max-width: 900px) {
  /* CGU / mentions collées depuis Word : un paragraphe fait d'un seul gras = un intertitre, mis en valeur */
  .wp-block-post-content p:has(> b:only-child), .wp-block-post-content p:has(> strong:only-child) { margin-top: 1.6em !important; font-size: 17px !important; line-height: 1.35 !important; color: var(--blue-deep, #324A82); }
}
@media (max-width: 600px) {
  .post-body .lede { text-align: left !important; font-size: 16px !important; line-height: 1.6 !important; } /* chapô de 10 lignes centrées en italique : aligné à gauche (passe 10) */
}

/* ── 56. Corail lisible sur téléphone (07/11, décision « ce qui s'impose pour 8,5 ») : le blanc sur #FF5064 = 3,2:1,
       jugé illisible par tout le panel (intros, bandeaux, cartes). Sur mobile seulement, le même rose un ton plus
       profond #D92D45 = 4,8:1 (WCAG AA) ; aplat inchangé, le bureau garde #FF5064. ── */
@media (max-width: 900px) {
  :root, body { --wp--preset--color--rose: #D92D45; --wp--preset--color--rose-fonce: #C22239; --rose: #D92D45; }
  .process-rose, .pc-rose, .hi-rose, .hi-rose-pp, .immo-thread-fill { background-color: #D92D45 !important; }
  .sx-hero-seg.is-on span { background: #D92D45 !important; }
  .fi4 { color: #D92D45 !important; }
  .seg-rose { --c: #D92D45; --fc: #D92D45; }
}

/* ── 57. Pages de texte longues en accordéon sur téléphone (mobile.js §17). ── */
@media (max-width: 600px) {
  .mob-parties > .mob-part-c:not(.mob-part-vue) { display: none !important; }
  .wp-block-post-content.mob-parties > p.mob-part-t:not(#x) { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 !important; padding: 15px 0 !important; border-top: 1px solid rgba(50,74,130,.18); cursor: pointer; }
  .mob-parties > .mob-part-t::after { content: "+"; flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--rose); color: #fff; font: 700 20px/28px var(--font); text-align: center; }
  .mob-parties > .mob-part-t.mob-part-ouverte::after { content: "−"; }
  .mob-parties > .mob-part-c.mob-part-vue:last-of-type, .mob-parties > .mob-part-c.mob-part-vue { margin-bottom: 14px; }
}
}
@media (max-width: 900px) {
  .mob-suite { display: flex; flex-direction: column; gap: 12px; margin: 28px 0 0; }
  .mob-suite a { display: flex; justify-content: center; align-items: center; min-height: 50px; border-radius: 10px; font-weight: 800; text-decoration: none; }
  .mob-suite .mob-suite-2 { border: 2px solid var(--blue-deep, #324A82); color: var(--blue-deep, #324A82); }
}

/* ── 58. Notre agence plus courte sur téléphone : 4 portraits avant « Voir toute l'équipe », mosaïque décorative
       de l'histoire retirée (la photo de la première partie reste). ── */
@media (max-width: 600px) {
  /* 09/11 (Antoine) : toute l'équipe d'emblée et mosaïque de l'histoire réaffichées (§66). */
}
@media (max-width: 600px) {
  .devis-hero .section-label { color: #FFA5AF !important; } /* rose sur photo sombre illisible (passe 11) */
  .na-moment { padding-bottom: 32px !important; } /* aplat rose vide sous la liste des invités */
}
@media (max-width: 900px) {
  .mob-rose-clair { color: #FFA5AF !important; }
}
@media (max-width: 600px) {
  /* Page devis : rien ne renvoie vers elle-même après le formulaire, mosaïque marketing retirée (passe 11). */
  .page-id-43 main a[href*="demander-un-devis"]:not(.mobile-devis), .page-id-43 main a[href="#devis"] { display: none !important; }
  .page-id-43 .bnt { display: none !important; }
}

/* ── 59. Passe 11 : grilles vidéo / 360 sur une colonne (vignettes lisibles), titres équilibrés (pas de « ces » seul),
       plus aucun texte sous 13 px, et le bloc magazine — identique d'une page secteur à l'autre — retiré des pages
       secteurs et prestations sur téléphone (l'accueil et le blog le gardent). ── */
@media (max-width: 600px) {
  .tgr-grid { gap: 10px !important; } /* 1 colonne = 3 écrans pour 8 vignettes (passe 12) : on garde 2 colonnes */
  .tgr-cli, .na-itw-time { font-size: 13px !important; }
  .tgr-ong sup { font-size: 12px !important; }
  main h2 { text-wrap: balance; }
  main:has(> .sx-hero) > .resources { display: none !important; } /* 09/11 : les prestations gardent le magazine (en slider, §66) */
}
@media (max-width: 600px) {
  .na-pod.mob-pod-h { width: min(358px, calc(100vw - 32px)) !important; }
  .na-pod.mob-pod-h iframe { width: 100% !important; height: 212px !important; border-radius: 12px; }
}
@media (max-width: 600px) {
  /* Photo d'équipe de Notre agence : le duotone rouge (multiply) devient illisible sur un petit écran avec le corail
     foncé — « on ne distingue aucun visage » (passe 12). En couleurs naturelles sur téléphone. */
  .hi-rose-pp img { filter: none !important; mix-blend-mode: normal !important; }
}
@media (max-width: 600px) {
  .mag-pagination { text-align: center; }
  .mag-pages { display: flex !important; flex-wrap: wrap !important; justify-content: center !important; gap: 8px !important; padding: 0 !important; }
  .mag-pages .mag-page { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
}
@media (max-width: 600px) {
  .mob-suite a { width: 100%; box-sizing: border-box; padding: 12px 16px; text-align: center; }
  .mob-suite { gap: 16px !important; }
  .immo-hero-kpi-label { text-transform: none !important; letter-spacing: 0 !important; font-weight: 600 !important; }
  .ph-text h1 { font-size: 23px !important; }
}
@media (max-width: 600px) {
  .hub-enjeux { padding-top: 40px !important; padding-bottom: 40px !important; } /* hub /shooting/ : ~170 px de blanc entre deux blocs (passe 13) */
}
@media (max-width: 900px) {
  .sx-slide { object-position: 50% 30% !important; } /* photo plus basse et plus large qu'en bureau : on garde les visages (portrait Corporate coupé au nez, passe 13) */
}
@media (max-width: 600px) {
  .tgr-cli { white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; max-width: calc(100% - 52px) !important; } /* étiquette sur 2 lignes = image et bouton lecture masqués */
}

/* ── 60. Passe 13 (pages cibles) : avis lisibles (droit, 16 px, blanc plein), légende de la tuile beige en foncé. ── */
@media (max-width: 600px) {
  .test-quote { font-style: normal !important; font-size: 16px !important; color: #fff !important; line-height: 1.6 !important; }
  .test-role { color: rgba(255,255,255,.9) !important; font-size: 14px !important; }
  .bnt-t--e .bnt-in > span { color: #394547 !important; }
}

/* ── 61. Recomposition téléphone (07/11, accord d'Antoine, comparaison à l'aveugle : accueil 14 écrans contre une
       accroche courte chez les meilleurs). ≤ 600 px seulement, le bureau garde toute la page.
       Accueil : accroche → secteurs → preuve chiffrée → un avis → devis. Retirés sur téléphone : bandeau social,
       raisons, méthode, plateforme, agence, FAQ, magazine (tous accessibles par le menu ou les pages secteurs).
       Devis : formulaire, logos clients et FAQ ; plus de « raisons » ni de mosaïque sous le formulaire. ── */
@media (max-width: 600px) {
  body.home main .raisons, body.home main .faq, body.home main .resources { display: none !important; } /* 09/11 : logos, méthode, plateforme et agence réaffichés (§66) */
  .page-id-43 main .raisons { display: none !important; }
}

/* ── 62. Pages secteurs et prestations recomposées pour le téléphone (07/11, accord d'Antoine) : héro → métiers
       (filtres) → logos → un avis → devis. Retirés sur téléphone : méthode (« Comment ça marche »), savoir-faire,
       raisons. ≤ 600 px seulement ; le bureau garde toute la page. ── */
@media (max-width: 600px) {
  /* 09/11 (Antoine) : méthode, savoir-faire et grand compte réaffichés en slider (§66). */
}

/* ── 63. Passe aveugle v19 : (1) cartes secteurs de l'accueil à 5 lignes (texte de 60 à 86 mots = 15 lignes ;
       « Explorer ce secteur » mène au détail) ; (2) essai d'un bouton devis flottant abandonné le 07/11 : il
       recouvrait « Explorer ce secteur » (2 tours à l'aveugle, 6,55 contre 6,9) — on garde la barre pleine largeur. ── */
@media (max-width: 600px) {
  .hs-txt > p.mob-long, .res-metier-txt > p.mob-long { display: -webkit-box; -webkit-line-clamp: 7; -webkit-box-orient: vertical; overflow: hidden; } /* filet : > 45 mots sans texte mobile (mobile.js §19) */
}

/* ── 64. Pied de page plus court et plus lisible sur téléphone (« deux écrans, texte petit et peu contrasté »,
       aveugle v21) : présentation retirée (déjà dans la page), coordonnées et liens légaux en texte clair. ── */
@media (max-width: 600px) {
  .site-footer .footer-addr, .site-footer .footer-addr a { color: rgba(255,255,255,.92) !important; font-size: 14.5px !important; }
  .site-footer .footer-legal { display: flex !important; flex-wrap: wrap !important; gap: 4px 18px !important; }
  .site-footer .footer-legal a { min-height: 40px; display: inline-flex; align-items: center; color: rgba(255,255,255,.92) !important; font-size: 14.5px !important; }
  .site-footer .footer-copy { color: rgba(255,255,255,.8) !important; font-size: 13px !important; }
}

/* ── 65. Aveugle (textes mobiles) : intro des héros secteurs plus contrastée, légendes des chiffres du héros de
       l'accueil plus grandes et en minuscules (la barre se masque aussi devant « Explorer ce secteur », mobile.js §3). ── */
@media (max-width: 600px) {
  .sx-hero-intro { color: #26303a !important; font-size: 16px !important; line-height: 1.6 !important; }
  .hero-kpi-label { font-size: 14px !important; text-transform: none !important; letter-spacing: 0 !important; line-height: 1.3 !important; font-weight: 600 !important; }
}
@media (max-width: 900px) {
  .mobile-menu .mob-photographe { display: block; margin: 18px 0 6px; padding: 12px 0; border-top: 1px solid rgba(50,74,130,.15); font-size: 15px !important; font-weight: 700; color: var(--blue-deep, #324A82) !important; text-decoration: underline; text-underline-offset: 3px; }
}
@media (max-width: 900px) {
  .site-footer .mob-pied-photographe { display: block; margin: 0 0 14px; padding: 12px 0; color: #fff !important; font-weight: 700; font-size: 15px; text-decoration: underline; text-underline-offset: 3px; }
}

/* ── 66. 09/11/2026 (Antoine, sections cochées) : sections réaffichées sur téléphone, en slider (« sois favorable au
       slider pour le mobile ») : une carte nette à 86 %, la suivante qui dépasse, points de position (mobile.js §6). ── */
@media (max-width: 600px) {
  .fusion .fusion-cards, .rsc .rsc-track, .shoot .shoot-ex, main:has(.ph-hero) .resources .res-grid {
    display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; overflow-x: auto !important; overflow-y: hidden !important;
    scroll-snap-type: x mandatory !important; gap: 12px !important; margin: 0 -16px !important; padding: 2px 16px 6px !important;
    scroll-padding: 0 16px; scrollbar-width: none; grid-template-columns: none !important; min-height: 0 !important; height: auto !important; }
  .fusion .fusion-cards::-webkit-scrollbar, .rsc .rsc-track::-webkit-scrollbar, .shoot .shoot-ex::-webkit-scrollbar, .resources .res-grid::-webkit-scrollbar { display: none; }
  .fusion .fusion-card, .rsc .rsc-sl, .shoot .shoot-e, main:has(.ph-hero) .resources .res-card {
    flex: 0 0 86% !important; width: 86% !important; max-width: none !important; scroll-snap-align: start; scroll-snap-stop: always;
    position: relative !important; opacity: 1 !important; transform: none !important; pointer-events: auto !important; margin: 0 !important; }
  .fusion .fusion-cards.mob-suivi .fusion-card:not(.mob-vue) > * { visibility: visible !important; }
  .fusion .fusion-cards.mob-suivi .fusion-card:not(.mob-vue), .rsc .rsc-track.mob-suivi .rsc-sl:not(.mob-vue) { opacity: .5 !important; }
  .fusion .mob-points, .rsc .mob-points, .shoot .mob-points, .resources .mob-points { display: flex !important; }
  .fusion .fusion-card { padding: 22px 20px !important; }
  /* Savoir-faire : prestations en une ligne qui défile, 3 photos en slider (au lieu d'une pile). */
  .shoot .shoot-e .shoot-m, .shoot .shoot-e img { width: 100% !important; aspect-ratio: 4 / 3; height: auto !important; object-fit: cover; display: block; border-radius: 10px; }
  /* Accueil : bandeau de logos plus court, Notre agence sans les 3 valeurs. */
  body.home .social-proof { padding-top: 18px !important; padding-bottom: 18px !important; }
  body.home .social-proof .logos-inner > :not(.logos-track) { margin-bottom: 8px !important; }
  body.home .social-proof img { max-height: 30px !important; }
  body.home .home-agency-values, body.home .home-agency-dots { display: none !important; }
  /* Notre agence : toute l'équipe d'emblée, en grille de 3. */
  /* Pied de page : présentation réaffichée, plus compacte. */
  .site-footer .footer-layus { font-size: 14.5px !important; line-height: 1.55 !important; color: rgba(255,255,255,.9) !important; }
}
@media (max-width: 600px) {
  /* Savoir-faire : le panneau ne dépasse plus de l'écran (le slider de photos l'élargissait). */
  .shoot .shoot-bas { grid-template-columns: minmax(0, 1fr) !important; }
  .shoot .shoot-bas, .shoot .shoot-panneaux, .shoot .shoot-panneau { min-width: 0 !important; max-width: 100% !important; }
  .shoot .shoot-panneau { overflow: hidden; }
  .shoot .shoot-ex { margin: 0 !important; padding: 2px 0 6px !important; }
  /* Grand compte : chaque raison devient une carte, on voit ce qui glisse. */
  .rsc .rsc-sl { background: #fff; border: 1px solid rgba(50,74,130,.14); border-radius: 14px; padding: 22px 20px !important; box-sizing: border-box; }
  /* Notre agence : histoire, podcasts et valeurs en slider. */
  .na-sp-tl, .na-adnf-nodes, .na-pods-track {
    display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; overflow-x: auto !important; scroll-snap-type: x mandatory !important;
    gap: 12px !important; margin-left: -16px !important; margin-right: -16px !important; padding: 2px 16px 6px !important; scrollbar-width: none; grid-template-columns: none !important; }
  .na-sp-tl::-webkit-scrollbar, .na-adnf-nodes::-webkit-scrollbar, .na-pods-track::-webkit-scrollbar { display: none; }
  .na-sp-tl > .na-sp-step, .na-adnf-nodes > .na-fc { flex: 0 0 86% !important; width: 86% !important; max-width: none !important; scroll-snap-align: start; margin: 0 !important; }
  .na-pods-track > .na-pod { scroll-snap-align: start; flex: none !important; }
  .na-sp-tl > .mob-cache-item, .na-pods-track > .mob-cache-item { display: block !important; }
  .na-sp-tl ~ .mob-points, .na-adnf-nodes ~ .mob-points, .na-pods-track ~ .mob-points { display: flex !important; }
}
@media (max-width: 600px) {
  /* Panel 09/11 : les sliders élargissaient les grilles parentes (histoire de Notre agence sortait de l'écran). */
  .na-sp-row, .na-adnf, .na-pods { grid-template-columns: minmax(0, 1fr) !important; min-width: 0 !important; }
  .na-sp-tx, .na-adnf-nodes, .na-pods-track, .na-sp-tl { min-width: 0 !important; max-width: none; }
  .na-sp-tx { max-width: 100% !important; }
  /* Carte suivante plus discrète : on voit qu'il y a une suite sans lire des bouts de mots. */
  .rsc .rsc-track.mob-suivi .rsc-sl:not(.mob-vue), .fusion .fusion-cards.mob-suivi .fusion-card:not(.mob-vue) { opacity: .3 !important; }
}
@media (max-width: 600px) {
  /* 10/11 (Antoine) : chiffres du héro de l'accueil SOUS le bouton « Demander un devis », en grille 2 × 2 (fin du slider du 09/11). */
  .hero--b .hb-txt .hero-kpis { order: 5 !important; display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; margin: 18px 0 0 !important; padding: 0 !important; overflow: visible !important; max-width: none !important; }
  .hero--b .hb-txt .hero-kpi { min-width: 0; box-sizing: border-box; }
  .hero--b .hb-txt .hero-kpis + .mob-points { display: none !important; }
  /* 10/11 (Antoine) : plus de place pour les photos qui défilent (150 → 300 px). */
  .hero--b .hb-cols { height: 300px !important; }
}
@media (max-width: 600px) {
  /* 09/11 (Antoine) : avis en slider qui défile seul (mobile.js §6 ter) au lieu de la liste + « Voir les autres avis ». */
  .testimonials .test-slider-wrap { overflow-x: auto !important; overflow-y: hidden !important; scroll-snap-type: x mandatory !important; padding: 0 20px 8px !important; scroll-padding: 0 20px; }
  .testimonials .test-slider { flex-direction: row !important; width: max-content !important; gap: 12px !important; }
  .testimonials .test-card:not([aria-hidden="true"]) { display: block !important; width: calc(100vw - 64px) !important; scroll-snap-align: start; }
  .testimonials .mob-points { display: flex !important; }
}
@media (max-width: 600px) {
  /* 09/11 (Antoine) : pas de points forts (listes ✓) sur téléphone, sur toutes les pages. */
  .res-metier-list { display: none !important; }
  /* Accueil, Nos secteurs d'expertise : pas d'intro sur téléphone, directement les ancres, plus compactes (rangées par mobile.js §6 quater). */
  body.home .home-secteurs .res-head > .section-sub { display: none !important; }
  .metiers--bandes .mb-anchors { gap: 8px 5px !important; }
  .metiers--bandes .mb-anchors a { padding: 8px 9px !important; font-size: 13px !important; white-space: nowrap !important; }
}
@media (max-width: 600px) {
  /* 09/11 (Antoine) : bandeau clients des pages = les logos seuls, sans titre. */
  .lg2 .lg2-titre { display: none !important; }
  .lg2 { padding-top: 16px !important; padding-bottom: 16px !important; }
  /* 09/11 (Antoine : « Comment ça marche, c'est un process, on doit comprendre le fil rouge ») — toutes pages :
     chaque carte numérotée « 01 — », frise 1-2-3-4-5 reliée par un trait sous le slider (étapes passées en bleu). */
  .fusion .fusion-cards { counter-reset: etape-mob; }
  .fusion .fusion-card { counter-increment: etape-mob; }
  .fusion .fusion-card > h3::before, .fusion .fusion-card > h4::before { content: counter(etape-mob, decimal-leading-zero) " — "; color: var(--rose); font-weight: 800; }
  .fusion .mob-points.mob-frise { position: relative; gap: 0 !important; justify-content: space-between !important; max-width: 260px; margin: 14px auto 0 !important; }
  .fusion .mob-points.mob-frise::before { content: ""; position: absolute; left: 16px; right: 16px; top: 50%; height: 2px; background: #cfcac2; }
  .fusion--dark .mob-points.mob-frise::before { background: rgba(255,255,255,.35); }
  .fusion .mob-points.mob-frise button { position: relative; width: 34px !important; height: 34px !important; }
  .fusion .mob-points.mob-frise button span { width: 28px !important; height: 28px !important; border-radius: 50% !important; background: #fff !important; border: 2px solid #cfcac2; color: var(--blue-deep, #324A82);
    font: 800 13px/24px var(--font) !important; text-align: center; box-sizing: border-box; display: flex !important; align-items: center; justify-content: center; }
  .fusion .mob-points.mob-frise button.is-fait span { background: var(--blue-deep, #324A82) !important; border-color: var(--blue-deep, #324A82); color: #fff; }
  .fusion .mob-points.mob-frise button.is-on span { background: var(--rose) !important; border-color: var(--rose); color: #fff; }
}
@media (max-width: 600px) {
  .testimonials .test-card.mob-avis-off { display: none !important; } /* 09/11 (Antoine) : 8 avis au plus sur téléphone */
}
@media (max-width: 600px) {
  /* 09/11 (Antoine) : équipe de Notre agence en slider (deux portraits par écran) au lieu d'une grille de 4 écrans. */
  .na-team-grid { display: flex !important; flex-wrap: nowrap !important; overflow-x: auto !important; scroll-snap-type: x mandatory; gap: 12px !important;
    margin: 0 -16px !important; padding: 2px 16px 6px !important; scroll-padding: 0 16px; scrollbar-width: none; grid-template-columns: none !important; }
  .na-team-grid::-webkit-scrollbar { display: none; }
  .na-team-grid > .na-tm { display: block !important; flex: 0 0 calc(50% - 22px) !important; width: calc(50% - 22px) !important; scroll-snap-align: start; margin: 0 !important; }
  .na-team-grid ~ .mob-points { display: flex !important; }
  /* Podcast : le compteur se plaçait à côté du lecteur (bloc en ligne) et le lecteur sortait de l'écran. */
  .na-pods { display: block !important; }
  .na-pods-track { margin: 0 !important; padding: 2px 16px 6px !important; scroll-padding: 0 16px; } /* .na-pods sans marge latérale */
  .na-pod.mob-pod-h { width: calc(100vw - 56px) !important; }
  .na-pods .mob-points--compte { text-align: center; color: #fff; }
  /* Sliders : la carte suivante ne montre plus qu'une tranche (fini les bouts de mots). */
  .fusion .fusion-card, .rsc .rsc-sl, main:has(.ph-hero) .resources .res-card, .na-sp-tl > .na-sp-step, .na-adnf-nodes > .na-fc {
    flex: 0 0 calc(100% - 26px) !important; width: calc(100% - 26px) !important; }
  .testimonials .test-card:not([aria-hidden="true"]) { width: calc(100vw - 54px) !important; }
}

@media (max-width: 600px) {
  /* 10/11 (Antoine) : « Ce que l'on sait faire » en accordéon sur téléphone (mobile.js §4 bis) — plus de carte blanche
     d'onglets : chaque savoir-faire est une ligne, son contenu s'ouvre juste dessous. */
  .shoot.shoot--acc .shoot-bas { display: block !important; padding-top: 26px; }
  .shoot--acc .shoot-nav { background: none !important; box-shadow: none !important; padding: 0 !important; margin: 0 !important; border: 0 !important; }
  .shoot--acc .shoot-onglet, .shoot--acc .shoot-panneaux { display: none !important; }
  .shoot--acc .shoot-liste { display: block !important; padding: 0 !important; margin: 0 !important; background: none !important; border-top: 1px solid var(--line); }
  .shoot--acc .shoot-liste li { display: block; margin: 0; border-bottom: 1px solid var(--line); }
  .shoot--acc .shoot-liste button[role="tab"] { display: flex !important; width: 100%; align-items: center; justify-content: space-between; gap: 14px; padding: 17px 0 !important; border: 0 !important; border-radius: 0 !important; background: none !important; color: var(--blue-deep) !important; font-size: 17px !important; font-weight: 800 !important; line-height: 1.3; text-align: left; }
  .shoot--acc .shoot-liste button[role="tab"]::after { content: "+"; flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--bg, #f5f3ef); color: var(--rose); font-size: 22px; font-weight: 500; line-height: 1; }
  .shoot--acc .shoot-liste button[role="tab"][aria-selected="true"] { color: var(--rose) !important; }
  .shoot--acc .shoot-liste button[role="tab"][aria-selected="true"]::after { content: "\2212"; background: var(--rose); color: #fff; }
  .shoot--acc .shoot-liste button[role="tab"][aria-selected="true"]::before { display: none !important; }
  .shoot--acc .shoot-panneau { padding: 0 0 24px; }
}
@media (max-width: 600px) {
  /* 10/11 (Antoine : « Home staging virtuel IA, je ne vois pas de photo ») : le slider photo écrasait les comparateurs
     avant / après à 0 px de large. Sur téléphone ils s'empilent, pleine largeur, au format des photos. */
  .shoot .shoot-ex.shoot-ex--ba { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; gap: 12px !important; overflow: visible !important; margin: 0 !important; padding: 0 !important; scroll-snap-type: none !important; }
  .shoot .shoot-ex--ba .ba-cmp { width: 100% !important; height: auto !important; aspect-ratio: 3 / 2; border-radius: 10px; }
  .shoot .shoot-ex--ba + .mob-points { display: none !important; }
}
.mob-ba-nav { display: none; }
@media (max-width: 600px) {
  /* 10/11 (Antoine) : avant / après du savoir-faire IA en slider sur téléphone (mobile.js §4 ter). */
  .shoot .shoot-ex--ba.mob-ba-sl > .ba-cmp { display: none !important; }
  .shoot .shoot-ex--ba.mob-ba-sl > .ba-cmp.mob-on { display: block !important; }
  .mob-ba-nav { display: flex; align-items: center; justify-content: center; gap: 18px; margin: 12px 0 2px; }
  .mob-ba-nav button { width: 40px; height: 40px; border-radius: 50%; border: 1.5px solid var(--line); background: #fff; color: var(--blue); font-size: 22px; line-height: 1; display: grid; place-items: center; cursor: pointer; }
  .mob-ba-nav span { min-width: 48px; text-align: center; font-weight: 700; font-size: 14px; color: var(--blue-deep); }
}

/* ── 10/11/2026 (Antoine) : Notre agence sur téléphone.
       1) La photo d'équipe du héro passe AVANT le titre et l'intro (bord à bord, collée sous l'en-tête).
       2) Équipe : un collaborateur par slide, portrait en grand (la carte suivante ne montre qu'une tranche). ── */
@media (max-width: 900px) {
  .hi-rose-in { display: flex !important; flex-direction: column; padding-top: 0 !important; padding-bottom: 32px !important; }
  .hi-rose-pp { order: -1; margin-top: 0 !important; margin-bottom: 4px; }
}
@media (max-width: 600px) {
  .na-team-grid > .na-tm { flex: 0 0 calc(100% - 26px) !important; width: calc(100% - 26px) !important; scroll-snap-align: center; aspect-ratio: 2 / 3; }
  .na-team-grid { scroll-padding: 0 13px; }
  .na-team-grid .na-tm-front img { height: 76%; object-position: center 25%; }
  .na-team-grid .na-tm-cap { padding: 14px 18px 16px; gap: 3px; }
  .na-team-grid .na-tm-cap b { font-size: 21px; }
  main .na-team-grid .na-tm-role { font-size: 15px !important; }
  main .na-team-grid .na-tm-nick { font-size: 15px !important; }
  .na-team-grid .na-tm-back { padding: 26px 22px; }
  .na-team-grid .na-tm-back b { font-size: 21px; }
  .na-team-grid .na-tm-back p { font-size: 16px; line-height: 1.55; }
}

/* ── 10/11/2026 (Antoine, piste A « Accordéons » validée, compacte) : menu mobile restructuré par mobile.js §2.
       Tout tient sur un écran : en-tête logo + croix, 3 rubriques repliables, pied gris accès + langues, devis collé en bas. ── */
@media (max-width: 900px) {
  .mobile-menu.mm { padding: 0 !important; display: flex; flex-direction: column; overflow: hidden; height: 100dvh; }
  .mm-tete { flex: none; display: flex; align-items: center; justify-content: space-between; height: 60px; padding: 0 8px 0 20px; border-bottom: 1px solid rgba(50,74,130,.1); }
  .mobile-menu .mm-logo { border: 0 !important; padding: 0 !important; display: flex; align-items: center; }
  .mm-logo img { height: 26px !important; width: auto !important; max-width: 190px; display: block; }
  .mm-tete .close-menu { position: static !important; width: 44px; height: 44px; font-size: 30px; }
  .mm-corps { flex: 1 1 auto; overflow-y: auto; padding: 4px 20px 8px; }
  .mm-grp { border-bottom: 1px solid rgba(50,74,130,.1); }
  .mm-grp summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 8px; padding: 14px 0; font: 900 17px/1.2 var(--font); color: var(--blue-deep, #324A82); }
  .mm-grp summary::-webkit-details-marker { display: none; }
  .mm-grp summary small { font-size: 12px; font-weight: 700; color: #8a9396; }
  .mm-grp summary::after { content: "+"; margin-left: auto; font-size: 24px; font-weight: 400; line-height: 1; color: var(--rose); }
  .mm-grp[open] summary::after { content: "\2212"; }
  .mm-liens { padding: 0 0 10px 12px; }
  .mobile-menu .mm-liens a { border: 0 !important; padding: 7px 0 !important; font-size: 15px !important; font-weight: 600; color: var(--dark, #394547); }
  .mobile-menu .mm-liens a.mm-ici { color: var(--rose) !important; font-weight: 800; }
  .mm-pied { flex: none; background: #F2F4F9; padding: 12px 20px; display: grid; gap: 10px; }
  .mm-acces { display: flex; flex-wrap: wrap; gap: 4px 16px; }
  .mobile-menu .mm-acces a, .mobile-menu .mm-acces .mob-photographe { display: inline; border: 0 !important; margin: 0 !important; padding: 2px 0 !important; font-size: 13px !important; font-weight: 700; color: var(--blue-deep, #324A82) !important; text-decoration: none; }
  .mobile-menu .mm-pied .mob-langs { margin: 0 !important; }
  .mobile-menu .mm-pied .mob-langs a { padding: 6px 0 !important; font-size: 12px !important; }
  .mm-bas { flex: none; padding: 10px 20px calc(12px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid rgba(50,74,130,.1); background: #fff; }
  .mobile-menu .mm-bas .mob-cta { order: 0; margin: 0 !important; padding: 13px 0 !important; }
}

/* ── 10/11/2026 (Antoine : « cette page en version mobile c'est la cata ») : Notre agence, téléphone. ── */
@media (max-width: 900px) {
  /* Podcast : moins haut, sans le générique des invités ni « Voir les N autres participants ». */
  .na-moment { padding-top: 40px !important; padding-bottom: 32px !important; min-height: 0 !important; }
  .na-moment .na-moment-credits, .na-moment .mob-generique, .na-moment .mob-plus--liste { display: none !important; }
  .na-moment-inner { padding-top: 0 !important; margin-bottom: 16px !important; }
  .na-moment .na-quote { margin-bottom: 0 !important; }
  .na-moment .na-pods-track { padding: 2px 28px 6px !important; scroll-padding: 0 28px; }
  .na-moment .na-pod.mob-pod-h { scroll-snap-align: center !important; }
  /* Notre ADN : trois cartes empilées, une couleur par carte (fini le bandeau d'une couleur + corps d'une autre), même taille. */
  .na-adnf-nodes { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; grid-auto-rows: 1fr; align-items: stretch !important; gap: 12px !important; overflow: visible !important; margin: 0 !important; padding: 0 !important; scroll-snap-type: none !important; }
  .na-adnf-nodes > .na-fc { width: 100% !important; flex: none !important; }
  .na-adnf-nodes ~ .mob-points { display: none !important; }
  .na-fc-in { height: 100% !important; display: flex; flex-direction: column; }
  .na-fc-front { padding-bottom: 4px !important; }
  .na-fc-back { flex: 1; padding-top: 4px !important; }
  .na-fc--navy .na-fc-back { background: var(--blue-deep) !important; color: #fff !important; }
  .na-fc--rose .na-fc-back { background: var(--rose) !important; color: #fff !important; }
  .na-fc--ecru .na-fc-back { background: #d6ccbb !important; color: var(--blue-deep) !important; }
  .na-fc-back p { color: inherit !important; }
  /* D'où l'on vient : les trois points (hypergéolocalisation, digital, volume & récurrence) retirés sur téléphone. */
  .na-sp-trans, .na-sp-tl, .na-sp-tl ~ .mob-points { display: none !important; }
  /* S'adapter & évoluer : ni étiquettes de secteurs ni « Voir les 6 autres secteurs ». */
  .na-sp-domains, .na-sp-domains ~ .mob-plus--liste { display: none !important; }
  /* Ils en parlent : carte centrée dans l'écran (marges égales), la suivante n'apparaît qu'au glisser. */
  .ncc-trk { grid-auto-columns: calc(100vw - 48px) !important; gap: 12px !important; margin: 0 -16px !important; padding: 4px 24px 18px !important; scroll-padding: 0 24px; }
  .ncc-trk > .ncc-k { scroll-snap-align: center !important; }
}

@media (max-width: 600px) {
  /* 10/11/2026 (Antoine) : portraits de l'équipe moins hauts + flèches de slider sous la carte (mobile.js §4 quater). */
  .na-team-grid > .na-tm { aspect-ratio: 4 / 5 !important; }
  .na-team-grid .na-tm-front img { height: 72% !important; }
  .na-team-grid .na-tm-cap { padding: 12px 18px 14px !important; }
  .na-team-grid .na-tm-cap b { font-size: 19px !important; }
  .na-team-grid ~ .mob-points { display: none !important; }
  .mob-team-nav button { background: var(--rose) !important; border-color: var(--rose) !important; color: #fff !important; width: 44px !important; height: 44px !important; font-size: 26px !important; }
  .mob-team-nav button:disabled { opacity: .3; }
}