/* =====================================================================
   M&D High Tech — v2 · système de design
   Charte : bleu #3E80F1 · noir #15161A
   Aucune ressource externe : pas de police distante, pas de framework.
   ===================================================================== */

:root{
  --bleu:#3E80F1; --bleu-fonce:#2A63C9; --bleu-clair:#EAF1FE;
  --noir:#15161A; --noir-2:#1E2027; --noir-3:#2A2D36;
  --texte:#3C424C; --texte-doux:#6B7280;
  --gris:#F5F7FA; --gris-2:#EDF1F6; --bord:#E1E7EF; --blanc:#FFFFFF;
  --ok:#12805C; --warn:#B4552F;
  --r:14px; --r-s:9px;
  --ombre:0 1px 2px rgba(21,22,26,.05), 0 8px 24px rgba(21,22,26,.06);
  --ombre-f:0 2px 6px rgba(21,22,26,.08), 0 18px 44px rgba(21,22,26,.12);
  --max:1180px;
  --f:"Inter","Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans Arabic",sans-serif;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; font-family:var(--f); color:var(--texte); background:var(--blanc);
  font-size:16.5px; line-height:1.65; -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block}
a{color:var(--bleu); text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3,h4{margin:0; color:var(--noir); font-weight:700; letter-spacing:-.015em; line-height:1.18}
h1{font-size:clamp(30px,5.2vw,52px)}
h2{font-size:clamp(24px,3.4vw,36px)}
h3{font-size:clamp(18px,2.1vw,21px)}
p{margin:0 0 14px}
.wrap{max-width:var(--max); margin:0 auto; padding:0 22px}
section{padding:clamp(52px,7vw,92px) 0}
.center{text-align:center}
.lead{font-size:clamp(17px,2vw,20px); color:var(--texte-doux); max-width:62ch}
.center .lead{margin:0 auto}
.small{font-size:14px; color:var(--texte-doux)}
.kick{font-size:12.5px; letter-spacing:.16em; text-transform:uppercase; font-weight:700; color:var(--bleu)}
section.gris{background:var(--gris)}
section.noir{background:var(--noir); color:#C9D0DC}
section.noir h2,section.noir h1,section.noir h3{color:#fff}
section.noir .lead{color:#9AA4B4}

/* ---------- en-tête ---------- */
header.haut{position:sticky; top:0; z-index:50; background:rgba(255,255,255,.94);
  backdrop-filter:blur(10px); border-bottom:1px solid var(--bord)}
.haut-in{max-width:var(--max); margin:0 auto; padding:13px 22px; display:flex;
  align-items:center; justify-content:space-between; gap:18px}
.marque{display:flex; align-items:center; gap:11px; font-weight:800; color:var(--noir);
  font-size:18px; white-space:nowrap; flex:0 0 auto}
.marque img{height:38px; width:auto}
.marque span small{display:block; font-size:10.5px; letter-spacing:.19em; color:var(--bleu);
  font-weight:700; text-transform:uppercase}
nav.menu{display:flex; align-items:center; gap:22px; flex:0 0 auto}
nav.menu a{white-space:nowrap}
.haut .btn{white-space:nowrap}
@media(max-width:1280px){ nav.menu{gap:15px} nav.menu a{font-size:14.5px} .marque span{display:none} }
nav.menu a{color:var(--noir); font-weight:600; font-size:15px}
nav.menu a:hover{color:var(--bleu); text-decoration:none}
nav.menu a.actif{color:var(--bleu)}
#bur{display:none}
.bur-l{display:none; cursor:pointer; padding:8px; border:1px solid var(--bord); border-radius:var(--r-s)}
@media(max-width:960px){
  nav.menu{position:fixed; inset:64px 0 auto 0; background:#fff; flex-direction:column;
    align-items:stretch; gap:0; padding:8px 0 18px; border-bottom:1px solid var(--bord);
    box-shadow:var(--ombre-f); display:none}
  nav.menu a{padding:13px 22px; border-bottom:1px solid var(--gris-2)}
  .bur-l{display:block}
  #bur:checked ~ nav.menu{display:flex}
  .haut .btn{display:none}
}

/* ---------- boutons ---------- */
.btn{display:inline-flex; align-items:center; gap:9px; padding:13px 24px; border-radius:999px;
  font-weight:700; font-size:15.5px; border:1.5px solid transparent; cursor:pointer; text-decoration:none}
.btn:hover{text-decoration:none}
.btn-p{background:var(--bleu); color:#fff}
.btn-p:hover{background:var(--bleu-fonce)}
.btn-s{background:#fff; color:var(--noir); border-color:var(--bord)}
.btn-s:hover{border-color:var(--bleu); color:var(--bleu)}
.btn-n{background:transparent; color:#fff; border-color:rgba(255,255,255,.35)}
.btn-n:hover{border-color:#fff}
.btn-w{background:#fff; color:var(--bleu)}
.btns{display:flex; flex-wrap:wrap; gap:13px; margin-top:26px}

/* ---------- héros ---------- */
.hero{background:var(--noir); color:#C9D0DC; position:relative; overflow:hidden; padding:clamp(56px,8vw,104px) 0 clamp(50px,7vw,88px)}
.hero:after{content:""; position:absolute; width:620px; height:620px; right:-190px; top:-230px;
  background:radial-gradient(circle,rgba(62,128,241,.30),transparent 66%); pointer-events:none}
.hero .wrap{position:relative; z-index:1}
.hero h1{color:#fff; max-width:30ch}
.hero .lead{color:#9AA4B4; margin-top:18px}
.hero .kick{color:#7FA8F7}
.chiffres{display:flex; flex-wrap:wrap; gap:38px; margin-top:44px; padding-top:26px;
  border-top:1px solid rgba(255,255,255,.14)}
.chiffres b{display:block; font-size:clamp(24px,3vw,32px); color:#fff; line-height:1.1}
.chiffres span{font-size:13.5px; color:#8A94A6}

/* ---------- cartes ---------- */
.grille{display:grid; gap:20px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
@media(max-width:900px){.g3,.g4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.g2,.g3,.g4{grid-template-columns:1fr}}
.carte{background:#fff; border:1px solid var(--bord); border-radius:var(--r); padding:26px 24px}
.carte:hover{box-shadow:var(--ombre); border-color:#CFDAEA}
.carte .num{font-size:13px; font-weight:800; color:var(--bleu); letter-spacing:.1em}
.carte h3{margin:10px 0 9px}
.carte p{margin:0; font-size:15.5px; color:var(--texte-doux)}
.carte ul{margin:12px 0 0; padding-left:18px; font-size:15px; color:var(--texte-doux)}
.carte li{margin-bottom:5px}
.carte a.more{display:inline-block; margin-top:14px; font-weight:700; font-size:15px}

/* ---------- bandeau preuves ---------- */
.preuve{background:var(--bleu-clair); border:1px solid #D3E2FC; border-radius:var(--r);
  padding:22px 26px; display:flex; flex-wrap:wrap; gap:30px; justify-content:space-between}
.preuve div{font-weight:700; color:var(--noir); font-size:15.5px}

/* ---------- réalisations ---------- */
.rea{background:#fff; border:1px solid var(--bord); border-radius:var(--r); overflow:hidden}
.rea .visuel{height:168px; background:var(--noir-2); display:flex; align-items:center;
  justify-content:center; color:#5C6779; font-weight:700; letter-spacing:.1em; font-size:13px}
.rea .corps{padding:22px 22px 24px}
.rea .tag{font-size:12px; font-weight:700; color:var(--bleu); text-transform:uppercase; letter-spacing:.09em}
.rea h3{margin:8px 0 8px; font-size:18px}
.rea p{font-size:15px; color:var(--texte-doux); margin:0 0 12px}
.rea .res{border-top:1px solid var(--gris-2); padding-top:11px; font-weight:700; color:var(--ok); font-size:15px}

/* ---------- solutions ---------- */
.sol{background:var(--noir-2); border:1px solid var(--noir-3); border-radius:var(--r); padding:24px}
.sol h3{color:#fff; font-size:17.5px}
.sol p{color:#9AA4B4; font-size:15px; margin:8px 0 0}
.sol .pt{display:inline-block; margin-top:13px; font-size:13px; color:#7FA8F7; font-weight:700}

/* ---------- étapes ---------- */
.etapes{counter-reset:e}
.etape{position:relative; padding-left:60px; margin-bottom:30px}
.etape:before{counter-increment:e; content:counter(e,decimal-leading-zero); position:absolute; left:0; top:-2px;
  width:42px; height:42px; border-radius:50%; background:var(--bleu-clair); color:var(--bleu);
  display:flex; align-items:center; justify-content:center; font-weight:800; font-size:15px}
.etape h3{margin-bottom:7px}
.etape p{margin:0; color:var(--texte-doux); font-size:15.5px}

/* ---------- FAQ ---------- */
details.faq{border-bottom:1px solid var(--bord); padding:19px 0}
details.faq summary{cursor:pointer; font-weight:700; color:var(--noir); font-size:17px; list-style:none;
  display:flex; justify-content:space-between; gap:18px; align-items:flex-start}
details.faq summary::-webkit-details-marker{display:none}
details.faq summary:after{content:"+"; color:var(--bleu); font-weight:800; font-size:22px; line-height:1}
details.faq[open] summary:after{content:"–"}
details.faq p{margin:13px 0 0; color:var(--texte-doux); font-size:15.5px}

/* ---------- tableau ---------- */
table.t{width:100%; border-collapse:collapse; margin-top:22px; font-size:15.5px}
table.t th{background:var(--noir); color:#fff; text-align:left; padding:14px 16px; font-weight:600; font-size:14.5px}
table.t td{padding:15px 16px; border-bottom:1px solid var(--bord); vertical-align:top}
table.t tr:nth-child(even) td{background:var(--gris)}
table.t .prix{font-weight:800; color:var(--noir); white-space:nowrap}

/* ---------- contact ---------- */
.form{display:grid; gap:15px; max-width:640px}
.form label{font-weight:600; font-size:14.5px; color:var(--noir); display:block; margin-bottom:6px}
.form input,.form select,.form textarea{width:100%; padding:13px 15px; border:1.5px solid var(--bord);
  border-radius:var(--r-s); font-family:var(--f); font-size:15.5px; color:var(--texte); background:#fff}
.form input:focus,.form select:focus,.form textarea:focus{outline:none; border-color:var(--bleu)}
.form textarea{min-height:118px; resize:vertical}
.alerte{background:var(--bleu-clair); border-left:4px solid var(--bleu); padding:16px 20px;
  border-radius:0 var(--r-s) var(--r-s) 0; font-size:15.5px}
.cinfo{display:flex; flex-direction:column; gap:16px}
.cinfo b{display:block; color:var(--noir)}
.cinfo a{font-weight:700}

/* ---------- bandeau final ---------- */
.final{background:var(--bleu); color:#fff; padding:clamp(44px,6vw,72px) 0}
.final h2{color:#fff}
.final p{color:#DCE8FF; max-width:58ch}

/* ---------- pied ---------- */
footer{background:var(--noir); color:#8A94A6; padding:52px 0 30px; font-size:15px}
footer h4{color:#fff; font-size:15px; margin-bottom:13px}
footer a{color:#9AA4B4}
footer a:hover{color:#fff}
.pied{display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:32px}
@media(max-width:900px){.pied{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.pied{grid-template-columns:1fr}}
.pied ul{list-style:none; padding:0; margin:0}
.pied li{margin-bottom:9px}
.pied-bas{border-top:1px solid var(--noir-3); margin-top:36px; padding-top:22px;
  display:flex; flex-wrap:wrap; gap:8px 22px; justify-content:center; align-items:center;
  text-align:center; font-size:13.5px}

/* ---------- fil d'ariane ---------- */
.ariane{font-size:14px; color:var(--texte-doux); padding-top:20px}
.ariane a{color:var(--texte-doux)}
.entete-page{background:var(--gris); border-bottom:1px solid var(--bord); padding-bottom:clamp(36px,5vw,58px)}
.entete-page h1{max-width:22ch; margin-top:14px}
.entete-page .lead{margin-top:16px}

/* ---------- recapitulatif de prix (accueil) ---------- */
.formule{background:#fff; border:2px solid var(--bord); border-radius:var(--r); padding:26px 24px; position:relative}
.formule.mise{border-color:var(--bleu); box-shadow:var(--ombre)}
.formule .etiq{position:absolute; top:-13px; left:24px; background:var(--bleu); color:#fff;
  font-size:12px; font-weight:700; padding:4px 12px; border-radius:999px; letter-spacing:.05em}
.formule h3{margin-bottom:6px}
.formule .p{font-size:30px; font-weight:800; color:var(--noir); margin:12px 0 4px}
.formule .p small{font-size:14px; font-weight:600; color:var(--texte-doux)}
.formule ul{margin:16px 0 0; padding-left:18px; font-size:15px; color:var(--texte-doux)}
.formule li{margin-bottom:7px}

/* ---------- impression ---------- */
@media print{
  header.haut,.final,.hero:after,.btns{display:none}
  body{font-size:11pt} section{padding:18px 0}
  .carte,.formule,.rea{break-inside:avoid}
}

/* ---------- selecteur de langue ---------- */
.langues{display:flex; align-items:center; gap:2px; border:1px solid var(--bord);
  border-radius:999px; padding:3px; flex:0 0 auto}
.langues a{padding:5px 12px; border-radius:999px; font-size:13.5px; font-weight:700;
  color:var(--gris-txt); text-decoration:none; line-height:1.35}
.langues a:hover{color:var(--noir); text-decoration:none}
.langues a.on{background:var(--noir); color:#fff}
.bur-l{margin-left:12px}

/* ---------- bandeau de suggestion de langue (jamais impose) ---------- */
#sugg{position:fixed; left:50%; transform:translateX(-50%); bottom:18px; z-index:90;
  background:var(--noir); color:#fff; border-radius:var(--r-s); padding:12px 15px;
  display:none; gap:14px; align-items:center; box-shadow:0 14px 40px rgba(0,0,0,.3);
  max-width:min(560px,92vw); font-size:14.5px; font-weight:600}
#sugg a{text-decoration:none; white-space:nowrap}
#sugg #sugg-non{opacity:.6; cursor:pointer; padding:0 5px; font-size:15px}
#sugg #sugg-non:hover{opacity:1}
@media(max-width:960px){ #sugg{bottom:12px; font-size:13.5px; gap:10px; padding:11px 13px} }

/* ---------- cartes realisations en texte seul (27/10) ---------- */
.rea{position:relative; overflow:hidden; transition:box-shadow .3s ease, transform .3s ease}
.rea::before{content:""; position:absolute; top:0; left:0; right:0; height:3px;
  background:linear-gradient(90deg,#2b6cf6,#14b8a6)}
.rea:hover{box-shadow:0 10px 28px rgba(16,26,43,.10); transform:translateY(-2px)}
.rea .corps{padding:26px 24px 28px}