/* Dabbous Network : thème « guide pratique » (d'après le modèle Agence Canada de model-omar). */
@font-face{font-family:"Work Sans";font-style:normal;font-weight:400 600;font-display:swap;src:url(../fonts/worksans-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212,U+FEFF}
@font-face{font-family:"Zilla Slab";font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/zilla-600.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+20AC}
@font-face{font-family:"Zilla Slab";font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/zilla-700.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+20AC}
@font-face{font-family:"Plex Arabe";font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/plex-arabic-400.woff2) format("woff2");unicode-range:U+0600-06FF,U+0750-077F,U+0870-08FF,U+200C-200E,U+FB50-FDFF,U+FE70-FEFC}
@font-face{font-family:"Plex Arabe";font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/plex-arabic-600.woff2) format("woff2");unicode-range:U+0600-06FF,U+0750-077F,U+0870-08FF,U+200C-200E,U+FB50-FDFF,U+FE70-FEFC}
@font-face{font-family:"Plex Arabe";font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/plex-arabic-700.woff2) format("woff2");unicode-range:U+0600-06FF,U+0750-077F,U+0870-08FF,U+200C-200E,U+FB50-FDFF,U+FE70-FEFC}

:root{
  --fond:#FBF7F0;--papier:#FFFFFF;--encre:#10293A;--rouge:#C73E33;--rouge-f:#A82F26;
  --sapin:#13615C;--gris:#53606C;--trait:#D9D0C3;--nuit:#0C1F2D;
  --texte:"Work Sans","Plex Arabe",system-ui,sans-serif;
  --titre:"Zilla Slab","Plex Arabe",Georgia,serif;
  --marge:clamp(20px,6vw,84px);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:var(--texte);background:var(--fond);color:var(--encre);line-height:1.65;font-size:16.5px;display:grid;grid-template-columns:290px minmax(0,1fr);min-height:100vh}
[dir=rtl] body,body[dir=rtl]{font-size:17.5px;line-height:1.85}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3{font-family:var(--titre);line-height:1.15;font-weight:700}
[dir=rtl] h1,[dir=rtl] h2,[dir=rtl] h3{line-height:1.4}
:focus-visible{outline:3px solid var(--rouge);outline-offset:2px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip-link{position:absolute;inset-inline-start:12px;top:-60px;background:var(--rouge);color:#fff;padding:10px 16px;z-index:100;text-decoration:none}
.skip-link:focus{top:12px}

/* ───── Pupitre (barre latérale) ───── */
.pupitre{position:sticky;top:0;height:100vh;background:var(--encre);color:#F2EDE4;padding:30px 24px;display:flex;flex-direction:column;gap:22px;border-inline-end:4px solid var(--rouge);overflow:auto}
.pupitre-haut{display:flex;flex-direction:column;align-items:flex-start;gap:16px}
.marque{display:flex;gap:12px;align-items:center;text-decoration:none;color:#fff}
.marque img{width:42px;height:42px;flex:none}
.marque b{font-family:var(--titre);font-size:1.32rem;line-height:1.15;display:block}
.marque small{display:block;font-family:var(--texte);font-weight:400;font-size:.78rem;color:#B8C4CE;letter-spacing:.02em}
.nav-chap{display:flex;flex-direction:column;gap:2px;border-top:1px solid #27425A;border-bottom:1px solid #27425A;padding:12px 0}
.nav-chap a{text-decoration:none;color:#C3CFD9;font-size:.97rem;padding:8px 10px;display:flex;gap:12px;align-items:baseline;border-inline-start:3px solid transparent}
.nav-chap a b{font-family:var(--titre);font-weight:600;font-size:.82rem;color:#8FA3B4;min-width:20px}
.nav-chap a:hover,.nav-chap a[aria-current]{color:#fff;border-inline-start-color:var(--rouge);background:#16334A}
.pup-langue{font-size:.92rem;color:#C3CFD9;text-decoration:none;border:1px solid #2C4A62;padding:8px 12px;align-self:flex-start}
.pup-langue:hover{background:#16334A;color:#fff}
.pup-pro{margin-top:auto;border-top:1px solid #27425A;padding-top:18px;font-size:.9rem;color:#B8C4CE}
.pup-pro b{display:block;color:#fff;font-family:var(--titre);font-size:1.05rem;margin-bottom:4px}
.pup-pro a{display:inline-block;margin-top:10px;color:#fff;text-decoration:none;border-bottom:2px solid var(--rouge);font-weight:600}
.pup-pro a:hover{color:#F0B9B3}

/* ───── Colonne de contenu ───── */
main{min-width:0}
.chap{padding:72px var(--marge);border-bottom:1px solid var(--trait)}
.chap h2{font-size:clamp(1.6rem,3vw,2.3rem);margin-bottom:14px}
.chap h2 .no{font-weight:600;color:var(--rouge);margin-inline-end:14px;font-size:.7em;vertical-align:.12em}
.chap h2 .no::after{content:"";display:inline-block;width:40px;height:3px;background:var(--rouge);vertical-align:.32em;margin-inline-start:14px}
.chapeau{color:var(--gris);max-width:64ch;margin-bottom:30px}
.prose{max-width:70ch}
.prose p,.prose ul,.prose ol{margin-bottom:16px}
.prose ul,.prose ol{padding-inline-start:22px}
.prose li{margin-bottom:6px}
.prose h2{font-size:clamp(1.4rem,2.4vw,1.85rem);margin:38px 0 12px}
.prose h3{font-size:1.2rem;margin:26px 0 8px}
.prose a{color:var(--sapin);font-weight:600}
.prose table{border-collapse:collapse;width:100%;margin:10px 0 22px;background:#fff;font-size:.95rem}
.prose th,.prose td{border:1px solid var(--trait);padding:10px 12px;text-align:start;vertical-align:top}
.prose th{background:var(--encre);color:#fff;font-weight:600}
.prose blockquote{border-inline-start:4px solid var(--rouge);padding:4px 16px;color:var(--gris);margin:0 0 16px}

/* Ouverture (accueil, en-têtes de page) */
.ouverture{padding:64px var(--marge) 72px;border-bottom:1px solid var(--trait)}
.ouverture h1{font-size:clamp(2rem,4.4vw,3.4rem);max-width:20ch}
.ouverture h1 em{font-style:normal;box-shadow:inset 0 -14px 0 #F3C9C4}
.amorce{margin:20px 0 28px;color:var(--gris);max-width:60ch;font-size:1.08rem}
.boutons{display:flex;gap:14px;flex-wrap:wrap}
.btn{display:inline-block;text-decoration:none;font-weight:600;padding:13px 22px;border:2px solid var(--encre);text-align:center;cursor:pointer;font:inherit;font-weight:600}
.btn-rouge{background:var(--rouge);border-color:var(--rouge);color:#fff}
.btn-rouge:hover{background:var(--rouge-f);border-color:var(--rouge-f)}
.btn-ligne{background:transparent;color:var(--encre)}
.btn-ligne:hover{background:var(--encre);color:#fff}
.jalons{display:flex;gap:36px;flex-wrap:wrap;margin-top:56px}
.jalons div{border-top:3px solid var(--encre);padding-top:10px;min-width:140px}
.jalons b{font-family:var(--titre);font-size:1.45rem;display:block}
.jalons span{color:var(--gris);font-size:.9rem}
.fil{display:flex;flex-wrap:wrap;gap:8px;font-size:.88rem;color:var(--gris);margin-bottom:18px}
.fil a{color:var(--gris)}
.fil span[aria-hidden]{color:#B9AE9E}
.date-maj{font-size:.9rem;color:var(--sapin);font-weight:600}

/* Lignes à points de conduite (rubriques, guides) */
.carte-lignes{max-width:920px}
.ligne-sv{display:grid;grid-template-columns:auto 1fr auto;align-items:baseline;gap:14px;padding:16px 6px;border-bottom:1px dashed var(--trait);text-decoration:none;transition:transform .18s ease,background .18s ease}
.ligne-sv:hover{transform:translateX(8px);background:#fff}
[dir=rtl] .ligne-sv:hover{transform:translateX(-8px)}
.ligne-sv .sv-nom{font-family:var(--titre);font-weight:600;font-size:1.15rem}
.ligne-sv .pointes{border-bottom:2px dotted #B9AE9E;transform:translateY(-6px)}
.ligne-sv .sv-desc{color:var(--gris);font-size:.95rem;text-align:end;max-width:38ch}
@media (max-width:700px){.ligne-sv{grid-template-columns:1fr;gap:4px}.ligne-sv .pointes{display:none}.ligne-sv .sv-desc{text-align:start;max-width:none}}

/* Gouvernorats */
.lignes-villes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:32px;max-width:980px}
.ligne-ville{display:flex;align-items:baseline;gap:12px;padding:13px 4px;border-bottom:1px solid var(--trait);text-decoration:none}
.ligne-ville:hover b{color:var(--rouge)}
.ligne-ville .fl{color:var(--rouge);font-weight:700;flex:none}
.ligne-ville b{font-family:var(--titre);font-size:1.08rem}
.ligne-ville span{color:var(--gris);font-size:.85rem;margin-inline-start:auto}
@media (max-width:900px){.lignes-villes{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.lignes-villes{grid-template-columns:minmax(0,1fr)}}

/* Deux colonnes, coches */
.deux-cols{display:grid;grid-template-columns:1fr 1fr;gap:48px;max-width:1040px}
@media (max-width:900px){.deux-cols{grid-template-columns:1fr}}
.coches{list-style:none;display:grid;gap:12px}
.coches li{display:flex;gap:12px;align-items:flex-start}
.coches .v{flex:none;width:22px;height:22px;background:var(--sapin);color:#fff;font-weight:700;font-size:.8rem;display:grid;place-items:center;margin-top:4px}

/* FAQ : une seule ouverte */
.faq{max-width:780px}
.faq details{border-bottom:1px solid var(--trait)}
.faq summary{cursor:pointer;font-weight:600;font-family:var(--titre);font-size:1.08rem;padding:16px 0;padding-inline-end:34px;list-style:none;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;inset-inline-end:4px;top:13px;font-size:1.4rem;color:var(--rouge);transition:transform .2s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{color:var(--gris);padding:0 0 18px;max-width:66ch}

/* Bloc sombre « Vous êtes un pro ? » */
.chap-nuit{background:var(--nuit);color:#EDE7DC;border-bottom:none}
.chap-nuit h2{color:#fff}
.chap-nuit h2 .no{color:#E9897F}.chap-nuit h2 .no::after{background:#E9897F}
.chap-nuit .chapeau{color:#AEBDCA}
.chap-nuit .btn-rouge{border-color:var(--rouge)}

/* Encadré pro partenaire */
.partenaire{border:2px solid var(--encre);background:#fff;padding:20px 22px;margin:28px 0;max-width:620px;box-shadow:6px 6px 0 var(--rouge)}
.partenaire small{display:block;font-size:.78rem;letter-spacing:.04em;color:var(--sapin);font-weight:600;margin-bottom:6px}
.partenaire b{font-family:var(--titre);font-size:1.2rem;display:block}
.partenaire span{color:var(--gris);font-size:.93rem;display:block;margin:2px 0 12px}
.partenaire .btn{padding:10px 18px}

/* Guides prix */
.prix-table{width:100%;max-width:820px;border-collapse:collapse;background:#fff;margin:6px 0 10px}
.prix-table caption{text-align:start;font-weight:600;padding:0 0 8px;color:var(--gris);font-size:.92rem}
.prix-table th,.prix-table td{border:1px solid var(--trait);padding:12px 14px;text-align:start}
.prix-table thead th{background:var(--encre);color:#fff;font-weight:600}
.prix-table td.n{font-variant-numeric:tabular-nums;white-space:nowrap;font-weight:600}
.prix-table td.moy{background:#FCEFEC}
.prix-note{font-size:.88rem;color:var(--gris);max-width:70ch}
.sources{font-size:.9rem;color:var(--gris);max-width:70ch}
.sources li{margin-bottom:6px}
.sources a{color:var(--sapin)}
.confirme{display:inline-block;background:#E4F1EE;color:var(--sapin);font-weight:600;font-size:.85rem;padding:4px 10px;margin-bottom:12px}
.sommaire{border-inline-start:3px solid var(--rouge);padding-inline-start:16px;margin:0 0 28px;max-width:60ch}
.sommaire b{font-family:var(--titre);display:block;margin-bottom:4px}
.sommaire ol{padding-inline-start:20px;color:var(--gris)}
.sommaire a{color:var(--encre)}

/* Blog */
.blog-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:26px;max-width:1100px}
.blog-card{background:#fff;border:1px solid var(--trait);display:flex;flex-direction:column}
.blog-card-media img{aspect-ratio:16/9;object-fit:cover;width:100%;border-bottom:3px solid var(--encre)}
.blog-card-body{padding:16px 18px 18px;display:flex;flex-direction:column;gap:8px;flex:1}
.blog-chip{font-size:.8rem;color:var(--sapin);font-weight:600;text-decoration:none}
.blog-card h3{font-size:1.12rem}
.blog-card h3 a{text-decoration:none}
.blog-card h3 a:hover{color:var(--rouge)}
.blog-card p{color:var(--gris);font-size:.93rem}
.blog-card-meta{margin-top:auto;font-size:.82rem;color:var(--gris)}
.blog-filters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:28px}
.blog-filters a{text-decoration:none;border:1px solid var(--trait);padding:7px 14px;font-size:.92rem;background:#fff}
.blog-filters a:hover,.blog-filters a[aria-current]{background:var(--encre);color:#fff;border-color:var(--encre)}
.blog-pager{display:flex;gap:18px;align-items:center;margin-top:30px;flex-wrap:wrap}
.blog-pager a{font-weight:600;color:var(--sapin)}
.blog-featured{margin:0 0 26px;max-width:860px}
.blog-featured img{border:3px solid var(--encre);box-shadow:8px 8px 0 var(--encre);aspect-ratio:16/9;object-fit:cover;width:100%}
.blog-intro{font-size:1.1rem;color:var(--encre);font-weight:500}
.blog-byline{color:var(--gris);font-size:.92rem;margin-top:12px}
.blog-legal{background:#fff;border:1px dashed var(--rouge);padding:16px 18px;margin:26px 0;max-width:70ch}
.blog-legal p{color:var(--gris);font-size:.93rem}
.blog-preview-note{background:#FFF3CD;padding:10px var(--marge);font-weight:600}
.blog-empty{color:var(--gris)}

/* Pied de page */
.pied{grid-column:1 / -1;background:var(--encre);color:#A8B8C5;padding:30px var(--marge);font-size:.88rem;display:flex;gap:24px;flex-wrap:wrap;justify-content:space-between}
.pied a{color:#C3CFD9}
.pied nav{display:flex;gap:18px;flex-wrap:wrap}

/* Bannière cookies */
.consent-banner{position:fixed;z-index:1000;inset-inline:16px;bottom:16px;max-width:760px;margin-inline:auto;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:16px 20px;border:2px solid var(--encre);background:#fff;color:var(--encre);box-shadow:6px 6px 0 var(--encre)}
.consent-banner[hidden]{display:none}
.consent-banner strong{font-family:var(--titre);font-size:1rem}
.consent-banner p{margin:4px 0;color:var(--gris);font-size:.9rem}
.consent-banner a{color:var(--sapin);font-size:.85rem;font-weight:600}
.consent-actions{display:flex;gap:10px}
.consent-actions button{min-height:44px;padding:0 18px;border:2px solid var(--encre);background:transparent;color:var(--encre);font:inherit;font-weight:600;cursor:pointer}
.consent-actions [data-consent-accept]{background:var(--rouge);border-color:var(--rouge);color:#fff}
@media (max-width:650px){.consent-banner{flex-direction:column;align-items:stretch;bottom:84px}.consent-actions button{flex:1}}

@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.ligne-sv{transition:none}}

/* ───── Mobile : pupitre replié en en-tête ───── */
@media (max-width:960px){
  body{display:block}
  .pupitre{position:static;height:auto;border-inline-end:none;border-bottom:4px solid var(--rouge);padding:16px 18px;gap:12px;overflow:visible}
  .nav-chap{flex-direction:row;overflow-x:auto;border:none;padding:2px 0;gap:2px;scrollbar-width:none}
  .nav-chap a{white-space:nowrap;border-inline-start:none;border-bottom:3px solid transparent;padding:6px 9px}
  .nav-chap a b{display:none}
  .nav-chap a:hover,.nav-chap a[aria-current]{border-inline-start:none;border-bottom-color:var(--rouge);background:none}
  .pupitre-haut{flex-direction:row;align-items:center;justify-content:space-between;gap:12px;width:100%}
  .pup-pro{display:none}
  .chap{padding:52px var(--marge)}
  .ouverture{padding:44px var(--marge) 52px}
}

/* Chatbot : même police que le site */
.dn-assistant,.dn-assistant button,.dn-assistant input{font-family:var(--texte)}

/* Tableau des prix en cartes sur téléphone */
@media (max-width:700px){
  .prix-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .prix-table,.prix-table tbody,.prix-table tr,.prix-table th,.prix-table td{display:block;width:100%}
  .prix-table{background:none}
  .prix-table tr{background:#fff;border:1px solid var(--trait);margin-bottom:12px}
  .prix-table th[scope=row]{border:none;border-bottom:2px solid var(--encre);padding:12px 14px}
  .prix-table td{display:flex;justify-content:space-between;gap:12px;border:none;border-top:1px solid var(--trait);padding:9px 14px;white-space:normal}
  .prix-table td::before{content:attr(data-l);font-weight:400;color:var(--gris)}
}