/* ISO&FACE — Editorial theme styles
   Extrait des maquettes éditoriales
*/

  :root{
    /* Palette éditoriale — inspirée Adekwatts (noir + blanc + accents très sobres) */
    --paper:        #F4F2EE;        /* gris léger warm (fond principal, pas blanc pur) */
    --paper-2:      #FFFFFF;        /* blanc pur pour alternance / cartes */
    --paper-3:      #EAE7E0;        /* gris un peu plus marqué pour contraste */
    --paper-white:  #FFFFFF;
    --brand:        #018332;        /* vert ISO&FACE officiel (usage parcimonieux) */
    --brand-2:      #015C24;
    --brand-soft:   #EEF7F1;        /* vert ultra-pâle */
    --brand-pale:   #D8EEE1;
    --accent:       #FD5F00;        /* orange ISO&FACE officiel (CTA uniquement) */
    --accent-2:     #CC4B00;
    --accent-soft:  #FFF1E6;        /* orange ultra-pâle */
    --accent-warm:  #FD5F00;        /* on supprime le jaune, redirigé vers orange */
    --ink:          #1F1F1F;        /* gris très foncé (pas noir pur) */
    --ink-2:        #333333;
    --ink-3:        #6B6B6B;
    --ink-4:        #999999;
    --line:         #E2DFDA;        /* ligne très discrète (warm grey) */
    --line-2:       #CEC9C1;
    --wf:           #E6E3DC;        /* placeholder warm grey */
    --wf-line:      #BDB8AE;
    --radius:       8px;
    --radius-sm:    4px;
    --radius-xl:    12px;
    --shadow-xs:    0 1px 2px rgba(10, 10, 10, .04);
    --shadow-sm:    0 2px 8px rgba(10, 10, 10, .05);
    --shadow-md:    0 8px 28px rgba(10, 10, 10, .08);
    --shadow-lg:    0 20px 60px -20px rgba(10, 10, 10, .16);
  }
  *{ box-sizing:border-box }
  html,body{ margin:0; padding:0 }
  body{
    font-family:"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    color: var(--ink-2);
    background: var(--paper);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }

  /* NOTE — Le bloc « maquette » historique (.shell, .sidebar, .canvas, .device,
     .page, .mode-desktop/mobile…) a été retiré : il était utile à l'aperçu HTML
     d'origine mais entrait en conflit avec les classes WordPress (body.page).
     Si tu as besoin de re-générer ces visuels, utilise maquettes-isoface*.html
     dans le dossier parent. */

  /* ================ SITE ================ */
  .site{ font-size:15px; color:var(--ink-2); background:var(--paper); letter-spacing:-.005em }

  /* ------ Top bar (Dorémi style : 2 pills à droite en haut) ------ */
  .topbar{
    padding:14px 40px 0;
    display:flex; justify-content:flex-end; align-items:center; gap:10px;
    background:var(--paper);
    position:relative;
  }
  .pill-btn{
    display:inline-flex; align-items:center; gap:8px;
    font-size:13px; font-weight:600; padding:10px 18px;
    border-radius:999px; cursor:pointer; text-decoration:none;
    border:1.5px solid transparent; transition: all .15s;
  }
  .pill-btn.outline{
    background:transparent; color:var(--brand);
    border-color:var(--brand);
  }
  .pill-btn.outline:hover{ background:var(--brand); color:#fff }
  .pill-btn.dark{
    background:var(--ink); color:#fff; padding-right:8px;
  }
  .pill-btn.dark:hover{ background:#000 }
  .pill-btn .av{
    width:28px; height:28px; border-radius:50%;
    background:var(--accent); display:flex; align-items:center; justify-content:center;
    color:#fff; font-size:11px; font-weight:700;
  }

  /* ------ Header ------ */
  .header{
    background:var(--paper);
    padding:10px 40px 16px;
    display:flex; align-items:center; gap:40px;
    position:relative; z-index:20;
  }
  .brand{
    display:flex; align-items:center; gap:12px;
    text-decoration:none;
  }
  .brand-logo{
    height:46px; width:auto; display:block;
  }
  .brand-suffix{
    font-family:"Space Grotesk", -apple-system, BlinkMacSystemFont, sans-serif; font-weight:700;
    font-size:22px; color:var(--brand); letter-spacing:-.3px;
    padding-left:4px; border-left:1.5px solid var(--line-2);
    padding-left:12px;
  }
  /* legacy mock (still used in sidebar) */
  .brand .logo-mark{
    width:38px;height:38px; border-radius:10px;
    background: linear-gradient(135deg, var(--brand) 0%, var(--brand-2) 100%);
    position:relative;
  }
  .brand .logo-mark::after{
    content:""; position:absolute; inset:8px;
    background:var(--paper); border-radius:3px;
    clip-path: polygon(0 60%, 25% 40%, 50% 55%, 75% 38%, 100% 55%, 100% 100%, 0 100%);
  }
  .brand span.amp{ color:var(--accent); font-style:italic }

  .navmain{
    display:flex; gap:30px; margin:0 auto; font-size:14.5px;
    color:var(--ink); font-weight:500;
  }
  .navmain .nav-item{
    position:relative; cursor:pointer; padding:20px 0;
    display:flex; align-items:center; gap:4px;
  }
  .navmain .nav-item .chev{ font-size:10px; color:var(--ink-3); margin-left:2px }
  .navmain .nav-item.current{ color:var(--brand) }
  .navmain .nav-item.current::after{
    content:""; position:absolute; left:0; right:0; bottom:-1px; height:2px;
    background:var(--accent);
  }
  .navmain .nav-item:hover{ color:var(--brand) }

  .header-devis{
    display:inline-flex; align-items:center; gap:8px;
    font-size:12.5px; font-weight:600; padding:11px 18px;
    border-radius:999px; background:var(--accent); color:#fff;
    text-decoration:none; border:0; cursor:pointer;
    white-space:nowrap;
  }
  .header-devis:hover{ background:var(--accent-2) }

  /* ================ MEGA MENU (Dorémi style) ================ */
  .mega-wrap{
    position:absolute; left:50%; top:100%;
    transform: translateX(-50%);
    background:var(--paper-white); border-radius:22px;
    box-shadow: var(--shadow-lg);
    border:1px solid var(--line);
    padding:24px;
    max-width:1100px; width:calc(100% - 48px);
    z-index:30;
    display:none;
  }
  .mega-wrap::before{
    content:""; position:absolute; top:-8px; left:50%;
    transform:translateX(-50%) rotate(45deg);
    width:16px; height:16px; background:var(--paper-white);
    border-left:1px solid var(--line); border-top:1px solid var(--line);
  }
  .nav-item[data-mega].open .mega-wrap{ display:block }

  .mega{
    display:grid; grid-template-columns: 260px 1fr; gap:20px;
  }
  .mega-feat-card{
    background:var(--paper-2); border-radius:18px;
    padding:18px; display:flex; flex-direction:column; gap:10px;
    position:relative; overflow:hidden;
  }
  .mega-feat-card .illus{
    background:var(--wf); border:1px dashed var(--wf-line);
    border-radius:12px; height:150px;
    display:flex; align-items:center; justify-content:center;
    color:var(--ink-3); font-size:11px;
  }
  .mega-feat-card h4{
    margin:0; font-size:15px; color:var(--brand);
    font-family:"Space Grotesk", -apple-system, BlinkMacSystemFont, sans-serif; font-weight:600;
  }
  .mega-feat-cta{
    margin-top:auto;
    background:var(--accent); color:#fff;
    padding:12px 16px; border-radius:14px;
    font-size:13px; font-weight:600;
    display:flex; align-items:center; gap:8px;
    text-decoration:none;
  }
  .mega-feat-cta .arrow{
    width:26px;height:26px; border-radius:50%; background:#fff;
    color:var(--accent); display:flex; align-items:center; justify-content:center;
    font-weight:800;
  }

  .mega-cols{
    display:grid; grid-template-columns: repeat(3, 1fr); gap:14px 28px;
  }
  .mega-cols .col h5{
    margin:4px 0 12px; font-size:11.5px; font-weight:700;
    color:var(--accent-2); text-transform:uppercase; letter-spacing:1.2px;
    font-family:"Inter", sans-serif;
  }
  .mega-cols .col a{
    display:flex; align-items:center; gap:10px;
    padding:7px 0;
    color:var(--ink); text-decoration:none; font-size:13.5px; font-weight:500;
  }
  .mega-cols .col a:hover{ color:var(--brand) }
  .mega-cols .col a .icn{
    width:22px; height:22px; border-radius:6px;
    background:var(--brand-soft); color:var(--brand);
    display:flex; align-items:center; justify-content:center;
    font-size:10.5px; font-weight:700; flex-shrink:0;
  }

  .mega-bottom{
    margin-top:18px;
    background:var(--brand-soft); border-radius:14px;
    padding:14px 18px;
    display:flex; align-items:center; gap:14px;
    cursor:pointer; text-decoration:none;
  }
  .mega-bottom .coin{
    width:34px;height:34px;border-radius:50%;
    background:var(--accent-warm); color:var(--brand);
    display:flex; align-items:center; justify-content:center; font-weight:800;
    flex-shrink:0;
  }
  .mega-bottom .tx{ flex:1; font-size:14px; font-weight:600; color:var(--brand) }
  .mega-bottom .arr{
    color:var(--brand); font-weight:700; font-size:18px;
  }

  /* Static mega preview */
  .mega-demo-section{
    padding:28px 40px;
    background:linear-gradient(180deg, var(--paper) 0%, var(--paper-3) 100%);
    border-bottom:1px solid var(--line);
  }
  .mega-demo-section .label-hover{
    max-width:1180px; margin: 0 auto 14px;
    font-size:11px; color:var(--ink-3); text-transform:uppercase;
    letter-spacing:1.3px; font-weight:600;
    display:flex; align-items:center; gap:8px;
  }
  .mega-demo-section .label-hover .dot{
    width:6px;height:6px;border-radius:50%; background:var(--accent)
  }
  .mega-demo{
    position:static !important; transform:none !important;
    display:block !important; margin:0 auto;
  }
  .mega-demo::before{ display:none }

  /* ================ HERO ================ */
  .hero{
    padding:50px 40px 90px;
    background: var(--paper);
    position:relative;
  }
  .hero .wrap{
    display:grid; grid-template-columns: 1.05fr .95fr; gap:40px;
    max-width:1180px; margin:0 auto; align-items:center;
  }
  .eyebrow{
    display:inline-flex; align-items:center; gap:8px;
    font-size:11.5px; font-weight:700;
    text-transform:uppercase; letter-spacing:1.5px;
    color:var(--brand); background:var(--brand-soft);
    padding:5px 10px; border-radius:999px;
  }
  .eyebrow .dot{ width:5px;height:5px;border-radius:50%; background:var(--accent) }

  h2.display{
    font-family:"Space Grotesk", -apple-system, BlinkMacSystemFont, sans-serif;
    font-weight:700; font-size:66px; line-height:1.01;
    margin:20px 0 20px; color:var(--brand); letter-spacing:-2px;
  }
  h2.display em{ color:var(--ink); font-style:normal }
  h2.display .dot-o{ color:var(--accent) }
  .lead{
    font-size:17px; line-height:1.55; color:var(--ink-2); max-width:520px;
  }
  .lead b{ color:var(--ink); font-weight:700 }
  .hero-cta{ display:flex; gap:12px; margin-top:28px; flex-wrap:wrap; align-items:center }
  .btn{
    display:inline-flex; align-items:center; gap:8px;
    font-size:14px; font-weight:600; padding:14px 22px;
    border-radius:999px; cursor:pointer; border:1.5px solid transparent;
    text-decoration:none; transition:all .15s; line-height:1;
  }
  .btn.primary{ background:var(--brand); color:#fff }
  .btn.primary:hover{ background:var(--brand-2) }
  .btn.accent{ background:var(--accent); color:#fff }
  .btn.accent:hover{ background:var(--accent-2) }
  .btn.dark{ background:var(--ink); color:#fff }
  .btn.ghost{
    background:transparent; color:var(--brand); border-color:var(--brand);
  }
  .btn.ghost:hover{ background:var(--brand); color:#fff }
  .btn.arrow-end::after{
    content:""; width:24px; height:24px; border-radius:50%;
    background:#fff; color:var(--accent);
    display:inline-flex; align-items:center; justify-content:center;
    margin-left:4px; font-weight:800;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='%23FD5F00' stroke-width='2.5' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");
    background-position:center; background-repeat:no-repeat; background-size:14px;
  }

  .review-stars{
    display:flex; align-items:center; gap:10px; margin-top:26px;
    font-size:13px; color:var(--ink-2);
  }
  .review-stars .stars{ color:var(--accent-warm); font-size:15px; letter-spacing:2px }
  .review-stars b{ color:var(--ink); font-weight:700; font-size:14px }
  .review-stars .src{ color:var(--ink-3); font-size:12.5px }

  /* Hero illustration */
  .hero-illus{
    background: var(--accent-soft);
    border-radius:24px; position:relative;
    aspect-ratio: 1/1; overflow:hidden;
    display:flex; align-items:center; justify-content:center;
    color:var(--ink-3); font-size:12px;
    border:1px dashed var(--wf-line);
  }
  .hero-illus .sun{
    position:absolute; top:30px; right:40px;
    width:80px; height:80px; border-radius:50%;
    background:var(--accent-warm);
  }
  .hero-illus .house{
    position:absolute; bottom:60px; left:50%; transform:translateX(-50%);
    width:65%; height:58%; background:var(--accent);
    border-radius:6px;
    clip-path: polygon(0 30%, 50% 0%, 100% 30%, 100% 100%, 0 100%);
  }
  .hero-illus .house::after{
    content:""; position:absolute; bottom:10%; left:8%;
    width:18%; aspect-ratio:1/1.6; background:var(--brand-2);
  }
  .hero-illus .house::before{
    content:""; position:absolute; bottom:35%; right:10%;
    width:22%; height:20%; background:var(--paper);
    display:flex;
  }
  .hero-illus .tag{
    position:absolute; top:18px; left:18px;
    background:#fff; border:1px solid var(--line);
    padding:5px 9px; border-radius:6px;
    font-size:11px; color:var(--ink-3); font-weight:500;
    z-index:3;
  }
  .hero-illus .leaf{
    position:absolute; top:60px; left:40px;
    width:100px; height:120px;
    background: radial-gradient(circle at 30% 30%, var(--brand) 0%, var(--brand-2) 100%);
    border-radius: 80% 10% 80% 10% / 10% 80% 10% 80%;
    transform: rotate(-20deg);
    z-index:1;
  }
  .hero-illus .circle-text{
    position:absolute; top:20px; right:30px;
    font-family:"Space Grotesk", -apple-system, BlinkMacSystemFont, sans-serif;
    font-weight:700; font-size:11px;
    color:var(--brand);
    text-transform:uppercase; letter-spacing:1.5px;
    transform: rotate(-20deg);
    z-index:4;
  }

  /* Estimation bloc inline (style Homeserve) */
  .estim-bloc{
    max-width:1180px; margin:30px auto 0;
    background:#fff; border:1px solid var(--line);
    border-radius:20px; padding:26px 28px;
    box-shadow: var(--shadow-sm);
    display:flex; align-items:center; gap:20px; flex-wrap:wrap;
  }
  .estim-bloc .title{
    display:flex; align-items:center; gap:18px; flex-wrap:wrap;
  }
  .estim-bloc h4{
    margin:0; font-size:22px; font-family:"Space Grotesk", -apple-system, BlinkMacSystemFont, sans-serif;
    color:var(--ink); font-weight:700; letter-spacing:-.3px;
  }
  .estim-bloc .checks{
    display:flex; gap:14px; font-size:13px; color:var(--ink-2);
  }
  .estim-bloc .checks span{ display:flex; align-items:center; gap:6px }
  .estim-bloc .checks .ck{
    width:18px; height:18px; border-radius:50%;
    background:var(--brand-soft); color:var(--brand);
    display:flex; align-items:center; justify-content:center;
    font-size:10px; font-weight:800;
  }
  .estim-bloc .form{
    flex:1; display:flex; align-items:center; gap:10px; min-width:280px;
  }
  .estim-bloc .input{
    flex:1; height:48px; border:1.5px solid var(--line-2);
    border-radius:14px; padding:0 16px; font-size:14px; background:#fff;
    color:var(--ink-3); display:flex; align-items:center;
  }
  .estim-bloc .input::before{
    content:"📍 "; margin-right:6px;
  }

  /* ================ Section wrappers ================ */
  section.sec{ padding:90px 40px }
  section.sec .wrap{ max-width:1180px; margin:0 auto }
  section.sec .head{ margin-bottom:44px; max-width:780px }
  section.sec h3.title{
    margin:12px 0 12px; font-family:"Space Grotesk", -apple-system, BlinkMacSystemFont, sans-serif;
    font-size:44px; font-weight:700; color:var(--brand);
    letter-spacing:-1px; line-height:1.02;
  }
  section.sec h3.title em{ color:var(--ink); font-style:normal }
  section.sec h3.title .dot-o{ color:var(--accent); font-style:normal }
  section.sec p.sub{ margin:0; color:var(--ink-2); font-size:16px; line-height:1.55 }
  .sec-cream{ background:var(--paper-2) }
  section.sec.sec-green{ background:var(--brand); color:#fff }
  section.sec.sec-green h3.title,
  section.sec.sec-green h3.title em{ color:#fff }
  section.sec.sec-green h3.title .dot-o{ color:var(--accent-warm) }
  section.sec.sec-green p.sub{ color:rgba(255,255,255,.85) }
  section.sec.sec-green .eyebrow{ background:rgba(255,255,255,.1); color:var(--accent-warm) }
  section.sec.sec-green .eyebrow .dot{ background:var(--accent-warm) }

  /* Services cards */
  .services{ display:grid; grid-template-columns: repeat(4, 1fr); gap:18px }
  .service-card{
    background:#fff; border:1px solid var(--line); border-radius:24px;
    padding:24px; display:flex; flex-direction:column; gap:12px;
    transition: all .15s; min-height:280px;
  }
  .service-card:hover{
    border-color:var(--brand); transform:translateY(-2px);
    box-shadow: var(--shadow-md);
  }
  .service-card .icon-wrap{
    width:54px; height:54px; border-radius:16px;
    background:var(--brand-soft); color:var(--brand);
    display:flex; align-items:center; justify-content:center;
    font-weight:700; font-size:13px;
  }
  .service-card h4{
    margin:6px 0 4px; font-size:19px; color:var(--ink);
    font-family:"Space Grotesk", -apple-system, BlinkMacSystemFont, sans-serif; font-weight:700;
    letter-spacing:-.3px; line-height:1.15;
  }
  .service-card p{ margin:0; font-size:13.5px; color:var(--ink-3); line-height:1.6 }
  .service-card .arrow{
    margin-top:auto; color:var(--accent); font-weight:700; font-size:13.5px;
    display:flex; align-items:center; gap:6px;
  }

  /* Proof / avis */
  .proof{ display:grid; grid-template-columns: 1fr 1fr 1fr; gap:18px }
  .proof .card{
    background:#fff; border:1px solid var(--line); border-radius:22px; padding:26px;
  }
  .proof .card .stars{ color:var(--accent-warm); font-size:14px; letter-spacing:2px }
  .proof .card p{ font-size:14.5px; color:var(--ink-2); line-height:1.55; margin:12px 0 18px }
  .proof .card .who{ display:flex; align-items:center; gap:10px; font-size:12px; color:var(--ink-3) }
  .proof .card .av{
    width:34px;height:34px;border-radius:50%; background:var(--wf);
    border:1px dashed var(--wf-line);
  }
  .proof .card .who b{ display:block; color:var(--ink); font-size:13.5px }

  /* Realisations */
  .reals{
    display:grid; grid-template-columns: 2fr 1fr 1fr;
    gap:16px; grid-template-rows: 260px 260px;
  }
  .real{
    background:var(--wf); border:1px dashed var(--wf-line);
    border-radius:22px; position:relative; overflow:hidden;
    color:var(--ink-3); font-size:12px; display:flex; align-items:flex-end;
  }
  .real .lab{
    background:#fff; border:1px solid var(--line); border-radius:10px;
    padding:8px 12px; margin:14px; font-size:12.5px; color:var(--ink);
    font-weight:500; box-shadow: var(--shadow-xs);
  }
  .real.big{ grid-row: span 2 }

  /* Simulateur green band */
  .simu{
    background: var(--brand);
    color:#fff; border-radius:32px;
    padding:52px;
    display:grid; grid-template-columns: 1.1fr 1fr; gap:48px; align-items:center;
    position:relative; overflow:hidden;
  }
  .simu::before{
    content:""; position:absolute; top:-60px; right:-60px;
    width:260px; height:260px; border-radius:50%;
    background: var(--accent-warm); opacity:.18;
  }
  .simu > *{ position:relative; z-index:1 }
  .simu h3{
    margin:16px 0 14px; font-size:38px; color:#fff;
    font-family:"Space Grotesk", -apple-system, BlinkMacSystemFont, sans-serif; font-weight:700; letter-spacing:-.8px; line-height:1.05;
  }
  .simu h3 em{ color:var(--accent-warm); font-style:normal }
  .simu p{ margin:0 0 22px; color:rgba(255,255,255,.85); font-size:15px; line-height:1.6 }
  .simu .eyebrow{ background:rgba(255,255,255,.12); color:#EDE0C9 }
  .simu .eyebrow .dot{ background:var(--accent-warm) }
  .simu-form{
    background:#fff; border-radius:20px; padding:22px;
    color:var(--ink);
  }
  .simu-form .row{ display:flex; gap:10px; margin-bottom:12px }
  .simu-form label{ flex:1; font-size:11.5px; color:var(--ink-3); display:block; font-weight:500 }
  .simu-form .field{
    height:44px; border:1.5px solid var(--line-2); border-radius:12px; margin-top:5px;
    display:flex; align-items:center; padding:0 14px;
    color:var(--ink-2); font-size:13.5px; background:#fff;
  }
  .simu-form .field.select::after{ content:"▾"; margin-left:auto; color:var(--ink-4); font-size:10px }
  .simu-form .btn{ width:100%; justify-content:center; margin-top:6px }

  /* Dept picker */
  .dept-picker{ margin-top:26px; max-width:540px }
  .dept-picker h4{
    margin:0 0 10px; font-size:12px; color:var(--ink-3);
    font-weight:700; text-transform:uppercase; letter-spacing:1.2px;
  }
  .dept-chips{ display:flex; flex-wrap:wrap; gap:6px }
  .chip{
    font-size:13px; font-weight:500; color:var(--ink);
    background:#fff; border:1.5px solid var(--line-2);
    padding:8px 14px; border-radius:999px;
    cursor:pointer; transition:all .15s;
  }
  .chip:hover{ border-color:var(--brand); color:var(--brand) }
  .chip.on{ background:var(--brand); color:#fff; border-color:var(--brand) }

  /* Badges trust */
  .trust-strip{
    max-width:1180px; margin: 44px auto 0;
    padding: 26px 0 0;
    border-top:1px solid var(--line);
    display:flex; align-items:center; gap:34px; flex-wrap:wrap;
    justify-content:center;
  }
  .trust-strip span.l{
    font-size:11px; color:var(--ink-3);
    text-transform:uppercase; letter-spacing:1.8px; font-weight:700;
  }
  .press-logo{
    font-family:"Space Grotesk", -apple-system, BlinkMacSystemFont, sans-serif; font-weight:700;
    font-size:20px; color:var(--ink); letter-spacing:-.3px;
    opacity:.75;
  }
  .badge-chip{
    display:inline-flex; align-items:center; gap:8px;
    font-size:13px; color:var(--ink-2); font-weight:500;
  }
  .badge-chip .sq{
    width:26px;height:26px;border-radius:7px;
    background:var(--brand-soft); color:var(--brand);
    display:flex; align-items:center; justify-content:center;
    font-weight:800; font-size:11px;
  }

  /* Agences map */
  .agences-block{ display:grid; grid-template-columns: 1.4fr 1fr; gap:22px }
  .map{
    background: repeating-linear-gradient(45deg, var(--paper-2) 0 14px, #EDE1BE 14px 28px);
    border:1px dashed var(--wf-line);
    border-radius:22px; position:relative; min-height:380px;
  }
  .map .pin{
    position:absolute; width:20px;height:20px; border-radius:50% 50% 50% 0;
    background:var(--brand); transform:rotate(-45deg); border:2px solid #fff;
    box-shadow:0 3px 8px rgba(0,0,0,.15);
  }
  .map .pin.on{ background:var(--accent) }
  .map .pin::after{ content:""; position:absolute; inset:4px; border-radius:50%; background:#fff }
  .map .label{
    position:absolute; background:#fff;
    border:1px solid var(--line); border-radius:6px;
    padding:3px 8px; font-size:11px; font-weight:500; color:var(--ink);
    transform: translate(14px, -6px); white-space:nowrap;
    box-shadow: var(--shadow-xs);
  }
  .agency-list{
    background:#fff; border:1px solid var(--line); border-radius:22px;
    padding:18px 20px;
  }
  .agency-list h4{
    margin:0 0 12px; font-size:12px; color:var(--ink-3);
    font-weight:700; text-transform:uppercase; letter-spacing:1.3px;
  }
  .agency-row{
    display:flex; justify-content:space-between; align-items:center;
    padding:14px 4px; border-bottom:1px solid var(--line); font-size:14px; cursor:pointer;
  }
  .agency-row:last-child{ border-bottom:0 }
  .agency-row:hover b{ color:var(--brand) }
  .agency-row .dep{ color:var(--ink-3); font-size:12px; margin-left:6px; font-weight:400 }
  .agency-row .pill-n{ font-size:11px; color:var(--ink-3); font-weight:500 }

  /* Footer */
  .footer{
    background:var(--brand-2); color:#C7D8D0;
    padding:70px 40px 28px;
  }
  .footer .wrap{
    max-width:1180px; margin:0 auto;
    display:grid; grid-template-columns: 1.6fr 1fr 1fr 1fr 1fr; gap:40px;
  }
  .footer h5{
    color:#fff; font-size:12px; margin:0 0 14px;
    text-transform:uppercase; letter-spacing:1.3px; font-weight:700;
  }
  .footer ul{
    list-style:none; padding:0; margin:0;
    font-size:13px; line-height:2.1; color:#9AB0A6;
  }
  .footer ul li{ cursor:pointer }
  .footer ul li:hover{ color:#fff }
  .footer .brand{ color:#fff; margin-bottom:12px }
  .footer .brand .logo-mark::after{ background:var(--brand-2) }
  .footer .brand-suffix{
    color:#fff;
    border-left-color: rgba(255,255,255,.18);
  }
  .footer .baseline{
    font-size:12.5px; line-height:1.6; color:#9AB0A6; max-width:280px;
  }
  .footer .cop{
    max-width:1180px; margin:40px auto 0; padding-top:22px;
    border-top:1px solid rgba(255,255,255,.06);
    display:flex; justify-content:space-between; font-size:11.5px; color:#7C948A;
  }

  /* ================ PAGE HUB PRESTATIONS ================ */
  .crumbs{
    padding:16px 40px; font-size:12px; color:var(--ink-3);
    background:var(--paper); border-bottom:1px solid var(--line);
  }
  .crumbs b{ color:var(--ink); font-weight:600 }
  .crumbs a{ color:var(--ink-3); text-decoration:none }
  .crumbs a:hover{ color:var(--brand) }

  .pagehead{
    padding:56px 40px 56px;
    background:var(--paper);
  }
  .pagehead .wrap{ max-width:1180px; margin:0 auto }
  .pagehead h1{
    margin:14px 0 16px;
    font-family:"Space Grotesk", -apple-system, BlinkMacSystemFont, sans-serif; font-weight:700;
    font-size:60px; color:var(--brand);
    letter-spacing:-1.6px; line-height:1.02;
  }
  .pagehead h1 em{ color:var(--ink); font-style:normal }
  .pagehead h1 .dot-o{ color:var(--accent); font-style:normal }
  .pagehead p{
    max-width:720px; color:var(--ink-2); font-size:17px; line-height:1.6;
  }

  .pillars{ display:grid; grid-template-columns: 1fr 1fr; gap:22px }
  .pillar{
    background:#fff; border:1px solid var(--line); border-radius:24px;
    padding:28px;
    display:grid; grid-template-columns: 1fr 1fr; gap:24px; align-items:stretch;
    transition: all .15s;
  }
  .pillar:hover{ border-color:var(--brand); box-shadow: var(--shadow-md) }
  .pillar .txt h3{
    margin:10px 0 8px; font-size:24px; color:var(--brand);
    font-family:"Space Grotesk", -apple-system, BlinkMacSystemFont, sans-serif; font-weight:700; letter-spacing:-.4px;
    line-height:1.1;
  }
  .pillar .txt h3 em{ color:var(--ink); font-style:normal }
  .pillar .txt .tags{ display:flex; gap:6px; flex-wrap:wrap; margin-bottom:12px }
  .pillar .txt .tags span{
    font-size:10.5px; background:var(--paper-2);
    color:var(--ink-2); padding:3px 9px; border-radius:999px;
    border:1px solid var(--line-2); font-weight:500;
    text-transform:uppercase; letter-spacing:1px;
  }
  .pillar .txt p{ font-size:13.5px; color:var(--ink-3); line-height:1.6 }
  .pillar .txt ul{
    font-size:13px; color:var(--ink-2); line-height:1.9;
    padding-left:18px; margin:10px 0 18px;
  }
  .pillar .ph{
    background:var(--wf); border:1px dashed var(--wf-line);
    border-radius:16px; min-height:220px;
    color:var(--ink-3); display:flex; align-items:center; justify-content:center;
    font-size:11.5px;
  }

  /* PAGE PILIER ITE */
  .pillar-hero{
    padding:60px 40px 60px;
    background:var(--paper);
    border-bottom:1px solid var(--line);
  }
  .pillar-hero .wrap{
    max-width:1180px; margin:0 auto;
    display:grid; grid-template-columns:1.1fr 1fr; gap:50px; align-items:center;
  }
  .pillar-hero h1{
    font-family:"Space Grotesk", -apple-system, BlinkMacSystemFont, sans-serif; font-weight:700;
    font-size:56px; line-height:1.02;
    margin:14px 0 18px; color:var(--brand); letter-spacing:-1.4px;
  }
  .pillar-hero h1 em{ color:var(--ink); font-style:normal }
  .pillar-hero h1 .dot-o{ color:var(--accent); font-style:normal }
  .pillar-hero p{ color:var(--ink-2); font-size:16px; line-height:1.6; max-width:560px }
  .pillar-hero .metrics{
    display:flex; gap:44px; margin-top:34px;
    padding-top:26px; border-top:1px solid var(--line);
  }
  .pillar-hero .metrics div b{
    display:block; font-family:"Space Grotesk", -apple-system, BlinkMacSystemFont, sans-serif;
    font-size:34px; color:var(--brand); font-weight:700; letter-spacing:-.5px;
  }
  .pillar-hero .metrics div span{
    font-size:11.5px; color:var(--ink-3);
    text-transform:uppercase; letter-spacing:1.2px; font-weight:600;
  }
  .pillar-hero .ph{
    background:var(--accent-soft); border:1px dashed var(--wf-line); border-radius:24px;
    aspect-ratio: 4/5;
    color:var(--ink-3); display:flex; align-items:center; justify-content:center;
    font-size:12px; position:relative; overflow:hidden;
  }

  .segments{ display:grid; grid-template-columns: repeat(3, 1fr); gap:18px }
  .segment{
    border:1px solid var(--line); border-radius:22px;
    padding:26px; background:#fff; transition: all .15s;
  }
  .segment:hover{ border-color:var(--brand) }
  .segment .ph{
    background:var(--wf); border:1px dashed var(--wf-line); border-radius:14px;
    height:160px; margin-bottom:16px;
  }
  .segment h4{
    margin:0 0 8px; font-size:20px; color:var(--brand);
    font-family:"Space Grotesk", -apple-system, BlinkMacSystemFont, sans-serif; font-weight:700; letter-spacing:-.3px;
  }
  .segment p{ margin:0 0 16px; font-size:13.5px; color:var(--ink-3); line-height:1.6 }
  .segment .ln{
    color:var(--accent); font-weight:700; font-size:13.5px;
    text-decoration:none; display:inline-flex; align-items:center; gap:6px;
  }

  .steps{ display:grid; grid-template-columns: repeat(5, 1fr); gap:16px }
  .step{
    background:#fff; border:1px solid var(--line); border-radius:22px;
    padding:24px; position:relative; font-size:13.5px;
    color:var(--ink-3); line-height:1.55;
  }
  .step .n{
    font-family:"Space Grotesk", -apple-system, BlinkMacSystemFont, sans-serif; font-size:38px; color:var(--accent);
    font-weight:700; letter-spacing:-1px; margin-bottom:8px; line-height:1;
  }
  .step b{ color:var(--ink); display:block; margin-bottom:4px; font-size:14.5px }

  .insulants{ display:grid; grid-template-columns: repeat(4, 1fr); gap:14px }
  .insulant{
    background:#fff; border:1px solid var(--line); border-radius:16px;
    padding:16px; display:flex; flex-direction:column; gap:10px;
    font-size:13px; color:var(--ink-2);
  }
  .insulant .ph{ background:var(--wf); border:1px dashed var(--wf-line); border-radius:10px; height:100px }
  .insulant b{ color:var(--ink); font-size:14px; font-weight:600 }
  .insulant .small{ color:var(--ink-3); font-size:11.5px }

  /* FAQ */
  .faq{ display:grid; grid-template-columns:1fr; gap:10px; max-width:820px }
  .faq-row{
    background:#fff; border:1px solid var(--line); border-radius:16px;
    padding:20px 24px; display:flex; justify-content:space-between; align-items:center;
    font-size:15.5px; color:var(--ink); font-weight:500; cursor:pointer;
    transition: border-color .15s;
  }
  .faq-row:hover{ border-color:var(--brand) }
  .faq-row .plus{
    color:var(--accent); font-size:20px; font-weight:400;
    width:26px;height:26px; display:flex; align-items:center; justify-content:center;
  }
  .faq-row.open{
    flex-direction:column; align-items:stretch;
    padding:22px 26px; background:var(--paper-3);
  }
  .faq-row.open .faq-q{
    display:flex; justify-content:space-between; align-items:center;
    font-size:15.5px; margin-bottom:14px; color:var(--ink); font-weight:600;
  }
  .faq-row.open .faq-a{
    padding-top:14px; border-top:1px solid var(--line);
    font-size:14.5px; color:var(--ink-2); line-height:1.7; font-weight:400;
  }
  .faq-row.open .faq-a p{ margin:0 0 12px }
  .faq-row.open .faq-a p:last-child{ margin-bottom:0 }

  /* SEO / content blocks */
  .seo-block{
    max-width:820px; margin:0 auto;
    font-size:16px; line-height:1.75; color:var(--ink-2);
  }
  .seo-block > h3{
    font-family:"Space Grotesk", -apple-system, BlinkMacSystemFont, sans-serif; font-size:32px;
    color:var(--brand); margin:44px 0 16px;
    font-weight:700; letter-spacing:-.5px; line-height:1.1;
  }
  .seo-block > h3:first-child{ margin-top:0 }
  .seo-block h4{
    font-family:"Space Grotesk", -apple-system, BlinkMacSystemFont, sans-serif; font-size:22px;
    color:var(--ink); margin:30px 0 12px; font-weight:700; letter-spacing:-.3px;
  }
  .seo-block p{ margin:0 0 18px }
  .seo-block ul{ margin:0 0 18px; padding-left:22px; line-height:1.8 }
  .seo-block ul li{ margin-bottom:6px }
  .seo-block strong{ color:var(--ink); font-weight:700 }
  .seo-block em{ color:var(--brand); font-style:italic; font-weight:600 }
  .seo-block blockquote{
    margin:22px 0; padding:18px 22px;
    background:var(--paper-2); border-left:3px solid var(--accent);
    border-radius:0 12px 12px 0;
    font-style:italic; color:var(--ink);
  }

  .word-count{
    display:inline-flex; align-items:center; gap:10px;
    background:var(--brand-soft); color:var(--brand);
    padding:7px 14px; border-radius:999px;
    font-size:11.5px; font-weight:700;
    text-transform:uppercase; letter-spacing:1px;
    margin-bottom:18px;
  }
  .word-count b{
    color:var(--brand-2); font-family:"Space Grotesk", -apple-system, BlinkMacSystemFont, sans-serif;
    font-size:15px; font-weight:700; letter-spacing:-.3px;
    text-transform:none;
  }

  @media (max-width: 768px){ .seo-block{ font-size:15px } }
  @media (max-width: 768px){ .seo-block > h3{ font-size:24px } }
  @media (max-width: 768px){ .seo-block h4{ font-size:18px } }

  /* ================================================================ */
  /*   DESIGN SYSTEM PAGE                                              */
  /* ================================================================ */
  .ds-wrap{ max-width:1180px; margin:0 auto; padding:56px 40px }
  .ds-header{ margin-bottom:48px; max-width:780px }
  .ds-header h1{
    font-family:"Space Grotesk", -apple-system, BlinkMacSystemFont, sans-serif; font-weight:700;
    font-size:52px; color:var(--brand); letter-spacing:-1.2px; line-height:1.05;
    margin:12px 0 14px;
  }
  .ds-header h1 em{ color:var(--ink); font-style:normal }
  .ds-header p{ color:var(--ink-2); font-size:16px; line-height:1.6 }

  .ds-section{
    background:#fff; border:1px solid var(--line); border-radius:22px;
    padding:36px; margin-bottom:24px;
  }
  .ds-section-head{
    display:flex; align-items:center; justify-content:space-between;
    margin-bottom:28px; padding-bottom:18px;
    border-bottom:1px solid var(--line);
  }
  .ds-section-head h2{
    margin:0; font-family:"Space Grotesk", -apple-system, BlinkMacSystemFont, sans-serif; font-size:24px;
    color:var(--brand); font-weight:700; letter-spacing:-.3px;
  }
  .ds-section-head .ds-meta{
    font-size:11px; font-family:ui-monospace, Menlo, monospace;
    color:var(--ink-3); background:var(--paper-2); padding:5px 10px;
    border-radius:6px; border:1px solid var(--line);
  }

  .ds-grid{ display:grid; gap:16px }
  .ds-grid-4{ grid-template-columns: repeat(4, 1fr) }
  .ds-grid-6{ grid-template-columns: repeat(6, 1fr) }
  .ds-grid-2{ grid-template-columns: 1fr 1fr }

  /* palette swatches */
  .swatch{
    border:1px solid var(--line); border-radius:14px; overflow:hidden;
    display:flex; flex-direction:column;
  }
  .swatch-color{ aspect-ratio: 5/4; position:relative }
  .swatch-color .hex-on{
    position:absolute; bottom:12px; left:12px;
    font-family:ui-monospace, Menlo, monospace; font-size:12px;
    background:rgba(255,255,255,.9); color:var(--ink);
    padding:4px 8px; border-radius:6px; font-weight:600;
  }
  .swatch-meta{
    padding:12px 14px; background:#fff;
  }
  .swatch-meta b{ display:block; font-size:13px; color:var(--ink); margin-bottom:2px }
  .swatch-meta .var{
    font-family:ui-monospace, Menlo, monospace; font-size:11px;
    color:var(--ink-3);
  }

  /* typo scale */
  .typo-row{
    display:grid; grid-template-columns: 180px 1fr 180px;
    gap:16px; align-items:baseline;
    padding:18px 0; border-bottom:1px dashed var(--line);
  }
  .typo-row:last-child{ border-bottom:0 }
  .typo-row .label{
    font-size:11px; font-weight:700; color:var(--ink-3);
    text-transform:uppercase; letter-spacing:1.2px;
  }
  .typo-row .spec{
    font-family:ui-monospace, Menlo, monospace; font-size:11px;
    color:var(--ink-3); text-align:right;
  }
  .typo-display{ font-family:"Space Grotesk", -apple-system, BlinkMacSystemFont, sans-serif; font-size:52px; font-weight:700; color:var(--brand); letter-spacing:-1.2px; line-height:1 }
  .typo-h1{ font-family:"Space Grotesk", -apple-system, BlinkMacSystemFont, sans-serif; font-size:44px; font-weight:700; color:var(--brand); letter-spacing:-1px; line-height:1.05 }
  .typo-h2{ font-family:"Space Grotesk", -apple-system, BlinkMacSystemFont, sans-serif; font-size:32px; font-weight:700; color:var(--brand); letter-spacing:-.6px; line-height:1.1 }
  .typo-h3{ font-family:"Space Grotesk", -apple-system, BlinkMacSystemFont, sans-serif; font-size:22px; font-weight:700; color:var(--ink); letter-spacing:-.3px; line-height:1.2 }
  .typo-lead{ font-size:17px; color:var(--ink-2); line-height:1.55; font-weight:500 }
  .typo-body{ font-size:15px; color:var(--ink-2); line-height:1.7 }
  .typo-small{ font-size:13px; color:var(--ink-3); line-height:1.6 }
  .typo-caption{ font-size:11px; font-weight:700; color:var(--ink-3); text-transform:uppercase; letter-spacing:1.4px }

  /* buttons showcase */
  .btn-row{
    display:grid; grid-template-columns: repeat(4, 1fr);
    gap:14px;
  }
  .btn-cell{
    background:var(--paper-2); border:1px dashed var(--line-2); border-radius:12px;
    padding:20px; display:flex; flex-direction:column; align-items:center; gap:8px;
    min-height:110px; justify-content:center;
  }
  .btn-cell .state-label{
    font-size:10.5px; color:var(--ink-3); text-transform:uppercase;
    letter-spacing:1.2px; font-weight:700;
  }

  /* component cards */
  .ds-card-demo{
    background:var(--paper-2); border:1px dashed var(--line-2); border-radius:14px;
    padding:20px;
  }

  /* form fields showcase */
  .ds-form-grid{ display:grid; grid-template-columns: 1fr 1fr; gap:24px }
  .ds-field{ display:flex; flex-direction:column; gap:6px }
  .ds-field label{
    font-size:12px; font-weight:600; color:var(--ink-2);
  }
  .ds-field .input-std{
    height:44px; border:1.5px solid var(--line-2); border-radius:12px;
    padding:0 14px; display:flex; align-items:center;
    font-size:14px; background:#fff; color:var(--ink);
  }
  .ds-field .input-std.focus{
    border-color:var(--brand); box-shadow: 0 0 0 4px rgba(19,67,52,.1);
  }
  .ds-field .input-std.error{
    border-color:#D64545; background:#FEF2F2;
  }
  .ds-field .input-std.filled{
    border-color:var(--line-2); background:var(--paper-3); color:var(--ink);
  }
  .ds-field .help{
    font-size:11.5px; color:var(--ink-3);
  }
  .ds-field .help.err{ color:#D64545 }
  .ds-check{
    display:flex; align-items:flex-start; gap:10px; font-size:13.5px; color:var(--ink-2); line-height:1.5;
  }
  .ds-check .box{
    width:20px; height:20px; border:1.5px solid var(--line-2); border-radius:5px;
    flex-shrink:0; background:#fff;
    display:flex; align-items:center; justify-content:center;
    margin-top:1px;
  }
  .ds-check .box.on{
    background:var(--brand); border-color:var(--brand); color:#fff; font-weight:800; font-size:12px;
  }

  /* spacing & radii */
  .ds-space{ display:grid; grid-template-columns: repeat(8, 1fr); gap:12px; align-items:flex-end }
  .ds-space .cell{ text-align:center }
  .ds-space .bar{
    background:var(--brand); border-radius:4px; width:100%;
  }
  .ds-space .lab{
    font-size:11px; color:var(--ink-3);
    font-family:ui-monospace, Menlo, monospace; margin-top:6px;
  }

  .ds-radii{ display:grid; grid-template-columns: repeat(5, 1fr); gap:14px }
  .ds-radius-box{
    aspect-ratio: 1/1; background:var(--brand-soft);
    border:1px solid var(--brand-pale);
    display:flex; align-items:center; justify-content:center;
    color:var(--brand); font-weight:700; font-size:12px;
    font-family:ui-monospace, Menlo, monospace;
  }

  .ds-shadows{ display:grid; grid-template-columns: repeat(4, 1fr); gap:20px }
  .ds-shadow-box{
    background:#fff; border-radius:14px; aspect-ratio:3/2;
    display:flex; align-items:center; justify-content:center;
    color:var(--ink-3); font-size:12px; font-weight:600;
    font-family:ui-monospace, Menlo, monospace;
  }

  /* breakpoint bar */
  .bp-bar{
    display:grid; grid-template-columns: 80px 150px 1fr; gap:14px;
    align-items:center; padding:14px 0; border-bottom:1px dashed var(--line);
  }
  .bp-bar:last-child{ border-bottom:0 }
  .bp-bar .bp-name{ font-family:"Space Grotesk", -apple-system, BlinkMacSystemFont, sans-serif; font-weight:700; font-size:18px; color:var(--brand) }
  .bp-bar .bp-range{ font-family:ui-monospace, Menlo, monospace; font-size:12.5px; color:var(--ink-3) }
  .bp-bar .bp-viz{
    height:22px; background:var(--paper-2); border-radius:6px;
    position:relative; border:1px solid var(--line);
  }
  .bp-bar .bp-viz .fill{
    position:absolute; top:0; bottom:0; left:0;
    background: linear-gradient(90deg, var(--brand), var(--accent));
    border-radius:5px;
  }

  /* Spec annotation for placeholders */
  .dim-anno{
    position:absolute; top:14px; right:14px;
    background:var(--ink); color:#fff;
    font-family:ui-monospace, Menlo, monospace; font-size:10.5px; font-weight:600;
    padding:4px 9px; border-radius:6px;
    letter-spacing:.3px;
    z-index:3;
  }

  /* WP block hint */
  .wp-hint{
    display:inline-flex; align-items:center; gap:6px;
    font-family:ui-monospace, Menlo, monospace; font-size:10.5px;
    background:#1E40AF; color:#fff;
    padding:3px 8px; border-radius:5px;
    text-transform:none; letter-spacing:0; font-weight:500;
    margin-left:8px;
  }
  .wp-hint::before{ content:"WP"; font-weight:800; opacity:.6 }

  /* ================================================================ */
  /*   SINGLE ARTICLE TEMPLATE                                         */
  /* ================================================================ */
  .article-hero{
    padding:40px 40px 40px;
    background: var(--paper);
    border-bottom:1px solid var(--line);
  }
  .article-hero .wrap{ max-width:820px; margin:0 auto }
  .article-hero .meta{
    display:flex; gap:14px; align-items:center; flex-wrap:wrap;
    font-size:12.5px; color:var(--ink-3); margin-bottom:14px;
  }
  .article-hero .cat-pill{
    background:var(--accent-soft); color:var(--accent-2);
    padding:5px 10px; border-radius:999px;
    font-size:11.5px; font-weight:700;
    text-transform:uppercase; letter-spacing:1px;
  }
  .article-hero h1{
    font-family:"Space Grotesk", -apple-system, BlinkMacSystemFont, sans-serif; font-weight:700;
    font-size:52px; color:var(--ink); letter-spacing:-1.2px; line-height:1.05;
    margin:10px 0 20px;
  }
  .article-hero .chapo{
    font-size:19px; line-height:1.55; color:var(--ink-2); margin:0 0 24px;
    font-weight:500;
  }
  .article-hero .author-row{
    display:flex; align-items:center; gap:14px;
    padding-top:18px; border-top:1px solid var(--line);
    font-size:13px; color:var(--ink-3);
  }
  .article-hero .author-av{
    width:40px; height:40px; border-radius:50%;
    background:var(--wf); border:1px dashed var(--wf-line);
  }
  .article-hero .author-row b{ color:var(--ink); font-size:13.5px; display:block }
  .article-hero .share{
    margin-left:auto; display:flex; gap:8px;
  }
  .article-hero .share a{
    width:36px; height:36px; border-radius:50%;
    border:1px solid var(--line-2); display:flex; align-items:center; justify-content:center;
    color:var(--ink-3); font-size:13px; cursor:pointer;
  }
  .article-hero .share a:hover{ border-color:var(--brand); color:var(--brand) }

  .article-cover{
    max-width:1180px; margin:0 auto; padding:0 40px;
  }
  .article-cover .ph{
    background:var(--wf); border:1px dashed var(--wf-line);
    border-radius:24px; aspect-ratio: 16/8; position:relative;
    margin-top:-30px;
    display:flex; align-items:center; justify-content:center;
    color:var(--ink-3); font-size:12px;
  }

  .article-body{
    display:grid; grid-template-columns: 240px 1fr;
    max-width:1180px; margin:0 auto; padding:60px 40px;
    gap:60px; align-items:start;
  }
  .article-toc{
    position:sticky;
    top:102px;        /* var(--header-h) + 20px — valeur explicite pour bulletproof */
    align-self:start;
    height:fit-content;
    max-height:calc(100vh - 120px);
    overflow-y:auto;
  }
  .article-toc .toc-title{
    font-size:11px; font-weight:700; color:var(--ink-3);
    text-transform:uppercase; letter-spacing:1.4px;
    margin-bottom:14px;
  }
  .article-toc ol{
    list-style:none; padding:0; margin:0;
    border-left:2px solid var(--line);
  }
  .article-toc li{
    padding:7px 0 7px 14px; font-size:13px; color:var(--ink-2);
    cursor:pointer; margin-left:-2px; border-left:2px solid transparent;
  }
  .article-toc li.on{
    border-left-color:var(--accent); color:var(--brand); font-weight:600;
  }
  .article-toc li:hover{ color:var(--brand) }

  .article-prose{
    max-width:720px; font-size:17px; line-height:1.75; color:var(--ink-2);
  }
  .article-prose h2{
    font-family:"Space Grotesk", -apple-system, BlinkMacSystemFont, sans-serif; font-weight:700;
    font-size:32px; color:var(--brand); letter-spacing:-.5px; line-height:1.1;
    margin:44px 0 16px;
  }
  .article-prose h2:first-child{ margin-top:0 }
  .article-prose h3{
    font-family:"Space Grotesk", -apple-system, BlinkMacSystemFont, sans-serif; font-weight:700; font-size:22px;
    color:var(--ink); letter-spacing:-.3px; margin:28px 0 12px;
  }
  .article-prose p{ margin:0 0 18px }
  .article-prose ul, .article-prose ol{ margin: 0 0 20px; padding-left:24px; line-height:1.7 }
  .article-prose ul li, .article-prose ol li{ margin-bottom:6px }
  .article-prose strong{ color:var(--ink); font-weight:700 }
  .article-prose em{ color:var(--brand); font-style:italic; font-weight:600 }
  .article-prose blockquote{
    margin:28px 0; padding:24px 28px;
    background:var(--paper-2); border-left:3px solid var(--accent);
    border-radius:0 14px 14px 0;
    font-style:italic; color:var(--ink); font-size:18px; line-height:1.6;
  }
  .article-prose .inline-img{
    background:var(--wf); border:1px dashed var(--wf-line);
    border-radius:18px; aspect-ratio: 16/9;
    margin: 28px 0; position:relative;
    display:flex; align-items:center; justify-content:center;
    color:var(--ink-3); font-size:12px;
  }
  .article-prose .caption{
    font-size:13px; color:var(--ink-3); font-style:italic;
    text-align:center; margin:-14px 0 24px;
  }

  .article-cta-inline{
    background:var(--brand); color:#fff;
    border-radius:18px; padding:28px;
    margin: 36px 0;
    display:flex; align-items:center; gap:22px;
  }
  .article-cta-inline .ico{
    width:52px; height:52px; border-radius:14px;
    background:rgba(255,255,255,.1); color:var(--accent-warm);
    display:flex; align-items:center; justify-content:center;
    flex-shrink:0;
  }
  .article-cta-inline h4{
    margin:0 0 4px; font-size:18px; color:#fff; font-family:"Space Grotesk", -apple-system, BlinkMacSystemFont, sans-serif; font-weight:700;
  }
  .article-cta-inline p{ margin:0; font-size:13.5px; color:rgba(255,255,255,.8) }
  .article-cta-inline .btn{ margin-left:auto; flex-shrink:0 }

  .author-box{
    background:var(--paper-2); border-radius:20px; padding:28px;
    display:flex; gap:20px; align-items:center;
    margin:40px 0;
  }
  .author-box .av-lg{
    width:72px; height:72px; border-radius:50%;
    background:var(--wf); border:1px dashed var(--wf-line); flex-shrink:0;
  }
  .author-box h4{
    margin:0 0 4px; font-family:"Space Grotesk", -apple-system, BlinkMacSystemFont, sans-serif; font-size:18px; color:var(--ink); font-weight:700;
  }
  .author-box .role{ font-size:12px; color:var(--ink-3); margin-bottom:8px; font-weight:600; text-transform:uppercase; letter-spacing:1.2px }
  .author-box p{ margin:0; font-size:13.5px; color:var(--ink-2); line-height:1.6 }

  .related{
    display:grid; grid-template-columns: repeat(3, 1fr); gap:20px;
  }
  .related-card{
    background:#fff; border:1px solid var(--line); border-radius:18px;
    overflow:hidden; cursor:pointer; transition:all .15s;
  }
  .related-card:hover{ border-color:var(--brand); transform:translateY(-2px); box-shadow:var(--shadow-md) }
  .related-card .ph{
    background:var(--wf); border-bottom:1px dashed var(--wf-line);
    aspect-ratio: 16/10; position:relative;
    display:flex; align-items:center; justify-content:center;
    color:var(--ink-3); font-size:11px;
  }
  .related-card .body{ padding:16px 18px }
  .related-card .cat{
    font-size:10.5px; font-weight:700; color:var(--accent-2);
    text-transform:uppercase; letter-spacing:1.2px;
  }
  .related-card h5{
    margin:6px 0 8px; font-family:"Space Grotesk", -apple-system, BlinkMacSystemFont, sans-serif;
    font-size:16px; color:var(--ink); font-weight:700;
    line-height:1.25; letter-spacing:-.2px;
  }
  .related-card .dt{ font-size:12px; color:var(--ink-3) }

  /* ================================================================ */
  /*   COMMUNE PAGE                                                    */
  /* ================================================================ */
  .commune-hero{
    background: linear-gradient(180deg, var(--paper) 0%, var(--paper-2) 100%);
    padding:56px 40px;
    border-bottom:1px solid var(--line);
  }
  .commune-hero .wrap{
    max-width:1180px; margin:0 auto;
    display:grid; grid-template-columns:1fr 1fr; gap:50px; align-items:center;
  }
  .commune-hero h1{
    font-family:"Space Grotesk", -apple-system, BlinkMacSystemFont, sans-serif; font-weight:700;
    font-size:56px; color:var(--brand); letter-spacing:-1.4px; line-height:1.02;
    margin:12px 0 14px;
  }
  .commune-hero h1 em{ color:var(--ink); font-style:normal }
  .commune-hero .badge-row{
    display:flex; gap:10px; margin-top:26px; flex-wrap:wrap;
  }
  .info-pill{
    display:inline-flex; align-items:center; gap:8px;
    background:#fff; border:1px solid var(--line);
    padding:8px 14px; border-radius:999px;
    font-size:13px; color:var(--ink-2); font-weight:500;
  }
  .info-pill .dot{ width:7px; height:7px; border-radius:50%; background:var(--brand) }

  /* ================================================================ */
  /*   CONTACT / DEVIS PAGE                                            */
  /* ================================================================ */
  .contact-layout{
    max-width:1180px; margin:0 auto; padding:48px 40px;
    display:grid; grid-template-columns: 1.6fr 1fr; gap:40px; align-items:start;
  }
  .form-card{
    background:#fff; border:1px solid var(--line); border-radius:22px; padding:36px;
  }
  .stepper{
    display:flex; align-items:center; gap:10px; margin-bottom:32px;
  }
  .step-item{
    display:flex; align-items:center; gap:10px; flex:1;
  }
  .step-item .step-num{
    width:36px; height:36px; border-radius:50%;
    background:var(--paper-2); color:var(--ink-3);
    display:flex; align-items:center; justify-content:center;
    font-weight:700; font-size:14px;
    border:1px solid var(--line-2);
    flex-shrink:0;
  }
  .step-item.done .step-num{
    background:var(--brand); color:#fff; border-color:var(--brand);
  }
  .step-item.current .step-num{
    background:#fff; color:var(--brand); border:2px solid var(--brand);
  }
  .step-item .step-label{ font-size:13px; color:var(--ink-3); font-weight:600 }
  .step-item.current .step-label{ color:var(--ink) }
  .step-item.done .step-label{ color:var(--brand) }
  .step-bar{
    flex:1; height:2px; background:var(--line); margin-top:0;
  }
  .step-bar.done{ background:var(--brand) }

  .form-title{
    margin:0 0 8px; font-family:"Space Grotesk", -apple-system, BlinkMacSystemFont, sans-serif;
    font-size:28px; color:var(--brand); font-weight:700; letter-spacing:-.5px;
  }
  .form-title em{ color:var(--ink); font-style:normal }
  .form-sub{ margin:0 0 28px; font-size:14.5px; color:var(--ink-3); line-height:1.55 }

  .form-grid{ display:grid; grid-template-columns: 1fr 1fr; gap:18px; margin-bottom:22px }
  .form-grid.full{ grid-template-columns: 1fr }

  .radio-grid{ display:grid; grid-template-columns: 1fr 1fr; gap:12px }
  .radio-opt{
    background:#fff; border:1.5px solid var(--line-2); border-radius:14px;
    padding:18px 20px; cursor:pointer; transition:all .15s;
    display:flex; align-items:center; gap:14px;
  }
  .radio-opt:hover{ border-color:var(--brand) }
  .radio-opt.on{
    border-color:var(--brand); background:var(--brand-soft);
  }
  .radio-opt .r{
    width:22px; height:22px; border-radius:50%;
    border:2px solid var(--line-2); flex-shrink:0;
    display:flex; align-items:center; justify-content:center;
  }
  .radio-opt.on .r{ border-color:var(--brand) }
  .radio-opt.on .r::after{
    content:""; width:10px; height:10px; border-radius:50%; background:var(--brand);
  }
  .radio-opt .r-txt b{ display:block; font-size:14.5px; color:var(--ink); font-weight:600 }
  .radio-opt .r-txt span{ display:block; font-size:12px; color:var(--ink-3); margin-top:2px }

  .form-actions{
    display:flex; justify-content:space-between; gap:12px;
    margin-top:14px; padding-top:22px; border-top:1px solid var(--line);
  }

  .contact-aside{
    position:sticky; top:20px;
    display:flex; flex-direction:column; gap:14px;
  }
  .agency-card-sm{
    background:#fff; border:1px solid var(--line); border-radius:20px; padding:22px;
  }
  .agency-card-sm h4{
    margin:0 0 4px; font-family:"Space Grotesk", -apple-system, BlinkMacSystemFont, sans-serif; font-size:18px; color:var(--brand); font-weight:700;
  }
  .agency-card-sm .addr{ font-size:13px; color:var(--ink-2); line-height:1.55; margin-bottom:14px }
  .agency-card-sm .mini-map{
    background: repeating-linear-gradient(45deg, var(--paper-2) 0 14px, #EDE1BE 14px 28px);
    border:1px dashed var(--wf-line); border-radius:14px;
    aspect-ratio:16/10; position:relative; margin-bottom:14px;
  }
  .agency-card-sm .mini-map .pin{
    position:absolute; top:50%; left:50%;
    width:20px; height:20px; border-radius:50% 50% 50% 0;
    background:var(--accent); transform: translate(-50%, -100%) rotate(-45deg);
    border:3px solid #fff; box-shadow:0 3px 8px rgba(0,0,0,.2);
  }
  .agency-card-sm .contact-line{
    display:flex; align-items:center; gap:10px; padding:8px 0;
    font-size:13.5px; color:var(--ink-2);
    border-top:1px solid var(--line);
  }
  .agency-card-sm .contact-line:first-of-type{ border-top:0; padding-top:0 }
  .agency-card-sm .contact-line svg{ color:var(--brand) }

  .rassurance-list{
    background:var(--brand-soft); border-radius:20px; padding:22px;
  }
  .rassurance-list h4{
    margin:0 0 12px; font-family:"Space Grotesk", -apple-system, BlinkMacSystemFont, sans-serif; font-size:16px; color:var(--brand); font-weight:700;
  }
  .rassurance-list .ri{
    display:flex; align-items:flex-start; gap:10px;
    padding:10px 0; border-top:1px solid rgba(19,67,52,.1);
    font-size:13.5px; color:var(--ink-2); line-height:1.45;
  }
  .rassurance-list .ri:first-of-type{ border-top:0 }
  .rassurance-list .ri .ico{
    width:24px; height:24px; border-radius:7px;
    background:var(--brand); color:#fff;
    display:flex; align-items:center; justify-content:center;
    font-size:11px; font-weight:800; flex-shrink:0; margin-top:1px;
  }
  .rassurance-list .ri b{ color:var(--ink); display:block; margin-bottom:2px }

  /* mobile tweaks for new pages */
  @media (max-width: 768px){ .article-body{ grid-template-columns:1fr; gap:20px; padding:40px 18px } }
  @media (max-width: 768px){ .article-toc{ position:static } }
  @media (max-width: 768px){ .article-hero{ padding:28px 18px } }
  @media (max-width: 768px){ .article-hero h1{ font-size:32px } }
  @media (max-width: 768px){ .article-hero .chapo{ font-size:16px } }
  @media (max-width: 768px){ .article-cover{ padding:0 18px } }
  @media (max-width: 768px){ .article-prose{ font-size:15.5px } }
  @media (max-width: 768px){ .article-prose h2{ font-size:24px } }
  @media (max-width: 768px){ .article-prose h3{ font-size:18px } }
  @media (max-width: 768px){ .related{ grid-template-columns:1fr } }
  @media (max-width: 768px){ .article-cta-inline{ flex-direction:column; text-align:center; padding:22px } }
  @media (max-width: 768px){ .commune-hero{ padding:30px 18px } }
  @media (max-width: 768px){ .commune-hero .wrap{ grid-template-columns:1fr; gap:24px } }
  @media (max-width: 768px){ .commune-hero h1{ font-size:32px } }
  @media (max-width: 768px){ .contact-layout{ grid-template-columns:1fr; padding:28px 18px; gap:20px } }
  @media (max-width: 768px){ .form-card{ padding:22px } }
  @media (max-width: 768px){ .form-grid{ grid-template-columns:1fr } }
  @media (max-width: 768px){ .radio-grid{ grid-template-columns:1fr } }
  @media (max-width: 768px){ .stepper{ gap:6px } }
  @media (max-width: 768px){ .step-item .step-label{ display:none } }
  @media (max-width: 768px){ .contact-aside{ position:static } }
  @media (max-width: 768px){ .ds-wrap{ padding:24px 18px } }
  @media (max-width: 768px){ .ds-section{ padding:20px } }
  @media (max-width: 768px){ .ds-grid-4{ grid-template-columns:1fr 1fr } }
  @media (max-width: 768px){ .ds-grid-6{ grid-template-columns:1fr 1fr } }
  @media (max-width: 768px){ .ds-form-grid{ grid-template-columns:1fr } }
  @media (max-width: 768px){ .btn-row{ grid-template-columns:1fr 1fr } }
  @media (max-width: 768px){ .ds-space{ grid-template-columns:repeat(4, 1fr) } }
  @media (max-width: 768px){ .ds-radii{ grid-template-columns:repeat(3, 1fr) } }
  @media (max-width: 768px){ .ds-shadows{ grid-template-columns:1fr 1fr } }
  @media (max-width: 768px){ .ds-header h1{ font-size:32px } }

  /* Aides */
  .aides{
    background:var(--accent-soft);
    border:1px solid var(--line); border-radius:28px; padding:44px;
    display:grid; grid-template-columns: 1.1fr 1fr; gap:36px; align-items:center;
  }
  .aides h3{
    margin:14px 0 12px; font-family:"Space Grotesk", -apple-system, BlinkMacSystemFont, sans-serif; font-size:36px;
    color:var(--brand); font-weight:700; letter-spacing:-.6px; line-height:1.05;
  }
  .aides h3 em{ color:var(--ink); font-style:normal }
  .aides h3 .dot-o{ color:var(--accent-2); font-style:normal }
  .aides p{ margin:0 0 20px; font-size:15px; color:var(--ink-2); line-height:1.6 }
  .aides .eyebrow{ background:#fff; color:var(--accent-2) }
  .aides .eyebrow .dot{ background:var(--accent-2) }
  .aides .ph{
    background:#fff; border:1px dashed var(--wf-line); border-radius:20px;
    aspect-ratio: 4/3;
    color:var(--ink-3); display:flex; align-items:center; justify-content:center;
    font-size:12px;
  }

  /* AGENCES HUB */
  .map-big{
    background: repeating-linear-gradient(45deg, var(--paper-2) 0 14px, #EDE1BE 14px 28px);
    border:1px dashed var(--wf-line); border-radius:22px;
    position:relative; min-height:520px;
  }
  .filters{ display:flex; gap:8px; margin-bottom:22px; flex-wrap:wrap }
  .filter-btn{
    background:#fff; border:1.5px solid var(--line-2); color:var(--ink-2);
    padding:9px 16px; border-radius:999px; font-size:13px;
    font-weight:500; cursor:pointer;
  }
  .filter-btn.on{ background:var(--brand); color:#fff; border-color:var(--brand) }
  .filter-btn:hover{ border-color:var(--brand) }

  .dept-grid{ display:grid; grid-template-columns: repeat(4, 1fr); gap:18px; margin-top:30px }
  .dept-card{
    background:#fff; border:1px solid var(--line); border-radius:22px;
    padding:24px; display:flex; flex-direction:column; gap:10px;
    transition: all .15s; cursor:pointer;
  }
  .dept-card:hover{ border-color:var(--brand); transform:translateY(-2px); box-shadow: var(--shadow-md) }
  .dept-card .num{
    font-family:"Space Grotesk", -apple-system, BlinkMacSystemFont, sans-serif; font-weight:700;
    font-size:48px; color:var(--brand); letter-spacing:-2px; line-height:1;
  }
  .dept-card h4{
    margin:0; font-size:17px; color:var(--ink);
    font-family:"Space Grotesk", -apple-system, BlinkMacSystemFont, sans-serif; font-weight:700;
  }
  .dept-card .line{ font-size:13px; color:var(--ink-3); line-height:1.55 }
  .dept-card .cta{
    color:var(--accent); font-weight:700; font-size:13.5px;
    margin-top:auto; display:flex; align-items:center; gap:6px;
  }

  /* AGENCE 33 */
  .agence-hero{ background:var(--paper); padding:56px 40px; border-bottom:1px solid var(--line) }
  .agence-hero .wrap{
    max-width:1180px; margin:0 auto;
    display:grid; grid-template-columns:1fr 1fr; gap:50px; align-items:center;
  }
  .agence-card h1{
    margin:14px 0 8px; font-family:"Space Grotesk", -apple-system, BlinkMacSystemFont, sans-serif; font-weight:700;
    font-size:52px; color:var(--brand); letter-spacing:-1.2px; line-height:1.02;
  }
  .agence-card h1 em{ color:var(--ink); font-style:normal }
  .agence-card .addr{ color:var(--ink-3); font-size:14px; line-height:1.6; margin-bottom:22px }
  .agence-card .kvs{
    display:grid; grid-template-columns: 1fr 1fr 1fr 1fr;
    gap:16px; margin-bottom:22px; padding:22px 0;
    border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  }
  .agence-card .kvs div{ font-size:11.5px; color:var(--ink-3); font-weight:500 }
  .agence-card .kvs b{
    font-family:"Space Grotesk", -apple-system, BlinkMacSystemFont, sans-serif; color:var(--brand); display:block;
    font-size:26px; font-weight:700; margin-bottom:2px; letter-spacing:-.4px;
  }
  .agence-card-map{
    background: repeating-linear-gradient(45deg, var(--paper-2) 0 14px, #EDE1BE 14px 28px);
    border:1px dashed var(--wf-line); border-radius:24px;
    aspect-ratio: 5/4; position:relative;
  }
  .agence-card-map .pin{
    position:absolute; top:50%; left:50%;
    width:24px; height:24px; border-radius:50% 50% 50% 0;
    background:var(--accent); transform: translate(-50%, -100%) rotate(-45deg);
    border:3px solid #fff; box-shadow:0 4px 10px rgba(0,0,0,.2);
  }

  .team{ display:grid; grid-template-columns: repeat(4, 1fr); gap:18px }
  .member{
    background:#fff; border:1px solid var(--line); border-radius:22px;
    padding:22px; text-align:center;
  }
  .member .av{
    width:78px;height:78px;border-radius:50%; margin:0 auto 12px;
    background:var(--wf); border:1px dashed var(--wf-line);
  }
  .member b{
    display:block; color:var(--ink); font-size:14.5px; margin-bottom:2px; font-weight:700;
  }
  .member span{ color:var(--ink-3); font-size:12.5px }

  .communes{
    background:#fff; border:1px solid var(--line); border-radius:22px; padding:32px;
  }
  .communes h3{
    margin:0 0 8px; color:var(--brand); font-family:"Space Grotesk", -apple-system, BlinkMacSystemFont, sans-serif;
    font-size:28px; font-weight:700; letter-spacing:-.5px;
  }
  .communes p.sub{ margin:0 0 20px; color:var(--ink-3); font-size:14px; line-height:1.6 }
  .commune-list{
    display:grid; grid-template-columns: repeat(4, 1fr);
    gap:2px 22px; font-size:13.5px; color:var(--ink-2);
  }
  .commune-list a{
    padding:8px 0; border-bottom:1px solid var(--line);
    display:block; text-decoration:none; color:var(--ink-2); cursor:pointer;
  }
  .commune-list a:hover{ color:var(--brand) }

  /* Annotations */
  .anno{ position:relative }
  .anno::before{
    content: attr(data-anno);
    position:absolute; top:-11px; left:14px;
    background:var(--ink); color:#fff; font-size:10px; font-weight:600;
    padding:3px 10px; border-radius:999px;
    letter-spacing:.4px; z-index:5;
    font-family:"Inter", sans-serif; text-transform:none;
  }
  body.hide-anno .anno::before{ display:none }

  .row-2{ display:grid; grid-template-columns: 2fr 1fr; gap:22px }

  /* ============== MOBILE ============== */
  @media (max-width: 768px){ .topbar{ display:none } }
  @media (max-width: 768px){ .header{ padding:14px 18px; gap:12px } }
  @media (max-width: 768px){ .navmain{ display:none } }
  @media (max-width: 768px){ .brand{ font-size:18px } }
  @media (max-width: 768px){ .brand-logo{ height:34px } }
  @media (max-width: 768px){ .brand-suffix{ font-size:17px; padding-left:9px } }
  @media (max-width: 768px){ .brand .logo-mark{ width:32px;height:32px } }
  @media (max-width: 768px){ .header-devis{ display:none } }
  @media (max-width: 768px){
    .header-actions-m{
      margin-left:auto; display:flex; gap:8px; align-items:center;
    }
  }
  @media (max-width: 768px){
    .burger{
      width:42px;height:42px;border-radius:999px;background:var(--paper-2);
      display:flex;align-items:center;justify-content:center;color:var(--ink);
      font-weight:500; border:1px solid var(--line);
    }
  }
  @media (max-width: 768px){ .mega-demo-section{ display:none } }
  @media (max-width: 768px){ .hero{ padding:30px 18px 40px } }
  @media (max-width: 768px){ .hero .wrap{ grid-template-columns: 1fr; gap:26px } }
  @media (max-width: 768px){ h2.display{ font-size:38px } }
  @media (max-width: 768px){ .lead{ font-size:15px } }
  @media (max-width: 768px){ .hero-illus{ aspect-ratio: 4/3 } }
  @media (max-width: 768px){ .estim-bloc{ padding:20px; gap:14px } }
  @media (max-width: 768px){ .estim-bloc h4{ font-size:19px } }
  @media (max-width: 768px){ .estim-bloc .form{ width:100%; flex-direction:column; align-items:stretch } }
  @media (max-width: 768px){ .estim-bloc .btn{ width:100% } }
  @media (max-width: 768px){ section.sec{ padding:50px 18px } }
  @media (max-width: 768px){ section.sec h3.title{ font-size:32px } }
  @media (max-width: 768px){ .services{ grid-template-columns:1fr 1fr; gap:10px } }
  @media (max-width: 768px){ .service-card{ min-height:200px; padding:16px; border-radius:18px } }
  @media (max-width: 768px){ .proof{ grid-template-columns:1fr; gap:10px } }
  @media (max-width: 768px){ .reals{ grid-template-columns:1fr; grid-template-rows:auto; gap:10px } }
  @media (max-width: 768px){ .real{ min-height:200px; border-radius:18px } }
  @media (max-width: 768px){ .real.big{ grid-row:auto } }
  @media (max-width: 768px){ .simu{ grid-template-columns:1fr; padding:28px } }
  @media (max-width: 768px){ .simu h3{ font-size:28px } }
  @media (max-width: 768px){ .agences-block{ grid-template-columns:1fr } }
  @media (max-width: 768px){ .footer{ padding:44px 18px 20px } }
  @media (max-width: 768px){ .footer .wrap{ grid-template-columns: 1fr 1fr; gap:24px } }
  @media (max-width: 768px){ .pagehead{ padding:36px 18px } }
  @media (max-width: 768px){ .pagehead h1{ font-size:38px } }
  @media (max-width: 768px){ .pillars{ grid-template-columns:1fr } }
  @media (max-width: 768px){ .pillar{ grid-template-columns:1fr; padding:20px; border-radius:18px } }
  @media (max-width: 768px){ .pillar-hero{ padding:32px 18px } }
  @media (max-width: 768px){ .pillar-hero .wrap{ grid-template-columns:1fr; gap:28px } }
  @media (max-width: 768px){ .pillar-hero h1{ font-size:36px } }
  @media (max-width: 768px){ .pillar-hero .metrics{ flex-wrap:wrap; gap:22px } }
  @media (max-width: 768px){ .segments{ grid-template-columns:1fr; gap:10px } }
  @media (max-width: 768px){ .steps{ grid-template-columns:1fr 1fr; gap:10px } }
  @media (max-width: 768px){ .insulants{ grid-template-columns:1fr 1fr; gap:10px } }
  @media (max-width: 768px){ .aides{ grid-template-columns:1fr; padding:24px } }
  @media (max-width: 768px){ .aides h3{ font-size:26px } }
  @media (max-width: 768px){ .map-big{ min-height:300px } }
  @media (max-width: 768px){ .dept-grid{ grid-template-columns: 1fr 1fr; gap:10px } }
  @media (max-width: 768px){ .team{ grid-template-columns: 1fr 1fr; gap:10px } }
  @media (max-width: 768px){ .commune-list{ grid-template-columns: 1fr 1fr } }
  @media (max-width: 768px){ .crumbs{ padding:12px 18px } }
  @media (max-width: 768px){ .agence-hero{ padding:26px 18px } }
  @media (max-width: 768px){ .agence-hero .wrap{ grid-template-columns:1fr; gap:20px } }
  @media (max-width: 768px){ .agence-card h1{ font-size:32px } }
  @media (max-width: 768px){ .row-2{ grid-template-columns:1fr } }
  @media (max-width: 768px){ .trust-strip{ flex-direction:column; gap:10px; align-items:flex-start } }
  @media (max-width: 768px){ .press-logo{ font-size:16px } }

  /* (.sidebar::-webkit-scrollbar — supprimé, héritage maquette) */
  svg{ display:block }

  /* ============================================================ */
  /* ===      EDITORIAL OVERRIDES — style Adekwatts          === */
  /* ============================================================ */

  /* BG & couleurs de base
     (NB : on n'override plus le `body` ici — c'était un fond gris hérité des maquettes
     qui annulait le fond `var(--paper)` du thème). */
  .site{ background:var(--paper); color:var(--ink-2); letter-spacing:-.003em }

  /* Topbar (scroll-away) et header épurés */
  .topbar{
    background:transparent; padding:14px 44px 0;
    justify-content:flex-end;
  }
  .topbar-nav{
    display:flex; align-items:center; gap:26px;
    font-size:13px; color:var(--ink-2); font-weight:500;
  }
  .topbar-nav a{
    color:var(--ink-3); text-decoration:none;
    cursor:pointer; padding:6px 0;
  }
  .topbar-nav a:hover{ color:var(--ink) }

  /* Main header (sticky) — Hauteur = 80px environ (var pour référence sub-nav) */
  :root{ --header-h: 82px }
  @media (max-width: 768px){ :root{ --header-h: 68px } }
  .header{
    background:var(--paper);
    padding:14px 44px 16px;
    border-bottom:1px solid var(--line);
    position:sticky; top:0; z-index:40;
    transition: box-shadow .2s;
  }
  .header.scrolled{ box-shadow: 0 4px 20px rgba(10,10,10,.06) }
  .navmain{ gap:34px; font-size:14px; font-weight:500; color:var(--ink) }
  .navmain .nav-item{ padding:24px 0 }
  .navmain .nav-item.current{ color:var(--ink) }
  .navmain .nav-item.current::after{ background:var(--accent); height:2px; bottom:0 }
  .navmain .nav-item:hover{ color:var(--accent) }

  /* Pill CTAs — sharper (less bubbly) */
  .pill-btn{
    border-radius:999px; padding:11px 20px;
    font-size:12.5px; font-weight:600; letter-spacing:.3px;
    border-width:1px;
  }
  .pill-btn.outline{ border-color:var(--ink); color:var(--ink) }
  .pill-btn.outline:hover{ background:var(--ink); color:#fff }
  .pill-btn.dark{ background:var(--ink); color:#fff; padding-right:6px }
  .pill-btn .av{ background:var(--accent); border:0 }

  .header-devis{
    background:var(--accent); color:#fff;
    padding:11px 18px; border-radius:999px;
    font-size:12.5px; font-weight:600;
    white-space:nowrap;
    line-height:1.2;
  }
  .header-devis:hover{ background:var(--accent-2) }

  /* Logo — taille confortable */
  .brand-logo{ height:52px }

  /* Brand mark (fallback) — monochrome noir */
  .brand .logo-mark{ background:var(--ink); border-radius:6px }
  .brand .logo-mark::after{ background:#fff }
  .brand span.amp{ color:var(--accent); font-style:normal }
  .brand{ color:var(--ink) }

  /* Eyebrows — plus Adekwatts : simple label souligné, pas de pill */
  .eyebrow{
    background:transparent !important; padding:0 !important;
    border-radius:0; color:var(--ink-3);
    font-size:11px; font-weight:700; letter-spacing:2.5px;
    text-transform:uppercase; gap:10px;
    padding-bottom:6px !important;
    border-bottom:1px solid var(--line-2) !important;
  }
  .eyebrow .dot{
    width:6px; height:6px; background:var(--accent);
    border-radius:50%;
  }

  /* Typography — plus éditoriale */
  h2.display{
    font-family:"Space Grotesk", -apple-system, BlinkMacSystemFont, sans-serif;
    font-weight:800; font-size:70px; line-height:1;
    letter-spacing:-1.8px; color:var(--ink);
    margin:24px 0 24px;
  }
  h2.display em{ color:var(--ink); font-style:italic; font-weight:700 }
  h2.display .dot-o{ color:var(--accent); font-style:normal }

  section.sec h3.title{
    font-family:"Space Grotesk", -apple-system, BlinkMacSystemFont, sans-serif;
    font-weight:800; font-size:58px; line-height:1;
    letter-spacing:-1.4px; color:var(--ink); margin:16px 0 18px;
  }
  section.sec h3.title em{ color:var(--ink); font-style:italic; font-weight:700 }
  section.sec h3.title .dot-o{ color:var(--accent); font-style:normal }
  section.sec p.sub{ color:var(--ink-2); font-size:16.5px; font-weight:400 }
  section.sec .head{ max-width:760px }

  .pagehead h1{
    font-family:"Space Grotesk", -apple-system, BlinkMacSystemFont, sans-serif;
    font-weight:800; font-size:70px; line-height:1;
    letter-spacing:-2px;
  }
  .pagehead h1 em{ font-style:italic; color:var(--ink) }
  .pagehead h1 .dot-o{ color:var(--accent); font-style:normal }
  .pagehead{ background:#fff; padding:70px 44px 56px; border-bottom:1px solid var(--line) }
  .pagehead p{ font-size:17px; color:var(--ink-2); max-width:700px }

  .pillar-hero h1{
    font-family:"Space Grotesk", -apple-system, BlinkMacSystemFont, sans-serif;
    font-weight:800; font-size:66px; letter-spacing:-1.8px; line-height:1;
  }
  .pillar-hero h1 em{ font-style:italic; color:var(--ink) }
  .pillar-hero{ background:#fff; border-bottom:1px solid var(--line) }

  .agence-card h1{
    font-family:"Space Grotesk", -apple-system, BlinkMacSystemFont, sans-serif;
    font-weight:800; font-size:60px; letter-spacing:-1.6px;
  }
  .agence-hero{ background:#fff; border-bottom:1px solid var(--line) }

  .commune-hero{ background:#fff; border-bottom:1px solid var(--line) }
  .commune-hero h1{
    font-family:"Space Grotesk", -apple-system, BlinkMacSystemFont, sans-serif;
    font-weight:800; font-size:66px; letter-spacing:-1.8px;
  }

  .article-hero h1{
    font-family:"Space Grotesk", -apple-system, BlinkMacSystemFont, sans-serif;
    font-weight:800; font-size:60px; letter-spacing:-1.6px; line-height:1;
  }

  /* Hero bg — plus de gradients amber */
  .hero{
    background:#fff;
    padding:70px 44px 90px;
    border-bottom:1px solid var(--line);
  }
  .hero .lead{ font-size:17px; color:var(--ink-2); max-width:500px }
  .lead b{ color:var(--ink); font-weight:600 }

  /* Hero illustration — remplacée par une grosse photo "noir et blanc" sobre */
  .hero-illus{
    background:var(--wf);
    border:1px solid var(--line);
    border-radius:var(--radius);
    aspect-ratio: 4/5;
  }
  .hero-illus .leaf, .hero-illus .house, .hero-illus .sun, .hero-illus .circle-text{ display:none }
  .hero-illus .tag{
    background:#fff; border:1px solid var(--line);
    border-radius:4px; color:var(--ink);
    font-size:11px; font-weight:600;
  }

  /* Chip sélecteur département — sharper */
  .chip{
    border-radius:4px; padding:8px 14px;
    border-width:1px; font-weight:500;
    background:#fff; border-color:var(--line-2);
  }
  .chip:hover{ border-color:var(--ink); color:var(--ink) }
  .chip.on{ background:var(--ink); border-color:var(--ink); color:#fff }

  /* Bloc estimation inline — sharper */
  .estim-bloc{
    border-radius:var(--radius); border:1px solid var(--line);
    box-shadow:none; padding:24px 28px; background:#fff;
  }
  .estim-bloc h4{
    font-family:"Space Grotesk", -apple-system, BlinkMacSystemFont, sans-serif;
    font-weight:800; font-size:26px; letter-spacing:-.5px;
  }
  .estim-bloc .checks .ck{ background:var(--ink); color:#fff; border-radius:50% }
  .estim-bloc .input{
    border-color:var(--line-2); border-radius:4px;
  }

  /* Trust strip / press logos */
  .trust-strip{
    border-top:1px solid var(--line); padding-top:34px; gap:48px;
    justify-content:center;
  }
  .press-logo{ font-family:"Space Grotesk", -apple-system, BlinkMacSystemFont, sans-serif; color:var(--ink-3); opacity:.8 }
  .badge-chip{ gap:10px; font-size:12.5px; font-weight:500 }
  .badge-chip .sq{
    background:transparent; color:var(--ink-3);
    border:1px solid var(--line-2); border-radius:4px;
  }

  /* Sections : alternance white / off-white très subtile */
  section.sec{ padding:100px 44px }
  section.sec.sec-cream{ background:var(--paper-2) }
  section.sec.tight{ padding:64px 44px }

  /* Section "verte" — vert foncé ISO&FACE (au lieu de noir) */
  section.sec.sec-green{
    background:var(--brand-2); color:#fff;
  }
  section.sec.sec-green h3.title,
  section.sec.sec-green h3.title em{ color:#fff }
  section.sec.sec-green h3.title .dot-o{ color:var(--accent) }
  section.sec.sec-green p.sub{ color:rgba(255,255,255,.7) }
  section.sec.sec-green .eyebrow{
    border-color:rgba(255,255,255,.2) !important; color:rgba(255,255,255,.6);
  }
  section.sec.sec-green .eyebrow .dot{ background:var(--accent) }
  section.sec.sec-green .btn.ghost{
    background:transparent; color:#fff; border-color:rgba(255,255,255,.3);
  }

  /* Services cards — flat, sharp */
  .services{ gap:1px; background:var(--line); border:1px solid var(--line) }
  .service-card{
    border-radius:0; border:0; padding:32px; min-height:260px;
    background:#fff; transition: background .15s;
  }
  .service-card:hover{
    transform:none; box-shadow:none; background:var(--paper-2);
  }
  .service-card .icon-wrap{
    background:transparent; width:auto; height:auto;
    font-family:"Space Grotesk", -apple-system, BlinkMacSystemFont, sans-serif;
    font-weight:800; font-size:14px;
    letter-spacing:1.5px; text-transform:uppercase;
    color:var(--accent);
    margin-bottom:16px;
  }
  .service-card h4{
    font-family:"Space Grotesk", -apple-system, BlinkMacSystemFont, sans-serif;
    font-size:26px; font-weight:800; letter-spacing:-.5px;
    line-height:1.05; margin:6px 0 10px;
  }
  .service-card p{ font-size:14.5px; line-height:1.55; color:var(--ink-3) }
  .service-card .arrow{
    color:var(--ink); font-weight:600; font-size:13px;
    text-transform:uppercase; letter-spacing:1.5px;
  }

  /* ============================================================ */
  /* ===   Pillars — nouvelle mise en page éditoriale        === */
  /* ===   (lignes alternées au lieu de 2×2 grid)            === */
  /* ============================================================ */
  .pillars{
    display:flex; flex-direction:column; gap:0;
    background:transparent; border:0;
    counter-reset: pillar-counter;
  }
  .pillar{
    background:transparent; border:0; padding:64px 0;
    border-bottom:1px solid var(--line);
    grid-template-columns: 1fr 1fr;
    gap:60px; align-items:center;
    counter-increment: pillar-counter;
    position:relative;
    transition: background .2s;
  }
  .pillar:first-child{ padding-top:24px }
  .pillar:last-child{ border-bottom:0 }
  .pillar:hover{ background:transparent; box-shadow:none }
  /* Ligne paire : photo à droite */
  .pillar:nth-child(even){
    direction: rtl;
  }
  .pillar:nth-child(even) > *{ direction: ltr }

  /* Eyebrow redondant avec le compteur — on cache */
  .pillar .txt > .eyebrow{ display:none }
  /* Le numéro géant en watermark */
  .pillar .txt::before{
    content: "0" counter(pillar-counter);
    display:block;
    font-family:"Space Grotesk", sans-serif;
    font-size:22px; font-weight:700;
    color:var(--accent); letter-spacing:-.3px;
    margin-bottom:14px;
    border-bottom:1px solid var(--line);
    padding-bottom:14px;
    width:fit-content; min-width:80px;
  }
  .pillar .txt h3{
    font-family:"Space Grotesk", -apple-system, BlinkMacSystemFont, sans-serif;
    font-size:48px; font-weight:800; letter-spacing:-1.2px; line-height:1;
    margin-top:8px; margin-bottom:14px;
  }
  .pillar .txt h3 em{ font-style:italic; color:var(--ink); font-weight:800 }
  .pillar .txt .tags{ display:flex; gap:6px; flex-wrap:wrap; margin-bottom:16px }
  .pillar .txt .tags span{
    background:transparent; border:1px solid var(--line-2);
    color:var(--ink-3);
    text-transform:uppercase; letter-spacing:1.2px;
    font-size:10px; padding:4px 10px; border-radius:999px;
    font-weight:600;
  }
  .pillar .txt p{
    font-size:16px; color:var(--ink-2); line-height:1.6;
    max-width:520px;
  }
  .pillar .txt ul{
    margin:14px 0 22px; padding-left:0; list-style:none;
    display:grid; grid-template-columns:1fr 1fr; gap:6px 16px;
    max-width:520px;
  }
  .pillar .txt ul li{
    font-size:13.5px; color:var(--ink-2);
    padding-left:18px; position:relative;
  }
  .pillar .txt ul li::before{
    content:""; position:absolute; left:0; top:8px;
    width:8px; height:8px; background:var(--accent); border-radius:50%;
  }
  .pillar .txt .btn{ margin-top:6px }

  /* Photo : grande, plus immersive */
  .pillar .ph{
    border-radius:var(--radius-xl); background:var(--wf); border:1px solid var(--line);
    aspect-ratio: 4/5; min-height:420px;
    position:relative; overflow:clip;
    display:flex; align-items:flex-end; justify-content:flex-start;
    color:var(--ink-3); font-size:12px; padding:0;
  }
  .pillar .ph::after{
    content:""; position:absolute; inset:0;
    background:linear-gradient(180deg, transparent 60%, rgba(0,0,0,.15) 100%);
    pointer-events:none;
  }
  .pillar .ph > *{
    position:relative; z-index:1; padding:18px 22px;
    background:rgba(255,255,255,.92); margin:14px;
    border-radius:8px; font-size:11.5px; color:var(--ink); font-weight:600;
    border:1px solid var(--line);
  }
  /* Mobile : 1 col, photo au-dessus */
  @media (max-width: 768px){
    .pillar{
      grid-template-columns:1fr; gap:24px; padding:36px 0;
    }
  }
  @media (max-width: 768px){ .pillar:nth-child(even){ direction:ltr } }
  @media (max-width: 768px){ .pillar .txt h3{ font-size:30px; letter-spacing:-.8px } }
  @media (max-width: 768px){ .pillar .ph{ aspect-ratio:4/3; min-height:240px } }
  @media (max-width: 768px){ .pillar .txt ul{ grid-template-columns:1fr } }

  /* Buttons — sharper, less bubbly */
  .btn{
    border-radius:999px; padding:15px 26px; font-size:13.5px;
    font-weight:600; letter-spacing:.2px;
  }
  .btn.primary{ background:var(--ink); color:#fff }
  .btn.primary:hover{ background:#000 }
  .btn.accent{ background:var(--accent); color:#fff }
  .btn.accent:hover{ background:var(--accent-2) }
  .btn.ghost{ background:transparent; color:var(--ink); border-color:var(--ink) }
  .btn.ghost:hover{ background:var(--ink); color:#fff; border-color:var(--ink) }
  .btn.arrow-end::after{ background-color:#fff }

  /* Simulateur — vert foncé ISO&FACE */
  .simu{
    background:var(--brand-2); color:#fff; border-radius:var(--radius-xl); padding:56px;
  }
  .simu::before{ display:none }
  .simu h3{
    font-family:"Space Grotesk", -apple-system, BlinkMacSystemFont, sans-serif;
    font-size:44px; font-weight:800; letter-spacing:-.8px; line-height:1.02;
  }
  .simu h3 em{ color:var(--accent); font-style:italic }
  .simu .eyebrow{ border-color:rgba(255,255,255,.2) !important; color:rgba(255,255,255,.6) }
  .simu .eyebrow .dot{ background:var(--accent) }
  .simu p{ color:rgba(255,255,255,.7) }
  .simu-form{ border-radius:var(--radius) }
  .simu-form .field{ border-radius:4px }

  /* Reals / portfolio — sharper */
  .real{ border-radius:0; border:1px solid var(--line); background:var(--wf) }
  .real .lab{ border-radius:0; border-color:var(--line) }

  /* Proof / avis cards */
  .proof{ gap:0; background:var(--line); border:1px solid var(--line) }
  .proof .card{ border-radius:0; border:0; padding:30px; background:#fff }
  .proof .card .stars{ color:var(--accent) }
  .proof .card p{ font-family:"Space Grotesk", -apple-system, BlinkMacSystemFont, sans-serif; font-style:italic; font-size:17px; font-weight:500; color:var(--ink) }

  /* Map & agences list */
  .map, .map-big{
    background:
      linear-gradient(rgba(0,0,0,.02), rgba(0,0,0,.02)),
      repeating-linear-gradient(45deg, #F5F5F5 0 14px, #FAFAFA 14px 28px);
    border-radius:0; border:1px solid var(--line);
  }
  .map .pin, .map-big .pin{
    background:var(--ink);
  }
  .map .pin.on, .map-big .pin.on{ background:var(--accent) }
  .map .label, .map-big .label{
    border-radius:3px; font-weight:600;
  }
  .agency-list{
    border-radius:var(--radius); border-color:var(--line);
  }
  .agency-row{ border-color:var(--line) }
  .agency-row .pill-n{
    background:transparent; color:var(--ink-3);
    padding:0; font-weight:500; text-transform:uppercase; letter-spacing:1px; font-size:10.5px;
  }
  .agency-row .dep{ font-family:"Space Grotesk", -apple-system, BlinkMacSystemFont, sans-serif; font-weight:700 }

  /* Dept grid */
  .dept-grid{ gap:1px; background:var(--line); border:1px solid var(--line) }
  .dept-card{
    border-radius:0; border:0; padding:32px; background:#fff;
    min-height:180px;
  }
  .dept-card:hover{ box-shadow:none; transform:none; background:var(--paper-2) }
  .dept-card .num{
    font-family:"Space Grotesk", -apple-system, BlinkMacSystemFont, sans-serif; font-weight:800;
    font-size:72px; letter-spacing:-3px; color:var(--ink);
  }
  .dept-card h4{
    font-family:"Space Grotesk", -apple-system, BlinkMacSystemFont, sans-serif; font-size:20px; font-weight:800;
  }
  .dept-card .cta{
    color:var(--ink); text-transform:uppercase; letter-spacing:1.5px; font-size:11.5px;
  }

  /* Team cards */
  .team{ gap:0; background:var(--line); border:1px solid var(--line) }
  .member{
    border-radius:0; border:0; padding:28px; background:#fff;
  }
  .member .av{ border-color:var(--line) }
  .member b{ font-family:"Space Grotesk", -apple-system, BlinkMacSystemFont, sans-serif; font-size:16px; letter-spacing:-.3px }

  /* Communes list */
  .communes{
    border-radius:var(--radius); border-color:var(--line);
  }
  .communes h3{
    font-family:"Space Grotesk", -apple-system, BlinkMacSystemFont, sans-serif;
    font-size:32px; font-weight:800; letter-spacing:-.6px;
  }
  .commune-list a{ border-color:var(--line) }

  /* Filter buttons */
  .filter-btn{ border-radius:4px; border-color:var(--line-2); font-weight:500 }
  .filter-btn.on{ background:var(--ink); border-color:var(--ink) }

  /* Aides bloc */
  .aides{
    background:var(--accent-soft); border-color:#FCD7B5; border-radius:var(--radius-xl);
    padding:44px;
  }
  .aides h3{
    font-family:"Space Grotesk", -apple-system, BlinkMacSystemFont, sans-serif;
    font-size:40px; font-weight:800; letter-spacing:-.8px; color:var(--ink);
  }
  .aides h3 em{ font-style:italic; color:var(--ink) }
  .aides h3 .dot-o{ color:var(--accent) }
  .aides p{ color:var(--ink-2) }
  .aides .eyebrow{ border-color:rgba(0,0,0,.1) !important; color:var(--accent-2) }
  .aides .ph{ border-radius:var(--radius); background:#fff; border-color:var(--line) }

  /* Pillar hero metrics */
  .pillar-hero .metrics{ border-color:var(--line); gap:48px }
  .pillar-hero .metrics div b{
    font-family:"Space Grotesk", -apple-system, BlinkMacSystemFont, sans-serif; font-size:48px; color:var(--ink);
    letter-spacing:-1.5px; line-height:1;
  }
  .pillar-hero .metrics div span{ color:var(--ink-3) }

  /* Steps */
  .steps{ gap:0; background:var(--line); border:1px solid var(--line) }
  .step{
    border-radius:0; border:0; padding:28px; background:#fff;
  }
  .step .n{
    font-family:"Space Grotesk", -apple-system, BlinkMacSystemFont, sans-serif; font-size:52px; font-weight:800;
    color:var(--ink); letter-spacing:-2px;
  }
  .step b{ font-family:"Space Grotesk", -apple-system, BlinkMacSystemFont, sans-serif; font-size:16px; letter-spacing:-.3px }

  /* Insulants */
  .insulants{ gap:0; background:var(--line); border:1px solid var(--line) }
  .insulant{ border-radius:0; border:0; padding:18px; background:#fff }
  .insulant .ph{ border-color:var(--line); background:var(--wf) }
  .insulant b{ font-family:"Space Grotesk", -apple-system, BlinkMacSystemFont, sans-serif; font-size:15px; letter-spacing:-.2px }

  /* Segments */
  .segments{ gap:0; background:var(--line); border:1px solid var(--line) }
  .segment{
    border-radius:0; border:0; padding:32px; background:#fff;
  }
  .segment:hover{ border:0; background:var(--paper-2) }
  .segment h4{
    font-family:"Space Grotesk", -apple-system, BlinkMacSystemFont, sans-serif; font-size:24px; font-weight:800;
    letter-spacing:-.4px; color:var(--ink);
  }
  .segment .ph{ border-radius:0; border-color:var(--line); background:var(--wf) }
  .segment .ln{
    color:var(--ink); text-transform:uppercase; letter-spacing:1.5px; font-size:11.5px;
  }

  /* FAQ */
  .faq-row{
    border-radius:0; border-bottom:1px solid var(--line); border-left:0; border-right:0; border-top:0;
    padding:24px 0;
  }
  .faq-row:first-child{ border-top:1px solid var(--line) }
  .faq-row:hover{ border-color:var(--line) }
  .faq-row span{ font-family:"Space Grotesk", -apple-system, BlinkMacSystemFont, sans-serif; font-size:18px; font-weight:700; letter-spacing:-.3px }
  .faq-row.open{
    background:transparent; padding:24px 0;
  }
  .faq-row.open .faq-q span{ font-family:"Space Grotesk", -apple-system, BlinkMacSystemFont, sans-serif; font-size:18px }
  .faq-row.open .faq-a{
    border-top:1px solid var(--line); padding-top:18px;
  }

  /* SEO block */
  .seo-block > h3{
    font-family:"Space Grotesk", -apple-system, BlinkMacSystemFont, sans-serif;
    font-size:42px; font-weight:800; letter-spacing:-.8px;
  }
  .seo-block h4{
    font-family:"Space Grotesk", -apple-system, BlinkMacSystemFont, sans-serif; font-weight:800; font-size:24px; letter-spacing:-.4px;
  }
  .seo-block strong{ color:var(--ink) }
  .seo-block em{ color:var(--ink); font-style:italic; font-weight:700 }
  .seo-block blockquote{
    background:transparent; border-left:2px solid var(--accent);
    border-radius:0; padding:8px 0 8px 24px;
    font-family:"Space Grotesk", -apple-system, BlinkMacSystemFont, sans-serif; font-style:italic; font-size:22px;
    line-height:1.4;
  }
  .word-count{
    background:transparent; border:1px solid var(--ink); color:var(--ink);
    border-radius:4px;
  }

  /* Mega menu — largeur adaptive au contenu */
  .mega-wrap{
    border-radius:var(--radius); border-color:var(--line);
    box-shadow: var(--shadow-md);
    width:max-content; max-width:calc(100% - 40px);
  }
  .mega{
    grid-template-columns: 220px auto;
  }
  .mega-cols{
    grid-template-columns: repeat(4, 200px);
    gap: 14px 24px;
  }
  /* Variante compacte pour dropdowns simples (Réalisations) */
  .mega-wrap.mega-compact{
    padding:14px;
  }
  .mega-wrap.mega-compact .mega{
    display:block;
    grid-template-columns: none;
  }
  .mega-wrap.mega-compact .mega-cols{
    grid-template-columns:260px;
  }
  .mega-wrap.mega-compact .real-preview{
    margin-bottom:14px; padding-bottom:14px;
    border-bottom:1px solid var(--line);
  }
  .mega-wrap.mega-compact .real-preview .pv-label{
    display:block;
    font-size:10.5px; font-weight:700; letter-spacing:1.5px;
    text-transform:uppercase; color:var(--accent);
    margin-bottom:8px;
  }
  .mega-wrap.mega-compact .real-preview .pv-photo{
    background:var(--wf); border:1px dashed var(--wf-line);
    aspect-ratio: 16/10; border-radius:8px;
    display:flex; align-items:center; justify-content:center;
    color:var(--ink-3); font-size:11px;
    margin-bottom:10px;
  }
  .mega-wrap.mega-compact .real-preview .pv-info{
    display:flex; flex-direction:column; gap:2px;
  }
  .mega-wrap.mega-compact .real-preview .pv-info b{
    font-family:"Space Grotesk", sans-serif;
    font-size:14.5px; color:var(--ink); font-weight:700;
    letter-spacing:-.2px;
  }
  .mega-wrap.mega-compact .real-preview .pv-info span{
    font-size:12.5px; color:var(--ink-3); line-height:1.4;
  }
  .mega-wrap.mega-compact .real-preview .pv-info .pv-meta{
    font-size:11.5px; color:var(--ink-4);
    font-style:italic; margin-top:2px;
  }
  .mega-cols .col h5{
    font-family:"Space Grotesk", sans-serif;
    color:var(--ink); font-size:14px; font-weight:700;
    text-transform:none; letter-spacing:-.3px;
    border-bottom:1px solid var(--line);
    padding-bottom:10px; margin-bottom:8px;
    cursor:pointer;
    display:flex; align-items:center; justify-content:space-between;
    gap:8px;
  }
  .mega-cols .col h5.linked::after{
    content:"→"; color:var(--accent); font-weight:700;
    opacity:0; transition: opacity .15s, transform .15s;
    transform: translateX(-4px);
  }
  .mega-cols .col h5.linked:hover{ color:var(--brand) }
  .mega-cols .col h5.linked:hover::after{ opacity:1; transform:translateX(0) }
  .mega-cols .col a{ padding:5px 0; font-size:13px }
  .mega-cols .col a b{ font-weight:700; color:var(--ink) }
  .mega-cols .col a.sub-link{
    font-size:12px; color:var(--ink-3);
    padding-top:8px; border-top:1px dashed var(--line);
    margin-top:4px; font-style:italic;
  }
  .mega-cols .col a.sub-link:hover{ color:var(--accent) }
  .mega-wrap::before{ display:none }
  .mega-feat-card{
    background:var(--paper-2); border-radius:var(--radius);
  }
  .mega-feat-card h4{
    font-family:"Space Grotesk", -apple-system, BlinkMacSystemFont, sans-serif; font-size:18px; letter-spacing:-.3px;
    color:var(--ink);
  }
  .mega-feat-cta{
    background:var(--ink); border-radius:var(--radius);
  }
  .mega-feat-cta .arrow{ background:var(--accent); color:#fff }
  .mega-cols .col h5{ color:var(--ink-3); font-size:10.5px }
  .mega-cols .col a .icn{
    background:transparent; border:1px solid var(--line-2);
    border-radius:4px; color:var(--ink);
    font-family:"Space Grotesk", -apple-system, BlinkMacSystemFont, sans-serif;
  }
  .mega-cols .col a:hover{ color:var(--accent) }
  .mega-bottom{
    background:var(--paper-2); border-radius:var(--radius);
  }
  .mega-bottom .coin{ background:var(--accent); color:#fff }
  .mega-bottom .tx{ color:var(--ink); font-family:"Space Grotesk", -apple-system, BlinkMacSystemFont, sans-serif; font-weight:700 }
  .mega-bottom .arr{ color:var(--ink) }
  .mega-demo-section{ background:var(--paper-2); border-color:var(--line) }

  /* Crumbs */
  .crumbs{
    background:transparent; border-bottom:1px solid var(--line);
    font-size:12px; padding:18px 44px;
    text-transform:uppercase; letter-spacing:1.5px; font-weight:600;
    color:var(--ink-3);
  }
  .crumbs b{ color:var(--ink) }

  /* Footer */
  .footer{
    background:var(--ink); color:#B0B0B0;
    padding:80px 44px 32px;
  }
  .footer h5{
    color:#fff; font-family:"Space Grotesk", -apple-system, BlinkMacSystemFont, sans-serif;
    font-weight:700; font-size:14px; letter-spacing:-.2px;
    text-transform:none;
  }
  .footer ul{ color:#888; font-size:13px }
  .footer .brand{ color:#fff }
  .footer .brand .logo-mark::after{ background:var(--ink) }
  .footer .baseline{ color:#888 }
  .footer .cop{ border-color:rgba(255,255,255,.06); color:#666 }

  /* Article (blog) */
  .article-hero .cat-pill{
    background:transparent; border:1px solid var(--ink);
    color:var(--ink); border-radius:0; padding:4px 10px;
  }
  .article-hero h1{ font-family:"Space Grotesk", -apple-system, BlinkMacSystemFont, sans-serif; font-weight:800 }
  .article-hero .chapo{
    font-family:"Space Grotesk", -apple-system, BlinkMacSystemFont, sans-serif; font-style:italic;
    font-size:22px; font-weight:500; line-height:1.5;
  }
  .article-hero .share a{ border-radius:50%; border-color:var(--line-2) }
  .article-hero .share a:hover{ border-color:var(--ink); color:var(--ink) }
  .article-cover .ph{ border-radius:var(--radius-xl); border-color:var(--line); background:var(--wf) }
  .article-prose h2{
    font-family:"Space Grotesk", -apple-system, BlinkMacSystemFont, sans-serif;
    font-weight:800; font-size:40px; letter-spacing:-.8px;
  }
  .article-prose h3{
    font-family:"Space Grotesk", -apple-system, BlinkMacSystemFont, sans-serif; font-size:24px; font-weight:800; letter-spacing:-.4px;
  }
  .article-prose blockquote{
    background:transparent; border-left:2px solid var(--accent);
    border-radius:0; padding:12px 0 12px 28px;
    font-family:"Space Grotesk", -apple-system, BlinkMacSystemFont, sans-serif; font-size:24px; line-height:1.4;
  }
  .article-prose .inline-img{ border-radius:var(--radius); background:var(--wf); border-color:var(--line) }
  .article-cta-inline{
    background:var(--brand-2); border-radius:var(--radius);
  }
  .article-cta-inline .ico{
    background:transparent; border:1px solid rgba(255,255,255,.2);
    border-radius:var(--radius-sm); color:var(--accent);
  }
  .article-cta-inline h4{ font-family:"Space Grotesk", -apple-system, BlinkMacSystemFont, sans-serif; font-size:20px; letter-spacing:-.3px }
  .author-box{
    background:var(--paper-2); border-radius:var(--radius);
  }
  .author-box h4{ font-family:"Space Grotesk", -apple-system, BlinkMacSystemFont, sans-serif; font-size:20px; letter-spacing:-.3px }
  .author-box .role{ color:var(--ink-3) }

  .related-card{ border-radius:var(--radius-sm) }
  .related-card .ph{ border-color:var(--line); background:var(--wf) }
  .related-card h5{ font-family:"Space Grotesk", -apple-system, BlinkMacSystemFont, sans-serif; font-size:17px; font-weight:800; letter-spacing:-.3px }
  .related-card .cat{ color:var(--ink-3) }

  .article-toc .toc-title{ color:var(--ink-3) }
  .article-toc ol{ border-left:1px solid var(--line) }
  .article-toc li.on{ border-left-color:var(--accent); color:var(--ink) }

  /* Commune page hero */
  .commune-hero .info-pill{
    border-color:var(--line-2); border-radius:4px;
    font-weight:500;
  }
  .commune-hero .info-pill .dot{ background:var(--accent) }

  /* Contact / form */
  .form-card{ border-radius:var(--radius); border-color:var(--line) }
  .form-title{ font-family:"Space Grotesk", -apple-system, BlinkMacSystemFont, sans-serif; font-size:34px; font-weight:800; letter-spacing:-.6px }
  .form-title em{ font-style:italic; color:var(--ink) }
  .ds-field .input-std{ border-radius:4px; border-color:var(--line-2) }
  .ds-field .input-std.focus{ border-color:var(--ink); box-shadow: 0 0 0 3px rgba(10,10,10,.08) }
  .ds-field .input-std.filled{ background:var(--paper-2) }
  .radio-opt{
    border-radius:var(--radius-sm); border-color:var(--line-2);
  }
  .radio-opt.on{
    border-color:var(--ink); background:var(--paper-2);
  }
  .radio-opt.on .r{ border-color:var(--ink) }
  .radio-opt.on .r::after{ background:var(--ink) }
  .radio-opt .r-txt b{ font-family:"Space Grotesk", -apple-system, BlinkMacSystemFont, sans-serif; font-size:15.5px; letter-spacing:-.2px }

  .step-item .step-num{ border-radius:50% }
  .step-item.current .step-num{ border-color:var(--ink); color:var(--ink) }
  .step-item.done .step-num{ background:var(--ink); border-color:var(--ink) }
  .step-bar.done{ background:var(--ink) }

  .agency-card-sm{
    border-radius:var(--radius); border-color:var(--line);
  }
  .agency-card-sm h4{ font-family:"Space Grotesk", -apple-system, BlinkMacSystemFont, sans-serif; font-size:22px; letter-spacing:-.3px; color:var(--ink) }
  .agency-card-sm .mini-map{
    background:
      linear-gradient(rgba(0,0,0,.02), rgba(0,0,0,.02)),
      repeating-linear-gradient(45deg, #F5F5F5 0 14px, #FAFAFA 14px 28px);
    border-color:var(--line);
    border-radius:var(--radius-sm);
  }
  .agency-card-sm .mini-map .pin{ background:var(--accent) }

  .rassurance-list{ background:var(--paper-2); border-radius:var(--radius) }
  .rassurance-list h4{ font-family:"Space Grotesk", -apple-system, BlinkMacSystemFont, sans-serif; font-size:18px; letter-spacing:-.3px; color:var(--ink) }
  .rassurance-list .ri .ico{ background:var(--ink); border-radius:4px }
  .rassurance-list .ri b{ color:var(--ink) }

  /* Agence card */
  .agence-card .kvs b{ font-family:"Space Grotesk", -apple-system, BlinkMacSystemFont, sans-serif; font-size:32px; color:var(--ink); letter-spacing:-.8px }
  .agence-card-map{
    background:
      linear-gradient(rgba(0,0,0,.02), rgba(0,0,0,.02)),
      repeating-linear-gradient(45deg, #F5F5F5 0 14px, #FAFAFA 14px 28px);
    border-color:var(--line);
    border-radius:var(--radius);
  }
  .agence-card-map .pin{ background:var(--accent) }
  .agence-card .addr{ color:var(--ink-3) }

  /* Review stars */
  .review-stars .stars{ color:var(--accent) }
  .review-stars b{ color:var(--ink) }

  /* Device frame (chrome) */
  .device{ border-radius:10px }
  .device .chrome{ background:#EDEBE4 }

  /* Design System page */
  .ds-section{ border-radius:var(--radius); border-color:var(--line); padding:40px }
  .ds-section-head h2{ font-family:"Space Grotesk", -apple-system, BlinkMacSystemFont, sans-serif; font-size:28px; font-weight:800; letter-spacing:-.4px; color:var(--ink) }
  .ds-header h1{ font-family:"Space Grotesk", -apple-system, BlinkMacSystemFont, sans-serif; font-size:64px; font-weight:800; letter-spacing:-1.8px; color:var(--ink) }
  .ds-header h1 em{ font-style:italic; color:var(--ink) }
  .ds-header h1 .dot-o{ color:var(--accent) }
  .swatch{ border-radius:var(--radius-sm); border-color:var(--line) }
  .typo-display{ font-family:"Space Grotesk", -apple-system, BlinkMacSystemFont, sans-serif; color:var(--ink) }
  .typo-h1{ font-family:"Space Grotesk", -apple-system, BlinkMacSystemFont, sans-serif; color:var(--ink) }
  .typo-h2{ font-family:"Space Grotesk", -apple-system, BlinkMacSystemFont, sans-serif; color:var(--ink) }
  .typo-h3{ font-family:"Space Grotesk", -apple-system, BlinkMacSystemFont, sans-serif }
  .ds-radius-box{ background:var(--paper-2); border-color:var(--line); color:var(--ink) }

  /* Mobile tweaks */
  @media (max-width: 768px){ h2.display{ font-size:42px; letter-spacing:-1px } }
  @media (max-width: 768px){ section.sec h3.title{ font-size:32px; letter-spacing:-.6px } }
  @media (max-width: 768px){ .pagehead h1{ font-size:42px; letter-spacing:-1.2px } }
  @media (max-width: 768px){ .pillar-hero h1{ font-size:40px; letter-spacing:-1.2px } }
  @media (max-width: 768px){ .agence-card h1{ font-size:38px; letter-spacing:-1.2px } }
  @media (max-width: 768px){ .article-hero h1{ font-size:32px; letter-spacing:-.8px } }
  @media (max-width: 768px){ .commune-hero h1{ font-size:40px } }
  @media (max-width: 768px){ .ds-header h1{ font-size:36px; letter-spacing:-.8px } }
  @media (max-width: 768px){ section.sec{ padding:56px 18px } }
  @media (max-width: 768px){ .hero{ padding:36px 18px 48px } }
  @media (max-width: 768px){ .pagehead{ padding:40px 18px 32px } }
  @media (max-width: 768px){ .topbar{ display:none } }
  @media (max-width: 768px){ .header{ padding:14px 18px } }
  @media (max-width: 768px){ .crumbs{ padding:14px 18px } }
  @media (max-width: 768px){ .footer{ padding:50px 18px 24px } }

  /* ============================================================ */
  /* ===   Formulaire de contact interactif (3 étapes)       === */
  /* ============================================================ */
  .form-step{ animation: fadeIn .25s ease }
  @keyframes fadeIn { from {opacity:0; transform:translateY(8px)} to {opacity:1; transform:translateY(0)} }
  .confirm-state{
    text-align:center; padding:24px 0;
  }
  .confirm-check{
    width:80px; height:80px; border-radius:50%;
    background:var(--brand-soft); border:2px solid var(--brand);
    color:var(--brand); display:flex; align-items:center; justify-content:center;
    font-size:42px; font-weight:800;
    margin:0 auto 24px;
    animation: pop .35s cubic-bezier(.4,2,.6,1);
  }
  @keyframes pop { 0%{transform:scale(0)} 100%{transform:scale(1)} }
  .confirm-recap{
    background:var(--paper-2); border:1px solid var(--line);
    border-radius:var(--radius); padding:20px 22px;
    max-width:480px; margin:0 auto;
  }
  .confirm-line{
    display:flex; justify-content:space-between; align-items:center;
    padding:10px 0; border-bottom:1px solid var(--line);
    font-size:13.5px;
  }
  .confirm-line:last-child{ border-bottom:0 }
  .confirm-line span{ color:var(--ink-3) }
  .confirm-line b{ color:var(--ink); font-weight:600 }

  /* Step pos current/done states */
  .step-item.current .step-num{
    background:#fff; color:var(--brand); border:2px solid var(--brand);
  }
  .step-item.done .step-num{ background:var(--brand); color:#fff; border-color:var(--brand) }
  .step-bar.done{ background:var(--brand) }

  /* ============================================================ */
  /* ===      AGENCE DÉPARTEMENT V2 — style Adekwatts        === */
  /* ============================================================ */
  .agence-hero-v2{ padding:32px 44px 36px; background:var(--paper) }
  .agence-hero-v2 .wrap{
    max-width:1280px; margin:0 auto;
    display:grid; grid-template-columns: 1fr 460px;
    gap:48px; align-items:stretch;
  }
  .agence-hero-v2 .team-photo{
    background:var(--wf); border:1px solid var(--line);
    border-radius:24px; aspect-ratio:5/4;
    position:relative; overflow:hidden;
    display:flex; align-items:flex-end;
    color:var(--ink-3); font-size:12px;
  }
  .agence-hero-v2 .team-photo .caption{
    margin:14px 18px; background:rgba(255,255,255,.9);
    border:1px solid var(--line);
    padding:6px 10px; border-radius:6px;
    font-size:11.5px; font-weight:600; color:var(--ink);
  }
  .agence-info-card{
    display:flex; flex-direction:column; justify-content:center;
    position:relative; padding:20px 0;
  }
  .agence-info-card .heart-btn{
    position:absolute; top:6px; right:0;
    width:40px; height:40px;
    border-radius:50%; border:1px solid var(--line-2);
    display:flex; align-items:center; justify-content:center;
    font-size:16px; color:var(--ink-3); cursor:pointer;
    background:#fff;
  }
  .agence-info-card .heart-btn:hover{ border-color:var(--ink); color:var(--accent) }
  .agence-info-card .cat-chip{
    display:inline-flex; align-items:center; gap:10px;
    font-size:11.5px; font-weight:700; letter-spacing:2.5px;
    text-transform:uppercase; color:var(--ink);
    margin-bottom:20px; align-self:flex-start;
  }
  .agence-info-card .cat-chip .icon{
    width:28px; height:28px; background:var(--accent);
    border-radius:7px; display:flex; align-items:center; justify-content:center;
    color:#fff; font-size:14px;
  }
  .agence-info-card h1{
    font-family:"Space Grotesk", -apple-system, BlinkMacSystemFont, sans-serif;
    font-size:44px; font-weight:700; letter-spacing:-1.6px; line-height:1.03;
    color:var(--ink); margin:0 0 24px;
  }
  .agence-info-card h1 em{ font-style:italic; color:var(--ink); font-weight:700 }
  .gmb-inline{
    display:inline-flex; align-items:center; gap:10px;
    font-size:13.5px; color:var(--ink-2); font-weight:500;
    margin-bottom:22px; text-decoration:none;
  }
  .gmb-logo{
    font-family:"Space Grotesk","Inter", system-ui, sans-serif;
    font-weight:600; font-size:22px; line-height:1; letter-spacing:-.3px;
    display:inline-flex;
  }
  .gmb-logo span:nth-child(1){ color:#4285F4 }
  .gmb-logo span:nth-child(2){ color:#EA4335 }
  .gmb-logo span:nth-child(3){ color:#FBBC04 }
  .gmb-logo span:nth-child(4){ color:#4285F4 }
  .gmb-logo span:nth-child(5){ color:#34A853 }
  .gmb-logo span:nth-child(6){ color:#EA4335 }
  .gmb-inline .verified-chip{
    border:1px solid var(--line-2); padding:2px 8px; border-radius:4px;
    font-size:11px; color:var(--ink-2); font-weight:500;
  }
  .agence-info-card .addr-block{
    margin-bottom:16px;
  }
  .agence-info-card .addr-block b{
    display:block; font-family:"Space Grotesk", sans-serif;
    font-size:17px; color:var(--ink); font-weight:700;
    letter-spacing:-.2px; margin-bottom:4px;
  }
  .agence-info-card .addr-block address{
    font-style:normal; color:var(--ink-2); font-size:14px; line-height:1.55;
  }
  .agence-info-card .tel-big{
    display:inline-block; font-size:20px; font-weight:700;
    color:var(--ink); text-decoration:underline; text-underline-offset:4px;
    font-family:"Space Grotesk", sans-serif; letter-spacing:-.3px;
    margin-bottom:22px;
  }
  .agence-info-card .socials-row{
    display:flex; align-items:center; gap:14px;
    margin-bottom:18px; font-size:13px; color:var(--ink-3);
  }
  .agence-info-card .socials-row a{
    width:36px; height:36px; border-radius:50%;
    border:1px solid var(--line-2); background:#fff;
    display:flex; align-items:center; justify-content:center;
    color:var(--ink); cursor:pointer; font-size:14px;
    text-decoration:none;
  }
  .agence-info-card .socials-row a:hover{ border-color:var(--ink); background:var(--ink); color:#fff }
  .agence-info-card .share-row{
    display:flex; align-items:center; gap:14px;
    margin-bottom:22px; font-size:13px; color:var(--ink-3);
    padding-bottom:22px; border-bottom:1px solid var(--line);
  }
  .agence-info-card .share-row button{
    background:transparent; border:1px solid var(--line-2);
    padding:8px 14px; border-radius:999px;
    font-size:12.5px; color:var(--ink); cursor:pointer;
    display:inline-flex; align-items:center; gap:8px;
  }
  .agence-info-card .share-row button:hover{ border-color:var(--ink) }
  .agency-ctas{ display:flex; gap:10px; flex-wrap:wrap }
  .agency-ctas .btn{ flex:1; min-width:160px; justify-content:center }

  /* Sticky sub-nav (agence département) — colle juste sous le header principal */
  .sub-nav{
    position:sticky; top:var(--header-h);
    background:var(--paper-2);
    border-top:1px solid var(--line);
    border-bottom:1px solid var(--line);
    z-index:30;
  }
  .sub-nav .wrap{
    max-width:1280px; margin:0 auto;
    padding:0 44px;
    display:flex; gap:42px; align-items:center; min-height:58px;
    position:relative;
  }
  .sub-nav .sub-scroll-top{
    position:absolute; left:44px; top:50%; transform:translateY(-50%);
    width:40px; height:40px; border-radius:50%;
    background:var(--accent); color:#fff;
    display:flex; align-items:center; justify-content:center;
    font-size:18px; cursor:pointer; border:0;
  }
  .sub-nav .sub-items{
    display:flex; gap:40px;
    margin-left:auto; margin-right:auto;
  }
  .sub-nav a{
    color:var(--ink-3); font-size:14.5px; font-weight:500;
    padding:20px 0; position:relative; cursor:pointer;
    text-decoration:none; display:flex; align-items:center; gap:8px;
  }
  .sub-nav a.on{ color:var(--ink); font-weight:600 }
  .sub-nav a.on::after{
    content:""; position:absolute; left:0; right:0; bottom:-1px;
    height:2px; background:var(--accent);
  }
  .sub-nav a:hover{ color:var(--ink) }
  .sub-nav .google-tag{
    font-size:10.5px; font-weight:600; letter-spacing:.5px;
    padding:2px 7px; border-radius:4px; background:#EBF2FE; color:#1A73E8;
    border:1px solid #CFE0FB;
  }

  /* Présentation / intro */
  .presentation-section{ padding:90px 44px }
  .presentation-section .wrap{ max-width:1180px; margin:0 auto }
  .presentation-section .intro-block{
    max-width:820px; margin:0 auto 64px; text-align:center;
  }
  .presentation-section .intro-block h2{
    font-family:"Space Grotesk", sans-serif;
    font-size:48px; font-weight:700; letter-spacing:-1.4px; line-height:1.03;
    color:var(--ink); margin:18px 0 24px;
  }
  .presentation-section .intro-block h2 em{ font-style:italic; font-weight:700 }
  .presentation-section .intro-block p{
    font-size:16.5px; color:var(--ink-2); line-height:1.65;
    margin:0 auto 16px; max-width:720px;
  }
  .presentation-section .intro-block p.highlight{
    font-weight:700; color:var(--ink); font-size:17px;
    padding-top:12px;
  }
  .presentation-section .split{
    display:grid; grid-template-columns: 1fr 1fr;
    gap:28px; align-items:start;
  }

  /* Google My Business map embed (simulated) */
  .gmb-map{
    background:
      linear-gradient(rgba(0,0,0,.02), rgba(0,0,0,.02)),
      repeating-linear-gradient(45deg, #F0EFEC 0 14px, #F5F4F1 14px 28px);
    border:1px solid var(--line); border-radius:var(--radius);
    aspect-ratio:4/3; position:relative; overflow:hidden;
  }
  .gmb-map .road{
    position:absolute; background:rgba(200,200,195,.4);
    pointer-events:none;
  }
  .gmb-map .road.h{ height:3px; left:-20px; right:-20px }
  .gmb-map .road.v{ width:3px; top:-20px; bottom:-20px }
  .gmb-map .label{
    position:absolute; font-family:Arial, sans-serif; font-size:10px;
    color:#888; text-transform:uppercase; letter-spacing:.5px;
    pointer-events:none;
  }
  .gmb-map .pin{
    position:absolute; top:50%; left:50%;
    width:28px; height:28px;
    background:var(--accent); border-radius:50% 50% 50% 0;
    transform: translate(-50%, -100%) rotate(-45deg);
    border:3px solid #fff; box-shadow:0 4px 12px rgba(0,0,0,.2);
  }
  .gmb-map .pin::after{
    content:""; position:absolute; inset:6px; background:#fff; border-radius:50%;
  }
  .gmb-map .zoom-ctrl{
    position:absolute; bottom:12px; right:12px;
    display:flex; flex-direction:column; background:#fff;
    border:1px solid var(--line-2); border-radius:4px;
    overflow:hidden;
    box-shadow:0 1px 3px rgba(0,0,0,.12);
  }
  .gmb-map .zoom-ctrl button{
    width:28px; height:28px; background:#fff; border:0;
    border-bottom:1px solid var(--line);
    font-size:16px; color:var(--ink-2); cursor:pointer;
    font-weight:600;
  }
  .gmb-map .zoom-ctrl button:last-child{ border:0 }
  .gmb-map .google-credit{
    position:absolute; bottom:4px; left:8px;
    font-family:Arial, sans-serif; font-size:10px; color:#888;
  }
  .gmb-map .dim-anno{ top:10px; left:10px; right:auto }

  /* Venez nous voir / horaires block */
  .venez-block{
    margin-top:24px;
    display:grid; grid-template-columns:1fr 1fr;
    gap:36px;
  }
  .venez-block h3{
    font-family:"Space Grotesk", sans-serif;
    font-size:20px; font-weight:700; color:var(--ink);
    letter-spacing:-.3px; margin:0 0 10px;
  }
  .venez-block address{
    font-style:normal; color:var(--ink-2); font-size:14px;
    line-height:1.6; margin-bottom:10px;
  }
  .venez-block address b{ color:var(--ink) }
  .itineraire-link{
    display:inline-flex; align-items:center; gap:8px;
    font-size:13px; font-weight:600; color:var(--ink);
    text-decoration:none; padding-top:4px;
  }
  .itineraire-link::before{
    content:""; width:18px; height:18px; border-radius:50%;
    background:var(--paper-3); display:inline-flex; align-items:center; justify-content:center;
    background:
      radial-gradient(circle, var(--accent) 25%, var(--paper-3) 27%);
  }
  .horaires-list{
    font-size:13.5px; color:var(--ink-2); line-height:1.85;
  }
  .horaires-list > div{ display:flex; justify-content:space-between }
  .horaires-list b{ color:var(--ink); font-weight:600 }
  .horaires-list .today{
    background:var(--brand-soft); border:1px solid var(--brand-pale);
    padding:2px 8px; margin:-2px -8px;
    border-radius:4px;
  }

  /* Offer card (right column) */
  .offer-column{ display:flex; flex-direction:column; gap:16px }
  .offer-photo{
    background:var(--wf); border:1px solid var(--line);
    border-radius:var(--radius); aspect-ratio:4/3;
    position:relative; display:flex; align-items:flex-end;
    color:var(--ink-3); font-size:12px;
  }
  .offer-photo .caption{
    margin:14px; background:rgba(255,255,255,.92);
    border:1px solid var(--line);
    padding:6px 10px; border-radius:6px;
    font-size:11px; font-weight:600; color:var(--ink);
  }
  .offer-card{
    background:var(--accent-soft); border:1px solid #FFCAAB;
    border-radius:var(--radius); padding:30px;
    display:flex; flex-direction:column;
  }
  .offer-card .badge{
    display:inline-block; background:var(--accent); color:#fff;
    font-size:10.5px; font-weight:700; letter-spacing:1.5px;
    padding:4px 10px; border-radius:4px; text-transform:uppercase;
    margin-bottom:16px; align-self:flex-start;
  }
  .offer-card h3{
    font-family:"Space Grotesk", sans-serif;
    font-size:24px; font-weight:700; color:var(--ink);
    letter-spacing:-.4px; line-height:1.12;
    margin:0 0 14px;
  }
  .offer-card h3 em{ font-style:italic; color:var(--accent) }
  .offer-card p{
    color:var(--ink-2); font-size:14.5px; line-height:1.55; margin:0 0 20px;
  }
  .offer-card .btn{ align-self:flex-start }

  /* Section centered with icon eyebrow */
  .centered-head{ text-align:center; max-width:860px; margin:0 auto 48px }
  .centered-head .icon-eyebrow{
    display:inline-flex; flex-direction:column; align-items:center;
    gap:10px; margin-bottom:16px;
  }
  .centered-head .icon-eyebrow .icon-badge{
    width:40px; height:40px; background:var(--accent);
    border-radius:10px; display:flex; align-items:center; justify-content:center;
    color:#fff; font-size:18px;
  }
  .centered-head .icon-eyebrow span{
    font-size:12px; font-weight:700; letter-spacing:3px;
    text-transform:uppercase; color:var(--ink);
    border-bottom:0; padding:0;
  }
  .centered-head h3.title{
    margin:0 0 18px;
  }
  .centered-head h3.title-upper{
    text-transform:uppercase; font-size:54px; letter-spacing:-1.2px;
  }
  .centered-head p{
    font-size:16px; color:var(--ink-2); line-height:1.65;
    max-width:680px; margin:0 auto 24px;
  }
  .centered-head p.bold-close{
    font-weight:700; color:var(--ink); font-size:17px;
  }

  /* GMB rating badge */
  .gmb-rating{
    display:inline-flex; align-items:center; gap:16px;
    background:#fff; border:1px solid var(--line);
    border-radius:var(--radius); padding:12px 18px;
    margin:14px auto 0;
  }
  .gmb-rating .rating-right{ display:flex; flex-direction:column; gap:2px }
  .gmb-rating .stars-row{
    display:flex; align-items:center; gap:8px;
    font-size:14.5px; font-weight:700; color:var(--ink);
  }
  .gmb-rating .stars-row .s{ color:var(--accent); letter-spacing:1px }
  .gmb-rating .count{ font-size:12px; color:var(--ink-3) }

  /* Testimonial carousel */
  .testi-carousel{
    max-width:1180px; margin:0 auto;
    display:grid; grid-template-columns: 1fr 1fr;
    gap:48px; align-items:center;
  }
  .testi-photo{
    background:var(--wf); border:1px solid var(--line);
    border-radius:var(--radius-xl); aspect-ratio:4/3;
    position:relative; overflow:hidden;
    display:flex; align-items:flex-end;
    color:var(--ink-3); font-size:12px;
  }
  .testi-photo .caption{
    margin:14px; background:rgba(255,255,255,.92);
    border:1px solid var(--line);
    padding:6px 10px; border-radius:6px;
    font-size:11px; font-weight:600; color:var(--ink);
  }
  .testi-content .google-badge-inline{
    display:inline-flex; align-items:center; gap:10px;
    font-size:12.5px; color:var(--ink-3); margin-bottom:14px;
    font-weight:500;
  }
  .testi-content blockquote{
    background:transparent !important; border:0 !important;
    padding:0 !important;
    font-family:"Space Grotesk", sans-serif;
    font-size:28px; line-height:1.3; font-weight:500;
    color:var(--ink); margin:0 0 24px;
    letter-spacing:-.3px;
  }
  .testi-content blockquote::before{
    content:"\201C"; display:block;
    font-family:"Space Grotesk", sans-serif;
    font-size:72px; color:var(--accent);
    line-height:.5; margin-top:16px;
  }
  .testi-author{
    display:flex; align-items:center; gap:14px; margin-bottom:24px;
  }
  .testi-author .av{
    width:48px; height:48px; border-radius:50%;
    background:var(--wf); border:1px solid var(--line);
    flex-shrink:0;
  }
  .testi-author b{ display:block; color:var(--ink); font-size:14.5px; font-weight:700 }
  .testi-author span{ color:var(--ink-3); font-size:12.5px; line-height:1.5 }
  .testi-author .verified-pill{
    margin-left:auto; font-size:10.5px; color:#1A73E8;
    background:#EBF2FE; border:1px solid #CFE0FB;
    padding:3px 8px; border-radius:4px; font-weight:600;
  }
  .carousel-nav{
    display:flex; align-items:center; gap:14px;
  }
  .carousel-nav button{
    width:44px; height:44px; border-radius:50%;
    border:1px solid var(--line-2); background:transparent;
    display:flex; align-items:center; justify-content:center;
    font-size:18px; color:var(--ink); cursor:pointer;
  }
  .carousel-nav button:hover{ border-color:var(--ink) }
  .carousel-nav .dots{
    font-size:12.5px; color:var(--ink-3); font-family:ui-monospace, Menlo, monospace;
    margin-left:4px;
  }

  /* Réalisations grid (polish) */
  .reals-grid-v2{
    display:grid; grid-template-columns: repeat(3, 1fr);
    gap:1px; background:var(--line); border:1px solid var(--line);
  }
  .reals-grid-v2 .real{
    border:0; border-radius:0; aspect-ratio:4/3; background:var(--wf);
  }

  /* Team grid with bigger photos */
  .team-big{
    display:grid; grid-template-columns:repeat(4, 1fr); gap:20px;
  }
  .team-big .member{
    background:transparent; border:0; padding:0; text-align:left;
  }
  .team-big .member .photo{
    width:100%; aspect-ratio:3/4; background:var(--wf);
    border:1px solid var(--line); border-radius:var(--radius);
    margin-bottom:14px;
    display:flex; align-items:flex-end;
    color:var(--ink-3); font-size:11px; padding:12px;
  }
  .team-big .member b{
    font-family:"Space Grotesk", sans-serif;
    font-size:18px; letter-spacing:-.2px; color:var(--ink);
  }
  .team-big .member span{ color:var(--ink-3); font-size:13px; font-weight:500 }
  .team-big .member .role{ color:var(--accent-2); font-size:11.5px; font-weight:700; letter-spacing:1.2px; text-transform:uppercase; margin-top:4px; display:block }

  /* Contact quick form */
  .contact-quick{
    max-width:640px; margin:0 auto;
    background:#fff; border:1px solid var(--line); border-radius:var(--radius);
    padding:32px;
  }
  .contact-quick .line{
    display:flex; align-items:center; gap:10px; margin-bottom:14px;
  }
  .contact-quick .line svg{ color:var(--ink); flex-shrink:0 }

  /* ============================================================ */
  /* ===   Eldo logo + Bloc réassurance Google + Eldo        === */
  /* ============================================================ */
  .eldo-logo{
    display:inline-flex; align-items:center; gap:7px;
    font-family:"Space Grotesk","Inter", sans-serif;
    font-weight:700; font-size:19px;
    color:#1A3D32;
    letter-spacing:-.2px;
    line-height:1;
  }
  .eldo-logo .eldo-mark{
    display:inline-block;
    width:19px; height:19px;
    border:2.5px solid currentColor;
    border-radius:50%;
    position:relative;
    flex-shrink:0;
  }
  .eldo-logo .eldo-mark::after{
    content:""; position:absolute;
    bottom:-3px; right:-2px;
    width:7px; height:7px; background:currentColor;
    border-radius:50%;
  }

  /* Bloc réassurance récurrent (Google + Eldo) */
  .reviews-trust{
    display:inline-flex; align-items:center; gap:24px;
    background:#fff; border:1px solid var(--line);
    border-radius:var(--radius); padding:14px 22px;
    flex-wrap:wrap;
  }
  .reviews-trust .rev-source{
    display:flex; align-items:center; gap:14px;
  }
  .reviews-trust .rev-details{
    display:flex; flex-direction:column; gap:1px;
    font-size:12.5px; color:var(--ink-3);
    line-height:1.3;
  }
  .reviews-trust .rev-details .stars-line{
    display:flex; align-items:center; gap:6px;
    font-weight:700; color:var(--ink); font-size:13.5px;
  }
  .reviews-trust .rev-details .stars-line .s{ color:var(--accent); letter-spacing:1.5px }
  .reviews-trust .rev-details .count{ font-size:11.5px }
  .reviews-trust .sep{
    width:1px; height:28px; background:var(--line);
  }
  .reviews-trust .total-note{
    font-size:11px; color:var(--ink-3); font-weight:600;
    letter-spacing:.5px; text-transform:uppercase;
    padding-left:10px;
    border-left:1px dashed var(--line-2);
  }

  /* Variante dense (pour trust-strip global) */
  .reviews-trust.compact{
    padding:8px 14px; gap:16px;
    border-radius:999px;
  }
  .reviews-trust.compact .rev-source{ gap:10px }
  .reviews-trust.compact .gmb-logo{ font-size:15px }
  .reviews-trust.compact .eldo-logo{ font-size:15px }
  .reviews-trust.compact .eldo-mark{ width:15px; height:15px }
  .reviews-trust.compact .rev-details .stars-line{ font-size:12.5px }
  .reviews-trust.compact .rev-details .count{ font-size:11px }
  .reviews-trust.compact .sep{ height:22px }

  /* Variante dark (sur fond ink) */
  .sec-green .reviews-trust,
  .reviews-trust.on-dark{
    background:rgba(255,255,255,.06);
    border-color:rgba(255,255,255,.1);
  }
  .sec-green .reviews-trust .rev-details .count,
  .reviews-trust.on-dark .rev-details .count{ color:rgba(255,255,255,.6) }
  .sec-green .reviews-trust .rev-details .stars-line,
  .reviews-trust.on-dark .rev-details .stars-line{ color:#fff }
  .sec-green .reviews-trust .gmb-logo span:nth-child(1),
  .reviews-trust.on-dark .gmb-logo span:nth-child(1){ color:#669DF6 }
  .sec-green .reviews-trust .sep,
  .reviews-trust.on-dark .sep{ background:rgba(255,255,255,.15) }
  .sec-green .reviews-trust .eldo-logo,
  .reviews-trust.on-dark .eldo-logo{ color:#C4E9D1 }

  /* Tab switcher avis (Google / Eldo) */
  .review-source-tabs{
    display:inline-flex; gap:6px;
    background:var(--paper-3); padding:6px;
    border-radius:999px;
    margin:0 auto 34px;
  }
  .review-source-tabs button{
    display:inline-flex; align-items:center; gap:8px;
    background:transparent; border:0;
    padding:10px 20px; border-radius:999px;
    cursor:pointer; font-size:13.5px;
    color:var(--ink-3); font-weight:600;
  }
  .review-source-tabs button.on{
    background:#fff; color:var(--ink);
    box-shadow: 0 1px 3px rgba(0,0,0,.08);
  }
  .review-source-tabs button .count{
    font-size:11px; color:var(--ink-3);
    background:var(--paper-2); padding:2px 8px;
    border-radius:999px;
  }
  .review-source-tabs button.on .count{
    background:var(--paper-2); color:var(--ink-2);
  }

  /* Small trust pill (inline, hero/CTA) */
  .reviews-pill{
    display:inline-flex; align-items:center; gap:12px;
    padding:8px 14px; background:#fff;
    border:1px solid var(--line); border-radius:999px;
    font-size:12.5px; color:var(--ink-2);
  }
  .reviews-pill strong{ color:var(--ink); font-weight:700 }
  .reviews-pill .s{ color:var(--accent); letter-spacing:1.2px; margin-right:4px }
  .reviews-pill .dot-sep{
    width:3px; height:3px; border-radius:50%; background:var(--ink-4);
  }

  /* Mobile overrides for reviews-trust */
  @media (max-width: 768px){
    .reviews-trust{
      padding:12px 14px; gap:14px;
    }
  }
  @media (max-width: 768px){ .reviews-trust .sep{ height:22px } }
  @media (max-width: 768px){ .reviews-trust .total-note{ display:none } }

  /* KPI / chiffres clés — réassurance */
  .kpi-section{ background:var(--paper-2) }
  .kpi-grid{
    display:grid; grid-template-columns: repeat(6, 1fr);
    gap:1px; background:var(--line);
    border:1px solid var(--line);
  }
  .kpi{
    background:#fff; padding:28px 20px;
    display:flex; flex-direction:column; gap:6px;
    text-align:left;
    /* Animation d'apparition */
    opacity:0; transform: translateY(16px);
    transition: opacity .6s ease, transform .6s ease;
  }
  .kpi.in-view{
    opacity:1; transform: translateY(0);
  }
  /* Décalage progressif (stagger) */
  .kpi:nth-child(1){ transition-delay: 0ms }
  .kpi:nth-child(2){ transition-delay: 80ms }
  .kpi:nth-child(3){ transition-delay: 160ms }
  .kpi:nth-child(4){ transition-delay: 240ms }
  .kpi:nth-child(5){ transition-delay: 320ms }
  .kpi:nth-child(6){ transition-delay: 400ms }

  .kpi b{
    display:block;
    font-family:"Space Grotesk", -apple-system, BlinkMacSystemFont, sans-serif;
    font-weight:700; font-size:42px; letter-spacing:-1.4px;
    line-height:1; color:var(--ink);
  }
  .kpi b .sup{ color:var(--accent); font-size:28px; letter-spacing:-.8px; margin-left:2px }
  .kpi span{
    font-size:12.5px; color:var(--ink-3); line-height:1.45;
    margin-top:2px; font-weight:500;
  }
  @media (max-width: 768px){ .kpi-grid{ grid-template-columns:1fr 1fr } }
  @media (max-width: 768px){ .kpi{ padding:20px 16px } }
  @media (max-width: 768px){ .kpi b{ font-size:32px; letter-spacing:-1px } }
  @media (max-width: 768px){ .kpi b .sup{ font-size:22px } }

  /* (Bloc « PLEIN ÉCRAN » de la maquette retiré — il référençait .canvas/.device/.shell
     et body.fullscreen-mode, qui n'existent pas dans le thème WP.) */

  /* ============================================================ */
  /* ===   MOBILE — Bottom bar flottante + Menu drawer       === */
  /* ============================================================ */
  .mobile-bottom{
    display:none;
    position:sticky; bottom:16px;
    margin:24px 12px 16px;
    background:#fff; border:1px solid var(--line);
    border-radius:999px;
    padding:6px;
    box-shadow: 0 8px 28px rgba(10,10,10,.14);
    z-index:50;
    align-items:center; gap:6px;
  }
  @media (max-width: 768px){ .mobile-bottom{ display:flex } }

  .mb-menu{
    background:var(--paper-2); border:0;
    border-radius:999px;
    padding:11px 14px 11px 14px;
    display:flex; align-items:center; gap:10px;
    font-size:13px; font-weight:600; color:var(--ink);
    cursor:pointer; font-family:inherit;
    transition: background .15s;
  }
  .mb-menu:hover{ background:var(--paper-3) }
  .mb-menu .ic{
    display:flex; flex-direction:column; gap:3px;
    width:16px;
  }
  .mb-menu .ic span{
    display:block; height:2px; background:var(--ink); border-radius:2px;
    transition: transform .25s ease, opacity .15s;
  }
  .mb-menu .ic span:nth-child(2){ width:70% }

  .mb-devis{
    flex:1; background:var(--accent); color:#fff;
    border-radius:999px;
    padding:13px 18px;
    display:flex; align-items:center; justify-content:center; gap:10px;
    font-size:13.5px; font-weight:700; letter-spacing:-.1px;
    text-decoration:none;
  }
  .mb-devis:hover{ background:var(--accent-2) }
  .mb-devis .arrow{
    width:24px; height:24px; border-radius:50%;
    background:rgba(255,255,255,.2);
    display:flex; align-items:center; justify-content:center;
    font-weight:800;
  }

  /* Drawer plein écran qui glisse depuis le bas */
  .mobile-menu{
    display:none;
    position:fixed; inset:0;
    background:var(--paper);
    z-index:60;
    overflow-y:auto;
    transform:translateY(100%);
    transition: transform .35s cubic-bezier(.4,0,.2,1);
  }
  @media (max-width: 768px){ .mobile-menu{ display:block } }
  .mm-open .mobile-menu{ transform:translateY(0) }

  .mm-head{
    display:flex; align-items:center; justify-content:space-between;
    padding:18px 18px 14px;
    border-bottom:1px solid var(--line);
    position:sticky; top:0; background:var(--paper); z-index:1;
  }
  .mm-logo{ height:42px }
  .mm-close{
    width:42px; height:42px; border-radius:50%;
    background:var(--paper-2); border:1px solid var(--line);
    color:var(--ink); font-size:18px; cursor:pointer;
    display:flex; align-items:center; justify-content:center;
  }

  .mm-hero{
    padding:28px 18px;
    background:var(--brand-2); color:#fff;
    position:relative; overflow:hidden;
  }
  .mm-hero::before{
    content:""; position:absolute; top:-50px; right:-50px;
    width:200px; height:200px; border-radius:50%;
    background:radial-gradient(circle, rgba(253,95,0,.25), transparent 70%);
  }
  .mm-hero h3{
    margin:0 0 8px; font-family:"Space Grotesk", sans-serif;
    font-size:24px; font-weight:700; letter-spacing:-.6px; line-height:1.1;
  }
  .mm-hero h3 em{ color:var(--accent); font-style:italic }
  .mm-hero p{ margin:0 0 18px; font-size:13.5px; color:rgba(255,255,255,.75); line-height:1.5 }
  .mm-hero .mm-cta{
    display:inline-flex; align-items:center; gap:10px;
    background:var(--accent); color:#fff;
    padding:14px 22px; border-radius:999px;
    font-size:14px; font-weight:700;
    text-decoration:none;
  }

  .mm-nav{
    padding:14px 0;
  }
  .mm-section{
    border-bottom:1px solid var(--line);
  }
  .mm-section > summary{
    list-style:none;
    padding:18px 18px;
    font-family:"Space Grotesk", sans-serif;
    font-size:18px; font-weight:700; color:var(--ink);
    letter-spacing:-.3px;
    cursor:pointer;
    display:flex; align-items:center; justify-content:space-between;
    user-select:none;
  }
  .mm-section > summary::-webkit-details-marker{ display:none }
  .mm-section > summary::after{
    content:"+"; color:var(--accent); font-weight:700; font-size:22px;
    width:24px; height:24px; display:flex; align-items:center; justify-content:center;
    transition: transform .2s;
  }
  .mm-section[open] > summary::after{ transform:rotate(45deg) }
  .mm-sub{
    padding:0 18px 18px;
    display:flex; flex-direction:column; gap:2px;
  }
  .mm-sub a{
    display:block; padding:11px 0;
    font-size:14.5px; color:var(--ink-2); font-weight:500;
    border-bottom:1px dashed var(--line);
    text-decoration:none;
  }
  .mm-sub a:last-child{ border-bottom:0 }
  .mm-sub a.featured{ color:var(--accent); font-weight:600 }

  /* Footer drawer : reassurance + tel + socials */
  .mm-foot{
    padding:24px 18px;
    background:var(--paper-2);
    border-top:1px solid var(--line);
  }
  .mm-foot .reviews-trust{
    margin-bottom:18px; width:100%; box-sizing:border-box;
    justify-content:center;
  }
  .mm-foot .mm-phone{
    display:flex; align-items:center; justify-content:center; gap:12px;
    background:#fff; border:1px solid var(--line);
    border-radius:14px; padding:14px;
    font-size:15px; font-weight:700; color:var(--ink);
    text-decoration:none; margin-bottom:14px;
  }
  .mm-foot .mm-phone .num{ font-family:"Space Grotesk", sans-serif; letter-spacing:-.2px }
  .mm-foot .mm-socials{
    display:flex; gap:10px; justify-content:center;
  }
  .mm-foot .mm-socials a{
    width:42px; height:42px; border-radius:50%;
    background:#fff; border:1px solid var(--line);
    display:flex; align-items:center; justify-content:center;
    color:var(--ink); font-size:14px; font-weight:700;
    text-decoration:none;
  }

  /* Cacher la barre orange "Devis" dans le header mobile (redondant avec la bottom bar) */
  @media (max-width: 768px){ .header-actions-m .pill-btn{ display:none } }
  @media (max-width: 768px){
    .header-actions-m .burger{
      /* ce burger reste visible si user veut un accès secondaire */
    }
  }

  /* Cursor pointer sur tous les éléments interactifs des maquettes */
  .site a, .site button, .site .btn, .site .nav-item, .site .pill-btn, .site .chip,
  .site .service-card, .site .dept-card, .site .related-card, .site .agency-row,
  .site .pillar, .site .segment, .site .commune-list a, .site .filter-btn,
  .site .faq-row, .site .pill-phone, .site .heart-btn, .site .itineraire-link,
  .site .socials-row a, .site .share-row button{ cursor:pointer }

  /* Mobile overrides for new components */
  @media (max-width: 768px){ .agence-hero-v2{ padding:18px 18px 24px } }
  @media (max-width: 768px){ .agence-hero-v2 .wrap{ grid-template-columns:1fr; gap:22px } }
  @media (max-width: 768px){ .agence-info-card{ padding:4px 0 } }
  @media (max-width: 768px){ .agence-info-card h1{ font-size:30px; letter-spacing:-1px } }
  @media (max-width: 768px){ .sub-nav .wrap{ padding:0 18px; gap:24px; overflow-x:auto; min-height:50px } }
  @media (max-width: 768px){ .sub-nav .sub-scroll-top{ display:none } }
  @media (max-width: 768px){ .sub-nav .sub-items{ gap:24px; margin:0 } }
  @media (max-width: 768px){ .sub-nav a{ font-size:13px; padding:16px 0; white-space:nowrap } }
  @media (max-width: 768px){ .presentation-section{ padding:40px 18px } }
  @media (max-width: 768px){ .presentation-section .intro-block{ margin-bottom:32px } }
  @media (max-width: 768px){ .presentation-section .intro-block h2{ font-size:30px; letter-spacing:-.8px } }
  @media (max-width: 768px){ .presentation-section .split{ grid-template-columns:1fr; gap:22px } }
  @media (max-width: 768px){ .venez-block{ grid-template-columns:1fr; gap:22px } }
  @media (max-width: 768px){ .testi-carousel{ grid-template-columns:1fr; gap:22px } }
  @media (max-width: 768px){ .testi-content blockquote{ font-size:20px } }
  @media (max-width: 768px){ .reals-grid-v2{ grid-template-columns:1fr 1fr } }
  @media (max-width: 768px){ .team-big{ grid-template-columns:1fr 1fr; gap:14px } }
  @media (max-width: 768px){ .centered-head h3.title-upper{ font-size:32px } }
  @media (max-width: 768px){ .centered-head{ margin-bottom:28px } }
  @media (max-width: 768px){ .agency-ctas .btn{ flex:1 1 100%; min-width:0 } }

  /* ============================================================
   * Blocs Gutenberg custom — classes ajoutées par /blocks/*
   * ============================================================ */

  /* iso/services-grid — alias .services existant + tolérance .services-grid */
  .services-grid{ display:grid; grid-template-columns: repeat(4, 1fr); gap:18px }

  /* iso/pillar-row — service alterné texte + visuel */
  .sec-pillar .pillar-row{
    display:grid; grid-template-columns: 1fr 1fr; gap:60px; align-items:center;
  }
  .sec-pillar .pillar-row.reverse{ direction:rtl }
  .sec-pillar .pillar-row.reverse > *{ direction:ltr }
  .pillar-text .title{ margin:14px 0 18px }
  .pillar-text .lead{ font-size:16px; color:var(--ink-2); line-height:1.6; margin-bottom:24px }
  .pillar-bullets{ list-style:none; padding:0; margin:0 0 28px;
    display:flex; flex-direction:column; gap:10px;
  }
  .pillar-bullets li{
    position:relative; padding-left:26px; font-size:14.5px; color:var(--ink-2);
  }
  .pillar-bullets li::before{
    content:"✓"; position:absolute; left:0; top:0;
    color:var(--brand); font-weight:700;
  }
  .pillar-visual .pillar-img{
    width:100%; height:100%; min-height:320px; max-height:420px;
    object-fit:cover; border-radius:24px; display:block;
  }
  .pillar-visual .pillar-img.placeholder{
    background:var(--paper-2); border:1px dashed var(--line-2);
  }

  /* iso/mega-cta — variantes via section.sec.sec-{green|dark|cream} (déjà gérées) */
  .sec-cta .sub{ font-size:16px; color:var(--ink-3); margin-top:8px }

  /* iso/kpi-grid via .sec-kpi (alias de .kpi-section pour le JS d'animation) */
  .sec-kpi .head{ text-align:center; margin-bottom:36px }

  /* Mega menu — état actif sur le nav-item ouvert */
  .navmain .nav-item.is-active{ color:var(--brand) }

  /* Mobile drawer — overlay (active via body.mm-open) */
  body.mm-open{ overflow:hidden }
  body.mm-open .mobile-menu{ transform:translateX(0) }

  /* Header sticky scrollé */
  .header.scrolled{
    position:sticky; top:0;
    box-shadow: 0 2px 14px rgba(0,0,0,.06);
    background:var(--paper);
  }

  /* Mobile — pillar-row en colonne */
  @media (max-width: 768px){ .sec-pillar .pillar-row{ grid-template-columns:1fr; gap:32px } }
  @media (max-width: 768px){ .services-grid{ grid-template-columns: 1fr; gap:16px } }
  @media (max-width: 768px){
    .sec-pillar .pillar-row{ grid-template-columns:1fr; gap:32px }
    .services-grid{ grid-template-columns: 1fr; gap:16px }
  }

  /* ============================================================
   * Helpers utilitaires v0.3 — extraction styles inline depuis templates
   * ============================================================ */
  .head.head-center{ text-align:center; max-width:640px; margin:0 auto 40px }
  .head.head-row{
    display:flex; justify-content:space-between; align-items:flex-end;
    margin-bottom:36px; gap:20px;
  }
  .head.head-row > div{ margin:0 }
  @media (max-width: 768px){
    .head.head-row{ flex-direction:column; align-items:flex-start }
  }

  .wrap-narrow{ max-width:720px; text-align:center; margin:0 auto }
  .wrap-medium{ max-width:820px; text-align:center; margin:0 auto }

  .cta-row{
    display:flex; gap:12px; justify-content:center;
    margin-top:30px; flex-wrap:wrap;
  }
  .cta-row.left{ justify-content:flex-start }

  /* Bouton ghost sur fond foncé (CTA final vert) */
  .btn-on-dark, .sec-green .btn.ghost{
    background:transparent; color:#fff;
    border-color:rgba(255,255,255,.2);
  }
  .btn-on-dark:hover, .sec-green .btn.ghost:hover{
    background:rgba(255,255,255,.08); color:#fff;
  }

  /* Hero — image principale */
  .hero .hero-illus img{
    width:100%; height:100%; object-fit:cover;
    border-radius:24px; display:block;
  }

  /* Realisation — galerie avant/après en 2 colonnes */
  .reals.before-after{ grid-template-columns:1fr 1fr }
  .real .lab.lab-dark{ background:#1F1F1F; color:#fff }
  .real .lab.lab-brand{ background:var(--brand); color:#fff }

  /* Page agence — corrections */
  .agence-hero-v2 .team-photo img{ width:100%; height:auto; display:block; border-radius:18px }

  /* Réalisation — KPI specs */
  .kpi-specs[data-cols="3"]{ grid-template-columns:repeat(3,1fr) }
  .kpi-specs[data-cols="4"]{ grid-template-columns:repeat(4,1fr) }
  .kpi-specs .kpi b.b-text{ font-size:24px }
  @media (max-width: 768px){
    .kpi-specs[data-cols="3"], .kpi-specs[data-cols="4"]{ grid-template-columns:1fr 1fr }
  }

  /* Sub-nav agence — alias scroll-spy : main.js cible .subnav */
  .subnav.sub-nav{ /* compat noop, sert juste à attacher le scroll-spy */ }

  /* Icon badge — variante Google */
  .icon-eyebrow .icon-badge.bg-google{ background:#EA4335 }

  /* CTA final sec-green — eyebrow lisible sur fond foncé */
  .sec-green .eyebrow{
    color:rgba(255,255,255,.8);
    border-color:rgba(255,255,255,.18);
  }
  .sec-green .eyebrow .dot{ background:rgba(255,255,255,.8) }
  .sec-green .title, .sec-green .title em{ color:#fff }
  .sec-green .sub{ color:rgba(255,255,255,.85) }

  /* ============================================================
   * Bloc iso/quote-form — formulaire devis 3 étapes (v0.3)
   * ============================================================ */
  .sec-quote-form{ background:var(--paper) }
  .quote-form{
    max-width:760px; margin:32px auto 0; background:#fff;
    border:1px solid var(--line); border-radius:24px; padding:32px;
    box-shadow:0 1px 0 rgba(0,0,0,.02);
  }
  .quote-steps{
    display:grid; grid-template-columns:repeat(3,1fr); gap:8px;
    list-style:none; padding:0; margin:0 0 24px;
    counter-reset:step;
  }
  .quote-steps .step{
    display:flex; align-items:center; gap:10px;
    padding:12px 14px; border-radius:14px; background:var(--paper);
    color:var(--ink-3); font-weight:600; font-size:14px;
  }
  .quote-steps .step .num{
    width:26px; height:26px; border-radius:50%; background:#fff;
    display:inline-flex; align-items:center; justify-content:center;
    font-size:13px; color:var(--ink-3); border:1px solid var(--line);
  }
  .quote-steps .step.on{
    background:var(--brand-soft); color:var(--brand-2);
  }
  .quote-steps .step.on .num{
    background:var(--brand); color:#fff; border-color:var(--brand);
  }
  .quote-steps .step.done .num{ background:var(--brand-pale); color:var(--brand-2) }
  @media (max-width: 640px){
    .quote-steps{ grid-template-columns:1fr; gap:6px }
  }

  .quote-step{ display:none; border:0; padding:0; margin:0 }
  .quote-step.on{ display:block }
  .quote-form .form-row{ margin-bottom:14px }
  .quote-form .form-row.form-row-2{ display:grid; grid-template-columns:1fr 1fr; gap:14px }
  @media (max-width: 640px){
    .quote-form .form-row.form-row-2{ grid-template-columns:1fr }
  }
  .quote-form label{
    display:block; font-size:13px; font-weight:600; color:var(--ink-2);
  }
  .quote-form input,
  .quote-form select,
  .quote-form textarea{
    width:100%; margin-top:6px; padding:11px 12px;
    border:1px solid var(--line); border-radius:10px; background:#fff;
    font-size:15px; color:var(--ink); font-family:inherit;
    transition:border-color .15s;
  }
  .quote-form input:focus,
  .quote-form select:focus,
  .quote-form textarea:focus{
    outline:none; border-color:var(--brand);
    box-shadow:0 0 0 3px var(--brand-soft);
  }
  .quote-form label.checkbox{
    display:flex; gap:10px; align-items:flex-start;
    font-weight:400; font-size:13px; color:var(--ink-3);
  }
  .quote-form label.checkbox input{
    width:auto; margin-top:2px;
  }
  .quote-actions{
    display:flex; gap:12px; justify-content:space-between; margin-top:24px;
    flex-wrap:wrap;
  }
  .quote-actions .btn:only-child{ margin-left:auto }
  .quote-form .iso-hp{
    position:absolute; left:-9999px; width:1px; height:1px; opacity:0;
  }

  /* Bandeau confirmation/erreur */
  .notice-quote{
    padding:14px 18px; border-radius:12px; margin:16px auto;
    max-width:1180px; font-weight:600; text-align:center;
  }
  .notice-quote.success{ background:var(--brand-soft); color:var(--brand-2) }
  .notice-quote.error{   background:#FCEDED;          color:var(--error) }