/* Généré par outils/construire-parcours.mjs à partir du prototype animé : ne pas modifier à la main. */ /* latin-ext */ @font-face { font-family: 'Caveat'; font-style: normal; font-weight: 500; font-display: swap; src: url(polices-web/caveat-500-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin */ @font-face { font-family: 'Caveat'; font-style: normal; font-weight: 500; font-display: swap; src: url(polices-web/caveat-500-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* latin-ext */ @font-face { font-family: 'Caveat'; font-style: normal; font-weight: 600; font-display: swap; src: url(polices-web/caveat-600-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin */ @font-face { font-family: 'Caveat'; font-style: normal; font-weight: 600; font-display: swap; src: url(polices-web/caveat-600-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* latin-ext */ @font-face { font-family: 'EB Garamond'; font-style: normal; font-weight: 400; font-display: swap; src: url(polices-web/eb-garamond-400-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin */ @font-face { font-family: 'EB Garamond'; font-style: normal; font-weight: 400; font-display: swap; src: url(polices-web/eb-garamond-400-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* latin-ext */ @font-face { font-family: 'EB Garamond'; font-style: normal; font-weight: 500; font-display: swap; src: url(polices-web/eb-garamond-500-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin */ @font-face { font-family: 'EB Garamond'; font-style: normal; font-weight: 500; font-display: swap; src: url(polices-web/eb-garamond-500-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* latin-ext */ @font-face { font-family: 'EB Garamond'; font-style: normal; font-weight: 600; font-display: swap; src: url(polices-web/eb-garamond-600-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin */ @font-face { font-family: 'EB Garamond'; font-style: normal; font-weight: 600; font-display: swap; src: url(polices-web/eb-garamond-600-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* latin-ext */ @font-face { font-family: 'Source Sans 3'; font-style: normal; font-weight: 400; font-display: swap; src: url(polices-web/source-sans-3-400-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin */ @font-face { font-family: 'Source Sans 3'; font-style: normal; font-weight: 400; font-display: swap; src: url(polices-web/source-sans-3-400-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* latin-ext */ @font-face { font-family: 'Source Sans 3'; font-style: normal; font-weight: 500; font-display: swap; src: url(polices-web/source-sans-3-500-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin */ @font-face { font-family: 'Source Sans 3'; font-style: normal; font-weight: 500; font-display: swap; src: url(polices-web/source-sans-3-500-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* latin-ext */ @font-face { font-family: 'Source Sans 3'; font-style: normal; font-weight: 600; font-display: swap; src: url(polices-web/source-sans-3-600-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin */ @font-face { font-family: 'Source Sans 3'; font-style: normal; font-weight: 600; font-display: swap; src: url(polices-web/source-sans-3-600-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* latin-ext */ @font-face { font-family: 'Source Sans 3'; font-style: normal; font-weight: 700; font-display: swap; src: url(polices-web/source-sans-3-700-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin */ @font-face { font-family: 'Source Sans 3'; font-style: normal; font-weight: 700; font-display: swap; src: url(polices-web/source-sans-3-700-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* 1.11.0 (02/11) : polices des cartes du parcours Leen Paô, servies par l'extension (Google Fonts, licence SIL OFL 1.1) */ @font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:400;font-display:swap;src:url(polices-web/cormorant-garamond-400-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF} @font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:400;font-display:swap;src:url(polices-web/cormorant-garamond-400-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD} @font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:500;font-display:swap;src:url(polices-web/cormorant-garamond-500-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF} @font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:500;font-display:swap;src:url(polices-web/cormorant-garamond-500-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD} @font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:600;font-display:swap;src:url(polices-web/cormorant-garamond-600-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF} @font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:600;font-display:swap;src:url(polices-web/cormorant-garamond-600-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD} @font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:700;font-display:swap;src:url(polices-web/cormorant-garamond-700-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF} @font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:700;font-display:swap;src:url(polices-web/cormorant-garamond-700-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD} @font-face{font-family:'Libre Baskerville';font-style:normal;font-weight:400;font-display:swap;src:url(polices-web/libre-baskerville-400-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF} @font-face{font-family:'Libre Baskerville';font-style:normal;font-weight:400;font-display:swap;src:url(polices-web/libre-baskerville-400-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD} @font-face{font-family:'Libre Baskerville';font-style:normal;font-weight:700;font-display:swap;src:url(polices-web/libre-baskerville-700-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF} @font-face{font-family:'Libre Baskerville';font-style:normal;font-weight:700;font-display:swap;src:url(polices-web/libre-baskerville-700-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD} @font-face{font-family:'Fraunces';font-style:normal;font-weight:400;font-display:swap;src:url(polices-web/fraunces-400-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF} @font-face{font-family:'Fraunces';font-style:normal;font-weight:400;font-display:swap;src:url(polices-web/fraunces-400-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD} @font-face{font-family:'Fraunces';font-style:normal;font-weight:500;font-display:swap;src:url(polices-web/fraunces-500-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF} @font-face{font-family:'Fraunces';font-style:normal;font-weight:500;font-display:swap;src:url(polices-web/fraunces-500-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD} @font-face{font-family:'Fraunces';font-style:normal;font-weight:600;font-display:swap;src:url(polices-web/fraunces-600-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF} @font-face{font-family:'Fraunces';font-style:normal;font-weight:600;font-display:swap;src:url(polices-web/fraunces-600-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD} @font-face{font-family:'Fraunces';font-style:normal;font-weight:700;font-display:swap;src:url(polices-web/fraunces-700-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF} @font-face{font-family:'Fraunces';font-style:normal;font-weight:700;font-display:swap;src:url(polices-web/fraunces-700-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD} @font-face{font-family:'Playfair Display';font-style:normal;font-weight:400;font-display:swap;src:url(polices-web/playfair-display-400-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF} @font-face{font-family:'Playfair Display';font-style:normal;font-weight:400;font-display:swap;src:url(polices-web/playfair-display-400-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD} @font-face{font-family:'Playfair Display';font-style:normal;font-weight:500;font-display:swap;src:url(polices-web/playfair-display-500-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF} @font-face{font-family:'Playfair Display';font-style:normal;font-weight:500;font-display:swap;src:url(polices-web/playfair-display-500-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD} @font-face{font-family:'Playfair Display';font-style:normal;font-weight:600;font-display:swap;src:url(polices-web/playfair-display-600-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF} @font-face{font-family:'Playfair Display';font-style:normal;font-weight:600;font-display:swap;src:url(polices-web/playfair-display-600-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD} @font-face{font-family:'Playfair Display';font-style:normal;font-weight:700;font-display:swap;src:url(polices-web/playfair-display-700-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF} @font-face{font-family:'Playfair Display';font-style:normal;font-weight:700;font-display:swap;src:url(polices-web/playfair-display-700-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD} @font-face{font-family:'Quicksand';font-style:normal;font-weight:400;font-display:swap;src:url(polices-web/quicksand-400-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF} @font-face{font-family:'Quicksand';font-style:normal;font-weight:400;font-display:swap;src:url(polices-web/quicksand-400-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD} @font-face{font-family:'Quicksand';font-style:normal;font-weight:500;font-display:swap;src:url(polices-web/quicksand-500-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF} @font-face{font-family:'Quicksand';font-style:normal;font-weight:500;font-display:swap;src:url(polices-web/quicksand-500-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD} @font-face{font-family:'Quicksand';font-style:normal;font-weight:600;font-display:swap;src:url(polices-web/quicksand-600-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF} @font-face{font-family:'Quicksand';font-style:normal;font-weight:600;font-display:swap;src:url(polices-web/quicksand-600-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD} @font-face{font-family:'Quicksand';font-style:normal;font-weight:700;font-display:swap;src:url(polices-web/quicksand-700-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF} @font-face{font-family:'Quicksand';font-style:normal;font-weight:700;font-display:swap;src:url(polices-web/quicksand-700-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD} @font-face{font-family:'Manrope';font-style:normal;font-weight:400;font-display:swap;src:url(polices-web/manrope-400-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF} @font-face{font-family:'Manrope';font-style:normal;font-weight:400;font-display:swap;src:url(polices-web/manrope-400-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD} @font-face{font-family:'Manrope';font-style:normal;font-weight:500;font-display:swap;src:url(polices-web/manrope-500-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF} @font-face{font-family:'Manrope';font-style:normal;font-weight:500;font-display:swap;src:url(polices-web/manrope-500-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD} @font-face{font-family:'Manrope';font-style:normal;font-weight:600;font-display:swap;src:url(polices-web/manrope-600-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF} @font-face{font-family:'Manrope';font-style:normal;font-weight:600;font-display:swap;src:url(polices-web/manrope-600-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD} @font-face{font-family:'Manrope';font-style:normal;font-weight:700;font-display:swap;src:url(polices-web/manrope-700-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF} @font-face{font-family:'Manrope';font-style:normal;font-weight:700;font-display:swap;src:url(polices-web/manrope-700-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD} @font-face{font-family:'Manrope';font-style:normal;font-weight:800;font-display:swap;src:url(polices-web/manrope-800-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF} @font-face{font-family:'Manrope';font-style:normal;font-weight:800;font-display:swap;src:url(polices-web/manrope-800-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD} @font-face{font-family:'Great Vibes';font-style:normal;font-weight:400;font-display:swap;src:url(polices-web/great-vibes-400-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF} @font-face{font-family:'Great Vibes';font-style:normal;font-weight:400;font-display:swap;src:url(polices-web/great-vibes-400-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD} @font-face{font-family:'Nunito';font-style:normal;font-weight:700;font-display:swap;src:url(polices-web/nunito-700-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF} @font-face{font-family:'Nunito';font-style:normal;font-weight:700;font-display:swap;src:url(polices-web/nunito-700-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD} @font-face{font-family:'Nunito';font-style:normal;font-weight:800;font-display:swap;src:url(polices-web/nunito-800-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF} @font-face{font-family:'Nunito';font-style:normal;font-weight:800;font-display:swap;src:url(polices-web/nunito-800-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD} @font-face{font-family:'Pacifico';font-style:normal;font-weight:400;font-display:swap;src:url(polices-web/pacifico-400-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF} @font-face{font-family:'Pacifico';font-style:normal;font-weight:400;font-display:swap;src:url(polices-web/pacifico-400-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD} @property --accent{syntax:'';inherits:true;initial-value:#1f5c57} @property --stage{syntax:'';inherits:true;initial-value:#d5e2dc} @property --stage2{syntax:'';inherits:true;initial-value:#eef3ef} .sscc-m{ --bg:#f7f2ec;--surface:#fffdfa;--ink:#2a221d;--ink-2:#665950;--ink-3:#7f7066; --line:rgba(42,34,29,.11);--line-2:rgba(42,34,29,.2); --ok:#3d7a58;--err:#b13f2c; --accent:#1f5c57;--stage:#d5e2dc;--stage2:#eef3ef;--brand:#1f5c57; --c-ink:#f6ecdc;--c-ink2:rgba(246,236,220,.74);--c-paper:#f5efe5;--c-paper-ink:#2c3a37; --c-strip:radial-gradient(130% 120% at 78% 28%,#2f6f68 0%,#1e4b47 46%,#142f2d 100%); --rb:var(--accent);--rb-d:color-mix(in srgb,var(--accent) 70%,#000);--rb-l:color-mix(in srgb,var(--accent) 55%,#fff); --env:color-mix(in srgb,var(--stage) 30%,#f8f0e4); --serif:'Source Sans 3','Segoe UI',system-ui,-apple-system,sans-serif; /* 25/10 (Simon) : une seule police sobre, plus de serif « site beauté » */ --sans:'Source Sans 3','Segoe UI',system-ui,-apple-system,sans-serif; --hand:'Caveat','Segoe Print','Bradley Hand',cursive; --mono:ui-monospace,'Cascadia Mono',Consolas,monospace; --ease-out:cubic-bezier(.22,1,.36,1);--ease-io:cubic-bezier(.65,0,.35,1);--ease-back:cubic-bezier(.34,1.56,.64,1); --topbar:68px; --sh-1:0 1px 2px rgba(42,34,29,.05),0 6px 16px -6px rgba(42,34,29,.1); --sh-2:0 2px 6px rgba(42,34,29,.07),0 22px 44px -16px rgba(42,34,29,.26); transition:--accent .9s var(--ease-out),--stage 1.6s var(--ease-out),--stage2 1.6s var(--ease-out); } .sscc-m *,.sscc-m *::before,.sscc-m *::after{box-sizing:border-box} .sscc-m [hidden]{display:none!important} .sscc-m{-webkit-text-size-adjust:100%} .sscc-m{margin:0;background:var(--bg);color:var(--ink);font:400 16px/1.5 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:clip} html.sscc-no-scroll{overflow:hidden} .sscc-m button,.sscc-m input,.sscc-m textarea,.sscc-m select{font:inherit;color:inherit} .sscc-m button{cursor:pointer} .sscc-m svg{display:block} .sscc-m a{color:inherit} .sscc-m p{margin:0} .sscc-m .vh{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0} .sscc-m :focus-visible{outline:3px solid color-mix(in srgb,var(--accent) 60%,#fff);outline-offset:3px} .sscc-m .skip{position:fixed;left:16px;top:-80px;z-index:200;background:var(--ink);color:#fff;padding:10px 14px;border-radius:10px;text-decoration:none;transition:top .2s} .sscc-m .skip:focus{top:12px} /* ---------- Barre du haut ---------- */ .sscc-m .topbar{position:sticky;top:0;z-index:70;height:var(--topbar);display:flex;align-items:center;gap:14px;padding:0 clamp(16px,3vw,40px);background:color-mix(in srgb,var(--bg) 82%,transparent);-webkit-backdrop-filter:blur(16px) saturate(1.3);backdrop-filter:blur(16px) saturate(1.3);transition:box-shadow .3s} .sscc-m .topbar.is-scrolled{box-shadow:0 1px 0 var(--line)} .sscc-m .brand{display:flex;align-items:center;gap:10px;text-decoration:none;margin-right:auto;border-radius:12px;min-width:0} .sscc-m .brand-mark{width:34px;height:34px;flex:none;color:var(--accent)} .sscc-m .brand-mark .bm-r1,.sscc-m .brand-mark .bm-r2{transform-box:fill-box;transform-origin:center} .sscc-m .brand:hover .bm-r1{animation:bm .9s var(--ease-out)} .sscc-m .brand:hover .bm-r2{animation:bm .9s .12s var(--ease-out)} @keyframes bm{0%{transform:scale(.6);opacity:.2}100%{transform:scale(1);opacity:1}} .sscc-m .brand-name{display:block;font:400 25px/1 var(--serif);letter-spacing:-.01em} .sscc-m .brand-sub{display:block;margin-top:4px;font:600 10px/1 var(--sans);letter-spacing:.24em;text-transform:uppercase;color:var(--ink-2);white-space:nowrap} .sscc-m .seg{position:relative;display:inline-flex;padding:4px;background:rgba(42,34,29,.06);border-radius:999px;isolation:isolate} .sscc-m .seg>button,.sscc-m .seg>label{position:relative;z-index:1;border:0;background:none;padding:8px 16px;border-radius:999px;font:600 14px/1.2 var(--sans);color:var(--ink-2);cursor:pointer;transition:color .3s;white-space:nowrap;display:flex;align-items:center;justify-content:center;gap:6px} .sscc-m .seg>button[aria-pressed="true"],.sscc-m .seg>label:has(input:checked){color:var(--ink)} .sscc-m .seg>label:has(input:focus-visible){outline:3px solid color-mix(in srgb,var(--accent) 60%,#fff);outline-offset:1px} .sscc-m .seg-pill{position:absolute;z-index:0;top:4px;left:0;height:calc(100% - 8px);width:0;background:var(--surface);border-radius:999px;box-shadow:0 1px 2px rgba(42,34,29,.1),0 4px 10px -4px rgba(42,34,29,.18);transition:transform .5s var(--ease-back),width .5s var(--ease-out)} .sscc-m .demo-btn{position:relative;display:inline-flex;align-items:center;gap:9px;height:42px;padding:0 16px 0 6px;border-radius:999px;border:1px solid var(--line-2);background:var(--surface);font:600 14px var(--sans);color:var(--ink);transition:border-color .3s,box-shadow .3s,transform .2s;white-space:nowrap} .sscc-m .demo-btn:hover{border-color:var(--accent);box-shadow:0 6px 16px -8px color-mix(in srgb,var(--accent) 60%,transparent)} .sscc-m .demo-btn:active{transform:scale(.97)} .sscc-m .demo-ico{width:30px;height:30px;border-radius:50%;background:var(--accent);color:var(--sscc-sur-accent,#fff);display:grid;place-items:center;position:relative} .sscc-m .demo-ico svg{width:15px;height:15px;fill:currentColor;grid-area:1/1} .sscc-m .demo-ico::after{content:'';position:absolute;inset:-4px;border-radius:50%;border:2px solid var(--accent);opacity:0;animation:halo 2.4s var(--ease-out) infinite} @keyframes halo{0%{transform:scale(.8);opacity:.7}100%{transform:scale(1.5);opacity:0}} .sscc-m .demo-btn .i-stop{display:none} .sscc-m .demo-btn[aria-pressed="true"] .i-stop{display:block} .sscc-m .demo-btn[aria-pressed="true"] .i-play{display:none} .sscc-m .demo-btn[aria-pressed="true"] .demo-ico::after{animation:none} .sscc-m .demo-progress{position:fixed;left:0;right:0;top:0;height:3px;z-index:90;pointer-events:none;opacity:0;transition:opacity .3s} .sscc-m.demo-on .demo-progress{opacity:1} .sscc-m .demo-progress span{display:block;height:100%;width:100%;background:linear-gradient(90deg,var(--accent),color-mix(in srgb,var(--accent) 50%,#e8c48e));transform-origin:0 50%;transform:scaleX(0)} /* ---------- Mise en page achat ---------- */ .sscc-m .layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(400px,540px);gap:clamp(24px,3.2vw,52px);padding:6px clamp(16px,3vw,40px) 0;max-width:1500px;margin:0 auto;align-items:start} .sscc-m .stage-col{position:sticky;top:calc(var(--topbar) + 6px);height:calc(100svh - var(--topbar) - 26px);min-height:560px} .sscc-m .stage{position:relative;height:100%;border-radius:32px;overflow:hidden;isolation:isolate;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:34px;padding:40px 32px 96px;background:radial-gradient(120% 90% at 18% 6%,var(--stage2) 0%,var(--stage) 64%)} .sscc-m .amb-leaves{position:absolute;inset:-7%;z-index:-1;pointer-events:none;background:url(ombres-feuilles.webp) 70% 30%/cover no-repeat;mix-blend-mode:multiply;opacity:.20;transform-origin:72% 0;animation:sway 16s ease-in-out infinite alternate} @keyframes sway{0%{transform:rotate(-1.4deg) translate3d(-1.2%,0,0) scale(1.03)}100%{transform:rotate(1.6deg) translate3d(1.4%,.8%,0) scale(1.06)}} .sscc-m .amb-light{position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(55% 45% at 16% 10%,rgba(255,249,238,.8),rgba(255,249,238,0) 70%),radial-gradient(40% 40% at 90% 100%,color-mix(in srgb,var(--accent) 16%,transparent),transparent 70%);animation:breathe 10s ease-in-out infinite alternate} @keyframes breathe{from{opacity:.75}to{opacity:1}} .sscc-m .amb-grain{position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.35;mix-blend-mode:overlay;background-image:url("data:image/svg+xml;utf8,")} .sscc-m .stage-tools{display:flex;align-items:center;gap:12px;color:var(--ink-2);font-size:14px} .sscc-m .live-dot{width:8px;height:8px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 0 rgba(61,122,88,.5);animation:livedot 2s infinite} @keyframes livedot{0%{box-shadow:0 0 0 0 rgba(61,122,88,.45)}70%{box-shadow:0 0 0 8px rgba(61,122,88,0)}100%{box-shadow:0 0 0 0 rgba(61,122,88,0)}} .sscc-m .chip-btn{display:inline-flex;align-items:center;gap:7px;height:36px;padding:0 14px;border-radius:999px;border:1px solid color-mix(in srgb,var(--ink) 16%,transparent);background:color-mix(in srgb,var(--surface) 70%,transparent);font:600 13px var(--sans);color:var(--ink);transition:background-color .2s,border-color .2s,transform .2s} .sscc-m .chip-btn:hover{background:var(--surface);border-color:var(--accent)} .sscc-m .chip-btn:active{transform:scale(.96)} .sscc-m .chip-btn svg{width:16px;height:16px;transition:transform .6s var(--ease-back)} .sscc-m .chip-btn:hover svg{transform:rotate(180deg)} .sscc-m .reassure{position:absolute;left:24px;right:24px;bottom:22px;display:flex;flex-wrap:wrap;justify-content:center;gap:8px 22px;margin:0;padding:0;list-style:none;font:600 13px var(--sans);color:color-mix(in srgb,var(--ink) 82%,transparent)} .sscc-m .reassure li{display:flex;align-items:center;gap:7px} .sscc-m .reassure svg,.sscc-m .trust svg{width:18px;height:18px;color:var(--accent);flex:none} .sscc-m .tick path{stroke-dasharray:24;stroke-dashoffset:24;animation:tick .7s var(--ease-out) forwards} .sscc-m .reassure li:nth-child(2) .tick path{animation-delay:.15s}.sscc-m .reassure li:nth-child(3) .tick path{animation-delay:.3s}.sscc-m .reassure li:nth-child(4) .tick path{animation-delay:.45s} @keyframes tick{to{stroke-dashoffset:0}} /* ---------- La carte 3D ---------- */ .sscc-m .scene{--w:clamp(260px,33vw,470px);position:relative;width:var(--w);aspect-ratio:1.6;container-type:inline-size;perspective:1500px;flex:none} .sscc-m .scene-shadow{position:absolute;left:9%;right:9%;bottom:-13%;height:20%;border-radius:50%;background:radial-gradient(closest-side,rgba(28,22,18,.36),rgba(28,22,18,0));filter:blur(5px);animation:shadowf 7s ease-in-out infinite;pointer-events:none} .sscc-m .card-float{position:absolute;inset:0;transform-style:preserve-3d;animation:floaty 7s ease-in-out infinite} @keyframes floaty{0%,100%{transform:translate3d(0,-1.6%,0)}50%{transform:translate3d(0,1.6%,0)}} @keyframes shadowf{0%,100%{transform:scale(.9);opacity:.7}50%{transform:scale(1);opacity:1}} .sscc-m .card3d{position:absolute;inset:0;transform-style:preserve-3d;will-change:transform;cursor:pointer} .sscc-m .card-flip{position:absolute;inset:0;transform-style:preserve-3d;transition:transform 1.1s cubic-bezier(.3,1.12,.4,1)} .sscc-m .is-flipped .card-flip{transform:rotateY(180deg)} .sscc-m #scene,.sscc-m .card3d{touch-action:pan-y;user-select:none;-webkit-user-select:none}.sscc-m .card3d.is-dragging{cursor:grabbing} .sscc-m .face{position:absolute;inset:0;border-radius:4.4cqw;overflow:hidden;-webkit-backface-visibility:hidden;backface-visibility:hidden;box-shadow:0 2.5cqw 6cqw -2cqw rgba(24,18,12,.45);transform:translateZ(.1px)} .sscc-m .face::after{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;box-shadow:inset 0 1px 0 rgba(255,255,255,.4),inset 0 0 0 1px rgba(255,255,255,.1)} .sscc-m .face.back{transform:rotateY(180deg) translateZ(.1px);background:var(--c-paper)} .sscc-m .art{position:absolute;inset:0;overflow:hidden;border-radius:inherit;clip-path:inset(0 round 4.4cqw);isolation:isolate} /* 28/10 : le décor entrant comme sortant est découpé par l arrondi dès la première image, même avec des calques 3D ou des canevas */ .sscc-m .art svg{position:absolute;inset:0;width:100%;height:100%} .sscc-m .art-next{z-index:1} .sscc-m .grain{position:absolute;inset:0;pointer-events:none;opacity:.3;mix-blend-mode:overlay;background-image:url("data:image/svg+xml;utf8,");z-index:2} .sscc-m .front-ui{position:absolute;inset:0;z-index:3;padding:6.4cqw 7cqw 6cqw;display:grid;grid-template-rows:auto 1fr auto;color:var(--c-ink);transition:color .7s} .sscc-m .f-top{display:flex;justify-content:space-between;align-items:flex-start;gap:4cqw} .sscc-m .f-brand{display:flex;align-items:center;gap:2.2cqw} .sscc-m .f-brand svg{width:7.4cqw;height:7.4cqw} .sscc-m .f-brand b{display:block;font:400 5.6cqw/1 var(--serif);letter-spacing:-.01em} .sscc-m .f-brand small{display:block;margin-top:1.1cqw;font:600 1.75cqw/1 var(--sans);letter-spacing:.26em;text-transform:uppercase;opacity:.78} .sscc-m .f-kind{font:600 1.85cqw/1 var(--sans);letter-spacing:.26em;text-transform:uppercase;padding:1.5cqw 2.4cqw;border-radius:99px;border:1px solid color-mix(in srgb,currentColor 45%,transparent);white-space:nowrap} .sscc-m .f-mid{align-self:center;min-height:4cqw} .sscc-m .f-soin{display:inline-block;font:500 2.9cqw/1.25 var(--sans);letter-spacing:.01em;opacity:0;transform:translateY(2cqw);transition:opacity .5s,transform .6s var(--ease-out)} .sscc-m .f-soin.is-on{opacity:.92;transform:none} .sscc-m .f-soin::before{content:'';display:inline-block;width:4cqw;height:1px;background:currentColor;vertical-align:middle;margin-right:2cqw;opacity:.6} .sscc-m .f-bottom{display:flex;justify-content:space-between;align-items:flex-end;gap:3cqw} .sscc-m .f-to{min-width:0;flex:1} .sscc-m .f-to small{display:block;font:600 1.85cqw/1 var(--sans);letter-spacing:.26em;text-transform:uppercase;opacity:.78;margin-bottom:.6cqw} .sscc-m .f-to .hand{display:block;font:600 8.6cqw/1.05 var(--hand);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;--ink-c:var(--c-ink)} .sscc-m .f-amount{display:flex;align-items:flex-start;font:350 13.5cqw/1 var(--serif);letter-spacing:-.03em;font-variant-numeric:lining-nums tabular-nums;flex:none} .sscc-m .f-amount .cur{font-size:.42em;margin:.22em 0 0 .12em;letter-spacing:0} .sscc-m .hand.is-ph{opacity:.5} .sscc-m .hand.is-typing::after{content:'';display:inline-block;width:.07em;height:.78em;margin-left:.05em;background:currentColor;vertical-align:-.06em;animation:blink 1s steps(1) infinite} @keyframes blink{50%{opacity:0}} .sscc-m .ch.ink{animation:inkin .65s ease-out both} /* 26/10 : écriture progressive, texte posé d'avance (lettres invisibles, mots insécables) pour qu'un mot ne saute pas à la ligne en cours d'écriture */ .sscc-m .ch.att{visibility:hidden} .sscc-m .mot{white-space:nowrap} @keyframes inkin{from{color:transparent;text-shadow:0 0 .22em var(--ink-c,currentColor)}} .sscc-m .sheen{position:absolute;inset:-30%;z-index:4;pointer-events:none;background:linear-gradient(112deg,transparent 42%,rgba(255,255,255,.22) 50%,transparent 58%);transform:translateX(-55%);animation:sheen 8s ease-in-out 1.2s infinite;mix-blend-mode:soft-light} @keyframes sheen{0%,72%{transform:translateX(-55%)}100%{transform:translateX(55%)}} .sscc-m .glare{position:absolute;inset:0;z-index:5;pointer-events:none;background:radial-gradient(circle at calc(var(--gx,30%) + var(--gxd,0%)) calc(var(--gy,22%) + var(--gyd,0%)),rgba(255,255,255,.4),rgba(255,255,255,0) 52%),linear-gradient(115deg,rgba(255,255,255,0) calc(var(--gx,30%) + var(--gxd,0%) - 26%),rgba(255,255,255,.22) calc(var(--gx,30%) + var(--gxd,0%)),rgba(255,255,255,0) calc(var(--gx,30%) + var(--gxd,0%) + 26%));mix-blend-mode:soft-light} /* 28/10 (Simon) : brillance qui suit l'inclinaison sur toutes les cartes, plus douce sur les fonds sombres, dorée et plus intense sur Leen Paô */ .sscc-m .face:has(.art:not(.sortant) > .v2-noelnuit) .glare,.sscc-m .face:has(.art:not(.sortant) > .v2-feu) .glare{opacity:.55} .sscc-m .face:has(.art:not(.sortant) > .v2-leenpao) .glare{background:radial-gradient(circle at calc(var(--gx,30%) + var(--gxd,0%)) calc(var(--gy,22%) + var(--gyd,0%)),rgba(255,244,220,.4),rgba(255,244,220,0) 52%),linear-gradient(115deg,rgba(255,236,196,0) calc(var(--gx,30%) + var(--gxd,0%) - 26%),rgba(255,236,196,.22) calc(var(--gx,30%) + var(--gxd,0%)),rgba(255,236,196,0) calc(var(--gx,30%) + var(--gxd,0%) + 26%))} /* 28/10 (Simon) : même force que les autres cartes, teinte légèrement dorée */ .sscc-m .face:has(.art:not(.sortant) > .v2-leenpao) .f-brand b{background:linear-gradient(105deg,#9a7232 0%,#c9a24f calc(var(--gx,50%) + var(--gxd,0%) - 20%),#e2c27e calc(var(--gx,50%) + var(--gxd,0%)),#c19a4c calc(var(--gx,50%) + var(--gxd,0%) + 18%),#9a7232 100%);-webkit-background-clip:text;background-clip:text;color:transparent!important;line-height:1.3;padding:.18em .08em .1em;margin:-.18em -.08em -.1em} /* 28/10 : de l'air pour les hampes et le circonflexe, sinon le dégradé les coupe */ .sscc-m .back-ui{position:absolute;inset:0;display:grid;grid-template-rows:1fr auto;color:var(--c-paper-ink)} .sscc-m .b-msg{padding:6cqw 7cqw 2cqw;display:flex;flex-direction:column;min-height:0;--ink-c:var(--c-paper-ink)} .sscc-m .b-msg .hand{font:500 5.5cqw/1.2 var(--hand);overflow:hidden;flex:1;min-height:0;word-break:break-word} .sscc-m .b-sign{align-self:flex-end;font:600 5cqw/1 var(--hand);margin-top:1cqw;--ink-c:var(--c-paper-ink)} .sscc-m .b-sign .hand{display:inline} /* 26/10 (Simon) : au dos, en bas à droite de la partie claire, le QR code (réservation en ligne, sinon site) et au-dessus, écrits à la verticale, le nom de l'institut, son adresse et son téléphone */ .sscc-m .b-msg{position:relative;padding-right:22cqw} .sscc-m .b-inst{position:absolute;right:5.4cqw;top:2.6cqw;bottom:2.4cqw;width:14cqw;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:2.4cqw;color:var(--c-paper-ink)} .sscc-m .b-inst-txt{writing-mode:vertical-rl;transform:rotate(180deg);min-height:0;overflow:hidden;font:500 2.05cqw/1.36 var(--sans);white-space:nowrap;opacity:.9} .sscc-m .b-inst-txt a{color:inherit!important;text-decoration:none!important;pointer-events:none} .sscc-m .b-inst-txt b{font:600 2.35cqw/1.36 var(--sans);letter-spacing:.02em} .sscc-m .b-inst-qr{flex:none;width:13.4cqw;height:13.4cqw;padding:.7cqw;border-radius:1.4cqw;background:#fff;box-sizing:border-box} .sscc-m .b-inst-qr svg{display:block;width:100%;height:100%} .sscc-m .b-inst-qr path{fill:var(--c-paper-ink)} .sscc-m .b-strip{position:relative;display:flex;align-items:center;justify-content:space-between;gap:3cqw;padding:3.2cqw 7cqw;background:var(--c-strip);color:var(--c-ink);transition:color .7s} .sscc-m .b-strip small{display:block;font:600 1.6cqw/1 var(--sans);letter-spacing:.22em;text-transform:uppercase;opacity:.75;margin-bottom:1cqw} .sscc-m .b-code{font:600 2.7cqw/1 var(--mono);letter-spacing:.12em;white-space:nowrap} .sscc-m .b-valid{font:600 2.3cqw/1 var(--sans);white-space:nowrap} .sscc-m .b-strip svg{width:6cqw;height:6cqw;flex:none} /* Animations des illustrations */ .sscc-m .rings circle{transform-box:fill-box;transform-origin:center;vector-effect:non-scaling-stroke;stroke-width:1;animation:ring 8.4s linear infinite;animation-delay:calc(var(--i) * -1.4s);opacity:0} @keyframes ring{0%{transform:scale(.04);opacity:0}12%{opacity:.9}100%{transform:scale(1);opacity:0}} .sscc-m .sun{transform-box:fill-box;transform-origin:center;animation:sun 6s ease-in-out infinite alternate} @keyframes sun{from{transform:scale(.96)}to{transform:scale(1.05)}} .sscc-m .waves path{animation:wave 7s linear infinite} .sscc-m .waves path:nth-child(2){animation-duration:9s}.sscc-m .waves path:nth-child(3){animation-duration:12s} @keyframes wave{to{transform:translateX(40px)}} .sscc-m .wobble{transform-box:fill-box;transform-origin:50% 100%;animation:wob 5s ease-in-out infinite alternate} @keyframes wob{from{transform:rotate(-2.5deg)}to{transform:rotate(2.5deg)}} .sscc-m .drop{animation:bob 4.5s ease-in-out infinite alternate} @keyframes bob{from{transform:translateY(-1px)}to{transform:translateY(1.5px)}} .sscc-m .swirl path{animation:drift 6s ease-in-out infinite alternate} @keyframes drift{from{transform:translateX(-3px)}to{transform:translateX(3px)}} .sscc-m .branch{transform-box:view-box;transform-origin:160px 0;animation:branch 7s ease-in-out infinite alternate} @keyframes branch{from{transform:rotate(-2.2deg)}to{transform:rotate(2.6deg)}} .sscc-m .stars circle{animation:tw 3.4s ease-in-out infinite;animation-delay:var(--d,0s)} @keyframes tw{0%,100%{opacity:.25}50%{opacity:1}} .sscc-m .sprig{transform-box:fill-box;transform-origin:50% 100%;animation:wob 6s ease-in-out infinite alternate} /* ---------- Panneau des étapes ---------- */ .sscc-m .panel{position:relative;display:flex;flex-direction:column;min-height:calc(100svh - var(--topbar) - 6px);padding-top:18px} .sscc-m .stepper{display:flex;align-items:center;margin:0;padding:0;list-style:none} .sscc-m .stepper li{display:flex;align-items:center;flex:1} .sscc-m .stepper li:last-child{flex:none} .sscc-m .st{display:flex;align-items:center;gap:8px;border:0;background:none;padding:4px 2px;border-radius:99px;font:600 13px var(--sans);color:var(--ink-3);white-space:nowrap} .sscc-m .st:disabled{cursor:default} .sscc-m .st-dot{position:relative;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;border:1.5px solid var(--line-2);background:var(--surface);font:600 12px var(--sans);color:var(--ink-2);transition:background-color .4s,border-color .4s,color .4s,transform .4s var(--ease-back)} .sscc-m .st-dot svg{position:absolute;width:15px;height:15px;opacity:0} .sscc-m .st-dot svg path{stroke-dasharray:22;stroke-dashoffset:22;transition:stroke-dashoffset .5s .1s var(--ease-out)} .sscc-m li.is-done .st-dot{background:var(--accent);border-color:var(--accent);color:transparent} .sscc-m li.is-done .st-dot svg{opacity:1;color:#fff} .sscc-m li.is-done .st-dot svg path{stroke-dashoffset:0} .sscc-m li.is-done .st{color:var(--ink-2)} .sscc-m li.is-done .st:hover .st-dot{transform:scale(1.1)} .sscc-m li.is-current .st{color:var(--ink)} .sscc-m li.is-current .st-dot{border-color:var(--accent);background:var(--accent);color:var(--sscc-sur-accent,#fff);box-shadow:0 0 0 5px color-mix(in srgb,var(--accent) 16%,transparent);transform:scale(1.06)} .sscc-m .st-track{flex:1;height:2px;margin:0 10px;border-radius:2px;background:var(--line);overflow:hidden} .sscc-m .st-track i{display:block;height:100%;background:var(--accent);transform:scaleX(0);transform-origin:0 50%;transition:transform .7s var(--ease-out)} .sscc-m li.is-done .st-track i{transform:scaleX(1)} /* 26/10 (Simon) : sur ordinateur, traits entre les étapes tous de la même longueur, celle du plus court (mesurée en JS) */ @media (min-width:861px){.sscc-m .stepper.is-egal li{flex:none}.sscc-m .stepper.is-egal .st-track{flex:none;width:var(--st-trk)}} .sscc-m .steps{position:relative;flex:1} .sscc-m .step{padding:30px 2px 28px} .sscc-m .eyebrow{display:flex;align-items:center;gap:8px;margin:0 0 12px;font:700 12px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--accent)} .sscc-m .step h2,.sscc-m .fin-h,.sscc-m .rx-head h1{font:400 clamp(32px,2.95vw,45px)/1.07 var(--serif);letter-spacing:-.012em;margin:0 0 12px;outline:none} /* 26/10 (Simon) : sur ordinateur, retours à la ligne choisis dans les titres des étapes (l'étape 3 tient sur une ligne) */ .sscc-m .br-pc{display:none} @media (min-width:861px){.sscc-m .br-pc{display:inline}.sscc-m .br-pc:has(+ [data-say]:empty){display:none}.sscc-m #t3{white-space:nowrap}} .sscc-m .step h2 em,.sscc-m .fin-h em,.sscc-m .rx-head h1 em{font-style:normal;font-weight:inherit;color:inherit} /* 25/10 : plus de mot en italique coloré dans les titres (retour de Simon) */ .sscc-m .lead{color:var(--ink-2);margin:0 0 26px;max-width:46ch} .sscc-m .lbl{display:block;font:600 13px var(--sans);color:var(--ink-2);margin:0 0 8px} .sscc-m .lbl em{font-style:normal;font-weight:500;color:var(--ink-3)} .sscc-m fieldset{border:0;margin:0;padding:0;min-width:0} /* Galerie des designs */ .sscc-m .gallery{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px 12px} .sscc-m .opt{position:relative;display:block;padding:7px;border-radius:16px;cursor:pointer;-webkit-tap-highlight-color:transparent} .sscc-m .thumb{position:relative;display:block;container-type:inline-size;aspect-ratio:1.6;border-radius:9px;overflow:hidden;box-shadow:0 1px 2px rgba(0,0,0,.08),0 10px 20px -12px rgba(0,0,0,.4);transition:transform .5s var(--ease-out),box-shadow .5s var(--ease-out)} .sscc-m .opt:hover .thumb{transform:translateY(-3px) rotate(-1.2deg);box-shadow:0 2px 4px rgba(0,0,0,.08),0 16px 26px -12px rgba(0,0,0,.45)} .sscc-m .opt:has(input:checked) .thumb{transform:translateY(-2px)} .sscc-m .t-brand{position:absolute;left:8cqw;bottom:8cqw;z-index:3;display:flex;align-items:center;gap:3cqw;font:400 11cqw/1 var(--serif);color:var(--t-ink)} .sscc-m .t-brand svg{width:12cqw;height:12cqw} .sscc-m .thumb .rings circle,.sscc-m .thumb .waves path,.sscc-m .thumb .stars circle,.sscc-m .thumb .branch,.sscc-m .thumb .sun,.sscc-m .thumb .drop,.sscc-m .thumb .wobble,.sscc-m .thumb .sprig,.sscc-m .thumb .swirl path{animation-play-state:paused} .sscc-m .opt:hover .thumb *,.sscc-m .opt:has(input:checked) .thumb *{animation-play-state:running!important} .sscc-m .opt-name{display:flex;align-items:center;justify-content:space-between;gap:6px;margin-top:9px;padding:0 2px;font:600 14px/1.2 var(--sans)} .sscc-m .opt-name small{font:500 12px var(--sans);color:var(--ink-3)} .sscc-m .badge{display:inline-flex;align-items:center;gap:4px;padding:3px 8px;border-radius:99px;background:color-mix(in srgb,var(--accent) 12%,var(--surface));color:var(--accent);font:700 10px/1.3 var(--sans);letter-spacing:.06em;text-transform:uppercase;white-space:nowrap} .sscc-m .badge svg{width:10px;height:10px} .sscc-m .sel-ring{position:absolute;top:0;left:0;z-index:2;border-radius:16px;border:2px solid var(--accent);box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 13%,transparent);pointer-events:none;transition:transform .55s var(--ease-back),width .55s var(--ease-out),height .55s var(--ease-out),opacity .3s,border-color .9s} .sscc-m .sel-ring.is-instant{transition:none} .sscc-m .opt:has(input:focus-visible),.sscc-m .chip:has(input:focus-visible),.sscc-m .soin:has(input:focus-visible),.sscc-m .dopt-head:has(input:focus-visible),.sscc-m .date:has(input:focus-visible),.sscc-m .hour:has(input:focus-visible){outline:3px solid color-mix(in srgb,var(--accent) 60%,#fff);outline-offset:3px} .sscc-m .trust{display:flex;flex-wrap:wrap;gap:6px 16px;margin:22px 0 0;padding:0;list-style:none;font:600 13px var(--sans);color:var(--ink-2)} .sscc-m .trust li{display:flex;align-items:center;gap:6px} /* Montants et soins */ .sscc-m .amode{margin-bottom:20px} .sscc-m .ap{animation:apin .45s var(--ease-out)} @keyframes apin{from{opacity:0;transform:translateY(8px)}} .sscc-m .chips{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px} .sscc-m .chip{position:relative;display:flex;align-items:baseline;justify-content:center;gap:2px;padding-top:20px;height:66px;border-radius:15px;background:var(--surface);border:1px solid var(--line);font:380 26px/1 var(--serif);letter-spacing:-.01em;cursor:pointer;transition:border-color .2s,transform .25s var(--ease-out),background-color .3s;-webkit-tap-highlight-color:transparent} .sscc-m .chip:hover{border-color:var(--line-2);transform:translateY(-2px)} .sscc-m .chip small{font-size:.55em;margin-left:2px} .sscc-m .chip:has(input:checked){background:color-mix(in srgb,var(--accent) 7%,var(--surface))} .sscc-m .chip .badge{position:absolute;z-index:3;top:-10px;left:50%;transform:translateX(-50%);background:var(--accent);color:var(--sscc-sur-accent,#fff);box-shadow:0 4px 10px -4px color-mix(in srgb,var(--accent) 80%,transparent)} .sscc-m .range-wrap{margin-top:22px;padding:16px 18px 18px;border-radius:16px;background:color-mix(in srgb,var(--surface) 60%,transparent);border:1px dashed var(--line-2)} .sscc-m .range-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:12px} .sscc-m .range-head .lbl{margin:0} .sscc-m .range-head output{font:400 22px/1 var(--serif)} .sscc-m input[type=range]{--pct:21%;-webkit-appearance:none;appearance:none;width:100%;height:28px;background:transparent;margin:0;cursor:pointer} .sscc-m input[type=range]::-webkit-slider-runnable-track{height:6px;border-radius:6px;background:linear-gradient(90deg,var(--accent) var(--pct),var(--line-2) var(--pct))} .sscc-m input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:26px;height:26px;margin-top:-10px;border-radius:50%;background:var(--surface);border:2px solid var(--accent);box-shadow:0 4px 12px -4px rgba(0,0,0,.35);transition:transform .2s var(--ease-back)} .sscc-m input[type=range]:active::-webkit-slider-thumb{transform:scale(1.18)} .sscc-m input[type=range]::-moz-range-track{height:6px;border-radius:6px;background:linear-gradient(90deg,var(--accent) var(--pct),var(--line-2) var(--pct))} .sscc-m input[type=range]::-moz-range-thumb{width:22px;height:22px;border-radius:50%;background:var(--surface);border:2px solid var(--accent)} .sscc-m input[type=range]:focus-visible{outline:none} .sscc-m input[type=range]:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 5px color-mix(in srgb,var(--accent) 30%,transparent)} .sscc-m .range-scale{display:flex;justify-content:space-between;margin-top:8px;font:600 15px var(--sans);color:var(--ink-2)} .sscc-m .chip-autre{font:600 14px/1.15 var(--sans);padding:0 8px;text-align:center;align-items:center;color:var(--ink-2)} .sscc-m .range-wrap:not([hidden]){margin-top:0;animation:ss-apparait .35s var(--ease-out)} .sscc-m .range-back{display:block;margin:14px auto 0;border:0;background:none;font:600 13.5px var(--sans);color:var(--accent);text-decoration:underline;text-underline-offset:3px;cursor:pointer} /* 28/10 (Simon) : changer le design après l'achat, sans refaire la commande */ .sscc-m .fin-redesign{margin-top:18px;font-weight:500;color:var(--ink-3)} .sscc-m .fin-redesign:hover{color:var(--accent)} .sscc-m .redesign-note{margin:16px 0 0;padding:12px 14px;border-radius:12px;background:color-mix(in srgb,var(--accent) 8%,transparent);font:500 13.5px/1.5 var(--sans);color:var(--ink-2)} .sscc-m.mode-redesign #stepper{pointer-events:none;opacity:.4} .sscc-m.mode-redesign #backBtn,.sscc-m.mode-redesign .foot-total{visibility:hidden} @keyframes ss-apparait{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}} .sscc-m .soins{position:relative;display:grid;gap:10px} .sscc-m .soin{display:grid;grid-template-columns:46px minmax(0,1fr) auto;align-items:center;gap:14px;padding:13px 16px 13px 13px;border-radius:16px;border:1px solid var(--line);background:var(--surface);cursor:pointer;transition:border-color .2s,transform .25s var(--ease-out);-webkit-tap-highlight-color:transparent} .sscc-m .soin:hover{border-color:var(--line-2);transform:translateX(3px)} .sscc-m .soin-ico{width:46px;height:46px;border-radius:13px;display:grid;place-items:center;background:color-mix(in srgb,var(--accent) 10%,transparent);color:var(--accent)} .sscc-m .soin-ico svg{width:24px;height:24px} .sscc-m .soin b{display:block;font:600 15px/1.25 var(--sans)} .sscc-m .soin small{display:block;color:var(--ink-2);font-size:13px} .sscc-m .soin .price{font:380 23px/1 var(--serif);white-space:nowrap} /* Champs */ .sscc-m .grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px} .sscc-m .field{position:relative;display:grid;align-content:start;margin-bottom:14px} .sscc-m .input{width:100%;height:54px;padding:0 16px;border-radius:14px;border:1px solid var(--line-2);background:var(--surface);font:500 16px var(--sans);color:var(--ink);transition:border-color .2s,box-shadow .25s,background-color .2s;-webkit-appearance:none;appearance:none} .sscc-m .input::placeholder{color:#a3958a} .sscc-m .input:hover{border-color:color-mix(in srgb,var(--ink) 30%,transparent)} .sscc-m .input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 15%,transparent)} .sscc-m .input[aria-invalid="true"]{border-color:var(--err);box-shadow:0 0 0 4px rgba(177,63,44,.12)} .sscc-m textarea.input{height:auto;min-height:104px;padding:12px 16px 26px;resize:none;font:500 23px/1.25 var(--hand)} .sscc-m textarea.input::placeholder{font:500 21px var(--hand)} .sscc-m .err{display:flex;align-items:center;gap:6px;margin-top:6px;color:var(--err);font:600 13px var(--sans)} .sscc-m .err:empty{display:none} .sscc-m .err::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor;flex:none} .sscc-m .counter{position:absolute;right:12px;bottom:12px;display:flex;align-items:center;gap:6px;font:600 11px var(--sans);color:var(--ink-3)} .sscc-m .counter svg{width:18px;height:18px;transform:rotate(-90deg)} .sscc-m .counter circle{fill:none;stroke-width:3} .sscc-m .counter .c-bg{stroke:var(--line)} .sscc-m .counter .c-fg{stroke:var(--accent);stroke-dasharray:44;stroke-dashoffset:44;transition:stroke-dashoffset .3s var(--ease-out),stroke .3s;stroke-linecap:round} .sscc-m .sugg{display:flex;flex-wrap:wrap;gap:8px;margin:-2px 0 0} .sscc-m .sugg button{border:1px dashed var(--line-2);background:transparent;border-radius:99px;padding:7px 13px;font:500 13px var(--sans);color:var(--ink-2);transition:border-color .2s,color .2s,background-color .2s,transform .2s} .sscc-m .sugg button:hover{border-style:solid;border-color:var(--accent);color:var(--accent);background:color-mix(in srgb,var(--accent) 6%,transparent)} .sscc-m .sugg button:active{transform:scale(.95)} .sscc-m .valid-ico{position:absolute;right:14px;top:50%;width:22px;height:22px;margin-top:-11px;border-radius:50%;background:var(--ok);color:#fff;display:grid;place-items:center;transform:scale(0);transition:transform .45s var(--ease-back);pointer-events:none} .sscc-m .valid-ico svg{width:13px;height:13px} .sscc-m .is-valid .valid-ico{transform:scale(1)} /* Remise */ .sscc-m .deliv{display:grid;gap:10px} .sscc-m .dopt{border:1px solid var(--line);border-radius:18px;background:var(--surface);transition:border-color .35s,box-shadow .35s} .sscc-m .dopt:has(.dopt-head input:checked){border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 13%,transparent),var(--sh-1)} .sscc-m .dopt-head{display:grid;grid-template-columns:44px minmax(0,1fr) auto;align-items:center;gap:14px;padding:14px 16px 14px 13px;border-radius:18px;cursor:pointer;-webkit-tap-highlight-color:transparent} .sscc-m .d-ico{width:44px;height:44px;border-radius:13px;display:grid;place-items:center;background:color-mix(in srgb,var(--accent) 10%,transparent);color:var(--accent);transition:background-color .35s,color .35s} .sscc-m .dopt:has(.dopt-head input:checked) .d-ico{background:var(--accent);color:var(--sscc-sur-accent,#fff)} .sscc-m .d-ico svg{width:23px;height:23px;transition:transform .5s var(--ease-back)} .sscc-m .dopt:has(.dopt-head input:checked) .d-ico svg{transform:rotate(-8deg) scale(1.06)} .sscc-m .dopt-head b{display:block;font:600 15px/1.25 var(--sans)} .sscc-m .dopt-head small{display:block;color:var(--ink-2);font-size:13px} .sscc-m .d-price{font:600 13px var(--sans);color:var(--ink-2);white-space:nowrap} .sscc-m .d-radio{width:20px;height:20px;border-radius:50%;border:1.5px solid var(--line-2);display:grid;place-items:center;margin-left:8px;transition:border-color .3s} .sscc-m .d-radio::after{content:'';width:10px;height:10px;border-radius:50%;background:var(--accent);transform:scale(0);transition:transform .4s var(--ease-back)} .sscc-m .dopt:has(.dopt-head input:checked) .d-radio{border-color:var(--accent)} .sscc-m .dopt:has(.dopt-head input:checked) .d-radio::after{transform:scale(1)} .sscc-m .d-right{display:flex;align-items:center} .sscc-m .dopt-body{display:grid;grid-template-rows:0fr;transition:grid-template-rows .55s var(--ease-out)} .sscc-m .dopt:has(.dopt-head input:checked) .dopt-body{grid-template-rows:1fr} .sscc-m .dopt-body>div{overflow:hidden;min-height:0} .sscc-m .dopt-inner{padding:2px 16px 16px} .sscc-m .when{margin:2px 0 14px} .sscc-m .dates{position:relative;display:flex;gap:8px;overflow-x:auto;padding:4px 2px 10px;scroll-snap-type:x proximity;scrollbar-width:none;-webkit-mask:linear-gradient(90deg,#000 88%,transparent);mask:linear-gradient(90deg,#000 88%,transparent)} .sscc-m .dates::-webkit-scrollbar{display:none} .sscc-m .date{flex:0 0 auto;width:64px;scroll-snap-align:start;display:grid;justify-items:center;gap:3px;padding:9px 0 10px;border-radius:14px;border:1px solid var(--line);background:var(--surface);cursor:pointer;transition:background-color .3s,border-color .3s,color .3s,transform .3s var(--ease-back);-webkit-tap-highlight-color:transparent} .sscc-m .date:hover{border-color:var(--line-2);transform:translateY(-2px)} .sscc-m .date small{font:700 10.5px/1 var(--sans);letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3);transition:color .3s} .sscc-m .date b{font:400 23px/1 var(--serif)} .sscc-m .date em{font:500 11px/1 var(--sans);font-style:normal;color:var(--ink-2);transition:color .3s} .sscc-m .date:has(input:checked){background:var(--accent);border-color:var(--accent);color:var(--sscc-sur-accent,#fff);transform:translateY(-2px);box-shadow:0 10px 18px -10px color-mix(in srgb,var(--accent) 80%,transparent)} .sscc-m .date:has(input:checked) small,.sscc-m .date:has(input:checked) em{color:rgba(255,255,255,.82)} .sscc-m .hours{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0 2px} .sscc-m .hour{display:inline-flex;align-items:center;height:38px;padding:0 15px;border-radius:99px;border:1px solid var(--line);background:var(--surface);font:600 14px var(--sans);cursor:pointer;transition:background-color .3s,border-color .3s,color .3s;-webkit-tap-highlight-color:transparent} .sscc-m .hour:has(input:checked){background:var(--ink);border-color:var(--ink);color:#fff} .sscc-m .sched{display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s var(--ease-out)} /* 26/10 (Simon) : sur ordinateur, flèches à droite pour faire défiler les dates (visibles avec « À une date choisie ») */ .sscc-m .when-row{display:flex;align-items:center;justify-content:space-between;gap:12px} .sscc-m .dates-nav{display:none;gap:6px;opacity:0;transform:translateX(6px);transition:opacity .35s,transform .45s var(--ease-out);pointer-events:none} .sscc-m .dates-nav button{display:grid;place-items:center;width:36px;height:36px;padding:0;border-radius:50%;border:1px solid var(--line);background:var(--surface);color:var(--ink);cursor:pointer;transition:background-color .25s,border-color .25s,opacity .25s} .sscc-m .dates-nav button:hover{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 8%,var(--surface))} .sscc-m .dates-nav button:disabled{opacity:.35;cursor:default} .sscc-m .dates-nav svg{width:16px;height:16px} @media (hover:hover) and (pointer:fine){.sscc-m .dates-nav{display:flex}} .sscc-m .when-row.is-date .dates-nav{opacity:1;transform:none;pointer-events:auto} .sscc-m .sched>div{overflow:hidden;min-height:0} .sscc-m .sched.is-open{grid-template-rows:1fr} /* 26/10 (Simon) : courrier daté, les dimanches restent visibles mais grisés (pas de distribution) */ .sscc-m .c-when-row{margin-top:4px} .sscc-m .date.is-off{cursor:not-allowed;background:transparent;border-style:dashed;opacity:.42} .sscc-m .date.is-off:hover{transform:none;border-color:var(--line)} .sscc-m #csched .dates{padding-bottom:4px} .sscc-m .note{display:flex;align-items:center;gap:12px;margin-top:12px;padding:12px 14px;border-radius:14px;background:color-mix(in srgb,var(--accent) 8%,transparent);font:500 14px/1.4 var(--sans)} .sscc-m .note svg{width:22px;height:22px;flex:none;color:var(--accent)} .sscc-m .note b{font-weight:700} .sscc-m .note.pulse{animation:notep .6s var(--ease-out)} @keyframes notep{30%{background:color-mix(in srgb,var(--accent) 16%,transparent)}} .sscc-m .map{position:relative;height:236px;border-radius:14px;overflow:hidden;background:#efe9df;margin-bottom:10px} .sscc-m .map svg{width:100%;height:100%} .sscc-m .pin{position:absolute;left:58%;top:22%;width:30px;height:38px;margin-left:-15px;color:var(--accent);animation:pin .9s var(--ease-back) both;transform-origin:50% 100%} .sscc-m .pin svg{width:100%;height:100%} .sscc-m .pin::after{content:'';position:absolute;left:50%;bottom:-4px;width:16px;height:6px;margin-left:-8px;border-radius:50%;background:rgba(0,0,0,.2);animation:pinsh .9s var(--ease-out) both} @keyframes pin{0%{transform:translateY(-60px) scale(.8);opacity:0}60%{opacity:1}100%{transform:none}} @keyframes pinsh{0%{transform:scale(.3);opacity:0}100%{transform:none;opacity:1}} .sscc-m .addr{font:500 14px/1.45 var(--sans);color:var(--ink-2)} .sscc-m .addr b{color:var(--ink);font-weight:700} .sscc-m .stamp{display:none} /* 25/10 (Simon) : pas de timbre (logo de chaque institut inconnu), le champ adresse prend toute la largeur */ .sscc-m .cp-row{display:grid;grid-template-columns:128px 1fr;gap:12px} /* Récapitulatif (ticket) */ .sscc-m .ticket-wrap{position:relative;margin:0 0 18px} .sscc-m .ticket-slot{position:relative;z-index:2;height:9px;margin:0 4px;border-radius:99px;background:linear-gradient(180deg,color-mix(in srgb,var(--ink) 70%,var(--accent)),var(--ink));opacity:.82;box-shadow:inset 0 2px 3px rgba(0,0,0,.45)} .sscc-m .ticket-shadow{filter:drop-shadow(0 10px 16px rgba(42,34,29,.12))} .sscc-m .ticket{position:relative;margin:-5px 16px 0;padding:14px 18px 24px;background:var(--surface);--z:9px;-webkit-mask:conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) 50%/calc(2*var(--z)) 100%;mask:conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) 50%/calc(2*var(--z)) 100%} .sscc-m .ticket.print{animation:print 1.15s cubic-bezier(.3,.7,.25,1) both} @keyframes print{from{clip-path:inset(0 0 100% 0);transform:translateY(-30px)}to{clip-path:inset(0 0 -10px 0);transform:none}} .sscc-m .t-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 12px;align-items:center;padding:8px 0;border-bottom:1px dashed var(--line-2)} .sscc-m .t-row:first-child{padding-top:0} .sscc-m .t-row>div{min-width:0} .sscc-m .t-row small{display:block;font:700 10.5px/1.2 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)} .sscc-m .t-val{display:block;font:500 15px/1.35 var(--sans)} .sscc-m .t-val.t-design{display:flex;align-items:center;gap:12px} .sscc-m .t-design .thumb{width:58px;flex:none;border-radius:5px} .sscc-m .t-design b{display:block;font-weight:600} .sscc-m .t-design small{display:block;font:500 13px/1.3 var(--sans);letter-spacing:0;text-transform:none;color:var(--ink-2)} .sscc-m .t-edit{border:0;background:none;padding:6px 8px;margin:-6px -8px;border-radius:8px;font:600 13px var(--sans);color:var(--accent);text-decoration:underline;text-decoration-color:color-mix(in srgb,var(--accent) 35%,transparent);text-underline-offset:3px} .sscc-m .t-edit:hover{text-decoration-color:currentColor} .sscc-m .t-total{display:flex;justify-content:space-between;align-items:baseline;padding-top:10px} .sscc-m .t-total span{font:700 13px var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2)} .sscc-m .t-total b{font:400 30px/1 var(--serif);letter-spacing:-.02em} .sscc-m .ticket.print .t-row,.sscc-m .ticket.print .t-total{animation:tline .5s var(--ease-out) both} .sscc-m .ticket.print .t-row:nth-child(1){animation-delay:.45s}.sscc-m .ticket.print .t-row:nth-child(2){animation-delay:.55s}.sscc-m .ticket.print .t-row:nth-child(3){animation-delay:.65s}.sscc-m .ticket.print .t-row:nth-child(4){animation-delay:.75s}.sscc-m .ticket.print .t-row:nth-child(5){animation-delay:.85s}.sscc-m .ticket.print .t-total{animation-delay:.95s} @keyframes tline{from{opacity:0;transform:translateY(6px)}} /* Paiement intégré */ .sscc-m .pe{position:relative;border:1px solid var(--line);border-radius:20px;background:var(--surface);padding:16px;box-shadow:var(--sh-1);overflow:hidden} .sscc-m .pe-progress{position:absolute;left:0;right:0;top:0;height:3px;overflow:hidden;opacity:0;transition:opacity .3s} .sscc-m .pe-progress::after{content:'';position:absolute;top:0;bottom:0;width:40%;background:var(--accent);animation:indet 1.1s var(--ease-io) infinite} @keyframes indet{from{transform:translateX(-100%)}to{transform:translateX(260%)}} .sscc-m .pe.is-busy .pe-progress{opacity:1} .sscc-m .pe.is-busy .pe-fields{opacity:.55;pointer-events:none;transition:opacity .3s} .sscc-m .pe-express{display:grid;grid-template-columns:1fr 1fr;gap:10px} .sscc-m .xpay{position:relative;overflow:hidden;height:50px;border-radius:12px;display:flex;align-items:center;justify-content:center;gap:8px;font:600 16px var(--sans);letter-spacing:-.01em;transition:transform .2s,box-shadow .3s} .sscc-m .xpay:hover{transform:translateY(-1px);box-shadow:0 8px 18px -10px rgba(0,0,0,.5)} .sscc-m .xpay:active{transform:scale(.98)} .sscc-m .xpay svg{width:20px;height:20px} .sscc-m .xpay.apple{background:#0b0b0b;color:#fff;border:0} .sscc-m .xpay.google{background:#fff;color:#2b2b2b;border:1px solid #d9d4cf} /* 25/10 (Simon) : Achat / Réception / Lecture auto rangés dans un petit menu en haut à droite */ .sscc-m .menu-btn{margin-left:auto;width:44px;height:44px;border-radius:50%;border:1px solid var(--line-2);background:var(--surface);display:grid;place-content:center;gap:4px;cursor:pointer;flex:none} .sscc-m .menu-btn span{display:block;width:18px;height:2px;border-radius:2px;background:var(--ink);transition:transform .3s,opacity .2s} .sscc-m .menu-btn[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)} .sscc-m .menu-btn[aria-expanded="true"] span:nth-child(2){opacity:0} .sscc-m .menu-btn[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)} .sscc-m.demo-on .menu-btn{border-color:var(--accent);box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 14%,transparent)} .sscc-m.demo-on .menu-btn span{display:none} .sscc-m.demo-on .menu-btn::after{content:"";width:13px;height:13px;border-radius:3px;background:var(--accent)} .sscc-m .top-menu{position:absolute;top:calc(100% - 4px);right:clamp(16px,3vw,40px);display:flex;flex-direction:column;align-items:stretch;gap:10px;padding:12px;border-radius:18px;background:var(--surface);box-shadow:0 18px 40px -12px rgba(30,24,20,.28);opacity:0;transform:translateY(-6px);pointer-events:none;transition:opacity .2s,transform .25s var(--ease-out)} .sscc-m .top-menu.is-open{opacity:1;transform:none;pointer-events:auto} .sscc-m .top-menu .demo-btn{justify-content:flex-start;padding:0 16px 0 6px!important} .sscc-m .top-menu .demo-lbl{display:inline!important} .sscc-m .topbar{position:sticky} /* scène de la carte : coins arrondis sur tout le fond (Safari laissait déborder les calques animés), icône de retournement en bas à droite */ .sscc-m .stage{clip-path:inset(0 round 32px)} .sscc-m .stage-tools{position:absolute;right:16px;bottom:16px;z-index:3} .sscc-m #flipBtn{width:42px;height:42px;padding:0;justify-content:center} .sscc-m #flipBtn span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} .sscc-m .opt{display:grid} /* 28/10 (Simon) : sur ordinateur, bouton de retournement sous la carte, centré, picto et libellé */ @media (min-width:901px){.sscc-m .stage-tools{position:static;align-self:center;width:auto}.sscc-m #flipBtn{width:max-content!important;max-width:max-content;flex:none;padding:0 16px 0 13px;gap:8px;font-size:13.5px}.sscc-m #flipBtn span:not(.rpl){position:static;width:auto;height:auto;overflow:visible;clip:auto}} @media (max-width:860px){ .sscc-m .stage-col .stage{clip-path:inset(0 round 26px);padding:26px 16px 26px} .sscc-m .stage-col .scene{--w:min(250px,calc(100vw - 132px))} .sscc-m .stage-tools{right:8px;bottom:8px} .sscc-m #flipBtn{width:38px;height:38px} .sscc-m .trust.only-m{display:flex!important} .sscc-m .opt{border-radius:12px} .sscc-m .gallery{margin-top:6px} .sscc-m .trust{flex-wrap:nowrap;justify-content:space-between;gap:6px;margin-top:22px;font-size:11.5px} .sscc-m .trust svg{width:14px;height:14px} .sscc-m .stepper .st-dot{width:24px!important;height:24px!important;font-size:11.5px!important} .sscc-m .stepper .st-dot svg{width:13px!important;height:13px!important} } /* 25/10 (Simon) : étape Message plus compacte sur téléphone */ @media (max-width:860px){ .sscc-m #to,.sscc-m #from{height:46px} .sscc-m textarea.input{min-height:78px;padding:9px 14px 22px;font-size:21px} .sscc-m textarea.input::placeholder{font-size:19px} .sscc-m .sugg{flex-wrap:nowrap;gap:6px} .sscc-m .sugg button{padding:6px 9px;font-size:12px;white-space:nowrap} .sscc-m .chips .chip-autre{font:600 13.5px/1.2 var(--sans)!important} /* message d'aide des prénoms centré sous les deux champs, sur une seule ligne */ .sscc-m [data-step="3"] .grid2{display:grid;grid-template-columns:1fr 1fr;column-gap:12px} .sscc-m [data-step="3"] .grid2>.field{display:contents} .sscc-m [data-step="3"] .grid2 #to{grid-column:1;grid-row:1} .sscc-m [data-step="3"] .grid2 #from{grid-column:2;grid-row:1} .sscc-m [data-step="3"] .grid2 .err{grid-column:1/-1;grid-row:2;justify-content:center;text-align:center} .sscc-m [data-step="3"] .grid2 .err:empty{display:none} /* étape Remise plus compacte */ .sscc-m .dopt-head{padding:9px 12px 9px 10px;gap:11px;grid-template-columns:36px minmax(0,1fr) auto} .sscc-m .d-ico{width:36px;height:36px;border-radius:11px} .sscc-m .d-ico svg{width:19px;height:19px} .sscc-m .dopt-head b{font-size:14.5px} .sscc-m .dopt-head small{font-size:12.5px} .sscc-m .dopt-inner{padding:0 12px 12px} .sscc-m [data-step="4"] .input{height:46px} .sscc-m [data-step="4"] .lbl{margin-bottom:4px} .sscc-m .when{margin:0 0 10px} .sscc-m .note{margin-top:8px;padding:9px 12px;font-size:13px} .sscc-m .deliv{gap:8px} .sscc-m [data-step="5"] .input{height:46px} } /* 25/10 (Simon) : réglages fins mobile, étapes 1 et 2 */ @media (max-width:860px){ .sscc-m .trust.only-m{justify-content:center!important;gap:14px!important;font-size:13px!important;margin-top:20px} .sscc-m .trust svg{width:16px!important;height:16px!important} .sscc-m .panel-foot{padding-bottom:calc(52px + env(safe-area-inset-bottom))!important} .sscc-m .stepper{bottom:calc(12px + env(safe-area-inset-bottom))!important} .sscc-m .panel{padding-bottom:146px} } .sscc-m .range-head .lbl{font-size:16px} .sscc-m .range-head output{font-size:30px} .sscc-m .range-scale{font-size:17px} .sscc-m .chips .chip{padding-top:0;align-items:center} .sscc-m .chips .chip small{align-self:center} .sscc-m .chip .badge{top:-11px} .sscc-m [data-step="3"] label.lbl[for="msg"]{margin-top:18px;display:block} .sscc-m .fin-next{position:relative;z-index:5;display:flex;margin:18px auto 0;padding:0 30px;width:max-content} /* 27/10 (Simon) : courrier, une phrase en grand au-dessus de « Continuer » quand la pochette s'est envolée (le bouton ne flotte plus seul) */ .sscc-m .fin-mot{position:relative;z-index:5;max-width:min(560px,88vw);margin:0 auto 8px;font:600 clamp(26px,2.4vw,36px)/1.15 var(--serif);letter-spacing:-.015em;color:var(--ink);text-align:center;text-wrap:balance} .sscc-m .fin-status{visibility:hidden!important;height:0!important;min-height:0!important;margin:0!important;overflow:hidden} /* 25/10 (Simon) : plus de texte d'état sous le téléphone */ @media (max-width:860px){.sscc-m .fin-status{font-size:14px}} .sscc-m #finFoot{line-height:1.9} .sscc-m .rx-info{justify-content:center;text-align:center} .sscc-m .rx-site{white-space:nowrap} .sscc-m #rxSite{align-self:center} @media (max-width:860px){ .sscc-m.rx-ouvert .rx-stage{padding:22px 12px 20px!important} .sscc-m .panel-foot{padding-bottom:calc(58px + env(safe-area-inset-bottom))!important} } /* 25/10 (Simon) : sélection du design = contour collé à la vignette (l'anneau glissant débordait en bas sur iPhone) */ .sscc-m #gallery .sel-ring{display:none} .sscc-m #gallery .opt:has(input:checked) .thumb{outline:2px solid var(--accent);outline-offset:3px;box-shadow:0 0 0 7px color-mix(in srgb,var(--accent) 13%,transparent),0 10px 20px -12px rgba(0,0,0,.4)} .sscc-m #gallery .opt:has(input:focus-visible) .thumb{outline-width:3px} /* 25/10 : titres et chiffres en Source Sans 3, plus pleins pour compenser l'abandon du serif */ .sscc-m .step h2,.sscc-m .fin-h,.sscc-m .rx-head h1,.sscc-m h1,.sscc-m h2{font-weight:600!important;letter-spacing:-.015em} .sscc-m .chip,.sscc-m .range-head output,.sscc-m .foot-amt,.sscc-m .rx-amount,.sscc-m .f-amount{font-weight:600!important} .sscc-m .map.osm{height:236px!important;background:#e8e4dc} .sscc-m .map.osm iframe{display:block;width:100%;height:100%;border:0} .sscc-m #mini{display:none!important} /* 25/10 (Simon) : plus de mini-carte entre Retour et Continuer */ .sscc-m .osm-lien{position:absolute;right:8px;bottom:8px;padding:5px 10px;border-radius:99px;background:rgba(255,255,255,.92);font:600 12px var(--sans);color:var(--ink);text-decoration:none;box-shadow:0 2px 8px rgba(0,0,0,.15)} /* 25/10 (Simon) : écran du bénéficiaire, tout centré, textes plus lisibles, boutons côte à côte sous le code */ .sscc-m .rx-details,.sscc-m .rx-panel,.sscc-m .rx-top,.sscc-m .rx-codebox,.sscc-m .rx-info{text-align:center} .sscc-m .rx-top{flex-direction:column;align-items:center;justify-content:center} .sscc-m .rx-amount{justify-content:center} .sscc-m .rx-details .eyebrow{font-size:13px;justify-content:center} .sscc-m .rx-panel .rx-soin{font-size:21px!important;font-weight:600;color:var(--ink);margin-top:10px} .sscc-m .rx-panel .rx-valid{font-size:17.5px!important;justify-content:center;margin-top:-1px} /* 26/10 : écart prestation / validité réduit de 30 % */ .sscc-m .rx-panel .rx-valid svg{width:19px;height:19px} .sscc-m .rx-codebox{grid-template-columns:1fr;justify-items:center} .sscc-m .rx-code{white-space:nowrap;word-break:normal} .sscc-m .rx-btns{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:10px} .sscc-m .rx-btns .rx-copy{margin-top:0} .sscc-m .rx-site{height:38px;padding:0 14px;font-size:13px;text-decoration:none;display:inline-flex;align-items:center} .sscc-m .rx-actions{justify-content:center} /* 25/10 : réassurance réduite à « Valable 12 mois », centrée ; plus d'air autour de la carte à l'étape 1 */ .sscc-m .trust li:not(:first-child),.sscc-m .reassure li:not(:first-child){display:none!important} .sscc-m .trust.only-m{justify-content:center!important;font-size:15px!important} .sscc-m .reassure{justify-content:center;font-size:15px} @media (max-width:860px){ .sscc-m[data-etape="1"] .stage-col .stage,.sscc-m:not([data-etape]) .stage-col .stage{padding-top:18px!important;padding-bottom:18px!important} /* 28/10 (Simon) : 30 % d’espace en moins */ } .sscc-m .rx-top>*{width:100%;text-align:center} .sscc-m .rx-top .eyebrow,.sscc-m .rx-valid{justify-content:center!important} .sscc-m .rx-info{justify-content:center!important;text-align:center!important} .sscc-m .rx-btns>*{height:38px!important;font-size:13px!important;padding:0 14px!important;border-radius:99px} /* 25/10 (Simon) : faces de la carte plus lisibles ; plus de petit logo dans la bande du dos */ .sscc-m .f-brand svg{width:9.6cqw;height:9.6cqw} .sscc-m .f-brand b{font-size:7cqw} .sscc-m .f-brand small{font-size:2.2cqw} .sscc-m .f-kind{font-size:2.5cqw;padding:1.8cqw 3cqw} .sscc-m .f-to small{font-size:2.6cqw;margin-bottom:1cqw} .sscc-m .b-strip>svg{display:none} .sscc-m .f-amount{margin-bottom:-1.5cqw} .sscc-m .f-soin::before{display:none} .sscc-m .f-soin{font-size:4.1cqw;font-weight:600} .sscc-m .f-mid{align-self:end;margin-bottom:2.6cqw} /* 25/10 (Simon) : soin plus gros, juste au-dessus de « Pour », sans tiret */ /* 25/10 (Simon) : bas du montant aligné sur le bas du prénom */ .sscc-m .b-strip{justify-content:flex-start;gap:9cqw} .sscc-m .b-strip small{font-size:2.6cqw;letter-spacing:.12em;margin-bottom:0;line-height:1.15;white-space:nowrap} .sscc-m .b-strip>div{display:flex;flex-direction:column;gap:.6cqw} .sscc-m .b-code{font-size:4.2cqw;line-height:1} .sscc-m .b-valid{font-size:4cqw;line-height:1} .sscc-m .b-strip{padding:3.6cqw 7cqw 4cqw} /* 25/10 (Simon) : bas de l'écran du bénéficiaire, institut puis adresse, centrés et plus lisibles ; boutons identiques */ .sscc-m .rx-info{display:block!important;font-size:15.5px!important;line-height:1.55!important} .sscc-m .rx-info b{font-size:16.5px} .sscc-m .rx-head,.sscc-m .rx-head h1,.sscc-m .rx-head .lead{text-align:center;margin-left:auto;margin-right:auto} .sscc-m .rx-btns{flex-wrap:nowrap!important} .sscc-m .rx-btns>*{flex:1 1 0;min-width:0;max-width:170px;padding:0 10px!important;justify-content:center;gap:7px;text-decoration:none!important;border:1px solid var(--line-2)!important;color:var(--ink)!important;background:var(--surface)!important;white-space:nowrap} .sscc-m .rx-btns svg{width:16px;height:16px;flex:none} /* 25/10 (Simon) : plan sobre et automatique (tuiles vectorielles OpenFreeMap « positron », épingle aux couleurs de l'institut) */ .sscc-m .map.plan{height:189px!important;background:#eef0ee} /* 26/10 (Simon) : horaires du retrait, lundi à jeudi à gauche, vendredi à dimanche à droite (repris de la fiche Google) */ .sscc-m .hor-retrait{display:grid;grid-template-columns:1fr 1fr;gap:0 22px;margin:10px 0 12px;padding:11px 14px;border-radius:12px;background:color-mix(in srgb,var(--stage) 22%,#fff)} .sscc-m .hor-retrait dl{margin:0;align-content:start;display:grid;grid-template-columns:auto 1fr;gap:3px 10px;font:500 13px/1.4 var(--sans);color:var(--ink-2)} .sscc-m .hor-retrait dt{font-weight:600;color:var(--ink)} .sscc-m .hor-retrait dd{margin:0;text-align:right;white-space:nowrap} .sscc-m .hor-retrait .ferme{opacity:.6} @media (max-width:380px){.sscc-m .hor-retrait{gap:0 14px;padding:10px 12px}.sscc-m .hor-retrait dl{font-size:12px;gap:3px 6px}} .sscc-m .plan-pin{width:32px;height:42px;color:var(--accent);filter:drop-shadow(0 5px 6px rgba(0,0,0,.28))} .sscc-m .plan-pin svg{display:block;width:100%;height:100%} .sscc-m .plan .maplibregl-ctrl-attrib{font-size:10px;background:rgba(255,255,255,.75)} .sscc-m .plan .maplibregl-ctrl-group{border-radius:10px;box-shadow:0 2px 8px rgba(0,0,0,.12)} /* 25/10 (Simon) : « Retour » au même format que « Continuer », libellés plus lisibles sur ordinateur, vignettes sans logo ni nom */ @media (min-width:861px){ .sscc-m .btn-back{height:56px!important;font:600 16px/1 var(--sans)!important;padding:0 22px 0 18px!important;align-items:center} .sscc-m .btn-back .lbl{font:inherit!important;margin:0!important;line-height:1!important;display:inline!important;color:inherit!important} } @media (max-width:860px){ .sscc-m .btn-back{height:56px;width:56px} } /* 25/10 : sur mobile, la flèche seule */ @media (min-width:861px){ .sscc-m .lbl{font-size:15.5px!important;margin-bottom:7px} .sscc-m .input:not(textarea){height:48px!important} .sscc-m textarea.input{min-height:92px} .sscc-m .pe-fields .input:not(textarea){height:46px!important} .sscc-m .dopt-head{padding:11px 16px 11px 13px} } .sscc-m #gallery .t-brand,.sscc-m .gal-fantome .t-brand,.sscc-m .t-design .t-brand{display:none} .sscc-m .pe-or{display:none!important} /* 25/10 (Simon) : lien discret vers les conditions d'utilisation (texte par défaut, modifiable par l'institut) */ .sscc-m .cgv{margin:10px 0 0;text-align:center;font:500 13px/1.5 var(--sans);color:var(--ink-3)} .sscc-m .cgv-lien{border:0;background:none;padding:0;font:inherit;color:var(--ink-2);text-decoration:underline;text-underline-offset:3px;cursor:pointer} .sscc-m .cgv-dlg{max-width:min(560px,calc(100vw - 32px));border:0;border-radius:22px;padding:26px 26px 22px;background:var(--surface);color:var(--ink);box-shadow:0 30px 80px -20px rgba(0,0,0,.4)} .sscc-m .cgv-dlg::backdrop{background:rgba(30,24,20,.45);backdrop-filter:blur(3px)} .sscc-m .cgv-dlg h2{margin:0 0 14px;font:600 21px/1.25 var(--sans)} .sscc-m .cgv-texte p{margin:0 0 10px;font:400 15px/1.55 var(--sans);color:var(--ink-2)} .sscc-m .cgv-note{margin:14px 0 18px;font:500 12.5px var(--sans);color:var(--ink-3)} .sscc-m .cgv-fermer{width:100%} /* 25/10 (Simon) : pas de zoom involontaire (double tap, pincement, focus d'un champ sur iPhone) */ .sscc-m,.sscc-m{touch-action:pan-x pan-y} .sscc-m .input:not(textarea),.sscc-m select{font-size:max(16px,1em)} .sscc-m #delivBox-err:empty{display:none} .sscc-m #delivBox-err{justify-content:center;margin:0 0 4px} /* 25/10 (Simon) : « Carte cadeau » quitte le recto pour le bas gauche du verso, côté petit mot */ .sscc-m .f-kind{display:none!important} .sscc-m .b-foot{display:flex;align-items:flex-end;justify-content:space-between;gap:3cqw;margin-top:1cqw} .sscc-m .b-foot .b-sign{margin-top:0} .sscc-m .b-kind{font:600 2.2cqw/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;padding:1.4cqw 2.4cqw;border-radius:99px;border:1px solid color-mix(in srgb,currentColor 35%,transparent);opacity:.8;white-space:nowrap} /* 26/10 (Simon) : « Carte cadeau » revient au recto, sous le nom de l'institut, pastille blanche sans bordure, un peu plus grande ; plus rien au verso */ .sscc-m .f-brand .f-kind{display:inline-block!important;margin-top:2.2cqw;font:700 2.7cqw/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;padding:1.65cqw 3cqw 1.05cqw;border:0;border-radius:99px;background:#fff;color:var(--c-paper-ink);opacity:1;white-space:nowrap} .sscc-m .b-foot{justify-content:flex-start} /* 26/10 (Simon) : « De la part de » en bas à gauche, loin du QR code */ .sscc-m .b-de{font:500 2.5cqw/1 var(--sans);opacity:.7;margin-right:.6cqw;vertical-align:.25em} .sscc-m.sans-montant #buy .f-amount,.sscc-m.sans-montant .foot-total,.sscc-m.sans-montant .mini-amt{visibility:hidden} /* 28/10 : le montant n est masqué que dans le parcours d achat, jamais sur la carte reçue */ .sscc-m .pe-express,.sscc-m .pe-or,.sscc-m #rxThanks{display:none} /* 25/10 : Apple Pay et Google Pay retirés (Simon), carte bancaire seule */ .sscc-m .pe-or{display:flex;align-items:center;gap:12px;margin:15px 0 13px;font:500 13px var(--sans);color:var(--ink-3)} .sscc-m .pe-or::before,.sscc-m .pe-or::after{content:'';flex:1;height:1px;background:var(--line)} .sscc-m .pe-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 10px} .sscc-m .pe-grid .full{grid-column:1/-1} /* 26/10 (Simon) : « Nom et prénom » à droite de l'e-mail sur ordinateur, l'un sous l'autre sur téléphone */ @media (max-width:860px){.sscc-m .pe-grid .pe-duo{grid-column:1/-1}} /* 26/10 (Simon) : total TTC, mention discrète en bas à droite du symbole € */ .sscc-m .t-total b small{display:inline-block;margin-left:3px;font:600 9.5px/1 var(--sans);letter-spacing:.1em;color:var(--ink-3);vertical-align:baseline} /* 26/10 (Simon) : « Je suis une entreprise », case discrète sous le total, encadré des informations de facturation */ .sscc-m .pro{margin:-4px 2px 16px} /* 27/10 (Simon) : case centrée sous le total */ .sscc-m .pro-check{position:relative;display:flex;width:fit-content;margin:0 auto;align-items:center;gap:9px;padding:4px 2px;font:500 14px/1.3 var(--sans);color:var(--ink-2);cursor:pointer;-webkit-tap-highlight-color:transparent} .sscc-m .pro-check input{position:absolute;opacity:0;width:1px;height:1px} .sscc-m .pro-tick{display:grid;place-items:center;width:18px;height:18px;border-radius:5px;border:1.5px solid var(--line-2);background:var(--surface);transition:background-color .25s,border-color .25s} .sscc-m .pro-tick svg{width:12px;height:12px;fill:none;stroke:#fff;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;opacity:0;transition:opacity .2s} .sscc-m .pro-check input:checked+.pro-tick{background:var(--accent);border-color:var(--accent)} .sscc-m .pro-check input:checked+.pro-tick svg{opacity:1} .sscc-m .pro-check input:focus-visible+.pro-tick{outline:3px solid color-mix(in srgb,var(--accent) 60%,#fff);outline-offset:2px} .sscc-m .pro-body{display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s var(--ease-out)} .sscc-m .pro-body>div{overflow:hidden;min-height:0} .sscc-m .pro.is-open .pro-body{grid-template-rows:1fr} .sscc-m .pro-inner{margin-top:10px;padding:16px 16px 12px;border:1px solid var(--line);border-radius:16px;background:var(--surface)} .sscc-m .pro-titre{margin:0 0 12px;font:700 12px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2)} .sscc-m .pro-inner .field{margin-bottom:10px} .sscc-m .pro-note{margin:4px 0 0;font:400 12.5px/1.4 var(--sans);color:var(--ink-3)} .sscc-m .pe .field{margin-bottom:10px} .sscc-m .pe .input{height:50px;border-radius:12px;font-size:16px;font-variant-numeric:tabular-nums} .sscc-m .ctl{position:relative} .sscc-m .brands{position:absolute;right:12px;top:50%;margin-top:-11px;display:flex;gap:4px;pointer-events:none;transition:opacity .3s} .sscc-m .brands i{display:grid;place-items:center;width:34px;height:22px;border-radius:5px;font:800 8.5px/1 var(--sans);font-style:normal;letter-spacing:.02em;color:#fff;transition:opacity .3s,transform .3s var(--ease-back)} .sscc-m .brands .b-cb{background:linear-gradient(135deg,#1b5f8a,#2aa36b)} .sscc-m .brands .b-visa{background:#1a1f71} .sscc-m .brands .b-mc{background:#2d2a26} .sscc-m .brands .b-mc::before{content:'';width:18px;height:11px;background:radial-gradient(circle at 34% 50%,#eb001b 5.5px,transparent 6px),radial-gradient(circle at 66% 50%,rgba(247,158,27,.92) 5.5px,transparent 6px)} .sscc-m .brands.has-brand i{opacity:.25} .sscc-m .brands.has-brand i.on{opacity:1;transform:scale(1.08)} .sscc-m .pe-card .input{padding-right:132px} .sscc-m .pe-card.is-valid .brands{opacity:0} .sscc-m .pe-hint{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-top:4px;font:500 12.5px var(--sans);color:var(--ink-3)} .sscc-m .link-btn{border:0;background:none;padding:2px 0;font:600 12.5px var(--sans);color:var(--accent);text-decoration:underline;text-underline-offset:3px} .sscc-m .secure{display:flex;align-items:center;gap:8px;justify-content:center;margin-top:14px;font:500 12.5px var(--sans);color:var(--ink-3)} .sscc-m .secure svg{width:14px;height:14px} .sscc-m .shake{animation:shake .5s var(--ease-out)} @keyframes shake{20%{transform:translateX(-7px)}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(2px)}} /* Pied du panneau */ .sscc-m .panel-foot{position:sticky;bottom:0;z-index:6;display:flex;align-items:center;gap:14px;padding:18px 0 22px;margin-top:auto;background:linear-gradient(to top,var(--bg) 72%,color-mix(in srgb,var(--bg) 0%,transparent))} .sscc-m .btn-back{display:inline-flex;align-items:center;gap:8px;height:52px;padding:0 18px 0 14px;border-radius:999px;border:1px solid var(--line-2);background:transparent;font:600 15px var(--sans);color:var(--ink);transition:background-color .2s,border-color .2s,opacity .3s,transform .2s} .sscc-m .btn-back:hover{background:var(--surface);border-color:var(--ink)} .sscc-m .btn-back svg{width:18px;height:18px;transition:transform .3s var(--ease-back)} .sscc-m .btn-back:hover svg{transform:translateX(-3px)} .sscc-m .btn-back[aria-hidden="true"]{display:none} .sscc-m .foot-total{margin-right:auto;display:grid;line-height:1.1} .sscc-m .foot-total small{font:700 10.5px var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)} .sscc-m .foot-amt{display:flex;align-items:flex-start;font:400 28px/1 var(--serif);letter-spacing:-.02em;font-variant-numeric:lining-nums tabular-nums} .sscc-m .foot-amt .cur{font-size:.55em;margin:.15em 0 0 .1em} .sscc-m .btn-primary{position:relative;overflow:hidden;isolation:isolate;display:inline-flex;align-items:center;justify-content:center;gap:10px;height:56px;min-width:56px;padding:0 28px;border-radius:999px;border:0;background:var(--accent);color:var(--sscc-sur-accent,#fff);font:600 16px/1 var(--sans);white-space:nowrap;box-shadow:0 12px 26px -12px color-mix(in srgb,var(--accent) 85%,transparent);transition:transform .25s var(--ease-out),box-shadow .3s,background-color .4s,width .5s var(--ease-io),padding .5s var(--ease-io)} .sscc-m .btn-primary:hover{transform:translateY(-2px);box-shadow:0 16px 30px -12px color-mix(in srgb,var(--accent) 90%,transparent)} .sscc-m .btn-primary:active{transform:translateY(0) scale(.98)} .sscc-m .btn-primary::before{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.3) 50%,transparent 70%);transform:translateX(-120%);transition:transform .9s var(--ease-out)} .sscc-m .btn-primary:hover::before{transform:translateX(120%)} .sscc-m .btn-primary .arrow{width:18px;height:18px;transition:transform .35s var(--ease-back)} .sscc-m .btn-primary:hover .arrow{transform:translateX(4px)} .sscc-m .btn-primary .lock{width:16px;height:16px} .sscc-m .btn-primary .b-lbl{display:inline-flex;align-items:center;gap:10px;transition:opacity .25s} .sscc-m .btn-primary .spin,.sscc-m .btn-primary .done{position:absolute;inset:0;margin:auto;width:26px;height:26px;opacity:0;transition:opacity .25s} .sscc-m .btn-primary .spin circle{fill:none;stroke:#fff;stroke-width:2.6;stroke-linecap:round;stroke-dasharray:40 80;transform-origin:center;animation:spin .9s linear infinite} @keyframes spin{to{transform:rotate(360deg)}} .sscc-m .btn-primary .done path{fill:none;stroke:#fff;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:26;stroke-dashoffset:26;transition:stroke-dashoffset .45s .1s var(--ease-out)} .sscc-m .btn-primary.is-loading{padding:0;pointer-events:none} .sscc-m .btn-primary.is-loading .b-lbl{opacity:0} .sscc-m .btn-primary.is-loading .spin{opacity:1} .sscc-m .btn-primary.is-done{background:var(--ok)} .sscc-m .btn-primary.is-done .spin{opacity:0} .sscc-m .btn-primary.is-done .done{opacity:1} .sscc-m .btn-primary.is-done .done path{stroke-dashoffset:0} .sscc-m .btn-ghost{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:52px;padding:0 22px;border-radius:999px;border:1px solid var(--line-2);background:transparent;font:600 15px var(--sans);color:var(--ink);transition:background-color .2s,border-color .2s,transform .2s} .sscc-m .btn-ghost:hover{background:var(--surface);border-color:var(--ink)} .sscc-m .btn-ghost:active{transform:scale(.97)} .sscc-m .btn-ghost svg{width:18px;height:18px} .sscc-m .rpl{position:absolute;border-radius:50%;pointer-events:none;background:currentColor;opacity:.22;transform:translate(-50%,-50%) scale(0);animation:rpl .75s var(--ease-out) forwards;z-index:0} @keyframes rpl{to{transform:translate(-50%,-50%) scale(1);opacity:0}} /* ---------- Fin de l'achat (25/10, v2) : la carte devient un point de lumière et rejoint sa destination ---------- */ .sscc-m .fly-card{position:fixed;left:0;top:0;z-index:61;aspect-ratio:1.6;container-type:inline-size;transform-origin:0 0;pointer-events:none} .sscc-m .fly-card .face{box-shadow:0 2.5cqw 6cqw -2cqw rgba(24,18,12,.45)} .sscc-m .fly-dot{position:fixed;left:0;top:0;z-index:62;width:16px;height:16px;margin:-8px 0 0 -8px;border-radius:50%;pointer-events:none;background:radial-gradient(circle,#fff 0 32%,#fdeccb 52%,rgba(253,236,203,0) 72%);box-shadow:0 0 16px 6px rgba(255,240,212,.8),0 0 44px 16px color-mix(in srgb,var(--accent) 38%,rgba(255,236,200,.4))} .sscc-m .fly-dot.ghost{box-shadow:0 0 12px 4px rgba(255,240,212,.5)} /* Téléphone (silhouette sobre, sans marque) */ .sscc-m .fin-stage{--pw:min(300px,64vw,calc((100svh - var(--topbar) - 200px) / 2.05));position:relative;width:var(--pw);height:calc(var(--pw) * 2.05)} .sscc-m .fin-stage.is-mbox{width:min(240px,58vw);height:auto;aspect-ratio:200/300} .sscc-m .fin-stage.is-niche{width:min(330px,78vw);height:auto;aspect-ratio:.84} /* 26/10 (Simon) : retrait et courrier, la carte se glisse dans la pochette beige de la réception (étiquette au nom de l'acheteur, ou timbre puis envol) */ .sscc-m .fin-stage.is-poch{--gw:min(340px,76vw);width:var(--gw);height:calc(var(--gw) * .95)} .sscc-m .fp-poch{position:absolute;left:0;right:0;bottom:0;height:calc(var(--gw) * .72)} .sscc-m .fp-poch .pouch-card{animation:none} .sscc-m .fp-etiq{position:absolute;z-index:5;right:5%;bottom:-5%;padding:.6em 1.05em .55em 1.75em;border-radius:7px;background:#fffdf8;box-shadow:0 8px 16px -8px rgba(40,28,16,.45),0 1px 0 rgba(255,255,255,.8) inset;font:600 calc(var(--gw) * .052)/1 var(--hand);color:#5a4836;white-space:nowrap;transform:rotate(-4deg)} .sscc-m .fp-etiq::before{content:'';position:absolute;left:.65em;top:50%;width:.45em;height:.45em;margin-top:-.225em;border-radius:50%;background:#e7dbc5;box-shadow:inset 0 1px 1.5px rgba(60,40,20,.35)} .sscc-m .fp-timbre{position:absolute;z-index:5;right:7%;top:44%;width:15%;aspect-ratio:.82;padding:calc(var(--gw) * .011);background:radial-gradient(circle,transparent 0 2px,#fffaf2 2.4px) -3.25px -3.25px/6.5px 6.5px;filter:drop-shadow(0 3px 5px rgba(40,28,16,.3));transform:rotate(4deg)} .sscc-m .fp-timbre i{display:grid;place-items:center;width:100%;height:100%;background:radial-gradient(120% 90% at 30% 10%,color-mix(in srgb,var(--accent) 70%,#fff),var(--accent));color:#fffaf2} .sscc-m .fp-timbre svg{width:52%;height:52%} .sscc-m .pre{opacity:0} .sscc-m .phone{position:absolute;inset:0;padding:calc(var(--pw) * .034);border-radius:calc(var(--pw) * .165);background:linear-gradient(150deg,#3a3936 0%,#1a1918 38%,#0f0f0e 62%,#2c2b29 100%);box-shadow:0 46px 80px -34px rgba(24,18,12,.6),0 20px 34px -20px rgba(24,18,12,.4),inset 0 0 0 1.2px rgba(255,255,255,.14),inset 0 0 0 3px rgba(0,0,0,.6)} .sscc-m .phone::before,.sscc-m .phone::after{content:'';position:absolute;right:-2px;width:3px;border-radius:0 3px 3px 0;background:#262523} .sscc-m .phone::before{top:24%;height:11%} .sscc-m .phone::after{left:-2px;right:auto;top:20%;height:7%;border-radius:3px 0 0 3px} .sscc-m .ph-screen{position:relative;height:100%;overflow:hidden;border-radius:calc(var(--pw) * .135);container-type:inline-size;perspective:900px;background:linear-gradient(172deg,color-mix(in srgb,var(--accent) 42%,#efe4d6) 0%,color-mix(in srgb,var(--accent) 78%,#1d1a17) 62%,color-mix(in srgb,var(--accent) 60%,#0d0c0b) 100%)} .sscc-m .ph-wall{position:absolute;inset:-10%;background:url(ombres-feuilles.webp) 30% 20%/cover no-repeat;mix-blend-mode:multiply;opacity:.16} .sscc-m .ph-wall::after{content:'';position:absolute;inset:0;background:radial-gradient(70% 40% at 50% 8%,rgba(255,248,236,.5),transparent 70%)} .sscc-m .ph-island{position:absolute;z-index:3;top:3.4cqw;left:50%;width:29cqw;height:8.6cqw;margin-left:-14.5cqw;border-radius:99px;background:#0b0b0a} .sscc-m .ph-date{position:absolute;z-index:2;top:26cqw;left:0;right:0;text-align:center;font:600 4.3cqw/1 var(--sans);letter-spacing:.04em;color:rgba(255,255,255,.88);text-shadow:0 1px 6px rgba(0,0,0,.18)} .sscc-m .ph-notif{position:absolute;z-index:4;top:36cqw;left:4.4cqw;right:4.4cqw;display:grid;grid-template-columns:11.5cqw minmax(0,1fr);gap:3.2cqw;align-items:center;padding:3.6cqw 4cqw 3.8cqw 3.6cqw;border-radius:6.4cqw;background:rgba(250,247,242,.82);-webkit-backdrop-filter:blur(16px) saturate(1.5);backdrop-filter:blur(16px) saturate(1.5);box-shadow:0 3cqw 8cqw -3cqw rgba(0,0,0,.45);color:#1d1a17;transform-origin:50% 0} .sscc-m .ph-app{width:11.5cqw;height:11.5cqw;border-radius:3.1cqw;display:grid;place-items:center;background:var(--brand);color:#f1dcae;box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)} .sscc-m .ph-app svg{width:7.8cqw;height:7.8cqw} .sscc-m .ph-n{min-width:0;display:grid;gap:.7cqw} .sscc-m .ph-n-top{display:flex;justify-content:space-between;gap:2cqw;font:600 3.1cqw/1.1 var(--sans);letter-spacing:.07em;text-transform:uppercase;color:rgba(29,26,23,.55)} .sscc-m .ph-n-top span{text-transform:none;letter-spacing:0;font-weight:500} .sscc-m .ph-n-t{font:700 4.25cqw/1.2 var(--sans);letter-spacing:-.005em} .sscc-m .ph-n-b{font:400 3.85cqw/1.3 var(--sans);color:rgba(29,26,23,.74)} .sscc-m .ph-card{position:absolute;z-index:3;top:84cqw;left:8cqw;width:84cqw;aspect-ratio:1.6;container-type:inline-size;transform-origin:50% 0} .sscc-m .ph-card .face{box-shadow:0 4cqw 9cqw -3cqw rgba(0,0,0,.55)} .sscc-m .ph-hint{position:absolute;z-index:2;top:146cqw;left:0;right:0;text-align:center;font:600 3.5cqw/1 var(--sans);color:rgba(255,255,255,.8);letter-spacing:.02em} .sscc-m .ph-home{position:absolute;z-index:3;bottom:2.6cqw;left:50%;width:34cqw;height:1.3cqw;margin-left:-17cqw;border-radius:99px;background:rgba(255,255,255,.75)} /* En main propre : la boîte mail de l'acheteur, PDF prêt à imprimer */ .sscc-m .ph-pdf{position:absolute;z-index:3;top:70cqw;left:13cqw;width:74cqw;aspect-ratio:1/1.32;padding:6cqw 6cqw 0;border-radius:1.6cqw;background:#fffdf9;box-shadow:0 4cqw 10cqw -3cqw rgba(0,0,0,.55);transform-origin:50% 0} .sscc-m .ph-pdf-tag{position:absolute;top:-2.4cqw;right:4cqw;padding:1.2cqw 2.6cqw;border-radius:1.4cqw;background:var(--brand);color:#f6ecdc;font:700 2.8cqw/1 var(--sans);letter-spacing:.08em} .sscc-m .ph-pdf-cut{position:relative;padding:1.6cqw;border:1px dashed rgba(42,34,29,.35);border-radius:2cqw} .sscc-m .ph-pdf-cut::before{content:'✂';position:absolute;left:-1cqw;top:-3.4cqw;font:400 4cqw/1 var(--sans);color:rgba(42,34,29,.5)} .sscc-m .ph-pdf-card{aspect-ratio:1.6;container-type:inline-size;position:relative} .sscc-m .ph-pdf-card .face{box-shadow:none} .sscc-m .ph-pdf i{display:block;height:1.5cqw;margin-top:3.4cqw;border-radius:99px;background:rgba(42,34,29,.12)} .sscc-m .ph-pdf i.short{width:58%} .sscc-m .ph-print{position:absolute;z-index:3;top:176cqw;left:50%;display:inline-flex;align-items:center;gap:2cqw;padding:2.8cqw 6cqw;border-radius:99px;transform:translateX(-50%);background:rgba(250,247,242,.92);color:#1d1a17;font:700 3.6cqw/1 var(--sans);white-space:nowrap} /* Par courrier : la boîte aux lettres de Camille */ .sscc-m .mbox{position:absolute;inset:0} .sscc-m .mbox svg{width:100%;height:100%;overflow:visible} .sscc-m .mb-flag{transform-box:view-box;transform-origin:171px 128px;transform:rotate(90deg)} /* Retrait : la carte prend place à l'institut */ .sscc-m .niche{position:absolute;inset:0;border-radius:999px 999px 28px 28px;overflow:hidden;background:linear-gradient(180deg,color-mix(in srgb,var(--stage) 55%,#fff) 0%,color-mix(in srgb,var(--stage) 92%,#000 3%) 100%);box-shadow:inset 0 22px 44px -24px rgba(40,28,16,.35),inset 0 0 0 1px rgba(255,255,255,.5),0 34px 60px -40px rgba(40,28,16,.45)} .sscc-m .niche-light{position:absolute;inset:0;background:radial-gradient(60% 46% at 50% 10%,rgba(255,250,238,.95),rgba(255,250,238,0) 72%);opacity:0} .sscc-m .niche-ledge{position:absolute;left:8%;right:8%;top:68%;height:14px;border-radius:4px;background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 70%,#fff) 0%,var(--accent) 45%,color-mix(in srgb,var(--accent) 70%,#000) 100%);box-shadow:0 14px 18px -10px rgba(30,20,10,.45)} .sscc-m .niche-card{position:absolute;left:12%;width:76%;bottom:32%;aspect-ratio:1.6;container-type:inline-size;transform-origin:50% 100%} .sscc-m .niche-card .face{box-shadow:0 3cqw 6cqw -2cqw rgba(24,18,12,.45)} .sscc-m .niche-tag{position:absolute;left:50%;top:78%;transform:translateX(-50%);display:inline-flex;align-items:center;gap:7px;padding:7px 14px;border-radius:99px;background:var(--surface);box-shadow:var(--sh-1);font:600 13px/1 var(--sans);white-space:nowrap;color:var(--ink)} .sscc-m .niche-tag svg{width:15px;height:15px;color:var(--ok)} /* ---------- Côté Camille : la pochette (25/10, v2) ---------- */ .sscc-m .pouch{position:absolute;inset:0;--brand-d:color-mix(in srgb,var(--brand) 72%,#000)} .sscc-m .pouch-shadow{position:absolute;left:5%;right:5%;bottom:-9%;height:14%;border-radius:50%;background:radial-gradient(closest-side,rgba(30,22,14,.34),rgba(30,22,14,0));filter:blur(4px)} .sscc-m .pouch-back{position:absolute;left:0;right:0;top:calc(var(--gw) * .1);bottom:0;border-radius:calc(var(--gw) * .03);background:linear-gradient(180deg,var(--brand-d) 0%,color-mix(in srgb,var(--brand) 85%,#000) 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.1)} .sscc-m .pouch-card{position:absolute;z-index:2;left:7%;width:86%;top:calc(var(--gw) * .02);aspect-ratio:1.6;will-change:transform;animation:peek 3.6s var(--ease-io) 1.4s infinite} .sscc-m .pouch-card-in{position:absolute;inset:0;container-type:inline-size;filter:drop-shadow(0 4px 7px rgba(10,8,6,.32))} .sscc-m .pouch-card-in .face{box-shadow:none} @keyframes peek{0%,62%,100%{translate:0 0}74%{translate:0 -7%}84%{translate:0 0}90%{translate:0 -2%}} .sscc-m .rx-gift.is-dragging .pouch-card,.sscc-m .rx-gift.is-opening .pouch-card{animation:none} .sscc-m .rx-gift.is-dragging .tug{opacity:0;transition:opacity .2s} .sscc-m .pouch-front-wrap{position:absolute;z-index:3;left:0;right:0;top:calc(var(--gw) * .27);bottom:0;filter:drop-shadow(0 -3px 6px rgba(10,8,6,.22))} .sscc-m .pouch-front{position:absolute;inset:0;border-radius:calc(var(--gw) * .018) calc(var(--gw) * .018) calc(var(--gw) * .03) calc(var(--gw) * .03);overflow:hidden;display:grid;place-items:center;align-content:center;gap:calc(var(--gw) * .012);color:#f6ecdc;background:radial-gradient(120% 90% at 30% 0%,color-mix(in srgb,var(--brand) 82%,#fff) 0%,var(--brand) 45%,var(--brand-d) 100%);-webkit-mask:radial-gradient(circle calc(var(--gw) * .075) at 50% 0,#0000 97%,#000 100%);mask:radial-gradient(circle calc(var(--gw) * .075) at 50% 0,#0000 97%,#000 100%)} .sscc-m .pouch-front::before{content:'';position:absolute;inset:calc(var(--gw) * .028);border:1px solid rgba(232,204,152,.55);border-radius:calc(var(--gw) * .012);-webkit-mask:radial-gradient(circle calc(var(--gw) * .1) at 50% calc(var(--gw) * -.028),#0000 97%,#000 100%);mask:radial-gradient(circle calc(var(--gw) * .1) at 50% calc(var(--gw) * -.028),#0000 97%,#000 100%)} .sscc-m .pouch-front::after{content:'';position:absolute;inset:0;opacity:.35;mix-blend-mode:overlay;background-image:url("data:image/svg+xml;utf8,")} .sscc-m .pouch-logo{position:relative;z-index:1;display:grid;justify-items:center;gap:calc(var(--gw) * .01);margin-top:calc(var(--gw) * .05)} .sscc-m .pouch-logo svg{width:calc(var(--gw) * .085);height:calc(var(--gw) * .085);color:#e6c992} .sscc-m .pouch-logo b{font:400 calc(var(--gw) * .072)/1 var(--serif);letter-spacing:.01em} .sscc-m .pouch-logo small{font:600 calc(var(--gw) * .022)/1 var(--sans);letter-spacing:.3em;text-transform:uppercase;opacity:.75} .sscc-m .pouch-to{position:relative;z-index:1;font:600 calc(var(--gw) * .058)/1 var(--hand);color:#f1dcae;opacity:.95} /* 26/10 (Simon) : pochette neutre, beige clair façon enveloppe, sans logo, pour que la carte ressorte davantage */ .sscc-m .pouch-back{background:linear-gradient(180deg,#d6c8b0 0%,#e2d6c1 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.45)} .sscc-m .pouch-front{color:#5a4836;background:radial-gradient(120% 90% at 30% 0%,#f8f2e6 0%,#f0e6d4 50%,#e7dbc5 100%)} .sscc-m .pouch-front::before{border-color:rgba(138,110,76,.3)} .sscc-m .pouch-front::after{opacity:.2;mix-blend-mode:multiply} .sscc-m .pouch-logo{margin-top:calc(var(--gw) * .03)} .sscc-m .pouch-logo small{opacity:.7} .sscc-m .pouch-to{color:#80644a;opacity:1} /* ---------- Final : remerciement ---------- */ .sscc-m .finale{position:fixed;left:0;right:0;bottom:0;top:var(--topbar);z-index:50;overflow-x:hidden;overflow-y:auto;isolation:isolate;background:radial-gradient(120% 90% at 50% 0%,var(--stage2) 0%,var(--stage) 70%)} .sscc-m .finale .amb-leaves{position:fixed;opacity:.14} /* 29/10 (Simon) : feuillages trois fois plus légers (.42 avant), ainsi qu à la réception */ .sscc-m .rx-stage .amb-leaves{opacity:.20} .sscc-m .fin-wrap{position:relative;min-height:100%;display:grid;place-items:center;padding:28px 16px 48px} .sscc-m .fin-scene{display:grid;justify-items:center;gap:22px} .sscc-m .fin-status{display:flex;align-items:center;justify-content:center;gap:10px;min-height:28px;font:500 17px var(--sans);color:var(--ink-2);text-align:center} .sscc-m .fin-status i{width:8px;height:8px;border-radius:50%;background:var(--accent);animation:livedot 1.6s infinite;flex:none} .sscc-m .fin-thanks{max-width:660px;text-align:center;display:grid;justify-items:center} .sscc-m .fin-mark{position:relative;width:88px;height:88px;margin-bottom:20px} .sscc-m .fin-mark .ring{position:absolute;inset:0;border-radius:50%;border:1.5px solid var(--accent);opacity:0;animation:finring 3.3s var(--ease-out) infinite} .sscc-m #finLead,.sscc-m #finWhen{display:none!important} .sscc-m .fin-mark .ring{display:none} /* 25/10 (Simon) : pas de halo autour de la coche */ .sscc-m .fin-mark .ring:nth-child(2){animation-delay:1.1s}.sscc-m .fin-mark .ring:nth-child(3){animation-delay:2.2s} @keyframes finring{0%{transform:scale(.5);opacity:.8}100%{transform:scale(2);opacity:0}} .sscc-m .fin-mark .core{position:absolute;inset:12px;border-radius:50%;background:var(--accent);color:var(--sscc-sur-accent,#fff);display:grid;place-items:center;box-shadow:0 14px 30px -12px color-mix(in srgb,var(--accent) 90%,transparent)} .sscc-m .fin-mark .core svg{width:30px;height:30px} .sscc-m .fin-mark .core path{fill:none;stroke:#fff;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:28;stroke-dashoffset:28;animation:tick .7s .35s var(--ease-out) forwards} .sscc-m .fin-h{font-size:clamp(34px,4.2vw,56px)!important;margin-bottom:14px!important} .sscc-m .fin-lead{font:400 clamp(20px,1.8vw,25px)/1.35 var(--serif);letter-spacing:-.01em;margin:0 0 8px} .sscc-m .fin-when{color:var(--ink-2);margin:0;max-width:52ch} .sscc-m .fin-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;width:100%;margin:28px 0 30px;padding:0;list-style:none;text-align:center} .sscc-m .fin-steps li{display:grid;justify-items:center;align-content:start;gap:6px;padding:16px 10px;border-radius:16px;background:color-mix(in srgb,var(--surface) 72%,transparent);border:1px solid var(--line);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)} .sscc-m .fs-ico{width:34px;height:34px;border-radius:50%;background:var(--ok);color:#fff;display:grid;place-items:center;transform:scale(0)} .sscc-m .fs-ico svg{width:17px;height:17px} .sscc-m .fs-ico path{fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round} .sscc-m .fs-ico.is-clock{background:var(--accent)} .sscc-m .fs-ico .hand-m{transform-origin:12px 12px;animation:spin 6s linear infinite} .sscc-m .fin-steps b{font:600 14.5px/1.3 var(--sans)} .sscc-m .fin-steps small{font:500 13px/1.35 var(--sans);color:var(--ink-2)} .sscc-m .fin-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:12px} .sscc-m .fin-foot{margin-top:24px;font:500 13px/1.5 var(--sans);color:var(--ink-3)} .sscc-m .fin-foot a{color:var(--ink-2);text-underline-offset:3px} .sscc-m .petals{position:fixed;inset:0;z-index:2;pointer-events:none;overflow:hidden} .sscc-m .petal{position:absolute;top:-30px;left:var(--l);width:var(--s);height:calc(var(--s)*.6);border-radius:0 100% 0 100%;background:var(--c);opacity:.8;animation:fall var(--d) linear var(--dl) forwards} @keyframes fall{0%{transform:translate3d(0,0,0) rotate(0)}25%{transform:translate3d(calc(var(--x)*.4),27vh,0) rotate(calc(var(--r)*.3))}50%{transform:translate3d(calc(var(--x)*-.2),55vh,0) rotate(calc(var(--r)*.6))}100%{transform:translate3d(var(--x),112vh,0) rotate(var(--r))}} .sscc-m .spark{position:fixed;left:0;top:0;z-index:60;width:8px;height:8px;margin:-4px 0 0 -4px;border-radius:50%;pointer-events:none;background:radial-gradient(circle,#fff 0 28%,var(--c,#f1d9a6) 55%,transparent 72%)} .sscc-m .spark.star{width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:0;background:#fff4dc;clip-path:polygon(50% 0,60% 40%,100% 50%,60% 60%,50% 100%,40% 60%,0 50%,40% 40%)} /* ---------- Côté bénéficiaire ---------- */ .sscc-m .view-receive{position:relative} .sscc-m .rx{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(360px,.92fr);gap:clamp(24px,4vw,64px);align-items:center;max-width:1500px;margin:0 auto;padding:6px clamp(16px,3vw,40px) 24px} /* 26/10 (Simon) : sur ordinateur, le décor de gauche au moins aussi haut que la colonne de droite (petits écrans, carte ouverte) */ @media (min-width:861px){.sscc-m .rx{align-items:stretch}.sscc-m .rx-side{align-self:center}.sscc-m .rx-stage{height:auto!important;min-height:max(560px,calc(100svh - var(--topbar) - 26px))!important}} .sscc-m .rx-stage{position:relative;height:calc(100svh - var(--topbar) - 26px);min-height:560px;border-radius:32px;overflow:hidden;clip-path:inset(0 round 32px);isolation:isolate;display:grid;place-items:center;background:radial-gradient(120% 90% at 18% 6%,var(--stage2) 0%,var(--stage) 64%)} .sscc-m .rx-gift{position:relative;--gw:clamp(280px,30vw,430px);width:var(--gw);height:calc(var(--gw)*.72);margin-top:calc(var(--gw)*.2);padding:0;border:0;background:none;border-radius:12px;cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none;animation:giftfloat 6s ease-in-out infinite} .sscc-m .rx-gift.is-dragging{cursor:grabbing} @keyframes giftfloat{0%,100%{transform:translateY(-5px)}50%{transform:translateY(5px)}} .sscc-m .rx-gift.is-opening,.sscc-m .rx-gift.is-dragging{animation:none} .sscc-m .tug{position:absolute;z-index:12;left:calc(var(--gw)*.74);top:calc(var(--gw)*-.12);display:flex;align-items:center;gap:8px;padding:8px 14px 8px 10px;border-radius:99px;background:var(--surface);box-shadow:var(--sh-2);font:600 13px var(--sans);color:var(--ink);white-space:nowrap;animation:tug 2.2s var(--ease-io) infinite;pointer-events:none} .sscc-m .tug::after{content:'';position:absolute;left:18px;bottom:-6px;width:12px;height:12px;background:var(--surface);transform:rotate(45deg);border-radius:2px} .sscc-m .tug svg{width:18px;height:18px;color:var(--accent)} @keyframes tug{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}} .sscc-m .rx-card{position:absolute;inset:0;display:grid;place-items:center;align-content:center;gap:34px} .sscc-m .rx-card .scene{--w:clamp(270px,33vw,470px)} .sscc-m .rx-side{display:grid;align-content:center;gap:0} .sscc-m .rx-head .eyebrow svg{width:16px;height:16px} .sscc-m .rx-head h1{font-size:clamp(34px,3.5vw,52px)!important} .sscc-m .rx-head .lead{margin-bottom:26px} .sscc-m .rx-closed{display:grid;justify-items:start;gap:14px} .sscc-m .rx-closed p{font:500 14px var(--sans);color:var(--ink-3)} .sscc-m .rx-details{display:grid;gap:16px} .sscc-m .rx-panel{padding:22px;border-radius:22px;background:color-mix(in srgb,var(--surface) 86%,transparent);border:1px solid var(--line);box-shadow:var(--sh-1)} .sscc-m .rx-top{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap} .sscc-m .rx-amount{display:flex;align-items:flex-start;font:350 clamp(56px,5.4vw,76px)/1 var(--serif);letter-spacing:-.03em;font-variant-numeric:lining-nums tabular-nums} .sscc-m .rx-amount .cur{font-size:.42em;margin:.2em 0 0 .1em} .sscc-m .rx-amount.is-vide{opacity:.4} /* 26/10 : carte entièrement utilisée */ .sscc-m .rx-soin{font:600 14px var(--sans);color:var(--ink-2);margin-top:6px} .sscc-m .rx-valid{font:600 13px var(--sans);color:var(--ok);display:flex;align-items:center;gap:6px} .sscc-m .rx-valid svg{width:16px;height:16px} .sscc-m .rx-codebox{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px;align-items:center;margin-top:18px;padding-top:18px;border-top:1px dashed var(--line-2)} .sscc-m .rx-codebox small{display:block;font:700 10.5px var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);margin-bottom:6px} .sscc-m .rx-code{font:600 19px/1.2 var(--mono);letter-spacing:.1em;word-break:break-all} .sscc-m .rx-copy{margin-top:10px;height:38px;padding:0 14px;font-size:13px} .sscc-m .rx-copy.is-done{background:var(--ok);border-color:var(--ok);color:#fff} .sscc-m .rx-qr{width:104px;height:104px;padding:6px;border-radius:12px;background:#fff;border:1px solid var(--line)} .sscc-m .rx-qr svg{width:100%;height:100%} .sscc-m .rx-actions{display:flex;flex-wrap:wrap;gap:10px} .sscc-m .rx-actions .btn-primary{flex:1 1 220px} .sscc-m .rx-actions .btn-ghost{flex:1 1 180px} /* 27/10 (Simon) : PDF de la carte, rappel recto verso et impression directe en second choix */ .sscc-m .rx-actions #rxPdf[aria-busy="true"]{opacity:.7;cursor:progress} .sscc-m .rx-imprimer{display:flex;flex-direction:column;align-items:center;gap:6px;margin-top:-4px} .sscc-m .rx-rv{display:flex;align-items:flex-start;justify-content:center;gap:8px;max-width:440px;margin:0;padding:9px 14px;border-radius:14px;background:color-mix(in srgb,var(--accent) 9%,#fff);font:600 13px/1.4 var(--sans);color:var(--ink);text-align:left} .sscc-m .rx-rv svg{flex:none;width:17px;height:17px;margin-top:1px;color:var(--accent)} .sscc-m .rx-direct{display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 10px;border:0;background:none;font:500 13px var(--sans);color:var(--ink-2);text-decoration:underline;text-underline-offset:3px;cursor:pointer} .sscc-m .rx-direct:hover{color:var(--ink)} .sscc-m .rx-direct svg{width:15px;height:15px} .sscc-m .rx-info{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;font:500 13.5px/1.45 var(--sans);color:var(--ink-2)} .sscc-m .rx-info b{color:var(--ink)} .sscc-m .thanks-btn{height:40px;padding:0 15px;font-size:13.5px} .sscc-m .thanks-btn svg{width:17px;height:17px;color:#c0504a} .sscc-m .thanks-btn.is-done{border-color:#c0504a;color:#c0504a} .sscc-m .heart{position:fixed;z-index:60;width:16px;height:16px;margin:-8px 0 0 -8px;pointer-events:none;color:#d0605a} .sscc-m .heart svg{width:100%;height:100%;fill:currentColor} /* ---------- Paiement express (simulation) ---------- */ .sscc-m .sheet-wrap{position:fixed;inset:0;z-index:100;display:grid;align-items:end;justify-items:center} .sscc-m .sheet-bd{position:absolute;inset:0;background:rgba(20,16,12,.4);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)} .sscc-m .sheet{position:relative;width:min(440px,100%);padding:12px 22px calc(24px + env(safe-area-inset-bottom));border-radius:24px 24px 0 0;background:#fdfbf8;box-shadow:0 -20px 40px -10px rgba(0,0,0,.3)} .sscc-m .sheet-handle{display:block;width:40px;height:5px;margin:0 auto 16px;border-radius:9px;background:#d8d2cb} .sscc-m .sheet-k{font:700 11px var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);margin-bottom:6px} .sscc-m .sheet-row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--line);font:500 15px var(--sans)} .sscc-m .sheet-row b{font:400 22px var(--serif)} .sscc-m .sheet-row .muted{color:var(--ink-2)} .sscc-m .sheet-auth{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:18px;height:52px;border-radius:14px;background:#0b0b0b;color:#fff;font:600 15px var(--sans);transition:background-color .4s} .sscc-m .sheet-spin{width:22px;height:22px;border-radius:50%;border:2.5px solid rgba(255,255,255,.3);border-top-color:#fff;animation:spin .8s linear infinite} .sscc-m .sheet.is-ok .sheet-auth{background:var(--ok)} .sscc-m .sheet.is-ok .sheet-spin{animation:none;border-color:#fff;background:#fff} /* ---------- Lecture automatique ---------- */ .sscc-m .demo-cursor{position:fixed;left:0;top:0;z-index:150;width:0;height:0;pointer-events:none;transform:translate(-120px,-120px)} .sscc-m .demo-cursor svg{position:absolute;left:-5px;top:-3px;width:28px;height:28px;filter:drop-shadow(0 3px 5px rgba(0,0,0,.32));transition:transform .15s} .sscc-m .demo-cursor.is-press svg{transform:scale(.84)} .sscc-m .demo-cursor.is-touch svg{display:none} .sscc-m .demo-cursor.is-touch::before{content:'';position:absolute;left:-18px;top:-18px;width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.55);border:2px solid rgba(42,34,29,.4);box-shadow:0 4px 12px rgba(0,0,0,.2);transition:transform .15s} .sscc-m .demo-cursor.is-touch.is-press::before{transform:scale(.8)} .sscc-m .cur-ring{position:absolute;left:-22px;top:-22px;width:44px;height:44px;border-radius:50%;border:2.5px solid var(--accent);opacity:0} .sscc-m .demo-caption{position:fixed;left:var(--cap-x,50%);top:var(--cap-y,auto);bottom:var(--cap-b,28px);z-index:140;max-width:min(560px,calc(100vw - 32px));width:max-content;padding:12px 20px;border-radius:999px;background:rgba(28,22,18,.88);color:#fff;font:600 15px/1.3 var(--sans);text-align:center;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 14px 30px -12px rgba(0,0,0,.45);opacity:0;transform:translate(-50%,10px);transition:opacity .35s,transform .45s var(--ease-out);pointer-events:none} .sscc-m .demo-caption.is-on{opacity:1;transform:translate(-50%,0)} .sscc-m .demo-caption{display:none!important} /* 25/10 (Simon) : plus de légendes pendant la démo */ .sscc-m .demo-caption b{color:#f2d7a4;font-weight:700} /* ---------- Mini-carte rangée dans le pied (mobile) ---------- */ .sscc-m .mini{display:none} .sscc-m .mini .t-brand{display:none} .sscc-m .mini-amt{position:absolute;right:8cqw;bottom:9cqw;z-index:3;font:400 24cqw/1 var(--serif);color:var(--t-ink)} /* ---------- Mobile ---------- */ .sscc-m .only-m{display:none} @media (max-width:860px){ .sscc-m{--topbar:60px} .sscc-m .only-m{display:initial} .sscc-m .only-d{display:none!important} .sscc-m .topbar{gap:10px} .sscc-m .brand-sub{display:none} .sscc-m .brand-name{font-size:23px} .sscc-m .brand-mark{width:30px;height:30px} .sscc-m .seg>button{padding:7px 12px;font-size:13px} .sscc-m .demo-btn{height:40px;padding:0 13px 0 5px;font-size:13px} .sscc-m .layout{grid-template-columns:1fr;gap:0;padding:2px 16px 0} .sscc-m .stage-col{position:relative;top:0;height:auto;min-height:0} .sscc-m .stage{height:auto;padding:30px 16px 20px;gap:22px;border-radius:26px} .sscc-m .scene{--w:min(300px,calc(100vw - 76px))} .sscc-m .reassure{display:none} .sscc-m .panel{min-height:0;padding:20px 0 112px} .sscc-m .st-lbl{display:none} .sscc-m li.is-current .st-lbl{display:inline} .sscc-m .st-track{margin:0 6px} .sscc-m .step{padding:24px 0 8px} .sscc-m .step h2{font-size:31px} .sscc-m .lead{margin-bottom:22px} .sscc-m .gallery{gap:4px 6px;margin:0 -5px} .sscc-m .opt{padding:5px} .sscc-m .opt-name{font-size:13px;margin-top:7px} .sscc-m .opt-name .badge,.sscc-m .opt-name small{display:none} .sscc-m .mini{display:block;flex:none;width:0;margin-right:-14px;padding:0;border:0;background:none;border-radius:6px;opacity:0;transform:scale(.5) rotate(-10deg);transition:width .45s var(--ease-out),margin .45s var(--ease-out),opacity .3s,transform .55s var(--ease-back);pointer-events:none} .sscc-m .mini.is-on{width:64px;margin-right:0;opacity:1;transform:none;pointer-events:auto} .sscc-m .mini .thumb{width:64px;border-radius:6px;box-shadow:0 6px 14px -6px rgba(0,0,0,.45)} .sscc-m .chips{gap:8px} .sscc-m .chip{height:60px;font-size:24px} .sscc-m .panel-foot{position:fixed;left:0;right:0;bottom:0;z-index:45;padding:12px 16px calc(12px + env(safe-area-inset-bottom));background:color-mix(in srgb,var(--bg) 90%,transparent);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:0 -1px 0 var(--line)} .sscc-m .btn-back{width:52px;padding:0;justify-content:center;flex:none} .sscc-m .btn-back .lbl{display:none} .sscc-m .foot-total{display:none} .sscc-m .panel-foot .btn-primary{flex:1;padding:0 20px} .sscc-m .ticket{margin:-6px 10px 0;padding:18px 14px 24px} .sscc-m .pe{padding:14px} .sscc-m .pe-card .input{padding-right:16px} .sscc-m .brands{display:none} .sscc-m .fin-wrap{padding:22px 16px 40px} .sscc-m .fin-steps{grid-template-columns:1fr;text-align:left;margin:22px 0 24px} .sscc-m .fin-steps li{grid-template-columns:34px 1fr;justify-items:start;align-items:center;gap:2px 12px;padding:12px 14px} .sscc-m .fin-steps li .fs-ico{grid-row:span 2} .sscc-m .fin-actions{flex-direction:column;width:100%} .sscc-m .fin-actions>*{width:100%} .sscc-m .rx{display:flex;flex-direction:column;gap:18px;padding:12px 16px 32px} .sscc-m .rx-side{display:contents} .sscc-m .rx-head{order:1;padding-top:12px} /* 26/10 (Simon) : un peu d'air au-dessus du titre sur mobile */ .sscc-m .rx-head .lead{margin-bottom:0} .sscc-m .rx-stage{order:2;height:auto;min-height:0;width:100%;padding:64px 12px 40px;border-radius:26px;clip-path:inset(0 round 26px)} .sscc-m .rx-gift{--gw:min(290px,calc(100vw - 90px))} .sscc-m .rx-card{gap:22px} .sscc-m .rx-card .scene{--w:min(300px,calc(100vw - 76px))} .sscc-m .rx-closed{order:3;justify-items:stretch} .sscc-m .rx-details{order:4} .sscc-m .rx-panel{padding:18px} .sscc-m .tug{left:auto;right:-4px;top:calc(var(--gw)*-.14)} .sscc-m .sheet{border-radius:24px 24px 0 0} } /* 25/10 (retours de Simon) : sur téléphone, presque plus de défilement d'une étape à l'autre : pas de surtitre / titre / chapeau, étapes sous le bouton, aperçu plus compact, choix juste en dessous */ @media (max-width:860px){ .sscc-m .step .eyebrow,.sscc-m .step>h2,.sscc-m .step>.lead,.sscc-m label.lbl[for="to"],.sscc-m label.lbl[for="from"]{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} .sscc-m .step{padding:14px 0 6px} .sscc-m .panel{padding:4px 0 132px} .sscc-m .stage{padding:16px 16px 12px;gap:12px} .sscc-m .scene{--w:min(268px,calc(100vw - 96px))} .sscc-m .stage-tools{margin-top:-2px} .sscc-m .opt-name{display:none} .sscc-m .gallery{gap:8px} .sscc-m .opt{padding:3px} .sscc-m .stepper{position:fixed;left:24px;right:24px;bottom:calc(8px + env(safe-area-inset-bottom));z-index:46;margin:0;pointer-events:none} .sscc-m .stepper li .st-lbl{display:none!important} .sscc-m .stepper .st-dot{width:18px;height:18px;font-size:9.5px;border-width:1.2px} .sscc-m .stepper .st-dot svg{width:10px;height:10px} .sscc-m .st-track{margin:0 4px} .sscc-m .panel-foot{padding-bottom:calc(40px + env(safe-area-inset-bottom))} /* 25/10 (Simon) : étape Remise, les modes non choisis tiennent chacun sur une ligne compacte */ .sscc-m .deliv{gap:7px} .sscc-m .dopt:not(:has(.dopt-head input:checked)){border-radius:14px} .sscc-m .dopt:not(:has(.dopt-head input:checked)) .dopt-head{grid-template-columns:30px minmax(0,1fr) auto;gap:11px;padding:8px 12px 8px 9px;border-radius:14px} .sscc-m .dopt:not(:has(.dopt-head input:checked)) .d-ico{width:30px;height:30px;border-radius:9px} .sscc-m .dopt:not(:has(.dopt-head input:checked)) .d-ico svg{width:17px;height:17px} .sscc-m .dopt:not(:has(.dopt-head input:checked)) .dopt-head small{display:none} .sscc-m .dopt:not(:has(.dopt-head input:checked)) .dopt-head b{font-size:14.5px} .sscc-m .dopt-head{padding:11px 13px 11px 11px;gap:12px} .sscc-m .dopt-inner{padding:0 13px 13px} .sscc-m .dopt-inner .field{margin-bottom:10px} .sscc-m .when{margin:0 0 10px} .sscc-m .map{height:76px} } @media (max-width:400px){ .sscc-m .brand-name{font-size:19px} .sscc-m .brand-mark{width:26px;height:26px} .sscc-m .seg>button{padding:6px 9px;font-size:12px} .sscc-m .topbar{gap:6px} } @media (min-width:861px){ .sscc-m .sheet-wrap{align-items:center} .sscc-m .sheet{border-radius:24px;padding-bottom:24px} } @media (max-width:400px){ .sscc-m .demo-lbl{display:none} .sscc-m .demo-btn{padding:0 5px} } /* ---------- Mouvement réduit ---------- */ .sscc-m.rm *,.sscc-m.rm *::before,.sscc-m.rm *::after{animation-duration:.001ms!important;animation-delay:0s!important;animation-iteration-count:1!important;transition-duration:.001ms!important;transition-delay:0s!important;scroll-behavior:auto!important} /* 25/10 maquette des occasions : mention de l'occasion du moment, pastilles sous la galerie à la place de « Valable 12 mois » */ .sscc-m .occ-moment{display:flex;align-items:center;gap:6px;margin:0 0 6px 7px;font:600 12.5px/1.2 var(--sans);letter-spacing:.02em;color:var(--ink-3)} .sscc-m .occ-moment svg{width:13px;height:13px;color:var(--accent);flex:none} .sscc-m .occ-moment[hidden],.sscc-m .occ-revoir[hidden]{display:none} .sscc-m .gallery.is-4{grid-template-columns:repeat(2,minmax(0,32.5%));justify-content:center} .sscc-m .occ-pills[hidden]{display:none!important} /* 28/10 (Simon) : pastilles de durée des soins */ .sscc-m .soin .durees{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px} .sscc-m .soin .durees button{height:28px;padding:0 11px;border-radius:99px;border:1px solid var(--line-2);background:var(--surface);font:600 13px/1 var(--sans);color:var(--ink-2);cursor:pointer;transition:background .2s,color .2s,border-color .2s} .sscc-m .soin>span:nth-of-type(2){min-width:0} @media (max-width:420px){.sscc-m .soin .durees{gap:4px}.sscc-m .soin .durees button{height:26px;padding:0 7px;font-size:12px}.sscc-m .soin .price{font-size:20px}} .sscc-m .soin .durees button[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--sscc-sur-accent,#fff)} .sscc-m.transition-etape .stage .scene *,.sscc-m.transition-etape .stage .scene{animation-play-state:paused!important} .sscc-m.transition-etape .stage{overflow:hidden} /* 28/10 (Simon) : flèches de pagination plus visibles */ .sscc-m .occ-nav button{border:0!important;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ink) 70%,transparent);color:var(--ink)!important} .sscc-m .occ-nav button svg{width:20px!important;height:20px!important;stroke-width:2.2!important} .sscc-m .occ-nav button:disabled{opacity:.3!important} @property --ombre{syntax:'';inherits:true;initial-value:1} .sscc-m{transition:--ombre .8s ease} .sscc-m .stage .scene .scene-shadow{filter:opacity(var(--ombre)) blur(calc(5px + (1 - var(--ombre)) * 8px))} /* opacity est animée par shadowf, on passe par le filtre */ .sscc-m .stage .scene .face.front,.sscc-m .stage .scene .face.back{box-shadow:0 2.5cqw calc(6cqw + (1 - var(--ombre)) * 4cqw) -2cqw rgba(24,18,12,calc(.45 * var(--ombre)))} .sscc-m .b-inst-txt{font-size:1.75cqw!important}.sscc-m .b-inst-txt b{font-size:2.1cqw!important} /* 28/10 (Simon) : adresse complète sur deux lignes */ /* 28/10 (Simon) : sur mobile, à l'étape Design la carte prend la place disponible, puis reprend sa taille dès l'étape 2 */ @media (max-width:860px){ .sscc-m.etape-design .stage-col .scene{--w:min(330px,calc(100vw - 64px))} .sscc-m.etape-design .stage{gap:0!important} .sscc-m.etape-design .stage-tools{position:absolute!important;right:8px!important;bottom:8px!important;margin:0!important} /* même retrait qu à l étape 2 */ } /* 28/10 (Simon) : vignettes figées après leur entrée, et sur écran tactile pas d'effets coûteux invisibles à cette taille */ .sscc-m .fige,.sscc-m .fige *,.sscc-m .thumb.fige *{animation-play-state:paused!important} @media (pointer:coarse){ .sscc-m .v2-leenpao .lavis24 img{filter:none!important} .sscc-m .v2-leenpao .brume24 i{filter:none!important} .sscc-m .thumb .v2 *{will-change:auto!important} } .sscc-m.strip-fondu .scene .b-strip{background:transparent;isolation:isolate} .sscc-m.strip-fondu .scene .b-strip::before{content:'';position:absolute;left:0;right:0;bottom:0;height:calc(100% + 6cqw);z-index:-1;pointer-events:none;background:linear-gradient(180deg,rgba(42,40,80,0) 0%,rgba(42,40,80,.6) 32%,#2a2850 64%,#4a3f6a 100%)} /* 28/10 (Simon) : carte Merci, police ronde et chaleureuse distincte de la Nuit de Noël */ .sscc-m .face:has(.art:not(.sortant) > .v2-merci) .f-brand b{font-family:Nunito,sans-serif;font-weight:800} .sscc-m .face:has(.art:not(.sortant) > .v2-merci) .f-amount{font-family:Nunito,sans-serif;font-weight:700!important} .sscc-m .occ-pills{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:20px 0 0} .sscc-m .occ-pills button{border:1px solid var(--line-2);background:var(--surface);border-radius:99px;padding:8px 15px;font:600 13.5px/1.2 var(--sans);color:var(--ink-2);white-space:nowrap;cursor:pointer;transition:border-color .2s,color .2s,background-color .25s,transform .2s;-webkit-tap-highlight-color:transparent} .sscc-m .occ-pills button:hover{border-color:var(--accent);color:var(--accent)} .sscc-m .occ-pills button:active{transform:scale(.96)} .sscc-m .occ-pills button[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--sscc-sur-accent,#fff)} .sscc-m .occ-revoir{margin-top:12px} /* 28/10 (Simon) : occasions à gauche, flèches de pagination à droite, sur une même ligne sous la grille */ .sscc-m .occ-barre{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-top:16px} .sscc-m .occ-barre .occ-pills{justify-content:flex-start;margin:0;flex:1;min-width:0} .sscc-m .occ-nav{display:flex;gap:6px;flex:none;margin-left:auto} .sscc-m .occ-nav[hidden]{display:none} .sscc-m .occ-nav button{width:36px;height:36px;display:grid;place-items:center;padding:0;border:1px solid var(--line-2);background:var(--surface);border-radius:50%;color:var(--ink-2);cursor:pointer;transition:border-color .2s,color .2s,opacity .2s} .sscc-m .occ-nav button svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round} .sscc-m .occ-nav button:hover:not(:disabled){border-color:var(--accent);color:var(--accent)} .sscc-m .occ-nav button:disabled{opacity:.35;cursor:default} .sscc-m[data-etape="1"] .reassure,.sscc-m:not([data-etape]) .reassure{display:none!important} @media (max-width:860px){ .sscc-m .occ-barre{margin-top:12px} .sscc-m .occ-barre .occ-pills{margin:0} .sscc-m .occ-pills{gap:6px;margin-top:16px} .sscc-m .occ-pills button{padding:7px 12px;font-size:13px} .sscc-m .occ-moment{margin:0 0 4px 5px} } .sscc-m.rm .rings circle{animation:none!important;opacity:.55;transform:scale(var(--s))} .sscc-m.rm .stars circle{animation:none!important;opacity:.8} .sscc-m.rm .demo-ico::after,.sscc-m.rm .fin-mark .ring,.sscc-m.rm .petal{display:none} /* 26/10 (Simon) : démo, « Lecture auto » bien visible en haut à gauche, Achat / Réception à droite, plus de logo ni de menu, intitulés plus grands */ .sscc-m .topbar .brand,.sscc-m .topbar .menu-btn,.sscc-m .topbar .top-menu{display:none!important} .sscc-m .topbar{justify-content:space-between} .sscc-m .topbar .demo-btn{height:46px;padding:0 20px 0 7px;font-size:16px} .sscc-m .topbar .demo-lbl{display:inline!important} .sscc-m .topbar .seg>button{padding:9px 18px;font-size:16px} @media (max-width:860px){.sscc-m .topbar .demo-btn{height:44px;padding:0 16px 0 6px;font-size:15px}.sscc-m .topbar .seg>button{padding:8px 14px;font-size:15px}} @media (max-width:400px){.sscc-m .topbar .demo-btn{padding:0 13px 0 5px;font-size:14px}.sscc-m .topbar .seg>button{padding:7px 11px;font-size:14px}} /* 26/10 : cartes d'occasion (cartes.css), montant coloré selon la carte, galerie de 3 cartes */ .sscc-m .f-amount{color:var(--c-amount,inherit);transition:color .7s} .sscc-m .gallery.is-3{grid-template-columns:repeat(3,minmax(0,1fr))} /* 26/10 (Simon) : recto sans logo, le nom de l'institut, un sous-titre facultatif (vide = ligne retirée), puis la pastille plus fine */ .sscc-m .f-brand>svg{display:none!important} .sscc-m .f-brand{align-items:flex-start} .sscc-m .f-brand b{font-size:7.6cqw;font-weight:500;white-space:nowrap} .sscc-m .f-brand small{margin-top:1.3cqw;font-size:2.3cqw;letter-spacing:.2em;opacity:.82} .sscc-m .f-brand small:empty{display:none} .sscc-m .f-brand .f-kind{display:table!important;margin-top:2.3cqw!important;font:600 2.45cqw/1 var(--sans)!important;letter-spacing:.18em!important;padding:1.55cqw 2.8cqw 1.45cqw!important} /* 26/10 (Simon) : un peu plus d'air en haut */ /* 26/10 (Simon) : écran d'ouverture de la réception centré, surtitre plus lisible sur ordinateur */ .sscc-m .rx-closed p{text-align:center} @media (min-width:861px){ .sscc-m .rx-closed{justify-items:center} .sscc-m .rx-top .eyebrow{font-size:15.5px;letter-spacing:.16em;margin-bottom:14px} } /* 26/10 (Simon) : page imprimable A4, une seule face, sans papier cartonné. En haut, la carte pliée : on coupe la feuille en deux, on plie la moitié du haut en deux (A6, enveloppe standard), sans colle. En bas, le format carte : double carte à découper, plier au milieu et coller. */ .sscc-m #printSheet{display:none} @media print{ @page{size:A4 portrait;margin:0} .sscc-m,.sscc-m{background:#fff!important;margin:0!important;padding:0!important;overflow:visible!important} /* 27/10 (Simon) : la feuille sortait réduite (~74 %) et décalée à gauche dans Chrome. Chrome rétrécit toute la page dès qu'un élément dépasse la largeur du papier ; des extensions du navigateur injectent des blocs hors de qui n'étaient pas masqués. On masque tout ce qui n'est pas la feuille et on bloque la largeur à 210 mm : la carte reste à 100 %, centrée, recto et verso alignés. */ .sscc-m html>*:not(head):not(body){display:none!important} .sscc-m,.sscc-m{width:210mm!important;min-width:0!important;max-width:210mm!important} .sscc-m body>*:not(#printSheet){display:none!important} .sscc-m #printSheet{display:block;width:210mm;max-width:210mm;overflow:hidden} /* sans animation : figées au début, certaines (le « merci » qui s'écrit) resteraient invisibles */ .sscc-m #printSheet *{-webkit-print-color-adjust:exact;print-color-adjust:exact;animation:none!important} } /* 27/10 : feuille rendue hors de l'écran le temps de fabriquer le PDF (pas de visibility:hidden, il serait recopié dans l'image) */ .sscc-m #printSheet.ps-rendu{display:block;position:fixed;left:-10000px;top:0;width:210mm;pointer-events:none} .sscc-m #printSheet.ps-rendu *{animation:none!important;transition:none!important} .sscc-m #printSheet .ps-page{position:relative;width:210mm;height:296.5mm;overflow:hidden;background:#fff;font-family:var(--sans);color:#2a221d} .sscc-m #printSheet .ps-haut{position:absolute;left:0;top:0;width:210mm;height:148.5mm;display:flex} .sscc-m #printSheet .ps-pan{position:relative;width:105mm;height:148.5mm;overflow:hidden} .sscc-m #printSheet .ps-rot{position:absolute;left:50%;top:50%;width:148.5mm;height:105mm;display:grid;place-items:center;transform:translate(-50%,-50%) rotate(90deg)} .sscc-m #printSheet .ps-pan.ps-devant .ps-rot{transform:translate(-50%,-50%) rotate(-90deg)} .sscc-m #printSheet .ps-pli{position:absolute;left:105mm;width:0;height:3.2mm;border-left:.25mm solid #c9c0b6} .sscc-m #printSheet .ps-carte{position:relative;width:132mm;height:83.2mm;container-type:inline-size} .sscc-m #printSheet .ps-carte .face{position:absolute;inset:0;transform:none!important;box-shadow:none!important;border-radius:4mm;overflow:hidden;-webkit-backface-visibility:visible;backface-visibility:visible} .sscc-m #printSheet .ps-carte .face::after{display:none} .sscc-m #printSheet .f-amount{visibility:visible!important} .sscc-m #printSheet .ps-double .ps-carte{width:92mm;height:58mm} .sscc-m #printSheet .ps-double .ps-carte .face{border-radius:0} /* bas de page : mode d'emploi et double carte à découper */ .sscc-m #printSheet .ps-bas{position:absolute;left:0;top:148.5mm;width:210mm;height:148mm;padding:9mm 13mm 0;box-sizing:border-box} .sscc-m #printSheet .ps-coupe{position:absolute;left:0;right:0;top:0;border-top:.3mm dashed #9a8f86} .sscc-m #printSheet .ps-ciseaux{position:absolute;left:9mm;top:-2.6mm;width:5.2mm;height:5.2mm;padding:0 .8mm;background:#fff;color:#7a6d62} .sscc-m #printSheet .ps-tete{display:grid;grid-template-columns:1fr 1fr;gap:8mm;align-items:start} .sscc-m #printSheet .ps-titre{margin:0 0 2mm;font:600 5.4mm/1.15 var(--sans);letter-spacing:-.01em} .sscc-m #printSheet .ps-sous{margin:0;font:400 3.2mm/1.5 var(--sans);color:#61554c} .sscc-m #printSheet .ps-etapes{margin:0;padding:0;list-style:none;display:grid;gap:2.6mm;font:400 2.9mm/1.45 var(--sans);color:#4c423b} .sscc-m #printSheet .ps-etapes li{display:grid;grid-template-columns:5.4mm 1fr;gap:2mm} .sscc-m #printSheet .ps-etapes b{color:#2a221d} .sscc-m #printSheet .ps-etapes span.n{display:grid;place-items:center;width:5.4mm;height:5.4mm;border-radius:50%;background:#2a221d;color:#fff;font:700 2.7mm/1 var(--sans)} .sscc-m #printSheet .ps-double{position:relative;display:flex;width:184mm;height:58mm;margin:13mm auto 0;outline:.3mm dashed #9a8f86;outline-offset:0} .sscc-m #printSheet .ps-double .ps-pli-b{position:absolute;left:92mm;width:0;height:3.6mm;border-left:.25mm solid #9a8f86} .sscc-m #printSheet .ps-double .ps-pli-b.h{top:-5.4mm} .sscc-m #printSheet .ps-double .ps-pli-b.b{bottom:-5.4mm} .sscc-m #printSheet .ps-double .ps-pli-t{position:absolute;left:92mm;bottom:-10.4mm;transform:translateX(-50%);font:700 2.2mm/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:#85776c;white-space:nowrap} /* 26/10 (Simon) : format carte en recto verso, page 1 = recto, page 2 = dos au même endroit, centré (retournement bord long), fond perdu de 3 mm (copie agrandie de la carte, sans les textes) et traits de coupe aux quatre coins */ .sscc-m #printSheet .ps-page+.ps-page{break-before:page;page-break-before:always} .sscc-m #printSheet .ps-solo{position:absolute;left:59mm;top:211mm;width:92mm;height:58mm} .sscc-m #printSheet .ps-bas .ps-solo{top:62.5mm} .sscc-m #printSheet .ps-solo .ps-carte{position:absolute;left:0;top:0;width:92mm;height:58mm} .sscc-m #printSheet .ps-solo .ps-carte .face{border-radius:0} .sscc-m #printSheet .ps-fp{position:absolute;left:-3mm;top:-3mm;width:98mm;height:64mm;overflow:hidden} .sscc-m #printSheet .ps-fp .ps-carte{transform-origin:0 0;transform:scale(1.0652,1.1035)} .sscc-m #printSheet .ps-trait{position:absolute;background:#2a221d} .sscc-m #printSheet .ps-trait.h{height:.2mm;width:4mm} .sscc-m #printSheet .ps-trait.v{width:.2mm;height:4mm} .sscc-m #printSheet .ps-verso-note{position:absolute;left:0;right:0;bottom:14mm;margin:0;text-align:center;font:500 2.8mm/1.4 var(--sans);color:#9a8f86} /* 27/10 (Simon) : rappel recto verso juste sous la carte à découper */ .sscc-m #printSheet .ps-rv{position:absolute;left:0;right:0;top:131mm;margin:0;text-align:center;font:500 2.7mm/1.4 var(--sans);color:#6b5f55} .sscc-m #printSheet .ps-aide{position:absolute;left:13mm;right:13mm;bottom:4mm;margin:0;display:flex;align-items:center;gap:3mm;font:500 3mm/1.45 var(--sans);color:#61554c} .sscc-m #printSheet .ps-aide svg{flex:none;width:5.4mm;height:5.4mm} /* 26/10 (Simon) : plan de l'institut en bandeau en bas de la réception, puis fiche de l'établissement en grand */ .sscc-m .rx-plan{position:relative;display:block;width:100%;height:118px;margin-top:4px;border-radius:18px;overflow:hidden;cursor:pointer;background:#eef0ee;box-shadow:0 1px 2px rgba(42,34,29,.06),0 10px 24px -16px rgba(42,34,29,.35);isolation:isolate;-webkit-tap-highlight-color:transparent;transition:transform .3s var(--ease-out),box-shadow .3s} .sscc-m .rx-plan:hover{box-shadow:0 1px 2px rgba(42,34,29,.06),0 16px 30px -16px rgba(42,34,29,.45)} .sscc-m .rx-plan:active{transform:scale(.99)} .sscc-m .rx-plan:focus-visible{outline:3px solid color-mix(in srgb,var(--accent) 60%,#fff);outline-offset:3px} .sscc-m .rx-plan-map{position:absolute;inset:0;pointer-events:none} .sscc-m .rx-plan-map .maplibregl-ctrl-bottom-right,.sscc-m .rx-plan-map .maplibregl-ctrl-bottom-left{display:none} .sscc-m .rx-plan-txt{position:absolute;left:10px;bottom:10px;z-index:2;max-width:calc(100% - 64px);padding:7px 12px 8px;border-radius:12px;background:rgba(255,255,255,.94);box-shadow:0 2px 8px rgba(0,0,0,.08);font:500 13px/1.3 var(--sans);color:var(--ink-2);text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .sscc-m .rx-plan-txt b{display:block;font:600 14px/1.25 var(--sans);color:var(--ink)} .sscc-m .rx-plan-agr{position:absolute;right:10px;top:10px;z-index:2;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.95);color:var(--ink);box-shadow:0 2px 8px rgba(0,0,0,.12)} .sscc-m .rx-plan-agr svg{width:16px;height:16px} .sscc-m .rx-plan .plan-pin{width:26px;height:34px} .sscc-m .fiche{position:fixed;inset:0;z-index:300;display:grid;place-items:center;padding:4vh 4vw} .sscc-m .fiche[hidden]{display:none} .sscc-m .fiche-fond{position:absolute;inset:0;background:rgba(24,18,14,.48);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)} .sscc-m .fiche-box{position:relative;width:min(1180px,100%);height:min(760px,100%);display:grid;grid-template-columns:minmax(0,1fr) 380px;border-radius:22px;overflow:hidden;background:#fff;box-shadow:0 30px 80px -20px rgba(0,0,0,.5)} .sscc-m .fiche-map{position:relative;min-height:0;background:#eef0ee} .sscc-m .fiche-info{min-height:0;overflow:auto;padding:26px 26px 30px;color:var(--ink);overscroll-behavior:contain} .sscc-m .fiche-x{position:absolute;right:14px;top:14px;z-index:3;width:42px;height:42px;border-radius:50%;border:0;display:grid;place-items:center;background:#fff;color:var(--ink);box-shadow:0 2px 10px rgba(0,0,0,.18);cursor:pointer} .sscc-m .fiche-x svg{width:18px;height:18px} .sscc-m .fiche-info h2{margin:0 44px 4px 0;font:600 26px/1.15 var(--sans);letter-spacing:-.01em} .sscc-m .fi-cat{margin:0;font:500 15px var(--sans);color:var(--ink-3)} .sscc-m .fi-note{display:flex;align-items:center;gap:7px;margin:10px 0 0;font:600 15px var(--sans)} .sscc-m .fi-etoiles{display:inline-flex;gap:1px;color:#f2a516} .sscc-m .fi-etoiles svg{width:16px;height:16px} .sscc-m .fi-note small{font:500 14px var(--sans);color:var(--ink-3)} .sscc-m .fi-actions{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 6px} .sscc-m .fi-actions a,.sscc-m .fi-actions button{display:inline-flex;align-items:center;gap:7px;height:42px;padding:0 16px;border-radius:99px;font:600 14px var(--sans);text-decoration:none;cursor:pointer;border:1px solid var(--line-2);background:#fff;color:var(--ink)} .sscc-m .fi-actions .fi-resa{background:var(--accent);border-color:var(--accent);color:var(--sscc-sur-accent,#fff)} .sscc-m .fi-actions svg{width:16px;height:16px;flex:none} .sscc-m .fi-liste{list-style:none;margin:14px 0 0;padding:0;border-top:1px solid var(--line)} .sscc-m .fi-liste>li{display:flex;gap:14px;padding:14px 0;border-bottom:1px solid var(--line);font:500 15px/1.45 var(--sans)} .sscc-m .fi-liste>li>svg{flex:none;width:20px;height:20px;margin-top:1px;color:var(--accent)} .sscc-m .fi-liste a{color:var(--ink);text-decoration:none} .sscc-m .fi-liste a:hover{text-decoration:underline} .sscc-m .fi-ouvert{font-weight:700;color:#2f7d4f} .sscc-m .fi-ferme{font-weight:700;color:#b13f2c} .sscc-m .fi-heures{width:100%;margin-top:8px;border-collapse:collapse;font:500 14.5px/1.4 var(--sans);color:var(--ink-2)} .sscc-m .fi-heures td{padding:3px 0} .sscc-m .fi-heures td+td{text-align:right} .sscc-m .fi-heures tr.auj td{font-weight:700;color:var(--ink)} @media (max-width:860px){ .sscc-m .rx-plan{height:104px} .sscc-m .fiche{padding:0;place-items:end stretch} .sscc-m .fiche-box{width:100%;height:calc(100% - 28px);grid-template-columns:1fr;grid-template-rows:42% minmax(0,1fr);border-radius:22px 22px 0 0} .sscc-m .fiche-info{padding:20px 18px 34px} .sscc-m .fiche-info h2{font-size:23px} } /* 28/10 (Simon) : fiche de l'établissement plus lisible, environ +25 %, et la note, les étoiles et les avis environ +50 % */ .sscc-m .fiche-box{grid-template-columns:minmax(0,1fr) 450px} .sscc-m .fiche-info{padding:30px 30px 34px} .sscc-m .fiche-info h2{font-size:32px;margin-bottom:6px} .sscc-m .fi-cat{font-size:18.5px} .sscc-m .fi-note{gap:10px;margin-top:14px;font-size:23px} .sscc-m .fi-etoiles{gap:2px} .sscc-m .fi-etoiles svg{width:24px;height:24px} .sscc-m .fi-note small{font-size:20px} .sscc-m .fi-actions{gap:10px;margin:22px 0 8px} .sscc-m .fi-actions a,.sscc-m .fi-actions button{height:52px;padding:0 20px;font-size:17px} .sscc-m .fi-actions svg{width:19px;height:19px} .sscc-m .fi-liste>li{gap:16px;padding:17px 0;font-size:18px} .sscc-m .fi-liste>li>svg{width:23px;height:23px} .sscc-m .fi-heures{font-size:17px} .sscc-m .rx-plan-txt{font-size:14px} /* 28/10 (Simon) : mobile, plan 50 % plus haut, adresse à la taille du nom et de l'activité, sans débordement */ @media (max-width:860px){ .sscc-m .rx-plan{height:156px!important} .sscc-m .rx-plan-txt{font-size:14px!important;white-space:normal!important;max-width:calc(100% - 20px)!important} .sscc-m .rx-plan-txt b{font-size:14px!important} } @media (max-width:860px){ .sscc-m .fiche-box{grid-template-columns:1fr;grid-template-rows:36% minmax(0,1fr)} .sscc-m .fiche-info{padding:22px 20px 36px} .sscc-m .fiche-info h2{font-size:28px} .sscc-m .fi-cat{font-size:17px} .sscc-m .fi-note{font-size:21px} .sscc-m .fi-etoiles svg{width:22px;height:22px} .sscc-m .fi-note small{font-size:18.5px} .sscc-m .fi-actions a,.sscc-m .fi-actions button{height:48px;font-size:16px;padding:0 17px} .sscc-m .fi-liste>li{font-size:17px} .sscc-m .fi-heures{font-size:16px} } /* 28/10 soir (Simon) : mobile, étape 1, picto de retournement 3 px plus loin du bord droit et du bas de l'encart */ @media (max-width:860px){ .sscc-m.etape-design .stage-tools{right:8px!important;bottom:8px!important} } /* 29/10 (Simon) : même distance qu à l étape 2 (8 px) */ /* 28/10 soir (Simon) : Réception sur mobile, l'encadré du plan ne dépasse pas 55 % de la largeur, l'épingle de droite reste visible */ @media (max-width:860px){ .sscc-m .rx-plan-txt{max-width:55%!important} } /* 28/10 soir (Simon) : sur une page incomplète, la grille garde la hauteur de deux rangées (voir occTenir), les vignettes restent en haut */ .sscc-m .gallery{align-content:start;touch-action:pan-y} .sscc-m .gallery.glisse,.sscc-m .gal-fantome{will-change:transform} /* 28/10 soir (Simon) : ordinateur, étape 1, la carte seule au milieu exact de l'encart, le bouton juste en dessous */ @media (min-width:901px){ .sscc-m.etape-design .stage-col .stage{padding-top:40px;padding-bottom:40px} .sscc-m.etape-design .stage-tools{position:absolute;left:50%;top:calc(50% + clamp(260px,33vw,470px) / 1.6 - 313px);transform:translateX(-50%);width:max-content!important;justify-content:center} /* 29/10 : la boîte s étirait (371 px), le bouton partait à gauche */ } /* 28/10 soir (Simon, test d'impression) : format recto verso à la taille du format plié (132 × 83,2 mm), centré, même place sur les deux pages ; fin contour gris clair autour de la carte pliée (repère de découpe des cartes claires) ; ciseaux sous la ligne de coupe, côté chute */ /* 28/10 soir (Simon, TEST) : légende des formats sous la grille, à gauche des flèches, et pastilles en bas à gauche des vignettes */ .sscc-m .occ-barre{align-items:center} .sscc-m .occ-legende{list-style:none;margin:0;padding:0;display:grid;gap:4px;min-width:0;font:500 11.5px/1.25 var(--sans);color:var(--ink-3)} .sscc-m .occ-legende li{display:flex;align-items:center;gap:6px} .sscc-m .occ-legende b{font-weight:700;color:var(--ink-2,inherit)} .sscc-m .pt{display:inline-block;flex:none;width:7px;height:7px;border-radius:50%} .sscc-m .pt-vert{background:#78bb8e} .sscc-m .pt-bleu{background:#79a6dc} .sscc-m .t-dispo{position:absolute;left:6cqw;bottom:6cqw;z-index:4;display:flex;gap:2.5px;pointer-events:none} .sscc-m .t-dispo .pt{width:8.4px;height:8.4px} /* 28/10 (Simon) : sans bordure blanche, couleur à la taille extérieure (6 + 2×1,2) */ .sscc-m .dopt[hidden]{display:none!important} .sscc-m .deliv-num{display:flex;align-items:flex-start;gap:8px;margin:0 0 4px;font-size:13.5px;color:var(--ink-3)} .sscc-m .deliv-num[hidden]{display:none} .sscc-m .deliv-num .pt{margin-top:.45em} /* 29/10 (Simon) : design seulement numérique, retrait et courrier grisés à 50 %, non cliquables, mention à droite de l'intitulé */ .sscc-m .d-indispo{display:none;font:italic 500 12.5px/1.3 var(--sans);color:var(--ink-2);text-align:right;max-width:240px} .sscc-m .dopt.is-indispo{opacity:.5} .sscc-m .dopt.is-indispo .dopt-head{cursor:not-allowed} .sscc-m .dopt.is-indispo .d-indispo{display:block} .sscc-m .dopt.is-indispo .d-price,.sscc-m .dopt.is-indispo .d-radio{display:none} @media (max-width:860px){ .sscc-m .d-indispo{font-size:11.5px;max-width:118px} } @media (max-width:860px){ .sscc-m .occ-legende{font-size:10.5px;gap:3px} .sscc-m .t-dispo .pt{width:7.4px;height:7.4px} } .sscc-m #printSheet .ps-bas{padding-top:7mm} .sscc-m #printSheet .ps-solo{left:39mm;top:198.5mm;width:132mm;height:83.2mm} .sscc-m #printSheet .ps-bas .ps-solo{top:50mm} .sscc-m #printSheet .ps-solo .ps-carte{width:132mm;height:83.2mm} .sscc-m #printSheet .ps-fp{width:138mm;height:89.2mm} .sscc-m #printSheet .ps-fp .ps-carte{transform:scale(1.04545,1.07212)} .sscc-m #printSheet .ps-rv{top:137.8mm} .sscc-m #printSheet .ps-verso-note{bottom:5mm} .sscc-m #printSheet .ps-tete .ps-aide{position:static;margin:4.5mm 0 0;font-size:2.9mm} .sscc-m #printSheet .ps-ciseaux{top:.7mm} .sscc-m #printSheet .ps-contour{position:absolute;inset:0;z-index:9;border:.3mm solid #cdc6be;border-radius:4mm;pointer-events:none} /* ---------- Intégration dans le site du commerçant (ajouts de l'extension) ---------- */ .sscc-m{position:relative;isolation:isolate;margin:0 auto;padding:6px 0 28px;border-radius:0;text-align:left;line-height:1.5;font-size:16px} .sscc-m :is(h1,h2,h3,h4,p,ul,ol,li,fieldset,legend,figure,blockquote){padding:0;margin:0} .sscc-m :is(ul,ol){list-style:none} .sscc-m :is(h1,h2,h3,h4){color:inherit;font-weight:inherit;letter-spacing:normal;text-transform:none} .sscc-m :is(input,textarea,button,select){box-shadow:none;text-transform:none;letter-spacing:normal;min-height:0} .sscc-m .sscc-cache{display:none!important} .sscc-m .sscc-erreur{margin:12px 0 0;color:var(--err);font:600 14px/1.4 var(--sans)} .sscc-m .sscc-stripe{margin-top:4px;min-height:0} .sscc-m .sscc-stripe:not(:empty){padding:6px 0 0} .sscc-m.sscc-stripe-on .pe-fields,.sscc-m.sscc-stripe-on .pe-legal{display:none} .sscc-m.sscc-stripe-on .panel-foot .btn-primary{display:none} .sscc-m .pe-legal{margin:12px 0 0;font:400 13px/1.45 var(--sans);color:var(--ink-3)} .sscc-m .pe-legal a{color:inherit} .sscc-m .rx-info .thanks-btn{display:none} .sscc-m .pouch-logo img{display:block;max-height:7.4cqw;width:auto;max-width:22cqw;object-fit:contain} .sscc-m.sscc-perso .front-ui{visibility:hidden} .sscc-m.sscc-perso .step[data-step="1"] fieldset{display:none} .sscc-m .sscc-demo{margin:0 0 10px;padding:8px 14px;border-radius:12px;background:color-mix(in srgb,var(--accent) 10%,#fff);font:600 13px/1.4 var(--sans);color:var(--ink-2)} @media (max-width:860px){ .sscc-m:not(.sscc-vu) .panel-foot,.sscc-m:not(.sscc-vu) .stepper{transform:translateY(140%);transition:transform .3s} .sscc-m .panel-foot,.sscc-m .stepper{transition:transform .3s} } /* Recto : plus de « CARTE CADEAU » ni de pictogramme générique ; logo dans une boîte fixe ; nom sur une seule ligne (taille ajustée en JS) */ .sscc-m .f-kind{display:none} .sscc-m .f-top{min-width:0} .sscc-m .f-top .f-brand{flex:1;min-width:0} .sscc-m .f-brand .f-nom{flex:1;min-width:0} .sscc-m .f-brand b{white-space:nowrap;overflow:hidden} /* v1.9 : logo rogné, à la hauteur du bloc du nom ; hauteur et largeur posées par ajusterNoms (parcours-demarrage.js) */ .sscc-m .f-logo{display:flex;align-items:center;height:10cqw;width:25cqw;flex:none} .sscc-m .f-logo img{display:block;height:100%;width:100%;max-width:none;max-height:none;object-fit:contain;object-position:left center} .sscc-m .f-logo .f-logo-clair{display:none} .sscc-m.sscc-sombre .f-logo.a-clair .f-logo-img{display:none} .sscc-m.sscc-sombre .f-logo.a-clair .f-logo-clair{display:block} .sscc-m.sscc-sombre .f-logo:not(.a-clair):not(.opaque):not(.natif-clair) img{filter:brightness(0) invert(1)} .sscc-m:not(.sscc-sombre) .f-logo.natif-clair:not(.opaque) img{filter:brightness(.22)} /* « Carte cadeau » passe au verso, au-dessus du petit mot */ .sscc-m .sscc-etat{margin:14px 0 0;padding:12px 16px;border-radius:14px;font:600 15px/1.4 var(--sans);background:color-mix(in srgb,var(--accent) 10%,#fff);color:var(--ink)} .sscc-m .sscc-etat-utilisee,.sscc-m .sscc-etat-expiree,.sscc-m .sscc-etat-desactivee{background:#fbeee9;color:#8a2f1d} .sscc-m .sscc-pied-legal{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 18px;padding:14px 16px 26px;font:400 13px var(--sans)}.sscc-m .sscc-pied-legal a{color:var(--ink-3)} /* v1.5 : aperçu fixe de la carte papier à la fin de l'achat */ .sscc-m .sscc-fixe{position:relative;width:min(320px,80%);aspect-ratio:1.6;container-type:inline-size;margin:6px auto 22px;border-radius:4.4cqw;overflow:hidden;box-shadow:0 18px 34px -16px rgba(24,18,12,.5)} .sscc-m .sscc-fixe .face{position:absolute;inset:0} /* Page dédiée plein écran : petite barre propre à l'extension */ .sscc-m .sscc-barre{position:sticky;top:0;z-index:60;height:64px;background:color-mix(in srgb,var(--bg) 86%,transparent);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);margin:-6px 0 6px} /* 1.11.0 : contenu de la barre calé sur la mise en page du parcours (.layout) : le nom commence au bord de l'encart de la carte */ .sscc-m .sscc-barre-in{display:flex;align-items:center;justify-content:space-between;gap:16px;height:100%;max-width:1500px;margin:0 auto;padding:0 clamp(16px,3vw,40px);box-sizing:border-box} .sscc-m .sscc-barre-police .sscc-barre-marque span{line-height:1.25;padding-top:2px} .sscc-m .sscc-barre a{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink)} .sscc-m .sscc-barre-marque img{max-height:38px;max-width:150px;width:auto} .sscc-m .sscc-barre-marque span{font:600 18px/1.1 var(--sans)} .sscc-m .sscc-barre-retour{white-space:nowrap;font:600 14px var(--sans);color:var(--ink-2)!important;padding:8px 14px;border-radius:999px;border:1px solid var(--line-2);transition:border-color .2s,color .2s} .sscc-m .sscc-barre-retour:hover{border-color:var(--accent);color:var(--ink)!important} @media (max-width:860px){.sscc-m .sscc-barre-in{padding:0 16px}.sscc-m .sscc-barre{height:56px}.sscc-m .sscc-barre-marque img{max-height:30px}.sscc-m .sscc-barre-marque span{font-size:16px}.sscc-m .sscc-barre-retour{padding:6px 10px;font-size:13px}.sscc-m .sscc-barre-marque img+span{display:none}} /* Page d'ouverture du bénéficiaire (pleine page, sans le thème) */ .sscc-m.sscc-ouverture{min-height:100svh;padding-top:0} .sscc-m .sscc-entete{display:flex;align-items:center;gap:12px;height:var(--topbar);padding:0 clamp(16px,3vw,40px)} .sscc-m .sscc-entete img{max-height:40px;width:auto} .sscc-m .sscc-conditions{text-align:center;padding:8px 16px 28px;font:400 13px var(--sans)}.sscc-m .sscc-conditions a{color:var(--ink-3)} /* v1.8 (audit) : courrier complet, carte papier de l'institut, émojis retirés, soin plus proposé */ .sscc-m select.input{appearance:none;-webkit-appearance:none;background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);background-position:calc(100% - 20px) 55%,calc(100% - 15px) 55%;background-size:5px 5px;background-repeat:no-repeat;padding-right:40px} .sscc-m .lbl em{font-style:normal;font-weight:400;color:var(--ink-3)} .sscc-m .sscc-note-papier{margin:0 0 12px;padding:10px 14px;border-radius:12px;background:color-mix(in srgb,var(--accent) 9%,#fff);font:500 14px/1.45 var(--sans);color:var(--ink-2)} .sscc-m .sscc-note-courrier{margin:10px 0 0;font:400 13.5px/1.45 var(--sans);color:var(--ink-3)} .sscc-m .sscc-astuce{margin:6px 0 0;font:500 13px/1.4 var(--sans);color:var(--ink-3)} .sscc-m .sscc-fin-papier{margin:4px auto 20px;max-width:30em;text-align:center;font:500 16px/1.5 var(--sans);color:var(--ink-2)} .sscc-m .soin.sscc-soin-retire{opacity:.4;pointer-events:none} /* 1.11.0 (02/11) : carte personnalisée choisie dans la galerie ; ses textes sont dans le visuel (carte-rendu.js), pas par-dessus */ .sscc-m.sscc-perso-on .scene .face.front .front-ui,.sscc-m.sscc-perso-on #rxStage .face.front .front-ui,.sscc-m.sscc-perso-on .fin-stage .face.front .front-ui,.sscc-m.sscc-perso-on #printSheet .face.front .front-ui{visibility:hidden} /* 1.16.0 : aussi l'animation de fin et la feuille d'impression (textes en double sur la carte perso) */ .sscc-m .thumb:has(input[value="perso"]) .t-brand,.sscc-m .opt:has(input[value="perso"]) .t-brand{display:none} /* 1.14.0 : autres cartes perso (perso-N) ; emplacement de l'animation sur mesure (iframe isolée posée par assets/anim-perso.js) */ .sscc-m .opt:has(input[value^="perso-"]) .t-brand{display:none} .sscc-m .art>.sscc-anim{position:absolute;inset:0;display:block;pointer-events:none;z-index:1;overflow:hidden;border-radius:inherit} /* 1.11.0 (retour 3 de Pauline, pour tous) : seule la prestation choisie a sa durée sur fond foncé ; ailleurs, la durée active reste lisible (à quelle durée correspond le prix) mais discrète, teinte très claire tirée de la couleur de la carte, texte foncé, liseré léger */ .sscc-m .soin .durees button[aria-pressed="true"]{background:color-mix(in srgb,var(--accent) 11%,#fff);border-color:color-mix(in srgb,var(--accent) 32%,#fff);color:var(--ink)} .sscc-m .soin:has(input:checked) .durees button[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--sscc-sur-accent,#fff)} /* 1.11.0 (retour 1) : carte d'une prestation sans son prix (le prix reste dans la liste et le récapitulatif) */ .sscc-m.sscc-soin-sans-prix.sscc-mode-soin :is(.scene,.fin-stage,.sscc-fixe,#rxStage,.pouch,.ph-card,.niche-card) .f-amount,.sscc-m.sscc-soin-sans-prix.sscc-mode-soin .mini-amt{visibility:hidden} .sscc-m.sscc-soin-sans-prix.sscc-mode-soin #rxAmount{display:none} /* 1.12.3 : « Laisser l'acheteur choisir » : case à droite de l'encart Un montant / Un soin, alignée sur son bas, seulement en mode soin */ .sscc-m .sscc-amode-ligne{display:flex;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;gap:8px 16px;margin-bottom:20px} .sscc-m .sscc-amode-ligne>.amode{margin-bottom:0} .sscc-m .sscc-sans-prix{display:inline-flex;align-items:center;gap:7px;margin-left:auto;font-size:14.5px;font-weight:500;line-height:1.2;color:var(--ink);cursor:pointer;user-select:none;padding:2px 0} .sscc-m .sscc-sans-prix input{width:16px;height:16px;margin:0;accent-color:var(--accent);cursor:pointer;flex:none} .sscc-m:not(.sscc-mode-soin) .sscc-sans-prix{display:none} /* 1.11.0 (retour 9) : pas de code sur la carte, « Valable jusqu’au » et la date centrés dans la bande */ .sscc-m.sscc-code-masque .b-strip>div:first-child{display:none} .sscc-m.sscc-code-masque .b-strip{justify-content:center;text-align:center} .sscc-m.sscc-code-masque .b-strip>div{align-items:center} .sscc-m.sscc-code-masque :is(#rxCode,.rx-copy),.sscc-m.sscc-code-masque .rx-codebox>div>small{display:none} /* 1.11.0 (retour 9) : « Pour » prénom + nom (60 %), « De la part de » (40 %), sur une ligne ; repli sur deux lignes : .sscc-pour-2l */ .sscc-m .grid2.sscc-pour3{grid-template-columns:3fr 2fr} .sscc-m .sscc-duo{display:flex;gap:6px;min-width:0} .sscc-m .sscc-duo .input{flex:1 1 0;min-width:0;margin:0!important;align-self:stretch}.sscc-m .sscc-duo #toNom{height:auto!important;min-height:0!important;padding-top:0!important;padding-bottom:0!important} @media (max-width:860px){ .sscc-m [data-step="3"] .grid2.sscc-pour3{grid-template-columns:3fr 2fr;column-gap:8px} .sscc-m [data-step="3"] .grid2.sscc-pour3 .sscc-duo{grid-column:1;grid-row:1;gap:4px} .sscc-m [data-step="3"] .grid2.sscc-pour3 .sscc-duo .input,.sscc-m [data-step="3"] .grid2.sscc-pour3 #from{font-size:16px;padding-left:10px;padding-right:8px} .sscc-m.sscc-pour-2l [data-step="3"] .grid2.sscc-pour3{grid-template-columns:1fr;row-gap:10px} .sscc-m.sscc-pour-2l [data-step="3"] .grid2.sscc-pour3 #from{grid-column:1;grid-row:2} .sscc-m.sscc-pour-2l [data-step="3"] .grid2.sscc-pour3 .err{grid-row:3} } /* 1.11.0 (retours 8 et 10) : paiement sur place (même encart, sans champs de carte) et téléphone en troisième champ */ /* 1.17.0 (05/11, démo Leen Paô) : nom | e-mail, puis téléphone | deux ronds discrets « régler en ligne / sur place » (empilés, à la hauteur du champ téléphone) ; sans téléphone, les ronds côte à côte sur toute la ligne ; téléphone : côte à côte, alignés à gauche */ .sscc-m .pe-grid{column-gap:20px} .sscc-m .sscc-pe-choix{display:flex;flex-direction:column;justify-content:space-between;align-self:start;height:71px;padding:29px 0 0 14px;margin-top:0;box-sizing:border-box} .sscc-m .sscc-sans-tel .sscc-pe-choix{grid-column:1/-1;flex-direction:row;justify-content:flex-start;gap:30px;height:auto;padding:2px 0 0;margin-bottom:14px} .sscc-m .sscc-pe-choix label{display:flex;align-items:center;gap:8px;font:500 13.5px/1.3 var(--sans);color:var(--ink-2);cursor:pointer;margin:0} .sscc-m .sscc-pe-choix input{accent-color:var(--accent);width:15px;height:15px;margin:0;flex:none} .sscc-m .sscc-pe-choix .sscc-tel{display:none} @media (max-width:860px){.sscc-m .sscc-pe-choix,.sscc-m .sscc-sans-tel .sscc-pe-choix{grid-column:1/-1;flex-direction:row;justify-content:flex-start;gap:22px;height:auto;margin:6px 0 0;padding:0 0 8px}.sscc-m .sscc-pe-choix .sscc-pc{display:none}.sscc-m .sscc-pe-choix .sscc-tel{display:inline}} .sscc-m .sscc-sur-place-info{margin:15px 0 0;padding:14px 15px;border-radius:14px;background:color-mix(in srgb,var(--accent) 6%,#fff);border:1px solid color-mix(in srgb,var(--accent) 16%,#fff);color:var(--ink-2);font:500 14px/1.5 var(--sans)} .sscc-m .sscc-sur-place-info p{margin:0} .sscc-m .sscc-sur-place-info p+p{margin-top:7px} .sscc-m .sscc-sp-modes{color:var(--ink)} .sscc-m .sscc-sp-puces{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 10px} .sscc-m .sscc-sp-puces span{display:inline-flex;align-items:center;height:36px;padding:1px 16px 0;box-sizing:border-box;border-radius:99px;background:var(--accent);font:500 15.5px/1 var(--sans);letter-spacing:.3px;color:var(--sscc-sur-accent,#fff)} @media (min-width:861px){.sscc-m .sscc-sp-puces span{padding:3px 16px 0}} @media (max-width:860px){.sscc-m .sscc-sp-puces span{height:34px}} .sscc-m:not(.sscc-sur-place) .sscc-sur-place-info[data-sur-place]{display:none} .sscc-m.sscc-sur-place .sscc-stripe,.sscc-m.sscc-sur-place .secure{display:none} .sscc-m .pe-grid.pe-fields{align-items:start} /* 1.17.1 (démo Leen Paô) : nom du bénéficiaire demandé, libellés « Pour » / « De la part de » visibles aussi sur téléphone */ @media (max-width:860px){.sscc-m [data-step="3"] .grid2 label.lbl[for]{display:block!important;position:static!important;width:auto!important;height:auto!important;clip:auto!important;overflow:visible!important;font:600 13px var(--sans)!important;margin:0 0 6px!important}} /* 1.17.1 : nom de la boutique de la barre toujours sur une ligne (taille réduite par parcours-1110.js, points de suspension en dernier recours) ; réglage barre_nom_mobile_masque : sous 768 px, plus de nom, « Retour au site » en haut à gauche */ .sscc-m .sscc-barre-marque{min-width:0;flex:0 1 auto;overflow:hidden} .sscc-m .sscc-barre-marque span{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0} @media (max-width:767px){.sscc-m .sscc-barre-nom-masque .sscc-barre-marque{display:none}.sscc-m .sscc-barre-nom-masque .sscc-barre-in{justify-content:flex-start}} /* 1.17.1 : économie d'énergie au repos (voir parcours-1110.js) et roue de chargement arrêtée hors chargement */ .sscc-m:is(.sscc-repos,.sscc-hors-vue) :is(.amb-leaves,.amb-light,.scene-shadow,.card-float,.sheen){animation-play-state:paused!important} .sscc-m:is(.sscc-repos,.sscc-hors-vue) :is(.scene,.thumbs,.occ-grid,.opts) *{animation-play-state:paused!important} .sscc-m .btn-primary:not(.is-loading) .spin circle{animation:none} /* 05/11 (Simon) : ombres de feuilles fixes (plus de sway) ; sur téléphone, plus de brume animée sur la carte Ivoire et lavis */ .sscc-m .amb-leaves{animation:none!important;transform:none} @media (max-width:860px){.sscc-m .brume24 i{animation:none!important;opacity:0!important}} /* 05/11 (Simon) : ombre statique pré-floutée, sans flou variable */ .sscc-m .stage .scene .scene-shadow{filter:blur(5px)!important} /* 05/11 (Simon) : reflet sans mélange (soft-light recalculé à chaque image sur la carte en 3D) : dégradé blanc normal, plus léger */ .sscc-m .sheen{mix-blend-mode:normal!important;background:linear-gradient(112deg,transparent 44%,rgba(255,255,255,.1) 50%,transparent 56%)!important} /* 05/11 (Simon, perf) : écran de fin et pochette, boucles arrêtées après 3 cycles en position de repos ; ailes du cerf-volant ralenties (8 battements/s au lieu de 16) */ .sscc-m .pouch-card,.sscc-m .fin-status i,.sscc-m .fin-mark .ring,.sscc-m .rx-gift,.sscc-m .tug{animation-iteration-count:3!important} .sscc-m .art .v2-cerfvolant .aile{animation-duration:.12s!important} /* 05/11 (Simon) : effets imperceptibles supprimés : ombre de la carte fixe (plus de shadowf), lumière d'ambiance fixe (plus de breathe) */ .sscc-m .scene-shadow{animation:none!important;transform:scale(.95);opacity:.85} .sscc-m .amb-light{animation:none!important;opacity:1} .sscc-m :is(.amb-leaves,.amb-light,.scene-shadow,.sheen){will-change:transform,opacity} /* calques rastérisés une fois (flou, dégradé), seuls transform et opacity bougent */ /* 1.17.3 : date de réception au choix : la phrase du délai est déjà dans l'encart de la date */ .sscc-m.sscc-courrier-date .sscc-note-courrier{display:none} /* 1.17.1 : demande particulière (case discrète sous le nom, champ sur toute la ligne) */ .sscc-m .sscc-demande-case{display:inline-flex;align-items:center;gap:7px;margin:8px 0 0;font:500 13.5px/1.3 var(--sans);color:var(--ink-2);cursor:pointer} .sscc-m .sscc-demande-case input{accent-color:var(--accent);width:15px;height:15px;margin:0;flex:none} .sscc-m .pe-grid>.sscc-demande{grid-column:1/-1} /* 1.17.3 : courrier, case « Ajouter un complément d'adresse » sous l'adresse (même style que la demande particulière) */ .sscc-m .sscc-compl-case{display:inline-flex;align-items:center;gap:7px;margin:8px 0 0;font:500 13.5px/1.3 var(--sans);color:var(--ink-2);cursor:pointer;justify-self:start} .sscc-m .sscc-compl-case input{accent-color:var(--accent);width:15px;height:15px;margin:0;flex:none} .sscc-m .sscc-compl[hidden]{display:none} .sscc-m .sscc-demande[hidden]{display:none} .sscc-m .sscc-demande textarea.input{min-height:76px;height:auto;font:400 16px/1.45 var(--sans);padding:10px 14px;resize:vertical} /* 1.17.0 : carte réservée pas encore réglée, côté bénéficiaire : bandeau, rien à réserver, télécharger ni imprimer */ .sscc-m .sscc-rx-attente{display:none;margin:0 0 14px;padding:13px 16px;border-radius:12px;background:color-mix(in srgb,var(--accent) 14%,#fff);border:1px solid color-mix(in srgb,var(--accent) 45%,#fff);font:500 14px/1.5 var(--sans);color:var(--ink);text-align:center} .sscc-m .sscc-rx-attente b{display:block;font-weight:700;font-size:18px;margin-bottom:2px} .sscc-m.sscc-attente-reglement .sscc-rx-attente{display:block} .sscc-m.sscc-attente-reglement :is(#rxPdf,.rx-imprimer,#rxBook){display:none!important} /* 1.17.0 : champs de 42 px (ordinateur et téléphone), petit mot de 88 px sur téléphone, Pour / De la part de plus serrés sur téléphone */ .sscc-m .step input.input{height:42px!important} @media (max-width:860px){.sscc-m textarea.input{min-height:69px}.sscc-m #msg{height:88px!important;min-height:0!important}.sscc-m .sugg button{padding:5px 9px}.sscc-m [data-step="3"] .grid2>.field{margin-bottom:0}} /* 1.17.0 : encart des horaires de retrait plus foncé, texte aligné avec le nom de l'institut */ .sscc-m .hor-retrait{margin-left:-14px;margin-right:-14px;background:color-mix(in srgb,var(--stage) 45%,#fff)} .sscc-m .sscc-aide{margin:4px 0 0;font:400 12.5px/1.35 var(--sans);color:var(--ink-3)} /* 1.11.0 : sans différence de formats entre les cartes proposées, ni pastilles ni légende */ .sscc-m.sscc-sans-pastilles .t-dispo,.sscc-m.sscc-sans-pastilles .occ-legende{display:none} /* v1.9 (26/10) : page d'impression A4 de la carte (bouton « Imprimer la carte ») ; seule elle s'imprime, quel que soit le thème du site */ /* 1.16.0 : champ de carte Stripe affiché dès l'étape paiement, dans la carte des coordonnées */ .sscc-m.sscc-stripe-elements .sscc-stripe{margin:14px 0 4px;padding:0} .sscc-m.sscc-stripe-elements .sscc-stripe:not(:empty){padding:0} /* 1.16.3 : en-tête « Carte bancaire » de Stripe masqué (un seul moyen de paiement), en rognant le haut du cadre */ .sscc-m.sscc-stripe-elements .sscc-stripe{margin-top:-12px!important;clip-path:inset(25px 0 0 0)} /* 1.16.8 : liens légaux dans le bas de l'encadré de la carte (ordinateur) */ .sscc-m .stage>.sscc-pied-scene{position:absolute;left:0;right:0;bottom:22px;z-index:3;padding:0;margin:0} .sscc-m .stage>.sscc-pied-scene a{color:var(--ink-2)} @media print{ html,body{margin:0!important;padding:0!important;background:#fff!important;height:296mm!important;overflow:hidden!important} body *{visibility:hidden!important} .sscc-m #printSheet,.sscc-m #printSheet *{visibility:visible!important} .sscc-m #printSheet{position:fixed!important;left:0!important;top:0!important;z-index:2147483647} } /* v1.9 : pictogramme de l'offre devant son nom (carte, récapitulatif, page du bénéficiaire) */ .sscc-m .f-soin-ico{display:inline-block;width:1.2em;height:1.2em;margin-right:.45em;vertical-align:-.24em;flex:none} .sscc-m .f-soin:has(.f-soin-ico)::before{display:none} .sscc-m .sum-ico{display:inline-block;width:1.25em;height:1.25em;margin-right:.35em;vertical-align:-.28em;color:var(--accent)} .sscc-m .rx-soin-ico{display:inline-block;width:1.15em;height:1.15em;margin-right:.4em;vertical-align:-.2em;color:var(--accent)} /* 1.12.1 : nom de la boutique caché jusqu'à ses polices au chargement (pas de saut de taille) */ .sscc-m.sscc-noms-attente .f-brand .f-nom b{visibility:hidden} /* 1.9.4 : date de réception du courrier (démo du 26/10 au soir) pas encore dans l'extension ; encadré entreprise caché pendant le paiement Stripe */ .sscc-m:not(.sscc-courrier-date) :is(#cwhenRow,#csched,#cwhenNote){display:none!important} .sscc-m.sscc-stripe-on .pro{display:none} /* v1.9 (26/10) : cartes d'occasion de la démo pas encore proposées dans l'extension */ .sscc-m #occPills,.sscc-m #occMoment,.sscc-m #occRevoir{display:none!important} /* 1.17.3 (comparaison avec la démo, 05/11) : téléphone, « Pour » et « De la part de » AU-DESSUS des champs (les champs étaient placés de force en ligne 1 de la grille, les libellés tombaient dessous) ; ligne 1 libellés, ligne 2 champs, ligne 3 erreurs */ @media (max-width:860px){ .sscc-m [data-step="3"] .grid2 label.lbl[for="to"]{grid-column:1;grid-row:1} .sscc-m [data-step="3"] .grid2 label.lbl[for="from"]{grid-column:2;grid-row:1} .sscc-m [data-step="3"] .grid2 #to,.sscc-m [data-step="3"] .grid2 #from,.sscc-m [data-step="3"] .grid2.sscc-pour3 .sscc-duo{grid-row:2} .sscc-m [data-step="3"] .grid2 .err{grid-row:3} .sscc-m.sscc-pour-2l [data-step="3"] .grid2.sscc-pour3 label.lbl[for="from"]{grid-column:1;grid-row:3} .sscc-m.sscc-pour-2l [data-step="3"] .grid2.sscc-pour3 #from{grid-column:1;grid-row:4} .sscc-m.sscc-pour-2l [data-step="3"] .grid2.sscc-pour3 .err{grid-row:5} } /* 1.17.3 : barre de la démo à sa hauteur (68 px, 60 sur téléphone), sous l'en-tête éventuel du site (parcours-demarrage.js) */ .sscc-m.sscc-demo .topbar{top:var(--sscc-demo-top,0px);height:var(--sscc-demo-h,68px)} @media (max-width:860px){.sscc-m.sscc-demo .topbar{height:var(--sscc-demo-h,60px)}} .sscc-m.sscc-demo{padding-top:0} /* 1.17.3 : téléphone, libellés de l'étape 3 collés à leurs champs (6 px, comme la démo), pas d'écart de ligne de la grille */ @media (max-width:860px){.sscc-m [data-step="3"] .grid2{row-gap:0}} /* 1.17.3 : téléphone, chaque message d'erreur sous son champ (prénom et nom à gauche, « De la part de » à droite), aligné à gauche, comme la démo */ @media (max-width:860px){ .sscc-m [data-step="3"] .grid2 :is(#to-err,#toNom-err,#from-err){text-align:start;justify-content:normal} .sscc-m [data-step="3"] .grid2 #to-err{grid-column:1;grid-row:3} .sscc-m [data-step="3"] .grid2 #toNom-err{grid-column:1;grid-row:4} .sscc-m [data-step="3"] .grid2 #from-err{grid-column:2;grid-row:3} .sscc-m.sscc-pour-2l [data-step="3"] .grid2.sscc-pour3 #from-err{grid-column:1;grid-row:5} } /* 1.17.3 : règles de la démo du 05/11 qui manquaient (prestations : description sur sa ligne, quatre durées sur une ligne au téléphone ; onglets sans retour à la ligne ; horaires de retrait saisis = une phrase dans un encart, comme la démo) */ .sscc-m .soin .s-desc{display:block;color:var(--ink-2);font-size:13px} .sscc-m .amode label{white-space:nowrap} @media (max-width:420px){.sscc-m .amode label{padding-left:13px!important;padding-right:13px!important}} @media (max-width:420px){.sscc-m .soin{grid-template-columns:36px minmax(0,1fr) auto;gap:10px;padding:12px 13px 12px 11px}.sscc-m .soin-ico{width:36px;height:36px;border-radius:11px}.sscc-m .soin-ico svg{width:20px;height:20px}.sscc-m .soin .durees{gap:4px}.sscc-m .soin .durees button{padding:0 6px;font-size:11.5px}.sscc-m .soin .price{font-size:19px}} .sscc-m .retrait-plages{margin:10px -14px 12px;padding:11px 14px;border-radius:12px;background:color-mix(in srgb,var(--stage) 45%,#fff);font:500 14px/1.5 var(--sans);color:var(--ink-2)} .sscc-m .retrait-plages b{color:var(--ink);font-weight:600} .sscc-m .retrait-plages[hidden],.sscc-m .hor-retrait[hidden]{display:none} /* 1.17.3 : mode démonstration, champs de carte factices de la démo (masqués quand l'acheteur règle sur place) */ .sscc-m #ccWrap{margin-top:8px} .sscc-m.sscc-sur-place :is(#ccWrap,#expWrap,#cvcWrap,.sscc-demo-carte){display:none!important} /* cartes.css de la démo */ /* Cartes d'occasion v2 (26/10/2026) : couches d'illustration partagées entre la planche et le parcours. Repère : la carte fait 100cqw de large et 62.5cqw de haut. L'illustration reste dans le coin haut droit (x > 50cqw, y < 33cqw) : le bas (prestation, prénom, montant) reste toujours dégagé. */ .v2{position:absolute;inset:0;overflow:hidden;pointer-events:none} .v2 > *,.v2 .pend,.v2 .eti,.v2 .gros-mot,.v2 .raie,.v2 .pluie,.v2 .bandes,.v2 .ruban{position:absolute} .v2 .eti svg{position:static!important} .v2 img{display:block;max-width:none;user-select:none;-webkit-user-drag:none} .v2 .full{inset:0;width:100%;height:100%} /* parallaxe discrète, pilotée par l'inclinaison de la carte (--gx/--gy posées par le prototype ou la planche) */ .v2 .px-fond{inset:-4%;transform:translate3d(calc((var(--gx,50%) - 50%) * -.06),calc((var(--gy,45%) - 45%) * -.06),0)} .v2 .px-obj{inset:0;transform:translate3d(calc((var(--gx,50%) - 50%) * .035),calc((var(--gy,45%) - 45%) * .02),0)} /* ---------- Pluies de particules (flocons, confettis, pétales, cœurs) : une tuile qui défile, rien de lourd ---------- */ .v2 .pluie{left:0;right:0;top:-62.5cqw;height:125cqw;background-repeat:repeat;animation:v2-tombe var(--t,18s) linear infinite;will-change:transform} .v2 .pluie.lente{--t:26s} .v2 .pluie.monte{animation-name:v2-monte} @keyframes v2-tombe{to{transform:translate3d(0,62.5cqw,0)}} @keyframes v2-monte{from{transform:translate3d(0,62.5cqw,0)}to{transform:none}} .v2 .derive{position:absolute;inset:0;animation:v2-derive 9s ease-in-out infinite alternate} @keyframes v2-derive{from{transform:translateX(-1.6cqw)}to{transform:translateX(1.6cqw)}} /* ---------- Objets suspendus au bord haut (boules, cœurs) : fil dessiné, léger balancement ---------- */ .v2 .pend{top:-3cqw;width:var(--w);transform-origin:50% 0;animation:v2-balance var(--dur,5.5s) ease-in-out infinite alternate;animation-delay:var(--d,0s)} .v2 .pend .fil{display:block;width:var(--fw,.26cqw);height:calc(var(--l) + 3cqw);margin:0 auto -.6cqw;background:var(--fil,#d9c08a);opacity:.85;border-radius:1px} .v2 .pend img{width:100%;height:auto;filter:drop-shadow(0 1.4cqw 1.6cqw rgba(0,0,0,.28))} @keyframes v2-balance{from{transform:rotate(calc(var(--a,2.4deg) * -1))}to{transform:rotate(var(--a,2.4deg))}} /* ---------- Animations douces des objets ---------- */ @keyframes v2-flotte{0%,100%{transform:translate3d(0,-.5cqw,0) rotate(var(--r,0deg))}50%{transform:translate3d(0,.5cqw,0) rotate(calc(var(--r,0deg) + 1deg))}} @keyframes v2-penche{from{transform:rotate(calc(var(--r,0deg) - 2.5deg))}to{transform:rotate(calc(var(--r,0deg) + 2.5deg))}} @keyframes v2-coucou{0%,62%,100%{transform:translate3d(0,0,0) rotate(var(--r,0deg))}74%{transform:translate3d(-1.4cqw,1.2cqw,0) rotate(calc(var(--r,0deg) - 4deg))}86%{transform:translate3d(.4cqw,-.3cqw,0) rotate(calc(var(--r,0deg) + 1.5deg))}} @keyframes v2-respire{from{transform:scale(1) rotate(var(--r,0deg))}to{transform:scale(1.03) rotate(calc(var(--r,0deg) + 1.2deg))}} @keyframes v2-scintille{0%,100%{opacity:0;transform:scale(.4)}50%{opacity:1;transform:scale(1)}} @keyframes v2-lueur{from{opacity:.55}to{opacity:1}} @keyframes v2-reflet{0%,55%{transform:translateX(-120%)}100%{transform:translateX(120%)}} @keyframes v2-raies{from{transform:translate3d(-3cqw,0,0) rotate(-24deg)}to{transform:translate3d(3cqw,0,0) rotate(-21deg)}} @keyframes v2-bandes{to{transform:translate3d(-14.14cqw,0,0)}} @keyframes v2-ecrit{from{clip-path:inset(-20% 100% -20% 0)}to{clip-path:inset(-20% -5% -20% 0)}} @keyframes v2-chute{0%{opacity:0;transform:translate3d(0,0,0) rotate(0deg)}8%{opacity:1}50%{opacity:1}68%,100%{opacity:0;transform:translate3d(30cqw,17cqw,0) rotate(200deg)}} @keyframes v2-bat{0%,70%,100%{transform:scale(1)}78%{transform:scale(1.14)}86%{transform:scale(1)}92%{transform:scale(1.09)}} /* étincelles */ .v2 .eti{width:var(--s,2.2cqw);height:var(--s,2.2cqw);animation:v2-scintille var(--t,3.2s) ease-in-out infinite;animation-delay:var(--d,0s)} .v2 .eti svg{width:100%;height:100%;display:block} /* ---------- Ruban de coin : reflet du satin qui glisse ---------- */ .v2 .ruban{right:-14cqw;top:-21cqw;width:58cqw;transform:scaleX(-1)} .v2 .ruban img{width:100%;height:auto;filter:drop-shadow(0 .8cqw 1.2cqw rgba(60,10,10,.3))} .v2 .ruban .reflet{position:absolute;inset:0;-webkit-mask:var(--m) center/100% 100% no-repeat;mask:var(--m) center/100% 100% no-repeat;overflow:hidden;mix-blend-mode:screen} .v2 .ruban .reflet::before{content:'';position:absolute;inset:0;background:linear-gradient(115deg,transparent 40%,rgba(255,225,215,.55) 50%,transparent 60%);animation:v2-reflet 6.5s ease-in-out infinite} /* ---------- Lumière voilée (carte « Voile ») ---------- */ .v2 .raie{width:18cqw;height:110cqw;top:-30cqw;border-radius:50%;background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.55),rgba(255,255,255,0));filter:blur(2.4cqw);animation:v2-raies 11s ease-in-out infinite alternate} /* ---------- Bandes obliques qui glissent (carte « Lutin ») ---------- */ .v2 .bandes{left:-20cqw;right:-20cqw;top:-20cqw;bottom:-20cqw;animation:v2-bandes 9s linear infinite} /* ---------- Typographie en grand (carte « Merci ») ---------- */ /* 28/10 (Simon) : « merci » en Caveat d'origine, révélé lettre après lettre dans l'ordre d'écriture, puis le cœur se pose sur le i (sans animation : tout visible) */ .v2 .mt-trait{stroke-dasharray:1 2;animation:v2-trace var(--t) cubic-bezier(.4,0,.6,1) var(--d) both} @keyframes v2-trace{from{stroke-dashoffset:1}to{stroke-dashoffset:0}} .v2 .mt-coeur{transform-box:fill-box;transform-origin:50% 60%;animation:v2-pose .45s cubic-bezier(.3,1.7,.5,1) 1.8s both,v2-bat 2.6s ease-in-out 2.5s infinite} @keyframes v2-pose{from{transform:scale(0) translateY(-6px);opacity:0}to{transform:scale(1);opacity:1}} .v2 .gros-mot{font:600 31cqw/1 'Caveat','Segoe Print',cursive;letter-spacing:-.01em;white-space:nowrap;animation:v2-ecrit 1.8s cubic-bezier(.5,0,.2,1) .3s both} /* ---------- 26/10 : nouvelles cartes (guirlande, bougie, flocons de papier, formes) ---------- */ .v2 .ampoule .halo{animation:v2-ampoule 2.8s ease-in-out infinite;animation-delay:var(--d,0s)} @keyframes v2-ampoule{0%,100%{opacity:.25}50%{opacity:.95}} @keyframes v2-vacille{0%,100%{opacity:.78;transform:scale(1)}30%{opacity:1;transform:scale(1.06)}60%{opacity:.84;transform:scale(.97)}} @keyframes v2-tourne{to{transform:rotate(360deg)}} .v2-flocons .pend img{animation:v2-tourne 40s linear infinite;filter:drop-shadow(0 .8cqw 1cqw rgba(10,50,100,.25))} .v2 .f-rot{transform-box:view-box;animation:v2-frot 7s ease-in-out infinite alternate} @keyframes v2-frot{from{transform:rotate(-20deg)}to{transform:rotate(25deg)}} .v2 .f-orb{animation:v2-orb 5s ease-in-out infinite alternate} @keyframes v2-orb{from{transform:translate(0,0)}to{transform:translate(-4px,5px)}} @media (prefers-reduced-motion:reduce){ .v2 *,.v2 *::before,.v2 *::after{animation:none!important} .v2 .eti{opacity:.8;transform:none} } /* cartes-anim.css de la démo */ /* Fichier produit par construire-cartes-anim.py : ne pas modifier à la main */ /* les SVG du décor gardent leur taille d'origine (la démo étire tous les SVG de .art) */ .art .anim-carte svg{position:static;inset:auto;width:auto;height:auto} /* le décor reste sous les textes de la démo, quels que soient ses plans */ .art .anim-carte{z-index:0} /* lisibilité des textes sur les cartes de nuit, et Leen Paô dans son style (nom en Great Vibes doré, pastille en simple filet) */ .face:has(.art:not(.sortant) > .v2-noelnuit) .front-ui{text-shadow:0 2px 14px rgba(5,10,30,.85)} .face:has(.art:not(.sortant) > .v2-feu) .front-ui{text-shadow:0 1px 10px rgba(8,8,25,.6)} .face:has(.art:not(.sortant) > .v2-noelnuit) .f-kind,.face:has(.art:not(.sortant) > .v2-feu) .f-kind{text-shadow:none} .face:has(.art:not(.sortant) > .v2-noelnuit) .f-amount,.face:has(.art:not(.sortant) > .v2-feu) .f-amount{text-shadow:none;filter:drop-shadow(0 1px 5px rgba(5,10,30,.45))} .face:has(.art:not(.sortant) > .v2-leenpao) .f-brand b{font-family:'Great Vibes',cursive;font-weight:400;color:#b38c45;font-size:10.3cqw!important;letter-spacing:0} .face:has(.art:not(.sortant) > .v2-leenpao) .f-brand{padding-top:1cqw} .face:has(.art:not(.sortant) > .v2-leenpao) .f-kind{background:transparent;color:#b38c45;border:1px solid rgba(179,140,69,.8)} .anim-carte .couche{position: absolute; inset: 0; will-change: transform; pointer-events: none;} .anim-carte .couche img{position: absolute; display: block; user-select: none; -webkit-user-drag: none;} .anim-carte canvas.particules{position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none;} .anim-carte .or{background: linear-gradient(105deg, #8a6a2c 0%, #e9cf8a calc(var(--gx, 50%) - 18%), #fff3cf var(--gx, 50%), #c9a24f calc(var(--gx, 50%) + 16%), #7d5f25 100%); -webkit-background-clip: text; background-clip: text; color: transparent;} .anim-carte .lettre{display: inline-block; white-space: pre;} .anim-carte .clair .or{background-image: linear-gradient(105deg, #5e4312 0%, #a98431 calc(var(--gx, 50%) - 18%), #d9b86a var(--gx, 50%), #9a7429 calc(var(--gx, 50%) + 16%), #574010 100%);} .art .v2-euca{background: linear-gradient(165deg, #f9f7ef 0%, #eef1e4 100%); color: #2b4334;} .art .v2-euca .lavis{clip-path: circle(0% at 82% 18%);} .art .v2-euca .lavis .ombres{position: absolute; inset: -6%; background: url(anim/m-ombres-feuilles.webp?v=1793186315) 80% 20% / cover no-repeat; mix-blend-mode: multiply; opacity: .13;} .art .v2-euca .lavis img{right: 36%; top: -24%; width: 25%; height: auto; filter: blur(5px); opacity: .32; transform: rotate(18deg);} .art .v2-euca .brin img{right: -3%; top: -12%; width: 30%; height: auto; filter: blur(1.4px) saturate(.9); opacity: .85; transform-origin: 70% 0; transform: rotate(-24deg);} .art .v2-euca .branche img{right: -7%; top: -19%; width: 47%; height: auto; transform-origin: 96% 2%; filter: drop-shadow(0 8px 12px rgba(40,60,45,.22));} .art .v2-euca .rayons{position: absolute; inset: -30%; z-index: 6; pointer-events: none; mix-blend-mode: soft-light; opacity: .9; background: repeating-conic-gradient(from 200deg at 92% 0%, rgba(255,236,180,0) 0deg, rgba(255,236,180,.55) 3deg, rgba(255,236,180,0) 7deg, rgba(255,236,180,0) 13deg); -webkit-mask: radial-gradient(70% 70% at 88% 6%, #000, transparent 70%); mask: radial-gradient(70% 70% at 88% 6%, #000, transparent 70%); animation: m-rayons 14s ease-in-out infinite alternate;} .art .v2-euca{--f-titre: 'Cormorant Garamond', serif; --p-nom: 600; --p-montant: 500;} .art .v2-euca{--f-titre: 'Fraunces', serif; --p-nom: 600; --p-montant: 500; --c-montant: #2b4334;} .art .v2-noelnuit{background: #0d1630; color: #f4efe2;} .art .v2-noelnuit .couche img{left: -6%; top: -6%; width: 112%; height: 112%; object-fit: cover;} .art .v2-noelnuit .montagnes img{top: -24%;} .art .v2-noelnuit .sapins img{top: -30%;} .art .v2-noelnuit .sol{position: absolute; left: -6%; right: -6%; bottom: -6%; height: 30%; background: linear-gradient(180deg, #e9eef8, #cfd9ec 60%, #b9c6df);} .art .v2-noelnuit .halo{position: absolute; z-index: 1; left: var(--lune-x, 81%); top: var(--lune-y, 19%); width: 46%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(closest-side, rgba(255,248,220,.38), rgba(255,248,220,.12) 45%, transparent 72%); mix-blend-mode: screen; animation: m-halo 5s ease-in-out infinite; pointer-events: none;} .art .v2-noelnuit .traineau{position: absolute; z-index: 2; left: 0; top: 0; width: 26%; pointer-events: none; will-change: transform; opacity: 0;} .art .v2-noelnuit .traineau img{position: static; width: 100%; height: auto; transform: scaleX(-1);} .art .v2-noelnuit .fenetre{position: absolute; z-index: 9; width: 3.2%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(closest-side, rgba(255,190,90,.95), rgba(255,150,60,.35) 60%, transparent); mix-blend-mode: screen; pointer-events: none; animation: m-bougie 2.3s steps(1) infinite;} .art .v2-noelnuit .voile{position: absolute; inset: 0; z-index: 15; background: linear-gradient(0deg, rgba(8,14,36,.78) 0%, rgba(8,14,36,0) 50%), linear-gradient(90deg, rgba(8,14,36,.45) 0%, rgba(8,14,36,0) 55%); pointer-events: none;} .art .v2-noelnuit canvas.premier-plan{z-index: 25;} .art .v2-cerisier{background: linear-gradient(160deg, #fff7f4, #f8e9e6 60%, #f3dfe0); color: #5a3340;} .art .v2-cerisier .jardin4 img{left: -7%; top: -6%; width: 114%; height: 130%; object-fit: cover; rotate: 2deg; filter: blur(1.5px) saturate(.85); opacity: .5;} .art .v2-cerisier .branche img{right: -5%; top: -10%; width: 78%; transform-origin: 96% 6%;} .art .v2-cerisier{--f-titre: 'Cormorant Garamond', serif; --p-nom: 600; --p-montant: 500;} .art .v2-cerisier{--f-titre: 'Libre Baskerville', serif; --p-nom: 400; --p-montant: 400;} .art .v2-leenpao{background: linear-gradient(160deg, #fdf9f1 0%, #f7efe1 60%, #f1e6d2 100%); color: #3b2a1a; container-type: inline-size; --f-titre: 'Great Vibes', cursive; --p-nom: 400; --c-pastille: transparent; --c-pastille-txt: #b38c45; --c-montant: #b38c45;} .art .v2-leenpao .brume24{position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; -webkit-mask: linear-gradient(90deg, transparent 38%, #000 60%); mask: linear-gradient(90deg, transparent 38%, #000 60%);} .art .v2-leenpao .brume24 i{position: absolute; border-radius: 50%; background: radial-gradient(closest-side, rgba(255,252,246,.95), rgba(255,252,246,0)); filter: blur(5px); animation: m-brume24 var(--t) linear infinite; animation-delay: var(--d);} .art .v2-leenpao .lavis24 .nuages24{display: none;} .art .v2-leenpao .lavis24 .nuages24-ancien{-webkit-mask: radial-gradient(60% 55% at 78% 22%, #000 35%, transparent 75%); mask: radial-gradient(60% 55% at 78% 22%, #000 35%, transparent 75%); filter: blur(.6px); opacity: .85; animation: m-nuages24 16s ease-in-out infinite alternate;} .art .v2-leenpao .cadre24{position: absolute; inset: 3.2cqw; border: 1px solid rgba(201,162,79,.45); border-radius: 2cqw; pointer-events: none; z-index: 2;} .art .v2-leenpao .lavis24{z-index: 1;} .art .v2-leenpao .lavis24 img{position: absolute; right: -2%; top: -3%; width: 64%; opacity: .8; -webkit-mask: linear-gradient(90deg, transparent, #000 22%), radial-gradient(130% 130% at 100% 0%, #000 25%, rgba(0,0,0,.69) 75%); -webkit-mask-composite: source-in; mask: linear-gradient(90deg, transparent, #000 22%), radial-gradient(130% 130% at 100% 0%, #000 25%, rgba(0,0,0,.69) 75%); mask-composite: intersect;} @keyframes m-bougie{ 0% { opacity: .85; } 18% { opacity: 1; } 31% { opacity: .7; } 47% { opacity: .95; } 63% { opacity: .78; } 81% { opacity: 1; } } @keyframes m-brume24{ from { transform: translateX(-30cqw); opacity: 0; } 20% { opacity: 1; } 80% { opacity: 1; } to { transform: translateX(30cqw); opacity: 0; } } @keyframes m-halo{ 50% { transform: translate(-50%, -50%) scale(1.08); opacity: .75; } } @keyframes m-nuages24{ from { transform: translate(-2.2%, .4%); } to { transform: translate(2.6%, -.6%); } } @keyframes m-rayons{ from { transform: rotate(-4deg); opacity: .55; } to { transform: rotate(5deg); opacity: 1; } } .anim-carte .couche{position: absolute; inset: 0; will-change: transform; pointer-events: none;} .anim-carte .couche img{position: absolute; display: block; user-select: none; -webkit-user-drag: none;} .anim-carte canvas.particules{position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none;} .anim-carte .lettre{display: inline-block; white-space: pre;} .anim-carte .or{background: linear-gradient(105deg, #8a6a2c 0%, #e9cf8a calc(var(--gx, 50%) - 18%), #fff3cf var(--gx, 50%), #c9a24f calc(var(--gx, 50%) + 16%), #7d5f25 100%); -webkit-background-clip: text; background-clip: text; color: transparent;} .anim-carte .clair .or{background-image: linear-gradient(105deg, #5e4312 0%, #a98431 calc(var(--gx, 50%) - 18%), #d9b86a var(--gx, 50%), #9a7429 calc(var(--gx, 50%) + 16%), #574010 100%);} .art .v2-montgolfiere{background: linear-gradient(180deg, #ffe0d2 0%, #ffece2 58%, #fff4ee 100%); color: #5b2a33; --ox: 0px; --f-titre: 'Quicksand', sans-serif; --p-nom: 700; --p-montant: 700; --c-pastille: #c2405a; --c-pastille-txt: #fff4ee; --c-montant: #c2405a;} .art .v2-montgolfiere .soleil4{position: absolute; left: 47%; top: 10%; width: 15%; aspect-ratio: 1; border-radius: 50%; background: #ffd0b5; box-shadow: 0 0 0 1.4cqw rgba(255,208,181,.35); filter: drop-shadow(var(--ox) 3px 2px rgba(150,70,60,.18));} .art .v2-montgolfiere .papier4 svg{position: absolute; display: block; overflow: visible; filter: drop-shadow(var(--ox) 4px 3px rgba(130,55,55,.24));} .art .v2-montgolfiere .collines4-fond svg{left: -6%; bottom: 22%; width: 112%;} .art .v2-montgolfiere .collines4-milieu svg{left: -6%; bottom: 8%; width: 112%;} .art .v2-montgolfiere .collines4-avant svg{left: -6%; bottom: -5%; width: 112%;} .art .v2-montgolfiere .nuage4{position: absolute; will-change: transform; filter: drop-shadow(var(--ox) 4px 3px rgba(130,55,55,.2));} .art .v2-montgolfiere .ballon4{position: absolute; z-index: 6; left: 0; top: 0; width: 24%; will-change: transform; filter: drop-shadow(var(--ox) 6px 4px rgba(130,55,55,.26));} .art .v2-montgolfiere .ballon4 img{display: block; width: 100%;} .art .v2-montgolfiere canvas.coeurs4{z-index: 7;} .art .v2-cerfvolant .aile{position: absolute; z-index: 1; width: 46%; height: 52%; left: 30%; top: -26%; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; background: radial-gradient(circle at 40% 40%, rgba(255,255,255,.9), rgba(220,235,255,.45) 70%); border: 1px solid rgba(160,180,210,.5); transform-origin: 50% 100%; animation: s-battement .06s linear infinite alternate;} .art .v2-cerfvolant{background: linear-gradient(180deg, #cde4f1 0%, #e3f0f4 50%, #f7f3ea 100%); color: #2f4352; --f-titre: 'Manrope', sans-serif; --p-nom: 700; --p-montant: 700; --c-pastille: #2f4352; --c-pastille-txt: #f7f3ea;} .art .v2-cerfvolant .nuage15{position: absolute; will-change: transform;} .art .v2-cerfvolant .flou15{filter: blur(9px);} .art .v2-cerfvolant .cv15{position: absolute; z-index: 6; left: 0; top: 0; width: 19.5%; transform-origin: 50% 55%; will-change: transform; filter: drop-shadow(0 6px 6px rgba(40,60,80,.14));} .art .v2-cerfvolant .cv15 img{display: block; width: 100%;} .art .v2-cerfvolant canvas.fil15{z-index: 5;} .art .v2-feu{background: linear-gradient(180deg, #171c3a 0%, #262a52 40%, #4a3f6a 60%, #6a5378 65.8%, #5e4b72 66.2%, #3f3862 74%, #232546 88%, #171a34 100%); color: #f3ece0; --f-titre: 'Playfair Display', serif; --p-nom: 600; --p-montant: 500; --c-pastille: #f0c9d6; --c-pastille-txt: #1b1c37; --c-montant: #f6d9a8;} .art .v2-feu .collines21{position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none;} .art .v2-feu canvas.feu21{z-index: 3;} @keyframes s-battement{ from { transform: scaleY(1) rotate(-12deg); } to { transform: scaleY(.25) rotate(8deg); } } .face:has(.art:not(.sortant) > .v2-euca){--f-titre:'Fraunces', serif;--p-nom:600;--p-montant:500} .face:has(.art:not(.sortant) > .v2-cerisier){--f-titre:'Libre Baskerville', serif;--p-nom:400;--p-montant:400} .face:has(.art:not(.sortant) > .v2-leenpao){--f-titre:'Great Vibes', cursive;--p-nom:400;--f-montant:'Cormorant Garamond', serif;--p-montant:500} .face:has(.art:not(.sortant) > .v2-montgolfiere){--f-titre:'Quicksand', sans-serif;--p-nom:700;--p-montant:700} .face:has(.art:not(.sortant) > .v2-cerfvolant){--f-titre:'Manrope', sans-serif;--p-nom:700;--p-montant:700} .face:has(.art:not(.sortant) > .v2-feu){--f-titre:'Playfair Display', serif;--p-nom:600;--p-montant:500} .face:has(.anim-carte) .f-brand b{font-family:var(--f-titre,'Source Sans 3',sans-serif);font-weight:var(--p-nom,500)} .face:has(.anim-carte) .f-amount{font-family:var(--f-montant,var(--f-titre,'Source Sans 3',sans-serif));font-weight:var(--p-montant,600)!important} /* 05/11 (Simon) : collines de la montgolfière sans filtre (ombre dessinée en dégradé sous chaque vague, vagues prolongées hors cadre) : plus aucun bord visible pendant l'animation, y compris dans Safari qui coupait le dessin filtré à son cadre */ .art .v2-montgolfiere .papier4 svg{filter: none;} /* 05/11 (Simon) : Nuit de Noël, comme la montgolfière : sous les montagnes et les sapins, un prolongement de neige jusque bien sous la carte, pour qu'aucun bord d'image ne se voie pendant l'animation (iPhone) */ .art .v2-noelnuit .montagnes::after,.art .v2-noelnuit .sapins::after{content:'';position:absolute;left:-30%;right:-30%;top:84%;bottom:-60%;background:linear-gradient(180deg,#cfd9ec,#b9c6df);pointer-events:none} .art .v2-noelnuit .sapins::after{top:80%}