/* Audit responsive du 29/10/2026 — corrections mobile et tablette uniquement.
   Tout est limité à max-width:999px : l'affichage PC (1000 px et plus) reste identique.
   Pour annuler : retirer la ligne <link ... responsive-audit.css> des pages. */

@media (max-width: 999px) {

  /* 1. Cibles tactiles d'au moins 44 px ------------------------------------ */

  /* Pied de page : liens de 19-22 px de haut, trop serrés au doigt. */
  html body .ftr--minimal .footer-columns a { display: flex; align-items: center; min-height: 44px; margin-bottom: 0; }
  html body .ftr--minimal .footer-bas a { display: inline-flex; align-items: center; min-height: 44px; }
  html body .ftr--minimal address { margin-bottom: 4px; }

  /* Logo de l'en-tête (28 px de haut) : zone cliquable agrandie sans changer le visuel. */
  .hdr__logo { display: inline-flex; align-items: center; min-height: 44px; }

  /* Fil d'Ariane : lien « Accueil » de 11 à 16 px de haut. */
  .crumbs a { display: inline-flex; align-items: center; min-height: 44px; }
  .crumbs ol { align-items: center; row-gap: 0; }

  /* Sommaire des pages légales (38 px). */
  .legal-toc a { min-height: 44px; align-items: center; }

  /* Onglets du catalogue (38 px : la règle commune était écrasée). */
  .p-catalogue .cat-ess__tab { min-height: 44px !important; }
  .p-catalogue .cat-nord__cue { min-height: 44px; display: inline-flex; align-items: center; }

  /* Étapes du devis (28 px de haut). */
  .p-devis .dv-prog button { min-height: 44px; }

  /* Coordonnées (contact, mentions légales, devis) : liens de 19-25 px. */
  .p-contact .ct-coord__go,
  .p-contact .ct-coord__v,
  .p-covering-vehicules .text-link { display: inline-flex; align-items: center; min-height: 44px; }

  /* Catalogue : texte des trois couches collé au bord du fond bleu. */
  .p-catalogue .mat-select { padding-inline: 12px; border-radius: 8px; }

  /* 2. Textes trop petits (8 à 10 px) ramenés à 12 px ------------------- */
  .p-catalogue .crumbs,
  .p-catalogue .cat-nord__label,
  .p-catalogue .cat-nord__heading p,
  .p-catalogue .cat-nord__cue,
  .p-catalogue .cat-ess__kicker,
  .p-catalogue .mat-kicker,
  .p-catalogue .mat-control,
  .p-catalogue .mat-note { font-size: 12px !important; }

  .p-covering-vehicules .cvx__pin ol.wrap li,
  .p-covering-vehicules .cov-proc__head .kicker { font-size: 12px !important; }

  .p-impression-grand-format .echelle__intro,
  .p-impression-grand-format .finish-lab__recenter,
  .p-impression-grand-format .finish-lab__hint { font-size: 12px !important; }
  /* Boutons posés sur le bandeau des finitions (26-29 px) : zone tactile
     agrandie de façon invisible, sans grossir les pastilles sur l'image. */
  .p-impression-grand-format .finish-lab__recenter::after,
  .p-impression-grand-format .finish-lab__zoom::after { content: ""; position: absolute; inset: -9px -4px; }

  /* 3. Textes trop larges sur tablette : colonne de lecture limitée. */
  .p-impression-grand-format .finishes__note,
  .p-devis .dv-form p { max-width: 68ch; }
}

/* 4. Accueil, carrousel « Six façons d'être vu » : le mot
   « COMMUNICATION » dépassait de sa carte (320, 360 px et téléphone en paysage). */
@media (max-width: 700px) {
  .p-index .sx__t,
  .p-index .sx__item.is-active .sx__t { font-size: clamp(1.1rem, 5.8vw, 1.8rem); }
}

/* 5. Accueil, section « Nous donnons de l'échelle à vos idées » : sur téléphone,
   le texte était placé en bas de l'écran par-dessus le titre centré (chevauchement
   de 15 à 67 px sur un écran de 360 px, ex. Galaxy S25). Titre et texte se suivent
   maintenant normalement, centrés dans la hauteur de l'écran. */
@media (max-width: 999px) {
  .js .p-index .scale { height: auto !important; min-height: 100svh; }
  .js .p-index .scale__pin {
    position: relative !important; height: auto !important; min-height: 100svh;
    justify-content: center; gap: clamp(24px, 5vh, 40px);
    padding-block: calc(var(--hdr-h, 72px) + 24px) 56px !important;
  }
  .js .p-index .scale__note {
    position: relative !important; left: auto !important; right: auto !important; bottom: auto !important;
    padding-left: 0 !important; margin: 0 !important;
  }
}

/* 6. Covering, section « Votre image prend la route » (téléphone et tablette) :
   - les bulles sortaient de l'écran à gauche et à droite, et la bulle
     « Votre marque » recouvrait la liste des étapes 01 à 05 ;
   - leur titre s'affichait en double (texte d'origine + texte ajouté) ;
   - sur petit écran (320 px), la photo du véhicule touchait la liste.
   Les bulles restent maintenant dans la photo, et la photo s'arrête avant la liste. */
@media (max-width: 999px) {
  .js body.p-covering-vehicules .cvx .cvx__stage { --ph: clamp(120px, calc(74svh - 236px), 39svh); }
  .js body.p-covering-vehicules .cvx .cvx__stage .cvx__veh--photo { top: 26svh; height: var(--ph); }
  .js body.p-covering-vehicules .cvx .cvx__stage .cvx__pt.cvx__pt--1,
  .js body.p-covering-vehicules .cvx .cvx__stage .cvx__pt.cvx__pt--2,
  .js body.p-covering-vehicules .cvx .cvx__stage .cvx__pt.cvx__pt--3 {
    width: 44% !important; max-width: 210px !important; min-height: 0 !important;
    padding: 8px 10px 8px 20px !important; box-sizing: border-box;
  }
  .js body.p-covering-vehicules .cvx .cvx__stage .cvx__pt.cvx__pt--1 { left: 4% !important; right: auto !important; top: calc(26svh + 8px) !important; bottom: auto !important; }
  .js body.p-covering-vehicules .cvx .cvx__stage .cvx__pt.cvx__pt--2 { left: auto !important; right: 4% !important; top: calc(26svh + 8px) !important; bottom: auto !important; }
  .js body.p-covering-vehicules .cvx .cvx__stage .cvx__pt.cvx__pt--3 { left: 4% !important; right: auto !important; top: auto !important; bottom: calc(74svh - var(--ph) + 8px) !important; }
  .js body.p-covering-vehicules .cvx .cvx__stage .cvx__pt.cvx__pt--1 b,
  .js body.p-covering-vehicules .cvx .cvx__stage .cvx__pt.cvx__pt--2 b,
  .js body.p-covering-vehicules .cvx .cvx__stage .cvx__pt.cvx__pt--3 b { display: none !important; }
  .js body.p-covering-vehicules .cvx .cvx__stage .cvx__pt.cvx__pt--1::after,
  .js body.p-covering-vehicules .cvx .cvx__stage .cvx__pt.cvx__pt--2::after,
  .js body.p-covering-vehicules .cvx .cvx__stage .cvx__pt.cvx__pt--3::after { font: 500 12px/1.3 Arial, sans-serif !important; }
  .js body.p-covering-vehicules .cvx .cvx__stage .cvx__pt i { top: 13px !important; }
  /* La bulle « Votre marque » montait depuis le bas de l'écran en passant sur la liste :
     elle apparaît maintenant sur place, avec un léger glissement. */
  .js body.p-covering-vehicules .cvx .cvx__stage .cvx__pt.cvx__pt--3 { transform: translate3d(0, calc((1 - var(--p, 0)) * 24px), 0) !important; }
}
/* Téléphone en paysage : trop peu de hauteur pour la photo, les bulles et la liste.
   La liste des étapes (repère de progression) est masquée, la photo et les bulles restent. */
@media (max-width: 999px) and (max-height: 500px) and (orientation: landscape) {
  .js body.p-covering-vehicules .cvx .cvx__pin ol.wrap { display: none !important; }
  .js body.p-covering-vehicules .cvx .cvx__stage { --ph: 46svh; }
}

/* 7. Accueil, machine « 01 / 03 · Impression à plat » (téléphone et tablette) :
   la mention grise était collée sous l'en-tête et passait sur le haut de la photo
   quand celle-ci s'agrandit (vu sur iPhone 11). Elle devient une étiquette lisible,
   posée sous l'en-tête, au-dessus de la photo. */
@media (max-width: 999px) {
  .js .p-index .mx--full .mx__count {
    top: calc(var(--hdr-h, 64px) + 14px) !important; left: var(--gut) !important; z-index: 3 !important;
    padding: 7px 12px; border-radius: 999px; line-height: 1.2;
    background: rgba(255, 255, 255, .94); color: #18232d !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, .14); font-size: .72rem; letter-spacing: .1em; opacity: 1 !important;
  }
}
/* Même section : le titre et le texte blancs étaient posés sur un voile blanc,
   donc peu lisibles sur la photo. Le voile devient sombre en bas de l'image. */
@media (max-width: 999px) {
  .js .p-index .mx--full .mx-full__shade {
    background: linear-gradient(180deg, rgba(10, 18, 24, 0) 30%, rgba(10, 18, 24, .45) 58%, rgba(10, 18, 24, .78) 100%) !important;
    /* le voile suit le cadre arrondi de la photo pendant qu'elle s'agrandit */
    clip-path: inset(calc((1 - var(--e, 1)) * 10%) calc((1 - var(--e, 1)) * 7%) calc((1 - var(--e, 1)) * 10%) calc((1 - var(--e, 1)) * 7%) round 14px);
  }
}