/* ============================================================
   SpiLi — Accueil (écran 01)
   Identité « Le Filet » · lot 2
   ------------------------------------------------------------
   Feuille de module, chargée par la seule page d'accueil. Elle
   ne déclare ni couleur ni police : tout vient de tokens.css.

   Deux écarts assumés par rapport à la maquette de l'écran 01,
   qui est dessinée sur 1440 px de large :
   — le contenu reste dans le `.container` de 1080 px du site,
     pour ne pas désaligner l'accueil de l'en-tête et des onze
     autres pages. Les proportions internes (1.35fr/1fr, gap de
     64 px, rythme vertical) sont celles de la maquette ;
   — les filets de séparation des sections, eux, traversent
     toute la largeur de la fenêtre comme sur la maquette.
   ============================================================ */

/* ---------- Sections ---------- */

.accueil-section { padding: 60px 0; border-bottom: 1px solid var(--spili-trait); }
/* Bande alternée : le fond change, le filet reste. */
.accueil-section--bande { background: var(--spili-fond-carte); }

/* L'en-tête de section est un surtitre suivi d'un filet qui court
   jusqu'au bord. Quand la section n'a pas d'accroche, ce surtitre
   est le titre de niveau 2 de la page — d'où la remise à plat de
   sa taille et de sa graisse. */
.entete-section {
  display: flex; align-items: baseline; gap: 18px;
  margin-bottom: 34px;
}
.entete-section > :first-child {
  font-family: var(--spili-data);
  font-size: 11.5px; font-weight: 400; line-height: 1.5;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--spili-texte-faible);
}
.entete-section::after {
  content: ""; flex: 1; height: 1px;
  background: var(--spili-trait);
}
.accueil-section--bande .entete-section::after { background: #D3D1CA; }

/* L'accroche de section : le seul titre de grande taille hors héros. */
.accroche {
  font-size: clamp(1.9rem, 4vw, 2.5rem);
  font-weight: 300; line-height: 1.08; letter-spacing: -0.035em;
  color: var(--spili-texte);
  max-width: 22ch;
}
.apres-accroche { margin-top: 26px; }

/* ---------- Héros ---------- */

.accueil-hero {
  padding: 88px 0 72px;
  border-bottom: 1px solid var(--spili-trait);
}
/* Trois colonnes depuis le lot V-3 : le texte, le document d'ouverture, la
   signature. L'image entre entre les deux plutôt qu'en fond — un document se
   regarde et se crédite, il ne sert pas de texture derrière un titre, et la
   règle du handoff est formelle sur ce point : jamais d'accent ni de texte
   posé sur une image. */
.accueil-hero .container {
  display: grid; grid-template-columns: 1.5fr 0.9fr 0.75fr;
  gap: 44px; align-items: end;
}

.accueil-hero-figure {
  margin: 0;
  display: flex; flex-direction: column; gap: 10px;
}
.accueil-hero-figure img {
  display: block; width: 100%; height: auto;
  border: 1px solid var(--spili-trait);
}
.accueil-hero-figure figcaption {
  font-family: var(--spili-data); font-size: 10.5px;
  line-height: 1.55; letter-spacing: 0.03em;
  color: var(--spili-texte-faible);
}
.accueil-hero-figure em { font-style: normal; color: var(--spili-texte-doux); }

@media (max-width: 1120px) {
  /* Sous cette largeur, trois colonnes rendent le titre illisible : le
     document passe sous le texte, à mi-largeur, et garde son cartel. */
  .accueil-hero .container { grid-template-columns: 1.2fr 1fr; gap: 44px; }
  .accueil-hero-figure { grid-column: 1; max-width: 460px; }
}
@media (max-width: 860px) {
  .accueil-hero .container { grid-template-columns: 1fr; }
  .accueil-hero-figure { grid-column: auto; max-width: none; }
}
.accueil-hero-texte { display: flex; flex-direction: column; gap: 26px; }
/* Le rythme du héros vient du `gap`, pas des marges de chaque bloc. */
.accueil-hero .eyebrow { margin-bottom: 0; }
.accueil-hero h1 {
  font-size: clamp(2.8rem, 6.4vw, 4.75rem);
  line-height: 1.02; letter-spacing: -0.04em;
  max-width: 15ch;
}
.accueil-hero .lead {
  font-size: 20px; line-height: 1.5; max-width: 46ch;
  color: var(--spili-texte-doux);
}
.accueil-hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 8px; }

/* Colonne de droite : le logotype à sa taille de signature, sa glose
   étymologique, un filet, la qualification juridique du porteur. */
.accueil-hero-marque {
  display: flex; flex-direction: column; gap: 20px;
  padding-bottom: 8px;
}
.marque-logo {
  display: flex; align-items: center;
  font-family: var(--spili-titre);
  font-size: 58px; font-weight: 500; letter-spacing: -0.05em;
  color: var(--spili-texte); line-height: 1;
}
.marque-logo .cesure {
  display: inline-block; width: 1.25px; height: 58px;
  background: var(--spili-texte); margin: 0 9px;
}
/* La glose montre d'où vient le nom : SPIritueux, LIqueurs. Les deux
   syllabes retenues sont en pleine encre, le reste en gris. */
.marque-glose {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--spili-data); font-size: 12.5px;
  color: var(--spili-texte-faible);
}
.marque-glose b { color: var(--spili-texte); font-weight: 400; }
.marque-glose .cesure {
  display: inline-block; width: 1px; height: 13px;
  background: var(--spili-trait);
}
.marque-filet { height: 1px; background: var(--spili-trait); }
.marque-statut {
  font-size: 14.5px; line-height: 1.6;
  color: var(--spili-texte-faible); max-width: 38ch;
}

/* ---------- Les quatre piliers ---------- */

.piliers .card {
  display: flex; flex-direction: column; gap: 14px;
  min-height: 224px;
}
.piliers .card h3 { margin-bottom: 0; }
/* Le numéro remplace les quatre émojis de la version de juillet. Il
   porte l'accent parce qu'il ne code rien : c'est un repère de lecture,
   pas une catégorie. */
.pilier-num {
  font-family: var(--spili-data); font-size: 11.5px;
  color: var(--spili-accent);
}

/* ---------- Bloc Atlas ---------- */

.accueil-atlas .container {
  display: grid; grid-template-columns: 1fr 1.1fr;
  gap: 64px; align-items: start;
}
.accueil-atlas-texte { display: flex; flex-direction: column; gap: 20px; }
.accueil-atlas-texte p { font-size: 16px; line-height: 1.6; max-width: 48ch; color: var(--spili-texte-doux); }
.accueil-atlas-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 6px; }
.accueil-atlas-actions .btn { padding: 14px 24px; }

/* L'aperçu : le graticule du système, quelques points, et une
   sélection unique en accent. C'est un ornement, pas une carte —
   il est masqué aux lecteurs d'écran, et les deux libellés qui
   l'accompagnent sont du texte, pas des étiquettes de données. */
.apercu-carte {
  position: relative; min-height: 280px;
  background: var(--spili-fond-eleve);
  border: 1px solid var(--spili-trait);
  overflow: hidden;
  padding: 24px 28px;
  display: flex; flex-direction: column; justify-content: space-between;
  gap: 24px;
}
/* La trame de fond est retirée : elle imitait un graticule sous des points qui
   n'étaient pas des coordonnées, et elle donnait au bloc l'allure d'une carte
   dont le fond n'aurait pas chargé. La carte est maintenant réelle, et elle se
   suffit. */
.apercu-titre, .apercu-legende { position: relative; }
.apercu-titre {
  font-family: var(--spili-data); font-size: 11px;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--spili-texte-faible);
}
.apercu-legende {
  font-family: var(--spili-data); font-size: 11px; line-height: 1.7;
  color: var(--spili-texte-faible);
}
/* ---------- L'aperçu de l'Atlas ----------
   C'était sept points posés à la main sur une grille, sous une légende qui
   affirmait « chaque point est un terroir ». Ce sont désormais les positions
   réelles du corpus, projetées au build par le moteur de la scène.

   La grammaire est celle de l'Atlas, à une taille de vignette : un disque pour
   un terroir, un cercle évidé pour une catégorie. La forme dit le niveau,
   jamais la couleur. */

.apercu-toile {
  position: relative;
  display: block; width: 100%; height: auto;
  margin: 4px 0;
}
/* Le trait de côte reste discret : c'est un fond, et ce sont les entrées qu'on
   vient lire. Rempli plutôt que tracé — à cette taille, un littoral en trait
   se réduit à du bruit. */
.apercu-terres {
  fill: var(--spili-fond-carte);
  stroke: var(--spili-trait);
  stroke-width: 0.8;
  stroke-linejoin: round;
}
.apercu-point {
  fill: var(--spili-texte);
}
.apercu-point--categorie {
  fill: none;
  stroke: var(--spili-texte);
  stroke-width: 1.6;
}

/* ---------- Ruptures ---------- */

@media (max-width: 1120px) {
  .accueil-hero .container { gap: 44px; }
  .accueil-atlas .container { gap: 44px; }
}
@media (max-width: 860px) {
  /* Le héros passe en une colonne : le bloc de marque descend sous le
     titre, où il tient le rôle de signature de bas de page. */
  .accueil-hero { padding: 56px 0 48px; }
  .accueil-hero .container,
  .accueil-atlas .container { grid-template-columns: 1fr; }
  .accueil-hero-marque { padding-bottom: 0; }
  .marque-logo { font-size: 46px; }
  .marque-logo .cesure { height: 46px; }
  .accueil-section { padding: 48px 0; }
}
@media (max-width: 560px) {
  .accueil-hero .lead { font-size: 18px; }
  .apercu-carte { min-height: 220px; }
}