/* DYS.MA — https://dys.ma — CEO : A. Bounit — File : static/css/page-directory.css
   Annuaire public (Etape 17 · calque Repere). Jetons Repere uniquement,
   proprietes logiques (RTL sans left/right), zero code couleur hors tokens. */

/* ---------- Hero de recherche ---------- */
.dir-hero {
  background:linear-gradient(180deg, var(--surface), var(--paper));
  border-bottom:1px solid var(--line);
  padding-block:var(--s7) var(--s6);
}
.dir-hero h1 { font-size:clamp(30px, 4vw, 44px); line-height:1.05; }
.dir-hero .lead {
  margin-top:var(--s2); max-width:56ch;
  font-size:var(--f-t-lg); line-height:1.5; color:var(--ink-500);
}

/* ---------- Formulaire : barre unique + filtres ---------- */
.dir-form { display:block; }
.dir-searchbar { display:flex; gap:var(--s3); flex-wrap:wrap; margin-top:var(--s5); }
.dir-searchbar .grow { position:relative; flex:1 1 340px; min-width:0; }
.dir-searchbar .grow svg {
  position:absolute; inset-inline-start:15px; top:50%; transform:translateY(-50%);
  width:18px; height:18px; color:var(--ink-400); pointer-events:none;
}
.dir-searchbar .grow .input { padding-inline-start:44px; }
.dir-searchbar .input, .dir-searchbar .btn { height:52px; }
.dir-searchbar .dir-city { flex:0 1 220px; }
.dir-searchbar .btn { flex:0 0 auto; padding-inline:var(--s5); }

.dir-filters {
  display:flex; align-items:center; gap:var(--s3);
  flex-wrap:wrap; margin-top:var(--s4);
}
.dir-filters .field { margin:0; }
.dir-filters .input { height:44px; }
.dir-check {
  display:inline-flex; align-items:center; gap:var(--s2);
  min-height:44px; font-size:var(--f-t-md); font-weight:600; color:var(--ink-600);
  cursor:pointer;
}
.dir-check input { width:20px; height:20px; accent-color:var(--em-600); cursor:pointer; }
.dir-reset {
  margin-inline-start:auto; display:inline-flex; align-items:center; gap:6px;
  min-height:44px; font-size:var(--f-t-sm); font-weight:600; color:var(--ink-500);
}
.dir-reset:hover { color:var(--em-700); }
.dir-reset svg { width:15px; height:15px; }

/* Selecteurs stylises (caret Repere, miroir RTL) */
select.input {
  appearance:none; -webkit-appearance:none; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233A4E70' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right var(--s3) center; background-size:14px;
  padding-inline-end:var(--s6);
}
[dir="rtl"] select.input { background-position:left var(--s3) center; }

/* ---------- Corps ---------- */
.dir-body { padding-block:var(--s6) var(--s8); }
.dir-results-head {
  display:flex; align-items:center; gap:var(--s3) var(--s4);
  flex-wrap:wrap; margin-bottom:var(--s5);
}
.dir-count { font-size:var(--f-t-base); font-weight:600; color:var(--ink-600); }
.dir-count b { color:var(--em-700); font-weight:700; }
.dir-sort { margin-inline-start:auto; display:inline-flex; align-items:center; gap:var(--s2); }
.dir-sort label { font-size:var(--f-t-sm); color:var(--ink-500); font-weight:600; }
.dir-sort select.input { height:40px; padding-block:0; font-size:var(--f-t-sm); }

/* Jetons de filtres actifs, revocables */
.dir-active { display:flex; flex-wrap:wrap; gap:var(--s2); width:100%; }
.dir-chip {
  display:inline-flex; align-items:center; gap:6px;
  padding-block:5px; padding-inline:12px 5px; border-radius:var(--r-pill);
  background:var(--em-100); color:var(--em-800); font-size:12.5px; font-weight:600;
}
.dir-chip .x {
  display:inline-flex; align-items:center; justify-content:center;
  width:22px; height:22px; border-radius:var(--r-pill);
  color:var(--em-800); background:transparent;
}
.dir-chip .x:hover { background:var(--em-200); color:var(--em-900); }
.dir-chip .x svg { width:13px; height:13px; }

/* ---------- Grille de cartes ---------- */
.dir-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:var(--s4); }
@media (max-width:1024px) { .dir-grid { grid-template-columns:repeat(2, 1fr); } }
@media (max-width:640px)  { .dir-grid { grid-template-columns:1fr; } }

.dir-card {
  display:flex; flex-direction:column; gap:var(--s3);
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-md); padding:var(--s5); box-shadow:var(--sh-sm);
  transition:transform .18s var(--f-ease), box-shadow .18s var(--f-ease), border-color .18s;
}
.dir-card:hover { transform:translateY(-3px); box-shadow:var(--sh-md); border-color:var(--line-strong); }
.dir-card-head { display:flex; align-items:center; gap:var(--s3); }
.dir-avatar {
  flex:none; width:52px; height:52px; border-radius:var(--r-pill);
  display:flex; align-items:center; justify-content:center;
  background:var(--em-100); color:var(--em-800);
  font-family:var(--font-head); font-weight:600; font-size:var(--f-t-lg);
  text-transform:uppercase;
}

/* Identite : nom (2 lignes max) PUIS specialite (1 ligne), jamais sur la meme ligne */
.dir-card-id { min-width:0; display:flex; flex-direction:column; gap:2px; }
.dir-card-name {
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  font-family:var(--font-head); font-weight:600; font-size:var(--f-t-lg);
  color:var(--ink-800); line-height:1.15;
}
.dir-card-spe {
  display:flex; align-items:center; gap:6px; max-width:100%; margin-top:2px;
  font-size:var(--f-t-sm); font-weight:600; color:var(--em-700);
}
.dir-card-spe svg { width:15px; height:15px; flex:none; }
.dir-card-spe .spe-name { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dir-card-more { flex:none; font-weight:600; color:var(--ink-400); }

.dir-card-meta {
  display:flex; flex-wrap:wrap; gap:var(--s1) var(--s4);
  font-size:var(--f-t-sm); color:var(--ink-500);
}
.dir-card-meta span { display:inline-flex; align-items:center; gap:6px; }
.dir-card-meta svg { width:15px; height:15px; color:var(--ink-400); flex:none; }

.dir-langs { display:flex; flex-wrap:wrap; gap:6px; }
.dir-langs .tag { padding-block:3px; padding-inline:10px; font-size:11.5px; }

.dir-card-foot {
  display:flex; align-items:center; justify-content:space-between; gap:var(--s3);
  margin-top:auto; padding-top:var(--s4); border-top:1px solid var(--line);
}
.dir-avail {
  display:inline-flex; align-items:center; gap:6px;
  font-size:12.5px; font-weight:700; color:var(--em-800);
}
.dir-avail svg { width:16px; height:16px; }
.dir-card-foot .btn { padding-block:9px; padding-inline:16px; font-size:14px; }

/* ---------- Etat vide ---------- */
.dir-empty {
  grid-column:1 / -1; text-align:center;
  padding:var(--s8) var(--s4);
  background:var(--surface); border:1px dashed var(--line-strong); border-radius:var(--r-md);
}
.dir-empty-ico {
  width:58px; height:58px; margin:0 auto var(--s4); border-radius:var(--r-pill);
  display:flex; align-items:center; justify-content:center;
  background:var(--ink-100); color:var(--ink-500);
}
.dir-empty-ico svg { width:26px; height:26px; }
.dir-empty h2 { font-size:var(--f-t-xl); margin-bottom:var(--s2); }
.dir-empty p { max-width:46ch; margin:0 auto var(--s5); color:var(--ink-500); }
.dir-empty-actions { display:flex; gap:var(--s3); justify-content:center; flex-wrap:wrap; }

/* ---------- Pagination accessible (neutre, jamais le CTA vert) ---------- */
.dir-pagination {
  display:flex; align-items:center; justify-content:center; gap:var(--s2);
  margin-top:var(--s7);
}
.dir-page-link {
  min-width:44px; height:44px; display:inline-flex; align-items:center; justify-content:center;
  gap:6px; padding-inline:var(--s4);
  border:1px solid var(--line-strong); border-radius:var(--r-sm);
  background:var(--surface); color:var(--ink-600); font-weight:600; font-size:14px;
}
.dir-page-link:hover { border-color:var(--ink-400); color:var(--ink-800); background:var(--surface-2); }
.dir-page-link svg { width:16px; height:16px; }
.dir-page-info { padding-inline:var(--s3); font-size:14px; color:var(--ink-500); }
[dir="rtl"] .dir-pagination svg { transform:scaleX(-1); }

/* htmx : discretion pendant l'echange */
.htmx-request #results { opacity:.55; transition:opacity .15s; }

/* ==================== Fiche detaillee (profile_detail) ==================== */
.dir-detail { padding-block:var(--s6) var(--s8); }
.dir-detail-grid {
  display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:var(--s5);
  align-items:start;
}
@media (max-width:900px) { .dir-detail-grid { grid-template-columns:1fr; } }

.dir-detail-head { display:flex; align-items:center; gap:var(--s4); margin-bottom:var(--s5); }
.dir-detail-head .dir-avatar { width:72px; height:72px; font-size:var(--f-t-2xl); }
.dir-detail-title { min-width:0; }
.dir-detail-title h1 { font-size:clamp(26px, 3.4vw, 38px); line-height:1.08; }
.dir-detail-spe {
  display:flex; flex-wrap:wrap; gap:8px; margin-top:var(--s2);
  font-size:var(--f-t-md); color:var(--em-700); font-weight:600;
}
.dir-detail-spe .tag { color:var(--em-800); }

.dir-section { margin-bottom:var(--s5); }
.dir-section h2 {
  font-size:var(--f-t-lg); margin-bottom:var(--s3);
  padding-bottom:var(--s2); border-bottom:1px solid var(--line);
}
.dir-section p { color:var(--ink-600); line-height:1.6; }
.dir-empty-line { color:var(--ink-400); font-style:italic; }

.dir-detail-meta { display:flex; flex-wrap:wrap; gap:var(--s2) var(--s5); margin-bottom:var(--s5); }
.dir-detail-meta span { display:inline-flex; align-items:center; gap:8px; font-size:var(--f-t-md); color:var(--ink-600); }
.dir-detail-meta svg { width:17px; height:17px; color:var(--ink-400); flex:none; }

/* Panneau lateral : disponibilite + coordonnees + action */
.dir-aside { position:sticky; top:var(--s5); display:flex; flex-direction:column; gap:var(--s4); }
.dir-aside .card { padding:var(--s5); }
.dir-aside h2 { font-size:var(--f-t-md); margin-bottom:var(--s3); }
.dir-contact { display:flex; flex-direction:column; gap:var(--s2); }
.dir-contact a, .dir-contact span { display:inline-flex; align-items:center; gap:8px; font-size:var(--f-t-sm); color:var(--ink-600); }
.dir-contact svg { width:16px; height:16px; color:var(--ink-400); flex:none; }
.dir-avail--lg { font-size:var(--f-t-md); }

/* ==================== Fiche premium (profile_detail v2) ==================== */
.dir-claim {
  display:flex; align-items:center; gap:var(--s4); flex-wrap:wrap;
  padding:var(--s5); margin-bottom:var(--s5);
  background:linear-gradient(135deg, var(--em-100), var(--surface));
  border:1px solid var(--em-300); border-radius:var(--r-lg);
}
.dir-claim-ico {
  flex:none; width:48px; height:48px; border-radius:var(--r-pill);
  display:flex; align-items:center; justify-content:center;
  background:var(--surface); color:var(--em-700); border:1px solid var(--em-300);
}
.dir-claim-ico svg { width:24px; height:24px; }
.dir-claim-txt { flex:1 1 320px; min-width:0; }
.dir-claim-txt strong { display:block; font-family:var(--font-head); font-size:var(--f-t-lg); color:var(--ink-800); }
.dir-claim-txt span { font-size:var(--f-t-sm); color:var(--ink-500); }
.dir-claim .btn { flex:none; }

.dir-photo {
  flex:none; width:120px; height:120px; border-radius:var(--r-lg);
  object-fit:cover; border:1px solid var(--line); box-shadow:var(--sh-sm);
}
.dir-avatar--xl { width:120px; height:120px; border-radius:var(--r-lg); font-size:44px; }
.dir-detail-head { align-items:flex-start; gap:var(--s5); }
.dir-detail-head .dir-detail-title { padding-top:var(--s2); }

.dir-updated {
  margin-top:var(--s3); font-size:var(--f-t-sm); color:var(--ink-400);
  display:inline-flex; align-items:center; gap:6px;
}
.dir-updated svg { width:14px; height:14px; }

@media (max-width:560px) {
  .dir-detail-head { flex-direction:column; align-items:flex-start; }
  .dir-photo, .dir-avatar--xl { width:88px; height:88px; font-size:32px; }
}

/* ==================== Fiche premium v3 (badges, placeholders) ==================== */
/* Badge « Profil verifie » (coche bleue, style plateforme). Bleu dedie hors palette
   de marque : signal de confiance neutre, non clinique, contraste AA. */
.dir-verified {
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 14px; border-radius:var(--r-pill);
  background:var(--c-e8f1fe); color:var(--c-1256c4); font-weight:700; font-size:var(--f-t-sm);
}
.dir-verified svg { width:18px; height:18px; }

/* Section « a completer » : placeholder honnete quand la donnee manque. */
.dir-ph {
  display:flex; align-items:center; gap:10px;
  padding:var(--s3) var(--s4); border:1px dashed var(--line-strong);
  border-radius:var(--r-md); background:var(--surface);
  color:var(--ink-400); font-size:var(--f-t-sm);
}
.dir-ph svg { width:18px; height:18px; flex:none; }

/* Sous-titre de section discret. */
.dir-section .muted { color:var(--ink-400); font-size:var(--f-t-sm); }

/* Grille d'attributs (populations, actes, moyens de paiement...) */
.dir-chips { display:flex; flex-wrap:wrap; gap:8px; }
.dir-chips .tag svg { width:14px; height:14px; margin-inline-end:4px; }

/* Reseaux sociaux */
.dir-social { display:flex; gap:10px; flex-wrap:wrap; }
.dir-social a {
  width:40px; height:40px; border-radius:var(--r-sm);
  display:inline-flex; align-items:center; justify-content:center;
  border:1px solid var(--line-strong); color:var(--ink-500); background:var(--surface);
}
.dir-social a:hover { color:var(--em-700); border-color:var(--em-300); background:var(--em-100); }
.dir-social svg { width:18px; height:18px; }

/* Carte (placeholder statique tant qu'aucune coordonnee GPS n'est en base) */
.dir-map {
  height:200px; border-radius:var(--r-md); border:1px solid var(--line);
  background:
    linear-gradient(0deg, rgba(15,138,99,.05), rgba(15,138,99,.05)),
    repeating-linear-gradient(0deg, var(--surface-2) 0 22px, var(--surface) 22px 24px),
    repeating-linear-gradient(90deg, var(--surface-2) 0 22px, var(--surface) 22px 24px);
  display:flex; align-items:center; justify-content:center;
  color:var(--ink-400); font-size:var(--f-t-sm); text-align:center; padding:var(--s4);
}

/* ==================== Fiche premium v4 (sections riches) ==================== */
.dir-headline { margin-top:var(--s2); font-size:var(--f-t-md); color:var(--ink-600); }
.dir-list { margin:0; padding-inline-start:0; list-style:none; display:flex; flex-direction:column; gap:var(--s3); }
.dir-list li { color:var(--ink-700); line-height:1.5; }
.dir-list .muted { color:var(--ink-400); }
.dir-section .muted { color:var(--ink-400); }

.dir-faq { border:1px solid var(--line); border-radius:var(--r-sm); margin-bottom:var(--s2); }
.dir-faq summary {
  cursor:pointer; padding:var(--s3) var(--s4); font-weight:600; color:var(--ink-700);
  list-style:none;
}
.dir-faq summary::-webkit-details-marker { display:none; }
.dir-faq summary::after { content:"+"; float:inline-end; color:var(--em-600); font-weight:700; }
.dir-faq[open] summary::after { content:"−"; }
.dir-faq p { padding:0 var(--s4) var(--s3); color:var(--ink-600); }

.dir-cabinet h2 { display:flex; align-items:center; flex-wrap:wrap; }
.dir-hours { width:100%; border-collapse:collapse; margin-top:var(--s3); font-size:var(--f-t-sm); }
.dir-hours th { text-align:start; font-weight:600; color:var(--ink-600); padding:4px 0; }
.dir-hours td { text-align:end; color:var(--ink-500); padding:4px 0; }

/* ==================== Page d'orientation RDV (pro non inscrit) ==================== */
.dir-orient { max-width:820px; margin-inline:auto; text-align:center; padding-block:var(--s6) var(--s8); }
.dir-orient-ico {
  width:64px; height:64px; margin:0 auto var(--s4); border-radius:var(--r-pill);
  display:flex; align-items:center; justify-content:center;
  background:var(--em-100); color:var(--em-700);
}
.dir-orient-ico svg { width:30px; height:30px; }
.dir-orient h1 { font-size:clamp(24px, 3vw, 34px); line-height:1.1; }
.dir-orient-lead { margin:var(--s3) auto var(--s6); max-width:60ch; color:var(--ink-500); font-size:var(--f-t-lg); line-height:1.6; }
.dir-orient-actions { display:grid; grid-template-columns:1fr 1fr; gap:var(--s4); text-align:start; }
@media (max-width:720px) { .dir-orient-actions { grid-template-columns:1fr; } }
.dir-orient-card {
  display:flex; flex-direction:column; gap:var(--s3);
  padding:var(--s5); background:var(--surface);
  border:1px solid var(--line); border-radius:var(--r-lg);
}
.dir-orient-card--primary { border-color:var(--em-300); box-shadow:var(--sh-md); }
.dir-orient-card h2 { font-size:var(--f-t-lg); color:var(--ink-800); }
.dir-orient-card p { color:var(--ink-500); line-height:1.55; flex:1; }
.dir-orient-card .dir-contact { gap:var(--s2); }

/* ==================== SECTIONS EN CARTES (premium, fond blanc cassé) ==================== */
.dir-detail > div > .dir-section {
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  padding:var(--s5);
  box-shadow:var(--sh-sm);
  margin-block:0 var(--s4);
}
/* Titre de section : filet conserve, sans double bordure dans la carte. */
.dir-detail > div > .dir-section h2 {
  border-bottom:0;
  padding-bottom:0;
  margin-bottom:var(--s4);
  font-size:var(--f-t-lg);
  color:var(--ink-800);
}
/* La presentation (1er bloc) reste ouverte, sans carte, pour ancrer la lecture. */
.dir-detail > div > .dir-section:first-of-type {
  background:transparent; border:0; box-shadow:none; padding:0;
}
.dir-detail > div > .dir-section:first-of-type h2 {
  border-bottom:2px solid var(--em-100); padding-bottom:var(--s2);
}

/* CTA "Prendre rendez-vous" : premium discret (contour), jamais concurrent du vert. */
.dir-cta-rdv { width:100%; }

/* ==================== PREMIUM SECTIONS v5 (respiration & lisibilite) ==================== */

/* Chips : espacement GARANTI (gap + fallback marge), taille confortable. */
.dir-chips, .dir-langs {
  display:flex; flex-wrap:wrap; gap:10px; margin-top:var(--s2);
}
.dir-chips .tag, .dir-langs .tag {
  padding:7px 14px; font-size:13px; font-weight:600; border-radius:var(--r-pill);
  line-height:1.2;
}
.dir-chips .tag { background:var(--em-100); color:var(--em-800); border:1px solid var(--em-200); }
.dir-langs .tag { background:var(--surface); color:var(--ink-600); border:1px solid var(--line-strong); }

/* Presentation : texte plus grand, aere, largeur de lecture confortable. */
.dir-detail > div > .dir-section:first-of-type p {
  font-size:var(--f-t-lg); line-height:1.7; color:var(--ink-700); max-inline-size:68ch;
}

/* Sections en cartes : plus d'air interne. */
.dir-detail > div > .dir-section {
  padding:var(--s6);
  margin-block:0 var(--s5);
}
.dir-detail > div > .dir-section h2 {
  display:flex; align-items:center; gap:10px;
  font-size:var(--f-t-xl); font-weight:600; color:var(--ink-800); margin-bottom:var(--s4);
}

/* Listes (diplomes, experiences) : cartes internes avec puce icone, plus de <li> plat. */
.dir-list { gap:var(--s3); }
.dir-list li {
  display:flex; gap:12px; align-items:flex-start;
  padding:var(--s3) var(--s4);
  background:var(--paper); border:1px solid var(--line); border-radius:var(--r-md);
}
.dir-list li::before {
  content:""; flex:none; inline-size:8px; block-size:8px; margin-top:7px;
  border-radius:var(--r-pill); background:var(--em-500);
}
.dir-list li strong { font-weight:700; color:var(--ink-800); }
.dir-list li .muted { color:var(--ink-400); font-weight:500; }

/* FAQ : accordeon soigne. */
.dir-faq {
  border:1px solid var(--line); border-radius:var(--r-md);
  margin-bottom:var(--s3); background:var(--paper); overflow:hidden;
  transition:border-color .15s, box-shadow .15s;
}
.dir-faq[open] { border-color:var(--em-300); box-shadow:var(--sh-sm); }
.dir-faq summary {
  cursor:pointer; padding:var(--s4); font-weight:600; font-size:var(--f-t-md);
  color:var(--ink-800); list-style:none; display:flex; align-items:center;
  justify-content:space-between; gap:var(--s3);
}
.dir-faq summary::-webkit-details-marker { display:none; }
.dir-faq summary::after {
  content:"+"; flex:none; inline-size:26px; block-size:26px;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:var(--r-pill); background:var(--em-100); color:var(--em-700);
  font-weight:700; font-size:18px; transition:transform .2s;
}
.dir-faq[open] summary::after { content:"−"; transform:rotate(180deg); }
.dir-faq p { padding:0 var(--s4) var(--s4); color:var(--ink-600); line-height:1.6; margin:0; }

/* ==================== PREMIUM BODY v6 ==================== */
/* Nom propre : jamais en capitales, serif, dominant. */
.dir-detail-title h1 { text-transform:none; font-size:clamp(28px,3.4vw,38px); line-height:1.1; }
.dir-headline { font-size:var(--f-t-md); color:var(--ink-500); font-weight:500; margin-top:var(--s2); }

/* Bandeau de reassurance sous le nom. */
.dir-reassure {
  display:flex; flex-wrap:wrap; gap:var(--s2) var(--s3); margin-top:var(--s4);
}
.dir-reassure .pill {
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 14px; border-radius:var(--r-pill);
  background:var(--surface); border:1px solid var(--line-strong);
  font-size:13px; font-weight:600; color:var(--ink-700);
}
.dir-reassure .pill svg { width:16px; height:16px; color:var(--em-600); flex:none; }

/* Chips DESATURES par defaut (info neutre). Le vert redevient un accent rare. */
.dir-chips { display:flex; flex-wrap:wrap; gap:10px; margin-top:var(--s2); }
.dir-chips .tag {
  padding:7px 14px; font-size:13px; font-weight:600; border-radius:var(--r-pill);
  background:var(--surface); color:var(--ink-700); border:1px solid var(--line-strong);
  line-height:1.2;
}
.dir-chips.is-accent .tag { background:var(--em-100); color:var(--em-800); border-color:var(--em-200); }

/* Logos sociaux (vrais traces, currentColor). */
.dir-social a svg { width:18px; height:18px; }

/* Carte statique reelle (tuile OSM sans script tiers via <img> si GPS). */
.dir-map-real {
  width:100%; height:190px; border-radius:var(--r-md); border:1px solid var(--line);
  object-fit:cover; display:block;
}

/* Responsive : panneau au-dessus du contenu sur mobile. */
@media (max-width:900px) {
  .dir-detail-grid { display:flex; flex-direction:column; }
  .dir-aside { order:-1; position:static; }
}

/* ==================== ONGLETS INTERNES (TABS v9) ==================== */
.dir-tabs {
  position:sticky; top:0; z-index:10;
  display:flex; gap:2px; flex-wrap:wrap;
  margin-block:var(--s2) var(--s5);
  padding-bottom:0; border-bottom:1px solid var(--line);
  background:var(--paper);
}
.dir-tab {
  appearance:none; border:0; background:transparent; cursor:pointer;
  padding:12px 18px; font-family:var(--font-body); font-size:var(--f-t-md);
  font-weight:600; color:var(--ink-500); border-bottom:2px solid transparent;
  transition:color .15s, border-color .15s; white-space:nowrap;
}
.dir-tab:hover { color:var(--ink-800); }
.dir-tab[aria-selected="true"] { color:var(--em-700); border-bottom-color:var(--em-600); }
.dir-tab:focus-visible { outline:2.5px solid var(--em-600); outline-offset:-2px; border-radius:4px; }

.dir-tabpanel { display:none; animation:dirFade .25s var(--f-ease); }
.dir-tabpanel.is-active { display:block; }
@keyframes dirFade { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:none; } }

/* Sans JS : tout est visible (les panels restent affiches), les onglets sont des ancres. */
.no-js .dir-tabpanel { display:block; }
.no-js .dir-tabs { position:static; }

/* Espacement interne des sections dans un panel. */
.dir-tabpanel > .dir-section:first-child { margin-top:0; }
@media (prefers-reduced-motion:reduce) { .dir-tabpanel { animation:none; } }

/* ==================== PROFILE PREMIUM v2 (dp-) — PIXEL PERFECT ==================== */
/* Valeurs reprises 1:1 de la maquette de reference. Variables isolees --dp-*.
   SEULE exception : le fond de page reste celui de DYS.MA (var --paper). */
.dp {
  --dp-green-900:var(--c-0f3d26); --dp-green-800:var(--c-155235); --dp-green-700:var(--c-2f7d52);
  --dp-green-200:var(--c-cfe4d6); --dp-green-100:var(--c-e8f2ea);
  --dp-ink:var(--c-16241c); --dp-ink-2:var(--c-3c4d43); --dp-muted:var(--c-6a7c70);
  --dp-line:var(--c-e3e9e4); --dp-line-2:var(--c-eef2ef); --dp-white:var(--c-ffffff);
  --dp-r-pill:999px; --dp-r-card:14px; --dp-r-ctl:10px;
  --dp-sh-1:0 1px 2px rgba(16,40,28,.05);
  --dp-sh-2:0 1px 2px rgba(16,40,28,.04), 0 10px 28px -14px rgba(16,40,28,.22);
  --dp-serif:"Fraunces","Iowan Old Style",Georgia,ui-serif,serif;
  --dp-sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --dp-page:1200px; --dp-rail:352px; --dp-gap:32px;
  max-width:var(--dp-page); margin:0 auto; padding:0 24px 56px;
  font-family:var(--dp-sans); font-size:15px; line-height:1.55; color:var(--dp-ink);
}
.dp h1,.dp h2,.dp h3 { font-family:var(--dp-serif); font-weight:600; letter-spacing:-.01em; margin:0; }

/* Boutons (dark navy pour primaire — PAS de vert de marque hors regle) */
.dp .btn { display:inline-flex; align-items:center; justify-content:center; gap:8px;
  border:1px solid transparent; border-radius:var(--dp-r-ctl); font:inherit; font-weight:550;
  cursor:pointer; text-decoration:none;
  transition:transform .12s ease, box-shadow .18s ease, background .18s ease; }
.dp .btn:active { transform:translateY(1px); }
.dp .btn-ink { background:var(--dp-green-900); color:var(--c-ffffff); padding:12px 20px; box-shadow:var(--dp-sh-1); }
.dp .btn-ink:hover { background:var(--dp-green-800); box-shadow:var(--dp-sh-2); }
.dp .btn-secondary { background:var(--dp-white); color:var(--dp-green-900);
  border-color:var(--dp-line); padding:11px 18px; }
.dp .btn-secondary:hover { border-color:var(--dp-green-200); background:var(--dp-green-100); }
.dp .btn-ghost { background:transparent; color:var(--dp-green-700); padding:8px 12px; }
.dp .btn-block { width:100%; }
.dp .btn-sm { padding:8px 14px; font-size:13.5px; }
.dp .btn-primary { background:var(--dp-green-900); color:var(--c-ffffff); padding:12px 20px; box-shadow:var(--dp-sh-1); }
.dp .btn-primary:hover { background:var(--dp-green-800); box-shadow:var(--dp-sh-2); }

/* Primitives */
.dp .card { background:var(--dp-white); border:1px solid var(--dp-line);
  border-radius:var(--dp-r-card); box-shadow:var(--dp-sh-1); }
.dp .chip, .dp-chip { display:inline-flex; align-items:center; gap:6px; background:var(--dp-white);
  border:1px solid var(--dp-line); border-radius:var(--dp-r-pill); padding:5px 12px;
  font-size:13px; color:var(--dp-ink-2); }
.dp .tag { font-size:11px; background:var(--dp-green-100); color:var(--dp-green-800);
  border-radius:var(--dp-r-pill); padding:3px 9px; font-weight:600; }
.dp .muted { color:var(--dp-muted); }

/* Fil d'ariane */
.dp-crumbs { display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-size:13px;
  color:var(--dp-muted); padding:20px 0 16px; }
.dp-crumbs a { color:var(--dp-muted); text-decoration:none; }
.dp-crumbs a:hover { color:var(--dp-green-700); }
.dp-crumbs .cur { color:var(--dp-ink-2); }

/* Hero */
.dp-hero { padding:26px 28px 0; overflow:hidden; }
.dp-hero-top { display:flex; gap:22px; align-items:flex-start; }
.dp-avatar { width:84px; height:84px; flex:0 0 84px; border-radius:20px;
  background:linear-gradient(160deg, var(--dp-green-100), var(--dp-green-200));
  display:grid; place-items:center; font-family:var(--dp-serif); font-size:26px;
  color:var(--dp-green-800); position:relative; text-transform:uppercase; }
.dp-verif { position:absolute; right:-6px; bottom:-6px; width:26px; height:26px;
  border-radius:50%; background:var(--dp-green-900); color:var(--c-ffffff); display:grid;
  place-items:center; border:2.5px solid var(--c-ffffff); }
.dp-verif svg { width:13px; height:13px; }
.dp-id { flex:1; min-width:0; }
.dp-id h1 { font-size:32px; line-height:1.15; text-transform:none; }
.dp-role { font-size:15px; color:var(--dp-ink-2); margin-top:4px; }
.dp-trust { display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
.dp-badge-verif { display:inline-flex; align-items:center; gap:6px; background:var(--dp-green-100);
  color:var(--dp-green-800); border-radius:var(--dp-r-pill); padding:5px 12px;
  font-size:12.5px; font-weight:550; }
.dp-badge-verif svg { width:13px; height:13px; }
.dp-hero-actions { display:flex; flex-direction:column; gap:8px; min-width:196px; }
.dp-hero-actions .meta { font-size:12px; color:var(--dp-muted); text-align:center; }

/* Facts */
.dp-facts { display:grid; grid-template-columns:repeat(4,1fr); margin:24px -28px 0;
  border-top:1px solid var(--dp-line-2); }
.dp-fact { padding:16px 28px; border-right:1px solid var(--dp-line-2); }
.dp-fact:last-child { border-right:0; }
.dp-fact .k { font-size:11px; letter-spacing:.09em; text-transform:uppercase;
  color:var(--dp-muted); font-weight:600; }
.dp-fact .v { font-size:15px; margin-top:3px; font-weight:550; color:var(--dp-ink); }
.dp-fact .v small { font-weight:400; color:var(--dp-muted); font-size:12.5px; }

/* Nav ancree (sous topbar DYS.MA 68px) */
.dp-anchors { position:sticky; top:68px; z-index:20; margin-top:28px;
  background:color-mix(in srgb, var(--paper) 88%, transparent); backdrop-filter:blur(8px);
  border-bottom:1px solid var(--dp-line); }
.dp-anchors ul { display:flex; gap:4px; list-style:none; margin:0; padding:0;
  overflow-x:auto; scrollbar-width:none; }
.dp-anchors ul::-webkit-scrollbar { display:none; }
.dp-anchors a { display:block; padding:13px 14px; font-size:13.5px; color:var(--dp-muted);
  text-decoration:none; border-bottom:2px solid transparent; white-space:nowrap; }
.dp-anchors a:hover { color:var(--dp-ink); }
.dp-anchors a.is-active { color:var(--dp-green-900); border-bottom-color:var(--dp-green-900); font-weight:550; }

/* Grille */
.dp-layout { display:grid; grid-template-columns:minmax(0,1fr) var(--dp-rail); gap:var(--dp-gap);
  align-items:start; padding:28px 0 0; }
.dp-main { display:flex; flex-direction:column; gap:16px; min-width:0; }
.dp-rail { position:sticky; top:76px; display:flex; flex-direction:column; gap:16px; }

/* Sections */
.dp-sec { padding:24px 28px; scroll-margin-top:84px; }
.dp-sec-head { display:flex; align-items:baseline; justify-content:space-between; gap:16px; margin-bottom:16px; }
.dp-sec-head h2 { font-size:19px; }
.dp-sec-head .hint { font-size:12.5px; color:var(--dp-muted); }
.dp-lede { font-size:15.5px; line-height:1.65; color:var(--dp-ink-2); max-width:64ch; }

/* Pathologies (match) */
.dp-match { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.dp-match-item { display:flex; gap:12px; align-items:flex-start; background:var(--dp-white);
  border:1px solid var(--dp-line); border-radius:12px; padding:12px 14px; }
.dp-match-item .dot { width:9px; height:9px; border-radius:50%; background:var(--dp-green-700);
  margin-top:6px; flex:0 0 9px; }
.dp-match-item .t { font-weight:550; font-size:14.5px; }

/* Specs */
.dp-specs { display:grid; grid-template-columns:repeat(3,1fr); border:1px solid var(--dp-line);
  border-radius:12px; overflow:hidden; }
.dp-spec { padding:16px; border-right:1px solid var(--dp-line-2); }
.dp-spec:last-child { border-right:0; }
.dp-spec .k { font-size:11px; letter-spacing:.09em; text-transform:uppercase;
  color:var(--dp-muted); font-weight:600; margin-bottom:8px; }
.dp-spec .chips { display:flex; flex-wrap:wrap; gap:6px; }

/* Timeline */
.dp-tl { position:relative; padding-left:22px; }
.dp-tl::before { content:""; position:absolute; left:4px; top:6px; bottom:6px; width:1.5px; background:var(--dp-line); }
.dp-tl-item { position:relative; padding:0 0 20px; }
.dp-tl-item:last-child { padding-bottom:0; }
.dp-tl-item::before { content:""; position:absolute; left:-22px; top:6px; width:9px; height:9px;
  border-radius:50%; background:var(--dp-white); border:2px solid var(--dp-green-700); }
.dp-tl-item.is-past::before { border-color:var(--dp-green-200); }
.dp-tl-year { font-size:12px; color:var(--dp-muted); font-variant-numeric:tabular-nums; }
.dp-tl-t { font-weight:550; font-size:14.5px; margin-top:1px; }
.dp-tl-s { font-size:13.5px; color:var(--dp-muted); }

/* FAQ */
.dp-faq details { border-bottom:1px solid var(--dp-line-2); }
.dp-faq details:first-child { border-top:1px solid var(--dp-line-2); }
.dp-faq summary { list-style:none; cursor:pointer; padding:15px 0; font-weight:550; font-size:14.5px;
  display:flex; justify-content:space-between; gap:16px; align-items:center; }
.dp-faq summary::-webkit-details-marker { display:none; }
.dp-faq summary::after { content:"+"; color:var(--dp-green-700); font-size:18px; transition:transform .2s ease; }
.dp-faq details[open] summary::after { transform:rotate(45deg); }
.dp-faq .a { padding:0 0 16px; color:var(--dp-ink-2); font-size:14.5px; max-width:62ch; }

/* Praticiens proches */
.dp-sims { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.dp-sim { border:1px solid var(--dp-line); border-radius:12px; padding:14px; background:var(--dp-white);
  text-decoration:none; display:block; transition:border-color .18s, box-shadow .18s, transform .18s; }
.dp-sim:hover { border-color:var(--dp-green-200); box-shadow:var(--dp-sh-2); transform:translateY(-2px); }
.dp-sim .av { width:34px; height:34px; border-radius:10px; background:var(--dp-green-100);
  color:var(--dp-green-800); display:grid; place-items:center; font-family:var(--dp-serif);
  font-size:13px; margin-bottom:10px; text-transform:uppercase; }
.dp-sim .n { font-weight:550; font-size:14px; color:var(--dp-ink); }
.dp-sim .r { font-size:12.5px; color:var(--dp-muted); margin-top:2px; }

/* Rail */
.dp-cta { padding:18px; }
.dp-status { display:flex; align-items:center; gap:8px; font-size:13.5px; font-weight:550;
  color:var(--dp-green-800); margin-bottom:4px; }
.dp-status .pulse { width:8px; height:8px; border-radius:50%; background:var(--dp-green-700);
  box-shadow:0 0 0 3px rgba(47,125,82,.16); }
.dp-delay { font-size:12.5px; color:var(--dp-muted); margin-bottom:14px; }
.dp-cta .btn + .btn { margin-top:8px; }
.dp-contact { margin-top:14px; padding-top:14px; border-top:1px solid var(--dp-line-2);
  display:flex; flex-direction:column; gap:9px; font-size:13.5px; }
.dp-contact a { display:flex; gap:9px; align-items:center; text-decoration:none; color:var(--dp-ink-2); }
.dp-contact a:hover { color:var(--dp-green-800); }
.dp-contact .ic { width:22px; color:var(--dp-green-700); flex:0 0 22px; text-align:center; }
.dp-contact .ic svg { width:15px; height:15px; }

.dp-office-head { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:16px 18px 0; }
.dp-office-head h3 { font-size:15px; }
.dp-office-body { padding:10px 18px 16px; }
.dp-addr { font-size:13.5px; color:var(--dp-ink-2); line-height:1.5; }
.dp-amen { display:flex; flex-wrap:wrap; gap:6px; margin-top:12px; }
.dp-amen .dp-chip { background:var(--dp-green-100); border-color:transparent; color:var(--dp-green-800); }
.dp-hours { margin-top:14px; border-top:1px solid var(--dp-line-2); padding-top:12px; font-size:13px; }
.dp-hours .row { display:flex; justify-content:space-between; padding:4px 0; color:var(--dp-ink-2); }
.dp-hours .row.today { font-weight:600; color:var(--dp-green-800); }
.dp-hours .row.off { color:var(--c-a6b3aa); }
.dp-hours .num { font-variant-numeric:tabular-nums; }
.dp-map { height:132px; position:relative; border-top:1px solid var(--dp-line-2);
  background:
    radial-gradient(circle at 42% 52%, rgba(47,125,82,.20) 0 8px, transparent 9px),
    linear-gradient(180deg,var(--c-eaf1ec),var(--c-e2ebe4)); }
.dp-map .pin { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  background:var(--c-ffffff); border:1px solid var(--dp-line); border-radius:var(--dp-r-pill);
  padding:4px 11px; font-size:12px; box-shadow:var(--dp-sh-1); white-space:nowrap; color:var(--dp-ink-2); }
.dp-map-actions { display:flex; gap:8px; padding:12px 18px; }
.dp-map-actions .btn { flex:1; }

/* Claim + meta */
.dp-claim { display:flex; align-items:center; gap:14px; justify-content:space-between;
  padding:14px 18px; border:1px dashed var(--dp-line); border-radius:12px; background:var(--dp-white);
  font-size:13.5px; color:var(--dp-ink-2); }
.dp-pagemeta { display:flex; gap:18px; flex-wrap:wrap; font-size:12.5px; color:var(--dp-muted); padding:14px 2px 0; }
.dp-pagemeta a { color:var(--dp-muted); }

@media (max-width:1040px) {
  .dp-layout { grid-template-columns:1fr; }
  .dp-rail { position:static; order:-1; }
  .dp-sims { grid-template-columns:1fr 1fr; }
}
@media (max-width:720px) {
  .dp { padding:0 16px 92px; }
  .dp-hero { padding:20px 18px 0; }
  .dp-hero-top { flex-wrap:wrap; }
  .dp-hero-actions { display:none; }
  .dp-id h1 { font-size:26px; }
  .dp-facts { grid-template-columns:1fr 1fr; margin:20px -18px 0; }
  .dp-fact { padding:13px 18px; }
  .dp-fact:nth-child(2n) { border-right:0; }
  .dp-fact:nth-child(-n+2) { border-bottom:1px solid var(--dp-line-2); }
  .dp-sec { padding:20px 18px; }
  .dp-match, .dp-specs, .dp-sims { grid-template-columns:1fr; }
  .dp-spec { border-right:0; border-bottom:1px solid var(--dp-line-2); }
  .dp-spec:last-child { border-bottom:0; }
}
@media (prefers-reduced-motion:reduce) { .dp * { animation:none !important; transition:none !important; } }

/* ==================== dp- CARTES FIX (fond blanc + bordure + ombre) ==================== */
/* La maquette met .card sur hero/sections/rail. On le reproduit ici. */
.dp-hero,
.dp-main > .dp-sec,
.dp-cta,
.dp-office {
  background:var(--dp-white);
  border:1px solid var(--dp-line);
  border-radius:var(--dp-r-card);
  box-shadow:var(--dp-sh-1);
}
/* Les blocs du rail sont des cartes distinctes. */
.dp-rail > .dp-cta { padding:18px; }
.dp-office { overflow:hidden; }

/* Le bandeau de faits vit DANS la carte hero : ses gouttieres collent aux bords. */
.dp-facts { margin-left:-28px; margin-right:-28px; }