/* Empan — le défilé « Vos propres critères » (14/10/2026).
   Une scène reste en place pendant qu'on fait défiler ; ses diapos s'enchaînent au rythme du défilement.
   Sans JavaScript, si le visiteur a demandé moins d'animations ou si l'écran est trop petit,
   les diapos s'affichent simplement les unes sous les autres (rien n'est caché). Aucune ressource tierce. */

.m-defile{--haut:100vh;position:relative;background:var(--m-blanc);}
@supports (height:100svh){.m-defile{--haut:100svh;}}

/* ---------- présentation simple (par défaut) ---------- */
.m-defile-scene{padding:0 24px;}
.m-diapo{padding:110px 0;border-top:1px solid var(--m-filet);}
.m-diapo-in{max-width:var(--m-largeur);margin:0 auto;}
.m-diapo-in.deux{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:64px;align-items:center;}
.m-defile-tete{text-align:center;padding:110px 24px 70px;}
.m-defile-tete .m-geant{max-width:14ch;margin:30px auto 22px;}
.m-diapo-sous{font-size:clamp(19px,2vw,23px);line-height:1.45;color:var(--m-doux);max-width:44ch;margin:0 auto;}
.m-defile-indice{display:none;}

.m-etiquette{display:inline-block;margin:0 0 18px;background:var(--m-panneau);border-radius:11px;padding:4px;}
.m-etiquette span{display:block;border:2px solid #fff;border-radius:8px;padding:4px 12px 5px;color:#fff;font-size:13px;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;line-height:1.2;}
.m-diapo h3{margin:0 0 18px;font-weight:800;font-stretch:82%;font-size:clamp(34px,4.4vw,54px);line-height:1;letter-spacing:-.018em;text-wrap:balance;}
.m-diapo-texte p{margin:0 0 14px;font-size:18px;line-height:1.5;max-width:46ch;}
.m-diapo-texte p.m-doux{font-size:16.5px;}
.m-diapo-texte ul{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:12px;}
.m-diapo-texte li{display:grid;grid-template-columns:24px minmax(0,1fr);gap:12px;font-size:17px;line-height:1.45;}
.m-diapo-texte li::before{content:"";width:22px;height:22px;border-radius:6px;margin-top:1px;background:var(--m-ligne)
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.2 8.4l3 3 6.6-6.8' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/14px no-repeat;}
.m-diapo-texte li b{font-weight:700;}
.m-diapo-texte li .cle{color:var(--m-ligne);}

/* les visuels : cadres d'écran, de téléphone, de page */
.m-diapo-visuel{margin:0;min-width:0;display:flex;justify-content:center;align-items:center;gap:22px;position:relative;}
.m-cadre{display:block;position:relative;width:100%;border-radius:16px;overflow:hidden;background:#fff;box-shadow:0 0 0 2px var(--m-encre), var(--m-ombre);}
.m-cadre img{display:block;width:100%;height:auto;}
.m-cadre.sombre{background:#232325;padding:10px 10px 22px;border-radius:20px;box-shadow:var(--m-ombre), inset 0 0 0 1px #3a3a3d;}
.m-cadre.sombre img{border-radius:9px;}
.m-cadre.tel{background:#232325;padding:6px;border-radius:26px;box-shadow:var(--m-ombre);width:min(100%,250px);flex:none;}
.m-cadre.tel img{border-radius:20px;}

/* réglages : repères posés sur la capture */
.m-repere{position:absolute;border:3px solid var(--m-ligne);border-radius:9px;
  box-shadow:0 0 0 5px color-mix(in srgb, var(--m-ligne) 20%, transparent);pointer-events:none;}

/* dans la salle : le téléphone et l'écran côte à côte */
.m-diapo-visuel.salle{display:grid;grid-template-columns:minmax(0,.34fr) minmax(0,1fr);align-items:center;gap:22px;}
.m-diapo-visuel.salle .m-cadre.tel{width:100%;}
/* les libellés restent visibles, les barres poussent de gauche à droite */
.m-revele img{clip-path:inset(0 calc((1 - (.33 + .67 * var(--v,1))) * 100%) 0 0);}

/* les trois temps : une ligne de métro */
.m-diapo-large{text-align:left;}
.m-trois{position:relative;margin:30px 0 26px;}
.m-trois-rail{position:absolute;left:calc(100% / 6);right:calc(100% / 6);top:30px;height:10px;border-radius:5px;background:var(--m-filet);}
.m-trois-plein{position:absolute;left:0;top:0;bottom:0;width:calc(var(--v,1) * 100%);border-radius:5px;background:var(--m-ligne);}
.m-trois-arrets{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;position:relative;}
.m-trois-arrets li{text-align:center;}
.m-trois .arret{width:70px;height:70px;border-radius:50%;background:#fff;border:7px solid var(--m-encre);display:grid;place-items:center;
  margin:0 auto 18px;font-weight:800;font-size:26px;line-height:1;transition:background .3s, color .3s, box-shadow .3s;}
.m-trois li.vu .arret,.m-defile:not(.anime) .m-trois .arret{background:var(--m-encre);color:#fff;box-shadow:0 0 0 5px #fff, 0 0 0 9px var(--m-ligne);}
.m-trois h4{margin:0 0 6px;font-size:24px;font-weight:800;line-height:1.15;letter-spacing:-.01em;}
.m-trois li.cle h4{color:var(--m-ligne);}
.m-trois p{margin:0 auto;max-width:30ch;color:var(--m-doux);font-size:16.5px;line-height:1.45;}
.m-ordre{display:flex;gap:16px;align-items:center;max-width:820px;margin:0 auto;border:2.5px solid var(--m-encre);border-radius:24px;
  padding:20px 26px;background:#fff;font-size:17px;line-height:1.45;}
.m-ordre svg{flex:none;width:38px;height:38px;}
.m-ordre b{font-weight:700;}

/* le résultat : les quatre cartes */
.m-cartes-groupes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;width:min(100%,600px);margin:0 auto;}
.m-cartes-groupes img{display:block;width:100%;height:auto;border-radius:14px;box-shadow:0 0 0 2px var(--m-encre), 0 18px 30px -18px rgba(29,29,31,.45);}

/* partout : l'écran et, devant, le téléphone */
.m-diapo-visuel.partout{display:block;padding:0 0 40px;}
.m-diapo-visuel.partout .m-cadre.tel{position:absolute;right:-10px;bottom:0;width:min(34%,220px);}

/* les six points */
.m-points{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;}
.m-points li{background:var(--m-gris);border-radius:22px;padding:22px 22px 24px;}
.m-points h3{margin:0 0 6px;font-size:20px;font-weight:700;line-height:1.25;}
.m-points p{margin:0;font-size:16px;line-height:1.5;color:var(--m-doux);}
.m-cadenas{display:flex;gap:12px;align-items:center;margin:26px 0 0;font-size:17px;}
.m-cadenas svg{flex:none;width:26px;height:26px;color:var(--m-ligne);}

/* ---------- la scène animée (ajoutée par empan-defile.js) ---------- */
.m-defile.anime .m-defile-piste{height:calc(var(--n,6) * var(--haut));}
.m-defile.anime .m-defile-scene{position:sticky;top:0;height:var(--haut);overflow:hidden;padding:0;}
.m-defile.anime .m-diapo{position:absolute;inset:0;padding:96px 32px 96px;border:none;display:flex;align-items:center;
  opacity:0;transform:translateY(42px);pointer-events:none;
  transition:opacity .22s ease, transform .4s cubic-bezier(.2,.7,.2,1);}
.m-defile.anime .m-diapo.avant{transform:translateY(-42px);}
/* la diapo qui arrive attend que la précédente se soit effacée : les textes ne se chevauchent pas */
.m-defile.anime .m-diapo.ici{opacity:1;transform:none;pointer-events:auto;
  transition:opacity .45s ease .16s, transform .65s cubic-bezier(.2,.7,.2,1) .08s;}
.m-defile.anime .m-diapo-in{width:100%;}
.m-defile.anime .m-diapo-visuel{transform:translateY(calc((.5 - var(--q,.5)) * 36px)) scale(calc(1.035 - var(--q,.5) * .035));
  transform-origin:50% 60%;will-change:transform;}
/* les visuels tiennent dans la hauteur de l'écran */
.m-defile.anime .m-cadre.ajuste{width:min(100%, calc((var(--haut) - var(--reserve,280px)) * var(--ar,1.6)));margin:0 auto;}
.m-defile.anime .m-cartes-groupes{width:min(100%, 600px, calc((var(--haut) - 290px) * 1.06));}
/* ce qui apparaît au fil du défilement */
.m-defile.anime [data-des]{transition:opacity .5s ease, transform .55s cubic-bezier(.2,.7,.2,1);}
.m-defile.anime [data-des]:not(.vu){opacity:0;transform:translateY(26px);}
.m-defile.anime .m-repere[data-des]:not(.vu){transform:scale(1.25);}
.m-defile.anime .m-diapo-visuel.partout .m-cadre.tel[data-des]:not(.vu){transform:translateX(40px);}
/* l'invitation à défiler */
.m-defile.anime .m-defile-indice{display:inline-flex;align-items:center;gap:12px;margin:30px 0 0;font-size:15px;font-weight:600;color:var(--m-doux);}
.m-defile-indice .fleche{width:12px;height:12px;border-right:2.5px solid currentColor;border-bottom:2.5px solid currentColor;
  transform:rotate(45deg);animation:m-descend 1.6s ease-in-out infinite;}
@keyframes m-descend{0%,100%{transform:translateY(-3px) rotate(45deg);}50%{transform:translateY(3px) rotate(45deg);}}
/* la ligne de progression, en bas de la scène */
.m-defile-ligne{display:none;}
.m-defile.anime .m-defile-ligne{display:grid;position:absolute;left:50%;bottom:24px;transform:translateX(-50%);width:min(760px, calc(100% - 48px));
  grid-template-columns:repeat(var(--m,6),minmax(0,1fr));transition:opacity .4s;}
.m-defile-ligne .rail{position:absolute;left:calc(50% / var(--m,6));right:calc(50% / var(--m,6));top:8px;height:4px;border-radius:2px;background:var(--m-filet);}
.m-defile-ligne .plein{position:absolute;left:0;top:0;bottom:0;width:calc(var(--av,0) * 100%);border-radius:2px;background:var(--m-encre);}
.m-defile-ligne .arret{position:relative;display:flex;flex-direction:column;align-items:center;gap:7px;font-size:12.5px;font-weight:500;color:var(--m-doux);text-align:center;}
.m-defile-ligne .arret::before{content:"";width:20px;height:20px;border-radius:50%;background:#fff;border:3px solid #C7C7CC;box-sizing:border-box;transition:all .2s;}
.m-defile-ligne .arret.passe::before{border-color:var(--m-encre);}
.m-defile-ligne .arret.ici{color:var(--m-encre);font-weight:700;}
.m-defile-ligne .arret.ici::before{border-color:var(--m-encre);background:var(--m-encre);box-shadow:0 0 0 3px #fff, 0 0 0 5px var(--m-ligne);}

/* ---------- écrans peu hauts (portables) : la scène se resserre ---------- */
@media (max-height:800px) and (min-width:761px){
  .m-defile.anime .m-diapo{padding:78px 32px 72px;}
  .m-defile.anime .m-diapo h3{font-size:clamp(30px,5.6vh,46px);margin-bottom:14px;}
  .m-defile.anime .m-diapo-texte p{font-size:16.5px;margin-bottom:10px;}
  .m-defile.anime .m-diapo-texte p.m-doux{font-size:15px;}
  .m-defile.anime .m-diapo-texte li{font-size:15.5px;}
  .m-defile.anime .m-diapo-texte ul{gap:8px;}
  .m-defile.anime .m-etiquette{margin-bottom:12px;}
  .m-defile.anime .m-trois{margin:18px 0 18px;}
  .m-defile.anime .m-trois-rail{top:25px;}
  .m-defile.anime .m-trois .arret{width:58px;height:58px;border-width:6px;font-size:22px;margin-bottom:12px;}
  .m-defile.anime .m-trois h4{font-size:21px;}
  .m-defile.anime .m-trois p{font-size:15px;}
  .m-defile.anime .m-ordre{padding:14px 20px;font-size:15.5px;border-radius:20px;}
  .m-defile.anime .m-ordre svg{width:30px;height:30px;}
  .m-defile.anime .m-defile-ligne{bottom:18px;}
}

/* ---------- petits écrans ---------- */
@media (max-width:1000px){
  .m-diapo-in.deux{grid-template-columns:minmax(0,1fr);gap:36px;}
  .m-points{grid-template-columns:repeat(2,minmax(0,1fr));}
  .m-defile.anime .m-diapo-in.deux{gap:22px;}
  .m-defile.anime .m-diapo-texte p{max-width:none;}
}
@media (max-width:760px){
  .m-diapo{padding:70px 0;}
  .m-trois-rail{left:29px;right:auto;top:28px;bottom:40px;width:8px;height:auto;}
  .m-trois-plein{width:auto;right:0;bottom:auto;height:calc(var(--v,1) * 100%);}
  .m-trois-arrets{grid-template-columns:minmax(0,1fr);gap:18px;}
  .m-trois-arrets li{text-align:left;display:grid;grid-template-columns:78px minmax(0,1fr);align-items:start;}
  .m-trois .arret{width:56px;height:56px;border-width:6px;font-size:21px;margin:0 0 0 4px;grid-row:span 2;}
  .m-trois h4{font-size:20px;margin-top:4px;}
  .m-trois p{margin:0;max-width:none;font-size:15px;}
  .m-ordre{font-size:15.5px;padding:16px 18px;border-radius:18px;}
  .m-ordre svg{width:30px;height:30px;}
  .m-points{grid-template-columns:minmax(0,1fr);}
  .m-diapo-visuel.salle{grid-template-columns:minmax(0,.4fr) minmax(0,1fr);gap:14px;}
  .m-defile.anime .m-diapo{padding:84px 18px 74px;align-items:flex-start;}
  .m-defile-tete{padding:80px 18px 50px;}
  .m-defile.anime .m-diapo h3{font-size:clamp(28px,8vw,36px);margin-bottom:12px;}
  .m-defile.anime .m-diapo-texte p{font-size:15.5px;margin-bottom:8px;}
  .m-defile.anime .m-diapo-texte p.m-doux{font-size:14.5px;}
  .m-defile.anime .m-diapo-texte li{font-size:15px;}
  .m-defile.anime .m-etiquette{margin-bottom:12px;}
  .m-defile.anime .m-trois{margin:18px 0 16px;}
  .m-defile-ligne .nom{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;}
  .m-defile.anime .m-defile-ligne{bottom:22px;}
}

/* ---------- impression : tout à plat ---------- */
@media print{
  .m-defile.anime .m-defile-piste{height:auto;}
  .m-defile.anime .m-defile-scene{position:static;height:auto;overflow:visible;}
  .m-defile.anime .m-diapo{position:static;opacity:1;transform:none;}
  .m-defile.anime [data-des]:not(.vu){opacity:1;transform:none;}
  .m-defile-ligne{display:none!important;}
}