/* ==========================================================================
   LB WEB — design clair, éditorial, orienté conversion
   Palette blanc / encre / bleu pétrole. Aucune animation gadget :
   uniquement des apparitions discrètes et des états de survol nets.
   ========================================================================== */

/* --- Tokens ------------------------------------------------------------- */
:root {
  --paper: #e6e3db;        /* le fond général n'est plus blanc */
  --paper-2: #dae4dd;       /* bandes alternées, vert d'eau très dilué */
  --paper-3: #cfcbc0;
  --card: #ffffff;
  --ink: #0f1416;
  --ink-2: #33372f;
  --muted: #5f615b;         /* assombri : 4.5:1 tenu sur les quatre fonds */
  --dim: #5f625c;           /* idem — sur fond teinté, l'ancien passait à 3.7:1 */
  --line: #cdc8ba;
  --line-2: #b0aa99;

  --accent: #096b77;          /* bleu pétrole : sobre, froid, sans concurrent local */
  --accent-rgb: 9, 107, 119;  /* même teinte, pour les rgba() */
  --accent-2: #08535c;        /* survol : un cran plus foncé */
  --accent-soft: #d3e8ea;     /* aplats teintés et surlignage */
  --accent-clair: #3fb6c4;    /* sur l'encre, l'accent s'éteint : ce ton prend le relais */
  --gold: #0a6e7a;            /* plus de doré : le surlignage prend l'accent */
  --gold-soft: #e4f1f3;
  --red: #b3261e;             /* négatif (croix des listes) : sémantique, ne suit pas l'accent */

  --r-sm: 2px;
  --r: 4px;
  --r-lg: 6px;

  --sh-1: none;
  --sh-2: 0 1px 2px rgba(15, 17, 16, .06);
  --sh-3: 0 12px 30px -18px rgba(15, 17, 16, .3);

  --pad: clamp(18px, 4.6vw, 56px);
  --maxw: 1200px;
  --ease: cubic-bezier(.22, 1, .36, 1);

  --font: "Public Sans", "Repli Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --display: "Archivo", "Repli Archivo", "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, monospace;
}

/* --- Polices de repli calées sur les vraies ------------------------------
   Avant l'arrivée des polices web, le texte s'affiche dans la police système.
   Mesuré : Public Sans est 14 % plus large que San Francisco — au moment du
   remplacement, toute la page se remettait en page sous les yeux du visiteur.
   Ces deux familles ne sont que la police système redimensionnée pour occuper
   exactement la même largeur : le remplacement devient invisible.
   (Rapports mesurés dans le navigateur, contre Helvetica Neue.) */
@font-face {
  font-family: "Repli Public Sans";
  src: local("Helvetica Neue"), local("Arial"), local("Liberation Sans");
  size-adjust: 103.2%;
  font-display: swap;
}
/* Archivo est une variable : une seule correction ne peut pas coller à tous
   les poids, on en déclare une par graisse réellement utilisée. */
@font-face {
  font-family: "Repli Archivo";
  src: local("Helvetica Neue"), local("Arial"), local("Liberation Sans");
  font-weight: 400 650;
  size-adjust: 100%;
  font-display: swap;
}
@font-face {
  font-family: "Repli Archivo";
  src: local("Helvetica Neue"), local("Arial"), local("Liberation Sans");
  font-weight: 651 749;
  size-adjust: 104.2%;
  font-display: swap;
}
@font-face {
  font-family: "Repli Archivo";
  src: local("Helvetica Neue"), local("Arial"), local("Liberation Sans");
  font-weight: 750 900;
  size-adjust: 108.9%;
  font-display: swap;
}

/* --- Finition ----------------------------------------------------------- */
/* Grain de papier : une trame très légère au-dessus de tout, qui enlève
   l'aspect « aplat numérique » des grandes surfaces ivoire. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: .05;
  /* Pas de mix-blend-mode ici : un calque fixe en « multiply » oblige le
     compositeur à refondre tout le viewport à chaque image de défilement.
     À 5 % d'opacité sur cette palette, le rendu est le même sans. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
}
@media print { body::after { display: none; } }

::selection { background: var(--gold); color: #fff; }  /* encre sur pétrole : illisible */

/* --- Lien d'évitement ---------------------------------------------------
   Premier élément focalisable de la page : au clavier, une tabulation suffit
   pour sauter la navigation et atterrir sur le contenu. Invisible tant qu'il
   n'a pas le focus. */
.saut {
  position: fixed;
  top: 10px; left: 10px;
  z-index: 100;
  padding: 11px 18px;
  background: var(--ink);
  color: var(--paper);
  font-size: 14.5px;
  font-weight: 600;
  border-radius: var(--r);
  transform: translateY(-160%);
  transition: transform .18s var(--ease);
}
.saut:focus { transform: none; }
main:focus { outline: none; }


/* --- Base --------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-size: clamp(15.5px, .35vw + 14.6px, 17px);
  line-height: 1.6;
  letter-spacing: -0.011em;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
::selection { background: var(--gold); color: #fff; }  /* encre sur pétrole : illisible */

h1, h2, h3, h4 {
  font-family: var(--display);
  font-variation-settings: "wdth" 108;
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.028em;
  font-variation-settings: "SOFT" 0, "WONK" 0;
  text-wrap: balance;
}
strong, b { font-weight: 600; }

/* --- Layout ------------------------------------------------------------- */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--pad); }
.wrap-narrow { max-width: 880px; }
section { position: relative; padding-block: clamp(50px, 5.6vw, 86px); }
section[id] { scroll-margin-top: 84px; }
.bleed-paper {
  background:
    radial-gradient(900px 320px at 12% -6%, rgba(70, 110, 92, .16), transparent 62%),
    #d7e3db;
  border-block: 1px solid #bfd0c5;
}
.bleed-ink { background: var(--ink); color: #f6f4ef; border-block: 1px solid var(--ink); }
.bleed-ink h2, .bleed-ink h3 { color: #fff; }

/* Bandes teintées : la page alternait blanc et gris papier sur toute sa
   longueur, ce qui finissait par l'aplatir. Ces deux fonds reprennent des
   couleurs déjà présentes (le pétrole de l'accent, un sable chaud) très
   dilués, et posent une lumière rasante qui évite l'aplat numérique.
   Contraste du texte inchangé : on reste au-dessus de 12:1 sur l'encre. */
.bleed-teinte {
  background:
    radial-gradient(1000px 340px at 10% -8%, rgba(var(--accent-rgb), .24), transparent 64%),
    radial-gradient(760px 320px at 94% 108%, rgba(var(--accent-rgb), .14), transparent 62%),
    #cfe5e7;
  border-block: 1px solid #b0d2d6;
}
.bleed-sable {
  background:
    radial-gradient(900px 320px at 88% -6%, rgba(178, 112, 62, .22), transparent 62%),
    radial-gradient(680px 300px at 6% 106%, rgba(178, 112, 62, .12), transparent 60%),
    #ebdcc8;
  border-block: 1px solid #d5bfa0;
}
/* Sur ces fonds, les cartes blanches doivent rester nettes. */
.bleed-teinte .card, .bleed-sable .card,
.bleed-teinte .work, .bleed-sable .work { background: #fff; }

.hr { height: 1px; background: var(--line); border: 0; }

/* --- Éléments de titrage ------------------------------------------------ */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 16px;
}
.eyebrow::before {
  content: "";
  width: 18px; height: 2px;
  background: var(--accent);
  border-radius: 2px;
}
/* Le secteur nommé dans le sur-titre est cliquable : sans ce filet, `a {
   color: inherit }` le rendrait strictement identique au texte autour. */
.eyebrow a { border-bottom: 1px solid rgba(var(--accent-rgb), .35); padding-bottom: 1px; transition: border-color .2s; }
.eyebrow a:hover { border-color: var(--accent); }
.bleed-ink .eyebrow a { border-bottom-color: rgba(255, 255, 255, .32); }
.bleed-ink .eyebrow a:hover { border-bottom-color: var(--accent-clair); }
.bleed-ink .eyebrow { color: var(--accent-clair); }
.bleed-ink .eyebrow::before { background: var(--accent-clair); }

h1 { font-size: clamp(33px, 4.4vw, 55px); letter-spacing: -.03em; line-height: 1.02; }
h2.title { font-size: clamp(26px, 3.1vw, 39px); letter-spacing: -.028em; line-height: 1.05; }
h3 { font-size: clamp(18px, 1.5vw, 21px); }
.section-head { max-width: 760px; margin-bottom: clamp(26px, 3.2vw, 44px); }

/* Au-delà de 1000px, le titre et son chapô se répartissent la largeur :
   sinon le texte reste collé à gauche et la moitié droite sonne creux. */
@media (min-width: 1000px) {
  .section-head {
    max-width: none;
    display: grid;
    grid-template-columns: minmax(0, 1.06fr) minmax(0, .94fr);
    column-gap: clamp(30px, 4vw, 76px);
    /* aligné en haut : avec « end », un titre court à côté d'un long chapô
       se retrouvait plaqué en bas, avec un grand vide au-dessus. */
    align-items: start;
  }
  /* Un titre sans chapô n'a pas besoin de deux colonnes : sinon la moitié
     droite reste vide, et c'est exactement ce qui fait « page générée ». */
  .section-head:not(:has(.lead)) { display: block; max-width: 24ch; }
  /* Lignes fixées explicitement : selon les gabarits, le chapô précède
     parfois le titre dans le code, et l'auto-placement le renvoyait alors
     à la ligne suivante — d'où un trou au-dessus du titre. */
  .section-head > .eyebrow { grid-column: 1 / -1; grid-row: 1; }
  .section-head > h2, .section-head > h1 { grid-column: 1; grid-row: 2; }
  .section-head > .lead { grid-column: 2; grid-row: 2; margin-top: 0; padding-top: .5em; max-width: 46ch; }
  .section-head > p:not(.lead), .section-head > div { grid-column: 1 / -1; }
}
.lead { margin-top: 16px; color: var(--muted); font-size: clamp(16px, 1.05vw, 18px); max-width: 62ch; }
.bleed-ink .lead { color: #b9b4a7; }

/* mot surligné à la main : dégradé derrière le texte, visible sur tout fond */
.mark {
  white-space: nowrap;
  background-image: linear-gradient(transparent 88%, var(--accent) 88%, var(--accent) 96%, transparent 96%);
  background-repeat: no-repeat;
  padding-inline: .06em;
}
.ital { font-style: italic; font-variation-settings: "wdth" 100; }

/* --- Boutons ------------------------------------------------------------ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 14px 24px;
  border-radius: 100px;
  font-size: 15px;
  font-weight: 550;
  letter-spacing: -0.01em;
  border: 1px solid transparent;
  transition: background-color .2s, color .2s, border-color .2s, box-shadow .2s;
}
.btn svg { flex: none; }

.btn-primary {
  background: var(--accent);
  color: #fff;
  box-shadow: 0 1px 1px rgba(255, 255, 255, .22) inset,
              0 10px 26px -14px rgba(var(--accent-rgb), .85),
              0 2px 6px rgba(20, 18, 14, .10);
}
.btn-primary:hover {
  background: var(--accent-2);
  box-shadow: 0 1px 1px rgba(255, 255, 255, .22) inset,
              0 16px 34px -14px rgba(var(--accent-rgb), .9),
              0 2px 8px rgba(20, 18, 14, .12);
}
.btn-dark { background: var(--ink); color: #fff; }
.btn-dark:hover { background: #2a271f; }
.btn-ghost { border-color: var(--line-2); background: var(--card); color: var(--ink); }
.btn-ghost:hover { border-color: var(--ink); box-shadow: var(--sh-1); }
.bleed-ink .btn-ghost { background: transparent; border-color: rgba(255,255,255,.28); color: #fff; }
.bleed-ink .btn-ghost:hover { border-color: #fff; background: rgba(255,255,255,.08); }
.btn-lg { padding: 17px 30px; font-size: 16px; }
.btn-block { width: 100%; }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-weight: 550;
  color: var(--accent);
  border-bottom: 1px solid rgba(var(--accent-rgb), .3);
  padding-bottom: 1px;
  transition: border-color .2s;
}
.link-arrow:hover { border-color: var(--accent); }


/* --- En-tête ------------------------------------------------------------ */
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(230, 227, 219, .92);
  /* Le flou reste constant d'un état à l'autre : le faire varier au défilement
     obligeait le navigateur à refaire le filtre à chaque image. Le saturate()
     ajoutait une seconde passe pour un effet invisible sur un fond aussi clair. */
  backdrop-filter: blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color .3s, box-shadow .3s, background-color .3s;
}
.nav.stuck {
  border-bottom-color: var(--line);
  background: rgba(251, 250, 246, .82);
  box-shadow: 0 10px 30px -24px rgba(20, 18, 14, .55);
}
.nav-in { transition: padding-block .3s var(--ease); }
.nav.stuck .nav-in { padding-block: 9px; }
.nav-in { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-block: 13px; }

.logo { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; font-size: 17px; letter-spacing: -0.03em; white-space: nowrap; }
/* Le symbole — l'équerre et le bloc. L'équerre est en currentColor : elle
   devient blanche dans le pied de page sans règle supplémentaire. Le jeu de
   fichiers complet (logo, versions blanche et monochrome) est dans
   assets/logo/. */
.logo-mark { flex: none; width: 29px; height: 29px; }
.logo em { font-style: normal; color: var(--accent); }

.nav-links { display: flex; align-items: center; gap: 2px; font-size: 14.5px; color: var(--ink-2); }
.nav-links a { padding: 8px 12px; border-radius: 8px; transition: background-color .2s, color .2s; }
.nav-links a:hover { background: var(--paper-3); color: var(--ink); }
.nav-right { display: flex; align-items: center; gap: 10px; }
.nav-tel { font-size: 14.5px; font-weight: 550; white-space: nowrap; }
/* Tant qu'aucun numéro n'est renseigné, le lien reste le texte « Devis
   gratuit ». Dès que main.js en pose un, il devient un vrai bouton d'appel :
   combiné à l'accent, chiffres en chasse fixe pour que les cinq paires
   s'alignent, et le même galet que le bouton voisin pour ne pas casser la
   ligne de l'en-tête. */
.nav-tel.is-tel {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 15px 8px 12px;
  border: 1px solid var(--line-2);
  border-radius: 100px;
  background: var(--card);
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  letter-spacing: .015em;
  transition: border-color .2s, background .2s, color .2s;
}
.nav-tel.is-tel svg { flex: none; color: var(--accent); }
.nav-tel.is-tel:hover {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent-2);
}
.nav-right .btn { padding: 10px 18px; font-size: 14px; white-space: nowrap; }

.burger { display: none; position: relative; width: 40px; height: 40px; border: 1px solid var(--line-2); border-radius: 10px; }
.burger i {
  position: absolute; top: 50%; left: 50%;
  width: 17px; height: 1.6px; margin: -.8px 0 0 -8.5px;
  background: var(--ink); border-radius: 2px;
  transition: transform .3s var(--ease), opacity .2s;
}
.burger i:nth-child(1) { transform: translateY(-5px); }
.burger i:nth-child(3) { transform: translateY(5px); }
body.menu-open .burger i:nth-child(1) { transform: rotate(45deg); }
body.menu-open .burger i:nth-child(2) { opacity: 0; }
body.menu-open .burger i:nth-child(3) { transform: rotate(-45deg); }

.drawer {
  position: fixed; inset: 56px 0 0;
  z-index: 45;
  display: grid;
  align-content: start;
  gap: 2px;
  padding: 22px var(--pad) 40px;
  background: var(--paper);
  opacity: 0; visibility: hidden;
  transition: opacity .25s, visibility .25s;
  overflow-y: auto;
}
body.menu-open .drawer { opacity: 1; visibility: visible; }
.drawer a {
  font-family: var(--display);
  font-size: 26px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}
.drawer .btn { margin-top: 18px; }

/* --- Hero --------------------------------------------------------------- */
.hero { padding-block: clamp(34px, 5vw, 68px) clamp(40px, 5vw, 76px); }
.hero-grid {
  display: grid;
  grid-template-columns: 1.02fr .98fr;
  gap: clamp(26px, 4vw, 58px);
  align-items: center;
}
.pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 13px 6px 9px;
  border: 1px solid var(--line-2);
  border-radius: 100px;
  background: var(--card);
  font-size: 13px;
  color: var(--ink-2);
  box-shadow: var(--sh-1);
}
.pill .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.hero h1 { margin-top: 18px; }
.hero .lead { font-size: clamp(16.5px, 1.15vw, 19px); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.hero-proof {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
  font-size: 13.6px;
  color: var(--muted);
}
.hero-proof b { color: var(--ink); font-weight: 600; }

/* collage de captures */
.collage { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.collage .shot:first-child { grid-column: 1 / -1; }
.shot {
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--card);
  border: 1px solid var(--line);
  box-shadow: var(--sh-2);
  transition: box-shadow .35s var(--ease);
}
.shot:hover { box-shadow: var(--sh-3); }
.shot-bar {
  display: flex; align-items: center; gap: 5px;
  padding: 8px 11px;
  background: var(--paper-2);
  border-bottom: 1px solid var(--line);
}
.shot-bar b { width: 7px; height: 7px; border-radius: 50%; background: var(--line-2); }
.shot-bar u {
  flex: 1; margin-left: 6px; height: 15px;
  border-radius: 100px; background: var(--card);
  border: 1px solid var(--line);
  text-decoration: none;
  display: grid; place-items: center;
  font-family: var(--mono); font-size: 9px; color: #8a8d85;  /* décoratif : faux champ d'adresse */
}
.shot img { width: 100%; }
.shot figure { overflow: hidden; }

/* --- Scène 3D du hero (WebGL) -------------------------------------------
   La toile ne s'affiche que si hero3d.js a réussi à ouvrir un contexte
   WebGL ; sinon, ce sont les fenêtres en dessous qui restent visibles.
   ------------------------------------------------------------------------ */
.scene3d { display: none; width: 100%; aspect-ratio: 1 / 1; }
.scene3d.on { display: block; }
.fenetres.remplace { display: none; }
@media (max-width: 860px) { .scene3d { aspect-ratio: 4 / 3; } }

/* --- Fenêtres du hero ---------------------------------------------------
   Trois captures qui flottent et se décalent au défilement. Le mouvement est
   piloté par CSS Scroll-Timeline : lié au scroll, sans JavaScript, donc sans
   à-coup. Là où le navigateur ne le gère pas, les fenêtres restent en place.
   ------------------------------------------------------------------------ */
.fenetres { position: relative; display: grid; gap: 16px; }
.fen {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--card);
  border: 1px solid var(--line);
  box-shadow: var(--sh-2);
}
.fen img { width: 100%; display: block; }
.fen .bar {
  display: flex; align-items: center; gap: 5px;
  padding: 8px 11px;
  background: var(--paper-2);
  border-bottom: 1px solid var(--line);
}
.fen .bar b { width: 7px; height: 7px; border-radius: 50%; background: var(--line-2); }
.fen .bar u {
  flex: 1; margin-left: 6px; height: 15px;
  border-radius: 100px; background: var(--card); border: 1px solid var(--line);
  text-decoration: none; display: grid; place-items: center;
  font-family: var(--mono); font-size: 9px; color: #8a8d85;  /* décoratif : faux champ d'adresse */
}

@media (min-width: 861px) {
  .fenetres { grid-template-columns: repeat(2, 1fr); }
  .fen-1 { grid-column: 1 / -1; }
  .fen-2 { margin-top: -4px; }
  .fen-3 { margin-top: 22px; }
}

/* décalage au défilement : chaque fenêtre à sa vitesse */
@supports (animation-timeline: view()) {
  @media (min-width: 861px) and (prefers-reduced-motion: no-preference) {
    .fen { animation: derive linear both; animation-timeline: view(); animation-range: entry 10% exit 90%; }
    .fen-1 { --amp: -26px; }
    .fen-2 { --amp: 14px; }
    .fen-3 { --amp: -42px; }
  }
  @keyframes derive {
    from { transform: translateY(calc(var(--amp, 0px) * -1)); }
    to   { transform: translateY(var(--amp, 0px)); }
  }
}

/* --- Grilles ------------------------------------------------------------ */
.grid { display: grid; gap: clamp(20px, 2.4vw, 34px); }
.g2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.g3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.g4 { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }

/* Huit entrées de menu ne tiennent pas sous 1300 px : on retire d'abord les
   deux dont le contenu est atteignable autrement (la méthode et la FAQ sont
   dans le corps de la page d'accueil). */
@media (max-width: 1300px) {
  .nav-links a[href$="#methode"],
  .nav-links a[href$="#faq"] { display: none; }
}
@media (max-width: 1140px) {
  .nav-links a[href$="#realisations"] { display: none; }
}

/* --- Bandeau de confiance ----------------------------------------------- */
.trust { border-block: 1px solid var(--line); background: var(--paper-2); padding-block: 15px; }
.trust-in {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 10px 26px;
  font-size: 13.6px;
  color: var(--ink-2);
}
.trust-in span { display: inline-flex; align-items: center; gap: 8px; }
.trust svg { color: var(--accent); flex: none; }

/* --- Listes de détails -------------------------------------------------- */
.tick {
  list-style: none;
  padding: 0;
  margin-top: 16px;
  display: grid;
  gap: 8px;
  font-size: 14.6px;
  color: var(--ink-2);
}
/* Retrait négatif plutôt que flex : en flex, chaque <strong> ou <a> devient un
   élément à part et se coupe en fin de ligne. */
.tick li { padding-left: 1.45em; text-indent: -1.45em; }
/* Pastilles à coche : le tic le plus répandu des pages générées. Un tiret
   suffit, comme sur un devis. */
.tick li::before { content: "—"; margin-right: .55em; color: var(--accent); font-weight: 600; }
.tick.cross li::before { content: "×"; color: var(--red); }

/* --- Tableau comparatif ------------------------------------------------- */
.table-scroll { overflow-x: auto; margin-top: 6px; }
.compare { width: 100%; min-width: 660px; border-collapse: collapse; font-size: 14.7px; }
.compare th, .compare td {
  padding: 14px 16px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--line);
}
.compare thead th {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  border-bottom: 1px solid var(--ink);
}
.compare tbody th { font-weight: 600; color: var(--ink); width: 22%; }
.compare td { color: var(--muted); }
.compare .me { background: var(--accent-soft); color: var(--ink); }
.compare thead .me { color: var(--accent); border-bottom-color: var(--accent); }
.compare tbody tr:last-child th, .compare tbody tr:last-child td { border-bottom: 0; }

/* --- Guides (contenu long) ---------------------------------------------- */
.doc-body { padding-top: clamp(18px, 2vw, 28px); }
.doc-meta { margin-top: 18px; font-family: var(--mono); font-size: 12.5px; color: var(--dim); }
.doc h2 {
  font-size: clamp(20px, 2.2vw, 26px);
  margin-top: clamp(34px, 4vw, 52px);
  padding-top: 18px;
  border-top: 1px solid var(--line);
}
.doc > h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
/* 95 caractères par ligne, c'était trop long : l'œil perd la ligne suivante.
   On revient dans la plage confortable (65-70 signes). */
.doc p { margin-top: 15px; color: var(--ink-2); font-size: 16.5px; max-width: 68ch; }
.doc .tick { max-width: 68ch; margin-top: 16px; }
.doc h2 { max-width: 24ch; }
.retenir {
  margin-top: clamp(34px, 4vw, 52px);
  padding: 24px 26px;
  background: var(--paper-2);
  border-left: 3px solid var(--accent);
}
.retenir h2 { margin: 0; padding: 0; border: 0; font-size: 17px; font-family: var(--font); font-weight: 600; letter-spacing: -.02em; }
.doc-cta {
  margin-top: clamp(30px, 3.6vw, 46px);
  padding-top: 24px;
  border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; align-items: center; gap: 16px;
  color: var(--muted);
}

/* --- Cartes de contenu --------------------------------------------------
   Pas de boîtes : un filet en haut, du blanc, et la typographie. Les
   pastilles arrondies avec ombre douce sont la signature la plus datée des
   pages générées — on s'en passe.
   ------------------------------------------------------------------------ */
.card {
  padding: 24px 0 0;
  border-top: 1px solid var(--line-2);
  background: transparent;
  transition: border-color .2s;
}
.card:hover { border-top-color: var(--accent); }
.card h3 { margin-bottom: 8px; }
.card p { color: var(--muted); font-size: 15.2px; }
.card .num { display: none; }        /* prestations et atouts ne sont pas une suite */
.ico { display: block; height: 24px; margin-bottom: 14px; color: var(--accent); }

/* --- Constats (problème) ------------------------------------------------ */
.pain { padding: 22px 0 0; border-top: 2px solid var(--ink); background: transparent; }
.pain h3 { font-family: var(--font); font-size: 16.5px; font-weight: 600; letter-spacing: -0.02em; }
.pain p { margin-top: 7px; color: var(--muted); font-size: 15px; }

/* --- Réalisations ------------------------------------------------------- */
.works { display: grid; gap: 22px; grid-template-columns: repeat(12, 1fr); }
.work {
  position: relative;
  isolation: isolate;
  grid-column: span 6;
  display: flex;
  flex-direction: column;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: border-color .25s;
}
.work:hover { border-color: var(--line-2); }
.work.wide { grid-column: span 12; }
.work.wide .work-in { display: grid; grid-template-columns: 1.05fr 1fr; align-items: center; gap: clamp(20px, 3vw, 44px); padding: clamp(20px, 2.4vw, 34px); }
.work.wide .work-shot { order: 2; border: 1px solid var(--line); border-radius: var(--r); }
.work.wide .work-body { padding: 0; }
.work-shot { background: var(--paper-2); border-bottom: 1px solid var(--line); overflow: hidden; }
.work-shot img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top center; }
.work.wide .work-shot img { aspect-ratio: auto; }
.work-body { padding: 22px; display: flex; flex-direction: column; flex: 1; }
.work-body h3 { font-size: clamp(17px, 1.4vw, 20px); }
.work-body p { margin-top: 9px; color: var(--muted); font-size: 15.1px; }
.tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.tag {
  padding: 3px 9px;
  border: 1px solid var(--line-2);
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
}
.tag.hot { border-color: var(--accent); color: var(--accent); }
.result { margin-top: 14px; padding: 12px 14px; background: var(--paper-2); border-left: 2px solid var(--accent); font-size: 14.4px; }
.result b { font-weight: 600; }
.work-foot {
  margin-top: auto;
  padding-top: 16px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px;
  font-size: 13.4px;
  color: var(--dim);
}

/* --- Chiffres ----------------------------------------------------------- */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 0; border-top: 1px solid var(--line); }
.stat { padding: 22px 22px 22px 0; border-bottom: 1px solid var(--line); }
.stat b { display: block; font-family: var(--display); font-variation-settings: "wdth" 108; font-size: clamp(28px, 3.4vw, 40px); font-weight: 700; letter-spacing: -0.03em; color: var(--accent); }
.stat span { display: block; margin-top: 6px; font-size: 14px; color: var(--muted); }
.bleed-ink .stats { border-top-color: rgba(255,255,255,.2); }
.bleed-ink .stat { border-bottom-color: rgba(255,255,255,.2); }
.bleed-ink .stat span { color: #b3b3ab; }

/* --- Offre d'entrée, sur fond encre --------------------------------------
   Le diagnostic gratuit était une ligne perdue en bas de la page tarifs.
   C'est pourtant la porte d'entrée la moins risquée pour le visiteur. */
.sans-avis {
  margin-top: 26px; padding-left: 16px;
  border-left: 2px solid rgba(255, 255, 255, .22);
  color: #b9b4a7; font-size: 15px; max-width: 70ch;
}

.offre-libre {
  display: flex; flex-wrap: wrap; align-items: center; gap: 18px 28px;
  margin-top: 26px; padding: 22px 24px;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: var(--r);
  background: rgba(255, 255, 255, .04);
}
.offre-libre > div { flex: 1 1 320px; }
.offre-libre h3 { font-family: var(--display); font-size: 18px; letter-spacing: -0.025em; color: #fff; }
.offre-libre p { margin-top: 6px; color: #b9b4a7; font-size: 14.6px; max-width: 62ch; }

/* --- Méthode : une vraie séquence, donc numérotée ----------------------- */
.steps { display: grid; gap: 0; counter-reset: s; border-top: 1px solid var(--line); }
.step {
  display: grid;
  grid-template-columns: 54px minmax(0, 21ch) minmax(0, 1fr);
  grid-template-areas:
    "num titre texte"
    "num quand texte";
  column-gap: 22px;
  row-gap: 4px;
  padding: 20px 0;
  border-bottom: 1px solid var(--line);
}
.step::before { grid-area: num; }
.step h3 { grid-area: titre; }
.step .when { grid-area: quand; }
.step p { grid-area: texte; }
@media (max-width: 760px) {
  .step {
    grid-template-columns: 40px minmax(0, 1fr);
    grid-template-areas:
      "num titre"
      "num texte"
      "num quand";
  }
}

/* --- Halo au curseur ----------------------------------------------------
   Le seul effet de survol du site : la carte s'éclaire à l'endroit du
   curseur, sans bouger d'un pixel. Coordonnées transmises par main.js.
   ------------------------------------------------------------------------ */
.work::before, .plan::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0;
  transition: opacity .35s var(--ease);
  background: radial-gradient(220px circle at var(--mx, 50%) var(--my, 0%),
              rgba(var(--accent-rgb), .07), transparent 68%);
}
.work:hover::before, .plan:hover::before { opacity: 1; }

.step::before {
  counter-increment: s;
  content: counter(s);
  font-family: var(--display);
  font-variation-settings: "wdth" 108;
  font-size: 28px;
  font-weight: 700;
  line-height: .95;
  color: var(--accent);
}
.step h3 { font-family: var(--font); font-size: 16.5px; font-weight: 600; letter-spacing: -0.02em; }
.step p { font-size: 14.6px; color: var(--muted); }
.step .when { font-size: 12.5px; color: var(--dim); font-family: var(--mono); }

/* --- SEO / zones -------------------------------------------------------- */
.seo-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 26px 34px; }
.seo-cols h3 { font-family: var(--font); font-size: 16px; font-weight: 600; letter-spacing: -0.02em; margin-bottom: 10px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.chip {
  padding: 8px 14px;
  border-radius: 100px;
  border: 1px solid var(--line-2);
  background: var(--card);
  font-size: 14px;
  color: var(--ink-2);
  transition: border-color .2s, background-color .2s, color .2s;
}
a.chip:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }

/* --- Tarifs ------------------------------------------------------------- */
.plans { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); align-items: stretch; }
.plan {
  position: relative;
  isolation: isolate;
  display: flex; flex-direction: column;
  padding: 28px 26px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
}
.plan.featured { border-color: var(--accent); border-width: 2px; }
.plan .flag {
  position: absolute; top: -11px; left: 26px;
  padding: 4px 11px;
  border-radius: 100px;
  background: var(--accent);
  color: #fff;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
}
.plan .who { color: var(--dim); font-size: 13.6px; margin-top: 5px; min-height: 2.8em; }
.price { display: flex; align-items: baseline; gap: 7px; margin: 14px 0 2px; min-height: 52px; }
.price b { font-family: var(--display); font-size: clamp(30px, 3.4vw, 40px); font-weight: 600; letter-spacing: -0.035em; }
.price small { font-size: 12.5px; color: var(--dim); }
.price.devis b { font-size: clamp(24px, 2.6vw, 30px); }
.price-note { font-size: 13px; color: var(--dim); }
.plan .btn { margin-top: 22px; }
.plan .tick { flex: 1; }
.plan-foot { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); font-size: 12.8px; color: var(--dim); }
.plans-note { margin-top: 18px; font-size: 13.6px; color: var(--muted); text-align: center; }
.bleed-ink .plans-note { color: #b9b4a7; }

/* --- Garanties ---------------------------------------------------------- */
.guards { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.guard { display: flex; gap: 13px; padding: 20px 0 0; background: transparent; border-top: 1px solid rgba(255,255,255,.22); }
.guard svg { flex: none; color: var(--gold); margin-top: 2px; }
.guard h3 { font-family: var(--font); font-size: 15.6px; font-weight: 600; letter-spacing: -0.02em; }
.guard p { margin-top: 5px; font-size: 14.2px; color: #b9b4a7; }

/* --- Citation / à propos ------------------------------------------------ */
.about { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(26px, 4vw, 54px); align-items: center; }
.about p { color: var(--muted); }
.about p + p { margin-top: 13px; }
.quote {
  padding: clamp(24px, 3vw, 36px);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-2);
  font-family: var(--display);
  font-size: clamp(19px, 2vw, 25px);
  line-height: 1.3;
  letter-spacing: -0.025em;
}
.quote cite { display: block; margin-top: 18px; font-family: var(--font); font-size: 14px; font-style: normal; color: var(--muted); letter-spacing: 0; }

/* --- FAQ ---------------------------------------------------------------- */
.faq { display: grid; gap: 9px; max-width: 900px; }

/* Titre à gauche qui suit le défilement, questions à droite : la colonne
   droite ne reste plus vide sur les grands écrans. */
@media (min-width: 1000px) {
  .faq-grid { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: clamp(30px, 4vw, 76px); align-items: start; }
  .faq-grid > .section-head { display: block; position: sticky; top: 96px; margin-bottom: 0; }
  .faq-grid > .section-head .lead { margin-top: 16px; }
  .faq-grid > .faq { max-width: none; }
}
.qa { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); transition: border-color .2s, box-shadow .2s; }
.qa[open] { border-color: var(--line-2); box-shadow: var(--sh-1); }
.qa summary {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 16px 20px;
  font-size: 16px;
  font-weight: 550;
  letter-spacing: -0.018em;
  cursor: pointer;
  list-style: none;
}
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after {
  content: "";
  flex: none;
  width: 9px; height: 9px;
  border-right: 1.7px solid var(--muted);
  border-bottom: 1.7px solid var(--muted);
  transform: rotate(45deg) translateY(-2px);
  transition: transform .25s var(--ease);
}
.qa[open] summary::after { transform: rotate(-135deg) translateY(-2px); }
.qa .answer { padding: 0 20px 18px; color: var(--muted); font-size: 15.2px; max-width: 76ch; }
.qa .answer a { color: var(--accent); border-bottom: 1px solid rgba(var(--accent-rgb),.3); }

/* --- Contact ------------------------------------------------------------ */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 3.4vw, 46px); align-items: start; }
.form { padding: clamp(22px, 2.6vw, 30px); background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-2); }
.field { margin-bottom: 14px; }
.field label { display: block; font-size: 13.4px; font-weight: 550; margin-bottom: 6px; }
.field input, .field select, .field textarea {
  width: 100%;
  padding: 12px 14px;
  font: inherit;
  font-size: 15px;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  transition: border-color .2s, box-shadow .2s;
}
.field textarea { min-height: 104px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: 0;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .12);
}
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form-note { margin-top: 12px; font-size: 12.6px; color: var(--dim); }
.hp { position: absolute; left: -9999px; opacity: 0; }

.contact-side .tick { font-size: 15px; }
.contact-side .big-link {
  display: block;
  font-family: var(--display);
  font-size: clamp(20px, 2.2vw, 27px);
  letter-spacing: -0.03em;
  margin-top: 6px;
  word-break: break-word;
}
.contact-side .big-link:hover { color: var(--accent); }

/* --- Pied de page ------------------------------------------------------- */
footer { background: var(--ink); color: #cbc6b9; padding-block: 54px 30px; }
footer a { color: #cbc6b9; }
footer a:hover { color: #fff; }
.foot-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 30px; }
.foot-grid h4 { font-family: var(--font); font-size: 12.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: #fff; margin-bottom: 14px; }
.foot-grid ul { list-style: none; padding: 0; display: grid; gap: 8px; font-size: 14.2px; }
.foot-brand .logo { color: #fff; }
/* Même raison : sur l'encre, le bloc du logo prend la variante claire. */
.foot-brand .logo-mark rect { fill: var(--accent-clair); }
.foot-brand p { margin-top: 14px; font-size: 14.2px; max-width: 38ch; }
.foot-bottom {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px;
  margin-top: 40px; padding-top: 22px;
  border-top: 1px solid rgba(255,255,255,.12);
  font-size: 12.6px;
  color: #8f8a7d;
}

/* Liens d'appel : le combiné prend l'accent, le numéro passe en chasse fixe
   pour que les cinq paires s'alignent. Le numéro n'était visible nulle part
   sur mobile, alors que c'est de là qu'arrive l'essentiel du trafic. */
[data-tel-lien] { display: inline-flex; align-items: center; gap: 8px; }
[data-tel-lien] svg { flex: none; color: var(--accent); }
.bleed-ink [data-tel-lien] svg { color: var(--accent-clair); }
[data-tel-lien] [data-tel-texte] { font-variant-numeric: tabular-nums; }
a.big-link[data-tel-lien] { font-variant-numeric: tabular-nums; }
.drawer-tel { font-weight: 600; }
.drawer .drawer-tel svg { color: var(--accent); }

/* --- Barre d'action collante (mobile) ---------------------------------- */
.sticky-cta {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 40;
  display: none;
  gap: 9px;
  padding: 10px var(--pad) calc(10px + env(safe-area-inset-bottom));
  background: rgba(251, 250, 246, .975);
  border-top: 1px solid var(--line);
}
.sticky-cta .btn { flex: 1; padding: 13px 16px; font-size: 14.5px; }

/* --- Pages internes ----------------------------------------------------- */
.doc { padding-block: clamp(40px, 6vw, 72px); }
.doc h1 { font-size: clamp(30px, 4.4vw, 46px); }
.doc h2 { font-family: var(--display); font-size: clamp(20px, 2.2vw, 26px); margin-top: 36px; }
.doc p, .doc li { color: var(--muted); margin-top: 11px; }
.doc ul { padding-left: 20px; }
/* Les liens de prose passent en orange souligné — mais pas les boutons, qui
   ont déjà leur propre couleur : sans le :not(.btn), un bouton principal se
   retrouvait en orange sur orange, donc illisible. */
.doc a:not(.btn) { color: var(--accent); border-bottom: 1px solid rgba(var(--accent-rgb),.3); }
.crumbs { font-size: 13.2px; color: var(--dim); margin-bottom: 14px; }
.crumbs a { color: var(--muted); }
.crumbs a:hover { color: var(--accent); }

/* --- Apparition discrète ------------------------------------------------ */

/* --- Responsive --------------------------------------------------------- */
@media (max-width: 1000px) {
  .hero-grid { grid-template-columns: 1fr; }
  .about, .contact-grid { grid-template-columns: 1fr; }
  .work.wide .work-in { grid-template-columns: 1fr; }
  .work.wide .work-shot { order: 0; }
  .foot-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 860px) {
  .nav-links, .nav-tel, .nav-tel.is-tel { display: none; }
  .nav-right .btn { display: none; }
  .burger { display: block; }
  .sticky-cta { display: flex; }
  body { padding-bottom: 66px; }
  .works { grid-template-columns: 1fr; }
  .work { grid-column: span 1 !important; }
}
@media (max-width: 560px) {
  .field-row { grid-template-columns: 1fr; }
  .foot-grid { grid-template-columns: 1fr; }
  .hero-actions .btn { width: 100%; }
}

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

:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }

@media print {
  .nav, .sticky-cta, .drawer, .saut, .crumbs, footer { display: none; }
  body { background: #fff; color: #000; }
  /* Les pages légales et les CGV sont faites pour être signées sur papier :
     on rend l'encre lisible, on garde les blocs entiers, et on écrit l'adresse
     des liens sortants — un contrat imprimé ne se clique pas. */
  .doc { padding-block: 0; max-width: none; }
  .doc h2 { break-after: avoid; page-break-after: avoid; }
  .doc p, .doc li, .retenir, .compare tr { break-inside: avoid; page-break-inside: avoid; }
  .retenir { border-left: 2px solid #000; background: none; }
  .doc a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 11px; color: #555; }
}