/* Maquette dédiés, chantier 645 : univers datacenter. Préfixe dd- */
.dd-ac{display:inline-block;margin-left:.35rem;padding:0 .4rem;border-radius:.25rem;font-size:.65rem;font-weight:700;letter-spacing:.02em;text-transform:uppercase;color:#1f1300;background:#fbbf24;vertical-align:middle;line-height:1.35rem}
.dd-mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
.dd-kicker{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;color:#9ca3af}

/* Hero : baie schématique */
.dd-rack{position:relative;border:1px solid #374151;border-radius:.75rem;background:#0b1220;padding:1rem;box-shadow:0 30px 60px -20px rgba(0,0,0,.6)}
.dd-rack-head{display:flex;justify-content:space-between;font-size:.7rem;color:#6b7280;margin-bottom:.6rem}
.dd-u{display:flex;align-items:center;gap:.6rem;height:2.1rem;margin-bottom:.35rem;padding:0 .7rem;border:1px solid #1f2937;border-radius:.35rem;background:linear-gradient(180deg,#141c2b,#0f1623);font-size:.72rem;color:#cbd5e1}
.dd-u .dd-bays{display:flex;gap:3px;margin-left:auto}
.dd-u .dd-bays i{display:block;width:14px;height:1.2rem;border-radius:2px;background:#1f2937;border:1px solid #2b3647}
.dd-led{width:7px;height:7px;border-radius:50%;background:#22c55e;box-shadow:0 0 8px #22c55e;flex:none}
.dd-led.dd-blink{animation:dd-blink 1.6s infinite}
.dd-led.dd-amber{background:#f59e0b;box-shadow:0 0 8px #f59e0b}
@keyframes dd-blink{0%,100%{opacity:1}50%{opacity:.25}}
.dd-rack-foot{margin-top:.6rem;font-size:.68rem;color:#6b7280;text-align:center}

/* Bandeau numéroté */
.dd-num{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.8rem;color:#f87171;font-weight:700}

/* Grille d'offres */
.dd-gamme{margin-top:3rem}
.dd-gamme:first-of-type{margin-top:0}
.dd-row{display:grid;grid-template-columns:1.35fr 1.6fr 1.1fr 1.2fr auto;gap:1rem;align-items:center;padding:1.1rem 1.25rem;border:1px solid #374151;border-radius:.75rem;background:var(--hs-surface,#171b23);margin-bottom:.75rem;transition:border-color .15s}
.dd-row:hover{border-color:#4b5563}
.dd-row.dd-clic:not(.open){cursor:pointer}
.dd-row.dd-top{border-color:rgba(248,113,113,.45)}
.dd-name{font-size:1.15rem;font-weight:800;color:#fff}
.dd-tag{display:inline-block;margin-left:.4rem;padding:.05rem .45rem;border-radius:999px;font-size:.65rem;font-weight:700;color:#e5e7eb;background:#374151;vertical-align:middle}
.dd-spec{font-size:.85rem;color:#d1d5db;line-height:1.35}
.dd-spec small{display:block;color:#9ca3af;font-size:.75rem}
.dd-ramt{display:inline-block;padding:0 .35rem;margin-left:.25rem;border:1px solid #4b5563;border-radius:.25rem;font-size:.68rem;color:#e5e7eb}
.dd-stock{display:inline-flex;align-items:center;gap:.4rem;font-size:.75rem;font-weight:600;margin-top:.35rem}
.dd-stock.ok{color:#4ade80}
.dd-stock.cmd{color:#fbbf24}
.dd-price{text-align:right}
.dd-price b{display:block;font-size:1.6rem;font-weight:800;color:#fff;line-height:1}
.dd-price span{font-size:.72rem;color:#9ca3af}
.dd-act{display:flex;flex-direction:column;gap:.4rem;min-width:9.5rem}
.dd-btn{display:inline-flex;justify-content:center;align-items:center;gap:.4rem;padding:.6rem 1rem;border-radius:.5rem;font-weight:700;font-size:.85rem;color:#fff;background:#ef4444;transition:background .15s}
.dd-btn:hover{background:#f87171}
.dd-btn2{display:inline-flex;justify-content:center;padding:.45rem 1rem;border-radius:.5rem;font-weight:600;font-size:.8rem;color:#d1d5db;border:1px solid #4b5563;background:transparent;cursor:pointer}
.dd-btn2:hover{color:#fff;border-color:#6b7280}
.dd-detail{grid-column:1/-1;display:none;border-top:1px dashed #374151;padding-top:1rem;margin-top:.25rem}
.dd-row.open .dd-detail{display:grid;grid-template-columns:1fr 1fr 18rem;gap:1.25rem}
/* Ligne hors stock : même image que le configurateur, en première colonne */
.dd-row.open .dd-detail-media{grid-template-columns:15rem 1fr 1fr 18rem}
.dd-pills{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.4rem}
.dd-pill{padding:.3rem .65rem;border:1px solid #4b5563;border-radius:999px;font-size:.75rem;color:#d1d5db}
.dd-pill.on{border-color:#f87171;color:#fff;background:rgba(248,113,113,.1)}
.dd-recap{border:1px solid #374151;border-radius:.6rem;padding:.9rem;background:var(--hs-page,#0c0e13);font-size:.8rem;color:#d1d5db}
.dd-recap div{display:flex;justify-content:space-between;margin-bottom:.35rem}
.dd-inclus{display:flex;flex-wrap:wrap;gap:.5rem 1.25rem;justify-content:center;font-size:.8rem;color:#9ca3af;margin-top:1.5rem}

/* Datacenter : schéma réseau */
.dd-flow{display:grid;grid-template-columns:repeat(4,1fr);gap:.75rem;align-items:stretch}
.dd-node{position:relative;border:1px solid #374151;border-radius:.6rem;background:var(--hs-surface,#171b23);padding:.9rem;font-size:.8rem;color:#d1d5db}
.dd-node h4{color:#fff;font-weight:700;font-size:.9rem;margin-bottom:.25rem}
.dd-node .dd-who{font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;font-weight:700}
.dd-node.nous .dd-who{color:#4ade80}
.dd-node.tiers .dd-who{color:#9ca3af}
.dd-flow>.dd-node:not(:last-child)::after{content:"";position:absolute;right:-.7rem;top:50%;width:.65rem;height:2px;background:#4b5563}

/* Compris dans chaque serveur (chantier 835) : un panneau, l'offre à gauche, le lieu à droite */
.dd-inc{display:grid;grid-template-columns:1fr;border:1px solid var(--hs-bord-fort,#353c4a);border-radius:1rem;background:var(--hs-surface,#171b23);overflow:hidden}
.dd-inc-offre,.dd-inc-lieu{padding:1.5rem}
.dd-inc-lieu{border-top:1px solid var(--hs-bord-fort,#353c4a)}
.dd-inc-label{font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;font-weight:700;color:var(--hs-muet,#9aa2b1);margin-bottom:1.25rem}
.dd-inc strong{display:block;color:#fff;font-weight:700;font-size:.95rem;margin-bottom:.2rem}
.dd-inc-grid{display:grid;grid-template-columns:1fr;gap:1.4rem 2rem}
.dd-inc-grid li{display:flex;gap:.85rem;align-items:flex-start;font-size:.875rem;line-height:1.5;color:var(--hs-texte-2,#c3c8d1)}
.dd-inc-ico{flex:none;width:2.5rem;height:2.5rem;border-radius:.6rem;display:flex;align-items:center;justify-content:center;background:var(--hs-surface-2,#1e232d);border:1px solid var(--hs-bord-fort,#353c4a)}
.dd-inc-ico .fa-icon{color:var(--hs-rouge-texte,#f87171);width:1.1em;height:1.1em}
.dd-inc-lieu ul{display:grid;gap:1.1rem}
.dd-inc-lieu li{display:flex;gap:.75rem;align-items:flex-start;font-size:.85rem;line-height:1.5;color:var(--hs-texte-2,#c3c8d1)}
.dd-inc-lieu li>.fa-icon{flex:none;margin-top:.2rem;color:var(--hs-muet,#9aa2b1)}
@media (min-width:640px){.dd-inc-grid{grid-template-columns:1fr 1fr}}
@media (min-width:1024px){
  .dd-inc{grid-template-columns:2fr 1fr}
  .dd-inc-offre,.dd-inc-lieu{padding:2rem 2.25rem}
  .dd-inc-lieu{border-top:0;border-left:1px solid var(--hs-bord-fort,#353c4a);background:var(--hs-page,#0c0e13)}
}

/* Bandeau des atouts sur fond uni (chantier 835) : plus de bande ni de filets */
.hsb.hsb-uni{border:0;padding:.5rem 0 2.5rem}

/* Mobile */
.dd-sticky{display:none}
@media (max-width:900px){
  .dd-row{grid-template-columns:1fr 1fr;gap:.6rem .9rem}
  .dd-row>.dd-cell-name{grid-column:1/-1}
  .dd-price{text-align:left}
  .dd-act{grid-column:1/-1;flex-direction:row}
  .dd-act>*{flex:1}
  .dd-row.open .dd-detail{grid-template-columns:1fr}
  .dd-flow{grid-template-columns:1fr 1fr}
  .dd-node:not(:last-child)::after{display:none}
  .dd-sticky{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:40;gap:.75rem;align-items:center;justify-content:space-between;padding:.7rem 1rem;background:rgba(18,21,28,.96);border-top:1px solid #374151;backdrop-filter:blur(6px)}
}
.dd-checks{display:grid;grid-template-columns:repeat(2,auto);justify-content:start;column-gap:2rem;row-gap:.6rem}
.dd-pitch{max-width:48rem}
.dd-stock{white-space:nowrap}
@media (min-width:1024px){.dd-checks{grid-template-columns:repeat(4,auto)}}
@media (max-width:640px){.dd-checks{grid-template-columns:1fr}}
.dd-price .dd-price-ac{margin-top:.2rem;font-size:.7rem;color:#9ca3af}
.dd-price .dd-ac{font-size:.62rem;color:#1f1300}
/* Lignes d'offres aérées (#408) */
.dd-row{padding:1.4rem 1.6rem;gap:1.25rem;margin-bottom:1rem}
@media (max-width:900px){.dd-row{gap:.85rem 1.1rem;padding:1.25rem 1.3rem}}
/* Configurateur dépliable des dédiés (665, refondu 673) : image + CPU, options, récap. Couleurs en variables --hs- seulement. */
.dd-row.open .dd-cfg{grid-template-columns:15rem 1fr 19rem;gap:1.5rem;align-items:start}
.dd-cfg-media img{width:100%;height:auto;object-fit:contain}
.dd-cfg .dd-cfg-h{font-size:.72rem;color:var(--hs-muet);text-transform:uppercase;letter-spacing:.05em;margin:.9rem 0 0}
.dd-cfg .dd-cfg-h:first-child{margin-top:0}
.dd-cfg .dd-cfg-h small{text-transform:none;letter-spacing:0;color:var(--hs-muet-2)}
.dd-cfg .dd-cfg-opts{display:flex;flex-direction:column}
.dd-cfg .dd-cfg-sec{display:grid;grid-template-columns:7.5rem 1fr;gap:.9rem;align-items:start;padding:.85rem 0;border-top:1px solid var(--hs-bord)}
.dd-cfg .dd-cfg-sec:first-child{border-top:0;padding-top:0}
.dd-cfg .dd-cfg-sec>.dd-cfg-h{margin:.45rem 0 0;font-weight:600}
.dd-cfg .dd-cfg-sec>.dd-cfg-h small{display:block;margin-top:.15rem}
.dd-cfg .dd-cfg-sec .dd-pills{margin-top:0}
.dd-cfg .dd-pill{border-color:var(--hs-bord-fort);color:var(--hs-texte-2);padding:.4rem .8rem;font-size:.78rem}
.dd-cfg .dd-opt{background:transparent;cursor:pointer;transition:border-color .15s,background .15s}
.dd-cfg .dd-opt:hover{border-color:var(--hs-muet);background:var(--hs-survol);color:var(--hs-texte)}
.dd-cfg .dd-opt.on{border-color:var(--hs-rose);background:var(--hs-rose-doux);color:var(--hs-texte)}
.dd-cfg .dd-opt.on::before{content:"";display:inline-block;width:.4rem;height:.4rem;border-radius:50%;background:var(--hs-rose);margin-right:.4rem;vertical-align:.1em}
.dd-cfg .dd-opt em,.dd-cfg .dd-lock em{font-style:normal;color:var(--hs-muet);margin-left:.2rem}
.dd-cfg .dd-opt.on em{color:var(--hs-rose)}
.dd-cfg .dd-lock{cursor:default;background:var(--hs-surface-2);border-color:var(--hs-bord);color:var(--hs-texte-2)}
.dd-cfg .dd-cfg-bay{margin-top:.6rem}
.dd-cfg .dd-cfg-slot{display:flex;align-items:baseline;gap:.6rem;font-size:.7rem;margin:0 0 .35rem;color:var(--hs-muet-2)}
.dd-cfg .dd-cfg-del{padding:0;border:0;background:none;color:var(--hs-muet);font-size:.7rem;text-decoration:underline;text-underline-offset:2px;cursor:pointer}
.dd-cfg .dd-cfg-del:hover{color:var(--hs-rose)}
/* Cible tactile 44 px sur mobile, rendu bureau inchangé */
@media (max-width:900px),(pointer:coarse){.dd-cfg .dd-cfg-del{display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:44px}}
.dd-cfg .dd-cfg-add{margin-top:.6rem;padding:.4rem .8rem;border:1px dashed var(--hs-bord-fort);border-radius:999px;background:transparent;color:var(--hs-muet);font-size:.78rem;cursor:pointer;transition:border-color .15s,color .15s}
.dd-cfg .dd-cfg-add:hover{border-color:var(--hs-rose-bord);color:var(--hs-rose)}
.dd-cfg .dd-cfg-add[hidden],.dd-cfg .dd-cfg-bay[hidden]{display:none}
.dd-cfg .dd-cfg-recap{background:var(--hs-surface);border-color:var(--hs-bord-fort);color:var(--hs-texte-2)}
.dd-cfg .dd-cfg-recap .dd-cfg-h{margin-bottom:.6rem}
.dd-cfg .dd-cfg-recap div>span:first-child{color:var(--hs-muet);padding-right:.75rem}
.dd-cfg .dd-cfg-dispo{display:flex;align-items:center;gap:.4rem;margin:0 0 .7rem;font-size:.75rem;color:var(--hs-vert)}
.dd-cfg .dd-cfg-dispo::before{content:"";width:.45rem;height:.45rem;border-radius:50%;background:currentColor}
.dd-cfg .dd-cfg-dispo.cmd{color:var(--hs-rose)}
.dd-cfg .dd-cfg-free{color:var(--hs-vert)}
.dd-cfg .dd-cfg-total{border-top:1px solid var(--hs-bord);padding-top:.6rem;margin-top:.6rem!important;align-items:baseline}
.dd-cfg .dd-cfg-total b{color:var(--hs-texte);font-size:1.65rem}
.dd-cfg .dd-cfg-ttc{text-align:right;font-size:.72rem;color:var(--hs-muet);margin:0 0 .8rem}
.dd-cfg .dd-cfg-go{display:block;text-align:center;width:100%}
.dd-cfg .dd-cfg-note{font-size:.68rem;color:var(--hs-muet-2);margin:.55rem 0 0;text-align:center}
@media (max-width:900px){.dd-row.open .dd-cfg{grid-template-columns:1fr}.dd-cfg-media{display:flex;gap:.9rem;align-items:center}.dd-cfg-media img{width:8rem;flex:none}.dd-cfg-media p{display:none}}
@media (max-width:640px){.dd-cfg .dd-cfg-sec{grid-template-columns:1fr;gap:.5rem}.dd-cfg .dd-cfg-sec>.dd-cfg-h{margin-top:0}}
