/* =========================================================
   Diabetik — modèle de page d'accueil
   Chargé uniquement sur le modèle « Accueil Diabetik ».
   ========================================================= */

.dk-accueil {
  --dk-h: #0E1626;
  --dk-h-doux: #48566B;
  --dk-h-papier: #EFF1F6;
  --dk-h-bleu: #1B3FB8;
  --dk-h-bleu-f: #16339A;
  --dk-h-majorelle: #5A4FE3;
  --dk-h-vert: #12A150;
  --dk-h-ambre: #E8A317;
  --dk-h-trait: #D8DEE9;
  --dk-h-nuit: #18243A;

  --dk-h-display: "Bricolage Grotesque", "IBM Plex Sans Arabic", system-ui, sans-serif;
  --dk-h-corps: "IBM Plex Sans Arabic", system-ui, -apple-system, sans-serif;
  --dk-h-data: "IBM Plex Mono", ui-monospace, monospace;

  font-family: var(--dk-h-corps);
  color: var(--dk-h);
  line-height: 1.6;
}

.dk-accueil *, .dk-accueil *::before, .dk-accueil *::after { box-sizing: border-box; }

.dk-large { max-width: 1180px; margin-inline: auto; padding-inline: 24px; }

.dk-oeil {
  font-family: var(--dk-h-data);
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--dk-h-bleu);
  margin: 0 0 10px;
}
.dk-oeil--clair { color: #7C8FF5; }

.dk-h2 {
  font-family: var(--dk-h-display);
  font-size: clamp(25px, 3.5vw, 36px);
  font-weight: 800;
  letter-spacing: -.025em;
  line-height: 1.12;
  margin: 0 0 12px;
  max-width: 22ch;
}

.dk-section { padding: clamp(44px, 7vw, 72px) 0; }
.dk-section__intro {
  margin: 0 0 30px;
  color: var(--dk-h-doux);
  font-size: 16.5px;
  max-width: 60ch;
}

/* ---------- Hero ---------- */

.dk-hero {
  padding: clamp(40px, 6vw, 64px) 0 clamp(40px, 6vw, 56px);
  border-bottom: 1px solid var(--dk-h-trait);
}
.dk-hero__titre {
  font-family: var(--dk-h-display);
  font-size: clamp(32px, 6vw, 58px);
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1.05;
  max-width: 15ch;
  margin: 0 0 18px;
}
.dk-hero__titre em { font-style: normal; color: var(--dk-h-bleu); }
.dk-hero__chapo {
  font-size: clamp(16.5px, 2vw, 19px);
  color: var(--dk-h-doux);
  max-width: 56ch;
  margin: 0 0 30px;
}

.dk-courbe {
  margin: 0 0 28px;
  padding: 22px 20px 16px;
  background: var(--dk-h-papier);
  border: 1px solid var(--dk-h-trait);
  border-radius: 16px;
}
.dk-courbe__tete {
  display: flex; flex-wrap: wrap; gap: 8px 20px; align-items: baseline;
  margin-bottom: 14px;
}
.dk-courbe__label {
  font-family: var(--dk-h-data);
  font-size: 12px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--dk-h-doux);
}
.dk-courbe__cle { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--dk-h-doux); }
.dk-courbe__puce { width: 10px; height: 10px; border-radius: 3px; background: var(--dk-h-vert); opacity: .35; }
.dk-courbe__pied { margin: 12px 0 0; font-size: 13.5px; color: var(--dk-h-doux); }

.dk-graphe { width: 100%; height: auto; display: block; overflow: visible; }
.dk-bande { fill: var(--dk-h-vert); opacity: .14; }
.dk-seuil { stroke: var(--dk-h-vert); stroke-width: 1; stroke-dasharray: 3 4; opacity: .55; }
.dk-axe { font-family: var(--dk-h-data); font-size: 10px; fill: var(--dk-h-doux); opacity: .75; }

.dk-trace {
  fill: none; stroke: var(--dk-h-bleu); stroke-width: 3;
  stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 1400; stroke-dashoffset: 1400;
  animation: dk-tracer 2.6s .3s cubic-bezier(.4,0,.2,1) forwards;
}
@keyframes dk-tracer { to { stroke-dashoffset: 0; } }

.dk-point { fill: #fff; stroke: var(--dk-h-bleu); stroke-width: 2.5; opacity: 0; animation: dk-paraitre .4s forwards; }
.dk-point--haut { stroke: var(--dk-h-ambre); }
@keyframes dk-paraitre { to { opacity: 1; } }

.dk-etiq { font-family: var(--dk-h-data); font-size: 10.5px; fill: var(--dk-h-doux); opacity: 0; animation: dk-paraitre .5s forwards; }
.dk-etiq--fort { fill: var(--dk-h); font-weight: 600; }

@media (prefers-reduced-motion: reduce) {
  .dk-trace { animation: none; stroke-dashoffset: 0; }
  .dk-point, .dk-etiq { animation: none; opacity: 1; }
}

/* ---------- Boutons ---------- */

.dk-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.dk-btn {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 14px 24px;
  font-family: var(--dk-h-corps); font-size: 16px; font-weight: 600;
  text-decoration: none;
  color: #fff; background: var(--dk-h-bleu);
  border: 1.5px solid var(--dk-h-bleu); border-radius: 10px;
  transition: background .15s ease, transform .1s ease;
}
.dk-btn:hover, .dk-btn:focus-visible { background: var(--dk-h-bleu-f); color: #fff; }
.dk-btn:active { transform: translateY(1px); }
.dk-btn--fantome { background: transparent; color: var(--dk-h-bleu); }
.dk-btn--fantome:hover { background: var(--dk-h-papier); color: var(--dk-h-bleu); }

/* ---------- Outils ---------- */

.dk-outils { padding: clamp(48px, 7vw, 72px) 0; background: var(--dk-h); color: #fff; }
.dk-outils .dk-h2 { color: #fff; }
.dk-outils__intro { color: #9FB0C7; max-width: 58ch; margin: 0 0 32px; font-size: 16.5px; }

.dk-grille-outils {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
}

.dk-outil {
  display: flex; flex-direction: column; gap: 8px;
  padding: 22px;
  text-decoration: none; color: #fff;
  background: var(--dk-h-nuit);
  border: 1px solid #26344F; border-radius: 16px;
  transition: border-color .18s ease, background .18s ease;
}
.dk-outil:hover, .dk-outil:focus-visible { border-color: var(--dk-h-majorelle); background: #1D2B45; color: #fff; }
.dk-outil__marque { font-family: var(--dk-h-data); font-size: 11px; letter-spacing: .14em; color: #7C8FF5; }
.dk-outil__nom { font-family: var(--dk-h-display); font-size: 19px; font-weight: 600; line-height: 1.2; }
.dk-outil__desc { font-size: 14.5px; color: #9FB0C7; }
.dk-outil__cta { margin-top: auto; padding-top: 12px; font-size: 14px; font-weight: 600; }

/* ---------- Section outil intégré ---------- */

.dk-section--outil { background: var(--dk-h-papier); }
.dk-section--outil .dko { margin-top: 8px; }

/* ---------- Articles ---------- */

.dk-section__tete {
  display: flex; flex-wrap: wrap; gap: 16px;
  align-items: flex-end; justify-content: space-between;
  margin-bottom: 30px;
}

.dk-grille-articles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 26px;
}

.dk-article { display: flex; flex-direction: column; text-decoration: none; color: inherit; }
.dk-article__visuel {
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: 10px;
  border: 1px solid var(--dk-h-trait);
  margin-bottom: 14px;
  background: var(--dk-h-papier);
}
.dk-article__visuel img { width: 100%; height: 100%; object-fit: cover; display: block; }

.dk-article__cat {
  font-family: var(--dk-h-data);
  font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--dk-h-bleu);
  margin-bottom: 7px;
}
.dk-article__titre {
  font-family: var(--dk-h-display);
  font-size: 19px; font-weight: 600; line-height: 1.25;
  margin: 0 0 9px;
}
.dk-article:hover .dk-article__titre { color: var(--dk-h-bleu); }
.dk-article__extrait { font-size: 15px; color: var(--dk-h-doux); margin: 0 0 14px; }
.dk-article__meta {
  margin-top: auto; padding-top: 12px;
  border-top: 1px solid var(--dk-h-trait);
  font-size: 12.5px; color: var(--dk-h-doux);
  display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center;
}
.dk-verif {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px; border-radius: 100px;
  background: #E4F5EB; color: #0B6B36;
  font-size: 11px; font-weight: 600;
}

/* ---------- Rubriques ---------- */

.dk-rubrique { margin-top: 40px; }
.dk-rubrique:first-of-type { margin-top: 24px; }
.dk-rubrique__tete {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 16px; margin-bottom: 20px;
  padding-bottom: 10px; border-bottom: 1px solid var(--dk-h-trait);
}
.dk-rubrique__nom {
  font-family: var(--dk-h-display);
  font-size: 20px; font-weight: 700; margin: 0;
}
.dk-tout { font-size: 14px; font-weight: 600; color: var(--dk-h-bleu); text-decoration: none; white-space: nowrap; }
.dk-tout:hover { text-decoration: underline; }

/* ---------- Confiance ---------- */

.dk-section--confiance { background: var(--dk-h-papier); }
.dk-grille-equipe {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 20px;
}
.dk-membre {
  background: #fff;
  border: 1px solid var(--dk-h-trait);
  border-radius: 16px;
  padding: 22px;
}
.dk-membre__avatar { border-radius: 50%; margin-bottom: 14px; }
.dk-membre__nom { font-family: var(--dk-h-display); font-size: 17px; font-weight: 600; margin: 0 0 3px; }
.dk-membre__role { font-size: 13.5px; color: var(--dk-h-doux); margin: 0; }
.dk-membre__lieu { font-family: var(--dk-h-data); font-size: 12px; color: var(--dk-h-bleu); margin: 8px 0 0; }

/* ---------- Contenu libre ---------- */

.dk-prose { max-width: 72ch; font-size: 17px; }
.dk-prose h2 { font-family: var(--dk-h-display); }

/* ---------- Mobile ---------- */

@media (max-width: 640px) {
  .dk-courbe { padding: 16px 12px 12px; }
  .dk-etiq { font-size: 13px; }
  .dk-axe { font-size: 13px; }
  .dk-grille-articles { gap: 22px; }
}