/* ==========================================================================
   Psy.Link — Webinaires (/webinaires, /webinaires/{slug})
   Dépend de site.css (tokens, base, .conteneur). Tout est préfixé « wb- »
   pour ne rien heurter dans accueil.css / page.css.

   Parti pris : le rouge est réservé à l'événement (pastille « en direct » et
   bouton d'inscription). Le reste de la page reste dans les verts de la marque.
   ========================================================================== */

:root {
    --wb-foret: #062F2B;
    --wb-foret-2: #0A423C;
    --wb-rouge: #E0373B;
    --wb-rouge-fonce: #B92126;
    --wb-papier: #F3F8F7;
}


/* --------------------------------------------------------------------------
   1. Éléments partagés
   -------------------------------------------------------------------------- */
.wb-point {
    position: relative;
    display: inline-block;
    flex: 0 0 auto;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--wb-rouge);
}

.wb-point::after {
    content: "";
    position: absolute;
    inset: -5px;
    border-radius: 50%;
    border: 2px solid var(--wb-rouge);
    animation: wb-onde 1.6s ease-out infinite;
}

@keyframes wb-onde {
    0% { transform: scale(.4); opacity: 1; }
    100% { transform: scale(1.5); opacity: 0; }
}

.wb-statut {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 8px 16px 8px 14px;
    border-radius: var(--rayon-pill);
    background: var(--wb-rouge);
    border: 1px solid rgba(255, 255, 255, .18);
    box-shadow: 0 10px 24px -10px rgba(224, 55, 59, .9);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    backdrop-filter: blur(6px);
}

.wb-statut .wb-point,
.wb-statut .wb-point::after {
    background-color: #fff;
    border-color: #fff;
}

.wb-statut .wb-point::after {
    background-color: transparent;
}

.wb-statut-termine {
    box-shadow: none;
    background: rgba(255, 255, 255, .1);
    border-color: rgba(255, 255, 255, .3);
}

/* Bouton d'inscription : le rouge de l'événement, avec une pulsation lente
   qui attire l'œil sans agiter le texte. */
.wb-bouton {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 17px 30px;
    border: 0;
    border-radius: var(--rayon-pill);
    background: var(--wb-rouge);
    color: #fff;
    font: 700 16px/1.1 var(--ff);
    letter-spacing: -.005em;
    cursor: pointer;
    box-shadow: 0 14px 30px -12px rgba(224, 55, 59, .85);
    animation: wb-pulsation 2.2s ease-in-out infinite;
    transition: background-color .18s ease, transform .18s ease;
}

.wb-bouton:hover {
    background: var(--wb-rouge-fonce);
    transform: translateY(-2px);
}

.wb-bouton:focus-visible {
    outline: 3px solid #fff;
    outline-offset: 3px;
}

@keyframes wb-pulsation {
    0%, 100% { box-shadow: 0 14px 30px -12px rgba(224, 55, 59, .85), 0 0 0 0 rgba(224, 55, 59, .55); }
    50% { box-shadow: 0 14px 30px -12px rgba(224, 55, 59, .85), 0 0 0 12px rgba(224, 55, 59, 0); }
}

/* Variante verte : bouton d'envoi du formulaire. */
.wb-bouton-vert {
    background: var(--vert-fonce);
    box-shadow: 0 14px 30px -12px rgba(30, 127, 119, .85);
    animation-name: wb-pulsation-vert;
}

.wb-bouton-vert:hover {
    background: #17685f;
}

@keyframes wb-pulsation-vert {
    0%, 100% { box-shadow: 0 14px 30px -12px rgba(30, 127, 119, .85), 0 0 0 0 rgba(49, 169, 159, .5); }
    50% { box-shadow: 0 14px 30px -12px rgba(30, 127, 119, .85), 0 0 0 12px rgba(49, 169, 159, 0); }
}

.wb-bouton-bloc {
    width: 100%;
}

.wb-bouton-grand {
    padding: 21px 40px;
    font-size: 18px;
}

.wb-bouton[disabled] {
    animation: none;
    opacity: .75;
    cursor: progress;
}

.wb-bouton.est-en-cours .wb-bouton-texte::after {
    content: "";
    display: inline-block;
    width: 14px;
    height: 14px;
    margin-left: 10px;
    vertical-align: -2px;
    border: 2px solid rgba(255, 255, 255, .5);
    border-top-color: #fff;
    border-radius: 50%;
    animation: wb-rotation .7s linear infinite;
}

@keyframes wb-rotation {
    to { transform: rotate(360deg); }
}

.wb-agenda-bouton {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 16px;
    border-radius: var(--rayon-sm);
    border: 1px solid var(--ligne);
    background: #fff;
    color: var(--teal);
    font-size: 14px;
    font-weight: 600;
    transition: border-color .18s ease, background-color .18s ease;
}

.wb-agenda-bouton:hover {
    border-color: var(--teal);
    background: var(--menthe);
}

.wb-agenda-clair {
    background: rgba(255, 255, 255, .08);
    border-color: rgba(255, 255, 255, .28);
    color: #fff;
}

.wb-agenda-clair:hover {
    background: rgba(255, 255, 255, .16);
    border-color: #fff;
}


/* --------------------------------------------------------------------------
   2. Héros : visuel flouté sous un dégradé vert profond
   -------------------------------------------------------------------------- */
.wb-heros {
    position: relative;
    isolation: isolate;
    /* L'en-tête sticky occupe une place dans le flux : on remonte le héros
       dessous pour que la navbar transparente s'y superpose. */
    margin-top: calc(var(--entete-h) * -1);
    padding: calc(var(--entete-h) + 56px) 0 80px;
    background: var(--wb-foret);
    color: #fff;
    /* Pas d'overflow ici : le déroulant des approches doit pouvoir déborder
       du héros. Seul le calque de l'image floutée est rogné. */
}

.wb-heros-calque {
    position: absolute;
    inset: 0;
    z-index: -2;
    overflow: hidden;
    pointer-events: none;
}

.wb-heros-fond {
    position: absolute;
    inset: -60px;
    width: calc(100% + 120px);
    max-width: none;
    height: calc(100% + 120px);
    object-fit: cover;
    filter: blur(22px) saturate(1.3);
    transform: scale(1.06);
    opacity: .95;
}

.wb-heros::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        radial-gradient(90% 70% at 85% 10%, rgba(49, 169, 159, .35), transparent 60%),
        linear-gradient(105deg, rgba(4, 36, 33, .94) 0%, rgba(6, 47, 43, .82) 38%, rgba(6, 60, 58, .5) 72%, rgba(11, 87, 104, .38) 100%);
}

/* Grain léger : casse l'aspect « dégradé numérique » du flou. */
.wb-heros::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    opacity: .09;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    pointer-events: none;
}

.wb-heros-grille {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    gap: 56px;
    align-items: start;
}

.wb-annonce {
    padding-top: 12px;
}

.wb-quand {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 16px;
    margin: 28px 0 0;
}

.wb-quand-date {
    color: var(--ambre);
    font-size: clamp(20px, 2.2vw, 24px);
    font-weight: 700;
    letter-spacing: -.02em;
}

.wb-quand-heure {
    color: rgba(255, 255, 255, .82);
    font-size: clamp(18px, 2vw, 22px);
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}

.wb-titre {
    margin: 14px 0 0;
    color: #fff;
    font-size: clamp(26px, 3.4vw, 40px);
    font-weight: 800;
    line-height: 1.12;
    letter-spacing: -.035em;
    text-wrap: balance;
}

.wb-chapeau {
    margin: 22px 0 0;
    max-width: 38em;
    color: rgba(255, 255, 255, .84);
    font-size: 18px;
    line-height: 1.6;
}

.wb-faits {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 28px 0 0;
}

.wb-faits li {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 14px;
    border-radius: var(--rayon-sm);
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .16);
    color: #fff;
    font-size: 14.5px;
    font-weight: 600;
}

.wb-faits svg {
    color: var(--vert);
}

/* Compte à rebours : chiffres tabulaires, pour qu'ils ne dansent pas. */
.wb-decompte {
    margin-top: 34px;
}

.wb-decompte-libelle {
    margin: 0 0 10px;
    color: rgba(255, 255, 255, .7);
    font-size: 14px;
    font-weight: 600;
}

.wb-decompte-chiffres {
    display: flex;
    gap: 10px;
}

.wb-decompte-chiffres span {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 76px;
    padding: 12px 8px 10px;
    border-radius: 14px;
    background: rgba(0, 0, 0, .22);
    border: 1px solid rgba(255, 255, 255, .12);
}

.wb-decompte-chiffres strong {
    color: #fff;
    font-size: 34px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -.03em;
    font-variant-numeric: tabular-nums;
}

.wb-decompte-chiffres small {
    margin-top: 6px;
    color: rgba(255, 255, 255, .6);
    font-size: 12px;
}

.wb-decompte.est-en-direct .wb-decompte-chiffres {
    display: none;
}

.wb-decompte.est-en-direct .wb-decompte-libelle {
    color: #fff;
    font-size: 18px;
}

.wb-intervenant-mini {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    margin-top: 34px;
    padding: 8px 20px 8px 8px;
    border-radius: var(--rayon-pill);
    background: rgba(255, 255, 255, .07);
    border: 1px solid rgba(255, 255, 255, .14);
    transition: background-color .18s ease;
}

.wb-intervenant-mini:hover {
    background: rgba(255, 255, 255, .13);
}

.wb-intervenant-mini img {
    flex: 0 0 52px;
    aspect-ratio: 1;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    object-fit: cover;
    object-position: 50% 25%;
    border: 2px solid rgba(255, 255, 255, .6);
}

.wb-intervenant-mini > span {
    display: flex;
    flex-direction: column;
    line-height: 1.3;
}

.wb-intervenant-mini-avec {
    color: rgba(255, 255, 255, .6);
    font-size: 12.5px;
}

.wb-intervenant-mini strong {
    color: #fff;
    font-size: 15.5px;
}

.wb-intervenant-mini-titre {
    color: rgba(255, 255, 255, .72);
    font-size: 13px;
}


/* --------------------------------------------------------------------------
   3. Carte d'inscription
   -------------------------------------------------------------------------- */
.wb-carte {
    position: relative;
    scroll-margin-top: calc(var(--entete-h-defile) + 16px);
    border-radius: 24px;
    background: #fff;
    color: var(--gris);
    box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .55), 0 0 0 1px rgba(255, 255, 255, .08);
}

.wb-carte-corps {
    padding: 32px 30px 28px;
}

.wb-carte-titre {
    margin: 0;
    font-size: 25px;
    font-weight: 800;
    letter-spacing: -.03em;
}

.wb-carte-sous-titre {
    margin: 6px 0 22px;
    font-size: 14.5px;
    line-height: 1.5;
}

.wb-formulaire {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.wb-ligne {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.wb-champ {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.wb-champ > span {
    color: var(--encre);
    font-size: 14px;
    font-weight: 600;
}

.wb-champ input,
.wb-champ select {
    width: 100%;
    height: 48px;
    padding: 0 14px;
    border: 1.5px solid var(--ligne);
    border-radius: var(--rayon-sm);
    background: #fff;
    color: var(--encre);
    font: 500 15.5px var(--ff);
    transition: border-color .15s ease, box-shadow .15s ease;
}

.wb-champ select {
    appearance: none;
    padding-right: 40px;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%230B5768' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center;
}

.wb-champ select:invalid {
    color: var(--gris-clair);
}

.wb-champ input:focus,
.wb-champ select:focus {
    outline: none;
    border-color: var(--vert-fonce);
    box-shadow: 0 0 0 4px rgba(49, 169, 159, .18);
}

.wb-champ.est-invalide input,
.wb-champ.est-invalide select {
    border-color: var(--wb-rouge);
}

/* Questions « professionnel » : repliées par défaut, dépliées en douceur
   (grid 0fr → 1fr, sans hauteur fixe à deviner). */
.wb-pro {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: 0fr;
    min-width: 0;
    margin-top: -14px;
    opacity: 0;
    transition: grid-template-rows .35s ease, opacity .25s ease, margin-top .35s ease;
}

.wb-pro.est-ouvert {
    grid-template-rows: 1fr;
    margin-top: 0;
    opacity: 1;
}

.wb-pro-interieur {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-height: 0;
    overflow: hidden;
    overflow: clip;
}

.wb-pro.est-ouvert.est-deplie .wb-pro-interieur {
    overflow: visible;
}

.wb-pro.est-ouvert .wb-pro-interieur {
    padding: 16px;
    border-radius: 16px;
    background: var(--wb-papier);
    border: 1px solid var(--ligne);
}

/* Sélecteur à choix multiples : un déclencheur qui ressemble aux autres
   listes du formulaire, et un panneau de cases à cocher. */
.wb-multi {
    position: relative;
    min-width: 0;
}

.wb-multi-declencheur {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 48px;
    padding: 8px 14px;
    border: 1.5px solid var(--ligne);
    border-radius: var(--rayon-sm);
    background: #fff;
    color: var(--encre);
    font: 500 15.5px var(--ff);
    text-align: left;
    cursor: pointer;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.wb-multi-declencheur:focus-visible,
.wb-multi.est-ouvert .wb-multi-declencheur {
    outline: none;
    border-color: var(--vert-fonce);
    box-shadow: 0 0 0 4px rgba(49, 169, 159, .18);
}

.wb-multi-resume {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wb-multi-resume.est-vide {
    color: var(--gris-clair);
}

.wb-multi-compte {
    flex: 0 0 auto;
    padding: 3px 9px;
    border-radius: var(--rayon-pill);
    background: var(--teal);
    color: #fff;
    font-size: 12.5px;
    font-weight: 700;
}

.wb-multi-chevron {
    flex: 0 0 auto;
    color: var(--teal);
    transition: transform .2s ease;
}

.wb-multi.est-ouvert .wb-multi-chevron {
    transform: rotate(180deg);
}

.wb-multi-panneau {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    z-index: 30;
    border: 1px solid var(--ligne);
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 24px 48px -18px rgba(6, 47, 43, .45);
    /* clip et non hidden : un bloc en hidden reste défilable par le
       navigateur, qui le décale pour montrer un élément qui prend le focus
       (le panneau se vidait alors en blanc). */
    overflow: hidden;
    overflow: clip;
    animation: wb-deroule .16s ease-out;
}

@keyframes wb-deroule {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: none; }
}

.wb-multi-options {
    max-height: 264px;
    overflow-y: auto;
    padding: 6px;
    overscroll-behavior: contain;
}

.wb-multi-option {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 10px;
    border-radius: 9px;
    color: var(--encre);
    font-size: 14.5px;
    line-height: 1.35;
    cursor: pointer;
}

.wb-multi-option:hover {
    background: var(--wb-papier);
}

/* Case native masquée mais gardée DANS la ligne (ancrée sur le libellé) :
   quand elle prend le focus, c'est la liste qui défile jusqu'à elle, pas le
   panneau. */
.wb-multi-option input {
    position: absolute;
    top: 50%;
    left: 10px;
    width: 1px;
    height: 1px;
    margin: 0;
    opacity: 0;
    pointer-events: none;
}

.wb-multi-case {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 20px;
    width: 20px;
    height: 20px;
    border: 1.5px solid #b9cccb;
    border-radius: 6px;
    background: #fff;
    color: transparent;
    transition: background-color .12s ease, border-color .12s ease;
}

.wb-multi-option input:checked + .wb-multi-case {
    border-color: var(--vert-fonce);
    background: var(--vert-fonce);
    color: #fff;
}

.wb-multi-option input:checked ~ .wb-multi-libelle {
    font-weight: 600;
}

.wb-multi-option input:focus-visible + .wb-multi-case {
    outline: 3px solid var(--vert);
    outline-offset: 2px;
}

.wb-multi-pied {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 12px;
    border-top: 1px solid var(--ligne);
    background: var(--wb-papier);
}

.wb-multi-lien {
    padding: 0;
    border: 0;
    background: none;
    color: var(--vert-fonce);
    font: 600 13px var(--ff);
    white-space: nowrap;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}

.wb-multi-valider {
    margin-left: auto;
    padding: 8px 16px;
    border: 0;
    border-radius: var(--rayon-pill);
    background: var(--teal);
    color: #fff;
    font: 700 13.5px var(--ff);
    cursor: pointer;
}

.wb-accord {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    font-size: 13.5px;
    line-height: 1.5;
    cursor: pointer;
}

.wb-accord input {
    flex: 0 0 auto;
    width: 19px;
    height: 19px;
    margin: 1px 0 0;
    accent-color: var(--vert-fonce);
}

.wb-accord a {
    color: var(--vert-fonce);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.wb-accord small {
    display: block;
    margin-top: 3px;
    color: var(--gris-clair);
    font-size: 12.5px;
}

.wb-accord.est-invalide {
    color: var(--wb-rouge-fonce);
}

.wb-formulaire .wb-bouton {
    margin-top: 6px;
}

.wb-mention {
    margin: 0;
    color: var(--gris-clair);
    font-size: 11.5px;
    line-height: 1.5;
    text-align: center;
}

.wb-mention a {
    text-decoration: underline;
}

.wb-erreur {
    margin: 0;
    padding: 12px 14px;
    border-radius: var(--rayon-sm);
    background: #FFF0F0;
    border: 1px solid #F6C4C5;
    color: var(--wb-rouge-fonce);
    font-size: 14px;
    font-weight: 500;
}

.wb-leurre {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* Masque la bannière reCAPTCHA v3 : la mention légale est dans le formulaire. */
.page-webinaire .grecaptcha-badge {
    visibility: hidden;
}

.wb-confirmation {
    text-align: center;
    padding-top: 44px;
    padding-bottom: 36px;
}

.wb-confirmation:focus {
    outline: none;
}

.wb-confirmation-coche {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 68px;
    height: 68px;
    margin-bottom: 18px;
    border-radius: 50%;
    background: var(--vert-clair);
    color: var(--vert-fonce);
    animation: wb-apparition .5s cubic-bezier(.2, 1.4, .4, 1) both;
}

@keyframes wb-apparition {
    from { transform: scale(.4); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

.wb-confirmation h2 {
    font-size: 26px;
    font-weight: 800;
}

.wb-confirmation p {
    font-size: 15px;
}

.wb-confirmation-agenda {
    margin: 22px 0 10px;
    color: var(--encre);
    font-weight: 600;
}

.wb-agenda {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
}

.wb-carte-terminee h2 {
    font-size: 23px;
}

.wb-carte-terminee .wb-bouton {
    animation: none;
    margin-bottom: 18px;
}

.wb-lien-clair {
    display: block;
    color: var(--vert-fonce);
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 3px;
}


/* --------------------------------------------------------------------------
   4. Sections de contenu
   -------------------------------------------------------------------------- */
.wb-section {
    padding: 96px 0;
}

.wb-section h2 {
    font-size: clamp(28px, 3.4vw, 40px);
    font-weight: 800;
    letter-spacing: -.035em;
}

/* Texte rédactionnel saisi dans CKEditor : les listes du layout « site » sont
   sans puces, on les rétablit ici. */
.wb-texte {
    color: var(--gris);
    font-size: 16.5px;
    line-height: 1.72;
}

.wb-texte p {
    margin: 0 0 1em;
}

.wb-texte > :last-child {
    margin-bottom: 0;
}

.wb-texte strong {
    color: var(--encre);
    font-weight: 700;
}

.wb-texte a {
    color: var(--vert-fonce);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.wb-texte ul,
.wb-texte ol {
    margin: 0 0 1em;
    padding-left: 1.3em;
}

.wb-texte ul {
    list-style: disc;
}

.wb-texte ol {
    list-style: decimal;
}

.wb-texte li {
    margin-bottom: .4em;
}

.wb-texte-grand {
    font-size: 18px;
}

/* Enjeux : l'affiche, légèrement inclinée, à côté du texte. */
.wb-enjeux-grille {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 72px;
    align-items: center;
}

.wb-affiche {
    margin: 0;
}

.wb-affiche img {
    width: 100%;
    border-radius: 22px;
    box-shadow: 0 40px 70px -34px rgba(6, 47, 43, .6);
}

.wb-texte-grand h2 {
    margin-bottom: 20px;
}

/* À propos */
.wb-apropos {
    background: var(--wb-papier);
}

.wb-apropos-intro {
    max-width: 780px;
    margin-bottom: 48px;
}

.wb-apropos-colonnes {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
    align-items: start;
}

.wb-bloc {
    padding: 34px 32px;
    border-radius: 22px;
    background: #fff;
    border: 1px solid var(--ligne);
}

.wb-bloc h3 {
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -.025em;
    margin-bottom: 14px;
}

.wb-attestation {
    display: flex;
    gap: 12px;
    margin-top: 22px !important;
    padding: 14px 16px;
    border-radius: 14px;
    background: #FFF6E3;
    color: #5a4200;
    font-size: 15px;
    line-height: 1.5;
}

.wb-attestation svg {
    flex: 0 0 auto;
    color: #C98300;
    margin-top: 1px;
}

.wb-attestation strong {
    color: #3a2a00;
}

/* Informations pratiques : un billet sombre, découpé en quatre coupons. */
.wb-pratique {
    background: var(--wb-foret);
    color: #fff;
}

.wb-pratique h2 {
    color: #fff;
    margin-bottom: 32px;
}

.wb-billet {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin: 0;
    border-radius: 22px;
    background: var(--wb-foret-2);
    border: 1px solid rgba(255, 255, 255, .1);
    overflow: hidden;
}

.wb-billet > div {
    padding: 28px 26px;
    border-left: 1.5px dashed rgba(255, 255, 255, .18);
}

.wb-billet > div:first-child {
    border-left: 0;
}

.wb-billet dt {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 10px;
    color: var(--vert);
    font-size: 14px;
    font-weight: 600;
}

.wb-billet dd {
    margin: 0;
    color: #fff;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -.02em;
}

.wb-billet dd small {
    display: block;
    margin-top: 4px;
    color: rgba(255, 255, 255, .62);
    font-size: 13.5px;
    font-weight: 500;
    letter-spacing: 0;
}

.wb-pratique-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-top: 32px;
}

/* Intervenant */
.wb-intervenant-grille {
    display: grid;
    grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
    gap: 64px;
    align-items: center;
}

.wb-intervenant-photo {
    margin: 0;
}

.wb-intervenant-photo img {
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    border-radius: 28px 28px 28px 120px;
}

.wb-intervenant-texte h2 {
    margin-bottom: 8px;
    color: var(--vert-fonce);
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0;
}

.wb-intervenant-nom {
    margin: 0;
    color: var(--encre);
    font-size: clamp(30px, 3.6vw, 44px);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -.035em;
}

.wb-intervenant-titre {
    margin: 10px 0 24px;
    color: var(--teal);
    font-size: 17px;
    font-weight: 600;
}

.wb-citation {
    position: relative;
    margin: 72px 0 0;
    padding: 48px 56px 44px 104px;
    border-radius: 28px;
    background: var(--wb-papier);
}

.wb-citation::before {
    content: "“";
    position: absolute;
    top: 14px;
    left: 32px;
    color: var(--vert);
    font: 800 120px/1 Georgia, 'Times New Roman', serif;
}

.wb-citation blockquote {
    margin: 0;
}

.wb-citation p {
    margin: 0;
    color: var(--encre);
    font-size: clamp(20px, 2.3vw, 26px);
    font-weight: 600;
    line-height: 1.45;
    letter-spacing: -.02em;
}

.wb-citation figcaption {
    margin-top: 18px;
    color: var(--gris);
    font-weight: 600;
}

/* Autres webinaires */
.wb-autres {
    background: var(--wb-papier);
}

.wb-liste {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 22px;
    margin-top: 28px;
}

.wb-vignette a {
    display: flex;
    flex-direction: column;
    height: 100%;
    border-radius: 20px;
    background: #fff;
    border: 1px solid var(--ligne);
    overflow: hidden;
    transition: border-color .18s ease, transform .18s ease;
}

.wb-vignette a:hover {
    border-color: var(--vert);
    transform: translateY(-3px);
}

.wb-vignette img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
}

.wb-vignette.est-terminee img {
    filter: grayscale(.6);
}

.wb-vignette-corps {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 20px 22px 24px;
}

.wb-vignette-date {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--vert-fonce);
    font-size: 14px;
    font-weight: 700;
}

.wb-vignette-titre {
    color: var(--encre);
    font-size: 18px;
    line-height: 1.3;
    letter-spacing: -.02em;
}

.wb-vignette-intervenant {
    font-size: 14px;
}

.wb-vide {
    margin-top: 20px;
    font-size: 17px;
}

.wb-vide a {
    color: var(--vert-fonce);
    text-decoration: underline;
}

/* Héros de la page liste : plus court, sans visuel. */
.wb-heros-liste {
    padding-bottom: 72px;
}

.wb-heros-liste .wb-titre {
    margin-top: 22px;
}

/* Barre d'inscription collante (mobile). */
.wb-barre {
    display: none;
}


/* --------------------------------------------------------------------------
   5. Adaptations
   -------------------------------------------------------------------------- */
@media (max-width: 1080px) {
    .wb-heros-grille {
        grid-template-columns: minmax(0, 1fr);
        gap: 44px;
    }

    .wb-carte {
        max-width: 620px;
    }

    .wb-billet {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .wb-billet > div:nth-child(3) {
        border-left: 0;
    }

    .wb-billet > div:nth-child(n+3) {
        border-top: 1.5px dashed rgba(255, 255, 255, .18);
    }
}

@media (max-width: 860px) {
    .wb-section {
        padding: 68px 0;
    }

    .wb-enjeux-grille,
    .wb-intervenant-grille,
    .wb-apropos-colonnes {
        grid-template-columns: minmax(0, 1fr);
        gap: 36px;
    }

    .wb-affiche {
        max-width: 420px;
    }

    .wb-intervenant-photo {
        max-width: 340px;
    }

    .wb-citation {
        margin-top: 48px;
        padding: 64px 26px 30px;
    }

    .wb-citation::before {
        top: 6px;
        left: 22px;
        font-size: 96px;
    }

    .wb-barre {
        position: fixed;
        left: 12px;
        right: 12px;
        bottom: calc(12px + env(safe-area-inset-bottom, 0px));
        z-index: 90;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 10px 10px 10px 18px;
        border-radius: var(--rayon-pill);
        background: rgba(6, 47, 43, .94);
        color: #fff;
        font-size: 14px;
        font-weight: 600;
        backdrop-filter: blur(10px);
        box-shadow: 0 18px 40px -16px rgba(0, 0, 0, .6);
        transform: translateY(140%);
        transition: transform .3s ease;
    }

    .wb-barre.est-visible {
        transform: translateY(0);
    }

    .wb-barre-quand {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        min-width: 0;
    }

    .wb-barre .wb-bouton {
        flex: 0 0 auto;
        padding: 12px 20px;
        font-size: 15px;
    }
}

@media (max-width: 560px) {
    .wb-heros {
        padding-top: calc(var(--entete-h-defile) + 44px);
        padding-bottom: 48px;
    }

    .wb-annonce {
        padding-top: 0;
    }

    .wb-statut {
        gap: 9px;
        padding: 5px 12px 5px 10px;
        font-size: 12.5px;
    }

    .wb-point {
        width: 7px;
        height: 7px;
    }

    .wb-point::after {
        inset: -4px;
    }

    .wb-intervenant-mini {
        display: flex;
        gap: 12px;
        margin-top: 28px;
        padding: 10px 14px 10px 10px;
        border-radius: 16px;
    }

    .wb-intervenant-mini img {
        flex-basis: 44px;
        width: 44px;
        height: 44px;
    }

    .wb-intervenant-mini strong {
        font-size: 14.5px;
    }

    .wb-intervenant-mini-titre {
        font-size: 12px;
        line-height: 1.35;
    }

    .wb-chapeau {
        font-size: 16.5px;
    }

    .wb-decompte-chiffres {
        gap: 7px;
    }

    .wb-decompte-chiffres span {
        flex: 1 1 0;
        min-width: 0;
    }

    .wb-decompte-chiffres strong {
        font-size: 27px;
    }

    .wb-carte-corps {
        padding: 28px 20px 22px;
    }

    .wb-ligne {
        grid-template-columns: minmax(0, 1fr);
    }

    .wb-billet {
        grid-template-columns: minmax(0, 1fr);
    }

    .wb-billet > div {
        border-left: 0;
        border-top: 1.5px dashed rgba(255, 255, 255, .18);
        padding: 20px 22px;
    }

    .wb-billet > div:first-child {
        border-top: 0;
    }

    .wb-bloc {
        padding: 26px 22px;
    }

    .wb-pratique-actions .wb-bouton {
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .wb-point::after,
    .wb-bouton,
    .wb-confirmation-coche {
        animation: none;
    }

    .wb-pro,
    .wb-barre {
        transition: none;
    }
}