/* ════════════════════════════════════════════════════
   CBR-CLOUD — Noms de domaine
   Transcription de la maquette « Noms de domaine CBR-Cloud ».
   Thème CLAIR : la page passe sur fond #eceff1, à l'inverse du reste
   du site. Le fond sombre du gabarit est donc neutralisé ici.
════════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; }

body {
    background-color: #eceff1 !important;
    background-image: none !important;
    color: #0f172a;
}

.navigation-bar,.sticky-wrapper { z-index:9999!important; }
.header-top-area { z-index:1!important;position:relative!important; }

.dm-hero,
.dm-section,
.dm-resultats,
.dm-barre {
    font-family: 'Montserrat', system-ui, sans-serif;
}

/* ════════════════════════════════════════
   HERO
════════════════════════════════════════ */
/* Le dégradé descend du bleu nuit jusqu'au fond de page : c'est lui qui
   raccorde le hero au reste, sans rupture visible. */
.dm-hero-fond {
    background: linear-gradient(180deg,
        #0b1e33 0%, #0e2339 32%, #16304b 50%, #26445f 64%,
        #476479 76%, #71889b 86%, #a8b7c2 94%, #d5dce1 98%, #eceff1 100%);
    color: #f1f5f9;
}
.dm-hero {
    max-width: 1240px;
    margin: 0 auto;
    /* 140px en haut et non 72 : la barre de navigation du site est fixe,
       la maquette n'en a pas. */
    padding: 140px 40px 330px;
    display: flex;
    align-items: center;
    gap: 56px;
    flex-wrap: wrap;
}
.dm-hero-texte { flex: 1 1 420px; min-width: 0; }

.dm-titre {
    font-size: clamp(28px, 3vw, 42px);
    font-weight: 800;
    letter-spacing: -.03em;
    line-height: 1.12;
    margin: 0 0 52px;
    color: #f1f5f9;
    font-family: 'Montserrat', sans-serif;
}

.dm-recherche {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 8px 8px 20px;
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(255,255,255,.04);
    border-radius: 14px;
    max-width: 660px;
    margin: 0 0 12px;
    box-shadow: 0 20px 50px -30px rgba(6,182,212,.6);
}
.dm-loupe { font-size: 15px; color: rgba(255,255,255,.3); flex-shrink: 0; }
.dm-recherche input {
    flex: 1;
    min-width: 0;
    background: transparent;
    border: 0;
    outline: none;
    color: #f1f5f9;
    font-size: 16px;
    font-weight: 600;
    padding: 12px 0;
    font-family: inherit;
}
.dm-recherche input::placeholder { color: rgba(255,255,255,.3); }
.dm-btn-chercher {
    flex-shrink: 0;
    border: 0;
    cursor: pointer;
    font-family: inherit;
    font-size: 14.5px;
    font-weight: 700;
    color: #08191d;
    background: #06b6d4;
    padding: 13px 24px;
    border-radius: 9px;
    transition: background .2s;
}
.dm-btn-chercher:hover { background: #22d3ee; }
.dm-btn-chercher:disabled { opacity: .7; cursor: default; }

.dm-hero-espace { height: 26px; }

.dm-hero-points { display: flex; flex-wrap: wrap; gap: 12px 26px; }
.dm-hero-points span {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 13px;
    font-weight: 600;
    color: rgba(255,255,255,.55);
}
.dm-hero-points i {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: #22d3ee;
    flex-shrink: 0;
}

.dm-hero-visuel { flex: 1 1 340px; min-width: 280px; }
.dm-hero-visuel-cadre { position: relative; max-width: 560px; margin: 0 auto; }
.dm-hero-visuel img { display: block; width: 100%; height: auto; }

/* ════════════════════════════════════════
   SECTIONS
════════════════════════════════════════ */
.dm-section { max-width: 1240px; margin: 0 auto; padding: 64px 40px 0; }
.dm-section-fin { padding-bottom: 110px; }

.dm-section-tete { max-width: 560px; margin-bottom: 26px; }
.dm-section-tete.dm-large { max-width: 600px; }
.dm-lbl {
    font-size: 11px; font-weight: 700; letter-spacing: 2.4px;
    text-transform: uppercase; color: #0891b2; margin: 0 0 12px;
}
.dm-section-tete h2 {
    font-size: clamp(24px, 2.6vw, 32px);
    font-weight: 800; letter-spacing: -.03em; line-height: 1.16;
    margin: 0 0 10px; color: #0f172a;
    font-family: 'Montserrat', sans-serif;
}
.dm-sous { font-size: 13.5px; line-height: 1.6; color: rgba(15,23,42,.48); margin: 0; }
.dm-h2-petit {
    font-size: clamp(22px, 2.3vw, 28px);
    font-weight: 800; letter-spacing: -.03em; line-height: 1.2; margin: 0;
    color: #0f172a; font-family: 'Montserrat', sans-serif;
}

/* Surface blanche commune aux tableaux et aux listes. */
.dm-tableau,
.dm-carte-liste {
    border: 1px solid rgba(15,23,42,.16);
    border-radius: 14px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 1px 2px rgba(15,23,42,.06), 0 8px 24px -16px rgba(15,23,42,.18);
}

/* ════════════════════════════════════════
   RÉSULTATS
════════════════════════════════════════ */
.dm-resultats { max-width: 1000px; margin: 0 auto; padding: 40px 40px 0; }
.dm-resultats-tete {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 16px; flex-wrap: wrap; margin-bottom: 14px;
}
.dm-resultats-tete h2 {
    font-size: 17px; font-weight: 800; letter-spacing: -.02em; margin: 0; color: #0f172a;
    font-family: 'Montserrat', sans-serif;
}
.dm-resume { font-size: 12.5px; font-weight: 600; color: rgba(15,23,42,.45); }

.dm-res-ligne {
    display: flex; align-items: center; gap: 16px;
    padding: 14px 18px;
    border-bottom: 1px solid rgba(15,23,42,.11);
    flex-wrap: wrap;
}
.dm-res-ligne:last-child { border-bottom: 0; }
.dm-res-nom {
    flex: 1; min-width: 180px;
    font-size: 15.5px; font-weight: 700; letter-spacing: -.01em; color: #0f172a;
}
.dm-res-nom span { color: #0891b2; }

.dm-pastille {
    font-size: 11px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase;
    padding: 5px 11px; border-radius: 100px; white-space: nowrap;
}
.dm-dispo { color: #047857; background: rgba(4,120,87,.08); border: 1px solid rgba(4,120,87,.2); }
.dm-pris  { color: rgba(15,23,42,.45); background: #fff; border: 1px solid rgba(15,23,42,.15); }

.dm-res-prix { text-align: right; min-width: 150px; }
.dm-res-prix-val { font-size: 15px; font-weight: 800; color: #0f172a; }
.dm-res-prix-val span { font-size: 11.5px; font-weight: 600; color: rgba(15,23,42,.45); }
.dm-res-renouv { font-size: 11.5px; font-weight: 500; color: rgba(15,23,42,.45); margin-top: 3px; }

.dm-res-btn {
    cursor: pointer; font-family: inherit;
    font-size: 13px; font-weight: 700;
    padding: 10px 18px; border-radius: 8px; min-width: 118px;
    background: #06b6d4; border: 1px solid rgba(6,182,212,.4); color: #08191d;
    transition: background .2s;
}
.dm-res-btn:hover { background: #22d3ee; }
.dm-res-btn-ok { background: rgba(52,211,153,.12); border-color: rgba(52,211,153,.3); color: #047857; }
.dm-res-btn-ok:hover { background: rgba(52,211,153,.2); }
.dm-res-btn-off { background: #fff; border: 1px solid rgba(15,23,42,.12); color: rgba(15,23,42,.32); cursor: default; }
.dm-res-btn-off:hover { background: #fff; }

.dm-etat { padding: 28px 18px; text-align: center; font-size: 13.5px; color: rgba(15,23,42,.5); }
.dm-etat-err { color: #b91c1c; }

/* ════════════════════════════════════════
   VEDETTES
════════════════════════════════════════ */
.dm-vedettes { display: flex; flex-wrap: nowrap; gap: 12px; align-items: stretch; }
.dm-vedette {
    flex: 1 1 0; min-width: 0;
    cursor: pointer; font-family: inherit; text-align: center;
    border: 1px solid rgba(15,23,42,.16);
    background: #fff;
    border-radius: 16px;
    padding: 24px 16px 20px;
    box-shadow: 0 1px 2px rgba(15,23,42,.06), 0 10px 26px -18px rgba(15,23,42,.2);
    display: flex; flex-direction: column; align-items: center;
    transition: transform .2s, border-color .2s, background .2s;
}
.dm-vedette:hover {
    transform: translateY(-4px);
    border-color: rgba(6,182,212,.4);
    background: rgba(6,182,212,.07);
}
.dm-vedette-ext {
    display: flex; align-items: center; justify-content: center;
    height: 56px;
    font-size: 30px; font-weight: 800; letter-spacing: -.05em;
    color: #0f172a; white-space: nowrap;
}
.dm-point { color: #0891b2; }
.dm-vedette-trait { width: 32px; height: 2px; background: rgba(6,182,212,.35); border-radius: 2px; margin: 8px 0 14px; }
.dm-vedette-desc {
    flex: 1; display: block;
    font-size: 12px; line-height: 1.6; color: rgba(15,23,42,.52);
    min-height: 62px; margin-bottom: 10px;
}
.dm-vedette-prix { font-size: 21px; font-weight: 800; letter-spacing: -.03em; color: #0f172a; margin-top: 6px; white-space: nowrap; }
.dm-vedette-unite {
    font-size: 10px; font-weight: 700; letter-spacing: 1.1px; text-transform: uppercase;
    color: rgba(15,23,42,.4); margin-top: 6px;
}
.dm-vedette-renouv { font-size: 11px; font-weight: 600; color: rgba(15,23,42,.38); margin-top: 10px; white-space: nowrap; }

/* ════════════════════════════════════════
   TARIFS COMPLETS
════════════════════════════════════════ */
.dm-tarifs-tete {
    display: flex; align-items: flex-end; justify-content: space-between;
    gap: 24px; flex-wrap: wrap; margin-bottom: 20px;
}
.dm-tarifs-tete > div:first-child { max-width: 520px; }
.dm-filtre {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 14px;
    border: 1px solid rgba(15,23,42,.18);
    background: #fff; border-radius: 10px; min-width: 220px;
}
.dm-loupe-sombre { font-size: 13px; color: rgba(15,23,42,.4); }
.dm-filtre input {
    flex: 1; min-width: 0; background: transparent; border: 0; outline: none;
    color: #0f172a; font-size: 13px; font-weight: 600; font-family: inherit;
}
.dm-filtre input::placeholder { color: rgba(15,23,42,.38); }

.dm-tableau-entete,
.dm-ligne {
    display: grid;
    grid-template-columns: minmax(0,1.3fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) auto;
    gap: 12px;
}
.dm-tableau-entete {
    padding: 12px 20px;
    background: #eef1f3;
    border-bottom: 1px solid rgba(15,23,42,.16);
    font-size: 10px; font-weight: 700; letter-spacing: 1.3px; text-transform: uppercase;
    color: rgba(15,23,42,.4);
}
.dm-col-action { width: 96px; }
.dm-ligne { align-items: center; padding: 11px 20px; border-bottom: 1px solid rgba(15,23,42,.1); }
.dm-ligne:last-child { border-bottom: 0; }
.dm-ligne-ext { display: flex; align-items: center; gap: 9px; font-size: 14px; font-weight: 700; color: #0f172a; }
.dm-pastille-pop {
    font-size: 9px; font-weight: 800; letter-spacing: .7px; text-transform: uppercase;
    color: #0e7490; background: rgba(6,182,212,.12); border: 1px solid rgba(6,182,212,.25);
    padding: 3px 7px; border-radius: 100px; white-space: nowrap;
}
.dm-ligne-prix { font-size: 13.5px; font-weight: 700; color: #1e293b; }
.dm-ligne-sec  { font-size: 13.5px; font-weight: 600; color: rgba(15,23,42,.56); }
.dm-ligne-btn {
    width: 96px; cursor: pointer; font-family: inherit;
    font-size: 12.5px; font-weight: 700; color: #0e7490;
    background: rgba(6,182,212,.1); border: 1px solid rgba(6,182,212,.22);
    padding: 8px 10px; border-radius: 8px; transition: background .2s;
}
.dm-ligne-btn:hover { background: rgba(6,182,212,.2); }
.dm-note-tableau { font-size: 11.5px; color: rgba(15,23,42,.4); margin: 12px 0 0; }

/* ════════════════════════════════════════
   COMPARATIF
════════════════════════════════════════ */
.dm-tableau-compare { border-radius: 16px; }
.dm-compare-entete,
.dm-compare-ligne,
.dm-compare-total {
    display: grid;
    grid-template-columns: minmax(0,1.6fr) minmax(0,1fr) minmax(0,1fr);
    gap: 12px;
}
.dm-compare-entete {
    padding: 13px 22px;
    background: #eef1f3;
    border-bottom: 1px solid rgba(15,23,42,.16);
    font-size: 10px; font-weight: 700; letter-spacing: 1.3px; text-transform: uppercase;
    color: rgba(15,23,42,.4);
}
.dm-chez-nous { color: #0e7490; }
.dm-compare-ligne { align-items: center; padding: 12px 22px; border-bottom: 1px solid rgba(15,23,42,.1); }
.dm-compare-service { font-size: 13.5px; font-weight: 600; color: #1e293b; }
.dm-compare-inclus { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: #0e7490; }
.dm-check {
    width: 16px; height: 16px; border-radius: 50%;
    background: rgba(6,182,212,.16);
    display: flex; align-items: center; justify-content: center;
    font-size: 9.5px; flex-shrink: 0;
}
.dm-compare-ailleurs { font-size: 12.5px; font-weight: 500; color: rgba(15,23,42,.45); }
.dm-compare-total { align-items: center; padding: 16px 22px; background: rgba(6,182,212,.07); }
.dm-compare-total .dm-compare-service { font-weight: 800; color: #0f172a; }
.dm-total-nous { font-size: 14px; font-weight: 800; color: #0e7490; }
.dm-total-eux { font-size: 13px; font-weight: 700; color: rgba(15,23,42,.52); }

/* ════════════════════════════════════════
   CARTES
════════════════════════════════════════ */
.dm-duo { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 16px; align-items: stretch; }
.dm-carte {
    display: flex; flex-direction: column;
    border: 1px solid rgba(15,23,42,.16);
    background: #fff; border-radius: 16px;
    padding: 28px 26px;
    box-shadow: 0 1px 2px rgba(15,23,42,.06), 0 10px 26px -18px rgba(15,23,42,.2);
}
.dm-carte-accent {
    position: relative; overflow: hidden;
    border-color: rgba(6,182,212,.22);
    background: radial-gradient(ellipse 80% 100% at 100% 0%, rgba(6,182,212,.12), transparent 65%), #fff;
}
.dm-carte .dm-lbl { letter-spacing: 1.8px; margin-bottom: 14px; }
.dm-carte h3 {
    font-size: 19px; font-weight: 800; letter-spacing: -.02em; margin: 0 0 10px;
    color: #0f172a; font-family: 'Montserrat', sans-serif;
}
.dm-h3-espace { margin-bottom: 20px !important; }
.dm-carte-texte { font-size: 13.5px; line-height: 1.7; color: rgba(15,23,42,.55); margin: 0 0 18px; text-wrap: pretty; }

.dm-etapes-courtes { display: flex; flex-direction: column; gap: 10px; margin-bottom: 24px; }
.dm-etapes-courtes > div { display: flex; align-items: center; gap: 11px; font-size: 13px; color: rgba(15,23,42,.62); }
.dm-num {
    width: 20px; height: 20px; border-radius: 50%;
    background: rgba(6,182,212,.14); color: #0e7490;
    font-size: 10.5px; font-weight: 800;
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}

.dm-btn-sec,
.dm-btn-prim,
.dm-btn-neutre {
    margin-top: auto; align-self: flex-start;
    display: inline-flex; align-items: center; gap: 9px;
    padding: 12px 22px; border-radius: 9px;
    font-size: 14px; text-decoration: none;
    cursor: pointer; font-family: inherit;
    transition: background .2s, color .2s;
}
.dm-btn-sec { font-weight: 700; color: #0e7490; background: rgba(6,182,212,.1); border: 1px solid rgba(6,182,212,.25); }
.dm-btn-sec:hover { background: rgba(6,182,212,.2); color: #155e75; text-decoration: none; }
.dm-btn-prim { font-weight: 800; color: #08191d; background: #06b6d4; border: 0; }
.dm-btn-prim:hover { background: #22d3ee; color: #08191d; text-decoration: none; }
.dm-btn-neutre { font-weight: 700; color: rgba(15,23,42,.7); background: rgba(15,23,42,.1); border: 1px solid rgba(15,23,42,.18); }
.dm-btn-neutre:hover { background: rgba(15,23,42,.16); color: #0f172a; text-decoration: none; }

.dm-prix-heb { display: flex; align-items: flex-end; gap: 6px; margin-bottom: 6px; }
.dm-prix-heb-val { font-size: 30px; font-weight: 800; letter-spacing: -.04em; line-height: 1; color: #0f172a; }
.dm-prix-heb-sym { font-size: 14px; font-weight: 700; color: rgba(15,23,42,.56); margin-bottom: 2px; }
.dm-prix-heb-per { font-size: 12.5px; font-weight: 500; color: rgba(15,23,42,.48); margin-bottom: 3px; }
.dm-prix-heb-note { font-size: 12px; color: rgba(15,23,42,.45); margin: 0 0 20px; }

/* Boîte de réception illustrée */
.dm-boite { border: 1px solid rgba(15,23,42,.15); background: #fff; border-radius: 12px; overflow: hidden; }
.dm-boite-tete {
    padding: 10px 14px; border-bottom: 1px solid rgba(15,23,42,.11);
    font-size: 11px; font-weight: 600; color: rgba(15,23,42,.4);
}
.dm-boite-corps { padding: 14px; display: flex; flex-direction: column; gap: 12px; }
.dm-mail { display: flex; align-items: center; gap: 11px; }
.dm-avatar {
    width: 28px; height: 28px; border-radius: 50%;
    background: rgba(15,23,42,.11); color: rgba(15,23,42,.48);
    font-size: 11px; font-weight: 800;
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.dm-avatar-cyan { background: rgba(6,182,212,.16); color: #0e7490; }
.dm-mail-de { display: block; font-size: 12.5px; font-weight: 700; color: #1e293b; }
.dm-mail-objet { display: block; font-size: 11.5px; color: rgba(15,23,42,.42); }

.dm-etapes { display: flex; flex-direction: column; gap: 16px; }
.dm-etape { display: flex; gap: 14px; align-items: flex-start; }
.dm-etape-num {
    width: 26px; height: 26px; border-radius: 8px;
    background: rgba(6,182,212,.12); border: 1px solid rgba(6,182,212,.25); color: #0e7490;
    font-size: 12px; font-weight: 800;
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.dm-etape-titre { display: block; font-size: 14px; font-weight: 700; color: #1e293b; margin-bottom: 3px; }
.dm-etape-detail { display: block; font-size: 12.5px; line-height: 1.6; color: rgba(15,23,42,.5); }

/* ════════════════════════════════════════
   GARANTIES
════════════════════════════════════════ */
.dm-features { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap: 16px; }
.dm-feature {
    border: 1px solid rgba(15,23,42,.15);
    background: #fff; border-radius: 14px; padding: 24px 22px;
    box-shadow: 0 1px 2px rgba(15,23,42,.06), 0 10px 26px -18px rgba(15,23,42,.2);
}
.dm-feature h3 {
    font-size: 15.5px; font-weight: 800; letter-spacing: -.01em; margin: 0 0 9px;
    color: #0f172a; font-family: 'Montserrat', sans-serif;
}
.dm-feature p { font-size: 13px; line-height: 1.65; color: rgba(15,23,42,.52); margin: 0; }

/* ════════════════════════════════════════
   FAQ
════════════════════════════════════════ */
.dm-faq-item { border-bottom: 1px solid rgba(15,23,42,.11); }
.dm-faq-item:last-child { border-bottom: 0; }
.dm-faq-q {
    width: 100%; cursor: pointer; font-family: inherit; text-align: left;
    border: 0; background: transparent;
    padding: 18px 24px;
    display: flex; align-items: center; gap: 16px;
}
.dm-faq-q > span:first-child { flex: 1; font-size: 14.5px; font-weight: 700; color: #1e293b; }
.dm-faq-signe { font-size: 18px; font-weight: 400; color: #0e7490; flex-shrink: 0; }
.dm-faq-r {
    font-size: 13.5px; line-height: 1.75; color: rgba(15,23,42,.55);
    margin: 0; padding: 0 60px 20px 24px; text-wrap: pretty;
}

/* ════════════════════════════════════════
   CTA FINAL
════════════════════════════════════════ */
.dm-cta {
    position: relative; overflow: hidden;
    border: 1px solid rgba(6,182,212,.22);
    border-radius: 20px;
    background: radial-gradient(ellipse 70% 120% at 50% 0%, rgba(6,182,212,.13), transparent 70%), #fff;
    padding: 52px 48px 44px;
    text-align: center;
}
.dm-cta-trait {
    position: absolute; top: 0; left: 50%; transform: translateX(-50%);
    width: 180px; height: 2px;
    background: linear-gradient(90deg, transparent, #06b6d4, transparent);
}
.dm-cta h2 {
    font-size: clamp(24px, 2.8vw, 34px);
    font-weight: 800; letter-spacing: -.03em; line-height: 1.15;
    margin: 0 auto 14px; max-width: 560px; color: #0f172a;
    font-family: 'Montserrat', sans-serif;
}
.dm-cta > p { font-size: 15px; line-height: 1.7; color: rgba(15,23,42,.6); margin: 0 auto 26px; max-width: 520px; }
.dm-cta-btns { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.dm-cta-btns .dm-btn-prim,
.dm-cta-btns .dm-btn-neutre { margin-top: 0; align-self: auto; font-size: 15px; padding: 15px 30px; }
.dm-cta-btns .dm-btn-prim { box-shadow: 0 10px 30px -10px rgba(6,182,212,.6); }

/* ════════════════════════════════════════
   RACCORD VERS LE PIED DE PAGE
════════════════════════════════════════ */
/* Le pied de page du site est en `background: transparent` avec du texte blanc
   (voir layouts/app.blade.php) : il compte sur le fond sombre des autres pages.
   Sur ce thème clair, il tombait à 1,15:1 de contraste — illisible, là où le
   minimum lisible est 4,5:1. On lui rend donc un fond sombre.
   Ces deux règles ne portent que sur cette page : la feuille n'est chargée
   qu'ici, le pied de page des autres écrans n'est pas touché. */
.dm-fondu-bas {
    height: 130px;
    background: linear-gradient(180deg,
        #eceff1 0%, #d5dce1 14%, #a8b7c2 30%, #71889b 46%,
        #476479 60%, #26445f 74%, #16304b 85%, #0b1e33 100%);
}
/* `body .footer-…` et non `.footer-…` seul : le gabarit pose
   `background: transparent !important` dans un <style> en fin de page. À
   spécificité égale, c'est lui qui l'emporte ; il faut donc passer au-dessus. */
body .footer-ultra-modern {
    background: #0b1e33 !important;
    border-top: 0 !important;
}

/* ════════════════════════════════════════
   BARRE PANIER
════════════════════════════════════════ */
.dm-barre {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    background: rgba(236,239,241,.96);
    border-top: 1px solid rgba(6,182,212,.25);
    backdrop-filter: blur(12px);
    padding: 14px 40px;
}
.dm-barre-inner { max-width: 1240px; margin: 0 auto; display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.dm-barre-resume { font-size: 13.5px; font-weight: 600; color: rgba(15,23,42,.62); }
.dm-barre-espace { flex: 1; }
.dm-barre-total { font-size: 17px; font-weight: 800; color: #0f172a; }
.dm-barre-unite { font-size: 12px; font-weight: 500; color: rgba(15,23,42,.45); }
.dm-barre .dm-btn-prim { margin-top: 0; align-self: auto; }

/* ════════════════════════════════════════
   RESPONSIVE
   La maquette n'a qu'une largeur (1280) ; ces règles l'empêchent seulement
   de déborder plus bas — aucune ne change le rendu au-dessus de 1100px.
════════════════════════════════════════ */
@media (max-width: 1100px) {
    /* Six vedettes en nowrap deviennent illisibles : on les laisse passer à
       la ligne plutôt que de les écraser. */
    .dm-vedettes { flex-wrap: wrap; }
    .dm-vedette { flex: 1 1 30%; }
}
@media (max-width: 960px) {
    .dm-hero { padding: 100px 24px 200px; gap: 40px; }
    .dm-titre { margin-bottom: 32px; }
    .dm-section { padding-left: 24px; padding-right: 24px; }
    .dm-resultats { padding-left: 24px; padding-right: 24px; }
    .dm-cta { padding: 40px 26px 36px; }
    .dm-barre { padding: 12px 24px; }
}
@media (max-width: 780px) {
    .dm-vedette { flex: 1 1 45%; }
    /* Le tableau abandonne ses colonnes secondaires plutôt que de déborder. */
    .dm-tableau-entete,
    .dm-ligne { grid-template-columns: minmax(0,1.4fr) minmax(0,1fr) auto; }
    .dm-tableau-entete span:nth-child(3),
    .dm-tableau-entete span:nth-child(4),
    .dm-ligne .dm-ligne-sec { display: none; }
    .dm-compare-entete,
    .dm-compare-ligne,
    .dm-compare-total { grid-template-columns: minmax(0,1.4fr) minmax(0,1fr); }
    .dm-compare-entete span:nth-child(3),
    .dm-compare-ailleurs,
    .dm-total-eux { display: none; }
    .dm-faq-r { padding-right: 24px; }
}
@media (max-width: 560px) {
    .dm-vedette { flex: 1 1 100%; }
    .dm-hero { padding-top: 90px; }
    .dm-res-prix { text-align: left; min-width: 0; }
}