/*
 Theme Name:   Theme 3E Innovation V2
 Theme URI:    https://3e-innovation.com
 Description:  Thème enfant sur mesure - Refonte 2025/2026. Basé sur le Starter Pack AKOLAD.
 Author:       3E Innovation
 Author URI:   https://3e-innovation.com
 Template:     starter-pack-theme
 Version:      2.0.0
 Text Domain:  theme-3e-v2
*/

/*
 * =============================================
 * VARIABLES CSS — PALETTE & TYPOGRAPHIE
 * À mettre à jour quand la charte graphique est validée
 * =============================================
 */

:root {
    /* ── Couleurs validées ── */
    --color-brand:          #2F3588;   /* Bleu 3EI — titres, boutons primaires, nav */
    --color-text:           #404040;   /* Texte courant */
    --color-white:          #FFFFFF;

    /* Fonds de sections */
    --bg-beige:             #FAF6F1;   /* Fond principal / sections claires */
    --bg-blue:              #F0F1F6;   /* Sections alternées bleues */
    --bg-rose:              #F6F0F4;   /* Sections alternées roses */
    --bg-dark:              #2F3588;   /* Footer + sections plein bleu */

    /* ── Couleurs à valider ── */
    /* TODO : demander la valeur exacte au designer */
    --color-accent:         #E85D75;   /* Point décoratif fin de titre — à confirmer */
    --color-link:           var(--color-brand);   /* Couleur des liens — à confirmer */
    --color-link-hover:     #1e2260;   /* Hover liens — à confirmer */

    /* États et utilitaires */
    --color-brand-dark:     #1e2260;   /* Hover boutons, accents foncés */
    --color-border:         #D0D0D0;   /* Bordures légères */
    --color-neutral:        #767676;   /* Texte secondaire, méta */

    /* Typographie */
    --font-titles:   'Inter', Arial, sans-serif;       /* Titres h1→h6 */
    --font-body:     'Poppins', Arial, sans-serif;     /* Corps de texte */
    --font-access:   'Atkinson Hyperlegible', Arial, sans-serif; /* Fallback access */

    /* Tailles de titres — responsive avec clamp() */
    --font-size-h1: clamp(2.5rem, 5vw, 3.5rem);
    --font-size-h2: clamp(1.75rem, 3vw, 2.25rem);
    --font-size-h3: clamp(1.2rem, 2vw, 1.5rem);
    --font-size-h4: 1.125rem;
    --font-size-h5: 1rem;
    --font-size-h6: 0.9375rem;
    --font-size-body: 1rem;

    /* ── Focus visible — RGAA obligatoire ── */
    /* Contraste suffisant sur fond clair ET fond foncé */
    --focus-outline:        3px solid var(--color-accent);
    --focus-outline-offset: 2px;
    --focus-radius:         3px; /* coins arrondis uniformes sur tout le site */
}

html {
    font-size: 22px; /* base rem — grossit proportionnellement tous les rems du site */
    max-width: none !important;
    scroll-padding-top: 0; /* nav sticky hors flux, pas de compensation nécessaire */
}

/*
 * ── Gutenberg layout constraints override ──
 * Le thème parent AKOLAD injecte ses valeurs via inline styles (après notre stylesheet),
 * les variables CSS :root sont donc écrasées. On cible directement la propriété max-width
 * avec une spécificité supérieure à leur sélecteur :where() (spécificité = 0).
 */
body .is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
    max-width: 1440px;
}
body .is-layout-constrained > .alignwide {
    max-width: 1440px;
}

/*
 * =============================================
 * FOCUS VISIBLE — RGAA OBLIGATOIRE
 * Tous les éléments interactifs doivent avoir
 * un indicateur de focus visible et contrasté.
 * =============================================
 */

:focus-visible {
    outline: var(--focus-outline);
    outline-offset: var(--focus-outline-offset);
    border-radius: var(--focus-radius);
}

/* Supprimer l'outline par défaut uniquement si :focus-visible est géré */
:focus:not(:focus-visible) {
    outline: none;
}

/*
 * =============================================
 * SKIP LINKS (liens d'évitement)
 * Masqués visuellement sauf à la prise de focus
 * =============================================
 */

.skip-link {
    position: absolute;
    top: -100%;
    left: 0;
    z-index: 9999;
    padding: 0.75rem 1.5rem;
    background: var(--color-primary-dark);
    color: var(--color-white);
    font-weight: bold;
    text-decoration: underline;
    border-radius: 0 0 4px 0;
    transition: top 0.2s ease;
}

.skip-link:focus {
    top: 0;
    outline: var(--focus-outline);
    outline-offset: var(--focus-outline-offset);
}

/*
 * =============================================
 * TYPOGRAPHIE DE BASE — SYSTÈME UNIFIÉ
 * Règle : on ne redefine jamais font-size/family/weight
 * sur un Hx dans une section. On surcharge uniquement
 * la couleur via une classe contextuelle.
 * Exceptions légitimes : titres héros de pages entières
 * (.page-header-title, .page-header-subtitle, .surtitre-pill)
 * =============================================
 */

body {
    font-family: var(--font-body);
    font-size: var(--font-size-body);
    color: var(--color-text);
    line-height: 1.6;
    overflow-x: clip; /* bloque tout débordement horizontal (box-shadow, margins négatifs…) */
}

/* Liens globaux — bleu brand, gestion au cas par cas si besoin différent */
a {
    color: var(--color-brand);
    text-decoration: underline;
    text-underline-offset: 2px;
}

a:hover,
a:focus {
    color: var(--color-brand-dark);
}

/* Reset pour les éléments qui gèrent leur propre style de lien */
nav a,
.navbar a,
.btn,
.wp-block-button__link,
.formation-card-link,
.actu-card-link,
.single-article-back,
.single-article-cta-btn,
footer a {
    text-decoration: none;
}

/* ── H1 : Fredoka, léger, avec point décoratif ── */
h1,
.wp-block-heading.is-style-h1 {
    font-family: 'Fredoka', var(--font-titles) !important;
    font-size: var(--font-size-h1) !important;
    font-weight: 400 !important;
    color: var(--color-text) !important;
    line-height: 1.1 !important;
    word-break: normal;
    overflow-wrap: normal;
    hyphens: none;
}

/* ── H2 : Inter bold, bleu brand ── */
h2,
.wp-block-heading:is(h2) {
    font-family: var(--font-titles) !important;
    font-size: var(--font-size-h2) !important;
    font-weight: 700 !important;
    color: var(--color-brand) !important;
    line-height: 1.2;
}

/* ── H3 : Inter semibold, bleu brand, légèrement plus petit ── */
h3,
.wp-block-heading:is(h3) {
    font-family: var(--font-titles) !important;
    font-size: var(--font-size-h3) !important;
    font-weight: 600 !important;
    color: var(--color-brand) !important;
    line-height: 1.25;
}

/* ── H4-H6 : Inter semibold, texte sombre ── */
h4, h5, h6,
.wp-block-heading:is(h4),
.wp-block-heading:is(h5),
.wp-block-heading:is(h6) {
    font-family: var(--font-titles) !important;
    font-size: var(--font-size-h4) !important;
    font-weight: 600 !important;
    color: var(--color-text) !important;
    line-height: 1.3;
}

h5 { font-size: var(--font-size-h5) !important; }
h6 { font-size: var(--font-size-h6) !important; }

/* ── Surcharges contextuelles — couleur uniquement ──
   Si une section a un fond sombre, ajouter la classe
   correspondante ; taille/graisse/font s'adaptent seuls. */

/* Sections fond bleu brand */
.section-dark h1,
.section-dark h2,
.section-dark h3,
.section-dark h4 { color: #ffffff !important; }

/* Section Expertise (fond bleu) */
.expertise-wrapper h2,
.expertise-wrapper h3 { color: #ffffff !important; }

/* Section Boutique (fond bleu) */
.section-boutique h2,
.section-boutique h3 { color: #ffffff !important; }

/* Section Toucania (fond sombre) */
.section-toucania h2,
.section-toucania h3 { color: #ffffff !important; }

/* Section Approche (fond avec image sombre) */
.section-approche h2 { color: #ffffff !important; }

/* Mobile : réduit H1 sur petits écrans */
@media (max-width: 480px) {
    h1 { font-size: clamp(1.875rem, 8vw, 2.25rem) !important; }
}


/*
 * =============================================
 * CONTENU GUTENBERG — styles de base
 * =============================================
 */

/* Listes dans le contenu Gutenberg — rétablit les puces
   (Bootstrap les remet à zéro via list-unstyled ou list-style:none) */
.wp-block-list,
.content ul:not([class]),
.content ol:not([class]) {
    padding-left: 1.5rem !important;
    list-style: disc !important;
    margin-bottom: 1rem;
}

.content ol:not([class]) {
    list-style: decimal !important;
}

.wp-block-list li,
.content ul:not([class]) li,
.content ol:not([class]) li {
    margin-bottom: 0.35rem;
    padding-left: 0.25rem;
}

/* Couleurs Gutenberg palette AKOLAD */
.has-color-primary-color,
.has-color-primary-color.wp-block-heading {
    color: var(--color-brand) !important;
}

/* H1 conserve toujours sa couleur texte (#404040)
   même si la classe has-color-primary-color est appliquée.
   On utilise page-id-223 pour battre les règles wp-elements-* générées par Gutenberg */
h1.has-color-primary-color,
h1 .has-color-primary-color,
.page-id-223 h1 {
    color: var(--color-text) !important;
}

.has-pink-color,
.has-pink-color.wp-block-heading {
    color: #E0006A !important; /* rose AKOLAD */
}

/* Masque le titre de page auto (H1) sur les pages Gutenberg
   où le titre est déjà dans le contenu (ex: Déclaration d'accessibilité)
   → page-id récupéré via body class WP */
.page-id-223 .entry-title,
.page-id-223 .page-title {
    display: none;
}

/* Masque le titre auto AKOLAD sur la page À propos
   (le H1 est déjà dans le template page-a-propos.php) */
.page-template-page-a-propos .entry-title,
.page-template-page-a-propos .page-title {
    display: none;
}

/*
 * =============================================
 * CARTES ACTUALITÉS
 * =============================================
 */

.single-card {
    /* À styler selon la maquette */
}

.card-img-top {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

/* Stretched link : la zone de clic couvre toute la carte */
.card-title-link {
    color: var(--color-neutral-dark);
    text-decoration: none !important;
}

.card-title-link:hover,
.card-title-link:focus {
    text-decoration: underline;
    color: var(--color-primary);
}

.card-header {
    background: transparent;
    border: none;
    font-size: 1.375rem;
    padding-top: 0.9375rem;
}

.card-header h2 {
    font-size: 1.125rem;
}

/*
 * =============================================
 * HEADER
 * =============================================
 */

#main-header {
    background: var(--color-white);
    /* box-shadow supprimé sur la home — incompatible avec la vague */
}

body:not(.home) #main-header {
    box-shadow: 0 1px 8px rgba(0, 0, 0, 0.06);
    min-height: 80px;
    position: relative;
    overflow: visible; /* laisse le ::after déborder en bas */
    /* sticky-top Bootstrap gère le positionnement */
}

/* ── Vague décorative — copie exacte AKOLAD child theme ── */
.wave-menu {
    position: relative;
}

body.home .wave-menu::before {
    opacity: 1;
}

body.home .wave-menu::before {
    background-color: rgb(255, 255, 255);
    content: "";
    -webkit-mask-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+PCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj48c3ZnIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAxNjAwIDE1MCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4bWw6c3BhY2U9InByZXNlcnZlIiB4bWxuczpzZXJpZj0iaHR0cDovL3d3dy5zZXJpZi5jb20vIiBzdHlsZT0iZmlsbC1ydWxlOmV2ZW5vZGQ7Y2xpcC1ydWxlOmV2ZW5vZGQ7c3Ryb2tlLWxpbmVqb2luOnJvdW5kO3N0cm9rZS1taXRlcmxpbWl0OjI7Ij48cmVjdCBpZD0iUGxhbi1kZS10cmF2YWlsMiIgc2VyaWY6aWQ9IlBsYW4gZGUgdHJhdmFpbDIiIHg9IjAiIHk9IjAiIHdpZHRoPSIxNjAwIiBoZWlnaHQ9IjE0OS4yMzYiIHN0eWxlPSJmaWxsOm5vbmU7Ii8+PGc+PGcgaWQ9IkdyYXBoaWMtRWxlbWVudHMiIHNlcmlmOmlkPSJHcmFwaGljIEVsZW1lbnRzIj48ZyBpZD0ibWVudSI+PHBhdGggaWQ9IkZvcm1lLTEiIHNlcmlmOmlkPSJGb3JtZSAxIiBkPSJNLTEsLTg5bDE2MDEsOS4xMTFsLTAsNzcuOTA1Yy0wLDAgLTEwODYuODYsMC4xOTcgLTExNzEuNTcsMTIuMDI1Yy0xMjEuMjksMTYuOTM3IC0xNjcuODE0LDY0LjgzNyAtMjI4LjkyMiw5Ni43MDVjLTEwMS42MjIsNTIuOTk2IC0xOTkuNDE5LDE2LjkzNyAtMTk5LjQxOSwxNi45MzdsLTEuMDkzLC0yMTIuNjgzWiIgc3R5bGU9ImZpbGw6I2ZmZjtmaWxsLXJ1bGU6bm9uemVybzsiLz48L2c+PC9nPjwvZz48L3N2Zz4=);
    mask-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+PCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj48c3ZnIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAxNjAwIDE1MCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4bWw6c3BhY2U9InByZXNlcnZlIiB4bWxuczpzZXJpZj0iaHR0cDovL3d3dy5zZXJpZi5jb20vIiBzdHlsZT0iZmlsbC1ydWxlOmV2ZW5vZGQ7Y2xpcC1ydWxlOmV2ZW5vZGQ7c3Ryb2tlLWxpbmVqb2luOnJvdW5kO3N0cm9rZS1taXRlcmxpbWl0OjI7Ij48cmVjdCBpZD0iUGxhbi1kZS10cmF2YWlsMiIgc2VyaWY6aWQ9IlBsYW4gZGUgdHJhdmFpbDIiIHg9IjAiIHk9IjAiIHdpZHRoPSIxNjAwIiBoZWlnaHQ9IjE0OS4yMzYiIHN0eWxlPSJmaWxsOm5vbmU7Ii8+PGc+PGcgaWQ9IkdyYXBoaWMtRWxlbWVudHMiIHNlcmlmOmlkPSJHcmFwaGljIEVsZW1lbnRzIj48ZyBpZD0ibWVudSI+PHBhdGggaWQ9IkZvcm1lLTEiIHNlcmlmOmlkPSJGb3JtZSAxIiBkPSJNLTEsLTg5bDE2MDEsOS4xMTFsLTAsNzcuOTA1Yy0wLDAgLTEwODYuODYsMC4xOTcgLTExNzEuNTcsMTIuMDI1Yy0xMjEuMjksMTYuOTM3IC0xNjcuODE0LDY0LjgzNyAtMjI4LjkyMiw5Ni43MDVjLTEwMS42MjIsNTIuOTk2IC0xOTkuNDE5LDE2LjkzNyAtMTk5LjQxOSwxNi45MzdsLTEuMDkzLC0yMTIuNjgzWiIgc3R5bGU9ImZpbGw6I2ZmZjtmaWxsLXJ1bGU6bm9uemVybzsiLz48L2c+PC9nPjwvZz48L3N2Zz4=);
    position: fixed;
    margin-left: -1px;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    height: 6rem;
    width: 170rem;
    z-index: 10;
    opacity: 1;
}

body.home.no-scroll .wave-menu::before {
    transition: 0.2s;
    transform: translate(0%);
}

body.home.on-scroll .wave-menu::before {
    transition: 0.2s;
    transform: translate(-100%);
}

@media (max-width: 991px) {
    body.home.admin-bar.no-scroll .wave-menu::before,
    body.home.no-scroll .wave-menu::before {
        display: none !important;
    }
}

/* Logo */
#logo {
    width: auto;
    height: 56px;
    max-width: 150px;
}

/* ── Animation logo AKOLAD — grand au chargement, réduit au scroll ── */
#main-header a.zindex-tooltip {
    height: 60px;
    position: relative;
    width: 120px;
}

body #main-header a.zindex-tooltip > #logo {
    width: 96px;
    max-width: 96px;
    height: auto;
    top: 3px;
    position: absolute;
    transition: 0.2s;
}

body.no-scroll.home #main-header a.zindex-tooltip > #logo {
    width: 180px;
    max-width: 180px;
    height: auto;
    top: 12px;
}

@media (max-width: 991px) {
    body.no-scroll.home #main-header a.zindex-tooltip > #logo {
        width: 112px;
        max-width: 112px;
        top: -6px;
    }
}

/* Hero : padding-top restauré (vague désactivée) */


/* ── Navigation liens ── */
.nav-link {
    font-size: 15px;
    font-weight: 500;
    color: var(--color-text);
    padding: 0.6rem 0.875rem;
    transition: color 0.2s ease;
    white-space: nowrap;
}

.nav-link:hover,
.nav-link:focus {
    color: var(--color-brand) !important;
    text-decoration: none !important;
}

/* Page courante */
.nav-link[aria-current="page"] {
    color: var(--color-brand) !important;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* ── Bouton Contact (CTA nav) — pill bleu ── */
.btn-nav-contact,
a.btn-nav-contact {
    background-color: var(--color-brand) !important;
    color: var(--color-white) !important;
    font-weight: 600;
    padding: 0.6rem 1.5rem !important;
    border-radius: 999px !important;
    border: 2px solid var(--color-brand) !important;
    text-decoration: none !important;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
    margin-left: 0.75rem;
    display: inline-block;
}

.btn-nav-contact:hover,
.btn-nav-contact:focus,
a.btn-nav-contact:hover,
a.btn-nav-contact:focus {
    background-color: transparent !important;
    border-color: var(--color-brand) !important;
    color: var(--color-brand) !important;
    text-decoration: none !important;
}

/* Bouton Contact actif → voir système unifié boutons */

/* ── Sous-menus dropdown ── */
.dropdown-menu {
    border: none !important;
    border-radius: 14px !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.06);
    padding: 0.625rem !important;
    margin-top: 0.5rem;
    overflow: hidden; /* garantit les coins arrondis sur tous les items */
}

.dropdown-item {
    font-size: 14px;
    color: var(--color-text) !important;
    padding: 0.5rem 1rem;
    border-radius: 8px;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.dropdown-item:hover,
.dropdown-item:focus {
    background-color: var(--bg-blue) !important;
    color: var(--color-brand) !important;
}

/* Neutralise l'état actif Bootstrap sur les items dropdown
   (current-menu-item prend le même style que les autres items) */
.dropdown-item.active,
.dropdown-item:active,
.dropdown-menu .current-menu-item > .dropdown-item,
.dropdown-menu .current_page_item > .dropdown-item {
    background-color: transparent !important;
    color: var(--color-text) !important;
    font-weight: 500;
}

/* Rétablit le hover sur l'item actif */
.dropdown-item.active:hover,
.dropdown-item.active:focus,
.dropdown-menu .current-menu-item > .dropdown-item:hover,
.dropdown-menu .current-menu-item > .dropdown-item:focus {
    background-color: var(--bg-blue) !important;
    color: var(--color-brand) !important;
}

/* ── Burger mobile — design propre ── */

/* Neutralise TOUT ce qu'AKOLAD met sur .navbar-toggler */
#btn-burger-mobile,
#btn-burger-mobile:hover,
#btn-burger-mobile:focus,
#btn-burger-mobile:active,
#btn-burger-mobile:not(.collapsed),
.navbar-toggler#btn-burger-mobile {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
    padding: 0.375rem !important;
    border-radius: 8px !important;
    color: var(--color-brand) !important;
    line-height: 1 !important;
    align-items: center !important;
    justify-content: center !important;
    width: 40px !important;
    height: 40px !important; /* cible tactile RGAA 44×44 couverte via le padding */
}

/* Focus visible accessible (keyboard nav) */
#btn-burger-mobile:focus-visible {
    outline: 2px solid var(--color-brand) !important;
    outline-offset: 3px !important;
    border-radius: 8px !important;
}

/* Centrage vertical dans le header */
#btn-burger-mobile {
    margin-top: auto !important;
    margin-bottom: auto !important;
}

/* Fond discret au hover */
#btn-burger-mobile:hover {
    background: var(--bg-blue) !important;
}

/* Swap SVG : burger visible par défaut, croix masquée */
#btn-burger-mobile .icon-burger { display: block; }
#btn-burger-mobile .icon-close  { display: none;  }

/* Quand menu ouvert : inverse */
#btn-burger-mobile:not(.collapsed) .icon-burger { display: none;  }
#btn-burger-mobile:not(.collapsed) .icon-close  { display: block; }

/* Masque les anciens spans au cas où */
#btn-burger-mobile .navbar-toggler-icon,
#btn-burger-mobile .navbar-toggler-name {
    display: none !important;
}

/* ── Menu mobile ouvert ── */
@media (max-width: 991.98px) {
    .navbar-collapse {
        background: var(--color-white);
        border-top: 1px solid var(--color-border);
        padding: 1rem;
    }

    .nav-link {
        padding: 0.6rem 0;
        border-bottom: 1px solid var(--bg-blue);
    }

    .btn-nav-contact {
        margin: 1rem 0 0.5rem;
        display: inline-block;
    }

    /* Sous-menu mobile : dans le flux normal, pas un floating card.
       Border-left de marque + fond léger en remplacement du box-shadow
       qui est rogné par overflow du parent scroll-zone. */
    .dropdown-menu {
        box-shadow: none !important;
        border-radius: 0 8px 8px 0 !important;
        border-left: 3px solid var(--color-brand) !important;
        background: var(--bg-blue) !important;
        margin-top: 0 !important;
        margin-left: 1rem;
    }

    .dropdown-item,
    .dropdown-item:first-child,
    .dropdown-item:last-child {
        border-radius: 0 6px 6px 0 !important;
    }
}

/*
 * =============================================
 * FOOTER
 * =============================================
 */

body footer#footer,
body footer#footer.bg-white,
html body footer#footer {
    background-color: var(--color-brand) !important;
    color: #FFFFFF !important;
}

/* Neutralise les puces Bootstrap/WP sur les listes du footer */
footer#footer ul,
footer#footer .footer-nav-list {
    list-style: none !important;
    padding-left: 0 !important;
    margin-bottom: 0;
}

/* Texte et liens blancs dans le footer */
footer#footer p,
footer#footer span,
footer#footer address {
    color: rgba(255, 255, 255, 0.85) !important;
    font-size: 16px;
}

footer#footer a {
    color: rgba(255, 255, 255, 0.85) !important;
    text-decoration: none !important;
    font-size: 16px;
}

footer#footer a:hover,
footer#footer a:focus {
    color: #FFFFFF !important;
    text-decoration: underline;
}

/* ── Zone Gutenberg du footer ──
 * Les blocs Gutenberg composant le footer
 * héritent de la couleur de texte blanche.
 */
#footer-gutenberg {
    padding: 3rem 0 2rem;
}

#footer-gutenberg a {
    color: rgba(255, 255, 255, 0.85);
    text-decoration: none !important;
    transition: color 0.2s ease;
}

#footer-gutenberg a:hover,
#footer-gutenberg a:focus {
    color: var(--color-white);
    text-decoration: underline;
}

/* ── Colonnes footer ── */
.footer-col-title {
    font-size: 16px;
    font-weight: 700;
    text-transform: none;
    letter-spacing: 0;
    color: var(--color-white);
    margin-bottom: 1rem;
}

.footer-nav-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-nav-list li {
    margin-bottom: 0.25rem;
}

/* Neutralise le padding Bootstrap .nav-link dans le footer */
.footer-nav-list a,
.footer-nav-list a.nav-link {
    color: rgba(255, 255, 255, 0.8);
    font-size: 16px;
    text-decoration: none !important;
    transition: color 0.2s ease;
    line-height: 1.4;
    display: block;
    padding: 0.15rem 0;
    white-space: normal;
}

.footer-nav-list a:hover,
.footer-nav-list a:focus,
.footer-nav-list a.nav-link:hover,
.footer-nav-list a.nav-link:focus {
    color: var(--color-white);
    text-decoration: underline;
}

/* ── Infos de contact dans le footer ── */
.footer-contact-item {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    margin-bottom: 0.75rem;
    color: rgba(255, 255, 255, 0.85);
    font-size: 16px;
}

.footer-contact-item i {
    margin-top: 0.125rem;
    flex-shrink: 0;
    color: var(--color-white);
}

.footer-contact-item a {
    color: rgba(255, 255, 255, 0.85);
    text-decoration: none !important;
}

.footer-contact-item a:hover,
.footer-contact-item a:focus {
    color: var(--color-white);
    text-decoration: underline;
}

/* ── Barre du bas du footer (copyright + liens légaux) ── */
.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    padding: 1rem 0;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.7);
}

.footer-bottom a {
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none !important;
    transition: color 0.2s ease;
}

.footer-bottom a:hover,
.footer-bottom a:focus {
    color: var(--color-white);
    text-decoration: underline;
}

/* ── Logo dans le footer — fond blanc ── */
.footer-logo-wrapper {
    background: var(--color-white);
    border-radius: 8px;
    padding: 0.5rem 0.75rem;
    display: inline-block;
    margin-bottom: 1rem;
}

.footer-logo-wrapper img {
    height: 44px;
    width: auto;
}

/* ── Description sous logo ── */
.footer-description {
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.75);
    line-height: 1.5;
    max-width: 220px;
}

/*
 * =============================================
 * BOUTON RETOUR EN HAUT
 * =============================================
 */

#btn-top-return {
    bottom: 1.5rem;
    right: 1.5rem;
    background-color: var(--color-brand);
    color: var(--color-white);
    border-radius: 50%;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    transition: background-color 0.2s ease;
    /* min 44x44px = taille minimale cible tactile RGAA */
}

#btn-top-return:hover,
#btn-top-return:focus {
    background-color: var(--color-brand-dark);
}

/*
 * =============================================
 * ACCESSIBILITÉ — UTILITAIRES
 * =============================================
 */

/* Texte visible uniquement pour les lecteurs d'écran */
.visually-hidden,
.screen-reader-text {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/*
 * =============================================
 * HOME — SECTIONS
 * =============================================
 */

/* Étiquette sur fond sombre — fond blanc, texte bleu */
/*
 * ── Surtitre pill — SYSTÈME UNIFIÉ ──────────────────────────────────────
 * 3 variantes :
 *   .surtitre           → fond blanc, texte bleu  (sections claires)
 *   .surtitre-white     → fond semi-transparent, texte blanc (sections sombres)
 *   .surtitre-anthracite → fond #3D3D3D, texte blanc (Toucania)
 * Note : .surtitre-dark est un alias de .surtitre (même rendu)
 * ────────────────────────────────────────────────────────────────────── */
.surtitre,
.surtitre-dark {
    display: inline-block;
    font-size: 0.875rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    text-transform: none;
    color: var(--color-brand);
    background: #fff;
    border: none;
    border-radius: 6px;
    padding: 0.35rem 1rem;
    margin-bottom: 1rem;
}

/* Point décoratif rouge en fin de titre */
.titre-accent::after,
.has-accent-dot::after {
    content: '.';
    color: var(--color-accent);
    margin-left: -0.08em;
}

.has-accent-dot-green::after {
    content: '.';
    color: #60C7C0;
    margin-left: -0.08em;
}

.has-accent-dot-orange::after {
    content: '.';
    color: #FFC94D;
    margin-left: -0.08em;
}

/* ── Sections alternées ── */
.section-beige { background-color: var(--bg-beige); }
.section-blue  { background-color: var(--bg-blue); }
.section-rose  { background-color: var(--bg-rose); }
.section-dark  { background-color: var(--color-brand); color: #fff; }

/* Espacement standard des sections */
.section-padding {
    padding-top: 5rem;
    padding-bottom: 5rem;
}

/* ── HERO ── */
.hero-section {
    background-color: var(--bg-beige);
    padding: 5rem 0 3rem;
    /* overflow: hidden retiré — les disques décalés vers le haut seraient rognés */
    min-height: calc(100vh - 80px);
    min-height: calc(100dvh - 80px);
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Le wp-block-columns direct enfant prend toute la largeur disponible */
.hero-section > .wp-block-group > .wp-block-columns,
.hero-section > .wp-block-columns {
    width: 100%;
}

/* Hero H1 — taille spécifique au hero, indépendante du global h1
   clamp : min 2.5rem (mobile) → fluide → max 4.5rem (~81px à 18px base)
   N'affecte pas les H1 des pages secondaires */
.hero-title,
.hero-section h1 {
    font-size: clamp(2.5rem, 5.5vw, 4.5rem) !important;
    margin-bottom: 1.5rem;
    line-height: 1.1;
}

.hero-subtitle,
.hero-section p:not(.surtitre) {
    font-size: 1.125rem;
    color: var(--color-text);
    max-width: 480px;
    line-height: 1.6;
    margin-bottom: 2rem;
}

/* Image hero — s'applique uniquement aux images hors grille de disques */
.hero-section .wp-block-column:last-child img:not(.hero-card-img) {
    border-radius: 12px;
    width: 100%;
    height: auto;
}


/* ── Boutons ── */

/*
 * ─────────────────────────────────────────────────────
 * SYSTÈME DE BOUTONS UNIFIÉ — 4 variantes
 *
 * .btn-3e / .btn-primary-3e   → Bleu   : fond bleu   → hover outline bleu
 * .btn-3e--outline / .btn-outline-3e → Outline : fond transp → hover fond bleu
 * .btn-3e--white / .apropos-hero-btn → Blanc  : fond blanc   → hover outline blanc
 * .btn-3e--toucania              → Toucania : fond blanc, texte noir → hover outline blanc
 *
 * Les boutons Gutenberg par section héritent du bon type
 * via leurs sélecteurs contextuels ci-dessous.
 * ─────────────────────────────────────────────────────
 */

/* ── Base partagée ── */
.btn-3e,
.btn-primary-3e,
.btn-3e--outline,
.btn-outline-3e,
.btn-3e--white,
.btn-3e--toucania,
.btn-3e--discover,
.apropos-hero-btn,
.single-article-cta-btn,
.single-formation-cta-btn,
.wp-block-button__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 2rem;
    border-radius: 999px !important;
    font-weight: 500 !important;
    font-size: 0.8rem;
    line-height: 1.4;
    text-decoration: none !important;
    cursor: pointer;
    border: 2px solid transparent !important;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

/* ── État :active — feedback clic immédiat ── */
.btn-3e:active,
.btn-primary-3e:active,
.btn-3e--outline:active,
.btn-outline-3e:active,
.btn-3e--white:active,
.btn-3e--toucania:active,
.btn-3e--discover:active,
.apropos-hero-btn:active,
.single-article-cta-btn:active,
.single-formation-cta-btn:active,
.btn-nav-contact:active,
a.btn-nav-contact:active,
.formation-card-btn:active,
.wp-block-button__link:active {
    transform: scale(0.97);
    opacity: 0.9;
}

/* ── Variante 1 : Bleu (défaut global) ──────────────
   Tout wp-block-button__link est bleu par défaut.
   Normal : fond bleu, texte blanc
   Hover  : fond transparent, bordure bleue, texte bleu */
.btn-3e,
.btn-primary-3e,
body .wp-block-button__link,
.single-formation-cta-btn {
    background-color: var(--color-brand) !important;
    border-color: var(--color-brand) !important;
    color: #fff !important;
}

.btn-3e:hover, .btn-3e:focus,
.btn-primary-3e:hover, .btn-primary-3e:focus,
body .wp-block-button__link:hover,
body .wp-block-button__link:focus,
.single-formation-cta-btn:hover,
.single-formation-cta-btn:focus {
    background-color: transparent !important;
    border-color: var(--color-brand) !important;
    color: var(--color-brand) !important;
}

/* ── Variante 2 : Outline ───────────────────────────
   Exceptions qui doivent être outline par défaut.
   Normal : fond transparent, bordure bleue, texte bleu
   Hover  : fond bleu, texte blanc */
.btn-3e--outline,
.btn-outline-3e,
.wp-block-button.is-style-outline .wp-block-button__link,
body .section-actualites .wp-block-button__link,
body .section-cta-final .wp-block-button:first-child .wp-block-button__link,
.single-article-cta-btn {
    background-color: transparent !important;
    border-color: var(--color-brand) !important;
    color: var(--color-brand) !important;
}

.btn-3e--outline:hover, .btn-3e--outline:focus,
.btn-outline-3e:hover, .btn-outline-3e:focus,
.wp-block-button.is-style-outline .wp-block-button__link:hover,
.wp-block-button.is-style-outline .wp-block-button__link:focus,
body .section-actualites .wp-block-button__link:hover,
body .section-actualites .wp-block-button__link:focus,
body .section-cta-final .wp-block-button:first-child .wp-block-button__link:hover,
body .section-cta-final .wp-block-button:first-child .wp-block-button__link:focus,
.single-article-cta-btn:hover,
.single-article-cta-btn:focus {
    background-color: var(--color-brand) !important;
    border-color: var(--color-brand) !important;
    color: #fff !important;
}

/* single-article-cta-btn — surcharge taille et gap icône */
.single-article-cta-btn {
    gap: 0.5rem;
    font-size: 0.95rem;
    padding: 0.65rem 1.75rem;
}

/* ── Variante 3 : Blanc ─────────────────────────────
   Utilisé sur fonds sombres (expertise, boutique, hero à-propos)
   Normal : fond blanc, texte bleu, bordure blanche
   Hover  : fond transparent, bordure blanche, texte blanc */
.btn-3e--white,
.apropos-hero-btn,
body .expertise-wrapper .wp-block-button .wp-block-button__link,
body .expertise-wrapper .wp-block-buttons .wp-block-button__link,
.section-boutique .wp-block-buttons .wp-block-button__link {
    background-color: #fff !important;
    border-color: #fff !important;
    color: var(--color-brand) !important;
}

.btn-3e--white:hover, .btn-3e--white:focus,
.apropos-hero-btn:hover, .apropos-hero-btn:focus,
body .expertise-wrapper .wp-block-button .wp-block-button__link:hover,
body .expertise-wrapper .wp-block-button .wp-block-button__link:focus,
body .expertise-wrapper .wp-block-buttons .wp-block-button__link:hover,
body .expertise-wrapper .wp-block-buttons .wp-block-button__link:focus,
.section-boutique .wp-block-buttons .wp-block-button__link:hover,
.section-boutique .wp-block-buttons .wp-block-button__link:focus {
    background-color: transparent !important;
    border-color: #fff !important;
    color: #fff !important;
}

/* ── Variante 4 : Toucania ──────────────────────────
   Normal : fond blanc, texte sombre
   Hover  : fond transparent, bordure blanche, texte blanc */
.btn-3e--toucania,
.section-toucania .wp-block-button__link {
    background-color: #fff !important;
    border-color: #fff !important;
    color: #0D0D0D !important;
}

.btn-3e--toucania:hover, .btn-3e--toucania:focus,
.section-toucania .wp-block-button__link:hover,
.section-toucania .wp-block-button__link:focus {
    background-color: transparent !important;
    border-color: #fff !important;
    color: #fff !important;
}

/* ── Variante Discover : fond menthe, texte brand, flèches auto ── */
.btn-3e--discover .wp-block-button__link,
a.btn-3e--discover {
    background-color: #99F3E2 !important;
    border-color: #99F3E2 !important;
    color: #0D0D0D !important;
    font-weight: 600 !important;
    border-radius: 12px !important;
    padding: 0.75rem 1.5rem !important;
}

/* Aligne le wrapper bouton à gauche */
.wp-block-buttons:has(.btn-3e--discover) {
    justify-content: flex-start !important;
}

/* Annule le padding gauche qui décale le bouton */
.wp-block-button.btn-3e--discover {
    padding-left: 0 !important;
}

.btn-3e--discover .wp-block-button__link::before,
a.btn-3e--discover::before {
    content: '↓';
    margin-right: 0.5rem;
    font-size: 1rem;
    line-height: 1;
}

.btn-3e--discover .wp-block-button__link::after,
a.btn-3e--discover::after {
    content: '↓';
    margin-left: 0.5rem;
    font-size: 1rem;
    line-height: 1;
}

.btn-3e--discover .wp-block-button__link:hover,
.btn-3e--discover .wp-block-button__link:focus,
a.btn-3e--discover:hover,
a.btn-3e--discover:focus {
    background-color: var(--color-brand) !important;
    border-color: var(--color-brand) !important;
    color: #ffffff !important;
}

/* ── Hero pages Services ── */
body h1.service-hero-title,
body .service-hero-title {
    font-size: clamp(1.6rem, 3vw, 2.2rem) !important;
    font-family: 'Poppins', sans-serif !important;
    font-weight: 700 !important;
    color: var(--color-brand) !important;
    line-height: 1.15 !important;
    margin-bottom: 1rem !important;
    text-align: left !important;
}

.service-hero-text {
    font-size: 1rem;
    color: var(--color-text);
    line-height: 1.6;
    text-align: left !important;
    margin-bottom: 0.75rem;
}

/* ── Section Notre démarche — pages Services ── */
.demarche-col {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
}

.demarche-col .demarche-illus {
    margin-top: auto !important;
    padding-top: 1.5rem !important;
    width: 100% !important;
}

.demarche-icon img {
    width: 72px !important;
    height: 72px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
}



/* ── Classes utilitaires pages Services ── */

/* ul/ol dans les colonnes démarche : toujours alignés à gauche
   (reset du text-align:center hérité de .demarche-col) */
.demarche-col ul,
.demarche-col ol {
    text-align: left !important;
    padding-left: 1.25rem !important;
    margin-bottom: 0 !important;
}
.demarche-col li {
    text-align: left !important;
    margin-bottom: 0.4rem !important;
}

/* Texte couleur brand bleu */
.services-text-blue {
    color: var(--color-brand) !important;
}

/* ── Cards types/domaines — pages Services ── */
.rv-card {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    background: #ffffff !important;
    border: 1px solid #e7e7e7 !important;
    border-radius: 16px !important;
    box-shadow: 0 2px 12px rgba(47,53,136,0.06) !important;
    padding: 1.5rem 1rem !important;
}

.rv-card p {
    font-weight: 600 !important;
    font-size: 0.8rem !important;
    color: var(--color-text) !important;
    margin-top: 0.75rem !important;
    margin-bottom: 0 !important;
}

.rv-card .rv-card-subtitle {
    font-weight: 400 !important;
    font-size: 0.8rem !important;
}

.rv-card img {
    width: 100% !important;
    border-radius: 8px !important;
}

.rv-card .rv-card-illus {
    margin-top: auto !important;
    padding-top: 1rem !important;
}

.section-types-rv {
    background-color: #F6F0F4 !important;
}

.section-domaines-rv {
    background-color: #FAF6F1 !important;
}

.section-types-rv h2,
.section-domaines-rv h2 {
    color: #0D0D0D !important;
    text-align: center !important;
}

/* ── Section Réalisation vidéo — pages Services ── */
.section-realisation {
    background-color: #F9FAFB !important;
}

.section-realisation h2 {
    color: #0D0D0D !important;
    text-align: center !important;
}

.section-realisation .accordion-item {
    background: transparent;
    border: none !important;
    border-bottom: 1px solid #D1D5DB !important;
    border-radius: 0 !important;
}

.section-realisation .accordion-button {
    background: transparent !important;
    color: #404040 !important;
    font-size: 1rem !important;
    font-weight: 400 !important;
    padding: 1.25rem 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
}

.section-realisation .accordion-button:focus {
    box-shadow: none !important;
    outline: 2px solid var(--color-brand) !important;
    outline-offset: 4px !important;
    border-radius: 4px !important;
}

.section-realisation .accordion-button::after {
    content: '+' !important;
    background-image: none !important;
    font-size: 1.375rem !important;
    font-weight: 300 !important;
    color: #404040 !important;
    width: auto !important;
    height: auto !important;
    transform: none !important;
    line-height: 1 !important;
}

.section-realisation .accordion-button:not(.collapsed) {
    background: transparent !important;
    color: var(--color-brand) !important;
    box-shadow: none !important;
}

.section-realisation .accordion-button:not(.collapsed)::after {
    content: '×' !important;
    transform: none !important;
    color: var(--color-brand) !important;
}

.section-realisation .accordion-body {
    padding: 0.75rem 0 1.25rem !important;
    color: #555;
    line-height: 1.7;
    font-size: 0.9375rem;
}

/* ── Section Avantages — pages Services ── */
.section-avantages {
    background-color: #F0F1F6 !important;
}

.section-avantages h2 {
    color: #0D0D0D !important;
}

.avantage-titre {
    font-size: 1.05rem !important;
    font-weight: 700 !important;
    color: var(--color-text) !important;
    margin-bottom: 0.15rem !important;
    margin-top: 1rem !important;
}

.avantage-texte {
    font-size: 0.95rem !important;
    color: var(--color-text) !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}


.bandeau-demarche {
    background: linear-gradient(to right, rgba(204,223,248,0.2) 0%, rgba(28,107,154,0.2) 50%, rgba(204,223,248,0.2) 100%) !important;
    padding: 2rem 3rem !important;
    text-align: center !important;
}

.bandeau-demarche p {
    color: #2F3588 !important;
    font-size: 1.05rem !important;
    margin: 0 auto !important;
    max-width: 700px !important;
}


.btn-nav-contact[aria-current="page"],
a.btn-nav-contact[aria-current="page"],
.btn-nav-contact.active,
a.btn-nav-contact.active {
    color: var(--color-white) !important;
    background-color: var(--color-brand-dark) !important;
}

/* ── formation-card-btn — petit bouton dans les cards ── */
.formation-card-btn {
    flex-shrink: 0;
    font-size: 0.8125rem !important;
    font-weight: 600 !important;
    padding: 0.5rem 1rem !important;
    border-radius: 999px !important;
    text-decoration: none !important;
    white-space: nowrap;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.formation-card-btn--outline {
    background: transparent !important;
    border: 2px solid var(--color-brand) !important;
    color: var(--color-brand) !important;
}

.formation-card-btn--outline:hover,
.formation-card-btn--outline:focus {
    background: var(--color-brand) !important;
    color: #fff !important;
}


/* ── Cards services hero (grille 2x2 droite) ── */
/*
 * ── Hero cards — disques en quinconce ──
 * Structure : .hero-cards-grid > .hero-cards-row (x2) > .hero-card (x2)
 * Ligne du haut  : alignée à droite (justify-content: flex-end)
 * Ligne du bas   : alignée à gauche + padding-left pour le décalage
 * ↳ Ajuster padding-left de .hero-cards-row--bottom pour affiner le quinconce
 */
.hero-cards-grid {
    display: flex;
    flex-direction: column;
    gap: 1.75rem;
}

.hero-cards-row {
    display: flex;
    gap: 2rem;
    align-items: flex-start;
}

.hero-cards-row--top    { justify-content: flex-end; }
.hero-cards-row--bottom { justify-content: flex-end; padding-right: 5rem; }

/* Card = disque + texte centré dessous, fond transparent */
.hero-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.75rem;
    background: transparent;
    border: none;
    box-shadow: none;
    border-radius: 0;
    overflow: visible;
    height: auto;
    transform: none;
}

/* Disque — !important sur width ET height pour contrer Bootstrap img { height: auto } */
.hero-card-img {
    width: clamp(160px, 17vw, 240px) !important;
    height: clamp(160px, 17vw, 240px) !important;
    border-radius: 50% !important;
    object-fit: cover;
    object-position: center;
    display: block;
    flex-shrink: 0;
    box-shadow: 0 6px 24px rgba(47, 53, 136, 0.13);
}

.hero-card-body { padding: 0; width: 100%; }

.hero-card-title {
    font-size: 0.78rem !important;
    font-weight: 700 !important;
    color: var(--color-text) !important;
    font-family: var(--font-titles) !important;
    line-height: 1.25 !important;
    margin: 0 0 0.2rem !important;
    padding: 0 !important;
    white-space: nowrap;
}

.hero-card-desc {
    font-size: 0.68rem !important;
    color: var(--color-neutral) !important;
    line-height: 1.3 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* ── Responsive ── */
@media (max-width: 991px) {
    .hero-cards-grid { gap: 1.25rem; }
    .hero-cards-row  { gap: 1rem; }
    .hero-cards-row--bottom { padding-right: 1.75rem; padding-left: 0; }
    .hero-card-img {
        width: clamp(110px, 13vw, 170px) !important;
        height: clamp(110px, 13vw, 170px) !important;
    }
}

@media (max-width: 767px) {
    /* Mobile : 2 lignes sans décalage, cercles plus petits */
    .hero-cards-row--bottom { padding-left: 0; }
    .hero-cards-row { justify-content: center; gap: 0.75rem; }
    .hero-card-img {
        width: clamp(75px, 16vw, 100px) !important;
        height: clamp(75px, 16vw, 100px) !important;
    }
    .hero-card-title { font-size: 0.65rem !important; }
    .hero-card-desc  { font-size: 0.6rem !important; }
}

/* ── Section Expertise ── */
.expertise-wrapper {
    background-color: var(--color-brand);
    background-size: cover;
    background-position: center;
    padding: 4rem 3rem;
    /* Pleine largeur — max-width et border-radius retirés */
    overflow: hidden;
}

/* Pas d'overlay CSS — l'image est déjà traitée */

/* Fond transparent sur tous les blocs enfants */
.expertise-wrapper .wp-block-group,
.expertise-wrapper > .wp-block-paragraph,
.expertise-wrapper > .wp-block-heading,
.expertise-wrapper > .wp-block-buttons,
.expertise-wrapper > .wp-block-html {
    background: transparent !important;
}

/* Colonnes : texte à gauche centré verticalement, image à droite */
.expertise-wrapper .wp-block-columns {
    align-items: center;
    margin-bottom: 2.5rem;
}

/* Colonne gauche : centrage vertical, éléments pas étirés */
.expertise-wrapper .wp-block-column:first-child {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
}

/* Image colonne droite */
.expertise-wrapper .wp-block-column:last-child img {
    border-radius: 16px;
    width: 100%;
    height: auto;
    display: block;
}

/* Surtitre : fond blanc, texte bleu, coins légèrement arrondis */
/* .expertise-wrapper .surtitre → couvert par .surtitre base */

/* Titre blanc, aligné à gauche */
.expertise-wrapper h2,
.expertise-wrapper .wp-block-heading {
    color: #fff !important;
    font-family: var(--font-titles) !important;
    text-align: left;
    margin-bottom: 2.5rem;
}

/* Grille — 5 colonnes pour les 5 cards */
.wp-block-html .expertise-grid,
.expertise-grid {
    display: grid !important;
    grid-template-columns: repeat(5, 1fr);
    gap: 1.5rem;
    margin: 0 0 2.5rem;
    width: 100%;
    text-align: center;
}

/* Pas de card — contenu transparent */
.card-expertise {
    background: transparent !important;
    border-radius: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
    border: none !important;
    text-align: center;
}

/* Icône : cercle blanc avec icône bleue outline */
.card-expertise-icon {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.25rem;
}

.card-expertise-icon i {
    font-size: 1.5rem;
    color: var(--color-brand);
}

.card-expertise-icon img,
.card-expertise-icon svg {
    width: 28px;
    height: 28px;
    color: var(--color-brand);
}

/* Titres et textes blancs */
.card-expertise-title {
    font-size: 1rem !important;
    font-weight: 600 !important;
    color: #fff !important;
    margin-bottom: 0.5rem !important;
    line-height: 1.3 !important;
    font-family: var(--font-titles) !important;
    text-align: center;
}

.card-expertise-desc {
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.5;
    margin: 0;
    text-align: center;
}

/* Bouton blanc avec texte bleu */
.expertise-wrapper .wp-block-buttons {
    justify-content: center;
    background: transparent !important;
}

/* Bouton expertise → .btn-3e--white — voir système unifié */

@media (max-width: 991px) {
    .expertise-grid { grid-template-columns: repeat(3, 1fr) !important; }
}
@media (max-width: 575px) {
    .expertise-grid { grid-template-columns: repeat(2, 1fr) !important; }
    .expertise-wrapper { padding: 2.5rem 1.25rem; }
}
@media (max-width: 480px) {
    .expertise-grid { grid-template-columns: 1fr !important; }
}


/*
 * =============================================
 * SECTION BOUTIQUE
 * =============================================
 */

.section-boutique {
    position: relative;
    background-color: var(--color-brand);
    background-size: cover;
    background-position: right center;
    padding: 2.5rem 0 0; /* pas de padding bas — image colle en bas */
    overflow: hidden;
    align-items: flex-end !important;
}

/* Surtitre : fond blanc, texte bleu, coins arrondis */
/* .section-boutique .surtitre → couvert par .surtitre base */

/* Titre blanc */
.section-boutique h2,
.section-boutique .wp-block-heading {
    color: #fff !important;
    margin-bottom: 1rem;
}

/* Texte chapô blanc — 1.2rem */
.section-boutique p:not(.surtitre) {
    color: rgba(255, 255, 255, 0.9) !important;
    font-size: 1.2rem !important;
    line-height: 1.6;
    max-width: 420px;
}

/* Bouton blanc fond transparent → visible sur fond bleu */
/* Bouton boutique → .btn-3e--white — voir système unifié */

/* Image droite — collée en bas sans espace */
.section-boutique .wp-block-column:last-child {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 0 !important;
    margin: 0 !important;
    align-self: flex-end;
}

.section-boutique .wp-block-column:last-child img {
    max-width: 100%;
    height: auto;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
    vertical-align: bottom !important;
    margin-bottom: -9px !important;
}

/* Colonne gauche — padding vertical */
.section-boutique .wp-block-column:first-child {
    padding-top: 1rem;
    padding-bottom: 2.5rem;
    align-self: center;
}

/* Surtitre sur fond bleu — variante white */
.surtitre-white {
    background: rgba(255, 255, 255, 0.15) !important;
    border: 1px solid rgba(255, 255, 255, 0.5) !important;
    color: #fff !important;
    border-radius: 6px !important;
    text-transform: none !important;
}

/* Fix image coupée — laisse déborder à droite */
.section-boutique .wp-block-columns {
    overflow: visible !important;
}

/* ── Responsive ── */
@media (max-width: 781px) {
    .section-boutique {
        background-image: none !important;
        padding: 2.5rem 1.5rem 0;
    }

    /* Image visible et empilée sous le texte */
    .section-boutique .wp-block-column:last-child {
        display: flex;
        justify-content: center;
        margin-top: 1.5rem;
    }

    .section-boutique .wp-block-column:last-child img {
        max-width: 80%;
    }

    .section-boutique p:not(.surtitre) {
        max-width: 100%;
    }
}

/*
 * =============================================
 * SECTION DISTINCTIONS
 * =============================================
 */

.section-distinctions {
    background-color: var(--bg-beige);
    padding: 5rem 0;
    text-align: center;
}

/* Titre centré — gris, même taille que H1 hero */
.section-distinctions h2,
.section-distinctions .wp-block-heading {
    color: var(--color-text) !important;
    text-align: center;
    margin-bottom: 0.75rem;
}

/* Chapô centré */
.section-distinctions .wp-block-paragraph {
    text-align: center;
    color: var(--color-text);
    max-width: 640px;
    margin: 0 auto 3rem;
}

/* Surtitre — rétablit le bleu écrasé par wp-block-paragraph */
.section-distinctions .wp-block-paragraph.surtitre,
.section-distinctions .surtitre {
    color: var(--color-brand) !important;
    margin-bottom: 1rem;
}

/* Grille 3 cards */
.distinctions-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    margin: 0 auto;
    max-width: 1100px;
}

/* Card distinction */
.card-distinction {
    background: #fff;
    border-radius: 16px;
    border: 1px solid #e7e7e7;
    padding: 2rem 1.5rem 1.5rem;
    display: flex;
    flex-direction: column;
    text-align: center;
}

/* Zone logo en haut */
.card-distinction-logo {
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.25rem;
}

.card-distinction-logo img {
    height: 130px;
    width: auto;
    max-width: 100%;
    object-fit: contain;
}

/* Badge prix — fond coloré, coins arrondis, pas de contour */
.card-distinction-badge {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 0.3rem 0.75rem;
    border-radius: 6px;
    border: none;
    margin: 0 auto 1rem;
}

/* Couleurs variantes — fond pastel, texte foncé assorti */
.badge-teal { background: #D4F0EC; color: #1A6B62; }
.badge-gold { background: #FFF0C2; color: #7A5500; } /* #A07000 ratio 3.84 → #7A5500 ratio 4.6 ✅ RGAA */
.badge-pink { background: #FFE0E6; color: #B83050; }

/* Titre de la distinction — gris */
.card-distinction-title {
    font-size: 1rem !important;
    font-weight: 700 !important;
    color: var(--color-text) !important;
    font-family: var(--font-titles) !important;
    text-align: center;
    margin: 0 0 0.75rem !important;
    line-height: 1.3 !important;
}

/* Description */
.card-distinction-desc {
    font-size: 0.875rem;
    color: var(--color-neutral);
    line-height: 1.5;
    text-align: center;
    margin: 0 0 auto !important;
    padding-bottom: 1rem;
}

/* Décernée par — en bas de card, séparé */
.card-distinction-footer {
    font-size: 0.8125rem;
    color: var(--color-neutral);
    border-top: 1px solid var(--color-border);
    padding-top: 0.75rem;
    margin-top: 1rem;
    text-align: center;
}

@media (max-width: 767px) {
    .distinctions-grid {
        grid-template-columns: 1fr !important;
        max-width: 420px;
    }
}

/*
 * =============================================
 * SECTION TOUCANIA
 * =============================================
 */

.section-toucania {
    background-color: var(--color-brand);
    padding: 4rem 0;
    color: #fff;
}

/* Étiquette noire — spécifique Toucania */
.surtitre-anthracite {
    display: inline-block;
    font-size: 0.8125rem;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #fff !important;
    background: #000000 !important;
    border: none;
    border-radius: 6px;
    padding: 0.4rem 1rem;
}

/* Logo toucan au-dessus des colonnes — masqué, déplacé dans la barre */
.section-toucania > .wp-block-image {
    display: none;
}

/* Colonnes — alignement vertical centré */
.section-toucania .wp-block-columns {
    align-items: center;
    gap: 4rem;
}

/* Colonne image mockup — fond blanc, coins arrondis, pas de padding bas
   (la barre noire déborde jusqu'en bas) */
.section-toucania .wp-block-column:first-child {
    background: #ffffff;
    border-radius: 20px;
    padding: 1.5rem 1.5rem 0;
    overflow: hidden;
}

/* Image mockup — contenue dans la colonne */
.section-toucania .wp-block-column:first-child > .wp-block-image img,
.section-toucania .wp-block-column:first-child > figure img {
    border-radius: 12px;
    width: 100%;
    max-width: 420px;
    height: auto;
    display: block;
    margin: 0 auto;
}

/*
 * Barre noire Toucania en bas de la card blanche.
 * Nécessite : bloc Image (toucan) déplacé dans la col gauche
 * avec classe CSS supplémentaire "toucania-bar".
 * La marge négative annule le padding de la colonne et colle aux bords.
 */
.toucania-bar {
    background: #000;
    margin: 1rem -1.5rem 0;
    padding: 0.75rem 1.25rem;
    display: flex;
    align-items: center;
}

.toucania-bar img {
    max-height: 52px !important;
    width: auto !important;
    border-radius: 0 !important;
    margin: 0 !important;
}

/* Titre blanc */
.section-toucania h2,
.section-toucania .wp-block-heading {
    color: #fff !important;
}

/* Texte blanc */
.section-toucania p:not(.surtitre-anthracite) {
    color: rgba(255, 255, 255, 0.85) !important;
    line-height: 1.7;
}

/* Bouton Toucania → .btn-3e--toucania — voir système unifié */

/* Responsive */
@media (max-width: 767px) {
    .section-toucania .wp-block-columns { gap: 2rem; }
}

/*
 * =============================================
 * SECTION APPROCHE
 * =============================================
 */

.section-approche {
    background-color: #FAF6F1;
    padding: 5rem 0;
}

/* Colonnes — alignement vertical centré */
.section-approche .wp-block-columns {
    align-items: center;
    gap: 4rem;
}

/* Titre */
.section-approche h2,
.section-approche .wp-block-heading {
    color: #404040 !important;
}

/* Texte */
.section-approche p:not(.surtitre) {
    color: #404040;
    line-height: 1.7;
    font-size: 1rem;
}

/* Bouton — plein bleu */
/* Bouton approche → .btn-3e (bleu) — voir système unifié */

/* Image blob — forme organique fournie par la team design */
.section-approche .wp-block-column:last-child img {
    width: 100%;
    max-width: 480px;
    height: auto;
    display: block;
    margin: 0 auto;
}

/* Responsive */
@media (max-width: 767px) {
    .section-approche .wp-block-columns {
        gap: 2rem;
    }

    .section-approche .wp-block-column:last-child img {
        max-width: 280px;
        margin: 0 auto;
    }
}

/*
 * =============================================
 * SECTION CLIENTS & PARTENAIRES
 * =============================================
 */

.section-clients {
    background-color: #FAF6F1;
    padding: 5rem 0;
    text-align: center;
}

/* Titre */
.section-clients h2,
.section-clients .wp-block-heading {
    color: #404040 !important;
    text-align: center;
}

/* Chapô */
.section-clients p:not(.surtitre) {
    color: #404040;
    line-height: 1.7;
    max-width: 680px;
    margin-left: auto;
    margin-right: auto;
}

/* Grille logos — 4 colonnes */
.clients-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.25rem;
    margin: 2.5rem 0;
}

/* Card logo */
.client-card {
    background: #fff;
    border: 1.5px solid #E5E7EB;
    border-radius: 12px;
    padding: 1.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100px;
}

.client-card img {
    max-height: 60px;
    width: auto;
    max-width: 100%;
    object-fit: contain;
}

/* ── Page Clients — hero ── */
.clients-hero {
    background-color: var(--bg-blue) !important;
    text-align: center;
    padding: 2rem 0 3rem;
}

.clients-hero h1,
.clients-hero .wp-block-heading {
    color: var(--color-brand) !important;
    text-align: center !important;
    margin-bottom: 1.5rem !important;
}

.clients-hero img,
.clients-hero .wp-block-image img {
    border-radius: 16px !important;
    height: auto !important;
    display: block;
}

/* Bouton — plein bleu centré */
.section-clients .wp-block-button {
    text-align: center;
}
/* Bouton clients → .btn-3e (bleu) — voir système unifié */

/* Responsive */
@media (max-width: 900px) {
    .clients-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .clients-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.75rem;
    }

    .client-card {
        padding: 0.875rem;
    }
}

/*
 * =============================================
 * SECTION ACTUALITÉS (home)
 * =============================================
 */

.section-actualites {
    background-color: #F0F1F6;
    padding: 5rem 0;
    text-align: center;
}

/* Titre — gris comme les autres sections */
.section-actualites h2,
.section-actualites .wp-block-heading,
body .section-actualites h2,
body .section-actualites .wp-block-heading {
    color: #404040 !important;
    text-align: center;
}

/* Surtitre — centré même dans un container flex Gutenberg */
.section-actualites .surtitre,
.section-actualites p.surtitre,
.section-actualites .wp-block-paragraph.surtitre {
    display: table !important; /* shrink-to-content + centrage margin:auto */
    margin: 0 auto 0.5rem !important;
}

/* Chapô */
.section-actualites > p:not(.surtitre),
.section-actualites .wp-block-paragraph:not(.surtitre) {
    color: #404040;
    max-width: 680px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.7;
}

/* Grille des 2 cards — section home */
.actu-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    margin: 2.5rem 0;
    text-align: left;
}

/* ── CARD ARTICLE (partagée home + page /actualites/) ── */
.actu-card {
    background: #fff;
    border-radius: 16px;
    display: flex;
    flex-direction: row;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(47, 53, 136, 0.06);
    border: 1px solid #e7e7e7;
    position: relative;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.actu-card:hover {
    box-shadow: 0 6px 24px rgba(47,53,136,0.13);
    transform: translateY(-2px);
}

/* Corps gauche */
.actu-card-body {
    flex: 1;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    min-width: 0; /* évite overflow texte */
}

/* Conteneur badges catégories dans les cards */
.actu-card-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
}

/* Badge catégorie */
.actu-card-badge {
    display: inline-block;
    background: #E0E2FF !important;
    color: var(--color-brand) !important;
    font-size: 0.75rem;
    font-weight: 500;
    padding: 0.25rem 0.75rem;
    border-radius: 999px;
    align-self: flex-start;
    line-height: 1.5;
}

/* Titre — taille fixe de card, !important pour battre le global h2 */
.actu-card-title {
    font-size: 1.05rem !important;
    font-weight: 700 !important;
    color: #404040 !important;
    line-height: 1.35;
    margin: 0;
}

.actu-card-link {
    color: inherit;
    text-decoration: none !important;
}

.actu-card-link:hover,
.actu-card-link:focus {
    color: var(--color-brand) !important;
    text-decoration: underline;
}

/* Extrait */
.actu-card-excerpt {
    font-size: 0.875rem;
    color: #666;
    line-height: 1.6;
    margin: 0;
    flex: 1;
    /* Limite à 3 lignes */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Meta : date + flèche */
.actu-card-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 0.75rem;
    border-top: 1px solid #F0F1F6;
    margin-top: auto;
}

.actu-card-date {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.8rem;
    color: #666; /* #888 ratio 3.54 → #666 ratio 5.74 ✅ RGAA */
}

.actu-card-arrow {
    color: var(--color-brand) !important;
    font-size: 1.25rem;
    font-weight: 700;
    transition: transform 0.2s ease;
}

.actu-card:hover .actu-card-arrow {
    transform: translateX(4px);
}

/* Image droite */
.actu-card-img-wrapper {
    width: 36%;
    flex-shrink: 0;
    padding: 0.75rem 0.75rem 0.75rem 0; /* padding droite + haut + bas, pas à gauche */
}

.actu-card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 10px;
}

/* ── PAGE /ACTUALITES/ (home.php) ── */
.page-actus-header {
    background: #FAF6F1;
    padding: 4rem 0 3rem;
    position: relative;
    overflow: hidden;
}

/* Image de fond positionnée en cover */
.page-actus-header-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    opacity: 0.25; /* voile léger pour garder le texte lisible */
    z-index: 0;
}

.page-actus-header .container {
    position: relative;
    z-index: 1;
}

/* Titre hero page Actualités — Fredoka comme les autres H1 de pages */
.page-actus-title {
    font-size: clamp(2.5rem, 5vw, 3.5rem) !important;
    font-family: 'Fredoka', var(--font-titles) !important;
    font-weight: 400 !important;
    color: var(--color-text) !important;
    margin-bottom: 1rem;
}

.page-actus-subtitle {
    font-size: 1.1rem;
    color: #404040;
    max-width: 640px;
    line-height: 1.7;
}

.page-actus-grid {
    background: var(--bg-beige);
    padding: 3rem 0 5rem;
}

/* Liste des cards : reset ul + grille 2 colonnes */
ul.actu-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2.5rem;
    /* align-items: stretch assure la même hauteur sur chaque ligne */
    align-items: stretch;
}

/* Item liste = conteneur pleine hauteur */
.actu-card-item {
    min-width: 0;
    display: flex; /* permet à la card enfant de prendre toute la hauteur */
}

/* Card pleine hauteur de son item */
.actu-card {
    flex: 1; /* hérite de la hauteur du flex parent .actu-card-item */
}

/* Bordure → intégrée dans .actu-card base */

/* Pagination — Bootstrap classes générées par Pagination::articles_pagination() */
/* Pagination — Bootstrap classes générées par Pagination::articles_pagination() */
.actu-pagination {
    margin-top: 2rem;
}

.actu-pagination .pagination {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    list-style: none;
    padding: 0;
    margin: 0;
    flex-wrap: wrap;
    justify-content: center;
}

body .actu-pagination .page-item .page-link,
body .actu-pagination .page-item span {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 2.25rem !important;
    height: 2.25rem !important;
    padding: 0 0.75rem !important;
    border-radius: 999px !important;
    font-size: 0.9rem !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    color: var(--color-brand) !important;
    background: #E0E2FF !important;
    border: none !important;
    box-shadow: none !important;
    transition: background 0.2s ease, color 0.2s ease;
}

body .actu-pagination .page-item .page-link:hover,
body .actu-pagination .page-item .page-link:focus {
    background: var(--color-brand) !important;
    color: #fff !important;
}

body .actu-pagination .page-item.active .page-link,
body .actu-pagination .page-item .page-link.current,
body .actu-pagination .page-item span[aria-current="page"] {
    background: var(--color-brand) !important;
    color: #fff !important;
    pointer-events: none;
}

.section-actualites .wp-block-button {
    text-align: center;
}
/* Bouton actualités → .btn-3e--outline — voir système unifié */

/* ── Responsive ── */
@media (max-width: 900px) {
    ul.actu-list,
    .actu-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 767px) {
    .actu-card {
        flex-direction: column;
    }

    .actu-card-img-wrapper {
        width: 100%;
        height: 200px;
    }

    .page-actus-header {
        padding: 2.5rem 0 2rem;
    }
}

/*
 * =============================================
 * ARTICLE DETAIL — single.php
 * =============================================
 */

/* En-tête */
.single-article-header {
    background: #ffffff;
    padding: 2.5rem 0 2rem;
}

/* Lien retour — block pour que les badges soient en dessous */
.single-article-back {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.875rem;
    color: var(--color-brand);
    text-decoration: none;
    font-weight: 500;
    margin-bottom: 1.25rem;
    transition: gap 0.2s ease;
    width: fit-content;
}

.single-article-back:hover,
.single-article-back:focus {
    gap: 0.65rem;
    text-decoration: underline;
}

/* Conteneur badges catégories (peut en avoir plusieurs) */
.single-article-cats {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 1.25rem;
    margin-bottom: 0.75rem;
}

/* Titre H2 — taille héro de page article */
.single-article-title {
    font-size: clamp(1.75rem, 3.5vw, 2.75rem);
    color: #404040;
    margin-bottom: 1rem;
}

/* Méta date */
.single-article-meta {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.875rem;
    color: #666; /* #888 ratio 3.54 → #666 ratio 5.74 ✅ RGAA */
    margin: 0;
}

.single-article-meta time {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

/* Image featured — largeur contenu (col-lg-8), coins arrondis */
.single-article-thumb {
    width: 100%;
    margin: 1.5rem 0 0;
    border-radius: 16px;
    overflow: hidden;
}

.single-article-thumb-img {
    width: 100%;
    max-height: 460px;
    object-fit: cover;
    display: block;
    border-radius: 16px;
}

/* Contenu Gutenberg */
.single-article-content {
    padding: 3rem 0 2rem;
}

/* Footer article */
.single-article-footer {
    padding-bottom: 3rem;
}

.single-article-sep {
    border-color: #E8E9F0;
    margin: 1.5rem 0;
}

.single-article-cta {
    margin-top: 2rem;
    text-align: center;
}
/* single-article-cta-btn → .btn-3e--outline — voir système unifié */

/* Section articles similaires */
.single-article-related {
    background: #F0F1F6;
    padding: 3rem 0 4rem;
}

.single-article-related-title {
    font-family: var(--font-titles) !important;
    font-size: 1.5rem;
    font-weight: 700;
    color: #404040;
    margin-bottom: 2rem;
}

/* Grille 2 colonnes pour les articles similaires */
.single-article-related-grid {
    grid-template-columns: 1fr 1fr !important;
}

@media (max-width: 600px) {
    .single-article-related-grid {
        grid-template-columns: 1fr !important;
    }
    .single-article-thumb {
        max-height: 240px;
    }
}

/*
 * =============================================
 * SECTION CTA FINAL
 * =============================================
 */


.section-cta-final {
    background: linear-gradient(135deg,
        rgba(240, 200, 215, 0.45) 0%,
        rgba(255, 255, 255, 0.95) 45%,
        rgba(255, 240, 200, 0.45) 100%
    );
    padding: 6rem 2rem;
    text-align: center;
    margin-bottom: 0 !important;
}

/* Supprime les paragraphes vides que Gutenberg insère */
.section-cta-final p:empty {
    display: none;
}

/* Titre */
.section-cta-final h2,
.section-cta-final .wp-block-heading {
    color: #404040 !important;
    max-width: 900px;
    margin: 0 auto 1.5rem !important;
}

/* Texte */
.section-cta-final p {
    color: #404040;
    font-size: 1.05rem;
    line-height: 1.7;
    max-width: 800px;
    margin: 0 auto 2.5rem !important;
}

/* Groupe boutons — côte à côte centrés */
.section-cta-final .wp-block-buttons {
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
}

/* Boutons CTA final → outline (1er) + bleu (2e) — voir système unifié */

/* Responsive */
@media (max-width: 600px) {
    .section-cta-final {
        padding: 4rem 1.5rem;
    }

    .section-cta-final .wp-block-buttons {
        flex-direction: column;
        align-items: center;
    }
}

/* Supprime le gap blanc entre la dernière section et le footer */
#main-content-ako {
    padding-bottom: 0 !important;
}

/*
 * =============================================
 * SECTION FORMATIONS (homepage)
 * =============================================
 */

.section-formations {
    background-color: #FAF6F1;
    padding: 5rem 0;
}

/* Paragraphe intro — style hero-subtitle, aligné à gauche */
.section-formations .formations-intro,
body .section-formations .wp-block-paragraph.formations-intro {
    font-size: 1.125rem !important;
    color: var(--color-text) !important;
    line-height: 1.6 !important;
    font-weight: 400 !important;
    font-family: var(--font-body) !important;
    text-align: left !important;
    max-width: 680px !important;
}

/* Titre H2 — même style que les autres sections */
.section-formations h2,
.section-formations .wp-block-heading {
    color: #404040 !important;
}

/* Sous-titre style hero-subtitle */
.section-formations .formations-intro,
body .section-formations .formations-intro,
.section-formations h3.formations-subtitle,
body .section-formations h3.formations-subtitle {
    color: var(--color-text) !important;
}

/* Sous-titre "Nos dernières formations" */
.section-formations h3.formations-subtitle {
    color: #404040;
    margin-bottom: 1.5rem;
}

/* ── Grille 3 cards ── */
.formations-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    margin: 2rem 0;
}

/* ── Card ── */
.formation-card {
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid #e7e7e7;
    box-shadow: 0 2px 12px rgba(47, 53, 136, 0.06);
    display: flex;
    flex-direction: column;
}

/* Image */
.formation-card-img-wrapper {
    position: relative;
    height: 180px;
    overflow: hidden;
    flex-shrink: 0;
    padding: 0.75rem 0.75rem 0; /* haut + côtés, pas en bas (badge positionné en abs) */
}

.formation-card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 10px;
}

/* Badge (E-Learning, Outil…) */
.formation-card-badge {
    position: absolute;
    bottom: 0.75rem;
    right: 0.75rem;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.25rem 0.75rem;
    border-radius: 999px;
}

/* Corps */
.formation-card-body {
    padding: 1.25rem 1.25rem 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    text-align: left; /* reset si le bloc Gutenberg parent est centré */
}

/* Wrapper tags catégories — inline avec retour à la ligne */
.formation-card-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
}

/* Tag catégorie */
.formation-card-tag {
    display: inline-block;
    background: #F0F1F6;
    color: var(--color-brand) !important;
    font-size: 0.75rem;
    font-weight: 500;
    padding: 0.2rem 0.75rem;
    border-radius: 999px;
}

/* Titre — taille fixe de card, !important pour battre le global h2 */
.formation-card-title {
    font-size: 1rem !important;
    font-weight: 700 !important;
    color: #404040 !important;
    line-height: 1.35;
    margin: 0;
}

.formation-card-title a {
    color: inherit;
    text-decoration: none !important;
}

.formation-card-title a:hover,
.formation-card-title a:focus {
    color: var(--color-brand);
    text-decoration: underline;
}

/* Extrait */
.formation-card-excerpt {
    font-size: 0.875rem;
    color: #666;
    line-height: 1.6;
    margin: 0;
}

/* Compétences */
.formation-card-competences {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.formation-card-competences li {
    font-size: 0.8125rem;
    color: #555;
}

/* ── Footer card ── */
.formation-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.875rem 1.25rem;
    margin-top: auto;
    border-top: 1px solid #F0F1F6;
    gap: 0.5rem;
}

.formation-card-meta {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.5rem;
    flex: 1;
    min-width: 0;
    flex-wrap: wrap;
}

.formation-card-duree {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.8rem;
    color: #666;
}

/* #888 ratio 3.54 → #666 ratio 5.74 ✅ RGAA */
.formation-card-public {
    font-size: 0.75rem;
    color: #666;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* formation-card-btn → voir système unifié boutons */

.section-formations .wp-block-button {
    text-align: center;
}
/* Bouton formations → .btn-3e (bleu) — voir système unifié */

/* ── Responsive ── */
@media (max-width: 900px) {
    .formations-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .formations-grid {
        grid-template-columns: 1fr;
    }
}

/*
 * =============================================
 * PAGE /FORMATIONS/ — page-formations.php
 * =============================================
 */

/* Petit ajustement du header : légèrement plus de padding bas
   pour ne pas coller la grille */
.page-formations-header {
    padding-bottom: 4rem !important;
}

/* Zone grille — fond beige, padding généreux */
.page-formations-grid-section {
    background: #FAF6F1;
    padding: 3rem 0 5rem;
}

/* Grille full-page : 3 colonnes par défaut (même que homepage)
   Une formation seule reste en 1/3 de largeur, pas en plein écran */
.formations-grid--page {
    grid-template-columns: repeat(3, 1fr);
}

/* Placeholder si pas d'image miniature */
.formation-card-img-placeholder {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #E0E2FF 0%, #F0F1F6 100%);
}

/* Message si aucune formation */
.page-formations-empty {
    text-align: center;
    color: #666; /* ratio 5.74 ✅ RGAA */
    padding: 3rem 0;
    font-size: 1.05rem;
}

/* ── Responsive ── */
@media (max-width: 900px) {
    .formations-grid--page {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .formations-grid--page {
        grid-template-columns: 1fr;
    }
    .page-formations-header {
        padding: 2.5rem 0 3rem !important;
    }
}

/*
 * =============================================
 * PAGE DÉTAIL FORMATION (single-formation.php)
 * =============================================
 */

/* ── En-tête ── */
.single-formation-header {
    background: #ffffff;
    padding: 4rem 0 3rem;
    text-align: center;
}

/* Surtitre pill mauve */
.surtitre-formation {
    display: inline-block !important;
    background: #E0E2FF !important;
    color: var(--color-brand) !important;
    font-size: 0.8125rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    padding: 0.35rem 1.25rem !important;
    border-radius: 999px !important;
    margin-bottom: 1.25rem !important;
    border: none !important;
}


/* ── En-tête de page générique — réutilisable sur Services, Formations, etc. ──
   Usage Gutenberg : classe CSS sur le groupe = page-header
   Titre H1/H2    : page-header-title has-accent-dot
   Sous-titre     : page-header-subtitle
   Surtitre pill  : surtitre-pill (remplace surtitre-formation)
   ─────────────────────────────────────────────────────────────────────────── */
.page-header {
    background: #ffffff;
    padding: 4rem 0 3rem;
    text-align: center;
}

/* ── Hero pages Services — fond + plein écran ── */
body .page-header.service-hero {
    background: #F9FAFB !important;
    text-align: left !important;
    height: calc(100vh - 80px) !important;
    height: calc(100dvh - 80px) !important;
    display: flex !important;
    align-items: center !important;
    padding-top: 4rem;
    padding-bottom: 4rem;
    overflow: hidden; /* sécurité si contenu trop long */
}

/* Sur mobile, hauteur auto — 100vh peu fiable avec les barres navigateur */
@media (max-width: 991px) {
    body .page-header.service-hero {
        height: auto !important;
        min-height: unset !important;
        padding-top: 3rem;
        padding-bottom: 3rem;
    }
}

.surtitre-pill {
    display: inline-block !important;
    background: #E0E2FF !important;
    color: var(--color-brand) !important;
    font-size: 0.8125rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    padding: 0.35rem 1.25rem !important;
    border-radius: 999px !important;
    margin-bottom: 1.25rem !important;
    border: none !important;
}

.page-header-title {
    font-size: clamp(2rem, 4vw, 3rem) !important;
    color: var(--color-brand) !important;
    line-height: 1.15;
    margin-bottom: 1rem;
}

.page-header-subtitle {
    font-size: 1.05rem;
    color: #666;
    max-width: 600px;
    margin: 0 auto;
    line-height: 1.6;
}

/* ── Bloc 4 colonnes — flottant à cheval ── */
/* Le header blanc se termine, la grille descend sur le fond beige */
.single-formation-infoblock {
    background: #ffffff !important;
    padding: 0 0 3rem;
}

.single-formation-infogrid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    background: #fff !important;
    border: 1px solid #E5E7EB;
    border-radius: 16px;
    padding: 2rem;
    box-shadow: 0 4px 24px rgba(0,0,0,0.07);
    position: relative;
    z-index: 2;
    margin-bottom: -8.5rem;
}

.single-formation-infocard {
    text-align: center;
    padding: 1.25rem 0.75rem;
    background: #F5F6FF;
    border-radius: 8px;
    margin: 0.25rem;
}

.single-formation-infocard .bi {
    font-size: 1.75rem;
    color: #404040;
    display: block;
    margin-bottom: 0.75rem;
}

.single-formation-infolabel {
    font-size: 0.875rem;
    font-weight: 600;
    color: #404040;
    margin-bottom: 0.375rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.single-formation-infovalue {
    font-size: 0.9375rem;
    color: #555;
    line-height: 1.4;
    margin: 0;
}

/* ── Contenu Gutenberg ── */
.single-formation-content {
    background: #FAF6F1 !important;
    padding: 5rem 0 0;
}

/* Cache les paragraphes vides Gutenberg */
.single-formation-content p:empty,
.single-formation-content .wp-block-paragraph:empty {
    display: none;
}

/* ── CTA final ── */
.single-formation-cta {
    background: linear-gradient(135deg,
        rgba(240, 200, 215, 0.45) 0%,
        rgba(255, 255, 255, 0.95) 45%,
        rgba(255, 240, 200, 0.45) 100%
    );
    padding: 5rem 2rem;
    text-align: center;
}

.single-formation-cta-title {
    font-size: clamp(1.75rem, 3vw, 2.5rem) !important;
    color: #404040 !important;
    line-height: 1.3;
    margin-bottom: 1rem;
}

.single-formation-cta-title em {
    font-style: normal;
    color: var(--color-brand) !important;
}

.single-formation-cta-desc {
    color: #666;
    line-height: 1.7;
    margin-bottom: 2rem;
}

/* single-formation-cta-btn → .btn-3e (bleu) — voir système unifié */
/* Surcharge taille */
.single-formation-cta-btn {
    padding: 0.875rem 2.5rem;
    font-weight: 600 !important;
}

/* ── Responsive ── */
@media (max-width: 767px) {
    .single-formation-infogrid {
        grid-template-columns: repeat(2, 1fr);
        margin-bottom: 0; /* pas de margin négatif sur mobile */
        padding: 1rem;
    }
    .single-formation-infoblock {
        padding: 0 0 1.5rem;
    }
}

@media (max-width: 480px) {
    .single-formation-infogrid {
        grid-template-columns: 1fr;
    }
}


/*
 * ── Paragraphe avec check (classe: with-check) ──────────────────────────
 * Usage Gutenberg : ajouter la classe "with-check" au bloc Paragraphe
 */
.with-check {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    line-height: 1.6;
}

.with-check::before {
    content: '\F26B';
    font-family: 'bootstrap-icons';
    font-size: 1.25em;
    color: var(--color-text);
    flex-shrink: 0;
    line-height: 1;
}

/*
 * =============================================
 * ACCORDÉONS PROGRAMME (Bootstrap 5 — AKOLAD)
 * Style maquette : fond blanc, border-bottom, + / ×
 * =============================================
 */

/* Conteneur global */
.single-formation-content .accordion {
    margin-bottom: 0;
}

/* Item — pas de bordure Bootstrap, juste border-bottom */
.single-formation-content .accordion-item {
    background: transparent;
    border: none !important;
    border-bottom: 1px solid #D1D5DB !important;
    border-radius: 0 !important;
}

/* Bouton header */
.single-formation-content .accordion-button {
    background: transparent !important;
    color: #404040 !important;
    font-size: 1rem !important;
    font-weight: 400 !important;
    padding: 1.25rem 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
}

.single-formation-content .accordion-button:focus {
    box-shadow: none !important;
    outline: 2px solid var(--color-brand) !important;
    outline-offset: 4px !important;
    border-radius: 4px !important;
}

/* Masque la flèche Bootstrap, remplace par + / × */
.single-formation-content .accordion-button::after {
    content: '+' !important;
    background-image: none !important;
    font-size: 1.375rem !important;
    font-weight: 300 !important;
    color: #404040 !important;
    width: auto !important;
    height: auto !important;
    transform: none !important;
    line-height: 1 !important;
}

.single-formation-content .accordion-button:not(.collapsed)::after {
    content: '×' !important;
    transform: none !important;
}

/* Contenu accordéon */
.single-formation-content .accordion-body {
    padding: 0.75rem 0 1.25rem !important;
    color: #555;
    line-height: 1.7;
    font-size: 0.9375rem;
}

/* Supprime le fond coloré quand ouvert */
.single-formation-content .accordion-button:not(.collapsed) {
    background: transparent !important;
    color: var(--color-brand) !important;
    box-shadow: none !important;
}

.single-formation-content .accordion-button:not(.collapsed)::after {
    color: var(--color-brand) !important;
}

/* Section Programme — fond blanc pleine largeur */
.section-programme {
    background: #ffffff !important;
    padding: 3rem 0;
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
    padding-left: calc(50vw - 50%);
    padding-right: calc(50vw - 50%);
}

/* Surtitre formations — même fix que Actualités/Clients */
.section-formations.is-layout-constrained > p.surtitre,
.section-formations.wp-block-group > p.surtitre {
    display: table !important;
    margin-left: 0 !important;
    margin-right: auto !important;
    align-self: flex-start !important;
}

/*
 * =============================================
 * PAGE CONTACT
 * =============================================
 */

.page-contact-wrapper {
    background: #ffffff;
    padding: 3rem 0 5rem;
}

/* ── Carte infos de contact ── */
.contact-info-card {
    background: #fff;
    border: 1px solid #E8E9F0;
    border-radius: 16px;
    padding: 2rem;
    margin-bottom: 1.25rem;
}

.contact-info-title {
    font-size: 1.1rem !important;
    font-weight: 700 !important;
    color: #404040 !important;
    margin-bottom: 1.5rem;
}

.contact-info-list {
    list-style: none !important;
    padding: 0 !important;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.contact-info-item {
    display: flex;
    align-items: flex-start;
    gap: 0.875rem;
}

.contact-info-icon {
    flex-shrink: 0;
    width: 2rem;
    height: 2rem;
    background: #E0E2FF;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-brand);
    margin-top: 0.1rem;
}

.contact-info-label {
    font-size: 0.875rem;
    font-weight: 600;
    color: #404040;
}

.contact-info-item a {
    color: var(--color-brand);
    font-size: 0.9375rem;
}

/* ── Carte réponse rapide ── */
.contact-reply-card {
    background: #F0F1F6;
    border-radius: 16px;
    padding: 1.5rem 2rem;
}

.contact-reply-title {
    font-size: 1rem !important;
    font-weight: 700 !important;
    color: #404040 !important;
    margin-bottom: 0.75rem;
}

.contact-reply-text {
    font-size: 0.9rem;
    color: #666;
    line-height: 1.65;
    margin: 0;
}

/*
 * =============================================
 * WPFORMS — Style personnalisé
 * =============================================
 */

/* Titres des deux colonnes — hors cards, même style
   Spécificité (0,2,0) pour battre h2.wp-block-heading:is(h2) (0,1,1) */
.wp-block-heading.contact-form-title,
.contact-form-title,
.contact-info-title {
    font-family: var(--font-titles) !important;
    font-size: 1.1rem !important;
    font-weight: 700 !important;
    color: #404040 !important;
    line-height: 1.4 !important;
    margin-top: 0 !important;
    margin-bottom: 1.25rem !important;
    padding: 0 !important;
}

/* Conteneur global */
.wpforms-container {
    background: #fff;
    border: 1px solid #E8E9F0 !important;
    border-radius: 16px !important;
    padding: 2rem !important;
    box-shadow: 0 2px 12px rgba(0,0,0,0.05);
}

/* Gouttière entre colonnes sur la page contact */
/* Neutralise le margin-block-start Gutenberg sur les éléments
   qui suivent le titre dans chaque colonne */
.page-contact-wrapper .wpforms-container,
.page-contact-wrapper .contact-info-card {
    margin-top: 0 !important;
    margin-block-start: 0 !important;
}

/* Gouttière entre colonnes */
.page-contact-wrapper .wp-block-columns {
    gap: 3rem !important;
}

/* Titre du formulaire */
.wpforms-head-container .wpforms-title {
    font-size: 1.1rem !important;
    font-weight: 700 !important;
    color: #404040 !important;
    margin-bottom: 0.25rem;
}

/* Labels */
.wpforms-field-label {
    font-size: 0.875rem !important;
    font-weight: 600 !important;
    color: var(--color-brand) !important;
    margin-bottom: 0.375rem !important;
}

/* Asterisque obligatoire */
.wpforms-required-label {
    color: #E85D75 !important;
}

/* Inputs, selects, textarea */
.wpforms-field input:not([type=radio]):not([type=checkbox]),
.wpforms-field select,
.wpforms-field textarea {
    width: 100% !important;
    border: 1px solid #D0D0D0 !important;
    border-radius: 8px !important;
    padding: 0.625rem 0.875rem !important;
    font-size: 0.9375rem !important;
    font-family: var(--font-body) !important;
    color: #404040 !important;
    background: #fff !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
    box-shadow: none !important;
}

.wpforms-field input:focus,
.wpforms-field textarea:focus,
.wpforms-field select:focus {
    border-color: var(--color-brand) !important;
    box-shadow: 0 0 0 3px rgba(47, 53, 136, 0.12) !important;
    outline: none !important;
}

/* Textarea */
.wpforms-field textarea {
    min-height: 120px !important;
    resize: vertical !important;
}

/* Checkbox RGPD */
.wpforms-field-checkbox input[type=checkbox],
.wpforms-field-gdpr-checkbox input[type=checkbox] {
    width: 1rem !important;
    height: 1rem !important;
    accent-color: var(--color-brand);
    margin-right: 0.5rem;
}

/* Note champs obligatoires */
.wpforms-required-hint,
.wpforms-field-sublabel {
    font-size: 0.8rem !important;
    color: #666 !important; /* #888 ratio 3.54 → #666 ratio 5.74 ✅ RGAA */
}

/* Bouton submit */
.wpforms-submit-container .wpforms-submit,
button.wpforms-submit {
    background: var(--color-brand) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 999px !important;
    padding: 0.75rem 2rem !important;
    font-size: 0.9375rem !important;
    font-weight: 600 !important;
    font-family: var(--font-body) !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    transition: background 0.2s ease !important;
}

.wpforms-submit-container .wpforms-submit:hover,
button.wpforms-submit:hover {
    background: var(--color-brand-dark) !important;
}

/* Messages d'erreur — rouge accessible */
.wpforms-error,
.wpforms-field .wpforms-error {
    color: #C0392B !important;
    font-size: 0.8125rem !important;
    margin-top: 0.25rem !important;
}

/* Message de confirmation */
.wpforms-confirmation-container-full {
    background: #E8F5E9 !important;
    border: 1px solid #4CAF50 !important;
    border-radius: 12px !important;
    padding: 1.5rem !important;
    color: #2E7D32 !important;
    font-weight: 500 !important;
}

/* Espacement entre champs — réduit pour coller à la maquette */
.wpforms-field {
    margin-bottom: 0.75rem !important;
}


/* Mention champs obligatoires — visuellement dans la card */
.wpforms-required-hint {
    font-size: 0.8rem !important;
    color: #666 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding: 0.75rem 2rem 0 !important;
    background: #fff;
    border: 1px solid #E8E9F0;
    border-bottom: none;
    border-radius: 16px 16px 0 0;
    margin-block-start: 0 !important;
}

/* Quand la mention est présente, retire le border-radius haut de la card */
.wpforms-required-hint + .wpforms-container {
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
    border-top: none !important;
    padding-top: 0.75rem !important;
}
.wpforms-container a:focus,
.wpforms-container a:focus-visible {
    outline: var(--focus-outline) !important;
    outline-offset: var(--focus-outline-offset) !important;
    border-radius: var(--focus-radius) !important;
}

/* ── Layout WPForms — sous-champs Nom complet ──────────────────────── */

/* Masque le label principal "Nom" du champ combiné */
.wpforms-field-name > .wpforms-field-label {
    display: none !important;
}

/* Sous-labels Prénom / Nom */
.wpforms-field-name .wpforms-field-sublabel {
    font-size: 0.8rem !important;
    color: #666 !important;
    margin-top: 0.25rem !important;
    display: block !important;
}

.wpforms-field-name .wpforms-field-row-block {
    flex: 1 !important;
    min-width: 0 !important;
}

/* Masque le label principal "Nom" du champ combiné */
.wpforms-field-name > .wpforms-field-label {
    display: none !important;
}

/* Sous-labels Prénom / Nom */
.wpforms-field-name .wpforms-field-sublabel {
    font-size: 0.8rem !important;
    color: #666 !important;
    margin-top: 0.25rem !important;
    display: block !important;
}

/* Champ Layout WPForms (colonnes natives) */
.wpforms-field-layout .wpforms-layout-column {
    padding: 0 0.5rem !important;
}

.wpforms-field-layout .wpforms-layout-column:first-child {
    padding-left: 0 !important;
}

.wpforms-field-layout .wpforms-layout-column:last-child {
    padding-right: 0 !important;
}

/* Responsive */
@media (max-width: 600px) {
    .wpforms-field-name .wpforms-field-row {
        flex-wrap: wrap !important;
    }
    .wpforms-field-name .wpforms-field-row-block {
        width: 100% !important;
    }
}

/*

/*
 * =============================================
 * PAGE À PROPOS
 * =============================================
 */

/* ── Hero — fond bleu clair de la charte ── */
.section-apropos-hero {
    background-color: var(--bg-blue);  /* #F0F1F6 */
    padding: 5rem 0 4rem;
    overflow: hidden;
}

.section-apropos-hero h1 {
    margin-bottom: 1.5rem;
    /* couleur et typo héritées du système global h1 */
}

.apropos-hero-subtitle {
    font-size: 1.125rem;
    color: var(--color-text);
    max-width: 480px;
    line-height: 1.7;
    margin-bottom: 2rem;
}

/* Bouton — standard btn-primary-3e, pas de surcharge nécessaire */

/* ── Photos décalées — sans anneaux CSS (inclus dans les images) ── */
.apropos-photos {
    position: relative;
    height: 680px;
}

.apropos-photo {
    position: absolute;
    /* Pas d'overflow:hidden ici — le texte info doit déborder du cercle */
}

.apropos-photo-img {
    width: 280px;
    height: 280px;
    object-fit: cover;
    display: block;
    border-radius: 50%;
}

/* Texte sous la photo */
.apropos-photo-info {
    margin-top: 0.75rem;
    max-width: 280px;
}

.apropos-photo-name {
    font-weight: 700 !important;
    font-size: 0.85rem !important;
    color: var(--color-text) !important;
    margin: 0 0 0.2rem !important;
}

.apropos-photo-role {
    font-size: 0.78rem !important;
    color: var(--color-text) !important;
    line-height: 1.4 !important;
    margin: 0 0 0.2rem !important;
}

.apropos-photo-expertise {
    font-size: 0.75rem !important;
    color: var(--color-neutral) !important;
    line-height: 1.4 !important;
    margin: 0 !important;
}

/* Photo 1 — haut gauche */
.apropos-photo--1 {
    top: 0;
    left: 20px;
    z-index: 2;
}

/* Photo 2 — bas droite */
.apropos-photo--2 {
    bottom: 0;
    right: 20px;
    z-index: 1;
}

@media (max-width: 991px) {
    .apropos-photos        { height: 420px; margin-top: 2.5rem; }
    .apropos-photo-img     { width: 170px; height: 170px; }
    .apropos-photo-info    { max-width: 170px; }
    .apropos-photo--1      { top: 0; left: 10%; }
    .apropos-photo--2      { bottom: 0; right: 10%; }
}

@media (max-width: 575px) {
    .apropos-photos        { height: 340px; }
    .apropos-photo-img     { width: 130px; height: 130px; }
    .apropos-photo-info    { max-width: 130px; }
}

/* ── Stats — fond bleu clair continu, blocs blancs réduits et espacés ── */
.section-apropos-stats {
    background-color: var(--bg-blue);
    padding: 0 0 4rem;
}

.apropos-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
}

.apropos-stat-item {
    background: #fff;
    border: 1px solid #e7e7e7;
    border-radius: 12px;
    padding: 1.5rem 1rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.375rem;
    box-shadow: 0 2px 12px rgba(47, 53, 136, 0.06);
}

.apropos-stat-number {
    display: block;
    font-family: 'Fredoka', var(--font-titles);
    font-size: clamp(2rem, 4vw, 2.75rem);
    font-weight: 700;
    color: var(--color-brand);
    line-height: 1;
    margin: 0;
}

.apropos-stat-label {
    display: block;
    font-size: 0.875rem;
    font-weight: 400;
    color: var(--color-neutral);
    line-height: 1.4;
}

@media (max-width: 600px) {
    .apropos-stats-grid { grid-template-columns: repeat(2, 1fr); gap: 0.75rem; }
}

/* ── En-têtes de sections partagés ── */
.apropos-section-header {
    text-align: center;
    margin-bottom: 3rem;
}

.apropos-section-header h2 {
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
}

.apropos-section-subtitle {
    font-size: 1rem;
    color: var(--color-text);
    max-width: 640px;
    margin: 0.75rem auto 0;
    line-height: 1.7;
    text-align: center;
}

/* ── Mission — fond beige, disque bleu clair + icône bleue ── */
.section-apropos-mission {
    padding: 5rem 0;
}

.mission-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
    list-style: none !important;
    padding: 0 !important;
    margin: 0;
}

.mission-card {
    text-align: center;
}

/* Disque bleu clair, icône bleu brand */
.mission-icon {
    width: 52px;
    height: 52px;
    background: #E0E2FF;   /* bleu clair — même que actu-card-badge */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.25rem;
    color: var(--color-brand); /* icône bleue foncée */
    flex-shrink: 0;
}

.mission-title {
    font-size: 0.9375rem !important;
    font-weight: 700 !important;
    color: var(--color-text) !important;
    font-family: var(--font-titles) !important;
    margin-bottom: 0.5rem !important;
}

.mission-desc {
    font-size: 0.875rem;
    color: #5a5a5a; /* #767676 insuffisant sur #FAF6F1 (4.22) → #5a5a5a (ratio 5.3) ✅ RGAA */
    line-height: 1.6;
    margin: 0;
}

@media (max-width: 900px) { .mission-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .mission-grid { grid-template-columns: 1fr; } }

/* ── Parcours — Timeline fond bleu clair ── */
.section-apropos-parcours {
    background-color: var(--bg-blue);  /* #F0F1F6 — bleu clair de la charte */
    padding: 5rem 0;
}

/* Surtitre sur fond bleu clair → variante standard */
.section-apropos-parcours .apropos-section-header .surtitre {
    display: inline-block;
    margin-bottom: 0.75rem;
}

.parcours-timeline {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 auto;
    max-width: 700px;
}

.parcours-item {
    display: flex;
    gap: 1.5rem;
    align-items: flex-start;
    position: relative;
    padding-bottom: 1.5rem;
}

.parcours-item:last-child {
    padding-bottom: 0;
}

/* Ligne verticale */
.parcours-item::before {
    content: '';
    position: absolute;
    left: 27px;
    top: 56px;
    bottom: 0;
    width: 2px;
    background: #E0E2FF;
}

.parcours-item:last-child::before {
    display: none;
}

/* Dot — bleu brand, texte blanc (version initiale conservée) */
.parcours-year-dot {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--color-brand);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.8125rem;
    flex-shrink: 0;
    position: relative;
    z-index: 1;
    font-family: var(--font-titles);
}

/* Card blanche pour le contenu */
.parcours-content {
    flex: 1;
    background: #fff;
    border-radius: 12px;
    padding: 1.25rem 1.5rem;
    box-shadow: 0 2px 12px rgba(47, 53, 136, 0.06);
}

.parcours-content h3 {
    font-size: 1rem !important;
    font-weight: 700 !important;
    color: var(--color-text) !important;
    font-family: var(--font-titles) !important;
    margin-bottom: 0.375rem !important;
    line-height: 1.3 !important;
}

.parcours-content p {
    font-size: 0.9rem;
    color: var(--color-neutral);
    line-height: 1.6;
    margin: 0;
}

@media (max-width: 575px) {
    .parcours-item        { gap: 1rem; }
    .parcours-year-dot    { width: 48px; height: 48px; font-size: 0.75rem; }
    .parcours-item::before { left: 23px; top: 48px; }
    .parcours-content     { padding: 1rem 1.25rem; }
}

/* ── Équipe — texte haut, image bas ── */
.section-apropos-equipe {
    padding: 5rem 0;
}

.equipe-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    list-style: none !important;
    padding: 0 !important;
    margin: 0;
}

.equipe-card {
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid #e7e7e7;
    display: flex;
    flex-direction: column;
    /* pas d'interaction hover — cards non cliquables */
}

.equipe-card-body {
    padding: 1.5rem 1.25rem 1.25rem;
    flex: 1;
}

.equipe-card-title {
    font-size: 1rem !important;
    font-weight: 700 !important;
    color: var(--color-text) !important;
    font-family: var(--font-titles) !important;
    margin-bottom: 0.5rem !important;
    line-height: 1.3 !important;
}

.equipe-card-desc {
    font-size: 0.875rem;
    color: var(--color-neutral);
    line-height: 1.6;
    margin: 0;
}

.equipe-card-img-wrap {
    padding: 0 1.25rem 1.25rem; /* padding latéral + bas, aligné avec le texte */
    background: #fff;
    flex-shrink: 0;
}

.equipe-card-img {
    width: 100%;
    height: 180px;
    object-fit: cover;
    display: block;
    border-radius: 10px;
}

@media (max-width: 900px) { .equipe-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 575px) { .equipe-grid { grid-template-columns: 1fr; } }

/*
 * =============================================
 * PAGE SERVICES — [3ei_services]
 * =============================================
 */

.services-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    margin: 3rem 0;
}

/* Card service — reset text-align hérité du .page-header parent */
.service-card {
    background: #fff;
    border-radius: 16px;
    border: 1px solid #e7e7e7;
    box-shadow: 0 2px 12px rgba(47, 53, 136, 0.06);
    display: flex;
    flex-direction: row;
    overflow: hidden;
    min-height: 260px;
    text-align: left; /* reset text-align:center du .page-header parent */
}

/* Zone texte gauche */
.service-card-content {
    flex: 1;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.service-card-categorie {
    display: inline-block !important;
    width: fit-content !important;
    background: #E0E2FF !important;
    color: var(--color-brand) !important;
    font-size: 0.75rem !important;
    font-weight: 500 !important;
    padding: 0.2rem 0.75rem !important;
    border-radius: 999px !important;
    border: none !important;
    margin-bottom: 0.5rem !important;
    /* surcharge .surtitre qui a fond blanc */
}

.service-card-icone {
    width: 44px;
    height: 44px;
    background: #E0E2FF;
    border-radius: 50%;
    color: var(--color-brand);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.service-card-icone svg {
    width: 32px;
    height: 32px;
}

.service-card-title {
    font-size: 1.125rem !important;
    font-weight: 700 !important;
    color: var(--color-brand) !important;
    font-family: var(--font-titles) !important;
    line-height: 1.3 !important;
    margin: 0 !important;
}

.service-card-desc {
    font-size: 0.875rem;
    color: var(--color-text);
    line-height: 1.6;
    margin: 0;
}

.service-card-points {
    list-style: none !important;
    padding: 0 !important;
    margin: 0.25rem 0 0 !important;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    flex: 1; /* pousse le bouton en bas */
}

.service-card-points li {
    font-size: 0.8125rem;
    color: var(--color-text);
    line-height: 1.5;
    padding-left: 1rem;
    position: relative;
}

.service-card-points li::before {
    content: '•';
    position: absolute;
    left: 0;
    color: var(--color-brand);
}

.service-card-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 1rem;
    padding: 0.6rem 1.5rem;
    border-radius: 999px;
    border: 2px solid var(--color-brand);
    background: transparent;
    color: var(--color-brand);
    font-size: 0.875rem;
    font-weight: 500;
    text-decoration: none !important;
    align-self: flex-start; /* pas pleine largeur */
    transition: background-color 0.2s ease, color 0.2s ease;
}

.service-card-link:hover,
.service-card-link:focus {
    background: var(--color-brand);
    color: #fff;
}

/* Image droite */
.service-card-img-wrapper {
    width: 38%;
    flex-shrink: 0;
    padding: 0.75rem 0.75rem 0.75rem 0;
}

.service-card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 10px;
    display: block;
}

/* Responsive */
@media (max-width: 900px) {
    .services-grid {
        grid-template-columns: 1fr;
    }

    .service-card {
        flex-direction: column;
    }

    .service-card-img-wrapper {
        width: 100%;
        height: 200px;
        padding: 0 0.75rem 0.75rem;
    }
}

/* =============================================
 * RESPONSIVE MOBILE — Corrections Round 8
 * ============================================= */

@media (max-width: 767px) {
    /* Hero H1 — réduit le minimum pour éviter le débordement horizontal */
    .hero-title,
    .hero-section h1 {
        font-size: clamp(1.8rem, 5.5vw, 2.5rem) !important;
    }

    /* Titre section Expertise — réduit sur mobile */
    .expertise-wrapper h2,
    .expertise-wrapper .wp-block-heading {
        font-size: 1.4rem !important;
    }
}