*{ 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:#fff;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }
i, cite, em, var, dfn {
  font-style: normal;
}
mark {background-color:transparent; color:inherit; font-weight:600}
ul { margin:0 0 0rem 1.4rem; padding:0 }
ul li p { margin:0; padding:0;}
h1, h2, h3 { text-wrap: balance; }

  /* NOTE : tout le chrome de la maquette HTML (.shell / .sidebar / .canvas /
     .nav-btn / .toggle-group / .device / .mode-mobile / .mode-desktop) a été
     supprimé — il était utile à l'aperçu maquettes-isoface.html mais inactif
     en prod WordPress. Le responsive est désormais piloté par @media queries. */

  /* ================ SITE ================ */
  .site{ font-size:15px; color:var(--ink-2); background:var(--paper-2); 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-2);
    position:relative;
    max-width: 1400px; 
    margin-left: auto; margin-right: auto;
  }
  .pill-btn{
    display:inline-flex; align-items:center; gap:8px;
    font-size:13px; font-weight:600; padding:10px 18px;
    border-radius:var(--radius-full); 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 (sticky) — Hauteur ≈ 78px / pill compacte ≈ 52px ------ */
  :root{ --header-h: 78px; --header-h-pill: 75px }
  .header,
  .header.anno{
    background:var(--paper-2);
    padding:10px 40px 16px;
    display:flex; align-items:center; gap:40px;
    position:sticky; top:25px; z-index:40;
    transition:
      padding .3s cubic-bezier(.4,0,.2,1),
      margin .3s cubic-bezier(.4,0,.2,1),
      border-radius .3s cubic-bezier(.4,0,.2,1),
      box-shadow .35s cubic-bezier(.4,0,.2,1),
      background-color .25s ease;
    max-width: 1400px; 
    margin-left: auto; margin-right: auto;
  }
  /* État scrolled : pill flottante quali, plus compacte, blur multicouche */
  .header.scrolled{
    padding:4px 22px;
    border-radius:var(--radius-full);
    background:rgba(255,255,255,.88);
    backdrop-filter: saturate(180%) blur(14px);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    border:1px solid var(--line);
    box-shadow:
      0 1px 0 rgba(255,255,255,.6) inset,
      0 8px 24px -10px rgba(10,10,10,.10),
      0 18px 40px -16px rgba(10,10,10,.08);
  }
  /* Transitions sur les éléments enfants pour un shrink fluide */
  .header .brand-logo,
  .header .navmain,
  .header .navmain .nav-item,
  .header .header-devis{
    transition: height .3s ease, font-size .3s ease, padding .3s ease, gap .3s ease;
  }
  .header.scrolled .brand-logo{ height:32px }
  .header.scrolled .navmain{ font-size:13px; gap:24px }
  .header.scrolled .navmain .nav-item{ padding:14px 0 }
  .header.scrolled .header-devis{ padding:6px 12px }
  /* Quand la sub-nav est collée sous le header → fusionnent en une seule pill */
  /*body.sub-stuck .header.scrolled{
    border-bottom-left-radius:0;
    border-bottom-right-radius:0;
    box-shadow:
      0 1px 0 rgba(255,255,255,.6) inset,
      0 2px 6px rgba(10,10,10,.05);
  }*/
  @media (max-width:768px){ .header, .header.anno {top: 5px;} .header.scrolled{ max-width: calc(100% - 20px); } }
  .brand{
    display:flex; align-items:center; gap:12px;
    text-decoration:none;
  }
  .brand-logo{
    height:46px; width:auto; display:block;
  }
  /* Logo personnalisé WP (Customizer) : les SVG uploadés n'ont pas de
     dimensions intrinsèques → WP n'émet pas de width/height, l'img rend
     0×0 sans hauteur CSS. Même gabarit que .brand-logo. */
  .brand .custom-logo-link{ display:block; line-height:0 }
  .brand img.custom-logo{
    height:46px; width:auto; max-width:220px; display:block;
    object-fit:contain;
    transition: height .3s ease;
  }
  .header.scrolled .brand img.custom-logo{ height:32px }
  .brand-suffix{
    font-family:"Google Sans Flex", "Inter", 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:var(--radius-sm);
    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-left:auto; font-size:14px;
    color:var(--ink); font-weight:500;
  }
  .navmain .nav-item{
    position:relative; cursor:pointer; padding:10px 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:6px;
     font-weight:600; padding:7px 14px;
    border-radius:var(--radius-full); background:var(--accent); color:#fff;
    text-decoration:none; border:0; cursor:pointer;
    line-height:1.2;
  }
  .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:var(--radius);
    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:var(--arrow-x, 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;
  }
  .mega2{
    grid-template-columns: 260px 1fr 260px 1fr;
  }
  .mega-feat-card{
    background:var(--paper-2); border-radius:var(--radius);
    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:var(--radius-sm); height:150px;
    display:flex; align-items:center; justify-content:center;
    color:var(--ink-3); font-size:11px;
  }
  /* Variante cover : l'image remplit toute la card, texte en overlay */
  .mega-feat-card.cover{
    padding:0; gap:0; min-height:220px;
    display:flex; flex-direction:column; justify-content:flex-end;
    color:#fff;
  }
  .mega-feat-card.cover .illus{
    position:absolute; inset:0;
    height:auto !important;
    border:0 !important; border-radius:0 !important; margin:0 !important;
    z-index:0;
  }
  .mega-feat-card.cover::after{
    content:""; position:absolute; inset:0;
    pointer-events:none; z-index:1;
  }
  .mega-feat-card.cover > h4,
  .mega-feat-card.cover > .mega-feat-cta{
    position:relative; z-index:2;
  }
  .mega-feat-card.cover > h4{
    color:#fff !important;
    padding:14px 16px 0; margin:0;
  }
  .mega-feat-card.cover > .mega-feat-cta{ margin:10px 14px 14px }
  .mega-feat-card h4{
    margin:0; font-size:15px; color:var(--brand);
    font-family:"Google Sans Flex", "Inter", sans-serif; font-weight:700;
  }
  .mega-feat-cta{
    margin-top:auto;
    background:var(--accent); color:#fff;
    padding:12px 16px; border-radius:var(--radius-sm);
    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); 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:var(--radius-sm);
    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 .picto{
    width:28px; height:28px; flex-shrink:0;
    object-fit:contain;
  }
  .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 }

  .site-main {margin-top: 2rem;}

  .crumbs{ max-width: 1180px;margin-top:2rem; margin-left: auto; margin-right: auto; text-align: center; color: var(--ink-3); }
  .crumbs a { color: var(--ink-3);}
  .home .crumbs{ display:none }
  /* ------ Topbar nav (editorial) ------ */
  .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) }

    .mega-wrap.mega-compact2{
    padding:22px 24px;
    width:max-content; max-width:calc(100% - 40px);
  }
  .mega-wrap.mega-compact2 .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 .picto { height: 25px; width: auto; }

  /* ------ Mega : variante synced pattern (bloc iso/mega-menu) ------ */
  .mega-wrap.mega-pattern{ padding:20px 24px 16px }
  .mega-wrap.mega-pattern .mega-pattern-inner > *{ margin:0 }
  .mega-wrap.mega-pattern .mega-bottom{ margin-top:14px }

  /* ------ Mega « Nos agences » : carte avec pastilles dynamiques ------
     Les pins sont positionnés en % via inline style (calculé par
     iso/mega-agencies-card depuis lat/lng + bounding box). L'illus doit
     donc coller exactement aux pixels de l'image : même ratio que
     fondcarte.png (1476×1502) + background étiré à 100%, sinon le
     letterbox de `contain` décale toutes les pastilles.
     La card suit la hauteur de la liste voisine (qui peut évoluer) ;
     l'illus remplit toute cette hauteur en gardant le ratio de l'image
     (façon cover), ancrée à gauche : le surplus déborde à droite (côté
     est, sans agence) et est rogné par l'overflow:hidden de la card. */
  .mega-feat-card.cover.mega-agences-map{
    /* Jamais moins haut que 240px de large × ratio image, sinon la
       carte deviendrait plus étroite que la colonne. */
    min-height:calc(240px * 1502 / 1476);
    container-type:size;
  }
  .mega-feat-card.cover.mega-agences-map .illus{
    top:0; bottom:0; left:0; right:auto;
    width:auto; aspect-ratio:1476/1502;
    background-size:100% 100%;
    background-repeat:no-repeat;
  }
  @supports (width: 1cqh) {
    .mega-feat-card.cover.mega-agences-map .illus{
      /* Largeur de l'illus = hauteur card × ratio image :
         100cqh × 1476/1502 ≈ 98.27cqh. */
      width:98.27cqh;
      /* Fenêtre de rognage glissante : les pastilles occupent ~3%→74%
         de la largeur de l'image. Tant que tout tient, on reste calé à
         gauche (left:0 via min). Quand la card grandit, on glisse vers
         la gauche juste assez pour garder Toulouse (est) visible
         (100cqw − 77.5% de la largeur ≈ 100cqw − 76.16cqh), sans
         jamais sacrifier plus de ~1.5% du bord ouest (−1.47cqh), où
         se trouvent les agences côtières. */
      left:min(0px, max(100cqw - 76.16cqh, -1.47cqh));
    }
  }
  .mega-agence-pin{
    position:absolute;
    width:14px; height:14px;
    margin:-7px 0 0 -7px;          /* recentre sur le point (top/left = ancre) */
    border-radius:50%;
    background:transparent; border:0; padding:0;
    z-index:2;
  }
  .mega-agence-pin .dot{
    display:block; width:100%; height:100%;
    border-radius:50%;
    background:var(--brand, #FD5F00);
    box-shadow:
      0 0 0 2px #fff,
      0 2px 6px rgba(0,0,0,.25);
    transition: transform .18s ease;
  }
  .mega-agence-pin:hover .dot{ transform:scale(1.25) }
  .mega-agence-pin.is-siege .dot{
    background:var(--brand-2, #018332);
    box-shadow:
      0 0 0 2px #fff,
      0 0 0 5px rgba(1,131,50,.18),
      0 2px 6px rgba(0,0,0,.25);
  }

  /* ============================================================ */
  /*    BLOC : Produits — Grille dynamique (CPT produit)            */
  /* ============================================================ */
  /* Repris du style .insulants de page-service-ite, mais réutilisable
     partout via .produits-cards (le bloc iso/produits-grid peut être
     placé sur n'importe quelle page). */
  .produits-grid .produits-cards{
    display:grid; grid-template-columns:repeat(4, 1fr); gap:14px;
  }
  .produits-grid .produit-card{
    background:#fff; border:1px solid var(--line); border-radius:var(--radius);
    padding:16px; display:flex; flex-direction:column; gap:10px;
    font-size:13px; color:var(--ink-2); overflow:hidden;
    text-decoration:none;
    transition: transform .18s ease, box-shadow .18s ease;
  }
  a.produit-card:hover{
    transform:translateY(-2px);
    box-shadow:0 6px 16px -4px rgba(10,10,10,.10);
  }
  .produits-grid .produit-card .ph{
    background:var(--wf); border:1px dashed var(--wf-line); border-radius:0;
    height:130px; margin:-16px -16px 6px;
    background-size:cover; background-position:center;
  }
  .produits-grid .produit-card b{ color:var(--ink); font-size:14px; font-weight:600 }
  .produits-grid .produit-card .small{ color:var(--ink-3); font-size:11.5px }
  @media (max-width:900px){
    .produits-grid .produits-cards{ grid-template-columns:repeat(2, 1fr) }
  }
  @media (max-width:560px){
    .produits-grid .produits-cards{ grid-template-columns:1fr 1fr; gap:10px }
  }

  /* ============================================================ */
  /*    SINGLE PRODUIT                                              */
  /* ============================================================ */
  .produit-single .produit-hero{ padding:48px 0 32px }
  .produit-hero-wrap{
    display:grid; grid-template-columns:1fr 1fr; gap:48px;
    align-items:center;
  }
  .produit-hero-text .eyebrow{
    display:inline-flex; align-items:center; gap:8px;
    font-size:12px; font-weight:700; text-transform:uppercase;
    letter-spacing:.6px; color:var(--ink-3); margin-bottom:14px;
  }
  .produit-hero-text .eyebrow .dot{ width:6px; height:6px; background:var(--accent); border-radius:50% }
  .produit-hero-text h1{
    font-family:"Google Sans Flex","Inter",sans-serif;
    font-size:44px; font-weight:700; line-height:1.1; letter-spacing:-1px;
    color:var(--ink); margin:0 0 16px;
  }
  .produit-hero-text .lead{
    font-size:17px; line-height:1.55; color:var(--ink-2); margin:0 0 28px;
  }
  .produit-hero-cta{ display:flex; gap:12px; flex-wrap:wrap }
  .produit-hero-visual img{
    width:100%; height:auto; border-radius:var(--radius-lg);
    object-fit:cover; max-height:480px;
  }

  .produit-body{ padding:24px 0 56px }
  .produit-body-wrap.has-sidebar{
    display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:48px;
    align-items:start;
  }
  .produit-content{ font-size:16px; line-height:1.7; color:var(--ink-2) }
  .produit-content h2{ font-family:"Google Sans Flex","Inter",sans-serif; font-size:28px; margin:32px 0 14px; color:var(--ink); text-align:left !important }
  .produit-content h3{ font-family:"Google Sans Flex","Inter",sans-serif; font-size:21px; margin:24px 0 10px; color:var(--ink) }
  .produit-content h4{ font-size:17px; margin:20px 0 6px; color:var(--ink); font-weight:700 }
  .produit-content p{ margin:0 0 14px }
  .produit-content ul, .produit-content ol{ margin:0 0 14px 1.2em }
  .produit-content a{ color:var(--accent); text-decoration:underline; text-underline-offset:3px }

  .produit-aside{
    position:sticky; top:96px;
    background:#fff; border:1px solid var(--line);
    border-radius:var(--radius-lg); padding:24px;
  }
  .produit-spec-box h4{ margin:0 0 16px; font-size:15px; color:var(--ink); font-weight:700 }
  .produit-spec-box h5{ margin:18px 0 8px; font-size:11.5px; text-transform:uppercase; letter-spacing:.6px; color:var(--ink-3); font-weight:700 }
  .produit-specs-list{ margin:0; display:grid; grid-template-columns:auto 1fr; gap:6px 14px; font-size:14px }
  .produit-specs-list dt{ color:var(--ink-3); font-weight:500 }
  .produit-specs-list dd{ margin:0; color:var(--ink); font-weight:600 }
  .produit-badges{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:6px }
  .produit-badges li{
    background:var(--brand-soft); color:var(--brand);
    padding:4px 10px; border-radius:var(--radius-full);
    font-size:11.5px; font-weight:600;
  }
  .produit-badges-soft li{ background:var(--paper-2); color:var(--ink-2) }
  .produit-fab-link{
    display:inline-block; margin-top:18px; color:var(--accent); font-weight:600;
    text-decoration:none; font-size:13.5px;
  }

  .produit-avantages-list{
    list-style:none; margin:0; padding:0;
    display:grid; grid-template-columns:repeat(2,1fr); gap:12px;
  }
  .produit-avantages-list li{
    background:#fff; border:1px solid var(--line); border-radius:var(--radius);
    padding:14px 18px; display:flex; align-items:flex-start; gap:12px;
    font-size:14.5px; color:var(--ink-2); line-height:1.45;
  }
  .produit-avantages-list .check{
    flex-shrink:0; width:24px; height:24px; border-radius:50%;
    background:var(--brand-2); color:#fff;
    display:flex; align-items:center; justify-content:center;
    font-weight:700; font-size:13px;
  }

  .produit-specs-table{
    width:100%; border-collapse:collapse;
    background:#fff; border:1px solid var(--line); border-radius:var(--radius);
    overflow:hidden;
  }
  .produit-specs-table th, .produit-specs-table td{
    padding:12px 18px; text-align:left; vertical-align:top;
    border-bottom:1px solid var(--line); font-size:14px;
  }
  .produit-specs-table tr:last-child th, .produit-specs-table tr:last-child td{ border-bottom:0 }
  .produit-specs-table th{ background:var(--paper-2); color:var(--ink-3); font-weight:600; width:40% }
  .produit-specs-table td{ color:var(--ink); font-weight:500 }
@media (max-width:1220px){
    .produit-hero-wrap{ padding:0 20px; }
}
  @media (max-width:900px){
    .produit-hero-wrap{ grid-template-columns:1fr; gap:24px }
    .produit-hero-text h1{ font-size:32px }
    .produit-body-wrap.has-sidebar{ grid-template-columns:1fr; gap:24px }
    .produit-aside{ position:static }
    .produit-avantages-list{ grid-template-columns:1fr }
  }

  .iso-mega-grid{
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    gap:18px;
  }
  .iso-mega-card{
    display:block; text-decoration:none; color:inherit;
    border-radius:var(--radius-sm); overflow:hidden;
    transition: transform .18s ease;
  }
  .iso-mega-card:hover{ transform:translateY(-2px) }
  .iso-mega-card-media{
    position:relative; overflow:hidden;
    aspect-ratio: 4/3;
    background:var(--paper-2);
    border-radius:var(--radius-sm);
  }
  .iso-mega-card-media img{
    width:100%; height:100%; object-fit:cover;
    transition: transform .35s ease;
  }
  .iso-mega-card-media::after{
    content:""; position:absolute; inset:0;
    background:linear-gradient(to top, rgba(0,0,0,.55), rgba(0,0,0,0) 55%);
    pointer-events:none;
  }
  .iso-mega-card:hover .iso-mega-card-media img{ transform:scale(1.06) }
  .iso-mega-card-title{
    margin:10px 2px 0;
    font-size:14px; font-weight:600; line-height:1.3;
    color:var(--ink); letter-spacing:.01em;
  }
  @media (max-width:900px){
    .iso-mega-grid{ grid-template-columns:repeat(2, 1fr); gap:14px }
  }

  /* ------ Mega : variante compacte (Réalisations) ------ */
  .mega-wrap.mega-compact{
    padding:22px 24px;
    width:max-content; max-width:calc(100% - 40px);
  }
  .mega-wrap.mega-compact .mega{
    display:block;
    grid-template-columns: none;
  }
  .mega-wrap.mega-compact .mega-cols{
    grid-template-columns:300px;
  }
  .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/7; 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:"Google Sans Flex", "Inter", 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 col h5 linked + sub-link (editorial) ------ */
  .mega-cols .col h5.linked{
    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.sub-link{
    font-size:12px; color:var(--ink-3);
    padding-top:8px; border-top:1px dashed var(--line);
    margin-top:4px;
  }
  .mega-cols .col a.sub-link:hover{ color:var(--accent) }
  .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-2); background:var(--green-soft);
    padding:5px 10px; border-radius:var(--radius-full);
    margin-bottom:1rem;
  }
  .eyebrow .dot{ width:5px;height:5px;border-radius:50%; background:var(--brand-2) }

  /* ============================================================ */
  /*    TYPOGRAPHIE GLOBALE — Hx (depuis design system)            */
  /*    Spécificité 0 via :where() : sert de défaut, est           */
  /*    overridable par toutes les règles spécifiques existantes.  */
  /* ============================================================ */
  :where(h1,h2,h3,h4,h5,h6){
    font-family:"Google Sans Flex", "Inter", sans-serif;
    font-weight:700; color:var(--ink);
    margin:0 0 .4em; line-height:1.15;
  }
  :where(h1){ font-size:44px; letter-spacing:-1px;  line-height:1.05 }
  :where(h2){ font-size:32px; letter-spacing:-.6px; line-height:1.1  }
  :where(h3){ font-size:22px; letter-spacing:-.3px; line-height:1.2  }
  :where(h4){ font-size:18px; letter-spacing:-.2px; line-height:1.25 }
  :where(h5){ font-size:14px; letter-spacing:0;     line-height:1.3  }
  :where(h6){ font-size:12px; letter-spacing:1.4px; line-height:1.35; text-transform:uppercase }

  /* Em dans h3–h6 — emphase couleur accent (orange) seulement.
     PAS de soulignement (charte : pas de text-decoration sur les Hx).
     Les soulignements animés via linear-gradient ont été retirés —
     les pills/surlignements sur h1/h2 sont conservés plus bas. */
  :where(h3,h4,h5,h6) em{
    color: var(--accent);
    font-style: normal;
    font-weight: inherit;
  }

  h2.display{
    font-family:"Google Sans Flex", "Inter", sans-serif;
    font-weight:700; font-size:66px; line-height:1.01;
    margin:20px 0 20px; color:var(--ink); letter-spacing:-2px;
  }

  /* H1 / H2 em — SURLIGNEMENT pill orange animé en in-view (highlight
     plein, pas un soulignement sous le texte). À garder : effet signature
     du design ISO&FACE pour les gros titres display. */
  h1 em,
  h2 em{
    color: var(--ink) !important;
    font-style: normal;
    font-weight: 300 !important;
    background-color: transparent;
    background-image: linear-gradient(90deg, var(--accent), var(--accent)) !important;
    background-repeat: no-repeat;
    background-size: 0% 100% !important;
    background-position: left center;
    padding: 1px 10px;
    border-radius: 6px;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
    transition: background-size .9s cubic-bezier(.4,0,.2,1) .15s,
                color .35s ease .35s;
    /* inline (pas inline-block) : sur un titre qui passe à la ligne, chaque
       fragment de ligne reçoit sa propre pilule (box-decoration-break: clone)
       au lieu d'un seul grand rectangle couvrant les deux lignes. */
    display: inline;
  }
  h1 em.in-view,
  h2 em.in-view{
    background-size: 100% 100% !important;
    color: #fff !important;
  }

  /* Pills h1/h2 mesurés en JS (main.js · initHighlightEm). Le fond orange
     est déporté sur des .hl-pill vides placés DERRIÈRE le texte : le fond
     d'un inline se peint ligne par ligne, donc avec le line-height serré
     (~1.0) le pill de la ligne N+1 recouvrait les descendantes (g, p, j…)
     de la ligne N. Ici le texte passe toujours au-dessus. Le background-image
     ci-dessus reste le fallback sans JS. */
  h1.hl-host,
  h2.hl-host{
    position: relative;
    /* Stacking context : les pills en z-index négatif restent devant les
       fonds des ancêtres (cartes, sections) au lieu de passer derrière. */
    isolation: isolate;
  }
  .hl-host em{ background-image: none !important; }
  .hl-pills{
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    user-select: none;
  }
  .hl-pill{
    position: absolute;
    background: var(--accent);
    border-radius: 6px;
    /* Même balayage gauche→droite que le background-size du fallback ;
       clip-path (plutôt que scaleX) pour ne pas déformer le radius. */
    clip-path: inset(0 100% 0 0);
    transition: clip-path .9s cubic-bezier(.4,0,.2,1) .15s;
  }
  .hl-pill.in-view{ clip-path: inset(0 0 0 0); }

  /* H3 em — emphase par la COULEUR de marque (orange) + graisse 600 (pas de
     soulignement, pas de pill comme h1/h2). Les fonds sombres (.banner-cta,
     .sec-green…) repassent en blanc via la règle dédiée ci-dessous. */
  h3 em,
  .cards-carousel-head h3 em,
  .editorial-row .text h3 em,
  .banner h3 em,
  .mm-hero h3 em{
    color: var(--brand);
    font-style: normal;
    font-weight: 600;
  }

  /* H3 em sur fond sombre/coloré — emphase blanche couleur seulement. */
  .banner-cta h3 em,
  .banner-reviews h3 em,
  .banner-search h3 em,
  .contact-banner-form h3 em,
  section.sec.sec-green h3 em,
  .cards-carousel.on-green .cards-carousel-head h3 em{
    color: #fff;
  }
  /* Plus de petit point orange en bout de titre */
  .dot-o{ display:none }
  .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 }
  /* Boutons côte-à-côte = même taille (flex-basis 0 + grow 1) */
  .hero-cta > .btn{ flex:1 1 0; min-width:0 }
  .btn{
    display:inline-flex; align-items:center; justify-content:center; gap:8px;
    font-size:16px; font-weight:600; padding:14px 22px;
    border-radius:var(--radius-full); cursor:pointer; border:1.5px solid transparent;
    text-decoration:none !important; transition:all .15s; line-height:1;
    min-width:200px; min-height:52px; box-sizing:border-box;
  }
  /* Quand le bouton a un width inline (ex: width:100%), le min-width ne le contraint pas */
  .btn[style*="width:100%"]{ min-width:0 }
  .btn.primary{ background:var(--brand); color:#fff }
  .btn.primary:hover{ background:var(--accent-2) }
  .btn.accent{ background:white; color:var(--accent) }
  .btn.accent:hover{ background:var(--accent-2); color:#fff  }
  .btn.dark{ background:var(--ink); color:#fff }
  .btn.ghost{
    background:#fff; 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; flex-shrink:0;
    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;
  }

  /* ================ Section wrappers ================ */
  section.sec{ padding:25px 40px }
  sectioon.sec.wp-block-iso-banner-reviews{ padding-top:60px; }
  section.sec.fullwidth { padding-left:0 !important; padding-right:0 !important; }
  section.sec .wrap{ max-width:1180px; margin:0 auto }
  section.sec .head{ margin-bottom:44px; max-width:780px;   margin-left: auto;
  margin-right: auto; }
  section.sec h3.title{
    margin:12px 0 12px; font-family:"Google Sans Flex", "Inter", sans-serif;
    font-size:44px; font-weight:700; color:var(--ink);
    letter-spacing:-1px; line-height:1.02;
  }
  section.sec p.sub{ margin:0; color:var(--ink-2); font-size:16px; line-height:1.55 }
  /* Watermark décoratif : picto ISO&FACE en fond très discret */
  .has-watermark{ position:relative; overflow:hidden }
  .has-watermark::before{
    content:""; position:absolute; pointer-events:none;
    background-image: url("img/picto-isoface-2.svg");
    background-repeat:no-repeat; background-position:center;
    background-size:contain;
    z-index:0;
  }
  .has-watermark > *{ position:relative; z-index:1 }
  /* Variantes de placement */
  .watermark-tr::before{ top:-80px; right:-80px; width:520px; height:520px; opacity:.05 }
  .watermark-bl::before{ bottom:-100px; left:-100px; width:480px; height:480px; opacity:.04 }
  .watermark-center::before{ top:50%; left:50%; transform:translate(-50%,-50%); width:680px; height:680px; opacity:.04 }
  /* Sur fond vert : picto blanc plus visible */
  section.sec.sec-green.has-watermark::before{
    filter: brightness(0) invert(1);
    opacity:.10;
  }

  /* Section CTA finale (avant footer) — fond vert ISO&FACE */
  section.sec.sec-green{ background:var(--brand); color:#fff }
  section.sec.sec-green h3.title{ color:#fff }
  section.sec.sec-green h2,
  section.sec.sec-green h3.title em{
    color:#fff;
  }
  section.sec.sec-green p.sub{ color:rgba(255,255,255,.85) }
  section.sec.sec-green .eyebrow{ background:#fff; color:var(--brand) }
  section.sec.sec-green .eyebrow .dot{ background:var(--brand) }
  /* iso/reals-strip — grille de réalisations */
  .sec-reals{ padding:48px 24px }
  .sec-reals > .wrap{ max-width:1180px; margin:0 auto }
  .sec-reals .head{ text-align:center; margin-bottom:28px }
  .sec-reals .head .eyebrow{
    display:inline-flex; align-items:center; gap:6px;
    font-size:11.5px; font-weight:700; letter-spacing:.8px;
    text-transform:uppercase; color:var(--brand);
    background:var(--brand-soft); padding:5px 10px; border-radius:999px;
  }
  .sec-reals .head .title{
    margin:8px 0 0;
    font-family:"Google Sans Flex","Inter",sans-serif;
    font-size:32px; font-weight:700; letter-spacing:-.6px; line-height:1.1;
    color:var(--ink);
  }
  .sec-reals .head .title em{ color:var(--brand); font-style:normal }
  .reals{
    display:grid; grid-template-columns:repeat(4, 1fr); gap:18px;
  }
  @media (max-width: 1024px){ .reals{ grid-template-columns:repeat(2, 1fr) } }
  @media (max-width: 540px){  .reals{ grid-template-columns:1fr } }
  .real{
    background:var(--paper-2); border:1px solid var(--line);
    border-radius:18px; position:relative; overflow:hidden;
    color:var(--ink-3); aspect-ratio: 4 / 3;
    display:flex; align-items:flex-end;
    text-decoration:none;
    transition: transform .15s ease, box-shadow .15s ease;
  }
  .real:hover{ transform:translateY(-2px); box-shadow:0 12px 28px rgba(19,67,52,.12) }
  .real .lab{
    background:rgba(255,255,255,.94);
    border:1px solid var(--line); border-radius:10px;
    padding:8px 12px; margin:12px;
    font-size:12.5px; font-weight:600; color:var(--ink);
    line-height:1.35;
    backdrop-filter: blur(4px);
  }
  .real.big{ grid-row: span 2 }

  /* iso/services-grid — grille cartes services / aides */
  .wp-block-iso-services-grid{ padding:48px 24px }
  .wp-block-iso-services-grid > .wrap{ max-width:1180px; margin:0 auto }
  .wp-block-iso-services-grid .head{ text-align:center; margin-bottom:28px }
  .wp-block-iso-services-grid .head .picto{
    width:56px; height:auto; margin:0 auto 16px;
    display:block;
  }
  .wp-block-iso-services-grid .head .eyebrow{
    display:inline-flex; align-items:center; gap:6px;
    font-size:11.5px; font-weight:700; letter-spacing:.8px;
    text-transform:uppercase; color:var(--brand-2);
    background:var(--green-soft); padding:5px 10px; border-radius:999px;
  }
  .wp-block-iso-services-grid .head .title{
    margin:8px 0 0;
    font-family:"Google Sans Flex","Inter",sans-serif;
    font-size:32px; font-weight:700; letter-spacing:-.6px; line-height:1.1;
    color:var(--ink);
  }
  .wp-block-iso-services-grid .head .title em{ color:var(--brand); font-style:normal }
  .services{
    display:grid; grid-template-columns:repeat(3, 1fr); gap:18px;
  }
  @media (max-width: 1024px){ .services{ grid-template-columns:repeat(2, 1fr) } }
  @media (max-width: 600px){  .services{ grid-template-columns:1fr } }
  .service-card{
    background:#fff; border:1px solid var(--line); border-radius:20px;
    padding:24px;
    display:flex; flex-direction:column; gap:8px;
    text-decoration:none; color:var(--ink);
    transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
  }
  .service-card:hover{
     border-color:var(--brand);
    box-shadow:0 10px 24px rgba(19,67,52,.08);
  }
  .service-card .icon-wrap{
    align-self:flex-start;
    font-size:11.5px; font-weight:700; letter-spacing:.4px;
    text-transform:uppercase; color:var(--brand-2);
    background:var(--green-soft);
    padding:5px 10px; border-radius:999px;
    margin-bottom:4px;
  }
  .service-card h4{
    margin:0;
    font-family:"Google Sans Flex","Inter",sans-serif;
    font-size:18px; font-weight:700; letter-spacing:-.3px;
    color:var(--ink);
  }
  .service-card .label{
    font-size:12px; font-weight:600; letter-spacing:.4px;
    text-transform:uppercase; color:var(--brand);
  }
  .service-card p{
    margin:0; font-size:14px; line-height:1.55; color:var(--ink-2);
  }
  .service-card .arrow{
    margin-top:auto; padding-top:14px;
    font-size:13.5px; font-weight:700; color:var(--brand);
    display:inline-flex; align-items:center; gap:6px;
  }
  .simu-form{
    background:#fff; border-radius:var(--radius); 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:var(--radius-sm); 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 }

  /* ============================================================ */
  /*    SIMU FORM — CF7 (bloc « Aides 2026 / rappel rapide »)       */
  /* ============================================================ */
  /* Le bloc .simu est sur fond orange (--accent) avec texte blanc.
     Le titre h3 em ne doit PAS hériter du gradient blanc des banners. */
  .simu{
    background:var(--accent); color:#fff;
    border-radius:var(--radius-lg); padding:48px 56px;
    display:grid; grid-template-columns:1fr 1fr; gap:48px;
    align-items:center;
  }
  .simu h3{ color:#fff; font-size:32px; line-height:1.18; margin:14px 0 16px }
  .simu h3 em{
    color:#fff !important;
    font-weight:700 !important;
    font-style:normal;
    background:none !important; background-image:none !important;
    text-decoration:underline;
    text-decoration-color:rgba(255,255,255,.55);
    text-decoration-thickness:2px;
    text-underline-offset:6px;
    padding:0;
  }
  .simu p{ color:rgba(255,255,255,.92); font-size:15.5px; line-height:1.6; margin:0 0 24px }
  .simu .eyebrow{
    background:rgba(255,255,255,.18); color:#fff;
    padding:4px 14px; border-radius:var(--radius-full);
    font-size:11px; letter-spacing:.6px; font-weight:600;
    display:inline-flex; align-items:center; gap:6px;
  }
  .simu .eyebrow .dot{ width:6px; height:6px; background:#fff; border-radius:50% }
  .simu > div:first-child > .btn.accent{
    background:#fff; color:var(--accent);
    box-shadow: 0 4px 14px -4px rgba(0,0,0,.15);
  }

  /* CF7 form dans .simu-form — layout 2 cols grid + champs propres */
  .simu-form .wpcf7-form{
    display:grid; grid-template-columns:1fr 1fr; gap:14px;
  }
  .simu-form .wpcf7-form > label{
    display:flex; flex-direction:column; gap:6px;
    font-size:11.5px; font-weight:600; color:var(--ink-3);
    text-transform:uppercase; letter-spacing:.4px;
    margin:0;
  }
  /* Champs full-width que l'on souhaite étaler sur 2 cols */
  .simu-form .wpcf7-form > label.cf7-full,
  .simu-form .wpcf7-form > p.cf7-full{ grid-column:1 / -1 }
  /* RGPD + submit sur toute la largeur */
  .simu-form .wpcf7-form > label:has(input.checkbox),
  .simu-form .wpcf7-form > label:has(input[type="checkbox"]){
    grid-column:1 / -1; flex-direction:row; align-items:center; gap:10px;
    text-transform:none; letter-spacing:0; color:var(--ink-2);
    font-size:13px; font-weight:500;
  }
  .simu-form .wpcf7-form > input[type="submit"],
  .simu-form .wpcf7-form > .wpcf7-submit{ grid-column:1 / -1 }

  /* Inputs / select / textarea */
  .simu-form .wpcf7-form-control:not(.wpcf7-submit):not([type="checkbox"]):not([type="radio"]):not(.wpcf7-acceptance):not(.wpcf7-list-item-label){
    width:100%; height:46px;
    border:1.5px solid var(--line-2); border-radius:var(--radius-sm);
    padding:0 14px; background:#fff;
    font-size:14px; color:var(--ink);
    font-family:inherit;
    transition: border-color .18s ease, box-shadow .18s ease;
  }
  .simu-form .wpcf7-textarea{ height:auto; min-height:96px; padding:12px 14px; resize:vertical }
  .simu-form .wpcf7-form-control:focus{
    outline:none; border-color:var(--accent);
    box-shadow: 0 0 0 3px rgba(253,95,0,.15);
  }
  .simu-form .wpcf7-not-valid{ border-color:var(--error,#D64545) !important }
  .simu-form .wpcf7-not-valid-tip{
    color:var(--error,#D64545); font-size:11.5px; font-weight:500;
    margin-top:4px; text-transform:none; letter-spacing:0;
  }


  .wp-block-button__link {background-color: var(--accent); color: white !important; }
  /* Submit button */
  .simu-form input[type="submit"],
  .simu-form .wpcf7-submit{
    appearance:none; -webkit-appearance:none;
    background:var(--accent); color:#fff; border:0;
    border-radius:var(--radius-full); padding:14px 26px;
    font-size:14px; font-weight:700; letter-spacing:.2px;
    cursor:pointer; width:100%;
    transition: background .18s ease, transform .12s ease;
    box-shadow: 0 6px 16px -6px rgba(253,95,0,.4);
  }
  .simu-form input[type="submit"]:hover,
  .simu-form .wpcf7-submit:hover{ background:var(--accent-2,#E04E00) }
  .simu-form input[type="submit"]:active{ transform:translateY(1px) }

  /* Wpcf7 wrapper internes (spans qui entourent les inputs) */
  .simu-form .wpcf7-form-control-wrap{ display:block; width:100% }

  /* Mobile : empile tout */
  @media (max-width: 900px){
    .simu{ grid-template-columns:1fr; gap:24px; padding:32px 28px }
    .simu h3{ font-size:26px }
    .simu-form .wpcf7-form{ grid-template-columns:1fr }
  }

  /* 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:var(--radius-full);
    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:"Google Sans Flex", "Inter", 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;
  }
  .map{
    background: repeating-linear-gradient(45deg, var(--paper-2) 0 14px, #E0DBD0 14px 28px);
    border:1px dashed var(--wf-line);
    border-radius:var(--radius); 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:var(--radius);
    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;
  }

  /* Footer */
  .footer{
    background:var(--green-dark); 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:13px; 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: white;
  }
  .footer ul li a {font-size:13px;}
  .footer ul li{ cursor:pointer }
  .footer ul li:hover{ color:#fff }
  /* Liens header & footer : pas de soulignement par défaut ; liens footer en blanc */
  .header a,
  .header a:hover,
  .header a:focus,
  .footer a,
  .footer a:hover,
  .footer a:focus{ text-decoration:none }
  .footer a{ color:#fff }
  .footer a:hover{ color:#fff; opacity:.85 }
  .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:13px; line-height:1.6; color:white; 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:13px; color:white;
  }

  /* Branchement photo : data-img ou style="background-image:url(…)" — n'importe quel élément */
  [data-img], [style*="background-image:url"]{
    background-size:cover !important;
    background-position:center !important;
    background-repeat:no-repeat !important;
    /* Pas de pointillés autour des images chargées */
    border:0 !important;
  }
  .ph[data-img], .ph[style*="background-image"],
  .team-photo[data-img], .real[data-img]{
    background-color:transparent !important;
    color:transparent;
  }
  /* Cacher les annotations de dimensions (« 1200×900 · 4:3 ») sur images chargées */
  [data-img] .dim-anno{ display:none }

  /* Personnages détourés (PNG transparent) — overlay positionné sur une section */
  .human-cutout{
    position:absolute; pointer-events:none;
    height:auto; width:auto;
    filter: drop-shadow(0 16px 32px rgba(0,0,0,.18));
    z-index:5;
  }
  .human-cutout.bottom-right{ bottom:13%; right:6%; height:50% }
  .human-cutout.bottom-left{  bottom:0; left:6%;  height:50% }
  .human-cutout.center-right{ top:50%; right:0; transform:translateY(-50%); height:65% }
  /* Wrapper pour pouvoir poser .human-cutout en absolu */
  .has-cutout{ position:relative; overflow:visible }
  /* Slot vide visible quand src manquant ou en attente */
  .cutout-slot{
    display:flex; align-items:flex-end; justify-content:center;
    width:280px; height:380px;
    background: repeating-linear-gradient(45deg, var(--paper-2) 0 12px, var(--paper-3) 12px 24px);
    border: 2px dashed var(--line-2);
    border-radius: var(--radius);
    color: var(--ink-3); font-size: 12px; padding: 16px;
    text-align: center; box-sizing: border-box;
  }
  /* FAQ : centre l'eyebrow / titre / sous-titre du bloc */
  .faq-section .head{ margin-left:auto; margin-right:auto; text-align:center }
  .faq-section .head .eyebrow{ margin-left:auto; margin-right:auto }

  .word-count{
    display:inline-flex; align-items:center; gap:10px;
    background:var(--brand-soft); color:var(--brand);
    padding:7px 14px; border-radius:var(--radius-full);
    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:"Google Sans Flex", "Inter", sans-serif;
    font-size:15px; font-weight:700; letter-spacing:-.3px;
    text-transform:none;
  }
  .swatch-color{ aspect-ratio: 5/4; position:relative }
  .swatch-color .hex-on{
    position:absolute; bottom:12px; left:12px; 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);
  }

  /* buttons showcase */
  .btn-row{
    display:grid; grid-template-columns: repeat(4, 1fr);
    gap:14px;
  }

  /* 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 }
  .radio-opt{
    background:#fff; border:1.5px solid var(--line-2); border-radius:var(--radius-sm);
    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 }

  /* AGENCES HUB */
  .map-big{
    background: repeating-linear-gradient(45deg, var(--paper-2) 0 14px, #E0DBD0 14px 28px);
    border:1px dashed var(--wf-line); border-radius:var(--radius);
    position:relative; min-height:520px;
  }
  .filters{ display:flex; gap:8px; margin-bottom:22px; flex-wrap:wrap }

  /* iso/pillar-row — bloc alterné (.pillars > .pillar) */
  .pillars{ display:grid; grid-template-columns:1fr; gap:22px; max-width:1180px; margin:0 auto }
  .pillar{
    background:#fff; border:1px solid var(--line); border-radius:24px;
    padding:32px;
    display:grid; grid-template-columns:1fr 1fr; gap:32px; align-items:center;
    transition: border-color .15s ease, box-shadow .15s ease;
  }
  .pillar.reverse{ direction:rtl }
  .pillar.reverse > *{ direction:ltr }
  .pillar:hover{ border-color:var(--brand); box-shadow:0 12px 28px rgba(19,67,52,.06) }
  .pillar .txt h2{
    margin:10px 0 12px;
    font-family:"Google Sans Flex","Inter",sans-serif;
    font-size:28px; font-weight:700; letter-spacing:-.5px; line-height:1.15;
    color:var(--ink);
  }
  .pillar .txt h2 em{ color:var(--brand); font-style:normal; font-weight:700 }
  .pillar .txt .tags{ display:flex; gap:6px; flex-wrap:wrap; margin-bottom:14px }
  .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:14.5px; color:var(--ink-2); line-height:1.6; margin:0 0 12px }
  .pillar .txt ul{
    font-size:14px; color:var(--ink-2); line-height:1.7;
    padding-left:20px; margin:10px 0 18px;
  }
  .pillar .txt ul li{ margin-bottom:4px }
  .pillar .txt .btn{ margin-top:6px }
  .pillar .ph{
    background:var(--paper-2);
    border-radius:18px; min-height:280px; aspect-ratio:4/3;
    display:flex; align-items:center; justify-content:center;
    overflow:hidden;
  }
  /* Variante vidéo : poster + bouton play qui ouvre la modale (initVideoModal). */
  .pillar .ph.has-video{ position:relative; cursor:pointer }
  .pillar .ph.has-video::after{
    content:""; position:absolute; inset:0;
    background:rgba(10,10,10,.18); transition:background .15s ease;
  }
  .pillar .ph.has-video:hover::after{ background:rgba(10,10,10,.30) }
  .pillar .ph .play-btn{
    position:relative; z-index:2;
    width:72px; height:72px; border-radius:50%;
    border:none; cursor:pointer;
    background:var(--accent, #e8662a); color:#fff;
    display:flex; align-items:center; justify-content:center;
    box-shadow:0 8px 24px rgba(0,0,0,.25);
    transition:transform .15s ease, background .15s ease;
  }
  .pillar .ph .play-btn:hover{ transform:scale(1.08) }
  .pillar .ph .play-btn svg{ width:30px; height:30px; margin-left:3px }
  @media (max-width: 900px){
    .pillar .ph .play-btn{ width:60px; height:60px }
    .pillar .ph .play-btn svg{ width:24px; height:24px }
  }
  @media (max-width: 900px){
    .pillar{ grid-template-columns:1fr; padding:22px }
    .pillar.reverse{ direction:ltr }
    .pillar .ph{ aspect-ratio:16/10; min-height:200px }
  }

  /* iso/pagehead — section hero éditoriale (bloc rendu avec class .pillar-hero) */
  .pillar-hero{
    padding:60px 24px;
    background:var(--paper-2);
  }
  .pillar-hero .wrap{
    max-width:1180px; margin:0 auto;
  }
  /* Variante centrée (pas d'image) : texte aligné au centre, paragraphes auto-centrés. */
  .pillar-hero.is-center .wrap{ text-align:center }
  .pillar-hero.is-center .pillar-hero-body{ display:flex; flex-direction:column; align-items:center }
  .pillar-hero.is-center h1,
  .pillar-hero.is-center h1.display,
  .pillar-hero.is-center p,
  .pillar-hero.is-center p.lead{ margin-left:auto; margin-right:auto }
  .pillar-hero.is-center .hero-cta{ justify-content:center }
  /* Variante avec image à droite : layout 2 colonnes. */
  .pillar-hero.has-media .wrap{
    display:grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
    gap:48px; align-items:center;
  }
  .pillar-hero.has-media .pillar-hero-body{ min-width:0 }
  .pillar-hero-media{
    border-radius:var(--radius-lg, 22px); overflow:hidden;
    background:#eee; aspect-ratio:4/3;
  }
  .pillar-hero-media img{
    width:100%; height:100%; object-fit:cover; display:block;
  }
  @media (max-width: 900px){
    .pillar-hero.has-media .wrap{ grid-template-columns:1fr; gap:24px }
    .pillar-hero.has-media .pillar-hero-media{ order:-1; aspect-ratio:16/10 }
  }
  .pillar-hero .eyebrow{
    display:inline-flex; align-items:center; gap:6px;
    font-size:11.5px; font-weight:700; letter-spacing:.8px;
    text-transform:uppercase; color:var(--brand-2);
    background:var(--green-soft); padding:5px 10px; border-radius:999px;
    margin-bottom:14px;
  }
  .pillar-hero .eyebrow .dot{
    width:6px; height:6px; border-radius:50%; background:var(--brand-2);
  }
  .pillar-hero h1,
  .pillar-hero h1.display{
    margin:0 0 18px;
    font-family:"Google Sans Flex","Inter",sans-serif; font-weight:700;
    font-size:56px; line-height:1.04; color:var(--ink);
    letter-spacing:-1.4px;
    max-width:980px;
  }
  .pillar-hero h1 em{ color:var(--ink); font-style:normal }
  .pillar-hero h1 .dot-o{ color:var(--accent); font-style:normal }
  .pillar-hero p,
  .pillar-hero p.lead{
    margin:0; color:var(--ink-2);
    font-size:17px; line-height:1.6; max-width:720px;
  }
  .pillar-hero .hero-cta{
    display:flex; flex-wrap:wrap; gap:12px; margin-top:24px;
  }
  /* Réassurance Google + Eldo sous les CTA. */
  .pillar-hero .pillar-hero-trust{ margin-top:22px }
  /* Chiffres clés (pages pilier) — rangée de métriques sous un filet. */
  .pillar-hero .metrics{
    display:flex; flex-wrap:wrap; gap:36px;
    margin-top:30px; padding-top:24px;
    border-top:1px solid var(--line);
  }
  .pillar-hero.is-center .metrics{ justify-content:center }
  .pillar-hero .metrics > div{ display:flex; flex-direction:column; gap:4px }
  .pillar-hero .metrics b{
    font-family:"Google Sans Flex", -apple-system, BlinkMacSystemFont, sans-serif;
    font-size:30px; font-weight:800; line-height:1;
    color:var(--accent); letter-spacing:-.5px;
  }
  .pillar-hero .metrics span{
    font-size:12px; font-weight:600; text-transform:uppercase;
    letter-spacing:.6px; color:var(--ink-2);
  }
  @media (max-width: 768px){
    .pillar-hero{ padding:36px 16px }
    .pillar-hero h1, .pillar-hero h1.display{ font-size:34px; letter-spacing:-.6px }
    .pillar-hero p, .pillar-hero p.lead{ font-size:15.5px }
    .pillar-hero .metrics{ gap:20px 28px }
    .pillar-hero .metrics b{ font-size:24px }
  }

  .dept-grid{ display:grid; grid-template-columns: repeat(4, 1fr); gap:18px; margin-top:30px }
  @media (max-width: 1024px){ .dept-grid{ grid-template-columns: repeat(2, 1fr) } }
  @media (max-width: 540px){  .dept-grid{ grid-template-columns: 1fr } }
  .dept-card{
    background:#fff; border:1px solid var(--line); border-radius:22px;
    padding:24px;
    display:flex; flex-direction:column; gap:10px;
    text-decoration:none; color:var(--ink);
    transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
  }
  .dept-card:hover{
    border-color:var(--brand); transform:translateY(-2px);
    box-shadow: 0 10px 24px rgba(19,67,52,.08);
  }
  .dept-card .num{
    font-family:"Google Sans Flex", -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-family:"Google Sans Flex", -apple-system, BlinkMacSystemFont, sans-serif;
    font-size:17px; color:var(--ink); font-weight:700;
  }
  .dept-card .line{
    font-size:13px; color:var(--ink-3); line-height:1.55;
  }
  .dept-card .cta{
    margin-top:auto; padding-top:6px;
    color:var(--accent); font-weight:700; font-size:13.5px;
    display:inline-flex; align-items:center; gap:6px;
  }
  .dept-card--hors-zone{
    background:var(--brand-soft); border-color:transparent;
  }
  .dept-card--hors-zone .num{ color:var(--accent) }
  /* Logos sources avis (image) */
  .brand-logo-img{ display:block; height:18px; width:auto; object-fit:contain }
  .brand-logo-img.google{ height:20px }
  .brand-logo-img.eldo{ height:18px }
  .agence-card h1{
    margin:14px 0 8px; font-family:"Google Sans Flex", "Inter", sans-serif; font-weight:700;
    font-size:52px; color:var(--ink); 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 }

  .team{ display:grid; grid-template-columns: repeat(4, 1fr); gap:18px }

  /* 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:var(--radius-full);
    letter-spacing:.4px; z-index:5;
    font-family:"Inter", sans-serif; text-transform:none;
  }
  body.hide-anno .anno::before{ display:none }
  /* Volume SEO (.word-count) traité comme une annotation : disparaît en vue épurée */
  body.hide-anno .word-count{ display:none }

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

  /* Helpers pictos inline (SVG en remplacement d'emojis) */
  .ico-inline{
    display:inline-block;
    width:1em; height:1em;
    vertical-align:-.15em;
    object-fit:contain;
    margin-right:2px;
      filter: brightness(0) invert(1);
  }
  .ico-block{
    display:block;
    width:32px; height:32px;
    margin:0 auto;
    object-fit:contain;
  }
  /* Variante 2-cards centrées (contact "Pas envie de remplir un formulaire") */
  .dept-grid.dept-grid-pair{
    grid-template-columns: repeat(2, minmax(0, 320px));
    justify-content:center;
    max-width:680px; margin-left:auto; margin-right:auto;
  }

  svg{ display:block }

  /* ============================================================ */
  /*    MOBILE — Bottom bar flottante + Menu drawer                */
  /* ============================================================ */
  .mobile-bottom{
    display:none;
    position:fixed; bottom:16px; left:12px; right:12px;
    background:#fff; border:1px solid var(--line);
    border-radius:var(--radius-full);
    padding:6px;
    box-shadow: 0 8px 28px rgba(10,10,10,.14);
    z-index:50;
    align-items:center; gap:6px;
  }
  .mb-menu{
    background:var(--paper-2); border:0;
    border-radius:var(--radius-full);
    padding: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;
  }
  .mb-menu .ic span:nth-child(2){ width:70% }
  .mb-devis{
    flex:1; background:var(--accent); color:#fff;
    border-radius:var(--radius-full);
    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;
  }
  .mobile-menu{
    display:none;
    position:fixed; inset:0;
    background:var(--paper);
    z-index:1000;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    transform:translateY(100%);
    transition: transform .35s cubic-bezier(.4,0,.2,1);
  }
  .mm-open{ overflow:hidden }
  .mm-open .mobile-menu{ transform:translateY(0) }

  /* ============================================================ */
  /*    VIDEO MODAL — bloc iso/video-kpi (.play-btn[data-video])   */
  /* ============================================================ */
  .video-modal{
    position:fixed; inset:0;
    background:rgba(10,10,10,.88);
    z-index:1100;
    display:flex; align-items:center; justify-content:center;
    padding:24px;
    opacity:0; transition: opacity .25s ease;
  }
  .video-modal.is-open{ opacity:1 }
  .video-modal-open{ overflow:hidden }
  .video-modal__close{
    position:absolute; top:18px; right:18px;
    width:44px; height:44px; border-radius:50%;
    background:rgba(255,255,255,.12); color:#fff;
    border:1px solid rgba(255,255,255,.18);
    font-size:18px; cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    transition: background .15s ease;
  }
  .video-modal__close:hover{ background:rgba(255,255,255,.22) }
  .video-modal__frame{
    width:100%; max-width:1100px;
    aspect-ratio:16/9;
    background:#000;
    border-radius:var(--radius);
    overflow:hidden;
    box-shadow: 0 20px 60px -20px rgba(0,0,0,.6);
  }
  .video-modal__frame iframe,
  .video-modal__frame video{
    width:100%; height:100%; display:block; border:0;
  }
  /* Quand pas d'URL, le bouton est désactivé visuellement */
  .play-btn[disabled]{ opacity:.5; cursor:not-allowed }

  /* ============================================================ */
  /*    EMBED POSTER — miniature perso sur core/embed YouTube     */
  /*    (façade image + play ; l'iframe se charge au clic)        */
  /* ============================================================ */
  .iso-embed-poster .wp-block-embed__wrapper{ position:relative }
  .iso-embed-poster__btn{
    position:relative; display:block; width:100%;
    aspect-ratio:16/9;
    padding:0; border:0; border-radius:var(--radius);
    overflow:hidden; cursor:pointer; background:#000;
  }
  .iso-embed-poster__img{
    width:100%; height:100%; object-fit:cover; display:block;
    transition:transform .3s ease;
  }
  .iso-embed-poster__btn:hover .iso-embed-poster__img{ transform:scale(1.03) }
  .iso-embed-poster__play{
    position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
    width:72px; height:72px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    background:var(--accent, #fd5f00); color:#fff;
    box-shadow:0 8px 24px rgba(0,0,0,.35);
    transition:transform .2s ease;
  }
  .iso-embed-poster__btn:hover .iso-embed-poster__play{ transform:translate(-50%,-50%) scale(1.08) }
  .iso-embed-poster__play svg{ width:28px; height:28px; margin-left:4px }
  .iso-embed-poster .wp-block-embed__wrapper iframe{
    width:100%; aspect-ratio:16/9; border:0;
    border-radius:var(--radius); display:block; background:#000;
  }
  @media (max-width: 900px){
    .iso-embed-poster__play{ width:56px; height:56px }
    .iso-embed-poster__play svg{ width:22px; height:22px }
  }

  .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:38px }
  .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:"Google Sans Flex", "Inter", sans-serif;
    font-size:28px; font-weight:700; letter-spacing:-.6px; line-height:1.05; color: white;
  }
  .mm-hero h3 em{ color:white;  background-image: linear-gradient(90deg, var(--accent), var(--accent)); }
  .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:var(--radius-full);
    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;
    font-family:"Google Sans Flex", "Inter", sans-serif;
    font-size:20px; 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 */
  .mm-foot{
    padding:24px 18px;
    background:var(--paper-2);
    border-top:1px solid var(--line);
  }
  .mm-foot .mm-phone{
    display:flex; align-items:center; justify-content:center; gap:12px;
    background:#fff; border:1px solid var(--line);
    border-radius:var(--radius-sm); padding:14px;
    font-size:15px; font-weight:700; color:var(--ink);
    text-decoration:none; margin-bottom:14px;
  }
  .mm-foot .mm-phone .num{ font-family:"Google Sans Flex", "Inter", sans-serif; letter-spacing:0 }
  .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;
  }

  /* ============================================================ */
  /*    LIBRARY page (99) — Galerie de blocs                       */
  /* ============================================================ */
  .lib-wrap{
    background: var(--paper-2);
    padding: 60px 40px;
  }
  .lib-section{ max-width:1380px; margin:0 auto 80px }
  .lib-section.sectionfullwidth{ max-width:calc(100% + 80px); margin:0 -40px 80px; width: calc(100% + 80px); }
  .lib-section-head{
    margin-bottom:28px;
    display:flex; align-items:baseline; gap:14px; flex-wrap:wrap;
  }
  .lib-section-head h2{
    font-family:"Google Sans Flex", sans-serif;
    font-size:28px; font-weight:700; letter-spacing:-.6px;
    color:var(--ink); margin:0;
  }
  .lib-section-head code{
    background:var(--ink); color:#fff;
    padding:4px 10px; border-radius:8px;
    font-size:12px; font-family: ui-monospace, Menlo, monospace;
  }
  .lib-section-head .lib-note{
    width:100%; margin:6px 0 0; color:var(--ink-3);
    font-size:14px; line-height:1.5;
  }

  /* ============================================================ */
  /*    BLOC : Hero accueil v2 (template ACCUEIL.png)              */
  /* ============================================================ */
  .hero-v2{
    display:grid;
    grid-template-columns: 4fr 4fr;
    gap:0;
    max-width:1380px; margin:0 auto;
    position:relative;
  }
  .hero-v2 .hero-card{
    background:#fff;
    border-radius:var(--radius-lg) 0 0 28px;
    margin:2rem 0;
    padding:26px 44px 26px;
    display:flex; flex-direction:column;
    justify-content:space-between;
    box-shadow:
      0 1px 0 rgba(255,255,255,.6) inset,
      0 8px 24px -12px rgba(10,10,10,.08),
      0 24px 48px -20px rgba(10,10,10,.06);
    position:relative;
      height: calc(590px - 4rem);
  }
  .hero-v2 .hero-card h1{
    font-family:"Google Sans Flex", "Inter", sans-serif;
    font-size:46px; font-weight:700;
    line-height:1.08; letter-spacing:-1.4px;
    color:var(--ink); margin:0 0 22px;
  }
  .hero-v2 .hero-card .lead{
    color:var(--ink-2); font-size:15.5px;
    line-height:1.55; margin:0 0 28px; max-width:none;
  }
  .hero-v2 .hero-card .lead b{ color:var(--ink); font-weight:700 }
  .hero-v2 .hero-cta{
    display:flex; gap:12px; flex-wrap:wrap;
    margin:0 0 28px;
  }
  .hero-v2 .hero-cta .btn{ min-width:0; flex:1 1 0 }

  .hero-v2 .hero-visual{
    border-radius:var(--radius-lg);
    position:relative;
    background-color:#dccfb8;
    background-size:cover; background-position:center;
    height:590px;
  }
  .hero-v2 .hero-visual::after{
    content:""; position:absolute; inset:0;
    background: linear-gradient(180deg, rgba(0,0,0,0) 55%, rgba(0,0,0,.18) 100%);
    pointer-events:none; z-index:1;  border-radius: var(--radius-lg);
  }
  /* Cutout = enfant direct de .hero-v2 (pas de .hero-visual) → peut empiéter */
  .hero-v2 .hero-visual > .hero-cutout{
    position:absolute;
    bottom:0;
    /* Démarre à ~38% pour que le bord gauche empiète juste un peu sur la card gauche */
    left:-5%;
    height:auto;
    max-height:96%;
    max-width:42%;
    width:auto;
    object-fit:contain;
    object-position:bottom center;
    pointer-events:none;
    z-index:5;
    /* Le détourage est porté par la règle .person (clip-path: url(#hero-clip)).
       Les anciens masques #card-shape/#photo-shape n'existent plus. */
  }
  .hero-v2 .hero-badge,
  .hero-v3 .hero-badge,
  .hero-v4 .hero-badge{
    position:absolute;
    bottom:20px; right:20px;
    background:rgba(255,255,255,.96);
    border:1px solid var(--line);
    border-radius:var(--radius-sm);
    padding:10px 14px 10px 12px;
    display:flex; align-items:center; gap:12px;
    z-index:3;
    box-shadow: 0 6px 16px -4px rgba(10,10,10,.12);
  }
  .hero-v2 .hero-badge img.picto,
  .hero-v3 .hero-badge img.picto,
  .hero-v4 .hero-badge img.picto{ height:34px; width:auto }
  .hero-v2 .hero-badge .badge-text,
  .hero-v3 .hero-badge .badge-text,
  .hero-v4 .hero-badge .badge-text{
    display:flex; flex-direction:column;
    font-family:"Google Sans Flex", sans-serif;
    line-height:1.15;
  }
  .hero-v2 .hero-badge .badge-text strong,
  .hero-v3 .hero-badge .badge-text strong,
  .hero-v4 .hero-badge .badge-text strong{
    font-size:13px; font-weight:700; color:var(--ink);
    letter-spacing:-.2px;
  }
  .hero-v2 .hero-badge .badge-text small,
  .hero-v3 .hero-badge .badge-text small,
  .hero-v4 .hero-badge .badge-text small{
    font-size:10px; font-weight:500; color:var(--ink-3);
    text-transform:uppercase; letter-spacing:.6px;
    margin-top:2px;
  }
  @media screen and (max-width:900px) {
    .hero-v2 .hero-badge .badge-text strong,
    .hero-v3 .hero-badge .badge-text strong,
    .hero-v4 .hero-badge .badge-text strong{
      font-size:11px; 
    }
    .hero-v2 .hero-badge .badge-text small,
    .hero-v3 .hero-badge .badge-text small,
    .hero-v4 .hero-badge .badge-text small{
    font-size:8px;
    }
  }
  /* ============================================================ */
  /*    BLOC : Hero v3 — photo plein écran, contenu centré         */
  /*    (variant "v3" du bloc iso/hero — la v2 reste le défaut).   */
  /*    Le header passe en transparent via body.has-hero-v3.       */
  /* ============================================================ */
  .hero--fullscreen{ margin:0 !important; padding:0 !important }
  .hero-v3{
    position:relative;
    min-height:100svh;
    display:flex; align-items:center; justify-content:center;
    background-color:#20242a;
    background-size:cover; background-position:center;
  }
  /* Voile sombre : lisibilité du texte blanc + du header transparent. */
  .hero-v3::after{
    content:""; position:absolute; inset:0;
    background:linear-gradient(180deg,
      rgba(10,10,10,.55) 0%,
      rgba(10,10,10,.28) 32%,
      rgba(10,10,10,.28) 68%,
      rgba(10,10,10,.5) 100%);
  }
  .hero-v3__inner{
    position:relative; z-index:2;
    max-width:860px; padding:140px 24px 90px;
    text-align:center; color:#fff;
  }
  .hero-v3__inner h1{
    font-family:"Google Sans Flex", "Inter", sans-serif;
    font-size:52px; font-weight:700;
    line-height:1.12; letter-spacing:-1.4px;
    color:#fff; margin:0 0 18px;
  }
  .hero-v3__inner .lead{
    color:rgba(255,255,255,.92);
    font-size:17px; line-height:1.6;
    max-width:640px; margin:0 auto 28px;
  }
  .hero-v3__inner .lead b{ color:#fff; font-weight:700 }
  .hero-v3 .hero-cta{
    display:flex; gap:12px; justify-content:center; flex-wrap:wrap;
    margin:0 0 26px;
  }
  /* Annule le flex:1 générique de .hero-cta > .btn : boutons à leur taille. */
  .hero-v3 .hero-cta > .btn{ flex:0 0 auto }
  .hero-v3 .reviews-trust{ display:inline-flex; justify-content:center }
  .hero-v3 .hero-badge{ bottom:24px; right:24px; z-index:2 }

  /* Header transparent au-dessus du hero v3 : la photo remonte sous le
     header (hauteur --header-h) ; l'état .scrolled (pill blanche) reprend
     le dessus dès 40px de scroll et retrouve ses couleurs normales. */
  body.has-hero-v3 .site-main{ margin-top:0 }
  body.has-hero-v3 .crumbs{ display:none }
  body.has-hero-v3 .hero--fullscreen .hero-v3{ margin-top:calc(-1 * var(--header-h)) }
  body.has-hero-v3 .header:not(.scrolled){ background:transparent }
  body.has-hero-v3 .header:not(.scrolled) .brand-logo,
  body.has-hero-v3 .header:not(.scrolled) .brand img.custom-logo{ filter:brightness(0) invert(1) }
  /* Les items sont des <a class="nav-item"> : couleur posée sur eux
     directement (l'héritage depuis .navmain est court-circuité par la
     couleur de lien globale). */
  body.has-hero-v3 .header:not(.scrolled) .navmain,
  body.has-hero-v3 .header:not(.scrolled) .navmain .nav-item{ color:#fff }
  body.has-hero-v3 .header:not(.scrolled) .navmain .nav-item:hover{ color:rgba(255,255,255,.8) }
  body.has-hero-v3 .header:not(.scrolled) .navmain .nav-item.current{ color:#fff }
  body.has-hero-v3 .header:not(.scrolled) .navmain .nav-item .chev{ color:rgba(255,255,255,.7) }

  @media (max-width:768px){
    .hero-v3__inner{ padding:110px 20px 70px }
    .hero-v3__inner h1{ font-size:32px; letter-spacing:-1px }
    .hero-v3__inner .lead{ font-size:15.5px }
    /* CTA empilés mais à leur taille naturelle (pas de pleine largeur). */
    .hero-v3 .hero-cta{ flex-direction:column; align-items:center; gap:10px }
    /* Badge masqué : risque de chevauchement avec le bloc avis centré. */
    .hero-v3 .hero-badge{ display:none }
  }

  /* ============================================================ */
  /*    BLOC : Hero v4 — titre centré + grande photo + avis        */
  /*    (variant "v4" du bloc iso/hero). Header normal, photo      */
  /*    unique en cover — pas de cutout personnage.                */
  /* ============================================================ */
  .hero-v4{
    max-width:1380px; margin:0 auto;
  }
  .hero-v4__head{
    text-align:center;
    max-width:960px; margin:0 auto 34px;
  }
  .hero-v4__head h1{
    font-family:"Google Sans Flex", "Inter", sans-serif;
    font-size:42px; font-weight:700;
    line-height:1.15; letter-spacing:-1.2px;
    color:var(--ink); margin:0 0 18px;
  }
  .hero-v4__head .lead{
    color:var(--ink-2); font-size:16px;
    line-height:1.6; max-width:100%;
    margin:0 auto 26px;
  }
  .hero-v4__head .hero-ctas-reviews{ display:flex; align-items:center; gap:20px; flex-direction: row; justify-content:center; flex-wrap:wrap; }
  .hero-v4__head .lead b{ color:var(--ink); font-weight:700 }
  .hero-v4 .hero-cta{
    display:flex; gap:12px; justify-content:center; flex-wrap:wrap;
    margin:0;
  }
  /* Annule le flex:1 générique de .hero-cta > .btn : boutons à leur taille. */
  .hero-v4 .hero-cta > .btn{ flex:0 0 auto }
  .hero-v4__media{
    position:relative;
    height:550px;
    border-radius:var(--radius-lg);
    background-color:#dccfb8;
    background-size:cover; background-position:center;
  }
  .hero-v4__media::after{
    content:""; position:absolute; inset:0;
    background:linear-gradient(180deg, rgba(0,0,0,0) 55%, rgba(0,0,0,.18) 100%);
    pointer-events:none; z-index:1;
    border-radius:var(--radius-lg);
  }
  .hero-v4 .hero-badge{ z-index:2 }
  .hero-v4__trust{
    display:flex; justify-content:center;
  }

  @media (max-width:768px){
    .hero-v4{ padding:24px 0 0 }
    .hero-v4__head{ margin-bottom:24px }
    .hero-v4__head h1{ font-size:30px; letter-spacing:-1px }
    .hero-v4__head .lead{ font-size:15px }
    /* CTA empilés mais à leur taille naturelle (pas de pleine largeur). */
    .hero-v4 .hero-cta{ flex-direction:column; align-items:center; gap:10px }
    .hero-v4__media{ height:initial; aspect-ratio:16/9; max-width:100%; }
    .hero-v4 .hero-badge{ padding:8px 10px }
    .hero-v4 .hero-badge img.picto{ height:26px }
    .hero-v4__head .hero-ctas-reviews {flex-direction: column;}
  }
.person {
  position: absolute;
  inset: 0;
  width: 100%;
  height: var(--person-scale);
  margin-top: var(--padding-top);
  object-fit: contain;
  object-position: var(--person-x) var(--person-y);

  pointer-events: none;
  z-index: 2;

  -webkit-clip-path: url(#hero-clip);
          clip-path: url(#hero-clip);
}
  :root {
  /* Le rayon est codé en dur côté SVG (rx="28"). On le redéfinit ici
     pour les éléments visibles (carte + photo) afin de rester cohérent. */
  --radius: 28px;

  /* ---- Géométrie desktop ---- */
  /* Ces 8 variables alimentent À LA FOIS le layout (carte + photo)
     ET les rectangles du masque SVG. Une seule source de vérité. */
  --padding-top:   4rem; /* Espace entre le haut du hero et le début de la carte (idem photo) */
  --card-x:   0px;
  --card-y:   2rem;
  --card-w:   600px;
  --card-h:   calc(590px - 4rem - var(--padding-top));

  --photo-x:  600px;
  --photo-y:  0px;
  --photo-w:  600px;
  --photo-h:  calc(590px - var(--padding-top));

  --hero-w:   1198px;
  --hero-h:   calc(100% - var(--padding-top));

  /* Position du personnage à l'intérieur de la zone hero */
  --person-x: 66%;       /* horizontal — se règle au pixel près */
  --person-y: 100%;      /* vertical — 100% = collé au bas */
  --person-scale: calc(100% - var(--padding-top));  /* hauteur de l'image, 100% = hauteur du hero */
}
  .defs {
  position: absolute;
  width: 0; height: 0;
  overflow: hidden;
}

.mask-card {
  x:      var(--card-x);
  y:      var(--card-y);
  width:  var(--card-w);
  height: var(--card-h);
}

.mask-photo {
  x:      var(--photo-x);
  y:      var(--photo-y);
  width:  var(--photo-w);
  height: var(--photo-h);
}

/* Bande basse du masque photo : annule le bord arrondi du bas
   (le rx de mask-photo s'applique aux 4 coins en SVG). On laisse les 2 coins
   du HAUT arrondis (le bord visible de la photo) et on prolonge le masque
   de 28px en bas avec un rect carré pour que le personnage déborde
   proprement sans subir la courbe. */
.mask-photo-bottom {
  x:      var(--photo-x);
  y:      calc(var(--photo-y) + var(--photo-h) - 28px);
  width:  var(--photo-w);
  height: 28px;
}

  /* ============================================================ */
  /*    BLOC : Bandeaux promotionnels (BANDEAU PROMOTIONNEL.png)   */
  /* ============================================================ */
  .banner{
    position:relative; overflow:hidden;
    border-radius:var(--radius-lg);
    margin:0 auto 18px; max-width:1380px;
    padding:36px 44px;
    display:flex; align-items:center;
  }
  .banner h3{
    font-family:"Google Sans Flex", "Inter", sans-serif;
    margin:0 0 8px; line-height:1.1; letter-spacing:-.6px;
    font-weight:700;
  }
  .banner h3 em{ font-style:normal; color:var(--accent-warm) }
  .banner p{ margin:0; line-height:1.55; font-size:15px }

  /* Variante 1 — GROUPE (photo équipe + voile vert) */
  .banner-group{
    background-color: #015C24;
    background-size: cover;
    background-position: center;
    color:#fff;
    padding:60px 80px;
    min-height:280px;
    justify-content:center;
    text-align:left;
    flex-direction:row; gap:60px;
    align-items:center;
  }
  .banner-group::before{
    content:""; position:absolute; inset:0;
    background: linear-gradient(135deg, rgba(1,92,36,.82) 0%, rgba(1,131,50,.74) 100%);
    pointer-events:none;
  }
  .banner-group > *{ position:relative; z-index:1 }
  .banner-group .banner-picto{
    height:170px; width:auto;
    filter: brightness(0) invert(1);
    margin:0;
    flex:0 0 auto;
  }
  .banner-group h3{
    font-size:36px; color:#fff;
    line-height:1.18;
    letter-spacing:-.4px;
    margin:0;
  }
  .banner-group h3 em{
    color:var(--brand-2) !important;
    font-weight:500;
      background-image: linear-gradient(90deg, #FFF, #fff) !important;
  }

  /* Variante 2 — REVIEWS (orange + cutout + carrousel) */
  .banner-reviews{
    background:var(--brand);
    color:#fff;
    min-height:340px;
    padding:40px 90px 40px 550px;
    gap:0;
    align-items:center;
    overflow:visible;
  }
  .banner-reviews::before{
    content:""; position:absolute; inset:0;
    background-image: url("../img/picto-isoface-2.svg");
    background-repeat:no-repeat;
    background-position: 13% center;
    background-size: 500px;
    opacity:.10; pointer-events:none;
    filter: brightness(0) invert(1);
    border-radius:inherit;
    overflow:hidden;
  }
  .banner-reviews > *{ position:relative; z-index:3 }
  .banner-reviews .banner-cutout{
    position:absolute;
    left:30px; bottom:0;
    height:auto;
    max-height:120%;
    object-fit:contain; object-position:bottom center;
    border-radius:0;
    margin:0;
    z-index:2;
  }
  .banner-reviews .banner-content{
    flex:1; display:flex; flex-direction:column; justify-content:center;
    gap:18px;
    width:100%;
  }
  .banner-reviews h4{
    font-family:"Google Sans Flex", sans-serif;
    margin:0; font-size:22px; font-weight:700;
    letter-spacing:-.3px;
    color:#fff;
  }
  .banner-reviews .testi-carousel-wrap{
    position:relative;
    width:100%;
    max-width:820px;
  }
  .banner-reviews .testimonial-card{
    background:#fff; color:var(--ink-2);
    border-radius:var(--radius); padding:24px 30px;
    box-shadow: 0 8px 24px -10px rgba(0,0,0,.18);
  }
  .banner-reviews .testimonial-card .stars{
    color:#F4B400; font-size:18px; letter-spacing:3px; margin-bottom:14px;
  }
  .banner-reviews .testimonial-card h5{
    font-family:"Google Sans Flex", sans-serif;
    font-size:17px; font-weight:700; color:var(--ink);
    margin:0 0 10px; letter-spacing:-.2px;
  }
  .banner-reviews .testimonial-card p{
    font-size:14.5px; line-height:1.55; margin:0 0 16px; color:var(--ink-2);
  }
  .banner-reviews .testimonial-card .review-source{
    display:flex; align-items:center; gap:8px;
    padding-top:14px;
    border-top:1px solid var(--line);
    font-size:13px; color:var(--ink-3);
  }
  .banner-reviews .testimonial-card .review-source .sep{
    color:var(--ink-4); margin:0 4px;
  }
  .banner-reviews .testimonial-card .review-source img{
    height:22px; width:auto;
    margin-left:4px;
  }
  .banner-reviews .carousel-arrows{
    position:absolute; top:50%; transform:translateY(-50%);
    pointer-events:none;
    z-index:3;
  }
  .banner-reviews .carousel-arrows.left{ left:-24px }
  .banner-reviews .carousel-arrows.right{ right:-24px }
  .banner-reviews .carousel-arrows button{
    pointer-events:auto;
    width:48px; height:48px; border-radius:50%;
    background:var(--green); color:#fff;
    border:0; cursor:pointer; font-size:22px; font-weight:700;
    display:flex; align-items:center; justify-content:center;
    box-shadow: 0 6px 16px rgba(0,0,0,.22);
    transition: background .2s ease;
  }
  .banner-reviews .carousel-arrows button:hover{ background:#015C24 }
  .banner-reviews .spotlight-dots button.is-active {
    background:#fff;
  }
  /* Variante 3 — SEARCH AGENCE (photo équipe + sélecteur) */
  .banner-search{
    background-color:#1A2530;
    background-size: cover;
    background-position: center;
    color:#fff;
    min-height:380px;
    flex-direction:column; gap:18px;
    text-align:center;
    justify-content:center;
    padding:60px 44px;
  }
  .banner-search::before{
    content:""; position:absolute; inset:0;
    background: linear-gradient(180deg, rgba(0,0,0,.18) 0%, rgba(0,0,0,.32) 100%);
    pointer-events:none;
  }
  .banner-search > *{ position:relative; z-index:1 }
  .banner-search .banner-picto{
    height:140px; width:auto;
    margin:0 auto 6px;
  }
  .banner-search h3{
    font-size:38px; color:#fff; margin:0;
    letter-spacing:-.5px;
    text-shadow: 0 2px 12px rgba(0,0,0,.3);
  }
  .banner-search .search-input{
    display:flex; align-items:center; justify-content:space-between;
    background:#fff; border-radius:var(--radius-full);
    padding:18px 28px;
    max-width:780px; width:100%; margin:10px auto 0;
    gap:10px;
    cursor:pointer;
    box-shadow: 0 8px 24px -10px rgba(0,0,0,.25);
  }
  .banner-search .search-input .ph{
    font-size:15px; color:var(--ink-3);
    font-family:inherit;
  }
  .banner-search .search-input .chev{
    color:var(--ink-2);
    font-size:22px; font-weight:400;
    transform: rotate(-90deg);
    display:inline-block;
    line-height:1;
  }
  .banner-search .search-input select{
    flex:1; border:0; background:transparent; outline:none;
    font-size:15px; color:var(--ink-2); font-family:inherit;
    appearance:none; -webkit-appearance:none; cursor:pointer;
  }

  /* Variante 4 — CTA orange (titre + 2 CTAs + cutout droite) */
  .banner-cta{
    background:var(--brand);
    color:#fff;
    min-height:420px;
    padding:60px 480px 60px 70px;
    gap:24px;
    align-items:stretch;
    overflow:visible;
    justify-content: space-around;
  }
  .banner-cta::before{
    content:""; position:absolute; inset:0;
    background-image: url("../img/picto-isoface-2.svg");
    background-repeat:no-repeat;
    background-position: 72% center;
    background-size: 480px;
    filter: brightness(0) invert(1);
    opacity:.12; pointer-events:none;
    border-radius:inherit;
    overflow:hidden;
  }
  .banner-cta .cta-text{
    flex:1; position:relative; z-index:1;
    max-width:620px;
    display:flex; flex-direction:column; justify-content:center;
  }
  .banner-cta h3{
    font-size:38px; color:#fff;
    margin:0 0 22px;
    letter-spacing:-.4px;
    line-height:1.15;
  }
  .banner-cta h3 em{
    color:#fff;
    font-weight:400;
    text-decoration-thickness: 2px;
    text-underline-offset: 5px;
  }
  .banner-cta p{
    color:#fff;
    margin:0 0 14px;
    font-size:15px; line-height:1.6;
  }
  .banner-cta p:last-of-type{ margin-bottom:28px }
  .banner-cta .cta-row{ display:flex; gap:14px; flex-wrap:wrap; align-items:center }
  .banner-cta .cta-row .btn{
    padding:14px 36px;
    font-size:14.5px; font-weight:600;
    border-radius:var(--radius-full);
    border:2px solid #fff;
    transition: background .2s ease, color .2s ease;
  }
  .banner-cta .cta-row .btn.primary{
    background:#fff; color:var(--accent);
  }
  .banner-cta .cta-row .btn.primary:hover{
    background:rgba(255,255,255,.88);
  }
  .banner-cta .cta-row .btn.ghost{
    background:transparent; color:#fff;
  }
  .banner-cta .cta-row .btn.ghost:hover{
    background:rgba(255,255,255,.12);
  }
  .banner-cta .cta-note{
    display:block;
    color:#fff;
    font-size:13px; font-weight:600;
    margin-top:14px; margin-left:5px;
  }
  .banner-cta .banner-cutout{
    position:absolute;
    right:30px; bottom:0;
    width:440px; height:auto;
    max-height:560px;
    object-fit:contain; object-position:bottom right;
    margin:0;
    z-index:2;
    pointer-events:none;
  }

  /* Variante 5 — OFFRE pêche (titre offre + 2 CTAs + photo) */
  .banner-offer{
    background:#FBE0CD;
    color:var(--ink);
    min-height:380px;
    padding:30px;
    gap:40px;
    align-items:center;
    justify-content: space-between;
  }
  .banner-offer .offer-text{
    flex:1; max-width:660px;
    display:flex; flex-direction:column; justify-content:center;
  }
  .banner-offer h3{
    font-size:38px; color:var(--ink);
    margin:0 0 18px;
    letter-spacing:-.5px;
    line-height:1.15;
    font-weight:700;
  }
  .banner-offer h3 em{
    color:var(--accent);
    font-style:normal;
    font-weight:700;
  }
  .banner-offer h3 em b{ font-weight:inherit }
  .banner-offer p{
    color:var(--ink-2); margin:0 0 28px;
    font-size:15.5px; line-height:1.55;
    max-width:680px;
  }
  .banner-offer .cta-row{ display:flex; gap:14px; flex-wrap:wrap; align-items:center }
  .banner-offer .cta-row .btn{
    padding:15px 32px;
    font-size:14.5px; font-weight:600;
    border-radius:var(--radius-full);
    border:0;
    transition: background .2s ease;
  }
  .banner-offer .cta-row .btn.primary{
    background:var(--accent); color:#fff;
  }
  .banner-offer .cta-row .btn.primary:hover{ background:var(--brand) }
  .banner-offer .cta-row .btn.light{
    background:#fff; color:var(--ink);
  }
  .banner-offer .cta-row .btn.light:hover{ background:rgba(255,255,255,.78) }
  .banner-offer .banner-cutout{
    width:46%; max-width:560px;
    align-self:stretch;
    flex-shrink:0;
    height:auto;
    object-fit:cover; object-position:center;
    border-radius:var(--radius-lg);
    margin:0;
  }

  /* Variante — TEXTE CENTRÉ (fond orange, titre + sous-titre blancs) */
  section .banner-text{
    background:var(--accent);
    color:#fff;
    flex-direction:column;
    justify-content:center;
    text-align:center;
    padding:48px 44px;
    gap:0;
  }
  section .banner-text h3{
    font-size:32px; color:#fff;
    margin:0 0 10px;
    letter-spacing:-.5px;
    line-height:1.15;
  }
  section .banner-text h3 strong{ color:#fff; font-weight:700 }
  section .banner-text h3 em{ font-style:normal; color:var(--accent-warm) }
  section .banner-text p{
    color:rgba(255,255,255,.92);
    font-size:16px; line-height:1.55;
    max-width:680px; margin:0 auto;
  }

  /* ============================================================ */
  /*    BLOC : Carrousel cards (articles, chantiers)               */
  /* ============================================================ */
  .cards-carousel{
    position:relative;
    max-width:1380px; margin:0 auto;
    padding:0px;
  }
  .cards-carousel.on-cream{ background:var(--paper-2); border-radius:var(--radius-lg); padding-bottom:48px }
  .cards-carousel.on-green{
    background: linear-gradient(135deg, #015C24 0%, #018332 100%);
    border-radius:var(--radius-lg); padding-bottom:48px;
  }
  .cards-carousel.on-green h2,
  .cards-carousel.on-green h3,
  .cards-carousel.on-green .lead{ color:#fff }

  .cards-carousel-head{
    text-align:center;
    max-width:780px; margin:0 auto;
    padding:0 24px 28px;
  }
  .cards-carousel-head .picto{
    width:56px; height:auto; margin:0 auto 16px;
    display:block;
  }
  .cards-carousel-head h3{
    font-family:"Google Sans Flex", "Inter", sans-serif;
    font-size:34px; font-weight:700; letter-spacing:-.8px;
    margin:0 0 8px; line-height:1.1; color:var(--ink);
  }
  /* Le surlignage est géré par la règle globale em (cf. début du style) */
  .cards-carousel-head .lead{
    color:var(--ink-3); font-size:15px;
    line-height:1.55; margin:0 auto;
  }
  .cards-carousel.on-green .cards-carousel-head .picto{ filter: brightness(0) invert(1) }
  .cards-carousel.on-green .cards-carousel-head .lead{ color:rgba(255,255,255,.85) }

  .cards-carousel-track{
    display:flex; gap:18px;
    align-items:stretch;
    overflow-x:auto;
    scroll-snap-type: x mandatory;
    scroll-padding:40px;
    padding:0 40px 24px;
    scrollbar-width:none;
    justify-content:flex-start;
    flex-wrap:wrap;
  }
  .cards-carousel-track::-webkit-scrollbar{ display:none }

  /* Bleed-to-edge sur grand écran : le track s'étend jusqu'aux bords du
     viewport pour laisser les cards déborder à droite/gauche, mais le
     padding restaure l'alignement de la 1ère card avec le bloc 1380px
     (et donc avec les flèches qui restent en `position:absolute` sur
     `.cards-carousel`). */
  @media (min-width: 1420px){
    .cards-carousel-track{
      width:100vw;
      margin-left: calc(50% - 50vw);
      margin-right: calc(50% - 50vw);
      padding-left:  calc(50vw - 50% + 40px);
      padding-right: calc(50vw - 50% + 40px);
    }
  }
  .cards-carousel-track > .card-blog,
  .cards-carousel-track > .card-chantier{
    scroll-snap-align:start;
    flex:0 0 300px;
  }
  /* Slider "Isolants" : 4 cards par vue sur PC, toutes de la même taille.
     On garde le bleed 100vw (comme le slider Réalisations) : les cards en
     trop débordent proprement vers les bords du viewport, jamais coupées
     au milieu de la page. 4 par vue = 25% de la largeur utile moins la
     part de gap (3 gaps de 18px / 4). */
  .cards-carousel-track > .insulant{
    scroll-snap-align:start;
    flex:0 0 calc(25% - 13.5px);
  }
  @media (max-width: 1024px){
    .cards-carousel-track > .insulant{ flex:0 0 calc(50% - 9px) }
  }
  @media (max-width: 600px){
    .cards-carousel-track > .insulant{ flex:0 0 78% }
  }

  /* Slider "Services piliers" : dans .wrap (pas de bleed), head séparé au-dessus */
  .cards-carousel--services{ padding-top:0 }
  .cards-carousel--services .cards-carousel-track{
    width:auto;
    margin-left:0; margin-right:0;
    padding-left:40px; padding-right:40px;
  }
  /* Cards de service : largeur égale (grandissent pour remplir la ligne),
     défilement horizontal uniquement quand elles ne tiennent pas toutes. */
  .cards-carousel-track > .service-card{
    scroll-snap-align:start;
    flex:1 0 260px;
  }
  @media (max-width: 600px){
    .cards-carousel-track > .service-card{ flex:0 0 82% }
  }
  /* Tout tient : cards alignées sur le head (les flèches sont masquées) */
  .cards-carousel.no-scroll.cards-carousel--services .cards-carousel-track{
    padding-left:0; padding-right:0;
  }
  /* Slider variante "horizontal" (photo gauche / infos droite, 2 cards visibles) */
  .cards-carousel-track.is-horizontal > .card-chantier-detail.is-horizontal{
    scroll-snap-align:start;
    flex:0 0 calc(50% - 49px);
  }
  /* Slider variante "vertical" (photo haut / infos bas, 3 cards visibles) */
  .cards-carousel-track.is-vertical > .card-chantier-detail{
    scroll-snap-align:start;
    flex:0 0 calc(33.333% - 92px);
  }

  .cards-carousel-arrow{
    position:absolute; top:60%; transform:translateY(-50%);
    width:40px; height:40px; border-radius:50%;
    background:var(--green); color:#fff;
    border:0; cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    font-size:18px; font-weight:700;
    box-shadow: 0 4px 14px rgba(0,0,0,.18);
    z-index:5;
  }
  .cards-carousel-arrow.left{ left:8px }
  .cards-carousel-arrow.right{ right:8px }
  .cards-carousel-arrow:hover{ background:#015C24 }
  /* Pas de flèches quand le contenu tient entièrement (aucun défilement) */
  .cards-carousel.no-scroll > .cards-carousel-arrow{ display:none }

  .cards-carousel-cta{
    text-align:center; padding-top:8px;
  }

  /* Carrousel photos (bloc iso/photo-carousel) : slides à hauteur fixe
     (--photo-h posée par render.php), chaque image garde sa largeur
     naturelle — les mix portrait / paysage défilent proprement. */
  .photo-carousel .cards-carousel-track > .photo-slide{
    scroll-snap-align:start;
    flex:0 0 auto;
    position:relative;
    margin:0;
    height:min(var(--photo-h, 420px), 70vw);
    border-radius:var(--radius);
    overflow:hidden;
    background:var(--paper-2);
  }
  .photo-carousel .photo-slide img{
    height:100%; width:auto; max-width:none; display:block;
  }
  .photo-carousel .photo-slide figcaption{
    position:absolute; left:0; right:0; bottom:0;
    padding:28px 16px 12px;
    color:#fff; font-size:13px; line-height:1.4;
    background:linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.65) 100%);
  }
  /* Tramé gris sur les slides hors zone (au-delà des flèches) —
     classe .is-dimmed posée par initPhotoCarouselDim() (main.js). */
  .photo-carousel .photo-slide::after{
    content:"";
    position:absolute; inset:0;
    background:rgba(244,244,242,.62);
    opacity:0;
    transition:opacity .35s ease;
    pointer-events:none;
  }
  .photo-carousel .photo-slide img{ transition:filter .35s ease }
  .photo-carousel .photo-slide.is-dimmed::after{ opacity:1 }
  .photo-carousel .photo-slide.is-dimmed img{ filter:grayscale(1) }

  /* ---- Avant / Après (bloc iso/before-after) ------------------- */
  /* Deux photos superposées : la photo « après » est rognée par un
     clip-path piloté par --ba-cut (posée par initBeforeAfter, main.js).
     Le <input type=range> plein cadre rend le curseur draggable à la
     souris / au doigt ET accessible au clavier. */
  .sec-before-after .ba-inner{ max-width:820px; margin:0 auto }
  .sec-before-after .ba-inner.is-wide{ max-width:none }
  .ba-compare{ margin:0 }
  /* Ratios portrait : largeur plafonnée + centrage, sinon la photo
     occuperait toute la colonne et deviendrait démesurément haute. */
  .ba-compare.is-portrait{ max-width:460px; margin:0 auto }
  .ba-stage{
    position:relative;
    aspect-ratio:var(--ba-ratio, 4 / 3);
    border-radius:var(--radius);
    overflow:hidden;
    background:var(--paper-2);
    touch-action:pan-y; /* le drag horizontal va au range, le scroll vertical reste natif */
  }
  .ba-img{ position:absolute; inset:0 }
  .ba-img img{
    width:100%; height:100%;
    object-fit:cover; display:block;
  }
  .ba-after{ clip-path:inset(0 0 0 var(--ba-cut, 50%)) }
  .ba-tag{
    position:absolute; top:12px; z-index:2;
    padding:5px 12px;
    border-radius:var(--radius-full, 999px);
    font-size:12.5px; font-weight:800; letter-spacing:.02em;
    text-transform:uppercase;
    color:#fff; background:rgba(23,37,47,.72);
    pointer-events:none;
    backdrop-filter:blur(2px);
  }
  .ba-tag.is-before{ left:12px }
  .ba-tag.is-after{ right:12px; background:var(--brand) }
  .ba-handle{
    position:absolute; top:0; bottom:0;
    left:var(--ba-cut, 50%);
    width:0; z-index:2;
    border-left:2px solid #fff;
    box-shadow:0 0 12px rgba(0,0,0,.35);
    pointer-events:none;
  }
  .ba-grip{
    position:absolute; top:50%; left:0;
    transform:translate(-50%,-50%);
    width:40px; height:40px;
    border-radius:50%;
    background:#fff;
    box-shadow:0 2px 10px rgba(0,0,0,.3);
  }
  /* Chevrons du grip (‹ ›) en pseudo-éléments, couleur brand. */
  .ba-grip::before,
  .ba-grip::after{
    content:"";
    position:absolute; top:50%;
    width:8px; height:8px;
    border:solid var(--brand);
    border-width:2.5px 2.5px 0 0;
  }
  .ba-grip::before{ left:13px; transform:translateY(-50%) rotate(-135deg) }
  .ba-grip::after{ right:13px; transform:translateY(-50%) rotate(45deg) }
  /* Range invisible plein cadre : c'est LUI qui reçoit clic / drag / clavier. */
  .ba-range{
    position:absolute; inset:0; z-index:3;
    width:100%; height:100%;
    margin:0; padding:0;
    opacity:0;
    cursor:ew-resize;
    -webkit-appearance:none; appearance:none;
    background:transparent;
  }
  .ba-range::-webkit-slider-thumb{ -webkit-appearance:none; width:40px; height:100% }
  .ba-range::-moz-range-thumb{ width:40px; height:100%; border:0 }
  .ba-stage:has(.ba-range:focus-visible){
    outline:3px solid var(--brand);
    outline-offset:2px;
  }
  .ba-caption{
    padding-top:10px;
    text-align:center;
    color:var(--ink-3); font-size:13.5px; line-height:1.5;
  }
  @media (max-width:520px){
    .ba-grip{ width:34px; height:34px }
    .ba-grip::before{ left:10px }
    .ba-grip::after{ right:10px }
    .ba-tag{ font-size:11px; padding:4px 10px }
  }

  /* Cards (variants) */
  .card-blog,
  .card-chantier{
    border-radius:var(--radius);
    overflow:hidden;
    position:relative;
    aspect-ratio:3/4;
    text-decoration:none;
    cursor:pointer;
    transition: transform .25s ease, box-shadow .25s ease;
  }
  .card-blog:hover,
  .card-chantier:hover{
    transform: translateY(-4px);
    box-shadow: 0 18px 36px -12px rgba(0,0,0,.22);
  }
  .card-blog .card-bg,
  .card-chantier .card-bg{
    position:absolute; inset:0;
    background-size:cover; background-position:center;
    background-color:var(--paper-3);
      margin-bottom: 80px;
  }

  /* Variante sans image : fond vert soft + picto ISO&FACE centré en vert.
     L'overlay sombre est désactivé pour garder le picto lisible ; le titre
     repasse en couleur ink sur fond cream/blanc. */
  .card-blog--no-img .card-bg{
    background:var(--green-soft);
    display:flex; align-items:center; justify-content:center;
  }
  .card-blog--no-img .card-bg-picto{
    width:38%; max-width:160px; height:auto;
    opacity:.85;
    /* Recolorise le SVG en vert ISO via filter (le picto-isoface.svg est
       dessiné en noir/sombre par défaut). Equivalent à color:var(--green). */
    filter: brightness(0) saturate(100%) invert(28%) sepia(98%) saturate(1543%) hue-rotate(120deg) brightness(95%) contrast(98%);
  }
  .card-blog--no-img .card-overlay{
    /* Overlay plus léger : juste une bande sombre en bas pour la lisibilité
       du titre, pas un gradient plein. */
    background: linear-gradient(180deg, transparent 50%, rgba(0,0,0,.55) 92%, rgba(0,0,0,.72) 100%);
  }
  .card-blog .card-overlay,
  .card-chantier .card-overlay{
    position:absolute; inset:0;
    background: linear-gradient(180deg, transparent 35%, rgba(0,0,0,.70) 88%, rgba(0,0,0,.85) 100%);
    display:flex; flex-direction:column; justify-content:flex-end;
    padding:18px;
    color:#fff;
  }
  .card-badge{
    align-self:flex-start;
    background:#fff; color:var(--ink);
    border-radius:var(--radius-full);
    padding:5px 12px;
    font-size:11.5px; font-weight:700;
    margin-bottom:auto;
    text-transform:none; letter-spacing:0;
    box-shadow: 0 2px 6px rgba(0,0,0,.08);
  }
  .card-blog h4,
  .card-chantier h4{
    font-family:"Google Sans Flex", sans-serif;
    font-size:18px; font-weight:700;
    line-height:1.18; letter-spacing:-.3px;
    margin:0 0 12px;
    color:#fff;
  }
  .card-blog h4 em,
  .card-chantier h4 em{
    font-style: normal !important;
    font-weight: 600 !important;
    background-color: var(--accent);
    padding: 1px 10px;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
    color: #fff !important;
  }
  .card-meta{
    display:flex; flex-wrap:wrap; gap:6px;
    margin-bottom:0;
    font-size:11.5px;
    background: white;
    margin: 0 -18px -18px -18px;
    padding: 18px;
  }
  .on-green .card-meta{
    background: white;
  }
   .on-green .card-meta .date, .on-green .card-meta .tag,.on-green .card-meta .tag.highlight{
    color: var(--ink);
  }
   .on-green .card-meta .tag{
    background:#005E2424;
   }
  .card-meta .date{
    color: var(--ink);
    width:100%; margin-bottom:6px;
  }
  .card-meta .tag{
    background:rgba(255,255,255,.16);
    color:#fff; padding:3px 9px;
    border-radius:var(--radius-full);
    font-weight:500;
    backdrop-filter: blur(6px);
  }
  .card-meta .tag.highlight{
    background:var(--accent);
    color:#fff !important; font-weight:600;
  }
  .card-blog .card-meta{
    background: var(--brand-2);
  }
  .card-blog .card-meta .date{
    color:rgba(255,255,255,.85);
    width:100%; margin-bottom:6px;
  }
  .card-blog .card-meta .tag{
    background:rgba(255,255,255,.16);
    color:#fff; padding:3px 9px;
    border-radius:var(--radius-full);
    font-weight:500;
    backdrop-filter: blur(6px);
  }
  .card-blog .card-meta .tag.highlight{
    background:var(--accent);
    color:#fff !important; font-weight:600;
  }

  /* ============================================================ */
  /*    BLOC : Équipe (carrousel spotlight + grille portraits)     */
  /* ============================================================ */
  .team-section{
    max-width:1380px; margin:0 auto;
    padding:48px 0;
  }
  .team-section.on-cream{ background:var(--paper-2); border-radius:var(--radius-lg); padding:48px }
  .team-spotlight-wrap{ position:relative; max-width:1180px; margin:0 auto 32px }
  .team-spotlight{
    background:#fff;
    border-radius:var(--radius-lg);
    display:grid; grid-template-columns: 1.05fr 1fr;
    overflow:hidden;
    position:relative;
    box-shadow:
      0 1px 0 rgba(255,255,255,.6) inset,
      0 12px 28px -12px rgba(10,10,10,.10),
      0 28px 56px -20px rgba(10,10,10,.06);
  }
  .team-spotlight .photo{
    background-color: var(--paper-3);
    background-size:cover; background-position:center;
    min-height:420px;
    z-index: 2;
  }
  .team-spotlight .content{
    padding:44px 48px;
    display:flex; flex-direction:column; justify-content:center;
    position:relative;
    isolation:isolate;
    z-index: 2;
  }
  /* Logo picto en tramé (halftone) en filigrane sur le panneau blanc */
  .team-spotlight::before{
    content:'';
    position:absolute;
    top:15%;
    width:100%; height:70%;
    background: url(../img/picto-isoface.svg) center/contain no-repeat;
    opacity: 0.1;
    pointer-events:none;
    z-index:1;
  }
  .team-spotlight h4{
    font-family:"Google Sans Flex", sans-serif;
    font-size:24px; font-weight:700; letter-spacing:-.4px;
    color:var(--ink); margin:0 0 4px;
  }
  .team-spotlight .role{
    color:var(--accent);
    font-size:11.5px; font-weight:700;
    text-transform:uppercase; letter-spacing:1.2px;
    margin-bottom:18px;
  }
  .team-spotlight blockquote{
    margin:0 0 14px; font-size:14.5px; line-height:1.65;
    color:var(--ink-2); font-style:normal;
    position:relative;
  }
  .team-spotlight blockquote + blockquote{ margin-top:8px }

  .team-spotlight-wrap .arrow{
    position:absolute; top:50%; transform:translateY(-50%);
    width:40px; height:40px; border-radius:50%;
    background:var(--green); color:#fff;
    border:0; cursor:pointer; font-size:18px;
    display:flex; align-items:center; justify-content:center;
    box-shadow: 0 4px 14px rgba(0,0,0,.18);
    z-index:5;
  }
  .team-spotlight-wrap .arrow.left{ left:-18px }
  .team-spotlight-wrap .arrow.right{ right:-18px }
  .team-spotlight-wrap .arrow:hover{ background:#015C24 }

  /* Grille 4 portraits */
  .team-grid{
    display:grid;
    grid-template-columns: repeat(4, 1fr);
    gap:18px;
    max-width:1280px; margin:0 auto;
  }
  .team-card{
    background:#fff;
    border-radius:var(--radius);
    overflow:hidden;
    text-align:center;
    box-shadow: 0 8px 22px -10px rgba(10,10,10,.10);
    transition: transform .2s ease, box-shadow .2s ease;
  }
  .team-card:hover{
    transform:translateY(-4px);
    box-shadow: 0 16px 30px -10px rgba(10,10,10,.15);
  }
  .team-card .photo{
    aspect-ratio: 4/5;
    background-color: var(--paper-3);
    background-size:cover; background-position:center top;
  }
  .team-card .info{ padding:18px 16px 22px }
  .team-card .info b{
    font-family:"Google Sans Flex", sans-serif;
    font-size:18px; color:var(--ink);
    font-weight:700; letter-spacing:-.3px;
    display:block; margin-bottom:2px;
  }
  .team-card .info .role{
    font-size:12px; color:var(--ink-3);
    margin-bottom:6px;
    display:block;
  }
  .team-card .info .since{
    font-size:11px; font-weight:600;
    color:var(--accent); letter-spacing:.4px;
    text-transform:uppercase;
  }

  .team-section .team-cta{ text-align:center; padding-top:28px }

  /* ============================================================ */
  /*    BLOC : Expertise tabulaire (Web 1920 – 9.png)              */
  /* ============================================================ */
  .expertise-tabs{
    max-width:1280px; margin:0 auto;
    padding:0px 20px;
  }
  .expertise-tab-bar{
    background:#fff; border:1px solid var(--line);
    border-radius:var(--radius-full);
    padding:6px;
    display:inline-flex;
    margin:0 auto 32px;
    gap:4px;
    box-shadow: 0 6px 18px -10px rgba(10,10,10,.08);
  }
  .expertise-tab-bar-wrap{ text-align:center }
  .expertise-tab-bar button{
    background:transparent; border:0;
    padding:11px 22px;
    border-radius:var(--radius-full);
    font-family:inherit; font-size:13.5px;
    font-weight:500; color:var(--ink-3);
    cursor:pointer;
    transition: background .2s, color .2s;
    white-space:nowrap;
  }
  .expertise-tab-bar button.on{
    background:var(--accent); color:#fff;
    font-weight:600;
    box-shadow: 0 4px 10px -2px rgba(253,95,0,.4);
  }
  .expertise-tab-bar button:not(.on):hover{ color:var(--ink); background:var(--paper-2) }

  /* Switch animé entre panes (ITE / ravalement / globale) */
  .expertise-tabs[data-expertise] .expertise-tab-content{ display:none }
  .expertise-tabs[data-expertise] .expertise-tab-content.on{ display:grid }
  /* Le slider est en flow normal (block), pas en grid — il faut surcharger
     la règle ci-dessus avec une spécificité équivalente. */
  .expertise-tabs[data-expertise] .expertise-tab-content.on.slider{ display:block }
  .expertise-tabs[data-expertise] .expertise-tab-content{
    opacity:0; transform:translateY(8px);
    transition: opacity .28s ease, transform .28s ease;
  }
  .expertise-tabs[data-expertise] .expertise-tab-content.on.in{
    opacity:1; transform:none;
  }

  /* Variante split image + texte */
  .expertise-tab-content.split{
    background:#fff;
    border-radius:var(--radius-lg);
    overflow:hidden;
    display:grid; grid-template-columns: 1.1fr 1fr;
    box-shadow: 0 18px 40px -20px rgba(10,10,10,.10);
  }
  .expertise-tab-content.split .image{
    background-color:var(--paper-3);
    background-size:cover; background-position:center;
    min-height:340px;
  }
  .expertise-tab-content.split .text{
    padding:40px 44px;
    display:flex; flex-direction:column; justify-content:center;
  }
  .expertise-tab-content.split .text h4{
    font-family:"Google Sans Flex", sans-serif;
    font-size:24px; font-weight:700; letter-spacing:-.4px;
    color:var(--accent); margin:0 0 14px;
  }
  .expertise-tab-content.split .text p{
    font-size:14.5px; line-height:1.6;
    color:var(--ink-2); margin:0 0 20px;
  }
  /* Lien "Lire la suite →" — style générique réutilisable */
  a.ln{
    color:var(--accent); font-weight:700;
    font-size:13.5px; text-decoration:none;
    display:inline-flex; align-items:center; gap:6px;
    padding-bottom:2px;
    cursor:pointer;
  }
  a.ln:hover{ color:var(--accent-2);  }
  .expertise-tab-content.split .text .ln{
    align-self:flex-start;
  }

  /* Variante grille — N colonnes (auto-détecté côté PHP selon le nombre
     d'items : 2 / 3 / 4). 5+ → slider (cf .expertise-tab-content.slider). */
  .expertise-tab-content.grid{
    display:grid;
    grid-template-columns: repeat(4, 1fr);
    gap:16px;
  }
  .expertise-tab-content.grid.cols-2{ grid-template-columns:repeat(2, minmax(0,1fr)); max-width:780px; margin:0 auto }
  .expertise-tab-content.grid.cols-3{ grid-template-columns:repeat(3, minmax(0,1fr)) }
  .expertise-tab-content.grid.cols-4{ grid-template-columns:repeat(4, minmax(0,1fr)) }

  /* Variante slider — 5+ cards. Track horizontal avec snap, chevrons. */
  .expertise-tab-content.slider{
    display:block; grid-template-columns:none; /* override le .on{display:grid} */
  }
  .expertise-tab-content.slider .cards-carousel{
    position:relative;
  }
  .expertise-tab-content.slider .cards-carousel-track{
    display:grid; grid-auto-flow:column;
    grid-auto-columns: calc((100% - 48px) / 4);
    gap:16px;
    overflow-x:auto; scroll-snap-type: x mandatory;
    scroll-behavior:smooth;
    scrollbar-width:none; -ms-overflow-style:none;
    /* Annule le full-bleed (100vw) hérité de .cards-carousel-track >=1420px :
       le track reste dans .wrap, donc 4-up à la même largeur que la grille. */
    width:auto; margin-left:0; margin-right:0;
    padding:4px 0 8px;
  }
  .expertise-tab-content.slider .cards-carousel-track::-webkit-scrollbar{ display:none }
  .expertise-tab-content.slider .cards-carousel-track > .expertise-card{
    scroll-snap-align:start;
  }
  .expertise-tab-content.slider .cards-carousel-arrow{
    position:absolute; top:50%; transform:translateY(-50%);
    width:40px; height:40px; border-radius:50%;
    background:#fff; border:1px solid var(--line);
    color:var(--ink); font-size:22px; font-weight:600;
    cursor:pointer; z-index:3;
    box-shadow: 0 6px 16px -4px rgba(10,10,10,.18);
    display:flex; align-items:center; justify-content:center;
  }
  .expertise-tab-content.slider .cards-carousel-arrow:disabled{ opacity:.3; cursor:not-allowed }
  .expertise-tab-content.slider .cards-carousel-arrow.left{ left:-20px }
  .expertise-tab-content.slider .cards-carousel-arrow.right{ right:-20px }
  @media (max-width: 900px){
    .expertise-tab-content.grid.cols-3,
    .expertise-tab-content.grid.cols-4{ grid-template-columns:repeat(2, minmax(0,1fr)) }
    /* Slider en 2 colonnes, calé sur la grille 2-up → même largeur de card,
       donc même hauteur (photo en ratio 4/3). */
    .expertise-tab-content.slider .cards-carousel-track{ grid-auto-columns:calc((100% - 16px) / 2) }
  }
  @media (max-width: 560px){
    .expertise-tab-content.grid.cols-2,
    .expertise-tab-content.grid.cols-3,
    .expertise-tab-content.grid.cols-4{ grid-template-columns:1fr }
    /* Slider 1 card pleine largeur, calé sur la grille 1-up → même hauteur. */
    .expertise-tab-content.slider .cards-carousel-track{ grid-auto-columns:100% }
  }
  .expertise-card{
    background:#fff;
    border-radius:var(--radius);
    overflow:hidden;
    box-shadow: 0 8px 22px -12px rgba(10,10,10,.10);
    transition: transform .2s ease, box-shadow .2s ease;
    display:flex; flex-direction:column;
  }
  .expertise-card:hover{
    transform:translateY(-4px);
    box-shadow: 0 18px 36px -14px rgba(10,10,10,.14);
  }
  .expertise-card .photo{
    aspect-ratio:4/3;
    background-color:var(--paper-3);
    background-size:cover; background-position:center;
  }
  .expertise-card .info{ padding:18px 18px 22px }
  .expertise-card .info h4{
    font-family:"Google Sans Flex", sans-serif;
    font-size:16px; font-weight:700; letter-spacing:-.2px;
    color:var(--ink); margin:0 0 10px; line-height:1.25;
  }
  .expertise-card .info .ln{
    color:var(--accent); font-weight:700;
    font-size:12.5px; text-decoration:none;
    display:inline-flex; align-items:center; gap:5px;
    border-bottom:1.5px solid var(--accent);
    padding-bottom:1px;
  }

  /* ============================================================ */
  /*    BLOC : KPI numbers / chiffres clés (PUBLICATION CHIFFRES)  */
  /* ============================================================ */
  .kpi-numbers{
    display:grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 273px));
    justify-content: center;
    gap:18px;
    max-width:1180px; margin:0 auto;
    padding:32px 0;
  }
  .kpi-card{
    background:#fff; border:1px solid var(--line);
    border-radius:var(--radius); padding:28px 22px;
    text-align:center;
  }
  .kpi-card .picto{
    width:36px; height:36px; margin:0 auto 12px;
    display:block;
  }
  .kpi-card .num{
    font-family:"Google Sans Flex", sans-serif;
    font-size:42px; font-weight:800;
    color:var(--ink); letter-spacing:-1.5px;
    line-height:1; margin-bottom:6px;
  }
  .kpi-card .num .sup{
    font-size:24px; color:var(--accent);
    margin-left:2px; font-weight:700;
  }
  .kpi-card .label{
    font-size:13px; color:var(--ink-3);
    line-height:1.4;
  }

  /* ============================================================ */
  /*    BLOC : Process steps (5 étapes numérotées)                 */
  /* ============================================================ */
  .process-section{
    max-width:1280px; margin:0 auto;
    padding:48px 20px;
  }
  .process-steps{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:18px;
    position:relative;
    margin:0 auto;
  }
  .process-step{
    flex:1 1 200px;
    max-width:233px;
    background:#fff;
    border:1px solid var(--line);
    border-radius:var(--radius);
    text-align:left;
    position:relative;
    padding:0;
    min-height:280px;
    display:flex; flex-direction:column;
    overflow:hidden;
  }
  .process-step .num{
    background:var(--brand-2);
    color:#fff;
    font-family:"Google Sans Flex", sans-serif;
    font-size:30px; font-weight:800;
    line-height:1;
    width:62px; height:62px;
    display:flex; align-items:center; justify-content:center;
    border-bottom-right-radius:32px;
    align-self:flex-start;
    letter-spacing:-1px;
  }
  .process-step .step-label{
    font-family:"Google Sans Flex", sans-serif;
    font-size:22px; font-weight:800;
    color:var(--ink);
    line-height:1.15;
    letter-spacing:-.4px;
    padding:28px 24px 0;
    display:block;
  }
  .process-step p{
    font-size:13px; color:var(--ink-3);
    line-height:1.55;
    margin:14px 0 0;
    padding:0 24px 24px;
  }

  /* ============================================================ */
  /*    BLOC : Vidéo + KPI sidebar (06.5)                           */
  /* ============================================================ */
  .video-kpi-section{
    max-width:1280px; margin:0 auto;
    padding:0px 20px;
  }
  .video-kpi-head{
    text-align:center;
    max-width:780px; margin:0 auto 36px;
  }
  .video-kpi-head .picto{
    width:56px; height:auto;
    margin:0 auto 16px;
    display:block;
  }
  .video-kpi-head h3{
    font-family:"Google Sans Flex", sans-serif;
    font-size:34px; font-weight:700;
    letter-spacing:-.6px; line-height:1.15;
    color:var(--ink);
    margin:0 0 14px;
  }
  /* Surlignage orange "pill" sur la 2e ligne (override H3 underline) */
  .video-kpi-head h3 em{
    color:var(--ink) !important;
    font-weight:300 !important;
    background-image: linear-gradient(90deg, var(--accent), var(--accent)) !important;
    background-size:0% 100% !important;
    background-position: left center;
    background-repeat:no-repeat;
    padding:1px 14px !important;
    border-radius:6px !important;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
    transition: background-size .9s cubic-bezier(.4,0,.2,1) .15s,
                color .35s ease .35s;
  }
  .video-kpi-head h3 em.in-view{
    background-size:100% 100% !important;
    color:#fff !important;
  }
  .video-kpi-head .lead{
    color:var(--ink-3); font-size:15px;
    line-height:1.55; margin:0 auto;
  }
  .video-kpi-block{
    display:grid;
    grid-template-columns: 2fr 1fr;
    gap:40px;
    align-items:stretch;
  }
  .video-side{
    position:relative;
    border-radius:var(--radius-lg);
    background-color:var(--paper-3);
    background-size:cover; background-position:center;
    min-height:520px;
    display:flex; align-items:center; justify-content:center;
    cursor:pointer;
    overflow:visible;
  }
  .video-side::before{
    content:""; position:absolute; inset:0;
    border-radius:inherit;
    background:rgba(0,0,0,.08);
    pointer-events:none;
  }
  .video-side .video-cutout{
    position:absolute;
    bottom:0;
    left:3px;
    height:calc(100% + 80px);
    width:auto;
    max-width:65%;
    object-fit:contain; object-position:bottom left;
    z-index:2;
    pointer-events:none;
  }
  .video-side .play-btn{
    position:relative; z-index:3;
    width:88px; height:88px; border-radius:50%;
    background:rgba(255,255,255,.18);
    border:3px solid rgba(255,255,255,.85);
    color:#fff;
    display:flex; align-items:center; justify-content:center;
    cursor:pointer;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    transition: transform .2s ease, background .2s ease;
  }
  .video-side .play-btn:hover{
    transform:scale(1.06);
    background:rgba(255,255,255,.28);
  }
  .video-side .play-btn svg{
    width:34px; height:34px;
    margin-left:4px;
  }
  .kpi-side{
    display:flex; flex-direction:column;
    justify-content:center;
    padding:8px 0;
  }
  .kpi-line{
    display:flex; align-items:flex-start; gap:18px;
    padding:18px 0;
    border-top:1px solid var(--line);
  }
  .kpi-line:first-child{ border-top:0; padding-top:0 }
  .kpi-line .picto{
    width:46px; height:46px;
    flex:0 0 auto;
    object-fit:contain;
  }
  .kpi-line .kpi-info{
    display:flex; flex-direction:column; gap:4px;
  }
  .kpi-line .num{
    font-family:"Google Sans Flex", sans-serif;
    font-size:24px; font-weight:800;
    color:var(--brand-2);
    letter-spacing:-.5px;
    line-height:1.05;
  }
  .kpi-line .num .sup{
    font-size:.7em; font-weight:700;
    margin-left:1px;
  }
  .kpi-line .label{
    font-size:13.5px; line-height:1.45;
    color:var(--ink-2);
  }
  .video-kpi-cta{
    text-align:center;
    margin-top:36px;
  }
  .video-kpi-cta .btn{
    padding:16px 36px;
    font-size:15px;
  }

  /* ============================================================ */
  /*    BLOC : Avis clients (cards / spotlight / strip / slider)    */
  /* ============================================================ */

  /* Note moyenne au-dessus du titre (showAverage=true) */
  .reviews-avg{
    max-width:1180px; margin:0 auto 14px;
    display:flex; align-items:center; justify-content:center; gap:12px;
    font-size:15px;
  }
  .reviews-avg-stars{ color:#F4B400; font-size:18px; letter-spacing:2px }
  .reviews-avg-value{ color:var(--ink); font-weight:700; font-size:17px }
  .reviews-avg-count{ color:var(--ink-3); font-size:13.5px }

  /* Slider horizontal avec scroll-snap (iso/reviews-grid slider=true) */
  .avis-slider{
    position:relative;
    max-width:1180px; margin:0 auto;
  }
  .avis-slider-track{
    display:flex; gap:18px;
    overflow-x:auto; scroll-snap-type:x mandatory;
    scroll-behavior:smooth;
    padding:6px 4px 18px;
    scrollbar-width:none;
  }
  .avis-slider-track::-webkit-scrollbar{ display:none }
  .avis-slider-track .avis-card{
    flex:0 0 calc((100% - 36px) / 3);
    scroll-snap-align:start;
    min-width:280px;
  }
  @media (max-width:900px){
    .avis-slider-track .avis-card{ flex:0 0 calc((100% - 18px) / 2) }
  }
  @media (max-width:640px){
    .avis-slider-track .avis-card{ flex:0 0 86% }
  }
  .avis-slider-arrow{
    position:absolute; top:50%; transform:translateY(-50%);
    width:42px; height:42px; border-radius:50%;
    background:var(--brand); color:#fff; border:0; cursor:pointer;
    font-size:24px; line-height:1; font-weight:700;
    display:flex; align-items:center; justify-content:center;
    box-shadow:0 6px 14px rgba(0,0,0,.16);
    z-index:5;
    transition: background .15s ease;
  }
  .avis-slider-arrow:hover{ background:var(--accent) }
  .avis-slider-arrow.left{  left:-18px }
  .avis-slider-arrow.right{ right:-18px }
  @media (max-width:768px){
    .avis-slider-arrow.left{  left:4px }
    .avis-slider-arrow.right{ right:4px }
  }

  .avis-grid{
    display:grid;
    grid-template-columns: repeat(3, 1fr);
    gap:18px;
    max-width:1180px; margin:0 auto;
  }
  .avis-card{
    background:#fff;
    border-radius:var(--radius);
    padding:24px 26px;
    display:flex; flex-direction:column;
    box-shadow: 0 1px 2px rgba(0,0,0,.04);
  }
  .avis-card .stars{
    color:#F4B400; font-size:16px; letter-spacing:2.5px;
    margin-bottom:10px;
  }
  .avis-card h5{
    font-family:"Google Sans Flex", sans-serif;
    font-size:16px; font-weight:700; color:var(--ink);
    margin:0 0 8px; letter-spacing:-.2px;
  }
  .avis-card p{
    font-size:14px; line-height:1.55;
    color:var(--ink-2);
    margin:0 0 18px;
    flex:1;
  }
  .avis-card .avis-foot{
    display:flex; align-items:center; justify-content:space-between;
    padding-top:14px;
    border-top:1px solid var(--line);
  }
  .avis-card .avis-foot .who{
    font-size:12.5px; color:var(--ink-3);
    line-height:1.4;
  }
  .avis-card .avis-foot .who b{
    display:block; color:var(--ink); font-size:13.5px; font-weight:600;
  }
  .avis-card .avis-foot img{
    height:20px; width:auto;
  }
  /* Bloc réassurance récurrent (Google + Eldo) — base + compact + on-dark.
     Source : css/page-agence-33.css (maquette). Repris ici car utilisé bien
     au-delà de la page agence (hero v2, footer, contact, banner-reviews…). */
  .reviews-trust{
    display:inline-flex; align-items:center; gap:24px;
    background:#fff; border:1px solid var(--line);
    border-radius:var(--radius); padding:14px 22px;
  }
  .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);
  }
  .reviews-trust.compact{
    padding:8px 14px; gap:16px;
    border-radius:var(--radius-full);
  }
  .reviews-trust.compact .rev-source{ gap:10px }
  .reviews-trust.compact .brand-logo-img{ height:18px }
  .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 }
  .reviews-trust.on-dark .brand-logo-img,
  .sec-green .reviews-trust .brand-logo-img{ filter: brightness(0) invert(1) }
  .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 .sep,
  .reviews-trust.on-dark .sep{ background:rgba(255,255,255,.15) }

  .reviews-trust.standalone{
    background:#fff;
    border-radius:var(--radius-full);
    padding:14px 28px;
    margin:0 auto;
    width:fit-content;
    box-shadow: 0 1px 2px rgba(0,0,0,.04);
  }
  .avis-spotlight{
    background:#fff;
    border-radius:var(--radius-lg);
    padding:48px 56px;
    max-width:920px; margin:0 auto;
    text-align:center;
    box-shadow: 0 1px 2px rgba(0,0,0,.04);
  }
  .avis-spotlight .avis-spot-stars{
    color:#F4B400; font-size:24px; letter-spacing:4px;
    margin-bottom:24px;
  }
  .avis-spotlight blockquote{
    margin:0 0 32px;
    font-family:"Google Sans Flex", sans-serif;
    font-size:24px; font-weight:500;
    line-height:1.45; color:var(--ink);
    letter-spacing:-.3px;
  }
  .avis-spotlight .avis-spot-foot{
    display:flex; align-items:center; justify-content:center;
    gap:24px;
    padding-top:24px;
    border-top:1px solid var(--line);
  }
  .avis-spotlight .avis-spot-author{
    text-align:left;
    font-size:13px; color:var(--ink-3);
    line-height:1.4;
  }
  .avis-spotlight .avis-spot-author b{
    display:block; color:var(--ink); font-size:15px; font-weight:700;
  }
  .avis-spotlight .avis-spot-source{
    height:26px; width:auto;
  }

  /* ============================================================ */
  /*    BLOC : Process accordéon (photo + liste numérotée)         */
  /* ============================================================ */
  .process-accordion{
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap:40px;
    align-items:start;
    max-width:1280px; margin:0 auto;
  }
  .process-accordion .photo{
    border-radius:var(--radius-lg);
    background-color:var(--paper-3);
    background-size:cover; background-position:center;
    aspect-ratio: 1/1;
    width:100%;
  }
  .process-accordion .content{
    padding:8px 0;
  }
  .process-accordion .num-list{
    list-style:none;
    margin:0; padding:0;
  }
  .process-accordion .num-list li{
    padding:18px 0;
    border-top:1px solid var(--line);
  }
  .process-accordion .num-list li:first-child{
    border-top:0; padding-top:0;
  }
  .process-accordion .num-list .row{
    display:flex; align-items:center; gap:8px;
    width:100%;
    background:transparent; border:0; padding:0;
    text-align:left; cursor:pointer;
    font-family:"Google Sans Flex", sans-serif;
    font-size:22px; font-weight:800;
    letter-spacing:-.4px;
    color:var(--ink);
  }
  .process-accordion .num-list .n{
    color:var(--accent);
  }
  .process-accordion .num-list .dash{
    color:var(--ink); font-weight:700;
  }
  .process-accordion .num-list .lbl{ flex:1 }
  .process-accordion .num-list .chev{
    width:18px; height:18px;
    border-right:2px solid var(--ink-3);
    border-bottom:2px solid var(--ink-3);
    transform: rotate(45deg);
    transition: transform .25s ease, border-color .2s ease;
    margin-right:6px;
    flex:0 0 auto;
  }
  .process-accordion .num-list li.is-open .chev{
    transform: rotate(-135deg);
    border-color: var(--accent);
  }
  .process-accordion .num-list li.is-open .n{
    color:var(--accent);
  }
  .process-accordion .num-list .panel{
    display:grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows .3s ease;
  }
  .process-accordion .num-list .panel > p{
    overflow:hidden;
    margin:0;
    font-size:13.5px; line-height:1.55;
    color:var(--ink-3);
  }
  .process-accordion .num-list li.is-open .panel{
    grid-template-rows: 1fr;
  }
  .process-accordion .num-list li.is-open .panel > p{
    margin-top:8px;
  }

  /* ============================================================ */
  /*    BLOC : Reasons stack (cards icône + texte empilées)        */
  /* ============================================================ */
  .reasons-stack{
    display:flex; flex-direction:column;
    gap:18px;
    max-width:1180px; margin:0 auto;
  }
  /* Option : cartes sur 2 colonnes (desktop) */
  .reasons-stack.is-two-cols{
    display:grid;
    /* 2 colonnes max, min 300px par carte, repli en 1 colonne sans déborder */
    grid-template-columns:repeat(auto-fit, minmax(min(100%, max(300px, calc(50% - 9px))), 1fr));
    align-items:stretch;
  }
  .reasons-stack.is-two-cols .reason-card{
    grid-template-columns:110px 1fr;
    padding:26px 28px;
  }
  .reason-card{
    background:#fff;
    border-radius:var(--radius-lg);
    display:grid;
    grid-template-columns: 160px 1fr;
    align-items:center;
    gap:24px;
    padding:30px 36px;
  }
  .reason-card .ico{
    width:50px; height:50px;
    margin:0 auto;
    display:block;
    object-fit:contain;
  }
  .reason-card .ico-emoji{
    font-size:40px;
    line-height:50px;
    text-align:center;
  }
  .reason-card .txt h4{
    font-family:"Google Sans Flex", sans-serif;
    font-size:20px; font-weight:700;
    letter-spacing:-.3px;
    color:var(--ink);
    margin:0 0 10px;
  }
  .reason-card .txt p{
    margin:0;
    font-size:14.5px; line-height:1.6;
    color:var(--ink-2);
  }
  .reason-card .txt p u{
    text-decoration: none;
    font-weight: 600;

    text-decoration-thickness: 1.5px;
    text-underline-offset: 2px;
  }

  /* ============================================================ */
  /*    BLOC : Callback banner (réassurance "Laissez-nous rappeler") */
  /* ============================================================ */
  .callback-arrow{
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    color:var(--accent);
    margin:32px auto 24px;
    width:24px;
  }
  .callback-arrow svg{ width:24px; height:auto; display:block }
  .callback-arrow .arrow-head{ height:24px; margin-top:-4px }

  .callback-banner{
    position:relative;
    background:var(--accent);
    color:#fff;
    border-radius:var(--radius-lg);
    padding:36px 64px 36px 56px;
    max-width:1180px; margin:0 auto;
    overflow:visible;
    display:flex; align-items:center;
    min-height:200px;
  }
  .callback-banner::before{
    content:""; position:absolute; inset:0;
    background-image: url("../img/picto-isoface-2.svg");
    background-repeat:no-repeat;
    background-position: 38% center;
    background-size: 360px;
    filter: brightness(0) invert(1);
    opacity:.10; pointer-events:none;
    border-radius:inherit;
    overflow:hidden;
  }
  .callback-banner > *{ position:relative; z-index:1 }
  .callback-content{
    flex:1;
    padding-right:240px;
  }
  .callback-content h3{
    font-family:"Google Sans Flex", sans-serif;
    font-size:30px; font-weight:700;
    color:#fff; margin:0 0 22px;
    letter-spacing:-.4px; line-height:1.15;
  }
  .callback-content h3 em{
    color:#fff !important;
    font-weight:300 !important;
    background:none !important;
    background-image:none !important;
    padding:0 !important;
  }
  .callback-form{
    display:grid;
    grid-template-columns: 1fr 1fr auto;
    gap:14px; align-items:end;
  }
  .callback-form .cb-field{
    display:flex; flex-direction:column; gap:6px;
  }
  .callback-form .cb-field label{
    font-size:12.5px; font-weight:600;
    color:#fff; letter-spacing:.2px;
  }
  .callback-form .cb-field input{
    height:46px; border-radius:var(--radius-full);
    border:0; background:#fff;
    padding:0 22px;
    font-family:inherit; font-size:14px; color:var(--ink);
    outline:0;
  }
  .callback-form .cb-field input:focus{
    box-shadow: 0 0 0 3px rgba(255,255,255,.35);
  }
  .callback-form .green-btn{
    height:46px; padding:0 26px;
    background:var(--green); color:#fff;
    border:0; border-radius:var(--radius-full);
    font-family:inherit; font-size:14px; font-weight:600;
    cursor:pointer;
    display:inline-flex; align-items:center; gap:10px;
    transition: background .2s ease;
  }
  .callback-form .green-btn:hover{ background:#015C24 }
  .callback-form .green-btn .arrow-r{ font-size:16px; line-height:1 }

  /* CF7 dans le bandeau callback — surcharge cf7.css par défaut.
     Aligne le rendu sur l'ancien `.callback-form` (champs blancs ronds,
     bouton vert foncé). Scopé à .callback-form-wrap : la page contact
     utilise aussi .iso-cf7-callback (variant --quote) et ne doit PAS
     hériter de cette grille 4 colonnes. */
 /* .callback-form-wrap.iso-cf7-callback .wpcf7-form{
    display:grid;
    grid-template-columns: 1fr 1fr 1fr auto;
    gap:12px; align-items:center;
  }*/
  .callback-form-wrap.iso-cf7-callback .wpcf7-form > p,
  .callback-form-wrap.iso-cf7-callback .wpcf7-form > label{
    margin:0;
  }
  .callback-form-wrap.iso-cf7-callback label{
    display:flex; flex-direction:column; gap:6px;
    font-size:0; /* masque l'éventuel texte parent label */
  }
  .callback-form-wrap.iso-cf7-callback .wpcf7-form-control:not(.wpcf7-submit):not(.wpcf7-acceptance):not(.wpcf7-list-item):not(.wpcf7-list-item-label){
    height:46px; border-radius:var(--radius-full, 999px);
    border:0; background:#fff;
    padding:0 22px;
    font-family:inherit; font-size:14px; color:var(--ink);
    box-sizing:border-box;
    width:100%;
  }
  .callback-form-wrap.iso-cf7-callback .wpcf7-form-control:focus{
    outline:0; box-shadow:0 0 0 3px rgba(255,255,255,.35);
  }
  .callback-form-wrap.iso-cf7-callback .wpcf7-submit{
    height:46px; padding:0 26px;
    background:var(--green, #014A1F); color:#fff;
    border:0; border-radius:var(--radius-full, 999px);
    font-family:inherit; font-size:14px; font-weight:700;
    cursor:pointer;
    transition: background .2s ease, transform .05s;
    white-space:nowrap;
    order:3;
  }
  .callback-form-wrap.iso-cf7-callback .wpcf7-submit:hover{ background:#015C24 }
  .callback-form-wrap.iso-cf7-callback .wpcf7-submit:active{ transform:translateY(1px) }
  .callback-form-wrap.iso-cf7-callback .wpcf7-acceptance{
    grid-column:1 / -1;
    margin-top:4px;
  }
  .callback-form-wrap.iso-cf7-callback .wpcf7-acceptance .wpcf7-list-item{ margin:0 }
  .callback-form-wrap.iso-cf7-callback .wpcf7-acceptance label{
    display:flex; flex-direction:row !important; align-items:center; gap:8px;
    font-size:12.5px; color:rgba(255,255,255,.92); font-weight:500;
  }
  .callback-form-wrap.iso-cf7-callback .wpcf7-acceptance input[type="checkbox"]{
    width:18px; height:18px; flex-shrink:0;
    accent-color:#fff;
  }
  .callback-form-wrap.iso-cf7-callback .wpcf7-not-valid-tip{
    color:#FFE4B5; font-size:12px; font-weight:600;
    margin-top:4px; display:block;
  }
  .callback-form-wrap.iso-cf7-callback .wpcf7-response-output{
    grid-column:1 / -1;
    background:rgba(255,255,255,.95); color:var(--ink);
    border-radius:12px; padding:10px 14px; margin:8px 0 0 !important;
    font-size:13px; font-weight:600;
  }
  .callback-form-wrap.iso-cf7-callback .wpcf7-spinner{ background:#fff !important; order:2; }
  @media (max-width: 900px){
    .callback-form-wrap.iso-cf7-callback .wpcf7-form{ grid-template-columns:1fr 1fr; }
    .callback-form-wrap.iso-cf7-callback .wpcf7-submit{ grid-column:1 / -1; height:48px }
  }
  @media (max-width: 540px){
    .callback-form-wrap.iso-cf7-callback .wpcf7-form{ grid-template-columns:1fr; }
  }
  .callback-banner .callback-cutout{
    position:absolute;
    right:30px; bottom:0;
    width:240px; max-height:340px;
    height:auto;
    object-fit:contain; object-position:bottom right;
    z-index:2;
    pointer-events:none;
  }

  /* ============================================================ */
  /*    BLOC : 4 raisons (icon-reasons)                            */
  /* ============================================================ */
  .icon-reasons{
    display:grid;
    grid-template-columns: repeat(4, 1fr);
    gap:18px;
    max-width:1280px; margin:0 auto;
    padding:32px 0;
  }
  .icon-reason{
    background:#fff;
    border:1px solid var(--line);
    border-radius:var(--radius);
    padding:28px 24px;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  }
  .icon-reason:hover{
    border-color:var(--accent);
    transform:translateY(-3px);
    box-shadow: 0 14px 28px -12px rgba(10,10,10,.12);
  }
  .icon-reason .ico{
    width:48px; height:48px;
    background:var(--brand-soft); color:var(--accent);
    border-radius:var(--radius-sm);
    display:flex; align-items:center; justify-content:center;
    font-size:24px; margin-bottom:18px;
  }
  .icon-reason h4{
    font-family:"Google Sans Flex", sans-serif;
    font-size:17px; font-weight:700; letter-spacing:-.3px;
    color:var(--ink); margin:0 0 10px; line-height:1.25;
  }
  .icon-reason p{
    font-size:13.5px; line-height:1.55;
    color:var(--ink-3); margin:0;
  }

  /* ============================================================ */
  /*    BLOC : Editorial row (texte + image alternés)              */
  /* ============================================================ */
  .editorial-row{
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap:56px;
    max-width:1180px; margin:0 auto;
    padding:48px 20px;
    align-items:center;
  }
  .editorial-row.image-right .image{ order:2 }
  .editorial-row.image-right .text{ order:1 }
  /* Dans le corps d'article : empilé (image au-dessus, texte en dessous) */
  .article-prose .editorial-row{
    grid-template-columns: 1fr;
    gap:24px;
    padding:24px 0;
  }
  .article-prose .editorial-row.image-right .image,
  .article-prose .editorial-row .image{ order:0 }
  .article-prose .editorial-row.image-right .text,
  .article-prose .editorial-row .text{ order:1 }
  .article-prose .editorial-row .image{ aspect-ratio:16/9 }
  .editorial-row .image{
    border-radius:var(--radius);
    background-color:var(--paper-3);
    background-size:cover; background-position:center;
    aspect-ratio:5/4;
    box-shadow: 0 14px 30px -16px rgba(10,10,10,.14);
  }
  .editorial-row .text h3{
    font-family:"Google Sans Flex", sans-serif;
    font-size:28px; font-weight:700; color:var(--ink);
    letter-spacing:-.5px; margin: 0 0 16px;
    line-height:1.15;
  }
  /* surlignage géré par règle globale em */
  .editorial-row .text p{
    font-size:14.5px; line-height:1.65;
    color:var(--ink-2); margin:0 0 14px;
  }
  .editorial-row .text p:last-child{ margin-bottom:0 }
  .editorial-row .text ul{
    margin:14px 0 0; padding-left:0; list-style:none;
  }
  .editorial-row .text ul li{
    position:relative; padding-left:32px;
    margin-bottom:12px; font-size:14px; line-height:1.5;
    color:var(--ink-2);
  }
  .editorial-row .text ul li::before{
    content:"✓";
    position:absolute; left:0; top:1px;
    width:22px; height:22px;
    background:var(--brand-soft); color:var(--accent);
    border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    font-size:12px; font-weight:700;
  }

  /* ============================================================ */
  /*    BLOC : Guide banner (orange) + accordéon imbriqué          */
  /* ============================================================ */
  .guide-banner-wrap{
    max-width:860px; margin:0 auto;
    padding:32px 20px 48px;
  }
  .guide-banner-wrap .seo-accordion{
    max-width:none;
    margin-top:0;
  }
  .guide-banner{
    background:var(--accent);
    color:#fff;
    border-radius:var(--radius-lg) 24px 0 0;
    padding:22px 28px;
    display:flex; align-items:center; gap:18px;
  }
  .guide-banner .picto-wrap{
    width:52px; height:52px; flex-shrink:0;
    background:#fff; border-radius:var(--radius-sm);
    display:flex; align-items:center; justify-content:center;
  }
  .guide-banner .picto-wrap img{ height:32px; width:auto }
  .guide-banner .text-wrap h3{
    margin:0; font-family:"Google Sans Flex", sans-serif;
    font-size:18px; font-weight:700; letter-spacing:-.2px;
    line-height:1.25; color:#fff;
  }
  .guide-banner .text-wrap small{
    display:block; margin-top:3px;
    font-size:13px; font-weight:400; opacity:.88;
  }

  /* ============================================================ */
  /*    PAGE : Auteur (E-A-T / Person schema)                      */
  /* ============================================================ */
  .author-hero{
    background:var(--paper-2);
    padding:64px 40px;
  }
  .author-hero .wrap{
    display:grid;
    grid-template-columns: 360px 1fr;
    gap:48px;
    align-items:center;
    max-width:1180px; margin:0 auto;
  }
  .author-hero .author-photo{
    position:relative;
    aspect-ratio:1/1;
    border-radius:var(--radius-lg);
    background-color:var(--paper-3);
    background-size:cover; background-position:center;
    overflow:hidden;
  }
  .author-hero .author-photo .badge-pro{
    position:absolute; bottom:14px; left:14px;
    display:inline-flex; align-items:center; gap:6px;
    background:#fff;
    padding:7px 12px;
    border-radius:var(--radius-full);
    font-size:12px; font-weight:700; color:var(--ink);
    letter-spacing:.2px;
    box-shadow: 0 4px 12px rgba(0,0,0,.10);
  }
  .author-hero .author-photo .badge-pro .dot{
    width:8px; height:8px; border-radius:50%;
    background:var(--green);
  }
  .author-hero .author-info h1{
    font-family:"Google Sans Flex", sans-serif;
    font-size:64px; font-weight:700;
    letter-spacing:-2px; line-height:1;
    margin:14px 0 18px;
    color:var(--ink);
  }
  .author-hero .author-info .lead{
    font-size:17px; line-height:1.6;
    color:var(--ink-2);
    max-width:580px;
    margin:0 0 28px;
  }
  .author-hero .author-stats{
    display:grid; grid-template-columns: repeat(4, 1fr);
    gap:18px;
    padding:22px 0;
    border-top:1px solid var(--line);
    border-bottom:1px solid var(--line);
    margin-bottom:24px;
  }
  .author-hero .author-stats .stat b{
    display:block;
    font-family:"Google Sans Flex", sans-serif;
    font-size:24px; font-weight:800;
    color:var(--accent);
    line-height:1;
    letter-spacing:-.5px;
  }
  .author-hero .author-stats .stat span{
    display:block; margin-top:6px;
    font-size:12.5px; color:var(--ink-3);
    line-height:1.35;
  }
  .author-hero .author-actions{
    display:flex; align-items:center;
    gap:14px; flex-wrap:wrap;
  }
  .author-hero .author-link{
    display:inline-flex; align-items:center; gap:8px;
    padding:10px 16px;
    color:var(--ink-2);
    font-size:13px; font-weight:600;
    text-decoration:none;
    border-radius:var(--radius-full);
    transition: color .2s ease;
  }
  .author-hero .author-link:hover{ color:var(--accent) }
  .author-hero .author-link svg{ flex:0 0 auto }

  .author-credentials{
    display:grid; grid-template-columns: repeat(4, 1fr);
    gap:18px;
    max-width:1180px; margin:0 auto;
  }
  .credential-card{
    background:#fff;
    border:1px solid var(--line);
    border-radius:var(--radius);
    padding:24px 22px;
    display:flex; flex-direction:column;
    transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
  }
  .credential-card:hover{
    border-color:var(--accent);
    transform:translateY(-2px);
    box-shadow: 0 12px 24px -12px rgba(10,10,10,.10);
  }
  .credential-card .ico{
    width:42px; height:42px;
    margin-bottom:18px;
    object-fit:contain;
  }
  .credential-card h4{
    font-family:"Google Sans Flex", sans-serif;
    font-size:16px; font-weight:700;
    color:var(--ink);
    letter-spacing:-.2px;
    margin:0 0 10px;
    line-height:1.3;
  }
  .credential-card p{
    font-size:13.5px; line-height:1.55;
    color:var(--ink-3);
    margin:0;
  }

  .author-bio-block{
    max-width:780px; margin:0 auto;
    font-size:15.5px; line-height:1.75; color:var(--ink-2);
  }
  .author-bio-block h3{
    font-family:"Google Sans Flex", sans-serif;
    font-size:32px; font-weight:700;
    color:var(--ink);
    letter-spacing:-.5px; margin:0 0 28px;
    line-height:1.1;
  }
  .author-bio-block p{ margin:0 0 18px }
  .author-bio-block strong{ color:var(--ink); font-weight:700 }
  .author-bio-block em{ color:var(--accent); font-weight:600 }

  /* ============================================================ */
  /*    BLOC : SEO content (byline, drop-cap, pullquote, stats)    */
  /* ============================================================ */
  /* .seo-block passe en flex column pour repousser la byline en fin de bloc via order */
  .seo-block{ display:flex; flex-direction:column; }
  .seo-block > .seo-byline{ order:99; }

  .seo-byline{
    display:flex; align-items:center; gap:14px;
    padding:14px 0;
    border-top:1px solid var(--line);
    border-bottom:1px solid var(--line);
  }
  .seo-byline .av{
    width:46px; height:46px; border-radius:50%;
    background-color:var(--paper-3);
    background-size:cover; background-position:center;
    flex:0 0 auto;
  }
  .seo-byline .info{
    display:flex; flex-direction:column; gap:1px;
  }
  .seo-byline .name{
    font-family:"Google Sans Flex", sans-serif;
    font-size:14px; font-weight:700;
    color:var(--ink); letter-spacing:-.1px;
    text-decoration:none;
    transition: color .15s ease;
  }
  .seo-byline a.name:hover{
    color:var(--accent);
    text-decoration:underline;
    text-decoration-thickness:1.5px;
    text-underline-offset:3px;
  }
  .seo-byline .role{
    font-size:12.5px; color:var(--ink-3);
    line-height:1.35;
  }
  .seo-byline .meta{
    margin-left:auto;
    display:flex; flex-direction:column; align-items:flex-end; gap:1px;
    font-size:11.5px; color:var(--ink-4);
    line-height:1.4;
  }
  .seo-block .has-dropcap::first-letter,
  .seo-block > p.has-dropcap::first-letter{
    font-family:"Google Sans Flex", sans-serif;
    font-size:62px; font-weight:800;
    float:left; line-height:.85;
    margin: 5px 12px 0 0;
    color:var(--accent);
    letter-spacing:-2px;
  }
  .seo-pullquote{
    margin:36px 0;
    padding:18px 0 18px 28px;
    border-left:3px solid var(--accent);
    font-family:"Google Sans Flex", sans-serif;
    font-size:21px; font-weight:500;
    line-height:1.4;
    color:var(--ink);
    letter-spacing:-.2px;
  }
  .seo-pullquote::before{
    content:"\201C";
    color:var(--accent);
    font-size:1.4em; line-height:0; vertical-align:-.1em;
    margin-right:4px;
  }
  .seo-stats{
    display:grid;
    grid-template-columns: repeat(3, 1fr);
    gap:14px;
    margin:36px 0;
    padding:24px;
    background:var(--paper-2);
    border-radius:var(--radius);
  }
  .seo-stats .stat{ text-align:center }
  .seo-stats .stat b{
    display:block;
    font-family:"Google Sans Flex", sans-serif;
    font-size:32px; font-weight:800;
    color:var(--accent);
    line-height:1;
    letter-spacing:-1px;
  }
  .seo-stats .stat span{
    display:block; margin-top:6px;
    font-size:13px; color:var(--ink-3);
    line-height:1.35;
  }

  /* ============================================================ */
  /*    BLOC : Résumé de la page / article (synthèse structurée)    */
  /* ============================================================ */
  .ai-summary{
    max-width:860px; margin:0 auto;
    background:#fff;
    border:1px solid var(--line);
    border-radius:var(--radius);
    padding:24px 28px 22px;
    position:relative;
  }
  .ai-summary-head{
    display:flex; align-items:flex-start; gap:14px;
    padding-bottom:16px;
    border-bottom:1px solid var(--line);
    margin-bottom:16px;
  }
  .ai-summary .ai-icon{
    flex:0 0 auto;
    width:42px; height:42px;
    border-radius:var(--radius-sm);
    background:var(--brand-soft, rgba(232,90,26,.10));
    color:var(--accent);
    display:flex; align-items:center; justify-content:center;
  }
  .ai-summary .ai-icon svg{ width:22px; height:22px }
  .ai-summary .ai-summary-meta{
    flex:1;
    display:flex; flex-direction:column; gap:2px;
  }
  .ai-summary .ai-label{
    font-family:"Google Sans Flex", sans-serif;
    font-size:15px; font-weight:700;
    color:var(--ink); letter-spacing:-.1px;
  }
  .ai-summary .ai-sublabel{
    font-size:12.5px; color:var(--ink-3);
    line-height:1.4;
  }
  .ai-summary-list{
    list-style:none; padding:0; margin:0;
    display:flex; flex-direction:column; gap:10px;
  }
  .ai-summary-list li{
    position:relative;
    padding-left:22px;
    font-size:14px; line-height:1.55;
    color:var(--ink-2);
  }
  .ai-summary-list li::before{
    content:""; position:absolute;
    left:6px; top:9px;
    width:6px; height:6px;
    background:var(--accent); border-radius:50%;
  }
  .ai-summary-list li b{
    color:var(--ink); font-weight:700;
  }

  /* ============================================================ */
  /*    BLOC : Bandeau formulaire compact (FORMULAIRE.png)         */
  /* ============================================================ */
  .contact-banner-form{
    background:var(--accent);
    color:#fff;
    border-radius:var(--radius-lg);
    padding:32px 36px 32px 0;
    max-width:1280px; margin:0 auto;
    display:grid;
    grid-template-columns: 1fr 1.4fr;
    gap:36px;
    align-items:center;
    position:relative;
    overflow:hidden;
  }
  .contact-banner-form::before{
    content:""; position:absolute; inset:0;
    background-image: url("img/picto-isoface-2.svg");
    background-repeat:no-repeat;
    background-position: -40px center;
    background-size: 280px;
    opacity:.10; pointer-events:none;
  }
  .contact-banner-form .text{ padding-left:44px; position:relative; z-index:1 }
  .contact-banner-form h3{
    font-family:"Google Sans Flex", sans-serif;
    font-size:30px; font-weight:700; letter-spacing:-.6px;
    margin:0 0 10px; color:#fff;
    line-height:1.1;
  }
  /* surlignage géré par règle globale em (variante "on-orange" = voile blanc) */
  .contact-banner-form p{
    margin:0; font-size:13.5px; line-height:1.55;
    color:rgba(255,255,255,.88);
  }
  .contact-banner-form .form{
    background:#fff;
    border-radius:var(--radius);
    padding:18px;
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap:10px;
    position:relative; z-index:1;
  }
  .contact-banner-form .form input{
    border:1px solid var(--line);
    border-radius:var(--radius-sm);
    padding:12px 14px;
    font-size:13.5px; font-family:inherit;
    color:var(--ink);
    background:var(--paper-3);
    outline:none;
    transition: border-color .15s;
  }
  .contact-banner-form .form input:focus{ border-color:var(--accent); background:#fff }
  .contact-banner-form .form .btn{
    grid-column: 1 / -1;
    width:100%; justify-content:center;
    background:var(--accent); color:#fff;
    border:0; padding:13px 22px;
  }
  .contact-banner-form .form .btn:hover{ background:var(--accent-2) }

  /* ============================================================ */
  /*    BLOC : Agencies finder (carte + liste 7 agences)           */
  /* ============================================================ */
  .agencies-finder{
    max-width:1280px; margin:0 auto;
  }
  .agencies-finder .agencies-grid{
    display:grid;
    grid-template-columns: 1.4fr 1fr;
    align-items:stretch;
    background-color: white;
    border-radius:var(--radius);
  }
  .agencies-finder .map-area{
    border-radius:var(--radius); overflow:hidden;
    background-color: var(--paper-3);
    background-size: cover; background-position: center;
    min-height: 420px;
  }
  .agencies-finder .agencies-list{
    background:#fff;
    border-radius:var(--radius);
    padding:14px;
    display:flex; flex-direction:column;
  }
  .agencies-finder .agencies-list-head{
    padding:14px 18px 12px;
    margin-bottom:6px;
  }
  .agencies-finder .agencies-list-head h4{
    font-family:"Google Sans Flex", sans-serif;
    font-size:18px; font-weight:700; letter-spacing:-.3px;
    color:var(--ink); margin:0;
  }

  /* ============================================================ */
  /*    BLOC : Certifications strip                                */
  /* ============================================================ */
  .certifications-strip{
    background:#fff;
    border:1px solid var(--line);
    border-radius:var(--radius);
    padding:14px 22px;
    display:flex; align-items:center; justify-content:space-between;
    gap:20px; flex-wrap:wrap;
    max-width:1280px; margin:0 auto;
  }
  .certifications-strip .cert-label{
    font-size:11px; font-weight:700;
    color:var(--ink-3); text-transform:uppercase;
    letter-spacing:1px;
    flex-shrink:0;
  }
  .certifications-strip .cert-list{
    display:flex; gap:22px; flex-wrap:wrap;
    align-items:center;
  }
  .certifications-strip .cert-item{
    display:flex; align-items:center; gap:8px;
    font-size:12.5px; font-weight:600; color:var(--ink);
  }
  .certifications-strip .cert-item .check{
    width:18px; height:18px; border-radius:50%;
    background:var(--brand-soft); color:var(--accent);
    display:flex; align-items:center; justify-content:center;
    font-size:11px; font-weight:700;
  }

  /* ============================================================ */
  /*    BLOC : Media strip — "Ils parlent de nous"                 */
  /* ============================================================ */
  .media-strip{
    max-width:1280px; margin:0 auto;
    display:grid; grid-template-columns: minmax(260px, 320px) 1fr;
    align-items:center; gap:48px;
    padding:8px 0;
  }
  .media-strip-intro{
    display:flex; flex-direction:column; gap:14px;
  }
  .media-strip-title{
    display:flex; align-items:center; gap:12px;
  }
  .media-strip-title .picto{
    width:46px; height:46px; flex-shrink:0;
  }
  .media-strip-title h3{
    font-family:"Google Sans Flex", sans-serif;
    font-size:26px; font-weight:700; line-height:1.05;
    color:var(--ink); margin:0;
    letter-spacing:-.5px;
  }
  .media-strip-title h3 em{
    font-style:normal; font-weight:700;
    background:var(--brand); color:#fff;
    padding:1px 8px 3px; border-radius:6px;
    display:inline-block;
  }
  .media-strip-intro p{
    font-size:13.5px; color:var(--ink-2);
    margin:0; max-width:280px; line-height:1.45;
  }
  .media-strip-carousel{
    position:relative;
    background:#fff;
    border-radius:var(--radius-lg);
    padding:28px 64px;
    min-height:140px;
    min-width:0;
    display:flex; align-items:center;
  }
  .media-strip-carousel .media-track-viewport{
    overflow:hidden;
    width:100%;
    min-width:0;
    flex:1 1 auto;
  }
  .media-strip-carousel .media-track{
    display:flex; align-items:center;
    gap:48px;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    scroll-behavior:smooth;
    scrollbar-width:none;
    -ms-overflow-style:none;
  }
  .media-strip-carousel .media-track::-webkit-scrollbar{ display:none }
  .media-strip-carousel .media-slide{
    flex:0 0 calc((100% - 96px) / 3);
    display:flex; align-items:center; justify-content:center;
    scroll-snap-align:start;
  }
  .media-strip-carousel .media-slide img{
    max-height:64px; max-width:160px;
    width:auto; height:auto;
    object-fit:contain;
  }
  .media-arrow{
    position:absolute; top:50%; transform:translateY(-50%);
    width:40px; height:40px; border-radius:50%;
    background:var(--green); color:#fff;
    border:0; cursor:pointer; font-size:20px; font-weight:700;
    display:flex; align-items:center; justify-content:center;
    box-shadow: 0 4px 12px rgba(0,0,0,.18);
    transition: background .2s ease;
    z-index:2;
  }
  .media-arrow:hover{ background:#015C24 }
  .media-arrow.left{ left:-20px }
  .media-arrow.right{ right:-20px }

  /* ============================================================ */
  /*    BLOC : Certifications et garanties (logos)                 */
  /* ============================================================ */
  .cert-banner{
    background:#fff;
    border-radius:var(--radius-lg);
    padding:24px 44px;
    max-width:1280px; margin:0 auto;
    display:flex; align-items:center; gap:48px;
  }
  .cert-banner-title{
    flex-shrink:0;
  }
  .cert-banner-title h4{
    font-family:"Google Sans Flex", sans-serif;
    font-size:18px; font-weight:700;
    color:var(--ink); margin:0;
    line-height:1.25; letter-spacing:-.2px;
  }
  /* Emphasis dans le titre du cert-banner : couleur accent au lieu d'un
     soulignement (charte : pas de text-decoration sur les Hx). */
  .cert-banner-title h4 .underline{
    color: var(--brand);
    font-weight: 800;
  }
  .cert-banner-logos{
    flex:1;
    display:flex; align-items:center; justify-content:space-around;
    gap:32px;
  }
  .cert-banner-logos img{
    max-height:70px; max-width:130px;
    width:auto; height:auto;
    object-fit:contain;
  }
  /* Logo cliquable (reco SEO p.22) : renvoie vers la page certif/garantie. */
  .cert-banner-logo-link{
    display:inline-flex; align-items:center;
    transition:opacity .15s ease, transform .15s ease;
  }
  .cert-banner-logo-link:hover{ opacity:.75; transform:translateY(-2px) }
  .cert-banner-logo-link:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; border-radius:4px }

  /* ============================================================ */
  /*    BLOC : Chantier spotlight (MISE EN AVANT CHANTIERS top)    */
  /* ============================================================ */
  .chantier-spotlight-wrap{
    background:var(--brand-soft);
    border-radius:var(--radius-lg);
    position:relative;
    max-width:1180px; margin:0 auto;
    padding:48px 20px;
  }
  .chantier-spotlight{
    padding:24px 48px;
    display:grid; grid-template-columns: 1.05fr 1fr;
    align-items:stretch;
  }
  .chantier-spotlight .photo{
    border-radius:var(--radius) 0 0 var(--radius);
    background-color:var(--paper-3);
    background-size:cover; background-position:center;
    min-height:340px;
  }
  .chantier-spotlight .info{
    background:#fff;
    border-radius:0 var(--radius) var(--radius) 0;
    padding:28px 30px;
    display:flex; flex-direction:column;
    box-shadow: 0 4px 14px -8px rgba(10,10,10,.06);
  }
  .chantier-spotlight .kpi-pills{
    display:flex; flex-direction:column; align-items:flex-start;
    gap:6px; margin-bottom:14px;
  }
  .chantier-spotlight .kpi-pill{
    background:var(--brand-soft);
    border-radius:var(--radius-full);
    padding:5px 14px;
    font-size:13px; font-weight:600; color:var(--ink);
    white-space:nowrap;
  }
  .chantier-spotlight .kpi-pill strong{
    color:var(--brand); font-weight:700;
  }
  .chantier-spotlight .info-head{
    display:flex; align-items:center; gap:10px; margin-bottom:14px;
    flex-wrap:wrap;
  }
  .chantier-spotlight .info-head .badge{
    background:var(--accent); color:#fff;
    padding:4px 10px; border-radius:6px;
    font-size:11.5px; font-weight:700;
    letter-spacing:.4px;
  }
  .chantier-spotlight .info-head .stars{
    color:var(--accent); font-size:13px; letter-spacing:1.5px;
  }
  .chantier-spotlight .info-head .public-tag{
    margin-left:auto;
    background:var(--green-soft); color:var(--brand-2);
    padding:3px 9px; border-radius:6px;
    font-size:10.5px; font-weight:700;
    letter-spacing:.6px; text-transform:uppercase;
  }
  .chantier-spotlight h4{
    font-family:"Google Sans Flex", sans-serif;
    font-size:18px; font-weight:700; letter-spacing:-.3px;
    color:var(--ink); margin:0 0 6px; line-height:1.25;
  }
  .chantier-spotlight .meta{
    font-size:12.5px; color:var(--ink-3);
    margin-bottom:12px;
  }
  .chantier-spotlight p{
    font-size:14px; line-height:1.6;
    color:var(--ink-2); margin:0 0 16px;
  }
  .chantier-spotlight .review-source{
    margin-top:auto;
    display:flex; align-items:center; gap:8px;
    padding:10px 14px;
    background:var(--paper-2);
    border-radius:var(--radius-sm);
    font-size:12px; color:var(--ink-3);
  }
  .chantier-spotlight .review-source img{ height:14px }
  .chantier-spotlight .review-source b{ color:var(--ink); font-weight:600 }

  .chantier-spotlight-wrap .arrow{
    position:absolute; top:50%; transform:translateY(-50%);
    width:40px; height:40px; border-radius:50%;
    background:var(--brand-2); color:#fff;
    border:0; cursor:pointer; font-size:12px;
    display:flex; align-items:center; justify-content:center;
    box-shadow: 0 4px 14px rgba(0,0,0,.18);
    z-index:5;
  }
  .chantier-spotlight-wrap .arrow.left{ left: -15px; }
  .chantier-spotlight-wrap .arrow.right{ right:-15px; }
  .chantier-spotlight-cta{ text-align:center; padding-top:28px }

  /* ============================================================ */
  /*    BLOC : Card chantier détaillée (photo top + info below)    */
  /* ============================================================ */
  .card-chantier-detail{
    background:#fff !important;
    border-radius:var(--radius);
    overflow:hidden;
    text-decoration:none;
    display:flex !important;
    flex-direction:column !important;
    width:100%;
    box-sizing:border-box;
    box-shadow: 0 6px 18px -8px rgba(10,10,10,.10);
    transition: transform .2s ease, box-shadow .2s ease;
  }
  .card-chantier-detail:hover{
    transform:translateY(-4px);
    box-shadow: 0 18px 32px -12px rgba(10,10,10,.16);
  }
  .card-chantier-detail > .photo{
    width:100%;
    aspect-ratio:4/3;
    background-color:var(--paper-3);
    background-size:cover; background-position:center;
    flex:0 0 auto;
    display:block;
  }
  .card-chantier-detail > .info{
    width:100%;
    padding:18px 18px 22px;
    display:flex; flex-direction:column; flex:1 1 auto;
    box-sizing:border-box;
  }
  .card-chantier-detail .info .badge{
    display:inline-block;
    background:var(--accent-soft); color:var(--accent);
    padding:3px 9px; border-radius:6px;
    font-size:10.5px; font-weight:700;
    letter-spacing:.5px; text-transform:uppercase;
    align-self:flex-start;
    margin-bottom:8px;
  }
  .card-chantier-detail h4{
    font-family:"Google Sans Flex", sans-serif;
    font-size:15.5px; font-weight:700; letter-spacing:-.2px;
    color:var(--ink); margin:0 0 8px; line-height:1.3;
  }
  .card-chantier-detail .meta{
    font-size:11.5px; color:var(--ink-3);
    line-height:1.55; margin-bottom:10px;
  }
  .card-chantier-detail .meta b{ color:var(--ink); font-weight:600 }
  .card-chantier-detail .ln{
    margin-top:auto;
    color:var(--accent); font-weight:700;
    font-size:13px; text-decoration:none;
    display:inline-flex; align-items:center; gap:4px;
    border-bottom:1.5px solid var(--accent);
    align-self:flex-start; padding-bottom:1px;
  }
  /* Liste clé/valeur (libellé sombre + valeur orange) */
  .card-chantier-detail .kv{
    margin:6px 0 0; padding:0;
    display:flex; flex-direction:column; gap:6px;
    font-size:13px; line-height:1.45;
  }
  .card-chantier-detail .kv > div{
    display:flex; gap:10px; align-items:flex-start;
  }
  .card-chantier-detail .kv dt{
    color:var(--ink); font-weight:500;
    flex:0 0 auto;
  }
  .card-chantier-detail .kv dd{
    margin:0; color:var(--accent); font-weight:700;
  }
  /* Variante horizontale : photo à gauche, infos à droite */
  .card-chantier-detail.is-horizontal{
    flex-direction:row !important;
  }
  .card-chantier-detail.is-horizontal > .photo{
    width:50%;
    aspect-ratio:auto;
    align-self:stretch;
    flex:0 0 50%;
  }
  .card-chantier-detail.is-horizontal > .info{
    width:50%;
    padding:28px 30px;
    justify-content:center;
  }
  .card-chantier-detail.is-horizontal h4{
    font-size:20px; line-height:1.25; margin-bottom:18px;
  }
  .chantier-grid{
    display:grid;
    grid-template-columns: repeat(3, 1fr);
    gap:18px;
    max-width:1180px; margin:0 auto;
  }
  .chantier-grid.cols-4{ grid-template-columns: repeat(4, 1fr); gap:14px }

  /* ============================================================ */
  /*    BLOC : Chantier mosaic (photo grid bottom)                 */
  /* ============================================================ */
  .chantier-mosaic{
    display:grid;
    grid-template-columns: 1.05fr 1fr;
    gap:18px;
    max-width:1180px; margin:0 auto;
    align-items:stretch;
  }
  .chantier-mosaic .mosaic-card{
    margin:0;
    display:flex;
    flex-direction:column;
    background:#fff;
    border-radius:var(--radius);
    overflow:hidden;
    box-shadow: 0 1px 2px rgba(0,0,0,.04);
    transition: transform .2s ease;
    cursor:pointer;
  }
  .chantier-mosaic .mosaic-card:hover{ transform:translateY(-2px) }
  .chantier-mosaic a.mosaic-card{ color:inherit; text-decoration:none }
  .chantier-mosaic .mosaic-photo{
    flex:1 1 auto;
    background-color:var(--paper-3);
    background-size:cover; background-position:center;
  }
  .chantier-mosaic .mosaic-card figcaption,
  .chantier-mosaic .mosaic-card .mosaic-caption{
    padding:14px 18px 16px;
    font-size:13px;
    color:#222;
    line-height:1.4;
    /* Bandeau d'au moins 2 lignes pour une hauteur uniforme sur tous
       les cards (sinon le card hero affiche parfois 1 seule ligne). */
    min-height: calc(2 * 1.4em + 30px);
    box-sizing: border-box;
    flex: 0 0 auto;
  }
  .chantier-mosaic .mosaic-card figcaption strong,
  .chantier-mosaic .mosaic-card .mosaic-caption strong{
    color:var(--brand);
    font-weight:700;
    margin-right:2px;
  }
  .chantier-mosaic .mosaic-hero{
    min-height:560px;
  }
  .chantier-mosaic .mosaic-hero .mosaic-photo{
    min-height:420px;
  }
  .chantier-mosaic .mosaic-right{
    display:grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap:18px;
  }
  .chantier-mosaic .mosaic-right .mosaic-photo{
    min-height:170px;
  }

  /* ============================================================ */
  /*    Carrousels animés — niveaux 1 et 3                         */
  /* ============================================================ */
  /* Niveau 1 : flèches désactivées en bord de track */
  .cards-carousel-arrow:disabled{
    opacity:.35; cursor:default; pointer-events:none;
  }
  .cards-carousel-track{ scroll-behavior:smooth }

  /* Niveau 3 : stage qui empile les slides en grid (overlay parfait) */
  .spotlight-stage{
    display:grid;
    grid-template-areas: "stack";
    position:relative;
  }
  .spotlight-stage > *{
    grid-area: stack;
    opacity:0;
    transform: translateX(28px);
    transition: opacity .45s cubic-bezier(.4,0,.2,1),
                transform .45s cubic-bezier(.4,0,.2,1);
    pointer-events:none;
    visibility:hidden;
  }
  .spotlight-stage > .is-active{
    opacity:1;
    transform:translateX(0);
    pointer-events:auto;
    visibility:visible;
    z-index:1;
  }
  .spotlight-stage > .is-leaving{
    opacity:0;
    transform: translateX(-28px);
    visibility:visible;
  }
  /* Indicateur de position (dots) */
  .spotlight-dots{
    display:flex; gap:8px; justify-content:center;
    margin-top:18px;
  }
  .spotlight-dots button{
    width:8px; height:8px; border-radius:50%;
    background:var(--line-2); border:0; cursor:pointer;
    padding:0;
    transition: background .2s ease, width .2s ease;
  }
  .spotlight-dots button.is-active{
    background:var(--accent); width:24px; border-radius:var(--radius-full);
  }

  /* ============================================================ */
  /*    SCHEMA.ORG RECOMMANDATIONS (panneau hors device frame)    */
  /* ============================================================ */
  .schema-reco{
    max-width:980px;
    margin:32px auto 80px;
    padding:32px 36px;
    background:#fff;
    border:1px solid #E4E2DC;
    border-left:4px solid var(--accent);
    border-radius:14px;
    box-shadow:0 1px 0 rgba(255,255,255,.7) inset, 0 12px 32px -16px rgba(10,10,10,.08);
    font-family:"Inter", system-ui, sans-serif;
    color:var(--ink);
  }
  .schema-reco-head{ margin-bottom:18px }
  .schema-reco-tag{
    display:inline-block;
    font-size:11px; letter-spacing:.9px; text-transform:uppercase;
    color:var(--accent); font-weight:700;
  }
  .schema-reco h3{
    font-family:"Google Sans Flex", sans-serif;
    font-size:22px; font-weight:700; letter-spacing:-.3px;
    margin:6px 0 6px;
    color:var(--ink);
  }
  .schema-reco-sub{
    font-size:13px; color:var(--ink-3); margin:0; line-height:1.55;
  }
  .schema-reco code{
    background:var(--ink); color:#fff;
    padding:1px 7px; border-radius:5px;
    font-family:ui-monospace, Menlo, monospace; font-size:11.5px;
  }
  .schema-reco-list{
    list-style:none; padding:0; margin:0;
  }
  .schema-reco-list li{
    display:grid; grid-template-columns:240px 1fr; gap:18px;
    padding:14px 0; border-top:1px solid #EFEDE7;
    align-items:start;
  }
  .schema-reco-list li > code{
    align-self:start; justify-self:start;
    background:var(--brand-soft); color:#9A3412;
    border:1px solid var(--brand-pale);
    font-size:12px; padding:4px 10px; font-weight:600; line-height:1.3;
  }
  .schema-reco-list li p{
    margin:0; font-size:13.5px; line-height:1.55; color:var(--ink-2);
  }
  .schema-reco-list li p b{ color:var(--ink) }
  .schema-reco-foot{
    margin-top:18px; padding-top:14px;
    border-top:1px dashed #E4E2DC;
    display:flex; gap:24px; flex-wrap:wrap;
    font-size:12.5px; color:var(--ink-3);
  }
  .schema-reco-foot p{ margin:0 }
  .schema-reco-note{
    margin-top:14px; padding:10px 14px;
    background:#FFF7ED; border:1px solid #FED7AA; border-radius:8px;
    font-size:12.5px; color:#9A3412; line-height:1.55;
  }
  .schema-reco-note b{ color:#7C2D12 }

  @media (max-width:760px){
    .schema-reco{ padding:22px 20px; margin:24px 12px 60px }
    .schema-reco-list li{ grid-template-columns:1fr; gap:8px }
  }


  /* ============ MOBILE (auto via media query) ============ */
  @media (max-width: 900px) {
    :where(h1) { font-size:34px; letter-spacing:-.8px }
    :where(h2) { font-size:26px; letter-spacing:-.5px }
    :where(h3) { font-size:20px }
    /* Empêcher l'overflow des boutons sur mobile (min-width:200px global retiré) */
  .btn { min-width:0; padding:12px 18px; font-size:13px }
    .btn-row { grid-template-columns:1fr 1fr }
    /* ============== MOBILE ============== */
  .topbar { display:none }
    .header { padding:14px 18px; gap:12px; justify-content:center; background-color: var(--paper-2); box-shadow: none !important; backdrop-filter: none; border: none; }
    /* Logo brand centré (les éléments header-devis/navmain sont déjà cachés) */
  .header .brand { margin:0 auto }
    .navmain { display:none }
    .brand { font-size:18px }
    .brand-logo { height:34px }
    .brand-suffix { font-size:17px; padding-left:9px }
    .brand .logo-mark { width:32px;height:32px }
    .header-devis { display:none }
    .header-actions-m {
    margin-left:auto; display:flex; gap:8px; align-items:center;
  }
    .burger {
    width:42px;height:42px;border-radius:var(--radius-full);background:var(--paper-2);
    display:flex;align-items:center;justify-content:center;color:var(--ink);
    font-weight:500; border:1px solid var(--line);
  }
    .burger img { width:20px; height:20px; display:block }
    .mega-demo-section { display:none }
    h2.display { font-size:38px }
    .lead { font-size:15px }
    section.sec { padding:10px 18px }
    section.sec h3.title { font-size:32px }
    .real { min-height:200px; border-radius:var(--radius) }
    .real.big { grid-row:auto }
    .footer { padding:44px 18px 20px }
    .footer .wrap { grid-template-columns: 1fr 1fr; gap:24px }
    /* Bloc brand (logo + baseline) sur toute la largeur, centré au-dessus des 2 colonnes */
  .footer .wrap > div:first-child {
    grid-column: 1 / -1;
    text-align:center;
    margin-bottom: 6px;
  }
    .footer .wrap > div:first-child .brand {
    justify-content:center; display:flex;
  }
    .footer .baseline { margin:0 auto; max-width:320px }
    .map-big { min-height:300px }
    .dept-grid { grid-template-columns: 1fr 1fr; gap:10px }
    /* Mobile : empilé sur 1 colonne */
  .dept-grid.dept-grid-pair {
    grid-template-columns: 1fr;
    max-width:340px;
  }
    .team { grid-template-columns: 1fr 1fr; gap:10px }
    .agence-card h1 { font-size:32px }
    .row-2 { grid-template-columns:1fr }
    .trust-strip { flex-direction:column; gap:10px; align-items:flex-start }
    .press-logo { font-size:16px }
    .mobile-bottom { display:flex }
    /* Espace bas pour que la bottom-bar fixe ne masque pas le footer. */
    body{ padding-bottom: calc(74px + env(safe-area-inset-bottom, 0px)) }
    /* Drawer plein écran qui glisse depuis le bas */
    .mobile-menu { display:block }
    /* Header mobile : masquer la pill "Devis" et le burger (redondants avec la bottom bar drawer) */
  .header-actions-m .pill-btn, .header-actions-m .burger { display:none }
    /* Mobile */
  .hero-v2 {
    grid-template-columns:1fr;
    gap:16px;
  }
    .hero-v2 .hero-card { padding: 0; border-radius: var(--radius); height: auto; margin: 0;  position: initial; border: 0; background: transparent; box-shadow: none;}
    .hero-v2 .hero-card h1 { font-size:30px; letter-spacing:-1px }
    .hero-v2 .hero-cta { flex-direction:column; gap:10px }
    .hero-v2 .hero-cta .btn { width:100%; justify-content:center }
    .hero-v2 .hero-visual { height:380px; border-radius:var(--radius) }
    .hero-v2 > .hero-cutout { height:45%; clip-path: none; -webkit-clip-path: none; bottom: 120px; top: auto; }
    .hero-v2 .hero-badge { padding:8px 10px }
    .hero-v2 .hero-badge img.picto { height:26px }
    .hero-v2 .hero-badge .badge-text strong { font-size:11.5px }
    .hero-v2 .hero-badge .badge-text small { font-size:9px }
    .hero-v2 .hero-ctas { position: absolute;z-index: 9; bottom: -80px; width: 100%; }
    .hero-v2 .hero-ctas .hero-cta {  padding: 25px 10px 30px 10px; margin-left: 15px; margin-right: 15px;margin-bottom: 0px;  background: white; border-radius: var(--radius-lg) var(--radius-lg) 0 0;}
    /* Mobile bandeaux */
  .banner { padding:24px 18px; border-radius:var(--radius) }
    .banner h3 { font-size:22px; letter-spacing:-.4px }
    .banner-group { padding:32px 22px; flex-direction:column; gap:18px; text-align:center; min-height:0; align-items:center; justify-content:center }
    .banner-group .banner-picto { height:110px }
    .banner-group h3 { font-size:22px }
    .banner-reviews { flex-direction:column; padding:20px 18px; gap:14px; min-height:0 }
    .banner-reviews .banner-cutout { display:none }
    .banner-reviews h4 { font-size:18px; text-align:center }
    .banner-reviews .testi-carousel-wrap { max-width:100% }
    .banner-reviews .testimonial-card { padding:18px 20px }
    .banner-reviews .testimonial-card h5 { font-size:15.5px }
    .banner-reviews .carousel-arrows.left { left:-8px }
    .banner-reviews .carousel-arrows.right { right:-8px }
    .banner-reviews .carousel-arrows button { width:36px; height:36px; font-size:18px }
    .banner-search { padding:40px 18px; min-height:0; gap:14px }
    .banner-search .banner-picto { height:90px }
    .banner-search h3 { font-size:24px }
    .banner-search .search-input { padding:14px 20px }
    .banner-cta, .banner-offer {
    flex-direction:column; padding:24px 18px; gap:18px;
  }
    .banner-cta h3, .banner-offer h3 { font-size:22px }
    .banner-cta .banner-cutout, .banner-offer .banner-cutout { display:none }
    .banner-offer { min-height:0 }
    .banner-text { padding:32px 18px }
    .banner-text h3 { font-size:22px }
    .banner-cta { min-height:0; padding:24px 18px }
    .banner-cta h3 em { text-underline-offset:3px }
    .banner-cta .cta-note { margin-left:0; text-align:center }
    .banner-cta .cta-row, .banner-offer .cta-row { width:100% }
    .banner-cta .cta-row .btn, .banner-offer .cta-row .btn { width:100%; justify-content:center }
    .cards-carousel { padding:32px 0 24px }
    .cards-carousel-head { padding:0 18px 22px }
    .cards-carousel-head h3 { font-size:24px; letter-spacing:-.5px }
    .cards-carousel-track { padding:0 18px 18px; gap:12px }
    .cards-carousel-track > .card-blog, .cards-carousel-track > .card-chantier { flex:0 0 230px }
    .cards-carousel-track.is-horizontal > .card-chantier-detail.is-horizontal { flex:0 0 86% }
    .cards-carousel-track.is-vertical > .card-chantier-detail { flex:0 0 76% }
    .card-chantier-detail.is-horizontal { flex-direction:column !important }
    .card-chantier-detail.is-horizontal > .photo { width:100%; flex:0 0 auto; aspect-ratio:4/3 }
    .card-chantier-detail.is-horizontal > .info { width:100%; padding:20px 22px }
    .card-chantier-detail.is-horizontal h4 { font-size:17px; margin-bottom:14px }
    .cards-carousel-arrow { display:none }
    .team-section { padding:32px 0 }
    .team-section.on-cream { padding:24px 14px; border-radius:var(--radius) }
    .team-spotlight { grid-template-columns:1fr }
    .team-spotlight .photo { min-height:240px }
    .team-spotlight .content { padding:24px 22px }
    .team-spotlight-wrap .arrow { display:none }
    .team-grid { grid-template-columns:1fr 1fr; gap:12px; padding:0 14px }
    .team-card .info { padding:14px 12px 18px }
    .team-card .info b { font-size:15px }
    .authors-grid { grid-template-columns:1fr 1fr; gap:12px; padding:0 14px }
    .author-card__info { padding:14px 12px 18px }
    .author-card__info b { font-size:15px }
    .expertise-tabs { padding:32px 14px }
    /* Tab bar bord à bord avec swipe horizontal (scrollbar masquée) */
  .expertise-tab-bar-wrap {
    margin: 0 -32px 22px;
    text-align:center;
  }
    .expertise-tab-bar {
    width:100%;
    padding:6px 14px;
    margin:0;
    background:transparent;
    border:0;
    border-radius:0;
    box-shadow:none;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    flex-wrap:nowrap;
    justify-content:center;
  }
    .expertise-tab-bar::-webkit-scrollbar { display:none }
    .expertise-tab-bar button { font-size:12px; padding:9px 16px; flex-shrink:0 }
    .expertise-tab-content.split { grid-template-columns:1fr }
    .expertise-tab-content.split .image { min-height:200px }
    .expertise-tab-content.split .text { padding:24px }
    .expertise-tab-content.grid { grid-template-columns:1fr 1fr; gap:12px }
    .video-kpi-section { padding:32px 14px }
    .video-kpi-head h3 { font-size:24px }
    .video-kpi-block { grid-template-columns:1fr; gap:24px }
    .video-side { min-height:280px }
    .video-side .play-btn { width:64px; height:64px }
    .video-side .play-btn svg { width:24px; height:24px }
    .video-side .video-cutout { left:-10px; height:calc(100% + 40px); max-width:45% }
    .avis-grid { grid-template-columns:1fr; gap:12px }
    .avis-card { padding:20px 18px }
    .avis-spotlight { padding:32px 24px }
    .avis-spotlight blockquote { font-size:18px }
    .avis-spotlight .avis-spot-foot { flex-direction:column; gap:14px }
    .avis-spotlight .avis-spot-author { text-align:center }
    .callback-banner { padding:24px 18px; flex-direction:column; min-height:0 }
    .callback-content { padding-right:0 }
    .callback-content h3 { font-size:22px; text-align:center }
    .callback-form { grid-template-columns:1fr; gap:10px }
    .callback-form .green-btn { width:100%; justify-content:center }
    .callback-banner .callback-cutout { display:none }
    .kpi-numbers { grid-template-columns:1fr 1fr; gap:12px }
    .kpi-card { padding:20px 14px }
    .kpi-card .num { font-size:32px }
    .process-section { padding:32px 14px }
    .process-steps { gap:14px }
    /* Layout horizontal : [NUM] [label] sur la même ligne, p dessous */
  .process-step {
    flex:1 1 100%; max-width:none;
    min-height:0;
    display:grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    align-items:center;
    column-gap:14px;
  }
    .process-step .num {
    grid-column:1; grid-row:1;
    width:54px; height:54px; font-size:24px;
    border-bottom-right-radius:24px;
  }
    .process-step .step-label {
    grid-column:2; grid-row:1;
    font-size:18px; padding:0 18px 0 0; margin:0;
  }
    .process-step p {
    grid-column:1 / -1; grid-row:2;
    padding:8px 20px 20px;
    margin:0;
  }
    .icon-reasons { grid-template-columns:1fr 1fr; gap:12px }
    .icon-reason { padding:20px 16px }
    .icon-reason h4 { font-size:15px }
    .process-accordion { grid-template-columns:1fr; gap:20px }
    .process-accordion .photo { aspect-ratio:4/3 }
    .process-accordion .num-list .row { font-size:18px }
    /* Mobile : icône centrée AU-DESSUS du texte */
    .reasons-stack.is-two-cols { grid-template-columns:1fr }
  .reason-card,
  .reasons-stack.is-two-cols .reason-card {
    grid-template-columns:1fr;
    text-align:center;
    padding:26px 22px;
    gap:14px;
  }
    .reason-card .ico { width:56px; height:56px; margin:0 auto }
    .reason-card .txt { text-align:center }
    .reason-card .txt h4 { font-size:17px }
    .reason-card .txt p { font-size:13.5px }
    .editorial-row {
    grid-template-columns:1fr; gap:24px;
    padding:32px 14px;
  }
    .editorial-row.image-right .image, .editorial-row.image-right .text { order:initial }
    .editorial-row .text h3 { font-size:22px }
    .guide-banner-wrap { padding:24px 14px }
    .guide-banner { padding:18px 20px }
    .guide-banner .text-wrap h3 { font-size:15.5px }
    .author-hero { padding:32px 18px }
    .author-hero .wrap { grid-template-columns:1fr; gap:24px }
    .author-hero .author-photo { max-width:240px; margin:0 auto }
    .author-hero .author-info h1 { font-size:40px }
    .author-hero .author-stats { grid-template-columns:1fr 1fr; gap:14px }
    .author-hero .author-stats .stat b { font-size:20px }
    .author-credentials { grid-template-columns:1fr; gap:12px }
    .author-bio-block h3 { font-size:24px }
    .seo-byline { flex-wrap:wrap; gap:10px }
    .seo-byline .meta { width:100%; align-items:flex-start; margin-left:60px }
    .seo-pullquote { font-size:17px; padding-left:18px }
    .seo-stats { grid-template-columns:1fr; gap:18px; padding:20px }
    .seo-stats .stat b { font-size:28px }
    .ai-summary { padding:20px 18px }
    .contact-banner-form {
    grid-template-columns:1fr; padding:24px 18px; gap:18px;
  }
    .contact-banner-form .text { padding-left:0 }
    .contact-banner-form h3 { font-size:22px }
    .contact-banner-form .form { grid-template-columns:1fr; padding:14px }
    .agencies-finder { padding:0px }
    .agencies-finder .agencies-grid { grid-template-columns:1fr; gap:18px }
    .agencies-finder .map-area { min-height:240px }
    .certifications-strip {
    flex-direction:column; align-items:flex-start; gap:12px;
    padding:16px 18px;
  }
    .media-strip {
    grid-template-columns:1fr;
    gap:20px;
    padding:4px 0;
  }
    .media-strip-intro {
    align-items:flex-start;
  }
    .media-strip-title .picto { width:38px; height:38px }
    .media-strip-title h3 { font-size:22px }
    .media-strip-carousel {
    padding:22px 44px;
    min-height:auto;
  }
    .media-strip-carousel .media-track {
    gap:18px;
  }
    .media-strip-carousel .media-slide {
    flex-basis: calc((100% - 36px) / 3);
  }
    .media-strip-carousel .media-slide img {
    max-height:44px; max-width:90px;
  }
    .media-arrow {
    width:32px; height:32px; font-size:16px;
  }
    .media-arrow.left { left:-10px }
    .media-arrow.right { right:-10px }
    .cert-banner {
    flex-direction:column; align-items:flex-start;
    gap:20px; padding:22px 22px;
  }
    .cert-banner-logos {
    width:100%;
    flex-wrap:wrap; justify-content:center; gap:18px 20px;
  }
    .cert-banner-logos img {
    max-height:50px; max-width:90px;
  }
    /* MOBILE — la mosaïque devient un slider horizontal (5 cards swipables) */
  .chantier-mosaic {
    display:flex;
    flex-wrap:nowrap;
    grid-template-columns:none;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    scroll-snap-type:x mandatory;
    scrollbar-width:none;
    gap:12px;
    padding:0 18px 12px;
    max-width:none;
    align-items:stretch;
  }
    .chantier-mosaic::-webkit-scrollbar { display:none }
    /* On aplatit .mosaic-right pour que ses 4 cards tombent dans le flex parent */
  .chantier-mosaic .mosaic-right { display:contents }
    .chantier-mosaic .mosaic-card {
    flex:0 0 78%;
    min-width:78%;
    scroll-snap-align:start;
    min-height:auto;
  }
    .chantier-mosaic .mosaic-hero { min-height:auto }
    .chantier-mosaic .mosaic-photo, .chantier-mosaic .mosaic-hero .mosaic-photo, .chantier-mosaic .mosaic-right .mosaic-photo {
    aspect-ratio:4/3; min-height:auto;
  }
    .chantier-spotlight-wrap { padding:32px 14px }
    /* Photo et info collées : arrondis haut sur la photo, bas sur l'info */
  .chantier-spotlight { grid-template-columns:1fr; padding:14px; gap:0 }
    .chantier-spotlight .photo {
    min-height:200px;
    border-radius: var(--radius) var(--radius) 0 0;
  }
    .chantier-spotlight .info {
    padding:20px 22px;
    border-radius: 0 0 var(--radius) var(--radius);
  }
    .chantier-spotlight-wrap .arrow { display:none }
    .chantier-grid { grid-template-columns:1fr 1fr; gap:12px; padding:0 14px }
    .chantier-grid.cols-4 { grid-template-columns:1fr 1fr }
    .chantier-mosaic { grid-template-columns:1fr; padding:0 14px; gap:12px }
    .chantier-mosaic .mosaic-hero { min-height:0 }
    .chantier-mosaic .mosaic-hero .mosaic-photo { min-height:0; aspect-ratio:5/4 }
    .chantier-mosaic .mosaic-right { grid-row:auto; gap:12px }
  }

/* Pages WP par défaut : pas de container forcé — l'éditeur place ses
   blocs en libre via Gutenberg (alignfull, alignwide, etc.). On laisse
   juste un peu de respiration entre header sticky et premier bloc, et
   un padding bas avant le footer. */
.default-page { padding: 0px 0 56px; }


  .agency-row{ text-decoration:none;
    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 }
  

/* ════════════════════════════════════════════════════════════════════
   Bloc iso/agencies-finder v2 — carte Leaflet dynamique + sync hover
   ════════════════════════════════════════════════════════════════════ */

.agencies-grid[data-agencies-finder] {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 28px;
  align-items: stretch;
  background: white;
  border-radius: var(--border-radius);
}
.agencies-grid[data-agencies-finder] .map-area {
  min-height: 480px;
  height: 100%;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.08);
  background: var(--paper-2);
}

.agencies-grid[data-agencies-finder] .map-area .leaflet-pane{ z-index: 39;}
.agencies-grid[data-agencies-finder] .agencies-list {
  padding: 8px 0;
}
.agencies-list .agencies-list-body{
    max-height: 540px;
  overflow-y: auto;
}
/* Sync hover : la ligne agence en surbrillance */
.agency-row.is-hover,
.agency-row:hover {
  background: var(--accent-soft);
}
.agency-row.is-hover b {
  color: var(--brand);
}

/* Markers ISO&FACE sur la carte agencies */
.leaflet-iso-agence-marker {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--brand-2);
  border: 3px solid #fff;
  border-radius: 50%;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.28);
  color: #fff;
  font-family: "Google Sans Flex", "Inter", sans-serif;
  font-weight: 800;
  font-size: 13px;
  cursor: pointer;
  transition: transform .2s ease, background-color .2s ease, box-shadow .2s ease;
}
.leaflet-iso-agence-marker.is-siege {
  background: var(--ink);
  font-size: 14px;
}
.leaflet-iso-agence-marker.is-active {
  background: var(--brand);
  box-shadow: 0 8px 24px rgba(253, 95, 0, 0.45);
  z-index: 1000;
}
.leaflet-iso-agence-marker.is-active.is-siege {
  background: var(--brand);
}

@media (max-width: 980px) {
  .agencies-grid[data-agencies-finder] {
    grid-template-columns: 1fr;
  }
  .agencies-grid[data-agencies-finder] .map-area {
    min-height: 360px;
  }
}

/* Charte : pas de soulignement dans les titres ni leurs liens internes
   (les <a> dans un <h*> n'héritent pas du underline global des liens). */
:is(h1, h2, h3, h4, h5, h6) :is(a, a:hover) {
  text-decoration: none;
}

/* ================================================================
 *  iso/prestation-communes — maillage interne SEO (pages prestation)
 *
 *  Visuel aligné sur le bloc `.communes` des pages agence (page-agence-33.css).
 *  Le wrapper `.sec-cream` apporte le fond beige ; on duplique ici les
 *  règles `.communes` / `.commune-list` pour qu'elles s'appliquent partout
 *  (page-agence-33.css définit déjà ses propres règles scoppées localement).
 * ================================================================ */
.sec-prestation-communes {
  background: var(--paper-2);
  padding: 56px 24px;
}
.sec-prestation-communes > .wrap { max-width: 1200px; margin: 0 auto; }

.sec-prestation-communes .communes {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 32px;
}
.sec-prestation-communes .communes h3 {
  margin: 0 0 8px;
  color: var(--brand);
  font-family: "Google Sans Flex", "Inter", sans-serif;
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -.5px;
}
.sec-prestation-communes .communes h3 em {
  font-style: normal;
  background: none !important;
  padding: 0;
  color: var(--ink);
}
.sec-prestation-communes .communes h3 .dept-tag {
  color: var(--ink-3);
  font-weight: 500;
}
.sec-prestation-communes .communes p.sub {
  margin: 0 0 20px;
  color: var(--ink-3);
  font-size: 14px;
  line-height: 1.6;
}
.sec-prestation-communes .commune-list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2px 22px;
  font-size: 13.5px;
  color: var(--ink-2);
}
.sec-prestation-communes .commune-list a {
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
  display: block;
  text-decoration: none;
  color: var(--ink-2);
  cursor: pointer;
  transition: color .15s ease;
}
.sec-prestation-communes .commune-list a:hover { color: var(--brand); }

@media (max-width: 980px) {
  .sec-prestation-communes { padding: 36px 18px; }
  .sec-prestation-communes .communes { padding: 24px 20px; }
  .sec-prestation-communes .commune-list { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 540px) {
  .sec-prestation-communes .commune-list { grid-template-columns: 1fr; }
}

.leaflet-container .leaflet-control-attribution{ padding-right: 10px;}
/* ============================================================ */
/* BLOC LIBRARY — styles partagés par les blocs ISO&FACE         */
/* (segments, steps, insulants, faq, seo-block, seo-accordion,   */
/*  aides). Migrés depuis page-service-ite.css pour rendre les    */
/*  blocs utilisables sur n'importe quelle page.                  */
/* ============================================================ */


  .segments{ display:grid; grid-template-columns: repeat(auto-fit, minmax(250px, 200px)); justify-content: center; gap:18px }
  /* Bloc iso/segments-grid rend `.segment-card`, anciens templates statiques
     utilisent `.segment` — on cible les deux. */
  .segment,
  .segment-card{
    border:1px solid var(--line); border-radius:var(--radius);
    padding:26px; background:#fff; transition: all .15s;
    overflow:hidden;
    display:flex; flex-direction:column;
  }
  .segment:hover,
  .segment-card:hover{ border-color:var(--brand); transform:translateY(-2px); box-shadow:0 12px 32px rgba(0,0,0,.06) }
  .segment .ph,
  .segment-card .ph{
    background:var(--wf); border:1px dashed var(--wf-line); border-radius:0;
    height:180px; margin:-26px -26px 20px;
  }
  .segment-card .picto{
    width:46px; height:46px; margin-bottom:14px; display:block;
  }
  .segment h4,
  .segment-card h4{
    margin:0 0 8px; font-size:20px; color:var(--brand);
    font-family:"Google Sans Flex", "Inter", sans-serif; font-weight:700; letter-spacing:-.3px;
  }
  .segment p,
  .segment-card p{ margin:0 0 16px; font-size:13.5px; color:var(--ink-3); line-height:1.6; flex:1 }
  .segment .ln,
  .segment-card .ln{
    color:var(--accent); font-weight:700; font-size:13.5px;
    text-decoration:none; display:inline-flex; align-items:center; gap:6px;
    margin-top:auto;
  }
  .segment-card .ln:hover{ text-decoration:underline }

  .steps{ display:grid; grid-template-columns: repeat(5, 1fr); gap:16px }
  .step{
    background:#fff; border:1px solid var(--line); border-radius:var(--radius);
    padding:24px; position:relative; font-size:13.5px;
    color:var(--ink-3); line-height:1.55;
  }
  .step .n{
    font-family:"Google Sans Flex", "Inter", 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:var(--radius);
    padding:16px; display:flex; flex-direction:column; gap:10px;
    font-size:13px; color:var(--ink-2);
    overflow:hidden;
  }
  .insulant .ph{
    background:var(--wf); border:1px dashed var(--wf-line); border-radius:0;
    height:130px; margin:-16px -16px 6px;
  }
  .insulant b{ color:var(--ink); font-size:14px; font-weight:600 }
  .insulant .small{ color:var(--ink-3); font-size:11.5px }
  /* Mode auto (source produits) : la card est un lien vers la fiche produit */
  a.insulant{ text-decoration:none }
  a.insulant:hover b{ color:var(--brand) }

  /* FAQ — fonctionne avec <details>/<summary> natifs (attribut [open])
     ET avec la classe .open ajoutée éventuellement par du JS. */
  .faq-list,
  .faq{ display:grid; grid-template-columns:1fr; gap:10px; max-width:820px; margin:0 auto }
  .faq-row{
    background:#fff; border:1px solid var(--line); border-radius:var(--radius);
    padding:20px 24px;
    font-size:15.5px; color:var(--ink); font-weight:500;
    transition: border-color .15s, background .2s, padding .2s;
  }
  .faq-row:hover{ border-color:var(--brand) }
  /* Reset summary natif (suppression du marker triangle) */
  .faq-row > summary{ list-style:none; cursor:pointer; }
  .faq-row > summary::-webkit-details-marker,
  .faq-row > summary::marker{ display:none; content:""; }
  .faq-row .faq-q{
    display:flex; justify-content:space-between; align-items:center;
    gap:14px; font-weight:700; font-size:22px;
  }
  .faq-row .faq-q h4{
    margin:0; font-family:"Google Sans Flex","Inter",sans-serif; font-weight:700;
    font-size:18px; color:var(--ink); letter-spacing:-.2px; line-height:1.35;
  }
  .faq-row .plus{
    color:var(--accent); font-size:24px; font-weight:300;
    width:28px; height:28px; flex:0 0 28px;
    display:flex; align-items:center; justify-content:center;
    transition: transform .2s;
  }
  /* État ouvert : via attribut natif [open] OU classe .open */
  .faq-row[open],
  .faq-row.open{ background:var(--paper-3); padding:22px 26px; border-color:var(--brand) }
  .faq-row[open] .faq-q,
  .faq-row.open .faq-q{ margin-bottom:14px; }
  .faq-row[open] .plus,
  .faq-row.open .plus{ transform:rotate(45deg); }
  .faq-row .faq-a{
    padding-top:14px; margin-top:4px; border-top:1px solid var(--line);
    font-size:14.5px; color:var(--ink-2); line-height:1.7; font-weight:400;
  }
  .faq-row .faq-a p{ margin:0 0 12px }
  .faq-row .faq-a p:last-child{ margin-bottom:0 }
  .faq-row .faq-a a{ color:var(--brand); text-decoration:underline; }
  .faq-row .faq-a strong{ color:var(--ink); }

  /* SEO / content blocks */
  .seo-block{
    max-width:820px; margin:0 auto;
  }

  .seo-block > h3:first-child{ margin-top:0 }

  /* ============================================================ */
  /*  iso/text — conteneur de texte libre (typo + largeur globales) */
  /* ============================================================ */
  .iso-prose{
    max-width:820px; margin:0 auto;
    color:var(--ink-2); font-size:16.5px; line-height:1.7;
  }
  .iso-prose.is-wide{ max-width:none }
  .iso-prose > *:first-child{ margin-top:0 }
  .iso-prose > *:last-child{ margin-bottom:0 }
  .iso-prose h2,
  .iso-prose h3,
  .iso-prose h4{
    font-family:"Google Sans Flex", "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
    color:var(--ink); font-weight:700; letter-spacing:-.3px; line-height:1.2;
  }
  .iso-prose h2{ font-size:30px; margin:34px 0 14px }
  .iso-prose h3{ font-size:24px; margin:28px 0 12px }
  .iso-prose h4{ font-size:19px; margin:22px 0 10px; letter-spacing:-.1px }
  .iso-prose h2 em,
  .iso-prose h3 em{ color:var(--accent); font-style:normal }
  .iso-prose p{ margin:0 0 16px }
  .iso-prose a{
    color:var(--brand); text-decoration:underline;
    text-decoration-thickness:1.5px; text-underline-offset:2px;
    transition: color .15s ease;
  }
  .iso-prose a:hover{ color:var(--accent) }
  .iso-prose strong{ color:var(--ink); font-weight:700 }
  .iso-prose em{ color:var(--brand) }
  .iso-prose ul,
  .iso-prose ol{ margin:0 0 16px; padding-left:22px; line-height:1.8 }
  .iso-prose li{ margin-bottom:6px }
  .iso-prose blockquote{
    margin:22px 0; padding:18px 22px;
    background:var(--paper-2); border-left:3px solid var(--accent);
    border-radius:0 12px 12px 0; color:var(--ink);
  }
  .iso-prose img{ max-width:100%; height:auto; border-radius:var(--radius) }
  @media (max-width: 768px){
    .iso-prose{ font-size:15.5px }
    .iso-prose h2{ font-size:25px }
    .iso-prose h3{ font-size:21px }
  }
  
  .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;
     color:var(--ink);
  }

  /* Bloc SEO en accordéon — rend les longs blocs de texte plus aérés */
  .seo-accordion{
    display:flex; flex-direction:column; gap:12px;
    max-width:860px; margin:24px auto 0;
  }
  .seo-accordion .seo-row{
    background:#fff; border:1px solid var(--line); border-radius:var(--radius);
    padding:22px 26px;
    transition: padding .25s ease, background .2s ease, box-shadow .2s ease;
  }
  .seo-accordion .seo-row:hover:not(.open){ border-color:var(--brand) }
  .seo-accordion .seo-row .seo-q{
    display:flex; justify-content:space-between; align-items:center;
    cursor:pointer; gap:18px;
  }
  .seo-accordion .seo-row .seo-num{
    flex-shrink:0; width:38px; height:38px; border-radius:50%;
    background:var(--paper-2); color:var(--brand-2);
    display:flex; align-items:center; justify-content:center;
    font-family:"Google Sans Flex", "Inter", sans-serif; font-size:16px; font-weight:700;
    letter-spacing:.5px;
    transition: background .2s ease, color .2s ease;
  }
  .seo-accordion .seo-row .seo-q h4{
    margin:0; flex:1;
    font-family:"Google Sans Flex", "Inter", sans-serif;
    font-size:22px; color:var(--ink); font-weight:700;
    letter-spacing:-.3px; line-height:1.2;
  }
  .seo-accordion .seo-row .seo-q .plus{
    flex-shrink:0; color:var(--accent); font-size:24px; font-weight:300;
    width:32px; height:32px; display:flex; align-items:center; justify-content:center;
    transition: transform .25s cubic-bezier(.4,0,.2,1);
  }
  .seo-accordion .seo-row .seo-a{ display:none }
  .seo-accordion .seo-row.open{
    background:var(--paper-3); padding:24px 30px 28px;
    box-shadow: 0 6px 20px -6px rgba(10,10,10,.06);
  }
  .seo-accordion .seo-row.open .seo-q{ margin-bottom:18px }
  .seo-accordion .seo-row.open .seo-num{ background:var(--brand); color:#fff }
  .seo-accordion .seo-row.open .plus{ transform:rotate(0deg) }
  .seo-accordion .seo-row.open .seo-a{
    display:block; padding-top:18px;
    border-top:1px solid var(--line);
    font-size:15.5px; line-height:1.7; color:var(--ink-2);
  }
  .seo-accordion .seo-row.open .seo-a p{ margin:0 0 14px }
  .seo-accordion .seo-row.open .seo-a p:last-child{ margin-bottom:0 }
  .seo-accordion .seo-row.open .seo-a strong{ color:var(--ink); font-weight:700 }
  .seo-accordion .seo-row.open .seo-a em{ color:var(--brand); font-weight:600 }
  .seo-accordion .seo-row.open .seo-a ul{ margin:0 0 14px; padding-left:22px; line-height:1.8 }
  .seo-accordion .seo-row.open .seo-a ul li{ margin-bottom:6px }

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

  /* Aides */
  .aides{
    background:var(--accent-soft);
    border:1px solid var(--line); border-radius:var(--radius-lg); padding:44px;
    display:grid; grid-template-columns: 1.1fr 1fr; gap:36px; align-items:center;
  }
  .aides h3{
    margin:14px 0 12px; font-family:"Google Sans Flex", "Inter", 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:var(--radius);
    aspect-ratio: 4/3;
    color:var(--ink-3); display:flex; align-items:center; justify-content:center;
    font-size:12px;
  }
  /* ============= TABLETTE (≤1024px) ============= */
  @media (max-width: 1024px){
    .segments{ grid-template-columns: repeat(2, 1fr) }
    .steps{ grid-template-columns: repeat(3, 1fr); gap:14px }
    .insulants{ grid-template-columns: repeat(2, 1fr) }
    .aides{ padding:32px; gap:24px }
  }

  /* ============= MOBILE (≤768px) ============= */
  @media (max-width: 768px){
    .segments{ grid-template-columns:1fr; gap:10px }
    .steps{ grid-template-columns:1fr 1fr; gap:10px }
    .insulants{ grid-template-columns:1fr 1fr; gap:10px }
    .aides{ grid-template-columns:1fr; padding:24px }
    .aides h3{ font-size:26px }
  }
  .guide-banner-wrap .seo-accordion{
    margin-top:0;
    background:#fff;
    border-radius:0 0 24px 24px;
    padding:24px 22px 26px;
    border:1px solid var(--line);
    border-top:0;
  }
  .guide-banner-wrap .seo-row{
    border-radius:var(--radius-sm);
    background:var(--paper-3);
    border:1px solid var(--line);
  }
  .guide-banner-wrap .seo-row.open{ background:#fff }

  /* ============================================================ */
  /* FAUX HN — titres visuels SANS balise <hN> (reco SEO p.21)    */
  /* ------------------------------------------------------------ */
  /* À appliquer sur un <p>, <span> ou <div> (champ « CSS class » */
  /* d'un bloc Gutenberg) quand on veut le RENDU d'un titre sans  */
  /* injecter un vrai Hn dans la hiérarchie SEO de la page.       */
  /* Le scale reproduit exactement :where(h1..h6) ci-dessus.      */
  /* ============================================================ */
  .hn{
    display:block;
    font-family:"Google Sans Flex", "Inter", sans-serif;
    font-weight:700; color:var(--ink);
    margin:0 0 .4em; line-height:1.15;
  }
  .hn-1{ font-size:44px; letter-spacing:-1px;  line-height:1.05 }
  .hn-2{ font-size:32px; letter-spacing:-.6px; line-height:1.1  }
  .hn-3{ font-size:22px; letter-spacing:-.3px; line-height:1.2  }
  .hn-4{ font-size:18px; letter-spacing:-.2px; line-height:1.25 }
  .hn-5{ font-size:14px; letter-spacing:0;     line-height:1.3  }
  .hn-6{ font-size:12px; letter-spacing:1.4px; line-height:1.35; text-transform:uppercase }
  /* `em` dans un faux HN : même traitement accent que les vrais titres. */
  .hn em{ color:var(--brand); font-style:normal }
  @media (max-width:640px){
    .hn-1{ font-size:34px }
    .hn-2{ font-size:26px }
    .hn-3{ font-size:20px }
  }

  /* ============================================================ */
  /* LIENS OBFUSQUÉS — footer (reco SEO p.7)                      */
  /* ------------------------------------------------------------ */
  /* Rendus en <span data-o="base64(url)"> par PHP. main.js       */
  /* (initObfLinks) les rend cliquables au runtime. Visuellement  */
  /* identiques à un lien, mais non suivis par les crawlers.      */
  /* ============================================================ */
  .obf-link{
    cursor:pointer;
    color:inherit;
    text-decoration:inherit;
  }
  .obf-link:hover,
  .obf-link:focus-visible{ color:var(--accent); text-decoration:underline; outline:none }
  .obf-link:focus-visible{ outline:2px solid var(--accent); outline-offset:2px }

  /* Spans obfusqués rendus dans le header (option « Obfusqué » par item,
     Apparence → Menus) : reprend le style des <a> équivalents, dont les
     sélecteurs ciblent la balise a. */
  .navmain .nav-item.obf-link:hover{ color:var(--brand); text-decoration:none }
  .topbar-nav .obf-link{
    color:var(--ink-3); text-decoration:none;
    cursor:pointer; padding:6px 0;
  }
  .topbar-nav .obf-link:hover{ color:var(--ink); text-decoration:none }
  .mega-cols .col .obf-link{
    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 .obf-link:hover{ color:var(--brand); text-decoration:none }

  .footer-meta{
    display:flex; flex-wrap:wrap; gap:18px; justify-content:center;
    font-size:13px; line-height:1.6;
  }
  .footer-meta a { font-size:13px; }
  /* ============================================================ */
  /* PAGE AUTEUR — bloc « autres auteurs » (reco SEO p.18)        */
  /* ============================================================ */
  .author-others__grid{
    list-style:none; margin:0; padding:0;
    display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:14px;
  }
  .author-others__link{
    display:flex; align-items:center; gap:12px;
    padding:12px 14px;
    border:1px solid var(--line); border-radius:var(--radius-sm);
    background:#fff; text-decoration:none; color:var(--ink);
    transition:border-color .15s ease, box-shadow .15s ease;
  }
  .author-others__link:hover{ border-color:var(--accent); box-shadow:0 4px 16px rgba(0,0,0,.06) }
  .author-others__avatar img{ width:48px; height:48px; border-radius:50%; display:block }
  .author-others__info{ display:flex; flex-direction:column; min-width:0 }
  .author-others__name{ font-weight:700; font-size:15px }
  .author-others__role{ font-size:13px; color:var(--ink-2) }

  /* ============================================================ */
  /* Bloc iso/authors-grid — grille de tous les auteurs           */
  /* ============================================================ */
  .authors-grid{
    list-style:none; margin:0 auto; padding:0;
    display:grid; grid-template-columns:repeat(4, 1fr); gap:18px;
    max-width:1280px;
  }
  .author-card{
    background:#fff;
    border-radius:var(--radius);
    overflow:hidden;
    text-align:center;
    box-shadow:0 8px 22px -10px rgba(10,10,10,.10);
    transition:transform .2s ease, box-shadow .2s ease;
  }
  .author-card:hover{
    transform:translateY(-4px);
    box-shadow:0 16px 30px -10px rgba(10,10,10,.15);
  }
  .author-card__link{ display:block; text-decoration:none; color:var(--ink) }
  .author-card__photo{
    position:relative; display:block;
    aspect-ratio:4/5;
    background-color:var(--paper-3);
    background-size:cover; background-position:center top;
  }
  .author-card__photo .badge-pro{
    position:absolute; bottom:12px; left:12px;
    display:inline-flex; align-items:center; gap:6px;
    background:#fff;
    padding:6px 11px;
    border-radius:var(--radius-full);
    font-size:11.5px; font-weight:700; color:var(--ink);
    letter-spacing:.2px;
    box-shadow:0 4px 12px rgba(0,0,0,.10);
  }
  .author-card__photo .badge-pro .dot{
    width:8px; height:8px; border-radius:50%;
    background:var(--green);
  }
  .author-card__info{ display:block; padding:18px 16px 22px }
  .author-card__info b{
    font-family:"Google Sans Flex", sans-serif;
    font-size:18px; color:var(--ink);
    font-weight:700; letter-spacing:-.3px;
    display:block; margin-bottom:2px;
  }
  .author-card__info .role{
    font-size:12px; color:var(--ink-3);
    margin-bottom:6px;
    display:block;
  }
  .author-card__info .count{
    font-size:11px; font-weight:600;
    color:var(--accent); letter-spacing:.4px;
    text-transform:uppercase;
  }

  /* ─── Bloc iso/recrut-banner — section recrutement (home & co) ─────── */
  .home-recrut{ background:var(--green); color:#fff; padding:72px 0 }
  .home-recrut > .wrap{ max-width:1180px; margin:0 auto; display:grid; grid-template-columns:1.1fr .9fr; gap:40px; align-items:center }
  @media (max-width:860px){ .home-recrut > .wrap{ grid-template-columns:1fr; gap:28px } .home-recrut{ padding:72px 18px }}
  .home-recrut .eyebrow{ color:var(--ink); justify-content:flex-start }
  .home-recrut .eyebrow .dot{ background:var(--ink) }
  .home-recrut__title{ font-family:"Google Sans Flex", system-ui, sans-serif; font-size:clamp(28px,4vw,44px); font-weight:600; line-height:1.1; margin:12px 0 14px; color:#fff }
  .home-recrut__title em{ color:#fff; font-style:normal }
  .home-recrut__lead{ font-size:17px; line-height:1.6; color:rgba(255,255,255,.78); margin:0 0 24px }
  .home-recrut__cta{ display:flex; gap:14px; flex-wrap:wrap; align-items:center }
  .home-recrut__stats{ display:flex; gap:32px;  }
  .home-recrut__stat{ display:flex; flex-direction:column; text-align:center; gap:4px; position:relative; }
  .home-recrut__stat::after{ content:""; display:block; width:1px; height:40px; background:rgba(255,255,255,.3); margin:0 auto;   position: absolute; right: -14px; top: calc(50% - 20px); }
  .home-recrut__stat:last-child::after{ display:none }
  .home-recrut__stat b{ font-family:"Google Sans Flex", system-ui, sans-serif; font-size:40px; font-weight:600; color:#fff; line-height:1 }
  .home-recrut__stat span{ font-size:14px; color:rgba(255,255,255,.7); margin-top:6px }
   @media (max-width:860px){ .home-recrut__stats{  gap:20px;  }}
  /* ─── Section formulaire de candidature (.offre-apply) ─────────────────
     Mutualisée : single offre (#postuler), page candidature spontanée et
     bloc iso/apply-form. Chargée globalement car la page candidature est une
     page standard (page-recrutement.css n'y est pas enqueué). */
  .offre-apply{ background:var(--paper-2); border-top:1px solid var(--line); padding:56px 0 }
  .offre-apply--cream{ background:var(--paper-3) }
  .offre-apply--plain{ background:transparent; border-top:0; padding:32px 0 }
  .offre-apply > .wrap{ max-width:1180px; margin:0 auto; padding:0 40px }
  .offre-apply > .wrap.wrap-narrow{ max-width:880px }
  @media (max-width:600px){ .offre-apply > .wrap{ padding:0 20px } }
  .offre-apply .eyebrow{ justify-content:flex-start }
  .offre-apply__title{ font-family:"Google Sans Flex", system-ui, sans-serif; font-size:clamp(24px,3vw,34px); font-weight:600; line-height:1.15; margin:12px 0 8px }
  .offre-apply__intro{ font-size:16px; color:var(--ink-2); margin:0 0 26px; max-width:620px }
  .offre-apply__form{ background:var(--paper); border:1px solid var(--line); border-radius:var(--radius-lg); padding:30px; box-shadow:var(--shadow-sm) }
  .offre-apply__missing{ color:var(--ink-3); font-size:15px }

  /* Champs CF7 du formulaire de candidature. */
  .offre-apply .form-row{ margin-bottom:16px }
  .offre-apply .form-row label{ display:block; font-weight:600; font-size:14px; color:var(--ink-2) }
  .offre-apply .form-row--2{ display:grid; grid-template-columns:1fr 1fr; gap:16px }
  @media (max-width:600px){ .offre-apply .form-row--2{ grid-template-columns:1fr } }
  .offre-apply input[type="text"],
  .offre-apply input[type="email"],
  .offre-apply input[type="tel"],
  .offre-apply textarea{ width:100%; margin-top:6px; padding:12px 14px; border:1px solid var(--line-2); border-radius:var(--radius-sm); font:inherit; background:var(--paper); color:var(--ink) }
  .offre-apply input:focus, .offre-apply textarea:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--brand-soft) }
  .offre-apply textarea{ min-height:120px; resize:vertical }
  .offre-apply input[type="file"]{ margin-top:8px; font-size:14px }
  .offre-apply .form-row--consent{ font-size:13.5px; color:var(--ink-3); display:flex; gap:8px; align-items:flex-start }
  .offre-apply .form-row--submit{ margin:22px 0 0 }
  .offre-apply .wpcf7-submit{ background:var(--accent); color:#fff; border:0; border-radius:var(--radius-full); padding:14px 30px; font-weight:600; font-size:15px; cursor:pointer; transition:background .2s ease }
  .offre-apply .wpcf7-submit:hover{ background:var(--accent-2) }
  .offre-apply .wpcf7-spinner{ margin-left:12px }
  .offre-apply .wpcf7-response-output{ margin:18px 0 0; padding:12px 16px; border-radius:var(--radius-sm); font-size:14px }

  .form-col-rappel { display:flex; flex-direction:column; gap:6px;  margin-top:12px }
  .form-row-rappel {display:flex; flex-direction:row; gap:6px;align-items: center;}
  @media (max-width:768px){ .form-row-rappel {flex-wrap:wrap; gap:6px; }}
  /* ─── Bloc iso/apply-form : variante « container borné » ───────────────
     Carte centrée à largeur limitée — ne s'étale pas sur tout l'écran. */
  .offre-apply--boxed{ background:transparent; border-top:0; padding:48px 20px }
  .offre-apply__box{
    max-width:880px; margin:0 auto;
    background:var(--paper); border:1px solid var(--line);
    border-radius:var(--radius-lg); padding:40px; box-shadow:var(--shadow-sm);
  }
  @media (max-width:600px){ .offre-apply__box{ padding:26px } }
  .offre-apply__box .eyebrow{ justify-content:flex-start }


section.sec-final-page { text-align:center; padding-bottom:56px; padding-top:36px; }
section.sec-final-page .cta-row {margin-top: 20px;}
  /* ================================================================
 *  iso/contact-alternatives — 2 cartes téléphone/email
 * ================================================================ */
.sec-contact-alts{ padding:56px 24px }
.sec-contact-alts > .wrap{ max-width:1180px; margin:0 auto }
.sec-contact-alts .head-center{ text-align:center; margin-bottom:28px }
.sec-contact-alts .head-center .eyebrow{
  display:inline-flex; align-items:center; gap:6px;
  font-size:11.5px; font-weight:700; letter-spacing:.8px;
  text-transform:uppercase; color:var(--brand);
  background:var(--brand-soft);
  padding:5px 10px; border-radius:999px; margin-bottom:10px;
}
.sec-contact-alts .head-center .title{
  margin:6px 0 8px;
  font-family:"Google Sans Flex","Inter",sans-serif;
  font-size:36px; font-weight:700; letter-spacing:-.8px; line-height:1.05;
  color:var(--ink);
}
.sec-contact-alts .head-center .lead{
  max-width:680px; margin:0 auto;
  color:var(--ink-2); font-size:15.5px; line-height:1.55;
}

.contact-alts-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:18px;
  max-width:820px; margin:0 auto;
}
.contact-alt-card{
  display:flex; flex-direction:column; align-items:center; text-align:center;
  gap:10px; padding:28px 24px;
  background:#fff; border:1px solid var(--line); border-radius:18px;
  text-decoration:none; color:var(--ink);
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.contact-alt-card:hover{
  transform:translateY(-2px); border-color:var(--brand);
  box-shadow:0 10px 28px rgba(19,67,52,.06);
}
.contact-alt-card .ico-circle{
  width:48px; height:48px; border-radius:50%;
  background:var(--brand-soft); color:var(--brand);
  display:inline-flex; align-items:center; justify-content:center;
}
.contact-alt-card h4{
  margin:4px 0 0;
  font-family:"Google Sans Flex","Inter",sans-serif;
  font-size:16px; font-weight:700; color:var(--ink);
}
.contact-alt-card .line{
  font-size:13.5px; color:var(--ink-2); line-height:1.5;
}
.contact-alt-card .line b{ color:var(--ink); font-weight:700; font-size:15px }
.contact-alt-card .cta{
  margin-top:6px; font-size:13px; font-weight:700; color:var(--brand);
}

/* ════════════════════════════════════════════════════════════════
   Comparatif avantages / inconvénients (communes — comparatif ITE/ITI)
   Classes posées à l'import par tools/restore-communes-original.php :
     .iso-avantages / .iso-inconvenients          → sur les <ul>
     .iso-avantages-title / .iso-inconvenients-title → sur les titres
   ════════════════════════════════════════════════════════════════ */
.iso-avantages-title{ color:#017545; }
.iso-inconvenients-title{ color:#c0392b; }

ul.iso-avantages,
ul.iso-inconvenients{
  list-style:none;
  margin:.4em 0 1.5em;
  padding:14px 18px;
  border-radius:10px;
}
ul.iso-avantages{ background:rgba(1,117,69,.06); }
ul.iso-inconvenients{ background:rgba(192,57,43,.05); }

ul.iso-avantages > li,
ul.iso-inconvenients > li{
  position:relative;
  list-style:none;
  margin:0;
  padding:.4em 0 .4em 1.9em;
}
ul.iso-avantages > li + li,
ul.iso-inconvenients > li + li{ border-top:1px solid rgba(0,0,0,.06); }

ul.iso-avantages > li::before{
  content:"✓"; position:absolute; left:.1em; top:.4em;
  color:#017545; font-weight:800;
}
ul.iso-inconvenients > li::before{
  content:"✕"; position:absolute; left:.1em; top:.4em;
  color:#c0392b; font-weight:800;
}

/* Option « côte à côte » : envelopper le comparatif dans un groupe
   (core/group) avec la classe .iso-comparatif → grille 2 colonnes. */
.iso-comparatif{ display:grid; grid-template-columns:1fr 1fr; gap:22px; align-items:start; }
@media (max-width:680px){ .iso-comparatif{ grid-template-columns:1fr; } }

/* ============================================================ */
/*  Bandeaux ISO&ENERGIES (cross-promo Groupe Isovalie)         */
/*  Blocs : iso/energies-banner & iso/energies-services         */
/* ============================================================ */
:root{
  --en-blue:      #00A2DD;        /* bleu ISO&ENERGIES — surlignage + cartes + bouton */
  --en-blue-dark: #0083b4;        /* bleu foncé — hover bouton */
}

.sec-energies{ background:transparent; }
.sec-energies > .wrap{ max-width:1180px; margin:0 auto; }

/* --- Conteneur blanc commun --- */
.energies-banner{
  background:var(--paper);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-md);
  padding:40px 48px;
}

/* --- Partie haute : logo + titre + texte (+ bouton) --- */
.energies-top{
  display:grid;
  grid-template-columns:minmax(220px, 320px) 1fr;
  gap:40px;
  align-items:center;
}
.energies-banner.has-cards .energies-top{ align-items:start; }
.energies-logo img{
  display:block;
  width:100%;
  max-width:300px;
  height:auto;
  margin:0 auto;
}
.energies-body{ min-width:0; }
.energies-title{
  font-size:30px;
  line-height:1.2;
  font-weight:800;
  color:var(--ink);
  margin:0 0 16px;
}
.energies-hl{
  display:inline;
  background:var(--en-blue);
  color:#fff;
  padding:.05em .3em;
  border-radius:6px;
  box-decoration-break:clone;
  -webkit-box-decoration-break:clone;
}
.energies-text{
  font-size:16px;
  line-height:1.6;
  color:var(--ink-3);
  max-width:640px;
  margin:0 0 24px;
}
/* Bouton bleu ISO&ENERGIES (override de .btn.primary orange) */
.energies-cta{ margin-top:4px; }
.energies-cta.btn.primary{ background:var(--en-blue); }
.energies-cta.btn.primary:hover{ background:var(--en-blue-dark); }
/* Flèche : cercle blanc + flèche bleue (au lieu de l'orange par défaut) */
.energies-cta.btn.arrow-end::after{
  color:var(--en-blue);
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='%2300A2DD' stroke-width='2.5' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");
}

/* --- Cartes de services (à l'intérieur du bloc blanc) --- */
.energies-cards{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:20px;
  margin-top:32px;
}
.energies-card{
  position:relative;
  border-radius:var(--radius);
  overflow:hidden;
  min-height:250px;
  box-shadow:var(--shadow-sm);
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
}
.energies-card-media{
  position:absolute;
  inset:0;
  background-color:var(--paper-2);
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}
.energies-card-cap{
  position:relative;
  z-index:1;
  padding:16px;
  color:#fff;
  background:var(--en-blue);     /* bleu plein, sans dégradé */
}
.energies-card-title{
  font-size:17px;
  line-height:1.25;
  font-weight:800;
  color:#fff;
  margin:0 0 6px;
  min-height:2.5em;               /* réserve 2 lignes → légendes de même hauteur */
}
.energies-card-ln{
  display:inline-block;
  font-size:13px;
  font-weight:600;
  color:#fff;
  text-decoration:underline;
  text-underline-offset:2px;
}
.energies-card-ln .arr{ text-decoration:none; margin-right:2px; }
.energies-card-ln:hover{ opacity:.85; }

/* --- Responsive --- */
@media (max-width:900px){
  .energies-banner{ padding:32px 28px; }
  .energies-top{ grid-template-columns:1fr; gap:24px; text-align:center; }
  .energies-text{ margin-left:auto; margin-right:auto; }
  .energies-cards{ grid-template-columns:repeat(2, 1fr); }
}
@media (max-width:520px){
  .energies-title{ font-size:24px; }
  .energies-cards{ grid-template-columns:1fr; }
}

/* ============================================================ */
/*  ACCORDÉON — bloc natif Gutenberg « Détails »                 */
/*  (details.wp-block-details) — même langage que .mm-section :  */
/*  carte off-white, « + » orange qui pivote en croix            */
/* ============================================================ */
.wp-block-details{
  background:var(--paper-2);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:0 22px;
  margin:0 0 14px;
  overflow:hidden;
}
.wp-block-details > summary{
  list-style:none;
  margin:0 -22px;
  padding:18px 22px;
  font-family:"Google Sans Flex", "Inter", sans-serif;
  font-size:17px; font-weight:700; color:var(--ink);
  letter-spacing:-.3px; line-height:1.3;
  cursor:pointer;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  user-select:none;
  transition:color .2s ease;
}
.wp-block-details > summary::-webkit-details-marker{ display:none }
.wp-block-details > summary::marker{ content:"" }
.wp-block-details > summary::after{
  content:"+"; color:var(--accent); font-weight:700; font-size:20px; line-height:1;
  width:28px; height:28px; flex:0 0 28px;
  display:flex; align-items:center; justify-content:center;
  background:var(--paper); border:1px solid var(--line);
  border-radius:var(--radius-full);
  transition: transform .25s ease, background-color .2s ease,
              border-color .2s ease, color .2s ease;
}
.wp-block-details > summary:hover{ color:var(--brand) }
.wp-block-details[open] > summary{ color:var(--brand) }
.wp-block-details[open] > summary::after{
  transform:rotate(45deg);
  background:var(--accent); border-color:var(--accent); color:#fff;
}

/* Contenu : le padding horizontal vient du details lui-même ;
   on gère juste le rythme vertical en ouverture/fermeture */
.wp-block-details[open]{ padding-bottom:8px }
.wp-block-details > summary + *{ margin-top:4px }
.wp-block-details > h3,
.wp-block-details > h4{
  font-size:18px; color:var(--ink); letter-spacing:-.3px;
  margin:16px 0 10px;
}
.wp-block-details > p{ margin:0 0 14px; line-height:1.7 }
.wp-block-details > ul,
.wp-block-details > ol{ margin:0 0 16px; padding-left:22px; line-height:1.7 }

/* Ouverture animée (navigateurs récents ; les autres ouvrent d'un coup) */
@supports (interpolate-size: allow-keywords){
  .wp-block-details{ interpolate-size: allow-keywords }
  .wp-block-details::details-content{
    opacity:0; block-size:0; overflow:hidden;
    transition: content-visibility .3s allow-discrete,
                opacity .3s ease, block-size .3s ease;
  }
  .wp-block-details[open]::details-content{ opacity:1; block-size:auto }
}

@media (max-width:520px){
  .wp-block-details{ padding:0 16px }
  .wp-block-details > summary{ margin:0 -16px; padding:15px 16px; font-size:15.5px }
}

/* ══════════════════════════════════════════════════════════════
 *  BLOC — Formulaire parrainage (iso/parrainage-form)
 *  Champs « pill » blancs sur fond doux, labels en placeholder.
 * ══════════════════════════════════════════════════════════════ */
.sec-parrainage-form{ background:var(--paper-2); padding:56px 0 72px }
.sec-parrainage-form > .wrap{ max-width:1180px; margin:0 auto; padding:0 24px }

.parrainage-title{
  margin:0 0 14px; text-align:center;
  font-size:clamp(26px, 4vw, 40px); letter-spacing:-.5px; color:var(--ink);
}
.parrainage-title::after{
  content:""; display:block; width:220px; max-width:40%; height:3px;
  margin:14px auto 0; background:var(--brand-2); border-radius:2px;
}

.parrainage-form{ margin-top:28px }
.parrainage-fieldset{ border:0; padding:0; margin:0 0 8px }
.parrainage-subhead{
  display:block; width:100%; text-align:center; padding:0;
  margin:0 0 18px; font-weight:700; font-size:17px; color:var(--ink);
}
.parrainage-fieldset + .parrainage-fieldset .parrainage-subhead{ margin-top:10px }

.parrainage-form .form-row{ margin-bottom:18px }
.parrainage-form .form-row-2{
  display:grid; grid-template-columns:1fr 1fr; gap:18px 80px;
}
/* Les items de la grille sont les spans wrap générés par CF7 */
.parrainage-form .wpcf7-form-control-wrap{ display:block }

.parrainage-form input[type="text"],
.parrainage-form input[type="tel"],
.parrainage-form input[type="email"],
.parrainage-form select,
.parrainage-form textarea{
  width:100%; padding:15px 22px;
  font:inherit; font-size:15px; color:var(--ink);
  background:var(--paper-white); border:1px solid transparent;
  border-radius:var(--radius-full);
  box-shadow:0 1px 3px rgba(23,37,47,.08);
  transition:border-color .18s ease, box-shadow .18s ease;
}
.parrainage-form ::placeholder{ color:var(--ink-3); opacity:1 }
.parrainage-form input:focus,
.parrainage-form select:focus,
.parrainage-form textarea:focus{
  outline:none; border-color:var(--accent);
  box-shadow:0 0 0 3px var(--brand-soft);
}
.parrainage-form textarea{
  border-radius:var(--radius-lg); height:140px; min-height:130px; resize:vertical;
}

/* Select : chevron custom (appearance none + flèche en ::after du span wrapper) */
.parrainage-select{ position:relative; display:block }
.parrainage-select select{
  appearance:none; -webkit-appearance:none; cursor:pointer;
}
/* Tant que l'option placeholder (value="") est sélectionnée → gris placeholder */
.parrainage-select select:has(option[value=""]:checked){ color:var(--ink-3) }
.parrainage-select::after{
  content:"⌄"; position:absolute; right:22px; top:50%;
  transform:translateY(-65%); pointer-events:none;
  font-size:18px; color:var(--ink-2);
}

.parrainage-mention{
  margin:6px 0 16px; font-size:13px; line-height:1.6; color:var(--ink-3);
}
.parrainage-mention a{ color:var(--brand-2); text-decoration:underline }

/* Acceptance RGPD (checkbox CF7) */
.parrainage-form .wpcf7-acceptance .wpcf7-list-item{ margin:0 }
.parrainage-form .wpcf7-acceptance label{
  display:flex; gap:10px; align-items:flex-start;
  font-size:15px; line-height:1.5; color:var(--ink-2); cursor:pointer;
}
.parrainage-form .wpcf7-acceptance input[type="checkbox"]{
  width:auto; margin-top:3px; flex-shrink:0; accent-color:var(--accent);
}

.parrainage-form .wpcf7-submit{
  display:block; width:100%; margin-top:22px; padding:17px 28px;
  font:inherit; font-size:17px; font-weight:600; color:#fff;
  background:var(--accent); border:0; border-radius:var(--radius-full);
  box-shadow:none; cursor:pointer;
  transition:background .18s ease, transform .12s ease;
}
.parrainage-form .wpcf7-submit:hover{ background:var(--accent-2) }
.parrainage-form .wpcf7-submit:active{ transform:translateY(1px) }

.parrainage-missing{
  padding:18px 22px; border-radius:var(--radius-sm); text-align:center;
  background:var(--brand-soft); color:var(--ink-2);
}

@media (max-width:700px){
  .sec-parrainage-form{ padding:40px 0 52px }
  .parrainage-form .form-row-2{ grid-template-columns:1fr; gap:14px }
  .parrainage-form .form-row{ margin-bottom:14px }
}