/*
 * Page d'accueil — chargée uniquement sur la home.
 *
 * Trois largeurs, une règle. Les grilles illustrées prennent toute la laisse,
 * les grilles de texte se resserrent, la prose garde une mesure lisible.
 * Toute nouvelle section doit se ranger dans l'une des trois.
 */
:root{
  --ml-large:1280px;   /* grilles illustrées : univers, catalogue */
  --ml-moyen:980px;    /* grilles de texte : étapes */
  --ml-prose:720px;    /* texte suivi : énoncé, chapô */
}

/* ---------- hero ---------- *
 * Le bloc se dimensionne sur son texte, avec une hauteur minimale — et non
 * l'inverse. Posé en absolu sur une image de hauteur fixe, le paragraphe
 * débordait du cadre dès que la fenêtre était étroite : il se retrouvait
 * coupé net au bas de la photo.
 *
 * Le dégradé ne monte que du bas ; un voile uniforme éteindrait la photo sur
 * toute sa hauteur. La zone où le texte se pose culmine à 163/255 de
 * luminance, assez claire pour exiger un fond soutenu — d'où 0,9 d'opacité en
 * pied de dégradé, et une ombre de texte en filet de sécurité pour les
 * clichés qui viendront ensuite. */
/* L'empilement est en z-index POSITIFS, et il faut qu'il le reste : photos 1,
   voile 2, texte 3, puces 4. Un premier jet plaçait les photos et le voile en
   négatif sous un « isolation:isolate » — le voile éteignait alors la
   photographie même à 3 % d'opacité, au lieu de s'y superposer. */
.ml-hero-photo{position:relative;display:flex;align-items:center;
  min-height:min(84vh,760px);overflow:hidden}
/* Les vues se superposent et se relaient par fondu. Une seule porte un
   texte alternatif : les autres sont décoratives, un lecteur d'écran n'a pas
   à entendre trois descriptions pour un même bandeau. */
.ml-hero__vues{position:absolute;inset:0;z-index:1}
.ml-hero__vue{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity 1.1s ease}
.ml-hero__vue.est-visible{opacity:1}
/* Voile clair et texte sombre, l'inverse du parti pris précédent : le hero
   rejoint ainsi le crème du reste de la page au lieu d'y ouvrir un trou navy.
   Le dosage est calculé, non deviné : pour du noir (#000), 12 % de voile
   suffisent déjà à passer 4,5:1 sur le plus sombre des trois clichés. Le
   voile est donc plus fort que nécessaire — il tient le contraste quel que
   soit le cliché qu'on ajoutera plus tard, sans avoir à le remesurer — mais
   il s'efface vers le haut pour que la photographie reste lisible. C'est le crème de la palette,
   pas un blanc pur, qui grisaillerait. */
.ml-hero-photo::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:2;
  background:linear-gradient(to top, rgba(251,248,242,.82) 0%, rgba(251,248,242,.68) 40%,
    rgba(251,248,242,.48) 66%, rgba(251,248,242,.24) 86%, rgba(251,248,242,.06) 100%)}
/* Rembourrage symétrique, et le bloc centré dans le hero. Un premier jet
   posait 180px en haut et 56px en bas : le texte était collé au pied de la
   photographie, là où le voile était le plus fort à l'époque du parti sombre.
   Depuis, le bloc a grandi — blason, accolade, sept lignes — et ces 180px ne
   faisaient plus qu'un trou de crème sous l'en-tête. */
.ml-hero-photo__texte{position:relative;z-index:3;width:100%;
  padding:clamp(40px,6vw,72px) var(--marge);text-align:center;
  /* Halo clair plutôt qu'ombre : il détache le texte des zones les plus
     chargées de la photographie sans le salir. */
  text-shadow:0 1px 16px rgba(251,248,242,.75)}
/* Blason de la maison — c'est le h1, d'où la remise à zéro des marges et du
   corps que le socle donne aux titres.
 *
 * 250px et pas plus : le fichier source fait 500px de côté, et un écran à
 * forte densité en demande le double de ce qu'il affiche. À 250 on est
 * exactement à 1,0x ; au-delà le trait mollit. Pour aller plus grand — un
 * vrai quart de la mesure ferait 300px — il faut d'abord un fichier de
 * 600px ou plus, ou un SVG. Le plus grand des blasons en médiathèque fait
 * 500px, vérifié. */
.ml-hero-photo__marque{display:block;margin:0 0 clamp(14px,2vw,20px);font-size:0;line-height:0}
.ml-hero-photo__blason{display:block;margin:0 auto;height:auto;
  width:clamp(130px,22vw,250px)}
/* L'accolade du hero est plus large que celle du socle : c'est ici qu'elle
   signe, entre le blason et le texte, et 300px s'y perdaient. Le rapport
   largeur/hauteur suit celui du fichier (2008x106, soit 18,94) aux deux bouts
   du clamp — sinon « contain » laisse du vide et l'accolade flotte. Au plus
   large, 460px affichés pour 2008 en source : net sur écran retina. */
.ml-hero-photo__texte .ml-accolade{width:clamp(280px,34vw,460px);max-width:78%;
  height:clamp(15px,1.8vw,24px);margin:clamp(16px,2.2vw,24px) auto clamp(20px,2.8vw,30px)}
/* Le concept, en trois paragraphes — un seul texte, donc un seul traitement.
   Un premier jet mettait le paragraphe d'ouverture en plus grand corps et en
   noir plus profond : à l'écran cela ne se lit pas comme une hiérarchie mais
   comme un changement de police. Même corps, même teinte, même mesure ; c'est
   l'espace entre les paragraphes qui les sépare.

   La mesure est large — 78 caractères, au-delà de la fourchette de confort
   habituelle. C'est délibéré : à 62 caractères chaque paragraphe tombait sur
   trois lignes centrées et le bloc se lisait comme éparpillé. Élargir le
   rassemble, et sur un texte centré de trois paragraphes courts le gain de
   cohésion vaut mieux que les quelques caractères de trop. */
/* Graisse 500, et non un gras synthétique : la fonte est chargée en 500
   normal, le navigateur n'a donc rien à épaissir lui-même. Sur une photo,
   même voilée, le 400 paraît plus maigre qu'il ne l'est. */
.ml-hero-photo__texte p{margin:0;color:var(--texte);
  font-weight:500;font-size:clamp(17px,1.6vw,21px);line-height:1.45}
/* Le texte coule d'un seul tenant : les trois paragraphes restent trois
   éléments dans le balisage — c'est la structure du texte fourni, et elle
   doit rester réversible — mais ils s'enchaînent à la ligne au lieu de
   repartir chacun sur la sienne. La mesure passe donc au conteneur : sur un
   élément en ligne, max-width ne s'applique pas. Les espaces entre les
   phrases viennent des retours à la ligne du balisage. */
.ml-hero-photo__concept{max-width:min(78ch,900px);margin:0 auto}
.ml-hero-photo__concept p{display:inline}
.ml-hero-photo__cta{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;
  margin-top:clamp(26px,3.4vw,38px)}
.ml-hero-photo__cta .ml-btn{font-size:clamp(18px,1.7vw,21px);padding:15px 34px;text-shadow:none}

/* Puces de navigation. Elles servent aussi de commande d'arrêt : toute
   interaction fige le défilement, ce qu'exige un contenu qui bouge seul. */
.ml-hero__puces{position:absolute;left:0;right:0;bottom:clamp(14px,2vw,20px);z-index:4;
  display:flex;gap:10px;justify-content:center}
.ml-hero__puce{width:34px;height:3px;padding:0;border:0;cursor:pointer;
  background:rgba(24,19,15,.22);transition:background .3s ease}
.ml-hero__puce:hover{background:rgba(24,19,15,.45)}
.ml-hero__puce.est-active{background:var(--navy)}
.ml-hero__puce:focus-visible{outline:2px solid var(--navy);outline-offset:4px}
@media (prefers-reduced-motion:reduce){ .ml-hero__vue{transition:none} }

/* ---------- chapeaux de section ---------- */
.ml-chapeau{display:flex;align-items:baseline;justify-content:space-between;gap:20px;
  flex-wrap:wrap;border-bottom:1px solid var(--line);padding-bottom:16px;
  margin-bottom:clamp(28px,4vw,46px)}
.ml-chapeau h2{margin:0}
.ml-chapeau a{font-family:var(--serif);font-size:14px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);white-space:nowrap}
.ml-chapeau a:hover{color:var(--navy)}

/* ---------- les quatre univers ---------- */
.ml-univers__grille{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(20px,2.5vw,30px)}
.ml-univers__item{display:block;color:inherit}
/* 4:3 et non 3:4. Les visuels d'univers sont des vues d'ambiance en paysage —
   768x512 à la source. Le portrait qu'on leur imposait n'en montrait plus que
   la moitié de la largeur, ce qui donnait des cadrages arbitraires plutôt
   qu'une impression de mauvaise définition. C'est aussi le format des cartes
   produit, donc la grille entière s'accorde. */
.ml-univers__vue{display:block;aspect-ratio:4/3;overflow:hidden;background:var(--beige);
  box-shadow:0 1px 3px rgba(24,19,15,.07), 0 8px 22px rgba(24,19,15,.07)}
.ml-univers__vue img{width:100%;height:100%;object-fit:cover;transition:transform .7s ease}
.ml-univers__item:hover .ml-univers__vue img{transform:scale(1.04)}
.ml-univers__item h3{font-size:clamp(20px,2vw,25px);margin:16px 0 0}

/* ---------- l'esprit ---------- *
 * Entre le pavé à deux colonnes, qui écrasait, et la citation en corps de
 * texte, qui s'effaçait : la citation prend la taille d'un titre et l'accolade
 * de marque l'annonce. Rien à porter que de la typographie, mais elle porte.
 * Le portrait du fondateur reste sur la page « L'Esprit », en grand. */
/* Pas de mesure propre : le bloc s'étend jusqu'aux bords de .ml-wrap, faute de
   quoi la maxime passait à la ligne. Elle doit tenir d'un trait — c'est une
   phrase, pas un paragraphe. */
.ml-esprit-bloc{text-align:center;padding:var(--air-fort) 0;margin:0 auto}
.ml-esprit-bloc .ml-accolade{margin:clamp(24px,3.4vw,34px) auto 0}
.ml-esprit-bloc blockquote{margin:0;font-family:var(--display);font-style:italic;
  font-size:clamp(28px,4.4vw,54px);line-height:1.1;color:var(--navy)}
/* La ligne sous la maxime n'est plus une attribution de 52 caractères mais une
   phrase de 140 : sans mesure, elle traverserait les 1200 px du bloc d'un seul
   trait, bien plus large que la maxime qu'elle prolonge. Bridée, elle tient en
   deux lignes centrées sous elle. */
.ml-esprit-bloc__pistes{max-width:840px;margin:clamp(24px,3.5vw,36px) auto 0;
  color:var(--muted);font-size:clamp(17px,1.5vw,19px);line-height:1.6}
.ml-esprit-bloc .ml-filaire{margin-top:clamp(28px,4vw,40px)}

/* ---------- boutons filaires ---------- */
.ml-filaire{display:inline-block;width:max-content;max-width:100%;font-family:var(--serif);
  border:1px solid var(--navy);color:var(--navy);padding:11px 26px;
  font-size:13px;letter-spacing:.18em;text-transform:uppercase;transition:.2s}
.ml-filaire:hover{background:var(--navy);color:var(--cream)}
.ml-filaire--clair{border-color:rgba(213,206,192,.55);color:var(--sur-navy)}
.ml-filaire--clair:hover{background:var(--sur-navy);color:var(--navy)}

/* ---------- la presse ---------- *
 * Une retombée est une distinction, pas une note de bas de page : aplat navy
 * pleine largeur. Colonnes calées sur leur contenu et paire centrée, sans quoi
 * la colonne de texte occuperait toute la largeur restante pour un texte qui
 * s'arrête à 46 caractères. */
/* Aucune marge : le rembourrage de la section suivante suffit, et deux
   espacements bout à bout creusaient un trou. */
.ml-presse{background:var(--navy);color:var(--sur-navy);padding:var(--air-fort) 0}
/* Même laisse que les autres blocs : la colonne d'image est calée, le texte
   prend le reste. Sa mesure monte en conséquence, sinon le vide revient. */
/* Aucune image. Le scan de la page de magazine était un document, pas une
   photographie : portrait dans une page toute en paysage, et illisible à la
   taille où il tenait. Le bloc n'en a pas besoin — le nom du média en grand,
   l'accolade et le titre de l'article suffisent à faire la preuve. Le PDF
   reste accessible par le lien, en grand, là où on peut vraiment le lire. */
.ml-presse__texte{max-width:60ch;margin-inline:auto;text-align:center}
/* Sur fond navy un doré clair est plus lisible qu'un doré foncé : 8,7:1 contre
   6,4:1, et un dessin qui ne s'amaigrit pas à petit corps. */
/* Le kicker passe au crème et non au doré : sur l'aplat noir le doré tient
   9,2:1, mais il faisait la seule note de couleur d'un bloc autrement en noir
   et blanc. Le crème donne 17,4:1 et rejoint le reste du bloc. */
.ml-presse .ml-kicker{color:var(--cream);font-size:14px;letter-spacing:.2em;margin-bottom:16px}
.ml-presse .ml-accolade{margin:0 auto 22px;width:230px;max-width:60%}
.ml-presse__texte h2{font-family:var(--display);font-style:italic;color:var(--sur-navy-vif);
  font-size:clamp(30px,4.4vw,54px);line-height:1.06;margin:0 0 14px}
.ml-presse__texte p{margin:0 auto 28px;color:var(--sur-navy);font-size:clamp(18px,1.8vw,21px);line-height:1.55}
.ml-presse .ml-filaire{margin-inline:auto;text-align:center}
/* Bande des médias : des cases de même taille, logo centré ou nom en toutes
   lettres. Les logos sont blanchis par un filtre pour tenir sur le navy sans
   qu'il faille en fournir une version claire de chacun. */
/* Défilement horizontal à accrochage plutôt qu'un retour à la ligne : à quatre
   cases pour trois par rangée, le passage à la ligne laissait une case seule et
   décentrée. Ici les cases restent alignées quel qu'en soit le nombre, et se
   font défiler dès qu'elles débordent — un carrousel sans JavaScript, qui
   répond au clavier, à la molette et au doigt. */
.ml-medias{list-style:none;margin:clamp(34px,4.5vw,52px) 0 0;padding:0 0 10px;
  display:flex;gap:clamp(14px,2vw,26px);overflow-x:auto;
  justify-content:safe center;scroll-snap-type:x proximity;
  scrollbar-width:thin;scrollbar-color:rgba(213,206,192,.35) transparent}
.ml-medias::-webkit-scrollbar{height:4px}
.ml-medias::-webkit-scrollbar-thumb{background:rgba(213,206,192,.35);border-radius:2px}
.ml-medias__item{flex:0 0 auto;scroll-snap-align:center;
  display:flex;align-items:center;justify-content:center;
  width:clamp(120px,14vw,164px);height:clamp(70px,8vw,92px);padding:12px;
  border:1px solid rgba(213,206,192,.28);transition:border-color .25s ease}
.ml-medias__item:hover{border-color:var(--gold)}
.ml-medias__item img{max-width:100%;max-height:100%;width:auto;height:auto;
  filter:brightness(0) invert(1);opacity:.85}
.ml-medias__item span{font-family:var(--display);font-size:15px;line-height:1.2;
  color:var(--sur-navy);text-align:center}
/* Carrousel : la piste défile toute seule, les boutons ne sont qu'un confort
   pour qui n'a ni écran tactile ni réflexe de défilement horizontal. Ils
   n'apparaissent que si la bande déborde vraiment. */
.ml-carrousel{display:flex;align-items:center;gap:10px;margin-top:clamp(34px,4.5vw,52px)}
.ml-carrousel .ml-medias{margin:0;flex:1 1 auto;min-width:0}
.ml-carrousel__bouton{display:none;flex:none;width:42px;height:42px;padding:0;cursor:pointer;
  background:transparent;border:1px solid rgba(213,206,192,.4);color:var(--sur-navy);
  align-items:center;justify-content:center;transition:.2s}
.ml-carrousel--actif .ml-carrousel__bouton{display:flex}
.ml-carrousel__bouton svg{width:20px;height:20px;fill:none;stroke:currentColor;
  stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.ml-carrousel__bouton:hover:not(:disabled){border-color:var(--gold);color:var(--sur-navy-vif)}
.ml-carrousel__bouton:disabled{opacity:.3;cursor:default}
.ml-presse a:focus-visible,.ml-carrousel__bouton:focus-visible{outline:2px solid var(--gold);outline-offset:2px}

/* ---------- chez nos revendeurs ---------- *
 * Modèle « cas client » : une photo en situation, un lieu, un titre, une
 * phrase. Même format 4:3 et même ombre que les cartes produit, pour que les
 * deux grilles s'accordent. */
.ml-realis__grille{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(22px,3vw,34px)}
.ml-realis__vue{display:block;aspect-ratio:4/3;overflow:hidden;background:var(--beige);
  box-shadow:0 1px 3px rgba(24,19,15,.07), 0 8px 22px rgba(24,19,15,.07)}
.ml-realis__vue img{width:100%;height:100%;object-fit:cover}
.ml-realis__lieu{display:block;margin:14px 0 5px;font-size:13.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--gold-texte)}
.ml-realis__item h3{font-size:clamp(19px,1.8vw,22px);margin:0 0 6px}
.ml-realis__item p{margin:0;color:var(--muted);font-size:clamp(17px,1.4vw,18.5px);line-height:1.55}

/* ---------- ouvrir un compte ---------- */
.ml-revendeur{background:var(--beige);text-align:center;padding:var(--air-fort) 0}
.ml-revendeur h2{margin-bottom:16px}
.ml-revendeur__chapo{color:var(--muted);max-width:var(--ml-prose);
  margin:0 auto clamp(38px,6vw,60px);font-size:clamp(19px,1.7vw,22px)}
.ml-etapes{list-style:none;padding:0;display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(26px,4vw,46px);text-align:left;max-width:var(--ml-moyen);
  margin:0 auto clamp(38px,5vw,54px)}
.ml-etapes li{display:grid;gap:10px;align-content:start;padding-top:22px;border-top:1px solid var(--gold)}
.ml-etapes__tete{display:flex;align-items:center;gap:12px}
.ml-etapes__ico{flex:none;width:30px;height:30px;stroke:var(--navy);stroke-width:1.4;
  fill:none;stroke-linecap:round;stroke-linejoin:round}
.ml-etapes__rang{font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-texte)}
/* Navy, comme tous les titres du site. Ce sont des span et non des h — la
   liste porte déjà sa hiérarchie par le ol — donc ils n'héritaient pas de la
   couleur des titres et sortaient en noir d'encre. */
.ml-etapes__titre{display:block;font-weight:500;font-size:clamp(18px,1.7vw,20.5px);
  line-height:1.3;color:var(--texte-titre)}
.ml-etapes__mot{display:block;color:var(--muted);font-size:clamp(17px,1.5vw,19px);line-height:1.6}
.ml-revendeur__note{margin:20px 0 0;font-size:13px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted)}

/* ---------- responsive ---------- */
@media (max-width:1100px){
  .ml-products{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:900px){
  .ml-realis__grille{grid-template-columns:1fr;max-width:560px;margin-inline:auto}
  .ml-univers__grille{grid-template-columns:repeat(2,1fr)}
  /* Empilées, les étapes reprennent la mesure de la prose : à part, elles ne
     partageraient de bord ni avec le chapô, ni avec le bouton. */
  .ml-etapes{grid-template-columns:1fr;max-width:var(--ml-prose);gap:30px}
}
@media (max-width:640px){
  /* Sur téléphone le texte tient moins de place que la hauteur minimale
     imposée : le bas du bloc devenait du navy plat, lu comme un trou. La
     section épouse donc son contenu, et le texte remonte contre la photo. */
  .ml-hero-photo{min-height:auto}
  .ml-hero-photo__texte{padding-top:clamp(64px,26vw,130px)}
  .ml-hero-photo__concept{max-width:44ch}
  .ml-products{grid-template-columns:repeat(2,1fr)}
  .ml-presse__texte{max-width:40ch}
  .ml-presse .ml-filaire{letter-spacing:.12em;padding:12px 24px}
}
@media (max-width:480px){
  /* Une seule colonne : la photographie porte tout ce parti pris, deux
     vignettes côte à côte sur 380 px ne montrent plus rien. */
  .ml-products{grid-template-columns:1fr;gap:38px}
  .ml-univers__grille{grid-template-columns:1fr;gap:34px}
  .ml-univers__vue{aspect-ratio:16/10}
}

/* ---------- maison&objet ---------- *
 * Aucun fond propre : le bloc reprend le crème de la page et la largeur du
 * reste, comme « Chez nos revendeurs ». Un aplat beige en faisait un temps
 * fort qu'il n'est pas, et un troisième fond sur la même page.
 *
 * L'image est l'affiche du salon, en portrait (905x1280). Sa colonne est donc
 * bornée à 340px et non plus donnée en moitié de mesure : à 548px de large,
 * une image de ce rapport monterait à 775px de haut et ferait de l'annonce le
 * plus grand bloc de la page. À 340px elle en fait 481, soit la hauteur d'un
 * bloc ordinaire. Ne pas élargir sans regarder ce que ça fait à la hauteur.
 *
 * Le bloc tombe de lui-même après le 14 septembre 2026 — voir front-page.php. */
.ml-salon__grille{display:grid;grid-template-columns:minmax(0,340px) 1fr;
  gap:clamp(24px,3.4vw,44px);align-items:center}
.ml-salon__vue{display:block;overflow:hidden;background:var(--beige)}
.ml-salon__vue img{display:block;width:100%;height:auto;aspect-ratio:905/1280}
.ml-salon__dates{font-family:var(--display);font-size:clamp(21px,2.2vw,28px);
  line-height:1.2;color:var(--texte-titre);margin:0 0 clamp(20px,2.6vw,28px)}
/* Chaque repère est une paire intitulé/valeur ; le filet du haut les sépare
   sans peser autant qu'un tableau. */
.ml-salon__reperes{margin:0;display:grid;gap:14px}
.ml-salon__reperes > div{border-top:1px solid var(--filet);padding-top:12px}
.ml-salon__reperes dt{font-size:12.5px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--texte-doux);margin-bottom:4px}
.ml-salon__reperes dd{margin:0;font-size:clamp(17px,1.4vw,19px);color:var(--texte)}

@media(max-width:900px){
  /* L'affiche passe au-dessus : à cette largeur, deux colonnes la rendraient
     illisible. Elle garde sa borne de 340px et se centre — étalée sur les
     560px de la colonne, elle ferait à elle seule un écran de haut. */
  .ml-salon__grille{grid-template-columns:1fr;gap:24px;max-width:560px;margin-inline:auto}
  .ml-salon__vue{max-width:340px;margin-inline:auto}
}