: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-padding-top:80px; }
  @media (prefers-reduced-motion: no-preference){
    html{ scroll-behavior:smooth; }
  }
  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);
  }
  /* Appel direct de l'en-tête : réservé au téléphone, où il remplace deux
     touches (bouton flottant, puis « Appeler ») par une seule. */
  .navtel{
    display:none; flex:none; align-items:center; justify-content:center;
    width:44px; height:44px; border:1px solid var(--line); border-radius:4px;
    color:var(--ocre); text-decoration:none;
  }
  .navtel svg{ width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
  @media(max-width:800px){ .navlinks{display:none;} .navtel{display:flex;} }
  /* Quatre éléments dans l'en-tête mobile (logo, devis, appel, menu) : marges
     latérales et bouton de devis resserrés, puis le pinceau du logo retiré
     sur les plus petits écrans, pour que rien ne se touche ni ne déborde. */
  @media(max-width:800px){ nav{ padding:0 4vw; } }
  @media(max-width:420px){ .navcta{ padding:0.6rem 0.85rem; } }
  @media(max-width:374px){ nav .logo-img .logo-brush{ display:none; } }
  @media(max-width:340px){ .navcta{ padding:0.6rem 0.6rem; } }

  /* 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.75rem; 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; } }
  /* Sept prestations sur trois colonnes : la septième, seule sur sa ligne, se place au milieu. */
  @media(min-width:901px){ .prestations .grid > .card:last-child:nth-child(3n+1){ grid-column:2; } }
  .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.75rem;
    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.75rem; 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; }

  /* 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.75rem; 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.75rem; 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.75rem;
    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.75rem; 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.75rem; 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; }
  /* L'en-tête partagé pose le rideau, le grain, les curseurs et le lien
     d'évitement entre le bandeau et la barre : seul le frère général « ~ »
     l'atteint à coup sûr. */
  .apercu-bandeau ~ nav{ top:auto; position:relative; }
  .apercu-bandeau ~ .nav-spacer{ display:none; }

  /* 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.8rem; 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;
  }
  /* le contour de focus global (« :focus-visible », plus bas) reste actif : le
     liseré ocre d'un pixel ne suffit pas à repérer le champ au clavier */
  .field input:focus, .field select:focus, .field textarea:focus{
    border-color:var(--ocre);
  }
  .field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible{
    outline:2px solid var(--ocre); outline-offset:2px; border-radius:4px;
  }
  .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; }
  /* le numéro est un lien à toucher du doigt : taille de texte normale, zone d'au moins 44 px */
  .form-note a{
    display:inline-block; padding:0.8rem 0.4rem; font-size:1rem; font-weight:600;
    color:var(--ocre); text-decoration:none;
  }
  .form-note a:hover{ text-decoration:underline; }
  /* information sur l'usage des données, sous le bouton d'envoi */
  .form-rgpd{ grid-column:1/-1; font-size:0.8rem; line-height:1.55; color:var(--ink-soft); text-align:center; }
  .form-rgpd a{ color:var(--ocre); text-underline-offset:3px; }
  /* « (facultatif) » dans un libellé en capitales espacées : on le garde en minuscules */
  .field-facultatif{ text-transform:none; letter-spacing:0; opacity:0.8; }
  .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.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.75rem; 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.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. */

    /* 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-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:var(--ink-soft); }
  .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.75rem; 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.75rem;
    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);
  }

  /* la fenêtre reçoit le focus à l'ouverture (script.js) : pas de cadre sur tout l'écran */
  .contact-pop:focus, .review-pop:focus{ outline:none; }

  /* Sur telephone, le premier choix est « Appeler » (SMS, WhatsApp et e-mail en dessous). Un PC ne
     passe ni appel ni SMS : le premier choix devient l'e-mail, et « Appeler » passe en icone. */
  .cta-desktop{ display:none; }
  .pop-alt .cta-desktop-inline{ display:none; }
  @media(min-width:801px){
    .cta-mobile{ display:none; }
    .cta-desktop{ display:flex; }
    /* SMS et e-mail : deja proposes ailleurs ou sans objet sur PC, plus besoin de leur icone
       (« .pop-alt a » seul l'emporterait sur « .cta-mobile-inline ») */
    .pop-alt .cta-mobile-inline{ display:none; }
    .pop-alt .cta-desktop-inline{ display:flex; }
  }

  @media (prefers-reduced-motion: reduce){
    .pop-sms::before{ animation:none; }
    .typing-dots span{ animation:none; opacity:0.8; }
    .contact-pop.open, .review-pop.open, .pop-card, .review-pop-card{ animation:none; }
    .bubble.show{ animation:none; opacity:1; transform:none; }
  }

  /* 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; }
  }
  /* La page de devis a l'appel dans son en-tête : le bouton flottant y
     recouvrirait les champs du formulaire. */
  @media(max-width:800px){ .page-devis .call-fab{ display:none; } }
  @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, nav.shrink .navtel{ 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.75rem; gap:1.3rem; }
  nav.compact .navcta{ padding:0.28rem 0.75rem; font-size:0.75rem; }
  nav.compact .burger, nav.compact .navtel{ 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.75rem;
    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.75rem; }
  }

  /* 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 — logo TDH, première visite de l'accueil seulement
     ============================================================
     Masqué par défaut : sans assets/ouverture.js qui le réveille (classe
     « ouverture » sur <html>), il ne s'affiche jamais. Il ne retient ni le
     défilement ni les clics : la page est déjà rendue dessous. */
  #preloader{
    display:none;
    position:fixed; inset:0; z-index:9999;
    background:#15120F;
    flex-direction:column; align-items:center; justify-content:center;
    overflow:hidden;
    pointer-events:none;
  }
  .ouverture #preloader{
    display:flex;
    /* garde-fou, au-delà du plafond de ouverture.js (qui le lève avant, en glissant) : quoi
       qu'il arrive, le rideau finit par disparaître */
    animation:ouvertureCap 0s linear 1.5s forwards;
  }
  @keyframes ouvertureCap{
    to{ visibility:hidden; }
  }
  /* le rideau se lève quand le site est prêt et que le logo a eu son temps d'affichage
     (classe posée par ouverture.js) */
  .ouverture-fin #preloader{
    visibility:hidden;
    transform:translateY(-100%);
    transition:transform .45s cubic-bezier(.6,0,.2,1), visibility 0s linear .45s;
  }

  .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;
  }
  /* le logo se monte vite : le rideau n'attend pas la fin de l'animation */
  .ouverture-logo .intro-letter{
    animation:letterPop .45s cubic-bezier(.22,1.8,.4,1) forwards;
  }
  .ouverture-logo .intro-letter:nth-child(2){ animation-delay:.04s; }
  .ouverture-logo .intro-letter:nth-child(3){ animation-delay:.08s; }
  .ouverture-logo .intro-letter:nth-child(4){ animation-delay:.12s; }
  .ouverture-logo .intro-letter:nth-child(5){ animation-delay:.16s; }
  @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;
  }
  .ouverture-logo .intro-swoosh{
    animation:swooshFadeIn .2s ease .18s forwards;
  }
  .ouverture-logo .intro-swoosh path{
    animation:swooshDraw .35s cubic-bezier(.3,.8,.3,1) .18s 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.75rem;
    letter-spacing:0.22em; text-transform:uppercase; color:#B4AB9C;
  }
  .ouverture-logo .intro-tag{ animation:tagFade .3s ease .3s forwards; }
  @keyframes tagFade{ to{ opacity:1; } }

  @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%;
  }
  /* 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.
     Les entrées sont des animations qui partent d'un état décalé et finissent
     sur l'état de repos : le texte reste lisible même si l'animation ne tourne
     pas, et rien n'attend ni un script ni la vidéo. */
  .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;
    animation:ligneMonte .8s cubic-bezier(.16,.8,.24,1) backwards;
  }
  .hero-title .line:nth-child(2) .line-in{ animation-delay:.06s; }
  @keyframes ligneMonte{
    from{ transform:translateY(105%); }
  }
  .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;
    /* montée du titre, puis balayage lent : la lumière glisse d'une lettre à
       l'autre et marque une pause. Trois passages seulement, puis le titre
       reste posé : un mouvement permanent fatigue et occupe le processeur. */
    animation:
      ligneMonte .8s cubic-bezier(.16,.8,.24,1) backwards,
      accentShine 12s ease-in-out 3 forwards;
  }
  .hero-title .line:nth-child(3) .accent{ animation-delay:.12s, 0s; }
  .hero-title .line:nth-child(4) .accent{ animation-delay:.18s, 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 : une animation qui s'arrête sur
     l'état de repos, donc jamais un contenu laissé invisible */
  .reveal-up{
    animation:monteDoux .55s cubic-bezier(.16,.8,.24,1) backwards;
  }
  .hero-lead.reveal-up{ animation-delay:.06s; }
  .btnrow.reveal-up{ animation-delay:.1s; }
  .trust.reveal-up{ animation-delay:.14s; }
  @keyframes monteDoux{
    from{ opacity:0; transform:translateY(18px); }
  }

  .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;
    animation:hintIn .6s ease .4s backwards;
  }
  @keyframes hintIn{ from{ opacity:0; } }
  .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.75rem;
    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.75rem;
    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{ 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.75rem; 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{ animation:none !important; }
    .hero-title .accent{ background-position:0 0; }
    .reveal-up{ animation:none; }
    .scroll-hint{ 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.75rem; 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.75rem; 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); }
  }
  /* « :nth-child(n) » donne à cette règle le même poids que les trois ci-dessus,
     et elle vient après : sans cela elles l'emportent et les halos dérivent
     malgré le réglage système. */
  @media (prefers-reduced-motion: reduce){
    .lumiere .halo i:nth-child(n){ 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.75rem;
    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.75rem;
    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.75rem;
    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.75rem; 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:nth-child(n){ animation:none; }
  }

  /* ------------------------------------------------------------
     titre "peint" : un rouleau lumineux balaie le texte et le revele.
     L'animation part d'un titre masqué et finit sur le titre entier : sans
     script, ou si l'animation ne tourne pas, le titre reste lisible.
     ------------------------------------------------------------ */
  .paint-title{ position:relative; display:inline-block; }
  .paint-clip{
    display:inline-block;
    animation:paintReveal .9s cubic-bezier(.65,0,.18,1) backwards;
  }
  .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;
    animation:rollerMove .9s cubic-bezier(.65,0,.18,1) backwards;
  }
  @keyframes paintReveal{ from{ clip-path:inset(0 100% 0 0); } }
  @keyframes rollerMove{
    0%{ left:0; opacity:1; }
    94%{ opacity:1; }
    100%{ left:100%; opacity:0; }
  }
  @media (prefers-reduced-motion: reduce){
    .paint-clip{ animation:none; }
    .paint-title::after{ display:none; }
  }

  /* Le formulaire de devis est affiché d'emblée, sans cascade : c'est la page
     où le visiteur est venu pour agir. */

  /* ============================================================
     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.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; }

    /* Fond vivant de la page devis : six disques en flou de 90 px et en
       mélange « screen » qui dérivent sans fin, chacun sur son propre calque.
       Immobiles et sans calque dédié, ils gardent exactement le même aspect et
       le flou n'est calculé qu'une fois. :nth-child comme les règles
       d'origine, qui l'emporteraient sinon. */
    .devis-aurora i:nth-child(n){
      animation:none;
      will-change:auto;
    }

    /* 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;
    }
  }

  /* ============================================================
     ONGLET MASQUÉ — les décors qui dérivent en permanence se figent
     ============================================================
     La classe est posée sur <html> par script.js. « :nth-child(n) » pour
     l'emporter sur les règles de chaque disque. */
  html.onglet-masque .devis-aurora i:nth-child(n),
  html.onglet-masque .lumiere .halo i:nth-child(n),
  html.onglet-masque .mq-halo i:nth-child(n),
  html.onglet-masque .p26-aurora i:nth-child(n){ animation-play-state:paused; }

  /* ============================================================
     CARTE CHARGÉE AU CLIC — rien n'est demandé à Google avant
     ============================================================
     Le lien est le repli sans JavaScript : script.js le remplace alors par la
     carte elle-même (voir « CARTE CHARGÉE AU CLIC »). */
  .carte-differee{
    position:relative; width:100%; height:100%; min-height:280px;
    display:flex; align-items:center; justify-content:center;
    background:linear-gradient(160deg, var(--card), var(--bg-2));
    border:1px solid var(--line); border-radius:8px; overflow:hidden;
  }
  .carte-differee > a{
    display:inline-flex; align-items:center; gap:0.6rem;
    background:var(--ocre); color:#1a1410; text-decoration:none;
    font-weight:700; font-size:0.95rem; padding:0.9rem 1.6rem; border-radius:3px;
    box-shadow:0 0 30px rgba(232,162,61,0.3);
  }
  .carte-differee iframe{
    position:absolute; inset:0; width:100%; height:100%; border:0; display:block;
    filter:grayscale(0.15) contrast(1.05);
  }

  /* Aperçu de la carte : une image du site (fond OpenStreetMap), affichée d'office. Tout le cadre est le
     lien : un clic charge la carte interactive à sa place. Sans JavaScript, il ouvre Google Maps. */
  .carte-differee > .carte-apercu{
    position:absolute; inset:0; display:block; padding:0; border-radius:0;
    background:none; box-shadow:none; font-weight:400;
  }
  .carte-apercu picture, .carte-apercu img{ display:block; width:100%; height:100%; }
  .carte-apercu img{ object-fit:cover; filter:grayscale(0.15) contrast(1.05); }
  .carte-ouvrir{
    position:absolute; left:50%; bottom:2.6rem; transform:translateX(-50%);
    display:inline-flex; align-items:center; white-space:nowrap;
    background:var(--ocre); color:#1a1410; font-weight:700; font-size:0.95rem;
    padding:0.8rem 1.4rem; border-radius:3px; box-shadow:0 6px 24px rgba(0,0,0,0.35);
    transition:transform .2s ease;
  }
  .carte-apercu:hover .carte-ouvrir, .carte-apercu:focus-visible .carte-ouvrir{ transform:translateX(-50%) translateY(-2px); }
  .carte-apercu:focus-visible{ outline:3px solid var(--ocre); outline-offset:-3px; }
  /* mention obligatoire du fond de carte, au-dessus du lien (le .zone p du site lui donnerait sa taille et sa couleur) */
  .carte-differee > .carte-credit{
    position:absolute; left:0; right:0; bottom:0; margin:0; z-index:1;
    padding:0.3rem 0.6rem; text-align:right; font-size:0.75rem; line-height:1.3;
    background:rgba(255,255,255,0.85); color:#2B1E12;
  }
  .carte-credit a{ color:#2B1E12; text-decoration:underline; }
  @media (prefers-reduced-motion: reduce){
    .carte-ouvrir{ transition:none; }
  }