/* Header et footer v2 (servis à tous depuis le 29/10/2026, voir override/classes/controller/FrontController.php).
   Tout est préfixé hd2- (header), fil (fil d'Ariane) et ft2- (footer) pour cohabiter avec Bootstrap 3 et
   style8.css sur les pages pas encore refaites. Aucune dépendance à jQuery. Public visé : plus de 55 ans,
   donc texte de 15 px minimum (14 px sous les icônes en mobile), cibles de 48 px, pas d'animation. */

.hd2, .hd2-recherche-mobile, .fil, .ft2 {
  --rouge: #eb132b;
  --rouge-fonce: #c10e22;
  --encre: #161616;
  --texte: #292929;
  --texte-2: #545454;
  --fond-2: #faf9f5;
  --trait: #e6e2da;
  --titre: Oswald, "Oswald repli", "Oswald repli Android", "Arial Narrow", sans-serif;
  font-family: Lato, "Lato repli", Arial, sans-serif;
  line-height: 1.4;
  color: var(--texte);
}
.hd2 *, .hd2 *::before, .hd2 *::after,
.hd2-recherche-mobile *, .fil *,
.ft2 *, .ft2 *::before, .ft2 *::after { box-sizing: border-box; }

/* Remises : une classe + :where() pour passer devant les règles d'élément legacy (p, ul, a, img, button...) */
.hd2 :where(p, ul, ol, li, dl, dt, dd, h2, figure),
.fil :where(p, ol, li),
.ft2 :where(p, ul, ol, li, dl, dt, dd, h2, figure) { margin: 0; padding: 0; border: 0; list-style: none; }
.hd2 :where(a), .hd2-recherche-mobile :where(a), .fil :where(a), .ft2 :where(a) { color: inherit; text-decoration: none; }
/* Bootstrap colore et souligne a:hover et a:focus (poids 0,1,1) : même poids ici, déclaré après lui */
.hd2 a:where(:hover, :focus), .fil a:where(:hover, :focus), .ft2 a:where(:hover, :focus) { color: inherit; text-decoration: none; }
.hd2 :where(button), .hd2-recherche-mobile :where(button), .ft2 :where(button) {
  margin: 0; padding: 0; border: 0; background: none; font: inherit; color: inherit; text-transform: none; cursor: pointer;
}
.hd2 :where(input), .hd2-recherche-mobile :where(input), .ft2 :where(input) { margin: 0; font: inherit; }
.hd2 :where(img), .ft2 :where(img) { display: block; max-width: 100%; height: auto; }
.hd2 [hidden], .ft2 [hidden] { display: none !important; }
.hd2 :focus-visible, .ft2 :focus-visible, .hd2-recherche-mobile :focus-visible, .fil :focus-visible { outline: 3px solid #1f5fd1; outline-offset: 2px; }
.hd2 svg, .ft2 svg, .hd2-recherche-mobile svg {
  flex: none; width: 24px; height: 24px;
  fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
.hd2-invisible, .ft2-invisible { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.hd2-conteneur, .ft2-conteneur, .fil-int { max-width: 1202px; margin: 0 auto; padding: 0 16px; }

.hd2-evitement { position: absolute; left: 8px; top: -80px; z-index: 2000; padding: 12px 16px; border-radius: 8px; background: #fff; color: #161616; font: 700 16px Lato, "Lato repli", Arial, sans-serif; }
.hd2-evitement:focus { top: 8px; color: #161616; }

/* ================= Ligne principale ================= */
.hd2 { position: relative; z-index: 100; }
/* relooking du 15/10/2026 : filet rouge au-dessus du header */
.hd2::before { content: ""; display: block; height: 3px; background: var(--rouge); }
.hd2-haut { background: #fff; }
.hd2-ligne { display: flex; align-items: center; gap: 20px; min-height: 92px; }
.hd2-logo { flex: none; }
.hd2-logo img { width: 190px; }
.hd2-logo-picture { display: block; max-width: 100%; line-height: 0; }

.hd2-recherche { position: relative; flex: 1 1 auto; max-width: 560px; margin: 0 auto 0 12px; }
/* Sélecteurs .hd2-recherche .x : valables dans le header comme dans la rangée mobile, et plus lourds que
   input[type="search"] de Bootstrap (box-sizing: content-box) */
.hd2-recherche .hd2-recherche-champ {
  box-sizing: border-box; width: 100%; height: 50px; padding: 0 58px 0 22px;
  border: 1.5px solid #d6d5d3; border-radius: 25px; background: #faf9f5; box-shadow: none;
  font: 400 16px Lato, "Lato repli", Arial, sans-serif; color: var(--encre);
  -webkit-appearance: none; appearance: none;
}
.hd2-recherche .hd2-recherche-champ::placeholder { color: #6b6b6b; opacity: 1; }
.hd2-recherche .hd2-recherche-champ:focus { outline: none; border-color: var(--rouge); background: #fff; }
.hd2-recherche .hd2-recherche-ok {
  position: absolute; top: 5px; right: 5px; width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center; background: var(--rouge); color: #fff;
}
.hd2-recherche .hd2-recherche-ok:hover { background: var(--rouge-fonce); }
.hd2-recherche-ok svg { width: 20px; height: 20px; stroke-width: 2.2; }

/* Actions : icône + libellé court (Espace pro, Compte, Panier), téléphone en clair en bureau */
.hd2-action {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; flex: none;
  min-width: 74px; min-height: 48px; padding: 4px 6px; border-radius: 8px;
  font-size: 15px; font-weight: 700; line-height: 1.2; color: var(--encre);
}
.hd2 .hd2-action:hover { color: var(--rouge); }
.hd2-action > svg, .hd2-panier-icone > svg { width: 28px; height: 28px; stroke-width: 1.6; }
.hd2-tel { flex-direction: row; gap: 10px; margin-right: 10px; }
.hd2-texte strong { display: block; font-family: var(--titre); font-size: 21px; font-weight: 500; letter-spacing: .01em; }
.hd2-texte small { display: block; font-size: 15px; font-weight: 400; color: var(--texte-2); }
.hd2-tel .hd2-court { display: none; }
.hd2-panier-icone { position: relative; display: block; }
.hd2-panier-icone > svg { display: block; }
.hd2-pastille {
  position: absolute; top: -7px; right: -9px; min-width: 21px; height: 21px; padding: 0 5px;
  border-radius: 11px; background: var(--rouge); color: #fff;
  font-size: 12px; font-weight: 700; line-height: 21px; text-align: center;
}
/* mise à jour après un ajout depuis la fiche v2 (fiche.js) : rebond discret, supprimé si le système réduit les animations */
.hd2-pastille.est-mise-a-jour { animation: hd2-rebond .35s ease-out; }
@keyframes hd2-rebond { 40% { transform: scale(1.2); } }
@media (prefers-reduced-motion: reduce) { .hd2-pastille.est-mise-a-jour { animation: none; } }
.hd2-burger, .hd2-tiroir-tete, .hd2-tiroir-extra, .hd2-recherche-mobile { display: none; }

/* ================= Menu (bureau) ================= */
.hd2-nav { position: relative; background: #fff; border-top: 1px solid var(--trait); border-bottom: 3px solid var(--encre); }
/* Barre pleine : 8 entrées + le bouton à 1168 px utiles (largeur mini du bureau). Marges serrées, texte gardé à 16 px */
.hd2-nav-liste { display: flex; align-items: center; }
@media (min-width: 1200px) {
  /* Le texte de la première entrée reste aligné sur le logo */
  .hd2-nav-liste.hd2-conteneur { padding-left: 7px; }
}
.hd2-nav-lien {
  position: relative; display: flex; align-items: center; gap: 3px;
  height: 58px; padding: 0 9px; white-space: nowrap;
  font-family: var(--titre); font-size: 16px; font-weight: 500; text-transform: uppercase; letter-spacing: .045em; color: var(--encre);
}
.hd2-nav-lien::after { content: ""; position: absolute; left: 9px; right: 9px; bottom: -1px; height: 3px; border-radius: 2px; }
.hd2 .hd2-nav-lien:hover, .hd2 .hd2-nav-lien[aria-expanded="true"] { color: var(--rouge); }
.hd2-nav-lien:hover::after, .hd2-nav-lien[aria-expanded="true"]::after { background: var(--rouge); }
.hd2 .hd2-chevron { width: 16px; height: 16px; stroke-width: 2.2; }
.hd2-nav-lien[aria-expanded="true"] .hd2-chevron { transform: rotate(180deg); }
.hd2 .hd2-nav-lien--promo { color: var(--rouge); }
/* Entrées à page (28/10/2026, demande de Dimitri) : le libellé est un lien vers la page de la famille, comme dans le
   menu legacy, et le chevron un bouton à part qui ouvre le sous-menu. En bureau, même rendu qu'avec le bouton unique :
   le soulignement du lien se prolonge sous le chevron (3 + 16 px), l'entrée rougit au survol ou ouverte */
.hd2-nav-ouvrir { display: flex; align-items: center; height: 58px; padding: 0 9px 0 3px; color: var(--encre); }
.hd2-nav-ouvrir[aria-expanded="true"] .hd2-chevron { transform: rotate(180deg); }
.hd2 .hd2-nav-ouvrir:focus-visible { outline: 3px solid rgba(235, 19, 43, .30); outline-offset: -3px; }
.hd2 .hd2-nav-item--page.est-ouvert > .hd2-nav-lien, .hd2 .hd2-nav-item--page.est-ouvert > .hd2-nav-ouvrir { color: var(--rouge); }
.hd2-nav-item--page.est-ouvert > .hd2-nav-lien::after { background: var(--rouge); }
@media (min-width: 1200px) {
  .hd2-nav-item--page { display: flex; align-items: center; }
  .hd2 .hd2-nav-item--page > .hd2-nav-lien { padding-right: 0; }
  .hd2-nav-item--page > .hd2-nav-lien::after { right: -19px; }
  .hd2 .hd2-nav-item--page:hover > .hd2-nav-lien, .hd2 .hd2-nav-item--page:hover > .hd2-nav-ouvrir { color: var(--rouge); }
  .hd2-nav-item--page:hover > .hd2-nav-lien::after { background: var(--rouge); }
}
/* 24/10/2026 (IA web design) : "Promotions" regroupe Vente flash et Déstockage dans un panneau étroit sous son entrée ;
   "Application" poussée à droite, en Lato avec son pictogramme, le bouton rouge collé à elle */
.hd2-nav-item--application { margin-left: auto; }
.hd2-application-icone { display: none; }
.hd2-promotions-liens { margin: 0; padding: 0; list-style: none; }
.hd2-promotions-liens li + li { border-top: 1px solid var(--trait); }
.hd2-promotions-liens a { display: block; padding: 12px 0; font-size: 17px; color: var(--texte); }
.hd2-promotions-liens a:hover { color: var(--rouge); }
@media (min-width: 1200px) {
  .hd2-nav-item--promotions { position: relative; }
  /* l'entrée en préfixe : .hd2-panneau, déclaré plus bas, remettait left: 0 (audit du CSS du 24/10/2026) */
  .hd2-nav-item--promotions .hd2-panneau--promotions { left: auto; right: 0; width: 230px; }
  .hd2-panneau--promotions .hd2-panneau-int { display: block; max-width: none; margin: 0; padding: 8px; }
  .hd2-promotions-liens li + li { border-top: 0; }
  .hd2-promotions-liens a { padding: 13px 14px; border-radius: 6px; font-size: 16px; font-weight: 700; color: var(--encre); }
  .hd2-promotions-liens a:hover { background: var(--fond-2); text-decoration: none; }
  .hd2 .hd2-nav-lien--application { gap: 7px; padding-right: 12px; padding-left: 12px; font-family: Lato, "Lato repli", Arial, sans-serif; font-size: 15px; font-weight: 700; text-transform: none; letter-spacing: 0; color: var(--texte-2); }
  .hd2-application-icone { display: block; }
}
/* "Créer mon alarme" : même langage que les boutons rouges de la fiche (IA web design du 24/10/2026) : rouge uni, sans
   dégradé ni ombre, rayon de 12 px, survol plus foncé, léger enfoncement à l'appui, focus clavier visible ; hauteur,
   espacement et typographie inchangés */
.hd2-bouton {
  display: inline-flex; align-items: center; justify-content: center; height: 44px; padding: 0 18px;
  border-radius: 12px; background: var(--rouge);
  font-size: 16px; font-weight: 700; white-space: nowrap;
  cursor: pointer; transition: background-color .18s ease, transform .12s ease;
}
.hd2 .hd2-bouton, .hd2 .hd2-bouton:hover, .hd2 .hd2-bouton:focus { color: #fff; }
.hd2 .hd2-bouton:hover { background: var(--rouge-fonce); }
.hd2 .hd2-bouton:active { background: #a80c1e; transform: translateY(1px); }
.hd2 .hd2-bouton:focus-visible { outline: 3px solid rgba(235, 19, 43, .30); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .hd2-bouton { transition: none; } }

/* Panneaux déroulants : pleine largeur, sous la barre de menu et son trait noir de 3 px (retour de Dimitri du
   28/10/2026 : collé à 100 %, le panneau couvrait ce trait et coupait le bas du soulignement rouge de l'entrée).
   ::before comble ces 3 px pour la souris, qui passe de l'entrée au panneau sans le quitter */
.hd2-panneau {
  position: absolute; left: 0; right: 0; top: calc(100% + 3px); z-index: 50;
  background: #fff;
  box-shadow: 0 18px 30px -12px rgba(0, 0, 0, .22);
}
.hd2-panneau::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 3px; }
.hd2-panneau-int { display: flex; gap: 44px; max-width: 1202px; margin: 0 auto; padding: 28px 16px 32px; }
.hd2-col { flex: 1 1 0; min-width: 0; }
.hd2-col--large { flex: 2.4 1 0; }
.hd2 .hd2-col-titre { display: block; margin: 0 0 8px; font-family: var(--titre); font-size: 20px; font-weight: 500; line-height: 1.3; text-transform: uppercase; letter-spacing: .03em; color: var(--encre); }
.hd2 a.hd2-col-titre:hover { color: var(--rouge); }
.hd2 .hd2-col ul + .hd2-col-titre { margin-top: 22px; }
.hd2-col li a { display: block; padding: 6px 0; font-size: 16px; color: var(--texte); }
.hd2 .hd2-col li a:hover { color: var(--rouge); text-decoration: underline; text-underline-offset: 3px; }
.hd2-gammes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.hd2 .hd2-col .hd2-gammes a {
  display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 8px 14px;
  border: 1px solid var(--trait); border-radius: 12px; font-weight: 700; color: var(--encre); text-align: center;
}
.hd2 .hd2-col .hd2-gammes a:hover { border-color: var(--rouge); text-decoration: none; }
.hd2-gammes img { width: 100%; max-width: 150px; aspect-ratio: 4 / 3; object-fit: contain; }
.hd2-col-suite { display: flex; gap: 24px; margin-top: 14px; }
.hd2 .hd2-col-suite a { font-weight: 700; color: var(--rouge); text-decoration: underline; text-underline-offset: 3px; }
.hd2-carte-aide { flex: 0 0 250px; align-self: flex-start; padding: 20px 22px; border: 1px solid var(--trait); border-radius: 12px; background: var(--fond-2); font-size: 16px; }
.hd2-carte-titre { margin-bottom: 4px; font-family: var(--titre); font-size: 22px; font-weight: 500; color: var(--encre); }
.hd2 .hd2-carte-tel { display: flex; align-items: center; gap: 8px; margin: 12px 0 8px; font-family: var(--titre); font-size: 25px; font-weight: 500; color: var(--rouge); white-space: nowrap; }
.hd2 .hd2-carte-lien { font-weight: 700; color: var(--rouge-fonce); text-decoration: underline; text-underline-offset: 3px; }
/* encart carte SIM du panneau Accessoires alarmes : reprend le bandeau d'accueil, sans animation, image chargée à l'ouverture du panneau */
.hd2 .hd2-carte-sim {
  position: relative; flex: 0 0 250px; align-self: flex-start; display: block; padding: 18px 20px 20px; border-radius: 12px; overflow: hidden;
  background: radial-gradient(90% 60% at 45% 22%, rgba(235, 19, 43, .32), transparent 70%), linear-gradient(165deg, #1c2338, #0c101b);
  font-size: 16px; color: #fff;
}
.hd2-carte-sim-img { display: block; width: 150px; height: auto; margin: 8px 0 14px 0; transform: rotate(-7deg); filter: drop-shadow(0 10px 12px rgba(0, 0, 0, .5)); }
.hd2-carte-sim-prix {
  position: absolute; top: 10px; right: 10px; display: flex; flex-direction: column; justify-content: center; align-items: center;
  width: 82px; height: 82px; border: 2px solid rgba(255, 255, 255, .85); border-radius: 50%; background: var(--rouge);
  font-size: 15px; line-height: 1.1; text-align: center; box-shadow: 0 6px 14px rgba(0, 0, 0, .4);
}
.hd2-carte-sim-prix b { font-family: var(--titre); font-size: 23px; font-weight: 500; }
.hd2-carte-sim-titre { display: block; font-family: var(--titre); font-size: 24px; font-weight: 500; line-height: 1.15; text-transform: uppercase; }
.hd2-carte-sim-titre span { display: block; color: #ff4255; }
.hd2-carte-sim ul { margin: 10px 0 14px; }
.hd2-carte-sim li { position: relative; padding: 3px 0 3px 28px; color: #e8ebf2; }
.hd2-carte-sim li::before { content: ""; position: absolute; left: 0; top: 6px; width: 18px; height: 18px; border-radius: 50%; background: var(--rouge); }
.hd2-carte-sim li::after { content: ""; position: absolute; left: 6px; top: 9px; width: 5px; height: 9px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.hd2-carte-sim-bouton { display: block; padding: 12px; border-radius: 999px; background: var(--rouge); font-weight: 700; text-align: center; }
.hd2 .hd2-carte-sim:hover .hd2-carte-sim-bouton { background: var(--rouge-fonce); }
.hd2 .hd2-carte-sim:focus-visible { outline: 3px solid var(--rouge); outline-offset: 3px; }

/* ================= Fil d'Ariane (contenu $path legacy : div > a, .navigation-pipe, .last) ================= */
/* Fond transparent : le fil prend le fond de la page (gris sur les catégories, blanc ailleurs), comme le legacy */
.fil { font-size: 15px; color: var(--texte-2); }
/* Pages catégorie : contenu sur fond #eee, le fil le prolonge vers le haut */
body#category .fil { background: #eee; }
.fil-int { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding-top: 14px; padding-bottom: 4px; }
.fil .fil-int a { text-decoration: underline; text-underline-offset: 3px; }
.fil .fil-int a:hover { color: var(--rouge); }
.fil .navigation-pipe, .fil .fil-sep { font-size: 0; }
.fil .navigation-pipe::before, .fil .fil-sep::before { content: "›"; font-size: 15px; color: #9a9a9a; }
.fil .last, .fil .navigation_page { color: var(--encre); }

/* ================= Mobile et tablette ================= */
@media (max-width: 1199px) {
  .hd2 { position: sticky; top: 0; z-index: 900; }
  .hd2-haut { border-bottom: 1px solid var(--trait); }
  /* 24/10/2026 (IA web design) : rangée en grille (burger, logo, Appeler, Compte, Panier), logo sans ligne de base
     (v2/img/logo-mobile.webp) à largeur fluide, actions de 56 px centrées dans leur colonne */
  .hd2-haut .hd2-conteneur { padding-right: 10px; padding-left: 10px; }
  .hd2-ligne { display: grid; grid-template-columns: 56px minmax(0, 1fr) 56px 56px 56px; column-gap: 2px; min-height: 64px; }
  .hd2-burger { display: flex; grid-column: 1; margin: 0; }
  .hd2-logo { grid-column: 2; display: flex; align-items: center; justify-content: flex-start; width: 100%; min-width: 0; margin: 0; }
  .hd2-logo img { width: clamp(112px, 32vw, 160px); max-width: 100%; height: auto; }
  .hd2-haut .hd2-recherche, .hd2-texte, .hd2-espace-pro { display: none; }
  .hd2-action { min-width: 56px; min-height: 58px; padding: 4px 2px; gap: 3px; font-size: 14px; }
  .hd2-ligne > .hd2-action { width: 56px; min-width: 0; padding: 4px 0; justify-self: center; }
  .hd2-tel { grid-column: 3; flex-direction: column; margin-right: 0; }
  .hd2-compte { grid-column: 4; }
  .hd2-panier { grid-column: 5; }
  .hd2-tel .hd2-court { display: block; }
  .hd2-action > svg, .hd2-panier-icone > svg { width: 26px; height: 26px; }
  /* le combiné paraissait plus gros que les autres pictos : réduit optiquement, zone tactile inchangée */
  .hd2-tel > svg { position: relative; top: 1.2px; transform: scale(.88); transform-origin: 50% 50%; stroke-width: 1.8; }
  .hd2-pastille { top: -6px; right: -10px; }

  /* Le menu devient un tiroir plein écran */
  .hd2-nav {
    position: fixed; top: 0; bottom: 0; left: 0; z-index: 1000;
    width: min(100%, 440px); overflow-y: auto; overscroll-behavior: contain;
    border: 0; visibility: hidden; transform: translateX(-100%);
  }
  .hd2-nav--ouvert { visibility: visible; transform: none; }
  .hd2-voile { position: fixed; inset: 0; z-index: 999; background: rgba(0, 0, 0, .55); }
  .hd2-tiroir-tete {
    position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between;
    padding: 4px 6px 4px 16px; background: #fff; border-bottom: 1px solid var(--trait);
  }
  .hd2-tiroir-tete img { width: 140px; height: auto; }
  .hd2-nav-liste { display: block; padding: 0; }
  .hd2-nav-item { border-bottom: 1px solid var(--trait); }
  .hd2-nav-lien { width: 100%; height: 60px; padding: 0 16px; font-size: 18px; }
  .hd2-nav-lien > span { flex: 1; text-align: left; }
  .hd2-nav-lien::after { display: none; }
  /* tiroir : comme avant, toute la rangée de l'entrée ouvre sa famille (le chevron couvre le lien) */
  .hd2-nav-item--page { position: relative; }
  .hd2-nav-ouvrir { position: absolute; top: 0; left: 0; right: 0; height: 60px; justify-content: flex-end; padding: 0 16px; }
  .hd2 .hd2-chevron { width: 22px; height: 22px; }
  .hd2-panneau { position: static; box-shadow: none; border: 0; background: var(--fond-2); }
  .hd2-panneau::before { display: none; }
  .hd2-panneau-int { display: block; padding: 6px 16px 18px; }
  .hd2-col { margin-top: 14px; }
  .hd2 .hd2-col-titre { font-size: 18px; margin-bottom: 2px; }
  .hd2-col li a { padding: 11px 0; font-size: 17px; }
  .hd2-gammes { grid-template-columns: repeat(2, 1fr); margin-top: 8px; }
  .hd2-gammes img { max-width: 118px; }
  .hd2 .hd2-col .hd2-gammes a { padding: 10px 6px 12px; background: #fff; }
  .hd2-carte-aide, .hd2 .hd2-carte-sim { display: none; }
  .hd2-nav-cta { padding: 18px 16px; border-bottom: 0; }
  .hd2-bouton { width: 100%; height: 54px; font-size: 18px; }
  .hd2-tiroir-extra { display: block; padding: 4px 16px 32px; }
  .hd2 .hd2-tiroir-tel {
    display: flex; align-items: center; gap: 14px; padding: 14px 16px; border: 2px solid var(--rouge); border-radius: 14px;
    font-size: 17px; color: var(--encre);
  }
  .hd2-tiroir-tel svg { width: 30px; height: 30px; color: var(--rouge); }
  .hd2-tiroir-tel strong { display: block; font-family: var(--titre); font-size: 24px; font-weight: 500; color: var(--rouge); }
  .hd2-tiroir-tel small { display: block; font-size: 15px; color: var(--texte-2); }
  .hd2-tiroir-liens { margin-top: 14px; }
  .hd2-tiroir-liens a { display: block; padding: 13px 0; font-size: 17px; border-bottom: 1px solid var(--trait); }

  /* Recherche en haut du tiroir, sous son en-tête (formulaire déplacé ici par common.js) : 6.5 % des visiteurs
     mobiles touchent la loupe, le champ ne prend plus 72 px en haut de toutes les pages */
  .hd2-recherche-mobile { display: block; padding: 14px 16px; border-bottom: 1px solid var(--trait); background: #fff; }
  .hd2-recherche-mobile .hd2-recherche { display: block; max-width: none; margin: 0; }
  .hd2-ligne > .hd2-recherche { display: none; }

  /* Fil d'Ariane : seulement le dernier lien vers une page parente, rien s'il n'y en a pas */
  .fil:not(:has(.fil-int > div a)) { display: none; }
  .fil-int > * { display: none !important; }
  .fil-int > div:has(a):not(:has(~ div a)) { display: inline-flex !important; align-items: center; gap: 6px; }
  .fil-int > div:has(a):not(:has(~ div a))::before { content: "‹"; font-size: 20px; line-height: 1; color: var(--encre); }
  .fil-int { padding-top: 12px; }

  /* Tiroir ouvert : le header passe devant le bouton du chat et les autres éléments fixes */
  .hd2.hd2--tiroir { z-index: 1000000; }
}
/* Petits téléphones (320 à 374 px, dont beaucoup d'Android en 360) : la ligne burger / logo / Appeler /
   Compte / Panier faisait 364 px et débordait. Marges et colonnes des actions réduites, libellés gardés */
@media (max-width: 374px) {
  .hd2-haut .hd2-conteneur { padding: 0 4px; }
  .hd2-ligne { grid-template-columns: 52px minmax(0, 1fr) 52px 52px 52px; column-gap: 4px; }
  .hd2-ligne > .hd2-action { width: 52px; }
}
@media (max-width: 339px) {
  .hd2-haut .hd2-conteneur { padding: 0 2px; }
  .hd2-ligne { column-gap: 1px; }
  .hd2-logo img { width: 96px; }
}

/* Le header legacy est fixe sous 992 px et #content compense par des marges : inutile avec le header v2 */
@media (max-width: 991px) {
  body.hd2-actif #content { margin-top: 0 !important; padding-top: 16px !important; }
  body.hd2-actif.home #content { padding-top: 0 !important; }
}

/* Bannière de l'accueil (tikebannieres, animée ou en images), 28/10/2026 : sur ordinateur, elle part du haut de la page,
   sous le header, et ses compositions sont faites pour la bande visible sous le header legacy (lignes 229 à 705 du
   1920 x 787, gabarit des graphistes). Le header v2 fait 157 px : sans décalage, le bas du message passait sous la
   réassurance (bouton "Voir l'offre" coupé). Remontée de 229 - 157 = 72 px, même cadrage qu'avant */
@media (min-width: 1200px) {
  body.hd2-actif .slideshow a { top: -72px; }
}

/* ================= Footer ================= */
.ft2 { margin-top: 48px; }
/* relooking du 15/10/2026, refonte du 20/10/2026, revue du 24/10/2026 (IA web design) : quatre preuves sur fond sombre,
   chacune avec son pictogramme rouge et son texte à toutes les largeurs, séparées par des filets */
.ft2-atouts { padding: 48px 0 46px; background: #292929; }
.ft2 .ft2-atouts-titre { margin: 0 0 32px; text-align: left; font-family: var(--titre); font-size: 32px; font-weight: 500; line-height: 1.2; letter-spacing: -.01em; color: #fff; text-wrap: balance; }
.ft2-atouts-liste { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; border-top: 1px solid #444; border-bottom: 1px solid #444; }
.ft2-atouts-liste > li { display: flex; flex-direction: column; min-width: 0; padding: 26px; }
.ft2-atouts-liste > li + li { border-left: 1px solid #444; }
.ft2-atouts-liste > li:first-child { padding-left: 0; }
.ft2-atouts-liste > li:last-child { padding-right: 0; }
.ft2-atout-entete { display: flex; align-items: center; gap: 12px; min-height: 30px; }
/* .ft2 devant : sans lui, .ft2 svg (24 px, trait 1.8) l'emporte (audit du CSS du 24/10/2026) */
.ft2 .ft2-atout-icone { width: 27px; height: 27px; color: var(--rouge); stroke-width: 1.7; }
.ft2-atout-titre { margin: 0; font-family: var(--titre); font-size: 22px; font-weight: 500; line-height: 1.2; color: #fff; }
.ft2-atout-texte { display: block; margin-top: 12px; font-size: 16px; line-height: 1.55; color: #d3d3d3; }
.ft2 .ft2-atout-texte a { color: #fff; font-weight: 700; text-decoration: underline; }
/* logos des moyens de paiement : l'image en couleur de la prod (v2/img/paiement-couleur.webp, 795 x 93 pour les écrans denses) */
.ft2-paiement { display: block; width: 250px; max-width: 100%; height: auto; margin: 16px 0 0; }
.ft2-tel-titre { margin: 22px 0 0; font-weight: 700; font-size: 16px; color: #fff; }
.ft2-tel-titre + .ft2-tel { margin-top: 4px !important; }

.ft2-principal { padding: 44px 0 36px; background: var(--encre); color: #d4d4d4; }
.ft2-newsletter { display: flex; align-items: center; justify-content: space-between; gap: 32px; padding-bottom: 36px; margin-bottom: 40px; border-bottom: 1px solid #333; }
.ft2-newsletter-titre { font-family: var(--titre); font-size: 26px; font-weight: 500; text-transform: uppercase; letter-spacing: .02em; color: #fff; }
.ft2-newsletter-texte { font-size: 16px; color: #d8d8d8; }
.ft2-newsletter-message { flex: 0 1 500px; padding: 14px 18px; border-radius: 12px; background: #1f3d2a; color: #fff; font-size: 16px; }
.ft2-newsletter-message--erreur { background: #4a1a1f; }
.ft2-newsletter-form { position: relative; display: flex; flex: 0 1 500px; }
.ft2 .ft2-newsletter-form input[type="email"] {
  width: 100%; height: 54px; padding: 0 160px 0 22px; border: 0; border-radius: 27px;
  font: 400 16px Lato, "Lato repli", Arial, sans-serif; color: var(--encre); background: #fff; box-shadow: none;
}
.ft2 .ft2-newsletter-form button {
  position: absolute; top: 5px; right: 5px; height: 44px; padding: 0 22px; border-radius: 22px;
  background: linear-gradient(180deg, #f22b42, #d30e23); color: #fff; font-size: 16px; font-weight: 700;
}
.ft2 .ft2-newsletter-form button:hover { background: #b50c1f; }

.ft2-colonnes { display: grid; grid-template-columns: 1.35fr 1fr 1fr 1fr; gap: 40px; }
.ft2-logo { width: 190px; }
.ft2 .ft2-tel { display: inline-flex; align-items: center; gap: 10px; margin: 22px 0 12px; font-family: var(--titre); font-size: 27px; font-weight: 500; color: #fff; }
.ft2-tel svg { width: 26px; height: 26px; color: var(--rouge); }
.ft2 .ft2-tel:hover { color: #fff; text-decoration: underline; }
.ft2-horaires { font-size: 16px; line-height: 1.45; color: #d8d8d8; }
.ft2-horaires div { margin-bottom: 6px; }
.ft2 .ft2-horaires dt { color: #fff; font-weight: 700; }
.ft2-adresse { margin-top: 14px; font-size: 16px; color: #d8d8d8; }
.ft2 .ft2-mail, .ft2 .ft2-mail:hover { display: inline-flex; align-items: center; gap: 8px; margin-top: 10px; font-size: 16px; color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.ft2-mail svg { width: 20px; height: 20px; color: #9a9a9a; }
.ft2-groupe summary {
  display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px;
  font-family: var(--titre); font-size: 20px; font-weight: 500; text-transform: uppercase; letter-spacing: .03em; color: #fff; list-style: none; pointer-events: none;
}
.ft2-groupe summary::-webkit-details-marker { display: none; }
.ft2-groupe summary svg { display: none; }
.ft2-groupe a { display: block; padding: 7px 0; font-size: 16px; color: #d8d8d8; }
.ft2 .ft2-groupe a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }

/* "Tike Sécurité dans les médias" (24/10/2026, IA web design) : les logos des chaînes et radios de la page "On parle de
   nous" (v2/img/presse-*.webp), atténués au repos et nets au survol, et le lien vers la page */
.ft2-confiance { display: block; margin-top: 36px; padding-top: 30px; border-top: 1px solid #333; text-align: left; }
.ft2-medias { display: grid; grid-template-columns: 220px minmax(0, 1fr) auto; align-items: center; gap: 28px; width: 100%; margin: 0; }
.ft2-medias-titre { margin: 0; font-size: 17px; font-weight: 700; line-height: 1.4; color: #fff; }
.ft2-presse { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 26px; }
.ft2-presse a { display: flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; opacity: .78; filter: grayscale(.5); transition: opacity .18s ease, filter .18s ease; }
.ft2 .ft2-presse a:hover, .ft2 .ft2-presse a:focus-visible { opacity: 1; filter: none; }
.ft2-presse img { flex: none; height: auto; object-fit: contain; }
.ft2-presse-france2 { width: 128px; }
.ft2-presse-m6 { width: 51px; }
.ft2-presse-weo { width: 78px; }
.ft2-presse-rmc { width: 88px; }
.ft2-presse-sudradio { width: 41px; }
.ft2 .ft2-medias-lien { display: inline-flex; align-items: center; justify-content: flex-end; gap: 8px; min-height: 44px; font-size: 15px; font-weight: 700; line-height: 1.4; color: #d4d4d4; text-decoration: underline; text-decoration-color: #666; text-underline-offset: 4px; white-space: nowrap; }
.ft2 .ft2-medias-lien:hover, .ft2 .ft2-medias-lien:focus-visible { color: #fff; text-decoration-color: var(--rouge); }
.ft2-medias-lien svg { width: 16px; height: 16px; transform: rotate(-90deg); }

.ft2-bas { background: #111; color: #939393; font-size: 16px; }
.ft2-bas-int { display: flex; align-items: center; gap: 28px; min-height: 68px; flex-wrap: wrap; }
.ft2-legal { display: flex; gap: 24px; flex: 1; }
.ft2 .ft2-legal a:hover { color: #fff; text-decoration: underline; }
.ft2-reseaux { display: flex; gap: 10px; }
.ft2-reseaux a { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid #3d3d3d; border-radius: 50%; color: #d8d8d8; }
.ft2 .ft2-reseaux a:hover { color: #fff; border-color: var(--rouge); }
.ft2-reseaux svg { width: 20px; height: 20px; }

@media (max-width: 1199px) {
  .ft2 { margin-top: 32px; }
  .ft2-principal { padding-top: 32px; }
  .ft2-newsletter { flex-direction: column; align-items: stretch; gap: 16px; padding-bottom: 28px; margin-bottom: 28px; }
  .ft2-newsletter-form { flex: none; flex-direction: column; gap: 10px; }
  .ft2 .ft2-newsletter-form input[type="email"] { padding-right: 22px; }
  .ft2 .ft2-newsletter-form button { position: static; height: 52px; border-radius: 26px; font-size: 17px; }

  .ft2-colonnes { grid-template-columns: 1fr; gap: 0; }
  .ft2-societe { padding-bottom: 24px; border-bottom: 1px solid #333; }
  .ft2 .ft2-tel { display: flex; justify-content: center; height: 56px; margin: 20px 0 16px; border-radius: 28px; background: var(--rouge); font-size: 26px; }
  .ft2-tel svg { color: #fff; }
  .ft2-groupe { border-bottom: 1px solid #333; }
  .ft2-groupe summary { height: 60px; margin: 0; pointer-events: auto; cursor: pointer; }
  .ft2-groupe summary svg { display: block; color: #9a9a9a; }
  .ft2-groupe[open] summary svg { transform: rotate(180deg); }
  .ft2-groupe ul { padding-bottom: 14px; }
  .ft2-groupe a { padding: 11px 0; font-size: 17px; }

  /* la dernière rubrique repliable se ferme déjà par un trait : pas de second trait 30 px plus bas (Dimitri, 29/10/2026) */
  .ft2-confiance { margin-top: 0; padding-top: 30px; border-top: 0; }
  .ft2-medias { grid-template-columns: 1fr; justify-items: center; gap: 18px; text-align: center; }
  .ft2 .ft2-medias-lien { justify-content: center; white-space: normal; }
  /* centré comme le bloc des médias au-dessus (Dimitri, 29/10/2026) ; 96 px en bas : place de la bulle du tchat,
     fixe en bas à droite, qui sinon couvrirait les liens et les réseaux en fin de page */
  .ft2-bas-int { flex-direction: column; align-items: center; gap: 14px; padding: 20px 16px 96px; text-align: center; }
  .ft2-legal { flex-direction: column; align-items: center; gap: 12px; }
}
/* Atouts du pied : deux colonnes séparées par des filets en tablette, une colonne en mobile */
@media (min-width: 768px) and (max-width: 1199px) {
  .ft2-atouts-liste { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ft2-atouts-liste > li, .ft2-atouts-liste > li:first-child, .ft2-atouts-liste > li:last-child { padding: 26px; }
  .ft2-atouts-liste > li + li { border-left: 0; }
  .ft2-atouts-liste > li:nth-child(even) { border-left: 1px solid #444; }
  .ft2-atouts-liste > li:nth-child(-n+2) { border-bottom: 1px solid #444; }
}
@media (max-width: 767px) {
  .ft2-atouts { padding: 34px 0 32px; }
  .ft2 .ft2-atouts-titre { margin-bottom: 24px; font-size: 27px; letter-spacing: 0; }
  .ft2-atouts-liste { grid-template-columns: 1fr; border-bottom: 0; }
  .ft2-atouts-liste > li, .ft2-atouts-liste > li:first-child, .ft2-atouts-liste > li:last-child { padding: 20px 0; }
  .ft2-atouts-liste > li + li { border-top: 1px solid #444; border-left: 0; }
  .ft2-atout-titre { font-size: 21px; }
  .ft2-atout-texte { margin-top: 10px; line-height: 1.5; }
  .ft2-paiement { margin-top: 14px; }
}
@media (max-width: 575px) {
  .ft2-presse { gap: 10px 16px; }
  .ft2-presse-france2 { width: 116px; }
  .ft2-presse-m6 { width: 47px; }
  .ft2-presse-weo { width: 72px; }
  .ft2-presse-rmc { width: 80px; }
  .ft2-presse-sudradio { width: 39px; }
}