/* ============================================================
   MAISON VÉRANE — Section Hero
   Palette : Ivoire #F3EEE6 · Encre #17150F · Bronze #A8875A · Pierre #8C8578
   Typo    : Bodoni Moda (titre monumental) · Inter 300 (navigation, textes)
   Cible   : Webflow via Convertex. Classes BEM aplaties (minuscules-tirets)
             modificateurs en combo-class "is-*", Flexbox + Grid, unités fluides.
   ============================================================ */

/* ===== Tokens — Variables Webflow (Ivoire · Encre · Bronze · Pierre) =====
   Chaque usage porte un repli hexadécimal : var(--bronze, #A8875A).
   Si Convertex ne crée pas les Variables automatiquement, les 4 couleurs
   se déclarent une fois dans le panneau Variables du Designer, mêmes noms. */
:root {
  --ivoire: #F3EEE6;
  --encre: #17150F;
  --bronze: #A8875A;
  --pierre: #8C8578;
  --ivoire-sur-encre: #EDE7DC; /* ivoire compensé pour la section 04 (fond sombre) */
  --pierre-sur-encre: #A39C8F; /* pierre éclaircie, même compensation */
  --ease-maison: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-micro: 180ms;
  --dur-hover: 700ms;
  --dur-reveal: 1100ms;
}

/* ===== Base ===== */

/* Webflow applique box-sizing: border-box à tout son document. On fait pareil
   ici, sinon l'aperçu local et le rendu Webflow divergeraient sur tout élément
   qui combine une dimension et un padding. */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* font-size et line-height explicites : le body de Webflow est réglé à
   14px/20px par défaut, celui du navigateur à 16px. Sans ça, tout élément
   qui hérite de sa taille changerait après import. */
body {
  margin: 0;
  font-size: 1rem;
  line-height: 1.5;
  background-color: #F3EEE6;
  color: #17150F;
  font-family: 'Inter', Helvetica, Arial, sans-serif;
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
}

.page-wrapper {
  position: relative;
  /* clip ne crée pas de conteneur de défilement (requis par animation-timeline: view()) */
  overflow: hidden;
  overflow: clip;
  background-color: #F3EEE6;
}

/* ===== Header / Navigation (Flexbox) ===== */
.header-section {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 20;
}

.nav-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 2.2rem;
  padding-right: 4vw;
  padding-bottom: 2.2rem;
  padding-left: 4vw;
}

.nav-brand {
  font-family: 'Bodoni Moda', Georgia, serif;
  font-size: 1.05rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  white-space: nowrap;
  color: #17150F;
  text-decoration: none;
}

.nav-list {
  display: flex;
  align-items: center;
  gap: 2.6vw;
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav-item {
  display: flex;
}

.nav-link {
  font-size: 0.68rem;
  font-weight: 300;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: #17150F;
  text-decoration: none;
  transition: color 700ms cubic-bezier(0.16, 1, 0.3, 1), opacity 700ms cubic-bezier(0.16, 1, 0.3, 1);
}

.nav-link:hover {
  color: #A8875A;
}

.nav-cta {
  display: flex;
  align-items: center;
  padding-bottom: 0.35rem;
  border-bottom: 1px solid #A8875A;
  font-size: 0.68rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  white-space: nowrap;
  color: #A8875A;
  text-decoration: none;
}

/* ===== Hero — section ===== */
.hero-section {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  overflow: clip;
  background-color: #F3EEE6;
}

/* ===== Hero — grille éditoriale 12 colonnes ===== */
.hero-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: auto 1fr auto;
  column-gap: 1.5vw;
  row-gap: 3vh;
  box-sizing: border-box;
  min-height: 100vh;
  /* padding-top en rem, pas en vh : l'en-tête absolu au-dessus est en rem,
     et un écran court (téléphone en paysage) réduirait un vh jusqu'à
     faire passer l'intro sous la navigation */
  padding-top: 7.5rem;
  padding-right: 4vw;
  padding-bottom: 4vh;
  padding-left: 4vw;
}

/* Rangée 1 — intro en haut à gauche (le haut droit reste vide pour respirer) */
.hero-intro {
  grid-column-start: 2;
  grid-column-end: 6;
  grid-row-start: 1;
  grid-row-end: 2;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  max-width: 20rem;
}

.hero-eyebrow {
  margin: 0;
  font-size: 0.66rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: #8C8578;
}

.hero-manifesto {
  margin: 0;
  font-family: 'Bodoni Moda', Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: 1.2rem;
  line-height: 1.45;
  color: #17150F;
}

/* Rangée 2 — scène de superposition (wrapper relatif) */
.hero-stage {
  grid-column-start: 1;
  grid-column-end: 13;
  grid-row-start: 2;
  grid-row-end: 3;
  position: relative;
  min-height: 50vh;
}

.hero-title {
  margin: 0;
  font-family: 'Bodoni Moda', Georgia, serif;
  font-weight: 400;
  font-size: 15.5vw;
  line-height: 0.82;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: #A8875A;
}

.hero-title-line {
  position: absolute;
  display: block;
  white-space: nowrap;
}

/* Ligne 1 : passe DERRIÈRE l'image (z-index 1 < image 2) */
.hero-title-line.is-back {
  left: 2vw;
  top: 0;
  z-index: 1;
}

/* Ligne 2 : passe DEVANT l'image (z-index 3 > image 2) */
.hero-title-line.is-front {
  right: 0;
  bottom: 0;
  z-index: 3;
}

/* Image centrée horizontalement, format portrait constant (dimensions en vh) */
.hero-image-wrapper {
  position: absolute;
  left: 50%;
  top: 62%;
  z-index: 2;
  width: 40vh;
  height: 50vh;
  overflow: hidden;
  transform: translate(-50%, -50%);
}

.hero-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Rangée 3 — pied de hero : chapô, indicateur de scroll, légende */
.hero-lede {
  grid-column-start: 2;
  grid-column-end: 6;
  grid-row-start: 3;
  grid-row-end: 4;
  align-self: end;
  max-width: 20rem;
  margin: 0;
  font-size: 0.8rem;
  line-height: 1.75;
  color: #17150F;
}

.hero-scroll {
  grid-column-start: 9;
  grid-column-end: 11;
  grid-row-start: 3;
  grid-row-end: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 0.9rem;
}

.hero-scroll-label {
  font-size: 0.6rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: #8C8578;
}

.hero-scroll-line {
  width: 1px;
  height: 7vh;
  background-color: #A8875A;
}

.hero-caption {
  grid-column-start: 11;
  grid-column-end: 13;
  grid-row-start: 3;
  grid-row-end: 4;
  align-self: end;
  justify-self: end;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.4rem;
  text-align: right;
}

.hero-caption-index {
  font-family: 'Bodoni Moda', Georgia, serif;
  font-size: 1.4rem;
  color: #A8875A;
}

.hero-caption-text {
  font-size: 0.62rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  white-space: nowrap;
  color: #8C8578;
}

/* ===== Détails graphiques — couches absolues de la section ===== */

/* Grand mot en outline, en arrière-plan (z-index 1 < grille 2) : il émerge derrière l'image */
.hero-outline-word {
  position: absolute;
  top: 40%;
  right: -2vw;
  z-index: 1;
  font-family: 'Bodoni Moda', Georgia, serif;
  font-size: 11vw;
  line-height: 1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  color: transparent;
  opacity: 0.5;
  /* -webkit-text-stroke : propriété custom Webflow (panneau "Custom properties") ou embed */
  -webkit-text-stroke: 1px #A8875A;
}

/* Textes verticaux sur les bords (rotation, pas de writing-mode) */
.hero-side-left {
  position: absolute;
  left: 2.2vw;
  top: 50%;
  z-index: 3;
  white-space: nowrap;
  font-size: 0.6rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: #8C8578;
  transform: translate(-50%, -50%) rotate(-90deg);
}

.hero-side-right {
  position: absolute;
  right: 2.2vw;
  top: 76%;
  z-index: 3;
  white-space: nowrap;
  font-size: 0.6rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: #8C8578;
  transform: translate(50%, -50%) rotate(90deg);
}

/* ===== Responsive — breakpoints Webflow ===== */

/* Tablette */
@media (max-width: 991px) {
  /* La navigation reste visible : c'est l'appel à l'action qui s'efface,
     « Contact » le remplace. */
  .nav-cta {
    display: none;
  }
  .nav-list {
    gap: 2vw;
  }
  .hero-grid {
    padding-top: 7.5rem;
    padding-right: 5vw;
    padding-bottom: 4vh;
    padding-left: 5vw;
  }
  .hero-intro {
    grid-column-end: 8;
    max-width: 24rem;
  }
  .hero-stage {
    min-height: 52vh;
  }
  .hero-title {
    font-size: 17vw;
  }
  .hero-image-wrapper {
    top: 54%;
    width: 36vh;
    height: 44vh;
  }
  .hero-outline-word {
    font-size: 13vw;
  }
}

/* Mobile paysage */
@media (max-width: 767px) {
  /* En-tête sur deux lignes : la marque, puis les quatre entrées réparties
     sur toute la largeur — pas de menu burger, rien à ouvrir. */
  .nav-wrapper {
    flex-direction: column;
    align-items: flex-start;
    gap: 1.3rem;
    padding-top: 1.5rem;
    padding-right: 6vw;
    padding-bottom: 1.5rem;
    padding-left: 6vw;
  }
  .nav-list {
    width: 100%;
    justify-content: space-between;
    gap: 0;
  }
  .nav-link {
    font-size: 0.62rem;
    letter-spacing: 0.22em;
  }
  .hero-grid {
    grid-template-rows: auto 1fr auto auto;
    padding-top: 8.5rem;
    padding-right: 6vw;
    padding-bottom: 4vh;
    padding-left: 6vw;
  }
  .hero-intro {
    grid-column-start: 1;
    grid-column-end: 13;
    max-width: 22rem;
  }
  .hero-stage {
    min-height: 50vh;
  }
  .hero-title {
    font-size: 20vw;
  }
  .hero-title-line.is-back {
    left: 0;
    top: 8%;
  }
  .hero-title-line.is-front {
    bottom: 10%;
  }
  .hero-image-wrapper {
    top: 50%;
    width: 58vw;
    height: 34vh;
  }
  .hero-lede {
    grid-column-start: 1;
    grid-column-end: 9;
    grid-row-start: 3;
    grid-row-end: 4;
    max-width: 18rem;
  }
  .hero-caption {
    grid-column-start: 9;
    grid-column-end: 13;
    grid-row-start: 3;
    grid-row-end: 4;
  }
  .hero-scroll {
    grid-column-start: 1;
    grid-column-end: 13;
    grid-row-start: 4;
    grid-row-end: 5;
    align-items: flex-start;
  }
  .hero-outline-word {
    top: 36%;
    right: -6vw;
    font-size: 18vw;
    opacity: 0.4;
  }
  .hero-side-left, .hero-side-right {
    display: none;
  }
}

/* Mobile portrait */
@media (max-width: 479px) {
  .hero-grid {
    padding-top: 8.5rem;
    padding-right: 6vw;
    padding-bottom: 4vh;
    padding-left: 6vw;
  }
  .hero-manifesto {
    font-size: 1.05rem;
  }
  .hero-title {
    font-size: 21vw;
  }
  .hero-image-wrapper {
    width: 64vw;
    height: 34vh;
  }
  .hero-lede {
    grid-column-start: 1;
    grid-column-end: 13;
    grid-row-start: 3;
    grid-row-end: 4;
  }
  .hero-caption {
    grid-column-start: 1;
    grid-column-end: 13;
    grid-row-start: 4;
    grid-row-end: 5;
    justify-self: start;
    align-items: flex-start;
    text-align: left;
  }
  .hero-scroll {
    grid-row-start: 5;
    grid-row-end: 6;
  }
  .hero-outline-word {
    font-size: 22vw;
  }
}

/* ============================================================
   PRIMITIVES GLOBALES — réutilisées de la section 02 à la 05
   Convention : primitive en classe de base, élément BEM en combo.
   ex. class="label-micro manifesto-index"  ·  "is-*" = état / variante
   ============================================================ */

/* Micro-capitales éditoriales — la signature typographique du site */
.label-micro {
  font-family: 'Inter', Helvetica, Arial, sans-serif;
  font-weight: 300;
  font-size: 0.6rem;
  line-height: 1.4;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--pierre, #8C8578);
}

/* Sur fond sombre : Pierre éclaircie et lettrage ouvert de +0.02em (compensation optique) */
.label-micro.is-on-dark {
  letter-spacing: 0.32em;
  color: var(--pierre-sur-encre, #A39C8F);
}

/* Filet — un vrai élément, jamais un pseudo-élément (non exposé par Webflow) */
.rule-line {
  width: 100%;
  height: 1px;
  background-color: var(--pierre, #8C8578);
  opacity: 0.2;
}

/* Numéral Bodoni Bronze — index de section, de projet, chiffre-clé */
.section-index {
  font-family: 'Bodoni Moda', Georgia, serif;
  font-weight: 400;
  font-size: 2.4rem;
  line-height: 1;
  color: var(--bronze, #A8875A);
  font-variation-settings: 'opsz' 40;
}

/* Masque de ligne pour reveal typographique : wrapper qui rogne + ligne intérieure
   qui glisse. clip, jamais hidden (hidden créerait un conteneur de défilement
   et figerait le view() de la ligne). La boîte déborde de 0.5em à gauche
   (guillemet suspendu) et de 0.14em en bas (jambages) : elle ne rogne rien. */
.mask-line {
  display: block;
  overflow: hidden;
  overflow: clip;
  margin-left: -0.5em;
  padding-left: 0.5em;
  padding-right: 0.12em;
  margin-right: -0.12em;
  padding-bottom: 0.14em;
  margin-bottom: -0.14em;
}

.mask-line-inner {
  display: block;
}

/* Guillemet ouvrant en débord : bord de texte OPTIQUEMENT aligné, pas mathématiquement */
.mask-line-inner.is-hang {
  text-indent: -0.42em;
}

/* Ligne accentuée — un seul fragment par bloc, jamais deux */
.mask-line-inner.is-accent {
  font-style: italic;
  color: var(--bronze, #A8875A);
}

/* Soulignement asymétrique : il se rétracte par la droite et se redessine
   par la gauche. background-image, jamais text-decoration ni ::after. */
.link-underline {
  text-decoration: none;
  background-image: linear-gradient(var(--bronze, #A8875A), var(--bronze, #A8875A));
  background-repeat: no-repeat;
  background-size: 100% 1px;
  background-position: left bottom;
  transition: background-size 700ms cubic-bezier(0.16, 1, 0.3, 1), color 700ms cubic-bezier(0.16, 1, 0.3, 1);
}

.link-underline:hover {
  color: var(--bronze, #A8875A);
  background-size: 0% 1px;
  background-position: right bottom;
}

/* ============================================================
   Nº 02 — MANIFESTE / STUDIO
   Grille 12 colonnes × 14 rangées sur 112vh : chaque élément est posé à une
   hauteur différente — AUCUNE ligne de base partagée.
   Moitié haute : colonnes 1→3 vides (le vide est dessiné et légendé).
   Moitié basse : la liste des métiers à gauche, face aux chiffres-clés.
   ============================================================ */

.section-manifesto {
  position: relative;
  min-height: 112vh;
  min-height: 112svh;
  background-color: var(--ivoire, #F3EEE6);
  /* clip (pas hidden) : ne crée pas de conteneur de défilement,
     indispensable pour animation-timeline: view() */
  overflow: hidden;
  overflow: clip;
}

.manifesto-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: repeat(14, 1fr);
  column-gap: 1.5vw;
  row-gap: 0;
  box-sizing: border-box;
  min-height: 112vh;
  min-height: 112svh;
  padding-top: 0;
  padding-right: 4vw;
  padding-bottom: 0;
  padding-left: 4vw;
}

/* ① Le filet qui dessine le vide — colonnes 1→3, s'arrête à la gouttière avant
   le manifeste. Décalage optique : aligné sur la LIGNE DE BASE de la 1re ligne. */
.manifesto-rule {
  grid-column-start: 1;
  grid-column-end: 4;
  grid-row-start: 4;
  grid-row-end: 5;
  align-self: start;
  margin-top: 3.75vw; /* mesuré : ligne de base de Bodoni Moda 4.2vw / lh 1.08 */
  opacity: 0.18;
  transform-origin: left center;
}

/* ② Le cartel du vide — roté, ancré en bas de la colonne 1 */
.manifesto-index-holder {
  grid-column-start: 1;
  grid-column-end: 2;
  grid-row-start: 9;
  grid-row-end: 15;
  position: relative;
}

.manifesto-index {
  position: absolute;
  left: 0;
  bottom: 0;
  white-space: nowrap;
  transform-origin: 0% 100%;
  transform: rotate(-90deg);
}

/* ④ Indentation étagée — 1er temps : grand / haut / gauche */
.manifesto-quote {
  grid-column-start: 4;
  grid-column-end: 10;
  grid-row-start: 4;
  grid-row-end: 8;
  align-self: start;
  margin: 0;
  font-family: 'Bodoni Moda', Georgia, serif;
  font-weight: 400;
  font-size: 4.2vw;
  line-height: 1.08;
  letter-spacing: -0.005em;
  color: var(--encre, #17150F);
  /* optique 84 : sérifs filiformes, correct à cette échelle */
  font-variation-settings: 'opsz' 84;
}

/* ④ 2e temps : petit / bas / droite — 2 colonnes plus loin, 3× plus petit */
.manifesto-body {
  grid-column-start: 6;
  grid-column-end: 10;
  grid-row-start: 8;
  grid-row-end: 12;
  align-self: start;
  max-width: 19rem;
  margin-top: 2vh;
}

.manifesto-paragraph {
  text-wrap: pretty;
  margin-top: 0;
  margin-right: 0;
  margin-bottom: 1.15rem;
  margin-left: 0;
  font-size: 0.85rem;
  line-height: 1.9;
  color: var(--encre, #17150F);
}

.manifesto-paragraph.is-last {
  margin-bottom: 0;
}

/* Signature des fondateurs : un tiret, un nom */
.manifesto-signature {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin-top: 1.6rem;
}

.manifesto-signature-rule {
  width: 2rem;
  height: 1px;
  opacity: 0.5;
}

/* Image portrait — déborde du padding jusqu'au bord droit */
.manifesto-visual {
  grid-column-start: 10;
  grid-column-end: 13;
  grid-row-start: 5;
  grid-row-end: 12;
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  margin-top: 0;
  margin-right: -4vw;
  margin-bottom: 0;
  margin-left: 0;
}

.manifesto-visual-frame {
  position: relative;
  flex: 1 1 auto;
  min-height: 44vh;
  overflow: hidden;
  overflow: clip;
  clip-path: inset(0 0 0 0);
}

.manifesto-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* La légende revient dans la marge de page, à droite */
.manifesto-visual-caption {
  padding-right: 4vw;
  text-align: right;
}

/* Les métiers — la moitié basse du vide accueille l'information */
.manifesto-services {
  grid-column-start: 2;
  grid-column-end: 5;
  grid-row-start: 9;
  grid-row-end: 13;
  align-self: start;
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}

.manifesto-services-list {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Filets en bordure native (pas de pseudo-élément) — Pierre à 25 % */
.manifesto-service {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding-top: 0.7rem;
  padding-right: 0;
  padding-bottom: 0.7rem;
  padding-left: 0;
  border-bottom: 1px solid rgba(140, 133, 120, 0.25);
}

.manifesto-service.is-first {
  border-top: 1px solid rgba(140, 133, 120, 0.25);
}

.manifesto-service-name {
  font-family: 'Bodoni Moda', Georgia, serif;
  font-weight: 400;
  font-size: 1.05rem;
  line-height: 1.2;
  color: var(--encre, #17150F);
  font-variation-settings: 'opsz' 24;
}

/* Chiffres-clés — face aux métiers, dernière rangée */
.manifesto-stats {
  grid-column-start: 6;
  grid-column-end: 13;
  grid-row-start: 13;
  grid-row-end: 15;
  align-self: start;
  display: flex;
  align-items: flex-end;
  gap: 3vw;
}

.manifesto-stat {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.manifesto-stat-figure {
  letter-spacing: -0.01em;
}

.manifesto-stat-label {
  white-space: nowrap;
}

/* Séparateurs verticaux de hauteurs DIFFÉRENTES — l'irrégularité qui signale la main */
.manifesto-stat-rule {
  flex: 0 0 auto;
  width: 1px;
  height: 5vh;
  opacity: 0.35;
}

.manifesto-stat-rule.is-short {
  height: 3.2vh;
}

/* ===== Nº 02 — Responsive (breakpoints Webflow) ===== */

/* Tablette : flux en 4 rangées auto — métiers et texte côte à côte */
@media (max-width: 991px) {
  .section-manifesto {
    min-height: 0;
  }
  .manifesto-grid {
    grid-template-rows: auto;
    min-height: 0;
    padding-top: 14vh;
    padding-right: 5vw;
    padding-bottom: 12vh;
    padding-left: 5vw;
  }
  .manifesto-rule {
    grid-column-end: 3;
    grid-row-start: 1;
    grid-row-end: 2;
    margin-top: 4.4vw;
  }
  .manifesto-quote {
    grid-column-start: 3;
    grid-column-end: 13;
    grid-row-start: 1;
    grid-row-end: 2;
    font-size: 6.2vw;
  }
  .manifesto-index-holder {
    grid-column-end: 3;
    grid-row-start: 2;
    grid-row-end: 4;
  }
  .manifesto-services {
    grid-column-start: 1;
    grid-column-end: 5;
    grid-row-start: 2;
    grid-row-end: 3;
    margin-top: 9vh;
  }
  .manifesto-body {
    grid-column-start: 6;
    grid-column-end: 12;
    grid-row-start: 2;
    grid-row-end: 3;
    max-width: 24rem;
    margin-top: 9vh;
  }
  .manifesto-visual {
    grid-column-start: 4;
    grid-column-end: 13;
    grid-row-start: 3;
    grid-row-end: 4;
    margin-top: 12vh;
    margin-right: -5vw;
  }
  .manifesto-visual-frame {
    min-height: 58vh;
  }
  .manifesto-visual-caption {
    padding-right: 5vw;
  }
  .manifesto-stats {
    grid-column-start: 1;
    grid-column-end: 13;
    grid-row-start: 4;
    grid-row-end: 5;
    gap: 5vw;
    margin-top: 12vh;
  }
}

/* Mobile paysage : le cartel se redresse et passe en tête, tout s'empile */
@media (max-width: 767px) {
  .manifesto-grid {
    padding-top: 14vh;
    padding-right: 6vw;
    padding-bottom: 12vh;
    padding-left: 6vw;
  }
  .manifesto-index-holder {
    grid-column-start: 1;
    grid-column-end: 8;
    grid-row-start: 1;
    grid-row-end: 2;
    position: static;
  }
  .manifesto-index {
    position: static;
    transform: none;
  }
  .manifesto-rule {
    grid-column-start: 8;
    grid-column-end: 13;
    grid-row-start: 1;
    grid-row-end: 2;
    align-self: center;
    margin-top: 0;
  }
  .manifesto-quote {
    grid-column-start: 1;
    grid-column-end: 13;
    grid-row-start: 2;
    grid-row-end: 3;
    font-size: 8.8vw;
    margin-top: 5vh;
  }
  .manifesto-body {
    grid-column-start: 2;
    grid-column-end: 13;
    grid-row-start: 3;
    grid-row-end: 4;
    max-width: 22rem;
    margin-top: 5vh;
  }
  .manifesto-services {
    grid-column-start: 2;
    grid-column-end: 13;
    grid-row-start: 4;
    grid-row-end: 5;
    max-width: 22rem;
    margin-top: 6vh;
  }
  .manifesto-visual {
    grid-column-start: 3;
    grid-column-end: 13;
    grid-row-start: 5;
    grid-row-end: 6;
    margin-top: 8vh;
    margin-right: -6vw;
  }
  .manifesto-visual-frame {
    min-height: 62vh;
  }
  .manifesto-visual-caption {
    padding-right: 6vw;
  }
  .manifesto-stats {
    grid-column-start: 1;
    grid-column-end: 13;
    grid-row-start: 6;
    grid-row-end: 7;
    gap: 6vw;
    margin-top: 8vh;
  }
  .section-index {
    font-size: 1.7rem;
  }
}

/* Mobile portrait : chiffres-clés empilés, séparateurs horizontaux de largeurs différentes */
@media (max-width: 479px) {
  .manifesto-grid {
    padding-top: 12vh;
    padding-right: 6vw;
    padding-bottom: 10vh;
    padding-left: 6vw;
  }
  .manifesto-quote {
    font-size: 11.5vw;
  }
  .manifesto-body, .manifesto-services {
    grid-column-start: 1;
    max-width: none;
  }
  .manifesto-visual {
    grid-column-start: 1;
  }
  .manifesto-visual-frame {
    min-height: 56vh;
  }
  .manifesto-stats {
    flex-direction: column;
    align-items: flex-start;
    gap: 1.8rem;
  }
  .manifesto-stat-rule {
    width: 4rem;
    height: 1px;
  }
  .manifesto-stat-rule.is-short {
    width: 2.4rem;
    height: 1px;
  }
}

/* ============================================================
   Nº 03 — PROJETS
   Colonne 1 = colonne vertébrale : les six index y sont tous posés.
   Images en colonnes 2→13. Rangées de 4vw : tout est proportionnel à la
   largeur, les hauteurs d'images (aspect-ratio) tombent dans leurs plages.
   Chorégraphie desktop (rangées du parent) :
     01  4:5   col 2→7    rg 1→13   titre haut-droite
     02  3:4   col 9→13   rg 7→17   titre bas-gauche (chevauche 01 : interligne)
     03  16:9  col 3→10   rg 19→27  titre bas-droite
     04  1:1   col 6→8    rg 27→31  MINUSCULE — légende plus grande que l'image
     05  4:5   col 8→13+  rg 32→46  DÉCHIRURE — débord plein bord droit
   Colonne 1 : le RAIL collant (compteur + jauge) remplace les index statiques ;
   le numéro de chaque projet est passé dans sa légende.
   ============================================================ */

.section-projects {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6vw;
  box-sizing: border-box;
  padding-top: 14vh;
  padding-right: 4vw;
  padding-bottom: 10vh;
  padding-left: 4vw;
  background-color: var(--ivoire, #F3EEE6);
  overflow: hidden;
  overflow: clip;
}

/* ----- En-tête ----- */
.projects-head {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: 1.5vw;
  row-gap: 3vh;
}

.projects-eyebrow {
  grid-column-start: 1;
  grid-column-end: 5;
  grid-row-start: 1;
  grid-row-end: 2;
}

.projects-title {
  grid-column-start: 2;
  grid-column-end: 10;
  grid-row-start: 2;
  grid-row-end: 3;
  margin: 0;
  font-family: 'Bodoni Moda', Georgia, serif;
  font-weight: 400;
  font-size: 9vw;
  line-height: 0.9;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--encre, #17150F);
  font-variation-settings: 'opsz' 96;
}

.projects-count {
  grid-column-start: 10;
  grid-column-end: 13;
  grid-row-start: 2;
  grid-row-end: 3;
  align-self: end;
  justify-self: end;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.5rem;
  text-align: right;
}

.projects-count-label {
  white-space: nowrap;
}

/* Chapô : l'information sous le titre, calée sur la colonne des images */
.projects-lede {
  text-wrap: pretty;
  grid-column-start: 2;
  grid-column-end: 7;
  grid-row-start: 3;
  grid-row-end: 4;
  max-width: 22rem;
  margin: 0;
  font-size: 0.85rem;
  line-height: 1.9;
  color: var(--encre, #17150F);
}

.projects-rule {
  grid-column-start: 1;
  grid-column-end: 13;
  grid-row-start: 4;
  grid-row-end: 5;
  opacity: 0.25;
  transform-origin: left center;
}

/* ----- Liste chorégraphiée ----- */
.projects-list {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: none;
  grid-auto-rows: 4vw;
  column-gap: 1.5vw;
  row-gap: 0;
  /* curseur croix Bronze 18px, point chaud au centre ; repli : crosshair */
  cursor: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18'%3E%3Cpath d='M9 0v18M0 9h18' stroke='%23A8875A' stroke-width='1'/%3E%3C/svg%3E") 9 9, crosshair;
}

/* Chaque projet = un Link Block pleine largeur, lui-même grille 12 colonnes
   (mêmes gouttières → ses colonnes coïncident avec celles du parent).
   pointer-events: none sur le bloc, auto sur ses pièces : les zones vides
   d'un projet ne déclenchent jamais son survol, même quand deux bandes se chevauchent. */
.project-item {
  grid-column-start: 1;
  grid-column-end: 13;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: 1fr;
  column-gap: 1.5vw;
  row-gap: 0;
  color: var(--encre, #17150F);
  text-decoration: none;
  cursor: inherit;
  pointer-events: none;
  transition: opacity 700ms cubic-bezier(0.16, 1, 0.3, 1), filter 700ms cubic-bezier(0.16, 1, 0.3, 1);
}

.project-item.is-p1 { grid-row-start: 1;  grid-row-end: 13; }
.project-item.is-p2 { grid-row-start: 7;  grid-row-end: 17; }
.project-item.is-p3 { grid-row-start: 18; grid-row-end: 26; }
.project-item.is-p4 { grid-row-start: 27; grid-row-end: 31; }
.project-item.is-p5 { grid-row-start: 32; grid-row-end: 46; }

/* ----- Le rail : la colonne vertébrale devient VIVANTE -----
   Il occupe la colonne 1 sur toute la hauteur de la liste ; son contenu
   est collant, donc toujours lisible. Jauge + compteur sont pilotés par
   la progression de la liste (bloc embed). pointer-events: none pour ne
   jamais intercepter le survol d'un projet. */
.projects-rail {
  grid-column-start: 1;
  grid-column-end: 2;
  grid-row-start: 1;
  grid-row-end: 47;
  position: relative;
  pointer-events: none;
}

.projects-rail-inner {
  position: sticky;
  top: 34vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.6vh;
}

/* La fenêtre du compteur : un seul chiffre visible à la fois */
.projects-rail-count {
  height: 1.8rem;
  overflow: hidden;
  overflow: clip;
}

.projects-rail-numbers {
  display: flex;
  flex-direction: column;
}

.projects-rail-number {
  display: block;
  height: 1.8rem;
  line-height: 1.8rem;
  font-size: 1.5rem;
}

/* Piste en Pierre translucide : l'opacité est dans la couleur, pas sur
   l'élément, sinon elle s'appliquerait aussi à la jauge enfant */
.projects-rail-track {
  position: relative;
  width: 1px;
  height: 20vh;
  background-color: rgba(140, 133, 120, 0.28);
}

.projects-rail-fill {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 100%;
  background-color: var(--bronze, #A8875A);
  transform-origin: center top;
}

.projects-rail-total {
  font-size: 0.6rem;
}

/* Le numéro rejoint sa légende */
.project-number {
  font-size: 1.1rem;
}

/* Cadre image : ratio imposé, deux calques superposés (vue + détail) */
.project-media {
  grid-row-start: 1;
  grid-row-end: 2;
  align-self: start;
  position: relative;
  overflow: hidden;
  overflow: clip;
  background-color: #E8E1D6;
  pointer-events: auto;
}

.project-media.is-p1 { grid-column-start: 2; grid-column-end: 7;  aspect-ratio: 4 / 5; }
.project-media.is-p2 { grid-column-start: 9; grid-column-end: 13; aspect-ratio: 3 / 4; }
.project-media.is-p3 { grid-column-start: 3; grid-column-end: 10; aspect-ratio: 16 / 9; }
.project-media.is-p4 { grid-column-start: 6; grid-column-end: 8;  aspect-ratio: 1 / 1; }
.project-media.is-p5 { grid-column-start: 8; grid-column-end: 13; aspect-ratio: 4 / 5; margin-right: -4vw; }

.project-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Le calque « détail » : masqué par le bas, balayé vers le haut au survol (règle dans l'embed) */
.project-image.is-detail {
  clip-path: inset(100% 0 0 0);
  transition: clip-path 900ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* Légendes dans la marge, en zigzag */
.project-caption {
  grid-row-start: 1;
  grid-row-end: 2;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  pointer-events: auto;
}

.project-caption.is-p1 { grid-column-start: 8;  grid-column-end: 12; align-self: start; }
.project-caption.is-p2 { grid-column-start: 2;  grid-column-end: 9;  align-self: end;    justify-self: end; align-items: flex-end; text-align: right; }
.project-caption.is-p3 { grid-column-start: 10; grid-column-end: 13; align-self: end; }
.project-caption.is-p4 { grid-column-start: 2;  grid-column-end: 6;  align-self: center; justify-self: end; align-items: flex-end; text-align: right; }
.project-caption.is-p5 { grid-column-start: 2;  grid-column-end: 7;  align-self: end;    justify-self: end; align-items: flex-end; text-align: right; }

.project-title {
  margin: 0;
  font-family: 'Bodoni Moda', Georgia, serif;
  font-weight: 400;
  font-size: 1.9vw;
  line-height: 1.1;
  letter-spacing: 0;
  color: var(--encre, #17150F);
  font-variation-settings: 'opsz' 48;
  transition: color 700ms cubic-bezier(0.16, 1, 0.3, 1), letter-spacing 700ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* Projet 04 : la légende est plus grande que l'image */
.project-title.is-oversized {
  font-size: 3.4vw;
  line-height: 1.02;
  font-variation-settings: 'opsz' 84;
}

.project-meta {
  white-space: nowrap;
}

/* Une phrase par projet : la matière, le geste, pas le marketing */
.project-desc {
  text-wrap: pretty;
  max-width: 17rem;
  margin-top: 0.2rem;
  margin-right: 0;
  margin-bottom: 0;
  margin-left: 0;
  font-size: 0.8rem;
  line-height: 1.75;
  color: var(--encre, #17150F);
}

/* ----- Pied : lien à soulignement asymétrique (se rétracte à droite, se redessine à gauche) ----- */
.projects-foot {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: 1.5vw;
  row-gap: 0;
}

.projects-more {
  grid-column-start: 2;
  grid-column-end: 6;
  justify-self: start;
  padding-bottom: 0.55rem;
}

/* ===== Nº 03 — Responsive (breakpoints Webflow) ===== */

/* Tablette : même chorégraphie, tailles de texte relevées */
@media (max-width: 991px) {
  .section-projects { padding-top: 12vh; padding-right: 5vw; padding-bottom: 10vh; padding-left: 5vw; }
  .projects-title { font-size: 10vw; }
  .projects-rail-number { font-size: 1.3rem; }
  .project-number { font-size: 1rem; }
  .project-title { font-size: 2.4vw; }
  .project-title.is-oversized { font-size: 4.2vw; }
  .project-media.is-p5 { margin-right: -5vw; }
}

/* Mobile paysage : la liste devient une colonne (les placements en rangées sont ignorés),
   chaque projet garde sa grille interne : index col 1, image col 2→13, légende dessous */
@media (max-width: 767px) {
  .section-projects { padding-top: 12vh; padding-right: 6vw; padding-bottom: 10vh; padding-left: 6vw; gap: 10vh; }
  .projects-head { row-gap: 2vh; }
  .projects-eyebrow { grid-column-end: 13; }
  .projects-title { grid-column-start: 1; grid-column-end: 13; font-size: 17vw; }
  .projects-count { grid-column-start: 1; grid-column-end: 13; grid-row-start: 3; grid-row-end: 4; justify-self: start; align-items: flex-start; text-align: left; }
  .projects-lede { grid-column-start: 1; grid-column-end: 13; grid-row-start: 4; grid-row-end: 5; }
  .projects-rule { grid-row-start: 5; grid-row-end: 6; }
  .projects-list { display: flex; flex-direction: column; gap: 10vh; }
  .projects-rail { display: none; }
  .project-item { grid-template-rows: auto auto; row-gap: 1.2rem; }
  .project-media.is-p1, .project-media.is-p2, .project-media.is-p3, .project-media.is-p5 { grid-column-start: 2; grid-column-end: 13; }
  .project-media.is-p4 { grid-column-start: 5; grid-column-end: 10; }
  .project-media.is-p5 { margin-right: -6vw; }
  .project-caption.is-p1, .project-caption.is-p2, .project-caption.is-p3, .project-caption.is-p4, .project-caption.is-p5 {
    grid-column-start: 2; grid-column-end: 13; grid-row-start: 2; grid-row-end: 3;
    align-self: start; justify-self: start; align-items: flex-start; text-align: left;
  }
  .project-title { font-size: 1.35rem; }
  .project-title.is-oversized { font-size: 2rem; }
  .projects-more { grid-column-start: 1; grid-column-end: 13; }
}

/* Mobile portrait */
@media (max-width: 479px) {
  .section-projects { gap: 8vh; }
  .projects-title { font-size: 19vw; }
  .projects-list { gap: 8vh; }
  .project-media.is-p4 { grid-column-start: 4; grid-column-end: 11; }
  .project-title { font-size: 1.25rem; }
  .project-title.is-oversized { font-size: 1.8rem; }
}

/* ============================================================
   Nº 04 — SAVOIR-FAIRE
   La seule section sombre : l'écrin. Un seuil ivoire de 10vh prolonge la 03
   puis l'Encre. Le Nº 04 est posé à cheval sur la frontière : un seul élément
   en mix-blend-mode: difference, il s'inverse sur chaque fond.
   Colonne gauche sticky (titre, propos) · colonne droite : quatre temps qui défilent.
   Compensation optique sur fond sombre : ivoire #EDE7DC, micro-caps +0.02em
   Bodoni en optique 96 (sérifs plus fins — l'axe wght s'arrête à 400).
   ============================================================ */

.section-craft {
  position: relative;
  background-color: var(--encre, #17150F);
  overflow: hidden;
  overflow: clip;
}

/* Seuil : la bande ivoire, et le numéro qui chevauche la frontière */
.craft-threshold {
  position: relative;
  height: 10vh;
  background-color: var(--ivoire, #F3EEE6);
}

.craft-number {
  position: absolute;
  left: 4vw;
  bottom: 0;
  z-index: 2;
  margin: 0;
  font-family: 'Bodoni Moda', Georgia, serif;
  font-weight: 400;
  font-size: 6vw;
  line-height: 1;
  white-space: nowrap;
  color: var(--ivoire, #F3EEE6);
  /* difference : Encre sur l'ivoire, ivoire sur l'Encre — automatiquement */
  mix-blend-mode: difference;
  transform: translateY(50%);
  font-variation-settings: 'opsz' 96;
}

.craft-body {
  position: relative;
  box-sizing: border-box;
  padding-top: 14vh;
  padding-right: 4vw;
  padding-bottom: 22vh;
  padding-left: 4vw;
}

/* align-items: start est indispensable : un élément sticky étiré sur toute
   la hauteur de la rangée n'aurait plus rien à coller */
.craft-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: 1.5vw;
  row-gap: 0;
  align-items: start;
}

/* ----- Colonne sticky ----- */
.craft-sticky {
  grid-column-start: 1;
  grid-column-end: 6;
  position: sticky;
  top: 12vh;
  display: flex;
  flex-direction: column;
  gap: 2.2vh;
  max-width: 24rem;
}

.craft-title {
  margin: 0;
  font-family: 'Bodoni Moda', Georgia, serif;
  font-weight: 400;
  font-size: 6.4vw;
  line-height: 0.95;
  letter-spacing: -0.01em;
  color: var(--ivoire-sur-encre, #EDE7DC);
  font-variation-settings: 'opsz' 96;
}

.craft-lede {
  text-wrap: pretty;
  margin-top: 1vh;
  margin-right: 0;
  margin-bottom: 0;
  margin-left: 0;
  font-size: 0.9rem;
  line-height: 1.85;
  color: var(--ivoire-sur-encre, #EDE7DC);
  opacity: 0.82;
}

.craft-sticky-foot {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin-top: 1vh;
}

.craft-sticky-rule {
  width: 2rem;
  height: 1px;
  background-color: var(--bronze, #A8875A);
  opacity: 0.7;
}

/* ----- Les quatre temps ----- */
.craft-list {
  grid-column-start: 6;
  grid-column-end: 13;
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Filets en bordure native, ivoire à 14 % */
.craft-step {
  position: relative;
  display: flex;
  gap: 2vw;
  padding-top: 6vh;
  padding-right: 0;
  padding-bottom: 6.5vh;
  padding-left: 0;
  border-top: 1px solid rgba(237, 231, 220, 0.14);
}

.craft-step.is-last {
  border-bottom: 1px solid rgba(237, 231, 220, 0.14);
}

/* Le filet Bronze qui se dessine de gauche à droite au survol (règle dans l'embed) */
.craft-step-rule {
  position: absolute;
  top: -1px;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: var(--bronze, #A8875A);
  opacity: 1;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 900ms cubic-bezier(0.16, 1, 0.3, 1);
}

.craft-step-index {
  flex: 0 0 4rem;
  padding-top: 0.3rem;
  font-size: 1.5rem;
  transition: transform 700ms cubic-bezier(0.16, 1, 0.3, 1);
}

.craft-step-content {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  max-width: 30rem;
}

.craft-step-title {
  margin: 0;
  font-family: 'Bodoni Moda', Georgia, serif;
  font-weight: 400;
  font-size: 2.2vw;
  line-height: 1.1;
  color: var(--ivoire-sur-encre, #EDE7DC);
  font-variation-settings: 'opsz' 72;
}

.craft-step-text {
  text-wrap: pretty;
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.85;
  color: var(--ivoire-sur-encre, #EDE7DC);
  opacity: 0.78;
}

/* Le numéral monumental : il tourne 01 → 04 au fil des temps (bloc embed).
   Une seule fenêtre, quatre chiffres empilés qui glissent par crans. */
.craft-figure {
  height: 7vw;
  margin-top: 1vh;
  overflow: hidden;
  overflow: clip;
}

.craft-figure-numbers {
  display: flex;
  flex-direction: column;
}

.craft-figure-number {
  display: block;
  height: 7vw;
  line-height: 7vw;
  font-family: 'Bodoni Moda', Georgia, serif;
  font-weight: 400;
  font-size: 6vw;
  letter-spacing: -0.01em;
  color: var(--bronze, #A8875A);
  font-variation-settings: 'opsz' 96;
}

/* ----- Le mot en contour, coupé par le bas ----- */
.craft-outline-word {
  position: absolute;
  right: -1vw;
  bottom: -0.16em;
  z-index: 1;
  font-family: 'Bodoni Moda', Georgia, serif;
  font-weight: 400;
  font-size: 16vw;
  line-height: 1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  color: transparent;
  opacity: 0.32;
  -webkit-text-stroke: 1px var(--bronze, #A8875A);
  font-variation-settings: 'opsz' 96;
  pointer-events: none;
}

/* ===== Nº 04 — Responsive (breakpoints Webflow) ===== */

/* Tablette : même structure, colonne sticky un peu plus large */
@media (max-width: 991px) {
  .craft-body { padding-top: 12vh; padding-right: 5vw; padding-bottom: 20vh; padding-left: 5vw; }
  .craft-number { left: 5vw; font-size: 8vw; }
  .craft-title { font-size: 7.5vw; }
  .craft-figure { height: 9vw; }
  .craft-figure-number { height: 9vw; line-height: 9vw; font-size: 7.6vw; }
  .craft-step-title { font-size: 2.8vw; }
  .craft-step { gap: 3vw; }
  .craft-outline-word { font-size: 20vw; }
}

/* Mobile paysage : la colonne se libère (plus de sticky), les temps s'empilent */
@media (max-width: 767px) {
  .craft-body { padding-top: 10vh; padding-right: 6vw; padding-bottom: 18vh; padding-left: 6vw; }
  .craft-number { left: 6vw; font-size: 11vw; }
  .craft-sticky {
    grid-column-start: 1;
    grid-column-end: 13;
    position: static;
    max-width: 30rem;
  }
  .craft-title { font-size: 14vw; }
  .craft-figure { height: 16vw; margin-top: 3vh; }
  .craft-figure-number { height: 16vw; line-height: 16vw; font-size: 14vw; }
  .craft-list {
    grid-column-start: 1;
    grid-column-end: 13;
    margin-top: 8vh;
  }
  .craft-step {
    flex-direction: column;
    gap: 1rem;
    padding-top: 5vh;
    padding-right: 0;
    padding-bottom: 5.5vh;
    padding-left: 0;
  }
  .craft-step-index { flex-basis: auto; padding-top: 0; }
  .craft-step-title { font-size: 1.6rem; }
  .craft-outline-word { font-size: 26vw; }
}

/* Mobile portrait */
@media (max-width: 479px) {
  .craft-title { font-size: 16vw; }
  .craft-step-title { font-size: 1.45rem; }
  .craft-outline-word { font-size: 30vw; }
}

/* ============================================================
   Nº 05 — INVITATION
   La clôture : on rejoue le duo monumental du Hero, mais le VIDE remplace
   l'image. Là où le Hero posait un visuel au centre, il ne reste qu'une
   ligne verticale Bronze de 12vh — la même que « Défiler », qui ne mène
   plus nulle part. Les deux lignes du mot portent deux optiques Bodoni
   opposées : opsz 96 (sérifs lames de rasoir) et opsz 14 (sérifs épais).
   ============================================================ */

.section-invitation {
  position: relative;
  min-height: 125vh;
  min-height: 125svh;
  background-color: var(--ivoire, #F3EEE6);
  overflow: hidden;
  overflow: clip;
}

.invitation-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: repeat(14, 1fr);
  column-gap: 1.5vw;
  row-gap: 0;
  box-sizing: border-box;
  min-height: 125vh;
  min-height: 125svh;
  padding-top: 6vh;
  padding-right: 4vw;
  padding-bottom: 5vh;
  padding-left: 4vw;
}

.invitation-rule {
  grid-column-start: 1;
  grid-column-end: 13;
  grid-row-start: 1;
  grid-row-end: 2;
  align-self: start;
  opacity: 0.25;
  transform-origin: left center;
}

.invitation-eyebrow {
  grid-column-start: 1;
  grid-column-end: 5;
  grid-row-start: 2;
  grid-row-end: 3;
  align-self: start;
}

/* Le propos utile, en haut à droite — à l'opposé du cartel */
.invitation-note {
  text-wrap: pretty;
  grid-column-start: 9;
  grid-column-end: 13;
  grid-row-start: 2;
  grid-row-end: 4;
  align-self: start;
  max-width: 19rem;
  margin: 0;
  font-size: 0.82rem;
  line-height: 1.85;
  color: var(--encre, #17150F);
}

/* ----- Le duo monumental ----- */
.invitation-title {
  grid-column-start: 2;
  grid-column-end: 12;
  grid-row-start: 4;
  grid-row-end: 8;
  align-self: center;
  display: flex;
  flex-direction: column;
  margin: 0;
  font-family: 'Bodoni Moda', Georgia, serif;
  font-weight: 400;
  color: var(--bronze, #A8875A);
}

.invitation-line-a {
  /* les capitales accentuées dépassent la boîte de ligne (line-height < 1) :
     le masque a besoin d'air en haut, sinon l'accent de « É » est rogné */
  padding-top: 0.2em;
  font-size: 12vw;
  line-height: 0.92;
  letter-spacing: -0.012em;
  text-transform: uppercase;
}

/* Décalée à droite, comme la 2e ligne du Hero — et protégée à droite,
   l'italique débordant de sa boîte (le masque rogne aussi en largeur) */
.invitation-line-b {
  align-self: flex-end;
  padding-right: 0.24em;
  margin-right: -0.24em;
  font-size: 7vw;
  line-height: 1.1;
}

/* Optique 96 : sérifs filiformes */
.invitation-word-a {
  font-variation-settings: 'opsz' 96;
}

/* Optique 14 : sérifs épais, chaleureux — même police, tempérament opposé */
.invitation-word-b {
  font-style: italic;
  color: var(--encre, #17150F);
  font-variation-settings: 'opsz' 14;
}

/* ----- Le centre exact : plus rien, qu'une ligne ----- */
.invitation-axis {
  grid-column-start: 1;
  grid-column-end: 13;
  /* sur DEUX rangées : une rangée 1fr qui doit contenir 12vh imposerait 12vh
     à toutes les autres (algorithme de dimensionnement fr) */
  grid-row-start: 8;
  grid-row-end: 10;
  justify-self: center;
  align-self: center;
}

.invitation-axis-line {
  width: 1px;
  height: 12vh;
  background-color: var(--bronze, #A8875A);
  transform-origin: center top;
}

/* ----- Les coordonnées ----- */
.invitation-reach {
  grid-column-start: 1;
  grid-column-end: 13;
  grid-row-start: 10;
  grid-row-end: 12;
  justify-self: center;
  align-self: start;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.6rem;
  text-align: center;
}

.invitation-mail {
  font-family: 'Bodoni Moda', Georgia, serif;
  font-weight: 400;
  font-size: 2.2vw;
  line-height: 1.2;
  color: var(--encre, #17150F);
  padding-bottom: 0.5rem;
  font-variation-settings: 'opsz' 40;
}

.invitation-phone {
  color: var(--pierre, #8C8578);
  text-decoration: none;
  transition: color 700ms cubic-bezier(0.16, 1, 0.3, 1);
}

.invitation-phone:hover {
  color: var(--bronze, #A8875A);
}

/* ----- Le pied, intégré à la section (pas de <footer> séparé) ----- */
.invitation-foot {
  grid-column-start: 1;
  grid-column-end: 13;
  grid-row-start: 13;
  grid-row-end: 15;
  align-self: end;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: 1.5vw;
  row-gap: 3.2vh;
}

/* Les trois villes reprennent littéralement le contenu de .hero-side-left */
.invitation-office {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.invitation-office.is-a { grid-column-start: 1; grid-column-end: 4; }
.invitation-office.is-b { grid-column-start: 4; grid-column-end: 7; }
.invitation-office.is-c { grid-column-start: 7; grid-column-end: 10; }

.invitation-city {
  color: var(--encre, #17150F);
}

.invitation-address {
  margin: 0;
  font-size: 0.78rem;
  line-height: 1.7;
  color: var(--pierre, #8C8578);
}

.invitation-links {
  grid-column-start: 10;
  grid-column-end: 13;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.7rem;
}

.invitation-link {
  color: var(--pierre, #8C8578);
  text-decoration: none;
  transition: color 700ms cubic-bezier(0.16, 1, 0.3, 1);
}

.invitation-link:hover {
  color: var(--bronze, #A8875A);
}

.invitation-baseline-rule {
  grid-column-start: 1;
  grid-column-end: 13;
  opacity: 0.2;
}

.invitation-baseline {
  grid-column-start: 1;
  grid-column-end: 13;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 2vw;
}

/* Referme le « Édition 2026 — Nº 01 » posé dans le Hero */
.invitation-edition {
  color: var(--bronze, #A8875A);
  white-space: nowrap;
}

/* ===== Nº 05 — Responsive (breakpoints Webflow) ===== */

@media (max-width: 991px) {
  .invitation-grid { padding-top: 6vh; padding-right: 5vw; padding-bottom: 5vh; padding-left: 5vw; }
  .invitation-note { grid-column-start: 8; max-width: 20rem; }
  .invitation-title { grid-column-start: 1; grid-column-end: 13; }
  .invitation-line-a { font-size: 14vw; }
  .invitation-line-b { font-size: 8.5vw; }
  .invitation-mail { font-size: 3.4vw; }
  .invitation-office.is-a { grid-column-end: 5; }
  .invitation-office.is-b { grid-column-start: 5; grid-column-end: 9; }
  .invitation-office.is-c { grid-column-start: 9; grid-column-end: 13; }
  .invitation-links { grid-column-start: 1; grid-column-end: 13; flex-direction: row; gap: 2.5vw; }
}

/* Mobile paysage : on quitte la grille 14 rangées pour un flux */
@media (max-width: 767px) {
  .section-invitation { min-height: 0; }
  .invitation-grid {
    grid-template-rows: auto;
    min-height: 0;
    padding-top: 6vh;
    padding-right: 6vw;
    padding-bottom: 8vh;
    padding-left: 6vw;
  }
  .invitation-rule { grid-row-start: 1; grid-row-end: 2; }
  .invitation-eyebrow { grid-column-end: 13; grid-row-start: 2; grid-row-end: 3; margin-top: 3vh; }
  .invitation-note { grid-column-start: 1; grid-column-end: 13; grid-row-start: 3; grid-row-end: 4; max-width: 24rem; margin-top: 3vh; }
  .invitation-title { grid-row-start: 4; grid-row-end: 5; margin-top: 10vh; }
  .invitation-line-a { font-size: 16vw; }
  .invitation-line-b { font-size: 11vw; }
  .invitation-axis { grid-row-start: 5; grid-row-end: 6; margin-top: 9vh; }
  .invitation-axis-line { height: 9vh; }
  .invitation-reach { grid-row-start: 6; grid-row-end: 7; margin-top: 7vh; }
  .invitation-mail { font-size: 1.5rem; }
  .invitation-foot { grid-row-start: 7; grid-row-end: 8; margin-top: 14vh; row-gap: 4vh; }
  .invitation-office.is-a { grid-column-start: 1; grid-column-end: 7; }
  .invitation-office.is-b { grid-column-start: 7; grid-column-end: 13; }
  .invitation-office.is-c { grid-column-start: 1; grid-column-end: 7; }
  .invitation-links { grid-column-start: 7; grid-column-end: 13; flex-direction: column; gap: 0.7rem; }
  .invitation-baseline { flex-direction: column; gap: 0.9rem; }
}

@media (max-width: 479px) {
  .invitation-line-a { font-size: 15vw; }
  .invitation-line-b { font-size: 10.5vw; }
  .invitation-mail { font-size: 1.25rem; }
  .invitation-office.is-a, .invitation-office.is-b, .invitation-office.is-c, .invitation-links { grid-column-start: 1; grid-column-end: 13; }
  .invitation-links { flex-direction: row; flex-wrap: wrap; row-gap: 1.2rem; column-gap: 2rem; }
}

/* ============================================================
   LISIBILITE TELEPHONE
   Sous 767px, le corps de texte remonte a ~15px et les micro-capitales
   a ~10px : les valeurs desktop, calibrees pour la distance de lecture
   d'un ecran, sont trop petites a trente centimetres d'un telephone.
   ============================================================ */
@media (max-width: 991px) {
  .project-desc, .invitation-address {
    font-size: 0.88rem;
  }
}

@media (max-width: 767px) {
  .label-micro {
    font-size: 0.64rem;
  }
  .hero-lede, .manifesto-paragraph, .projects-lede, .project-desc, .craft-lede, .craft-step-text, .invitation-note, .invitation-address {
    font-size: 0.95rem;
  }
}