/* Page realisations/greta : présentation, portfolio, procédures. Chargée après site.css, pages-internes.css et realisations.css.
   Le schéma interactif a sa propre feuille (schema-ferme.css). Tout est sous .realisation, posé sur <main>. */

/* ---------- Présentation : texte et photo ---------- */
.realisation .greta-presentation {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2rem;
}
.realisation .greta-presentation .texte { margin-top: 0.75rem; }
.realisation .greta-photo { align-self: start; margin-top: 0; }

/* ---------- Titres et textes des sections ---------- */
.realisation .section > h3 { margin-top: 2rem; }
.realisation .section > h3 + .texte { margin-top: 0.5rem; }
.realisation .section > .intro + .texte,
.realisation .section > .texte + .texte { margin-top: 0.75rem; }
/* Les paragraphes de la page prennent toute la largeur disponible (la limite de realisations.css et de pages-internes.css est levée) */
.realisation .section > .intro,
.realisation .section > .texte,
.realisation .greta-presentation .intro,
.realisation .greta-presentation .texte { max-width: none; }

/* Liens de bas de bloc (procédure en PDF, ancien portfolio, ancien schéma) */
.realisation .section > .etape-lien { margin-top: 0.75rem; }
.realisation .liens-bloc { margin: 1.5rem 0 0; padding: 0; list-style: none; }
.realisation .liens-bloc .etape-lien { margin-top: 0; }

/* Étapes numérotées du portfolio : numéros rouges, comme les puces des listes du site */
.realisation .liste-etapes {
  margin: 0.75rem 0 0;
  padding-left: 1.5rem;
}
.realisation .liste-etapes li { margin-top: 0.5rem; padding-left: 0.25rem; overflow-wrap: anywhere; text-wrap: pretty; }
.realisation .liste-etapes li::marker { color: var(--c-rouge-texte); font-weight: 700; }

/* ---------- Procédures : une carte par procédure ---------- */
.realisation .procedures {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.25rem;
  margin: 2rem 0 0;
  padding: 0;
  list-style: none;
}
.realisation .procedure {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 1.5rem 1.25rem 0.75rem;
  border: var(--filet) solid var(--c-bordure);
  border-radius: var(--rayon);
  background: var(--c-blanc);
  overflow-wrap: anywhere;
}
.realisation .procedure::before {
  content: "";
  position: absolute;
  top: 0;
  left: 1.25rem;
  width: 3rem;
  height: 0.25rem;
  border-radius: 0 0 var(--rayon-s) var(--rayon-s);
  background: var(--c-rouge);
}
.realisation .procedure h3 { font-size: 1.1875rem; }
.realisation .procedure p { margin-top: 0.75rem; text-wrap: pretty; }
.realisation .procedure h3 + p { margin-top: 0.5rem; }
/* Le lien du PDF reste en bas de la carte, même quand le texte est court */
.realisation .procedure p.etape-lien { margin-top: auto; padding-top: 0.5rem; }

/* Cyberelements : le seul projet en entreprise, présenté en détail et sur toute la largeur */
.realisation .procedure-cyber h4 {
  margin-top: 1.5rem;
  color: var(--c-rouge-texte);
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.realisation .procedure-cyber h4 + p { margin-top: 0.375rem; }

/* ---------- Écrans larges ---------- */
@media (min-width: 40rem) {
  .realisation .procedure { padding-inline: 1.75rem; }
  .realisation .procedure::before { left: 1.75rem; }
}

@media (min-width: 64rem) {
  .realisation .greta-presentation { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 3rem; align-items: start; }
  .realisation .procedures { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; }
  .realisation .procedure-cyber { grid-column: 1 / -1; }
}

/* ---------- Impression : on garde le contenu, pas les éléments interactifs ---------- */
@media print {
  .realisation .procedure { break-inside: avoid; }
}

/* ---------- Contraste forcé : la barre rouge des cartes reste visible ---------- */
@media (forced-colors: active) {
  .realisation .procedure::before { background: CanvasText; }
}