/* Cube Concept, style G : le mélange choisi par Emeric (22/10/2026).
   Thème sombre (B), bandes photo en tête qui servent de menu (B, comme Reservoir), titres et typo Inter (D),
   boutons, chiffres colorés et liste d'arguments (A), listes et filets Reservoir (C),
   blocs blanc et orange avec grand titre écrit sur la photo (D), icônes au trait (F). Tokens dans DESIGN.md. */

:root {
  --bg: #141516;
  --tile: #1E1F22;
  --stone: #2A2B2E;
  --deep: #0E0F10;
  --ink: #FFFFFF;
  --text: rgba(255, 255, 255, .78);
  --muted: #A3A4A6;
  --line: rgba(255, 255, 255, .12);
  --orange: #F08C00;
  --orange-hover: #FF9F1A;
  --dark: #141516;
  --error: #B3261E;

  --ls: -.03em;
  --r: 12px;
  --r-lg: 16px;
  --ease: cubic-bezier(.22, 1, .36, 1);
  --gut: max(24px, calc((100vw - 1360px) / 2));
  --sec: clamp(88px, 9vw, 140px);
}

*, *::before, *::after { box-sizing: border-box; }
html, body { overflow-x: clip; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 88px; }
body { margin: 0; background: var(--bg); color: var(--text); font-family: "Inter", system-ui, sans-serif; font-size: 17px; line-height: 1.6; letter-spacing: -.01em; -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p, ul, ol, figure, blockquote { margin: 0; padding: 0; }
button, input { font: inherit; color: inherit; letter-spacing: inherit; }
:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; }

.wrap { padding-inline: var(--gut); }
.sec { padding-top: var(--sec); }
.todo { color: var(--muted); border-bottom: 1px dashed var(--stone); }
.u { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Typo (D) ---------- */
.eyebrow { display: block; margin-bottom: 24px; font-size: 14px; line-height: 1; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; color: var(--orange); }
.h2 { font-size: clamp(36px, 4.4vw, 64px); line-height: .95; font-weight: 600; letter-spacing: var(--ls); color: var(--ink); max-width: 20ch; }
.h3 { font-size: clamp(20px, 1.7vw, 24px); line-height: 1.2; font-weight: 600; letter-spacing: -.02em; color: var(--ink); }
.lead { max-width: 52ch; font-size: clamp(18px, 1.5vw, 22px); line-height: 1.45; color: var(--text); }
.head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; align-items: end; padding-top: 32px; border-top: 1px solid var(--line); }
.head .lead { justify-self: end; }

/* ---------- Boutons (A) ---------- */
.btn {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 0 24px;
  border: 1px solid var(--orange);
  border-radius: var(--r);
  background: var(--orange);
  color: var(--dark);
  font-size: 16px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  /* motion: le texte change de couleur avec le remplissage */
  transition: color .35s var(--ease), border-color .35s var(--ease);
}
.btn::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--ink); transform: translateX(-101%); /* motion: le bouton se remplit au survol, il est cliquable */ transition: transform .45s var(--ease); }
.btn:hover::before { transform: none; }
.btn:hover { border-color: var(--ink); color: var(--dark); }
.btn--light { background: transparent; border-color: rgba(255, 255, 255, .4); color: var(--ink); }
.btn--light::before { background: var(--ink); }
.btn--light:hover { color: var(--dark); border-color: var(--ink); }
.btn--block { width: 100%; }
.btn svg { width: 18px; height: 18px; flex: none; }

/* ---------- En-tête ---------- */
.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 32px;
  padding: 14px var(--gut);
  background: rgba(20, 21, 22, .86);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  /* motion: l'en-tête s'efface quand on lit et revient quand on remonte */
  transition: transform .45s var(--ease);
}
.nav.is-hidden { transform: translateY(-100%); }
.brand { display: flex; align-items: center; flex: none; }
/* Logo officiel horizontal (symbole + nom + baseline), lisible à 40 px de haut. */
.brand img { width: auto; height: 40px; }
.foot-brand { display: grid; gap: 22px; align-content: start; }
.foot-brand img { width: min(100%, 300px); height: auto; }
.nav-links { display: flex; gap: 28px; margin-left: auto; }
.nav-links a { font-size: 15px; font-weight: 500; color: var(--ink); }
.nav-links a:hover { color: var(--orange); }
.nav-phone { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 600; color: var(--ink); }
.nav-phone svg { width: 18px; height: 18px; }
.nav .btn { min-height: 44px; padding: 0 18px; font-size: 15px; }

/* ---------- Haut de page ---------- */
.hero { padding-top: 112px; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 56px; align-items: end; }
.hero-side { padding-bottom: 6px; }
.hero h1 {
  font-size: clamp(44px, min(5.2vw, 8.4vh), 84px);
  line-height: .95;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--ls);
  color: var(--ink);
}
.hero h1 em { font-style: normal; color: var(--orange); }
.hero-sub { max-width: 46ch; font-size: clamp(18px, 1.5vw, 22px); line-height: 1.45; color: var(--text); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 32px; }
.usp { display: flex; flex-wrap: wrap; gap: 10px 28px; margin-top: 32px; padding-top: 22px; list-style: none; border-top: 1px solid var(--line); font-size: 15px; color: var(--text); }
.usp li { display: flex; align-items: center; gap: 8px; }
.usp svg { width: 18px; height: 18px; flex: none; color: var(--orange); }

/* Carte formulaire (claire, pour sortir du fond sombre) */
.form {
  --ink: #1C1D1F;
  --text: #2A2B2D;
  --muted: #5E5F61;
  --line: #DCDCDC;
  --tile: #F2F2F0;
  padding: 28px;
  border-radius: var(--r-lg);
  background: #FFFFFF;
  color: var(--text);
}
.form-head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin-bottom: 14px; }
.form-head p { font-size: 24px; line-height: 1.1; font-weight: 600; letter-spacing: var(--ls); color: var(--ink); }
.form-step { font-size: 13px; color: var(--muted); }
.form-bar { height: 3px; border-radius: 3px; margin-bottom: 22px; background: linear-gradient(to right, var(--orange) var(--p, 50%), var(--tile) var(--p, 50%)); }
.field { display: grid; gap: 6px; min-width: 0; margin-bottom: 14px; }
.field label { font-size: 14px; font-weight: 600; color: var(--ink); }
.field input { width: 100%; min-width: 0; height: 52px; padding: 0 14px; border: 1px solid var(--line); border-radius: var(--r); background: #FFFFFF; font-size: 16px; color: var(--ink); }
.field input:focus { outline: none; border-color: var(--ink); }
.field .err, .choice .err { display: none; margin-top: 2px; font-size: 13px; color: var(--error); }
.field.has-error input { border-color: var(--error); }
.field.has-error .err, .choice.has-error .err { display: block; }
.form .btn::before { background: var(--ink); }
.form .btn:hover { color: #FFFFFF; border-color: var(--ink); }
.form-note { margin-top: 14px; font-size: 13px; line-height: 1.5; color: var(--muted); }
.form-note a { color: var(--ink); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.form-fail { display: none; margin-top: 14px; padding: 12px 14px; border-radius: var(--r); background: var(--tile); font-size: 13px; color: var(--ink); }
.form-fail.is-on { display: block; }
.form-fail a { font-weight: 600; text-decoration: underline; }
.step2 { display: none; }
.is-step2 .step1 { display: none; }
.is-step2 .step2 { display: block; }
.step2-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 6px 16px; margin-bottom: 16px; }
.step2-head p { font-weight: 600; color: var(--ink); }
.back { padding: 0; border: 0; background: none; font-size: 13px; color: var(--muted); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.back:hover { color: var(--ink); }
.choice { min-width: 0; margin: 0 0 14px; padding: 0; border: 0; }
.choice legend { margin-bottom: 8px; font-size: 14px; font-weight: 600; color: var(--ink); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chips label { position: relative; }
.chips input { position: absolute; inset: 0; opacity: 0; }
.chips span { display: inline-flex; align-items: center; min-height: 38px; padding: 0 14px; border: 1px solid var(--line); border-radius: 999px; font-size: 14px; color: var(--ink); cursor: pointer; /* motion: la pastille montre qu'elle est choisie */ transition: background-color .2s var(--ease), border-color .2s var(--ease); }
.chips input:checked + span { background: var(--orange); border-color: var(--orange); }
.chips input:focus-visible + span { outline: 2px solid var(--orange); outline-offset: 2px; }
.choice.has-error .chips span { border-color: var(--error); }

/* Bandes photo (B) : un menu des métiers, immobile, cliquable */
.panels { display: flex; gap: 8px; height: clamp(320px, 52vh, 600px); margin: 48px calc(-1 * var(--gut)) 0; overflow: hidden; }
.panel { position: relative; flex: 1 1 0; min-width: 0; overflow: hidden; background: var(--stone); color: #FFFFFF; /* motion: la bande survolée s'ouvre, elle annonce le métier */ transition: flex-grow .7s var(--ease); }
.panel.is-active { flex-grow: 3.2; }
.panel img { position: absolute; top: 0; left: 50%; width: var(--open-w, 62vw); max-width: none; height: 100%; object-fit: cover; transform: translateX(-50%); }
.panel::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(14, 15, 16, .05) 35%, rgba(14, 15, 16, .78)); }
.panel-label { position: absolute; z-index: 1; left: 20px; right: 20px; bottom: 20px; display: grid; gap: 10px; }
.panel-ico { width: 44px; height: 44px; display: grid; place-items: center; border-radius: var(--r); background: var(--orange); color: var(--dark); }
.panel-ico svg { width: 30px; height: 30px; }
.panel-name { font-size: clamp(20px, 1.8vw, 28px); line-height: 1.1; font-weight: 700; letter-spacing: var(--ls); white-space: nowrap; }
.panel-go { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; opacity: 0; /* motion: le lien n'apparaît que sur la bande ouverte */ transition: opacity .4s var(--ease); }
.panel-go svg { width: 16px; height: 16px; }
.panel.is-active .panel-go { opacity: 1; }

/* ---------- Prix : arguments et formulaire, sous les bandes ---------- */
.quote { padding-block: var(--sec); }
.quote-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(360px, .85fr); gap: 72px; align-items: center; }
.quote-text { display: grid; gap: 0; align-content: start; }
.quote-text .lead { margin-top: 20px; }
.quote .usp { display: grid; gap: 12px; margin-top: 28px; font-size: 16px; }

/* ---------- Chiffres (A) ---------- */
.figs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-radius: var(--r-lg); background: var(--tile); }
.fig { padding: 32px 28px; display: grid; gap: 10px; }
.fig + .fig { border-left: 1px solid var(--line); }
.fig b { font-size: clamp(44px, 4.6vw, 72px); line-height: 1; font-weight: 600; letter-spacing: -.06em; color: var(--ink); font-variant-numeric: tabular-nums; }
.fig b em { font-style: normal; color: var(--orange); }
.fig span { font-size: 15px; line-height: 1.45; color: var(--muted); }

/* ---------- Métiers (liste C + icônes F) ---------- */
.list { margin: 56px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.list-row { display: grid; grid-template-columns: 56px 64px minmax(0, 1fr) minmax(0, 1.25fr) 230px; align-items: center; gap: 28px; padding: 30px 0; border-bottom: 1px solid var(--line); color: var(--ink); }
.list-num { font-size: 15px; font-weight: 600; color: var(--orange); font-variant-numeric: tabular-nums; }
.list-ico { width: 56px; height: 56px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: var(--r); color: var(--ink); /* motion: l'icône prend la couleur d'action au survol */ transition: background-color .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease); }
.list-ico svg { width: 36px; height: 36px; }
.list-row:hover .list-ico { background: var(--orange); border-color: var(--orange); color: var(--dark); }
.list-name { font-size: clamp(22px, 2vw, 30px); line-height: 1.1; font-weight: 600; letter-spacing: var(--ls); /* motion: la ligne survolée glisse, elle est cliquable */ transition: transform .4s var(--ease); }
.list-row:hover .list-name { transform: translateX(10px); }
.list-desc { font-size: 16px; line-height: 1.6; color: var(--text); max-width: 52ch; }
.list-price { font-size: 14px; color: var(--muted); text-align: right; }
.list-price b { display: block; margin-top: 4px; font-size: 18px; font-weight: 600; color: var(--ink); }

/* ---------- Chantiers (blocs D) ---------- */
.projects { display: grid; gap: 96px; margin-top: 64px; }
.pj-img { position: relative; height: clamp(300px, 34vw, 420px); border-radius: var(--r-lg); overflow: hidden; background: var(--stone); }
.pj-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pj-img::after { content: ""; position: absolute; inset: auto 0 0 0; height: 60%; background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, .82)); }
.pj-img h3 { position: absolute; z-index: 1; left: 0; right: 0; bottom: 28px; text-align: center; font-size: clamp(56px, 8.2vw, 124px); line-height: .85; font-weight: 400; letter-spacing: -.045em; color: #FFFFFF; }
.pj-panels { display: grid; grid-template-columns: 1.06fr 1fr; gap: 16px; margin-top: 12px; }
.pj-panel { min-height: 300px; padding: 36px 40px; border-radius: var(--r-lg); display: flex; flex-direction: column; justify-content: space-between; gap: 28px; }
.pj-panel p { font-size: clamp(20px, 1.9vw, 28px); line-height: 1.15; font-weight: 500; letter-spacing: var(--ls); }
.pj-panel--orange { background: var(--orange); color: var(--dark); }
.pj-panel--white { background: #FFFFFF; color: #1C1D1F; }
.pj-panel--tile { background: var(--tile); color: var(--ink); }
.pj-tag { font-size: 13px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; }
.pj-facts { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; font-size: 16px; }
.pj-facts li { display: flex; align-items: center; gap: 10px; }
.pj-facts svg { width: 18px; height: 18px; flex: none; color: var(--orange); }
.pj-panel--orange .pj-facts svg { color: var(--dark); }
.pj-sign { display: flex; align-items: center; gap: 14px; font-size: 15px; }
.pj-sign .av { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; background: #F2F2F0; font-size: 14px; font-weight: 700; color: #1C1D1F; }
.pj-sign b { display: block; font-size: 16px; }

/* ---------- L'ingénieur (C) ---------- */
.eng { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 72px; align-items: start; margin-top: 56px; }
.eng-head { display: grid; gap: 18px; align-content: start; }
.portrait { position: relative; width: min(100%, 320px); aspect-ratio: 4 / 5; border-radius: var(--r-lg); background: var(--tile); overflow: hidden; }
.portrait-empty { position: absolute; left: 14px; bottom: 14px; padding: 8px 12px; border-radius: 999px; background: var(--stone); font-size: 13px; color: var(--ink); }
.eng-head .tag { display: block; margin-top: 4px; font-size: 14px; color: var(--muted); }
.eng-text { display: grid; gap: 28px; align-content: start; }
.statement { font-size: clamp(24px, 2.4vw, 36px); line-height: 1.2; font-weight: 600; letter-spacing: var(--ls); color: var(--ink); }
.js [data-scrub] .l { opacity: .18; /* motion: la phrase s'allume au rythme de la lecture */ transition: opacity .25s; }
.js [data-scrub] .l.is-lit { opacity: 1; }
.steps { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.steps li { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 18px; align-items: start; padding: 18px 0; border-bottom: 1px solid var(--line); }
.tile { width: 52px; height: 52px; display: grid; place-items: center; border-radius: var(--r); background: var(--tile); color: var(--orange); }
.tile svg { width: 26px; height: 26px; }
.steps b { display: block; font-size: 18px; font-weight: 600; letter-spacing: -.02em; color: var(--ink); }
.steps span { font-size: 16px; line-height: 1.6; color: var(--text); }

/* ---------- Zone et FAQ (C) ---------- */
.zone-list { margin: 40px 0 0; padding: 0; list-style: none; }
.zone-list li { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 16px; padding: 18px 0; border-top: 1px solid var(--line); }
.zone-list li:last-child { border-bottom: 1px solid var(--line); }
.zone-list b { font-size: 18px; font-weight: 600; letter-spacing: -.02em; color: var(--ink); }
.faq-wrap { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 64px; align-items: start; padding-top: 32px; border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq details:first-child { border-top: 1px solid var(--line); }
.faq summary { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 22px 0; list-style: none; cursor: pointer; font-size: 18px; line-height: 1.4; font-weight: 600; letter-spacing: -.02em; color: var(--ink); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: none; width: 30px; height: 30px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; font-size: 18px; font-weight: 400; line-height: 1; /* motion: le plus devient une croix, la réponse est ouverte */ transition: transform .3s var(--ease), background-color .3s var(--ease), border-color .3s var(--ease), color .3s var(--ease); }
.faq details[open] summary::after { transform: rotate(45deg); background: var(--orange); border-color: var(--orange); color: var(--dark); }
.faq details p { max-width: 64ch; padding: 0 44px 24px 0; font-size: 16px; line-height: 1.7; }

/* ---------- Appel final et pied de page ---------- */
.cta { margin-top: var(--sec); padding: 72px var(--gut); background: var(--tile); }
.cta-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; align-items: end; }
.cta .h2 { max-width: 16ch; }
.cta-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; }
.foot { padding: 80px var(--gut) 28px; background: var(--deep); color: rgba(255, 255, 255, .7); }
.foot-top { display: grid; grid-template-columns: 1.4fr repeat(3, minmax(0, 1fr)); gap: 32px; }
.foot-pitch { font-size: 20px; line-height: 1.35; font-weight: 600; letter-spacing: -.02em; color: var(--ink); max-width: 22ch; }
.foot-col { display: grid; gap: 10px; align-content: start; font-size: 15px; }
.foot-col .label { margin-bottom: 6px; font-weight: 700; color: var(--ink); }
.foot-col a:hover { color: var(--orange); }
.foot-word { margin-top: 64px; font-size: min(250px, calc((100vw - 2 * var(--gut)) / 7.3)); /* largeur du mot = 7,2 fois sa taille (mesuré) */ line-height: .8; font-weight: 700; letter-spacing: -.06em; text-transform: uppercase; white-space: nowrap; color: var(--ink); }
.foot-copy { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--line); font-size: 13px; }
.foot-copy a:hover { color: var(--ink); }

/* ---------- Barre mobile ---------- */
.mbar { display: none; }

/* ---------- Apparition ---------- */
.js .fade { opacity: 0; transform: translateY(24px); /* motion: le contenu entre quand on y arrive, une seule fois */ transition: opacity .9s var(--ease), transform .9s var(--ease); }
.js .fade.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
  .js .fade { opacity: 1; transform: none; }
  .js [data-scrub] .l { opacity: 1; }
}

/* ---------- Tablette ---------- */
@media (max-width: 1100px) {
  .nav-links { display: none; }
  .nav-phone { margin-left: auto; }
  .list-row { grid-template-columns: 40px 56px minmax(0, 1fr) 200px; }
  .list-desc { grid-column: 3 / -1; grid-row: 2; }
}
@media (max-width: 1024px) {
  .hero-grid, .eng, .faq-wrap, .head, .cta-grid, .quote-grid { grid-template-columns: 1fr; gap: 32px; }
  .head .lead { justify-self: start; }
  .cta-actions { justify-content: flex-start; }
  .figs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fig:nth-child(3) { border-left: 0; }
  .fig:nth-child(n + 3) { border-top: 1px solid var(--line); }
  .foot-top { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .foot-top > :first-child { grid-column: 1 / -1; }
  .foot { padding-bottom: 96px; }
  .mbar { position: fixed; inset: auto 0 0 0; z-index: 60; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 8px var(--gut) calc(8px + env(safe-area-inset-bottom)); background: var(--bg); border-top: 1px solid var(--line); /* motion: la barre s'efface quand le formulaire est à l'écran */ transition: transform .3s var(--ease); }
  .mbar.is-off { transform: translateY(110%); }
  .mbar .btn { min-height: 48px; }
}

/* ---------- Téléphone ---------- */
@media (max-width: 767px) {
  :root { --gut: 16px; }
  .nav { padding-block: 10px; gap: 12px; }
  .brand img { height: 32px; }
  .nav > .btn { display: none; }
  .nav-phone span { display: none; }
  .nav-phone { width: 44px; height: 44px; justify-content: center; border: 1px solid var(--line); border-radius: var(--r); }
  .hero { padding-top: 88px; }
  .hero h1 { font-size: 40px; }
  .hero-grid { gap: 20px; }

  .quote { padding-top: 56px; }
  .hero-actions .btn { flex: 1 1 auto; }
  .usp { display: grid; gap: 10px; }
  .form { padding: 20px 16px; }
  .panels { flex-direction: column; gap: 6px; height: 64svh; margin-top: 32px; }
  .panel.is-active { flex-grow: 3.6; }
  .panel img { width: 100%; height: var(--open-h, 64svh); top: 50%; left: 0; transform: translateY(-50%); }
  .panel-label { left: 14px; right: 14px; bottom: 12px; grid-template-columns: 40px minmax(0, 1fr); align-items: center; }
  .panel-ico { width: 40px; height: 40px; }
  .panel-go { display: none; }
  .fig { padding: 22px 18px; }
  .list-row { grid-template-columns: 44px minmax(0, 1fr); gap: 10px 16px; padding: 24px 0; }
  .list-num { display: none; }
  .list-ico { width: 44px; height: 44px; }
  .list-ico svg { width: 28px; height: 28px; }
  .list-desc, .list-price { grid-column: 2; grid-row: auto; }
  .list-price { text-align: left; }
  .pj-panels { grid-template-columns: 1fr; }
  .pj-panel { min-height: 0; padding: 26px 22px; }
  .eng-head { grid-template-columns: 140px minmax(0, 1fr); align-items: end; gap: 16px; }
  .portrait { width: 140px; }
  .zone-list li { grid-template-columns: 1fr; gap: 4px; }
  .faq summary { font-size: 16px; padding: 18px 0; }
  .faq details p { padding-right: 0; }
  .cta { padding: 56px var(--gut); }
  .foot-top { grid-template-columns: 1fr 1fr; }
}

.hero-sub strong { font-weight: 600; color: var(--ink); }

/* Note Facebook (haut de page) */
.rating { display: flex; align-items: center; gap: 10px; margin-top: 20px; font-size: 15px; color: var(--text); }
.rating b { font-weight: 700; color: var(--ink); }
.rating-fb { width: 22px; height: 22px; flex: none; color: #1877F2; } /* token-exempt: bleu officiel Facebook, logo de la source des avis */
.rating-stars { position: relative; display: inline-flex; line-height: 0; }
.rating-stars svg { width: 17px; height: 17px; }
.rating-off { display: inline-flex; color: var(--line); }
.rating-on { position: absolute; inset: 0 auto 0 0; display: inline-flex; overflow: hidden; width: calc(var(--r) / 5 * 100%); color: #FFC51A; } /* token-exempt: jaune des étoiles de note, demandé par Emeric le 22/10 */

/* ---------- Pages de service ---------- */
.svc-photo { height: clamp(320px, 46vw, 560px); margin-top: 48px; }
.pj-word { position: absolute; z-index: 1; left: 0; right: 0; bottom: 28px; padding: 0 var(--gut); text-align: center; font-size: clamp(48px, 8.2vw, 124px); line-height: .85; font-weight: 400; letter-spacing: -.045em; color: #FFFFFF; }
.figs--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.nav-links a[aria-current="page"] { color: var(--orange); }
@media (max-width: 1024px) {
  .figs--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .figs--3 .fig:nth-child(3) { border-left: 1px solid var(--line); }
  .figs--3 .fig:nth-child(n + 3) { border-top: 0; }
}
@media (max-width: 767px) {
  .figs--3 { grid-template-columns: 1fr; }
  .figs--3 .fig + .fig { border-left: 0; border-top: 1px solid var(--line); }
  .svc-photo { margin-top: 32px; height: 56svh; }
}

/* ---------- Menus déroulants (un par métier) ---------- */
.dd { position: relative; }
.dd-btn { display: inline-flex; align-items: center; gap: 6px; padding: 10px 0; border: 0; background: none; font: inherit; font-size: 15px; font-weight: 500; color: var(--ink); cursor: pointer; }
.dd-btn svg { width: 16px; height: 16px; /* motion: le chevron se retourne quand le menu s'ouvre */ transition: transform .25s var(--ease); }
.dd:hover .dd-btn, .dd.is-current .dd-btn { color: var(--orange); }
.dd-menu { position: absolute; top: 100%; left: -14px; z-index: 5; display: none; min-width: 250px; padding: 8px; border: 1px solid var(--line); border-radius: var(--r); background: var(--tile); }
.dd-menu::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px; }
.dd:hover .dd-menu, .dd:focus-within .dd-menu, .dd.is-open .dd-menu { display: grid; }
.dd:hover .dd-btn svg, .dd.is-open .dd-btn svg { transform: rotate(180deg); }
.nav-links .dd-menu a { padding: 10px 12px; border-radius: 8px; font-size: 15px; font-weight: 500; white-space: nowrap; color: var(--text); }
.nav-links .dd-menu a:last-child { margin-top: 4px; border-top: 1px solid var(--line); border-radius: 0 0 8px 8px; color: var(--ink); }
.nav-links .dd-menu a:hover { background: var(--stone); color: var(--ink); }
.nav-links .dd-menu a[aria-current="page"] { color: var(--orange); }
.nav-burger { display: none; width: 44px; height: 44px; place-items: center; border: 1px solid var(--line); border-radius: var(--r); background: none; color: var(--ink); cursor: pointer; }
.nav-burger svg { width: 22px; height: 22px; }

/* Téléphone et tablette : le menu s'ouvre en panneau sous l'en-tête, chaque métier se déplie */
@media (max-width: 1199px) {
  .nav-burger { display: grid; order: 10; }
  .nav.is-menu .nav-links { position: absolute; top: 100%; left: 0; right: 0; display: grid; gap: 0; max-height: calc(100svh - 72px); overflow-y: auto; margin: 0; padding: 8px var(--gut) 20px; background: var(--bg); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
  .nav.is-menu .dd { border-bottom: 1px solid var(--line); }
  .nav.is-menu .dd-btn { width: 100%; justify-content: space-between; padding: 16px 0; font-size: 18px; }
  .nav.is-menu .dd-menu { position: static; display: none; min-width: 0; margin: 0 0 12px; padding: 4px; }
  .nav.is-menu .dd.is-open .dd-menu { display: grid; }
  .nav.is-menu .dd:hover .dd-btn svg { transform: none; }
  .nav.is-menu .dd.is-open .dd-btn svg { transform: rotate(180deg); }
}
/* Titres des pages de service : douleur + promesse, plus longs que l'accueil, donc un cran plus petits */
.hero--svc h1 { font-size: clamp(40px, min(4.3vw, 7.4vh), 66px); }
@media (max-width: 767px) { .hero--svc h1 { font-size: 34px; } }

/* ---------- Réalisations en carrousel : mêmes blocs, plus compacts, alignés à l'horizontale ---------- */
.projects { display: flex; gap: 20px; margin-top: 48px; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none; }
.projects::-webkit-scrollbar { display: none; }
.projects:focus-visible { outline-offset: 6px; }
.project { flex: 0 0 min(600px, 86%); min-width: 0; scroll-snap-align: start; }
.projects .pj-img { height: clamp(220px, 22vw, 300px); }
.projects .pj-img h3 { bottom: 18px; font-size: clamp(40px, 4.4vw, 68px); }
.projects .pj-panels { gap: 10px; margin-top: 10px; }
.projects .pj-panel { min-height: 220px; padding: 24px 26px; gap: 20px; }
.projects .pj-panel p { font-size: clamp(17px, 1.35vw, 20px); line-height: 1.25; }
.projects .pj-facts { gap: 8px; font-size: 14px; }
.car-nav { display: flex; justify-content: flex-end; gap: 8px; margin-top: 20px; }
.car-nav[hidden] { display: none; }
.car-btn { width: 48px; height: 48px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; background: none; color: var(--ink); cursor: pointer; /* motion: la flèche se remplit au survol, elle dit qu'on peut avancer */ transition: background-color .2s, border-color .2s, opacity .2s; }
.car-btn:hover:not(:disabled) { background: var(--orange); border-color: var(--orange); color: var(--dark); }
.car-btn:disabled { opacity: .3; cursor: default; }
.car-btn svg { width: 20px; height: 20px; }
.js-car-prev svg { transform: rotate(180deg); }
/* Titres de réalisation plus précis, donc plus longs : un cran plus petits */
.projects .pj-img h3 { padding: 0 20px; font-size: clamp(34px, 3.6vw, 54px); line-height: .92; }
/* Photo d'ouverture des pages de service : pleine largeur, toujours au format 21/9 */
.svc-photo { height: auto; aspect-ratio: 21 / 9; margin-inline: calc(-1 * var(--gut)); border-radius: 0; }
@media (max-width: 767px) { .svc-photo { height: auto; } }

/* Formulaire : description (zone de texte) et date, au même dessin que les champs */
.field textarea { width: 100%; min-width: 0; min-height: 120px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r); background: #FFFFFF; font: inherit; font-size: 16px; line-height: 1.5; color: var(--ink); resize: vertical; }
.field textarea:focus { outline: none; border-color: var(--ink); }
.field.has-error textarea { border-color: var(--error); }
.field input::placeholder, .field textarea::placeholder { color: var(--muted); }

/* ---------- Avant / après (image d'ouverture de la rénovation) : coupe fixe en diagonale ---------- */
.ba::after { display: none; }
.ba .ba-after { clip-path: polygon(56% 0, 100% 0, 100% 100%, 44% 100%); }
.ba-line { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; pointer-events: none; }
.ba-line line { stroke: #FFFFFF; stroke-width: 3; vector-effect: non-scaling-stroke; }

/* Formulaire en une seule étape : deux champs côte à côte quand il y a la place, listes déroulantes au dessin des champs */
.form-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 14px; }
.field select { width: 100%; min-width: 0; height: 52px; padding: 0 14px; border: 1px solid var(--line); border-radius: var(--r); background: #FFFFFF; font: inherit; font-size: 16px; color: var(--ink); }
.field select:focus { outline: none; border-color: var(--ink); }
.field.has-error select { border-color: var(--error); }
.form .btn--block svg { order: -1; }
@media (max-width: 767px) { .form-row { grid-template-columns: 1fr; } }
/* Téléphone : blocs de couleur des réalisations compacts (pas de hauteur minimale, texte plus petit) */
@media (max-width: 767px) {
  .projects .pj-panel { min-height: 0; padding: 18px 18px 20px; gap: 12px; justify-content: flex-start; }
  .projects .pj-panel p { font-size: 16px; line-height: 1.35; }
  .projects .pj-facts { gap: 6px; font-size: 13px; }
  .projects .pj-panels { gap: 8px; margin-top: 8px; }
}

/* ---------- Téléphone : chaque section tient à peu près dans un écran (375 × 812) ---------- */
@media (max-width: 767px) {
  :root { --sec: 56px; }
  .eyebrow { margin-bottom: 12px; font-size: 12px; }
  .h2 { font-size: 30px; }
  .lead { font-size: 16px; }
  .head { gap: 12px; padding-top: 20px; }

  .hero { padding-top: 76px; }
  .hero-grid { gap: 14px; }
  .hero-sub { font-size: 16px; }
  .hero-actions { margin-top: 18px; }
  .rating { margin-top: 14px; font-size: 13px; }
  .panels { height: 44svh; margin-top: 20px; }
  .hero--svc h1 { font-size: 30px; }
  .svc-photo { margin-top: 20px; }

  .fig { padding: 14px 12px; gap: 6px; }
  .fig b { font-size: 32px; }
  .fig span { font-size: 12px; line-height: 1.35; }
  .figs--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .figs--3 .fig + .fig { border-top: 0; border-left: 1px solid var(--line); }

  .list { margin-top: 20px; }
  .list-row { grid-template-columns: 36px minmax(0, 1fr); gap: 4px 12px; padding: 14px 0; }
  .list-ico { width: 36px; height: 36px; }
  .list-ico svg { width: 22px; height: 22px; }
  .list-name { font-size: 18px; }
  .list-desc { font-size: 14px; line-height: 1.45; }
  .list-price { font-size: 12px; }
  .list-price b { display: inline; margin: 0 0 0 6px; font-size: 13px; }

  .projects { margin-top: 20px; }
  .projects .pj-img { height: 170px; }
  .projects .pj-img h3 { bottom: 12px; font-size: 28px; }
  .car-nav { margin-top: 12px; }
  .car-btn { width: 40px; height: 40px; }

  .faq-wrap { gap: 16px; padding-top: 20px; }
  .faq summary { padding: 13px 0; font-size: 15px; }

  .quote { padding-block: 48px; }
  .quote-grid { gap: 20px; }
  .quote-text .lead { margin-top: 10px; }
  .quote .usp { display: none; }
  .form { padding: 16px 14px; }
  .form-head p { font-size: 20px; }
  .form-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 10px; }
  .field { gap: 4px; margin-bottom: 10px; }
  .field label { font-size: 13px; }
  .field input, .field select { height: 44px; font-size: 16px; }
  .field textarea { min-height: 76px; }
  .form-note { margin-top: 10px; font-size: 12px; }

  .foot { padding: 40px var(--gut) 20px; }
  .foot-top { gap: 20px; }
  .foot-pitch { font-size: 16px; }
  .foot-col { gap: 6px; font-size: 14px; }
  .foot-word { margin-top: 28px; }
  .foot-copy { margin-top: 18px; }
}
@media (max-width: 767px) {
  .hero h1 { font-size: 34px; }
  .hero--svc h1 { font-size: 30px; }
  .panels { height: 36svh; }
  #metier .head .lead, #metiers .head .lead { display: none; }
  .list-row { padding: 12px 0; }
  .quote { padding-block: 40px 32px; }
  .quote-text .lead { display: none; }
  .quote .h2 { font-size: 26px; }
  .field { margin-bottom: 8px; }
  .field textarea { min-height: 64px; }
}
/* Note Facebook rappelée sous le bouton du formulaire */
.rating--form { justify-content: center; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
/* Étoiles : taille fixe, sinon la couche jaune (plus étroite) les écrase et les décale */
.rating-stars svg { flex: none; }
/* Téléphone : bandes photo de l accueil plus hautes (demande d Emeric) */
@media (max-width: 767px) { .panels { height: 56svh; } .panel.is-active { flex-grow: 4.2; } }

/* ---------- Ordinateur et tablette : un cran plus compact (liste des métiers, réalisations, titres) ---------- */
@media (min-width: 768px) {
  :root { --sec: clamp(72px, 7vw, 112px); }
  .h2 { font-size: clamp(34px, 3.8vw, 56px); }
  .list { margin-top: 36px; }
  .list-row { gap: 20px; padding: 20px 0; }
  .list-ico { width: 48px; height: 48px; }
  .list-ico svg { width: 30px; height: 30px; }
  .list-name { font-size: clamp(20px, 1.6vw, 24px); }
  .list-desc { font-size: 15px; line-height: 1.55; }
  .list-price b { font-size: 16px; }
  .projects { margin-top: 36px; }
  .project { flex-basis: min(520px, 86%); }
  .projects .pj-img { height: clamp(200px, 18vw, 250px); }
  .projects .pj-img h3 { font-size: clamp(30px, 3vw, 46px); }
  .projects .pj-panel { min-height: 180px; padding: 20px 22px; gap: 16px; }
  .projects .pj-panel p { font-size: clamp(16px, 1.2vw, 18px); }
}
@media (min-width: 1101px) {
  .list-row { grid-template-columns: 48px 52px minmax(0, 1fr) minmax(0, 1.25fr) 210px; }
}
/* Réalisations : toutes les cartes à la même hauteur, les deux blocs de couleur à la même taille */
.projects { align-items: stretch; }
.project { display: flex; flex-direction: column; }
.projects .pj-img { flex: none; }
.projects .pj-panels { flex: 1; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
@media (max-width: 767px) { .projects .pj-panels { grid-template-columns: 1fr; grid-auto-rows: 1fr; } }

/* Barre du haut à 5 métiers : rien ne passe à la ligne ; numéro masqué (icône gardée) sur écran moyen ; menu compact sous 1 200 px */
.dd-btn, .nav-phone span, .nav .btn { white-space: nowrap; }
@media (max-width: 1365px) { .nav { gap: 22px; } .nav-links { gap: 20px; } .nav-phone span { display: none; } }
@media (max-width: 1199px) { .nav-links { display: none; } .nav-phone { margin-left: auto; } }
/* Champ piège anti-robots : invisible pour les visiteurs */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
/* Pages simples (merci, mentions légales, confidentialité) */
.simple-page { padding-bottom: var(--sec); }
.simple-inner { max-width: 760px; }
.simple-page h1 { font-size: clamp(40px, 5vw, 68px); }
.simple-body { margin-top: 36px; }
.legal { display: grid; gap: 22px; font-size: 16px; line-height: 1.65; color: var(--text); }
.legal b { color: var(--ink); }