/* Le menu deroulant « Les services Huub », partage par l'accueil et les
   quatre pages de service.

   ⚠️ SON PROPRE FICHIER, ET PAS UNE COPIE PAR PAGE. Il vit sur cinq pages,
   dont l'accueil qui garde par ailleurs ses styles en ligne : cinq copies d'un
   menu divergent au premier lien ajoute, et c'est la premiere chose que voit
   un visiteur. */

.an-menu { position: relative; }

/* Le declencheur imite `.nav a` de l'accueil au pixel : dans une rangee de
   liens, un bouton qui ne leur ressemble pas se lit comme un intrus. */
.an-menu-bouton {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 14px; border: 0; border-radius: 999px;
  background: transparent; cursor: pointer;
  font: inherit; font-size: 14.5px; color: #3a3a45;
}
.an-menu-bouton:hover { color: #000000; }

/*
  ⚠️ PAS DE PASTILLE GRISE, NI OUVERT NI COURANT. Le fond `#f1f1f4` ajoutait un
  bloc gris dans une rangee de liens nus : le menu paraissait selectionne en
  permanence sur ses propres pages. Le panneau ouvert est deja un signal, et la
  page courante se marque au gras, pas au fond.
*/
.an-menu-bouton[aria-expanded="true"] { color: #000000; }
.an-menu-bouton[data-actif] { font-weight: 600; }

/*
  ⚠️ MEME ENCRE POUR LE BOUTON ET POUR LES LIENS, SUR TOUTES LES PAGES. Mesure
  faite : l'accueil ecrit ses liens en rgb(26,20,24) par une regle qui ne vise
  que les balises `a`, tandis que les pages de service les laissaient a
  rgb(90,90,90), heritees d'une seconde regle `.nav a` posee plus bas. Le
  bouton, lui, n'etait vise par aucune des deux et restait plus clair encore.
  Trois gris differents dans la meme rangee.
*/
/*
  LA RANGÉE EST UN OBJET, PAS QUATRE MOTS POSÉS (Sébastien, 2026-09-23, « les
  4 liens du haut semblent fades », puis « ce n'est pas suffisant »).

  ⚠️ LE GRAS SEUL NE SUFFISAIT PAS, ET C'EST UNE QUESTION DE VOISINAGE. À
  gauche un logo noir, à droite un bouton noir plein : entre les deux, du texte
  nu reste du texte, quelle que soit sa graisse. Ce qui manquait n'était pas de
  l'encre, c'était une FORME. La navigation entière prend donc une capsule
  beige, et chaque lien y devient un onglet.

  ⚠️ LA CAPSULE EST PLUS FONCÉE QUE L'EN-TÊTE, LE LIEN SURVOLÉ PLUS CLAIR
  QU'ELLE. L'inverse (creuser au survol) se lit comme un enfoncement et rend la
  rangée sale ; ici le lien se détache en crème sur beige, avec l'ombre courte
  qui dit qu'il est au-dessus.
*/
.entete .nav {
  gap: 2px; padding: 4px;
  /* Beige clair (Sébastien, 2026-09-23) : la capsule se pose sur la crème de
     l'en-tête sans l'assombrir. Le filet reprend ce que la teinte perd, sinon
     le bord de la capsule se dissout dans le fond. */
  background: #F7EBDB; border-radius: 999px;
  border: 1px solid rgba(26, 20, 24, .09);
}
.entete .nav > a,
.entete .an-menu-bouton {
  color: #1A1418; font-size: 15px; font-weight: 600; letter-spacing: -.005em;
  padding: 8px 15px; border-radius: 999px;
  transition: background-color .16s ease, color .16s ease, box-shadow .16s ease;
}
/*
  La page courante prend la pastille claire en permanence, et le gras par
  dessus. La règle voisine qui interdisait un fond pour `[aria-current]` visait
  une pastille GRISE dans une rangée de liens nus ; dans une capsule, l'onglet
  courant se marque au contraire par son fond, sinon rien ne le distingue.
*/
.entete .nav > a[aria-current],
.entete .an-menu-bouton[data-actif] {
  font-weight: 700; background: #FFFBF4;
  box-shadow: 0 1px 2px rgba(26, 20, 24, .10);
}
.entete .nav > a:hover,
.entete .an-menu-bouton:hover,
.entete .an-menu-bouton[aria-expanded="true"] {
  color: #000000; background-color: #FFFBF4;
  box-shadow: 0 2px 6px -1px rgba(26, 20, 24, .16);
}
.an-menu-fleche { width: 11px; height: 7px; transition: transform .2s ease; }
.an-menu-bouton[aria-expanded="true"] .an-menu-fleche { transform: rotate(180deg); }

.an-menu-panneau {
  position: absolute; top: calc(100% + 10px); left: 50%;
  z-index: 80; min-width: 372px;
  display: grid; gap: 4px; padding: 10px;
  background: #191B28; border: 1px solid rgba(255,255,255,.12);
  border-radius: 18px; box-shadow: 0 30px 60px -28px rgba(10,8,18,.65);
  /* Etat ferme mais affiche : c'est de la que part l'ouverture. Le centrage
     reste dans la transformation, sinon animer `transform` le perdrait. */
  /* ⚠️ 180 ms NE SE VOYAIT PAS (Sébastien, 2026-09-24 : « je vois pas de
     diff »). Mesuré au navigateur, l'animation partait bien, mais un panneau
     qui glisse de huit pixels en moins d'un cinquième de seconde se lit comme
     une apparition. Un tiers de seconde, quatorze pixels et un départ plus
     bas : le déroulé devient un geste. */
  opacity: 0;
  transform: translateX(-50%) translateY(-14px) scale(.96);
  transform-origin: top center;
  transition: opacity .26s ease, transform .3s cubic-bezier(.16, .9, .3, 1);
}
.an-menu-panneau[data-ouvert] { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
.an-menu-panneau[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) {
  .an-menu-panneau { transition: none; }
}

/*
  ⚠️ UN PONT INVISIBLE ENTRE LE BOUTON ET LE PANNEAU. Sans lui, les dix pixels
  qui les separent referment le menu des qu'on descend la souris vers un lien.
*/
.an-menu-panneau::before { content: ""; position: absolute; top: -12px; left: 0; right: 0; height: 12px; }

/*
  ⚠️ DEUX CLASSES, ET C'EST L'ACCUEIL QUI L'IMPOSE. Le panneau vit dans
  `<nav class="nav">`, et l'accueil pose `.nav a { border-radius: 999px }` dans
  un `<style>` EN LIGNE. Meme specificite que `.an-menu-panneau a` — 0,1,1 des
  deux cotes — donc c'est l'ordre qui tranche, et un bloc en ligne passe apres
  une feuille liee. Resultat mesure : arrondi 999 px, marge 7px 11px, `display:
  flex` et bordure noire sur l'accueil, alors que les huit pages de service
  affichaient le bon reglage. Le defaut ne se voyait donc QUE sur la page
  d'accueil, ce qui le fait passer pour une regression alors que rien n'avait
  bouge.

  ⚠️ RAYON CONCENTRIQUE, PAS UN RAYON CHOISI A L'OEIL. Le panneau arrondit a
  18 px et laisse 10 px de marge interieure : l'arrondi d'un lien vaut donc
  18 moins 10, soit 8. Un rayon plus grand fait deux courbes qui ne suivent pas
  la meme ligne, et c'est ce qui donne l'impression de pastilles trop rondes
  posees dans une boite carree.
*/
.an-menu .an-menu-panneau a {
  display: grid; grid-template-columns: 38px minmax(0, 1fr) 16px; align-items: center; gap: 13px;
  padding: 11px 14px; text-decoration: none;
  /* L'encre du lien lui-meme : invisible aujourd'hui, puisque le titre et la
     ligne de dessous portent la leur, mais elle est ce dont heritera le
     prochain element ajoute dans la rangee. Sans elle, il naissait en
     rgb(26,20,24) sur l'accueil : noir sur fond nuit.

     `!important` parce que l'accueil repeint tous ses liens par
     `body:has(.huub-page) a:not([class*='btn']):not([class*='bouton'])
     :not(.acc-porte)`, de specificite 0,4,2 : deux classes de plus ici n'y
     suffisaient pas, mesure faite. Meme cause et meme remede que dans le pied
     de page. */
  color: rgba(255,255,255,.72) !important;
  border-radius: 8px;
  border: 1px solid transparent;
  transition: background .16s ease, border-color .16s ease;
}
.an-menu-texte { display: block; min-width: 0; }
.an-menu .an-menu-panneau strong { display: block; font-size: 14.5px; font-weight: 600; color: #FFFFFF; }
.an-menu-texte > span { display: block; margin-top: 3px; font-size: 12.5px; line-height: 1.45; color: rgba(255,255,255,.55); }

/* Le pictogramme, dans sa boite, comme sur les cartes des pages de service. */
.an-menu-ico {
  width: 38px; height: 38px; padding: 9px; box-sizing: border-box;
  border-radius: 11px; color: rgba(255,255,255,.62);
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.10);
  transition: color .16s ease, background .16s ease, border-color .16s ease;
}

/*
  ⚠️ LA FLECHE EST RESERVEE, PAS AJOUTEE AU SURVOL. Elle occupe sa colonne de
  seize pixels des le depart et ne fait qu'apparaitre : la faire naitre
  decalerait le texte de toute la rangee a chaque passage de souris.
*/
.an-menu-vers {
  width: 16px; height: 16px; color: #7FE3B0;
  opacity: 0; transform: translateX(-4px);
  transition: opacity .16s ease, transform .16s ease;
}

/*
  ⚠️ TROIS CLASSES, PARCE QUE L'ACCUEIL REPEINT LE SURVOL DE SES LIENS. Mesure
  faite : sur l'accueil, le fond de survol calcule ressortait en rgba(26,20,24,
  .06), un voile SOMBRE, invisible sur un panneau deja sombre. Une regle a deux
  classes perdait sans rien dire.
*/
.an-menu .an-menu-panneau a:hover,
.an-menu .an-menu-panneau a:focus-visible {
  background: rgba(255,255,255,.08);
  border-color: rgba(127,227,176,.28);
}
.an-menu .an-menu-panneau a:hover .an-menu-ico,
.an-menu .an-menu-panneau a:focus-visible .an-menu-ico {
  color: #7FE3B0; background: rgba(127,227,176,.10); border-color: rgba(127,227,176,.30);
}
.an-menu .an-menu-panneau a:hover .an-menu-vers,
.an-menu .an-menu-panneau a:focus-visible .an-menu-vers { opacity: 1; transform: none; }

.an-menu .an-menu-panneau a[aria-current="page"] strong { color: #7FE3B0; }
.an-menu .an-menu-panneau a[aria-current="page"] .an-menu-ico {
  color: #7FE3B0; background: rgba(127,227,176,.10); border-color: rgba(127,227,176,.28);
}

@media (prefers-reduced-motion: reduce) {
  .an-menu .an-menu-panneau a, .an-menu-ico, .an-menu-vers { transition: none; }
  .an-menu-vers { transform: none; }
}

@media (max-width: 900px) {
  .an-menu-panneau { left: auto; right: 0; transform: none; min-width: 280px; }
}

/*
  ⚠️ LE PANNEAU EST PRISONNIER DU CONTEXTE DE SON EN-TETE. Sur l'accueil,
  `.entete` porte `position: relative; z-index: 12` : elle cree donc un
  contexte d'empilement, et le `z-index: 80` du panneau ne vaut plus QU'A
  L'INTERIEUR de ce contexte. Face au heros, qui est un frere a 12 place plus
  bas dans le document, c'est le heros qui gagne : la pastille de presence et
  le titre passaient PAR-DESSUS le menu ouvert.

  Un z-index sur le panneau n'y peut rien, aussi grand soit-il. C'est l'en-tete
  qu'il faut remonter.
*/
/*
  ⚠️ ET IL FAUT LA MEME SPECIFICITE QUE LA REGLE D'ORIGINE. L'accueil ecrit
  `.heros-fond .entete, .heros-fond .heros { z-index: 12 }`, soit deux classes.
  Un simple `.entete` n'en porte qu'une et perd en silence : la regle est
  presente, lisible dans la feuille, et n'a AUCUN effet. Verifie en demandant
  au navigateur quelles regles s'appliquent vraiment a l'element, plutot qu'en
  cherchant le selecteur a la main dans un fichier de 360 ko.
*/
/*
  ⚠️ L'EN-TÊTE SUIT LE DÉFILEMENT, SUR LES DIX PAGES. `sticky`, pas `fixed` :
  il garde sa place dans le flux, la page n'a rien à réserver au-dessus. Sur
  l'accueil il a dû sortir du héros pour ça, voir la maquette. Le fond n'est
  posé qu'ici : en haut de page il est invisible sur le crème, et dès qu'on
  descend il voile ce qui passe dessous, flou compris.
*/
.entete,
.heros-fond .entete {
  position: sticky; top: 0; z-index: 60;
  background: rgba(253, 243, 231, .84);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}


/*
  ⚠️ PAS DE SOULIGNEMENT AU SURVOL DANS LA NAVIGATION. Mesure faite : sur les
  pages de service, un lien d'en-tete passait de `none` a `underline` au
  survol, alors que l'accueil, lui, ne soulignait rien. Le trait apparaissait
  donc sur six pages et pas sur la septieme.

  ⚠️ ET SEULEMENT DANS LA NAVIGATION. Un lien au fil d'un texte doit rester
  souligne : c'est ce qui le distingue du texte autour pour qui ne percoit pas
  la couleur. On ne retire le trait que la ou la forme du bouton, la pastille
  ou la rangee disent deja qu'on peut cliquer.
*/
.entete a:hover,
.entete a:focus-visible,
.an-menu-panneau a:hover,
.an-menu-panneau a:focus-visible,
.pied a:hover,
.pied a:focus-visible,
.an-bouton:hover,
.an-bouton:focus-visible { text-decoration: none; }

/* --- La devise, à côté du logo ------------------------------------------- */

/*
  ⚠️ LA MARQUE ET SA DEVISE SONT ENVELOPPÉES, PAS POSÉES CÔTE À CÔTE. L'en-tête
  est une grille à trois colonnes — marque, navigation, actions — et un
  quatrième enfant direct passerait à la ligne suivante, sous tout le reste.
  Le `div.entete-marque` occupe la première cellule et range les deux dedans.

  ⚠️ ET ELLE DISPARAÎT SOUS 1320 px, avec le compteur. En dessous, la cellule
  de gauche ne fait plus que quatre cents pixels : la devise y passerait sur
  quatre lignes et pousserait la navigation. Le logo suffit là où la place
  manque.
*/
.entete-marque { display: flex; align-items: center; gap: 18px; min-width: 0; }
/* La devise et le compteur, l'un sous l'autre, derrière un seul filet. */
.entete-texte {
  display: flex; flex-direction: column; gap: 1px;
  padding-left: 18px; border-left: 1px solid rgba(26, 20, 24, .14);
  min-width: 0;
}
.entete-devise {
  margin: 0;
  max-width: 290px;
  font-size: 13px; line-height: 1.35;
  /* Deux lignes égales : mesuré à 250 px, la phrase passait sur trois, avec
     « tous » seul sur la dernière. */
  text-wrap: balance;
  color: #5C5561;
}
/* Le compteur des connectés, à côté de la devise : point vert qui bat et
   nombre en chiffres tabulaires. Caché tant que le nombre n'est pas arrivé. */
/* Sans pastille : le point, le nombre et le mot, posés nus à côté de la
   devise, comme elle. */
/* ⚠️ LE GAP TIENT LIEU D'ESPACE ENTRE LE NOMBRE ET « connectés ». À 8 px il se
   voyait comme un blanc en trop (Sébastien, 2026-09-23) : l'écart du mot passe
   à 3 px, la marge du point garde les 8 px d'origine. */
.entete-enligne {
  display: inline-flex; align-items: center; gap: 3px;
  flex: 0 0 auto; white-space: nowrap;
  font-size: 12.5px; font-weight: 600; color: #1A1418;
}
.entete-enligne[hidden] { display: none; }
.entete-enligne i {
  width: 7px; height: 7px; border-radius: 50%; background: #0E9F6E; margin-right: 5px;
  animation: entete-pouls 2.4s ease-in-out infinite;
}
.entete-enligne strong { font-weight: 600; font-variant-numeric: tabular-nums; color: #1A1418; }
@keyframes entete-pouls { 0%, 100% { box-shadow: 0 0 0 0 rgba(14, 159, 110, .45); } 50% { box-shadow: 0 0 0 5px rgba(14, 159, 110, 0); } }
@media (prefers-reduced-motion: reduce) { .entete-enligne i { animation: none; } }

/* Sous 1200 px la cellule de gauche ne tient plus le bloc de texte : il part
   entier, devise et compteur, et le logo suffit. */
@media (max-width: 1200px) { .entete-texte { display: none; } }