/* ==========================================================================
   ATEQ TPMS — passage en thème clair
   Surcharge de dist/css/main.css (thème parent « ateq »)

   Méthode : chaque teinte sombre relevée dans main.css est remappée sur une
   teinte claire équivalente, en conservant la hiérarchie des plans.

     #000 #000000 #090909 #0A0A0A #101010   ->  --ateq-paper    (fond principal)
     #191919 #1D1D1D #1E1E1E #212121        ->  --ateq-surface  (plan secondaire)
     #232323 #242424 #252525 #2A2A2A        ->  --ateq-surface-2 (cartes, encarts)
     #2D2D2D #2F2F2F #303030 #333333
     #3A3A3A #3B3B3B #4E4E4E                ->  --ateq-line     (filets, bordures)
     #FFFFFF (texte)                        ->  --ateq-ink / --ateq-steel

   Les sélecteurs sont repris à l'identique du parent : la feuille étant
   chargée après main.css, l'ordre source suffit à faire gagner la surcharge.
   Aucun !important sauf mention contraire.

   Le rouge #CE003D et toute la mise en page sont inchangés.
   ========================================================================== */

:root{
  --ateq-paper:     #FFFFFF;
  --ateq-surface:   #F4F4F5;  /* bandeau alterné (v0.8 : gris neutre) */
  --ateq-surface-2: #EAEAEC;  /* plaque sous les visuels produit */
  --ateq-line:      #E4E4E7;  /* filet de séparation */
  --ateq-line-soft: rgba(12,12,14,.08);
  --ateq-ink:       #0C0C0E;  /* v0.8 : noir d'ateq.com (theme-color) */
  --ateq-steel:     #5E6068;  /* v0.8 : gris neutre, 6,2:1 sur blanc */
  --ateq-red:       #CE003D;

  /* v0.6 — système unique (audit visuel du 16/10/2026) */
  --ateq-red-hover: #A30030;               /* rouge au survol */
  --ateq-on-accent: #FFFFFF;               /* texte sur rouge ou sur encre */
  --ateq-glass:     rgba(255,255,255,.86); /* barres floutées (en-tête) */
  --ateq-veil:      rgba(26,31,35,.15);    /* voile sombre sur vignette */
  --ateq-veil-up:   rgba(26,31,35,.3);

  --r-sm:   0;      /* v0.8 : angles vifs partout, comme ateq.com */
  --r-md:   0;
  --r-lg:   0;
  --r-pill: 0;

  --t-fast: 180ms;  /* survols */
  --t-slow: 300ms;  /* ouvertures, déplacements */
  --ease:   cubic-bezier(.2,.6,.2,1);

  /* v0.2 — direction Apple / Insta360 (rayons réalignés en v0.6) */
  --ateq-radius:    var(--r-md);
  --ateq-radius-sm: var(--r-sm);
  /* v0.7 : plus d'ombre portée au repos. Un simple filet (anneau de 1 px,
     sans effet sur la mise en page) ; l'ombre n'apparaît qu'au survol et
     sous les éléments qui flottent (menus, cartes posées sur un visuel). */
  --ateq-shadow:    0 0 0 1px var(--ateq-line);
  --ateq-shadow-up: 0 18px 40px -16px rgba(12,12,14,.22);  /* éléments flottants uniquement */
}

/* --------------------------------------------------------------------------
   1 — Base
   -------------------------------------------------------------------------- */
body{
  background-color: var(--ateq-paper);
  color: var(--ateq-ink);
}

/* --------------------------------------------------------------------------
   2 — En-tête (v0.3)
   Référence : barre de navigation Apple. Liens texte seuls, sans pictos,
   soulignement rouge au survol, barre utilitaire grise très discrète.

   Contraintes du parent respectées :
   - hauteurs inchangées (barre utilitaire 41 px, navigation ~60 px) : les
     gabarits compensent l'en-tête fixe par des marges codées en dur ;
   - toutes les icônes de l'en-tête sont des SVG blancs (fill="white")
     chargés en <img> : on les assombrit par filtre, on ne peut pas les
     recolorer autrement sans toucher au thème parent.
   -------------------------------------------------------------------------- */
header{
  background: var(--ateq-glass);
  background-color: var(--ateq-glass);
  border-bottom: 1px solid var(--ateq-line-soft);
}
header .header__inner{
  background-color: transparent;
}

/* Le flou n'est appliqué qu'au-delà de 1024 px. backdrop-filter fait de
   <header> le bloc conteneur de ses enfants en position fixed : sur mobile,
   le tiroir de menu (.header__inner, fixed plein écran) serait alors
   enfermé dans les 72 px de l'en-tête. Erreur de la v0.2, corrigée ici. */
@media (min-width: 1025px){
  header{
    -webkit-backdrop-filter: saturate(180%) blur(18px);
    backdrop-filter: saturate(180%) blur(18px);
  }
}

/* 2a — Barre utilitaire (langue, téléphones, réseaux) */
header #topHeader{
  background-color: var(--ateq-surface);
  border-bottom: 1px solid var(--ateq-line-soft);
  align-items: center;
}
header #topHeader .topHeader__infoInfo{
  font-size: 13px;
  line-height: 1;
  color: var(--ateq-steel);
  opacity: 1;
  letter-spacing: .01em;
}
.topHeader__info__socialItem{
  width: 15px;
  height: 15px;
  margin: 0 7px;
  opacity: 1;
}
.topHeader__info__socialItem img{
  filter: brightness(0);
  opacity: .45;
  transition: opacity .2s ease;
}
.topHeader__info__socialItem:hover img{ opacity: .9; }

/* Sélecteur de langue. Le parent le veut transparent, mais la règle
   .customSelect__title de la section 6 le repeignait en gris. */
.customSelect__title.languageSwitcher__firstTitle{
  background-color: transparent;
  color: var(--ateq-ink);
  font-size: 13px;
}
/* chevron.svg est blanc : remplacé par le même tracé, en graphite.
   Vaut pour tous les sélecteurs personnalisés du site. */
.customSelect__title:after{
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7.41 8.59 12 13.17l4.59-4.58L18 10l-6 6-6-6z' fill='%231A1F23'/%3E%3C/svg%3E");
}
.customSelect.active > .customSelect__option{
  border-radius: var(--ateq-radius-sm);
  box-shadow: var(--ateq-shadow-up);
}
/* Titres de région (USA, Europe…) : le parent impose Bebas 20 px en
   !important, seul moyen de le surclasser. */
.languageSwitcherSub__title{
  font-family: "Lato Bold", sans-serif !important;
  font-size: 13px !important;
  line-height: 16px !important;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ateq-steel);
}

/* 2b — Logo */
header .navbar .headerlogo .headerLogoLink{ color: var(--ateq-ink); }
header .navbar .headerlogo .headerLogoLabel{ color: var(--ateq-steel); }
.headerlogoMob .headerLogoMobLink{ color: var(--ateq-ink); }

/* 2c — Navigation desktop */
@media (min-width: 1025px){
  header .navbar .navbar-nav li{ margin: 0 2px; }
  header .navbar .navbar-nav li a{
    position: relative;
    padding-left: 14px;
    padding-right: 14px;
    font-family: "Lato Regular", -apple-system, "Segoe UI", sans-serif;
    font-size: 15px;
    line-height: 20px;
    letter-spacing: 0;
    text-transform: none;
    color: var(--ateq-ink);
    background-color: transparent;
    transition: color .2s ease;
  }
  /* Apple et Insta360 n'ont aucun picto dans la navigation principale.
     Conservés sur mobile, où ils aident à parcourir le tiroir. */
  header .navbar .navbar-nav li a img{ display: none; }

  header .navbar .navbar-nav li a::after{
    content: "";
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 10px;
    height: 2px;
    border-radius: 0;
    background: var(--ateq-red);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform .25s ease;
  }
  header .navbar .navbar-nav li a:hover,
  header .navbar .navbar-nav li a:focus{
    color: var(--ateq-red);
    background-color: transparent;
  }
  header .navbar .navbar-nav li a:hover::after,
  header .navbar .navbar-nav li a:focus-visible::after{
    transform: scaleX(1);
  }
  header .navbar .navbar-nav li a:focus-visible{
    outline: 2px solid var(--ateq-red);
    outline-offset: -4px;
    border-radius: var(--r-sm);
  }
}
/* Libellés longs (de, fr-ca…) : on resserre avant que le menu ne passe à
   la ligne. */
@media (min-width: 1025px) and (max-width: 1279px){
  header .navbar .navbar-nav li a{ padding-left: 10px; padding-right: 10px; }
  header .navbar .navbar-nav li a::after{ left: 10px; right: 10px; }
}
@media (prefers-reduced-motion: reduce){
  header .navbar .navbar-nav li a::after{ transition: none; }
}

/* 2d — Mobile (≤ 1024 px) : barre fixe + tiroir */
@media (max-width: 1024px){
  /* Sur mobile, <header> ne sert que de conteneur au tiroir ; la barre
     visible est .headerMobile, qu'il ne doit pas recouvrir. */
  header{
    background: transparent;
    background-color: transparent;
    border-bottom: 0;
  }
  header .header__inner{ background-color: var(--ateq-paper); }
  header #topHeader{
    background-color: transparent;
    border-bottom: 0;
  }
  .headerMobile{
    background-color: var(--ateq-glass);
    -webkit-backdrop-filter: saturate(180%) blur(18px);
    backdrop-filter: saturate(180%) blur(18px);
    border-bottom: 1px solid var(--ateq-line-soft);
    align-items: center;
  }
  .headerMobile__buttonImg{
    filter: brightness(0);
    opacity: .85;
  }
  header .navbar .navbar-nav li a{
    display: flex;
    align-items: center;
    font-family: "Lato Regular", -apple-system, "Segoe UI", sans-serif;
    font-size: 15px;
    line-height: 20px;
    letter-spacing: 0;
    text-transform: none;
    color: var(--ateq-ink);
    border-top-color: var(--ateq-line);
  }
  header .navbar .navbar-nav li a img{
    width: 20px;
    height: 20px;
    margin-right: 14px;
    filter: brightness(0);
    opacity: .55;
  }
  header .navbar .navbar-nav li a:hover,
  header .navbar .navbar-nav li a:focus{
    color: var(--ateq-red);
    background-color: transparent;
  }
}

/* --------------------------------------------------------------------------
   3 — Pied de page (v0.3) : passage en clair, façon Apple
   La v0.1 le gardait sombre parce que footer-logo.png est entièrement blanc.
   Vérification faite, ce PNG ne contient AUCUNE autre couleur : le passer
   au filtre brightness(0) donne exactement le même logo en noir, sans rien
   perdre. Le compromis n'a donc plus lieu d'être.

   Pour revenir à un pied de page sombre : changer les quatre variables
   --ft-* ci-dessous et retirer le filtre du logo.
   -------------------------------------------------------------------------- */
footer.pagefooter{
  /* v0.8 : pied de page sombre, comme ateq.com */
  --ft-bg:    #0C0C0E;
  --ft-ink:   #FFFFFF;
  --ft-muted: rgba(255,255,255,.62);
  --ft-line:  rgba(255,255,255,.14);

  background: var(--ft-bg);
  border-top: 1px solid var(--ft-line);
  padding: 72px 0 0;
  color: var(--ft-muted);
}

/* Grille à 4 colonnes au lieu du flex space-between du parent, qui laissait
   des vides irréguliers selon la longueur des libellés traduits. */
footer.pagefooter .pagefooter__wrapper{
  display: grid;
  grid-template-columns: minmax(0,1.5fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1.2fr);
  gap: 48px;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 32px;
}
footer.pagefooter .pagefooter__section--intro,
footer.pagefooter .pagefooter__section--news{
  width: auto;
}

footer.pagefooter .pagefooter__introLogo{
  width: 140px;
  margin-bottom: 20px;
  filter: brightness(0);
  opacity: .9;
}
footer.pagefooter .pagefooter__introText{
  font-size: 15px;
  line-height: 1.6;
  color: var(--ft-muted);
  opacity: 1;
  max-width: 36ch;
}

footer.pagefooter .pagefooter__sectionTitle{
  margin-bottom: 16px;
  font-family: "Lato Bold", -apple-system, "Segoe UI", sans-serif;
  font-size: 13px;
  line-height: 18px;
  letter-spacing: .02em;
  text-transform: none;
  color: var(--ft-ink);
}
footer.pagefooter .pagefooter__sectionLink,
footer.pagefooter .pagefooter__sectionInfo{
  margin-bottom: 10px;
  font-size: 15px;
  line-height: 20px;
  color: var(--ft-muted);
  opacity: 1;
}
footer.pagefooter .pagefooter__sectionLink{ transition: color .2s ease; }
footer.pagefooter .pagefooter__sectionLink:hover{ color: var(--ft-ink); }

/* Réseaux sociaux en pastilles cerclées : les SVG blancs d'origine sont
   assombris par filtre. */
footer.pagefooter .pagefooter__sectionSocial{
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}
footer.pagefooter .pagefooter__sectionSocialItem{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  margin: 0;
  border: 1px solid var(--ft-line);
  border-radius: 0;
  background: var(--ateq-paper);
  opacity: 1;
  transition: border-color .2s ease;
}
footer.pagefooter .pagefooter__sectionSocialItem img{
  width: 16px;
  height: 16px;
  filter: brightness(0);
  opacity: .6;
  transition: opacity .2s ease;
}
footer.pagefooter .pagefooter__sectionSocialItem:hover{ border-color: var(--ft-ink); }
footer.pagefooter .pagefooter__sectionSocialItem:hover img{ opacity: 1; }

footer.pagefooter .pagefooter__sectionButton{ margin-top: 12px; }

/* Barre du bas : copyright à gauche, mentions à droite, filet aligné sur
   la largeur du contenu et non sur toute la page. */
footer.pagefooter .pagefooter__bottom{
  width: auto;
  margin: 56px max(32px, calc((100% - 1176px) / 2)) 0;
  padding: 20px 0 28px;
  border-top: 1px solid var(--ft-line);
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 24px;
}
footer.pagefooter .pagefooter__bottomItem{
  margin-right: auto;
  font-size: 13px;
  color: var(--ft-muted);
  opacity: 1;
}
footer.pagefooter .pagefooter__bottomLink{
  margin: 0;
  font-size: 13px;
  color: var(--ft-muted);
  opacity: 1;
  transition: color .2s ease;
}
footer.pagefooter .pagefooter__bottomLink:hover{ color: var(--ft-ink); }

@media (max-width: 1024px){
  footer.pagefooter{ padding-top: 56px; }
  footer.pagefooter .pagefooter__wrapper{
    grid-template-columns: 1fr 1fr;
    gap: 40px 24px;
    padding: 0 20px;
  }
  footer.pagefooter .pagefooter__section{ margin-bottom: 0; }
  footer.pagefooter .pagefooter__section--intro{ grid-column: 1 / -1; }
  footer.pagefooter .pagefooter__bottom{ margin: 40px 20px 0; }
  footer.pagefooter .pagefooter__bottomItem,
  footer.pagefooter .pagefooter__bottomItem:first-child{
    width: 100%;
    margin: 0 0 4px;
    text-align: left;
  }
}
@media (max-width: 600px){
  footer.pagefooter .pagefooter__wrapper{ grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   4 — Classes typographiques du parent
   .typo.white et .typo.light sont posées directement dans les gabarits.
   -------------------------------------------------------------------------- */
.typo.white{ color: var(--ateq-ink); }
.typo.light{ color: var(--ateq-steel); opacity: 1; }  /* v0.6 : gris par couleur, plus par opacité */

/* --------------------------------------------------------------------------
   5 — Boutons (v0.4, s'applique à tout le site)
   Bebas 20 px en capitales -> Lato 15 px, forme pilule façon Apple.
   Hauteur ramenée de 56 à 48 px.

   Survol du bouton rouge : le parent le passe en fond BLANC, ce qui rend
   invisibles les pictos blancs (pc.svg, usb.svg, arrow2.svg). On assombrit
   le rouge à la place : les pictos restent lisibles.
   -------------------------------------------------------------------------- */
.button{
  padding: 14px 26px;
  border-radius: var(--r-pill);
  font-family: "Lato Bold", -apple-system, "Segoe UI", sans-serif;
  font-size: 15px;
  line-height: 20px;
  letter-spacing: 0;
  text-transform: none;
}
.button.withicon{ padding-right: calc(22px + 18px + 12px); }
.button.withicon::after{ right: 22px; }

.button.primary:hover,
.button.primary:focus{
  color: var(--ateq-on-accent);
  background: var(--ateq-red-hover);
  border: 1px solid var(--ateq-red-hover);
}
.button.primary:hover.withicon--arrow::after{
  background-image: url("../../ateq/assets/images/icons/element/arrow2.svg");
}

.button.secondary{
  color: var(--ateq-ink);
  border: 1px solid var(--ateq-ink);
  background: transparent;
}
.button.secondary:hover,
.button.secondary:focus{
  background: var(--ateq-ink);
  border-color: var(--ateq-ink);
  color: var(--ateq-on-accent);
}
/* arrow2.svg est blanc : version noire, fournie par le parent, au repos. */
.button.secondary.withicon--arrow::after{
  background-image: url("../../ateq/assets/images/icons/element/arrow2_black.svg");
}
.button.secondary.withicon--arrow:hover::after{
  background-image: url("../../ateq/assets/images/icons/element/arrow2.svg");
}

/* --------------------------------------------------------------------------
   6 — Champs et sélecteurs personnalisés
   -------------------------------------------------------------------------- */
.field{
  background: var(--ateq-surface-2);
  color: var(--ateq-ink);
}
.customSelect__optionItem,
.customSelect__title{
  background-color: var(--ateq-surface-2);
  color: var(--ateq-ink);
}
.customSelect__optionItem{
  border-top-color: var(--ateq-line);
}
.customSelect__optionItem:hover{
  background-color: var(--ateq-line);
}
.languageSwitcherSub .customSelect__optionItem{
  background: var(--ateq-surface);
}

.modal-content{
  background: var(--ateq-surface);
  color: var(--ateq-ink);
}
.modal-content textarea,
.modal-content select,
.modal-content input{
  background-color: var(--ateq-paper);
  border: 1px solid var(--ateq-line);
  color: var(--ateq-ink);
}
.modal-content input[type="submit"]{
  color: var(--ateq-on-accent);
}
.modal-content input[type="submit"]:hover{
  border: 1px solid var(--ateq-ink);
}

/* --------------------------------------------------------------------------
   7 — Accueil
   -------------------------------------------------------------------------- */
.home__slider{ background-color: var(--ateq-surface); }
.home__content{ background-color: var(--ateq-paper); }
.home__product__intro{ background-color: var(--ateq-paper); }
.home__product__itemInner{ background-color: var(--ateq-paper); }
.home__product__item,
.home__product__item:hover{ color: var(--ateq-ink); }
.productCardsInner{ background-color: var(--ateq-paper); }

/* Voiles posés sur les visuels produit : à vérifier visuellement, le contraste
   dépend des images. Passés en voile clair pour rester cohérents avec le
   texte désormais sombre. */
.home__product__introOverlay,
.home__product__intro--mobile .home__product__introOverlay{
  background: var(--ateq-paper);
}

/* --------------------------------------------------------------------------
   8 — Fiche produit (v0.4) — single-products.php
   Référence : pages produit Apple et Insta360.

   Principes :
   - largeur de contenu plafonnée à 1240 px (le parent s'étale sur toute la
     largeur de l'écran, 1 800 px et plus sur grand moniteur) ;
   - le nom du produit reste en Bebas : c'est la désignation modèle, le seul
     endroit où la typo condensée de la marque a du sens ;
   - tous les titres de section passent en Lato Bold, casse normale ;
   - une grande respiration entre sections (120 px) au lieu de filets.

   Toutes les règles de la page sont regroupées ici : les sections 16, 17,
   18 et 21 de la v0.2 ne touchent plus à la fiche produit.
   -------------------------------------------------------------------------- */
.single-page{
  --pp-gutter: max(64px, calc((100% - 1240px) / 2));
  background-color: var(--ateq-paper);
  padding-bottom: 0;
}

/* 8a — Titres de section communs à la page */
.single-page .singlePage__specInfo .singlePage__specInfo__title,
.single-page .singlePage__videoList > .singlePage__specInfo__title,
.single-page .singlePage__gallery__title,
.single-page .comparison__title,
.single-page .singlePage__manual__title{
  font-family: "Lato Bold", -apple-system, "Segoe UI", sans-serif;
  font-size: 32px;
  line-height: 1.15;
  letter-spacing: -.01em;
  text-transform: none;
  color: var(--ateq-ink);
}

/* 8b — Hero */
.single-page .singlePage__presentation{
  padding-left: var(--pp-gutter);
  padding-right: var(--pp-gutter);
  background: linear-gradient(180deg, var(--ateq-paper) 0%, var(--ateq-surface) 100%);
  overflow: hidden;
}
/* Dégradés du noir vers le transparent posés par le parent : ils
   dessinaient deux bandes noires en haut et en bas du hero clair. */
.single-page .singlePage__presentationTop,
.single-page .singlePage__presentationBottom{
  display: none;
}
/* Le visuel garde sa géométrie d'origine, mais pleine opacité et un fondu
   vers la gauche : il se fond dans le fond clair, qu'il s'agisse d'une
   photo d'ambiance ou d'un produit détouré. */
.single-page .singlePage__presentationImg{
  opacity: 1;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 28%);
  mask-image: linear-gradient(to right, transparent 0, #000 28%);
}
.single-page .singlePage__presentationContent{ max-width: 560px; }
.single-page .singlePage__presentationTitle{
  margin-bottom: 16px;
  font-size: 96px;
  line-height: .95;
  letter-spacing: .01em;
  color: var(--ateq-ink);
}
.single-page .singlePage__presentationText{
  font-family: "Lato Regular", -apple-system, "Segoe UI", sans-serif;
  font-size: 24px;
  line-height: 1.4;
  text-transform: none;
  color: var(--ateq-steel);
  opacity: 1;
  max-width: 30ch;
}
.single-page .singlePage__presentationButtonContainer{
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 32px;
}
.single-page .singlePage__presentationButton{ margin-right: 0; }

/* 8c — Présentation : carte blanche qui chevauche le bas du hero */
.single-page .singlePage__spec{
  padding-left: var(--pp-gutter);
  padding-right: var(--pp-gutter);
  margin-bottom: 120px;
}
.single-page .singlePage__specWrapper{
  gap: 48px;
  padding: 40px;
  background: var(--ateq-paper);
  border: 1px solid var(--ateq-line);
  border-radius: var(--r-md);
  box-shadow: var(--ateq-shadow-up);
}
.single-page .singlePage__spec__imageWrapper{
  flex: 0 0 auto;
  border-right: 0;
  border-radius: var(--r-md);
  background-color: var(--ateq-surface);
}
.single-page .singlePage__spec__imageBlock{
  width: 420px;
  height: 420px;
  padding: 32px;
}
.single-page .singlePage__specInfo{
  width: auto;
  flex: 1 1 0;
  padding: 16px 0 0;
  border: 0;
}
.single-page .singlePage__specInfo .singlePage__specInfo__title{
  font-size: 32px;
  margin-bottom: 16px;
}
.single-page .singlePage__specInfo__text{
  font-size: 16px;
  line-height: 1.65;
  color: var(--ateq-steel);
  opacity: 1;
}
.single-page .singlePage__specFeat{
  flex: 1 1 0;
  padding: 16px 0 0;
}
/* « Features » devient une étiquette, pas un titre. */
.single-page .singlePage__specFeat .singlePage__specInfo__title{
  margin-bottom: 12px;
  font-family: "Lato Bold", -apple-system, "Segoe UI", sans-serif;
  font-size: 13px;
  line-height: 16px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ateq-steel);
}
.single-page .singlePage__specFeat__listItem{
  align-items: flex-start;
  padding: 11px 0;
  border-bottom: 1px solid var(--ateq-line);
}
.single-page .singlePage__specFeat__listItem:last-child{ border-bottom: 0; }
.single-page .singlePage__specFeat__listDot{
  flex: 0 0 6px;
  width: 6px;
  height: 6px;
  margin: 8px 12px 0 0;
}
.single-page .singlePage__specFeat__listText{
  font-size: 15px;
  line-height: 22px;
  color: var(--ateq-ink);
  opacity: 1;
}

/* 8d — Vidéos : grille régulière au lieu des largeurs calculées à la main
   du parent (nth-child avec padding-left, qui décalaient les colonnes). */
.single-page .singlePage__videoList{
  padding-left: var(--pp-gutter);
  padding-right: var(--pp-gutter);
  margin-bottom: 120px;
}
.single-page .singlePage__videoList > .singlePage__specInfo__title{ margin-bottom: 32px; }
.single-page .singlePage__video__wrapper{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px 24px;
}
.single-page .singlePage__video__wrapper .singlePage__video__container{
  width: auto;
  max-width: none;
  margin: 0;
  padding: 0;
}
.single-page .singlePage__video__cover{
  border-radius: var(--r-md);
  overflow: hidden;
}
/* Voile sombre du parent ramené de 70 % à 15 % : la vignette doit se voir. */
.single-page .singlePage__video__overlay{
  background-color: var(--ateq-veil);
  transition: background-color .25s ease;
}
.single-page .singlePage__video__play{
  width: 56px;
  transition: transform .25s ease;
}
.single-page .singlePage__video__container:hover .singlePage__video__overlay{
  background-color: var(--ateq-veil-up);
}
.single-page .singlePage__video__container:hover .singlePage__video__play{
  transform: scale(1.08);
}
.single-page .singlePage__video__title{
  margin: 16px 0 6px;
  font-family: "Lato Bold", -apple-system, "Segoe UI", sans-serif;
  font-size: 18px;
  line-height: 24px;
  text-transform: none;
  color: var(--ateq-ink);
}
.single-page .singlePage__video__text{
  display: block;
  font-size: 15px;
  line-height: 1.55;
  color: var(--ateq-steel);
  opacity: 1;
}
.single-page .singlePage__video__wrapper .singlePage__video__container--more{
  flex: none;
  padding: 32px;
  background: var(--ateq-surface);
  border: 1px solid var(--ateq-line);
  border-radius: var(--r-md);
  box-shadow: none;
}
.single-page .singlePage__video__moreTitle{
  font-family: "Lato Bold", -apple-system, "Segoe UI", sans-serif;
  font-size: 24px;
  line-height: 1.3;
  text-align: center;
  text-transform: none;
  color: var(--ateq-ink);
}

/* 8e — Galerie : le carrousel déborde volontairement à droite. */
.single-page .singlePage__gallery__title{
  padding-left: var(--pp-gutter);
  margin-bottom: 32px;
}
.single-page .singlePage__gallery{
  padding-left: var(--pp-gutter);
  margin-bottom: 120px;
}
.single-page img.singlePage__gallery__image{ border-radius: var(--r-md); }
.single-page .singlePage__gallery__arrow{
  width: 48px;
  height: 48px;
  background: var(--ateq-glass);
  border: 1px solid var(--ateq-line);
  box-shadow: var(--ateq-shadow);
  cursor: pointer;
  transition: border-color .2s ease;
}
.single-page .singlePage__gallery__arrow:hover{ border-color: var(--ateq-ink); }
/* arrow.svg est blanc. */
.single-page .singlePage__gallery__arrow img{
  width: 18px;
  filter: brightness(0);
  opacity: .8;
}

/* 8f — Manuels, fiches techniques, logiciel : trois cartes sur un bandeau
   gris, qui fait office de conclusion de page avant le pied de page. */
.single-page .singlePage__manual{
  padding: 96px var(--pp-gutter) 120px;
  background: var(--ateq-surface);
  border-top: 1px solid var(--ateq-line);
}
.single-page .singlePage__manual__title{ margin-bottom: 32px; }
.single-page .singlePage__manual__container{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}
.single-page .singlePage__manual__col{
  width: auto;
  padding: 32px;
  background: var(--ateq-paper);
  border: 1px solid var(--ateq-line);
  border-radius: var(--r-md);
}
.single-page .singlePage__manual__colTitle{
  margin-bottom: 8px;
  font-family: "Lato Bold", -apple-system, "Segoe UI", sans-serif;
  font-size: 18px;
  line-height: 26px;
  text-transform: none;
  color: var(--ateq-ink);
}
.single-page .singlePage__manual__colText{
  margin-bottom: 24px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--ateq-steel);
  opacity: 1;
}
.single-page .singlePage__manual__select{ margin-top: 12px; }
.single-page .singlePage__manual__select__title{
  padding: 13px 48px 13px 16px;
  font-size: 15px;
  color: var(--ateq-ink);
  background: var(--ateq-paper);
  border: 1px solid var(--ateq-line);
  border-radius: var(--r-sm);
}
.single-page .singlePage__manual__select__title:hover{
  background: var(--ateq-paper);
  border-color: var(--ateq-ink);
}
/* chevron.svg est blanc : même tracé, en graphite. */
.single-page .singlePage__manual__select__title::after{
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7.41 8.59 12 13.17l4.59-4.58L18 10l-6 6-6-6z' fill='%231A1F23'/%3E%3C/svg%3E");
}
.single-page .singlePage__manual__select__list{
  margin-top: 4px;
  background: var(--ateq-paper);
  border-radius: var(--r-sm);
  box-shadow: var(--ateq-shadow-up);
}
.single-page .singlePage__manual__select__listItem{
  padding: 12px 16px;
  border-top: 1px solid var(--ateq-line);
}
.single-page .singlePage__manual__select__listItem:first-child{ border-top: 0; }
.single-page .singlePage__manual__select__listItem:hover{ background: var(--ateq-surface); }
.single-page .singlePage__manual__select__listName{
  font-size: 15px;
  color: var(--ateq-ink);
}
.single-page .singlePage__manual__colButton{
  display: flex;
  width: 100%;
  justify-content: center;
}

/* 8g — Responsive */
@media (max-width: 1024px){
  .single-page{ --pp-gutter: 20px; }
  .single-page .singlePage__presentationTitle{ font-size: 64px; }
  .single-page .singlePage__presentationText{ font-size: 18px; }
  .single-page .singlePage__presentationImg{
    opacity: .35;
    -webkit-mask-image: none;
    mask-image: none;
  }
  .single-page .singlePage__spec,
  .single-page .singlePage__videoList,
  .single-page .singlePage__gallery{ margin-bottom: 80px; }
  .single-page .singlePage__specWrapper{
    gap: 32px;
    padding: 24px;
    border-radius: var(--r-md);
  }
  .single-page .singlePage__spec__imageWrapper{ width: 100%; }
  .single-page .singlePage__spec__imageBlock{
    width: 100%;
    height: 300px;
  }
  .single-page .singlePage__specInfo{
    margin-top: 0;
    width: 100%;
    padding: 0;
  }
  .single-page .singlePage__specFeat{ width: 100%; padding: 0; }
  .single-page .singlePage__specInfo__title,
  .single-page .singlePage__gallery__title,
  .single-page .singlePage__manual__title{ font-size: 24px; }
  .single-page .singlePage__video__wrapper{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .single-page .singlePage__manual{ padding: 64px var(--pp-gutter) 80px; }
  .single-page .singlePage__manual__container{ grid-template-columns: 1fr; }
  .single-page .singlePage__manual__col{ margin-bottom: 0; }
}
@media (max-width: 600px){
  .single-page .singlePage__presentationTitle{ font-size: 48px; }
  .single-page .singlePage__video__wrapper{ grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce){
  .single-page .singlePage__video__play,
  .single-page .singlePage__video__overlay{ transition: none; }
  .single-page .singlePage__video__container:hover .singlePage__video__play{ transform: none; }
}

/* --------------------------------------------------------------------------
   9 — Tableau comparatif (v0.4)
   Le parent le masque sous 1024 px (display: none) : comportement conservé
   pour l'instant, à revoir quand le tableau passera de 2 à N produits.
   -------------------------------------------------------------------------- */
.single-page .singlePage__comparison{
  padding-left: var(--pp-gutter);
  padding-right: var(--pp-gutter);
  margin-bottom: 120px;
}
.single-page .comparison__title{ margin-bottom: 32px; }
.single-page .comparison__header{ margin-bottom: 40px; }
.single-page .comparison__header__itemWrapper{
  gap: 16px;
  padding: 20px;
  border-radius: var(--r-md);
}
.single-page .comparison__header__item--other .comparison__header__itemWrapper{
  background: var(--ateq-surface);
  border: 1px solid var(--ateq-line);
}
.single-page .comparison__header__itemImage{
  height: 72px;
  padding: 6px;
  border-radius: var(--r-sm);
  background-color: var(--ateq-paper);
}
.single-page .comparison__header__itemTitle{
  font-family: "Lato Bold", -apple-system, "Segoe UI", sans-serif;
  font-size: 18px;
  line-height: 24px;
  text-transform: none;
}
.single-page .comparison__header__itemText{ font-size: 15px; line-height: 1.45; }
/* Produit courant sur fond rouge : texte blanc. La v0.1 l'avait passé en
   graphite via .typo.white — contraste de 2,1:1, illisible. */
.single-page .comparison__header__item--current .comparison__header__itemTitle{ color: var(--ateq-on-accent); }
.single-page .comparison__header__item--current .comparison__header__itemText{ color: var(--ateq-on-accent); opacity: .85; }
.single-page .comparison__header__item--other .comparison__header__itemTitle{ color: var(--ateq-ink); }
.single-page .comparison__header__item--other .comparison__header__itemText{ color: var(--ateq-steel); opacity: 1; }

.single-page .comparison__body__heading:first-child{ margin-top: 0; }
.single-page .comparison__body__headingTitle{
  padding: 8px 0 12px;
  font-family: "Lato Bold", -apple-system, "Segoe UI", sans-serif;
  font-size: 13px;
  line-height: 18px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ateq-steel);
}
.single-page .comparison__body__table{
  margin-bottom: 32px;
  border: 1px solid var(--ateq-line);
  border-radius: var(--r-md);
  overflow: hidden;
}
.single-page .comparison__body__line{
  border-bottom: 1px solid var(--ateq-line);
  border-right: 0;
  transition: background-color .15s ease;
}
.single-page .comparison__body__line:last-child{ border-bottom: 0; }
.single-page .comparison__body__line:hover{ background-color: var(--ateq-surface); }
.single-page .comparison__body__col{
  padding: 14px 20px;
  border-right: 1px solid var(--ateq-line);
}
.single-page .comparison__body__col:last-child{ border-right: 0; }
.single-page .comparison__body__lineName{
  font-size: 15px;
  color: var(--ateq-ink);
  opacity: 1;
}
/* done.svg est blanc : les coches étaient invisibles sur fond clair. */
.single-page .comparison__body__lineCheck__image{
  width: 20px;
  height: auto;
  filter: brightness(0);
  opacity: .85;
}

/* --------------------------------------------------------------------------
   10 — Pages éditoriales
   -------------------------------------------------------------------------- */
.about__wrapper{ background-color: var(--ateq-surface); }
.about__office__item{ background-color: var(--ateq-surface-2); }
.about__stats__item{ background-color: var(--ateq-surface-2); }
.about__wrapper__content h1,
.about__wrapper__content h2,
.about__wrapper__content h3,
.about__wrapper__content h4,
.about__wrapper__content h5{ color: var(--ateq-ink); }
.about__office__item .offices-card-single-content-contact span{ color: var(--ateq-ink); }

.faq__item{ background: var(--ateq-surface-2); }
.faq__item_inner h1,
.faq__item_inner h2,
.faq__item_inner h3,
.faq__item_inner h4,
.faq__item_inner h5{ color: var(--ateq-ink); }

.allnews__upcoming__intro{ border-right-color: var(--ateq-line); }
.allnews__upcoming__section{
  border-right-color: var(--ateq-line);
  border-top-color: var(--ateq-line);
}
.singleNews__content h1,
.singleNews__content h2,
.singleNews__content h3,
.singleNews__content h4,
.singleNews__content h5,
.singleNews__content b,
.singleNews__content strong{ color: var(--ateq-ink); }

.brand__product{ background: var(--ateq-paper); }
.brand__content h1,
.brand__content h2,
.brand__content h3,
.brand__content h4,
.brand__content h5,
.brand__content b,
.brand__content strong{ color: var(--ateq-ink); }

/* --------------------------------------------------------------------------
   11 — Contact
   -------------------------------------------------------------------------- */
.contact__intro__content h1,
.contact__intro__content h2,
.contact__intro__content h3,
.contact__intro__content h4,
.contact__intro__content h5{ color: var(--ateq-ink); }
.contact__form{ border-top-color: var(--ateq-line); }
.contact__form label{ color: var(--ateq-ink); }
.contact__form textarea,
.contact__form select,
.contact__form input{
  background-color: var(--ateq-paper);
  border: 1px solid var(--ateq-line);
  color: var(--ateq-ink);
}
.contact__form input[type="submit"]{ color: var(--ateq-on-accent); }
.contact__form input[type="submit"]:hover{ border: 1px solid var(--ateq-ink); }
.contact__hours__itemTitle{ background-color: var(--ateq-surface-2); color: var(--ateq-ink); }
.contact__hours__itemBlocks{ background-color: var(--ateq-surface); }
.contact__hours__itemHours__itemFrom,
.contact__hours__itemHours__itemTo{ background-color: var(--ateq-line); }
.contact__hours__itemBlocks__block{ border-bottom-color: var(--ateq-line); }
.contact_supplier_itemContainer{ border-color: var(--ateq-line); }
.contact__formLoader__optionItem,
.contact__formLoader__title{ background-color: var(--ateq-surface-2); color: var(--ateq-ink); }
.contact__formLoader__optionItem{ border-top-color: var(--ateq-line); }
.contact__formLoader__optionItem:hover{ background-color: var(--ateq-line); }

/* --------------------------------------------------------------------------
   12 — Où acheter
   -------------------------------------------------------------------------- */
.store__form__wrapper{ background: var(--ateq-surface); }
.store__mapItem{ background: var(--ateq-surface); }
.store__result{ background: var(--ateq-surface); }
.store__item{ background: var(--ateq-surface-2); }
.store__item__divider{ background: var(--ateq-line); }

/* --------------------------------------------------------------------------
   13 — Divers
   -------------------------------------------------------------------------- */
.teamCards::before{ background: var(--ateq-surface-2); }
.stickynavigationItem{ background: var(--ateq-surface-2); color: var(--ateq-ink); }
.videoCards__container--more{ background: var(--ateq-surface-2); }
.home__slider__pagination .swiper-pagination-bullet{
  background: var(--ateq-ink);
}
.home__slider__pagination .swiper-pagination-bullet-active{
  background: var(--ateq-red);
}

/* --------------------------------------------------------------------------
   14 — Logos
   Pied de page : réglé en section 3 (footer-logo.png, blanc pur, assombri).

   Le logo d'en-tête vient du champ ACF « page__logo » (options), pas du thème.
   S'il est blanc, il devient invisible sur l'en-tête désormais clair.

   Correctif propre : remplacer le média dans ACF > Options.
   Correctif temporaire : décommenter le bloc ci-dessous, qui inverse le PNG
   blanc en noir le temps de la préprod. Le rouge éventuel du logo serait perdu,
   c'est pour cette raison que ce n'est pas actif par défaut.
   -------------------------------------------------------------------------- */
/*
.headerLogoImg img,
.headerlogoMobImg{
  filter: invert(1);
}
*/


/* ==========================================================================
   v0.2 — LISIBILITÉ ET SÉPARATION
   Direction : Apple / Insta360.

   Constat après la v0.1 : le thème parent ne sépare pas ses blocs avec des
   bordures mais avec du contraste sombre. En passant en clair, tout se fond.
   Trois leviers, dans cet ordre d'importance :

     1. alternance de bandeaux blanc / gris clair entre les sections
     2. cartes sur fond blanc, filet 1px + rayon + ombre douce
     3. filets internes ramenés du blanc translucide vers le sombre translucide

   Apple utilise en réalité très peu de bordures : la lisibilité vient d'abord
   de l'alternance des fonds et de l'échelle typographique. On applique les
   trois, mais c'est le point 1 qui fait le gros du travail.
   ========================================================================== */

/* --------------------------------------------------------------------------
   15 — Filets translucides hérités du thème sombre
   Ces règles utilisent rgba(255,255,255,…) : totalement invisibles sur blanc.
   Elles avaient échappé à la v0.1, qui ne balayait que les valeurs hexa.
   -------------------------------------------------------------------------- */
.productCardsBorder,
.home__product__itemBorder{
  border-top: 1px solid var(--ateq-line);
}
.faq__item_inner{
  border-top: 1px solid var(--ateq-line);
}
.about__stats_img{
  background-color: var(--ateq-surface-2);
}
.allnews__upcoming,
.allnews__upcoming__intro,
.allnews__upcoming__section,
.brand__faq__content{
  background-color: var(--ateq-surface);
}
.allnews__items{
  background: var(--ateq-paper);
}
.allnews__items:hover{
  background: var(--ateq-paper);
}
.brand__product__item{
  background-color: var(--ateq-paper);
}

/* --------------------------------------------------------------------------
   16 — Alternance des bandeaux
   C'est le levier principal. Une section sur deux passe sur le gris clair,
   ce qui structure la page sans ajouter la moindre bordure.
   -------------------------------------------------------------------------- */
.home__content{ background-color: var(--ateq-paper); }
.home__product__wrapper{ background-color: var(--ateq-surface); }
.home__slider{ background-color: var(--ateq-surface); }
.allnews__upcoming{ background-color: var(--ateq-surface); }
.about__wrapper{ background-color: var(--ateq-surface); }
.store__form__wrapper{ background: var(--ateq-surface); }
.store__result{ background: var(--ateq-paper); }

/* Filet de clôture entre deux bandeaux de même couleur. */
.home__product__wrapper,
.about__wrapper{
  border-top: 1px solid var(--ateq-line);
  border-bottom: 1px solid var(--ateq-line);
}

/* --------------------------------------------------------------------------
   17 — Cartes
   Fond blanc, filet fin, rayon généreux, ombre très basse. L'ombre ne se
   renforce qu'au survol : c'est ce qui donne le côté « produit » d'Insta360
   sans tomber dans la carte SaaS ombrée en permanence.
   -------------------------------------------------------------------------- */
.productCardsInner,
.home__product__itemInner,
.store__item,
.faq__item,
.about__office__item,
.about__stats__item,
.allnews__items,
.brand__product__item,
.videoCards__container--more,
.contact_supplier_itemContainer{
  background-color: var(--ateq-paper);
  border: 1px solid var(--ateq-line);
  border-radius: var(--ateq-radius);
  box-shadow: var(--ateq-shadow);
  transition: box-shadow .25s ease, border-color .25s ease, transform .25s ease;
}

.productCardsInner:hover,
.home__product__itemInner:hover,
.store__item:hover,
.faq__item:hover,
.allnews__items:hover,
.brand__product__item:hover{
  border-color: var(--ateq-line);
  box-shadow: var(--ateq-shadow-up);
  transform: translateY(-2px);
}

@media (prefers-reduced-motion: reduce){
  .productCardsInner,
  .home__product__itemInner,
  .store__item,
  .faq__item,
  .allnews__items,
  .brand__product__item{ transition: none; }
  .productCardsInner:hover,
  .home__product__itemInner:hover,
  .store__item:hover,
  .faq__item:hover,
  .allnews__items:hover,
  .brand__product__item:hover{ transform: none; }
}

/* Le parent pose une ombre noire dure sur la FAQ, illisible en clair. */
.faq__item{
  box-shadow: var(--ateq-shadow);
}

/* --------------------------------------------------------------------------
   18 — Plaque sous les visuels produit
   Les photos produit sont détourées sur fond noir. Sur blanc, un boîtier noir
   « flotte » sans limite. On leur donne une plaque grise qui les cadre — c'est
   exactement le traitement Apple et Insta360 pour la photo produit.
   -------------------------------------------------------------------------- */
.productCardsImage,
.home__product__itemImage{
  background-color: var(--ateq-surface-2);
  border-radius: var(--ateq-radius-sm);
}

/* --------------------------------------------------------------------------
   20 — Boutons et champs
   Rayon aligné sur la direction V2. Le parent ne pose aucun border-radius.
   -------------------------------------------------------------------------- */
.contact__form input[type="submit"],
.modal-content input[type="submit"]{
  border-radius: var(--ateq-radius-sm);
}
.contact__form textarea,
.contact__form select,
.contact__form input,
.modal-content textarea,
.modal-content select,
.modal-content input,
.field{
  border-radius: var(--ateq-radius-sm);
}
.customSelect__title,
.customSelect__optionItem,
.contact__formLoader__title,
.contact__formLoader__optionItem{
  border-radius: var(--ateq-radius-sm);
}


/* ==========================================================================
   v0.5 — AUDIT UX/UI (16/10/2026)
   Compléments CSS des corrections faites dans les gabarits copiés et dans
   functions.php. Aucun changement visuel voulu, sauf le contour de focus.
   ========================================================================== */

/* --------------------------------------------------------------------------
   21 — Polices en WOFF2
   Mêmes noms de familles que main.css : déclarés plus tard, ces @font-face
   prennent le pas, et les TTF/OTF du parent ne sont plus téléchargés.
   WOFF2 : 3 à 4 fois plus léger. font-display: swap : le texte s'affiche
   tout de suite dans une police système, puis bascule.
   (Lato Italic : le parent pointait vers « Lato_Italic.ttf », fichier
   inexistant ; corrigé ici.)
   -------------------------------------------------------------------------- */
@font-face{ font-family: "Bebas Neue"; src: url("fonts/BebasNeue.woff2") format("woff2"); font-weight: normal; font-style: normal; font-display: swap; }
@font-face{ font-family: "Lato Regular"; src: url("fonts/Lato-Regular.woff2") format("woff2"); font-weight: normal; font-style: normal; font-display: swap; }
@font-face{ font-family: "Lato Light"; src: url("fonts/Lato-Light.woff2") format("woff2"); font-weight: normal; font-style: normal; font-display: swap; }
@font-face{ font-family: "Lato Light Italic"; src: url("fonts/Lato-LightItalic.woff2") format("woff2"); font-weight: normal; font-style: normal; font-display: swap; }
@font-face{ font-family: "Lato Italic"; src: url("fonts/Lato-Italic.woff2") format("woff2"); font-weight: normal; font-style: normal; font-display: swap; }
@font-face{ font-family: "PT Sans-Web Regular"; src: url("fonts/PTSans-Regular.woff2") format("woff2"); font-weight: normal; font-style: normal; font-display: swap; }
@font-face{ font-family: "PT Sans-Web Italic"; src: url("fonts/PTSans-Italic.woff2") format("woff2"); font-weight: normal; font-style: normal; font-display: swap; }
@font-face{ font-family: "PT Sans-Web Bold"; src: url("fonts/PTSans-Bold.woff2") format("woff2"); font-weight: normal; font-style: normal; font-display: swap; }
@font-face{ font-family: "PT Sans-Web Bold Italic"; src: url("fonts/PTSans-BoldItalic.woff2") format("woff2"); font-weight: normal; font-style: normal; font-display: swap; }

/* --------------------------------------------------------------------------
   22 — Titres : marges identiques à l'ancien balisage
   Les gabarits copiés passent des <div>/<p>/<h4>/<h5> en <h1>/<h2>/<h3>.
   Bootstrap donne aux h1-h3 une marge haute de 20 px : on rétablit les
   marges d'origine pour que rien ne bouge à l'écran.
   -------------------------------------------------------------------------- */
.home__slider__contentTitle,
.about__hero__title{ margin-top: 0; }               /* div -> h1, marge basse du parent conservée */
.allproduct__hero__title,
.faq__hero__title{ margin: 0; }                     /* div -> h1 */
.singleNews__title,
.page404__title{ margin: 0 0 10px; }                /* p -> h1 */
.home__product__introTitle,
.home__product__itemTitle,
.productCardsTitle{ margin-top: 10px; }             /* h4/h5 -> h3 */

/* --------------------------------------------------------------------------
   23 — Téléphones cliquables (en-tête, pied de page)
   -------------------------------------------------------------------------- */
.topHeader__infoInfo a,
.pagefooter__sectionInfo a{
  color: inherit;
  text-decoration: none;
}
.topHeader__infoInfo a:hover,
.pagefooter__sectionInfo a:hover{
  color: var(--ateq-red);
  text-decoration: none;
}

/* --------------------------------------------------------------------------
   24 — Focus clavier visible
   Le parent supprime tout contour de focus (*:focus{ outline: none } et
   21 règles semblables). :focus-visible ne s'affiche qu'à la navigation
   clavier, jamais au clic souris. !important nécessaire pour passer devant
   les règles du parent, plus spécifiques.
   -------------------------------------------------------------------------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[role="button"]:focus-visible,
[tabindex]:focus-visible{
  outline: 2px solid var(--ateq-red) !important;
  outline-offset: 2px;
}


/* ==========================================================================
   v0.6 — AUDIT VISUEL (16/10/2026)
   Forme uniquement : dégradés, voiles, ombres, rayons, cartes, mouvements,
   typographie. Jetons définis en tête de fichier (:root).
   ========================================================================== */

/* --------------------------------------------------------------------------
   25 — En-têtes de page : fin des dégradés noirs
   Sur 7 gabarits (à propos, tous produits, FAQ, news, marque, contact, 404),
   le parent encadrait la photo de deux bandes noires et la voilait à 80 %.
   Même traitement que le hero de la fiche produit : bandes retirées, photo
   pleine, fondue vers la gauche, là où se trouve le texte.
   -------------------------------------------------------------------------- */
.about__hero__backgroundTop,
.about__hero__backgroundBottom,
.allproduct__hero__top,
.allproduct__hero__bottom,
.faq__hero__top,
.faq__hero__bottom,
.allnews__hero__top,
.allnews__hero__bottom,
.brand__hero__top,
.brand__hero__bottom,
.contact__hero__top,
.contact__hero__bottom,
.page404__gradient{
  display: none;
}
/* Mise en page des en-têtes : voir section 32 (v0.7). */

/* --------------------------------------------------------------------------
   26 — Accueil : photo d'intro des catégories de nouveau visible
   La v0.1 avait passé le voile (posé AU-DESSUS de la photo) en blanc plein :
   la photo était entièrement recouverte. Le voile devient un fondu blanc
   limité au côté du texte ; la photo, décalée à droite, reste visible.
   -------------------------------------------------------------------------- */
.home__product__intro{
  border-radius: var(--r-md);   /* overflow: hidden déjà posé par le parent */
}
/* Photo et texte côte à côte : voir section 33 (v0.7). */

/* --------------------------------------------------------------------------
   27 — Où acheter : ombres noires du parent remplacées
   -------------------------------------------------------------------------- */
.store__form__wrapper{
  box-shadow: var(--ateq-shadow);
  border-radius: var(--r-md);
}
.store__mapItem{
  box-shadow: var(--ateq-shadow-up);
  border-radius: var(--r-md);
}

/* --------------------------------------------------------------------------
   28 — Rayons sur les blocs du parent restés à angles vifs
   -------------------------------------------------------------------------- */
.home__pages__block{
  border-radius: var(--r-md);
  overflow: hidden;
}

/* --------------------------------------------------------------------------
   29 — Cartes allégées
   Fond blanc + ombre basse suffisent ; le filet extérieur et le filet
   interne entre image et texte sont retirés. Filet conservé en transparent
   (1 px) pour que rien ne bouge d'un pixel. Ombre de repos un peu renforcée
   en tête de fichier pour compenser.
   -------------------------------------------------------------------------- */
.productCardsInner,
.home__product__itemInner,
.store__item,
.faq__item,
.about__office__item,
.about__stats__item,
.allnews__items,
.brand__product__item,
.videoCards__container--more,
.contact_supplier_itemContainer,
.single-page .singlePage__specWrapper{
  border-color: transparent;
}
.productCardsInner:hover,
.home__product__itemInner:hover,
.store__item:hover,
.faq__item:hover,
.allnews__items:hover,
.brand__product__item:hover{
  border-color: transparent;
}
.productCardsBorder,
.home__product__itemBorder{
  display: none;
}
/* Vignettes vidéo : cliquables, elles reçoivent le même retour au survol
   que les autres cartes. (Bureaux, chiffres clés et revendeurs du contact
   ne sont pas cliquables : ils restent immobiles, volontairement.) */
.videoCards__container{
  border-radius: var(--r-md);
  transition: box-shadow var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.videoCards__container:hover{
  box-shadow: var(--ateq-shadow-up);
  transform: translateY(-2px);
}
@media (prefers-reduced-motion: reduce){
  .videoCards__container{ transition: none; }
  .videoCards__container:hover{ transform: none; }
}

/* --------------------------------------------------------------------------
   30 — Typographie : une seule voix
   La fiche produit (v0.4) avait déjà passé ses titres de section en
   Lato Bold, casse normale. On étend ce choix au site :
     - Bebas Neue reste pour les grands titres : .title1 (64) et .title2 (48) ;
     - .title3 et .title4 passent en Lato Bold, 24 et 18 px.
   Échelle : 64 · 48 · 32 · 24 · 18 · 15 · 13 px (+ 96 px d'affichage sur le
   hero produit, 16 px pour les textes longs).
   Pour revenir à Bebas partout, supprimer ce bloc.
   -------------------------------------------------------------------------- */
@font-face{ font-family: "Lato Bold"; src: url("fonts/Lato-Bold.woff2") format("woff2"); font-weight: normal; font-style: normal; font-display: swap; }

.typo.title3,
.typo.title3 p,
.typo.title3 span{
  font-family: "Lato Bold", -apple-system, "Segoe UI", sans-serif;
  font-size: 24px;
  line-height: 1.25;
  letter-spacing: -.005em;
  text-transform: none;
}
.typo.title4,
.typo.title4 p,
.typo.title4 span{
  font-family: "Lato Bold", -apple-system, "Segoe UI", sans-serif;
  font-size: 18px;
  line-height: 1.35;
  letter-spacing: 0;
  text-transform: none;
}
@media (max-width: 1024px){
  .typo.title3, .typo.title3 p, .typo.title3 span{ font-size: 20px; }
  .typo.title4, .typo.title4 p, .typo.title4 span{ font-size: 17px; }
}

/* --------------------------------------------------------------------------
   31 — Mouvements : un seul rythme
   Le parent anime en « all ease 0.5s » (0,8 s sur les actualités) : survols
   mous. Durée ramenée à 180 ms et courbe commune, sur ses propres
   sélecteurs (liste générée depuis main.css). Les ouvertures de menu
   mobile (0,3 s) sont laissées telles quelles.
   -------------------------------------------------------------------------- */
.pagefooter__sectionLink,
.pagefooter__sectionLink:hover,
.pagefooter__sectionSocialItem,
.pagefooter__sectionSocialItem:hover,
.pagefooter__bottomLink,
.pagefooter__bottomLink:hover,
header .navbar .navbar-nav li a:hover,
header .navbar .navbar-nav li a:focus,
.topHeader__info__socialItem,
.topHeader__info__socialItem:hover,
.button.primary,
.button.primary:hover,
.button.secondary:hover,
.stickynavigationItem,
.stickynavigationItem:hover,
.stickynavigationItem.active,
.customSelect__optionItem,
.customSelect__title,
.customSelect__optionItem:hover,
.home__slider__arrow,
.home__slider__arrow:hover,
.home__slider__pagination .swiper-pagination-bullet,
.home__slider__pagination .swiper-pagination-bullet.swiper-pagination-bullet-active,
.singlePage__manual__select__title,
.singlePage__manual__select__title:hover,
.singlePage__manual__select__list,
.singlePage__manual__select__list.active,
.singlePage__manual__select__listItem,
.singlePage__manual__select__listItem:hover,
.faq__item,
.allnews__items,
.allnews__items:hover,
.contact__formLoader__optionItem,
.contact__formLoader__title,
.contact__formLoader__optionItem:hover{
  transition-duration: var(--t-fast);
  transition-timing-function: var(--ease);
}
#tarteaucitronAllAllowed,
#tarteaucitronAllDenied,
#tarteaucitronAlertBig #tarteaucitronCloseAlert,
#tarteaucitronAlertBig #tarteaucitronPersonalize,
#tarteaucitron #tarteaucitronPrivacyUrl,
#tarteaucitron #tarteaucitronPrivacyUrlDialog,
#tarteaucitronRoot .tarteaucitronAsk .tarteaucitronDeny,
#tarteaucitronRoot .tarteaucitronAsk .tarteaucitronAllow,
.modal-content input[type="submit"],
.modal-content input[type="submit"]:hover,
.contact__form input[type="submit"],
.contact__form input[type="submit"]:hover{
  transition-duration: var(--t-fast) !important;
  transition-timing-function: var(--ease) !important;
}
/* Déplacements (carrousel produits, colonne FAQ) : durée longue. */
.home__product__mover,
.faq__section__sticky{
  transition-duration: var(--t-slow);
  transition-timing-function: var(--ease);
}

/* Mouvement réduit demandé par le système : quasi instantané. 0,01 ms et non
   0 : les scripts du parent et Swiper attendent l'évènement transitionend,
   qui ne se déclenche pas avec une durée nulle. */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
  }
}


/* ==========================================================================
   v0.7 — REFONTE VISUELLE
   Une règle : plus jamais de texte posé sur une photo.
   L'image vit dans un cadre (arrondi, recadrée proprement), le texte sur un
   fond uni à côté ou en dessous. Ombres réservées au survol et aux éléments
   qui flottent. Inspiration : ateq.com (maison mère), Apple, Insta360.
   ========================================================================== */

/* --------------------------------------------------------------------------
   32 — En-têtes de page en deux colonnes
   À propos, tous produits, FAQ, news, marque, contact, 404.
   Avant : photo plein cadre sous le titre, voilée. Après : titre et texte à
   gauche sur fond clair, photo à droite dans un grand cadre arrondi.
   Grille de 4 rangées (1fr auto auto 1fr) : le texte est centré
   verticalement face à la photo, qui occupe toute la hauteur.
   -------------------------------------------------------------------------- */
.allproduct__hero,
.faq__hero,
.allnews__hero,
.brand__hero,
.contact__hero,
.about__hero,
.page404{
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  grid-template-rows: 1fr auto auto 1fr;
  column-gap: clamp(32px, 5vw, 80px);
  row-gap: 24px;
  align-items: center;
  height: auto;
  min-height: 0;
  padding: calc(112px + 56px) 64px 72px;
  background: linear-gradient(180deg, var(--ateq-paper) 0%, var(--ateq-surface) 100%);
}
.allproduct__hero > .allproduct__hero__content,
.faq__hero__content,
.allnews__hero > .allnews__hero__content,
.brand__hero > .brand__hero__content,
.contact__hero > .contact__hero__content,
.about__hero__content,
.page404__content{
  grid-column: 1;
  grid-row: 2;
  width: auto;
  max-width: 560px;
  min-width: 0;
}
.brand__hero__buttonContainer{
  grid-column: 1;
  grid-row: 3;
}
.allproduct__hero__img,
.faq__hero__img,
.allnews__hero__img,
.brand__hero__img,
.contact__hero__img,
.about__hero__background,
.page404__image{
  grid-column: 2;
  grid-row: 1 / -1;
  position: relative;
  top: auto;
  right: auto;
  bottom: auto;
  left: auto;
  width: 100%;
  height: clamp(300px, 34vw, 500px);
  object-fit: cover;
  object-position: center;
  background-size: cover;
  background-position: center;
  opacity: 1;
  z-index: auto;
  transform: none;
  border-radius: var(--r-lg);
  -webkit-mask-image: none;
  mask-image: none;
}
@media (max-width: 1024px){
  .allproduct__hero,
  .faq__hero,
  .allnews__hero,
  .brand__hero,
  .contact__hero,
  .about__hero,
  .page404{
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto;
    padding: 112px 16px 40px;
  }
  .allproduct__hero > .allproduct__hero__content,
  .faq__hero__content,
  .allnews__hero > .allnews__hero__content,
  .brand__hero > .brand__hero__content,
  .contact__hero > .contact__hero__content,
  .about__hero__content,
  .page404__content{ grid-row: 1; max-width: none; }
  .brand__hero__buttonContainer{ grid-row: 2; }
  .allproduct__hero__img,
  .faq__hero__img,
  .allnews__hero__img,
  .brand__hero__img,
  .contact__hero__img,
  .about__hero__background,
  .page404__image{
    grid-column: 1;
    grid-row: auto;
    height: 220px;
    border-radius: var(--r-md);
  }
}

/* --------------------------------------------------------------------------
   33 — Accueil : intro des catégories, photo et texte côte à côte
   Bureau : texte sur la moitié gauche (fond blanc), photo pleine sur la
   moitié droite, sans voile. Mobile : photo en haut, texte dessous.
   -------------------------------------------------------------------------- */
.home__product__introOverlay{ display: none; }

@media (min-width: 1025px){
  .home__product__intro .home__product__introImg{
    left: auto;
    right: 0;
    width: 46%;
    transform: none;
    object-fit: cover;
  }
  .home__product__intro > .home__product__introContent,
  .home__product__intro > .button{
    max-width: calc(54% - 48px);
  }
}
@media (max-width: 1024px){
  .home__product__intro--mobile{
    height: auto;
    padding: 0 0 24px;
    border-radius: var(--r-md);
    background: var(--ateq-paper);
    box-shadow: var(--ateq-shadow);
  }
  .home__product__intro--mobile .home__product__introImg{
    position: relative;
    z-index: auto;
    width: 100%;
    height: 200px;
    transform: none;
    object-fit: cover;
    margin-bottom: 20px;
  }
  .home__product__intro--mobile .home__product__introContent{ padding: 0 20px; }
  .home__product__intro--mobile > .button{ margin: 16px 20px 0; }
}

/* --------------------------------------------------------------------------
   34 — Accueil : grand visuel du carrousel dans un cadre
   Bureau uniquement (le parent masque les visuels sous 1 024 px).
   Le visuel occupe une tuile blanche arrondie à droite ; le texte reste à
   gauche et ne le chevauche plus, quelle que soit la largeur d'écran.
   -------------------------------------------------------------------------- */
@media (min-width: 1025px){
  .home__slider__slideImage{
    width: min(46%, 780px);
    height: min(600px, 68vh);
    min-height: 420px;
    max-height: none;
    margin-right: 64px;
    padding: 40px;
    border-radius: var(--r-lg);
    background-color: var(--ateq-paper);
    background-origin: content-box;
    background-size: contain;
    box-shadow: var(--ateq-shadow);
  }
  .home__slider__contentWrapper{
    max-width: min(528px, calc(50vw - 128px));
  }
  .home__slider__buttonContainer{
    flex-wrap: wrap;
    gap: 12px;
    max-width: min(560px, calc(50vw - 128px));
  }
  .home__slider__button{ margin-right: 0; }
}

/* --------------------------------------------------------------------------
   35 — Accueil : tuiles « Main pages »
   page-home.php (copie enfant) sort désormais l'image en <img> en tête de
   tuile. Texte dessous, sur fond gris clair. Tuile pleine largeur : image à
   gauche, texte à droite. Tuile newsletter : fond encre, texte blanc.
   -------------------------------------------------------------------------- */
.home__pages{
  align-items: stretch;
  row-gap: 24px;
  padding: 0 64px;   /* mêmes marges que les sections produits (.home__product) */
}
@media (max-width: 1024px){
  .home__pages{ padding: 0 16px; }
}
.home__pages__block.ateq-tile{
  height: auto;
  min-height: 0;
  padding: 0;
  margin-bottom: 0;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  background: var(--ateq-surface);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.ateq-tile__media{
  height: 300px;
  overflow: hidden;
  background: var(--ateq-surface-2);
}
.ateq-tile__img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--t-slow) var(--ease);
}
.ateq-tile:hover .ateq-tile__img{ transform: scale(1.03); }
.ateq-tile .home__pages__blockContent{
  padding: 32px 40px 40px;
}
.ateq-tile .home__pages__blockContent__title{ margin: 0 0 8px; }
.ateq-tile .home__pages__blockContent__text{ margin: 0; max-width: 46ch; }
.ateq-tile .home__pages__blockContent__button{ margin-top: 24px; }

@media (min-width: 1025px){
  .home__pages__block--3.ateq-tile{
    flex-direction: row;
    align-items: center;
  }
  .home__pages__block--3 .ateq-tile__media{
    flex: 0 0 58%;
    height: 380px;
  }
  .home__pages__block--3 .home__pages__blockContent{ padding: 40px 56px; }
}

.ateq-tile--accent.home__pages__block{
  background: var(--ateq-ink);
  justify-content: center;
}
.ateq-tile--accent .home__pages__blockContent{ padding: 48px 40px; }
.ateq-tile--accent .typo.white,
.ateq-tile--accent .typo.light{
  color: var(--ateq-on-accent);
  opacity: 1;
}
.ateq-tile--accent .home__pages__blockContent__text{ opacity: .8; }

@media (max-width: 1024px){
  .ateq-tile__media{ height: 200px; }
  .ateq-tile .home__pages__blockContent{ padding: 24px 20px 28px; }
}
@media (prefers-reduced-motion: reduce){
  .ateq-tile:hover .ateq-tile__img{ transform: none; }
}

/* --------------------------------------------------------------------------
   36 — À propos : texte d'histoire sur une carte blanche
   Le parent posait le texte directement sur la carte du monde (image de
   fond). Le visuel reste en toile de fond, le texte passe sur une carte.
   -------------------------------------------------------------------------- */
.about__wrapper{
  padding: 120px 64px;
  background-color: var(--ateq-surface);
}
.about__wrapper__content{
  width: 680px;
  max-width: 100%;
  padding: 48px 56px;
  background: var(--ateq-paper);
  border-radius: var(--r-lg);
  box-shadow: var(--ateq-shadow-up);
}
/* Le parent faisait remonter ce bloc de 200 px sur l'en-tête (marge
   négative), prévu pour l'ancien visuel plein cadre. Avec l'en-tête en deux
   colonnes, il recouvrirait la photo : il reprend sa place sous l'en-tête. */
.about__intro{ margin-top: 0; padding-top: 24px; }
/* Le parent écrivait ce texte en blanc à 60 % : invisible sur la carte. */
.about__wrapper__content p,
.about__wrapper__content li,
.about__wrapper__content i,
.about__wrapper__content strong{
  color: var(--ateq-steel);
}
.about__wrapper__content strong{ color: var(--ateq-ink); }
@media (max-width: 767px){
  .about__wrapper{ padding: 64px 16px; }
  .about__wrapper__content{ padding: 32px 24px; }
}

/* --------------------------------------------------------------------------
   37 — Cadres d'images homogènes
   -------------------------------------------------------------------------- */
/* Visuels produit : marge intérieure, l'appareil ne touche plus les bords. */
.productCardsImage,
.home__product__itemImage{
  padding: 16px;
  background-color: var(--ateq-surface);
  border-radius: var(--r-sm);
}

/* Actualités : image recadrée par la carte, léger zoom au survol,
   pastille « New » discrète au lieu d'un bandeau rouge en gros titre. */
.allnews__items{
  overflow: hidden;
  border-radius: var(--r-md);
}
.allnews__items__image{
  transition: transform var(--t-slow) var(--ease);
}
.allnews__items:hover .allnews__items__image{ transform: scale(1.03); }
.allnews__items .allnews__itemsNews.typo{
  top: 16px;
  left: 16px;
  padding: 6px 12px;
  border-radius: var(--r-pill);
  font-family: "Lato Bold", -apple-system, "Segoe UI", sans-serif;
  font-size: 12px;
  line-height: 1;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ateq-on-accent);
  background-color: var(--ateq-red);
}

/* Vidéos : vignette arrondie (miniature HD via partials/video.php). */
.videoCards__cover{
  border-radius: var(--r-md);
  overflow: hidden;
  background-color: var(--ateq-surface-2);
}

/* Bureaux (À propos) et logos revendeurs (contact). */
.about__office__image{
  border-radius: var(--r-md);
}
/* Logos : entiers, centrés sur fond blanc, au lieu d'être recadrés. */
.contact_supplier_item{
  background-color: var(--ateq-paper);
  background-size: contain;
  background-origin: content-box;
  padding: 20px;
}

/* Portraits d'équipe : même rayon que le reste. */
.teamCards__image{
  border-radius: var(--r-sm);
}

@media (prefers-reduced-motion: reduce){
  .allnews__items:hover .allnews__items__image{ transform: none; }
}

/* --------------------------------------------------------------------------
   38 — Finitions des en-têtes et de la page À propos
   -------------------------------------------------------------------------- */
/* Texte d'introduction des en-têtes : plus grand, gris doux, pour une
   hiérarchie nette sous le titre. */
.allproduct__hero__content .typo.body1,
.faq__hero__content .typo.body1,
.allnews__hero__content .typo.body1,
.brand__hero__content .typo.body1,
.contact__hero__content .typo.body1,
.about__hero__text.typo.body1,
.page404__text.typo{
  font-family: "Lato Regular", -apple-system, "Segoe UI", sans-serif;
  font-size: 18px;
  line-height: 1.55;
  color: var(--ateq-steel);
  opacity: 1;
  text-transform: none;
}
.allproduct__hero__title,
.faq__hero__title,
.allnews__hero__title,
.brand__hero__title,
.contact__hero__title,
.about__hero__title,
.page404__title{
  margin-bottom: 16px;
}
/* Bloc « histoire » : même rayon que les en-têtes. */
.about__wrapper{
  border-radius: var(--r-lg);
  overflow: hidden;
}
@media (max-width: 1024px){
  .allproduct__hero__content .typo.body1,
  .faq__hero__content .typo.body1,
  .allnews__hero__content .typo.body1,
  .brand__hero__content .typo.body1,
  .contact__hero__content .typo.body1,
  .about__hero__text.typo.body1,
  .page404__text.typo{ font-size: 16px; }
}


/* ==========================================================================
   v0.8 — ALIGNEMENT SUR ATEQ.COM
   Angles vifs partout, noir #0C0C0E, titres en Lato casse normale, aplats
   au lieu d'ombres et de dégradés, pied de page sombre.
   Les jetons de rayon valent 0 (voir :root) : toutes les règles qui les
   utilisent deviennent droites d'un coup. Ci-dessous : ce qui restait rond
   ou en Bebas dans le parent, et les finitions.
   ========================================================================== */

/* --------------------------------------------------------------------------
   39 — Titres : Lato Bold, casse normale, approche resserrée
   Bebas Neue (capitales condensées) est remplacé partout. Tailles revues :
   Lato est plus large que Bebas à corps égal.
   -------------------------------------------------------------------------- */
.typo.title1, .typo.title1 p, .typo.title1 span,
.typo.title2, .typo.title2 p, .typo.title2 span,
.modal-content h2,
.about__wrapper__content h1, .about__wrapper__content h2, .about__wrapper__content h3, .about__wrapper__content h4, .about__wrapper__content h5,
.faq__item_inner h1, .faq__item_inner h2, .faq__item_inner h3, .faq__item_inner h4, .faq__item_inner h5,
.contact__intro__content h1, .contact__intro__content h2, .contact__intro__content h3, .contact__intro__content h4, .contact__intro__content h5,
.brand__content h1, .brand__content h2, .brand__content h3, .brand__content h4, .brand__content h5,
.brand__content b, .brand__content strong{
  font-family: "Lato Bold", -apple-system, "Segoe UI", sans-serif;
  font-weight: normal;
  text-transform: none;
}
.typo.title1, .typo.title1 p, .typo.title1 span{
  font-size: 56px;
  line-height: 1.05;
  letter-spacing: -.025em;
}
.typo.title2, .typo.title2 p, .typo.title2 span,
.modal-content h2,
.about__wrapper__content h1, .faq__item_inner h1, .contact__intro__content h1, .brand__content h1{
  font-size: 40px;
  line-height: 1.1;
  letter-spacing: -.02em;
}
.about__wrapper__content h2, .faq__item_inner h2, .contact__intro__content h2, .brand__content h2{
  font-size: 28px;
  line-height: 1.2;
  letter-spacing: -.015em;
}
.about__wrapper__content h3, .about__wrapper__content h4, .about__wrapper__content h5,
.faq__item_inner h3, .faq__item_inner h4, .faq__item_inner h5,
.contact__intro__content h3, .contact__intro__content h4, .contact__intro__content h5,
.brand__content h3, .brand__content h4, .brand__content h5,
.brand__content b, .brand__content strong{
  font-size: 20px;
  line-height: 1.3;
  letter-spacing: -.01em;
}
.typo.title3, .typo.title3 p, .typo.title3 span{ letter-spacing: -.015em; }

/* Hero de la fiche produit : 96 px pensés pour Bebas. */
.single-page .singlePage__presentationTitle,
.single-page .singlePage__presentationTitle p{
  font-size: 72px;
  line-height: 1;
  letter-spacing: -.03em;
}
/* Fenêtre des cookies (tarteaucitron). */
#tarteaucitronRoot #dialogTitle,
#tarteaucitronRoot .tarteaucitronH2,
#tarteaucitronRoot .tarteaucitronH3{
  font-family: "Lato Bold", -apple-system, "Segoe UI", sans-serif !important;
  text-transform: none !important;
  letter-spacing: -.01em !important;
}
#tarteaucitronRoot #dialogTitle{ font-size: 28px !important; }

@media (max-width: 1024px){
  .typo.title1, .typo.title1 p, .typo.title1 span{ font-size: 40px; }
  .typo.title2, .typo.title2 p, .typo.title2 span,
  .modal-content h2,
  .about__wrapper__content h1, .faq__item_inner h1, .contact__intro__content h1, .brand__content h1{ font-size: 30px; }
  .single-page .singlePage__presentationTitle,
  .single-page .singlePage__presentationTitle p{ font-size: 44px; }
}
@media (max-width: 480px){
  .typo.title1, .typo.title1 p, .typo.title1 span{ font-size: 34px; }
}

/* --------------------------------------------------------------------------
   40 — Boutons : rectangles nets
   Primaire rouge, survol noir. Secondaire : filet noir, survol plein.
   -------------------------------------------------------------------------- */
.button,
.modal-content input[type="submit"],
.contact__form input[type="submit"]{
  border-radius: 0 !important;
  min-height: 48px;
  padding-left: 24px;
  padding-right: 24px;
  letter-spacing: .01em;
}
.button.primary:hover,
.button.primary:focus{
  background: var(--ateq-ink);
  border-color: var(--ateq-ink);
  color: var(--ateq-on-accent);
}

/* --------------------------------------------------------------------------
   41 — Éléments ronds du parent rendus droits
   -------------------------------------------------------------------------- */
.home__product__navigationButton,
.singlePage__gallery__arrow,
.store__item__infoButton,
.contact__hours__itemHours__itemTo,
.languageSwitcher__flagContainer,
.singlePage__manual__select__listFlag__container,
.singlePage__manual__select__listFlag,
.contact__hours__itemNumber__flagContainer,
.singlePage__specFeat__listDot,
.single-page .singlePage__gallery__arrow{
  border-radius: 0 !important;
}
/* Pagination du carrousel : tirets au lieu de points. */
.home__slider__pagination .swiper-pagination-bullet{
  width: 24px;
  height: 2px;
  border-radius: 0;
}

/* --------------------------------------------------------------------------
   42 — Cartes : à plat
   Filet gris au repos, filet noir au survol, pas de soulèvement ni d'ombre.
   L'image zoome légèrement à la place (actualités, tuiles).
   -------------------------------------------------------------------------- */
.productCardsInner:hover,
.home__product__itemInner:hover,
.store__item:hover,
.faq__item:hover,
.allnews__items:hover,
.brand__product__item:hover,
.videoCards__container:hover{
  transform: none;
  box-shadow: 0 0 0 1px var(--ateq-ink);
}
/* Cartes posées sur un visuel ou flottantes : ombre conservée. */
.about__wrapper__content{ box-shadow: none; }

/* --------------------------------------------------------------------------
   43 — Aplats au lieu de dégradés
   -------------------------------------------------------------------------- */
.allproduct__hero,
.faq__hero,
.allnews__hero,
.brand__hero,
.contact__hero,
.about__hero,
.page404{
  background: var(--ateq-paper);
  border-bottom: 1px solid var(--ateq-line);
}
.single-page .singlePage__presentation{
  background: var(--ateq-surface);
}
.home__slider__slideImage{ box-shadow: none; }

/* --------------------------------------------------------------------------
   44 — Pied de page sombre
   Les logos et icônes du parent sont blancs d'origine : plus de filtre.
   -------------------------------------------------------------------------- */
footer.pagefooter{ border-top: 0; }
footer.pagefooter .pagefooter__introLogo{
  filter: none;
  opacity: 1;
}
footer.pagefooter .pagefooter__sectionSocialItem{ background: transparent; }
footer.pagefooter .pagefooter__sectionSocialItem img{
  filter: none;
  opacity: .7;
}
footer.pagefooter .button.primary:hover{
  background: var(--ateq-paper);
  border-color: var(--ateq-paper);
  color: var(--ateq-ink);
}

/* --------------------------------------------------------------------------
   45 — Hero d'accueil sur mobile : hauteur au contenu
   Le parent masque le visuel sous 1 024 px mais garde 760 px de hauteur :
   un grand vide gris autour du texte. Le bloc prend la hauteur du texte.
   -------------------------------------------------------------------------- */
@media (max-width: 1024px){
  .home__slider{
    height: auto;
    min-height: 0;
    max-height: none;
  }
  .home__slider__container{ height: auto; }
  .home__slider__content{
    position: relative;
    height: auto;
    min-height: 0;
    max-height: none;
    padding: 112px 16px 48px;
  }
}
/* Flèches du carrousel : SVG blancs du parent, quasi invisibles sur fond
   clair. Sur mobile, les visuels étant masqués, flèches et tirets ne
   servent à rien : retirés. */
.home__slider__arrow img{
  filter: brightness(0);
  opacity: .55;
}
.home__slider__arrow:hover img{ opacity: 1; }
@media (max-width: 1024px){
  .home__slider__arrowsContainer{ display: none; }
}


/* ==========================================================================
   v0.9 — BARRE DE CATÉGORIES ET TIRETS ROUGES (style ateq.com)
   ========================================================================== */

/* --------------------------------------------------------------------------
   46 — Barre de catégories (accueil, tous produits)
   Avant : pastilles grises flottantes à cheval sur le hero, icônes,
   fond rouge plein au survol. Après : barre pleine largeur collée sous
   l'en-tête, onglets texte, soulignement rouge sur la catégorie en cours.
   Défile au doigt sur mobile, sans barre de défilement visible.
   -------------------------------------------------------------------------- */
.stickynavigationContainer,
.home__content .stickynavigationContainer{
  top: 112px;
  width: 100%;
  height: auto;
  margin: 0;
  transform: none;
  justify-content: flex-start;
  background: rgba(255,255,255,.94);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  backdrop-filter: saturate(180%) blur(12px);
  border-top: 1px solid var(--ateq-line);
  border-bottom: 1px solid var(--ateq-line);
  box-shadow: none;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.stickynavigationContainer::-webkit-scrollbar{ display: none; }
/* Accueil : la barre est dans .home__product (marges de 64 px) ; elle en
   sort pour couvrir toute la largeur. */
.home__product > .stickynavigationContainer{
  width: auto;
  margin: 0 -64px 72px;
}
.stickynavigation{
  margin: 0 auto;            /* centré quand tout tient, défilant sinon */
  padding: 0 44px;
  gap: 0;
}
.stickynavigationItem,
.stickynavigationItem:hover,
.stickynavigationItem.active{
  position: relative;
  padding: 18px 20px;
  background: transparent;
}
.stickynavigationItem__img{ display: none; }
.stickynavigationItem .stickynavigationItem__text.typo{
  font-family: "Lato Regular", -apple-system, "Segoe UI", sans-serif;
  font-size: 15px;
  line-height: 20px;
  letter-spacing: 0;
  text-transform: none;
  white-space: nowrap;
  color: var(--ateq-steel);
  transition: color var(--t-fast) var(--ease);
}
.stickynavigationItem:hover .stickynavigationItem__text.typo,
.stickynavigationItem.active .stickynavigationItem__text.typo{
  color: var(--ateq-ink);
}
.stickynavigationItem::after{
  content: "";
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: -1px;
  height: 2px;
  background: var(--ateq-red);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--t-fast) var(--ease);
}
.stickynavigationItem:hover::after{
  transform: scaleX(1);
  background: var(--ateq-line);
}
.stickynavigationItem.active::after{
  transform: scaleX(1);
  background: var(--ateq-red);
}
@media (max-width: 1024px){
  /* Le parent passe .home__product en overflow: hidden sur mobile, ce qui
     empêche la barre de coller sous l'en-tête et la décale sur le titre.
     Par défaut : barre dans le flux. Si le navigateur connaît
     overflow: clip (coupe sans créer de zone de défilement), on rétablit
     le collage sous l'en-tête mobile (72 px). */
  .stickynavigationContainer,
  .home__content .stickynavigationContainer,
  .home__product > .stickynavigationContainer{
    position: relative;
    top: auto !important;
    width: auto;
    margin: 0 -16px 40px;
    transform: none;
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 16px, #000 calc(100% - 32px), transparent 100%);
    mask-image: linear-gradient(to right, transparent 0, #000 16px, #000 calc(100% - 32px), transparent 100%);
  }
  @supports (overflow: clip){
    .home__product{ overflow: clip; }
    .home__product > .stickynavigationContainer{
      position: sticky;
      top: 72px !important;
    }
  }
  .stickynavigation{ padding: 0 16px; }
  .stickynavigationItem,
  .stickynavigationItem:hover,
  .stickynavigationItem.active{ padding: 16px 14px; }
  .stickynavigationItem::after{ left: 14px; right: 14px; }
}
@media (prefers-reduced-motion: reduce){
  .stickynavigationItem::after{ transition: none; }
}

/* --------------------------------------------------------------------------
   47 — Tirets rouges (signature ateq.com)
   Un trait rouge court au-dessus de chaque titre de section (v0.10 : il
   était à côté en v0.9), et au-dessus du grand titre des en-têtes.
   -------------------------------------------------------------------------- */
.home__product__title,
.faq__section__stickyTitle,
.singlePage__specInfo__title,
.about__team__headingTitle.typo.title2,
.singlePage__manual__title,
.comparison__title,
.singlePage__gallery__title,
.brand__faq__title,
.contact__team_title,
.brand__product__title{
  position: relative;
}
.home__product__title::before,
.faq__section__stickyTitle::before,
.singlePage__specInfo__title::before,
.about__team__headingTitle.typo.title2::before,
.singlePage__manual__title::before,
.comparison__title::before,
.singlePage__gallery__title::before,
.brand__faq__title::before,
.contact__team_title::before,
.brand__product__title::before{
  content: "";
  display: block;
  width: 32px;
  height: 3px;
  margin: 0 0 16px;
  background: var(--ateq-red);
}
/* Titres centrés : trait centré au-dessus. */
.typo.center::before{
  margin-left: auto;
  margin-right: auto;
}
/* En-têtes : trait au-dessus du titre principal. */
.home__slider__contentTitle::before,
.allproduct__hero__title::before,
.faq__hero__title::before,
.allnews__hero__title::before,
.brand__hero__title::before,
.contact__hero__title::before,
.about__hero__title::before,
.page404__title::before,
.single-page .singlePage__presentationTitle::before{
  content: "";
  display: block;
  width: 40px;
  height: 3px;
  margin-bottom: 24px;
  background: var(--ateq-red);
}


/* ==========================================================================
   v0.10 — EN-TÊTE, BARRE DE CATÉGORIES, BOUTONS
   ========================================================================== */

/* --------------------------------------------------------------------------
   48 — Ligne de navigation (bureau)
   Le parent place logo et menu avec d'anciennes largeurs en pourcentage
   (logo 50 %, libellé 55 %…) et des flottants. Remplacé par une ligne
   flexible : logo noir + libellé « TPMS » séparés par un filet à gauche,
   menu à droite, le tout centré verticalement. Hauteur totale de l'en-tête
   inchangée (112 px), les gabarits en dépendent.
   -------------------------------------------------------------------------- */
@media (min-width: 1025px){
  header .navbar,
  header .navbar .navbar-container-fluid{
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 70px;
    margin: 0;
    border: 0;
  }
  header .navbar .navbar-container-fluid{ width: 100%; }
  header .navbar .navbar-header{
    float: none;
    flex: 0 0 auto;
    margin: 0;
  }
  header .navbar .headerlogo{
    width: auto;
    margin: 0;
    padding: 0;
  }
  header .navbar .headerlogo .headerLogoLink{
    display: flex;
    align-items: center;
    gap: 16px;
    text-decoration: none;
  }
  header .navbar .headerlogo .headerLogoImg{
    width: auto;
    padding: 0;
  }
  header .navbar .headerlogo .headerLogoImg img{
    display: block;
    width: auto;
    height: 32px;
    filter: none;
  }
  header .navbar .headerlogo .headerLogoLabel{
    width: auto;
    padding-left: 16px;
    border-left: 1px solid var(--ateq-line);
    font-family: "Lato Bold", -apple-system, "Segoe UI", sans-serif;
    font-size: 13px;
    line-height: 32px;
    letter-spacing: .12em;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--ateq-ink);
  }
  header .navbar .navbar-nav{
    float: none;
    display: flex;
    align-items: center;
    margin: 0;
    padding: 0;
  }
  header .navbar .navbar-nav > li{ float: none; }
  header .navbar .navbar-nav li .menu-products,
  header .navbar .navbar-nav li .menu-wtb,
  header .navbar .navbar-nav li .menu-support,
  header .navbar .navbar-nav li .menu-comp{ margin-right: 0; }
}

/* Mobile : même logo noir. */
.headerlogoMob .headerlogoMobImg{
  width: auto;
  height: 26px;
  filter: none;
}

/* --------------------------------------------------------------------------
   49 — Barre de catégories : compacte, avec icônes
   Retour aux icônes de catégorie ; la barre n'occupe plus toute la
   largeur : un bloc centré, ajusté à son contenu, avec un filet tout
   autour. Toujours collée sous l'en-tête et défilante si elle déborde.
   -------------------------------------------------------------------------- */
.stickynavigationContainer,
.home__content .stickynavigationContainer,
.home__product > .stickynavigationContainer{
  width: max-content;
  max-width: 100%;
  margin: 0 auto 72px;
  border: 1px solid var(--ateq-line);
  -webkit-mask-image: none;
  mask-image: none;
}
.stickynavigation{ padding: 0 8px; }
.stickynavigationItem .stickynavigationItem__img{
  display: block;
  width: 22px;
  height: 22px;
  margin-right: 10px;
  object-fit: contain;
  opacity: .9;
}
.stickynavigationItem,
.stickynavigationItem:hover,
.stickynavigationItem.active{ padding: 16px 18px; }
.stickynavigationItem::after{ left: 18px; right: 18px; }
@media (max-width: 1024px){
  .stickynavigationContainer,
  .home__content .stickynavigationContainer,
  .home__product > .stickynavigationContainer{
    margin: 0 auto 40px;
  }
  .stickynavigation{ padding: 0 4px; }
  .stickynavigationItem,
  .stickynavigationItem:hover,
  .stickynavigationItem.active{ padding: 14px 12px; }
  .stickynavigationItem::after{ left: 12px; right: 12px; }
  .stickynavigationItem .stickynavigationItem__img{ width: 20px; height: 20px; margin-right: 8px; }
}

/* --------------------------------------------------------------------------
   50 — Plus d'effet au clic sur les boutons
   Les styles de survol étaient aussi posés sur :focus : un bouton cliqué
   garde le focus et restait noir (fond et bordure) après le clic. Ils ne
   s'appliquent plus qu'au survol et à la navigation clavier
   (:focus-visible) ; après un clic souris, le bouton reprend son état de
   repos.
   -------------------------------------------------------------------------- */
.button.primary:focus:not(:focus-visible):not(:hover),
.button.primary:active:not(:hover){
  color: var(--ateq-on-accent);
  background: var(--ateq-red);
  border-color: var(--ateq-red);
}
.button.secondary:focus:not(:focus-visible):not(:hover),
.button.secondary:active:not(:hover){
  color: var(--ateq-ink);
  background: transparent;
  border-color: var(--ateq-ink);
}
.ateq-tile--accent .button.primary:focus:not(:focus-visible):not(:hover){
  background: var(--ateq-red);
  border-color: var(--ateq-red);
}
header .navbar .navbar-nav li a:focus:not(:focus-visible):not(:hover){
  color: var(--ateq-ink);
}
button:focus:not(:focus-visible),
.button:focus:not(:focus-visible),
a:focus:not(:focus-visible),
[role="button"]:focus:not(:focus-visible),
input[type="submit"]:focus:not(:focus-visible){
  outline: none !important;
  box-shadow: none;
}


/* ==========================================================================
   v0.11 — EN-TÊTE CENTRÉ ET NOUVELLE PAGE D'ACCUEIL
   ========================================================================== */

/* --------------------------------------------------------------------------
   51 — En-tête : logo à gauche, liens centrés, bouton « Where to buy » à
   droite. Grille 1fr / auto / 1fr : les liens restent au centre exact de
   l'écran quelle que soit la largeur du logo ou du bouton.
   -------------------------------------------------------------------------- */
@media (min-width: 1025px){
  header .navbar .navbar-container-fluid{
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    column-gap: 24px;
  }
  header .navbar .navbar-header{ justify-self: start; }
  header .navbar .navbar-nav{ justify-self: center; }
  header .header__cta{ justify-self: end; }
  header .navbar .navbar-nav li a{ font-size: 15px; }
  .header__ctaButton.button{
    min-height: 40px;
    padding: 0 20px;
    display: inline-flex;
    align-items: center;
    font-size: 14px;
    line-height: 1;
    white-space: nowrap;
  }
}
/* En-tête opaque : translucide, il prenait la teinte des visuels sombres
   (en-tête d'accueil) et virait au gris. */
header,
.headerMobile{
  background: var(--ateq-paper);
  background-color: var(--ateq-paper);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
@media (max-width: 1024px){
  header .header__cta{ padding: 16px; }
  .header__ctaButton.button{
    display: flex;
    justify-content: center;
    width: 100%;
  }
}

/* --------------------------------------------------------------------------
   52 — Accueil : base commune
   -------------------------------------------------------------------------- */
.hp{
  --hp-gutter: 64px;
  --hp-pad: max(var(--hp-gutter), calc((100% - 1312px) / 2));
  display: block;
  background: var(--ateq-paper);
  color: var(--ateq-ink);
  font-family: "Lato Regular", -apple-system, "Segoe UI", sans-serif;
}
.hp ul, .hp ol{ list-style: none; margin: 0; padding: 0; }
.hp-section{ padding: 112px var(--hp-pad); }
.hp-head{ max-width: 720px; margin-bottom: 56px; }
.hp-head--split{
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  max-width: none;
}
.hp-title{
  margin: 0;
  font-family: "Lato Bold", -apple-system, "Segoe UI", sans-serif;
  font-weight: normal;
  font-size: 40px;
  line-height: 1.1;
  letter-spacing: -.02em;
  color: var(--ateq-ink);
}
.hp-title::before{
  content: "";
  display: block;
  width: 32px;
  height: 3px;
  margin-bottom: 20px;
  background: var(--ateq-red);
}
.hp-title--center{ text-align: center; }
.hp-title--center::before{ margin-left: auto; margin-right: auto; }
.hp-lead{
  margin: 16px 0 0;
  max-width: 60ch;
  font-size: 18px;
  line-height: 1.6;
  color: var(--ateq-steel);
}
.hp-link{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 28px;
  padding-bottom: 4px;
  border-bottom: 2px solid var(--ateq-red);
  font-family: "Lato Bold", -apple-system, "Segoe UI", sans-serif;
  font-size: 15px;
  color: var(--ateq-ink);
  text-decoration: none;
}
.hp-link::after{ content: "→"; transition: transform var(--t-fast) var(--ease); }
.hp-link:hover{ color: var(--ateq-ink); text-decoration: none; }
.hp-link:hover::after{ transform: translateX(4px); }
.hp-head--split .hp-link{ margin-top: 0; }

/* --------------------------------------------------------------------------
   53 — Accueil : en-tête avec image de fond
   Voile sombre dégradé (fort à gauche, sous le texte ; léger à droite) :
   le texte blanc reste lisible quelle que soit la photo.
   -------------------------------------------------------------------------- */
.hp-hero{
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  min-height: clamp(560px, 82vh, 820px);
  padding: calc(112px + 64px) var(--hp-pad) 96px;
  background-color: var(--ateq-ink);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: #FFFFFF;
}
.hp-hero::before{
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(90deg, rgba(12,12,14,.88) 0%, rgba(12,12,14,.62) 42%, rgba(12,12,14,.12) 100%),
    linear-gradient(0deg, rgba(12,12,14,.45) 0%, rgba(12,12,14,0) 40%);
}
.hp-hero__inner{ max-width: 640px; }
.hp-hero__title{
  margin: 0;
  font-family: "Lato Bold", -apple-system, "Segoe UI", sans-serif;
  font-weight: normal;
  font-size: 64px;
  line-height: 1.04;
  letter-spacing: -.03em;
  color: #FFFFFF;
}
.hp-hero__title::before{
  content: "";
  display: block;
  width: 40px;
  height: 3px;
  margin-bottom: 28px;
  background: var(--ateq-red);
}
.hp-hero__text{
  margin: 24px 0 0;
  max-width: 34em;
  font-size: 20px;
  line-height: 1.5;
  color: rgba(255,255,255,.82);
}
.hp-hero__actions{
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 40px;
}
.button.hp-button--light{
  color: #FFFFFF;
  background: transparent;
  border: 1px solid rgba(255,255,255,.6);
}
.button.hp-button--light:hover,
.button.hp-button--light:focus-visible{
  color: var(--ateq-ink);
  background: #FFFFFF;
  border-color: #FFFFFF;
}
.button.hp-button--light:focus:not(:focus-visible):not(:hover){
  color: #FFFFFF;
  background: transparent;
  border-color: rgba(255,255,255,.6);
}

/* --------------------------------------------------------------------------
   54 — Accueil : chiffres clés
   -------------------------------------------------------------------------- */
.hp-stats{
  padding: 0 var(--hp-pad);
  border-bottom: 1px solid var(--ateq-line);
}
.hp-stats__list{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.hp-stats__item{
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 44px 32px;
  border-left: 1px solid var(--ateq-line);
}
.hp-stats__item:first-child{ border-left: 0; padding-left: 0; }
.hp-stats__value{
  font-family: "Lato Bold", -apple-system, "Segoe UI", sans-serif;
  font-size: 48px;
  line-height: 1;
  letter-spacing: -.03em;
  color: var(--ateq-ink);
}
.hp-stats__label{
  font-size: 15px;
  line-height: 1.4;
  color: var(--ateq-steel);
}

/* --------------------------------------------------------------------------
   55 — Accueil : qui sommes-nous
   -------------------------------------------------------------------------- */
.hp-about .hp-lead{ font-size: 22px; line-height: 1.55; max-width: 46ch; color: var(--ateq-ink); }
.hp-about--image{
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 80px;
  align-items: center;
}
.hp-about__img{
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  height: auto;
  object-fit: cover;
}

/* --------------------------------------------------------------------------
   56 — Accueil : applications de la TPMS
   Liste numérotée façon ateq.com : colonnes séparées par des filets.
   -------------------------------------------------------------------------- */
.hp-apps{ padding-top: 0; }
.hp-apps__grid{
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  border-top: 1px solid var(--ateq-line);
}
.hp-apps__item + .hp-apps__item .hp-apps__card{
  padding-left: 28px;
  border-left: 1px solid var(--ateq-line);
}
.hp-apps__card{
  display: block;
  height: 100%;
  padding: 32px 28px 8px 0;
  color: var(--ateq-ink);
  text-decoration: none;
}
a.hp-apps__card:hover{ text-decoration: none; color: var(--ateq-ink); }
a.hp-apps__card:hover .hp-apps__title{ color: var(--ateq-red); }
.hp-apps__media{ margin-bottom: 24px; overflow: hidden; }
.hp-apps__img{ display: block; width: 100%; aspect-ratio: 4 / 3; height: auto; object-fit: cover; }
.hp-apps__num{
  font-family: "Lato Bold", -apple-system, "Segoe UI", sans-serif;
  font-size: 13px;
  letter-spacing: .1em;
  color: var(--ateq-red);
}
.hp-apps__title{
  margin: 20px 0 10px;
  font-family: "Lato Bold", -apple-system, "Segoe UI", sans-serif;
  font-weight: normal;
  font-size: 22px;
  line-height: 1.2;
  letter-spacing: -.01em;
  color: var(--ateq-ink);
  transition: color var(--t-fast) var(--ease);
}
.hp-apps__text{ margin: 0; font-size: 15px; line-height: 1.55; color: var(--ateq-steel); }

/* --------------------------------------------------------------------------
   57 — Accueil : nos produits (une carte par catégorie)
   -------------------------------------------------------------------------- */
.hp-products{ background: var(--ateq-surface); }
.hp-products__grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}
.hp-products__card{
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--ateq-paper);
  box-shadow: 0 0 0 1px var(--ateq-line);
  color: var(--ateq-ink);
  text-decoration: none;
  transition: box-shadow var(--t-fast) var(--ease);
}
.hp-products__card:hover{
  box-shadow: 0 0 0 1px var(--ateq-ink);
  color: var(--ateq-ink);
  text-decoration: none;
}
.hp-products__media{
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--ateq-surface-2);
}
.hp-products__img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--t-slow) var(--ease);
}
.hp-products__card:hover .hp-products__img{ transform: scale(1.03); }
.hp-products__body{
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 28px 28px 32px;
}
.hp-products__title{
  margin: 0 0 8px;
  font-family: "Lato Bold", -apple-system, "Segoe UI", sans-serif;
  font-weight: normal;
  font-size: 22px;
  line-height: 1.2;
  letter-spacing: -.01em;
}
.hp-products__text{ margin: 0 0 24px; font-size: 15px; line-height: 1.55; color: var(--ateq-steel); }
.hp-products__more{
  margin-top: auto;
  font-family: "Lato Bold", -apple-system, "Segoe UI", sans-serif;
  font-size: 14px;
  color: var(--ateq-red);
}
.hp-products__more::after{ content: " →"; }

/* --------------------------------------------------------------------------
   58 — Accueil : clients et partenaires
   -------------------------------------------------------------------------- */
.hp-partners__grid{
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  margin-top: 56px;
  border-top: 1px solid var(--ateq-line);
  border-left: 1px solid var(--ateq-line);
}
.hp-partners__item{
  display: flex;
  align-items: center;
  justify-content: center;
  height: 128px;
  padding: 24px;
  border-right: 1px solid var(--ateq-line);
  border-bottom: 1px solid var(--ateq-line);
}
.hp-partners__img{
  max-width: 100%;
  max-height: 56px;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: grayscale(1);
  opacity: .7;
  transition: filter var(--t-fast) var(--ease), opacity var(--t-fast) var(--ease);
}
.hp-partners__item:hover .hp-partners__img{ filter: none; opacity: 1; }

/* --------------------------------------------------------------------------
   59 — Accueil : bandeau « Où acheter »
   -------------------------------------------------------------------------- */
.hp-cta{
  padding: 88px var(--hp-pad);
  background: var(--ateq-ink);
  color: #FFFFFF;
}
.hp-cta__inner{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 48px;
}
.hp-cta__title{
  margin: 0;
  max-width: 22ch;
  font-family: "Lato Bold", -apple-system, "Segoe UI", sans-serif;
  font-weight: normal;
  font-size: 36px;
  line-height: 1.15;
  letter-spacing: -.02em;
  color: #FFFFFF;
}
.hp-cta__title::before{
  content: "";
  display: block;
  width: 32px;
  height: 3px;
  margin-bottom: 20px;
  background: var(--ateq-red);
}
.hp-cta__text{ margin: 16px 0 0; max-width: 52ch; font-size: 17px; line-height: 1.55; color: rgba(255,255,255,.7); }
.hp-cta .button.primary:hover{ background: #FFFFFF; border-color: #FFFFFF; color: var(--ateq-ink); }

/* --------------------------------------------------------------------------
   60 — Accueil : actualités et événements
   -------------------------------------------------------------------------- */
.hp-news--events{
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: 64px;
}
.hp-news__grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}
.hp-news__card{ display: block; color: var(--ateq-ink); text-decoration: none; }
.hp-news__card:hover{ color: var(--ateq-ink); text-decoration: none; }
.hp-news__media{ aspect-ratio: 16 / 10; overflow: hidden; background: var(--ateq-surface-2); }
.hp-news__img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--t-slow) var(--ease);
}
.hp-news__card:hover .hp-news__img{ transform: scale(1.03); }
.hp-news__date{
  margin: 18px 0 6px;
  font-size: 13px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ateq-steel);
}
.hp-news__title{
  margin: 0;
  font-family: "Lato Bold", -apple-system, "Segoe UI", sans-serif;
  font-weight: normal;
  font-size: 18px;
  line-height: 1.35;
  transition: color var(--t-fast) var(--ease);
}
.hp-news__card:hover .hp-news__title{ color: var(--ateq-red); }

.hp-events .hp-title{ margin-bottom: 40px; }
.hp-events__list{ border-top: 1px solid var(--ateq-line); }
.hp-events__item{
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 20px;
  padding: 22px 0;
  border-bottom: 1px solid var(--ateq-line);
}
.hp-events__date{ display: flex; flex-direction: column; }
.hp-events__day{
  font-family: "Lato Bold", -apple-system, "Segoe UI", sans-serif;
  font-size: 32px;
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--ateq-ink);
}
.hp-events__month{ margin-top: 6px; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--ateq-steel); }
.hp-events__title{
  display: block;
  font-family: "Lato Bold", -apple-system, "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.35;
  color: var(--ateq-ink);
  text-decoration: none;
}
a.hp-events__title:hover{ color: var(--ateq-red); text-decoration: none; }
.hp-events__place{ display: block; margin-top: 4px; font-size: 14px; color: var(--ateq-steel); }

/* --------------------------------------------------------------------------
   61 — Accueil : contact et newsletter
   -------------------------------------------------------------------------- */
.hp-contact{
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  padding: 104px var(--hp-pad);
  background: var(--ateq-surface);
}
.hp-contact__col{ display: flex; flex-direction: column; align-items: flex-start; }
.hp-contact__col--news{ padding-left: 64px; border-left: 1px solid var(--ateq-line); }
.hp-contact__col:first-child{ padding-right: 64px; }
.hp-contact .button{ margin-top: 32px; }
.hp-contact__phones{ margin-top: 24px; }
.hp-contact__phone{
  margin: 0 0 6px;
  font-size: 18px;
  color: var(--ateq-steel);
}
.hp-contact__phone a{ color: var(--ateq-ink); font-family: "Lato Bold", -apple-system, "Segoe UI", sans-serif; text-decoration: none; }
.hp-contact__phone a:hover{ color: var(--ateq-red); }

/* --------------------------------------------------------------------------
   62 — Accueil : tablettes et mobiles
   -------------------------------------------------------------------------- */
@media (max-width: 1200px){
  .hp-apps__grid{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hp-apps__item:nth-child(3n + 1) .hp-apps__card{ padding-left: 0; border-left: 0; }
  .hp-apps__item:nth-child(n + 4) .hp-apps__card{ border-top: 1px solid var(--ateq-line); }
  .hp-partners__grid{ grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .hp-news--events{ grid-template-columns: minmax(0, 1fr); gap: 72px; }
}
@media (max-width: 1024px){
  .hp{ --hp-gutter: 16px; }
  .hp-section{ padding-top: 72px; padding-bottom: 72px; }
  .hp-apps{ padding-top: 0; }
  .hp-head{ margin-bottom: 40px; }
  .hp-head--split{ flex-direction: column; align-items: flex-start; }
  .hp-title{ font-size: 30px; }
  .hp-lead{ font-size: 17px; }
  .hp-hero{ min-height: 520px; padding: calc(72px + 56px) var(--hp-pad) 64px; }
  .hp-hero::before{
    background: linear-gradient(0deg, rgba(12,12,14,.9) 0%, rgba(12,12,14,.7) 55%, rgba(12,12,14,.45) 100%);
  }
  .hp-hero__title{ font-size: 40px; }
  .hp-hero__text{ font-size: 17px; }
  .hp-stats__list{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hp-stats__item{ padding: 28px 16px; }
  .hp-stats__item:nth-child(odd){ border-left: 0; padding-left: 0; }
  .hp-stats__item:nth-child(n + 3){ border-top: 1px solid var(--ateq-line); }
  .hp-stats__value{ font-size: 36px; }
  .hp-about--image{ grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .hp-about .hp-lead{ font-size: 19px; }
  .hp-products__grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .hp-cta{ padding-top: 64px; padding-bottom: 64px; }
  .hp-cta__inner{ flex-direction: column; align-items: flex-start; gap: 32px; }
  .hp-cta__title{ font-size: 28px; }
  .hp-news__grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hp-contact{ grid-template-columns: minmax(0, 1fr); padding-top: 72px; padding-bottom: 72px; }
  .hp-contact__col:first-child{ padding-right: 0; padding-bottom: 56px; }
  .hp-contact__col--news{ padding-left: 0; padding-top: 56px; border-left: 0; border-top: 1px solid var(--ateq-line); }
}
@media (max-width: 767px){
  .hp-hero__title{ font-size: 34px; }
  .hp-apps__grid{ grid-template-columns: minmax(0, 1fr); }
  .hp-apps__item .hp-apps__card,
  .hp-apps__item + .hp-apps__item .hp-apps__card{ padding: 24px 0; border-left: 0; }
  .hp-apps__item + .hp-apps__item .hp-apps__card{ border-top: 1px solid var(--ateq-line); }
  .hp-apps__title{ margin-top: 12px; }
  .hp-products__grid,
  .hp-news__grid{ grid-template-columns: minmax(0, 1fr); }
  .hp-partners__grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hp-partners__item{ height: 104px; }
}
@media (prefers-reduced-motion: reduce){
  .hp-products__card:hover .hp-products__img,
  .hp-news__card:hover .hp-news__img{ transform: none; }
  .hp-link:hover::after{ transform: none; }
}

/* --------------------------------------------------------------------------
   63 — Accueil : contenus de l'ancien site (v0.12)
   -------------------------------------------------------------------------- */
/* Cinq chiffres au lieu de quatre. */
.hp-stats__list{ grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); grid-auto-flow: column; }
.hp-stats__value{ font-size: 44px; }
@media (max-width: 1024px){
  .hp-stats__list{ grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-flow: row; }
  .hp-stats__item:last-child:nth-child(odd){ grid-column: 1 / -1; }
}
/* Partenaires : noms en texte tant que les logos ne sont pas ajoutés. */
.hp-partners__grid{ margin-top: 0; }
.hp-partners__name{
  font-family: "Lato Bold", -apple-system, "Segoe UI", sans-serif;
  font-size: 18px;
  letter-spacing: -.01em;
  text-align: center;
  color: var(--ateq-steel);
}
/* Événements : plage de dates et lieu. */
.hp-events__range{
  display: block;
  margin-top: 6px;
  font-size: 14px;
  color: var(--ateq-ink);
}
.hp-events__place{ margin-top: 2px; }
.hp-events__venue{ display: block; font-size: 13px; color: var(--ateq-steel); }

/* --------------------------------------------------------------------------
   64 — Accueil (v0.13) : une section par bloc
   Événements, actualités, contact et newsletter ne partagent plus une
   même rangée : chacun a sa section pleine largeur, fonds alternés.
   -------------------------------------------------------------------------- */
/* Qui sommes-nous : sous-titre « The number one world supplier ». */
.hp-about__more{
  margin-top: 40px;
  padding-top: 32px;
  border-top: 1px solid var(--ateq-line);
  max-width: 60ch;
}
.hp-about__subtitle{
  margin: 0 0 12px;
  font-family: "Lato Bold", -apple-system, "Segoe UI", sans-serif;
  font-weight: normal;
  font-size: 22px;
  line-height: 1.25;
  letter-spacing: -.01em;
  color: var(--ateq-ink);
}
.hp-about__body{ margin: 0; font-size: 16px; line-height: 1.65; color: var(--ateq-steel); }

/* Événements : cartes en rangée. */
.hp-events{ background: var(--ateq-paper); border-top: 1px solid var(--ateq-line); }
.hp-events .hp-title{ margin-bottom: 0; }
.hp-events__grid{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
}
.hp-events__card{
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 28px 28px 32px;
  background: var(--ateq-paper);
  box-shadow: 0 0 0 1px var(--ateq-line);
  color: var(--ateq-ink);
  text-decoration: none;
  transition: box-shadow var(--t-fast) var(--ease);
}
a.hp-events__card:hover{ box-shadow: 0 0 0 1px var(--ateq-ink); color: var(--ateq-ink); text-decoration: none; }
a.hp-events__card:hover .hp-events__title{ color: var(--ateq-red); }
.hp-events__card .hp-events__date{ flex-direction: row; align-items: baseline; gap: 10px; }
.hp-events__card .hp-events__day{ font-size: 40px; color: var(--ateq-red); }
.hp-events__card .hp-events__month{ margin-top: 0; }
.hp-events__card .hp-events__title{
  margin: 24px 0 10px;
  font-family: "Lato Bold", -apple-system, "Segoe UI", sans-serif;
  font-weight: normal;
  font-size: 20px;
  line-height: 1.25;
  letter-spacing: -.01em;
  transition: color var(--t-fast) var(--ease);
}
.hp-events__card .hp-events__range{ margin-top: 0; font-size: 15px; }
.hp-events__card .hp-events__place{ margin-top: 2px; font-size: 15px; color: var(--ateq-steel); }
.hp-events__card .hp-events__venue{ margin-top: auto; padding-top: 16px; font-size: 13px; }

/* Actualités : quatre cartes, fond gris. */
.hp-news{ background: var(--ateq-surface); }
.hp-news__grid{ grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* Contact : section blanche, texte à gauche, téléphones et bouton à droite. */
.hp-contact{
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: 64px;
  align-items: end;
  padding: 112px var(--hp-pad);
  background: var(--ateq-paper);
}
.hp-contact__actions{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  padding-left: 48px;
  border-left: 3px solid var(--ateq-red);
}
.hp-contact__phones{ margin-top: 0; }
.hp-contact .button{ margin-top: 0; }
.hp-contact__phone{ font-size: 20px; margin-bottom: 8px; }

/* Newsletter : bandeau gris, centré. */
.hp-newsletter{
  padding: 96px var(--hp-pad);
  background: var(--ateq-surface);
  border-top: 1px solid var(--ateq-line);
}
.hp-newsletter__inner{
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 640px;
  margin: 0 auto;
  text-align: center;
}
.hp-newsletter .hp-lead{ margin-left: auto; margin-right: auto; }
.hp-newsletter .button{ margin-top: 32px; }

@media (max-width: 1200px){
  .hp-events__grid,
  .hp-news__grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1024px){
  .hp-contact{ grid-template-columns: minmax(0, 1fr); gap: 40px; padding-top: 72px; padding-bottom: 72px; }
  .hp-contact__actions{ padding-left: 24px; }
  .hp-newsletter{ padding-top: 72px; padding-bottom: 72px; }
}
@media (max-width: 767px){
  .hp-events__grid,
  .hp-news__grid{ grid-template-columns: minmax(0, 1fr); }
}

/* --------------------------------------------------------------------------
   65 — Page À propos (v0.13), même grammaire que l'accueil
   -------------------------------------------------------------------------- */
.hp-hero--page{ min-height: clamp(440px, 60vh, 600px); }

/* Leader mondial : texte riche (titres et paragraphes saisis dans l'admin). */
.ab-story--image{
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 80px;
  align-items: center;
}
.ab-rich{ max-width: 62ch; }
.ab-rich h1, .ab-rich h2, .ab-rich h3, .ab-rich h4, .ab-rich h5{
  margin: 0 0 20px;
  font-family: "Lato Bold", -apple-system, "Segoe UI", sans-serif;
  font-weight: normal;
  font-size: 40px;
  line-height: 1.1;
  letter-spacing: -.02em;
  text-transform: none;
  color: var(--ateq-ink);
}
.ab-rich > :first-child::before{
  content: "";
  display: block;
  width: 32px;
  height: 3px;
  margin-bottom: 20px;
  background: var(--ateq-red);
}
.ab-rich h3, .ab-rich h4, .ab-rich h5{ font-size: 22px; margin-top: 32px; }
.ab-rich p, .ab-rich li{
  margin: 0 0 16px;
  font-size: 19px;
  line-height: 1.6;
  color: var(--ateq-steel);
}
.ab-rich strong{ color: var(--ateq-ink); }
.ab-story__img{
  display: block;
  width: 100%;
  height: auto;
  max-height: 480px;
  object-fit: contain;
}

/* Bureaux : quatre cartes, deux par ligne. */
.ab-offices{ background: var(--ateq-surface); }
.ab-offices__grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}
.ab-office{
  display: flex;
  flex-direction: column;
  background: var(--ateq-paper);
  box-shadow: 0 0 0 1px var(--ateq-line);
}
.ab-office__media{ aspect-ratio: 16 / 9; overflow: hidden; background: var(--ateq-surface-2); }
.ab-office__img{ display: block; width: 100%; height: 100%; object-fit: cover; }
.ab-office__body{ padding: 32px 36px 36px; }
.ab-office__title{
  margin: 0 0 16px;
  font-family: "Lato Bold", -apple-system, "Segoe UI", sans-serif;
  font-weight: normal;
  font-size: 24px;
  line-height: 1.2;
  letter-spacing: -.01em;
  color: var(--ateq-ink);
}
.ab-office__text,
.ab-office__text p{
  margin: 0 0 6px;
  font-size: 16px;
  line-height: 1.6;
  color: var(--ateq-steel);
}
.ab-office__text a{
  color: var(--ateq-ink);
  font-family: "Lato Bold", -apple-system, "Segoe UI", sans-serif;
  text-decoration: none;
}
.ab-office__text a:hover{ color: var(--ateq-red); }
/* Lien « See it on the map » : dernier lien du bloc, en lien fléché. */
.ab-office__text a[href*="maps"]{
  display: inline-flex;
  gap: 8px;
  margin-top: 16px;
  padding-bottom: 3px;
  border-bottom: 2px solid var(--ateq-red);
  font-size: 15px;
}
.ab-office__text a[href*="maps"]::after{ content: "→"; }

/* Équipe. */
.ab-team__grid{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 32px 24px;
}
.ab-team__media{ aspect-ratio: 4 / 5; overflow: hidden; background: var(--ateq-surface-2); }
.ab-team__img{ display: block; width: 100%; height: 100%; object-fit: cover; }
.ab-team__name{
  margin: 16px 0 4px;
  font-family: "Lato Bold", -apple-system, "Segoe UI", sans-serif;
  font-size: 17px;
  color: var(--ateq-ink);
}
.ab-team__job{ margin: 0; font-size: 14px; color: var(--ateq-steel); }

@media (max-width: 1024px){
  .ab-story--image{ grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .ab-rich h1, .ab-rich h2{ font-size: 30px; }
  .ab-rich p{ font-size: 17px; }
  .ab-team__grid{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 767px){
  .ab-offices__grid{ grid-template-columns: minmax(0, 1fr); }
  .ab-office__body{ padding: 24px; }
  .ab-team__grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Bandeau contact de la page À propos : clair, pour ne pas se fondre dans
   le pied de page noir qui le suit. */
.hp--about .hp-cta{
  background: var(--ateq-surface);
  border-top: 1px solid var(--ateq-line);
}
.hp--about .hp-cta__title{ color: var(--ateq-ink); }
.hp--about .hp-cta__text{ color: var(--ateq-steel); }
.hp--about .hp-cta .button.primary:hover{ background: var(--ateq-ink); border-color: var(--ateq-ink); color: var(--ateq-on-accent); }

/* Accueil, « About us » sans image : le sous-bloc « The number one world
   supplier » occupe la colonne de droite au lieu de laisser un vide. */
@media (min-width: 1025px){
  .hp-about:not(.hp-about--image) .hp-about__text{
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: 96px;
    align-items: start;
  }
  .hp-about:not(.hp-about--image) .hp-title,
  .hp-about:not(.hp-about--image) .hp-lead,
  .hp-about:not(.hp-about--image) .hp-link{ grid-column: 1; }
  .hp-about:not(.hp-about--image) .hp-link{ justify-self: start; }
  .hp-about:not(.hp-about--image) .hp-about__more{
    grid-column: 2;
    grid-row: 1 / span 3;
    align-self: center;
    margin-top: 0;
    padding: 8px 0 8px 48px;
    border-top: 0;
    border-left: 1px solid var(--ateq-line);
  }
  .hp-about:not(.hp-about--image) .hp-about__body{ font-size: 17px; }
}


/* ==========================================================================
   v0.14 — DU PEPS : MOUVEMENT, MOSAÏQUE, PRODUIT VEDETTE, CARTE DU MONDE
   Les animations ne s'activent que si assets/js/ateq-fx.js a pu démarrer
   (classe .fx-on sur <html>) et que le visiteur n'a pas demandé de
   mouvement réduit. Sinon, tout s'affiche immobile.
   ========================================================================== */

/* --------------------------------------------------------------------------
   66 — Apparitions au défilement, barre de progression
   -------------------------------------------------------------------------- */
.fx-on .fx{
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .8s var(--ease), transform .8s var(--ease);
  transition-delay: calc(var(--fx-i, 0) * 80ms);
}
.fx-on .fx.fx-in{
  opacity: 1;
  transform: none;
}
.fx-progress{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 2147483000;
  height: 3px;
  background: var(--ateq-red);
  transform: scaleX(0);
  transform-origin: left center;
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   67 — Hero animé
   Image en calque séparé, qui se resserre lentement (effet « Ken Burns »),
   titre, texte et boutons qui montent l'un après l'autre, indicateur de
   défilement en bas.
   -------------------------------------------------------------------------- */
.hp-hero{ overflow: hidden; background-image: none !important; }
.hp-hero__bg{
  position: absolute;
  inset: 0;
  z-index: -2;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.hp-hero__scroll{
  position: absolute;
  left: var(--hp-pad);
  bottom: 32px;
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: "Lato Bold", -apple-system, "Segoe UI", sans-serif;
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(255,255,255,.7);
  text-decoration: none;
}
.hp-hero__scroll::after{
  content: "";
  width: 56px;
  height: 1px;
  background: linear-gradient(90deg, var(--ateq-red) 0 40%, rgba(255,255,255,.35) 40% 100%);
  background-size: 200% 100%;
}
.hp-hero__scroll:hover{ color: #FFFFFF; text-decoration: none; }
@media (prefers-reduced-motion: no-preference){
  .hp-hero__bg{ animation: hp-kenburns 18s var(--ease) both; }
  .hp-hero__title{ animation: hp-rise .9s var(--ease) .15s both; }
  .hp-hero__text{ animation: hp-rise .9s var(--ease) .35s both; }
  .hp-hero__actions{ animation: hp-rise .9s var(--ease) .55s both; }
  .hp-hero__scroll{ animation: hp-fade 1s ease 1s both; }
  .hp-hero__scroll::after{ animation: hp-scrollcue 2.4s ease-in-out 1.6s infinite; }
}
@keyframes hp-kenburns{ from{ transform: scale(1.14); } to{ transform: scale(1); } }
@keyframes hp-rise{ from{ opacity: 0; transform: translateY(32px); } to{ opacity: 1; transform: none; } }
@keyframes hp-fade{ from{ opacity: 0; } to{ opacity: 1; } }
@keyframes hp-scrollcue{ 0%{ background-position: 100% 0; } 100%{ background-position: -100% 0; } }
@media (max-width: 1024px){ .hp-hero__scroll{ display: none; } }

/* --------------------------------------------------------------------------
   68 — Chiffres sur fond noir, dans le prolongement du hero
   -------------------------------------------------------------------------- */
.hp-stats--dark{
  background: var(--ateq-ink);
  border-top: 1px solid rgba(255,255,255,.1);
  border-bottom: 0;
}
.hp-stats--dark .hp-stats__item{ border-left-color: rgba(255,255,255,.12); padding-top: 52px; padding-bottom: 56px; }
.hp-stats--dark .hp-stats__item:nth-child(n + 3){ border-top-color: rgba(255,255,255,.12); }
.hp-stats--dark .hp-stats__value{ color: #FFFFFF; font-size: 52px; font-variant-numeric: tabular-nums; }
.hp-stats--dark .hp-stats__value::before{
  content: "";
  display: block;
  width: 24px;
  height: 3px;
  margin-bottom: 20px;
  background: var(--ateq-red);
}
.hp-stats--dark .hp-stats__label{ color: rgba(255,255,255,.62); }
@media (max-width: 1024px){ .hp-stats--dark .hp-stats__value{ font-size: 38px; } }

/* --------------------------------------------------------------------------
   69 — Surtitres numérotés (« 01  ABOUT US »), chiffre géant en filigrane
   -------------------------------------------------------------------------- */
.hp-section{ position: relative; isolation: isolate; }
.hp-eyebrow{
  position: relative;
  margin: 0 0 18px;
  font-family: "Lato Bold", -apple-system, "Segoe UI", sans-serif;
  font-size: 13px;
  line-height: 1;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ateq-ink);
}
.hp-eyebrow::before{
  content: "";
  display: block;
  width: 32px;
  height: 3px;
  margin-bottom: 18px;
  background: var(--ateq-red);
}
.hp-eyebrow[data-num]::after{
  content: attr(data-num);
  position: absolute;
  z-index: -1;
  top: -64px;
  left: -14px;
  font-family: "Lato Bold", -apple-system, "Segoe UI", sans-serif;
  font-size: 200px;
  line-height: 1;
  letter-spacing: -.06em;
  color: rgba(12,12,14,.035);
  pointer-events: none;
}
.hp-eyebrow + .hp-title::before,
.hp-eyebrow + h2::before{ display: none; }
@media (max-width: 767px){ .hp-eyebrow[data-num]::after{ font-size: 120px; top: -36px; } }

/* --------------------------------------------------------------------------
   70 — Grande phrase d'accroche (« The number one world supplier in TPMS. »)
   -------------------------------------------------------------------------- */
.hp-statement{ padding-top: 136px; padding-bottom: 136px; }
.hp-statement__title{
  max-width: 15ch;
  margin: 0 0 64px;
  font-family: "Lato Bold", -apple-system, "Segoe UI", sans-serif;
  font-weight: normal;
  font-size: clamp(40px, 5.6vw, 84px);
  line-height: 1.02;
  letter-spacing: -.04em;
  color: var(--ateq-ink);
}
.hp-statement__accent{ color: var(--ateq-red); }
.hp-statement__cols{
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 96px;
  padding-top: 48px;
  border-top: 1px solid var(--ateq-line);
}
.hp-statement__lead{ margin: 0; font-size: 22px; line-height: 1.55; color: var(--ateq-ink); }
.hp-statement__body{ margin: 0; font-size: 17px; line-height: 1.7; color: var(--ateq-steel); }
.hp-statement__media{ margin-top: 72px; overflow: hidden; }
.hp-statement__img{ display: block; width: 100%; height: auto; aspect-ratio: 21 / 9; object-fit: cover; }
@media (max-width: 1024px){
  .hp-statement{ padding-top: 88px; padding-bottom: 88px; }
  .hp-statement__title{ margin-bottom: 40px; }
  .hp-statement__cols{ grid-template-columns: minmax(0, 1fr); gap: 24px; padding-top: 32px; }
  .hp-statement__lead{ font-size: 19px; }
}

/* --------------------------------------------------------------------------
   71 — Applications en mosaïque
   Grande tuile noire pour le premier marché, quatre tuiles grises ; au
   survol, la tuile passe au noir (la grande au rouge), l'icône s'anime.
   -------------------------------------------------------------------------- */
.hp-apps{ padding-top: 112px; background: var(--ateq-paper); }
.hp-apps__grid--bento{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: minmax(260px, auto);
  gap: 16px;
  border-top: 0;
}
.hp-apps__grid--bento .hp-apps__item:first-child{ grid-column: span 2; grid-row: span 2; }
.hp-apps__grid--bento .hp-apps__item .hp-apps__card,
.hp-apps__grid--bento .hp-apps__item + .hp-apps__item .hp-apps__card{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 32px;
  height: 100%;
  padding: 32px;
  border: 0;
  background: var(--ateq-surface);
  color: var(--ateq-ink);
  transition: background-color var(--t-slow) var(--ease), color var(--t-slow) var(--ease);
}
.hp-apps__top{ display: flex; align-items: flex-start; justify-content: space-between; }
.hp-apps__icon{
  width: 44px;
  height: 44px;
  color: var(--ateq-red);
  transition: transform var(--t-slow) var(--ease), color var(--t-slow) var(--ease);
}
.hp-apps__grid--bento .hp-apps__num{ color: var(--ateq-steel); transition: color var(--t-slow) var(--ease); }
.hp-apps__grid--bento .hp-apps__title{ margin: 0 0 10px; font-size: 24px; }
.hp-apps__grid--bento .hp-apps__text{ transition: color var(--t-slow) var(--ease); }

/* Grande tuile */
.hp-apps__grid--bento .hp-apps__item:first-child .hp-apps__card{
  background: var(--ateq-ink);
  color: #FFFFFF;
  padding: 48px;
}
.hp-apps__grid--bento .hp-apps__item:first-child .hp-apps__icon{ width: 72px; height: 72px; }
.hp-apps__grid--bento .hp-apps__item:first-child .hp-apps__title{ font-size: 44px; letter-spacing: -.03em; color: #FFFFFF; }
.hp-apps__grid--bento .hp-apps__item:first-child .hp-apps__text{ font-size: 18px; max-width: 34ch; color: rgba(255,255,255,.7); }
.hp-apps__grid--bento .hp-apps__item:first-child .hp-apps__num{ color: rgba(255,255,255,.5); }

/* Survol (tuiles cliquables) */
a.hp-apps__card:hover{ text-decoration: none; }
.hp-apps__grid--bento a.hp-apps__card:hover{ background: var(--ateq-ink); color: #FFFFFF; }
.hp-apps__grid--bento a.hp-apps__card:hover .hp-apps__title{ color: #FFFFFF; }
.hp-apps__grid--bento a.hp-apps__card:hover .hp-apps__text,
.hp-apps__grid--bento a.hp-apps__card:hover .hp-apps__num{ color: rgba(255,255,255,.7); }
.hp-apps__grid--bento a.hp-apps__card:hover .hp-apps__icon{ transform: translateY(-4px); }
.hp-apps__grid--bento .hp-apps__item:first-child a.hp-apps__card:hover{ background: var(--ateq-red); }
.hp-apps__grid--bento .hp-apps__item:first-child a.hp-apps__card:hover .hp-apps__icon{ color: #FFFFFF; }
.hp-apps__grid--bento a.hp-apps__card .hp-apps__title::after{
  content: " →";
  display: inline-block;
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.hp-apps__grid--bento a.hp-apps__card:hover .hp-apps__title::after{ opacity: 1; transform: none; }

/* Tuile avec photo : photo en tête, texte dessous sur fond uni. */
.hp-apps__card--image .hp-apps__media{ margin: -32px -32px 0; }
.hp-apps__grid--bento .hp-apps__item:first-child .hp-apps__card--image .hp-apps__media{ margin: -48px -48px 0; }
.hp-apps__card--image .hp-apps__img{ aspect-ratio: 16 / 9; }

@media (max-width: 1200px){
  .hp-apps__grid--bento{ grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: minmax(220px, auto); }
  .hp-apps__grid--bento .hp-apps__item:first-child{ grid-column: span 2; grid-row: span 1; }
  .hp-apps__grid--bento .hp-apps__item:nth-child(n + 4) .hp-apps__card{ border-top: 0; }
}
@media (max-width: 767px){
  .hp-apps__grid--bento{ grid-template-columns: minmax(0, 1fr); grid-auto-rows: auto; }
  .hp-apps__grid--bento .hp-apps__item:first-child{ grid-column: auto; }
  .hp-apps__grid--bento .hp-apps__item .hp-apps__card,
  .hp-apps__grid--bento .hp-apps__item + .hp-apps__item .hp-apps__card{ padding: 28px; gap: 24px; }
  .hp-apps__grid--bento .hp-apps__item:first-child .hp-apps__card{ padding: 32px; }
  .hp-apps__grid--bento .hp-apps__item:first-child .hp-apps__title{ font-size: 32px; }
}

/* --------------------------------------------------------------------------
   72 — Produit vedette
   Visuel détouré sur un plateau gris, qui flotte légèrement et déborde sur
   la section des catégories (effet de chevauchement).
   -------------------------------------------------------------------------- */
.hp-feature{
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 88px;
  align-items: center;
  padding-bottom: 0;
  background: var(--ateq-paper);
  z-index: 2;
}
.hp-feature__media{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 5 / 4;
  margin-bottom: -112px;
  background: radial-gradient(circle at 50% 55%, #FFFFFF 0%, var(--ateq-surface) 45%, var(--ateq-surface-2) 100%);
}
.hp-feature__media::after{
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 96px;
  height: 4px;
  background: var(--ateq-red);
}
.hp-feature__img{
  width: auto;
  max-width: 78%;
  max-height: 82%;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 32px 36px rgba(12,12,14,.22));
}
@media (prefers-reduced-motion: no-preference){
  .hp-feature__img{ animation: hp-float 6s ease-in-out infinite; }
}
@keyframes hp-float{ 0%, 100%{ transform: translateY(0); } 50%{ transform: translateY(-12px); } }
.hp-feature__body{ padding-bottom: 112px; }
.hp-feature__title{
  margin: 0;
  font-family: "Lato Bold", -apple-system, "Segoe UI", sans-serif;
  font-weight: normal;
  font-size: clamp(44px, 5vw, 72px);
  line-height: 1;
  letter-spacing: -.04em;
  color: var(--ateq-ink);
}
.hp-feature__list{ margin: 32px 0 0 !important; border-top: 1px solid var(--ateq-line); }
.hp-feature__list li{
  position: relative;
  padding: 14px 0 14px 28px;
  border-bottom: 1px solid var(--ateq-line);
  font-size: 16px;
  line-height: 1.5;
  color: var(--ateq-ink);
}
.hp-feature__list li::before{
  content: "";
  position: absolute;
  left: 0;
  top: 22px;
  width: 10px;
  height: 10px;
  background: var(--ateq-red);
}
.hp-feature__actions{ display: flex; flex-wrap: wrap; gap: 12px; margin-top: 40px; }
/* La section des catégories laisse la place au visuel qui déborde. */
.hp-feature + .hp-products{ padding-top: calc(112px + 112px); }
@media (max-width: 1024px){
  .hp-feature{ grid-template-columns: minmax(0, 1fr); gap: 40px; padding-bottom: 72px; }
  .hp-feature__media{ margin-bottom: 0; }
  .hp-feature__body{ padding-bottom: 0; }
  .hp-feature + .hp-products{ padding-top: 72px; }
}

/* --------------------------------------------------------------------------
   73 — Logos partenaires en défilement continu
   Le script duplique la liste ; l'animation la fait glisser de moitié en
   boucle. Pause au survol. Sans script : grille fixe (section 58).
   -------------------------------------------------------------------------- */
.hp-marquee{
  overflow: hidden;
  border-top: 1px solid var(--ateq-line);
  border-bottom: 1px solid var(--ateq-line);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
}
.hp-marquee__track{
  display: flex;
  width: max-content;
  animation: hp-marquee var(--hp-marquee-duration, 30s) linear infinite;
}
.hp-marquee:hover .hp-marquee__track{ animation-play-state: paused; }
.hp-partners--marquee .hp-partners__grid{
  display: flex;
  margin: 0;
  border: 0;
}
.hp-partners--marquee .hp-partners__item{
  flex: 0 0 auto;
  width: 240px;
  height: 128px;
  border: 0;
}
.hp-partners--marquee .hp-partners__name{ font-size: 22px; white-space: nowrap; }
@keyframes hp-marquee{ to{ transform: translateX(-50%); } }

/* --------------------------------------------------------------------------
   74 — Petits plus interactifs
   -------------------------------------------------------------------------- */
/* Boutons : flèche qui glisse au survol. */
.hp .button:not(.withicon)::after{
  content: "→";
  display: inline-block;
  margin-left: 10px;
  transition: transform var(--t-fast) var(--ease);
}
.hp .button:not(.withicon):hover::after{ transform: translateX(4px); }
/* Titres des cartes soulignés en rouge au survol. */
.hp-news__card:hover .hp-news__title,
.hp-products__card:hover .hp-products__title{
  text-decoration: underline;
  text-decoration-color: var(--ateq-red);
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
}
.hp-products__card .hp-products__more::after{ display: inline-block; transition: transform var(--t-fast) var(--ease); }
.hp-products__card:hover .hp-products__more::after{ transform: translateX(4px); }

/* --------------------------------------------------------------------------
   75 — À propos : carte du monde des bureaux
   -------------------------------------------------------------------------- */
.ab-map{
  position: relative;
  margin: 0 0 56px;
  color: rgba(12,12,14,.16);
}
.ab-map__svg{ display: block; width: 100%; height: auto; }
.ab-map__dot{ fill: var(--ateq-red); transition: transform var(--t-fast) var(--ease); transform-box: fill-box; transform-origin: center; }
.ab-map__pulse{ fill: var(--ateq-red); opacity: 0; transform-box: fill-box; transform-origin: center; }
@media (prefers-reduced-motion: no-preference){
  .ab-map__pulse{ animation: ab-pulse 2.4s ease-out infinite; }
  .ab-map__pin:nth-child(3) .ab-map__pulse{ animation-delay: .6s; }
  .ab-map__pin:nth-child(4) .ab-map__pulse{ animation-delay: 1.2s; }
  .ab-map__pin:nth-child(5) .ab-map__pulse{ animation-delay: 1.8s; }
}
@keyframes ab-pulse{
  0%{ opacity: .45; transform: scale(1); }
  100%{ opacity: 0; transform: scale(3.2); }
}
.ab-map__pin.is-active .ab-map__dot{ transform: scale(1.7); }
.ab-office{ transition: box-shadow var(--t-fast) var(--ease); }
.ab-office.is-active{ box-shadow: 0 0 0 1px var(--ateq-ink); }


/* ==========================================================================
   v0.15 — SURVOLS, DÉCORATIONS ROUGES, ÉVÉNEMENTS, OÙ ACHETER, NEWSLETTER
   Inspiration : les formes rouges anguleuses et les blocs rouges décalés
   derrière les cartes d'ateq.com.
   ========================================================================== */
:root{ --ateq-red-deep: #8E0029; }

/* --------------------------------------------------------------------------
   76 — Applications : correction du survol
   La règle de base des tuiles 2 à 5 était plus spécifique que celle du
   survol : le fond restait gris pendant que le texte passait en blanc.
   Spécificité relevée ; le survol passe au noir avec bloc rouge décalé.
   -------------------------------------------------------------------------- */
.hp-apps__grid--bento .hp-apps__item a.hp-apps__card{
  position: relative;
  transition: background-color var(--t-slow) var(--ease), color var(--t-slow) var(--ease), transform var(--t-slow) var(--ease), box-shadow var(--t-slow) var(--ease);
}
.hp-apps__grid--bento .hp-apps__item a.hp-apps__card:hover,
.hp-apps__grid--bento .hp-apps__item + .hp-apps__item a.hp-apps__card:hover{
  background: var(--ateq-ink);
  color: #FFFFFF;
  transform: translate(-6px, -6px);
  box-shadow: 6px 6px 0 0 var(--ateq-red);
}
.hp-apps__grid--bento .hp-apps__item a.hp-apps__card:hover .hp-apps__title{ color: #FFFFFF; }
.hp-apps__grid--bento .hp-apps__item a.hp-apps__card:hover .hp-apps__text,
.hp-apps__grid--bento .hp-apps__item a.hp-apps__card:hover .hp-apps__num{ color: rgba(255,255,255,.72); }
.hp-apps__grid--bento .hp-apps__item a.hp-apps__card:hover .hp-apps__icon{ color: var(--ateq-red); transform: translateY(-4px); }
/* Grande tuile (déjà noire) : passe au rouge, bloc décalé noir. */
.hp-apps__grid--bento .hp-apps__item:first-child a.hp-apps__card:hover{
  background: var(--ateq-red);
  box-shadow: 6px 6px 0 0 var(--ateq-ink);
}
.hp-apps__grid--bento .hp-apps__item:first-child a.hp-apps__card:hover .hp-apps__icon{ color: #FFFFFF; }
/* Coin rouge sur les petites tuiles, qui grandit au survol. */
.hp-apps__grid--bento .hp-apps__item + .hp-apps__item .hp-apps__card::after{
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  width: 28px;
  height: 28px;
  background: var(--ateq-red);
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
  transition: width var(--t-slow) var(--ease), height var(--t-slow) var(--ease);
}
.hp-apps__grid--bento .hp-apps__item + .hp-apps__item a.hp-apps__card:hover::after{ width: 56px; height: 56px; }

/* --------------------------------------------------------------------------
   77 — Survol des cartes : bloc rouge décalé (signature ateq.com)
   La carte se soulève vers le haut-gauche et révèle un aplat rouge
   derrière elle ; l'image zoome, le titre se souligne.
   -------------------------------------------------------------------------- */
.hp-products__card,
.hp-news__card,
.hp-events__card,
.ab-office{
  position: relative;
  transition: transform var(--t-slow) var(--ease), box-shadow var(--t-slow) var(--ease);
}
.hp-products__card:hover,
a.hp-events__card:hover,
.ab-office:hover,
.ab-office.is-active{
  transform: translate(-6px, -6px);
  box-shadow: 0 0 0 1px var(--ateq-ink), 8px 8px 0 0 var(--ateq-red);
}
.hp-news__card .hp-news__media{
  transition: transform var(--t-slow) var(--ease), box-shadow var(--t-slow) var(--ease);
}
.hp-news__card:hover .hp-news__media{
  transform: translate(-6px, -6px);
  box-shadow: 8px 8px 0 0 var(--ateq-red);
}
.hp-news__card:hover .hp-news__date{ color: var(--ateq-red); }
@media (prefers-reduced-motion: reduce){
  .hp-products__card:hover, a.hp-events__card:hover, .ab-office:hover, .ab-office.is-active,
  .hp-news__card:hover .hp-news__media,
  .hp-apps__grid--bento .hp-apps__item a.hp-apps__card:hover{ transform: none; }
}

/* --------------------------------------------------------------------------
   78 — Décorations rouges anguleuses
   Formes en aplat rouge (dégradé vers un rouge profond), en arrière-plan
   des sections, jamais sous le texte.
   -------------------------------------------------------------------------- */
/* Hero : éclat rouge en bas à droite, point rouge carré après le titre. */
.hp-hero::after{
  content: "";
  position: absolute;
  z-index: -1;
  right: 0;
  bottom: 0;
  width: clamp(120px, 16vw, 260px);
  height: 58%;
  background: linear-gradient(160deg, var(--ateq-red) 0%, var(--ateq-red-deep) 100%);
  clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 78%);
  opacity: .92;
}
.hp-hero__title::after{
  content: "";
  display: inline-block;
  width: .16em;
  height: .16em;
  margin-left: .08em;
  background: var(--ateq-red);
}
/* Phrase d'accroche : chevron rouge sur le bord gauche, trame de points
   en haut à droite. */
.hp-statement::before{
  content: "";
  position: absolute;
  z-index: -1;
  left: -28px;
  bottom: 20px;
  width: clamp(90px, 9vw, 150px);
  height: clamp(70px, 7vw, 115px);
  background: linear-gradient(135deg, var(--ateq-red) 0%, var(--ateq-red-deep) 100%);
  clip-path: polygon(0 45%, 38% 0, 100% 62%, 100% 100%, 38% 40%, 0 82%);
}
.hp-statement::after{
  content: "";
  position: absolute;
  z-index: -1;
  top: 48px;
  right: var(--hp-pad);
  width: 240px;
  height: 180px;
  background-image: radial-gradient(rgba(12,12,14,.14) 2px, transparent 2.5px);
  background-size: 18px 18px;
  -webkit-mask-image: linear-gradient(225deg, #000 0%, transparent 75%);
  mask-image: linear-gradient(225deg, #000 0%, transparent 75%);
}
/* Produit vedette : aplat rouge décalé derrière le visuel. */
.hp-feature__media{ box-shadow: 18px 18px 0 0 var(--ateq-red); }
.hp-feature__media::after{ display: none; }
/* Catégories : grand éclat rouge derrière la grille, côté droit. */
.hp-products::after{
  content: "";
  position: absolute;
  z-index: -1;
  right: 0;
  top: 38%;
  width: clamp(80px, 9vw, 160px);
  height: 46%;
  background: linear-gradient(180deg, var(--ateq-red) 0%, var(--ateq-red-deep) 100%);
  clip-path: polygon(100% 0, 100% 100%, 0 82%, 0 18%);
}
/* Actualités : chevron discret en bas à gauche. */
.hp-news::before{
  content: "";
  position: absolute;
  z-index: -1;
  left: 0;
  bottom: 0;
  width: 120px;
  height: 90px;
  background: var(--ateq-red);
  clip-path: polygon(0 0, 100% 100%, 0 100%);
}
@media (max-width: 767px){
  .hp-statement::after, .hp-products::after{ display: none; }
  .hp-feature__media{ box-shadow: 10px 10px 0 0 var(--ateq-red); }
}

/* --------------------------------------------------------------------------
   79 — Surtitres sur fond sombre, boutons blancs
   -------------------------------------------------------------------------- */
.hp-eyebrow--light{ color: #FFFFFF; }
.hp-eyebrow--light::before{ background: #FFFFFF; }
.button.hp-button--white{
  color: var(--ateq-ink);
  background: #FFFFFF;
  border: 1px solid #FFFFFF;
}
.button.hp-button--white:hover,
.button.hp-button--white:focus-visible{
  color: #FFFFFF;
  background: var(--ateq-ink);
  border-color: var(--ateq-ink);
}
.button.hp-button--white:focus:not(:focus-visible):not(:hover){
  color: var(--ateq-ink);
  background: #FFFFFF;
  border-color: #FFFFFF;
}

/* --------------------------------------------------------------------------
   80 — Événements : vignette en tête de carte
   Photo si elle est fournie, sinon affiche graphique : nom du salon en
   grand sur fond noir, éclat rouge.
   -------------------------------------------------------------------------- */
.hp-events__card{ padding: 0 0 28px; }
.hp-events__card > :not(.hp-events__media){ margin-left: 28px; margin-right: 28px; }
.hp-events__media{
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  margin-bottom: 24px;
  background: var(--ateq-ink);
}
.hp-events__img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--t-slow) var(--ease);
}
a.hp-events__card:hover .hp-events__img{ transform: scale(1.04); }
.hp-events__poster{
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  padding: 20px 22px;
  font-family: "Lato Bold", -apple-system, "Segoe UI", sans-serif;
  font-size: 30px;
  line-height: .95;
  letter-spacing: -.02em;
  text-transform: uppercase;
  color: #FFFFFF;
  background:
    radial-gradient(rgba(255,255,255,.12) 1.5px, transparent 2px) 0 0 / 14px 14px,
    var(--ateq-ink);
}
.hp-events__poster::after{
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 42%;
  height: 100%;
  background: linear-gradient(160deg, var(--ateq-red) 0%, var(--ateq-red-deep) 100%);
  clip-path: polygon(100% 0, 100% 100%, 30% 100%, 100% 25%);
  transition: width var(--t-slow) var(--ease);
}
a.hp-events__card:hover .hp-events__poster::after{ width: 56%; }
.hp-events__card .hp-events__date{ margin-top: 0; }

/* --------------------------------------------------------------------------
   81 — Où acheter : bandeau rouge, carte du monde en points blancs
   -------------------------------------------------------------------------- */
.hp-wtb{
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 120px var(--hp-pad);
  background: linear-gradient(120deg, var(--ateq-red) 0%, var(--ateq-red-deep) 100%);
  color: #FFFFFF;
}
.hp-wtb__map{
  position: absolute;
  z-index: -1;
  top: 50%;
  right: -4%;
  width: min(68%, 980px);
  transform: translateY(-50%);
  color: rgba(255,255,255,.22);
}
.hp-wtb__map .ab-map__svg{ display: block; width: 100%; height: auto; }
.hp-wtb__map .ab-map__dot,
.hp-wtb__map .ab-map__pulse{ fill: #FFFFFF; }
@media (prefers-reduced-motion: no-preference){
  .hp-wtb__map .ab-map__pulse{ animation: ab-pulse 2.4s ease-out infinite; }
  .hp-wtb__map .ab-map__pin:nth-child(3) .ab-map__pulse{ animation-delay: .6s; }
  .hp-wtb__map .ab-map__pin:nth-child(4) .ab-map__pulse{ animation-delay: 1.2s; }
  .hp-wtb__map .ab-map__pin:nth-child(5) .ab-map__pulse{ animation-delay: 1.8s; }
}
.hp-wtb::before{
  content: "";
  position: absolute;
  z-index: -1;
  left: 0;
  bottom: 0;
  width: 34%;
  height: 100%;
  background: rgba(12,12,14,.18);
  clip-path: polygon(0 0, 55% 0, 100% 100%, 0 100%);
}
.hp-wtb__inner{ max-width: 620px; }
.hp-wtb__title{
  margin: 0;
  font-family: "Lato Bold", -apple-system, "Segoe UI", sans-serif;
  font-weight: normal;
  font-size: clamp(34px, 4vw, 56px);
  line-height: 1.04;
  letter-spacing: -.03em;
  color: #FFFFFF;
}
.hp-wtb__text{ margin: 20px 0 0; max-width: 46ch; font-size: 18px; line-height: 1.55; color: rgba(255,255,255,.85); }
.hp-wtb__actions{ display: flex; flex-wrap: wrap; gap: 12px; margin-top: 40px; }
@media (max-width: 1024px){
  .hp-wtb{ padding-top: 80px; padding-bottom: 80px; }
  .hp-wtb__map{ top: auto; bottom: -10%; right: -20%; width: 120%; transform: none; opacity: .7; }
}

/* --------------------------------------------------------------------------
   82 — Newsletter : bloc noir, liste des contenus, formes rouges
   -------------------------------------------------------------------------- */
.hp-newsletter{
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 120px var(--hp-pad);
  background: var(--ateq-ink);
  border-top: 0;
  color: #FFFFFF;
}
.hp-newsletter::before{
  content: "";
  position: absolute;
  z-index: -1;
  right: 0;
  top: 0;
  width: clamp(140px, 18vw, 300px);
  height: 100%;
  background: linear-gradient(180deg, var(--ateq-red) 0%, var(--ateq-red-deep) 100%);
  clip-path: polygon(100% 0, 100% 100%, 0 100%, 62% 0);
}
.hp-newsletter::after{
  content: "";
  position: absolute;
  z-index: -1;
  left: 0;
  bottom: 0;
  width: 160px;
  height: 120px;
  background: var(--ateq-red);
  clip-path: polygon(0 45%, 38% 0, 100% 62%, 100% 100%, 38% 40%, 0 82%);
  opacity: .9;
}
.hp-newsletter__inner{
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: 96px;
  align-items: center;
  max-width: none;
  margin: 0;
  text-align: left;
}
.hp-newsletter__title{
  margin: 0;
  font-family: "Lato Bold", -apple-system, "Segoe UI", sans-serif;
  font-weight: normal;
  font-size: clamp(36px, 4.4vw, 64px);
  line-height: 1.02;
  letter-spacing: -.035em;
  color: #FFFFFF;
}
.hp-newsletter__text{ margin: 20px 0 0; max-width: 44ch; font-size: 18px; line-height: 1.55; color: rgba(255,255,255,.7); }
.hp-newsletter__panel{
  padding: 40px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.12);
  border-left: 3px solid var(--ateq-red);
}
.hp-newsletter__list{ margin: 0 0 32px !important; }
.hp-newsletter__list li{
  position: relative;
  padding: 12px 0 12px 26px;
  border-bottom: 1px solid rgba(255,255,255,.1);
  font-size: 16px;
  color: #FFFFFF;
}
.hp-newsletter__list li::before{
  content: "";
  position: absolute;
  left: 0;
  top: 19px;
  width: 9px;
  height: 9px;
  background: var(--ateq-red);
}
.hp-newsletter .button{ margin-top: 0; }
@media (max-width: 1024px){
  .hp-newsletter{ padding-top: 80px; padding-bottom: 80px; }
  .hp-newsletter__inner{ grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .hp-newsletter__panel{ padding: 28px; }
  .hp-newsletter::before{ width: 90px; }
}

/* --------------------------------------------------------------------------
   83 — Partenaires : trois colonnes verticales en défilement continu
   Construites par ateq-fx.js à partir de la liste ; colonne du milieu en
   sens inverse ; fondu en haut et en bas. Sans script : grille fixe.
   -------------------------------------------------------------------------- */
.hp-partners--vertical .hp-head{ margin-left: auto; margin-right: auto; text-align: center; }
.hp-partners--vertical .hp-eyebrow::before{ margin-left: auto; margin-right: auto; }
.hp-partners--vertical .hp-lead{ margin-left: auto; margin-right: auto; }
.hp-vmarquee{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  max-width: 960px;
  height: 432px;
  margin: 0 auto;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 18%, #000 82%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0, #000 18%, #000 82%, transparent 100%);
}
.hp-vmarquee__col{ overflow: hidden; }
.hp-vmarquee__track{ animation: hp-vscroll var(--hp-vmarquee-duration, 14s) linear infinite; }
.hp-vmarquee__col--reverse .hp-vmarquee__track{ animation-direction: reverse; }
.hp-vmarquee__list{ list-style: none; margin: 0; padding: 0; }
.hp-vmarquee__list .hp-partners__item{
  display: flex;
  align-items: center;
  justify-content: center;
  height: 128px;
  margin: 0 0 16px;
  padding: 24px;
  border: 1px solid var(--ateq-line);
  border-left: 3px solid var(--ateq-red);
  background: var(--ateq-paper);
}
.hp-vmarquee .hp-partners__name{ font-size: 22px; color: var(--ateq-ink); }
@keyframes hp-vscroll{ to{ transform: translateY(-50%); } }
@media (max-width: 767px){
  .hp-vmarquee{ height: 340px; gap: 8px; }
  .hp-vmarquee__list .hp-partners__item{ height: 96px; padding: 12px; margin-bottom: 8px; }
  .hp-vmarquee .hp-partners__name{ font-size: 15px; text-align: center; }
}

/* Partenaires centrés : numéro en filigrane centré aussi. */
.hp-partners--vertical .hp-eyebrow[data-num]::after{ left: 50%; transform: translateX(-50%); }
/* Newsletter puis pied de page, tous deux noirs : filet de séparation. */
.hp-newsletter{ border-bottom: 1px solid rgba(255,255,255,.12); }


/* ==========================================================================
   v0.16 — LE STYLE DE L'ACCUEIL SUR TOUTES LES PAGES
   En-têtes immersifs, survols à bloc rouge décalé, décorations rouges,
   apparitions au défilement, fin de page commune.
   ========================================================================== */
:root{ --pg-pad: max(64px, calc((100% - 1312px) / 2)); }
@media (max-width: 1024px){ :root{ --pg-pad: 16px; } }

/* --------------------------------------------------------------------------
   84 — En-têtes des pages intérieures, comme celui de l'accueil
   Tous produits, FAQ / How-To, actualités, marque, contact / support, 404.
   Photo plein cadre qui se resserre lentement, voile sombre, éclat rouge,
   titre blanc. Les deux bandeaux du parent (__top / __bottom), masqués
   depuis la v0.6, servent de calques : __top = voile, __bottom = éclat.
   Remplace la mise en page en deux colonnes de la v0.7.
   -------------------------------------------------------------------------- */
.allproduct__hero,
.faq__hero,
.allnews__hero,
.brand__hero,
.contact__hero,
.page404{
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  gap: 0;
  height: auto;
  min-height: clamp(440px, 62vh, 620px);
  padding: calc(112px + 72px) var(--pg-pad) 88px;
  background: var(--ateq-ink);
  border-bottom: 0;
  color: #FFFFFF;
}
.allproduct__hero__img,
.faq__hero__img,
.allnews__hero__img,
.brand__hero__img,
.contact__hero__img,
.page404__image{
  position: absolute;
  inset: 0;
  z-index: -3;
  width: 100%;
  height: 100%;
  max-width: none;
  border-radius: 0;
  object-fit: cover;
  background-size: cover;
  background-position: center;
  opacity: 1;
  transform: none;
}
.allproduct__hero__top,
.faq__hero__top,
.allnews__hero__top,
.brand__hero__top,
.contact__hero__top,
.page404__gradient{
  display: block;
  position: absolute;
  inset: 0;
  z-index: -2;
  width: auto;
  height: auto;
  background:
    linear-gradient(90deg, rgba(12,12,14,.9) 0%, rgba(12,12,14,.64) 45%, rgba(12,12,14,.2) 100%),
    linear-gradient(0deg, rgba(12,12,14,.5) 0%, rgba(12,12,14,0) 45%);
}
.allproduct__hero__bottom,
.faq__hero__bottom,
.allnews__hero__bottom,
.brand__hero__bottom,
.contact__hero__bottom{
  display: block;
  position: absolute;
  z-index: -1;
  top: auto;
  left: auto;
  right: 0;
  bottom: 0;
  width: clamp(110px, 14vw, 230px);
  height: 56%;
  background: linear-gradient(160deg, var(--ateq-red) 0%, var(--ateq-red-deep) 100%);
  clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 78%);
}
.page404::after{
  content: "";
  position: absolute;
  z-index: -1;
  right: 0;
  bottom: 0;
  width: clamp(110px, 14vw, 230px);
  height: 56%;
  background: linear-gradient(160deg, var(--ateq-red) 0%, var(--ateq-red-deep) 100%);
  clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 78%);
}
/* Trame de points blancs en haut à droite. */
.allproduct__hero::before,
.faq__hero::before,
.allnews__hero::before,
.brand__hero::before,
.contact__hero::before,
.page404::before{
  content: "";
  position: absolute;
  z-index: -1;
  top: calc(112px + 32px);
  right: var(--pg-pad);
  width: 220px;
  height: 160px;
  background-image: radial-gradient(rgba(255,255,255,.22) 2px, transparent 2.5px);
  background-size: 18px 18px;
  -webkit-mask-image: linear-gradient(225deg, #000 0%, transparent 75%);
  mask-image: linear-gradient(225deg, #000 0%, transparent 75%);
}
.allproduct__hero > .allproduct__hero__content,
.faq__hero__content,
.allnews__hero > .allnews__hero__content,
.brand__hero > .brand__hero__content,
.contact__hero > .contact__hero__content,
.page404__content{
  position: relative;
  width: auto;
  max-width: 680px;
}
/* Textes en blanc dans les en-têtes. */
.allproduct__hero .typo,
.faq__hero .typo,
.allnews__hero .typo,
.brand__hero .typo,
.contact__hero .typo,
.page404 .typo{ color: #FFFFFF; }
.allproduct__hero__content .typo.body1,
.faq__hero__content .typo.body1,
.allnews__hero__content .typo.body1,
.brand__hero__content .typo.body1,
.contact__hero__content .typo.body1,
.page404__text.typo{ color: rgba(255,255,255,.82); }
.allproduct__hero__title,
.faq__hero__title,
.allnews__hero__title,
.brand__hero__title,
.contact__hero__title,
.page404__title{
  font-size: clamp(40px, 5vw, 72px);
  line-height: 1.02;
  letter-spacing: -.035em;
}
.allproduct__hero__title p, .faq__hero__title p, .allnews__hero__title p,
.brand__hero__title p, .contact__hero__title p, .page404__title p{
  font-size: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  margin: 0;
}
/* Boutons secondaires sur fond sombre. */
.brand__hero .button.secondary,
.page404 .button.secondary{
  color: #FFFFFF;
  border-color: rgba(255,255,255,.6);
  background: transparent;
}
.brand__hero .button.secondary:hover,
.page404 .button.secondary:hover{
  color: var(--ateq-ink);
  background: #FFFFFF;
  border-color: #FFFFFF;
}
/* Recherche (FAQ, actualités) : champ blanc net sur le fond sombre. */
.faq__hero .field,
.allnews__hero .field{
  background: #FFFFFF;
  border: 0;
  border-bottom: 3px solid var(--ateq-red);
}
@media (prefers-reduced-motion: no-preference){
  .allproduct__hero__img, .faq__hero__img, .allnews__hero__img,
  .brand__hero__img, .contact__hero__img, .page404__image{
    animation: hp-kenburns 18s var(--ease) both;
  }
  .allproduct__hero > .allproduct__hero__content, .faq__hero__content,
  .allnews__hero > .allnews__hero__content, .brand__hero > .brand__hero__content,
  .contact__hero > .contact__hero__content, .page404__content{
    animation: hp-rise .9s var(--ease) .15s both;
  }
  .brand__hero__buttonContainer{ animation: hp-rise .9s var(--ease) .4s both; }
}
@media (max-width: 1024px){
  .allproduct__hero, .faq__hero, .allnews__hero, .brand__hero, .contact__hero, .page404{
    min-height: 400px;
    padding: calc(72px + 56px) var(--pg-pad) 56px;
  }
  .allproduct__hero__top, .faq__hero__top, .allnews__hero__top,
  .brand__hero__top, .contact__hero__top, .page404__gradient{
    background: linear-gradient(0deg, rgba(12,12,14,.92) 0%, rgba(12,12,14,.7) 55%, rgba(12,12,14,.45) 100%);
  }
  .allproduct__hero::before, .faq__hero::before, .allnews__hero::before,
  .brand__hero::before, .contact__hero::before, .page404::before{ display: none; }
}

/* --------------------------------------------------------------------------
   85 — Survols : bloc rouge décalé sur toutes les cartes du site
   -------------------------------------------------------------------------- */
.productCardsInner,
.home__product__itemInner,
.store__item,
.allnews__items,
.brand__product__item,
.teamCards,
.contact_supplier_itemContainer{
  transition: transform var(--t-slow) var(--ease), box-shadow var(--t-slow) var(--ease);
}
.productCardsInner:hover,
.home__product__itemInner:hover,
.store__item:hover,
.allnews__items:hover,
.brand__product__item:hover{
  transform: translate(-6px, -6px);
  box-shadow: 0 0 0 1px var(--ateq-ink), 8px 8px 0 0 var(--ateq-red);
}
.productCardsInner:hover .productCardsTitle,
.home__product__itemInner:hover .home__product__itemTitle,
.allnews__items:hover .allnews__item__title{
  text-decoration: underline;
  text-decoration-color: var(--ateq-red);
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
}
.productCardsImage,
.home__product__itemImage{ transition: transform var(--t-slow) var(--ease); }
.productCardsInner:hover .productCardsImage,
.home__product__itemInner:hover .home__product__itemImage{ transform: scale(1.05); }
/* Vidéos : la vignette se soulève, aplat rouge derrière. */
.videoCards__cover{ transition: transform var(--t-slow) var(--ease), box-shadow var(--t-slow) var(--ease); }
.videoCards__container:hover{ transform: none; box-shadow: none; }
.videoCards__container:hover .videoCards__cover{
  transform: translate(-6px, -6px);
  box-shadow: 8px 8px 0 0 var(--ateq-red);
}
/* FAQ : filet rouge qui pousse à gauche au survol et à l'ouverture. */
.faq__item{
  position: relative;
  transition: background-color var(--t-fast) var(--ease);
}
.faq__item::before{
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--ateq-red);
  transform: scaleY(0);
  transform-origin: top center;
  transition: transform var(--t-slow) var(--ease);
}
.faq__item:hover::before,
.faq__item.open::before{ transform: scaleY(1); }
.faq__item:hover{ transform: none; box-shadow: var(--ateq-shadow); }
/* Équipe : bande rouge sous le portrait au survol. */
.teamCards{ position: relative; }
.teamCards::after{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: var(--ateq-red);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--t-slow) var(--ease);
}
.teamCards:hover::after{ transform: scaleX(1); }
/* Revendeurs (contact) et bureaux : soulèvement sans aplat (non cliquables). */
.contact_supplier_itemContainer:hover{ transform: translateY(-4px); box-shadow: 0 0 0 1px var(--ateq-ink); }
@media (prefers-reduced-motion: reduce){
  .productCardsInner:hover, .home__product__itemInner:hover, .store__item:hover,
  .allnews__items:hover, .brand__product__item:hover, .contact_supplier_itemContainer:hover,
  .videoCards__container:hover .videoCards__cover{ transform: none; }
}

/* --------------------------------------------------------------------------
   86 — Décorations rouges dans le contenu des pages
   -------------------------------------------------------------------------- */
/* Titres des catégories (tous produits) et des sections FAQ : petit carré
   rouge en point final, comme le titre du hero. */
.allProduct__cat .home__product__title::after,
.faq__section__stickyTitle::after{
  content: "";
  display: inline-block;
  width: .16em;
  height: .16em;
  margin-left: .08em;
  background: var(--ateq-red);
}
/* Tous produits : chevron rouge au bord gauche de chaque catégorie paire. */
.allProduct__cat{ position: relative; isolation: isolate; }
.allProduct__cat:nth-of-type(even)::before{
  content: "";
  position: absolute;
  z-index: -1;
  left: calc(-1 * var(--pg-pad));
  top: 64px;
  width: min(120px, calc(var(--pg-pad) - 20px));
  aspect-ratio: 120 / 92;
  background: linear-gradient(135deg, var(--ateq-red) 0%, var(--ateq-red-deep) 100%);
  clip-path: polygon(0 45%, 38% 0, 100% 62%, 100% 100%, 38% 40%, 0 82%);
}
/* Article : chapeau avec filet rouge, citations et intertitres marqués. */
.singleNews__content blockquote{
  margin: 32px 0;
  padding: 8px 0 8px 24px;
  border-left: 3px solid var(--ateq-red);
  font-size: 22px;
  line-height: 1.5;
  color: var(--ateq-ink);
}
.singleNews__content h2::before,
.brand__content h2::before{
  content: "";
  display: block;
  width: 32px;
  height: 3px;
  margin-bottom: 16px;
  background: var(--ateq-red);
}
.singleNews__content a,
.brand__content a{
  color: var(--ateq-ink);
  text-decoration: underline;
  text-decoration-color: var(--ateq-red);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}
.singleNews__content a:hover,
.brand__content a:hover{ color: var(--ateq-red); }
.singleNews__content img{ box-shadow: 12px 12px 0 0 var(--ateq-red); margin: 16px 12px 28px 0; }
/* Où acheter : formulaire avec filet rouge, fiche magasin avec aplat rouge. */
.store__form__wrapper{ border-left: 3px solid var(--ateq-red); }
.store__mapItem{ box-shadow: var(--ateq-shadow-up), 8px 8px 0 0 var(--ateq-red); }
/* Contact / support : horaires et blocs avec filet rouge. */
.contact__hours__item{ border-left: 3px solid var(--ateq-red); }
/* Fiche produit : éclat rouge et trame de points dans le hero, aplat rouge
   décalé derrière la carte de présentation. */
.single-page .singlePage__presentation{ position: relative; isolation: isolate; }
.single-page .singlePage__presentation::after{
  content: "";
  position: absolute;
  z-index: -1;
  right: 0;
  bottom: 0;
  width: clamp(90px, 11vw, 180px);
  height: 48%;
  background: linear-gradient(160deg, var(--ateq-red) 0%, var(--ateq-red-deep) 100%);
  clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 78%);
}
.single-page .singlePage__presentation::before{
  content: "";
  position: absolute;
  z-index: -1;
  top: calc(112px + 24px);
  right: var(--pg-pad);
  width: 220px;
  height: 160px;
  background-image: radial-gradient(rgba(12,12,14,.14) 2px, transparent 2.5px);
  background-size: 18px 18px;
  -webkit-mask-image: linear-gradient(225deg, #000 0%, transparent 75%);
  mask-image: linear-gradient(225deg, #000 0%, transparent 75%);
}
.single-page .singlePage__presentationTitle::after{
  content: "";
  display: inline-block;
  width: .14em;
  height: .14em;
  margin-left: .06em;
  background: var(--ateq-red);
}
.single-page .singlePage__specWrapper{ box-shadow: 0 0 0 1px var(--ateq-line), 14px 14px 0 0 var(--ateq-red); }
@media (max-width: 767px){
  .allProduct__cat:nth-of-type(even)::before{ display: none; }
  .single-page .singlePage__specWrapper{ box-shadow: 0 0 0 1px var(--ateq-line), 8px 8px 0 0 var(--ateq-red); }
}

/* --------------------------------------------------------------------------
   87 — Fin de page commune (Où acheter + newsletter), hors accueil
   -------------------------------------------------------------------------- */
.hp--prefooter{ background: transparent; }
.hp--prefooter .hp-wtb{ margin-top: 0; }

/* --------------------------------------------------------------------------
   88 — Article d'actualité : mise en page éditoriale
   -------------------------------------------------------------------------- */
.singleNews{
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: calc(112px + 88px) var(--pg-pad) 112px;
  background: var(--ateq-paper);
}
.singleNews::before{
  content: "";
  position: absolute;
  z-index: -1;
  top: 112px;
  right: 0;
  width: clamp(90px, 11vw, 180px);
  height: 248px;
  background: linear-gradient(160deg, var(--ateq-red) 0%, var(--ateq-red-deep) 100%);
  clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 78%);
}
.singleNews::after{
  content: "";
  position: absolute;
  z-index: -1;
  top: calc(112px + 32px);
  left: var(--pg-pad);
  width: 220px;
  height: 160px;
  background-image: radial-gradient(rgba(12,12,14,.12) 2px, transparent 2.5px);
  background-size: 18px 18px;
  -webkit-mask-image: linear-gradient(135deg, #000 0%, transparent 75%);
  mask-image: linear-gradient(135deg, #000 0%, transparent 75%);
}
.singleNews__wrapper{ width: 760px; }
.singleNews__back{ gap: 12px; margin-bottom: 56px; text-decoration: none; }
.singleNews__backIcon{ width: 18px; transform: rotate(180deg); filter: brightness(0); opacity: .7; transition: transform var(--t-fast) var(--ease); }
.singleNews__back:hover .singleNews__backIcon{ transform: rotate(180deg) translateX(4px); }
.singleNews__back .typo{ margin: 0; font-family: "Lato Bold", -apple-system, "Segoe UI", sans-serif; font-size: 14px; color: var(--ateq-ink); }
.singleNews__date.typo{
  margin: 0 0 20px;
  font-family: "Lato Bold", -apple-system, "Segoe UI", sans-serif;
  font-size: 13px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ateq-red);
}
.singleNews__title.typo,
.singleNews__title.typo p{
  margin: 0 0 56px;
  font-family: "Lato Bold", -apple-system, "Segoe UI", sans-serif;
  font-size: clamp(34px, 4.4vw, 60px);
  line-height: 1.04;
  letter-spacing: -.035em;
  color: var(--ateq-ink);
}
.singleNews__title::before{
  content: "";
  display: block;
  width: 40px;
  height: 3px;
  margin-bottom: 24px;
  background: var(--ateq-red);
}
.singleNews__title::after{
  content: "";
  display: inline-block;
  width: .14em;
  height: .14em;
  margin-left: .06em;
  background: var(--ateq-red);
}
.singleNews__content p,
.singleNews__content li{ font-size: 18px; line-height: 1.75; color: var(--ateq-steel); }
.singleNews__content h2,
.singleNews__content h3{
  margin: 48px 0 16px;
  font-family: "Lato Bold", -apple-system, "Segoe UI", sans-serif;
  font-size: 28px;
  line-height: 1.2;
  letter-spacing: -.02em;
  color: var(--ateq-ink);
}
.singleNews__relatedTitle.typo{
  margin: 88px 0 32px;
  padding-top: 32px;
  border-top: 1px solid var(--ateq-line);
  font-family: "Lato Bold", -apple-system, "Segoe UI", sans-serif;
  font-size: 28px;
  letter-spacing: -.02em;
  color: var(--ateq-ink);
}
/* Articles liés : cartes horizontales (image à gauche). */
.singleNews__wrapper .allnews__items{
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  width: 100%;
  min-width: 0;
  margin-bottom: 20px;
}
.singleNews__wrapper .allnews__items__image{ height: 100%; min-height: 150px; }
.singleNews__wrapper .allnews__item__content{ width: auto; }
@media (max-width: 767px){
  .singleNews{ padding-top: calc(72px + 56px); background: var(--ateq-paper); }
  .singleNews::before, .singleNews::after{ display: none; }
  .singleNews__wrapper .allnews__items{ grid-template-columns: minmax(0, 1fr); }
}

/* Tuile « plus de vidéos » (fiche produit, page marque) : noire, texte
   blanc, coin rouge. Hors fiche produit, elle gardait le fond sombre du
   parent avec un texte devenu sombre. */
.singlePage__video__container--more{
  position: relative;
  overflow: hidden;
  background: var(--ateq-ink) !important;
}
.singlePage__video__container--more .typo{ color: #FFFFFF !important; }
.singlePage__video__container--more .button.secondary{
  color: #FFFFFF;
  border-color: rgba(255,255,255,.6);
  background: transparent;
}
.singlePage__video__container--more .button.secondary:hover{ color: var(--ateq-ink); background: #FFFFFF; border-color: #FFFFFF; }
.singlePage__video__container--more::after{
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  width: 64px;
  height: 64px;
  background: var(--ateq-red);
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
}

/* --------------------------------------------------------------------------
   89 — Correctifs mobiles des pages intérieures
   -------------------------------------------------------------------------- */
/* Texte de l'en-tête : ne dépasse plus de l'écran. */
.allproduct__hero > .allproduct__hero__content,
.faq__hero__content,
.allnews__hero > .allnews__hero__content,
.brand__hero > .brand__hero__content,
.contact__hero > .contact__hero__content,
.page404__content{ max-width: min(680px, 100%); }
@media (max-width: 1024px){
  /* Barre de catégories (tous produits, FAQ, actualités) : le parent impose
     top: 100px !important, qui la faisait glisser sur le premier titre.
     Collée sous l'en-tête mobile (72 px). */
  .allproduct__stickynavigationContainer.stickynavigationContainer,
  .faq__stickynavigationContainer.stickynavigationContainer,
  .allnews__stickyContainer.stickynavigationContainer{
    position: sticky;
    top: 72px !important;
  }
}


/* ==========================================================================
   v0.17 — BARRE DE NAVIGATION
   ========================================================================== */

/* --------------------------------------------------------------------------
   90 — Logo + libellé sur deux lignes (« TPMS Tools & » / « solutions »)
   Casse normale, sans filet : le trait vertical fait partie du logo.
   -------------------------------------------------------------------------- */
@media (min-width: 1025px){
  header .navbar .headerlogo .headerLogoLink{ gap: 14px; }
  header .navbar .headerlogo .headerLogoImg img{ height: 34px; }
  header .navbar .headerlogo .headerLogoLabel{
    padding-left: 0;
    border-left: 0;
    font-family: "Lato Regular", -apple-system, "Segoe UI", sans-serif;
    font-size: 14px;
    line-height: 1.2;
    letter-spacing: 0;
    text-transform: none;
    white-space: nowrap;
    color: var(--ateq-ink);
  }
}
.headerlogoMob .headerLogoMobLink{
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
}
.headerlogoMob .headerLogoMobLabel{
  font-family: "Lato Regular", -apple-system, "Segoe UI", sans-serif;
  font-size: 13px;
  line-height: 1.2;
  letter-spacing: 0;
  text-transform: none;
  white-space: nowrap;
  color: var(--ateq-ink);
}

/* --------------------------------------------------------------------------
   91 — Barre utilitaire en noir (téléphones, réseaux, langue)
   -------------------------------------------------------------------------- */
@media (min-width: 1025px){
  header #topHeader{
    background-color: var(--ateq-ink);
    border-bottom: 0;
  }
  header #topHeader .topHeader__infoInfo{ color: rgba(255,255,255,.62); }
  header #topHeader .topHeader__infoInfo a{ color: #FFFFFF; }
  header #topHeader .topHeader__infoInfo a:hover{ color: var(--ateq-red); }
  header #topHeader .topHeader__info__socialItem img{ filter: brightness(0) invert(1); opacity: .55; }
  header #topHeader .topHeader__info__socialItem:hover img{ opacity: 1; }
  header #topHeader .customSelect__title.languageSwitcher__firstTitle{ color: #FFFFFF; }
  header #topHeader .languageSwitcher > .customSelect__title:after,
  header #topHeader .customSelect__title.languageSwitcher__firstTitle:after{
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7.41 8.59 12 13.17l4.59-4.58L18 10l-6 6-6-6z' fill='%23FFFFFF'/%3E%3C/svg%3E");
  }
  /* Petit repère rouge à gauche de la barre utilitaire. */
  header #topHeader{ position: relative; }
  header #topHeader::before{
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 64px;
    background: var(--ateq-red);
    clip-path: polygon(0 0, 100% 0, 70% 100%, 0 100%);
  }
}

/* --------------------------------------------------------------------------
   92 — Liens : page en cours soulignée en rouge, survol plus net
   (la classe .is-current est posée par ateq-fx.js d'après l'adresse).
   -------------------------------------------------------------------------- */
@media (min-width: 1025px){
  header .navbar .navbar-nav li a{
    font-family: "Lato Bold", -apple-system, "Segoe UI", sans-serif;
    font-size: 14px;
    letter-spacing: .01em;
  }
  header .navbar .navbar-nav li a::after{ bottom: 6px; height: 2px; }
  header .navbar .navbar-nav li a.is-current{ color: var(--ateq-ink); }
  header .navbar .navbar-nav li a.is-current::after{ transform: scaleX(1); background: var(--ateq-red); }
  header .navbar .navbar-nav li a:hover{ color: var(--ateq-ink); }
}
@media (max-width: 1024px){
  header .navbar .navbar-nav li a.is-current{
    color: var(--ateq-red);
    box-shadow: inset 3px 0 0 var(--ateq-red);
  }
}

/* --------------------------------------------------------------------------
   93 — Au défilement : la barre utilitaire se replie, fine ombre
   (classe .is-scrolled posée par ateq-fx.js). Bureau uniquement ; la
   hauteur réservée par les gabarits (112 px) ne change pas.
   -------------------------------------------------------------------------- */
@media (min-width: 1025px){
  header{ transition: transform var(--t-slow) var(--ease), box-shadow var(--t-slow) var(--ease); }
  header.is-scrolled{
    transform: translateY(calc(-1 * var(--ateq-topbar-h, 41px)));
    box-shadow: 0 1px 0 var(--ateq-line), 0 10px 30px -18px rgba(12,12,14,.35);
  }
}
@media (prefers-reduced-motion: reduce){ header{ transition: none; } }
/* Les barres collantes suivent l'en-tête replié. */
@media (min-width: 1025px){
  .stickynavigationContainer{ transition: top var(--t-slow) var(--ease); }
  html.header-scrolled .stickynavigationContainer,
  html.header-scrolled .home__content .stickynavigationContainer{
    top: calc(112px - var(--ateq-topbar-h, 41px));
  }
}