/* ============================================================
   ASE EVENTS PRO — STYLESHEET PRINCIPAL
   Identité B2B : blanc dominant, gold contenu, angles francs,
   Cormorant Garamond pour les H1, Inter pour le reste.
   ============================================================ */

/* ---------- 1. RESET ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth}
body,h1,h2,h3,h4,h5,h6,p,figure,blockquote,dl,dd{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
img,picture,video,canvas,svg{display:block;max-width:100%;height:auto}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer;padding:0}
a{color:inherit;text-decoration:none}
table{border-collapse:collapse;width:100%}

/* ---------- 2. TOKENS ---------- */
:root{
    /* Couleurs */
    --pro-blanc:        #ffffff;
    --pro-blanc-casse:  #fafaf8;
    --pro-creme:        #f4f1eb;
    --pro-noir:         #070707;
    --pro-graphite:     #0e0e10;
    --pro-graphite-2:   #1a1a1d;
    --pro-gris-fonce:   #2a2a2e;
    --pro-gris:         #5a5a60;
    --pro-gris-clair:   #b8b8be;
    --pro-gris-tres-clair:#e8e6e2;
    --pro-bordure:      #e0ddd6;

    --pro-gold:         #c9a465;
    --pro-gold-fonce:   #a88848;
    --pro-gold-clair:   #e5cc95;
    --pro-gold-bg:      #faf6ec;

    --pro-succes:       #2f7a4f;
    --pro-erreur:       #b03a3a;

    /* Typographie */
    --pro-serif: 'Cormorant Garamond', 'EB Garamond', Georgia, 'Times New Roman', serif;
    --pro-sans:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    --pro-mono:  'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace;

    /* Tailles fluides */
    --pro-fs-xs:   0.75rem;   /* 12 */
    --pro-fs-sm:   0.875rem;  /* 14 */
    --pro-fs-base: 1rem;      /* 16 */
    --pro-fs-md:   1.125rem;  /* 18 */
    --pro-fs-lg:   1.25rem;   /* 20 */
    --pro-fs-xl:   1.5rem;    /* 24 */
    --pro-fs-2xl:  2rem;      /* 32 */
    --pro-fs-3xl:  2.75rem;   /* 44 */
    --pro-fs-4xl:  clamp(2.5rem, 5vw, 4.25rem);
    --pro-fs-hero: clamp(3rem, 7vw, 5.5rem);

    /* Espacements */
    --s-1: 4px;
    --s-2: 8px;
    --s-3: 12px;
    --s-4: 16px;
    --s-5: 24px;
    --s-6: 32px;
    --s-7: 48px;
    --s-8: 64px;
    --s-9: 96px;
    --s-10:128px;

    /* Layout */
    --pro-container: 1320px;
    --pro-container-narrow: 960px;
    --pro-nav-h: 76px;

    /* Rayons (durcis) */
    --pro-radius-sm: 2px;
    --pro-radius:    4px;

    /* Transitions */
    --pro-ease: cubic-bezier(0.4, 0, 0.2, 1);
    --pro-dur:  220ms;

    /* Ombres (très discrètes) */
    --pro-shadow-sm: 0 1px 2px rgba(7,7,7,.06);
    --pro-shadow:    0 4px 16px rgba(7,7,7,.08);
    --pro-shadow-lg: 0 20px 48px rgba(7,7,7,.14);
}

/* ---------- 3. BASE TYPOGRAPHIE ---------- */
body{
    font-family: var(--pro-sans);
    font-size: var(--pro-fs-base);
    line-height: 1.6;
    color: var(--pro-graphite);
    background: var(--pro-blanc);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

h1,h2,h3,h4,h5,h6{
    font-family: var(--pro-sans);
    color: var(--pro-graphite);
    line-height: 1.15;
    letter-spacing: -0.02em;
    font-weight: 600;
}
h1{font-size: var(--pro-fs-4xl); letter-spacing: -0.03em;}
h2{font-size: var(--pro-fs-3xl); letter-spacing: -0.025em;}
h3{font-size: var(--pro-fs-2xl);}
h4{font-size: var(--pro-fs-xl);}
h5{font-size: var(--pro-fs-lg);}
h6{font-size: var(--pro-fs-md); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600;}

/* Variante éditoriale : Cormorant Garamond */
.pro-h-serif,
.pro-hero-title{
    font-family: var(--pro-serif);
    font-weight: 500;
    letter-spacing: -0.01em;
    line-height: 1.05;
}
.pro-hero-title{font-size: var(--pro-fs-hero); font-weight: 400;}

p{color: var(--pro-gris-fonce); max-width: 70ch;}
.pro-lede{font-size: var(--pro-fs-md); color: var(--pro-gris-fonce); line-height: 1.6;}

a{color: var(--pro-graphite); transition: color var(--pro-dur) var(--pro-ease);}
a:hover{color: var(--pro-gold-fonce);}

::selection{background: var(--pro-gold); color: var(--pro-noir);}

/* Eyebrow / kicker */
.pro-eyebrow{
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--pro-sans);
    font-size: var(--pro-fs-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--pro-gold-fonce);
}
.pro-eyebrow::before{
    content: '';
    width: 28px;
    height: 1px;
    background: var(--pro-gold);
}

/* ---------- 4. LAYOUT ---------- */
.pro-container{
    width: 100%;
    max-width: var(--pro-container);
    margin: 0 auto;
    padding: 0 var(--s-5);
}
.pro-container-narrow{
    width: 100%;
    max-width: var(--pro-container-narrow);
    margin: 0 auto;
    padding: 0 var(--s-5);
}
@media (min-width: 768px){
    .pro-container,.pro-container-narrow{padding: 0 var(--s-6);}
}

.pro-section{padding: var(--s-9) 0;}
.pro-section-sm{padding: var(--s-7) 0;}
.pro-section-lg{padding: var(--s-10) 0;}

.pro-section--dark{background: var(--pro-graphite); color: var(--pro-blanc-casse);}
.pro-section--dark h1,.pro-section--dark h2,.pro-section--dark h3,.pro-section--dark h4{color: var(--pro-blanc);}
.pro-section--dark p{color: var(--pro-gris-clair);}
.pro-section--dark a:hover{color: var(--pro-gold-clair);}

.pro-section--cream{background: var(--pro-creme);}
.pro-section--offwhite{background: var(--pro-blanc-casse);}

/* Grilles utilitaires */
.pro-grid{display: grid; gap: var(--s-5);}
.pro-grid-2{grid-template-columns: 1fr;}
.pro-grid-3{grid-template-columns: 1fr;}
.pro-grid-4{grid-template-columns: 1fr;}
@media (min-width: 768px){
    .pro-grid-2{grid-template-columns: repeat(2,1fr); gap: var(--s-6);}
    .pro-grid-3{grid-template-columns: repeat(2,1fr); gap: var(--s-6);}
    .pro-grid-4{grid-template-columns: repeat(2,1fr); gap: var(--s-5);}
}
@media (min-width: 1024px){
    .pro-grid-3{grid-template-columns: repeat(3,1fr);}
    .pro-grid-4{grid-template-columns: repeat(4,1fr);}
}

/* ---------- 5. BOUTONS ---------- */
.pro-btn{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 28px;
    font-family: var(--pro-sans);
    font-size: var(--pro-fs-sm);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    border-radius: var(--pro-radius);
    transition: all var(--pro-dur) var(--pro-ease);
    white-space: nowrap;
    border: 1px solid transparent;
    cursor: pointer;
    line-height: 1;
}

.pro-btn--primary{
    background: var(--pro-graphite);
    color: var(--pro-blanc);
    border-color: var(--pro-graphite);
}
.pro-btn--primary:hover{
    background: var(--pro-noir);
    color: var(--pro-gold-clair);
}

.pro-btn--gold{
    background: var(--pro-gold);
    color: var(--pro-noir);
    border-color: var(--pro-gold);
}
.pro-btn--gold:hover{
    background: var(--pro-gold-fonce);
    border-color: var(--pro-gold-fonce);
    color: var(--pro-blanc);
}

.pro-btn--outline{
    background: transparent;
    color: var(--pro-graphite);
    border-color: var(--pro-graphite);
}
.pro-btn--outline:hover{
    background: var(--pro-graphite);
    color: var(--pro-blanc);
}

.pro-btn--ghost{
    background: transparent;
    color: var(--pro-graphite);
    border-color: var(--pro-bordure);
}
.pro-btn--ghost:hover{
    border-color: var(--pro-graphite);
}

.pro-btn--light{
    background: var(--pro-blanc);
    color: var(--pro-graphite);
    border-color: var(--pro-blanc);
}
.pro-btn--light:hover{color: var(--pro-gold-fonce);}

.pro-btn--sm{padding: 10px 18px; font-size: var(--pro-fs-xs);}
.pro-btn--lg{padding: 18px 36px; font-size: var(--pro-fs-base);}

.pro-btn .pro-arrow{
    display: inline-block;
    transition: transform var(--pro-dur) var(--pro-ease);
}
.pro-btn:hover .pro-arrow{transform: translateX(4px);}

/* Lien fléché */
.pro-link-arrow{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    font-size: var(--pro-fs-sm);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--pro-graphite);
    border-bottom: 1px solid var(--pro-gold);
    padding-bottom: 4px;
    transition: all var(--pro-dur) var(--pro-ease);
}
.pro-link-arrow:hover{color: var(--pro-gold-fonce); gap: 14px;}

/* ---------- 6. LOGO + BADGE ---------- */
.pro-logo{
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--pro-serif);
    line-height: 1;
    color: var(--pro-graphite);
}
.pro-logo-text{
    display: inline-flex;
    align-items: baseline;
    gap: 0.25em;
}
.pro-logo-ase{
    font-weight: 600;
    font-size: 1.5rem;
    letter-spacing: 0.02em;
}
.pro-logo-events{
    font-weight: 400;
    font-style: italic;
    font-size: 1.5rem;
    color: var(--pro-gris-fonce);
}
.pro-logo-badge{
    font-family: var(--pro-sans);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    color: var(--pro-gold-fonce);
    background: transparent;
    border: 1px solid var(--pro-gold);
    padding: 4px 8px;
    border-radius: var(--pro-radius-sm);
    text-transform: uppercase;
    line-height: 1;
    align-self: center;
}

/* Sur fonds sombres */
.pro-section--dark .pro-logo{color: var(--pro-blanc);}
.pro-section--dark .pro-logo-events{color: var(--pro-gris-clair);}
.pro-section--dark .pro-logo-badge{color: var(--pro-gold-clair); border-color: var(--pro-gold);}

/* ---------- 7. NAV PRINCIPALE ---------- */
.pro-nav{
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(255,255,255,0.92);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--pro-bordure);
    transition: box-shadow var(--pro-dur) var(--pro-ease);
}
.pro-nav.is-scrolled{box-shadow: var(--pro-shadow-sm);}

.pro-nav-inner{
    max-width: var(--pro-container);
    margin: 0 auto;
    padding: 0 var(--s-5);
    height: var(--pro-nav-h);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-5);
}
@media (min-width: 768px){
    .pro-nav-inner{padding: 0 var(--s-6);}
}

.pro-nav-links{
    display: none;
    align-items: center;
    gap: var(--s-6);
}
@media (min-width: 1024px){
    .pro-nav-links{display: flex;}
}
.pro-nav-links > li > a,
.pro-nav-links > li > button{
    font-size: var(--pro-fs-sm);
    font-weight: 500;
    color: var(--pro-graphite);
    padding: 8px 0;
    position: relative;
    transition: color var(--pro-dur) var(--pro-ease);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.pro-nav-links > li > a::after,
.pro-nav-links > li > button::after{
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: -2px;
    height: 1px;
    background: var(--pro-gold);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--pro-dur) var(--pro-ease);
}
.pro-nav-links > li > a:hover::after,
.pro-nav-links > li > button:hover::after,
.pro-nav-links > li.is-active > a::after{transform: scaleX(1);}

.pro-nav-cta{display: none;}
@media (min-width: 1024px){.pro-nav-cta{display: inline-flex;}}

/* Dropdown "Pôles" */
.pro-nav-links li.has-dropdown{position: relative;}
.pro-dropdown-caret{display: inline-block; font-size: 10px; transition: transform var(--pro-dur) var(--pro-ease);}
.pro-nav-links li.has-dropdown:hover .pro-dropdown-caret{transform: rotate(180deg);}

.pro-dropdown{
    position: absolute;
    top: 100%;
    left: -24px;
    min-width: 340px;
    background: var(--pro-blanc);
    border: 1px solid var(--pro-bordure);
    border-radius: var(--pro-radius);
    padding: var(--s-3);
    box-shadow: var(--pro-shadow-lg);
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: all var(--pro-dur) var(--pro-ease);
    pointer-events: none;
}
.pro-nav-links li.has-dropdown:hover .pro-dropdown,
.pro-nav-links li.has-dropdown:focus-within .pro-dropdown{
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
}
.pro-dropdown a{
    display: block;
    padding: 12px 14px;
    border-radius: var(--pro-radius-sm);
    transition: background var(--pro-dur) var(--pro-ease);
}
.pro-dropdown a:hover{background: var(--pro-creme);}
.pro-dropdown-title{
    display: block;
    font-weight: 600;
    font-size: var(--pro-fs-sm);
    color: var(--pro-graphite);
    margin-bottom: 2px;
}
.pro-dropdown-desc{
    display: block;
    font-size: var(--pro-fs-xs);
    color: var(--pro-gris);
    line-height: 1.4;
}

/* Burger mobile */
.pro-burger{
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 32px;
    height: 32px;
}
.pro-burger span{
    display: block;
    width: 24px;
    height: 1.5px;
    background: var(--pro-graphite);
    transition: all var(--pro-dur) var(--pro-ease);
}
.pro-burger.is-open span:nth-child(1){transform: translateY(6.5px) rotate(45deg);}
.pro-burger.is-open span:nth-child(2){opacity: 0;}
.pro-burger.is-open span:nth-child(3){transform: translateY(-6.5px) rotate(-45deg);}
@media (min-width: 1024px){.pro-burger{display: none;}}

/* Menu mobile fullscreen */
.pro-mobile-menu{
    position: fixed;
    inset: var(--pro-nav-h) 0 0 0;
    background: var(--pro-blanc);
    z-index: 99;
    overflow-y: auto;
    transform: translateX(100%);
    transition: transform 320ms var(--pro-ease);
    padding: var(--s-6) var(--s-5) var(--s-9);
}
.pro-mobile-menu.is-open{transform: translateX(0);}
@media (min-width: 1024px){.pro-mobile-menu{display: none;}}

.pro-mobile-menu h6{
    font-size: var(--pro-fs-xs);
    color: var(--pro-gris);
    margin-bottom: var(--s-3);
    margin-top: var(--s-5);
    letter-spacing: 0.15em;
}
.pro-mobile-menu h6:first-child{margin-top: 0;}
.pro-mobile-menu ul li a{
    display: block;
    padding: 14px 0;
    font-size: var(--pro-fs-md);
    border-bottom: 1px solid var(--pro-gris-tres-clair);
    font-weight: 500;
}
.pro-mobile-menu .pro-btn{margin-top: var(--s-6); width: 100%;}

/* ---------- 8. HERO ---------- */
.pro-hero{
    position: relative;
    padding: var(--s-9) 0 var(--s-10);
    background: var(--pro-blanc);
    overflow: hidden;
}
.pro-hero--dark{
    background: var(--pro-graphite);
    color: var(--pro-blanc-casse);
}
.pro-hero-inner{
    display: grid;
    gap: var(--s-7);
    align-items: center;
}
@media (min-width: 1024px){
    .pro-hero-inner{grid-template-columns: 1.1fr 0.9fr; gap: var(--s-9);}
}
.pro-hero-content > * + *{margin-top: var(--s-4);}
.pro-hero-content .pro-eyebrow{margin-bottom: var(--s-5);}
.pro-hero-content .pro-hero-title{margin-bottom: var(--s-5);}
.pro-hero-actions{
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-3);
    margin-top: var(--s-6);
}

/* ---------- 9. CARDS PÔLES ---------- */
.pro-pole-card{
    display: flex;
    flex-direction: column;
    background: var(--pro-blanc);
    border: 1px solid var(--pro-bordure);
    border-radius: var(--pro-radius);
    padding: var(--s-6);
    transition: all var(--pro-dur) var(--pro-ease);
    height: 100%;
    position: relative;
    overflow: hidden;
}
.pro-pole-card::before{
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: var(--pro-gold);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 320ms var(--pro-ease);
}
.pro-pole-card:hover{
    border-color: var(--pro-graphite);
    box-shadow: var(--pro-shadow);
    transform: translateY(-2px);
}
.pro-pole-card:hover::before{transform: scaleX(1);}

.pro-pole-card-icon{
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--pro-gold-fonce);
    margin-bottom: var(--s-4);
}
.pro-pole-card h3{
    font-size: var(--pro-fs-lg);
    margin-bottom: var(--s-2);
}
.pro-pole-card-baseline{
    font-family: var(--pro-serif);
    font-style: italic;
    font-size: 1.0625rem;
    color: var(--pro-gold-fonce);
    margin-bottom: var(--s-3);
}
.pro-pole-card p{
    font-size: var(--pro-fs-sm);
    color: var(--pro-gris-fonce);
    margin-bottom: var(--s-4);
    flex: 1;
}
.pro-pole-card-link{
    font-size: var(--pro-fs-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--pro-graphite);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: auto;
}
.pro-pole-card-link::after{
    content: '→';
    transition: transform var(--pro-dur) var(--pro-ease);
}
.pro-pole-card:hover .pro-pole-card-link::after{transform: translateX(4px);}

/* ---------- 10. KPI ---------- */
.pro-kpi-row{
    display: grid;
    gap: var(--s-5);
    grid-template-columns: 1fr;
}
@media (min-width: 640px){.pro-kpi-row{grid-template-columns: repeat(3,1fr);}}

.pro-kpi{
    text-align: left;
    padding: var(--s-5) 0;
    border-top: 1px solid var(--pro-bordure);
}
.pro-kpi-value{
    font-family: var(--pro-serif);
    font-size: var(--pro-fs-4xl);
    font-weight: 500;
    line-height: 1;
    color: var(--pro-graphite);
    letter-spacing: -0.02em;
}
.pro-kpi-label{
    margin-top: var(--s-2);
    font-size: var(--pro-fs-sm);
    color: var(--pro-gris-fonce);
}
.pro-section--dark .pro-kpi{border-color: var(--pro-gris-fonce);}
.pro-section--dark .pro-kpi-value{color: var(--pro-blanc);}
.pro-section--dark .pro-kpi-label{color: var(--pro-gris-clair);}

/* ---------- 11. LOGOS CLIENTS ---------- */
.pro-logos-strip{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--s-5);
    align-items: center;
}
@media (min-width: 640px){.pro-logos-strip{grid-template-columns: repeat(3, 1fr);}}
@media (min-width: 1024px){.pro-logos-strip{grid-template-columns: repeat(6, 1fr);}}

.pro-logo-client{
    display: flex;
    align-items: center;
    justify-content: center;
    height: 56px;
    filter: grayscale(100%) opacity(0.55);
    transition: filter var(--pro-dur) var(--pro-ease);
}
.pro-logo-client:hover{filter: grayscale(0%) opacity(1);}
.pro-logo-client img{max-height: 100%; max-width: 100%; object-fit: contain;}

/* ---------- 12. FOOTER ---------- */
.pro-footer{
    background: var(--pro-noir);
    color: var(--pro-gris-clair);
    padding: var(--s-9) 0 var(--s-5);
}
.pro-footer-top{
    display: grid;
    gap: var(--s-7);
    grid-template-columns: 1fr;
    padding-bottom: var(--s-7);
    border-bottom: 1px solid rgba(255,255,255,0.08);
}
@media (min-width: 768px){
    .pro-footer-top{grid-template-columns: 1.5fr 1fr 1fr 1fr;}
}
.pro-footer h6{
    font-size: var(--pro-fs-xs);
    color: var(--pro-gold);
    text-transform: uppercase;
    letter-spacing: 0.18em;
    margin-bottom: var(--s-4);
    font-weight: 600;
}
.pro-footer .pro-logo{margin-bottom: var(--s-4);}
.pro-footer .pro-logo-events,
.pro-footer .pro-logo-ase{color: var(--pro-blanc);}
.pro-footer p{color: var(--pro-gris-clair); font-size: var(--pro-fs-sm); max-width: 36ch;}
.pro-footer ul li{margin-bottom: var(--s-2);}
.pro-footer ul li a{
    font-size: var(--pro-fs-sm);
    color: var(--pro-gris-clair);
    transition: color var(--pro-dur) var(--pro-ease);
}
.pro-footer ul li a:hover{color: var(--pro-gold-clair);}

.pro-footer-groupe{
    margin-top: var(--s-4);
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-2);
}
.pro-footer-groupe a{
    display: inline-block;
    padding: 4px 10px;
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: var(--pro-radius-sm);
    font-size: var(--pro-fs-xs);
    color: var(--pro-gris-clair);
    transition: all var(--pro-dur) var(--pro-ease);
}
.pro-footer-groupe a:hover{
    border-color: var(--pro-gold);
    color: var(--pro-gold-clair);
}

.pro-footer-bottom{
    padding-top: var(--s-5);
    display: flex;
    flex-direction: column;
    gap: var(--s-3);
    align-items: flex-start;
    justify-content: space-between;
    font-size: var(--pro-fs-xs);
    color: var(--pro-gris);
}
@media (min-width: 640px){
    .pro-footer-bottom{flex-direction: row; align-items: center;}
}
.pro-footer-bottom a:hover{color: var(--pro-gold-clair);}
.pro-footer-legal{display: flex; flex-wrap: wrap; gap: var(--s-4);}

/* ---------- 13. CTA BAND ---------- */
.pro-cta-band{
    background: var(--pro-graphite);
    color: var(--pro-blanc-casse);
    padding: var(--s-8) 0;
    position: relative;
    overflow: hidden;
}
.pro-cta-band::before{
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--pro-gold), transparent);
}
.pro-cta-band-inner{
    display: flex;
    flex-direction: column;
    gap: var(--s-5);
    align-items: flex-start;
    justify-content: space-between;
}
@media (min-width: 768px){
    .pro-cta-band-inner{flex-direction: row; align-items: center;}
}
.pro-cta-band h2{
    font-family: var(--pro-serif);
    font-size: var(--pro-fs-3xl);
    font-weight: 400;
    color: var(--pro-blanc);
    line-height: 1.15;
    max-width: 20ch;
}
.pro-cta-band p{color: var(--pro-gris-clair); margin-top: var(--s-3); max-width: 50ch;}

/* ---------- 14. UTILITIES ---------- */
.pro-text-center{text-align: center;}
.pro-text-gold{color: var(--pro-gold-fonce);}
.pro-text-serif{font-family: var(--pro-serif);}
.pro-mt-0{margin-top: 0;}
.pro-mt-2{margin-top: var(--s-2);}
.pro-mt-4{margin-top: var(--s-4);}
.pro-mt-6{margin-top: var(--s-6);}
.pro-mt-7{margin-top: var(--s-7);}
.pro-divider{height: 1px; background: var(--pro-bordure); margin: var(--s-7) 0;}
.pro-divider-gold{height: 1px; background: var(--pro-gold); width: 60px;}

/* Focus accessible */
:focus-visible{outline: 2px solid var(--pro-gold); outline-offset: 3px;}

/* Skip link */
.pro-skip{
    position: absolute;
    left: -9999px;
    top: 0;
    background: var(--pro-graphite);
    color: var(--pro-blanc);
    padding: 12px 20px;
    z-index: 9999;
}
.pro-skip:focus{left: 0;}

/* ---------- 15. ANIMATIONS ---------- */
@keyframes pro-fade-up{
    from{opacity: 0; transform: translateY(16px);}
    to  {opacity: 1; transform: translateY(0);}
}
.pro-anim-fade{animation: pro-fade-up 600ms var(--pro-ease) both;}
.pro-anim-fade-1{animation-delay: 100ms;}
.pro-anim-fade-2{animation-delay: 200ms;}
.pro-anim-fade-3{animation-delay: 300ms;}

@media (prefers-reduced-motion: reduce){
    *,*::before,*::after{animation-duration: 0.01ms !important; transition-duration: 0.01ms !important;}
}