/* ============================================================
   AHMED PEINTRE RÉNOVATION SÀRL
   mobile.css — conception dédiée aux téléphones et tablettes
   Chargé APRÈS style.css : surcharge volontairement le desktop.

   Points de rupture
   ─────────────────
   ≤ 980px  tablette / menu plein écran
   ≤ 720px  téléphone (mise en page dédiée)
   ≤ 400px  petit téléphone
   ============================================================ */

/* Déclarées ici (obligatoirement hors @media) pour que le fondu des
   rails puisse s'animer au lieu de sauter d'un état à l'autre.
   Navigateur sans @property : le fondu change instantanément, sans dégât. */
@property --fade-l { syntax: "<length>"; inherits: false; initial-value: 0px }
@property --fade-r { syntax: "<length>"; inherits: false; initial-value: 0px }

/* ============================================================
   1. MENU PLEIN ÉCRAN  (≤ 980px)
   ============================================================ */
@media (max-width: 980px) {

  /* ⚠ IMPORTANT — `backdrop-filter` sur .header en fait un bloc conteneur
     pour ses descendants `position:fixed` : le panneau serait alors mesuré
     par rapport au header, pas à l'écran. On le neutralise pendant
     l'ouverture (un header opaque est de toute façon plus lisible ici). */
  body.nav-open .header {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: var(--paper);
    border-bottom-color: var(--line);
  }

  /* Le panneau couvre l'écran, sous le header collant (z-100) */
  .nav {
    position: fixed;
    inset: 0;
    z-index: 95;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    height: 100dvh;
    max-height: none;
    padding: 130px var(--gut) calc(28px + env(safe-area-inset-bottom));
    overflow-y: auto;
    overscroll-behavior: contain;

    background:
      radial-gradient(ellipse 90% 40% at 100% 0%, rgba(193,99,63,.13), transparent 62%),
      var(--paper);
    border-bottom: 0;
    box-shadow: none;

    transform: none;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .32s var(--e), visibility .32s;
  }
  .nav.is-open { opacity: 1; visibility: visible; pointer-events: auto; }

  /* Liens : grands, numérotés, apparition en cascade */
  .nav__link {
    position: relative;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 18px 4px;
    border-bottom: 1px solid var(--line-2);
    font-family: var(--f-display);
    font-size: 1.6rem;
    font-weight: 500;
    letter-spacing: -.02em;
    color: var(--ink);

    opacity: 0;
    transform: translateY(14px);
    transition: opacity .45s var(--e-out), transform .45s var(--e-out), color .25s;
  }
  .nav.is-open .nav__link { opacity: 1; transform: none; }
  .nav.is-open .nav__link:nth-child(1) { transition-delay: .06s }
  .nav.is-open .nav__link:nth-child(2) { transition-delay: .11s }
  .nav.is-open .nav__link:nth-child(3) { transition-delay: .16s }
  .nav.is-open .nav__link:nth-child(4) { transition-delay: .21s }
  .nav.is-open .nav__link:nth-child(5) { transition-delay: .26s }
  .nav.is-open .nav__link:nth-child(6) { transition-delay: .31s }

  /* numérotation 01 · 02 · 03 … */
  .nav__link::before {
    content: counter(navi, decimal-leading-zero);
    counter-increment: navi;
    font-family: var(--f-body);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .12em;
    color: var(--accent);
    opacity: .55;
    min-width: 20px;
  }
  .nav { counter-reset: navi; }
  .nav__link::after { display: none }
  .nav__link.is-active { color: var(--accent-d) }
  .nav__link:active { color: var(--accent-d) }

  /* Bloc bas : appel direct + coordonnées */
  .nav__cta {
    display: inline-flex;
    justify-content: center;
    margin-top: 26px;
    padding: 17px 24px;
    font-size: 15.5px;

    opacity: 0;
    transform: translateY(14px);
    transition: opacity .45s var(--e-out) .36s, transform .45s var(--e-out) .36s;
  }
  .nav.is-open .nav__cta { opacity: 1; transform: none }

  .nav__foot {
    margin-top: 22px;
    padding-top: 22px;
    border-top: 1px solid var(--line);
    display: grid;
    gap: 12px;

    opacity: 0;
    transform: translateY(14px);
    transition: opacity .45s var(--e-out) .42s, transform .45s var(--e-out) .42s;
  }
  .nav.is-open .nav__foot { opacity: 1; transform: none }

  .nav__foot a,
  .nav__foot address {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 14.5px;
    color: var(--txt-2);
    line-height: 1.45;
  }
  .nav__foot a strong { display: block; color: var(--ink); font-size: 16px; font-weight: 600 }
  .nav__foot .ico { width: 18px; height: 18px; color: var(--accent); flex: none }
  .nav__foot-hours {
    font-size: 12.5px;
    color: var(--txt-3);
    padding-top: 4px;
  }

  /* Le burger passe au-dessus du panneau */
  .header { z-index: 100 }
  .burger { z-index: 101 }
}

/* Le bloc contact du menu n'existe que sur mobile */
.nav__foot { display: none }
@media (max-width: 980px) { .nav__foot { display: grid } }


/* ============================================================
   2. TÉLÉPHONE  (≤ 720px)
   ============================================================ */
@media (max-width: 720px) {

  :root {
    --gut: 20px;
    --sec-y: 62px;
    --r-l: 20px;
    --r-xl: 24px;
  }

  body { font-size: 16px; line-height: 1.62 }

  /* ---------- 2.1 Barre supérieure : supprimée sur téléphone ----------
     Adresse, horaires, e-mail et téléphone s'y chevauchaient faute de
     largeur. Rien n'est perdu : le numéro est dans le héros et dans la
     barre d'action fixe, le reste dans le menu et le pied de page. */
  .topbar { display: none }

  /* ---------- 2.2 Header ---------- */
  .header__in { height: 66px; gap: 12px }
  .header.is-stuck .header__in { height: 60px }
  .brand__mark { width: 38px; height: 38px; border-radius: 11px }
  .brand__mark svg { width: 23px; height: 23px }
  .brand__txt strong { font-size: 17px }
  .brand__txt em { font-size: 9.5px; letter-spacing: .07em }
  .burger { width: 46px; height: 46px }
  /* valeur de repli ; le JS la recalcule à l'ouverture selon la hauteur réelle */
  .nav { padding-top: 92px }

  /* ---------- 2.3 Héros ---------- */
  .hero { padding-block: 30px 44px }
  .hero__in { gap: 34px }
  .hero__grid { background-size: 52px 52px }
  .hero__blob--1 { width: 380px; height: 380px; top: -160px; right: -140px }
  .hero__blob--2 { display: none }

  .eyebrow { font-size: 11px; letter-spacing: .11em; margin-bottom: 16px }
  .hero__title { font-size: clamp(2.15rem, 9.4vw, 2.9rem); margin-bottom: 18px }
  .hero__lead { font-size: 15.4px; margin-bottom: 26px }

  .hero__cta { flex-direction: column; gap: 10px; margin-bottom: 26px }
  .hero__cta .btn { width: 100%; padding: 17px 24px }

  /* 3 mini-cartes de réassurance plutôt qu'une liste */
  .hero__points {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    padding-top: 0;
    border-top: 0;
    text-align: center;
  }
  .hero__points li {
    flex-direction: column;
    gap: 7px;
    padding: 13px 7px;
    background: #fff;
    border: 1px solid var(--line-2);
    border-radius: 13px;
    font-size: 11.2px;
    line-height: 1.32;
    color: var(--txt-2);
    box-shadow: var(--sh-s);
  }
  .hero__points .ico { width: 17px; height: 17px }

  /* Visuel */
  .hero__visual { max-width: none }
  .hero__frame { aspect-ratio: 4/5; border-radius: var(--r-xl) }
  .hero__badge {
    top: 14px; left: 12px;
    padding: 11px 15px; gap: 10px;
    border-radius: 14px;
  }
  .hero__badge-num { font-size: 26px }
  .hero__badge-lbl { font-size: 10px; letter-spacing: .07em }
  .hero__chip {
    right: 12px; bottom: 14px; left: auto;
    padding: 10px 13px; gap: 10px;
    font-size: 10.8px; line-height: 1.4;
    border-radius: 13px;
    max-width: 74%;
  }
  .hero__chip strong { font-size: 12.4px }
  .hero__chip-ico { width: 32px; height: 32px; border-radius: 9px }
  .hero__chip-ico svg { width: 17px; height: 17px }
  .hero__swatches { left: 12px; bottom: -14px; border-width: 3px }
  .hero__swatches i { width: 30px; height: 30px }
  .float-a, .float-b { animation: none }

  /* ---------- 2.4 Bandeau défilant ---------- */
  .marquee { padding-block: 13px }
  .marquee__track { gap: 22px; animation-duration: 30s }
  .marquee__track span { font-size: 15px }
  .marquee__track i { font-size: 7px }

  /* ---------- 2.5 Chiffres ---------- */
  .stats__in { grid-template-columns: repeat(2, 1fr) }
  .stat { padding: 26px 12px }
  .stat__num { font-size: 2.1rem }
  .stat__lbl { font-size: 11px; letter-spacing: .04em; margin-top: 7px }

  /* ---------- 2.6 Titres de section ---------- */
  .sec-head { margin-bottom: 30px; gap: 16px }
  .sec-title { font-size: clamp(1.85rem, 8vw, 2.35rem) }
  .sec-intro { font-size: 15px }

  /* ---------- 2.7 Services : rail horizontal à aimantation ---------- */
  .svc-grid {
    display: flex;
    grid-template-columns: none;
    gap: 13px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gut);
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin-inline: calc(var(--gut) * -1);
    padding: 4px var(--gut) 10px;
  }
  .svc-grid::-webkit-scrollbar { display: none }
  .svc {
    flex: 0 0 calc(50% - 7px);   /* deux cartes par vue ; voir section 5 pour les petits écrans */
    scroll-snap-align: start;
    padding: 26px 22px;
  }
  .svc__no { font-size: 36px; top: 22px; right: 22px }
  .svc__ico { width: 48px; height: 48px; margin-bottom: 18px; border-radius: 13px }
  .svc__ico svg { width: 24px; height: 24px }
  .svc__title { font-size: 1.3rem }
  .svc__txt { font-size: 14.2px; margin-bottom: 16px }
  .svc__list li { font-size: 13.2px }

  .svc-cta {
    flex-direction: column;
    align-items: stretch;
    text-align: center;
    gap: 16px;
    padding: 26px 22px;
    margin-top: 26px;
  }
  .svc-cta p { font-size: 1.18rem }
  .svc-cta .btn { width: 100% }

  /* ---------- 2.8 Nuancier ---------- */
  .nuancier__in { gap: 32px }
  .nuancier__room { order: -1 }          /* la pièce d'abord : on voit l'effet */
  .room { aspect-ratio: 5/4; border-radius: var(--r-l) }
  .sw { width: 46px; height: 46px; border-radius: 12px }
  .sw.is-active::after { inset: -7px; border-radius: 17px }
  .nuancier__picker { gap: 10px }
  .nuancier__name { font-size: 1.22rem }
  .nuancier__code { font-size: 11px }
  .nuancier .btn { width: 100% }

  /* ---------- 2.9 Avant / Après : plus grand, plus lisible ---------- */
  .ba__head { flex-direction: column; align-items: flex-start; gap: 8px; margin-bottom: 14px }
  .ba__title { font-size: 1.3rem }
  .ba__sub { font-size: 13px }
  .ba__stage { aspect-ratio: 4/3; border-radius: var(--r-l) }
  .ba__tag { top: 12px; padding: 6px 12px; font-size: 10.5px; letter-spacing: .09em }
  .ba__tag--b { left: 12px }
  .ba__tag--a { right: 12px }
  /* Le bouton est le seul point de saisie au doigt : on l accentue
     et on l agrandit pour qu il soit evident et confortable. */
  .ba__knob {
    width: 54px; height: 54px;
    background: var(--accent);
    color: #fff;
    box-shadow: 0 6px 18px -4px rgba(16,20,24,.5), 0 0 0 4px rgba(255,255,255,.28);
  }
  .ba__handle { width: 4px }
  .ba__knob svg { width: 20px; height: 20px }
  /* indication tactile discrète */
  .ba__stage::after {
    content: "Faites glisser le bouton";
    position: absolute;
    left: 50%; bottom: 12px;
    transform: translateX(-50%);
    z-index: 5;
    padding: 6px 14px;
    border-radius: 100px;
    background: rgba(16,20,24,.62);
    backdrop-filter: blur(6px);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .04em;
    white-space: nowrap;
    pointer-events: none;
    animation: baHint 4s var(--e) 1.4s forwards;
  }
  @keyframes baHint { 0%,72% { opacity: 1 } 100% { opacity: 0; visibility: hidden } }

  /* ---------- 2.10 Réalisations : rail horizontal ---------- */
  .work-grid {
    display: flex;
    grid-template-columns: none;
    gap: 13px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gut);
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin-inline: calc(var(--gut) * -1);
    padding: 4px var(--gut) 10px;
  }
  .work-grid::-webkit-scrollbar { display: none }
  .work, .work--wide {
    grid-column: auto;
    flex: 0 0 calc(50% - 7px);   /* idem */
    scroll-snap-align: start;
  }
  .work__media, .work--wide .work__media { aspect-ratio: 4/5 }
  .work__title { font-size: 1.18rem }
  .work__meta { font-size: 12.2px }
  .work__cat { font-size: 10px; padding: 4px 10px }

  .works__note {
    flex-direction: column;
    align-items: flex-start;
    gap: 11px;
    padding: 18px 20px;
    margin-top: 22px;
  }
  .works__note p { font-size: 13.8px }

  /* ---------- 2.11 Méthode : chronologie verticale ---------- */
  .steps {
    grid-template-columns: 1fr;
    gap: 14px;
    position: relative;
    padding-left: 30px;
  }
  .steps::before {
    content: "";
    position: absolute;
    left: 9px; top: 22px; bottom: 22px;
    width: 2px;
    background: linear-gradient(180deg, var(--accent) 0%, rgba(224,161,132,.14) 100%);
  }
  .step { padding: 22px 22px 20px }
  .step::before {
    content: "";
    position: absolute;
    left: -26px; top: 30px;
    width: 12px; height: 12px;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 0 4px var(--ink);
  }
  .step__no { font-size: 1.9rem; margin-bottom: 10px }
  .step__title { font-size: 1.18rem }
  .step__txt { font-size: 14px; margin-bottom: 14px }
  .step__meta { font-size: 10.6px; padding-top: 11px }

  /* ---------- 2.12 À propos ---------- */
  .about__in { gap: 40px }
  .about__visual { padding-bottom: 0 }
  .about__img-main { aspect-ratio: 4/5 }
  .about__img-sub { width: 36%; right: 0; top: 14%; border-width: 5px }
  .about__quote { padding: 20px 22px; border-radius: var(--r-m) }
  .about__quote p { font-size: 1.02rem }
  .about__quote span { font-size: 11px }
  .about__lead { font-size: 1.04rem }
  .about__txt { font-size: 14.8px; margin-bottom: 28px }
  .values { grid-template-columns: repeat(2, 1fr); gap: 18px 16px }
  .value { padding-left: 14px }
  .value h3 { font-size: .99rem }
  .value p { font-size: 12.8px }

  /* ---------- 2.13 Témoignages ---------- */
  .testis__nav { display: none }         /* le glissement suffit */
  .testi { padding: 26px 22px }
  .testi blockquote { font-size: 1.02rem; margin-bottom: 20px }
  .testi__stars svg { width: 15px; height: 15px }
  .testis__dots { margin-top: 24px }

  /* ---------- 2.14 Zone d'intervention ---------- */
  .zone { padding-block: 52px }
  .zone__in { gap: 24px }
  .zone__title { font-size: 1.6rem }
  .zone__txt { font-size: 14.2px }
  .zone__list { gap: 7px }
  .zone__list li { padding: 8px 14px; font-size: 12.8px }

  /* ---------- 2.15 FAQ ---------- */
  .faq__in { gap: 26px }
  .faq__side .btn { width: 100% }
  .qa summary { padding: 18px 20px; font-size: 1.02rem; gap: 14px }
  .qa summary i { width: 27px; height: 27px }
  .qa__body { padding: 0 20px 20px }
  .qa__body p { font-size: 14.2px }

  /* ---------- 2.16 Bandeau d'appel ---------- */
  .cta-band { padding-block: 48px }
  .cta-band__in { gap: 22px }
  .cta-band h2 { font-size: 1.72rem }
  .cta-band p { font-size: 14.8px }
  .cta-band__btns { flex-direction: column; width: 100%; gap: 10px }
  .cta-band__btns .btn { width: 100% }

  /* ---------- 2.17 Contact & formulaire ---------- */
  .contact__in { gap: 38px }
  .cards { grid-template-columns: 1fr 1fr; gap: 10px }
  .cards .card:last-child { grid-column: span 2 }
  .card > a, .card__row { padding: 15px 15px; gap: 11px }
  .card__ico { width: 38px; height: 38px; border-radius: 10px }
  .card__ico svg { width: 18px; height: 18px }
  .card__lbl { font-size: 10.5px }
  .card__val { font-size: 13.6px }
  .map iframe { height: 210px }

  .form { padding: 26px 20px; border-radius: var(--r-xl) }
  .form__title { font-size: 1.44rem }
  .form__sub { font-size: 13.4px; margin-bottom: 22px }
  .form__row { grid-template-columns: 1fr; gap: 0 }
  .field { margin-bottom: 14px }
  .field label { font-size: 11.5px; margin-bottom: 7px }
  /* 16px minimum : empêche iOS de zoomer au focus */
  .field input,
  .field select,
  .field textarea { font-size: 16px; padding: 15px 16px }
  .field textarea { min-height: 120px }
  .check__txt { font-size: 12.8px }
  .form__note { font-size: 12px }
  .form__ok { padding: 30px 22px }
  .form__ok-ico { width: 62px; height: 62px }
  .form__ok h4 { font-size: 1.26rem }

  /* ---------- 2.18 Pied de page ---------- */
  .footer { padding-top: 52px }
  .footer__in { grid-template-columns: 1fr 1fr; gap: 30px 22px }
  .footer__brand { grid-column: span 2 }
  .footer__contact { grid-column: span 2 }
  .footer__desc { font-size: 13.6px; margin: 16px 0 18px; max-width: none }
  .footer__col h3 { font-size: 11.5px; letter-spacing: .12em }
  .footer__col a { font-size: 13.6px; padding: 3px 0 }
  .footer__bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    font-size: 12.2px;
    /* place pour la barre d'action fixe */
    padding-bottom: calc(24px + 74px + env(safe-area-inset-bottom));
  }

  /* ---------- 2.19 On remplace les boutons flottants par la barre ---------- */
  .fab, .totop { display: none !important }

  /* ---------- 2.20 Pages légales ---------- */
  .page-head { padding-block: 40px 34px }
  .page-head h1 { font-size: 1.95rem }
  .page-head p { font-size: 14.2px }
  .legal { padding-block: 40px }
  .legal__in { gap: 24px }
  .legal__toc { padding: 16px 18px }
  .legal__body h2 { font-size: 1.32rem }
  .legal__body p, .legal__body ul li { font-size: 14.6px }
  .legal__body section { padding-bottom: 26px; margin-bottom: 26px }
}


/* ============================================================
   3. BARRE D'ACTION FIXE  (téléphone uniquement)
   ============================================================ */
.mbar { display: none }

@media (max-width: 720px) {
  .mbar {
    display: grid;
    grid-template-columns: 1fr 54px 1.25fr;
    gap: 8px;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 94;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
    background: rgba(250,248,245,.88);
    backdrop-filter: saturate(180%) blur(18px);
    -webkit-backdrop-filter: saturate(180%) blur(18px);
    border-top: 1px solid var(--line);
    box-shadow: 0 -10px 30px -18px rgba(16,20,24,.35);
    transform: translateY(130%);
    transition: transform .42s var(--e-out);
  }
  .mbar.is-show { transform: none }
  /* masquée quand le menu est ouvert */
  body.nav-open .mbar { transform: translateY(130%) }

  .mbar__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 52px;
    border-radius: 14px;
    border: 1.5px solid var(--line);
    background: #fff;
    color: var(--ink);
    font-size: 14.2px;
    font-weight: 600;
    letter-spacing: -.005em;
    transition: transform .2s var(--e), filter .2s;
  }
  .mbar__btn:active { transform: scale(.96) }
  .mbar__btn .ico { width: 17px; height: 17px }

  .mbar__btn--wa {
    background: #25D366;
    border-color: #25D366;
    color: #fff;
    gap: 0;
  }
  .mbar__btn--wa .ico { width: 24px; height: 24px; fill: currentColor; stroke: none }

  .mbar__btn--cta {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
    box-shadow: 0 10px 22px -10px rgba(193,99,63,.75);
  }
}


/* ============================================================
   4. RAILS HORIZONTAUX : FONDU DE BORD + INDICATEUR
   ------------------------------------------------------------
   Sans fondu, la carte suivante était tranchée net au bord de
   l'écran : on lisait « Bal… », « Raval… » et l'ensemble avait
   l'air cassé. Le masque la fait disparaître en douceur et
   annonce clairement qu'il y a une suite.
   ============================================================ */
.rail-foot { display: none }

@media (max-width: 720px) {

  .svc-grid,
  .work-grid {
    --fade-l: 0px;
    --fade-r: 30px;
    -webkit-mask-image: linear-gradient(to right,
      transparent 0, #000 var(--fade-l),
      #000 calc(100% - var(--fade-r)), transparent 100%);
            mask-image: linear-gradient(to right,
      transparent 0, #000 var(--fade-l),
      #000 calc(100% - var(--fade-r)), transparent 100%);
    transition: --fade-l .2s linear, --fade-r .2s linear;
  }
  /* en cours de défilement : fondu des deux côtés */
  .svc-grid.at-mid,
  .work-grid.at-mid { --fade-l: 26px; --fade-r: 30px }
  /* arrivé au bout : plus rien à droite */
  .svc-grid.at-end,
  .work-grid.at-end { --fade-l: 26px; --fade-r: 0px }

  /* Pied de rail : jauge + invitation à glisser */
  .rail-foot {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 6px;
  }
  .rail-hint {
    flex: 1;
    display: block;
    height: 3px;
    border-radius: 3px;
    background: var(--line);
    overflow: hidden;
  }
  .rail-hint__bar {
    display: block;
    height: 100%;
    width: 30%;
    border-radius: 3px;
    background: var(--accent);
    transform-origin: left center;
    transition: transform .12s linear;
  }
  .rail-lbl {
    flex: none;
    font-size: 11.2px;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--txt-3);
    white-space: nowrap;
    transition: opacity .35s var(--e);
  }
  .rail-lbl::after { content: " \2192"; color: var(--accent); font-weight: 700 }

  /* une fois que la personne a glissé, l'invitation s'efface */
  .svc-grid.at-mid  + .rail-foot .rail-lbl,
  .svc-grid.at-end  + .rail-foot .rail-lbl,
  .work-grid.at-mid + .rail-foot .rail-lbl,
  .work-grid.at-end + .rail-foot .rail-lbl { opacity: 0 }
}

/* Sous 560px, deux cartes deviendraient illisibles : on passe à une carte
   pleine largeur, avec juste un liseré de ~19px annonçant la suivante.
   Aucun texte de la carte voisine n'entre alors dans l'écran. */
@media (max-width: 560px) {
  .svc,
  .work, .work--wide { flex-basis: calc(100% - 16px) }
}


/* ============================================================
   5. PETIT TÉLÉPHONE  (≤ 400px)
   ============================================================ */
@media (max-width: 400px) {
  :root { --gut: 16px }

  .brand__txt em { display: none }
  .brand__txt strong { font-size: 16.5px }

  .hero__title { font-size: 2rem }
  .hero__points { grid-template-columns: 1fr }
  .hero__points li { flex-direction: row; justify-content: flex-start; text-align: left; font-size: 12.6px; padding: 11px 14px }
  .hero__chip { max-width: 82%; font-size: 10.2px }
  .hero__badge { padding: 9px 13px }
  .hero__badge-num { font-size: 23px }
  .hero__swatches i { width: 26px; height: 26px }

  .stats__in { grid-template-columns: 1fr 1fr }
  .stat { padding: 22px 10px }
  .stat__num { font-size: 1.85rem }

  /* Une seule carte par vue + un liseré de ~19px de la suivante :
     assez pour annoncer la suite, trop peu pour trancher du texte. */
  .svc,
  .work, .work--wide { flex-basis: calc(100% - 16px) }

  .values { grid-template-columns: 1fr }
  .cards { grid-template-columns: 1fr }
  .cards .card:last-child { grid-column: auto }

  .mbar { grid-template-columns: 1fr 50px 1.15fr; gap: 7px; padding-inline: 10px }
  .mbar__btn { font-size: 13.4px; height: 50px; gap: 6px }

  .footer__in { grid-template-columns: 1fr }
  .footer__brand, .footer__contact { grid-column: auto }
}


/* ============================================================
   6. TÉLÉPHONE EN PAYSAGE (hauteur réduite)
   ============================================================ */
@media (max-height: 480px) and (orientation: landscape) and (max-width: 980px) {
  .nav { padding-top: 92px; padding-bottom: 24px }
  .nav__link { padding: 12px 4px; font-size: 1.25rem }
  .nav__foot { margin-top: 16px; padding-top: 16px }
  .hero { padding-block: 24px 32px }
}


/* ============================================================
   7. FINITIONS TACTILES
   ============================================================ */
@media (hover: none) {
  /* pas d'effets de survol collants au doigt */
  .btn:hover { transform: none; box-shadow: none }
  .btn:active { transform: scale(.97) }
  .svc:hover, .work:hover, .card:hover, .testi:hover, .step:hover { transform: none; box-shadow: none }
  .svc:active { transform: scale(.985) }
  .work:active { transform: scale(.985) }
  .zone__list li:hover { transform: none }
  .ba__stage { cursor: default }
  .ba__stage:hover .ba__knob { transform: translate(-50%, -50%) }

  /* cibles tactiles confortables */
  .nav__link, .footer__col a, .legal__toc a { min-height: 44px; display: flex; align-items: center }
  .topbar__item { min-height: 38px }
}

/* Évite tout débordement horizontal accidentel */
@media (max-width: 720px) {
  html, body { max-width: 100%; overflow-x: hidden }
  .hero, .about, .nuancier { overflow-x: clip }
}


/* ============================================================
   8. FINITIONS VISUELLES TACTILES
   Sans survol, les cartes doivent être belles au repos.
   ============================================================ */
@media (hover: none) {
  .svc__ico       { background: var(--accent); color: #fff }
  .svc__no        { color: rgba(193,99,63,.20) }
  .svc::after     { transform: scaleY(1) }
  .svc__list li::before { opacity: .75 }
  .value          { border-left-color: var(--accent) }
  .card__ico      { background: var(--accent-soft); color: var(--accent-d) }
}

/* Les cartes des rails sont visibles d'emblée :
   hors écran horizontalement, l'observateur ne les révélerait pas. */
@media (max-width: 720px) {
  .svc-grid  .reveal,
  .work-grid .reveal { opacity: 1; transform: none }
}


/* ============================================================
   9. LOGO DE MARQUE — TÉLÉPHONE
   ============================================================ */
@media (max-width: 720px){
  .brand__logo{height:36px}
  .brand--light .brand__logo{height:44px;padding:5px 7px}
  .nav .brand__logo{height:34px}
}
@media (max-width: 400px){
  .brand__logo{height:33px}
}

@media (max-width: 720px){
  .works__cta{margin-top:22px}
  .works__cta .btn{width:100%;white-space:normal;text-align:center;line-height:1.35;padding-block:16px}
}