/* --- fin socle mobile --- */

/* --- accueil mobile (mk_accueil_mobile) --- */
.jour-aide{display:none}
@media (max-width:900px){
  /* 01 : le rail avec des reperes */
  body.jour-a .moments{padding:0 78px 6px 18px;gap:12px;scroll-padding-left:18px;scroll-snap-type:x mandatory}
  body.jour-a #chap1{padding-bottom:64px}  /* 16/09 : de l'air avant la bande vert fonce */
  body.jour-a .mo{flex:0 0 calc(100vw - 96px);scroll-snap-align:start;padding:18px 18px 20px}
  body.jour-a .mo .ch{font-size:26px}
  body.jour-a .mo .cm{font-size:12px}
  body.jour-a .jour-aide{display:flex;flex-direction:column;align-items:center;gap:10px;padding:8px 26px 0;color:var(--vert)}
  body.jour-a .jour-glz{display:inline-flex;align-items:center;gap:8px;font-size:12px;letter-spacing:.2em;text-transform:uppercase;opacity:.7;transition:opacity .5s;height:16px}
  body.jour-a .jour-glz svg{width:26px;height:10px;animation:jour-fleche 1.6s ease-in-out infinite}
  body.jour-a .jour-aide.parti .jour-glz{opacity:0}
  @keyframes jour-fleche{0%,100%{transform:translateX(0)}50%{transform:translateX(6px)}}
  body.jour-a .jour-pts{display:flex;gap:8px;padding:0;margin:0}
  body.jour-a .jour-pts i{display:block;width:7px;height:7px;border-radius:999px;background:var(--vert);opacity:.22;transition:width .35s cubic-bezier(.2,.7,.3,1),opacity .35s}
  body.jour-a .jour-pts i.on{width:24px;opacity:.95}
  /* 03 : la bascule */
  body.deux-b .mt-w{display:grid;grid-template-columns:1fr;grid-template-areas:"sw" "bloc";gap:14px}
  body.deux-b .mt-switch{grid-area:sw;display:flex;height:52px;box-sizing:border-box;padding:4px;gap:4px;border-radius:999px;background:#fff;border:1px solid rgba(22,59,53,.14);box-shadow:0 4px 14px rgba(22,59,53,.08)}
  body.deux-b .mt-switch button{flex:1;min-height:44px;border:0;background:none;border-radius:999px;font:400 17px/1 'Recoleta',Georgia,serif;color:#163b35;cursor:pointer;padding:0;opacity:.6;transition:background .3s,opacity .3s;-webkit-tap-highlight-color:transparent}
  body.deux-b .mt-switch button.on{opacity:1}
  body.deux-b .mt-switch button.on[data-v="service"]{background:var(--bleu,#aacde2)}
  body.deux-b .mt-switch button.on[data-v="boutique"]{background:var(--jaune,#fff7cb)}
  body.deux-b .mt-c{grid-area:bloc;display:flex;flex-direction:column;align-items:center;text-align:center;transition:opacity .35s ease;touch-action:pan-y}
  body.deux-b .mt-c:not(.mt-vu){opacity:0;pointer-events:none;visibility:hidden}
  body.deux-b .mt-c .mt-im{order:1;aspect-ratio:4/3;border-radius:14px;transition:none}
  body.deux-b .mt-c .mt-k{order:2;margin:12px 0 0;padding:0 14px;box-sizing:border-box;min-height:0;font-size:16.5px;line-height:1.3;text-wrap:balance}
  body.deux-b .mt-c .mt-nom{display:none}
  body.deux-b .mt-c .mt-t{order:3;font-size:14.5px;line-height:1.5;margin:8px 0 0;max-width:none}
  body.deux-b .mt-c .mt-bas{order:4;width:100%;padding-top:10px;align-items:stretch;margin-top:0}
  body.deux-b .mt-c .mt-d{font-size:12px;line-height:1.45;text-align:center}
  body.deux-b .mt-c .dl{display:flex;justify-content:center;width:100%;box-sizing:border-box;min-height:48px;align-items:center;margin-top:10px;padding:10px 16px 6px;font-size:12px}
  body.deux-b .mt-c .dl .sv{padding-bottom:9px}
  /* 21/09 (Morgane, 2e passe) : autant d'air au-dessus qu'au-dessous de chaque section, mais pas partout pareil :
     64 px autour de 01 (entre le heros et la bande sombre), 110 px autour de 02, 03, 04 et 05 (contenu a contenu) */
  html body #chap1{margin-top:0!important;padding-top:64px!important;padding-bottom:64px!important}
  html body #chap2{margin-top:100px!important;padding-bottom:0!important}
  html body #deux{margin-top:88px!important}
  html body #chap5b{margin-top:55px!important}
  html body #chap5{margin-top:51px!important}
  html body #pied{margin-top:44px!important}
  /* la bascule : exactement un ecran (barres du navigateur repliees), la reponse un peu plus bas */
  html body .basc{height:100vh;height:100lvh;min-height:0}
  html body .basc .borne-b{margin:auto!important}   /* le vide se repartit autour de la borne, pas entre les deux phrases du bas */
  html body .basc .apres-b{margin-top:14px;font-size:19px}   /* 21/09 : un peu plus grand, un peu plus pres */
}
@media (min-width:901px){.mt-switch{display:none}}