/* =====================================================================
   DYS.MA — Couche « Pages de contenu » (legal, support)
   Colonne de lecture plafonnee, typographie de corps, archives.
   ===================================================================== */

.page-head { padding-block:var(--s8) var(--s6); border-bottom:1px solid var(--line); }
.page-head h1 { font-size:clamp(28px,3.4vw,42px); margin-bottom:var(--s3); }
.page-head .lead { font-size:17px; line-height:1.6; color:var(--ink-500); max-width:56ch; }

.doc-changes { margin-bottom:var(--s6); padding-inline-start:var(--s4); border-inline-start:2px solid var(--line-strong); }
.doc-changes__label { font-size:var(--f-t-xs); font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-500); margin-bottom:var(--s1); }
.doc-changes p:last-child { margin-bottom:0; }
.doc-meta {
  display:flex; flex-wrap:wrap; align-items:center; gap:10px var(--s5);
  margin-top:var(--s5); padding:14px 18px;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md);
}
.doc-meta-item { display:inline-flex; align-items:center; gap:8px; font-size:13.5px; color:var(--ink-600); }
.doc-meta-item svg { width:16px; height:16px; flex:none; color:var(--em-600); }
.doc-meta-item strong { font-weight:700; color:var(--ink-700); font-variant-numeric:tabular-nums; }

.page-doc { padding-block: var(--s7) var(--s6); }
.page-contact { max-width: 66ch; margin-block: var(--s6) var(--s8); padding-block-start: var(--s4); border-top: 1px solid var(--line); }
.page-contact__label { font-size: var(--f-t-xs); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-500); margin-bottom: var(--s2); }
.page-contact__addr { display: block; color: var(--ink-500); }
.page-contact__note { font-size: var(--f-t-sm); color: var(--ink-500); margin-top: var(--s2); }

.doc-layout { display:grid; grid-template-columns:minmax(0,1fr) 280px; gap:var(--s7); padding-block:var(--s7) var(--s9); align-items:start; }
.doc-aside { position:sticky; top:88px; display:flex; flex-direction:column; gap:var(--s5); }
.doc-aside h2 { font-size:15px; margin-bottom:var(--s3); }
.doc-aside-list { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:2px; }
.doc-aside-list a { display:block; padding:9px 12px; border-radius:var(--r-sm); font-size:14px; font-weight:600; color:var(--ink-500); border-inline-start:2px solid transparent; }
.doc-aside-list a:hover { background:var(--em-100); color:var(--em-800); }
.doc-aside-list a[aria-current="page"] { border-inline-start-color:var(--em-600); background:var(--surface); color:var(--ink-700); }

.prose { max-width:68ch; color:var(--ink-600); font-size:16px; line-height:1.7; }
.prose h2 { font-size:22px; margin:var(--s7) 0 var(--s3); scroll-margin-top:96px; }
.prose h2:first-child { margin-top:0; }
.prose h3 { font-size:18px; margin:var(--s5) 0 var(--s2); }
.prose p { margin-bottom:var(--s4); }
.prose ul, .prose ol { margin:0 0 var(--s4); padding-inline-start:22px; }
.prose li { margin-bottom:6px; }
.prose strong { color:var(--ink-700); font-weight:700; }
.prose hr { border:0; border-top:1px solid var(--line); margin-block:var(--s6); }
.prose a { font-weight:600; text-decoration:underline; text-underline-offset:2px; }
.prose code { font-size:14px; background:var(--surface-2); padding:2px 6px; border-radius:var(--r-xs); }

.version-list { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:var(--s3); }
.version-row {
  display:flex; align-items:center; gap:var(--s4); flex-wrap:wrap;
  padding:16px 18px; background:var(--surface);
  border:1px solid var(--line); border-radius:var(--r-md);
}
.version-row .v-num { font-family:var(--font-head); font-weight:600; font-size:19px; color:var(--ink-800); font-variant-numeric:tabular-nums; min-width:64px; }
.version-row .v-dates { font-size:13.5px; color:var(--ink-500); flex:1 1 220px; }
.version-row .v-open { margin-inline-start:auto; }

@media (max-width:960px) {
  .doc-layout { grid-template-columns:1fr; gap:var(--s6); }
  .doc-aside { position:static; order:-1; }
}

/* ---------- Support : externalisation des styles en ligne ---------- */
.support-section { padding-block: var(--s7); }
.support-grid { gap: var(--s5); }
.support-cta { margin-block-start: var(--s3); }
.support-band { border-block: 1px solid var(--line); }
.support-h2 { font-size: clamp(22px, 2.6vw, 30px); margin-block-end: var(--s4); }
.support-lead {
  max-inline-size: 56ch;
  color: var(--ink-500);
  line-height: 1.6;
  margin-block-end: var(--s5);
}
.support-notice { max-inline-size: 68ch; }
/* Toute icone de ces pages est bornee, quelle que soit la coquille : un SVG
   sans dimension rendu hors de la feuille qui le borne s'affiche a sa taille
   intrinseque. C'est ainsi qu'un pictogramme devient un triangle geant. */
.support-notice svg, .card-ico svg, .notice svg {
  inline-size: 22px;
  block-size: 22px;
  flex: none;
}

/* == BLOG & CONTENU (Etape 17 solde) == */
/* En-tete de page de contenu : titre + action ou recherche alignes. */
.page-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s3);
  margin-block-end: var(--s6);
}

/* Rangee d'etiquettes de categorie, non centree, sans capitales forcees. */
.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
  margin-block-end: var(--s5);
}
.chip {
  display: inline-flex;
  align-items: center;
  padding-block: var(--s1);
  padding-inline: var(--s3);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  font-size: var(--f-t-sm);
  color: var(--ink-600);
  text-decoration: none;
  transition: border-color var(--f-dur) var(--f-ease),
    background-color var(--f-dur) var(--f-ease);
}
.chip:hover {
  background-color: var(--surface-2);
  border-color: var(--ink-300);
}

/* Grille d'articles : responsive, gouttiere >= padding interne des cartes. */
.article-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--s5);
}
.article-card {
  padding: var(--s4);
}
.article-card-link {
  text-decoration: none;
  color: var(--ink-900);
}
.article-card h2 {
  margin-block: 0 var(--s2);
  font-size: var(--f-t-lg);
}
.article-summary {
  margin: 0;
  color: var(--ink-500);
  font-size: var(--f-t-md);
}
.article-meta {
  margin-block-start: var(--s3);
  color: var(--ink-400);
  font-size: var(--f-t-xs);
}
.empty-note {
  color: var(--ink-400);
  font-size: var(--f-t-md);
}

/* Detail d'article. */
.article-detail .article-cover img,
.article-figure img,
.article-video-thumb img {
  inline-size: 100%;
  block-size: auto;
  border-radius: var(--r-md);
}
.article-head {
  margin-block: var(--s5) var(--s6);
}
.article-lead {
  color: var(--ink-500);
  font-size: var(--f-t-lg);
}
.article-body {
  max-inline-size: 68ch;
}

/* Bouton « Ecouter l'article » : lecteur audio local, cadre neutre. */
.article-audio {
  margin-block: var(--s5);
  padding: var(--s4);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background-color: var(--surface-2);
}
.article-audio-title {
  margin-block: 0 var(--s2);
  font-size: var(--f-t-sm);
  font-weight: 600;
  color: var(--ink-700);
}
.article-audio-player {
  inline-size: 100%;
}

/* Vignette video LOCALE cliquable : aucune requete distante au rendu. */
.article-video-thumb {
  position: relative;
  display: block;
  margin-block: var(--s5);
  text-decoration: none;
}
.article-video-hint {
  display: block;
  margin-block-start: var(--s2);
  font-size: var(--f-t-sm);
  color: var(--em-700);
  text-decoration: underline;
}
.article-figure {
  margin-block: var(--s5);
  margin-inline: 0;
}
.article-attachment {
  margin-block: var(--s3);
}
.article-attachment a {
  color: var(--em-700);
  text-decoration: underline;
}

/* Rangee de partage. */
.share-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
  margin-block-start: var(--s6);
  padding-block-start: var(--s5);
  border-block-start: 1px solid var(--line);
}

/* Espace redaction : formulaire empile + tableau de donnees. */
.stack-form {
  display: flex;
  flex-direction: column;
  gap: var(--s4);
  max-inline-size: 68ch;
}
.form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s3);
}
.table-wrap {
  overflow-x: auto;
}
.data-table {
  inline-size: 100%;
  border-collapse: collapse;
}
.data-table th,
.data-table td {
  padding-block: var(--s2);
  padding-inline: var(--s3);
  text-align: start;
  border-block-end: 1px solid var(--line);
  font-size: var(--f-t-md);
}
.data-table th {
  font-weight: 600;
  color: var(--ink-700);
}
.row-actions {
  display: flex;
  gap: var(--s3);
}
.note {
  margin-block-start: var(--s5);
  color: var(--ink-400);
  font-size: var(--f-t-sm);
}

/* == BLOG MAGAZINE (Etape 17 solde, refonte) == */
.blog-wrap { padding-block: var(--s7); }

/* Bandeau editorial : identite forte, une seule action (lire), recherche calme. */
.blog-masthead {
  max-inline-size: 760px;
  margin-block-end: var(--s7);
}
.blog-eyebrow {
  margin: 0 0 var(--s2);
  font-size: var(--f-t-sm);
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--em-700);
}
.blog-title {
  margin: 0 0 var(--s3);
  font-family: var(--font-head);
  font-size: clamp(32px, 5vw, 52px);
  line-height: 1.08;
  color: var(--ink-900);
}
.blog-lead {
  margin: 0 0 var(--s5);
  font-size: var(--f-t-lg);
  color: var(--ink-500);
  max-inline-size: 60ch;
}

/* Recherche discrete : filet, pas d'aplat, pas de bouton concurrent. */
.blog-search {
  display: flex;
  align-items: center;
  gap: var(--s2);
  max-inline-size: 460px;
  padding-block: var(--s2);
  padding-inline: var(--s4);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  background-color: var(--surface);
  transition: border-color var(--f-dur) var(--f-ease),
    box-shadow var(--f-dur) var(--f-ease);
}
.blog-search:focus-within {
  border-color: var(--em-500);
  box-shadow: var(--sh-sm);
}
.blog-search-ico { color: var(--ink-400); font-size: var(--f-t-lg); }
.blog-search-input {
  flex: 1;
  border: 0;
  background: transparent;
  font-size: var(--f-t-md);
  color: var(--ink-900);
}
.blog-search-input:focus { outline: none; }

.blog-chips { margin-block-end: var(--s7); }
.chip--active,
.chip--all:hover { background-color: var(--em-100); border-color: var(--em-300); color: var(--em-800); }
.chip--active { font-weight: 600; }

/* Article vedette. */
.feature-card {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: var(--s6);
  align-items: center;
  margin-block-end: var(--s8);
  padding: var(--s5);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background-color: var(--surface);
  text-decoration: none;
  transition: box-shadow var(--f-dur) var(--f-ease),
    transform var(--f-dur) var(--f-ease);
}
.feature-card:hover { box-shadow: var(--sh-md); transform: translateY(-2px); }
.feature-media {
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: var(--r-md);
  background-color: var(--surface-2);
}
.feature-media img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.feature-heading {
  margin: var(--s2) 0 var(--s3);
  font-family: var(--font-head);
  font-size: clamp(24px, 3vw, 34px);
  line-height: 1.15;
  color: var(--ink-900);
}
.feature-excerpt { margin: 0 0 var(--s4); color: var(--ink-500); font-size: var(--f-t-lg); }

/* Cartes de grille. */
.blog-grid { gap: var(--s6); }
.post-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  background-color: var(--surface);
  transition: box-shadow var(--f-dur) var(--f-ease),
    transform var(--f-dur) var(--f-ease);
}
.post-card:hover { box-shadow: var(--sh-md); transform: translateY(-2px); }
.post-cover {
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background-color: var(--surface-2);
}
.post-cover img {
  inline-size: 100%; block-size: 100%; object-fit: cover;
  transition: transform var(--f-dur) var(--f-ease);
}
.post-card:hover .post-cover img { transform: scale(1.03); }
.post-body { padding: var(--s4); display: flex; flex-direction: column; gap: var(--s2); }
.post-heading { margin: 0; font-size: var(--f-t-xl); line-height: 1.2; }
.post-heading a { color: var(--ink-900); text-decoration: none; }
.post-heading a:hover { color: var(--em-700); }
.post-excerpt { margin: 0; color: var(--ink-500); font-size: var(--f-t-md); }

/* Metadonnees et surtitres de carte. */
.card-kicker {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2);
  margin: 0; font-size: var(--f-t-xs);
}
.card-cat {
  display: inline-flex;
  padding-block: 2px; padding-inline: var(--s2);
  border-radius: var(--r-xs);
  background-color: var(--em-100);
  color: var(--em-800);
  font-weight: 600;
}
.card-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2);
  margin: 0; color: var(--ink-400); font-size: var(--f-t-xs);
}
.card-dot { color: var(--ink-300); }
.card-views { color: var(--ink-500); font-weight: 600; }
.read-more { color: var(--em-700); font-weight: 600; white-space: nowrap; }

/* Pagination moderne. */
.pager {
  display: flex; align-items: center; justify-content: center; gap: var(--s4);
  margin-block-start: var(--s8);
}
.pager-state { color: var(--ink-400); font-size: var(--f-t-sm); }

@media (max-width: 860px) {
  .feature-card { grid-template-columns: 1fr; }
}

/* == BLOG AUTEUR / BYLINE == */
.card-author {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s2);
  margin: 0;
}
.author-name { font-size: var(--f-t-sm); font-weight: 600; color: var(--ink-700); }
.author-role { font-size: var(--f-t-xs); color: var(--ink-400); }

/* Byline de l'article : pastille d'initiale + nom + fonction + meta. */
.article-byline {
  display: flex; align-items: center; gap: var(--s3);
  margin-block-start: var(--s4);
  padding-block-start: var(--s4);
  border-block-start: 1px solid var(--line);
}
.byline-avatar {
  display: inline-flex; align-items: center; justify-content: center;
  inline-size: 44px; block-size: 44px; flex: 0 0 auto;
  border-radius: var(--r-pill);
  background-color: var(--em-100);
  color: var(--em-800);
  font-family: var(--font-head);
  font-size: var(--f-t-lg);
  font-weight: 600;
}
.byline-text { display: flex; flex-direction: column; }
.byline-name { font-size: var(--f-t-md); font-weight: 600; color: var(--ink-900); }
.byline-role {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2);
  font-size: var(--f-t-xs); color: var(--ink-400);
}

/* == BLOG PREMIUM (layout 2 colonnes + sidebar) == */
.blog-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: var(--s7);
  align-items: start;
}
.blog-main { min-inline-size: 0; }

/* Grille d'articles resserree en 2 colonnes dans la zone principale. */
.blog-grid { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.related-grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--s4); }

/* Colonne laterale. */
.blog-aside { display: flex; flex-direction: column; gap: var(--s5); position: sticky; inset-block-start: var(--s5); }
.aside-card {
  padding: var(--s4);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background-color: var(--surface);
}
.aside-title {
  margin: 0 0 var(--s3);
  font-size: var(--f-t-sm);
  font-weight: 600;
  letter-spacing: .03em;
  color: var(--ink-700);
  padding-block-end: var(--s2);
  border-block-end: 2px solid var(--em-500);
}
.aside-popular { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s3); }
.aside-popular a { display: flex; gap: var(--s3); text-decoration: none; align-items: start; }
.aside-rank {
  flex: 0 0 auto;
  inline-size: 28px; block-size: 28px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--r-pill);
  background-color: var(--em-100); color: var(--em-800);
  font-family: var(--font-head); font-weight: 700; font-size: var(--f-t-sm);
}
.aside-pop-title { display: block; font-size: var(--f-t-md); color: var(--ink-900); line-height: 1.3; }
.aside-pop-meta { display: block; margin-block-start: 2px; font-size: var(--f-t-xs); color: var(--ink-400); }
.aside-popular a:hover .aside-pop-title { color: var(--em-700); }
.aside-empty { margin: 0; font-size: var(--f-t-sm); color: var(--ink-400); }

.aside-soon, .aside-newsletter { position: relative; }
.aside-soon-text { margin: 0 0 var(--s3); font-size: var(--f-t-sm); color: var(--ink-500); }
.aside-badge {
  display: inline-flex;
  padding-block: 2px; padding-inline: var(--s2);
  border-radius: var(--r-xs);
  background-color: var(--am-100); color: var(--am-700);
  font-size: var(--f-t-xs); font-weight: 600;
}

/* Page article : largeur de lecture bornee, colonne laterale conservee. */
.blog-layout--article { grid-template-columns: minmax(0, 1fr) 300px; }
.article-crumb {
  display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center;
  margin: 0 0 var(--s4); font-size: var(--f-t-sm); color: var(--ink-400);
}
.article-crumb a { color: var(--em-700); text-decoration: none; }
.article-title {
  margin: var(--s2) 0 var(--s3);
  font-family: var(--font-head);
  font-size: clamp(28px, 4vw, 44px);
  line-height: 1.12;
  color: var(--ink-900);
}
.article-detail .article-body { max-inline-size: 68ch; }

/* Encadres cliniques (references, parcours) : etat honnete premium. */
.clinic-box {
  margin-block: var(--s6);
  padding: var(--s5);
  border: 1px solid var(--line);
  border-inline-start: 4px solid var(--em-500);
  border-radius: var(--r-md);
  background-color: var(--surface-2);
}
.clinic-box-title { margin: 0 0 var(--s2); font-weight: 600; color: var(--ink-800); }
.clinic-box-text { margin: 0 0 var(--s3); font-size: var(--f-t-md); color: var(--ink-500); }

.section-title {
  margin-block: var(--s7) var(--s4);
  font-family: var(--font-head);
  font-size: var(--f-t-2xl);
  color: var(--ink-900);
}

/* Responsive : la sidebar passe sous le contenu. */
@media (max-width: 960px) {
  .blog-layout, .blog-layout--article { grid-template-columns: minmax(0, 1fr); }
  .blog-aside { position: static; }
}

/* == BLOG FINITIONS == */
/* Miniatures strictement bornees a leur carte. */
.post-cover img, .feature-media img, .article-cover img { max-inline-size: 100%; }

/* Derniers articles. */
/* .aside-latest : unifie avec .aside-item (voir SIDEBAR VIGNETTES) */

/* Tag (non cliquable tant qu'aucune vue de tag n'existe). */
.chip--tag { background-color: var(--surface-2); color: var(--ink-600); cursor: default; }

/* Navigation entre articles. */
.article-pager {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4);
  margin-block: var(--s7);
  padding-block-start: var(--s5);
  border-block-start: 1px solid var(--line);
}
.article-pager-link {
  display: flex; flex-direction: column; gap: var(--s1);
  padding: var(--s4);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  text-decoration: none;
  transition: border-color var(--f-dur) var(--f-ease), box-shadow var(--f-dur) var(--f-ease);
}
.article-pager-link:hover { border-color: var(--em-300); box-shadow: var(--sh-sm); }
.article-pager-next { text-align: end; }
.article-pager-dir { font-size: var(--f-t-xs); font-weight: 600; color: var(--em-700); }
.article-pager-title { font-size: var(--f-t-md); color: var(--ink-900); }

@media (max-width: 640px) {
  .article-pager { grid-template-columns: 1fr; }
  .article-pager-next { text-align: start; }
}

/* == BLOG BORNAGE V2 == */
/* Le hero ne prend JAMAIS la hauteur de l'ecran : media plafonne. */
.feature-media {
  aspect-ratio: 16 / 9;
  max-block-size: 340px;
  overflow: hidden;
  border-radius: var(--r-md);
}
.feature-media img { inline-size: 100%; block-size: 100%; object-fit: cover; }

/* Vedette : deux colonnes reelles, jamais empilee plein cadre en desktop. */
.feature-card { grid-template-columns: 1.1fr 1fr; align-items: center; }

/* Cartes de grille : miniature 16:9 plafonnee. */
.post-cover { aspect-ratio: 16 / 9; max-block-size: 220px; overflow: hidden; }
.post-cover img { inline-size: 100%; block-size: 100%; object-fit: cover; }

/* Grille : 3 colonnes desktop, 2 tablette, 1 mobile — imposees. */
.blog-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s5); }
@media (max-width: 1024px) { .blog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px)  { .blog-grid { grid-template-columns: minmax(0, 1fr); } }

/* Cover d'article : plafonnee, jamais plein ecran. */
.article-cover { margin-block: var(--s5); }
.article-cover img {
  inline-size: 100%; max-block-size: 460px; object-fit: cover;
  border-radius: var(--r-md);
}

/* == BLOG ARCHI MAGAZINE (prime sur les reglages anterieurs) == */
/* Deux colonnes des le haut : contenu large + laterale etroite. */
.blog-layout { grid-template-columns: minmax(0, 1fr) 300px; gap: var(--s6); align-items: start; }

/* Masthead compact, dans la colonne principale. */
.blog-masthead { max-inline-size: none; margin-block-end: var(--s4); }
.blog-title { font-size: clamp(26px, 3.4vw, 38px); margin-block-end: var(--s2); }
.blog-lead { font-size: var(--f-t-lg); margin-block-end: 0; }
.blog-chips { margin-block: var(--s4) var(--s6); }

/* Hero compact HORIZONTAL : image a gauche bornee, texte a droite. */
.feature-card {
  display: grid; grid-template-columns: 300px 1fr; gap: var(--s5);
  align-items: center; margin-block-end: var(--s7);
  padding: 0; border: 0; background: transparent;
  border-block-end: 1px solid var(--line); padding-block-end: var(--s6);
}
.feature-card:hover { box-shadow: none; transform: none; }
.feature-media { aspect-ratio: 4 / 3; max-block-size: 220px; border-radius: var(--r-md); overflow: hidden; }
.feature-media img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.feature-heading { font-size: clamp(22px, 2.6vw, 30px); margin-block: var(--s2) var(--s2); }
.feature-excerpt { font-size: var(--f-t-md); margin-block-end: var(--s3); }

/* Grille dense : 2 colonnes dans la zone principale (elle est deja etroite). */
.blog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s5); }
@media (max-width: 1180px) { .blog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 720px)  { .blog-grid { grid-template-columns: minmax(0, 1fr); } }

/* Cartes compactes : miniature 16:9 petite, texte serre. */
.post-card { border: 0; border-radius: 0; background: transparent; overflow: visible; }
.post-card:hover { box-shadow: none; transform: none; }
.post-cover {
  display: block; aspect-ratio: 16 / 9; max-block-size: 180px;
  border-radius: var(--r-md); overflow: hidden; background-color: var(--surface-2);
}
.post-cover img { inline-size: 100%; block-size: 100%; object-fit: cover; transition: transform var(--f-dur) var(--f-ease); }
.post-card:hover .post-cover img { transform: scale(1.04); }
.post-body { padding: var(--s3) 0 0; gap: var(--s1); }
.post-heading { font-size: var(--f-t-lg); line-height: 1.25; margin-block: var(--s1) 0; }
.post-excerpt {
  font-size: var(--f-t-sm); color: var(--ink-500); margin-block: var(--s1) var(--s2);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* Laterale un peu plus compacte. */
.blog-aside { gap: var(--s4); position: sticky; inset-block-start: var(--s4); }
.aside-card { padding: var(--s4); }

@media (max-width: 960px) {
  .blog-layout { grid-template-columns: minmax(0, 1fr); }
  .blog-aside { position: static; }
  .feature-card { grid-template-columns: 1fr; }
}

/* == SIDEBAR VIGNETTES == */
.aside-popular { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s3); }
.aside-latest  { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s3); }

.aside-item { display: grid; grid-template-columns: 64px 1fr; gap: var(--s3); align-items: center; text-decoration: none; }
.aside-thumb {
  inline-size: 64px; block-size: 48px;
  border-radius: var(--r-sm); overflow: hidden;
  background-color: var(--surface-2); flex: 0 0 auto;
}
.aside-thumb img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.aside-item-body { min-inline-size: 0; }
.aside-item-title {
  display: block; font-size: var(--f-t-sm); line-height: 1.25; color: var(--ink-900);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.aside-item-meta { display: block; margin-block-start: 2px; font-size: var(--f-t-xs); color: var(--ink-400); }
.aside-item:hover .aside-item-title { color: var(--em-700); }

/* == QUESTIONNAIRE (habillage Etape 17) == */
.q-shell { max-inline-size: 720px; margin-inline: auto; padding-block: var(--s7); }
.q-card {
  padding: var(--s6);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background-color: var(--surface);
  box-shadow: var(--sh-sm);
}
.q-card--center { text-align: center; }
.q-eyebrow {
  margin: 0 0 var(--s2); font-size: var(--f-t-sm); font-weight: 600;
  letter-spacing: .04em; color: var(--em-700);
}
.q-title { margin: 0 0 var(--s3); font-family: var(--font-head); font-size: clamp(24px,3vw,34px); line-height: 1.15; color: var(--ink-900); }
.q-lead { margin: 0 0 var(--s4); font-size: var(--f-t-lg); color: var(--ink-600); }
.q-help { margin: 0 0 var(--s3); font-size: var(--f-t-sm); color: var(--ink-400); }

.q-note { margin-block: var(--s5); padding: var(--s4); border-inline-start: 4px solid var(--em-500); background-color: var(--surface-2); border-radius: var(--r-md); }
.q-note-title { margin: 0 0 var(--s2); font-size: var(--f-t-md); font-weight: 600; color: var(--ink-800); }

/* Formulaire. */
.q-form { margin-block-start: var(--s5); display: flex; flex-direction: column; gap: var(--s4); }
.q-field { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s2); }
.q-legend { font-weight: 600; color: var(--ink-800); font-size: var(--f-t-md); padding: 0; }
.q-field label { font-weight: 600; color: var(--ink-800); font-size: var(--f-t-md); }
.q-field input[type="text"], .q-field input[type="number"], .q-field input[type="date"],
.q-field select, .q-field textarea {
  inline-size: 100%; padding-block: var(--s2); padding-inline: var(--s3);
  border: 1px solid var(--line-strong); border-radius: var(--r-sm);
  background-color: var(--surface); font-size: var(--f-t-md); color: var(--ink-900);
}
.q-field input:focus, .q-field select:focus, .q-field textarea:focus {
  outline: none; border-color: var(--em-500); box-shadow: var(--sh-sm);
}
.q-errors { padding: var(--s3); border-radius: var(--r-sm); background-color: var(--danger-100); color: var(--danger); font-size: var(--f-t-sm); }
.q-actions { display: flex; flex-wrap: wrap; gap: var(--s3); margin-block-start: var(--s3); }
.q-cta { align-self: start; }

/* Progression. */
.q-progress { block-size: 8px; border-radius: var(--r-pill); background-color: var(--surface-2); overflow: hidden; }
.q-progress-bar { block-size: 100%; background-color: var(--em-500); border-radius: var(--r-pill); transition: inline-size var(--f-dur) var(--f-ease); }
.q-progress-label { margin: var(--s2) 0 var(--s5); font-size: var(--f-t-xs); color: var(--ink-400); }

/* Processing. */
.q-spinner {
  inline-size: 40px; block-size: 40px; margin-inline: auto; margin-block-end: var(--s4);
  border: 3px solid var(--em-100); border-block-start-color: var(--em-500);
  border-radius: var(--r-pill); animation: q-spin 900ms linear infinite;
}
@keyframes q-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .q-spinner { animation: none; } }
.q-link { color: var(--em-700); text-decoration: underline; }

/* Resultat. */
.q-result { max-inline-size: 760px; margin-inline: auto; padding-block: var(--s7); }
.q-result-head { margin-block-end: var(--s5); }
.q-banner { padding: var(--s4); border-radius: var(--r-md); margin-block-end: var(--s5); }
.q-banner-priority { background-color: var(--am-100); border-inline-start: 4px solid var(--am-600); color: var(--am-700); }
.q-notice { padding: var(--s4); border-radius: var(--r-md); background-color: var(--surface-2); margin-block-end: var(--s5); color: var(--ink-600); }
.q-orientations { display: flex; flex-direction: column; gap: var(--s5); }
.q-orientation { padding: var(--s5); border: 1px solid var(--line); border-radius: var(--r-lg); background-color: var(--surface); }
.q-orientation-title { margin: 0 0 var(--s3); font-family: var(--font-head); font-size: var(--f-t-2xl); color: var(--ink-900); }
.q-orientation-sub { margin: var(--s4) 0 var(--s2); font-size: var(--f-t-md); font-weight: 600; color: var(--em-800); }
.q-specialities { margin: var(--s2) 0 0; padding-inline-start: var(--s5); color: var(--ink-700); }
.q-flags { margin: var(--s4) 0; padding-inline-start: var(--s5); color: var(--ink-700); }
.q-result-footer { margin-block-start: var(--s6); padding-block-start: var(--s5); border-block-start: 1px solid var(--line); font-size: var(--f-t-sm); color: var(--ink-400); }

/* == QUESTIONNAIRE NAV (Precedent/Suivant) == */
.q-step-count { margin: 0 0 var(--s2); font-size: var(--f-t-sm); font-weight: 600; color: var(--em-700); }

/* Precedent a gauche, Suivant a droite ; les deux extremites toujours tenues. */
.q-nav {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s3); margin-block-start: var(--s5);
  padding-block-start: var(--s5); border-block-start: 1px solid var(--line);
}
.q-nav-prev { flex: 0 0 auto; }
.q-nav-next { flex: 0 0 auto; margin-inline-start: auto; }

/* Erreur juste sous le champ concerne, en rouge. */
.q-field-error {
  margin: var(--s1) 0 0; font-size: var(--f-t-sm); font-weight: 600; color: var(--danger);
}

@media (max-width: 520px) {
  .q-nav { flex-direction: column-reverse; align-items: stretch; }
  .q-nav-prev, .q-nav-next { inline-size: 100%; text-align: center; margin-inline-start: 0; }
}

/* == URGENCE (Cas A) == */
.emergency { max-inline-size: 760px; margin-inline: auto; padding-block: var(--s6); }
.emergency-band {
  display: flex; gap: var(--s4); align-items: start;
  padding: var(--s5);
  border-radius: var(--r-lg);
  background-color: var(--danger-100);
  border-inline-start: 6px solid var(--danger);
  margin-block-end: var(--s5);
}
.emergency-ico { font-size: 32px; line-height: 1; color: var(--danger); flex: 0 0 auto; }
.emergency-title {
  margin: 0 0 var(--s2); font-family: var(--font-head);
  font-size: clamp(24px, 3.4vw, 34px); line-height: 1.15; color: var(--ink-900);
}
.emergency-lead { margin: 0; font-size: var(--f-t-lg); color: var(--ink-700); }

.emergency-card {
  padding: var(--s5); margin-block-end: var(--s4);
  border: 1px solid var(--line); border-radius: var(--r-lg);
  background-color: var(--surface);
}
.emergency-card-title {
  margin: 0 0 var(--s3); font-size: var(--f-t-lg); font-weight: 600; color: var(--ink-800);
}
.emergency-do { border-inline-start: 4px solid var(--em-500); }
.emergency-avoid { border-inline-start: 4px solid var(--am-600); }
.emergency-family { background-color: var(--surface-2); }

.emergency-list { margin: 0; padding-inline-start: var(--s5); color: var(--ink-700); }
.emergency-list li { margin-block: var(--s2); font-size: var(--f-t-md); }

.emergency-conducts { border-inline-start: 4px solid var(--danger); }
.emergency-conduct-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s3); }
.conduct { display: flex; flex-direction: column; gap: var(--s1); }
.conduct-label { font-weight: 600; color: var(--ink-800); }
.conduct-number a { color: var(--danger); font-weight: 700; text-decoration: none; font-size: var(--f-t-lg); }

.emergency-footer {
  margin-block-start: var(--s6); padding-block-start: var(--s5);
  border-block-start: 1px solid var(--line);
  font-size: var(--f-t-sm); color: var(--ink-400);
}

/* == QUESTIONNAIRE STEPS NAV == */
.q-steps { display: flex; flex-wrap: wrap; gap: var(--s2); margin-block: var(--s3) var(--s5); }
.q-step-pill {
  display: inline-flex; align-items: center; justify-content: center;
  inline-size: 32px; block-size: 32px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line-strong);
  background-color: var(--surface);
  color: var(--ink-600); font-size: var(--f-t-sm); font-weight: 600;
  text-decoration: none;
  transition: border-color var(--f-dur) var(--f-ease), background-color var(--f-dur) var(--f-ease);
}
a.q-step-pill:hover { border-color: var(--em-500); background-color: var(--em-100); color: var(--em-800); }
.q-step-current {
  background-color: var(--em-500); border-color: var(--em-500); color: var(--surface);
}

/* == QUESTIONNAIRE CTA == */
.q-cta:not(.btn) {
  margin-block: var(--s7);
  padding: var(--s6);
  border-radius: var(--r-lg);
  background-color: var(--em-100);
  border: 1px solid var(--em-300);
}
.q-cta-title { margin: 0 0 var(--s3); font-family: var(--font-head); font-size: var(--f-t-2xl); color: var(--em-900); }
.q-cta-text { margin: 0 0 var(--s4); font-size: var(--f-t-md); color: var(--ink-700); max-inline-size: 60ch; }
.q-cta-btn { align-self: start; }
.q-cta-note { margin-block-start: var(--s3); font-size: var(--f-t-sm); color: var(--em-800); }

/* == RADAR == */
.radar-section {
  display: grid; grid-template-columns: 320px 1fr; gap: var(--s6);
  align-items: center; margin-block: var(--s6);
  padding: var(--s5); border: 1px solid var(--line); border-radius: var(--r-lg);
  background-color: var(--surface);
}
.radar-figure { display: flex; justify-content: center; }
/* radar-svg doublon retire */
.radar-legend { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: var(--s2) var(--s4); }
.radar-legend-item { display: flex; align-items: center; gap: var(--s2); font-size: var(--f-t-sm); }
.radar-dot { inline-size: 10px; block-size: 10px; border-radius: var(--r-pill); flex: 0 0 auto; background-color: var(--ink-300); }
.radar-routed .radar-dot { background-color: var(--em-600); }
.radar-watch .radar-dot { background-color: var(--am-500); }
.radar-legend-label { color: var(--ink-800); }
.radar-legend-status { margin-inline-start: auto; color: var(--ink-400); font-size: var(--f-t-xs); }
.radar-note { grid-column: 1 / -1; margin: var(--s3) 0 0; font-size: var(--f-t-sm); color: var(--ink-400); }
@media (max-width: 720px) {
  .radar-section { grid-template-columns: 1fr; }
  .radar-legend { grid-template-columns: 1fr; }
}

/* == RADAR B (centre + infobulle + AA) == */
/* Radar centre, plus grand ; legende dessous en 3 colonnes lisibles. */
.radar-section { grid-template-columns: 1fr; gap: var(--s5); }
.radar-figure { position: relative; display: flex; justify-content: center; }
/* radar-svg doublon retire */
.radar-axis-label { font-size: 11px; fill: var(--ink-500); font-family: var(--font-body); }

/* Sommets : cible focusable, curseur, halo au focus (WCAG). */
.radar-dot-group { cursor: pointer; outline: none; }
.radar-dot-hit { opacity: 0; }
.radar-dot-group:hover .radar-dot-hit,
.radar-dot-group:focus .radar-dot-hit { opacity: 0.25; }
.radar-dot-group:focus { outline: none; }
.radar-dot-group:focus circle:last-child { stroke: var(--em-700); stroke-width: 2; }

/* Infobulle : contraste fort, lisible, non tronquee. */
.radar-tip {
  position: absolute; inset-block-start: var(--s2); inset-inline-end: var(--s2);
  max-inline-size: 240px;
  padding: var(--s3);
  border-radius: var(--r-md);
  background-color: var(--ink-900); color: var(--surface);
  display: flex; flex-direction: column; gap: 2px;
  box-shadow: var(--sh-md); z-index: 2;
}
.radar-tip-label { font-weight: 700; font-size: var(--f-t-md); }
.radar-tip-score { font-size: var(--f-t-xl); font-weight: 700; color: var(--em-300); }
.radar-tip-wording { font-size: var(--f-t-sm); opacity: 0.9; }

/* Legende en 3 colonnes, contraste AA (statut plus fonce, pastille coloree). */
.radar-legend { grid-template-columns: repeat(3, 1fr); gap: var(--s3) var(--s4); }
.radar-legend-status { color: var(--ink-600); font-weight: 600; }
.radar-legend-label { color: var(--ink-800); font-size: var(--f-t-sm); }

@media (max-width: 900px) { .radar-legend { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) {
  .radar-legend { grid-template-columns: 1fr; }
  .radar-tip { position: static; max-inline-size: none; margin-block-start: var(--s3); }
}

/* == RADAR UX (refonte) == */
.radar-panel {
  display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: var(--s6); align-items: center;
  margin-block: var(--s6); padding: var(--s6);
  border: 1px solid var(--line); border-radius: var(--r-lg);
  background: linear-gradient(180deg, var(--surface), var(--surface-2));
}
.radar-stage { position: relative; display: flex; justify-content: center; }
.radar-svg { inline-size: 100%; max-inline-size: 440px; block-size: auto; height: auto; aspect-ratio: 1 / 1; }
.radar-axis-label { font-size: 11px; font-weight: 600; fill: var(--ink-400); font-family: var(--font-body); }

.radar-dot-group { cursor: pointer; }
.radar-dot-hit { fill: var(--em-500); opacity: 0; transition: opacity var(--f-dur) var(--f-ease); }
.radar-dot-group:hover .radar-dot-hit,
.radar-dot-group:focus .radar-dot-hit { opacity: 0.18; }
.radar-dot-group:focus { outline: none; }

/* Infobulle flottante elegante. */
.radar-tip {
  position: absolute; inset-block-start: 0; inset-inline-start: 0;
  max-inline-size: 260px; padding: var(--s4);
  border-radius: var(--r-lg);
  background-color: var(--surface); border: 1px solid var(--line);
  box-shadow: var(--sh-lg); z-index: 3;
  display: flex; flex-direction: column; gap: var(--s2);
}
.radar-tip-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); }
.radar-tip-label { font-weight: 700; font-size: var(--f-t-md); color: var(--ink-900); }
.radar-tip-score { font-family: var(--font-head); font-size: 32px; font-weight: 700; color: var(--em-700); line-height: 1; }
.radar-tip-wording { font-size: var(--f-t-sm); color: var(--ink-500); }
.radar-tip-badge {
  padding-block: 2px; padding-inline: var(--s2); border-radius: var(--r-pill);
  font-size: var(--f-t-xs); font-weight: 600; white-space: nowrap;
  background-color: var(--surface-2); color: var(--ink-600);
}
.badge-routed { background-color: var(--em-100); color: var(--em-800); }
.badge-watch { background-color: var(--am-100); color: var(--am-700); }
.badge-negative { background-color: var(--surface-2); color: var(--ink-500); }
.badge-not_applicable { background-color: var(--surface-2); color: var(--ink-400); }

/* Legende en cartes. */
.radar-side-title { margin: 0 0 var(--s3); font-size: var(--f-t-sm); font-weight: 600; letter-spacing: .03em; color: var(--ink-500); }
.radar-cards { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s2); }
.radar-card {
  display: flex; align-items: center; gap: var(--s3);
  padding: var(--s3); border-radius: var(--r-md);
  background-color: var(--surface); border: 1px solid var(--line);
}
.radar-card-dot { inline-size: 12px; block-size: 12px; border-radius: var(--r-pill); background-color: var(--dot, var(--ink-300)); flex: 0 0 auto; }
.radar-card-body { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); inline-size: 100%; min-inline-size: 0; }
.radar-card-label { font-size: var(--f-t-sm); color: var(--ink-800); overflow: hidden; text-overflow: ellipsis; }
.radar-card-badge { flex: 0 0 auto; padding-block: 2px; padding-inline: var(--s2); border-radius: var(--r-pill); font-size: var(--f-t-xs); font-weight: 600; background-color: var(--surface-2); color: var(--ink-500); }
.radar-routed .radar-card-badge { background-color: var(--em-100); color: var(--em-800); }
.radar-watch .radar-card-badge { background-color: var(--am-100); color: var(--am-700); }
.radar-note { margin-block-start: var(--s4); font-size: var(--f-t-xs); color: var(--ink-400); }

@media (max-width: 860px) {
  .radar-panel { grid-template-columns: 1fr; }
  .radar-tip { position: static; max-inline-size: none; margin-block-start: var(--s3); }
}

/* == RADAR TIP MOBILE == */
/* Sur mobile, l'infobulle s'ancre en bas du stage, pleine largeur, lisible. */
@media (max-width: 640px) {
  .radar-stage { flex-direction: column; }
  .radar-tip {
    position: static;
    inline-size: 100%;
    max-inline-size: none;
    margin-block-start: var(--s4);
    inset: auto;
  }
  .radar-svg { max-inline-size: 320px; }
}

/* == RADAR TIP HIDDEN FIX == */
/* L'attribut hidden doit toujours l'emporter sur display:flex de .radar-tip. */
.radar-tip[hidden] { display: none !important; }

/* == RADAR TIP FLICKER FIX == */
/* L'infobulle ne capte pas la souris : sinon elle s'intercale sous le curseur
   et declenche un mouseleave parasite -> clignotement. Elle reste informative. */
.radar-tip { pointer-events: none; }
/* Un leger decalage l'ecarte du point pour ne jamais recouvrir le sommet actif. */
.radar-tip { inset-block-start: var(--s3); inset-inline-start: var(--s3); }

/* == RADAR LINK == */
/* Point active depuis la legende : halo visible. */
.radar-dot-active .radar-dot-hit { opacity: 0.30 !important; }
.radar-dot-active circle:last-child { stroke: var(--em-700); stroke-width: 3; }

/* Carte de legende interactive. */
.radar-card { cursor: pointer; transition: border-color var(--f-dur) var(--f-ease), box-shadow var(--f-dur) var(--f-ease); outline: none; }

.radar-card:focus { outline: none; }

/* == RADAR LINK v2 (fond plein) == */
.radar-card { cursor: pointer; transition: background-color var(--f-dur) var(--f-ease); outline: none; }
/* Survol / actif : fond plein doux, pas de bordure verte. */
.radar-card:hover,
.radar-card:focus,
.radar-card-active { background-color: var(--em-100); }
.radar-card:focus { box-shadow: inset 0 0 0 2px var(--em-300); }

/* Point du radar mis en evidence depuis la legende. */
.radar-dot-active .radar-dot-hit { opacity: 0.30 !important; }
.radar-dot-active circle:last-child { stroke: var(--em-700); stroke-width: 3; }

/* == RADAR TIP STABLE == */
/* Jamais d'interception souris (renforce le fix flicker). */
.radar-tip, .radar-tip * { pointer-events: none !important; }
/* Les points, eux, doivent rester cliquables. */
.radar-dot-group { pointer-events: auto; }

/* Sur mobile, l'infobulle vit SOUS le radar : le doigt ne la croise jamais. */
@media (hover: none), (max-width: 640px) {
  .radar-tip {
    position: static !important;
    inline-size: 100%; max-inline-size: none;
    margin-block-start: var(--s4);
  }
}

/* == ORIENTATIONS == */
.orient-card {
  margin-block: var(--s5);
  padding: var(--s6);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background-color: var(--surface);
  border-inline-start: 4px solid var(--line-strong);
}
.orient-routed { border-inline-start-color: var(--em-500); }
.orient-watch { border-inline-start-color: var(--am-500); }

.orient-head { display: flex; align-items: start; gap: var(--s4); margin-block-end: var(--s3); }
.orient-rank {
  flex: 0 0 auto; inline-size: 36px; block-size: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--r-pill); background-color: var(--em-100); color: var(--em-800);
  font-family: var(--font-head); font-weight: 700; font-size: var(--f-t-lg);
}
.orient-head-text { display: flex; flex-direction: column; gap: var(--s1); }
.orient-title { margin: 0; font-family: var(--font-head); font-size: var(--f-t-2xl); color: var(--ink-900); line-height: 1.15; }
.orient-badge {
  align-self: start; padding-block: 2px; padding-inline: var(--s2);
  border-radius: var(--r-pill); font-size: var(--f-t-xs); font-weight: 600;
  background-color: var(--surface-2); color: var(--ink-600);
}
.orient-badge-routed { background-color: var(--em-100); color: var(--em-800); }
.orient-badge-watch { background-color: var(--am-100); color: var(--am-700); }

.orient-body { margin: 0 0 var(--s4); font-size: var(--f-t-md); color: var(--ink-700); line-height: 1.6; }

.orient-advice { margin-block: var(--s3); padding: var(--s4); border-radius: var(--r-md); background-color: var(--surface-2); }
.orient-advice-do { border-inline-start: 3px solid var(--em-500); }
.orient-advice-watch { border-inline-start: 3px solid var(--am-600); }
.orient-advice-title { margin: 0 0 var(--s2); font-weight: 600; color: var(--ink-800); font-size: var(--f-t-sm); }
.orient-advice p:last-child { margin: 0; color: var(--ink-600); font-size: var(--f-t-sm); }

.orient-specialists { margin-block-start: var(--s5); padding-block-start: var(--s4); border-block-start: 1px solid var(--line); }
.orient-specialists-title { margin: 0 0 var(--s3); font-size: var(--f-t-sm); font-weight: 600; color: var(--ink-500); }
.orient-chips { display: flex; flex-wrap: wrap; gap: var(--s2); }
.orient-chip {
  display: inline-flex; align-items: center; gap: var(--s2);
  padding-block: var(--s2); padding-inline: var(--s3);
  border-radius: var(--r-pill); border: 1px solid var(--em-300);
  background-color: var(--em-100); color: var(--em-800);
  font-size: var(--f-t-sm); font-weight: 600; text-decoration: none;
  transition: background-color var(--f-dur) var(--f-ease);
}
.orient-chip:hover { background-color: var(--em-200); }
.orient-chip-arrow { opacity: 0.6; }
.orient-footer { margin-block-start: var(--s4); font-size: var(--f-t-xs); color: var(--ink-400); font-style: italic; }

/* == LUCIDE CHIP ICON == */
.orient-chip-ico { inline-size: 16px; block-size: 16px; flex: 0 0 auto; }
.orient-chip-ico svg { inline-size: 100%; block-size: 100%; }

/* == SPE ICON SVG == */
.orient-chip-ico { display: inline-flex; inline-size: 16px; block-size: 16px; flex: 0 0 auto; }
.spe-ico { inline-size: 16px; block-size: 16px; }

/* == PARCOURS TEASER == */
.parcours-teaser { margin-block: var(--s6); padding: var(--s6); border-radius: var(--r-lg); background-color: var(--em-100); border: 1px solid var(--em-300); }
.parcours-teaser-title { margin: var(--s1) 0 var(--s2); font-family: var(--font-head); font-size: var(--f-t-2xl); color: var(--em-900); }
.parcours-teaser-duration { margin: 0 0 var(--s4); color: var(--em-800); font-weight: 600; }
.parcours-teaser-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s5); }
.parcours-teaser-col h3 { margin: 0 0 var(--s2); font-size: var(--f-t-sm); color: var(--ink-600); }
.parcours-teaser-col ul { margin: 0; padding-inline-start: var(--s4); color: var(--ink-700); font-size: var(--f-t-sm); }
.parcours-teaser-col li { margin-block: var(--s1); }
.parcours-teaser-note { margin-block-start: var(--s5); font-size: var(--f-t-sm); color: var(--em-800); }
.result-actions { margin-block: var(--s5); }
@media (max-width: 720px) { .parcours-teaser-grid { grid-template-columns: 1fr; } }

/* En-tete resultat : titre a gauche, bouton PDF a droite, meme ligne. */
.q-result-head--row {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--s4); flex-wrap: wrap;
}
.q-result-pdf { flex-shrink: 0; align-self: center; white-space: nowrap; }
@media (max-width: 640px) {
  .q-result-head--row { flex-direction: column; }
  .q-result-pdf { inline-size: 100%; text-align: center; }
}

/* Force l'en-tete resultat en ligne, priorite sur toute regle .q-result-head. */
.q-result.q-shell .q-result-head--row,
.q-result-head.q-result-head--row {
  display: flex !important; align-items: center; justify-content: space-between;
  gap: var(--s4); flex-wrap: nowrap;
}
.q-result-head--row > div { flex: 1 1 auto; min-inline-size: 0; }
.q-result-head--row > .q-result-pdf { flex: 0 0 auto; margin-inline-start: auto; }
/* Largeur de la barre de progression du questionnaire : une classe par pourcentage. */
.q-pct-0 { inline-size: 0%; }
.q-pct-1 { inline-size: 1%; }
.q-pct-2 { inline-size: 2%; }
.q-pct-3 { inline-size: 3%; }
.q-pct-4 { inline-size: 4%; }
.q-pct-5 { inline-size: 5%; }
.q-pct-6 { inline-size: 6%; }
.q-pct-7 { inline-size: 7%; }
.q-pct-8 { inline-size: 8%; }
.q-pct-9 { inline-size: 9%; }
.q-pct-10 { inline-size: 10%; }
.q-pct-11 { inline-size: 11%; }
.q-pct-12 { inline-size: 12%; }
.q-pct-13 { inline-size: 13%; }
.q-pct-14 { inline-size: 14%; }
.q-pct-15 { inline-size: 15%; }
.q-pct-16 { inline-size: 16%; }
.q-pct-17 { inline-size: 17%; }
.q-pct-18 { inline-size: 18%; }
.q-pct-19 { inline-size: 19%; }
.q-pct-20 { inline-size: 20%; }
.q-pct-21 { inline-size: 21%; }
.q-pct-22 { inline-size: 22%; }
.q-pct-23 { inline-size: 23%; }
.q-pct-24 { inline-size: 24%; }
.q-pct-25 { inline-size: 25%; }
.q-pct-26 { inline-size: 26%; }
.q-pct-27 { inline-size: 27%; }
.q-pct-28 { inline-size: 28%; }
.q-pct-29 { inline-size: 29%; }
.q-pct-30 { inline-size: 30%; }
.q-pct-31 { inline-size: 31%; }
.q-pct-32 { inline-size: 32%; }
.q-pct-33 { inline-size: 33%; }
.q-pct-34 { inline-size: 34%; }
.q-pct-35 { inline-size: 35%; }
.q-pct-36 { inline-size: 36%; }
.q-pct-37 { inline-size: 37%; }
.q-pct-38 { inline-size: 38%; }
.q-pct-39 { inline-size: 39%; }
.q-pct-40 { inline-size: 40%; }
.q-pct-41 { inline-size: 41%; }
.q-pct-42 { inline-size: 42%; }
.q-pct-43 { inline-size: 43%; }
.q-pct-44 { inline-size: 44%; }
.q-pct-45 { inline-size: 45%; }
.q-pct-46 { inline-size: 46%; }
.q-pct-47 { inline-size: 47%; }
.q-pct-48 { inline-size: 48%; }
.q-pct-49 { inline-size: 49%; }
.q-pct-50 { inline-size: 50%; }
.q-pct-51 { inline-size: 51%; }
.q-pct-52 { inline-size: 52%; }
.q-pct-53 { inline-size: 53%; }
.q-pct-54 { inline-size: 54%; }
.q-pct-55 { inline-size: 55%; }
.q-pct-56 { inline-size: 56%; }
.q-pct-57 { inline-size: 57%; }
.q-pct-58 { inline-size: 58%; }
.q-pct-59 { inline-size: 59%; }
.q-pct-60 { inline-size: 60%; }
.q-pct-61 { inline-size: 61%; }
.q-pct-62 { inline-size: 62%; }
.q-pct-63 { inline-size: 63%; }
.q-pct-64 { inline-size: 64%; }
.q-pct-65 { inline-size: 65%; }
.q-pct-66 { inline-size: 66%; }
.q-pct-67 { inline-size: 67%; }
.q-pct-68 { inline-size: 68%; }
.q-pct-69 { inline-size: 69%; }
.q-pct-70 { inline-size: 70%; }
.q-pct-71 { inline-size: 71%; }
.q-pct-72 { inline-size: 72%; }
.q-pct-73 { inline-size: 73%; }
.q-pct-74 { inline-size: 74%; }
.q-pct-75 { inline-size: 75%; }
.q-pct-76 { inline-size: 76%; }
.q-pct-77 { inline-size: 77%; }
.q-pct-78 { inline-size: 78%; }
.q-pct-79 { inline-size: 79%; }
.q-pct-80 { inline-size: 80%; }
.q-pct-81 { inline-size: 81%; }
.q-pct-82 { inline-size: 82%; }
.q-pct-83 { inline-size: 83%; }
.q-pct-84 { inline-size: 84%; }
.q-pct-85 { inline-size: 85%; }
.q-pct-86 { inline-size: 86%; }
.q-pct-87 { inline-size: 87%; }
.q-pct-88 { inline-size: 88%; }
.q-pct-89 { inline-size: 89%; }
.q-pct-90 { inline-size: 90%; }
.q-pct-91 { inline-size: 91%; }
.q-pct-92 { inline-size: 92%; }
.q-pct-93 { inline-size: 93%; }
.q-pct-94 { inline-size: 94%; }
.q-pct-95 { inline-size: 95%; }
.q-pct-96 { inline-size: 96%; }
.q-pct-97 { inline-size: 97%; }
.q-pct-98 { inline-size: 98%; }
.q-pct-99 { inline-size: 99%; }
.q-pct-100 { inline-size: 100%; }

/* Resultat professionnel du questionnaire. */
  .pro-result { max-inline-size: 60rem; margin-inline: auto; }
  .pro-result__lead { color: var(--ink-500); margin-block-end: var(--space-6); }
  .pro-scores { inline-size: 100%; border-collapse: collapse; margin-block-end: var(--space-8); }
  .pro-scores th, .pro-scores td {
    text-align: start; padding: var(--space-2) var(--space-3);
    border-block-end: 1px solid var(--ink-100);
  }
  .pro-scores th { color: var(--ink-400); font-weight: 600; }
  .pro-hyp { border: 1px solid var(--ink-100); border-radius: var(--radius-lg);
    padding: var(--space-5); margin-block-end: var(--space-4); }
  .pro-hyp__head { display: flex; align-items: baseline; gap: var(--space-3);
    flex-wrap: wrap; margin-block-end: var(--space-3); }
  .pro-hyp__rank { color: var(--em-600); font-weight: 700; }
  .pro-hyp__name { font-size: var(--f-t-lg); font-weight: 600; }
  .pro-hyp__ref { color: var(--ink-300); font-variant-numeric: tabular-nums; }
  .pro-hyp__metrics { display: flex; gap: var(--space-5); flex-wrap: wrap;
    margin-block-end: var(--space-3); font-variant-numeric: tabular-nums; }
  .pro-hyp__metric b { display: block; color: var(--ink-400); font-weight: 500;
    font-size: var(--f-t-sm); }
  .pro-hyp__limit { color: var(--am-600); margin-block-end: var(--space-3); }
  .pro-hyp__evidence { display: grid; grid-template-columns: 1fr 1fr;
    gap: var(--space-4); }
  .pro-hyp__evidence ul { margin: 0; padding-inline-start: var(--space-4); }
  .pro-hyp__evidence h4 { color: var(--ink-400); font-size: var(--f-t-sm);
    margin-block-end: var(--space-1); }
  .pro-empty { color: var(--ink-400); }

/* == DICTIONNAIRE DU NEURODEVELOPPEMENT == */
.dico { padding-block: var(--s6) var(--s9); }
.dico-head { padding-block-end: var(--s5); border-block-end: 2px solid var(--ink-800); margin-block-end: var(--s5); }
.dico-head h1 { font-size: clamp(30px, 4vw, 46px); margin-block-end: var(--s3); }
.dico-lead { font-size: 18px; color: var(--ink-600); max-width: 70ch; }
.dico-langs { display: flex; gap: var(--s4); margin-block-start: var(--s4); }
.dico-langs a { padding-block: var(--s1); font-weight: 600; text-decoration: none; border-block-end: 2px solid transparent; }
.dico-langs a[aria-current="true"] { border-block-end-color: var(--ink-800); color: var(--ink-800); }
.dico-tools { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr) auto; gap: var(--s3); align-items: center; }
.dico-count { grid-column: 1 / -1; margin: 0; font-size: 15px; color: var(--ink-500); }
.dico-count b { font-size: 20px; color: var(--ink-800); font-variant-numeric: tabular-nums; }
.dico-az { position: sticky; top: var(--topbar-height); z-index: var(--ds-z-raised); display: flex; flex-wrap: wrap; gap: 2px; padding-block: var(--s3); margin-block: var(--s4); background: var(--paper); border-block-end: 1px solid var(--line); }
.dico-az a, .dico-az span { display: inline-flex; align-items: center; justify-content: center; min-width: 34px; height: 36px; font-weight: 700; font-size: 15px; border-radius: var(--r-xs); text-decoration: none; }
.dico-az a { color: var(--ink-800); }
.dico-az a:hover { background: var(--surface-2); }
.dico-az span, .dico-az .is-off { color: var(--ink-300); pointer-events: none; }
.dico-letter { scroll-margin-top: calc(var(--topbar-height) + 64px); margin-block-start: var(--s7); }
.dico-letter[hidden], .dico-entry[hidden], .dico-empty[hidden] { display: none; }
.dico-letter-title { font-size: clamp(48px, 7vw, 84px); font-weight: 800; line-height: 1; color: var(--ink-800); padding-block-end: var(--s2); border-block-end: 1px solid var(--ink-800); margin-block-end: var(--s4); }
.dico-cols { column-count: 2; column-gap: var(--s8); column-rule: 1px solid var(--line); }
.dico-entry { break-inside: avoid; margin-block-end: var(--s4); }
.dico-entry p { margin: 0; line-height: 1.65; overflow-wrap: anywhere; hyphens: auto; }
.dico-term { color: var(--ink-800); text-decoration: none; }
.dico-term:hover b { text-decoration: underline; }
.dico-term b { font-weight: 800; }
.dico-acr { color: var(--ink-500); }
.dico-see { display: block; margin-block-start: 2px; font-size: 14px; color: var(--ink-500); }
.dico-empty { padding-block: var(--s7); color: var(--ink-500); }
.dico-back { margin-block-end: var(--s4); }
.dico-meta, .dico-kind { color: var(--ink-500); font-size: 14px; }
.dico-article { max-width: 72ch; }
.dico-article h2 { font-size: 20px; margin-block: var(--s6) var(--s2); }
.dico-forms, .dico-sources { margin: 0; padding-inline-start: var(--s5); }
.dico-forms li, .dico-sources li { margin-block-end: var(--s1); }
@media (max-width: 900px) {
  .dico-tools { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .dico-search { grid-column: 1 / -1; }
}
@media (max-width: 720px) {
  .dico-cols { column-count: 1; }
  .dico-tools { grid-template-columns: minmax(0, 1fr); }
  .dico-az a, .dico-az span { min-width: 30px; height: 34px; }
}

/* ---------- Contact (formulaire) ---------- */
.contact-form { display: grid; gap: var(--s4); max-width: 640px; margin-block: var(--s5); }
.contact-form .field { display: flex; flex-direction: column; gap: var(--s2); margin: 0; }
.contact-form .field-error { font-size: 13px; font-weight: 600; color: var(--danger); }
/* Champ piège : hors écran, invisible pour les personnes, rempli par les robots. */
.contact-trap { position: absolute; inset-inline-start: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- FAQ, Aide, Accessibilité ---------- */
.aide-search { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: center; margin-block: var(--s5); }
.aide-search .input { flex: 1 1 280px; min-width: 0; }
.aide-count { margin: 0; color: var(--ink-500); font-size: 15px; }
.aide-nav { display: flex; flex-wrap: wrap; gap: var(--s2); margin-block: var(--s4); padding: 0; list-style: none; }
.aide-nav a { display: inline-block; padding: var(--s2) var(--s3); border: 1px solid var(--line); border-radius: var(--r-pill); color: var(--ink-700); font-size: 14px; text-decoration: none; }
.aide-nav a:hover { background: var(--surface-2); }
.aide-cat { margin-block-start: var(--s7); scroll-margin-top: calc(var(--topbar-height) + var(--s4)); }
.aide-cat h2 { font-size: 24px; margin-block-end: var(--s3); }
.aide-cat[hidden], .aide-q[hidden], .aide-empty[hidden] { display: none; }
.aide-q { border-block-start: 1px solid var(--line); scroll-margin-top: calc(var(--topbar-height) + var(--s4)); }
.aide-q:last-child { border-block-end: 1px solid var(--line); }
.aide-q > summary { cursor: pointer; padding-block: var(--s4); font-weight: 700; color: var(--ink-800); list-style-position: outside; }
.aide-q > summary:focus-visible { outline: 2.5px solid var(--em-500); outline-offset: 2px; }
.aide-a { padding-block-end: var(--s4); max-width: 72ch; line-height: 1.65; color: var(--ink-700); }
.aide-a p { margin: 0 0 var(--s3); }
.aide-links { display: flex; flex-wrap: wrap; gap: var(--s4); font-size: 14px; }
.aide-empty { padding-block: var(--s7); color: var(--ink-500); }
.aide-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--s4); margin-block: var(--s4); }
.aide-grid a { display: block; padding: var(--s4); border: 1px solid var(--line); border-radius: var(--r-md); color: var(--ink-800); font-weight: 600; text-decoration: none; }
.aide-grid a:hover { background: var(--surface-2); }
.aide-guide { margin-block: var(--s4); padding: var(--s4); border: 1px solid var(--line); border-radius: var(--r-md); }
.aide-guide h3 { margin: 0 0 var(--s2); font-size: 18px; }
.aide-guide ol { margin: var(--s3) 0 0; padding-inline-start: var(--s5); line-height: 1.6; }
.aide-guide li + li { margin-block-start: var(--s2); }