/* =============================================================================
   THÈME « STUDIO » — couche de restylage posée par-dessus landing.css
   Grammaire visuelle : noir pur, très grands titres, cartes arrondies à ombres
   douces, boutons pill, listes à coches, gros chiffres, apparitions au scroll.
   Aucune structure HTML n'est modifiée : tout le contenu du site est conservé.
   ========================================================================== */

:root {
  --ak-bg: #000000;
  --ak-bg-2: #0d0d0d;
  --ak-bg-3: #151515;
  --ak-fg: #ffffff;
  --ak-fg-muted: #b9bdbd;
  --ak-fg-faint: #7c8180;
  --ak-line: rgba(255, 255, 255, 0.11);
  --ak-line-2: rgba(255, 255, 255, 0.22);
  --ak-accent: #17a75b;
  /* Vert assombri réservé aux boutons pleins : 4,6:1 avec du blanc (WCAG AA) */
  --ak-accent-btn: #0f7a41;
  --ak-accent-hi: #29c973;
  --ak-accent-soft: rgba(23, 167, 91, 0.16);
  --ak-paper: #f4f3ef;
  --ak-paper-2: #ffffff;
  --ak-ink: #0b0d0c;
  --ak-ink-muted: rgba(11, 13, 12, 0.62);
  --ak-ink-line: rgba(11, 13, 12, 0.12);
  --ak-r: 20px;
  --ak-r-sm: 14px;
  --ak-pill: 999px;
  --ak-shadow: 0 1px 2px rgba(0, 0, 0, 0.5), 0 18px 44px rgba(0, 0, 0, 0.55);
  --ak-shadow-paper: 0 1px 2px rgba(11, 13, 12, 0.06), 0 16px 40px rgba(11, 13, 12, 0.09);
  --ak-pad: clamp(76px, 9.5vw, 168px);
}

/* --- Base ---------------------------------------------------------------- */
html, body { background: var(--ak-bg); color: var(--ak-fg); }
body { -webkit-font-smoothing: antialiased; text-wrap: pretty; }
::selection { background: var(--ak-accent); color: #fff; }
a { color: var(--ak-fg); }
a:hover { color: var(--ak-accent-hi); }

/* --- Typographie : très grands titres, interlignage serré ---------------- */
.hero-animated-h1, .hero-animated-h1 h3, .hero-animated-h1 .hero-static-line span {
  font-size: clamp(42px, 6.8vw, 96px) !important;
  line-height: 1.1;
  letter-spacing: -0.022em;
  font-weight: 700;
  color: var(--ak-fg);
  margin: 0 0 26px;
  text-wrap: balance;
}
.hero-sub {
  font-size: clamp(17px, 1.7vw, 27px);
  line-height: 1.48;
  letter-spacing: -0.01em;
  color: var(--ak-fg-muted);
  max-width: 46ch;
}
.section-title {
  font-size: clamp(32px, 4.4vw, 62px);
  line-height: 1.08;
  letter-spacing: -0.022em;
  font-weight: 700;
  text-wrap: balance;
}
.section-lead { font-size: clamp(16px, 1.3vw, 20px); line-height: 1.55; color: var(--ak-fg-muted); max-width: 60ch; }

/* Intitulé de section */
.section-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 7px 15px 7px 13px;
  border: 1px solid var(--ak-line);
  border-radius: var(--ak-pill);
  background: var(--ak-bg-2);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ak-fg-muted);
}
.section-eyebrow .num, .section-eyebrow > span:first-child { color: var(--ak-accent-hi); }

/* --- Couleurs de texte sur fond sombre ---------------------------------- */
.section-title, .section h2, .section h3, .section h4,
.final-cta .section-title, .final-cta h2, .devis-wrap h3, .devis-wrap h4,
.zone-city strong, .kv strong { color: var(--ak-fg); }
html body .hero-animated-h1 { color: var(--ak-fg); }
/* Les paragraphes des cartes sombres gardent sinon la couleur claire de landing.css */
.pillar p, .process-step p, .testimonial p, .zone-city p, .solution-card p,
.showcase-cell p, .final-cta p { color: var(--ak-fg-muted); }
.section-cream .section-title, .section-cream h2, .section-cream h3,
.section-cream h4, .section-cream strong { color: var(--ak-ink); }
.section-cream .pillar p, .section-cream .process-step p, .section-cream .testimonial p,
.section-cream .zone-city p, .section-cream .solution-card p { color: var(--ak-ink-muted); }

/* Les styles inline du site utilisent var(--c-ink) / var(--c-fg-muted) pour le
   texte. Sur les sections sombres on redéfinit ces variables : plus fiable que
   de surcharger chaque sélecteur. (Les fonds sont déjà pilotés par --ak-*.) */
.hero, .trust, .final-cta, .footer, .section:not(.section-cream) {
  --c-ink: var(--ak-fg);
  --c-fg-muted: var(--ak-fg-muted);
  --c-ink-70: var(--ak-fg-muted);
  --c-ink-55: var(--ak-fg-muted);
  --c-ink-35: var(--ak-fg-faint);
}
.ph strong, .ph-cap strong, .ph-cap { color: var(--ak-fg-faint); }
.ph strong { color: var(--ak-fg); }
.ph, .ph div, .ph span { color: var(--ak-fg-faint); }
.section-cream .ph, .section-cream .ph div, .section-cream .ph span,
.section-cream .ph-cap { color: var(--ak-ink-muted); }
.section-cream .ph strong { color: var(--ak-ink); }
.solution-card h3, .solution-card h4 { color: var(--ak-fg); }
.section-cream .solution-card h3, .section-cream .solution-card h4 { color: var(--ak-ink); }

/* --- Rythme des sections : alternance franche --------------------------- */
.section { padding: var(--ak-pad) 0; background: var(--ak-bg); }
.section-head { max-width: 920px; }
.section-head-row { gap: clamp(24px, 4vw, 64px); }

/* --- Boutons pill ------------------------------------------------------- */
.btn {
  border-radius: var(--ak-pill);
  font-weight: 600;
  letter-spacing: -0.005em;
  transition: transform 0.18s ease, background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn { white-space: nowrap; }
.btn-lg { padding: 17px 30px; font-size: 16.5px; }
.btn-primary, .nav .nav-cta-desktop.btn-primary {
  background: var(--ak-accent-btn);
  color: #fff;
  border: 1px solid var(--ak-accent-btn);
  box-shadow: 0 8px 24px rgba(15, 122, 65, 0.30);
}
.btn-primary:hover, .nav .nav-cta-desktop.btn-primary:hover {
  background: var(--ak-accent-hi);
  border-color: var(--ak-accent-hi);
  color: #fff;
}
.btn-secondary {
  background: transparent;
  color: var(--ak-fg);
  border: 1px solid var(--ak-line-2);
}
.btn-secondary:hover { background: rgba(255, 255, 255, 0.08); border-color: var(--ak-fg); color: var(--ak-fg); }
.btn-ghost-on-dark, .btn-on-dark { border-radius: var(--ak-pill); }

/* --- Barre supérieure + navigation -------------------------------------- */
.topbar { background: var(--ak-bg-2); border-bottom: 1px solid var(--ak-line); color: var(--ak-fg-muted); }
.topbar-item, .topbar-phone { color: var(--ak-fg-muted); }
.topbar-phone:hover { color: var(--ak-accent-hi); }
.nav {
  background: rgba(0, 0, 0, 0.86);
  backdrop-filter: saturate(150%) blur(14px);
  -webkit-backdrop-filter: saturate(150%) blur(14px);
  border-bottom: 1px solid var(--ak-line);
}
.nav-inner { padding-top: 14px; padding-bottom: 14px; }
.nav-link { color: var(--ak-fg-muted); font-weight: 500; }
.nav-link:hover { color: var(--ak-fg); }
.nav-hamburger { color: var(--ak-fg); }

/* --- Hero ---------------------------------------------------------------- */
.hero { padding: clamp(72px, 9vw, 150px) 0 var(--ak-pad); background: var(--ak-bg); }
/* Le fond du hero est piloté par le tweak « heroBg » (style inline) : pas de
   règle !important ici, sinon le réglage du panneau ne s'applique jamais. */
.hero-tag {
  display: inline-block;
  margin-bottom: 26px;
  font-size: clamp(15px, 1.35vw, 21px);
  font-weight: 500;
  letter-spacing: -0.005em;
  text-transform: none;
  color: var(--ak-fg-muted);
  background: none;
  border: 0;
  padding: 0;
}
.hero-cta { gap: 14px; margin-top: 38px; }

/* Bandeau preuve sociale : chip pill sombre */
.hero-marquee {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 22px;
  margin-top: 34px;
  padding: 14px 26px;
  border: 1px solid var(--ak-line);
  border-radius: var(--ak-pill);
  background: var(--ak-bg-2);
  box-shadow: var(--ak-shadow);
  color: var(--ak-fg-muted);
  font-size: 14.5px;
}
.hero-marquee strong { color: var(--ak-fg); font-weight: 700; }

/* Cadres / mockups autour des visuels */
.hero-image-wrap, .hero-visual {
  border-radius: var(--ak-r);
  border: 1px solid var(--ak-line);
  background: var(--ak-bg-2);
  box-shadow: var(--ak-shadow);
  overflow: hidden;
}
.hero-showcase { gap: 14px; }
.showcase-cell {
  border-radius: var(--ak-r-sm);
  border: 1px solid var(--ak-line);
  background: var(--ak-bg-2);
  box-shadow: var(--ak-shadow);
  overflow: hidden;
}

/* --- Sections claires (alternance) -------------------------------------- */
.section-cream { background: var(--ak-paper); color: var(--ak-ink); }
.section-cream .section-title, .section-cream .kv-num { color: var(--ak-ink); }
.section-cream .section-lead, .section-cream .kv-label { color: var(--ak-ink-muted); }
.section-cream .section-eyebrow { background: var(--ak-paper-2); border-color: var(--ak-ink-line); color: var(--ak-ink-muted); }
.section-cream .section-eyebrow .num, .section-cream .section-eyebrow > span:first-child { color: var(--ak-accent); }
.section-cream .btn-secondary { color: var(--ak-ink); border-color: var(--ak-ink-line); }
.section-cream .btn-secondary:hover { background: rgba(11, 13, 12, 0.06); border-color: var(--ak-ink); color: var(--ak-ink); }
.section-cream a { color: var(--ak-ink); }
.section-cream a:hover { color: var(--ak-accent); }

/* --- Sections très sombres ---------------------------------------------- */
.section-dark { background: var(--ak-bg-2); color: var(--ak-fg); }

/* --- Piliers ------------------------------------------------------------ */
.pillars-grid { gap: clamp(18px, 2.4vw, 34px); }
.pillar {
  padding: 28px;
  border: 1px solid var(--ak-line);
  border-radius: var(--ak-r);
  background: var(--ak-bg-2);
  box-shadow: var(--ak-shadow);
  color: var(--ak-fg-muted);
  transition: border-color 0.2s ease, transform 0.2s ease;
}
.pillar:hover { border-color: var(--ak-line-2); transform: translateY(-3px); }
.pillar strong, .pillar h3, .pillar h4 { color: var(--ak-fg); letter-spacing: -0.02em; }
.pillar-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  height: auto;
  min-width: 36px;
  padding: 7px 13px;
  white-space: nowrap;
  border-radius: var(--ak-r-sm);
  background: var(--ak-accent-soft);
  color: var(--ak-accent-hi);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
  align-self: flex-start;
  margin-bottom: 18px;
}
.section-cream .pillar { background: var(--ak-paper-2); border-color: var(--ak-ink-line); box-shadow: var(--ak-shadow-paper); color: var(--ak-ink-muted); }
.section-cream .pillar strong, .section-cream .pillar h3, .section-cream .pillar h4 { color: var(--ak-ink); }
.section-cream .pillar:hover { border-color: rgba(11, 13, 12, 0.26); }
.section-cream .pillar-num { color: var(--ak-accent); }

/* --- Cartes solutions --------------------------------------------------- */
.solutions-grid { gap: clamp(16px, 2vw, 28px); }
.solution-card {
  border: 1px solid var(--ak-line);
  border-radius: var(--ak-r);
  background: var(--ak-bg-2);
  box-shadow: var(--ak-shadow);
  overflow: hidden;
  transition: border-color 0.2s ease, transform 0.2s ease;
}
.solution-card:hover { border-color: var(--ak-line-2); transform: translateY(-3px); }
.solution-card-tags { gap: 8px; }
.tag, .solution-card-tags span {
  padding: 5px 12px;
  border: 1px solid var(--ak-line);
  border-radius: var(--ak-pill);
  background: rgba(255, 255, 255, 0.05);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ak-fg-muted);
}
.solution-card-link { color: var(--ak-accent-hi); font-weight: 600; }
.section-cream .solution-card { background: var(--ak-paper-2); border-color: var(--ak-ink-line); box-shadow: var(--ak-shadow-paper); }
.section-cream .tag, .section-cream .solution-card-tags span { background: rgba(11, 13, 12, 0.04); border-color: var(--ak-ink-line); color: var(--ak-ink-muted); }
.section-cream .solution-card-link { color: var(--ak-accent); }

/* --- Carrousel ---------------------------------------------------------- */
.sol-carousel-arrow {
  border: 1px solid var(--ak-line-2);
  border-radius: var(--ak-pill);
  background: var(--ak-bg-2);
  color: var(--ak-fg);
}
.sol-carousel-arrow:hover { background: var(--ak-fg); color: var(--ak-ink); }
.sol-carousel-dot { background: var(--ak-line-2); border-radius: var(--ak-pill); }
.sol-carousel-dot[data-active="true"], .sol-carousel-dot.is-active { background: var(--ak-accent-hi); }
.section-cream .sol-carousel-arrow { background: var(--ak-paper-2); border-color: var(--ak-ink-line); color: var(--ak-ink); }
.section-cream .sol-carousel-arrow:hover { background: var(--ak-ink); color: var(--ak-paper-2); }

/* --- Étapes du process -------------------------------------------------- */
.process-step {
  padding: 28px;
  border: 1px solid var(--ak-line);
  border-radius: var(--ak-r);
  background: var(--ak-bg-2);
  box-shadow: var(--ak-shadow);
  color: var(--ak-fg-muted);
}
.process-step strong, .process-step h3, .process-step h4 { color: var(--ak-fg); letter-spacing: -0.02em; }
.section-cream .process-step { color: var(--ak-ink-muted); }
.process-step-num { color: var(--ak-accent-hi); font-weight: 800; letter-spacing: -0.02em; line-height: 1.35; height: auto; }
.process-step-tag {
  display: inline-block;
  padding: 5px 12px;
  border: 1px solid var(--ak-line);
  border-radius: var(--ak-pill);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ak-fg-muted);
}
.section-cream .process-step { background: var(--ak-paper-2); border-color: var(--ak-ink-line); box-shadow: var(--ak-shadow-paper); }
.section-cream .process-step-num { color: var(--ak-accent); }
.section-cream .process-step-tag { border-color: var(--ak-ink-line); color: var(--ak-ink-muted); }

/* --- Gros chiffres ------------------------------------------------------- */
.kv-grid { gap: clamp(20px, 3vw, 52px); }
.kv-num {
  font-size: clamp(40px, 5.4vw, 76px);
  line-height: 1;
  letter-spacing: -0.035em;
  font-weight: 700;
  color: var(--ak-fg);
}
.kv-label { font-size: 13.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ak-fg-faint); }

/* --- Bandeau de confiance ----------------------------------------------- */
.trust { background: var(--ak-bg-2); border-top: 1px solid var(--ak-line); border-bottom: 1px solid var(--ak-line); }
.trust-label { font-size: 12.5px; letter-spacing: 0.09em; text-transform: uppercase; color: var(--ak-fg-faint); }
.trust-logo, .trust-logos img { filter: grayscale(1) brightness(2.6); opacity: 0.6; transition: opacity 0.2s ease; }
.trust-logo:hover, .trust-logos img:hover { opacity: 1; }

/* --- Témoignages -------------------------------------------------------- */
.testimonial {
  padding: 30px;
  border: 1px solid var(--ak-line);
  border-radius: var(--ak-r);
  background: var(--ak-bg-2);
  box-shadow: var(--ak-shadow);
}
.testimonial-quote { font-size: clamp(16px, 1.3vw, 19px); line-height: 1.55; color: var(--ak-fg); letter-spacing: -0.012em; }
.testimonial-name { color: var(--ak-fg); font-weight: 600; }
.testimonial-role { color: var(--ak-fg-faint); font-size: 13.5px; }
.testimonial-avatar {
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: var(--ak-pill);
  border: 1px solid var(--ak-line);
  background: var(--ak-accent);
  color: #fff;
}
.testimonial-stars { color: #f5c542; }
.section-cream .testimonial { background: var(--ak-paper-2); border-color: var(--ak-ink-line); box-shadow: var(--ak-shadow-paper); }
.section-cream .testimonial-quote, .section-cream .testimonial-name { color: var(--ak-ink); }
.section-cream .testimonial-role { color: var(--ak-ink-muted); }

/* --- FAQ en accordéon --------------------------------------------------- */
.faq-list { border-top: 1px solid var(--ak-line); }
.faq-item { border-bottom: 1px solid var(--ak-line); }
.faq-item-q {
  padding: 26px 0;
  font-size: clamp(16px, 1.35vw, 21px);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--ak-fg);
}
.faq-item-q:hover { color: var(--ak-accent-hi); }
.faq-item-a { color: var(--ak-fg-muted); line-height: 1.65; padding-bottom: 26px; }
.section-cream .faq-list, .section-cream .faq-item { border-color: var(--ak-ink-line); }
.section-cream .faq-item-q { color: var(--ak-ink); }
.section-cream .faq-item-q:hover { color: var(--ak-accent); }
.section-cream .faq-item-a { color: var(--ak-ink-muted); }

/* --- Zones d'intervention ----------------------------------------------- */
.zone-grid { gap: 12px; }
.zone-city {
  padding: 18px 20px;
  border: 1px solid var(--ak-line);
  border-radius: var(--ak-r-sm);
  background: var(--ak-bg-2);
  color: var(--ak-fg);
}
.zone-city:hover { border-color: var(--ak-line-2); }
.zone-city-meta { color: var(--ak-fg-faint); font-size: 13px; }
.section-cream .zone-city { background: var(--ak-paper-2); border-color: var(--ak-ink-line); color: var(--ak-ink); }
.section-cream .zone-city-meta { color: var(--ak-ink-muted); }

/* --- Listes à coches ---------------------------------------------------- */
.devis-promise {
  background: var(--ak-bg-3);
  border: 1px solid var(--ak-line);
  border-radius: var(--ak-r);
  color: var(--ak-fg-muted);
}
.devis-promise ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.devis-promise ul li { display: flex; align-items: flex-start; gap: 10px; color: var(--ak-fg-muted); font-size: 14.5px; }
.devis-promise ul li svg { flex: none; margin-top: 3px; color: var(--ak-accent-hi); }
.devis-promise h4 { color: var(--ak-fg); font-size: 12.5px; letter-spacing: 0.09em; text-transform: uppercase; margin-bottom: 16px; }

/* Pastilles : texte sur une seule ligne, c'est le conteneur qui passe à la ligne */
.tag, .solution-card-tags span, .process-step-tag, .hero-tag, .section-eyebrow {
  height: auto;
  min-height: 0;
  line-height: 1.3;
  white-space: nowrap;
}
/* Les options du devis portent des libellés longs : elles doivent pouvoir se
   couper, sinon la ligne déborde et crée un scroll horizontal sur mobile. */
.devis-option, .devis-budget-option {
  height: auto;
  min-height: 0;
  line-height: 1.3;
  white-space: normal;
  max-width: 100%;
}
.solution-card-tags, .devis-options, .devis-budget { flex-wrap: wrap; }
.devis-option, .devis-budget-option { padding: 11px 18px; text-align: center; }

/* CTA « sur fond sombre » aligné sur l'accent */
.btn-on-dark { background: var(--ak-accent-btn); color: #fff; border: 1px solid var(--ak-accent-btn); }
.btn-on-dark:hover { background: var(--ak-accent-hi); border-color: var(--ak-accent-hi); color: #fff; }
.btn-ghost-on-dark { background: transparent; color: var(--ak-fg); border: 1px solid var(--ak-line-2); }
.btn-ghost-on-dark:hover { background: rgba(255, 255, 255, 0.08); border-color: var(--ak-fg); color: var(--ak-fg); }

/* --- Formulaire de devis ------------------------------------------------- */
.devis-wrap { border: 1px solid var(--ak-line); border-radius: var(--ak-r); background: var(--ak-bg-2); box-shadow: var(--ak-shadow); }
.devis-side { border-radius: var(--ak-r); }
/* Bloc contact : divs sans classe, il faut un override portée large */
.devis-side, .devis-side div, .devis-side p, .devis-side span { color: var(--ak-fg-muted); }
/* Certaines lignes sont stylées en inline via var(--c-ink) / var(--c-fg-muted) :
   on redéfinit ces variables dans la portée du formulaire plutôt que de lutter
   contre la spécificité des styles inline. */
.devis-wrap, .devis-side, .devis-promise {
  --c-ink: var(--ak-fg);
  --c-fg-muted: var(--ak-fg-muted);
  --c-ink-70: var(--ak-fg-muted);
  --c-ink-55: var(--ak-fg-muted);
  --c-ink-35: var(--ak-fg-faint);
}
.devis-side a, .devis-side strong, .devis-side h3, .devis-side h4 { color: var(--ak-fg); }
.devis-side a:hover { color: var(--ak-accent-hi); }
.field label { font-size: 13px; font-weight: 600; letter-spacing: 0.02em; color: var(--ak-fg-muted); }
.input, .textarea, .select {
  border: 1px solid var(--ak-line-2);
  border-radius: var(--ak-r-sm);
  background: rgba(255, 255, 255, 0.05);
  color: var(--ak-fg);
  font: inherit;
}
.input::placeholder, .textarea::placeholder { color: var(--ak-fg-faint); }
.input:focus, .textarea:focus, .select:focus { border-color: var(--ak-accent-hi); outline: none; background: rgba(255, 255, 255, 0.08); }
.devis-option, .devis-budget-option {
  border: 1px solid var(--ak-line-2);
  border-radius: var(--ak-pill);
  background: rgba(255, 255, 255, 0.04);
  color: var(--ak-fg-muted);
  transition: border-color 0.18s ease, color 0.18s ease, background 0.18s ease;
}
.devis-option:hover, .devis-budget-option:hover { color: var(--ak-fg); border-color: var(--ak-fg); }
.devis-option[data-on="1"], .devis-option.is-on, .devis-option.is-active,
.devis-budget-option.is-on, .devis-budget-option[data-on="1"], .devis-budget-option.is-active {
  background: var(--ak-accent-soft);
  border-color: var(--ak-accent);
  color: var(--ak-fg);
}
.devis-option.is-active .devis-option-check, .devis-option-check {
  background: var(--ak-accent);
  border-color: var(--ak-accent);
  color: #fff;
}
.devis-option:not(.is-active) .devis-option-check { background: transparent; border-color: var(--ak-line-2); }
.devis-option.is-active input[type="checkbox"], .devis-wrap input[type="checkbox"] { accent-color: var(--ak-accent); }
.devis-dropzone { border: 1px dashed var(--ak-line-2); border-radius: var(--ak-r); background: rgba(255, 255, 255, 0.03); color: var(--ak-fg-muted); }
.devis-wrap .devis-dropzone *:not(svg):not(path) { color: inherit; }
.devis-wrap .devis-dropzone strong, .devis-wrap .devis-dropzone button { color: var(--ak-fg); }
.devis-wrap .devis-dropzone svg, .devis-wrap .devis-dropzone svg path { color: var(--ak-accent-hi); stroke: currentColor; }
.devis-wrap input[type="checkbox"] { accent-color: var(--ak-accent); width: 17px; height: 17px; }
.devis-dropzone-hint { color: var(--ak-fg-faint); }
.devis-file { border: 1px solid var(--ak-line); border-radius: var(--ak-r-sm); background: rgba(255, 255, 255, 0.05); }
.devis-file-name { color: var(--ak-fg); }
.devis-file-size, .devis-file-remove { color: var(--ak-fg-faint); }
.devis-success { border: 1px solid var(--ak-line); border-radius: var(--ak-r); background: var(--ak-bg-2); }
.devis-success-icon { color: var(--ak-accent-hi); }

/* --- CTA finale --------------------------------------------------------- */
.final-cta {
  background: radial-gradient(110% 130% at 50% 0%, rgba(23, 167, 91, 0.16) 0%, rgba(0, 0, 0, 0) 60%), var(--ak-bg-2);
  border-top: 1px solid var(--ak-line);
}
.final-cta .section-title { font-size: clamp(34px, 5vw, 70px); }
.final-cta-actions { gap: 14px; }

/* --- Footer ------------------------------------------------------------- */
.footer { background: var(--ak-bg); border-top: 1px solid var(--ak-line); color: var(--ak-fg-muted); }
.footer-col h4 { color: var(--ak-fg); font-size: 12.5px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; }
.footer-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.footer-col a { color: var(--ak-fg-muted); }
.footer-col a:hover { color: var(--ak-accent-hi); }
.footer-brand-pitch { color: var(--ak-fg-muted); }
.footer-brand-address, .footer-copyright, .footer-legal { color: var(--ak-fg-faint); font-size: 13px; }
.footer-top { border-bottom: 1px solid var(--ak-line); }
.footer-bottom { border-top: 1px solid var(--ak-line); }

/* Logo du footer : silhouette blanche quelle que soit la couleur du fichier */
.footer-brand .footer-logo img,
html[data-footer-custom][data-footer-tone="dark"] .footer-brand .footer-logo img {
  filter: brightness(0) invert(1);
}

/* --- Tiroir mobile ------------------------------------------------------ */
.mobile-drawer { background: var(--ak-bg); color: var(--ak-fg); }
.mobile-drawer-head { border-bottom: 1px solid var(--ak-line); }
.mobile-drawer-link { color: var(--ak-fg); font-weight: 600; letter-spacing: -0.02em; }
.mobile-drawer-link:hover { color: var(--ak-accent-hi); }
.mobile-drawer-section { color: var(--ak-fg-faint); font-size: 12px; letter-spacing: 0.09em; text-transform: uppercase; }
.mobile-drawer-sub { color: var(--ak-fg-muted); }
.mobile-drawer-close { color: var(--ak-fg); }

/* --- Divers ------------------------------------------------------------- */
.ph { background: var(--ak-bg-3); border: 1px solid var(--ak-line); border-radius: var(--ak-r-sm); color: var(--ak-fg-faint); }
.ph-icon, .ph-cap { color: var(--ak-fg-faint); }
.ph-cap { font-size: 12.5px; }
.t-label { color: var(--ak-fg-faint); letter-spacing: 0.09em; text-transform: uppercase; font-size: 12px; }
.section-cream .ph { background: rgba(11, 13, 12, 0.05); border-color: var(--ak-ink-line); color: var(--ak-ink-muted); }
.section-cream .t-label { color: var(--ak-ink-muted); }

/* Le CTA du header reste vert accent malgré la règle « header sombre » de landing.css */
html[data-nav-custom][data-nav-tone="dark"] .nav .nav-cta-desktop.btn-primary,
html[data-nav-custom][data-nav-tone="dark"] .nav .nav-cta-desktop.btn-primary:hover {
  background: var(--ak-accent-btn) !important;
  border-color: var(--ak-accent-btn) !important;
  color: #fff !important;
}
html[data-nav-custom][data-nav-tone="dark"] .nav .nav-cta-desktop.btn-primary:hover {
  background: var(--ak-accent-hi) !important;
  border-color: var(--ak-accent-hi) !important;
}

/* =============================================================================
   SECTION SOLUTIONS — mise en page de référence : en-tête centré, onglets en
   pastilles, grille de cartes à vignette.
   ========================================================================== */
.sol-v2 { background: var(--ak-bg); color: var(--ak-fg); }
.sol-v2-head { max-width: 780px; margin: 0 auto; text-align: center; }
.sol-v2-head .section-title { color: var(--ak-fg); margin: 0 0 16px; }
.sol-v2-head .section-lead { color: var(--ak-fg-muted); margin: 0 auto; }

.sol-tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  margin: 40px auto 46px;
  padding: 6px;
  border: 1px solid var(--ak-line);
  border-radius: var(--ak-r);
  background: var(--ak-bg-2);
  max-width: 100%;
}
.sol-tab {
  padding: 9px 18px;
  border: 0;
  border-radius: var(--ak-pill);
  background: transparent;
  color: var(--ak-fg-muted);
  font: inherit;
  font-size: 13.5px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease;
}
.sol-tab:hover { color: var(--ak-fg); background: rgba(255, 255, 255, 0.06); }
.sol-tab.is-active { background: var(--ak-fg); color: var(--ak-ink); }

.sol-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}
.sol-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--ak-line);
  border-radius: var(--ak-r);
  background: var(--ak-bg-2);
  box-shadow: var(--ak-shadow);
  overflow: hidden;
  transition: border-color 0.2s ease, transform 0.2s ease;
}
.sol-card:hover { border-color: var(--ak-line-2); transform: translateY(-3px); }
.sol-card-img { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--ak-bg-3); }
.sol-card-img img, .sol-card-img .sol-carousel, .sol-card-img .ph { width: 100%; height: 100%; object-fit: cover; }
.sol-card-body { display: flex; flex-direction: column; gap: 9px; padding: 22px; flex: 1; align-items: center; text-align: center; }
.sol-card-fam { font-size: 11.5px; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; color: var(--ak-accent-hi); }
.sol-card-title { font-size: 22px; font-weight: 700; letter-spacing: -0.025em; line-height: 1.2; color: var(--ak-fg); margin: 0; }
.sol-card-items { font-size: 13.5px; line-height: 1.5; color: var(--ak-fg-muted); margin: 0; text-align: center; }
.sol-card-link {
  margin-top: auto;
  padding: 0;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 0;
  background: none;
  color: var(--ak-fg);
  font: inherit;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  transition: gap 0.18s ease, color 0.18s ease;
}
.sol-card-link:hover { color: var(--ak-accent-hi); gap: 12px; }
@media (max-width: 1023px) { .sol-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 639px) {
  .sol-cards { grid-template-columns: 1fr; gap: 16px; }
  .sol-tabs { margin: 30px auto 32px; }
}

/* Vignettes de marque numérotées — affichées tant qu'aucune photo n'est fournie
   pour la solution (le tweak « Photos des solutions » les remplace). */
.sol-tile { position: absolute; inset: 0; }
.sol-tile::after {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(135deg, rgba(255,255,255,.045) 0 2px, rgba(255,255,255,0) 2px 9px);
}
.sol-tile-01 { background: radial-gradient(120% 100% at 18% 0%, #1c6b45 0%, #0a1a12 62%, #050b08 100%); }
.sol-tile-02 { background: radial-gradient(120% 100% at 82% 0%, #17a75b 0%, #0b2418 60%, #050b08 100%); }
.sol-tile-03 { background: radial-gradient(120% 100% at 50% 110%, #29c973 0%, #0b2016 58%, #050b08 100%); }
.sol-tile-04 { background: radial-gradient(120% 100% at 12% 100%, #0f7f45 0%, #0a1a12 60%, #050b08 100%); }
.sol-tile-05 { background: radial-gradient(120% 100% at 88% 12%, #2e8f60 0%, #0b1c13 60%, #050b08 100%); }
.sol-tile-06 { background: radial-gradient(120% 100% at 40% 0%, #116b48 0%, #091610 62%, #050b08 100%); }
.sol-tile-num {
  position: absolute;
  left: 20px;
  bottom: 18px;
  font-size: 44px;
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
  color: rgba(255, 255, 255, 0.14);
}

/* En-têtes de section centrés, comme la référence */
.section-head { max-width: 860px; margin-left: auto; margin-right: auto; text-align: center; }
.section-head .section-eyebrow { margin-left: auto; margin-right: auto; }
.section-head .section-lead { margin-left: auto; margin-right: auto; }
.section-head-row { flex-direction: column; align-items: center; text-align: center; }
/* Les blocs titre/accroche ont leur propre max-width : sans marges auto leur boîte
   reste calée à gauche et le texte paraît décentré malgré text-align:center. */
.section-head .section-title, .section-head-row .section-title, .sol-v2-head .section-title,
.section-head .section-lead, .section-head-row .section-lead, .sol-v2-head .section-lead,
.final-cta .section-title, .final-cta .section-lead {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
/* Sections dont l'en-tête n'est pas dans .section-head (zones d'intervention) */
#zones .section-title, #zones .section-lead {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
#zones .section-eyebrow { display: flex; width: fit-content; margin-left: auto; margin-right: auto; }

/* =============================================================================
   PAGE FILM SOLAIRE — les blocs fs-* portent leurs propres couleurs claires
   (var(--c-paper-elev), accents bleus). On les aligne sur le thème sombre.
   ========================================================================== */
html .fs-hero-stat-num { color: var(--ak-fg); font-size: clamp(30px, 3vw, 40px); letter-spacing: -0.03em; }
html .fs-hero-stat-lab { color: var(--ak-fg-faint); letter-spacing: 0.09em; }

html .fs-types { gap: 22px; }
html .fs-type, html .fs-price {
  background: var(--ak-bg-2);
  border: 1px solid var(--ak-line);
  border-radius: var(--ak-r);
  box-shadow: var(--ak-shadow);
  transition: border-color 0.2s ease, transform 0.2s ease;
}
html .fs-type:hover, html .fs-price:hover { border-color: var(--ak-line-2); transform: translateY(-3px); }
html .fs-type h3 { color: var(--ak-fg); font-size: 18.5px; font-weight: 700; letter-spacing: -0.02em; margin-bottom: 10px; }
html .fs-type p, html .fs-price p { color: var(--ak-fg-muted); font-size: 14.5px; line-height: 1.55; }
html .fs-type-num {
  width: auto;
  height: auto;
  min-width: 38px;
  padding: 8px 13px;
  border-radius: var(--ak-r-sm);
  background: var(--ak-accent-soft);
  color: var(--ak-accent-hi);
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
  justify-self: start;
}
html .fs-price-lab { color: var(--ak-fg-faint); letter-spacing: 0.09em; }
html .fs-price-num { color: var(--ak-fg); letter-spacing: -0.035em; }
html .fs-price-num em { color: var(--ak-fg-muted); }

html .fs-criteria li { border-bottom: 1px solid var(--ak-line); }
html .fs-criteria b { color: var(--ak-fg); font-size: 16.5px; font-weight: 700; letter-spacing: -0.02em; }
html .fs-criteria span { color: var(--ak-fg-muted); font-size: 14.5px; }
html .fs-criteria .fs-ck { background: var(--ak-accent); color: #fff; }
html .fs-note { color: var(--ak-fg-muted); }
html .fs-note .fs-ck { color: var(--ak-accent-hi); }

/* Visuel « verre » : dégradé bleu d'origine → vert de marque */
html .fs-glass {
  border-color: var(--ak-line);
  background: linear-gradient(160deg, #bfeed6 0%, #4fd493 46%, #0d7f45 100%);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4), 0 30px 60px -28px rgba(13, 127, 69, 0.55);
}
html .fs-glass-badge { background: var(--ak-bg-2); border: 1px solid var(--ak-line); color: var(--ak-fg); border-radius: var(--ak-r-sm); }
html .fs-glass-badge b { color: var(--ak-accent-hi); }
html .fs-glass-badge span { color: var(--ak-fg-faint); letter-spacing: 0.09em; }

/* Variantes sur les sections claires de la page */
.section-cream .fs-type, .section-cream .fs-price { background: var(--ak-paper-2); border-color: var(--ak-ink-line); box-shadow: var(--ak-shadow-paper); }
.section-cream .fs-type h3, .section-cream .fs-price-num, .section-cream .fs-criteria b { color: var(--ak-ink); }
.section-cream .fs-type p, .section-cream .fs-price p, .section-cream .fs-criteria span,
.section-cream .fs-note, .section-cream .fs-price-num em { color: var(--ak-ink-muted); }
.section-cream .fs-type-num { background: rgba(23, 167, 91, 0.12); color: var(--ak-accent); }
.section-cream .fs-criteria li { border-bottom-color: var(--ak-ink-line); }
.section-cream .fs-price-lab { color: var(--ak-ink-muted); }
.section-cream .fs-note .fs-ck { color: var(--ak-accent); }

/* --- Apparitions au scroll (CSS pur, aucun JS) -------------------------- */
@keyframes ak-reveal { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .section-head, .pillar, .solution-card, .process-step, .kv, .testimonial,
    .faq-item, .showcase-cell, .zone-city, .devis-wrap, .final-cta-grid, .trust-inner {
      animation: ak-reveal linear both;
      animation-timeline: view();
      animation-range: entry 4% entry 46%;
    }
  }
}

@media (max-width: 639px) {
  :root { --ak-pad: 68px; --ak-r: 16px; }
  .pillar, .process-step, .testimonial { padding: 22px; }
  .hero-marquee { border-radius: var(--ak-r); padding: 16px 20px; }

  /* Titre du hero : le plancher de 42px rendait « COMMUNICATION » (361px) plus
     large que la colonne (349px). On abaisse le plancher et on autorise la
     coupe en dernier recours. */
  .hero-animated-h1, .hero-animated-h1 h3, .hero-animated-h1 .hero-static-line span {
    font-size: clamp(30px, 8.6vw, 40px) !important;
    letter-spacing: -0.015em;
    overflow-wrap: anywhere;
  }
  .hero-sub { font-size: 16.5px; max-width: none; }

  /* Header : le CTA venait coller le logo. La navigation mobile le reprend déjà. */
  .nav .nav-cta-desktop { display: none; }
  .nav-inner { gap: 12px; }

  /* Lisibilité : plus aucun texte sous 12px sur mobile */
  .t-label, .ph-cap, .trust-label, .section-eyebrow, .tag, .solution-card-tags span,
  .process-step-tag, .sol-card-fam, .kv-label, .footer-col h4, .mobile-drawer-section,
  .testimonial-role, .devis-promise h4, .footer-copyright, .footer-legal,
  .footer-brand-address, .fs-hero-stat-lab, .fs-price-lab, .glass-badge span,
  .fs-glass-badge span { font-size: 12px; letter-spacing: 0.06em; }
  .sol-card-items, .pillar p, .process-step p, .zone-city-meta, .devis-promise ul li,
  .devis-file-size { font-size: 14px; }
  /* Vignettes et blocs « placeholder » : leurs libellés descendent à 10px */
  .ph, .ph *, .zone-city, .zone-city *, .devis-dropzone, .devis-dropzone * { font-size: 12px; }
  .ph strong, .zone-city strong, .devis-dropzone strong { font-size: 14px; }

  /* Cibles tactiles : 44px minimum */
  .btn, .sol-tab, .devis-option, .devis-budget-option, .nav-hamburger,
  .mobile-drawer-link, .mobile-drawer-sub, .mobile-drawer-close, .sol-carousel-arrow {
    min-height: 44px;
  }
  .btn, .sol-tab { display: inline-flex; align-items: center; justify-content: center; }
  .sol-card-link, .solution-card-link, .footer-col a, .topbar-phone,
  .footer-legal a, .footer-bottom a, .footer-brand-address a, .devis-side a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
  .footer-legal { display: flex; flex-wrap: wrap; gap: 0 18px; }
  .footer-col ul { gap: 2px; }

  /* Boutons du hero en pleine largeur, plus faciles à viser */
  .hero-cta { flex-direction: column; align-items: stretch; gap: 10px; }
  .hero-cta .btn { width: 100%; }

  /* Onglets solutions : tous visibles, sur plusieurs lignes (pas de défilement) */
  .sol-tabs {
    flex-wrap: wrap;
    justify-content: center;
    overflow-x: visible;
    border-radius: var(--ak-r);
    margin: 26px 0 30px;
    padding: 8px;
  }
  .sol-tab { white-space: normal; flex: 0 1 auto; text-align: center; padding: 10px 14px; font-size: 13px; }
  .sol-card-title { font-size: 20px; }

  /* Footer mobile racourci : on masque Solutions, Naviguer et Villes PACA
     (le menu et la section Solutions couvrent déjà ces liens). */
  .footer-col-solutions, .footer-col-nav, .footer-col-villes { display: none; }

  /* Options du devis : une colonne, alignées à gauche */
  .devis-options, .devis-budget { flex-direction: column; align-items: stretch; }
  .devis-option, .devis-budget-option { text-align: left; border-radius: var(--ak-r-sm); }
}