/* ==========================================================================
   WEBIPHI — En-tête                                           wbp-header.css
   Barre collante, méga-menu 5 colonnes (desktop), panneau latéral (mobile).

   Deux implémentations, pas une seule responsive : au-dessus de 981px le
   méga-menu, en dessous le panneau en accordéon. Plier l'un dans l'autre
   donne toujours un compromis médiocre des deux côtés.
   ========================================================================== */

/* --------------------------------------------------------------------------
   La barre
   -------------------------------------------------------------------------- */
.wbp-hdr{
  position:sticky;top:0;z-index:100;
  background:rgba(255,255,255,.88);
  backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid transparent;
  transition:border-color .3s, box-shadow .3s, background .3s,
             transform .45s var(--wbp-ease);
}
/* Le filet n'apparaît qu'une fois la page défilée : tout en haut, une ligne
   sous l'en-tête coupe le héros pour rien. */
.wbp-hdr--scrolled{
  border-bottom-color:var(--wbp-line);
  box-shadow:0 1px 20px rgba(18,16,15,.06);
  background:rgba(255,255,255,.94);
}
/* Le panneau ouvert doit être opaque : en translucide, le héros transparaît
   derrière les libellés du menu et plus rien n'est lisible. */
.wbp-hdr:has(.wbp-mega.is-open){background:#fff;backdrop-filter:none}

/* --------------------------------------------------------------------------
   Barre posée sur un héros sombre
   Tant qu'on n'a pas défilé, la barre est transparente et écrit en blanc ;
   dès le premier défilement elle redevient la barre blanche habituelle.
   Déclenché par une classe sur <body> (bodyclass: wbp-p-dark), donc
   strictement limité aux pages qui ont un héros noir — les 28 autres ne
   voient pas passer une seule de ces règles.
   -------------------------------------------------------------------------- */
/* fixed et non sticky, et c'est indispensable : en sticky la barre reste
   DANS le flux, occupe ses 76 px en haut de page, et le héros commence en
   dessous au lieu de passer dessous. On voyait alors un bandeau blanc de
   76 px au-dessus du noir, avec le logo blanc invisible dedans.
   Le héros porte déjà un padding-top suffisant pour compenser. */
.wbp-p-dark .wbp-hdr{position:fixed;left:0;right:0;top:0}

.wbp-p-dark .wbp-hdr:not(.wbp-hdr--scrolled){
  background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;
  border-bottom-color:transparent;box-shadow:none;
}
.wbp-p-dark .wbp-hdr:not(.wbp-hdr--scrolled) .wbp-logo{color:#fff}
.wbp-p-dark .wbp-hdr:not(.wbp-hdr--scrolled) .wbp-nav__link,
.wbp-p-dark .wbp-hdr:not(.wbp-hdr--scrolled) .wbp-nav__toggle,
.wbp-p-dark .wbp-hdr:not(.wbp-hdr--scrolled) .wbp-hdr__tel{color:rgba(255,255,255,.88)}
.wbp-p-dark .wbp-hdr:not(.wbp-hdr--scrolled) .wbp-hdr__tel svg{stroke:rgba(255,255,255,.7)}
.wbp-p-dark .wbp-hdr:not(.wbp-hdr--scrolled) .wbp-nav__link:hover,
.wbp-p-dark .wbp-hdr:not(.wbp-hdr--scrolled) .wbp-nav__toggle:hover,
.wbp-p-dark .wbp-hdr:not(.wbp-hdr--scrolled) .wbp-hdr__tel:hover{
  color:#fff;
}
.wbp-p-dark .wbp-hdr:not(.wbp-hdr--scrolled) .wbp-burger span{background:#fff}
/* Le bouton d'appel à l'action garde le bordeaux de marque, y compris sur le
   noir du héros. Même raison que .wbp-btn--glow : c'est le filet blanc qui
   détache la forme du fond, pas un changement de couleur. */
.wbp-p-dark .wbp-hdr:not(.wbp-hdr--scrolled) .wbp-hdr__cta{
  background:var(--wbp-brand);color:var(--wbp-cream);
  border:1px solid rgba(255,255,255,.30);
  box-shadow:0 8px 22px rgba(0,0,0,.45);
}
.wbp-p-dark .wbp-hdr:not(.wbp-hdr--scrolled) .wbp-hdr__cta:hover{
  background:#7E0B1F;border-color:rgba(255,255,255,.44);
}
/* Le panneau du méga-menu, lui, reste blanc : il porte du texte. */
.wbp-p-dark .wbp-hdr:has(.wbp-mega.is-open){background:#fff}
.wbp-p-dark .wbp-hdr:has(.wbp-mega.is-open) .wbp-logo{color:var(--wbp-brand)}
.wbp-p-dark .wbp-hdr:has(.wbp-mega.is-open) .wbp-nav__link,
.wbp-p-dark .wbp-hdr:has(.wbp-mega.is-open) .wbp-nav__toggle,
.wbp-p-dark .wbp-hdr:has(.wbp-mega.is-open) .wbp-hdr__tel{color:var(--wbp-ink-2)}
.wbp-p-dark .wbp-hdr:has(.wbp-mega.is-open) .wbp-hdr__tel svg{stroke:currentColor}

/* Langues et filet de survol sur le héros sombre (v1). */
.wbp-p-dark .wbp-hdr:not(.wbp-hdr--scrolled):not(:has(.wbp-mega.is-open)) .wbp-lang a{color:rgba(255,255,255,.6)}
.wbp-p-dark .wbp-hdr:not(.wbp-hdr--scrolled):not(:has(.wbp-mega.is-open)) .wbp-lang a[aria-current],
.wbp-p-dark .wbp-hdr:not(.wbp-hdr--scrolled):not(:has(.wbp-mega.is-open)) .wbp-lang a:hover{color:#fff}
.wbp-p-dark .wbp-hdr:not(.wbp-hdr--scrolled):not(:has(.wbp-mega.is-open)) :is(.wbp-nav__link,.wbp-nav__toggle)::after{background:#B8203F}

/* La barre s'efface quand on descend et revient dès qu'on remonte (v1). Le
   script la garde affichée si un panneau est ouvert ou si le focus clavier
   est dedans : une barre qui fuit sous le Tab devient introuvable. */
.wbp-hdr--hidden{transform:translateY(-100%)}

/* Même largeur que le contenu des sections (--wbp-maxw, 1280) et que les
   méga-menus : le logo tombe pile au-dessus des titres, à toutes les tailles
   d'écran. Avant le 11/10/2026 : 1440, décalé dès 1281px. */
.wbp-hdr__in{display:flex;align-items:center;gap:clamp(12px,1.6vw,22px);height:var(--wbp-hdr-h);max-width:var(--wbp-maxw)}

/* ---------- logo ----------
   Le wordmark est un TRACÉ SVG, plus le PNG en masque.

   Trois raisons. Il est net à n'importe quelle taille et sur n'importe quel
   écran, là où le PNG à 1970 px de large se ramollissait en 168 px. Il
   prend sa couleur de `currentColor`, donc bordeaux dans la barre et crème
   dans le pied de page sans réglage. Et surtout il peut se DESSINER : avec
   pathLength="1", chaque lettre a une longueur de 1 quelle que soit sa
   géométrie réelle, ce qui permet de piloter les sept tracés avec la même
   animation et de simples délais. */
.wbp-logo{display:flex;align-items:center;margin-right:auto;flex:none;
  color:var(--wbp-brand);transition:opacity .2s}
.wbp-logo:hover{opacity:.72}
.wbp-logo__svg{display:block;width:168px;height:auto;overflow:visible}
.wbp-logo__svg path{
  stroke:currentColor;stroke-width:15;fill:none;
  stroke-linecap:round;stroke-linejoin:round;
}

/* Le tracé au chargement. Enfermé dans .wbp-js : sans script, le logo est
   simplement dessiné, jamais invisible. */
@keyframes wbp-draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
.wbp-js .wbp-logo__svg path{
  stroke-dasharray:1;stroke-dashoffset:1;
  animation:wbp-draw .9s cubic-bezier(.65,0,.35,1) forwards;
}
.wbp-js .wbp-logo__svg path:nth-child(1){animation-delay:.05s}
.wbp-js .wbp-logo__svg path:nth-child(2){animation-delay:.13s}
.wbp-js .wbp-logo__svg path:nth-child(3){animation-delay:.21s}
.wbp-js .wbp-logo__svg path:nth-child(4){animation-delay:.29s}
.wbp-js .wbp-logo__svg path:nth-child(5){animation-delay:.36s}
.wbp-js .wbp-logo__svg path:nth-child(6){animation-delay:.43s}
.wbp-js .wbp-logo__svg path:nth-child(7){animation-delay:.50s}

@media (prefers-reduced-motion:reduce){
  .wbp-js .wbp-logo__svg path{stroke-dasharray:none;stroke-dashoffset:0;animation:none}
}

/* --------------------------------------------------------------------------
   Navigation principale — reprise de la v1
   Sept éléments dans la barre (5 liens, langues, téléphone, bouton) : sous
   1121px ils ne tiennent plus, le burger prend le relais. Le téléphone part
   le premier, sous 1281px, comme dans la v1.
   Pas de pastille au survol : un filet qui se trace sous le libellé, en
   transform pour que seule la composition travaille.
   -------------------------------------------------------------------------- */
.wbp-nav{display:none;align-items:center;gap:2px;align-self:stretch}
.wbp-nav__link,
.wbp-nav__toggle{
  position:relative;
  display:inline-flex;align-items:center;gap:6px;
  height:100%;padding:0 14px;
  font-size:.9375rem;font-weight:500;line-height:1.25;white-space:nowrap;
  color:var(--wbp-ink-2);background:none;border:none;cursor:pointer;
  transition:color .2s;
}
.wbp-nav__link::after,
.wbp-nav__toggle::after{
  content:'';position:absolute;left:14px;right:14px;bottom:22px;height:1.5px;
  background:var(--wbp-brand-mid);
  transform:scaleX(0);transform-origin:left;
  transition:transform .35s var(--wbp-ease);
}
.wbp-nav__link:hover,
.wbp-nav__toggle:hover,
.wbp-nav__toggle[aria-expanded="true"]{color:var(--wbp-ink)}
.wbp-nav__link:hover::after,
.wbp-nav__toggle:hover::after,
.wbp-nav__toggle[aria-expanded="true"]::after,
.wbp-nav__link[aria-current="page"]::after{transform:none}
.wbp-nav__link[aria-current="page"],
.wbp-nav__toggle[aria-current]{color:var(--wbp-brand)}
.wbp-nav__chev{width:13px;height:13px;flex:none;transition:transform .3s var(--wbp-ease);
  stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.wbp-nav__toggle[aria-expanded="true"] .wbp-nav__chev{transform:rotate(180deg)}

/* ---------- langues ----------
   Les langues inactives sont en gris « muted » et non en opacité réduite
   comme dans la v1 : à .55 sur blanc, du 12px tombe à 3,5:1, sous le seuil AA. */
.wbp-lang{display:none;align-items:center;gap:2px;flex:none;
  font-size:.75rem;font-weight:600;letter-spacing:.08em}
.wbp-lang a{padding:6px 5px;color:var(--wbp-muted);transition:color .2s}
.wbp-lang a[aria-current],
.wbp-lang a:hover{color:var(--wbp-ink)}
.wbp-lang--center{display:flex;justify-content:center;margin-top:8px}
.wbp-mmenu .wbp-lang a{color:rgba(255,255,255,.6)}
.wbp-mmenu .wbp-lang a[aria-current],
.wbp-mmenu .wbp-lang a:hover{color:#fff}

.wbp-hdr__tel{
  display:none;align-items:center;gap:8px;flex:none;white-space:nowrap;
  font-size:.9375rem;font-weight:500;color:var(--wbp-ink);
  padding:9px 2px;transition:color .16s;
}
.wbp-hdr__tel svg{width:15px;height:15px;stroke:currentColor;fill:none;
  stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.wbp-hdr__tel:hover{color:var(--wbp-brand)}

.wbp-hdr__cta{display:none;flex:none;gap:10px;padding:11px 20px;min-height:44px;font-size:.9375rem}
.wbp-hdr__arrow{width:16px;height:16px;flex:none;fill:none;stroke:currentColor;
  stroke-width:1.5;transition:transform .35s var(--wbp-ease)}
.wbp-btn:hover .wbp-hdr__arrow{transform:translateX(4px)}

/* Deux traits, comme la v1. Le panneau a son propre bouton de fermeture. */
.wbp-burger{
  display:inline-flex;flex-direction:column;justify-content:center;gap:7px;
  width:46px;height:46px;flex:none;padding:13px 11px;
  background:none;border:none;border-radius:9px;cursor:pointer;
}
.wbp-burger span{display:block;width:100%;height:1.6px;border-radius:2px;background:var(--wbp-brand)}

@media (min-width:1121px){
  .wbp-nav,.wbp-lang,.wbp-hdr__cta{display:flex}
  .wbp-burger{display:none}
}
@media (min-width:1121px) and (max-width:1280px){
  .wbp-logo__svg{width:148px}
  .wbp-nav__link,.wbp-nav__toggle{padding:0 11px}
  .wbp-nav__link::after,.wbp-nav__toggle::after{left:11px;right:11px}
}
/* Au-delà de 1280px, la barre est plafonnée à --wbp-maxw (alignée sur le
   contenu des sections, 11/10/2026) et le téléphone s'ajoute : on garde les
   liens resserrés, sinon le bouton déborde de ~17px à droite. */
@media (min-width:1281px){
  .wbp-hdr__tel{display:inline-flex}
  .wbp-nav__link,.wbp-nav__toggle{padding:0 11px}
  .wbp-nav__link::after,.wbp-nav__toggle::after{left:11px;right:11px}
}

/* ==========================================================================
   MÉGA-MENUS (desktop) — mise en page v1
   Services : les six pôles de l'accueil sur trois colonnes et deux rangées,
   une carte encre qui pousse l'audit sur toute la hauteur, et une ligne
   « Aussi » (16/10/2026).
   Ressources : trois cartes (« Stop aux arnaques » retirée le 17/10/2026).
   ========================================================================== */
.wbp-mega{
  position:absolute;left:0;right:0;top:100%;z-index:99;
  background:#fff;color:var(--wbp-ink);
  border-top:1px solid var(--wbp-line);
  box-shadow:0 30px 60px -30px rgba(18,16,15,.25);
  /* visibility plutôt que display:none — la transition doit pouvoir jouer, et
     visibility:hidden sort quand même les liens de l'ordre de tabulation. */
  opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:opacity .28s var(--wbp-ease), transform .38s var(--wbp-ease), visibility 0s .38s;
  /* Portable 1366×768 : le panneau défile en lui-même plutôt que de passer
     sous la ligne de flottaison. */
  max-height:calc(100vh - var(--wbp-hdr-h));overflow-y:auto;
}
.wbp-mega.is-open{opacity:1;visibility:visible;transform:none;
  transition:opacity .28s var(--wbp-ease), transform .38s var(--wbp-ease), visibility 0s}
@media (max-width:1120px){.wbp-mega{display:none}}

.wbp-mega__in{
  width:100%;max-width:var(--wbp-maxw);margin-inline:auto;
  padding:40px var(--wbp-pad) 44px;
  display:grid;grid-template-columns:repeat(3,1fr) 1.15fr;gap:32px 40px;
}
.wbp-mega--sm .wbp-mega__in{grid-template-columns:repeat(3,1fr);gap:20px}

.wbp-mega__cat{min-width:0}
/* Placée explicitement : les six pôles remplissent les colonnes 1 à 3,
   la carte reste à droite, sur les deux rangées. */
#wbp-mega .wbp-mega__feat{grid-column:4;grid-row:1 / span 2}
.wbp-mega__h{
  display:flex;justify-content:space-between;align-items:center;
  margin:0 0 18px;padding-bottom:14px;
  border-bottom:1px solid var(--wbp-line);
  font-size:.75rem;font-weight:500;line-height:1;
  letter-spacing:.16em;text-transform:uppercase;
  color:var(--wbp-muted);transition:color .2s;
}
.wbp-mega__h:hover{color:var(--wbp-brand)}

/* Bloc, pas flex : le <b> et le <small> restent du texte (piège n°2). */
.wbp-mega__item{
  display:block;padding:7px 0;
  font-size:.9375rem;line-height:1.35;
  transition:color .2s, transform .3s var(--wbp-ease);
}
.wbp-mega__item b{display:block;font-weight:400}
.wbp-mega__item small{display:block;margin-top:2px;font-size:.8125rem;color:var(--wbp-muted)}
.wbp-mega__item:hover{color:var(--wbp-brand)}
@media (hover:hover){.wbp-mega__item:hover{transform:translateX(4px)}}

/* ---------- la carte ---------- */
.wbp-mega__feat{
  display:flex;flex-direction:column;align-items:flex-start;
  padding:28px;border-radius:18px;
  background:var(--wbp-dark);color:#fff;
}
/* Le « W » en relief. Tranche bordeaux foncé décalée en ombre portée dure,
   reflet en haut, ombre douce dessous : trois ombres suffisent à donner
   l'épaisseur de l'icône 3D de la v1. */
.wbp-mega__tile{
  display:grid;place-items:center;flex:none;
  width:104px;height:96px;margin-bottom:auto;border-radius:22px;
  background:linear-gradient(150deg,#C0213F 0%,#8A0D24 50%,#5E0716 100%);
  box-shadow:
    inset 0 2px 1px rgba(255,255,255,.28),
    inset -3px -5px 0 rgba(0,0,0,.22),
    7px 9px 0 #3E040E,
    0 22px 34px rgba(106,7,24,.55);
  transform:rotate(-3deg);
}
.wbp-mega__tile svg{width:58px;height:auto;overflow:visible}
.wbp-mega__tile path{fill:none;stroke:#fff;stroke-width:17;stroke-linejoin:miter;stroke-linecap:butt}
.wbp-mega__ft{display:block;margin:30px 0 8px;
  font-size:1.625rem;font-weight:300;line-height:1.1;letter-spacing:-.02em}
.wbp-mega__feat p{font-size:.875rem;line-height:1.6;color:rgba(255,255,255,.62);margin:0 0 20px}
.wbp-mega__feat .wbp-btn{gap:10px;min-height:46px;padding:11px 22px;font-size:.875rem}

.wbp-mega__card{
  display:block;padding:22px;border:1px solid var(--wbp-line);border-radius:14px;
  transition:border-color .25s, transform .35s var(--wbp-ease);
}
.wbp-mega__card:hover{border-color:var(--wbp-ink);transform:translateY(-2px)}
.wbp-mega__card b{display:block;margin-bottom:6px;font-size:1.1875rem;font-weight:400;line-height:1.2}
.wbp-mega__card span{display:block;font-size:.875rem;line-height:1.5;color:var(--wbp-muted)}

/* ==========================================================================
   VOILE — derrière les méga-menus (desktop) et le menu mobile
   En desktop il passe SOUS la barre (z 90 < 100) : on assombrit la page,
   pas l'en-tête.
   ========================================================================== */
.wbp-scrim{
  position:fixed;inset:0;z-index:150;
  background:rgba(18,16,15,.48);
  opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s;
}
.wbp-scrim.is-open{opacity:1;visibility:visible}
@media (min-width:1121px){
  .wbp-scrim{z-index:90;background:rgba(18,16,15,.35)}
  .wbp-scrim.is-open{opacity:0;visibility:hidden}
  .wbp-scrim.is-mega{opacity:1;visibility:visible}
}

/* ==========================================================================
   MENU MOBILE — plein écran sombre, repris de la v1
   Les pôles restent un accordéon, un seul ouvert à la fois.
   ========================================================================== */
.wbp-mmenu{
  position:fixed;inset:0;z-index:200;
  display:flex;flex-direction:column;
  padding:12px var(--wbp-pad) calc(34px + env(safe-area-inset-bottom));
  background:var(--wbp-dark);color:#fff;
  /* Le défilement est porté par le panneau lui-même : sur iOS, un conteneur
     intermédiaire qui défile avale l'inertie et le menu paraît collé. */
  overflow-y:auto;overscroll-behavior:contain;
  opacity:0;visibility:hidden;
  transition:opacity .35s var(--wbp-ease), visibility 0s .35s;
}
.wbp-mmenu.is-open{opacity:1;visibility:visible;transition:opacity .35s var(--wbp-ease), visibility 0s}
@media (min-width:1121px){.wbp-mmenu{display:none}}

.wbp-mmenu__top{display:flex;align-items:center;justify-content:space-between;
  min-height:calc(var(--wbp-hdr-h) - 12px);margin-bottom:18px}
.wbp-mmenu__top .wbp-logo{color:#fff}
.wbp-mmenu__close{
  width:46px;height:46px;display:grid;place-items:center;
  background:none;border:none;border-radius:9px;cursor:pointer;color:#fff;
}
.wbp-mmenu__close svg{width:22px;height:22px;stroke:currentColor;fill:none;
  stroke-width:1.6;stroke-linecap:round}

/* Les entrées de premier niveau et les boutons d'accordéon partagent
   exactement la même allure, sinon la hiérarchie paraît fausse. */
.wbp-mmenu__link,
.wbp-mmenu__accbtn{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  width:100%;padding:20px 0;
  font-size:1.75rem;font-weight:300;line-height:1.1;letter-spacing:-.02em;text-align:left;
  color:#fff;background:none;border:none;
  border-bottom:1px solid rgba(255,255,255,.12);cursor:pointer;
}
/* Le « + » de la v1, qui pivote en croix une fois ouvert. */
.wbp-mmenu__accbtn::after{
  content:'+';flex:none;font-size:1.875rem;font-weight:200;line-height:1;
  color:#D8475F;transition:transform .3s var(--wbp-ease);
}
.wbp-mmenu__accbtn[aria-expanded="true"]::after{transform:rotate(45deg)}

/* max-height animable : le contenu est connu et tient sous 1600px. Un hidden
   pur couperait la transition ; une hauteur calculée en JS ferait dépendre
   l'affichage du script.

   visibility en plus, et ce n'est pas cosmétique : replié, overflow:hidden
   rogne les liens mais ne les retire PAS du Tab. Sans cette ligne le clavier
   descend dans un accordéon fermé et le navigateur fait sauter le panneau
   pour suivre un lien qu'on ne voit pas. */
.wbp-mmenu__panel{
  max-height:0;overflow:hidden;visibility:hidden;
  transition:max-height .38s ease, visibility .38s;
}
.wbp-mmenu__accbtn[aria-expanded="true"] + .wbp-mmenu__panel{
  max-height:1600px;visibility:visible;
}
.wbp-mmenu__panel::after{content:'';display:block;height:14px}
.wbp-mmenu__sub{
  display:block;padding:9px 0;
  font-size:1rem;color:rgba(255,255,255,.62);transition:color .2s;
}
.wbp-mmenu__sub:hover{color:#fff}

.wbp-mmenu__foot{margin-top:36px;display:flex;flex-direction:column;gap:14px}
.wbp-mmenu__foot .wbp-btn{width:100%}
.wbp-mmenu__tel{
  display:flex;align-items:center;justify-content:center;gap:9px;
  min-height:52px;border-radius:999px;border:1px solid rgba(255,255,255,.30);
  font-size:1rem;font-weight:500;color:#fff;
}
.wbp-mmenu__tel svg{width:16px;height:16px;stroke:currentColor;fill:none;
  stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}

/* Verrou de défilement de la page pendant que le panneau est ouvert. */
.wbp-locked{overflow:hidden}