/* ==========================================================================
   BPBF v5.5.c — Correctifs issus de la recette V5.1
   Source : BPBF-recette-v5.1.pptx — chaque regle porte le numero du
   commentaire d'origine.

   Cette feuille est chargee APRES site.css et la surcharge sans la modifier :
   chaque correctif reste isolable, verifiable et reversible.

   @package BPBF_Portal
   @author iventIT
   @copyright 2026 iventIT
   @license Proprietary
   @version 5.5.c
   ========================================================================== */

/* --- Commentaire 46 : « Gardez le head fixe même quand on déroule la page ».
   Le header devient collant et se compacte au defilement pour ne pas manger
   la hauteur utile. Le script bascule deja .compact au-dela de 80px. */
.site-header { position: sticky; top: 0; box-shadow: 0 1px 0 rgba(6,47,111,.06); }
.site-header, .brandbar-inner, .brand img, .utility-nav { transition: height .22s ease, width .22s ease, max-height .22s ease, opacity .18s ease; }
.site-header.compact { box-shadow: 0 6px 22px rgba(6,47,111,.13); }
.site-header.compact .brandbar-inner { height: 78px; }
.site-header.compact .brand img { width: 154px; max-height: 54px; }
.site-header.compact .utility-nav { max-height: 0; opacity: 0; overflow: hidden; pointer-events: none; }
.site-header.compact .contextbar .context-item { padding-top: 9px; padding-bottom: 9px; }
.site-header.compact .context-item small { display: none; }
@media (prefers-reduced-motion: reduce) {
  .site-header, .brandbar-inner, .brand img, .utility-nav { transition: none; }
}

/* --- Commentaires 1, 24 et 35 : onglet actif.
   « L'onglet ici doit être actif, fond blanc, distinguer des autres onglets »
   « Mettre la barre de sélection soulignée orange là en haut. Utilisez la
     même couleur que le fond. Une continuité »
   L'onglet actif prend le fond blanc de la barre de marque situee juste en
   dessous : la continuite visuelle est retablie, l'onglet se lit comme un
   prolongement de la page. Le souligne orange marque la selection. */
.top-nav a { padding: 0 13px; border-radius: 9px 9px 0 0; }
/* Retour de revue du 28/07 : « les couleurs que tu as mises au niveau des
   univers métier, tu peux les répercuter en fond de l'univers choisi au lieu
   du blanc ». La variable --tab porte la couleur de chaque univers, posée
   par le gabarit depuis data/settings.json. */
.top-nav a.active { background: var(--tab, var(--blue)); color: #fff; border-bottom: 0; box-shadow: 0 -2px 10px rgba(0,38,87,.10); }
.top-nav a.active::after { height: 4px; background: var(--yellow); border-radius: 4px 4px 0 0; left: 8px; right: 8px; bottom: -1px; }
.top-nav a:not(.active):hover { background: rgba(255,255,255,.42); border-radius: 9px 9px 0 0; }

/* Retour de revue du 28/07 : « j'aimerais que la bande reste sur une ligne.
   S'il faut diminuer les espaces entre les libellés des univers métier, il
   faut le faire. Mais on reste sur une ligne. »
   Aucun retour à la ligne n'est autorisé : les libellés se resserrent, les
   outils de droite ne se compriment pas. */
.topbar-inner { flex-wrap: nowrap; gap: 8px; }
/* La navigation absorbe la place restante et se comprime ; les outils de
   droite gardent leur largeur, ce qui interdit tout chevauchement. */
.top-nav { flex: 0 1 auto; min-width: 0; flex-wrap: nowrap; gap: 0; padding-right: 9px; }
/* Les libellés ne se compriment jamais : un intitulé d'univers tronqué serait
   pire qu'un intitulé serré. La place se gagne sur les marges et la taille,
   par paliers, jamais sur le texte lui-même. */
.top-nav a { flex: 0 0 auto; white-space: nowrap; }
.top-nav a span { overflow: visible; text-overflow: clip; white-space: nowrap; }
.top-tools { flex: 0 0 auto; flex-wrap: nowrap; }
/* La barre du haut exploite une gouttière plus étroite que le reste du site :
   c'est de la place gagnée à gauche et à droite avant de toucher au texte. */
.topbar .shell { width: min(1560px, 98%); }

/* Retour de revue du 28/07 : « tu gagnerais de la place en déplaçant les blocs
   langues et réseaux sociaux un peu plus sur la droite, même s'il faut
   diminuer les tailles et les espaces [...] on ne peut pas qu'on les confonde
   avec les menus univers ».
   Les outils sont poussés au bord, allégés et hiérarchiquement en retrait :
   texte plus petit, graisse moindre, teinte atténuée. Les univers restent le
   seul élément affirmé de la barre. Des filets discrets séparent les groupes. */
/* Revue du 28/07 : le bloc des langues s'était recollé aux univers métier.
   Les trois groupes d'outils se resserrent entre eux et l'ensemble se
   décolle nettement de la navigation. */
.top-tools { margin-right: -6px; font-size: 12px; gap: 0; }
.top-tools .top-group { display: flex; align-items: center; gap: 6px; padding: 0 7px; position: relative; }
.top-tools .language-main { padding-left: 26px; }
.top-tools .top-group + .top-group::before {
  content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 1px; height: 15px; background: rgba(6,47,111,.22);
}
.top-tools .top-group:last-child { padding-right: 0; }

.top-tools .language-main button { border: 0; background: none; font-family: inherit; font-size: 12px; font-weight: 700; color: rgba(6,47,111,.62); padding: 4px 7px; border-radius: 5px; cursor: pointer; letter-spacing: .02em; }
.top-tools .language-main button.active { background: var(--blue); color: #fff; }

.top-tools .national-langs button { border: 0; background: none; font-family: inherit; font-size: 12px; font-weight: 600; color: rgba(6,47,111,.78); cursor: pointer; white-space: nowrap; }
.top-tools .national-langs button:hover { color: var(--blue); }

.top-tools .social-links { gap: 11px; color: rgba(6,47,111,.55); }
.top-tools .social-links b { font-size: 12px; font-weight: 600; cursor: pointer; }
.top-tools .social-links b:hover { color: var(--blue); }

/* Paliers de resserrement. Dans cet ordre : marges, puis chevrons, puis
   réseaux sociaux, puis taille du texte. Les libellés d'univers restent
   entiers à chaque palier. */
@media (max-width: 1440px) {
  .top-nav a { padding: 0 10px; }
  .topbar-inner { gap: 10px; }
  .top-tools { gap: 16px; }
}
@media (max-width: 1340px) {
  .top-nav a { padding: 0 8px; font-size: 14px; }
  .top-nav a b { display: none; }              /* chevrons retirés avant toute réduction de texte */
  .top-tools { gap: 13px; }
}
@media (max-width: 1220px) {
  .top-tools .social-links { display: none; }  /* réseaux sociaux sacrifiés avant les libellés */
  .top-nav a { padding: 0 7px; }
}
@media (max-width: 1120px) {
  .top-nav a { padding: 0 6px; font-size: 13px; }
  .top-tools .national-langs button { font-size: 12px; }
  .top-nav { padding-right: 10px; }
}

/* --- Commentaires 2, 4 et 5 : respiration et demarcation du header.
   « Pas assez d'espace au bord après les textes et le début des onglets,
     rajouter une marge »
   « Resserrer le menu un peu à gauche pour le séparer visuellement de la
     partie droite »
   « Mettre un trait de séparation ici aussi. Réduire l'espace entre les
     menus métiers » */
.topbar-inner { gap: 28px; padding-inline: 6px; }
.top-nav { gap: 6px; padding-right: 26px; position: relative; }
.top-nav::after { content: ""; position: absolute; right: 0; top: 14px; bottom: 14px; width: 1px; background: rgba(6,47,111,.20); }
.top-tools { gap: 22px; padding-left: 4px; }

/* --- Commentaire 7 : « Le bouton déborde de la zone de la page ».
   Le libelle etait masque sous 1100px, laissant une pastille tronquee qui
   depassait de la grille. Le bouton se contracte proprement et son libelle
   reste lisible tant que la place le permet. */
/* Retour de revue du 28/07 : « diminuer la taille horizontale du bouton
   Espace corporate pour laisser le logo respirer et prendre son envergure
   imposante pour le site ».
   La colonne de marque gagne de la largeur, le bouton se resserre. */
/* Retour de revue du 28/07 : « ramène aussi le bloc Recherche, Agences,
   Rendez-vous, Contact, Documents à côté d'Espace corporate. On ne le
   supprime pas, on le garde, on le resserre à droite. »
   Une colonne souple s'intercale : la marque occupe la gauche, les accès
   rapides et le bouton corporate forment un seul groupe collé à droite. */
.brandbar-inner { grid-template-columns: minmax(210px, 290px) minmax(0, 1fr) auto auto; gap: 16px; }
.brand img { width: 268px; max-height: 92px; }
.utility-nav { justify-content: flex-end; }
.utility-nav a { padding: 0 14px; }
.utility-nav a:last-child { border-right: 1px solid var(--line); padding-right: 16px; }
.utility-nav strong { font-size: 12.5px; }
.utility-nav small { font-size: 9.5px; }
@media (max-width: 1400px) {
  .utility-nav a { padding: 0 10px; }
  .utility-nav small { display: none; }
}
@media (max-width: 1180px) {
  .utility-nav a small { display: none; }
  .utility-nav a { padding: 0 8px; }
  .utility-nav a svg { width: 20px; }
}
.corporate-btn { min-width: 0; padding: 12px 15px; max-width: 100%; overflow: hidden; gap: 9px; font-size: 13.5px; }
.corporate-btn span { display: inline; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.corporate-btn svg { width: 18px; }
@media (max-width: 1180px) {
  .corporate-btn { padding: 11px 13px; gap: 7px; font-size: 13px; }
  .brand img { width: 232px; max-height: 84px; }
}
@media (max-width: 980px) {
  .corporate-btn span { display: none; }
  .corporate-btn { padding: 12px; }
}

/* --- Commentaire 47 : debordement du mega menu.
   « Attention au débordement dans le méga menu si le nombre d'items est trop
     long [...] quand on a plus de 7 entrées, c'est mieux de passer à une
     double colonne équilibrée »
   Le seuil est passe de 8 a 7 dans le gabarit ; le tiroir ne peut plus
   deborder de la fenetre et les libelles longs ne poussent plus la grille. */
.mega-link-grid.two-cols { grid-template-columns: 1fr 1fr; align-content: start; }

/* Revue du 28/07 : « à cause de leur hauteur, un ascenseur apparaît et empêche
   de faire défiler la page ». Le tiroir n'a plus de défilement propre : la
   molette agit toujours sur la page. Sa hauteur s'adapte à la fenêtre et son
   contenu se compacte pour y tenir. */
.mega-drawer.open { max-height: min(610px, calc(100vh - 150px)); overflow: hidden; }
.mega-drawer-inner { max-width: 100%; padding: 20px 0 22px; }
.mega-list-zone { min-width: 0; }
.mega-link-grid { gap: 7px; margin-top: 14px; }
.mega-link-grid a { min-width: 0; padding: 10px 14px; font-size: 13px; }
.mega-link-grid a span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.mega-current h2 { font-size: 22px; margin: 6px 0; }
.mega-current p { font-size: 13px; line-height: 1.55; }

/* Le visuel du tiroir touchait presque le bord droit : on lui redonne une
   gouttière et on borne sa hauteur. */
.mega-drawer-inner { padding-right: 26px; }
.mega-side { padding-right: 4px; }
.mega-side-feature img { max-height: 132px; object-fit: cover; }
.mega-side { gap: 12px; }
.mega-complaint { padding: 11px 14px; }
.mega-help { padding-top: 10px; }
.mega-side-feature .caption h3 { font-size: 17px; }
.mega-side-feature .caption p { font-size: 12.5px; }
.mega-help a { font-size: 12.5px; }

.mega-invite { font-size: 13px; line-height: 1.6; color: var(--muted); margin: 10px 0 0; max-width: 34ch; }

/* La mise en double colonne de la liste des besoins a été retirée le 28/07 :
   elle coupait les libellés en plein milieu des mots et dégradait nettement
   la lecture. On revient à la colonne unique de la V5.1, qui conserve son
   propre défilement. Le traitement de cet ascenseur est renvoyé à la refonte
   du mega menu prévue en V6. */

@media (max-height: 780px) {
  .mega-side-feature img { max-height: 120px; }
  .mega-drawer-inner { padding-top: 18px; padding-bottom: 18px; }
}

/* --- Barre contextuelle : suppression du defilement horizontal.
   Sept entrees sur une grille rigide provoquaient une barre de defilement
   horizontale sous 1100px. La grille s'adapte desormais a la largeur. */
/* Revue du 28/07 : l'entrée Accueil sort de la grille des rubriques.
   Traitée comme un élément d'en-tête compact (~110 px au lieu de 160), elle
   ne consomme plus une colonne entière et la barre tient sur une ligne. */
.context-bar-inner { display: flex; align-items: stretch; min-height: 85px; }
.context-home { flex: 0 0 auto; display: flex; align-items: center; gap: 10px; padding: 0 18px 0 4px; margin-right: 14px; position: relative; color: var(--universe); font-weight: 800; font-size: 13px; text-decoration: none; white-space: nowrap; }
.context-home::after { content: ""; position: absolute; right: 0; top: 22px; bottom: 22px; width: 1px; background: rgba(6,47,111,.16); }
.context-home svg { width: 26px; height: 26px; color: var(--universe); flex: none; }
.context-home:hover { background: color-mix(in srgb, var(--universe) 7%, transparent); border-radius: 8px; }
.context-home.current { background: color-mix(in srgb, var(--universe) 12%, #fff); box-shadow: inset 0 4px 0 var(--universe); }
.context-bar-inner .context-grid { flex: 1 1 auto; min-width: 0; }

/* L'onglet Accueil de la barre du haut ne porte plus que son icône. */
.top-nav a.nav-accueil { padding: 0 12px; }
.top-nav a.nav-accueil svg { width: 19px; height: 19px; }

.context-grid { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); overflow: visible; }
.context-item { padding-inline: 14px; min-width: 0; }
.context-item span { min-width: 0; }
.context-item strong { overflow-wrap: anywhere; }

/* --- Commentaire 29 : identite chromatique des univers (ARB-008).
   « Rajouter un sous-titre qui rappelle qu'on est dans l'univers Particuliers
     [...] et utiliser une couleur bleue dans différents tons pour faire la
     différence entre les univers. Ce ton de bleu nuancé peut être utilisé en
     fond de l'onglet actif, dans le menu secondaire et dans le menu principal »
   Applique en marquage sobre : filet superieur et teinte legere sur l'item
   actif de la barre contextuelle. La variable --universe est injectee depuis
   data/settings.json, elle n'est pas codee en dur. */
.context-item.active,
.context-item[aria-expanded="true"] { background: color-mix(in srgb, var(--universe) 8%, #fff); box-shadow: inset 0 3px 0 var(--universe); }
.context-item.active strong { color: var(--universe); }

/* Rubrique courante — retour de revue du 28/07.
   Posée par le serveur d'après la lignée de la page consultée, elle survit à
   la fermeture du mega menu, contrairement à l'état de survol. Le marquage est
   plus affirmé que le survol : le visiteur sait en permanence où il se trouve. */
/* Entrée « Accueil » de l'univers — revue du 28/07. Icône maison portant la
   couleur de l'univers, sélectionnée par défaut sur la page d'atterrissage. */
.context-home { text-decoration: none; }
.context-home svg { color: var(--universe); }
.context-home strong { color: var(--universe); }

.context-item.current { background: color-mix(in srgb, var(--universe) 12%, #fff); box-shadow: inset 0 4px 0 var(--universe); }
.context-item.current strong { color: var(--universe); }
.context-item.current small { color: color-mix(in srgb, var(--universe) 70%, #4a5b72); }

.universe-badge { display: inline-flex; align-items: center; gap: 9px; padding: 7px 15px; border-radius: 999px; background: color-mix(in srgb, var(--universe) 12%, #fff); color: var(--universe); font-weight: 800; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; }
.universe-badge b { width: 9px; height: 9px; border-radius: 50%; background: var(--universe); }

/* --- Commentaires 12, 13, 14 et 25 : pied de page.
   « Mettre un fond jaune comme celui du top bar »
   « Un ton jaune un peu plus foncé que celui du top bar »
   « Insérer la barre à sa place, entre la partie jaune et la section où il y
     a le logo du pied de page, un orange plus foncé »
   « Mettre en bleu pour que ce soit visible d'un coup, comme le site contient
     déjà des couleurs jaunes on ne voit pas du premier coup »
   Le degrade est remplace par un aplat derive du jaune de la top bar (#f6df79)
   puis assombri, un filet orange marque la separation avec la bande iventIT,
   et les intitules de colonnes passent en bleu pour ressortir. */
/* --- ARB-005 tranché en revue le 28/07 : « pour l'élément qui doit passer en
   bleu dans le pied de page, il n'y en a aucun. En fait c'était le bouton
   Besoin d'aide, le bouton flottant. C'est le commentaire qui avait bougé. »
   La page étant très jaune, le bleu rend le bouton immédiatement repérable. */
.support-fab { background: var(--blue); color: #fff; box-shadow: 0 16px 38px rgba(6,47,111,.34); }
.support-fab svg { color: var(--yellow); }
.support-fab:hover { background: #0a4189; }
.support-fab:focus-visible { outline: 3px solid var(--yellow); outline-offset: 3px; }

/* Pied de page repris sur la maquette cible fournie le 28/07 : aplat crème,
   quatre colonnes, carte d'accompagnement à droite, puis barre légale sur un
   ton plus soutenu, enfin la bande de signature iventIT. */
.main-footer { background: #fdf0c8; border-top: 1px solid rgba(6,47,111,.08); padding: 46px 0 40px; }
.main-footer .footer-grid { grid-template-columns: 1.35fr 1fr 1fr 1fr 1.25fr; gap: 38px; align-items: start; }
.main-footer h3 { color: var(--blue); font-weight: 900; font-size: 15px; margin: 0 0 16px; }
.main-footer a { color: #17324f; font-size: 13.5px; margin: 11px 0; }
.main-footer a:hover { color: var(--blue); text-decoration: underline; }
.main-footer .footer-brand p, .main-footer p { color: #2a3a4c; line-height: 1.75; }
.main-footer .footer-brand img { width: 208px; margin-bottom: 6px; }
.main-footer .socials { margin-top: 16px; color: #2a3a4c; letter-spacing: .18em; }

/* Colonne newsletter — alignée sur les autres colonnes, sans carte flottante :
   le pied de page forme un bloc d'un seul tenant. */
.footer-newsletter p { margin: 0 0 14px; font-size: 13.5px; max-width: 34ch; }
.footer-newsletter .newsletter { display: flex; max-width: 300px; border-radius: 8px; overflow: hidden; box-shadow: 0 3px 10px rgba(7,32,70,.08); }
.footer-newsletter .newsletter input { min-width: 0; width: 100%; padding: 12px 13px; border: 1px solid #e4d6a4; border-right: 0; font-family: inherit; font-size: 13.5px; }
.footer-newsletter .newsletter input:focus { outline: 0; border-color: var(--blue); }
.footer-newsletter .newsletter button { border: 0; background: var(--blue); color: #fff; width: 48px; font-size: 17px; cursor: pointer; flex: none; }
.footer-newsletter .newsletter button:hover { background: #0a4189; }
.newsletter-note { display: block; margin-top: 9px; font-size: 11.5px; color: #6a6142; }
.footer-cta-link { display: inline-block; margin-top: 14px; font-weight: 800; color: var(--blue); text-decoration: underline; font-size: 13.5px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.legalbar { background: #e0a80c; }
.legalbar .shell { display: flex; align-items: center; justify-content: space-between; gap: 22px; flex-wrap: wrap; padding: 15px 0; }
.legalbar p { margin: 0; font-size: 13px; color: #2b2200; font-weight: 600; }
.legalbar nav { display: flex; gap: 20px; flex-wrap: wrap; align-items: center; }
.legalbar a, .legalbar button { font-size: 13px; color: #2b2200; font-weight: 600; background: none; border: 0; cursor: pointer; font-family: inherit; padding: 0; }
.legalbar a:hover, .legalbar button:hover { text-decoration: underline; }

/* Bande de signature iventIT — retirée intégralement à la livraison. */
.subfooter.production { border-top: 0; }
.subfooter.production .shell { grid-template-columns: 150px 1fr; align-items: center; }
.subfooter.production strong { font-size: 14px; letter-spacing: .04em; display: block; margin-bottom: 5px; }
.subfooter.production p { font-size: 12px; line-height: 1.6; margin: 0; }

@media (max-width: 1050px) {
  .main-footer .footer-grid { grid-template-columns: 1fr 1fr; gap: 30px; }
}
@media (max-width: 640px) {
  .main-footer .footer-grid { grid-template-columns: 1fr; }
  .legalbar .shell { justify-content: flex-start; }
}

/* --- Bloc FAQ contextuel (base BPBF-FAQ-001, 581 questions).
   Guide d'integration : 3 questions maximum, accordeons fermes par defaut,
   bouton « Voir toutes les questions » au-dela. */
.faq-block { margin-top: 26px; }
.faq-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 6px; }
.faq-head h2 { margin: 0; color: var(--blue); }
.faq-count { font-size: 12px; color: var(--muted); font-weight: 700; }
.faq-item { border: 1px solid var(--line); border-radius: 10px; margin-top: 10px; background: #fff; overflow: hidden; }
.faq-item[open] { border-color: color-mix(in srgb, var(--universe) 35%, var(--line)); box-shadow: 0 6px 18px rgba(7,32,70,.06); }
.faq-item summary { list-style: none; cursor: pointer; padding: 15px 18px; display: flex; align-items: center; justify-content: space-between; gap: 14px; font-weight: 700; color: var(--blue); }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; font-size: 22px; line-height: 1; color: var(--universe); flex: none; }
.faq-item[open] summary::after { content: "\2013"; }
.faq-item summary:hover { background: #fbfcfe; }
.faq-answer { padding: 0 18px 17px; line-height: 1.75; }
.faq-answer p { margin: 0; }
.faq-cat { display: inline-block; font-size: 10px; font-weight: 900; letter-spacing: .09em; text-transform: uppercase; color: var(--universe); background: color-mix(in srgb, var(--universe) 10%, #fff); padding: 4px 9px; border-radius: 5px; margin-bottom: 9px; }
.faq-actions { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-top: 16px; }
.faq-actions .aside-link { margin-top: 0; }
.faq-disclaimer { margin-top: 14px; font-size: 12px; color: var(--muted); border-left: 3px solid var(--yellow); padding-left: 12px; line-height: 1.6; }

/* --- Centre d'aide : recherche globale dans la base d'aide.
   Commentaire 48 : « Renvoie vers la page centre d'aide. Appliquer cette
   règle partout. » */
.help-center { padding: 34px 0 60px; }
.help-search { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 26px; box-shadow: var(--shadow); }
.help-search h1 { color: var(--blue); margin: 0 0 6px; font-size: 32px; }
.help-search p.help-sub { color: var(--muted); margin: 0 0 18px; }
.help-search form { display: flex; gap: 12px; flex-wrap: wrap; }
.help-search input[type="search"] { flex: 1 1 320px; min-width: 0; padding: 15px 16px; border: 2px solid var(--line); border-radius: 9px; font-size: 16px; font-family: inherit; }
.help-search input[type="search"]:focus { outline: 0; border-color: var(--universe); }
.help-stats { display: flex; gap: 26px; flex-wrap: wrap; margin-top: 16px; font-size: 12px; color: var(--muted); font-weight: 700; }
.help-results { margin-top: 26px; display: grid; gap: 12px; }
.help-result { border: 1px solid var(--line); border-radius: 11px; padding: 18px 20px; background: #fff; }
.help-result h3 { margin: 0 0 8px; color: var(--blue); font-size: 16px; line-height: 1.5; }
.help-result p { margin: 0; line-height: 1.72; }
.help-result footer { margin-top: 12px; display: flex; gap: 14px; flex-wrap: wrap; align-items: center; font-size: 12px; }
.help-result .faq-cat { margin: 0; }
.help-empty { border: 1px dashed var(--line); border-radius: 11px; padding: 28px; text-align: center; color: var(--muted); }
.help-empty strong { display: block; color: var(--blue); margin-bottom: 8px; font-size: 16px; }

/* --- Assistant contextuel : chat textuel (commentaires 16, 17 et 18).
   Remplace le panneau a boutons par une conversation. */
/* Retour de revue du 28/07 : « il ouvre une deuxième frame dans la frame
   principale, ça fait une double navigation verticale ». Le panneau possède
   déjà son propre défilement : le journal n'en a plus. Une seule barre. */
.chat-demo { display: flex; flex-direction: column; min-height: 0; }
.chat-log { display: flex; flex-direction: column; gap: 12px; overflow: visible; max-height: none; padding: 4px 2px 12px; }
/* L'en-tête reste visible pendant la lecture d'une longue réponse. */
.support-panel header { position: sticky; top: 0; z-index: 2; }
.chat-msg { max-width: 92%; padding: 12px 14px; border-radius: 13px; line-height: 1.62; font-size: 14px; }
.chat-msg.bot { background: #f3f6fb; color: var(--ink); border-bottom-left-radius: 4px; align-self: flex-start; }
.chat-msg.user { background: var(--universe); color: #fff; border-bottom-right-radius: 4px; align-self: flex-end; }
.chat-msg .chat-cat { display: inline-block; font-size: 10px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; color: var(--universe); margin-bottom: 6px; }
.chat-msg .chat-source { display: block; margin-top: 8px; font-size: 11px; color: var(--muted); }
.chat-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 11px; }
.chat-actions a { font-size: 12px; font-weight: 700; padding: 8px 13px; border-radius: 999px; border: 1px solid var(--line); color: var(--blue); background: #fff; }
.chat-actions a:hover { border-color: var(--universe); color: var(--universe); }
.chat-typing { font-size: 12px; color: var(--muted); font-style: italic; }
.chat-disclaimer { font-size: 11px; color: var(--muted); line-height: 1.55; margin: 10px 0 0; }
.whatsapp-cta { display: flex; align-items: center; gap: 11px; margin-top: 12px; padding: 13px 15px; border-radius: 11px; background: #e8f6ec; border: 1px solid #bfe5c9; color: #14532d; font-weight: 700; font-size: 13px; }
.whatsapp-cta small { display: block; font-weight: 500; color: #3f6b4c; margin-top: 2px; }

/* --- Reference de suivi des formulaires.
   Diapositive 2 : « Pour chaque formulaire qu'on envoie, on garde les
   numéros et on va l'exploiter pour faire le suivi. Si un client appelle
   pour faire le suivi, il va donner ce numéro. » */
.tracking-ref { margin: 18px 0; padding: 20px 22px; border-radius: 12px; background: color-mix(in srgb, var(--universe) 6%, #fff); border: 1px solid color-mix(in srgb, var(--universe) 24%, var(--line)); }
.tracking-ref span.tracking-label { display: block; font-size: 11px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; color: var(--universe); }
.tracking-ref .tracking-code { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 9px 0 4px; }
.tracking-ref code { font-family: "Consolas", "SF Mono", ui-monospace, monospace; font-size: 22px; font-weight: 700; letter-spacing: .06em; color: var(--blue); background: #fff; border: 1px dashed color-mix(in srgb, var(--universe) 40%, var(--line)); padding: 9px 15px; border-radius: 8px; }
.tracking-ref button.copy-ref { border: 1px solid var(--line); background: #fff; border-radius: 7px; padding: 9px 14px; font-weight: 700; font-size: 12px; cursor: pointer; color: var(--blue); font-family: inherit; }
.tracking-ref button.copy-ref:hover { border-color: var(--universe); color: var(--universe); }
.tracking-ref p { margin: 8px 0 0; font-size: 13px; line-height: 1.65; color: #33445c; }

/* --- Filigrane de validation applique aux visuels de demonstration.
   Diapositive 2 : « Toutes les images d'illustration doivent porter un
   watermark, un filigrane avec le logo de iventIT légèrement dessus en bas
   à droite, pour que les productions soient validées. » */
.media-watermarked { position: relative; }
.media-watermarked::after { content: ""; position: absolute; right: 10px; bottom: 10px; width: 74px; height: 26px; background: var(--watermark) center right / contain no-repeat; opacity: .5; pointer-events: none; }

/* --- Resumes multilingues des six pages principales (commentaire 18).
   Texte, audio, video sous-titree en francais, moore, dioula et fufulde.
   Aucun media ne demarre automatiquement. */
/* Retour de revue du 28/07 : « garder cette organisation, plus courte en
   termes d'espace ; la hauteur est meilleure ». La mise en forme compacte
   de la V5.1 est conservée telle quelle — seules les actions changent de
   comportement. Aucun lecteur n'est rendu dans le flux de la page. */
.media-summary .summary-actions button[disabled] { opacity: .42; cursor: not-allowed; }
.media-missing { margin: 9px 0 0; font-size: 12px; color: var(--muted); font-style: italic; }

/* ==========================================================================
   Modules intercalaires — commentaires 41, 43, 44 et 49, revue du 28/07.
   Les deux blocs de la vue V6 sont repris à l'identique et insérés entre
   « Nos univers métier » et « Nos produits & services ».
   ========================================================================== */

/* --- Zone de publicité mise en avant (ARB-009). Visuel à gauche, message à
   droite sur un aplat crème. Aucune animation intrusive. */
.module-campagne { display: grid; grid-template-columns: minmax(0, 42%) minmax(0, 1fr); align-items: stretch; border-radius: 14px; overflow: hidden; margin: 34px auto; background: #fdf3d3; box-shadow: 0 10px 30px rgba(7,32,70,.07); }
.campagne-visuel { margin: 0; min-height: 100%; }
.campagne-visuel img { width: 100%; height: 100%; min-height: 260px; object-fit: cover; display: block; }
.campagne-corps { padding: 34px 38px; display: flex; flex-direction: column; justify-content: center; gap: 4px; }
.campagne-corps .eyebrow { color: #c68000; }
.campagne-corps h2 { margin: 8px 0 12px; color: var(--blue); font-size: 30px; line-height: 1.2; }
.campagne-corps p { margin: 0; line-height: 1.7; max-width: 56ch; }
.campagne-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }
.campagne-note { margin: 14px 0 0; font-size: 12px; color: #7a6a45; }

/* Bouton bleu, décliné de la charte pour les actions principales des modules. */
.btn.blue { background: var(--blue); color: #fff; }
.btn.blue:hover { background: #0a4189; }

/* --- Bande d'orientation avant contact. */
.module-preparer { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 30px; border-radius: 14px; background: #fdf3d3; padding: 26px 32px; margin: 26px auto 34px; }
.preparer-texte .eyebrow { color: #c68000; }
.preparer-texte h2 { margin: 8px 0 10px; color: var(--blue); font-size: 24px; line-height: 1.25; }
.preparer-texte p { margin: 0; line-height: 1.7; max-width: 62ch; font-size: 14px; }
.preparer-actions { display: flex; flex-wrap: wrap; gap: 12px; }

@media (max-width: 900px) {
  .module-campagne { grid-template-columns: 1fr; }
  .campagne-visuel img { min-height: 200px; }
  .campagne-corps { padding: 26px 22px; }
  .campagne-corps h2 { font-size: 25px; }
  .module-preparer { grid-template-columns: 1fr; gap: 20px; padding: 24px 22px; }
}

/* ==========================================================================
   Pop-up de recherche globale — revue du 28/07.
   La loupe ouvre une fenêtre de saisie qui interroge tout le site : les 192
   pages et les 581 réponses de la base d'aide.
   ========================================================================== */
.search-modal { position: fixed; inset: 0; z-index: 320; display: none; }
.search-modal.open { display: block; }
.search-veil { position: absolute; inset: 0; background: rgba(3,20,45,.68); backdrop-filter: blur(2px); }
.search-box { position: relative; width: min(760px, calc(100vw - 32px)); margin: 8vh auto 0; background: #fff; border-radius: 16px; box-shadow: 0 34px 90px rgba(0,20,50,.45); overflow: hidden; display: flex; flex-direction: column; max-height: 82vh; }

.search-field { display: flex; align-items: center; gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--line); flex: none; }
.search-field svg { width: 22px; color: var(--blue); flex: none; }
.search-field input { flex: 1; min-width: 0; border: 0; outline: 0; font-family: inherit; font-size: 17px; color: var(--ink); padding: 6px 0; background: none; }
.search-field input::placeholder { color: #93a0b3; }
.search-clear { border: 0; background: #eef1f6; color: var(--blue); width: 26px; height: 26px; border-radius: 50%; font-size: 17px; line-height: 1; cursor: pointer; flex: none; }
.search-close { border: 1px solid var(--line); background: #fff; color: var(--muted); border-radius: 6px; padding: 5px 9px; font-size: 11px; font-weight: 700; font-family: inherit; cursor: pointer; flex: none; }
.search-close:hover { color: var(--blue); border-color: var(--blue); }

.search-body { overflow-y: auto; padding: 8px 0 4px; }
.search-section { padding: 10px 18px 4px; }
.search-section h3 { display: flex; align-items: center; gap: 9px; margin: 0 0 8px; font-size: 11px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.search-tally { background: #eef1f6; color: var(--blue); border-radius: 999px; padding: 2px 8px; font-size: 10px; letter-spacing: 0; }

.search-hit { display: block; padding: 11px 13px; border-radius: 10px; text-decoration: none; }
.search-hit:hover, .search-hit:focus-visible { background: #f4f7fc; outline: 0; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--blue) 22%, transparent); }
.search-hit strong { display: block; color: var(--blue); font-size: 15px; line-height: 1.45; }
.search-hit mark { background: #ffeaa0; color: inherit; padding: 0 1px; border-radius: 2px; }
.search-path { display: block; font-size: 11px; color: var(--muted); margin-bottom: 3px; }
.search-extract { display: block; font-size: 13px; color: #4c5a6d; line-height: 1.55; margin-top: 4px; }
.search-tag { display: inline-block; font-size: 10px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; color: var(--universe); background: color-mix(in srgb, var(--universe) 10%, #fff); padding: 3px 8px; border-radius: 5px; margin-bottom: 6px; }

.search-chips { display: flex; flex-wrap: wrap; gap: 9px; padding: 4px 0 10px; }
.search-chips a { border: 1px solid var(--line); border-radius: 999px; padding: 9px 15px; font-size: 13px; font-weight: 700; color: var(--blue); text-decoration: none; }
.search-chips a:hover { border-color: var(--blue); background: #f4f7fc; }

.search-empty { padding: 30px 22px; text-align: center; }
.search-empty strong { display: block; color: var(--blue); font-size: 16px; margin-bottom: 7px; }
.search-empty p { margin: 0 0 14px; color: var(--muted); font-size: 14px; }
.search-empty .search-chips { justify-content: center; }

.search-all { display: block; padding: 13px 18px; text-align: center; font-weight: 800; font-size: 13px; color: var(--blue); text-decoration: none; }
.search-all:hover { text-decoration: underline; }

.search-foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 12px 18px; background: #f6f8fb; border-top: 1px solid var(--line); font-size: 12px; color: var(--muted); flex: none; }
.search-foot a { color: var(--blue); font-weight: 800; text-decoration: none; }
.search-foot a:hover { text-decoration: underline; }

@media (max-width: 640px) {
  .search-box { margin-top: 0; max-height: 100vh; height: 100vh; border-radius: 0; width: 100vw; }
  .search-close { display: none; }
}

/* --- Modale : « quand on clique sur vidéo et Lire la transcription, on
   ouvre un pop-up, pour ne pas agrandir la zone d'affichage sur le site ». */
body.modal-ouverte { overflow: hidden; }
.media-modal { position: fixed; inset: 0; z-index: 300; display: grid; place-items: center; padding: 4vh 16px; }
.media-modal[hidden] { display: none; }
.media-modal-backdrop { position: absolute; inset: 0; background: rgba(3,20,45,.72); }
.media-modal-box { position: relative; width: min(860px, 100%); max-height: 92vh; overflow-y: auto; background: #fff; border-radius: 15px; box-shadow: 0 30px 80px rgba(0,20,50,.42); }
.media-modal-box header { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; padding: 22px 24px 14px; border-bottom: 1px solid var(--line); position: sticky; top: 0; background: #fff; border-radius: 15px 15px 0 0; }
.media-modal-box h2 { margin: 0; font-size: 18px; color: var(--blue); line-height: 1.45; }
.media-modal-close { border: 0; background: none; font-size: 30px; line-height: 1; color: var(--blue); cursor: pointer; padding: 0 4px; flex: none; }
.media-modal-close:hover { color: var(--universe); }
.media-modal-body { padding: 20px 24px; }
.media-modal-body video { width: 100%; max-height: 62vh; border-radius: 11px; background: #04101f; display: block; }
.media-transcription { margin: 0; line-height: 1.85; font-size: 16px; }
.media-modal-note { margin: 0; padding: 12px 24px 20px; font-size: 11px; font-weight: 800; letter-spacing: .05em; color: #8a5a00; }

/* --- Miniature audio persistante : « on laisse une miniature audio qui se
   déclenche pour permettre à la personne de scroller sur le site sans avoir
   à être dépendante d'un pop-up ». */
.audio-mini { position: fixed; left: 18px; bottom: 20px; z-index: 190; display: none; align-items: center; gap: 13px; background: #fff; border: 1px solid var(--line); border-left: 5px solid var(--universe); border-radius: 12px; padding: 11px 14px; box-shadow: 0 16px 40px rgba(0,30,70,.24); max-width: min(430px, calc(100vw - 36px)); }
.audio-mini.ouvert { display: flex; }
.audio-mini-txt { min-width: 0; }
.audio-mini-txt strong { display: block; font-size: 13px; color: var(--blue); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.audio-mini-txt small { display: block; font-size: 11px; color: var(--muted); margin-top: 2px; }
.audio-mini audio { height: 34px; max-width: 210px; }
.audio-mini-close { border: 0; background: none; font-size: 22px; line-height: 1; color: var(--muted); cursor: pointer; flex: none; }
.audio-mini-close:hover { color: var(--blue); }
@media (max-width: 700px) {
  .audio-mini { left: 12px; right: 12px; bottom: 12px; max-width: none; }
  .audio-mini audio { flex: 1; max-width: none; }
}