/* ==========================================================================
   DossierMax — feuille de style principale
   DA : bleu encre / papier calque / rouge tampon
   ========================================================================== */

:root {
  /* Couleurs */
  --encre: #0E2148;
  --encre-80: #1A3161;
  --bleu: #1F4FA3;
  --bleu-vif: #2A62C6;
  --bleu-pale: #E9EFFA;
  --bleu-trace: #C7D6EE;
  --rouge: #BE2E2E;
  --rouge-fonce: #9A2222;
  --rouge-pale: #FBEDEC;
  --papier: #FAF8F3;
  --papier-2: #F3F0E9;
  --blanc: #FFFFFF;
  --gris: #5C6577;
  --texte: #1B2439;
  --texte-doux: #5A6579;
  --trait: #E2DFD6;
  --trait-fort: #CFCBBF;
  --vert: #1E7A54;
  --ambre: #B7791F;

  /* Typo */
  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Mesures */
  --max: 1180px;
  --r: 6px;
  --r-lg: 10px;
  --ombre: 0 1px 2px rgba(14, 33, 72, .06), 0 8px 24px rgba(14, 33, 72, .06);
  --ombre-forte: 0 2px 4px rgba(14, 33, 72, .08), 0 18px 48px rgba(14, 33, 72, .12);
}

/* Reset ------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.62;
  color: var(--texte);
  background: var(--papier);
  letter-spacing: -0.011em;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4 { margin: 0 0 .5em; font-weight: 500; line-height: 1.15; letter-spacing: -0.028em; color: var(--encre); }
h1 { font-size: clamp(2.1rem, 1.3rem + 3.4vw, 3.5rem); }
h2 { font-size: clamp(1.65rem, 1.1rem + 2.2vw, 2.5rem); }
h3 { font-size: clamp(1.15rem, 1rem + .6vw, 1.4rem); }
p { margin: 0 0 1em; }
ul { margin: 0 0 1em; padding-left: 1.1em; }

/* Utilitaires ------------------------------------------------------------ */
.wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 22px; }
.wrap-etroit { max-width: 820px; }
.section { padding: clamp(56px, 8vw, 104px) 0; }
.section-papier { background: var(--papier-2); }
.section-encre { background: var(--encre); color: #DCE4F2; }
.section-encre h1, .section-encre h2, .section-encre h3 { color: #fff; }
.centre { text-align: center; }
.mono { font-family: var(--mono); font-size: .78em; letter-spacing: .04em; text-transform: uppercase; }
.muted { color: var(--texte-doux); }
.nowrap { white-space: nowrap; }
.mb0 { margin-bottom: 0; }

.eyebrow {
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--bleu);
  margin: 0 0 14px;
  display: block;
}
.section-encre .eyebrow { color: #7FA5E8; }

.lead { font-size: clamp(1.02rem, .97rem + .35vw, 1.2rem); color: var(--texte-doux); max-width: 62ch; }
.centre .lead { margin-left: auto; margin-right: auto; }

/* Grille millimétrée (signature DA) -------------------------------------- */
.calque {
  position: relative;
  background-image:
    linear-gradient(rgba(31, 79, 163, .055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(31, 79, 163, .055) 1px, transparent 1px),
    linear-gradient(rgba(31, 79, 163, .10) 1px, transparent 1px),
    linear-gradient(90deg, rgba(31, 79, 163, .10) 1px, transparent 1px);
  background-size: 16px 16px, 16px 16px, 96px 96px, 96px 96px;
  background-position: -1px -1px;
}

/* Boutons ---------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 13px 24px;
  border: 1px solid transparent;
  border-radius: var(--r);
  font-size: .95rem; font-weight: 500;
  cursor: pointer;
  transition: transform .16s ease, background .16s ease, box-shadow .16s ease, border-color .16s ease;
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn-primaire { background: var(--encre); color: #fff; }
.btn-primaire:hover { background: var(--bleu); box-shadow: 0 8px 22px rgba(31, 79, 163, .28); }
.btn-rouge { background: var(--rouge); color: #fff; }
.btn-rouge:hover { background: var(--rouge-fonce); box-shadow: 0 8px 22px rgba(190, 46, 46, .26); }
.btn-ligne { background: transparent; border-color: var(--trait-fort); color: var(--encre); }
.btn-ligne:hover { border-color: var(--encre); background: #fff; }
.section-encre .btn-ligne { border-color: rgba(255,255,255,.28); color: #fff; }
.section-encre .btn-ligne:hover { border-color: #fff; background: rgba(255,255,255,.08); }
.btn-blanc { background: #fff; color: var(--encre); }
.btn-blanc:hover { box-shadow: 0 8px 22px rgba(0,0,0,.18); }
.btn-lg { padding: 16px 30px; font-size: 1rem; }
.btn-sm { padding: 9px 16px; font-size: .86rem; }
.btn-bloc { width: 100%; }

/* Tampon (élément signature) --------------------------------------------- */
.tampon {
  display: inline-block;
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--rouge);
  border: 2px solid var(--rouge);
  border-radius: 3px;
  padding: 7px 12px 6px;
  transform: rotate(-3.5deg);
  position: relative;
  background: rgba(255,255,255,.5);
  box-shadow: inset 0 0 0 1px rgba(190, 46, 46, .35);
  opacity: .92;
}
.tampon::after {
  content: "";
  position: absolute; inset: 3px;
  border: 1px solid rgba(190, 46, 46, .35);
  border-radius: 2px;
  pointer-events: none;
}
.tampon-vert { color: var(--vert); border-color: var(--vert); box-shadow: inset 0 0 0 1px rgba(30,122,84,.3); }
.tampon-vert::after { border-color: rgba(30,122,84,.3); }

/* Cotes d'architecte ------------------------------------------------------ */
.cote {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--mono); font-size: .68rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--bleu);
  /* font-weight explicite : la classe sert aussi sur des <h2>, qui seraient
     en gras par défaut et ne ressembleraient plus aux <div> voisins. */
  font-weight: 500;
  margin: 0 0 18px;
}
.cote::before, .cote::after { content: ""; height: 1px; background: var(--bleu-trace); flex: 1; }
.cote::before { max-width: 34px; }

/* En-tête ---------------------------------------------------------------- */
.entete {
  position: sticky; top: 0; z-index: 60;
  background: rgba(250, 248, 243, .94);
  border-bottom: 1px solid var(--trait);
}
.entete-inner { display: flex; align-items: center; gap: 26px; height: 70px; }
.logo { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 1.12rem; color: var(--encre); letter-spacing: -.03em; }
.logo-mark { width: 30px; height: 30px; flex: 0 0 30px; }
.logo b { font-weight: 600; }
.logo span { color: var(--rouge); }
.nav { display: flex; align-items: center; gap: 22px; margin-left: auto; }
.nav a { font-size: .93rem; color: var(--texte-doux); transition: color .15s; }
.nav a:hover, .nav a.actif { color: var(--encre); }
.nav-actions { display: flex; align-items: center; gap: 12px; }
.burger { display: none; width: 42px; height: 42px; border: 1px solid var(--trait-fort); background: #fff; border-radius: var(--r); align-items: center; justify-content: center; cursor: pointer; }
.burger span { display: block; width: 17px; height: 1.5px; background: var(--encre); position: relative; }
.burger span::before, .burger span::after { content: ""; position: absolute; left: 0; width: 17px; height: 1.5px; background: var(--encre); }
.burger span::before { top: -5px; } .burger span::after { top: 5px; }

.lien-espace {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: .88rem; color: var(--texte-doux); transition: color .15s;
}
.lien-espace:hover { color: var(--encre); }
@media (max-width: 1080px) { .lien-espace span { display: none; } }
@media (max-width: 780px) { .lien-espace { display: none; } }

.panier-lien { position: relative; display: inline-flex; align-items: center; gap: 7px; font-size: .9rem; color: var(--encre); }
.panier-compte {
  min-width: 19px; height: 19px; padding: 0 5px;
  background: var(--rouge); color: #fff; border-radius: 10px;
  font-size: .7rem; font-weight: 600; display: inline-flex; align-items: center; justify-content: center;
}

/* Rien ne doit pouvoir tirer la page sur le côté, quelle que soit la largeur. */
html, body { overflow-x: hidden; }

/* Menu mobile off-canvas */
.mobile-nav {
  position: fixed; inset: 0 0 0 auto; width: min(88vw, 340px);
  background: var(--papier); z-index: 100;
  transform: translateX(102%);
  /* Fermé, le panneau sort du cadre : sans visibility il continue de compter
     dans la largeur défilable et la page se laisse tirer sur le côté.
     visibility retire aussi ses liens du parcours clavier et des lecteurs
     d'écran tant qu'il est fermé. Le délai laisse l'animation se jouer. */
  visibility: hidden;
  transition: transform .28s ease, visibility 0s linear .28s;
  padding: 26px 24px; overflow-y: auto; overflow-x: hidden;
  border-left: 1px solid var(--trait);
  display: flex; flex-direction: column; gap: 4px;
}
.mobile-nav.ouvert {
  transform: translateX(0);
  visibility: visible;
  transition: transform .28s ease, visibility 0s;
}
.mobile-nav a { padding: 13px 0; border-bottom: 1px solid var(--trait); font-size: 1.02rem; }
.mobile-nav .btn { margin-top: 18px; }
.backdrop { position: fixed; inset: 0; background: rgba(14, 33, 72, .42); z-index: 90; opacity: 0; pointer-events: none; transition: opacity .28s; }
.backdrop.ouvert { opacity: 1; pointer-events: auto; }
.fermer-nav {
  align-self: flex-end; background: none; border: 0;
  font-size: 1.5rem; line-height: 1; cursor: pointer; color: var(--encre);
  /* 44 px de côté : la cible tactile recommandée. À 32 px on rate le bouton. */
  min-width: 44px; min-height: 44px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  margin: -6px -6px 0 0; border-radius: 6px;
}
.fermer-nav:hover { background: rgba(14, 33, 72, .06); }

/* Bandeau annonce -------------------------------------------------------- */
.bandeau {
  background: var(--encre); color: #C9D6EE;
  font-size: .8rem; text-align: center; padding: 9px 16px;
  font-family: var(--mono); letter-spacing: .06em;
}
.bandeau b { color: #fff; font-weight: 500; }

/* Héros ------------------------------------------------------------------ */
.hero { padding: clamp(48px, 6vw, 84px) 0 clamp(52px, 7vw, 92px); position: relative; overflow: hidden; }
.hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: center; }
.hero h1 { margin-bottom: 20px; }
.hero h1 em { font-style: normal; color: var(--bleu); position: relative; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 28px 0 22px; }
.hero-preuve { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 26px; font-size: .88rem; color: var(--texte-doux); }
.hero-preuve strong { color: var(--encre); font-weight: 600; }

.plan-visuel {
  background: #fff; border: 1px solid var(--trait); border-radius: var(--r-lg);
  box-shadow: var(--ombre-forte); padding: 20px; position: relative;
}
.plan-visuel .cartouche {
  display: flex; justify-content: space-between; align-items: center;
  border-top: 1px solid var(--trait); margin-top: 14px; padding-top: 12px;
  font-family: var(--mono); font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; color: var(--texte-doux);
}
.plan-visuel .tampon { position: absolute; right: 18px; bottom: 54px; }

/* Étoiles ---------------------------------------------------------------- */
.etoiles { display: inline-flex; gap: 2px; color: #E8A317; line-height: 1; }
.etoiles svg { width: 15px; height: 15px; }
.note-ligne { display: inline-flex; align-items: center; gap: 8px; font-size: .88rem; }

/* Cartes services -------------------------------------------------------- */
.grille { display: grid; gap: 22px; }
.grille-3 { grid-template-columns: repeat(auto-fill, minmax(288px, 1fr)); }
.grille-2 { grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); }
.grille-4 { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }

.carte-service {
  background: #fff; border: 1px solid var(--trait); border-radius: var(--r-lg);
  padding: 26px 24px 22px; display: flex; flex-direction: column;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  position: relative; overflow: hidden;
}
.carte-service::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--bleu); transform: scaleY(0); transform-origin: top; transition: transform .25s ease;
}
.carte-service:hover { transform: translateY(-3px); box-shadow: var(--ombre-forte); border-color: var(--bleu-trace); }
.carte-service:hover::before { transform: scaleY(1); }
/* Miniature en tête de carte : elle déborde du padding pour toucher les bords */
.carte-visuel {
  display: block;
  margin: -26px -24px 18px;
  border-bottom: 1px solid var(--trait);
  background: var(--papier-2);
  overflow: hidden;
}
.carte-visuel img {
  width: 100%; height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  transition: transform .5s cubic-bezier(.22, .61, .36, 1);
}
.carte-service:hover .carte-visuel img { transform: scale(1.035); }

.carte-service .ref { font-family: var(--mono); font-size: .66rem; letter-spacing: .12em; color: var(--bleu); text-transform: uppercase; }
.carte-service h3 { margin: 12px 0 8px; font-size: 1.22rem; }
.carte-service p { font-size: .92rem; color: var(--texte-doux); margin-bottom: 16px; }
.carte-service .carte-pied { margin-top: auto; display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; padding-top: 14px; border-top: 1px solid var(--trait); }
.prix-depuis { font-size: .74rem; color: var(--texte-doux); display: block; }
.prix { font-size: 1.5rem; font-weight: 600; color: var(--encre); letter-spacing: -.03em; }
.prix small { font-size: .78rem; font-weight: 400; color: var(--texte-doux); }
/* Posé sur la miniature : fond plein pour rester lisible sur l'image */
.badge-carte {
  position: absolute; top: 14px; right: 14px; z-index: 2;
  background: #fff;
  box-shadow: 0 1px 6px rgba(14, 33, 72, .18);
}
.badge-carte.badge-rouge { color: var(--rouge); }
.badge-carte.badge-vert { color: var(--vert); }

.badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--mono); font-size: .64rem; letter-spacing: .1em; text-transform: uppercase;
  padding: 4px 9px; border-radius: 3px; background: var(--bleu-pale); color: var(--bleu);
}
.badge-rouge { background: var(--rouge-pale); color: var(--rouge); }
.badge-vert { background: #E6F3EC; color: var(--vert); }
.badge-ambre { background: #FCF3E3; color: var(--ambre); }
.badge-gris { background: var(--papier-2); color: var(--texte-doux); }

/* Bande de chiffres clés (accueil) --------------------------------------- */
.bande-section { padding: 0 0 clamp(30px, 4vw, 46px); }
.bande-chiffres { position: relative; padding-top: 30px; gap: 22px 30px; }
.bande-chiffres::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: var(--trait);
  transform: scaleX(0); transform-origin: left;
  transition: transform .8s cubic-bezier(.22, .61, .36, 1);
}
.bande-chiffres.vu::before { transform: scaleX(1); }
.chiffre h3 { margin: 7px 0 3px; }
.chiffre p { margin: 0; font-size: .88rem; color: var(--texte-doux); max-width: 26ch; }

/* Visuel de remplacement d'une prestation sans miniature ------------------ */
.carte-visuel-genere {
  display: flex; align-items: center; justify-content: center; gap: 18px;
  aspect-ratio: 16 / 10; max-height: 230px;
  background:
    linear-gradient(rgba(31, 79, 163, .06) 1px, transparent 1px) 0 0 / 16px 16px,
    linear-gradient(90deg, rgba(31, 79, 163, .06) 1px, transparent 1px) 0 0 / 16px 16px,
    var(--papier);
}
.carte-visuel-genere .ref-geante {
  font-family: var(--mono); font-size: 2.4rem; font-weight: 500;
  letter-spacing: .06em; color: var(--encre); opacity: .9;
}

/* Recherche et filtres du catalogue -------------------------------------- */
.barre-recherche { display: grid; gap: 14px; margin-bottom: 16px; }
.champ-recherche {
  display: flex; align-items: center; gap: 11px;
  background: #fff; border: 1px solid var(--trait-fort); border-radius: var(--r);
  padding: 0 16px; color: var(--texte-doux);
  transition: border-color .15s, box-shadow .15s;
}
.champ-recherche:focus-within { border-color: var(--bleu); box-shadow: 0 0 0 3px rgba(31, 79, 163, .12); }
.champ-recherche input {
  flex: 1; border: 0; outline: none; background: none;
  padding: 15px 0; font-size: 1rem; color: var(--texte);
}
.champ-recherche input::-webkit-search-cancel-button { cursor: pointer; }
.puces-filtres { display: flex; flex-wrap: wrap; gap: 8px; }
.puce {
  border: 1px solid var(--trait-fort); background: #fff; color: var(--texte-doux);
  border-radius: 999px; padding: 8px 15px; font-size: .87rem; cursor: pointer;
  transition: all .15s;
}
.puce:hover { border-color: var(--encre); color: var(--encre); }
.puce.actif { background: var(--encre); border-color: var(--encre); color: #fff; }
.carte-service.masquee { display: none; }
.carte-service .badge-nouveau { background: var(--vert); color: #fff; }

/* Étapes ----------------------------------------------------------------- */
.etapes { counter-reset: etape; display: grid; gap: 0; }
.etape {
  display: grid; grid-template-columns: 72px 1fr; gap: 22px;
  padding: 26px 0; border-top: 1px solid var(--trait);
}
.etape:last-child { border-bottom: 1px solid var(--trait); }
.etape-num {
  counter-increment: etape;
  font-family: var(--mono); font-size: .72rem; letter-spacing: .1em; color: var(--bleu);
  display: flex; align-items: flex-start;
}
.etape-num::before { content: "0" counter(etape); font-size: 1.9rem; letter-spacing: -.04em; color: var(--bleu-trace); font-weight: 500; }
.etape h3 { margin-bottom: 6px; }
.etape p { margin: 0; color: var(--texte-doux); font-size: .95rem; }

/* Listes à coches -------------------------------------------------------- */
.liste-check { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.liste-check li { display: flex; gap: 11px; font-size: .93rem; align-items: flex-start; }
.liste-check li::before {
  content: ""; width: 15px; height: 15px; flex: 0 0 15px; margin-top: 4px; border-radius: 50%;
  background: var(--bleu-pale);
  box-shadow: inset 0 0 0 1px var(--bleu-trace);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%231F4FA3' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 8.4l3 3 6-6.5'/%3E%3C/svg%3E");
  background-size: 11px; background-position: center; background-repeat: no-repeat;
}
.liste-check.rouge li::before { background-color: var(--rouge-pale); box-shadow: inset 0 0 0 1px rgba(190,46,46,.3); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23BE2E2E' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 8.4l3 3 6-6.5'/%3E%3C/svg%3E"); }
.liste-check li.attente::before {
  background-color: #fff;
  background-image: none;
  box-shadow: inset 0 0 0 1px var(--trait-fort);
}
.liste-croix { list-style: none; padding: 0; margin: 0; display: grid; gap: 9px; }
.liste-croix li { display: flex; gap: 11px; font-size: .92rem; color: var(--texte-doux); align-items: flex-start; }
.liste-croix li::before { content: "×"; flex: 0 0 auto; color: var(--trait-fort); font-size: 1.15rem; line-height: 1.2; }

/* Formules --------------------------------------------------------------- */
.formules { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(272px, 1fr)); align-items: start; }
.formule {
  background: #fff; border: 1px solid var(--trait); border-radius: var(--r-lg);
  padding: 24px 22px; position: relative; display: flex; flex-direction: column; height: 100%;
}
.formule.mise-en-avant { border-color: var(--encre); box-shadow: var(--ombre-forte); }
.formule .ruban {
  position: absolute; top: -11px; left: 22px;
  background: var(--rouge); color: #fff;
  font-family: var(--mono); font-size: .62rem; letter-spacing: .12em; text-transform: uppercase;
  padding: 4px 10px; border-radius: 3px;
}
.formule h3 { margin: 0 0 4px; font-size: 1.12rem; }
.formule .sous { font-size: .84rem; color: var(--texte-doux); margin-bottom: 16px; min-height: 2.6em; }
.formule .tarif { font-size: 2.1rem; font-weight: 600; letter-spacing: -.04em; color: var(--encre); line-height: 1; }
.formule .tarif small { font-size: .8rem; font-weight: 400; color: var(--texte-doux); letter-spacing: 0; }
.formule .delai { font-family: var(--mono); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--bleu); margin: 10px 0 18px; }
.formule .liste-check { margin-bottom: 20px; }
.formule .btn { margin-top: auto; }

/* Configurateur ---------------------------------------------------------- */
.config { display: grid; grid-template-columns: 1fr 372px; gap: 34px; align-items: start; }
/* Dans la colonne du configurateur, les formules tiennent sur une ligne. */
@media (min-width: 961px) { .config .formules { grid-template-columns: repeat(auto-fit, minmax(222px, 1fr)); } }
.config-panneau { background: #fff; border: 1px solid var(--trait); border-radius: var(--r-lg); padding: 24px; }
.option-ligne {
  display: grid; grid-template-columns: 22px 1fr auto; gap: 13px; align-items: start;
  padding: 14px 0; border-bottom: 1px solid var(--trait); cursor: pointer;
}
.option-ligne:last-child { border-bottom: 0; }
.option-ligne input { margin-top: 4px; accent-color: var(--bleu); width: 17px; height: 17px; }
.option-ligne .titre { font-size: .95rem; font-weight: 500; color: var(--encre); }
.option-ligne .desc { font-size: .84rem; color: var(--texte-doux); }
.option-ligne .cout { font-family: var(--mono); font-size: .82rem; color: var(--bleu); white-space: nowrap; }

.recap {
  background: #fff; border: 1px solid var(--trait); border-radius: var(--r-lg);
  padding: 22px; position: sticky; top: 90px; box-shadow: var(--ombre);
}
.recap h4 { font-family: var(--mono); font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--texte-doux); margin: 0 0 16px; font-weight: 400; }
.recap-ligne { display: flex; justify-content: space-between; gap: 14px; font-size: .9rem; padding: 7px 0; }
.recap-ligne span:last-child { font-family: var(--mono); font-size: .86rem; white-space: nowrap; }
.recap-total {
  display: flex; justify-content: space-between; align-items: baseline;
  border-top: 1px solid var(--trait); margin-top: 12px; padding-top: 14px;
  font-size: 1.05rem; font-weight: 500; color: var(--encre);
}
.recap-total strong { font-size: 1.7rem; font-weight: 600; letter-spacing: -.03em; }
.recap .btn { margin-top: 16px; }
.recap-note { font-size: .78rem; color: var(--texte-doux); margin: 12px 0 0; text-align: center; }

/* Avis ------------------------------------------------------------------- */
.avis-carte {
  background: #fff; border: 1px solid var(--trait); border-radius: var(--r-lg);
  padding: 22px; display: flex; flex-direction: column; gap: 12px;
}
.avis-carte p { font-size: .95rem; margin: 0; }
.avis-tete { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.avis-auteur { display: flex; align-items: center; gap: 11px; }
.avis-pastille {
  width: 36px; height: 36px; border-radius: 50%; flex: 0 0 36px;
  background: var(--bleu-pale); color: var(--bleu);
  display: flex; align-items: center; justify-content: center;
  font-weight: 600; font-size: .82rem;
}
.avis-nom { font-size: .9rem; font-weight: 500; color: var(--encre); line-height: 1.3; }
.avis-meta { font-size: .76rem; color: var(--texte-doux); }
.avis-pied { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; font-size: .78rem; color: var(--texte-doux); border-top: 1px solid var(--trait); padding-top: 11px; }

.note-globale { display: flex; flex-wrap: wrap; gap: 30px; align-items: center; padding: 22px 26px; background: #fff; border: 1px solid var(--trait); border-radius: var(--r-lg); }
.note-chiffre { font-size: 3rem; font-weight: 600; letter-spacing: -.04em; color: var(--encre); line-height: 1; }
.barres { flex: 1; min-width: 240px; display: grid; gap: 6px; }
.barre { display: grid; grid-template-columns: 34px 1fr 42px; gap: 10px; align-items: center; font-size: .78rem; color: var(--texte-doux); }
.barre-piste { height: 6px; background: var(--papier-2); border-radius: 3px; overflow: hidden; }
.barre-jauge { height: 100%; background: #E8A317; border-radius: 3px; }

/* Tableau ---------------------------------------------------------------- */
.tableau-wrap { overflow-x: auto; border: 1px solid var(--trait); border-radius: var(--r-lg); background: #fff; }
table.tab { width: 100%; border-collapse: collapse; min-width: 620px; }
table.tab th, table.tab td { padding: 13px 16px; text-align: left; border-bottom: 1px solid var(--trait); font-size: .92rem; vertical-align: top; }
table.tab th { font-family: var(--mono); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--texte-doux); font-weight: 400; background: var(--papier-2); }
table.tab tr:last-child td { border-bottom: 0; }
table.tab td strong { color: var(--encre); font-weight: 600; }

/* Guides ------------------------------------------------------------------ */
.sommaire {
  background: #fff; border: 1px solid var(--trait); border-left: 3px solid var(--bleu);
  border-radius: var(--r); padding: 18px 22px; margin: 30px 0 36px;
}
.sommaire .mono { display: block; color: var(--bleu); margin-bottom: 8px; }
.sommaire ol { margin: 0; padding-left: 1.2em; display: grid; gap: 6px; }
.sommaire a { color: var(--texte); font-size: .95rem; }
.sommaire a:hover { color: var(--bleu); text-decoration: underline; }

.guide-corps h2 {
  font-size: clamp(1.35rem, 1.1rem + .9vw, 1.75rem);
  margin: 44px 0 14px; scroll-margin-top: 90px;
}
.guide-corps p { max-width: 68ch; }
.guide-corps > .liste-check { margin: 18px 0 22px; max-width: 68ch; }
.guide-corps .liste-check li { align-items: flex-start; }
.guide-corps .liste-check li > span { flex: 1; min-width: 0; }
.guide-corps .tableau-wrap { margin: 22px 0 26px; }
.guide-corps .encadre { margin: 24px 0; max-width: 68ch; }
.guide-corps strong { color: var(--encre); font-weight: 600; }

.encadre-cta {
  display: flex; flex-wrap: wrap; gap: 22px; align-items: center; justify-content: space-between;
  background: var(--papier-2); border: 1px solid var(--trait); border-radius: var(--r-lg);
  padding: 24px 26px; margin: 44px 0;
}
.encadre-cta .prix { display: block; margin-bottom: 10px; }

/* FAQ -------------------------------------------------------------------- */
.faq-item { border-bottom: 1px solid var(--trait); }
.faq-item summary {
  cursor: pointer; list-style: none; padding: 20px 40px 20px 0; position: relative;
  font-size: 1.02rem; font-weight: 500; color: var(--encre);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+"; position: absolute; right: 6px; top: 17px;
  font-size: 1.35rem; font-weight: 300; color: var(--bleu); transition: transform .2s;
}
.faq-item[open] summary::after { content: "−"; }
.faq-item .reponse { padding: 0 40px 22px 0; color: var(--texte-doux); font-size: .95rem; }
.faq-item .reponse p:last-child { margin-bottom: 0; }

/* Encadré ---------------------------------------------------------------- */
.encadre {
  background: #fff; border: 1px solid var(--trait); border-left: 3px solid var(--bleu);
  border-radius: var(--r); padding: 18px 20px; font-size: .93rem;
}
.encadre-rouge { border-left-color: var(--rouge); }
.encadre h4 { margin: 0 0 6px; font-size: 1rem; }
.encadre p:last-child { margin-bottom: 0; }

/* Formulaires ------------------------------------------------------------ */
.champ { margin-bottom: 16px; }
.champ label { display: block; font-size: .84rem; font-weight: 500; color: var(--encre); margin-bottom: 6px; }
.champ .aide { font-size: .78rem; color: var(--texte-doux); margin-top: 5px; }
.champ input, .champ select, .champ textarea {
  width: 100%; padding: 12px 14px; background: #fff;
  border: 1px solid var(--trait-fort); border-radius: var(--r);
  font-size: .95rem; transition: border-color .15s, box-shadow .15s;
}
.champ input:focus, .champ select:focus, .champ textarea:focus {
  outline: none; border-color: var(--bleu); box-shadow: 0 0 0 3px rgba(31, 79, 163, .12);
}
.champ textarea { min-height: 120px; resize: vertical; }
.champs-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }

/* Pied de page ----------------------------------------------------------- */
.pied { background: var(--encre); color: #A9BADA; padding: 60px 0 26px; font-size: .9rem; }
.pied h4 { color: #fff; font-size: .78rem; font-family: var(--mono); letter-spacing: .14em; text-transform: uppercase; font-weight: 400; margin-bottom: 16px; }
.pied a { color: #A9BADA; transition: color .15s; }
.pied a:hover { color: #fff; }
.pied-grid { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 34px; }
.pied ul { list-style: none; padding: 0; display: grid; gap: 9px; }
.pied .logo { color: #fff; margin-bottom: 14px; }
.pied-bas {
  margin-top: 42px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.12);
  display: flex; flex-wrap: wrap; gap: 14px; justify-content: space-between;
  font-size: .8rem; color: #7E8FB2;
}

/* Fil d'ariane ----------------------------------------------------------- */
.fil { font-size: .8rem; color: var(--texte-doux); padding: 18px 0 0; }
.fil a:hover { color: var(--bleu); }
.fil span { margin: 0 7px; color: var(--trait-fort); }

/* Panier / commande ------------------------------------------------------ */
.ligne-panier {
  display: grid; grid-template-columns: 1fr auto; gap: 16px;
  padding: 18px 0; border-bottom: 1px solid var(--trait);
}
.ligne-panier h4 { margin: 0 0 4px; font-size: 1.02rem; }
.ligne-panier .details { font-size: .85rem; color: var(--texte-doux); }
.ligne-panier .details li { margin-bottom: 2px; }
.supprimer { background: none; border: 0; color: var(--texte-doux); font-size: .8rem; cursor: pointer; text-decoration: underline; padding: 0; }
.supprimer:hover { color: var(--rouge); }

.jauge-etapes { display: flex; gap: 6px; margin-bottom: 30px; }
.jauge-etapes div { flex: 1; height: 3px; background: var(--trait); border-radius: 2px; }
.jauge-etapes div.ok { background: var(--bleu); }

/* Alerte vide */
.vide { text-align: center; padding: 60px 20px; color: var(--texte-doux); }

/* Widget WhatsApp -------------------------------------------------------- */
.wa {
  position: fixed; right: 20px; bottom: 20px; z-index: 80;
  display: flex; align-items: center; gap: 10px;
  background: #25D366; color: #fff;
  border-radius: 999px; padding: 13px 16px;
  box-shadow: 0 8px 26px rgba(14, 33, 72, .22);
  font-size: .92rem; font-weight: 500;
  transition: transform .18s ease, box-shadow .18s ease;
}
.wa:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(14, 33, 72, .28); }
.wa svg { width: 22px; height: 22px; flex: 0 0 22px; }
.wa span { max-width: 0; overflow: hidden; white-space: nowrap; transition: max-width .28s ease; }
.wa:hover span, .wa:focus span { max-width: 220px; }
.wa-pastille {
  position: absolute; top: -3px; right: -3px; width: 11px; height: 11px;
  background: var(--rouge); border: 2px solid #fff; border-radius: 50%;
}
@media (max-width: 560px) {
  .wa { right: 14px; bottom: 14px; padding: 12px; }
  .wa span { display: none; }
}
@media print { .wa { display: none; } }

/* Suivi client ----------------------------------------------------------- */
.suivi-etapes { display: grid; gap: 0; margin: 26px 0; }
.suivi-etape {
  display: grid; grid-template-columns: 30px 1fr auto; gap: 14px; align-items: start;
  padding: 14px 0; border-bottom: 1px solid var(--trait);
}
.suivi-puce {
  width: 20px; height: 20px; border-radius: 50%; margin-top: 2px;
  border: 2px solid var(--trait-fort); background: #fff;
}
.suivi-etape.fait .suivi-puce { background: var(--vert); border-color: var(--vert); }
.suivi-etape.actuel .suivi-puce { background: var(--bleu); border-color: var(--bleu); box-shadow: 0 0 0 4px rgba(31,79,163,.16); }
.suivi-etape.fait .titre, .suivi-etape.actuel .titre { color: var(--encre); }
.suivi-etape .titre { font-weight: 500; color: var(--texte-doux); }
.suivi-etape .quand { font-family: var(--mono); font-size: .72rem; color: var(--texte-doux); white-space: nowrap; }
.suivi-carte { background: #fff; border: 1px solid var(--trait); border-radius: var(--r-lg); padding: 26px; }

/* Réactivité ------------------------------------------------------------- */
@media (max-width: 960px) {
  .hero-grid { grid-template-columns: 1fr; gap: 38px; }
  .config { grid-template-columns: 1fr; }
  .recap { position: static; }
  .pied-grid { grid-template-columns: 1fr 1fr; gap: 30px; }
}
@media (max-width: 780px) {
  .nav { display: none; }
  .burger { display: flex; margin-left: auto; }
  .nav-actions .btn { display: none; }
  .nav-actions { margin-left: 0; }
  .entete-inner { gap: 14px; }
}
@media (max-width: 560px) {
  body { font-size: 16.5px; }
  .etape { grid-template-columns: 1fr; gap: 8px; }
  .champs-2 { grid-template-columns: 1fr; }
  .pied-grid { grid-template-columns: 1fr; }
  .note-globale { padding: 18px; }
  .hero-actions .btn { width: 100%; }
}

/* Animations -------------------------------------------------------------- */
/* L'opacité de départ n'est appliquée que si le JS tourne : sans JS, tout
   reste visible au lieu de disparaître. */
@media (prefers-reduced-motion: no-preference) {
  .js .reveal { opacity: 0; transform: translateY(14px); transition: opacity .55s ease, transform .55s ease; }
  .js .reveal.vu { opacity: 1; transform: none; }

  /* Entrée par la gauche, en cascade (le décalage est posé sur l'élément) */
  .js .reveal-x { transform: translateX(-30px); transition-duration: .65s; }

  /* Conteneur qui ne sert qu'à déclencher son trait : il reste visible */
  .js .reveal.reveal-trait { opacity: 1; transform: none; }
}

/* ============================================================
   Questions Google : filtre en direct sur l'accueil et la FAQ
   ============================================================ */
.qg-recherche { position: relative; margin-bottom: 26px; }
.qg-recherche input {
  width: 100%; padding: 15px 18px; font-size: 1rem; font-family: inherit;
  color: var(--encre); background: #fff;
  border: 1px solid var(--trait); border-radius: 4px;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.qg-recherche input:focus {
  outline: none; border-color: var(--encre);
  box-shadow: 0 0 0 3px rgba(14, 33, 72, .09);
}
.qg-recherche input::placeholder { color: var(--texte-doux); opacity: .75; }
.qg-compteur {
  display: block; margin-top: 8px; font-size: .82rem; color: var(--texte-doux);
  min-height: 1.2em;
}
.qg-groupe { margin-bottom: 34px; }
.qg-groupe[hidden] { display: none; }
.qg-vide { margin: 18px 0 0; color: var(--texte-doux); font-size: .95rem; }
.qg-pied { margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--trait); }
.qg-item mark { background: #FBE9A7; color: inherit; padding: 0 1px; border-radius: 2px; }
@media (max-width: 640px) {
  .qg-recherche input { padding: 13px 15px; font-size: 16px; }
}
.qg-item[hidden] { display: none !important; }

/* Offre de lancement dans le récapitulatif de commande */
.recap-ligne.recap-promo { color: var(--vert, #1E7A4C); font-weight: 600; }
.prix-barre { text-decoration: line-through; opacity: .45; font-weight: 400; margin-right: 6px; }
.bandeau-promo {
  background: var(--encre); color: #fff; text-align: center;
  padding: 11px 18px; font-size: .9rem; letter-spacing: .01em;
}
.bandeau-promo b { color: #FFD84D; }

/* Bande « le marché en France » : chiffres publics sourcés */
.section-marche .marche-chiffres { margin-top: 30px; gap: 26px; }
.marche-item b {
  display: block; font-size: 2.1rem; font-weight: 600; letter-spacing: -.02em;
  color: #fff; line-height: 1.05; font-variant-numeric: tabular-nums;
}
.marche-item span {
  display: block; margin-top: 8px; font-size: .88rem; line-height: 1.5; color: #B9C8E4;
}
.marche-source {
  margin-top: 30px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.14);
  font-size: .82rem; line-height: 1.6; color: #8FA3C6; max-width: 88ch;
}
@media (max-width: 720px) { .marche-item b { font-size: 1.8rem; } }
.prix-gratuit { color: var(--vert, #1E7A4C); }

/* Répartition des avis par prestation */
.scroll-tableau { overflow-x: auto; }
.tableau-avis { width: 100%; border-collapse: collapse; font-size: .95rem; }
.tableau-avis th {
  text-align: left; font-family: var(--mono); font-size: .68rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--texte-doux); font-weight: 500;
  padding: 0 12px 10px; border-bottom: 1px solid var(--trait);
}
.tableau-avis td { padding: 13px 12px; border-bottom: 1px solid var(--trait); }
.tableau-avis tr:last-child td { border-bottom: 0; }

/* Dépôt de fichiers ------------------------------------------------------- */
.depot-zone { display: flex; flex-direction: column; gap: 4px; align-items: center; text-align: center; padding: 26px 18px; border: 1.5px dashed var(--bleu-trace); border-radius: var(--r-lg); background: var(--bleu-pale); cursor: pointer; transition: border-color .2s, background .2s; }
.depot-zone strong { color: var(--encre); }
.depot-zone span { font-size: .86rem; color: var(--texte-doux); }
.depot-zone:hover, .depot-zone.survol { border-color: var(--bleu); background: #fff; }
.depot-zone.occupe { opacity: .6; pointer-events: none; }
.depot-liste, .depot-fichiers { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 8px; }
.depot-liste li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; font-size: .9rem; }
.depot-liste .nom { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.depot-liste .etat { color: var(--texte-doux); font-size: .84rem; }
.depot-liste .barre { grid-column: 1 / -1; height: 4px; background: var(--papier-2); border-radius: 4px; overflow: hidden; }
.depot-liste .barre i { display: block; height: 100%; width: 0; background: var(--bleu); transition: width .2s; }
.depot-liste li.ok .etat { color: var(--vert); }
.depot-liste li.ok .barre i { background: var(--vert); }
.depot-liste li.ko .etat { color: var(--rouge); }
.depot-fichiers li { display: flex; justify-content: space-between; gap: 12px; padding: 10px 12px; background: var(--papier); border: 1px solid var(--trait); border-radius: 8px; font-size: .9rem; }
.depot-fichiers a { color: var(--bleu); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.depot-fichiers span { color: var(--texte-doux); font-size: .82rem; white-space: nowrap; }

/* Quel est votre projet ? ------------------------------------------------- */
.projet { margin: 22px 0 6px; max-width: 560px; }
.projet label { display: block; font-weight: 600; color: var(--encre); margin-bottom: 8px; }
.projet-ligne { display: flex; gap: 8px; }
.projet-ligne input { flex: 1; min-width: 0; padding: 13px 14px; font: inherit; border: 1.5px solid var(--trait-fort); border-radius: 8px; background: #fff; }
.projet-ligne input:focus { outline: none; border-color: var(--bleu); }
.projet-ligne .btn { white-space: nowrap; }
.projet-resultats { margin-top: 12px; display: grid; gap: 8px; }
.projet-titre { margin: 0; font-size: .92rem; color: var(--texte-doux); }
.projet-carte { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; padding: 12px 14px; background: #fff; border: 1px solid var(--trait); border-radius: 8px; text-decoration: none; color: var(--texte); transition: border-color .2s; }
.projet-carte:hover { border-color: var(--bleu); }
.projet-carte span { grid-column: 1; font-size: .86rem; color: var(--texte-doux); }
.projet-carte em { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-style: normal; color: var(--rouge); font-weight: 500; }
@media (max-width: 560px) { .projet-ligne { flex-direction: column; } .projet-ligne .btn { width: 100%; } }

/* Bouton d'action sur chaque carte de dossier */
.carte-service .carte-pied { margin-top: auto; }
.carte-cta { margin-top: 16px; pointer-events: none; }
.carte-service:hover .carte-cta { background: var(--rouge-fonce); }