/* ============================================================
   Maître Lunetier — patch animations (2026-09)
   À charger APRÈS assets/style.<hash>.css :
   <link rel="stylesheet" href="/assets/ml-patch.css">
   Objectif : supprimer les zones vides au scroll rapide.
   Aucune suppression d'animation — seulement des durées utiles.
   Réversible : supprimer ce fichier restaure l'état actuel.
   ============================================================ */

/* 1. Écran de chargement : 2,1 s cumulés -> 0,75 s */
.loader{ transition: clip-path .5s var(--ease-io) 0s; }
.loader img{ animation-duration: .45s; animation-delay: .05s; }
.loader__bar{ animation-duration: .5s; }

/* 2. Révélations au scroll : 1 s -> .5 s, course réduite (34px -> 16px) */
[data-reveal]{
  transform: translateY(16px);
  transition: opacity .5s var(--ease), transform .5s var(--ease);
}

/* 3. Volets (images) : 1,1 s -> .6 s */
[data-wipe]{ transition: clip-path .6s var(--ease-io); }

/* 4. Titres lettre par lettre : .9 s -> .55 s */
.split .w>span{ transition: transform .55s var(--ease); }

/* 5. Hero : titre 1,2 s -> .7 s, ligne du bas 1 s+.5 s -> .6 s+.25 s */
.hero__title .line>span{ transition: transform .7s var(--ease); }
.hero__row{ transition: opacity .6s var(--ease) .25s, transform .6s var(--ease) .25s; }

/* 6. Cascades : voir assets/ml-patch.js — les retards sont posés en inline
      par le JS du site, seul du JS peut les plafonner. */

/* 7. Accordéon FAQ : .6 s -> .35 s */
.acc__panel{ transition: grid-template-rows .35s var(--ease); }

/* 8. Sécurité mobile : sous 900px, tout est révélé plus tôt et plus court */
@media (max-width: 900px){
  [data-reveal]{ transform: translateY(10px); transition-duration: .35s; }
  [data-wipe]{ transition-duration: .45s; }
  .hero__title .line>span{ transition-duration: .55s; }
}

/* ============================================================
   Page d'accueil — raccourcir le défilement (2026-09)
   Aucune suppression de contenu ici : uniquement des hauteurs
   et des espacements. Supprimer ce bloc restaure l'état d'avant.
   ============================================================ */

/* 1. Respiration verticale : les sections faisaient jusqu'à 170 px
      de marge haute ET basse, soit près d'un écran de vide cumulé. */
.section, .process, .brands, .intro{ padding-block: clamp(44px,5.5vw,86px); }
.reviews, .promises, .stores{ padding-block: clamp(52px,6.5vw,96px); }
.faq{ padding-bottom: clamp(52px,6.5vw,96px); }
.manifesto{ padding-block: clamp(44px,5.5vw,86px); margin-top: clamp(28px,3.5vw,54px); }
.intro{ padding-bottom: clamp(24px,3vw,44px); }
.section__head, .process__head, .stores__head, .brands__head{ margin-bottom: clamp(26px,3.2vw,44px); }

/* 2. Mosaïque : les tuiles occupaient deux rangées chacune,
      soit ~350 px par tuile sur téléphone. */
.bento{ grid-auto-rows: clamp(130px,13vw,200px); }
@media (max-width: 700px){
  .bento{ grid-auto-rows: 150px; gap: 10px; }
  .t-a, .t-b, .t-c, .t-d, .t-e{ grid-row: span 1; }
  .t-offer{ grid-row: span 2; }
}

/* 3. Savoir-faire : chaque étape réservait 44 % de la hauteur d'écran. */
.step{ min-height: auto; padding-block: clamp(22px,3vh,38px); }
.step:last-child{ min-height: auto; }
.step h3{ margin: 10px 0 12px; }
.step ul{ margin-top: 14px; }
@media (max-width: 900px){ .process__visual{ aspect-ratio: 16/11; } }

/* 4. Engagements : quatre blocs empilés sur téléphone -> deux colonnes. */
@media (max-width: 700px){
  .promises__grid{ grid-template-columns: repeat(2,1fr); gap: 14px; }
  .promise{ padding: 20px 16px; }
  .promise .big{ font-size: clamp(1.8rem,9vw,2.6rem); }
  .promise p{ font-size: var(--s-1); }
  .promise svg{ width: 30px; height: 30px; }
}

/* 5. Avis et FAQ : colonnes serrées sur grand écran, moins de vide. */
.reviews__grid, .faq__grid{ gap: clamp(24px,4vw,70px); }

/* 6. Sur téléphone, les titres d'affichage montent jusqu'à 3,7 rem :
      c'est la deuxième cause de longueur après les marges. */
@media (max-width: 700px){
  .step h3{ font-size: clamp(1.5rem,6.6vw,2rem); }
  .step p{ font-size: var(--s0); }
  .process__visual{ display: none; }
  .manifesto__text{ font-size: clamp(1.55rem,7.4vw,2.4rem); line-height: 1.12; margin-top: 24px; }
  .marquee--rev .marquee__track span{ font-size: clamp(1.4rem,7vw,2rem); }
  .store__img{ aspect-ratio: 16/10; }
  .giant{ display: none; }
}

/* ============================================================
   Engagements (accueil + page /engagements/)
   ============================================================ */
.ml-eng{ display:grid; gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--r); overflow:hidden; }
.ml-eng__item{ background:var(--paper); display:grid; grid-template-columns:64px 1fr; gap:18px; padding:clamp(20px,2.6vw,30px) clamp(18px,2.4vw,28px); align-items:start; }
.ml-eng__num{ font-size:var(--s-1); letter-spacing:.24em; color:var(--brass-d); font-weight:600; padding-top:6px; }
.ml-eng__item h2, .ml-eng__item h3{ font-size:var(--s1); font-weight:700; letter-spacing:-.01em; line-height:1.2; margin:0 0 8px; }
.ml-eng__item p{ color:var(--muted); max-width:62ch; margin:0; }
.ml-eng--home{ grid-template-columns:repeat(2,1fr); }
.ml-eng--home .ml-eng__item{ background:var(--paper); }
.section--linen .ml-eng__item{ background:var(--paper); }
@media (max-width:800px){ .ml-eng--home{ grid-template-columns:1fr; } .ml-eng__item{ grid-template-columns:44px 1fr; gap:12px; } }

/* ============================================================
   Téléphone dans le header + barre d'actions fixe (mobile)
   ============================================================ */
.ml-hdrtel{ display:inline-flex; align-items:center; gap:8px; font:inherit; font-size:12px; letter-spacing:.12em; text-transform:uppercase; font-weight:600; color:inherit; background:none; text-decoration:none; padding:0; border:0; cursor:pointer; opacity:.9; }
.ml-hdrtel svg{ width:16px; height:16px; flex:0 0 auto; }
.ml-hdrtel:hover{ opacity:1; }
.ml-hdrtel--nav{ padding:8px 14px; border:1px solid currentColor; border-radius:999px; }
.ml-hdrtel--mob{ display:none; position:absolute; right:calc(var(--gut) + 52px); top:50%; transform:translateY(-50%); padding:10px; }
.ml-hdrtel--mob span{ display:none; }
@media (max-width:1024px){ .ml-hdrtel--mob{ display:inline-flex; } .hdr__in{ position:relative; } }

.ml-bar{ position:fixed; left:0; right:0; bottom:0; z-index:150; display:none; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border-top:1px solid var(--line); padding-bottom:env(safe-area-inset-bottom); }
.ml-bar a, .ml-bar button{ background:var(--paper); color:var(--ink); font:inherit; font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; text-decoration:none; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; min-height:56px; border:0; cursor:pointer; }
.ml-bar svg{ width:20px; height:20px; }
.ml-bar--2{ grid-template-columns:repeat(2,1fr); }
.ml-bar--1{ grid-template-columns:1fr; }
@media (max-width:900px){ .ml-bar{ display:grid; } body{ padding-bottom:64px; } .final{ padding-bottom:calc(clamp(44px,5.5vw,86px) + 20px); } }

/* feuille de choix de boutique */
.ml-sheet{ position:fixed; inset:0; z-index:200; display:none; align-items:flex-end; background:rgba(20,18,16,.55); }
.ml-sheet.is-open{ display:flex; }
.ml-sheet__in{ background:var(--paper); width:100%; max-width:560px; margin:0 auto; border-radius:var(--r) var(--r) 0 0; padding:18px 18px calc(18px + env(safe-area-inset-bottom)); }
@media (min-width:700px){ .ml-sheet{ align-items:center; } .ml-sheet__in{ border-radius:var(--r); } }
.ml-sheet__h{ display:flex; justify-content:space-between; align-items:center; margin-bottom:10px; }
.ml-sheet__h b{ font-size:var(--s0); font-weight:700; }
.ml-sheet__h button{ background:none; border:0; font:inherit; color:var(--muted); cursor:pointer; padding:6px; }
.ml-sheet ul{ list-style:none; margin:0; padding:0; display:grid; gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--r); overflow:hidden; }
.ml-sheet li a{ display:flex; justify-content:space-between; align-items:center; gap:14px; background:var(--paper); padding:14px 16px; text-decoration:none; color:var(--ink); }
.ml-sheet li a b{ display:block; font-weight:700; }
.ml-sheet li a small{ display:block; color:var(--muted); font-size:12px; margin-top:2px; }
.ml-sheet li a span:last-child{ font-weight:600; white-space:nowrap; }

/* stats déplacées sous les avis (fond papier) */
.reviews .stats{ border-top:1px solid var(--line); padding-top:clamp(24px,3vw,40px); }
.reviews .stat b{ color:var(--ink); }
.reviews .stat > span{ color:var(--muted); }
.reviews .stats{ border-top-color:var(--line); margin-top:0; }
.reviews .stat{ border-right-color:var(--line); }
.reviews .stat:nth-child(n+3){ border-top-color:var(--line); }
.reviews .stat b small{ color:var(--brass-d); }

/* bandeau de consentement à la mesure d'audience */
.ml-consent{ position:fixed; left:12px; right:12px; bottom:12px; z-index:180; display:none; gap:14px; align-items:center; flex-wrap:wrap; justify-content:space-between; background:var(--ink); color:var(--linen); border-radius:var(--r); padding:16px 18px; box-shadow:0 12px 40px rgba(20,18,16,.25); }
.ml-consent.is-open{ display:flex; }
.ml-consent p{ margin:0; font-size:13px; line-height:1.5; max-width:62ch; }
.ml-consent p a{ color:var(--brass); text-decoration:underline; text-underline-offset:3px; }
.ml-consent > div{ display:flex; gap:8px; }
.ml-consent .btn{ --bg:var(--linen); --fg:var(--ink); background:var(--linen); color:var(--ink); padding:10px 16px; font-size:12px; }
.ml-consent .btn--ghost{ background:transparent; color:var(--linen); border:1px solid rgba(245,241,234,.4); }
@media (max-width:900px){ .ml-consent{ bottom:76px; } }
@media (min-width:900px){ .ml-consent{ left:auto; max-width:560px; } }
/* zones desservies, groupées par boutique */
.ml-zones{display:block}
.ml-zones>span{display:block;margin-bottom:8px}
.ml-zones p{margin:0 0 6px;display:flex;flex-wrap:wrap;gap:6px 14px;align-items:baseline}
.ml-zones p b{font-weight:600;color:var(--ink);margin-right:4px}