/**
 * IMPERADOR · CSS MOBILE OVERRIDES HOME
 *
 * Surcharges responsive pour index.html dont le CSS inline a été
 * conçu pour width=1440 fixe. Tout est wrappé dans @media → zéro
 * impact sur desktop.
 *
 * Approche identique à catalog-mobile.css : safe, isolé, débranchable.
 */

/* ═══════════════════════════════════════════════════════════
   TABLETTE / GROS MOBILES (≤ 900px)
═══════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  /* Wrap : padding fluide */
  .wrap {
    padding: 0 max(20px, 3vw) !important;
  }

  /* HEADER : plus rien ici — mobile-nav.js remplace la barre en entier
     (60 px, panneau plein écran). Les anciennes règles rétrécissaient la nav
     jusqu'à 10 px de texte pour la faire tenir : c'est exactement le défaut
     qu'on corrige. */

  /* ─── HERO : la vidéo passe en PLEIN CADRE ───────────────────────────
     Demande utilisateur (09.2026) : « la vidéo est un point clé, elle doit
     être mise en valeur ». Mesuré avant : 146 × 117 px sur un écran de
     390 px, en bas à droite — 5 % de l'écran, une vignette. Elle occupe
     désormais toute la largeur sur la moitié haute, titre posé dessus.

     COMMENT, sans toucher au balisage : le bloc de texte passe en
     `display: contents`, donc titre, accroche et boutons deviennent des
     cellules de la grille. La vidéo s'étend sur les trois premières
     rangées, dont une première en `1fr` qui pousse le texte contre son
     bas ; les boutons tombent en rangée 4, sur le crème.
     NE PAS retirer le `display: contents` sans refaire ce calage. */
  .hero { padding: 0 0 36px !important; }
  .hero .wrap { padding-bottom: 0 !important; }

  .hero-meta {
    flex-wrap: wrap !important;
    gap: 8px !important;
    margin: 14px 0 12px !important;
    font-size: 10px !important;
  }
  /* Le séparateur reste : masqué, « ESTAB. 2014 » et « ACLENS · FAFE »
     se lisaient comme une seule mention. */
  .hero-meta .sep { width: 16px !important; }

  .hero-grid {
    display: grid !important;
    /* minmax(0, 1fr) et non 1fr : le minimum `auto` d'une piste prend la
       taille min-content de son contenu — les 100vw de la vidéo — et la
       colonne débordait alors du .wrap de 32 px. */
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: 1fr auto auto auto !important;
    gap: 0 !important;
    align-items: stretch !important;
  }
  .hero-grid > div:first-child { display: contents !important; }

  .hero-video {
    grid-row: 1 / 4 !important;
    grid-column: 1 !important;
    /* Plein bord : on sort des 16 à 24 px de gouttière du .wrap. */
    width: 100vw !important;
    margin-left: 50% !important;
    transform: translateX(-50%) !important;
    aspect-ratio: auto !important;
    max-height: none !important;
    min-height: 396px !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }
  /* Le dégradé est renforcé : le titre est maintenant POSÉ sur l'image,
     il doit rester lisible sur une séquence claire (le tissu blanc). */
  .hero-video::after {
    background: linear-gradient(180deg,
      rgba(14,27,51,.52) 0%, rgba(14,27,51,.14) 30%, rgba(14,27,51,.82) 100%) !important;
  }
  .hero-video::before { display: none !important; }   /* pastille « rec » : doublon du tag */
  .hero-video .hv-tag { font-size: 9.5px !important; top: 14px !important; left: 16px !important; }

  .hero-title {
    grid-row: 2 !important;
    grid-column: 1 !important;
    z-index: 2;
    align-self: end;
    margin: 0 16px 8px !important;
    font-size: clamp(30px, 8.4vw, 44px) !important;
    line-height: 1.05 !important;
    color: #fff !important;
    display: block !important;
    text-shadow: 0 1px 14px rgba(14,27,51,.45);
  }
  /* Le terracotta de marque n'a pas le contraste nécessaire sur l'image :
     on monte vers sa teinte claire, la même que sur la maquette validée. */
  .hero-title .terra { color: #E7B49E !important; }
  .hero-title .pt { color: #fff !important; }

  .hero-sub {
    grid-row: 3 !important;
    grid-column: 1 !important;
    z-index: 2;
    align-self: end;
    margin: 0 16px 18px !important;
    font-size: 13.5px !important;
    line-height: 1.45 !important;
    color: rgba(255,255,255,.86) !important;
    text-shadow: 0 1px 10px rgba(14,27,51,.5);
  }

  .hero-cta {
    grid-row: 4 !important;
    grid-column: 1 !important;
    display: flex !important;
    flex-direction: column-reverse !important;   /* le devis passe en premier */
    gap: 9px !important;
    margin-top: 16px !important;
  }
  .hero-cta .btn {
    width: 100% !important;
    height: 48px !important;
    justify-content: center !important;
  }

  /* ─── Grilles à plusieurs colonnes : tout s'empile ────────────────────
     Relevé au navigateur à 390 px après le passage en device-width. Les
     sélecteurs sont ceux du CSS en ligne d'index.html, pas des approximations :
     `.cats-head` tombait à 2 colonnes de 139 px (le texte du chapeau paraissait
     flotter dans le vide à droite) et `.contact-grid` débordait jusqu'à
     512 px de large sur un écran de 390. */
  .cats-head { grid-template-columns: 1fr !important; gap: 20px !important; }
  /* minmax(0, …) et non 1fr : même piège que la grille du hero — le
     minimum `auto` d'une piste vaut la taille min-content de son
     contenu, et le bloc de contact débordait à 484 px de large sur un
     écran de 390. Mesuré au navigateur. */
  .contact-grid { grid-template-columns: minmax(0, 1fr) !important; gap: 40px !important; }
  .contact-grid > * { min-width: 0 !important; }
  .contact-title { font-size: clamp(30px, 8vw, 44px) !important; }
  .contact-meta {
    grid-template-columns: 1fr 1fr !important;
    gap: 18px !important;
    max-width: 100% !important;
  }
  .check-grid { grid-template-columns: 1fr 1fr !important; }
  /* Le formulaire de devis : la classe est `.field-row`, pas `.form-grid`
     — les deux champs sortaient du cadre à 484 px. */
  .field-row { grid-template-columns: minmax(0, 1fr) !important; gap: 0 !important; }
  .field { min-width: 0 !important; }
  .field input, .field select, .field textarea { max-width: 100% !important; }
  .config-head { grid-template-columns: 1fr !important; gap: 24px !important; }
  .hj-head { grid-template-columns: 1fr !important; gap: 16px !important; }
  .hj-grid,
  .hj-grid[data-count="2"],
  .hj-grid[data-count="3"] { grid-template-columns: 1fr !important; max-width: 100% !important; }
  .config-teaser .wrap { grid-template-columns: 1fr !important; }
  .config-teaser-grid { grid-template-columns: repeat(2, 1fr) !important; }

  /* ─── LES TROIS UNIVERS ───────────────────────────────────────────────
     Mesuré à 390 px AVANT correction : `.category` restait en DEUX colonnes
     (`1fr 1fr` + 80 px de gouttière dans 358 px de large), et comme une piste
     `1fr` vaut `minmax(auto, 1fr)`, c'est le texte qui prenait toute la place
     et l'image ce qui restait — de façon différente à chaque bloc :

        coton  texte 208 px · image  70 × 88 px
        EPI    texte 196 px · image  82 × 103 px
        sport  texte 245 px · image  33 × 41 px   ← une vignette de 33 px

     D'où l'impression de désordre : trois images de trois tailles, et une
     description qui se coupait tous les trois mots sur 9 lignes.

     La photo n'est plus en bas, après le bouton — elle s'intercale entre le
     titre et le texte. Même technique que le hero : `display: contents` sur
     `.cat-text` fait de ses enfants des cellules de la grille, qu'on ordonne
     ensuite. NE PAS retirer le `display: contents` sans refaire cet ordre. */
  .category {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 0 !important;
    padding: 44px 0 !important;
    align-items: stretch !important;
  }
  .category > .cat-text { display: contents !important; }

  .category .cat-num   { order: 1; margin-bottom: 18px !important; }
  .category .cat-icon  { order: 2; margin-bottom: 18px !important; }
  .category .cat-title { order: 3; }
  .category .cat-image { order: 4; }
  .category .cat-desc  { order: 5; }
  .category .cat-tags  { order: 6; }
  .category .btn-link  { order: 7; align-self: start; }

  /* L'alternance gauche/droite du bureau n'a plus d'objet sur une colonne :
     laissée en place, elle remontait l'image d'EPI au-dessus de son numéro,
     et les trois blocs n'avaient plus le même rythme. */
  .category.reverse .cat-text,
  .category.reverse .cat-image { order: unset !important; }
  .category.reverse .cat-image { order: 4 !important; }

  .cat-title {
    font-size: clamp(34px, 9.5vw, 46px) !important;
    line-height: 1 !important;
    margin-bottom: 22px !important;
  }
  .cat-desc { font-size: 15.5px !important; margin-bottom: 24px !important; max-width: none !important; }
  .cat-tags { margin-bottom: 26px !important; }

  .cat-image {
    /* Pleine largeur et PAYSAGE : en 4/5 sur 358 px la photo faisait 447 px
       de haut, soit plus que la vidéo du hero — trois fois de suite. */
    width: 100% !important;
    aspect-ratio: 4 / 3 !important;
    max-height: none !important;
    margin: 0 0 30px !important;
  }
  /* Le survol n'existe pas au doigt, et l'état reste collé après un toucher. */
  .cat-image:hover { transform: none !important; }

  /* CATEGORIES : passe en 1 colonne (était 1fr 1fr) */
  .cats-section { padding: 60px 0 !important; }
  .cats-section .cats-head { grid-template-columns: 1fr !important; gap: 32px !important; }
  .categories { padding: 40px 0 !important; }
  .cats-grid,
  .categories > .wrap > div[style*="grid"] {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }

  /* Previews (Sport / EPI / Coton) */
  .sport-preview,
  .epi-preview,
  .coton-preview {
    padding: 50px 0 !important;
  }
  .sport-preview .wrap,
  .epi-preview .wrap,
  .coton-preview .wrap {
    grid-template-columns: 1fr !important;
    gap: 36px !important;
  }
  .sp-title,
  .ep-title,
  .cp-title {
    font-size: clamp(28px, 6vw, 44px) !important;
  }

  /* Configurator : pas idéal pour mobile, on simplifie */
  .configurator { padding: 50px 0 !important; }
  .configurator .config-grid,
  .configurator .wrap > div[style*="grid"] {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }
  .config-preview { min-height: 360px !important; }

  /* ─── RÉASSURANCE : un CARROUSEL qu'on glisse ─────────────────────────
     Demande utilisateur 09.2026 : « on peut pas faire un carrousel tournant
     droite-gauche pour avoir une différence de mouvement ». Une page
     d'accueil mobile est une longue colonne — un bloc qui se parcourt à
     l'horizontale change le rythme, et quatre arguments courts s'y prêtent.

     Ça règle aussi le désalignement signalé : le filet de `.reassure-item`
     est un SÉPARATEUR DE COLONNE (`border-left` + 32 px de retrait) dont
     `:first-child` est exempté. Empilé, il devenait une barre verticale — le
     bloc 01 collé au bord, les trois autres décalés de 33 px. Chaque item
     est maintenant une CARTE fermée : le filet fait le tour, les quatre sont
     identiques, et la question de l'exemption ne se pose plus. */
  .reassure { padding: 50px 0 !important; }

  .reassure .reassure-grid {
    display: flex !important;
    grid-template-columns: none !important;
    gap: 12px !important;
    /* Plein bord : la carte suivante doit DÉPASSER du cadre — c'est ce
       dépassement, plus que les pastilles, qui dit qu'on peut glisser. */
    width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    padding: 4px 16px !important;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-left: 16px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .reassure .reassure-grid::-webkit-scrollbar { display: none; }

  .reassure-item {
    /* clamp : ~286 px sur un téléphone de 390 (la carte suivante dépasse de
       70 px), plafonné à 340 px pour qu'une tablette en montre deux et demie
       au lieu d'une seule carte géante. */
    flex: 0 0 clamp(250px, 80%, 340px) !important;
    scroll-snap-align: start;
    /* !important des DEUX côtés : il faut écraser `border-left` ET la règle
       `:first-child { border-left: none }` du CSS de bureau. */
    border: 1px solid rgba(255, 255, 255, 0.13) !important;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.035);
    padding: 22px 20px 24px !important;
  }
  /* Les cartes d'une rangée flex prennent la hauteur de la plus haute :
     les quatre se terminent donc au même niveau, sans hauteur écrite. */

  /* Pastilles de position — construites par mobile-nav.js. */
  .reassure .mn-dots {
    display: flex; justify-content: center; gap: 8px;
    margin-top: 22px;
  }
  .reassure .mn-dot {
    width: 7px; height: 7px; padding: 0;
    border: 0; border-radius: 999px;
    background: rgba(255, 255, 255, 0.22);
    cursor: pointer;
    transition: width .25s, background .25s;
    -webkit-tap-highlight-color: transparent;
  }
  .reassure .mn-dot[aria-selected="true"] {
    width: 20px;
    background: var(--sage-soft, #B8C4B8);
  }
  @media (prefers-reduced-motion: reduce) {
    .reassure .mn-dot { transition: none; }
  }

  /* Contact : empile */
  .contact { padding: 50px 0 !important; }
  .contact .contact-grid,
  .contact .wrap > div[style*="grid"] {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }
  .contact-meta { grid-template-columns: 1fr !important; }

  /* Form fields : 2 colonnes max */
  .form-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 14px !important;
  }
  .form-grid .full { grid-column: 1 / -1 !important; }

  /* FOOTER : 5 colonnes → 2 colonnes */
  .footer { padding: 60px 0 40px !important; }
  .footer-top {
    grid-template-columns: 1fr 1fr !important;
    gap: 32px !important;
  }
  .footer-tag { font-size: 14px !important; }
  .footer-col h4 { font-size: 13px !important; }
  .footer .logo-img { height: 80px !important; margin: -15px 0 4px !important; }
  .footer-bot {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 16px !important;
    padding-top: 24px !important;
  }
  .footer-bot .links { flex-wrap: wrap !important; gap: 12px 18px !important; }
}

/* ═══════════════════════════════════════════════════════════
   MOBILE STANDARD (≤ 640px)
═══════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
  .wrap { padding: 0 16px !important; }

  /* HERO : la vidéo garde le plein cadre, seule sa hauteur se resserre. */
  .hero-video { min-height: 360px !important; }

  .check-grid,
  .contact-meta { grid-template-columns: 1fr !important; }

  /* Catégories : titres plus petits */
  .cats-section h2,
  .categories h2 { font-size: clamp(28px, 7vw, 40px) !important; }

  /* Previews : tasser */
  .sp-title, .ep-title, .cp-title { font-size: clamp(24px, 7vw, 36px) !important; }

  /* Reassure : le carrousel vaut à toutes les largeurs mobiles, rien à
     redéclarer ici — le `clamp()` de la carte fait le travail. */

  /* Form devis : 2 → 1 col */
  .form-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  /* FOOTER : 2 → 1 colonne */
  .footer-top {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }
  .footer .logo-img { height: 64px !important; margin: -10px 0 4px !important; }
}

/* ═══════════════════════════════════════════════════════════
   TRÈS PETIT (≤ 380px)
═══════════════════════════════════════════════════════════ */
@media (max-width: 380px) {
  .wrap { padding: 0 12px !important; }
  .hero-video { min-height: 320px !important; }
}

/* ═══════════════════════════════════════════════════════════
   SAFETY NET : pas de scroll horizontal
═══════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  html, body {
    overflow-x: hidden !important;
  }
  /* La vidéo du hero est EXCLUE : elle remplit son cadre en object-fit,
     `height: auto` la ferait retomber à sa hauteur intrinsèque (360 px de
     source) et laisserait une bande crème sous le dégradé. */
  img:not(.hv-fallback), video:not(.hv-video), iframe {
    max-width: 100% !important;
    height: auto !important;
  }
}