/*
 * Page « L'Esprit » — chargée sur cette seule page.
 *
 * Une page de lecture : un hero, une maxime, quatre vis-à-vis texte/image, une
 * sortie. Le beige de l'atelier est le seul aplat — le pied de page reste le
 * seul temps sombre du site, et un deuxième aplat ici en aurait fait deux.
 *
 * Aucun surtitre rouge : les titres de bloc sont des h2, à l'encre et à la
 * fonte de titre, comme partout ailleurs.
 */

/* ---------- hero : les signatures ---------- *
 * Une bande, pas un grand hero : le fichier fait 2560x366 et « cover » n'a
 * pas de hauteur à donner au-delà. Poussée plus haut, l'image se recadre sur
 * une poignée de signatures et le motif se perd.
 *
 * Empilement en z-index positifs, comme le hero de l'accueil : image 1,
 * voile 2, texte 3. */
.ml-esprit-hero{position:relative;display:flex;align-items:center;justify-content:center;
  min-height:clamp(220px,28vw,360px);overflow:hidden;background:var(--fond-doux)}
.ml-esprit-hero__vue{position:absolute;inset:0;z-index:1;
  width:100%;height:100%;object-fit:cover}
/* Voile crème et texte à l'encre, comme le hero de l'accueil : la page reste
   d'un seul ton. Le dosage vient de la photographie — un papier très clair
   couvert d'un trait noir. À 0,62 le trait remonte à 167/255 : l'encre y tient
   7,4:1, bien au-delà du seuil, et les signatures restent lisibles comme
   signatures. Les alléger encore éteindrait le motif. */
.ml-esprit-hero::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:rgba(251,248,242,.62)}
/* Halo clair plutôt qu'ombre : il détache le titre des pleins du trait sans
   le salir. */
.ml-esprit-hero__texte{position:relative;z-index:3;width:100%;text-align:center;
  padding:clamp(34px,5vw,60px) var(--marge);
  text-shadow:0 1px 14px rgba(251,248,242,.8)}
.ml-esprit-hero h1{margin:0}
/* Le rapport largeur/hauteur suit le fichier de l'accolade (2008x106, soit
   18,94) aux deux bouts du clamp, sinon « contain » laisse du vide. */
.ml-esprit-hero .ml-accolade{width:clamp(240px,28vw,340px);max-width:78%;
  height:clamp(13px,1.5vw,18px);margin:clamp(14px,2vw,20px) auto 0}

/* ---------- ouverture ---------- *
 * La maxime prend le corps d'un titre, comme sur l'accueil : c'est la même
 * phrase, elle doit se lire pareil des deux côtés du lien. */
.ml-esprit-ouverture{text-align:center;padding:var(--air-fort) 0 var(--air)}
.ml-esprit-ouverture blockquote{margin:0;font-family:var(--display);font-style:italic;
  font-size:clamp(28px,4.2vw,50px);line-height:1.1;color:var(--texte-titre)}
.ml-esprit-ouverture .ml-accolade{margin:clamp(22px,3.2vw,32px) auto 0}
/* Bridée : sans mesure, l'énumération traverserait les 1200 px du bloc d'un
   seul trait, bien plus large que la maxime qu'elle prolonge. */
.ml-esprit-ouverture__pistes{max-width:840px;margin:clamp(22px,3.2vw,32px) auto 0;
  color:var(--texte-doux);font-size:clamp(17px,1.5vw,19px);line-height:1.6}

/* ---------- les vis-à-vis ---------- *
 * Deux colonnes égales, texte et image, centrées l'une sur l'autre. Égales et
 * non 5/7 : les blocs ne portent qu'un ou deux paragraphes, une colonne de
 * texte plus large les laisserait sur deux lignes sous une image écrasée. */
.ml-esprit-temps{padding:var(--air) 0}
/* L'aplat de l'atelier prend le pas fort — c'est un temps, pas une section de
   plus — et il va d'un bord à l'autre : la classe est posée sur la section,
   qui contient son propre .ml-wrap. */
.ml-esprit-temps--fond{background:var(--fond-doux);padding:var(--air-fort) 0;
  margin:var(--air) 0}
.ml-esprit-duo{display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(26px,3.6vw,52px);align-items:center}
/* L'image passe à gauche par « order » et non par un ordre de balisage
   inversé : le titre du bloc doit rester le premier élément lu, quel que soit
   le côté où la photographie se pose. */
.ml-esprit-duo--gauche .ml-esprit-duo__vue{order:-1}
.ml-esprit-duo__texte h2{margin:0 0 clamp(14px,1.8vw,20px)}
.ml-esprit-duo__texte p{margin:0 0 1em}
.ml-esprit-duo__texte p:last-child{margin-bottom:0}
/* Repli sans image : le texte reprend la mesure de lecture et se centre, faute
   de quoi il traverserait les 1200 px du bloc. */
.ml-esprit-duo--seul{max-width:66ch;margin-inline:auto}
/* Même format et même ombre que les cartes produit et la grille des
   collections, pour que toutes les images du site s'accordent. 3:2 et non
   4:3 : les vues d'ambiance sont des panoramiques — 1366x645 pour trois
   d'entre elles — et un cadrage plus carré leur mangerait la moitié de la
   largeur. */
.ml-esprit-duo__vue{display:block;overflow:hidden;background:var(--beige);
  box-shadow:0 1px 3px rgba(24,19,15,.07), 0 8px 22px rgba(24,19,15,.07)}
.ml-esprit-duo__vue img{width:100%;height:100%;aspect-ratio:3/2;object-fit:cover}

/* ---------- la sortie ---------- */
.ml-esprit-fin{text-align:center;padding:var(--air-fort) 0}
.ml-esprit-fin__mot{margin:0;font-family:var(--display);font-style:italic;
  font-size:clamp(24px,3.2vw,40px);line-height:1.15;color:var(--texte-titre)}
.ml-esprit-fin .ml-accolade{margin:clamp(20px,2.8vw,28px) auto 0}
.ml-esprit-fin__cta{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;
  margin-top:clamp(26px,3.4vw,38px)}

@media (max-width:900px){
  /* Empilés, tous les blocs prennent le même ordre : l'image d'abord, le texte
     dessous. L'alternance n'a plus de sens sur une colonne, et une image
     tantôt au-dessus tantôt en dessous se lirait comme une irrégularité. */
  .ml-esprit-duo{grid-template-columns:1fr;gap:clamp(20px,3vw,26px);
    max-width:620px;margin-inline:auto}
  .ml-esprit-duo__vue,.ml-esprit-duo--gauche .ml-esprit-duo__vue{order:-1}
}
@media (max-width:640px){
  .ml-esprit-ouverture__pistes{max-width:44ch}
  .ml-esprit-duo--seul{max-width:none}
}