/* ══════════════════════════════════════════════════════════════════════════
   NOMS DE DOMAINE — d'après la maquette « Domaines CBR-Cloud »
   (docs/maquette/domaines-cbr-cloud.dc.html, 17 septembre 2026)
   ══════════════════════════════════════════════════════════════════════════

   REMPLACE domaines-search-style.css, QUI PEIGNAIT UN HERO SOMBRE. La maquette
   part dans l'autre sens : fond blanc, dégradé bleu très pâle, encre marine.
   Le préfixe `dm-` est conservé volontairement — le script de la page vise
   `#dm-liste`, `.dm-res-ligne`, `.dm-pastille` et consorts, et un renommage
   aurait cassé la recherche sans qu'aucun test de chaîne ne le voie.

   Les valeurs ci-dessous sont celles de la maquette, relevées une à une dans
   ses styles en ligne. Elles ne sont pas « à peu près » : un 14,5 px reste un
   14,5 px, parce que c'est ce qui distingue une reprise d'une approximation.
   ══════════════════════════════════════════════════════════════════════════ */

.dm {
    --encre:        #12203c;  /* titres */
    --texte:        #5a6b8c;  /* paragraphes */
    --texte-fort:   #41506e;  /* libellés de puces */
    --texte-faible: #7c8aa8;  /* prix sous les extensions */
    --bleu:         #1a6dff;
    --bleu-fonce:   #0b52d1;  /* survol des boutons pleins */
    --bleu-clair:   #e8f0ff;  /* pastilles d'icônes */
    --bord:         #e6ecf9;
    --bord-champ:   #e3eafb;
    --bord-hero:    #eaeffb;
    --carte:        #f7f9ff;
    --ombre:        0 10px 30px rgba(20, 50, 110, .07);
    --ombre-survol: 0 8px 20px rgba(20, 50, 110, .07);

    background: #fff;
    color: var(--encre);
    font-family: Figtree, "Helvetica Neue", Helvetica, sans-serif;
    -webkit-font-smoothing: antialiased;
}

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

/* La largeur de la maquette. 1440 px, gouttière de 40 px. */
.dm-wrap { max-width: 1440px; margin: 0 auto; padding-left: 40px; padding-right: 40px; }

.dm h1, .dm h2, .dm h3 { margin: 0; letter-spacing: -.02em; }
.dm p { margin: 0; }

/* ── SOUS-NAVIGATION ET PANIER ────────────────────────────────────────────
   Reprise de /service/vps-ssd : c'est le parcours que le client a demandé
   pour toutes les pages de vente. Les noms de classes restent en `dm-` pour
   que les deux pages puissent diverger sans se marcher dessus. */

/* Repris trait pour trait de /service/vps-ssd : le client veut la même barre
   sur toutes les pages de vente. Les valeurs viennent de vps-ssd-style.css,
   elles ne sont pas réinventées « à peu près ». */
.dm-sousnav {
    position: relative; z-index: 30;
    background: #fff;
    border-bottom: 1px solid var(--bord);
}

/* COLLÉE SOUS LA BARRE DU SITE, ET NON À `top: 0`. Elle collait bien, mais à
   zéro pixel — c'est-à-dire DERRIÈRE la barre (z-index 9999), qui la cachait
   entièrement dès le premier défilement. Personne ne la voyait donc coller ;
   le 27/09/2026, avec le bandeau du personnel collé sous la barre, Dorian l'a
   vue disparaître dessous.

   Elle colle maintenant sous les deux : la hauteur de la barre (`--barre-h`)
   plus celle du bandeau du personnel quand il y en a un (`--bandeau-personnel-h`,
   zéro sinon) — les deux viennent de includes/header.css et de header.js.

   AU-DESSUS DE 992 px SEULEMENT, comme la barre et le bandeau : en dessous, le
   gabarit pose `overflow-x: hidden` sur <body> (fp-responsive.css) et plus rien
   ne colle. Un `top` sur l'élément en `position: relative` le DÉCALERAIT.

   LES CIBLES DE LA PAGE S'ARRÊTENT SOUS ELLE : la réserve des ancres
   (`scroll-padding-top` sur <html>) ne compte que la barre et le bandeau, et
   « Extensions », « Transfert », « Tarifs » ou les résultats d'une recherche
   atterriraient sous cette barre-ci. 53 px, c'est sa hauteur : 52 de rangée,
   1 de filet. */
@media (min-width: 992px) {
    .dm-sousnav {
        position: sticky;
        top: calc(var(--barre-h, 0px) + var(--bandeau-personnel-h, 0px));
    }
    .dm section[id] { scroll-margin-top: 53px; }
}

/* LA BARRE DÉFILE PLUTÔT QUE DE SE REPLIER. Sur téléphone, quatre pilules et
   un panier ne tiennent pas en 375 px : les replier sur deux lignes ferait
   sauter la hauteur de la barre collante et décalerait tout le contenu sous
   elle. Un défilement horizontal, barre masquée, garde une hauteur fixe.
   `data-fpr-garder` dans la vue empêche fp-responsive de l'enrouler lui-même. */
.dm-sousnav-rang {
    display: flex; align-items: center; gap: 8px;
    min-height: 52px; font-size: 14px;
    overflow-x: auto; overflow-y: hidden; scrollbar-width: none;
}
.dm-sousnav-rang::-webkit-scrollbar { display: none; }

.dm-sousnav-titre {
    margin-right: 12px; font-weight: 800; white-space: nowrap;
    color: var(--encre);
}

.dm-sousnav-lien {
    flex-shrink: 0; white-space: nowrap;
    padding: 6px 13px; border: 1px solid var(--bord); border-radius: 999px;
    color: var(--texte); text-decoration: none;
    transition: .2s ease;
}
/* `:focus-visible` autant que `:hover` — le CDN Bootstrap impose sinon un
   a:focus bleu souligné qui jure avec la pilule. */
.dm-sousnav-lien:hover,
.dm-sousnav-lien:focus-visible {
    border-color: #b8c9e8; color: var(--bleu); text-decoration: none;
}

/* `margin-left:auto` pousse le panier à droite sans conteneur supplémentaire. */
.dm-panier-btn {
    margin-left: auto; flex-shrink: 0;
    display: inline-flex; align-items: center; gap: 9px;
    background: #fff; border: 1px solid var(--bord); color: var(--encre);
    font-family: inherit; font-size: 14px; font-weight: 600;
    padding: 6px 14px; border-radius: 999px; cursor: pointer;
    transition: background .15s, color .15s, border-color .15s;
}
.dm-panier-btn:hover { background: var(--bleu); border-color: var(--bleu); color: #fff; }

.dm-panier-compte {
    display: grid; place-items: center; min-width: 21px; height: 21px;
    padding: 0 6px; border-radius: 999px;
    background: var(--bleu-clair); color: var(--bleu);
    font-size: 12px; font-weight: 800; font-variant-numeric: tabular-nums;
}
.dm-panier-btn:hover .dm-panier-compte { background: #fff; color: var(--bleu); }

/* ── HERO ─────────────────────────────────────────────────────────────── */

.dm-hero {
    position: relative; overflow: hidden;
    background: linear-gradient(180deg, #fdfeff 0%, #f4f7ff 100%);
    border-bottom: 1px solid var(--bord-hero);
}

.dm-hero-inner { position: relative; padding-top: 64px; padding-bottom: 76px; }

/* Avec l'image en fond, le hero respire un peu plus : quelques pixels de plus
   en haut et en bas laissent voir les ondes qui passent sous le texte. Sans
   image, la hauteur d'origine est conservée — il n'y a rien à faire respirer
   au-dessus d'un dégradé uni. */
.dm-hero--image .dm-hero-inner { padding-top: 78px; padding-bottom: 92px; }

/* ── LE DÉCOR, DEUX OBJETS DIFFÉRENTS ─────────────────────────────────────
   `dm-hero-fond` cadre la photo fournie par le client ; `dm-hero-globe` pose
   le dessin de repli. Ils ne partagent aucune règle, volontairement : un
   `object-fit` n'a pas de sens sur un SVG en ligne, et une largeur en `vw` en
   a encore moins sur un fond bord à bord. */

/* LA PHOTO — BORD À BORD, CADRÉE SUR LE GLOBE.
   Le globe occupe le tiers droit de l'image. `object-position: right 38%` est
   ce qui le garde entier quand la fenêtre change de proportions : un cadrage
   centré le couperait en deux à l'horizontale sur un écran large, et le
   décentrerait vers le bas sur un hero court.
   `pointer-events:none` pour qu'il n'intercepte jamais un clic sur le champ
   de recherche, qui le recouvre. */
.dm-hero-fond {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover; object-position: right 38%;
    pointer-events: none; user-select: none;
}

/* LE VOILE, ET POURQUOI IL N'EST PAS FACULTATIF.
   Le titre est encre marine et l'image est presque blanche à gauche : à large
   fenêtre, elle serait lisible telle quelle. Mais `cover` RECADRE — plus la
   fenêtre est étroite, plus le globe avance vers la gauche, et il finit sous
   le texte. Le dégradé diagonal garantit un fond propre sous la colonne de
   texte à TOUTE largeur, tout en s'effaçant complètement à droite, là où le
   globe doit rester net. Sa pente (100deg) suit la courbe des ondes.

   LE SECOND DÉGRADÉ FOND LE BAS VERS LE BLANC : la section suivante est
   blanche, et l'image s'y arrêtait sur une ligne horizontale franche — une
   photo posée dans un cadre, pas un fond. Il ne commence qu'à 80 %, sous les
   pastilles, pour ne pas les délaver.

   L'ORDRE COMPTE : le premier listé est celui du dessus, donc la fonte passe
   par-dessus le voile diagonal. L'inverse laisserait le voile repeindre le
   bord, et le raccord redeviendrait net. */
.dm-hero--image::after {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background:
        linear-gradient(180deg,
            rgba(255, 255, 255, 0) 80%,
            rgba(255, 255, 255, .45) 92%,
            rgba(255, 255, 255, .88) 100%),
        linear-gradient(100deg,
            rgba(255, 255, 255, .92) 0%,
            rgba(255, 255, 255, .74) 28%,
            rgba(255, 255, 255, .30) 50%,
            rgba(255, 255, 255, 0) 68%);
}

/* SANS CE z-index, LE VOILE PASSE PAR-DESSUS LE TITRE.
   `::after` compte comme le dernier enfant : entre deux éléments positionnés
   sans z-index, c'est l'ordre du balisage qui tranche, et le voile est
   toujours le dernier. Il délaverait le texte qu'il est censé servir. */
.dm-hero--image .dm-hero-inner { z-index: 1; }

/* LE DESSIN DE REPLI — inchangé, et il doit le rester : c'est ce que la page
   affiche si le fichier image disparaît du serveur. `pointer-events:none`
   pour qu'il n'intercepte jamais un clic sur le champ de recherche. */
.dm-hero-globe {
    position: absolute; right: -60px; top: 10px;
    width: min(52vw, 760px); height: auto;
    pointer-events: none; user-select: none;
}

/* Il porte ses propres dégradés : il ne reçoit donc PAS de teinte, seulement
   un voile léger pour qu'il reste un décor et ne dispute pas la lecture au
   titre. Le `.13` de la version en fil de fer l'aurait effacé. */
.dm-hero-globe--trace { opacity: .72; }

.dm-titre {
    font-size: clamp(40px, 5.2vw, 68px);
    line-height: 1.04; letter-spacing: -.035em; font-weight: 800;
    color: var(--encre); max-width: 12ch; text-wrap: balance;
}

.dm-sous-titre { margin-top: 18px; font-size: 18px; color: var(--texte); font-weight: 500; }

/* Le champ de recherche. `min-width:0` sur l'input est ce qui l'empêche de
   déborder de son conteneur flex sur les petits écrans — sans lui, la largeur
   intrinsèque du champ gagne et le bouton sort de la carte. */
.dm-recherche {
    display: flex; align-items: center;
    margin-top: 30px; max-width: 530px;
    background: #fff; border: 1px solid var(--bord-champ); border-radius: 12px;
    box-shadow: var(--ombre);
    padding: 8px 8px 8px 16px; gap: 10px;
}

.dm-recherche svg { flex: none; }

.dm-recherche input {
    flex: 1; min-width: 0;
    border: 0; outline: none; background: transparent;
    font-family: inherit; font-size: 16.5px; color: var(--encre);
    padding: 12px 0;
}
.dm-recherche input::placeholder { color: #a6b2c9; }

.dm-btn-chercher {
    border: 0; background: var(--bleu); color: #fff;
    font-family: inherit; font-size: 15.5px; font-weight: 600;
    padding: 14px 24px; border-radius: 9px; cursor: pointer;
    transition: background .15s;
}
.dm-btn-chercher:hover { background: var(--bleu-fonce); }
.dm-btn-chercher:disabled { opacity: .6; cursor: default; }

/* ── LES QUATRE PASTILLES DU HERO ──────────────────────────────────────────
   D'après l'image fournie par le client : de vraies pastilles blanches à
   ombre douce, et non de simples puces alignées. */

.dm-hero-points {
    display: flex; flex-wrap: wrap; align-items: center;
    gap: 10px; margin-top: 30px;
}

.dm-hero-point {
    display: flex; align-items: center; gap: 12px;
    background: #fff; border-radius: 999px;
    padding: 9px 22px 9px 9px;
    box-shadow: 0 2px 5px rgba(20, 50, 110, .05), 0 10px 26px rgba(20, 50, 110, .07);
}

.dm-hero-point span:last-child {
    font-size: 15px; font-weight: 500; color: var(--encre);
    white-space: nowrap;
}

/* Le point de séparation, en CSS et non dans le balisage : un lecteur d'écran
   n'a pas à annoncer « point » entre chaque avantage. `:last-child` le retire
   du dernier, et il disparaît quand la rangée se replie (voir la requête
   média), où il flotterait en fin de ligne. */
.dm-hero-point:not(:last-child)::after {
    content: ""; flex: none;
    width: 3px; height: 3px; border-radius: 50%;
    background: #c3ccdd;
    margin-left: 10px; margin-right: -12px;
}

/* La pastille ronde des icônes, partagée par le hero et « pourquoi nous
   choisir ». `flex:none` évite qu'elle s'écrase quand le texte est long. */
.dm-pastille-ico {
    display: grid; place-items: center; flex: none;
    width: 42px; height: 42px; border-radius: 50%;
    background: var(--bleu-clair);
}
.dm-pastille-ico--grande { width: 56px; height: 56px; }

/* ── SECTIONS ─────────────────────────────────────────────────────────── */

.dm-section { padding-top: 44px; }
.dm-section--serre { padding-top: 40px; }
.dm-section--fin { padding-bottom: 56px; }

.dm-h2 { margin-bottom: 16px; font-size: 20px; font-weight: 700; color: var(--encre); }

/* ── RÉSULTATS DE RECHERCHE ───────────────────────────────────────────── */

.dm-resultats { padding-top: 32px; }

.dm-resultats-tete {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 16px; margin-bottom: 14px;
}
.dm-resume { font-size: 13px; font-weight: 600; color: var(--texte-faible); }

.dm-carte-liste { display: flex; flex-direction: column; gap: 10px; }

.dm-res-ligne {
    display: flex; align-items: center; gap: 18px;
    background: #fff; border: 1px solid var(--bord); border-radius: 12px;
    padding: 16px 18px;
}

.dm-res-nom { flex: 1 1 auto; min-width: 0; font-size: 17px; font-weight: 700; color: var(--encre); }
.dm-res-nom span { color: var(--bleu); }

.dm-pastille {
    flex: none; font-size: 11.5px; font-weight: 700;
    letter-spacing: .04em; text-transform: uppercase;
    padding: 5px 10px; border-radius: 999px;
}
.dm-dispo { color: #047857; background: rgba(4, 120, 87, .08); border: 1px solid rgba(4, 120, 87, .2); }
.dm-pris  { color: var(--texte-faible); background: #fff; border: 1px solid var(--bord); }

.dm-res-prix { flex: none; text-align: right; min-width: 150px; }
.dm-res-prix-val { font-size: 15.5px; font-weight: 800; color: var(--encre); }
.dm-res-prix-val span { font-size: 12.5px; font-weight: 500; color: var(--texte-faible); }
.dm-res-renouv { margin-top: 3px; font-size: 12px; font-weight: 500; color: var(--texte-faible); }

.dm-res-btn {
    flex: none; border: 0; background: var(--bleu); color: #fff;
    font-family: inherit; font-size: 14.5px; font-weight: 600;
    padding: 11px 20px; border-radius: 9px; cursor: pointer;
    transition: background .15s;
}
.dm-res-btn:hover { background: var(--bleu-fonce); }
.dm-res-btn-ok { background: rgba(4, 120, 87, .1); color: #047857; }
.dm-res-btn-ok:hover { background: rgba(4, 120, 87, .16); }
.dm-res-btn-off {
    background: #fff; border: 1px solid var(--bord);
    color: var(--texte-faible); cursor: default;
}
.dm-res-btn-off:hover { background: #fff; }

.dm-etat { padding: 28px 18px; text-align: center; font-size: 14.5px; color: var(--texte); }
.dm-etat-err { color: #b91c1c; }

/* ── EXTENSIONS POPULAIRES ────────────────────────────────────────────── */

/* PIÈGE CONNU : fp-responsive replie toute grille dont une piste fait moins de
   110 px. Le minimum de 150 px passe, mais la marge est mince — d'où le
   `data-fpr-garder` posé sur le conteneur dans la vue. */
.dm-ext-grille {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 16px;
}

.dm-ext {
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    background: #fff; border: 1px solid var(--bord); border-radius: 12px;
    padding: 20px 12px; cursor: pointer; font-family: inherit;
    transition: border-color .15s, box-shadow .15s;
}
.dm-ext:hover { border-color: var(--bleu); box-shadow: var(--ombre-survol); }
.dm-ext-nom { font-size: 19px; font-weight: 700; color: var(--encre); }
.dm-ext-prix { font-size: 12.5px; font-weight: 500; color: var(--texte-faible); }

/* ── POURQUOI NOUS CHOISIR ────────────────────────────────────────────── */

.dm-atouts { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; }

.dm-atout {
    display: flex; align-items: center; gap: 20px;
    background: #fff; border: 1px solid var(--bord); border-radius: 14px;
    padding: 24px 26px;
}
.dm-atout h3 { margin-bottom: 6px; font-size: 17px; font-weight: 700; color: var(--encre); }
.dm-atout p { font-size: 14.5px; line-height: 1.5; color: var(--texte); }

/* ── TRANSFERT ────────────────────────────────────────────────────────── */

.dm-transfert {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 36px; align-items: center;
    background: var(--carte); border: 1px solid var(--bord); border-radius: 16px;
    overflow: hidden;
}

/* `min-height` ET `height:100%` : sans la première, une colonne plus courte
   que sa voisine laisse une bande de fond nue sous l'image. */
.dm-transfert img { width: 100%; height: 100%; min-height: 300px; object-fit: cover; display: block; }

.dm-transfert-texte { padding: 34px 40px 34px 4px; }

.dm-sur-titre {
    font-size: 12.5px; font-weight: 600; letter-spacing: .08em;
    text-transform: uppercase; color: var(--bleu);
}
.dm-transfert-texte h3 { margin: 10px 0; font-size: 26px; font-weight: 700; color: var(--encre); }
.dm-transfert-texte > p { margin-bottom: 18px; font-size: 15.5px; line-height: 1.6; color: var(--texte); max-width: 46ch; }

.dm-etapes { display: flex; flex-direction: column; gap: 10px; margin-bottom: 22px; }
.dm-etape { display: flex; gap: 12px; align-items: baseline; }
.dm-etape-num {
    flex: none; display: grid; place-items: center;
    width: 22px; height: 22px; border-radius: 50%;
    background: var(--bleu-clair); color: var(--bleu);
    font-size: 12px; font-weight: 700;
}
.dm-etape span:last-child { font-size: 14.5px; color: var(--texte-fort); }

.dm-btn-plein {
    display: inline-block; background: var(--bleu); color: #fff;
    font-size: 15px; font-weight: 600; padding: 13px 22px;
    border-radius: 9px; text-decoration: none; transition: background .15s;
}
.dm-btn-plein:hover,
.dm-btn-plein:focus-visible { background: var(--bleu-fonce); color: #fff; text-decoration: none; }

/* ── TABLEAU DES TARIFS ───────────────────────────────────────────────── */

/* IL N'EST PAS DANS LA MAQUETTE, ET IL RESTE. La maquette montre six
   extensions vedettes ; le tableau complet est la seule page où un client lit
   le prix de RENOUVELLEMENT avant d'acheter. Le retirer aurait été une perte
   de transparence que personne n'a demandée. */
.dm-tarifs-cadre {
    border: 1px solid var(--bord); border-radius: 14px; overflow: hidden; background: #fff;
}
.dm-tarifs-defile { overflow-x: auto; }
.dm-tarifs { width: 100%; border-collapse: collapse; min-width: 640px; }

.dm-tarifs th {
    text-align: left; font-size: 11.5px; font-weight: 700;
    letter-spacing: .06em; text-transform: uppercase; color: var(--texte-faible);
    padding: 14px 20px; background: var(--carte); border-bottom: 1px solid var(--bord);
    white-space: nowrap;
}
.dm-tarifs td { padding: 14px 20px; font-size: 14.5px; color: var(--texte-fort); border-bottom: 1px solid var(--bord); }
.dm-tarifs tr:last-child td { border-bottom: 0; }
.dm-tarifs tbody tr:hover { background: #fbfcff; }

.dm-tarifs-ext { font-size: 15.5px; font-weight: 700; color: var(--encre); }
.dm-badge-pop {
    margin-left: 8px; font-size: 10.5px; font-weight: 700;
    letter-spacing: .05em; text-transform: uppercase;
    color: var(--bleu); background: var(--bleu-clair);
    padding: 3px 7px; border-radius: 999px; vertical-align: middle;
}
.dm-tarifs-note { margin-top: 12px; font-size: 13px; color: var(--texte-faible); }

.dm-tarifs-btn {
    border: 1px solid var(--bord); background: #fff; color: var(--bleu);
    font-family: inherit; font-size: 13.5px; font-weight: 600;
    padding: 8px 14px; border-radius: 8px; cursor: pointer; white-space: nowrap;
    transition: background .15s, color .15s, border-color .15s;
}
.dm-tarifs-btn:hover { background: var(--bleu); border-color: var(--bleu); color: #fff; }

/* ── FAQ ──────────────────────────────────────────────────────────────── */

.dm-faq { display: flex; flex-direction: column; gap: 10px; }

.dm-faq-item { background: #fff; border: 1px solid var(--bord); border-radius: 10px; overflow: hidden; }

.dm-faq-q {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    width: 100%; background: transparent; border: 0; cursor: pointer;
    font-family: inherit; text-align: left; padding: 15px 18px;
    font-size: 14.5px; font-weight: 600; color: var(--encre);
}

.dm-faq-caret { flex: none; color: #8b99b6; font-size: 13px; transition: transform .18s; }
.dm-faq-item[data-ouvert="1"] .dm-faq-caret { transform: rotate(180deg); }

.dm-faq-r { padding: 0 18px 18px; font-size: 14.5px; line-height: 1.65; color: var(--texte); max-width: 80ch; }
.dm-faq-item:not([data-ouvert="1"]) .dm-faq-r { display: none; }

/* ── BANDEAU FONCÉ ────────────────────────────────────────────────────── */

.dm-bandeau {
    position: relative; overflow: hidden;
    display: flex; flex-wrap: wrap; align-items: center; gap: 24px;
    background: linear-gradient(100deg, #0a1a3c 0%, #102a5c 100%);
    border-radius: 16px; padding: 34px 40px;
}
.dm-bandeau-ico {
    display: grid; place-items: center; flex: none;
    width: 58px; height: 58px; border-radius: 50%;
    background: rgba(255, 255, 255, .09);
}
.dm-bandeau-texte { flex: 1; min-width: 260px; }
.dm-bandeau-texte h3 { margin-bottom: 6px; font-size: 25px; font-weight: 700; color: #fff; }
.dm-bandeau-texte p { font-size: 15.5px; color: #b8c8e8; }

.dm-bandeau-btn {
    display: inline-flex; align-items: center; gap: 10px;
    background: var(--bleu); color: #fff;
    font-size: 15.5px; font-weight: 600; padding: 14px 24px;
    border-radius: 9px; text-decoration: none; transition: background .15s;
}
.dm-bandeau-btn:hover,
.dm-bandeau-btn:focus-visible { background: #3b85ff; color: #fff; text-decoration: none; }

/* ── LE TIROIR DU PANIER ──────────────────────────────────────────────── */

/* 10000 ET 10001, COMME SUR /service/vps-ssd, ET NON 40 ET 50. La barre du
   site colle à 9999 : le tiroir, fixé en haut de la fenêtre, passait SOUS
   elle, et son en-tête — titre et bouton de fermeture — était caché derrière.
   Le bandeau du personnel qui colle sous la barre depuis le 27/09/2026 (9998)
   en aurait caché autant de plus. Le voile couvre désormais la barre aussi :
   c'est ce qu'on attend d'un panneau qui prend la main. */
.dm-voile {
    position: fixed; inset: 0; z-index: 10000;
    background: rgba(10, 26, 60, .38);
    opacity: 0; visibility: hidden; transition: opacity .2s, visibility .2s;
}
.dm[data-panier="ouvert"] .dm-voile { opacity: 1; visibility: visible; }

.dm-tiroir {
    position: fixed; top: 0; right: 0; bottom: 0; z-index: 10001;
    width: min(420px, 100vw);
    display: flex; flex-direction: column;
    background: #fff; border-left: 1px solid var(--bord);
    box-shadow: -18px 0 40px rgba(20, 50, 110, .12);
    visibility: hidden; transform: translateX(100%);
    transition: transform .24s ease, visibility .24s;
}
.dm[data-panier="ouvert"] .dm-tiroir { visibility: visible; transform: translateX(0); }

.dm-tiroir-tete {
    display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
    padding: 20px 24px; border-bottom: 1px solid var(--bord);
}
.dm-tiroir-tete h2 { font-size: 22px; font-weight: 800; color: var(--encre); }
.dm-tiroir-tete p { margin-top: 4px; font-size: 13px; color: var(--texte-faible); }

.dm-tiroir-fermer {
    flex: none; width: 34px; height: 34px; border-radius: 9px;
    border: 0; background: #eef2fb; color: var(--encre);
    font-size: 20px; line-height: 1; cursor: pointer;
}
.dm-tiroir-fermer:hover { background: #e2e8f0; }

.dm-tiroir-corps { flex: 1; min-height: 80px; overflow-y: auto; padding: 20px 24px; }

.dm-tiroir-vide { display: grid; place-content: center; height: 100%; text-align: center; color: var(--texte-faible); }
.dm-tiroir-vide strong { display: block; margin-bottom: 4px; color: var(--encre); font-size: 17px; }

.dm-ligne { padding: 16px; border: 1px solid var(--bord); border-radius: 16px; }
.dm-ligne + .dm-ligne { margin-top: 12px; }
.dm-ligne-tete { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 16px; }
.dm-ligne-tete strong { font-weight: 800; color: var(--encre); }
.dm-ligne-specs { margin-top: 4px; font-size: 12px; line-height: 1.5; color: var(--texte-faible); }
.dm-ligne-prix { font-weight: 800; white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--encre); }

.dm-ligne-bas { display: flex; align-items: center; justify-content: space-between; margin-top: 12px; }

.dm-qte { display: inline-flex; align-items: center; gap: 2px; border: 1px solid var(--bord); border-radius: 9px; overflow: hidden; }
.dm-qte button {
    width: 30px; height: 30px; border: 0; background: #fff;
    color: var(--encre); font-size: 16px; line-height: 1; cursor: pointer;
}
.dm-qte button:hover:not(:disabled) { background: var(--bleu-clair); color: var(--bleu); }
.dm-qte button:disabled { color: #c3ccdd; cursor: default; }
.dm-qte-val { min-width: 26px; text-align: center; font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; }

.dm-retirer {
    border: 0; background: transparent; color: var(--texte-faible);
    font-family: inherit; font-size: 13px; cursor: pointer; padding: 4px 2px;
}
.dm-retirer:hover { color: #b91c1c; }

.dm-tiroir-pied { padding: 18px 24px 22px; border-top: 1px solid var(--bord); }
.dm-tiroir-total { display: flex; align-items: baseline; justify-content: space-between; font-size: 15px; color: var(--texte-fort); }
.dm-tiroir-total strong { font-size: 21px; font-weight: 800; color: var(--encre); font-variant-numeric: tabular-nums; }
.dm-tiroir-taxes { margin-top: 6px; font-size: 12.5px; color: var(--texte-faible); }
.dm-tiroir-erreur { margin-top: 8px; font-size: 13px; color: #b91c1c; }

.dm-tiroir-pied .dm-btn-plein { display: block; margin-top: 14px; text-align: center; }

/* ── TÉLÉPHONE ────────────────────────────────────────────────────────── */

@media (max-width: 900px) {
    .dm-wrap { padding-left: 20px; padding-right: 20px; }
    .dm-hero-inner { padding-top: 44px; padding-bottom: 52px; }

    /* CETTE LIGNE DOIT ÊTRE AUSSI SPÉCIFIQUE QUE CELLE QU'ELLE CORRIGE.
       `.dm-hero--image .dm-hero-inner` plus haut compte deux classes ; la
       ligne juste au-dessus n'en compte qu'une. Écrite `.dm-hero-inner` seule
       ici, elle perdrait — être dans une requête de média ne donne aucun
       poids — et le téléphone garderait les marges du bureau. */
    .dm-hero--image .dm-hero-inner { padding-top: 48px; padding-bottom: 58px; }

    /* Le dessin de repli est décoratif : sous 900 px il passe derrière le
       texte et le rend illisible. On le retire plutôt que de le rétrécir. */
    .dm-hero-globe { display: none; }

    /* LA PHOTO, ELLE, RESTE — mais le voile change de sens.
       Le dessin de repli n'avait rien à offrir en petit ; la photo, si. À
       cette largeur il n'y a plus de « colonne de texte à gauche » : le texte
       occupe toute la largeur, donc un voile en diagonale ne protège plus
       rien. Il devient vertical et plus dense, et le globe se lit alors comme
       une texture derrière le titre plutôt que comme un obstacle.
       Le cadrage descend légèrement à droite pour garder la sphère entière
       dans un format haut. */
    .dm-hero-fond { object-position: 76% 34%; }

    /* LE VOILE SUIT CE QU'IL Y A DESSOUS, PAS UNE VALEUR UNIFORME.
       Il reste dense en haut, là où le titre et surtout le sous-titre (gris
       moyen, 18 px) reposent directement sur l'image. Il s'allège à partir de
       55 %, où il n'y a plus que le champ de recherche et les pastilles —
       des cartes blanches opaques, que l'image ne peut pas gêner. C'est là
       que le globe redevient visible, et c'est tout l'intérêt de garder
       l'image sur téléphone. Il se referme sur la fin pour rejoindre la
       section blanche qui suit. */
    .dm-hero--image::after {
        background: linear-gradient(180deg,
            rgba(255, 255, 255, .88) 0%,
            rgba(255, 255, 255, .80) 32%,
            rgba(255, 255, 255, .58) 62%,
            rgba(255, 255, 255, .55) 84%,
            rgba(255, 255, 255, .90) 100%);
    }

    .dm-titre { max-width: none; }
    .dm-transfert-texte { padding: 28px 24px; }
    .dm-bandeau { padding: 26px 24px; }

    /* LES LIENS RESTENT, contrairement à la version précédente qui les
       masquait sous 900 px. La barre défile maintenant : les cacher privait le
       téléphone d'une navigation qui tient très bien dans un défilement. */
}

@media (max-width: 620px) {
    /* La ligne de résultat passe en deux rangs : nom + pastille, puis prix +
       bouton. En une seule rangée, le bouton finissait à 40 px de large. */
    .dm-res-ligne { flex-wrap: wrap; gap: 12px; }
    .dm-res-nom { flex: 1 1 100%; }
    .dm-res-prix { flex: 1 1 auto; text-align: left; min-width: 0; }
    .dm-res-btn, .dm-res-btn-off { flex: none; }

    .dm-recherche { flex-wrap: wrap; padding: 10px; }
    .dm-recherche input { flex: 1 1 100%; padding: 6px 4px; }
    .dm-btn-chercher { flex: 1 1 100%; }

    /* Les pastilles s'empilent. Le point de séparation DOIT partir : entre
       deux lignes il flotte en fin de rangée, où il ne sépare plus rien et
       ressemble à une coquille. */
    .dm-hero-points { gap: 8px; }
    .dm-hero-point { width: 100%; padding: 8px 18px 8px 8px; }
    .dm-hero-point:not(:last-child)::after { display: none; }
    .dm-hero-point span:last-child { white-space: normal; }
}