/* ════════════════════════════════════════════════════════════════════
   CBR-CLOUD — VPS
   Transcription de la maquette « VPS FastPanel ». Fond clair #eceff1,
   accent cyan #06b6d4, titres et texte en Montserrat — la police que le
   gabarit charge déjà.

   UNE SEULE FAMILLE. La maquette proposait un sélecteur à trois familles
   (SSD NVMe, HDD, Windows Server) et un tableau qui les comparait. Ni le HDD
   ni le Windows n'existent au catalogue : ce ne sont que deux libellés de
   menu marqués « prochainement », et les prix que la maquette leur donnait
   sont annotés dans sa propre source comme « calés sur les offres du marché ».
   Les afficher aurait été vendre deux produits inexistants. Le sélecteur et
   le comparatif sont donc retirés, et la page ne parle que du VPS SSD, seul
   produit réellement au catalogue.

   PAS DE BASCULE MENSUEL/ANNUEL non plus. La maquette affichait −15 % à
   l'année ; le panier, lui, n'ajoute qu'un produit au prix du catalogue. Une
   remise affichée que la commande n'applique pas est un prix faux.

   Le gabarit du site est sombre : comme sur l'accueil et /service/web, le
   fond est neutralisé ici et seuls le hero, la bande « infrastructure » et
   le pied de page restent sombres.
════════════════════════════════════════════════════════════════════ */

/* ── Fond global : la page passe au clair ── */
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; }

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

.vps {
    font-family: 'Montserrat', system-ui, sans-serif;
    color: #0f172a;
    background: #eceff1;
    -webkit-font-smoothing: antialiased;

    --ink:      #0f172a;
    --ardoise:  #1e293b;
    --muted:    rgba(15, 23, 42, .55);
    --muted-2:  rgba(15, 23, 42, .42);
    --line:     rgba(15, 23, 42, .16);
    --line-2:   rgba(15, 23, 42, .10);
    --cyan:     #06b6d4;
    --cyan-c:   #22d3ee;   /* le cyan clair, réservé aux fonds sombres */
    --cyan-f:   #0891b2;   /* le cyan foncé, pour le texte sur fond clair */
    --cyan-ff:  #0e7490;
    --encre-b:  #08191d;   /* l'encre des boutons cyan pleins */
    --nuit:     #0b1e33;

    /* La maquette est cadrée à 1280 : contenu à 1240 et gouttière de 40px. */
    --maxw:     1240px;
    --gout:     40px;

    /* Le terminal du hero, dans la police de la maquette. La pile système suit
       en repli : si Google Fonts ne répond pas, le bloc reste à chasse fixe au
       lieu de retomber en Montserrat, où l'alignement des colonnes s'effondre. */
    --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
}
.vps a { text-decoration: none; }
.vps p, .vps a, .vps span, .vps li, .vps button,
.vps h1, .vps h2, .vps h3 { font-family: 'Montserrat', system-ui, sans-serif; }

.vps-wrap { max-width: var(--maxw); margin: 0 auto; padding-left: var(--gout); padding-right: var(--gout); }

/* Intertitre de section. */
.vps-lbl {
    font-size: 11px; font-weight: 700; letter-spacing: 2.4px;
    text-transform: uppercase; color: var(--cyan-f); margin: 0 0 12px;
}
.vps-h2 {
    font-size: clamp(24px, 2.6vw, 32px); font-weight: 800; letter-spacing: -.03em;
    line-height: 1.16; margin: 0 0 10px; color: var(--ink);
}
.vps-chapo { font-size: 13.5px; line-height: 1.6; color: rgba(15,23,42,.48); margin: 0; }

/* Boutons — deux seuls types, repris tels quels de la maquette. */
.vps-btn {
    display: inline-flex; align-items: center; gap: 9px;
    font-size: 15px; font-weight: 800;
    color: var(--encre-b); background: var(--cyan);
    padding: 15px 28px; border-radius: 9px; border: 0;
    box-shadow: 0 14px 34px -14px rgba(6,182,212,.7);
    transition: background .18s;
}
.vps-btn:hover { background: var(--cyan-c); color: var(--encre-b); }

.vps-btn-2 {
    display: inline-flex; align-items: center; gap: 9px;
    font-size: 15px; font-weight: 700;
    color: rgba(15,23,42,.7); background: rgba(15,23,42,.08);
    border: 1px solid rgba(15,23,42,.18);
    padding: 15px 28px; border-radius: 9px;
    transition: background .18s, color .18s;
}
.vps-btn-2:hover { background: rgba(15,23,42,.14); color: var(--ink); }

/* ════════════════════════════════════════════════════════════════════
   HERO
   Le dégradé descend du bleu nuit au fond de page en quinze arrêts : c'est
   ce qui évite la bande grise que donne un dégradé à deux couleurs sur
   300px de haut. Les valeurs sont celles de la maquette.
════════════════════════════════════════════════════════════════════ */
.vps-hero {
    background: linear-gradient(180deg,
        #0b1e33 0%, #0e2339 32%, #16304b 50%, #26445f 64%,
        #476479 76%, #71889b 86%, #a8b7c2 94%, #d5dce1 98%, #eceff1 100%);
    color: #f1f5f9;
}
.vps-hero-grille {
    display: flex; align-items: center; gap: 56px; flex-wrap: wrap;
    padding-top: 64px; padding-bottom: 300px;
}
.vps-hero-texte { flex: 1 1 440px; min-width: 0; }
.vps-hero h1 {
    font-size: clamp(28px, 3.1vw, 44px); font-weight: 800;
    letter-spacing: -.03em; line-height: 1.1; margin: 0 0 18px; color: #f1f5f9;
}
.vps-hero-sous {
    font-size: 15.5px; line-height: 1.7; color: rgba(255,255,255,.62);
    margin: 0 0 30px; max-width: 520px; text-wrap: pretty;
}
.vps-hero-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 30px; }
/* Le second bouton du hero est sur fond SOMBRE : il lui faut ses propres
   couleurs, celles de .vps-btn-2 sont calculées pour le fond clair. */
.vps-hero .vps-btn-2 {
    color: #f1f5f9; background: rgba(255,255,255,.07);
    border-color: rgba(255,255,255,.16);
}
.vps-hero .vps-btn-2:hover { background: rgba(255,255,255,.14); color: #fff; }

.vps-hero-points { display: flex; flex-wrap: wrap; gap: 12px 26px; }
.vps-hero-point {
    display: flex; align-items: center; gap: 9px;
    font-size: 13px; font-weight: 600; color: rgba(255,255,255,.55);
}
.vps-hero-point::before {
    content: ""; width: 6px; height: 6px; border-radius: 50%;
    background: var(--cyan-c); flex-shrink: 0;
}

/* ── Le terminal ──
   Décor, et rien d'autre : il ne se lit pas ligne à ligne, il dit « vous avez
   un vrai shell ». D'où l'aria-hidden dans le balisage. */
.vps-term {
    flex: 1 1 360px; min-width: 300px;
    border: 1px solid rgba(255,255,255,.14);
    background: rgba(8,20,32,.62); border-radius: 14px; overflow: hidden;
    box-shadow: 0 30px 70px -34px rgba(0,0,0,.8);
}
.vps-term-barre {
    display: flex; align-items: center; gap: 8px; padding: 11px 14px;
    border-bottom: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.04);
}
.vps-term-pastille { width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,.22); }
.vps-term-titre { margin-left: 8px; font-family: var(--mono); font-size: 11px; color: rgba(255,255,255,.4); }
.vps-term-corps {
    padding: 18px; font-family: var(--mono);
    font-size: 12px; line-height: 2; color: rgba(255,255,255,.72);
}
.vps-term-corps div { font-family: var(--mono); }
.vps-term-invite { color: var(--cyan-c); }
.vps-term-sortie { color: rgba(255,255,255,.5); }
.vps-term-ok { color: #34d399; }
.vps-term-saut { margin-top: 8px; }
/* Le curseur ne clignote pas : une animation infinie dans un décor tire l'œil
   hors du texte que la page veut faire lire. */
.vps-term-curseur { border-right: 6px solid var(--cyan-c); }

/* ════════════════════════════════════════════════════════════════════
   OFFRES
   Le hero descend 300px sous le pli : les cartes remontent DANS ce dégradé.
   C'est le montage de la maquette — la section n'a pas de marge haute, elle
   commence là où la précédente finit.
════════════════════════════════════════════════════════════════════ */
.vps-offres-tete {
    display: flex; align-items: flex-end; justify-content: space-between;
    gap: 28px; flex-wrap: wrap; margin-bottom: 22px;
}
.vps-offres-tete > div { max-width: 560px; }

/* ── La bascule mensuel / annuel ── */
.vps-bascule {
    display: flex; align-items: center; gap: 10px; padding: 5px;
    border: 1px solid var(--line); background: #fff; border-radius: 100px;
}
.vps-bascule-btn {
    cursor: pointer; font-size: 13px; font-weight: 700;
    padding: 9px 18px; border-radius: 100px; border: 0; white-space: nowrap;
    background: transparent; color: rgba(15,23,42,.5);
    transition: background .18s, color .18s;
}
.vps-bascule-btn[aria-pressed="true"] { background: var(--cyan); color: var(--encre-b); }
.vps-remise { font-weight: 700; opacity: .75; }

/* ── Le sélecteur de famille ──
   Ce sont des boutons et non des onglets ARIA : ils ne révèlent pas un panneau
   voisin, ils changent le contenu d'une même grille. `aria-pressed` dit l'état,
   ce qui suffit et reste juste si le script ne tourne pas. */
.vps-familles { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 26px; }
.vps-famille {
    flex: 1 1 240px; min-width: 0; cursor: pointer; text-align: left;
    padding: 16px 20px; border-radius: 14px;
    border: 1px solid var(--line); background: #fff; color: rgba(15,23,42,.68);
    box-shadow: 0 1px 2px rgba(15,23,42,.05);
    transition: border-color .2s, box-shadow .2s, background .2s;
}
.vps-famille[aria-pressed="true"] {
    border-color: rgba(6,182,212,.5); color: var(--ink);
    background: radial-gradient(ellipse 90% 130% at 0% 0%, rgba(6,182,212,.14), transparent 70%), #fff;
    box-shadow: 0 1px 2px rgba(15,23,42,.06), 0 14px 30px -20px rgba(6,182,212,.7);
}
.vps-famille-titre { display: block; font-size: 15px; font-weight: 800; letter-spacing: -.01em; margin-bottom: 4px; }
.vps-famille-accroche { display: block; font-size: 12px; font-weight: 600; line-height: 1.5; opacity: .62; }

/* ── Une famille à l'écran à la fois ──
   Les trois grilles sont RENDUES par le serveur et masquées en CSS, plutôt que
   construites en JavaScript au clic : le contenu des trois familles est alors
   dans la page — donc indexable et trouvable par la recherche du navigateur —
   et changer de famille ne coûte rien à afficher. */
.vps-grille-offres {
    display: none; grid-template-columns: repeat(auto-fit, minmax(min(100%, 238px), 1fr));
    gap: 14px; align-items: stretch;
}
.vps[data-famille="ssd"] .vps-grille-offres[data-famille="ssd"],
.vps[data-famille="hdd"] .vps-grille-offres[data-famille="hdd"],
.vps[data-famille="win"] .vps-grille-offres[data-famille="win"] { display: grid; }
.vps-carte {
    display: flex; flex-direction: column;
    border: 1px solid var(--line); border-radius: 16px; padding: 24px 22px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(15,23,42,.06), 0 10px 26px -18px rgba(15,23,42,.2);
}
/* La carte mise en avant. Le halo part du coin haut droit, comme la maquette. */
.vps-carte-vedette {
    border-color: rgba(6,182,212,.35);
    background: radial-gradient(ellipse 80% 100% at 100% 0%, rgba(6,182,212,.11), transparent 65%), #fff;
    box-shadow: 0 1px 2px rgba(15,23,42,.06), 0 18px 40px -22px rgba(6,182,212,.55);
}
.vps-pastille {
    align-self: flex-start;
    font-size: 9.5px; font-weight: 800; letter-spacing: .9px; text-transform: uppercase;
    padding: 4px 9px; border-radius: 100px; margin-bottom: 12px;
    color: var(--muted-2); background: rgba(15,23,42,.05); border: 1px solid rgba(15,23,42,.12);
}
.vps-pastille-vedette { color: var(--cyan-ff); background: rgba(6,182,212,.12); border-color: rgba(6,182,212,.28); }
.vps-carte h3 { font-size: 17px; font-weight: 800; letter-spacing: -.02em; margin: 0 0 4px; }
/* `min-height` sur l'usage : les intitulés du catalogue n'ont pas tous la même
   longueur, et sans ce plancher les prix des quatre cartes ne s'alignaient pas. */
.vps-carte-usage {
    font-size: 12px; line-height: 1.55; color: rgba(15,23,42,.45);
    margin: 0 0 18px; min-height: 37px;
}
.vps-prix { display: flex; align-items: flex-end; gap: 6px; margin-bottom: 4px; }
.vps-prix-val { font-size: 31px; font-weight: 800; letter-spacing: -.04em; line-height: 1; color: var(--ink); }
.vps-prix-per { font-size: 12.5px; font-weight: 600; color: rgba(15,23,42,.48); margin-bottom: 3px; }
.vps-mention { font-size: 11.5px; font-weight: 500; color: rgba(15,23,42,.42); margin: 0 0 18px; }

.vps-specs {
    display: flex; flex-direction: column; gap: 9px; padding: 14px 0;
    border-top: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2);
    margin-bottom: 14px;
}
.vps-spec { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.vps-spec-lbl {
    font-size: 11.5px; font-weight: 600; letter-spacing: .4px;
    text-transform: uppercase; color: rgba(15,23,42,.4);
}
.vps-spec-val { font-size: 13.5px; font-weight: 800; color: var(--ink); text-align: right; }

.vps-inclus { display: flex; flex-direction: column; gap: 8px; margin: 0 0 20px; padding: 0; list-style: none; }
.vps-inclus li {
    display: flex; align-items: flex-start; gap: 9px;
    font-size: 12.5px; line-height: 1.5; color: rgba(15,23,42,.6);
}
.vps-inclus li::before {
    content: "✓"; width: 15px; height: 15px; border-radius: 50%;
    background: rgba(6,182,212,.16); color: var(--cyan-ff);
    font-size: 9px; display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; margin-top: 2px;
}

/* `margin-top:auto` colle le bouton au bas de la carte : les cartes n'ont pas
   toutes le même nombre de lignes, et sans lui les boutons ne s'alignaient pas. */
.vps-carte-btn {
    width: 100%; cursor: pointer; font-size: 13.5px; font-weight: 800;
    padding: 13px 18px; border-radius: 9px; margin-top: auto;
    background: rgba(6,182,212,.1); border: 1px solid rgba(6,182,212,.24); color: var(--cyan-ff);
    transition: background .18s;
}
.vps-carte-btn:hover { background: rgba(6,182,212,.18); }
.vps-carte-vedette .vps-carte-btn { background: var(--cyan); border-color: rgba(6,182,212,.4); color: var(--encre-b); }
.vps-carte-vedette .vps-carte-btn:hover { background: var(--cyan-c); }
/* Indisponible : le bouton le DIT et ne se laisse pas cliquer. Un bouton grisé
   sans libellé laisse croire à une panne. */
.vps-carte-btn[disabled] {
    cursor: not-allowed; background: rgba(15,23,42,.05);
    border-color: rgba(15,23,42,.12); color: rgba(15,23,42,.38);
}
.vps-carte-btn[disabled]:hover { background: rgba(15,23,42,.05); }

/* Le plan retenu. Le vert n'est pas décoratif : il dit « c'est fait », là où le
   cyan de la carte en vedette dit « c'est celui qu'on conseille ». Deux messages
   différents, donc deux couleurs. */
.vps-carte-choisie { border-color: rgba(52,211,153,.45); box-shadow: 0 1px 2px rgba(15,23,42,.06), 0 18px 40px -22px rgba(52,211,153,.5); }
.vps-carte-choisie .vps-carte-btn,
.vps-carte-vedette.vps-carte-choisie .vps-carte-btn {
    background: rgba(52,211,153,.12); border-color: rgba(52,211,153,.35); color: #047857;
}

.vps-note { font-size: 11.5px; color: rgba(15,23,42,.4); margin: 14px 0 0; }

/* ════════════════════════════════════════════════════════════════════
   COMPARATIF
   Une grille et non un <table> : les quatre colonnes doivent pouvoir se
   réduire à deux sur téléphone, ce qu'un tableau ne sait pas faire sans
   casser l'association ligne/colonne.
════════════════════════════════════════════════════════════════════ */
.vps-comparatif-sect { padding-top: 70px; }
.vps-comparatif-tete { max-width: 600px; margin-bottom: 22px; }
.vps-comparatif {
    border: 1px solid var(--line); border-radius: 16px; overflow: hidden; background: #fff;
    box-shadow: 0 1px 2px rgba(15,23,42,.06), 0 8px 24px -16px rgba(15,23,42,.18);
}
.vps-cmp-entete, .vps-cmp-ligne, .vps-cmp-pied {
    display: grid; grid-template-columns: minmax(0,1.15fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr);
    gap: 12px; align-items: center; padding: 12px 22px;
}
.vps-cmp-entete {
    padding: 13px 22px; background: #eef1f3; border-bottom: 1px solid var(--line);
    font-size: 10px; font-weight: 700; letter-spacing: 1.3px; text-transform: uppercase; color: rgba(15,23,42,.4);
}
.vps-cmp-ligne { border-bottom: 1px solid var(--line-2); }
.vps-cmp-critere { font-size: 13px; font-weight: 700; color: var(--ardoise); }
.vps-cmp-val { font-size: 12.5px; font-weight: 500; color: var(--muted); }
/* La colonne SSD est la seule teintée : c'est la famille vendue. */
.vps-cmp-val.vps-cmp-ssd { font-weight: 600; color: var(--cyan-ff); }
.vps-cmp-entete .vps-cmp-ssd { color: var(--cyan-ff); }
.vps-cmp-pied { padding: 16px 22px; background: rgba(6,182,212,.07); }
.vps-cmp-pied .vps-cmp-critere { font-weight: 800; color: var(--ink); }
.vps-cmp-prix { font-size: 14px; font-weight: 800; color: rgba(15,23,42,.62); }
.vps-cmp-prix.vps-cmp-ssd { color: var(--cyan-ff); }

/* ════════════════════════════════════════════════════════════════════
   SYSTÈMES
════════════════════════════════════════════════════════════════════ */
.vps-os { padding-top: 70px; }
.vps-os-grille {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
    gap: 36px; align-items: center; margin-bottom: 28px;
}
.vps-os-titre { font-size: clamp(22px, 2.3vw, 28px); font-weight: 800; letter-spacing: -.03em; line-height: 1.2; margin: 0 0 14px; }
.vps-os-txt {
    font-size: clamp(17px, 1.6vw, 21px); font-weight: 500; line-height: 1.55;
    color: rgba(15,23,42,.6); margin: 0; max-width: 480px; text-wrap: pretty;
}
.vps-os-photo {
    border-radius: 18px; overflow: hidden; border: 1px solid var(--line);
    box-shadow: 0 1px 2px rgba(15,23,42,.06), 0 26px 56px -30px rgba(11,30,51,.7);
}
.vps-os-photo img { display: block; width: 100%; height: auto; }

/* Les pastilles défilent horizontalement plutôt que de passer à la ligne :
   sur une ligne elles se lisent comme une liste, empilées elles deviennent un
   bloc de texte. */
.vps-os-liste {
    display: none; flex-wrap: nowrap; gap: 10px; align-items: center;
    overflow-x: auto; padding-bottom: 4px;
}
.vps[data-famille="ssd"] .vps-os-liste[data-famille="ssd"],
.vps[data-famille="hdd"] .vps-os-liste[data-famille="hdd"],
.vps[data-famille="win"] .vps-os-liste[data-famille="win"] { display: flex; }

.vps-os-item {
    display: inline-flex; align-items: center; gap: 9px; flex: 0 0 auto;
    font-size: 12.5px; font-weight: 700; color: rgba(15,23,42,.68);
    background: #fff; border: 1px solid var(--line);
    padding: 10px 16px 10px 13px; border-radius: 100px;
    box-shadow: 0 1px 2px rgba(15,23,42,.05); white-space: nowrap;
}
/* Le logo du système, servi par cdn.simpleicons.org comme dans la maquette.
   L'URL arrive par la variable `--logo` posée sur l'élément : c'est la seule
   façon de laisser le gabarit choisir l'image sans écrire une règle par système.
   La pastille garde sa place même si le CDN ne répond pas — la largeur est
   réservée par la boîte, pas par l'image. */
.vps-os-item::before {
    content: ""; width: 18px; height: 18px; flex-shrink: 0;
    background-image: var(--logo);
    background-size: contain; background-repeat: no-repeat; background-position: center;
}

/* ════════════════════════════════════════════════════════════════════
   INFRASTRUCTURE — la bande sombre
   Le dégradé descend au bleu nuit puis remonte au fond de page : la bande
   est enchâssée dans la page claire, elle ne la coupe pas en deux.
════════════════════════════════════════════════════════════════════ */
.vps-infra {
    margin-top: 70px;
    background:
        radial-gradient(ellipse 60% 90% at 15% 30%, rgba(6,182,212,.16), transparent 60%),
        linear-gradient(180deg,
            #eceff1 0%, #d5dce1 6%, #a8b7c2 12%, #71889b 19%, #476479 26%,
            #26445f 34%, #16304b 44%, #0b1e33 52%, #0b1e33 66%, #16304b 74%,
            #26445f 81%, #476479 87%, #71889b 92%, #a8b7c2 96%, #d5dce1 98.5%, #eceff1 100%);
    color: #f1f5f9;
}
.vps-infra-inner { padding-top: 150px; padding-bottom: 130px; }
.vps-infra-tete {
    display: flex; align-items: flex-end; justify-content: space-between;
    gap: 32px; flex-wrap: wrap; margin-bottom: 52px;
}
.vps-infra-tete .vps-lbl { color: var(--cyan-c); }
.vps-infra-tete h2 { font-size: clamp(24px, 2.6vw, 34px); font-weight: 800; letter-spacing: -.03em; line-height: 1.14; margin: 0; color: #fff; }
.vps-infra-tete > div { max-width: 520px; }
.vps-infra-chapo { font-size: 13.5px; line-height: 1.7; color: rgba(255,255,255,.5); margin: 0; max-width: 340px; text-wrap: pretty; }

.vps-atouts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); column-gap: 48px; row-gap: 44px; }
/* Le filet de tête est un fond et non une bordure : il s'éteint vers la droite,
   ce qu'une bordure ne sait pas faire. */
.vps-atout {
    padding-top: 22px;
    background-image: linear-gradient(90deg, rgba(34,211,238,.75), rgba(255,255,255,.1));
    background-size: 100% 1px; background-repeat: no-repeat; background-position: top left;
}
.vps-atout h3 { font-size: 17px; font-weight: 800; letter-spacing: -.02em; margin: 0 0 10px; color: #fff; }
.vps-atout p { font-size: 13.5px; line-height: 1.75; color: rgba(255,255,255,.52); margin: 0; text-wrap: pretty; }

/* ════════════════════════════════════════════════════════════════════
   QUESTIONS
   <details>/<summary> et non un accordéon en JavaScript : le navigateur sait
   déjà ouvrir et fermer, annoncer l'état aux lecteurs d'écran et laisser la
   recherche du navigateur trouver le texte replié.
════════════════════════════════════════════════════════════════════ */
.vps-faq { padding-top: 70px; }
.vps-faq-tete { max-width: 560px; margin-bottom: 24px; }
.vps-faq-boite {
    border: 1px solid var(--line); border-radius: 16px; overflow: hidden; background: #fff;
    box-shadow: 0 1px 2px rgba(15,23,42,.06), 0 8px 24px -16px rgba(15,23,42,.18);
}
.vps-q { border-bottom: 1px solid rgba(15,23,42,.11); }
.vps-q:last-child { border-bottom: 0; }
.vps-q summary {
    cursor: pointer; list-style: none; padding: 18px 24px;
    display: flex; align-items: center; gap: 16px;
    font-size: 14.5px; font-weight: 700; color: var(--ardoise);
}
.vps-q summary::-webkit-details-marker { display: none; }
.vps-q summary::after {
    content: "+"; margin-left: auto; font-size: 18px; font-weight: 400;
    color: var(--cyan-ff); flex-shrink: 0;
}
.vps-q[open] summary::after { content: "−"; }
.vps-q summary:hover { background: rgba(6,182,212,.04); }
.vps-q p { font-size: 13.5px; line-height: 1.75; color: var(--muted); margin: 0; padding: 0 60px 20px 24px; text-wrap: pretty; }

/* ════════════════════════════════════════════════════════════════════
   APPEL FINAL
════════════════════════════════════════════════════════════════════ */
.vps-cta { padding-top: 64px; padding-bottom: 110px; }
.vps-cta-boite {
    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;
}
/* Le filet du haut s'éteint à ses deux bouts : coupé net, il ferait un trait
   posé de travers sur l'arrondi. */
.vps-cta-boite::before {
    content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
    width: 180px; height: 2px;
    background: linear-gradient(90deg, transparent, var(--cyan), transparent);
}
.vps-cta-boite 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: var(--ink);
}
.vps-cta-boite > p { font-size: 15px; line-height: 1.7; color: rgba(15,23,42,.6); margin: 0 auto 26px; max-width: 520px; }
.vps-cta-btns { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }

/* ════════════════════════════════════════════════════════════════════
   BARRE DE SÉLECTION
   Elle n'apparaît qu'un plan choisi, et c'est elle qui poste le formulaire des
   offres — donc qui remplit le panier.
════════════════════════════════════════════════════════════════════ */
.vps-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);
    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
    padding: 14px 0;
}
.vps-barre[hidden] { display: none; }
.vps-barre-inner { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.vps-barre-resume { font-size: 13.5px; font-weight: 600; color: rgba(15,23,42,.62); }
.vps-barre-espace { flex: 1; }
.vps-barre-total { font-size: 17px; font-weight: 800; color: var(--ink); }
.vps-barre-periode { font-size: 12px; font-weight: 500; color: rgba(15,23,42,.45); }
.vps-barre-btn {
    display: inline-flex; align-items: center; gap: 9px; cursor: pointer;
    background: var(--cyan); color: var(--encre-b); border: 0;
    font-size: 14px; font-weight: 800; padding: 12px 24px; border-radius: 9px;
    transition: background .18s;
}
.vps-barre-btn:hover { background: var(--cyan-c); }
/* Familles HDD et Windows : le plan se choisit, mais rien ne peut aller au
   panier — aucun produit derrière. Le bouton le dit au survol plutôt que de
   poster dans le vide et de revenir avec « ce produit n'existe pas ». */
.vps-barre-btn[disabled] {
    cursor: not-allowed; background: rgba(15,23,42,.1);
    color: rgba(15,23,42,.4); box-shadow: none;
}

/* ════════════════════════════════════════════════════════════════════
   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.
   Or cette feuille éclaircit le fond du gabarit — le pied tombait donc en blanc
   sur blanc, illisible. On lui rend son bleu nuit, et ce fondu l'amène sans
   marche d'escalier. Même geste que sur l'accueil, /service/domaines et
   /service/web.

   Le dégradé part de #eceff1 — le fond de CETTE page — et non du blanc de
   l'accueil : c'est la couleur qu'il doit rejoindre en haut pour être invisible.
   Ses arrêts sont ceux du hero pris à l'envers, pour que les deux raccords de la
   page se ressemblent.

   `body .footer-…` et non `.footer-…` seul : le gabarit pose
   `background: transparent !important` dans un <style> de fin de page, et à
   spécificité égale c'est le dernier déclaré qui gagne.
════════════════════════════════════════════════════════════════════ */
.vps-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-ultra-modern {
    background: #0b1e33 !important;
    border-top: 0 !important;
}

/* ════════════════════════════════════════════════════════════════════
   RESPONSIVE
   La maquette n'a qu'une largeur (1280). Ces paliers l'empêchent de déborder
   plus bas ; aucun ne change le rendu au-dessus de 900px.
════════════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
    /* Le hero réservait 300px de dégradé sous le texte pour que les cartes y
       remontent. En une colonne, le terminal occupe déjà cette place. */
    .vps-hero-grille { padding-bottom: 190px; gap: 38px; }
    .vps-infra-inner { padding-top: 110px; padding-bottom: 90px; }
    .vps-os-grille { gap: 26px; }
}
@media (max-width: 820px) {
    /* Le comparatif passe de quatre colonnes à deux : le critère, puis les trois
       valeurs l'une sous l'autre, chacune précédée du nom de sa famille — sans
       quoi on lirait trois valeurs sans savoir laquelle appartient à qui. */
    .vps-cmp-entete { display: none; }
    .vps-cmp-ligne, .vps-cmp-pied { grid-template-columns: minmax(0,1fr); gap: 6px; padding: 14px 18px; }
    .vps-cmp-val::before, .vps-cmp-prix::before {
        content: attr(data-famille) " : "; font-weight: 700; color: rgba(15,23,42,.38);
    }
}
@media (max-width: 700px) {
    .vps { --gout: 22px; }
    .vps-hero-grille { padding-top: 44px; padding-bottom: 150px; }
    /* La barre garde son bouton à droite mais laisse tomber le détail du plan :
       sur 375px, résumé et total sur la même ligne se chevauchaient. */
    .vps-barre-resume { display: none; }
    .vps-barre-inner { gap: 12px; }
    .vps-cta-boite { padding: 40px 24px 34px; }
    .vps-faq .vps-q p { padding-right: 24px; }
    .vps-infra { margin-top: 52px; }
    .vps-os { padding-top: 52px; }
    .vps-faq { padding-top: 52px; }
}
@media (max-width: 460px) {
    /* Les deux boutons du hero passent pleine largeur : côte à côte, chacun
       tombait sous 150px et leur libellé se coupait. */
    .vps-hero-actions, .vps-cta-btns { flex-direction: column; align-items: stretch; }
    .vps-hero-actions a, .vps-cta-btns a { justify-content: center; }
}