.elementor-kit-4{--e-global-color-primary:#0E2A6B;--e-global-color-secondary:#081633;--e-global-color-text:#5B6478;--e-global-color-accent:#2563EB;--e-global-color-c0a0001:#0A1E4F;--e-global-color-c0a0002:#1B3FAB;--e-global-color-c0a0003:#3B82F6;--e-global-color-c0a0004:#EEF2FC;--e-global-color-c0a0005:#E2E8F5;--e-global-color-c0a0006:#FFFFFF;--e-global-typography-primary-font-family:"Archivo";--e-global-typography-primary-font-weight:800;--e-global-typography-secondary-font-family:"Archivo";--e-global-typography-secondary-font-weight:700;--e-global-typography-text-font-family:"Inter";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Inter";--e-global-typography-accent-font-weight:600;background-color:#FFFFFF;color:#5B6478;font-family:"Inter", Sans-serif;font-size:16px;font-weight:400;line-height:1.65em;}.elementor-kit-4 button,.elementor-kit-4 input[type="button"],.elementor-kit-4 input[type="submit"],.elementor-kit-4 .elementor-button{background-color:#2563EB;font-family:"Inter", Sans-serif;font-size:15.5px;font-weight:600;color:#FFFFFF;border-radius:12px 12px 12px 12px;padding:15px 30px 15px 30px;}.elementor-kit-4 button:hover,.elementor-kit-4 button:focus,.elementor-kit-4 input[type="button"]:hover,.elementor-kit-4 input[type="button"]:focus,.elementor-kit-4 input[type="submit"]:hover,.elementor-kit-4 input[type="submit"]:focus,.elementor-kit-4 .elementor-button:hover,.elementor-kit-4 .elementor-button:focus{background-color:#3B82F6;color:#FFFFFF;}.elementor-kit-4 e-page-transition{background-color:#FFBC7D;}.elementor-kit-4 a{color:#2563EB;}.elementor-kit-4 a:hover{color:#1B3FAB;}.elementor-kit-4 h1{color:#0E2A6B;font-family:"Archivo", Sans-serif;font-size:56px;font-weight:900;font-style:italic;line-height:1.08em;letter-spacing:-1.1px;}.elementor-kit-4 h2{color:#0E2A6B;font-family:"Archivo", Sans-serif;font-size:42px;font-weight:800;font-style:italic;line-height:1.08em;letter-spacing:-0.8px;}.elementor-kit-4 h3{color:#0E2A6B;font-family:"Archivo", Sans-serif;font-size:22px;font-weight:800;line-height:1.08em;letter-spacing:-0.4px;}.elementor-kit-4 h4{color:#0E2A6B;font-family:"Archivo", Sans-serif;font-size:17px;font-weight:700;line-height:1.08em;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1200px;}.e-con{--container-max-width:1200px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1080px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1200px;}.e-con{--container-max-width:1200px;}}@media(max-width:860px){.elementor-kit-4 h1{font-size:40px;}.elementor-kit-4 h2{font-size:32px;}.elementor-kit-4 h3{font-size:19px;}.elementor-kit-4 h4{font-size:16px;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1200px;}.e-con{--container-max-width:1200px;}}
/* Start custom CSS *//* ==========================================================================
BTA5 — Elementor site-wide Custom CSS port
Source: mockup/assets/css/styles.css (charte 2026, dominante bleue)
Paste into Elementor > Site Settings > Custom CSS.
Attach class names to elements via Advanced > CSS Classes (they land on the
widget WRAPPER div), or use them directly in HTML widgets. Every rule
therefore targets both the plain class and Elementor's inner markup.
Fonts are NOT loaded here: enable Archivo (700/800/900 + italics) and
Inter (400/500/600/700) via Elementor global fonts / theme.
Excluded on purpose: resets, body/html, .container/.section layout,
inscription/paiement-only components (wizard, apply-*, pay-*, otp-*,
badge-*, gate-*), JS-dependent .reveal states, position:fixed elements.
========================================================================== */
:root {
/* Palette */
--navy-950: #081633;
--navy-900: #0a1e4f;
--navy-800: #0e2a6b;
--royal-600: #1b3fab;
--blue-500: #2563eb;
--electric-400: #3b82f6;
--ice-50: #eef2fc;
--white: #ffffff;
--text-body: #5b6478;
--border: #e2e8f5;
--success: #16a34a;
--error: #dc2626;
/* Typography */
--font-display: 'Archivo', ui-sans-serif, system-ui, sans-serif;
--font-body: 'Inter', ui-sans-serif, system-ui, sans-serif;
/* Effects */
--shadow-bta: 0 20px 60px -20px rgba(27, 63, 171, 0.35);
--shadow-soft: 0 10px 30px -12px rgba(8, 22, 51, 0.18);
--radius-card: 1.25rem;
--ease-out: cubic-bezier(0.22, 1, 0.36, 1);
--bta-x-logo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M18.9 1.15h3.68l-8.04 9.19L24 22.85h-7.41l-5.8-7.58-6.64 7.58H.47l8.6-9.83L0 1.15h7.59l5.24 6.93ZM17.61 20.64h2.04L6.49 3.24H4.3Z'/%3E%3C/svg%3E");
}
/* --------------------------------------------------------------------------
Typography
-------------------------------------------------------------------------- */
.display-1,
.display-1 .elementor-heading-title {
font-family: var(--font-display);
font-size: clamp(2.5rem, 6vw, 4.5rem);
font-weight: 900;
font-style: italic;
line-height: 1.08;
letter-spacing: -0.02em;
text-wrap: balance;
}
.display-2,
.display-2 .elementor-heading-title {
font-family: var(--font-display);
font-size: clamp(2rem, 3.6vw, 2.75rem);
font-weight: 800;
font-style: italic;
line-height: 1.08;
letter-spacing: -0.02em;
text-wrap: balance;
}
/* Heading color is intentionally not set here: navy-800 on light sections /
white on dark — set it via Elementor global colors or per widget. */
.lead,
.lead p {
font-size: 1.125rem;
line-height: 1.75;
}
.kicker:not(.elementor-widget),
.kicker .elementor-heading-title {
display: inline-flex;
align-items: center;
gap: 0.75rem;
font-family: var(--font-display);
font-size: 0.8125rem;
font-weight: 700;
font-style: normal;
text-transform: uppercase;
letter-spacing: 0.2em;
color: var(--royal-600);
}
.kicker:not(.elementor-widget)::before,
.kicker .elementor-heading-title::before {
content: '';
width: 2.25rem;
height: 2px;
background: var(--blue-500);
flex: none;
}
/* Centered section heads get a closing bar too */
.kicker--center:not(.elementor-widget)::after,
.kicker--center .elementor-heading-title::after {
content: '';
width: 2.25rem;
height: 2px;
background: var(--blue-500);
flex: none;
}
/* Light variant for navy sections */
.kicker--light:not(.elementor-widget),
.kicker--light .elementor-heading-title {
color: var(--electric-400);
}
/* "BTA · 5e édition" line above the theme title */
.edition-line,
.edition-line .elementor-heading-title,
.edition-line p {
font-size: 0.78rem;
font-weight: 700;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--blue-500);
}
.edition-line sup { font-size: 0.62em; vertical-align: super; }
/* Section head width cap (spacing/centering stays native in Elementor) */
.section-head { max-width: 640px; }
.section-head--center { margin-inline: auto; text-align: center; }
/* Hero copy on dark */
.hero-sub,
.hero-sub p {
font-size: 1.15rem;
line-height: 1.7;
color: rgba(255, 255, 255, 0.85);
}
.hero-sub strong { color: var(--white); font-weight: 600; }
.hero-meta {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 1.3rem;
font-size: 0.92rem;
color: rgba(255, 255, 255, 0.78);
}
.hero-meta span,
.hero-meta a { display: inline-flex; align-items: center; gap: 0.5rem; }
.hero-meta svg { color: var(--electric-400); }
.hero-note,
.hero-note p { font-size: 0.8125rem; color: rgba(255, 255, 255, 0.7); }
/* Pull quote (about page) */
.about-quote blockquote {
font-family: var(--font-display);
font-style: italic;
font-weight: 800;
font-size: clamp(1.5rem, 3vw, 2.3rem);
line-height: 1.25;
letter-spacing: -0.02em;
color: var(--navy-800);
}
.about-quote cite {
font-style: normal;
font-size: 0.85rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.16em;
color: var(--text-body);
}
.quote-mark {
font-family: var(--font-display);
font-style: italic;
font-weight: 900;
font-size: 3.5rem;
line-height: 0.6;
color: var(--electric-400);
}
/* --------------------------------------------------------------------------
Hero pill + breadcrumb
-------------------------------------------------------------------------- */
.hero-pill:not(.elementor-widget),
.hero-pill .elementor-heading-title {
display: inline-flex;
align-items: center;
gap: 0.55rem;
padding: 0.5rem 1.1rem;
border-radius: 12px;
border: 1px solid rgba(255, 255, 255, 0.22);
background: rgba(255, 255, 255, 0.08);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
font-family: var(--font-body);
font-size: 0.78rem;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--white);
}
.hero-pill .dot {
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--electric-400);
box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.25);
flex: none;
}
.breadcrumb,
.breadcrumb p {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.6rem;
font-size: 0.85rem;
color: rgba(255, 255, 255, 0.6);
margin: 0;
}
.breadcrumb a { color: rgba(255, 255, 255, 0.8); text-decoration: none; }
.breadcrumb a:hover { color: var(--electric-400); }
/* --------------------------------------------------------------------------
Buttons
Attach ONE variant class to an Elementor Button widget; for HTML widgets
use … as in the mockup.
-------------------------------------------------------------------------- */
/* Plain markup base */
a.btn,
button.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.6rem;
padding: 0.95rem 1.9rem;
border-radius: 12px;
border: none;
background: none;
font-family: var(--font-body);
font-weight: 600;
font-size: 0.975rem;
line-height: 1;
white-space: nowrap;
text-decoration: none;
cursor: pointer;
transition: background 0.25s var(--ease-out), color 0.25s, border-color 0.25s,
box-shadow 0.25s, transform 0.25s var(--ease-out);
}
/* Elementor Button widget base (variant class sits on the wrapper) */
.btn--primary .elementor-button,
.btn--outline-light .elementor-button,
.btn--outline-navy .elementor-button,
.btn--ghost .elementor-button {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.6rem;
padding: 0.95rem 1.9rem;
border-radius: 12px;
font-family: var(--font-body);
font-weight: 600;
font-size: 0.975rem;
line-height: 1;
white-space: nowrap;
transition: background 0.25s var(--ease-out), color 0.25s, border-color 0.25s,
box-shadow 0.25s, transform 0.25s var(--ease-out);
}
/* Primary — solid blue with blue glow */
a.btn--primary,
button.btn--primary,
.btn--primary .elementor-button {
background: var(--blue-500);
color: var(--white);
border: none;
box-shadow: 0 12px 30px -10px rgba(37, 99, 235, 0.55);
}
a.btn--primary:hover,
button.btn--primary:hover,
.btn--primary .elementor-button:hover,
.btn--primary .elementor-button:focus {
background: var(--electric-400);
color: var(--white);
}
/* Outline light — for navy/hero backgrounds */
a.btn--outline-light,
button.btn--outline-light,
.btn--outline-light .elementor-button {
background: transparent;
border: 1.5px solid rgba(255, 255, 255, 0.55);
color: var(--white);
}
a.btn--outline-light:hover,
button.btn--outline-light:hover,
.btn--outline-light .elementor-button:hover,
.btn--outline-light .elementor-button:focus {
border-color: var(--white);
background: rgba(255, 255, 255, 0.1);
color: var(--white);
}
/* Outline navy — for light backgrounds */
a.btn--outline-navy,
button.btn--outline-navy,
.btn--outline-navy .elementor-button {
background: transparent;
border: 1.5px solid var(--navy-800);
color: var(--navy-800);
}
a.btn--outline-navy:hover,
button.btn--outline-navy:hover,
.btn--outline-navy .elementor-button:hover,
.btn--outline-navy .elementor-button:focus {
background: var(--navy-800);
color: var(--white);
}
/* Ghost — text-only link button */
a.btn--ghost,
button.btn--ghost,
.btn--ghost .elementor-button {
background: none;
border: none;
box-shadow: none;
color: var(--navy-800);
padding-inline: 1.1rem;
}
a.btn--ghost:hover,
button.btn--ghost:hover,
.btn--ghost .elementor-button:hover,
.btn--ghost .elementor-button:focus {
background: none;
color: var(--blue-500);
}
/* Sizes / block */
a.btn--sm, button.btn--sm,
.btn--sm .elementor-button { padding: 0.7rem 1.35rem; font-size: 0.9rem; }
a.btn--lg, button.btn--lg,
.btn--lg .elementor-button { padding: 1.1rem 2.4rem; font-size: 1.05rem; }
a.btn--block, button.btn--block { width: 100%; }
.btn--block .elementor-button-wrapper,
.btn--block .elementor-button { width: 100%; }
/* Arrow icon slides right on hover (mockup .btn-arrow / Elementor icon) */
a.btn .btn-arrow,
button.btn .btn-arrow,
.btn--primary .elementor-button-icon,
.btn--outline-light .elementor-button-icon,
.btn--outline-navy .elementor-button-icon,
.btn--ghost .elementor-button-icon {
transition: transform 0.25s var(--ease-out);
}
a.btn:hover .btn-arrow,
button.btn:hover .btn-arrow,
.btn--primary .elementor-button:hover .elementor-button-icon,
.btn--outline-light .elementor-button:hover .elementor-button-icon,
.btn--outline-navy .elementor-button:hover .elementor-button-icon,
.btn--ghost .elementor-button:hover .elementor-button-icon {
transform: translateX(4px);
}
/* --------------------------------------------------------------------------
Signature backgrounds & section tints
Apply to containers; background color/image can also be set natively.
-------------------------------------------------------------------------- */
.bg-bta-gradient {
background-color: var(--navy-950);
background-image:
radial-gradient(60% 55% at 82% 12%, rgba(37, 99, 235, 0.55) 0%, rgba(37, 99, 235, 0) 60%),
linear-gradient(145deg, #081633 0%, #0a1e4f 45%, #1b3fab 100%);
}
.section--ice { background-color: var(--ice-50); }
.section--navy { background-color: var(--navy-950); }
.section--speakers {
background-color: var(--navy-950);
background-image:
radial-gradient(55% 45% at 85% 8%, rgba(37, 99, 235, 0.4) 0%, transparent 60%),
linear-gradient(160deg, #081633 0%, #0a1e4f 55%, #12307f 100%);
}
.section--navy h2, .section--navy h3,
.section--navy .elementor-heading-title,
.section--speakers h2, .section--speakers h3,
.section--speakers .elementor-heading-title { color: var(--white); }
.section--navy .section-head p,
.section--speakers .section-head p { color: rgba(255, 255, 255, 0.72); }
/* --------------------------------------------------------------------------
Page hero (inner page banner)
Set the photo as the container's native background (cover / center) and add
this class: it layers the charte double overlay (radial blue glow + navy
sweep) that Elementor's single-layer overlay cannot reproduce.
-------------------------------------------------------------------------- */
.page-hero {
position: relative;
overflow: hidden;
color: var(--white);
}
.page-hero::before {
content: '';
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
background:
radial-gradient(55% 60% at 85% 10%, rgba(37, 99, 235, 0.45) 0%, transparent 60%),
linear-gradient(105deg, rgba(8, 22, 51, 0.97) 0%, rgba(10, 30, 79, 0.9) 50%, rgba(27, 63, 171, 0.72) 100%);
}
.page-hero > * { position: relative; z-index: 1; }
.page-hero .elementor-heading-title { color: var(--white); }
.page-hero-lead,
.page-hero-lead p {
font-size: 1.1rem;
line-height: 1.75;
color: rgba(255, 255, 255, 0.82);
max-width: 640px;
}
.page-hero-stats {
display: flex;
flex-wrap: wrap;
gap: 2.2rem;
padding-top: 1.6rem;
border-top: 1px solid rgba(255, 255, 255, 0.15);
font-size: 0.82rem;
text-transform: uppercase;
letter-spacing: 0.14em;
color: rgba(255, 255, 255, 0.6);
}
.page-hero-stats strong {
display: block;
font-family: var(--font-display);
font-style: italic;
font-weight: 900;
font-size: 1.7rem;
letter-spacing: -0.01em;
text-transform: none;
color: var(--white);
margin-bottom: 0.15rem;
}
/* --------------------------------------------------------------------------
Stats band (floating over the hero) & stat cells
.stats-band on the outer container, .stats-card on the grid container,
.stat on each cell; .stat-value on the number heading, .stat-label below.
-------------------------------------------------------------------------- */
.stats-band { position: relative; z-index: 4; margin-top: -5.25rem; }
.stats-card {
background: linear-gradient(120deg, var(--navy-900), var(--navy-800));
border: 1px solid rgba(59, 130, 246, 0.25);
border-radius: var(--radius-card);
box-shadow: var(--shadow-bta);
overflow: hidden;
}
.stat { padding: 2rem 1.5rem; text-align: center; position: relative; }
.stat + .stat::before {
content: '';
position: absolute;
left: 0;
top: 22%;
bottom: 22%;
width: 1px;
background: rgba(255, 255, 255, 0.12);
}
.stat-value,
.stat-value .elementor-heading-title {
font-family: var(--font-display);
font-style: italic;
font-weight: 900;
font-size: clamp(2rem, 3.4vw, 2.9rem);
color: var(--white);
line-height: 1;
}
.stat-value .plus { color: var(--electric-400); }
.stat-label,
.stat-label p {
font-size: 0.78rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.16em;
color: rgba(255, 255, 255, 0.62);
}
/* --------------------------------------------------------------------------
Big numbers (participation amount)
-------------------------------------------------------------------------- */
.participation-card {
background: var(--white);
border: 1px solid var(--border);
border-top: 5px solid var(--blue-500);
border-radius: var(--radius-card);
box-shadow: var(--shadow-soft);
padding: 2.2rem 2.4rem;
text-align: center;
}
.participation-amount,
.participation-amount .elementor-heading-title {
font-family: var(--font-display);
font-style: italic;
font-weight: 900;
font-size: clamp(2.1rem, 5vw, 2.9rem);
line-height: 1.05;
color: var(--navy-900);
}
.participation-amount span { font-size: 0.42em; opacity: 0.55; margin-left: 0.25rem; }
.participation-alt,
.participation-alt p { font-size: 0.88rem; color: var(--text-body); }
/* --------------------------------------------------------------------------
Cards — white card polish + hover lift (the BTA card pattern)
-------------------------------------------------------------------------- */
.value-card {
background: var(--white);
border: 1px solid var(--border);
border-radius: var(--radius-card);
padding: 2rem;
position: relative;
transition: transform 0.3s var(--ease-out), box-shadow 0.3s, border-color 0.3s;
}
.value-card:hover {
transform: translateY(-6px);
border-color: var(--electric-400);
box-shadow: var(--shadow-bta);
}
.value-card h3,
.value-card .elementor-heading-title { font-size: 1.15rem; font-weight: 800; }
.value-card p { font-size: 0.95rem; }
.value-card .num {
position: absolute;
top: 1.6rem;
right: 1.8rem;
font-family: var(--font-display);
font-style: italic;
font-weight: 900;
font-size: 1rem;
color: var(--border);
}
.value-icon {
width: 52px;
height: 52px;
border-radius: 14px;
background: var(--ice-50);
color: var(--blue-500);
display: grid;
place-items: center;
}
/* Step cards ("Comment participer") — .step on the card container,
.step-num on a heading/HTML element inside it */
.step {
position: relative;
background: var(--white);
border: 1px solid var(--border);
border-radius: var(--radius-card);
padding: 2.6rem 1.7rem 2rem;
margin-top: 26px;
transition: transform 0.3s var(--ease-out), box-shadow 0.3s, border-color 0.3s;
}
.step:hover {
transform: translateY(-6px);
border-color: var(--electric-400);
box-shadow: var(--shadow-bta);
}
.step-num {
position: absolute;
top: -26px;
left: 1.7rem;
width: 52px;
height: 52px;
border-radius: 50%;
background: var(--navy-950);
border: 2px solid var(--electric-400);
color: var(--white);
font-family: var(--font-display);
font-style: italic;
font-weight: 900;
display: grid;
place-items: center;
box-shadow: 0 10px 24px -10px rgba(27, 63, 171, 0.6);
}
.step-icon { color: var(--blue-500); }
.step h3,
.step .elementor-heading-title { font-size: 1.08rem; font-weight: 800; }
.step p { font-size: 0.92rem; }
/* "To be announced" dashed card */
.tba-card {
background: var(--white);
border: 1px dashed #c9d4ea;
border-radius: var(--radius-card);
padding: 2.2rem 1.5rem;
text-align: center;
transition: border-color 0.3s, transform 0.3s var(--ease-out);
}
.tba-card:hover { border-color: var(--electric-400); transform: translateY(-4px); }
.tba-mark {
width: 54px;
height: 54px;
border-radius: 50%;
background: var(--ice-50);
color: var(--electric-400);
display: grid;
place-items: center;
font-family: var(--font-display);
font-style: italic;
font-weight: 900;
font-size: 1.5rem;
margin-inline: auto;
}
.tba-card p { font-weight: 600; color: var(--navy-800); font-size: 0.95rem; }
.tba-card small { font-size: 0.8rem; color: var(--text-body); }
/* --------------------------------------------------------------------------
Chips & pills
-------------------------------------------------------------------------- */
.chip {
display: inline-flex;
align-items: center;
gap: 0.45rem;
padding: 0.42rem 0.95rem;
border-radius: 12px;
background: var(--white);
border: 1px solid var(--border);
font-size: 0.83rem;
font-weight: 600;
color: var(--navy-800);
}
.chip svg { color: var(--blue-500); }
.pay-badge {
display: inline-block;
font-size: 0.72rem;
font-weight: 600;
padding: 0.3rem 0.7rem;
border-radius: 12px;
background: var(--ice-50);
border: 1px solid var(--border);
color: var(--navy-800);
}
/* Dashed info pill on navy sections */
.note-pill {
display: inline-flex;
align-items: center;
gap: 0.6rem;
padding: 0.7rem 1.4rem;
border-radius: 12px;
border: 1px dashed rgba(255, 255, 255, 0.3);
color: rgba(255, 255, 255, 0.75);
font-size: 0.875rem;
}
.note-pill svg { color: var(--electric-400); }
/* --------------------------------------------------------------------------
Image treatments
-------------------------------------------------------------------------- */
/* Generic rounded image (mockup uses 1rem on photos) */
.img-rounded,
.img-rounded img { border-radius: 1rem; overflow: hidden; }
/* Signature tilted photo frame — .tilt-frame on an Image widget/container */
.tilt-frame {
transform: skewX(-6deg);
border-radius: 1.1rem;
overflow: hidden;
border-left: 6px solid var(--blue-500);
box-shadow: var(--shadow-bta);
}
.tilt-frame img {
transform: skewX(6deg) scale(1.12);
width: 100%;
height: 100%;
object-fit: cover;
}
/* Floating dark badge over photos */
.float-badge {
display: inline-flex;
align-items: center;
gap: 0.65rem;
background: var(--navy-950);
color: var(--white);
border-radius: 0.9rem;
padding: 0.8rem 1.1rem;
font-size: 0.8rem;
font-weight: 600;
letter-spacing: 0.06em;
box-shadow: var(--shadow-bta);
}
.float-badge svg { color: var(--electric-400); }
/* --------------------------------------------------------------------------
Speaker cards — .speaker-card on the card container, .speaker-photo on the
image frame, .speaker-id on the name/role block. Add .speaker-card--light
on light backgrounds.
-------------------------------------------------------------------------- */
.speaker-photo {
transform: skewX(-6deg);
border-radius: 1rem;
overflow: hidden;
border-left: 5px solid var(--blue-500);
background: linear-gradient(150deg, #16337c 0%, #0e2a6b 55%, #0a1e4f 100%);
aspect-ratio: 4 / 5;
position: relative;
transition: transform 0.3s var(--ease-out), box-shadow 0.3s;
}
.speaker-card:hover .speaker-photo {
transform: skewX(-6deg) translateY(-6px);
box-shadow: 0 24px 50px -18px rgba(37, 99, 235, 0.55);
}
/* Counter-skewed portrait — works with a direct ![]()
child or the mockup's
.inner wrapper */
.speaker-photo > img,
.speaker-photo .inner {
position: absolute;
inset: 0;
transform: skewX(6deg) scale(1.12);
overflow: hidden;
}
.speaker-photo .inner { display: grid; place-items: center; }
.speaker-photo img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center 20%;
transition: transform 0.5s var(--ease-out);
}
.speaker-card:hover .speaker-photo .inner img { transform: scale(1.05); }
.speaker-card:hover .speaker-photo > img { transform: skewX(6deg) scale(1.18); }
/* Bottom veil anchoring the portrait in the charte */
.speaker-photo .glow {
position: absolute;
z-index: 2;
inset: 0;
background:
linear-gradient(to top, rgba(8, 22, 51, 0.62) 0%, rgba(8, 22, 51, 0.12) 38%, transparent 62%),
linear-gradient(to right, rgba(27, 63, 171, 0.28), transparent 55%);
pointer-events: none;
}
.speaker-monogram {
font-family: var(--font-display);
font-style: italic;
font-weight: 900;
font-size: 2.6rem;
color: rgba(255, 255, 255, 0.9);
text-shadow: 0 10px 30px rgba(8, 22, 51, 0.6);
}
/* Identity block — navy-section defaults */
.speaker-id h3,
.speaker-id .elementor-heading-title {
color: var(--white);
font-size: 1.02rem;
font-weight: 800;
letter-spacing: 0;
}
.speaker-id p { color: rgba(255, 255, 255, 0.62); font-size: 0.82rem; line-height: 1.45; }
.speaker-country {
display: inline-flex;
align-items: center;
gap: 0.42rem;
font-size: 0.7rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.12em;
color: rgba(255, 255, 255, 0.72);
}
.speaker-country .flag {
flex: none;
width: 16px;
height: 11px;
border-radius: 2px;
box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.28);
}
/* Light-background variant */
.speaker-card--light .speaker-id h3,
.speaker-card--light .speaker-id .elementor-heading-title { color: var(--navy-800); font-size: 1.05rem; }
.speaker-card--light .speaker-id p { color: var(--text-body); }
.speaker-card--light .speaker-country { color: var(--blue-500); }
.speaker-card--light .speaker-country .flag { box-shadow: 0 0 0 1px rgba(8, 22, 51, 0.16); }
/* --------------------------------------------------------------------------
Partner logo strip + marquee + partner CTA
For the marquee, duplicate the logo set once inside .marquee-track.
-------------------------------------------------------------------------- */
.marquee {
overflow: hidden;
-webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee-track {
display: flex;
gap: 1.2rem;
width: max-content;
animation: bta-marquee 36s linear infinite;
}
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes bta-marquee { to { transform: translateX(-50%); } }
.partner-logo {
flex: none;
width: 190px;
height: 92px;
padding: 1rem 1.2rem;
border-radius: 0.9rem;
background: var(--white);
border: 1px solid var(--border);
display: grid;
place-items: center;
transition: border-color 0.3s, box-shadow 0.3s, transform 0.3s var(--ease-out);
}
.partner-logo--wide { width: 268px; }
.partner-logo img {
max-width: 100%;
max-height: 60px;
object-fit: contain;
filter: grayscale(1);
opacity: 0.62;
transition: filter 0.35s, opacity 0.35s;
}
.partner-logo:hover {
border-color: var(--electric-400);
box-shadow: var(--shadow-soft);
transform: translateY(-3px);
}
.partner-logo:hover img { filter: none; opacity: 1; }
.partner-cta {
background-color: var(--navy-950);
background-image: radial-gradient(45% 90% at 90% 10%, rgba(37, 99, 235, 0.4), transparent 60%);
border-radius: var(--radius-card);
padding: 2.8rem 3rem;
color: var(--white);
box-shadow: var(--shadow-bta);
}
.partner-cta h3,
.partner-cta .elementor-heading-title {
color: var(--white);
font-size: clamp(1.3rem, 2.2vw, 1.7rem);
font-weight: 800;
font-style: italic;
}
.partner-cta p { color: rgba(255, 255, 255, 0.7); font-size: 0.95rem; }
/* --------------------------------------------------------------------------
Gallery items — .gallery-item on an Image widget, .gallery-tag on a label
-------------------------------------------------------------------------- */
.gallery-item {
position: relative;
border-radius: 1rem;
overflow: hidden;
display: block;
}
.gallery-item img {
width: 100%;
transition: transform 0.5s var(--ease-out);
}
.gallery-item::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(to top, rgba(8, 22, 51, 0.55), transparent 45%);
opacity: 0;
transition: opacity 0.3s;
pointer-events: none;
}
.gallery-item:hover img { transform: scale(1.06); }
.gallery-item:hover::after { opacity: 1; }
.gallery-tag {
position: absolute;
z-index: 2;
bottom: 0.9rem;
left: 0.9rem;
background: var(--blue-500);
color: var(--white);
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.08em;
padding: 0.32rem 0.8rem;
border-radius: 12px;
}
/* --------------------------------------------------------------------------
Contact blocks
-------------------------------------------------------------------------- */
.contact-form-card {
background: var(--white);
border: 1px solid var(--border);
border-radius: var(--radius-card);
padding: 2.6rem;
box-shadow: var(--shadow-soft);
}
.contact-card {
background: var(--white);
border: 1px solid var(--border);
border-radius: var(--radius-card);
padding: 1.8rem;
transition: border-color 0.3s, transform 0.3s var(--ease-out), box-shadow 0.3s;
}
.contact-card:hover {
border-color: var(--electric-400);
transform: translateY(-4px);
box-shadow: var(--shadow-bta);
}
.contact-icon {
width: 46px;
height: 46px;
border-radius: 13px;
background: var(--ice-50);
color: var(--blue-500);
display: grid;
place-items: center;
}
.contact-card h3,
.contact-card .elementor-heading-title { font-size: 1rem; font-weight: 800; }
.contact-card p { font-size: 0.88rem; }
.contact-card > a:not([class*="btn"]) {
font-weight: 600;
color: var(--blue-500);
font-size: 0.95rem;
word-break: break-word;
}
.contact-card > a:not([class*="btn"]):hover { color: var(--royal-600); }
.contact-card--dark {
background-color: var(--navy-950);
background-image: radial-gradient(60% 80% at 90% 10%, rgba(37, 99, 235, 0.42), transparent 62%);
border-color: transparent;
color: rgba(255, 255, 255, 0.75);
}
.contact-card--dark:hover { transform: none; box-shadow: var(--shadow-bta); }
.contact-card--dark h3,
.contact-card--dark .elementor-heading-title { color: var(--white); font-size: 1.15rem; font-style: italic; }
.contact-card--dark p { color: rgba(255, 255, 255, 0.72); }
.contact-social { display: flex; gap: 0.6rem; }
.contact-social a {
width: 36px;
height: 36px;
border-radius: 50%;
border: 1px solid rgba(255, 255, 255, 0.2);
display: grid;
place-items: center;
color: rgba(255, 255, 255, 0.75);
transition: background 0.25s, color 0.25s, border-color 0.25s;
}
.contact-social a:hover {
background: var(--blue-500);
border-color: var(--blue-500);
color: var(--white);
}
/* FAQ aside contact card (ice tint) */
.faq-contact-card {
background: var(--ice-50);
border: 1px solid var(--border);
border-radius: var(--radius-card);
padding: 1.8rem;
}
.faq-contact-card h4,
.faq-contact-card .elementor-heading-title { font-size: 1rem; font-weight: 800; }
.faq-contact-card a {
display: inline-flex;
align-items: center;
gap: 0.55rem;
color: var(--blue-500);
font-weight: 600;
font-size: 0.92rem;
}
.faq-contact-card a:hover { color: var(--royal-600); }
/* Map info rows (contact page access section) */
.map-embed {
border-radius: var(--radius-card);
overflow: hidden;
border: 1px solid var(--border);
box-shadow: var(--shadow-bta);
background: var(--white);
}
.map-info {
background: var(--white);
border: 1px solid var(--border);
border-radius: 1rem;
padding: 1.2rem 1.4rem;
display: flex;
gap: 0.9rem;
align-items: flex-start;
}
.map-info-icon {
flex: none;
width: 40px;
height: 40px;
border-radius: 11px;
background: var(--ice-50);
color: var(--blue-500);
display: grid;
place-items: center;
}
.map-info h4 {
font-size: 0.72rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.14em;
color: var(--text-body);
font-family: var(--font-body);
}
.map-info p { font-size: 0.9rem; color: var(--navy-800); font-weight: 500; line-height: 1.5; }
/* --------------------------------------------------------------------------
Topbar / header / footer palettes
(structure & stickiness are built natively; these classes carry the skin)
-------------------------------------------------------------------------- */
.topbar {
background: var(--navy-950);
color: rgba(255, 255, 255, 0.72);
font-size: 0.8rem;
}
.topbar svg { color: var(--electric-400); }
.topbar a { transition: color 0.25s; }
.topbar a:hover { color: var(--white); }
.topbar-note {
color: var(--electric-400);
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
font-size: 0.72rem;
}
/* Translucent blurred header; solid once sticky effects kick in
(.elementor-sticky--effects is added by Elementor Pro sticky) */
.site-header {
background: rgba(8, 22, 51, 0.42);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
transition: background 0.3s, box-shadow 0.3s;
}
.site-header.elementor-sticky--effects,
.site-header.is-scrolled {
background: rgba(8, 22, 51, 0.92);
box-shadow: 0 10px 40px -18px rgba(8, 22, 51, 0.8);
}
/* Header nav links — animated electric underline (disable the Nav Menu
widget's own pointer effect when using this) */
.main-nav a {
color: rgba(255, 255, 255, 0.82);
font-size: 0.925rem;
font-weight: 500;
position: relative;
padding: 0.35rem 0;
}
.main-nav a::after {
content: '';
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 2px;
border-radius: 2px;
background: var(--electric-400);
transform: scaleX(0);
transform-origin: left;
transition: transform 0.25s var(--ease-out);
}
.main-nav a:hover { color: var(--white); }
.main-nav a:hover::after { transform: scaleX(1); }
/* Footer */
.site-footer {
background: var(--navy-950);
color: rgba(255, 255, 255, 0.7);
font-size: 0.92rem;
}
.site-footer .elementor-heading-title { color: var(--white); }
.footer-brand .tagline {
font-family: var(--font-display);
font-style: italic;
font-weight: 700;
color: var(--white);
font-size: 1.05rem;
}
.footer-col h4,
.footer-col .elementor-heading-title {
color: var(--white);
font-size: 0.8rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.18em;
}
.footer-col a:hover { color: var(--electric-400); }
.footer-contact li { display: flex; align-items: center; gap: 0.65rem; }
.footer-contact svg { color: var(--electric-400); flex: none; }
.footer-social { display: flex; gap: 0.7rem; }
.footer-social a {
width: 40px;
height: 40px;
border-radius: 50%;
border: 1px solid rgba(255, 255, 255, 0.18);
display: grid;
place-items: center;
color: rgba(255, 255, 255, 0.75);
transition: background 0.25s, color 0.25s, border-color 0.25s;
}
.footer-social a:hover {
background: var(--blue-500);
border-color: var(--blue-500);
color: var(--white);
}
.footer-bottom {
border-top: 1px solid rgba(255, 255, 255, 0.1);
font-size: 0.8rem;
}
.footer-bottom a:hover { color: var(--electric-400); }
/* --------------------------------------------------------------------------
Motion accessibility
-------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
.marquee-track { animation: none; }
}
/* ===== BTA5 chrome — header / footer / marquee (appended after port.css) ===== */
/* Safety net: skewed decorative frames can poke a couple of px past the viewport.
`clip` (not `hidden`) keeps the sticky header working. */
html { overflow-x: clip; }
/* Topbar — the mockup keeps the bar on small screens but drops the note (≤860px)
and the venue item (≤640px). */
.bta-topbar .elementor-icon-list-text,
.bta-topbar a .elementor-icon-list-text { font-size: 0.8rem; }
.bta-topbar a:hover .elementor-icon-list-text { color: #ffffff; }
/* le lieu renvoie à la section « accès » de la page contact (mockup .venue-link) */
.bta-topbar a .elementor-icon-list-text {
text-decoration: underline; text-underline-offset: 3px;
text-decoration-color: rgba(255, 255, 255, 0.35);
transition: color 0.25s, text-decoration-color 0.25s;
}
.bta-topbar a:hover .elementor-icon-list-text { text-decoration-color: #ffffff; }
@media (max-width: 860px) {
.bta-topbar .elementor-widget-heading { display: none; }
.bta-topbar { justify-content: flex-start; }
}
/* La maquette garde la date *et* le lieu jusqu'en 390px (sa règle
`.topbar-meta span:nth-child(2)` ne vise qu'un , le lieu est un ). */
/* Sticky header — translucent over the hero, opaque once scrolled (mockup .site-header) */
.bta-site-header {
backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
transition: background-color 0.3s ease, box-shadow 0.3s ease;
}
.bta-site-header.elementor-sticky--effects {
background-color: rgba(8, 22, 51, 0.92) !important;
box-shadow: 0 10px 40px -18px rgba(8, 22, 51, 0.8);
}
/* The first section slides up under the header, exactly like the mockup's
`.hero { margin-top: -76px }` / `.page-hero { margin-top: -76px }`. */
.page-hero, .bta-hero { margin-top: -76px; padding-top: 76px; }
/* Homepage only: the brand is blown up over the hero until you scroll 56px
(mockup `.has-hero-brand .site-header:not(.is-brand-compact)`). */
body.home .bta-site-header .bta-brand {
transform-origin: left top;
transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
will-change: transform;
}
body.home .bta-site-header:not(.elementor-sticky--effects) .bta-brand {
transform: translateY(88px) scale(2.8);
}
body.home .bta-site-header:not(.elementor-sticky--effects) {
background-color: transparent !important;
border-bottom-color: transparent;
backdrop-filter: none; -webkit-backdrop-filter: none;
}
body.home .bta-site-header { overflow: visible; }
@media (prefers-reduced-motion: reduce) {
body.home .bta-site-header .bta-brand { transition: none; }
}
/* The blow-up follows the mockup's --brand-scale / --brand-shift at every tier,
including phones (the hero reserves the matching height, see .bta-hero below). */
@media (max-width: 860px) {
body.home .bta-site-header:not(.elementor-sticky--effects) .bta-brand { transform: translateY(80px) scale(2.6); }
}
@media (max-width: 640px) {
body.home .bta-site-header:not(.elementor-sticky--effects) .bta-brand { transform: translateY(72px) scale(2.5); }
}
@media (max-width: 390px) {
body.home .bta-site-header:not(.elementor-sticky--effects) .bta-brand { transform: translateY(64px) scale(2.6); }
}
/* Menu ouvert : la barre reprend sa forme compacte pour ne pas recouvrir le
panneau (mockup `.has-hero-brand.menu-open`). Le flou doit disparaître aussi :
un `backdrop-filter` fait de l'en-tête le bloc conteneur des enfants `fixed`,
ce qui enfermerait le tiroir dans les 76px de la barre. */
.bta-site-header:has(.elementor-menu-toggle.elementor-active) {
backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
}
/* Même raison, en permanence sous le point de rupture du menu : tant que le
flou est actif l'en-tête reste bloc conteneur, et le tiroir refermé (hors
écran à droite) allonge la page au lieu d'être rogné par le viewport. */
@media (max-width: 1080px) {
.bta-site-header, .bta-site-header.elementor-sticky--effects {
backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
}
}
body.home .bta-site-header:not(.elementor-sticky--effects):has(.elementor-menu-toggle.elementor-active) {
background-color: rgba(8, 22, 51, 0.92) !important;
border-bottom-color: rgba(255, 255, 255, 0.08);
}
body.home .bta-site-header:not(.elementor-sticky--effects):has(.elementor-menu-toggle.elementor-active) .bta-brand {
transform: none;
}
/* Anchor targets clear the sticky header */
[id] { scroll-margin-top: calc(76px + 1.5rem); }
/* Current page in the nav: blue label, no underline (the hover underline stays) */
.bta-site-header .elementor-nav-menu .elementor-item.elementor-item-active,
.bta-site-header .elementor-nav-menu .current-menu-item > a { color: #3b82f6; }
.bta-site-header .elementor-nav-menu .elementor-item.elementor-item-active::after,
.bta-site-header .elementor-nav-menu .elementor-item.elementor-item-active::before {
opacity: 0; transform: scaleX(0); background-color: transparent;
}
.bta-site-header .elementor-nav-menu .elementor-item.elementor-item-active:hover { color: #3b82f6; }
/* Brand sub-line "By Sakom" */
.bta-brand-sub .elementor-heading-title { font-family: 'Inter', sans-serif; font-size: 0.58rem; font-weight: 500; letter-spacing: 0.34em; text-transform: uppercase; color: rgba(255, 255, 255, 0.6); display: block; line-height: 1; }
/* le titre est un : inline, il hérite de l'interligne du corps (1,65em
résolu en 26,4 px) et décroche « By Sakom » du logo */
/* Header must stay one row on phones (mockup shrinks the logo instead of wrapping):
--brand-logo-h is 30px ≤640 and 26px ≤390, where "BY SAKOM" disappears. */
@media (max-width: 860px) {
.bta-site-header .bta-brand { width: auto !important; }
.bta-site-header > .e-con-inner { flex-wrap: nowrap; }
/* mockup: le « S'inscrire » gagne un halo bleu et de la surface tactile,
et perd sa flèche pour préserver la largeur. */
.bta-site-header .elementor-widget-button .elementor-button {
padding: 12px 19.2px !important; font-size: 14.4px !important;
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.22), 0 12px 26px -12px rgba(37, 99, 235, 0.9);
}
.bta-site-header .elementor-widget-button .elementor-button-icon { display: none; }
}
@media (max-width: 640px) {
.bta-site-header .bta-brand .elementor-widget-image img { width: 118px !important; }
.bta-brand-sub .elementor-heading-title { font-size: 0.53rem; letter-spacing: 0.28em; }
}
@media (max-width: 390px) {
.bta-site-header .bta-brand .elementor-widget-image img { width: 102px !important; }
/* mockup sets --brand-sakom-h: 0 at this width, header and footer alike */
.bta-brand-sub { display: none; }
.bta-site-header .elementor-widget-button .elementor-button { padding: 11.2px 15.2px !important; font-size: 13.7px !important; }
}
/* Footer */
.bta-footer { color: rgba(255, 255, 255, 0.7); }
.bta-footer-title .elementor-heading-title { font-family: 'Inter', sans-serif; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: #ffffff; }
.bta-footer-tagline p { font-family: 'Archivo', sans-serif; font-style: italic; font-weight: 700; color: #ffffff; font-size: 1.05rem; margin: 0; }
.bta-footer .elementor-icon-list-text { transition: color 0.2s ease; }
.bta-footer a:hover .elementor-icon-list-text { color: #3b82f6; }
.bta-footer-social .elementor-social-icon { background: transparent; border: 1px solid rgba(255, 255, 255, 0.18); transition: all 0.25s ease; }
.bta-footer-social .elementor-social-icon:hover { background: #2563eb; border-color: #2563eb; }
.bta-footer-social .elementor-social-icon i { color: #ffffff; }
/* Font Awesome 5 — celui que fournit Elementor — s'arrête à l'ancien oiseau :
on masque son glyphe et on peint le logo X actuel en masque SVG. */
.bta-footer-social .elementor-social-icon-twitter svg { display: none; }
.bta-footer-social .elementor-social-icon-twitter::after {
content: '';
width: 15px;
height: 15px;
background: #ffffff;
-webkit-mask: var(--bta-x-logo) center / contain no-repeat;
mask: var(--bta-x-logo) center / contain no-repeat;
}
.bta-footer-bottom { border-top: 1px solid rgba(255, 255, 255, 0.1); }
/* Elementor gives inline icon-lists a negative margin-inline (half the item gap),
which pushes the topbar/footer lists past the viewport edge on tablet widths. */
.bta-footer .elementor-inline-items,
.bta-topbar .elementor-inline-items { margin-inline: 0; row-gap: 8px; }
.bta-footer .elementor-inline-items .elementor-inline-item,
.bta-topbar .elementor-inline-items .elementor-inline-item { margin-inline: 0 22px; }
.bta-footer .elementor-inline-items .elementor-inline-item:last-child,
.bta-topbar .elementor-inline-items .elementor-inline-item:last-child { margin-inline-end: 0; }
.bta-footer-bottom p { margin: 0; font-size: 0.8rem; }
.bta-sakom-label .elementor-heading-title { font-family: 'Inter', sans-serif; font-size: 0.68rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255, 255, 255, 0.45); line-height: 1.5; display: block; }
/* le titre est un : sans display:block, c'est l'interligne figé du kit
(1.65em résolu en 26.4px) qui dicte la hauteur de la ligne, pas la sienne */
.bta-sakom-divider { border-top: 1px solid rgba(255, 255, 255, 0.1); padding-top: 24px; width: 100%; }
.bta-sakom-url .elementor-button { box-shadow: none; }
.bta-sakom-url .elementor-button-icon { font-size: 0.72em; }
.bta-footer-social .elementor-grid { display: flex; flex-wrap: wrap; gap: 10px; }
.bta-footer-social .elementor-social-icon { width: 40px; height: 40px; }
/* Footer columns: the mockup's real grid (1.4fr / 1.1fr, gap 3rem/4rem).
Percentage widths + a fixed gap overflowed and wrapped between 1081-1226px. */
.bta-footer-grid { display: grid !important; grid-template-columns: 1.4fr 1.1fr; gap: 48px 64px; align-items: start; }
.bta-footer-grid > .e-con { width: auto !important; }
@media (max-width: 860px) {
.bta-footer-grid { grid-template-columns: 1fr; gap: 40px; }
}
/* Keep the header on one row at every width (the mockup never wraps it) */
.bta-site-header > .e-con-inner { flex-wrap: nowrap; }
/* 1081-1180: the mockup swaps to a burger here, but Elementor's nav can only
collapse on a real breakpoint. Compress the nav so it still fits one row. */
@media (min-width: 1081px) and (max-width: 1230px) {
.bta-site-header .elementor-nav-menu--main .elementor-item { padding-left: 7px; padding-right: 7px; font-size: 14px; }
.bta-site-header .bta-brand { width: 168px !important; }
}
/* ===== Burger + menu mobile =====================================================
Le widget Menu de Pro produit un bouton à icône et un panneau déroulant sous
la barre. La maquette dessine trois barres dans un carré arrondi et ouvre un
tiroir latéral : tout est reconstitué ici en CSS, la couleur, la taille, le
trait et le rayon du bouton restant pilotés par les réglages Elementor du
widget (onglet Style → Bouton bascule). */
.bta-site-header .elementor-menu-toggle {
width: 42px; height: 42px; padding: 0 10px; flex: 0 0 auto;
flex-direction: column; justify-content: center; gap: 5px;
border-style: solid; border-color: rgba(255, 255, 255, 0.25);
}
/* Les deux barres extrêmes sont les pseudo-éléments du bouton : en colonne
flex, elles encadrent l'icône avec le même écart de 5px. L'icône Elementor
(un