/* ============================================================
   director.css — Section "Mot du Directeur"
   Design Céleste · Hypnotisant · Professionnel
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,600;0,700;1,400;1,600&family=DM+Sans:wght@300;400;500;600&display=swap');

/* ── VARIABLES CÉLESTES ─────────────────────────────────────── */
:root {
    --cel-void:        #04061a;
    --cel-deep:        #080c2e;
    --cel-mid:         #0d1550;
    --cel-azure:       #1a3aff;
    --cel-sky:         #4d8bff;
    --cel-ice:         #a8c8ff;
    --cel-pearl:       #e8f2ff;
    --cel-gold:        #c8a84b;
    --cel-gold-light:  #f0d080;
    --cel-white:       #ffffff;
    --cel-glow:        rgba(77,139,255,.45);
    --cel-glow-soft:   rgba(77,139,255,.12);
}

/* ── RESET ──────────────────────────────────────────────────── */
.director-section,
.director-section *,
.director-section *::before,
.director-section *::after {
    box-sizing: border-box;
}

/* ── ANTI-CONFLIT GLOBAL : force toutes les couleurs de texte
   à être visibles sur fond sombre, écrase style.css parent ── */
.director-section p,
.director-section h1,
.director-section h2,
.director-section h3,
.director-section h4,
.director-section h5,
.director-section h6,
.director-section span,
.director-section div,
.director-section blockquote,
.director-section li,
.director-section a {
    color: inherit !important;
}

/* Texte de base de la section : blanc cassé sur fond sombre */
.director-section {
    color: rgba(232,242,255,.88) !important;
}

/* Force spécifique sur les éléments qui doivent avoir leur propre couleur */
.director-section blockquote.director-quote-text {
    color: rgba(232,242,255,.88) !important;
    font-family: 'Cormorant Garamond', serif !important;
    font-style: italic !important;
    font-size: 1.15rem !important;
    line-height: 1.85 !important;
}

.director-section .director-name {
    color: #ffffff !important;
}

.director-section .director-role-text {
    color: rgba(168,200,255,.75) !important;
}

.director-section .director-pillar-title {
    color: #a8c8ff !important;
}

.director-section .director-pillar-desc {
    color: rgba(168,200,255,.55) !important;
}

.director-section .director-sig-name {
    color: #ffffff !important;
}

.director-section .director-sig-role {
    color: rgba(168,200,255,.55) !important;
}

.director-section .director-eyebrow-text {
    color: #4d8bff !important;
}

.director-section .director-constellation-badge .badge-num {
    color: #c8a84b !important;
}

.director-section .director-constellation-badge .badge-lbl {
    color: rgba(168,200,255,.6) !important;
}

.director-section .director-constellation-badge .badge-star {
    color: #c8a84b !important;
}

.director-section .director-status-badge span.status-txt {
    color: rgba(168,200,255,.8) !important;
}

.director-section .director-mission-badge p {
    color: rgba(168,200,255,.75) !important;
}

.director-section .director-title-badge {
    color: #ffffff !important;
}

.director-section .director-linkedin-btn {
    color: rgba(168,200,255,.8) !important;
}

.director-section .director-linkedin-btn:hover {
    color: #ffffff !important;
}

/* ── SECTION ────────────────────────────────────────────────── */
.director-section {
    position: relative !important;
    padding: 8rem 0 !important;
    background: var(--cel-void) !important;
    overflow: hidden !important;
    font-family: 'DM Sans', sans-serif !important;
}

/* ── CANVAS ÉTOILES ────────────────────────────────────────── */
.director-starfield {
    position: absolute !important;
    inset: 0 !important;
    pointer-events: none !important;
    z-index: 0 !important;
    overflow: hidden !important;
}

/* Génération d'étoiles via box-shadow multiple */
.director-stars-sm,
.director-stars-md,
.director-stars-lg {
    position: absolute !important;
    border-radius: 50% !important;
    background: transparent !important;
    animation: dirStarDrift linear infinite !important;
}
.director-stars-sm {
    width: 1px !important; height: 1px !important;
    box-shadow:
            120px 85px rgba(255,255,255,.6),  380px 42px rgba(200,220,255,.5),
            630px 120px rgba(255,255,255,.4), 900px 65px rgba(180,210,255,.7),
            1150px 30px rgba(255,255,255,.5), 1380px 95px rgba(200,230,255,.4),
            240px 300px rgba(255,255,255,.5), 510px 250px rgba(180,210,255,.6),
            760px 320px rgba(255,255,255,.3), 1020px 280px rgba(200,220,255,.5),
            1250px 340px rgba(255,255,255,.4),  70px 450px rgba(180,210,255,.5),
            320px 510px rgba(255,255,255,.6),  580px 470px rgba(200,230,255,.3),
            830px 540px rgba(255,255,255,.5), 1100px 490px rgba(180,210,255,.4),
            1320px 560px rgba(255,255,255,.6),  160px 650px rgba(200,220,255,.4),
            440px 700px rgba(255,255,255,.5),  700px 670px rgba(180,210,255,.6),
            950px 720px rgba(200,230,255,.3), 1200px 680px rgba(255,255,255,.5) !important;
    animation-duration: 120s !important;
    top: -1px !important;
}
.director-stars-md {
    width: 2px !important; height: 2px !important;
    box-shadow:
            90px 150px rgba(168,200,255,.7),  350px 200px rgba(255,255,255,.5),
            600px 170px rgba(200,220,255,.6),  870px 220px rgba(168,200,255,.8),
            1100px 165px rgba(255,255,255,.5), 1350px 240px rgba(200,230,255,.6),
            200px 400px rgba(168,200,255,.7),  480px 420px rgba(255,255,255,.4),
            730px 380px rgba(200,220,255,.7),  980px 440px rgba(168,200,255,.5),
            1230px 410px rgba(255,255,255,.6),  50px 580px rgba(200,230,255,.7),
            280px 620px rgba(168,200,255,.5),  530px 590px rgba(255,255,255,.6),
            780px 640px rgba(200,220,255,.4), 1030px 600px rgba(168,200,255,.7) !important;
    animation-duration: 90s !important;
    top: -2px !important;
}
.director-stars-lg {
    width: 3px !important; height: 3px !important;
    box-shadow:
            170px 110px rgba(255,255,255,.9),  450px 80px rgba(200,220,255,.7),
            720px 140px rgba(255,255,255,.8),  990px 95px rgba(168,200,255,.9),
            1260px 130px rgba(255,255,255,.7),  310px 360px rgba(200,230,255,.8),
            660px 330px rgba(255,255,255,.9),  980px 380px rgba(168,200,255,.7),
            1190px 350px rgba(255,255,255,.8),  80px 540px rgba(200,220,255,.9),
            460px 580px rgba(168,200,255,.7),  800px 555px rgba(255,255,255,.8) !important;
    animation-duration: 60s !important;
    top: -3px !important;
}

@keyframes dirStarDrift {
    from { transform: translateY(0); }
    to   { transform: translateY(800px); }
}

/* ── NÉBULEUSES ─────────────────────────────────────────────── */
.director-nebula {
    position: absolute !important;
    pointer-events: none !important;
    border-radius: 50% !important;
}
.director-nebula-1 {
    top: -200px !important; right: -150px !important;
    width: 700px !important; height: 700px !important;
    background: radial-gradient(circle at 40% 40%,
    rgba(26,58,255,.22) 0%,
    rgba(77,139,255,.10) 40%,
    transparent 70%) !important;
    animation: dirPulse 8s ease-in-out infinite alternate !important;
    z-index: 1 !important;
}
.director-nebula-2 {
    bottom: -180px !important; left: -100px !important;
    width: 600px !important; height: 600px !important;
    background: radial-gradient(circle at 60% 60%,
    rgba(200,168,75,.14) 0%,
    rgba(77,139,255,.07) 45%,
    transparent 70%) !important;
    animation: dirPulse 11s ease-in-out infinite alternate-reverse !important;
    z-index: 1 !important;
}
.director-nebula-3 {
    top: 50% !important; left: 50% !important;
    transform: translate(-50%,-50%) !important;
    width: 900px !important; height: 500px !important;
    background: radial-gradient(ellipse at center,
    rgba(26,58,255,.06) 0%,
    transparent 65%) !important;
    z-index: 1 !important;
}

@keyframes dirPulse {
    from { opacity: .7; transform: scale(1); }
    to   { opacity: 1; transform: scale(1.06); }
}

/* ── GRILLE COSMIQUE ────────────────────────────────────────── */
.director-grid-lines {
    position: absolute !important;
    inset: 0 !important;
    z-index: 1 !important;
    pointer-events: none !important;
    background-image:
            linear-gradient(rgba(77,139,255,.04) 1px, transparent 1px),
            linear-gradient(90deg, rgba(77,139,255,.04) 1px, transparent 1px) !important;
    background-size: 80px 80px !important;
}

/* ── CONTAINER ──────────────────────────────────────────────── */
.director-section .container {
    position: relative !important;
    z-index: 10 !important;
}

/* ═══════════════════════════════════════════════════════════
   COLONNE PHOTO
═══════════════════════════════════════════════════════════ */

.director-col-photo {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    padding: 20px 40px 60px 10px !important;
    overflow: visible !important;
}

.director-photo-wrap {
    position: relative !important;
    display: inline-block !important;
    overflow: visible !important;
}

/* Anneau orbital tournant */
.director-orbit-ring {
    position: absolute !important;
    top: 50% !important; left: 50% !important;
    width: 380px !important; height: 380px !important;
    border-radius: 50% !important;
    border: 1px solid rgba(77,139,255,.18) !important;
    transform: translate(-50%,-50%) !important;
    animation: dirOrbitSpin 20s linear infinite !important;
    pointer-events: none !important;
    z-index: 1 !important;
}
.director-orbit-ring::before {
    content: '' !important;
    position: absolute !important;
    top: -4px !important; left: calc(50% - 4px) !important;
    width: 8px !important; height: 8px !important;
    background: var(--cel-gold) !important;
    border-radius: 50% !important;
    box-shadow: 0 0 12px var(--cel-gold), 0 0 24px rgba(200,168,75,.5) !important;
}
.director-orbit-ring-2 {
    position: absolute !important;
    top: 50% !important; left: 50% !important;
    width: 430px !important; height: 430px !important;
    border-radius: 50% !important;
    border: 1px dashed rgba(77,139,255,.10) !important;
    transform: translate(-50%,-50%) !important;
    animation: dirOrbitSpin 35s linear infinite reverse !important;
    pointer-events: none !important;
    z-index: 1 !important;
}
.director-orbit-ring-2::before {
    content: '' !important;
    position: absolute !important;
    bottom: -3px !important; left: calc(50% - 3px) !important;
    width: 6px !important; height: 6px !important;
    background: var(--cel-sky) !important;
    border-radius: 50% !important;
    box-shadow: 0 0 10px var(--cel-sky) !important;
}

@keyframes dirOrbitSpin {
    from { transform: translate(-50%,-50%) rotate(0deg); }
    to   { transform: translate(-50%,-50%) rotate(360deg); }
}

/* Halo lumineux derrière la photo */
.director-photo-halo {
    position: absolute !important;
    top: 50% !important; left: 50% !important;
    width: 320px !important; height: 320px !important;
    transform: translate(-50%,-50%) !important;
    background: radial-gradient(circle,
    rgba(26,58,255,.30) 0%,
    rgba(77,139,255,.15) 40%,
    transparent 70%) !important;
    border-radius: 50% !important;
    pointer-events: none !important;
    z-index: 2 !important;
    animation: dirHaloBreathe 6s ease-in-out infinite !important;
}
@keyframes dirHaloBreathe {
    0%,100% { transform: translate(-50%,-50%) scale(1); opacity: .8; }
    50%      { transform: translate(-50%,-50%) scale(1.12); opacity: 1; }
}

/* Cadre photo */
.director-photo-frame {
    position: relative !important;
    z-index: 5 !important;
    width: 280px !important;
    height: 360px !important;
    border-radius: 32px 32px 60px 60px !important;
    overflow: hidden !important;
    background: linear-gradient(160deg, var(--cel-mid), var(--cel-deep)) !important;
    box-shadow:
            0 0 0 1px rgba(77,139,255,.25),
            0 0 0 3px rgba(77,139,255,.08),
            0 40px 100px rgba(0,0,30,.8),
            0 0 60px rgba(26,58,255,.3) !important;
}
/* Bordure dégradée lumineuse */
.director-photo-frame::before {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    border-radius: inherit !important;
    padding: 1.5px !important;
    background: linear-gradient(160deg,
    rgba(200,168,75,.9), rgba(77,139,255,.6),
    rgba(26,58,255,.4), rgba(200,168,75,.3)) !important;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0) !important;
    -webkit-mask-composite: xor !important;
    mask-composite: exclude !important;
    pointer-events: none !important;
    z-index: 10 !important;
}
/* Reflet lumière en haut */
.director-photo-frame::after {
    content: '' !important;
    position: absolute !important;
    top: 0 !important; left: 20% !important;
    width: 60% !important; height: 35% !important;
    background: linear-gradient(180deg, rgba(255,255,255,.08), transparent) !important;
    border-radius: 0 0 50% 50% !important;
    z-index: 8 !important;
    pointer-events: none !important;
}
.director-photo-frame img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: top center !important;
    display: block !important;
}
.director-photo-placeholder {
    width: 100% !important; height: 100% !important;
    background: linear-gradient(160deg, var(--cel-mid), #0a1040) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}
.director-photo-placeholder .material-icons-round {
    font-size: 96px !important;
    color: rgba(77,139,255,.25) !important;
}

/* ── Badge CONSTELLATION (coin haut gauche) ──────────────────── */
.director-constellation-badge {
    position: absolute !important;
    top: -18px !important; left: -24px !important;
    z-index: 20 !important;
    background: linear-gradient(135deg, rgba(8,12,46,.95), rgba(13,21,80,.95)) !important;
    border: 1px solid rgba(200,168,75,.35) !important;
    border-radius: 16px !important;
    padding: 10px 14px !important;
    backdrop-filter: blur(10px) !important;
    box-shadow: 0 8px 32px rgba(0,0,20,.6), 0 0 20px rgba(200,168,75,.15) !important;
    min-width: 80px !important;
    text-align: center !important;
    overflow: visible !important;
}
.director-constellation-badge .badge-star {
    font-size: 1.6rem !important;
    line-height: 1 !important;
    display: block !important;
    margin-bottom: 4px !important;
}
.director-constellation-badge .badge-num {
    font-family: 'Cormorant Garamond', serif !important;
    font-size: 1.4rem !important;
    font-weight: 700 !important;
    color: var(--cel-gold) !important;
    line-height: 1 !important;
    display: block !important;
}
.director-constellation-badge .badge-lbl {
    font-size: .58rem !important;
    color: rgba(168,200,255,.6) !important;
    text-transform: uppercase !important;
    letter-spacing: 1.2px !important;
    display: block !important;
    margin-top: 2px !important;
}

/* ── Badge STATUT (haut droit) ───────────────────────────────── */
.director-status-badge {
    position: absolute !important;
    top: 24px !important; right: -28px !important;
    z-index: 20 !important;
    background: linear-gradient(135deg, rgba(8,12,46,.95), rgba(13,21,80,.95)) !important;
    border: 1px solid rgba(77,139,255,.3) !important;
    border-radius: 50px !important;
    padding: 7px 14px 7px 10px !important;
    backdrop-filter: blur(10px) !important;
    box-shadow: 0 8px 24px rgba(0,0,20,.5) !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    white-space: nowrap !important;
    overflow: visible !important;
}
.director-status-dot {
    width: 8px !important; height: 8px !important;
    border-radius: 50% !important;
    background: #3dffb0 !important;
    flex-shrink: 0 !important;
    box-shadow: 0 0 8px #3dffb0, 0 0 16px rgba(61,255,176,.5) !important;
    animation: dirDotBlink 2s ease-in-out infinite !important;
}
@keyframes dirDotBlink {
    0%,100% { opacity: 1; }
    50%      { opacity: .4; }
}
.director-status-badge span.status-txt {
    font-size: .68rem !important;
    color: rgba(168,200,255,.8) !important;
    font-weight: 500 !important;
    letter-spacing: .4px !important;
}

/* ── Badge MISSION (bas gauche) ──────────────────────────────── */
.director-mission-badge {
    position: absolute !important;
    bottom: 50px !important; left: -32px !important;
    z-index: 20 !important;
    background: linear-gradient(135deg, rgba(8,12,46,.95), rgba(13,21,80,.95)) !important;
    border: 1px solid rgba(77,139,255,.25) !important;
    border-radius: 16px !important;
    padding: 12px 15px !important;
    max-width: 170px !important;
    width: 170px !important;
    backdrop-filter: blur(10px) !important;
    box-shadow: 0 8px 32px rgba(0,0,20,.6) !important;
    overflow: visible !important;
}
.director-mission-icon {
    width: 30px !important; height: 30px !important;
    border-radius: 8px !important;
    background: linear-gradient(135deg, var(--cel-azure), var(--cel-sky)) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-bottom: 8px !important;
    box-shadow: 0 4px 12px rgba(26,58,255,.4) !important;
}
.director-mission-icon .material-icons-round {
    font-size: 16px !important;
    color: #fff !important;
}
.director-mission-badge p {
    font-size: .68rem !important;
    color: rgba(168,200,255,.75) !important;
    margin: 0 !important;
    line-height: 1.5 !important;
    font-weight: 400 !important;
}

/* ── Badge TITRE (bas centré) ────────────────────────────────── */
.director-title-badge {
    position: absolute !important;
    bottom: -22px !important;
    left: 50% !important; right: auto !important;
    transform: translateX(-50%) !important;
    z-index: 20 !important;
    background: linear-gradient(90deg, var(--cel-azure), #3a6fff, var(--cel-sky)) !important;
    background-size: 200% 100% !important;
    color: #fff !important;
    border-radius: 50px !important;
    padding: 9px 20px !important;
    font-size: .72rem !important;
    font-weight: 600 !important;
    letter-spacing: .5px !important;
    white-space: nowrap !important;
    display: flex !important;
    align-items: center !important;
    gap: 7px !important;
    box-shadow: 0 6px 24px rgba(26,58,255,.55), 0 0 40px rgba(77,139,255,.25) !important;
    animation: dirBadgeShimmer 4s ease-in-out infinite !important;
}
@keyframes dirBadgeShimmer {
    0%,100% { background-position: 0% 50%; }
    50%      { background-position: 100% 50%; }
}
.director-title-badge .material-icons-round {
    font-size: 15px !important;
    color: var(--cel-gold-light) !important;
}

/* ═══════════════════════════════════════════════════════════
   COLONNE TEXTE
═══════════════════════════════════════════════════════════ */

.director-col-text {
    padding-left: 2rem !important;
    overflow: visible !important;
}

/* Label Supérieur */
.director-eyebrow {
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    margin-bottom: 1.6rem !important;
    overflow: visible !important;
}
.director-eyebrow-line {
    display: flex !important;
    align-items: center !important;
    gap: 5px !important;
}
.director-eyebrow-line span {
    display: block !important;
    height: 1px !important;
    background: linear-gradient(90deg, transparent, var(--cel-sky), transparent) !important;
}
.director-eyebrow-line span:nth-child(1) { width: 20px !important; opacity: .4 !important; }
.director-eyebrow-line span:nth-child(2) { width: 36px !important; opacity: .9 !important; }
.director-eyebrow-line span:nth-child(3) { width: 20px !important; opacity: .4 !important; }

.director-eyebrow-text {
    font-size: .65rem !important;
    font-weight: 600 !important;
    letter-spacing: 2.5px !important;
    text-transform: uppercase !important;
    color: var(--cel-sky) !important;
    white-space: nowrap !important;
}

/* Nom du directeur */
.director-name {
    font-family: 'Cormorant Garamond', serif !important;
    font-size: clamp(2rem, 3.2vw, 3rem) !important;
    font-weight: 700 !important;
    color: var(--cel-white) !important;
    line-height: 1.1 !important;
    margin-bottom: .3rem !important;
    letter-spacing: -.5px !important;
    overflow: visible !important;
}
.director-name em {
    font-style: italic !important;
    background: linear-gradient(90deg, var(--cel-gold-light), var(--cel-gold)) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}

/* Rôle */
.director-role {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    margin-bottom: 2.2rem !important;
    overflow: visible !important;
}
.director-role-dot {
    width: 6px !important; height: 6px !important;
    border-radius: 50% !important;
    background: var(--cel-sky) !important;
    flex-shrink: 0 !important;
    box-shadow: 0 0 8px var(--cel-sky) !important;
}
.director-role-text {
    font-size: .9rem !important;
    color: rgba(168,200,255,.75) !important;
    font-weight: 400 !important;
    letter-spacing: .4px !important;
}

/* Citation */
.director-quote-wrap {
    position: relative !important;
    margin-bottom: 2.5rem !important;
    padding: 2rem 2rem 2rem 2.5rem !important;
    background: linear-gradient(135deg,
    rgba(13,21,80,.6), rgba(8,12,46,.8)) !important;
    border-radius: 20px !important;
    border: 1px solid rgba(77,139,255,.15) !important;
    backdrop-filter: blur(12px) !important;
    overflow: hidden !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.05),
    0 20px 60px rgba(0,0,20,.4) !important;
}
/* Barre gauche lumineuse */
.director-quote-wrap::before {
    content: '' !important;
    position: absolute !important;
    left: 0 !important; top: 20% !important;
    width: 3px !important; height: 60% !important;
    background: linear-gradient(180deg, transparent, var(--cel-sky), transparent) !important;
    border-radius: 0 2px 2px 0 !important;
}
/* Coin lumière */
.director-quote-wrap::after {
    content: '' !important;
    position: absolute !important;
    top: 0 !important; right: 0 !important;
    width: 120px !important; height: 80px !important;
    background: radial-gradient(circle at top right, rgba(77,139,255,.12), transparent) !important;
    pointer-events: none !important;
}
.director-quote-mark {
    font-family: 'Cormorant Garamond', serif !important;
    font-size: 6rem !important;
    line-height: .5 !important;
    color: var(--cel-sky) !important;
    opacity: .12 !important;
    position: absolute !important;
    top: 14px !important; left: 16px !important;
    pointer-events: none !important;
    user-select: none !important;
}
.director-quote-text {
    position: relative !important;
    z-index: 1 !important;
    font-family: 'Cormorant Garamond', serif !important;
    font-size: 1.15rem !important;
    font-style: italic !important;
    line-height: 1.85 !important;
    color: rgba(232,242,255,.88) !important;
    margin: 0 !important;
    font-weight: 400 !important;
}

/* Points forts / piliers */
.director-pillars {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: .85rem !important;
    margin-bottom: 2.2rem !important;
}
.director-pillar {
    display: flex !important;
    align-items: flex-start !important;
    gap: 10px !important;
    padding: 12px 14px !important;
    background: rgba(13,21,80,.4) !important;
    border: 1px solid rgba(77,139,255,.12) !important;
    border-radius: 14px !important;
    transition: border-color .3s, background .3s !important;
}
.director-pillar:hover {
    border-color: rgba(77,139,255,.35) !important;
    background: rgba(13,21,80,.65) !important;
}
.director-pillar-icon {
    width: 32px !important; height: 32px !important;
    flex-shrink: 0 !important;
    border-radius: 9px !important;
    background: linear-gradient(135deg, rgba(26,58,255,.5), rgba(77,139,255,.3)) !important;
    border: 1px solid rgba(77,139,255,.2) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}
.director-pillar-icon .material-icons-round {
    font-size: 16px !important;
    color: var(--cel-ice) !important;
}
.director-pillar-body {}
.director-pillar-title {
    font-size: .72rem !important;
    font-weight: 600 !important;
    color: var(--cel-ice) !important;
    letter-spacing: .3px !important;
    display: block !important;
    margin-bottom: 2px !important;
}
.director-pillar-desc {
    font-size: .65rem !important;
    color: rgba(168,200,255,.55) !important;
    line-height: 1.4 !important;
    display: block !important;
}

/* Signature */
.director-signature-wrap {
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
    padding-top: 1.6rem !important;
    border-top: 1px solid rgba(77,139,255,.12) !important;
    flex-wrap: wrap !important;
    overflow: visible !important;
}
.director-sig-avatar {
    position: relative !important;
    width: 52px !important; height: 52px !important;
    border-radius: 50% !important;
    flex-shrink: 0 !important;
    overflow: visible !important;
}
.director-sig-avatar-inner {
    width: 52px !important; height: 52px !important;
    border-radius: 50% !important;
    background: linear-gradient(135deg, var(--cel-azure), var(--cel-sky)) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-family: 'Cormorant Garamond', serif !important;
    font-size: 1.4rem !important;
    font-weight: 700 !important;
    color: #fff !important;
    position: relative !important;
    z-index: 2 !important;
    box-shadow: 0 0 0 2px rgba(77,139,255,.4), 0 0 20px rgba(26,58,255,.4) !important;
    overflow: hidden !important;
}
/* Anneau tournant de l'avatar */
.director-sig-avatar::before {
    content: '' !important;
    position: absolute !important;
    inset: -4px !important;
    border-radius: 50% !important;
    border: 1px solid transparent !important;
    border-top-color: var(--cel-gold) !important;
    border-right-color: rgba(200,168,75,.3) !important;
    animation: dirAvatarSpin 5s linear infinite !important;
    z-index: 1 !important;
}
@keyframes dirAvatarSpin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}
.director-sig-info {}
.director-sig-name {
    font-family: 'Cormorant Garamond', serif !important;
    font-size: 1.1rem !important;
    font-weight: 700 !important;
    color: var(--cel-white) !important;
    line-height: 1.1 !important;
    display: block !important;
}
.director-sig-role {
    font-size: .72rem !important;
    color: rgba(168,200,255,.55) !important;
    margin-top: 4px !important;
    display: block !important;
    letter-spacing: .3px !important;
}

/* Bouton LinkedIn */
.director-linkedin-btn {
    margin-left: auto !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
    background: transparent !important;
    color: rgba(168,200,255,.8) !important;
    border: 1px solid rgba(77,139,255,.25) !important;
    border-radius: 50px !important;
    padding: 9px 18px !important;
    font-size: .74rem !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    letter-spacing: .3px !important;
    transition: all .3s !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
}
.director-linkedin-btn:hover {
    background: rgba(77,139,255,.15) !important;
    border-color: var(--cel-sky) !important;
    color: var(--cel-white) !important;
    box-shadow: 0 0 20px rgba(77,139,255,.25) !important;
}
.director-linkedin-btn .material-icons-round {
    font-size: 15px !important;
    color: inherit !important;
}

/* ── ENTRÉES ANIMÉES ─────────────────────────────────────────── */
[data-dir-reveal] {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity .7s ease, transform .7s ease;
}
[data-dir-reveal].dir-visible {
    opacity: 1;
    transform: translateY(0);
}
[data-dir-reveal="delay-1"] { transition-delay: .1s; }
[data-dir-reveal="delay-2"] { transition-delay: .2s; }
[data-dir-reveal="delay-3"] { transition-delay: .35s; }
[data-dir-reveal="delay-4"] { transition-delay: .5s; }
[data-dir-reveal="delay-5"] { transition-delay: .65s; }

/* ── RESPONSIVE ──────────────────────────────────────────────── */
@media (max-width: 991px) {
    .director-col-photo {
        padding: 20px 50px 60px 20px !important;
    }
    .director-photo-frame {
        width: 250px !important; height: 320px !important;
    }
    .director-orbit-ring  { width: 330px !important; height: 330px !important; }
    .director-orbit-ring-2 { width: 375px !important; height: 375px !important; }
    .director-photo-halo  { width: 280px !important; height: 280px !important; }
    .director-pillars { grid-template-columns: 1fr 1fr !important; }
}

@media (max-width: 767px) {
    .director-section { padding: 5rem 0 !important; }
    .director-col-photo {
        padding: 20px 0 70px 0 !important;
        justify-content: center !important;
    }
    .director-col-text { padding-left: 0 !important; }
    .director-constellation-badge { display: none !important; }
    .director-status-badge        { display: none !important; }
    .director-mission-badge       { display: none !important; }
    .director-orbit-ring,
    .director-orbit-ring-2        { display: none !important; }
    .director-photo-frame {
        width: 220px !important; height: 280px !important;
    }
    .director-pillars { grid-template-columns: 1fr !important; }
    .director-linkedin-btn { margin-left: 0 !important; }
    .director-signature-wrap { flex-direction: column !important; align-items: flex-start !important; }
}