/* SERVICES ON HOVER 1 - GRILLE D'ICONES + ENCART PROMO */
/*
 * Priorite : ce sous-composant vit a l'interieur d'un [data-header] dont les
 * feuilles (.header-X .nav-desktop a ...) ciblent nos <a>. Toutes les regles
 * sont donc prefixees « [data-header] .services-on-hover-1 » (specificite
 * (0,3,x)) pour TOUJOURS l'emporter sur les selecteurs parents
 * (.header-X .nav-desktop a = (0,2,1)). Les etats de survol sont qualifies par
 * l'element `a` pour battre aussi les hover parents (jusqu'a (0,4,1) sur
 * header-1.at-top). Meme regle que chez son frere services-on-hover-2.
 *
 * LE PANNEAU LUI-MEME N'EST PAS ICI. Sa geometrie et sa revelation au survol
 * sont communes aux deux variantes : elles vivent dans le main.css de la
 * sous-categorie, declenchees par le hook `data-services-menu` que la racine
 * pose (§4.4).
 */

/* ---- Repartition grille de services / encart promo ---- */
[data-header] .services-on-hover-1 .services-on-hover-1__inner {
  display: grid;
  grid-template-columns: auto 300px;
}

/* Sous quatre services, la grille n'a plus de quoi remplir sa moitie : le
   terrain gagne va a l'encart promo. Modificateurs poses par le JS. */
[data-header] .services-on-hover-1 .services-on-hover-1__inner--peu-3 {
  grid-template-columns: auto 400px;
}
[data-header] .services-on-hover-1 .services-on-hover-1__inner--peu-2 {
  grid-template-columns: auto 500px;
}
[data-header] .services-on-hover-1 .services-on-hover-1__inner--peu-1 {
  grid-template-columns: auto 600px;
}

/* ---- Grille des services ----
   `auto-fit` + plancher de 250px, et non un nombre de colonnes fige : le
   PANNEAU est plafonne a `--max-content-width` (voir le main.css de la
   sous-categorie), il ne grandit donc pas avec la fenetre. Compter les colonnes
   d'apres la fenetre revenait a decider de la largeur d'une piste sans regarder
   la boite qui la contient — et au-dela de 1440px on passait a QUATRE colonnes
   dans un panneau toujours large de 1200px.

   Le calcul de ce qui restait au texte : 1200 - 300 (encart promo) - 80
   (padding) = 820px de grille ; a quatre colonnes, 199px la piece, moins
   20 + 20 de padding du lien, 50 d'icone et 16 de gouttiere = 93px pour
   l'intitule. « Couverture » en mesure 94. Un pixel, et le mot se coupait.

   250px de plancher laissent 144px au texte, ce qui passe le mot le plus long
   du catalogue (« Debroussaillage »). Le compte de colonnes s'ajuste tout seul
   si un theme elargit `--max-content-width`. */
[data-header] .services-on-hover-1 .services-on-hover-1__services {
  padding: 40px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 8px;
}
[data-header] .services-on-hover-1 .services-on-hover-1__services--peu-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
[data-header] .services-on-hover-1 .services-on-hover-1__services--peu-2,
[data-header] .services-on-hover-1 .services-on-hover-1__services--peu-1 {
  grid-template-columns: minmax(0, 1fr);
}

/* Le plancher min-content se reforme a CHAQUE etage imbrique : le groupe de
   metier, le lien, puis le bloc de texte. On le retire partout, et l'intitule
   est autorise a se couper plutot qu'a pousser sa colonne. Aucun
   `overflow-x: hidden` : les services rentrent pour de bon, ils ne sont pas
   masques. */
[data-header] .services-on-hover-1 .services-on-hover-1__groupe,
[data-header] .services-on-hover-1 .services-on-hover-1__link,
[data-header] .services-on-hover-1 .services-on-hover-1__texte {
  min-width: 0;
}
/* `break-word` et non `anywhere` : le filet ne sert plus qu'aux intitules
   vraiment hors norme. `anywhere` autorisait la coupure DES QUE la ligne etait
   juste, et abaissait au passage le min-content a la largeur d'une lettre —
   une piste pouvait donc se reduire indefiniment sans que rien ne proteste. */
[data-header] .services-on-hover-1 .services-on-hover-1__titre {
  overflow-wrap: break-word;
}

/* ---- Lien de service (reset interactif + neutralisation de la nav parente) ---- */
[data-header] .services-on-hover-1 .services-on-hover-1__link {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 20px;
  background: none;
  border: 1px solid transparent;
  color: inherit;
  /* `.header-X .nav-desktop a` (0,2,1) pose color/font-size/font-weight/
     text-transform/letter-spacing sur TOUS les <a> de la nav, le notre compris.
     On reprend la main sur chacune : `inherit` fait remonter la fonte au
     contexte du panneau au lieu de celle d'un lien de bandeau. */
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  text-decoration: none;
  text-transform: none;
  letter-spacing: normal;
  cursor: pointer;
  transition: background 0.3s ease, border-color 0.3s ease;
}
[data-header] .services-on-hover-1 a.services-on-hover-1__link:hover,
[data-header] .services-on-hover-1 a.services-on-hover-1__link:focus-visible {
  background: var(--white-transparent);
  border-color: var(--primary);
  outline: none;
}
[data-header] .services-on-hover-1 a.services-on-hover-1__link:hover .services-on-hover-1__icone,
[data-header] .services-on-hover-1 a.services-on-hover-1__link:focus-visible .services-on-hover-1__icone {
  background: var(--primary);
  border-color: var(--primary);
}
[data-header] .services-on-hover-1 a.services-on-hover-1__link:hover .services-on-hover-1__icone svg,
[data-header] .services-on-hover-1 a.services-on-hover-1__link:focus-visible .services-on-hover-1__icone svg {
  color: var(--white);
}

[data-header] .services-on-hover-1 .services-on-hover-1__icone {
  width: 50px;
  height: 50px;
  min-width: 50px;
  background: var(--white-transparent);
  border: 2px solid var(--secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.3s ease, border-color 0.3s ease;
}
[data-header] .services-on-hover-1 .services-on-hover-1__icone svg {
  width: 24px;
  height: 24px;
  color: var(--secondary);
  transition: color 0.3s ease;
}

/* Titre du service. Couleur au repos ET au survol (§4.13) : le main.css des
   themes stylise les Hn, survol compris. */
[data-header] .services-on-hover-1 .services-on-hover-1__titre {
  margin-bottom: 4px;
  color: var(--black);
  font-family: var(--font-display);
  font-size: 1rem;
}
[data-header] .services-on-hover-1 .services-on-hover-1__titre:hover {
  color: var(--black);
}

/* ---- Encart promo ---- */
[data-header] .services-on-hover-1 .services-on-hover-1__promo {
  background: var(--primary);
  padding: 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
/* Fond de marque : la couleur de texte est celle que le theme declare pour ce
   fond-la, jamais une devinette (§4.14). Le surtitre garde l'accent
   `--secondary`, la seule autre teinte que le theme garantit lisible sur
   `--primary`. */
[data-header] .services-on-hover-1 .services-on-hover-1__eyebrow {
  margin-bottom: 16px;
  color: var(--secondary);
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.15em;
}
[data-header] .services-on-hover-1 .services-on-hover-1__promo-titre {
  margin-bottom: 16px;
  color: var(--on-primary);
  font-family: var(--font-display);
  font-size: 1.5rem;
  line-height: 1.3;
}
[data-header] .services-on-hover-1 .services-on-hover-1__promo-titre:hover {
  color: var(--on-primary);
}
[data-header] .services-on-hover-1 .services-on-hover-1__promo-texte {
  margin-bottom: 24px;
  color: var(--on-primary);
  font-family: var(--font-body);
  font-size: 0.9rem;
  line-height: 1.7;
}

[data-header] .services-on-hover-1 .services-on-hover-1__cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 24px;
  background: var(--secondary);
  color: var(--on-secondary);
  border: 0;
  font-family: inherit;
  font-weight: 700;
  font-size: 0.9rem;
  text-decoration: none;
  text-transform: none;
  letter-spacing: normal;
  align-self: flex-start;
  cursor: pointer;
  transition: background 0.3s ease, color 0.3s ease;
}
[data-header] .services-on-hover-1 a.services-on-hover-1__cta:hover,
[data-header] .services-on-hover-1 a.services-on-hover-1__cta:focus-visible {
  background: var(--white);
  color: var(--secondary);
  outline: none;
}
[data-header] .services-on-hover-1 .services-on-hover-1__cta svg {
  width: 16px;
  height: 16px;
}

/* ---- Responsive ----
   Plus de palier sur la largeur de FENETRE pour le nombre de colonnes : il
   etait la pour rattraper des pistes trop etroites, ce que `auto-fit` fait
   maintenant en regardant la seule mesure qui compte, celle du panneau. */

/* ── REGROUPEMENT PAR METIER ──────────────────────────────────────────
   Une LIGNE D'EN-TETE pleine largeur ouvre la serie de chaque metier : le
   panneau se lit comme un sommaire a deux sections, au lieu d'une liste de
   treize liens ou rien ne dit ou finit le premier metier.

   MONO-METIER : le conteneur passe en `display: contents`, les liens
   redeviennent enfants directs de la grille et le rendu est celui d'avant.

   SUBGRID, et pas une copie des colonnes : le nombre de colonnes de la grille
   varie a l'execution (`--peu-1..3`, et le palier 1440px). Le recopier ici,
   c'est le figer a quatre et casser les menus courts. Le groupe herite donc des
   colonnes de son parent, quelles qu'elles soient. La declaration qui precede
   sert de repli aux navigateurs sans subgrid.

   LA COULEUR : rampe entre les deux couleurs de marque, posee en ligne par le
   PHP. Aucune couleur en dur, aucune variable ajoutee. */
[data-header] .services-on-hover-1 .services-on-hover-1__groupe {
  --m-couleur: color-mix(in oklab, var(--primary), var(--secondary) var(--m-melange, 0%));
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-columns: subgrid;
  gap: 8px;
}
[data-header] .services-on-hover-1 .services-on-hover-1__metier {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 20px 8px;
}
[data-header] .services-on-hover-1 .services-on-hover-1__metier-filet {
  flex: 0 0 22px;
  height: 2px;
  background: var(--m-couleur);
}
[data-header] .services-on-hover-1 .services-on-hover-1__metier-nom {
  flex: 1;
  color: var(--m-couleur);
  font-family: var(--font-body);
  font-size: 0.74rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* LA HAUTEUR DES LIENS, ET LE SCROLL.
   La grille etire ses rangees pour remplir le panneau : a cinq services, un
   lien fait 78 px et son cadre de survol respire. En ajoutant les en-tetes de
   metier et les services d'un second, les rangees retombent a leur minimum —
   52 px, la hauteur de l'icone — et le cadre de survol devient une bande
   serree.

   On rend donc au lien sa hauteur (l'icone fait 50 px, plus 14 px de part et
   d'autre : les 78 px du mono, exprimes et non recopies), et l'on borne le
   panneau pour qu'il defile au lieu de s'etirer sans fin.

   `scrollbar-gutter: stable both-edges` : `overflow-y: auto` fait passer
   `overflow-x` de `visible` a `auto`, et la barre verticale mange la largeur du
   seul cote droit — les services se decalaient vers la gauche. La gouttiere
   reservee des DEUX cotes les remet d'aplomb sans nombre magique, et sans
   dependre de l'epaisseur reelle de la barre, qui n'est pas la meme d'un
   navigateur a l'autre. */
[data-header] .services-on-hover-1 .services-on-hover-1__services--multi {
  max-height: min(70vh, 460px);
  overflow-y: auto;
  scrollbar-gutter: stable both-edges;
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--primary) 22%, transparent) transparent;
}
[data-header] .services-on-hover-1 .services-on-hover-1__services--multi::-webkit-scrollbar {
  width: 6px;
}
[data-header] .services-on-hover-1 .services-on-hover-1__services--multi::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--primary) 22%, transparent);
  border-radius: 3px;
}
[data-header] .services-on-hover-1 .services-on-hover-1__services--multi::-webkit-scrollbar-track {
  background: transparent;
}
/* Reserve au multi : en mono la grille etire deja les rangees a la bonne
   hauteur, et lui imposer un rembourrage explicite changerait le rendu des
   sites en place. */
[data-header] .services-on-hover-1 .services-on-hover-1__services--multi .services-on-hover-1__link {
  min-height: calc(50px + 2 * 14px);
  padding: 14px 20px;
}

/* Le survol d'un lien reprend la teinte de son metier. Qualifie par `a` pour
   depasser les hover de la nav parente, comme les regles de base. */
[data-header] .services-on-hover-1 .services-on-hover-1__groupe a.services-on-hover-1__link:hover,
[data-header] .services-on-hover-1 .services-on-hover-1__groupe a.services-on-hover-1__link:focus-visible {
  border-color: var(--m-couleur);
}
[data-header] .services-on-hover-1 .services-on-hover-1__groupe a.services-on-hover-1__link:hover .services-on-hover-1__icone,
[data-header] .services-on-hover-1 .services-on-hover-1__groupe a.services-on-hover-1__link:focus-visible .services-on-hover-1__icone {
  background: var(--m-couleur);
  border-color: var(--m-couleur);
}
/* Apres la regle de base : meme specificite, c'est l'ordre qui tranche. */
[data-header] .services-on-hover-1 .services-on-hover-1__groupe--nu {
  display: contents;
}