/* Composants VHU — maquettes validees le 06/08/2026.
   Volontairement court : ce fichier sert d'etalon de sobriete au chantier d'allegement. */

/* ---------- Fil d'Ariane ---------- */
.vhu-ariane{font:400 14px/1.5 Verdana,Geneva,Helvetica,Arial,sans-serif;color:#5a6472;
  display:flex;flex-wrap:wrap;gap:6px;align-items:baseline;
  /* on reprend le conteneur de Divi, sinon le fil colle au bord gauche de l ecran */
  max-width:1080px;margin:16px auto 20px;padding:0 30px;box-sizing:content-box}
@media (max-width:980px){.vhu-ariane{padding:0 20px;margin:12px auto 14px;font-size:13px}}
.vhu-ariane a{color:#0077a3;text-decoration:none}
.vhu-ariane a:hover{text-decoration:underline}
.vhu-ariane i{font-style:normal;color:#9aa6b2}
.vhu-ariane span[aria-current]{color:#123a5a;font-weight:700}

/* ---------- Barre d'appel collante — telephone uniquement ---------- */
.vhu-barre{display:none}

@media (max-width:980px){
  .vhu-barre{display:block;position:fixed;left:0;right:0;bottom:0;z-index:9000;
    font-family:Verdana,Geneva,Helvetica,Arial,sans-serif}
  .vhu-barre[hidden]{display:block}          /* hidden sert de repli sans CSS */

  .vhu-barre__duo{position:relative;display:flex;align-items:stretch;
    border-radius:16px 16px 0 0;overflow:hidden;
    box-shadow:0 -6px 20px -8px rgba(18,58,90,.5)}

  /* l'etiquette est encastree dans le haut de la barre, arrondie par le bas */
  .vhu-barre__etiquette{position:absolute;top:0;left:50%;transform:translateX(-50%);z-index:2;
    padding:6px 22px 8px;background:#2a2b2d;color:#fff;
    font-size:13px;font-weight:700;line-height:1.2;white-space:nowrap;
    border-radius:0 0 13px 13px}

  .vhu-barre__lien{flex:1 1 50%;min-width:0;display:flex;align-items:center;justify-content:center;
    gap:9px;padding:36px 8px 14px;text-decoration:none;line-height:1.2;min-height:86px}
  .vhu-barre__form{background:#0077a3;color:#fff}
  .vhu-barre__appel{background:#ffce11;color:#1a202c}

  .vhu-barre__txt{display:block;min-width:0}
  .vhu-barre__titre{display:block;font-size:15px;font-weight:700;white-space:nowrap}
  .vhu-barre__sous{display:block;font-size:11.5px;font-style:italic;opacity:.9;white-space:nowrap}
  /* un numero d'appel coupe sur deux lignes ne se lit pas */
  .vhu-barre__appel .vhu-barre__titre{font-size:16px;letter-spacing:-.2px}

  .vhu-barre__rond{flex:0 0 34px;width:34px;height:34px;border-radius:50%;background:#fff;
    display:flex;align-items:center;justify-content:center}
  .vhu-barre__appel .vhu-barre__rond{background:#1a202c}
  .vhu-barre__rond svg{width:18px;height:18px;display:block;fill:#0077a3}
  .vhu-barre__appel .vhu-barre__rond svg{fill:#ffce11}

  /* la barre ne doit jamais masquer la fin de la page ni le bouton d'envoi */
  body{padding-bottom:96px}
}

@media (prefers-reduced-motion:no-preference){
  html{scroll-behavior:smooth}
}

/* ---------- Rail des categories du blog ---------- */
.vhu-rail{font:400 15px/1.4 Verdana,Geneva,Helvetica,Arial,sans-serif}
.vhu-rail__titre{display:block;font-size:12px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:#5a6472;margin:0 0 10px}
.vhu-rail ul{list-style:none!important;margin:0!important;padding:0!important}
.vhu-rail li{margin:0;padding:0;list-style:none!important}
.vhu-rail li::before{content:none!important}
.vhu-rail a{display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  padding:9px 0;border-bottom:1px solid #dbe4ea;color:#2d3748;text-decoration:none}
.vhu-rail a:hover{color:#0077a3}
.vhu-rail a b{font-weight:400;font-size:13px;color:#8b97a5;flex:0 0 auto}
.vhu-rail__tous a{color:#0077a3;font-weight:700}

/* ---------- Grille d'articles : quelques corrections d'heritage ---------- */
/* le lien « lire plus » heritait d'un soulignement barre */
.et_pb_blog_grid .et_pb_post .more-link,
.et_pb_blog_grid .et_pb_post a.more-link{text-decoration:none!important;
  font-weight:700;color:#0077a3}
.et_pb_blog_grid .et_pb_post .more-link:hover{text-decoration:underline!important}
.et_pb_blog_grid .et_pb_post{border-radius:6px}
.et_pb_blog_grid .et_pb_post .entry-title{line-height:1.3}

/* ------------------------------------------------------------------
   CONTOUR DE FOCUS — pose du 07/08/2026.

   Mesure : sur le hub departemental, 40 liens sur 40 portaient
   outline:none sans rien en remplacement. Au clavier, rien n'indiquait
   ou l'on se trouvait : la page etait inutilisable sans souris.

   :focus-visible ne se declenche qu'au clavier, jamais au clic souris :
   le contour apparait pour qui en a besoin et reste invisible pour les
   autres. Le decalage de 2px evite qu'il ne colle au texte.
   ------------------------------------------------------------------ */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible{
  outline:3px solid #0077a3;
  outline-offset:2px;
  border-radius:2px;
}
/* Sur les fonds sombres — bandeau, pied de page, barre d'appel — le bleu
   ne ressort pas : on passe au blanc. */
.et-l--footer a:focus-visible,
.vhu-barre a:focus-visible,
.et_pb_section[style*="333"] a:focus-visible{
  outline-color:#ffffff;
}

/* ------------------------------------------------------------------
   LA BANDE BLEUE DERRIERE LE FIL D'ARIANE — retiree le 07/08/2026.

   La premiere section du gabarit Theme Builder des articles portait
   background-color:#f7fafc. Elle peignait une bande bleu tres pale sur
   toute la largeur, entre l'en-tete blanc et la colonne de texte blanche,
   exactement a la hauteur du fil d'Ariane. Elle n'etait demandee nulle
   part et ne se voyait que sur les articles depourvus d'enveloppe
   blanche, d'ou une incoherence d'une page a l'autre.

   On la remet en blanc, au niveau de la page article uniquement : les
   sections colorees voulues (heros des pages ville, encarts) ne sont pas
   touchees puisqu'elles ne sont pas la premiere section d'un article.
   ------------------------------------------------------------------ */
body.single-post .et_pb_section_0.et_pb_section,
body.single .et_pb_section_0.et_pb_section,
body.page .et_pb_section_0.et_pb_section.et_section_regular{
  background-color:#ffffff;
}