/* ==========================================================
   Alpha Informatique — Feuille de style principale
   Palette : bleu du logo + fond clair (blanc cassé)
   ========================================================== */

/* ── Tokens ─────────────────────────────────────────────── */
:root {
  /* Bleus du logo */
  --blue:      #2F7FD4;
  --blue-lt:   #63B0EA;
  --blue-dk:   #2F5FB4;
  --blue-deep: #24457F;
  --grad:      linear-gradient(135deg, #63B0EA 0%, #2F5FB4 100%);

  /* Navy (header / footer) */
  --navy:      #0E1F38;
  --navy-2:    #15294a;

  /* Fond clair — ni blanc pur, ni gris sombre */
  --bg:        #F1F5FA;
  --bg-2:      #E7EEF7;
  --surface:   #FFFFFF;

  /* Texte */
  --txt:       #16243A;
  --txt-2:     #3B4C66;
  --muted:     #6A7C95;
  --line:      #DBE4EF;

  --shadow:    0 2px 8px rgba(20, 40, 70, .06);
  --shadow-md: 0 8px 24px rgba(20, 40, 70, .10);
  --shadow-lg: 0 18px 48px rgba(20, 40, 70, .16);

  --r:    14px;
  --r-lg: 22px;
  --nav-h: 92px;   /* relevé de 84 : le logo est passé à 74 px, il lui faut de l'air */

  --wrap: 1240px;
}

/* ── Reset ──────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
/* L'attribut [hidden] doit toujours l'emporter : sans ça, un display:inline-block
   ou :flex posé sur une classe le neutralise (pastille vide qui reste visible). */
[hidden] { display: none !important; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--txt);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.65;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}
body.nav-open { overflow: hidden; }
img { max-width: 100%; display: block; }
a { color: var(--blue-dk); text-decoration: none; }
/* text-wrap:balance → plus jamais un mot seul et orphelin sur la dernière ligne */
h1, h2, h3, h4 {
  line-height: 1.2; margin: 0 0 .6rem;
  color: var(--txt); letter-spacing: -.02em;
  text-wrap: balance;
}
/* balance ne fonctionne pas dans un paragraphe contenant un <br>.
   On équilibre donc chaque ligne séparément : le moteur enveloppe
   chaque phrase dans un .tline (voir nl() dans les js). */
.sec-head p,
.page-hero p,
.cta-box p,
.intro-lead,
.stock-txt p,
.md-note,
.pd-desc,
.tf-txt { text-wrap: pretty; }

.tline { display: block; text-wrap: balance; }

/* 🐛 GRILLES ET PETITS ÉCRANS — corrigé le 2026-08-10, à ne pas défaire.
   `repeat(auto-fit, minmax(330px, 1fr))` impose un plancher de 330 px à chaque
   colonne : sur un écran de 320 px, la colonne ne peut PAS rétrécir et pousse
   la page en défilement horizontal. La forme correcte est
   `minmax(min(330px, 100%), 1fr)` — la colonne vise 330 px, mais ne dépasse
   jamais la place disponible. Toutes les grilles du site dont le minimum
   atteint 280 px ont été passées à cette forme.
   Même famille de bug que le `min-width: 0` de la galerie du magasin. */
.tgap  { display: block; height: .85em; }   /* \n\n = saut de paragraphe */
h1 { font-size: clamp(2rem, 4.4vw, 3.1rem); font-weight: 800; }
h2 { font-size: clamp(1.6rem, 3vw, 2.3rem); font-weight: 800; }
h3 { font-size: 1.18rem; font-weight: 700; }
p  { margin: 0 0 1rem; color: var(--txt-2); }

.wrap { width: min(100% - 2.5rem, var(--wrap)); margin-inline: auto; }
section { padding: clamp(2.5rem, 4.4vw, 3.9rem) 0; }

/* Lisible par les lecteurs d'écran et par Google, invisible à l'écran.
   Sert à garder un H1 sur les pages sans hero. */
.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;
}

/* ══════════════════════════════════════════════════════════
   HEADER
   ══════════════════════════════════════════════════════════ */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: var(--navy);
  border-bottom: 1px solid rgba(255, 255, 255, .07);
  transition: box-shadow .25s, background .25s;
}
.site-header.scrolled { box-shadow: 0 6px 26px rgba(10, 22, 40, .28); }

/* HEADER EN DEUX ÉTAGES : le logo au-dessus, le menu en dessous.
   Côte à côte, le logo mangeait 200 px et les 10 entrées ne tenaient plus.
   Empilé, le menu dispose de TOUTE la largeur — d'où des libellés au complet
   et une bascule en burger bien plus tardive.
   Pour revenir à l'ancien header (logo à gauche, menu à droite) :
   remettre `flex-direction: row` et `justify-content: flex-start`. */
.header-inner {
  width: min(100% - 2.5rem, 1560px);
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .1rem;
  padding: .5rem 0 .35rem;
}

.logo { flex-shrink: 0; display: flex; align-items: center; }
/* Logo agrandi (60 -> 74 px). Le header monte en conséquence, sinon le
   logo serait rogné par la hauteur de barre. */
.logo-img { height: 74px; width: auto; object-fit: contain; }

.site-nav {
  display: flex; align-items: center; justify-content: center;
  gap: .15rem; flex-wrap: wrap;
}

.nav-link {
  position: relative;
  display: flex; align-items: center; gap: .42rem;
  padding: .52rem .58rem;
  border-radius: 10px;
  color: rgba(255, 255, 255, .74);
  font-size: .84rem; font-weight: 600;
  white-space: nowrap;
  transition: color .18s, background .18s, box-shadow .18s;
}
.nav-link:hover { color: #fff; background: rgba(255, 255, 255, .07); }

/* Actif : teinté de la couleur de la rubrique (--ic, posé par header.js),
   avec un liseré fin plutôt qu'un aplat — plus net, moins lourd. */
.nav-link.active {
  color: #fff;
  background: color-mix(in srgb, var(--ic) 15%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ic) 32%, transparent);
}

/* L'icône porte la couleur de sa rubrique. Le stroke des SVG vaut
   currentColor : il suffit de colorer le <svg> lui-même. */
.nav-icon {
  width: 17px; height: 17px; flex-shrink: 0;
  color: var(--ic, currentColor);
  opacity: .82;
  transition: opacity .18s, transform .18s;
}
.nav-link:hover .nav-icon,
.nav-link.active .nav-icon { opacity: 1; transform: translateY(-1px); }

/* Menu mobile : mêmes couleurs d'icônes */
.mnav-icon { color: var(--ic, currentColor); }
.mnav-link.active { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ic) 30%, transparent); }

/* Étiquette « NEW » — vert, discrète. Elle signale, elle ne crie pas.
   (Ni dégradé, ni ombre, ni animation : ça sautait aux yeux avant.) */
.nav-badge {
  margin-left: .35rem;
  padding: .1rem .35rem;
  border-radius: 5px;
  background: rgba(52, 199, 123, .16);
  color: #63D8A0;
  border: 1px solid rgba(52, 199, 123, .34);
  font-size: .56rem; font-weight: 800;
  letter-spacing: .09em; text-transform: uppercase;
  line-height: 1.5;
}
.mnav-link .nav-badge { margin-left: auto; font-size: .6rem; }

.header-right { display: flex; align-items: center; gap: .8rem; flex-shrink: 0; }

.header-tel {
  display: flex; align-items: center; gap: .5rem;
  padding: .62rem 1.05rem;
  border-radius: 999px;
  background: var(--grad);
  color: #fff; font-weight: 700; font-size: .9rem;
  white-space: nowrap;
  box-shadow: 0 4px 16px rgba(47, 95, 180, .4);
  transition: transform .18s, box-shadow .18s;
}
.header-tel:hover { transform: translateY(-1px); box-shadow: 0 8px 22px rgba(47, 95, 180, .5); }

/* Hamburger */
.nav-toggle {
  display: none;
  width: 44px; height: 44px;
  flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 11px; cursor: pointer;
}
.nav-toggle-bar {
  width: 20px; height: 2px; background: #fff; border-radius: 2px;
  transition: transform .25s, opacity .2s;
}
.nav-toggle.open .nav-toggle-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.open .nav-toggle-bar:nth-child(2) { opacity: 0; }
.nav-toggle.open .nav-toggle-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Drawer mobile */
.nav-overlay {
  position: fixed; inset: 0; z-index: 110;
  background: rgba(10, 20, 36, .55);
  backdrop-filter: blur(3px);
  opacity: 0; pointer-events: none; transition: opacity .28s;
}
.nav-overlay.open { opacity: 1; pointer-events: auto; }

.nav-mobile-panel {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 120;
  width: min(340px, 88vw);
  background: var(--navy);
  display: flex; flex-direction: column;
  transform: translateX(100%);
  transition: transform .32s cubic-bezier(.4, 0, .2, 1);
  overflow-y: auto;
}
.nav-mobile-panel.open { transform: none; }

.nav-mobile-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.1rem 1.2rem;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.mnav-logo { height: 52px; width: auto; object-fit: contain; }
.nav-mobile-close {
  width: 40px; height: 40px;
  background: rgba(255, 255, 255, .08);
  border: none; border-radius: 10px;
  color: #fff; font-size: 1.1rem; cursor: pointer;
}

.nav-mobile-links { display: flex; flex-direction: column; padding: .8rem; gap: .2rem; }
.mnav-link {
  display: flex; align-items: center; gap: .8rem;
  padding: .9rem 1rem;
  border-radius: 11px;
  color: rgba(255, 255, 255, .78);
  font-weight: 600; font-size: .96rem;
}
.mnav-link:hover { background: rgba(255, 255, 255, .07); color: #fff; }
.mnav-link.active { background: color-mix(in srgb, var(--ic) 16%, transparent); color: #fff; }
.mnav-icon { width: 19px; height: 19px; flex-shrink: 0; }

.mnav-tel {
  margin: .5rem .8rem 1.4rem;
  display: flex; align-items: center; justify-content: center; gap: .55rem;
  padding: .9rem;
  border-radius: 12px;
  background: var(--grad);
  color: #fff; font-weight: 700;
}

/* ══════════════════════════════════════════════════════════
   BOUTONS
   ══════════════════════════════════════════════════════════ */
.btn {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .85rem 1.6rem;
  border: none; border-radius: 999px;
  font-size: .95rem; font-weight: 700;
  cursor: pointer;
  transition: transform .18s, box-shadow .18s, background .18s;
}
.btn-primary {
  background: var(--grad); color: #fff;
  box-shadow: 0 6px 20px rgba(47, 95, 180, .34);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(47, 95, 180, .44); }

.btn-ghost {
  background: rgba(255, 255, 255, .14);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .34);
  backdrop-filter: blur(6px);
}
.btn-ghost:hover { background: rgba(255, 255, 255, .24); }

.btn-outline {
  background: var(--surface); color: var(--blue-dk);
  border: 1.5px solid var(--line);
  box-shadow: var(--shadow);
}
.btn-outline:hover { border-color: var(--blue); transform: translateY(-2px); }

.btn-arrow { transition: transform .18s; }
.btn:hover .btn-arrow { transform: translateX(3px); }

/* ── Titres de section ─────────────────────────────────── */
.sec-head { max-width: 720px; margin: 0 auto clamp(1.5rem, 2.6vw, 2.1rem); text-align: center; }
.eyebrow {
  display: inline-block;
  padding: .32rem .85rem;
  margin-bottom: .8rem;
  border-radius: 999px;
  background: rgba(47, 127, 212, .1);
  color: var(--blue-dk);
  font-size: .76rem; font-weight: 800;
  letter-spacing: .08em; text-transform: uppercase;
}
.sec-head p { font-size: 1.05rem; color: var(--muted); margin: 0; }

/* ══════════════════════════════════════════════════════════
   1. BANNIÈRE DÉFILANTE (carrousel)
   ══════════════════════════════════════════════════════════ */
.hero {
  position: relative;
  min-height: clamp(430px, 62vh, 580px);
  background: var(--navy);
  overflow: hidden;
  padding: 0;
}

.hc-slide {
  position: absolute; inset: 0;
  display: flex; align-items: center;
  opacity: 0; visibility: hidden;
  transform: scale(1.04);
  transition: opacity .8s ease, transform 1.1s ease, visibility .8s;
}
.hc-slide.active { opacity: 1; visibility: visible; transform: scale(1); }

.hc-bg { position: absolute; inset: 0; }
.hc-bg img { width: 100%; height: 100%; object-fit: cover; }
.hc-bg::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(100deg,
    rgba(14, 31, 56, .96) 0%,
    rgba(14, 31, 56, .88) 40%,
    rgba(21, 41, 74, .62) 70%,
    rgba(47, 95, 180, .42) 100%);
}
/* Slide sans photo : dégradé de marque seul */
.hc-slide.no-img .hc-bg {
  background: radial-gradient(120% 120% at 15% 20%, #24457F 0%, #0E1F38 60%);
}
.hc-slide.no-img .hc-bg::after { background: none; }

.hc-inner {
  position: relative; z-index: 2;
  width: min(100% - 2.5rem, var(--wrap));
  margin-inline: auto;
  padding: 3rem 0;
  max-width: 640px;
}
.hc-eyebrow {
  display: inline-block;
  padding: .34rem .9rem; margin-bottom: 1rem;
  border-radius: 999px;
  background: rgba(99, 176, 234, .2);
  border: 1px solid rgba(99, 176, 234, .4);
  color: #A9D3F5;
  font-size: .76rem; font-weight: 800;
  letter-spacing: .08em; text-transform: uppercase;
}
.hc-title {
  color: #fff;
  font-size: clamp(1.9rem, 4.2vw, 3rem);
  font-weight: 800; line-height: 1.12;
  margin: 0 0 .9rem;
}
.hc-text {
  color: rgba(255, 255, 255, .82);
  font-size: clamp(1rem, 1.6vw, 1.14rem);
  margin: 0 0 1.8rem;
  max-width: 520px;
}

/* Flèches + points */
.hc-arrow {
  position: absolute; top: 50%; z-index: 5;
  transform: translateY(-50%);
  width: 46px; height: 46px;
  display: grid; place-items: center;
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .26);
  border-radius: 50%;
  color: #fff; cursor: pointer;
  backdrop-filter: blur(6px);
  transition: background .2s, transform .2s;
}
.hc-arrow:hover { background: rgba(255, 255, 255, .26); }
.hc-prev { left: 1.6rem; }
.hc-next { right: 1.6rem; }
.hc-arrow svg { width: 20px; height: 20px; }

.hc-dots {
  position: absolute; bottom: 1.7rem; left: 50%;
  transform: translateX(-50%);
  z-index: 5; display: flex; gap: .55rem;
}
.hc-dot {
  width: 34px; height: 4px;
  background: rgba(255, 255, 255, .3);
  border: none; border-radius: 999px;
  cursor: pointer; padding: 0;
  transition: background .25s, width .25s;
}
.hc-dot.active { background: var(--blue-lt); width: 48px; }

/* ══════════════════════════════════════════════════════════
   2. PRÉSENTATION
   ══════════════════════════════════════════════════════════ */
/* Section sombre, avec une photo de fond très atténuée */
.intro {
  position: relative;
  background: radial-gradient(120% 130% at 12% 20%, #24457F 0%, #0E1F38 62%);
  overflow: hidden;
}
.intro-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
/* Opacité remontée de .13 à .34 le 2026-08-10 : la colonne des points forts
   partie, la bannière est plus vide — la photo doit se DEVINER (une vraie
   installation de caméras chez un client), pas seulement teinter le fond.
   Le voile ci-dessous est ce qui garde le texte blanc lisible : il est plus
   sombre au centre, là où passe le texte, et s'ouvre sur les bords. */
/* object-position : le sujet (les caméras) est dans le tiers HAUT de la photo.
   Sans ce recadrage, `cover` prend la bande centrale et n'affiche que la
   pelouse — on ne comprend plus ce qu'on regarde. */
.intro-bg img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 30%;
  opacity: .34;
  filter: grayscale(.25);
}
.intro-bg::after {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(75% 120% at 50% 50%,
    rgba(6, 14, 26, .88) 0%,
    rgba(6, 14, 26, .74) 55%,
    rgba(6, 14, 26, .52) 100%);
}
.intro > .wrap { position: relative; z-index: 2; }

.intro .eyebrow {
  background: rgba(99, 176, 234, .2);
  border: 1px solid rgba(99, 176, 234, .4);
  color: #A9D3F5;
}
.intro h1 { color: #fff; }

/* UNE SEULE COLONNE, BLOC CENTRÉ (2026-08-10).
   La colonne des 4 points forts a été retirée à la demande d'Alpha. Le texte
   restant ne peut pas occuper les 1240 px du wrap : au-delà de ~760 px une
   ligne devient pénible à lire, et le bloc paraîtrait collé à gauche avec un
   grand vide à droite. Centré et plafonné, il laisse voir la photo de fond
   des deux côtés. */
.intro-grid {
  max-width: 760px;
  margin-inline: auto;
  text-align: center;
}
.intro-grid h1 { margin-bottom: .9rem; }
.intro-lead {
  font-size: 1.06rem;
  color: rgba(255, 255, 255, .82);
  margin-bottom: 1.6rem;
}
.intro-points { display: grid; gap: 1.1rem; }

/* Points forts : chacun porte sa couleur (--cc) — liseré, icône en
   dégradé et halo lumineux au survol. */
.ip {
  position: relative;
  display: flex; gap: 1.1rem; align-items: center;
  padding: 1.15rem 1.3rem 1.15rem 1.5rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--shadow);
  overflow: hidden;
  transition: transform .25s, box-shadow .25s, border-color .25s;
}
/* Liseré coloré à gauche */
.ip::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0;
  width: 4px;
  background: var(--cc, var(--blue));
  box-shadow: 0 0 14px 1px color-mix(in srgb, var(--cc, var(--blue)) 60%, transparent);
}
/* Voile de couleur qui s'allume au survol */
.ip::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(100deg,
    color-mix(in srgb, var(--cc, var(--blue)) 10%, transparent) 0%,
    transparent 58%);
  opacity: 0; transition: opacity .3s;
  pointer-events: none;
}
.ip:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--cc, var(--blue)) 45%, transparent);
  box-shadow: 0 14px 32px color-mix(in srgb, var(--cc, var(--blue)) 26%, transparent);
}
.ip:hover::after { opacity: 1; }

.ip-ic {
  position: relative; z-index: 1;
  flex-shrink: 0;
  width: 48px; height: 48px;
  display: grid; place-items: center;
  border-radius: 14px;
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--cc, var(--blue)) 72%, #fff) 0%,
    var(--cc, var(--blue)) 100%);
  color: #fff;
  box-shadow: 0 6px 18px color-mix(in srgb, var(--cc, var(--blue)) 45%, transparent);
  transition: transform .25s, box-shadow .25s;
}
.ip:hover .ip-ic {
  transform: scale(1.06);
  box-shadow: 0 8px 24px color-mix(in srgb, var(--cc, var(--blue)) 62%, transparent);
}
.ip-ic svg { width: 22px; height: 22px; }

.ip-txt { position: relative; z-index: 1; }
.ip h3 {
  margin: 0 0 .18rem;
  font-size: 1.02rem; font-weight: 750;
  transition: color .25s;
}
.ip:hover h3 { color: color-mix(in srgb, var(--cc, var(--blue)) 78%, var(--txt)); }
.ip p  { margin: 0; font-size: .9rem; color: var(--muted); }

/* ══════════════════════════════════════════════════════════
   3. SERVICES
   ══════════════════════════════════════════════════════════ */
/* ⚠️ ALTERNANCE DES FONDS DE L'ACCUEIL — recalculée le 2026-08-10 quand Alpha
   a fixé l'ordre des sections (avis remontés avant le catalogue) :
     intro(sombre) · actus(gris) · services(BLANC) · avis(GRIS)
     · catalogue(BLANC) · magasin(gris)
   Deux sections de même fond ne doivent jamais se suivre : si l'ordre change
   dans index.html, il faut refaire ce calcul, sinon deux blocs fusionnent
   visuellement en un seul pavé. */
.services { background: var(--surface); }

/* 5 services : tiennent sur une ligne en desktop large, puis se replient */
.svc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(212px, 1fr));
  gap: 1.2rem;
}
.svc-card {
  position: relative;
  display: flex; flex-direction: column;
  padding: 1.9rem 1.6rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow);
  overflow: hidden;
  transition: transform .22s, box-shadow .22s, border-color .22s;
}
.svc-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: var(--cc, var(--blue));
  transform: scaleX(0); transform-origin: left;
  transition: transform .3s;
}
.svc-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: transparent; }
.svc-card:hover::before { transform: scaleX(1); }

.svc-ic {
  width: 54px; height: 54px;
  display: grid; place-items: center;
  margin-bottom: 1.1rem;
  border-radius: 15px;
  background: color-mix(in srgb, var(--cc, var(--blue)) 12%, transparent);
  color: var(--cc, var(--blue));
}
.svc-ic svg { width: 26px; height: 26px; }
.svc-card h3 { margin-bottom: .45rem; }
.svc-card p  { font-size: .92rem; color: var(--muted); flex: 1; margin-bottom: 1.1rem; }
.svc-more {
  display: inline-flex; align-items: center; gap: .4rem;
  color: var(--cc, var(--blue));
  font-weight: 700; font-size: .9rem;
}
.svc-more svg { width: 15px; height: 15px; transition: transform .2s; }
.svc-card:hover .svc-more svg { transform: translateX(4px); }

/* ══════════════════════════════════════════════════════════
   DÉCOUVRIR LE CATALOGUE
   ══════════════════════════════════════════════════════════ */
/* Refondu le 2026-08-10. Deux versions ont été écartées par Alpha : le grand
   encart navy avec photo du magasin (« trop long et trop gros ») puis une
   barre compacte (« la box est pas belle, plus en mode découvrir notre
   catalogue »). La section montre donc de vrais produits, avec les cartes
   .prod-card de la page magasin — d'où l'absence de styles de carte ici :
   il n'y en a QU'UN jeu, dans la partie CATALOGUE plus bas. */
.stock { background: var(--surface); }

/* Se masque tout seul quand data/site.js ne renseigne pas l'eyebrow.
   :empty n'accepte aucun nœud, pas même une espace — d'où la balise
   collée dans index.html. */
.stock .eyebrow:empty { display: none; }

.stock-foot {
  display: flex; flex-direction: column; align-items: center;
  gap: .95rem;
  margin-top: clamp(1.5rem, 3vw, 2.1rem);
}

/* Légende « En stock » / « Sur commande » / « Rupture ».
   Plus de pilules : juste la pastille de couleur et le mot. Elle explique le
   code couleur porté par les pastilles des cartes, juste au-dessus. */
.stock-legende {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: .35rem .95rem;
}
.sl-chip {
  display: inline-flex; align-items: center; gap: .42rem;
  font-size: .78rem;
  color: var(--muted);
}
.sl-chip b { color: var(--txt-2); font-weight: 700; }
.sl-dot {
  width: 8px; height: 8px; border-radius: 50%;
  flex-shrink: 0;
}
/* Halo réduit à un anneau : le halo lumineux d'avant était calculé pour le
   fond navy, sur fond clair il bavait. */
.sl-stock .sl-dot    { background: #16A34A; box-shadow: 0 0 0 3px rgba(22, 163, 74, .16); }
.sl-commande .sl-dot { background: #D4890B; box-shadow: 0 0 0 3px rgba(212, 137, 11, .16); }
.sl-rupture .sl-dot  { background: #DC2626; box-shadow: 0 0 0 3px rgba(220, 38, 38, .14); }

/* ══════════════════════════════════════════════════════════
   5. AVIS GOOGLE
   ══════════════════════════════════════════════════════════ */
/* Section GRISE depuis le 2026-08-10 (elle est remontée avant le catalogue,
   voir la note sur l'alternance plus haut) → la carte et les bulles, qui
   étaient grises sur blanc, passent en blanc pour rester détachées du fond. */
.reviews { background: var(--bg); }
.reviews-card {
  display: grid;
  grid-template-columns: auto 1px 1fr;
  gap: clamp(1.8rem, 4vw, 3.4rem);
  align-items: center;
  max-width: 900px; margin-inline: auto;
  padding: clamp(2rem, 4vw, 3rem);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow);
}
.rv-score { text-align: center; }
.rv-note {
  font-size: 3.6rem; font-weight: 800; line-height: 1;
  background: var(--grad);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.rv-note small { font-size: 1.3rem; font-weight: 700; color: var(--muted); -webkit-text-fill-color: var(--muted); }
.rv-stars { display: flex; gap: .18rem; justify-content: center; margin: .6rem 0 .35rem; }
.rv-stars svg { width: 21px; height: 21px; color: #F5B531; }
.rv-count { font-size: .84rem; color: var(--muted); margin: 0; }
.rv-sep { background: var(--line); align-self: stretch; }

.rv-body h2 { margin-bottom: .5rem; }
.rv-body p  { color: var(--muted); margin-bottom: 1.4rem; }
.rv-actions { display: flex; gap: .8rem; flex-wrap: wrap; }
.rv-google {
  display: inline-flex; align-items: center; gap: .5rem;
  font-weight: 700; font-size: .82rem; color: var(--muted);
}
.rv-google svg { width: 17px; height: 17px; }

/* ── Bulles d'avis ─────────────────────────────────────── */
.rv-bubbles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.2rem;
  max-width: 900px;
  margin: 1.4rem auto 0;
}
.rv-bubble {
  position: relative;
  display: flex; flex-direction: column;
  margin: 0;
  padding: 1.3rem 1.3rem 1.1rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  transition: transform .2s, box-shadow .2s;
}
.rv-bubble:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }

.rv-bstars { display: flex; gap: .1rem; margin-bottom: .6rem; color: #F5B531; }
.rv-bstars svg { width: 15px; height: 15px; }

.rv-bubble blockquote {
  margin: 0 0 1rem;
  font-size: .88rem;
  line-height: 1.6;
  color: var(--txt-2);
  flex: 1;
  /* Avis longs : on tronque proprement, le texte complet reste sur Google */
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.rv-bubble figcaption { display: flex; align-items: center; gap: .6rem; }
.rv-av {
  width: 34px; height: 34px; flex-shrink: 0;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--grad);
  color: #fff; font-weight: 800; font-size: .9rem;
}
.rv-who { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; }
.rv-who b     { font-size: .86rem; color: var(--txt); }
.rv-who small { font-size: .74rem; color: var(--muted); }

/* ══════════════════════════════════════════════════════════
   6. LE MAGASIN
   ══════════════════════════════════════════════════════════ */
.shop { background: var(--bg); }
/* Photo et infos alignées côte à côte, même hauteur */
.shop-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 3.5vw, 3rem);
  align-items: start;
}

/* ── Galerie : grande photo + vignettes ─────────────────── */
/* 🐛 min-width: 0 — corrigé le 2026-08-10. Un enfant de grid/flex a
   `min-width: auto` par défaut : il REFUSE de descendre sous la largeur de
   son contenu. Sur un écran de 360 px, la galerie restait à 386 px et
   poussait toute la page en défilement horizontal. Le symptôme était
   trompeur : c'est la grille des vignettes qui imposait le plancher, mais
   c'est le conteneur qui devait céder. */
.shop-media { display: flex; flex-direction: column; gap: .85rem; min-width: 0; }
.shop-info  { min-width: 0; }

.sg-main {
  position: relative;
  margin: 0;
  aspect-ratio: 4 / 3;
  border-radius: var(--r-lg);
  overflow: hidden;
  cursor: zoom-in;
  background: var(--bg-2);
  box-shadow: var(--shadow-md);
  transition: box-shadow .3s;
}
.sg-main:hover { box-shadow: var(--shadow-lg); }
.sg-main img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .6s cubic-bezier(.2, .7, .3, 1);
}
.sg-main:hover img { transform: scale(1.04); }
.sg-main::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(10, 22, 40, .72) 0%, transparent 45%);
  pointer-events: none;
}
.sg-caption {
  position: absolute; left: 1.2rem; right: 5.5rem; bottom: 1rem;
  z-index: 2;
  color: #fff;
  font-size: .88rem; line-height: 1.4;
  text-shadow: 0 1px 8px rgba(0, 0, 0, .5);
}
.sg-count {
  position: absolute; right: 1rem; bottom: 1rem; z-index: 2;
  padding: .3rem .75rem;
  border-radius: 999px;
  background: rgba(10, 22, 40, .6);
  border: 1px solid rgba(255, 255, 255, .22);
  backdrop-filter: blur(6px);
  color: #fff; font-size: .76rem; font-weight: 700;
}

/* minmax(0, 1fr) et pas 1fr : `1fr` vaut `minmax(auto, 1fr)`, et ce `auto`
   laisse les vignettes imposer leur largeur intrinsèque au lieu de se
   partager la place disponible. C'est la cause du débordement à 360 px. */
.sg-thumbs {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: .65rem;
}
.sg-thumb {
  position: relative;
  aspect-ratio: 1;
  padding: 0;
  border: none;
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  background: var(--bg-2);
  opacity: .62;
  transition: opacity .25s, transform .25s, box-shadow .25s;
}
.sg-thumb img { width: 100%; height: 100%; object-fit: cover; }
.sg-thumb:hover { opacity: 1; transform: translateY(-2px); }
.sg-thumb.active {
  opacity: 1;
  box-shadow: 0 0 0 2.5px var(--blue), 0 6px 16px rgba(47, 127, 212, .32);
}
.sg-more {
  position: absolute; inset: 0; z-index: 2;
  display: grid; place-items: center;
  background: rgba(14, 31, 56, .66);
  color: #fff; font-weight: 800; font-size: .95rem;
  backdrop-filter: blur(2px);
}

/* ── Infos pratiques ────────────────────────────────────── */
.si-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.si-row {
  display: flex; gap: 1rem;
  padding: 1.4rem 1.5rem;
}
.si-row + .si-row { border-top: 1px solid var(--line); }
.si-ic {
  flex-shrink: 0; width: 42px; height: 42px;
  display: grid; place-items: center;
  border-radius: 12px;
  background: var(--grad);
  color: #fff;
  box-shadow: 0 5px 14px rgba(47, 95, 180, .3);
}
.si-ic svg { width: 19px; height: 19px; }
.si-body { flex: 1; min-width: 0; }
.si-body h4 {
  margin: 0 0 .45rem;
  font-size: .78rem; font-weight: 800;
  letter-spacing: .07em; text-transform: uppercase;
  color: var(--muted);
}
.si-body p { margin: 0; font-size: .94rem; color: var(--txt-2); }

/* Horaires */
.hours { list-style: none; margin: 0; padding: 0; font-size: .89rem; }
.hours li {
  display: flex; justify-content: space-between; gap: 1rem;
  padding: .32rem 0;
  border-bottom: 1px dashed var(--line);
}
.hours li:last-child { border-bottom: none; }
.hours .h-day { color: var(--txt-2); font-weight: 600; }
.hours .h-val { color: var(--muted); }
/* « Journée d'intervention à domicile » est long : il tient sur UNE ligne,
   jamais coupé en deux (un peu plus petit, et on interdit le retour). */
.hours li.special .h-val {
  color: var(--blue-dk); font-weight: 700;
  white-space: nowrap; font-size: .82rem;
}
.hours li.closed  .h-val { color: #C0554F; }

/* Plan d'accès : pleine largeur sous la photo et les infos */
.shop-map {
  margin-top: clamp(1.6rem, 3vw, 2.4rem);
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-md);
}
.shop-map iframe {
  width: 100%;
  height: clamp(300px, 34vw, 420px);
  border: 0; display: block;
}

/* ── Lightbox photos ───────────────────────────────────── */
.lb-bg {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(8, 16, 30, .93);
  display: none; align-items: center; justify-content: center;
  padding: 2rem;
  backdrop-filter: blur(6px);
}
.lb-bg.open { display: flex; }
.lb-wrap { position: relative; max-width: 1000px; width: 100%; }
.lb-img {
  width: 100%; max-height: 78vh; object-fit: contain;
  border-radius: var(--r);
}
.lb-cap {
  margin-top: .9rem; text-align: center;
  color: rgba(255, 255, 255, .78); font-size: .9rem;
}
.lb-close {
  position: absolute; top: -3rem; right: 0;
  width: 42px; height: 42px;
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .24);
  border-radius: 50%;
  color: #fff; font-size: 1.1rem; cursor: pointer;
}
.lb-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 46px; height: 46px;
  display: grid; place-items: center;
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .24);
  border-radius: 50%;
  color: #fff; cursor: pointer;
}
.lb-nav svg { width: 20px; height: 20px; }
.lb-prev { left: -3.6rem; }
.lb-next { right: -3.6rem; }

/* ══════════════════════════════════════════════════════════
   ACTUALITÉS — cartes
   ══════════════════════════════════════════════════════════ */
.news-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(310px, 100%), 1fr));
  gap: 1.6rem;
}
.news-card {
  display: flex; flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow);
  transition: transform .22s, box-shadow .22s, border-color .22s;
}
.news-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: rgba(47, 127, 212, .3); }

.nc-media { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--bg-2); }
.nc-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.news-card:hover .nc-media img { transform: scale(1.06); }
.nc-noimg { width: 100%; height: 100%; background: radial-gradient(120% 120% at 20% 20%, #24457F, #0E1F38); }

.nc-badge {
  position: absolute; top: .8rem; left: .8rem;
  padding: .3rem .8rem;
  border-radius: 999px;
  background: var(--cc, var(--blue));
  color: #fff;
  font-size: .72rem; font-weight: 800;
  letter-spacing: .04em; text-transform: uppercase;
  box-shadow: 0 3px 10px rgba(0, 0, 0, .25);
}
.nc-pin {
  position: absolute; top: .8rem; right: .8rem;
  width: 28px; height: 28px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(14, 31, 56, .78);
  color: #F5B531; font-size: .8rem;
  backdrop-filter: blur(4px);
}

.nc-body { display: flex; flex-direction: column; flex: 1; padding: 1.4rem 1.4rem 1.5rem; }
.nc-meta {
  display: flex; align-items: center; gap: .45rem; flex-wrap: wrap;
  margin-bottom: .6rem;
  font-size: .78rem; color: var(--muted);
}
.nc-dot { color: var(--line); }
.news-card h3 { font-size: 1.12rem; margin-bottom: .5rem; }
.nc-body p { font-size: .9rem; color: var(--muted); flex: 1; margin-bottom: 1rem; }
.nc-more {
  display: inline-flex; align-items: center; gap: .4rem;
  color: var(--blue-dk); font-weight: 700; font-size: .88rem;
}
.nc-more svg { width: 15px; height: 15px; transition: transform .2s; }
.news-card:hover .nc-more svg { transform: translateX(4px); }

.news-empty {
  grid-column: 1 / -1;
  text-align: center; color: var(--muted);
  padding: 2.2rem 1rem;
  background: var(--surface);
  border: 1px dashed var(--line);
  border-radius: var(--r-lg);
}
.news-all { display: flex; justify-content: center; margin-top: 2.6rem; }

/* ── En-tête des pages secondaires ─────────────────────── */
.page-hero {
  background: radial-gradient(120% 130% at 10% 0%, #24457F 0%, #0E1F38 62%);
  padding: clamp(2.2rem, 4vw, 3.2rem) 0;
  text-align: center;
}
.page-hero .eyebrow {
  background: rgba(99, 176, 234, .2);
  border: 1px solid rgba(99, 176, 234, .4);
  color: #A9D3F5;
}
.page-hero h1 { color: #fff; margin-bottom: .6rem; }
.page-hero p {
  color: rgba(255, 255, 255, .74);
  max-width: 640px; margin: 0 auto;
}

/* ══════════════════════════════════════════════════════════
   ARTICLE (lecteur)
   ══════════════════════════════════════════════════════════ */
.art-hero {
  position: relative;
  padding: clamp(2.2rem, 4vw, 3.4rem) 0 clamp(1.7rem, 3vw, 2.3rem);
  background: radial-gradient(120% 130% at 10% 0%, #24457F 0%, #0E1F38 62%);
  overflow: hidden;
}
.art-hero-bg { position: absolute; inset: 0; }
.art-hero-bg img { width: 100%; height: 100%; object-fit: cover; opacity: .3; }
.art-hero-bg::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(14, 31, 56, .82), rgba(14, 31, 56, .95));
}
.art-hero-in { position: relative; z-index: 2; max-width: 820px; }

.art-crumb { font-size: .82rem; color: rgba(255, 255, 255, .5); margin-bottom: 1.1rem; }
.art-crumb a { color: rgba(255, 255, 255, .72); }
.art-crumb a:hover { color: var(--blue-lt); }
.art-crumb span { margin: 0 .35rem; }

.art-badge {
  display: inline-block;
  padding: .3rem .85rem; margin-bottom: .9rem;
  border-radius: 999px;
  background: var(--cc, var(--blue));
  color: #fff;
  font-size: .72rem; font-weight: 800;
  letter-spacing: .05em; text-transform: uppercase;
}
.art-hero h1 { color: #fff; margin-bottom: .8rem; }
.art-meta {
  display: flex; align-items: center; gap: .45rem; flex-wrap: wrap;
  font-size: .86rem; color: rgba(255, 255, 255, .6);
}

/* Corps de l'article — miroir du rendu de l'éditeur TinyMCE */
.art-content {
  max-width: 780px;
  margin: clamp(1.8rem, 3.2vw, 2.4rem) auto 0;
  font-size: 1.06rem;
  color: var(--txt-2);
}
.art-content > *:first-child { margin-top: 0; }
.art-content h2 {
  margin: 2.4rem 0 .9rem;
  font-size: 1.6rem;
  padding-left: .85rem;
  border-left: 4px solid var(--blue);
}
.art-content h3 { margin: 1.8rem 0 .6rem; font-size: 1.2rem; }
.art-content p  { margin: 0 0 1.15rem; }
.art-content a  { color: var(--blue-dk); text-decoration: underline; text-underline-offset: 2px; }
.art-content ul, .art-content ol { margin: 0 0 1.3rem; padding-left: 1.3rem; }
.art-content li { margin-bottom: .5rem; }
.art-content strong { color: var(--txt); font-weight: 700; }
.art-content img {
  width: 100%;
  border-radius: var(--r);
  margin: 1.6rem 0;
  box-shadow: var(--shadow-md);
}
.art-content blockquote {
  margin: 1.6rem 0;
  padding: 1rem 1.3rem;
  border-left: 4px solid var(--blue-lt);
  background: var(--bg);
  border-radius: 0 var(--r) var(--r) 0;
  font-style: italic;
}
.art-content hr { border: none; border-top: 1px solid var(--line); margin: 2.2rem 0; }

/* Blocs personnalisés de l'éditeur */
.art-content .ae-infobox,
.art-content .ae-warnbox {
  padding: 1.1rem 1.3rem;
  margin: 1.6rem 0;
  border-radius: var(--r);
  font-size: .96rem;
}
.art-content .ae-infobox {
  background: rgba(47, 127, 212, .08);
  border: 1px solid rgba(47, 127, 212, .28);
}
.art-content .ae-warnbox {
  background: rgba(245, 181, 49, .1);
  border: 1px solid rgba(245, 181, 49, .38);
}

.art-back {
  display: inline-flex; align-items: center; gap: .5rem;
  max-width: 780px;
  margin: 2.6rem auto 0;
  padding: .8rem 1.4rem;
  border: 1.5px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--blue-dk);
  font-weight: 700; font-size: .9rem;
}
.art-back:hover { border-color: var(--blue); }
.art-back svg { width: 16px; height: 16px; }

.art > .wrap { padding-bottom: clamp(2rem, 4vw, 3.2rem); }
.art-related { background: var(--surface); }

.art-404 { text-align: center; padding: clamp(3rem, 6vw, 4.5rem) 0; }
.art-404 h1 { margin: .6rem 0 .5rem; }
.art-404 p  { margin-bottom: 1.6rem; }

/* ══════════════════════════════════════════════════════════
   PAGES DE SERVICE (dépannage, multimédia, vidéosurveillance…)
   ══════════════════════════════════════════════════════════ */

/* ── Hero ──────────────────────────────────────────────── */
.svc-hero {
  position: relative;
  padding: clamp(2.6rem, 4.6vw, 4rem) 0;
  background: radial-gradient(120% 130% at 8% 0%, #24457F 0%, #0E1F38 62%);
  overflow: hidden;
}
.svch-bg { position: absolute; inset: 0; }
.svch-bg img { width: 100%; height: 100%; object-fit: cover; }
.svch-bg::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(100deg,
    rgba(14, 31, 56, .96) 0%,
    rgba(14, 31, 56, .9) 42%,
    rgba(21, 41, 74, .68) 72%,
    rgba(47, 95, 180, .48) 100%);
}
.svch-in { position: relative; z-index: 2; max-width: 680px; }
.svch-in .eyebrow {
  background: rgba(99, 176, 234, .2);
  border: 1px solid rgba(99, 176, 234, .4);
  color: #A9D3F5;
}
.svch-in h1 { color: #fff; margin-bottom: .9rem; }
.svch-in p {
  color: rgba(255, 255, 255, .82);
  font-size: 1.06rem;
  margin-bottom: 1.9rem;
}
.svch-btns { display: flex; gap: .8rem; flex-wrap: wrap; }

/* ── Bandeau d'atouts ──────────────────────────────────── */
.atouts { background: var(--surface); padding: clamp(1.6rem, 2.8vw, 2.2rem) 0; }
.at-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.4rem;
}
.at-item { display: flex; gap: .9rem; align-items: flex-start; }
.at-ic {
  flex-shrink: 0;
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border-radius: 12px;
  background: var(--grad);
  color: #fff;
  box-shadow: 0 6px 16px rgba(47, 95, 180, .3);
}
.at-ic svg { width: 21px; height: 21px; }
.at-item h3 { margin: 0 0 .15rem; font-size: 1rem; }
.at-item p  { margin: 0; font-size: .88rem; color: var(--muted); }

/* ── Prestations ───────────────────────────────────────── */
.presta { background: var(--bg); }
.pr-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: 1.5rem;
}
/* .pr-4 : forcé à 4 colonnes (ajouté par service.js quand le nombre
   de prestations est un multiple de 4 → aucune carte orpheline). */
.pr-4 { grid-template-columns: repeat(4, 1fr); gap: 1.2rem; }
.pr-4 .pr-card { padding: 1.6rem 1.35rem; }
@media (max-width: 1150px) { .pr-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .pr-4 { grid-template-columns: 1fr; } }
.pr-card {
  position: relative;
  padding: 1.9rem 1.7rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow);
  overflow: hidden;
  transition: transform .22s, box-shadow .22s, border-color .22s;
}
.pr-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: var(--cc, var(--blue));
  transform: scaleX(0); transform-origin: left;
  transition: transform .3s;
}
.pr-card:hover {
  transform: translateY(-5px);
  border-color: color-mix(in srgb, var(--cc, var(--blue)) 40%, transparent);
  box-shadow: 0 16px 36px color-mix(in srgb, var(--cc, var(--blue)) 22%, transparent);
}
.pr-card:hover::before { transform: scaleX(1); }

.pr-ic {
  width: 52px; height: 52px;
  display: grid; place-items: center;
  margin-bottom: 1.1rem;
  border-radius: 15px;
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--cc, var(--blue)) 72%, #fff) 0%,
    var(--cc, var(--blue)) 100%);
  color: #fff;
  box-shadow: 0 6px 18px color-mix(in srgb, var(--cc, var(--blue)) 45%, transparent);
}
.pr-ic svg { width: 25px; height: 25px; }
.pr-card h3 { margin-bottom: .5rem; }
.pr-card > p { font-size: .92rem; color: var(--muted); margin-bottom: 1.1rem; }

.pr-list { list-style: none; margin: 0; padding: 0; }
.pr-list li {
  display: flex; align-items: flex-start; gap: .55rem;
  padding: .38rem 0;
  font-size: .88rem;
  color: var(--txt-2);
  border-top: 1px dashed var(--line);
}
.pr-list li:first-child { border-top: none; }
.pr-list svg {
  width: 15px; height: 15px; flex-shrink: 0;
  margin-top: .22rem;
  color: var(--cc, var(--blue));
}

/* ── Modèles (fiches produit, sans prix) ───────────────── */
.modeles { background: var(--surface); }
.md-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(330px, 100%), 1fr));
  gap: 1.6rem;
}
/* Chaque carte = une grille à 5 rangées de hauteur imposée.
   Résultat : image, titre, résumé, variantes et specs sont alignés
   d'une carte à l'autre, quelle que soit la longueur des textes. */
.md-card {
  display: grid;
  grid-template-rows: auto auto auto auto 1fr;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow);
  transition: transform .22s, box-shadow .22s, border-color .22s;
}
.md-card:hover {
  transform: translateY(-5px);
  border-color: color-mix(in srgb, var(--cc, var(--blue)) 45%, transparent);
  box-shadow: 0 16px 36px color-mix(in srgb, var(--cc, var(--blue)) 20%, transparent);
}

/* Rangée 1 — visuel : même hauteur pour tous, produit centré.
   height + object-fit sur l'image : elle ne peut pas déborder sur le titre. */
.md-img {
  height: 200px;
  padding: 1.3rem;
  background: linear-gradient(180deg, #fff 0%, var(--bg) 100%);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}
.md-img img {
  width: 100%; height: 100%;
  object-fit: contain;
  object-position: center;
  transition: transform .4s;
}
.md-card:hover .md-img img { transform: scale(1.05); }

/* Rangée 2 — badge + nom */
.md-head {
  padding: 1.2rem 1.4rem .4rem;
  min-height: 92px;
}
.md-ic {
  flex-shrink: 0; width: 44px; height: 44px;
  display: grid; place-items: center;
  margin-bottom: .6rem;
  border-radius: 12px;
  background: var(--cc, var(--blue));
  color: #fff;
}
.md-ic svg { width: 21px; height: 21px; }
.md-badge {
  display: inline-block;
  margin-bottom: .4rem;
  padding: .24rem .7rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--cc, var(--blue)) 13%, transparent);
  color: color-mix(in srgb, var(--cc, var(--blue)) 78%, var(--txt));
  font-size: .68rem; font-weight: 800;
  letter-spacing: .04em; text-transform: uppercase;
  white-space: nowrap;
}
.md-head h3 { margin: 0; font-size: 1.18rem; }

/* Rangée 3 — résumé : tronqué à 5 lignes → même hauteur partout */
.md-resume {
  padding: 0 1.4rem;
  margin: 0 0 1rem;
  font-size: .89rem; line-height: 1.6;
  color: var(--muted);
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: calc(5 * 1.6 * .89rem);
}

/* Rangée 4 — variantes */
.md-vars {
  display: flex; flex-wrap: wrap; gap: .45rem;
  padding: 0 1.4rem 1.2rem;
  align-content: flex-start;
  min-height: 3.1rem;
}
.md-var {
  padding: .32rem .8rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--cc, var(--blue)) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--cc, var(--blue)) 30%, transparent);
  color: color-mix(in srgb, var(--cc, var(--blue)) 82%, var(--txt));
  font-size: .77rem; font-weight: 700;
  white-space: nowrap;
}

/* Rangée 5 — caractéristiques : occupe le reste, cartes de même hauteur */
.md-specs {
  list-style: none; margin: 0; padding: 0;
  border-top: 1px solid var(--line);
  background: var(--bg);
}
.md-specs li {
  display: grid;
  grid-template-columns: 42% 1fr;
  gap: .8rem;
  align-items: baseline;
  padding: .6rem 1.4rem;
  font-size: .82rem;
  border-bottom: 1px solid var(--line);
}
.md-specs li:last-child { border-bottom: none; }
.md-k {
  color: var(--muted); font-weight: 600;
  font-size: .76rem;
  letter-spacing: .02em; text-transform: uppercase;
}
.md-v { color: var(--txt-2); font-weight: 500; }

.md-note {
  max-width: 720px;
  margin: 2.2rem auto 0;
  padding: 1rem 1.3rem;
  text-align: center;
  background: var(--bg);
  border: 1px dashed var(--line);
  border-radius: var(--r);
  font-size: .88rem; color: var(--muted);
}

/* ── Étapes ────────────────────────────────────────────── */
.etapes { background: var(--surface); }
.etapes.alt { background: var(--bg); }
.etapes.alt .st-item { background: var(--surface); box-shadow: var(--shadow); }

/* .merged : étapes ET prestations dans une seule section
   (un seul fond, une seule respiration au lieu de deux blocs séparés). */
.merged .st-item { background: var(--surface); box-shadow: var(--shadow); }
.merged .sec-head-2 { margin-top: clamp(2rem, 3.4vw, 2.8rem); }
.st-grid {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.4rem;
}
.st-item {
  position: relative;
  padding: 1.6rem 1.4rem 1.5rem;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
}
/* Trait de liaison entre les étapes (desktop) */
.st-item::after {
  content: ''; position: absolute;
  top: 2.55rem; right: -1.4rem;
  width: 1.4rem; height: 2px;
  background: repeating-linear-gradient(90deg, var(--line) 0 5px, transparent 5px 9px);
}
.st-item:last-child::after { display: none; }

.st-num {
  display: grid; place-items: center;
  width: 38px; height: 38px;
  margin-bottom: .9rem;
  border-radius: 50%;
  background: var(--grad);
  color: #fff;
  font-weight: 800; font-size: .95rem;
  box-shadow: 0 5px 14px rgba(47, 95, 180, .35);
}
.st-item h3 { font-size: 1.02rem; margin-bottom: .35rem; }
.st-item p  { margin: 0; font-size: .88rem; color: var(--muted); }

/* ── Réalisations ──────────────────────────────────────── */
.real { background: var(--bg); }

/* .alt : inverse le fond d'une section, quand l'ordre des sections
   change d'une page à l'autre et casserait l'alternance blanc/gris. */
.real.alt    { background: var(--surface); }
.svc-cta.alt { background: var(--bg); }
.rl-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr));
  gap: 1.2rem;
}
.rl-item {
  position: relative;
  margin: 0;
  aspect-ratio: 4 / 3;
  border-radius: var(--r);
  overflow: hidden;
  cursor: zoom-in;
  background: var(--bg-2);
  box-shadow: var(--shadow);
  transition: transform .25s, box-shadow .25s;
}
.rl-item:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.rl-item img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .55s cubic-bezier(.2, .7, .3, 1);
}
.rl-item:hover img { transform: scale(1.07); }
.rl-item::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(10, 22, 40, .82) 0%, transparent 52%);
  pointer-events: none;
}
.rl-item figcaption {
  position: absolute; left: 1rem; right: 1rem; bottom: .9rem;
  z-index: 2;
  color: #fff;
  font-size: .84rem; line-height: 1.4;
  text-shadow: 0 1px 8px rgba(0, 0, 0, .5);
}
.rl-zoom {
  position: absolute; top: .8rem; right: .8rem; z-index: 2;
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(10, 22, 40, .55);
  border: 1px solid rgba(255, 255, 255, .24);
  backdrop-filter: blur(6px);
  color: #fff;
  opacity: 0; transform: scale(.85);
  transition: opacity .25s, transform .25s;
}
.rl-item:hover .rl-zoom { opacity: 1; transform: scale(1); }
.rl-zoom svg { width: 17px; height: 17px; }

/* ── CTA final ─────────────────────────────────────────── */
.svc-cta { background: var(--surface); }
.cta-box {
  position: relative;
  text-align: center;
  padding: clamp(2rem, 3.6vw, 3rem) clamp(1.5rem, 4vw, 3rem);
  border-radius: var(--r-lg);
  background: radial-gradient(130% 130% at 50% 0%, #24457F 0%, #0E1F38 65%);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.cta-box::after {
  content: ''; position: absolute;
  top: -50%; left: 50%; transform: translateX(-50%);
  width: 620px; height: 620px;
  background: radial-gradient(circle, rgba(99, 176, 234, .26) 0%, transparent 66%);
  pointer-events: none;
  z-index: 1;
}

/* Photo de fond : très discrète, assombrie, jamais gênante pour le texte */
.cta-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.cta-bg img {
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: .16;
  filter: grayscale(.35);
}
.cta-bg::after {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(120% 120% at 50% 45%,
    rgba(6, 14, 26, .55) 0%,
    rgba(6, 14, 26, .82) 100%);
}

.cta-box > h2,
.cta-box > p,
.cta-box > a,
.cta-box > .cta-btns { position: relative; z-index: 2; }

.cta-btns {
  display: flex; justify-content: center;
  gap: .8rem; flex-wrap: wrap;
}
.cta-box h2 { color: #fff; margin-bottom: .7rem; }
.cta-box p {
  color: rgba(255, 255, 255, .78);
  max-width: 560px; margin: 0 auto 1.8rem;
}

/* ══════════════════════════════════════════════════════════
   TARIFS
   ══════════════════════════════════════════════════════════ */
.tarifs { background: var(--bg); }
.tf-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(290px, 100%), 1fr));
  gap: 1.6rem;
}
.tf-card {
  position: relative;
  display: flex; flex-direction: column;
  padding: 2rem 1.8rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow);
  overflow: hidden;
  transition: transform .22s, box-shadow .22s, border-color .22s;
}
.tf-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: var(--cc, var(--blue));
}
.tf-card:hover {
  transform: translateY(-5px);
  border-color: color-mix(in srgb, var(--cc, var(--blue)) 45%, transparent);
  box-shadow: 0 16px 36px color-mix(in srgb, var(--cc, var(--blue)) 20%, transparent);
}

.tf-ic {
  width: 52px; height: 52px;
  display: grid; place-items: center;
  margin-bottom: 1.1rem;
  border-radius: 15px;
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--cc, var(--blue)) 72%, #fff) 0%,
    var(--cc, var(--blue)) 100%);
  color: #fff;
  box-shadow: 0 6px 18px color-mix(in srgb, var(--cc, var(--blue)) 45%, transparent);
}
.tf-ic svg { width: 25px; height: 25px; }
.tf-card h3 { font-size: 1.15rem; margin-bottom: .7rem; }

.tf-prix {
  display: flex; align-items: baseline; gap: .5rem;
  margin-bottom: .9rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--line);
}
.tf-montant {
  font-size: 2.5rem; font-weight: 800; line-height: 1;
  color: var(--cc, var(--blue));
}
.tf-unite { font-size: .9rem; font-weight: 600; color: var(--muted); }

.tf-txt { font-size: .93rem; color: var(--txt-2); margin-bottom: 1rem; }

.tf-list { list-style: none; margin: 0 0 auto; padding: 0; }
.tf-list li {
  display: flex; align-items: flex-start; gap: .55rem;
  padding: .4rem 0;
  font-size: .88rem; color: var(--txt-2);
  border-top: 1px dashed var(--line);
}
.tf-list li:first-child { border-top: none; }
.tf-list svg {
  width: 15px; height: 15px; flex-shrink: 0;
  margin-top: .22rem;
  color: var(--cc, var(--blue));
}

/* L'info importante : le diagnostic déduit */
.tf-highlight {
  margin: 1.2rem 0 0;
  padding: .85rem 1rem;
  border-radius: var(--r);
  background: color-mix(in srgb, var(--cc, var(--blue)) 9%, transparent);
  border: 1px solid color-mix(in srgb, var(--cc, var(--blue)) 28%, transparent);
  font-size: .86rem; font-weight: 600;
  color: color-mix(in srgb, var(--cc, var(--blue)) 78%, var(--txt));
}

.tf-notes {
  max-width: 780px;
  margin: clamp(1.8rem, 3vw, 2.4rem) auto 0;
  padding: 1.5rem 1.8rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow);
}
.tf-notes h4 {
  font-size: .78rem; font-weight: 800;
  letter-spacing: .07em; text-transform: uppercase;
  color: var(--muted);
  margin-bottom: .9rem;
}
.tf-notes ul { list-style: none; margin: 0; padding: 0; }
.tf-notes li {
  position: relative;
  padding: .4rem 0 .4rem 1.2rem;
  font-size: .9rem; color: var(--txt-2);
}
.tf-notes li::before {
  content: '';
  position: absolute; left: 0; top: .95rem;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--blue);
}

/* ══════════════════════════════════════════════════════════
   CATALOGUE DU MAGASIN
   ══════════════════════════════════════════════════════════ */
.page-hero strong { color: #fff; }
.ph-legend {
  display: flex; justify-content: center; flex-wrap: wrap;
  gap: .7rem; margin-top: 1.6rem;
}

.catalogue { background: var(--bg); }

/* ── Barre d'outils ────────────────────────────────────── */
.cat-tools {
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
  margin-bottom: 1.4rem;
}
.cat-search {
  position: relative;
  flex: 1; min-width: 240px;
}
.cat-search svg {
  position: absolute; left: 1rem; top: 50%; transform: translateY(-50%);
  width: 18px; height: 18px; color: var(--muted);
  pointer-events: none;
}
.cat-search input {
  width: 100%;
  padding: .85rem 1rem .85rem 2.9rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--txt);
  font-size: .95rem;
  font-family: inherit;
  box-shadow: var(--shadow);
  transition: border-color .2s, box-shadow .2s;
}
.cat-search input:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 4px rgba(47, 127, 212, .14);
}

.cat-toggle {
  display: flex; align-items: center; gap: .55rem;
  padding: .72rem 1.1rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  box-shadow: var(--shadow);
  font-size: .88rem; font-weight: 600; color: var(--txt-2);
  cursor: pointer;
  white-space: nowrap;
  transition: border-color .2s;
}
.cat-toggle input { position: absolute; opacity: 0; pointer-events: none; }
.ct-box {
  width: 18px; height: 18px; flex-shrink: 0;
  border: 2px solid var(--line);
  border-radius: 5px;
  transition: background .18s, border-color .18s;
  position: relative;
}
.ct-box::after {
  content: ''; position: absolute;
  left: 4px; top: .5px;
  width: 5px; height: 9px;
  border: solid #fff; border-width: 0 2px 2px 0;
  transform: rotate(45deg) scale(0);
  transition: transform .18s;
}
.cat-toggle input:checked + .ct-box {
  background: var(--blue); border-color: var(--blue);
}
.cat-toggle input:checked + .ct-box::after { transform: rotate(45deg) scale(1); }
.cat-toggle:hover { border-color: var(--blue); }

.cat-count {
  font-size: .86rem; font-weight: 700; color: var(--muted);
  white-space: nowrap;
}

/* ── Chips de catégories ───────────────────────────────── */
.chips {
  display: flex; flex-wrap: wrap; gap: .55rem;
  margin-bottom: 2.2rem;
}
.chip {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .55rem 1rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--txt-2);
  font-size: .87rem; font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  box-shadow: var(--shadow);
  transition: border-color .18s, color .18s, transform .18s, background .18s;
}
.chip:hover { transform: translateY(-2px); border-color: var(--cc, var(--blue)); }
.chip.active {
  background: color-mix(in srgb, var(--cc, var(--blue)) 10%, var(--surface));
  border-color: var(--cc, var(--blue));
  color: color-mix(in srgb, var(--cc, var(--blue)) 80%, var(--txt));
}
.chip-dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--cc, var(--blue));
  flex-shrink: 0;
}
.chip-n {
  padding: .05rem .4rem;
  border-radius: 999px;
  background: var(--bg-2);
  font-size: .72rem; font-weight: 800;
  color: var(--muted);
}
.chip.active .chip-n {
  background: var(--cc, var(--blue));
  color: #fff;
}

/* ── Regroupement par catégorie ────────────────────────── */
.prod-groups { display: flex; flex-direction: column; gap: clamp(2.6rem, 5vw, 4rem); }

.cg-head {
  display: flex; align-items: center; gap: .8rem;
  margin-bottom: 1.4rem;
}
.cg-ic {
  width: 40px; height: 40px; flex-shrink: 0;
  display: grid; place-items: center;
  border-radius: 11px;
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--cc) 72%, #fff) 0%, var(--cc) 100%);
  color: #fff;
  box-shadow: 0 5px 14px color-mix(in srgb, var(--cc) 42%, transparent);
}
.cg-ic svg { width: 20px; height: 20px; }
.cg-head h2 { margin: 0; font-size: 1.35rem; }
.cg-n {
  padding: .16rem .55rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--cc) 13%, transparent);
  color: color-mix(in srgb, var(--cc) 80%, var(--txt));
  font-size: .76rem; font-weight: 800;
}
.cg-line {
  flex: 1; height: 1px;
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--cc) 35%, transparent), transparent);
}

/* ── Grille produits ───────────────────────────────────── */
.prod-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 1.4rem;
}
.cat-empty {
  grid-column: 1 / -1;
  text-align: center; color: var(--muted);
  padding: 4rem 1rem;
  background: var(--surface);
  border: 1px dashed var(--line);
  border-radius: var(--r-lg);
}
.cat-empty small { display: block; margin-top: .6rem; font-size: .85rem; }

.prod-card {
  display: grid;
  grid-template-rows: auto 1fr;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow);
  transition: transform .22s, box-shadow .22s, border-color .22s;
}
.prod-card:hover {
  transform: translateY(-5px);
  border-color: color-mix(in srgb, var(--cc, var(--blue)) 45%, transparent);
  box-shadow: 0 16px 36px color-mix(in srgb, var(--cc, var(--blue)) 20%, transparent);
}

/* Visuel */
.pc-media {
  position: relative;
  height: 190px;
  padding: 1.2rem;
  background: linear-gradient(180deg, #fff 0%, var(--bg) 100%);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}
.pc-media img {
  width: 100%; height: 100%;
  object-fit: contain;
  transition: transform .4s;
}
.prod-card:hover .pc-media img { transform: scale(1.06); }
.pc-noimg {
  width: 100%; height: 100%;
  display: grid; place-items: center;
  color: color-mix(in srgb, var(--cc, var(--blue)) 30%, transparent);
}
.pc-noimg svg { width: 54px; height: 54px; }

/* Badges promo / nouveau */
.pc-flags {
  position: absolute; top: .7rem; left: .7rem; z-index: 2;
  display: flex; flex-direction: column; gap: .35rem; align-items: flex-start;
}
.pc-promo {
  padding: .28rem .6rem;
  border-radius: 7px;
  background: linear-gradient(135deg, #F5B531, #E8557F);
  color: #fff;
  font-size: .76rem; font-weight: 800;
  box-shadow: 0 3px 10px rgba(232, 85, 127, .4);
}
.pc-new-flag {
  padding: .24rem .55rem;
  border-radius: 7px;
  background: var(--navy);
  color: #fff;
  font-size: .66rem; font-weight: 800;
  letter-spacing: .05em; text-transform: uppercase;
}

/* Pastille de disponibilité (sur la carte, en bas à droite du visuel).
   Fond coloré par état : la dispo doit se lire d'un coup d'œil. */
.pv-pill {
  position: absolute; right: .7rem; bottom: .7rem; z-index: 2;
  display: inline-flex; align-items: center; gap: .42rem;
  padding: .36rem .75rem;
  border-radius: 999px;
  border: 1px solid;
  backdrop-filter: blur(6px);
  font-size: .78rem; font-weight: 800;
  box-shadow: 0 3px 10px rgba(20, 40, 70, .12);
}
.pv-pill.pv-stock    { background: #E4F7EF; border-color: #8DDCBC; color: #10795A; }
.pv-pill.pv-commande { background: #FDF2DE; border-color: #F0D294; color: #8C6510; }
.pv-pill.pv-rupture  { background: #FBEBE9; border-color: #E9B4B0; color: #A5433C; }

/* Point coloré — vaut pour la carte comme pour la fiche */
.pv-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.pv-stock    .pv-dot { background: #17A673; box-shadow: 0 0 8px 1px rgba(23, 166, 115, .55); }
.pv-commande .pv-dot { background: #E0A020; box-shadow: 0 0 8px 1px rgba(224, 160, 32, .5); }
.pv-rupture  .pv-dot { background: #C0554F; box-shadow: none; }

/* Badge d'état : Neuf · Occasion · Reconditionné — toujours affiché */
.pc-etat {
  padding: .16rem .55rem;
  border-radius: 6px;
  font-size: .72rem; font-weight: 800;
  letter-spacing: .02em;
}
.etat-neuf          { background: rgba(47, 127, 212, .13); color: #23639F; }
.etat-occasion      { background: rgba(52, 211, 153, .16); color: #1F8A66; }
.etat-reconditionne { background: rgba(34, 184, 166, .16); color: #167F73; }

/* Corps de la carte */
.pc-body {
  display: flex; flex-direction: column;
  padding: 1.1rem 1.2rem 1.2rem;
}
.pc-cat {
  font-size: .7rem; font-weight: 800;
  letter-spacing: .05em; text-transform: uppercase;
  color: var(--cc, var(--blue));
  margin-bottom: .4rem;
}
.prod-card h3 {
  font-size: 1rem; line-height: 1.35;
  margin-bottom: .4rem;
  min-height: 2.7em;
}
.pc-meta {
  display: flex; gap: .5rem; flex-wrap: wrap;
  font-size: .78rem; color: var(--muted);
  margin-bottom: .6rem;
}
.pc-etat {
  padding: .1rem .45rem;
  border-radius: 5px;
  background: rgba(52, 211, 153, .14);
  color: #1F8A66;
  font-weight: 700;
}
.pc-cols { display: flex; gap: .3rem; margin-bottom: .7rem; }
.pc-col {
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--col);
  border: 1px solid var(--line);
}
.pc-foot {
  display: flex; align-items: baseline; gap: .5rem;
  margin-top: auto;
  padding-top: .6rem;
  border-top: 1px solid var(--line);
}
.pc-price, .pc-new {
  font-size: 1.22rem; font-weight: 800; color: var(--txt);
}
.pc-new { color: #D6416F; }

/* « Bientôt » à la place du prix, tant que le catalogue est en mode
   « avant l'ouverture » (interrupteur dans js/catalogue.js).
   Volontairement plus discret et plus petit qu'un vrai prix : ce n'est pas
   un montant, c'est une attente — il ne doit pas se lire comme une somme. */
.pc-soon {
  font-size: 1rem; font-weight: 750;
  color: var(--blue-dk);
  letter-spacing: .01em;
}
.pc-old {
  font-size: .9rem; color: var(--muted);
  text-decoration: line-through;
}

/* ══════════════════════════════════════════════════════════
   FICHE PRODUIT
   ══════════════════════════════════════════════════════════ */
.produit { background: var(--surface); }
.pd-crumb { margin-bottom: 1.8rem; color: var(--muted); }
.pd-crumb a { color: var(--txt-2); }
.pd-crumb a:hover { color: var(--blue); }

.pd-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: start;
}

/* Galerie */
.pd-media { display: flex; flex-direction: column; gap: .8rem; }
.pd-main {
  position: relative;
  margin: 0;
  aspect-ratio: 4 / 3;
  padding: 2rem;
  border-radius: var(--r-lg);
  background: linear-gradient(180deg, #fff 0%, var(--bg) 100%);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  cursor: zoom-in;
  overflow: hidden;
}
.pd-main img { width: 100%; height: 100%; object-fit: contain; transition: transform .4s; }
.pd-main:hover img { transform: scale(1.05); }
.pd-noimg {
  display: grid; place-items: center; gap: .8rem;
  cursor: default;
  color: var(--muted);
}
.pd-noimg svg { width: 64px; height: 64px; color: color-mix(in srgb, var(--cc, var(--blue)) 35%, transparent); }
.pd-noimg span { font-size: .85rem; }

.pd-flag {
  position: absolute; top: 1rem; left: 1rem; z-index: 2;
  padding: .35rem .75rem;
  border-radius: 8px;
  font-size: .84rem; font-weight: 800;
  color: #fff;
}
.pd-promo { background: linear-gradient(135deg, #F5B531, #E8557F); box-shadow: 0 4px 12px rgba(232, 85, 127, .4); }
.pd-nouveau { top: 3.6rem; background: var(--navy); font-size: .7rem; letter-spacing: .05em; text-transform: uppercase; }

.pd-thumbs { display: grid; grid-template-columns: repeat(5, 1fr); gap: .6rem; }
.pd-thumb {
  aspect-ratio: 1;
  padding: .4rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  cursor: pointer;
  opacity: .6;
  transition: opacity .2s, box-shadow .2s, transform .2s;
}
.pd-thumb img { width: 100%; height: 100%; object-fit: contain; }
.pd-thumb:hover { opacity: 1; transform: translateY(-2px); }
.pd-thumb.active {
  opacity: 1;
  box-shadow: 0 0 0 2px var(--cc, var(--blue));
}

/* Informations */
.pd-cat {
  display: inline-block;
  margin-bottom: .6rem;
  padding: .26rem .7rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--cc, var(--blue)) 12%, transparent);
  color: color-mix(in srgb, var(--cc, var(--blue)) 80%, var(--txt));
  font-size: .72rem; font-weight: 800;
  letter-spacing: .04em; text-transform: uppercase;
}
.pd-info h1 { font-size: clamp(1.6rem, 3vw, 2.2rem); margin-bottom: .5rem; }
.pd-meta {
  display: flex; gap: .6rem; flex-wrap: wrap; align-items: center;
  font-size: .85rem; color: var(--muted);
  margin-bottom: 1.4rem;
}

.pd-prices { display: flex; align-items: baseline; gap: .7rem; flex-wrap: wrap; }
.pd-new { font-size: 2.2rem; font-weight: 800; color: var(--txt); line-height: 1; }
.pd-prices .pd-new { color: var(--txt); }
/* Même principe que .pc-soon sur les cartes : « Bientôt » n'est pas un prix,
   il ne prend donc pas la taille d'un prix. */
.pd-prices .pd-soon { font-size: 1.4rem; color: var(--blue-dk); }
.pd-old {
  font-size: 1.15rem; color: var(--muted);
  text-decoration: line-through;
}
.pd-remise {
  padding: .25rem .6rem;
  border-radius: 7px;
  background: linear-gradient(135deg, #F5B531, #E8557F);
  color: #fff;
  font-size: .82rem; font-weight: 800;
}
.pd-eco {
  margin: .5rem 0 0;
  font-size: .85rem; font-weight: 700; color: #D6416F;
}

/* Bloc de disponibilité de la fiche : coloré, impossible à rater */
.pd-dispo {
  display: flex; align-items: flex-start; gap: .8rem;
  margin: 1.6rem 0;
  padding: 1.05rem 1.2rem;
  border: 1.5px solid;
  border-radius: var(--r);
}
.pd-dispo.pv-stock    { background: #E4F7EF; border-color: #8DDCBC; }
.pd-dispo.pv-commande { background: #FDF2DE; border-color: #F0D294; }
.pd-dispo.pv-rupture  { background: #FBEBE9; border-color: #E9B4B0; }

.pd-dispo .pv-dot { width: 11px; height: 11px; margin-top: .35rem; }
.pd-dispo b { display: block; font-size: 1.02rem; font-weight: 800; }
.pd-dispo span { font-size: .87rem; }
.pd-dispo.pv-stock    b { color: #10795A; } .pd-dispo.pv-stock    span { color: #2E8A6E; }
.pd-dispo.pv-commande b { color: #8C6510; } .pd-dispo.pv-commande span { color: #9C7627; }
.pd-dispo.pv-rupture  b { color: #A5433C; } .pd-dispo.pv-rupture  span { color: #A85C56; }

.pd-block { margin-bottom: 1.4rem; }
.pd-block h4 {
  font-size: .76rem; font-weight: 800;
  letter-spacing: .07em; text-transform: uppercase;
  color: var(--muted);
  margin-bottom: .6rem;
}
.pd-cols { display: flex; gap: .6rem; flex-wrap: wrap; }
.pd-col {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .35rem .8rem .35rem .45rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  font-size: .84rem; font-weight: 600; color: var(--txt-2);
}
.pd-col i {
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--col);
  border: 1px solid var(--line);
}

.pd-desc {
  font-size: .96rem;
  color: var(--txt-2);
  margin-bottom: 1.8rem;
}

.pd-actions { display: flex; gap: .8rem; flex-wrap: wrap; }
.pd-note {
  margin-top: 1.2rem;
  font-size: .83rem; color: var(--muted);
}

/* Caractéristiques */
.pd-specs-wrap {
  max-width: 720px;
  margin: clamp(2rem, 3.6vw, 3rem) 0 0;
}
.pd-specs-wrap h3 { margin-bottom: 1rem; }
.pd-specs {
  list-style: none; margin: 0; padding: 0;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.pd-specs li {
  display: grid;
  grid-template-columns: 38% 1fr;
  gap: 1rem;
  align-items: baseline;
  padding: .85rem 1.3rem;
  font-size: .9rem;
  border-bottom: 1px solid var(--line);
}
.pd-specs li:last-child { border-bottom: none; }

.rel-wrap { background: var(--bg); }

@media (max-width: 900px) {
  .pd-grid { grid-template-columns: 1fr; }
  .pd-thumbs { grid-template-columns: repeat(5, 1fr); }
}

/* ══════════════════════════════════════════════════════════
   FOOTER
   ══════════════════════════════════════════════════════════ */
.site-footer { background: var(--navy); color: rgba(255, 255, 255, .72); }
.foot-inner {
  width: min(100% - 2.5rem, var(--wrap));
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1.5fr 1fr 1.2fr 1.2fr;
  gap: 2.5rem;
  padding: clamp(2.2rem, 3.6vw, 3rem) 0 1.8rem;
}
.foot-logo { height: 68px; width: auto; margin-bottom: 1rem; }
.foot-slogan { color: rgba(255, 255, 255, .58); font-size: .9rem; max-width: 260px; }
.foot-social {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .5rem 1rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .12);
  color: rgba(255, 255, 255, .8);
  font-size: .85rem; font-weight: 600;
}
.foot-social:hover { background: rgba(255, 255, 255, .15); color: #fff; }

.foot-col h4 {
  color: #fff; font-size: .82rem; font-weight: 800;
  letter-spacing: .09em; text-transform: uppercase;
  margin-bottom: 1.1rem;
}
.foot-col a, .foot-col p {
  display: block; margin: 0 0 .7rem;
  color: rgba(255, 255, 255, .66);
  font-size: .9rem;
}
.foot-col a:hover { color: var(--blue-lt); }
.foot-line { display: flex !important; align-items: flex-start; gap: .6rem; }
.foot-ic { width: 17px; height: 17px; flex-shrink: 0; margin-top: .18rem; color: var(--blue-lt); }

.foot-bottom {
  width: min(100% - 2.5rem, var(--wrap));
  margin-inline: auto;
  display: flex; justify-content: space-between; align-items: center;
  gap: 1rem; flex-wrap: wrap;
  padding: 1.4rem 0;
  border-top: 1px solid rgba(255, 255, 255, .08);
  font-size: .82rem; color: rgba(255, 255, 255, .48);
}
/* « Site réalisé par… » : dans la continuité de la ligne, après le tiret */
.foot-by { color: rgba(255, 255, 255, .34); }
.foot-legal { display: flex; gap: 1.3rem; flex-wrap: wrap; }
.foot-legal a { color: rgba(255, 255, 255, .48); }
.foot-legal a:hover { color: var(--blue-lt); }

/* ══════════════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════════════ */
/* Sous 1280 px, le menu (10 entrées) ne tient plus : on passe au burger.
   Et le header REDEVIENT une seule ligne — logo à gauche, burger à droite.
   Sans ça, le header restant en colonne, le burger se retrouverait centré
   sous le logo, ce qui n'a aucun sens sur mobile. */
@media (max-width: 1280px) {
  .site-nav { display: none; }
  .nav-toggle { display: flex; }
  .header-inner {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    min-height: var(--nav-h);
    padding: 0;
  }
  .site-nav, .header-right { margin-left: 0; }
}

@media (max-width: 920px) {
  :root { --nav-h: 70px; }
  .logo-img { height: 48px; }

  .intro-grid,
  .stock-box,
  .shop-grid { grid-template-columns: 1fr; }

  .reviews-card { grid-template-columns: 1fr; text-align: center; gap: 1.6rem; }
  .rv-sep { display: none; }
  .rv-actions { justify-content: center; }

  .stock-img img { min-height: 200px; }

  .foot-inner { grid-template-columns: 1fr 1fr; gap: 2rem; }
}

@media (max-width: 700px) {
  .header-tel span { display: none; }
  .header-tel { padding: .62rem; border-radius: 50%; }

  .hc-arrow { display: none; }
  .hc-inner { padding: 2.4rem 0; }
  .hero { min-height: 480px; }

  .shop-gallery { grid-auto-rows: 110px; }

  .lb-prev { left: .4rem; }
  .lb-next { right: .4rem; }
  .lb-close { top: -3.2rem; }

  .foot-inner { grid-template-columns: 1fr; }
  .foot-bottom { justify-content: center; text-align: center; }
}

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

/* ══════════════════════════════════════════════════════════
   BARRE OUVERT / FERMÉ
   Entre le header (navy, sticky) et la présentation (sombre).
   Elle prolonge le header : même famille de bleus, plus claire.
   ══════════════════════════════════════════════════════════ */
.openbar {
  background: var(--navy-2);
  border-bottom: 1px solid rgba(255, 255, 255, .07);
  color: #D7E4F2;
  font-size: .93rem;
}
.openbar-in {
  display: flex; align-items: center; gap: .55rem 1.1rem;
  flex-wrap: wrap;
  padding-block: .62rem;
}
.ob-state { display: inline-flex; align-items: center; gap: .55rem; }
.ob-state strong { color: #FFF; font-weight: 700; }

.ob-dot {
  width: .58rem; height: .58rem; border-radius: 50%;
  flex-shrink: 0;
  background: currentColor;
}
.ob-vert  { color: #21C08A; box-shadow: 0 0 0 0 rgba(33, 192, 138, .55); animation: obPulse 2.4s ease-out infinite; }
.ob-ambre { color: #E8A93B; }
.ob-bleu  { color: var(--blue-lt); }
.ob-rouge { color: #E4667A; }

@keyframes obPulse {
  0%   { box-shadow: 0 0 0 0 rgba(33, 192, 138, .5); }
  70%  { box-shadow: 0 0 0 .42rem rgba(33, 192, 138, 0); }
  100% { box-shadow: 0 0 0 0 rgba(33, 192, 138, 0); }
}

.ob-detail { color: #9FB6CE; }

.ob-tel {
  margin-left: auto;
  display: inline-flex; align-items: center; gap: .42rem;
  color: #D7E4F2; text-decoration: none;
  font-weight: 600;
  padding: .3rem .75rem;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 999px;
  transition: background .18s, border-color .18s, color .18s;
}
.ob-tel svg { width: .95rem; height: .95rem; }
.ob-tel:hover { background: rgba(99, 176, 234, .14); border-color: var(--blue-lt); color: #FFF; }

@media (max-width: 640px) {
  .openbar { font-size: .86rem; }
  .ob-tel { margin-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .ob-vert { animation: none; }
}

/* Le header n'a plus de bouton téléphone (il ferait doublon avec la barre
   « ouvert / fermé »). Au-delà du menu mobile, .header-right ne contient plus
   que le burger, masqué : on le sort du flux pour que le menu reste collé à
   droite au lieu d'être décalé par un conteneur vide. */
@media (min-width: 1281px) {
  .header-right { display: none; }
}


/* ══════════════════════════════════════════════════════════
   PAGE CONTACT
   ══════════════════════════════════════════════════════════ */

/* ── Les 3 canaux ──────────────────────────────────────── */
.ct-canaux { background: var(--surface); }

.ct-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1rem, 1.8vw, 1.5rem);
}

.ct-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(1.5rem, 2.4vw, 2rem);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow);
  overflow: hidden;
  transition: transform .2s, box-shadow .2s, border-color .2s;
}
/* Le filet coloré du haut reprend --cc, posé par le JS */
.ct-card::before {
  content: '';
  position: absolute; inset: 0 0 auto 0; height: 4px;
  background: var(--cc);
}
.ct-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: color-mix(in srgb, var(--cc) 40%, var(--line));
}

.ct-ic {
  display: grid; place-items: center;
  width: 52px; height: 52px;
  margin-bottom: 1.1rem;
  border-radius: 14px;
  color: var(--cc);
  background: color-mix(in srgb, var(--cc) 12%, transparent);
}
.ct-ic svg { width: 26px; height: 26px; }

.ct-card h2 {
  font-size: 1.16rem;
  margin: 0 0 .5rem;
}

/* La coordonnée elle-même : c'est l'info qu'on vient chercher */
.ct-val {
  font-size: 1.22rem;
  font-weight: 700;
  line-height: 1.35;
  color: var(--txt);
  margin: 0 0 .7rem;
  overflow-wrap: anywhere;   /* l'e-mail ne doit pas déborder de la carte */
}

.ct-txt {
  font-size: .93rem;
  color: var(--txt-2);
  margin: 0 0 1.4rem;
}

/* Le bouton se colle en bas : les 3 cartes s'alignent quel que soit le texte */
.ct-btn { margin-top: auto; align-self: flex-start; }


/* ── Horaires + bon à savoir ───────────────────────────── */
.ct-prat { background: var(--bg); }

.ct-prat-grid {
  display: grid;
  /* 380px : assez large pour que la ligne du jeudi tienne d'un seul tenant */
  grid-template-columns: 380px 1fr;
  gap: clamp(1.4rem, 2.6vw, 2.4rem);
  align-items: start;
}

.ct-hours {
  padding: clamp(1.4rem, 2.2vw, 1.9rem);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow);
  position: sticky; top: calc(var(--nav-h) + 1rem);
}
.ct-hours h2 { font-size: 1.1rem; margin: 0 0 .9rem; }
.ct-hours .hours { font-size: .93rem; }

/* Zone d'intervention, sous les horaires */
.ct-zone {
  display: flex; gap: .8rem; align-items: flex-start;
  margin-top: 1.3rem; padding-top: 1.3rem;
  border-top: 1px solid var(--line);
}
.ct-zone svg {
  flex: 0 0 auto; width: 22px; height: 22px;
  color: var(--blue);
}
.ct-zone h4 {
  font-size: .95rem; margin: 0 0 .2rem; color: var(--txt);
}
.ct-zone p { font-size: .9rem; color: var(--muted); margin: 0; }

.ct-pts h2 {
  font-size: clamp(1.3rem, 2vw, 1.6rem);
  margin: 0 0 1.2rem;
}

.ct-pt {
  display: flex; gap: 1.1rem; align-items: flex-start;
  padding: 1.25rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--shadow);
}
.ct-pt + .ct-pt { margin-top: .9rem; }

.ct-pt-ic {
  flex: 0 0 auto;
  display: grid; place-items: center;
  width: 44px; height: 44px;
  border-radius: 12px;
  color: #fff;
  background: var(--grad);
}
.ct-pt-ic svg { width: 22px; height: 22px; }

.ct-pt h3 { font-size: 1.02rem; margin: 0 0 .3rem; }
.ct-pt p  { font-size: .93rem; color: var(--txt-2); margin: 0; }

.ct-pt-lien { margin: 1.3rem 0 0; }

/* ── La rue ────────────────────────────────────────────── */
.ct-map-sec { background: var(--surface); }
.ct-map-sec .shop-map { margin-top: 0; }


/* ── Adaptatif ─────────────────────────────────────────── */
@media (max-width: 960px) {
  .ct-grid { grid-template-columns: 1fr; }
  .ct-prat-grid { grid-template-columns: 1fr; }
  .ct-hours { position: static; }
}

/* min-width: 0 — même bug que la galerie du magasin (voir la note en haut du
   fichier) : ces blocs sont des enfants de grid/flex, leur `min-width: auto`
   les empêchait de descendre sous la largeur de leur contenu et faisait
   déborder la page de 6 px sur un écran de 320 px. */
.ct-hours, .ct-pts, .ct-pt { min-width: 0; }
.ct-pt > div { min-width: 0; }


/* ══════════════════════════════════════════════════════════
   FILET DE SÉCURITÉ — mots orphelins

   Les textes narratifs passent par nl() : chaque phrase devient un
   .tline, équilibré indépendamment. Restent les textes courts rendus
   avec esc() (puces, légendes, specs) : on leur donne au moins
   text-wrap:pretty, qui interdit au navigateur de laisser un mot
   seul sur la dernière ligne.
   ══════════════════════════════════════════════════════════ */
.tf-list li span,     /* puces des cartes tarifs   */
.tf-notes li,         /* « Bon à savoir » (tarifs) */
.sl-chip span,        /* légende En stock / Sur commande */
.md-note,
.ct-txt,
.ct-pt p,
.ct-zone p {
  text-wrap: pretty;
}


/* ══════════════════════════════════════════════════════════
   CARTE — écran de consentement (RGPD)
   L'iframe Google n'est chargée qu'au clic : aucun cookie tiers
   n'est déposé sans accord, donc aucun bandeau n'est nécessaire.
   ══════════════════════════════════════════════════════════ */
.map-ask {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: .55rem;
  padding: clamp(2rem, 5vw, 3.4rem) 1.4rem;
  min-height: clamp(300px, 34vw, 420px);
  justify-content: center;
  background: var(--bg-2);
  background-image: radial-gradient(circle at 1px 1px, rgba(47,95,180,.14) 1px, transparent 0);
  background-size: 22px 22px;
}
.map-ask-ic { width: 34px; height: 34px; color: var(--blue); }
.map-ask h3 { margin: 0; font-size: 1.1rem; }
.map-ask p {
  margin: 0 0 .6rem; max-width: 460px;
  font-size: .9rem; color: var(--muted); text-wrap: pretty;
}
.map-ask-alt { font-size: .85rem; color: var(--muted); text-decoration: underline; }
.map-ask-alt:hover { color: var(--blue-dk); }


/* ══════════════════════════════════════════════════════════
   PAGES LÉGALES
   ══════════════════════════════════════════════════════════ */
.legal { background: var(--surface); padding: clamp(2.2rem, 4vw, 3.4rem) 0 clamp(3rem, 5vw, 4.5rem); }
.legal .wrap { max-width: 860px; }

.legal h2 {
  margin: 2.4rem 0 .8rem;
  padding-top: 1.6rem;
  border-top: 1px solid var(--line);
  font-size: clamp(1.15rem, 2vw, 1.4rem);
}
.legal h2:first-of-type { border-top: none; padding-top: 0; margin-top: 1.6rem; }
.legal h3 { margin: 1.5rem 0 .5rem; font-size: 1.02rem; }

.legal p, .legal li {
  color: var(--txt-2); line-height: 1.7;
  text-wrap: pretty;
}
.legal p { margin: 0 0 .9rem; }
.legal ul { margin: 0 0 1rem; padding-left: 1.2rem; }
.legal li { margin-bottom: .4rem; }
.legal a { text-decoration: underline; }

/* Encadré de résumé, en tête de page */
.lg-tldr {
  padding: 1.15rem 1.35rem;
  margin-bottom: 1.8rem;
  background: var(--bg);
  border-left: 4px solid var(--blue);
  border-radius: 0 var(--r) var(--r) 0;
}
.lg-tldr p:last-child { margin-bottom: 0; }

/* Fiche d'identité (mentions légales) */
.lg-fiche {
  margin: 0 0 1.2rem;
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
}
.lg-fiche div {
  display: grid; grid-template-columns: 210px 1fr;
  gap: 1rem;
  padding: .7rem 1.1rem;
  font-size: .93rem;
}
.lg-fiche div + div { border-top: 1px solid var(--line); }
.lg-fiche dt, .lg-fiche b { color: var(--muted); font-weight: 600; }
.lg-fiche span { color: var(--txt); }

/* Champ que l'entreprise doit encore renseigner */
.lg-todo {
  display: inline-block;
  padding: .05rem .5rem;
  border-radius: 6px;
  background: #FDF0D9; color: #8A5B12;
  border: 1px solid #F0D9A8;
  font-size: .85rem; font-weight: 600;
}

.legal-date { display: block; margin-bottom: 1.4rem; color: var(--muted); font-size: .9rem; }

@media (max-width: 620px) {
  .lg-fiche div { grid-template-columns: 1fr; gap: .15rem; }
}


/* ══════════════════════════════════════════════════════════
   ANIMATIONS & FINITIONS
   Voir js/anim.js. `has-anim` n'est posé QUE si le JS tourne :
   sans JS, rien n'est masqué.
   ══════════════════════════════════════════════════════════ */

/* ── Apparition au défilement ───────────────────────────── */
.has-anim .sec-head,
.has-anim .svc-card, .has-anim .ip,
.has-anim .news-card,
.has-anim .stock-box, .has-anim .reviews-card, .has-anim .rv-bubble,
.has-anim .shop-media, .has-anim .shop-info, .has-anim .shop-map,
.has-anim .at-item, .has-anim .pr-card, .has-anim .st-item,
.has-anim .md-card, .has-anim .rl-item,
.has-anim .tf-card, .has-anim .tf-notes,
.has-anim .ct-card, .has-anim .ct-pt, .has-anim .ct-hours,
.has-anim .prod-card, .has-anim .cat-group,
.has-anim .cta-box {
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity   .55s cubic-bezier(.22, .7, .25, 1),
    transform .55s cubic-bezier(.22, .7, .25, 1);
  transition-delay: var(--d, 0ms);
  will-change: opacity, transform;
}
.has-anim .is-in {
  opacity: 1;
  transform: none;
  will-change: auto;   /* on relâche : garder will-change coûte de la mémoire */
}

/* ── Header : il se densifie dès qu'on décolle du haut ──── */
.site-header {
  transition: background .25s, box-shadow .25s, backdrop-filter .25s;
}
.site-header.is-scrolled {
  background: rgba(14, 31, 56, .92);
  backdrop-filter: saturate(140%) blur(10px);
  box-shadow: 0 6px 26px rgba(6, 14, 28, .38);
}

/* ── Micro-interactions ─────────────────────────────────── */

/* Photos : léger zoom au survol de leur carte (jamais l'inverse,
   sinon l'image « saute » sous le curseur). */
.news-card img, .rl-item img, .prod-card img, .sg-thumb img {
  transition: transform .5s cubic-bezier(.22, .7, .25, 1);
}
.news-card:hover img, .rl-item:hover img,
.prod-card:hover img, .sg-thumb:hover img { transform: scale(1.045); }

/* Les cartes montent un peu plus franchement, et l'ombre suit. */
.svc-card, .news-card, .prod-card, .md-card {
  transition: transform .22s cubic-bezier(.22, .7, .25, 1),
              box-shadow .22s, border-color .22s;
}
.svc-card:hover, .news-card:hover, .prod-card:hover, .md-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

/* La flèche des liens « En savoir plus » glisse au survol */
.svc-more svg, .nc-more svg { transition: transform .2s; }
.svc-card:hover .svc-more svg,
.news-card:hover .nc-more svg { transform: translateX(4px); }

/* ── Accessibilité : anneau de focus visible au clavier ─── */
a:focus-visible, button:focus-visible,
input:focus-visible, select:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--blue-lt);
  outline-offset: 3px;
  border-radius: 6px;
}

/* ── Ancres : défilement doux (le menu du catalogue en profite) ── */
html { scroll-behavior: smooth; }

/* ══════════════════════════════════════════════════════════
   MOUVEMENT RÉDUIT — on coupe tout.
   Réglage système de la personne : il prime sur nos effets.
   ══════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .has-anim [class] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .news-card:hover img, .rl-item:hover img,
  .prod-card:hover img, .sg-thumb:hover img { transform: none; }
  .svc-card:hover, .news-card:hover,
  .prod-card:hover, .md-card:hover { transform: none; }
}


/* ══════════════════════════════════════════════════════════
   HERO — collage produits (multimédia, jeux vidéo)

   Les visuels sont dispersés autour du titre : à droite, à gauche, et un
   grand DERRIÈRE le texte.

   🔑 CE QUI REND ÇA LISIBLE PLUTÔT QUE BROUILLON : trois PLANS de
   profondeur. Sans ça, six produits à pleine opacité sur un bandeau, ça
   fait un fouillis — et une image nette derrière un titre le rend
   illisible.
     • Plan 1 (droite)  : net, opaque. C'est ce qu'on regarde.
     • Plan 2 (gauche)  : plus petit, légèrement en retrait.
     • Plan 3 (derrière le texte) : grand, très atténué et flouté.
       Il fait TEXTURE. À 12 % d'opacité, il ne concurrence jamais le titre.

   La couche est un peu plus large que la colonne de texte, pour que les
   visuels de gauche et de droite débordent SANS aller se coller au bord
   de l'écran (c'était le défaut de la première version).
   ══════════════════════════════════════════════════════════ */
.svc-hero:has(.svch-deco) { min-height: 420px; }

.svch-deco {
  position: absolute;
  top: 0; bottom: 0;
  left: 50%; transform: translateX(-50%);
  width: min(100% - 1.5rem, calc(var(--wrap) + 380px));
  pointer-events: none;
  z-index: 1;
}
/* Halo diffus à droite : rassemble le premier plan */
.svch-deco::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 18% 50%, rgba(99, 176, 234, .17) 0%, transparent 34%),
    radial-gradient(circle at 82% 50%, rgba(99, 176, 234, .17) 0%, transparent 34%);
}
.svch-deco img {
  position: absolute;
  object-fit: contain;
  filter: drop-shadow(0 14px 28px rgba(0, 0, 0, .45));
  animation: deco-float 8s ease-in-out infinite;
}
/* Le texte passe TOUJOURS devant la décoration. */
.svch-in { position: relative; z-index: 2; }

/* 🔑 CE QUI REND LA SYMÉTRIE POSSIBLE : on CENTRE le bloc de texte.
   Tant qu'il était collé à gauche (.svch-in a un max-width de 680px), il
   laissait un grand vide à sa droite et presque rien à sa gauche : les
   deux côtés n'avaient pas la même place, donc le miroir était impossible.
   Centré, il libère exactement la même bande de chaque côté. */
.svc-hero:has(.svch-deco) .svch-in {
  margin-inline: auto;
  text-align: center;
}
.svc-hero:has(.svch-deco) .svch-btns { justify-content: center; }

/* 🐛 LE BUG QUI FAISAIT SE CHEVAUCHER LES VISUELS :
   on ne contraignait que la LARGEUR. Or les images n'ont pas le même
   format. Le casque (258 × 598, portrait) à 112 px de large fait 260 px
   de HAUT — il traversait la moitié du bandeau et venait percuter
   l'enceinte centrée juste à côté.
   → On plafonne aussi la HAUTEUR. object-fit: contain fait le reste :
   l'image se réduit proportionnellement, sans jamais se déformer. */
.svch-deco img       { max-height: 44%; }
.svch-deco img:nth-child(1),
.svch-deco img:nth-child(4) { max-height: 62%; }

/* Les visuels sont placés PAR RAPPORT AU CENTRE (calc), pas en % du
   bandeau : ainsi ils gardent toujours la même distance au texte, quelle
   que soit la largeur de l'écran, et ne peuvent jamais lui passer dessus.
     --tx = demi-largeur du texte (340px) + une marge de respiration. */
.svch-deco { --tx: 368px; }

/* ── DROITE ──────────────────────────────────────────────── */
.svch-deco img:nth-child(1) {          /* ancrage : le plus à l'extérieur */
  left: calc(50% + var(--tx) + 88px); top: 50%;
  width: clamp(170px, 16vw, 252px);
  translate: 0 -50%;
  animation-delay: 0s;
}
.svch-deco img:nth-child(2) {          /* en haut, contre le texte */
  left: calc(50% + var(--tx)); top: 3%;
  width: clamp(100px, 9.5vw, 138px);
  animation-delay: -2.6s;
}
.svch-deco img:nth-child(3) {          /* en bas, contre le texte */
  left: calc(50% + var(--tx) + 20px); bottom: 3%;
  width: clamp(88px, 8vw, 118px);
  animation-delay: -5.1s;
}

/* ── GAUCHE — le miroir exact ────────────────────────────── */
.svch-deco img:nth-child(4) {          /* ancrage : le plus à l'extérieur */
  right: calc(50% + var(--tx) + 88px); top: 50%;
  width: clamp(170px, 16vw, 252px);
  translate: 0 -50%;
  animation-delay: -3.7s;
}
.svch-deco img:nth-child(5) {          /* en haut, contre le texte */
  right: calc(50% + var(--tx)); top: 3%;
  width: clamp(100px, 9.5vw, 138px);
  animation-delay: -6.4s;
}
.svch-deco img:nth-child(6) {          /* en bas, contre le texte */
  right: calc(50% + var(--tx) + 20px); bottom: 3%;
  width: clamp(88px, 8vw, 118px);
  animation-delay: -1.4s;
}

/* translate: est une propriété à part -> le flottement (transform) ne
   l'écrase pas. Les visuels centrés verticalement ne sautent donc plus. */
@keyframes deco-float {
  0%, 100% { transform: translateY(0);     }
  50%      { transform: translateY(-9px);  }
}

/* Sous 1400 px : la marge gauche n'existe plus, les visuels de gauche
   passeraient sous le titre. On garde la droite et le fond. */
/* Sous 1360 px, les deux bandes latérales n'ont plus la place d'accueillir
   la composition sans rogner les visuels : on retire TOUTE la décoration,
   des deux côtés à la fois. On ne casse jamais la symétrie en n'en gardant
   qu'un seul côté — et le texte redevient aligné à gauche, comme sur les
   autres pages de service. */
@media (max-width: 1360px) {
  .svch-deco { display: none; }
  .svc-hero:has(.svch-deco) { min-height: 0; }
  .svc-hero:has(.svch-deco) .svch-in { margin-inline: 0; text-align: left; }
  .svc-hero:has(.svch-deco) .svch-btns { justify-content: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  .svch-deco img { animation: none; }
}

/* Jeton d'emplacement vide (voir service.js) : il ne doit rien peser
   visuellement, seulement occuper son rang. */
.svch-vide { display: none; }

/* ══════════════════════════════════════════════════════════
   ANNONCE « SITE EN CONSTRUCTION »  (js/annonce.js)
   ══════════════════════════════════════════════════════════ */
/* Volontairement MINUSCULE : une info, un bouton. La version précédente
   (bandeau navy, logo, deux encarts de services, lien contact) faisait la
   moitié de l'écran et retardait l'entrée sur le site pour rien.
   ℹ️ Ici c'est le logo-mark BLEU sur transparent → il tient sur fond clair,
      contrairement à logo-full qui n'existe qu'en blanc.
   👉 Se retire en passant ACTIVE à false dans js/annonce.js. */
.ann-wrap { position: fixed; inset: 0; z-index: 9000; }
.ann-back {
  position: absolute; inset: 0;
  background: rgba(6, 14, 26, .74);
  backdrop-filter: blur(4px);
  animation: annFond .3s ease both;
}
.ann-box {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: min(380px, calc(100vw - 2rem));
  max-height: calc(100vh - 2rem);
  overflow-y: auto;
  padding: 1.7rem 1.5rem 1.5rem;
  /* ⚠️ ALIGNÉ À GAUCHE, PAS CENTRÉ. Centré, un texte de trois phrases donne
     des lignes de longueurs toutes différentes : ça se lit comme un texte
     « en décalé ». À gauche, le bord est net et le bloc se tient. */
  text-align: left;
  background: var(--surface);
  border-radius: var(--r-lg);
  box-shadow: 0 32px 90px rgba(6, 14, 26, .5);
  animation: annEntre .38s cubic-bezier(.2, .8, .3, 1) both;
}
.ann-logo { display: block; height: 34px; width: auto; margin-bottom: .85rem; }
.ann-box h2 {
  margin: 0 0 .45rem;
  font-size: 1.12rem;
}
.ann-box p {
  margin: 0 0 1.25rem;
  color: var(--txt-2);
  font-size: .9rem;
  line-height: 1.55;
  /* Pas de text-wrap: balance ici : il égalise les longueurs de lignes, ce qui
     recrée l'effet décalé sur un bloc étroit. Une coupure normale suffit. */
  text-wrap: pretty;
}
.ann-ok { width: 100%; justify-content: center; }

body.ann-open { overflow: hidden; }
.ann-hide { animation: annFond .24s ease reverse both; pointer-events: none; }

@keyframes annFond { from { opacity: 0 } to { opacity: 1 } }
@keyframes annEntre {
  from { opacity: 0; transform: translate(-50%, calc(-50% + 18px)) scale(.97) }
  to   { opacity: 1; transform: translate(-50%, -50%) scale(1) }
}
@media (prefers-reduced-motion: reduce) {
  .ann-back, .ann-box, .ann-hide { animation: none; }
}