/* ==========================================================================
   Florent Andarelli — couche suisse
   Se charge APRÈS styles.css et grille.css, et ne remplace rien.
   Trois principes, empruntés au style international :

     1. une grille éditoriale asymétrique : le chapeau tient la marge
        gauche, le contenu occupe les colonnes de droite ;
     2. une typographie de titrage plus grande, plus serrée, à fer à
        gauche, posée sur le bord du contenu ;
     3. des filets noirs et des index numérotés plutôt que des aplats.

   Pour revenir en arrière : retirer la ligne suisse.css des pages.
   Pour doser : les variables ci-dessous.
   ========================================================================== */

:root{
  --sw-m: 40px;              /* le module, celui de la grille */
  --sw-encre: #000;
  --sw-gris: #767676;        /* chapeaux, catégories */
  --sw-filet: #000;          /* filets structurants */
  --sw-filet-fin: #d8d8d8;   /* filets de liste */

  --sw-serre: -0.04em;       /* chasse des grands titres */
  --sw-interligne: 0.88;     /* interligne des grands titres */
}

body.dark-mode{
  --sw-encre: #fff;
  --sw-gris: #8a8a8a;
  --sw-filet: #fff;
  --sw-filet-fin: #2a2a2a;
}

/* ==========================================================================
   1. GRILLE ÉDITORIALE
   Les blocs passent en pleine largeur, calés sur les filets de marge,
   et se répartissent sur douze colonnes. Le chapeau occupe les trois
   premières, le contenu les neuf suivantes : c'est l'asymétrie suisse.
   ========================================================================== */

.page-hero-inner,
.page-wrap,
.home-intro-inner{
  max-width: none;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--sw-m);
  row-gap: 0;
  align-items: start;
}

/* tout le contenu commence à la quatrième colonne… */
.page-hero-inner > *,
.page-wrap > *,
.home-intro-inner > *{
  grid-column: 4 / 13;
  min-width: 0;
}

/* …sauf le chapeau, qui tient la marge et reste sur la première ligne */
.page-eyebrow,
.section-label,
.home-intro-label{
  grid-column: 1 / 4;
  grid-row: 1;
  margin-bottom: 0;
  align-self: start;
}

/* Le chapeau : petit, espacé, encré, tenu par un filet noir */
.page-eyebrow,
.section-label,
.home-intro-label{
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--sw-encre);
  font-weight: 500;
  border-top: 1px solid var(--sw-filet);
  padding-top: 14px;
  line-height: 1.5;
}

/* Sous 1000 px la grille se déplie : une seule colonne, le chapeau au-dessus. */
@media (max-width: 1000px){
  .page-hero-inner,
  .page-wrap,
  .home-intro-inner{
    display: block;
  }
  .page-eyebrow,
  .section-label,
  .home-intro-label{
    margin-bottom: 28px;
  }
}

/* ==========================================================================
   2. TYPOGRAPHIE
   Plus grand, plus serré, à fer à gauche. Rien d'autre ne change :
   c'est la même famille, la même graisse.
   ========================================================================== */

/* Le titre d'accueil descend en bas à gauche et vient toucher le filet
   de marge : il n'est plus posé au milieu, il tient la page. */
.hero-content{
  justify-content: flex-start;
  align-items: flex-end;
}
.hero-title{
  font-size: clamp(56px, 17.2vw, 260px);
  line-height: 0.82;
  letter-spacing: var(--sw-serre);
  max-width: none;
}
.hero-subtitle{
  display: block;
  margin-top: 22px;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--sw-encre);
}
/* Le repère de défilement libère le centre et va tenir l'angle. */
.hero-section{ padding-bottom: 88px; }
.project-scroll-indicator,
.hero-section .scroll-indicator{
  left: auto;
  right: var(--sw-m);
  bottom: var(--sw-m);
  top: auto;
  transform: none;
  align-items: flex-end;
}
@media (max-width: 768px){
  .project-scroll-indicator,
  .hero-section .scroll-indicator{
    left: auto; right: 20px; bottom: 20px; top: auto; transform: none;
  }
}

.page-hero h1{
  font-size: clamp(44px, 9.5vw, 148px);
  line-height: var(--sw-interligne);
  letter-spacing: var(--sw-serre);
  margin-bottom: 44px;
}

.archive-title{
  font-size: clamp(44px, 9vw, 132px);
  line-height: var(--sw-interligne);
  letter-spacing: var(--sw-serre);
}

.page-section h2,
.home-intro h2{
  font-size: clamp(30px, 5.2vw, 68px);
  line-height: 0.95;
  letter-spacing: -0.03em;
  margin-bottom: 36px;
  text-wrap: balance;
}

/* Le chapô : traité comme une seconde voix, pas comme du texte courant */
.page-lede{
  font-size: clamp(17px, 1.5vw, 23px);
  line-height: 1.4;
  letter-spacing: -0.01em;
  max-width: 44ch;
  color: var(--sw-encre);
}
.page-lede + .page-lede{ margin-top: 18px; }

/* Le texte courant garde une longueur de ligne lisible malgré la pleine largeur */
.page-section p:not(.page-lede):not(.section-label),
.home-intro p{
  max-width: 62ch;
}

/* Navigation et mentions : petites capitales espacées */
.nav-menu a,
.archive-menu a{
  font-size: 11.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.logo a{ letter-spacing: 0.16em; }

/* Les pages projet : le titre descend lui aussi en bas à gauche,
   le millésime devient une cote posée au-dessus. */
.project-title-section{
  align-items: flex-end;
  justify-content: flex-start;
}
.project-title-container{ width: 100%; text-align: left; }
.project-detail-title{
  font-size: clamp(52px, 13vw, 200px);
  line-height: 0.86;
  letter-spacing: var(--sw-serre);
}
.project-year-badge{
  background: transparent;
  color: var(--sw-gris);
  padding: 0 0 12px;
  font-size: 11px;
  letter-spacing: 0.2em;
  margin-bottom: 0;
  border-top: 1px solid var(--sw-filet);
  padding-top: 12px;
  min-width: 140px;
  font-variant-numeric: tabular-nums;
}
body.dark-mode .project-year-badge{ background: transparent; color: var(--sw-gris); }
.project-detail-category{
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--sw-encre);
  margin-top: 22px;
}

/* ==========================================================================
   3. FILETS
   Chaque section est tenue par un filet noir pleine largeur, posé sur
   la grille. Les aplats gris disparaissent : c'est le filet qui sépare,
   pas la couleur.
   ========================================================================== */

.page-section,
.page-section.alt,
body.dark-mode .page-section.alt{
  background: transparent;
  border-top: 1px solid var(--sw-filet);
  padding-top: 72px;
  padding-bottom: 96px;
}

.home-intro{
  border-top: 1px solid var(--sw-filet);
  padding-top: 72px;
}

/* Le filet du header, net */
header{
  border-bottom: 1px solid var(--sw-filet);
  box-shadow: none;
}
body.dark-mode header{ border-bottom: 1px solid var(--sw-filet); box-shadow: none; }

/* ==========================================================================
   4. INDEX NUMÉROTÉS
   Le repère de lecture du style suisse : (01), (02)… posé au-dessus
   de chaque entrée, jamais décoratif, toujours une vraie séquence.
   ========================================================================== */

.svc-grid{ counter-reset: svc; }
.svc-card{ counter-increment: svc; }
.svc-card{ border-top: 1px solid var(--sw-filet); padding-top: 18px; }

.svc-card h3::before{
  content: "(" counter(svc, decimal-leading-zero) ")";
  display: block;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.18em;
  color: var(--sw-gris);
  margin-bottom: 14px;
}

.svc-card h3{
  font-size: clamp(19px, 1.9vw, 26px);
  letter-spacing: -0.015em;
  line-height: 1.12;
}

/* La méthode : le numéro devient une vraie cote, dans la marge */
.steps li{ padding-left: 96px; margin-bottom: 44px; max-width: none; }
.steps li::before{
  font-size: 40px;
  font-weight: 900;
  letter-spacing: -0.04em;
  line-height: 0.9;
  top: -4px;
  font-variant-numeric: tabular-nums;
}
.steps strong{
  font-size: clamp(18px, 1.7vw, 24px);
  letter-spacing: -0.015em;
  margin-bottom: 8px;
}
.steps li p, .steps li{ max-width: 62ch; }

/* ==========================================================================
   5. INDEX DES PROJETS
   La légende passe en ligne de tableau : millésime, titre, catégorie.
   Un filet noir la tient, comme une entrée de catalogue.
   ========================================================================== */

.archive-info{
  display: grid;
  grid-template-columns: 4rem 1fr auto;
  align-items: baseline;
  column-gap: 20px;
  row-gap: 0;
  border-top: 1px solid var(--sw-filet);
  padding-top: 12px;
  margin-top: 14px;
}
.archive-number{
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--sw-gris);
  font-variant-numeric: tabular-nums;
}
.archive-name{
  font-size: clamp(15px, 1.3vw, 19px);
  letter-spacing: 0.02em;
  font-weight: 500;
}
.archive-category{
  font-size: 10.5px;
  letter-spacing: 0.14em;
  color: var(--sw-gris);
  text-align: right;
  margin-top: 0;
}

.project-details{
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 16px;
  row-gap: 2px;
  border-top: 1px solid var(--sw-filet);
  padding-top: 11px;
  margin-top: 12px;
}
.project-year{
  grid-row: 1; grid-column: 1;
  font-size: 11px; letter-spacing: 0.12em; color: var(--sw-gris);
  font-variant-numeric: tabular-nums;
}
.project-name{
  grid-row: 1; grid-column: 2;
  font-size: clamp(14px, 1.2vw, 17px); letter-spacing: 0.02em;
}
.project-type{
  grid-row: 2; grid-column: 2;
  font-size: 10.5px; letter-spacing: 0.14em; color: var(--sw-gris);
  text-align: left;
}

/* Les filtres : un rang de petites capitales, tenu par un filet */
.filter-container{ border-bottom: 1px solid var(--sw-filet); }
.filter-btn{
  font-size: 11px;
  letter-spacing: 0.16em;
}

/* ==========================================================================
   6. LISTES ET TARIFS
   ========================================================================== */

.home-intro-list li{
  border-bottom: 1px solid var(--sw-filet-fin);
  color: var(--sw-encre);
  font-size: 15px;
  letter-spacing: 0.01em;
  padding: 13px 0;
}
.home-intro-list li:first-child{ border-top: 1px solid var(--sw-filet); }

.price-row{
  border-bottom: 1px solid var(--sw-filet-fin);
  padding: 15px 0;
}
.price-row:first-of-type{ border-top: 1px solid var(--sw-filet); }
.price-row span:last-child{
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
}

/* ==========================================================================
   7. PIED DE PAGE
   Il reste noir, mais s'aligne sur la même grille de douze colonnes.
   ========================================================================== */

.footer-content{
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--sw-m);
}
.footer-content > *:nth-child(1){ grid-column: 1 / 5; }
.footer-content > *:nth-child(2){ grid-column: 5 / 9; }
.footer-content > *:nth-child(3){ grid-column: 9 / 13; }

@media (max-width: 768px){
  .footer-content{ grid-template-columns: 1fr; }
  .footer-content > *:nth-child(1),
  .footer-content > *:nth-child(2),
  .footer-content > *:nth-child(3){ grid-column: auto; }
}