/* ==========================================================================
   EN-TETE DUMAREAU SAINT-SAENS
   Traduction de design/home-v3.html (lignes 28-51 du <style>) en balisage
   WordPress. Feuille separee de style.css, comme psx-nav-v6.css sur
   ps-vitrine : l'en-tete est present sur toutes les pages, il a sa propre
   logique (collant, flou, menu mobile) et doit pouvoir etre repris sans
   toucher a la charte.

   ELLE EST CHARGEE APRES style.css (dependance declaree dans functions.php),
   donc les jetons --prim, --paper... et le pont Kadence sont deja poses.
   Ne jamais y redeclarer un jeton de charte : il vivrait alors en double.
   ========================================================================== */

/* MEME LARGEUR QUE LE CONTENU, ET C'EST UN CORRECTIF DU 06/08/2026.
   -------------------------------------------------------------------------
   Cette regle valait 1320px, contre 1140px pour les sections. Le raisonnement
   d'origine - « l'en-tete a besoin de 1071px, le gabarit n'en offre que 1060,
   et un en-tete plus large que le texte est une convention repandue » - avait
   deux defauts. D'abord la convention ne tient que si l'ecart se lit comme un
   choix ; a 90px de chaque cote, il se lit comme un defaut, et c'est ainsi
   qu'il a ete signale : le logo et le menu commencaient franchement a gauche
   du contenu, sur toutes les pages. Ensuite le chiffre a change : mesure
   refaite en ligne, l'en-tete reclame aujourd'hui 1041px pour 1060 utiles,
   donc il tient, avec 19px de marge.

   La largeur vient maintenant du jeton `--wrap` de style.css (chargee avant
   celle-ci), qui vaut 1320px - la valeur que portait cette regle. **L'en-tete
   reste donc plus large que le contenu, et c'est desormais un choix nomme** :
   `--wrap` pour le chrome, `--wrap-contenu` (1140px) pour les sections. Avant,
   les deux valeurs etaient ecrites en dur chacune de leur cote et avaient
   diverge sans que personne le sache.

   Un correctif intermediaire avait aligne l'en-tete sur 1140 : ecarte, la
   barre y perdait son air. NE PAS REDECLARER LA VALEUR ICI, sinon les deux
   feuilles redivergeront comme la premiere fois.

   Si une entree de menu supplementaire faisait deborder l'en-tete : remonter
   le seuil du menu burger (aujourd'hui 1180px), pas la largeur du gabarit. */
.dum-wrap {
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: 40px;
}

/* --------------------------------------------------------------------------
   Filet superieur : la ligne marine soulignee d'or, premier signe d'identite
   avant meme le nom de l'etude.
   -------------------------------------------------------------------------- */

.dum-topbar {
  height: 4px;
  background: var(--prim);
  border-bottom: 1px solid var(--gold);
}

/* --------------------------------------------------------------------------
   Barre utilitaire : coordonnees, sur fond encre.
   -------------------------------------------------------------------------- */

.dum-util {
  background: var(--ink);
  color: #e7d8bf;
  font-size: 12.5px;
}

.dum-util__inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  min-height: 40px;
  flex-wrap: wrap;
}

.dum-util__groupe {
  display: flex;
  align-items: center;
  gap: 12px;
}

.dum-util a {
  color: inherit;
  text-decoration: none;
  transition: color 0.2s ease;
}

.dum-util a:hover {
  color: #fff;
}

/* `nowrap` + `flex: none` : SANS EUX LE NUMERO SE COUPE EN DEUX LIGNES.
   Signale par Rodolphe le 07/08/2026 et mesure a 375px : l'adresse de
   courriel fait 218px, le telephone 98, le tout 343px pour exactement 343px
   d'espace disponible. Flexbox retrecit alors le maillon le plus souple - le
   telephone - et « 05 56 79 62 79 » sortait sur deux lignes (« 05 56 79 62 »
   puis « 79 »). Un numero de telephone ne se coupe jamais : il se lit et se
   recopie d'un bloc. La place est reprise sur l'adresse, masquee plus bas. */
.dum-util__tel {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
  flex: none;
}

.dum-util__mail {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}

.dum-util__tel b {
  color: var(--gold2);
  font-weight: 700;
}

.dum-util__sep {
  opacity: 0.35;
}

/* --------------------------------------------------------------------------
   Barre principale, collante.
   -------------------------------------------------------------------------- */

.dum-hd {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--paper) 92%, transparent);
  border-bottom: 1px solid var(--line);
}

/* VOILE DERRIERE LE MENU - ET SURTOUT : PLUS AUCUN `overflow: hidden` SUR
   `html` OU `body`.
   --------------------------------------------------------------------------
   BOGUE GRAVE CORRIGE LE 07/08/2026, signale par Rodolphe : « quand on est
   scrolle sur la page, le clic burger fait disparaitre le menu et freeze la
   page ». C'est mon propre correctif anti-defilement de la veille qui le
   provoquait.
   MECANIQUE : `html { overflow: hidden }` retire l'element racine des boites
   defilantes. Or `position: sticky` a besoin d'un ancetre defilant pour
   s'accrocher : prive de lui, l'en-tete retombe a sa position STATIQUE, tout
   en haut du document. Page defilee de 600px, il se retrouve donc 600px
   au-dessus de l'ecran - menu compris, d'ou sa disparition - et la page ne
   defile plus, d'ou le gel. Le defaut etait invisible en haut de page, la ou
   position statique et position collante coincident. C'est pour cela qu'il a
   passe ma verification d'hier, faite sans defilement.
   REGLE : ne jamais figer le defilement par `overflow` tant qu'un element
   collant depend de la page. Le voile ci-dessous fait le meme travail sans
   toucher au defilement du document : il couvre tout sauf l'en-tete, absorbe
   les gestes (`touch-action: none`) et se ferme au premier appui. */
.dum-menu-fond {
  position: fixed;
  inset: 0;
  z-index: 40;
  background: rgba(31, 37, 51, 0.45);
  border: 0;
  padding: 0;
  touch-action: none;
  opacity: 0;
  transition: opacity 0.25s ease;
  /* INDISPENSABLE : le voile reste dans la page une fois le menu referme
     (pour pouvoir se fondre a la reouverture). Sans cette ligne, ce
     rectangle plein ecran intercepterait TOUS les clics de la page en
     permanence - le site entier deviendrait inerte. */
  pointer-events: none;
}

.dum-menu-fond.est-visible {
  opacity: 1;
  pointer-events: auto;
}

/* Le flou coute cher en rendu : on ne le demande qu'aux navigateurs qui le
   savent faire, et le fond reste lisible sans lui. */
@supports (backdrop-filter: blur(6px)) {
  .dum-hd {
    backdrop-filter: saturate(1.1) blur(6px);
  }
}

.dum-nav {
  display: flex;
  align-items: center;
  min-height: 88px;
  gap: 0;
}

/* --------------------------------------------------------------------------
   Marque : sceau + nom + baseline
   -------------------------------------------------------------------------- */

.dum-marque {
  display: flex;
  align-items: center;
  gap: 15px;
  flex: none;
  text-decoration: none;
  color: inherit;
}

/* PAS d'anneau autour du sceau : la maquette en dessinait un parce qu'elle
   n'avait qu'un placeholder « DS » a habiller. Le vrai sceau porte deja son
   double cercle de cire - l'entourer une troisieme fois faisait cible, et
   bridait le logo a 38 px dans une pastille de 50. On affiche donc le fichier
   en grand, sans decor ajoute. */
.dum-marque__sceau {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 64px;
  height: 64px;
}

.dum-marque__sceau img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.dum-marque__texte {
  display: flex;
  flex-direction: column;
}

.dum-marque__nom {
  font-family: var(--font-serif);
  font-size: 21px;
  font-weight: 600;
  letter-spacing: 0.005em;
  color: var(--ink);
  line-height: 1.1;
}

/* BASELINE EN OR, COMME DANS LE FICHIER LOGO LIVRE (02/09/2026).
   --------------------------------------------------------------------------
   Elle etait en `--ink2`, un gris-bleu : la ligne passait pour un sous-titre
   discret plutot que pour la deuxieme moitie du bloc-marque. `logo-plat-*.png`
   la porte en `#a87b35`, soit exactement `--gold` - on aligne le site sur le
   logo, pas l'inverse.
   CONTRASTE, A SAVOIR : `--gold` sur `--paper` mesure 3,2:1. C'est en dessous
   du seuil AA de 4,5:1 qui vaut pour du texte, et ca ne passe ici que parce
   que la baseline fait partie du LOGOTYPE, cas explicitement exempte par le
   critere WCAG 1.4.3. Si on veut le seuil quand meme, remplacer par #866026
   (4,8:1) - mais le logo et le site ne diront plus la meme chose.
   Les boites du nom et de la baseline partagent DEJA le meme bord gauche
   (mesure en ligne : 80px pour les deux). L'impression de decalage venait de
   la couleur, pas de l'alignement : rien a corriger de ce cote. */
.dum-marque__baseline {
  font-size: 9.5px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gold);
  margin-top: 5px;
}

/* --------------------------------------------------------------------------
   Menu principal
   Les liens sont pousses a droite par `margin-left: auto` et le bouton reste
   colle a eux : c'est le parti pris de la maquette, un `space-between` les
   eclaterait aux deux bouts de la barre.
   -------------------------------------------------------------------------- */

.dum-menu {
  margin-left: auto;
}

.dum-menu__liste {
  display: flex;
  align-items: center;
  gap: 26px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.dum-menu__liste li {
  position: relative;
  margin: 0;
}

.dum-menu__liste a {
  position: relative;
  display: block;
  padding: 6px 0;
  font-size: 13px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
}

/* Soulignement or qui se deploie au survol. Anime sur `width` et non sur
   `transform`, pour partir du bord gauche comme dans la maquette. */
.dum-menu__liste a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  height: 2px;
  width: 0;
  background: var(--gold);
  transition: width 0.22s ease;
}

.dum-menu__liste a:hover::after,
.dum-menu__liste a:focus-visible::after {
  width: 100%;
}

/* Page courante : marine et deja soulignee. WordPress pose ces classes tout
   seul sur l'entree correspondante. */
.dum-menu__liste .current-menu-item > a,
.dum-menu__liste .current_page_item > a {
  color: var(--prim);
}

.dum-menu__liste .current-menu-item > a::after,
.dum-menu__liste .current_page_item > a::after {
  width: 100%;
}

/* Chevron sur les entrees a sous-menu, ajoute par CSS : rien a saisir dans
   l'admin, il apparait des qu'une entree recoit un enfant.
   BUREAU UNIQUEMENT - sous 1180px le vrai bouton `.dum-sousmenu-toggle`
   (injecte par header.js) porte son propre chevron ; garder les deux
   doublerait l'indication. Masque plus bas dans la requete mobile. */
.dum-menu__liste .menu-item-has-children > a::before {
  content: "\25BE";
  float: right;
  margin-left: 6px;
  font-size: 9px;
  color: var(--gold);
  line-height: 2.2;
}

/* Bouton d'accordeon mobile : invisible tant que le burger ne l'est pas, le
   survol suffit pour reveler le sous-menu sur grand ecran (regle plus bas).
   Rendu visible sous 1180px, section correspondante de ce fichier. */
.dum-sousmenu-toggle {
  display: none;
}

/* L'entree parente recopiee dans son propre sous-menu (posee par header.js)
   N'A DE SENS QUE SUR MOBILE, ou le clic sur la ligne deplie au lieu de
   naviguer. Sur grand ecran le lien du parent mene deja a sa page : la
   laisser afficherait deux fois « Informations » dans le meme deroulant,
   soit une modification du menu de bureau que personne n'a demandee. */
.dum-sousmenu-parent {
  display: none;
}

@media (max-width: 1180px) {
  .dum-sousmenu-parent {
    display: block;
  }
}

/* Sous-menus */
.dum-menu__liste .sub-menu {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 220px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 8px;
  list-style: none;
  margin: 6px 0 0;
  box-shadow: 0 14px 34px rgba(31, 37, 51, 0.12);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
}

/* SURVOL RESERVE AUX VRAIS POINTEURS - CORRECTIF DU DOUBLE-APPUI (07/08/2026,
   Rodolphe : « je dois cliquer 2 fois pour que ca collapse »).
   Cette regle n'etait bornee par AUCUNE requete de media : elle s'appliquait
   donc aussi sur telephone. Or un mobile qui rencontre un `:hover` revelant
   du contenu simule le survol AU PREMIER APPUI et ne declenche le clic qu'au
   SECOND - comportement historique d'iOS, repris par Android. D'ou les deux
   appuis necessaires.
   S'ajoutait un conflit de specificite : `.dum-menu__liste li:hover >
   .sub-menu` pese 0,3,1 et battait donc `.dum-menu__liste .sub-menu.est-ouvert`
   (0,3,0), notre propre etat ouvert.
   `(hover: hover) and (pointer: fine)` = souris ou trackpad. Un ecran tactile
   n'entre jamais ici, et l'accordeon JS y regne seul.
   NE PAS RETIRER CETTE REQUETE - le double-appui reviendrait. */
@media (hover: hover) and (pointer: fine) {
  .dum-menu__liste li:hover > .sub-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
}

/* Ouverture au clavier, BORNEE AU GRAND ECRAN comme le survol. En dessous de
   1181px c'est l'accordeon JS qui commande, y compris au clavier (Entree sur
   le lien declenche un clic, donc la bascule). Laisser `focus-within` courir
   sur mobile rendrait `visibility: visible` un sous-menu par ailleurs
   rabattu a `max-height: 0` : ses liens resteraient atteignables au clavier
   dans un bloc invisible - un piege a focus. */
@media (min-width: 1181px) {
  .dum-menu__liste li:focus-within > .sub-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
}

.dum-menu__liste .sub-menu a {
  text-transform: none;
  letter-spacing: 0.01em;
  font-size: 14px;
  font-weight: 500;
  padding: 9px 12px;
  border-radius: 6px;
}

.dum-menu__liste .sub-menu a::after {
  display: none;
}

.dum-menu__liste .sub-menu a:hover {
  background: var(--paper2);
  color: var(--prim);
}

/* --------------------------------------------------------------------------
   Separateur et bouton de rendez-vous
   -------------------------------------------------------------------------- */

.dum-nav__sep {
  width: 1px;
  height: 28px;
  background: var(--line);
  flex: none;
  margin-inline: 22px;
}

.dum-nav__rdv {
  flex: none;
}

/* --------------------------------------------------------------------------
   Bouton du menu mobile
   Masque au-dessus de 900 px : sur grand ecran le menu est deja visible.
   -------------------------------------------------------------------------- */

.dum-burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 46px;
  height: 46px;
  margin-left: auto;
  padding: 0;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 10px;
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease;
}

/* SPECIFICITE - NE PAS RETIRER `.dum-nav` DE CES SELECTEURS.
   Defaut signale par Rodolphe le 07/08/2026 : « les boutons burger / croix
   une fois refermes restent bleu opaque ». Kadence declare
   `button:hover, button:focus, button:active { background:
   var(--global-palette-btn-bg-hover) }` dans `global.min.css`, soit 0,1,1.
   Notre `.dum-burger` pesait 0,1,0 : il PERDAIT. Sur un ecran tactile,
   `:focus` reste acquis apres le relachement du doigt, donc le bouton
   gardait le fond marine du survol Kadence meme une fois le menu referme -
   il paraissait ouvert alors qu'il ne l'etait plus.
   `.dum-nav .dum-burger` pese 0,2,0 et repasse devant. Les etats sont
   redeclares explicitement plutot que neutralises par `!important` : on
   garde la main sur le rendu au lieu de fermer la porte a la suite. */
.dum-nav .dum-burger,
.dum-nav .dum-burger:hover,
.dum-nav .dum-burger:focus,
.dum-nav .dum-burger:active {
  background: transparent;
  box-shadow: none;
}

.dum-nav .dum-burger:hover,
.dum-nav .dum-burger:focus-visible {
  border-color: var(--gold);
}

/* ETAT OUVERT INVERSE : fond marine, traits creme.
   Ferme, le bouton se fond dans la barre creme - c'est voulu. Ouvert, il
   devient l'element le plus contraste de l'en-tete : la croix se trouvait
   sinon noyee au milieu du menu deplie, et on cherchait par ou refermer.
   L'attribut fait de ces regles du 0,3,0, donc elles passent aussi devant
   Kadence ET devant les regles de neutralisation ci-dessus. */
.dum-nav .dum-burger[aria-expanded="true"],
.dum-nav .dum-burger[aria-expanded="true"]:hover,
.dum-nav .dum-burger[aria-expanded="true"]:focus,
.dum-nav .dum-burger[aria-expanded="true"]:active {
  background: var(--prim);
  border-color: var(--prim);
}

.dum-burger[aria-expanded="true"] .dum-burger__trait {
  background: var(--paper);
}

.dum-burger__trait {
  display: block;
  width: 20px;
  height: 2px;
  margin-inline: auto;
  background: var(--ink);
  border-radius: 2px;
  transition: transform 0.22s ease, opacity 0.18s ease, background 0.2s ease;
}

/* Croix : les deux traits extremes pivotent, celui du milieu s'efface. */
/* 7px = un intervalle (5) + une epaisseur de trait (2) : c'est la distance
   exacte qui ramene les traits extremes sur celui du milieu. A recalculer si
   l'epaisseur ou l'ecart changent, sinon la croix est de travers. */
.dum-burger[aria-expanded="true"] .dum-burger__trait:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

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

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

/* --------------------------------------------------------------------------
   Sous 1180 px : menu replie dans le bouton
   --------------------------------------------------------------------------
   POINT DE RUPTURE PLUS HAUT QUE CELUI DE LA HOME (900 px), ET C'EST VOULU.
   Mesure faite sur le site : la marque, le menu et le bouton reclament
   1071 px cote a cote. Avec 900 px de bascule, tout ce qui se trouvait entre
   900 et 1150 px affichait un en-tete tasse, aux elements qui se touchaient.
   Le contenu de la home, lui, garde 900 px : ce sont deux composants
   differents, ils n'ont aucune raison de basculer au meme endroit.
   Si le menu s'allonge d'une entree, remonter ce seuil.
   -------------------------------------------------------------------------- */

@media (max-width: 1180px) {
  .dum-wrap {
    padding-inline: 22px;
  }

  /* Chevron du bureau retire : le bouton `.dum-sousmenu-toggle` prend le
     relais, doublon sinon. */
  .dum-menu__liste .menu-item-has-children > a::before {
    display: none;
  }

  /* Les horaires et l'adresse sautent en premier : l'appel et le courriel
     sont les deux gestes utiles depuis un telephone. */
  .dum-util__groupe--fin {
    display: none;
  }

  .dum-util__inner {
    justify-content: center;
  }

  /* HAUTEUR DE LA PREMIERE LIGNE FIXEE PAR SON CONTENU, PAS PAR `min-height`.
     Correctif du 07/08/2026, signale par Rodolphe : « a l'ouverture, le menu
     remonte un peu, donc se colle trop a la bordure ». Mesure avant/apres
     clic : la marque sautait de 7px vers le haut (top 52 -> 45).
     Cause : `min-height: 72px` s'applique au CONTENEUR flex, pas a sa
     premiere ligne. Menu ferme, il n'y a qu'une ligne, qui s'etire donc a
     72px et centre la marque dedans ; menu ouvert, une deuxieme ligne
     apparait et les deux se partagent la hauteur - la premiere retombe a la
     taille de son contenu, et tout remonte.
     Le rythme vertical vient maintenant d'un `padding` sur la barre et d'une
     hauteur minimale sur la marque elle-meme : la premiere ligne mesure
     alors la meme chose que le menu soit ouvert ou ferme.
     NE PAS REMETTRE `min-height` ICI, le defaut reviendrait. */
  .dum-nav {
    min-height: 0;
    padding-block: 11px;
    flex-wrap: wrap;
    align-content: center;
  }

  .dum-marque {
    min-height: 46px;
  }

  .dum-burger {
    display: flex;
  }

  .dum-nav__sep {
    display: none;
  }

  /* Le menu occupe toute la largeur sous la barre, une fois deplie. */
  .dum-menu {
    flex-basis: 100%;
    margin-left: 0;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.28s ease;
  }

  /* `overscroll-behavior: contain` : arrive en bout de liste, le geste ne se
     propage plus a la page derriere. C'est la moitie « dans le menu » du
     correctif anti-defilement ; le voile couvre la moitie « hors du menu ». */
  .dum-menu.est-ouvert {
    max-height: 80vh;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  /* Le filet et le `padding-top` decollent le menu de la barre : deplie, sa
     premiere entree venait toucher le bord de l'en-tete. */
  .dum-menu__liste {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding-top: 10px;
    padding-bottom: 14px;
    margin-top: 4px;
    border-top: 1px solid var(--line);
  }

  /* PLUS GRAND QUE SUR BUREAU, ET C'EST VOULU (demande de Rodolphe,
     07/08/2026). Un menu de telephone se lit a bout de bras et se vise au
     doigt : 16px de texte pour 17px sur bureau une fois l'interlettrage
     compte, et surtout 52px de hauteur de ligne, au-dessus des 44px
     recommandes pour une cible tactile. Le 13px du bureau, lui, se lit de
     pres avec un pointeur precis. */
  .dum-menu__liste a {
    padding: 16px 2px;
    border-bottom: 1px solid var(--line2);
    font-size: 16px;
  }

  /* Une entree a sous-pages laisse la place au chevron, sinon son libelle
     passe dessous. */
  .dum-menu__liste .menu-item-has-children > a {
    padding-right: 50px;
  }

  /* Le soulignement anime n'a pas de sens sans survol : on marque la page
     courante par un liseré a gauche, lisible au doigt. */
  .dum-menu__liste a::after {
    display: none;
  }

  .dum-menu__liste .current-menu-item > a,
  .dum-menu__liste .current_page_item > a {
    border-left: 3px solid var(--gold);
    padding-left: 12px;
  }

  /* REPLIE PAR DEFAUT - correctif du 07/08/2026, signale par Rodolphe
     (« le menu est deplie par defaut, c'est pas ce qu'on veut »). Avant, ces
     memes proprietes forcaient les sous-menus visibles en permanence : sur
     mobile, ouvrir le menu affichait d'emblee TOUTES les pages filles de
     L'etude et d'Informations, sans geste de l'utilisateur. `visibility` fait
     doublement le travail : elle cache le sous-menu a l'oeil (avec
     `max-height`) ET le retire du parcours clavier - un lien technique
     `visibility:hidden` n'est plus atteignable par Tab, alors qu'un lien
     seulement recouvert par `overflow:hidden` le resterait (piege a focus). */
  /* FOND ET LISERE OR PLUTOT QU'UN SIMPLE RETRAIT - signale par Rodolphe le
     07/08/2026 : « la difference de couleur est trop faible pour etre
     visible ». Le sous-menu ne se distinguait que par 14px de retrait, sur
     le meme fond creme et avec la meme graisse : deplie, on ne voyait pas
     ou commencaient les pages filles.
     ARBITRAGE FINAL DE RODOLPHE, 07/08/2026 : « rends plus simple le menu
     collapse, pas besoin de changement de couleur, liseret etc ». Ni fond ni
     liseré, donc. Trois reglages de fond avaient ete essayes avant d'y
     renoncer (transparent, #c9bfa5 puis #ddd4be) - **ne pas en represser
     un quatrieme**. Le sous-menu se distingue par son retrait, sa casse
     normale et le chevron retourne du parent, et c'est assez.
     La ligne `border: 0` reste indispensable : elle annule le cadre du
     sous-menu flottant de bureau, declare plus haut. */
  .dum-menu__liste .sub-menu {
    position: static;
    opacity: 1;
    visibility: hidden;
    transform: none;
    box-shadow: none;
    border: 0;
    background: transparent;
    padding: 0 0 0 14px;
    margin: 0;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.25s ease, visibility 0.25s;
  }

  .dum-menu__liste .sub-menu.est-ouvert {
    visibility: visible;
    /* Assez grand pour ne jamais rogner un sous-menu reel (4 entrees au plus
       une fois la page parente ajoutee) : c'est un plafond, pas une hauteur
       fixe. */
    max-height: 400px;
  }

  /* Les pages filles se lisent en minuscules et sans majuscules forcees :
     une deuxieme difference avec les entrees de premier niveau, en plus du
     fond. */
  .dum-menu__liste .sub-menu a {
    text-transform: none;
    letter-spacing: 0.01em;
    font-size: 15px;
    font-weight: 500;
    padding: 15px 2px;
    /* Meme filet que les entrees de premier niveau : le sous-menu ne porte
       plus de fond propre, il n'a donc plus besoin d'un filet particulier. */
    border-bottom: 1px solid var(--line2);
  }

  .dum-menu__liste .sub-menu li:last-child a {
    border-bottom: 0;
  }

  /* CHEVRON : REPERE VISUEL, LA LIGNE ENTIERE EST LA COMMANDE.
     -----------------------------------------------------------------------
     Deux corrections du 07/08/2026, toutes deux signalees par Rodolphe.
     1. « Les chevrons sont invisibles » : ils etaient en or (#a87b35) sur
        creme (#f1ece0) et hauts de 11px. Passes en marine sur pastille creme
        foncee, a 15px - le marine sur creme depasse 10:1 de contraste la ou
        l'or plafonnait sous 4:1.
     2. « Le menu qui collapse au clic sur la zone doit collapser » : c'est
        desormais le LIEN de l'entree qui porte l'etat (`aria-expanded`, pose
        par header.js) et qui reagit au clic sur toute sa largeur. Le chevron
        n'est plus qu'un temoin - il reste cliquable puisqu'il est dans la
        zone, mais il est retire du parcours clavier et des lecteurs d'ecran
        (`aria-hidden` + `tabindex=-1` cote JS) pour ne pas annoncer deux
        commandes la ou il n'y en a qu'une. */
  /* Ni pastille ni cadre : « rends plus simple le menu collapse, pas besoin
     de changement de couleur, liseret etc » (Rodolphe, 07/08/2026). Le
     chevron n'est plus qu'un signe marine sur le creme de la barre, ce qui
     suffit largement a le voir - c'est sa COULEUR d'origine (or, sous 4:1)
     et sa taille (11px) qui le rendaient invisible, pas l'absence de cadre.
     Marine sur creme depasse 10:1, a 14px.
     `top: 50%` se calcule ici sur la hauteur du LIEN (le chevron en est un
     enfant, cf header.js), donc sur la seule ligne du parent - et non plus
     sur celle du `li` entier, qui grandit avec le sous-menu deplie. */
  .dum-sousmenu-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    color: var(--prim);
    font-size: 20px;
    line-height: 1;
    pointer-events: none;
    transition: transform 0.2s ease;
  }

  /* La rotation suit l'etat du LIEN, seul porteur de la verite - et le
     chevron vit DANS ce lien, d'ou un selecteur de descendance. */
  .dum-menu__liste a[aria-expanded="true"] .dum-sousmenu-toggle {
    transform: translateY(-50%) rotate(180deg);
  }

  /* POURQUOI UN `span` ET PAS UN `button` - c'est la reponse au defaut
     « les chevrons restent bleu opaque une fois le menu replie » (Rodolphe,
     07/08/2026). Kadence declare `button:hover, button:focus,
     button:active { background: var(--global-palette-btn-bg-hover) }` en
     0,1,1, ce qui battait notre classe seule (0,1,0) ; et sur un ecran
     tactile `:focus` reste acquis apres le relachement du doigt, donc le
     chevron gardait indefiniment le fond marine du survol Kadence.
     Le rendre non focusable EST le correctif de fond : la commande, c'est
     desormais la ligne entiere, le chevron n'a plus a etre un bouton. Il
     n'a donc plus ni `:focus` ni `:hover` a subir.
     NE PAS LE REPASSER EN `button` sans retablir la neutralisation en 0,2,0
     (`.dum-menu .dum-sousmenu-toggle:focus`), sinon le defaut revient. */

  /* Le bouton de rendez-vous rentre DANS le menu deroulant : affiche en
     permanence, il occupait toute la largeur sous la barre et noyait
     l'en-tete sous un aplat marine. Il suit `.dum-menu` dans le balisage,
     donc le selecteur de voisinage suffit - pas besoin de le deplacer. */
  .dum-nav__rdv {
    display: none;
  }

  .dum-menu.est-ouvert ~ .dum-nav__rdv {
    display: inline-flex;
    flex-basis: 100%;
    justify-content: center;
    margin-bottom: 16px;
  }
}

/* --------------------------------------------------------------------------
   Telephones : la marque (sceau + nom + baseline) devient trop large pour
   partager la ligne avec le bouton burger.
   --------------------------------------------------------------------------
   BOGUE CORRIGE LE 07/08/2026, signale par Rodolphe (« header trop gros,
   fait tomber le burger ») et mesure en ligne : a 390px - largeur de
   telephone la plus courante aujourd'hui (iPhone 12/13/14, beaucoup
   d'Android) - la marque pleine taille mesure ~319px alors que le budget
   disponible pour marque+burger n'est que de largeur - 90px (44 de marge de
   `.dum-wrap` + 46 du bouton), soit 300px a 390px de large. Le burger
   passait donc systematiquement a la ligne du dessous sur la plupart des
   telephones reels : l'ancien palier a 380px, cense traiter ce cas, ne
   couvrait quasiment personne (il reduisait le nom mais gardait la
   baseline, et ne s'appliquait meme pas au-dessus de 380px).
   Rodolphe a aussi demande la marque plus a gauche et des marges laterales
   reduites sur mobile : les deux se recoupent, `.dum-wrap` est resserre ici. */
@media (max-width: 480px) {
  .dum-wrap {
    padding-inline: 16px;
  }

  /* L'adresse de courriel cede la place, l'enveloppe reste : elle fait 218px
     a elle seule et coupait le numero de telephone en deux (cf plus haut).
     Le lien garde son `aria-label`, donc l'icone n'est pas muette. */
  .dum-util__mail-texte {
    display: none;
  }

  /* TAILLES MESUREES, PAS CHOISIES A L'OEIL - deuxieme passe du 07/08/2026,
     Rodolphe ayant juge la premiere trop severe (« tu as un poil trop reduit
     le logo », et la baseline etait tombee alors qu'il voulait garder la
     marque complete).
     Le budget se calcule : a 375px, largeur utile 343 (32 de marges), moins
     46 pour le burger et 12 de respiration = 285px pour la marque.
     Sceau 52 + espace 12 + nom a 18px (205px mesures) = 269px, soit 16px de
     reserve. La baseline revient, ramenee a 0.2em d'interlettrage : 131px,
     elle passe donc sous le nom sans elargir le bloc.
     Si une de ces valeurs remonte, refaire le calcul - c'est ce budget, et
     rien d'autre, qui empeche le burger de retomber a la ligne. */
  .dum-marque {
    gap: 12px;
  }

  .dum-marque__sceau {
    width: 52px;
    height: 52px;
  }

  .dum-marque__nom {
    font-size: 18px;
  }

  .dum-marque__baseline {
    font-size: 9px;
    letter-spacing: 0.2em;
    margin-top: 3px;
  }
}

/* Telephones les plus etroits (320px = largeur de reference du critere WCAG
   1.4.10 Reflow). Meme reduite ci-dessus, la marque deborde encore : le
   budget tombe a 232px pour 269 demandes. Le nom passe donc sur deux lignes
   plutot que de retrecir la police jusqu'a l'illisible - la coupure tombe
   sur l'esperluette, « Dumareau & » / « Saint-Saens ». La baseline (131px)
   tient encore dans les 160. */
@media (max-width: 350px) {
  .dum-marque__texte {
    max-width: 160px;
  }

  .dum-marque__nom {
    line-height: 1.15;
  }
}