/* ==========================================================================
   GROUPE IMPEC — Habillage : en-tête, menu mobile, pied, barre d'action
   --------------------------------------------------------------------------
   FICHIER GÉNÉRÉ à partir de css/styles-v7.css de la maquette.
   Ne pas le modifier à la main : corriger la maquette et régénérer.

   POURQUOI IL EXISTE SÉPARÉMENT

   L'habillage doit s'afficher sur TOUTES les pages du site, alors que le
   design des sections ne concerne que la page d'accueil. Or styles-v7.css
   porte huit règles à sélecteur nu — html, body, img, h1, h2/h3, p, ul/ol,
   a, button — qui, chargées partout, casseraient la mise en forme de chaque
   article et de chaque page.

   Ce fichier ne reprend donc QUE les règles portant une classe d'habillage.
   Vérifié : les 130 règles concernées en portent toutes une, aucune ne peut
   fuir sur le reste du site.

   CE QU'IL NE CONTIENT PAS, DÉLIBÉRÉMENT

   - les 8 règles à sélecteur nu, laissées dans styles-v7.css ;
   - tout ce qui dépend de .a-intro : l'intro ne joue que sur l'accueil, où
     styles-v7.css se charge de toute façon.

   La remise à zéro ci-dessous remplace, en portée, ce que ces règles nues
   apportaient aux listes et aux liens de l'habillage.
   ========================================================================== */

/* ----- Remise à zéro, cantonnée à l'habillage ----------------------------

   ⚠️ LIRE AVANT D'AJOUTER UNE RÈGLE PLUS BAS.

   Ces sélecteurs s'écrivent « .entete <balise> » : ils pèsent donc (0,1,1),
   une classe PLUS une balise. Or la maquette écrit ses règles à classe unique,
   (0,1,0). Cette remise à zéro les bat toutes — mais seulement quand l'élément
   visé EST la balise en question, ce qui rend le symptôme capricieux : dans le
   menu, le <a> obéit à la maquette et le <button> juste à côté ne lui obéit
   pas.

   Le piège a déjà frappé trois fois :
     · .megamenu__souslistedeux, écrasée par « ul » — d'où ses deux classes ;
     · .megamenu__trigger, écrasée par « button » — police et graisse perdues ;
     · .entete__logo-blanc, écrasée par « img » — le logo s'affichait en double.

   RÈGLE À SUIVRE : toute règle portant sur un button, img, a, ul, ol ou p de
   l'habillage doit peser au moins (0,1,1). Deux classes, ou une classe plus la
   balise. Jamais une classe seule.
   -------------------------------------------------------------------------- */
.entete ul, .entete ol,
.megamenu ul, .megamenu ol,
.menu-mobile ul, .menu-mobile ol,
.pied ul, .pied ol,
.barre-mobile ul, .barre-mobile ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

.entete p, .megamenu p, .menu-mobile p, .pied p, .barre-mobile p {
  margin: 0;
}

.entete a, .megamenu a, .menu-mobile a, .pied a, .barre-mobile a {
  color: inherit;
  text-decoration: none;
}

.entete img, .megamenu img, .menu-mobile img, .pied img, .barre-mobile img {
  display: block;
  max-width: 100%;
  height: auto;
}

.entete button, .megamenu button, .menu-mobile button,
.pied button, .barre-mobile button {
  font: inherit;
  cursor: pointer;
}

.entete :is(h1, h2, h3), .pied :is(h1, h2, h3) {
  margin: 0;
  line-height: var(--interligne-titre);
}

/* ==========================================================================
   MASQUER L'HABILLAGE DE SHOPKEEPER
   --------------------------------------------------------------------------
   L'en-tête et le pied de la maquette remplacent ceux du thème sur tout le
   site. On reprend exactement ce que fait le gabarit page-blank.php de
   Shopkeeper, qui masque les mêmes conteneurs.

   On masque plutôt qu'on ne supprime : le balisage du thème reste dans le
   document, mais il ne s'affiche plus. C'est le geste le moins invasif — il
   suffit de retirer ce bloc pour tout rendre au thème.

   .content-area perd ses marges : elles cadraient le contenu sous l'en-tête
   du thème, qui n'est plus là.
   ========================================================================== */

.top-headers-wrapper,
#site-footer {
  display: none;
}

.content-area {
  margin: 0;
  padding: 0;
}

/* --------------------------------------------------------------------------
   LA BANDE DE 50 PX AU-DESSUS DE LA BARRE DE NAVIGATION

   Shopkeeper écrit « #page_wrapper.sticky_header { padding-top: 50px } » : il
   réserve la hauteur de son en-tête collant, qui se place en absolu par-dessus.
   Or cet en-tête est masqué juste au-dessus — il ne reste donc que 50 px de
   fond de page vides, au-dessus de notre barre.

   C'est la « barre blanche » : pleine largeur, de la couleur du fond, présente
   à toutes les tailles d'écran, et qui semble disparaître au défilement — non
   pas qu'elle s'en aille, mais parce que la barre se décolle et vient la
   couvrir. Vérifié dans le HTML servi : le conteneur porte bien la classe
   « sticky_header ».

   Le thème prévoit lui-même l'exception, pour son gabarit vierge :
   « .page-template-page-blank #page_wrapper { padding-top: 0 } ». On applique
   le même geste, puisqu'on est dans le même cas — un en-tête à nous, et celui
   du thème hors service.
   -------------------------------------------------------------------------- */
#page_wrapper.sticky_header,
#page_wrapper.transparent_header {
  padding-top: 0;
}

/* ==========================================================================
   RENDRE À L'EN-TÊTE SON COLLAGE EN HAUT DE PAGE
   --------------------------------------------------------------------------
   .entete est en « position: sticky; top: 0 ». Elle devrait donc rester
   visible au défilement — et pourtant elle disparaissait.

   La cause : .st-container porte « overflow: hidden auto ». Un ancêtre dont
   l'overflow n'est pas « visible » devient le conteneur de référence du
   collage. L'en-tête se mettait donc à coller à CETTE boîte, alors que le
   défilement réel se fait sur le document. La boîte s'en allant avec la page,
   l'en-tête partait avec elle.

   Ces deux conteneurs viennent du menu hors-écran de Shopkeeper, qui fait
   glisser la page horizontalement ; overflow-x: hidden y évite une barre de
   défilement pendant le glissement. Comme le menu de la maquette remplace
   celui du thème et que son déclencheur n'est plus atteignable, on peut
   libérer l'overflow.

   Vérifié avant d'écrire cette règle : aucun débordement horizontal créé,
   scrollWidth reste égal à clientWidth.
   ========================================================================== */

.st-container,
.st-content {
  overflow: visible;
}

/* ==========================================================================
   LE TIROIR DE NAVIGATION DE SHOPKEEPER, ENCORE DANS LE DOM
   --------------------------------------------------------------------------
   #offCanvasRight1 (nav.mobile-navigation) est le menu mobile D'ORIGINE du
   thème — remplacé par .menu-mobile, jamais retiré du HTML. Son déclencheur
   (.tools_button) est déjà masqué par un ancêtre : personne ne peut l'ouvrir.

   Mais il reste posé en « position: fixed; right: 0 » avec ses 320 px de
   large hors écran, et libérer overflow ci-dessus (nécessaire contre le bug
   du collage de l'en-tête) a exposé ce tiroir au calcul de largeur du
   document. Vérifié : la page défile réellement vers cette zone vide — 15 px
   en mobile, jusqu'à 291 px en tablette selon la largeur du panneau.

   On le retire du flux plutôt que de re-masquer l'overflow — cette dernière
   option a déjà causé un bug distinct (le collage de l'en-tête, plus haut).
   ========================================================================== */

#offCanvasRight1 {
  display: none;
}

/* ==========================================================================
   LES BARRES BLANCHES SUR LES CÔTÉS, EN MOBILE
   --------------------------------------------------------------------------
   Sous le point de rupture mobile, Shopkeeper pose « padding: 0 20px 88px »
   sur le body. Toute sa chaîne de conteneurs descend alors à 335 px de large
   dans une fenêtre de 375 px, et .st-content ROGNE tout ce qui déborde de ces
   335 px — 20 px de fond de chaque côté restent visibles.

   ⚠️ CETTE RÈGLE ÉTAIT DANS surcharges-theme.css, qui ne charge QUE sur les
   pages à blocs (l'accueil). Signalé le 6 août 2026 : les barres restaient
   visibles sur toutes les AUTRES pages — la majorité du site — puisqu'elles
   ne chargent jamais cette feuille. Déplacée ici, qui charge partout, pour
   couvrir les deux familles de pages avec une seule règle.

   ⚠️ NE PAS écrire « padding: 0 ». Le padding-bottom de 88 px dégage la barre
   d'action mobile du thème : l'écraser masquerait le bas de la page.

   ⚠️ SUITE, le jour même : retirer ces 20 px a démasqué un second débordement.
   Chaque rangée WPBakery « stretch » porte -15px de marge de chaque côté —
   une convention normale, pour qu'une rangée pleine largeur déborde de son
   conteneur. Les 20 px de padding servaient, sans le vouloir, de coussin qui
   absorbait ce -15px. Sans eux, la page défile réellement de 15 px vers du
   vide — vérifié avec window.scrollTo(9999,0).

   overflow-x: hidden ICI, sur html — jamais sur .st-container / .st-content
   (juste au-dessus) : c'est précisément cette overflow-là qui causait le
   collage de l'en-tête. Vérifié : le poser sur body seul ne suffit pas, le
   défilement horizontal reste possible — c'est html qui est le véritable
   conteneur de défilement du document, body ne fait que lui déléguer son
   propre overflow s'il est visible. Aucun conflit avec le positionnement
   collant : ce n'est pas le même conteneur que celui du bug de collage.
   ========================================================================== */

html {
  overflow-x: hidden;
}

body {
  padding-inline: 0;
}

/* ==========================================================================
   LA GOUTTIÈRE DE L'EN-TÊTE ET DU PIED
   --------------------------------------------------------------------------
   La maquette la pose plus bas dans ce fichier, mais dans une règle en
   « :where(...) » — dont la spécificité est NULLE. N'importe quelle règle du
   thème la bat, et .entete__interieur se retrouvait à padding: 0 : la barre
   de navigation collait aux bords de l'écran.

   Même expression, reprise telle quelle, avec une spécificité normale.
   C'est le même piège que pour les sections, traité dans surcharges-theme.css.
   ========================================================================== */

.entete__interieur,
.pied {
  padding-inline: max(var(--gouttiere), calc((100% - var(--largeur-max)) / 2));
}

/* ----- Règles reprises de la maquette ------------------------------------ */

.visuellement-cache {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.pied :focus-visible,
.entete:not(.entete--solide) :focus-visible {
  outline-color: var(--accent);
}

:where(main > section:not(.hero), .hero__contenu, .entete__interieur, .pied) {
  padding-inline: max(var(--gouttiere), calc((100% - var(--largeur-max)) / 2));
}

.bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: var(--bouton-m-padding);
  font-family: var(--police-bouton);
  font-size: var(--bouton-m-texte);
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
  border: 1px solid transparent;
  border-radius: var(--rayon-pilule);
  transition:
    transform var(--transition),
    background-color var(--transition),
    color var(--transition);
}

.bouton--s {
  padding: var(--bouton-s-padding);
  font-size: var(--bouton-s-texte);
}

.bouton--l {
  padding: var(--bouton-l-padding);
  font-size: var(--bouton-l-texte);
}

.bouton--or {
  background: var(--accent);
  color: var(--texte-sur-accent);
}

.bouton--or:hover {
  background: var(--accent-chaud);
  transform: translateY(-2px);
}

.bouton--fantome {
  background: transparent;
  color: inherit;
  border-color: currentColor;
}

.bouton--fantome:hover {
  transform: translateY(-2px);
}

/* Deux classes par prudence, pas par correction : ce bouton rend correctement
   aujourd'hui (« Postuler maintenant » est bien blanc sur marine). Mais posé un
   jour dans l'en-tête ou le pied sur un <a>, il tomberait sous le
   « .entete a { color: inherit } » du haut, à (0,1,1). On applique la règle
   énoncée en tête de fichier plutôt que d'attendre le symptôme.

   À ne pas confondre avec le bouton d'envoi des formulaires : celui-là porte
   aussi bouton--indigo, mais c'est « .formulaire .wpcf7-submit » de
   cf7-impec.css qui l'habille, volontairement et en dernier. */
.bouton.bouton--indigo {
  background: var(--marine);
  color: #fff;
}

.bouton.bouton--indigo:hover {
  transform: translateY(-2px);
  color: var(--accent-chaud);
}

.intro-sautee .entete,
.intro-sautee .entete__logo,
.intro-sautee .megamenu__item,
.intro-sautee .entete__actions,
.intro-sautee .burger,
.intro-sautee .barre-mobile {
  animation: none;
}

.entete {
  position: sticky;
  top: 0;
  z-index: var(--z-entete);
  color: var(--texte);
  background: var(--fond-entete);
  backdrop-filter: blur(16px) saturate(1.4);
  border-bottom: 1px solid var(--filet);
  transition:
    background-color var(--transition),
    color var(--transition),
    box-shadow var(--transition);
}

.entete__interieur {
  display: flex;
  align-items: center;
  justify-content: space-between; /* logo à gauche · actions à droite */
  gap: var(--espace-m);
  min-height: var(--hauteur-entete);
  transition: min-height var(--transition);
  position: relative; /* pour centrer le méga-menu en absolu */
}

.entete--solide .entete__interieur {
  min-height: 4rem;
}

/* ⚠️ PAS de padding-bottom ici. Il y en a eu un, pour agrandir l'en-tête
   au-delà de --hauteur-entete et « dégager du vide » sous le logo — mais un
   padding sur un seul côté déséquilibre le centrage vertical de l'IMAGE :
   mesuré, 7px au-dessus contre 16px en dessous. Patrik le voyait « collé en
   haut ». align-items:center, seul, centre l'image à égalité des deux côtés. */
.entete__logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  justify-self: start;
}

/* ⚠️ « width: auto » ÉVITÉ EXPRÈS — bug trouvé le 7 août 2026. Avec une
   hauteur fixe, une largeur auto et « max-width: 100% » (règle .entete img
   plus haut), un logo aussi large que haut (446 × 159, ratio 2,805) se
   retrouvait écrasé bien en dessous de sa hauteur déclarée dès que la barre
   était resserrée — 72px demandés, ~38px rendus à 1300px de large, mesuré.
   « .entete__logo » a pourtant flex-shrink: 0, qui aurait dû l'en protéger :
   le calcul de la taille « auto » d'un remplacé (l'image) à l'intérieur d'un
   item flexible, combiné à max-width en pourcentage, est un des cas les plus
   ambigus du modèle CSS — les navigateurs ne le résolvent pas comme on
   l'attendrait. La largeur ci-dessous, calculée EXPLICITEMENT à partir de la
   même hauteur (× 2,805031446540881, le ratio exact du fichier), contourne
   le problème plutôt que de le corriger : plus rien à deviner, plus rien à
   écraser. Vérifié : le logo tient sa pleine hauteur déclarée à toutes les
   largeurs testées, zéro débordement. */
.entete__logo img {
  height: 72px;
  width: 202px;
  transition:
    height var(--transition),
    width var(--transition);
}

.entete--solide .entete__logo img {
  height: 42px;
  width: 117.81px;
}

/* ⚠️ CORRIGÉ le 6 août 2026 — logo blanc, donc invisible, en haut des pages
   ordinaires. Il y avait ici une bascule vers .entete__logo-blanc,
   conditionnée par « .entete:not(.entete--solide) », pensée pour un en-tête
   transparent au-dessus d'un hero sombre. Sauf que --fond-entete vaut
   #ffffff, fixe, PARTOUT, sans condition — l'en-tête n'est JAMAIS
   transparent, sur aucune page, y compris à l'état « pas encore solide »
   avant le premier défilement. La bascule ET les deux classes qui la
   portaient sont retirées : impec_rendu_entete() (habillage.php) n'émet
   plus qu'une image, sans classe de variante, couleur en permanence — même
   traitement que le logo unique de styles-v7.css, qui n'a lui non plus
   jamais eu cette bascule. */

.megamenu {
  display: flex;
  justify-content: center;
  align-self: stretch; /* occupe toute la hauteur de l'en-tête */
}

.megamenu__liste {
  display: flex;
  align-items: stretch; /* items pleine hauteur, pour combler le vide sous le titre */
  height: 100%;
}

.megamenu__item {
  position: static; /* le panneau s'ancre sur .entete__interieur (pleine largeur) */
  display: flex;
  align-items: center; /* garde le titre centré verticalement */
  /* padding au lieu de gap : les zones de survol se touchent, pas d'espace mort */
  padding-inline: clamp(0.375rem, 0.8vw, 0.75rem);
}

/* DEUX CLASSES, et ce n'est pas décoratif. Les entrées à sous-menu sont des
   <button>, les autres des <a> : à classe unique, la remise à zéro du haut
   (« .megamenu button { font: inherit } », (0,1,1)) ne frappait QUE les
   <button>. D'où « Nous Joindre » en Manrope gras et les quatre autres en
   Radnika maigre — un écart qui n'avait l'air de rien mais qui se voyait.

   Le !important sur font-size est le seul de ce fichier, et il est forcé :
   Shopkeeper écrit « button, .button { font-size: 13px !important } ». Rien
   d'autre ne peut le battre. text-transform, lui, n'a besoin que de la
   spécificité — la maquette ne met pas de capitales sur la nav du haut. */
.megamenu .megamenu__trigger,
.megamenu .megamenu__lien {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.5rem 0;
  background: none;
  border: 0;
  color: inherit;
  font-family: var(--police-corps);
  font-size: 1rem !important;
  font-weight: 700;
  line-height: 1.3;
  text-transform: none;
  letter-spacing: normal;
  position: relative;
  white-space: nowrap; /* chaque catégorie sur une seule ligne */
}

.megamenu__trigger::after,
.megamenu__lien::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 100%;
  height: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--transition);
}

.megamenu__item:hover .megamenu__trigger::after,
.megamenu__item:focus-within .megamenu__trigger::after,
.megamenu__lien:hover::after,
.megamenu__trigger[aria-expanded="true"]::after {
  transform: scaleX(1);
}

.chevron {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  transition: transform var(--transition);
}

.megamenu__item:hover .chevron,
.megamenu__trigger[aria-expanded="true"] .chevron {
  transform: rotate(180deg);
}

.megamenu__panneau {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  overflow: hidden;
  height: 0; /* piloté au pixel par le JS, pour animer la hauteur */
  background: var(--fond-page);
  color: var(--texte);
  border-bottom: 1px solid var(--filet);
  transition: height var(--transition-lent);
}

.megamenu__panneau[hidden] {
  display: none;
}

.megamenu__vue {
  display: block;
  /* Moins de blanc en haut qu'en bas : la barre pose déjà son propre écart
     sous les titres, alors qu'en bas rien ne retient l'œil. Un retrait égal
     des deux côtés paraissait creux au-dessus du premier lien. */
  padding-block: clamp(0.85rem, 1.2vw, 1.15rem) clamp(1.5rem, 2vw, 2rem);
  padding-inline: max(var(--gouttiere), calc((100% - var(--largeur-max)) / 2));
  /* Retrait gauche : les sous-sections démarrent sous le premier titre de la
     barre (« LAVAGE DE VITRES »), pas au bord de page. Toutes les catégories
     partagent ce bord — la colonne ne bouge pas d'une catégorie à l'autre.
     La valeur dépend de la largeur du logo, qui rétrécit au défilement : elle
     n'est pas calculable en CSS, c'est le JS qui pose --mega-retrait. Le
     `max()` reste comme repli si le script ne s'exécute pas. */
  padding-left: var(
    --mega-retrait,
    max(var(--gouttiere), calc((100% - var(--largeur-max)) / 2))
  );
}

.megamenu__vue[hidden] {
  display: none;
}

.megamenu__vue > * {
  animation: menu-apparition var(--transition-lent) both;
}

.megamenu__sousliste {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  /* Compense le retrait interne des liens (voir plus bas) : le texte reste
     aligné au pixel sur « LAVAGE DE VITRES ». */
  margin-left: -0.5rem;
}

.megamenu__sousliste a {
  display: inline-block;
  /* Retrait horizontal permanent : l'aplat de survol a de quoi respirer et
     rien ne bouge au passage de la souris. Le retrait vertical reste minime :
     c'est lui, avec l'interligne, qui règle l'écart entre les sous-sections. */
  padding: 0.05em 0.5rem;
  border-radius: var(--rayon-xs);
  color: var(--marine);
  font-family: var(--police-titre);
  font-size: clamp(0.95rem, 1.6vw, 1.5rem);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  transition:
    background-color var(--transition),
    color var(--transition),
    transform var(--transition);
}

.megamenu__sousliste a:hover,
.megamenu__sousliste a:focus-visible {
  color: #65b3d6;
  transform: translateX(0.35rem);
}

/* Le troisième niveau — « Milieux éducatifs » et ses établissements. La
   maquette ne l'avait pas prévu ; il est écrit ici, sur les jetons du site.

   Il appartient à la même famille que le niveau du dessus, et le CSS le dit en
   ne redisant rien : « .megamenu__sousliste a » l'atteint déjà par descendance
   et lui donne le marine, la police de titre, la graisse, l'approche, les
   capitales et le survol. Seule la TAILLE le distingue — avec le décalage et
   le filet. Redéclarer une couleur ou une police ici romprait le lien, et il
   faudrait l'entretenir à deux endroits. */
/* Deux classes, et ce n'est pas décoratif : « .megamenu ul { margin: 0;
   padding: 0 } » en haut de ce fichier pèse (0,1,1) et écrase une classe
   seule. Mesuré — le filet se collait au texte du parent. */
.megamenu__sousliste .megamenu__souslistedeux {
  /* .megamenu__sousliste porte un retrait négatif de 0.5rem pour compenser le
     rembourrage interne des liens ; ce 1rem replace donc le filet à 0.5rem du
     texte du parent, qui commence à zéro. */
  margin: 0.3rem 0 0.7rem 1rem;
  padding-left: 0.55rem;
  border-left: 2px solid var(--accent-chaud);
}

.megamenu__souslistedeux a {
  font-size: clamp(0.85rem, 1.25vw, 1.15rem);
  line-height: 1.2;
}

/* La sous-liste ne se montre qu'au survol de son secteur.

   Le survol se pose sur le <li>, pas sur le lien du parent : la sous-liste est
   DANS le <li>, donc l'état reste vrai quand la souris descend vers les
   enfants. Posé sur le lien, il se romprait entre les deux.

   « height: 0 » et non « display: none » — un élément en display:none n'est pas
   focalisable, :focus-within ne partirait jamais et les trois liens seraient
   hors d'atteinte au clavier. Ici ils restent dans l'ordre de tabulation, et le
   focus les découvre.

   « 0 → auto » ne s'anime pas, et c'est voulu : le changement est instantané,
   donc la hauteur que rafraichirPanneau() mesure juste après est déjà la bonne.
   C'est le PANNEAU qui s'anime et découvre la sous-liste.

   Sous @media (hover: hover) : sur un appareil sans souris assez large pour
   afficher le méga-menu, rien ne se cache. */
@media (hover: hover) {
  .megamenu__sousliste > li > .megamenu__souslistedeux {
    height: 0;
    margin-block: 0;
    border-left-color: transparent;
    opacity: 0;
    overflow: hidden;
    transition:
      opacity var(--transition),
      border-left-color var(--transition);
  }

  .megamenu__sousliste > li:hover > .megamenu__souslistedeux,
  .megamenu__sousliste > li:focus-within > .megamenu__souslistedeux {
    height: auto;
    margin-block: 0.3rem 0.7rem;
    border-left-color: var(--accent-chaud);
    opacity: 1;
  }
}

.nav-voile {
  position: fixed;
  inset: 0;
  z-index: calc(var(--z-entete) - 1);
  background: rgba(4, 14, 20, 0.6);
  opacity: 0;
  visibility: hidden;
  transition:
    opacity var(--transition),
    visibility var(--transition);
}

.nav-voile.est-visible {
  opacity: 1;
  visibility: visible;
}

@media (prefers-reduced-motion: reduce) {
.megamenu__panneau,
.megamenu__vue > * {
    transition: none;
    animation: none;
  }
}

.entete__actions {
  display: flex;
  align-items: center;
  gap: var(--espace-m);
  flex-shrink: 0;
  justify-self: end;
}

.entete__actions .bouton--or:hover {
  background: var(--accent-chaud);
  color: var(--texte);
}

.entete__langue {
  padding: 0.25rem 0.1rem;
  background: none;
  border: 0;
  color: inherit;
  font-family: var(--police-detail);
  font-size: var(--taille-label);
  font-weight: 700;
  letter-spacing: var(--tracking-label);
  cursor: pointer;
  transition: color var(--transition);
}

.entete__langue:hover {
  color: var(--accent);
}

.entete__tel {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--police-detail);
  font-size: var(--taille-petite);
  font-weight: 700;
  color: currentColor;
  white-space: nowrap;
}

.entete__tel-point {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
  animation: pulsation-accent 2.4s ease-in-out infinite;
}

.burger {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: 0.5rem;
  background: none;
  border: 0;
  border-radius: var(--rayon-pilule);
  /* Les <button> n'héritent pas de `color` : sans ça, les trois barres
     restent noires — invisibles sur l'en-tête marine du menu ouvert. */
  color: inherit;
  transition: background-color var(--transition);
}

/* ⚠️ CORRIGÉ le 6 août 2026 — les trois barres devenaient blanches, donc
   invisibles sur l'en-tête blanc, au survol. Cause : Shopkeeper écrit
   « button:hover, .button:hover { color: #fff } » (styles.css:14235), et
   sans règle propre à .burger sur :hover, ce sélecteur générique — plus
   spécifique que le simple « color: inherit » ci-dessus — l'emportait. Même
   traitement que .menu-mobile__fermer, juste en dessous dans ce fichier :
   couleur reprise en main, plus un fond au survol pour rester visible même
   si un jour ce n'était pas le cas. */
.burger:hover,
.burger:focus-visible {
  color: inherit;
  background: var(--filet);
}

.burger span {
  display: block;
  width: 26px;
  height: 2px;
  background: currentColor;
  transition:
    transform var(--transition),
    opacity var(--transition);
}

.burger[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.burger[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}

.burger[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

.menu-mobile {
  position: fixed;
  /* Plein écran et glissé SOUS l'en-tête plutôt que calé dessous : la barre
     mesure 65 px une fois compactée, pas les 80 px de --hauteur-entete, et
     l'écart laissait voir une bande de page entre les deux — invisible quand
     tout était marine, franche sur la crème. Le retrait haut dégage la barre,
     qui est opaque et se superpose. */
  inset: 0;
  z-index: calc(var(--z-entete) - 1);
  padding: calc(var(--hauteur-entete) + var(--espace-l)) var(--gouttiere)
    var(--espace-xl);
  background: var(--fond-page);
  color: var(--texte);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

.menu-mobile[hidden] {
  display: none;
}

.menu-mobile__titre {
  margin-top: var(--espace-l);
  margin-bottom: 0.5rem;
  font-family: var(--police-detail);
  font-size: var(--taille-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--texte-doux);
}

.menu-mobile__titre:first-child {
  margin-top: 0;
}

.menu-mobile a:not(.bouton) {
  padding: 0.3rem 0;
  color: var(--marine);
  font-family: var(--police-titre);
  font-size: clamp(1.35rem, 6vw, 1.9rem);
  font-weight: 700;
  line-height: 1.24;
  text-transform: uppercase;
  border-bottom: 0;
  transition: color var(--transition);
}

.menu-mobile a:not(.bouton):active {
  color: var(--bleu-pale);
}

/* Le troisième niveau en mobile, même logique qu'en bureau à son échelle : même
   couleur, même police, même casse que le lien du dessus, seule la taille
   change. Il reste VISIBLE en permanence, sans repli au survol — il n'y a pas
   de survol au doigt.

   ATTENTION : « .menu-mobile a:not(.bouton) » ci-dessus impose 1,35–1,9 rem à
   TOUS les liens du menu, y compris ceux-ci. Les deux sélecteurs pèsent le
   même poids ; c'est l'ordre qui tranche, d'où la place de ce bloc — après,
   jamais avant. */
.menu-mobile__sous {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin: 0.15rem 0 0.6rem 0.35rem;
  padding-left: 0.8rem;
  border-left: 2px solid var(--accent-chaud);
}

/* La taille se décide plus bas, dans l'échelle des trois niveaux — deux règles
   qui se contredisent sur la même propriété finissent toujours par se
   départager au mauvais moment. Ici, seulement l'espacement. */
.menu-mobile__sous a:not(.bouton) {
  padding: 0.18rem 0;
  line-height: 1.24;
}

.menu-mobile__actions {
  display: flex;
  flex-direction: column;
  gap: var(--espace-s);
  margin-top: var(--espace-l);
  padding-top: var(--espace-l);
  border-top: 1px solid var(--filet);
}

.menu-mobile__actions .bouton {
  justify-content: center;
}

.menu-mobile__actions .bouton--fantome {
  color: var(--marine);
  border-color: var(--filet);
}

/* Le numéro. Un cran plus affirmé que le courriel à côté : c'est le geste
   qu'on attend le plus d'un visiteur sur téléphone. La bordure est écrite en
   clair — .bouton--fantome pose « border-color: currentColor », correct ici
   mais suspendu à une couleur héritée, donc au premier changement de contexte
   la bordure suivrait sans qu'on l'ait demandé. */
.menu-mobile__actions .menu-mobile__tel {
  color: var(--marine);
  border-color: var(--marine);
}

/* Même dimension que dans la barre basse : c'est le même objet, il doit se
   reconnaître. Le sélecteur est mutualisé pour que les deux ne divergent pas.
   (La barre basse n'émet pas encore de pictogramme ; la règle l'attend.) */
.menu-mobile__tel svg,
.barre-mobile__tel svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.carrieres .bouton {
  flex-shrink: 0;
}

.pied {
  background: var(--fond-sombre);
  color: var(--texte-inverse-doux);
  padding-block: var(--espace-l);
}

.pied__grille {
  display: grid;
  grid-template-columns:
    220px
    430px
    minmax(300px, 1fr);

  column-gap: 1rem;
  align-items: start;

  padding-block: var(--espace-l);
}

.pied__contact {
  min-width: 0;
}

.pied__logo {
  display: inline-block;
}

.pied__logo img {
  display: block;
  width: auto;
  height: 64px;
}

.pied__social {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;

  margin-top: var(--espace-l);
}

.pied__social a:not(.pied__cta) {
  flex: 0 0 50px;
}

.pied__social a {
  display: grid;
  place-items: center;

  width: 50px;
  height: 50px;

  border: 2px solid var(--filet-inverse);
  border-radius: 30px;

  color: var(--texte-inverse);

  transition:
    background-color var(--transition),
    border-color var(--transition),
    color var(--transition);
}

.pied__social a:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--texte-sur-accent);
}

.pied__social svg {
  display: block;

  width: 20px !important;
  height: 20px !important;

  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.pied__cta {
  flex-basis: 100%;

  width: 166px;
  max-width: 166px;

  margin-top: var(--espace-s);
  margin-left: 0;

  padding-inline: 1rem;

  white-space: nowrap;
}

.pied__coordonnees {
  display: flex;
  align-items: center;
  gap: 1.5rem;

  /* Alignement avec le haut des réseaux sociaux */
  margin-top: calc(64px + var(--espace-l) + 7px);

  padding: 0;
}

.pied__bloc {
  display: flex;
  align-items: center;

  gap: 1rem;

  min-width: 0;
}

.pied__bloc > svg {
  display: block;
  flex: 0 0 50px;

  width: 50px !important;
  height: 50px !important;

  padding: 13px;

  border: 2px solid var(--filet-inverse);
  border-radius: 30px;

  fill: none !important;
  stroke: var(--texte-inverse);
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.pied__bloc h3 {
  margin: 0 0 0.3rem;

  font-family: var(--police-detail);
  font-size: var(--taille-label);
  font-weight: 700;
  letter-spacing: var(--tracking-label);

  text-transform: uppercase;

  color: var(--accent-chaud);
}

.pied__bloc p {
  margin: 0;

  font-size: var(--taille-petite);
  line-height: 1.5;

  color: var(--texte-inverse);
}

.pied__bloc a {
  color: var(--texte-inverse);
  text-decoration: none;

  transition: color var(--transition);
}

.pied__bloc a:hover {
  color: var(--accent);
}

.pied__nav {
  transform: translateX(1.5rem);
}

.pied__nav ul {
  display: flex;
  flex-direction: column;

  margin: 0;
  padding: 0;

  list-style: none;
}

.pied__nav li {
  margin: 0;
  padding: 0;
}

.pied__nav a {
  display: inline-block;

  font-family: var(--police-titre);
  font-size: clamp(1.2rem, 2.8vw, 2.3rem);
  font-weight: 700;

  line-height: 1.14;
  letter-spacing: -0.02em;

  text-transform: uppercase;
  text-decoration: none;

  color: var(--creme);

  transition:
    color var(--transition),
    transform var(--transition);
}

.pied__nav a:hover {
  color: var(--accent);
  transform: translateX(10px);
}

.pied__bandeau {
  display: grid;
  grid-template-columns: 0.8fr 1.7fr;

  border-top: 1px solid var(--filet-inverse);
  border-bottom: 1px solid var(--filet-inverse);
}

.pied__info {
  display: flex;
  align-items: center;

  gap: 1.25rem;

  min-width: 0;

  padding-block: 1.5rem;
}

.pied__info + .pied__info {
  padding-left: clamp(2rem, 5vw, 5rem);

  border-left: 1px solid var(--filet-inverse);
}

.pied__info > svg {
  display: block;
  flex: 0 0 34px;

  width: 34px !important;
  height: 34px !important;

  min-width: 34px;
  max-width: 34px;

  min-height: 34px;
  max-height: 34px;

  fill: none !important;
  stroke: var(--texte-inverse);

  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.pied__info h3 {
  margin: 0 0 0.25rem;

  font-family: var(--police-detail);
  font-size: var(--taille-label);
  font-weight: 700;

  letter-spacing: var(--tracking-label);
  text-transform: uppercase;

  color: var(--accent-chaud);
}

.pied__info p {
  margin: 0;

  font-size: var(--taille-petite);
  line-height: 1.5;

  color: var(--texte-inverse);
}

.pied__bas {
  display: flex;
  align-items: center;
  justify-content: space-between;

  flex-wrap: wrap;

  gap: var(--espace-s);

  padding-top: var(--espace-l);

  font-family: var(--police-detail);
  font-size: var(--taille-label);
  letter-spacing: 0.02em;

  color: var(--texte-inverse-doux);
}

.pied__legal {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espace-m);
}

.pied__legal a {
  color: var(--texte-inverse-doux);
  text-decoration: none;

  transition: color var(--transition);
}

.pied__legal a:hover {
  color: var(--accent-chaud);
}

.pied__grille > *,
.pied__coordonnees,
.pied__contact {
  min-width: 0;
}

.pied__contact a {
  overflow-wrap: anywhere;
}

.barre-mobile {
  display: none;
}

/* ⚠️ CORRIGÉ le 7 août 2026 — Patrik : la barre restait invisible en usage
   « portable posé à plat » ou fenêtre de bureau étroite, parce que
   « orientation: portrait » l'excluait dès que la largeur dépassait la
   hauteur. Elle doit apparaître sur tout écran ≤ 1024 px, portrait ou
   paysage — condition retirée. */
@media (max-width: 1024px) {
.barre-mobile {
    position: fixed;
    inset: auto 0 0;
    z-index: 150;

    display: grid;
    /* minmax(0, 1fr) et non 1fr : « 1fr » vaut « minmax(auto, 1fr) », et
       ce minimum « auto » empêche une colonne de descendre sous la largeur
       de son contenu. Le numéro étant en nowrap, sa colonne restait plus
       large que l'autre. Le zéro lève ce plancher et rend les deux moitiés
       rigoureusement égales. */
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--espace-s);
    align-items: stretch;

    padding: var(--espace-s);
    /* env() protège du repère d'accueil des iPhone ; la valeur de repli
       s'applique partout ailleurs. */
    padding-bottom: calc(var(--espace-s) + env(safe-area-inset-bottom, 0px));

    background: var(--fond-sombre);
    border-top: 1px solid var(--filet-inverse);
  }
.barre-mobile a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;

    /* 48 px : la cible tactile recommandée. Ne pas descendre en dessous. */
    min-height: 48px;
    padding-inline: var(--espace-m);

    font-family: var(--police-bouton);
    font-size: 1rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;

    border-radius: var(--rayon-pilule);
  }
/* DEUX CLASSES, et c'est le cinquième cas du même piège. « .barre-mobile a
     { color: inherit } » de la remise à zéro pèse (0,1,1) et écrasait cette
     règle à (0,1,0) : le numéro héritait alors du marine du corps de page,
     posé sur le marine de la barre. Contraste mesuré : 1 sur 1. Le texte
     était purement et simplement invisible. */
.barre-mobile .barre-mobile__tel {
    color: var(--texte-inverse);
    border: 1px solid var(--filet-inverse);
  }
.barre-mobile__soumission {
    color: var(--texte-sur-accent);
    background: var(--accent);
  }
/* Même bascule que .bouton--or et .service-btn au survol — ajoutée le
   7 août 2026, cette pilule n'en avait aucune. Surtout utile en fenêtre de
   bureau rétrécie sous 1024 px : au doigt, sur mobile, il n'y a pas de
   survol à montrer. */
.barre-mobile__soumission:hover,
.barre-mobile__soumission:focus-visible {
    background: var(--accent-chaud);
  }
body.menu-ouvert .barre-mobile {
    display: none;
  }
}

/* ⚠️ AJOUTÉ le 7 août 2026 — Patrik, capture à l'appui : « Nous joindre »,
   une page ordinaire (celle-ci, pas l'accueil), débordait carrément à droite
   en mode tablette. Cause trouvée : styles-v7.css (qui ne charge QUE sur les
   pages à blocs) a ce palier depuis longtemps ; habillage.css (qui charge
   PARTOUT) ne l'a jamais eu. Sans lui, la grille du pied restait à ses trois
   colonnes fixes de bureau (220px + 430px + minmax(300px, 1fr) = 950px min)
   jusqu'à 700px de large — sur un iPad de 768px, ça débordait de 276px, et
   le menu du pied se retrouvait presque entièrement hors écran, un mot
   réduit à sa première lettre visible. Même palier, copié tel quel, pour que
   les deux feuilles se comportent pareil. Voir aussi DEPLOIEMENT.md. */
@media (max-width: 1100px) {
.pied__grille {
    grid-template-columns: 1fr 1.5fr;
  }
.pied__nav {
    grid-column: 1 / -1;

    padding-top: var(--espace-m);
  }

  /* Même +7px que la règle de base : sans lui, téléphone/courriel se calent
     7 px trop haut par rapport aux réseaux sociaux — exactement le bug que
     Patrik a signalé sur l'accueil, corrigé au même moment dans
     styles-v7.css. */
.pied__coordonnees {
    margin-top: calc(64px + var(--espace-l) + 7px);
  }
}

@media (max-width: 700px) {
.pied__grille {
    grid-template-columns: 1fr;

    gap: var(--espace-l);
  }

  /* ⚠️ AJOUTÉ le 7 août 2026 — Patrik : sur les pages ordinaires (pas
     l'accueil), le bouton « Soumission gratuite » du pied se plaçait à côté
     des réseaux sociaux au lieu de passer sous eux, en mode téléphone.
     Cause identique à celle du palier tablette plus haut : styles-v7.css a
     ce correctif depuis longtemps (voir son commentaire jumeau, même
     media query), habillage.css ne l'avait jamais eu. Le flex-basis:100%
     du bouton (règle de base) était sans effet : le retour à la ligne se
     calcule sur la taille plafonnée par max-width, soit 166px, qui tenait
     à côté des trois icônes. Lever ce plafond suffit à provoquer le
     passage à la ligne. */
.pied__cta {
    width: 100%;
    max-width: none;

    margin-top: var(--espace-m);
  }
.pied__coordonnees {
    /* Le bloc est en display:flex : « grid-template-columns » n'avait donc
       aucun effet, et les contacts restaient côte à côte en débordant de
       l'écran. C'est flex-direction qui les empile. */
    flex-direction: column;
    align-items: stretch;

    gap: var(--espace-m);

    margin-top: 0;
  }
.pied__nav {
    grid-column: auto;

    padding-top: 0;

    /* Le décalage de 1,5rem, décoratif sur grand écran, poussait la
       navigation hors du cadre sur mobile. */
    transform: none;
  }
.pied__nav a {
    font-size: clamp(1.5rem, 7vw, 2rem);
  }
.pied__bandeau {
    grid-template-columns: 1fr;
  }
.pied__info {
    padding-block: var(--espace-m);
  }
.pied__info + .pied__info {
    padding-left: 0;

    border-left: 0;
    border-top: 1px solid var(--filet-inverse);
  }
.pied__bas {
    flex-direction: column;
    align-items: flex-start;

    gap: var(--espace-m);

    padding-top: var(--espace-m);
  }
.pied__legal {
    flex-direction: column;

    gap: var(--espace-xs);
  }
}

/* ⚠️ PALIER INTERMÉDIAIRE — historique complet dans DEPLOIEMENT.md section
   17. Portait à l'origine deux paliers fixes (1560 puis 1330 px), chacun une
   valeur unique appliquée d'un bout à l'autre de sa plage. Patrik a fait
   remarquer, capture à l'appui, que ça gaspillait l'espace : à 1229 px par
   exemple — bien au-dessus du plancher réel (~1180 px) — tout restait déjà
   écrasé à sa valeur la PLUS petite, et l'espace inutilisé se voyait entre le
   logo, le menu et les actions plutôt que de profiter aux éléments eux-mêmes.

   Refondu le 7 août 2026 : chaque propriété garde SA plage d'origine (1560
   ou 1330 px selon le palier qui la touchait avant), mais suit maintenant
   `clamp(min, calc(pente), max)` — une interpolation linéaire au lieu d'une
   valeur unique. Entre les deux bornes, la taille suit la largeur au lieu de
   sauter d'un palier à l'autre : la place gagnée profite aux boutons et au
   logo, pas à des espaces morts. Les bornes (min et max de chaque clamp)
   sont EXACTEMENT les anciennes valeurs des deux paliers — aucun changement
   au plancher déjà mesuré à froid (~1180 px, contenu intact) ni au seuil du
   burger.

   ⚠️ POURQUOI DEUX PLAGES (1560 ET 1330), PAS UNE SEULE DE 1560 À 1210 —
   essayé d'abord, corrigé après coup. Le premier palier d'origine ne touchait
   JAMAIS la police du bouton ni celle du téléphone (seul le second, sous
   1330 px, s'y attaquait) : ils restaient à taille nominale de 1560 à 1330.
   Un unique dégradé de 1560 à 1210 pour CES deux propriétés les aurait donc
   fait RÉTRÉCIR plus tôt qu'avant dans cette zone-là — le contraire du but.
   Les cinq autres propriétés, elles, étaient déjà touchées dès 1560 px : leur
   dégradé couvre bien 1560 → 1210 d'un seul tenant.

   ⚠️ RÉÉQUILIBRÉ le 7 août 2026, deuxième retour de Patrik après avoir vu
   le résultat. Trois demandes : (1) laisser le bouton et le numéro moins
   petits qu'ils ne l'étaient ; (2) laisser À LA PLACE les liens du menu du
   milieu rétrécir un peu, ce qu'ils ne faisaient jamais (voir la découverte
   ci-dessous) ; (3) l'espace entre un lien et sa PROPRE flèche de menu
   déroulant devenait plus petit que l'espace vers le lien SUIVANT, à cause
   du rembourrage inter-item écrasé jusqu'à 0. Les cinq réglages qui suivent
   remplacent ceux du premier passage :
     - police des liens du menu : nouvelle, 16px → 13,6px (n'existait pas
       avant, bloquée par le !important — voir plus bas)
     - gouttière lien↔flèche : nouvelle, 5,6px → 3,52px
     - rembourrage inter-item : plancher relevé, 0 → 3,52px (toujours
       inférieur à la gouttière ci-dessus au repos, mais jamais nul)
     - rembourrage du bouton : plancher relevé, 5,6px → 8px
     - police du bouton (palier 1330, plus bas) : plancher relevé, 13,12px
       → 15px
     - police du téléphone (palier 1330, plus bas) : ne rétrécit plus DU
       TOUT, reste à 15px partout — c'est SPÉCIFIQUEMENT ce que Patrik a
       demandé de préserver.

   ⚠️ « .megamenu .megamenu__trigger, .megamenu .megamenu__lien » PORTE UN
   !important ICI, et c'est voulu : la règle de base (plus haut dans ce
   fichier) porte elle-même « font-size: 1rem !important », qui bloquait
   TOUT réglage précédent sans qu'on s'en aperçoive (voir DEPLOIEMENT.md
   section 17, « découverte au passage »). Pour enfin faire rétrécir ce
   texte comme demandé, il fallait répondre par un autre !important — la
   seule façon d'entrer dans cette bataille-là.

   ⚠️ NE PAS toucher au seuil de .burger (1210px — voir aussi styles-v7.css
   ET main-v3.js:512) sans changer LES TROIS À LA FOIS. */
@media (max-width: 1560px) {
  .entete__interieur {
    gap: clamp(0.1rem, calc(-1.283rem + 1.829vw), 0.5rem);
  }

  /* Le logo reprend le plus de place quand la barre se resserre : c'est lui
     qui varie le plus, 56 px → 32 px. Largeur calculée depuis CETTE MÊME
     expression de hauteur (× 2,805031446540881) — voir la remarque sur
     « width: auto » plus haut dans ce fichier. */
  .entete__logo img {
    height: clamp(32px, calc(-3.186rem + 6.857vw), 56px);
    width: calc(clamp(32px, calc(-3.186rem + 6.857vw), 56px) * 2.805031446540881);
  }

  /* ⚠️ .entete--solide (survol au défilement, 42px hors de cette zone) doit
     RESTER plus petit que l'état du haut — c'est tout le sens de « solide ».
     Or dans cette zone resserrée, l'état du haut descend lui-même jusqu'à
     32px, sous les 42px fixes du solide : sans ce correctif, défiler aurait
     agrandi le logo au lieu de le réduire. × 0,75 : au raccord (1560px),
     56 × 0,75 = 42, exactement l'ancienne valeur fixe — aucune coupure. En
     dessous, il continue de suivre le même dégradé, toujours 25 % plus
     petit que l'état du haut, jamais plus grand. */
  .entete--solide .entete__logo img {
    height: calc(clamp(32px, calc(-3.186rem + 6.857vw), 56px) * 0.75);
    width: calc(clamp(32px, calc(-3.186rem + 6.857vw), 56px) * 0.75 * 2.805031446540881);
  }

  /* Police des liens du menu — voir la remarque sur le !important plus
     haut. Absente avant le 7 août 2026 : ce texte ne rétrécissait jamais. */
  .megamenu .megamenu__trigger,
  .megamenu .megamenu__lien {
    font-size: clamp(0.85rem, calc(0.331rem + 0.686vw), 1rem) !important;
  }

  /* Gouttière entre le libellé et SA flèche — rétrécie en même temps que la
     police, pour que la flèche reste visuellement collée à son lien. */
  .megamenu .megamenu__trigger,
  .megamenu .megamenu__lien {
    gap: clamp(0.22rem, calc(-0.229rem + 0.594vw), 0.35rem);
  }

  /* ⚠️ Plancher relevé de 0 à 3,52px — c'était la vraie cause du problème
     de flèche « plus proche du lien suivant » : à 0, deux flèches voisines
     touchaient bord à bord, plus proches l'une de l'autre que de leur
     propre libellé (gouttière ci-dessus). Le plancher garde toujours au
     moins autant d'espace entre deux items qu'entre un lien et sa flèche. */
  .megamenu__item {
    padding-inline: clamp(0.22rem, calc(-0.402rem + 0.823vw), 0.4rem);
  }

  .entete__actions {
    gap: clamp(0.1rem, calc(-1.283rem + 1.829vw), 0.5rem);
  }

  /* Plancher relevé de 5,6px à 8px (var(--espace-xs)) — le bouton restait
     trop petit au goût de Patrik. */
  .entete__actions .bouton {
    padding-inline: clamp(0.5rem, calc(-1.229rem + 2.286vw), 1rem);
  }
}

/* Police du bouton et du téléphone : plage 1330 → 1210, pas 1560 → 1210 —
   voir l'explication plus haut. */
@media (max-width: 1330px) {
  /* Plancher relevé de 13,12px à 15px. */
  .entete__actions .bouton {
    font-size: clamp(0.9375rem, calc(-1.205rem + 2.833vw), 1.15rem);
  }

  /* Le téléphone ne rétrécit plus du tout dans cette zone — demandé
     explicitement par Patrik (« on laisse le bouton et le numéro »). Reste
     à sa taille de base, var(--taille-petite) = 0.9375rem = 15px ; plus
     aucune règle ici pour ce sélecteur. */
}

@media (max-width: 1210px) {
.megamenu,
.entete__actions {
    display: none;
  }
.entete__interieur {
    display: flex;
    justify-content: space-between;
  }
.burger {
    display: flex;
  }
}

.entete--menu,
.entete--solide.entete--menu {
  color: var(--texte);
  background: var(--fond-page);
  backdrop-filter: none;
  border-bottom-color: transparent;
}

/* ==========================================================================
   MENU MOBILE — ACCORDÉON ET FERMETURE
   --------------------------------------------------------------------------
   Avant : les 26 liens du menu s'affichaient d'un coup, sur 4 sections, et
   AUCUN moyen de fermer — le <nav> recouvre le burger, mesuré à
   elementFromPoint. On ne pouvait sortir qu'en cliquant un lien, donc en
   quittant la page.

   Maintenant : une tape par grande section. Le troisième niveau reste DANS le
   panneau de sa section — ouvrir « Secteurs » montre donc d'emblée École,
   CÉGEP et Université, sans seconde tape.
   ========================================================================== */

/* ----- Le bouton de fermeture ------------------------------------------- */
/* Le logo, en haut à gauche, face à la croix. Le menu recouvre l'en-tête : sans
   lui on perdait le repère de marque et le retour à l'accueil.

   DEUX CLASSES sur l'image — septième application de la règle en tête de
   fichier. La remise à zéro pose « .menu-mobile img { … } » à (0,1,1), qui
   battrait une règle à classe unique. */
.menu-mobile .menu-mobile__logo {
  position: absolute;
  top: var(--espace-m);
  left: var(--gouttiere);
  z-index: 2;

  display: inline-flex;
  align-items: center;
  min-height: 44px; /* même cible tactile que la croix */
}

.menu-mobile .menu-mobile__logo img {
  width: auto;
  max-width: 150px;
  height: auto;
  max-height: 40px;
}

/* La langue, en bout de liste. Elle se lit comme une entrée de menu de plus,
   un cran en dessous des grandes sections — c'est un réglage, pas une
   destination.

   ⚠️ LE :not(.bouton) EST LÀ POUR LE POIDS, PAS POUR CIBLER. Sans lui la règle
   pèse (0,2,0) et « .menu-mobile a:not(.bouton) » la bat à (0,2,1) : mesuré à
   30 px, exactement la taille des grandes sections. Avec, on passe à (0,3,0)
   et la taille tient. Huitième fois que ce piège se referme dans ce fichier. */
.menu-mobile .menu-mobile__langue:not(.bouton) {
  align-self: flex-start;
  flex-shrink: 0;

  margin-top: var(--espace-s);
  padding: 0.3rem 0;

  font-family: var(--police-titre);
  font-size: clamp(1.05rem, 4.4vw, 1.35rem);
  font-weight: 700;
  line-height: 1.24;
  letter-spacing: 0.04em;
  text-transform: uppercase;

  color: var(--marine);
  opacity: 0.75;
  transition: opacity var(--transition);
}

.menu-mobile .menu-mobile__langue:hover,
.menu-mobile .menu-mobile__langue:focus-visible {
  opacity: 1;
}

.menu-mobile__fermer {
  position: absolute;
  top: var(--espace-m);
  right: var(--gouttiere);
  z-index: 2;

  display: grid;
  place-items: center;

  width: 44px; /* cible tactile confortable */
  height: 44px;
  padding: 0;

  color: var(--marine);
  background: none;
  border: 0;
  border-radius: var(--rayon-pilule);

  cursor: pointer;
  transition: background-color var(--transition);
}

.menu-mobile__fermer:hover,
.menu-mobile__fermer:focus-visible {
  background: var(--filet);
}

.menu-mobile__fermer svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}

/* ----- L'en-tête d'une section ------------------------------------------ */
.menu-mobile .menu-mobile__section {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--espace-s);
  width: 100%;

  margin-top: var(--espace-s);
  padding: 0.3rem 0;

  color: var(--marine);
  font-family: var(--police-titre);

  /* ⚠️ !important SUBI. Shopkeeper écrit « button, .button { font-size: 13px
     !important } ». Les sections étant des <button>, elles étaient rabotées à
     13 px pendant que « Nous joindre », qui est un <a>, gardait sa taille —
     d'où des sections plus petites que leurs voisines. Un !important ne se
     bat qu'avec un !important ; notre sélecteur, plus spécifique, l'emporte
     alors. Sixième occurrence du même piège dans ce fichier. */
  font-size: clamp(1.35rem, 6vw, 1.9rem) !important;

  font-weight: 700;
  line-height: 1.24;
  text-align: left;

  background: none;
  border: 0;
  cursor: pointer;
}

.menu-mobile__chevron {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform var(--transition);
}

.menu-mobile__section[aria-expanded="true"] .menu-mobile__chevron {
  transform: rotate(180deg);
}

/* ----- Le panneau repliable ---------------------------------------------
   OUVERT PAR DÉFAUT : c'est le JavaScript qui referme au chargement. Si le
   script échoue, tous les liens restent là. Un menu dont le contenu disparaît
   faute de script est un menu perdu.

   « visibility: hidden » plutôt qu'une simple hauteur nulle : les liens d'un
   panneau fermé sortent ainsi de l'ordre de tabulation, ce qui est le
   comportement attendu d'un accordéon — on y accède par son bouton. Cela
   diffère du troisième niveau du méga-menu, où le focus devait au contraire
   pouvoir entrer pour révéler.
   ------------------------------------------------------------------------- */
.menu-mobile__panneau {
  /* ⚠️ SANS CETTE COLONNE, LES SOUS-SECTIONS SE SUIVAIENT SUR LA MÊME LIGNE.
     « .menu-mobile a » ne pose aucun display : les liens sont donc en ligne.
     Avant l'accordéon ça ne se voyait pas — ils étaient enfants directs de
     .menu-mobile, une colonne flex, et devenaient chacun un élément flex sur
     sa propre ligne. Déplacés dans ce panneau, qui était un bloc ordinaire,
     ils se sont remis à couler comme du texte : « Centres commerciaux
     Hôpitaux Copropriétés… » d'un seul tenant.
     C'est exactement pour cette raison que .menu-mobile__sous, lui, est déjà
     une colonne flex — le troisième niveau, lui, s'empilait correctement. */
  display: flex;
  flex-direction: column;
  align-items: flex-start;

  overflow: hidden;
  max-height: 60rem;

  /* ⚠️ flex-shrink: 0 — SANS LUI, ON NE VOYAIT QUE TROIS SOUS-SECTIONS.
     .menu-mobile est une colonne flex ; ses enfants sont compressibles par
     défaut. Dès que le contenu dépassait l'écran, flex écrasait les panneaux,
     et « overflow: hidden » coupait le reste SANS barre de défilement propre.
     Le menu semblait donc mal défiler alors qu'il défile très bien : c'est le
     panneau qu'on aplatissait. */
  flex-shrink: 0;

  transition:
    max-height var(--transition-lent),
    opacity var(--transition),
    visibility var(--transition);
}

/* Même raison : rien dans cette colonne ne doit se laisser comprimer. */
.menu-mobile .menu-mobile__section,
.menu-mobile .menu-mobile__seul,
.menu-mobile .menu-mobile__actions {
  flex-shrink: 0;
}

/* ⚠️ L'ESPACEMENT DOIT ÊTRE LE MÊME ENTRE TOUTES LES ENTRÉES DE PREMIER RANG.
   Le retrait haut ne vivait que sur .menu-mobile__section. « Nous joindre »
   étant un lien sans enfant, il n'en avait pas : l'écart avant lui était donc
   plus serré qu'entre les sections — visible à l'œil dès que tout est replié.
   Les panneaux repliés, eux, n'y sont pour rien : à hauteur nulle et sous
   overflow: hidden, ils n'apportent aucune marge. */
.menu-mobile .menu-mobile__seul {
  margin-top: var(--espace-s);
}

/* ----- L'échelle des trois niveaux ---------------------------------------
   Trois crans strictement décroissants : les sections gardent le poids de
   « Nous joindre », les sous-sections descendent d'un cran, le troisième
   niveau d'un cran encore. Sur un écran large : 30,4 px, puis 24, puis 17,6.

   ⚠️ LE PREMIER SÉLECTEUR PORTE .menu-mobile SANS EN AVOIR BESOIN POUR CIBLER.
   C'est du poids, pas de la précision, et voici pourquoi.

   styles-v7.css contient une COPIE de « .menu-mobile a:not(.bouton) » — même
   valeur, même poids (0,2,1) — et cette feuille se déclare dépendante de
   celle-ci : elle charge donc APRÈS. À poids égal, c'est le dernier chargé qui
   gagne ; sa copie écrasait la règle ci-dessous sur toutes les pages à blocs,
   dont la page d'accueil. Les sous-sections y restaient à la taille des
   sections, alors qu'elles rapetissaient correctement partout ailleurs.

   Le troisième niveau, lui, n'avait pas ce problème : .menu-mobile__sous
   n'existe pas dans la copie, et son sélecteur pesait déjà plus lourd.

   La vraie réparation est de retirer l'habillage dupliqué de styles-v7.css —
   94 sélecteurs y font double emploi. Tant que ce n'est pas fait, TOUTE
   correction d'habillage doit passer au-dessus de (0,2,1) pour tenir sur la
   page d'accueil.
   ------------------------------------------------------------------------- */
.menu-mobile .menu-mobile__panneau a:not(.bouton) {
  font-size: clamp(1.1rem, 4.8vw, 1.5rem);
}

.menu-mobile .menu-mobile__panneau .menu-mobile__sous a:not(.bouton) {
  font-size: clamp(0.95rem, 3.8vw, 1.1rem);
}

/* ⚠️ CORRIGÉ le 7 août 2026 — au survol, les liens du menu mobile viraient
   grisâtres au lieu de réagir en bleu comme la nav du haut. Cause :
   Shopkeeper écrit « a:hover, a:focus { opacity: .7 } » (styles.css:8114),
   et rien ici ne le contrait — le marine des liens se contentait de
   s'éclaircir par transparence sur la crème.

   Corrigé avec le MÊME bleu que le reste du site, --accent (alias
   --bleu-pale) : c'est déjà celui du soulignement de survol de la nav du
   haut (.megamenu__lien:hover::after) ET celui que styles-v7.css réservait
   déjà à l'état :active de ces mêmes liens, avant ce correctif — cohérent
   avec l'existant, pas une couleur inventée.

   :not(.menu-mobile__langue) — le sélecteur repos, plus bas, ne fait
   qu'ajuster l'opacité du sélecteur EN/FR : sans l'exclusion, cette
   règle-ci l'aurait aussi peint en bleu, jamais demandé. */
.menu-mobile a:not(.bouton):not(.menu-mobile__langue):hover,
.menu-mobile a:not(.bouton):not(.menu-mobile__langue):focus-visible {
  opacity: 1;
  color: var(--accent);
}

.menu-mobile__panneau[data-replie] {
  max-height: 0;
  opacity: 0;
  visibility: hidden;
}