/* ==========================================================================
   Accueil — pictogrammes, étiquettes de section, fond « circuit » et
   animations. Chargé uniquement sur la page d'accueil (functions.php).
   ========================================================================== */

body { overflow-x: clip; }

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

/* Le bloc du hero s'aligne à gauche sur les autres sections au lieu de rester
   centré dans la largeur de lecture ; la droite est laissée au fond. */
.is-layout-constrained > .dt-hero {
  max-width: none;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.dt-hero-section { position: relative; isolation: isolate; }

/* Fond pleine largeur. Le masque (bornes mesurées en JS) efface le fond sous
   le texte : aucune ligne ne passe derrière un paragraphe (charte §8). */
.dt-hero-bg {
  --dt-text-x: 55%;
  --dt-text-y: 80%;
  position: absolute !important;
  top: 0;
  bottom: 0;
  left: 50%;
  z-index: -1;
  width: 100vw;
  max-width: none !important;
  margin: 0 !important;
  overflow: hidden;
  pointer-events: none;
  transform: translateX(-50%);
  -webkit-mask-image: linear-gradient(90deg, transparent calc(var(--dt-text-x) + 3%), rgba(0, 0, 0, .5) calc(var(--dt-text-x) + 14%), #000 calc(var(--dt-text-x) + 30%));
          mask-image: linear-gradient(90deg, transparent calc(var(--dt-text-x) + 3%), rgba(0, 0, 0, .5) calc(var(--dt-text-x) + 14%), #000 calc(var(--dt-text-x) + 30%));
}

.dt-hero-bg canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

@media (max-width: 899px) {
  .dt-hero-bg {
    -webkit-mask-image: linear-gradient(180deg, transparent calc(var(--dt-text-y) + 2%), rgba(0, 0, 0, .6) calc(var(--dt-text-y) + 8%), #000 calc(var(--dt-text-y) + 16%));
            mask-image: linear-gradient(180deg, transparent calc(var(--dt-text-y) + 2%), rgba(0, 0, 0, .6) calc(var(--dt-text-y) + 8%), #000 calc(var(--dt-text-y) + 16%));
  }
}

.dt-diagram svg { overflow: visible; }

/* États initiaux des animations : la classe dt-anim est posée dans <head>
   (functions.php) ; dt-ready est le filet de sécurité si le script échoue. */
.dt-anim .dt-hero-copy > *,
.dt-anim .dt-diagram path,
.dt-anim .dt-diagram circle,
.dt-anim .dt-diagram-label,
.dt-anim [data-dt-reveal] { opacity: 0; }

.dt-ready .dt-hero-copy > *,
.dt-ready .dt-diagram path,
.dt-ready .dt-diagram circle,
.dt-ready .dt-diagram-label,
.dt-ready [data-dt-reveal] { opacity: 1; }

/* Étiquettes de section : le numéro est un <code>, format que l'éditeur de
   blocs conserve quand on retouche le paragraphe. */
.dt-kicker {
  display: flex;
  align-items: center;
  gap: .6rem;
  font-size: .8125rem;
  letter-spacing: .12em;
}

.dt-kicker code {
  padding: 0;
  background: none;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: inherit;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--wp--preset--color--accent);
}

/* Pictogrammes : cadre carré fin, comme un composant sur un schéma -------- */

.dt-ico {
  display: grid;
  flex: none;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid var(--wp--preset--color--border);
  background: var(--wp--preset--color--base);
  color: var(--wp--preset--color--contrast);
  transition: border-color .25s ease, color .25s ease, background-color .25s ease;
}

.dt-ico svg { width: 22px; height: 22px; }

/* Capacités : grille pictogramme + intitulé, seulement si le pictogramme est
   présent (sinon la mise en page de style.css s'applique). */
.dt-accordion--capacites summary:has(> .dt-ico) {
  display: grid;
  grid-template-columns: 2.75rem minmax(0, 1fr);
  column-gap: 1rem;
  row-gap: 2px;
  align-items: center;
}

.dt-accordion--capacites summary > .dt-ico { grid-row: 1 / span 2; }

.dt-accordion--capacites summary:hover > .dt-ico,
.dt-accordion--capacites details[open] > summary > .dt-ico {
  border-color: var(--wp--preset--color--accent);
  color: var(--wp--preset--color--accent);
}

.dt-accordion--capacites details:has(> summary > .dt-ico) > p {
  max-width: 40rem;
  margin-left: 3.75rem;
}

.dt-accordion--capacites summary::after {
  top: .3rem;
  width: 1em;
  text-align: center;
  transition: transform .35s cubic-bezier(.2, .7, .2, 1);
}

.dt-accordion--capacites details[open] summary::after {
  content: "+";
  transform: rotate(45deg);
}

@supports selector(::details-content) {
  :root { interpolate-size: allow-keywords; }

  .dt-accordion--capacites details::details-content {
    block-size: 0;
    overflow-y: clip;
    transition: block-size .4s cubic-bezier(.2, .7, .2, 1), content-visibility .4s allow-discrete;
  }

  .dt-accordion--capacites details[open]::details-content { block-size: auto; }
}

/* Situations (« Vous faire avancer ») */
.dt-facts--icons .dt-facts-term {
  display: flex;
  align-items: flex-start;
  gap: .85rem;
  padding-left: 0;
}

.dt-facts--icons .dt-facts-term::before { content: none; }

.dt-facts--icons .dt-ico {
  width: 2.25rem;
  height: 2.25rem;
  margin-top: -.2rem;
  border-color: color-mix(in srgb, var(--wp--preset--color--accent) 30%, var(--wp--preset--color--base));
  color: var(--wp--preset--color--accent);
}

.dt-facts--icons .dt-ico svg { width: 18px; height: 18px; }

.dt-facts--icons .dt-facts-item:hover .dt-ico {
  border-color: var(--wp--preset--color--accent);
  background: var(--wp--preset--color--accent);
  color: var(--wp--preset--color--base);
}

@media (max-width: 699px) {
  .dt-facts--icons .dt-facts-desc { padding-left: 3.1rem; }
}

@media (prefers-reduced-motion: reduce) {
  .dt-ico,
  .dt-accordion--capacites summary::after,
  .dt-accordion--capacites details::details-content { transition: none; }
}