/* ============================================================
   PrivTeint v2 — panier devis, scènes animées, fiches films,
   page devis, tarifs. Complète main.css (mêmes tokens).
   ============================================================ */

/* ══════════ PANIER FLOTTANT ══════════ */
.pt-fab {
  position: fixed; right: 18px; bottom: 18px; z-index: 950;
  display: flex; align-items: center; gap: 9px;
  background: var(--gold); color: var(--navy);
  font-family: var(--font-body); font-weight: 800; font-size: 14px;
  border: none; border-radius: var(--radius-full); padding: 13px 20px;
  cursor: pointer; box-shadow: 0 12px 32px rgba(201,168,76,.45);
  transform: translateY(120px); transition: transform .4s cubic-bezier(.34,1.56,.64,1);
}
.pt-fab.on { transform: translateY(0); }
.pt-fab.bump { animation: pt-bump .35s ease; }
@keyframes pt-bump { 40% { transform: translateY(0) scale(1.12); } }
.pt-fab:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }
.pt-fab-cnt {
  background: var(--navy); color: var(--gold); border-radius: var(--radius-full);
  min-width: 22px; height: 22px; display: grid; place-items: center; font-size: 12px;
  font-variant-numeric: tabular-nums;
}
@media (max-width: 640px) {
  .pt-fab { bottom: 76px; } /* laisse la place au floating-cta appel */
}
.pt-mini {
  position: fixed; right: 18px; bottom: 76px; z-index: 951;
  width: min(330px, calc(100vw - 36px));
  background: var(--bg-alt); border: 1px solid var(--border); border-radius: 16px;
  box-shadow: var(--shadow-lg); padding: 18px; display: none;
}
@media (max-width: 640px) { .pt-mini { bottom: 134px; } }
.pt-mini.open { display: block; }
.pt-mini h5 {
  margin: 0 0 10px; font-size: 12px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-muted); font-weight: 700;
}
.pt-mini ul { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-direction: column; gap: 8px; max-height: 190px; overflow-y: auto; }
.pt-mini li { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 13.5px; color: var(--text); }
.pt-mini li button { border: none; background: none; color: var(--text-muted); cursor: pointer; font-size: 15px; padding: 2px 6px; }
.pt-mini li button:hover { color: #c0392b; }
.pt-mini-est { font-size: 13px; color: var(--text-muted); border-top: 1px solid var(--border); padding-top: 10px; }
.pt-mini-est b { color: var(--text); font-variant-numeric: tabular-nums; }
.pt-mini-est small { display: block; font-size: 11px; margin-top: 4px; }
.pt-mini-go { width: 100%; justify-content: center; margin-top: 12px; font-size: 14px; }
.pt-toast {
  position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 90px); z-index: 952;
  background: var(--navy); color: #EDEAE0; font-size: 13.5px; font-weight: 600;
  border-radius: var(--radius-full); padding: 11px 20px; pointer-events: none;
  transition: transform .35s ease; box-shadow: var(--shadow-md); white-space: nowrap;
}
.pt-toast.on { transform: translate(-50%, 0); }
.pt-toast b { color: var(--gold-light); }
button.pt-added, .btn.pt-added { background: var(--gold) !important; color: var(--navy) !important; }

/* ══════════ SCÈNES ANIMÉES (réalistes) ══════════ */
.scene-section { background: var(--navy); color: #EDEAE0; overflow: clip; }
.scene-pinwrap { height: 300vh; position: relative; }
.scene-sticky {
  position: sticky; top: 0; height: 100vh; height: 100dvh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: clamp(16px, 3vh, 30px); padding: 84px 20px 30px;
}
.scene-kicker {
  font-size: 12px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
  color: var(--gold);
}
.scene-caption {
  min-height: 2.5em; text-align: center; max-width: 620px;
  font-family: var(--font-serif); font-style: italic; font-weight: 500;
  font-size: clamp(18px, 2.6vw, 26px); line-height: 1.35; color: #EDEAE0;
  transition: opacity .3s ease;
}
.scene-caption.fade { opacity: 0; }

/* — Scène pose : photo réelle + calques — */
.pose-row { display: flex; align-items: center; gap: clamp(14px, 3.5vw, 40px); }
.pose-photo {
  position: relative; width: min(52vw, 640px); aspect-ratio: 16 / 10.5;
  border-radius: 10px; overflow: hidden;
  box-shadow: 0 40px 100px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.08);
}
.pose-photo img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block;
}
.pose-photo .ph-heat { filter: saturate(1.25) contrast(1.04) brightness(1.06) sepia(.22) hue-rotate(-8deg); }
.pose-photo .heat-veil {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(200deg, rgba(255,140,40,.30), rgba(255,90,20,.12) 55%, transparent);
  mix-blend-mode: multiply;
}
.pose-photo .ph-cool {
  filter: saturate(.98) brightness(.99);
  clip-path: inset(0 100% 0 0);
}
.pose-photo .cool-veil {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(200deg, rgba(70,120,160,.16), transparent 60%);
  mix-blend-mode: multiply;
  clip-path: inset(0 100% 0 0);
}
.pose-photo .squeegee {
  position: absolute; top: -2%; bottom: -2%; left: 0; width: 6px; margin-left: -3px;
  background: linear-gradient(180deg, var(--gold-light), var(--gold), var(--gold-dark));
  border-radius: 3px; box-shadow: 0 0 22px rgba(201,168,76,.85), 0 0 60px rgba(201,168,76,.35);
  opacity: 0;
}
.pose-badge {
  position: absolute; top: 6%; right: 5%; z-index: 3;
  background: var(--gold); color: var(--navy); font-weight: 800;
  border-radius: var(--radius-full); padding: 9px 18px;
  font-size: clamp(14px, 1.7vw, 18px); font-variant-numeric: tabular-nums;
  transform: scale(0); transition: transform .45s cubic-bezier(.34,1.56,.64,1);
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
}
.pose-badge.on { transform: scale(1); }

/* — Thermomètre instrument — */
.thermo { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.thermo-deg {
  font-weight: 800; font-size: clamp(24px, 3vw, 34px); line-height: 1;
  font-variant-numeric: tabular-nums; color: #EDEAE0;
}
.thermo--heat .thermo-deg { color: #ffab76; }
.thermo--cool .thermo-deg { color: #9fd0e8; }
.thermo-body { position: relative; width: 30px; height: clamp(140px, 30vh, 230px); }
.thermo-tube {
  position: absolute; inset: 0 6px 18px 6px; border-radius: var(--radius-full);
  background: linear-gradient(90deg, rgba(255,255,255,.05), rgba(255,255,255,.16) 45%, rgba(255,255,255,.04));
  border: 1px solid rgba(255,255,255,.25); overflow: hidden;
  box-shadow: inset 0 2px 8px rgba(0,0,0,.4);
}
.thermo-merc {
  position: absolute; bottom: 0; left: 3px; right: 3px; border-radius: var(--radius-full);
  height: 30%;
}
.thermo--heat .thermo-merc { background: linear-gradient(180deg, #ffb27d, #e05a2b); box-shadow: 0 0 14px rgba(224,90,43,.6); }
.thermo--cool .thermo-merc { background: linear-gradient(180deg, #a8d4ea, #4d94bd); box-shadow: 0 0 14px rgba(77,148,189,.5); }
.thermo-bulb {
  position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);
  width: 26px; height: 26px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.25);
}
.thermo--heat .thermo-bulb { background: radial-gradient(circle at 35% 30%, #ffb27d, #e05a2b); }
.thermo--cool .thermo-bulb { background: radial-gradient(circle at 35% 30%, #a8d4ea, #4d94bd); }
.thermo-lab {
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: rgba(237,234,224,.6); font-weight: 700;
}

/* — Scrub SVG (rayons, regards) — */
.scrub-stage { max-width: 900px; margin: 0 auto; padding: 0 20px; }
.scrub-stage svg { width: 100%; height: auto; display: block; }
.scrub-counter {
  text-align: center; padding: 16px 0 0; font-size: 15px; color: rgba(237,234,224,.65);
}
.scrub-counter b { color: var(--gold-light); font-size: 28px; font-variant-numeric: tabular-nums; }

/* — Slider d'intensité — */
.tint-tool {
  display: grid; grid-template-columns: 1.3fr 1fr; border-radius: var(--radius-lg);
  overflow: hidden; border: 1px solid rgba(255,255,255,.12); background: #10233a;
  box-shadow: var(--shadow-lg);
}
@media (max-width: 820px) { .tint-tool { grid-template-columns: 1fr; } }
.tint-view { position: relative; min-height: 340px; }
.tint-view img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tint-veil { position: absolute; inset: 0; background: #0C1B2E; opacity: 0; pointer-events: none; }
.tint-ext {
  position: absolute; left: 14px; bottom: 14px; width: 130px; border-radius: 10px; overflow: hidden;
  border: 2px solid rgba(255,255,255,.6); box-shadow: 0 10px 30px rgba(0,0,0,.4);
}
.tint-ext img { position: static; width: 100%; height: auto; display: block; }
.tint-ext .lab {
  position: absolute; left: 0; right: 0; bottom: 0; font-size: 9px; font-weight: 800;
  letter-spacing: .1em; text-transform: uppercase; text-align: center; color: #fff;
  background: rgba(0,0,0,.5); padding: 3px;
}
.tint-ext .tint-ext-veil { position: absolute; inset: 0; background: #dfe9f0; opacity: 0; }
.tint-ctl { padding: 26px 24px; display: flex; flex-direction: column; gap: 16px; }
.tint-ctl h3 { font-size: 17px; color: #EDEAE0; margin: 0; }
.tint-vlt { font-size: 36px; font-weight: 800; color: var(--gold-light); font-variant-numeric: tabular-nums; line-height: 1; }
.tint-vlt small { font-size: 14px; color: rgba(237,234,224,.6); font-weight: 600; }
.tint-name { color: var(--gold-light); text-transform: uppercase; letter-spacing: .1em; font-size: 13px; font-weight: 800; }
.tint-ctl input[type="range"] { width: 100%; accent-color: var(--gold); cursor: pointer; }
.tint-gauge { display: grid; grid-template-columns: 104px 1fr 46px; align-items: center; gap: 10px; font-size: 12.5px; color: rgba(237,234,224,.65); }
.tint-gauge .trk { height: 7px; border-radius: var(--radius-full); background: rgba(255,255,255,.10); overflow: hidden; }
.tint-gauge .fil { height: 100%; border-radius: var(--radius-full); background: var(--gold); transition: width .2s ease; }
.tint-gauge.g-heat .fil { background: #e05a2b; }
.tint-gauge.g-priv .fil { background: #4d94bd; }
.tint-gauge output { text-align: right; font-variant-numeric: tabular-nums; font-weight: 700; color: #EDEAE0; }
.tint-reco {
  border-top: 1px solid rgba(255,255,255,.12); padding-top: 14px; font-size: 13.5px;
  color: rgba(237,234,224,.65);
}
.tint-reco b { color: #EDEAE0; }
.tint-reco .btn { margin-top: 12px; }

/* — Comparateur avant/après — */
.cmp {
  position: relative; border-radius: var(--radius-lg); overflow: hidden; cursor: ew-resize;
  touch-action: pan-y; aspect-ratio: 16 / 9; box-shadow: var(--shadow-lg);
  border: 1px solid rgba(255,255,255,.1);
  user-select: none; -webkit-user-select: none;
}
.cmp img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  pointer-events: none; -webkit-user-drag: none; user-select: none; -webkit-user-select: none;
}
.cmp .cmp-before { filter: saturate(1.25) brightness(1.07) sepia(.22) hue-rotate(-8deg); }
.cmp .cmp-heatveil {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(200deg, rgba(255,140,40,.28), transparent 65%); mix-blend-mode: multiply;
}
.cmp-clip { position: absolute; inset: 0; clip-path: inset(0 0 0 50%); }
.cmp-handle {
  position: absolute; top: 0; bottom: 0; left: 50%; width: 3px; margin-left: -1.5px;
  background: var(--gold); box-shadow: 0 0 18px rgba(201,168,76,.8); z-index: 4;
}
.cmp-handle::after {
  content: "◂ ▸"; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  background: var(--gold); color: var(--navy); font-size: 13px; font-weight: 800;
  border-radius: var(--radius-full); padding: 9px 13px; white-space: nowrap;
  box-shadow: 0 6px 20px rgba(0,0,0,.3);
}
.cmp-tag {
  position: absolute; bottom: 14px; z-index: 3; font-size: 11px; font-weight: 800;
  letter-spacing: .12em; text-transform: uppercase; color: #fff;
  background: rgba(0,0,0,.42); padding: 6px 13px; border-radius: var(--radius-full);
  backdrop-filter: blur(4px);
}
.cmp-tag--b { left: 14px; }
.cmp-tag--a { right: 14px; }
/* Variante « propre » (sans teinte orange chaleur) — pour miroir, vis-à-vis, habitat */
.cmp--plain .cmp-before { filter: none; }
.cmp--plain .cmp-heatveil { display: none; }
/* Comparateur sur fond clair (pages habitat, section blanche) */
.cmp--light { border-color: var(--border); }

/* ══════════ RÉVÉLATION DE TEXTE (montée depuis un masque, façon nexap.fr) ══════════
   S'ajoute à .reveal (observé par main.js qui pose .visible). Le conteneur devient
   un masque ; l'enfant .rise-inner monte depuis le bas.
   Markup : <h2 class="reveal rise"><span class="rise-inner">Titre</span></h2> */
.reveal.rise {
  opacity: 1;            /* on annule le fondu de .reveal : le masque suffit */
  transform: none;
  overflow: hidden;
  padding-bottom: .12em; /* laisse la place aux jambages (g, j, p…) */
}
.reveal.rise .rise-inner {
  display: inline-block;
  transform: translateY(115%);
  transition: transform .9s cubic-bezier(.16, 1, .3, 1);
  will-change: transform;
}
.reveal.rise.visible .rise-inner { transform: translateY(0); }
/* décalages en cascade quand plusieurs .rise se suivent */
.reveal.rise.rise-d1 .rise-inner { transition-delay: .08s; }
.reveal.rise.rise-d2 .rise-inner { transition-delay: .16s; }
.reveal.rise.rise-d3 .rise-inner { transition-delay: .24s; }
@media (prefers-reduced-motion: reduce) {
  .reveal.rise { overflow: visible; padding-bottom: 0; }
  .reveal.rise .rise-inner { transform: none; transition: none; }
}

/* ══════════ FICHES FILMS ══════════ */
.films-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; }
.filmcard {
  background: var(--bg-alt); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 26px 24px; display: flex; flex-direction: column; gap: 12px;
  transition: transform var(--t-base), box-shadow var(--t-base);
}
.filmcard:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.filmcard-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.filmcard h3 { font-size: var(--fs-lg); color: var(--navy); margin: 0; font-weight: 800; }
.filmcard .badge {
  font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  background: var(--gold); color: var(--navy); border-radius: 4px; padding: 3px 8px; white-space: nowrap;
}
.filmcard .accroche { font-size: 14px; color: var(--text-muted); line-height: 1.55; margin: 0; }
.film-specs { display: flex; flex-wrap: wrap; gap: 6px; }
.film-specs span {
  font-size: 11.5px; font-weight: 700; color: var(--navy);
  background: rgba(201,168,76,.12); border: 1px solid rgba(201,168,76,.3);
  border-radius: var(--radius-full); padding: 4px 10px;
  font-variant-numeric: tabular-nums;
}
.film-specs span.neutral { background: var(--bg); border-color: var(--border); color: var(--text-muted); }
.film-prix { font-size: 14.5px; font-weight: 800; color: var(--navy); font-variant-numeric: tabular-nums; }
.film-prix small { font-weight: 500; color: var(--text-muted); }
.film-seul { font-size: 13px; font-weight: 600; color: var(--text-muted); margin-top: -2px; }
.film-seul[hidden] { display: none; }
.film-actions { display: flex; gap: 10px; margin-top: auto; flex-wrap: wrap; }
.film-actions .btn { flex: 1; justify-content: center; font-size: 13.5px; padding: 11px 14px; white-space: nowrap; }
.film-fiche-link {
  display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 700;
  color: var(--text-muted); text-decoration: none; margin-top: 2px;
}
.film-fiche-link:hover { color: var(--gold-dark); }
.film-conseil {
  font-size: 12.5px; color: var(--text-muted); border-left: 2px solid var(--gold);
  padding-left: 10px; line-height: 1.5;
}

/* surface select inline */
.surface-pick { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--text-muted); }
.surface-pick select {
  font: inherit; font-size: 12.5px; padding: 6px 8px; border-radius: 8px;
  border: 1px solid var(--border); background: var(--bg); color: var(--text);
}

/* ══════════ PAGE DEVIS ══════════ */
.devis-wrap { max-width: 760px; margin: 0 auto; }
.devis-steps { display: flex; gap: 8px; margin-bottom: 28px; }
.devis-steps span {
  flex: 1; height: 4px; border-radius: var(--radius-full); background: var(--border);
}
.devis-steps span.done { background: var(--gold); }
.devis-step-label { font-size: 13px; color: var(--text-muted); margin-bottom: 22px; font-weight: 600; }
.devis-panel { display: none; }
.devis-panel.active { display: block; animation: fadeUp .4s var(--ease) both; }
.devis-items { list-style: none; margin: 0 0 18px; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.devis-item {
  display: flex; align-items: center; gap: 14px; background: var(--bg-alt);
  border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px;
  flex-wrap: wrap;
}
.devis-item .di-name { font-weight: 700; color: var(--navy); font-size: 15px; flex: 1; min-width: 160px; }
.devis-item .di-name small { display: block; font-weight: 500; color: var(--text-muted); font-size: 12px; }
.devis-item select {
  font: inherit; font-size: 13px; padding: 8px 10px; border-radius: 8px;
  border: 1px solid var(--border); background: var(--bg); color: var(--text);
}
.devis-item button { border: none; background: none; color: var(--text-muted); cursor: pointer; font-size: 17px; padding: 4px 8px; }
.devis-item button:hover { color: #c0392b; }
.devis-est {
  background: var(--bg-alt); border: 1px solid var(--gold); border-radius: var(--radius);
  padding: 16px 18px; font-size: 14px; color: var(--text-muted); margin-bottom: 22px;
}
.devis-est b { color: var(--navy); font-size: 19px; font-variant-numeric: tabular-nums; }
.devis-est small { display: block; font-size: 11.5px; margin-top: 6px; }
.devis-empty {
  text-align: center; padding: 40px 20px; color: var(--text-muted); font-size: 15px;
  background: var(--bg-alt); border: 1px dashed var(--border); border-radius: var(--radius-lg); margin-bottom: 22px;
}
.devis-nav { display: flex; justify-content: space-between; gap: 12px; margin-top: 26px; }
.devis-nav .btn { min-width: 150px; justify-content: center; }
.seg { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 18px; position: relative; }
.seg label {
  border: 1px solid var(--border); border-radius: var(--radius); padding: 14px;
  cursor: pointer; text-align: center; font-weight: 700; font-size: 14.5px; color: var(--text-muted);
  background: var(--bg-alt); transition: border-color var(--t-fast), background var(--t-fast), color var(--t-fast);
}
.seg input { position: absolute; opacity: 0; pointer-events: none; }
.seg label.checked { border-color: var(--gold); background: rgba(201,168,76,.08); color: var(--navy); }
.devis-reassure {
  display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; margin-top: 18px;
  font-size: 12.5px; color: var(--text-muted);
}
.devis-reassure span::before { content: "✓ "; color: var(--gold-dark); font-weight: 800; }
.rgpd-note { font-size: 11.5px; color: var(--text-muted); line-height: 1.55; margin-top: 14px; }

/* ══════════ TARIFS ══════════ */
.tarif-table-box { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--bg-alt); }
.tarif-table { border-collapse: collapse; width: 100%; font-size: 14.5px; }
.tarif-table th, .tarif-table td { text-align: left; padding: 14px 18px; border-bottom: 1px solid var(--border); }
.tarif-table th { font-size: 11.5px; text-transform: uppercase; letter-spacing: .1em; color: var(--text-muted); background: var(--bg); }
.tarif-table tr:last-child td { border-bottom: none; }
.tarif-table .prix { font-weight: 800; color: var(--navy); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ══════════ DIVERS ══════════ */
.section-cta-inline { display: flex; gap: 12px; flex-wrap: wrap; margin-top: var(--sp-6); }
.faq-anchor { scroll-margin-top: 90px; }

@media (max-width: 760px) {
  .pose-row { flex-wrap: wrap; justify-content: center; }
  .pose-photo { width: min(88vw, 640px); order: -1; }
}
@media (prefers-reduced-motion: reduce) {
  .scene-pinwrap { height: auto !important; }
  .scene-sticky { position: static; height: auto; padding-top: 40px; }
  .pt-fab, .pt-toast, .pose-badge { transition: none; }
  .filmcard:hover { transform: none; }
}

/* ══════════ MENU « À PROPOS » — déroulé compact (≠ méga-menu pleine largeur) ══════════ */
.mega-menu--compact {
  position: absolute; top: calc(100% + 8px); left: auto; right: 0;
  transform: translateY(-8px);
  width: min(280px, calc(100vw - 40px));
  background: #fff;
}
.nav-mega-wrap.open .mega-menu--compact { transform: translateY(0); }
.mega-list { list-style: none; margin: 0; padding: 8px; }
.mega-list li + li { border-top: 1px solid var(--border); }
.mega-list a {
  display: flex; flex-direction: column; gap: 2px;
  padding: 13px 15px; border-radius: 12px; text-decoration: none;
  color: var(--navy); transition: background .15s ease;
}
.mega-list a:hover { background: rgba(12,27,46,.06); }
.mega-list strong { font-weight: 800; font-size: var(--fs-sm); }
.mega-list span { font-size: .78rem; color: var(--text-muted); }

/* ═══ Widget « Vos besoins » (types de film, grandes images) ═══ */
.besoins-scroll{ display:flex; flex-direction:column; gap:clamp(1.5rem,3.5vw,2.75rem); }
.besoin-card{
  display:grid; grid-template-columns:1.05fr .95fr; align-items:stretch;
  background:var(--white,#fff); border-radius:var(--radius-lg,20px); overflow:hidden;
  box-shadow:var(--shadow-md,0 12px 40px rgba(12,27,46,.10));
}
.besoin-media{ position:relative; min-height:clamp(240px,30vw,380px); }
.besoin-media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.besoin-num{
  position:absolute; top:1rem; left:1rem; width:44px; height:44px; border-radius:50%;
  background:var(--gold,#C9A84C); color:var(--navy,#0C1B2E); display:flex; align-items:center; justify-content:center;
  font-family:var(--font-head,inherit); font-weight:800; font-size:1.15rem; box-shadow:0 6px 18px rgba(12,27,46,.25);
}
.besoin-body{ padding:clamp(1.5rem,3.2vw,2.75rem); display:flex; flex-direction:column; justify-content:center; gap:.75rem; }
.besoin-kicker{ text-transform:uppercase; letter-spacing:.12em; font-size:.72rem; font-weight:700; color:var(--gold,#C9A84C); margin:0; }
.besoin-titre{ font-family:var(--font-head,inherit); font-weight:800; font-size:clamp(1.25rem,2.4vw,1.6rem); color:var(--navy,#0C1B2E); margin:0; line-height:1.15; }
.besoin-txt{ color:var(--text-muted,#5b6572); font-size:.95rem; line-height:1.6; margin:0; }
.besoin-actions{ display:flex; flex-wrap:wrap; align-items:center; gap:1rem 1.5rem; margin-top:.5rem; }
.besoin-actions .btn{ white-space:nowrap; }
.besoin-link{ display:inline-flex; align-items:center; gap:.4rem; font-weight:600; font-size:.9rem; color:var(--navy,#0C1B2E); text-decoration:none; }
.besoin-link:hover{ color:var(--gold,#C9A84C); }
.besoin-link svg{ transition:transform .2s; }
.besoin-link:hover svg{ transform:translateX(3px); }
.besoin-card:nth-child(even) .besoin-media{ order:2; }
@media (max-width:760px){
  .besoin-card{ grid-template-columns:1fr; }
  .besoin-card:nth-child(even) .besoin-media{ order:0; }
  .besoin-media{ min-height:220px; }
}
/* ═══ Simulateur de teinte universel (.simu) — int/ext + curseur + ajout devis ═══ */
.simu{ display:grid; grid-template-columns:1.15fr .85fr; gap:0; background:var(--navy,#0C1B2E); border-radius:var(--radius-lg,20px); overflow:hidden; box-shadow:var(--shadow-lg,0 24px 60px rgba(12,27,46,.35)); }
.simu-stage{ position:relative; min-height:clamp(280px,42vw,480px); background:#0C1B2E; }
.simu-view{ position:absolute; inset:0; opacity:0; transition:opacity .4s ease; }
.simu-view.is-active{ opacity:1; }
.simu-view img{ width:100%; height:100%; object-fit:cover; display:block; }
.simu-veil{ position:absolute; inset:0; pointer-events:none; opacity:0; transition:opacity .12s linear, background .12s linear; }
.simu-badge{ position:absolute; top:1rem; left:1rem; background:rgba(12,27,46,.72); color:#fff; font-size:.72rem; font-weight:600; letter-spacing:.03em; padding:.32rem .72rem; border-radius:999px; }
.simu-ctl{ padding:clamp(1.5rem,3vw,2.6rem); color:#EDEAE0; display:flex; flex-direction:column; gap:1rem; }
.simu-toggle{ display:inline-flex; background:rgba(255,255,255,.08); border-radius:999px; padding:4px; gap:4px; align-self:flex-start; }
.simu-toggle button{ border:0; background:transparent; color:rgba(237,234,224,.7); font-weight:600; font-size:.84rem; padding:.45rem .95rem; border-radius:999px; cursor:pointer; transition:background .2s,color .2s; }
.simu-toggle button.is-on{ background:var(--gold,#C9A84C); color:var(--navy,#0C1B2E); }
.simu-ctl h3{ font-size:1.02rem; margin:0; color:#fff; font-family:var(--font-head,inherit); font-weight:700; }
.simu-teinte{ font-family:var(--font-head,inherit); font-weight:800; font-size:clamp(1.35rem,2.6vw,1.7rem); color:#fff; line-height:1.1; }
.simu-teinte small{ display:block; font-size:.82rem; font-weight:400; color:rgba(237,234,224,.6); margin-top:.25rem; }
.simu input[type=range]{ width:100%; accent-color:var(--gold,#C9A84C); cursor:pointer; }
.simu .js-gauges{ display:flex; flex-direction:column; gap:.55rem; }
.simu-gauge{ display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:.7rem; font-size:.8rem; color:rgba(237,234,224,.78); }
.simu-gauge .trk{ height:6px; background:rgba(255,255,255,.12); border-radius:99px; overflow:hidden; }
.simu-gauge .fil{ height:100%; background:var(--gold,#C9A84C); border-radius:99px; transition:width .12s linear; }
.simu-gauge output{ font-variant-numeric:tabular-nums; min-width:2.6em; text-align:right; }
.simu-cta{ margin-top:.4rem; }
.simu-cta .btn{ width:100%; justify-content:center; }
.simu-note{ font-size:.78rem; color:rgba(237,234,224,.55); margin:.2rem 0 0; }
/* ── Mode vue unique (dépoli) : baie transparente → full dépoli givré ── */
.simu-stage--single{ background:#fff; display:flex; align-items:center; justify-content:center; }
.simu-stage--single .simu-view{ position:relative; width:100%; height:100%; }
.simu-stage--single .simu-view img{ object-fit:contain; }
.simu-veil--pane{
  position:absolute; inset:auto; border-radius:3px;
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='f'><feTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='matrix' values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.5 0'/></filter><rect width='100%25' height='100%25' filter='url(%23f)' opacity='0.09'/></svg>"),
    linear-gradient(158deg, rgba(242,245,248,.98) 0%, rgba(211,221,230,.98) 100%);
  background-size:140px 140px, 100% 100%;
  box-shadow:
    inset 0 0 52px rgba(108,130,156,.30),
    inset 0 2px 3px rgba(255,255,255,.6),
    inset 0 -16px 30px rgba(118,138,162,.16);
}
@media (max-width:820px){ .simu{ grid-template-columns:1fr; } .simu-stage{ min-height:240px; } .simu-stage--single{ min-height:clamp(240px,72vw,360px); } }
/* CTA rapide sous la carte besoin */
.besoin-quick{ background:none; border:0; padding:0; color:var(--text-muted,#5b6572); font-size:.85rem; text-decoration:underline; text-underline-offset:3px; cursor:pointer; }
.besoin-quick:hover{ color:var(--gold,#C9A84C); }
.besoin-quick.pt-added{ color:var(--gold,#C9A84C); text-decoration:none; font-weight:600; }
/* ═══ Upload photos (formulaire devis) ═══ */
.photo-up-btn{ display:inline-flex; align-items:center; gap:.5rem; background:rgba(12,27,46,.05); border:1.5px dashed rgba(12,27,46,.25); color:var(--navy,#0C1B2E); font-weight:600; font-size:.9rem; padding:.7rem 1.1rem; border-radius:10px; cursor:pointer; transition:border-color .2s, background .2s; }
.photo-up-btn:hover{ border-color:var(--gold,#C9A84C); background:rgba(201,168,76,.08); }
.photo-previews{ display:flex; flex-wrap:wrap; gap:.6rem; margin-top:.75rem; }
.photo-thumb{ position:relative; width:76px; height:76px; border-radius:8px; overflow:hidden; box-shadow:0 2px 8px rgba(12,27,46,.15); background:#eee; }
.photo-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.photo-thumb button{ position:absolute; top:2px; right:2px; width:20px; height:20px; border:0; border-radius:50%; background:rgba(12,27,46,.82); color:#fff; font-size:12px; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center; padding:0; }
.photo-err{ color:#b3261e; font-size:.82rem; margin:.5rem 0 0; }
/* ═══ Etat vide du devis — cartes-image (choix rapide) ═══ */
.devis-empty-txt{ text-align:center; color:var(--text-muted,#5b6572); margin:0 0 1.25rem; }
.devis-choice-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:.9rem; }
/* Le mot qui separe deux produits voisins : « de jour » contre « jour
   et nuit ». Sans lui, on choisit au hasard entre le miroir sans tain
   et le depoli — c'est l'erreur la plus frequente sur cet ecran. */
.devis-choice small{ display:block; margin-top:.12rem; font-size:.73rem; font-weight:500;
  letter-spacing:0; color:rgba(255,255,255,.74); text-transform:none; line-height:1.25; }
.devis-choice{ position:relative; min-height:120px; border:0; border-radius:14px; overflow:hidden; cursor:pointer; background-size:cover; background-position:center; display:flex; align-items:flex-end; padding:.9rem; box-shadow:0 4px 14px rgba(12,27,46,.14); transition:transform .2s, box-shadow .2s; }
.devis-choice span{ color:#fff; font-weight:700; font-size:.95rem; text-shadow:0 1px 6px rgba(0,0,0,.45); text-align:left; line-height:1.2; }
.devis-choice:hover{ transform:translateY(-3px); box-shadow:0 12px 30px rgba(12,27,46,.28); }
.devis-choice:focus-visible{ outline:3px solid var(--gold,#C9A84C); outline-offset:2px; }
.devis-skip{ display:block; margin:1.25rem auto 0; background:none; border:0; color:var(--text-muted,#5b6572); font-size:.9rem; text-decoration:underline; text-underline-offset:3px; cursor:pointer; }
.devis-skip:hover{ color:var(--gold,#C9A84C); }
@media (max-width:640px){
  .devis-choice-grid{ grid-template-columns:1fr 1fr; }
  /* Deux colonnes sur 390 px : le libelle doit tenir sans se briser. */
  .devis-choice{ min-height:104px; padding:.7rem; }
  .devis-choice span{ font-size:.86rem; }
  .devis-choice small{ font-size:.7rem; }
}
/* ===== Hero mots-cles + CTA (pages solutions & secteurs) - ajout 24/07 ===== */
.page-hero .hero-kw{display:flex;flex-wrap:wrap;gap:8px;margin:20px 0 24px;padding:0;list-style:none}
.page-hero .hero-kw span{font-family:var(--font-head);font-size:.78rem;font-weight:600;letter-spacing:.01em;line-height:1;padding:7px 13px;border-radius:999px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.28);color:#eaf0f8;white-space:nowrap}
.page-hero .hero-cta{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px;margin-top:4px}
.page-hero .hero-cta-note{font-size:.85rem;color:rgba(255,255,255,.72)}
@media(max-width:600px){.page-hero .hero-kw{gap:6px;margin:16px 0 20px}.page-hero .hero-kw span{font-size:.72rem;padding:6px 10px}.page-hero .hero-cta .btn{width:100%;justify-content:center}}
/* ===== Footer : bouton avis Google + credit Nexap - ajout 24/07 ===== */
.footer-review{margin-top:16px}
.footer-review .btn{font-size:.85rem}
.footer-review .btn svg{vertical-align:-3px;margin-right:2px}
.footer-credit{margin-top:12px;font-size:.8rem;opacity:.62}
.footer-credit a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.footer-credit a:hover{opacity:.85}
/* ===== Bandeau canicule inline dans le hero (liquid glass) - 24/07 ===== */
.hero-canic{display:inline-flex;align-items:center;gap:11px;margin:2px auto 8px;padding:8px 9px 8px 15px;border-radius:999px;background:rgba(18,30,50,.42);backdrop-filter:blur(16px) saturate(160%);-webkit-backdrop-filter:blur(16px) saturate(160%);border:1px solid rgba(255,255,255,.24);box-shadow:0 8px 26px rgba(0,0,0,.25),inset 0 1px 0 rgba(255,255,255,.32);color:#fff;text-decoration:none;font-size:.9rem;line-height:1.3;max-width:100%}
.hero-canic__ico{display:flex;flex-shrink:0;color:#F0C662}
.hero-canic__txt{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.hero-canic__txt strong{font-weight:700}
.hero-canic__cta{flex-shrink:0;background:#C9A84C;color:#0C1B2E;font-weight:700;font-size:.82rem;padding:7px 15px;border-radius:999px;white-space:nowrap}
.hero-canic:hover .hero-canic__cta{filter:brightness(1.07)}
.hc-mob{display:none}
@media(max-width:760px){.hero-canic{gap:9px;padding:7px 8px 7px 13px;font-size:.84rem}.hc-desk-txt,.hc-desk{display:none}.hc-mob{display:inline}}
/* ===== Bouton avis Google : style transparent comme les reseaux sociaux ===== */
.footer-review-link{display:inline-flex;align-items:center;gap:8px;padding:8px 15px;border-radius:var(--radius-sm,10px);background:rgba(255,255,255,.08);color:rgba(255,255,255,.6);font-size:.85rem;font-weight:600;text-decoration:none;line-height:1;transition:background var(--t-fast,.2s) ease,color var(--t-fast,.2s) ease}
.footer-review-link svg{width:15px;height:15px}
.footer-review-link:hover{background:var(--gold,#C9A84C);color:#fff}
/* FAQ : question en h3 sans casser l'accordeon */
.acc-heading{margin:0;padding:0;font:inherit;line-height:inherit;display:block;color:inherit}

/* Badge realisation sur comparateur */
.cmp-badge{position:absolute;top:12px;left:50%;transform:translateX(-50%);z-index:4;background:rgba(12,27,46,.82);color:#F0C662;font-weight:700;font-size:.78rem;letter-spacing:.02em;padding:5px 12px;border-radius:999px;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);border:1px solid rgba(240,198,98,.35);white-space:nowrap;pointer-events:none}

/* WCAG contrast text-muted : #6b6b5e (5.4:1) -> #565649 (7.4:1) */
:root{ --text-muted:#565649; }

/* ═══════════════ HEADER 2 NIVEAUX — liquid glass (scopé .pt2 / body.pt2-site) ═══════════════ */
body.pt2-site{ --header-h:104px; }
@media (max-width:900px){ body.pt2-site{ --header-h:76px; } }

.site-header.pt2{ height:auto !important; max-width:1180px; border-radius:20px; padding:0; overflow:visible; }
.site-header.pt2.scrolled{ height:auto !important; }
.site-header.pt2 .pt2-inner{ display:flex; align-items:stretch; width:100%; }

/* ── Logo : zone gauche pleine hauteur ── */
.site-header.pt2 .pt2-logo{ display:flex; align-items:center; padding:0 24px 0 26px; border-right:1px solid rgba(255,255,255,.13); flex-shrink:0; }
.site-header.pt2 .pt2-logo .header-logo-img{ height:50px; width:auto; display:block; }
.pt2-cols{ flex:1; min-width:0; display:flex; flex-direction:column; }

/* ── Niveau 1 : utilitaire (aligné à droite) ── */
.pt2-t1{ display:flex; align-items:center; justify-content:flex-end; gap:18px; padding:8px 22px; border-bottom:1px solid rgba(255,255,255,.13); }
.pt2-util{ display:flex; gap:18px; }
.pt2-util a{ color:rgba(255,255,255,.64); text-decoration:none; font-size:12.5px; letter-spacing:.01em; transition:color .18s; }
.pt2-util a:hover{ color:#fff; }
.pt2-util .pt2-contact{ color:var(--gold,#C9A84C); font-weight:700; }
.pt2-tel{ display:flex; align-items:center; gap:7px; color:#fff; text-decoration:none; font-weight:700; font-size:13.5px; white-space:nowrap; }
.pt2-tel svg{ stroke:var(--gold,#C9A84C); }
.pt2-soc{ display:flex; gap:7px; }
.pt2-soc a{ width:27px; height:27px; border-radius:8px; display:grid; place-items:center; color:rgba(255,255,255,.64); border:1px solid rgba(255,255,255,.16); transition:.18s; }
.pt2-soc a:hover{ color:#0C1B2E; background:var(--gold,#C9A84C); border-color:var(--gold,#C9A84C); }
.pt2-switch{ display:flex; padding:3px; border-radius:999px; background:rgba(0,0,0,.32); border:1px solid rgba(255,255,255,.14); flex-shrink:0; }
.pt2-switch button{ appearance:none; border:0; cursor:pointer; font-family:inherit; font-weight:700; font-size:11px; letter-spacing:.05em; text-transform:uppercase; color:rgba(255,255,255,.64); background:transparent; padding:6px 14px; border-radius:999px; transition:.2s; }
.pt2-switch button.on{ color:#0C1B2E; background:var(--gold,#C9A84C); }
body.mode-pro .pt2-switch button.on{ color:#fff; background:#2f6df0; }

/* ── Niveau 2 : nav centrée, Devis épinglé à droite ── */
.pt2-t2{ position:relative; display:flex; align-items:center; justify-content:center; padding:6px 20px 8px; min-height:46px; }
.site-header.pt2 .pt2-nav{ display:flex; align-items:center; gap:3px; }
.pt2-new{ display:inline-flex; align-items:center; gap:7px; }
.pt2-neuf{ font-size:8.5px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:#0C1B2E; background:var(--gold,#C9A84C); padding:2px 6px; border-radius:6px; }
.pt2-actions{ position:absolute; right:52px; top:50%; transform:translateY(-50%); display:flex; align-items:center; gap:12px; }
body.mode-pro .header-devis{ background:#2f6df0 !important; color:#fff !important; border-color:#2f6df0 !important; }

/* ── Header qui évolue : Pro / Particulier ── */
.pt2-pro-only{ display:none; }
body.mode-pro .site-header.pt2 .pt2-part-only{ display:none; }
body.mode-pro .pt2-pro-only{ display:inline-flex; }

/* Hero accueil : bascule Particulier / Pro (texte + image dépoli bureaux) */
.hero-mode-pro{ display:none; }
body.mode-pro .hero-mode-part{ display:none !important; }
body.mode-pro .hero-mode-pro{ display:block; }
body.mode-pro .hero-bg{ background-image:url('/assets/img/v2/cloison-bureaux-film-depoli-apres-hyeres.webp') !important; }

/* ── État scrollé (crème) ── */
.site-header.pt2.scrolled .pt2-logo{ border-right-color:rgba(12,27,46,.1); }
.site-header.pt2.scrolled .pt2-t1{ border-bottom-color:rgba(12,27,46,.1); }
.site-header.pt2.scrolled .pt2-util a{ color:#5b6572; }
.site-header.pt2.scrolled .pt2-util .pt2-contact{ color:#b08838; }
.site-header.pt2.scrolled .pt2-tel{ color:#0C1B2E; }
.site-header.pt2.scrolled .pt2-soc a{ color:#5b6572; border-color:rgba(12,27,46,.14); }
.site-header.pt2.scrolled .pt2-switch{ background:rgba(12,27,46,.05); border-color:rgba(12,27,46,.12); }
.site-header.pt2.scrolled .pt2-switch button{ color:#5b6572; }
.site-header.pt2.scrolled .pt2-switch button.on{ color:#0C1B2E; background:var(--gold,#C9A84C); }

/* ── Articles de blog : header clair → niveau 1 en texte sombre + padding adapté ── */
body.blog-article.pt2-site{ padding-top:calc(var(--header-h) + var(--header-top) + 1.5rem) !important; }
body.blog-article .pt2-logo{ border-right-color:rgba(12,27,46,.1); }
body.blog-article .pt2-t1{ border-bottom-color:rgba(12,27,46,.1); }
body.blog-article .pt2-util a{ color:#5b6572; }
body.blog-article .pt2-util .pt2-contact{ color:#b08838; }
body.blog-article .pt2-tel{ color:#0C1B2E; }
body.blog-article .pt2-tel svg{ stroke:#b08838; }
body.blog-article .pt2-soc a{ color:#5b6572; border-color:rgba(12,27,46,.14); }
body.blog-article .pt2-switch{ background:rgba(12,27,46,.05); border-color:rgba(12,27,46,.12); }
body.blog-article .pt2-switch button{ color:#5b6572; }
body.blog-article .pt2-switch button.on{ color:#0C1B2E; background:var(--gold,#C9A84C); }

/* ── Sécurité : jamais les éléments mobiles injectés dans le header pt2 ── */
.site-header.pt2 .header-menu-logo, .site-header.pt2 .header-menu-devis{ display:none !important; }

/* ── Bureau étroit (901-1180px) : le menu complet et le bouton Devis se
   marchaient dessus — « À propos » cassait sur 2 lignes et « Tarifs »
   passait sous « Devis ». Cause : .pt2-nav est centré dans .pt2-t2
   pendant que .pt2-actions y est posé en position:absolute (right:52px)
   — rien n'empêchait le centrage de plonger sous le bouton une fois la
   largeur insuffisante. Resserré plutôt que de changer le seuil mobile
   (900px), qui reste le bon endroit pour bien d'autres pages. ── */
@media (min-width:901px) and (max-width:1180px){
  .pt2-t1{ gap:10px; }
  .pt2-util{ gap:10px; }
  .pt2-util a, .pt2-tel{ white-space:nowrap; }
  .site-header.pt2 .pt2-nav{ gap:0; }
  .pt2-nav > a, .nav-mega-trigger{ padding-inline:8px; white-space:nowrap; }
  /* Réserve la largeur du bouton Devis (~100px + marge) : le nav centré
     ne peut plus glisser dessous, quelle que soit sa largeur réelle. */
  .pt2-t2{ padding-right:130px; }
  .header-devis{ padding:9px 18px; font-size:.88rem; }
}

/* ── Mobile ── */
@media (max-width:900px){
  .site-header.pt2 .pt2-logo{ padding:0 12px 0 16px; border-right:0; }
  .site-header.pt2 .pt2-logo .header-logo-img{ height:34px; }
  .site-header.pt2 .pt2-cols{ justify-content:center; }
  .site-header.pt2 .pt2-util,
  .site-header.pt2 .pt2-soc,
  .site-header.pt2 .pt2-tel{ display:none; }
  .site-header.pt2 .pt2-t1{ padding:0; border-bottom:0; min-height:0; }
  .site-header.pt2 .pt2-nav{ display:none; }
  .site-header.pt2 .pt2-t2{ position:static; justify-content:flex-end; padding:0 12px; min-height:0; }
  .site-header.pt2 .pt2-actions{ position:static; transform:none; }
  .site-header.pt2 .pt2-inner{ align-items:center; min-height:60px; }
}

/* pt2-switch masque mobile + Devis toujours or + logo menu mobile */
@media (max-width:900px){ .site-header.pt2 .pt2-switch{ display:none !important; } }
body.mode-pro .header-devis{ background:var(--gold,#C9A84C) !important; color:#0C1B2E !important; border-color:var(--gold,#C9A84C) !important; }
.mnav-logo{ display:flex; justify-content:center; padding:.4rem 0 1.1rem; }
.mnav-logo img{ height:40px; width:auto; }

/* Menu mobile : double bouton Contact (bleu, gauche) + Devis (or, droite) */
.mnav-cta{ display:grid; grid-template-columns:1fr 1fr; gap:.65rem; margin:0 0 1.1rem; }
.mnav-cta a{ display:flex; align-items:center; justify-content:center; padding:.85rem 1rem; border-radius:12px; font-weight:800; font-size:.95rem; text-decoration:none; letter-spacing:.01em; }
.mnav-contact{ background:#2f6df0; color:#fff; }
.mnav-devis{ background:var(--gold,#C9A84C); color:#0C1B2E; }

/* Mobile : le tour (carrousel) remonte derriere le header = scroll immersif, sans vide */
@media (max-width:900px){
  #tour-sticky{ top:0 !important; height:100dvh !important; }
}

/* Menu mobile : switch Particulier/Pro (remplace Contact) + evolution du menu */
.mnav-cta{ grid-template-columns:1fr auto !important; align-items:stretch; gap:.6rem; }
.mnav-switch{ display:flex; padding:5px; border-radius:999px; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.16); -webkit-backdrop-filter:blur(16px) saturate(150%); backdrop-filter:blur(16px) saturate(150%); box-shadow:inset 0 1px 0 rgba(255,255,255,.14), 0 4px 18px rgba(0,0,0,.18); }
.mnav-switch button{ flex:1; appearance:none; border:0; cursor:pointer; font-family:inherit; font-weight:800; font-size:.82rem; letter-spacing:.02em; color:rgba(255,255,255,.74); background:transparent; padding:.62rem .4rem; border-radius:999px; transition:color .2s ease, background .28s ease, box-shadow .28s ease; }
.mnav-switch button.on{ color:#0C1B2E; background:linear-gradient(180deg,#e6c56b 0%,#C9A84C 100%); box-shadow:0 3px 12px rgba(201,168,76,.42), inset 0 1px 0 rgba(255,255,255,.55); }
body.mode-pro .mnav-switch button.on{ color:#fff; background:linear-gradient(180deg,#4d86ff 0%,#2f6df0 100%); box-shadow:0 3px 12px rgba(47,109,240,.45), inset 0 1px 0 rgba(255,255,255,.35); }
.mnav-devis{ border-radius:999px !important; padding:.72rem 1.5rem !important; background:linear-gradient(180deg,#e6c56b 0%,#C9A84C 100%) !important; color:#0C1B2E !important; box-shadow:0 4px 16px rgba(201,168,76,.42), inset 0 1px 0 rgba(255,255,255,.55) !important; }
.mnav-pro-only{ display:none; }
body.mode-pro .mnav-part-only{ display:none !important; }
body.mode-pro .mnav-pro-only{ display:block; }
.mnav-logo{ display:none !important; }

/* ═══════════════════════════════════════════════════════════════
   HEADER ÉPURÉ — fond bleu PrivTeint plein #163B54, SEUL le Devis en or
   Demande Mathys : « ne pas perdre le visiteur dans le header ; que le
   devis en or, le reste en bleu privteint (#163B54) ».
   Préfixe body.pt2-site (présent sur TOUTES les pages à ce header, blog
   compris) = spécificité (0,3+,1) qui bat blog.css l.199/201 (header blanc)
   → header bleu cohérent PARTOUT. Scopé aux liens de 1er niveau (> a).
   ═══════════════════════════════════════════════════════════════ */
/* Fond = liquid glass transparent (comme avant) ; on garde texte blanc + seul Devis or */
body.pt2-site .site-header.pt2{
  background:rgba(8,17,30,.38) !important;                  /* glass sombre translucide d'origine */
  -webkit-backdrop-filter:blur(24px) saturate(195%) brightness(1.04) !important;
  backdrop-filter:blur(24px) saturate(195%) brightness(1.04) !important;
  border:1px solid rgba(255,255,255,.15) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16), 0 8px 40px rgba(8,17,30,.28), 0 2px 8px rgba(8,17,30,.14) !important;
}
/* Au scroll / sur les articles (fond de page clair) : glass un peu plus dense pour garder le blanc lisible */
body.pt2-site .site-header.pt2.scrolled,
body.pt2-site.blog-article .site-header.pt2{
  background:rgba(8,17,30,.55) !important;
}
/* Séparateurs internes clairs (fond bleu constant, scrollé + article blog) */
body.pt2-site .site-header.pt2 .pt2-logo{ border-right-color:rgba(255,255,255,.16) !important; }
body.pt2-site .site-header.pt2 .pt2-t1{ border-bottom-color:rgba(255,255,255,.16) !important; }

/* Niveau 1 — utilitaires en blanc (Contact + icône tél NE SONT PLUS or) */
body.pt2-site .site-header.pt2 .pt2-util a{ color:rgba(255,255,255,.74) !important; }
body.pt2-site .site-header.pt2 .pt2-util a:hover{ color:#fff !important; }
body.pt2-site .site-header.pt2 .pt2-util .pt2-contact{ color:#fff !important; font-weight:700; }
body.pt2-site .site-header.pt2 .pt2-tel{ color:#fff !important; }
body.pt2-site .site-header.pt2 .pt2-tel svg{ stroke:#fff !important; }
body.pt2-site .site-header.pt2 .pt2-soc a{ color:rgba(255,255,255,.82) !important; border-color:rgba(255,255,255,.24) !important; }
body.pt2-site .site-header.pt2 .pt2-soc a:hover{ color:#163B54 !important; background:#fff !important; border-color:#fff !important; }

/* Toggle Particulier/Pro — actif en BLANC (plus d'or) ; le mode Pro garde son bleu */
body.pt2-site .site-header.pt2 .pt2-switch{ background:rgba(255,255,255,.12) !important; border-color:rgba(255,255,255,.22) !important; }
body.pt2-site .site-header.pt2 .pt2-switch button{ color:rgba(255,255,255,.72) !important; }
body.pt2-site .site-header.pt2 .pt2-switch button.on{ color:#163B54 !important; background:#fff !important; }
body.pt2-site.mode-pro .site-header.pt2 .pt2-switch button.on{ color:#fff !important; background:#2f6df0 !important; }

/* Niveau 2 — liens de nav de 1er niveau en blanc (> a = pas les méga-panneaux) */
body.pt2-site .site-header.pt2 .pt2-nav > a{ color:#fff !important; }
body.pt2-site .site-header.pt2 .nav-mega-trigger{ color:#fff !important; }
body.pt2-site .site-header.pt2 .pt2-nav > a:hover,
body.pt2-site .site-header.pt2 .pt2-nav > a.active,
body.pt2-site .site-header.pt2 .nav-mega-trigger:hover{ background:rgba(255,255,255,.13) !important; color:#fff !important; }
body.pt2-site .site-header.pt2 .nav-mega-trigger svg.chevron{ color:#fff !important; }

/* Badge « Nouveau / Pro » — pastille blanche discrète (plus d'or) */
body.pt2-site .site-header.pt2 .pt2-neuf{ color:#163B54 !important; background:#fff !important; }

/* Burger mobile en blanc */
body.pt2-site .site-header.pt2 .burger span{ background:#fff !important; }

/* ✦✦ Devis : discret par défaut (contour or, fond transparent),
   ne se remplit qu'au survol — repris de la barre assistant plutôt
   que le fond or plein d'origine (demande Mathys, 10/09). ✦✦ */
body.pt2-site .site-header.pt2 .header-devis{ background:rgba(255,255,255,.06) !important; color:var(--gold,#C9A84C) !important; border:1.5px solid rgba(201,168,76,.65) !important; }
body.pt2-site .site-header.pt2 .header-devis:hover{ background:var(--gold,#C9A84C) !important; color:#163B54 !important; border-color:var(--gold,#C9A84C) !important; }

/* ══ Bande « Nettoyage de vitres » dans le méga-menu « Nos solutions » ══
   Le nettoyage n'est pas un film : il a sa propre bande sous les 6 panneaux
   plutôt qu'un 7e panneau, pour rester distinct sans rétrécir les autres. */
.mega-extra{
  display:flex; align-items:center; gap:1.15rem;
  /* Plus de respiration EN HAUTEUR uniquement : le padding horizontal reste inchangé
     pour ne pas élargir la bande (elle occupe déjà toute la largeur du menu). */
  padding:1.35rem 1.4rem;
  /* Le .mega-menu n'a AUCUN fond (ce sont les images des panneaux qui le remplissent) :
     la bande doit donc être opaque, sinon la page se voit au travers et le texte devient illisible. */
  background:#0C1B2E;
  border-top:1px solid rgba(255,255,255,.14);
  color:#fff; text-decoration:none;
  transition:background .2s ease;
}
.mega-extra:hover{ background:#15294180; background:#152941; }
.mega-extra-img{
  flex:none; width:82px; height:62px; border-radius:8px;
  background-size:cover; background-position:center;
}
.mega-extra-txt{ flex:1; display:flex; flex-direction:column; gap:5px; min-width:0; }
.mega-extra-txt strong{
  display:flex; align-items:center; gap:.5rem;
  font-size:1.05rem; font-weight:700; color:#fff; letter-spacing:-.01em; line-height:1.2;
}
.mega-extra-txt small{
  font-size:.85rem; color:rgba(255,255,255,.78); line-height:1.4;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.mega-extra-go{ flex:none; color:var(--gold,#C9A84C); transition:transform .2s ease; }
.mega-extra:hover .mega-extra-go{ transform:translateX(4px); }
/* La bande est en flex, et ce bloc est le dernier du fichier : il l'emporterait sur les règles
   génériques `.pt2-pro-only{display:none}` / `{display:inline-flex}` plus haut. On redéfinit donc
   explicitement les deux états, sinon la bande Pro resterait visible en mode Particulier. */
.mega-extra.pt2-pro-only{ display:none; }
body.mode-pro .site-header.pt2 .mega-extra.pt2-part-only{ display:none; }
body.mode-pro .site-header.pt2 .mega-extra.pt2-pro-only{ display:flex; }
@media (max-width:700px){
  .mega-extra-txt small{ display:none; }
}

/* ══════════════════════════════════════════════════════════════════════
   ÉTUDE DE CAS — vidéo d'en-tête + blocs avant/après
   Utilisé par /nos-realisations/ et /film-miroir-sans-tain/.
   Mobile d'abord : tout s'empile sous 700 px, aucun élément à largeur fixe.
   ══════════════════════════════════════════════════════════════════════ */
.cs-wrap{ max-width:1040px; margin:0 auto; }

/* — En-tête vidéo — */
.cs-video-box{ position:relative; border-radius:16px; overflow:hidden; background:#0C1B2E;
  box-shadow:0 12px 38px rgba(12,27,46,.20); aspect-ratio:16/9; }
.cs-video-box video,
.cs-video-box .cs-video-fallback{ display:block; width:100%; height:100%; object-fit:cover; }
.cs-video-box .cs-video-fallback{ display:none; }
/* Respect du réglage système « animations réduites » : on montre l'image fixe. */
@media (prefers-reduced-motion: reduce){
  .cs-video-box video{ display:none; }
  .cs-video-box .cs-video-fallback{ display:block; }
}
.cs-tag{ position:absolute; left:14px; top:14px; z-index:2; font-size:11px; font-weight:800;
  letter-spacing:.12em; text-transform:uppercase; color:#0C1B2E; background:var(--gold,#C9A84C);
  padding:6px 13px; border-radius:999px; }
.cs-video-cap{ margin-top:.85rem; font-size:.88rem; line-height:1.55; color:var(--text-muted);
  text-align:center; }

/* — Chiffres clés — */
.cs-facts{ list-style:none; display:grid; grid-template-columns:repeat(4,1fr); gap:.8rem;
  margin:1.8rem 0 0; padding:0; }
.cs-fact{ display:flex; flex-direction:column; align-items:center; gap:.2rem; text-align:center;
  padding:.95rem .8rem; border:1px solid rgba(12,27,46,.12); border-radius:12px; background:#fff; }
.cs-fact strong{ font-family:var(--font-head); font-size:1.35rem; font-weight:800; color:#0C1B2E;
  letter-spacing:-.02em; line-height:1.15; }
.cs-fact span{ font-size:.78rem; color:var(--text-muted); line-height:1.35; }

/* — Paires avant / après — */
.cs-pair{ display:grid; grid-template-columns:1fr 1fr; gap:1.6rem; margin-top:2.2rem; }
.cs-pair figure{ margin:0; min-width:0; }
.cs-shot{ position:relative; border-radius:12px; overflow:hidden; background:#0C1B2E;
  box-shadow:0 2px 14px rgba(12,27,46,.10); }
.cs-shot img{ display:block; width:100%; height:auto; }
.cs-shot--land img{ aspect-ratio:16/9; object-fit:cover; }
.cs-shot--port img{ aspect-ratio:3/4; object-fit:cover; }
.cs-lab{ position:absolute; top:12px; left:12px; z-index:2; font-size:11px; font-weight:800;
  letter-spacing:.12em; text-transform:uppercase; color:#fff; background:rgba(0,0,0,.5);
  padding:6px 13px; border-radius:999px; -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); }
.cs-lab--after{ background:var(--gold,#C9A84C); color:#0C1B2E; }
.cs-cap{ margin-top:.75rem; font-size:.88rem; line-height:1.55; color:var(--text-muted); }
.cs-cap strong{ color:var(--navy,#0C1B2E); }

/* — Photo pleine largeur (le cliché « pendant la pose ») — */
.cs-hero{ margin-top:2.2rem; }
.cs-hero .cs-shot img{ aspect-ratio:16/9; object-fit:cover; }

/* — Encadré d'explication technique — */
.cs-note{ margin-top:2rem; padding:1.2rem 1.4rem; border-left:3px solid var(--gold,#C9A84C);
  background:rgba(201,168,76,.08); border-radius:0 10px 10px 0; }
.cs-note p{ margin:0; font-size:.92rem; line-height:1.65; color:var(--text); }
.cs-note p + p{ margin-top:.6rem; }

/* — Bandeau d'identification du chantier — */
.cs-meta{ text-align:center; margin-top:1.8rem; }
.cs-meta h3{ font-size:1.1rem; font-weight:600; color:var(--navy,#0C1B2E); margin:.5rem 0 .35rem; }
.cs-meta p{ font-size:.92rem; color:var(--text-muted); max-width:620px; margin:0 auto .4rem; }
.cs-meta .cs-place{ font-size:.8rem; color:var(--text-muted); }

@media (max-width:700px){
  .cs-pair{ grid-template-columns:1fr; gap:1.5rem; margin-top:1.8rem; }
  .cs-facts{ grid-template-columns:1fr 1fr; }
  .cs-video-box{ border-radius:12px; }
  .cs-shot--land img{ aspect-ratio:4/3; }
}
@media (max-width:420px){
  .cs-facts{ grid-template-columns:1fr; }
}

/* ═══════════════════════════════════════════════════════════════
   PAGES SOLUTION — bandeau « en bref » et confort de lecture
   (12/09/2026)

   Le hero ne porte plus que l'image, le titre et l'action : le
   paragraphe et les chips en sont DESCENDUS ici. Rien n'a été
   supprimé, seulement déplacé — l'indexation retrouve les mêmes
   mots quelques centaines de pixels plus bas, et le visiteur voit
   d'abord la photo.
   ═══════════════════════════════════════════════════════════════ */
.ph-intro{ padding-block: clamp(2.25rem, 5vw, 3.75rem); }
.ph-lede{
  font-size: clamp(1.06rem, 2.1vw, 1.3rem);
  line-height: 1.75;
  max-width: 62ch;              /* au-delà, l'œil perd sa ligne */
  margin: 0 0 1.6rem;
  color: var(--text);
}
.ph-lede strong{ color: var(--navy); font-weight: 700; }

/* Les chips reprennent le vocabulaire du hero, en version claire. */
.ph-specs{ display: flex; flex-wrap: wrap; gap: 8px; }
.ph-specs span{
  font-family: var(--font-head); font-size: .78rem; font-weight: 600;
  line-height: 1; padding: 8px 14px; border-radius: 999px;
  background: var(--bg-alt); border: 1px solid var(--border);
  color: var(--text-muted); white-space: nowrap;
}
@media (max-width: 700px){
  /* Une seule ligne qui se balaie au doigt : tout reste rendu et
     indexable, mais l'écran n'est plus mangé par quatre lignes. */
  .ph-specs{
    flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
    margin-inline: -1rem; padding-inline: 1rem;
  }
  .ph-specs::-webkit-scrollbar{ display: none; }
  .ph-specs span{ flex: 0 0 auto; }
}

/* ── Respiration du corps de page ──────────────────────────────
   « Plus long, plus aéré » : on donne de l'air entre les sections
   et dans les paragraphes. Scopé aux sections QUI SUIVENT le
   bandeau, donc aux seules pages solution — le reste du site
   garde son rythme actuel. */
.ph-intro ~ .section{ padding-block: clamp(3rem, 7vw, 5.25rem); }
.ph-intro ~ .section p{ line-height: 1.8; }
.ph-intro ~ .section li{ line-height: 1.75; }

/* ═══════════════════════════════════════════════════════════════
   RÉASSURANCE — garanties et déroulé (12/09/2026)

   Ces faits figuraient déjà dans les CGV : garantie de pose d'un an,
   garantie fabricant de 5 à 15 ans, assurance RC professionnelle.
   Personne ne lit des CGV avant de demander un devis — ils remontent
   donc sur la page, à l'endroit où la question se pose.
   ═══════════════════════════════════════════════════════════════ */
.gar-grid{
  display: grid; gap: clamp(1rem, 2.5vw, 1.75rem);
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.gar-item{
  background: var(--bg-alt); border: 1px solid var(--border);
  border-radius: var(--radius-lg, 18px);
  padding: clamp(1.25rem, 2.5vw, 1.75rem);
}
.gar-ico{
  display: grid; place-items: center; width: 42px; height: 42px;
  border-radius: 12px; margin-bottom: .9rem;
  background: rgba(201,168,76,.12); color: var(--gold, #C9A84C);
}
.gar-ico svg{ width: 22px; height: 22px; }
.gar-item h3{
  font-family: var(--font-head); font-size: 1.02rem; font-weight: 700;
  color: var(--navy); margin: 0 0 .5rem; line-height: 1.3;
}
.gar-item p{ font-size: .92rem; line-height: 1.65; color: var(--text-muted); margin: 0; }
.gar-item strong{ color: var(--navy); font-weight: 600; }
@media (max-width: 980px){ .gar-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px){ .gar-grid{ grid-template-columns: 1fr; } }

/* ── Le déroulé : un filet relie les étapes, pour qu'on lise une
      suite et non quatre cartes indépendantes. ── */
.der-liste{ list-style: none; margin: 0; padding: 0; max-width: 760px; margin-inline: auto; }
.der-etape{
  display: grid; grid-template-columns: auto 1fr; gap: 1.25rem;
  position: relative; padding-bottom: clamp(1.5rem, 3vw, 2.25rem);
}
.der-etape:last-child{ padding-bottom: 0; }
.der-etape::before{
  content: ''; position: absolute; left: 19px; top: 44px; bottom: 0;
  width: 2px; background: linear-gradient(180deg, rgba(201,168,76,.45), rgba(201,168,76,.08));
}
.der-etape:last-child::before{ display: none; }
.der-num{
  grid-row: 1 / -1; display: grid; place-items: center;
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--navy); color: var(--gold, #C9A84C);
  font-family: var(--font-head); font-weight: 800; font-size: 1rem;
  position: relative; z-index: 1;
}
.der-etape h3{
  font-family: var(--font-head); font-size: 1.08rem; font-weight: 700;
  color: var(--navy); margin: .5rem 0 .45rem; line-height: 1.3;
}
.der-etape p{ font-size: .96rem; line-height: 1.7; color: var(--text-muted); margin: 0; }
.der-etape strong{ color: var(--navy); font-weight: 600; }

/* Lien vers la fiche Google, sous le widget d'avis. Le chargeur
   Trustindex vide son conteneur avant d'écrire : ce lien est donc
   placé À L'EXTÉRIEUR pour survivre, et rester la porte de sortie si
   le widget est bloqué (bloqueur de publicité, domaine non autorisé). */
.avis-lien{ text-align: center; margin: 1.5rem 0 0; }
.avis-lien a{
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: .92rem; font-weight: 600; color: var(--navy);
  text-decoration: none; border-bottom: 1px solid rgba(12,27,46,.22);
  padding-bottom: 2px; transition: color .18s, border-color .18s;
}
.avis-lien a:hover{ color: var(--gold-dark, #a5842f); border-color: var(--gold, #C9A84C); }

/* Mention « facultatif » dans un libellé de formulaire : présente mais
   discrète — elle doit rassurer sans concurrencer le libellé. */
.lbl-opt{ font-weight: 400; font-size: .82em; color: var(--text-muted); }

/* Réassurance sous l'appel final : les trois objections qui restent
   au moment de donner son numéro — l'engagement, le délai, et ce
   qu'on fait des coordonnées. Le formulaire les portait déjà ; elles
   manquaient là où le visiteur décide de s'y rendre. */
.cta-rassure{
  margin: 1.1rem auto 0; max-width: 52ch;
  font-size: .86rem; line-height: 1.6;
  color: rgba(255,255,255,.68); text-align: center;
}

/* ═══════════════════════════════════════════════════════════════
   ESTIMATEUR DE BUDGET (12/09/2026)
   Quatre pages solution demandaient les coordonnées sans rien
   donner. Cet encart répond d'abord — et applique le minimum
   d'intervention, sans quoi il annoncerait 45 € là où le devis
   réel en ferait trois fois plus.
   ═══════════════════════════════════════════════════════════════ */
.est-carte{
  max-width: 680px; margin-inline: auto;
  background: var(--bg-alt); border: 1px solid var(--border);
  border-radius: var(--radius-lg, 18px);
  padding: clamp(1.4rem, 3.5vw, 2.25rem);
}
.est-champ{ margin-bottom: 1.5rem; }
.est-label{
  display: block; font-family: var(--font-head); font-weight: 700;
  font-size: .95rem; color: var(--navy); margin-bottom: .75rem;
}
.est-types{ display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: .6rem; }
.est-type{
  display: flex; flex-direction: column; gap: .15rem; text-align: left;
  padding: .8rem .9rem; border-radius: 12px; cursor: pointer;
  background: var(--bg); border: 1.5px solid var(--border);
  font-family: inherit; transition: border-color .18s, background .18s;
}
.est-type strong{ font-size: .92rem; font-weight: 700; color: var(--navy); }
.est-type small{ font-size: .78rem; color: var(--text-muted); }
.est-type:hover{ border-color: rgba(201,168,76,.55); }
.est-type.est-on{ border-color: var(--gold, #C9A84C); background: rgba(201,168,76,.08); }

.est-nb{ display: inline-flex; align-items: center; gap: .25rem; }
.est-pas{
  width: 44px; height: 44px; border-radius: 12px; cursor: pointer;
  background: var(--bg); border: 1.5px solid var(--border);
  font-size: 1.3rem; line-height: 1; color: var(--navy);
  font-family: inherit; transition: border-color .18s;
}
.est-pas:hover{ border-color: var(--gold, #C9A84C); }
.est-nb-val{
  min-width: 56px; text-align: center;
  font-family: var(--font-head); font-weight: 800; font-size: 1.3rem;
  color: var(--navy); font-variant-numeric: tabular-nums;
}

.est-sortie{
  text-align: center; padding: 1.4rem 1rem; margin-bottom: 1.4rem;
  background: var(--navy); border-radius: 14px;
}
.est-surface{ font-size: .85rem; color: rgba(255,255,255,.62); margin-bottom: .3rem; }
.est-prix{
  font-family: var(--font-head); font-weight: 800;
  font-size: clamp(1.8rem, 5vw, 2.5rem); line-height: 1.1;
  color: var(--gold, #C9A84C); font-variant-numeric: tabular-nums;
}
.est-note{ font-size: .82rem; line-height: 1.55; color: rgba(255,255,255,.62); margin-top: .6rem; }
.est-note--mini{ color: rgba(255,255,255,.82); }

.est-cta{ display: flex; justify-content: center; width: 100%; }
.est-mention{
  margin: .9rem 0 0; font-size: .8rem; line-height: 1.55;
  color: var(--text-muted); text-align: center;
}
@media (max-width: 520px){
  .est-types{ grid-template-columns: 1fr; }
}

/* Sous 16 px, iPhone zoome la page au toucher du menu « Surface » des fiches film. */
@media (max-width: 900px){
  .surface-pick select{ font-size: 16px; }
}

/* ══════════ BANQUE D'ARTICLES (/ressources/ + « Vos questions ») ══════════
   Généré par .claude/tools/banque-articles.py. Téléphone d'abord :
   une carte = une ligne (vignette 96 px + titre), sans extrait — l'ancienne
   page empilait 73 cartes complètes, soit plus de 30 000 px à faire défiler.
   À partir de 700 px : cartes verticales avec image et extrait. */
.bq-card[hidden], .bq-plus-lus[hidden], .bq-vide[hidden]{ display:none !important; }
.bq-grille{ display:grid; grid-template-columns:minmax(0,1fr); gap:10px; }
.bq-card{ min-width:0; }
.bq-lien{
  display:grid; grid-template-columns:96px minmax(0,1fr); gap:14px; align-items:center;
  padding:10px; border-radius:16px; background:#fff; color:var(--navy,#0C1B2E);
  border:1px solid rgba(12,27,46,.08); box-shadow:0 1px 3px rgba(12,27,46,.05);
  text-decoration:none; transition:box-shadow .18s, transform .18s, border-color .18s;
}
.bq-lien:hover{ box-shadow:0 12px 30px rgba(12,27,46,.12); border-color:rgba(201,168,76,.45); }
.bq-lien:focus-visible{ outline:2px solid var(--gold,#C9A84C); outline-offset:3px; }
.bq-media{ display:block; aspect-ratio:1; border-radius:12px; overflow:hidden; background:#EEE9DF; }
.bq-media img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .4s ease; }
.bq-lien:hover .bq-media img{ transform:scale(1.05); }
.bq-corps{ display:flex; flex-direction:column; gap:4px; min-width:0; }
.bq-meta{ display:flex; flex-wrap:wrap; gap:0 .5rem; font-size:.72rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:#96742a; }
.bq-date{ display:none; color:var(--text-muted,#565649); font-weight:600; }
.bq-titre{ margin:0; font-family:var(--font-head,inherit); font-weight:800; font-size:1rem; line-height:1.3; color:var(--navy,#0C1B2E); letter-spacing:-.005em; }
.bq-extrait{ display:none; }

/* Barre de recherche + sujets, collée sous l'en-tête */
.bq{ padding-top:1.5rem; }
.bq-outils{
  position:sticky; z-index:6; top:calc(var(--header-h,76px) + var(--header-top,14px) + 6px);
  margin:0 -8px 1.5rem; padding:10px 8px; border-radius:18px;
  background:rgba(247,245,241,.86); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
}
.bq-cherche{
  display:flex; align-items:center; gap:10px; padding:0 14px; height:48px;
  background:#fff; border:1.5px solid rgba(12,27,46,.14); border-radius:999px; color:#5b6572;
}
.bq-cherche:focus-within{ border-color:var(--gold,#C9A84C); box-shadow:0 0 0 3px rgba(201,168,76,.18); }
.bq-cherche input{ flex:1; min-width:0; border:0; outline:0; background:none; font:inherit; font-size:16px; color:var(--navy,#0C1B2E); }
.bq-puces{
  display:flex; gap:8px; margin-top:10px; overflow-x:auto; scrollbar-width:none;
  -webkit-mask:linear-gradient(90deg,#000 88%,transparent); mask:linear-gradient(90deg,#000 88%,transparent);
  padding-right:24px;
}
.bq-puces::-webkit-scrollbar{ display:none; }
.bq-puce{
  flex-shrink:0; display:inline-flex; align-items:center; gap:6px; min-height:40px; padding:0 14px;
  border-radius:999px; border:1px solid rgba(12,27,46,.12); background:#fff; color:var(--navy,#0C1B2E);
  font:700 .85rem/1 var(--font-head,inherit); cursor:pointer; transition:background .18s, border-color .18s;
}
.bq-puce span{ font-weight:600; font-size:.75rem; color:#5b6572; }
.bq-puce[aria-pressed="true"]{ background:var(--navy,#0C1B2E); border-color:var(--navy,#0C1B2E); color:#fff; }
.bq-puce[aria-pressed="true"] span{ color:var(--gold-light,#d9bc72); }
.bq-puce:focus-visible{ outline:2px solid var(--gold,#C9A84C); outline-offset:2px; }

.bq-h2{ font-family:var(--font-head,inherit); font-weight:800; font-size:1.25rem; color:var(--navy,#0C1B2E); margin:0 0 .9rem; }
.bq-plus-lus{ margin-bottom:2.2rem; }
.bq-tete{ display:flex; align-items:baseline; justify-content:space-between; gap:1rem; }
.bq-tete--centre{ display:block; text-align:center; margin-bottom:1.6rem; }
.bq-compte{ margin:0; font-size:.85rem; color:var(--text-muted,#565649); font-weight:600; }
.bq-vide{ text-align:center; padding:2.5rem 1rem; }
.bq-vide p{ margin:0 0 1.2rem; }
.bq-tous{ text-align:center; margin:1.4rem 0 0; }
.bq-tous a{ display:inline-flex; gap:.4rem; padding:.7rem 1.2rem; border-radius:999px; border:1px solid rgba(12,27,46,.14);
  font-weight:700; color:var(--navy,#0C1B2E); text-decoration:none; transition:border-color .18s, color .18s; }
.bq-tous a:hover{ border-color:#b08838; color:#96742a; }

/* À la une (les plus lus) : défilement horizontal au doigt sur téléphone */
.bq-grille--une{ display:flex; gap:12px; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; margin:0 -16px; padding:0 16px 4px; }
.bq-grille--une::-webkit-scrollbar{ display:none; }
.bq-grille--une .bq-card{ flex:0 0 78%; scroll-snap-align:start; }
.bq-card--une .bq-lien{ grid-template-columns:minmax(0,1fr); align-items:start; padding:0; overflow:hidden; height:100%; }
.bq-card--une .bq-media{ aspect-ratio:16/10; border-radius:0; }
.bq-card--une .bq-corps{ padding:12px 14px 16px; }

@media (min-width:700px){
  .bq-grille{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; }
  .bq-lien{ grid-template-columns:minmax(0,1fr); align-items:start; padding:0; overflow:hidden; height:100%; border-radius:20px; }
  .bq-media{ aspect-ratio:16/10; border-radius:0; }
  .bq-corps{ padding:16px 18px 20px; gap:6px; }
  .bq-titre{ font-size:1.08rem; }
  .bq-extrait{ display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; font-size:.9rem; line-height:1.55; color:var(--text-muted,#565649); }
  .bq-date{ display:inline; }
  .bq-date::before{ content:'· '; }
  .bq-grille--une{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); overflow:visible; margin:0; padding:0; }
  .bq-grille--une .bq-card{ flex:none; }
  .bq-outils{ display:flex; align-items:center; gap:14px; }
  .bq-cherche{ flex:0 0 300px; }
  .bq-puces{ margin-top:0; flex:1; min-width:0; }
  .bq-h2{ font-size:1.45rem; }
}
@media (min-width:1000px){
  .bq-grille, .bq-grille--une{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .bq-grille--une{ grid-template-columns:repeat(4,minmax(0,1fr)); }
  .bq-grille--une .bq-extrait{ display:none; }
}
/* Les 3 articles d'une page solution : en ligne sur ordinateur */
@media (min-width:1000px){ .bq-grille--3{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (prefers-reduced-motion:reduce){ .bq-lien, .bq-media img{ transition:none; } }
/* Téléphone : seule la ligne des sujets reste collée (la recherche + les
   sujets prenaient 115 px sous l'en-tête, un quart de l'écran). */
@media (max-width:699px){
  .bq-outils{ display:contents; }
  .bq-cherche{ margin-bottom:10px; }
  .bq-puces{
    position:sticky; z-index:6; top:calc(var(--header-h,76px) + var(--header-top,14px) + 4px);
    margin:0 -16px 1.4rem; padding:8px 40px 8px 16px;
    background:rgba(247,245,241,.9); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  }
  /* En-tête de page compact : le texte d'intro reste lisible par les moteurs, pas à l'écran */
  .page-hero--compact{ padding-bottom:1.6rem !important; }
  .page-hero--compact h1 + p{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }
}
/* Ordinateur : tous les sujets visibles d'un coup (pas de défilement caché) */
@media (min-width:700px){
  .bq-puces{ flex-wrap:wrap; overflow:visible; -webkit-mask:none; mask:none; padding-right:0; }
  .bq-puce{ min-height:36px; }
}
@media (min-width:1000px){ .bq-grille--une .bq-date{ display:none; } }
/* Les <p> ont une largeur maximale (lecture) : on les centre aussi en bloc */
.bq-tete--centre p, .bq-tous, .bq-vide p{ margin-left:auto; margin-right:auto; }

/* Le lien « Tous les articles … → » se coupait en colonne étroite (inline-flex) */
.bq-tous a{ display: inline-block; text-align: center; max-width: 100%; }