/* CubeHost — identite « terre et herbe ».
   Parti pris : fond clair et chaleureux, typo arrondie, formes courbes.
   A l'oppose du fond noir + neon que tout le monde utilise. */

@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,500;12..96,700;12..96,800&family=Figtree:wght@400;500;600;700&display=swap');

:root {
  /* Neutres chauds : le gris est teinte sable, jamais bleute. */
  --sand:#faf7f1;
  --sand2:#f3ede3;
  --paper:#ffffff;
  --ink:#241f18;
  --ink2:#6d6355;
  --ink3:#a29684;
  --line:#e8dfd1;
  --line2:#d8ccb8;

  /* Herbe : le vert du bloc, sature mais pas fluo. */
  --grass:#3f8f4a;
  --grass-d:#2f6f39;
  --grass-l:#eaf4e9;

  /* Terre cuite : le contrepoint chaud, pour les rappels et les badges. */
  --clay:#c4643c;
  --clay-l:#fbeee7;

  --gold:#d99b2b;
  --danger:#c0483c;

  --r:14px;
  --r-lg:22px;
  --shadow:0 1px 2px rgba(36,31,24,.04), 0 10px 26px -14px rgba(36,31,24,.18);
  --shadow-lg:0 2px 4px rgba(36,31,24,.05), 0 24px 50px -24px rgba(36,31,24,.28);
}

* { box-sizing:border-box; margin:0; padding:0; }

body {
  font-family:'Figtree', system-ui, -apple-system, sans-serif;
  background:var(--sand);
  color:var(--ink);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

h1, h2, h3, .display {
  font-family:'Bricolage Grotesque', system-ui, sans-serif;
  font-weight:800;
  letter-spacing:-.02em;
  line-height:1.1;
}

a { color:inherit; text-decoration:none; }
button, input, select, textarea { font-family:inherit; font-size:inherit; }
img, svg { display:block; max-width:100%; }

.wrap { max-width:1140px; margin:0 auto; padding:0 24px; }
.hidden { display:none !important; }
.muted { color:var(--ink2); }
.mono { font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; }

/* ---------- Navigation ---------- */
.nav { position:sticky; top:0; z-index:60; background:rgba(250,247,241,.9); backdrop-filter:blur(10px); border-bottom:1px solid var(--line); }
.nav-inner { display:flex; align-items:center; gap:28px; height:68px; }
.logo { display:flex; align-items:center; gap:9px; font-family:'Bricolage Grotesque',sans-serif; font-weight:800; font-size:19px; letter-spacing:-.03em; color:var(--ink); }
.logo-mark { width:26px; height:26px; flex-shrink:0; }
.nav-links { display:flex; gap:24px; }
.nav-links a { font-size:14.5px; font-weight:600; color:var(--ink2); }
.nav-links a:hover { color:var(--grass); }
.nav-right { margin-left:auto; display:flex; align-items:center; gap:10px; }

/* ---------- Boutons ---------- */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:11px 20px; border-radius:999px; border:1.5px solid transparent;
  font-size:14.5px; font-weight:700; cursor:pointer; transition:.16s; white-space:nowrap;
}
.btn-primary { background:var(--grass); color:#fff; box-shadow:0 2px 0 var(--grass-d); }
.btn-primary:hover { background:var(--grass-d); box-shadow:0 1px 0 var(--grass-d); transform:translateY(1px); }
.btn-clay { background:var(--clay); color:#fff; box-shadow:0 2px 0 #9d4c2c; }
.btn-clay:hover { background:#b25735; transform:translateY(1px); box-shadow:0 1px 0 #9d4c2c; }
.btn-outline { background:var(--paper); color:var(--ink); border-color:var(--line2); }
.btn-outline:hover { border-color:var(--grass); color:var(--grass); }
.btn-ghost { background:transparent; color:var(--ink2); }
.btn-ghost:hover { color:var(--ink); background:var(--sand2); }
.btn-danger { background:transparent; color:var(--danger); border-color:rgba(192,72,60,.3); }
.btn-danger:hover { background:rgba(192,72,60,.06); }
.btn-sm { padding:8px 15px; font-size:13.5px; }
.btn-lg { padding:14px 28px; font-size:16px; }
.btn-full { width:100%; }
.btn:disabled { opacity:.55; cursor:not-allowed; transform:none; }

/* ---------- Heros ---------- */
.hero { position:relative; background:linear-gradient(168deg,#2b3b2c 0%,#1f2c21 55%,#1a241c 100%); color:#f2efe8; padding:76px 0 132px; overflow:hidden; }
.hero::after {
  /* Separateur incurve : la signature de la page, a la place d'un filet droit. */
  content:''; position:absolute; left:-5%; right:-5%; bottom:-2px; height:96px;
  background:var(--sand); border-radius:100% 100% 0 0 / 100% 100% 0 0;
}
.hero-grid { position:relative; z-index:2; display:grid; grid-template-columns:1.15fr .85fr; gap:40px; align-items:center; }
.hero h1 { font-size:clamp(33px,4.6vw,50px); color:#fff; margin-bottom:18px; text-wrap:balance; }
.hero h1 u { text-decoration:none; background:linear-gradient(transparent 62%, rgba(63,143,74,.55) 62%); padding:0 2px; }
.hero p { font-size:17px; color:#c9c9be; max-width:48ch; margin-bottom:28px; }
.hero-actions { display:flex; gap:12px; flex-wrap:wrap; }
.hero-note { margin-top:16px; font-size:13.5px; color:#9a9a8e; }
.hero-art { display:flex; justify-content:center; }
.hero-art svg { width:min(300px,80%); filter:drop-shadow(0 22px 34px rgba(0,0,0,.4)); }

/* ---------- Bandeau de confiance ---------- */
.trust { margin-top:-52px; position:relative; z-index:5; }
.trust-inner {
  background:var(--paper); border:1px solid var(--line); border-radius:var(--r-lg);
  box-shadow:var(--shadow-lg); padding:20px 26px;
  display:flex; gap:14px; justify-content:space-around; flex-wrap:wrap;
}
.trust-item { display:flex; align-items:center; gap:11px; font-size:14.5px; }
.trust-item b { font-family:'Bricolage Grotesque',sans-serif; font-size:18px; font-weight:800; color:var(--ink); }
.trust-item span { color:var(--ink2); }
.trust-ic { width:34px; height:34px; border-radius:11px; background:var(--grass-l); color:var(--grass); display:flex; align-items:center; justify-content:center; font-size:16px; flex-shrink:0; }

/* ---------- Sections ---------- */
.section { padding:76px 0; }
.section-alt { background:var(--sand2); }
.section-head { max-width:640px; margin:0 auto 44px; text-align:center; }
.section-head.left { margin-left:0; text-align:left; }
.eyebrow {
  display:inline-block; font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--grass); background:var(--grass-l); padding:5px 12px; border-radius:999px; margin-bottom:14px;
}
h2.section-title { font-size:clamp(26px,3.6vw,38px); margin-bottom:14px; text-wrap:balance; }
.section-sub { color:var(--ink2); font-size:16.5px; }

/* ---------- Cartes ---------- */
.grid { display:grid; gap:18px; }
.grid-3 { grid-template-columns:repeat(auto-fit,minmax(268px,1fr)); }
.grid-2 { grid-template-columns:repeat(auto-fit,minmax(310px,1fr)); }

.card { background:var(--paper); border:1px solid var(--line); border-radius:var(--r-lg); padding:26px; transition:.16s; }
.card:hover { border-color:var(--line2); box-shadow:var(--shadow); }
.card-ic { width:42px; height:42px; border-radius:13px; background:var(--grass-l); color:var(--grass); display:flex; align-items:center; justify-content:center; font-size:19px; margin-bottom:15px; }
.card-ic.clay { background:var(--clay-l); color:var(--clay); }
.card h3 { font-size:17px; margin-bottom:8px; letter-spacing:-.015em; }
.card p { font-size:14.5px; color:var(--ink2); }

/* Etapes numerotees : ici l'ordre compte vraiment (1 puis 2 puis 3). */
.steps { display:grid; gap:20px; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); counter-reset:step; }
.step { position:relative; padding-left:52px; }
.step::before {
  counter-increment:step; content:counter(step);
  position:absolute; left:0; top:0; width:36px; height:36px; border-radius:50%;
  background:var(--ink); color:var(--sand); display:flex; align-items:center; justify-content:center;
  font-family:'Bricolage Grotesque',sans-serif; font-weight:800; font-size:16px;
}
.step h3 { font-size:16.5px; margin-bottom:6px; }
.step p { font-size:14.5px; color:var(--ink2); }

/* ---------- Selecteur d'offre ---------- */
.picker { max-width:820px; margin:0 auto; }
.ram-chips { display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-bottom:26px; }
.chip {
  padding:11px 20px; border-radius:999px; border:1.5px solid var(--line2); background:var(--paper);
  font-weight:700; font-size:14.5px; color:var(--ink2); cursor:pointer; transition:.14s;
}
.chip:hover { border-color:var(--grass); color:var(--grass); }
.chip.on { background:var(--grass); border-color:var(--grass); color:#fff; box-shadow:0 2px 0 var(--grass-d); }
.chip small { font-weight:600; opacity:.8; margin-left:3px; }

.offer {
  background:var(--paper); border:2px solid var(--grass); border-radius:var(--r-lg);
  box-shadow:var(--shadow-lg); position:relative; margin-top:14px;
}
/* Pas d'overflow:hidden ici : les badges debordent volontairement au-dessus
   du bord, et seraient tronques. Les coins restent arrondis sans lui. */
.offer-badges { position:absolute; top:0; left:26px; display:flex; gap:8px; flex-wrap:wrap; transform:translateY(-50%); }
.pill { font-size:11.5px; font-weight:800; padding:5px 12px; border-radius:999px; letter-spacing:.02em; }
.pill-grass { background:var(--grass); color:#fff; }
.pill-clay { background:var(--clay); color:#fff; }
.offer-top { display:flex; align-items:flex-start; gap:16px; flex-wrap:wrap; padding:32px 30px 22px; border-bottom:1px solid var(--line); }
.offer-name { font-family:'Bricolage Grotesque',sans-serif; font-size:27px; font-weight:800; letter-spacing:-.03em; }
.offer-tag { font-size:14.5px; color:var(--ink2); margin-top:2px; }
.offer-price { margin-left:auto; text-align:right; }
.offer-price b { font-family:'Bricolage Grotesque',sans-serif; font-size:36px; font-weight:800; letter-spacing:-.035em; }
.offer-price span { display:block; font-size:13px; color:var(--ink2); }
.offer-specs { display:grid; grid-template-columns:repeat(auto-fit,minmax(128px,1fr)); gap:1px; background:var(--line); }
.offer-spec { background:var(--paper); padding:18px 20px; }
.offer-spec .k { font-size:11.5px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:var(--ink3); }
.offer-spec .v { font-family:'Bricolage Grotesque',sans-serif; font-size:19px; font-weight:700; margin-top:3px; }
.offer-spec .s { font-size:12.5px; color:var(--ink2); }
.offer-foot { padding:22px 30px 26px; display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
.offer-foot .grow { flex:1; min-width:180px; font-size:13.5px; color:var(--ink2); }

/* ---------- Fonctionnalites nommees ---------- */
.feat { display:flex; gap:16px; align-items:flex-start; background:var(--paper); border:1px solid var(--line); border-radius:var(--r-lg); padding:22px 24px; }
.feat-ic { width:44px; height:44px; border-radius:13px; display:flex; align-items:center; justify-content:center; font-size:20px; flex-shrink:0; background:var(--grass-l); color:var(--grass); }
.feat-ic.clay { background:var(--clay-l); color:var(--clay); }
.feat h3 { font-size:16.5px; margin-bottom:5px; }
.feat h3 sup { font-size:9px; vertical-align:super; color:var(--ink3); }
.feat p { font-size:14.5px; color:var(--ink2); }
.chips-row { display:flex; gap:7px; flex-wrap:wrap; margin-top:11px; }
.mini { font-size:12.5px; font-weight:600; padding:4px 11px; border-radius:999px; background:var(--sand2); color:var(--ink2); }

/* ---------- Avis ---------- */
.quote { background:var(--paper); border:1px solid var(--line); border-radius:var(--r-lg); padding:24px; }
.quote p { font-size:15px; color:var(--ink); margin-bottom:14px; }
.quote footer { display:flex; align-items:center; gap:10px; font-size:13.5px; color:var(--ink2); }
.avatar { width:34px; height:34px; border-radius:50%; background:var(--grass-l); color:var(--grass); display:flex; align-items:center; justify-content:center; font-weight:800; font-size:14px; }
.stars { color:var(--gold); font-size:14px; letter-spacing:2px; margin-bottom:10px; }

/* ---------- FAQ ---------- */
.qa { background:var(--paper); border:1px solid var(--line); border-radius:var(--r); overflow:hidden; }
.qa + .qa { margin-top:10px; }
.qa summary { padding:17px 22px; font-weight:700; font-size:15.5px; cursor:pointer; list-style:none; display:flex; align-items:center; gap:12px; }
.qa summary::-webkit-details-marker { display:none; }
.qa summary::after { content:'+'; margin-left:auto; font-size:20px; color:var(--grass); font-weight:600; }
.qa[open] summary::after { content:'−'; }
.qa p { padding:0 22px 19px; font-size:14.5px; color:var(--ink2); }

/* ---------- Formulaires ---------- */
.lbl { display:block; font-size:13px; font-weight:700; color:var(--ink); margin-bottom:7px; margin-top:17px; }
.lbl:first-child { margin-top:0; }
input[type=text], input[type=email], input[type=password], select, textarea {
  width:100%; padding:12px 14px; border-radius:var(--r);
  background:var(--sand); border:1.5px solid var(--line2); color:var(--ink);
  transition:border-color .14s; font-size:14.5px;
}
input:focus, select:focus, textarea:focus { outline:none; border-color:var(--grass); background:var(--paper); }
input::placeholder { color:var(--ink3); }
select { cursor:pointer; }

.form-err, .form-ok { padding:10px 13px; border-radius:11px; font-size:13.5px; margin-bottom:12px; }
.form-err { background:rgba(192,72,60,.07); border:1px solid rgba(192,72,60,.22); color:var(--danger); }
.form-ok { background:var(--grass-l); border:1px solid rgba(63,143,74,.25); color:var(--grass-d); }
.code-input { text-align:center; font-size:27px; font-weight:800; letter-spacing:10px; font-family:'Bricolage Grotesque',monospace; }

/* ---------- Modales ---------- */
.overlay { position:fixed; inset:0; background:rgba(36,31,24,.42); backdrop-filter:blur(3px); z-index:120; display:flex; align-items:center; justify-content:center; padding:20px; }
.sheet { background:var(--paper); border-radius:var(--r-lg); padding:32px; width:100%; max-width:440px; max-height:90vh; overflow-y:auto; position:relative; box-shadow:var(--shadow-lg); }
.sheet-lg { max-width:580px; }
.sheet h2 { font-size:22px; margin-bottom:7px; }
.sheet .sub { font-size:14.5px; color:var(--ink2); margin-bottom:20px; }
.modal-close { position:absolute; top:16px; right:18px; background:none; border:none; color:var(--ink3); font-size:24px; cursor:pointer; line-height:1; }
.modal-close:hover { color:var(--ink); }

/* ---------- Espace client ---------- */
.dash { display:grid; grid-template-columns:224px 1fr; gap:32px; padding:34px 0 70px; }
.side { display:flex; flex-direction:column; gap:4px; position:sticky; top:92px; align-self:start; }
.side button { display:flex; align-items:center; gap:11px; width:100%; text-align:left; padding:11px 14px; border-radius:999px; border:none; background:none; color:var(--ink2); font-size:14.5px; font-weight:600; cursor:pointer; transition:.13s; }
.side button:hover { background:var(--sand2); color:var(--ink); }
.side button.active { background:var(--grass); color:#fff; }

.dash-head { margin-bottom:28px; }
.dash-head h1 { font-size:28px; }
.dash-head p { font-size:15px; color:var(--ink2); margin-top:5px; }

.stats { display:grid; grid-template-columns:repeat(auto-fit,minmax(168px,1fr)); gap:14px; margin-bottom:26px; }
.stat { background:var(--paper); border:1px solid var(--line); border-radius:var(--r); padding:17px 19px; }
.stat-label { font-size:11.5px; text-transform:uppercase; letter-spacing:.08em; color:var(--ink3); font-weight:700; }
.stat-value { font-family:'Bricolage Grotesque',sans-serif; font-size:25px; font-weight:800; margin-top:5px; letter-spacing:-.025em; }
.stat-sub { font-size:13px; color:var(--ink2); }

.banner { display:flex; align-items:center; gap:15px; flex-wrap:wrap; padding:17px 20px; border-radius:var(--r); margin-bottom:24px; background:var(--clay-l); border:1px solid rgba(196,100,60,.22); }
.banner-body { flex:1; min-width:210px; }
.banner b { color:var(--clay); font-size:14.5px; display:block; margin-bottom:2px; }
.banner p { font-size:13.5px; color:var(--ink2); }

.srv { background:var(--paper); border:1px solid var(--line); border-radius:var(--r-lg); padding:26px; }
.srv-top { display:flex; align-items:flex-start; gap:14px; flex-wrap:wrap; margin-bottom:19px; }
.srv-title { flex:1; min-width:180px; }
.srv-title h3 { font-size:20px; }
.srv-title p { font-size:14px; color:var(--ink2); margin-top:3px; }
.srv-addr { display:flex; align-items:center; gap:10px; padding:14px 16px; margin-bottom:18px; background:var(--sand); border:1.5px dashed var(--line2); border-radius:var(--r); font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:15px; font-weight:600; }
.srv-specs { display:grid; grid-template-columns:repeat(auto-fit,minmax(112px,1fr)); gap:12px; }
.srv-spec { background:var(--sand); border-radius:12px; padding:12px 14px; }
.srv-spec .k { font-size:11px; text-transform:uppercase; letter-spacing:.07em; color:var(--ink3); font-weight:700; }
.srv-spec .v { font-size:15px; font-weight:700; margin-top:3px; }

.tag { display:inline-block; padding:4px 11px; border-radius:999px; font-size:12px; font-weight:700; }
.tag-ok { background:var(--grass-l); color:var(--grass-d); }
.tag-warn { background:var(--clay-l); color:var(--clay); }

.empty { text-align:center; padding:56px 26px; background:var(--paper); border:1.5px dashed var(--line2); border-radius:var(--r-lg); }
.empty p { color:var(--ink2); margin-bottom:18px; font-size:15px; }

.rows { display:flex; flex-direction:column; background:var(--paper); border:1px solid var(--line); border-radius:var(--r); padding:0 18px; }
.row { display:flex; align-items:center; gap:12px; padding:14px 0; border-bottom:1px solid var(--line); font-size:14px; }
.row:last-child { border-bottom:none; }
.row .grow { flex:1; min-width:0; }
.row .t { font-weight:600; }
.row .s { color:var(--ink3); font-size:12.5px; }

.spinner { width:26px; height:26px; margin:0 auto; border:2.5px solid var(--line); border-top-color:var(--grass); border-radius:50%; animation:spin .7s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }
@media (prefers-reduced-motion:reduce) { *, *::before, *::after { animation-duration:.01ms !important; transition-duration:.01ms !important; } }

.picks { display:grid; gap:10px; grid-template-columns:repeat(auto-fit,minmax(158px,1fr)); }
.pick { border:1.5px solid var(--line2); background:var(--sand); border-radius:var(--r); padding:14px 15px; cursor:pointer; transition:.13s; text-align:left; }
.pick:hover { border-color:var(--grass); }
.pick.on { border-color:var(--grass); background:var(--grass-l); }
.pick b { display:block; font-size:14.5px; font-weight:700; }
.pick span { font-size:12.5px; color:var(--ink2); }

/* ---------- Pied ---------- */
.foot { background:var(--ink); color:#c8c1b4; padding:44px 0 34px; margin-top:0; }
.foot .logo { color:#fff; }
.foot-inner { display:flex; gap:20px; align-items:center; flex-wrap:wrap; font-size:14px; }
.foot-inner a { color:#c8c1b4; }
.foot-inner a:hover { color:#fff; }
.foot-sep { margin-left:auto; color:#8a8274; font-size:13px; }

:focus-visible { outline:2.5px solid var(--grass); outline-offset:2px; border-radius:4px; }

@media (max-width:900px) {
  .hero-grid { grid-template-columns:1fr; }
  .hero-art { order:-1; }
  .hero-art svg { width:min(190px,55%); }
  .dash { grid-template-columns:1fr; }
  .side { position:static; flex-direction:row; overflow-x:auto; padding-bottom:8px; }
  .side button { white-space:nowrap; }
  .nav-links { display:none; }
  .offer-price { margin-left:0; text-align:left; }
}

/* ==================================================================
   Composants des pages internes
   ================================================================== */

/* En-tete de page : version compacte du heros, fond sable creuse. */
.phead { background:var(--sand2); border-bottom:1px solid var(--line); padding:60px 0 52px; }
.phead.compact { padding:44px 0 38px; }
.phead h1 { font-size:clamp(28px,4vw,42px); margin-bottom:14px; text-wrap:balance; max-width:20ch; }
.phead-sub { font-size:17px; color:var(--ink2); max-width:62ch; }

/* Menus deroulants de la navigation */
.drop { position:relative; }
.drop-btn { background:none; border:none; cursor:pointer; font-size:14.5px; font-weight:600; color:var(--ink2); display:flex; align-items:center; gap:5px; padding:6px 0; }
.drop-btn:hover, .drop:hover .drop-btn { color:var(--grass); }
.caret { font-size:10px; opacity:.7; }
.drop-menu {
  position:absolute; top:100%; left:-14px; min-width:290px; padding:8px;
  background:var(--paper); border:1px solid var(--line); border-radius:var(--r-lg);
  box-shadow:var(--shadow-lg); opacity:0; visibility:hidden; transform:translateY(-6px);
  transition:.16s; display:flex; flex-direction:column; gap:2px; z-index:70;
}
.drop:hover .drop-menu, .drop:focus-within .drop-menu { opacity:1; visibility:visible; transform:translateY(0); }
.drop-menu a { padding:10px 13px; border-radius:11px; display:block; }
.drop-menu a:hover { background:var(--sand2); }
.drop-menu b { display:block; font-size:14.5px; font-weight:700; }
.drop-menu span { display:block; font-size:12.5px; color:var(--ink2); margin-top:1px; }

/* Bandeau d'appel a l'action */
.cta-band { background:var(--ink); color:#f0ece3; padding:52px 0; }
.cta-inner { display:flex; align-items:center; gap:26px; flex-wrap:wrap; }
.cta-inner h2 { font-size:clamp(22px,3vw,30px); color:#fff; margin-bottom:6px; }
.cta-inner p { color:#b5ac9c; font-size:15.5px; }
.cta-inner .btn { margin-left:auto; }

.center-note { text-align:center; margin-top:26px; font-size:14.5px; }
.center-note a { color:var(--grass); font-weight:700; }

/* Tableaux */
.table-wrap { overflow-x:auto; background:var(--paper); border:1px solid var(--line); border-radius:var(--r-lg); }
.tbl { width:100%; border-collapse:collapse; font-size:14.5px; min-width:640px; }
.tbl th, .tbl td { text-align:left; padding:14px 18px; border-bottom:1px solid var(--line); vertical-align:middle; }
.tbl thead th { font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink3); font-weight:700; background:var(--sand); }
.tbl tbody tr:last-child td { border-bottom:none; }
.tbl tbody tr:hover { background:var(--sand); }
.th-price { font-family:'Bricolage Grotesque',sans-serif; font-size:17px; font-weight:800; color:var(--ink); margin-top:3px; text-transform:none; letter-spacing:-.02em; }
.ok-mark { color:var(--grass); font-weight:800; }

/* Cartes de modpack */
.pack { background:var(--paper); border:1px solid var(--line); border-radius:var(--r-lg); padding:22px; transition:.16s; height:100%; }
.pack:hover { border-color:var(--grass); box-shadow:var(--shadow); }
.pack-top { display:flex; align-items:center; gap:10px; margin-bottom:9px; }
.pack-top h3 { font-size:16.5px; flex:1; }
.pack p { font-size:14px; color:var(--ink2); margin-bottom:14px; }
.pack-meta { display:flex; gap:14px; flex-wrap:wrap; font-size:12.5px; color:var(--ink3); border-top:1px solid var(--line); padding-top:12px; }
.pack-meta b { color:var(--grass); }
.filters { display:flex; gap:9px; flex-wrap:wrap; justify-content:center; margin-bottom:28px; }

/* Groupes thematiques */
.fgroup { margin-bottom:52px; }
.fgroup:last-child { margin-bottom:0; }
.fgroup-title { font-size:22px; margin-bottom:20px; display:flex; align-items:center; gap:12px; }
.fgroup-ic { width:40px; height:40px; border-radius:12px; background:var(--grass-l); display:flex; align-items:center; justify-content:center; font-size:19px; }

/* Chiffres cles */
.guarantees { display:grid; grid-template-columns:repeat(auto-fit,minmax(158px,1fr)); gap:16px; }
.guarantee { background:var(--paper); border:1px solid var(--line); border-radius:var(--r-lg); padding:22px; text-align:center; }
.guarantee b { display:block; font-family:'Bricolage Grotesque',sans-serif; font-size:29px; font-weight:800; letter-spacing:-.03em; color:var(--grass); }
.guarantee span { font-size:13.5px; color:var(--ink2); }

/* Moteurs */
.engine.soon { opacity:.72; }
.engine-top { display:flex; align-items:center; gap:11px; margin-bottom:10px; }
.engine-top h3 { font-size:21px; }
.pill-muted { background:var(--sand2); color:var(--ink2); }
.pros { display:grid; grid-template-columns:1fr 1fr; gap:18px; margin:18px 0 16px; }
.pros b { display:block; font-size:12.5px; text-transform:uppercase; letter-spacing:.06em; margin-bottom:8px; }
.pros b.ok { color:var(--grass); }
.pros b.ko { color:var(--clay); }
.pros ul { list-style:none; display:flex; flex-direction:column; gap:6px; }
.pros li { font-size:13.5px; color:var(--ink2); padding-left:16px; position:relative; }
.pros li::before { content:'·'; position:absolute; left:4px; font-weight:800; color:var(--ink3); }
.engine-meta { display:flex; gap:16px; flex-wrap:wrap; border-top:1px solid var(--line); padding-top:14px; font-size:13px; color:var(--ink3); }

/* Encadre de synthese */
.rule { background:var(--paper); border:1px solid var(--line); border-left:4px solid var(--grass); border-radius:var(--r); padding:24px 26px; }
.rule p { font-size:15.5px; margin-bottom:8px; }
.rule p:last-child { margin-bottom:0; }

/* Articles */
.prose h2 { font-size:21px; margin:32px 0 12px; display:flex; align-items:baseline; gap:12px; }
.prose h2:first-child { margin-top:0; }
.prose-n { flex-shrink:0; width:28px; height:28px; border-radius:50%; background:var(--grass); color:#fff; font-size:14px; display:inline-flex; align-items:center; justify-content:center; }
.prose p { font-size:16px; color:var(--ink2); margin-bottom:16px; }
.callout { margin-top:38px; background:var(--grass-l); border:1px solid rgba(63,143,74,.25); border-radius:var(--r-lg); padding:24px; }
.callout b { display:block; font-size:16px; margin-bottom:6px; }
.callout p { font-size:14.5px; color:var(--ink2); margin-bottom:14px; }

.guide-card { display:block; }
.guide-card:hover { border-color:var(--grass); }

/* Frise */
.timeline { display:flex; flex-direction:column; gap:2px; }
.tl { background:var(--paper); border:1px solid var(--line); border-radius:var(--r); padding:20px 24px; border-left:4px solid var(--clay); }
.tl b { font-family:'Bricolage Grotesque',sans-serif; font-size:16px; color:var(--clay); }
.tl p { font-size:15px; color:var(--ink2); margin-top:4px; }

/* Statut */
.status-rows .row { gap:14px; }
.dot-status { width:10px; height:10px; border-radius:50%; flex-shrink:0; }
.dot-status.ok { background:var(--grass); box-shadow:0 0 0 4px var(--grass-l); }
.dot-status.warn { background:var(--gold); box-shadow:0 0 0 4px rgba(217,155,43,.15); }

/* Pied multi-colonnes */
.foot-cols { display:grid; grid-template-columns:1.6fr repeat(4,1fr); gap:34px; padding-bottom:34px; }
.foot-brand p { font-size:14px; color:#a49a8a; margin-top:14px; max-width:34ch; }
.foot-cols h4 { font-family:'Bricolage Grotesque',sans-serif; font-size:13px; text-transform:uppercase; letter-spacing:.08em; color:#fff; margin-bottom:14px; }
.foot-cols > div > a { display:block; font-size:14px; padding:4px 0; color:#a49a8a; }
.foot-cols > div > a:hover { color:#fff; }
.foot-bottom { border-top:1px solid rgba(255,255,255,.1); padding-top:24px; display:flex; gap:18px; flex-wrap:wrap; font-size:13px; color:#8a8274; }
.foot-bottom .muted { color:#6f6759; margin-left:auto; max-width:46ch; }

@media (max-width:900px) {
  .foot-cols { grid-template-columns:1fr 1fr; gap:26px; }
  .pros { grid-template-columns:1fr; }
  .cta-inner .btn { margin-left:0; }
  .foot-bottom .muted { margin-left:0; }
}

/* ---------- Page Tarifs : grille de cartes ---------- */

.tiers { display:grid; grid-template-columns:repeat(auto-fit,minmax(252px,1fr)); gap:18px; align-items:stretch; }
@media (min-width:1080px) { .tiers { grid-template-columns:repeat(4,1fr); } }

.tier {
  position:relative; display:flex; flex-direction:column; gap:16px;
  background:var(--paper); border:1.5px solid var(--line); border-radius:var(--r-lg);
  padding:26px 22px 22px; transition:.16s;
}
.tier:hover { border-color:var(--line2); box-shadow:var(--shadow); transform:translateY(-3px); }
.tier-pop { border-color:var(--grass); border-width:2px; box-shadow:var(--shadow-lg); }
.tier-pop:hover { border-color:var(--grass); }
.tier-ribbon {
  position:absolute; top:-11px; left:50%; transform:translateX(-50%);
  background:var(--grass); color:#fff; font-size:11.5px; font-weight:800;
  padding:4px 13px; border-radius:999px; white-space:nowrap;
}

.tier-head h3 { font-size:15px; text-transform:uppercase; letter-spacing:.08em; color:var(--ink3); font-weight:700; }
.tier-price { display:flex; align-items:baseline; gap:4px; margin:6px 0 8px; }
.tier-price b { font-family:'Bricolage Grotesque',sans-serif; font-size:30px; font-weight:800; letter-spacing:-.035em; }
.tier-price span { font-size:13.5px; color:var(--ink2); }
.tier-for { font-size:13.5px; color:var(--ink2); min-height:2.8em; }

/* Bloc 2x2 : les quatre chiffres qui decident, lisibles sans lire. */
.tier-specs { display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--r); overflow:hidden; }
.tier-specs > div { background:var(--sand); padding:12px 13px; }
.tier-specs b { display:block; font-family:'Bricolage Grotesque',sans-serif; font-size:16px; font-weight:700; }
.tier-specs span { display:block; font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--ink3); font-weight:700; margin-top:2px; }

/* Contrairement aux grilles habituelles, cette liste differe d'une carte a
   l'autre : elle dit ce que CETTE offre fait tourner. */
.tier-runs { list-style:none; display:flex; flex-direction:column; gap:8px; flex:1; }
.tier-runs li { font-size:13.5px; color:var(--ink2); padding-left:20px; position:relative; line-height:1.45; }
.tier-runs li::before { content:'✓'; position:absolute; left:0; top:0; color:var(--grass); font-weight:800; }

.tier-extra { display:flex; gap:8px; flex-wrap:wrap; }
.tier-extra span { font-size:12px; font-weight:600; padding:4px 10px; border-radius:999px; background:var(--sand2); color:var(--ink2); }

.tier-ex { font-size:12.5px; color:var(--ink3); font-style:italic; line-height:1.45; border-left:2px solid var(--line2); padding-left:11px; }

/* Bandeau « inclus partout » */
.included { display:grid; grid-template-columns:repeat(auto-fit,minmax(232px,1fr)); gap:14px; }
.inc { display:flex; gap:11px; align-items:flex-start; background:var(--paper); border:1px solid var(--line); border-radius:var(--r); padding:15px 17px; }
.inc-check { width:22px; height:22px; border-radius:50%; background:var(--grass-l); color:var(--grass); font-size:12px; font-weight:800; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.inc b { display:block; font-size:14px; font-weight:700; }
.inc span { display:block; font-size:12.5px; color:var(--ink2); margin-top:1px; }

/* Encadre « on assume nos chiffres » : le positionnement tient a cette
   transparence, autant lui donner une place visible plutot qu'une note de bas
   de page. */
.honest { max-width:760px; margin:34px auto 0; background:var(--clay-l); border:1px solid rgba(196,100,60,.22); border-radius:var(--r-lg); padding:22px 26px; }
.honest b { color:var(--clay); }
.honest > b { display:block; font-size:15.5px; margin-bottom:9px; }
.honest p { font-size:14.5px; color:var(--ink2); margin-bottom:9px; }
.honest p:last-child { margin-bottom:0; }

/* ---------- Navigation mobile ---------- */

.burger { display:none; width:42px; height:38px; border:1.5px solid var(--line2); background:var(--paper); border-radius:11px; cursor:pointer; padding:0; flex-direction:column; align-items:center; justify-content:center; gap:4px; }
.burger span { display:block; width:17px; height:2px; background:var(--ink); border-radius:2px; transition:.18s; }
.burger[aria-expanded="true"] { border-color:var(--grass); }
.burger[aria-expanded="true"] span:nth-child(1) { transform:translateY(6px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity:0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform:translateY(-6px) rotate(-45deg); }

.mnav { position:fixed; inset:68px 0 0; z-index:55; background:var(--sand); overflow-y:auto; padding:22px 0 40px; }
.mnav[hidden] { display:none; }
.mnav-inner { display:flex; flex-direction:column; gap:22px; }
.mnav-group h4 { font-family:'Bricolage Grotesque',sans-serif; font-size:12px; text-transform:uppercase; letter-spacing:.1em; color:var(--ink3); margin-bottom:8px; }
.mnav-group a { display:block; font-size:16.5px; font-weight:600; padding:11px 14px; border-radius:var(--r); background:var(--paper); border:1px solid var(--line); margin-bottom:7px; }
.mnav-group a:active { border-color:var(--grass); }
.mnav-actions { display:flex; flex-direction:column; gap:10px; border-top:1px solid var(--line); padding-top:20px; }

@media (max-width:900px) {
  .burger { display:flex; }
  .no-mobile { display:none !important; }
  /* Le panneau occupe l'ecran : on bloque le defilement derriere lui. */
  body.menu-open { overflow:hidden; }
}
@media (min-width:901px) {
  .mnav { display:none !important; }
}

/* Sur mobile, la barre doit tenir dans 390 px : logo + action + hamburger.
   Sans ces reglages, l'ensemble deborde et c'est tout le document qui
   s'elargit, ce qui decale la page entiere. */
.only-mobile { display:none; }
@media (max-width:900px) {
  .only-mobile { display:inline; }
  .nav-inner { gap:12px; }
  .logo { font-size:17px; }
  .logo-mark { width:23px; height:23px; }
  .nav-right { gap:8px; }
  .hero { padding:52px 0 108px; }
  .section { padding:52px 0; }
}

/* ==================================================================
   Blocs d'infrastructure : console, panel, machines
   ================================================================== */

.section-dark { background:#1a241c; color:#dfe4dd; }
.section-dark h2 { color:#fff; }
.section-dark p { color:#a9b4a7; }
.eyebrow-dark { background:rgba(108,181,113,.16); color:#8fce96; }

/* Deux colonnes texte / illustration, inversables. */
.split { display:grid; grid-template-columns:.9fr 1.1fr; gap:46px; align-items:center; }
/* .tl appartient a la frise chronologique : ne pas le reutiliser ailleurs. */
.split-rev .split-txt { order:2; }
.split-txt h2 { font-size:clamp(24px,3.2vw,33px); margin-bottom:14px; text-wrap:balance; }
.split-txt p { font-size:16px; margin-bottom:18px; }
.split-list { list-style:none; display:flex; flex-direction:column; gap:9px; }
.split-list li { font-size:14.5px; color:#a9b4a7; padding-left:22px; position:relative; }
.split-list li::before { content:'›'; position:absolute; left:0; color:#6cb571; font-weight:800; font-size:16px; }
.split-art { min-width:0; }

/* ---------- Console ---------- */
.term { background:#0f1512; border:1px solid #2b3a2d; border-radius:var(--r-lg); overflow:hidden; box-shadow:0 24px 50px -22px rgba(0,0,0,.7); }
.term-bar { display:flex; align-items:center; gap:7px; padding:11px 14px; background:#15201a; border-bottom:1px solid #2b3a2d; }
.tdot { width:10px; height:10px; border-radius:50%; }
.tdot.r { background:#e06c5e; } .tdot.y { background:#d9a441; } .tdot.g { background:#5aab63; }
.term-title { margin-left:8px; font-size:12.5px; color:#7d8b7f; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; }
.term-live { margin-left:auto; display:flex; align-items:center; gap:6px; font-size:11.5px; color:#6cb571; }
.term-live i { width:6px; height:6px; border-radius:50%; background:#6cb571; animation:pulse 1.8s ease-in-out infinite; }
@keyframes pulse { 0%,100% { opacity:1 } 50% { opacity:.25 } }
.term-body {
  margin:0; padding:16px 18px; overflow-x:auto;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:12.5px; line-height:1.85; color:#c3cec4; white-space:pre;
  /* Hauteur plafonnee : une console est censee defiler, pas s'etirer sur
     toute la page et laisser le texte voisin flotter dans le vide. */
  max-height:330px; overflow-y:auto;
}
.tline { display:block; }
.t-time { color:#5f6f62; }
.t-info { color:#7fa4d8; }
.t-warn { color:#d9a441; }
.t-done { color:#6cb571; font-weight:600; }
.t-join { color:#b28ed4; }
.t-caret { color:#6cb571; animation:pulse 1.1s steps(1) infinite; }

/* ---------- Apercu du panel ---------- */
.pmock { background:var(--paper); border:1px solid var(--line); border-radius:var(--r-lg); padding:22px; box-shadow:var(--shadow-lg); }
.pm-head { display:flex; align-items:center; gap:12px; flex-wrap:wrap; padding-bottom:16px; border-bottom:1px solid var(--line); }
.pm-name { font-family:'Bricolage Grotesque',sans-serif; font-weight:800; font-size:17px; margin-right:8px; }
.pm-addr { margin-left:auto; font-size:13.5px; background:var(--sand); border:1px dashed var(--line2); padding:6px 11px; border-radius:9px; }
.pm-actions { display:flex; gap:8px; flex-wrap:wrap; padding:16px 0; }
.pm-btn { font-size:13px; font-weight:700; padding:7px 14px; border-radius:999px; border:1.5px solid var(--line2); color:var(--ink2); }
.pm-btn.on { background:var(--grass); border-color:var(--grass); color:#fff; }
.pm-btn.danger { color:var(--danger); border-color:rgba(192,72,60,.3); }
.pm-gauges { display:grid; grid-template-columns:1fr 1fr; gap:16px; padding:6px 0 18px; }
.pm-g-top { display:flex; justify-content:space-between; font-size:12.5px; color:var(--ink2); margin-bottom:6px; }
.pm-g-top b { color:var(--ink); font-weight:700; }
.pm-bar { height:7px; border-radius:99px; background:var(--sand2); overflow:hidden; }
.pm-bar i { display:block; height:100%; background:var(--grass); border-radius:99px; }
.pm-bar i.clay { background:var(--clay); }
.pm-bar i.warn { background:var(--gold); }
.pm-tabs { display:flex; gap:6px; flex-wrap:wrap; border-top:1px solid var(--line); padding-top:16px; }
.pm-tabs span { font-size:12.5px; font-weight:600; color:var(--ink3); padding:5px 11px; border-radius:8px; }
.pm-tabs span.on { background:var(--grass-l); color:var(--grass-d); }

/* ---------- Machines ---------- */
.nodes { display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:18px; }
.node { background:var(--paper); border:1px solid var(--line); border-radius:var(--r-lg); padding:22px; }
.node-top { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:16px; }
.node-id { font-family:'Bricolage Grotesque',sans-serif; font-weight:800; font-size:17px; }
.node-city { font-size:13.5px; color:var(--ink2); }
.node-live { margin-left:auto; display:flex; align-items:center; gap:6px; font-size:12px; font-weight:600; color:var(--grass); }
.node-live i { width:7px; height:7px; border-radius:50%; background:var(--grass); animation:pulse 2.2s ease-in-out infinite; }
.node-specs { display:flex; flex-direction:column; gap:11px; padding-bottom:16px; border-bottom:1px solid var(--line); }
.node-specs > div { display:grid; grid-template-columns:88px 1fr; gap:4px 12px; align-items:baseline; }
.node-specs span { font-size:11.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--ink3); font-weight:700; }
.node-specs b { font-size:14.5px; font-weight:700; }
.node-specs em { grid-column:2; font-style:normal; font-size:12.5px; color:var(--ink2); margin-top:-2px; }
.node-load { padding:16px 0; }
.node-l-top { display:flex; justify-content:space-between; font-size:12.5px; color:var(--ink2); margin-bottom:7px; }
.node-l-top b { color:var(--ink); }
.node-foot { display:flex; gap:18px; flex-wrap:wrap; border-top:1px solid var(--line); padding-top:14px; font-size:13px; color:var(--ink2); }
.node-foot b { color:var(--ink); }

@media (max-width:900px) {
  .split { grid-template-columns:1fr; gap:28px; }
  .split-rev .split-txt { order:0; }
  .pm-gauges { grid-template-columns:1fr; }
  .term-body { font-size:11.5px; }
}

/* Rail de prix dans le heros : le tarif d'entree doit etre lisible sans
   defiler. C'est la premiere question que se pose un visiteur. */
.hero-prices { display:flex; gap:7px; flex-wrap:wrap; margin-top:22px; }
.hprice {
  display:flex; flex-direction:column; gap:1px; padding:8px 12px;
  border-radius:var(--r); border:1px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.06); transition:.15s;
}
.hprice:hover { background:rgba(255,255,255,.12); border-color:rgba(108,181,113,.55); transform:translateY(-2px); }
.hprice b { font-family:'Bricolage Grotesque',sans-serif; font-size:14px; font-weight:800; color:#fff; }
.hprice span { font-size:13px; color:#9fbfa4; font-weight:600; }
.hprice-more { border-style:dashed; }
.hprice-more b { color:#8fce96; }

@media (max-width:900px) {
  .hero-prices { gap:7px; }
  .hprice { padding:8px 12px; }
}

/* ---------- Blocs isométriques ---------- */

.blk { width:100%; height:auto; display:block; }

/* Page Tarifs : le bloc coiffe la carte, aligne avec le nom de l'offre. */
.tier-blk { width:38px; margin-bottom:10px; }
.tier-pop .tier-blk { width:44px; }

/* Sélecteur : bloc à gauche du nom, taille généreuse. */
.offer-blk { width:52px; flex-shrink:0; }
.offer-top { align-items:center; }

/* Comparatif : petit repère en tête de colonne. */
.th-blk { display:block; width:26px; margin:0 auto 6px; }

/* Rail du héros : bloc minuscule, juste assez pour donner le matériau. */
.hprice { flex-direction:row; align-items:center; gap:8px; }
.hprice-blk { width:22px; flex-shrink:0; }
.hprice-txt { display:flex; flex-direction:column; gap:1px; }

/* Moteurs : remplace le carré à initiale. */
.feat-blk { width:42px; flex-shrink:0; }

/* Modpacks : discret, en tête de carte. */
.pack-blk { width:24px; flex-shrink:0; }

@media (max-width:900px) {
  .offer-blk { width:42px; }
  .tier-blk { width:34px; }
}
.engine-blk { width:34px; flex-shrink:0; }

/* ---------- Pilotage du serveur dans l'espace client ---------- */
.srv-power { display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-top:18px; padding-top:18px; border-top:1px solid var(--line); }
.srv-state { display:flex; align-items:center; gap:8px; font-size:14px; font-weight:700; }
.srv-state i { width:9px; height:9px; border-radius:50%; background:var(--ink3); }
.srv-state.ok { color:var(--grass); } .srv-state.ok i { background:var(--grass); animation:pulse 2.2s ease-in-out infinite; }
.srv-state.warn { color:var(--gold); } .srv-state.warn i { background:var(--gold); animation:pulse 1.2s ease-in-out infinite; }
.srv-state.off { color:var(--ink3); }
.srv-btns { display:flex; gap:8px; flex-wrap:wrap; margin-left:auto; }
.srv-live:not(:empty) { margin-top:16px; }
@media (max-width:700px) { .srv-btns { margin-left:0; } }