/* SCBOI — charte sobre sur fond blanc : le rouge du logo en accent, l'encre pour le texte */
:root {
  --rouge: #E3211E;
  --rouge-fonce: #A31A17;
  --rouge-pale: #FDEDEB;
  --encre: #161312;
  --encre-douce: #3A302D;
  --blanc: #FFFFFF;
  --fond-doux: #F7F5F2;
  --trait: #E8E3DC;
  --titre: "Fraunces", Georgia, serif;
  --texte: "Manrope", system-ui, sans-serif;
  --rayon: 12px;
  --gouttiere: clamp(16px, 4vw, 48px);
  --entete: 76px;
  --ombre: 0 24px 60px -32px rgba(22, 19, 18, .28);
  --courbe: cubic-bezier(.2, .8, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--blanc);
  color: var(--encre);
  font: 400 17px/1.65 var(--texte);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg, canvas { display: block; max-width: 100%; }
a { color: inherit; }
button, input, textarea, select { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--rouge); outline-offset: 3px; border-radius: 4px; }
[hidden] { display: none !important; }

.evitement { position: absolute; left: 16px; top: -60px; z-index: 200; background: var(--encre); color: var(--blanc); padding: 10px 16px; border-radius: 8px; }
.evitement:focus { top: 12px; }
.conteneur { width: min(1200px, 100% - 2 * var(--gouttiere)); margin-inline: auto; }

/* ---------- typographie ---------- */
.titre-xl, .titre-l, .titre-m, h3 { font-family: var(--titre); font-weight: 500; letter-spacing: -.02em; margin: 0; }
.titre-xl { font-size: clamp(42px, 6.6vw, 92px); line-height: 1; font-variation-settings: "opsz" 144; }
.titre-l { font-size: clamp(32px, 4.2vw, 54px); line-height: 1.06; font-variation-settings: "opsz" 120; }
.titre-m { font-size: clamp(26px, 2.6vw, 34px); line-height: 1.15; }
.titre-xl em, .titre-l em { font-style: normal; color: var(--rouge); }
.chapo { font-size: clamp(17px, 1.4vw, 19px); max-width: 54ch; margin: 18px 0 0; color: var(--encre-douce); }
.surtitre {
  display: inline-flex; align-items: center; gap: 12px; margin: 0 0 18px;
  font: 800 12px/1.35 var(--texte); letter-spacing: .16em; text-transform: uppercase; color: var(--rouge);
}
/* les trois toits du logo, en signature */
.surtitre::before {
  content: ""; width: 22px; height: 14px; flex: none;
  background: repeating-linear-gradient(180deg, var(--rouge) 0 3px, transparent 3px 5.5px);
  clip-path: polygon(22% 0, 78% 0, 100% 100%, 0 100%);
}
.note { font-size: 14px; color: var(--encre-douce); margin: 14px 0 0; }
.mot { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .08em; margin-bottom: -.08em; }
.mot > span { display: inline-block; will-change: transform; }

/* ---------- boutons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; position: relative; overflow: hidden; isolation: isolate;
  min-height: 50px; padding: 0 24px; border-radius: 6px; border: 1.5px solid transparent;
  font: 700 15px/1 var(--texte); text-decoration: none; cursor: pointer; transition: color .3s, border-color .3s;
}
/* remplissage qui glisse au survol */
.btn::before { content: ""; position: absolute; inset: 0; z-index: -1; transform: scaleX(0); transform-origin: right; transition: transform .45s var(--courbe); }
.btn:hover::before { transform: scaleX(1); transform-origin: left; }
.btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .3s var(--courbe); }
.btn:hover svg { transform: translateX(3px); }
.btn-rouge { background: var(--rouge); color: var(--blanc); }
.btn-rouge::before { background: var(--rouge-fonce); }
.btn-ligne { border-color: var(--encre); color: var(--encre); background: transparent; }
.btn-ligne::before { background: var(--encre); }
.btn-ligne:hover { color: var(--blanc); }
.btn-clair { background: var(--blanc); color: var(--encre); border-color: var(--trait); }
.btn-clair::before { background: var(--fond-doux); }
.btn-large { width: 100%; min-height: 56px; font-size: 16px; }
.lien { background: none; border: 0; padding: 0; color: var(--rouge); font: 700 14px/1.4 var(--texte); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; text-transform: none; letter-spacing: 0; }
.fleche { font-weight: 700; text-decoration: none; display: inline-flex; gap: 8px; align-items: center; color: var(--rouge); }
.fleche::after { content: "→"; transition: transform .3s var(--courbe); }
.fleche:hover::after { transform: translateX(4px); }

/* ---------- en-tête ---------- */
.entete { position: fixed; inset: 0 0 auto; z-index: 50; transition: background-color .35s, box-shadow .35s; }
.entete.plein, .page-simple .entete { background: rgba(255, 255, 255, .94); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 1px 0 var(--trait); }
.entete-in { height: var(--entete); width: min(1320px, 100% - 2 * var(--gouttiere)); margin-inline: auto; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.marque { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; }
.marque-toits { width: 48px; height: auto; }
.marque-nom { font: 600 24px/1 var(--titre); letter-spacing: .07em; color: var(--rouge); margin: 0; }
.ecart { fill: var(--fond-logo, var(--blanc)); stroke: var(--fond-logo, var(--blanc)); stroke-width: 11; stroke-linejoin: round; }
.ombre { fill: var(--rouge-fonce); }
.rouge { fill: var(--rouge); }
.marque-toits .bande { animation: bande .9s var(--courbe) both; animation-delay: calc(.2s + var(--i) * .12s); }
@keyframes bande { from { transform: translateX(-40px); opacity: 0; } }

.nav { display: flex; align-items: center; gap: 26px; }
.nav a:not(.btn) { font-weight: 600; font-size: 15px; text-decoration: none; position: relative; padding: 6px 0; }
.nav a:not(.btn)::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--rouge); transform: scaleX(0); transform-origin: right; transition: transform .35s var(--courbe); }
.nav a:not(.btn):hover::after, .nav a.courant::after { transform: scaleX(1); transform-origin: left; }
.nav .nav-tel { font-weight: 800; color: var(--rouge-fonce); white-space: nowrap; }
.nav-devis { min-height: 44px; padding: 0 20px; font-size: 14px; }
.burger { display: none; width: 46px; height: 46px; border: 0; background: var(--encre); border-radius: 50%; cursor: pointer; position: relative; }
.burger span { position: absolute; left: 14px; right: 14px; height: 2px; background: var(--blanc); transition: transform .3s var(--courbe); }
.burger span:first-child { top: 19px; }
.burger span:last-child { top: 25px; }
.burger[aria-expanded="true"] span:first-child { transform: translateY(3px) rotate(45deg); }
.burger[aria-expanded="true"] span:last-child { transform: translateY(-3px) rotate(-45deg); }

@media (max-width: 1100px) {
  :root { --entete: 64px; }
  .burger { display: block; }
  .marque-toits { width: 40px; }
  .marque-nom { font-size: 21px; }
  .nav {
    position: fixed; inset: var(--entete) 0 auto; flex-direction: column; align-items: stretch; gap: 0;
    background: var(--blanc); padding: 8px var(--gouttiere) 24px; box-shadow: 0 30px 40px -30px rgba(0,0,0,.25);
    clip-path: inset(0 0 100% 0); visibility: hidden; transition: clip-path .45s var(--courbe), visibility .45s;
  }
  .nav.ouvert { clip-path: inset(0 0 0 0); visibility: visible; }
  .nav a:not(.btn) { padding: 16px 0; border-bottom: 1px solid var(--trait); font-size: 18px; }
  .nav a:not(.btn)::after { display: none; }
  .nav-devis { margin-top: 18px; min-height: 52px; }
}

/* ---------- transition entre les pages ---------- */
.rideau { position: fixed; inset: 0; z-index: 300; pointer-events: none; display: grid; }
.rideau span { grid-area: 1 / 1; transform: scaleX(0); transform-origin: left; }
.rideau span:nth-child(1) { background: var(--rouge); }
.rideau span:nth-child(2) { background: var(--rouge-fonce); }
.rideau span:nth-child(3) { background: var(--blanc); }
/* arrivée depuis une autre page : le voile blanc se retire, même sans JavaScript */
.arrivee .rideau span:nth-child(3) { transform: scaleX(1); transform-origin: right; animation: rideau-sortie .7s .08s var(--courbe) forwards; }
@keyframes rideau-sortie { to { transform: scaleX(0); } }

/* ---------- barre d'action mobile ---------- */
.barre-mobile { display: none; }
@media (max-width: 760px) {
  .barre-mobile {
    display: grid; grid-template-columns: 1fr 1.4fr; gap: 10px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 45;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: rgba(255,255,255,.96); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 -1px 0 var(--trait); transform: translateY(110%); transition: transform .45s var(--courbe);
  }
  .barre-mobile .btn { min-height: 48px; padding: 0 12px; }
  .barre-visible .barre-mobile { transform: none; }
  .barre-visible .pied { padding-bottom: 96px; }
}

/* ---------- 0. immersion vidéo ---------- */
.immersion { position: relative; background: #1B1512; }
.immersion-scene { position: relative; height: 100vh; height: 100svh; overflow: hidden; background: #1B1512 url("immersion/grand/000.jpg") 58% center / cover no-repeat; color: var(--blanc); }
.immersion-canvas { position: absolute; inset: 0; width: 100%; height: 100%; transform-origin: 58% 60%; }
.immersion-voile { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(12, 9, 8, .62) 0%, rgba(12, 9, 8, .28) 45%, rgba(12, 9, 8, 0) 70%), linear-gradient(0deg, rgba(12, 9, 8, .45), rgba(12, 9, 8, 0) 35%); }
.imm-texte { position: absolute; z-index: 2; left: var(--gouttiere); bottom: 14vh; max-width: min(640px, 56vw); }
.imm-texte .titre-xl { color: var(--blanc); font-size: clamp(40px, 6vw, 84px); text-shadow: 0 2px 30px rgba(0, 0, 0, .25); }
.imm-texte .titre-xl em { color: #FF6A5B; }
.imm-texte .chapo { color: rgba(255, 255, 255, .92); max-width: 36ch; }
.imm-texte .surtitre { color: var(--blanc); }
.imm-texte .surtitre::before { background: repeating-linear-gradient(180deg, var(--blanc) 0 3px, transparent 3px 5.5px); }
.imm-texte .defiler span { border-color: var(--blanc); }
.imm-2, .imm-3 { opacity: 0; visibility: hidden; }
.imm-3 .appel-actions { margin-top: 28px; }
.immersion-jauge { position: absolute; z-index: 2; left: var(--gouttiere); right: var(--gouttiere); bottom: 5vh; height: 2px; background: rgba(255, 255, 255, .25); }
.immersion-jauge span { position: absolute; inset: 0; background: var(--blanc); transform: scaleX(0); transform-origin: left; }
@media (max-width: 760px) {
  .immersion-voile { background: linear-gradient(0deg, rgba(12, 9, 8, .78) 0%, rgba(12, 9, 8, .35) 50%, rgba(12, 9, 8, .1) 100%); }
  .imm-texte { right: var(--gouttiere); max-width: none; bottom: calc(10vh + env(safe-area-inset-bottom)); }
  .imm-texte .titre-xl { font-size: clamp(36px, 10.5vw, 52px); }
  .imm-3 .appel-actions .btn { flex: 1 1 auto; }
}
.mouvement-reduit .imm-2 { display: none; }
.mouvement-reduit .immersion-scene { background-image: url("immersion/grand/096.jpg"); }
@media (orientation: portrait) {
  .immersion-scene { background-image: url("immersion/petit/000.jpg"); background-position: center; }
  .mouvement-reduit .immersion-scene { background-image: url("immersion/petit/096.jpg"); }
}
/* en-tête posé sur la vidéo : texte clair */
.entete.sur-image .marque-nom, .entete.sur-image .nav a:not(.btn) { color: var(--blanc); }
.entete.sur-image { --fond-logo: transparent; }
@media (max-width: 1100px) { .entete.sur-image .nav a:not(.btn) { color: var(--encre); } .entete.sur-image .burger { background: var(--blanc); } .entete.sur-image .burger span { background: var(--encre); } }

/* ---------- 1. chantier ---------- */
.chantier { position: relative; }
.chantier-scene { position: relative; height: 100vh; height: 100svh; overflow: hidden; background: #F4F2EE; }
.chantier-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.chantier-intro { position: absolute; left: var(--gouttiere); top: calc(var(--entete) + 7vh); max-width: min(620px, 52vw); z-index: 2; }
.chantier-intro .chapo { max-width: 34ch; }
.defiler { display: inline-flex; align-items: center; gap: 12px; margin-top: 34px; font: 700 12px/1 var(--texte); letter-spacing: .16em; text-transform: uppercase; }
.defiler span { width: 22px; height: 36px; border: 2px solid var(--encre); border-radius: 12px; position: relative; }
.defiler span::after { content: ""; position: absolute; left: 50%; top: 7px; width: 4px; height: 8px; margin-left: -2px; border-radius: 2px; background: var(--rouge); animation: molette 1.8s infinite; }
@keyframes molette { 60% { transform: translateY(10px); opacity: 0; } 100% { opacity: 0; } }

.chantier-etape {
  position: absolute; z-index: 2; left: var(--gouttiere); bottom: 12vh; width: min(400px, 38vw);
  background: rgba(255, 255, 255, .92); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-radius: var(--rayon); padding: 24px 26px 26px; box-shadow: var(--ombre); border-left: 3px solid var(--rouge);
  opacity: 0; visibility: hidden;
}
.etape-tete { display: flex; align-items: baseline; gap: 6px; font-family: var(--titre); }
.etape-num { font-size: 40px; line-height: 1; color: var(--rouge); font-weight: 500; }
.etape-total { font-size: 15px; color: var(--encre-douce); }
.etape-titre { font: 500 26px/1.15 var(--titre); margin: 10px 0 8px; letter-spacing: -.01em; }
.etape-texte { margin: 0; font-size: 16px; color: var(--encre-douce); }

.chantier-rail {
  position: absolute; z-index: 2; right: var(--gouttiere); top: 50%; transform: translateY(-50%); display: flex; gap: 16px;
  padding: 18px 20px 18px 16px; border-radius: var(--rayon); background: rgba(255, 255, 255, .78); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.rail-jauge { width: 2px; background: var(--trait); position: relative; overflow: hidden; }
.rail-jauge span { position: absolute; inset: 0 0 auto; height: 100%; background: var(--rouge); transform-origin: top; transform: scaleY(0); }
.chantier-rail ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; counter-reset: rail; }
.chantier-rail li { counter-increment: rail; font: 600 13px/1 var(--texte); color: var(--encre-douce); opacity: .5; transition: opacity .3s, color .3s; white-space: nowrap; }
.chantier-rail li::before { content: "0" counter(rail) "  "; white-space: pre; font-weight: 800; }
.chantier-rail li.fait { opacity: .9; }
.chantier-rail li.courant { opacity: 1; color: var(--rouge); }
.chantier-fin { position: absolute; z-index: 3; left: var(--gouttiere); bottom: 12vh; display: flex; flex-wrap: wrap; gap: 12px; opacity: 0; visibility: hidden; }
.chantier-curseur { display: none; }

@media (max-width: 760px) {
  .chantier-intro { top: calc(var(--entete) + 3vh); max-width: none; right: var(--gouttiere); }
  .chantier-intro .titre-xl { font-size: clamp(40px, 12vw, 56px); }
  .defiler { margin-top: 20px; }
  .chantier-etape { left: var(--gouttiere); right: var(--gouttiere); width: auto; bottom: calc(18px + env(safe-area-inset-bottom)); padding: 18px 20px 20px; }
  .etape-num { font-size: 32px; }
  .etape-titre { font-size: 22px; margin: 6px 0 4px; }
  .etape-texte { font-size: 15px; }
  .chantier-rail { top: calc(var(--entete) + 10px); left: var(--gouttiere); right: var(--gouttiere); transform: none; padding: 0; background: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
  .chantier-rail ol { display: none; }
  .rail-jauge { width: 100%; height: 3px; }
  .rail-jauge span { transform-origin: left; transform: scaleX(0); }
  .chantier-fin { bottom: calc(18px + env(safe-area-inset-bottom)); right: var(--gouttiere); }
  .chantier-fin .btn { flex: 1 1 auto; }
}
.mouvement-reduit .chantier-intro { display: none; }
.mouvement-reduit .chantier-etape { opacity: 1; visibility: visible; }
.mouvement-reduit .chantier-curseur {
  display: grid; gap: 6px; position: absolute; z-index: 3; right: var(--gouttiere); bottom: 12vh; width: min(320px, 40vw);
  background: var(--blanc); padding: 14px 18px; border-radius: var(--rayon); box-shadow: var(--ombre); font-weight: 700; font-size: 14px;
}
@media (max-width: 760px) { .mouvement-reduit .chantier-curseur { top: calc(var(--entete) + 24px); bottom: auto; left: var(--gouttiere); right: var(--gouttiere); width: auto; } }
.sans-webgl .chantier-scene { background: linear-gradient(180deg, #F4F2EE, #E9E4DB); }
.sans-webgl .chantier-rail, .sans-webgl .chantier-curseur { display: none; }

/* ---------- sections ---------- */
.section { padding: clamp(52px, 6.5vw, 92px) 0; position: relative; }
.section-douce { background: var(--fond-doux); --fond-logo: var(--fond-doux); }
.section + .section:not(.section-douce) { border-top: 1px solid var(--trait); }
.section-tete { margin-bottom: clamp(24px, 3vw, 40px); max-width: 760px; }

/* services : deux formules phares, trois services d'accompagnement (maquette « services ») */
.services-v2 { background: var(--fond-doux); --fond-logo: var(--fond-doux); }
.sv-tete { display: grid; grid-template-columns: 1.35fr .65fr; gap: 36px; align-items: end; margin-bottom: clamp(28px, 4vw, 48px); }
.sv-titre { font-size: clamp(44px, 5.4vw, 80px); line-height: .98; }
.sv-intro { margin: 0 0 6px; max-width: 380px; font-size: 18px; color: var(--encre-douce); }
.sv-phares { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-bottom: 18px; }
.sv-appuis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.sv-carte {
  position: relative; overflow: hidden; isolation: isolate; display: flex; flex-direction: column;
  background: var(--blanc); border: 1px solid #EAE4DB; color: var(--encre);
  transition: transform .55s var(--courbe), box-shadow .55s var(--courbe), background-color .35s;
}
.sv-carte:hover { transform: translateY(-6px); box-shadow: 0 34px 60px -34px rgba(44, 32, 22, .38); }
.sv-carte:focus-within { outline: 2px solid var(--rouge); outline-offset: 3px; }
.sv-haut { display: flex; justify-content: space-between; align-items: flex-start; }
.sv-num { font: 800 15px/1 var(--texte); letter-spacing: .15em; color: var(--rouge); font-variant-numeric: tabular-nums; }
.sv-num b { font-weight: 800; }

/* grandes cartes : cercles concentriques qui glissent avec le défilement et suivent la souris */
.sv-grande { min-height: 380px; padding: 33px 37px 34px; box-shadow: 0 10px 26px rgba(44, 32, 22, .045); }
.sv-grande::after, .sv-grande::before {
  content: ""; position: absolute; right: -80px; bottom: -115px; width: 300px; height: 300px; border-radius: 50%; z-index: -1; pointer-events: none;
}
.sv-grande::after {
  border: 1px solid rgba(227, 33, 30, .15); box-shadow: 0 0 0 50px rgba(227, 33, 30, .035), 0 0 0 100px rgba(227, 33, 30, .026);
  transform: translate(var(--cx, 0px), calc(var(--cy, 0px) + var(--decal, 0px))); transition: transform .9s var(--courbe), box-shadow .6s;
}
.sv-grande:hover::after { box-shadow: 0 0 0 60px rgba(227, 33, 30, .045), 0 0 0 125px rgba(227, 33, 30, .03); }
/* onde lente qui part du centre des cercles */
.sv-grande::before { border: 1px solid rgba(227, 33, 30, .22); animation: onde 5.5s cubic-bezier(.2, .6, .3, 1) infinite; transform: translate(var(--cx, 0px), calc(var(--cy, 0px) + var(--decal, 0px))) scale(.6); }
.sv-sombre::before { animation-delay: 2.7s; }
@keyframes onde { 0% { opacity: .9; scale: .7; } 100% { opacity: 0; scale: 2; } }
.sv-sombre { background: #1E1D1B; color: var(--blanc); border-color: #1E1D1B; }
.sv-sombre::after { border-color: rgba(255, 255, 255, .16); box-shadow: 0 0 0 50px rgba(255, 255, 255, .025), 0 0 0 100px rgba(255, 255, 255, .018); }
.sv-sombre:hover::after { box-shadow: 0 0 0 60px rgba(255, 255, 255, .035), 0 0 0 125px rgba(255, 255, 255, .025); }
.sv-sombre::before { border-color: rgba(255, 255, 255, .22); }
.sv-sombre .sv-num { color: #FF6A5B; }
.sv-toit { position: relative; width: 58px; height: 29px; transform: skewY(-14deg); transition: transform .5s var(--courbe); }
.sv-toit i { position: absolute; right: 0; height: 3px; background: var(--rouge); transform-origin: right; }
.sv-toit i:first-child { top: 0; width: 100%; }
.sv-toit i:last-child { top: 11px; width: 70%; transition: width .5s var(--courbe); }
.sv-sombre .sv-toit i { background: #FF6A5B; }
.sv-carte:hover .sv-toit { transform: skewY(-14deg) translateY(-5px); }
.sv-carte:hover .sv-toit i:last-child { width: 100%; }
.sv-grande h3 { margin: auto 0 17px; max-width: 420px; font: 500 clamp(34px, 3.1vw, 52px)/1.04 var(--titre); letter-spacing: -.025em; transition: transform .55s var(--courbe); }
.sv-carte:hover h3 { transform: translateX(6px); }
.sv-grande p { margin: 0 0 27px; max-width: 385px; font-size: 17px; line-height: 1.55; color: var(--encre-douce); }
.sv-sombre p { color: #C8C2BC; }

/* petites cartes */
.sv-petite { min-height: 260px; padding: 28px 29px 25px; background: #FAF8F4; border-color: var(--trait); }
.sv-petite:hover { background: var(--blanc); }
.sv-petite .sv-num { margin-bottom: 32px; }
.sv-petite h3 { margin: 0 0 12px; max-width: 280px; font: 800 22px/1.18 var(--texte); letter-spacing: -.01em; }
.sv-petite p { margin: 0 0 25px; max-width: 320px; font-size: 15px; color: var(--encre-douce); }

/* lien bas de carte : le trait se remplit, la flèche décolle ; toute la carte est cliquable */
.sv-lien {
  margin-top: auto; padding-top: 19px; display: flex; justify-content: space-between; align-items: center;
  font-weight: 800; font-size: 15px; color: var(--rouge); text-decoration: none; border-top: 1px solid var(--trait);
  background: linear-gradient(currentColor, currentColor) left top / 0% 1px no-repeat; transition: background-size .7s var(--courbe);
}
.sv-lien::after { content: ""; position: absolute; inset: 0; }
.sv-lien span:last-child { font-size: 24px; font-weight: 400; transition: transform .45s var(--courbe); }
.sv-carte:hover .sv-lien { background-size: 100% 1px; }
.sv-carte:hover .sv-lien span:last-child { transform: translate(4px, -4px); }
.sv-lien:focus-visible { outline: none; }
.sv-sombre .sv-lien { color: #FF6A5B; border-color: #52504C; }
.sv-petite .sv-lien { font-size: 14px; }

@media (max-width: 1000px) { .sv-tete { grid-template-columns: 1fr; gap: 18px; } .sv-intro { max-width: 650px; } .sv-grande { min-height: 340px; } }
@media (max-width: 700px) {
  .sv-titre { font-size: clamp(40px, 10vw, 60px); }
  .sv-intro { font-size: 16px; }
  .sv-phares, .sv-appuis { grid-template-columns: 1fr; }
  .sv-grande { min-height: 320px; padding: 25px; }
  .sv-grande h3 { font-size: 40px; }
  .sv-grande p { font-size: 16px; }
  .sv-petite { min-height: 0; }
}
.sv-anime .sv-carte, .sv-anime .sv-carte *, .contact-mise.sv-anime *, .contact-mise.sv-anime { transition: none !important; }
@media (prefers-reduced-motion: reduce) { .sv-grande::before { animation: none; opacity: 0; } }
.secteur { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; margin-top: 24px; }
.secteur-toits { width: 46px; flex: none; }
.secteur p { margin: 0; flex: 1 1 260px; font-size: 18px; }
.secteur b { color: var(--rouge-fonce); }

/* ---------- avant / après ---------- */
.aa { position: relative; aspect-ratio: 16 / 9; border-radius: 16px; overflow: hidden; background: #EFEBE4; touch-action: pan-y; user-select: none; -webkit-user-select: none; cursor: ew-resize; }
.aa-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .6s; }
.aa.pret .aa-img { opacity: 1; }
.aa-avant { clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
#avant-apres .aa-img { object-position: 62% 50%; }
.aa-etiquette { position: absolute; top: 18px; z-index: 2; padding: 9px 14px; border-radius: 999px; font: 700 13px/1 var(--texte); background: rgba(255, 255, 255, .94); color: var(--encre); }
.aa-etiquette b { color: var(--rouge); }
.aa-etiquette-avant { left: 18px; }
.aa-etiquette-apres { right: 18px; }
.aa-ligne { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 2px; margin-left: -1px; background: var(--blanc); z-index: 3; }
.aa-poignee {
  position: absolute; top: 50%; left: 50%; width: 56px; height: 56px; margin: -28px 0 0 -28px; border-radius: 50%;
  border: 2px solid var(--blanc); background: var(--rouge); color: var(--blanc); cursor: grab; box-shadow: 0 8px 24px rgba(0,0,0,.22);
  display: grid; place-items: center; touch-action: none;
}
.aa-poignee svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.aa-attente { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; font-weight: 700; color: var(--encre-douce); }
.aa.pret .aa-attente { display: none; }
.aa-etapes { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.aa-etapes button, .maquette-outils button {
  min-height: 42px; padding: 0 18px; border-radius: 999px; border: 1.5px solid var(--trait); background: var(--blanc);
  font-weight: 700; font-size: 14px; cursor: pointer; transition: background-color .25s, color .25s, border-color .25s;
}
.aa-etapes button:hover, .maquette-outils button:hover { border-color: var(--encre); }
.aa-etapes button[aria-pressed="true"], .maquette-outils button[aria-pressed="true"] { background: var(--encre); border-color: var(--encre); color: var(--blanc); }
@media (max-width: 760px) {
  .aa { aspect-ratio: 4 / 5; border-radius: 14px; }
  .aa-etiquette { top: 12px; font-size: 12px; padding: 8px 11px; }
  .aa-etiquette-avant { left: 12px; }
  .aa-etiquette-apres { right: 12px; }
}

/* ---------- chantiers réels : petites cartes avant / après (gérées dans l'admin) ---------- */
.reals { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 24px 18px; }
.real { display: grid; gap: 12px; align-content: start; }
.aa-mini { aspect-ratio: 4 / 3; border-radius: 10px; }
.aa-mini .aa-etiquette { top: 8px; padding: 5px 8px; font-size: 11px; }
.aa-mini .aa-etiquette-avant { left: 8px; }
.aa-mini .aa-etiquette-apres { right: 8px; }
.aa-mini .aa-poignee { width: 34px; height: 34px; margin: -17px 0 0 -17px; border-width: 2px; }
.aa-mini .aa-poignee svg { width: 16px; height: 16px; }
.aa-mini .aa-img { transition: transform .8s var(--courbe), opacity .6s; }
.real:hover .aa-mini .aa-img { transform: scale(1.03); }
.real-texte h3 { font-size: 18px; line-height: 1.25; }
.real-lieu { margin: 3px 0 0; font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--rouge); }
.real-texte p:not(.real-lieu) { margin: 4px 0 0; color: var(--encre-douce); font-size: 14px; line-height: 1.5; }
/* tailles réglées dans l'admin : petite (défaut), moyenne, grande */
.reals[data-taille="moyenne"] { grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 28px 22px; }
.reals[data-taille="grande"] { grid-template-columns: repeat(auto-fill, minmax(min(100%, 480px), 1fr)); gap: 32px 26px; }
.reals:is([data-taille="moyenne"], [data-taille="grande"]) .aa-mini .aa-etiquette { top: 12px; padding: 7px 11px; font-size: 12px; }
.reals:is([data-taille="moyenne"], [data-taille="grande"]) .aa-mini .aa-etiquette-avant { left: 12px; }
.reals:is([data-taille="moyenne"], [data-taille="grande"]) .aa-mini .aa-etiquette-apres { right: 12px; }
.reals:is([data-taille="moyenne"], [data-taille="grande"]) .aa-mini .aa-poignee { width: 44px; height: 44px; margin: -22px 0 0 -22px; }
.reals:is([data-taille="moyenne"], [data-taille="grande"]) .real-texte h3 { font-size: 22px; }
.reals:is([data-taille="moyenne"], [data-taille="grande"]) .real-texte p:not(.real-lieu) { font-size: 16px; }
@media (max-width: 560px) {
  .reals[data-taille="petite"], .reals:not([data-taille]) { grid-template-columns: 1fr 1fr; gap: 20px 12px; }
  .aa-mini .aa-etiquette { top: 6px; padding: 4px 7px; font-size: 10px; }
  .aa-mini .aa-etiquette-avant { left: 6px; }
  .aa-mini .aa-etiquette-apres { right: 6px; }
  .aa-mini .aa-poignee { width: 30px; height: 30px; margin: -15px 0 0 -15px; }
  .real-texte h3 { font-size: 16px; }
  .real-texte p:not(.real-lieu) { font-size: 13px; }
}

/* ---------- maquette ---------- */
.maquette { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 56px); align-items: start; }
.maquette-vue { position: sticky; top: calc(var(--entete) + 20px); aspect-ratio: 5 / 4; border-radius: 16px; overflow: hidden; background: #F4F2EE; border: 1px solid var(--trait); }
.maquette-canvas { width: 100%; height: 100%; touch-action: pan-y; cursor: grab; }
.maquette-canvas:active { cursor: grabbing; }
.maquette-outils { position: absolute; left: 14px; top: 14px; display: flex; flex-wrap: wrap; gap: 8px; }
.maquette-outils button { min-height: 36px; padding: 0 14px; font-size: 13px; background: rgba(255,255,255,.94); border-color: transparent; }
.maquette-zoom { position: absolute; right: 14px; top: 14px; display: grid; gap: 8px; }
.maquette-zoom button { width: 38px; height: 38px; border-radius: 50%; border: 0; background: rgba(255,255,255,.94); font: 600 21px/1 var(--texte); cursor: pointer; }
.maquette-aide { position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%); margin: 0; display: flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 999px; background: rgba(22,19,18,.8); color: var(--blanc); font-size: 13px; font-weight: 600; white-space: nowrap; pointer-events: none; transition: opacity .4s; }
.maquette-aide svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.maquette-aide.cache { opacity: 0; }
.sans-3d { display: none; position: absolute; inset: 0; place-items: center; padding: 24px; text-align: center; margin: 0; font-weight: 600; }
.sans-webgl .sans-3d { display: grid; }
.sans-webgl .maquette-outils, .sans-webgl .maquette-zoom, .sans-webgl .maquette-aide { display: none; }
.config .chapo { margin-bottom: 22px; }
/* accordéons : un seul ouvert à la fois, le résumé dit ce qui est choisi */
.accordeons { border-top: 1px solid var(--trait); margin-bottom: 22px; }
.accordeon { border-bottom: 1px solid var(--trait); }
.accordeon summary { display: flex; align-items: center; gap: 12px; padding: 16px 2px; cursor: pointer; list-style: none; }
.accordeon summary::-webkit-details-marker { display: none; }
.accordeon-titre { font: 500 21px/1.2 var(--titre); white-space: nowrap; }
.accordeon-resume { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: var(--encre-douce); text-align: right; }
.accordeon-resume i { width: 14px; height: 14px; border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 1px rgba(0,0,0,.15); }
.accordeon-chevron { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .35s var(--courbe); }
.accordeon[open] .accordeon-chevron { transform: rotate(180deg); }
.accordeon[open] .accordeon-resume { display: none; }
.accordeon[open] .accordeon-chevron { margin-left: auto; }
.accordeon summary:hover .accordeon-titre { color: var(--rouge); }
.accordeon summary:focus-visible { outline: 2px solid var(--rouge); outline-offset: 2px; }
.accordeon-corps { padding: 4px 2px 10px; }
.accordeon[open] .accordeon-corps { animation: deplier .45s var(--courbe); }
@keyframes deplier { from { opacity: 0; transform: translateY(-8px); } }
.accordeon-corps .champ:last-child, .accordeon-corps .interrupteur { margin-bottom: 14px; }
.config-duo { display: grid; grid-template-columns: 1fr auto; gap: 18px; }
@media (max-width: 900px) {
  .maquette { grid-template-columns: 1fr; }
  .maquette-vue { position: relative; top: 0; aspect-ratio: 4 / 5; order: 2; }
  .config { display: contents; }
  .config > .surtitre, .config > .titre-l, .config > .chapo { order: 1; }
  .config > .surtitre { margin-bottom: -10px; }
  .config > .chapo { margin: -14px 0 0; }
  .config > .accordeons { order: 3; }
  .config > .btn { order: 4; }
}

/* ---------- méthode : frise qui se trace au défilement ---------- */
.methode-zone { position: relative; }
.methode { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; }
.methode-trait { position: absolute; left: 0; right: 0; top: 7px; height: 2px; background: var(--trait); }
.methode-trait span { position: absolute; inset: 0; background: var(--rouge); transform: scaleX(0); transform-origin: left; }
.methode li { position: relative; padding-top: 42px; }
.methode li::before { content: ""; position: absolute; left: 0; top: 0; width: 16px; height: 16px; border-radius: 50%; background: var(--blanc); border: 2px solid var(--trait); transition: border-color .4s, background-color .4s; }
.methode li.allume::before { border-color: var(--rouge); background: var(--rouge); }
.methode-num { font: 500 15px/1 var(--titre); color: var(--rouge); }
.methode h3 { font-size: 24px; margin: 10px 0 10px; }
.methode p { margin: 0; color: var(--encre-douce); font-size: 16px; }
@media (max-width: 900px) {
  .methode { grid-template-columns: 1fr; gap: 0; padding-left: 34px; }
  .methode-trait { left: 7px; right: auto; top: 0; bottom: 0; width: 2px; height: auto; }
  .methode-trait span { transform: scaleY(0); transform-origin: top; }
  .methode li { padding: 0 0 36px; }
  .methode li::before { left: -34px; top: 4px; }
}

/* ---------- bandeau devis de l'accueil ---------- */
.appel { position: relative; overflow: hidden; }
.appel-in { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 40px; align-items: center; }
.appel-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.appel-toits { width: 100%; max-width: 440px; justify-self: end; }
@media (max-width: 860px) { .appel-in { grid-template-columns: 1fr; } .appel-toits { max-width: 220px; justify-self: start; order: -1; } }

/* ---------- pages simples ---------- */
.page-tete { padding: calc(var(--entete) + clamp(32px, 5vw, 64px)) 0 clamp(24px, 3vw, 40px); }
.page-tete .chapo a { color: var(--rouge-fonce); font-weight: 700; white-space: nowrap; }
.page-corps { padding-bottom: clamp(52px, 6.5vw, 92px); }

/* ---------- champs communs ---------- */
fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.champ { display: block; margin: 0 0 24px; }
.champ legend, .legende { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; padding: 0; margin-bottom: 10px; font-weight: 700; font-size: 15px; }
.champ legend i, .legende i { font-style: normal; font-weight: 500; font-size: 13px; color: var(--encre-douce); }
.choix-ligne { display: flex; flex-wrap: wrap; gap: 8px; }
.pastille { position: relative; cursor: pointer; }
.pastille input, .carte input, .nuancier input, .interrupteur input, .case input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.pastille span { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1.5px solid var(--trait); background: var(--blanc); font-weight: 600; font-size: 14px; transition: all .25s; }
.pastille-carree span { min-width: 48px; justify-content: center; padding: 0 12px; }
.pastille:hover span { border-color: var(--encre); }
.pastille input:checked + span { background: var(--encre); border-color: var(--encre); color: var(--blanc); }
.pastille input:focus-visible + span, .carte input:focus-visible + span, .nuancier input:focus-visible + span::before, .interrupteur input:focus-visible + .interrupteur-piste, .case input:focus-visible + span::before { outline: 2px solid var(--rouge); outline-offset: 3px; }

.nuancier { display: flex; flex-wrap: wrap; gap: 10px 14px; }
.nuancier label { cursor: pointer; }
.nuancier span { display: grid; justify-items: center; gap: 6px; font-size: 12px; font-weight: 600; width: 66px; text-align: center; line-height: 1.2; }
.nuancier span::before { content: ""; width: 38px; height: 38px; border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 1px rgba(0,0,0,.12); transition: box-shadow .25s, transform .25s; }
.nuancier input:checked + span::before { box-shadow: inset 0 0 0 1px rgba(0,0,0,.12), 0 0 0 3px var(--fond-logo, var(--blanc)), 0 0 0 5px var(--encre); transform: scale(1.04); }

.compteur { display: inline-flex; align-items: center; border: 1.5px solid var(--trait); border-radius: 999px; background: var(--blanc); }
.compteur button { width: 44px; height: 44px; border: 0; background: none; font: 600 22px/1 var(--texte); cursor: pointer; border-radius: 50%; }
.compteur output { min-width: 26px; text-align: center; font-weight: 800; font-size: 17px; }
.interrupteur { display: inline-flex; align-items: center; gap: 12px; font-weight: 700; margin: 0 0 28px; cursor: pointer; position: relative; }
.interrupteur-piste { width: 48px; height: 28px; border-radius: 999px; background: var(--trait); position: relative; transition: background-color .25s; }
.interrupteur-piste::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: var(--blanc); box-shadow: 0 2px 6px rgba(0,0,0,.2); transition: transform .3s var(--courbe); }
.interrupteur input:checked + .interrupteur-piste { background: var(--rouge); }
.interrupteur input:checked + .interrupteur-piste::after { transform: translateX(20px); }

/* ---------- devis ---------- */
.devis { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: start; }
.formulaire, .merci { background: var(--blanc); border: 1px solid var(--trait); border-radius: 16px; padding: clamp(22px, 4vw, 44px); }
.progression { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 0 0 34px; padding: 0; }
.progression li { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 14px; padding-top: 12px; border-top: 2px solid var(--trait); color: var(--encre-douce); position: relative; }
.progression li::after { content: ""; position: absolute; left: 0; right: 0; top: -2px; height: 2px; background: var(--rouge); transform: scaleX(0); transform-origin: left; transition: transform .6s var(--courbe); }
.progression li.fait::after, .progression li.actif::after { transform: scaleX(1); }
.progression li span { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--fond-doux); font-size: 13px; flex: none; transition: background-color .3s, color .3s; }
.progression li.fait, .progression li.actif { color: var(--encre); }
.progression li.fait span, .progression li.actif span { background: var(--rouge); color: var(--blanc); }
@media (max-width: 560px) { .progression li { font-size: 0; gap: 0; } .progression li span { font-size: 13px; } .progression li.actif { font-size: 13px; gap: 8px; } }
.etape-legende { font: 500 clamp(26px, 3vw, 32px)/1.1 var(--titre); padding: 0; margin: 0 0 26px; letter-spacing: -.01em; }
.cartes { display: grid; gap: 10px; }
.cartes-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 760px) { .cartes-4 { grid-template-columns: repeat(2, 1fr); } }
.carte { cursor: pointer; display: block; }
.carte > span { display: grid; gap: 4px; height: 100%; padding: 18px; border-radius: 10px; border: 1.5px solid var(--trait); background: var(--blanc); font-size: 14px; color: var(--encre-douce); transition: border-color .25s, background-color .25s; }
.carte b { font-size: 16px; color: var(--encre); line-height: 1.3; }
.carte:hover > span { border-color: var(--encre); }
.carte input:checked + span { border-color: var(--rouge); background: var(--rouge-pale); }
.carte-style svg { width: 100%; height: 50px; margin-bottom: 10px; fill: none; stroke: var(--encre); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.carte-style input:checked + span svg { stroke: var(--rouge); }
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }
@media (max-width: 640px) { .duo { grid-template-columns: 1fr; } }
input[type="text"], input[type="tel"], input[type="email"], input[type="number"], textarea, select {
  width: 100%; min-height: 50px; padding: 12px 16px; border-radius: 8px; border: 1.5px solid var(--trait); background: var(--blanc); font-size: 16px; transition: border-color .25s, box-shadow .25s;
}
select { appearance: none; background: var(--blanc) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' fill='none' stroke='%23161312' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") right 14px center / 16px no-repeat; padding-right: 42px; }
textarea { resize: vertical; min-height: 110px; }
input:focus, textarea:focus, select:focus { outline: none; border-color: var(--encre); box-shadow: 0 0 0 3px rgba(227, 33, 30, .14); }
.unite { display: flex; align-items: center; position: relative; }
.unite span { position: absolute; right: 16px; font-weight: 700; color: var(--encre-douce); pointer-events: none; }
.unite input { padding-right: 48px; }
.champ.invalide input, .champ.invalide textarea { border-color: var(--rouge); }
.erreur { display: block; color: var(--rouge-fonce); font-weight: 700; font-size: 14px; margin: 8px 0 0; }
.erreur:empty { display: none; }
.budget { background: var(--fond-doux); border-radius: 12px; padding: 20px 22px; }
.budget .legende { margin-bottom: 2px; }
.budget-valeur { display: block; font: 500 clamp(30px, 4vw, 40px)/1.1 var(--titre); color: var(--rouge); margin-bottom: 12px; font-variant-numeric: tabular-nums; }
.budget-bornes { display: flex; justify-content: space-between; font-size: 13px; font-weight: 600; color: var(--encre-douce); margin-top: 6px; }
.budget.inactif .budget-valeur, .budget.inactif input[type="range"] { opacity: .35; }
input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 30px; background: none; cursor: pointer; --rempli: 30%; }
input[type="range"]::-webkit-slider-runnable-track { height: 4px; border-radius: 4px; background: linear-gradient(90deg, var(--rouge) var(--rempli), var(--trait) var(--rempli)); }
input[type="range"]::-moz-range-track { height: 4px; border-radius: 4px; background: linear-gradient(90deg, var(--rouge) var(--rempli), var(--trait) var(--rempli)); }
input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 24px; height: 24px; margin-top: -10px; border-radius: 50%; background: var(--blanc); border: 2px solid var(--rouge); box-shadow: 0 3px 10px rgba(0,0,0,.18); }
input[type="range"]::-moz-range-thumb { width: 20px; height: 20px; border-radius: 50%; background: var(--blanc); border: 2px solid var(--rouge); }
.case { display: flex; gap: 12px; align-items: flex-start; cursor: pointer; position: relative; margin: 16px 0 0; font-size: 14px; flex-wrap: wrap; }
.case > span:first-of-type { flex: 1; min-width: 0; }
.case > span:first-of-type::before { content: ""; float: left; width: 22px; height: 22px; margin: 0 12px 4px 0; border-radius: 6px; border: 1.5px solid var(--encre); background: var(--blanc) center / 14px no-repeat; }
.case input:checked + span::before { background-color: var(--rouge); border-color: var(--rouge); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3 3 7-7' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.case .erreur { flex-basis: 100%; }
.pot { position: absolute; left: -9999px; }
.formulaire-nav { display: flex; justify-content: space-between; gap: 12px; margin-top: 30px; padding-top: 24px; border-top: 1px solid var(--trait); }
.formulaire-nav [data-suiv], .formulaire-nav [data-envoyer] { margin-left: auto; min-width: 180px; }
.formulaire-statut { margin: 14px 0 0; font-weight: 700; color: var(--rouge-fonce); }
.formulaire-statut:empty { display: none; }

.recap { position: sticky; top: calc(var(--entete) + 20px); border: 1px solid var(--trait); border-radius: 16px; overflow: hidden; background: var(--blanc); }
.recap-apercu { position: relative; aspect-ratio: 4 / 3; background: #F4F2EE; border-bottom: 1px solid var(--trait); }
.recap-apercu canvas { width: 100%; height: 100%; }
.recap-apercu p { position: absolute; left: 14px; bottom: 12px; margin: 0; padding: 7px 12px; border-radius: 999px; background: rgba(255,255,255,.94); font-size: 12px; font-weight: 700; }
.recap-corps { padding: 22px 24px 10px; }
.recap-titre { font: 500 22px/1.2 var(--titre); margin: 0 0 12px; }
.recap dl { margin: 0; }
.recap dl > div { display: grid; grid-template-columns: 112px 1fr; gap: 12px; padding: 11px 0; border-top: 1px solid var(--trait); font-size: 15px; }
.recap dt { font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--rouge); padding-top: 2px; }
.recap dd { margin: 0; font-weight: 600; }
.recap dd.maj { animation: maj .8s; }
@keyframes maj { from { color: var(--rouge); } }
@media (max-width: 960px) { .devis { grid-template-columns: 1fr; } .recap { position: static; order: -1; } .recap-apercu { aspect-ratio: 16 / 9; } }
.merci { text-align: center; padding-block: clamp(40px, 6vw, 70px); }
.merci-toits { width: 100px; margin: 0 auto 22px; }
.merci h3 { font-size: clamp(26px, 3vw, 32px); margin-bottom: 12px; }
.merci p { margin: 0 auto 26px; max-width: 44ch; color: var(--encre-douce); }
.merci a { color: var(--rouge-fonce); font-weight: 700; }

/* ---------- contact ---------- */
.contact { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: clamp(24px, 4vw, 56px); align-items: start; }
.coords { display: grid; gap: 12px; }
.coord { display: grid; grid-template-columns: 48px 1fr; gap: 4px 16px; align-items: center; padding: 22px; border: 1px solid var(--trait); border-radius: 14px; text-decoration: none; transition: border-color .3s, transform .3s var(--courbe); }
a.coord:hover { border-color: var(--encre); transform: translateY(-2px); }
.coord-icone { grid-row: span 2; width: 48px; height: 48px; border-radius: 50%; background: var(--rouge-pale); display: grid; place-items: center; color: var(--rouge); }
.coord-icone svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.coord small { font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--encre-douce); }
.coord strong { font: 500 clamp(20px, 2vw, 24px)/1.25 var(--titre); word-break: break-word; }
.carte-zone { margin-top: 12px; border-radius: 14px; overflow: hidden; border: 1px solid var(--trait); aspect-ratio: 4 / 3; background: var(--fond-doux); }
.carte-zone iframe { width: 100%; height: 100%; border: 0; display: block; filter: grayscale(.35); }
.raccourci-devis { margin-top: 12px; padding: 22px; border-radius: 14px; background: var(--fond-doux); }
.raccourci-devis p { margin: 0 0 12px; }
@media (max-width: 900px) { .contact { grid-template-columns: 1fr; } }

/* ---------- pied ---------- */
.pied { background: var(--encre); color: #EFE9E1; padding: 72px 0 28px; --fond-logo: var(--encre); }
.pied-in { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 32px; }
.pied-toits { width: 64px; margin-bottom: 14px; }
.pied .marque-nom { font-size: 26px; color: #FF5A4A; margin-bottom: 8px; }
.pied p { margin: 0 0 6px; }
.pied-titre { font-weight: 800; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: #FF5A4A; margin-bottom: 14px !important; }
.pied-col a { display: block; text-decoration: none; margin-bottom: 8px; }
.pied-col a:hover { color: var(--blanc); text-decoration: underline; }
.pied-bas { margin-top: 50px !important; padding-top: 22px; border-top: 1px solid rgba(239,233,225,.14); font-size: 14px; }
@media (max-width: 760px) { .pied-in { grid-template-columns: 1fr; } }

/* mentions légales */
.page-texte { padding: calc(var(--entete) + 60px) 0 100px; }
.page-texte .conteneur { max-width: 760px; }
.page-texte h2 { font: 500 24px/1.2 var(--titre); margin: 40px 0 10px; }

@media (prefers-reduced-motion: reduce) {
  .marque-toits .bande { animation: none; }
  .btn::before, .nav a::after, .service::after { transition: none; }
}

/* =========================================================================
   PAGE DEVIS — charte de la maquette « demande de devis »
   papier, en-tête sombre, panneau blanc à angles droits, cartes de choix cochées
   ========================================================================= */
.page-charte { background: #F5F2ED; --papier: #F5F2ED; --trait-devis: #E1DBD3; --sombre: #201F1D; --gris: #625E59; }
.page-charte .entete, .page-charte .entete.plein { background: var(--sombre); box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; --fond-logo: var(--sombre); }
.page-charte .entete .marque-nom { color: var(--blanc); }
.page-charte .entete .nav a:not(.btn) { color: var(--blanc); }
.page-charte .entete .nav .nav-tel { color: #F97A6D; }
.page-charte .entete .burger { background: var(--blanc); }
.page-charte .entete .burger span { background: var(--encre); }
@media (max-width: 1100px) { .page-charte .entete .nav a:not(.btn) { color: var(--encre); } .page-charte .entete .nav .nav-tel { color: var(--rouge-fonce); } }

/* titre de page */
.devis-tete { padding: calc(var(--entete) + clamp(40px, 6vw, 76px)) 0 clamp(30px, 4vw, 48px); }
.devis-surtitre { display: flex; align-items: center; gap: 12px; margin: 0; color: var(--rouge); font: 800 12px/1 var(--texte); letter-spacing: .22em; text-transform: uppercase; }
.devis-surtitre::before { content: ""; width: 28px; height: 7px; border-top: 3px solid var(--rouge); border-bottom: 3px solid var(--rouge); transform: skewX(-24deg); transform-origin: left; animation: trait-devis .8s .15s var(--courbe) both; }
@keyframes trait-devis { from { transform: skewX(-24deg) scaleX(0); } }
.devis-titre { margin: 24px 0 19px; max-width: 1200px; font: 500 clamp(52px, 6.8vw, 99px)/.98 var(--titre); letter-spacing: -.035em; font-variation-settings: "opsz" 144; }
.devis-titre em { font-style: normal; color: var(--rouge); }
.devis-chapo { margin: 0; max-width: 730px; font-size: 18px; color: var(--gris); animation: monte-devis .9s .45s var(--courbe) both; }
.devis-chapo a { color: var(--rouge); font-weight: 800; text-decoration: underline; text-underline-offset: 4px; white-space: nowrap; }
@keyframes monte-devis { from { opacity: 0; transform: translateY(18px); } }

/* mise en page */
.devis-corps { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(320px, .65fr); gap: 22px; align-items: start; padding-bottom: clamp(64px, 8vw, 110px); }
.devis-panneau { background: var(--blanc); border: 1px solid var(--trait-devis); padding: clamp(22px, 3.2vw, 42px); min-height: 650px; }
.page-charte .formulaire, .page-charte .merci { background: none; border: 0; border-radius: 0; padding: 0; }
.page-charte .merci { padding-block: clamp(30px, 5vw, 60px); }

/* étapes */
.page-charte .progression { gap: 12px; margin-bottom: clamp(36px, 5vw, 60px); }
.page-charte .progression li { border-top: 3px solid var(--trait-devis); padding-top: 13px; color: #89837C; font-size: 13px; gap: 9px; }
.page-charte .progression li::after { top: -3px; height: 3px; }
.page-charte .progression li.fait::after { background: var(--sombre); }
.page-charte .progression li span { width: 25px; height: 25px; background: #F2EFEB; color: #4E4944; font-size: 12px; transition: background-color .3s, color .3s, transform .4s var(--courbe); }
.page-charte .progression li.actif span { background: var(--rouge); color: var(--blanc); transform: scale(1.12); }
.page-charte .progression li.fait span { background: var(--sombre); color: var(--blanc); animation: coche-pop .5s var(--courbe); }
.page-charte .progression li.actif, .page-charte .progression li.fait { color: var(--encre); }
.page-charte .etape-legende { font: 500 clamp(38px, 4vw, 56px)/1 var(--titre); letter-spacing: -.03em; margin: 0 0 10px; }
.etape-intro { margin: 0 0 32px; font-size: 16px; color: var(--gris); }
.page-charte .champ legend, .page-charte .legende { font-weight: 800; margin-bottom: 15px; }

/* cartes de choix : coche qui apparaît, onde au clic */
.choix-grille { display: grid; grid-template-columns: repeat(2, 1fr); gap: 11px; }
.choix { position: relative; overflow: hidden; display: block; min-height: 115px; padding: 20px 20px 18px; border: 1px solid var(--trait-devis); background: var(--blanc); cursor: pointer; transition: border-color .25s, background-color .25s, transform .35s var(--courbe), box-shadow .35s; }
.choix:hover { transform: translateY(-3px); border-color: #AAA29B; box-shadow: 0 16px 30px -22px rgba(32, 31, 29, .35); }
.choix input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.choix strong { display: block; margin-bottom: 11px; padding-right: 26px; font-size: 18px; line-height: 1.25; }
.choix small { display: block; color: var(--gris); font-size: 14px; line-height: 1.35; }
.choix:has(input:checked) { border-color: var(--rouge); background: #FFF5F2; box-shadow: inset 0 0 0 1px var(--rouge); }
.choix::after { content: "✓"; position: absolute; right: 18px; top: 16px; color: var(--rouge); font-weight: 800; transform: scale(0) rotate(-30deg); transition: transform .45s cubic-bezier(.3, 1.6, .5, 1); }
.choix:has(input:checked)::after { transform: none; }
.choix:has(input:focus-visible) { outline: 3px solid #E9998E; outline-offset: 2px; }
.page-charte .pastille span { border-radius: 999px; border-color: var(--trait-devis); padding: 0 18px; min-height: 46px; font-weight: 700; }
.page-charte .pastille input:checked + span { background: var(--sombre); border-color: var(--sombre); color: var(--blanc); }
.onde-clic { position: absolute; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%; background: rgba(227, 33, 30, .18); pointer-events: none; animation: onde-clic .6s ease-out forwards; }
@keyframes onde-clic { to { transform: scale(26); opacity: 0; } }
.page-charte .pastille { overflow: hidden; border-radius: 999px; }

/* champs */
.page-charte input[type="text"], .page-charte input[type="tel"], .page-charte input[type="email"], .page-charte input[type="number"], .page-charte textarea {
  border-radius: 3px; border-color: var(--trait-devis); padding: 15px 17px; min-height: 54px;
}
.page-charte input:focus, .page-charte textarea:focus { border-color: var(--rouge); box-shadow: 0 0 0 2px #F5C5C0; }

/* budget : le curseur reste, le chiffre « respire » quand il change */
.page-charte .budget { background: var(--papier); border-radius: 0; border: 1px solid var(--trait-devis); }
.page-charte .budget-valeur { display: inline-block; transform-origin: left center; }
.page-charte .budget-valeur.bouge { animation: respire .35s var(--courbe); }
@keyframes respire { 40% { transform: scale(1.06); } }
.page-charte input[type="range"]::-webkit-slider-thumb { transition: transform .25s var(--courbe), box-shadow .25s; }
.page-charte input[type="range"]:active::-webkit-slider-thumb { transform: scale(1.25); box-shadow: 0 0 0 8px rgba(227, 33, 30, .15); }

/* boutons du bas */
.page-charte .formulaire-nav { border-top-color: var(--trait-devis); padding-top: 27px; margin-top: 36px; }
.page-charte .formulaire-nav .btn { border-radius: 3px; min-height: 53px; gap: 18px; }
.page-charte .formulaire-nav .btn span { display: inline-block; transition: transform .35s var(--courbe); }
.page-charte .formulaire-nav .btn:hover span { transform: translateX(5px); }
.btn-retour { border: 0; background: none; padding: 0; font-weight: 800; cursor: pointer; color: var(--encre); }
.btn-retour span { display: inline-block; transition: transform .35s var(--courbe); }
.btn-retour:hover span { transform: translateX(-5px); }
.btn-retour:hover { text-decoration: underline; text-underline-offset: 4px; }

/* récapitulatif : photo qui respire lentement, lignes qui s'animent à chaque changement */
.page-charte .recap { position: sticky; top: calc(var(--entete) + 22px); border: 1px solid var(--trait-devis); border-radius: 0; background: var(--blanc); overflow: hidden; }
.recap-photo { position: relative; height: 330px; overflow: hidden; background: #C6B89E; }
.recap-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 62% 50%; animation: respiration 16s ease-in-out infinite alternate; }
@keyframes respiration { from { transform: scale(1); } to { transform: scale(1.09) translate(-1.5%, -1%); } }
.recap-photo::after { content: ""; position: absolute; inset: 50% 0 0; background: linear-gradient(transparent, rgba(15, 15, 14, .55)); }
.recap-photo span { position: absolute; z-index: 1; left: 20px; bottom: 18px; color: var(--blanc); font-size: 13px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; animation: monte-devis .9s .9s var(--courbe) both; }
.page-charte .recap-corps { padding: 26px 30px 29px; }
.page-charte .recap-titre { font: 500 32px/1.03 var(--titre); letter-spacing: -.03em; margin: 0 0 21px; }
.page-charte .recap dl > div { grid-template-columns: 105px 1fr; gap: 13px; padding: 15px 0; border-top-color: var(--trait-devis); font-size: 14px; }
.page-charte .recap dt { color: var(--rouge); font-size: 11px; letter-spacing: .1em; }
.page-charte .recap dd { font-weight: 700; overflow: hidden; }
.page-charte .recap dd.maj { animation: glisse-recap .5s var(--courbe); }
@keyframes glisse-recap { from { opacity: 0; transform: translateY(10px); color: var(--rouge); } }
.recap-aide { margin: 6px 0 0; padding-top: 21px; border-top: 1px solid var(--trait-devis); color: var(--gris); font-size: 14px; line-height: 1.5; }
.recap-aide strong { color: var(--encre); }
.recap-appel { display: inline-flex; gap: 6px; margin-top: 17px; color: var(--rouge); font-weight: 800; text-decoration: underline; text-underline-offset: 4px; }
.recap-appel span { transition: transform .35s var(--courbe); }
.recap-appel:hover span { transform: translate(3px, -3px); }

@keyframes coche-pop { 0% { transform: scale(.5); } 60% { transform: scale(1.25); } 100% { transform: scale(1); } }

@media (max-width: 1050px) {
  .devis-corps { grid-template-columns: minmax(0, 1fr); }
  .page-charte .recap { position: static; display: grid; grid-template-columns: 39% 1fr; order: 0; }
  .recap-photo { height: 100%; min-height: 310px; }
}
@media (max-width: 700px) {
  .devis-chapo { font-size: 16px; }
  .devis-panneau { min-height: 0; }
  .choix-grille { grid-template-columns: 1fr; }
  .choix { min-height: 0; }
  .page-charte .recap { display: block; }
  .recap-photo { height: 220px; min-height: 0; }
  .page-charte .recap-corps { padding: 23px; }
  .page-charte .formulaire-nav { flex-wrap: wrap; }
  .page-charte .progression { gap: 5px; margin-bottom: 36px; }
  .page-charte .progression li { font-size: 0; gap: 0; }
  .page-charte .progression li span { font-size: 12px; }
  .page-charte .progression li.actif { font-size: 13px; gap: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .recap-photo img, .devis-surtitre::before, .devis-chapo, .recap-photo span { animation: none; }
}

/* =========================================================================
   PAGE CONTACT — même charte que le devis (maquette « contact »)
   ========================================================================= */
.page-charte .champ .legende { transition: color .3s; }
.page-charte .champ:focus-within .legende { color: var(--rouge); }
.page-charte select { border-radius: 3px; border-color: var(--trait-devis); min-height: 55px; padding: 15px 42px 15px 16px; }
.page-charte select:focus { border-color: var(--rouge); box-shadow: 0 0 0 2px #F5C5C0; }

.contact-mise { display: grid; grid-template-columns: minmax(310px, .83fr) minmax(0, 1.17fr); gap: 22px; align-items: start; padding-bottom: clamp(60px, 7vw, 95px); }
.contact-pile { display: grid; gap: 14px; }

/* cartes de coordonnées : glissent au survol, l'icône se remplit et lance une onde */
.contact-carte {
  position: relative; display: grid; grid-template-columns: 48px 1fr; gap: 19px; align-items: center; min-height: 130px; padding: 25px 28px;
  border: 1px solid var(--trait-devis); background: var(--blanc); transition: transform .45s var(--courbe), border-color .3s, box-shadow .45s;
}
.contact-carte:hover { transform: translateX(6px); border-color: #C9C1B8; box-shadow: 0 18px 34px -26px rgba(32, 31, 29, .4); }
.contact-icone { position: relative; width: 48px; height: 48px; display: grid; place-items: center; border-radius: 50%; background: #FFF0ED; color: var(--rouge); transition: background-color .35s, color .35s, transform .45s var(--courbe); }
.contact-icone svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.contact-icone::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 1.5px solid var(--rouge); opacity: 0; }
.contact-carte:hover .contact-icone { background: var(--rouge); color: var(--blanc); transform: rotate(-10deg) scale(1.06); }
.contact-carte:hover .contact-icone::after { animation: anneau 1s ease-out; }
@keyframes anneau { from { opacity: .7; transform: scale(1); } to { opacity: 0; transform: scale(1.9); } }
.contact-etiquette { margin: 0 0 7px; font-size: 11px; font-weight: 800; letter-spacing: .15em; text-transform: uppercase; color: var(--gris); }
.contact-carte a, .contact-carte strong {
  display: inline; font: 500 clamp(21px, 2vw, 28px)/1.18 var(--titre); letter-spacing: -.01em; word-break: break-word; text-decoration: none;
  background: linear-gradient(var(--rouge), var(--rouge)) left bottom / 0% 1.5px no-repeat; transition: background-size .5s var(--courbe), color .3s;
}
.contact-carte a::after { content: ""; position: absolute; inset: 0; } /* toute la carte est cliquable */
.contact-carte:hover a { color: var(--rouge); background-size: 100% 1.5px; }
.contact-note { margin: 7px 0 0; font-size: 13px; line-height: 1.4; color: var(--gris); }

/* carte sombre du secteur : cercles qui suivent la souris, onde lente */
.contact-secteur {
  position: relative; overflow: hidden; isolation: isolate; margin-top: 5px; min-height: 328px; padding: 29px;
  display: flex; flex-direction: column; justify-content: space-between; background: #252422; color: var(--blanc);
}
.contact-secteur::after, .contact-secteur::before {
  content: ""; position: absolute; right: -122px; bottom: -145px; width: 370px; height: 370px; border-radius: 50%; z-index: -1; pointer-events: none;
  transform: translate(var(--cx, 0px), var(--cy, 0px)); transition: transform .9s var(--courbe);
}
.contact-secteur::after { border: 1px solid rgba(255, 255, 255, .23); box-shadow: 0 0 0 56px rgba(255, 255, 255, .035), 0 0 0 112px rgba(255, 255, 255, .028); }
.contact-secteur::before { border: 1px solid rgba(255, 142, 132, .35); animation: onde 6s cubic-bezier(.2, .6, .3, 1) infinite; }
.contact-secteur .devis-surtitre { color: #FF8E84; }
.contact-secteur .devis-surtitre::before { border-color: #FF8E84; }
.contact-secteur h2 { margin: 34px 0 10px; font: 500 clamp(38px, 4vw, 56px)/1.01 var(--titre); letter-spacing: -.03em; }
.contact-secteur p { margin: 0; max-width: 360px; font-size: 15px; line-height: 1.55; color: #D3CBC4; }
.contact-secteur-tag { font-size: 12px !important; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; color: #FF8E84 !important; }

/* panneau du formulaire */
.contact-panneau { min-height: 0; padding: clamp(24px, 3.2vw, 42px) clamp(20px, 3.4vw, 46px) clamp(24px, 3vw, 39px); }
.contact-form-titre { margin: 0 0 13px; font: 500 clamp(40px, 4vw, 58px)/1 var(--titre); letter-spacing: -.03em; }
.page-contact textarea { min-height: 180px; }
.contact-envoi { align-items: center; gap: 22px; }
.contact-envoi p { margin: 0; max-width: 320px; font-size: 13px; line-height: 1.45; color: var(--gris); }
.contact-envoi .btn { margin-left: auto; white-space: nowrap; }

/* bandeau de fin : photo en parallaxe, boutons « aimantés » */
.contact-fin { position: relative; overflow: hidden; isolation: isolate; background: var(--sombre); color: var(--blanc); }
.contact-fin-fond { position: absolute; left: 0; top: -12%; width: 100%; height: 124%; object-fit: cover; object-position: center 51%; z-index: -2; }
.contact-fin::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(17, 17, 16, .92), rgba(17, 17, 16, .68) 55%, rgba(17, 17, 16, .3)); }
.contact-fin .conteneur { padding: clamp(56px, 7vw, 78px) 0; }
.contact-fin h2 { margin: 0 0 18px; max-width: 780px; font: 500 clamp(44px, 5.5vw, 78px)/1 var(--titre); letter-spacing: -.035em; }
.contact-fin h2 em { font-style: normal; color: #FF8074; }
.contact-fin p { margin: 0 0 27px; max-width: 550px; font-size: 17px; line-height: 1.5; color: #EFE8E2; }
.contact-fin-liens { display: flex; flex-wrap: wrap; gap: 12px; }
.contact-fin-liens .btn { border-radius: 3px; min-height: 54px; gap: 19px; will-change: transform; }
.page-charte .btn span[aria-hidden] { display: inline-block; transition: transform .35s var(--courbe); }
.page-charte .btn:hover span[aria-hidden] { transform: translate(3px, -3px); }

@media (max-width: 1100px) {
  .contact-mise { grid-template-columns: minmax(0, 1fr); }
  .contact-pile { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .contact-carte { display: block; min-height: 165px; padding: 20px; }
  .contact-icone { margin-bottom: 15px; }
  .contact-secteur { grid-column: 1 / -1; min-height: 220px; }
  .contact-secteur h2 { margin: 15px 0 10px; }
  .contact-carte a, .contact-carte strong { font-size: 20px; }
}
@media (max-width: 700px) {
  .contact-pile { grid-template-columns: minmax(0, 1fr); }
  .contact-carte { display: grid; grid-template-columns: 48px 1fr; min-height: 111px; }
  .contact-icone { margin: 0; }
  .contact-carte a, .contact-carte strong { font-size: 21px; }
  .contact-carte a[href^="mailto"] { font-size: clamp(16px, 4.6vw, 19px); word-break: normal; }
  .contact-secteur { min-height: 250px; }
  .contact-envoi { flex-direction: column; align-items: flex-start; }
  .contact-envoi .btn { margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) { .contact-secteur::before { animation: none; opacity: 0; } }

/* =========================================================================
   EN-TÊTE NOIR SUR TOUTES LES PAGES (comme Devis et Contact)
   ========================================================================= */
:root .entete, :root .entete.plein, :root .entete.sur-image {
  background: #201F1D; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; --fond-logo: #201F1D;
}
:root .entete .marque-nom, :root .entete .nav a:not(.btn) { color: var(--blanc); }
:root .entete .nav .nav-tel { color: #F97A6D; }
:root .entete .burger { background: var(--blanc); }
:root .entete .burger span { background: var(--encre); }
@media (max-width: 1100px) {
  /* le menu déroulant reste blanc : liens foncés */
  :root .entete .nav a:not(.btn) { color: var(--encre); }
  :root .entete .nav .nav-tel { color: var(--rouge-fonce); }
}