:root{
  --navy:#0B1F3A; --navy-2:#123056; --navy-3:#07172B;
  --gold:#C8A24A; --gold-soft:#E3C77E;
  --ink:#16202E; --paper:#F6F7F9; --line:rgba(11,31,58,.12);
  --alert:#B03A2E; --ok:#1E9E5A;
  --r:14px; --shadow:0 10px 30px rgba(11,31,58,.10);
  --font-body:'Inter',system-ui,sans-serif;
  --font-disp:'Barlow Condensed',sans-serif;
  --font-ar:'Cairo',system-ui,sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:90px}
body{font-family:var(--font-body);color:var(--ink);background:var(--paper);line-height:1.75;-webkit-font-smoothing:antialiased}
html[lang="ar"] body{font-family:var(--font-ar)}
a{color:#124A8C;text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:3px solid var(--gold);outline-offset:2px;border-radius:4px}
img{max-width:100%;display:block}
.wrap{max-width:1180px;margin:0 auto;padding:0 20px}
.wrap-wide{max-width:1180px;margin:0 auto;padding:0 20px}

/* header */
.topbar{background:var(--navy-3);color:#C7D5E8;font-size:.78rem;padding:7px 0}
.topbar .wrap-wide{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.langbtns{display:flex;gap:6px}
.langbtns a{border:1px solid rgba(255,255,255,.22);color:#C7D5E8;padding:2px 10px;border-radius:20px;font-weight:600;font-size:.76rem}
.langbtns a:hover{text-decoration:none;background:rgba(255,255,255,.1)}
.langbtns a.on{background:var(--gold);border-color:var(--gold);color:var(--navy-3)}
nav{position:sticky;top:0;z-index:60;background:rgba(11,31,58,.97);backdrop-filter:blur(8px);border-bottom:1px solid rgba(200,162,74,.28)}
nav .wrap-wide{display:flex;align-items:center;justify-content:space-between;gap:14px;min-height:62px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:11px;color:#fff}
.brand:hover{text-decoration:none}
.brand-mark{width:38px;height:38px;border-radius:10px;background:linear-gradient(140deg,var(--gold),#9C7B2E);display:grid;place-items:center;font-size:1.15rem;flex:none}
.brand-txt strong{display:block;font-family:var(--font-disp);font-size:1.05rem;letter-spacing:.04em;text-transform:uppercase;line-height:1.1;color:#fff}
html[lang="ar"] .brand-txt strong{font-family:var(--font-ar);text-transform:none}
.brand-txt span{display:block;font-size:.64rem;color:var(--gold-soft);letter-spacing:.1em}
.navlinks{display:flex;gap:4px;flex-wrap:wrap}
.navlinks a{color:#D6E1F0;padding:7px 10px;border-radius:8px;font-size:.83rem;font-weight:600}
.navlinks a:hover{background:rgba(255,255,255,.09);color:#fff;text-decoration:none}
.navlinks a.cta{background:var(--gold);color:var(--navy-3)}

/* hero */
.ghero{background:linear-gradient(155deg,#08172B,#0B1F3A 50%,#16375F);color:#fff;padding:44px 0 40px}
.crumb{font-size:.78rem;color:#9FB4CF;margin-bottom:14px}
.crumb a{color:var(--gold-soft)}
.kicker{display:inline-block;font-size:.72rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);border:1px solid rgba(200,162,74,.5);border-radius:20px;padding:4px 12px;margin-bottom:14px}
html[lang="ar"] .kicker{letter-spacing:0}
.ghero h1{font-family:var(--font-disp);font-size:clamp(1.85rem,5vw,3rem);text-transform:uppercase;line-height:1.12;margin-bottom:14px}
html[lang="ar"] .ghero h1{font-family:var(--font-ar);text-transform:none;line-height:1.4;font-weight:900}
.ghero p{color:#B8CBE4;font-size:1.03rem}
.meta{margin-top:18px;font-size:.8rem;color:#8FA6C4;display:flex;gap:16px;flex-wrap:wrap}

/* article */
article{max-width:76ch;margin:0 auto;padding:8px 0 40px}
article h2{font-family:var(--font-disp);text-transform:uppercase;font-size:clamp(1.45rem,3.6vw,2.05rem);color:var(--navy);margin:52px 0 16px;padding-bottom:10px;border-bottom:2px solid var(--gold);letter-spacing:.02em;line-height:1.25;scroll-margin-top:90px}
html[lang="ar"] article h2{font-family:var(--font-ar);text-transform:none;font-weight:900;line-height:1.5}
article h3{font-size:1.1rem;color:var(--navy);margin:24px 0 8px}
article p{margin-bottom:17px;color:#33404F;font-size:1.02rem;line-height:1.85;text-wrap:pretty;hyphens:auto;-webkit-hyphens:auto}
article ul,article ol{margin:0 0 20px 0;padding-inline-start:24px;color:#33404F;font-size:1.02rem;line-height:1.8}
article li{margin-bottom:9px;padding-inline-start:4px}
article li strong{color:var(--navy)}
.lead{font-size:1.08rem;color:#3C4A5C;border-inline-start:3px solid var(--gold);padding-inline-start:16px;margin-bottom:26px}

.box{border-radius:var(--r);padding:20px 22px;margin:28px 0;border:1px solid var(--line);border-inline-start:4px solid var(--gold);background:linear-gradient(180deg,#fff,var(--paper));box-shadow:0 2px 10px rgba(11,31,58,.05)}
.box b{display:block;margin-bottom:6px;color:var(--navy)}
.box p:last-child{margin-bottom:0}
.box.warn{background:linear-gradient(180deg,#fff,#FDF2F0);border-color:rgba(176,58,46,.28);border-inline-start-color:var(--alert)}
.box.warn b{color:var(--alert)}
.box.tip{background:linear-gradient(180deg,#fff,#F1F7FF);border-color:rgba(18,74,140,.24);border-inline-start-color:#1C6FC4}
.box.tip b{color:#124A8C}
.box.norm{background:linear-gradient(180deg,#fff,#FFFBF2);border-color:rgba(200,162,74,.34);border-inline-start-color:var(--gold)}
.box.norm b{color:var(--gold)}
.box.norm p{color:#C9D8EC}

table{width:100%;border-collapse:separate;border-spacing:0;margin:26px 0;font-size:.94rem;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;box-shadow:0 2px 10px rgba(11,31,58,.05)}
th,td{padding:13px 15px;text-align:start;border-bottom:1px solid var(--line);vertical-align:top;line-height:1.65}
th{background:var(--navy);color:#fff;font-weight:700;font-size:.85rem;letter-spacing:.03em;text-transform:uppercase;border-bottom:none}
tbody tr:nth-child(even){background:var(--paper)}

details.faq{border:1px solid var(--line);border-radius:var(--r);padding:14px 18px;margin-bottom:10px;background:#fff}
details.faq summary{cursor:pointer;font-weight:700;color:var(--navy);list-style:none;display:flex;justify-content:space-between;align-items:center;gap:14px;padding:4px 0;transition:color .15s}
details.faq summary::-webkit-details-marker{display:none}
details.faq summary::after{content:"+";font-family:var(--font-disp);font-size:1.3rem;color:var(--gold)}
details.faq[open] summary::after{content:"–"}
details.faq p{margin-top:10px;margin-bottom:0;color:#3C4A5C}

.cta-band{background:var(--navy);color:#DCE7F5;border-radius:var(--r);padding:26px;margin:34px 0 10px;text-align:center}
.cta-band h3{color:#fff;font-size:1.25rem;margin-bottom:8px}
.cta-band p{color:#A9BCD6;margin-bottom:16px}
.btns{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;gap:8px;padding:12px 20px;border-radius:11px;font-weight:700;font-size:.93rem;border:none}
.btn:hover{text-decoration:none;opacity:.92}
.btn-wa{background:#25D366;color:#04361A}
.btn-gold{background:var(--gold);color:var(--navy-3)}
.btn-ghost{background:rgba(255,255,255,.09);color:#fff;border:1px solid rgba(255,255,255,.3)}

.also{background:var(--paper);padding:40px 0}
.also h2{font-family:var(--font-disp);text-transform:uppercase;color:var(--navy);font-size:1.4rem;margin-bottom:16px}
html[lang="ar"] .also h2{font-family:var(--font-ar);text-transform:none}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px}
.gcard{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:18px;display:block;color:inherit}
.gcard:hover{text-decoration:none;border-color:var(--gold);box-shadow:var(--shadow)}
.gcard b{display:block;color:var(--navy);margin-bottom:6px}
.gcard span{font-size:.87rem;color:#5A6779}

footer{background:var(--navy-3);color:#8FA6C4;padding:30px 0;font-size:.84rem;text-align:center}
footer a{color:var(--gold-soft)}

.fab{position:fixed;inset-inline-end:16px;bottom:18px;z-index:80}
.fab a{width:56px;height:56px;border-radius:50%;background:#25D366;display:grid;place-items:center;font-size:1.5rem;box-shadow:0 8px 24px rgba(37,211,102,.45)}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
@media print{nav,.topbar,.fab,.cta-band,.also,.ghero .meta{display:none!important}}

/* ---- author box (E-E-A-T entity block) ---- */
.authorbox{display:flex;gap:16px;background:var(--paper);border:1px solid var(--line);border-inline-start:4px solid var(--gold);border-radius:var(--r);padding:20px;margin:18px 0 8px;align-items:flex-start}
.authorbox .av{width:56px;height:56px;flex:none;border-radius:14px;background:linear-gradient(140deg,var(--gold),#9C7B2E);display:grid;place-items:center;font-size:1.6rem}
.authorbox b{display:block;color:var(--navy);font-size:1.05rem}
.authorbox i{display:block;font-style:normal;font-size:.82rem;color:var(--gold);font-weight:700;letter-spacing:.05em;margin-bottom:8px}
html[lang="ar"] .authorbox i{letter-spacing:0}
.authorbox p{font-size:.9rem;color:#4A5768;margin-bottom:10px}
.authorbox a{font-size:.88rem;font-weight:700}
@media(max-width:560px){.authorbox{flex-direction:column}}

/* ---- guides hub cards ---- */
.idxcards .gcard{padding:22px}
.idxcards .gcard b{font-size:1.12rem;margin-bottom:8px}
.idxcards .gcard span{display:block;margin-bottom:12px;line-height:1.6}
.idxcards .gcard em{font-style:normal;color:var(--gold);font-weight:700;font-size:.86rem}

/* ---- credential chips in the author box ---- */
.ccps{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:11px}
.ccp{background:#fff;border:1px solid var(--line);border-radius:20px;padding:3px 11px;font-size:.76rem;font-weight:600;color:var(--navy)}
.ccp:first-child{background:var(--navy);border-color:var(--navy);color:#fff}

/* ---- real logo inside the brand badge / author avatar ---- */
.brand-mark{background:none!important;overflow:hidden}
.brand-mark img{width:100%;height:100%;object-fit:contain;display:block}
.authorbox .av{background:none!important;overflow:hidden;padding:0}
.authorbox .av img{width:100%;height:100%;object-fit:contain;display:block}


/* ═══════════════════════════════════════════════════════════
   AMELIORATIONS DE LECTURE — guides techniques
   ═══════════════════════════════════════════════════════════ */

/* Barre de progression de lecture */
.readbar{position:fixed;top:0;inset-inline-start:0;height:3px;width:0;
  background:linear-gradient(90deg,var(--gold),var(--gold-soft));z-index:999;
  transition:width .1s linear}


/* Puces dorées au lieu des puces système */
article ul{list-style:none;padding-inline-start:6px}
article ul > li{position:relative;padding-inline-start:22px}
article ul > li::before{content:"";position:absolute;inset-inline-start:2px;top:.62em;
  width:7px;height:7px;border-radius:50%;background:var(--gold)}
article ol{counter-reset:s;list-style:none;padding-inline-start:6px}
article ol > li{position:relative;padding-inline-start:34px;counter-increment:s}
article ol > li::before{content:counter(s);position:absolute;inset-inline-start:0;top:.05em;
  width:24px;height:24px;border-radius:50%;background:var(--navy);color:#fff;
  font-family:var(--font-disp);font-size:.92rem;font-weight:700;
  display:grid;place-items:center}
html[lang="ar"] article ol > li::before{font-family:var(--font-ar);font-size:.8rem}

/* Termes techniques en gras : mieux détachés */
article li strong,article p strong{color:var(--navy);font-weight:700}

/* Citation / point clé */
article blockquote{margin:28px 0;padding:4px 0 4px 20px;
  border-inline-start:3px solid var(--gold);font-size:1.06rem;
  color:var(--navy);font-style:normal;line-height:1.75}

/* Séparateur discret entre grandes parties */
article hr{border:none;height:1px;margin:44px auto;width:120px;
  background:linear-gradient(90deg,transparent,var(--line),transparent)}

/* FAQ : chevron animé */
details.faq summary::after{content:"+";font-family:var(--font-disp);font-size:1.5rem;
  color:var(--gold);line-height:1;transition:transform .2s}
details.faq[open] summary::after{content:"–"}
details.faq summary:hover{color:var(--gold)}
details.faq{transition:border-color .18s}
details.faq:hover{border-color:rgba(200,162,74,.5)}

/* Cartes de navigation : élévation au survol */
.gcard{transition:transform .18s,box-shadow .18s,border-color .18s}
.gcard:hover{transform:translateY(-3px);box-shadow:var(--shadow);
  border-color:rgba(200,162,74,.55)}

/* Liens dans le texte : soulignement propre */
article p a,article li a{color:#12559C;text-decoration:underline;
  text-underline-offset:3px;text-decoration-thickness:1px;
  text-decoration-color:rgba(18,85,156,.35)}
article p a:hover,article li a:hover{text-decoration-color:currentColor}

/* Titre de section : ancre visible au survol */
article h2{position:relative}

/* Sélection de texte aux couleurs de la marque */
::selection{background:rgba(200,162,74,.28);color:var(--navy)}

/* Impression : le guide doit sortir proprement sur papier */
@media print{
  .topbar,nav,.fab,.also,footer,.readbar,.langbtns{display:none!important}
  body{background:#fff;color:#000}
  article{max-width:100%}
  article h2{page-break-after:avoid;border-bottom:1.5px solid #999}
  .box,table,details.faq{page-break-inside:avoid;box-shadow:none}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:.75em;color:#555}
}

/* Confort de lecture sur petit écran */
@media(max-width:640px){
  article{padding-inline:2px}
  article p,article ul,article ol{font-size:1.05rem}
  article h2{margin-top:40px}
  table{font-size:.88rem}
  th,td{padding:11px 12px}
}

/* Respect des préférences d'accessibilité */
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .readbar{display:none}
}

/* Sommaire latéral sur grand écran */
nav.toc{position:static;z-index:auto;background:transparent;border-bottom:none;backdrop-filter:none}
.toc{background:#fff;border:1px solid var(--line);border-inline-start:3px solid var(--gold);
  border-radius:var(--r);padding:18px 20px;margin:0 0 32px}
.toc b{display:block;font-family:var(--font-disp);text-transform:uppercase;
  letter-spacing:.08em;font-size:.82rem;color:var(--navy);margin-bottom:10px}
html[lang="ar"] .toc b{font-family:var(--font-ar);text-transform:none;letter-spacing:0}
.toc ol{counter-reset:t;list-style:none;margin:0;padding:0;font-size:.93rem;
  columns:2;column-gap:26px}
@media(max-width:640px){.toc ol{columns:1}}
.toc li{counter-increment:t;margin-bottom:7px;padding-inline-start:0;
  break-inside:avoid;line-height:1.5}
.toc li::before{content:none}
.toc a{color:#33404F;text-decoration:none;display:inline-flex;gap:8px;align-items:baseline}
.toc a::before{content:counter(t);color:var(--gold);font-weight:700;font-size:.82rem;
  min-width:1.2em}
.toc a:hover{color:var(--navy);text-decoration:underline;text-underline-offset:3px}


/* Tableau : jamais de débordement horizontal de la page */
.tblwrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:26px 0;
  border-radius:var(--r);border:1px solid var(--line);
  box-shadow:0 2px 10px rgba(11,31,58,.05)}
.tblwrap table{margin:0;border:none;border-radius:0;box-shadow:none;min-width:520px}
@media(max-width:640px){
  .tblwrap{position:relative}
  .tblwrap::after{content:"→";position:absolute;top:8px;inset-inline-end:10px;
    font-size:.9rem;color:var(--gold);opacity:.7;pointer-events:none}
  html[lang="ar"] .tblwrap::after{content:"←"}
}
article{overflow-wrap:break-word}