/* dc26-benk — entry point PostCSS */

/* dc26-benk — WooCommerce overrides */

/* ════════════════════════════════════════════
   COURSE CARD
════════════════════════════════════════════ */

.dc26-course-card {
    border-radius: 14px;
    overflow: hidden;
    background: var(--wp--preset--color--secondary);
    border: none;
    box-shadow: 0 8px 24px rgba(0,0,0,0.18);
    transition: box-shadow 0.25s ease, transform 0.25s ease, opacity 0.25s ease;
    position: relative;
}

.dc26-course-card:hover {
    box-shadow: 0 18px 40px rgba(0,0,0,0.28);
    transform: translateY(-3px);
    opacity: 1;
}

/* ── Opacity par statut — met en avant les cours en cours ── */

.dc26-course-card--in-progress {
    opacity: 1;
}

.dc26-course-card--not-started {
    opacity: 0.8;
}

.dc26-course-card--complete {
    opacity: 0.6;
}

.dc26-course-card__inner {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
    height: 100%;
}

/* ── Status badge ── */

.dc26-course-card__status-badge {
    display: inline-flex;
    align-self: flex-end;
    align-items: center;
    gap: 0.3rem;
    padding: 0.3rem 0.65rem;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    line-height: 1;
    background: var(--wp--preset--color--white);
    color: var(--wp--preset--color--secondary);
    border: none;
}

/* ── Body ── */

.dc26-course-card__body {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 1.1rem 1.25rem 1.25rem;
    flex: 1;
}

.dc26-course-card__title {
    font-size: 2rem;
    font-weight: 700;
    margin: 1rem 0;
    line-height: 1.25;
    color: var(--wp--preset--color--white);
}

/* ── Progress ── */

.dc26-course-card__progress {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    margin-top: auto;
}

.dc26-course-card__progress-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}

.dc26-course-card__progress-steps {
    font-size: 0.75rem;
    color: var(--wp--preset--color--white);
}

.dc26-course-card__progress-label {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--wp--preset--color--white);
}

.dc26-course-card__progress-bar {
    height: 5px;
    border-radius: 999px;
    background: var(--wp--preset--color--white);
    border: 1px solid rgba(0,0,0,0.08);
    overflow: hidden;
}

.dc26-course-card__progress-fill {
    height: 100%;
    border-radius: 999px;
    background: var(--wp--preset--color--primary);
    min-width: 2px;
}

.dc26-course-card--in-progress .dc26-course-card__progress-fill {
    background: #22c55e;
}

/* ── Last activity ── */

.dc26-course-card__last-activity {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.75rem;
    color: var(--wp--preset--color--gray-cold);
    margin: 0;
}

.dc26-course-card__last-activity::before {
    content: '';
    display: inline-block;
    width: 12px;
    height: 12px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2398A0B4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpolyline points='12 6 12 12 16 14'/%3E%3C/svg%3E");
    background-size: contain;
    flex-shrink: 0;
}

/* dc26-benk — LearnDash styles */

/* ── Checkmark LD : remplace la police ld-icons par CSS pur ──────────
   LD génère <span class="ld-icon-checkmark ld-icon"> via helpers.php.
   Le ::before est positionné absolute + centré par LD (top/left 50%).
   On coupe la dépendance à ld-icons et on dessine le check via border.
──────────────────────────────────────────────────────────────────── */

.ld-icon-checkmark.ld-icon,
.ld-icon-complete.ld-icon {
    font-family: none !important;
    speak: auto;
}

.ld-icon-checkmark.ld-icon::before,
.ld-icon-complete.ld-icon::before {
    content: "" !important;
    display: block !important;
    width: 0.32em;
    height: 0.56em;
    border-right: 0.15em solid currentColor;
    border-bottom: 0.15em solid currentColor;
    border-radius: 1px;
    transform: translateX(-50%) translateY(-58%) rotate(43deg) !important;
}

/* ── ld_course_categorydropdown shortcode ── */

#ld_course_categorydropdown {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-bottom: 1.5rem;
}

#ld_course_categorydropdown label {
    font-size: 0.875rem;
    font-weight: 500;
}

#ld_course_categorydropdown select {
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
    padding: 0.4rem 2.25rem 0.4rem 0.875rem;
    border: 1px solid #ccc;
    border-radius: 0.375rem;
    background-color: #fff;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23666' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    font-size: 0.875rem;
    color: inherit;
    cursor: pointer;
}

#ld_course_categorydropdown form {
    margin: 0;
}

/* ── Focus Mode — contenu leçon (modern template) ─────────
   Le modern template (ld30 4.24+) injecte .ld-layout à l'intérieur
   de #ld-focus-content. Le quiz utilise encore l'ancien shortcode.
   Ces règles alignent le rendu de la leçon avec celui du quiz.
─────────────────────────────────────────────────────────── */

/* H1 du focus/index.php — utilise la même taille que le quiz */

#ld-focus-content > h1 {
    font-size: clamp(1.6rem, 3vw, 2.2rem);
    line-height: 1.3;
    font-weight: 700;
    margin-bottom: 1rem;
}

/* Modern wrapper — évite l'overflow horizontal dans le content */

#ld-focus-content .learndash-wrapper--modern {
    max-width: 100%;
    overflow-x: hidden;
}

/* .ld-layout grid — pas de marge supplémentaire, le parent a déjà padding: 5em */

#ld-focus-content .ld-layout {
    margin-top: 0;
}

/* Breadcrumbs — texte tronqué si trop long */

#ld-focus-content .ld-breadcrumbs {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Navigation du bas — cohérence avec le reste du layout */

#ld-focus-content .ld-navigation {
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid #e2e7ed;
}

/* Sidebar — le heading bleu a width:350px fixe dans LD, on force 100% */

.ld-course-navigation-heading {
    width: 100% !important;
}

/* Annule le text-decoration:underline injecté par WP global-styles sur tous les thèmes blocs */

.ld-focus a:where(:not(.wp-element-button)) {
    text-decoration: none;
}

/* ── Focus Mode — correctifs minimes ──────────────────────
   On ne touche PAS au layout flex de LearnDash (header, sidebar).
   Seulement les deux éléments visuellement cassés.
─────────────────────────────────────────────────────────── */

/* 1. Logo : max-height pour qu'il reste dans le header de 51px */

#ld-focus-header .ld-brand-logo img {
    max-height: 36px;
    width: auto;
    max-width: none;
}

/* 2. Avatar Gravatar : le HTML inject width/height="96", on force 36px */

#ld-focus-header .ld-profile-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    display: block;
}

#ld-focus-header .ld-profile-avatar img {
    display: block;
    width: 36px !important;
    height: 36px !important;
    max-width: none !important;
    -o-object-fit: cover;
       object-fit: cover;
}

/* ── Contenu GrassBlade (SCORM) — responsive à toutes les tailles ────
   Le plugin sort <iframe class="grassblade_iframe" width="X" height="Y">
   avec des dimensions fixes en px (attributs HTML, 940×640 = réglages
   globaux GrassBlade > Largeur/Hauteur) et aucun width/max-width en CSS.
   Deux tentatives précédentes (max-width seul, puis width:100% simple)
   n'ont pas suffi sur dev.benk.ch — un !important tranche toute question
   de spécificité/style inline sans avoir à diagnostiquer la source exacte
   du conflit. On fixe aussi le ratio directement en CSS (aspect-ratio)
   plutôt que de compter sur le JS du plugin
   (grassblade_xapi_content_autosize_content, lit la largeur rendue au
   chargement/resize) : ça marche même si ce script est lent, absent, ou
   tourne avant que la mise en page soit stable. Si les réglages globaux
   GrassBlade (largeur/hauteur par défaut) changent, mettre à jour le
   ratio ci-dessous en conséquence.
   Le contenu interne du package (SCORM/Captivate) reste lui-même à mise
   en page fixe : ceci l'empêche de déborder ou de rester rikiki, ça ne
   le rend pas fluide/mobile-first en soi.
──────────────────────────────────────────────────────────────────── */

.grassblade_iframe {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    aspect-ratio: 940 / 640;
}

/* ── Vidéos intégrées (bloc core wp:embed — Vimeo) — largeur cohérente ──
   Le bloc core WP est censé être responsive nativement (padding-box +
   iframe position:absolute width/height 100%), mais son bord droit
   dépassait légèrement celui des éléments voisins (breadcrumbs, boutons)
   dans #ld-focus-content — signalé visuellement (ligne repère) sur
   "L'accusatif niveau 1 – Vidéo". On verrouille box-sizing + width pour
   que le bloc reste strictement dans la même colonne que le reste du
   contenu Focus Mode, sans dépendre de la mise en page par défaut du
   bloc core.
──────────────────────────────────────────────────────────────────── */

#ld-focus-content .wp-block-embed,
#ld-focus-content .wp-block-embed__wrapper {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
}

#ld-focus-content .wp-block-embed__wrapper iframe {
    box-sizing: border-box;
    width: 100% !important;
    height: 100%;
}

/* ── Ratio de l'embed vidéo — indépendant du CSS conditionnel de WP ──
   WP n'imprime son CSS responsive pour les embeds (.wp-embed-responsive
   ... ::before, qui donne le ratio et position:relative) que s'il détecte
   un vrai bloc core/embed (\3c !-- wp:embed --> ...) dans le contenu. Une
   quarantaine de topics "Vidéo" ont été collés en HTML brut (sans ce
   commentaire de bloc) : WP ne les détecte pas, ce CSS n'est jamais
   chargé, et la vidéo retombe à la hauteur par défaut du navigateur
   (iframe 150px). On fixe le ratio nous-mêmes à partir de la classe
   wp-embed-aspect-*, sans dépendre de la détection de bloc par WP.
──────────────────────────────────────────────────────────────────── */

#ld-focus-content .wp-block-embed__wrapper {
    position: relative;
}

#ld-focus-content .wp-block-embed__wrapper iframe {
    position: absolute;
    inset: 0;
}

/* ── Images centrées (bloc core wp:image, align "centre") — cassées en Focus Mode ──
   Le CSS core du bloc image (id="wp-block-image-inline-css") ne fournit
   margin-left/right:auto que pour le sélecteur descendant ".wp-block-image
   .aligncenter" (cas d'un <img class="aligncenter"> imbriqué dans un
   wrapper .wp-block-image) — jamais pour le cas réel des blocs modernes,
   où le <figure> porte les deux classes en même temps
   (class="wp-block-image aligncenter size-large"). Sur une page normale,
   ça passe inaperçu car le wrapper de contenu (Group/Post Content) ajoute
   .is-layout-constrained ou .is-layout-flow, et WP a une règle
   ".is-layout-constrained > .aligncenter { margin:auto !important }" qui
   rattrape le centrage. Le Focus Mode de LearnDash rend le contenu dans
   #ld-focus-content sans ce wrapper layout-constrained : le filet de
   sécurité de WP ne s'applique jamais, et l'image reste collée à gauche
   (carte Trello #83 BENK — "Problème affichage image - Félicitations").
──────────────────────────────────────────────────────────────────── */

#ld-focus-content .wp-block-image.aligncenter {
    margin-left: auto;
    margin-right: auto;
}

/* ── Bouton "Leçon terminée" — masqué tant que le H5P n'est pas fini ──
   Classe ajoutée par dc26-h5p-mark-complete.js uniquement sur les topics
   contenant un H5P (voir cartes Trello #10/#11 BENK) : par défaut
   LearnDash affiche ce bouton en permanence avec un style "déjà fait",
   qui ne reflète jamais l'état réel de l'exercice.
──────────────────────────────────────────────────────────────────── */

.sfwd-mark-complete.dc26-h5p-pending {
    display: none !important;
}

/* ── Bouton "Marquer comme terminé" — style outline ──
   LD affiche ce bouton toujours plein (vert + coche), ce qui prête à
   confusion vu qu'il apparaît maintenant seulement quand une action est
   requise. Style outline par défaut (fond blanc/bordure verte), inversé
   (fond vert/texte blanc) au survol pour confirmer que c'est cliquable.
──────────────────────────────────────────────────────────────────── */

.learndash-wrapper .sfwd-mark-complete .learndash_mark_complete_button {
    /* Une seule ligne, largeur au contenu (LD force 190px + retour à la
       ligne). Le padding droit réserve la place de la coche. */
    white-space: nowrap !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    padding: 0.75em 2.75em 0.75em 1.25em !important;
    font-size: var(--wp--preset--font-size--small) !important;
    background-color: var(--wp--preset--color--white) !important;
    color: var(--wp--preset--color--success) !important;
    border: 2px solid var(--wp--preset--color--success) !important;
    outline: none !important;
    box-shadow: none !important;
}

/* La colonne du bouton s'adapte à sa largeur (sinon prev/next se serrent
   et "Chapitre précédent" passe sur deux lignes). */

.learndash-wrapper .ld-content-action:has(.sfwd-mark-complete) {
    flex: 0 0 auto !important;
    width: auto !important;
}

.learndash-wrapper .ld-content-actions {
    align-items: center;
}

.learndash-wrapper .ld-content-actions .ld-button {
    white-space: nowrap !important;
}

/* Coche (::after du <form>, glyphe ld-icons) : blanche par défaut chez LD,
   donc invisible sur notre fond blanc — verte au repos, blanche au survol. */

.sfwd-mark-complete::after {
    color: var(--wp--preset--color--success) !important;
    pointer-events: none;
}

.sfwd-mark-complete:hover::after {
    color: var(--wp--preset--color--white) !important;
}

.sfwd-mark-complete .learndash_mark_complete_button:hover,
.sfwd-mark-complete .learndash_mark_complete_button:focus {
    background-color: var(--wp--preset--color--success) !important;
    color: var(--wp--preset--color--white) !important;
    outline: none !important;
    box-shadow: none !important;
}

#ld-focus-content .wp-embed-aspect-21-9 .wp-block-embed__wrapper { aspect-ratio: 21 / 9; }

#ld-focus-content .wp-embed-aspect-18-9 .wp-block-embed__wrapper { aspect-ratio: 18 / 9; }

#ld-focus-content .wp-embed-aspect-16-9 .wp-block-embed__wrapper { aspect-ratio: 16 / 9; }

#ld-focus-content .wp-embed-aspect-4-3 .wp-block-embed__wrapper { aspect-ratio: 4 / 3; }

#ld-focus-content .wp-embed-aspect-1-1 .wp-block-embed__wrapper { aspect-ratio: 1 / 1; }

#ld-focus-content .wp-embed-aspect-9-16 .wp-block-embed__wrapper { aspect-ratio: 9 / 16; }

/* ── Bannière "Bravo, chapitre complété" — vert au lieu du bleu LD ──
   LD colore cette bannière et son bouton en bleu (#235af3) par défaut.
   On la passe en vert clair (cohérent avec le reste des états "terminé"),
   et on élargit le padding du bouton pour que le chevron ne colle plus
   au texte.

   !important partout ici : la règle native LD ".learndash-wrapper
   .ld-alert-success" (2 classes) est plus spécifique qu'un simple
   ".ld-alert-success" (1 classe) et gagnerait sinon.
──────────────────────────────────────────────────────────────────── */

.ld-alert-success {
    color: var(--wp--preset--color--success) !important;
}

/* Fond vert 20 % + pas de liseré bleu (anneau de focus / bordure LD) :
   sélecteur plus spécifique que ".learndash-wrapper .ld-alert-success"
   de LD (qui force background transparent !important). */

.learndash-wrapper .ld-alert.ld-alert-success {
    background-color: color-mix(in srgb, var(--wp--preset--color--success) 20%, transparent) !important;
    border-color: var(--wp--preset--color--success) !important;
    outline: none !important;
    box-shadow: none !important;
}

/* Message de la bannière sur une seule ligne (sauf petits écrans) : taille
   réduite pour tenir à côté du bouton "Chapitre suivant" (sans retour à
   la ligne dans le bouton non plus). */

.learndash-wrapper .ld-alert.ld-alert--step-completed .ld-button {
    white-space: nowrap !important;
    max-width: none !important;
    width: auto !important;
    min-width: 0 !important;
    flex: 0 0 auto;
}

@media (min-width: 1100px) {
    .learndash-wrapper .ld-alert--step-completed .ld-alert-messages {
        font-size: var(--wp--preset--font-size--small);
        white-space: nowrap;
    }
}

/* LD donne tabindex="-1" à la bannière (et au titre du cours) pour y placer
   le focus après validation : un clic sur la zone affichait alors un
   anneau de focus vert/bleu. Ces éléments ne sont pas dans l'ordre de
   tabulation, on supprime l'anneau. */

.learndash-wrapper [tabindex="-1"]:focus,
.learndash-wrapper [tabindex="-1"]:focus-visible,
#ld-focus-mode-course-heading:focus,
#ld-focus-mode-course-heading:focus-visible {
    outline: none !important;
    box-shadow: none !important;
}

#ld-focus-content .ld-alert-success .ld-button {
    background-color: var(--wp--preset--color--white) !important;
    color: var(--wp--preset--color--success) !important;
    border: 2px solid var(--wp--preset--color--success) !important;
    outline: none !important;
    box-shadow: none !important;
    padding-right: 45px;
}

#ld-focus-content .ld-alert-success .ld-button:hover,
#ld-focus-content .ld-alert-success .ld-button:focus {
    background-color: var(--wp--preset--color--success) !important;
    color: var(--wp--preset--color--white) !important;
    outline: none !important;
    box-shadow: none !important;
}

/* ── Badge "TERMINÉ" persistant (fil d'ariane) — vert vif + texte blanc ──
   Couleur normalement pilotée par le Customizer LearnDash (Apparence >
   Personnaliser > LD30 > Styles globaux/Cours/Leçon/Topic — options
   learndash_ld30_*_status_complete_*_color en base). On force ici via
   CSS pour rester cohérent avec le token --success, quel que soit le
   réglage Customizer en place (global ou par contexte cours/leçon/topic).
──────────────────────────────────────────────────────────────────── */

.learndash-wrapper .ld-breadcrumbs .ld-status.ld-status-complete,
.learndash-wrapper .ld-course-status .ld-status.ld-status-complete {
    background: var(--wp--preset--color--success) !important;
    color: var(--wp--preset--color--white) !important;
}

/* Toute la bande (pas seulement le badge) passe en vert clair quand
   l'étape est terminée — même teinte que la bannière "Bravo" (30%). */

.learndash-wrapper .ld-breadcrumbs:has(.ld-status-complete) {
    background: color-mix(in srgb, var(--wp--preset--color--success) 30%, transparent) !important;
}

.learndash-wrapper .ld-breadcrumbs:has(.ld-status-complete) .ld-breadcrumbs-segments,
.learndash-wrapper .ld-breadcrumbs:has(.ld-status-complete) .ld-breadcrumbs-segments li,
.learndash-wrapper .ld-breadcrumbs:has(.ld-status-complete) .ld-breadcrumbs-segments li a {
    color: var(--wp--preset--color--white) !important;
}

/* ── Boutons "Chapitre précédent / suivant" (bas de page) — plus compacts ──
   Couleur de texte pilotée par le Customizer LD (réglée en noir sur fond
   bleu par défaut, peu lisible) : on force blanc. On réduit aussi le
   padding/la taille pour des boutons moins imposants.
──────────────────────────────────────────────────────────────────── */

.learndash-wrapper .ld-content-actions .ld-content-action .ld-button {
    color: var(--wp--preset--color--white) !important;
    padding: 0.6em 1em !important;
    font-size: 0.7em !important;
}

/* dc26-benk — profil LearnDash (bloc ld-profile) : cartes de stats + grille de cours.
   Templates : learndash/ld30/shortcodes/profile.php et profile/course-row.php */

/* ── Stats ── */

.dc26-profile-stats {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    gap: var(--wp--preset--spacing--20);
    margin: var(--wp--preset--spacing--30) 0;
}

@media (max-width: 600px) {
    .dc26-profile-stats {
        grid-auto-flow: row;
        grid-template-columns: repeat(2, 1fr);
    }
}

/* wpautop insère des <p></p> / <br> vides entre les divs : ils créent des colonnes fantômes */

.dc26-profile-stats > :not(.dc26-stat-card),
.dc26-profile-grid > p:empty,
.dc26-profile-grid > br,
.dc26-profile-grid .dc26-course-card p:empty,
.dc26-profile-grid .dc26-course-card br {
    display: none;
}

.dc26-stat-card {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: var(--wp--preset--spacing--20);
    padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30);
    background: var(--wp--preset--color--white);
    border: 1px solid var(--wp--preset--color--gray-light);
    border-radius: 999px;
    text-align: center;
}

.dc26-stat-card > p,
.dc26-stat-card br {
    display: none;
}

.dc26-stat-card strong {
    font-size: var(--wp--preset--font-size--large);
    line-height: 1.2;
    color: var(--wp--preset--color--gray-dark);
}

.dc26-stat-card span {
    font-size: var(--wp--preset--font-size--small);
    color: var(--wp--preset--color--gray-text);
}

/* Terminés / certificats : accent vert quand il y a quelque chose à montrer */

.dc26-stat-card.ld-profile-stat-completed strong,
.dc26-stat-card.ld-profile-stat-certificates strong {
    color: var(--wp--preset--color--success);
}

/* ── Outils (recherche) ── */

.dc26-profile-tools {
    display: flex;
    justify-content: flex-end;
    margin-bottom: var(--wp--preset--spacing--20);
}

/* ── Grille de cartes de cours ── */

.dc26-profile-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(272px, 1fr));
    gap: 1.5rem;
}

/* Cartes : markup et style partagés avec dc26/course-grid (css/_course-card.css) */

.dc26-profile-grid .dc26-course-card__title {
    margin: 1rem 0;
}

/* Bouton d'action (la carte entière est le lien) */

.dc26-course-card__cta {
    align-self: flex-start;
    padding: 0.4rem 1rem;
    font-size: var(--wp--preset--font-size--small);
    background: var(--wp--preset--color--white);
    color: var(--wp--preset--color--secondary);
}

/* Certificat : lien discret sous la progression */

.dc26-course-card__certificate {
    align-self: flex-start;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--wp--preset--color--white);
    text-decoration: underline;
}

/* ── Recherche : une seule ligne, sans fond ── */

.learndash-wrapper #ld-profile .ld-item-search-wrapper {
    position: relative;
    padding: 0 4.5rem 0 0;
    margin-bottom: var(--wp--preset--spacing--30);
    background: none;
    border: 0;
    box-shadow: none;
}

/* wpautop enveloppe des morceaux (dont le bouton « fermer ») dans des <p> : ils deviennent des
   éléments flex fantômes. display: contents supprime la boîte du <p> mais garde son contenu. */

.learndash-wrapper #ld-profile .ld-item-search-wrapper > p,
.learndash-wrapper #ld-profile .ld-item-search-fields > p {
    display: contents;
}

/* Petite flèche de bulle (losange) de LD au-dessus du champ */

.learndash-wrapper #ld-profile .ld-item-search-wrapper::before {
    display: none;
}

/* Titre et label restent pour les lecteurs d'écran */

.learndash-wrapper #ld-profile .ld-item-search-heading,
.learndash-wrapper #ld-profile .ld-item-search-name label {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
}

.learndash-wrapper #ld-profile .ld-item-search-fields {
    display: flex;
    align-items: center;
    gap: var(--wp--preset--spacing--20);
    margin: 0;
}

.learndash-wrapper #ld-profile .ld-item-search-name {
    display: flex;
    flex: 1;
    align-items: center;
    margin: 0;
}

.learndash-wrapper #ld-profile .ld-item-search-name > p,
.learndash-wrapper #ld-profile .ld-item-search-name br {
    display: none;
}

.learndash-wrapper #ld-profile .ld-item-search-name .ld-course-nav-field {
    width: 100%;
    height: 2.5rem;
    padding: 0 var(--wp--preset--spacing--30);
    background: var(--wp--preset--color--white);
    border: 1px solid var(--wp--preset--color--gray-cold);
    border-radius: 999px;
    font-size: var(--wp--preset--font-size--small);
}

.learndash-wrapper #ld-profile .ld-item-search-submit {
    margin: 0;
}

.learndash-wrapper #ld-profile .ld-item-search-submit .ld-button {
    padding: 0.4rem 1rem;
    color: var(--wp--preset--color--white);
    font-size: var(--wp--preset--font-size--small);
    font-weight: 500;
    /* !important : LD injecte sa couleur primaire (réglage LD30) avec cette priorité */
    background: var(--wp--preset--color--primary) !important;
    border: 0;
    border-radius: 999px;
    cursor: pointer;
}

.learndash-wrapper #ld-profile .ld-item-search-wrapper .ld-closer {
    position: absolute;
    top: 50%;
    right: 0;
    padding: 0;
    align-items: center;
    gap: 0.25rem;
    color: var(--wp--preset--color--gray-text);
    font-size: var(--wp--preset--font-size--small);
    font-weight: 400;
    white-space: nowrap;
    background: none;
    border: 0;
    transform: translateY(-50%);
}

/* Bandeau « Vous avez cherché … » */

.learndash-wrapper #ld-profile .ld-profile-search-string .ld-item-search-wrapper {
    padding: 0;
    font-size: var(--wp--preset--font-size--small);
    color: var(--wp--preset--color--gray-text);
}

/* ── Pagination : simple, sans fond, centrée ── */

.learndash-wrapper #ld-profile .ld-pagination {
    display: flex;
    justify-content: center;
    margin-top: var(--wp--preset--spacing--40);
}

.learndash-wrapper #ld-profile .ld-pagination .ld-pages {
    display: flex;
    align-items: center;
    gap: var(--wp--preset--spacing--30);
    width: auto;
    padding: 0;
    color: var(--wp--preset--color--gray-text);
    font-size: var(--wp--preset--font-size--small);
    font-weight: 400;
    text-transform: none;
    background: none;
    border-radius: 0;
}

.learndash-wrapper #ld-profile .ld-pagination .ld-pages a {
    color: var(--wp--preset--color--gray-dark);
}

.learndash-wrapper #ld-profile .ld-pagination .ld-pages a.ld-disabled,
.learndash-wrapper #ld-profile .ld-pagination .ld-pages a[disabled] {
    opacity: 0.3;
    pointer-events: none;
}

/* ── Carte « Certificats » cliquable ── */

a.dc26-stat-card {
    text-decoration: none;
}

a.dc26-stat-card:hover,
a.dc26-stat-card:focus-visible {
    border-color: var(--wp--preset--color--gray-medium);
}

/* Cibles des ancres : décalées sous le header sticky */

#dc26-profile-stats,
#ld-main-course-list {
    scroll-margin-top: 8rem;
}

/* ── Mes résultats : tableau des tests ── */

.dc26-results {
    margin-top: var(--wp--preset--spacing--60);
}

.dc26-results__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--wp--preset--spacing--30);
    margin-bottom: var(--wp--preset--spacing--30);
}

.dc26-results__title {
    margin: 0;
}

.dc26-results__top {
    font-size: var(--wp--preset--font-size--small);
    color: var(--wp--preset--color--gray-text);
    text-decoration: none;
    white-space: nowrap;
}

.dc26-results__top:hover {
    color: var(--wp--preset--color--gray-dark);
}

/* Cible de l'ancre « certificats » : décalée sous le header sticky */

.dc26-results__anchor {
    display: block;
    height: 0;
    scroll-margin-top: 8rem;
}

.dc26-results__filters {
    display: flex;
    gap: var(--wp--preset--spacing--30);
    margin: 0 0 var(--wp--preset--spacing--30);
    font-size: var(--wp--preset--font-size--small);
}

.dc26-results__filters a {
    color: var(--wp--preset--color--gray-text);
    text-decoration: none;
}

.dc26-results__filters a:hover {
    color: var(--wp--preset--color--gray-dark);
}

/* Filtre : ancre ciblée → on ne garde que les lignes avec certificat */

#dc26-results-certificates:target ~ .dc26-results__scroll .dc26-results__table tbody tr:not(.has-certificate) {
    display: none;
}

#dc26-results-certificates:target ~ .dc26-results__filters a[href="#dc26-results-certificates"],
.dc26-results:not(:has(:target)) .dc26-results__filters a[href="#dc26-results"] {
    color: var(--wp--preset--color--gray-dark);
    font-weight: 600;
}

.dc26-results__scroll {
    overflow-x: auto;
}

.dc26-results__table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--wp--preset--font-size--small);
}

.dc26-results__table th,
.dc26-results__table td {
    padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30);
    text-align: left;
    vertical-align: middle;
    border-bottom: 1px solid var(--wp--preset--color--gray-light);
}

.dc26-results__table th {
    font-weight: 600;
    color: var(--wp--preset--color--gray-text);
    white-space: nowrap;
}

.dc26-results__badge {
    display: inline-block;
    padding: 0.1rem 0.7rem;
    border-radius: 999px;
    font-size: var(--wp--preset--font-size--small);
    background: var(--wp--preset--color--gray-light);
    color: var(--wp--preset--color--gray-dark);
}

.dc26-results__badge--passed {
    background: var(--wp--preset--color--success);
    color: var(--wp--preset--color--white);
}

.dc26-results__certificate {
    color: var(--wp--preset--color--gray-dark);
}

/* Mobile : chaque ligne devient une carte, libellés via data-label */

@media (max-width: 700px) {
    .dc26-results__table thead {
        display: none;
    }

    .dc26-results__table,
    .dc26-results__table tbody,
    .dc26-results__table tr,
    .dc26-results__table td {
        display: block;
        width: 100%;
    }

    .dc26-results__table tr {
        padding: var(--wp--preset--spacing--20) 0;
        border-bottom: 1px solid var(--wp--preset--color--gray-light);
    }

    .dc26-results__table td {
        display: flex;
        justify-content: space-between;
        gap: var(--wp--preset--spacing--30);
        padding: 0.2rem 0;
        border: 0;
        text-align: right;
    }

    .dc26-results__table td::before {
        content: attr(data-label);
        color: var(--wp--preset--color--gray-text);
        text-align: left;
    }

    .dc26-results__table td:empty {
        display: none;
    }
}

/* Fiches coaching : header fixe (hors flux) pour que le hero bleu soit collé
   en haut, comme sur les pages page-no-title. */

.single-coaching header.wp-block-template-part.is-style-sticky-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
}

.admin-bar.single-coaching header.wp-block-template-part.is-style-sticky-header {
    top: var(--wp-admin--admin-bar--height, 0px);
}

.single-coaching .wp-site-blocks > :first-child,
.single-coaching .wp-site-blocks > main {
    margin-block-start: 0;
}

/* Header : barre blanche flottante en permanence (look benk). Équivalent de la
   variation opt-in `is-header-floating` de dc26-base, appliqué à tous les headers
   sticky sans modifier les templates de la base. */

.is-style-sticky-header > header.wp-block-group,
.is-style-sticky-header > .wp-block-group,
.is-style-sticky-header.is-top > header.wp-block-group,
.is-style-sticky-header.is-top > .wp-block-group,
.is-style-sticky-header.is-scrolled > header.wp-block-group,
.is-style-sticky-header.is-scrolled > .wp-block-group {
    width: min(100% - 2rem, var(--wp--style--global--wide-size, 1360px));
    margin-inline: auto;
    background-color: var(--wp--preset--color--white);
    border-radius: 0 0 20px 20px;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
    backdrop-filter: none;
}

/* Pas de chevauchement du hero sur la home. */

.home .is-style-sticky-header,
.front-page .is-style-sticky-header {
    margin-bottom: 0;
}

/* Navigation du footer : police réduite (même taille que le © Benk) */

footer.wp-block-group .wp-block-navigation {
    font-size: var(--wp--preset--font-size--small);
}

/* Logo toujours visible — neutralise le hide + transition du parent */

.home .is-style-sticky-header .wp-block-site-logo,
.front-page .is-style-sticky-header .wp-block-site-logo {
    opacity: 1 !important;
    transition: none !important;
    pointer-events: auto !important;
}

/* ── Test : nouvelle icône flèche pour les boutons dc26-outline-arrow /
   dc26-ghost-arrow / dc26-icon-arrow — override benk uniquement (dc26-base
   garde l'originale pour les autres sites). outline-arrow utilisait le
   caractère "→" en ::before ; on le remplace par la même icône masquée
   que les deux autres pour un rendu identique sur les 3 styles. */

.wp-block-button.is-style-dc26-outline-arrow .wp-block-button__link::before {
    content: "";
    width: 1.2em;
    height: 1.2em;
    flex-shrink: 0;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 576'%3E%3Cpath fill='black' d='M255.1 57.1C283.2 29 328.8 29 356.9 57.1L518.9 219.1C533 233.1 540 251.6 540 270L540 306C540 324.4 533 342.9 518.9 356.9L356.9 518.9C328.8 547 283.2 547 255.1 518.9C241.1 504.9 234 486.4 234 468L234 431.9C234 410.7 243.5 392.6 258.2 378L108 378C68.2 378 36 345.8 36 306L36 270C36 230.2 68.2 198 108 198L234 198L234 107.9C234 89.5 241 71.1 255.1 57zM270 432C270 441.2 273.5 450.4 280.5 457.4C294.6 471.5 317.4 471.5 331.4 457.4L493.4 295.4C507.5 281.3 507.5 258.6 493.4 244.5L331.4 82.5C317.3 68.4 294.5 68.4 280.5 82.5C266.5 96.6 266.4 119.4 280.5 133.4L350.3 203.2C361.4 214.3 353.3 233.9 337.6 233.9L108 234C88.1 234 72 250.1 72 270C72 289.9 88.1 306 108 306L337.6 306C353.3 306 361.4 325.6 350.3 336.7L280.5 406.5C273.5 413.5 270 422.8 270 432z'/%3E%3C/svg%3E") no-repeat center / contain;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 576'%3E%3Cpath fill='black' d='M255.1 57.1C283.2 29 328.8 29 356.9 57.1L518.9 219.1C533 233.1 540 251.6 540 270L540 306C540 324.4 533 342.9 518.9 356.9L356.9 518.9C328.8 547 283.2 547 255.1 518.9C241.1 504.9 234 486.4 234 468L234 431.9C234 410.7 243.5 392.6 258.2 378L108 378C68.2 378 36 345.8 36 306L36 270C36 230.2 68.2 198 108 198L234 198L234 107.9C234 89.5 241 71.1 255.1 57zM270 432C270 441.2 273.5 450.4 280.5 457.4C294.6 471.5 317.4 471.5 331.4 457.4L493.4 295.4C507.5 281.3 507.5 258.6 493.4 244.5L331.4 82.5C317.3 68.4 294.5 68.4 280.5 82.5C266.5 96.6 266.4 119.4 280.5 133.4L350.3 203.2C361.4 214.3 353.3 233.9 337.6 233.9L108 234C88.1 234 72 250.1 72 270C72 289.9 88.1 306 108 306L337.6 306C353.3 306 361.4 325.6 350.3 336.7L280.5 406.5C273.5 413.5 270 422.8 270 432z'/%3E%3C/svg%3E") no-repeat center / contain;
}

.wp-block-button.is-style-dc26-ghost-arrow .wp-block-button__link::after,
.wp-block-button.is-style-dc26-icon-arrow .wp-block-button__link::after {
    width: 1.2em;
    height: 1.2em;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 576'%3E%3Cpath fill='black' d='M255.1 57.1C283.2 29 328.8 29 356.9 57.1L518.9 219.1C533 233.1 540 251.6 540 270L540 306C540 324.4 533 342.9 518.9 356.9L356.9 518.9C328.8 547 283.2 547 255.1 518.9C241.1 504.9 234 486.4 234 468L234 431.9C234 410.7 243.5 392.6 258.2 378L108 378C68.2 378 36 345.8 36 306L36 270C36 230.2 68.2 198 108 198L234 198L234 107.9C234 89.5 241 71.1 255.1 57zM270 432C270 441.2 273.5 450.4 280.5 457.4C294.6 471.5 317.4 471.5 331.4 457.4L493.4 295.4C507.5 281.3 507.5 258.6 493.4 244.5L331.4 82.5C317.3 68.4 294.5 68.4 280.5 82.5C266.5 96.6 266.4 119.4 280.5 133.4L350.3 203.2C361.4 214.3 353.3 233.9 337.6 233.9L108 234C88.1 234 72 250.1 72 270C72 289.9 88.1 306 108 306L337.6 306C353.3 306 361.4 325.6 350.3 336.7L280.5 406.5C273.5 413.5 270 422.8 270 432z'/%3E%3C/svg%3E") no-repeat center / contain;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 576'%3E%3Cpath fill='black' d='M255.1 57.1C283.2 29 328.8 29 356.9 57.1L518.9 219.1C533 233.1 540 251.6 540 270L540 306C540 324.4 533 342.9 518.9 356.9L356.9 518.9C328.8 547 283.2 547 255.1 518.9C241.1 504.9 234 486.4 234 468L234 431.9C234 410.7 243.5 392.6 258.2 378L108 378C68.2 378 36 345.8 36 306L36 270C36 230.2 68.2 198 108 198L234 198L234 107.9C234 89.5 241 71.1 255.1 57zM270 432C270 441.2 273.5 450.4 280.5 457.4C294.6 471.5 317.4 471.5 331.4 457.4L493.4 295.4C507.5 281.3 507.5 258.6 493.4 244.5L331.4 82.5C317.3 68.4 294.5 68.4 280.5 82.5C266.5 96.6 266.4 119.4 280.5 133.4L350.3 203.2C361.4 214.3 353.3 233.9 337.6 233.9L108 234C88.1 234 72 250.1 72 270C72 289.9 88.1 306 108 306L337.6 306C353.3 306 361.4 325.6 350.3 336.7L280.5 406.5C273.5 413.5 270 422.8 270 432z'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* Formateur sans photo : smiley discret (Font Awesome face-smile, masqué en SVG) */

.dc26-teacher-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    aspect-ratio: 1;
    background-color: var(--wp--preset--color--gray-light);
    color: var(--wp--preset--color--gray-medium);
}

.dc26-teacher-placeholder::before {
    content: "";
    width: 30%;
    aspect-ratio: 1;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='black' d='M464 256a208 208 0 1 0-416 0 208 208 0 1 0 416 0zM0 256a256 256 0 1 1 512 0A256 256 0 1 1 0 256zm177.6 62.1C192.8 334.5 218.8 352 256 352s63.2-17.5 78.4-33.9c9-9.7 24.2-10.4 33.9-1.4s10.4 24.2 1.4 33.9c-22 23.8-60 49.4-113.6 49.4s-91.7-25.5-113.6-49.4c-9-9.7-8.4-24.9 1.4-33.9s24.9-8.4 33.9 1.4zM144.4 208a32 32 0 1 1 64 0 32 32 0 1 1-64 0zm192-32a32 32 0 1 1 0 64 32 32 0 1 1 0-64z'/%3E%3C/svg%3E") no-repeat center / contain;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='black' d='M464 256a208 208 0 1 0-416 0 208 208 0 1 0 416 0zM0 256a256 256 0 1 1 512 0A256 256 0 1 1 0 256zm177.6 62.1C192.8 334.5 218.8 352 256 352s63.2-17.5 78.4-33.9c9-9.7 24.2-10.4 33.9-1.4s10.4 24.2 1.4 33.9c-22 23.8-60 49.4-113.6 49.4s-91.7-25.5-113.6-49.4c-9-9.7-8.4-24.9 1.4-33.9s24.9-8.4 33.9 1.4zM144.4 208a32 32 0 1 1 64 0 32 32 0 1 1-64 0zm192-32a32 32 0 1 1 0 64 32 32 0 1 1 0-64z'/%3E%3C/svg%3E") no-repeat center / contain;
}