/* ============================================================
BEETEE — Design System / Direction Artistique
Feuille de style prête à intégrer sur le site beetee.be
------------------------------------------------------------
Importer ce fichier sur TOUTES les pages :
Polices Google (à mettre dans le de chaque page) :
============================================================ */
:root{
/* — Couleurs — */
--bt-bg: #0a0a0a; /* fond global (noir profond) */
--bt-surface: #111111; /* cartes, panneaux */
--bt-surface-2: #0e0e0e; /* sections alternées / dégradés */
--bt-text: #fafafa; /* texte principal */
--bt-text-muted: rgba(250,250,250,.62); /* texte secondaire (WCAG AA ~5.3:1) */
--bt-text-faint: rgba(250,250,250,.62); /* labels, légendes — remonté de .4 (échec AA) à .62 */
--bt-line: rgba(255,255,255,.08); /* bordures / séparateurs */
--bt-line-strong: rgba(255,255,255,.14); /* bordures de boutons outline */
--bt-invert-bg: #fafafa; /* fond des boutons/badges clairs */
--bt-invert-text: #0a0a0a; /* texte sur fond clair */
/* Alias utilisés par les templates récents (tarifs, subsector, price teaser).
Toujours des valeurs DARK — le site n'a qu'un seul thème (sombre). */
--bt-soft: var(--bt-surface); /* fond doux de carte/encart */
--bt-bg-alt: var(--bt-surface); /* fond alterné (thead, tuiles) */
--bt-whatsapp: #25D366; /* CTA WhatsApp */
--bt-success: #3FB950;
--bt-warning: #E3A008;
--bt-danger: #F85149;
/* Accent éditorial — orange industriel (presse/DTF/risograph) */
--bt-accent: #FF5C28;
--bt-accent-soft: rgba(255, 92, 40, .14);
--bt-accent-glow: rgba(255, 92, 40, .55);
/* — Typographie — */
--bt-font-display: 'Archivo', system-ui, sans-serif; /* titres : 800–900, UPPERCASE */
--bt-font-body: 'Manrope', system-ui, sans-serif; /* texte courant */
/* — Rayons — */
--bt-radius-pill: 999px;
--bt-radius-card: 18px;
--bt-radius-sm: 12px;
--bt-radius-xs: 10px;
/* — Rythme vertical des sections — */
--bt-section-y: clamp(56px, 7vw, 104px);
--bt-gutter: clamp(20px, 4vw, 56px);
--bt-maxw: 1320px;
/* — Ombres — */
--bt-shadow-card: 0 40px 120px rgba(0,0,0,.6);
}
/* ---------- Reset minimal ----------
Note : @font-face pour Archivo + Manrope (self-hosted variable fonts) est
déclaré dans base.html.twig en \3c style> critique, pour profiter de Twig
asset() (webpack/Encore ne résoudrait pas l'URL /fonts/ depuis ce fichier). */
*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
margin:0;
background:var(--bt-bg);
color:var(--bt-text);
font-family:var(--bt-font-body);
-webkit-font-smoothing:antialiased;
position:relative;
}
/* Grain noise overlay — texture éditoriale subtile (presse/textile) */
body::before{
content:""; position:fixed; inset:0; z-index:1000;
pointer-events:none; opacity:.06; mix-blend-mode:overlay;
background-image:url("data:image/svg+xml;utf8,");
background-size:240px 240px;
}
@media (prefers-reduced-motion: reduce){
body::before{ opacity:.04; }
}
::selection{ background:var(--bt-accent); color:#0a0a0a; }
::-moz-selection{ background:var(--bt-accent); color:#0a0a0a; }
img{ display:block; max-width:100%; }
a{ color:inherit; }
/* ============================================================
TYPOGRAPHIE
============================================================ */
/* Eyebrow / sur-titre (au-dessus des H2) */
.bt-eyebrow{
font-family:var(--bt-font-display);
font-size:12px;
letter-spacing:.22em;
font-weight:700;
color:var(--bt-text-faint);
text-transform:uppercase;
margin:0 0 16px;
display:flex; align-items:center; gap:10px;
}
.bt-eyebrow::before{
content:""; width:14px; height:1px; background:var(--bt-accent);
display:inline-block; flex:0 0 auto;
}
/* Titres display — toujours en CAPITALES, très bold, interlignage serré */
.bt-h1,.bt-h2,.bt-h3{
font-family:var(--bt-font-display);
font-weight:900;
text-transform:uppercase;
letter-spacing:-.02em;
line-height:.92;
margin:0;
}
.bt-h1{ font-size:clamp(42px, 6.8vw, 104px); }
/* Mobile : « PERSONNALISATION » (16 caractères, Archivo 900) déborde avec le
plancher de 42px — on descend le plancher sous 640px pour tenir sur une ligne. */
@media (max-width:640px){
.bt-h1{ font-size:clamp(26px, 8.4vw, 42px); }
}
/* Variante éditoriale — second segment du titre en outline */
.bt-h1__alt{
color:transparent;
-webkit-text-stroke:1.5px var(--bt-text);
text-stroke:1.5px var(--bt-text);
}
@supports not (-webkit-text-stroke: 1px white){
.bt-h1__alt{ color:var(--bt-text-muted); -webkit-text-stroke:0; }
}
.bt-h2{ font-size:clamp(30px, 4.4vw, 60px); letter-spacing:-.01em; line-height:.95; }
.bt-h3{ font-size:clamp(26px, 3.4vw, 44px); letter-spacing:-.01em; }
.bt-lead{
font-size:clamp(16px, 1.6vw, 20px);
line-height:1.5;
color:var(--bt-text-muted);
}
/* ============================================================
MISE EN PAGE
============================================================ */
.bt-section{ padding:var(--bt-section-y) 0; border-top:1px solid var(--bt-line); }
.bt-section--soft{ background:linear-gradient(180deg, var(--bt-surface-2), var(--bt-bg)); }
.bt-container{ max-width:var(--bt-maxw); margin:0 auto; padding-left:var(--bt-gutter); padding-right:var(--bt-gutter); }
/* Grille éditoriale 2 colonnes (texte + média) — responsive.
Remplace les styles inline "display:grid;grid-template-columns:1.2fr 1fr;gap:48px". */
.bt-grid-2col{ display:grid; grid-template-columns:1.2fr 1fr; gap:48px; align-items:center; }
.bt-grid-2col--start{ align-items:start; }
.bt-grid-2col--media-first{ grid-template-columns:1fr 1.1fr; }
@media (max-width:760px){
.bt-grid-2col, .bt-grid-2col--media-first{ grid-template-columns:1fr; gap:32px; }
}
/* ============================================================
BOUTONS
============================================================ */
.bt-btn{
display:inline-flex; align-items:center; gap:10px;
font-weight:800; font-size:14px; letter-spacing:.03em;
padding:15px 26px; border-radius:var(--bt-radius-pill);
text-decoration:none; cursor:pointer; border:1px solid transparent;
transition:.2s ease;
}
/* Primaire — fond clair, texte sombre, glow accent subtil */
.bt-btn--primary{
background:var(--bt-invert-bg); color:var(--bt-invert-text);
position:relative; isolation:isolate; overflow:hidden;
box-shadow:0 0 0 0 var(--bt-accent-glow), 0 8px 24px -8px rgba(255,92,40,.35);
transition:.25s ease, box-shadow .35s ease;
}
/* Glow radial déposé SOUS le contenu (isolation + z:-1 garantissent que le texte reste lisible). */
.bt-btn--primary::before{
content:""; position:absolute; inset:-2px; border-radius:inherit;
background:radial-gradient(120% 80% at 50% 100%, var(--bt-accent-glow), transparent 70%);
opacity:0; transition:opacity .35s ease; z-index:-1;
}
.bt-btn--primary:hover{
background:#e6e6e6;
box-shadow:0 0 40px -4px var(--bt-accent-glow), 0 12px 36px -10px rgba(255,92,40,.55);
transform:translateY(-1px);
}
.bt-btn--primary:hover::before{ opacity:1; }
.bt-btn--primary:active{ transform:translateY(0); }
/* Secondaire — contour */
.bt-btn--outline{ border-color:var(--bt-line-strong); color:var(--bt-text); background:transparent; }
.bt-btn--outline:hover{ background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.4); }
/* WhatsApp */
.bt-btn--whatsapp{ background:var(--bt-whatsapp); color:var(--bt-invert-text); justify-content:center; }
.bt-btn--whatsapp:hover{ background:#1fbb58; }
/* Bouton flottant WhatsApp — rond, bas droite, au-dessus du contenu
mais sous le menu mobile (90) et la bannière cookies (999). */
.bt-wa-fab{
position:fixed; right:20px; bottom:max(20px, env(safe-area-inset-bottom));
width:56px; height:56px; border-radius:50%;
display:flex; align-items:center; justify-content:center;
background:var(--bt-whatsapp); color:#fff; z-index:80;
box-shadow:0 6px 18px rgba(0,0,0,.35);
transition:transform .15s ease, background .15s ease;
}
.bt-wa-fab:hover{ background:#1fbb58; transform:scale(1.08); }
.bt-wa-fab svg{ width:30px; height:30px; }
/* ============================================================
BADGES / PUCES
============================================================ */
.bt-badge-new{
font-size:9.5px; font-weight:800; letter-spacing:.08em;
color:var(--bt-accent); background:var(--bt-accent-soft);
border:1px solid var(--bt-accent);
padding:3px 10px; border-radius:var(--bt-radius-pill);
display:inline-flex; align-items:center; gap:6px;
text-transform:uppercase;
}
.bt-chip{
padding:10px 16px; border-radius:var(--bt-radius-pill);
border:1px solid var(--bt-line-strong); background:transparent;
color:rgba(250,250,250,.8); font-weight:700; font-size:13.5px;
font-family:var(--bt-font-body); cursor:pointer; transition:.18s;
}
.bt-chip:hover{ background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.3); }
.bt-chip--active{ background:var(--bt-invert-bg); color:var(--bt-invert-text); border-color:var(--bt-invert-bg); }
/* ============================================================
CARTES
============================================================ */
.bt-card{
background:var(--bt-surface);
border:1px solid var(--bt-line);
border-radius:var(--bt-radius-card);
overflow:hidden; transition:.25s ease;
}
.bt-card--hover:hover{ transform:translateY(-5px); border-color:rgba(255,255,255,.22); }
/* ============================================================
NAVBAR TRANSPARENTE (sur hero à image floutée)
============================================================ */
.bt-hero{ position:relative; overflow:hidden; }
/* Home hero: full viewport height. The flex centring fights the padding-bottom
inherited from .bt-hero__inner, so neutralise the bottom padding when in 100vh mode. */
#top.bt-hero{ min-height:100vh; min-height:100dvh; display:flex; flex-direction:column; }
#top.bt-hero .bt-hero__inner{
flex:1; width:100%;
display:flex; flex-direction:column; justify-content:center;
padding-top:clamp(88px, 9vh, 100px); /* sous la nav transparente */
padding-bottom:var(--bt-gutter);
}
.bt-hero__bg{ /* ![]()
en fond, légèrement flouté */
position:absolute; inset:0; width:100%; height:100%;
object-fit:cover; object-position:right center;
filter:blur(3px) brightness(.85) saturate(1.18) contrast(1.05);
transform:scale(1.06); z-index:0;
}
.bt-hero__veil{ /* voile dégradé gauche→droite, plus discret */
position:absolute; inset:0; z-index:0;
background:linear-gradient(100deg,
rgba(10,10,10,.78) 0%, rgba(10,10,10,.52) 42%,
rgba(10,10,10,.18) 72%, rgba(10,10,10,.05) 100%);
}
.bt-hero__veil-top{ /* assombrit le haut derrière la nav (contraste) */
position:absolute; left:0; right:0; top:0; height:220px; z-index:0;
background:linear-gradient(180deg,
rgba(10,10,10,.62) 0%, rgba(10,10,10,.22) 55%, rgba(10,10,10,0) 100%);
}
.bt-hero__veil-bottom{ /* fondu vers le noir en bas du hero */
position:absolute; left:0; right:0; bottom:0; height:180px; z-index:0;
background:linear-gradient(180deg, rgba(10,10,10,0), var(--bt-bg) 88%);
}
.bt-hero__inner{ position:relative; z-index:1; }
.bt-nav{
position:relative; z-index:2;
max-width:var(--bt-maxw); margin:0 auto;
display:flex; align-items:center; justify-content:space-between;
gap:32px; padding:20px var(--bt-gutter); flex-wrap:nowrap;
}
.bt-nav a{ color:rgba(255,255,255,.9); text-decoration:none; transition:color .2s ease; text-shadow:0 1px 10px rgba(0,0,0,.55); }
.bt-nav a:not(.bt-nav__cta):not(.bt-logo):hover{ color:var(--bt-accent); }
.bt-logo{ font-family:var(--bt-font-display); font-weight:800; font-size:25px; letter-spacing:.02em; text-decoration:none; color:var(--bt-text); }
/* ============================================================
BANDEAU TICKER (marquee)
============================================================ */
@keyframes bt-marquee{ from{transform:translateX(0)} to{transform:translateX(-50%)} }
.bt-ticker{ overflow:hidden; border-top:1px solid var(--bt-line); border-bottom:1px solid var(--bt-line); padding:18px 0; }
.bt-ticker__track{
display:flex; width:max-content; animation:bt-marquee 34s linear infinite;
font-family:var(--bt-font-display); font-weight:800; font-size:15px;
letter-spacing:.12em; text-transform:uppercase;
}
.bt-ticker__track > span{ padding:0 22px; color:rgba(250,250,250,.28); transition:color .2s ease; }
/* Séquence template : [mot, ·, mot, ·, ...] -> mots en positions impaires, séparateurs en paires.
On laisse les · à .28, et on alterne les mots eux-mêmes : bright / accent / bright / accent. */
.bt-ticker__track > span:nth-child(odd){ color:var(--bt-text); }
.bt-ticker__track > span:nth-child(4n+1){ color:var(--bt-accent); }
.bt-ticker:hover .bt-ticker__track{ animation-play-state:paused; }
/* ============================================================
ACCORDÉON FAQ
============================================================ */
.bt-faq{ border:1px solid var(--bt-line-strong); background:var(--bt-surface); border-radius:14px; overflow:hidden; }
.bt-faq > summary{
display:flex; align-items:center; justify-content:space-between; gap:16px;
padding:20px 24px; cursor:pointer; font-weight:700; font-size:15.5px; list-style:none;
}
.bt-faq > summary::-webkit-details-marker{ display:none; }
.bt-faq__plus{ font-size:22px; font-weight:400; transition:.2s; color:var(--bt-text-muted); }
.bt-faq[open] .bt-faq__plus{ transform:rotate(45deg); }
.bt-faq__body{ padding:0 24px 22px; font-size:14px; color:rgba(250,250,250,.6); line-height:1.6; }
/* ============================================================
DRAPEAUX (CSS, pas d'image) — pour le sélecteur de pays
width/height à définir sur l'élément ; voici les fonds :
============================================================ */
.bt-flag{ display:inline-block; width:18px; height:12px; border-radius:3px; box-shadow:inset 0 0 0 1px rgba(255,255,255,.18); flex:0 0 auto; }
.bt-flag--be{ background:linear-gradient(90deg,#000 33%,#FAE042 33% 66%,#ED2939 66%); }
.bt-flag--fr{ background:linear-gradient(90deg,#0055A4 33%,#fff 33% 66%,#EF4135 66%); }
.bt-flag--nl{ background:linear-gradient(180deg,#AE1C28 33%,#fff 33% 66%,#21468B 66%); }
.bt-flag--lu{ background:linear-gradient(180deg,#ED2939 33%,#fff 33% 66%,#00A1DE 66%); }
.bt-flag--de{ background:linear-gradient(180deg,#000 33%,#DD0000 33% 66%,#FFCE00 66%); }
.bt-flag--es{ background:linear-gradient(180deg,#AA151B 25%,#F1BF00 25% 75%,#AA151B 75%); }
/* Union Jack (drapeau UK) reconstitué en couches CSS : croix de St George
(rouge + liseré blanc) au-dessus des diagonales (blanc + rouge), champ bleu. */
.bt-flag--en{
background-color:#012169;
background-image:
linear-gradient(to bottom, transparent 41%, #C8102E 41% 59%, transparent 59%),
linear-gradient(to right, transparent 41%, #C8102E 41% 59%, transparent 59%),
linear-gradient(to bottom, transparent 32%, #fff 32% 68%, transparent 68%),
linear-gradient(to right, transparent 32%, #fff 32% 68%, transparent 68%),
linear-gradient(to bottom right, transparent 45%, #C8102E 45% 55%, transparent 55%),
linear-gradient(to bottom left, transparent 45%, #C8102E 45% 55%, transparent 55%),
linear-gradient(to bottom right, transparent 38%, #fff 38% 62%, transparent 62%),
linear-gradient(to bottom left, transparent 38%, #fff 38% 62%, transparent 62%);
background-repeat:no-repeat;
}
.bt-flag--it{ background:linear-gradient(90deg,#008C45 33%,#F4F5F0 33% 66%,#CD212A 66%); }
.bt-flag--pt{ background:linear-gradient(90deg,#046A38 40%,#DA291C 40%); }
/* ============================================================
ANNOUNCEMENT BAR (top)
============================================================ */
.bt-announce{
position:relative; display:flex; align-items:center; justify-content:center;
gap:10px; padding:9px var(--bt-gutter);
background:var(--bt-invert-bg); color:var(--bt-invert-text);
font-size:12.5px; font-weight:700; letter-spacing:.02em; text-align:center;
flex-wrap:wrap;
}
.bt-announce__star{ font-size:11px; color:var(--bt-accent); }
.bt-announce__link{ color:var(--bt-invert-text); text-decoration:underline; text-underline-offset:2px; font-weight:800; }
.bt-announce__lang{
position:absolute; right:var(--bt-gutter); top:50%; transform:translateY(-50%);
display:inline-flex; align-items:center; gap:7px;
font-size:11.5px; font-weight:800; letter-spacing:.04em;
cursor:pointer; color:var(--bt-invert-text);
}
@media (max-width: 820px){
.bt-announce__lang{ display:none; }
}
/* ============================================================
NAV — variantes & dropdown & sticky
============================================================ */
.bt-nav__group{ display:flex; align-items:center; gap:clamp(16px,2vw,28px); }
.bt-nav__links{ display:flex; align-items:center; gap:clamp(20px,2.4vw,32px); font-size:12.5px; font-weight:700; letter-spacing:.08em; white-space:nowrap; text-transform:uppercase; list-style:none; margin:0; padding:0; }
.bt-nav__links li{ position:relative; }
.bt-nav__cta{
display:inline-flex; align-items:center; gap:8px;
background:var(--bt-invert-bg); color:var(--bt-invert-text) !important;
font-weight:800; font-size:12.5px; letter-spacing:.04em;
padding:10px 18px; border-radius:var(--bt-radius-pill); text-shadow:none !important;
}
.bt-nav__cta:hover{ background:#e6e6e6; }
/* Sticky variant (fond opaque quand on scrolle) */
.bt-nav-wrap{ position:sticky; top:0; z-index:60; transition:background .25s ease, box-shadow .25s ease, backdrop-filter .25s ease; }
.bt-nav-wrap.is-sticky{ background:rgba(10,10,10,.88); backdrop-filter:blur(10px); box-shadow:0 1px 0 var(--bt-line); }
.bt-nav-wrap.is-sticky .bt-nav a{ text-shadow:none; }
/* Dropdown desktop */
.bt-nav__dropdown{
position:absolute; top:100%; left:0; min-width:240px;
background:var(--bt-surface); border:1px solid var(--bt-line);
border-radius:var(--bt-radius-sm); padding:12px 0; margin-top:8px;
opacity:0; visibility:hidden; transform:translateY(-6px); transition:.18s ease;
list-style:none;
}
.bt-nav__links li:hover > .bt-nav__dropdown,
.bt-nav__links li:focus-within > .bt-nav__dropdown{ opacity:1; visibility:visible; transform:none; }
.bt-nav__dropdown li{ display:block; }
.bt-nav__dropdown a{
display:block; padding:8px 18px; font-size:13px;
letter-spacing:.02em; text-transform:none; font-weight:600;
color:rgba(250,250,250,.8); text-shadow:none;
}
.bt-nav__dropdown a:hover{ background:rgba(255,255,255,.05); color:#fff; }
.bt-nav__dropdown-header{ padding:10px 18px 6px; font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--bt-text-faint); font-weight:800; }
.bt-nav__dropdown-divider{ height:1px; background:var(--bt-line); margin:8px 0; }
.bt-nav__lang-trigger{ display:inline-flex; align-items:center; gap:7px; background:none; border:0; padding:0; margin:0; font:inherit; color:inherit; cursor:pointer; }
/* Mobile */
.bt-nav__burger{
display:none; background:transparent; border:0; cursor:pointer;
width:42px; height:42px; align-items:center; justify-content:center;
}
.bt-nav__burger span,
.bt-nav__burger span::before,
.bt-nav__burger span::after{
display:block; width:22px; height:2px; background:var(--bt-text); position:relative;
transition:.2s;
}
.bt-nav__burger span::before{ content:""; position:absolute; top:-7px; left:0; }
.bt-nav__burger span::after{ content:""; position:absolute; top:7px; left:0; }
.bt-nav__mobile{
position:fixed; inset:0; z-index:90;
background:var(--bt-bg);
padding:24px var(--bt-gutter) 40px;
overflow-y:auto;
transform:translateX(100%); transition:transform .25s ease;
}
.bt-nav__mobile.is-open{ transform:none; }
.bt-nav__mobile-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:24px; }
.bt-nav__mobile-close{
background:transparent; border:0; color:var(--bt-text); font-size:28px; cursor:pointer;
width:42px; height:42px;
}
.bt-nav__mobile ul{ list-style:none; padding:0; margin:0 0 24px; }
.bt-nav__mobile li > a{ display:block; padding:12px 0; border-bottom:1px solid var(--bt-line); color:var(--bt-text); text-decoration:none; font-weight:700; font-size:16px; }
.bt-nav__mobile-header{ font-family:var(--bt-font-display); font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--bt-text-faint); margin:20px 0 6px; font-weight:800; }
.bt-nav__mobile-langs{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:24px; }
.bt-nav__mobile-langs a{ display:inline-flex; align-items:center; gap:8px; padding:8px 14px; border:1px solid var(--bt-line-strong); border-radius:var(--bt-radius-pill); font-size:13px; font-weight:700; text-decoration:none; color:var(--bt-text); }
@media (max-width: 960px){
.bt-nav__links, .bt-nav__group{ display:none; }
.bt-nav__burger{ display:inline-flex; }
}
@media (min-width: 961px){
.bt-nav__mobile{ display:none; }
}
/* ============================================================
FOOTER
============================================================ */
.bt-footer{
background:var(--bt-surface-2); border-top:1px solid var(--bt-line);
padding:clamp(56px,7vw,88px) 0 32px;
color:var(--bt-text-muted); font-size:14px;
}
.bt-footer__grid{
display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
gap:40px; max-width:var(--bt-maxw); margin:0 auto; padding:0 var(--bt-gutter);
}
.bt-footer__col h4,
.bt-footer__col-title{
font-family:var(--bt-font-display); font-size:11px; letter-spacing:.18em;
text-transform:uppercase; font-weight:800; color:var(--bt-text); margin:0 0 16px;
}
.bt-footer__col a{ color:var(--bt-text-muted); text-decoration:none; display:inline-block; padding:3px 0; }
.bt-footer__col a:hover{ color:var(--bt-text); }
.bt-footer__col p{ margin:0 0 10px; line-height:1.6; }
.bt-footer__bottom{
max-width:var(--bt-maxw); margin:48px auto 0; padding:24px var(--bt-gutter) 0;
border-top:1px solid var(--bt-line);
display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
font-size:12.5px; color:var(--bt-text-faint);
}
.bt-footer__socials{ display:flex; gap:10px; }
.bt-footer__socials a{
width:36px; height:36px; border-radius:50%;
display:inline-flex; align-items:center; justify-content:center;
background:var(--bt-surface); border:1px solid var(--bt-line-strong);
color:var(--bt-text);
}
.bt-footer__socials a:hover{ background:rgba(255,255,255,.06); }
.bt-footer__socials a svg{ width:16px; height:16px; }
.bt-footer__socials a.bt-footer__socials--wa{ background:var(--bt-whatsapp); color:var(--bt-invert-text); border-color:var(--bt-whatsapp); }
/* Skip link */
.skip-link{ position:absolute; left:-9999px; top:0; z-index:200; padding:10px 14px; background:var(--bt-invert-bg); color:var(--bt-invert-text); font-weight:700; }
.skip-link:focus{ left:8px; top:8px; }
/* ============================================================
HOME — Hero
============================================================ */
.bt-hero__inner{ max-width:var(--bt-maxw); margin:0 auto; padding:clamp(40px,5vw,72px) var(--bt-gutter) clamp(60px,8vw,120px); }
.bt-hero__content{ max-width:60ch; }
.bt-hero__badge{
position:absolute; top:clamp(96px,12vw,140px); right:var(--bt-gutter);
max-width:calc(100% - 2 * var(--bt-gutter));
background:rgba(10,10,10,.45); backdrop-filter:blur(6px);
border:1px solid rgba(255,255,255,.2); border-radius:10px;
padding:8px 13px; font-size:11px; font-weight:700; letter-spacing:.1em;
z-index:2;
}
/* Mobile: badge overflows on phones <414px with the FR translation. Hidden under 480 — same info appears in the Europe section. */
@media (max-width: 480px){
.bt-hero__badge{ display:none; }
}
.bt-hero__chips{ display:flex; gap:clamp(16px, 3vw, 36px); margin-top:clamp(28px, 4vw, 48px); flex-wrap:wrap; }
.bt-hero__chip-label{ font-weight:700; font-size:13.5px; letter-spacing:.04em; text-transform:uppercase; }
.bt-hero__ctas{ display:flex; gap:12px; flex-wrap:wrap; margin-top:34px; }
/* --- Home hero stagger reveal (entrée séquencée au chargement) --- */
@keyframes bt-fade-up{
from{ opacity:0; transform:translateY(28px); filter:blur(6px); }
to { opacity:1; transform:none; filter:blur(0); }
}
#top.bt-hero .bt-hero__badge,
#top.bt-hero .bt-hero__content > *{
animation:bt-fade-up 760ms cubic-bezier(.2,.7,.3,1) both;
}
#top.bt-hero .bt-hero__badge{ animation-delay: 80ms; }
#top.bt-hero .bt-eyebrow{ animation-delay:180ms; }
#top.bt-hero .bt-h1{ animation-delay:280ms; }
#top.bt-hero .bt-lead{ animation-delay:440ms; }
#top.bt-hero .bt-hero__ctas{ animation-delay:580ms; }
#top.bt-hero .bt-hero__chips{ animation-delay:720ms; }
@media (prefers-reduced-motion: reduce){
#top.bt-hero .bt-hero__badge,
#top.bt-hero .bt-hero__content > *{ animation:none; }
}
/* ============================================================
HOME — Services grid
============================================================ */
.bt-services-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(230px, 1fr)); gap:16px; }
.bt-service-card{ background:var(--bt-surface); border:1px solid var(--bt-line); border-radius:var(--bt-radius-card); overflow:hidden; display:block; text-decoration:none; color:inherit; transition:transform .25s ease, border-color .25s ease; position:relative; }
.bt-service-card:hover{ transform:translateY(-5px); border-color:rgba(255,255,255,.28); }
.bt-service-card__media{ position:relative; }
.bt-service-card__media::before{
content:""; position:absolute; inset:0; z-index:1;
background:linear-gradient(170deg, rgba(10,10,10,.15) 0%, rgba(10,10,10,0) 38%, rgba(10,10,10,.55) 100%);
pointer-events:none;
}
/* Flèche flottante sur le media (top-right) — n'empiète plus sur le texte du body. */
.bt-service-card__media::after{
content:""; position:absolute; top:14px; right:14px; z-index:2;
width:38px; height:38px; border-radius:50%;
border:1px solid rgba(255,255,255,.22);
background:rgba(10,10,10,.45); backdrop-filter:blur(8px);
background-image:url("data:image/svg+xml;utf8,");
background-repeat:no-repeat; background-position:center;
background-size:15px 15px;
transition:transform .25s cubic-bezier(.2,.7,.3,1), background-color .25s ease, border-color .25s ease;
}
.bt-service-card:hover .bt-service-card__media::after{
transform:translate(4px, -4px);
background-color:var(--bt-accent);
border-color:var(--bt-accent);
background-image:url("data:image/svg+xml;utf8,");
}
.bt-service-card__media{ aspect-ratio:1/1; overflow:hidden; }
.bt-service-card__media img{ width:100%; height:100%; object-fit:cover; display:block; }
.bt-service-card__body{ padding:20px; }
.bt-service-card__kicker{ font-family:var(--bt-font-display); font-size:11px; letter-spacing:.14em; font-weight:700; color:var(--bt-text-muted); text-transform:uppercase; }
.bt-service-card__title{ font-weight:800; font-size:17px; margin:7px 0 6px; }
.bt-service-card__desc{ font-size:13px; color:var(--bt-text-muted); line-height:1.45; margin:0; }
.bt-service-card__badge{ position:absolute; top:14px; left:14px; z-index:2; }
/* ============================================================
HOME — Section heading (eyebrow + h2 + lead aligned)
============================================================ */
.bt-section__head{ display:flex; align-items:flex-end; justify-content:space-between; gap:24px; flex-wrap:wrap; margin-bottom:40px; }
.bt-section__head p{ font-size:15px; color:rgba(250,250,250,.55); max-width:34ch; margin:0; line-height:1.55; }
/* ============================================================
HOME — Europe (pays + détails)
============================================================ */
.bt-europe{ display:grid; grid-template-columns:1fr 1.05fr; gap:24px; align-items:stretch; }
@media (max-width: 820px){ .bt-europe{ grid-template-columns:1fr; } }
.bt-europe__list{ display:flex; flex-direction:column; gap:10px; }
.bt-europe__pill{ display:flex; align-items:center; gap:14px; padding:18px 20px; background:var(--bt-surface); border:1px solid var(--bt-line); border-radius:14px; color:var(--bt-text); text-decoration:none; transition:.18s; cursor:pointer; font:inherit; text-align:left; width:100%; }
.bt-europe__pill:hover{ border-color:var(--bt-line-strong); background:rgba(255,255,255,.04); }
.bt-europe__pill.is-active{ border-color:var(--bt-accent); background:var(--bt-accent-soft); }
.bt-europe__pill:focus-visible{ outline:2px solid var(--bt-accent); outline-offset:2px; }
.bt-europe__pill .bt-flag{ width:24px; height:16px; }
.bt-europe__pill-label{ flex:1; font-weight:700; font-size:14px; }
.bt-europe__pill-delay{ font-size:12px; color:var(--bt-text-faint); font-weight:600; }
.bt-europe__card{ border:1px solid var(--bt-line-strong); background:var(--bt-surface); border-radius:20px; padding:clamp(26px,3vw,40px); display:flex; flex-direction:column; justify-content:space-between; min-height:300px; }
.bt-europe__card-row{ display:flex; justify-content:space-between; align-items:center; padding:16px 0; border-bottom:1px solid var(--bt-line); }
.bt-europe__card-row:last-child{ border-bottom:0; }
.bt-europe__card-row span:first-child{ font-size:13px; color:var(--bt-text-muted); font-weight:600; }
.bt-europe__card-row span:last-child{ font-weight:800; font-size:15px; }
/* Europe — cluster badge + eyebrow au-dessus du H2 */
.bt-europe__head-cluster{ display:flex; align-items:center; gap:12px; margin-bottom:16px; }
/* Europe — head de la carte (drapeau XL + bloc texte) */
.bt-europe__card-head{ display:flex; align-items:center; gap:16px; margin-bottom:28px; }
.bt-europe__card-title{ font-size:clamp(24px,3vw,40px); line-height:1; }
.bt-europe__card-tagline{ font-size:13px; color:var(--bt-text-muted); margin-top:6px; }
.bt-europe__card-cta{ margin-top:24px; justify-content:center; }
/* Drapeau grande taille (sur le head de la carte Europe) */
.bt-flag--lg{ width:48px; height:32px; }
/* Eyebrow inline (sans la marge bottom par défaut, reste dans le flux inline) */
.bt-eyebrow--inline{ margin:0; display:inline-flex; }
/* Helpers H2/H3/Lead */
.bt-h2--narrow{ max-width:16ch; }
.bt-h2--gap{ margin-bottom:40px; }
.bt-h2--gap-lg{ margin-bottom:48px; }
.bt-h2--faq{ margin-bottom:40px; font-size:clamp(28px,4vw,52px); }
.bt-lead--wide{ max-width:74ch; }
/* Container pour la zone intro (padding asymétrique) */
.bt-container--intro{ padding-top:48px; padding-bottom:0; }
/* ============================================================
HOME — Process grid
============================================================ */
.bt-process{ display:grid; grid-template-columns:repeat(auto-fit, minmax(190px, 1fr)); gap:1px; background:var(--bt-line-strong); border:1px solid var(--bt-line-strong); border-radius:18px; overflow:hidden; }
.bt-process__step{ background:var(--bt-bg); padding:28px 24px; }
.bt-process__num{ font-family:var(--bt-font-display); font-weight:800; font-size:30px; color:rgba(250,250,250,.3); }
.bt-process__label{ font-weight:800; font-size:15px; margin-top:14px; letter-spacing:.03em; text-transform:uppercase; }
.bt-process__desc{ font-size:13px; color:var(--bt-text-muted); margin-top:6px; line-height:1.45; }
/* ============================================================
HOME — Stats
============================================================ */
.bt-stats{
display:grid; grid-template-columns:repeat(auto-fit, minmax(180px, 1fr));
gap:clamp(24px,3vw,40px); max-width:var(--bt-maxw); margin:0 auto;
padding:clamp(56px,8vw,112px) var(--bt-gutter);
border-top:1px solid var(--bt-line);
align-items:end;
}
.bt-stats > div{ position:relative; }
.bt-stats > div + div::before{
content:""; position:absolute; left:calc(-1 * clamp(12px,1.5vw,20px)); top:8px;
width:1px; height:calc(100% - 24px); background:var(--bt-line);
}
.bt-stats__num{
font-family:var(--bt-font-display); font-weight:900;
font-size:clamp(56px, 9vw, 132px);
line-height:.86; letter-spacing:-.04em;
color:var(--bt-text);
transition:color .25s ease;
}
.bt-stats__num sup, .bt-stats__num small{
font-size:.4em; font-weight:700; letter-spacing:0; vertical-align:top;
color:var(--bt-accent);
}
/* Outline-only treatment on even-indexed numbers — rythme visuel */
.bt-stats > div:nth-child(even) .bt-stats__num{
color:transparent;
-webkit-text-stroke:1.5px var(--bt-text);
text-stroke:1.5px var(--bt-text);
}
.bt-stats > div:nth-child(even):hover .bt-stats__num{
-webkit-text-stroke-color:var(--bt-accent);
color:transparent;
}
.bt-stats > div:nth-child(odd):hover .bt-stats__num{
color:var(--bt-accent);
}
.bt-stats__label{
font-family:var(--bt-font-display);
font-size:11px; letter-spacing:.16em; text-transform:uppercase;
color:var(--bt-text-muted); margin-top:16px; font-weight:700;
max-width:18ch; line-height:1.4;
}
/* ============================================================
HOME — Gallery
============================================================ */
.bt-gallery{ display:grid; grid-template-columns:repeat(auto-fit, minmax(200px, 1fr)); gap:14px; }
.bt-gallery__item{ border-radius:14px; overflow:hidden; aspect-ratio:1/1; display:block; }
.bt-gallery__item img{ width:100%; height:100%; object-fit:cover; display:block; transition:.4s; }
.bt-gallery__item:hover img{ transform:scale(1.05); }
/* ============================================================
HOME — Testimonials
============================================================ */
.bt-testimonials{ display:grid; grid-template-columns:repeat(auto-fit, minmax(280px, 1fr)); gap:16px; }
.bt-testimonial{ border:1px solid var(--bt-line); background:var(--bt-surface); border-radius:18px; padding:30px; }
.bt-testimonial__mark{ font-family:var(--bt-font-display); font-size:40px; line-height:.6; color:rgba(255,255,255,.2); }
.bt-testimonial__body{ font-size:15px; line-height:1.55; color:rgba(250,250,250,.85); margin:14px 0 20px; }
.bt-testimonial__author{ font-weight:700; font-size:13.5px; }
.bt-testimonial__role{ font-size:12.5px; color:var(--bt-text-muted); }
/* ============================================================
HOME — CTA final
============================================================ */
.bt-cta-final{ max-width:var(--bt-maxw); margin:0 auto; padding:clamp(64px,8vw,120px) var(--bt-gutter); text-align:center; border-top:1px solid var(--bt-line); }
.bt-cta-final h2{ font-family:var(--bt-font-display); font-weight:900; text-transform:uppercase; letter-spacing:-.02em; font-size:clamp(34px,6vw,88px); line-height:.9; margin:0 0 24px; }
.bt-cta-final p{ font-size:16px; color:rgba(250,250,250,.55); max-width:42ch; margin:0 auto 32px; line-height:1.55; }
/* ============================================================
HOME — FAQ wrapper (réduit container pour confort de lecture)
============================================================ */
.bt-faq-list{ display:flex; flex-direction:column; gap:12px; max-width:920px; margin:0 auto; }
/* ============================================================
P4 — Scroll reveal + Scrollspy
============================================================ */
.bt-reveal{ opacity:0; transform:translateY(24px); transition:opacity .6s ease, transform .6s ease; }
.bt-reveal.is-revealed{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){ .bt-reveal{ opacity:1; transform:none; transition:none; } }
/* H2 underline scroll-into-view : barre accent qui scale de 0 à pleine largeur
quand la section parente reçoit la classe .is-revealed. */
/* display:block + width:fit-content (et non inline-block) : l'eyebrow étant
inline-flex, un H2 inline-level remonterait sur la même ligne que lui. */
.bt-section .bt-h2{ position:relative; display:block; width:fit-content; padding-bottom:14px; }
.bt-section .bt-h2::after{
content:""; position:absolute; left:0; bottom:0; height:2px;
width:clamp(72px, 8vw, 120px);
background:var(--bt-accent);
transform:scaleX(0); transform-origin:left center;
transition:transform 1.1s cubic-bezier(.2,.7,.3,1) .15s;
}
.bt-section.is-revealed .bt-h2::after{ transform:scaleX(1); }
@media (prefers-reduced-motion: reduce){
.bt-section .bt-h2::after{ transform:scaleX(1); transition:none; }
}
/* Nav link actif (scrollspy) */
.bt-nav__links a.is-active{ color:#fff; }
.bt-nav__links a.is-active::after{
content:""; display:block; height:2px; background:var(--bt-text);
margin-top:4px; border-radius:2px;
}
/* ============================================================
PAGE HERO (réutilisable pour pages métier P6)
============================================================ */
.bt-page-hero{
position:relative; overflow:hidden;
padding:clamp(60px,8vw,140px) 0 clamp(60px,8vw,120px);
border-bottom:1px solid var(--bt-line);
}
.bt-page-hero__bg{
position:absolute; inset:0; width:100%; height:100%;
object-fit:cover; object-position:center;
filter:brightness(.55) saturate(1.05); z-index:0;
}
.bt-page-hero__veil{
position:absolute; inset:0; z-index:0;
background:linear-gradient(180deg, rgba(10,10,10,.6) 0%, rgba(10,10,10,.4) 50%, rgba(10,10,10,.92) 100%);
}
.bt-page-hero__inner{
position:relative; z-index:1; max-width:var(--bt-maxw);
margin:0 auto; padding:0 var(--bt-gutter);
}
.bt-page-hero__content{ max-width:60ch; }
/* ============================================================
BLOG — Index/category + cartes article (P8)
============================================================ */
.bt-blog-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(280px, 1fr)); gap:20px; }
.bt-article-card{
display:flex; flex-direction:column; gap:16px;
background:var(--bt-surface); border:1px solid var(--bt-line);
border-radius:var(--bt-radius-card); padding:28px;
text-decoration:none; color:inherit; transition:.25s ease; height:100%;
}
.bt-article-card:hover{ transform:translateY(-4px); border-color:rgba(255,255,255,.22); }
.bt-article-card__category{
display:inline-block; align-self:flex-start;
font-family:var(--bt-font-display); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; font-weight:800;
color:var(--bt-invert-text); background:var(--bt-invert-bg);
padding:5px 11px; border-radius:var(--bt-radius-pill);
}
.bt-article-card__title{
font-family:var(--bt-font-display); font-weight:800; text-transform:uppercase;
font-size:18px; line-height:1.15; letter-spacing:-.01em; margin:0;
}
.bt-article-card__date{ font-size:12px; color:var(--bt-text-faint); letter-spacing:.04em; }
.bt-article-card__excerpt{ font-size:14px; color:var(--bt-text-muted); line-height:1.55; margin:0; flex:1; }
.bt-article-card__more{ font-size:13px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; color:var(--bt-text); }
.bt-article-card__more::after{ content:" →"; }
.bt-category-pills{ display:flex; flex-wrap:wrap; gap:10px; margin:0 0 48px; }
.bt-category-pill{
display:inline-flex; align-items:center;
padding:10px 18px; border-radius:var(--bt-radius-pill);
border:1px solid var(--bt-line-strong); background:transparent;
color:var(--bt-text); font-weight:700; font-size:13px;
text-decoration:none; transition:.18s;
}
.bt-category-pill:hover, .bt-category-pill.is-active{ background:var(--bt-invert-bg); color:var(--bt-invert-text); border-color:var(--bt-invert-bg); }
/* Typographie articles (s'applique automatiquement à tout ) */
article{ max-width:780px; margin:0 auto; padding:0 var(--bt-gutter); font-size:16px; line-height:1.7; color:var(--bt-text); }
/* Dans un .bt-container, le gutter et la largeur sont déjà gérés par le container. */
.bt-container > article{ max-width:none; padding:0; }
article > .process-box:first-of-type{ background:var(--bt-surface); border:1px solid var(--bt-line-strong); border-radius:18px; padding:36px; margin:32px 0; }
article h1{ font-family:var(--bt-font-display); font-weight:900; text-transform:uppercase; letter-spacing:-.02em; font-size:clamp(28px,4vw,52px); line-height:1; margin:0 0 16px; }
article h2{ font-family:var(--bt-font-display); font-weight:800; text-transform:uppercase; letter-spacing:-.01em; font-size:clamp(22px,2.8vw,32px); line-height:1.1; margin:48px 0 16px; }
article h3{ font-family:var(--bt-font-display); font-weight:800; font-size:clamp(18px,2vw,22px); line-height:1.2; margin:32px 0 12px; }
article p{ margin:0 0 18px; color:rgba(250,250,250,.78); }
article p strong{ color:#fff; font-weight:700; }
article ul, article ol{ margin:0 0 18px; padding-left:24px; color:rgba(250,250,250,.78); }
article ul li, article ol li{ margin-bottom:8px; }
article img{ border-radius:14px; }
article table{ width:100%; border-collapse:collapse; margin:24px 0; font-size:14px; }
article table th, article table td{ padding:12px 14px; border-bottom:1px solid var(--bt-line); text-align:left; vertical-align:top; }
article table th{ font-family:var(--bt-font-display); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--bt-text-faint); }
article blockquote{ border-left:3px solid var(--bt-text); padding:8px 0 8px 20px; margin:24px 0; color:rgba(250,250,250,.85); font-style:italic; }
article a:not(.bt-btn):not(.btn-raw):not(.uk-button){ color:#fff; text-decoration:underline; text-underline-offset:3px; }
/* ============================================================
P34 — Maillage interne fort (linking grid)
============================================================ */
.bt-linking{ display:grid; grid-template-columns:repeat(auto-fit, minmax(180px, 1fr)); gap:12px; }
.bt-linking__item{
display:flex; flex-direction:column; gap:6px;
background:var(--bt-surface); border:1px solid var(--bt-line);
border-radius:14px; padding:18px 20px;
text-decoration:none; color:var(--bt-text); transition:.18s ease;
position:relative;
}
.bt-linking__item:hover{ border-color:var(--bt-line-strong); background:rgba(255,255,255,.04); transform:translateY(-2px); }
.bt-linking__kicker{ font-family:var(--bt-font-display); font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--bt-text-faint); font-weight:800; }
.bt-linking__title{ font-weight:700; font-size:14.5px; line-height:1.35; }
.bt-linking__arrow{ position:absolute; top:18px; right:20px; color:var(--bt-text-faint); font-size:14px; }
/* ============================================================
P36 — Optimisation GEO (TLDR + summary)
============================================================ */
.bt-tldr{ max-width:980px; margin:0 auto; }
.bt-tldr ul li{ position:relative; }
.bt-tldr ul li::before{
content:"✦"; position:absolute; top:14px; right:18px;
color:var(--bt-text-faint); font-size:11px;
}
.bt-summary{
margin-top:48px; padding:28px 32px;
background:var(--bt-surface); border:1px solid var(--bt-line-strong);
border-radius:18px; border-left:4px solid var(--bt-text);
}
.bt-summary > .bt-eyebrow{ margin-bottom:12px; }
.bt-summary p{ font-size:15px; line-height:1.6; color:var(--bt-text-muted); margin:0; }
/* ============================================================
PAGE PAYS — Bandeau pays (P7)
============================================================ */
.bt-country-bar{
display:flex; align-items:center; justify-content:space-between; gap:16px;
max-width:var(--bt-maxw); margin:0 auto;
padding:16px var(--bt-gutter);
border-bottom:1px solid var(--bt-line);
font-size:13px; flex-wrap:wrap;
}
.bt-country-bar__lead{ display:inline-flex; align-items:center; gap:12px; font-weight:700; color:var(--bt-text); }
.bt-country-bar__lead .bt-flag{ width:24px; height:16px; }
.bt-country-bar__name{ font-family:var(--bt-font-display); letter-spacing:.08em; text-transform:uppercase; font-size:12.5px; }
.bt-country-bar__kicker{ color:var(--bt-text-faint); font-weight:600; }
.bt-country-bar__links{ display:inline-flex; align-items:center; gap:16px; color:var(--bt-text-muted); }
.bt-country-bar__links a{ color:var(--bt-text-muted); text-decoration:none; font-weight:600; }
.bt-country-bar__links a:hover{ color:var(--bt-text); }
/* Shim UIkit legacy retiré : plus aucune classe legacy (uk, hero-section,
raw-card, btn-raw, process-box, section-title) utilisée dans les templates. */
/* Breadcrumb + See-also */
.bt-breadcrumb{ padding:20px 24px 8px; max-width:1280px; margin:0 auto; }
.bt-breadcrumb__list{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:8px; font-size:14px; color:var(--bt-text-muted); }
.bt-breadcrumb__item{ display:inline-flex; align-items:center; gap:8px; }
.bt-breadcrumb__item a{ color:var(--bt-text-muted); text-decoration:none; }
.bt-breadcrumb__item a:hover{ color:var(--bt-text); text-decoration:underline; }
.bt-breadcrumb__item [aria-current="page"]{ color:var(--bt-text); font-weight:600; }
.bt-breadcrumb__sep{ color:var(--bt-text-faint); }
.bt-see-also{ padding:40px 0; }
.bt-see-also__grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:16px; }
.bt-see-also__item{ display:flex; flex-direction:column; gap:6px; padding:18px 20px; border:1px solid var(--bt-line-strong); border-radius:14px; text-decoration:none; color:var(--bt-text); background:var(--bt-surface); transition:transform .15s ease,box-shadow .15s ease; }
.bt-see-also__item:hover{ transform:translateY(-2px); box-shadow:0 6px 24px rgba(0,0,0,.35); }
.bt-see-also__kicker{ font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--bt-text-muted); }
.bt-see-also__title{ font-weight:600; font-size:16px; line-height:1.3; }
/* ===== Article de blog (migration UIkit -> bt-*) =====
Prose sombre, responsive. Les gabarits blog wrappent leur corps dans
.bt-article : les h2/p/ul/table n'ont plus besoin de classes. */
.bt-article{ font-size:16.5px; line-height:1.7; color:var(--bt-text); }
.bt-article h2{ font-family:var(--bt-font-display); font-size:clamp(24px,3vw,36px); line-height:1.05; letter-spacing:-.01em; margin:44px 0 16px; }
.bt-article h3{ font-family:var(--bt-font-display); font-size:clamp(19px,2.2vw,24px); line-height:1.15; margin:32px 0 12px; }
.bt-article p{ margin:0 0 18px; }
.bt-article ul,.bt-article ol{ margin:0 0 18px; padding-left:22px; }
.bt-article li{ margin-bottom:8px; }
.bt-article img{ max-width:100%; height:auto; border-radius:12px; }
.bt-article a{ color:inherit; text-decoration:underline; }
.bt-article blockquote{ border-left:3px solid var(--bt-line); margin:0 0 18px; padding:6px 0 6px 18px; color:var(--bt-text-muted); }
.bt-article .bt-table-wrap{ overflow-x:auto; border:1px solid var(--bt-line); border-radius:12px; background:var(--bt-surface); margin:0 0 22px; }
.bt-article table{ width:100%; border-collapse:collapse; font-size:14.5px; min-width:560px; }
.bt-article th,.bt-article td{ padding:12px 14px; text-align:left; border-bottom:1px solid var(--bt-line); }
.bt-article th{ font-weight:600; }
.bt-article tr:last-child td{ border-bottom:0; }
.bt-article-meta{ font-size:13.5px; color:var(--bt-text-muted); margin:10px 0 0; }
.bt-article-hero-img{ width:100%; height:auto; max-height:480px; object-fit:cover; border-radius:14px; border:1px solid var(--bt-line); }
/* Variante pour les visuels portrait/carrés : pas de recadrage en bannière, image entière centrée */
.bt-article-hero-img--portrait{ width:auto; max-width:100%; max-height:460px; object-fit:contain; display:block; margin:0 auto; background:var(--bt-surface); }
/* ============================================================
COOKIE CONSENT BANNER (migré depuis l'ancien app.css lors de
la fusion CSS — tokens bt-*)
============================================================ */
#cookie-banner{
position:fixed; bottom:0; left:0; right:0; z-index:999;
background:var(--bt-surface); border-top:1px solid var(--bt-line);
padding:14px 24px; display:flex; align-items:center; justify-content:space-between;
gap:16px; animation:cookieSlideUp .3s ease;
}
@keyframes cookieSlideUp{ from{ transform:translateY(100%); } to{ transform:translateY(0); } }
.cookie-banner__text{ margin:0; font-size:.83rem; opacity:.85; flex:1; padding-left:60px; }
.cookie-banner__text a{ color:var(--bt-text); text-decoration:underline; opacity:.7; }
.cookie-banner__text a:hover{ opacity:1; }
.cookie-banner__actions{ display:flex; gap:10px; flex-shrink:0; }
.cookie-btn{
font-family:var(--bt-font-body); font-size:.8rem; font-weight:600;
padding:8px 18px; border-radius:20px; border:none; cursor:pointer;
transition:opacity .2s; line-height:1;
}
.cookie-btn:hover{ opacity:.75; }
.cookie-btn--accept{ background:var(--bt-invert-bg); color:var(--bt-invert-text); }
.cookie-btn--decline{ background:transparent; color:var(--bt-text); border:1px solid var(--bt-line); }
@media (max-width:640px){
#cookie-banner{ flex-direction:column; align-items:flex-start; gap:10px; padding:14px 16px; }
.cookie-banner__text{ padding-left:0; }
}
/* ============================================================
UTILITAIRES (Phase 5 P5.6 — réduction des styles inline récurrents)
============================================================ */
.bt-section--flush{ border-top:0; }
.bt-link-muted{ color:var(--bt-text-muted); text-decoration:none; }
.bt-link-muted:hover{ color:var(--bt-text); }
.bt-link-underline{ color:inherit; text-decoration:underline; text-underline-offset:3px; }
/* ============================================================
DEVIS SIMPLIFIÉ WHATSAPP (partials/_quote_widget.html.twig)
============================================================ */
.bt-quote__panel{
display:grid; grid-template-columns:minmax(280px,5fr) 7fr; gap:clamp(28px,4vw,56px);
border:1px solid var(--bt-line-strong); border-radius:18px;
background:linear-gradient(135deg, var(--bt-surface) 0%, var(--bt-surface-2) 100%);
padding:clamp(24px,3.5vw,44px);
position:relative; overflow:hidden;
}
.bt-quote__panel::before{
content:""; position:absolute; inset:0 0 auto 0; height:2px;
background:linear-gradient(90deg, var(--bt-accent), transparent 70%);
}
.bt-quote__title{ font-size:clamp(24px,2.8vw,36px); margin-bottom:10px; }
.bt-quote__subtitle{ color:var(--bt-text-muted); font-size:15px; line-height:1.6; max-width:44ch; }
.bt-quote__trust{ list-style:none; margin:18px 0 0; padding:0; display:grid; gap:8px; }
.bt-quote__trust li{
font-size:13.5px; color:var(--bt-text-muted); display:flex; align-items:baseline; gap:8px;
}
.bt-quote__trust li::before{ content:"✓"; color:var(--bt-accent); font-weight:700; flex:none; }
.bt-quote__context{
margin-top:18px; font-size:13px; color:var(--bt-text-muted);
border:1px solid var(--bt-line); border-radius:999px; padding:7px 14px;
display:inline-block; background:var(--bt-accent-soft);
}
.bt-quote__context strong{ color:var(--bt-text); }
.bt-quote__form{ display:grid; grid-template-columns:1fr 1fr; gap:16px 18px; align-content:start; }
.bt-quote__field{ display:flex; flex-direction:column; gap:6px; }
.bt-quote__label{
font-size:11px; font-weight:800; letter-spacing:.12em; text-transform:uppercase;
color:var(--bt-text-muted);
}
.bt-quote__select{
appearance:none; -webkit-appearance:none;
width:100%; min-height:46px; padding:11px 38px 11px 14px;
font:inherit; font-size:14.5px; color:var(--bt-text);
background:var(--bt-bg-alt); border:1px solid var(--bt-line-strong); border-radius:10px;
background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2712%27 height=%278%27 viewBox=%270 0 12 8%27%3E%3Cpath d=%27M1 1l5 5 5-5%27 fill=%27none%27 stroke=%27%23FF5C28%27 stroke-width=%272%27/%3E%3C/svg%3E");
background-repeat:no-repeat; background-position:right 14px center;
cursor:pointer; transition:border-color .15s ease;
}
.bt-quote__select:hover{ border-color:rgba(255,255,255,.28); }
.bt-quote__select:focus-visible{ outline:2px solid var(--bt-accent); outline-offset:2px; }
.bt-quote__hint{ font-size:12px; color:var(--bt-text-muted); margin:0; }
.bt-quote__field--full{ grid-column:1 / -1; }
.bt-quote__checks{
display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:8px 10px;
}
.bt-quote__check{
display:flex; align-items:center; gap:9px;
min-height:44px; padding:8px 12px;
font-size:14px; color:var(--bt-text); cursor:pointer;
background:var(--bt-bg-alt); border:1px solid var(--bt-line-strong); border-radius:10px;
transition:border-color .15s ease, background-color .15s ease;
}
.bt-quote__check:hover{ border-color:rgba(255,255,255,.28); }
.bt-quote__check input{
flex:none; width:17px; height:17px; margin:0; accent-color:var(--bt-accent); cursor:pointer;
}
.bt-quote__check:has(input:checked){
border-color:var(--bt-accent); background:var(--bt-accent-soft);
}
.bt-quote__check:has(input:focus-visible){ outline:2px solid var(--bt-accent); outline-offset:2px; }
.bt-quote__actions{ grid-column:1 / -1; display:flex; flex-direction:column; gap:14px; margin-top:4px; }
.bt-quote__submit{ width:100%; justify-content:center; text-align:center; }
.bt-quote__preview{
margin:0; font-size:13px; line-height:1.55; color:var(--bt-text-muted);
border:1px dashed var(--bt-line-strong); border-radius:10px; padding:12px 14px;
}
.bt-quote__preview-label{
display:block; font-size:10.5px; font-weight:800; letter-spacing:.14em;
text-transform:uppercase; color:var(--bt-text-faint); margin-bottom:5px;
}
@media (max-width:960px){
.bt-quote__panel{ grid-template-columns:1fr; }
}
@media (max-width:600px){
.bt-quote__form{ grid-template-columns:1fr; }
}
/* ============================================================
BLOG — classes scopées des articles (bt-ax-*)
Remplacent les anciens styles inline (migration DA). Déclarées
en fin de fichier pour l'emporter sur .bt-h1/.bt-h2 de base.
============================================================ */
/* Cartes / boîtes */
.bt-ax-gallery__item{ border:1px solid var(--bt-line); border-radius:12px; padding:12px; background:var(--bt-surface); flex:1 1 280px; text-align:center; }
/* Les vignettes remplissent la carte : ratio carré uniforme, recadrage centré,
quelle que soit la classe portée par l'image dans les articles */
.bt-ax-gallery__img,
.bt-ax-gallery__item img{ width:100%; height:auto; aspect-ratio:1/1; object-fit:cover; border-radius:8px; display:block; }
.bt-ax-grid__item{ border:1px solid var(--bt-line); border-radius:12px; padding:16px; background:var(--bt-surface); flex:1 1 280px; }
.bt-ax-case{ border:1px solid var(--bt-line); border-radius:12px; padding:18px 20px; background:var(--bt-surface); margin:0 0 14px; }
.bt-ax-box{ border:1px solid var(--bt-line); border-radius:12px; padding:16px; background:var(--bt-surface); }
/* Conteneurs flex */
.bt-ax-grid{ display:flex; flex-wrap:wrap; gap:16px; }
.bt-ax-grid--mt24{ display:flex; flex-wrap:wrap; gap:16px; margin-top:24px; }
.bt-ax-grid--mb22{ display:flex; flex-wrap:wrap; gap:16px; margin:0 0 22px; }
.bt-ax-stack{ display:flex; flex-direction:column; gap:16px; margin:22px 0; }
.bt-ax-btnrow--mt20{ margin-top:20px; display:flex; gap:12px; flex-wrap:wrap; }
.bt-ax-btnrow--mt24{ margin-top:24px; display:flex; gap:12px; flex-wrap:wrap; }
.bt-ax-btnrow--center{ display:flex; justify-content:center; gap:12px; flex-wrap:wrap; }
/* Images */
.bt-ax-img{ max-width:100%; height:auto; }
.bt-ax-img--contain{ max-width:100%; height:auto; object-fit:contain; }
/* Espacements */
.bt-ax-figure{ margin:28px 0; }
.bt-ax-m0{ margin:0; }
.bt-ax-mb8{ margin:0 0 8px; }
.bt-ax-mb10{ margin:0 0 10px; }
.bt-ax-mb28{ margin:0 0 28px; }
.bt-ax-mt18{ margin-top:18px; }
.bt-ax-mt20{ margin-top:20px; }
.bt-ax-mt24{ margin-top:24px; }
.bt-ax-mt32{ margin-top:32px; }
.bt-ax-mt36{ margin-top:36px; }
.bt-ax-mt56{ margin-top:56px; }
.bt-ax-mt64{ margin-top:64px; }
.bt-ax-center{ text-align:center; }
/* Titres / intro (fusionnés à .bt-h1 / .bt-h2 / .bt-lead) */
.bt-ax-intro{ max-width:64ch; margin-bottom:48px; }
.bt-ax-h1{ font-size:clamp(30px,4vw,52px); margin:8px 0 0; }
.bt-ax-h1--mb8{ font-size:clamp(30px,4vw,52px); margin:0 0 8px; }
.bt-ax-h2{ font-size:clamp(26px,3.2vw,40px); margin:0 0 24px; }
.bt-ax-h2--sm{ font-size:clamp(24px,3vw,40px); margin:0 0 24px; }
.bt-ax-h2--smb{ font-size:clamp(24px,3vw,40px); margin-bottom:24px; }
.bt-ax-hero-h1{ font-size:clamp(36px,5vw,72px); }
.bt-ax-cat-h1{ font-size:clamp(32px,4.5vw,64px); margin-bottom:18px; }
.bt-funnel-section{scroll-margin-top:88px}
.bt-quote-modal[hidden]{display:none}
.bt-quote-modal{position:fixed;inset:0;z-index:1000;display:grid;place-items:center;padding:clamp(10px,2vw,28px)}
.bt-quote-modal__backdrop{position:absolute;inset:0;background:rgba(0,0,0,.72);backdrop-filter:blur(10px)}
.bt-quote-modal__dialog{position:relative;width:min(1120px,100%);max-height:min(88vh,920px);overflow:auto;border-radius:26px;box-shadow:0 32px 120px rgba(0,0,0,.58);animation:bt-modal-in .18s ease-out}
.bt-quote-modal__dialog .bt-container{width:100%;max-width:none;padding:0}
.bt-quote-modal__dialog .bt-funnel{max-width:none;border-radius:26px}
.bt-quote-modal__close{position:absolute;top:14px;right:14px;z-index:3;display:grid;place-items:center;width:42px;height:42px;border:1px solid var(--bt-line);border-radius:50%;background:rgba(10,10,10,.86);color:var(--bt-text);font-size:26px;line-height:1;cursor:pointer}
.bt-quote-modal__close:hover,.bt-quote-modal__close:focus-visible{border-color:var(--bt-accent);outline:0;color:var(--bt-accent)}
html.bt-quote-modal-open,body.bt-quote-modal-open{overflow:hidden}
.bt-funnel{display:grid;grid-template-columns:minmax(240px,.72fr) minmax(0,1.55fr);max-width:1120px;margin:0 auto;overflow:hidden;border:1px solid var(--bt-line);border-radius:24px;background:var(--bt-surface);box-shadow:0 28px 80px rgba(0,0,0,.25)}
.bt-funnel__aside{padding:clamp(28px,4vw,52px);background:#101010;border-right:1px solid var(--bt-line)}
.bt-funnel__aside .bt-h2{font-size:clamp(28px,3.5vw,46px);margin:10px 0 16px}
.bt-funnel__aside-copy{color:var(--bt-text-muted);line-height:1.7}
.bt-funnel__trust{list-style:none;padding:0;margin:28px 0;display:grid;gap:12px}
.bt-funnel__trust li{display:flex;gap:10px;font-size:14px;font-weight:700}
.bt-funnel__trust li::before{content:"✓";color:var(--bt-accent)}
.bt-funnel__help{margin:32px 0 0;padding-top:24px;border-top:1px solid var(--bt-line);color:var(--bt-text-muted);font-size:13px;line-height:1.6}
.bt-funnel__help a{color:var(--bt-text);text-decoration:underline;text-underline-offset:3px}
.bt-funnel__main{min-width:0;padding:clamp(24px,4vw,52px)}
.bt-funnel__progress{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:38px}
.bt-funnel__progress-item{display:flex;align-items:center;gap:8px;color:var(--bt-text-muted);font-size:12px;font-weight:800;letter-spacing:.02em}
.bt-funnel__progress-item::after{content:"";height:2px;flex:1;margin-left:4px;background:var(--bt-line)}
.bt-funnel__progress-item:last-child::after{display:none}
.bt-funnel__progress-item>span{display:grid;place-items:center;width:28px;height:28px;flex:none;border:1px solid var(--bt-line);border-radius:50%}
.bt-funnel__progress-item.is-active{color:var(--bt-text)}
.bt-funnel__progress-item.is-active>span{border-color:var(--bt-accent);background:var(--bt-accent);color:#080808}
.bt-funnel__progress-item.is-complete>span{border-color:var(--bt-accent);color:var(--bt-accent)}
.bt-funnel__step{min-width:0;padding:0;margin:0;border:0;animation:bt-funnel-in .22s ease-out}
.bt-funnel__step[hidden]{display:none}
.bt-funnel__step legend{width:100%;padding:0;color:var(--bt-text);font:800 clamp(24px,3vw,34px)/1.15 var(--bt-font-display)}
.bt-funnel__step legend>span{display:block;margin-bottom:8px;color:var(--bt-accent);font:800 11px/1.2 var(--bt-font-body);letter-spacing:.12em;text-transform:uppercase}
.bt-funnel__step-copy{margin:10px 0 28px;color:var(--bt-text-muted);line-height:1.6}
.bt-funnel__group{margin-top:24px}
.bt-funnel__label{display:block;margin:0 0 10px;color:var(--bt-text);font-size:14px;font-weight:800}
.bt-funnel__label span{color:var(--bt-text-muted);font-size:12px;font-weight:500}
.bt-funnel__qty{margin-top:14px}
.bt-funnel__qty[hidden]{display:none}
.bt-funnel__sublabel{margin:0 0 8px;color:var(--bt-text-muted);font-size:12.5px;font-weight:800;letter-spacing:.04em;text-transform:uppercase}
.bt-choice-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.bt-choice-grid--compact{grid-template-columns:repeat(auto-fit,minmax(116px,1fr))}
.bt-choice{position:relative;min-width:0;cursor:pointer}
.bt-choice input{position:absolute;opacity:0;pointer-events:none}
.bt-choice span{display:flex;align-items:center;justify-content:center;min-height:50px;padding:10px 12px;border:1px solid var(--bt-line);border-radius:12px;background:rgba(255,255,255,.025);color:var(--bt-text-muted);font-size:13px;font-weight:750;text-align:center;transition:border-color .16s,background .16s,color .16s,transform .16s}
.bt-choice:hover span{border-color:rgba(255,255,255,.3);color:var(--bt-text);transform:translateY(-1px)}
.bt-choice input:checked+span{border-color:var(--bt-accent);background:rgba(211,255,0,.1);color:var(--bt-text);box-shadow:inset 0 0 0 1px var(--bt-accent)}
.bt-choice input:focus-visible+span{outline:2px solid var(--bt-accent);outline-offset:3px}
.bt-funnel__fields{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.bt-funnel__input{width:100%;min-height:50px;padding:13px 14px;border:1px solid var(--bt-line);border-radius:12px;background:#0d0d0d;color:var(--bt-text);font:inherit}
.bt-funnel__input:focus:focus{outline:2px solid var(--bt-accent);outline-offset:2px;border-color:transparent}
.bt-funnel__textarea{resize:vertical;min-height:110px}
.bt-funnel__inline{display:grid;grid-template-columns:minmax(115px,.45fr) 1fr;gap:8px}
.bt-funnel__hint,.bt-funnel__minimum,.bt-funnel__privacy{margin:8px 0 0;color:var(--bt-text-muted);font-size:12px;line-height:1.55}
.bt-funnel__minimum{padding-left:10px;border-left:2px solid var(--bt-accent)}
.bt-funnel__privacy a{color:var(--bt-text);text-decoration:underline}
.bt-funnel__error{min-height:0;margin:6px 0 0;color:#ff8f8f;font-size:12px;font-weight:700}
.bt-funnel__error:empty{display:none}
.bt-funnel__error--form{padding:12px 14px;border-radius:10px;background:rgba(255,80,80,.09)}
.bt-funnel__group.has-error .bt-funnel__input,.bt-funnel__group.has-error .bt-choice span{border-color:#ff6868}
.bt-funnel__nav{display:flex;justify-content:flex-end;gap:10px;margin-top:32px}
.bt-funnel__nav .bt-btn{min-height:50px}
.bt-funnel__submit{min-width:240px;position:relative}
.bt-funnel__honeypot{position:absolute!important;left:-10000px!important;width:1px!important;height:1px!important;overflow:hidden!important}
.bt-funnel__preview{margin:0;padding:14px 16px;border:1px solid var(--bt-line);border-left:3px solid var(--bt-whatsapp);border-radius:12px;background:#0d0d0d;color:var(--bt-text);font-size:14px;line-height:1.65;white-space:pre-line}
.bt-funnel__preview:empty::before{content:"…";color:var(--bt-text-faint)}
@keyframes bt-funnel-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes bt-modal-in{from{opacity:0;transform:translateY(12px) scale(.985)}to{opacity:1;transform:none}}
@keyframes bt-spin{to{transform:rotate(360deg)}}
@media(max-width:900px){
.bt-quote-modal{align-items:end;padding:0}
.bt-quote-modal__dialog{width:100%;max-height:92vh;border-radius:22px 22px 0 0}
.bt-quote-modal__dialog .bt-funnel{border-radius:22px 22px 0 0}
.bt-funnel{grid-template-columns:1fr}
.bt-funnel__main{order:1}
.bt-funnel__aside{order:2;border-right:0;border-top:1px solid var(--bt-line)}
.bt-funnel__aside-copy,.bt-funnel__help{max-width:65ch}
.bt-funnel__trust{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:640px){
.bt-funnel{border-radius:16px}
.bt-funnel__aside,.bt-funnel__main{padding:24px 18px}
.bt-funnel__aside .bt-h2{font-size:30px}
.bt-funnel__trust{grid-template-columns:1fr;margin:20px 0}
.bt-funnel__progress-item{font-size:0}
.bt-funnel__progress-item>span{font-size:12px;width:32px;height:32px}
.bt-choice-grid,.bt-choice-grid--compact{grid-template-columns:repeat(2,minmax(0,1fr))}
.bt-funnel__fields{grid-template-columns:1fr}
.bt-funnel__inline{grid-template-columns:110px 1fr}
.bt-funnel__nav{position:sticky;bottom:8px;z-index:5;padding:8px;margin:28px -8px -8px;border-radius:14px;background:rgba(13,13,13,.94);backdrop-filter:blur(12px)}
.bt-funnel__nav .bt-btn{flex:1;padding-inline:14px}
.bt-funnel__submit{min-width:0}
}
/* Prix ferme depuis la grille InvoiceMaster (étape 4 + confirmation). */
.bt-funnel__estimate{margin:0 0 20px;padding:16px 18px;border:1px solid var(--bt-accent);border-radius:12px;background:color-mix(in srgb,var(--bt-accent) 8%,transparent)}
.bt-funnel__estimate-title{margin:0 0 10px;font-weight:700;font-size:14px}
.bt-funnel__estimate-lines{margin:0;padding:0;list-style:none}
.bt-funnel__estimate-lines li{display:flex;justify-content:space-between;gap:12px;padding:4px 0;font-size:13px}
.bt-funnel__estimate-total{display:flex;justify-content:space-between;gap:12px;margin:10px 0 0;padding-top:10px;border-top:1px solid var(--bt-border,rgba(128,128,128,.25));font-size:14px}
.bt-funnel__estimate-note{margin:8px 0 0;color:var(--bt-text-muted);font-size:12px;line-height:1.55}
.bt-funnel__estimate-success{margin:12px 0 0;font-weight:600}