/* ==========================================================================
   IDT Climatisation & Chauffage
   Implementation of "IDT Climatisation.dc.html" as a standalone static site.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */

.root {
  --acc:  #2F7CF6;   /* accent — was the `accent` editor prop */
  --deep: #123A78;
  --ink:  #0B2239;
  --sky:  #D8ECF9;
  --sky2: #C3E1F7;
  --red:  #D0342C;
  --wa:   #1FA855;
  --wa-hover: #25D366;

  --line:        #D9E4EE;
  --line-soft:   #EDF1F5;
  --line-logo:   #DDE5ED;
  --surface:     #fff;
  --surface-alt: #F5F7F9;
  --surface-mut: #F3F6F9;

  --muted:   #4C5B6B;
  --muted-2: #7C8894;
  --muted-3: #93A0AD;
  --muted-4: #6B7681;

  --font-display: Archivo, sans-serif;
  --font-body: "Instrument Sans", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", monospace;

  --wrap: 1240px;
  --header-h: 78px;

  max-width: 100%;
  overflow-x: hidden;
}

/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: #F5F7F9;
  color: #0B2239;
  font-family: "Instrument Sans", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

a { color: #1B4FA8; text-decoration: none; }
a:hover { color: #2F7CF6; }

::selection { background: #2F7CF6; color: #fff; }

img { max-width: 100%; display: block; }

button { font: inherit; }

:where(a, button):focus-visible {
  outline: 2px solid var(--acc);
  outline-offset: 3px;
  border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--ink, #0B2239); color: #fff;
  padding: 12px 20px; border-radius: 0 0 10px 0; font-weight: 600;
}
.skip-link:focus { left: 0; color: #fff; }

/* --------------------------------------------------------------------------
   3. Layout primitives
   -------------------------------------------------------------------------- */

.wrap { max-width: var(--wrap); margin: 0 auto; }

.section { padding: clamp(64px, 8vw, 110px) 20px; scroll-margin-top: calc(var(--header-h) + 12px); }
.section--flush-top { padding-top: 0; }
.section--sky { background: var(--sky); color: var(--ink); }

/* `#tarifs` keeps the design's asymmetric bottom padding. */
#tarifs { padding-bottom: clamp(56px, 7vw, 100px); }

.kicker {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--deep);
  margin: 0 0 16px;
}
.kicker--red { color: var(--red); }
.kicker--onDeep { color: rgba(255, 255, 255, 0.55); }

.h2 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(34px, 4vw, 52px);
  line-height: 1.02;
  letter-spacing: -0.03em;
  margin: 0 0 16px;
}

.t-acc { color: var(--acc); }
.t-red { color: var(--red); }

.section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
  flex-wrap: wrap;
  margin-bottom: 48px;
}
.section-head__copy { max-width: 660px; }
.section-head__lede {
  font-size: 17px; line-height: 1.6; color: var(--muted);
  margin: 0; text-wrap: pretty;
}
.section-head__lede strong { color: var(--ink); }

.link-arrow { font-size: 15px; font-weight: 600; }

/* --------------------------------------------------------------------------
   4. Buttons
   -------------------------------------------------------------------------- */

.btn {
  display: inline-block;
  font-size: 16px;
  font-weight: 700;
  padding: 16px 28px;
  border-radius: 999px;
  white-space: nowrap;
  max-width: 100%;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 140ms ease, border-color 140ms ease, color 140ms ease;
}

.btn--sm { font-size: 14.5px; padding: 12px 20px; }

/* white-space:normal annule le nowrap de .btn. Un bouton pleine largeur a une
   largeur imposée par son conteneur : si le libellé est plus long, le nowrap
   le fait déborder au lieu de le replier. Filet de sécurité pour tout libellé
   long ajouté plus tard. */
.btn--block { display: block; text-align: center; white-space: normal; }

.btn--wa { background: var(--wa); color: #fff; }
.btn--wa:hover { background: var(--wa-hover); color: #fff; }

.btn--ghost-ink {
  border-color: rgba(11, 34, 57, 0.25);
  color: var(--ink);
  font-weight: 600;
}
.btn--ghost-ink:hover { border-color: #0B2239; color: var(--ink); }

.btn--ghost-light {
  border-color: rgba(255, 255, 255, 0.3);
  color: #fff;
  font-weight: 600;
  padding: 17px 30px;
}
.btn--ghost-light:hover { border-color: #fff; color: #fff; }

.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }

/* --------------------------------------------------------------------------
   5. Header
   -------------------------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(216, 236, 249, 0.93);
  border-bottom: 1px solid rgba(11, 34, 57, 0.1);
}
@supports (backdrop-filter: blur(12px)) or (-webkit-backdrop-filter: blur(12px)) {
  .site-header { -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
}

.site-header__inner {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 12px 20px;
  min-height: var(--header-h);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 28px;
}

.brand { display: flex; align-items: center; gap: 13px; color: var(--red); }
.brand:hover { color: var(--red); }
.brand__text { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.brand__name {
  font-family: var(--font-display);
  font-weight: 800; font-size: 30px; line-height: 1;
  letter-spacing: -0.03em; color: var(--red);
}
.brand__tagline {
  font-family: var(--font-mono);
  font-size: 12px; line-height: 1;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--red);
}

.site-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 24px;
  margin-left: auto;
  align-items: center;
}
.site-nav a {
  color: rgba(11, 34, 57, 0.72);
  font-size: 14.5px;
  font-weight: 600;
  white-space: nowrap;
}
.site-nav a:hover { color: #0B2239; }

/* Bouton menu — masqué au-dessus de 900px (voir Responsive). */
.burger {
  display: none;
  width: 44px; height: 44px;
  flex-shrink: 0;
  margin-left: auto;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  background: transparent;
  border: 1px solid rgba(11, 34, 57, 0.18);
  border-radius: 12px;
  cursor: pointer;
  transition: background 140ms ease;
}
.burger__bar {
  width: 18px; height: 2px;
  background: var(--ink);
  border-radius: 2px;
  display: block;
  transition: transform 160ms ease, opacity 160ms ease;
}
.burger.is-open { background: rgba(11, 34, 57, 0.08); }
.burger.is-open .burger__bar:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.burger.is-open .burger__bar:nth-child(2) { opacity: 0; }
.burger.is-open .burger__bar:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* --------------------------------------------------------------------------
   Barre d'action fixe (mobile / tablette)
   -------------------------------------------------------------------------- */

.mobile-bar { display: none; }

.mobile-bar__btn {
  font-size: 15.5px;
  font-weight: 700;
  padding: 14px;
  border-radius: 14px;
  text-align: center;
  white-space: nowrap;
}
.mobile-bar__btn--call { border-color: rgba(11, 34, 57, 0.22); color: var(--ink); }
.mobile-bar__btn--call:hover { border-color: var(--ink); color: var(--ink); }
.mobile-bar__btn--wa { background: var(--wa); color: #fff; }
.mobile-bar__btn--wa:hover { background: var(--wa-hover); color: #fff; }

/* --------------------------------------------------------------------------
   6. Hero
   -------------------------------------------------------------------------- */

.hero { background: var(--sky); color: var(--ink); position: relative; overflow: hidden; scroll-margin-top: var(--header-h); }

.hero__inner {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: clamp(56px, 7vw, 96px) 20px clamp(56px, 7vw, 96px);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 44px;
  align-items: center;
}

.hero__copy { padding-bottom: 0; }

.eyebrow-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border: 1px solid rgba(11, 34, 57, 0.18);
  border-radius: 999px;
  padding: 7px 14px 7px 10px;
  margin: 0 0 32px;
  white-space: nowrap;
  max-width: 100%;
  background: rgba(255, 255, 255, 0.55);
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(11, 34, 57, 0.72);
}
.eyebrow-pill__dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--red);
  box-shadow: 0 0 0 4px rgba(208, 52, 44, 0.18);
  flex-shrink: 0;
}

.hero__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(42px, 5.2vw, 76px);
  line-height: 0.95;
  letter-spacing: -0.035em;
  margin: 0 0 26px;
}

.hero__lede {
  font-size: 19px;
  line-height: 1.6;
  color: rgba(11, 34, 57, 0.72);
  max-width: 540px;
  margin: 0 0 38px;
  text-wrap: pretty;
}
.hero__lede strong { color: var(--ink); }

/* --------------------------------------------------------------------------
   7. Photo placeholders
   -------------------------------------------------------------------------- */

.photo-slot {
  border: 1px solid rgba(11, 34, 57, 0.14);
  background-color: rgba(255, 255, 255, 0.5);
  background-image: repeating-linear-gradient(135deg, rgba(11, 34, 57, 0.05) 0 10px, transparent 10px 20px);
  display: flex;
  align-items: flex-end;
  padding: 22px;
}
.photo-slot__label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: rgba(11, 34, 57, 0.55);
}

/* Centred with the copy (align-items:center above), so it is a self-contained
   card now — full radius and a border on all four sides. */
.hero__photo-slot {
  height: clamp(280px, 38vw, 440px);
  border-radius: 20px;
}
.hero__photo {
  height: clamp(280px, 38vw, 440px);
  width: 100%;
  object-fit: cover;
  border-radius: 20px;
  border: 1px solid rgba(11, 34, 57, 0.14);
}

.photo-slot--tile {
  aspect-ratio: 4 / 5;
  border-radius: 18px;
  border-color: var(--line);
  background-color: #EDF1F5;
  padding: 18px;
}
.photo-slot--tile .photo-slot__label { font-size: 11px; letter-spacing: normal; color: var(--muted-4); }

/* --------------------------------------------------------------------------
   8. Value strip
   -------------------------------------------------------------------------- */

.strip { background: var(--deep); color: #fff; }
.strip__inner {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 26px 20px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 22px 28px;
}
.strip__item { display: flex; flex-direction: column; gap: 4px; }
.strip__title { font-family: var(--font-display); font-weight: 700; font-size: 15px; }
.strip__sub { font-size: 13px; color: rgba(255, 255, 255, 0.62); }

/* --------------------------------------------------------------------------
   9. Tarifs — shared
   -------------------------------------------------------------------------- */

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 24px;
}

/* Ce que le prix couvre — repris du tableau comparatif supprimé. */
.pricing-note {
  margin: 16px 2px 0;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--muted);
}

/* --------------------------------------------------------------------------
   10. Tarifs — sélecteur
   -------------------------------------------------------------------------- */

.selector {
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(11, 34, 57, 0.04), 0 20px 50px -30px rgba(11, 34, 57, 0.22);
}
.selector__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.selector__picker { padding: clamp(24px, 3vw, 38px) clamp(20px, 3vw, 40px) 40px; }

.step-label {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted-2);
  margin: 0 0 14px;
}

.kw-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 36px;
}
.kw {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 16px 18px;
  border-radius: 14px;
  cursor: pointer;
  text-align: left;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--ink);
  transition: all 140ms ease;
}
.kw.is-active { border-color: var(--acc); background: var(--acc); color: #fff; }
.kw__num { font-family: var(--font-display); font-weight: 800; font-size: 24px; letter-spacing: -0.02em; }
.kw__sub { font-size: 11.5px; opacity: 0.7; font-weight: 500; }

/* container-type : la ligne de marque s'adapte à la largeur de SA colonne, pas
   à celle de l'écran. C'est ce qui permet de basculer en version compacte au
   bon moment quel que soit l'appareil. */
.brand-list { display: flex; flex-direction: column; gap: 8px; container-type: inline-size; }

/* nowrap : garde-fou pour les noms de marque longs. Sans ça, dès que la ligne
   est trop serrée c'est le bloc prix qui bascule sur une 2e ligne et se
   désaligne. Avec nowrap, c'est le nom qui se replie et la colonne des prix
   reste alignée. */
.brand-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: nowrap;
  gap: 8px 14px;
  width: 100%;
  padding: 12px 16px;
  border-radius: 14px;
  cursor: pointer;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--ink);
  text-align: left;
  transition: all 140ms ease;
}
.brand-row.is-active { border-color: var(--acc); background: rgba(47, 124, 246, 0.07); }

.brand-row__id { display: flex; align-items: center; gap: 12px; min-width: 0; }
.brand-row__dot {
  width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0;
  background: #CBD6E1;
  transition: background 140ms ease;
}
.brand-row.is-active .brand-row__dot { background: var(--acc); }

.brand-row__names { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.brand-row__name { font-family: var(--font-display); font-weight: 700; font-size: 16px; letter-spacing: -0.01em; text-align: left; }
.brand-row__wifi { font-size: 11px; color: var(--muted-2); }
/* Ligne compacte "Gar. 5 ans · wifi intégré" : affichée à la place de la
   colonne garantie quand le conteneur est étroit (voir @container plus bas). */
.brand-row__mmeta { display: none; font-size: 11px; color: var(--muted-2); text-align: left; }

.brand-row__meta { display: flex; align-items: center; gap: 14px; flex-shrink: 0; margin-left: auto; }
.brand-row__warranty { font-size: 11.5px; color: var(--muted-2); font-weight: 500; white-space: nowrap; }
.brand-row__price { font-family: var(--font-display); font-weight: 700; font-size: 16.5px; }


/* Brand logo slot.
   Deliberately has no background and no border so a transparent PNG/SVG sits
   directly on the card. Drop files into assets/img/brands/ — see the README
   there. Missing files degrade to the hatched chip via .is-missing (set by the
   loader in index.html), so the layout never breaks. */
/* 84x28, pas les 58x26 de la pastille d'origine : les logos "mot" très larges
   (Toshiba 6.4:1, Hitachi 6.2:1) tombaient à 9 px de haut et devenaient
   illisibles. object-fit:contain fait le reste, aucun logo n'est déformé. */
.brand-logo {
  width: 84px; height: 28px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.brand-logo__img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}
.brand-logo__fallback { display: none; }

.brand-logo.is-missing {
  border-radius: 6px;
  border: 1px solid var(--line-logo);
  background-color: var(--surface-mut);
  background-image: repeating-linear-gradient(135deg, rgba(11, 34, 57, 0.06) 0 6px, transparent 6px 12px);
}
.brand-logo.is-missing .brand-logo__fallback {
  display: block;
  font-family: var(--font-mono);
  font-size: 8px; letter-spacing: 0.1em; color: var(--muted-3);
}

/* Ces deux blocs doivent rester APRÈS .brand-logo : à spécificité égale, c'est
   l'ordre du fichier qui tranche, et les placer avant les laissait écraser.

   Sous ~520px de colonne, la ligne complète (pastille + logo + nom + wifi +
   garantie + prix) ne tient plus et se replie sur deux lignes. On bascule sur
   la version compacte du design mobile — garantie et wifi fusionnés sous le
   nom, colonne de droite réduite au prix. Rangées ~58px au lieu de ~82px. */
@container (max-width: 520px) {
  .brand-row { min-height: 58px; padding: 10px 14px; gap: 10px; }
  .brand-row__id { gap: 10px; }
  .brand-row__dot { display: none; }
  .brand-row__wifi { display: none; }
  .brand-row__mmeta { display: block; }
  .brand-row__warranty { display: none; }
  .brand-row__name { font-size: 14.5px; }
  .brand-logo { width: 64px; height: 24px; }
}

/* Petits téléphones (colonne ~290px sur un iPhone SE / 13 mini) : on récupère
   de la place sur le logo et le nom. */
@container (max-width: 330px) {
  .brand-row { padding: 10px 12px; gap: 8px; }
  .brand-row__id { gap: 8px; }
  .brand-logo { width: 50px; height: 22px; }
  .brand-row__name { font-size: 13.5px; }
  .brand-row__mmeta { font-size: 10.5px; }
  .brand-row__price { font-size: 15.5px; }
}

/* Summary panel */
.summary {
  padding: clamp(26px, 3vw, 38px) clamp(22px, 3vw, 40px) 40px;
  background: var(--sky2);
  color: var(--ink);
  display: flex;
  flex-direction: column;
}
.summary__label {
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  color: rgba(11, 34, 57, 0.6);
  margin: 0 0 22px;
}
.summary__brand {
  font-family: var(--font-display);
  font-weight: 700; font-size: 25px; letter-spacing: -0.02em;
  margin: 0 0 6px;
}
.summary__kw { font-size: 16px; color: rgba(11, 34, 57, 0.7); margin: 0 0 26px; }

.summary__price { display: flex; align-items: flex-start; gap: 6px; margin: 0 0 8px; }
.summary__amount {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(54px, 6vw, 76px);
  line-height: 0.9;
  letter-spacing: -0.04em;
}
.summary__currency {
  font-family: var(--font-display);
  font-weight: 700; font-size: 28px; color: var(--deep); margin-top: 6px;
}
.summary__allin { font-size: 15.5px; font-weight: 600; color: rgba(11, 34, 57, 0.72); margin: 0 0 24px; }

.summary__specs {
  display: flex; flex-direction: column; gap: 11px;
  padding-top: 22px;
  border-top: 1px solid rgba(11, 34, 57, 0.16);
  margin: 0 0 24px;
}
.summary__spec { display: flex; justify-content: space-between; gap: 16px; font-size: 15.5px; }
.summary__spec dt { color: rgba(11, 34, 57, 0.65); }
.summary__spec dd { margin: 0; font-weight: 700; text-align: right; }

.summary__cta { margin-top: auto; font-size: 17px; padding: 17px 24px; border-radius: 14px; }
.summary__note { font-size: 12.5px; color: rgba(11, 34, 57, 0.6); text-align: center; margin: 8px 0 0; }
.summary__note--strong { font-size: 14px; font-weight: 600; color: rgba(11, 34, 57, 0.7); margin-top: 12px; }

/* --------------------------------------------------------------------------
   11. Tarifs — "sur devis" cards
   -------------------------------------------------------------------------- */

.quote-cards {
  margin-top: 20px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
}
.quote-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 26px;
}
.quote-card__title { font-family: var(--font-display); font-weight: 700; font-size: 17px; margin: 0 0 8px; }
.quote-card__text { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--muted); }
.quote-card__tag {
  margin: 16px 0 0;
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--deep);
}

/* --------------------------------------------------------------------------
   12. Services
   -------------------------------------------------------------------------- */

.services__title { margin-bottom: 56px; max-width: 720px; }

.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1px;
  background: rgba(11, 34, 57, 0.14);
  border: 1px solid rgba(11, 34, 57, 0.14);
  border-radius: 20px;
  overflow: hidden;
}
.service { background: var(--sky); padding: 38px 34px; }
.service__num { font-family: var(--font-mono); font-size: 11px; color: rgba(11, 34, 57, 0.5); margin: 0 0 20px; }
.service__title {
  font-family: var(--font-display);
  font-weight: 700; font-size: 21px; letter-spacing: -0.01em;
  margin: 0 0 12px;
}
.service__text { margin: 0; font-size: 15px; line-height: 1.65; color: rgba(11, 34, 57, 0.7); }

/* --------------------------------------------------------------------------
   13. Chauffage
   -------------------------------------------------------------------------- */

.heating {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(255px, 1fr));
  gap: clamp(32px, 4vw, 60px);
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--line);
  border-top: 4px solid var(--red);
  border-radius: 24px;
  padding: clamp(30px, 4vw, 56px) clamp(22px, 4vw, 48px);
}
.heating__title {
  font-size: clamp(38px, 4.6vw, 62px);
  line-height: 0.98;
  letter-spacing: -0.035em;
  margin-bottom: 20px;
}
.heating__lede {
  font-size: 17.5px; line-height: 1.65; color: var(--muted);
  margin: 0 0 26px; text-wrap: pretty;
}
.heating__lede strong { color: var(--ink); }
.heating__list { display: flex; flex-direction: column; gap: 12px; }

.mini-card { border: 1px solid var(--line); border-radius: 16px; padding: 22px 24px; }
.mini-card__title { font-family: var(--font-display); font-weight: 700; font-size: 18px; margin: 0 0 6px; }
.mini-card__text { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--muted); }

/* --------------------------------------------------------------------------
   14. Réalisations
   -------------------------------------------------------------------------- */

.gallery__title { margin: 0; max-width: 640px; }
#realisations .section-head { margin-bottom: 44px; }

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 16px;
}
.gallery__img { aspect-ratio: 4 / 5; width: 100%; object-fit: cover; border-radius: 18px; border: 1px solid var(--line); }

/* --------------------------------------------------------------------------
   15. À propos
   -------------------------------------------------------------------------- */

.about {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 24px;
  padding: clamp(28px, 4vw, 56px) clamp(22px, 4vw, 48px);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(255px, 1fr));
  gap: clamp(32px, 4vw, 64px);
}
.about__title { font-size: clamp(30px, 3.2vw, 42px); line-height: 1.05; margin-bottom: 22px; }
.about__text {
  font-size: 16.5px; line-height: 1.68; color: var(--muted);
  margin: 0 0 18px; text-wrap: pretty;
}
.about__text:last-child { margin-bottom: 0; }
.about__text strong { color: var(--ink); }

.facts { display: flex; flex-direction: column; gap: 14px; margin: 0; }
.fact {
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 20px 22px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
}
.fact--tinted { background: var(--surface-alt); }
.fact dt { font-size: 14px; color: var(--muted); }
.fact dd {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700; font-size: 15.5px; text-align: right;
}
.fact__mono { font-family: var(--font-mono) !important; font-weight: 500 !important; font-size: 14px !important; }

/* --------------------------------------------------------------------------
   16. Contact
   -------------------------------------------------------------------------- */

.contact {
  background: var(--deep);
  color: #fff;
  padding: clamp(64px, 8vw, 96px) 20px;
  scroll-margin-top: var(--header-h);
}
.contact__inner {
  max-width: var(--wrap);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: clamp(36px, 4vw, 64px);
  align-items: center;
}
.contact__title {
  font-size: clamp(34px, 4vw, 54px);
  line-height: 1;
  letter-spacing: -0.035em;
  margin-bottom: 20px;
}
.contact__lede {
  font-size: 17.5px; line-height: 1.6;
  color: rgba(255, 255, 255, 0.75);
  margin: 0 0 34px; max-width: 480px; text-wrap: pretty;
}

.contact-list {
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 20px;
  overflow: hidden;
}
.contact-row {
  background: var(--deep);
  padding: 22px 26px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  color: #fff;
  transition: background 140ms ease;
}
a.contact-row:hover { background: #164489; color: #fff; }
.contact-row__label { font-size: 13.5px; color: rgba(255, 255, 255, 0.62); }
.contact-row__value { font-family: var(--font-display); font-weight: 700; font-size: 16px; text-align: right; }

/* --------------------------------------------------------------------------
   17. Footer
   -------------------------------------------------------------------------- */

.site-footer { background: var(--sky); color: rgba(11, 34, 57, 0.7); padding: 40px 20px; }
.site-footer__inner {
  max-width: var(--wrap);
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 28px;
  flex-wrap: wrap;
  font-size: 13px;
}
.site-footer__brand { display: flex; align-items: center; gap: 11px; }
.site-footer__name {
  font-family: var(--font-display);
  font-weight: 800; font-size: 20px; letter-spacing: -0.02em; color: var(--red);
}
.site-footer__tagline {
  font-family: var(--font-mono);
  font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--red);
}
.site-footer__legal { display: flex; gap: 20px; flex-wrap: wrap; }

/* --------------------------------------------------------------------------
   18. Responsive
   -------------------------------------------------------------------------- */

/* Sous 900px on passe au schéma du design mobile : menu déroulant derrière un
   bouton, et barre d'action fixe en bas. Le bouton WhatsApp de l'en-tête est
   masqué — la barre du bas le remplace et reste visible en permanence. */
@media (max-width: 900px) {
  .root { --header-h: 68px; padding-bottom: 82px; }

  .site-header__inner { gap: 10px 16px; padding: 10px 20px; }

  .burger { display: flex; }
  .site-header__cta { display: none; }

  .site-nav {
    order: 3;
    /* flex-basis 100% pour forcer le passage à la ligne, + marges négatives
       pour que les séparateurs aillent bord à bord. `width:100%` ne marcherait
       pas ici : il figerait la largeur et annulerait le débord. */
    flex: 1 0 100%;
    margin: 10px -20px 0;
    padding: 0 20px;
    display: none;
    flex-direction: column;
    /* stretch, sinon le `align-items:center` de la règle de base centrerait
       les liens horizontalement une fois la direction passée en colonne. */
    align-items: stretch;
    gap: 0;
    /* Fond blanc (comme le design mobile) : sans lui le menu se confond avec
       le bleu de l'en-tête et de la section héros juste en dessous. */
    background: #fff;
    border-top: 1px solid rgba(11, 34, 57, 0.12);
    border-bottom: 1px solid rgba(11, 34, 57, 0.12);
  }
  .site-nav.is-open { display: flex; }
  .site-nav a {
    padding: 15px 0;
    font-size: 16px;
    color: var(--ink);
    border-bottom: 1px solid rgba(11, 34, 57, 0.09);
  }
  .site-nav a:last-child { border-bottom: none; }

  .mobile-bar {
    position: fixed;
    bottom: 0; left: 0; right: 0;
    z-index: 70;
    display: grid;
    grid-template-columns: 1fr 1.35fr;
    gap: 10px;
    background: rgba(255, 255, 255, 0.96);
    border-top: 1px solid rgba(11, 34, 57, 0.12);
    /* env() : évite que la barre passe sous la zone gestuelle des iPhone. */
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  }
  @supports (backdrop-filter: blur(12px)) or (-webkit-backdrop-filter: blur(12px)) {
    .mobile-bar { -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
  }

  /* Bandeau d'engagements : pastilles défilantes plutôt qu'une grille qui
     s'empile sur 4 lignes. */
  .strip__inner {
    display: flex;
    gap: 10px;
    padding: 18px 20px;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .strip__inner::-webkit-scrollbar { display: none; }
  .strip__item {
    flex: 0 0 auto;
    border: 1px solid rgba(255, 255, 255, 0.24);
    border-radius: 999px;
    padding: 9px 15px;
    white-space: nowrap;
  }
  .strip__sub { display: none; }
  .strip__title { font-family: var(--font-body); font-size: 12.5px; font-weight: 600; }
}

/* Réalisations : carrousel horizontal avec accroche, au lieu d'une grille qui
   empile trois grandes images l'une sous l'autre. */
@media (max-width: 700px) {
  .gallery {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    padding-bottom: 6px;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .gallery::-webkit-scrollbar { display: none; }
  .gallery > * { flex: 0 0 62%; scroll-snap-align: start; }
}

@media (max-width: 560px) {
  .brand__text { gap: 0 8px; }
  .brand__name { font-size: 26px; }
  .brand__tagline { font-size: 10px; letter-spacing: 0.12em; }

  .site-header__cta { font-size: 13.5px; padding: 10px 16px; }

  .section-head { margin-bottom: 32px; }

  .kw-grid { gap: 8px; }
  .kw { padding: 14px 12px; }
  .kw__num { font-size: 21px; }
  .kw__sub { font-size: 10.5px; }

  /* La ligne compacte est pilotée par @container plus haut, pas par la
     largeur d'écran — rien à surcharger ici. */
  .brand-row__meta { gap: 10px; }

  .site-footer__inner { align-items: flex-start; flex-direction: column; gap: 20px; }
  .site-footer__legal { gap: 6px 16px; }
}

/* --------------------------------------------------------------------------
   19. Print
   -------------------------------------------------------------------------- */

@media print {
  .site-header, .skip-link, .btn { display: none !important; }
  .root { --header-h: 0px; }
  .section { padding: 24px 0; }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}