/* =============================================================
   MaCloud.uk — Feuille de style principale
   Design sombre premium · Responsive · Compatible RTL (arabe)

   ─────────────────────────────────────────────────────────────
   JETONS DE DESIGN — SOURCE DE VERITE (20/08/2026)

   Ce bloc `:root` fait autorite pour les DEUX sites MaCloud :
   macloud.uk (ici) et support.macloud.uk
   (C:\support\assets\css\style.css), qui le recopie a l'identique.

   Les deux fichiers restent volontairement SEPARES : ce sont deux
   sites IIS deployes independamment, et l'un porte le tunnel de
   paiement. Les coupler par un fichier CSS partage ferait qu'une
   retouche de style sur l'admin pourrait casser la boutique.

   En revanche les VALEURS doivent rester identiques. Elles avaient
   deja diverge (--bg, --ok, --radius differents, et la meme couleur
   d'avertissement nommee --gold ici et --warn la-bas) alors que le
   commentaire d'en-tete du fichier support affirmait le contraire.
   Realigne le 20/08/2026.

   REGLE : toute modification d'un jeton ci-dessous doit etre reportee
   dans C:\support\assets\css\style.css, et inversement. Les alias en
   fin de bloc existent pour que les deux vocabulaires fonctionnent
   partout — on n'a donc plus a se souvenir du nom "local".
   ───────────────────────────────────────────────────────────── */

:root{
  --bg:#070b16;
  --bg2:#0b1120;
  --surface:#0f172a;
  --surface2:#131c33;
  --line:rgba(148,163,184,.16);
  --line2:rgba(148,163,184,.28);
  --txt:#e8edf7;
  --muted:#94a3b8;
  --dim:#64748b;
  --brand:#38bdf8;
  --brand2:#a78bfa;
  --ok:#34d399;
  --wa:#25d366;
  --gold:#fbbf24;
  --radius:18px;
  --radius-sm:12px;
  --shadow:0 24px 60px -20px rgba(0,0,0,.75);
  --ff:'Manrope',system-ui,-apple-system,'Segoe UI',sans-serif;
  --ff-ar:'Cairo','Segoe UI',Tahoma,sans-serif;
  --wrap:1200px;
  --hdr:70px;

  /* Alias — meme couleur, autre nom. Introduits pour que le vocabulaire
     de support.macloud.uk fonctionne aussi ici, et reciproquement. */
  --warn:var(--gold);      /* nom utilise cote support */
  --danger:#f87171;        /* n'existait qu'cote support */
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--hdr) + 20px);-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--txt);font-family:var(--ff);
  font-size:16px;line-height:1.65;overflow-x:hidden;
  background-image:
    radial-gradient(900px 500px at 85% -8%,rgba(167,139,250,.16),transparent 60%),
    radial-gradient(800px 460px at 8% 4%,rgba(56,189,248,.14),transparent 62%);
  background-attachment:fixed;
}
html[dir="rtl"] body{font-family:var(--ff-ar);line-height:1.85}
html[dir="rtl"] .brand__txt,html[dir="rtl"] .price__v{font-family:var(--ff)}

img,svg{max-width:100%}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3,h4{margin:0;line-height:1.2;font-weight:800;letter-spacing:-.02em}
html[dir="rtl"] h1,html[dir="rtl"] h2,html[dir="rtl"] h3{letter-spacing:0;line-height:1.4}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}

.wrap{width:min(100% - 40px,var(--wrap));margin-inline:auto}
.wrap--narrow{width:min(100% - 40px,860px)}

.skip-link{position:absolute;inset-inline-start:-9999px;top:0;background:var(--brand);color:#031425;padding:12px 20px;z-index:200;border-radius:0 0 10px 0;font-weight:700}
.skip-link:focus{inset-inline-start:0}

:focus-visible{outline:2px solid var(--brand);outline-offset:3px;border-radius:6px}

/* ══════════ TOP BAR ══════════ */
.topbar{background:linear-gradient(90deg,#0e7490,#4c1d95);font-size:13px}
.topbar__in{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:38px;flex-wrap:wrap}
.topbar__msg{font-weight:600;color:#e0f2fe}
.topbar__links{display:flex;align-items:center;gap:18px;flex-wrap:wrap;color:#dbeafe}
.topbar__links a{color:#dbeafe;opacity:.92;white-space:nowrap;transition:opacity .2s}
.topbar__links a:hover{opacity:1;text-decoration:underline}
.topbar__wa{
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.25);
  color:#fff;border-radius:99px;padding:4px 13px;font-size:12.5px;font-weight:700;
  cursor:pointer;white-space:nowrap;transition:background .2s;
}
.topbar__wa:hover{background:rgba(255,255,255,.26)}

/* ══════════ HEADER ══════════ */
.header{
  position:sticky;top:0;z-index:100;
  background:rgba(7,11,22,.72);backdrop-filter:blur(16px);
  border-bottom:1px solid var(--line);
}
.header.scrolled{background:rgba(7,11,22,.94);box-shadow:0 10px 30px -18px #000}
.header__in{display:flex;align-items:center;gap:20px;min-height:var(--hdr)}

.brand{display:inline-flex;align-items:center;gap:10px;flex-shrink:0}
.brand__mark{width:34px;height:34px}
.brand__txt{font-size:20px;font-weight:700;letter-spacing:-.03em;font-family:var(--ff)}
.brand__txt b{background:linear-gradient(90deg,var(--brand),var(--brand2));-webkit-background-clip:text;background-clip:text;color:transparent}
.brand__txt i{font-style:normal;color:var(--dim);font-size:14px}

.nav{display:flex;gap:4px;margin-inline-start:auto;flex-wrap:wrap}
.nav a{
  padding:9px 13px;border-radius:10px;font-size:14.5px;font-weight:600;color:var(--muted);
  transition:color .2s,background .2s;white-space:nowrap;
}
.nav a:hover,.nav a.active{color:var(--txt);background:rgba(148,163,184,.12)}

.tools{display:flex;align-items:center;gap:8px;margin-inline-start:auto}
.nav + .tools{margin-inline-start:0}

/* Sélecteurs langue / devise */
.select{position:relative}
.select__btn{
  display:inline-flex;align-items:center;gap:7px;padding:8px 11px;
  background:var(--surface);border:1px solid var(--line);border-radius:10px;
  font-size:13.5px;font-weight:700;cursor:pointer;transition:border-color .2s,background .2s;
}
.select__btn:hover{border-color:var(--line2);background:var(--surface2)}
.caret{width:9px;height:6px;opacity:.6;transition:transform .2s}
.select.open .caret{transform:rotate(180deg)}
.select__menu{
  position:absolute;inset-inline-end:0;top:calc(100% + 8px);min-width:190px;
  background:var(--surface);border:1px solid var(--line2);border-radius:14px;padding:6px;
  box-shadow:var(--shadow);opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:.18s;z-index:120;
}
.select.open .select__menu{opacity:1;visibility:visible;transform:translateY(0)}
.select__menu li{
  display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:9px;
  cursor:pointer;font-size:14px;font-weight:600;transition:background .15s;
}
.select__menu li:hover{background:rgba(56,189,248,.14)}
.select__menu li[aria-selected="true"]{background:rgba(56,189,248,.18);color:var(--brand)}

.cartbtn{
  position:relative;display:inline-flex;align-items:center;justify-content:center;
  width:42px;height:42px;background:var(--surface);border:1px solid var(--line);
  border-radius:11px;cursor:pointer;transition:border-color .2s,background .2s;
}
.cartbtn:hover{border-color:var(--brand);background:var(--surface2)}
.cartbtn svg{width:21px;height:21px}
.cartbtn b{
  position:absolute;top:-6px;inset-inline-end:-6px;min-width:20px;height:20px;
  display:grid;place-items:center;background:var(--brand);color:#04121f;
  border-radius:99px;font-size:11.5px;font-weight:800;padding:0 5px;
}

.burger{display:none;flex-direction:column;justify-content:center;gap:5px;width:42px;height:42px;background:var(--surface);border:1px solid var(--line);border-radius:11px;cursor:pointer;padding:0 10px}
.burger span{height:2px;background:var(--txt);border-radius:2px;transition:.25s}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ══════════ BOUTONS ══════════ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:13px 24px;border-radius:12px;border:1px solid transparent;
  font-weight:700;font-size:15px;cursor:pointer;transition:.2s;white-space:nowrap;
}
.btn--primary{background:linear-gradient(135deg,var(--brand),var(--brand2));color:#050d1c;box-shadow:0 12px 28px -12px rgba(56,189,248,.7)}
.btn--primary:hover{transform:translateY(-2px);box-shadow:0 18px 34px -12px rgba(56,189,248,.85)}
.btn--ghost{background:rgba(148,163,184,.08);border-color:var(--line2);color:var(--txt)}
.btn--ghost:hover{background:rgba(148,163,184,.16);border-color:var(--brand)}
.btn--wa{background:var(--wa);color:#03230f}
.btn--wa:hover{filter:brightness(1.08);transform:translateY(-2px)}
.btn--link{background:none;border:none;color:var(--dim);font-weight:600;font-size:13.5px;padding:8px}
.btn--link:hover{color:#f87171}
.btn--full{width:100%}
.btn--sm{padding:10px 16px;font-size:14px}
.btn.is-added{background:var(--ok);color:#032218}

/* ══════════ HERO ══════════ */
.hero{position:relative;padding:76px 0 64px;overflow:hidden}
.hero__glow{position:absolute;inset-inline-end:-180px;top:-160px;width:620px;height:620px;border-radius:50%;background:radial-gradient(circle,rgba(167,139,250,.28),transparent 65%);filter:blur(40px);pointer-events:none}
.hero__in{display:grid;grid-template-columns:1.25fr .85fr;gap:46px;align-items:center;position:relative}
.pill{
  display:inline-flex;align-items:center;gap:8px;padding:7px 16px;border-radius:99px;
  background:rgba(56,189,248,.12);border:1px solid rgba(56,189,248,.34);
  color:#7dd3fc;font-size:13.5px;font-weight:700;margin-bottom:22px;
}
.hero h1{font-size:clamp(2.1rem,4.6vw,3.5rem);margin-bottom:20px}
.hero h1 em{font-style:normal;background:linear-gradient(90deg,var(--gold),#f97316);-webkit-background-clip:text;background-clip:text;color:transparent;white-space:nowrap}
.hero__txt > p{color:var(--muted);font-size:17.5px;max-width:610px;margin-bottom:30px}
.hero__cta{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:24px}

.hero__facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;max-width:640px}
.hero__facts li{background:rgba(15,23,42,.6);border:1px solid var(--line);border-radius:14px;padding:14px 12px;text-align:center}
.hero__facts b{display:block;font-size:19px;color:var(--brand);font-weight:800}
.hero__facts span{font-size:12.5px;color:var(--dim);line-height:1.35;display:block;margin-top:3px}

.hero__card{
  background:linear-gradient(165deg,rgba(19,28,51,.96),rgba(11,17,32,.96));
  border:1px solid var(--line2);border-radius:24px;padding:28px;box-shadow:var(--shadow);
  position:relative;overflow:hidden;
}
.hero__card::before{content:"";position:absolute;inset:0 0 auto;height:3px;background:linear-gradient(90deg,var(--brand),var(--brand2),var(--gold))}
.hero__card-head span{display:block;font-size:12.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
.hero__card-head b{display:block;font-size:24px;font-weight:800;margin-top:6px}
.hero__price{display:flex;align-items:baseline;gap:8px;margin:16px 0 20px}
.hero__price-v{font-size:42px;font-weight:800;background:linear-gradient(90deg,var(--brand),var(--brand2));-webkit-background-clip:text;background-clip:text;color:transparent;font-family:var(--ff)}
.hero__price small{color:var(--muted);font-size:15px;font-weight:600}
.hero__card-note{margin-top:14px;text-align:center;font-size:13px;color:var(--dim)}

.ticks{display:grid;gap:11px;margin-bottom:24px}
.ticks li{position:relative;padding-inline-start:28px;font-size:14.5px;color:#cbd5e1}
.ticks li::before{
  content:"";position:absolute;inset-inline-start:0;top:6px;width:17px;height:17px;border-radius:50%;
  background:rgba(52,211,153,.16);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2334d399' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E");
  background-size:11px;background-repeat:no-repeat;background-position:center;
}

/* ══════════ STRIP ══════════ */
.strip{border-block:1px solid var(--line);background:rgba(15,23,42,.5)}
.strip__in{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line)}
.strip__in > div{background:var(--bg);padding:22px 20px}
.strip__in b{display:block;font-size:15px;margin-bottom:3px}
.strip__in span{font-size:13px;color:var(--dim)}

/* ══════════ SECTIONS ══════════ */
.sec{padding:80px 0}
.sec--alt{background:rgba(11,17,32,.62);border-block:1px solid var(--line)}
.sec__head{max-width:720px;margin-bottom:44px}
.eyebrow{display:block;font-size:12.5px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--brand);margin-bottom:12px}
html[dir="rtl"] .eyebrow{letter-spacing:0}
.sec__head h2{font-size:clamp(1.7rem,3.2vw,2.5rem);margin-bottom:14px}
.sec__head p{color:var(--muted);font-size:16.5px}

/* ══════════ CATÉGORIES ══════════ */
.catgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.catcard{
  position:relative;background:var(--surface);border:1px solid var(--line);border-radius:20px;
  padding:30px 26px;transition:.25s;overflow:hidden;cursor:pointer;
}
.catcard::after{content:"";position:absolute;inset:auto 0 0;height:3px;background:var(--acc);transform:scaleX(0);transform-origin:inline-start;transition:transform .3s}
.catcard:hover{transform:translateY(-5px);border-color:var(--line2);box-shadow:var(--shadow)}
.catcard:hover::after{transform:scaleX(1)}
.catcard__ic{width:54px;height:54px;border-radius:15px;display:grid;place-items:center;background:color-mix(in srgb,var(--acc) 16%,transparent);color:var(--acc);margin-bottom:18px}
.catcard__ic svg{width:28px;height:28px;fill:currentColor}
.catcard h3{font-size:21px;margin-bottom:10px}
.catcard p{color:var(--muted);font-size:14.5px;margin-bottom:18px}
.catcard__foot{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:14px;font-weight:700;color:var(--acc)}
.catcard__n{background:rgba(148,163,184,.12);color:var(--muted);padding:4px 11px;border-radius:99px;font-size:12.5px;font-weight:700}

/* ══════════ FILTRES ══════════ */
.filters{display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin-bottom:34px}
.filters__row{display:flex;gap:8px;flex-wrap:wrap}
.chip{
  padding:9px 17px;border-radius:99px;background:var(--surface);border:1px solid var(--line);
  font-size:14px;font-weight:700;color:var(--muted);cursor:pointer;transition:.2s;
}
.chip:hover{border-color:var(--line2);color:var(--txt)}
.chip.active{background:linear-gradient(135deg,var(--brand),var(--brand2));border-color:transparent;color:#050d1c}
.filters__row--sm .chip{padding:7px 14px;font-size:13px}
.filters__search{
  position:relative;margin-inline-start:auto;display:flex;align-items:center;
  background:var(--surface);border:1px solid var(--line);border-radius:11px;padding:0 14px;min-width:250px;
}
.filters__search:focus-within{border-color:var(--brand)}
.filters__search svg{width:17px;height:17px;color:var(--dim);flex-shrink:0}
.filters__search input{background:none;border:none;outline:none;padding:11px 10px;width:100%;font-size:14.5px}

/* ══════════ GRILLE PRODUITS ══════════ */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:22px}
.card{
  position:relative;display:flex;flex-direction:column;
  background:var(--surface);border:1px solid var(--line);border-radius:20px;
  padding:24px;transition:.25s;
}
.card:hover{transform:translateY(-5px);border-color:var(--line2);box-shadow:var(--shadow)}
.card__top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:16px}
.card__ic{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;background:rgba(56,189,248,.12);color:var(--brand)}
.card__ic svg{width:25px;height:25px;fill:currentColor}
.card__photo{width:100%;aspect-ratio:4/3;object-fit:contain;border-radius:14px;background:var(--surface2)}
/* Produits avec une vraie photo (gérée depuis l'admin) : la photo prend
   toute la largeur de .card__top, les badges se superposent en coin plutôt
   que de se placer à côté (layout normal, pensé pour la petite icône). */
.card__top:has(.card__photo){display:block;position:relative}
.card__top:has(.card__photo) .badges{position:absolute;top:10px;inset-inline-end:10px;flex-direction:row}
.badges{display:flex;flex-direction:column;align-items:flex-end;gap:6px}
html[dir="rtl"] .badges{align-items:flex-start}
.badge{padding:4px 10px;border-radius:99px;font-size:11.5px;font-weight:800;letter-spacing:.02em}
.badge--term{background:rgba(167,139,250,.16);color:#c4b5fd}
.badge--hot{background:rgba(251,191,36,.16);color:var(--gold)}
.badge--usa{background:rgba(56,189,248,.14);color:#7dd3fc}
.card h3{font-size:17.5px;margin-bottom:6px;line-height:1.32}
.card__short{color:var(--dim);font-size:13.5px;margin-bottom:16px}
.card__feat{display:grid;gap:8px;margin-bottom:20px;flex:1}
.card__feat li{position:relative;padding-inline-start:22px;font-size:13.5px;color:#b6c2d4}
.card__feat li::before{
  content:"";position:absolute;inset-inline-start:0;top:7px;width:13px;height:13px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2338bdf8' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E");
  background-size:contain;background-repeat:no-repeat;
}
.price{display:flex;align-items:baseline;gap:10px;margin-bottom:16px;flex-wrap:wrap}
.price__v{font-size:29px;font-weight:800;color:var(--txt);font-family:var(--ff)}
.price__old{font-size:15px;color:var(--dim);text-decoration:line-through}
.price__u{font-size:13.5px;color:var(--muted);font-weight:600}
.price__save{background:rgba(52,211,153,.14);color:var(--ok);padding:3px 9px;border-radius:99px;font-size:11.5px;font-weight:800}
.card__actions{display:grid;grid-template-columns:1fr auto;gap:9px}
.card__wa{
  display:grid;place-items:center;width:46px;padding:0;border-radius:12px;cursor:pointer;
  background:rgba(37,211,102,.14);border:1px solid rgba(37,211,102,.32);color:var(--wa);transition:.2s;
}
.card__wa:hover{background:var(--wa);color:#03230f}
.card__wa svg{width:21px;height:21px}
.card__delivery{margin-top:12px;font-size:12px;color:var(--dim);display:flex;align-items:center;gap:6px;justify-content:center}
.card__delivery::before{content:"⚡"}

.empty{text-align:center;color:var(--muted);padding:50px 0;font-size:16px}

/* ══════════ SERVICES ══════════ */
.srvgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:22px}
.srv{
  position:relative;display:flex;flex-direction:column;
  background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:26px;transition:.25s;
}
.srv:hover{transform:translateY(-5px);border-color:var(--line2);box-shadow:var(--shadow)}
.srv--featured{border-color:rgba(56,189,248,.5);background:linear-gradient(165deg,rgba(19,28,51,.98),rgba(11,17,32,.98))}
.srv--featured::before{content:"";position:absolute;inset:0 0 auto;height:3px;background:linear-gradient(90deg,var(--brand),var(--brand2),var(--gold));border-radius:20px 20px 0 0}
.srv__ic{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;background:rgba(167,139,250,.14);color:var(--brand2);margin-bottom:16px}
.srv__ic svg{width:25px;height:25px;fill:currentColor}
.srv h3{font-size:19px;margin-bottom:8px}
.srv__short{color:var(--dim);font-size:14px;margin-bottom:18px}
.srv .ticks{margin-bottom:22px;flex:1}
.srv .ticks li{font-size:13.5px}

/* ══════════ PAIEMENT EN LIGNE (PayPal) ══════════ */
.paygrid{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:8px}
.paycard{
  display:flex;flex-direction:column;align-items:flex-start;gap:6px;
  background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:26px;
}
.paycard__label{font-size:14.5px;color:var(--muted);font-weight:700;text-transform:uppercase;letter-spacing:.04em}
.paycard__amt{font-size:30px;font-weight:800;background:linear-gradient(90deg,var(--brand),var(--brand2));-webkit-background-clip:text;background-clip:text;color:transparent;font-family:var(--ff)}
.paycard p{color:var(--muted);font-size:14px;margin:2px 0 16px}
.paycard > div,.paycard > paypal-cart-button{width:100%}
/* Le montant porte un petit « TTC » : les prix du site incluent deja la TVA
   marocaine de 20 %. Il est en couleur pleine, pas dans le degrade du
   montant, sinon le mot devient illisible a cette taille. */
.paycard__amt small{font-size:14px;font-weight:700;color:var(--muted);-webkit-text-fill-color:var(--muted)}
/* La carte « Payer mon panier » est le vrai parcours d'achat : elle occupe
   toute la largeur au-dessus des trois montants fixes, qui sont secondaires. */
.paycard--lead{grid-column:1/-1;border-color:var(--brand)}
.paynote{margin-top:18px;text-align:center;color:var(--dim);font-size:13px}
.paynote--ok{color:#34d399;font-weight:600}
.paynote--err{color:#f87171;font-weight:600}
.paynote--warn{color:#fbbf24;font-weight:600}

/* Boîte de recherche — visuellement proche d'une vraie boutique domaines,
   mais n'effectue AUCUNE vérification de disponibilité elle-même : elle
   effectue depuis le 20/08/2026 une VRAIE vérification auprès du registre,
   via l'API ResellerClub appelée par support.macloud.uk — voir
   initDomainSearch() dans app.js. La règle d'origine tient toujours :
   ne jamais afficher un statut "disponible" sans une vraie vérification. */

/* ── Résultats de disponibilité ──────────────────────────────────────
   Les trois états sont visuellement DISTINCTS à dessein : « disponible »
   en vert, « déjà pris » en rouge, « vérification impossible » en ambre.
   Ne jamais donner à `unknown` l'apparence de `available` — le visiteur
   doit voir au premier coup d'œil que le registre n'a pas répondu, et non
   croire que le domaine est libre. */
.ds__status{margin:10px 0 0;font-size:13.5px;min-height:1.2em;text-align:center}
.ds__status--err{color:var(--danger);font-weight:600}
.ds__head{margin:18px 0 8px;font-size:14px;color:var(--muted)}
.ds__head b{color:var(--txt)}
.ds__table{margin-top:4px}
.ds__dom{font-weight:700;word-break:break-all}
.ds__badge{display:inline-block;padding:3px 10px;border-radius:999px;font-size:12.5px;font-weight:700;white-space:nowrap}
.ds__badge--available{background:rgba(52,211,153,.14);color:var(--ok)}
.ds__badge--taken{background:rgba(248,113,113,.14);color:var(--danger)}
.ds__badge--unknown{background:rgba(251,191,36,.14);color:var(--gold)}
.ds__row--taken .ds__dom{color:var(--muted)}
.ds__note{margin-top:10px;font-size:12.5px;color:var(--dim);text-align:center}

.domain-search-box{
  background:var(--surface2);border:1px solid var(--line2);border-radius:18px;
  padding:8px 8px 8px 18px;display:flex;align-items:center;gap:12px;
  margin:18px auto 8px;max-width:560px;box-shadow:0 12px 30px -10px rgba(0,0,0,.5);
}
.domain-search-box input{
  flex:1;background:none;border:none;outline:none;font-size:15px;
  color:var(--txt);font-weight:600;min-width:0;
}
.domain-search-box input::placeholder{color:var(--dim)}
html[dir="rtl"] .domain-search-box{padding:8px 18px 8px 8px}
.domain-search-note{text-align:center;font-size:12.5px;color:var(--dim);margin-bottom:22px}
.rc-also{text-align:center;margin-top:14px;font-size:13.5px;color:var(--muted)}
.rc-also a{color:var(--brand);font-weight:600}

.rcgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:8px}
.rccard{
  background:var(--surface);border:1px solid var(--line);border-radius:16px;
  padding:20px 16px;text-align:center;display:flex;flex-direction:column;gap:8px;
}
.rccard b{font-size:13.5px;color:var(--muted);font-weight:700;min-height:34px;display:flex;align-items:center;justify-content:center}
.rccard__p{display:flex;align-items:baseline;justify-content:center;gap:5px;flex-wrap:wrap}
.rccard__p > span{font-size:21px;font-weight:800;color:var(--brand)}
.rccard__p small{font-size:12px;color:var(--dim)}
@media (max-width:720px){.rcgrid{grid-template-columns:1fr 1fr}}
@media (max-width:420px){.rcgrid{grid-template-columns:1fr}}

/* ══════════ ÉTAPES ══════════ */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;counter-reset:s}
.steps li{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:28px 24px}
.steps li::before{
  counter-increment:s;content:counter(s);
  position:absolute;top:-16px;inset-inline-start:24px;width:38px;height:38px;border-radius:12px;
  display:grid;place-items:center;font-size:17px;font-weight:800;color:#050d1c;
  background:linear-gradient(135deg,var(--brand),var(--brand2));box-shadow:0 10px 22px -10px rgba(56,189,248,.8);
}
.steps h3{font-size:18px;margin:14px 0 8px}
.steps p{color:var(--muted);font-size:14px}

/* ══════════ FAQ ══════════ */
.faq{display:grid;gap:12px}
.faq details{background:var(--surface);border:1px solid var(--line);border-radius:15px;overflow:hidden;transition:border-color .2s}
.faq details[open]{border-color:var(--line2)}
.faq summary{
  list-style:none;cursor:pointer;padding:19px 22px;font-weight:700;font-size:16px;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:24px;font-weight:400;color:var(--brand);flex-shrink:0;transition:transform .2s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq p{padding:0 22px 20px;color:var(--muted);font-size:14.8px}

/* ══════════ CONTACT ══════════ */
.contact{display:grid;grid-template-columns:.85fr 1.15fr;gap:26px;align-items:start}
.contact__cards{display:grid;grid-template-columns:1fr 1fr;gap:14px}
/* .ccard est tantôt un <a>, tantôt un <button> (ouverture du widget) :
   les deux doivent avoir exactement le même rendu. */
.ccard{
  display:flex;flex-direction:column;gap:6px;background:var(--surface);
  border:1px solid var(--line);border-radius:16px;padding:20px 18px;transition:.22s;
  text-align:start;width:100%;font:inherit;color:inherit;align-items:flex-start;
}
button.ccard{cursor:pointer}
a.ccard:hover,button.ccard:hover{transform:translateY(-3px);border-color:var(--brand)}
.ccard__ic{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;margin-bottom:6px}
.ccard__ic svg{width:22px;height:22px}
.ccard__ic--wa{background:rgba(37,211,102,.14);color:var(--wa)}
.ccard__ic--ml{background:rgba(56,189,248,.14);color:var(--brand)}
.ccard__ic--gl{background:rgba(167,139,250,.14);color:var(--brand2)}
.ccard b{font-size:14.5px}
.ccard span{font-size:13.5px;color:var(--muted);word-break:break-word}

.form{background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:28px}
.form h3{font-size:20px;margin-bottom:20px}
.form label{display:block;margin-bottom:16px}
.form label > span{display:block;font-size:13.5px;font-weight:700;color:var(--muted);margin-bottom:7px}
.form input,.form select,.form textarea{
  width:100%;background:var(--bg2);border:1px solid var(--line);border-radius:11px;
  padding:12px 14px;font-size:14.5px;outline:none;transition:border-color .2s;
}
.form input:focus,.form select:focus,.form textarea:focus{border-color:var(--brand)}
.form textarea{resize:vertical;min-height:96px}
.form__row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.form__actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:4px}
.form__note{margin-top:16px;font-size:12.5px;color:var(--dim)}
/* Piege a robots : retire de l'affichage ET du flux d'accessibilite.
   `display:none` suffirait a le cacher, mais certains robots ignorent
   precisement les champs en display:none — on le sort donc du viewport
   tout en le laissant "affiche" pour eux. Le `aria-hidden` et le
   `tabindex="-1"` du HTML le retirent des lecteurs d'ecran et du clavier. */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form__status{margin-top:12px;font-size:13.5px;min-height:1.2em}
.form__status--ok{color:var(--ok);font-weight:600}
.form__status--err{color:var(--danger);font-weight:600}

/* ══════════ FOOTER ══════════ */
.footer{border-top:1px solid var(--line);background:rgba(7,11,22,.9);padding-top:56px}
.footer__in{display:grid;grid-template-columns:1.7fr 1fr 1fr 1fr;gap:34px;padding-bottom:40px}
.footer__brand p{color:var(--muted);font-size:14px;margin:16px 0 18px;max-width:340px}
.footer__pay{display:flex;flex-wrap:wrap;gap:8px}
.footer__pay span{background:rgba(148,163,184,.1);border:1px solid var(--line);border-radius:8px;padding:5px 11px;font-size:12px;color:var(--muted);font-weight:600}
.footer__col{display:flex;flex-direction:column;gap:11px}
.footer__col b{font-size:15px;margin-bottom:4px}
.footer__col a{color:var(--muted);font-size:14px;transition:color .2s}
.footer__col a:hover{color:var(--brand)}
.footer__btn{
  background:none;border:none;padding:0;text-align:start;font:inherit;
  color:var(--muted);font-size:14px;cursor:pointer;transition:color .2s;
}
.footer__btn:hover{color:var(--wa)}
.footer__hours{font-size:13px;color:var(--dim)}
.footer__bot{
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  border-top:1px solid var(--line);padding:20px 0;font-size:13px;color:var(--dim);
}

/* ══════════ PANIER (DRAWER) ══════════ */
.drawer{position:fixed;inset:0;z-index:150;visibility:hidden}
.drawer.open{visibility:visible}
.drawer__bg{position:absolute;inset:0;background:rgba(2,6,16,.72);backdrop-filter:blur(3px);opacity:0;transition:opacity .28s}
.drawer.open .drawer__bg{opacity:1}
.drawer__panel{
  position:absolute;inset-block:0;inset-inline-end:0;width:min(420px,100%);
  background:var(--bg2);border-inline-start:1px solid var(--line2);
  display:flex;flex-direction:column;transform:translateX(100%);transition:transform .3s cubic-bezier(.4,0,.2,1);
}
html[dir="rtl"] .drawer__panel{transform:translateX(-100%)}
.drawer.open .drawer__panel{transform:translateX(0)}
.drawer__head{display:flex;align-items:center;justify-content:space-between;padding:20px 22px;border-bottom:1px solid var(--line)}
.drawer__head h3{font-size:19px}
.drawer__x{background:none;border:none;font-size:30px;line-height:1;color:var(--muted);cursor:pointer;padding:0 4px}
.drawer__x:hover{color:var(--txt)}
.drawer__body{flex:1;overflow-y:auto;padding:18px 22px}
.drawer__foot{padding:20px 22px;border-top:1px solid var(--line);display:grid;gap:10px}
/* Decomposition TVA au-dessus du total. Discrete a dessein : le chiffre qui
   compte pour le client reste le total TTC juste en dessous. */
.drawer__vat{display:flex;justify-content:space-between;align-items:baseline;font-size:13px;color:var(--muted)}
.drawer__total{display:flex;justify-content:space-between;align-items:baseline;margin:6px 0;padding-top:8px;border-top:1px solid var(--line);font-size:15px}
.drawer__total small{font-size:12px;color:var(--muted);font-weight:600}
.drawer__total b{font-size:24px;color:var(--brand);font-family:var(--ff)}

.citem{display:grid;grid-template-columns:auto 1fr auto;gap:13px;align-items:center;padding:14px 0;border-bottom:1px solid var(--line)}
.citem:last-child{border-bottom:none}
.citem__ic{width:42px;height:42px;border-radius:11px;display:grid;place-items:center;background:rgba(56,189,248,.12);color:var(--brand)}
.citem__ic svg{width:22px;height:22px;fill:currentColor}
.citem__n{font-size:14px;font-weight:700;line-height:1.3}
.citem__p{font-size:13px;color:var(--muted);margin-top:2px}
.citem__qty{display:flex;align-items:center;gap:6px;margin-top:7px}
.citem__qty button{width:24px;height:24px;border-radius:7px;background:var(--surface2);border:1px solid var(--line);color:var(--txt);cursor:pointer;font-size:15px;line-height:1;display:grid;place-items:center}
.citem__qty button:hover{border-color:var(--brand)}
.citem__qty span{min-width:22px;text-align:center;font-weight:700;font-size:14px}
.citem__x{background:none;border:none;color:var(--dim);cursor:pointer;font-size:20px;padding:4px}
.citem__x:hover{color:#f87171}

/* ══════════ WIDGET WHATSAPP ══════════ */
.wa{position:fixed;inset-block-end:24px;inset-inline-end:24px;z-index:95;display:flex;flex-direction:column;align-items:flex-end;gap:14px}
html[dir="rtl"] .wa{align-items:flex-start}

.fab{
  width:58px;height:58px;border-radius:50%;display:grid;place-items:center;
  background:var(--wa);color:#03230f;border:none;cursor:pointer;
  box-shadow:0 14px 34px -10px rgba(37,211,102,.7);transition:transform .2s;
  position:relative;align-self:flex-end;
}
html[dir="rtl"] .fab{align-self:flex-start}
.fab:hover{transform:scale(1.08)}
.fab svg{width:30px;height:30px;grid-area:1/1;transition:opacity .2s,transform .2s}
.fab__x{opacity:0;transform:rotate(-90deg) scale(.6)}
.wa.open .fab__wa{opacity:0;transform:rotate(90deg) scale(.6)}
.wa.open .fab__x{opacity:1;transform:none}
/* pastille d'appel discrète, masquée une fois le widget ouvert */
.fab::after{
  content:"";position:absolute;inset-block-start:2px;inset-inline-end:2px;
  width:13px;height:13px;border-radius:50%;background:#f87171;border:2.5px solid var(--bg);
  transition:opacity .2s;
}
.wa.open .fab::after{opacity:0}

.wa__panel{
  width:min(340px,calc(100vw - 40px));background:var(--surface);
  border:1px solid var(--line2);border-radius:20px;overflow:hidden;
  box-shadow:0 30px 70px -22px rgba(0,0,0,.85);
  opacity:0;transform:translateY(14px) scale(.96);transform-origin:bottom right;
  transition:opacity .22s,transform .22s;
}
html[dir="rtl"] .wa__panel{transform-origin:bottom left}
.wa.open .wa__panel{opacity:1;transform:none}

.wa__head{display:flex;align-items:center;gap:11px;padding:15px 16px;background:linear-gradient(135deg,#128c7e,#25d366)}
.wa__avatar{width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.2);display:grid;place-items:center;flex-shrink:0}
.wa__avatar svg{width:24px;height:24px}
.wa__id{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.wa__id b{font-size:15px;color:#fff;line-height:1.25}
.wa__status{display:flex;align-items:center;gap:6px;font-size:11.5px;color:rgba(255,255,255,.88)}
.wa__status i{width:7px;height:7px;border-radius:50%;background:#a7f3d0;flex-shrink:0;box-shadow:0 0 0 0 rgba(167,243,208,.7);animation:pulse 2.2s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 7px rgba(167,243,208,0)}100%{box-shadow:0 0 0 0 rgba(167,243,208,0)}}
.wa__x{background:none;border:none;color:#fff;font-size:26px;line-height:1;cursor:pointer;padding:0 2px;opacity:.85}
.wa__x:hover{opacity:1}

.wa__body{padding:16px;background:
  radial-gradient(circle at 20% 10%,rgba(37,211,102,.06),transparent 60%),var(--surface)}
.wa__bubble{
  background:var(--surface2);border:1px solid var(--line);border-radius:4px 14px 14px 14px;
  padding:12px 14px;font-size:13.8px;color:#cbd5e1;margin-bottom:14px;line-height:1.55;
}
html[dir="rtl"] .wa__bubble{border-radius:14px 4px 14px 14px}
.wa__dests{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:14px}
.wa__dest{
  padding:9px 8px;border-radius:10px;background:var(--bg2);border:1px solid var(--line);
  font-size:12.5px;font-weight:700;color:var(--muted);cursor:pointer;transition:.18s;
}
.wa__dest:hover{border-color:var(--line2);color:var(--txt)}
.wa__dest.active{background:rgba(37,211,102,.14);border-color:var(--wa);color:var(--wa)}
.wa__lbl{display:block;font-size:12.5px;font-weight:700;color:var(--muted);margin-bottom:6px}
.wa__body textarea{
  width:100%;background:var(--bg2);border:1px solid var(--line);border-radius:11px;
  padding:11px 13px;font-size:14px;outline:none;resize:vertical;min-height:76px;margin-bottom:12px;
}
.wa__body textarea:focus{border-color:var(--wa)}
.wa__note{margin-top:11px;font-size:11.5px;color:var(--dim);text-align:center}

/* ══════════ TOAST ══════════ */

.toast{
  position:fixed;inset-block-end:26px;inset-inline-start:50%;transform:translate(-50%,26px);
  background:var(--surface2);border:1px solid var(--line2);border-radius:12px;
  padding:13px 22px;font-size:14.5px;font-weight:600;box-shadow:var(--shadow);
  opacity:0;visibility:hidden;transition:.28s;z-index:200;max-width:90vw;text-align:center;
}
.toast.show{opacity:1;visibility:visible;transform:translate(-50%,0)}

/* ══════════ RESPONSIVE ══════════ */
@media (max-width:1080px){
  .hero__in{grid-template-columns:1fr;gap:36px}
  .hero__card{max-width:460px}
  .catgrid{grid-template-columns:1fr 1fr}
  .steps{grid-template-columns:1fr 1fr;gap:30px 22px}
  .contact{grid-template-columns:1fr}
  .footer__in{grid-template-columns:1fr 1fr}
  .strip__in{grid-template-columns:1fr 1fr}
}
@media (max-width:900px){
  .burger{display:flex}
  /* Ancré au header (sticky = bloc conteneur) plutôt qu'à un décalage
     fixe : le panneau reste collé sous la barre même une fois la
     top-bar sortie de l'écran au défilement. */
  .nav{
    position:absolute;inset-block-start:100%;inset-inline:0;
    flex-direction:column;gap:2px;background:var(--bg2);border-bottom:1px solid var(--line2);
    padding:14px 20px 22px;transform:translateY(-140%);transition:transform .3s;
    z-index:-1;margin:0;box-shadow:0 18px 30px -20px #000;
  }
  .nav.open{z-index:99}
  .nav.open{transform:translateY(0)}
  .nav a{padding:13px 14px;font-size:16px}
  .tools{margin-inline-start:auto}
}
@media (max-width:720px){
  .topbar__in{justify-content:center;text-align:center;padding-block:6px}
  .topbar__msg{width:100%}
  .topbar__links{justify-content:center;gap:12px;font-size:12px}
  .hero{padding:48px 0 44px}
  .sec{padding:58px 0}
  .hero__facts{grid-template-columns:1fr 1fr}
  .catgrid,.steps,.strip__in,.paygrid{grid-template-columns:1fr}
  .grid,.srvgrid{grid-template-columns:1fr}
  .filters__search{margin-inline-start:0;width:100%}
  .form__row{grid-template-columns:1fr}
  .contact__cards{grid-template-columns:1fr}
  .footer__in{grid-template-columns:1fr;gap:28px}
  .footer__bot{flex-direction:column;gap:8px;text-align:center;justify-content:center}
  .steps li::before{inset-inline-start:20px}
  .wa{inset-block-end:18px;inset-inline-end:18px;inset-inline-start:18px;align-items:flex-end}
  html[dir="rtl"] .wa{align-items:flex-start}
  .wa__panel{width:100%}
}
/* Sous 500px, la marque + les 2 sélecteurs + panier + burger ne tiennent
   plus sur une ligne (il manquait ~60px en 375px de large). On compacte
   les contrôles plutôt que de laisser la page déborder horizontalement. */
@media (max-width:500px){
  .header__in{gap:10px}
  .brand__mark{width:28px;height:28px}
  .brand__txt{font-size:16px}
  .brand__txt i{display:none}
  .tools{gap:6px}
  .select__btn{padding:7px 8px;font-size:12px;gap:5px}
  .select__btn .caret{display:none}
  .select__menu{min-width:168px}
  .cartbtn,.burger{width:38px;height:38px}
  .cartbtn svg{width:19px;height:19px}
  .cartbtn b{min-width:18px;height:18px;font-size:11px}
}
@media (max-width:420px){
  .hero__cta .btn{width:100%}
  .topbar__links{font-size:11.5px;gap:10px}
}

@media (prefers-reduced-motion:reduce){
  *{animation:none !important;transition:none !important;scroll-behavior:auto !important}
}

/* ══════════ RTL SUPPORTS (ARABIC) ══════════ */
[dir="rtl"] .hero__cta {
  flex-direction: row;
}
[dir="rtl"] .ticks li {
  padding-left: 0;
  padding-right: 22px;
}
[dir="rtl"] .ticks li::before {
  left: auto;
  right: 0;
}

/* ══════════ IMPRESSION ══════════ */
@media print{
  .topbar,.header,.fab,.drawer,.filters,.form,.footer__pay,.modal{display:none !important}
  body{background:#fff;color:#000}
  .card,.srv{break-inside:avoid;border:1px solid #ccc}
}

/* ══════════ CATALOGUE RESELLERCLUB ══════════ */

/* Tableau des extensions. Le conteneur scrolle horizontalement plutot
   que d'elargir la page : sur mobile 5 colonnes ne tiennent pas. */
.domt__wrap{overflow-x:auto;border:1px solid var(--line);border-radius:16px;background:var(--surface)}
.domt{width:100%;border-collapse:collapse;min-width:560px}
.domt th,.domt td{padding:13px 16px;text-align:start;font-size:14.5px;white-space:nowrap}
.domt thead th{
  font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  color:var(--dim);background:rgba(148,163,184,.06);border-bottom:1px solid var(--line);
}
html[dir="rtl"] .domt thead th{letter-spacing:0}
.domt tbody tr{border-bottom:1px solid var(--line)}
.domt tbody tr:last-child{border-bottom:none}
.domt tbody tr:hover{background:rgba(56,189,248,.05)}
.domt__tld{font-weight:800;color:var(--brand);font-family:var(--ff)}
.domt__na{color:var(--dim)}
.domt__act{text-align:end}

.dom__meta{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:16px;font-size:13px;color:var(--dim)}
.badge--live{background:rgba(52,211,153,.14);color:var(--ok);display:inline-flex;align-items:center;gap:6px}
.badge--live::before{
  content:"";width:7px;height:7px;border-radius:50%;background:var(--ok);
  box-shadow:0 0 0 0 rgba(52,211,153,.7);animation:pulse 2.2s infinite;
}
.dom__note{margin-top:8px;font-size:12.8px;color:var(--dim);line-height:1.6}
.dom__note--warn{color:#fbbf24}
.dom__all{margin-top:18px;text-align:center}
/* .btn est en white-space:nowrap ; ce libelle est une phrase entiere et
   depassait de 106px en 375px de large. On l'autorise a se couper. */
.dom__all .btn{white-space:normal;max-width:100%;line-height:1.4;text-align:center}
.dom__all a{color:var(--brand);font-weight:700;font-size:15px}
.dom__all a:hover{text-decoration:underline}

/* Sous-titre de groupe (Hebergement mutualise / Serveurs & cloud) */
.rcgroup__t{
  font-size:15px;font-weight:800;color:var(--muted);margin:30px 0 16px;
  letter-spacing:.06em;text-transform:uppercase;
}
html[dir="rtl"] .rcgroup__t{letter-spacing:0}
.rcgroup__t:first-child{margin-top:0}
.card__actions--single{grid-template-columns:1fr}

/* ══════════ ESPACES DE CONNEXION ══════════ */
.loggrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:20px}
.logcard{
  display:flex;flex-direction:column;align-items:flex-start;gap:10px;
  background:var(--surface);border:1px solid var(--line);border-radius:18px;
  padding:24px 22px;transition:.22s;
}
.logcard:hover{transform:translateY(-4px);border-color:var(--brand);box-shadow:var(--shadow)}
.logcard__ic{
  width:46px;height:46px;border-radius:13px;display:grid;place-items:center;
  background:rgba(56,189,248,.12);color:var(--brand);
}
.logcard__ic svg{width:24px;height:24px;fill:currentColor}
.logcard h3{font-size:17px}
.logcard p{color:var(--muted);font-size:13.8px;flex:1}
.logcard .btn{margin-top:4px}

@media (max-width:720px){
  .domt th,.domt td{padding:11px 13px;font-size:13.5px}
  .loggrid{grid-template-columns:1fr}
}