.segments{ display:grid; grid-template-columns: repeat(3, 1fr); 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 }

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