/* ════════════════════════════════════════════════════════════════════
   CBR-CLOUD — BOT DISCORD
   Transcription de la maquette « Bot Discord CBR-Cloud ». Fond clair #eceff1,
   accent cyan #06b6d4, tout en Montserrat — la police que le gabarit charge
   déjà. Mêmes jetons et mêmes gestes que /service/vps-ssd et
   /service/serveurs-jeux : les trois pages viennent de la même série de
   maquettes et doivent se ressembler.

   DEUX BLOCS DE LA MAQUETTE N'ONT PAS DE STYLE ICI, parce qu'ils ne sont pas
   rendus : la fausse fenêtre Discord du hero et le faux terminal bash du bloc
   multi-langages. Les deux sections passent donc sur une seule colonne, et
   c'est la seule différence de mise en page avec la maquette.

   Le gabarit du site est sombre : le fond est neutralisé ici, et seules la
   bande des fonctionnalités et le pied de page restent sombres.
════════════════════════════════════════════════════════════════════ */

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; }

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

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

    --ink:      #0f172a;
    --ardoise:  #1e293b;
    --muted:    rgba(15, 23, 42, .58);
    --line:     rgba(15, 23, 42, .16);
    --line-2:   rgba(15, 23, 42, .10);
    --cyan:     #06b6d4;
    --cyan-c:   #22d3ee;
    --cyan-f:   #0891b2;
    --cyan-ff:  #0e7490;
    --encre-b:  #08191d;
    --nuit:     #0b1e33;

    --maxw:     1240px;
    --gout:     40px;

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

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

.db-lbl {
    display: block;
    font-size: 11px; font-weight: 700; letter-spacing: 2.4px;
    text-transform: uppercase; color: var(--cyan-f); margin: 0 0 12px;
}
.db-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);
}
.db-h3 {
    font-size: clamp(22px, 2.3vw, 28px); font-weight: 800; letter-spacing: -.03em;
    line-height: 1.2; margin: 0 0 14px; color: var(--ink);
}
.db-chapo { font-size: 16.5px; line-height: 1.6; color: var(--muted); margin: 0; }

/* Boutons — les deux seuls de la page. */
.db-btn {
    display: inline-flex; align-items: center; gap: 9px; cursor: pointer;
    font-size: 15px; font-weight: 800; border: 0;
    color: var(--encre-b); background: var(--cyan);
    padding: 15px 28px; border-radius: 9px;
    box-shadow: 0 14px 34px -14px rgba(6,182,212,.7);
    transition: background .18s;
}
.db-btn:hover { background: var(--cyan-c); color: var(--encre-b); }
.db-btn-2 {
    display: inline-flex; align-items: center; gap: 9px; cursor: pointer;
    font-size: 15px; font-weight: 700;
    color: rgba(15,23,42,.7); background: rgba(15,23,42,.1);
    border: 1px solid rgba(15,23,42,.18);
    padding: 15px 28px; border-radius: 9px;
    transition: background .18s, color .18s;
}
.db-btn-2:hover { background: rgba(15,23,42,.16); color: var(--ink); }
.db-btn-grand { font-size: 15px; padding: 15px 30px; }

/* ════════════════════════════════════════════════════════════════════
   HERO
   Le dégradé descend du bleu nuit au fond de page en neuf arrêts : c'est ce
   qui évite la bande grise que donne un dégradé à deux couleurs sur 300px.

   La retombée fait 300px : c'est elle qui laisse la fenêtre Discord déborder
   sous le pli et la bande des runtimes s'y poser.
════════════════════════════════════════════════════════════════════ */
.db-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;
}
.db-hero-inner {
    padding-top: 64px; padding-bottom: 300px;
    display: flex; align-items: center; gap: 56px; flex-wrap: wrap;
}
/* 440px de base pour le texte, 620 pour la fenêtre : c'est la fenêtre qui a
   besoin de largeur — sous 340px sa colonne de salons mange le fil de
   discussion et il ne reste plus rien à lire. */
.db-hero-texte { flex: 1 1 440px; min-width: 0; }
.db-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;
}
.db-hero-sous {
    font-size: 16.5px; line-height: 1.7; color: rgba(255,255,255,.62);
    margin: 0 0 30px; max-width: 530px; text-wrap: pretty;
}
.db-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 .db-btn-2 sont calculées pour le fond clair. */
.db-hero .db-btn-2 {
    color: #f1f5f9; background: rgba(255,255,255,.07);
    border-color: rgba(255,255,255,.16);
}
.db-hero .db-btn-2:hover { background: rgba(255,255,255,.14); color: #fff; }

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

/* ════════════════════════════════════════════════════════════════════
   LA FENÊTRE DISCORD
   Tout en HTML et en CSS, aucune image : le texte reste net à n'importe quel
   zoom, la fenêtre s'adapte à sa colonne, et elle ne coûte pas un octet de
   téléchargement. Les couleurs sont celles de Discord — #313338 pour le fil,
   #2b2d31 pour les salons, #1e1f22 pour la barre des serveurs, #5865F2 pour
   la marque — parce qu'une fausse fenêtre qui n'a pas les bonnes teintes se
   voit immédiatement.
════════════════════════════════════════════════════════════════════ */
.db-dis {
    flex: 1 1 620px; min-width: 340px;
    display: flex; height: 470px;
    border: 1px solid rgba(255,255,255,.14);
    background: #313338; border-radius: 14px; overflow: hidden;
    box-shadow: 0 34px 80px -34px rgba(0,0,0,.9);
    font-size: 13px;
}

/* ── La colonne des serveurs ── */
.db-dis-rail {
    width: 60px; flex-shrink: 0; background: #1e1f22;
    display: flex; flex-direction: column; align-items: center; gap: 9px; padding: 12px 0;
}
.db-dis-serveur {
    position: relative; width: 40px; height: 40px; border-radius: 50%;
    background: rgba(255,255,255,.07); color: rgba(255,255,255,.45);
    font-size: 12px; font-weight: 800;
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
/* Le serveur actif : carré arrondi plutôt que rond, et la barrette blanche à
   gauche. C'est exactement comme ça que Discord signale le serveur ouvert. */
.db-dis-serveur-actif { border-radius: 13px; background: #5865F2; color: #fff; }
.db-dis-serveur-actif::before {
    content: ""; position: absolute; left: -12px; top: 8px;
    width: 4px; height: 24px; border-radius: 0 4px 4px 0; background: #fff;
}
.db-dis-sep { width: 32px; height: 2px; border-radius: 2px; background: rgba(255,255,255,.08); }
.db-dis-plus { background: rgba(52,211,153,.12); color: #34d399; font-size: 18px; font-weight: 600; }

/* ── La colonne des salons ── */
.db-dis-salons { width: 184px; flex-shrink: 0; background: #2b2d31; display: flex; flex-direction: column; }
.db-dis-entete {
    display: flex; align-items: center; gap: 8px; padding: 15px 14px;
    border-bottom: 1px solid rgba(0,0,0,.35); box-shadow: 0 1px 0 rgba(255,255,255,.03);
}
.db-dis-nom { flex: 1; min-width: 0; font-size: 13px; font-weight: 800; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.db-dis-chevron { font-size: 10px; color: rgba(255,255,255,.5); }
.db-dis-liste { flex: 1; padding: 12px 8px; display: flex; flex-direction: column; gap: 3px; overflow: hidden; }
.db-dis-cat {
    font-size: 10px; font-weight: 800; letter-spacing: .8px; text-transform: uppercase;
    color: rgba(255,255,255,.32); padding: 8px 8px 5px;
}
.db-dis-cat + .db-dis-salon { margin-top: 0; }
.db-dis-liste .db-dis-cat:not(:first-child) { padding-top: 14px; }
.db-dis-salon {
    display: flex; align-items: center; gap: 7px;
    font-size: 13px; font-weight: 600; color: rgba(255,255,255,.42);
    padding: 6px 8px; border-radius: 6px; white-space: nowrap; overflow: hidden;
}
.db-dis-salon i { font-style: normal; color: rgba(255,255,255,.28); font-weight: 500; }
.db-dis-salon-actif { font-weight: 700; color: #fff; background: rgba(255,255,255,.09); }
.db-dis-salon-actif i { color: rgba(255,255,255,.45); }

.db-dis-moi { display: flex; align-items: center; gap: 9px; padding: 10px 12px; background: #1e1f22; }
.db-dis-moi-txt { min-width: 0; }
.db-dis-moi-nom { display: block; font-size: 12px; font-weight: 700; color: rgba(255,255,255,.85); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.db-dis-moi-etat { display: block; font-size: 10.5px; color: rgba(255,255,255,.4); }

/* ── Les pastilles d'avatar ──
   Une couleur par personne : dans un fil de quatre messages, c'est ce qui
   permet de suivre qui parle sans relire les noms. */
.db-dis-av {
    position: relative; border-radius: 50%; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; font-size: 12px; font-weight: 800; color: #fff;
}
.db-dis-av-moi { width: 28px; height: 28px; font-size: 10px; background: #5865F2; }
.db-dis-av-tr  { background: #5865F2; }
.db-dis-av-do  { background: #9b6bdf; }
.db-dis-av-bot { background: #06b6d4; color: #08191d; }
.db-dis-pastille {
    position: absolute; right: -1px; bottom: -1px; width: 10px; height: 10px;
    border-radius: 50%; background: #34d399; border: 2px solid #1e1f22;
}

/* ── Le fil ── */
.db-dis-fil { flex: 1; min-width: 0; display: flex; flex-direction: column; background: #313338; }
.db-dis-tete {
    display: flex; align-items: center; gap: 10px; padding: 15px 18px;
    border-bottom: 1px solid rgba(0,0,0,.35); box-shadow: 0 1px 0 rgba(255,255,255,.03);
}
/* Le nom du salon ne se coupe pas et ne rétrécit pas : c'est le seul mot de
   l'en-tête qui doit rester entier. C'est le sujet, à côté, qui cède la place
   et s'abrège — d'où le flex-shrink asymétrique. */
.db-dis-diese { font-size: 15px; color: rgba(255,255,255,.4); font-weight: 500; flex-shrink: 0; }
.db-dis-titre { font-size: 14px; font-weight: 800; color: #fff; white-space: nowrap; flex-shrink: 0; }
.db-dis-trait { width: 1px; height: 16px; background: rgba(255,255,255,.12); flex-shrink: 0; }
.db-dis-sujet { font-size: 12px; color: rgba(255,255,255,.38); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.db-dis-espace { flex: 1; min-width: 0; }
.db-dis-uptime { flex-shrink: 0; }
.db-dis-uptime {
    display: flex; align-items: center; gap: 6px; white-space: nowrap;
    font-size: 11px; font-weight: 700; color: #34d399;
    background: rgba(52,211,153,.12); padding: 5px 10px; border-radius: 100px;
}
.db-dis-uptime i { width: 6px; height: 6px; border-radius: 50%; background: #34d399; animation: dbPouls 2.4s ease-in-out infinite; }

/* `justify-content: flex-end` : les messages sont collés EN BAS, et c'est le
   haut du fil qui sort du cadre quand il n'y a plus la place. C'est le sens de
   lecture d'un salon — le dernier message est toujours visible. Sans lui, le
   fil partait du haut et c'est la réponse du bot, la seule chose qu'on veut
   montrer, qui se faisait couper par la barre de saisie. */
.db-dis-messages {
    flex: 1; min-height: 0; padding: 16px 18px 6px;
    display: flex; flex-direction: column; justify-content: flex-end;
    gap: 16px; overflow: hidden;
}
.db-dis-jour { display: flex; align-items: center; gap: 12px; }
.db-dis-jour::before, .db-dis-jour::after { content: ""; flex: 1; height: 1px; background: rgba(255,255,255,.09); }
.db-dis-jour span { font-size: 10.5px; font-weight: 700; color: rgba(255,255,255,.35); }

.db-dis-msg { display: flex; gap: 14px; }
.db-dis-corps { min-width: 0; flex: 1; }
.db-dis-ligne { display: flex; align-items: baseline; gap: 8px; margin-bottom: 4px; }
.db-dis-auteur { font-size: 14px; font-weight: 700; color: #fff; }
.db-dis-heure { font-size: 10.5px; color: rgba(255,255,255,.35); }
.db-dis-tag {
    font-size: 9.5px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase;
    color: #fff; background: #5865F2; padding: 2px 6px; border-radius: 4px;
}
/* Une commande tapée par un humain : le fond bleuté des mentions Discord. */
.db-dis-cmd {
    display: inline-block; font-family: var(--mono, ui-monospace, monospace);
    background: rgba(88,101,242,.18); color: #a5b4ff;
    border-radius: 4px; padding: 2px 7px; font-size: 13px; font-weight: 700;
}
.db-dis-txt { display: block; font-size: 13.5px; line-height: 1.5; color: rgba(255,255,255,.82); }
.db-dis-vert { color: #34d399; font-weight: 700; }
.db-dis-region {
    font-size: 9.5px; font-weight: 800; letter-spacing: .4px;
    color: rgba(255,255,255,.6); background: rgba(255,255,255,.1);
    padding: 2px 5px; border-radius: 3px; margin-left: 3px;
}

/* L'encart de réponse, avec son filet de couleur à gauche : c'est la forme des
   « embeds » de Discord, et c'est ce qui distingue une réponse structurée du
   bot d'un simple message. */
.db-dis-embed {
    display: block; max-width: 430px; margin-top: 4px;
    border-left: 4px solid var(--cyan-c, #22d3ee);
    background: rgba(255,255,255,.05); border-radius: 5px; padding: 13px 15px;
}
.db-dis-embed-titre { display: block; font-size: 13.5px; font-weight: 800; color: #fff; margin-bottom: 11px; }
.db-dis-embed-grille { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 11px 14px; margin-bottom: 12px; }
.db-dis-embed-grille i { display: block; font-style: normal; font-size: 10.5px; font-weight: 700; color: rgba(255,255,255,.45); margin-bottom: 3px; }
.db-dis-embed-grille b { display: block; font-size: 13px; font-weight: 700; color: rgba(255,255,255,.85); }
.db-dis-embed-pied {
    display: flex; align-items: center; gap: 7px;
    padding-top: 10px; border-top: 1px solid rgba(255,255,255,.08);
    font-size: 10.5px; color: rgba(255,255,255,.4);
}
.db-dis-embed-pied i { width: 14px; height: 14px; border-radius: 4px; background: var(--cyan, #06b6d4); flex-shrink: 0; }

.db-dis-ecrit { display: flex; align-items: center; gap: 10px; font-size: 11.5px; color: rgba(255,255,255,.45); }
.db-dis-ecrit b { color: rgba(255,255,255,.7); }
.db-dis-points { display: flex; align-items: center; gap: 5px; }
.db-dis-points i { width: 5px; height: 5px; border-radius: 50%; background: rgba(255,255,255,.55); animation: dbPoint 1.2s ease-in-out infinite; }
.db-dis-points i:nth-child(2) { animation-delay: .18s; }
.db-dis-points i:nth-child(3) { animation-delay: .36s; }

.db-dis-saisie {
    display: flex; align-items: center; gap: 12px; margin: 12px 18px 16px;
    background: rgba(255,255,255,.06); border-radius: 9px; padding: 12px 16px;
}
.db-dis-saisie-plus {
    width: 20px; height: 20px; border-radius: 50%; flex-shrink: 0; line-height: 1;
    background: rgba(255,255,255,.18); color: rgba(255,255,255,.6); font-size: 13px;
    display: flex; align-items: center; justify-content: center;
}
.db-dis-saisie-txt { flex: 1; min-width: 0; font-size: 13.5px; color: rgba(255,255,255,.5); }
.db-dis-curseur { width: 2px; height: 15px; background: var(--cyan-c, #22d3ee); animation: dbCurseur 1s step-end infinite; }

/* Les messages arrivent l'un après l'autre. C'est ce décalage qui fait lire un
   échange en cours plutôt qu'une capture figée. */
.db-dis-e1 { animation: dbLigne .5s ease-out both; }
.db-dis-e2 { animation: dbLigne .5s ease-out .55s both; }
.db-dis-e3 { animation: dbLigne .5s ease-out 1.1s both; }
.db-dis-e4 { animation: dbLigne .5s ease-out 1.65s both; }
.db-dis-e5 { animation: dbLigne .5s ease-out 2.3s both; }

@keyframes dbLigne  { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes dbCurseur { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
@keyframes dbPoint  { 0%, 60%, 100% { transform: translateY(0); opacity: .35; } 30% { transform: translateY(-4px); opacity: 1; } }
@keyframes dbPouls  { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

/* ════════════════════════════════════════════════════════════════════
   RUNTIMES
   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.
════════════════════════════════════════════════════════════════════ */
.db-runtimes-sect { padding-top: 24px; }
.db-runtimes {
    display: flex; align-items: center; gap: 22px;
    flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px;
}
.db-runtime {
    display: inline-flex; align-items: center; gap: 12px; flex: 0 0 auto;
    font-size: 16px; font-weight: 700; color: rgba(15,23,42,.7);
    background: #fff; border: 1px solid var(--line);
    padding: 14px 26px 14px 20px; border-radius: 100px;
    box-shadow: 0 1px 2px rgba(15,23,42,.05); white-space: nowrap;
}
/* Le logo 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
   runtime. 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. */
.db-runtime::before {
    content: ""; width: 24px; height: 24px; flex-shrink: 0;
    background-image: var(--logo);
    background-size: contain; background-repeat: no-repeat; background-position: center;
}

/* ════════════════════════════════════════════════════════════════════
   OFFRES
════════════════════════════════════════════════════════════════════ */
.db-offres { padding-top: 64px; }
.db-offres-tete {
    display: flex; align-items: flex-end; justify-content: space-between;
    gap: 28px; flex-wrap: wrap; margin-bottom: 24px;
}
.db-offres-tete > div { max-width: 560px; }

.db-bascule {
    display: flex; align-items: center; gap: 10px; padding: 5px;
    border: 1px solid var(--line); background: #fff; border-radius: 100px;
}
.db-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;
}
.db-bascule-btn[aria-pressed="true"] { background: var(--cyan); color: var(--encre-b); }
.db-remise { font-weight: 700; opacity: .75; }

.db-grille {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 228px), 1fr));
    gap: 14px; align-items: stretch;
}
.db-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 formule mise en avant. Le halo part du coin haut droit, comme la maquette. */
.db-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);
}
.db-pastille {
    align-self: flex-start;
    font-size: 9.5px; font-weight: 800; letter-spacing: .9px; text-transform: uppercase;
    padding: 4px 10px; border-radius: 100px; margin-bottom: 12px;
    color: rgba(15,23,42,.42); background: rgba(15,23,42,.05); border: 1px solid rgba(15,23,42,.12);
}
/* La pastille « Le plus populaire » est en cyan PLEIN, pas en teinte : c'est le
   seul repère qui distingue la formule conseillée avant d'avoir lu les prix. */
.db-pastille-vedette { color: var(--encre-b); background: var(--cyan-c); border-color: transparent; }

.db-carte h3 { font-size: 18px; font-weight: 800; letter-spacing: -.02em; margin: 0 0 6px; }
/* `min-height` sur l'usage : les quatre phrases n'ont pas la même longueur, et
   sans ce plancher les prix des quatre cartes ne s'alignaient pas. */
.db-usage { font-size: 13px; line-height: 1.55; color: rgba(15,23,42,.5); margin: 0 0 18px; min-height: 40px; }

.db-prix { display: flex; align-items: flex-end; gap: 6px; margin-bottom: 4px; }
.db-prix-val { font-size: 30px; font-weight: 800; letter-spacing: -.04em; line-height: 1; color: var(--ink); }
.db-prix-per { font-size: 12.5px; font-weight: 600; color: rgba(15,23,42,.48); margin-bottom: 3px; }
.db-mention { font-size: 11.5px; font-weight: 500; color: rgba(15,23,42,.42); margin: 0 0 18px; }

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

.db-inclus { display: flex; flex-direction: column; gap: 8px; margin: 0 0 20px; padding: 0; list-style: none; }
.db-inclus li {
    display: flex; align-items: flex-start; gap: 9px;
    font-size: 12.5px; line-height: 1.5; color: rgba(15,23,42,.6);
}
.db-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. */
.db-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;
}
.db-carte-btn:hover { background: rgba(6,182,212,.18); }
.db-carte-vedette .db-carte-btn { background: var(--cyan); border-color: rgba(6,182,212,.4); color: var(--encre-b); }
.db-carte-vedette .db-carte-btn:hover { background: var(--cyan-c); }

/* La formule retenue. Le vert n'est pas décoratif : il dit « c'est fait », là
   où le cyan de la carte en vedette dit « c'est celle qu'on conseille ». */
.db-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); }
.db-carte-choisie .db-carte-btn,
.db-carte-vedette.db-carte-choisie .db-carte-btn {
    background: rgba(52,211,153,.12); border-color: rgba(52,211,153,.35); color: #047857;
}

.db-note { font-size: 12.5px; color: rgba(15,23,42,.45); margin: 14px 0 0; }

/* ════════════════════════════════════════════════════════════════════
   FONCTIONNALITÉS — 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.
════════════════════════════════════════════════════════════════════ */
.db-fonc {
    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 56%, #0b1e33 68%, #16304b 76%,
            #26445f 83%, #476479 88%, #71889b 93%, #a8b7c2 96.5%, #d5dce1 98.5%, #eceff1 100%);
    color: #f1f5f9;
}
.db-fonc-inner { padding-top: 150px; padding-bottom: 130px; }
.db-fonc-tete {
    display: flex; align-items: flex-end; justify-content: space-between;
    gap: 32px; flex-wrap: wrap; margin-bottom: 52px;
}
.db-fonc-tete > div { max-width: 540px; }
.db-fonc-tete .db-lbl { color: var(--cyan-c); }
.db-fonc-tete h2 {
    font-size: clamp(24px, 2.6vw, 34px); font-weight: 800; letter-spacing: -.03em;
    line-height: 1.14; margin: 0; color: #fff;
}
.db-fonc-chapo { font-size: 16px; line-height: 1.65; color: rgba(255,255,255,.6); margin: 0; max-width: 400px; text-wrap: pretty; }

.db-fonc-grille { 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. */
.db-fonc-item {
    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;
}
.db-fonc-item h3 { font-size: 17px; font-weight: 800; letter-spacing: -.02em; margin: 0 0 10px; color: #fff; }
.db-fonc-item p { font-size: 16px; line-height: 1.7; color: rgba(255,255,255,.62); margin: 0; text-wrap: pretty; }

/* ════════════════════════════════════════════════════════════════════
   MULTI-LANGAGES ET TERMINAL
════════════════════════════════════════════════════════════════════ */
.db-langages { padding-top: 20px; }
.db-langages-grille {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
    gap: 36px; align-items: center;
}
.db-langages-txt {
    font-size: 17px; line-height: 1.6; color: rgba(15,23,42,.6);
    margin: 0 0 22px; max-width: 480px; text-wrap: pretty;
}

/* ── Le terminal ──
   Fond bleu nuit et non noir : c'est la couleur des bandes sombres de la page,
   et un noir pur au milieu d'une page claire fait un trou. */
.db-term {
    border: 1px solid rgba(15,23,42,.18); background: var(--nuit);
    border-radius: 14px; overflow: hidden;
    box-shadow: 0 26px 56px -30px rgba(11,30,51,.75);
}
.db-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);
}
/* Les trois pastilles portent leurs vraies couleurs de fenêtre plutôt qu'un gris
   uniforme : c'est ce détail-là qu'on reconnaît avant de lire le titre. */
.db-term-pastille { width: 9px; height: 9px; border-radius: 50%; }
.db-term-rouge { background: #ff5f57; }
.db-term-jaune { background: #febc2e; }
.db-term-verte { background: #28c840; }
.db-term-titre { margin-left: 8px; font-family: var(--mono); font-size: 11px; color: rgba(255,255,255,.4); }

.db-term-corps {
    padding: 18px; font-family: var(--mono);
    font-size: 12px; line-height: 2.05; color: rgba(255,255,255,.7);
}
.db-term-corps div { font-family: var(--mono); }
.db-term-invite { color: var(--cyan-c); font-weight: 600; }
.db-term-ok { color: #34d399; }
.db-term-fleche { color: var(--cyan-c); }
.db-term-gris { color: rgba(255,255,255,.5); }
.db-term-curseur {
    display: inline-block; width: 8px; height: 14px; vertical-align: -2px;
    background: var(--cyan-c); animation: dbCurseur 1s step-end infinite;
}

/* Les lignes tombent l'une après l'autre, à 0,3 s d'intervalle — un déploiement
   qui se déroule, pas une capture figée. */
.db-term-l1 { animation: dbLigne .4s ease-out both; }
.db-term-l2 { animation: dbLigne .4s ease-out .3s both; }
.db-term-l3 { animation: dbLigne .4s ease-out .6s both; }
.db-term-l4 { animation: dbLigne .4s ease-out .9s both; }
.db-term-l5 { animation: dbLigne .4s ease-out 1.2s both; }
.db-term-l6 { animation: dbLigne .4s ease-out 1.5s both; }
.db-term-l7 { animation: dbLigne .4s ease-out 1.8s both; }
.db-langages-liste { display: flex; flex-wrap: wrap; gap: 9px; }
.db-langage {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 12.5px; font-weight: 700; color: rgba(15,23,42,.62);
    background: #fff; border: 1px solid var(--line);
    padding: 9px 15px 9px 12px; border-radius: 10px;
}
.db-langage::before {
    content: ""; width: 16px; height: 16px; flex-shrink: 0;
    background-image: var(--logo);
    background-size: contain; background-repeat: no-repeat; background-position: center;
}

/* ════════════════════════════════════════════════════════════════════
   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é.
════════════════════════════════════════════════════════════════════ */
.db-faq { padding-top: 70px; }
/* Le titre et la mascotte partagent une rangée. `align-items: flex-end` les
   pose sur la même ligne de base : la mascotte a l'air debout à côté du texte,
   et non suspendue au-dessus. */
.db-faq-rangee {
    position: relative;
    display: flex; align-items: flex-end; justify-content: space-between;
    gap: 24px; margin-bottom: 24px;
}
.db-faq-tete { max-width: 600px; }

/* ── La mascotte ──
   Elle FLOTTE, doucement et lentement : cinq secondes et demie par cycle, neuf
   pixels d'amplitude. Plus rapide ou plus ample, elle tirerait l'œil hors des
   questions, qui sont ce que la section veut faire lire.

   L'ombre portée n'est pas un effet : sans elle, une image détourée posée sur
   un aplat clair flotte sans rien toucher. Le halo cyan derrière elle vient du
   même accent que le reste de la page — c'est ce qui la fait appartenir au
   décor au lieu d'y être collée.

   `margin-bottom` négatif : elle déborde de quelques pixels sur la boîte des
   questions, ce qui la fait reposer dessus plutôt que léviter au-dessus. */
/* `mix-blend-mode: multiply` — ce qu'il fait, et ce qu'il ne fait pas.

   CE QUI A ÉTÉ MESURÉ DANS LE FICHIER, avant d'écrire cette règle :
     · les quatre coins sont parfaitement transparents sur toutes les images
       échantillonnées — il n'y a pas de fond blanc ;
     · zéro pixel clair au contact de la transparence — il n'y a pas non plus de
       liseré blanc de détourage ;
     · 91 des 94 images demandent l'effacement « restaurer la couleur de fond »,
       et cette couleur est un bleu-gris pâle (151, 166, 214).

   La troisième ligne est la cause probable du clignotement clair. Elle n'est
   PAS corrigeable ici : les images sont des sous-rectangles, donc passer
   l'effacement à « ne rien faire » laisserait traîner chaque image sur la
   suivante ; et l'index de transparence change d'une image à l'autre — quarante
   valeurs différentes — donc pointer le fond global vers lui est impossible.

   Ce que la multiplication apporte réellement : tout ce qui est BLANC ou
   presque disparaît dans un fond clair (255 × fond ÷ 255 = fond), et le
   personnage cesse d'être une découpe posée sur la page pour se fondre dedans.
   Ce qu'elle ne fait pas : effacer un ton moyen. Le bleu-gris ci-dessus,
   multiplié par #eceff1, donne (140, 156, 202) — atténué, pas supprimé. Le
   régler pour de bon demande de RÉEXPORTER le fichier, en WebP animé ou en
   vidéo, où la transparence est continue au lieu d'être binaire.

   À SAVOIR SI ON LE DÉPLACE : ce mode ne vaut que sur fond CLAIR. Sur la bande
   sombre ou dans le hero, la multiplication l'effacerait presque entièrement. */
.db-wumpus {
    position: relative; flex: 0 0 auto;
    width: clamp(112px, 12vw, 168px); height: auto;
    margin-bottom: -14px;
    mix-blend-mode: multiply;
    /* L'ombre est adoucie : elle passe elle aussi dans la multiplication, et au
       réglage précédent elle devenait une flaque grise sous les pieds. */
    filter: drop-shadow(0 12px 16px rgba(15,23,42,.16));
    /* Les pieds se dissolvent sur les 5 derniers pour cent : plus de ligne de
       coupe nette entre la mascotte et le fond de la section. */
    -webkit-mask-image: linear-gradient(180deg, #000 94%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 94%, transparent 100%);
    animation: dbFlotte 5.5s ease-in-out infinite;
    pointer-events: none;
}
/* Le halo, posé sous la mascotte. Il est porté par la rangée et non par
   l'image : un `::before` sur une balise <img> ne s'affiche jamais, l'image
   n'ayant pas d'enfants. */
/* Le halo, posé sous la mascotte. Il est porté par la rangée et non par
   l'image : un `::before` sur une balise <img> ne s'affiche jamais, l'image
   n'ayant pas d'enfants.

   Il est DISCRET (8 %) et non plus franc : la mascotte est en multiplication,
   et un halo marqué sous elle ressortait en tache plus sombre là où les deux
   se croisent. */
.db-faq-rangee::after {
    content: ""; position: absolute; z-index: -1; pointer-events: none;
    right: -18px; bottom: -30px; width: 240px; height: 200px;
    background: radial-gradient(ellipse 50% 50% at 50% 50%, rgba(6,182,212,.08), transparent 72%);
}
@keyframes dbFlotte { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
.db-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);
}
.db-q { border-bottom: 1px solid rgba(15,23,42,.11); }
.db-q:last-child { border-bottom: 0; }
.db-q summary {
    cursor: pointer; list-style: none; padding: 18px 24px;
    display: flex; align-items: center; gap: 16px;
    font-size: 16px; font-weight: 700; color: var(--ardoise);
}
.db-q summary::-webkit-details-marker { display: none; }
.db-q summary::after {
    content: "+"; margin-left: auto; font-size: 18px; font-weight: 400;
    color: var(--cyan-ff); flex-shrink: 0;
}
.db-q[open] summary::after { content: "−"; }
.db-q summary:hover { background: rgba(6,182,212,.04); }
.db-q p { font-size: 15.5px; line-height: 1.75; color: rgba(15,23,42,.6); margin: 0; padding: 0 60px 20px 24px; text-wrap: pretty; }

/* ════════════════════════════════════════════════════════════════════
   APPEL FINAL
════════════════════════════════════════════════════════════════════ */
.db-cta { padding-top: 64px; padding-bottom: 110px; }
.db-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. */
.db-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);
}
.db-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);
}
.db-cta-txt { font-size: 17.5px; line-height: 1.65; color: rgba(15,23,42,.62); margin: 0 auto 26px; max-width: 600px; }
.db-cta-btns { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }

/* ════════════════════════════════════════════════════════════════════
   BARRE DE SÉLECTION
════════════════════════════════════════════════════════════════════ */
.db-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;
}
.db-barre[hidden] { display: none; }
.db-barre-inner { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.db-barre-resume { font-size: 13.5px; font-weight: 600; color: rgba(15,23,42,.62); }
.db-barre-espace { flex: 1; }
.db-barre-total { font-size: 17px; font-weight: 800; color: var(--ink); }
.db-barre-periode { font-size: 12px; font-weight: 500; color: rgba(15,23,42,.45); }
.db-barre-btn {
    display: inline-flex; align-items: center; gap: 9px;
    background: var(--cyan); color: var(--encre-b);
    font-size: 14px; font-weight: 800; padding: 12px 24px; border-radius: 9px;
    transition: background .18s;
}
.db-barre-btn:hover { background: var(--cyan-c); color: var(--encre-b); }

/* ════════════════════════════════════════════════════════════════════
   RACCORD VERS LE PIED DE PAGE
   Le pied de page du site est en `background: transparent` avec du texte
   blanc : il compte sur le fond sombre des autres pages. Cette feuille
   éclaircit le fond du gabarit, il tomberait donc en blanc sur blanc.

   `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.
════════════════════════════════════════════════════════════════════ */
.db-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.
════════════════════════════════════════════════════════════════════ */
/* Les animations décrivent un déroulement — un déploiement qui avance, un bot
   qui répond. Coupées, les deux maquettes gardent tout leur contenu : elles ne
   font que l'afficher d'un coup, ce qui est exactement ce qui est demandé. Le
   curseur et les points de frappe s'arrêtent aussi : trois animations
   perpétuelles dans un coin de l'écran sont précisément ce que ce réglage
   existe pour faire taire. */
@media (prefers-reduced-motion: reduce) {
    .db-dis-e1, .db-dis-e2, .db-dis-e3, .db-dis-e4, .db-dis-e5,
    .db-term-l1, .db-term-l2, .db-term-l3, .db-term-l4,
    .db-term-l5, .db-term-l6, .db-term-l7 { animation: none; }
    .db-dis-curseur, .db-term-curseur, .db-dis-uptime i { animation: none; }
    .db-dis-points i { animation: none; opacity: .55; }
    /* La mascotte cesse de flotter. Son GIF, lui, continue : c'est le fichier
       qui est animé, aucune règle CSS ne peut l'arrêter — il faudrait le
       remplacer par une image fixe. */
    .db-wumpus { animation: none; }
}

@media (max-width: 900px) {
    /* En une colonne, la fenêtre Discord occupe déjà la place que la retombée
       réservait sous le texte. */
    .db-hero-inner { padding-bottom: 190px; gap: 38px; }
    .db-fonc-inner { padding-top: 110px; padding-bottom: 90px; }
    /* Sous cette largeur, la colonne des salons prend le tiers de la fenêtre et
       le fil de discussion devient illisible : elle part, la barre des serveurs
       et le fil suffisent à dire ce que la maquette raconte. */
    .db-dis { height: 430px; }
    .db-dis-salons { display: none; }
}
@media (max-width: 700px) {
    .db { --gout: 22px; }
    .db-hero-inner { padding-top: 44px; padding-bottom: 140px; }
    /* La barre des serveurs part à son tour : sur 375px, ses 60px valent un
       sixième de la largeur pour quatre pastilles décoratives. */
    .db-dis { height: 400px; min-width: 0; }
    .db-dis-rail { display: none; }
    /* La mascotte passe SOUS le titre plutôt qu'à côté : à cette largeur, la
       rangée se partage en deux colonnes de 150px et le titre se couperait mot
       par mot. Elle se cale à droite, là où le regard finit sa lecture. */
    .db-faq-rangee { flex-direction: column; align-items: flex-end; gap: 0; }
    .db-faq-tete { align-self: stretch; }
    .db-wumpus { width: 104px; margin: -8px 8px -14px 0; }
    .db-faq-rangee::after { display: none; }
    .db-dis-embed-grille { grid-template-columns: minmax(0,1fr); }
    .db-term-corps { font-size: 11px; line-height: 1.9; padding: 14px; }
    .db-fonc { margin-top: 52px; }
    .db-faq { padding-top: 52px; }
    .db-q p { padding-right: 24px; }
    .db-cta-boite { padding: 40px 24px 34px; }
    /* La barre garde son bouton à droite mais laisse tomber le détail de la
       formule : sur 375px, résumé et total sur la même ligne se chevauchaient. */
    .db-barre-resume { display: none; }
    .db-barre-inner { gap: 12px; }
}
@media (max-width: 460px) {
    .db-hero-actions, .db-cta-btns { flex-direction: column; align-items: stretch; }
    .db-hero-actions a, .db-cta-btns a { justify-content: center; }
}