/*
Theme Name: Corentin Thirion
Theme URI: www.corentin-thirion.be
Description: child theme edit by Corentin Thirion
Author: Corentin Thirion
Author URI: www.corentin-thirion.be
Version: 2.0
Text Domain: corentin-thirion-child
Template: twentytwentyfive
*/

/*
 * TABLE DES MATIÈRES
 *
 * 01. Variables CSS & thème clair
 * 02. Cursor personnalisé
 * 03. Header
 * 04. Navigation desktop
 * 05. Bouton dark/light
 * 06. Boutons & interactions
 * 07. Cartes & composants UI
 * 08. Grille de projets & filtres
 * 09. Vignettes projets (digital + photo)
 * 10. Galerie Masonry
 * 11. Lightbox
 * 12. Formulaire de contact (Forminator)
 * 13. Formulaire mot de passe
 * 14. Animations & reveal au scroll
 * 15. Utilitaires visuels
 * 16. Responsive (breakpoints décroissants)
 */


/* --- 01. VARIABLES CSS & THÈME CLAIR --- */

/* Design System — dark (défaut) */
:root,
[data-theme="dark"] {
    /* Surfaces */
    --bg:              #000000;
    --bg-section:      #0a0a0a;
    --bg-2:            #181818;
    --bg-3:            #262626;
    --border:          #262626;
    --border-2:        #1a1a1a;
    /* Texte */
    --text-1:          #ffffff;
    --text-2:          #a3a3a3;
    --text-3:          #504f4f;
    /* Accent */
    --accent:          #ffee00;
    --accent-hover:    #ffe500;
    --accent-dim:      rgba(255,238,0,.12);
    --accent-border:   rgba(255,238,0,.32);
    /* Ombres */
    --shadow-sm:       0 1px 4px  rgba(0,0,0,.6);
    --shadow-md:       0 4px 20px rgba(0,0,0,.8);
    --shadow-glow:     0 0  28px  rgba(255,238,0,.14);
    /* Nav */
    --nav-bg:          rgba(0,0,0,.92);
    /* Overlay photo — reste toujours sombre (ne s'inverse pas) */
    --overlay-dark:    rgba(0,0,0,.9);
    /* Gradients accent — s'adaptent au mode clair */
    --gradient-accent:        linear-gradient(135deg, rgba(255,238,0,.08) 0%, rgba(255,238,0,.02) 100%);
    --gradient-accent-strong: linear-gradient(135deg, rgba(255,238,0,.14) 0%, rgba(255,238,0,.04) 100%);
    /* Aliases backward-compat → nouveaux tokens */
    --bg-color:        var(--bg);
    --text-color:      var(--text-1);
    --border-color:    var(--border);
    --accent-color:    var(--accent);
    --text-color-gray: var(--text-2);
}

/* Design System — light */
[data-theme="light"] {
    /* Surfaces */
    --bg:              #f8f8f8;
    --bg-section:      #f2f2f2;
    --bg-2:            #ffffff;
    --bg-3:            #ebebeb;
    --border:          #e0e0e0;
    --border-2:        #ededed;
    /* Texte */
    --text-1:          #000000;
    --text-2:          #504f4f;
    --text-3:          #a3a3a3;
    /* Accent */
    --accent:          #c8bc00;
    --accent-hover:    #b5aa00;
    --accent-dim:      rgba(200,188,0,.10);
    --accent-border:   rgba(200,188,0,.32);
    /* Ombres */
    --shadow-sm:       0 1px 4px  rgba(0,0,0,.08);
    --shadow-md:       0 4px 20px rgba(0,0,0,.12);
    --shadow-glow:     0 0  28px  rgba(200,188,0,.12);
    /* Nav */
    --nav-bg:          rgba(248,248,248,.92);
    /* Overlay photo — reste toujours sombre */
    --overlay-dark:    rgba(0,0,0,.9);
    /* Gradients accent */
    --gradient-accent:        linear-gradient(135deg, rgba(200,188,0,.08) 0%, rgba(200,188,0,.02) 100%);
    --gradient-accent-strong: linear-gradient(135deg, rgba(200,188,0,.14) 0%, rgba(200,188,0,.04) 100%);
    /* Preset WP (FSE blocks) */
    --wp--preset--color--custom-noir:                   #f8f8f8 !important;
    --wp--preset--color--custom-blanc:                  #000000 !important;
    --wp--preset--color--custom-texte:                  #504f4f !important;
    --wp--preset--color--custom-gris-fonc:              #ebebeb !important;
    --wp--preset--color--custom-gris-accent:            #504f4f !important;
    --wp--preset--color--custom-jaune:                  #c8bc00 !important;
    --wp--preset--color--custom-color-2:                #f8f8f8 !important;
    --wp--preset--color--custom-gris-fonc-card:         #ffffff !important;
    --wp--preset--color--custom-fond-section-pas-noir:  #f2f2f2 !important;
    --wp--preset--color--custom-border-card:            #e0e0e0 !important;
}

[data-theme="light"] body {
    background-color: var(--bg)     !important;
    color:            var(--text-1) !important;
}

/* Override inline styles Gutenberg avec couleurs sombres hardcodées */
[data-theme="light"] [style*="background-color:#0a0a0a"],
[data-theme="light"] [style*="background-color: #0a0a0a"] {
    background-color: var(--bg-section) !important;
}
[data-theme="light"] [style*="background-color:#141414"],
[data-theme="light"] [style*="background-color: #141414"] {
    background-color: var(--bg-2) !important;
}

/* has-custom-noir-color utilisé comme couleur de texte : noir (#000) sur fond sombre = invisible.
   Override global : texte suit toujours le token --text-color (blanc en dark, noir en light).
   Exception boutons : texte toujours noir sur fond coloré (jaune). */
.has-custom-noir-color {
    color: var(--text-color) !important;
}
.wp-block-button__link.has-custom-noir-color,
.wp-element-button.has-custom-noir-color {
    color: #1a1a1a !important;
}

/* Cover blocks dark mode : texte toujours blanc (fond photo sombre) */
[data-theme="dark"] .wp-block-cover .has-custom-noir-color,
[data-theme="dark"] .wp-block-cover .has-custom-blanc-color,
[data-theme="dark"] .wp-block-cover h1,
[data-theme="dark"] .wp-block-cover .wp-block-heading,
[data-theme="dark"] .wp-block-cover p { color: #ffffff !important; }

/* Cover blocks light mode : texte noir (gradient transparent → blanc) */
[data-theme="light"] .wp-block-cover h1,
[data-theme="light"] .wp-block-cover .wp-block-heading,
[data-theme="light"] .wp-block-cover .has-custom-blanc-color,
[data-theme="light"] .wp-block-cover .has-custom-noir-color { color: var(--text-1) !important; }

/* Single projet — hero cover block : gradient transparent → blanc en light */
[data-theme="light"] .single-projet .wp-block-cover .wp-block-cover__background {
    background: linear-gradient(to bottom, rgba(248,248,248,0) 0%, rgba(248,248,248,.9) 100%) !important;
    opacity: 1 !important;
}

/* Single projet — pills et bouton back : contrastes light */
[data-theme="light"] .taxonomy-tag_projet.ct-pills a {
    border-color: var(--text-1) !important;
    color: var(--text-1) !important;
}
[data-theme="light"] .ct-btn-back {
    border-color: var(--text-1) !important;
    color: var(--text-2) !important;
}

/* Single projet — taxos affichées sans lien cliquable */
.single-projet .wp-block-post-terms a {
    pointer-events: none;
    text-decoration: none;
    color: inherit;
    cursor: default;
}
[data-theme="light"] .ct-btn-back:hover {
    border-color: var(--accent-color) !important;
    color: var(--text-1) !important;
}


/* --- 01b. LOGO DARK / LIGHT --- */

/* Par défaut (dark) : logo blanc visible, logo noir caché */
.logo-dark  { display: block; }
.logo-light { display: none;  }

/* Light : logo noir visible, logo blanc caché */
[data-theme="light"] .logo-dark  { display: none;  }
[data-theme="light"] .logo-light { display: block; }


/* --- 02. CURSOR PERSONNALISÉ --- */

/* Actif uniquement sur les appareils pointer précis (souris, trackpad) */
@media (pointer: fine) {
    body, a, button, input, select, textarea {
        cursor: none !important;
    }

    .magic-cursor {
        position: fixed;
        top: 0;
        left: 0;
        width: 18px;
        height: 18px;
        background-color: var(--accent);
        border-radius: 50%;
        pointer-events: none;
        z-index: 1000001;
        will-change: transform, width, height;
        transition: width 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
                    height 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
                    background-color 0.3s ease;
        mix-blend-mode: difference;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
    }

    .magic-cursor.is-hovering {
        width: 60px;
        height: 60px;
        background-color: var(--text-1);
    }

    .magic-cursor .cursor-text {
        font-family: var(--wp--preset--font-family--archivo-black), 'Archivo Black', sans-serif;
        font-size: 0;
        color: var(--bg);
        text-transform: uppercase;
        letter-spacing: 0.04em;
        white-space: nowrap;
        transition: font-size 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
    }

    .magic-cursor.is-hovering .cursor-text {
        font-size: 8px;
    }
}


/* --- 03. HEADER --- */

/* Transition fluide lors de la bascule dark ↔ light */
body {
    transition: background-color 0.25s ease, color 0.25s ease;
}

/* Focus states accessibles (WCAG AA) */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--accent) !important;
    outline-offset: 2px !important;
    box-shadow: none !important;
}

html, body, .wp-site-blocks {
    overflow-x: clip;
}

/* Bouton CTA header : icône cachée sur desktop, texte visible */
header .wp-block-button .wp-block-button__link .ct-cta-icon { display: none; }
header .wp-block-button .wp-block-button__link .ct-cta-text { display: inline; }

header.wp-block-template-part {
    position: sticky !important;
    top: 0 !important;
    z-index: 9999 !important;
    align-self: flex-start;
}

/* Classe ajoutée par JS au scroll */
.is-blurred-header {
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    background-color: var(--nav-bg) !important;
}

/* Suppression de l'outline natif WP sur les éléments interactifs du header */
header.wp-block-template-part a:focus,
.wp-block-site-logo a:focus,
.custom-icon-link:focus,
.theme-toggle-btn:focus {
    outline: none !important;
    box-shadow: none !important;
}

a:focus img,
a:focus svg {
    outline: none !important;
}


/* --- 04. NAVIGATION DESKTOP --- */

/* Suppression du soulignement natif WP + transition couleur */
.main-nav-custom .wp-block-navigation-item__content {
    text-decoration: none !important;
    position: relative;
    padding: 0.5rem 0;
    transition: color 0.3s ease !important;
}

.main-nav-custom .wp-block-navigation-item__content:hover,
.main-nav-custom .current-menu-item .wp-block-navigation-item__content {
    color: var(--accent-color) !important;
}

/* Ligne animée sous les liens */
.main-nav-custom .wp-block-navigation-item__content::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 1px;
    background-color: var(--accent-color);
    transition: width 0.3s ease;
}

.main-nav-custom .wp-block-navigation-item__content:hover::after,
.main-nav-custom .current-menu-item .wp-block-navigation-item__content::after {
    width: 100%;
}

/* Structure des items enrichis par JS (mobile panel) — styles de base globaux */
.nav-item-num {
    font-size: 0.625rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-color-gray);
    font-weight: 400;
    flex-shrink: 0;
    align-self: flex-start;
    padding-top: 5px;
    min-width: 22px;
}

.nav-item-text {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.nav-item-label {
    font-size: 1.375rem;
    font-weight: 700;
    color: var(--text-color);
    line-height: 1.1;
}

.nav-item-sub {
    font-size: 0.6875rem;
    color: var(--text-color-gray);
    line-height: 1;
    font-weight: 400;
}

.nav-item-arrow {
    color: var(--accent-color);
    flex-shrink: 0;
    transition: transform 0.2s ease;
}

.wp-block-navigation-item__content:hover .nav-item-arrow {
    transform: translateX(4px);
}

.nav-panel-brand {
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-color-gray);
    pointer-events: none;
}


/* --- 05. BOUTON DARK/LIGHT --- */

.theme-toggle-btn {
    cursor: pointer;
    font-size: 1.5rem;
    color: var(--text-color) !important;
    transition: color 0.3s ease, transform 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem;
}

.theme-toggle-btn:hover {
    color: var(--accent-color) !important;
    transform: rotate(20deg);
}

/* Exception : annule le translateX de .custom-icon-link sur le toggle */
.theme-toggle-btn i {
    transition: transform 0.3s ease;
}
.theme-toggle-btn:hover i {
    transform: none !important;
}

/* Mode sombre (défaut) : soleil visible, lune cachée */
.theme-toggle-btn .theme-icon-moon { display: none; }
.theme-toggle-btn .theme-icon-sun  { display: inline-block; }

/* Mode clair : lune visible, soleil caché */
:root[data-theme="light"] .theme-toggle-btn .theme-icon-sun  { display: none; }
:root[data-theme="light"] .theme-toggle-btn .theme-icon-moon { display: inline-block; }


/* --- 06. BOUTONS & INTERACTIONS --- */

/* Transition fluide sur les boutons FSE (sauf .no-hover) */
.wp-element-button:not(.no-hover),
.wp-block-button__link:not(.no-hover) {
    transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1) !important;
    will-change: transform, box-shadow;
}

.wp-element-button:not(.no-hover):hover,
.wp-block-button__link:not(.no-hover):hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-glow);
    color: var(--text-color) !important;
}

/* Bouton fantôme : bordure jaune au survol seulement */
.hover-border-yellow {
    border: 1px solid transparent !important;
    background-color: transparent !important;
    transition: border-color 0.3s ease !important;
}

.hover-border-yellow:hover {
    border-color: var(--accent-color) !important;
    transform: none;
    box-shadow: none;
}

/* Bouton avec flèche animée — ajouter .btn-arrow sur un wp-block-button */
.btn-arrow .wp-block-button__link::after {
    content: ' →';
    display: inline-block;
    transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1);
    padding-left: 8px;
}

.btn-arrow:hover .wp-block-button__link::after {
    transform: translateX(5px);
}

/* Bouton retour projets */
.ct-btn-back {
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
    font-size: 0.75rem !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    color: var(--text-color-gray) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 100px !important;
    padding: 8px 18px !important;
    background: transparent !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
}

.ct-btn-back::before {
    content: '←';
    display: inline-block;
    transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}

.ct-btn-back:hover {
    color: var(--text-color) !important;
    border-color: var(--accent-color) !important;
}

.ct-btn-back:hover::before {
    transform: translateX(-4px);
}


/* --- 07. CARTES & COMPOSANTS UI --- */

/* Carte générique avec hover transform */
.hover-card {
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), border-color 0.4s ease;
    will-change: transform;
    overflow: hidden;
}

/* Carte avec bordure jaune au survol */
.card-hover-yellow {
    border: 1px solid var(--border);
    transition: border-color 0.4s ease, box-shadow 0.4s ease, transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
    will-change: transform, border-color, box-shadow;
}

.card-hover-yellow:hover {
    border-color: var(--accent-color) !important;
    box-shadow: var(--shadow-glow) !important;
    transform: translateY(-5px);
}

/* Box icône Phosphor (services) */
.card-icone {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    background: var(--accent-dim);
    border: 1px solid var(--accent-border);
    border-radius: 6px;
    color: var(--accent-color);
    font-size: 1.5rem;
    transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}

.card-hover-yellow:hover .card-icone,
.hover-card:hover .card-icone {
    background: var(--accent-color);
    color: #000;
    transform: translateY(-4px);
}

/* Icônes accent (usage général) */
.card-icones {
    color: var(--accent-color);
    font-size: 3.3rem;
}

/* Label de section — tiret jaune avant titre (classe FSE) */
.slabel {
    display: inline-flex !important;
    align-items: center;
    gap: 10px;
    font-size: 0.72rem !important;
    font-weight: 600 !important;
    color: var(--accent-color) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.12em !important;
}

.slabel::before {
    content: '';
    width: 24px;
    height: 1px;
    background: var(--accent-color);
    flex-shrink: 0;
}

/* Cards portfolio homepage (.ct-porto) */
.ct-porto {
    display: flex;
    flex-direction: column;
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid var(--border-color);
    background: var(--bg-color);
    transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
    text-decoration: none !important;
}

.ct-porto:hover {
    border-color: var(--accent-color) !important;
    transform: translateY(-5px);
    box-shadow: var(--shadow-glow);
}

.ct-porto .wp-block-cover,
.ct-porto .wp-block-image {
    aspect-ratio: 16/9;
    overflow: hidden;
    margin: 0 !important;
}

.ct-porto .wp-block-cover img,
.ct-porto .wp-block-image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}

.ct-porto:hover .wp-block-cover img,
.ct-porto:hover .wp-block-image img {
    transform: scale(1.06);
}

.ct-porto-label {
    font-size: 0.66rem !important;
    font-weight: 700 !important;
    color: var(--accent-color) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.1em !important;
    margin-bottom: 4px !important;
}

.ct-porto-link {
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
    font-size: 0.75rem !important;
    font-weight: 600 !important;
    color: var(--text-color) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    text-decoration: none !important;
    transition: color 0.3s ease !important;
}

.ct-porto-link::after {
    content: '→';
    display: inline-block;
    transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}

.ct-porto:hover .ct-porto-link              { color: var(--accent-color) !important; }
.ct-porto:hover .ct-porto-link::after       { transform: translateX(5px); }

/* Tags projets (pill fond jaune) */
.ct-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    background: var(--accent-dim);
    color: var(--accent-color);
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    border-radius: 4px;
    text-decoration: none !important;
    transition: all 0.3s ease;
}

.ct-pill:hover {
    background: var(--accent-border);
    color: var(--accent-color);
}

/* Catégories single projet — container de pills (reset du ct-pill général) */
.taxonomy-categorie_projet.ct-pill {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    text-decoration: none;
    background: none !important;
    border: none !important;
    padding: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

.taxonomy-categorie_projet.ct-pill a {
    display: inline-flex;
    align-items: center;
    background-color: var(--accent-dim);
    color: var(--accent-color);
    font-size: 0.7rem;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 4px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    text-decoration: none !important;
    transition: background-color .2s ease;
}

.taxonomy-categorie_projet.ct-pill a:hover {
    background-color: var(--accent-border);
}

/* Tags single projet — pills outline */
.taxonomy-tag_projet.ct-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.taxonomy-tag_projet.ct-pills a {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    border: 1px solid var(--border-color);
    border-radius: 100px;
    font-size: 0.72rem;
    font-weight: 500;
    color: var(--text-color-gray);
    text-decoration: none !important;
    transition: border-color .2s ease, color .2s ease;
}

.taxonomy-tag_projet.ct-pills a:hover {
    border-color: var(--accent-color);
    color: var(--accent-color);
}

/* Listes WP — marqueur en accent */
.wp-block-list li::marker {
    color: var(--accent-color);
    font-weight: bold;
}

/* Lien avec icône (footer, nav) */
.custom-icon-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 1rem;
    text-decoration: none !important;
    transition: color 0.3s ease;
}

.custom-icon-link i {
    font-size: 1.6rem;
    color: var(--accent-color);
    transition: transform 0.3s ease;
}

.custom-icon-link:hover i {
    transform: translateX(5px);
}

.custom-icon-social {
    text-decoration: none !important;
}

.custom-icon-social i {
    font-size: 1.6rem;
    color: var(--text-1);
    transition: transform 0.3s ease;
}

.custom-icon-social i:hover,
.custom-icon-link:hover {
    color: var(--accent-color);
}

/* Boutons filtres — compteur discret */
.filter-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.filter-count {
    display: inline;
    background: none;
    border-radius: 0;
    padding: 0;
    margin-left: 2px;
    font-size: .85em;
    line-height: 1;
    opacity: .6;
}

.filter-btn.is-active .filter-count { opacity: .75; }

/* Étapes de processus */
.ct_process {
    position: relative;
    overflow: hidden;
    transition: background-color 0.3s ease,
                opacity   0.85s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.85s cubic-bezier(0.22, 1, 0.36, 1);
}

.ct_process:hover {
    background-color: var(--bg-3) !important;
}

/* Titre de l'étape : couleur principale (accent au survol) */
.ct_process .wp-block-heading:first-child {
    color: var(--text-color) !important;
    transition: color 0.3s ease !important;
}

.ct_process:hover .wp-block-heading:first-child {
    color: var(--accent-color) !important;
}

/* Barre supérieure animée */
.ct_process::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--accent-color);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

.ct_process:hover::before {
    transform: scaleX(1);
}

/* Timeline à propos */
.ct-timeline {
    position: relative;
}

.ct-timeline::before {
    content: '';
    position: absolute;
    left: 5px;
    top: 6px;
    bottom: 0;
    width: 2px;
    background: linear-gradient(to bottom, var(--accent-color), transparent);
    border-radius: 1px;
}

.ct-timeline-item {
    position: relative;
    padding-left: 24px !important;
    padding-bottom: 32px;
}

.ct-timeline-item::before {
    content: '';
    width: 10px;
    height: 10px;
    background: var(--accent-color);
    border-radius: 50%;
    position: absolute;
    left: -22px;
    top: 4px;
    box-shadow: 0 0 0 3px var(--accent-dim);
}

.ct-timeline-year {
    font-size: 0.68rem !important;
    font-weight: 700 !important;
    color: var(--accent-color) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.1em !important;
    margin-bottom: 5px !important;
}

/* Logos colonnes (section références) — toujours centrés */
.wp-block-column .wp-block-image {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}

/* Animation de défilement souris */
.mouse-scroll-animation svg {
    width: 32px;
    height: 32px;
    display: block;
    margin: 0 auto;
}

.mouse-scroll-animation .mouse-wheel {
    animation: scrollWheelBounce 1.5s infinite ease-in-out;
}

@keyframes scrollWheelBounce {
    0%, 100% { transform: translateY(0); }
    50%       { transform: translateY(4px); }
}

/* Fix post-content enfant flex (template mariage)
   Sans width:100%, la hauteur du wrapper embed tombe à 0 (padding-top:56.25% × 0). */
.is-layout-flex > .wp-block-post-content {
    width: 100%;
    min-width: 0;
}


/* --- 08. GRILLE DE PROJETS & FILTRES --- */

/* Contrebalance le is-layout-flex de FSE qui réduit la largeur */
.project-grid-container.custom-grid-instance {
    width: 100% !important;
    flex: 1 1 100% !important;
    display: block;
}

.project-grid {
    display: grid !important;
    gap: .85rem !important;
    width: 100% !important;
    align-items: stretch;
}

/* Colonnes selon l'attribut data-columns (posé par PHP) */
.project-grid-container[data-columns="2"] .project-grid { grid-template-columns: repeat(2, 1fr) !important; }
.project-grid-container[data-columns="3"] .project-grid { grid-template-columns: repeat(3, 1fr) !important; }
.project-grid-container[data-columns="4"] .project-grid { grid-template-columns: repeat(4, 1fr) !important; }

/* Les cartes ne doivent pas avoir de largeur propre — la grille s'en charge */
.project-card-digital,
.project-card-photo {
    width: 100% !important;
    margin: 0 !important;
}

/* Filtres projets — pills arrondies */
.project-filters,
.project-sub-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: clamp(28px, 4vw, 44px);
}

.project-filters .filter-btn,
.project-sub-filters .filter-btn {
    background-color: transparent !important;
    color: var(--text-color-gray) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 100px !important;
    padding: 9px 20px !important;
    font-family: var(--wp--preset--font-family--inter);
    font-size: .72rem !important;
    font-weight: 600 !important;
    letter-spacing: .06em !important;
    line-height: 1 !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    transition: all .3s ease !important;
    box-shadow: none !important;
    transform: none !important;
}

.project-filters .filter-btn:hover,
.project-sub-filters .filter-btn:hover {
    border-color: var(--accent-color) !important;
    color: var(--text-color) !important;
    transform: none !important;
}

.project-filters .filter-btn.is-active,
.project-sub-filters .filter-btn.is-active {
    background-color: var(--accent-color) !important;
    color: #000 !important;
    border-color: var(--accent-color) !important;
}

/* Bouton fermer les sous-filtres */
.project-sub-filters .close-sub-filters {
    border-color: var(--accent-color) !important;
    color: var(--accent-color) !important;
}

.project-sub-filters .close-sub-filters:hover {
    background-color: var(--accent-color) !important;
    color: var(--bg-color) !important;
}


/* --- 09. VIGNETTES PROJETS --- */

/* -- Vignette digitale -- */

.project-card-digital {
    display: flex;
    flex-direction: column;
    background-color: var(--bg-color);
    border: 1px solid var(--border-color);
    border-radius: 5px;
    text-decoration: none !important;
    overflow: hidden;
    transition: transform 0.3s ease, border-color 0.3s ease;
    will-change: transform;
    height: 100%;
}

.project-card-digital:hover {
    transform: translateY(-5px);
    border-color: var(--accent-color);
}

.digital-image-wrapper {
    width: 100%;
    aspect-ratio: 4/3;
    background-color: var(--bg-2);
    position: relative;
    border-bottom: 1px solid var(--border-color);
}

.digital-image {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
}

.digital-placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-3);
    font-size: 0.9rem;
    font-style: italic;
}

.digital-content {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.digital-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 1rem;
}

.digital-badge {
    background-color: var(--accent-dim);
    color: var(--accent-color);
    font-size: 0.7rem;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 4px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.digital-title {
    color: var(--text-color);
    font-size: 1.25rem;
    font-weight: 700;
    margin: 0 0 0.5rem 0;
}

/* margin-top: auto pousse le client en bas de la carte */
.digital-client {
    color: var(--text-color-gray);
    font-size: 0.9rem;
    margin: 0;
    margin-top: auto;
}

/* -- Vignette photo / vidéo -- */

.project-card-photo {
    position: relative;
    aspect-ratio: 4 / 3;
    display: flex;
    align-items: flex-end;
    border-radius: 8px;
    overflow: hidden;
    background-color: var(--bg-2);
    text-decoration: none !important;
    transition: transform 0.3s ease;
    will-change: transform;
}

.project-card-photo:hover {
    transform: scale(1.03);
}

.photo-image {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    transition: transform 0.5s ease;
}

.project-card-photo:hover .photo-image {
    transform: scale(1.05);
}

/* Overlay dégradé + flex pour empiler titre et badges */
.photo-overlay {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    position: relative;
    z-index: 2;
    padding: 2rem;
    width: 100%;
    background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0) 100%);
}

.photo-title {
    color: var(--text-color);
    font-size: 1.1rem;
    font-weight: 500;
    margin: 0;
}

.photo-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.photo-badge {
    background-color: var(--accent-dim);
    color: var(--accent-color);
    font-size: 0.65rem;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 4px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

/* Icône play centrée (vignettes vidéo) */
.project-card-photo .video-play-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 3;
    font-size: 3rem;
    color: var(--accent-color);
    transition: transform 0.3s ease, color 0.3s ease;
}

.project-card-photo:hover .video-play-icon {
    transform: translate(-50%, -50%) scale(1.1);
    color: #ffffff;
}

/* Icône cadenas (projets protégés par mot de passe) */
.card-lock-icon {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 4;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(0, 0, 0, 0.6);
    border: 1px solid var(--accent-border);
    border-radius: 50%;
    color: var(--accent-color);
    font-size: 1rem;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.card-locked-label {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--accent-color);
    font-size: 0.8rem;
    font-style: italic;
    opacity: 0.85;
}


/* --- 10. GALERIE MASONRY --- */

/* Grille CSS columns — break-inside: avoid sur les items est critique */
.ct-masonry-grid {
    columns: 4;
    column-gap: .85rem;
    width: 100%;
}

/* Variante vidéo : 3 colonnes en desktop */
.ct-video-grid .ct-masonry-grid {
    columns: 3;
}

.ct-masonry-item {
    display: block;
    position: relative;
    overflow: hidden;
    border-radius: 5px;
    background-color: var(--bg-2);
    text-decoration: none !important;
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
    page-break-inside: avoid;
    margin: 0 0 .85rem;
    width: 100%;
}

.ct-masonry-item img {
    display: block;
    width: 100%;
    height: auto;
    transition: transform 0.5s ease;
}

.ct-masonry-item:hover img {
    transform: scale(1.04);
}

/* Icône play sur les vignettes vidéo masonry */
.ct-item-play-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 3.5rem;
    color: var(--accent-color);
    z-index: 2;
    pointer-events: none;
    transition: transform 0.3s ease, color 0.3s ease;
    filter: drop-shadow(0 2px 8px rgba(0,0,0,0.5));
}

.ct-masonry-item:hover .ct-item-play-icon {
    transform: translate(-50%, -50%) scale(1.12);
    color: #ffffff;
}

/* Caption overlay (visible au survol) */
.ct-item-caption {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 1.5rem 1rem 1rem;
    background: linear-gradient(to top, rgba(0,0,0,0.85), transparent);
    color: var(--text-color);
    font-size: 0.875rem;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.ct-masonry-item:hover .ct-item-caption {
    opacity: 1;
}

/* Filtres galerie — style propre (différent des project-filters : coins carrés, padding plus large) */
.ct-gallery-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 2.5rem;
}

.ct-gallery-filters .filter-btn {
    background-color: transparent !important;
    color: var(--text-color) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 4px;
    padding: 12px 30px;
    font-family: var(--wp--preset--font-family--inter);
    font-size: clamp(0.875rem, 0.875rem + ((1vw - 0.2rem) * 0.039), 0.9rem);
    font-weight: 600 !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
    box-shadow: none !important;
}

.ct-gallery-filters .filter-btn:hover {
    border-color: var(--accent-color) !important;
    color: var(--accent-color) !important;
    transform: none !important;
}

.ct-gallery-filters .filter-btn.is-active {
    background-color: var(--accent-color) !important;
    color: var(--bg-color) !important;
    border-color: var(--accent-color) !important;
}

/* Spinner de chargement */
.ct-gallery-loading {
    display: none;
    justify-content: center;
    padding: 2rem;
}

.ct-gallery-loading.is-loading {
    display: flex;
}

.ct-gallery-spinner {
    width: 28px;
    height: 28px;
    border: 2px solid var(--border-color);
    border-top-color: var(--accent-color);
    border-radius: 50%;
    animation: ctSpin 0.7s linear infinite;
}

@keyframes ctSpin { to { transform: rotate(360deg); } }

.ct-gallery-pagination {
    text-align: center;
    margin-top: 2rem;
}

.ct-gallery-error {
    grid-column: 1 / -1;
    text-align: center;
    color: var(--text-color-gray);
    padding: 2rem;
}


/* --- 11. LIGHTBOX --- */

.ct-lightbox {
    display: flex;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.96);
    z-index: 999999;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.25s ease, visibility 0.25s ease;
}

.ct-lightbox.is-active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

@media (prefers-reduced-motion: no-preference) {
    .ct-lightbox.is-active .ct-lightbox-content {
        animation: ctLightboxOpen 0.38s cubic-bezier(0, 0, 0.2, 1) both;
    }

    @keyframes ctLightboxOpen {
        from { opacity: 0; transform: scale(0.12); }
        to   { opacity: 1; transform: scale(1); }
    }
}

.ct-lightbox-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    max-width: 90vw;
    max-height: 90vh;
}

.ct-lightbox-img {
    max-width: 100%;
    max-height: 82vh;
    object-fit: contain;
    border-radius: 4px;
    transition: opacity 0.25s ease;
}

.ct-lightbox-video-player {
    width: min(900px, 88vw);
    aspect-ratio: 16 / 9;
    border-radius: 4px;
    display: block;
    background: #000;
}

.ct-lightbox-caption {
    color: var(--text-color);
    font-size: 1rem;
    font-weight: 600;
    text-align: center;
    margin: 0;
}

.ct-lightbox-description {
    color: var(--text-color-gray);
    font-size: .9rem;
    line-height: 1.55;
    max-width: 680px;
    margin: .25rem auto 0;
    text-align: center;
}

.ct-lightbox-description p              { margin: .4rem 0; }
.ct-lightbox-description p:first-child  { margin-top: 0; }
.ct-lightbox-description p:last-child   { margin-bottom: 0; }

.ct-lightbox-counter {
    color: var(--text-color-gray);
    font-size: 0.75rem;
    letter-spacing: 1px;
}

/* Bouton fermer — toujours blanc (lightbox bg toujours sombre) */
.ct-lightbox-close {
    position: absolute;
    top: 1.25rem;
    right: 1.25rem;
    background: none;
    border: 1px solid rgba(255,255,255,0.3);
    color: #ffffff;
    font-size: 1.1rem;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    transition: border-color 0.3s ease, color 0.3s ease;
}

.ct-lightbox-close:hover {
    border-color: var(--accent-color);
    color: var(--accent-color);
}

/* Boutons nav précédent / suivant — toujours blancs */
.ct-lightbox-prev,
.ct-lightbox-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: 1px solid rgba(255,255,255,0.3);
    color: #ffffff;
    font-size: 1.3rem;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    transition: border-color 0.3s ease, color 0.3s ease;
}

.ct-lightbox-prev { left: 1.25rem; }
.ct-lightbox-next { right: 1.25rem; }

.ct-lightbox-prev:hover,
.ct-lightbox-next:hover {
    border-color: var(--accent-color);
    color: var(--accent-color);
}


/* --- 12. FORMULAIRE DE CONTACT --- */

/* Boîtes info (gauche de la page contact) */
.contact-info-boxes {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.contact-info-boxes br {
    display: none;
}

.contact-box-square {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    padding: 1.25rem 1.5rem;
    background-color: var(--bg-color);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    text-decoration: none !important;
    transition: transform 0.3s ease, border-color 0.3s ease;
}

.contact-box-square:hover {
    transform: translateY(-5px);
    border-color: var(--accent-color);
}

.contact-box-square i {
    font-size: 2rem;
    color: var(--accent-color);
}

.contact-box-square div {
    display: flex;
    flex-direction: column;
}

.contact-label {
    font-size: 0.8rem;
    color: var(--text-color-gray);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 0.2rem;
}

.contact-value {
    font-size: 1.1rem;
    color: var(--text-color);
    font-weight: 500;
}

/* Forminator — champs */
.forminator-custom-form .forminator-row {
    margin-bottom: 1.5rem !important;
}

.forminator-custom-form .forminator-label {
    color: var(--text-color) !important;
    font-size: 0.9rem !important;
    font-weight: 500 !important;
    margin-bottom: 0.5rem !important;
    display: block !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.forminator-custom-form .forminator-required {
    color: var(--accent-color) !important;
}

.forminator-custom-form .forminator-input,
.forminator-custom-form .forminator-textarea {
    width: 100% !important;
    background-color: transparent !important;
    border: 1px solid var(--border-color) !important;
    color: var(--text-color) !important;
    padding: 14px 18px !important;
    border-radius: 4px !important;
    font-family: inherit !important;
    font-size: 1rem !important;
    transition: all 0.3s ease !important;
    box-shadow: none !important;
}

.forminator-custom-form .forminator-input:focus,
.forminator-custom-form .forminator-textarea:focus {
    outline: none !important;
    border-color: var(--accent-color) !important;
    box-shadow: 0 0 0 1px var(--accent-color) !important;
    background-color: rgba(255, 238, 0, 0.03) !important;
}

/* Forminator — fond explicite en light (transparent ne contraste pas assez) */
[data-theme="light"] .forminator-custom-form .forminator-input,
[data-theme="light"] .forminator-custom-form .forminator-textarea {
    background-color: var(--bg-2) !important;
}

/* Forminator — Select2 (base) */
.forminator-custom-form .select2-container--default .select2-selection--single {
    background-color: transparent !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 4px !important;
    height: auto !important;
    padding: 12px 18px !important;
    transition: all 0.3s ease !important;
}

.forminator-custom-form .select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: var(--text-color-gray) !important;
    opacity: 1 !important;
}

.forminator-custom-form .select2-container--default .select2-selection--single .select2-selection__rendered {
    color: var(--text-color) !important;
    line-height: normal !important;
    padding: 0 !important;
}

.forminator-custom-form .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 100% !important;
    right: 15px !important;
}

.forminator-custom-form .select2-container--default .select2-selection--single .select2-selection__arrow b {
    border-color: var(--text-color, #ffffff) transparent transparent transparent !important;
}

/* Focus / ouverture */
.forminator-custom-form .select2-container--open .select2-selection--single,
.forminator-custom-form .select2-container--focus .select2-selection--single {
    border-color: var(--accent-color) !important;
    box-shadow: 0 0 0 1px var(--accent-color) !important;
    outline: none !important;
}

/* Select2 — fond du champ */
.forminator-custom-form .select2-container .select2-selection--single {
    background-color: var(--bg) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 4px !important;
    min-height: 40px !important;
    display: flex !important;
    align-items: center !important;
}

.forminator-custom-form .select2-container .select2-selection--single .select2-selection__placeholder {
    color: var(--placeholder-color, #aaaaaa) !important;
}

.forminator-custom-form .select2-container .select2-selection--single .select2-selection__rendered {
    color: var(--text-color, #ffffff) !important;
    padding-left: 15px !important;
}

/* Select2 — dropdown */
.select2-container .select2-dropdown {
    background-color: var(--bg) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 4px !important;
}

.select2-container .select2-results__options {
    background-color: var(--bg) !important;
}

.select2-container .select2-results__option {
    background-color: var(--bg) !important;
    color: var(--text-1) !important;
    padding: 8px 12px !important;
}

.select2-container .select2-results__option--highlighted[aria-selected],
.select2-container .select2-results__option[aria-selected="true"] {
    background-color: var(--bg-3) !important;
    color: var(--text-1) !important;
}

/* Forminator — validation */
.forminator-custom-form .forminator-has_error .forminator-input,
.forminator-custom-form .forminator-has_error .forminator-textarea,
.forminator-custom-form .forminator-has_error .select2-selection {
    border-color: #ff6b6b !important;
}

.forminator-custom-form .forminator-error-message {
    color: #ff6b6b !important;
    font-size: 0.85rem !important;
    margin-top: 8px !important;
    font-weight: 500 !important;
}

/* Forminator — bouton envoi aligné à droite */
.forminator-custom-form .forminator-button-submit {
    background-color: transparent !important;
    color: var(--accent-color) !important;
    border: 1px solid var(--accent-color) !important;
    padding: 14px 32px !important;
    font-family: var(--wp--preset--font-family--archivo-black), sans-serif !important;
    font-size: 1rem !important;
    text-transform: uppercase !important;
    cursor: pointer !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease, color 0.3s ease !important;
    border-radius: 4px !important;
    width: auto !important;
    margin-top: 1rem !important;
    display: block !important;
    margin-left: auto !important;
    margin-right: 0 !important;
}

.forminator-custom-form .forminator-button-submit:hover {
    background-color: var(--accent-color) !important;
    color: #000000 !important;
    transform: translateY(-3px) !important;
    box-shadow: var(--shadow-glow) !important;
}


/* --- 13. FORMULAIRE MOT DE PASSE --- */

.post-password-form {
    max-width: 480px;
    margin: 4rem auto;
    padding: 2rem 0;
}

.post-password-form p:first-child {
    color: var(--text-color-gray);
    font-size: 0.95rem;
    margin-bottom: 1.5rem;
    text-align: center;
}

.post-password-form label {
    display: block;
    color: var(--text-color);
    font-size: 0.9rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 0.5rem;
}

.post-password-form input[type="password"] {
    width: 100%;
    background-color: transparent;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    color: var(--text-color);
    padding: 14px 18px;
    font-family: inherit;
    font-size: 1rem;
    transition: all 0.3s ease;
    margin-bottom: 1.25rem;
    box-sizing: border-box;
    box-shadow: none;
}

.post-password-form input[type="password"]:focus {
    outline: none;
    border-color: var(--accent-color);
    box-shadow: 0 0 0 1px var(--accent-color);
    background-color: rgba(255, 238, 0, 0.03);
}

.post-password-form input[type="submit"] {
    background-color: var(--accent-color);
    color: var(--bg-color);
    border: 1px solid var(--accent-color);
    padding: 14px 32px;
    font-family: var(--wp--preset--font-family--archivo-black), sans-serif;
    font-size: 1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    cursor: pointer;
    border-radius: 4px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.post-password-form input[type="submit"]:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-glow);
}


/* --- 14. ANIMATIONS & REVEAL AU SCROLL --- */

@media (prefers-reduced-motion: no-preference) {

    /* Héro : animation au chargement de page */
    @keyframes heroFadeUp {
        from { opacity: 0; transform: translateY(22px); }
        to   { opacity: 1; transform: translateY(0); }
    }

    .hero-animate {
        animation: heroFadeUp 0.85s cubic-bezier(0.25, 1, 0.5, 1) both;
    }

    /* Reveal au scroll : état initial (classe ajoutée par JS) */
    .reveal {
        opacity: 0;
        transform: translateY(52px) scale(0.97);
        transition:
            opacity   0.85s cubic-bezier(0.22, 1, 0.36, 1),
            transform 0.85s cubic-bezier(0.22, 1, 0.36, 1);
        will-change: opacity, transform;
    }

    .reveal.from-left  { transform: translateX(-48px) scale(0.97); }
    .reveal.from-right { transform: translateX(48px)  scale(0.97); }

    /* Reveal : état visible */
    .reveal.is-visible {
        opacity: 1;
        transform: translate(0, 0) scale(1);
    }

    /* ct_process déclare sa propre transition : elle doit coexister avec reveal */
    .ct_process.reveal {
        transition: background-color 0.3s ease,
                    opacity   0.85s cubic-bezier(0.22, 1, 0.36, 1),
                    transform 0.85s cubic-bezier(0.22, 1, 0.36, 1);
    }
}


/* --- 15. UTILITAIRES VISUELS --- */

/* Dégradés réutilisables — ajouter la classe dans l'éditeur FSE */
.gradient-accent {
    background: var(--gradient-accent) !important;
}

.gradient-accent-strong {
    background: var(--gradient-accent-strong) !important;
}

.gradient-text {
    background: linear-gradient(135deg, var(--accent) 0%, #fff176 50%, var(--accent) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Bordures dégradées */
.border-gradient {
    border: 1px solid transparent !important;
    border-image: linear-gradient(135deg, var(--accent-color), rgba(255,238,0,.2)) 1 !important;
}

.border-gradient-left {
    border-left: 2px solid transparent !important;
    border-image: linear-gradient(to bottom, var(--accent-color), transparent) 1 !important;
}

/* Glow jaune au survol */
.glow-hover {
    transition: box-shadow 0.4s ease, transform 0.4s cubic-bezier(0.25, 1, 0.5, 1) !important;
}

.glow-hover:hover {
    box-shadow: var(--shadow-glow) !important;
    transform: translateY(-4px);
}

/* Glow radial en fond de section */
.radial-glow {
    position: relative;
}

.radial-glow::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 600px;
    height: 400px;
    background: radial-gradient(ellipse, rgba(255,238,0,.06) 0%, transparent 70%);
    pointer-events: none;
    z-index: 0;
}

/* Logos clients : couleur complète */
.ct-logo-client img {
    filter: none;
}

/* Effet noir & blanc → couleur au survol */
.ct-img-effect img,
img.ct-img-effect {
    filter: grayscale(1);
    transition: filter .45s ease;
}

.ct-img-effect:hover img,
img.ct-img-effect:hover,
.ct-img-effect:focus-within img {
    filter: grayscale(0);
}

/* Vidéo héro (en attente du showreel) */
.hero-video-wrapper {
    position: absolute;
    inset: 0;
    overflow: hidden;
    z-index: 0;
}

.hero-video-wrapper video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(0.3);
}

.hero-video-wrapper .hero-video-fallback {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    filter: brightness(0.3);
}

/* Galerie WordPress par défaut */
.wp-block-gallery .wp-block-image img {
    border-radius: 5px;
}

/* Liens liste sans soulignement */
.ct-link li a {
    text-decoration: none;
}


/* ==========================================================================
   16. FAB FLOTTANT — PACK PHOTOS
   ========================================================================== */

.ct-pack-fab-wrapper {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 12px;
}

.ct-pack-fab {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border: none;
    background-color: var(--accent-color);
    color: var(--bg-color);
    cursor: pointer;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.ct-pack-fab:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.3);
}

.ct-pack-fab i {
    font-size: 1.5rem;
    position: absolute;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.ct-pack-fab .ct-pack-icon-close { opacity: 0; transform: rotate(-90deg); }

[data-open="true"] .ct-pack-fab .ct-pack-icon-download { opacity: 0; transform: rotate(90deg); }
[data-open="true"] .ct-pack-fab .ct-pack-icon-close    { opacity: 1; transform: rotate(0deg); }

.ct-pack-options {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    pointer-events: none;
}

.ct-pack-option {
    opacity: 0;
    transform: translateY(8px) scale(0.92);
    transition: opacity 0.25s ease, transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
    transition-delay: 0ms;
}

[data-open="true"] .ct-pack-options { pointer-events: auto; }

[data-open="true"] .ct-pack-option {
    opacity: 1;
    transform: translateY(0) scale(1);
    transition-delay: calc((1 - var(--i)) * 60ms);
}

.ct-pack-option a {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 10px 18px;
    background-color: var(--bg-color);
    color: var(--text-color);
    border: 1px solid var(--border-color);
    border-radius: 999px;
    font-family: var(--wp--preset--font-family--archivo-black), sans-serif;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-decoration: none;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.2);
    transition: transform 0.25s ease, border-color 0.25s ease, color 0.25s ease;
    white-space: nowrap;
}

.ct-pack-option a:hover {
    transform: translateX(-3px);
    border-color: var(--accent-color);
    color: var(--accent-color);
}

.ct-pack-option a i { font-size: 1.1rem; }
.ct-pack-option-label { font-weight: 700; }
.ct-pack-option-weight {
    font-size: 0.75rem;
    color: var(--text-color-gray);
    text-transform: none;
    letter-spacing: 0;
    margin-left: 4px;
}

/* Cas dégradé : un seul lien → bouton pill direct */
.ct-pack-fab.is-direct {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 9999;
    width: auto;
    height: auto;
    border-radius: 999px;
    padding: 14px 22px;
    text-decoration: none;
    gap: 0.6rem;
    font-family: var(--wp--preset--font-family--archivo-black), sans-serif;
    font-size: 0.95rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.ct-pack-fab.is-direct i { position: static; font-size: 1.3rem; }


/* ==========================================================================
   17. RESPONSIVE — breakpoints décroissants
   ========================================================================== */

/* --- ≤ 1200px --- */
@media (max-width: 1200px) {
    .project-grid-container[data-columns="4"] .project-grid { grid-template-columns: repeat(3, 1fr) !important; }
    .ct-masonry-grid { columns: 3; }
}

/* --- ≥ 1130px — reset nav enrichie si injectée au resize --- */
@media (min-width: 1130px) {
    .nav-item-num,
    .nav-item-sub,
    .nav-item-arrow {
        display: none !important;
    }

    .nav-item-text {
        flex: none !important;
        flex-direction: row !important;
        gap: 0 !important;
    }

    .nav-item-label {
        font-size: inherit !important;
        font-weight: inherit !important;
        color: inherit !important;
        line-height: inherit !important;
    }
}

/* --- ≤ 1129px — Navigation mobile, ct_service, ct_process --- */
@media (max-width: 1129px) {

    /* Masquer nav desktop */
    .wp-block-navigation > .wp-block-navigation__container,
    .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__container {
        display: none !important;
    }

    /* Bouton hamburger */
    .wp-block-navigation__responsive-container-open {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: var(--bg-3) !important;
        border: 1px solid var(--border-color) !important;
        border-radius: 8px !important;
        min-width: 44px !important;
        min-height: 44px !important;
        padding: 10px 12px !important;
        cursor: pointer !important;
        color: var(--text-color) !important;
    }

    .wp-block-navigation__responsive-container-open svg {
        width: 20px !important;
        height: 14px !important;
    }

    /* Toujours dans le DOM → transition open/close possible (override WP display:none) */
    .wp-block-navigation__responsive-container {
        display: block !important;
        pointer-events: none !important;
        position: fixed !important;
        inset: 0 !important;
        background: transparent !important;
        z-index: 99998 !important;
        overflow: visible !important;
        transition: background 0.45s ease !important;
    }

    /* Backdrop */
    .wp-block-navigation__responsive-container.is-menu-open {
        pointer-events: auto !important;
        width: 100vw !important;
        height: 100dvh !important;
        background: rgba(0, 0, 0, 0.55) !important;
        padding: 0 !important;
        box-sizing: border-box !important;
        touch-action: none !important;
    }

    .wp-block-navigation__responsive-close {
        display: contents !important;
    }

    /* Panel slide depuis la droite */
    .wp-block-navigation__responsive-dialog {
        position: fixed !important;
        top: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: min(340px, 100vw) !important;
        background: var(--bg-color) !important;
        transform: translateX(110%) !important;
        /* Sortie : ease-in rapide */
        transition: transform 0.32s cubic-bezier(0.55, 0, 1, 0.45) !important;
        z-index: 99999 !important;
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important;
        overscroll-behavior: contain !important;
    }

    /* Entrée : ease-out-expo plus ample */
    .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog {
        transform: translateX(0) !important;
        transition: transform 0.55s cubic-bezier(0.16, 1, 0.3, 1) !important;
    }

    /* Bouton fermer : caché quand le panel est fermé */
    .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__responsive-container-close {
        display: none !important;
    }

    /* Bouton fermer = header row du panel */
    .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
        position: static !important;
        display: flex !important;
        width: 100% !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding: 20px 24px !important;
        border-top: none !important;
        border-left: none !important;
        border-right: none !important;
        border-bottom: 1px solid var(--border-color) !important;
        border-radius: 0 !important;
        background: none !important;
        color: var(--text-color) !important;
        cursor: pointer !important;
        flex-shrink: 0 !important;
        font-family: inherit !important;
        box-sizing: border-box !important;
    }

    .wp-block-navigation__responsive-container-close svg {
        width: 20px !important;
        height: 20px !important;
    }

    /* Zone scroll des items */
    .wp-block-navigation__responsive-container-content {
        flex: 1 !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        padding: 0 !important;
        background: none !important;
        display: flex !important;
        flex-direction: column !important;
    }

    /* Liste nav */
    .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container,
    .wp-block-navigation__responsive-container.is-menu-open ul.main-nav-custom {
        flex-direction: column !important;
        flex-wrap: nowrap !important;
        gap: 0 !important;
        align-items: stretch !important;
        justify-content: flex-start !important;
        width: 100% !important;
        padding: 0 !important;
    }

    /* Stagger : état de départ — sortie rapide */
    .wp-block-navigation__responsive-container .wp-block-navigation-item {
        opacity: 0;
        transform: translateX(16px);
        transition: opacity 0.14s ease-in, transform 0.14s ease-in;
    }

    /* Stagger : entrée — démarre après le panel (260ms), 50ms entre items */
    .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
        opacity: 1;
        transform: translateX(0);
        width: calc(100% - 24px) !important;
        margin-inline: 12px !important;
        text-align: left !important;
        transition: opacity  0.4s cubic-bezier(0.0, 0.0, 0.2, 1) calc(var(--nav-i, 0) * 50ms + 260ms),
                    transform 0.4s cubic-bezier(0.0, 0.0, 0.2, 1) calc(var(--nav-i, 0) * 50ms + 260ms) !important;
    }

    /* Lien item */
    .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
        display: flex !important;
        align-items: center !important;
        gap: 16px !important;
        padding: 16px !important;
        border-bottom: 1px solid var(--border-color) !important;
        border-radius: 6px !important;
        text-decoration: none !important;
        color: var(--text-color) !important;
        width: 100% !important;
        min-height: 0 !important;
        font-size: inherit !important;
        font-weight: inherit !important;
        letter-spacing: 0 !important;
        justify-content: flex-start !important;
        transition: background 0.18s ease !important;
    }

    .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:hover {
        background: var(--bg-3) !important;
    }

    /* ct_service — empilement vertical tablette */
    .ct_service .wp-block-columns {
        flex-direction: column !important;
        gap: 0 !important;
        row-gap: 0 !important;
        --wp--style--block-gap: 0px;
        align-items: stretch !important;
    }

    .ct_service .wp-block-column {
        width: 100% !important;
        max-width: 100% !important;
        flex-basis: auto !important;
        margin-block: 0 !important;
        box-sizing: border-box !important;
    }

    .ct_service .wp-block-column:first-child { border-radius: 10px 10px 0 0 !important; }
    .ct_service .wp-block-column:last-child  { border-radius: 0 0 10px 10px !important; }

    .ct_service .wp-block-column > .wp-block-group {
        border-radius: 0 !important;
    }

    .ct_service .wp-block-column:last-child .is-nowrap {
        flex-direction: column !important;
        flex-wrap: wrap !important;
        width: 100% !important;
        gap: 24px !important;
    }

    .ct_service .wp-block-column:last-child .is-nowrap > .wp-block-column {
        width: 100% !important;
        flex-basis: auto !important;
    }

    /* Hover désactivé sur tablette (ct_service est aussi card-hover-yellow) */
    .card-hover-yellow.ct_service:hover {
        transform: none !important;
        box-shadow: none !important;
    }

    /* ct_process — empilement vertical tablette
       flex-basis: auto écrase WP core @min-width:782px qui force flex-basis:0 */
    .wp-block-columns:has(> .wp-block-column.ct_process) {
        flex-direction: column !important;
        gap: 0 !important;
        row-gap: 0 !important;
        --wp--style--block-gap: 0px;
    }

    .wp-block-column.ct_process {
        border-radius: 0 !important;
        margin-block: 0 !important;
        flex-basis: auto !important;
    }

    .wp-block-column.ct_process:first-child { border-radius: 10px 10px 0 0 !important; }
    .wp-block-column.ct_process:last-child  { border-radius: 0 0 10px 10px !important; }
}

/* --- ≤ 1024px --- */
@media (max-width: 1024px) {
    .project-grid-container[data-columns="3"] .project-grid { grid-template-columns: repeat(2, 1fr) !important; }
}

/* --- ≤ 992px --- */
@media (max-width: 992px) {
    .project-grid-container[data-columns="4"] .project-grid { grid-template-columns: repeat(2, 1fr) !important; }
}

/* --- ≤ 900px --- */
@media (max-width: 900px) {
    .ct-video-grid .ct-masonry-grid { columns: 2; }
}

/* --- ≤ 768px --- */
@media (max-width: 768px) {

    /* Logo */
    .wp-block-site-logo img,
    .custom-logo-link img {
        width: 180px !important;
        height: auto !important;
        max-width: 180px !important;
    }

    /* Annule le padding-left WP inline sur le wrapper du bouton CTA */
    header .wp-block-buttons {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* Bouton header → carré 44×44 avec flèche unicode */
    header .wp-block-button {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex-shrink: 0 !important;
    }

    header .wp-block-button .wp-block-button__link {
        font-size: 0 !important;
        width: 44px !important;
        height: 44px !important;
        padding: 0 !important;
        line-height: 1 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 12px !important;
    }

    header .wp-block-button .wp-block-button__link::after { content: none !important; }

    header .wp-block-button .wp-block-button__link .ct-cta-icon {
        display: inline-flex !important;
        font-size: 22px !important;
        line-height: 1 !important;
    }

    header .wp-block-button .wp-block-button__link .ct-cta-text {
        display: none !important;
    }

    /* Toggle thème — taille tactile minimale */
    .theme-toggle-btn,
    a.theme-toggle-btn.custom-icon-link {
        min-width: 44px !important;
        min-height: 44px !important;
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
    }

    header button {
        min-height: 44px;
    }

    /* Padding global réduit */
    .has-global-padding {
        --wp--style--root--padding-left: 20px;
        --wp--style--root--padding-right: 20px;
        padding-left: 20px !important;
        padding-right: 20px !important;
    }

    /* Fix padding cumulé dans les groupes imbriqués */
    .wp-block-column .has-global-padding,
    .wp-block-group.is-layout-flex > .wp-block-group > .has-global-padding,
    .wp-block-group.is-layout-flex > .wp-block-group.has-global-padding {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* Fix single-projet — post-content fournit déjà le gutter */
    .single-projet .wp-block-post-content .wp-block-group.has-global-padding {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .single-projet .wp-block-post-content {
        --wp--style--root--padding-left: 16px;
        --wp--style--root--padding-right: 16px;
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    /* Section alignfull avec background → padding réduit
       margin-left/right NON overridés : les marges négatives alignfull de WP doivent rester */
    .wp-block-group.alignfull.has-background.is-layout-flex:not(.radial-glow) {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }

    main > .wp-block-group:first-child > .wp-block-group,
    main > .wp-block-cover .wp-block-cover__inner-container > :not(.has-global-padding) {
        padding-inline: clamp(20px, 5vw, 30px);
    }

    .wp-site-blocks,
    main {
        overflow-x: hidden;
    }

    /* Fix WP core injecte overflow-y:auto + height calculée sur les groupes flex stretch
       → scrollbar visible sur la grille projets (430px : vole 17px de largeur) */
    .wp-block-group.is-layout-flex.is-content-justification-stretch:has(.project-grid-container) {
        overflow: visible !important;
        height: auto !important;
    }

    /* Logos clients → grid 2×2 (classe "logos-grid" à ajouter dans l'éditeur) */
    .logos-grid,
    .wp-block-columns.logos-grid,
    .wp-block-group.logos-grid {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 16px !important;
        flex-wrap: unset !important;
        justify-items: center !important;
        align-items: center !important;
    }

    .logos-grid > .wp-block-column,
    .logos-grid > * {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        width: 100% !important;
        max-width: 100% !important;
        flex-basis: unset !important;
        flex: none !important;
        min-width: 0 !important;
    }

    /* KPI → grid 2×2 centré */
    .wp-block-group:has(> .wp-block-group.is-vertical.is-nowrap > .kpi-number) {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 20px !important;
        width: 100% !important;
        max-width: 340px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    .wp-block-group.is-vertical.is-nowrap:has(> .kpi-number) {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center;
        max-width: none !important;
    }

    .kpi-number {
        font-size: clamp(2rem, 8vw, 2.8rem) !important;
        text-align: center !important;
    }

    /* KPI certif drone-fpv (is-content-justification-left.is-nowrap) */
    .wp-block-group.is-content-justification-left.is-nowrap:has(.kpi-number) {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        max-width: 340px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        gap: 16px !important;
    }

    /* Variante 3 KPI sur une ligne — classe à ajouter sur le bloc parent dans FSE */
    .wp-block-group:has(> .wp-block-group.is-vertical.is-nowrap > .kpi-number).kpi-row-3,
    .wp-block-group.is-content-justification-left.is-nowrap:has(.kpi-number).kpi-row-3,
    .kpi-row-3 {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 12px !important;
        max-width: none !important;
        /* Compense le padding du parent .has-global-padding (20px chaque côté) */
        width: calc(100% + 40px) !important;
        margin-left: -20px !important;
        margin-right: -20px !important;
    }

    .kpi-row-3 .kpi-number {
        font-size: clamp(1.4rem, 5.5vw, 2rem) !important;
        white-space: nowrap !important;
    }

    .wp-block-group.alignfull.radial-glow {
        overflow: hidden !important;
    }

    /* Services → colonne (exclut .ct_service qui gère son propre gap à 0) */
    .wp-block-group.is-layout-flex:has(> .wp-block-group.card-hover-yellow:not(.glow-hover)):not(.ct_service),
    .wp-block-group:has(> .card-hover-yellow:not(.glow-hover)):not(.ct_service) {
        flex-direction: column !important;
        gap: 20px !important;
        align-items: stretch !important;
    }

    .ct_service,
    .ct_service .wp-block-columns {
        gap: 0 !important;
        row-gap: 0 !important;
        --wp--style--block-gap: 0px;
    }

    .wp-block-group.card-hover-yellow:not(.glow-hover) {
        width: 100% !important;
        max-width: 100% !important;
        flex: 1 1 100% !important;
    }

    /* Pills profil hybride (glow-hover) → ligne horizontale avec retour */
    .wp-block-group.is-layout-flex:has(> .wp-block-group.card-hover-yellow.glow-hover) {
        flex-direction: row !important;
        flex-wrap: wrap !important;
        gap: 12px !important;
        align-items: stretch !important;
    }

    .wp-block-group.card-hover-yellow.glow-hover {
        width: auto !important;
        flex: 0 1 auto !important;
    }

    /* Section ABOUT : hero row → colonne */
    .is-layout-flex:has(> .wp-block-image) {
        flex-direction: column !important;
        flex-wrap: wrap !important;
        align-items: center !important;
    }

    .is-layout-flex:has(> .wp-block-image) > * {
        width: 100% !important;
        max-width: 100% !important;
        flex-basis: 100% !important;
        min-width: 0 !important;
    }

    /* Contact — boîtes info */
    .contact-info-boxes {
        grid-template-columns: 1fr;
    }

    .contact-box-square {
        aspect-ratio: auto;
        padding: 2rem;
    }

    /* Masonry → 2 colonnes */
    .ct-masonry-grid { columns: 2; }

    /* Lightbox — boutons nav */
    .ct-lightbox-prev { left: 0.5rem; }
    .ct-lightbox-next { right: 0.5rem; }

    .ct-lightbox-prev,
    .ct-lightbox-next {
        width: 40px;
        height: 40px;
        font-size: 1.5rem;
    }

    .ct-lightbox-video-player { width: 95vw; }

    /* Lightbox — tailles tactiles minimales */
    .ct-lightbox-close,
    .ct-lightbox-prev,
    .ct-lightbox-next {
        min-width: 44px !important;
        min-height: 44px !important;
        padding: 8px !important;
        display: flex !important;
        align-items: center;
        justify-content: center;
    }

    .ct-lightbox-close {
        top: 16px !important;
        right: 16px !important;
        font-size: 32px !important;
    }

    .ct-lightbox-prev { left: 8px !important; }
    .ct-lightbox-next { right: 8px !important; }

    .ct-lightbox-counter {
        font-size: 14px !important;
        padding: 4px 12px !important;
        background: rgba(0, 0, 0, .6);
        border-radius: 12px;
    }

    .ct-lightbox-caption,
    .ct-lightbox-description {
        padding-inline: 16px;
        max-width: 100%;
    }

    .ct-lightbox-description {
        font-size: .85rem !important;
        line-height: 1.5;
    }

    /* Single projet — colonnes et row groups */
    .single-projet .wp-block-post-content .wp-block-columns {
        flex-direction: column !important;
        flex-wrap: wrap !important;
    }

    .single-projet .wp-block-post-content .wp-block-columns > .wp-block-column {
        flex-basis: 100% !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    .single-projet .wp-block-post-content .wp-block-group.is-nowrap.is-layout-flex {
        flex-direction: column !important;
        flex-wrap: wrap !important;
        align-items: stretch !important;
    }

    .single-projet .wp-block-post-content .wp-block-group.is-nowrap.is-layout-flex > .wp-block-group {
        width: 100% !important;
        max-width: 100% !important;
        flex: none !important;
        min-width: 0 !important;
    }

    .single-projet .wp-block-post-content figure.wp-block-image img {
        width: 100% !important;
        height: auto !important;
        display: block !important;
    }

    /* Page contact — formulaire en premier */
    .page-id-30 .wp-block-columns .wp-block-column:nth-child(1) { order: 2; }
    .page-id-30 .wp-block-columns .wp-block-column:nth-child(2) { order: 1; }

    /* Page à propos — hero row → colonne */
    .page-id-34 section.wp-block-group.alignwide.is-content-justification-center.is-nowrap.is-layout-flex {
        flex-direction: column !important;
        align-items: stretch !important;
    }

    .page-id-34 section.wp-block-group.alignwide.is-content-justification-center.is-nowrap.is-layout-flex > * {
        width: 100% !important;
        max-width: 100% !important;
        flex: none !important;
        min-width: 0 !important;
    }

    .page-id-34 section.wp-block-group.alignwide.is-content-justification-center.is-nowrap figure.wp-block-image,
    .page-id-34 section.wp-block-group.alignwide.is-content-justification-center.is-nowrap figure.wp-block-image img {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        display: block !important;
    }

    /* Page à propos — pills héro → grille 2 colonnes */
    .page-id-34 section.wp-block-group.alignwide.is-content-justification-center.is-nowrap > div.wp-block-group.is-vertical > div.wp-block-group.is-layout-flex {
        display: grid !important;
        grid-template-columns: repeat(2, max-content) !important;
        gap: 8px 12px !important;
        align-items: start !important;
        flex-wrap: unset !important;
    }
}

/* --- ≤ 600px — header compact --- */
@media (max-width: 600px) {
    .wp-block-site-logo img {
        width: 165px !important;
        max-width: none;
    }

    .main-nav-custom .wp-block-buttons {
        padding-left: 0.5rem !important;
    }

    .main-nav-custom .wp-block-button__link {
        font-size: 0.7rem !important;
        padding-top: 0.5rem !important;
        padding-bottom: 0.5rem !important;
        padding-right: 0.75rem !important;
        padding-left: 0.75rem !important;
        white-space: nowrap;
    }

    .theme-toggle-btn {
        font-size: 1.2rem !important;
        padding: 0.25rem !important;
    }
}

/* --- ≤ 560px --- */
@media (max-width: 560px) {
    .project-grid-container[data-columns="3"] .project-grid,
    .project-grid-container[data-columns="4"] .project-grid { grid-template-columns: 1fr !important; }
}

/* --- ≤ 480px --- */
@media (max-width: 480px) {
    .has-global-padding {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }

    .kpi-number {
        font-size: 1.9rem !important;
    }

    main h1 {
        font-size: clamp(2rem, 10vw, 2.8rem) !important;
        line-height: 1 !important;
    }

    /* Masonry et vidéo → 1 colonne */
    .ct-masonry-grid,
    .ct-video-grid .ct-masonry-grid { columns: 1; }
}

/* --- ≤ 600px — FAB pack photos compact --- */
@media (max-width: 600px) {
    .ct-pack-fab-wrapper {
        right: 16px;
        bottom: 16px;
    }

    .ct-pack-fab {
        width: 56px;
        height: 56px;
    }

    .ct-pack-option a {
        padding: 8px 14px;
        font-size: 0.8rem;
    }

    .ct-pack-fab.is-direct {
        right: 16px;
        bottom: 16px;
        width: 56px;
        height: 56px;
        padding: 0;
        justify-content: center;
    }

    .ct-pack-fab.is-direct .ct-pack-label { display: none; }
}

/* ============================================================
   HEADER — une seule ligne en toutes tailles d'écran.
   WP core bascule is-layout-flex en column sur mobile →
   on force row sur la row principale du header uniquement.
   flex-shrink:1 sur le logo = il peut rétrécir pour laisser
   la place aux contrôles (hamburger + CTA + toggle).
   ============================================================ */
header.wp-block-template-part .alignwide.is-nowrap.is-layout-flex {
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: space-between !important;
}

header.wp-block-template-part .wp-block-site-logo,
header.wp-block-template-part .logo-dark,
header.wp-block-template-part figure.logo-light {
    flex-grow: 0 !important;
    flex-shrink: 1 !important;
    flex-basis: auto !important;  /* prend la taille naturelle, peut rétrécir si besoin */
    min-width: 0 !important;
    overflow: hidden !important;
}

/* ============================================================
   FOOTER — colonne unique sur mobile.
   Cible les flex directs enfants du wrapper contraint →
   icônes sociales (flex imbriqués plus profonds) non touchées.
   ============================================================ */
@media (max-width: 768px) {
    footer.wp-block-template-part .is-layout-constrained > .is-layout-flex,
    footer.wp-block-template-part .is-layout-constrained > .wp-block-columns {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 2rem !important;
    }

    footer.wp-block-template-part .wp-block-column {
        width: 100% !important;
        flex-basis: 100% !important;
        margin-block: 0 !important;
    }
}