/* ==========================================================================
   Ordi'sanat — feuille de style publique (Particulier / Pro)
   Desktop d'abord ; points de rupture à 900px puis 620px.
   ========================================================================== */

/* ---------- Base --------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--offwhite);
  color: var(--ink);
  font: 400 var(--fs-body)/1.6 var(--font-mono);
  -webkit-font-smoothing: antialiased;
}
body[data-univers="pro"] { background: var(--white); }

h1, h2, h3 { font-family: var(--font-title); font-weight: 700; margin: 0 0 var(--s3); }
h1 { font-size: var(--fs-h1); line-height: 1.05; }
h2 { font-size: var(--fs-h2); line-height: 1.1; }
h3 { font-size: var(--fs-h3); line-height: 1.15; }
p { margin: 0 0 var(--s3); }
a { color: var(--indigo); text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 2px solid var(--indigo); outline-offset: 2px; }
img { max-width: 100%; display: block; }
small, .meta { font-size: var(--fs-small); color: var(--text-2); }

.tag {
  font: 700 var(--fs-tag)/1 var(--font-mono);
  letter-spacing: .09em; text-transform: uppercase;
  color: var(--text-2); display: inline-block; margin-bottom: var(--s3);
}
.rule { border: 0; border-top: 1px solid var(--rule); margin: 0; }
.wrap { max-width: 1180px; margin: 0 auto; padding: 0 var(--s6); }
.section { padding: var(--s8) 0; border-top: 1px solid var(--rule); }
.sr-only {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* ---------- Boutons ------------------------------------------------------ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  font: 700 var(--fs-tag)/1 var(--font-mono); letter-spacing: .09em; text-transform: uppercase;
  padding: 11px 16px; border-radius: var(--r-btn); border: 1.5px solid transparent;
  cursor: pointer; text-decoration: none; transition: background .18s, color .18s, border-color .18s;
  min-height: 44px;
}
.btn:hover { text-decoration: none; }
.btn-primary { background: var(--indigo); color: #fff; }
.btn-primary:hover { background: #4a3591; }
.btn-ink { background: var(--ink); color: #fff; }
.btn-ink:hover { background: #23293a; }
.btn-outline { background: rgba(250,249,246,.9); color: var(--ink); border-color: var(--rule-strong); }
.btn-outline:hover { border-color: var(--ink); }
.btn[disabled], .btn:disabled { opacity: .4; cursor: not-allowed; }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--s3); }

/* ---------- Logo & icônes pixel ----------------------------------------- */
.logo-mark {
  display: inline-block; width: 20px; height: 20px; vertical-align: -4px;
  background: currentColor;
  -webkit-mask: url(/images/logo-symbole.svg) center / contain no-repeat;
  mask: url(/images/logo-symbole.svg) center / contain no-repeat;
}
.logo-mark--grad { background: linear-gradient(135deg, #5740A8, #A667B3, #D8A1DB); }

[data-pxl] { display: inline-flex; line-height: 0; color: var(--indigo); }
body[data-univers="pro"] [data-pxl] { color: var(--ink); }
.answer [data-pxl] { margin-bottom: var(--s1); }
.service-row [data-pxl], .card [data-pxl] { color: var(--indigo); }

/* ---------- Nav ---------------------------------------------------------- */
.nav {
  display: flex; align-items: center; gap: var(--s3);
  min-height: var(--nav-h); padding: 9px 14px;
  border-bottom: 1px solid var(--rule);
  background: var(--offwhite); position: sticky; top: 0; z-index: 40;
}
body[data-univers="pro"] .nav { background: var(--white); }
.nav-logo {
  font: 700 17px/1 var(--font-title); color: var(--indigo); letter-spacing: .01em;
  display: inline-flex; align-items: center; gap: 7px;
}
.nav[data-univers="pro"] .nav-logo { color: var(--ink); }
.badge-univers {
  font: 700 7.5px/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase;
  background: var(--indigo); color: #fff; padding: 3px 6px; border-radius: var(--r-badge);
}
.nav[data-univers="pro"] .badge-univers { background: var(--ink); }
.nav-menu { margin-left: auto; display: flex; align-items: center; gap: var(--s4); }
.nav-link { color: var(--ink); font-size: var(--fs-small); }
.nav-link.is-active { color: var(--indigo); font-weight: 700; }
.nav[data-univers="pro"] .nav-link.is-active { color: var(--ink); font-weight: 700; }
.nav .btn-cta { background: var(--indigo); color: #fff; padding: 8px 12px; min-height: 34px; }
.nav[data-univers="pro"] .btn-cta { background: var(--ink); }
.nav-sep { width: 1px; height: 20px; background: var(--rule); display: inline-block; }
.nav-swap { font-size: var(--fs-small); color: var(--text-2); }
.nav-burger {
  display: none; margin-left: auto; background: none; border: 0;
  font-size: 22px; line-height: 1; cursor: pointer; color: var(--ink);
  min-width: 44px; min-height: 44px;
}

/* ---------- Splash ------------------------------------------------------- */
.splash { min-height: 100vh; display: flex; position: relative; background: var(--offwhite); }
.splash-surtitre {
  background: var(--reserve); width: max-content; margin: 0 auto; padding: 6px 10px; border-radius: 2px;
  position: absolute; top: var(--s6); left: 0; right: 0; text-align: center;
  font: 400 10px/1 var(--font-mono); letter-spacing: .16em; color: rgba(0,0,0,.55);
  text-transform: uppercase; z-index: 3;
}
/* Plein écran : le champ occupe tout le cadre et s'y ajuste. C'est lui
   l'élément immersif de la page, pas une vignette au centre. */
.splash-field {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden; pointer-events: none; z-index: 1;   /* derrière les libellés */
}
.splash-half {
  flex: 1; position: relative; z-index: 2; display: flex; align-items: flex-end;
  padding: var(--s8) var(--s7) var(--s10); text-decoration: none; color: var(--ink);
  transition: background .2s ease;
}
/* Réserve opaque sous chaque bloc de texte : le champ passe derrière, plein écran,
   sans rendre les libellés illisibles (règle du handoff). */
.splash-half > span {
  display: block; background: var(--reserve);
  padding: var(--s4) var(--s5); border-radius: var(--r-card);
}
.splash-title, .splash-sub { display: block; }
.splash-half:hover, .splash-half:focus-visible { text-decoration: none; }
.splash-half + .splash-half { border-left: 1px solid rgba(0,0,0,.18); }
.splash-half--client:hover { background: rgba(87,64,168,.06); }
.splash-half--pro:hover { background: rgba(17,20,27,.05); }
.splash-half--pro { justify-content: flex-end; text-align: right; }
.splash-title { font: 700 var(--fs-h1)/1 var(--font-title); margin: 0 0 var(--s2); }
.splash-half--client .splash-title { color: var(--indigo); }
.splash-half--pro .splash-title { color: var(--ink); }
.splash-sub { font-size: var(--fs-small); color: var(--text-2); margin: 0; }
/* max-width : sans plafond, width:max-content garde les liens sur une ligne et
   fait déborder la page sous 340px. Avec, le bloc se replie sur deux lignes. */
.splash-legal {
  background: var(--reserve); width: max-content; max-width: 92vw; margin: 0 auto;
  padding: 4px 10px; border-radius: 2px;
  position: absolute; bottom: var(--s3); left: 0; right: 0; text-align: center; z-index: 3;
  font-size: 11px;
}
.splash-legal a { color: var(--text-2); margin: 0 var(--s2); }
.splash-zone {
  background: var(--reserve); width: max-content; max-width: 92vw; margin: 0 auto; padding: 6px 10px; border-radius: 2px;
  position: absolute; bottom: var(--s7); left: 0; right: 0; text-align: center; z-index: 3;
  font-size: var(--fs-small); color: var(--text-2);
}

/* ---------- Hero --------------------------------------------------------- */
.hero { position: relative; height: 520px; overflow: hidden; border-bottom: 1px solid var(--rule); }
/* Le champ occupe le cadre du hero et se recalcule au redimensionnement :
   pas de transform, donc pas de déformation ni de bord coupé. */
.hero-field {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  overflow: hidden; pointer-events: none;
}
.hero-inner {
  position: relative; height: 100%; max-width: 1180px; margin: 0 auto; padding: var(--s7) var(--s6);
  display: flex; flex-direction: column; justify-content: space-between;
}
.reserve { background: var(--reserve); padding: 9px 11px; border-radius: var(--r-card); }
.hero-block { max-width: 620px; }
.hero-h1 { font-size: var(--fs-hero); line-height: 1.02; margin: 0; max-width: 12ch; }
.hero--pro .hero-h1 { max-width: 16ch; }
.hero-zone {
  display: inline-block; margin-top: var(--s3); font-size: var(--fs-small);
  background: var(--reserve); padding: 6px 9px; border-radius: var(--r-badge);
}
.hero-bottom { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s5); }
.hero-stats { display: flex; gap: var(--s6); text-align: right; background: var(--reserve); padding: 10px 12px; border-radius: var(--r-card); }
.hero-stat b { display: block; font: 700 28px/1 var(--font-title); color: var(--indigo); }
.hero--pro .hero-stat b { color: var(--ink); }
.hero-stat span { font-size: 11px; color: var(--text-2); }

/* ---------- Notre démarche (réf. 4a) ------------------------------------ */
.demarche { position: relative; overflow: hidden; }
.demarche-field {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  overflow: hidden; pointer-events: none; user-select: none; opacity: .45; z-index: 1;
}
/* Grain large obtenu par mise à l'échelle, comme le hero : le nombre de
   caractères reste celui du préréglage. */
.demarche-field pre { transform: scale(1.7); transform-origin: center; }
.demarche-inner { position: relative; z-index: 2; }
/* Réserve opaque obligatoire : le manifeste est posé sur le champ ASCII. */
.demarche-bloc { max-width: 62ch; padding: var(--s5) var(--s6); }
.demarche-bloc h2 { max-width: 20ch; }
.demarche-bloc > p:last-of-type { margin-bottom: 0; }

.preuves { display: flex; flex-wrap: wrap; gap: var(--s8); margin-top: var(--s5); }
.preuve b { display: block; font: 700 28px/1 var(--font-title); color: var(--indigo); }
.preuve span { display: block; margin-top: var(--s2); font-size: 11px; color: var(--text-2); }

/* ---------- Six engagements (réf. 4b) ----------------------------------- */
/* Une ligne = un engagement. Pas de carte : la lecture reste une liste. */
.engagements { list-style: none; margin: 0; padding: 0; }
.engagement {
  display: grid; grid-template-columns: 40px 1fr 26px; align-items: start; gap: var(--s4);
  border-top: 1px solid var(--rule); padding: var(--s5) 0;
}
.engagement-num {
  font: 400 var(--fs-small)/1.3 var(--font-mono); color: var(--text-2); padding-top: 3px;
}
.engagement h3 { margin-bottom: var(--s2); }
.engagement p { margin-bottom: 0; max-width: 74ch; }
.engagement [data-pxl] { justify-self: end; }

/* ---------- Le cycle d'une machine (réf. 4c) ---------------------------- */
.cycle {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s6);
}
.cycle-etape {
  position: relative;
  border: 1px solid var(--rule); border-radius: var(--r-card); padding: var(--s4);
}
.cycle-etape:last-child { border-color: var(--indigo); }
.cycle-etape h3 { font-size: var(--fs-body); margin-bottom: var(--s2); }
.cycle-etape p { margin-bottom: 0; }
/* Flèche entre deux étapes, dessinée dans la gouttière de la grille. */
.cycle-etape + .cycle-etape::before {
  content: "→"; position: absolute; left: calc(var(--s6) / -2); top: 50%;
  transform: translate(-50%, -50%); color: var(--text-2); font-size: var(--fs-small);
}

/* ---------- Grilles & cartes -------------------------------------------- */
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s4); }
.card {
  border: 1px solid var(--rule); border-radius: var(--r-card); padding: var(--s4);
  background: var(--white); color: var(--ink); display: block; text-decoration: none;
}
a.card:hover { border-color: var(--indigo); text-decoration: none; }
.card-featured { border-color: var(--indigo); }
.card h3 { margin-bottom: var(--s1); }
.card p { font-size: var(--fs-small); color: var(--text-2); margin: 0; }
.card-visual {
  margin-bottom: var(--s3); overflow: hidden; height: 56px;
  display: flex; align-items: center; justify-content: center;
}
.card-price { display: block; margin-top: var(--s3); font-weight: 700; }

/* Aiguillage des devis */
.intents { margin-top: var(--s6); }
.intent { padding: var(--s5); }
.intent h3 { margin: var(--s3) 0 var(--s1); }
.intent-meta { display: block; margin-top: var(--s3); font-size: 12px; color: var(--text-2); }
a.intent:hover { background: rgba(87,64,168,.04); }

.stat-band { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--rule); border-radius: var(--r-card); }
.stat-band > div { padding: var(--s5); }
.stat-band > div + div { border-left: 1px solid var(--rule); }
.stat-band b { display: block; font: 700 32px/1 var(--font-title); }
.stat-band span { font-size: var(--fs-small); color: var(--text-2); }

.refs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.ref-slot {
  border: 1px dashed var(--rule-strong); border-radius: var(--r-card); height: 68px;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; color: var(--text-2);
}

/* ---------- Liste de services (page Services, réf. 1t) ------------------- */
.service-row {
  display: flex; align-items: center; gap: var(--s5); padding: var(--s5) 0;
  border-top: 1px solid var(--rule); color: var(--ink); text-decoration: none;
}
.service-row:hover { text-decoration: none; }
.service-row:hover h3 { color: var(--indigo); }
.service-visual {
  width: 140px; height: 62px; flex: none; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.service-row .chevron { margin-left: auto; font-size: 20px; color: var(--indigo); }

/* ---------- Réalisations : cas racontés (réf. 4d) ----------------------- */
/* Titre à gauche, filtres poussés à droite sur la même ligne de base. */
.page-tete {
  display: flex; align-items: baseline; gap: var(--s5);
  flex-wrap: wrap; margin-bottom: var(--s6);
}
.page-tete h1 { margin-bottom: 0; max-width: 22ch; }
.page-tete .filters { margin-left: auto; margin-bottom: 0; }

.cas {
  display: grid; grid-template-columns: 220px 1fr; gap: var(--s5);
  border-top: 1px solid var(--rule); padding: var(--s6) 0;
}
.cas[hidden] { display: none; }
.cas-photo { margin: 0; }
.cas-photo img {
  width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover;
  border: 1px solid var(--rule); border-radius: var(--r-card);
}
.cas-photo--vide {
  aspect-ratio: 4 / 3; display: flex; align-items: center; justify-content: center;
  text-align: center; padding: var(--s3); background: var(--offwhite);
  border: 1px dashed var(--rule-strong); border-radius: var(--r-card);
  font-size: var(--fs-tag); color: var(--text-2); line-height: 1.6;
}
.cas-badges { display: flex; flex-wrap: wrap; gap: var(--s2); margin-bottom: var(--s3); }
.badge-cas {
  font: 700 var(--fs-tag)/1 var(--font-mono); letter-spacing: .09em; text-transform: uppercase;
  border: 1px solid var(--rule-strong); border-radius: var(--r-badge);
  padding: 4px 7px; color: var(--text-2);
}
.badge-cas--fort { border-color: var(--indigo); color: var(--indigo); }
.cas h3 { margin-bottom: var(--s2); }
.cas-texte > p { max-width: 62ch; }
.cas-faits { display: flex; flex-wrap: wrap; gap: var(--s7); margin: var(--s4) 0 0; }
.cas-faits dt {
  font: 400 var(--fs-tag)/1 var(--font-mono); letter-spacing: .08em;
  text-transform: uppercase; color: var(--text-2);
}
.cas-faits dd { margin: var(--s2) 0 0; font-size: var(--fs-small); font-weight: 700; }
.cas-faits dd.est-violet { color: var(--indigo); }

/* ---------- Polaroids (Réalisations, réf. 1u puis 4e) ------------------- */
/* La galerie passe en second rideau : elle illustre les cas, elle ne les remplace pas. */
.galerie-tete { display: flex; align-items: baseline; gap: var(--s4); margin-bottom: var(--s5); }
.galerie-tete h2 { margin-bottom: 0; }
.galerie-tete .meta { margin-left: auto; margin-bottom: 0; }
.filters { display: flex; flex-wrap: wrap; gap: var(--s3); margin-bottom: var(--s5); }
.filter {
  background: none; border: 1px solid var(--rule); border-radius: var(--r-btn);
  padding: 6px 12px; font: 400 var(--fs-small)/1 var(--font-mono); cursor: pointer; min-height: 34px;
}
.filter.is-active { border-color: var(--indigo); color: var(--indigo); font-weight: 700; }
.polaroids { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.polaroid {
  background: #fff; border: 1px solid var(--rule); padding: 5px 5px 0;
  box-shadow: var(--shadow-polaroid);
}
/* .polaroid--more force display:flex : sans cette règle, [hidden] ne masque rien. */
.polaroid[hidden] { display: none; }
.polaroid:nth-child(odd) { transform: rotate(-1.2deg); }
.polaroid:nth-child(even) { transform: rotate(1deg); }
/* height:auto neutralise l'attribut height du HTML, qui sinon l'emporte sur aspect-ratio. */
.polaroid img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.polaroid figcaption {
  font-family: var(--font-title); font-size: var(--fs-small);
  text-align: center; padding: var(--s2) 0;
}
.polaroid--more {
  border-style: dashed; display: flex; align-items: center; justify-content: center;
  min-height: 160px; font-family: var(--font-title); font-size: var(--fs-h2); color: var(--text-2);
  transform: none !important; box-shadow: none;
}

/* ---------- Avis (sous la grille Réalisations) -------------------------- */
.avis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.avis blockquote {
  margin: 0; border: 1px solid var(--rule); border-radius: var(--r-card); padding: var(--s4);
  font-size: var(--fs-small);
}
.avis cite { display: block; margin-top: var(--s2); font-style: normal; color: var(--text-2); font-size: 12px; }

/* ---------- Guide (réf. 1v) --------------------------------------------- */
.guide { display: flex; min-height: 60vh; }
.guide-side {
  width: 220px; flex: none; background: var(--offwhite);
  border-right: 1px solid var(--rule); padding: var(--s5);
}
.guide-side a { display: block; padding: 6px 0; color: var(--ink); font-size: var(--fs-small); }
.guide-side a.is-active { color: var(--indigo); font-weight: 700; }
.guide-body { flex: 1; padding: var(--s6) var(--s7); max-width: 760px; }
.guide-table { width: 100%; border-collapse: collapse; margin: var(--s5) 0; font-size: var(--fs-small); }
.guide-table th, .guide-table td { border: 1px solid var(--rule); padding: var(--s2) var(--s3); text-align: left; }
.guide-table th { background: var(--offwhite); }
.guide-table td:last-child { white-space: nowrap; }   /* les prix ne se coupent pas */

/* ---------- À propos + contact (réf. 1w) -------------------------------- */
.apropos { display: flex; gap: var(--s7); align-items: flex-start; }
.portrait-ascii { flex: none; width: 220px; height: 260px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--rule); border-radius: var(--r-card); padding: var(--s2); overflow: hidden; }
.tags-row { display: flex; gap: var(--s2); flex-wrap: wrap; }
.tag-pill {
  border: 1px solid var(--rule); border-radius: var(--r-badge); padding: 4px 8px;
  font: 700 var(--fs-tag)/1.4 var(--font-mono); letter-spacing: .08em; text-transform: uppercase;
}
.contact-zone { background: var(--offwhite); border-top: 1px solid var(--rule); }
.contact-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: var(--s7); }
.qr-block { text-align: center; font-size: var(--fs-small); }
.qr-block .qr-slot {
  width: 140px; height: 140px; margin: 0 auto var(--s3);
  border: 1px dashed var(--rule-strong); border-radius: var(--r-card);
  display: flex; align-items: center; justify-content: center; color: var(--text-2); font-size: 11px;
}

/* ---------- Formulaires -------------------------------------------------- */
.field { display: block; margin-bottom: var(--s4); }
.field > span { display: block; font-size: var(--fs-small); margin-bottom: var(--s1); }
.field input, .field textarea, .field select {
  width: 100%; font: 400 var(--fs-body)/1.4 var(--font-mono); color: var(--ink);
  background: #fff; border: 1px solid var(--rule); border-radius: var(--r-btn);
  padding: 11px 12px; min-height: 44px;
}
.field textarea { min-height: 120px; resize: vertical; }
.field input:focus, .field textarea:focus, .field select:focus { border-color: var(--indigo); outline: none; }
.consent { display: flex; gap: var(--s2); align-items: flex-start; font-size: var(--fs-small); margin-bottom: var(--s4); }
.consent input { margin-top: 3px; width: 18px; height: 18px; flex: none; }

/* Honeypot : masqué en CSS, jamais en type="hidden". */
.hp-field {
  position: absolute !important; left: -9999px !important; top: auto;
  width: 1px; height: 1px; overflow: hidden;
}

.geo-notice {
  border: 1px solid var(--rule); border-left: 3px solid var(--indigo);
  border-radius: var(--r-btn); background: var(--offwhite);
  padding: var(--s3) var(--s4); font-size: var(--fs-small); margin-bottom: var(--s4);
}
.geo-dot { color: var(--indigo); }

.form-state:empty { display: none; }
.form-state { margin-top: var(--s4); font-size: var(--fs-small); }
.form-state pre { margin-bottom: var(--s2); }
.form-state-title { font-family: var(--font-title); font-weight: 700; font-size: var(--fs-h3); margin-bottom: var(--s1); }
.form-state.is-error { color: var(--error); }
.form-state.is-error .btn { color: var(--ink); }
.form-state-actions { display: flex; gap: var(--s2); flex-wrap: wrap; }

/* ---------- Configurateur (réf. 1l / 1m) -------------------------------- */
.config-progress {
  display: flex; align-items: center; gap: var(--s4);
  padding: 10px 18px; border-bottom: 1px solid var(--rule);
  font-size: var(--fs-small);
}
.config-steps { display: flex; gap: 4px; flex: 1; }
.config-steps i { flex: 1; height: 3px; border-radius: 2px; background: rgba(0,0,0,.15); }
.config-steps i.is-done { background: var(--ink); }
.config-precision { color: var(--text-2); white-space: nowrap; }

.config-scope {
  display: flex; align-items: flex-start; gap: var(--s2);
  margin: 0; padding: 9px 18px; border-bottom: 1px solid var(--rule);
  background: var(--offwhite); font-size: var(--fs-small); color: var(--text-2);
}
.config-scope [data-pxl] { flex: none; margin-top: 2px; }
.config-scope-txt { flex: 1 1 auto; min-width: 0; }
.config-scope strong { color: var(--ink); }

.config-body { display: flex; align-items: stretch; min-height: 420px; }
.config-main { flex: 1.4; padding: var(--s6) var(--s7); display: flex; flex-direction: column; }
.config-aside {
  flex: 1; border-left: 1px solid var(--rule); background: var(--offwhite);
  position: relative; padding: var(--s6); overflow: hidden;
}
.config-aside-field { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; opacity: .18; pointer-events: none; }
.config-aside-inner { position: relative; background: rgba(250,249,246,.9); border-radius: var(--r-card); padding: var(--s4); }
.recap-line { display: flex; justify-content: space-between; gap: var(--s3); font-size: var(--fs-small); padding: 5px 0; }
.recap-line span:last-child { text-align: right; font-weight: 700; }
.recap-total { font: 700 var(--fs-h2)/1.1 var(--font-title); margin: var(--s2) 0 var(--s1); }

.answers { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: var(--s5) 0; }
.answer {
  text-align: left; background: #fff; border: 1px solid var(--rule); border-radius: var(--r-card);
  padding: var(--s3); cursor: pointer; font-family: var(--font-mono); min-height: 44px;
}
.answer:hover { border-color: var(--rule-strong); }
.answer.is-selected { border-color: var(--indigo); background: rgba(87,64,168,.05); }
.answer b { display: block; font: 700 var(--fs-body)/1.2 var(--font-title); margin-bottom: 2px; }
.answer small { font-size: 12px; color: var(--text-2); }
.config-actions { margin-top: auto; display: flex; align-items: center; gap: var(--s3); padding-top: var(--s5); }
.config-actions .link-discret { margin-left: auto; font-size: var(--fs-small); color: var(--text-2); }

.recap-band { position: relative; height: 140px; border-bottom: 1px solid var(--rule); overflow: hidden; display: flex; align-items: center; justify-content: center; }
.recap-band-field { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; opacity: .5; pointer-events: none; }
.recap-band-inner { position: relative; text-align: center; background: var(--reserve); padding: var(--s4) var(--s5); border-radius: var(--r-card); }

/* ---------- Footer & tabbar --------------------------------------------- */
.site-footer { border-top: 1px solid var(--rule); padding: var(--s7) var(--s6) var(--s5); margin-top: var(--s8); }
.footer-grid { max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: var(--s6); }
.footer-grid a { display: block; font-size: var(--fs-small); color: var(--ink); padding: 3px 0; }
.footer-title { font: 700 var(--fs-tag)/1 var(--font-mono); letter-spacing: .09em; text-transform: uppercase; color: var(--text-2); }
.footer-brand { font: 700 17px/1 var(--font-title); color: var(--indigo); margin-bottom: var(--s1); }
.footer-sign { font-size: var(--fs-small); color: var(--text-2); }
.footer-zone { font-size: var(--fs-small); }
.footer-bottom { max-width: 1180px; margin: var(--s6) auto 0; font-size: 12px; color: var(--text-2); }
/* Accès admin : présent, discret, jamais mis en avant. */
.footer-admin { color: rgba(0,0,0,.55); text-decoration: none; padding: 0 4px; }
.footer-admin:hover, .footer-admin:focus-visible { color: var(--indigo); text-decoration: none; }

.note-avis { font-size: var(--fs-body); margin-bottom: var(--s4); }
.avis { margin-bottom: var(--s5); }

.tabbar { display: none; }

/* ---------- Responsive --------------------------------------------------- */
@media (max-width: 900px) {
  .nav-burger { display: block; }
  .nav-menu {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--offwhite); border-bottom: 1px solid var(--rule); padding: var(--s3) var(--s4);
  }
  .nav.is-open .nav-menu { display: flex; }
  .nav-menu > * { padding: 10px 0; }
  .nav-sep { display: none; }

  /* Sur ordinateur, le champ ASCII occupe la moitié de hero laissée libre par le
     texte. Sous 900 px cette moitié n'existe plus : le champ passe derrière le
     titre, le paragraphe et les boutons, qui se lisent alors sur un fond de
     caractères. On l'atténue jusqu'à la texture, et on pose un voile couleur
     papier plus dense du côté du texte. */
  .hero-field { opacity: .22; }
  .hero-field::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(100deg, var(--offwhite) 0%, rgba(250,249,246,.72) 45%, rgba(250,249,246,.2) 100%);
  }

  /* Hauteur libre en mobile : les compteurs et les CTA ne doivent pas être rognés. */
  .hero { height: auto; min-height: 380px; }
  .hero-h1 { font-size: 34px; }
  .hero-inner { gap: var(--s5); }
  .hero-bottom { flex-direction: column; align-items: flex-start; }
  .hero-stats { align-self: stretch; text-align: left; }

  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-3, .polaroids, .avis, .refs { grid-template-columns: repeat(2, 1fr); }
  .stat-band { grid-template-columns: 1fr; }
  .stat-band > div + div { border-left: 0; border-top: 1px solid var(--rule); }

  .config-body { flex-direction: column-reverse; }
  .config-aside { border-left: 0; border-bottom: 1px solid var(--rule); }
  /* Récap replié en accordéon, remonté au-dessus de la question. */
  #recap-toggle { display: inline-flex !important; margin-bottom: var(--s3); }
  .config-aside[data-collapsed="true"] .config-aside-inner { display: none; }
  .config-main { padding: var(--s5) var(--s4); }

  .guide { flex-direction: column; }
  .guide-side { width: auto; border-right: 0; border-bottom: 1px solid var(--rule); }
  .guide-body { padding: var(--s5) var(--s4); }

  .cycle { grid-template-columns: repeat(2, 1fr); }
  /* En grille repliée, la flèche horizontale ne veut plus rien dire. */
  .cycle-etape + .cycle-etape::before { display: none; }
  .engagement { grid-template-columns: 32px 1fr; }
  .engagement [data-pxl] { display: none; }
  .preuves { gap: var(--s6); }

  .cas { grid-template-columns: 1fr; gap: var(--s4); }
  .cas-photo { max-width: 320px; }
  .page-tete .filters { margin-left: 0; }

  .apropos { flex-direction: column; }
  .contact-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }

  /* En colonne, le champ remonte en haut de l'écran : il ne doit croiser
     ni le titre Particulier ni le titre Pro. */
  .splash { flex-direction: column; }
  .splash-field {
    top: 7vh; left: 50%; transform: translateX(-50%);
    width: min(74vw, 30vh); height: min(74vw, 30vh);
  }
  .splash-half { padding: var(--s6) var(--s5); }
  .splash-half--client { align-items: flex-end; padding-bottom: var(--s5); }
  .splash-half + .splash-half { border-left: 0; border-top: 1px solid rgba(0,0,0,.18); }
  .splash-half--pro { justify-content: flex-start; text-align: left; align-items: flex-start; }
  .splash-title { font-size: 30px; }
  .splash-zone { bottom: var(--s8); }

  body[data-univers="particulier"] { padding-bottom: 56px; }
  .tabbar {
    display: flex; position: fixed; bottom: 0; left: 0; right: 0; z-index: 50;
    background: var(--offwhite); border-top: 1px solid var(--rule);
  }
  /* flex:1 seul laisse min-width:auto : « Réalisations » refusait de se réduire
     et poussait la barre à 380px sur un écran de 360px, d'où un débordement
     horizontal de toute la page. min-width:0 autorise la compression. */
  .tabbar a {
    flex: 1 1 0; min-width: 0; text-align: center; padding: 14px 2px; min-height: 44px;
    font-size: 12px; color: var(--ink);
  }
  .tabbar a + a { border-left: 1px solid var(--rule); }
}

@media (max-width: 620px) {
  .grid-4, .grid-3, .grid-2, .polaroids, .avis, .refs { grid-template-columns: 1fr; }
  .answers { grid-template-columns: 1fr; }
  .cycle { grid-template-columns: 1fr; }
  .hero-stats { flex-wrap: wrap; gap: var(--s4); }
  .service-visual { display: none; }
  .footer-grid { grid-template-columns: 1fr; }
  h1 { font-size: 28px; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* ---------- Bandeau de consentement ------------------------------------- */
/* Posé en bas d'écran, au-dessus de la tab bar mobile. Refuser et Accepter
   ont le même poids visuel : c'est une exigence, pas un choix esthétique. */
.consent-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  background: var(--offwhite); border-top: 1px solid var(--rule-strong);
  box-shadow: 0 -2px 12px rgba(0,0,0,.08);
}
.consent-inner {
  max-width: 1180px; margin: 0 auto; padding: var(--s4) var(--s6);
  display: flex; align-items: center; gap: var(--s6); flex-wrap: wrap;
}
.consent-titre {
  font: 700 var(--fs-tag)/1 var(--font-mono); letter-spacing: .09em;
  text-transform: uppercase; color: var(--text-2); margin: 0 0 var(--s2);
}
.consent-texte { font-size: var(--fs-small); margin: 0; max-width: 74ch; }
.consent-actions { display: flex; gap: var(--s3); margin-left: auto; }
body[data-univers="particulier"] .consent-bar { bottom: 0; }

@media (max-width: 900px) {
  /* Au-dessus de la tab bar fixe, sinon il la recouvre. */
  body[data-univers="particulier"] .consent-bar { bottom: 56px; }
  .consent-inner { padding: var(--s4); gap: var(--s4); }
  .consent-actions { margin-left: 0; width: 100%; }
  .consent-actions .btn { flex: 1; }
}

/* ---------- Pages légales : tableaux et encadrés ------------------------ */
.tableau-legal {
  width: 100%; border-collapse: collapse; margin: var(--s4) 0 var(--s6);
  font-size: var(--fs-small); display: block; overflow-x: auto;
}
.tableau-legal th, .tableau-legal td {
  border: 1px solid var(--rule); padding: var(--s3); text-align: left; vertical-align: top;
}
.tableau-legal th { background: var(--offwhite); font-weight: 700; }
.tableau-legal code { font-size: 12px; }
.encadre-legal {
  border-left: 3px solid var(--indigo); background: var(--offwhite);
  padding: var(--s4) var(--s5); border-radius: 0 var(--r-card) var(--r-card) 0;
}
.formulaire-retractation {
  margin: var(--s4) 0; border: 1px dashed var(--rule-strong); border-radius: var(--r-card);
  padding: var(--s5); font-size: var(--fs-small);
}
.formulaire-retractation p:last-child { margin-bottom: 0; }

/* Le bouton de gestion du consentement doit se lire comme les liens du pied
   de page : c'est un bouton parce qu'il agit, pas parce qu'il doit ressortir. */
.footer-consent {
  display: block; background: none; border: 0; padding: 3px 0;
  font: 400 var(--fs-small)/1.6 var(--font-mono); color: var(--ink);
  text-align: left; cursor: pointer; text-decoration: underline;
  text-underline-offset: 2px; min-height: 34px;
}
.footer-consent:hover { color: var(--indigo); }
.consent-age { font-size: 12px; color: var(--text-2); margin: var(--s2) 0 0; max-width: 74ch; }
/* Le libellé d'acceptation porte la mention d'âge : il lui faut de la place
   sans écraser « Refuser », qui doit rester d'accès équivalent. */
.consent-actions .btn { white-space: normal; text-align: center; }
.consent-actions .btn-primary { max-width: 260px; }

/* Très petits écrans : la barre d'onglets garde quatre libellés lisibles
   plutôt que de les tronquer. Cible tactile toujours à 44px de haut. */
@media (max-width: 400px) {
  .tabbar a { font-size: 11px; letter-spacing: -.01em; }
}

/* ---------- Page 404 ----------------------------------------------------- */
.err { position: relative; overflow: hidden; min-height: 62vh; display: flex; align-items: center; }
.err-field {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  overflow: hidden; pointer-events: none; user-select: none; opacity: .4; z-index: 1;
}
.err-field pre { transform: scale(1.9); transform-origin: center; }
/* Réserve opaque : règle du handoff, tout texte posé sur un champ ASCII. */
.err-inner {
  position: relative; z-index: 2; max-width: 620px;
  margin: 0 auto; padding: var(--s7) var(--s7) var(--s8); text-align: center;
}
.err-code {
  font: 700 84px/1 var(--font-title); color: var(--indigo);
  margin: 0 0 var(--s3); letter-spacing: -.02em;
}
.err-dino { display: block; margin: 0 auto var(--s5); color: var(--ink); }
.err-inner .tag { display: block; }
.err-inner h1 { font-size: var(--fs-h2); }
.err-inner .btn-row { justify-content: center; margin-top: var(--s6); }

@media (max-width: 620px) {
  .err-code { font-size: 60px; }
  .err-inner { padding: var(--s6) var(--s4) var(--s7); }
  .err-dino svg { width: 96px; height: auto; }
}

/* ---------- Repli sans JavaScript ---------------------------------------
   La navigation et le pied de page sont construits par js/site.js. Sans
   JavaScript, une page n'offrirait aucun lien, y compris vers les mentions
   légales, qui doivent rester joignables. Ce bloc s'affiche à leur place. */
.nojs {
  max-width: 760px; margin: 0 auto; padding: var(--s6) var(--s5);
  border-bottom: 1px solid var(--rule); font-size: var(--fs-body); line-height: 1.7;
}
.nojs p { margin: 0 0 var(--s3); }
.nojs p:last-child { margin-bottom: 0; color: var(--text-2); font-size: var(--fs-small); }
.nojs a { color: var(--indigo); }

/* Titre de section au rang h2, mais à la taille d'un h3 : ces titres de cartes
   sont les sections de premier rang de leur page, sans pour autant devoir
   peser visuellement autant qu'un titre de bloc. */
.h-sm { font-size: var(--fs-h3); line-height: 1.15; }