/* ============================================================
   D3RF -- home.css
   Ecrans 2/3/4 de la page d'accueil (refonte v22, phase SOCLE).
   Charge APRES v4-styles.css (voir en-tete de tokens.css, ordre
   etendu ici a "pages/*.css").

   Regle de securite (STYLE_GUIDE section 8) : tout selecteur ici vit
   sous .section-wrapper / .screen-* : rien n'atteint #hero, rien ne
   touche aux quatre fichiers geles.
   ============================================================ */

/* ============================================================
   ECRAN 2 -- LE MANIFESTE
   65% de surface vide minimum : colonne texte a gauche dans
   --container-narrow, tiers droit vide (triangle supprime, revision Fred 01/08).
   ============================================================ */
.section-wrapper.screen-manifesto {
  background: var(--bg-primary);
}

.manifesto-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
}

@media (min-width: 1024px) {
  .manifesto-layout {
    grid-template-columns: minmax(0, var(--container-narrow)) 1fr;
    align-items: center;
  }
}

.manifesto-text {
  max-width: var(--container-narrow);
}

.manifesto-affirmation {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-d1);
  line-height: var(--lh-display);
  color: var(--text-primary);
  max-width: var(--measure-short);
  text-wrap: balance;
  margin: var(--space-5) 0 var(--space-7);
}

.manifesto-beliefs {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  max-width: var(--measure-lead);
}

.manifesto-belief {
  position: relative;
  padding-left: calc(12px + var(--space-3));
  font-family: var(--font-display);
  font-size: var(--fs-lead);
  line-height: var(--lh-body);
  color: var(--text-secondary);
}

.manifesto-belief::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.7em;
  width: 12px;
  height: var(--stroke-node);
  background: var(--line-default);
}

.manifesto-belief:nth-child(1) { transition-delay: 0ms; }
.manifesto-belief:nth-child(2) { transition-delay: var(--stagger-base); }
.manifesto-belief:nth-child(3) { transition-delay: calc(var(--stagger-base) * 2); }

/* Triangle decoratif supprime (revision Fred 01/08, VISUAL_SPEC ecran 2 :
   "vraiment laid et deja vu"). Le tiers droit de .manifesto-layout reste
   vide par construction (2e colonne de grille sans contenu), aucun CSS
   compensatoire necessaire. */

/* ============================================================
   ECRAN 3 -- LA GRILLE (revision Fred 01/08, remplace les quatre portes)
   Reutilisation EXACTE du composant /projets/ (VISUAL_SPEC ecran 3) :
   card/badge/filtre/JS partages via css/pages/grid-shared.css +
   js/projets.js, zero fork. Ancien systeme "quatre portes"
   (.screen-portes/.portes-*/.porte*) retire ci-dessous, feuille de style
   integralement remplacee par ce bloc.
   ============================================================ */
.section-wrapper.screen-grille {
  background: var(--bg-primary);
}

.home-grid-count {
  font-family: var(--font-mono);
  font-size: var(--fs-mono-s);
  letter-spacing: var(--ls-mono);
  color: var(--text-muted);
  margin-top: var(--space-3);
}

.home-grid-cta {
  display: flex;
  justify-content: center;
  padding-top: var(--space-7);
}

/* ============================================================
   ECRAN 4 -- LES AUTRES SALLES (revision Fred 01/08)
   Bandeau sobre : pas de noeuds, pas de cercles (VISUAL_SPEC ecran 4).
   Le vocabulaire noeuds/lignes est deja porte par le hero, le menu et
   la frise -- le repeter ici l'epuiserait.
   ============================================================ */
.section-wrapper.screen-salles {
  background: var(--bg-section-alt);
}

.salles-row {
  display: flex;
  flex-direction: column;
}

@media (min-width: 768px) {
  .salles-row {
    flex-direction: row;
  }
}

.salle {
  flex: 1;
  padding: var(--space-6) 0;
  border-top: var(--stroke-hair) solid var(--border);
  text-decoration: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.salle:first-child {
  border-top: none;
}

@media (min-width: 768px) {
  .salle {
    padding: 0 var(--space-6);
    border-top: none;
    border-left: var(--stroke-hair) solid var(--border);
  }
  .salle:first-child {
    padding-left: 0;
    border-left: none;
  }
  .salle:last-child {
    padding-right: 0;
  }
}

.salle-label {
  font-family: var(--font-mono);
  font-size: var(--fs-mono-m);
  letter-spacing: var(--ls-mono-wide);
  text-transform: uppercase;
  color: var(--text-muted);
}

.salle-title-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.salle-title {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-h3);
  color: var(--text-primary);
  transition: color var(--dur-fast) ease;
}

.salle-arrow {
  flex-shrink: 0;
  transition: transform var(--dur-fast) var(--ease-card);
}

.salle:hover .salle-title,
.salle:focus-visible .salle-title {
  color: var(--card-accent, var(--node-active));
}

.salle:hover .salle-arrow,
.salle:focus-visible .salle-arrow {
  transform: translateX(4px);
}

.salle-pitch {
  font-family: var(--font-display);
  font-size: var(--fs-small);
  color: var(--text-secondary);
  max-width: var(--measure-short);
}

.salle-count {
  font-family: var(--font-mono);
  font-size: var(--fs-mono-s);
  letter-spacing: var(--ls-mono);
  color: var(--text-muted);
}

/* ============================================================
   ECRAN 5 -- LA SORTIE
   ============================================================ */
.section-wrapper.screen-sortie {
  background: var(--bg-section-alt);
}

.sortie-inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-6);
  max-width: var(--container-narrow);
}

.sortie-line {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-h3);
  line-height: var(--lh-title);
  color: var(--text-primary);
}

/* Pont vers Enumalon (CONTENT_REFONTE.md ecran 4, ajout 01/08) : meme
   niveau que la ligne de sortie, sans jargon commercial (VISION.md). */
.sortie-pont {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-h3);
  line-height: var(--lh-title);
  color: var(--text-primary);
  max-width: var(--measure-lead);
}

.sortie-ctas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-5);
}

.btn-primary {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-pill);
  background: var(--node-active);
  color: var(--bg-primary);
  font-family: var(--font-mono);
  font-size: var(--fs-mono-m);
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  text-decoration: none;
  transition: transform var(--dur-fast) var(--ease-card);
}

.btn-primary:hover,
.btn-primary:focus-visible {
  transform: translateY(-2px);
}

.btn-lien-fleche {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 44px;
  color: var(--text-primary);
  border-bottom: var(--stroke-hair) solid var(--border);
  text-decoration: none;
  font-family: var(--font-mono);
  font-size: var(--fs-mono-m);
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  padding-bottom: 2px;
  transition: border-color var(--dur-fast) ease;
}

.btn-lien-fleche svg {
  transition: transform var(--dur-fast) var(--ease-card);
}

.btn-lien-fleche:hover,
.btn-lien-fleche:focus-visible {
  border-color: var(--node-active);
}

.btn-lien-fleche:hover svg,
.btn-lien-fleche:focus-visible svg {
  transform: translateX(4px);
}

/* Confinement hero (3bis) : les transforms de slide-in des lignes animees
   depassent le viewport pendant l'animation et gonflent le scrollWidth.
   clip = aucun scroll container cree, aucune propriete animee touchee.
   deviation a valider DA : selecteur sur la BOITE #hero, pas son contenu. */
#hero {
    overflow-x: clip;
}

/* QA_V22 warning h1 : titre de page pour lecteurs d'ecran et SEO,
   invisible au rendu (la home n'avait aucun h1, 22 autres pages en ont un). */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}