/* Charte 2026 de bsoft.fr : apparence de www.bienvenue-event.com, accent rose du logo Bsoft.
   Chargée après les feuilles d'Avada sur toutes les pages. Source : site-bsoft/docs/mise-a-jour-2026/habillage.md */

@font-face {
  font-family: "Figtree";
  src: url("fonts/figtree.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.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) */
  --degrade-marine: linear-gradient(120deg, #0e2853 0%, #12336a 55%, #1a4a8f 100%);
  --police-texte: "Figtree", system-ui, sans-serif;
  --police-titre: "Source Serif 4", Georgia, serif;

  /* Palette globale d'Avada : fond clair, accent, bandeau, pied de page, texte */
  --awb-color2: #f1f3f6; --awb-color2-h: 216; --awb-color2-s: 22%; --awb-color2-l: 95%;
  --awb-color4: #cf3466; --awb-color4-h: 341; --awb-color4-s: 62%; --awb-color4-l: 51%;
  --awb-color5: #0e2853; --awb-color5-h: 217; --awb-color5-s: 71%; --awb-color5-l: 19%;
  --awb-color6: #0e2853; --awb-color6-h: 217; --awb-color6-s: 71%; --awb-color6-l: 19%;
  --awb-color7: #0e2853; --awb-color7-h: 217; --awb-color7-s: 71%; --awb-color7-l: 19%;
  /* Violet de Bienvenue Formation : structure en marine, dégradés vers le rose */
  --awb-custom_color_3: #0e2853; --awb-custom_color_3-h: 217; --awb-custom_color_3-s: 71%; --awb-custom_color_3-l: 19%;
  --awb-custom_color_8: #c42e5f; --awb-custom_color_8-h: 340; --awb-custom_color_8-s: 62%; --awb-custom_color_8-l: 47%;

  --awb-typography1-font-family: var(--police-texte);
  --awb-typography2-font-family: var(--police-texte);
  --awb-typography3-font-family: var(--police-texte);
  --awb-typography4-font-family: var(--police-texte);
  --awb-typography5-font-family: var(--police-texte);
  --awb-custom_typography_1-font-family: var(--police-texte);
  --awb-custom_typography_2-font-family: var(--police-texte);
  --awb-custom_typography_3-font-family: var(--police-texte);
  --awb-custom_typography_4-font-family: var(--police-texte);
  --awb-custom_typography_5-font-family: 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: #f2759a;                           /* « depuis 2010 » sur la vidéo */
  --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: linear-gradient(120deg, rgb(14 40 83 / 93%) 0%, rgb(18 51 106 / 90%) 55%, rgb(26 74 143 / 86%) 100%);
  --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: 1.125rem;
  --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 */

  /* FAQ et lecture (E19) ; mouvement de bienvenue-event.com (250 ms, courbe de sortie) */
  --largeur-lecture: 768px;
  --texte-item: 1.125rem;          /* 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");
  --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.375rem, 1.2rem + .8vw, 1.875rem);  /* 22 → 30 */
  --texte-intro: 1.25rem;
  --texte-item-fort: 1.25rem;
  --interligne-display: 1.15;
  --interligne-titre: 1.333;
  --approche-titre: -0.02em;
  --approche-texte: -0.025em;
  --body_typography-letter-spacing: var(--approche-texte);         /* approche du texte d'Avada */
  --awb-typography4-letter-spacing: var(--approche-texte);
  --awb-typography5-letter-spacing: 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: .875rem;
  --halo-clair: radial-gradient(ellipse 80% 50% at 50% -10%, color-mix(in srgb, var(--rose-charte) 12%, transparent), transparent),
    radial-gradient(ellipse 60% 40% at 20% 0%, color-mix(in srgb, var(--marine) 6%, transparent), transparent);

  /* Entrées animées de bienvenue-event.com (E13) */
  --duree-entree: 500ms;
  --deplacement-entree: 12px;
}
@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,
.fusion-title-heading {
  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 d'Avada 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 */
#main h2:not(.module-titre, .actualite-titre, .plan-titre), #main .fusion-title-heading:is(h2, div) { font-size: var(--texte-titre) !important; line-height: var(--interligne-titre) !important; }
#main h3.fusion-title-heading { font-size: var(--texte-titre-carte) !important; line-height: 1.2 !important; }
#main :is(h3, h4):not(.fusion-title-heading):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 */
#main 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);
}
#main :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(#main, .pied-bsoft) :is(p, li) { text-wrap: pretty; }
::selection { background: var(--rose-20); color: var(--marine); }
#main a:not(.fusion-button):not(.awb-menu__main-a):not(:has(img)) { color: var(--rose-lien); }
#main a:not(.fusion-button):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) */
#main .fusion-text { text-align: left !important; }
#main .fusion-text > p,
#main .fusion-text > ul,
#main .fusion-text > 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 de 76rem au
   plus, 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 75rem (1 200 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). */
#main, #main :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 d'Avada, sauf si
   le visiteur demande moins d'animations. */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

/* Au-dessus du contenu : Avada donne 2000 aux éléments animés (.fusion-animated), qui passaient sur la barre */
.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: 16px; line-height: 1.3;
  transition: max-width .25s var(--entete-courbe), translate .25s var(--entete-courbe),
    border-radius .25s var(--entete-courbe), box-shadow .25s var(--entete-courbe), border-color .25s 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: 12px;
  max-width: 1280px; min-height: 72px; margin: 0 auto; padding: 12px;
}
.entete-bsoft ul { list-style: none; margin: 0; padding: 0; }
.entete-bsoft li { margin: 0; padding: 0; }
/* !important : la décoration des liens d'Avada (.awb-link-decoration #wrapper 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 12px; 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: 44px; padding: 10px 24px; border-radius: 999px;
  background: var(--rose-bouton); color: var(--sur-marine); font-size: 14px; 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 .2s 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 75rem) ---------- */
.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: 8px;
  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 .2s var(--entete-courbe), rotate .2s 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: 16px;
  overflow-y: auto; overscroll-behavior: contain;
  padding: 8px 12px 40px; background: var(--marine);
}
.entete-bsoft .connexion-bsoft { display: none; }
.entete-mobile { display: flex; flex-direction: column; gap: 16px; }
.entete-connexion { display: grid; gap: 8px; }
.entete-bsoft .entete-secondaire {
  display: flex; align-items: center; justify-content: center; min-height: 44px; padding: 10px 24px; border-radius: 999px;
  box-shadow: inset 0 0 0 1px var(--bord-secondaire-marine); font-size: 14px; 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 24px; padding-top: 8px; border-top: 1px solid var(--filet-sur-marine); }
.entete-bsoft .entete-contact a { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 12px; 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 .fusion-top-top-link { visibility: hidden; }
body.entete-ouvert .crisp-client { position: relative; z-index: 1 !important; }
@media (max-width: 74.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: 74.99rem) {
  .entete-bsoft .entete-demo, .entete-mobile { max-width: 26rem; }
}
@media (prefers-reduced-motion: no-preference) {
  .entete-bsoft.ouvert .entete-menu { transition: opacity .2s var(--entete-courbe), translate .2s var(--entete-courbe); }
  @starting-style { .entete-bsoft.ouvert .entete-menu { opacity: 0; translate: 0 -8px; } }
}

/* ---------- Ordinateur (75rem et plus) ---------- */
@media (min-width: 75rem) {
  .entete-cadre { padding: 12px 24px; }
  .entete-bouton, .entete-mobile { display: none; }
  .entete-menu { display: flex; align-items: center; gap: 12px; 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(76rem, calc(100% - 32px)); translate: 0 .5rem; border-radius: 9999px;
    box-shadow: var(--ombre-entete);
  }
}
/* Entre 1 200 et 1 279 px : marges réduites pour que la pilule (largeur moins 32 px) garde tout sur une ligne */
@media (min-width: 75rem) and (max-width: 79.99rem) {
  .entete-nav a { padding: 0 8px; }
  .entete-bsoft .connexion-bsoft > summary { padding: 10px 14px; }
  .entete-bsoft .entete-demo { padding: 10px 16px; }
}
@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: 6px;
  min-height: 44px; padding: 10px 20px; border-radius: 999px;
  color: var(--sur-marine); font-size: 14px; 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: 8px; 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: 44px; padding: 0 14px; 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 .fusion-button.fusion-button {
  font-family: var(--police-texte) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 1.375 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  min-height: 44px;
  padding: 10px 24px !important;
  border-radius: 999px !important;
  border: 1px solid var(--rose-bouton-bord) !important;
  transition: background-color 150ms cubic-bezier(.4, 0, .2, 1), border-color 150ms cubic-bezier(.4, 0, .2, 1), color 150ms 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: 8px;
}
body .fusion-button.fusion-button:hover,
body .fusion-button.fusion-button:focus-visible { background: var(--rose-bouton-survol) !important; }
body .fusion-button.fusion-button .fusion-button-text { color: var(--sur-marine) !important; font-size: inherit !important; font-weight: inherit !important; }
/* Icônes des boutons : couleur et taille du texte */
body .fusion-button.fusion-button 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'Avada, 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 d'awb-icons qu'Avada pose en ::before (règles de
   bsoft-static-fixes.css, fondue ici au lot 14 de la consolidation) */
#toTop::before, .fusion-top-top-link::before { content: none !important; }
#toTop { display: flex; justify-content: center; align-items: center; padding-bottom: 5px; }
#toTop i.icone-bsoft { color: var(--totop_icon_color, var(--blanc)); font-size: 32px; }
/* Boutons : boîte de la flèche de Font Awesome (0,875 em), sinon des libellés au plus juste passent à la ligne ; dessin
   agrandi à 1,25 em, le trait de Tabler étant plus fin que le glyphe plein */

/* 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, .fusion-fullwidth.video-background, #main .fusion-fullwidth.fond-marine) .fusion-button.fusion-button:not([href*="bienvenue.pro"]) {
  background: var(--blanc) !important;
}
:is(.section-bsoft--marine, .fusion-fullwidth.video-background, #main .fusion-fullwidth.fond-marine) .fusion-button.fusion-button:not([href*="bienvenue.pro"]) :is(.fusion-button-text, i) { color: var(--rose-bouton) !important; }
:is(.section-bsoft--marine, .fusion-fullwidth.video-background, #main .fusion-fullwidth.fond-marine) .fusion-button.fusion-button:not([href*="bienvenue.pro"]):is(:hover, :focus-visible) { background: var(--fond-bouton-clair-survol) !important; }
:is(.section-bsoft--marine, .fusion-fullwidth.video-background, #main .fusion-fullwidth.fond-marine) .fusion-button.fusion-button:not([href*="bienvenue.pro"]):is(:hover, :focus-visible) :is(.fusion-button-text, i) { color: var(--rose-bouton-survol) !important; }

/* Bouton secondaire sur marine : accès aux applications, contour blanc à 60 % */
body .fusion-button.fusion-button[href*="bienvenue.pro"] {
  background: var(--fond-secondaire-marine) !important;
  border: 1px solid var(--bord-secondaire-marine) !important;
  font-weight: 500 !important;
}
body .fusion-button.fusion-button[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(.fusion-tb-header, .fusion-tb-footer, .fusion-fullwidth.video-background, .section-bsoft--marine, #main .fusion-fullwidth.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: 20px 24px; margin: 28px 0; max-width: 34em; }
#main .sommaire .sommaire-titre { font-family: var(--police-titre); font-weight: 600; font-size: 18px; margin: 0 0 8px; color: var(--marine); }
.sommaire ol { margin: 0; padding-left: 1.4em; columns: 2; column-gap: 32px; }
.sommaire li { margin: 4px 0; break-inside: avoid; }
@media (max-width: 640px) { .sommaire ol { columns: 1; } }
#main .intertitre { margin: 1.6em 0 .5em; text-align: left; }
#main h4.intertitre { font-size: 19px; }
#main .intertitre-carte {
  font-family: var(--police-texte) !important; font-size: 16px !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 ---------- */
.fusion-fullwidth.video-background { position: relative; }
.fusion-fullwidth.video-background .fullwidth-video::after {
  content: ""; position: absolute; inset: 0; z-index: 2;
  background:
    radial-gradient(45% 80% at 50% 0%, color-mix(in srgb, var(--rose-charte) 16%, transparent), transparent 70%),
    var(--voile-video);
}
.fusion-fullwidth.video-background .fullwidth-overlay { display: none !important; }
.fusion-fullwidth.video-background > .fusion-row { position: relative; z-index: 6; }
.fusion-fullwidth.video-background .fusion-column-wrapper { background: transparent !important; background-image: none !important; }
.fusion-fullwidth.video-background :is(h1, h2, h3, .fusion-title-heading, p, li, .fusion-text) { color: var(--sur-marine) !important; }
.fusion-fullwidth.video-background .fusion-text a:not(.fusion-button) { 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). */
.fusion-fullwidth.video-background h1 .accent { color: var(--rose-sur-marine) !important; display: block; }

/* ---------- Sections ---------- */
#main .fusion-fullwidth { --awb-color2: var(--teinte); }
/* Trois fonds comme bienvenue-event.com (blanc, teinte, marine) : les rangées d'Avada à 10 et 30 % de marine passent
   sur la teinte (E7) ; les liens y restent roses (4,84:1) */
#main .fusion-fullwidth: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) */
#main .fusion-fullwidth.fond-marine {
  background: radial-gradient(45% 80% at 50% 0%, color-mix(in srgb, var(--rose-charte) 18%, transparent), transparent 70%), var(--degrade-marine) !important;
  padding-block: var(--section-y) !important;
}
#main .fusion-fullwidth.fond-marine :is(h1, h2, h3, .fusion-title-heading) { color: var(--sur-marine) !important; }
#main .fusion-fullwidth.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) {
  #main .fusion-fullwidth.fond-marine .fusion-button.fusion-button { width: 100%; }
}

/* Colonnes sur fond marine (ancien bleu #003366) : texte blanc */
#main .fusion-layout-column.colonne-marine > .fusion-column-wrapper { color: var(--sur-marine); }

/* Cartes : colonnes à bordure ou à ombre déclarée d'Avada, marquées « carte » (outils/classes_charte.py), un seul
   style (audit A5 : trois styles ; B7 : bordure cyan). Pas la classe fusion-column-has-shadow : Avada la pose aussi sur
   des colonnes sans ombre ni marge intérieure. */
#main .fusion-layout-column.carte > .fusion-column-wrapper {
  border: 1px solid var(--bord-carte) !important;
  border-radius: var(--rayon-carte) !important;
  background-color: var(--blanc);
  box-shadow: var(--ombre-carte) !important;
}
/* Taches violettes de l'ancienne charte sous les cartes (audit B4) ; vidéos de fond posées sur la marine */
#main .fusion-column-inner-bg-image { background-image: none !important; }
#main .fusion-fullwidth.video-background { background-image: none !important; background-color: var(--marine) !important; }

/* Articles récents et archives */
.fusion-recent-posts h4, .fusion-recent-posts h4 a,
.fusion-blog-layout-grid .blog-shortcode-post-title, .fusion-blog-layout-grid .blog-shortcode-post-title a,
.fusion-post-title, .fusion-post-title a { font-family: var(--police-texte) !important; color: var(--marine) !important; font-weight: 600 !important; }

/* Sommaire, listes à coches, légendes de galerie */
.awb-toc-el__item-anchor { color: var(--rose-lien) !important; }
/* Sommaire d'Avada au style du sommaire de la charte (E27) */
.awb-toc-el { background: var(--teinte); border-radius: var(--rayon-carte); padding: 20px 24px; max-width: 34em; }
.fusion-checklist .icon-wrapper, .fusion-li-icon { color: var(--rose-charte) !important; }
.fusion-gallery a, .fusion-gallery .fusion-gallery-image-caption { color: var(--rose-lien) !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: 1440px; margin: 0 auto; padding: 0 42px; }
.pied-grille {
  display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(4, minmax(0, 1fr));
  gap: 40px 48px; padding: 64px 0 48px;
}
.pied-accueil { display: inline-block; }
.pied-logo { display: block; width: 120px; height: auto; }
.pied-marque p { margin: 16px 0 0; max-width: 32ch; }
.pied-contact { margin-top: 20px !important; display: grid; gap: 4px; }
.pied-contact a { display: inline-flex; align-items: center; gap: 10px; min-height: 32px; }
.pied-icone { flex: none; width: 20px; height: 20px; }
.pied-bsoft .pied-titre {
  margin: 0 0 16px; 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: 8px; }
/* 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: 12px 32px;
  padding: 20px 0 88px; border-top: 1px solid var(--filet-sur-marine); font-size: 14px;
}
.pied-bas p { margin: 0 auto 0 0; }
.pied-reseaux { display: flex; gap: 4px; }
.pied-reseaux a { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 8px; }
.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: 4px 20px; }
@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-cadre { padding: 0 20px; }
  .pied-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 24px; padding: 48px 0 32px; }
  .pied-bas { flex-direction: column; align-items: flex-start; gap: 12px; }
  .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: 4px;
  border-left: 12px solid var(--sur-marine); border-right: 0; border-top: 7px solid transparent; border-bottom: 7px solid transparent;
}

/* ---------- Accueil ---------- */
.accueil-haut > .fusion-row { justify-content: center !important; }
.accueil-haut .accueil-haut-texte { width: 100% !important; max-width: 1120px; margin: 0 auto !important; }
.accueil-haut .accueil-haut-texte > .fusion-column-wrapper { padding: 88px 24px 80px !important; }
/* Hauts de page : H1 à l'échelle « display » de bienvenue-event.com, 32 à 60 px (E2) ; introduction de 20 px (E5) */
.accueil-haut h1, .histoire-haut h1, .fusion-fullwidth.video-background h1 { font-size: var(--texte-display) !important; line-height: var(--interligne-display) !important; }
#main .accueil-haut .fusion-text > p { font-size: var(--texte-intro); line-height: 1.4; }
#main .accueil-haut .fusion-text { text-align: center !important; }
#main .accueil-haut .fusion-text > p { max-width: 760px; margin: 0 auto; font-size: 19px; line-height: 1.6; }
.accueil-haut .fusion-imageframe { box-shadow: var(--ombre-image); }

/* Sections propres à la charte : pleine largeur, comme les rangées d'Avada (marge négative de #main) */
.section-bsoft { padding: var(--section-y) 0; background: var(--blanc); }
.width-100 .section-bsoft { margin-left: var(--hundredp_padding-hundred_percent_negative_margin); margin-right: var(--hundredp_padding-hundred_percent_negative_margin); }
.section-conteneur { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.section-bsoft h2 { text-align: center; font-size: clamp(1.75rem, 1.2rem + 1.6vw, 2.25rem); margin: 0 0 16px; }
#main .section-intro { text-align: center; max-width: 60ch; margin: 0 auto 40px !important; font-size: 18px; line-height: 1.6; color: var(--marine-70) !important; }
#main .section-suite { text-align: center; margin: 40px 0 0 !important; }
/* Lien de suite en bouton secondaire de bienvenue-event.com (E14) : pilule blanche, bord marine à 18 % */
#main .section-suite a:not(.fusion-button) {
  display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 10px 24px;
  border: 1px solid var(--bord-secondaire); border-radius: var(--rayon-pilule); background: var(--blanc);
  color: var(--marine) !important; font-size: var(--texte-petit); font-weight: 500; line-height: 1.375; text-decoration: none !important;
  transition: border-color .2s ease;
}
#main .section-suite a:not(.fusion-button):is(:hover, :focus-visible) { border-color: var(--bord-secondaire-survol); }

.accueil-reperes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.accueil-reperes li { background: var(--blanc); border: 1px solid var(--bord-carte); border-radius: var(--rayon-carte); padding: 24px; }
.accueil-reperes li::before { content: ""; display: block; width: 40px; height: 4px; border-radius: var(--rayon-pilule); background: var(--rose-charte); margin-bottom: 20px; }
.accueil-reperes strong { display: block; font-family: var(--police-titre); font-weight: 600; font-size: 44px; line-height: 1; color: var(--marine); margin-bottom: 12px; }
.accueil-reperes span { display: block; font-size: 16px; line-height: 1.5; color: var(--marine-70); }

.accueil-solutions, .accueil-actualites { background-color: var(--teinte) !important; }
.accueil-solutions .fusion-column-liftup-border > .fusion-column-wrapper {
  border-color: var(--bord-carte) !important; border-radius: var(--rayon-carte) !important; background-color: var(--blanc);
  box-shadow: var(--ombre-action) !important;
}
/* Cartes à lien d'Avada (« liftup ») : 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. */
#main .accueil-solutions .fusion-column-liftup-border .fusion-column-inner-bg { display: none !important; }
#main .fusion-column-liftup-border .hover-type-liftup::before { content: none !important; }
#main .fusion-column-liftup-border .fusion-column-inner-bg-image { border: 0 !important; transform: none !important; }
#main .fusion-column-liftup-border:hover .fusion-column-wrapper { border-color: var(--bord-carte) !important; border-radius: var(--rayon-carte) !important; }
.carte-produit-texte { text-align: center; color: var(--marine-70); margin-bottom: 24px; }
.carte-produit-texte p { font-size: 17px; line-height: 1.6; margin: 0 0 16px; }
.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: 28px; margin: 8px 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 auto; padding: 0; max-width: 1100px; display: grid; grid-template-columns: repeat(8, 1fr); gap: 16px; }
/* 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: 4px 12px; }
.accueil-logos img, .grille-logos img { display: block; width: 100%; max-width: 112px; height: auto; }
/* 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; }

/* Variantes de section : gris clair, marine */
.section-bsoft--teinte { background: var(--teinte); }
.section-bsoft--marine {
  background: radial-gradient(45% 80% at 50% 0%, color-mix(in srgb, var(--rose-charte) 18%, transparent), transparent 70%), var(--degrade-marine);
}
.section-bsoft--marine :is(h1, h2) { color: var(--sur-marine) !important; }
#main .section-bsoft--marine .section-intro { color: var(--sur-marine-discret) !important; }
#main .section-bsoft--marine a:not(.fusion-button) { color: var(--sur-marine) !important; text-decoration: underline; }

/* ---------- Bienvenue Formation : haut de page ---------- */
.fusion-column-wrapper > div:has(> .bf-connexion) { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.fusion-column-wrapper > div:has(> .bf-connexion) > .fusion-button { width: auto !important; }
#main .bf-prix { font-weight: 600; }
#main .bf-roles { font-size: 15px; margin: 16px 0 0; }
#main .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) .fusion-builder-row-inner > .fusion_builder_column_inner:first-child { width: 30% !important; }
  :is(#convocations, #presences, #evaluations, #signature) .fusion-builder-row-inner > .fusion_builder_column_inner:last-child { width: 70% !important; }
}

/* ---------- Notre histoire ---------- */
/* Haut de « Notre histoire » clair à halo, comme les pages intérieures de bienvenue-event.com (E23) */
.section-bsoft--halo { background: var(--halo-clair), var(--blanc); padding-bottom: 0; }
.histoire-haut h1 { text-align: center; margin: 0 0 16px; }
#main .histoire-haut .section-intro { margin-bottom: 0 !important; font-size: 19px; }
.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 32px 44px; }
.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: 16px; line-height: 1.5; color: var(--rose-lien); }
.frise h3 { font-size: 21px; margin: 4px 0 6px; }
.frise p { margin: 0; color: var(--marine-70); line-height: 1.6; }
.cartes-bsoft { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.cartes-bsoft li, .groupes li { background: var(--blanc); border: 1px solid var(--bord-carte); border-radius: var(--rayon-carte); padding: 24px; }
.cartes-bsoft li::before { content: ""; display: block; width: 40px; height: 4px; border-radius: var(--rayon-pilule); background: var(--rose-charte); margin-bottom: 20px; }
.cartes-bsoft h3 { font-size: 20px; margin: 0 0 8px; }
.cartes-bsoft p, .groupes p { margin: 0; color: var(--marine-70); line-height: 1.6; }
.metiers { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.metiers li { background: var(--teinte); border-radius: 999px; padding: 10px 20px; font-weight: 500; }
.groupes { list-style: none; margin: 0 auto; padding: 0; max-width: 960px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.groupes img { display: block; height: 40px; width: auto; margin-bottom: 20px; }
@media (max-width: 960px) { .cartes-bsoft { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .groupes { grid-template-columns: 1fr; } }

/* Références : groupes par secteur */
.references-bsoft { max-width: 1100px; margin: 0 auto; }
.references-bsoft .grille-logos { margin: 0 0 8px; }
#main .references-bsoft > p { max-width: 34em; font-size: 17px; line-height: 1.6; }

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

/* 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; max-width: 1180px; margin: 0 auto; padding: 0 24px; color: var(--encre); }
.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; }
#main .modules-scene-nav a { text-decoration: none !important; }
.module { border-top: 1px solid var(--filet); padding: 56px 0; }
.module:first-child { border-top: 0; padding-top: 4px; }
.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); }
#main .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(30px, 3vw, 40px); font-weight: 600; letter-spacing: -0.015em; }
.module-promesse { display: block; margin-top: 8px; font-family: var(--police-texte); font-size: clamp(18px, 1.5vw, 21px); font-weight: 500; line-height: 1.35; color: var(--encre-douce); }
#main .module-intro p { font-size: 18px; line-height: 1.65; max-width: 34em; margin: 0 0 14px; color: var(--encre); text-align: left; }
#main .module-h4 { margin: 30px 0 14px; font-size: 16px; font-weight: 700; color: var(--marine); text-align: left; }
.module-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px 32px; }
#main .module-liste li { position: relative; margin: 0; padding-left: 30px; font-size: 16px; 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 32px; border-top: 1px solid var(--filet); }
#main .module-modes li { margin: 0; padding: 14px 0; border-bottom: 1px solid var(--filet); font-size: 16px; line-height: 1.55; }
.module-modes strong { display: block; margin-bottom: 2px; color: var(--marine); font-weight: 700; }
#main .module-suite p { font-size: 16px; 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: 16px; padding: 16px 0; color: var(--marine); }
.module-plus summary::-webkit-details-marker { display: none; }
#main .module-plus summary h4 { margin: 0; font-size: 16px; font-weight: 600; color: inherit; text-align: left; }
.module-plus summary svg { flex: none; color: var(--rose-bouton); transition: transform .3s 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; }
#main .module-plus p { font-size: 16px; line-height: 1.65; max-width: 64ch; margin: 0 0 14px; 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(48px, 6vw, 96px); align-items: start; }
  .modules-scene { position: sticky; top: 120px; }
  .modules-scene-nav li { margin: 0; }
  #main .modules-scene-nav a { display: block; padding: 6px 0 10px; 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); }
  #main .modules-scene-nav a:hover, #main .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: 36px; width: 250px; aspect-ratio: 300 / 268; }
  .modules-visuel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 14px; 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) {
  /* La scène est posée directement dans une rangée d'Avada, dont les marges négatives attendent des colonnes à retrait :
     sans elles, le texte commençait à -4 px à 1 024 (recette qa-b). Bord du texte à 30 px, comme le reste de la page. */
  .fusion-row:has(> .modules-bsoft) { margin-inline: 0 !important; }
  .modules-bsoft { --modules-retrait: 20px; padding: 0 var(--modules-retrait); }
  @media (max-width: 640px) { .modules-bsoft { --modules-retrait: 14px; } }
  .modules-scene { position: sticky; top: var(--entete-hauteur, 0px); z-index: 20; margin: 0 calc(-1 * var(--modules-retrait)) 8px; padding: 10px var(--modules-retrait); background: var(--teinte); border-bottom: 1px solid var(--filet); }
  .modules-scene-nav ul { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; }
  .modules-scene-nav ul::-webkit-scrollbar { display: none; }
  .modules-scene-nav li { flex: none; margin: 0; }
  #main .modules-scene-nav a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--filet);
    background: var(--blanc); color: var(--marine) !important; font-size: 15px; font-weight: 600; white-space: nowrap; transition: background .3s, color .3s, border-color .3s; }
  #main .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: 40px 0; }
  #main .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: 32px 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: 16px; padding: 20px 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; }
#main .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;
}
#main .faq-question > p { margin: 0; padding: 0 40px 20px 0; max-width: 65ch; 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 */
#main .fusion-fullwidth.fond-marine p a { color: var(--sur-marine) !important; text-decoration: underline; }
#main .fusion-fullwidth.fond-marine .fusion-text { text-align: center !important; }
#main .fusion-fullwidth.fond-marine .fusion-text > p { margin-left: auto; margin-right: auto; }

@media (max-width: 960px) {
  .accueil-reperes { grid-template-columns: repeat(2, 1fr); }
  .accueil-logos, .grille-logos { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 640px) {
  .accueil-haut .accueil-haut-texte > .fusion-column-wrapper { padding: 56px 16px 88px !important; }
  #main .accueil-haut .fusion-text > p { font-size: 17px; }
  .section-conteneur { padding: 0 16px; }
  .accueil-reperes { grid-template-columns: 1fr; gap: 16px; }
  .accueil-reperes strong { font-size: 36px; }
  .video-pause { right: 16px; bottom: 16px; }
  /* 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: 4px; }
}

/* QA du 27/10/2026 */
/* Cibles tactiles d'au moins 24 px : icônes sociales. */
.fusion-social-networks .fusion-social-network-icon { 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) {
  .recent-posts-erp .fusion-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 16px; margin-inline: 0 !important; }
  .recent-posts-erp .fusion-columns > .fusion-column { width: auto !important; float: none !important; margin: 0 !important; padding: 0 !important; }
  .recent-posts-erp .recent-posts-content h4 { font-size: 16px; }
}
/* Audit Impeccable du 28/10/2026 : un lien qui ne contient qu'une image prend sa taille, pour que le focus l'entoure. */
.fusion-imageframe > a { display: inline-block; }

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

/* ---------- Actualités (outils/actualites.py) : article léger, sans balisage d'Avada ---------- */
.article-bsoft {
  box-sizing: border-box; max-width: 760px; margin: 0 auto; padding: 56px 24px 72px;
  color: var(--marine); font-family: var(--police-texte); font-size: 17px; line-height: 1.65;
}
.article-entete { margin-bottom: 32px; }
.article-date { margin: 0 0 12px; font-size: 14px; color: color-mix(in srgb, var(--marine) 72%, var(--blanc)); }
.article-bsoft h1 { margin: 0; font-size: clamp(32px, 4vw, 44px); line-height: 1.15; text-wrap: balance; }
.article-chapeau { margin: 20px 0 0; font-size: 20px; line-height: 1.5; }
.article-image { display: block; width: 100%; height: auto; margin: 0 0 40px; border: 1px solid var(--filet); border-radius: var(--rayon-carte); }
.article-bsoft h2 { margin: 40px 0 12px; font-size: 26px; line-height: 1.25; }
.article-corps p, .article-corps ul { margin: 0 0 16px; max-width: 34em; }
.article-corps li { margin-bottom: 8px; }
#main .article-bsoft a:not(.article-bouton) { text-decoration: underline; text-underline-offset: 3px; }
.article-actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 32px 0 0; }
#main .article-bouton {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 22px; border-radius: 999px;
  background: var(--rose-bouton); color: var(--sur-marine) !important; font-size: 15px; font-weight: 600; text-decoration: none !important;
}
#main .article-bouton:hover { background: var(--rose-bouton-survol); color: var(--sur-marine) !important; }
#main .article-bouton--secondaire { background: transparent; color: var(--marine) !important; box-shadow: inset 0 0 0 1px var(--marine); }
#main .article-bouton--secondaire:hover { background: var(--teinte); color: var(--marine) !important; }
.article-sources { margin-top: 48px; border-top: 1px solid var(--filet); font-size: 15px; }
.article-bsoft .article-sources h2 { margin: 24px 0 8px; font-size: 18px; }
.article-sources ul { margin: 0; padding-left: 20px; }
.article-suite { margin: 40px 0 0; font-size: 15px; }
@media (max-width: 767px) {
  .article-bsoft { padding: 32px 16px 48px; font-size: 16px; }
  .article-chapeau { font-size: 18px; }
}

/* 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 { max-width: 1200px; margin: 0 auto 24px; }
.actualites-cartes {
  list-style: none; margin: 0 auto; padding: 0; max-width: 1200px;
  display: grid; gap: 24px; 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); }
#main .actualites-cartes .actualite-date { margin: 20px 24px 0; font-size: 14px; color: color-mix(in srgb, var(--marine) 72%, var(--blanc)); }
.actualites-cartes .actualite-titre { margin: 6px 24px 24px; font-size: 20px; line-height: 1.3; text-wrap: balance; }
.actualites-cartes .actualite-titre:has(+ .actualite-resume) { margin-bottom: 8px; }
#main .actualites-cartes .actualite-resume { margin: 0 24px 24px; font-size: 15px; line-height: 1.55; }
#main .actualite-titre a { color: var(--marine) !important; text-decoration: none; }
.actualite-titre a::after { content: ""; position: absolute; inset: 0; border-radius: var(--rayon-carte); }
#main .actualite-carte:hover .actualite-titre a,
#main .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; }

/* ---------- 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 d'Avada gardaient 5 px (Impeccable P1) */
#main .fusion-text > :is(h1, h2):not(:last-child) { margin-bottom: 16px !important; }
#main .fusion-title { margin-bottom: max(16px, var(--awb-margin-bottom, 0px)) !important; }
/* Titres d'Avada é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) */
#main .fusion-title-size-paragraph { font-size: min(var(--awb-font-size, 1em), var(--texte-titre)) !important; }
#main .carte .fusion-title-size-paragraph, #main .carte h2.fusion-title-heading { font-size: var(--texte-titre-carte) !important; }
#main .fusion-fullwidth.video-background .fusion-title-size-paragraph { font-size: var(--texte-display) !important; }
/* Boutons « pleine largeur » d'Avada : à la taille de leur texte, sauf sur téléphone (bouton de 828 px, qa-c) */
@media (min-width: 640px) { #main .fusion-button.fusion-button-span-yes { width: auto !important; } }

/* « 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) */
#toTop:not(.fusion-to-top-active) { visibility: hidden; }
#toTop: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 la feuille d'Avada) */
:is(.page-erreur-corps, .page-simple-corps) .skip-link { position: absolute; left: 16px; top: -200px; z-index: 100001; padding: 12px 16px; border-radius: var(--rayon-icone); background: var(--blanc); color: var(--marine); font-weight: 600; }
:is(.page-erreur-corps, .page-simple-corps) .skip-link:focus { top: 16px; }
/* Tableau de bienvenue-event.com (E26) : filets de ligne, 14 px, sans cadre ni grille */
#main table { border: 0 !important; box-shadow: none !important; font-size: var(--texte-petit); line-height: 1.714; border-collapse: collapse; }
#main :is(tr, th, td) { background: none !important; }
#main :is(th, td) { border: 0 !important; border-bottom: 1px solid var(--filet) !important; padding: 8px 12px 8px 0 !important; vertical-align: top; }
#main 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) */
#main .fusion-layout-column > .fusion-column-wrapper: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) */
#main .fusion-text > * + h2 { margin-top: 40px; }
/* ---------- Téléphones : gouttières, bouton « Retour en haut », cibles du pied de page ---------- */
@media (max-width: 767px) {
  /* Rangées d'Avada à 10 px des bords : 16 px comme les sections de la charte (audit A7) */
  #main .fusion-fullwidth.rangee-etroite { --awb-padding-left: 16px !important; --awb-padding-right: 16px !important; }
  /* 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 */
  #toTop.fusion-top-top-link { 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: 8px;
    padding: 8px 12px calc(8px + 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: 8px;
    min-height: 44px; padding: 0 12px; 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 .2s ease, border-color .2s 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); }
  .barre-appel--seul { flex: 1 1 0; width: auto; padding: 0 12px; font-weight: 500; }
  /* 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(#main, .fusion-tb-footer) :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 les feuilles d'Avada : 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) + 64px) 16px 80px; text-align: center; }
.page-erreur-code { margin: 0 0 32px; font: 700 clamp(96px, 24vw, 128px) / 1 var(--police-texte); color: var(--rose-bouton); }
.page-erreur h1 { margin: 0; font-size: 30px; line-height: 1.2; }
.page-erreur-texte { margin: 16px 0 32px; font-size: 18px; line-height: 28px; color: color-mix(in srgb, var(--marine) 72%, var(--blanc)); }
.page-erreur-bouton {
  display: inline-flex; align-items: center; min-height: 48px; padding: 12px 24px; border-radius: 999px;
  background: var(--rose-bouton); color: var(--sur-marine); font-weight: 600; text-decoration: none;
}
#main .page-erreur-bouton { color: var(--sur-marine) !important; }
.page-erreur-bouton:is(:hover, :focus-visible) { background: var(--rose-bouton-survol); }
.page-erreur-titre { margin: 56px 0 12px; font-size: 20px; 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 { max-width: 1440px; margin: 0 auto; padding: 48px 80px 80px; }
.plan-site h1 { margin: 0 0 40px; font-size: var(--texte-titre); line-height: 1.2; }
.plan-rubriques { display: grid; grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr)); gap: 40px 48px; align-items: start; }
.plan-titre { margin: 0 0 8px; font-size: 20px; 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: 8px 0; line-height: 24px; color: var(--rose-lien); text-decoration: underline; text-underline-offset: 4px; }
.plan-rubrique a:hover { color: var(--marine); }
@media (max-width: 1099px) { .plan-site { padding-inline: 30px; } }

/* ---------- Entrées animées (charte-2026/animations.js), mouvement de bienvenue-event.com (E13) ----------
   Visible par défaut (sans script ou si le visiteur demande moins d'animations) ; caché seulement quand le script a
   armé l'animation (classe do-animate), puis fondu montant de 12 px en 500 ms à l'entrée dans l'écran. */
@keyframes entree-bsoft { from { opacity: 0; transform: translateY(var(--deplacement-entree)); } to { opacity: 1; transform: none; } }
.fusion-animated { visibility: visible; }
/* Masqué par l'opacité, pas par `visibility`, qui retirait les titres de l'arbre d'accessibilité avant leur entrée (RGAA 10.8) */
.do-animate .fusion-animated:not(.entree-bsoft) { opacity: 0; }
.do-animate .fusion-animated.entree-bsoft { animation: entree-bsoft var(--duree-entree) var(--courbe-sortie) backwards; }

/* 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); }
.actualites-cartes--archive .actualite-image { object-fit: contain; padding: 24px; background: var(--blanc); border-bottom: 1px solid var(--filet); }
#main .actualites-cartes--archive .actualite-titre { margin-top: 20px; }