:root{
    --bg:#15120F;
    --bg-2:#1D1915;
    --card:#221D18;
    --ink:#F3EFE6;
    --ink-soft:#B4AB9C;
    --blue:#3E7CB1;
    --blue-glow:#5B9BD5;
    --ocre:#E8A23D;
    --green:#7FA25B;
    --line:rgba(243,239,230,0.09);
  }
  *{box-sizing:border-box; margin:0; padding:0;}
  html{ scroll-behavior:smooth; scroll-padding-top:80px; }
  body{
    background:var(--bg);
    color:var(--ink);
    font-family:'Inter', sans-serif;
    -webkit-font-smoothing:antialiased;
    /* confinement lateral : clip (et non hidden) ne casse pas position:sticky */
    overflow-x:clip;
  }
  .eyebrow{
    font-family:'JetBrains Mono', monospace;
    font-size:1.0625rem;
    letter-spacing:0.13em;
    text-transform:uppercase;
    color:var(--ocre);
    font-weight:500;
  }
  h1,h2,h3{ font-family:'Fraunces', serif; letter-spacing:-0.01em; color:var(--ink); }

  /* NAV */
  nav{
    display:flex; align-items:center; justify-content:space-between;
    padding:0 6vw;
    height:76px;
    position:fixed; top:0; left:0; right:0; z-index:50;
    background:rgba(21,18,15,0.75);
    backdrop-filter:blur(10px);
    border-bottom:1px solid var(--line);
  }
  .logo{ font-family:'Fraunces', serif; font-weight:700; font-size:1.3rem; color:var(--ink); text-decoration:none; }
  .logo span{ color:var(--ocre); }
  .navlinks{ display:flex; gap:2.2rem; list-style:none; font-size:0.9rem; font-weight:500; }
  .navlinks a{ color:var(--ink-soft); text-decoration:none; transition:color .2s; }
  .navlinks a:hover{ color:var(--ink); }
  .navcta{
    background:var(--ocre); color:#1a1410; padding:0.6rem 1.3rem;
    border-radius:3px; text-decoration:none; font-size:0.86rem; font-weight:700;
    box-shadow:0 0 24px rgba(232,162,61,0.35);
  }
  @media(max-width:800px){ .navlinks{display:none;} }

  /* HERO */
  .hero{
    position:relative;
    padding:7rem 6vw 5rem;
    max-width:1400px; margin:0 auto;
    text-align:center;
    overflow:hidden;
  }
  .splash{
    position:absolute; inset:0;
    z-index:0;
    pointer-events:none;
    overflow:hidden;
  }
  .drip-unit{ position:absolute; left:var(--x); top:0; bottom:0; width:1px; color:var(--color); }
  /* le conteneur fait toute la hauteur : les % de translateY se calculent dessus */
  .drip{
    position:absolute; left:0; top:0;
    width:13px; height:100%;
    opacity:0;
    will-change:transform, opacity;
    animation:dripFall var(--dur) cubic-bezier(.3,0,.7,1) infinite;
    animation-delay:var(--delay);
  }
  .drip::before{
    content:'';
    position:absolute; top:0; left:50%; margin-left:-6.5px;
    width:13px; height:19px;
    background:currentColor;
    border-radius:50% 50% 50% 50% / 62% 62% 38% 38%;
    filter:drop-shadow(0 0 8px currentColor);
  }
  .splat{
    width:150px; height:150px;
    position:absolute; left:0; top:84%;
    transform:translateX(-50%) translateY(-50%) scale(0.05);
    opacity:0;
    color:var(--color);
    animation:splatPop var(--dur) cubic-bezier(.3,0,.7,1) infinite;
    animation-delay:var(--delay);
  }
  .splat svg{ width:100%; height:100%; fill:currentColor; filter:drop-shadow(0 0 16px currentColor); }
  /* uniquement transform + opacity : aucun recalcul de mise en page */
  @keyframes dripFall{
    0%{   transform:translate3d(0,2%,0);  opacity:0; }
    6%{   opacity:1; }
    45%{  transform:translate3d(0,26%,0); }
    72%{  transform:translate3d(0,56%,0); }
    86%{  transform:translate3d(0,84%,0); opacity:1; }
    91%{  transform:translate3d(0,84%,0); opacity:0; }
    100%{ transform:translate3d(0,84%,0); opacity:0; }
  }
  @keyframes splatPop{
    0%,84%{ opacity:0; transform:translateX(-50%) translateY(-50%) scale(0.05); }
    87%{ opacity:1; transform:translateX(-50%) translateY(-50%) scale(1.18); }
    91%{ transform:translateX(-50%) translateY(-50%) scale(1); }
    96%{ opacity:1; transform:translateX(-50%) translateY(-50%) scale(1); }
    100%{ opacity:0; transform:translateX(-50%) translateY(-50%) scale(1); }
  }
  @media (prefers-reduced-motion: reduce){
    .drip,.splat{ animation:none; }
  }
  .hero-content{
    position:relative; z-index:1;
    background:radial-gradient(ellipse 70% 60% at 50% 40%, rgba(21,18,15,0.55), transparent 75%);
  }
  .hero h1{
    font-size:clamp(2.6rem, 6vw, 4.6rem); line-height:1.04; font-weight:700;
    margin:1rem 0 1.4rem;
  }
  .hero h1 em{ font-style:normal; background:linear-gradient(90deg, var(--blue-glow), var(--ocre)); -webkit-background-clip:text; background-clip:text; color:transparent; }
  .hero p{ font-size:1.12rem; color:var(--ink-soft); max-width:46ch; margin:0 auto 2.2rem; }
  .btnrow{ display:flex; gap:1rem; align-items:center; justify-content:center; flex-wrap:wrap; }
  .btn-primary{
    background:var(--ocre); color:#1a1410; padding:0.95rem 1.9rem;
    border-radius:3px; text-decoration:none; font-weight:700; font-size:0.98rem;
    box-shadow:0 0 30px rgba(232,162,61,0.4);
    transition:transform .2s;
  }
  .btn-primary:hover{ transform:translateY(-2px); }
  .btn-secondary{
    color:var(--ink); text-decoration:none; font-weight:600; font-size:0.98rem;
    border:1px solid var(--line); padding:0.95rem 1.7rem; border-radius:3px;
    transition:border-color .2s, background .2s;
  }
  .btn-secondary:hover{ border-color:var(--blue-glow); background:rgba(62,124,177,0.08); }

  /* STATS */
  .stats{
    position:relative; z-index:1;
    display:flex; justify-content:center; gap:3.5rem; flex-wrap:wrap;
    margin-top:4rem; padding-top:2.5rem; border-top:1px solid var(--line);
  }
  .stat{ text-align:center; }
  .stat .num{ font-family:'Fraunces', serif; font-weight:700; font-size:2.6rem; color:var(--ink); }
  .stat .num span{ color:var(--ocre); }
  .stat .label{ font-family:'JetBrains Mono', monospace; font-size:0.7rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--ink-soft); margin-top:0.3rem; }

  /* PRESTATIONS */
  .prestations{ padding:6rem 6vw; }
  .prestations .head, .prestations .grid{ max-width:1400px; margin-left:auto; margin-right:auto; }
  .prestations .head{ margin-bottom:2.8rem; text-align:center; }
  .prestations h2{ font-size:clamp(1.95rem,3vw,2.55rem); margin-top:0.6rem; }
  .grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:1.6rem; }
  @media(max-width:900px){ .grid{ grid-template-columns:repeat(2, 1fr); } }
  @media(max-width:560px){ .grid{ grid-template-columns:1fr; } }
  .card{
    background:var(--card); border:1px solid var(--line); border-radius:10px;
    padding:2.6rem 2.1rem 2.4rem; position:relative; overflow:hidden;
    min-height:250px;
    display:flex; flex-direction:column; justify-content:flex-end;
    transition:transform .25s ease, border-color .25s ease;
  }
  .card .dot{ width:44px; height:44px; margin-bottom:1.5rem; }
  .card h3{ font-size:1.32rem; margin-bottom:0.6rem; }
  .card p{ font-size:0.95rem; line-height:1.6; }
  .card::before{
    content:''; position:absolute; top:0; left:0; right:0; height:3px;
    background:var(--accent, var(--blue));
  }
  .card:hover{ transform:translateY(-6px); border-color:rgba(243,239,230,0.2); }
  .card .dot{ width:34px; height:34px; border-radius:50%; background:var(--accent, var(--blue)); margin-bottom:1.1rem; box-shadow:0 0 20px var(--accent, var(--blue)); }
  .card h3{ font-size:1.15rem; font-weight:600; margin-bottom:0.5rem; }
  .card p{ font-size:0.88rem; color:var(--ink-soft); line-height:1.55; }

  /* SIMULATEUR */
  .simulator{ padding:6rem 6vw; max-width:1300px; margin:0 auto; }
  .simulator .head{ text-align:center; margin-bottom:2.5rem; }
  .simulator h2{ font-size:clamp(1.95rem,3vw,2.55rem); margin-top:0.6rem; }
  .simulator .sub{ color:var(--ink-soft); font-size:0.92rem; margin-top:0.6rem; max-width:46ch; margin-left:auto; margin-right:auto; }
  .sim-wrap{ display:grid; grid-template-columns:1.2fr 1fr; gap:2.5rem; align-items:start; margin-top:2.5rem; }
  @media(max-width:820px){ .sim-wrap{ grid-template-columns:1fr; } }

  /* ===== SIMULATEUR : photo réelle + mur détouré =====
     Tout est composé au pixel près dans un <canvas> par script.js
     (photo + teinte/papier peint découpé au mur + ombrage d'origine).
     Aucune dépendance à mask-image : rendu identique sur tous les
     navigateurs, avec ou sans serveur (file://). */
  .room{
    position:relative; border-radius:8px; overflow:hidden;
    aspect-ratio:1448/1086;
    box-shadow:0 20px 50px rgba(0,0,0,0.35);
    background:#EDE8DD;
    margin:0;
  }
  .room-canvas{ width:100%; height:100%; display:block; }
  .room-caption{
    position:absolute; left:12px; bottom:12px;
    background:rgba(15,13,11,0.78); backdrop-filter:blur(6px);
    border:1px solid var(--line); border-radius:99px;
    padding:0.4rem 0.9rem;
    font-family:'JetBrains Mono',monospace; font-size:0.66rem;
    letter-spacing:0.08em; text-transform:uppercase; color:var(--ink);
  }

  .sim-controls{ display:flex; flex-direction:column; gap:1.2rem; }
  .sim-tabs{ display:flex; gap:0.6rem; }
  .tab{
    flex:1; background:var(--card); border:1px solid var(--line); color:var(--ink-soft);
    padding:0.7rem 0.8rem; border-radius:4px; font-family:'Inter',sans-serif; font-size:0.85rem;
    font-weight:600; cursor:pointer; transition:all .2s;
    -webkit-appearance:none; appearance:none;
  }
  .tab:hover{ border-color:var(--ocre); color:var(--ink); transform:translateY(-2px); }
  .tab.active{ background:var(--ocre); border-color:var(--ocre); color:#1a1410; }
  .tab.active:hover{ color:#1a1410; }

  /* rangée verticale généreuse : la légende sous chaque pastille (bottom:-1.3rem)
     déborde de son cadre — sans cet espace elle se fait recouvrir par la rangée suivante */
  .sim-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:2.4rem 0.8rem; padding-top:0.4rem; padding-bottom:1.6rem; }
  .swatch-btn{
    aspect-ratio:1; border-radius:6px; border:2px solid transparent; cursor:pointer;
    position:relative; transition:transform .15s, box-shadow .15s, border-color .15s;
    -webkit-appearance:none; appearance:none; padding:0; overflow:visible;
  }
  .swatch-btn:hover{ transform:translateY(-3px); border-color:rgba(243,239,230,0.5); }
  .swatch-btn.active{ box-shadow:0 0 0 2px var(--bg), 0 0 0 4px var(--ocre); }
  .swatch-btn .name{
    position:absolute; bottom:-1.3rem; left:0; right:0; text-align:center;
    font-size:0.68rem; color:var(--ink-soft); font-family:'JetBrains Mono',monospace;
  }

  /* pastille « couleur personnalisée » : roue chromatique + icône pipette,
     centrée seule sur une 3e ligne, sous les 6 teintes prédéfinies */
  .swatch-btn.custom{
    grid-column:2;
    background:conic-gradient(from 0deg, #E8A23D, #7FA25B, #3E7CB1, #B0876B, #D6885E, #E8A23D);
    display:flex; align-items:center; justify-content:center;
  }
  .swatch-btn.custom .pipette{
    width:60%; height:60%; border-radius:50%;
    background:rgba(21,18,15,0.72); backdrop-filter:blur(2px);
    display:flex; align-items:center; justify-content:center;
    font-size:1.1rem; color:var(--ink); pointer-events:none;
  }
  .swatch-btn.custom input[type="color"]{
    position:absolute; inset:0; width:100%; height:100%;
    opacity:0; cursor:pointer; border:none; padding:0;
  }

  /* REVIEWS */
  .reviews{ padding:6rem 6vw; max-width:1100px; margin:0 auto; }
  .reviews .head{ text-align:center; margin-bottom:2.5rem; }
  .reviews h2{ font-size:clamp(1.95rem,3vw,2.55rem); margin-top:0.6rem; }
  .review-carousel{ overflow:hidden; position:relative; }
  .review-track{ display:flex; transition:transform 0.5s ease; }
  .review-card{
    flex:0 0 100%; background:var(--card); border:1px solid var(--line); border-radius:8px;
    padding:2.2rem 2rem; text-align:center;
  }
  @media(min-width:700px){ .review-card{ flex:0 0 100%; } }
  .review-stars{ color:var(--ocre); font-size:1.1rem; letter-spacing:0.2rem; margin-bottom:1rem; }
  .review-text{ font-size:1.02rem; color:var(--ink); line-height:1.6; max-width:52ch; margin:0 auto 1.3rem; font-family:'Fraunces',serif; font-weight:500; }
  .review-author{ font-family:'JetBrains Mono',monospace; font-size:0.72rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--ink-soft); }
  .review-dots{ display:flex; justify-content:center; gap:0.5rem; margin-top:1.5rem; }
  .review-dots button{
    width:8px; height:8px; border-radius:50%; border:none; background:var(--line); cursor:pointer; padding:0;
  }
  .review-dots button.active{ background:var(--ocre); }

  /* CTA : inviter les clients à laisser un vrai avis Google */
  .review-cta{
    margin-top:2.6rem; display:flex; flex-direction:column; align-items:center; gap:0.9rem;
  }
  .review-cta p{ color:var(--ink-soft); font-size:0.92rem; }
  .review-cta-btn{
    display:inline-flex; align-items:center; gap:0.7rem;
    background:#FFFFFF; color:#1A1713; text-decoration:none;
    font-family:'Inter',sans-serif; font-weight:700; font-size:0.92rem;
    padding:0.85rem 1.7rem; border-radius:99px; border:none; cursor:pointer;
    box-shadow:0 10px 30px rgba(0,0,0,0.25);
    transition:transform .2s ease, box-shadow .2s ease;
  }
  .review-cta-btn:hover{ transform:translateY(-3px); box-shadow:0 16px 40px rgba(0,0,0,0.32); }
  .review-cta-btn svg{ width:20px; height:20px; flex:none; }

  /* popup de transition avant redirection vers Google */
  .review-pop{
    position:fixed; inset:0; z-index:100; display:none;
    align-items:center; justify-content:center;
    background:rgba(10,8,6,0.72); backdrop-filter:blur(4px);
    padding:1rem;
  }
  .review-pop.open{ display:flex; animation:popFade .25s ease; }
  .review-pop-card{
    position:relative; text-align:center;
    background:var(--bg-2); border:1px solid var(--line); border-radius:16px;
    width:100%; max-width:380px; padding:2.4rem 1.8rem 1.8rem;
    box-shadow:0 24px 60px rgba(0,0,0,0.6);
    animation:popUp .3s cubic-bezier(.2,.9,.3,1);
  }
  .review-pop-card .pop-close{ position:absolute; top:1rem; right:1rem; }
  .review-pop-g{ width:44px; height:44px; margin:0 auto 1.3rem; display:block; }
  .review-pop-card h3{ font-family:'Fraunces',serif; font-size:1.25rem; color:var(--ink); margin-bottom:0.8rem; }
  .review-pop-card p{ color:var(--ink-soft); font-size:0.9rem; line-height:1.6; margin-bottom:1.7rem; }
  .review-pop-actions{ display:flex; flex-direction:column; gap:0.7rem; }
  .review-pop-actions .btn-primary{
    display:block; width:100%; text-align:center; box-sizing:border-box;
    border:none; cursor:pointer; font-family:'Inter',sans-serif;
  }

  footer{ padding:3rem 6vw; text-align:center; color:var(--ink-soft); font-size:0.85rem; border-top:1px solid var(--line); }

  /* MENU MOBILE */
  .burger{
    display:none; background:none; border:1px solid var(--line); border-radius:4px;
    width:42px; height:38px; cursor:pointer; padding:0;
    flex-direction:column; gap:5px; align-items:center; justify-content:center;
  }
  .burger span{ display:block; width:20px; height:2px; background:var(--ink); transition:.25s; }
  .burger.open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
  .burger.open span:nth-child(2){ opacity:0; }
  .burger.open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
  .mobile-menu{
    display:none; position:fixed; inset:64px 0 0 0; background:var(--bg); z-index:49;
    padding:2rem 6vw; flex-direction:column; gap:0.4rem;
  }
  .mobile-menu.open{ display:flex; }
  .mobile-menu a{
    color:var(--ink); text-decoration:none; font-family:'Fraunces',serif; font-size:1.5rem;
    padding:1rem 0; border-bottom:1px solid var(--line);
  }
  .mobile-menu .mm-cta{
    background:var(--ocre); color:#1a1410; text-align:center; border-radius:4px;
    margin-top:1.4rem; border:none; font-family:'Inter',sans-serif; font-size:1rem; font-weight:700;
  }
  @media(max-width:800px){
    .burger{ display:flex; }
    .navcta{ display:none; }
  }

  /* BADGES DE CONFIANCE */
  .trust{
    position:relative; z-index:1;
    display:flex; justify-content:center; gap:0.7rem; flex-wrap:wrap; margin-top:2.2rem;
  }
  .trust span{
    font-family:'JetBrains Mono',monospace; font-size:0.68rem; letter-spacing:0.07em;
    text-transform:uppercase; color:var(--ink-soft);
    border:1px solid var(--line); border-radius:99px; padding:0.45rem 0.95rem;
    background:rgba(34,29,24,0.6);
  }
  .trust span b{ color:var(--ocre); font-weight:600; }

  /* PROCESS */
  .process{ padding:6rem 6vw; max-width:1200px; margin:0 auto; }
  .process .head{ text-align:center; margin-bottom:3rem; }
  .process h2{ font-size:clamp(1.95rem,3vw,2.55rem); margin-top:0.6rem; }
  .step{ position:relative; padding:1.8rem 1.4rem; background:var(--card); border:1px solid var(--line); border-radius:6px; }
  .step .n{
    font-family:'Fraunces',serif; font-size:2.4rem; font-weight:700; color:var(--ocre);
    line-height:1; margin-bottom:0.8rem; opacity:0.9;
  }
  .step h3{ font-size:1.05rem; margin-bottom:0.4rem; }
  .step p{ font-size:0.86rem; color:var(--ink-soft); line-height:1.55; }

  /* GALERIE AVANT/APRÈS */
  .gallery{ padding:6rem 6vw; }
  .gallery .head, .gallery .filters, .gallery .gal-grid{ max-width:1300px; margin-left:auto; margin-right:auto; }
  .gallery .head{ text-align:center; margin-bottom:2rem; }
  .gallery h2{ font-size:clamp(1.95rem,3vw,2.55rem); margin-top:0.6rem; }
  .filters{ display:flex; gap:0.6rem; justify-content:center; flex-wrap:wrap; margin-bottom:2.2rem; }
  .filter{
    background:var(--card); border:1px solid var(--line); color:var(--ink-soft);
    padding:0.55rem 1.1rem; border-radius:99px; font-family:'Inter',sans-serif;
    font-size:0.83rem; font-weight:600; cursor:pointer; transition:.2s;
  }
  .filter.active{ background:var(--ocre); border-color:var(--ocre); color:#1a1410; }
  .gal-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:1.3rem; }
  .ba{
    position:relative; aspect-ratio:4/3; border-radius:6px; overflow:hidden;
    border:1px solid var(--line); cursor:ew-resize;
  }
  .ba-layer{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; }
  .ba-clip{ position:absolute; inset:0; width:50%; overflow:hidden; }
  .ba-clip .ba-layer{ width:var(--w,100%); }
  .ba-divider{
    position:absolute; top:0; bottom:0; left:50%; width:2px; background:var(--ink);
    transform:translateX(-50%); pointer-events:none;
  }
  .ba-divider::after{
    content:'‹ ›'; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
    width:40px; height:40px; border-radius:50%; background:var(--ink); color:var(--bg);
    display:flex; align-items:center; justify-content:center; font-size:0.9rem; font-weight:700;
    letter-spacing:-1px;
  }
  .ba-range{ position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:ew-resize; margin:0; z-index:3; }
  .ba-tag{
    position:absolute; bottom:10px; padding:4px 9px; border-radius:3px;
    font-family:'JetBrains Mono',monospace; font-size:0.6rem; letter-spacing:0.08em;
    text-transform:uppercase; background:rgba(21,18,15,0.8); color:var(--ink); z-index:2;
  }
  .ba-tag.l{ left:10px; } .ba-tag.r{ right:10px; }
  .ba-caption{ margin-top:0.7rem; font-size:0.85rem; color:var(--ink-soft); }
  .ba-caption b{ color:var(--ink); font-weight:600; display:block; font-family:'Fraunces',serif; }
  .ba-caption b a{ color:inherit; text-decoration:none; }
  .ba-caption b a:hover{ color:var(--ocre); }
  .ba-galerie{ color:var(--ink-soft); text-decoration:underline; text-underline-offset:3px; }
  .ba-galerie:hover{ color:var(--ocre); }

  /* Le titre de la carte etait deja un lien, mais rien n'annoncait ce qu'on
     trouvait derriere. Le bouton le dit (§7.1).

     Cette regle vivait dans assets/realisations.css. Or la carte de chantier
     est produite par inc/render.php et reutilisee sur les pages prestations,
     conseils, inspirations et en bas des fiches — qui ne chargent pas cette
     feuille-la. Le lien y ressortait donc en bleu, et en violet une fois
     visite. Elle est ici parce que style.css est la seule feuille que TOUTES
     les pages chargent. */
  .ba-decouvrir{
    display:inline-block;
    margin-top:0.55rem;
    font-family:'JetBrains Mono', monospace;
    font-size:0.7rem;
    letter-spacing:0.06em;
    text-transform:uppercase;
    color:var(--ocre);
    text-decoration:none;
    border-bottom:1px solid transparent;
  }
  /* :visited explicitement : sans lui, le navigateur repasse le lien en violet
     une fois le chantier consulte, et la couleur de marque saute. */
  .ba-decouvrir:visited{ color:var(--ocre); }
  .ba-decouvrir:hover, .ba-decouvrir:focus-visible{ border-bottom-color:var(--ocre); }

  /* Carte sans photo « avant » : image seule, cliquable, pas de curseur */
  .ba-simple{ display:block; cursor:pointer; }
  .ba-simple img{ width:100%; height:100%; object-fit:cover; display:block; }
  /* Les couches du comparateur portent de vraies images (srcset, lazy loading) */
  .ba-layer > img{ width:100%; height:100%; object-fit:cover; display:block; }
  .ba-layer{ background-size:cover; background-position:center; }

  /* Galerie vide : aucune réalisation publiée pour le moment */
  .gallery-vide{
    max-width:640px; margin:0 auto; text-align:center;
    color:var(--ink-soft); font-size:0.95rem; line-height:1.75;
    background:var(--card); border:1px solid var(--line); border-radius:8px;
    padding:2.5rem 1.8rem;
  }
  .gallery-vide a{ color:var(--ocre); }

  /* PAGE DÉTAIL D'UNE RÉALISATION */
  .detail-meta{
    font-family:'JetBrains Mono',monospace; font-size:0.72rem; letter-spacing:0.08em;
    text-transform:uppercase; color:var(--ocre); margin-bottom:1rem;
  }
  .detail-galerie{ padding:4rem 6vw; }
  .detail-grid{
    max-width:1200px; margin:0 auto;
    display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:1.2rem;
  }
  .detail-photo{ margin:0; position:relative; }
  .detail-photo img{
    width:100%; height:auto; display:block;
    border-radius:6px; border:1px solid var(--line);
    background:var(--bg-2);
  }
  .detail-photo figcaption{
    position:absolute; top:12px; left:12px;
    font-family:'JetBrains Mono',monospace; font-size:0.6rem; letter-spacing:0.08em;
    text-transform:uppercase; background:rgba(21,18,15,0.8); color:var(--ink);
    padding:4px 9px; border-radius:3px;
  }
  /* Les deux etiquettes de la paire se lisent d'un coup d'oeil : memes couleurs
     que dans l'espace client, bleu pour l'avant, ocre pour l'apres. */
  .detail-photo.est-avant figcaption{ color:var(--blue-glow); }
  .detail-photo.est-apres figcaption{ color:var(--ocre); }
  .detail-vide{ text-align:center; color:var(--ink-soft); }

  /* BANDEAU DE PRÉVISUALISATION (espace client) */
  .apercu-bandeau{
    position:sticky; top:0; z-index:60;
    display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap;
    background:var(--ocre); color:#1a1410;
    padding:0.6rem 6vw;
    font-size:0.83rem; font-weight:600;
  }
  .apercu-actions{ display:flex; align-items:center; gap:1rem; flex-wrap:wrap; }
  .apercu-bandeau a{ color:#1a1410; text-decoration:underline; text-underline-offset:3px; }
  .apercu-bandeau button{
    background:#1a1410; color:var(--ocre); border:none; border-radius:3px;
    padding:0.35rem 0.8rem; font-family:'Inter',sans-serif; font-size:0.8rem;
    font-weight:700; cursor:pointer;
  }
  .apercu-bandeau button:disabled{ opacity:0.5; cursor:not-allowed; }
  .apercu-bandeau + .grain + nav{ top:auto; position:relative; }

  /* CLIENTS PRO */
  .clients{ padding:4rem 6vw; max-width:1100px; margin:0 auto; text-align:center; }
  .clients .eyebrow{ display:block; margin-bottom:1.6rem; }
  .client-row{ display:flex; justify-content:center; align-items:center; gap:3rem; flex-wrap:wrap; }
  .client-logo{
    font-family:'Inter',sans-serif; font-weight:700; font-size:1.4rem; color:var(--ink-soft);
    opacity:0.65; letter-spacing:0.02em; transition:opacity .25s;
  }
  .client-logo:hover{ opacity:1; }

  /* ZONE D'INTERVENTION */
  .zone{ padding:6rem 6vw; max-width:1200px; margin:0 auto; }
  .zone-wrap{ display:grid; grid-template-columns:1fr 1fr; gap:3rem; align-items:center; }
  @media(max-width:820px){ .zone-wrap{ grid-template-columns:1fr; } }
  .zone h2{ font-size:clamp(1.95rem,3vw,2.55rem); margin:0.6rem 0 1rem; }
  .zone p{ color:var(--ink-soft); font-size:0.95rem; line-height:1.65; margin-bottom:1.4rem; }
  .zone-list{ display:flex; flex-wrap:wrap; gap:0.5rem; list-style:none; }
  .zone-list li{
    font-size:0.8rem; color:var(--ink-soft); border:1px solid var(--line);
    padding:0.4rem 0.85rem; border-radius:99px;
  }
  .zone-map{ position:relative; aspect-ratio:1; border-radius:8px; overflow:hidden; }
  .zone-map iframe{ width:100%; height:100%; border:0; display:block; filter:grayscale(0.15) contrast(1.05); }

  /* DEVIS */
  .devis{ padding:6rem 6vw; max-width:900px; margin:0 auto; }
  .devis .head{ text-align:center; margin-bottom:2.5rem; }
  .devis h2{ font-size:clamp(1.95rem,3vw,2.55rem); margin-top:0.6rem; }
  .devis .sub{ color:var(--ink-soft); font-size:0.92rem; margin-top:0.6rem; }
  .form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
  @media(max-width:640px){ .form-grid{ grid-template-columns:1fr; } }
  .field{ display:flex; flex-direction:column; gap:0.4rem; }
  .field.full{ grid-column:1/-1; }
  .field label{
    font-family:'JetBrains Mono',monospace; font-size:0.68rem; letter-spacing:0.09em;
    text-transform:uppercase; color:var(--ink-soft);
  }
  .field input, .field select, .field textarea{
    background:var(--card); border:1px solid var(--line); border-radius:4px;
    padding:0.8rem 0.9rem; color:var(--ink); font-family:'Inter',sans-serif; font-size:0.92rem;
    transition:border-color .2s;
  }
  .field input:focus, .field select:focus, .field textarea:focus{
    outline:none; border-color:var(--ocre);
  }
  .field textarea{ resize:vertical; min-height:110px; }
  .form-submit{
    grid-column:1/-1; background:var(--ocre); color:#1a1410; border:none;
    padding:1rem; border-radius:4px; font-family:'Inter',sans-serif; font-size:0.98rem;
    font-weight:700; cursor:pointer; box-shadow:0 0 30px rgba(232,162,61,0.35); transition:transform .2s;
  }
  .form-submit:hover{ transform:translateY(-2px); }
  .form-note{ grid-column:1/-1; font-size:0.78rem; color:var(--ink-soft); text-align:center; }
  .form-status{
    grid-column:1/-1; text-align:center; font-size:0.85rem; min-height:1.2em;
    font-weight:600;
  }
  .form-status.erreur{ color:#E8896B; }
  .form-status.ok{ color:#8FBF6E; }
  .field input:invalid:not(:placeholder-shown){ border-color:rgba(232,137,107,0.6); }
  .form-submit:disabled{ opacity:0.6; cursor:progress; transform:none; }

  /* Message d'erreur pose sous un champ refuse par le serveur */
  .field-erreur{ font-size:0.78rem; color:#E8896B; font-weight:600; }
  .field [aria-invalid="true"]{ border-color:#E8896B; }

  /* Piege a robots : le champ existe dans le HTML mais reste hors de l'ecran.
     display:none ne conviendrait pas — les automates les plus soigneux
     ignorent justement les champs masques de cette facon. */
  .hp-champ{
    position:absolute; left:-9999px; top:auto;
    width:1px; height:1px; overflow:hidden;
  }

  /* ------------------------------------------------------------
     iOS : ne jamais zoomer quand on touche un champ
     ------------------------------------------------------------
     Safari sur iPhone agrandit la page des qu'on donne le focus a un champ
     dont le texte fait MOINS DE 16 px — et il ne la reduit jamais ensuite. Le
     visiteur se retrouve a devoir pincer pour revenir, au milieu de sa
     demande de devis. Tous les champs du site etaient a 0,92 rem, soit
     14,7 px : le formulaire de devis, la connexion a l'espace client et les
     trente-trois champs du calculateur zoomaient donc tous.

     La regle est bornee au mobile pour ne rien changer a l'ecran d'ordinateur,
     ou 0,92 rem est le bon rapport avec le reste du formulaire. Elle vit dans
     cette feuille-ci et non dans densite-v10.css parce que la page de
     connexion ne charge pas l'en-tete partage — elle n'aurait pas ete servie.

     Les selecteurs sont volontairement redondants : « .field input » pese plus
     lourd qu'un « input » nu et l'emporterait, quel que soit l'ordre des
     regles. On reprend donc les memes contextes, un par un.
     ------------------------------------------------------------ */
  @media(max-width:800px){
    input:not([type=range]):not([type=radio]):not([type=checkbox]),
    select,
    textarea,
    .field input, .field select, .field textarea,
    .calc-form input, .calc-form select, .calc-form textarea,
    .ec-form input,
    .rl-recherche input{ font-size:16px; }
  }

  /* FOOTER */
  .site-footer{
    border-top:1px solid var(--line); padding:4rem 6vw 2rem; background:var(--bg-2);
  }
  .foot-grid{
    max-width:1200px; margin:0 auto; display:grid;
    grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:2.5rem;
  }
  @media(max-width:820px){ .foot-grid{ grid-template-columns:1fr 1fr; } }
  @media(max-width:520px){ .foot-grid{ grid-template-columns:1fr; } }
  .foot-brand .logo{ margin-bottom:0.8rem; }
  .foot-brand p{ font-size:0.85rem; color:var(--ink-soft); line-height:1.6; }
  .foot-social{ display:flex; gap:0.7rem; margin-top:1.2rem; }
  .foot-social a{
    display:flex; align-items:center; justify-content:center;
    width:36px; height:36px; border-radius:50%;
    background:var(--card); border:1px solid var(--line); color:var(--ink-soft);
    transition:color .2s ease, border-color .2s ease, transform .2s ease;
  }
  .foot-social a:hover{ border-color:var(--ocre); transform:translateY(-2px); }
  .foot-social svg{ width:18px; height:18px; display:block; }
  /* Les trois intertitres du pied de page etaient des <h4> apres des <h2> :
     un lecteur d'ecran qui parcourt la page par titres y voyait deux niveaux
     manquants, sur TOUTES les pages du site. Ce sont maintenant des <h2> — le
     pied de page est un reperage a part entiere (<footer>), ses rubriques sont
     donc de premier niveau a l'interieur. L'apparence ne change pas. */
  .foot-col h2{
    font-family:'JetBrains Mono',monospace; font-size:0.68rem; letter-spacing:0.1em;
    text-transform:uppercase; color:var(--ocre); margin-bottom:1rem; font-weight:500;
  }
  .foot-col ul{ list-style:none; display:flex; flex-direction:column; gap:0.6rem; }
  .foot-col a, .foot-col li{ color:var(--ink-soft); text-decoration:none; font-size:0.87rem; line-height:1.5; }
  .foot-col a:hover{ color:var(--ink); }
  .foot-bottom{
    max-width:1200px; margin:3rem auto 0; padding-top:1.6rem; border-top:1px solid var(--line);
    display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap;
    font-size:0.78rem; color:var(--ink-soft);
  }
  .foot-bottom a{ color:var(--ink-soft); text-decoration:none; transition:color .2s ease; }
  .foot-bottom a:hover{ color:var(--ink); }

  /* ------------------------------------------------------------
     CIBLES TACTILES
     ------------------------------------------------------------
     Mesure faite au doigt sur un ecran de 375 px, pas a l'oeil : plusieurs
     commandes etaient trop petites pour etre touchees sans se tromper. Apple
     et Google recommandent 44 px, la norme WCAG 2.5.8 exige 24 px au minimum.

     Le principe partout ici : la ZONE TOUCHABLE grandit, le DESSIN ne bouge
     pas. background-clip:content-box limite le fond peint a la boite de
     contenu — le remplissage reste transparent et ne sert qu'a recevoir le
     doigt. Un point de carrousel reste donc un point de 8 px a l'ecran, mais
     il repond dans un carre de 44.

     Ces regles vivent dans CETTE feuille, et non dans densite-v10.css, parce
     qu'elle est la seule que toutes les pages chargent : les pages d'erreur
     ne passent pas par l'en-tete partage, et leur pied de page aurait garde
     ses liens de 15 px.
     ------------------------------------------------------------ */

  /* Le bouton du menu : 42 x 38, juste sous le seuil, alors que c'est la
     commande la plus utilisee du site sur telephone. Il n'existe qu'en dessous
     de 800 px, la regle n'a donc pas a etre bornee. */
  .burger{ width:44px; height:44px; }

  @media(max-width:800px){
    /* Borne au tactile : a la souris, 8 px se visent tres bien, et agrandir
       les cibles ecarterait le dessin sans rien apporter. */

    /* Les points du carrousel d'avis faisaient 8 x 8 px — et c'est le seul
       moyen de changer de temoignage au doigt. */
    .review-dots{ gap:0; }
    .review-dots button{
      width:44px; height:44px; padding:18px;
      background-clip:content-box; border-radius:50%;
    }

    /* Facebook et Google dans le pied de page : 36 x 36. */
    .foot-social{ gap:0.2rem; }
    .foot-social a{ width:44px; height:44px; padding:4px; background-clip:content-box; }

    /* Les listes du pied de page alignaient des liens de 16 px de haut espaces
       de 9 px : trois cibles se partageaient la surface d'un doigt. */
    .foot-col ul{ gap:0; }
    .foot-col ul a{ display:block; padding-block:0.62rem; }
    .foot-col ul li{ padding-block:0.2rem; }

    /* La ligne du bas — mentions, confidentialite, plan du site, espace
       client — est une suite de liens colles, separes par des points medians. */
    .foot-bottom a{ display:inline-block; padding-block:0.5rem; }

    /* « Voir le detail de nos prestations » : un appel a l'action seul sur sa
       ligne, mais haut de 17 px. */
    .see-more{ display:inline-block; padding-block:0.7rem; }
  }
  /* Accès à l'espace client : présent mais discret, il ne s'adresse pas aux visiteurs */
  .foot-espace-client{ opacity:0.5; transition:opacity .2s ease, color .2s ease; }
  .foot-espace-client:hover{ opacity:1; color:var(--ocre) !important; }

  /* BOUTON TÉLÉPHONE MOBILE */
  .call-fab{
    display:none; position:fixed; bottom:18px; right:18px; z-index:60;
    background:var(--ocre); color:#1a1410; width:56px; height:56px; border-radius:50%;
    align-items:center; justify-content:center; text-decoration:none; font-size:1.4rem;
    box-shadow:0 6px 24px rgba(0,0,0,0.45);
  }
  @media(max-width:800px){ .call-fab{ display:flex; } }


  /* ===== NAV ANIMÉE + BARRE DE PROGRESSION "COUP DE PINCEAU" ===== */
  nav{
    transition:height .35s cubic-bezier(.4,0,.2,1), background .35s ease, box-shadow .35s ease;
  }
  nav.shrink{
    background:rgba(21,18,15,0.94);
    box-shadow:0 6px 28px rgba(0,0,0,0.45);
  }
  .logo{
    transition:font-size .35s cubic-bezier(.4,0,.2,1);
    display:flex; align-items:center; gap:0.1rem;
  }
  nav.shrink .logo{ font-size:1.05rem; }
  .navlinks{ transition:font-size .35s ease; }
  nav.shrink .navlinks{ font-size:0.84rem; }
  .navcta{ transition:padding .3s ease, font-size .3s ease; }
  nav.shrink .navcta{ padding:0.45rem 1rem; font-size:0.8rem; }

  /* le point du logo se remplit de peinture au scroll */
  .logo-dot{
    display:inline-block; width:9px; height:9px; border-radius:50%;
    margin:0 3px; position:relative; top:-2px;
    background:var(--ocre);
    transition:background .5s ease, transform .35s ease, box-shadow .5s ease;
  }
  nav.shrink .logo-dot{ transform:scale(1.25); box-shadow:0 0 12px currentColor; }

  /* ============================================================
     LOGO IMAGE — T.D.H decoupe + pinceau, point entre les deux
     ============================================================ */
  .logo-img{ gap:0.5rem; }
  .logo-img img{ display:block; width:auto; }
  .logo-img .logo-text{ height:34px; transition:height .35s cubic-bezier(.4,0,.2,1); }
  .logo-img .logo-brush{ height:40px; transition:height .35s cubic-bezier(.4,0,.2,1); }
  .logo-img .logo-dot{ margin:0 1px; top:0; }
  .logo-dot-static{
    display:inline-block; width:9px; height:9px; border-radius:50%;
    background:var(--ocre); margin:0 1px; flex:none;
  }
  nav.shrink .logo-img .logo-text{ height:26px; }
  nav.shrink .logo-img .logo-brush{ height:31px; }
  nav.compact .logo-img .logo-text{ height:20px; }
  nav.compact .logo-img .logo-brush{ height:24px; }

  /* trait de peinture qui se remplit selon le scroll */
  .scroll-brush{
    position:absolute; left:0; bottom:-1px; height:3px; width:0%;
    background:linear-gradient(90deg,#3E7CB1,#7FA25B,#E8A23D,#D6885E);
    background-size:200% 100%;
    box-shadow:0 0 12px rgba(232,162,61,0.5);
    transition:width .08s linear;
  }
  .scroll-brush::after{
    content:''; position:absolute; right:-4px; top:-2.5px;
    width:9px; height:9px; border-radius:50% 50% 45% 55% / 55% 45% 55% 45%;
    background:#E8A23D; box-shadow:0 0 10px rgba(232,162,61,0.8);
  }


  /* ===== POPUP CONTACT — style conversation ===== */
  .contact-pop{
    position:fixed; inset:0; z-index:100; display:none;
    align-items:flex-end; justify-content:center;
    background:rgba(10,8,6,0.72); backdrop-filter:blur(4px);
    padding:1rem;
  }
  .contact-pop.open{ display:flex; animation:popFade .25s ease; }
  @keyframes popFade{ from{opacity:0;} to{opacity:1;} }
  @media(min-width:700px){ .contact-pop{ align-items:center; } }

  .pop-card{
    background:var(--bg-2); border:1px solid var(--line); border-radius:16px;
    width:100%; max-width:400px; padding:0;
    box-shadow:0 24px 60px rgba(0,0,0,0.6);
    animation:popUp .3s cubic-bezier(.2,.9,.3,1);
    max-height:92vh; overflow-y:auto;
    overflow:hidden;
  }
  @keyframes popUp{ from{ transform:translateY(28px); opacity:0; } to{ transform:translateY(0); opacity:1; } }

  /* en-tête façon appli de messagerie */
  .pop-head{
    display:flex; align-items:center; gap:0.7rem;
    padding:1.1rem 1.2rem; border-bottom:1px solid var(--line);
    background:var(--card);
  }
  .pop-avatar{
    width:42px; height:42px; border-radius:50%; flex-shrink:0;
    background:linear-gradient(135deg,var(--ocre),#B0633C);
    display:flex; align-items:center; justify-content:center;
    font-family:'Fraunces',serif; font-weight:700; color:#1a1410; font-size:1.05rem;
    position:relative;
  }
  .pop-avatar::after{
    content:''; position:absolute; bottom:-1px; right:-1px;
    width:11px; height:11px; border-radius:50%;
    background:#7FA25B; border:2px solid var(--card);
  }
  .pop-identity{ flex:1; min-width:0; }
  .pop-identity b{ display:block; font-size:0.96rem; color:var(--ink); font-weight:600; }
  .pop-identity span{ font-size:0.76rem; color:#7FA25B; }
  .pop-close{
    background:none; border:1px solid var(--line); color:var(--ink-soft);
    width:30px; height:30px; border-radius:50%; cursor:pointer; font-size:1rem; line-height:1;
    display:flex; align-items:center; justify-content:center; flex-shrink:0;
  }
  .pop-close:hover{ color:var(--ink); border-color:var(--ink-soft); }

  /* zone de conversation */
  .pop-chat{
    padding:1.4rem 1.2rem 1.1rem;
    display:flex; flex-direction:column; gap:0.6rem;
    min-height:130px;
  }
  .bubble{
    align-self:flex-start; max-width:82%;
    background:var(--card); border:1px solid var(--line);
    border-radius:4px 16px 16px 16px;
    padding:0.8rem 1rem;
    opacity:0; transform:translateY(6px) scale(0.98);
  }
  .bubble.show{
    animation:bubbleIn .35s cubic-bezier(.2,.8,.3,1) forwards;
  }
  @keyframes bubbleIn{ to{ opacity:1; transform:translateY(0) scale(1); } }

  /* indicateur "en train d'écrire" : 3 points qui rebondissent */
  .typing-dots{ display:flex; gap:4px; align-items:center; padding:0.35rem 0.2rem; }
  .typing-dots span{
    width:7px; height:7px; border-radius:50%; background:var(--ink-soft);
    animation:dotBounce 1.2s ease-in-out infinite;
  }
  .typing-dots span:nth-child(2){ animation-delay:.15s; }
  .typing-dots span:nth-child(3){ animation-delay:.3s; }
  @keyframes dotBounce{
    0%, 60%, 100%{ transform:translateY(0); opacity:0.5; }
    30%{ transform:translateY(-5px); opacity:1; }
  }

  .bubble-msg{ font-size:0.92rem; color:var(--ink); line-height:1.55; }
  .bubble-time{
    font-size:0.65rem; color:var(--ink-soft); margin-top:1rem; padding:0 0.2rem;
    font-family:'JetBrains Mono',monospace;
  }

  /* bouton principal, qui pulse légèrement */
  .pop-sms{
    position:relative;
    display:flex; align-items:center; justify-content:center; gap:0.6rem;
    margin:0.3rem 1.2rem 0.5rem;
    background:var(--ocre); color:#1a1410; border:none; border-radius:99px;
    padding:0.95rem; font-family:'Inter',sans-serif; font-size:0.98rem; font-weight:700;
    cursor:pointer; text-decoration:none;
    box-shadow:0 8px 24px rgba(232,162,61,0.35);
    transition:transform .15s;
  }
  .pop-sms:hover{ transform:translateY(-2px); }
  .pop-sms::before{
    content:''; position:absolute; inset:0; border-radius:99px;
    border:2px solid var(--ocre); animation:smsPulse 2.4s ease-out infinite;
  }
  @keyframes smsPulse{
    0%{ transform:scale(1); opacity:0.6; }
    70%{ transform:scale(1.08); opacity:0; }
    100%{ transform:scale(1.08); opacity:0; }
  }

  /* options secondaires, discrètes */
  .pop-alt{
    display:flex; justify-content:center; gap:1.4rem;
    padding:0.8rem 1.2rem 1.3rem;
  }
  .pop-alt a{
    display:flex; flex-direction:column; align-items:center; gap:0.3rem;
    text-decoration:none; color:var(--ink-soft); font-size:0.68rem;
    font-family:'JetBrains Mono',monospace; letter-spacing:0.02em;
    transition:color .2s;
  }
  .pop-alt a:hover{ color:var(--ink); }
  .pop-alt .ico{
    width:34px; height:34px; border-radius:50%; background:var(--card);
    border:1px solid var(--line);
    display:flex; align-items:center; justify-content:center; font-size:0.95rem; color:var(--ink);
  }

  /* un PC ne passe pas d'appel ni de SMS : le CTA principal devient l'email */
  .cta-desktop{ display:none; }
  @media(min-width:801px){
    .cta-mobile{ display:none; }
    .cta-desktop{ display:flex; }
    /* email deja propose en CTA principal : plus besoin du doublon en icone */
    .cta-mobile-inline{ display:none; }
  }

  @media (prefers-reduced-motion: reduce){
    .pop-sms::before{ animation:none; }
    .typing-dots span{ animation:none; opacity:0.8; }
  }

  /* le bouton flottant pulse doucement */
  .call-fab{ transition:transform .2s ease; }
  .call-fab:hover{ transform:scale(1.08); }
  .call-fab::before{
    content:''; position:absolute; inset:0; border-radius:50%;
    border:2px solid var(--ocre); animation:fabPulse 2.6s ease-out infinite;
  }
  @keyframes fabPulse{
    0%{ transform:scale(1); opacity:0.7; }
    70%{ transform:scale(1.55); opacity:0; }
    100%{ transform:scale(1.55); opacity:0; }
  }
  /* visible aussi sur desktop maintenant */
  @media(min-width:801px){
    .call-fab{ display:flex; bottom:26px; right:26px; }
  }
  @media (prefers-reduced-motion: reduce){
    .call-fab::before{ animation:none; }
  }


  /* ===== NAV : 3 ÉTATS SELON LE SENS DU SCROLL ===== */
  nav.shrink{ height:58px; }
  nav.shrink .logo{ font-size:0.98rem; }
  nav.shrink .navlinks{ font-size:0.8rem; gap:1.6rem; }
  nav.shrink .navcta{ padding:0.38rem 0.9rem; font-size:0.76rem; }
  nav.shrink .burger{ height:32px; width:36px; }

  /* état ultra-compact : on descend activement */
  nav.compact{ height:46px; }
  nav.compact .logo{ font-size:0.86rem; }
  nav.compact .navlinks{ font-size:0.74rem; gap:1.3rem; }
  nav.compact .navcta{ padding:0.28rem 0.75rem; font-size:0.7rem; }
  nav.compact .burger{ height:28px; width:32px; }
  nav.compact .logo-dot{ width:7px; height:7px; }

  /* ===== ENTRÉE DES CARTES AVEC TRAÎNÉE DE PEINTURE ===== */
  .reveal{
    opacity:0;
    transform:translateX(-90px);
    transition:opacity 1.5s cubic-bezier(.16,.6,.25,1), transform 1.5s cubic-bezier(.16,.6,.25,1);
    position:relative;
  }
  .reveal.from-right{ transform:translateX(90px); }
  .reveal.in-view{ opacity:1; transform:translateX(0); }

  /* la traînée : un voile à la couleur du cadre qui le suit puis s'efface */
  .reveal .trail{
    position:absolute; top:0; bottom:0; width:150px;
    pointer-events:none; opacity:0; border-radius:6px;
    z-index:-1;
  }
  .reveal:not(.from-right) .trail{
    left:-150px;
    background:linear-gradient(90deg, transparent, var(--accent, var(--ocre)));
  }
  .reveal.from-right .trail{
    right:-150px;
    background:linear-gradient(270deg, transparent, var(--accent, var(--ocre)));
  }
  .reveal.in-view .trail{ animation:trailSweep 1.5s cubic-bezier(.16,.6,.25,1) forwards; }
  @keyframes trailSweep{
    0%{ opacity:0; filter:blur(2px); }
    22%{ opacity:0.75; }
    60%{ opacity:0.45; filter:blur(7px); }
    100%{ opacity:0; filter:blur(16px); }
  }

  /* petite éclaboussure au moment où le cadre se pose */
  .reveal .land{
    position:absolute; top:50%; width:14px; height:14px; border-radius:50%;
    background:var(--accent, var(--ocre)); opacity:0; pointer-events:none;
    transform:translateY(-50%);
  }
  .reveal:not(.from-right) .land{ left:-6px; }
  .reveal.from-right .land{ right:-6px; }
  .reveal.in-view .land{ animation:landPop 1s ease-out 1.05s forwards; }
  @keyframes landPop{
    0%{ opacity:0.9; transform:translateY(-50%) scale(0.3); }
    45%{ opacity:0.55; transform:translateY(-50%) scale(1.6); }
    100%{ opacity:0; transform:translateY(-50%) scale(2.4); }
  }

  /* les traînées peuvent dépasser du cadre, mais jamais de la section */
  /* uniquement les sections SANS élément collant : overflow casse position:sticky */
  .prestations, .gallery, .engagements, .artisan, .brands, .clients, .figures, .faq, .devis, .zone, .reviews{ overflow-x:clip; }
  .grid, .gal-grid{ overflow:visible; }

  @media(max-width:640px){
    .reveal{ transform:translateX(-45px); }
    .reveal.from-right{ transform:translateX(45px); }
    .reveal.in-view{ transform:translateX(0); }
    .reveal .trail{ width:90px; }
    .reveal:not(.from-right) .trail{ left:-90px; }
    .reveal.from-right .trail{ right:-90px; }
  }

  @media (prefers-reduced-motion: reduce){
    .reveal{ opacity:1; transform:none; transition:none; }
    .reveal .trail, .reveal .land{ display:none; }
  }


  /* repli pour les navigateurs sans overflow:clip (sans casser le sticky) */
  @supports not (overflow-x: clip){
    .prestations, .gallery{ overflow-x:hidden; }
  }

  /* ===== PROCESS : PILE DE CARTES PILOTÉE PAR LE SCROLL ===== */
  .process{
    padding:0 6vw;
    max-width:none;
    height:360vh;
    height:360svh;             /* svh = hauteur stable, insensible à la barre du navigateur */
    position:relative;
  }
  .process-sticky{
    position:sticky; top:0;
    height:100vh;
    height:100svh;
    display:flex; flex-direction:column;
    align-items:center; justify-content:center;
    gap:1.6rem;
    max-width:1200px; margin:0 auto;
  }
  .process .head{ margin-bottom:0; text-align:center; }

  .stack{
    position:relative;
    width:100%; max-width:620px;
    height:300px;
    padding-bottom:60px;
  }
  .process .step{
    position:absolute; inset:0;
    background:var(--card);
    border:1px solid var(--line);
    border-radius:14px;
    padding:2.4rem 2.2rem 2.2rem;
    display:flex; flex-direction:column; justify-content:center;
    box-shadow:0 18px 50px rgba(0,0,0,0.45);
    will-change:transform, opacity;
    transform-origin:50% 100%;
    overflow:hidden;
    backface-visibility:hidden;
    -webkit-backface-visibility:hidden;
    transform:translate3d(0,0,0);
  }
  /* liseré de couleur en haut de chaque carte */
  .process .step .step-bar{
    position:absolute; top:0; left:0; right:0; height:4px;
    background:var(--accent);
  }
  /* halo coloré discret */
  .process .step::after{
    content:''; position:absolute; right:-70px; top:-70px;
    width:220px; height:220px; border-radius:50%;
    background:var(--accent); opacity:0.09; filter:blur(30px);
    pointer-events:none;
  }
  .process .step .n{
    font-family:'Fraunces',serif; font-size:3.2rem; font-weight:700;
    color:var(--accent); line-height:1; margin-bottom:0.9rem; opacity:0.95;
  }
  .process .step h3{ font-size:1.55rem; margin-bottom:0.7rem; }
  .process .step p{ font-size:0.98rem; color:var(--ink-soft); line-height:1.65; max-width:44ch; }

  /* ===== INDICATEUR DE PROGRESSION ===== */
  .stack-progress{
    display:flex; gap:0.6rem; width:100%; max-width:620px;
  }
  .sp-seg{
    flex:1; position:relative; height:4px; border-radius:99px;
    background:rgba(243,239,230,0.12); overflow:visible;
  }
  .sp-seg i{
    display:block; height:100%; width:0%; border-radius:99px;
    background:var(--ocre);
    box-shadow:0 0 10px rgba(232,162,61,0.55);
    will-change:width;
  }
  .sp-seg::after{
    content:attr(data-label);
    position:absolute; top:12px; left:0;
    font-family:'JetBrains Mono',monospace; font-size:0.6rem;
    letter-spacing:0.08em; text-transform:uppercase;
    color:var(--ink-soft); opacity:0.5; transition:opacity .25s, color .25s;
    white-space:nowrap;
  }
  .sp-seg.active::after{ opacity:1; color:var(--ocre); }

  @media(max-width:700px){
    .process{ height:340vh; height:340svh; }
    .stack{ height:340px; }
    .process .step{ padding:2rem 1.5rem; }
    .process .step .n{ font-size:2.6rem; }
    .process .step h3{ font-size:1.3rem; }
    .process .step p{ font-size:0.92rem; }
    .sp-seg::after{ font-size:0.52rem; }
  }

  /* accessibilité : pas d'empilement animé si mouvement réduit */
  @media (prefers-reduced-motion: reduce){
    .process{ height:auto; padding:6rem 6vw; }
    .process-sticky{ position:static; height:auto; }
    .stack{ height:auto; display:flex; flex-direction:column; gap:1.2rem; perspective:none; }
    .process .step{ position:relative; inset:auto; transform:none !important; opacity:1 !important; }
  }


  /* réserve une hauteur constante sous la nav fixe :
     la nav peut changer de taille sans jamais décaler la page */
  .nav-spacer{ height:76px; }
  .mobile-menu{ top:76px; }

  /* ===== ACCESSIBILITE : focus clavier visible ===== */
  a:focus-visible,
  button:focus-visible,
  input:focus-visible,
  select:focus-visible,
  textarea:focus-visible,
  [tabindex]:focus-visible{
    outline:2px solid var(--ocre);
    outline-offset:3px;
    border-radius:3px;
  }
  /* pas de contour au clic souris, uniquement au clavier */
  a:focus:not(:focus-visible),
  button:focus:not(:focus-visible){ outline:none; }

  /* lien d'evitement pour la navigation clavier */
  .skip-link{
    position:absolute; left:-9999px; top:0; z-index:200;
    background:var(--ocre); color:#1a1410; padding:0.8rem 1.2rem;
    font-weight:700; text-decoration:none; border-radius:0 0 4px 0;
  }
  .skip-link:focus{ left:0; }

  /* ============================================================
     ÉCRAN D'OUVERTURE — animation du logo TDH
     ============================================================ */
  #preloader{
    position:fixed; inset:0; z-index:9999;
    background:#15120F;
    display:flex; align-items:center; justify-content:center;
    flex-direction:column;
    overflow:hidden;
  }
  #preloader.hide{
    animation:curtainUp .9s cubic-bezier(.6,0,.2,1) forwards;
    animation-delay:.15s;
    pointer-events:none;
  }
  @keyframes curtainUp{
    to{ transform:translateY(-100%); }
  }

  .intro-logo{
    display:flex; align-items:baseline; justify-content:center;
    font-family:'Baloo 2', cursive; font-weight:800;
    font-size:clamp(2.8rem, 13vw, 6.5rem);
    line-height:1;
    position:relative;
  }
  .intro-letter{
    display:inline-block;
    background:linear-gradient(180deg, #FFEFB8 0%, #FFD873 32%, #F0A93E 78%, #E0902E 100%);
    -webkit-background-clip:text; background-clip:text; color:transparent;
    -webkit-text-stroke:2.5px #E85D9E;
    paint-order:stroke fill;
    filter:drop-shadow(0 3px 0 #C9457F) drop-shadow(0 10px 22px rgba(232,93,158,0.45));
    opacity:0; transform:scale(0.25) rotate(-14deg) translateY(30px);
    display:inline-block;
  }
  .intro-letter.dot{
    font-size:0.62em; margin:0 0.02em; align-self:flex-end;
    -webkit-text-stroke:1.6px #E85D9E;
  }
  .intro-letter.pop{
    animation:letterPop .72s cubic-bezier(.22,1.8,.4,1) forwards;
  }
  @keyframes letterPop{
    0%{ opacity:0; transform:scale(0.25) rotate(-14deg) translateY(30px); }
    62%{ opacity:1; transform:scale(1.14) rotate(4deg) translateY(-6px); }
    100%{ opacity:1; transform:scale(1) rotate(0deg) translateY(0); }
  }

  /* trait de pinceau qui souligne le logo une fois assemblé */
  .intro-swoosh{
    width:min(60vw, 320px); height:26px; margin-top:0.6rem;
    opacity:0;
  }
  .intro-swoosh path{
    fill:none; stroke:url(#swooshGradIntro);
    stroke-width:7; stroke-linecap:round;
    stroke-dasharray:340; stroke-dashoffset:340;
  }
  .intro-swoosh.draw{
    animation:swooshFadeIn .3s ease forwards;
  }
  .intro-swoosh.draw path{
    animation:swooshDraw .55s cubic-bezier(.3,.8,.3,1) forwards;
  }
  @keyframes swooshFadeIn{ to{ opacity:1; } }
  @keyframes swooshDraw{ to{ stroke-dashoffset:0; } }

  .intro-tag{
    margin-top:1.6rem; opacity:0;
    font-family:'JetBrains Mono', monospace; font-size:0.72rem;
    letter-spacing:0.22em; text-transform:uppercase; color:#B4AB9C;
  }
  .intro-tag.show{ animation:tagFade .6s ease forwards; }
  @keyframes tagFade{ to{ opacity:1; } }

  /* Barre de chargement mise en scene : elle ne mesure rien de reel, elle
     donne juste l'impression qu'un travail est en cours pendant que tout —
     polices, video, script — se charge en parallele en arriere-plan. Voir
     assets/script.js pour la logique (progression asymptotique puis sprint
     final a 100 % une fois le site reellement pret). */
  .intro-loader{
    margin-top:1.5rem;
    width:min(46vw, 190px); height:3px;
    background:rgba(243,239,230,0.14);
    border-radius:99px; overflow:hidden;
    opacity:0;
  }
  .intro-loader.show{ animation:tagFade .5s ease forwards; }
  .intro-loader-bar{
    width:0%; height:100%;
    background:linear-gradient(90deg, #E8A23D, #FFD873);
    border-radius:99px;
    /* transition courte : lisse les a-coups entre deux mises a jour du faux
       pourcentage (toutes les 90 ms) sans jamais accuser de retard visible */
    transition:width .09s linear;
  }
  /* sprint final vers 100 % : transition plus ample et plus douce, posee
     juste avant de fixer la largeur a 100 % (voir script.js) */
  .intro-loader-bar.sprint{
    transition:width .38s cubic-bezier(.22,.8,.2,1);
  }

  .intro-pct{
    margin-top:0.55rem; opacity:0;
    font-family:'JetBrains Mono', monospace; font-size:0.68rem;
    letter-spacing:0.14em; color:#8A8172;
    font-variant-numeric:tabular-nums; /* les chiffres ne changent pas de largeur en defilant */
  }
  .intro-pct.show{ animation:tagFade .5s ease forwards; }

  @media (prefers-reduced-motion: reduce){
    #preloader{ display:none !important; }
  }

  /* ============================================================
     TEXTURE DE GRAIN — profondeur discrète sur tout le site
     ============================================================ */
  .grain{
    position:fixed; inset:0; z-index:9000; pointer-events:none;
    opacity:0.045; mix-blend-mode:overlay;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  }

  /* ============================================================
     CURSEUR PERSONNALISÉ — desktop uniquement
     ============================================================ */
  .has-custom-cursor, .has-custom-cursor a, .has-custom-cursor button,
  .has-custom-cursor input, .has-custom-cursor textarea, .has-custom-cursor select{
    cursor:none;
  }
  .cursor-dot, .cursor-ring{
    position:fixed; top:0; left:0; z-index:10000; pointer-events:none;
    border-radius:50%;
    transform:translate(-50%,-50%);
    will-change:transform;
  }
  .cursor-dot{
    width:7px; height:7px; background:var(--ocre);
  }
  .cursor-ring{
    width:34px; height:34px; border:1.5px solid rgba(232,162,61,0.55);
    transition:width .25s ease, height .25s ease, border-color .25s ease, background .25s ease;
  }
  .cursor-ring.hover{
    width:56px; height:56px; background:rgba(232,162,61,0.1);
    border-color:var(--ocre);
  }
  @media(max-width:900px), (hover:none){
    .cursor-dot, .cursor-ring{ display:none; }
  }

  /* ============================================================
     BANDEAU DÉFILANT — mots-clés en continu
     ============================================================ */
  .marquee{
    overflow:hidden; border-top:1px solid var(--line); border-bottom:1px solid var(--line);
    background:var(--bg-2); padding:0.9rem 0;
    position:relative; z-index:1;
  }
  .marquee-track{
    display:flex; width:max-content;
    animation:marqueeScroll 32s linear infinite;
  }
  .marquee-track span{
    display:flex; align-items:center; gap:1.4rem;
    font-family:'JetBrains Mono', monospace; font-size:0.78rem;
    letter-spacing:0.14em; text-transform:uppercase; color:var(--ink-soft);
    padding:0 1.4rem; white-space:nowrap;
  }
  .marquee-track span b{ color:var(--ocre); font-weight:500; }
  @keyframes marqueeScroll{
    from{ transform:translateX(0); }
    to{ transform:translateX(-50%); }
  }
  @media (prefers-reduced-motion: reduce){
    .marquee-track{ animation:none; }
  }

  /* ============================================================
     BOUTONS MAGNÉTIQUES
     ============================================================ */
  .magnetic{ display:inline-flex; transition:transform .12s ease-out; }


  /* ============================================================
     V7 — HERO PLEIN ÉCRAN + DÉCOR FIXE
     ============================================================ */

  /* le décor reste immobile et se dissout au défilement */
  .hero-bg{
    position:fixed; inset:0; z-index:0;
    pointer-events:none;
    will-change:opacity, transform;
  }
  .hero-bg img, .hero-bg video{ width:100%; height:100%; display:block; object-fit:cover; object-position:center 30%; }
  .hero-bg::after{
    content:''; position:absolute; inset:0;
    background:
      radial-gradient(ellipse 80% 70% at 50% 42%, rgba(0,0,0,0) 30%, rgba(10,8,7,0.68) 100%),
      linear-gradient(180deg, rgba(10,8,7,0.55) 0%, rgba(10,8,7,0.15) 30%, rgba(10,8,7,0.35) 75%, rgba(10,8,7,0.75) 100%);
  }

  /* tout le contenu passe au-dessus du décor */
  main > section, main > div, .site-footer{ position:relative; z-index:1; }

  .hero{
    position:relative;
    min-height:100vh; min-height:100svh;
    display:flex; flex-direction:column;
    align-items:center; justify-content:center;
    padding:6rem 6vw 7rem;
    text-align:center;
    background:none;
    max-width:none;
    /* le voile derriere le titre deborde volontairement : on le confine ici */
    overflow-x:clip;
  }
  .hero-inner{
    position:relative; z-index:2;
    max-width:1100px; width:100%;
    /* le bloc entier (texte + voile) apparaît en fondu, calé sur la vidéo de fond */
    opacity:0;
    transition:opacity 1.4s ease;
  }
  .hero-inner.visible{ opacity:1; }
  /* voile sombre derrière le texte : le décor peut être lumineux sans nuire à la lecture */
  .hero-inner::before{
    content:''; position:absolute; inset:-8% -12%;
    background:radial-gradient(ellipse 62% 58% at 50% 46%, rgba(21,18,15,0.82), rgba(21,18,15,0.4) 62%, transparent 82%);
    z-index:-1; pointer-events:none;
  }

  /* titre monumental, révélé ligne par ligne */
  .hero-title{
    font-family:'Fraunces', serif; font-weight:700;
    font-size:clamp(2.5rem, 8.5vw, 6.5rem);
    line-height:0.98; letter-spacing:-0.025em;
    margin:1.4rem 0 1.8rem;
  }
  .hero-title .line{ display:block; overflow:hidden; }
  .hero-title .line-in{
    display:block;
    transform:translateY(105%);
    transition:transform 1.15s cubic-bezier(.16,.8,.24,1);
  }
  .hero-title.in .line-in{ transform:translateY(0); }
  .hero-title .line:nth-child(1) .line-in{ transition-delay:.05s; }
  .hero-title .line:nth-child(2) .line-in{ transition-delay:.15s; }
  .hero-title .line:nth-child(3) .line-in{ transition-delay:.25s; }
  .hero-title .line:nth-child(4) .line-in{ transition-delay:.35s; }
  .hero-title .accent{
    background:linear-gradient(100deg,
      #A66A22 0%, #E8A23D 28%, #F6C36B 46%,
      #FFF6E0 50%,
      #F6C36B 54%, #E8A23D 72%, #A66A22 100%);
    background-size:280% 100%;
    -webkit-background-clip:text; background-clip:text; color:transparent;
    /* balayage lent : la lumière glisse d'une lettre à l'autre, puis marque une pause */
    animation:accentShine 12s ease-in-out infinite;
  }
  .hero-title .line:nth-child(4) .accent{ animation-delay:1.1s; }
  @keyframes accentShine{
    0%{ background-position:120% 0; }
    65%, 100%{ background-position:-160% 0; }
  }

  .hero-lead{
    font-size:clamp(1rem, 1.5vw, 1.18rem); color:var(--ink-soft);
    max-width:52ch; margin:0 auto 2.4rem; line-height:1.65;
  }

  /* apparition douce des éléments secondaires */
  .reveal-up{
    opacity:0; transform:translateY(22px);
    transition:opacity .9s ease, transform .9s cubic-bezier(.16,.8,.24,1);
  }
  .reveal-up.in{ opacity:1; transform:translateY(0); }
  .hero-lead.reveal-up{ transition-delay:.5s; }
  .btnrow.reveal-up{ transition-delay:.62s; }
  .trust.reveal-up{ transition-delay:.74s; }
  .eyebrow.reveal-up{ transition-delay:.15s; }

  .hero .btnrow{ margin-bottom:2.4rem; }
  .hero .trust{ margin-top:0; }

  /* invitation à descendre */
  .scroll-hint{
    position:absolute; bottom:2.2rem; left:50%; transform:translateX(-50%);
    display:flex; flex-direction:column; align-items:center; gap:0.7rem;
    text-decoration:none; z-index:2;
    opacity:0; animation:hintIn .8s ease 1.6s forwards;
  }
  @keyframes hintIn{ to{ opacity:1; } }
  .scroll-hint .sh-line{
    width:1px; height:46px; background:linear-gradient(180deg, transparent, var(--ocre));
    position:relative; overflow:hidden;
  }
  .scroll-hint .sh-line::after{
    content:''; position:absolute; left:0; top:0; width:100%; height:14px;
    background:var(--ink);
    animation:hintSlide 2s ease-in-out infinite;
  }
  @keyframes hintSlide{
    0%{ transform:translateY(-16px); opacity:0; }
    40%{ opacity:1; }
    100%{ transform:translateY(46px); opacity:0; }
  }
  .scroll-hint .sh-txt{
    font-family:'JetBrains Mono', monospace; font-size:0.62rem;
    letter-spacing:0.2em; text-transform:uppercase; color:var(--ink-soft);
  }

  /* ============================================================
     CHIFFRES EN GRAND FORMAT
     ============================================================ */
  .figures{ padding:5rem 6vw; }
  .fig-grid{
    max-width:1300px; margin:0 auto;
    display:grid; grid-template-columns:repeat(4,1fr); gap:1px;
    background:var(--line);
    border:1px solid var(--line);
    border-radius:8px; overflow:hidden;
  }
  @media(max-width:760px){ .fig-grid{ grid-template-columns:repeat(2,1fr); } }
  .fig{
    background:var(--bg); padding:2.4rem 1.4rem;
    text-align:center;
    transition:background .3s ease;
  }
  .fig:hover{ background:var(--card); }
  .fig .num{
    font-family:'Fraunces', serif; font-weight:700;
    font-size:clamp(2.4rem, 5vw, 3.8rem); line-height:1; color:var(--ink);
  }
  .fig .num span{ color:var(--ocre); }
  .fig .label{
    font-family:'JetBrains Mono', monospace; font-size:0.66rem;
    letter-spacing:0.12em; text-transform:uppercase; color:var(--ink-soft);
    margin-top:0.7rem;
  }

  /* ============================================================
     PROFONDEUR : alternance de fonds entre sections
     ============================================================ */
  .simulator{ max-width:none; padding-left:6vw; padding-right:6vw; }
  .simulator .head, .simulator .sim-wrap{ max-width:1300px; margin-left:auto; margin-right:auto; }
  .clients{ max-width:none; }
  .reviews{ max-width:none; padding-left:6vw; padding-right:6vw; }
  .reviews .head, .reviews .review-carousel, .reviews .review-dots{ max-width:1100px; margin-left:auto; margin-right:auto; }
  .zone{ max-width:none; }
  .zone .zone-wrap{ max-width:1200px; margin:0 auto; }
  .devis{ max-width:none; padding-left:6vw; padding-right:6vw; }
  .devis .head, .devis .form-grid{ max-width:900px; margin-left:auto; margin-right:auto; }

  /* ============================================================
     FAQ
     ============================================================ */
  .faq{ padding:6rem 6vw; }
  .faq-wrap{ max-width:860px; margin:0 auto; }
  .faq .head{ text-align:center; margin-bottom:2.8rem; }
  .faq h2{ font-size:clamp(1.95rem,3vw,2.55rem); margin-top:0.6rem; }
  .faq-item{
    border-bottom:1px solid var(--line);
  }
  .faq-q{
    width:100%; background:none; border:none; cursor:pointer;
    display:flex; align-items:center; justify-content:space-between; gap:1.4rem;
    padding:1.5rem 0; text-align:left;
    font-family:'Fraunces', serif; font-size:1.08rem; font-weight:600; color:var(--ink);
    transition:color .2s;
  }
  .faq-q:hover{ color:var(--ocre); }
  .faq-q .plus{
    flex-shrink:0; width:26px; height:26px; position:relative;
  }
  .faq-q .plus::before, .faq-q .plus::after{
    content:''; position:absolute; top:50%; left:50%;
    background:var(--ocre); transform:translate(-50%,-50%);
    transition:transform .3s cubic-bezier(.4,0,.2,1);
  }
  .faq-q .plus::before{ width:14px; height:2px; }
  .faq-q .plus::after{ width:2px; height:14px; }
  .faq-item.open .plus::after{ transform:translate(-50%,-50%) rotate(90deg); opacity:0; }
  .faq-a{
    max-height:0; overflow:hidden;
    transition:max-height .4s cubic-bezier(.4,0,.2,1);
  }
  .faq-a p{
    font-size:0.94rem; color:var(--ink-soft); line-height:1.7;
    padding:0 0 1.5rem; max-width:66ch;
  }

  /* ============================================================
     APPEL FINAL
     ============================================================ */
  .final-cta{
    position:relative; overflow:hidden;
    padding:9rem 6vw 7rem;
    text-align:center;
  }
  .final-cta::before{
    content:''; position:absolute; inset:0;
    background:
      radial-gradient(ellipse 60% 70% at 20% 30%, rgba(62,124,177,0.16), transparent 60%),
      radial-gradient(ellipse 55% 65% at 80% 60%, rgba(232,162,61,0.14), transparent 60%);
    pointer-events:none;
  }
  .final-inner{ position:relative; z-index:2; max-width:820px; margin:0 auto; }
  .final-cta h2{
    font-size:clamp(2rem, 5vw, 3.4rem); line-height:1.05;
    margin:1rem 0 1.2rem; letter-spacing:-0.02em;
  }
  .final-cta p{ color:var(--ink-soft); font-size:1.02rem; margin-bottom:2.2rem; }
  .final-actions{ display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; }

  @media(max-width:700px){
    .hero{ padding:5rem 6vw 8rem; }
    .hero .btnrow{ margin-bottom:1.8rem; }
    .hero .trust span{ font-size:0.62rem; padding:0.38rem 0.75rem; }
    .scroll-hint{ bottom:1.5rem; }
    .scroll-hint .sh-line{ height:34px; }
  }

  @media (prefers-reduced-motion: reduce){
    .hero-title .line-in{ transform:none; transition:none; }
    .hero-title .accent{ animation:none; background-position:0 0; }
    .hero-inner{ opacity:1; transition:none; }
    .reveal-up{ opacity:1; transform:none; }
    .scroll-hint{ opacity:1; animation:none; }
    .scroll-hint .sh-line::after{ animation:none; }
  }


  /* ============================================================
     V8 — PALETTE DE FONDS : plus que du noir
     ============================================================ */
  :root{
    --bg-blue:#141E27;      /* bleu nuit — sections "technique" */
    --bg-warm:#231A13;      /* brun chaud — sections "matière" */
    --bg-deep:#0F0D0B;      /* presque noir — respiration */
    --bg-sage:#1A211B;      /* vert sourd — sections "confiance" */
  }

  /* chaque section a son ambiance, avec un léger halo coloré */
  .sec{ position:relative; }
  .sec::before{
    content:''; position:absolute; inset:0; pointer-events:none; z-index:0;
    /* le halo ne touche jamais les bords : sinon la couleur au raccord
       ne correspond plus a celle du separateur, et la jonction se voit */
    -webkit-mask-image:linear-gradient(180deg, transparent 0%, #000 16%, #000 84%, transparent 100%);
            mask-image:linear-gradient(180deg, transparent 0%, #000 16%, #000 84%, transparent 100%);
  }
  /* on remonte les enfants au-dessus du halo, SANS toucher a leur positionnement
     (position:relative ecrasait le sticky de la pile de cartes) */
  .sec > *{ z-index:1; }
  .sec > div:not(.process-sticky):not(.drip-band){ position:relative; }
  .process-sticky{ z-index:1; }

  .bg-deep{ background:var(--bg-deep); }
  .bg-blue{ background:var(--bg-blue); }
  .bg-warm{ background:var(--bg-warm); }
  .bg-sage{ background:var(--bg-sage); }

  .bg-blue::before{
    background:radial-gradient(ellipse 70% 60% at 15% 20%, rgba(62,124,177,0.14), transparent 65%),
               radial-gradient(ellipse 60% 50% at 85% 80%, rgba(91,155,213,0.09), transparent 65%);
  }
  .bg-warm::before{
    background:radial-gradient(ellipse 65% 60% at 80% 25%, rgba(232,162,61,0.13), transparent 62%),
               radial-gradient(ellipse 55% 50% at 12% 78%, rgba(214,136,94,0.08), transparent 65%);
  }
  .bg-sage::before{
    background:radial-gradient(ellipse 60% 55% at 25% 75%, rgba(127,162,91,0.12), transparent 62%),
               radial-gradient(ellipse 50% 45% at 78% 22%, rgba(154,182,124,0.07), transparent 65%);
  }
  .bg-deep::before{
    background:radial-gradient(ellipse 80% 60% at 50% 0%, rgba(232,162,61,0.05), transparent 60%);
  }

  /* ============================================================
     SÉPARATEURS ORGANIQUES — plus de lignes droites
     ============================================================ */
  .divider{
    position:relative; width:100%; line-height:0;
    margin:0; overflow:hidden;
    z-index:2;
  }
  .divider svg{ width:100%; height:auto; display:block; }
  .divider.flip svg{ transform:scaleY(-1); }

  /* trait de pinceau qui sépare deux ambiances */
  .divider-brush{ height:90px; }
  .divider-brush svg{ height:90px; width:100%; }

  /* ============================================================
     GOUTTES DE PEINTURE — coulures organiques
     ============================================================ */
  .drip-band{
    position:absolute; top:-2px; left:0; right:0; height:420px;
    pointer-events:none; overflow:hidden; z-index:0;
  }
  .drip-band svg{ width:100%; height:100%; display:block; }

  /* la coulure se "dessine" vers le bas : bout arrondi naturel,
     largeur variable, et trajectoire legerement sinueuse */
  .drip-band .run{
    fill:none; stroke-linecap:round;
    stroke-dasharray:var(--len);
    stroke-dashoffset:var(--len);
    animation:runGrow var(--d) cubic-bezier(.45,.05,.35,1) infinite;
    animation-delay:var(--dl);
    opacity:0.9;
  }
  @keyframes runGrow{
    0%{ stroke-dashoffset:var(--len); }
    34%{ stroke-dashoffset:0; }
    76%{ stroke-dashoffset:0; opacity:0.9; }
    92%{ stroke-dashoffset:0; opacity:0; }
    100%{ stroke-dashoffset:var(--len); opacity:0; }
  }

  /* la perle qui se detache du bout et tombe en accelerant */
  .drip-band .bead{
    opacity:0;
    animation:beadFall var(--d) cubic-bezier(.55,0,.85,.6) infinite;
    animation-delay:var(--dl);
  }
  @keyframes beadFall{
    0%, 30%{ opacity:0; transform:translateY(0) scaleY(1); }
    36%{ opacity:1; transform:translateY(0) scaleY(1); }
    52%{ opacity:1; transform:translateY(calc(var(--fall) * 0.35)) scaleY(1.25); }
    74%{ opacity:0.9; transform:translateY(var(--fall)) scaleY(1.5); }
    82%, 100%{ opacity:0; transform:translateY(var(--fall)) scaleY(1.5); }
  }

  @media (prefers-reduced-motion: reduce){
    .drip-band .run{ animation:none; stroke-dashoffset:0; }
    .drip-band .bead{ display:none; }
  }

  /* ============================================================
     ENGAGEMENTS — nouvelle section
     ============================================================ */
  .engagements{ padding:6rem 6vw; }
  .eng-wrap{ max-width:1200px; margin:0 auto; }
  .engagements .head{ text-align:center; margin-bottom:3rem; }
  .engagements h2{ font-size:clamp(1.95rem,3vw,2.55rem); margin-top:0.6rem; }
  .eng-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:1.4rem; }
  .eng{
    background:rgba(243,239,230,0.03);
    border:1px solid var(--line); border-radius:10px;
    padding:2rem 1.7rem;
    backdrop-filter:blur(2px);
    transition:transform .3s ease, border-color .3s ease, background .3s ease;
  }
  .eng:hover{ transform:translateY(-5px); border-color:rgba(243,239,230,0.18); background:rgba(243,239,230,0.05); }
  .eng .ico{
    width:46px; height:46px; border-radius:12px; margin-bottom:1.1rem;
    display:flex; align-items:center; justify-content:center; font-size:1.25rem;
    background:var(--accent, var(--ocre)); color:#15120F;
  }
  .eng h3{ font-size:1.1rem; margin-bottom:0.5rem; }
  .eng p{ font-size:0.89rem; color:var(--ink-soft); line-height:1.6; }

  /* ============================================================
     L'ARTISAN — section présentation
     ============================================================ */
  .artisan{ padding:6rem 6vw; }
  .art-wrap{
    max-width:1150px; margin:0 auto;
    display:grid; grid-template-columns:0.85fr 1.15fr; gap:3.5rem; align-items:center;
  }
  @media(max-width:860px){ .art-wrap{ grid-template-columns:1fr; gap:2.4rem; } }
  .art-visual{
    position:relative; aspect-ratio:4/5; border-radius:14px; overflow:hidden;
    border:1px solid var(--line);
    box-shadow:0 24px 60px rgba(0,0,0,0.5);
  }
  .art-visual svg, .art-visual img{ width:100%; height:100%; display:block; object-fit:cover; }
  .art-badge{
    position:absolute; bottom:16px; left:16px; right:16px;
    background:rgba(15,13,11,0.86); backdrop-filter:blur(6px);
    border:1px solid var(--line); border-radius:8px;
    padding:0.85rem 1rem;
  }
  .art-badge b{ display:block; font-family:'Fraunces',serif; font-size:1rem; color:var(--ink); }
  .art-badge span{ font-family:'JetBrains Mono',monospace; font-size:0.64rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--ocre); }
  .art-text h2{ font-size:clamp(2.05rem,3.4vw,2.85rem); line-height:1.1; margin:0.8rem 0 1.3rem; }
  .art-text p{ color:var(--ink-soft); font-size:1rem; line-height:1.75; margin-bottom:1.1rem; }
  .art-sign{
    margin-top:1.8rem; padding-top:1.4rem; border-top:1px solid var(--line);
    display:flex; align-items:center; gap:1rem; flex-wrap:wrap;
  }
  .art-sign .name{ font-family:'Fraunces',serif; font-size:1.05rem; color:var(--ink); }
  .art-sign .role{ font-family:'JetBrains Mono',monospace; font-size:0.66rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--ink-soft); }

  /* ============================================================
     MARQUES PARTENAIRES
     ============================================================ */
  .brands{ padding:4.5rem 6vw; }
  .brands-inner{ max-width:1100px; margin:0 auto; text-align:center; }
  .brands .eyebrow{ display:block; margin-bottom:1.8rem; }
  .brand-row{ display:flex; justify-content:center; align-items:center; gap:2.6rem; flex-wrap:wrap; }
  .brand{
    font-family:'Inter',sans-serif; font-weight:700; font-size:1.05rem;
    letter-spacing:0.06em; color:var(--ink-soft); opacity:0.55;
    border:1px solid var(--line); border-radius:6px; padding:0.7rem 1.3rem;
    transition:opacity .25s, border-color .25s, color .25s;
  }
  .brand:hover{ opacity:1; border-color:var(--ocre); color:var(--ink); }


  /* ============================================================
     V9 — LUMIÈRE MOUVANTE (1 section sur 3)
     ============================================================ */
  .lumiere{ position:relative; }
  .lumiere .halo{
    position:absolute; inset:0; pointer-events:none; z-index:0; overflow:hidden;
    -webkit-mask-image:linear-gradient(180deg, transparent 0%, #000 14%, #000 86%, transparent 100%);
            mask-image:linear-gradient(180deg, transparent 0%, #000 14%, #000 86%, transparent 100%);
  }
  .lumiere .halo i{
    position:absolute; display:block; border-radius:50%;
    filter:blur(65px); opacity:0.9;
    will-change:transform;
  }
  .lumiere .halo i:nth-child(1){
    width:52vw; height:52vw; top:-18%; left:-12%;
    background:radial-gradient(circle, var(--l1, #E8A23D), transparent 66%);
    animation:derive1 11s ease-in-out infinite alternate;
  }
  .lumiere .halo i:nth-child(2){
    width:46vw; height:46vw; bottom:-22%; right:-10%;
    background:radial-gradient(circle, var(--l2, #5B9BD5), transparent 66%);
    animation:derive2 14s ease-in-out infinite alternate;
  }
  .lumiere .halo i:nth-child(3){
    width:40vw; height:40vw; top:30%; left:38%;
    background:radial-gradient(circle, var(--l3, #7FA25B), transparent 66%);
    animation:derive3 17s ease-in-out infinite alternate;
  }
  /* amplitudes larges : le mouvement doit se voir sans avoir a le chercher */
  @keyframes derive1{
    0%{ transform:translate3d(0,0,0) scale(1); }
    100%{ transform:translate3d(38vw, 26vh, 0) scale(1.5); }
  }
  @keyframes derive2{
    0%{ transform:translate3d(0,0,0) scale(1.15); }
    100%{ transform:translate3d(-36vw, -24vh, 0) scale(0.72); }
  }
  @keyframes derive3{
    0%{ transform:translate3d(0,0,0) scale(0.82); }
    100%{ transform:translate3d(-30vw, 22vh, 0) scale(1.4); }
  }
  @media (prefers-reduced-motion: reduce){
    .lumiere .halo i{ animation:none; }
  }

  /* ============================================================
     CARTES PRESTATIONS — survol : agrandissement + tracé du contour
     ============================================================ */
  .grid{ perspective:1000px; }
  .card{
    transition:transform .45s cubic-bezier(.2,.8,.3,1), opacity .45s ease, filter .45s ease;
  }
  /* les voisines s'écartent et s'estompent */
  .grid.survol .card{ opacity:0.45; filter:saturate(0.6); transform:scale(0.94); }
  .grid.survol .card.actif{
    opacity:1; filter:none; transform:scale(1.09);
    z-index:5;
  }
  .grid.survol .card.gauche{ transform:scale(0.94) translateX(-14px); }
  .grid.survol .card.droite{ transform:scale(0.94) translateX(14px); }

  /* le trait du haut se déroule autour du cadre en 0,4 s */
  .card{ position:relative; }
  .card .contour{
    position:absolute; inset:0; width:100%; height:100%;
    pointer-events:none; z-index:3; overflow:visible;
  }
  .card .contour rect{
    fill:none;
    stroke:var(--accent, var(--ocre));
    stroke-width:3;
    rx:10;
    /* le trait part de la ligne du haut et fait le tour */
    stroke-dasharray:var(--perim, 1000);
    stroke-dashoffset:var(--perim, 1000);
    transition:stroke-dashoffset .4s cubic-bezier(.4,0,.2,1);
  }
  .card.actif .contour rect{ stroke-dashoffset:0; }
  /* la barre du haut s'efface quand le contour prend le relais */
  .card::before{ transition:opacity .25s ease; }
  .card.actif::before{ opacity:0; }

  /* ============================================================
     ILS NOUS FONT CONFIANCE — cartouches pour vrais logos
     ============================================================ */
  .client-row{ gap:1.2rem; }
  .client-logo{
    position:relative; overflow:hidden;
    display:flex; align-items:center; justify-content:center;
    min-width:300px; height:170px; padding:0 2.4rem;
    background:rgba(243,239,230,0.04);
    border:1px solid var(--line); border-radius:10px;
    font-size:1.25rem; opacity:1; color:var(--ink-soft);
    transition:transform .35s cubic-bezier(.2,.8,.3,1), border-color .35s ease, background .35s ease, color .35s ease;
  }
  /* balayage lumineux au survol */
  .client-logo::after{
    content:''; position:absolute; top:0; bottom:0; width:55%;
    left:-70%;
    background:linear-gradient(100deg, transparent, rgba(255,255,255,0.14), transparent);
    transition:left .65s cubic-bezier(.3,.7,.3,1);
  }
  .client-logo:hover{
    transform:translateY(-6px);
    border-color:var(--ocre);
    background:rgba(232,162,61,0.07);
    color:var(--ink);
  }
  .client-logo:hover::after{ left:120%; }
  .client-logo img{
    max-height:120px; max-width:100%; width:auto; height:auto;
    border-radius:6px; display:block;
  }

  /* ============================================================
     PEINTURES APPLIQUÉES — cartouches clairs, texte noir
     ============================================================ */
  .brands{ padding:5.5rem 6vw; }
  .brand-row{ gap:1.1rem; }
  .brand{
    position:relative; overflow:hidden;
    display:flex; align-items:center; justify-content:center;
    min-width:210px; height:100px; padding:0 1.9rem;
    background:#F3EFE6;
    border:1px solid rgba(0,0,0,0.12); border-radius:8px;
    color:#1A1713; opacity:1;
    font-weight:800; font-size:1.3rem; letter-spacing:0.08em;
    box-shadow:0 6px 20px rgba(0,0,0,0.28);
    transition:transform .35s cubic-bezier(.2,.8,.3,1), box-shadow .35s ease, background .35s ease;
  }
  .brand::after{
    content:''; position:absolute; top:0; bottom:0; width:45%;
    left:-60%;
    background:linear-gradient(100deg, transparent, rgba(255,255,255,0.85), transparent);
    transition:left .6s cubic-bezier(.3,.7,.3,1);
  }
  .brand:hover{
    transform:translateY(-7px) rotate(-1.2deg);
    background:#FFFFFF;
    box-shadow:0 16px 34px rgba(0,0,0,0.4);
    border-color:var(--ocre);
    color:#1A1713;
  }
  .brand:hover::after{ left:130%; }

  @media(max-width:600px){
    .client-logo{ min-width:220px; height:120px; font-size:1.1rem; }
    .client-logo img{ max-height:88px; }
    .brand{ min-width:158px; height:80px; font-size:1.05rem; }
  }

  /* ============================================================
     PAGES INTÉRIEURES — bandeau d'en-tête (prestations, réalisations)
     ============================================================ */
  .page-hero{
    padding:4.5rem 6vw 3.5rem;
    max-width:900px; margin:0 auto;
    text-align:center;
  }
  .page-hero .crumb{
    display:flex; width:fit-content; align-items:center; gap:0.45rem;
    font-family:'JetBrains Mono', monospace; font-size:0.7rem;
    letter-spacing:0.1em; text-transform:uppercase; color:var(--ink-soft);
    text-decoration:none; margin:0 auto 1.6rem;
    border:1px solid var(--line); padding:0.5rem 1rem; border-radius:99px;
    transition:border-color .2s ease, color .2s ease;
  }
  .page-hero .crumb:hover{ border-color:var(--ocre); color:var(--ink); }

  /* fil des pages : onglets qui se suivent — d'où l'on vient, où l'on est, où l'on va */
  .trail{
    display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
    gap:0.4rem; width:fit-content; margin:0 auto 1.6rem;
  }
  .trail-tab{
    display:inline-flex; align-items:center; gap:0.5rem;
    font-family:'JetBrains Mono', monospace; font-size:0.7rem;
    letter-spacing:0.1em; text-transform:uppercase;
    text-decoration:none; white-space:nowrap;
    padding:0.5rem 1.05rem; border-radius:99px;
    border:1px solid rgba(232,162,61,0.35); color:var(--ocre);
    background:rgba(232,162,61,0.06);
    transition:border-color .2s ease, background .2s ease, color .2s ease, transform .2s ease;
  }
  .trail-tab:hover{ border-color:rgba(232,162,61,0.75); background:rgba(232,162,61,0.13); transform:translateY(-1px); }
  .trail-tab .dot{ width:5px; height:5px; border-radius:50%; background:currentColor; box-shadow:0 0 8px currentColor; flex:none; }
  .trail-tab.is-current{
    color:#FFE9BF; border-color:var(--ocre); background:rgba(232,162,61,0.18);
    font-weight:600; box-shadow:0 0 0 1px rgba(232,162,61,0.2), 0 8px 22px rgba(232,162,61,0.16);
  }
  .trail-tab.is-next{
    border-style:dashed; border-color:var(--line); color:var(--ink-soft);
    background:transparent; opacity:0.8;
  }
  .trail-tab.is-next:hover{ opacity:1; border-color:rgba(232,162,61,0.55); color:var(--ocre); background:rgba(232,162,61,0.06); }
  .trail-step{ display:inline-flex; align-items:center; gap:0.4rem; }
  .trail-sep{ color:rgba(232,162,61,0.4); font-size:0.8rem; }
  .trail-step:has(.trail-tab.is-next) .trail-sep{ color:var(--line); }

  .page-hero h1{ font-size:clamp(2.45rem, 5.5vw, 3.65rem); line-height:1.06; margin:0.7rem 0 1.2rem; }
  .page-hero p{ color:var(--ink-soft); font-size:1.05rem; line-height:1.7; max-width:60ch; margin:0 auto; }

  /* lien "voir tout" sous un titre de section, sur la page d'accueil */
  .see-more{
    display:inline-flex; align-items:center; gap:0.4rem;
    margin-top:1rem; font-family:'JetBrains Mono', monospace; font-size:0.74rem;
    letter-spacing:0.06em; text-transform:uppercase; color:var(--ocre);
    text-decoration:none; border-bottom:1px solid transparent; transition:border-color .2s;
  }
  .see-more:hover{ border-color:var(--ocre); }
  .see-more .arrow{ transition:transform .2s ease; display:inline-block; }
  .see-more:hover .arrow{ transform:translateX(3px); }

  /* ============================================================
     FICHES PRESTATIONS — bloc alterné visuel / texte
     ============================================================ */
  .service{ padding:5.5rem 6vw; }
  .service-wrap{
    max-width:1150px; margin:0 auto;
    display:grid; grid-template-columns:0.9fr 1.1fr; gap:3.5rem; align-items:center;
  }
  .service.rev .service-wrap{ direction:rtl; }
  .service.rev .service-wrap > *{ direction:ltr; }
  @media(max-width:860px){
    .service-wrap{ grid-template-columns:1fr; gap:2.2rem; }
    .service.rev .service-wrap{ direction:ltr; }
  }
  .service-visual{
    position:relative; aspect-ratio:4/3.1; border-radius:14px; overflow:hidden;
    border:1px solid var(--line); box-shadow:0 20px 50px rgba(0,0,0,0.4);
  }
  .service-visual svg{ width:100%; height:100%; display:block; }
  .service-num{
    font-family:'JetBrains Mono', monospace; font-size:0.74rem; letter-spacing:0.12em;
    text-transform:uppercase; color:var(--accent, var(--ocre)); font-weight:600;
    display:block; margin-bottom:0.6rem;
  }
  .service-text h2{ font-size:clamp(1.85rem,3vw,2.45rem); line-height:1.12; margin-bottom:1rem; }
  .service-text p{ color:var(--ink-soft); font-size:0.98rem; line-height:1.72; margin-bottom:1rem; }
  .service-list{ list-style:none; display:flex; flex-direction:column; gap:0.6rem; margin:1.3rem 0 1.7rem; }
  .service-list li{ position:relative; padding-left:1.6rem; font-size:0.92rem; color:var(--ink-soft); line-height:1.6; }
  .service-list li::before{
    content:'✓'; position:absolute; left:0; top:0;
    color:var(--accent, var(--ocre)); font-weight:700;
  }

  /* ============================================================
     RÉALISATIONS — bandeau catégorie au-dessus de la galerie
     ============================================================ */
  .gallery-lead{ max-width:1300px; margin:0 auto 1rem; text-align:center; }
  .gallery-lead p{ color:var(--ink-soft); font-size:0.95rem; max-width:60ch; margin:0.8rem auto 0; }

  /* ============================================================
     PAGE DEVIS — fond vivant fixe + entrée en scène
     ============================================================ */

  /* le hero et le formulaire laissent voir le fond fixe derriere eux */
  #devisHero, #devis{ background:transparent; }

  .devis-bg{
    position:fixed; inset:0; z-index:0; overflow:hidden;
    pointer-events:none;
    background:linear-gradient(160deg, #171310 0%, #100D0B 45%, #141E27 100%);
  }
  .devis-aurora{ position:absolute; inset:0; }
  .devis-aurora i{
    position:absolute; border-radius:50%; filter:blur(90px);
    mix-blend-mode:screen; opacity:0.4; will-change:transform;
  }
  .devis-aurora i:nth-child(1){
    width:48vw; height:48vw; top:-16%; left:-10%;
    background:radial-gradient(circle, #E8A23D, transparent 68%);
    animation:devisDrift1 9s ease-in-out infinite alternate;
  }
  .devis-aurora i:nth-child(2){
    width:40vw; height:40vw; top:26%; right:-12%;
    background:radial-gradient(circle, #3E7CB1, transparent 68%);
    animation:devisDrift2 10.5s ease-in-out infinite alternate;
  }
  .devis-aurora i:nth-child(3){
    width:38vw; height:38vw; bottom:-12%; left:14%;
    background:radial-gradient(circle, #7FA25B, transparent 68%);
    animation:devisDrift3 11.5s ease-in-out infinite alternate;
  }
  .devis-aurora i:nth-child(4){
    width:28vw; height:28vw; bottom:14%; right:12%;
    background:radial-gradient(circle, #D6885E, transparent 68%);
    animation:devisDrift2 8s ease-in-out infinite alternate-reverse;
  }
  .devis-aurora i:nth-child(5){
    width:24vw; height:24vw; top:42%; left:38%;
    background:radial-gradient(circle, #5B9BD5, transparent 68%);
    animation:devisDrift1 7.5s ease-in-out infinite alternate-reverse;
  }
  .devis-aurora i:nth-child(6){
    width:30vw; height:30vw; top:6%; right:26%;
    background:radial-gradient(circle, #B0876B, transparent 68%);
    animation:devisDrift3 9.5s ease-in-out infinite alternate;
  }
  @keyframes devisDrift1{ to{ transform:translate3d(9vw,11vh,0) scale(1.25); } }
  @keyframes devisDrift2{ to{ transform:translate3d(-10vw,-9vh,0) scale(0.8); } }
  @keyframes devisDrift3{ to{ transform:translate3d(-7vw,12vh,0) scale(1.2); } }

  @media (prefers-reduced-motion: reduce){
    .devis-aurora i{ animation:none; }
  }

  /* ------------------------------------------------------------
     titre "peint" : un rouleau lumineux balaie le texte et le revele
     ------------------------------------------------------------ */
  .paint-title{ position:relative; display:inline-block; }
  .paint-clip{
    display:inline-block;
    clip-path:inset(0 100% 0 0);
  }
  .paint-title::after{
    content:''; position:absolute; top:6%; bottom:6%; left:0; width:10px;
    background:linear-gradient(180deg,#FFE9BF,#E8A23D 55%,#C9852E);
    border-radius:8px; box-shadow:0 0 20px 5px rgba(232,162,61,0.55);
    opacity:0; pointer-events:none;
  }
  .paint-title.painted .paint-clip{
    animation:paintReveal 1.3s cubic-bezier(.65,0,.18,1) forwards;
  }
  .paint-title.painted::after{
    animation:rollerMove 1.3s cubic-bezier(.65,0,.18,1) forwards;
  }
  @keyframes paintReveal{ to{ clip-path:inset(0 0% 0 0); } }
  @keyframes rollerMove{
    0%{ left:0; opacity:1; }
    94%{ opacity:1; }
    100%{ left:100%; opacity:0; }
  }
  @media (prefers-reduced-motion: reduce){
    .paint-clip{ clip-path:none; }
    .paint-title::after{ display:none; }
  }

  /* ------------------------------------------------------------
     formulaire : les champs entrent en cascade, calés sur le titre
     ------------------------------------------------------------ */
  .devis .form-grid .field,
  .devis .form-grid .form-submit,
  .devis .form-grid .form-note{
    opacity:0; transform:translateY(16px);
    transition:opacity .7s ease, transform .7s cubic-bezier(.16,.8,.24,1);
  }
  .devis .form-grid.in .field:nth-child(1){ transition-delay:.05s; }
  .devis .form-grid.in .field:nth-child(2){ transition-delay:.12s; }
  .devis .form-grid.in .field:nth-child(3){ transition-delay:.19s; }
  .devis .form-grid.in .field:nth-child(4){ transition-delay:.26s; }
  .devis .form-grid.in .field:nth-child(5){ transition-delay:.33s; }
  .devis .form-grid.in .form-submit{ transition-delay:.4s; }
  .devis .form-grid.in .form-note{ transition-delay:.46s; }
  .devis .form-grid.in .field,
  .devis .form-grid.in .form-submit,
  .devis .form-grid.in .form-note{ opacity:1; transform:translateY(0); }
  @media (prefers-reduced-motion: reduce){
    .devis .form-grid .field,
    .devis .form-grid .form-submit,
    .devis .form-grid .form-note{ opacity:1; transform:none; transition:none; }
  }

  /* ============================================================
     TÉLÉPHONE — allègement des effets décoratifs permanents
     ============================================================
     Constat du 6 août 2026 : le site « buguait énormément » sur téléphone,
     alors qu'il tourne à 165 images/seconde sur poste fixe et que le serveur
     répond en 40 ms. Ce n'était donc ni le réseau ni une page en particulier —
     tout ce qui suit vit dans style.css, donc sur TOUTES les pages.

     Trois coûts GPU permanents s'additionnaient, en boucle infinie, visibles
     ou non :

       1. .lumiere .halo i — trois disques en filter:blur(65px), animés sans
          fin (11s, 14s, 17s) avec un scale montant à 1.5. Un flou gaussien de
          65 px recalculé à chaque image, trois fois, indéfiniment.
       2. .grain — un calque fixe plein écran en mix-blend-mode:overlay. Il
          force la composition de TOUTE la page à travers un mode de fusion,
          à chaque image.
       3. nav — backdrop-filter:blur(10px) sur un en-tête fixe : le fond est
          donc refloué à chaque image de défilement.

     Un GPU de bureau encaisse les trois sans broncher, ce qui explique qu'on
     ne voie rien en développement. Un téléphone redessine en continu de
     grandes surfaces floutées : l'interface saccade et la batterie chauffe.

     Le parti pris ici : garder l'IDENTITÉ, supprimer le RECALCUL. Les halos
     colorés restent en place, l'en-tête reste sombre, rien ne disparaît de la
     mise en page. Ce qui s'arrête, c'est ce qui se recalculait soixante fois
     par seconde pour un résultat quasi immobile. Au-dessus de 900 px, le rendu
     d'origine est strictement intact.

     Le seuil de 900 px est celui déjà retenu pour le fond fixe de
     .fiche-teintee (densite-v10.css) : une seule frontière pour « petit
     écran » sur tout le projet. */
  @media (max-width: 900px){

    /* Le dégradé radial est déjà doux par construction — il s'éteint à 66 %.
       Le flou ne faisait que l'adoucir davantage, pour un coût sans commune
       mesure. Sans lui ni l'animation, le halo reste un voile de couleur au
       même endroit, et ne coûte plus rien. */
    .lumiere .halo i{
      filter:none;
      opacity:0.55;
      will-change:auto;
    }
    /* L'animation doit être annulée sur les MÊMES sélecteurs que ceux qui la
       posent. « .lumiere .halo i » seul ne suffit pas : les trois règles
       d'origine sont en :nth-child, donc plus spécifiques, et gagnaient malgré
       la media query — le flou partait, le mouvement restait. Vérifié en ligne
       le 6 août 2026 : animationName valait encore « derive1 ». */
    .lumiere .halo i:nth-child(1),
    .lumiere .halo i:nth-child(2),
    .lumiere .halo i:nth-child(3){
      animation:none;
      transform:none;
    }

    /* À 4,5 % d'opacité, le grain est imperceptible sur un écran de téléphone.
       Il coûtait une fusion plein écran par image. */
    .grain{ display:none; }

    /* Le fond était déjà opaque à 75 % : le rendre plein supprime le
       refloutage permanent sans différence visible à l'œil. */
    nav{
      background:rgb(21,18,15);
      -webkit-backdrop-filter:none;
              backdrop-filter:none;
    }
  }