/* Pages de réalisation remplies (pour l'instant : realisations/perso). Chargée après site.css et pages-internes.css.
   Tout est sous .realisation (posé sur <main>) : les règles d'accueil.css et de pages-internes.css ne sont pas modifiées. */

/* ---------- Sections ---------- */
.realisation .section + .section { margin-top: 3.5rem; }

.realisation h2 {
  margin-bottom: 1.25rem;
  font-size: clamp(1.625rem, 1.3rem + 1.4vw, 2.125rem);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.01em;
}
.realisation h3 { font-size: 1.25rem; font-weight: 700; line-height: 1.3; }

.realisation .insecable { white-space: nowrap; }
.realisation .intro { overflow-wrap: anywhere; text-wrap: pretty; }
.realisation .texte { max-width: var(--largeur-texte); margin-top: 1rem; overflow-wrap: anywhere; text-wrap: pretty; }

/* ---------- Contexte : texte, chiffres clés et schéma ---------- */
.realisation .contexte {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2rem;
}

.realisation .contexte h3 { margin-top: 1.75rem; font-size: 1.125rem; }
.realisation .contexte h3 + .texte { margin-top: 0.5rem; }
.realisation .contexte .texte + .texte { margin-top: 0.75rem; }

.realisation .faits {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.75rem;
  margin: 1.75rem 0 0;
}
.realisation .faits > div {
  padding: 0.875rem 1.125rem;
  border: var(--filet) solid var(--c-bordure);
  border-left: 0.25rem solid var(--c-rouge);
  border-radius: var(--rayon-l);
  background: var(--c-blanc);
}
.realisation .faits dt {
  color: var(--c-texte-secondaire);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.realisation .faits dd { margin: 0; font-size: var(--texte-grand); font-weight: 700; overflow-wrap: anywhere; }

.realisation .schema {
  align-self: start;
  max-width: 28rem;
  padding: 0.75rem;
  border: var(--filet) solid var(--c-bordure);
  border-radius: var(--rayon);
  background: var(--c-blanc);
}
.realisation .schema img { display: block; width: 100%; height: auto; }
.realisation .schema figcaption {
  margin-top: 0.75rem;
  color: var(--c-texte-secondaire);
  font-size: 0.9375rem;
  text-align: center;
}

/* ---------- Captures d'écran ---------- */
.realisation .capture {
  margin-top: 1.25rem;
  border: var(--filet) solid var(--c-bordure);
  border-radius: var(--rayon-l);
  background: var(--c-blanc);
  overflow: hidden;
}
.realisation .capture-large { margin-top: 2rem; }
.realisation .capture img { display: block; width: 100%; height: auto; }
.realisation .capture figcaption {
  padding: 0.625rem 0.875rem;
  border-top: var(--filet) solid var(--c-bordure);
  color: var(--c-texte-secondaire);
  font-size: 0.9375rem;
  text-wrap: pretty;
}

/* ---------- Frise : une étape par entrée ---------- */
.realisation .frise { margin-top: 2rem; padding: 0; list-style: none; }
.realisation .frise > li { position: relative; padding: 0 0 2rem 2rem; }
.realisation .frise > li:last-child { padding-bottom: 0; }
.realisation .frise > li::before {
  content: "";
  position: absolute;
  left: 0.125rem;
  top: 0.3125rem;
  width: 0.875rem;
  height: 0.875rem;
  border-radius: 50%;
  background: var(--c-rouge);
  box-shadow: 0 0 0 0.25rem var(--c-fond-clair);
}
.realisation .frise > li::after {
  content: "";
  position: absolute;
  left: 0.5rem;
  top: 1.5rem;
  bottom: 0;
  width: 0.125rem;
  background: var(--c-bordure);
}
.realisation .frise > li:last-child::after { display: none; }
/* Test et début : point creux, carte en pointillés ; le libellé de l'étape dit aussi de quoi il s'agit */
.realisation .frise > li.etape-test::before,
.realisation .frise > li.etape-debut::before {
  border: 0.1875rem solid var(--c-rouge);
  background: var(--c-fond-clair);
}

.realisation .frise-date {
  margin-bottom: 0.5rem;
  color: var(--c-texte-secondaire);
  font-weight: 700;
}

.realisation .etape {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
  padding: 1.5rem 1.25rem 1.25rem;
  border: var(--filet) solid var(--c-bordure);
  border-radius: var(--rayon);
  background: var(--c-blanc);
  overflow-wrap: anywhere;
}
.realisation .etape-projet .etape::before {
  content: "";
  position: absolute;
  top: 0;
  left: 1.5rem;
  width: 3rem;
  height: 0.25rem;
  border-radius: 0 0 var(--rayon-s) var(--rayon-s);
  background: var(--c-rouge);
}
.realisation .etape-test .etape,
.realisation .etape-debut .etape {
  padding-top: 1.25rem;
  border-style: dashed;
  border-color: var(--c-bordure-champ);
  background: var(--c-fond-clair);
}

.realisation .etape-icone { display: block; width: 3rem; height: 3rem; }
.realisation .etape-test .etape-icone,
.realisation .etape-debut .etape-icone { width: 2.5rem; height: 2.5rem; }

.realisation .etape .etiquette { margin-bottom: 0.25rem; }
.realisation .etape-projet .etiquette { color: var(--c-rouge-texte); }
.realisation .etape p { text-wrap: pretty; }
.realisation .etape h3 + p,
.realisation .etape p + p { margin-top: 0.5rem; }

.realisation .etiquettes {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1rem;
  padding: 0;
  list-style: none;
}
.realisation .etiquettes li {
  padding: 0.25rem 0.75rem;
  border: var(--filet) solid var(--c-bordure-champ);
  border-radius: var(--rayon-xl);
  background: var(--c-fond-clair);
  font-size: 0.875rem;
  font-weight: 600;
}

.realisation .etape-lien { margin-top: 0.75rem; }
.realisation .etape-lien a {
  display: inline-flex;
  align-items: center;
  min-height: var(--cible);
  font-weight: 600;
}

/* ---------- Écrans larges ---------- */
@media (min-width: 30rem) {
  .realisation .faits { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 40rem) {
  .realisation .etape { grid-template-columns: auto minmax(0, 1fr); gap: 1.25rem; padding-inline: 1.5rem; }
  .realisation .etape-projet .etape::before { left: 1.5rem; }
  .realisation .schema { padding: 1.25rem; }
  .realisation .etape-icone { width: 3.5rem; height: 3.5rem; }
  .realisation .etape-test .etape-icone,
  .realisation .etape-debut .etape-icone { width: 2.75rem; height: 2.75rem; }
}

/* Date à gauche, filet au centre, carte à droite */
@media (min-width: 48rem) {
  .realisation .frise > li {
    display: grid;
    grid-template-columns: 8rem minmax(0, 1fr);
    column-gap: 3rem;
    padding: 0 0 2rem;
  }
  .realisation .frise > li::before { left: 9.0625rem; top: 1.375rem; }
  .realisation .frise > li::after { left: 9.4375rem; top: 2.6rem; }
  .realisation .frise-date { margin: 1.125rem 0 0; text-align: right; }
}

@media (min-width: 64rem) {
  .realisation .contexte { grid-template-columns: minmax(0, 1fr) 26rem; gap: 3rem; }
  .realisation .schema { max-width: none; }
}

/* ---------- Contraste forcé ----------
   Les fonds sont remplacés par le navigateur : barre des cartes, points et filet de la frise restent visibles. */
@media (forced-colors: active) {
  .realisation .etape-projet .etape::before,
  .realisation .frise > li::before,
  .realisation .frise > li::after { background: CanvasText; }
  .realisation .frise > li.etape-test::before,
  .realisation .frise > li.etape-debut::before { border-color: CanvasText; background: Canvas; }
  .realisation .faits > div { border-left-color: CanvasText; }
}