/* Menu mobile plein écran (tablette et mobile : jusqu'à 991 px). Préfixe mm-.
   Utilise les variables de home-v2.css et la fleur du logo (.v2-fleur). */

.mm-toggle, .mm {display: none;}

@media (max-width: 991px) {
    /* on remplace le menu d'origine du template */
    .navbar-toggler, #navbar-collapse-toggle-1, .header-social-icon {display: none !important;}

    .mm-toggle {position: fixed; z-index: 10001; top: 14px; right: 14px; display: block; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 999px; background: transparent; cursor: pointer; -webkit-tap-highlight-color: transparent;}
    .mm-toggle span {position: absolute; left: 10px; width: 24px; height: 2px; border-radius: 2px; background: #fff; transition: transform .35s cubic-bezier(.3,.7,.2,1), opacity .2s ease, background-color .3s;}
    .mm-toggle span:nth-child(1) {top: 15px;}
    .mm-toggle span:nth-child(2) {top: 21px;}
    .mm-toggle span:nth-child(3) {top: 27px;}
    .mm-toggle:focus-visible {outline: 3px solid var(--v2-accent); outline-offset: 2px;}
    .mm-open .mm-toggle span:nth-child(1) {transform: translateY(6px) rotate(45deg);}
    .mm-open .mm-toggle span:nth-child(2) {opacity: 0;}
    .mm-open .mm-toggle span:nth-child(3) {transform: translateY(-6px) rotate(-45deg);}

    /* le panneau : s'ouvre en cercle depuis le bouton */
    .mm {position: fixed; z-index: 10000; inset: 0; display: flex; flex-direction: column; overflow-y: auto; background: var(--v2-primary); color: #fff; font-family: var(--v2-font-sans);
        clip-path: circle(0 at calc(100% - 36px) 36px); visibility: hidden; transition: clip-path .7s cubic-bezier(.7,0,.2,1), visibility 0s linear .7s;}
    .mm-open .mm {clip-path: circle(150vmax at calc(100% - 36px) 36px); visibility: visible; transition: clip-path .7s cubic-bezier(.7,0,.2,1), visibility 0s;}
    .mm-open {overflow: hidden;}

    .mm-fond {position: absolute; z-index: 0; inset: 0; overflow: hidden; pointer-events: none;}
    .mm-deco {position: absolute; z-index: 0; right: -9rem; bottom: -7rem; width: 26rem; height: 26rem; color: var(--v2-accent); opacity: .16; pointer-events: none; animation: mm-tourne 90s linear infinite;}
    @keyframes mm-tourne {to {transform: rotate(360deg);}}

    .mm-top {position: relative; z-index: 1; flex-shrink: 0; height: 72px; display: flex; align-items: center; padding-inline: 1.5rem;}
    .mm-top img {display: block; height: auto; width: min(13rem, calc(100vw - 7rem));}
    .mm-nav {position: relative; z-index: 1; flex: 1; display: flex; flex-direction: column; justify-content: center; padding: 1rem 1.5rem;}
    .mm-nav ul {list-style: none; margin: 0; padding: 0;}
    .mm-nav li {border-bottom: 1px solid rgba(255,255,255,.14);}
    .mm-nav li:first-child {border-top: 1px solid rgba(255,255,255,.14);}
    .mm-nav a {display: flex; align-items: center; gap: 1rem; padding: 1.1rem 0; color: #fff; text-decoration: none; -webkit-tap-highlight-color: transparent;}
    .mm-n {width: 1.8rem; flex-shrink: 0; font-size: .8rem; font-weight: 700; letter-spacing: .1em; color: var(--v2-accent);}
    .mm-t {flex: 1; font-family: var(--v2-font-display); font-size: clamp(2.1rem, 9vw, 3.1rem); line-height: 1.1; letter-spacing: -.01em; transition: transform .35s ease, color .25s;}
    .mm-nav .v2-fleur {width: 1.6rem; height: 1.6rem; flex-shrink: 0; color: var(--v2-accent); opacity: 0; transform: scale(.4) rotate(-60deg); transition: opacity .3s ease, transform .6s cubic-bezier(.3,.7,.2,1);}
    .mm-nav a[aria-current="page"] .v2-fleur {opacity: 1; transform: none;}
    .mm-nav a:active .v2-fleur, .mm-nav a:focus-visible .v2-fleur {opacity: 1; transform: rotate(60deg);}
    .mm-nav a:active .mm-t, .mm-nav a:focus-visible .mm-t {color: var(--v2-accent); transform: translateX(6px);}
    .mm-nav a:focus-visible {outline: 3px solid var(--v2-accent); outline-offset: 2px;}
    .mm-ext {width: 1.1rem; height: 1.1rem; flex-shrink: 0; opacity: .7;}

    .mm-bas {position: relative; z-index: 1; flex-shrink: 0; padding: 1rem 1.5rem max(1.75rem, env(safe-area-inset-bottom)); display: grid; gap: 1.25rem;}
    .mm-cta {display: flex; align-items: center; justify-content: center; gap: .6rem; padding: .95rem 1.5rem; border-radius: 999px; background: var(--v2-accent-strong); color: #fff; font-weight: 700; text-decoration: none;}
    .mm-cta svg {width: 1.1rem; height: 1.1rem;}
    .mm-cta:focus-visible {outline: 3px solid #fff; outline-offset: 3px;}
    .mm-reseaux {display: flex; justify-content: center; gap: 1.75rem;}
    .mm-reseaux a {color: rgba(255,255,255,.8); font-size: 1.25rem; text-decoration: none; padding: .35rem;}
    .mm-reseaux a:active, .mm-reseaux a:focus-visible {color: var(--v2-accent);}

    /* apparition des éléments l'un après l'autre */
    .mm-nav li {opacity: 0; transform: translateX(-2.5rem) rotate(-3deg); transform-origin: left center;}
    .mm-bas > * {opacity: 0; transform: translateY(24px) scale(.96);}
    .mm-open .mm-nav li {opacity: 1; transform: none; transition: opacity .45s ease calc(.3s + var(--i, 0) * .09s), transform .7s cubic-bezier(.2,1.35,.4,1) calc(.3s + var(--i, 0) * .09s);}
    .mm-open .mm-bas > * {opacity: 1; transform: none; transition: opacity .45s ease calc(.3s + var(--i, 0) * .09s), transform .7s cubic-bezier(.2,1.35,.4,1) calc(.3s + var(--i, 0) * .09s);}
    /* les traits de séparation se dessinent */
    .mm-nav li {position: relative; border-bottom: 0;}
    .mm-nav li::after {content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: rgba(255,255,255,.18); transform: scaleX(0); transform-origin: left;}
    .mm-open .mm-nav li::after {transform: none; transition: transform .6s ease calc(.45s + var(--i, 0) * .09s);}

    /* seule la fleur de la page en cours est visible (elle éclot) ; les autres n'apparaissent qu'au toucher */
    .mm-open .mm-nav a[aria-current="page"] .v2-fleur {animation: mm-eclot .9s cubic-bezier(.3,.7,.2,1) calc(.6s + var(--i, 0) * .09s) both;}
    @keyframes mm-eclot {from {opacity: 0; transform: scale(0) rotate(-200deg);} to {opacity: 1; transform: none;}}
    /* la grande fleur du fond se déploie à l'ouverture */
    .mm-open .mm-deco {animation: mm-tourne 90s linear infinite, mm-deploie 1.4s cubic-bezier(.2,.8,.2,1) .25s both;}
    @keyframes mm-deploie {from {rotate: -140deg; scale: .4; opacity: 0;} to {rotate: 0deg; scale: 1; opacity: .16;}}
    /* appui : le bouton rebondit */
    .mm-toggle:active {transform: scale(.86);}
    .mm-toggle {transition: transform .2s ease;}

    @media (prefers-reduced-motion: reduce) {
        .mm, .mm-open .mm {clip-path: none; transition: opacity .2s ease, visibility 0s linear .2s; opacity: 0;}
        .mm-open .mm {opacity: 1; transition: opacity .2s ease, visibility 0s;}
        .mm-deco {animation: none;}
        .mm-nav li, .mm-bas > *, .mm-open .mm-nav li, .mm-open .mm-bas > * {opacity: 1; transform: none; transition: none;}
        .mm-nav li::after, .mm-open .mm-nav li::after {transform: none; transition: none;}
        .mm-open .mm-nav a[aria-current="page"] .v2-fleur, .mm-open .mm-deco {animation: none;}
        .mm-toggle span, .mm-t, .mm-nav .v2-fleur {transition: none;}
    }
}