.hdr-top {
  background: #f8fafc;
  border-bottom: 1px solid #e5e7eb;
  padding: 6px 0;
}
.hdr-top-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.hdr-top__phone {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  color: #374151;
  font-weight: 500;
  text-decoration: none;
  transition: color .15s;
}
.hdr-top__phone i { color: #1d4ed8; font-size: 12px; }
.hdr-top__phone:hover { color: #1d4ed8; }
.hdr-top__links { display: flex; align-items: center; gap: 18px; }
.hdr-top__link {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  color: #6b7280;
  text-decoration: none;
  transition: color .15s;
}
.hdr-top__link:hover { color: #1d4ed8; }
.hdr-top__link i { transition: opacity .15s; }
.hdr-top__link:hover i { opacity: .75; }
.hdr-top__sep { width: 1px; height: 13px; background: #d1d5db; }

/* Tooltips liens raccourcis */
.hdr-top__link { position: relative; }
.hdr-tip {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  background: #1e293b;
  color: #f1f5f9;
  border-radius: 8px;
  padding: 9px 13px;
  width: 200px;
  font-size: 11.5px;
  line-height: 1.45;
  box-shadow: 0 4px 16px rgba(0,0,0,.18);
  pointer-events: none;
  z-index: 9999;
  white-space: normal;
}
.hdr-tip::before {
  content: '';
  position: absolute;
  bottom: 100%;
  right: 14px;
  border: 6px solid transparent;
  border-bottom-color: #1e293b;
}
.hdr-tip strong { display: block; font-size: 12px; color: #fff; margin-bottom: 3px; }
.hdr-top__link:hover .hdr-tip { display: block; }

.hdr-main {
  background: #fff;
  border-bottom: 1px solid #e5e7eb;
  position: sticky;
  top: 0;
  z-index: 999;
  box-shadow: 0 8px 24px rgba(15, 23, 42, .05);
}
.hdr-main-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 64px; /* tâche 46 : min-height et non height, l'en-tête grandit si l'utilisateur impose un espacement du texte (WCAG 1.4.12) */
  gap: 16px;
}
.hdr-logo {
  display: flex;
  align-items: center;
  text-decoration: none;
  flex-shrink: 0;
}
.hdr-logo img { display: block; }

.hdr-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.hdr-hub-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: .78rem;
  font-weight: 600;
  color: #64748b;
  text-decoration: none;
  padding: 4px 10px;
  border: 1px solid #e2e8f0;
  border-radius: 999px;
  transition: color .15s, border-color .15s, background .15s;
  flex-shrink: 0;
}
.hdr-hub-link:hover { color: #4f46e5; border-color: #c7d2fe; background: #eef2ff; }
.hdr-hub-link i { font-size: .75rem; }
@media (max-width: 991px) { .hdr-hub-link { display: none; } }

.hdr-nav {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 1;
  justify-content: center;
  min-width: 0;      /* tâche 46 : la navigation passe à la ligne au lieu de déborder quand le texte est espacé (WCAG 1.4.12) ; */
  flex-wrap: wrap;   /* sans effet tant que les 5 rubriques tiennent sur une ligne (rendu par défaut inchangé) */
}
.hdr-nav-item { position: relative; }
.hdr-nav-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 10px 14px 14px;
  border-radius: 10px;
  font-size: 13.5px;
  font-weight: 600;
  color: #374151;
  background: transparent;
  border: 0;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  transition: background .18s, color .18s, box-shadow .18s;
  line-height: 1;
}
.hdr-nav-btn .chev { font-size: 10px; color: #8d95a3; transition: transform .2s; }
.hdr-nav-btn::after {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 7px;
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(90deg, #1d4ed8, #38bdf8);
  transform: scaleX(0);
  transform-origin: center;
  opacity: 0;
  transition: transform .18s ease, opacity .18s ease;
}
.hdr-nav-btn:hover, .hdr-nav-btn:focus-visible {
  background: #eff6ff;
  color: #1d4ed8;
  box-shadow: inset 0 0 0 1px rgba(147, 197, 253, .8);
}
.hdr-nav-btn.is-active {
  color: #1d4ed8;
  background: linear-gradient(180deg, #f8fbff 0%, #eef5ff 100%);
  box-shadow: inset 0 0 0 1px rgba(191, 219, 254, .92);
}
.hdr-nav-btn.is-active::after,
.hdr-nav-btn:hover::after,
.hdr-nav-btn:focus-visible::after,
.hdr-nav-item:hover .hdr-nav-btn::after,
.hdr-nav-item:focus-within .hdr-nav-btn::after {
  transform: scaleX(1);
  opacity: 1;
}
.hdr-nav-btn.is-active .chev {
  color: #60a5fa;
}
.hdr-nav-item:hover .chev, .hdr-nav-item:focus-within .chev { transform: rotate(180deg); }

.hdr-dropdown {
  display: none;
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  box-shadow: 0 12px 40px rgba(15,23,42,.10);
  padding: 32px 40px 30px;
  min-width: 480px;
  z-index: 1000;
}
/* Pont invisible au-dessus du dropdown pour éviter la fermeture lors du passage bouton->menu */
.hdr-dropdown::before {
  content: '';
  position: absolute;
  top: -12px;
  left: -20px;
  right: -20px;
  height: 12px;
}
.hdr-dropdown--narrow { min-width: 280px; }
.hdr-nav-item:hover .hdr-dropdown,
.hdr-nav-item:focus-within .hdr-dropdown { display: block; }

.hdr-dd-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 0 52px; }
.hdr-dd-cols--single { grid-template-columns: 1fr; }
.hdr-dd-section { margin-bottom: 26px; }
.hdr-dd-section:last-child { margin-bottom: 0; }
.hdr-dd-head,
a.hdr-dd-head {
  font-size: 13.5px !important;
  line-height: 1.2;
  letter-spacing: 0;
  text-transform: uppercase;
  color: #017e84;
  margin-bottom: 14px;
  padding-bottom: 9px;
  border-bottom: 2px solid #017e84;
  font-weight: 700;
  text-decoration: none;
  display: block;
}
.hdr-dd-head--teal,   a.hdr-dd-head--teal   { color: #017e84 !important; border-bottom-color: #017e84; }
.hdr-dd-head--blue,   a.hdr-dd-head--blue   { color: #1d4ed8 !important; border-bottom-color: #1d4ed8; }
.hdr-dd-head--indigo, a.hdr-dd-head--indigo { color: #4338ca !important; border-bottom-color: #4338ca; }
.hdr-dd-head--violet, a.hdr-dd-head--violet { color: #7c3aed !important; border-bottom-color: #7c3aed; }
.hdr-dd-head--green,  a.hdr-dd-head--green  { color: #15803d !important; border-bottom-color: #15803d; }
.hdr-dd-head--amber,  a.hdr-dd-head--amber  { color: #b45309 !important; border-bottom-color: #b45309; }
.hdr-dd-head--red,    a.hdr-dd-head--red    { color: #dc2626 !important; border-bottom-color: #dc2626; }
.hdr-dd-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 14px; }
.hdr-dd-list a {
  font-size: 14px;
  color: #374151;
  text-decoration: none;
  display: flex;
  align-items: center;
  transition: color .15s;
}
.hdr-dd-list a:hover { color: #1d4ed8; }
.hdr-dd-list a i { display: none; }
.hdr-dd-all-bar {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid #e5e7eb;
}
.hdr-dd-all-bar--center {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid #e5e7eb;
  text-align: center;
}
.hdr-dd-all {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: .78rem;
  font-weight: 700;
  color: #1d4ed8;
  text-decoration: none;
  padding: 5px 0;
}
.hdr-dd-all i:first-child { font-size: .85rem; }
.hdr-dd-all i:last-child  { font-size: .65rem; }
.hdr-dd-all:hover { text-decoration: underline; }
.hdr-dd-all--teal   { color: #017e84; }
.hdr-dd-all--blue   { color: #1d4ed8; }
.hdr-dd-all--indigo { color: #4338ca; }
.hdr-dd-all--violet { color: #7c3aed; }
.hdr-dd-all--green  { color: #15803d; }
.hdr-dd-all--amber  { color: #b45309; }
.hdr-dd-all--red    { color: #dc2626; }

.hdr-cta {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: #1d4ed8;
  color: #fff !important;
  font-size: 13.5px;
  font-weight: 500;
  padding: 9px 18px;
  border-radius: 7px;
  text-decoration: none !important;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background .15s;
}
.hdr-cta:hover { background: #1e40af; }

.hdr-search-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid rgba(191, 219, 254, .95);
  border-radius: 12px;
  background: linear-gradient(180deg, #f8fbff 0%, #eef5ff 100%);
  color: #1d4ed8;
  box-shadow: 0 10px 24px rgba(37, 99, 235, .08);
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease;
}
.hdr-search-btn:hover,
.hdr-search-btn:focus-visible {
  transform: translateY(-1px);
  background: linear-gradient(180deg, #ffffff 0%, #e8f1ff 100%);
  box-shadow: 0 14px 28px rgba(37, 99, 235, .14);
  color: #1742a0;
  outline: none;
}
.hdr-search-btn i { font-size: 14px; }

.hdr-mobile-btn {
  display: none;
  background: #eff6ff;
  border: 0;
  border-radius: 8px;
  padding: 0;
  cursor: pointer;
  width: 38px;
  height: 38px;
  align-items: center;
  justify-content: center;
  margin-left: 0;
  transition: background .15s;
}
.hdr-mobile-btn:hover { background: #dbeafe; }
.hdr-mobile-btn i {
  position: relative;
  display: block;
  width: 22px;
  height: 2px;
  border-radius: 999px;
  background-color: #1d4ed8;
  transition: background-color .15s ease;
}
.hdr-mobile-btn i::before,
.hdr-mobile-btn i::after {
  content: "";
  position: absolute;
  left: 0;
  width: 22px;
  height: 2px;
  border-radius: 999px;
  background-color: #1d4ed8;
  transition: background-color .15s ease, transform .15s ease;
}
.hdr-mobile-btn i::before {
  top: -7px;
}
.hdr-mobile-btn i::after {
  top: 7px;
}
.hdr-mobile-btn i,
.hdr-mobile-btn i:before,
.hdr-mobile-btn i:after { background-color: #1d4ed8 !important; }
.hdr-mobile-btn:hover i,
.hdr-mobile-btn:hover i:before,
.hdr-mobile-btn:hover i:after { background-color: #1e40af !important; }

/* Force a visible hamburger on pages that reuse the legacy mobile-navigation-icon class. */
.hdr-mobile-btn.mobile-navigation-icon {
  position: relative;
  overflow: visible;
  font-size: 0;
  line-height: 0;
}
.hdr-mobile-btn.mobile-navigation-icon i {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  transform: none !important;
  display: block !important;
  width: 22px !important;
  height: 2px !important;
  opacity: 1 !important;
  visibility: visible !important;
  margin: 0 !important;
  background: #1d4ed8 !important;
}
.hdr-mobile-btn.mobile-navigation-icon i::before,
.hdr-mobile-btn.mobile-navigation-icon i::after {
  content: "" !important;
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  width: 22px !important;
  height: 2px !important;
  left: 0 !important;
  background: #1d4ed8 !important;
}
.hdr-mobile-btn.mobile-navigation-icon i::before { top: -7px !important; }
.hdr-mobile-btn.mobile-navigation-icon i::after { top: 7px !important; }

@media (max-width: 767px) { .hdr-top { display: none !important; } }
@media (max-width: 1199px) {
  .hdr-main .container {
    overflow-x: clip;
  }
  .hdr-main-inner {
    min-width: 0;
    gap: 10px;
  }
  .hdr-logo img {
    width: 132px;
    height: auto;
  }
  .hdr-nav { display: none !important; }
  .hdr-mobile-btn { display: flex !important; }
  .hdr-actions { gap: 8px; }
  .hdr-search-btn {
    width: 38px;
    height: 38px;
    border-radius: 10px;
  }
  .hdr-cta-label { display: none; }
  .hdr-cta { padding: 9px 12px; }
}

@media (max-width: 575px) {
  .hdr-main-inner {
    min-height: 60px;
  }
  .hdr-logo img {
    width: 122px;
  }
}

/* Tâche 29 (accessibilité) */
/* « · Lun–Ven 9h–18h » de la barre haute : #6a7484 (4,52:1 sur #f8fafc, WCAG 1.4.3) est posé en ligne dans includes/header.php (tâche 37). */
/* Échap referme le sous-menu ouvert au survol / au focus (assets/js/evoir-a11y.js pose .is-dismissed) : WCAG 1.4.13 */
.hdr-nav-item.is-dismissed .hdr-dropdown { display: none; }
/* Titres qui gardaient l'apparence d'un <h5> du thème (24 px, 20 px sous 768 px) mais dont le niveau réel est h2 : le saut de
   niveau h1 -> h5 est corrigé sans changer le rendu. Les règles « .glass-card h5 » des feuilles lexique-layout,
   lexique-enhancements et email-library (blanc sur fond bleu) ont ici leur jumelle « .evoir-h5 » : elles vivent dans ce
   fichier (versionné par empreinte via evoir_asset) et non dans ces trois feuilles, chargées avec un ?v= fixe. */
.evoir-h5 { font-size: 24px; }
@media only screen and (max-width: 767px) { .evoir-h5 { font-size: 20px; } }
.lexique-page .glass-card .evoir-h5 { color: #fff !important; }
.email-library-page .glass-card .evoir-h5 { color: #fff !important; font-weight: 700; }
/* Champs du formulaire de contact : le placeholder par défaut (#757575, et Firefox le rend encore plus clair par opacité)
   faisait 4,34:1 sur le fond #f8f8f8 des champs ; #727272 = 4,53:1, opacité 1 pour un rendu identique partout. */
.contact-inner input::placeholder, .contact-inner textarea::placeholder { color: #727272; opacity: 1; }
/* Bouton à contour du thème (bleu #086ad8) posé sur la bande d'appel bleue des pages partenaires : 2,1:1, presque invisible -> blanc. */
.processing-contact-us-bg .ht-btn--outline { color: #fff; border-color: rgba(255, 255, 255, .75); background: transparent; }
.processing-contact-us-bg .ht-btn--outline:hover, .processing-contact-us-bg .ht-btn--outline:focus { background: #fff; border-color: #fff; color: #086ad8; }

/* Tâche 42 (accessibilité, WCAG 1.4.11) : bordure des champs de saisie à 3:1 au moins contre le fond qui les entoure.
   Les feuilles d'origine (style.min, lexique-*, email-library) sont chargées avec un ?v= fixe : les correctifs vivent ici
   (fichier versionné par empreinte). :not(:focus) laisse intacte la bordure bleue du focus. */
.contact-inner input:not(:focus), .contact-inner textarea:not(:focus), .contact-inner select:not(:focus) { border-color: #909090; }
.lexique-page input.search-input:not(:focus), .email-library-page input.search-input:not(:focus) { border-color: #7e97b5; }
/* Tâche 42 (WCAG 2.4.11, focus non masqué) : l'en-tête collant (61 à 65 px) recouvrait l'élément qui recevait le focus en Maj+Tab
   (le navigateur le place au ras du bord haut) ; scroll-padding-top lui garde la place. Les ancres # en profitent aussi. */
html { scroll-padding-top: 84px; }
/* Cadres tiers focalisables (Google Maps de /contact/) : le navigateur ne dessine aucun anneau sur l'iframe (:focus ne lui est jamais
   appliqué), mais son conteneur reçoit :focus-within (focus par script) ; c'est lui qui porte l'anneau (WCAG 2.4.7). */
:has(> iframe):focus-within, .evoir-frame-focus { outline: 3px solid #1d4ed8; outline-offset: 2px; }
/* Tâche 46 : un Tab réel dans l'iframe n'allume pas :focus-within (le document parent perd le focus) : evoir-a11y.js pose alors la classe
   evoir-frame-focus sur le conteneur ; :focus-within reste utile quand le focus est donné par script. */
/* Tâche 42 (WCAG 1.4.10, reflow à 320 px) : trois pages débordaient de 6 à 222 px et imposaient un défilement horizontal.
   - bouton « Sommaire … » des lexiques : white-space:nowrap sur un texte long dans un conteneur de 295 px ;
   - .row.g-5 de Bootstrap (gouttière 3 rem) : la boîte de la ligne dépasse le conteneur de 12 px de chaque côté sous 768 px ;
     avec 1,5 rem, le contenu des colonnes empilées reste exactement à la même place (marge négative et remplissage se compensent). */
.lexique-page a.return-btn, .email-library-page a.return-btn { white-space: normal; text-align: center; max-width: 100%; }
@media (max-width: 767.98px) { .row.g-5 { --bs-gutter-x: 1.5rem; } }
/* Tâche 46 (WCAG 1.4.10) : dès 768 px la même boîte (gouttière 3 rem, remplissage du conteneur 0,75 rem) dépasse encore de 12 px à droite
   des conteneurs pleine largeur (4 pages : partenaires Hornetsecurity et CentralPay, /support-a-distance/, MaGestionCo facturation) :
   défilement horizontal de 12 px à toutes les largeurs de bureau. Seul le vide de la gouttière dépasse : on le rogne au conteneur,
   le contenu des colonnes ne bouge pas d'un pixel. */
.container:has(> .row.g-5) { overflow-x: clip; }
/* Tâche 42 (WCAG 2.2.2 et 2.3.3, prefers-reduced-motion) : animations qui tournent sans fin sur des éléments d'interface
   (squelettes de chargement, pulsation des boutons de /support-a-distance/) : arrêtées pour qui
   demande moins de mouvement. La roue de chargement de la page de résultats (.srchp-spin), brève et utile, reste
   (l'ancien état d'attente de l'overlay, .srch-bridge-state, a disparu avec l'aperçu en direct : validation = navigation directe). */
@media (prefers-reduced-motion: reduce) {
  .ios-skeleton-icon, .ios-skeleton-line, .srchp-sk, .sad-btn--pulse-blue, .sad-btn--pulse-gray { animation: none !important; }
}

/* Tâche 46 (WCAG 1.4.12) : espacement du texte imposé par l'utilisateur (html.evoir-txt-spacing, posé par evoir-a11y.js).
   Les rubriques ouvrent un méga-menu centré sous elles : élargi par l'espacement (et la navigation passant sur deux lignes), il sortait
   de la fenêtre (à gauche pour la dernière rubrique) et dépassait la hauteur de la fenêtre sans pouvoir défiler (le menu est fixé à l'en-tête
   collant). On le centre alors sur l'en-tête (le conteneur positionné est l'en-tête, non la rubrique), on borne largeur et hauteur à la fenêtre. */
html.evoir-txt-spacing .hdr-nav-item { position: static; }
html.evoir-txt-spacing .hdr-dropdown { max-width: calc(100vw - 32px); max-height: calc(100vh - 150px); overflow-y: auto; }
/* Même levée des coupures « nowrap + points de suspension » pour les introductions et titres des lexiques, des modèles d'e-mails, des
   FAQ de présentation et les liens du sommaire (leurs feuilles gardent un ?v= fixe ou vivent dans la page : la règle est portée ici). */
html.evoir-txt-spacing .lex-section-intro,
html.evoir-txt-spacing .lexique-page .section-title-nowrap,
html.evoir-txt-spacing .email-library-page .lex-section-intro,
html.evoir-txt-spacing .faq-section-head .faq-section-intro,
html.evoir-txt-spacing .faq-section-head .faq-section-title,
html.evoir-txt-spacing .som-list li a {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  overflow-wrap: anywhere;
}
/* Tâche 46 (WCAG 1.4.10, 1.4.12) : titres de rubrique des modèles d'e-mails en « nowrap » sans retour possible (332 px sur un écran de 320).
   La feuille email-library.css garde un ?v= fixe : la règle est portée ici ; sans effet tant que le titre tient sur une ligne. */
.email-library-page .lex-section-head .lex-section-title { flex-wrap: wrap; white-space: normal; }
/* Introductions des rubriques : elles passent à la ligne sous 768 px comme celles des lexiques (lexique-index-template.php) au lieu d'être coupées par « … » */
@media (max-width: 767.98px) { .email-library-page .lex-section-head .lex-section-intro { white-space: normal; overflow: visible; text-overflow: clip; } }
/* Tâche 46 (WCAG 1.4.10) : un titre dont un mot est plus long que la colonne (composés allemands des pages Terra Wortmann, 396 px sur 320) se coupe au lieu de déborder ; sans effet quand le titre tient */
h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; }