/*
Theme Name: Blocksy Child
Theme URI: https://www.fenetre-aix.fr/
Description: Theme enfant de Blocksy pour Dossetto, menuisier vitrier a Aix-les-Milles. Kit de maquette Web'up, prefixe .dst-.
Author: Agence Web'up
Author URI: https://agencewebup.fr/
Template: blocksy
Version: 1.14.19
Text Domain: blocksy-child
*/

/* ---------- Rendu de reference : valeurs par defaut du navigateur, scopees ----------
   Le kit a ete valide hors WordPress, sur les marges par defaut du navigateur.
   Blocksy impose les siennes : on les retablit a l'identique, uniquement sous .dst-root.
   :where() met ces regles a specificite zero, pour que les classes du kit gardent la main. */
.dst-root :where(h1){font-size:2em;font-weight:700;margin:.67em 0}
.dst-root :where(h2){font-size:1.5em;font-weight:700;margin:.83em 0}
.dst-root :where(h3){font-size:1.17em;font-weight:700;margin:1em 0}
.dst-root :where(h4){font-size:1em;font-weight:700;margin:1.33em 0}
.dst-root :where(p){margin:1em 0}
.dst-root :where(ul,ol){margin:1em 0;padding-left:40px;list-style:disc}
.dst-root :where(ol){list-style:decimal}
.dst-root :where(dl){margin:1em 0}
.dst-root :where(dd){margin-left:40px}
.dst-root :where(dt){font-weight:400}
.dst-root :where(figure,blockquote){margin:1em 40px}
.dst-root :where(table){border-collapse:separate;border-spacing:2px;width:auto}
.dst-root :where(th,td){padding:1px;text-align:left}
.dst-root :where(th){font-weight:700;text-align:center}
.dst-root :where(summary){display:list-item;cursor:pointer}
.dst-root :where(button,input,select,textarea){font:inherit;color:inherit;margin:0}
.dst-root :where(button){background:none;border:0;padding:0;text-align:inherit}
.dst-root :where(small){font-size:.8em}
.dst-root :where(strong,b){font-weight:700}
.dst-root :where(svg){display:inline-block;vertical-align:middle}
.dst-root :where(a){color:inherit;text-decoration:none}
.dst-root :where(h1,h2,h3,h4,h5,h6){color:inherit}
.dst-root :where(blockquote){border:0}

/* =========================================================
   DOSSETTO — maquette page d'accueil (namespace .dst-)
   Blanc · noir / gris très foncé · bleu #2888D1 en touches
   ========================================================= */
:root{
  --dst-ink:#101215;        /* texte, boutons */
  --dst-night:#16191d;      /* sections sombres */
  --dst-night-2:#1e2227;    /* cartes sur sombre */
  --dst-paper:#ffffff;
  --dst-mist:#f3f5f7;       /* sections claires alternées */
  --dst-line:#e2e6ea;
  --dst-line-dark:#2c3238;
  --dst-muted:#5a636c;
  --dst-soft:#8b949d;       /* partie légère des accroches */
  --dst-soft-dark:#a3acb5;
  --dst-blue:#2888D1;
  --dst-star:#E7A417;
  --dst-radius:14px;
  --dst-font:"Manrope",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
}
.dst-root *,.dst-root *::before,.dst-root *::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--dst-paper);color:var(--dst-ink);font-family:var(--dst-font);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased}
.dst-root img{max-width:100%;height:auto;display:block}
.dst-root a{color:inherit}
.dst-root .dst-wrap{max-width:1240px;margin:0 auto;padding-inline:24px}
.dst-root .dst-sec{padding-block:104px}
.dst-root .dst-sec--mist{background:var(--dst-mist)}
.dst-root .dst-sec--dark{background:var(--dst-night);color:#fff}
.dst-root :focus-visible{outline:2px solid var(--dst-blue);outline-offset:3px;border-radius:6px}

/* ---------- Titrage : DIV marketing + Hn mots-clés ---------- */
.dst-root .dst-eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--dst-muted)}
.dst-root .dst-eyebrow::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--dst-blue)}
.dst-root .dst-sec--dark .dst-eyebrow{color:var(--dst-soft-dark)}
.dst-root .dst-mk{margin:18px 0 0;font-size:clamp(30px,3.7vw,48px);line-height:1.08;font-weight:800;letter-spacing:-.03em;text-wrap:balance}
.dst-root .dst-mk span{display:block;font-weight:300;color:var(--dst-soft)}
.dst-root .dst-sec--dark .dst-mk span{color:var(--dst-soft-dark)}
.dst-root .dst-kw{display:flex;align-items:center;gap:12px;margin:20px 0 0;font-size:15px;line-height:1.4;font-weight:700;letter-spacing:0;color:var(--dst-ink)}
.dst-root .dst-kw::before{content:"";flex:none;width:22px;height:2px;background:var(--dst-blue)}
.dst-root .dst-sec--dark .dst-kw{color:#fff}
.dst-root .dst-lead{margin:18px 0 0;max-width:58ch;color:var(--dst-muted);font-size:17px}
.dst-root .dst-sec--dark .dst-lead{color:var(--dst-soft-dark)}
.dst-root .dst-lead a,.dst-root .dst-hero__lead a,.dst-root .dst-chero__lead a,.dst-root .dst-cta2 p a,.dst-root .dst-faq details p a{color:inherit;font-weight:600;text-decoration:underline;text-decoration-color:var(--dst-blue);text-decoration-thickness:1.5px;text-underline-offset:3px}
.dst-root .dst-lead a:hover,.dst-root .dst-hero__lead a:hover,.dst-root .dst-chero__lead a:hover,.dst-root .dst-cta2 p a:hover,.dst-root .dst-faq details p a:hover{color:var(--dst-blue)}
.dst-root .dst-lead strong,.dst-root .dst-faq details p strong{color:var(--dst-ink);font-weight:700}
.dst-root .dst-sec--dark .dst-lead strong,.dst-root .dst-hero__lead strong,.dst-root .dst-cta2 p strong{color:#fff;font-weight:700}
.dst-root .dst-kw a{color:inherit;text-decoration:underline;text-decoration-color:var(--dst-blue);text-decoration-thickness:1.5px;text-underline-offset:3px}
.dst-root .dst-kw a:hover{color:var(--dst-blue)}
.dst-root .dst-head{max-width:760px}
.dst-root .dst-head--row{max-width:none;display:flex;justify-content:space-between;align-items:flex-end;gap:32px;flex-wrap:wrap}
.dst-root .dst-head--row>div{max-width:720px}

/* ---------- Boutons ---------- */
.dst-root .dst-btn{white-space:nowrap;display:inline-flex;align-items:center;gap:14px;min-height:50px;padding:6px 6px 6px 24px;border-radius:999px;font-weight:700;font-size:15px;text-decoration:none;border:1px solid transparent;transition:transform .2s ease,background .2s ease}
.dst-root .dst-btn:hover{transform:translateY(-1px)}
.dst-root .dst-btn__ico{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:var(--dst-blue);color:#fff}
.dst-root .dst-btn--dark{background:var(--dst-ink);color:#fff}
.dst-root .dst-btn--light{background:#fff;color:var(--dst-ink)}
.dst-root .dst-btn--ghost{padding:6px 22px;border-color:rgba(255,255,255,.35);color:#fff}
.dst-root .dst-btn--ghost-ink{padding:6px 22px;border-color:var(--dst-line);color:var(--dst-ink);background:#fff}
.dst-root .dst-link{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:3px}

/* ---------- Top bar ---------- */
.dst-root .dst-top{background:#f1f4f7;color:var(--dst-muted);font-size:13px;border-bottom:1px solid var(--dst-line)}
.dst-root .dst-top a{color:var(--dst-ink)}
.dst-root .dst-top a:hover{color:var(--dst-blue)}
.dst-root .dst-top .dst-wrap{display:flex;justify-content:space-between;align-items:center;gap:20px;min-height:44px}
.dst-root .dst-top ul{display:flex;gap:22px;list-style:none;margin:0;padding:0;flex-wrap:wrap}
.dst-root .dst-top li{display:flex;align-items:center;gap:8px}
.dst-root .dst-top a{text-decoration:none}
.dst-root .dst-top svg{color:var(--dst-soft)}
.dst-root .dst-top__right{display:flex;align-items:center;gap:14px}
.dst-root .dst-gbadge{display:inline-flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--dst-line);color:var(--dst-ink);border-radius:999px;padding:4px 12px;font-weight:700;text-decoration:none}
.dst-root .dst-gbadge small{color:var(--dst-muted);font-weight:500}
.dst-root .dst-stars{color:var(--dst-star);letter-spacing:1px;font-size:12px}
.dst-root .dst-social{display:grid;place-items:center;width:28px;height:28px;border:1px solid var(--dst-line);border-radius:50%;color:var(--dst-ink)}
.dst-root .dst-social:hover{border-color:var(--dst-blue);color:var(--dst-blue)}
/* Lien vers l'offre pro : une autre audience que les familles produit, donc hors nav principale. */
.dst-root .dst-top__pro{display:inline-flex;align-items:center;gap:7px;margin-right:4px;padding-right:16px;border-right:1px solid var(--dst-line);font-weight:700;color:var(--dst-ink)}
.dst-root .dst-top__pro:hover{color:var(--dst-blue)}
.dst-root .dst-top .dst-top__pro svg{color:var(--dst-blue)}
/* Sous 1320px la barre deborderait : les horaires sortent, ils restent au pied de page. */
@media (max-width:1320px){.dst-root .dst-top ul li:nth-child(3){display:none}}

/* ---------- Header + big menu ---------- */
.dst-root .dst-header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.96);backdrop-filter:blur(10px);border-bottom:1px solid var(--dst-line)}
.dst-root .dst-header>.dst-wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:80px}
.dst-root .dst-logo{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--dst-ink)}
.dst-root .dst-logo__txt{display:inline-flex;flex-direction:column;align-items:center;line-height:1}
.dst-root .dst-logo__name{font-weight:800;font-size:24px;letter-spacing:.22em;margin-right:-.22em}
.dst-root .dst-logo__sub{white-space:nowrap;margin-top:7px;font-size:9.5px;font-weight:600;letter-spacing:.2em;margin-right:-.2em;color:var(--dst-muted);text-transform:uppercase}
.dst-root .dst-logo--img img{height:68px;width:auto}
.dst-root .dst-nav{display:flex;align-items:center;gap:4px;height:80px}
.dst-root .dst-nav__item{height:100%;display:flex;align-items:center}
.dst-root .dst-nav__btn{display:flex;align-items:center;gap:6px;height:100%;padding:0 11px;white-space:nowrap;background:none;border:0;font:inherit;font-weight:600;font-size:14.5px;color:var(--dst-ink);cursor:pointer;position:relative}
.dst-root .dst-nav__btn svg{transition:transform .2s ease;color:var(--dst-soft)}
.dst-root .dst-nav__btn::after{content:"";position:absolute;left:11px;right:11px;bottom:22px;height:2px;background:var(--dst-blue);transform:scaleX(0);transform-origin:left;transition:transform .25s ease}
.dst-root .dst-nav__item:hover .dst-nav__btn::after,.dst-root .dst-nav__item.is-open .dst-nav__btn::after{transform:scaleX(1)}
.dst-root .dst-nav__item:hover .dst-nav__btn svg,.dst-root .dst-nav__item.is-open .dst-nav__btn svg{transform:rotate(180deg)}
.dst-root .dst-mega{position:absolute;left:0;right:0;top:100%;background:#fff;border-top:1px solid var(--dst-line);border-bottom:1px solid var(--dst-line);box-shadow:0 30px 60px -30px rgba(16,18,21,.25);opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .2s ease,transform .2s ease,visibility .2s}
.dst-root .dst-nav__item:hover .dst-mega,.dst-root .dst-nav__item.is-open .dst-mega{opacity:1;visibility:visible;transform:none}
/* Trois zones : l'accroche qui vend la famille, les liens, les cartes. */
.dst-root .dst-mega .dst-wrap{display:grid;grid-template-columns:262px 262px 1fr;gap:44px;align-items:stretch;padding-block:38px;min-height:0}
.dst-root .dst-mega a{text-decoration:none}
/* Zone 1 : accroche */
.dst-root .dst-mega__hd{margin:0 0 12px;font-size:25px;line-height:1.16;font-weight:800;text-transform:uppercase;color:var(--dst-ink)}
.dst-root .dst-mega__intro p{margin:0;font-size:14px;line-height:1.6;color:var(--dst-muted)}
.dst-root .dst-mega__pillar{display:inline-flex;align-items:center;gap:7px;margin-top:20px;font-size:12.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--dst-blue)}
.dst-root .dst-mega__pillar::after{content:"\00bb";font-size:14px;transition:transform .2s ease}
.dst-root .dst-mega__pillar:hover::after{transform:translateX(4px)}
/* Zone 2 : listes de liens */
.dst-root .dst-mega__cols{display:grid;gap:24px}
.dst-root .dst-mega__title{margin:0 0 2px;font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--dst-soft)}
.dst-root .dst-mega ul{list-style:none;margin:0;padding:0}
.dst-root .dst-mega li{border-bottom:1px solid var(--dst-line)}
.dst-root .dst-mega li a{display:flex;align-items:center;gap:10px;padding:10px 0;font-weight:700;font-size:14.5px;color:var(--dst-ink)}
.dst-root .dst-mega li a::before{content:"\00bb";color:var(--dst-blue);font-size:13px;transition:transform .2s ease}
.dst-root .dst-mega li a:hover{color:var(--dst-blue)}
.dst-root .dst-mega li a:hover::before{transform:translateX(3px)}
/* Zone 3 : cartes illustrees */
.dst-root .dst-mega__cards{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-self:stretch}
.dst-root .dst-mega__card{position:relative;display:block;border-radius:var(--dst-radius);overflow:hidden;aspect-ratio:auto;min-height:224px;height:100%;background:var(--dst-night)}
.dst-root .dst-mega__card img{width:100%;height:100%;object-fit:cover;transition:transform .5s cubic-bezier(.22,.61,.36,1)}
.dst-root .dst-mega__card:hover img{transform:scale(1.05)}
.dst-root .dst-mega__card::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(16,18,21,.92) 0%,rgba(16,18,21,.5) 42%,rgba(16,18,21,0) 78%);pointer-events:none}
.dst-root .dst-mega__card span{position:absolute;z-index:1;left:16px;right:16px;bottom:13px;color:#fff}
.dst-root .dst-mega__card b{display:block;font-size:15px;font-weight:800;text-transform:uppercase;line-height:1.2}
.dst-root .dst-mega__card small{display:block;margin-top:3px;font-size:12.5px;font-weight:500;line-height:1.35;color:rgba(255,255,255,.82)}
.dst-root .dst-header__cta{display:flex;align-items:center;gap:10px}
/* CTA du header : bouton bleu, texte blanc, pastille blanche et fleche bleue. */
.dst-root .dst-header__cta .dst-btn{background:var(--dst-blue);color:#fff}
.dst-root .dst-header__cta .dst-btn:hover{background:#1f74b4}
.dst-root .dst-header__cta .dst-btn .dst-btn__ico{background:#fff;color:var(--dst-blue)}
.dst-root .dst-burger{display:none;width:46px;height:46px;border-radius:50%;border:1px solid var(--dst-line);background:#fff;cursor:pointer;place-items:center}

/* ---------- 1. Hero ---------- */
.dst-root .dst-hero{position:relative;color:#fff;background:var(--dst-night);overflow:hidden;display:flex;flex-direction:column;justify-content:center}
.dst-root .dst-hero>.dst-wrap{width:100%}
.dst-root .dst-hero__bg{position:absolute;inset:0}
.dst-root .dst-hero__bg picture{display:block;width:100%;height:100%}
.dst-root .dst-hero__bg img{width:100%;height:100%;object-fit:cover;object-position:50% 55%}
.dst-root .dst-hero__bg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(16,18,21,.92) 0%,rgba(16,18,21,.78) 42%,rgba(16,18,21,.25) 100%),linear-gradient(0deg,rgba(16,18,21,.7),transparent 45%)}
.dst-root .dst-hero .dst-wrap{position:relative;display:grid;grid-template-columns:1.4fr .6fr;gap:48px;align-items:end;padding-block:120px 72px}
.dst-root .dst-hero .dst-eyebrow{color:#d6dce2}
.dst-root .dst-hero__title{margin:22px 0 0;font-size:clamp(40px,5.6vw,76px);line-height:1;font-weight:800;letter-spacing:-.04em;text-wrap:balance}
.dst-root .dst-hero__title span{font-weight:300;color:#c5ccd3}
.dst-root .dst-hero h1{display:flex;align-items:center;gap:12px;margin:26px 0 0;font-size:16px;font-weight:700;line-height:1.4}
.dst-root .dst-hero h1::before{content:"";flex:none;width:22px;height:2px;background:var(--dst-blue)}
.dst-root .dst-hero__lead{margin:14px 0 0;max-width:none;font-size:18px;color:#d0d6dc}
.dst-root .dst-hero__ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px}
.dst-root .dst-hero__stats{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.dst-root .dst-stat{padding:20px;border-radius:var(--dst-radius);background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);backdrop-filter:blur(8px)}
.dst-root .dst-stat b{display:block;font-size:30px;font-weight:800;letter-spacing:-.02em;line-height:1.1}
.dst-root .dst-stat small{display:block;margin-top:6px;font-size:13px;color:#c9d0d6;line-height:1.35}
.dst-root .dst-stat .dst-stars{font-size:13px}

/* ---------- 2. Pourquoi ---------- */
.dst-root .dst-why__grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.dst-root .dst-why__media{position:relative;border-radius:22px;overflow:hidden;aspect-ratio:5/4}
.dst-root .dst-why__media img{width:100%;height:100%;object-fit:cover}
.dst-root .dst-why__tag{position:absolute;left:18px;top:18px;background:#fff;border-radius:999px;padding:8px 14px;font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.dst-root .dst-cards3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:64px}
.dst-root .dst-card{padding:28px;border:1px solid var(--dst-line);border-radius:var(--dst-radius);background:#fff}
.dst-root .dst-card__ico{display:grid;place-items:center;width:46px;height:46px;border-radius:12px;background:var(--dst-mist);color:var(--dst-ink)}
.dst-root .dst-card h3{margin:20px 0 8px;font-size:17px;line-height:1.35;font-weight:700}
.dst-root .dst-card p{margin:0;color:var(--dst-muted);font-size:15px}
.dst-root .dst-quote{display:grid;grid-template-columns:auto 1fr auto;gap:24px;align-items:center;margin:20px 0 0;padding:28px 32px;border-radius:var(--dst-radius);background:var(--dst-mist)}
.dst-root .dst-quote__mark{font-size:54px;line-height:1;font-weight:800;color:var(--dst-blue)}
.dst-root .dst-quote blockquote{margin:0}
.dst-root .dst-quote p{margin:0;font-size:17px;font-weight:500}
.dst-root .dst-quote__who{display:flex;align-items:center;gap:12px;font-size:13px;color:var(--dst-muted);white-space:nowrap}
.dst-root .dst-quote__who b{display:block;color:var(--dst-ink);font-size:14.5px}
.dst-root .dst-quote__who a{text-decoration:none}
.dst-root .dst-quote__who a:hover b{color:var(--dst-blue)}
.dst-root .dst-quote__av{flex:none;width:52px;height:52px;display:block;border-radius:8px}

/* ---------- 3. Services (switch) ---------- */
.dst-root .dst-tabs{display:inline-flex;gap:4px;padding:5px;border-radius:999px;background:var(--dst-night-2);border:1px solid var(--dst-line-dark)}
.dst-root .dst-tab{border:0;background:none;color:#c9d0d6;font:inherit;font-size:14px;font-weight:700;padding:11px 20px;border-radius:999px;cursor:pointer}
.dst-root .dst-tab[aria-selected="true"]{background:#fff;color:var(--dst-ink)}
.dst-root .dst-panel{margin-top:48px}
.dst-root .dst-svc{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.dst-root .dst-svc__card{position:relative;border-radius:var(--dst-radius);overflow:hidden;background:var(--dst-night-2);border:1px solid var(--dst-line-dark)}
.dst-root .dst-svc__card img{width:100%;aspect-ratio:16/10;object-fit:cover}
.dst-root .dst-svc__body{padding:20px 22px 24px}
.dst-root .dst-svc__body h3{margin:0;font-size:18px;font-weight:700}
.dst-root .dst-svc__body p{margin:6px 0 0;font-size:14.5px;color:var(--dst-soft-dark)}
.dst-root .dst-panel__foot{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;margin-top:32px;padding-top:28px;border-top:1px solid var(--dst-line-dark)}
.dst-root .dst-panel__foot p{margin:0;color:var(--dst-soft-dark);font-size:15px;max-width:60ch}

/* ---------- 4. Réassurance ---------- */
.dst-root .dst-reas{display:grid;grid-template-columns:.9fr 1.1fr;gap:64px;align-items:start}
.dst-root .dst-reas__list{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.dst-root .dst-reas__item{padding:26px;border-radius:var(--dst-radius);background:#fff;border:1px solid var(--dst-line)}
.dst-root .dst-reas__item h3{margin:16px 0 6px;font-size:16px;font-weight:700}
.dst-root .dst-reas__item p{margin:0;font-size:14.5px;color:var(--dst-muted)}
.dst-root .dst-reas__logo{height:68px;display:flex;align-items:center}
.dst-root .dst-reas__logo img{max-height:68px;width:auto}
.dst-root .dst-placeholder{display:inline-block;background:#fff4d6;color:#7a5a00;border-radius:4px;padding:0 5px;font-weight:600}

/* ---------- 5. Étapes ---------- */
.dst-root .dst-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:64px;border-top:1px solid var(--dst-line-dark)}
.dst-root .dst-step{padding:28px 28px 0 0;position:relative}
.dst-root .dst-step+.dst-step{padding-left:28px;border-left:1px solid var(--dst-line-dark)}
.dst-root .dst-step__n{font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--dst-soft-dark)}
.dst-root .dst-step__n b{color:var(--dst-blue)}
.dst-root .dst-step h3{margin:18px 0 10px;font-size:20px;line-height:1.25;font-weight:700}
.dst-root .dst-step p{margin:0;color:var(--dst-soft-dark);font-size:15px}

/* ---------- 6. Réalisations ---------- */
.dst-root .dst-gal{display:grid;grid-template-columns:2fr 1fr 1fr;grid-template-rows:260px 260px;gap:14px;margin-top:56px}
.dst-root .dst-gal figure{position:relative;margin:0;border-radius:var(--dst-radius);overflow:hidden;background:var(--dst-mist)}
.dst-root .dst-gal figure:first-child{grid-row:span 2}
.dst-root .dst-gal img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.dst-root .dst-gal figure:hover img{transform:scale(1.04)}
.dst-root .dst-gal figcaption{position:absolute;left:12px;bottom:12px;background:rgba(255,255,255,.94);border-radius:999px;padding:6px 12px;font-size:12.5px;font-weight:700}
.dst-root .dst-gal__foot{margin-top:28px}

/* ---------- 7. Mur d'avis ---------- */
.dst-root .dst-rev{display:grid;grid-template-columns:320px 1fr;gap:48px;align-items:start}
.dst-root .dst-rev__sum{position:sticky;top:110px}
.dst-root .dst-rev__score{margin-top:32px;padding:28px;border-radius:var(--dst-radius);background:#fff;border:1px solid var(--dst-line)}
.dst-root .dst-rev__score b{font-size:54px;font-weight:800;letter-spacing:-.03em;line-height:1}
.dst-root .dst-rev__score .dst-stars{font-size:18px;margin-left:8px}
.dst-root .dst-rev__score p{margin:10px 0 18px;color:var(--dst-muted);font-size:14px}
.dst-root .dst-rev__score .dst-btn{width:100%;justify-content:space-between}
.dst-root .dst-rev__alt{display:flex;gap:16px;margin-top:16px;font-size:13.5px;font-weight:600}
.dst-root .dst-rev__alt a{text-decoration:none;border-bottom:1px solid var(--dst-line)}
.dst-root .dst-rev__wall{columns:3 260px;column-gap:16px}
.dst-root .dst-review{break-inside:avoid;margin:0 0 16px;padding:22px;border-radius:var(--dst-radius);background:#fff;border:1px solid var(--dst-line)}
.dst-root .dst-review__head{display:flex;align-items:center;gap:12px}
.dst-root .dst-review__av{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:var(--dst-mist);font-weight:800;font-size:14px}
.dst-root .dst-review__who b{display:block;font-size:14.5px}
.dst-root .dst-review__who small{color:var(--dst-muted);font-size:12.5px}
.dst-root .dst-review__g{margin-left:auto;font-weight:800;color:var(--dst-soft)}
.dst-root .dst-review .dst-stars{display:block;margin-top:14px}
.dst-root .dst-review p{margin:8px 0 0;font-size:14.5px;line-height:1.55}
.dst-root .dst-review__tag{display:inline-block;margin-top:12px;font-size:12px;font-weight:600;color:var(--dst-muted);background:var(--dst-mist);border-radius:999px;padding:3px 10px}

/* ---------- 8. CTA secondaire ---------- */
.dst-root .dst-cta2{background:var(--dst-ink);color:#fff}
.dst-root .dst-cta2>.dst-wrap{display:grid;grid-template-columns:1fr auto;gap:40px;align-items:center;padding-block:64px}
.dst-root .dst-cta2__title{margin:0;font-size:clamp(26px,2.8vw,36px);line-height:1.15;font-weight:800;letter-spacing:-.02em;text-wrap:balance}
.dst-root .dst-cta2__title span{font-weight:300;color:var(--dst-soft-dark)}
.dst-root .dst-cta2 p{margin:12px 0 0;color:var(--dst-soft-dark);max-width:62ch}
.dst-root .dst-cta2__btns{display:flex;gap:12px;flex-wrap:wrap}
.dst-root .dst-strip{background:var(--dst-night);border-top:1px solid var(--dst-line-dark);color:#cfd5db;font-size:12.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
.dst-root .dst-strip ul{display:flex;justify-content:space-between;gap:20px;list-style:none;margin:0;padding:18px 0;flex-wrap:wrap}
.dst-root .dst-strip li{display:flex;align-items:center;gap:10px}
.dst-root .dst-strip li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--dst-blue)}

/* ---------- 9. Métiers annexes ---------- */
.dst-root .dst-pro{display:grid;grid-template-columns:1fr 1.2fr;gap:20px;margin-top:56px}
.dst-root .dst-pro__main{position:relative;border-radius:22px;overflow:hidden;min-height:520px;background:var(--dst-night)}
.dst-root .dst-pro__main img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.dst-root .dst-pro__main div{position:absolute;left:0;right:0;bottom:0;padding:28px;color:#fff;background:linear-gradient(0deg,rgba(16,18,21,.9),transparent)}
.dst-root .dst-pro__main h3{margin:0;font-size:22px}
.dst-root .dst-pro__main p{margin:6px 0 0;color:#d0d6dc;font-size:15px}
.dst-root .dst-pro__grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.dst-root .dst-pro__grid .dst-card{display:flex;flex-direction:column}
.dst-root .dst-pro__grid .dst-card--dark{background:var(--dst-ink);border-color:var(--dst-ink);color:#fff}
.dst-root .dst-card--dark p{color:var(--dst-soft-dark)}
.dst-root .dst-card--dark .dst-card__ico{background:var(--dst-night-2);color:#fff}
.dst-root .dst-card .dst-link{margin-top:auto;padding-top:0;align-self:flex-start}
.dst-root .dst-card ul{margin:14px 0 18px;padding:0;list-style:none;display:grid;gap:6px;font-size:14px;color:var(--dst-muted)}
.dst-root .dst-card--dark ul{color:var(--dst-soft-dark)}
.dst-root .dst-card li::before{content:"— ";color:var(--dst-blue)}

/* ---------- 10. CTA principal ---------- */
.dst-root .dst-cta{position:relative;border-radius:26px;overflow:hidden;background:var(--dst-ink);color:#fff;display:grid;grid-template-columns:1fr 1fr}
.dst-root .dst-cta__media{position:relative;min-height:460px}
.dst-root .dst-cta__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.dst-root .dst-cta__body{padding:56px}
.dst-root .dst-cta__title{margin:18px 0 0;font-size:clamp(28px,3.2vw,42px);line-height:1.1;font-weight:800;letter-spacing:-.03em;text-wrap:balance}
.dst-root .dst-cta__title span{display:block;font-weight:300;color:var(--dst-soft-dark)}
.dst-root .dst-cta__body p{margin:18px 0 0;color:var(--dst-soft-dark)}
.dst-root .dst-checks{display:grid;grid-template-columns:1fr 1fr;gap:10px 24px;margin:26px 0 32px;padding:0;list-style:none;font-size:14.5px;font-weight:600}
.dst-root .dst-checks li{display:flex;gap:10px;align-items:center}
.dst-root .dst-checks svg{flex:none;color:var(--dst-blue)}

/* ---------- 11. Zone ---------- */
.dst-root .dst-zone{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:56px}
.dst-root .dst-zone__card{border-radius:22px;background:var(--dst-night-2);border:1px solid var(--dst-line-dark);overflow:hidden;display:flex;flex-direction:column}
.dst-root .dst-zone2{display:grid;gap:16px;margin-top:56px}
.dst-root .dst-zbox{border-radius:22px;background:var(--dst-night-2);border:1px solid var(--dst-line-dark);overflow:hidden}
.dst-root .dst-zbox--map{display:grid;grid-template-columns:1.5fr 1fr}
.dst-root .dst-zmap{position:relative;min-height:440px;background:#1e2227}
.dst-root .dst-zmap iframe{position:absolute;inset:0;width:100%;height:100%;border:0;filter:invert(.9) hue-rotate(180deg) grayscale(.7) contrast(.95)}
.dst-root .dst-zmap__open{position:absolute;top:14px;right:14px;display:inline-flex;align-items:center;gap:8px;padding:9px 14px;border-radius:999px;background:rgba(16,18,21,.85);border:1px solid #3a4047;color:#fff;font-size:13px;font-weight:700;text-decoration:none;backdrop-filter:blur(6px)}
.dst-root .dst-zmap__open:hover{border-color:#fff}
.dst-root .dst-zbox--map .dst-gmbc{border:0;border-left:1px solid var(--dst-line-dark);border-radius:0}
.dst-root .dst-zbox--towns{display:flex;align-items:center;justify-content:space-between;gap:28px;padding:22px 24px}
.dst-root .dst-ztowns{display:grid;gap:14px}
.dst-root .dst-ztowns__txt{margin:0;color:var(--dst-soft-dark);font-size:14.5px;max-width:80ch}
.dst-root .dst-ztowns__row{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.dst-root .dst-ztowns__label{font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--dst-blue)}
.dst-root .dst-zbox--towns .dst-towns li{border-radius:10px}
.dst-root .dst-zbox--towns .dst-towns li.is-main{background:rgba(40,136,209,.15);border-color:var(--dst-blue);color:#fff}
@media (max-width:960px){.dst-root .dst-zbox--map{grid-template-columns:1fr}.dst-root .dst-zmap{min-height:300px}.dst-root .dst-zbox--map .dst-gmbc{border-left:0;border-top:1px solid var(--dst-line-dark)}.dst-root .dst-zbox--towns{flex-direction:column;align-items:flex-start}}
.dst-root .dst-gmbc{background:#16191d;border:1px solid #2c3238;border-radius:16px;overflow:hidden}
.dst-root .dst-gmbc__img{width:100%;aspect-ratio:2/1;object-fit:cover;display:block}
.dst-root .dst-gmbc__body{padding:20px 22px 22px;display:flex;flex-direction:column}
.dst-root .dst-gmbc__name{margin:0;font-size:20px;font-weight:800;color:#fff}
.dst-root .dst-gmbc__rate{display:flex;align-items:center;gap:10px;margin-top:10px;font-size:15px}
.dst-root .dst-gmbc__rate .dst-stars{font-size:16px;letter-spacing:2px}
.dst-root .dst-gmbc__rate a{color:#fff;font-weight:600;text-decoration:underline;text-decoration-color:var(--dst-blue);text-decoration-thickness:2px;text-underline-offset:5px}
.dst-root .dst-gmbc__cat{margin:12px 0 0;color:var(--dst-soft-dark);font-size:14.5px}
.dst-root .dst-gmbc__btns{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.dst-root .dst-gmbc__btns a{display:inline-flex;align-items:center;gap:7px;min-height:44px;padding:0 13px;border:1px solid #3a4047;border-radius:999px;color:#fff;font-weight:700;font-size:14px;text-decoration:none}
.dst-root .dst-gmbc__btns a:hover{border-color:#fff}
.dst-root .dst-gmbc__btns svg{color:var(--dst-blue)}
.dst-root .dst-gmbc__info{margin:22px 0 0;padding-top:20px;border-top:1px solid #2c3238;display:grid;gap:12px}
.dst-root .dst-gmbc__info div{display:grid;grid-template-columns:96px 1fr;gap:12px;font-size:14.5px}
.dst-root .dst-gmbc__info dt{color:var(--dst-soft-dark)}
.dst-root .dst-gmbc__info dd{margin:0;color:#fff;font-weight:600}
.dst-root .dst-gmbc__info dd a{color:#fff;text-decoration:underline;text-underline-offset:4px}
.dst-root .dst-zone__card iframe{width:100%;height:300px;border:0;display:block;filter:grayscale(1) contrast(1.05)}
.dst-root .dst-zone__body{padding:28px;display:flex;flex-direction:column;gap:16px;flex:1}
.dst-root .dst-zone__body h3{margin:0;font-size:20px}
.dst-root .dst-zone__body p{margin:0;color:var(--dst-soft-dark);font-size:15px}
.dst-root .dst-gmb{display:flex;align-items:center;gap:14px;padding:16px;border-radius:12px;background:var(--dst-night);border:1px solid var(--dst-line-dark)}
.dst-root .dst-gmb__g{display:grid;place-items:center;width:44px;height:44px;border-radius:10px;background:#fff;color:var(--dst-ink);font-weight:800;font-size:20px}
.dst-root .dst-gmb b{display:block;font-size:15px}
.dst-root .dst-gmb small{color:var(--dst-soft-dark);font-size:13px}
.dst-root .dst-gmb a{margin-left:auto;font-size:13px;font-weight:700;text-decoration:none;border-bottom:1px solid currentColor;white-space:nowrap}
.dst-root .dst-towns{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0;padding:0}
.dst-root .dst-towns li{padding:6px 12px;border-radius:999px;border:1px solid var(--dst-line-dark);font-size:13.5px;color:#dfe4e8}
.dst-root .dst-towns li.is-main{background:#fff;color:var(--dst-ink);border-color:#fff;font-weight:700}

/* ---------- 12. Articles ---------- */
.dst-root .dst-posts{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:56px}
.dst-root .dst-post{text-decoration:none;display:flex;flex-direction:column;gap:16px}
.dst-root .dst-post__img{border-radius:var(--dst-radius);overflow:hidden;aspect-ratio:4/3;background:var(--dst-mist)}
.dst-root .dst-post__img img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.dst-root .dst-post:hover img{transform:scale(1.04)}
.dst-root .dst-post__meta{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--dst-muted)}
.dst-root .dst-post h3{margin:0;font-size:19px;line-height:1.3;font-weight:700}
.dst-root .dst-post p{margin:0;color:var(--dst-muted);font-size:15px}

/* ---------- 13. FAQ ---------- */
.dst-root .dst-faq{display:grid;grid-template-columns:.8fr 1.2fr;gap:64px;align-items:start}
.dst-root .dst-faq__list{border-top:1px solid var(--dst-line)}
.dst-root .dst-faq details{border-bottom:1px solid var(--dst-line)}
.dst-root .dst-faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:22px 0;font-weight:700;font-size:17px}
.dst-root .dst-faq summary::-webkit-details-marker{display:none}
.dst-root .dst-faq summary i{flex:none;display:grid;place-items:center;width:32px;height:32px;border-radius:50%;border:1px solid var(--dst-line);font-style:normal;transition:transform .2s ease,background .2s ease}
.dst-root .dst-faq details[open] summary i{transform:rotate(45deg);background:var(--dst-ink);color:#fff;border-color:var(--dst-ink)}
.dst-root .dst-faq details p{margin:0 0 22px;color:var(--dst-muted);max-width:64ch}

/* ---------- 14. Partenaires (décoratif, sans liens) ---------- */
.dst-root .dst-partners{border-top:1px solid var(--dst-line);border-bottom:1px solid var(--dst-line)}
.dst-root .dst-partners .dst-wrap{display:flex;align-items:center;gap:40px;padding-block:34px;flex-wrap:wrap;justify-content:space-between}
.dst-root .dst-partners__label{font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--dst-muted)}
.dst-root .dst-partners__logos{display:flex;align-items:center;gap:44px;flex-wrap:wrap}
.dst-root .dst-partners__logos img{height:44px;width:auto;filter:grayscale(1);opacity:.75;mix-blend-mode:multiply}
.dst-root .dst-wm{font-weight:800;font-size:19px;letter-spacing:.02em;color:#9aa2aa}
.dst-root .dst-wm--sg{font-weight:600;letter-spacing:.06em}
.dst-root .dst-wm--om{letter-spacing:.2em;font-size:16px}

/* ---------- 15. Pré-footer ---------- */
.dst-root .dst-pre{background:var(--dst-night);padding-block:28px}
.dst-root .dst-pre .dst-wrap{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.dst-root .dst-pre__card{position:relative;border-radius:var(--dst-radius);overflow:hidden;min-height:200px;display:flex;flex-direction:column;justify-content:flex-end;padding:26px;color:#fff;text-decoration:none}
.dst-root .dst-pre__card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.dst-root .dst-pre__card::before{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(16,18,21,.92),rgba(16,18,21,.45));z-index:1}
.dst-root .dst-pre__card>*:not(img){position:relative;z-index:2}
.dst-root .dst-pre__card b{font-size:20px}
.dst-root .dst-pre__card span{color:#cfd5db;font-size:14.5px;margin-top:4px}
.dst-root .dst-pre__card em{font-style:normal;margin-top:16px;align-self:flex-start;font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;border-bottom:1px solid currentColor}

/* ---------- 16. Footer ---------- */
.dst-root .dst-footer{background:var(--dst-ink);color:#cfd5db;font-size:14.5px}
.dst-root .dst-footer .dst-wrap{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr 1fr;gap:40px;padding-block:72px 56px}
.dst-root .dst-footer .dst-logo{color:#fff}
.dst-root .dst-footer .dst-logo__sub{color:var(--dst-soft-dark)}
.dst-root .dst-footer p{margin:18px 0 0;color:var(--dst-soft-dark);max-width:36ch}
.dst-root .dst-footer h3,.dst-root .dst-footer__title{margin:0 0 16px;font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:#fff}
.dst-root .dst-footer ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.dst-root .dst-footer a{text-decoration:none}
.dst-root .dst-footer a:hover{color:#fff}
.dst-root .dst-footer__contact{margin-top:22px;display:grid;gap:8px}
.dst-root .dst-footer__contact a,.dst-root .dst-footer__contact span{display:flex;gap:10px;align-items:flex-start}
.dst-root .dst-footer__hours{margin-top:18px;font-size:13.5px;color:var(--dst-soft-dark);line-height:1.7}

/* ---------- 17. Mentions ---------- */
.dst-root .dst-legal{background:#0b0c0e;color:#8b949d;font-size:12.5px}
.dst-root .dst-legal .dst-wrap{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-block:20px}
.dst-root .dst-legal ul{display:flex;gap:18px;flex-wrap:wrap;list-style:none;margin:0;padding:0}
.dst-root .dst-legal a{text-decoration:none}
.dst-root .dst-legal a:hover{color:#fff}
.dst-root .dst-legal strong{color:#cfd5db;font-weight:600}

.dst-root .dst-br-pc{display:none}
@media (min-width:961px){.dst-root .dst-br-pc{display:inline}.dst-root .dst-hero__lead{font-size:17px}}
/* ---------- Mobile nav ---------- */
.dst-root .dst-mnav{display:none}

/* 21. Mini-site pro : sous-navigation de rubrique
   Volontairement un <nav> et non un second <header> : deux header de premier
   niveau produiraient deux landmarks "banner", ce qu'axe signale en erreur
   (regle landmark-no-duplicate-banner). */
/* Le bandeau doit se detacher de la section blanche qui le suit : fond
   legerement plus froid, filet haut et bas, et une ombre courte vers le bas. */
.dst-root .dst-subnav{background:#eef2f6;color:var(--dst-ink);border-top:1px solid var(--dst-line);border-bottom:1px solid var(--dst-line);box-shadow:0 12px 26px -18px rgba(16,18,21,.45)}
.dst-root .dst-subnav .dst-wrap{display:flex;align-items:center;justify-content:space-between;gap:28px;min-height:58px}
.dst-root .dst-subnav__brand{display:inline-flex;align-items:center;gap:9px;font-weight:800;font-size:15px;white-space:nowrap;color:var(--dst-ink);text-decoration:none}
.dst-root .dst-subnav__brand svg{color:var(--dst-blue)}
.dst-root .dst-subnav nav{min-width:0}
.dst-root .dst-subnav ul{display:flex;align-items:center;gap:2px;list-style:none;margin:0;padding:0}
.dst-root .dst-subnav li{margin:0}
.dst-root .dst-subnav a{display:inline-flex;align-items:center;white-space:nowrap;padding:8px 13px;border-radius:999px;text-decoration:none;color:var(--dst-muted);font-weight:600;font-size:14px;transition:background .2s ease,color .2s ease}
.dst-root .dst-subnav a:hover{background:#f1f4f7;color:var(--dst-ink)}
.dst-root .dst-subnav a[aria-current="page"]{background:var(--dst-ink);color:#fff;font-weight:700}
.dst-root .dst-subnav__cta{display:inline-flex;align-items:center;gap:8px;white-space:nowrap;padding:9px 18px;border-radius:999px;background:var(--dst-blue);color:#fff;font-weight:700;font-size:14px;text-decoration:none}
.dst-root .dst-subnav__cta:hover{background:#1f74b4;color:#fff}
/* .dst-subnav a (0,3,0) bat .dst-subnav__brand et __cta (0,2,0) : on rescope. */
.dst-root .dst-subnav .dst-subnav__brand{color:var(--dst-ink)}
.dst-root .dst-subnav .dst-subnav__brand:hover{color:var(--dst-blue)}
.dst-root .dst-subnav .dst-subnav__cta{color:#fff;background:var(--dst-blue)}
.dst-root .dst-subnav .dst-subnav__cta:hover{color:#fff;background:#1f74b4}
/* La barre reste dans le hero : elle ne suit plus le defilement. */
@media (min-width:1181px){.dst-root .dst-subnav{position:relative;z-index:30}}
@media (max-width:1180px){
.dst-root .dst-subnav .dst-wrap{gap:14px;padding-block:10px;flex-wrap:wrap}
.dst-root .dst-subnav nav{width:100%;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.dst-root .dst-subnav nav::-webkit-scrollbar{display:none}
.dst-root .dst-subnav ul{padding-bottom:2px}
}

/* ---------- Responsive ---------- */
@media (max-width:1180px){
  .dst-root .dst-nav{display:none}
  .dst-root .dst-burger{display:grid}
  .dst-root .dst-header__cta .dst-btn{display:none}
  /* La modale occupe 90% de l'ecran et flotte au-dessus de la page, elle ne la pousse plus. */
  .dst-root .dst-mnav.is-open{display:block;position:absolute;left:0;right:0;top:100%;border-top:1px solid var(--dst-line);background:#fff;height:90vh;height:90svh;max-height:calc(100svh - 62px);overflow:auto;overscroll-behavior:contain;box-shadow:0 30px 60px -20px rgba(16,18,21,.35)}
  .dst-root .dst-mnav details{border-bottom:1px solid var(--dst-line)}
  .dst-root .dst-mnav summary{padding:16px 24px;font-weight:700;cursor:pointer}
  .dst-root .dst-mnav ul{list-style:none;margin:0;padding:0 24px 16px;display:grid;gap:10px}
  .dst-root .dst-mnav a{text-decoration:none;color:var(--dst-muted);font-weight:600}
  /* .dst-mnav a (0,2,1) bat .dst-btn--dark (0,2,0) : sans ca le libelle sort en gris sur noir. */
  .dst-root .dst-mnav .dst-btn{margin:20px 24px;color:#fff}
  .dst-root .dst-mnav .dst-mnav__pro{display:flex;align-items:center;gap:9px;margin:16px 24px 6px;padding:13px 16px;border-radius:12px;background:var(--dst-ink);color:#fff;font-weight:700}
  .dst-root .dst-mnav .dst-mnav__pro svg{color:var(--dst-blue)}
  .dst-root .dst-footer .dst-wrap{grid-template-columns:1fr 1fr 1fr}
  .dst-root .dst-footer .dst-wrap>div:first-child{grid-column:1/-1}
}
@media (max-width:960px){
  .dst-root .dst-sec{padding-block:72px}
  .dst-root .dst-top__right,.dst-root .dst-top li:nth-child(3){display:none}
  .dst-root .dst-hero .dst-wrap,.dst-root .dst-why__grid,.dst-root .dst-reas,.dst-root .dst-rev,.dst-root .dst-faq,.dst-root .dst-pro,.dst-root .dst-cta,.dst-root .dst-zone{grid-template-columns:1fr}
  .dst-root .dst-hero .dst-wrap{padding-block:88px 48px}
  .dst-root .dst-rev__sum{position:static}
  .dst-root .dst-svc,.dst-root .dst-cards3,.dst-root .dst-posts,.dst-root .dst-pre .dst-wrap{grid-template-columns:1fr 1fr}
  .dst-root .dst-steps{grid-template-columns:1fr 1fr;border-top:0}
  .dst-root .dst-step,.dst-root .dst-step+.dst-step{padding:24px 0 0;border-left:0;border-top:1px solid var(--dst-line-dark)}
  .dst-root .dst-steps{column-gap:28px}
  .dst-root .dst-gal{grid-template-columns:1fr 1fr;grid-template-rows:auto}
  .dst-root .dst-gal figure{aspect-ratio:4/3}
  .dst-root .dst-gal figure:first-child{grid-column:1/-1;grid-row:auto;aspect-ratio:16/10}
  .dst-root .dst-cta2>.dst-wrap{grid-template-columns:1fr}
  .dst-root .dst-cta__media{min-height:260px}
  .dst-root .dst-cta__body{padding:36px 28px}
  .dst-root .dst-pro__main{min-height:360px}
}
@media (max-width:620px){
  .dst-root .dst-wrap{padding-inline:18px}
  .dst-root .dst-top ul{gap:14px}
  .dst-root .dst-top li:nth-child(1){display:none}
    .dst-root .dst-svc,.dst-root .dst-cards3,.dst-root .dst-posts,.dst-root .dst-pre .dst-wrap,.dst-root .dst-reas__list,.dst-root .dst-pro__grid,.dst-root .dst-steps,.dst-root .dst-checks{grid-template-columns:1fr}
  .dst-root .dst-tabs{display:flex;overflow-x:auto;border-radius:16px;max-width:100%}
  .dst-root .dst-tab{white-space:nowrap;padding:10px 14px}
  .dst-root .dst-quote{grid-template-columns:1fr;gap:10px}
  .dst-root .dst-footer .dst-wrap{grid-template-columns:1fr 1fr}
  .dst-root .dst-hero__stats{grid-template-columns:1fr 1fr}
  .dst-root .dst-stat b{font-size:24px}
}
@media (prefers-reduced-motion:reduce){.dst-root *{transition:none!important;scroll-behavior:auto!important}}
/* Hero 95vh (header compris) sur desktop */
@media (min-width:961px){.dst-root .dst-hero{height:calc(95vh - 124px);min-height:460px}.dst-root .dst-hero .dst-wrap{padding-block:40px}.dst-root .dst-hero__title{font-size:clamp(40px,min(5.2vw,7.5vh),72px)}.dst-root .dst-hero h1{margin-top:18px}.dst-root .dst-hero__ctas{margin-top:24px}}

/* ---------- Carte de contact flottante (standard Web'up) ---------- */
.dst-root .dst-callcard{position:fixed;left:16px;bottom:16px;z-index:9998;width:min(380px,calc(100vw - 32px));background:#101215;color:#fff;border:1px solid #3a4047;border-radius:18px;padding:18px;box-shadow:0 24px 48px -16px rgba(16,18,21,.45);font-family:"Manrope",ui-sans-serif,system-ui,sans-serif;opacity:0;transform:translateY(16px);pointer-events:none;transition:opacity .3s ease,transform .3s ease}
.dst-root .dst-callcard.is-on{opacity:1;transform:none;pointer-events:auto}
.dst-root .dst-cc-head{display:flex;align-items:center;gap:12px;padding-right:34px}
.dst-root .dst-cc-av{position:relative;flex:none;width:48px;height:48px}
.dst-root .dst-cc-av svg{width:48px!important;height:48px!important;border-radius:10px;display:block}
.dst-root .dst-cc-dot{position:absolute;right:-4px;bottom:-4px;width:13px;height:13px;border-radius:50%;background:#22c55e;border:2px solid #101215}
.dst-root .dst-callcard.is-off .dst-cc-dot{background:#9aa7bd}
.dst-root .dst-cc-name{display:block;font-weight:800;font-size:15px;line-height:1.3}
.dst-root .dst-cc-status{display:block;font-size:12.5px;color:#a3acb5;line-height:1.35}
.dst-root .dst-cc-br{display:none}
.dst-root .dst-cc-msg{margin:14px 0 16px;font-size:14px;line-height:1.55;color:#dfe4e8}
.dst-root .dst-cc-btns{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.dst-root .dst-cc-btn{display:flex;align-items:center;justify-content:center;gap:10px;min-height:46px;padding:5px 16px;border-radius:999px;font-weight:700;font-size:14px;text-decoration:none;white-space:nowrap;transition:transform .2s ease}
.dst-root .dst-cc-btn:hover{transform:translateY(-1px)}
.dst-root .dst-cc-btn--ghost{border:1px solid rgba(255,255,255,.35);color:#fff}
.dst-root .dst-cc-btn--ghost:hover{border-color:#fff}
.dst-root .dst-cc-btn--primary{background:#fff;color:#101215;justify-content:space-between;padding:5px 5px 5px 20px}
.dst-root .dst-cc-ico{display:grid;place-items:center;flex:none;width:36px;height:36px;border-radius:50%;background:#2888D1;color:#fff}
.dst-root .dst-cc-close{position:absolute;top:12px;right:12px;width:30px;height:30px;border:0;border-radius:50%;background:rgba(255,255,255,.1);color:#fff;font-size:13px;line-height:30px;text-align:center;cursor:pointer;padding:0}
.dst-root .dst-cc-close:hover{background:rgba(255,255,255,.2)}
.dst-root .dst-cc-bubble{position:fixed;left:16px;bottom:16px;z-index:9998;border:1px solid #3a4047;padding:7px 22px 7px 7px;border-radius:999px;cursor:pointer;display:none;align-items:center;gap:12px;box-shadow:0 14px 30px -10px rgba(16,18,21,.5);background:#101215;color:#fff;font:800 15px/1 "Manrope",ui-sans-serif,system-ui,sans-serif}
.dst-root .dst-cc-bubble:hover{background:#1e2227}
.dst-root .dst-cc-bav{flex:none;width:40px;height:40px;border-radius:50%;overflow:hidden;display:block}
.dst-root .dst-cc-btxt{white-space:nowrap}
.dst-root .dst-cc-bubble svg{width:40px!important;height:40px!important;display:block}
.dst-root .dst-cc-bubble.is-on{display:inline-flex}
@media (prefers-reduced-motion:reduce){.dst-root .dst-callcard{transition:none}}
@media (min-width:769px){.dst-root .dst-callcard,.dst-root .dst-cc-bubble{bottom:50px}.dst-root .dst-cc-br{display:inline}.dst-root .dst-cc-sep{display:none}}

/* ---------- Sortie du conteneur Blocksy ----------
   Le kit gere lui-meme ses largeurs : .dst-wrap plafonne a 1240 px, et les sections
   sombres ou en image doivent filer d'un bord a l'autre. On neutralise le conteneur
   de Blocksy pour le seul bloc .dst-root, sans toucher au reste du theme. */
.entry-content > .dst-root,
.ct-container > .dst-root,
.ct-container-narrow > .dst-root{
  width:100%;max-width:none;
  margin-inline:0;
}
.dst-root .dst-sec,
.dst-root .dst-hero,
.dst-root .dst-cta,
.dst-root .dst-cta2{width:100%}

/* ---------- Espacement vertical de Blocksy ----------
   Blocksy enveloppe chaque bloc de contenu et le contenu de page dans un conteneur
   a 60 px de padding haut et bas. Le kit gere lui-meme ses respirations : on remet
   ces conteneurs a zero des qu'ils portent un bloc .dst-root, sinon un bandeau blanc
   s'intercale entre l'en-tete et le hero. */
[data-vertical-spacing]:has(.dst-root){padding-block:0}

/* ---------- Pages interieures (piliers, clusters) ----------
   Le hero de l'accueil sert tel quel sur les pages interieures : meme structure,
   meme titrage a deux etages. Seule la respiration change, une page interne
   n'ayant pas besoin du meme creux que l'accueil. */
.dst-root .dst-sec--inner .dst-wrap{padding-block:72px}

/* Hero de page interieure : son BAS tombe pile sur la ligne de flottaison,
   sans rien a faire defiler. On retranche donc ce qui le surmonte plutot que
   de prendre un pourcentage de l'ecran.
   Mesure au 07/10 : en-tete 125px a toutes les largeurs, fil d'Ariane 45px et
   63px sous 600px ou son dernier cran passe a la ligne.
   On declare svh apres vh : sur mobile, 1vh vaut la hauteur ecran BARRE
   D'ADRESSE RETRACTEE, donc un hero en vh deborde tant que la barre est
   visible et saute au premier defilement. svh prend la hauteur reellement
   disponible. Les navigateurs qui ignorent svh gardent la ligne vh. */
.dst-root .dst-hero--page{
  --dst-entete:125px;
  --dst-fil:45px;
  --dst-barre:0px;   /* barre d'admin WordPress : nulle pour un visiteur */
  min-height:calc(100vh  - var(--dst-entete) - var(--dst-fil) - var(--dst-barre));
  min-height:calc(100svh - var(--dst-entete) - var(--dst-fil) - var(--dst-barre));
}
@media (max-width:600px){.dst-root .dst-hero--page{--dst-fil:63px}}
/* min-height ne retrecit pas un bloc sous la hauteur de son contenu : avec les
   120/72px de creux de l'accueil, le hero depasse l'ecran sur un portable en
   900px de haut. On resserre, le hero retrouve sa hauteur par min-height. */
.dst-root .dst-hero--page>.dst-wrap{padding-block:72px 56px}
/* Au-dessus de 961px le kit impose au hero une hauteur FIXE, height:calc(95vh
   - 124px), heritee de la maquette de l'accueil. Une hauteur fixe l'emporte sur
   min-height : sans ce height:auto, la regle ci-dessus n'a aucun effet sur
   grand ecran et le hero garde les 95vh de l'accueil. */
@media (min-width:961px){.dst-root .dst-hero--page{height:auto}}
/* Ecran court (portable 768 ou 800px de haut) : le contenu du hero ne tient
   plus dans la place laissee par l'en-tete. On reprend sur le creux, le seul
   poste compressible sans toucher a la taille du texte, qui suit deja le vh. */
@media (min-width:961px) and (max-height:820px){
  .dst-root .dst-hero--page>.dst-wrap{padding-block:40px 32px}
}
/* Connecte, WordPress pousse la page de 32px, et de 46px sous 782px. Sans ca
   le hero depasse d'autant en back-office et on croit la regle fausse. */
.admin-bar .dst-root .dst-hero--page{--dst-barre:32px}
@media (max-width:782px){.admin-bar .dst-root .dst-hero--page{--dst-barre:46px}}

/* Note de source sous un bloc de donnees chiffrees. Obligatoire des qu'un
   chiffre est avance : elle dit d'ou il vient et ce qu'il ne dit pas. */
.dst-root .dst-src{margin:28px 0 0;font-size:13px;line-height:1.55;color:var(--dst-soft)}
.dst-root .dst-sec--dark .dst-src{color:var(--dst-soft-dark)}
.dst-root .dst-src a{color:inherit;text-decoration:underline;text-underline-offset:2px}

/* Un paragraphe de relance apres un bloc de cartes, dans la meme veine que
   .dst-lead mais sans le creux d'introduction. */
.dst-root .dst-cards3+.dst-lead,.dst-root .dst-steps+.dst-lead,.dst-root .dst-svc+.dst-lead{margin-top:40px}

/* ---------- Garde-fou wpautop ----------
   WordPress enveloppe chaque noeud de premier niveau du contenu dans un <p>
   (wpautop), y compris un simple commentaire HTML. Le conteneur de bloc
   `is-layout-constrained` donne ensuite 16 px de marge verticale a ce <p>,
   ce qui insere une bande blanche sous l'en-tete, entre chaque bandeau et
   au-dessus du pied de page. Le kit n'a aucun <p> en enfant direct de son
   <main> : on peut donc remettre ces marges a zero sans rien casser. */
.dst-root>p,.dst-root>main>p{margin-block:0}
.dst-root>p:empty,.dst-root>main>p:empty{display:none}

/* ---------- 18. Pilier : bandeau de confiance (sous le hero) ---------- */
.dst-root .dst-trust{position:relative;margin-top:56px;padding-top:30px;border-top:1px solid var(--dst-line);display:grid;grid-template-columns:repeat(4,1fr);gap:36px}
.dst-root .dst-trust::before{content:"";position:absolute;top:-1px;left:0;width:124px;height:2px;background:var(--dst-ink)}
.dst-root .dst-trust__item{padding:0}
.dst-root .dst-why__grid .dst-link{margin:26px 0 10px}
.dst-root .dst-trust__ttl{display:flex;align-items:center;gap:9px;margin:0 0 7px;font-size:15px;font-weight:700;line-height:1.3}
.dst-root .dst-trust__ttl svg{flex:none;color:var(--dst-blue)}
.dst-root .dst-trust p{margin:0;font-size:14px;line-height:1.55;color:var(--dst-muted)}

/* ---------- 19. Pilier : cartes prestation avec CTA souligné ---------- */
.dst-root .dst-head+.dst-svc{margin-top:56px}
.dst-root .dst-svc__body h3{margin:0;font-size:18px;font-weight:700;color:#fff}
.dst-root .dst-svc--cta .dst-svc__card{display:flex;flex-direction:column}
.dst-root .dst-svc--cta .dst-svc__body{display:flex;flex-direction:column;flex:1}
.dst-root .dst-svc--cta .dst-svc__body p{flex:1}
.dst-root .dst-svc__cta{position:relative;align-self:flex-start;margin-top:18px;padding-bottom:4px;font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;text-decoration:none;color:#fff;display:inline-flex;align-items:center;gap:8px}
.dst-root .dst-svc__cta::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .35s cubic-bezier(.22,.61,.36,1)}
.dst-root .dst-svc__card:hover .dst-svc__cta::after,
.dst-root .dst-svc__cta:focus-visible::after{transform:scaleX(1)}
.dst-root .dst-svc__cta svg{transition:transform .35s cubic-bezier(.22,.61,.36,1)}
.dst-root .dst-svc__card:hover .dst-svc__cta svg{transform:translateX(4px)}

/* ---------- 20. Pilier : bento des chantiers (sombre) ---------- */
/* Pavage ferme : 4 colonnes sur 4 rangees, chaque tuile placee explicitement.
   Les 16 cellules sont occupees, le bloc forme un rectangle parfait et le bord
   droit ne bave plus. */
.dst-root .dst-bento{display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(4,168px);gap:14px;margin-top:56px}
.dst-root .dst-bento figure{position:relative;margin:0;border-radius:var(--dst-radius);overflow:hidden;background:var(--dst-night-2);border:1px solid var(--dst-line-dark)}
.dst-root .dst-bento figure:nth-child(1){grid-area:1/1/4/3}
.dst-root .dst-bento figure:nth-child(2){grid-area:1/3/2/4}
.dst-root .dst-bento figure:nth-child(3){grid-area:1/4/2/5}
.dst-root .dst-bento figure:nth-child(6){grid-area:4/3/5/5}
.dst-root .dst-bento figure:nth-child(4){grid-area:2/3/4/5}
.dst-root .dst-bento figure:nth-child(5){grid-area:4/1/5/3}
.dst-root .dst-bento img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.dst-root .dst-bento figure:hover img{transform:scale(1.04)}
/* La legende descend au ras du bas de la tuile, en bandeau pleine largeur. */
.dst-root .dst-bento figcaption{position:absolute;left:0;right:0;bottom:0;background:linear-gradient(0deg,rgba(16,18,21,.95) 0%,rgba(16,18,21,.8) 45%,rgba(16,18,21,0) 100%);border:0;border-radius:0;padding:34px 14px 12px;font-size:12.5px;font-weight:700;color:#fff}
.dst-root .dst-bento figcaption span{display:block;margin-top:2px;font-weight:500;font-size:12px;color:var(--dst-soft-dark)}

@media (max-width:960px){
  .dst-root .dst-trust{grid-template-columns:1fr 1fr;gap:28px 32px}
  .dst-root .dst-bento{grid-template-columns:1fr 1fr;grid-template-rows:none;grid-auto-rows:170px}
  .dst-root .dst-bento figure:nth-child(n){grid-area:auto}
}
@media (max-width:600px){
  .dst-root .dst-trust{grid-template-columns:1fr;gap:26px}
  .dst-root .dst-bento{grid-template-columns:1fr;grid-template-rows:none;grid-auto-rows:200px}
  .dst-root .dst-bento figure:nth-child(n){grid-area:auto}
}
@media (prefers-reduced-motion:reduce){
  .dst-root .dst-svc__cta::after,.dst-root .dst-svc__cta svg,.dst-root .dst-bento img{transition:none}
}

/* ---------- 22. Cluster : hero en deux colonnes ---------- */
/* Le hero des piliers est plein cadre et sombre. Celui des clusters est clair et
   scinde : la colonne de gauche porte le discours, celle de droite la photo avec
   un panneau de preuves pose dessus. */
.dst-root .dst-chero{background:#fff;border-bottom:1px solid var(--dst-line)}
.dst-root .dst-chero .dst-wrap{display:grid;grid-template-columns:1.02fr .98fr;gap:56px;align-items:center;padding-block:64px 72px}
.dst-root .dst-chero__pill{display:inline-block;padding:9px 18px;border-radius:999px;border:1px solid var(--dst-line);background:var(--dst-mist);font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--dst-muted)}
/* Meme hierarchie que les piliers : la ligne marketing porte la taille,
   le H1 reste la ligne de mots cles, souligne d'un filet bleu. */
.dst-root .dst-chero__title{margin:26px 0 0;font-size:clamp(34px,4.4vw,56px);line-height:1.04;font-weight:800;letter-spacing:-.035em;text-wrap:balance;color:var(--dst-ink)}
.dst-root .dst-chero__title span{color:var(--dst-blue)}
.dst-root .dst-chero h1{display:flex;align-items:center;gap:12px;margin:22px 0 0;font-size:16px;font-weight:700;line-height:1.4;color:var(--dst-ink)}
.dst-root .dst-chero h1::before{content:"";flex:none;width:22px;height:2px;background:var(--dst-blue)}
.dst-root .dst-chero__lead{margin:22px 0 0;max-width:52ch;font-size:17px;line-height:1.6;color:var(--dst-muted)}
.dst-root .dst-chero__lead strong{color:var(--dst-ink)}
.dst-root .dst-chero__ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
/* La photo et son panneau de preuves */
.dst-root .dst-chero__media{position:relative;border-radius:22px;overflow:hidden;aspect-ratio:5/4;background:var(--dst-mist)}
.dst-root .dst-chero__media img{width:100%;height:100%;object-fit:cover}
.dst-root .dst-chero__panel{position:absolute;left:0;top:0;bottom:0;width:46%;min-width:214px;padding:28px 24px;display:flex;flex-direction:column;justify-content:center;gap:0;background:rgba(16,18,21,.62);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);color:#fff}
/* Le panneau se pose du cote ou la photo n'a pas de sujet : chaque cluster
   choisit son bord selon le cadrage de son image. */
.dst-root .dst-chero__panel--right{left:auto;right:0}
.dst-root .dst-chero__fig{text-align:center;padding:16px 0}
.dst-root .dst-chero__fig+.dst-chero__fig{border-top:1px solid rgba(255,255,255,.22)}
.dst-root .dst-chero__fig b{display:block;font-size:clamp(26px,2.4vw,34px);font-weight:800;letter-spacing:-.02em;line-height:1.05}
.dst-root .dst-chero__fig small{display:block;margin-top:7px;font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#d7dde3;line-height:1.35}
.dst-root .dst-chero__badge{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:18px;padding-top:18px;border-top:1px solid rgba(255,255,255,.22)}
.dst-root .dst-chero__badge img{height:42px;width:auto}
.dst-root .dst-chero__badge span{font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#fff}

/* ---------- 23. Cluster : bandeau des repères de prix ---------- */
.dst-root .dst-prix{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:48px}
/* La carte garde un fond clair, mais un filet bleu en tete, un degrade tres
   leger et une ombre portee lui donnent du relief : sans ca, six rectangles
   blancs alignes font une bande plate. */
.dst-root .dst-prix__card{position:relative;overflow:hidden;padding:28px 26px 24px;border:1px solid var(--dst-line);border-radius:var(--dst-radius);background:linear-gradient(180deg,#fff 58%,var(--dst-mist) 100%);display:flex;flex-direction:column;box-shadow:0 1px 2px rgba(16,18,21,.04),0 14px 30px -20px rgba(16,18,21,.28)}
.dst-root .dst-prix__card::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:linear-gradient(90deg,var(--dst-blue),rgba(40,136,209,.12))}
.dst-root .dst-prix__card h3{margin:0;font-size:16px;font-weight:700;line-height:1.3}
/* p.dst-prix__val, pas .dst-prix__val seul : sinon '.dst-prix__card p' (0,2,1)
   l'emporte et le prix sort en 14,5 px gris, ce qui aplatit toute la bande. */
.dst-root .dst-prix__card p.dst-prix__val{margin:16px 0 0;font-size:28px;font-weight:800;letter-spacing:-.025em;color:var(--dst-blue);line-height:1.08}
.dst-root .dst-prix__card .dst-prix__unit{display:block;margin-top:7px;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--dst-muted)}
.dst-root .dst-prix__card p{margin:14px 0 0;font-size:14.5px;line-height:1.55;color:var(--dst-muted)}
.dst-root .dst-prix__card p strong{font-weight:700;color:var(--dst-blue)}
.dst-root .dst-prix__note{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px 32px;margin-top:28px;padding:24px;border-radius:var(--dst-radius);background:var(--dst-mist);border:1px solid var(--dst-line);font-size:14.5px;line-height:1.6;color:var(--dst-muted)}
.dst-root .dst-prix__note p{margin:0;flex:1 1 440px}
.dst-root .dst-prix__note strong{color:var(--dst-ink)}
.dst-root .dst-prix__note em{font-style:normal;color:var(--dst-blue);font-weight:700}
@media (max-width:600px){ .dst-root .dst-prix__note .dst-btn{width:100%;justify-content:space-between} }

/* ---------- 23 bis. Filigrane du logo client sur une bande ---------- */
/* Michel : une bande sans visuel est une bande orpheline. Le logo pose en
   grand, en bas a droite et tres transparent, donne de la profondeur sans
   voler la lecture. Il est decoratif : alt vide et aria-hidden. */
.dst-root .dst-fili{position:relative;overflow:hidden}
.dst-root .dst-fili>.dst-wrap{position:relative;z-index:1}
.dst-root .dst-fili__logo{position:absolute;right:-34px;bottom:-30px;z-index:0;width:min(440px,42vw);height:auto;opacity:.07;filter:grayscale(1);mix-blend-mode:multiply;pointer-events:none;user-select:none}
@media (max-width:860px){ .dst-root .dst-fili__logo{width:min(300px,62vw);right:-26px;bottom:-22px;opacity:.06} }

/* ---------- 24. Cluster : chronologie de chantier animee ---------- */
.dst-root .dst-chrono{position:relative;margin-top:56px}
.dst-root .dst-chrono__rail{position:absolute;left:30px;right:calc(16.667% - 45px);top:29px;height:2px;background:var(--dst-line-dark);overflow:hidden}
.dst-root .dst-chrono__fill{display:block;height:100%;width:0;background:var(--dst-blue);transition:width 2.4s cubic-bezier(.22,.61,.36,1)}
.dst-root .dst-chrono.is-on .dst-chrono__fill{width:100%}
.dst-root .dst-chrono__list{position:relative;display:grid;grid-template-columns:repeat(6,1fr);gap:18px;list-style:none;margin:0;padding:0}
.dst-root .dst-chrono__item{opacity:0;transform:translateY(12px);transition:opacity .55s ease,transform .55s ease}
.dst-root .dst-chrono.is-on .dst-chrono__item{opacity:1;transform:none}
.dst-root .dst-chrono__dot{width:60px;height:60px;display:grid;place-items:center;border-radius:50%;background:var(--dst-night);border:2px solid var(--dst-line-dark);font-size:17px;font-weight:800;color:var(--dst-soft-dark);transition:border-color .45s ease,color .45s ease,background .45s ease}
.dst-root .dst-chrono.is-on .dst-chrono__item.is-lit .dst-chrono__dot{border-color:var(--dst-blue);color:#fff;background:var(--dst-blue)}
.dst-root .dst-chrono__item h3{margin:20px 0 8px;font-size:16.5px;line-height:1.3;font-weight:700;color:#fff}
.dst-root .dst-chrono__item p{margin:0;font-size:14px;line-height:1.55;color:var(--dst-soft-dark)}
@media (prefers-reduced-motion:reduce){
  .dst-root .dst-chrono__item{opacity:1;transform:none;transition:none}
  .dst-root .dst-chrono__fill{width:100%;transition:none}
}

@media (max-width:1180px){
  .dst-root .dst-chrono__list{grid-template-columns:repeat(3,1fr);gap:28px 18px}
  .dst-root .dst-chrono__rail{display:none}
}
@media (max-width:960px){
  .dst-root .dst-chero .dst-wrap{grid-template-columns:1fr;gap:36px;padding-block:44px 52px}
  .dst-root .dst-chero__media{aspect-ratio:4/3}
  .dst-root .dst-prix{grid-template-columns:1fr 1fr}
}
@media (max-width:600px){
  .dst-root .dst-chero__panel{position:static;width:auto;min-width:0;background:var(--dst-night);backdrop-filter:none;-webkit-backdrop-filter:none;flex-direction:row;flex-wrap:wrap;gap:0;padding:18px}
  .dst-root .dst-chero__media{aspect-ratio:auto;border-radius:22px 22px 0 0}
  .dst-root .dst-chero__wrapmedia{border-radius:22px;overflow:hidden}
  .dst-root .dst-chero__fig{flex:1 1 33%;padding:10px 6px}
  .dst-root .dst-chero__fig+.dst-chero__fig{border-top:0;border-left:1px solid rgba(255,255,255,.22)}
  .dst-root .dst-chero__badge{flex:1 1 100%;margin-top:12px;padding-top:12px}
  .dst-root .dst-prix{grid-template-columns:1fr}
  .dst-root .dst-chrono__list{grid-template-columns:1fr 1fr}
}

/* ---------- 25. Bandeau sous le hero : photo panoramique en tete ---------- */
/* Le bandeau qui suit le hero reprenait exactement sa grammaire : texte a
   gauche, visuel a droite. La photo client passe donc en bandeau pleine
   largeur et le texte s'ouvre en deux colonnes dessous. La lecture devient
   horizontale et le hero garde sa singularite.
   La photo reste servie telle quelle : object-fit decoupe en 16/6 sur grand
   ecran et en 4/3 sur mobile, un seul fichier suffit quel que soit le cluster. */
.dst-root .dst-whypano__media{position:relative;border-radius:18px;overflow:hidden;aspect-ratio:16/6;background:var(--dst-mist)}
.dst-root .dst-whypano__media img{width:100%;height:100%;object-fit:cover;object-position:50% 46%}
.dst-root .dst-whypano__tag{position:absolute;left:18px;top:18px;padding:9px 16px;border-radius:999px;background:rgba(255,255,255,.93);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--dst-ink)}
.dst-root .dst-whypano__cols{display:grid;grid-template-columns:1.02fr 1fr;gap:56px;margin-top:42px;align-items:start}
.dst-root .dst-whypano__cols .dst-eyebrow+.dst-mk{margin-top:14px}
.dst-root .dst-whypano__cols>div>.dst-lead:first-child{margin-top:0}
.dst-root .dst-whypano__cols .dst-link{margin-top:24px}
@media (max-width:860px){
  .dst-root .dst-whypano__media{aspect-ratio:4/3}
  .dst-root .dst-whypano__cols{grid-template-columns:1fr;gap:26px;margin-top:30px}
  .dst-root .dst-whypano__tag{left:14px;top:14px;padding:8px 13px;font-size:11px}
}

/* ---------- 26. Bento a quatre tuiles ---------- */
/* Le pavage a six tuiles laisse une rangee vide des qu'on en retire deux.
   Cette variante refait un rectangle plein sur trois rangees. */
.dst-root .dst-bento--4{grid-template-rows:repeat(3,168px)}
.dst-root .dst-bento--4 figure:nth-child(1){grid-area:1/1/4/3}
.dst-root .dst-bento--4 figure:nth-child(2){grid-area:1/3/2/5}
.dst-root .dst-bento--4 figure:nth-child(3){grid-area:2/3/4/4}
.dst-root .dst-bento--4 figure:nth-child(4){grid-area:2/4/4/5}
@media (max-width:960px){
  .dst-root .dst-bento--4{grid-template-rows:none;grid-auto-rows:170px}
  .dst-root .dst-bento--4 figure:nth-child(n){grid-area:auto}
}
@media (max-width:600px){
  .dst-root .dst-bento--4{grid-auto-rows:200px}
}