/* Charte 2026 de bsoft.fr : apparence de www.bienvenue-event.com, accent rose du logo Bsoft.
   Chargée après mise-en-page.css (mise en page héritée de l'export) sur toutes les pages. Source : site-bsoft/docs/mise-a-jour-2026/habillage.md */

@font-face {
  font-family: "Figtree";
  src: url("fonts/figtree-v2.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Source Serif 4";
  src: url("fonts/source-serif-4-600-v2.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

:root {
  --marine: #0e2853;
  --teinte: #f1f3f6;
  --rose-charte: #e6487a;
  --rose-bouton: #cf3466;
  --rose-bouton-survol: #b82d5a;
  --rose-lien: #c42e5f;
  --marine-70: color-mix(in srgb, var(--marine) 70%, transparent);
  --marine-60: color-mix(in srgb, var(--marine) 60%, transparent);
  --sur-marine-70: color-mix(in srgb, var(--sur-marine) 70%, transparent);
  --filet: color-mix(in srgb, var(--marine) 10%, transparent);       /* séparateurs (E12) */
  --ombre-carte: none;                                                /* cartes d'information : sans ombre (E11) */
  --police-texte: "Figtree", system-ui, sans-serif;
  --police-titre: "Source Serif 4", Georgia, serif;

  /* Palette globale de la mise en page héritée : fond clair, accent, bandeau, pied de page, texte */
  --palette-2: #f1f3f6; --palette-2-h: 216; --palette-2-s: 22%; --palette-2-l: 95%;
  --palette-4: #cf3466; --palette-4-h: 341; --palette-4-s: 62%; --palette-4-l: 51%;
  --palette-5: #0e2853; --palette-5-h: 217; --palette-5-s: 71%; --palette-5-l: 19%;
  --palette-6: #0e2853; --palette-6-h: 217; --palette-6-s: 71%; --palette-6-l: 19%;
  --palette-7: #0e2853; --palette-7-h: 217; --palette-7-s: 71%; --palette-7-l: 19%;
  /* Violet de Bienvenue Formation : structure en marine, dégradés vers le rose */
  --palette-perso-3: #0e2853; --palette-perso-3-h: 217; --palette-perso-3-s: 71%; --palette-perso-3-l: 19%;
  --palette-perso-8: #c42e5f; --palette-perso-8-h: 340; --palette-perso-8-s: 62%; --palette-perso-8-l: 47%;

  --typo-1-police: var(--police-texte);
  --typo-2-police: var(--police-texte);
  --typo-3-police: var(--police-texte);
  --typo-4-police: var(--police-texte);
  --typo-5-police: var(--police-texte);
  --typo-perso-1-police: var(--police-texte);
  --typo-perso-2-police: var(--police-texte);
  --typo-perso-3-police: var(--police-texte);
  --typo-perso-4-police: var(--police-texte);
  --typo-perso-5-police: var(--police-texte);

  /* Rôles des couleurs (audit A9) : valeurs actuelles, alignées sur bienvenue-event.com par les lots suivants */
  --blanc: #fff;
  --sur-marine: #fff;                                   /* texte, contour et pictogramme sur marine ou sur rose */
  --sur-marine-discret: rgb(255 255 255 / 85%);         /* introduction des sections marine */
  --sur-marine-pied: rgb(255 255 255 / 78%);            /* liens du pied de page et du menu mobile */
  --rose-sur-marine: #f7a1bb;                           /* « depuis 2010 » sur la vidéo : 3:1 au moins sur ses images les plus claires */
  --texte-inactif: #6b7590;                             /* modules inactifs */
  --filet-sur-marine: rgb(255 255 255 / 15%);
  --filet-pilule: rgb(255 255 255 / 10%);               /* bord de l'en-tête en pilule */
  --fond-survol-discret: rgb(255 255 255 / 10%);        /* survol du bouton du menu et des réseaux */
  /* Boutons sur marine, valeurs de bienvenue-event.com (E15) */
  --fond-secondaire-marine: rgb(255 255 255 / 6%);
  --fond-survol-marine: rgb(255 255 255 / 10%);         /* survol des boutons secondaires sur marine */
  --bord-secondaire-marine: rgb(255 255 255 / 60%);     /* contour des boutons secondaires sur marine */
  --bord-secondaire-marine-survol: rgb(255 255 255 / 80%);
  --fond-bouton-clair-survol: rgb(255 255 255 / 95%);   /* survol du bouton blanc sur marine */
  --bord-pause: rgb(255 255 255 / 70%);
  --voile-video: rgb(26 74 143 / 84%);                  /* aplat plus clair que la barre marine (retours du 29/10/2026) */
  --voile-pause: rgb(14 40 83 / 55%);
  --voile-pause-survol: rgb(14 40 83 / 85%);
  --ombre-entete: 0 8px 32px -8px rgb(0 0 0 / 25%);
  --ombre-entete-mobile: 0 4px 16px -4px rgb(0 0 0 / 20%);
  --ombre-image: 0 18px 40px -24px rgb(0 0 0 / 50%);

  /* Rythme et texte de bienvenue-event.com (sections : 48, 64, 80 px) */
  --section-y: 48px;
  --texte-sous-titre: var(--texte-lg);
  --interligne-item: 1.556;

  /* Cartes, rayons et ombres de bienvenue-event.com (E10 à E12, E16) */
  --rayon-carte: 16px;
  --rayon-icone: 8px;
  --rayon-pilule: 999px;
  --bord-carte: color-mix(in srgb, var(--marine) 20%, transparent);
  --ombre-action: 0 1px 3px 0 rgb(0 0 0 / 10%), 0 1px 2px -1px rgb(0 0 0 / 10%);  /* cartes où l'on agit */

  /* Cadre de bienvenue-event.com (max-w-7xl, px-4 sm:px-6) : en-tête, sections et pied de page alignés sur les mêmes
     bords ; les rangées héritées de l'export lisent --largeur-contenu (largeur du contenu, sans les marges) et prennent
     la gouttière à la place de leurs 30 px (marge de #principal, marge négative et retrait des conteneurs) */
  --largeur-cadre: 1280px;
  --gouttiere: var(--espace-6);
  --largeur-contenu: calc(var(--largeur-cadre) - 2 * var(--gouttiere));
  --defaut-pleine-largeur-retrait: var(--gouttiere);
  --defaut-pleine-largeur-retrait-repli-zero: var(--gouttiere);
  --defaut-pleine-largeur-retrait-pleine-largeur-marge-negative: calc(-1 * var(--gouttiere));
  --defaut-conteneur-retrait-100-gauche: var(--gouttiere);
  --defaut-conteneur-retrait-100-droite: var(--gouttiere);

  /* FAQ et lecture (E19) ; mouvement de bienvenue-event.com (250 ms, courbe de sortie) */
  --largeur-lecture: 768px;
  --texte-item: var(--texte-lg);          /* 18 px, titres d'éléments */
  --interligne-lecture: 1.625;
  --chevron-faq: var(--marine-70); /* 5,6:1 sur blanc ; 42 % donnait 2,5:1, sous le 3:1 d'un indicateur d'état (RGAA 3.3) */
  --chevron-bas: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6l6 -6'/%3E%3C/svg%3E");
  --chevron-droite: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 6l6 6l-6 6'/%3E%3C/svg%3E");
  /* Coche Tabler (trait de 2), masque peint par un jeton de couleur : listes des modules et des cartes produits (E18) */
  --coche: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12l5 5L20 7'/%3E%3C/svg%3E");
  --fleche: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6l-6 6'/%3E%3C/svg%3E");
  --duree-etat: 250ms;
  --courbe-sortie: cubic-bezier(.16, 1, .3, 1);

  /* Échelle typographique de bienvenue-event.com, de 375 à 1 280 px de large (E1 à E6) */
  --texte-display: clamp(2rem, 1.275rem + 3.094vw, 3.75rem);      /* 32 → 60 */
  --texte-titre: clamp(1.5rem, 1.189rem + 1.326vw, 2.25rem);      /* 24 → 36 */
  --texte-titre-carte: clamp(1.25rem, .976rem + 1.124vw, 1.875rem); /* 20 → 30 : 1,2 fois sous --texte-titre sur téléphone */
  --texte-titre-page: clamp(2rem, 1.689rem + 1.326vw, 2.75rem);   /* 32 → 44 : H1 des pages de lecture */
  --texte-intro: var(--texte-xl);
  --texte-item-fort: var(--texte-xl);
  --interligne-display: 1.15;
  --interligne-titre: 1.333;
  --approche-titre: -0.02em;
  --approche-texte: -0.025em;
  --defaut-corps-typo-approche: var(--approche-texte);         /* approche du texte de la mise en page héritée */
  --typo-4-approche: var(--approche-texte);
  --typo-5-approche: var(--approche-texte);
  --rose-20: color-mix(in srgb, var(--rose-charte) 20%, transparent);
  /* Bouton secondaire sur clair et haut de page clair de bienvenue-event.com (E14, E23) */
  --rose-bouton-bord: #b82d5a;  /* bord du bouton principal (E29), comme le bord #1269a8 des boutons de BE */
  --bord-secondaire: color-mix(in srgb, var(--marine) 18%, transparent);
  --bord-secondaire-survol: color-mix(in srgb, var(--marine) 30%, transparent);
  --texte-petit: var(--texte-sm);

  /* Échelles (outils/variables_charte.py) : espacements N × 4 px et tailles de texte de bienvenue-event.com (Tailwind) */
  --espace-1: 4px;
  --espace-1-5: 6px;
  --espace-2: 8px;
  --espace-2-5: 10px;
  --espace-3: 12px;
  --espace-3-5: 14px;
  --espace-4: 16px;
  --espace-5: 20px;
  --espace-6: 24px;
  --espace-7: 28px;
  --espace-8: 32px;
  --espace-9: 36px;
  --espace-10: 40px;
  --espace-11: 44px;
  --espace-12: 48px;
  --espace-14: 56px;
  --espace-16: 64px;
  --espace-18: 72px;
  --espace-20: 80px;
  --espace-22: 88px;
  --espace-24: 96px;
  --texte-xs: .75rem;
  --texte-sm: .875rem;
  --texte-base: 1rem;
  --texte-lg: 1.125rem;
  --texte-xl: 1.25rem;
  --texte-2xl: 1.5rem;
  --texte-3xl: 1.875rem;
  --texte-4xl: 2.25rem;
  --duree-rapide: 150ms;
  --duree-courte: 200ms;
  --duree-moyenne: 300ms;
  --cible: 44px;  /* hauteur minimale des cibles tactiles */
  /* Fin des échelles */
}
/* Téléphones : gouttière de 16 px sous 640 px, comme bienvenue-event.com (px-4 sm:px-6) */
@media (max-width: 639px) { :root { --gouttiere: var(--espace-4); } }
/* Rangées de l'export à 10 px des bords (une sur /bienvenue-formation/) et pages sans .principal-pleine-largeur (catégories, contact,
   plan du site : 30 px écrits dans mise-en-page.css) : la gouttière, comme le reste (audit A7) */
#principal .conteneur.rangee-etroite { --retrait-gauche: var(--gouttiere) !important; --retrait-droite: var(--gouttiere) !important; }
html:not(.page-largeur-pourcent) #principal:not(.principal-pleine-largeur) { padding-left: var(--gouttiere); padding-right: var(--gouttiere); }

@media (min-width: 768px) { :root { --section-y: 64px; } }
@media (min-width: 1024px) { :root { --section-y: 80px; } }

/* ---------- Texte et titres ---------- */
body { font-family: var(--police-texte); color: var(--marine); letter-spacing: var(--approche-texte); }
body p, body li, body td { color: inherit; }
h1, h2, h3, h4,
.titre-bloc-texte {
  font-family: var(--police-titre) !important;
  font-weight: 600 !important;
  letter-spacing: var(--approche-titre) !important;
  text-transform: none !important;
  color: var(--marine);
}
/* Échelle de bienvenue-event.com (E2 à E6) : H2 de 24 à 36 px ; titres de section de l'export en h3 de 22 à 30 px ; h3 et
   h4 d'éléments (cartes, listes, FAQ) en Figtree 600 de 18 px, sauf tailles propres à un composant ; le serif reste aux
   H1, H2 et titres de section */
#principal h2:not(.module-titre, .actualite-titre, .plan-titre), #principal .titre-bloc-texte:is(h2, div) { font-size: var(--texte-titre) !important; line-height: var(--interligne-titre) !important; }
#principal h3.titre-bloc-texte { font-size: var(--texte-titre-carte) !important; line-height: 1.2 !important; }
#principal :is(h3, h4):not(.titre-bloc-texte):not(.module-titre) {
  font-family: var(--police-texte) !important; font-weight: 600 !important; letter-spacing: var(--approche-texte) !important;
  font-size: var(--texte-item); line-height: var(--interligne-item);
}
/* Titres des cartes d'actualités : h2 sous le H1 d'une catégorie, h3 sous le H2 de l'accueil, même apparence */
#principal h2.actualite-titre {
  font-family: var(--police-texte) !important; font-weight: 600 !important; letter-spacing: var(--approche-texte) !important;
  font-size: var(--texte-item); line-height: var(--interligne-item);
}
#principal :is(h3.intertitre, .frise h3) { font-size: var(--texte-item-fort) !important; font-weight: 700 !important; line-height: 1.4 !important; }
h1, h2, h3 { text-wrap: balance; }
/* Pas de mot seul en dernière ligne (détecteur Impeccable, « straggler ») : paragraphes et listes, pied compris */
:is(#principal, .pied-bsoft) :is(p, li) { text-wrap: pretty; }
::selection { background: var(--rose-20); color: var(--marine); }
#principal a:not(.bouton-bloc):not(.menu__lien):not(:has(img)) { color: var(--rose-lien); }
#principal a:not(.bouton-bloc):not(:has(img)):hover { color: var(--marine); }

/* Lisibilité : texte courant aligné à gauche, lignes d'environ 75 caractères (34 em ; 72ch donnait 101 à 107
   caractères en Figtree, audit A4) */
#principal .texte-bloc { text-align: left !important; }
#principal .texte-bloc > p,
#principal .texte-bloc > ul,
#principal .texte-bloc > ol { max-width: 34em; margin-left: 0; margin-right: auto; }

/* ---------- En-tête (outils/en_tete.py, charte-2026/entete.js), sur le modèle de bienvenue-event.com ----------
   Barre marine collante. Passé 60 px de défilement (classe « defile ») : sur ordinateur, pilule flottante aux bords du
   contenu (cadre du site ; 76rem sur bienvenue-event.com, dont les sections sont plus étroites), décalée de 8 px par
   translation (le contenu ne bouge pas), ombre et filet blanc à 10 % ; sur mobile, barre pleine largeur avec une ombre
   légère. 250 ms, courbe de sortie, rien si le visiteur demande moins d'animations.
   Menu mobile : panneau marine plein écran sous la barre ; menu d'ordinateur à partir de 64rem (1 024 px), comme
   bienvenue-event.com (palier lg), resserré jusqu'à 1 199 px. */
:root { --entete-hauteur: 74px; --entete-courbe: cubic-bezier(.16, 1, .3, 1); }
/* Ancres : la cible s'arrête 22 px sous l'en-tête (pilule comprise : 74 + 8 px). Marge posée sur les cibles et les
   éléments focalisables du contenu, pas en scroll-padding sur html : avec lui, chaque arrêt de tabulation dans la barre
   collante faisait remonter la page de 453 px (recette qa-a du 28/10/2026). */
#principal, #principal :is([id], a, button, summary, input, select, textarea, [tabindex]) { scroll-margin-top: calc(var(--entete-hauteur) + 22px); }
/* Défilement animé par le navigateur (ancres, sommaires, « Retour en haut ») à la place des scripts de l'export, sauf si
   le visiteur demande moins d'animations. */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

/* Au-dessus du contenu */
.entete-bsoft {
  position: sticky; top: 0; z-index: 10000;
  box-sizing: border-box; width: 100%; max-width: 100%; margin: 0 auto;
  border: 1px solid transparent; background: var(--marine); color: var(--sur-marine);
  font-family: var(--police-texte); font-size: var(--texte-base); line-height: 1.3;
  transition: max-width var(--duree-etat) var(--entete-courbe), translate var(--duree-etat) var(--entete-courbe),
    border-radius var(--duree-etat) var(--entete-courbe), box-shadow var(--duree-etat) var(--entete-courbe), border-color var(--duree-etat) var(--entete-courbe);
}
.entete-bsoft.defile { border-color: var(--filet-pilule); box-shadow: var(--ombre-entete-mobile); }
.entete-cadre {
  box-sizing: border-box; display: flex; align-items: center; gap: var(--espace-3);
  max-width: var(--largeur-cadre); min-height: 72px; margin: 0 auto; padding: var(--espace-3);
}
.entete-bsoft ul { list-style: none; margin: 0; padding: 0; }
.entete-bsoft li { margin: 0; padding: 0; }
/* !important : la décoration des liens de mise-en-page.css (.liens-decores #enveloppe a) passe sinon devant */
.entete-bsoft a { color: var(--sur-marine); text-decoration: none !important; }
.entete-accueil { display: inline-flex; align-items: center; flex: none; }
.entete-logo { display: block; width: auto; height: 44px; max-width: none; }
.entete-icone { display: block; flex: none; width: 20px; height: 20px; }

/* Liens du menu : soulignement rose au survol, au focus et sur la page courante (comme le pied de page) */
.entete-nav a { display: flex; align-items: center; min-height: 48px; padding: 0 var(--espace-3); font-weight: 600; }
.entete-nav a:is(:hover, :focus-visible, [aria-current="page"]) {
  text-decoration: underline !important; text-decoration-color: var(--rose-charte) !important;
  text-decoration-thickness: 2px !important; text-underline-offset: 6px !important;
}

/* Bouton principal : pilule rose de 44 px, comme les boutons du site */
.entete-bsoft .entete-demo {
  box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; flex: none;
  min-height: var(--cible); padding: var(--espace-2-5) var(--espace-6); border-radius: var(--rayon-pilule);
  background: var(--rose-bouton); color: var(--sur-marine); font-size: var(--texte-sm); font-weight: 600; line-height: 1.3; white-space: nowrap;
}
.entete-bsoft .entete-demo:is(:hover, :focus-visible) { background: var(--rose-bouton-survol); }

/* « Connexion » (ordinateur) : chevron Tabler à la place du triangle de texte ; dans la liste blanche, focus rose
   (le contour blanc des fonds marine y était invisible) */
.entete-chevron { width: 16px; height: 16px; transition: rotate var(--duree-courte) var(--entete-courbe); }
.connexion-bsoft[open] .entete-chevron { rotate: 180deg; }
#entete.entete-bsoft .connexion-bsoft > ul a:focus-visible { outline-color: var(--rose-bouton) !important; outline-offset: -2px; }

/* ---------- Mobile et tablette (moins de 64rem) ---------- */
.entete-bouton {
  position: relative; display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 48px; height: 48px; margin: 0 0 0 auto; padding: 0; border: 0; border-radius: var(--rayon-icone);
  background: transparent; color: var(--sur-marine); cursor: pointer;
}
.entete-bouton:hover { background: var(--fond-survol-discret); }
.entete-bouton .entete-icone { position: absolute; width: 28px; height: 28px; transition: opacity var(--duree-courte) var(--entete-courbe), rotate var(--duree-courte) var(--entete-courbe); }
.entete-icone--fermer { opacity: 0; rotate: -90deg; }
.entete-bsoft.ouvert .entete-icone--ouvrir { opacity: 0; rotate: 90deg; }
.entete-bsoft.ouvert .entete-icone--fermer { opacity: 1; rotate: 0deg; }
.entete-menu { display: none; }
.entete-bsoft.ouvert .entete-menu {
  position: fixed; inset: var(--entete-hauteur) 0 0; z-index: 1;
  display: flex; flex-direction: column; gap: var(--espace-4);
  overflow-y: auto; overscroll-behavior: contain;
  padding: var(--espace-2) var(--espace-3) var(--espace-10); background: var(--marine);
}
.entete-bsoft .connexion-bsoft { display: none; }
.entete-mobile { display: flex; flex-direction: column; gap: var(--espace-4); }
.entete-connexion { display: grid; gap: var(--espace-2); }
.entete-bsoft .entete-secondaire {
  display: flex; align-items: center; justify-content: center; min-height: var(--cible); padding: var(--espace-2-5) var(--espace-6); border-radius: var(--rayon-pilule);
  box-shadow: inset 0 0 0 1px var(--bord-secondaire-marine); font-size: var(--texte-sm); font-weight: 500;
}
.entete-bsoft .entete-secondaire:is(:hover, :focus-visible) { background: var(--fond-survol-marine); }
.entete-contact { display: flex; flex-wrap: wrap; gap: 0 var(--espace-6); padding-top: var(--espace-2); border-top: 1px solid var(--filet-sur-marine); }
.entete-bsoft .entete-contact a { display: flex; align-items: center; gap: var(--espace-2-5); min-height: 48px; padding: 0 var(--espace-3); color: var(--sur-marine-pied); font-weight: 500; }
.entete-bsoft .entete-contact a:is(:hover, :focus-visible) { color: var(--sur-marine); }
/* Menu ouvert : page figée, « Retour en haut » et bulle Crisp sous le panneau */
body.entete-ouvert { overflow: hidden !important; }
body.entete-ouvert .lien-haut-de-page { visibility: hidden; }
body.entete-ouvert .crisp-client { position: relative; z-index: 1 !important; }
@media (max-width: 63.99rem) {
  .entete-bsoft .entete-demo { width: 100%; }
}
/* Tablette : boutons du menu limités à 26rem au lieu de toute la largeur de l'écran */
@media (min-width: 40rem) and (max-width: 63.99rem) {
  .entete-bsoft .entete-demo, .entete-mobile { max-width: 26rem; }
}
@media (prefers-reduced-motion: no-preference) {
  .entete-bsoft.ouvert .entete-menu { transition: opacity var(--duree-courte) var(--entete-courbe), translate var(--duree-courte) var(--entete-courbe); }
  @starting-style { .entete-bsoft.ouvert .entete-menu { opacity: 0; translate: 0 -8px; } }
}

/* ---------- Ordinateur (64rem et plus) ---------- */
@media (min-width: 64rem) {
  .entete-cadre { padding: var(--espace-3) var(--espace-6); }
  .entete-bouton, .entete-mobile { display: none; }
  .entete-menu { display: flex; align-items: center; gap: var(--espace-3); flex: 1 1 auto; min-width: 0; }
  .entete-nav { margin: 0 auto; }
  .entete-nav ul { display: flex; }
  .entete-nav a { font-size: 15px; font-weight: 500; white-space: nowrap; }
  .entete-bsoft .connexion-bsoft { display: block; }
  .entete-bsoft.defile {
    max-width: min(var(--largeur-contenu), calc(100% - 2 * var(--gouttiere))); translate: 0 .5rem; border-radius: 9999px;
    box-shadow: var(--ombre-entete);
  }
}
/* Entre 1 024 et 1 199 px : la barre demande 1 125 px. Marges de bienvenue-event.com à cette largeur (liens à 8 px,
   boutons à 14 px), texte du menu à 14 px (comme l'ancien en-tête) et « Demander une démo » : tout tient sur une ligne
   dans la pilule à 1 024 px, barre de défilement de 15 px comprise (24 px de jeu autour du menu) */
@media (min-width: 64rem) and (max-width: 74.99rem) {
  .entete-demo-long { display: none; }
  .entete-demo-court { display: inline; }
  .entete-nav a { padding: 0 var(--espace-2); font-size: var(--texte-sm); }
  .entete-bsoft .connexion-bsoft > summary { padding: var(--espace-2-5) var(--espace-3-5); }
  .entete-bsoft .entete-demo { padding: var(--espace-2-5) var(--espace-3-5); }
}
/* Entre 1 200 et 1 279 px : marges réduites pour que la pilule (largeur du contenu) garde tout sur une ligne */
@media (min-width: 75rem) and (max-width: 79.99rem) {
  .entete-nav a { padding: 0 var(--espace-2); }
  .entete-bsoft .connexion-bsoft > summary { padding: var(--espace-2-5) var(--espace-3-5); }
  .entete-bsoft .entete-demo { padding: var(--espace-2-5) var(--espace-4); }
}
@media (prefers-reduced-motion: reduce) {
  .entete-bsoft, .entete-bsoft * { transition: none !important; }
}

/* « Connexion » : menu déroulant natif vers les deux applications */
.connexion-bsoft { position: relative; font-family: var(--police-texte); }
.connexion-bsoft > summary {
  list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: var(--espace-1-5);
  min-height: var(--cible); padding: var(--espace-2-5) var(--espace-5); border-radius: var(--rayon-pilule);
  color: var(--sur-marine); font-size: var(--texte-sm); font-weight: 500;
  box-shadow: inset 0 0 0 1px var(--bord-secondaire-marine);
}
.connexion-bsoft > summary::-webkit-details-marker { display: none; }
.connexion-bsoft > summary:hover { background: var(--fond-survol-marine); }
.connexion-bsoft > summary:focus-visible { outline: 2px solid var(--sur-marine); outline-offset: 2px; }
.connexion-bsoft > ul {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 1000; min-width: 240px;
  margin: 0; padding: var(--espace-2); list-style: none; background: var(--blanc); border-radius: var(--rayon-carte);
  border: 1px solid var(--filet); box-shadow: 0 18px 40px -12px color-mix(in srgb, var(--marine) 28%, transparent);
}
.connexion-bsoft li a {
  display: flex; align-items: center; min-height: var(--cible); padding: 0 var(--espace-3-5); border-radius: var(--rayon-icone);
  color: var(--marine) !important; font-size: 15px; font-weight: 500; text-decoration: none;
}
.connexion-bsoft li a:hover, .connexion-bsoft li a:focus-visible { background: var(--teinte); }

/* ---------- Boutons : pilule de 44 px, texte de 14 px ---------- */
body .bouton-bloc.bouton-bloc {
  font-family: var(--police-texte) !important;
  font-size: var(--texte-sm) !important;
  font-weight: 600 !important;
  line-height: 1.375 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  min-height: var(--cible);
  padding: var(--espace-2-5) var(--espace-6) !important;
  border-radius: var(--rayon-pilule) !important;
  border: 1px solid var(--rose-bouton-bord) !important;
  transition: background-color var(--duree-rapide) cubic-bezier(.4, 0, .2, 1), border-color var(--duree-rapide) cubic-bezier(.4, 0, .2, 1), color var(--duree-rapide) cubic-bezier(.4, 0, .2, 1) !important;
  box-shadow: none !important;
  background: var(--rose-bouton) !important;
  color: var(--sur-marine) !important;
  display: inline-flex !important; align-items: center; justify-content: center; gap: var(--espace-2);
  text-decoration: none !important;
}
body .bouton-bloc.bouton-bloc:hover,
body .bouton-bloc.bouton-bloc:focus-visible { background: var(--rose-bouton-survol) !important; }
body .bouton-bloc.bouton-bloc .bouton-texte { color: var(--sur-marine) !important; font-size: inherit !important; font-weight: inherit !important; }
/* Espace au-dessus d'un bouton qui suit un texte : 24 px (0 à 48 px avant, selon les marges de l'export : variables en ligne,
   marge basse du dernier paragraphe ou de la liste) ; boutons empilés à 12 px (29/10/2026 : boutons unifiés) */
#principal .colonne-contenu > :has(+ div > .bouton-bloc) { margin-bottom: 0 !important; }
#principal .colonne-contenu > :has(+ div > .bouton-bloc) > :last-child { margin-bottom: 0 !important; }
#principal .colonne-contenu > div:has(> .bouton-bloc):not(:first-child) { margin-top: var(--espace-6) !important; }
/* Icônes des boutons : couleur et taille du texte */
body .bouton-bloc.bouton-bloc i { color: var(--sur-marine) !important; font-size: inherit !important; }

/* Icônes : SVG Tabler en ligne (outils/icones_svg.py) à la place des polices d'icônes de l'export, comme l'en-tête et le pied.
   Même boîte que les glyphes de Font Awesome : 1 em de côté, descendant de 0,125 em sous la ligne de base. */
.icone-bsoft { display: inline-block; font-style: normal; line-height: 1; vertical-align: -0.125em; }
.icone-bsoft > svg { display: block; width: 1em; height: 1em; }
/* Bouton « Retour en haut » : chevron SVG centré, sans le glyphe de police d'icônes que l'export posait en ::before (règles de
   bsoft-static-fixes.css, fondue ici au lot 14 de la consolidation) */
#haut-de-page::before, .lien-haut-de-page::before { content: none !important; }
#haut-de-page { display: flex; justify-content: center; align-items: center; padding-bottom: 5px; }
#haut-de-page i.icone-bsoft { color: var(--defaut-haut-de-page-icone-couleur, var(--blanc)); font-size: 32px; }

/* Sur marine (vidéo, sections et bandeau marine), comme bienvenue-event.com (E15) : bouton principal blanc à texte
   rose (4,84:1), au lieu du rose dont le bord tombait à 3:1 sur la marine */
:is(.section-bsoft--marine, .conteneur.fond-video, #principal .conteneur.fond-marine) .bouton-bloc.bouton-bloc:not([href*="bienvenue.pro"]) {
  background: var(--blanc) !important;
}
:is(.section-bsoft--marine, .conteneur.fond-video, #principal .conteneur.fond-marine) .bouton-bloc.bouton-bloc:not([href*="bienvenue.pro"]) :is(.bouton-texte, i) { color: var(--rose-bouton) !important; }
:is(.section-bsoft--marine, .conteneur.fond-video, #principal .conteneur.fond-marine) .bouton-bloc.bouton-bloc:not([href*="bienvenue.pro"]):is(:hover, :focus-visible) { background: var(--fond-bouton-clair-survol) !important; }
:is(.section-bsoft--marine, .conteneur.fond-video, #principal .conteneur.fond-marine) .bouton-bloc.bouton-bloc:not([href*="bienvenue.pro"]):is(:hover, :focus-visible) :is(.bouton-texte, i) { color: var(--rose-bouton-survol) !important; }

/* Bouton secondaire sur marine : accès aux applications, contour blanc à 60 % */
body .bouton-bloc.bouton-bloc[href*="bienvenue.pro"] {
  background: var(--fond-secondaire-marine) !important;
  border: 1px solid var(--bord-secondaire-marine) !important;
  font-weight: 500 !important;
}
/* Bouton secondaire sur clair, comme bienvenue-event.com (E14) : pilule blanche à bord marine 18 %, texte marine ; au survol,
   fond teinté et bord à 30 %. Mêmes dimensions que le bouton principal (29/10/2026 : boutons unifiés) */
body .bouton-bloc.bouton-bloc.bouton-secondaire { background: var(--blanc) !important; border-color: var(--bord-secondaire) !important; color: var(--marine) !important; font-weight: 500 !important; }
body .bouton-bloc.bouton-bloc.bouton-secondaire .bouton-texte { color: var(--marine) !important; }
body .bouton-bloc.bouton-bloc.bouton-secondaire:is(:hover, :focus-visible) { background: var(--teinte) !important; border-color: var(--bord-secondaire-survol) !important; }
body .bouton-bloc.bouton-bloc[href*="bienvenue.pro"]:is(:hover, :focus-visible) { background: var(--fond-survol-marine) !important; border-color: var(--bord-secondaire-marine-survol) !important; }

/* Focus clavier : rose sur fond clair, blanc sur marine */
a:focus-visible, button:focus-visible { outline: 2px solid var(--rose-bouton) !important; outline-offset: 2px; }
:is(.entete-site, .pied-site, .conteneur.fond-video, .section-bsoft--marine, #principal .conteneur.fond-marine) :is(a, button, summary):focus-visible { outline-color: var(--sur-marine) !important; }

/* Lisibilité des pages longues : sommaire, intertitres ajoutés, étiquettes des cartes de tarifs */
.sommaire { background: var(--teinte); border-radius: 16px; padding: var(--espace-5) var(--espace-6); margin: var(--espace-7) 0; max-width: 34em; }
#principal .sommaire .sommaire-titre { font-family: var(--police-titre); font-weight: 600; font-size: var(--texte-lg); margin: 0 0 var(--espace-2); color: var(--marine); }
.sommaire ol { margin: 0; padding-left: 1.4em; columns: 2; column-gap: var(--espace-8); }
.sommaire li { margin: var(--espace-1) 0; break-inside: avoid; }
@media (max-width: 640px) { .sommaire ol { columns: 1; } }
#principal .intertitre { margin: 1.6em 0 .5em; text-align: left; }
#principal h4.intertitre { font-size: 19px; }
#principal .intertitre-carte {
  font-family: var(--police-texte) !important; font-size: var(--texte-base) !important; font-weight: 600 !important;
  letter-spacing: 0 !important; line-height: 1.4; margin: 1.1em 0 .4em; color: var(--marine);
}

/* ---------- Haut de page à vidéo : voile marine, texte blanc ---------- */
.conteneur.fond-video { position: relative; }
.conteneur.fond-video .conteneur-video::after {
  content: ""; position: absolute; inset: 0; z-index: 2;
  background: var(--voile-video);
}
.conteneur.fond-video .conteneur-voile { display: none !important; }
.conteneur.fond-video > .rangee-cadre { position: relative; z-index: 6; }
.conteneur.fond-video .colonne-contenu { background: transparent !important; background-image: none !important; }
/* Haut de page à vidéo de /bienvenue-formation/ (second audit, formation-1 : texte à 30 px du cadre à 1 440 px, colonne
   pleine largeur plus 30 px sous 1 280 px) : texte et bouton sur le bord du contenu à toutes les largeurs. L'accueil,
   centré, n'est pas concerné. */
.conteneur.fond-video:not(.accueil-haut) > .rangee-cadre { box-sizing: border-box; max-width: var(--largeur-cadre) !important; margin-inline: auto !important; padding-inline: var(--gouttiere) !important; }
.conteneur.fond-video:not(.accueil-haut) > .rangee-cadre > .colonne { margin-inline: 0 !important; padding-inline: 0 !important; }
.conteneur.fond-video:not(.accueil-haut) > .rangee-cadre > .colonne > .colonne-contenu { padding-inline: 0 !important; margin-inline: 0 !important; }
.conteneur.fond-video:not(.accueil-haut) .bouton-bloc { margin-left: 0 !important; }
.conteneur.fond-video :is(h1, h2, h3, .titre-bloc-texte, p, li, .texte-bloc) { color: var(--sur-marine) !important; }
.conteneur.fond-video .texte-bloc a:not(.bouton-bloc) { color: var(--sur-marine) !important; text-decoration: underline; }
/* Rose éclairci sur la vidéo : #e6487a tombait à 2,7:1 sur les zones claires sous le voile (QA du 27/10/2026). */
.conteneur.fond-video h1 .accent { color: var(--rose-sur-marine) !important; display: block; }

/* ---------- Sections ---------- */
#principal .conteneur { --palette-2: var(--teinte); }
/* Trois fonds comme bienvenue-event.com (blanc, teinte, marine) : les rangées de l'export à 10 et 30 % de marine passent
   sur la teinte (E7) ; les liens y restent roses (4,84:1) */
#principal .conteneur:is(.fond-marine-10, .fond-marine-30) { background-color: var(--teinte) !important; }
/* Bandeau d'appel à l'action (ancien bleu #003366) : marges de section, texte blanc de 18 px (E22) */
#principal .conteneur.fond-marine {
  background: var(--marine) !important;
  padding-block: var(--section-y) !important;
}
#principal .conteneur.fond-marine :is(h1, h2, h3, .titre-bloc-texte) { color: var(--sur-marine) !important; }
#principal .conteneur.fond-marine :is(p, li) { color: var(--sur-marine) !important; font-size: var(--texte-sous-titre); line-height: var(--interligne-item); }
@media (max-width: 639px) {
  #principal .conteneur.fond-marine .bouton-bloc.bouton-bloc { width: 100%; }
}

/* Colonnes sur fond marine (ancien bleu #003366) : texte blanc */
#principal .colonne.colonne-marine > .colonne-contenu { color: var(--sur-marine); }

/* Cartes : colonnes à bordure ou à ombre déclarée dans l'export, marquées « carte » (outils/classes_charte.py), un seul
   style (audit A5 : trois styles ; B7 : bordure cyan). Pas la classe d'ombre de l'export : elle était posée aussi sur
   des colonnes sans ombre ni marge intérieure. */
#principal .colonne.carte > .colonne-contenu {
  border: 1px solid var(--bord-carte) !important;
  border-radius: var(--rayon-carte) !important;
  background-color: var(--blanc);
  box-shadow: var(--ombre-carte) !important;
}
/* Anciens blocs à filet gauche de 5 px (second audit Impeccable, formation-8 et guides-5) : l'export ne leur donnait
   qu'une marge intérieure à gauche */
#principal .colonne.carte-retrait > .colonne-contenu { padding: var(--espace-6) !important; }
@media (max-width: 639px) { #principal .colonne.carte-espacee { margin-bottom: var(--espace-4) !important; } }
/* Trois modules de /bienvenue-formation/, remontés sous le H1 (retours du 29/10/2026) : même hauteur, et même largeur
   (marges de l'export : 8,46 % côté extérieur et 1,41 % entre les cartes, d'où une carte du milieu plus large de 31 px ;
   la carte du milieu prend la moyenne, 4,935 % de chaque côté) */
#principal .colonne.carte-espacee { align-self: stretch !important; }
#principal .colonne.carte-espacee + .colonne.carte-espacee:has(+ .colonne.carte-espacee) {
  --espacement-gauche-ordinateur: 4.935% !important; --espacement-droite-ordinateur: 4.935% !important;
  --espacement-gauche-tablette: 4.935% !important; --espacement-droite-tablette: 4.935% !important;
}
/* Pages de lecture de l'export (pages légales, communiqué de 2021, article sur le R.O.I. ; second audit, actualites-legal-3
   et P3) : même mise en page que les articles, une colonne de lecture de 48rem centrée, l'image au-dessus du texte (avant :
   image dans un tiers à gauche, vide sur toute la hauteur de l'article ; texte des pages légales collé à gauche). Sur
   ordinateur seulement : sur téléphone, la colonne garde ses marges. Le tableau de la politique de confidentialité s'y
   lit en fiches, comme sur téléphone (cinq colonnes de 150 px seraient trop serrées). */
.page-lecture #principal .rangee > .colonne { width: 100% !important; }
@media (min-width: 64rem) {
  .page-lecture #principal .colonne > .colonne-contenu { max-width: 48rem; margin-inline: auto !important; }
}
/* Section du formulaire de démonstration de /bienvenue-formation/ (second audit, formation-1 : formulaire centré de 321 à
   1 104 px sous un titre à gauche) : le formulaire, page externe de largeur fixe, reste centré ; son titre et son texte
   le sont aussi */
#principal .colonne-pleine:has(> .colonne-contenu > #formulaire) > .colonne-contenu { text-align: center; }
#principal #formulaire .titre-bloc-texte { text-align: center !important; }
#principal .colonne-pleine:has(> .colonne-contenu > #formulaire) .texte-bloc p { margin-inline: auto; text-align: center !important; }
/* Pages d'intégration (second audit, integrations-4) : logo du haut de page dans un carré de 362 px rempli à 8 % (249 px
   de blanc sous le texte) ; cartes « Pourquoi » et « Comment » étirées à la même hauteur (jusqu'à 406 px de blanc) */
#principal:has(.articles-recents-erp) .publication-contenu > .conteneur:first-child img { max-width: 240px; }
#principal:has(.articles-recents-erp) .colonne.carte { align-self: flex-start !important; }
/* Cartes de tarifs de /bienvenue-formation/ : à leur hauteur (second audit, formation-9 : étirées à 2 011 px, 886 et 641 px vides) */
#principal .colonne.carte:has(.titres-meme-hauteur) { align-self: flex-start !important; }
/* En-têtes des offres sans aplat de couleur : titre marine sur la carte blanche, aligné sur le texte de la carte, comme
   les cartes d'offre de bienvenue-event.com (retours du 29/10/2026 : « pas fan du dégradé des tarifs »). Hauteurs
   toujours égalisées (hauteurs.js) : les prix restent alignés d'une carte à l'autre. */
/* Puis (29/10/2026 : « le site a perdu en couleur » ; critique Impeccable) : bandeau marine en aplat contre le
   bord de la carte, titre blanc (14,5:1). La carte rogne le bandeau à son bord arrondi ; le bandeau remonte des 5 px de
   retrait haut de la carte. */
#principal .colonne.titres-meme-hauteur { --fond-couleur: var(--marine) !important; --fond-couleur-survol: var(--marine) !important; }
#principal .colonne.carte:has(.titres-meme-hauteur) > .colonne-contenu { overflow: hidden; }
#principal .colonne.carte > .colonne-contenu > .rangee-interne:has(> .titres-meme-hauteur) { margin-top: -5px !important; }
/* Rangée de l'en-tête à 106 % de la carte, décalée de 3 % (style en ligne de l'export) ; texte de la carte à 5 % du bord :
   3 + 5 = 8 % de la carte, soit 7,55 % de la rangée */
#principal .titres-meme-hauteur > .colonne-contenu { background: var(--marine) !important; justify-content: center !important; margin-inline: 0 !important; padding: var(--espace-6) 7.55% !important; }
#principal .titres-meme-hauteur .titre-bloc { margin: 0 !important; }
#principal .titres-meme-hauteur .titre-bloc-texte { color: var(--sur-marine) !important; text-align: left !important; font-size: var(--texte-2xl) !important; }
/* Prix : « à partir de » et « HT/an » discrets, montant en serif marine */
#principal .offre-prix { margin: var(--espace-6) 0 0; font-family: var(--police-texte); font-size: var(--texte-base); font-weight: 500; line-height: 1.3; color: var(--marine-70) !important; }
#principal .offre-prix strong { font-family: var(--police-titre); font-size: var(--texte-titre-carte); font-weight: 600; color: var(--marine); }
/* Rangée intérieure qui ne porte que des boutons (/emarger/, second audit, institutionnel-7) : deux colonnes à 50 %
   mettaient chaque pilule sur deux lignes de 1 024 à 1 200 px, 5 px à droite du texte. Boutons à leur largeur, côte à
   côte puis l'un sous l'autre, sur une ligne chacun dès 640 px. */
#principal .rangee-interne:has(.bouton-bloc):not(:has(p, img, h1, h2, h3, h4, ul, ol)) { display: flex; flex-wrap: wrap; gap: var(--espace-3); margin: var(--espace-6) 0 0 !important; width: 100% !important; max-width: 100% !important; }
#principal .rangee-interne:has(.bouton-bloc):not(:has(p, img, h1, h2, h3, h4, ul, ol)) > .colonne { width: auto !important; flex: 0 1 auto; margin: 0 !important; padding: 0 !important; }
#principal .rangee-interne:has(.bouton-bloc):not(:has(p, img, h1, h2, h3, h4, ul, ol)) :is(.colonne-contenu, .bouton-bloc) { margin: 0 !important; }
@media (min-width: 40rem) { #principal .rangee-interne:has(.bouton-bloc):not(:has(p, img, h1, h2, h3, h4, ul, ol)) .bouton-bloc { white-space: nowrap; } }
/* Téléphone (second audit, formation-7 et guides-6) : l'illustration du haut de page, souvent décorative, repoussait le
   H1 à 562 à 584 px et l'introduction sous la barre de contact. Le titre et son texte passent devant ; l'ordre de
   lecture ne change pas (l'image n'est pas un lien). Tableau des traitements de la politique de confidentialité
   (actualites-legal-6 : 1 430 px figés sur une ligne dans 358 px) en fiches : une ligne par bloc, chaque valeur
   précédée du nom de sa colonne ; rôles de tableau dans le balisage (outils/accessibilite.py). */
@media (max-width: 639px) {
  #principal .rangee-flex > .colonne:has(> .colonne-contenu h1) { order: -1; }
}
@media (max-width: 639px), (min-width: 64rem) {
  .tableau-bloc thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .tableau-bloc :is(table, tbody, tr, td) { display: block; width: auto; }
  .tableau-bloc table { border: 0 !important; box-shadow: none !important; background: none !important; }
  .tableau-bloc tr { margin: 0 0 var(--espace-4); padding: var(--espace-3) var(--espace-4); border: 1px solid var(--bord-carte); border-radius: var(--rayon-carte); background: var(--blanc) !important; }
  .tableau-bloc tr td { padding: var(--espace-1) 0 !important; border: 0 !important; white-space: normal !important; }
  .tableau-bloc td::before { content: attr(data-label); display: block; font-weight: 600; color: var(--marine); }
  .tableau-bloc td ul { margin: 0; }
}
/* Taches violettes de l'ancienne charte sous les cartes (audit B4) ; vidéos de fond posées sur la marine */
#principal .colonne-fond-image { background-image: none !important; }
#principal .conteneur.fond-video { background-image: none !important; background-color: var(--marine) !important; }

/* Articles récents et archives */
.articles-recents h3, .articles-recents h3 a { font-family: var(--police-texte) !important; color: var(--marine) !important; font-weight: 600 !important; }

/* Sommaire, listes à coches */
.sommaire-page__lien { color: var(--rose-lien) !important; }
/* Sommaire de l'export au style du sommaire de la charte (E27) */
.sommaire-page { background: var(--teinte); border-radius: var(--rayon-carte); padding: var(--espace-5) var(--espace-6); max-width: 34em; }
.liste-coches .icone-cadre, .liste-coches-icone { color: var(--rose-charte) !important; }

/* ---------- Pied de page (outils/pied_de_page.py), sur le modèle de bienvenue-event.com ----------
   Marque à gauche (logo à la taille de celui de l'en-tête), colonnes de liens, barre basse. Espacements sur 4 px. */
.pied-bsoft {
  background: var(--marine); color: var(--sur-marine-pied);
  font-family: var(--police-texte); font-size: 15px; line-height: 1.5;
}
.pied-bsoft ul { list-style: none; margin: 0; padding: 0; }
.pied-cadre { box-sizing: border-box; max-width: var(--largeur-cadre); margin: 0 auto; padding: 0 var(--gouttiere); }
.pied-grille {
  display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(4, minmax(0, 1fr));
  gap: var(--espace-10) var(--espace-12); padding: var(--espace-16) 0 var(--espace-12);
}
/* Page qui finit sur un bandeau marine (histoire, références, Formation) : filet au-dessus du pied de page, comme celui
   de sa barre basse, pour que les deux blocs marine ne se confondent pas */
#principal:has(.publication-contenu > :is(.section-bsoft--marine, .conteneur.fond-marine):last-child) + .pied-bsoft .pied-grille { border-top: 1px solid var(--filet-sur-marine); }
.pied-accueil { display: inline-block; }
.pied-logo { display: block; width: 120px; height: auto; }
.pied-marque p { margin: var(--espace-4) 0 0; max-width: 20.5em; }
.pied-contact { margin-top: var(--espace-5) !important; display: grid; gap: var(--espace-1); }
.pied-contact a { display: inline-flex; align-items: center; gap: var(--espace-2-5); min-height: 32px; }
.pied-icone { flex: none; width: 20px; height: 20px; }
.pied-bsoft .pied-titre {
  margin: 0 0 var(--espace-4); padding: 0; color: var(--sur-marine) !important;
  font: 600 15px/1.5 var(--police-texte) !important; letter-spacing: 0 !important; text-transform: none !important;
}
.pied-colonne li + li { margin-top: var(--espace-2); }
/* Liens sans soulignement au repos, comme dans la barre de menu (la règle générale des liens soulignés ne vaut pas ici) */
.pied-bsoft a { color: var(--sur-marine-pied) !important; text-decoration: none !important; }
/* Survol, focus et page courante : soulignement rose de la barre de menu ; décalage réduit, lignes serrées */
.pied-bsoft a:not([aria-label]):is(:hover, :focus-visible, [aria-current="page"]) {
  color: var(--sur-marine) !important;
  text-decoration: underline !important; text-decoration-color: var(--rose-charte) !important;
  text-decoration-thickness: 2px !important; text-underline-offset: 4px !important;
}
/* Bas de page : 88 px réservés sous la barre pour le bouton « Retour en haut » et la bulle Crisp, fixes en bas à
   droite, qui couvraient les mentions légales une fois la page défilée jusqu'au bout (audit C6). */
.pied-bas {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--espace-3) var(--espace-8);
  padding: var(--espace-5) 0 var(--espace-22); border-top: 1px solid var(--filet-sur-marine); font-size: var(--texte-sm);
}
.pied-bas p { margin: 0 auto 0 0; }
.pied-reseaux { display: flex; gap: var(--espace-1); }
.pied-reseaux a { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: var(--rayon-icone); }
.pied-reseaux a:is(:hover, :focus-visible) { color: var(--sur-marine) !important; background: var(--fond-survol-discret); }
.pied-legal { display: flex; flex-wrap: wrap; gap: var(--espace-1) var(--espace-5); }
@media (max-width: 1199px) {
  .pied-grille { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .pied-marque { grid-column: 1 / -1; }
}
@media (max-width: 767px) {
  .pied-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--espace-8) var(--espace-6); padding: var(--espace-12) 0 var(--espace-8); }
  .pied-bas { flex-direction: column; align-items: flex-start; gap: var(--espace-3); }
  .pied-bsoft .pied-reseaux { margin-left: -10px; }
}

/* ---------- Bouton pause des vidéos de fond (video.js) ---------- */
.video-pause {
  position: absolute; right: 24px; bottom: 24px; z-index: 7;
  width: 44px; height: 44px; border-radius: 50%; padding: 0; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--voile-pause); border: 1px solid var(--bord-pause);
}
.video-pause:hover { background: var(--voile-pause-survol); }
.video-pause:focus-visible { outline-color: var(--sur-marine) !important; }
.video-pause span { display: block; width: 12px; height: 14px; border-left: 4px solid var(--sur-marine); border-right: 4px solid var(--sur-marine); box-sizing: border-box; }
.video-pause[aria-pressed="true"] span {
  width: 0; height: 0; margin-left: var(--espace-1);
  border-left: 12px solid var(--sur-marine); border-right: 0; border-top: 7px solid transparent; border-bottom: 7px solid transparent;
}
/* Sous 768 px, la barre de contact occupe le bas de l'écran : bouton en haut à droite du haut de page. En bas, il tombait
   juste au-dessus du bouton téléphone de la barre (9 px d'écart, même colonne ; 30/10/2026) */
@media (max-width: 767px) { .video-pause { top: var(--espace-3); right: var(--gouttiere); bottom: auto; } }

/* ---------- Accueil ---------- */
.accueil-haut > .rangee-cadre { justify-content: center !important; }
.accueil-haut .accueil-haut-texte { width: 100% !important; max-width: 1120px; margin: 0 auto !important; }
.accueil-haut .accueil-haut-texte > .colonne-contenu { padding: var(--espace-22) var(--espace-6) var(--espace-20) !important; }
/* Hauts de page : H1 à l'échelle « display » de bienvenue-event.com, 32 à 60 px (E2) ; introduction de 20 px (E5) */
/* H1 (second audit Impeccable, 28/10/2026 : 36 px, le corps des H2, sur la plupart des pages) : échelle display de
   DESIGN.md en haut de page ; pages de lecture (articles, pages légales, plan du site, 404) de 32 à 44 px */
#principal h1 { font-size: var(--texte-display) !important; line-height: var(--interligne-display) !important; }
.page-lecture #principal h1, #principal .article-bsoft h1, #principal.page-erreur h1, #principal.plan-site h1 { font-size: var(--texte-titre-page) !important; line-height: var(--interligne-display) !important; }
#principal .accueil-haut .texte-bloc > p { font-size: var(--texte-intro); line-height: 1.4; }
#principal .accueil-haut .texte-bloc { text-align: center !important; }
#principal .accueil-haut .texte-bloc > p { max-width: 30em; margin: 0 auto; font-size: var(--texte-lg); line-height: 1.6; }
/* Haut de l'accueil : les deux logiciels en cartes (icône, nom, une ligne, flèche) sous une phrase courte, l'essentiel
   d'un regard (retours du 29/10/2026). Cartes blanches sur le voile, texte marine ; la carte entière est le lien. */
.accueil-produits { list-style: none; margin: var(--espace-10) auto 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--espace-6); max-width: 880px; }
.accueil-produits li { margin: 0; }
#principal .accueil-produits a {
  display: flex; align-items: center; gap: var(--espace-4); height: 100%; box-sizing: border-box;
  padding: var(--espace-4) var(--espace-5); background: var(--blanc); border-radius: var(--rayon-carte); box-shadow: var(--ombre-image);
  text-align: left; text-decoration: none !important; transition: background-color var(--duree-rapide);
}
#principal .accueil-produits a:is(:hover, :focus-visible) { background: var(--teinte); }
.accueil-produits img { flex: none; width: 56px; height: 56px; border-radius: var(--rayon-icone); }
.accueil-produits span { flex: 1; min-width: 0; }
#principal .accueil-produits :is(strong, span) { color: var(--marine-70) !important; font-size: var(--texte-base); line-height: 1.4; }
#principal .accueil-produits strong { display: block; color: var(--marine) !important; font-size: var(--texte-lg); font-weight: 600; margin-bottom: var(--espace-1); }
.accueil-produits a::after {
  content: ""; flex: none; width: 24px; height: 24px; background: var(--rose-charte);
  -webkit-mask: var(--fleche) center / contain no-repeat; mask: var(--fleche) center / contain no-repeat;
}
@media (max-width: 639px) { .accueil-produits { grid-template-columns: 1fr; gap: var(--espace-3); margin-top: var(--espace-8); } }

/* Sections propres à la charte : pleine largeur, comme les rangées de l'export (marge négative de #principal) */
.section-bsoft { padding: var(--section-y) 0; background: var(--blanc); }
.principal-pleine-largeur .section-bsoft { margin-left: var(--defaut-pleine-largeur-retrait-pleine-largeur-marge-negative); margin-right: var(--defaut-pleine-largeur-retrait-pleine-largeur-marge-negative); }
.section-conteneur { box-sizing: border-box; max-width: var(--largeur-cadre); margin: 0 auto; padding: 0 var(--gouttiere); }
.section-bsoft h2 { text-align: center; margin: 0 0 var(--espace-4); }
#principal .section-intro { text-align: center; max-width: 30em; margin: 0 auto var(--espace-10) !important; font-size: var(--texte-lg); line-height: 1.6; color: var(--marine-70) !important; }
#principal .section-suite { text-align: center; margin: var(--espace-10) 0 0 !important; }

/* Section « Bsoft, éditeur de logiciels à Lyon » (critique Impeccable du 30/10/2026, audit typographique du 01/11/2026) :
   la phrase (le métier de Bsoft) au style commun des phrases de section, 18 px (à 24 px, graisse 500, elle sortait de
   l'échelle et se lisait comme un second titre) ; puis trois repères, terme en Figtree
   rose comme les années de la frise de l'histoire (rose sans lien, jamais souligné), phrase à côté, rangées séparées
   par un filet. Ni carte, ni trait rose, ni grand chiffre (gabarit du chiffre clé retiré). Alignée à gauche à toutes
   les largeurs. La colonne des phrases s'aligne d'une rangée à l'autre (subgrid), à la largeur du terme le plus long. */
.section-filets h2 { text-align: left; }
#principal .section-filets .section-intro { text-align: left; margin: 0 0 var(--espace-8) !important; }
#principal .section-filets .section-suite { text-align: left; margin: var(--espace-8) 0 0 !important; }
.accueil-reperes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: auto 1fr; column-gap: var(--espace-6); }
.accueil-reperes li { display: grid; grid-column: 1 / -1; grid-template-columns: subgrid; align-items: baseline; padding-block: var(--espace-5); border-top: 1px solid var(--filet); }
.accueil-reperes li:first-child { border-top: 0; padding-top: 0; }
.accueil-reperes li:last-child { padding-bottom: 0; }
.accueil-reperes strong { font-family: var(--police-texte); font-weight: 600; font-size: var(--texte-lg); line-height: 1.5; color: var(--rose-lien); }
.accueil-reperes span { font-size: var(--texte-base); line-height: 1.5; color: var(--marine-70); text-wrap: balance; }
/* Logos des deux groupes sous la rangée 2021 (déjà publiés sur la page histoire) ; alt vide : la phrase les nomme */
.reperes-logos { display: flex; align-items: center; gap: var(--espace-6); margin-top: var(--espace-3); }
.reperes-logos img { width: auto; height: 24px; }
/* Liste à filets (« Un éditeur, du développement à l'assistance », histoire ; audit du 01/11/2026, à la place de trois
   cartes identiques) : titre et phrase par rangée, rangées séparées par un filet, comme les repères de l'accueil */
.liste-filets { list-style: none; margin: 0; padding: 0; }
.liste-filets li { padding-block: var(--espace-5); border-top: 1px solid var(--filet); }
.liste-filets li:first-child { border-top: 0; padding-top: 0; }
.liste-filets li:last-child { padding-bottom: 0; }
.liste-filets h3 { font-size: var(--texte-xl); margin: 0 0 var(--espace-2); }
.liste-filets p { margin: 0; color: var(--marine-70); line-height: 1.6; }
/* Bloc « section-filets », commun à l'accueil (section Bsoft) et à l'histoire (« Un éditeur… ») : alignés à gauche à
   toutes les largeurs ; deux colonnes égales dès 961 px, titre, phrase et bouton à gauche, liste à droite */
@media (min-width: 961px) {
  .section-filets .section-conteneur { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto auto 1fr; column-gap: var(--espace-16); align-items: start; }
  .section-filets :is(h2, .section-intro, .section-suite) { grid-column: 1; }
  #principal .section-filets .section-intro { margin-bottom: 0 !important; }
  .section-filets :is(.accueil-reperes, .liste-filets) { grid-column: 2; grid-row: 1 / span 3; }
}

.accueil-solutions, .accueil-actualites { background-color: var(--teinte) !important; }
/* Solutions de l'accueil sans cadre de carte (30/10/2026) : logo de l'application à gauche du titre, texte aligné à
   gauche, les deux produits séparés par l'espace seul */
#principal .accueil-solutions .colonne.carte > .colonne-contenu {
  border: 0 !important; border-radius: 0 !important; background: none; box-shadow: none !important; padding: 0 !important;
  display: grid !important; grid-template-columns: 64px 1fr; column-gap: var(--espace-4); align-items: center; align-content: start;
}
#principal .accueil-solutions .colonne.carte > .colonne-contenu > :not(.bloc-image, .titre-bloc) { grid-column: 1 / -1; }
#principal .accueil-solutions .colonne.carte > .colonne-contenu :is(div, h3) { text-align: left !important; }
.accueil-solutions .carte-produit-texte ul { display: block; }
/* Cartes à lien de l'export (« soulevées ») : ni cadre bleu ni agrandissement au survol (E17), la carte reste telle quelle.
   Sur l'accueil, le lien de colonne double le bouton de la carte (masqué aux lecteurs d'écran) : retiré. Ailleurs
   (sommaire et modules de /bienvenue-formation/), c'est le seul lien de la carte : gardé, seuls les effets partent. */
#principal .accueil-solutions .colonne-souleve-bord .colonne-fond { display: none !important; }
/* Le contenu de ces cartes laisse passer les clics vers le lien de colonne (pointer-events: none de l'export) : ses
   propres liens et boutons les reprennent. Sans cela, lien de colonne masqué, les boutons de l'accueil étaient inertes. */
#principal .colonne-fond-cadre .colonne-contenu :is(a[href], button) { pointer-events: auto; }
#principal .colonne-souleve-bord .colonne-fond-image { border: 0 !important; transform: none !important; }
#principal .colonne-souleve-bord:hover .colonne-contenu { border-color: var(--bord-carte) !important; border-radius: var(--rayon-carte) !important; }
/* Ces cartes-liens (modules et sommaire de /bienvenue-formation/) n'avaient aucun signe de lien (critique Impeccable du
   29/10/2026) : flèche rose, comme les cartes du haut de l'accueil. Sous le texte des modules, à droite du libellé du
   sommaire. Pas sur l'accueil, où le lien de colonne est retiré. */
#principal .colonne.carte:has(> .colonne-fond > .colonne-lien) > .colonne-contenu::after {
  content: ""; flex: none; box-sizing: content-box; width: 24px; height: 24px; margin-top: auto; padding-top: var(--espace-4); background: var(--rose-bouton);
  -webkit-mask: var(--fleche) center / contain no-repeat content-box; mask: var(--fleche) center / contain no-repeat content-box;
}
#principal .colonne.carte:has(> .colonne-fond > .colonne-lien) > .colonne-contenu.flex-justifie-centre { flex-direction: row; align-items: center; gap: var(--espace-3); }
#principal .colonne.carte:has(> .colonne-fond > .colonne-lien) > .colonne-contenu.flex-justifie-centre::after { margin-top: 0; padding-top: 0; }
#principal .accueil-solutions .colonne.carte:has(> .colonne-fond) > .colonne-contenu::after { content: none; }
.carte-produit-texte { text-align: center; color: var(--marine-70); margin-bottom: var(--espace-6); }
.carte-produit-texte p { font-size: var(--texte-base); line-height: 1.6; margin: 0 0 var(--espace-4); }
.carte-produit-texte ul { display: inline-block; text-align: left; list-style: none; margin: 0; padding: 0; }
.carte-produit-texte li { position: relative; padding-left: var(--espace-7); margin: var(--espace-2) 0; line-height: 1.5; }
/* Coche au trait de bienvenue-event.com, 16 px, rose, sans fond (E18), centrée sur la première ligne (24 px) */
.carte-produit-texte li::before {
  content: ""; position: absolute; left: 0; top: .25em; width: 16px; height: 16px;
  background: var(--rose-charte); -webkit-mask: var(--coche) center / contain no-repeat; mask: var(--coche) center / contain no-repeat;
}

/* Vignettes des actualités : même format, titres alignés */
.accueil-logos, .grille-logos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(8, 1fr); gap: var(--espace-4); }
/* Logos clients sans cartouche, comme sur bienvenue-event.com (E24) */
.accueil-logos li, .grille-logos li { display: flex; align-items: center; justify-content: center; background: none; border: 0; border-radius: 0; padding: var(--espace-1) var(--espace-3); }
.accueil-logos img, .grille-logos img { display: block; width: 100%; max-width: 112px; height: auto; }
/* Logos dont le fichier a un fond blanc (second audit, formation-3, institutionnel-4, integrations-2 : 21 sur 46 dans la
   grille de /bienvenue-formation/, 5 sur 16 dans celle des intégrations, en carrés blancs sur la teinte) : le blanc prend
   la couleur du fond, les couleurs du logo ne changent pas ; sans effet sur fond blanc. Les tailles inégales (marges
   blanches intégrées aux fichiers) sont réglées par outils/logos_taille.py (règle img.logo-dimensionne ci-dessous). */
:is(.accueil-logos, .grille-logos, .articles-recents-erp .diapositives) img { mix-blend-mode: multiply; }
/* La rangée de l'export forme un contexte d'empilement sans fond (position et z-index) : elle prend celui de son conteneur,
   pour que le logo se fonde dans la teinte et non dans le transparent */
.conteneur > .rangee-cadre:has(:is(.accueil-logos, .grille-logos, .articles-recents-erp)) { background-color: inherit; }
/* Logos de bienvenue-event.com (références_clients.py) : fichiers sans marge carrée, bornés en hauteur comme là-bas */
.grille-logos img.logo-marque { width: auto; max-width: 100%; max-height: 56px; }
/* Logos réglés par leur surface visible (audit du 01/11/2026, outils/logos_taille.py) : même surface pour la partie
   visible de chaque logo ; largeur et marges négatives écrites par l'outil sur l'image, en % de la case, les marges
   repliant la marge blanche ou transparente du fichier (rendue invisible par le mode « multiply ») */
:is(.accueil-logos, .grille-logos) img.logo-dimensionne { flex: none; max-width: none; max-height: none; height: auto; }
/* Phrase sous un titre aligné à gauche (logos de /bienvenue-formation/) */
#principal .section-intro--gauche { text-align: left; margin: 0 0 var(--espace-8) !important; }
/* Contact : phrase d'introduction à la mesure des paragraphes de la frise, 34em, environ 57 caractères par ligne
   (101 à 1 440 px avant l'audit du 01/11/2026 ; pas de ch, trompeur avec Figtree) */
.contact-intro { max-width: 34em; }

/* Variantes de section : gris clair, marine */
.section-bsoft--teinte { background: var(--teinte); }
.section-bsoft--marine { background: var(--marine); }
.section-bsoft--marine :is(h1, h2) { color: var(--sur-marine) !important; }
#principal .section-bsoft--marine .section-intro { color: var(--sur-marine-discret) !important; }
#principal .section-bsoft--marine a:not(.bouton-bloc) { color: var(--sur-marine) !important; text-decoration: underline; }

/* ---------- Bienvenue Formation : haut de page ---------- */
/* H1 de quatorze mots monté dans la vidéo à la place de l'étiquette « Bienvenue Formation » (critique Impeccable du
   29/10/2026 : deux titres de 60 px). Taille des titres de page, sur la largeur du cadre (trois lignes à 1 440 px) ;
   colonne vide retirée, texte et boutons gardent la demi-largeur. */
.conteneur.fond-video:not(.accueil-haut) > .rangee-cadre > .colonne:has(> .colonne-contenu:empty) { display: none; }
.conteneur.fond-video:not(.accueil-haut) > .rangee-cadre > .colonne:has(h1) { width: 100% !important; }
.conteneur.fond-video:not(.accueil-haut) .colonne-contenu > :not(.titre-bloc-h1) { max-width: calc(var(--largeur-cadre) / 2 - var(--gouttiere)); }
#principal .conteneur.fond-video:not(.accueil-haut) h1 { font-size: var(--texte-titre-page) !important; max-width: 22em; text-wrap: balance; }
.colonne-contenu > div:has(> .bf-connexion) { display: flex; flex-wrap: wrap; gap: var(--espace-3); align-items: center; }
.colonne-contenu > div:has(> .bf-connexion) > .bouton-bloc { width: auto !important; }
#principal .bf-prix { font-weight: 600; }
#principal .bf-roles { font-size: 15px; margin: var(--espace-4) 0 0; }
#principal .bf-roles a { color: var(--sur-marine) !important; text-decoration: underline; }
/* Modules (anciens onglets) : illustration à gauche, texte à droite */
@media (min-width: 1025px) {
  :is(#convocations, #presences, #evaluations, #signature) .rangee-interne > .colonne-interne:first-child { width: 30% !important; }
  :is(#convocations, #presences, #evaluations, #signature) .rangee-interne > .colonne-interne:last-child { width: 70% !important; }
}

/* ---------- Notre histoire ---------- */
/* Haut de « Notre histoire » à vidéo, comme l'accueil et Bienvenue Formation (29/10/2026 : « pourquoi il n'y a pas de
   couleur ou de vidéo derrière l'histoire de bsoft ? ») : vidéo de l'accueil (outils/videos.py) sous le même voile, texte
   blanc (5,7:1 au moins sur les images les plus claires), bouton pause (video.js) ; marine si la vidéo manque. Suivi du
   bloc des groupes Visiativ et SNEF sur teinte. */
.section-bsoft.fond-video { position: relative; overflow: hidden; background: var(--marine); padding-block: var(--espace-20); }
.section-bsoft.fond-video .conteneur-video { position: absolute; inset: 0; z-index: 1; overflow: hidden; }
.section-bsoft.fond-video .conteneur-video video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.section-bsoft.fond-video .conteneur-video::after { content: ""; position: absolute; inset: 0; z-index: 2; background: var(--voile-video); }
.section-bsoft.fond-video > .section-conteneur { position: relative; z-index: 6; }
#principal .section-bsoft.fond-video :is(h1, p) { color: var(--sur-marine) !important; }
/* Même haut de page pour les références (01/11/2026) ; phrase à 18 px comme les autres phrases de section */
:is(.histoire-haut, .references-haut) h1 { text-align: center; margin: 0 0 var(--espace-4); }
#principal :is(.histoire-haut, .references-haut) .section-intro { margin-bottom: 0 !important; font-size: var(--texte-lg); }
.frise { list-style: none; margin: 0 auto; padding: 0; max-width: 760px; position: relative; }
/* Frise de bienvenue-event.com (E25) : ligne rose à 20 %, point plein de 12 px, année en Figtree */
.frise::before { content: ""; position: absolute; left: 11px; top: 10px; bottom: 10px; width: 2px; background: var(--rose-20); }
.frise li { position: relative; padding: 0 0 var(--espace-8) var(--espace-11); }
.frise li:last-child { padding-bottom: 0; }
.frise li::before { content: ""; position: absolute; left: 6px; top: 6px; width: 12px; height: 12px; border-radius: 50%; background: var(--rose-charte); }
.frise-annee { display: block; font-family: var(--police-texte); font-weight: 600; font-size: var(--texte-base); line-height: 1.5; color: var(--rose-lien); }
.frise h3 { font-size: 21px; margin: var(--espace-1) 0 var(--espace-1-5); }
.frise p { margin: 0; max-width: 34em; color: var(--marine-70); line-height: 1.6; }
.groupes li { background: var(--blanc); border: 1px solid var(--bord-carte); border-radius: var(--rayon-carte); padding: var(--espace-6); }
.groupes p { margin: 0; color: var(--marine-70); line-height: 1.6; }
.groupes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--espace-6); }
.groupes img { display: block; height: 40px; width: auto; margin-bottom: var(--espace-5); }
@media (max-width: 640px) { .groupes { grid-template-columns: 1fr; } }

/* Références : groupes par secteur, aux bords du contenu comme les autres grilles */
.references-bsoft .grille-logos { margin: 0 0 var(--espace-2); }
/* Secteur public (retours du 29/10/2026 : logos « pas lisibles ni harmonieux » ; critique Impeccable) : cartes égales
   sur la teinte, nom écrit sous le logo, comme les références de bienvenue-event.com. Logo dans une zone de même
   hauteur ; blocs-marques de l'État, qu'on ne recadre pas, sur toute la hauteur, autres logos un peu en retrait. */
.grille-logos.grille-logos--public { grid-template-columns: repeat(4, 1fr); gap: var(--espace-4); }
.grille-logos--public .logo-carte { flex-direction: column; justify-content: flex-start; gap: var(--espace-3); padding: var(--espace-5) var(--espace-4); background: var(--teinte); border-radius: var(--rayon-carte); text-align: center; }
.grille-logos--public .logo-carte img { box-sizing: border-box; width: 100%; max-width: none; height: 88px; max-height: none; object-fit: contain; }
.grille-logos--public .logo-carte img:not(.logo-etat) { padding-block: var(--espace-2); }
#principal .grille-logos--public .logo-nom { font-size: 15px; font-weight: 600; line-height: 1.35; color: var(--marine); }
@media (max-width: 639px) {
  .grille-logos.grille-logos--public { grid-template-columns: repeat(2, 1fr); gap: var(--espace-3); }
  .grille-logos--public .logo-carte { padding: var(--espace-4) var(--espace-3); }
  .grille-logos--public .logo-carte img { height: 64px; }
  #principal .grille-logos--public .logo-nom { font-size: var(--texte-sm); }
}
#principal .references-bsoft > p { max-width: 34em; font-size: var(--texte-base); line-height: 1.6; }

/* Communiqué : note de mise à jour */
#principal .note-mise-a-jour { background: var(--teinte); border: 1px solid var(--filet); border-radius: var(--rayon-icone); padding: var(--espace-3) var(--espace-4); }

/* Bienvenue Formation : menu latéral des modules et argumentaire replié */
/* Modules de /bienvenue-formation/ : scène fixe (outils/modules_scene.py). La colonne de gauche reste en place,
   le module affiché s'y allume pendant le défilement ; barre de pastilles sur mobile. */
.modules-bsoft { --encre: var(--marine); --encre-douce: color-mix(in srgb, var(--marine) 78%, var(--blanc)); min-width: 0; width: 100%; box-sizing: border-box; margin: 0 auto; padding: 0; color: var(--encre); }
/* La scène et la FAQ de /bienvenue-formation/ sont posées directement dans une rangée de l'export, dont les marges
   négatives (3 % de chaque côté, la rangée fait 106 % du conteneur) attendent des colonnes à retrait : elles se
   limitent à la largeur du conteneur, bords sur la gouttière (avant : marges de la rangée annulées sous 1 100 px, ce
   qui décalait de 28 px les cartes de la même rangée ; titre de la FAQ 11 px hors du cadre). */
.rangee-cadre > .modules-bsoft { max-width: calc(100% / 1.06); }
.rangee-cadre > .faq-dans-rangee { max-width: calc(100% / 1.06); margin-inline: auto; }
.modules-bsoft ::selection { background: color-mix(in srgb, var(--rose-charte) 22%, transparent); color: var(--marine); }
.module-masque { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.modules-scene-nav ul { list-style: none; margin: 0; padding: 0; position: relative; }
#principal .modules-scene-nav a { text-decoration: none !important; }
.module { border-top: 1px solid var(--filet); padding: var(--espace-14) 0; }
.module:first-child { border-top: 0; padding-top: var(--espace-1); }
.module > :not(.module-vignette) { max-width: 760px; }
.module .module-vignette { display: none; }
.module-cadre { display: block; background: var(--blanc); border: 1px solid var(--bord-carte); border-radius: var(--rayon-carte); box-shadow: var(--ombre-carte); }
#principal .module-titre { margin: 0 0 18px; font-family: var(--police-titre); color: var(--marine); text-wrap: balance; line-height: 1.15; text-align: left; }
.module-nom { display: block; font-size: clamp(var(--texte-3xl), 3vw, 40px); font-weight: 600; letter-spacing: -0.015em; }
.module-promesse { display: block; margin-top: var(--espace-2); font-family: var(--police-texte); font-size: clamp(var(--texte-lg), 1.5vw, 21px); font-weight: 500; line-height: 1.35; color: var(--encre-douce); }
#principal .module-intro p { font-size: var(--texte-lg); line-height: 1.65; max-width: 34em; margin: 0 0 var(--espace-3-5); color: var(--encre); text-align: left; }
#principal .module-h4 { margin: 30px 0 var(--espace-3-5); font-size: var(--texte-base); font-weight: 700; color: var(--marine); text-align: left; }
.module-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--espace-3) var(--espace-8); }
#principal .module-liste li { position: relative; margin: 0; padding-left: 30px; font-size: var(--texte-base); line-height: 1.55; }
/* Coche au trait de bienvenue-event.com, 20 px, rose, sans pastille (E18) */
.module-liste li::before { content: ""; position: absolute; left: 0; top: 3px; width: 20px; height: 20px;
  background: var(--rose-charte); -webkit-mask: var(--coche) center / 20px no-repeat; mask: var(--coche) center / 20px no-repeat; }
.module-modes { list-style: none; margin: 0; padding: 0; display: grid; gap: 0 var(--espace-8); border-top: 1px solid var(--filet); }
#principal .module-modes li { margin: 0; padding: var(--espace-3-5) 0; border-bottom: 1px solid var(--filet); font-size: var(--texte-base); line-height: 1.55; }
.module-modes strong { display: block; margin-bottom: 2px; color: var(--marine); font-weight: 700; }
#principal .module-suite p { font-size: var(--texte-base); line-height: 1.65; max-width: 34em; margin: 18px 0 0; color: var(--encre-douce); text-align: left; }
.module-plus { margin-top: 26px; border-top: 1px solid var(--filet); }
.module-plus summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: var(--espace-4); padding: var(--espace-4) 0; color: var(--marine); }
.module-plus summary::-webkit-details-marker { display: none; }
#principal .module-plus summary h4 { margin: 0; font-size: var(--texte-base); font-weight: 600; color: inherit; text-align: left; }
.module-plus summary svg { flex: none; color: var(--rose-bouton); transition: transform var(--duree-moyenne) cubic-bezier(.16, 1, .3, 1); }
.module-plus[open] summary svg { transform: rotate(180deg); }
.module-plus summary:hover h4 { color: var(--rose-lien); }
.module-plus summary:focus-visible { outline: 2px solid var(--rose-bouton); outline-offset: 4px; border-radius: 6px; }
#principal .module-plus p { font-size: var(--texte-base); line-height: 1.65; max-width: 34em; margin: 0 0 var(--espace-3-5); text-align: left; }
@media (min-width: 1280px) { .module-liste, .module-modes { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) {
  .modules-bsoft { display: grid; grid-template-columns: minmax(250px, 330px) minmax(0, 1fr); gap: clamp(var(--espace-12), 6vw, var(--espace-24)); align-items: start; }
  .modules-scene { position: sticky; top: 120px; }
  .modules-scene-nav li { margin: 0; }
  #principal .modules-scene-nav a { display: block; padding: var(--espace-1-5) 0 var(--espace-2-5); font-family: var(--police-titre); font-size: 27px; font-weight: 600; line-height: 1.15;
    letter-spacing: -0.01em; color: var(--texte-inactif) !important; transition: color .35s cubic-bezier(.16, 1, .3, 1); }
  #principal .modules-scene-nav a:hover, #principal .modules-scene-nav a[aria-current="true"] { color: var(--marine) !important; }
  .modules-scene-nav a span { padding-bottom: 3px; background: linear-gradient(var(--rose-charte), var(--rose-charte)) left bottom / 0 2px no-repeat; transition: background-size .5s cubic-bezier(.16, 1, .3, 1); }
  .modules-scene-nav a[aria-current="true"] span { background-size: 100% 2px; }
  .modules-visuel { position: relative; margin-top: var(--espace-9); width: 250px; aspect-ratio: 300 / 268; }
  .modules-visuel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: var(--espace-3-5); box-sizing: border-box; opacity: 0;
    transform: translateY(10px); filter: blur(4px); transition: opacity .45s cubic-bezier(.16, 1, .3, 1), transform .6s cubic-bezier(.16, 1, .3, 1), filter .45s; }
  .modules-visuel img.actif { opacity: 1; transform: none; filter: none; }
}
@media (max-width: 1099px) {
  /* Bord du texte sur la gouttière, comme le reste de la page ; bandeau des modules d'un bord à l'autre de l'écran */
  .modules-bsoft { --modules-retrait: var(--gouttiere); padding: 0; }
  .modules-scene { position: sticky; top: var(--entete-hauteur, 0px); z-index: 20; margin: 0 calc(-1 * var(--modules-retrait)) var(--espace-2); padding: var(--espace-2-5) var(--modules-retrait); background: var(--teinte); border-bottom: 1px solid var(--filet); }
  .modules-scene-nav ul { display: flex; gap: var(--espace-2); overflow-x: auto; scrollbar-width: none; }
  .modules-scene-nav ul::-webkit-scrollbar { display: none; }
  .modules-scene-nav li { flex: none; margin: 0; }
  #principal .modules-scene-nav a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 var(--espace-4); border-radius: var(--rayon-pilule); border: 1px solid var(--filet);
    background: var(--blanc); color: var(--marine) !important; font-size: 15px; font-weight: 600; white-space: nowrap; transition: background var(--duree-moyenne), color var(--duree-moyenne), border-color var(--duree-moyenne); }
  #principal .modules-scene-nav a[aria-current="true"] { background: var(--marine); border-color: var(--marine); color: var(--sur-marine) !important; }
  .modules-visuel { display: none; }
  .module .module-vignette { display: block; width: 132px; height: auto; margin: 0 0 18px; }
  .module { padding: var(--espace-10) 0; }
  #principal .module-titre { scroll-margin-top: calc(var(--entete-hauteur) + 22px + 64px); }
}
@media (prefers-reduced-motion: reduce) { .modules-bsoft * { transition: none !important; } }

/* Questions fréquentes : questions visibles (h3), réponses repliées */
.faq-dans-rangee { width: 100%; padding: var(--section-y) 0; }
.faq-bsoft h2 { text-align: center; }
/* Rangées à filet comme bienvenue-event.com (E19) : question en Figtree 600, chevron marine qui pivote, ouverture
   animée en 250 ms (rien si le visiteur demande moins d'animations ; sans ::details-content, ouverture sèche) */
.faq-liste { max-width: var(--largeur-lecture); margin: var(--espace-8) auto 0; display: grid; gap: 0; }
.faq-question { background: none; border: 0; border-bottom: 1px solid var(--filet); border-radius: 0; interpolate-size: allow-keywords; }
.faq-question summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: var(--espace-4); padding: var(--espace-5) 0; }
.faq-question summary::-webkit-details-marker { display: none; }
.faq-question summary::after {
  content: "" / ""; flex: none; width: 20px; height: 20px; background: var(--chevron-faq);
  -webkit-mask: var(--chevron-bas) center / 20px no-repeat; mask: var(--chevron-bas) center / 20px no-repeat;
  transition: rotate var(--duree-etat) var(--courbe-sortie);
}
.faq-question[open] summary::after { rotate: 180deg; }
#principal .faq-question summary h3 {
  margin: 0; font-family: var(--police-texte) !important; font-weight: 600 !important; font-size: var(--texte-item);
  line-height: var(--interligne-item); text-align: left;
}
#principal .faq-question > p { margin: 0; padding: 0 var(--espace-10) var(--espace-5) 0; max-width: 34em; color: var(--marine-70); line-height: var(--interligne-lecture); }
.faq-question::details-content {
  block-size: 0; overflow-y: clip; opacity: 0;
  transition: block-size var(--duree-etat) var(--courbe-sortie), opacity var(--duree-etat) var(--courbe-sortie), content-visibility var(--duree-etat) allow-discrete;
}
.faq-question[open]::details-content { block-size: auto; opacity: 1; }
.faq-question summary:focus-visible { outline: 2px solid var(--rose-bouton); outline-offset: 4px; border-radius: 4px; }
@media (prefers-reduced-motion: reduce) {
  .faq-question::details-content, .faq-question summary::after { transition: none; }
}

/* Liens dans le bandeau marine */
#principal .conteneur.fond-marine p a { color: var(--sur-marine) !important; text-decoration: underline; }
#principal .conteneur.fond-marine .texte-bloc { text-align: center !important; }
#principal .conteneur.fond-marine .texte-bloc > p { margin-left: auto; margin-right: auto; }
/* Formulaire de démonstration de /bienvenue-formation/ sur le bandeau marine (critique Impeccable du 29/10/2026) :
   carte blanche, quel que soit le fond de la page de Crisp */
#principal .conteneur.fond-marine iframe { display: block; background: var(--blanc); border-radius: var(--rayon-carte); }
/* Sur téléphone, l'iframe est seule dans sa colonne (sans .colonne-contenu) : marge des contenus de l'export (2,82 %),
   pour que la carte s'aligne sur la gouttière comme le titre au-dessus */
@media (max-width: 639px) { #principal .conteneur.fond-marine .colonne > iframe { width: 94.36%; margin-inline: 2.82%; } }

@media (max-width: 960px) {
  .accueil-logos, .grille-logos { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 640px) {
  .accueil-haut .accueil-haut-texte > .colonne-contenu { padding: var(--espace-14) var(--espace-4) var(--espace-22) !important; }
  .accueil-reperes { column-gap: var(--espace-5); }
  /* Grilles de logos : 3 par rangée (4 rendaient illisibles les logos allongés, CCI Paris, BnF) ; accueil : 8 en 4 x 2 */
  .grille-logos { grid-template-columns: repeat(3, 1fr); }
  .grille-logos li { padding: var(--espace-1); }
}

/* QA du 27/10/2026 */
/* Cibles tactiles d'au moins 24 px : icônes sociales. */
.reseaux-liste .reseau-icone { display: inline-flex; align-items: center; justify-content: center; min-width: 24px; min-height: 24px; }
/* Liste « Toutes les solutions ERP » des pages d'intégration : deux logos par rangée sur mobile au lieu d'un. */
@media (max-width: 800px) {
  .articles-recents-erp .grille-colonnes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--espace-5) var(--espace-4); margin-inline: 0 !important; }
  .articles-recents-erp .grille-colonnes > .grille-colonne { width: auto !important; float: none !important; margin: 0 !important; padding: 0 !important; }
  .articles-recents-erp .articles-recents-contenu h3 { font-size: var(--texte-base); }
}
/* Audit Impeccable du 28/10/2026 : un lien qui ne contient qu'une image prend sa taille, pour que le focus l'entoure. */
.cadre-image > a { display: inline-block; }
/* Le cadre de l'image coupe ce qui dépasse (overflow: hidden) : contour tracé à l'intérieur (second audit, accueil) */
#principal .cadre-image > a:focus-visible { outline-offset: -3px !important; }

/* /bienvenue-formation/ : liste des intégrations, autrefois 17 titres h3 à tiret (audit B3) ; deux colonnes si la place le permet */
#principal .liste-integrations { columns: 2 14em; column-gap: 2em; }
#principal .liste-integrations li { break-inside: avoid; }

/* ---------- Actualités (outils/actualites.py) : article léger, sans balisage de l'export ---------- */
.article-bsoft {
  /* Largeur de lecture de 712 px (760 moins les marges de 24 px d'avant) ; les marges latérales sont la gouttière de #principal */
  box-sizing: border-box; max-width: 712px; margin: 0 auto; padding: var(--espace-14) 0 var(--espace-18);
  color: var(--marine); font-family: var(--police-texte); font-size: 17px; line-height: 1.65;
}
.article-entete { margin-bottom: var(--espace-8); }
.article-date { margin: 0 0 var(--espace-3); font-size: var(--texte-sm); color: color-mix(in srgb, var(--marine) 72%, var(--blanc)); }
.article-bsoft h1 { margin: 0; text-wrap: balance; }
.article-chapeau { margin: var(--espace-5) 0 0; font-size: var(--texte-xl); line-height: 1.5; }
.article-image { display: block; width: 100%; height: auto; margin: 0 0 var(--espace-10); border: 1px solid var(--filet); border-radius: var(--rayon-carte); }
.article-bsoft h2 { margin: var(--espace-10) 0 var(--espace-3); }
/* Après la règle des H2 (même spécificité) : 22 à 30 px dans l'article, plus petit que son H1 (second audit, 36 px avant) */
#principal .article-bsoft h2 { font-size: var(--texte-titre-carte) !important; line-height: 1.25 !important; }
.article-corps p, .article-corps ul { margin: 0 0 var(--espace-4); max-width: 34em; }
.article-corps li { margin-bottom: var(--espace-2); }
#principal .article-bsoft a:not(.bouton-bloc) { text-decoration: underline; text-underline-offset: 3px; }
.article-actions { display: flex; flex-wrap: wrap; gap: var(--espace-3); margin: var(--espace-6) 0 0; }
/* Lieu et date d'un communiqué (ancien H2 du communiqué de 2021) */
#principal .article-lieu-date { font-weight: 600; color: var(--marine-70); }
.article-sources { margin-top: var(--espace-12); border-top: 1px solid var(--filet); font-size: 15px; }
#principal .article-bsoft .article-sources h2 { margin: var(--espace-6) 0 var(--espace-2); font-size: var(--texte-lg) !important; }
.article-sources ul { margin: 0; padding-left: var(--espace-5); }
.article-suite { margin: var(--espace-10) 0 0; font-size: 15px; }
@media (max-width: 767px) {
  .article-bsoft { padding: var(--espace-8) 0 var(--espace-12); font-size: var(--texte-base); }
  .article-chapeau { font-size: var(--texte-lg); }
}

/* Listes d'articles (accueil, catégories) : cartes légères, un seul lien étendu à toute la carte (un arrêt de
   tabulation, nom accessible = titre) */
.actualites-intro { margin: 0 0 var(--espace-6); }
.actualites-cartes {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: var(--espace-6); grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
}
.actualite-carte {
  position: relative; display: flex; flex-direction: column; margin: 0;
  background: var(--blanc); border: 1px solid var(--bord-carte); border-radius: var(--rayon-carte); box-shadow: var(--ombre-action); overflow: hidden;
}
.actualite-image { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; background: var(--teinte); }
#principal .actualites-cartes .actualite-date { margin: var(--espace-5) var(--espace-6) 0; font-size: var(--texte-sm); color: color-mix(in srgb, var(--marine) 72%, var(--blanc)); }
.actualites-cartes .actualite-titre { margin: var(--espace-1-5) var(--espace-6) var(--espace-6); font-size: var(--texte-xl); line-height: 1.3; text-wrap: balance; }
.actualites-cartes .actualite-titre:has(+ .actualite-resume) { margin-bottom: var(--espace-2); }
#principal .actualites-cartes .actualite-resume { margin: 0 var(--espace-6) var(--espace-6); font-size: 15px; line-height: 1.55; }
#principal .actualite-titre a { color: var(--marine) !important; text-decoration: none; }
.actualite-titre a::after { content: ""; position: absolute; inset: 0; border-radius: var(--rayon-carte); }
#principal .actualite-carte:hover .actualite-titre a,
#principal .actualite-titre a:focus-visible {
  text-decoration: underline; text-decoration-color: var(--rose-charte); text-decoration-thickness: 2px; text-underline-offset: 4px;
}
.actualite-titre a:focus-visible { outline: none !important; }
.actualite-carte:has(a:focus-visible) { outline: 2px solid var(--rose-bouton); outline-offset: 2px; }
/* Accueil : actualités sans cadre de carte (30/10/2026), image arrondie, date et titre sur la teinte ; les pages de
   catégorie gardent leurs cartes */
.accueil-actualites .actualite-carte { border: 0; border-radius: 0; background: none; box-shadow: none; overflow: visible; }
.accueil-actualites .actualite-image { border-radius: var(--rayon-carte); background: var(--blanc); }
#principal .accueil-actualites .actualite-date { margin: var(--espace-4) 0 0; }
.accueil-actualites .actualites-cartes .actualite-titre { margin: var(--espace-1-5) 0 0; }

/* ---------- Recette par agents du 28/10/2026 (workspace/qa-2026-10-28/) ---------- */
/* Titres collés au texte : H1 et H2 en tête d'un bloc de texte de l'export gardaient 5 px (Impeccable P1) */
#principal .texte-bloc > :is(h1, h2):not(:last-child) { margin-bottom: var(--espace-4) !important; }
/* Rythme des titres dans le texte (second audit Impeccable, 28/10/2026 : 11 à 35 px au-dessus d'un H2, 12 à 20 au-dessus
   d'un H3, 31 titres plus près du bloc précédent que de leur texte) : un titre qui suit un bloc s'en détache (H2 48 px,
   H3 32 px) et reste près de son texte (16 et 12 px). Dans le texte, la marge du paragraphe précédent se confond avec
   celle du titre ; dans les colonnes de l'export (boîtes flexibles), elles s'additionnent (20 + 32). Pas dans les
   cartes, où le titre suit l'image. */
#principal .texte-bloc > h2:not(:first-child) { margin-top: var(--espace-12) !important; }
#principal .texte-bloc > h3:not(:first-child) { margin-top: var(--espace-8) !important; margin-bottom: var(--espace-3) !important; }
#principal .colonne:not(.carte) > .colonne-contenu > .titre-bloc:not(:first-child):has(> h2) { margin-top: var(--espace-8) !important; }
#principal .colonne:not(.carte) > .colonne-contenu > .titre-bloc:has(> h2) { margin-bottom: var(--espace-4) !important; }
#principal .colonne:not(.carte) > .colonne-contenu > .titre-bloc:not(:first-child):has(> h3) { margin-top: var(--espace-8) !important; }
#principal .colonne:not(.carte) > .colonne-contenu > .titre-bloc:has(> h3) { margin-bottom: var(--espace-2) !important; }
/* Titre en tête d'une colonne pleine largeur qui suit une autre colonne de la même rangée (sections de l'export empilées) */
#principal .colonne-pleine:not(.carte):not(:first-child) > .colonne-contenu > .titre-bloc:first-child:has(> h2) { margin-top: var(--espace-8) !important; }
/* Colonne qui ne porte qu'un titre de section : sa marge basse s'ajoutait à la marge haute de la colonne suivante
   (titre à 92 à 137 px de son contenu, second audit, constat institutionnel-5) */
#principal .colonne-pleine:not(.carte):has(> .colonne-contenu > .titre-bloc:only-child) { margin-bottom: 0 !important; }
#principal .titre-bloc { margin-bottom: max(var(--espace-4), var(--marge-bas, 0px)) !important; }
/* Titres de l'export écrits en p : titre du haut de page sur vidéo à l'échelle « display », titres de carte à l'échelle
   des cartes, les autres jamais au-dessus d'un H2 (inversion à 390 px sur /bienvenue-formation/, Impeccable P1) */
#principal .titre-bloc-p { font-size: min(var(--taille, 1em), var(--texte-titre)) !important; }
#principal .carte .titre-bloc-p, #principal .carte h2.titre-bloc-texte { font-size: var(--texte-titre-carte) !important; }
/* Boutons « pleine largeur » de l'export : à la taille de leur texte, sauf sur téléphone (bouton de 828 px, qa-c) */
@media (min-width: 640px) { #principal .bouton-bloc.bouton-pleine-largeur { width: auto !important; } }
/* Sur téléphone, sans la marge de 5 px de mise-en-page.css (.bouton-bienvenue-formation) : le bouton sortait du cadre de 5 px */
@media (max-width: 639px) { #principal .bouton-bloc.bouton-pleine-largeur { margin-inline: 0; } }

/* « Retour en haut » : hors de la tabulation tant qu'il est invisible ; contour blanc et marine, lisible sur le contenu
   clair comme sur le pied marine (rose sur marine : 2,996:1, RGAA 10.7) */
#haut-de-page:not(.haut-de-page-actif) { visibility: hidden; }
#haut-de-page:focus-visible { outline: 3px solid var(--blanc) !important; outline-offset: 0; box-shadow: 0 0 0 6px var(--marine); }
/* Lien d'évitement de la 404 et du plan du site (sans mise-en-page.css) */
:is(.page-erreur-corps, .page-simple-corps) .lien-evitement { position: absolute; left: 16px; top: -200px; z-index: 100001; padding: var(--espace-3) var(--espace-4); border-radius: var(--rayon-icone); background: var(--blanc); color: var(--marine); font-weight: 600; }
:is(.page-erreur-corps, .page-simple-corps) .lien-evitement:focus { top: 16px; }
/* Tableau de bienvenue-event.com (E26) : filets de ligne, 14 px, sans cadre ni grille */
#principal table { border: 0 !important; box-shadow: none !important; font-size: var(--texte-petit); line-height: 1.714; border-collapse: collapse; }
#principal :is(tr, th, td) { background: none !important; }
#principal :is(th, td) { border: 0 !important; border-bottom: 1px solid var(--filet) !important; padding: var(--espace-2) var(--espace-3) var(--espace-2) 0 !important; vertical-align: top; }
#principal th { font-family: var(--police-titre); font-weight: 600; color: var(--marine); text-align: left; }
/* Carte du formulaire de contact : ombre légère des cartes où l'on agit (E30) */
#principal .colonne > .colonne-contenu:has(iframe[src*="crisp.chat"]) { box-shadow: var(--ombre-action) !important; }
/* Détecteur Impeccable (28/10/2026) : un h2 qui suit du texte s'en détache (16 px au-dessus comme au-dessous sur la
   politique de confidentialité). Mesure des modules de /bienvenue-formation/ : 34 em (règles .module-intro et .module-suite) */
#principal .texte-bloc > * + h2 { margin-top: var(--espace-10); }
/* ---------- Téléphones : gouttières, bouton « Retour en haut », cibles du pied de page ---------- */
@media (max-width: 767px) {
  /* Pas de bulle Crisp sur téléphone : le bouton passe dans le coin, à 44 px (audit C6), au-dessus de la barre de contact */
  #haut-de-page.lien-haut-de-page { width: 44px !important; height: 44px !important; right: 16px !important; bottom: calc(var(--barre-hauteur) + 16px) !important; }
  /* Liens du pied de page : cibles de 40 px de haut (audit C7) */
  .pied-colonne li + li { margin-top: 0; }
  .pied-colonne a, .pied-legal a { display: inline-flex; align-items: center; min-height: 40px; }
}

/* ---------- Barre de contact des téléphones (outils/en_tete.py, fonction barre) ----------
   Modèle de bienvenue-event.com (BarreContact.astro) : « Demander une démonstration » (même cible que l'en-tête) et
   appel du standard, en bas d'écran sous 768 px, où il n'y a pas de bulle Crisp (crisp.js). */
.barre-contact { display: none; }
@media (max-width: 767px) {
  /* Barre de contact : filet de 1 px, 8 + 44 + 8 px, plus la zone sûre des téléphones à encoche */
  :root { --barre-hauteur: calc(61px + env(safe-area-inset-bottom)); }
  .barre-contact {
    position: fixed; inset: auto 0 0; z-index: 9000;
    box-sizing: border-box; display: flex; gap: var(--espace-2);
    padding: var(--espace-2) var(--espace-3) calc(var(--espace-2) + env(safe-area-inset-bottom));
    border-top: 1px solid color-mix(in srgb, var(--marine) 15%, transparent);
    background: var(--blanc);
    box-shadow: 0 -10px 30px -18px color-mix(in srgb, var(--marine) 45%, transparent);
    font-family: var(--police-texte);
  }
  .barre-bouton {
    box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; gap: var(--espace-2);
    min-height: var(--cible); padding: 0 var(--espace-3); border-radius: var(--rayon-pilule);
    font-size: var(--texte-petit); font-weight: 600; line-height: 1.3; white-space: nowrap; text-decoration: none !important;
    transition: background-color var(--duree-courte) ease, border-color var(--duree-courte) ease;
  }
  .barre-demo { flex: 1 1 0; border: 1px solid var(--rose-bouton-bord); background: var(--rose-bouton); color: var(--sur-marine) !important; }
  .barre-demo:is(:hover, :focus-visible) { background: var(--rose-bouton-survol); }
  .barre-appel { flex: none; width: 44px; padding: 0; border: 1px solid var(--bord-secondaire); background: var(--blanc); color: var(--marine) !important; }
  .barre-appel:is(:hover, :focus-visible) { border-color: var(--bord-secondaire-survol); background: var(--teinte); }
  /* La page s'arrête au-dessus de la barre ; un élément qui reçoit le focus n'est pas caché dessous (RGAA 10.7) */
  body { padding-bottom: var(--barre-hauteur) !important; }
  :is(#principal, .pied-site) :is(a, button, summary, input, select, textarea, [tabindex]) { scroll-margin-bottom: calc(var(--barre-hauteur) + 12px); }
  /* Menu mobile ouvert : il a son propre bouton de démonstration et le téléphone */
  body.entete-ouvert .barre-contact { display: none; }
}
@media (max-width: 767px) and (prefers-reduced-motion: reduce) {
  .barre-bouton { transition: none; }
}

/* ---------- Page 404 (outils/page_404.py), sur le modèle de celle de bienvenue-event.com ---------- */
.page-erreur-corps, .page-simple-corps { margin: 0; background: var(--blanc); }
/* Sans mise-en-page.css : boîtes bordure comprise, comme sur les autres pages */
:is(.page-erreur-corps, .page-simple-corps), :is(.page-erreur-corps, .page-simple-corps) :is(*, ::before, ::after) { box-sizing: border-box; }
.page-erreur { max-width: 28rem; margin: 0 auto; padding: calc(var(--entete-hauteur) + var(--espace-16)) var(--espace-4) var(--espace-20); text-align: center; }
.page-erreur-code { margin: 0 0 var(--espace-8); font: 700 clamp(96px, 24vw, 128px) / 1 var(--police-texte); color: var(--rose-bouton); }
.page-erreur h1 { margin: 0; }
.page-erreur-texte { margin: var(--espace-4) 0 var(--espace-6); font-size: var(--texte-lg); line-height: 28px; color: color-mix(in srgb, var(--marine) 72%, var(--blanc)); }
.page-erreur-titre { margin: var(--espace-14) 0 var(--espace-3); font-size: var(--texte-xl); line-height: 1.3; }
.page-erreur-liens { margin: 0; padding: 0; list-style: none; }
.page-erreur-liens a { display: inline-flex; align-items: center; min-height: 40px; color: var(--rose-lien); text-decoration: underline; text-underline-offset: 4px; }
.page-erreur-liens a:hover { color: var(--marine); }

/* ---------- Plan du site (outils/plan_du_site.py, RGAA 12.1) : même gabarit que la 404, rubriques en colonnes ---------- */
.plan-site { box-sizing: border-box; max-width: var(--largeur-cadre); margin: 0 auto; padding: var(--espace-12) var(--gouttiere) var(--espace-20); }
.plan-site h1 { margin: 0 0 var(--espace-10); }
.plan-rubriques { display: grid; grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr)); gap: var(--espace-10) var(--espace-12); align-items: start; }
.plan-titre { margin: 0 0 var(--espace-2); font-size: var(--texte-xl); line-height: 1.3; }
.plan-rubrique ul { margin: 0; padding: 0; list-style: none; }
/* Espacement constant, que l'intitulé tienne sur une ligne ou deux (cible de 40 px au moins sur une ligne) */
.plan-rubrique a { display: inline-block; padding: var(--espace-2) 0; line-height: 24px; color: var(--rose-lien); text-decoration: underline; text-underline-offset: 4px; }
.plan-rubrique a:hover { color: var(--marine); }

/* Archives de Bienvenue Formation (outils/actualites.py, ARCHIVES) : cartes sans date, logo ou illustration entiers */
.actualites-cartes--archive { max-width: none; margin-bottom: var(--section-y); }
/* Pages des catégories : la liste finit la page, elle ne touche plus le pied (second audit, 0 px avant) */
.actualites-liste:last-child > .actualites-cartes:not(.actualites-cartes--archive):last-child { margin-bottom: var(--section-y); }
.actualites-cartes--archive .actualite-image { object-fit: contain; padding: var(--espace-6); background: var(--blanc); border-bottom: 1px solid var(--filet); }
#principal .actualites-cartes--archive .actualite-titre { margin-top: var(--espace-5); }

/* Images en sizes="auto" (chargement différé) : taille réservée avant le chargement, règle reprise de la balise <style> que l'export copiait dans chaque page (outils/restes_export.py tailles-auto) */
img:is([sizes=auto i],[sizes^="auto," i]){contain-intrinsic-size:3000px 1500px}