/* ============================================================
   DOEMO PRINT — Feuille de styles principale
   Palette : noir #1A1A1A | cyan #00AEEF | magenta #EC008C | jaune #F5C300
   Typo : Barlow Condensed (titres) + Inter (corps)
   ============================================================ */

/* --- Variables --- */
:root {
  --c-black:   #1A1A1A;
  --c-cyan:    #00AEEF;
  --c-magenta: #EC008C;
  --c-yellow:  #F5C300;
  --c-white:   #FFFFFF;
  --c-gray-50: #F8F8F8;
  --c-gray-100:#F0F0F0;
  --c-gray-300:#D0D0D0;
  --c-gray-600:#666666;
  --c-text:    #1A1A1A;
  --c-muted:   #555555;

  --font-head: 'Barlow Condensed', sans-serif;
  --font-body: 'Inter', sans-serif;

  --radius: 4px;
  --radius-lg: 8px;
  --shadow-sm: 0 2px 8px rgba(0,0,0,.08);
  --shadow-md: 0 4px 20px rgba(0,0,0,.12);

  --header-h: 72px;
  --container: 1200px;
}

/* --- Reset & base --- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { font-family: var(--font-body); font-size: 16px; line-height: 1.65; color: var(--c-text); background: var(--c-white); }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--c-cyan); text-decoration: none; }
a:hover { text-decoration: underline; }
ul { list-style: none; }

.skip-link { position: absolute; top: -100px; left: 1rem; background: var(--c-black); color: #fff; padding: .5rem 1rem; border-radius: var(--radius); z-index: 9999; }
.skip-link:focus { top: 1rem; }

/* --- Conteneur --- */
.container { max-width: var(--container); margin: 0 auto; padding: 0 1.5rem; }

/* --- Barre CMYK --- */
.cmyk-bar {
  height: 5px;
  background: linear-gradient(to right,
    var(--c-cyan)    0%   25%,
    var(--c-magenta) 25%  50%,
    var(--c-yellow)  50%  75%,
    var(--c-black)   75% 100%
  );
  flex-shrink: 0;
}

/* ============================================================
   HEADER
   ============================================================ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--c-white);
  border-bottom: 1px solid var(--c-gray-100);
  box-shadow: var(--shadow-sm);
}
.header-inner {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  height: var(--header-h);
}
/* ⚠️ `flex: none` est INDISPENSABLE. Sans lui, la barre d'en-tête comprime le
   lien de marque quand le menu réclame de la place : l'image, hauteur figée à
   44 px et largeur rabotée par le `img { max-width: 100% }` plus haut, s'écrase
   — 49 % mesurés à 1440 px. Ni `width: auto` ni les attributs width/height de
   la balise n'y changent quoi que ce soit. */
.brand { flex: none; }
.brand-logo { height: 44px; width: auto; max-width: none; }
.brand:hover { text-decoration: none; }

/* Nav */
.nav-list { display: flex; gap: .25rem; align-items: center; }
.nav-list > li { position: relative; }
.nav-list > li > a {
  display: flex; align-items: center; gap: .3rem;
  /* .5rem de marge latérale, pas .75 : les six liens rendaient l'en-tête plus
     large que son conteneur, et c'était le logo qui absorbait le débordement en
     s'écrasant. Voir `.brand { flex: none }` plus haut. */
  padding: .5rem .5rem;
  font-size: .9rem; font-weight: 600; color: var(--c-black);
  border-radius: var(--radius);
  white-space: nowrap;
  transition: color .15s, background .15s;
}
.nav-list > li > a:hover { color: var(--c-cyan); background: var(--c-gray-50); text-decoration: none; }
.caret { display: inline-block; border: 4px solid transparent; border-top-color: currentColor; margin-top: 3px; }

/* Dropdown */
.sub {
  display: none;
  position: absolute; top: 100%; left: 0;
  background: var(--c-white);
  border: 1px solid var(--c-gray-100);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  min-width: 220px;
  padding: .5rem 0;
  padding-top: 8px;
  z-index: 200;
}
.sub li a {
  display: block; padding: .5rem 1.25rem;
  font-size: .875rem; color: var(--c-black);
  transition: color .15s, background .15s;
}
.sub li a:hover { color: var(--c-cyan); background: var(--c-gray-50); text-decoration: none; }
.has-sub:hover .sub, .has-sub:focus-within .sub { display: block; }

/* Actions */
.header-actions { margin-left: auto; display: flex; align-items: center; gap: 1rem; flex-shrink: 0; }
.header-phone { font-size: .875rem; font-weight: 600; color: var(--c-black); white-space: nowrap; }
.header-phone:hover { color: var(--c-cyan); text-decoration: none; }

/* ⭐ 04/10/2026 — bouton « Appel gratuit en 1 clic » (.be/.ch/.lu), voir
   inc/header-intl.php et assets/js/click2call.js. */
.c2c-widget { position: relative; }
.c2c-bouton { display: inline-flex; align-items: center; gap: .5rem; background: #1aa34a; color: #fff; border: none; border-radius: 999px; padding: .75rem 1.4rem; font-size: 1rem; font-weight: 700; cursor: pointer; box-shadow: 0 2px 8px rgba(26,163,74,.3); transition: background .15s, transform .1s; }
.c2c-bouton:hover { background: #159140; }
.c2c-bouton:active { transform: scale(.98); }
.c2c-picto { font-size: 1.4rem; line-height: 1; }
.c2c-panneau { position: absolute; top: calc(100% + .6rem); right: 0; z-index: 40; background: #fff; border: 1px solid var(--c-gray-100); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); padding: 1rem; width: 260px; }
.c2c-panneau label { display: block; font-size: .8rem; color: var(--c-muted); margin-bottom: .5rem; line-height: 1.4; }
.c2c-ligne { display: flex; gap: .4rem; }
.c2c-ligne input { flex: 1; min-width: 0; padding: .5rem .6rem; border: 1px solid var(--c-gray-100); border-radius: 8px; font-size: .9rem; }
.c2c-etat { margin: .5rem 0 0; font-size: .8rem; color: var(--c-muted); min-height: 1.1em; }
.c2c-whatsapp { display: inline-flex; align-items: center; gap: .5rem; background: #25D366; color: #fff; border-radius: 999px; padding: .75rem 1.4rem; font-size: 1rem; font-weight: 700; text-decoration: none; box-shadow: 0 2px 8px rgba(37,211,102,.3); transition: background .15s; }
.c2c-whatsapp:hover { background: #1ebe59; color: #fff; text-decoration: none; }
.c2c-ligne .btn.c2c-raccrocher { background: #d92d20; border-color: #d92d20; color: #fff; }

/* Burger */
.nav-toggle { display: none; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: .5rem; }
.nav-toggle span { display: block; width: 24px; height: 2px; background: var(--c-black); border-radius: 2px; transition: transform .25s, opacity .25s; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ============================================================
   BOUTONS
   ============================================================ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .75rem 1.75rem; border-radius: var(--radius);
  font-family: var(--font-body); font-weight: 600; font-size: 1rem;
  border: 2px solid transparent; cursor: pointer;
  transition: background .15s, color .15s, border-color .15s, transform .1s;
  text-decoration: none; white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); text-decoration: none; }
.btn-primary { background: var(--c-cyan); color: var(--c-white); border-color: var(--c-cyan); }
.btn-primary:hover { background: #0099d4; border-color: #0099d4; }
.btn-ghost { background: transparent; color: var(--c-black); border-color: var(--c-black); }
.btn-ghost:hover { background: var(--c-black); color: var(--c-white); }
.btn-ghost-light { background: transparent; color: var(--c-white); border-color: rgba(255,255,255,.6); }
.btn-ghost-light:hover { background: var(--c-white); color: var(--c-black); }
.btn-sm { padding: .5rem 1.25rem; font-size: .875rem; }
.btn-lg { padding: .9rem 2.25rem; font-size: 1.05rem; }

/* ============================================================
   TYPOGRAPHIE
   ============================================================ */
h1, h2, h3, h4 { font-family: var(--font-head); font-weight: 700; line-height: 1.15; color: var(--c-black); }
h1 { font-size: clamp(2.2rem, 5vw, 3.5rem); font-weight: 800; }
h2 { font-size: clamp(1.8rem, 3.5vw, 2.6rem); }
h3 { font-size: clamp(1.3rem, 2.5vw, 1.8rem); }
h4 { font-size: 1.2rem; font-weight: 600; }
p { margin-bottom: 1rem; }
p:last-child { margin-bottom: 0; }
.lead { font-size: 1.15rem; color: var(--c-muted); line-height: 1.7; }
.kicker {
  display: inline-block; font-family: var(--font-body);
  font-size: .8rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: var(--c-cyan); margin-bottom: .75rem;
}
.accent { color: var(--c-cyan); }
.text-muted { color: var(--c-muted); }

/* ============================================================
   SECTIONS
   ============================================================ */
.section { padding: clamp(3rem, 6vw, 5rem) 0; }
.section--gray { background: var(--c-gray-50); }
.section--dark { background: var(--c-black); color: var(--c-white); }
.section--dark h2, .section--dark h3 { color: var(--c-white); }
.section-head { text-align: center; max-width: 680px; margin: 0 auto 3rem; }
.section-head h2 { margin-bottom: .75rem; }

/* ============================================================
   HERO
   ============================================================ */
.hero {
  background: var(--c-black);
  color: var(--c-white);
  padding: clamp(4rem, 8vw, 7rem) 0;
  position: relative;
  overflow: hidden;
}
.hero::before {
  content: '';
  position: absolute; inset: -10%;
  pointer-events: none;
  opacity: .38;
  background-image:
    radial-gradient(circle at center, rgba(0,174,239,.55) 1.6px, transparent 1.7px),
    radial-gradient(circle at center, rgba(236,0,140,.45) 1.6px, transparent 1.7px),
    radial-gradient(circle at center, rgba(255,209,0,.40) 1.6px, transparent 1.7px);
  background-size: 14px 14px, 14px 14px, 14px 14px;
  background-position: 0 0, 5px 3px, 9px 7px;
  -webkit-mask-image: radial-gradient(120% 90% at 12% 45%, #000 22%, transparent 70%);
  mask-image: radial-gradient(120% 90% at 12% 45%, #000 22%, transparent 70%);
}
.hero-inner { position: relative; max-width: 700px; }
.hero h1 { color: var(--c-white); margin-bottom: 1.25rem; }
.hero h1 .accent { color: var(--c-cyan); }
.hero .lead { color: rgba(255,255,255,.8); margin-bottom: 2rem; }
.hero-cta { display: flex; gap: 1rem; flex-wrap: wrap; }
.hero-trust { margin-top: 2rem; font-size: .875rem; color: rgba(255,255,255,.6); }
.hero-trust .stars { color: var(--c-yellow); letter-spacing: .05em; }

/* ============================================================
   GRILLES
   ============================================================ */
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2rem; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; }

/* ============================================================
   CARTES
   ============================================================ */
.card {
  background: var(--c-white);
  border: 1px solid var(--c-gray-100);
  border-radius: var(--radius-lg);
  padding: 2rem;
  box-shadow: var(--shadow-sm);
  transition: box-shadow .2s, transform .2s;
}
.card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.card-icon {
  width: 48px; height: 48px;
  background: var(--c-cyan);
  border-radius: var(--radius);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 1.25rem;
  color: white; font-size: 1.5rem;
}
.card h3 { margin-bottom: .5rem; font-size: 1.2rem; }

/* Carte produit */
.card-product { padding: 0; overflow: hidden; }
.card-product-img { aspect-ratio: 16/9; overflow: hidden; background: var(--c-gray-100); }
.card-product-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.card-product:hover .card-product-img img { transform: scale(1.04); }
.card-product-body { padding: 1.5rem; }
.card-product-body h3 { font-size: 1.15rem; margin-bottom: .5rem; }
.card-product-body p { font-size: .9rem; color: var(--c-muted); margin-bottom: 1rem; }
.card-product-link { font-size: .875rem; font-weight: 600; color: var(--c-cyan); }
.card-product-link:hover { text-decoration: underline; }

/* ============================================================
   STATS / CHIFFRES-CLÉS
   ============================================================ */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--c-gray-300); border-radius: var(--radius-lg); overflow: hidden; }
.stat { background: var(--c-white); padding: 2rem 1.5rem; text-align: center; }
.stat .num { font-family: var(--font-head); font-size: 2.2rem; font-weight: 800; color: var(--c-cyan); line-height: 1; }
.stat .lbl { font-size: .8rem; color: var(--c-muted); margin-top: .5rem; text-transform: uppercase; letter-spacing: .05em; }

/* ============================================================
   BREADCRUMB
   ============================================================ */
.breadcrumb { padding: .75rem 0; font-size: .8rem; color: var(--c-muted); }
.breadcrumb a { color: var(--c-muted); }
.breadcrumb a:hover { color: var(--c-cyan); }
.breadcrumb span + span::before { content: ' › '; margin: 0 .35rem; }

/* ============================================================
   PAGE INTÉRIEURE
   ============================================================ */
.page-hero {
  background: var(--c-gray-50);
  border-bottom: 1px solid var(--c-gray-100);
  padding: 3rem 0 2.5rem;
}
.page-hero h1 { font-size: clamp(1.8rem, 4vw, 2.8rem); margin-bottom: .75rem; }
.page-hero .lead { max-width: 600px; }

.prose { max-width: 780px; }
.prose h2 { margin: 2.5rem 0 1rem; }
.prose h3 { margin: 2rem 0 .75rem; }
.prose ul, .prose ol { padding-left: 1.5rem; margin-bottom: 1rem; }
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose li { margin-bottom: .35rem; }
.prose table { width: 100%; border-collapse: collapse; margin-bottom: 1.5rem; }
.prose th, .prose td { padding: .6rem 1rem; text-align: left; border: 1px solid var(--c-gray-100); }
.prose th { background: var(--c-gray-50); font-weight: 600; }

/* ============================================================
   BLOG
   ============================================================ */
.article-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; }
.article-card { display: flex; flex-direction: column; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--c-gray-100); box-shadow: var(--shadow-sm); transition: box-shadow .2s, transform .2s; }
.article-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); text-decoration: none; }
.article-card-img { aspect-ratio: 16/9; overflow: hidden; background: var(--c-gray-100); }
.article-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.article-card:hover .article-card-img img { transform: scale(1.04); }
.article-card-body { padding: 1.5rem; flex: 1; display: flex; flex-direction: column; }
.article-card-date { font-size: .75rem; color: var(--c-muted); text-transform: uppercase; letter-spacing: .05em; margin-bottom: .5rem; }
.article-card-body h3 { font-size: 1.1rem; margin-bottom: .5rem; color: var(--c-black); line-height: 1.3; }
.article-card-body p { font-size: .875rem; color: var(--c-muted); flex: 1; }
.article-card-more { display: inline-block; margin-top: 1rem; font-size: .875rem; font-weight: 600; color: var(--c-cyan); }

/* Article seul */
.article-header { padding: 3rem 0 2rem; background: var(--c-gray-50); border-bottom: 1px solid var(--c-gray-100); }
.article-header h1 { max-width: 800px; margin-bottom: 1rem; }
.article-meta { font-size: .8rem; color: var(--c-muted); display: flex; gap: 1.5rem; }
.article-body { padding: 3rem 0; }
.article-body .prose { margin: 0 auto; }

/* ============================================================
   CTA BANDE
   ============================================================ */
.cta-band {
  background: var(--c-cyan);
  color: var(--c-white);
  padding: 3rem 0;
  text-align: center;
}
.cta-band h2 { color: var(--c-white); margin-bottom: .75rem; }
.cta-band p { color: rgba(255,255,255,.9); margin-bottom: 1.5rem; }
.cta-band .btn-ghost { border-color: white; color: white; }
.cta-band .btn-ghost:hover { background: white; color: var(--c-cyan); }

/* ============================================================
   FORMULAIRE DEVIS
   ============================================================ */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
.form-full { grid-column: 1 / -1; }
label { display: block; font-size: .875rem; font-weight: 600; margin-bottom: .4rem; color: var(--c-black); }
input, select, textarea {
  width: 100%; padding: .7rem 1rem;
  border: 1.5px solid var(--c-gray-300); border-radius: var(--radius);
  font-family: var(--font-body); font-size: .95rem; color: var(--c-text);
  background: var(--c-white);
  transition: border-color .15s, box-shadow .15s;
}
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--c-cyan);
  box-shadow: 0 0 0 3px rgba(0,174,239,.15);
}
textarea { resize: vertical; min-height: 120px; }

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer { background: var(--c-black); color: rgba(255,255,255,.7); padding: 4rem 0 0; }
/* 5 colonnes depuis l'ajout de « Professionnels » : la marque, puis quatre
   rubriques de largeur égale. Ajouter une colonne = ajouter un 1fr ici. */
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr 1fr; gap: 2.2rem; padding-bottom: 3rem; }
/* ⚠️ PAS de `filter: brightness(0) invert(1)` ici : ce filtre suppose un
   logo TRANSPARENT à dessin sombre. logo.png a un fond blanc opaque, et le
   filtre le blanchissait en entier — on ne voyait qu'un rectangle blanc.
   assets/img/logo-blanc.png est la version pour fond sombre : lettres en
   blanc, fond transparent, et le cyan/magenta/jaune de la marque conservés. */
.footer-logo { height: 44px; width: auto; margin-bottom: 1rem; }
.footer-base { color: rgba(255,255,255,.9); font-size: .95rem; font-weight: 500; margin-bottom: .75rem; }
.footer-contact-line { font-size: .85rem; line-height: 1.8; }
.footer-contact-line a { color: rgba(255,255,255,.7); }
.footer-contact-line a:hover { color: var(--c-cyan); text-decoration: none; }
.footer-h { font-family: var(--font-head); font-size: 1rem; font-weight: 700; color: var(--c-white); text-transform: uppercase; letter-spacing: .08em; margin-bottom: 1rem; }
.site-footer ul li { margin-bottom: .5rem; }
.site-footer ul li a { font-size: .875rem; color: rgba(255,255,255,.65); transition: color .15s; }
.site-footer ul li a:hover { color: var(--c-cyan); text-decoration: none; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.1); padding: 1.25rem 0; }
.footer-bottom-inner { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem; }
.footer-bottom p { font-size: .8rem; color: rgba(255,255,255,.45); }
.footer-legal { display: flex; gap: 1.5rem; }
.footer-legal a { font-size: .8rem; color: rgba(255,255,255,.45); }
.footer-legal a:hover { color: rgba(255,255,255,.8); text-decoration: none; }

/* ============================================================
   RÉPONSE DIRECTE (answer box)
   ============================================================ */
.answer-box {
  background: #f0f9fe;
  border-left: 4px solid var(--c-cyan);
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
  padding: 1.25rem 1.5rem;
  margin-bottom: 2.5rem;
}
.answer-box strong { display: block; font-family: var(--font-head); font-size: 1rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--c-cyan); margin-bottom: .4rem; font-size: .8rem; }
.answer-box p { margin: 0; font-size: .95rem; color: var(--c-black); }

/* ============================================================
   FAQ ACCORDÉON
   ============================================================ */
.faq-section { padding: clamp(2.5rem, 5vw, 4rem) 0; background: var(--c-gray-50); }
.faq-section h2 { text-align: center; margin-bottom: 2.5rem; }
.faq-list { max-width: 780px; margin: 0 auto; display: flex; flex-direction: column; gap: .75rem; }
.faq-item {
  background: var(--c-white);
  border: 1px solid var(--c-gray-100);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.faq-question {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.1rem 1.5rem;
  background: none; border: none; cursor: pointer;
  font-family: var(--font-body); font-size: 1rem; font-weight: 600; color: var(--c-black);
  text-align: left;
}
.faq-question:hover { color: var(--c-cyan); }
.faq-arrow {
  flex-shrink: 0; width: 20px; height: 20px;
  border: 2px solid var(--c-gray-300); border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  transition: transform .25s, border-color .25s;
}
.faq-arrow::after { content: ''; display: block; width: 6px; height: 6px; border-right: 2px solid var(--c-gray-600); border-bottom: 2px solid var(--c-gray-600); transform: rotate(45deg) translateY(-1px); }
.faq-item.is-open .faq-arrow { transform: rotate(180deg); border-color: var(--c-cyan); }
.faq-item.is-open .faq-arrow::after { border-color: var(--c-cyan); }
.faq-answer {
  display: none;
  padding: 0 1.5rem 1.25rem;
  font-size: .95rem; color: var(--c-muted); line-height: 1.7;
}
.faq-item.is-open .faq-answer { display: block; }

/* ============================================================
   GABARITS
   ============================================================ */
.gabarit-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
  margin-top: 2.5rem;
}
.gabarit-card {
  border: 1.5px solid var(--c-gray-300);
  border-radius: var(--radius-lg);
  padding: 2rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  background: var(--c-white);
  transition: border-color .2s, box-shadow .2s;
}
.gabarit-card:hover { border-color: var(--c-cyan); box-shadow: var(--shadow-sm); }
.gabarit-card h3 { font-family: var(--font-head); font-size: 1.6rem; font-weight: 700; margin: .4rem 0 0; }
.gabarit-badge {
  display: inline-block;
  background: var(--c-black);
  color: #fff;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .1em;
  padding: .2rem .55rem;
  border-radius: 3px;
}
.gabarit-specs { font-size: .875rem; }
.spec-row { display: flex; gap: .5rem; margin-bottom: .3rem; line-height: 1.4; }
.spec-label { font-weight: 600; color: var(--c-text); min-width: 120px; flex-shrink: 0; }
.dl-btn {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  background: var(--c-cyan);
  color: #fff;
  font-size: .9rem;
  font-weight: 700;
  padding: .8rem 1.6rem;
  border-radius: var(--radius);
  text-decoration: none;
  margin-top: auto;
  transition: background .2s;
  align-self: flex-start;
}
.dl-btn:hover { background: #0099d6; text-decoration: none; color: #fff; }
.gabarit-info-box {
  margin-top: 3rem;
  background: var(--c-gray-50);
  border-left: 4px solid var(--c-cyan);
  padding: 1.75rem 2rem;
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
}
.gabarit-info-box h3 { font-family: var(--font-head); font-size: 1.5rem; margin-bottom: .75rem; }
.gabarit-info-box ol { padding-left: 1.4rem; font-size: .925rem; line-height: 1.85; counter-reset: none; list-style: decimal; }
.gabarit-info-box li { margin-bottom: .2rem; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 2rem; }
  .stats { grid-template-columns: repeat(2, 1fr); }
}

/* ⚠️ PALIER DU MENU, distinct de celui de la mise en page.
   Le menu complet réclame 1190 px de contenu, soit une fenêtre d'environ
   1222 px. En dessous il passe en burger — sinon l'en-tête déborde. Jusqu'au
   17/09/2026 le débordement était absorbé par le LOGO, qui s'écrasait
   (49 % mesurés à 1440 px, davantage en dessous) : c'est ce que voyait Julien.
   Le téléphone reste affiché ici : la place libérée par le menu suffit. */
@media (max-width: 1240px) {
  .nav-toggle { display: flex; }
  .main-nav {
    display: none; position: absolute; top: var(--header-h); left: 0; right: 0;
    background: var(--c-white); border-top: 1px solid var(--c-gray-100);
    box-shadow: var(--shadow-md); padding: 1rem 0;
  }
  .main-nav.is-open { display: block; }
  .nav-list { flex-direction: column; gap: 0; }
  .nav-list > li > a { padding: .75rem 1.5rem; border-radius: 0; }
  .sub { display: none !important; position: static; box-shadow: none; border: none; border-top: 1px solid var(--c-gray-100); background: var(--c-gray-50); }
  .has-sub.is-open .sub { display: block !important; }
}

@media (max-width: 768px) {
  :root { --header-h: 64px; }

  .nav-toggle { display: flex; }
  .main-nav {
    display: none; position: absolute; top: var(--header-h); left: 0; right: 0;
    background: var(--c-white); border-top: 1px solid var(--c-gray-100);
    box-shadow: var(--shadow-md); padding: 1rem 0;
  }
  .main-nav.is-open { display: block; }
  .nav-list { flex-direction: column; gap: 0; }
  .nav-list > li > a { padding: .75rem 1.5rem; border-radius: 0; }
  .sub { display: none !important; position: static; box-shadow: none; border: none; border-top: 1px solid var(--c-gray-100); background: var(--c-gray-50); }
  .has-sub.is-open .sub { display: block !important; }
  .header-phone { display: none; }

  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .article-grid { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr; gap: 1.5rem; }
  .footer-bottom-inner { flex-direction: column; align-items: flex-start; }
  .hero-cta { flex-direction: column; }
  .hero-cta .btn { width: 100%; justify-content: center; }
}

@media (max-width: 480px) {
  .stats { grid-template-columns: 1fr 1fr; }
}

/* ---------- Accès à l'espace client (en-tête) ---------- */
.btn-espace {
  background: var(--c-magenta); color: var(--c-white); border-color: var(--c-magenta);
  display: inline-flex; align-items: center; gap: .4rem; white-space: nowrap;
}
.btn-espace:hover { background: #c60077; border-color: #c60077; color: var(--c-white); text-decoration: none; }
.btn-espace svg { opacity: .85; flex: none; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

@media (max-width: 900px) {
  .header-actions { gap: .5rem; }
  .btn-espace, .header-actions .btn-primary { font-size: .75rem; padding: .45rem .7rem; }
  .btn-espace svg { display: none; }
}
@media (max-width: 560px) {
  .header-actions .btn-primary { display: none; }
}

/* ---------- Trame de similigravure sur les blocs noirs ----------
   Le même agrandissement de tirage que sur la page de connexion :
   quatre encres, points décalés. Toujours derrière le contenu. */
.section--dark { position: relative; overflow: hidden; }
.section--dark::before,
.site-footer::before {
  content: '';
  position: absolute; inset: -10%;
  pointer-events: none;
  background-image:
    radial-gradient(circle at center, rgba(0,174,239,.55) 1.6px, transparent 1.7px),
    radial-gradient(circle at center, rgba(236,0,140,.45) 1.6px, transparent 1.7px),
    radial-gradient(circle at center, rgba(255,209,0,.40) 1.6px, transparent 1.7px);
  background-size: 14px 14px, 14px 14px, 14px 14px;
  background-position: 0 0, 5px 3px, 9px 7px;
}
.section--dark::before {
  opacity: .32;
  -webkit-mask-image: radial-gradient(110% 95% at 88% 20%, #000 20%, transparent 68%);
  mask-image: radial-gradient(110% 95% at 88% 20%, #000 20%, transparent 68%);
}
.site-footer { position: relative; overflow: hidden; }
.site-footer::before {
  opacity: .26;
  -webkit-mask-image: radial-gradient(90% 120% at 8% 100%, #000 18%, transparent 66%);
  mask-image: radial-gradient(90% 120% at 8% 100%, #000 18%, transparent 66%);
}
/* le contenu passe devant la trame */
.section--dark > .container,
.site-footer > .container,
.site-footer .footer-bottom { position: relative; z-index: 1; }

/* ---------- le bandeau revendeurs (accueil du site et de la boutique) ----------
   ⚠️ Fond sombre et non coloré : il tombe entre deux sections claires et doit
   se distinguer sans hurler. C'est une offre réservée, pas une promotion. */
.rev-band { background:
    radial-gradient(120% 130% at 100% 0%, rgba(0, 174, 239, .28) 0%, transparent 65%), #1A1A1A;
  color: #fff; }
/* ⚠️⚠️ `padding-block` ET NON `padding: 3.2rem 0`. Cet élément porte AUSSI la
   classe `.container`, qui pose 24 px à gauche et à droite : le raccourci les
   remettait à zéro et le texte venait coller le bord de l'écran. Mesuré, pas
   deviné — `paddingLeft: 0px` là où les autres conteneurs avaient 24 px.
   La règle générale : sur un élément qui porte déjà une classe de mise en page,
   on ne touche qu'aux axes qu'on veut vraiment changer. */
.rev-band-in { display: grid; grid-template-columns: 1fr auto; gap: 2.4rem;
  align-items: center; padding-block: 3.2rem; }
@media (max-width: 860px) {
  .rev-band-in { grid-template-columns: 1fr; gap: 1.6rem; padding-block: 2.4rem; }
}
.rev-band-sur { margin: 0 0 .35rem; font-size: .84rem; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; color: var(--c-cyan, #00AEEF); }
.rev-band-titre { margin: 0 0 .7rem; color: #fff; line-height: 1.05;
  font-size: clamp(1.9rem, 4vw, 2.8rem); }
.rev-band-lead { margin: 0 0 1rem; max-width: 46rem; line-height: 1.6; color: #d4d4dd; }
.rev-band-lead strong { color: #fff; }
/* ⚠️ Les trois points sont des FAITS vérifiables, pas des adjectifs : un
   revendeur compare des conditions, pas des promesses. */
.rev-band-pts { display: flex; flex-wrap: wrap; gap: .5rem 1.6rem;
  margin: 0; padding: 0; list-style: none; font-size: .92rem; color: #d4d4dd; }
.rev-band-pts li { position: relative; padding-left: 1.1rem; }
.rev-band-pts li::before { content: ""; position: absolute; left: 0; top: .52em;
  width: 6px; height: 6px; border-radius: 50%; background: var(--c-cyan, #00AEEF); }
.rev-band-act { text-align: center; }
.rev-band-note { margin: .7rem 0 0; font-size: .8rem; line-height: 1.45; color: #9a9aa6; }
@media (max-width: 860px) { .rev-band-act { text-align: left; } }

/* ------------------------------------------------- bandeau promotionnel
   ⚠️ Il pousse le contenu, il ne le recouvre PAS. Un bandeau en position fixe
   mange le haut de chaque page, et sur un téléphone il masque le menu — la
   barre de la boutique est déjà juste en largeur.
   ⚠️ `[hidden]` forcé : une règle `display` plus bas l'a déjà emporté sur
   l'attribut ailleurs dans ce projet, et le bandeau serait apparu à tous ceux
   qui l'avaient fermé. */
.promo-bar[hidden] { display: none !important; }
.promo-bar {
  display: flex; align-items: center; justify-content: center; gap: .75rem;
  background: #1a1a1a; color: #fff; padding: .55rem 2.4rem .55rem 1rem;
  font-size: .88rem; line-height: 1.35; position: relative; text-align: center;
  flex-wrap: wrap;
}
.promo-bar-txt { margin: 0; }
.promo-bar-fin { margin-left: .4rem; opacity: .75; }
/* ⚠️ La mention d'exclusion reste visible sur téléphone : c'est la seule chose
   qui empêche un client de croire que le code marche sur tout. */
.promo-bar-hors { margin-left: .5rem; opacity: .7; font-size: .92em; }
/* ⭐⭐ 24/09/2026 : le bandeau demande une adresse au lieu de montrer le code
   en clair — voir `bienvenue.php`. Le formulaire reprend la même ligne que le
   texte tant qu'il y a la place, et passe dessous sur téléphone (`flex-wrap`
   sur `.promo-bar`). */
.promo-bar-form {
  display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
  justify-content: center; margin: 0;
}
.promo-bar-saisie { display: flex; gap: .4rem; }
.promo-bar-saisie input {
  padding: .35rem .6rem; font-size: .85rem; border: 1px solid rgba(255,255,255,.3);
  border-radius: 4px; background: rgba(255,255,255,.08); color: #fff; min-width: 12rem;
}
.promo-bar-saisie input::placeholder { color: rgba(255,255,255,.55); }
.promo-bar-saisie input:focus { outline: 2px solid #fff; outline-offset: 1px; background: rgba(255,255,255,.14); }
.promo-bar-saisie button {
  padding: .35rem .8rem; font-size: .85rem; font-weight: 700; letter-spacing: .02em;
  background: #fff; color: #1a1a1a; border: 0; border-radius: 4px; cursor: pointer;
  white-space: nowrap;
}
.promo-bar-saisie button:hover { background: #e9e9e9; }
.promo-bar-fermer {
  position: absolute; right: .5rem; top: 50%; transform: translateY(-50%);
  background: none; border: 0; color: #fff; font-size: 1.3rem; line-height: 1;
  padding: .1rem .4rem; cursor: pointer; opacity: .7;
}
.promo-bar-fermer:hover { opacity: 1; }
@media (max-width: 560px) {
  .promo-bar { font-size: .8rem; padding-left: .6rem; }
  .promo-bar-fin { display: none; }
  .promo-bar-hors { display: block; margin: .15rem 0 0; }
  .promo-bar-saisie input { min-width: 0; flex: 1 1 auto; }
}

/* ═══════════════ Bandeau programme revendeur (26/09/2026) ═══════════════ */
.rv-bandeau { background: var(--c-yellow, #F5C300); color: #1a1a1a; font-size: .88rem; }
.rv-bandeau-corps { display: flex; align-items: center; justify-content: center; gap: .9rem;
  flex-wrap: wrap; padding: .55rem 2.4rem .55rem 1rem; position: relative; text-align: center; }
.rv-bandeau-txt { margin: 0; }
.rv-bandeau-code { background: #1a1a1a; color: #fff; font-weight: 700; letter-spacing: .03em;
  border-radius: 5px; padding: .12rem .5rem; margin: 0 .2rem; font-size: .92em; }
.rv-bandeau-copier { border: 0; background: rgba(26,26,26,.1); color: #1a1a1a; border-radius: 5px;
  width: 1.6rem; height: 1.6rem; cursor: pointer; font-size: .9rem; line-height: 1; vertical-align: middle; }
.rv-bandeau-copier:hover { background: rgba(26,26,26,.18); }
.rv-bandeau-lien { color: #1a1a1a; font-weight: 700; text-decoration: underline; white-space: nowrap; }
.rv-bandeau-fermer { position: absolute; right: .8rem; top: 50%; transform: translateY(-50%);
  border: 0; background: none; color: #1a1a1a; font-size: 1.3rem; line-height: 1; cursor: pointer; opacity: .6; }
.rv-bandeau-fermer:hover { opacity: 1; }
@media (max-width: 700px) {
  .rv-bandeau { font-size: .8rem; }
  .rv-bandeau-corps { padding: .6rem 2.2rem .6rem .8rem; }
}