/* ==========================================================================
   Kit - Jetons
   ========================================================================== */
body {
    --noir: var(--e-global-color-noir, #0C0E10);
    --noir-niveau-1: var(--e-global-color-noir1, #14171A);
    --noir-niveau-2: var(--e-global-color-noir2, #1C2024);
    --noir-niveau-3: var(--e-global-color-noir3, #262B30);
    --noir-profond: var(--e-global-color-noirprofond, #090B0C);
    --anthracite: var(--e-global-color-anthracite, #181B1F);
    --blanc: var(--e-global-color-blanc, #FFFFFF);
    --blanc-casse: var(--e-global-color-blanccasse, #EAEEF0);
    --gris-clair: var(--e-global-color-grisclair, #C2C9CE);
    --gris: var(--e-global-color-text, #98A2A8);
    --gris-fonce: var(--e-global-color-grisfonce, #6C767C);
    --blanc-alpha-niveau-1: var(--e-global-color-blanca1, rgb(255 255 255 / .12));
    --blanc-alpha-niveau-2: var(--e-global-color-blanca2, rgb(255 255 255 / .08));
    --vert: var(--e-global-color-primary, #A5CC00);
    --vert-fonce: var(--e-global-color-vertfonce, #8FB200);
    --vert-alpha: var(--e-global-color-vertalpha, rgb(165 204 0 / .14));
    --violet: var(--e-global-color-secondary, #A78BFA);
    --violet-fonce: var(--e-global-color-violetfonce, #7C3AED);
    --violet-profond: var(--e-global-color-violetprofond, #5B21B6);
    --violet-nuit: var(--e-global-color-violetnuit, #110C1A);
    --violet-alpha: var(--e-global-color-violetalpha, rgb(167 139 250 / .14));
    --orange: var(--e-global-color-accent, #F0A73C);
    --rouge: var(--e-global-color-rouge, #F26B7E);
    --police: var(--e-global-typography-text-font-family, 'neulis-neue'), -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
    --police-tech: var(--e-global-typography-technique-font-family, 'JetBrains Mono'), ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    --verre: rgb(20 23 26 / .55);
    --verre-filet: rgb(234 238 240 / .15);
    --rayon: 16px;
    --rayon-imbrique: 8px;
    --rayon-champ: 4px;
    --ease-sortie: cubic-bezier(.16, 1, .3, 1);
    --etiquette-fond: rgb(12 14 16 / .84);
    --etiquette-filet: rgb(255 255 255 / .16);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

@property --lien-tour { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@property --arc-x { syntax: '<length>'; inherits: false; initial-value: 0px; }
@property --arc-y { syntax: '<length>'; inherits: false; initial-value: 0px; }
@property --arc-rot { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@property --arc-sc { syntax: '<number>'; inherits: false; initial-value: 1; }
@property --arc-op { syntax: '<number>'; inherits: false; initial-value: 1; }

/* ==========================================================================
   Kit - Typographies Des Widgets Sur Mesure
   ========================================================================== */
.t-tres-grand {
    font: var(--e-global-typography-titretg-font-weight) var(--e-global-typography-titretg-font-size) / var(--e-global-typography-titretg-line-height) var(--police);
    letter-spacing: var(--e-global-typography-titretg-letter-spacing);
    color: var(--blanc-casse);
    text-wrap: balance;
}
.t-grand {
    font: var(--e-global-typography-primary-font-weight) var(--e-global-typography-primary-font-size) / var(--e-global-typography-primary-line-height) var(--police);
    letter-spacing: var(--e-global-typography-primary-letter-spacing);
    color: var(--blanc-casse);
    text-wrap: balance;
}
.t-moyen {
    font: var(--e-global-typography-secondary-font-weight) var(--e-global-typography-secondary-font-size) / var(--e-global-typography-secondary-line-height) var(--police);
    letter-spacing: var(--e-global-typography-secondary-letter-spacing);
    color: var(--blanc-casse);
}
.t-petit {
    font: var(--e-global-typography-titrep-font-weight) var(--e-global-typography-titrep-font-size) / var(--e-global-typography-titrep-line-height) var(--police);
    color: var(--blanc-casse);
}
.texte-grand {
    font: var(--e-global-typography-texteg-font-weight) var(--e-global-typography-texteg-font-size) / var(--e-global-typography-texteg-line-height) var(--police);
    color: var(--gris-clair);
}

/* ==========================================================================
   Socle
   ========================================================================== */
html { scroll-padding-top: 96px; }
:where(body) :where(h1, h2, h3, h4, h5, h6, p) { margin-block: 0; }
.elementor-widget-text-editor p { margin-block: 0; }
.elementor-widget-text-editor p + p { margin-top: .9em; }
:where(.smory-zone, .entete, .pied, .menu-mobile) a { color: inherit; }
:where(.smory-zone, .entete, .pied, .menu-mobile) :where(ul, ol) { margin: 0; padding: 0; list-style: none; }
:where(.smory-zone, .entete, .pied, .menu-mobile) img { display: block; max-width: 100%; height: auto; }
:where(.smory-zone, .entete, .menu-mobile) button { font: inherit; text-transform: none; letter-spacing: normal; }
:where(.smory-zone, .entete, .menu-mobile) button:focus:not(:focus-visible) { outline: 0; }
.smory-zone .elementor-heading-title { text-wrap: balance; }
.accent-vert { color: var(--vert); }
.accent-violet { color: var(--violet); }
.accent-orange { color: var(--orange); }
/* Mot composé qu'un titre ne doit pas couper au trait d'union (« Validez-la ») */
.insecable { white-space: nowrap; }

/* ==========================================================================
   Grain Et Apparitions
   ========================================================================== */
body::after {
    content: '';
    position: fixed;
    inset: -50%;
    z-index: 95;
    pointer-events: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
    opacity: .055;
    animation: grain 1.1s steps(6) infinite;
}
@keyframes grain {
    0%   { transform: translate(0, 0); }
    20%  { transform: translate(-3%, 2%); }
    40%  { transform: translate(2%, -3%); }
    60%  { transform: translate(-2%, -1%); }
    80%  { transform: translate(3%, 3%); }
    100% { transform: translate(0, 0); }
}
.js-anim [data-anim="apparition"] { opacity: 0; }
.js-anim [data-anim="titre"] { opacity: 0; }
.ligne { padding-bottom: .06em; }
.accent-vert--reflet {
    background: linear-gradient(100deg, var(--vert) 0%, var(--vert) 42%, #F2FFB8 50%, var(--vert) 58%, var(--vert) 100%);
    background-size: 260% 100%;
    -webkit-background-clip: text;
            background-clip: text;
    color: transparent;
    animation: reflet-texte 6s ease-in-out infinite;
}
@keyframes reflet-texte {
    0%, 55% { background-position: 100% 0; }
    100%    { background-position: 0% 0; }
}

/* ==========================================================================
   Zones
   ========================================================================== */
.smory-zone { position: relative; overflow-x: clip; }
.smory-zone + .smory-zone { border-top: 1px solid var(--blanc-alpha-niveau-2); }
.smory-zone--claire {
    --verre: rgb(32 36 40 / .72);
    --verre-filet: rgb(234 238 240 / .17);
    background: var(--anthracite);
}
.smory-zone--halo-vert { background: radial-gradient(45% 55% at 22% 50%, rgb(165 204 0 / .12), transparent 70%), var(--noir); }
.smory-zone--violet {
    --verre: rgb(30 22 46 / .62);
    background:
        radial-gradient(45% 55% at 78% 38%, rgb(124 58 237 / .32), transparent 70%),
        radial-gradient(35% 40% at 8% 92%, rgb(167 139 250 / .12), transparent 70%),
        var(--violet-nuit);
}
.smory-cadre { position: relative; z-index: 1; }
.e-con.smory-entete-zone { max-width: 880px; }
.e-con.smory-entete-zone--centre { margin-inline: auto; text-align: center; }
.perso-zone .e-con.smory-entete-zone { max-width: 900px; }
.e-con > .elementor-widget.smory-calque,
.e-con-inner > .elementor-widget.smory-calque {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: auto;
    max-width: none;
    margin: 0;
    pointer-events: none;
}
.e-con > .elementor-widget.smory-calque.smory-couche-lumieres { z-index: 4; }
.e-con > .elementor-widget.smory-calque-defiler {
    position: absolute;
    left: 50%;
    bottom: 30px;
    z-index: 5;
    width: auto;
    margin: 0;
    translate: -50% 0;
}

/* ==========================================================================
   Composants
   ========================================================================== */
.boite {
    border: 1px solid var(--verre-filet);
    border-radius: var(--rayon);
    background: var(--verre);
}
.lueur { position: relative; }
.lueur::before {
    content: '';
    position: absolute;
    inset: -1px;
    z-index: 3;
    border-radius: inherit;
    padding: 1px;
    background: radial-gradient(140px circle at 100% 0%, rgb(255 255 255 / .62) 0%, rgb(255 255 255 / .22) 34%, transparent 72%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
            mask-composite: exclude;
    pointer-events: none;
}
.lueur--violet::before {
    background: radial-gradient(180px circle at 100% 0%, rgb(196 181 253 / .9) 0%, rgb(167 139 250 / .32) 34%, transparent 72%);
}

.pastille {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 7px 14px;
    border: 1px solid var(--blanc-alpha-niveau-1);
    border-radius: 999px;
    background: var(--verre);
    font: 600 .875rem/1.2 var(--police);
    color: var(--gris-clair);
}
.pastille__point { width: 8px; height: 8px; border-radius: 50%; background: var(--vert); box-shadow: 0 0 10px 1px rgb(165 204 0 / .7); }
.pastille__point--orange { background: var(--orange); box-shadow: 0 0 10px 1px rgb(240 167 60 / .7); }
.pastille__point--violet { background: var(--violet); box-shadow: 0 0 10px 1px rgb(167 139 250 / .8); }
.pastille__point--blanc { background: var(--blanc-casse); box-shadow: 0 0 10px 1px rgb(255 255 255 / .45); }

.indice { display: inline-flex; align-items: center; gap: 8px; margin: 0; font: 500 .8125rem/1.2 var(--police-tech); color: var(--gris); }
.indice i { font-size: 1rem; color: var(--gris-clair); }

.pictogramme {
    flex: none;
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: var(--rayon-imbrique);
    background: var(--noir-niveau-2);
    color: var(--gris-clair);
    font-size: 1.15rem;
}
.pictogramme--vert   { background: var(--vert-alpha); color: var(--vert); }
.pictogramme--violet { background: var(--violet-alpha); color: var(--violet); }
.pictogramme--orange { color: var(--orange); }

.numero {
    display: grid;
    place-items: center;
    flex: none;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    font: 800 1rem/1 var(--police);
    color: var(--noir);
}
.numero--orange { background: var(--orange); box-shadow: 0 0 18px -2px rgb(240 167 60 / .6); }
.numero--vert   { background: var(--vert); box-shadow: 0 0 18px -2px rgb(165 204 0 / .6); }
.numero--violet { background: var(--violet); box-shadow: 0 0 18px -2px rgb(167 139 250 / .7); }

.specs, .specs-tech { display: flex; flex-wrap: wrap; gap: 8px; }
.specs li, .specs-tech li {
    padding: 6px 10px;
    border: 1px solid var(--blanc-alpha-niveau-1);
    border-radius: 6px;
    background: rgb(255 255 255 / .03);
    font: 500 .75rem/1.2 var(--police-tech);
    color: var(--gris-clair);
}
.specs-tech li { background: rgb(12 14 16 / .35); }

/* ==========================================================================
   Global - Boutons
   ========================================================================== */
.btn,
.elementor-widget-button.smory-btn .elementor-button {
    position: relative;
    isolation: isolate;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 15px 28px;
    border: 1px solid transparent;
    border-radius: 999px;
    background-origin: border-box;
    font-family: var(--police);
    font-size: var(--e-global-typography-accent-font-size, 1rem);
    font-weight: var(--e-global-typography-accent-font-weight, 600);
    line-height: var(--e-global-typography-accent-line-height, 1.2);
    color: var(--blanc-casse);
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: box-shadow .2s ease, background-color .2s ease, border-color .2s ease;
}
.elementor-widget-button.smory-btn .elementor-button-content-wrapper { display: inline-flex; align-items: center; gap: 10px; }
.elementor-widget-button.smory-btn .elementor-button-icon { display: inline-flex; margin: 0; font-size: 1.15em; line-height: 1; }
.elementor-widget-button.smory-btn .elementor-button-icon i { line-height: 1; }
.btn i { font-size: 1.15em; line-height: 1; }
.btn--vert,
.elementor-widget-button.smory-btn--vert .elementor-button {
    color: var(--noir);
    background-color: var(--vert);
    background-image: linear-gradient(to bottom, rgb(255 255 255 / .22) 0%, rgb(255 255 255 / 0) 48%, rgb(0 0 0 / .18) 100%);
    box-shadow: 0 0 0 1px rgb(165 204 0 / .45), 0 10px 30px -8px rgb(165 204 0 / .6), 0 0 22px -4px rgb(165 204 0 / .45);
}
.btn--vert:hover,
.elementor-widget-button.smory-btn--vert .elementor-button:hover {
    color: var(--noir);
    background-color: var(--vert-fonce);
    box-shadow: 0 0 0 1px rgb(165 204 0 / .6), 0 14px 36px -8px rgb(165 204 0 / .75), 0 0 30px -2px rgb(165 204 0 / .55);
}
.btn--violet,
.elementor-widget-button.smory-btn--violet .elementor-button {
    color: var(--blanc);
    background-color: var(--violet-fonce);
    background-image: linear-gradient(to bottom, rgb(255 255 255 / .1) 0%, rgb(255 255 255 / 0) 45%, rgb(0 0 0 / .22) 100%), linear-gradient(205deg, var(--violet-fonce) 0%, var(--violet-profond) 100%);
    box-shadow: 0 0 0 1px rgb(167 139 250 / .5), 0 10px 30px -8px rgb(124 58 237 / .75), 0 0 24px -4px rgb(167 139 250 / .5);
}
.btn--violet:hover,
.elementor-widget-button.smory-btn--violet .elementor-button:hover {
    color: var(--blanc);
    box-shadow: 0 0 0 1px rgb(167 139 250 / .7), 0 14px 36px -8px rgb(124 58 237 / .9), 0 0 32px -2px rgb(167 139 250 / .6);
}
.btn--contour,
.elementor-widget-button.smory-btn--contour .elementor-button { background: rgb(20 23 26 / .4); border-color: rgb(255 255 255 / .16); color: var(--blanc-casse); }
.btn--contour:hover,
.elementor-widget-button.smory-btn--contour .elementor-button:hover { background: var(--noir-niveau-2); border-color: rgb(255 255 255 / .28); color: var(--blanc-casse); }

.etincelle {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 96;
    width: 6px;
    height: 6px;
    margin: -3px 0 0 -3px;
    border-radius: 50%;
    pointer-events: none;
}
.etincelle--vert   { background: #E3F59A; box-shadow: 0 0 10px 2px rgb(165 204 0 / .85); }
.etincelle--violet { background: #E4DAFF; box-shadow: 0 0 10px 2px rgb(167 139 250 / .9); }

/* ==========================================================================
   Modèle - Header
   ========================================================================== */
.elementor-location-header { position: sticky; top: 0; z-index: 40; }
.entete {
    background: rgb(20 23 26 / .5);
    -webkit-backdrop-filter: blur(6px) saturate(140%);
            backdrop-filter: blur(6px) saturate(140%);
    border-bottom: 1px solid var(--blanc-alpha-niveau-2);
    transition: translate .5s var(--ease-sortie), background-color .3s ease;
}
.elementor-location-header.is-cache .entete { translate: 0 -105%; }
.elementor-location-header.is-defile .entete { background: rgb(12 14 16 / .74); }
.entete__progression {
    position: absolute;
    left: 0;
    bottom: -1px;
    width: 100%;
    height: 2px;
    transform: scaleX(0);
    transform-origin: 0 50%;
    background: linear-gradient(90deg, var(--vert), var(--violet));
    pointer-events: none;
}
/* .elementor-element : un cran de plus que la règle par élément de l'éditeur, sinon l'éditeur affiche la taille Action */
.entete .elementor-widget-button.smory-btn.elementor-element .elementor-button { padding: 10px 18px; font-size: var(--e-global-typography-actionp-font-size, .9375rem); }
.elementor-widget-icon.entete__burger .elementor-icon {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid rgb(255 255 255 / .16);
    border-radius: 50%;
    background: rgb(20 23 26 / .4);
    color: var(--blanc-casse);
    font-size: 1.35rem;
}
.entete__burger .elementor-icon i { line-height: 1; }
.elementor-widget-icon.entete__burger .elementor-icon:hover,
.elementor-widget-icon.menu-mobile__fermer .elementor-icon:hover { border-color: rgb(255 255 255 / .32); color: var(--blanc-casse); }

.logo-anime { position: relative; display: block; --h: 42px; }
.logo-anime .logo-anime__img { display: block; width: auto; height: var(--h); }
.js-anim .logo-anime .logo-anime__img { visibility: hidden; }
.logo-anime__video {
    position: absolute;
    top: 50%;
    left: 50%;
    display: block;
    width: auto;
    height: calc(var(--h) * 982 / 415);
    aspect-ratio: 1635 / 982;
    transform: translate(-50%, -48.5%);
    pointer-events: none;
}
.logo-anime.is-video-ko .logo-anime__img,
html:not(.js-anim) .logo-anime .logo-anime__img { visibility: visible; }
.logo-anime.is-video-ko .logo-anime__video,
html:not(.js-anim) .logo-anime__video { display: none; }

/* ==========================================================================
   Modèle - Header : Mega Menu
   ========================================================================== */
.entete .e-n-menu-title { border-radius: 999px; }
.entete .e-n-menu-title-container { gap: 6px; }
.mega {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 200px;
    gap: 15px;
    padding: 15px;
    background: rgb(20 23 26 / .98);
    -webkit-backdrop-filter: blur(12px) saturate(140%);
            backdrop-filter: blur(12px) saturate(140%);
    box-shadow: 0 30px 60px -20px rgb(0 0 0 / .8);
}
.mega--simple { grid-template-columns: minmax(0, 1fr); }
.mega__liens { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.mega__lien { display: flex; align-items: flex-start; gap: 12px; padding: 12px; border-radius: var(--rayon-imbrique); color: var(--blanc-casse); text-decoration: none; transition: background-color .2s ease; }
.mega__lien:hover { background: rgb(255 255 255 / .05); color: var(--blanc-casse); }
.mega__lien strong { display: block; font: 700 .9375rem/1.25 var(--police); }
.mega__lien small  { display: block; margin-top: 3px; font: 400 .8125rem/1.4 var(--police); color: var(--gris); }
.mega__lien.is-courant { background: rgb(255 255 255 / .05); }
.mega__lien.is-courant strong::after,
.menu-mobile a.is-courant::after {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    margin-left: 8px;
    border-radius: 50%;
    background: var(--vert);
    box-shadow: 0 0 8px rgb(165 204 0 / .7);
    vertical-align: middle;
}
.mega__promo {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 240px;
    height: 100%;
    padding: 15px;
    overflow: hidden;
    border-radius: var(--rayon-imbrique);
    background: radial-gradient(90% 70% at 50% 30%, rgb(124 58 237 / .45), transparent 70%), #17121F;
    color: var(--blanc-casse);
    text-decoration: none;
}
.mega__promo img { position: absolute; top: 14px; left: 50%; width: 56%; translate: -50% 0; rotate: 6deg; filter: drop-shadow(0 12px 20px rgb(0 0 0 / .6)); transition: rotate .3s ease; }
.mega__promo:hover img { rotate: 0deg; }
.mega__promo span { position: relative; padding-top: 30px; background: linear-gradient(to top, #17121F 55%, transparent); }
.mega__promo strong { display: block; font: 700 .9375rem/1.25 var(--police); }
.mega__promo small  { display: block; margin-top: 3px; font: 400 .8125rem/1.4 var(--police); color: var(--gris-clair); }

/* ==========================================================================
   Modèle - Menu Mobile
   ========================================================================== */
.menu-mobile {
    background: rgb(12 14 16 / .96);
    -webkit-backdrop-filter: blur(12px);
            backdrop-filter: blur(12px);
}
.menu-mobile__tete { border-bottom: 1px solid var(--blanc-alpha-niveau-2); }
.elementor-widget-icon.menu-mobile__fermer .elementor-icon {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid rgb(255 255 255 / .16);
    border-radius: 50%;
    color: var(--blanc-casse);
    font-size: 1.35rem;
}
.menu-mobile__corps { display: flex; flex-direction: column; }
.menu-mobile__groupe { border-bottom: 1px solid var(--blanc-alpha-niveau-2); }
.menu-mobile__groupe summary, .menu-mobile__lien {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px 0;
    font: 700 1.25rem/1.3 var(--police);
    color: var(--blanc-casse);
    text-decoration: none;
    list-style: none;
    cursor: pointer;
}
.menu-mobile__groupe summary::-webkit-details-marker { display: none; }
.menu-mobile__groupe summary i { transition: rotate .2s ease; }
.menu-mobile__groupe[open] summary i { rotate: 180deg; }
.menu-mobile__groupe a { display: block; padding: 10px 0 10px 15px; font: 500 1.0625rem/1.3 var(--police); color: var(--gris-clair); text-decoration: none; }
.menu-mobile__groupe a:last-child { padding-bottom: 20px; }
.menu-mobile__lien { border-bottom: 1px solid var(--blanc-alpha-niveau-2); }
.menu-mobile__groupe a.is-courant { color: var(--blanc-casse); }
.menu-mobile .elementor-widget-button.smory-btn,
.menu-mobile .elementor-widget-button.smory-btn .elementor-button { width: 100%; }

/* ==========================================================================
   Global - Fonds Animés
   ========================================================================== */
.fond-anime { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; border-radius: inherit; }
.aurore { position: absolute; width: 62vw; aspect-ratio: 1; border-radius: 50%; mix-blend-mode: screen; will-change: transform; }
.aurore--vert {
    left: -20vw;
    top: -34vw;
    background: radial-gradient(closest-side, rgb(165 204 0 / .26), transparent 72%);
    animation: aurore-a 17s ease-in-out infinite alternate;
}
.aurore--violet {
    right: -22vw;
    bottom: -36vw;
    background: radial-gradient(closest-side, rgb(124 58 237 / .5), transparent 72%);
    animation: aurore-b 21s ease-in-out infinite alternate;
}
@keyframes aurore-a { to { transform: translate(16vw, 12vw) scale(1.18); } }
@keyframes aurore-b { to { transform: translate(-14vw, -9vw) scale(1.22); } }
.grille-tech {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgb(255 255 255 / .05) 1px, transparent 1px),
        linear-gradient(90deg, rgb(255 255 255 / .05) 1px, transparent 1px);
    background-size: 60px 60px;
    -webkit-mask-image: radial-gradient(ellipse 70% 62% at 66% 46%, #000 18%, transparent 74%);
            mask-image: radial-gradient(ellipse 70% 62% at 66% 46%, #000 18%, transparent 74%);
    pointer-events: none;
}
.grille-tech--hero {
    background-image:
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='128' height='128'><path d='M0 6V0h6M122 0h6v6M128 122v6h-6M6 128H0v-6' fill='none' stroke='white' stroke-opacity='.35' stroke-width='1'/><path d='M64 58v12M58 64h12' stroke='white' stroke-opacity='.4' stroke-width='1'/></svg>"),
        linear-gradient(rgb(255 255 255 / .075) 1px, transparent 1px),
        linear-gradient(90deg, rgb(255 255 255 / .075) 1px, transparent 1px);
    background-size: 128px 128px, 64px 64px, 64px 64px;
    background-position: -1px -1px, -1px -1px, -1px -1px;
    -webkit-mask-image: radial-gradient(ellipse 85% 80% at 60% 45%, #000 30%, transparent 82%);
            mask-image: radial-gradient(ellipse 85% 80% at 60% 45%, #000 30%, transparent 82%);
}
.grille-tech--violet {
    background-size: 40px 40px;
    -webkit-mask-image: radial-gradient(circle at 60% 60%, #000 10%, transparent 70%);
            mask-image: radial-gradient(circle at 60% 60%, #000 10%, transparent 70%);
}
.particules { position: absolute; inset: 0; width: 100%; height: 100%; }

.lumieres { position: absolute; inset: 0; z-index: 4; overflow: hidden; pointer-events: none; border-radius: inherit; }
.lumieres__halo { position: absolute; border-radius: 50%; mix-blend-mode: screen; will-change: transform; }
.lumieres__halo--vert {
    left: -16vw;
    top: -26vw;
    width: 52vw;
    aspect-ratio: 1;
    background: radial-gradient(closest-side, rgb(190 230 40 / .34), rgb(165 204 0 / .1) 55%, transparent 76%);
    animation: aurore-a 17s ease-in-out infinite alternate;
}
.lumieres__halo--violet {
    right: -18vw;
    bottom: -30vw;
    width: 56vw;
    aspect-ratio: 1;
    background: radial-gradient(closest-side, rgb(167 139 250 / .42), rgb(124 58 237 / .14) 55%, transparent 76%);
    animation: aurore-b 21s ease-in-out infinite alternate;
}

/* ==========================================================================
   Global - Cartes De L'Application
   ========================================================================== */
.carte-app {
    line-height: 1.2;
    --app-success: #00BE3D;
    --app-danger: #D62828;
    --app-gray-300: #BDBDBD;
    --app-gray-400: #9E9E9E;
    --app-gray-500: #767676;
    --app-dark: #1A1A1A;
    --app-card-text-dark: #1A1A2E;
    --app-white: #FFFFFF;
    --app-warning: #F77F00;
    --app-font-size-xs: 0.75rem;
    --app-font-size-sm: 0.875rem;
    --app-font-mono: 'SF Mono', 'Fira Code', 'Fira Mono', 'Roboto Mono', monospace;
    --app-spacer: 1rem;
    --app-spacer-xs: 0.25rem;
    --app-spacer-sm: 0.5rem;
    --app-spacer-md: 1.5rem;
    --app-radius: 8px;
    --app-radius-sm: 4px;
}
.carte-app img { display: inline-block; max-width: none; }
.carte-app .tc-card__image,
.carte-app .tc-card__image-cutout,
.carte-app .tc-card__zone-bottom-logo img { max-width: 100%; }
/* .elementor img (0,1,1) remet la hauteur des images en automatique : les tailles du moteur de cartes sont reposées ici. */
.carte-app .tc-card__image { height: 100%; }
.carte-app .tc-card__category-badge { height: 16cqw; }
.carte-app .tc-card__security-badge { height: 90%; }
.carte-app .tc-card__sport-icon { height: 5.9cqw; }
.carte-app .as-slab__logo { height: 6.6cqw; }
.carte-app.card-visual:not(.card-visual--slab) { width: 100%; max-width: none; margin: 0; }
.carte-app.card-visual:not(.card-visual--slab) > .tc-card { width: 100%; max-width: none; }
.carte-app .relief-ombre { display: none; }
.carte-app .tc-card--depth .relief-ombre {
    display: block;
    position: absolute;
    inset: 0;
    z-index: 6;
    filter: blur(.9cqw);
    opacity: .92;
    translate: 0 .9cqw;
    pointer-events: none;
}
.carte-app .tc-card--depth .relief-ombre::before {
    content: '';
    position: absolute;
    inset: 0;
    background: #000;
    -webkit-mask: var(--photo-depth) center / cover no-repeat;
            mask: var(--photo-depth) center / cover no-repeat;
}
.carte-app .tc-card--depth .tc-card__image-cutout {
    translate: calc((var(--pointer-x, 50%) - 50%) * .05) calc((var(--pointer-y, 50%) - 50%) * .035);
    scale: 1.03;
    transform-origin: 50% 100%;
}
.smory-carte { margin-inline: auto; }

.lien-link {
    position: absolute;
    inset: 0;
    z-index: 4;
    border-radius: 4.7cqw;
    -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
    pointer-events: none;
}
.lien-link::before {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: inherit;
    padding: 4px;
    background: conic-gradient(from var(--lien-tour), transparent 0%, transparent 52%, rgb(124 58 237 / .85) 74%, #A78BFA 87%, #FFFFFF 95%, #A78BFA 98%, transparent 100%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
            mask-composite: exclude;
    filter: drop-shadow(0 0 8px rgb(167 139 250 / 1)) drop-shadow(0 0 2px rgb(124 58 237 / 1));
    animation: lien-tour 2.6s linear infinite;
}
@keyframes lien-tour { to { --lien-tour: 360deg; } }
.lien-link::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    box-shadow:
        inset 0 0 0 2px rgb(237 233 254 / .95),
        0 0 0 2px var(--violet),
        0 0 22px 4px rgb(167 139 250 / .85),
        0 0 56px 8px rgb(124 58 237 / .55);
    opacity: 0;
    animation: lien-arc 3.2s linear infinite;
}
@keyframes lien-arc {
    0%,    1.4%  { opacity: 0; }
    1.5%,  2.6%  { opacity: 1; }
    2.7%,  3.8%  { opacity: 0; }
    3.9%,  4.6%  { opacity: .6; }
    4.7%,  7.2%  { opacity: 0; }
    7.3%,  9.4%  { opacity: 1; }
    9.5%, 10.2%  { opacity: .18; }
    10.3%,11.6%  { opacity: .9; }
    11.7%,49.9%  { opacity: 0; }
    50%,  51.4%  { opacity: .85; }
    51.5%,52.6%  { opacity: 0; }
    52.7%,53.6%  { opacity: .5; }
    53.7%,100%   { opacity: 0; }
}

/* ==========================================================================
   Global - Objet LINK™ : la plaque
   --------------------------------------------------------------------------
   19/10 (Julien) : le LINK™ se montre sous sa vraie forme, une petite plaque
   NFC, et non plus en rond (jeton du 16/10, balle de tennis avant). Le visuel
   est un seul dessin, assets/img/link-plaque.svg : plaque graphite, logo SMORY,
   symbole NFC violet. La classe `.balle` reste (huit widgets et les contenus de
   la prod l'emploient) ; ses variantes de couleur dessinent la même plaque.
   ========================================================================== */
.balle {
    --halo: rgb(167 139 250 / .4);
    position: relative;
    display: block;
    width: 34%;
    aspect-ratio: 7 / 4;
    border-radius: 7.4% / 13%;
    background: url(../img/link-plaque.svg) center / 100% 100% no-repeat;
    box-shadow: 0 22px 36px -12px rgb(0 0 0 / .75), 0 0 36px -8px var(--halo);
}

/* ==========================================================================
   Zone - Hero
   ========================================================================== */
.hero {
    min-height: calc(100svh - 77px);
    background:
        radial-gradient(55% 60% at 0% 0%, rgb(165 204 0 / .13), transparent 70%),
        radial-gradient(50% 65% at 100% 100%, rgb(124 58 237 / .24), transparent 70%),
        var(--noir);
}
.hero__chapo { max-width: 600px; }
.chiffres { display: flex; flex-wrap: wrap; gap: 15px 30px; margin: 0; padding-top: 30px; border-top: 1px solid var(--blanc-alpha-niveau-2); }
.chiffres__item { display: flex; flex-direction: column; gap: 6px; min-width: 96px; }
.chiffres dt { font: 800 2.25rem/1 var(--police); letter-spacing: -.03em; color: var(--blanc-casse); }
/* Libellés longs (« effets holographiques, et bientôt plus ») : sur deux lignes dans leur colonne, pour que les
   trois chiffres restent sur un rang. */
.chiffres dd { margin: 0; max-width: 24ch; font: 500 .75rem/1.3 var(--police-tech); color: var(--gris); text-wrap: balance; }

.hero__visuel { position: relative; width: 100%; aspect-ratio: 1 / 1; perspective: 1400px; }
.hero__visuel::before {
    content: '';
    position: absolute;
    inset: 10% 15%;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgb(124 58 237 / .45), transparent);
    filter: blur(20px);
    mix-blend-mode: screen;
}
.eventail { position: absolute; inset: 0; transform-style: preserve-3d; }
.eventail__carte {
    position: absolute;
    left: calc(50% + var(--x));
    top: calc(50% + var(--y));
    width: var(--l);
    translate: -50% -50%;
    rotate: var(--r);
    transform-style: preserve-3d;
}
.eventail__carte--g2     { --x: -34%; --y: 8%;  --r: -16deg; --l: 27%; z-index: 1; }
.eventail__carte--g1     { --x: -19%; --y: 3%;  --r: -8deg;  --l: 33%; z-index: 2; }
.eventail__carte--centre { --x: 0%;   --y: -1%; --r: 0deg;   --l: 42%; z-index: 4; }
.eventail__carte--d1     { --x: 19%;  --y: 3%;  --r: 8deg;   --l: 33%; z-index: 3; }
.eventail__carte--d2     { --x: 34%;  --y: 8%;  --r: 16deg;  --l: 27%; z-index: 1; }
.eventail__flottant { position: relative; transform-style: preserve-3d; }
.eventail .card-visual { filter: drop-shadow(0 24px 36px rgb(0 0 0 / .55)); }
.eventail__carte--centre .card-visual { filter: drop-shadow(0 30px 50px rgb(91 33 182 / .7)); }
/* La plaque LINK™ sous la carte, entre ses ondes (19/10) : la plaque et la carte communiquent */
.hero__link { position: absolute; left: 50%; top: 87%; z-index: 5; width: 19%; translate: -50% -50%; }
.hero__link .balle { width: 100%; }
.hero__ondes { position: absolute; left: 50%; top: 50%; width: 182%; height: auto; translate: -50% -50%; overflow: visible; fill: none; stroke: var(--violet); stroke-width: 5; stroke-linecap: round; pointer-events: none; }
.hero__onde { opacity: .2; animation: hero-onde 1.8s ease-in-out infinite; }
.hero__onde--2 { animation-delay: .25s; }
.hero__onde--3 { animation-delay: .5s; }
@keyframes hero-onde { 0%, 100% { opacity: .15; } 35% { opacity: 1; } }
.js-anim .hero__link { animation: hero-link-entree .8s var(--ease-sortie) 1.1s both; }
@keyframes hero-link-entree { from { opacity: 0; translate: -50% 0; } }
/* LE TROPHÉE CONNECTÉ (23/10, réglage « Trophée connecté » du widget) : de l'arrière vers l'avant,
   les cartes, la coupe (à leur droite, à leur hauteur, devant les deux cartes de droite), puis la
   main et son téléphone qui scanne la plaque LINK™ du socle. Coupe, ondes, main et repère sont
   rendus HORS de .eventail : dans ce contexte 3D, la carte centrale passait devant la main
   malgré le z-index. Coupe et main : photos Midjourney détourées, plaque SMORY et écran posés. */
.hero__visuel--trophee .eventail__carte--g2     { --x: -39%; --y: 7%;   --l: 22%; }
.hero__visuel--trophee .eventail__carte--g1     { --x: -26%; --y: 2.5%; --l: 27%; }
.hero__visuel--trophee .eventail__carte--centre { --x: -10%; --y: -1%;  --l: 34%; }
.hero__visuel--trophee .eventail__carte--d1     { --x: 6%;   --y: 2.5%; --l: 27%; }
.hero__visuel--trophee .eventail__carte--d2     { --x: 19%;  --y: 7%;   --l: 22%; }
.hero__visuel--trophee .eventail .repere--valide .repere__boite { max-width: 12.5rem; }
/* Deux étages par objet : la boîte (position, taille) que smory-hero.js fait flotter et suivre la
   souris ; l'image dedans, qui porte la rotation, l'ombre et l'entrée. GSAP réécrit translate et
   rotate de ce qu'il anime : rien de tout cela ne doit être posé sur la boîte. */
.hero__trophee { position: absolute; right: 4%; top: 23%; z-index: 7; width: 32%; aspect-ratio: 720 / 1192; pointer-events: none; }
.hero__trophee-image {
    position: absolute;
    inset: 0;
    background: url(../img/trophee-link.webp) center / contain no-repeat;
    filter: drop-shadow(-10px 24px 34px rgb(0 0 0 / .75)) drop-shadow(0 0 40px rgb(167 139 250 / .18));
}
/* Les ondes, centrées sur la plaque du socle (en % de la boîte de la coupe) */
.hero__trophee .hero__ondes--trophee { left: 64%; top: 80.8%; z-index: 1; width: 87.5%; }
/* Le téléphone : son coin haut droit contre la plaque, penché vers elle */
.hero__main { position: absolute; left: 55.8%; top: 46%; z-index: 9; width: 40%; aspect-ratio: 800 / 1144; transform-origin: 41% 3.4%; pointer-events: none; }
.hero__main-image {
    position: absolute;
    inset: 0;
    background: url(../img/main-telephone.webp) center / contain no-repeat;
    filter: drop-shadow(-18px 26px 34px rgb(0 0 0 / .7));
    transform-origin: 41% 3.4%;
    rotate: 8deg;
}
/* Le repère du trophée : sans trait ni calage sur un élément (d'où le sélecteur renforcé,
   qui l'emporte sur .repere:not([style*="--ay"]) en fin de feuille) */
.hero__visuel > .repere.hero__trophee-repere { display: flex; top: 8%; right: 2%; z-index: 9; width: auto; translate: 0 0; }
.hero__trophee-repere .repere__boite { max-width: 15rem; }
.js-anim :is(.hero__trophee-image, .hero__main-image) { animation: hero-trophee-entree .8s var(--ease-sortie) 1.1s both; }
@keyframes hero-trophee-entree { from { opacity: 0; translate: 0 24px; } }
.js-anim .hero__ondes--trophee { animation: hero-ondes-entree .6s ease 1.5s both; }
@keyframes hero-ondes-entree { from { opacity: 0; } }
/* Entre 1024 et 1279 px, le visuel rétrécit plus vite que le repère : il remonte, au-dessus de l'anse */
@media (max-width: 1279px) { .hero__visuel > .repere.hero__trophee-repere { top: 1%; right: 0; } }

.repere {
    position: absolute;
    top: var(--ay);
    z-index: 6;
    display: flex;
    align-items: center;
    width: var(--lw);
    margin: 0;
    translate: 0 -50%;
    pointer-events: none;
    transition: filter .3s ease;
}
.hero__valide { transition: filter .3s ease; }
.hero__visuel:has(.hero__vedette .tc-card.is-flipped) :is(.repere, .hero__valide) { filter: opacity(0); }
.repere--gauche { right: calc(100% - var(--ax)); }
.repere--droite { left: var(--ax); }
.repere__boite {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    border: 1px solid var(--etiquette-filet);
    border-radius: 6px;
    background: var(--etiquette-fond);
    box-shadow: 0 12px 26px -12px rgb(0 0 0 / .8);
    font: 500 .75rem/1.2 var(--police-tech);
    color: var(--blanc-casse);
    white-space: nowrap;
}
.repere__trait {
    position: relative;
    flex: 1;
    min-width: 14px;
    height: 1px;
    background: #fff;
    box-shadow: 0 0 0 1px rgb(12 14 16 / .5), 0 0 8px rgb(12 14 16 / .6);
    transform-origin: right center;
}
.repere--droite .repere__trait { transform-origin: left center; }
.repere__trait::after {
    content: '';
    position: absolute;
    top: -4px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--vert);
    box-shadow: 0 0 0 3px rgb(165 204 0 / .25), 0 0 12px rgb(165 204 0 / .8);
}
.repere--gauche .repere__trait::after { right: -4px; }
.repere--droite .repere__trait::after { left: -4px; }
.repere--violet .repere__trait::after { background: var(--violet); box-shadow: 0 0 0 3px rgb(167 139 250 / .28), 0 0 12px rgb(167 139 250 / .9); }
.repere--valide .repere__boite { align-items: flex-start; max-width: 15rem; padding: 10px 12px; white-space: normal; }
.repere--valide .repere__boite > i { flex: none; margin-top: 1px; color: var(--vert); font-size: 1.05rem; }
/* Repère et encart mobile en violet : ils parlent du LINK™ (19/10) */
.repere--violet.repere--valide .repere__boite > i,
.hero__valide.hero__valide--violet i { color: var(--violet); }
.repere__lignes b { display: block; font: 600 .78rem/1.25 var(--police-tech); color: var(--blanc-casse); }
.repere__lignes small { display: block; margin-top: 4px; font: 400 .72rem/1.4 var(--police); color: var(--gris-clair); }
.hero__valide { display: none; }

.defiler {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    font: 500 .75rem/1 var(--police-tech);
    color: var(--gris);
    text-decoration: none;
}
.smory-zone .defiler { color: var(--gris); }
.defiler__trait { position: relative; width: 1px; height: 48px; overflow: hidden; background: rgb(255 255 255 / .12); }
.defiler__trait::after {
    content: '';
    position: absolute;
    left: 0;
    top: -50%;
    width: 100%;
    height: 50%;
    background: linear-gradient(transparent, var(--vert));
    animation: defiler 1.8s ease-in-out infinite;
}
@keyframes defiler { to { top: 100%; } }

/* ==========================================================================
   Composant - Téléphone
   ========================================================================== */
.tel {
    position: relative;
    width: 100%;
    aspect-ratio: 9 / 19.2;
    padding: 3.2%;
    border-radius: 15.5% / 7.3%;
    background: linear-gradient(145deg, #6B727A 0%, #2A2E33 16%, #464C53 46%, #1A1D20 70%, #5B6168 100%);
    box-shadow:
        inset 0 0 0 1.5px rgb(255 255 255 / .28),
        inset 0 0 0 4px #0B0D0F,
        0 0 0 1px rgb(0 0 0 / .7),
        0 50px 80px -30px rgb(0 0 0 / .9);
    container-type: inline-size;
}
.tel__bouton { position: absolute; width: 1.8%; border-radius: 3px; background: linear-gradient(90deg, #24282C, #5A6067 50%, #24282C); }
.tel__bouton--action { left: -1.4%; top: 16%; height: 4.4%; }
.tel__bouton--haut   { left: -1.4%; top: 23.5%; height: 8%; }
.tel__bouton--bas    { left: -1.4%; top: 33.5%; height: 8%; }
.tel__bouton--alim   { right: -1.4%; top: 26%; height: 12.5%; }
.tel__ecran {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: 12.6% / 6%;
    background: #000;
    isolation: isolate;
}
.tel__ilot {
    position: absolute;
    top: 2.2%;
    left: 50%;
    z-index: 20;
    width: 31%;
    height: 3.5%;
    translate: -50% 0;
    border-radius: 99px;
    background: #000;
}
.tel__ilot::after {
    content: '';
    position: absolute;
    right: 9%;
    top: 50%;
    width: 13%;
    aspect-ratio: 1;
    translate: 0 -50%;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, #3A3F55, #0B0E18 60%);
}
.tel__reflet {
    position: absolute;
    inset: 0;
    z-index: 21;
    background: linear-gradient(118deg, rgb(255 255 255 / .16) 0%, rgb(255 255 255 / .04) 26%, transparent 38%);
    mix-blend-mode: screen;
    pointer-events: none;
}
.tel__flash {
    position: absolute;
    inset: 0;
    z-index: 19;
    background: radial-gradient(circle at 50% 45%, rgb(255 255 255 / .95), rgb(167 139 250 / .5) 40%, transparent 72%);
    opacity: 0;
    pointer-events: none;
}
.verrou {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 24cqw;
    background:
        radial-gradient(90% 55% at 50% 28%, rgb(124 58 237 / .5), transparent 70%),
        radial-gradient(70% 40% at 50% 100%, rgb(165 204 0 / .14), transparent 70%),
        linear-gradient(#17112A, #06050B);
    color: #fff;
}
.verrou__heure { margin: 0; font: 600 20cqw/1 var(--police); letter-spacing: -.04em; }
.verrou__date { margin: 2cqw 0 0; font: 500 4.4cqw/1.2 var(--police); color: rgb(255 255 255 / .8); }
.verrou__nfc {
    display: grid;
    place-items: center;
    width: 20cqw;
    aspect-ratio: 1;
    margin-top: auto;
    border-radius: 50%;
    background: rgb(167 139 250 / .2);
    box-shadow: 0 0 0 4cqw rgb(167 139 250 / .08), 0 0 0 8cqw rgb(167 139 250 / .04);
    font-size: 9cqw;
    color: #C4B5FD;
}
.verrou__texte { margin: 6cqw 0 26cqw; font: 600 4.6cqw/1.2 var(--police); color: rgb(255 255 255 / .9); }
.pub {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 15cqw 5cqw 6cqw;
    overflow: hidden;
    background: #0C0E10;
    color: #EAEEF0;
}
.pub .pub__fond { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; max-width: none; object-fit: cover; opacity: .14; }
.pub__statut { position: absolute; top: 4.4cqw; left: 10cqw; right: 9cqw; display: flex; justify-content: space-between; align-items: center; font: 600 4.2cqw/1 var(--police); }
.pub__icones { display: flex; gap: 1.4cqw; font-size: 4.4cqw; }
.pub__tete { display: flex; align-items: center; gap: 2.2cqw; margin-top: 2cqw; }
.pub .pub__smory { width: auto; height: 6.4cqw; }
.pub__x { font-size: 3.6cqw; color: rgb(255 255 255 / .55); }
.pub__club { display: grid; place-items: center; width: 9.4cqw; height: 9.4cqw; border-radius: 2.2cqw; background: #fff; }
.pub__club img { width: 74%; height: auto; }
.pub__nom { font: 600 4.2cqw/1.2 var(--police); white-space: nowrap; }
.pub__scene { position: relative; width: 72cqw; margin-top: 11cqw; aspect-ratio: 820 / 1220; perspective: 700px; }
.pub__carte { display: block; width: 100%; height: auto; filter: drop-shadow(0 4cqw 6cqw rgb(0 0 0 / .55)); }
.pub__brille {
    position: absolute;
    inset: 0;
    border-radius: 4.7% / 3.2%;
    background: linear-gradient(110deg, transparent 32%, rgb(255 255 255 / .55) 46%, rgb(196 181 253 / .3) 52%, transparent 62%);
    background-size: 260% 100%;
    background-position: 120% 0;
    mix-blend-mode: overlay;
    opacity: 0;
    pointer-events: none;
}
.pub__sachet { position: absolute; left: 50%; top: 50%; z-index: 3; width: 100%; aspect-ratio: 600 / 968; transform-style: preserve-3d; }
.pub__sachet img { display: block; width: 100%; height: 100%; filter: drop-shadow(0 -2cqw 5cqw rgb(0 0 0 / .45)); }
.pub__coupe, .stage__coupe {
    position: absolute;
    left: -3%;
    right: -3%;
    top: 15%;
    height: 12%;
    transform: rotate(-4deg);
    pointer-events: none;
}
.pub__coupe-ligne, .stage__coupe-ligne {
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    border-top: 2px dashed rgb(255 255 255 / .95);
    filter: drop-shadow(0 1px 3px rgb(0 0 0 / .6));
    clip-path: inset(-3px 100% -3px 0);
}
.pub__coupe-ligne { border-top-width: .8cqw; }
.pub__ciseaux, .stage__ciseaux {
    position: absolute;
    top: 50%;
    left: 0;
    translate: -50% -54%;
    color: #fff;
    text-shadow: 0 1px 4px rgb(0 0 0 / .6);
    opacity: 0;
    line-height: 1;
}
.pub__ciseaux { font-size: 7.5cqw; }
.pub__aime {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2cqw;
    width: 88cqw;
    height: 10.5cqw;
    margin-top: 6cqw;
    border: 1px solid rgb(255 255 255 / .2);
    border-radius: 99px;
    background: rgb(20 23 26 / .62);
    font: 600 4.2cqw/1 var(--police);
}
.pub__aime i { font-size: 5cqw; color: #F26B7E; }
.pub__partage { margin: 4.6cqw 0 0; font: 600 3.8cqw/1.2 var(--police); color: var(--gris-clair); }
.pub__reseaux { display: flex; gap: 2.2cqw; margin-top: 2.6cqw; }
.pub__reseaux i { display: grid; place-items: center; width: 8.8cqw; height: 8.8cqw; border-radius: 50%; font-size: 4.4cqw; color: #fff; }
/* Pastilles neutres (décision de Julien, 16/10) : logo blanc sur gris foncé pour tous les
   réseaux, comme dans l'appli. Plus de bleu Facebook ni de dégradé Instagram. */
.pub__r1, .pub__r2, .pub__r3, .pub__r4, .pub__r5, .pub__r6 { background: #262B30; box-shadow: inset 0 0 0 1px rgb(255 255 255 / .14); }
.pub .pub__logo { width: auto; height: 6.4cqw; margin-top: auto; opacity: .92; }

/* ==========================================================================
   Zone - Concept
   ========================================================================== */
.concept__epingle { display: flex; align-items: center; height: 100svh; padding: 86px 0 24px; }
.concept__grille { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); align-items: center; gap: 60px; width: 100%; }
.concept__texte { display: flex; flex-direction: column; align-items: flex-start; gap: 30px; min-width: 0; }
.concept__compteur { display: flex; align-items: baseline; gap: 10px; margin: 0; font-family: var(--police-tech); }
.concept__compteur [data-concept-num] { font-size: 4.5rem; font-weight: 600; line-height: 1; letter-spacing: -.04em; color: var(--blanc-casse); }
.concept__total { font-size: 1rem; color: var(--gris); }
.concept__etapes { display: grid; width: 100%; }
.concept__etape {
    grid-area: 1 / 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;
    opacity: 0;
    pointer-events: none;
    transform: translateY(24px);
    transition: opacity .4s ease, transform .5s var(--ease-sortie);
}
/* Les étapes inactives restent lisibles par les lecteurs d'écran (opacité, pas visibility) */
.concept__etape.is-actif {
    opacity: 1;
    pointer-events: auto;
    transform: none;
    transition: opacity .45s ease .12s, transform .6s var(--ease-sortie) .12s;
}
.concept__etape h3 { display: flex; align-items: center; gap: 12px; }
.concept__etape p { max-width: 440px; font-size: 1.125rem; line-height: 1.55; color: var(--gris-clair); }
.concept__progression { display: flex; flex-direction: column; gap: 12px; width: 100%; max-width: 440px; }
.concept__barre { position: relative; display: block; height: 4px; overflow: hidden; border-radius: 4px; background: rgb(255 255 255 / .08); }
.concept__barre-rempli { position: absolute; inset: 0; transform: scaleX(0); transform-origin: 0 50%; background: linear-gradient(90deg, var(--orange), var(--vert) 50%, var(--violet)); }
.concept__noms { display: flex; justify-content: space-between; font: 500 .75rem/1.2 var(--police-tech); color: var(--gris); }
.concept__noms li { transition: color .3s ease; }
.concept__noms li.is-actif { color: var(--blanc-casse); }
/* Les noms d'étapes sont des boutons (19/10) : un clic mène à l'étape */
.concept__noms button { margin: -6px -4px; padding: 6px 4px; border: 0; border-radius: 4px; background: none; color: inherit; font: inherit; cursor: pointer; transition: color .3s ease; }
.concept__noms button:hover { color: var(--blanc-casse); }

/* Compteur et flèches sur une ligne (19/10 : les étapes passent aux flèches, plus de défilement épinglé) */
.concept__tete { display: flex; align-items: flex-end; justify-content: space-between; gap: 15px; width: 100%; max-width: 440px; }
.concept__nav { display: flex; gap: 10px; }
.concept__fleche {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    padding: 0;
    border: 1px solid var(--blanc-alpha-niveau-2);
    border-radius: 50%;
    background: rgb(255 255 255 / .04);
    color: var(--blanc-casse);
    font-size: 1.25rem;
    cursor: pointer;
    transition: border-color .25s ease, background-color .25s ease, color .25s ease, box-shadow .25s ease, opacity .25s ease;
}
.concept__fleche:hover:not(:disabled) { border-color: rgb(255 255 255 / .35); background: rgb(255 255 255 / .08); }
.concept__fleche:disabled { opacity: .35; cursor: default; }
.concept__fleche:focus-visible,
.concept__noms button:focus-visible { outline: 2px solid var(--vert); outline-offset: 3px; }
/* L'étape est jouée : la flèche suivante s'allume, en vert, pour inviter à continuer */
.concept__fleche.is-pret { border-color: rgb(165 204 0 / .6); color: var(--vert); box-shadow: 0 0 0 4px rgb(165 204 0 / .12); }
.concept__stage { display: flex; justify-content: center; min-width: 0; }
.stage {
    position: relative;
    width: min(100%, calc(100svh - 130px), 780px);
    aspect-ratio: 1;
    overflow: hidden;
    border: 1px solid var(--verre-filet);
    border-radius: var(--rayon);
    background: radial-gradient(60% 60% at 50% 55%, rgb(255 255 255 / .05), transparent 70%), #101316;
}
.stage__grille {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgb(255 255 255 / .045) 1px, transparent 1px),
        linear-gradient(90deg, rgb(255 255 255 / .045) 1px, transparent 1px);
    background-size: 8.333% 8.333%;
    -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 30%, transparent 78%);
            mask-image: radial-gradient(circle at 50% 50%, #000 30%, transparent 78%);
}
.stage__coin { position: absolute; z-index: 7; width: 18px; height: 18px; border-color: rgb(255 255 255 / .38); border-style: solid; border-width: 0; }
.stage__coin--hg { left: 15px; top: 15px; border-top-width: 1px; border-left-width: 1px; }
.stage__coin--hd { right: 15px; top: 15px; border-top-width: 1px; border-right-width: 1px; }
.stage__coin--bg { left: 15px; bottom: 15px; border-bottom-width: 1px; border-left-width: 1px; }
.stage__coin--bd { right: 15px; bottom: 15px; border-bottom-width: 1px; border-right-width: 1px; }
.stage__balayage {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 28%;
    background: linear-gradient(to bottom, transparent, rgb(165 204 0 / .06) 82%, rgb(165 204 0 / .32) 100%);
    animation: balayage 4.8s linear infinite;
    pointer-events: none;
}
@keyframes balayage { from { transform: translateY(-100%); } to { transform: translateY(360%); } }
.stage__halo {
    position: absolute;
    left: 50%;
    top: 52%;
    width: 80%;
    aspect-ratio: 1;
    translate: -50% -50%;
    border-radius: 50%;
    background: radial-gradient(closest-side, var(--halo-stage, rgb(255 255 255 / .16)), transparent 72%);
    mix-blend-mode: screen;
    transition: background .6s ease;
    pointer-events: none;
}
.stage.is-1 { --halo-stage: rgb(255 255 255 / .14); }
.stage.is-2 { --halo-stage: rgb(165 204 0 / .28); }
.stage.is-3 { --halo-stage: rgb(139 92 246 / .42); }
.stage__repere { position: absolute; z-index: 7; margin: 0; font: 500 .6875rem/1.2 var(--police-tech); color: var(--gris); }
.stage__repere b { font-weight: 600; color: var(--blanc-casse); }
.stage__repere--hg { left: 42px; top: 18px; }
.stage__repere--bd { right: 42px; bottom: 18px; }
.stage__cartes { position: absolute; inset: 0; z-index: 3; }
.stage__carte { position: absolute; left: 50%; top: 52%; width: 31%; filter: drop-shadow(0 24px 34px rgb(0 0 0 / .6)); }
.stage__carte .tc-card { cursor: default; }
.stage__carte--centre { z-index: 3; }
.stage__carte[data-angle="-11"], .stage__carte[data-angle="11"] { z-index: 2; }
.stage__carte[data-angle="-22"], .stage__carte[data-angle="22"] { z-index: 1; }
.stage__sachet { position: absolute; left: 50%; top: 52%; z-index: 4; width: 41%; aspect-ratio: 600 / 968; }
.stage__sachet img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; filter: drop-shadow(0 30px 40px rgb(0 0 0 / .6)); }
.stage__sachet-haut { clip-path: polygon(0 0, 100% 0, 100% 13.5%, 0 17%); }
.stage__sachet-bas  { clip-path: polygon(0 17%, 100% 13.5%, 100% 100%, 0 100%); }
.stage__ciseaux { font-size: 2.1rem; }
.stage__eclat {
    position: absolute;
    left: -14%;
    right: -14%;
    top: 7%;
    height: 18%;
    background: radial-gradient(closest-side, rgb(255 255 255 / .95), rgb(190 230 40 / .55) 45%, transparent 75%);
    mix-blend-mode: screen;
    opacity: 0;
    pointer-events: none;
}
.stage__tampon {
    position: absolute;
    left: 56%;
    top: 70%;
    z-index: 6;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    padding: 9px 15px;
    border-radius: 8px;
    background: var(--vert);
    font: 800 1.125rem/1 var(--police);
    color: var(--noir);
    box-shadow: 0 14px 30px -8px rgb(165 204 0 / .75);
}
.stage__objet { position: absolute; left: 70%; top: 66%; z-index: 2; display: grid; place-items: center; width: 22%; aspect-ratio: 1; }
.stage__objet .balle { width: 100%; }
.stage__onde, .nfc__onde {
    position: absolute;
    inset: 0;
    border: 1.5px solid rgb(196 181 253 / .85);
    border-radius: 50%;
    opacity: 0;
    pointer-events: none;
}
.stage.is-3 .stage__onde,
.nfc.is-lecture .nfc__onde { animation: onde 1.9s var(--ease-sortie) infinite; }
/* Les ondes de la lecture prennent la forme de la plaque */
.nfc__onde { inset: 21.4% 0; border-radius: 7.4% / 13%; }
.stage.is-3 .stage__onde:nth-child(2),
.nfc.is-lecture .nfc__onde:nth-child(2) { animation-delay: .6s; }
.stage.is-3 .stage__onde:nth-child(3),
.nfc.is-lecture .nfc__onde:nth-child(3) { animation-delay: 1.2s; }
@keyframes onde {
    0%   { transform: scale(.9); opacity: .95; }
    100% { transform: scale(2.7); opacity: 0; }
}
.stage__tel { position: absolute; left: 37%; top: 50%; z-index: 5; width: 36%; }
.stage__etiquette { position: absolute; z-index: 6; display: flex; align-items: center; gap: 8px; margin: 0; white-space: nowrap; }
.stage__etiquette::before { content: ''; flex: none; width: 8px; height: 8px; border-radius: 50%; }
.stage__etiquette[data-e="1"]::before { background: var(--orange); }
.stage__etiquette[data-e="2"]::before { background: var(--vert); }
.stage__etiquette[data-e="3"]::before { background: var(--violet); }
.stage__etiquette span {
    padding: 7px 11px;
    border: 1px solid var(--etiquette-filet);
    border-radius: 6px;
    background: var(--etiquette-fond);
    font: 500 .8125rem/1.2 var(--police-tech);
    color: var(--blanc-casse);
}
.stage__etiquette--e1a { left: 5%; top: 16%; }
.stage__etiquette--e1b { right: 4%; top: 31%; }
.stage__etiquette--e1c { left: 6%; top: 69%; }
.stage__etiquette--e1d { right: 5%; top: 80%; }
.stage__etiquette--e2a { left: 5%; top: 9%; }
.stage__etiquette--e2b { right: 5%; top: 13%; }
.stage__etiquette--e2c { left: 6%; bottom: 8%; }
.stage__etiquette--e3a { right: 5%; top: 45%; }
.stage__etiquette--e3b { left: 5%; top: 8%; }
.lumieres--stage { z-index: 8; }
.lumieres__halo--stage {
    left: 50%;
    top: 52%;
    width: 70%;
    aspect-ratio: 1;
    translate: -50% -50%;
    background: radial-gradient(closest-side, var(--halo-stage, rgb(255 255 255 / .16)), transparent 70%);
    opacity: .55;
    transition: background .6s ease;
}
.js-anim .stage__sachet,
.js-anim .stage__carte,
.js-anim .stage__tampon,
.js-anim .stage__objet,
.js-anim .stage__tel,
.js-anim .stage__etiquette { opacity: 0; }

/* ==========================================================================
   Zone - Cartes
   ========================================================================== */
.perso { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr) minmax(0, 1fr); align-items: center; gap: 60px; }
.perso__traits { position: absolute; inset: 0; z-index: 4; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.perso__trait { fill: none; stroke: rgb(255 255 255 / .8); stroke-width: 1.2; stroke-dasharray: 4 5; filter: drop-shadow(0 0 3px rgb(0 0 0 / .8)); }
.perso__cible { fill: var(--vert); stroke: rgb(165 204 0 / .35); stroke-width: 7; filter: drop-shadow(0 0 8px rgb(165 204 0 / .9)); }
.perso__liste { position: relative; z-index: 3; display: flex; flex-direction: column; gap: 15px; }
.perso .perso-choix {
    position: relative;
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    align-items: center;
    gap: 15px;
    width: 100%;
    margin: 0;
    padding: 15px 18px;
    overflow: hidden;
    border: 1px solid var(--blanc-alpha-niveau-2);
    border-radius: 12px;
    background: rgb(20 23 26 / .6);
    color: inherit;
    font: inherit;
    text-align: left;
    white-space: normal;
    cursor: pointer;
    transition: border-color .3s ease, background-color .3s ease, transform .3s var(--ease-sortie);
}
.perso .perso-choix:hover { background: rgb(28 32 36 / .8); color: inherit; }
.perso .perso-choix.is-actif { border-color: rgb(255 255 255 / .42); background: rgb(30 34 38 / .92); }
.perso__liste--g .perso-choix.is-actif { transform: translateX(8px); }
.perso__liste--d .perso-choix.is-actif { transform: translateX(-8px); }
.perso-choix__icone { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 10px; background: var(--noir-niveau-2); color: var(--gris-clair); font-size: 1.25rem; transition: background-color .3s ease, color .3s ease; }
.perso-choix.is-actif .perso-choix__icone { background: var(--vert); color: var(--noir); }
.perso-choix__texte strong { display: block; font: 700 1rem/1.25 var(--police); color: var(--blanc-casse); }
.perso-choix__texte small { display: block; margin-top: 3px; font: 400 .8125rem/1.45 var(--police); color: var(--gris); }
.perso-choix__barre { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; }
.perso-choix__barre span { display: block; width: 100%; height: 100%; transform: scaleX(0); transform-origin: 0 50%; background: linear-gradient(90deg, var(--vert), var(--violet)); }
.perso__centre { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 30px; }
.perso-scene { position: relative; width: min(100%, 360px); margin-top: 70px; margin-bottom: 20px; }
.perso-tilt { position: relative; }
.perso-carte { position: relative; }
.perso-carte.is-cache { opacity: 0; pointer-events: none; }
.perso-carte .card-visual { filter: drop-shadow(0 30px 40px rgb(0 0 0 / .6)); }
.perso-slab {
    position: absolute;
    left: calc(-5.8% - 2.25px);
    top: 0;
    z-index: 2;
    width: calc(111.6% + 4.5px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}
.perso-slab.is-visible { visibility: visible; pointer-events: auto; }
.perso-slab .carte-app.card-visual--slab { width: 100%; max-width: none; margin: 0; }
.perso-slab .as-slab__case > .tc-card { width: 100%; max-width: none; }
.perso-sachet { position: absolute; left: 50%; top: 50%; z-index: 5; width: 110%; aspect-ratio: 600 / 968; opacity: 0; pointer-events: none; }
.perso-sachet img { display: block; width: 100%; height: 100%; max-width: none; filter: drop-shadow(0 20px 30px rgb(0 0 0 / .55)); }
.perso-sachet .stage__ciseaux { font-size: 1.9rem; }
.perso__reglage { display: flex; flex-direction: column; align-items: center; gap: 12px; min-height: 92px; text-align: center; }
.reglage__titre { margin: 0; font: 500 .75rem/1.2 var(--police-tech); color: var(--gris); }
.reglage__choix { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.perso .reglage__bouton {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 6px 12px 6px 6px;
    border: 1px solid var(--blanc-alpha-niveau-1);
    border-radius: 999px;
    background: rgb(20 23 26 / .6);
    color: var(--gris-clair);
    font: 600 .8125rem/1.2 var(--police);
    cursor: pointer;
    transition: border-color .25s ease, background-color .25s ease, color .25s ease;
}
.perso .reglage__bouton:hover { background: rgb(255 255 255 / .06); color: var(--gris-clair); }
.perso .reglage__bouton.is-actif { border-color: rgb(255 255 255 / .5); background: rgb(255 255 255 / .1); color: var(--blanc-casse); }
.reglage__pastille { width: 22px; height: 22px; border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .35); }
.reglage__logo { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 6px; background: #fff; }
.reglage__logo img { width: 78%; height: 78%; object-fit: contain; }
.reglage__vignette { width: 20px; height: 28px; border-radius: 4px; background: #fff center / cover no-repeat; box-shadow: 0 0 0 1px rgb(255 255 255 / .25); }
.perso .reglage__bouton--texte { padding-left: 12px; }
.reglage__effet { width: 22px; height: 22px; border-radius: 6px; box-shadow: inset 0 0 0 1px rgb(255 255 255 / .35); }
.reglage__effet--cosmos  { background: conic-gradient(from 200deg, #C4B5FD, #F0ABFC, #FDE68A, #A7F3D0, #C4B5FD); }
.reglage__effet--radiant { background: linear-gradient(135deg, #FFF7D6, #F5D27A 35%, #FFFFFF 50%, #E8B44F 70%, #FFF1C2); }
.reglage__effet--reverse { background: repeating-linear-gradient(120deg, #E5E7EB 0 5px, #F9A8D4 5px 8px, #E5E7EB 8px 13px, #A7F3D0 13px 16px); }
.reglage__effet--galaxy  { background: radial-gradient(circle at 30% 30%, #fff 0 1px, transparent 2px), radial-gradient(circle at 70% 60%, #fff 0 1px, transparent 2px), linear-gradient(135deg, #3B0764, #7C3AED 55%, #DB2777); }
.reglage__aide { margin: 0; max-width: 320px; font: 500 .8125rem/1.45 var(--police-tech); color: var(--gris-clair); }

/* ==========================================================================
   Zone - Bandeau Sports
   ========================================================================== */
.gabarits { display: flex; flex-direction: column; align-items: flex-end; gap: 12px; }
.gabarits__titre { margin: 0; font: 500 .75rem/1.2 var(--police-tech); color: var(--gris); }
.gabarits__liste { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; }
.gabarit {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 14px;
    border: 1px solid var(--blanc-alpha-niveau-1);
    border-radius: 999px;
    background: rgb(20 23 26 / .6);
    font: 600 .875rem/1.2 var(--police);
    color: var(--blanc-casse);
}
.gabarit i { color: var(--vert); font-size: 1rem; }
.gabarit small { font: 500 .75rem/1.2 var(--police-tech); color: var(--gris); }
.gabarit--bientot { border-style: dashed; border-color: rgb(255 255 255 / .28); }
.gabarit__point { width: 8px; height: 8px; border-radius: 50%; background: var(--violet); box-shadow: 0 0 0 0 rgb(167 139 250 / .6); animation: pulsation 1.8s ease-out infinite; }
@keyframes pulsation { to { box-shadow: 0 0 0 10px rgb(167 139 250 / 0); } }
.defilant { overflow: hidden; }
.defilant__piste { display: flex; width: max-content; will-change: transform; }
.defilant__groupe { display: flex; flex: none; align-items: center; gap: 30px; padding-right: 30px; }
.defilant--cartes { padding: 30px 0 45px; }
.defilant--cartes img { flex: none; width: 210px; height: auto; max-width: none; filter: drop-shadow(0 18px 26px rgb(0 0 0 / .5)); }
.defilant--cartes img:nth-child(odd)  { rotate: -3deg; }
.defilant--cartes img:nth-child(even) { rotate: 3deg; translate: 0 18px; }
.defilant--texte .defilant__groupe { gap: 0; padding-right: 0; }
.defilant--texte span {
    padding: 0 .3em;
    font: 800 6rem/1.1 var(--police);
    letter-spacing: -.03em;
    white-space: nowrap;
    color: transparent;
    -webkit-text-stroke: 1px rgb(255 255 255 / .3);
}
.defilant--texte span:nth-child(3n+1) { color: var(--vert); -webkit-text-stroke: 0; }

/* ==========================================================================
   Zone - LINK
   ========================================================================== */
.nfc { position: relative; width: 100%; }
.nfc__scene { position: relative; aspect-ratio: 1 / .92; overflow: hidden; background: #120D1C; isolation: isolate; }
.nfc__scene .nfc__fond { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; opacity: .62; border-radius: inherit; }
.nfc__objet { position: absolute; left: 74%; top: 21%; z-index: 2; width: 30%; aspect-ratio: 1; translate: -50% -50%; }
/* La plaque LINK™ seule, sans médaillon rond (19/10, Julien : « trop petit, retire le cercle ») */
.nfc__medaillon { position: absolute; inset: 0; display: grid; place-items: center; }
.nfc__medaillon .balle { --halo: rgb(167 139 250 / .65); width: 100%; }
.nfc__tel { position: absolute; left: 9%; top: 50%; z-index: 3; width: 33%; translate: 0 -50%; }
.nfc__grande { position: absolute; left: 70%; top: 58%; z-index: 6; width: 40%; perspective: 1200px; }
.nfc__grande-carte { position: relative; }
.nfc__grande-carte .card-visual { filter: drop-shadow(0 34px 50px rgb(46 16 101 / .85)); }
.nfc__badge {
    position: absolute;
    left: 50%;
    bottom: -22px;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 14px 7px 12px;
    translate: -50% 0;
    border-radius: 999px;
    background-color: var(--violet-fonce);
    background-image: linear-gradient(205deg, var(--violet) 0%, var(--violet-profond) 100%);
    box-shadow: 0 10px 24px -8px rgb(0 0 0 / .7);
    font: 700 .8125rem/1.2 var(--police);
    color: #fff;
    white-space: nowrap;
}
.nfc__badge-ok { color: var(--vert); }
.nfc__etat {
    position: absolute;
    left: 30px;
    bottom: 30px;
    z-index: 7;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 9px 13px;
    border: 1px solid var(--etiquette-filet);
    border-radius: 8px;
    background: var(--etiquette-fond);
    font: 500 .8125rem/1.2 var(--police-tech);
    color: var(--blanc-casse);
}
.nfc__voyant { width: 8px; height: 8px; border-radius: 50%; background: var(--gris-fonce); transition: background-color .3s ease, box-shadow .3s ease; }
.nfc.is-lecture .nfc__voyant { background: var(--violet); box-shadow: 0 0 0 4px rgb(167 139 250 / .25); }
.nfc.is-ouverte .nfc__voyant { background: var(--vert); box-shadow: 0 0 0 4px rgb(165 204 0 / .25); }
.lumieres--nfc { z-index: 8; }
.lumieres__halo--nfc {
    left: 52%;
    top: 46%;
    width: 90%;
    aspect-ratio: 1;
    translate: -50% -50%;
    background: radial-gradient(closest-side, rgb(167 139 250 / .38), rgb(124 58 237 / .12) 55%, transparent 76%);
    animation: respiration 6s ease-in-out infinite;
}
@keyframes respiration { 50% { scale: 1.12; opacity: .7; } }

.supports__arc { width: 100%; }
.arc {
    position: relative;
    height: 420px;
    margin-top: 15px;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 14%, #000 86%, transparent 100%);
            mask-image: linear-gradient(90deg, transparent 0%, #000 14%, #000 86%, transparent 100%);
    touch-action: pan-y;
    cursor: grab;
    user-select: none;
}
.arc.is-glisse { cursor: grabbing; }
.arc__guide {
    position: absolute;
    left: 50%;
    top: var(--arc-cy, 600px);
    width: calc(var(--arc-r, 500px) * 2);
    aspect-ratio: 1;
    translate: -50% -50%;
    border: 1px dashed rgb(255 255 255 / .14);
    border-radius: 50%;
    pointer-events: none;
}
.arc__piste { position: absolute; inset: 0; margin: 0; padding: 0; list-style: none; }
.arc__item {
    position: absolute;
    left: 50%;
    top: 0;
    z-index: var(--arc-z, 1);
    width: 200px;
    aspect-ratio: 1;
    margin-left: -100px;
    opacity: var(--arc-op);
    transform: translate(var(--arc-x), var(--arc-y)) rotate(var(--arc-rot)) scale(var(--arc-sc));
    will-change: transform;
}
.arc__objet {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: 50%;
    background: radial-gradient(circle at 50% 40%, rgb(124 58 237 / .55), #160F24 72%);
    box-shadow: 0 0 0 1px rgb(255 255 255 / .16), 0 30px 60px -20px rgb(0 0 0 / .8);
    transition: box-shadow .4s ease;
}
.arc__objet .balle { width: 58%; }
.arc__objet--photo img { width: 100%; height: 100%; max-width: none; object-fit: cover; pointer-events: none; }
.arc__item.is-centre .arc__objet {
    box-shadow: 0 0 0 2px rgb(255 255 255 / .55), 0 0 0 10px rgb(167 139 250 / .12), 0 0 70px -6px rgb(167 139 250 / .85), 0 30px 60px -20px rgb(0 0 0 / .8);
}
.arc .arc__fleche {
    position: absolute;
    top: 42%;
    z-index: 200;
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    margin: 0;
    padding: 0;
    translate: 0 -50%;
    border: 1px solid rgb(255 255 255 / .2);
    border-radius: 50%;
    background: rgb(20 23 26 / .7);
    color: var(--blanc-casse);
    font-size: 1.3rem;
    cursor: pointer;
    transition: background-color .2s ease, border-color .2s ease;
}
.arc .arc__fleche:hover { background: var(--violet-alpha); border-color: rgb(255 255 255 / .4); color: var(--blanc-casse); }
.arc__fleche--g { left: 12%; }
.arc__fleche--d { right: 12%; }
.arc__fiche { display: flex; flex-direction: column; align-items: center; gap: 12px; max-width: 560px; margin: -30px auto 0; text-align: center; }
.arc__nom { margin: 0; font: 800 2rem/1.1 var(--police); letter-spacing: -.02em; color: var(--blanc-casse); }
.arc__texte { margin: 0; color: var(--gris-clair); }
.arc__specs { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0; padding: 0; list-style: none; }
.arc__specs li {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border: 1px solid var(--blanc-alpha-niveau-1);
    border-radius: 6px;
    background: rgb(12 14 16 / .35);
    font: 500 .75rem/1.2 var(--police-tech);
    color: var(--gris-clair);
}
.arc__couleur { width: 12px; height: 12px; border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .4); }

.frise__etapes { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 30px; }
.frise__ligne { position: absolute; left: 12.5%; right: 12.5%; top: 31px; height: 2px; background: rgb(255 255 255 / .1); }
.frise__ligne-rempli {
    position: absolute;
    inset: 0;
    transform: scaleX(0);
    transform-origin: 0 50%;
    background: linear-gradient(90deg, var(--violet), #E4DAFF 50%, var(--violet));
    box-shadow: 0 0 14px rgb(167 139 250 / .9);
}
.frise__etape { position: relative; display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.frise__etape h3 { margin: 4px 0 0; }
.frise__puce {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 64px;
    height: 64px;
    border: 1px solid rgb(255 255 255 / .16);
    border-radius: 50%;
    background: #160F24;
    color: var(--gris);
    font-size: 1.5rem;
    transition: background .5s ease, color .5s ease, box-shadow .5s ease, border-color .5s ease;
}
.frise__etape.is-actif .frise__puce {
    border-color: rgb(255 255 255 / .55);
    background: radial-gradient(circle at 50% 35%, #A78BFA, #5B21B6);
    color: #fff;
    box-shadow: 0 0 0 8px rgb(167 139 250 / .12), 0 0 34px rgb(167 139 250 / .7);
}
.frise__num { font: 600 .75rem/1 var(--police-tech); color: var(--gris); transition: color .5s ease; }
.frise__etape.is-actif .frise__num { color: #C4B5FD; }
.frise__etape p { max-width: 260px; margin: 0; font-size: .9375rem; color: var(--gris-clair); }
.smory-frise--orange .frise__ligne-rempli { background: linear-gradient(90deg, var(--orange), #FFE1B3 50%, var(--orange)); box-shadow: 0 0 14px rgb(240 167 60 / .8); }
.smory-frise--orange .frise__puce { background: #14171A; }
.smory-frise--orange .frise__etape.is-actif .frise__puce { border-color: rgb(255 255 255 / .55); background: radial-gradient(circle at 50% 35%, #F8C982, #D9822B); color: var(--noir); box-shadow: 0 0 34px rgb(240 167 60 / .6); }
.smory-frise--orange .frise__etape.is-actif .frise__num { color: var(--orange); }

/* ==========================================================================
   Zone - Pour Qui
   ========================================================================== */
.publics { perspective: 1200px; }
.publics > .elementor-widget { display: flex; }
.public {
    display: flex;
    flex-direction: column;
    width: 100%;
    overflow: hidden;
    color: inherit;
    text-decoration: none;
    transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
    transition: transform .6s var(--ease-sortie), border-color .2s ease;
}
.public:hover { transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(-6px); border-color: rgb(255 255 255 / .28); color: inherit; }
.public__photo { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; }
.public__photo > img:first-child { width: 100%; height: 100%; max-width: none; object-fit: cover; transition: scale .4s ease; }
.public:hover .public__photo > img:first-child { scale: 1.04; }
.public__badge { position: absolute; right: 15px; bottom: 15px; width: 56px; height: 56px; filter: drop-shadow(0 8px 14px rgb(0 0 0 / .55)); }
.public__carte { position: absolute; left: 50%; top: 50%; width: 30%; translate: -50% -50%; rotate: -6deg; filter: drop-shadow(0 16px 24px rgb(0 0 0 / .6)); }
.public__index {
    position: absolute;
    left: 15px;
    top: 15px;
    z-index: 2;
    padding: 5px 8px;
    border-radius: 6px;
    background: var(--etiquette-fond);
    font: 600 .75rem/1 var(--police-tech);
    color: var(--blanc-casse);
}
.public__texte { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; flex: 1; padding: 30px; }
.public__resume { color: var(--gris-clair); }
.public__lien { display: inline-flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 15px; font: 600 1rem/1.2 var(--police); color: var(--vert); transition: gap .2s ease; }
.public:hover .public__lien { gap: 12px; }

/* ==========================================================================
   Modèle - Appel À L'Action
   ========================================================================== */
.appel { position: relative; isolation: isolate; }
.appel__fond {
    position: absolute;
    inset: 0;
    overflow: hidden;
    background:
        radial-gradient(70% 90% at 100% 100%, rgb(165 204 0 / .18), transparent 60%),
        radial-gradient(50% 70% at 0% 0%, rgb(124 58 237 / .14), transparent 60%),
        var(--noir-niveau-2);
}
.appel > .e-con, .appel > .elementor-widget:not(.smory-calque) { position: relative; z-index: 2; }
.appel__visuel { position: relative; z-index: 3; width: 100%; min-height: 600px; margin: -150px 0 -70px; }
.appel__sachet { position: absolute; top: 50%; width: 38%; filter: drop-shadow(0 26px 40px rgb(0 0 0 / .65)); }
.appel__sachet--g { left: 2%; }
.appel__sachet--d { right: 2%; }
.appel__carte { position: absolute; left: 50%; top: 47%; z-index: 2; width: 44%; }
.appel__carte .card-visual { filter: drop-shadow(0 36px 56px rgb(0 0 0 / .75)); }
.fond-anime--appel .aurore { width: 70%; }
.fond-anime--appel .aurore--vert { left: auto; right: -20%; top: auto; bottom: -45%; }
.fond-anime--appel .aurore--violet { right: auto; left: -20%; bottom: auto; top: -45%; }
.lumieres--appel { z-index: 4; border-radius: var(--rayon); }
.lumieres--appel .lumieres__halo--vert { opacity: .55; }

/* ==========================================================================
   Modèle - Footer
   ========================================================================== */
.pied { border-top: 1px solid var(--blanc-alpha-niveau-2); background: var(--noir-profond); }
.pied__reseaux .elementor-social-icon { border: 1px solid rgb(255 255 255 / .14); transition: color .2s ease, border-color .2s ease; }
.pied__reseaux .elementor-social-icon:hover { border-color: rgb(165 204 0 / .5); }
.pied__colonne .elementor-icon-list-item a { transition: color .2s ease; }
.pied .elementor-icon-list-items .elementor-icon-list-item a.is-courant .elementor-icon-list-text { color: var(--blanc-casse); }
.pied__geant { position: relative; }
.pied__geant img { width: 100%; height: auto; opacity: .06; }
/* Gris uni : le reflet vert et violet qui le traversait a été retiré (Julien, 07/10) */

/* ==========================================================================
   Modèle - En-tête De Page
   ========================================================================== */
.page-tete { overflow: hidden; }
.page-tete__texte { position: relative; z-index: 2; }
.page-tete__titre { max-width: 900px; }
.page-tete .m-tete > .page-tete__chapo,
.page-tete__chapo p { max-width: 680px; }
.page-tete__chapo p { margin-inline: auto; }
.fond-anime--page .grille-tech--hero {
    -webkit-mask-image: radial-gradient(ellipse 70% 85% at 50% 30%, #000 22%, transparent 80%);
            mask-image: radial-gradient(ellipse 70% 85% at 50% 30%, #000 22%, transparent 80%);
}
.fond-anime--page .aurore--vert { left: -18vw; top: -42vw; }
.fond-anime--page .aurore--violet { right: -20vw; bottom: -46vw; }
.lumieres--page .lumieres__halo--vert { opacity: .6; }
.fond-anime--link .grille-tech--hero {
    -webkit-mask-image: radial-gradient(ellipse 70% 85% at 50% 30%, #000 22%, transparent 80%);
            mask-image: radial-gradient(ellipse 70% 85% at 50% 30%, #000 22%, transparent 80%);
}
.fond-anime--link .aurore--vert { left: -18vw; top: -42vw; background: radial-gradient(closest-side, rgb(167 139 250 / .22), transparent 72%); }
.fond-anime--link .aurore--violet { right: -20vw; bottom: -46vw; background: radial-gradient(closest-side, rgb(124 58 237 / .62), transparent 72%); }
.lumieres--link .lumieres__halo--violet { opacity: .65; }
.lumieres--page .lumieres__halo--violet { opacity: .5; }

.fil {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
    font: 500 .8125rem/1.3 var(--police-tech);
    color: var(--gris);
}
.fil a { color: var(--gris-clair); text-decoration: none; transition: color .2s ease; }
.fil a:hover { color: var(--vert); }
.fil__sep { color: var(--gris-fonce); }
.fil [aria-current] { color: var(--blanc-casse); }

.sommaire { position: relative; width: fit-content; max-width: 100%; margin: 60px auto 0; }
.sommaire__ligne {
    position: absolute;
    left: 5%;
    right: 5%;
    top: 50%;
    height: 1px;
    overflow: hidden;
    background: var(--blanc-alpha-niveau-1);
}
.sommaire__onde {
    position: absolute;
    inset: 0 auto 0 0;
    width: 18%;
    background: linear-gradient(90deg, transparent, var(--vert), transparent);
    animation: sommaire-onde 4.5s cubic-bezier(.45, 0, .2, 1) infinite;
}
@keyframes sommaire-onde {
    from { translate: -100% 0; }
    to   { translate: 560% 0; }
}
.sommaire__liste { position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 280px); justify-content: center; gap: 15px; }
.sommaire__lien {
    display: flex;
    align-items: center;
    gap: 12px;
    height: 100%;
    padding: 12px 15px;
    background: var(--noir-niveau-1);
    color: var(--blanc-casse);
    text-decoration: none;
    transition: border-color .2s ease, translate .35s var(--ease-sortie);
}
.sommaire__lien:hover { translate: 0 -3px; border-color: rgb(255 255 255 / .28); color: var(--blanc-casse); }
.sommaire__num { font: 600 .75rem/1 var(--police-tech); color: var(--gris); transition: color .2s ease; }
.sommaire__lien:hover .sommaire__num { color: var(--vert); }
.sommaire__nom { font: 600 .9375rem/1.2 var(--police); text-align: left; }
.js-anim [data-sommaire-lien] { opacity: 0; }

/* ==========================================================================
   Zone - Parcours
   ========================================================================== */
.parcours__etapes { position: relative; }
.parcours__etapes > .etape {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 96px minmax(0, 1fr);
    grid-template-areas: "texte rail visuel";
    align-items: center;
    gap: 0;
    scroll-margin-top: 90px;
}
.parcours__etapes > .etape--inverse { grid-template-areas: "visuel rail texte"; }
.etape__texte { grid-area: texte; width: 100%; max-width: 520px; min-width: 0; }
.etape:not(.etape--inverse) .etape__texte { justify-self: end; }
.etape--inverse .etape__texte { justify-self: start; }
.etape__kicker { display: flex; align-items: center; gap: 15px; margin: 0; }
.etape__num { display: none; font: 600 2.25rem/1 var(--police-tech); letter-spacing: -.04em; color: var(--blanc-casse); }
.etape__rail { grid-area: rail; display: flex; align-items: center; justify-content: center; align-self: stretch; width: auto; }
.etape__visuel { grid-area: visuel; width: 100%; min-width: 0; }

.lien-fleche { display: inline-flex; align-items: center; gap: 8px; font: 600 1rem/1.2 var(--police); color: var(--vert); text-decoration: none; transition: gap .2s ease; }
.lien-fleche:hover { gap: 12px; color: var(--vert); }
.lien-fleche--violet, .lien-fleche--violet:hover { color: var(--violet); }
/* L'enveloppe Elementor du widget épouse le lien (en bloc, sa ligne ajoutait 6 px sous lui) */
.elementor-widget-smory-lien-fleche { display: flex; }

.rail {
    position: absolute;
    left: 50%;
    top: var(--rail-haut, 0px);
    bottom: var(--rail-bas, 0px);
    width: 2px;
    margin-left: -1px;
    overflow: hidden;
    border-radius: 2px;
    background: rgb(255 255 255 / .08);
}
.rail__rempli {
    position: absolute;
    inset: 0;
    transform: scaleY(0);
    transform-origin: 50% 0;
    background: linear-gradient(var(--orange), var(--vert) 20%, var(--vert));
}
.noeud {
    position: relative;
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    border: 1px solid var(--blanc-alpha-niveau-1);
    border-radius: 50%;
    background: var(--anthracite);
    box-shadow: 0 0 0 10px var(--anthracite);
    font: 600 .875rem/1 var(--police-tech);
    color: var(--gris);
    transition: background-color .35s ease, color .35s ease, border-color .35s ease, box-shadow .35s ease;
}
.noeud.is-atteint {
    border-color: transparent;
    background: var(--vert);
    color: var(--noir);
    box-shadow: 0 0 0 10px var(--anthracite), 0 0 26px -2px rgb(165 204 0 / .65);
}
.noeud--orange.is-atteint { background: var(--orange); box-shadow: 0 0 0 10px var(--anthracite), 0 0 26px -2px rgb(240 167 60 / .65); }

/* ==========================================================================
   Global - Vignettes D'Étape
   ========================================================================== */
.vignette {
    position: relative;
    width: 100%;
    aspect-ratio: 5 / 4;
    overflow: hidden;
    isolation: isolate;
    background: radial-gradient(60% 60% at 50% 55%, rgb(255 255 255 / .05), transparent 70%), #101316;
    container-type: inline-size;
}
.vignette__grille {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgb(255 255 255 / .045) 1px, transparent 1px),
        linear-gradient(90deg, rgb(255 255 255 / .045) 1px, transparent 1px);
    background-size: 6.25cqw 6.25cqw;
    background-position: center;
    -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 30%, transparent 80%);
            mask-image: radial-gradient(circle at 50% 50%, #000 30%, transparent 80%);
    pointer-events: none;
}
.vignette__coin { position: absolute; z-index: 7; width: 16px; height: 16px; border: 0 solid rgb(255 255 255 / .38); pointer-events: none; }
.vignette__coin--hg { left: 14px; top: 14px; border-top-width: 1px; border-left-width: 1px; }
.vignette__coin--hd { right: 14px; top: 14px; border-top-width: 1px; border-right-width: 1px; }
.vignette__coin--bg { left: 14px; bottom: 14px; border-bottom-width: 1px; border-left-width: 1px; }
.vignette__coin--bd { right: 14px; bottom: 14px; border-bottom-width: 1px; border-right-width: 1px; }
.vignette__repere {
    position: absolute;
    z-index: 7;
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font: 500 .6875rem/1.2 var(--police-tech);
    color: var(--gris);
    pointer-events: none;
}
.vignette__repere b { font-weight: 600; color: var(--blanc-casse); }
.vignette__repere--hg { left: 40px; top: 15px; }
.vignette__repere--bd { right: 40px; bottom: 15px; }
.vignette__voyant { width: 6px; height: 6px; border-radius: 50%; background: var(--vert); box-shadow: 0 0 8px rgb(165 204 0 / .9); animation: voyant 1.6s ease-in-out infinite; }
@keyframes voyant { 50% { opacity: .35; } }
.vignette__rejouer {
    position: absolute;
    top: 8px;
    right: 36px;
    z-index: 8;
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 1px solid var(--blanc-alpha-niveau-1);
    border-radius: 8px;
    background: rgb(12 14 16 / .72);
    color: var(--gris-clair);
    font-size: 1rem;
    cursor: pointer;
    opacity: 0;
    transition: opacity .25s ease, color .2s ease, border-color .2s ease;
}
.vignette:hover .vignette__rejouer,
.vignette__rejouer:focus-visible { opacity: 1; }
.vignette__rejouer:hover { border-color: rgb(255 255 255 / .3); color: var(--vert); }
.vignette__rejouer::before { content: ''; position: absolute; inset: -7px; }
.vignette__etiquette { position: absolute; z-index: 6; display: flex; align-items: center; gap: 8px; margin: 0; white-space: nowrap; pointer-events: none; }
.vignette__etiquette::before { content: ''; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--vert); box-shadow: 0 0 10px 1px rgb(165 204 0 / .6); }
.vignette__etiquette--orange::before { background: var(--orange); box-shadow: 0 0 10px 1px rgb(240 167 60 / .6); }
.vignette__etiquette--violet::before { background: var(--violet); box-shadow: 0 0 10px 1px rgb(167 139 250 / .7); }
.vignette__etiquette > span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border: 1px solid var(--etiquette-filet);
    border-radius: 6px;
    background: var(--etiquette-fond);
    font: 500 max(.6875rem, 1.9cqw)/1.2 var(--police-tech);
    color: var(--blanc-casse);
}

/* ----- 01 : L'événement ----- */
.evt { position: absolute; inset: 0; }
.evt__fiche {
    position: absolute;
    left: 6cqw;
    top: 50%;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 1.6cqw;
    width: 50cqw;
    padding: 3cqw;
    translate: 0 -50%;
    border-radius: 8px;
    background: rgb(20 23 26 / .88);
}
.evt__titre { display: flex; align-items: center; gap: 8px; margin: 0 0 .6cqw; font: 600 max(.8125rem, 2.3cqw)/1.2 var(--police); color: var(--blanc-casse); }
.evt__titre i { font-size: 1.15em; color: var(--orange); }
.evt__champ { display: grid; grid-template-columns: 9cqw minmax(0, 1fr); align-items: center; gap: 1.6cqw; padding-top: 1.6cqw; border-top: 1px solid var(--blanc-alpha-niveau-2); }
.evt__libelle { font: 500 max(.625rem, 1.6cqw)/1.2 var(--police-tech); letter-spacing: .06em; text-transform: uppercase; color: var(--gris); }
.evt__valeur {
    display: flex;
    align-items: center;
    min-height: max(30px, 5.2cqw);
    padding: 0 1.6cqw;
    border: 1px solid var(--blanc-alpha-niveau-1);
    border-radius: 4px;
    background: rgb(255 255 255 / .03);
    font: 500 max(.75rem, 2.1cqw)/1.2 var(--police);
    color: var(--blanc-casse);
}
.evt__valeur--sport i { margin-right: 6px; color: var(--gris-clair); }
.evt__caret { display: none; width: 1.5px; height: 1.15em; margin-left: 2px; background: var(--vert); animation: caret .9s steps(1) infinite; }
.evt__valeur.is-saisie .evt__caret { display: inline-block; }
@keyframes caret { 50% { opacity: 0; } }
.evt__types { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 3px; border: 1px solid var(--blanc-alpha-niveau-1); border-radius: 99px; background: rgb(255 255 255 / .03); }
.evt__type { position: relative; z-index: 1; padding: max(5px, .9cqw) 0; font: 600 max(.6875rem, 1.8cqw)/1.2 var(--police); text-align: center; color: var(--gris); transition: color .3s ease; }
.evt__type.is-actif { color: var(--noir); }
.evt__curseur { position: absolute; top: 3px; bottom: 3px; left: 3px; width: calc((100% - 6px) / 3); border-radius: 99px; background: var(--orange); box-shadow: 0 0 14px -2px rgb(240 167 60 / .6); }
.evt__sachet {
    position: absolute;
    left: 61cqw;
    top: 50%;
    z-index: 3;
    width: 30cqw;
    margin-top: -24.2cqw;
    aspect-ratio: 600 / 968;
    rotate: -6deg;
    filter: drop-shadow(0 3cqw 4cqw rgb(0 0 0 / .6));
}
.evt__sachet img { display: block; width: 100%; height: 100%; }
.evt__brille {
    position: absolute;
    inset: 2% 4%;
    background: linear-gradient(110deg, transparent 35%, rgb(255 255 255 / .5) 48%, transparent 60%);
    background-size: 260% 100%;
    background-position: 120% 0;
    mix-blend-mode: overlay;
    opacity: 0;
    pointer-events: none;
}
.evt__etiquette { left: 57cqw; top: calc(50% + 27cqw); }

/* ----- 02 : Les cartes ----- */
.jeu {
    position: absolute;
    inset: 11cqw 5cqw 6cqw;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
}
.jeu__cartes { position: relative; width: 25cqw; aspect-ratio: 2 / 3; }
.jeu__carte { position: absolute; inset: 0; transform-origin: 50% 230%; filter: drop-shadow(0 2.4cqw 3.4cqw rgb(0 0 0 / .55)); }
.jeu__carte--g2 { rotate: -17deg; scale: .86; }
.jeu__carte--g1 { rotate: -8.5deg; scale: .93; }
.jeu__carte--d1 { rotate: 8.5deg; scale: .93; }
.jeu__carte--d2 { rotate: 17deg; scale: .86; }
.jeu__effets { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.4cqw; width: 100%; }
.jeu__effets li {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 1.4cqw 1.6cqw;
    border: 1px solid rgb(255 255 255 / .28);
    border-radius: 8px;
    background: rgb(28 32 36 / .88);
    transition: border-color .3s ease, background-color .3s ease;
}
.jeu__effets b { font: 600 max(.75rem, 2cqw)/1.2 var(--police); color: var(--blanc-casse); transition: color .3s ease; }
.jeu__effets small { font: 500 max(.625rem, 1.6cqw)/1.25 var(--police-tech); color: var(--gris); }
.js-anim .jeu__carte { rotate: none; scale: none; }
.js-anim .jeu__effets li:not(.is-actif) { border-color: var(--blanc-alpha-niveau-2); background: rgb(20 23 26 / .7); }
.js-anim .jeu__effets li:not(.is-actif) b { color: var(--gris-fonce); }

/* ----- 03 : La validation ----- */
.val { position: absolute; inset: 0; }
.val__tel { position: absolute; left: 58cqw; top: 50%; z-index: 2; width: 29cqw; margin-top: -31cqw; }
.val__mail {
    position: absolute;
    left: 5cqw;
    top: 15cqw;
    z-index: 3;
    display: flex;
    align-items: flex-start;
    gap: 1.6cqw;
    width: 47cqw;
    padding: 1.8cqw;
    border: 1px solid rgb(255 255 255 / .14);
    border-radius: 8px;
    background: rgb(38 43 48 / .94);
    box-shadow: 0 2cqw 5cqw rgb(0 0 0 / .45);
}
.val__mail-icone { flex: none; display: grid; place-items: center; width: max(26px, 5cqw); aspect-ratio: 1; border-radius: 6px; background: var(--vert); color: var(--noir); font-size: max(.875rem, 2.4cqw); }
.val__mail-texte { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.val__mail-texte b { font: 700 max(.625rem, 1.6cqw)/1.2 var(--police); letter-spacing: .06em; color: var(--gris-clair); }
.val__mail-texte span { font: 600 max(.75rem, 2cqw)/1.25 var(--police); color: var(--blanc-casse); }
.val__mail-texte small { font: 400 max(.6875rem, 1.8cqw)/1.35 var(--police); color: var(--gris-clair); }
.val__mail-heure { margin-left: auto; font: 500 max(.625rem, 1.6cqw)/1.2 var(--police-tech); color: var(--gris); }
.val__etiquette--a { left: 6cqw; top: 54%; }
.val__etiquette--b { left: 6cqw; top: calc(54% + max(40px, 7cqw)); }

.accord {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 14cqw 7cqw 8cqw;
    overflow: hidden;
    background: radial-gradient(80% 45% at 50% 32%, rgb(165 204 0 / .1), transparent 70%), #0C0E10;
    color: #EAEEF0;
    text-align: center;
}
.accord .accord__smory { width: auto; height: 5.6cqw; }
.accord__boitier {
    position: relative;
    width: 56cqw;
    margin-top: 6cqw;
    padding: 2.6cqw;
    border-radius: 3.6cqw;
    background: linear-gradient(155deg, rgb(255 255 255 / .26), rgb(255 255 255 / .06) 45%, rgb(255 255 255 / .14));
    box-shadow: inset 0 0 0 1px rgb(255 255 255 / .38), 0 4cqw 8cqw rgb(0 0 0 / .5);
}
.accord__etiquette {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 2.4cqw;
    padding: 1.8cqw 2.4cqw;
    border-radius: 1.6cqw;
    background: #F4F5F7;
    font: 700 2.8cqw/1 var(--police);
    color: #14171A;
}
.accord__etiquette span { font: 500 2.4cqw/1 var(--police-tech); color: #5B6168; }
.accord__carte { display: block; width: 100%; height: auto; border-radius: 2.2cqw; }
.accord__tampon {
    position: absolute;
    left: 50%;
    top: 56%;
    padding: 1.8cqw 3.6cqw;
    translate: -50% -50%;
    rotate: -12deg;
    border: .8cqw solid var(--vert);
    border-radius: 2cqw;
    background: rgb(12 14 16 / .74);
    font: 800 5.6cqw/1 var(--police);
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--vert);
    box-shadow: 0 0 6cqw rgb(165 204 0 / .35);
}
.accord__titre { margin: 5cqw 0 0; font: 700 4.6cqw/1.2 var(--police); }
.accord__texte { margin: 2.4cqw 0 0; font: 400 3.3cqw/1.4 var(--police); color: var(--gris-clair); }
.accord__pied { position: relative; display: grid; width: 100%; margin-top: 7cqw; }
.accord__actions, .accord__merci { grid-area: 1 / 1; }
.accord__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 3cqw; opacity: 0; }
.accord__bouton { display: grid; place-items: center; height: 11cqw; border: 1px solid rgb(255 255 255 / .22); border-radius: 99px; font: 600 3.6cqw/1 var(--police); color: var(--blanc-casse); }
.accord__bouton--oui { border-color: transparent; background: var(--vert); color: var(--noir); box-shadow: 0 0 6cqw -1cqw rgb(165 204 0 / .7); }
.accord__merci { display: flex; align-items: center; gap: 3cqw; padding: 2.4cqw 3cqw; border-radius: 3cqw; background: rgb(165 204 0 / .12); text-align: left; }
.accord__coche { flex: none; display: grid; place-items: center; width: 9cqw; aspect-ratio: 1; border-radius: 50%; background: var(--vert); color: var(--noir); font-size: 6cqw; }
.accord__merci b { display: block; font: 700 3.6cqw/1.2 var(--police); color: var(--blanc-casse); }
.accord__merci small { display: block; margin-top: .6cqw; font: 400 2.9cqw/1.3 var(--police); color: var(--gris-clair); }
.accord__doigt {
    position: absolute;
    right: 18%;
    top: 50%;
    width: 11cqw;
    aspect-ratio: 1;
    margin-top: -5.5cqw;
    border-radius: 50%;
    background: rgb(255 255 255 / .38);
    box-shadow: 0 0 0 1.4cqw rgb(255 255 255 / .16);
    opacity: 0;
    pointer-events: none;
}
.js-anim .accord__tampon { translate: none; rotate: none; }

/* ----- 04 : Le sachet et le partage ----- */
.part { position: absolute; inset: 0; }
.part__tel { position: absolute; left: 17cqw; top: 50%; z-index: 3; width: 29cqw; margin-top: -31cqw; }
.part__story { position: absolute; left: 54cqw; top: 50%; z-index: 2; width: 24cqw; margin-top: -25cqw; rotate: 5deg; }
.part__story .vignette__etiquette { position: static; justify-content: center; margin-top: 2cqw; }
.part__story .part__nfc { margin-top: 1.2cqw; }
.story {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    aspect-ratio: 9 / 16;
    padding: 3cqw 2.4cqw 2.6cqw;
    overflow: hidden;
    border-radius: 2.4cqw;
    background: radial-gradient(70% 40% at 50% 45%, rgb(255 255 255 / .1), transparent 75%), linear-gradient(#1C2024, #0C0E10);
    box-shadow: inset 0 0 0 1px rgb(255 255 255 / .12), 0 3cqw 6cqw rgb(0 0 0 / .55);
}
.story .story__smory { width: auto; height: 2.6cqw; }
.story__carte { width: 80%; height: auto; filter: drop-shadow(0 2cqw 3cqw rgb(0 0 0 / .6)); }
.story__club { display: flex; align-items: center; gap: 1cqw; font: 600 max(.5625rem, 1.6cqw)/1.2 var(--police); color: var(--blanc-casse); }
.story__logo { display: grid; place-items: center; width: 3.6cqw; aspect-ratio: 1; border-radius: .8cqw; background: #fff; }
.story__logo img { width: 74%; height: auto; }
.js-anim .part__story { rotate: none; }

/* ----- 05 : L'album ----- */
.alb { position: absolute; inset: 0; }
.alb__classeur {
    position: absolute;
    inset: 11cqw 6cqw 10cqw;
    display: flex;
    flex-direction: column;
    gap: 2.4cqw;
    padding: 2.6cqw;
    border-radius: 8px;
    background: rgb(20 23 26 / .88);
}
.alb__tete { display: flex; align-items: center; gap: 1.8cqw; min-width: 0; }
.alb__plaque { flex: none; display: grid; place-items: center; width: max(30px, 6.4cqw); aspect-ratio: 1; border-radius: 6px; background: #fff; }
.alb__plaque img { width: 74%; height: auto; }
.alb__noms { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.alb__noms b { font: 700 max(.8125rem, 2.4cqw)/1.2 var(--police); color: var(--blanc-casse); }
.alb__noms small { font: 500 max(.625rem, 1.7cqw)/1.2 var(--police-tech); color: var(--gris); }
.alb__partage {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
    padding: max(6px, 1.2cqw) max(10px, 2cqw);
    border-radius: 99px;
    background: var(--vert);
    font: 600 max(.6875rem, 1.8cqw)/1 var(--police);
    color: var(--noir);
    white-space: nowrap;
}
.alb__grille { flex: 1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 1.6cqw; min-height: 0; }
.alb__poche { position: relative; display: grid; place-items: center; min-height: 0; border: 1px dashed rgb(255 255 255 / .14); border-radius: 6px; background: rgb(255 255 255 / .02); }
.alb__poche--vide i { font-size: max(1rem, 3cqw); color: var(--gris-fonce); }
.alb__carte { display: block; height: 90%; aspect-ratio: 2 / 3; }
.alb__etiquette { left: 40px; bottom: 13px; }
.alb__toast {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 7;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    translate: -50% -50%;
    border: 1px solid rgb(255 255 255 / .2);
    border-radius: 99px;
    background: rgb(38 43 48 / .96);
    font: 600 max(.75rem, 2cqw)/1 var(--police);
    color: var(--blanc-casse);
    box-shadow: 0 2cqw 5cqw rgb(0 0 0 / .5);
    opacity: 0;
    pointer-events: none;
}
.alb__toast i { color: var(--vert); }
.js-anim .alb__toast { translate: none; }
.part .verrou { display: none; }

/* ----- Vignette étroite ----- */
@container (max-width: 480px) {
    .evt__fiche { top: 12cqw; width: 60cqw; padding: 3.6cqw; translate: none; }
    .evt__champ { grid-template-columns: 12cqw minmax(0, 1fr); }
    .evt__champ:first-of-type { grid-template-columns: minmax(0, 1fr); gap: 1.2cqw; }
    .evt__sachet { left: auto; right: 4cqw; top: auto; bottom: 9cqw; width: 31cqw; margin-top: 0; }
    .evt__etiquette,
    .val__etiquette--b,
    .part__nfc,
    .alb__etiquette { display: none; }
    .jeu { inset: 12cqw 4cqw 9cqw; }
    .jeu__cartes { width: 30cqw; }
    .jeu__effets { gap: 1.2cqw; }
    .jeu__effets li { align-items: center; padding: 1.6cqw 1cqw; }
    .jeu__effets small { display: none; }
    .alb__classeur { inset: 12cqw 4cqw 9cqw; }
    .alb__partage span { display: none; }
}

/* ==========================================================================
   Zone - Événements
   ========================================================================== */
.occasions > .elementor-widget,
.suites > .elementor-widget { display: flex; }
.occasion {
    display: flex;
    flex-direction: column;
    width: 100%;
    overflow: hidden;
    color: inherit;
    text-decoration: none;
    transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
    transition: transform .6s var(--ease-sortie), border-color .2s ease;
}
.occasion:hover { transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(-6px); border-color: rgb(255 255 255 / .28); color: inherit; }
.occasion__visuel {
    position: relative;
    display: grid;
    place-items: center;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: radial-gradient(55% 65% at 50% 60%, rgb(255 255 255 / .09), transparent 72%), linear-gradient(#15181C, #0E1013);
}
.occasion__visuel::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgb(255 255 255 / .04) 1px, transparent 1px),
        linear-gradient(90deg, rgb(255 255 255 / .04) 1px, transparent 1px);
    background-size: 32px 32px;
    background-position: center;
    -webkit-mask-image: radial-gradient(circle at 50% 55%, #000 25%, transparent 75%);
            mask-image: radial-gradient(circle at 50% 55%, #000 25%, transparent 75%);
}
.occasion__carte { position: relative; z-index: 1; width: 36%; rotate: -6deg; filter: drop-shadow(0 18px 26px rgb(0 0 0 / .6)); transition: rotate .5s var(--ease-sortie), scale .5s var(--ease-sortie); }
.occasion:hover .occasion__carte { rotate: 0deg; scale: 1.04; }
.occasion__puce {
    position: absolute;
    left: 15px;
    bottom: 15px;
    z-index: 2;
    padding: 6px 12px;
    border: 1px solid rgb(255 255 255 / .22);
    border-radius: 99px;
    background: rgb(255 255 255 / .1);
    font: 700 .75rem/1 var(--police);
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--blanc-casse);
}
.occasion__texte { display: flex; flex-direction: column; align-items: flex-start; gap: 15px; flex: 1; padding: 30px; }
.occasion__resume { color: var(--gris-clair); }
.occasion__specs { display: flex; flex-direction: column; gap: 8px; font: 500 .8125rem/1.35 var(--police-tech); color: var(--gris-clair); }
.occasion__specs span { display: flex; align-items: flex-start; gap: 8px; }
.occasion__specs i { flex: none; margin-top: 1px; color: var(--vert); }

/* ==========================================================================
   Zone - Rôles
   ========================================================================== */
.roles__duo { display: grid; grid-template-columns: minmax(0, 1fr) 120px minmax(0, 1fr); align-items: stretch; }
.role { display: flex; flex-direction: column; gap: 30px; padding: 30px; }
.role__tete { display: flex; align-items: center; gap: 15px; padding-bottom: 30px; border-bottom: 1px solid var(--blanc-alpha-niveau-2); }
.role__plaque { flex: none; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 8px; background: #fff; }
.role__plaque img { width: 72%; height: auto; }
.role__plaque--smory { border: 1px solid var(--blanc-alpha-niveau-1); background: var(--noir); }
.role__plaque--smory img { width: 80%; }
.role__noms { display: flex; flex-direction: column; gap: 4px; }
.role__noms small { font: 500 .75rem/1.2 var(--police-tech); color: var(--gris); }
.role__liste { display: flex; flex-direction: column; gap: 15px; }
.role__liste li { display: flex; align-items: center; gap: 15px; font: 400 1rem/1.45 var(--police); color: var(--gris-clair); }
.roles__flux { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 15px; padding: 0 15px; }
.roles__voie { position: relative; display: block; width: 100%; height: 2px; overflow: hidden; border-radius: 2px; background: rgb(255 255 255 / .08); }
.roles__voie span {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle 3px at 0 50%, var(--vert) 90%, transparent);
    animation: flux-aller 2.4s linear infinite;
}
.roles__voie--retour span { background: radial-gradient(circle 3px at 0 50%, var(--blanc-casse) 90%, transparent); animation-name: flux-retour; }
.roles__voie span:nth-child(2) { animation-delay: -.8s; }
.roles__voie span:nth-child(3) { animation-delay: -1.6s; }
@keyframes flux-aller {
    from { translate: 0 0; }
    to   { translate: 100% 0; }
}
@keyframes flux-retour {
    from { translate: 100% 0; }
    to   { translate: 0 0; }
}
.roles__noeud { display: grid; place-items: center; width: 52px; height: 52px; border: 1px solid var(--blanc-alpha-niveau-1); border-radius: 50%; background: var(--noir-niveau-2); font-size: 1.25rem; color: var(--gris-clair); }

/* ==========================================================================
   Zone - Suite De La Visite
   ========================================================================== */
.suite {
    display: flex;
    flex-direction: column;
    width: 100%;
    overflow: hidden;
    color: inherit;
    text-decoration: none;
    transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
    transition: transform .6s var(--ease-sortie), border-color .2s ease;
}
.suite:hover { transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(-6px); border-color: rgb(255 255 255 / .28); color: inherit; }
.suite__visuel { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; background: radial-gradient(60% 75% at 50% 70%, rgb(165 204 0 / .16), transparent 72%), #101316; }
.suite--violet .suite__visuel { background: radial-gradient(60% 75% at 50% 65%, rgb(124 58 237 / .38), transparent 72%), var(--violet-nuit); }
.suite__img { position: absolute; top: 56%; height: auto; filter: drop-shadow(0 16px 24px rgb(0 0 0 / .6)); transition: rotate .5s var(--ease-sortie), translate .5s var(--ease-sortie); }
.suite__img--g { left: 24%; width: 30%; translate: 0 -50%; rotate: -9deg; }
.suite__img--d { left: 46%; width: 30%; translate: 0 -46%; rotate: 7deg; }
.suite:hover .suite__img--g { translate: -8% -50%; rotate: -14deg; }
.suite:hover .suite__img--d { translate: 8% -48%; rotate: 11deg; }
.suite__balle { position: absolute; left: 20%; top: 56%; width: 26%; translate: 0 -50%; transition: translate .5s var(--ease-sortie); }
.suite:hover .suite__balle { translate: -6% -56%; }
.suite__carte { position: absolute; left: 50%; top: 54%; width: 24%; translate: 0 -50%; rotate: 7deg; filter: drop-shadow(0 16px 24px rgb(0 0 0 / .6)); transition: rotate .5s var(--ease-sortie), translate .5s var(--ease-sortie); }
.suite:hover .suite__carte { translate: 6% -52%; rotate: 2deg; }
.suite__img--s1 { left: 16%; width: 25%; translate: 0 -48%; rotate: -12deg; }
.suite__img--s2 { left: 37.5%; z-index: 2; width: 25%; translate: 0 -54%; }
.suite__img--s3 { left: 59%; width: 25%; translate: 0 -48%; rotate: 12deg; }
.suite:hover .suite__img--s1 { translate: -10% -48%; rotate: -16deg; }
.suite:hover .suite__img--s3 { translate: 10% -48%; rotate: 16deg; }
.suite__texte { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; flex: 1; padding: 30px; }
.suite__resume { color: var(--gris-clair); }
.suite--violet .public__lien { color: var(--violet); }

/* ==========================================================================
   Zone - Anatomie
   ========================================================================== */
.anat {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 380px) minmax(0, 1fr);
    grid-template-areas: "g centre d";
    align-items: center;
    gap: 90px;
}
.anat__traits { position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.anat__trait { fill: none; stroke: rgb(255 255 255 / .85); stroke-width: 1.2; stroke-dasharray: 4 5; filter: drop-shadow(0 0 3px rgb(0 0 0 / .8)); }
.anat__trait--violet { stroke: var(--violet); }
.anat__legendes { display: contents; }
.anat__liste { position: relative; z-index: 2; display: flex; flex-direction: column; gap: 12px; }
.anat__liste--g { grid-area: g; }
.anat__liste--d { grid-area: d; }
.anat .anat__item {
    position: relative;
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr);
    align-items: center;
    gap: 14px;
    width: 100%;
    margin: 0;
    padding: 12px 16px;
    overflow: hidden;
    border: 1px solid var(--blanc-alpha-niveau-2);
    border-radius: 12px;
    background: rgb(12 14 16 / .45);
    color: inherit;
    font: inherit;
    text-align: left;
    white-space: normal;
    cursor: pointer;
    transition: border-color .3s ease, background-color .3s ease, transform .3s var(--ease-sortie);
}
.anat .anat__item:hover { background: rgb(12 14 16 / .7); color: inherit; }
.anat .anat__item.is-actif { border-color: rgb(255 255 255 / .42); background: rgb(12 14 16 / .88); }
.anat__liste--g .anat__item.is-actif { transform: translateX(8px); }
.anat__liste--d .anat__item.is-actif { transform: translateX(-8px); }
.anat__num { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: var(--noir-niveau-2); font: 600 .75rem/1 var(--police-tech); color: var(--gris-clair); transition: background-color .3s ease, color .3s ease; }
.anat__item.is-actif .anat__num { background: var(--vert); color: var(--noir); }
.anat__item--violet.is-actif .anat__num { background: var(--violet); }
.anat__texte strong { display: block; font: 700 .9375rem/1.25 var(--police); color: var(--blanc-casse); }
.anat__texte small { display: block; margin-top: 3px; font: 400 .8125rem/1.45 var(--police); color: var(--gris); }
.anat__barre { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; }
.anat__barre span { display: block; width: 100%; height: 100%; transform: scaleX(0); transform-origin: 0 50%; background: linear-gradient(90deg, var(--vert), var(--violet)); }
.anat__centre { grid-area: centre; position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 30px; }
.anat__scene { position: relative; width: 100%; }
.anat__carte .card-visual { filter: drop-shadow(0 30px 50px rgb(0 0 0 / .6)); }
.anat:not(.is-verso) .anat__carte .tc-card__flipper,
.anat__vue .tc-card__flipper { transform: none !important; }
.anat__calque { position: absolute; inset: 0; z-index: 3; }
.anat.is-verso .anat__calque { visibility: hidden; }
.anat__loupe {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 2;
    width: 42%;
    aspect-ratio: 1;
    overflow: hidden;
    border: 2px solid rgb(255 255 255 / .92);
    border-radius: 50%;
    background: #0C0E10;
    box-shadow: 0 0 0 1px rgb(12 14 16 / .6), 0 0 0 7px rgb(255 255 255 / .08), 0 26px 50px -12px rgb(0 0 0 / .85);
    pointer-events: none;
    visibility: hidden;
}
.anat__loupe.is-visible { visibility: visible; }
.anat__loupe::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 20px;
    height: 20px;
    margin: -10px 0 0 -10px;
    border: 1px solid rgb(255 255 255 / .85);
    border-radius: 50%;
    box-shadow: 0 0 0 1px rgb(12 14 16 / .45), inset 0 0 0 1px rgb(12 14 16 / .45);
}
.anat__vue { position: absolute; left: 0; top: 0; transform-origin: 0 0; pointer-events: none; }
.anat__vue .carte-app.card-visual { width: 100%; margin: 0; }
.anat__pied { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; }
.anat .anat__retourner {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 10px 18px;
    border: 1px solid var(--blanc-alpha-niveau-1);
    border-radius: 999px;
    background: rgb(12 14 16 / .45);
    color: var(--blanc-casse);
    font: 600 .875rem/1.2 var(--police);
    cursor: pointer;
    transition: border-color .25s ease, background-color .25s ease;
}
.anat .anat__retourner:hover { border-color: rgb(255 255 255 / .4); background: rgb(12 14 16 / .8); color: var(--blanc-casse); }
.anat .anat__retourner i { font-size: 1.05rem; color: var(--vert); }
.anat__verso { max-width: 300px; margin: 0; font: 500 .8125rem/1.45 var(--police-tech); color: var(--gris-clair); visibility: hidden; }
.anat.is-verso .anat__verso { visibility: visible; }
.anat-gabarits { border-top: 1px solid var(--blanc-alpha-niveau-2); }
.smory-gabarits--centre .gabarits { align-items: center; }
.smory-gabarits--centre .gabarits__liste { justify-content: center; }

/* ==========================================================================
   Zone - Effets
   ========================================================================== */
.effets { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 30px; }
.effet { position: relative; display: flex; flex-direction: column; width: 100%; overflow: hidden; }
.effet__scene {
    position: relative;
    display: grid;
    place-items: center;
    padding: 48px 16% 32px;
    border-bottom: 1px solid var(--blanc-alpha-niveau-2);
    background: radial-gradient(55% 50% at 50% 48%, var(--effet-halo, rgb(255 255 255 / .08)), transparent 72%), #101316;
}
.effet__scene::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgb(255 255 255 / .04) 1px, transparent 1px),
        linear-gradient(90deg, rgb(255 255 255 / .04) 1px, transparent 1px);
    background-size: 20px 20px;
    background-position: center;
    -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 30%, transparent 78%);
            mask-image: radial-gradient(circle at 50% 50%, #000 30%, transparent 78%);
    pointer-events: none;
}
.effet__index { position: absolute; left: 16px; top: 15px; font: 500 .6875rem/1 var(--police-tech); color: var(--gris); }
.effet__carte { position: relative; width: 100%; max-width: 230px; }
.effet__carte .card-visual { filter: drop-shadow(0 22px 34px rgb(0 0 0 / .6)); }
.effet--cosmos  { --effet-halo: rgb(196 181 253 / .2); }
.effet--radiant { --effet-halo: rgb(255 255 255 / .11); }
.effet--reverse { --effet-halo: rgb(244 114 182 / .15); }
.effet--galaxy  { --effet-halo: rgb(124 58 237 / .28); }
.effet__corps { display: flex; flex-direction: column; align-items: flex-start; gap: 15px; padding: 24px 24px 28px; }
.effet__tete { display: flex; align-items: center; gap: 12px; margin: 0; }
.effet__tete .reglage__effet { flex: none; width: 26px; height: 26px; }
.effet__texte { margin: 0; font: 400 .875rem/1.55 var(--police); color: var(--gris); }
.encart { display: flex; align-items: center; gap: 20px; padding: 22px 26px; }
.encart__texte { display: flex; flex: 1; flex-direction: column; gap: 4px; margin: 0; }
.encart__texte strong { font: 700 1rem/1.3 var(--police); color: var(--blanc-casse); }
.encart__texte span { font: 400 .875rem/1.5 var(--police); color: var(--gris-clair); }
.encart__exemples { flex: none; justify-content: flex-end; max-width: 380px; }

/* ==========================================================================
   Zone - Couches
   ========================================================================== */
.couches { position: relative; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: center; gap: 60px; }
.couches__traits { position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.couches__trait { fill: none; stroke: rgb(255 255 255 / .3); stroke-width: 1; stroke-dasharray: 3 4; transition: stroke .3s ease; }
.couches__trait.is-actif { stroke: rgb(255 255 255 / .9); }
.couches__cible { fill: var(--blanc-casse); stroke: rgb(12 14 16 / .5); stroke-width: 2; transition: fill .3s ease; }
.couches__cible.is-actif { fill: var(--vert); }
.couches__scene { position: relative; height: 640px; perspective: 2200px; perspective-origin: 50% 20%; }
.couches__pile {
    --rx: 56deg;
    --rz: -36deg;
    --ecart: 66px;
    position: absolute;
    left: 50%;
    top: 64%;
    width: 240px;
    aspect-ratio: 2 / 3;
    translate: -50% -50%;
    transform: rotateX(calc(var(--rx) * var(--incline, 1))) rotateZ(calc(var(--rz) * var(--incline, 1)));
    transform-style: preserve-3d;
}
.couche {
    position: absolute;
    inset: 0;
    transform: translateZ(calc(var(--i) * var(--ecart) * var(--eclat, 1) + var(--leve, 0px)));
    container-type: inline-size;
    transition: filter .35s ease;
}
.couche::before {
    content: '';
    position: absolute;
    inset: 0;
    border: 1px solid rgb(255 255 255 / .34);
    border-radius: 4cqw;
    background: rgb(255 255 255 / .03);
    pointer-events: none;
}
.couche--fond::before { display: none; }
.couche .carte-app { position: relative; z-index: 1; }
.couche.is-eteinte { filter: brightness(.38) saturate(.5); }
.couche__ancre { position: absolute; right: 0; bottom: 0; width: 1px; height: 1px; pointer-events: none; }
.couche .tc-card { cursor: default; }
.couche .tc-card__face--back,
.couche .tc-card__glare,
.couche .tc-card__grain { display: none; }
.couche:not(.couche--effet) .tc-card__tilt::after { display: none; }
.couche:not(.couche--fond) .tc-card__tilt { background: none; box-shadow: none; }
.couche:not(.couche--fond) .tc-card__surface { background: none; }
.couche.couche--effet .tc-card__surface { background: linear-gradient(160deg, #5E646A 0%, #B4B9BF 42%, #868C92 68%, #5A6066 100%); }
.couche.couche--effet .carte-app { opacity: .84; }
.couche--fond .tc-card__surface > * { visibility: hidden; }
.couche--photo .tc-card__surface > :not(.tc-card__zone-image),
.couche--photo .tc-card__zone-image > :not(.tc-card__zone-image-inner),
.couche--photo .tc-card__zone-image-inner > :not(.tc-card__image) { visibility: hidden; }
.couche--effet .tc-card__surface > :not(.tc-card__shine) { visibility: hidden; }
.couche--effet .tc-card__shine { opacity: 1; }
.couche--relief .tc-card__surface > :not(.tc-card__zone-image),
.couche--relief .tc-card__zone-image > :not(.tc-card__zone-image-inner),
.couche--relief .tc-card__zone-image-inner > :not(.tc-card__image-cutout, .relief-ombre) { visibility: hidden; }
.couche--textes .tc-card__surface > :is(.tc-card__holo-overlay, .tc-card__shine),
.couche--textes .tc-card__zone-image-inner > :is(.tc-card__image, .tc-card__image-cutout, .relief-ombre, .tc-card__holo-image, .tc-card__guilloche) { visibility: hidden; }
.couche:is(.couche--photo, .couche--relief, .couche--textes) .tc-card__zone-image-inner::after { display: none; }
.couches__entiere { position: absolute; left: 50%; top: 64%; width: 240px; translate: -50% -50%; visibility: hidden; }
.couches__entiere .card-visual { filter: drop-shadow(0 30px 50px rgb(0 0 0 / .6)); }
.couches__cote { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: flex-start; gap: 30px; }
.couches__liste { display: flex; flex-direction: column; gap: 12px; width: 100%; }
.couches .couche-item {
    position: relative;
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr);
    align-items: start;
    gap: 14px;
    width: 100%;
    margin: 0;
    padding: 14px 16px;
    border: 1px solid var(--blanc-alpha-niveau-2);
    border-radius: 12px;
    background: rgb(12 14 16 / .45);
    color: inherit;
    font: inherit;
    text-align: left;
    white-space: normal;
    cursor: pointer;
    transition: border-color .3s ease, background-color .3s ease, transform .3s var(--ease-sortie);
}
.couches .couche-item:hover { background: rgb(12 14 16 / .7); color: inherit; }
.couches .couche-item.is-actif { border-color: rgb(255 255 255 / .42); background: rgb(12 14 16 / .88); transform: translateX(-8px); }
.couche-item__num { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: var(--noir-niveau-2); font: 600 .75rem/1 var(--police-tech); color: var(--gris-clair); transition: background-color .3s ease, color .3s ease; }
.couche-item.is-actif .couche-item__num { background: var(--vert); color: var(--noir); }
.couche-item__texte strong { display: block; font: 700 .9375rem/1.25 var(--police); color: var(--blanc-casse); }
.couche-item__texte small { display: block; margin-top: 3px; font: 400 .8125rem/1.45 var(--police); color: var(--gris); }
.couche-item__qui { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.qui {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    border: 1px solid var(--blanc-alpha-niveau-1);
    border-radius: 6px;
    font: 500 .6875rem/1.2 var(--police-tech);
    color: var(--gris-clair);
}
.qui::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--blanc-casse); }
.qui--club::before { background: var(--vert); box-shadow: 0 0 6px rgb(165 204 0 / .8); }
.qui--rang::before { background: var(--orange); box-shadow: 0 0 6px rgb(240 167 60 / .8); }
.couches .couches__bouton {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 10px 18px;
    border: 1px solid var(--blanc-alpha-niveau-1);
    border-radius: 999px;
    background: rgb(12 14 16 / .45);
    color: var(--blanc-casse);
    font: 600 .875rem/1.2 var(--police);
    cursor: pointer;
    transition: border-color .25s ease, background-color .25s ease;
}
.couches .couches__bouton:hover { border-color: rgb(255 255 255 / .4); background: rgb(12 14 16 / .8); color: var(--blanc-casse); }
.couches .couches__bouton i { font-size: 1.05rem; color: var(--vert); }

/* ==========================================================================
   Zone - Ultra Collector
   ========================================================================== */
.collector__visuel { width: 100%; }
.collector__scene { position: relative; display: flex; justify-content: center; padding: 30px 0; }
.collector__scene::before {
    content: '';
    position: absolute;
    inset: 4% 10%;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgb(165 204 0 / .16), transparent);
    filter: blur(10px);
    pointer-events: none;
}
.collector__boitier { position: relative; width: min(100%, 360px); }
.collector__boitier .carte-app.card-visual--slab { width: 100%; max-width: none; margin: 0; filter: drop-shadow(0 40px 60px rgb(0 0 0 / .65)); }
.collector__boitier .as-slab__case > .tc-card { width: 100%; max-width: none; }
.note { width: 100%; max-width: 460px; padding: 20px 24px 14px; }
.note__tete { display: flex; align-items: baseline; justify-content: space-between; gap: 15px; margin: 0; }
.note__libelle { font: 500 .75rem/1.2 var(--police-tech); color: var(--gris); }
.note__valeur { display: inline-flex; align-items: baseline; gap: 4px; }
.note__valeur b { font: 800 2.5rem/1 var(--police); letter-spacing: -.03em; color: var(--blanc-casse); }
.note__valeur small { font: 600 1rem/1 var(--police); color: var(--gris); }
.note__regle { position: relative; height: 8px; margin: 18px 0 0; border-radius: 99px; background: rgb(255 255 255 / .07); }
.note__rempli { position: absolute; inset: 0 auto 0 0; width: calc(var(--note) * 100%); border-radius: inherit; background: linear-gradient(90deg, rgb(165 204 0 / .3), var(--vert)); }
.note__curseur {
    position: absolute;
    left: calc(var(--note) * 100%);
    top: 50%;
    width: 16px;
    height: 16px;
    translate: -50% -50%;
    border-radius: 50%;
    background: var(--blanc-casse);
    box-shadow: 0 0 0 4px rgb(165 204 0 / .3), 0 0 14px rgb(165 204 0 / .9);
}
.note__graduations { position: relative; height: 16px; margin: 14px 0 0; }
.note__graduations li { position: absolute; left: calc((var(--g) - 1) / 9 * 100%); top: 0; translate: -50% 0; font: 500 .6875rem/1 var(--police-tech); color: #7D878D; }
.note__graduations li::before { content: ''; position: absolute; left: 50%; bottom: calc(100% + 4px); width: 1px; height: 6px; background: rgb(255 255 255 / .22); }

/* ==========================================================================
   Zone - Page Publique
   ========================================================================== */
.diffusion { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 280px) minmax(0, 1fr); align-items: center; gap: 120px; }
.diffusion__traits { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.diffusion__trait { fill: none; stroke: rgb(255 255 255 / .12); stroke-width: 1.2; }
.diffusion__flux {
    fill: none;
    stroke: var(--vert);
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-dasharray: 3 97;
    filter: drop-shadow(0 0 4px rgb(165 204 0 / .9));
    opacity: .45;
    animation: diffusion-flux 3.2s linear infinite;
    transition: opacity .3s ease;
}
.diffusion__flux--violet { stroke: var(--violet); filter: drop-shadow(0 0 4px rgb(167 139 250 / .9)); }
.diffusion__flux.is-actif { opacity: 1; animation-duration: 1.3s; }
@keyframes diffusion-flux { to { stroke-dashoffset: -100; } }
.diffusion__colonne { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 15px; }
.diffusion__titre { margin: 0 0 4px; font: 500 .75rem/1.2 var(--police-tech); color: var(--gris); }
.diffusion__noeud { display: grid; grid-template-columns: 38px minmax(0, 1fr); align-items: center; gap: 14px; padding: 14px 16px; transition: border-color .3s ease, background-color .3s ease, transform .3s var(--ease-sortie); }
.diffusion__noeud .pictogramme { transition: background-color .3s ease, color .3s ease; }
.diffusion__noeud.is-actif { border-color: rgb(255 255 255 / .45); background: rgb(12 14 16 / .85); }
.diffusion__colonne--entrees .diffusion__noeud.is-actif { transform: translateX(6px); }
.diffusion__colonne--sorties .diffusion__noeud.is-actif { transform: translateX(-6px); }
.diffusion__noeud.is-actif .pictogramme { background: var(--vert); color: var(--noir); }
.diffusion__noeud--violet.is-actif .pictogramme { background: var(--violet); color: var(--noir); }
.diffusion__texte strong { display: block; font: 700 .9375rem/1.25 var(--police); color: var(--blanc-casse); }
.diffusion__texte small { display: block; margin-top: 3px; font: 400 .8125rem/1.45 var(--police); color: var(--gris); }
.diffusion__tel { position: relative; z-index: 1; width: 100%; }
.diffusion__tel::before {
    content: '';
    position: absolute;
    inset: 10% -30%;
    z-index: -1;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgb(124 58 237 / .3), transparent);
    filter: blur(14px);
    pointer-events: none;
}
.diffusion .verrou { display: none; }
.diffusion__specs .specs-tech { justify-content: center; }

/* ==========================================================================
   Zone - LINK : Radiographie
   ========================================================================== */
.vignette--violet { background: radial-gradient(60% 60% at 50% 52%, rgb(124 58 237 / .16), transparent 70%), #110D19; }
.rx { position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; --fx: 50%; }
.rx__objet { position: relative; width: 62cqw; aspect-ratio: 7 / 4; }
.rx__objet > .balle { width: 100%; }
.rx__vue {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    clip-path: inset(0 calc(100% - var(--fx) - 9%) 0 calc(var(--fx) - 9%));
    pointer-events: none;
}
.rx__vue-objet { position: relative; width: 62cqw; aspect-ratio: 7 / 4; }
.rx__silhouette {
    position: absolute;
    inset: 0;
    overflow: hidden;
    border: 1px solid rgb(196 181 253 / .9);
    border-radius: 7.4% / 13%;
    background: radial-gradient(ellipse at 36% 30%, rgb(167 139 250 / .32), rgb(17 12 26 / .94) 72%);
    box-shadow: inset 0 0 40px rgb(124 58 237 / .55), 0 0 30px rgb(124 58 237 / .35);
}
/* En radiographie, le bord intérieur de la plaque en pointillés (19/10). */
.rx__silhouette::before {
    content: '';
    position: absolute;
    inset: 4% 2.4%;
    border: 1px dashed rgb(196 181 253 / .45);
    border-radius: 5% / 9%;
}
.rx__puce { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; color: #C4B5FD; filter: drop-shadow(0 0 4px rgb(167 139 250 / .9)); }
.rx__spirale { fill: none; stroke: currentColor; stroke-width: 1.4; }
.rx__pont { fill: none; stroke: currentColor; stroke-width: 1.4; stroke-dasharray: 3 3; opacity: .8; }
.rx__chip { fill: var(--vert); filter: drop-shadow(0 0 6px rgb(165 204 0 / .9)); }
.rx__chip-trait { fill: none; stroke: var(--vert); stroke-width: 1.4; }
.rx__faisceau {
    position: absolute;
    top: 0;
    bottom: 0;
    left: var(--fx);
    z-index: 3;
    width: 2px;
    margin-left: -1px;
    background: linear-gradient(transparent, #C4B5FD 18%, #FFFFFF 50%, #C4B5FD 82%, transparent);
    box-shadow: 0 0 12px 2px rgb(167 139 250 / .8), 0 0 40px 6px rgb(124 58 237 / .45);
    pointer-events: none;
}
.rx__faisceau::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: -11cqw;
    width: 22cqw;
    background: linear-gradient(90deg, transparent, rgb(167 139 250 / .1) 40%, rgb(167 139 250 / .1) 60%, transparent);
}
.rx__ancre { position: absolute; width: 1px; height: 1px; pointer-events: none; }
.rx__ancre--puce { left: 50%; top: 50%; }
.rx__ancre--antenne { left: 90%; top: 50%; }
.rx__ancre--balle { left: 4%; top: 22%; }
.rx .repere { transition: filter .3s ease, opacity .3s ease; }
.rx .repere.is-lu .repere__boite { border-color: rgb(196 181 253 / .7); box-shadow: 0 0 0 1px rgb(167 139 250 / .35), 0 12px 26px -12px rgb(0 0 0 / .8); }
.rx .repere .repere__trait::after { background: var(--violet); box-shadow: 0 0 0 3px rgb(167 139 250 / .28), 0 0 12px rgb(167 139 250 / .9); }
.rx__glisser { position: absolute; left: 50%; bottom: 46px; z-index: 7; margin: 0; translate: -50% 0; font: 500 .6875rem/1.2 var(--police-tech); color: var(--gris); pointer-events: none; }
.rx.is-glisse { cursor: ew-resize; }

/* ==========================================================================
   Zone - LINK : Objets
   ========================================================================== */
.objets { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px; }
/* Modèles lus dans l'appli (14/10) : autant de colonnes que de modèles, trois au plus */
.objets--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.objets--1 { grid-template-columns: minmax(0, 520px); justify-content: center; }
/* Pleine largeur : dans une colonne centrée, le widget prenait la largeur de son contenu, mal mesurée à cause du
   container-type des scènes, et ne réservait pas la hauteur des cartes (encart suivant posé dessus à 375 px, 16/10) */
.elementor-widget-smory-objets { width: 100%; }
@media (min-width: 1025px) { .objets--2 .objet__scene { aspect-ratio: 16 / 9; } }
.objet { position: relative; display: flex; flex-direction: column; width: 100%; overflow: hidden; }
.objet__scene {
    position: relative;
    display: grid;
    place-items: center;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-bottom: 1px solid var(--blanc-alpha-niveau-2);
    background: radial-gradient(55% 55% at 50% 56%, rgb(124 58 237 / .24), transparent 72%), #110D19;
    container-type: inline-size;
}
.objet__scene::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgb(255 255 255 / .04) 1px, transparent 1px),
        linear-gradient(90deg, rgb(255 255 255 / .04) 1px, transparent 1px);
    background-size: 20px 20px;
    background-position: center;
    -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 30%, transparent 78%);
            mask-image: radial-gradient(circle at 50% 50%, #000 30%, transparent 78%);
    pointer-events: none;
}
.objet__index { position: absolute; left: 16px; top: 15px; z-index: 2; font: 500 .6875rem/1 var(--police-tech); color: var(--gris); }
.objet__visuel { position: relative; z-index: 1; display: grid; place-items: center; width: 40cqw; transition: scale .5s var(--ease-sortie); }
.objet__visuel > .balle { width: 100%; }
.objet__visuel > svg { display: block; width: 100%; height: auto; overflow: visible; filter: drop-shadow(0 20px 26px rgb(0 0 0 / .55)); }
.objet--plaque .objet__visuel { width: 62cqw; }
.objet--trophee .objet__visuel { width: 40cqw; }
.objet--appli .objet__visuel { width: 62cqw; }
.objet__photo { display: block; width: 100%; height: auto; max-height: 52cqw; object-fit: contain; border-radius: 6px; filter: drop-shadow(0 20px 26px rgb(0 0 0 / .55)); }
.objet__picto { display: grid; place-items: center; width: 26cqw; aspect-ratio: 1; border-radius: 50%; background: var(--violet-alpha); color: var(--violet); font-size: 12cqw; line-height: 1; }
.objet__onde { position: absolute; left: 50%; top: 50%; width: 30cqw; aspect-ratio: 1; margin: -15cqw 0 0 -15cqw; border: 1.5px solid rgb(196 181 253 / .7); border-radius: 50%; opacity: 0; pointer-events: none; animation: onde 2.4s var(--ease-sortie) infinite; }
.objet__onde:nth-of-type(2) { animation-delay: .8s; }
.objet__onde:nth-of-type(3) { animation-delay: 1.6s; }
.objet--plaque .objet__onde { top: 43.5%; }
.objet--trophee .objet__onde { top: 81.8%; }
.objet--trophee .objet__visuel { scale: var(--taille, 1); transform-origin: 50% 100%; }
.objet__corps { display: flex; flex: 1; flex-direction: column; align-items: flex-start; gap: 15px; padding: 24px 24px 28px; }
.objet__texte { margin: 0; font: 400 .9375rem/1.55 var(--police); color: var(--gris-clair); }
.objet__choix { display: flex; flex-direction: column; gap: 8px; width: 100%; }
.objet__libelle { margin: 0; font: 500 .6875rem/1.2 var(--police-tech); color: var(--gris); }
.objet__variantes { display: flex; flex-wrap: wrap; gap: 8px; }
.objet .objet__variante {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 5px 12px 5px 5px;
    border: 1px solid var(--blanc-alpha-niveau-1);
    border-radius: 999px;
    background: rgb(12 14 16 / .45);
    color: var(--gris-clair);
    font: 600 .8125rem/1.2 var(--police);
    white-space: nowrap;
    cursor: pointer;
    transition: border-color .25s ease, background-color .25s ease, color .25s ease;
}
.objet .objet__variante:hover { background: rgb(255 255 255 / .06); color: var(--gris-clair); }
.objet .objet__variante.is-actif { border-color: rgb(255 255 255 / .5); background: rgb(255 255 255 / .1); color: var(--blanc-casse); }
.objet .objet__variante--texte { padding-left: 12px; }
.objet__pastille { width: 20px; height: 20px; border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .35); }
.plaque__metal-a { stop-color: #8C939A; }
.plaque__metal-b { stop-color: #E3E7EA; }
.plaque__metal-c { stop-color: #6E757C; }
.trophee__metal-a { stop-color: #7A8188; }
.trophee__metal-b { stop-color: #F1F3F5; }
.trophee__metal-c { stop-color: #5E646A; }
.objet__nfc { fill: none; stroke: rgb(196 181 253 / .95); stroke-width: 2.2; stroke-linecap: round; filter: drop-shadow(0 0 4px rgb(167 139 250 / .9)); }
.objet__grave { fill: rgb(12 14 16 / .38); font: 800 13px/1 var(--police); letter-spacing: .32em; }

/* ==========================================================================
   Zone - LINK : Étapes Synchronisées
   ========================================================================== */
.etapes-sync { display: flex; flex-direction: column; gap: 12px; width: 100%; margin: 0; padding: 0; list-style: none; }
.etape-sync {
    position: relative;
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    border: 1px solid var(--blanc-alpha-niveau-2);
    border-radius: 12px;
    background: rgb(12 10 20 / .5);
    transition: border-color .35s ease, background-color .35s ease, transform .35s var(--ease-sortie);
}
.etape-sync.is-actif { border-color: rgb(196 181 253 / .55); background: rgb(30 22 46 / .9); transform: translateX(8px); }
.etape-sync__icone { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 10px; background: var(--violet-alpha); color: var(--violet); font-size: 1.25rem; transition: background-color .35s ease, color .35s ease; }
.etape-sync.is-actif .etape-sync__icone { background: var(--violet); color: var(--noir); }
.etape-sync__texte { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.etape-sync__num { font: 600 .6875rem/1 var(--police-tech); color: var(--gris); }
.etape-sync__texte strong { font: 700 1rem/1.25 var(--police); color: var(--blanc-casse); }
.etape-sync__texte small { font: 400 .8125rem/1.45 var(--police); color: var(--gris-clair); }

/* ==========================================================================
   Zone - LINK : Suivi De Commande
   ========================================================================== */
.suivi { position: relative; padding: 30px; }
.suivi__tete { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 15px 30px; padding-bottom: 24px; border-bottom: 1px solid var(--blanc-alpha-niveau-2); }
.suivi__commande { display: flex; flex-direction: column; gap: 10px; margin: 0; }
.suivi__numero { font: 500 .75rem/1.2 var(--police-tech); color: var(--gris); }
.suivi__titre { display: flex; align-items: center; gap: 10px; font: 700 1.125rem/1.3 var(--police); color: var(--blanc-casse); }
.suivi__titre i { color: var(--violet); font-size: 1.25rem; }
.suivi__etat { display: inline-flex; align-items: center; gap: 8px; margin: 0; padding: 7px 12px; border: 1px solid var(--etiquette-filet); border-radius: 999px; background: var(--etiquette-fond); font: 500 .75rem/1.2 var(--police-tech); color: var(--blanc-casse); }
.suivi__etat .vignette__voyant { background: var(--violet); box-shadow: 0 0 8px rgb(167 139 250 / .9); }
.suivi__etapes { position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 20px; margin: 0; padding: 36px 0 0; list-style: none; }
.suivi__rail { --avance: 1; position: absolute; left: 10%; right: 10%; top: 58px; z-index: 0; height: 2px; border-radius: 2px; background: rgb(255 255 255 / .08); }
.suivi__rempli { position: absolute; inset: 0; border-radius: inherit; transform: scaleX(var(--avance)); transform-origin: 0 50%; background: linear-gradient(90deg, var(--violet-fonce), #C4B5FD); box-shadow: 0 0 10px rgb(167 139 250 / .8); }
.suivi__mobile { position: absolute; left: calc(var(--avance) * 100%); top: 50%; width: 34px; translate: -50% -50%; }
.suivi__mobile .balle { width: 100%; }
.suivi__etape { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.suivi__noeud {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border: 1px solid var(--blanc-alpha-niveau-1);
    border-radius: 50%;
    background: var(--noir-niveau-1);
    color: var(--gris);
    font-size: 1.15rem;
    transition: background-color .4s ease, color .4s ease, border-color .4s ease, box-shadow .4s ease;
}
.suivi__etape.is-fait .suivi__noeud { border-color: transparent; background: var(--violet); color: var(--noir); box-shadow: 0 0 22px 2px rgb(167 139 250 / .7); }
.suivi__texte { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.suivi__texte strong { font: 700 .9375rem/1.25 var(--police); color: var(--blanc-casse); }
.suivi__texte small { max-width: 230px; font: 400 .8125rem/1.45 var(--police); color: var(--gris); }
.suivi__notes .specs-tech { justify-content: center; }
.suivi__rejouer { top: 14px; right: 14px; }
.suivi:hover .suivi__rejouer { opacity: 1; }
.qui--auto::before { background: var(--violet); box-shadow: 0 0 6px rgb(167 139 250 / .8); }

/* ==========================================================================
   Zone - LINK : La Carte Vierge
   ========================================================================== */
.attente { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 60px; }
.attente__scene { position: relative; display: grid; place-items: center; padding: 50px 0 70px; }
.attente__pile { position: relative; width: min(100%, 320px); }
.attente__carte { width: 100%; }
.attente__carte--photo,
.attente__carte--vierge { position: absolute; inset: 0; z-index: 2; visibility: hidden; }
.attente__carte--vierge { z-index: 3; }
.attente__carte--finale .card-visual { filter: drop-shadow(0 30px 50px rgb(0 0 0 / .6)); }
.attente__balayage { position: absolute; left: -4%; right: -4%; top: 0; z-index: 4; height: 2px; background: linear-gradient(90deg, transparent, #C4B5FD 20%, #FFFFFF 50%, #C4B5FD 80%, transparent); box-shadow: 0 0 14px 2px rgb(167 139 250 / .8); opacity: 0; pointer-events: none; }
.attente .vignette__etiquette > span { font-size: .75rem; }
.attente__reserve { left: 0; top: -40px; }
.attente__validee { left: 50%; bottom: -46px; translate: -50% 0; }
.attente__objet { position: absolute; left: calc(100% + 30px); top: 8%; z-index: 5; width: 20%; }
.attente__objet .balle { width: 100%; }
.attente__objet .objet__onde { width: 160%; margin: -80% 0 0 -80%; animation-duration: 2s; }

/* ==========================================================================
   Zone - Sports : Catalogue
   ========================================================================== */
.picto { display: block; width: 1em; height: 1em; }
/* Les panneaux partagent une même cellule : la hauteur ne bouge pas d'un sport à l'autre */
.catalogue { display: grid; grid-template-columns: minmax(0, 1fr); gap: 30px; }
.catalogue__onglets { position: relative; display: grid; grid-template-columns: repeat(var(--catalogue-colonnes, 8), minmax(0, 1fr)); gap: 15px; }
.catalogue .catalogue__onglet {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 15px 8px 12px;
    overflow: hidden;
    border: 1px solid var(--verre-filet);
    border-radius: var(--rayon);
    background: var(--verre);
    color: var(--gris-clair);
    font: 600 .875rem/1.2 var(--police);
    white-space: nowrap;
    cursor: pointer;
    transition: border-color .3s ease, background-color .3s ease, color .3s ease, transform .3s var(--ease-sortie);
}
.catalogue .catalogue__onglet:hover { border-color: rgb(255 255 255 / .28); background: var(--verre); color: var(--blanc-casse); }
.catalogue .catalogue__onglet.is-actif { border-color: rgb(255 255 255 / .5); background: var(--noir-niveau-1); color: var(--blanc-casse); transform: translateY(-4px); }
.catalogue .catalogue__onglet:focus-visible { outline: 2px solid var(--vert); outline-offset: 3px; }
.catalogue__picto { display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--rayon-imbrique); background: var(--noir-niveau-2); color: var(--gris-clair); font-size: 1.35rem; transition: background-color .3s ease, color .3s ease; }
.catalogue__onglet.is-actif .catalogue__picto { background: var(--vert); color: var(--noir); }
/* Écusson d'un sport lu dans l'appli : une image en couleur, pas une icône au trait */
.picto--ecusson { display: block; width: 1.5em; height: 1.5em; object-fit: contain; }
.catalogue__picto .picto--ecusson { width: 30px; height: 30px; }
.catalogue__onglet.is-actif .catalogue__picto:has(.picto--ecusson) { background: var(--noir-niveau-3); }
.catalogue__barre { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; }
.catalogue__barre span { display: block; width: 100%; height: 100%; transform: scaleX(0); transform-origin: 0 50%; background: linear-gradient(90deg, var(--vert), var(--violet)); }
.catalogue__panneau { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); grid-row: 2; grid-column: 1; align-items: center; gap: 60px; padding: 30px; }
.catalogue__panneau[hidden] { display: grid; visibility: hidden; }
.catalogue__scene { position: relative; display: grid; place-items: center; padding: 10px 0; perspective: 1400px; }
.catalogue__scene::before {
    content: '';
    position: absolute;
    inset: 8% 4%;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgb(165 204 0 / .18), transparent);
    filter: blur(14px);
    pointer-events: none;
}
.catalogue__scene img.catalogue__carte { position: relative; display: block; width: min(100%, 320px); height: auto; filter: drop-shadow(0 30px 44px rgb(0 0 0 / .6)); }
/* Sport sans carte de démonstration : son verso de l'appli, à la taille d'une carte */
.catalogue__verso { position: relative; width: min(100%, 320px); aspect-ratio: 720 / 1071; filter: drop-shadow(0 30px 44px rgb(0 0 0 / .6)); }
.catalogue__verso .carte-app,
.catalogue__verso .tc-card { width: 100%; max-width: none; height: 100%; }
.catalogue__verso .tc-card__back { box-sizing: border-box; height: 100%; }
.catalogue__fiche { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; min-width: 0; }
.catalogue__index { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0; font: 500 .75rem/1 var(--police-tech); color: var(--gris); }
.catalogue__gabarit { padding: 5px 9px; border: 1px solid var(--blanc-alpha-niveau-1); border-radius: 6px; background: rgb(12 14 16 / .35); color: var(--gris-clair); }
.catalogue__nom { margin: 0; font: 800 4.5rem/1 var(--police); letter-spacing: -.03em; color: var(--blanc-casse); }
.catalogue__slogan { margin: 0; font: 500 1.25rem/1.4 var(--police); color: var(--vert); }
.catalogue__categories { display: flex; flex-direction: column; gap: 12px; width: 100%; padding-top: 18px; border-top: 1px solid var(--blanc-alpha-niveau-2); }
.catalogue__categorie { display: grid; grid-template-columns: 64px minmax(0, 1fr); align-items: center; gap: 12px; }
.catalogue__cat-nom { margin: 0; font: 500 .75rem/1.2 var(--police-tech); color: var(--gris); }
.catalogue__elements { display: flex; flex-wrap: wrap; gap: 6px; }
.catalogue .catalogue__element {
    margin: 0;
    padding: 5px 10px;
    border: 1px solid var(--blanc-alpha-niveau-1);
    border-radius: 6px;
    background: rgb(12 14 16 / .35);
    color: var(--gris-clair);
    font: 500 .75rem/1.2 var(--police-tech);
    cursor: pointer;
    transition: border-color .25s ease, background-color .25s ease, color .25s ease;
}
.catalogue .catalogue__element:hover { background: rgb(255 255 255 / .06); color: var(--blanc-casse); }
.catalogue .catalogue__element.is-actif { border-color: rgb(165 204 0 / .6); background: var(--vert-alpha); color: var(--blanc-casse); }
.catalogue__ligne { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0; }
.catalogue__ligne-libelle { font: 500 .75rem/1.2 var(--police-tech); color: var(--gris); }
.catalogue__ligne-valeur {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 9px 14px;
    border: 1px dashed rgb(255 255 255 / .28);
    border-radius: var(--rayon-imbrique);
    font: 700 .875rem/1.2 var(--police);
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--blanc-casse);
}
.catalogue__ligne-valeur .picto,
.catalogue__ligne-valeur i { font-size: 1.1rem; color: var(--vert); }

/* ==========================================================================
   Zone - Sports : Vitrine Des Gabarits
   ========================================================================== */
.vitrine { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px; }
.vitrine__tuile { position: relative; display: flex; flex-direction: column; width: 100%; overflow: hidden; }
.vitrine__scene {
    position: relative;
    display: grid;
    place-items: center;
    padding: 45px 0 30px;
    overflow: hidden;
    border-bottom: 1px solid var(--blanc-alpha-niveau-2);
    background: radial-gradient(55% 55% at 50% 56%, rgb(165 204 0 / .14), transparent 72%), #101316;
}
.vitrine__scene::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgb(255 255 255 / .04) 1px, transparent 1px),
        linear-gradient(90deg, rgb(255 255 255 / .04) 1px, transparent 1px);
    background-size: 20px 20px;
    background-position: center;
    -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 30%, transparent 78%);
            mask-image: radial-gradient(circle at 50% 50%, #000 30%, transparent 78%);
    pointer-events: none;
}
.vitrine__index { position: absolute; left: 16px; top: 15px; z-index: 2; font: 500 .6875rem/1 var(--police-tech); color: var(--gris); }
.vitrine__scene img.vitrine__carte { position: relative; z-index: 1; display: block; width: 40%; height: auto; filter: drop-shadow(0 22px 30px rgb(0 0 0 / .6)); transition: rotate .5s var(--ease-sortie), translate .5s var(--ease-sortie); }
.vitrine__tuile:hover .vitrine__carte { rotate: -3deg; translate: 0 -6px; }
.vitrine__vide {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 40%;
    aspect-ratio: 720 / 1071;
    border: 1.5px dashed rgb(255 255 255 / .3);
    border-radius: var(--rayon-imbrique);
    background: rgb(255 255 255 / .02);
    font: 500 .75rem/1.2 var(--police-tech);
    color: var(--gris);
    text-align: center;
}
.vitrine__plus { display: grid; place-items: center; width: 36px; height: 36px; border: 1px dashed rgb(255 255 255 / .35); border-radius: 50%; font-size: 1.1rem; color: var(--vert); }
.vitrine__corps .public__lien { margin-top: auto; padding-top: 0; }
.vitrine__corps { display: flex; flex: 1; flex-direction: column; align-items: flex-start; gap: 15px; padding: 24px 24px 28px; }
.vitrine__texte { margin: 0; font: 400 .9375rem/1.55 var(--police); color: var(--gris-clair); }

/* ==========================================================================
   Zone - Sports : Versos
   ========================================================================== */
.versos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 30px; }
.verso-carte { display: flex; flex-direction: column; align-items: center; gap: 15px; margin: 0; perspective: 1200px; cursor: pointer; outline: none; -webkit-tap-highlight-color: transparent; }
.verso-carte__flip { position: relative; width: min(100%, 240px); aspect-ratio: 720 / 1071; transform-style: preserve-3d; transition: transform .8s var(--ease-sortie); }
.verso-carte.is-verso .verso-carte__flip { transform: rotateY(180deg); }
.js-anim .verso-carte.is-verso:not(.is-joue) .verso-carte__flip { transform: none; }
@media (hover: hover) and (pointer: fine) {
    .verso-carte.is-joue:hover .verso-carte__flip { transform: none; }
    .verso-carte.is-joue:not(.is-verso):hover .verso-carte__flip { transform: rotateY(180deg); }
}
.verso-carte:focus-visible .verso-carte__flip { outline: 2px solid var(--vert); outline-offset: 6px; border-radius: var(--rayon); }
.verso-carte__face { position: absolute; inset: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.verso-carte__face--dos { transform: rotateY(180deg); }
.verso-carte__face--recto img { display: block; width: 100%; height: 100%; max-width: none; object-fit: contain; filter: drop-shadow(0 22px 30px rgb(0 0 0 / .6)); }
.verso-carte__indice { display: inline-flex; align-items: center; gap: 6px; margin: 0; font: 500 .75rem/1.2 var(--police-tech); color: var(--gris); }
.verso-carte__indice i { font-size: .95rem; }
.verso-carte__face--dos .carte-app,
.verso-carte__face--dos .tc-card { width: 100%; max-width: none; height: 100%; }
.verso-carte__face--dos .tc-card__back { box-sizing: border-box; height: 100%; }
/* Verso sans recto à montrer : il reste de face, et ne se retourne pas */
.verso-carte--fixe { cursor: default; }
.verso-carte--fixe .verso-carte__flip,
.js-anim .verso-carte--fixe.is-verso:not(.is-joue) .verso-carte__flip { transform: rotateY(180deg); }
.verso-carte__nom { display: flex; align-items: center; gap: 8px; margin: 0; font: 700 1rem/1.2 var(--police); color: var(--blanc-casse); }
.verso-carte__nom .picto,
.verso-carte__nom i { font-size: 1.15rem; color: var(--vert); }
.versos__notes .specs-tech { justify-content: center; }

/* ==========================================================================
   Zone - Clubs : Visite De L'Espace Club
   ========================================================================== */
.visite { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); align-items: center; gap: 60px; }
.visite__liste { display: flex; flex-direction: column; gap: 8px; }
.visite .visite__item {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 15px;
    width: 100%;
    margin: 0;
    padding: 15px 18px 17px;
    overflow: hidden;
    border: 1px solid transparent;
    border-radius: var(--rayon);
    background: transparent;
    color: var(--gris-clair);
    font: inherit;
    text-align: left;
    white-space: normal;
    cursor: pointer;
    transition: border-color .3s ease, background-color .3s ease;
}
.visite .visite__item:hover { background: rgb(255 255 255 / .03); }
.visite .visite__item.is-actif { border-color: rgb(255 255 255 / .5); background: var(--noir-niveau-1); }
.visite .visite__item:focus-visible { outline: 2px solid var(--vert); outline-offset: 3px; }
.visite__item .pictogramme { width: 36px; height: 36px; font-size: 1.05rem; }
.visite__texte { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.visite__texte strong { font: 700 1rem/1.25 var(--police); color: var(--blanc-casse); }
.visite__texte small { font: 400 .875rem/1.45 var(--police); color: var(--gris); transition: color .3s ease; }
.visite__item.is-actif .visite__texte small { color: var(--gris-clair); }
.visite__barre { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; }
.visite__barre span { display: block; width: 100%; height: 100%; transform: scaleX(0); transform-origin: 0 50%; background: linear-gradient(90deg, var(--vert), var(--violet)); }

/* Fenêtre de l'application */
.ecran { container: ecran / inline-size; position: relative; overflow: hidden; border: 1px solid var(--verre-filet); border-radius: var(--rayon); background: #0C0E10; box-shadow: 0 40px 80px -30px rgb(0 0 0 / .85); }
.ecran__chrome { display: flex; align-items: center; gap: 12px; height: 34px; padding: 0 14px; border-bottom: 1px solid rgb(255 255 255 / .08); background: #14171A; }
.ecran__points { display: flex; gap: 6px; flex: none; }
.ecran__points i { width: 9px; height: 9px; border-radius: 50%; background: rgb(255 255 255 / .16); }
.ecran__url { display: flex; align-items: center; justify-content: center; gap: 6px; width: min(100%, 340px); height: 22px; margin: 0 auto; padding: 0 12px; border-radius: 999px; background: #0C0E10; font: 500 .6875rem/1 var(--police-tech); color: var(--gris); white-space: nowrap; overflow: hidden; }
.ecran__url i { font-size: .75rem; color: var(--gris-fonce); }
.ecran__app { position: relative; display: flex; flex-direction: column; background: radial-gradient(70% 60% at 50% 0%, rgb(165 204 0 / .07), transparent 70%), #0C0E10; }
.ecran__barre { display: flex; align-items: center; gap: 10px; height: 44px; padding: 0 14px; border-bottom: 1px solid rgb(255 255 255 / .08); }
.ecran__menu { display: grid; place-items: center; font-size: 1rem; color: var(--gris-clair); }
.ecran img.ecran__smory { display: block; width: auto; height: 15px; }
.ecran__x { font: 300 .875rem/1 var(--police); color: var(--gris-fonce); }
.ecran__club { display: grid; place-items: center; flex: none; width: 24px; height: 24px; padding: 2px; border-radius: 6px; background: #FFFFFF; }
.ecran__club img { display: block; width: 100%; height: 100%; object-fit: contain; }
.ecran__club-nom { font: 600 .8125rem/1 var(--police); color: var(--blanc-casse); white-space: nowrap; }
.ecran__profil { display: grid; place-items: center; flex: none; width: 26px; height: 26px; margin-left: auto; border: 1px solid rgb(255 255 255 / .12); border-radius: 50%; background: var(--noir-niveau-2); font: 600 .625rem/1 var(--police); color: var(--gris-clair); }
.ecran__onglets { display: flex; align-items: center; gap: 6px; height: 46px; padding: 0 14px; border-bottom: 1px solid rgb(255 255 255 / .08); }
.ecran__onglet {
    --zone: var(--vert);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 28px;
    padding: 0 12px;
    border: 1px solid transparent;
    border-radius: 999px;
    font: 550 .75rem/1 var(--police);
    color: var(--gris);
    white-space: nowrap;
    transition: background-color .3s ease, border-color .3s ease, color .3s ease;
}
.ecran__onglet--albums { --zone: var(--blanc-casse); }
.ecran__onglet--evenements { --zone: var(--orange); }
.ecran__onglet.is-actif { border-color: color-mix(in srgb, var(--zone) 42%, transparent); background: color-mix(in srgb, var(--zone) 13%, transparent); color: var(--zone); font-weight: 650; }
.ecran__actions { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.ecran__bouton { display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 12px; border-radius: 999px; font: 650 .75rem/1 var(--police); white-space: nowrap; }
.ecran__bouton--creer { background: var(--vert); color: var(--noir); }
.ecran__bouton--link { border: 1px solid rgb(167 139 250 / .45); background: rgb(167 139 250 / .12); color: var(--violet); }
.ecran__panier { position: relative; display: grid; place-items: center; flex: none; width: 28px; height: 28px; border: 1px solid rgb(255 255 255 / .12); border-radius: 50%; font-size: .8125rem; color: var(--gris-clair); }
.ecran__panier b { position: absolute; top: -4px; right: -4px; display: grid; place-items: center; min-width: 15px; height: 15px; padding: 0 3px; border-radius: 999px; background: var(--violet); font: 700 .5625rem/1 var(--police); color: #FFFFFF; }
.ecran__vues { position: relative; aspect-ratio: 16 / 9; overflow: hidden; }
.vue { position: absolute; inset: 0; padding: 18px 20px; visibility: hidden; }
.vue.is-actif { visibility: visible; }
.vue.is-entree { visibility: visible; z-index: 1; }

/* Commun aux vues */
.ecran :is(.va__item, .vc__carte, .vd__carte) > img { display: block; max-width: none; height: auto; }
.vue__titre { margin: 0; font: 700 1rem/1.2 var(--police); color: var(--blanc-casse); }
.vue__puce { display: inline-flex; align-items: center; gap: 4px; padding: 3px 7px; border-radius: 999px; font: 600 .5625rem/1 var(--police); white-space: nowrap; }

/* Vue - Accueil : compteurs et arc */
.va { display: flex; flex-direction: column; gap: 12px; height: 100%; }
.va__titres { display: flex; flex-direction: column; gap: 4px; }
.va__titres small { font: 400 .6875rem/1.3 var(--police); color: var(--gris); }
.va__compteurs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.va__compteur { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 10px 12px; border: 1px solid rgb(255 255 255 / .1); border-radius: 10px; background: rgb(20 23 26 / .7); }
.va__icone { display: grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 8px; background: var(--noir-niveau-2); font-size: .875rem; color: var(--gris-clair); }
.va__icone--vert { background: var(--vert-alpha); color: var(--vert); }
.va__icone--violet { background: var(--violet-alpha); color: var(--violet); }
.va__libelles { display: flex; flex: 1; flex-direction: column; gap: 3px; min-width: 0; }
.va__libelles b { font: 650 .75rem/1.1 var(--police); color: var(--blanc-casse); }
.va__libelles small { font: 400 .625rem/1.2 var(--police); color: var(--gris); }
.va__parts { display: flex; gap: 4px; }
.va__parts span { padding: 2px 6px; border: 1px solid rgb(255 255 255 / .1); border-radius: 999px; font: 500 .5625rem/1.2 var(--police); color: var(--gris-clair); white-space: nowrap; }
.va__parts .va__part-link { border-color: rgb(167 139 250 / .35); color: var(--violet); }
.va__valeur { font: 800 1.375rem/1 var(--police); color: var(--blanc-casse); }
.va__valeur--vert { color: var(--vert); }
.va__arc { position: relative; flex: 1; min-height: 0; perspective: 900px; }
.va__item { position: absolute; left: 50%; top: 50%; width: 21%; aspect-ratio: 720 / 1071; translate: -50% -50%; transform-style: preserve-3d; }
.va__item img { width: 100%; filter: drop-shadow(0 14px 18px rgb(0 0 0 / .55)); }
.va__item .carte-app, .va__item .tc-card { width: 100%; max-width: none; }
.va__item--c  { z-index: 3; }
.va__item--g1 { z-index: 2; transform: translateX(-88%) rotateY(28deg) scale(.86); }
.va__item--d1 { z-index: 2; transform: translateX(88%) rotateY(-28deg) scale(.86); }
.va__item--g2 { z-index: 1; transform: translateX(-160%) rotateY(42deg) scale(.72); }
.va__item--d2 { z-index: 1; transform: translateX(160%) rotateY(-42deg) scale(.72); }
.va__item--g3 { z-index: 0; transform: translateX(-222%) rotateY(52deg) scale(.6); }
.va__item--d3 { z-index: 0; transform: translateX(222%) rotateY(-52deg) scale(.6); }
.va__tuile { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 10px; border: 1px solid rgb(255 255 255 / .16); border-radius: 10px; background: linear-gradient(160deg, rgb(165 204 0 / .16), transparent 60%), #14171A; text-align: center; box-shadow: 0 14px 22px -10px rgb(0 0 0 / .6); }
.va__tuile--link { background: linear-gradient(160deg, rgb(167 139 250 / .24), transparent 60%), #14171A; }
.va__tuile i { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--vert-alpha); font-size: 1rem; color: var(--vert); }
.va__tuile--link i { background: var(--violet-alpha); color: var(--violet); }
.va__tuile b { font: 700 .6875rem/1.2 var(--police); color: var(--blanc-casse); }
.va__tuile small { padding: 4px 9px; border-radius: 999px; background: var(--vert); font: 700 .5625rem/1 var(--police); color: var(--noir); }
.va__tuile--link small { background: var(--violet-fonce); color: #FFFFFF; }
.va__pied { display: flex; align-items: center; justify-content: center; gap: 12px; }
.va__fleche { display: grid; place-items: center; width: 24px; height: 24px; border: 1px solid rgb(255 255 255 / .14); border-radius: 50%; font-size: .875rem; color: var(--gris-clair); }
.va__compte { font: 500 .6875rem/1 var(--police-tech); color: var(--gris); }
.va__indice { display: inline-flex; align-items: center; align-self: center; gap: 6px; margin: 0; padding: 5px 11px; border: 1px solid rgb(255 255 255 / .1); border-radius: 999px; background: rgb(20 23 26 / .7); font: 500 .625rem/1 var(--police); color: var(--gris-clair); }

/* Vue - Mes cartes : états et grille */
.vc { display: flex; flex-direction: column; gap: 12px; height: 100%; }
.vc__tete { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.vc__recherche { display: inline-flex; align-items: center; gap: 6px; width: 38%; height: 28px; padding: 0 10px; border: 1px solid rgb(255 255 255 / .12); border-radius: 8px; background: var(--noir-niveau-1); font: 400 .6875rem/1 var(--police); color: var(--gris-fonce); white-space: nowrap; overflow: hidden; }
.vc__corps { display: grid; grid-template-columns: minmax(0, 30%) minmax(0, 1fr); gap: 14px; flex: 1; min-height: 0; }
.vc__etats { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 14px; border: 1px solid rgb(255 255 255 / .1); border-radius: 12px; background: rgb(20 23 26 / .7); }
.vc__etats-titre { align-self: flex-start; margin: 0; font: 650 .75rem/1 var(--police); color: var(--blanc-casse); }
.vc__anneau { --fin: 67; --cours: 22; position: relative; display: grid; place-items: center; align-content: center; width: 46%; aspect-ratio: 1; border-radius: 50%; background: conic-gradient(var(--vert) 0 calc(var(--fin) * 1%), var(--orange) 0 calc((var(--fin) + var(--cours)) * 1%), rgb(255 255 255 / .2) 0); }
.vc__anneau::before { content: ''; position: absolute; inset: 14%; border-radius: 50%; background: #14171A; }
.vc__anneau b, .vc__anneau small { position: relative; }
.vc__anneau b { font: 800 1.25rem/1 var(--police); color: var(--blanc-casse); }
.vc__anneau small { font: 400 .5625rem/1.3 var(--police); color: var(--gris); }
.vc__liste { display: flex; flex-direction: column; gap: 9px; width: 100%; margin: 0; padding: 0; list-style: none; }
.vc__etat { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 4px 7px; font: 500 .6875rem/1 var(--police); color: var(--gris-clair); }
.vc__etat b { font: 700 .6875rem/1 var(--police); color: var(--blanc-casse); }
.vc__point { width: 7px; height: 7px; border-radius: 50%; background: var(--c, var(--vert)); }
.vc__etat--cours { --c: var(--orange); }
.vc__etat--vierge { --c: rgb(255 255 255 / .45); }
.vc__jauge { grid-column: 1 / -1; height: 4px; overflow: hidden; border-radius: 999px; background: rgb(255 255 255 / .08); }
.vc__jauge span { display: block; width: 100%; height: 100%; transform: scaleX(var(--p, 0)); transform-origin: 0 50%; border-radius: inherit; background: var(--c, var(--vert)); }
.vc__grille { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); align-content: start; gap: 14px 12px; min-height: 0; }
.vc__carte { position: relative; display: block; }
.vc__carte img { width: 100%; filter: drop-shadow(0 8px 12px rgb(0 0 0 / .5)); }
.vc__carte .carte-app, .vc__carte .tc-card { width: 100%; max-width: none; }
.vc__marque { position: absolute; left: 50%; top: -7px; z-index: 2; translate: -50% 0; }
.vc__marque--nouveau { background: var(--vert); color: var(--noir); }
.vc__marque--link { background: var(--violet-fonce); color: #FFFFFF; }
.vc__aime { position: absolute; right: 6%; bottom: -7px; z-index: 2; border: 1px solid rgb(255 255 255 / .14); background: #14171A; color: var(--blanc-casse); }
.vc__aime i { color: #F26B7E; }
.vc__grille .vc__carte:nth-child(n+9) { display: none; }

/* Vue - Une carte : le détail en cinq étapes */
.vd { display: grid; place-items: center; height: 100%; }
.vd__fenetre { display: flex; flex-direction: column; width: 88%; max-height: 100%; overflow: hidden; border: 1px solid rgb(255 255 255 / .14); border-radius: 14px; background: #14171A; box-shadow: 0 24px 50px -20px rgb(0 0 0 / .8); }
.vd__tete { display: flex; align-items: center; gap: 6px; padding: 10px 14px; border-bottom: 1px solid rgb(255 255 255 / .08); }
.vd__badge { border: 1px solid rgb(255 255 255 / .14); color: var(--gris-clair); }
.vd__badge--fin { border-color: rgb(165 204 0 / .45); background: var(--vert-alpha); color: var(--vert); }
.vd__lien { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; font: 600 .625rem/1 var(--police); color: var(--gris-clair); }
.vd__fermer { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--noir-niveau-2); font-size: .75rem; color: var(--gris-clair); }
.vd__corps { display: grid; grid-template-columns: minmax(0, 32%) minmax(0, 1fr); align-items: center; gap: 22px; padding: 16px 20px 18px; }
.vd__carte .carte-app, .vd__carte .tc-card { width: 100%; max-width: none; }
.vd__etapes { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }
.vd__etape { display: flex; align-items: flex-start; gap: 9px; }
.vd__num { display: grid; place-items: center; flex: none; width: 20px; height: 20px; border: 1px solid rgb(255 255 255 / .18); border-radius: 50%; font: 700 .5625rem/1 var(--police); color: var(--gris-clair); }
.vd__etape.is-fait .vd__num { border-color: transparent; background: var(--vert); color: var(--noir); font-size: .6875rem; }
.vd__etape.is-actif .vd__num { border-color: var(--vert); color: var(--vert); }
.vd__textes { display: flex; flex: 1; flex-direction: column; gap: 3px; min-width: 0; }
.vd__textes b { font: 650 .6875rem/1.2 var(--police); color: var(--blanc-casse); }
.vd__textes small { font: 400 .625rem/1.3 var(--police); color: var(--gris); }
.vd__form { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; padding: 10px; border: 1px solid rgb(255 255 255 / .1); border-radius: 10px; background: #0C0E10; }
.vd__choix { display: inline-flex; align-self: flex-start; padding: 2px; border-radius: 999px; background: var(--noir-niveau-2); }
.vd__choix span { padding: 4px 10px; border-radius: 999px; font: 600 .5625rem/1 var(--police); color: var(--gris); }
.vd__choix .is-actif { background: var(--noir-niveau-3); color: var(--blanc-casse); }
.vd__champ { display: flex; align-items: center; gap: 6px; height: 24px; padding: 0 8px; border: 1px solid rgb(255 255 255 / .12); border-radius: 6px; background: var(--noir-niveau-1); font: 400 .625rem/1 var(--police); color: var(--gris-clair); }
.vd__champ i { color: var(--gris); }
.vd__case { display: flex; align-items: flex-start; gap: 6px; font: 400 .5625rem/1.35 var(--police); color: var(--gris); }
.vd__case i { flex: none; font-size: .75rem; color: var(--vert); }
.vd__envoyer { display: inline-flex; align-items: center; justify-content: center; gap: 5px; height: 26px; border-radius: 999px; background: var(--vert); font: 700 .625rem/1 var(--police); color: var(--noir); }

/* Vue - Mes événements : le mur de sachets */
.ve { display: grid; grid-template-columns: minmax(0, 24%) minmax(0, 1fr); gap: 16px; height: 100%; }
.ve__panneau { display: flex; flex-direction: column; gap: 7px; padding: 14px; border: 1px solid rgb(255 255 255 / .1); border-radius: 12px; background: rgb(20 23 26 / .7); }
.ve__titre-panneau { margin: 6px 0 2px; font: 500 .5625rem/1 var(--police-tech); color: var(--gris); }
.ve__titre-panneau:first-child { margin-top: 0; }
.ve__filtre { display: flex; align-items: center; justify-content: space-between; padding: 6px 9px; border: 1px solid transparent; border-radius: 8px; font: 550 .6875rem/1 var(--police); color: var(--gris-clair); }
.ve__filtre.is-actif { border-color: rgb(240 167 60 / .4); background: rgb(240 167 60 / .1); color: var(--orange); }
.ve__filtre b { font-weight: 700; }
.ve__sorte { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 2px 7px; }
.ve__sorte b { font: 650 .6875rem/1.2 var(--police); color: var(--blanc-casse); }
.ve__sorte small { grid-column: 2; font: 400 .5625rem/1.3 var(--police); color: var(--gris); }
.ve__point { width: 7px; height: 7px; border-radius: 50%; background: rgb(255 255 255 / .55); }
.ve__point--certifie { background: var(--orange); }
.ve__principal { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.ve__groupe { margin: 2px 0 0; font: 600 .6875rem/1 var(--police); color: var(--gris-clair); }
.ve__tete { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ve__demande { display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 11px; border: 1px solid rgb(240 167 60 / .5); border-radius: 999px; font: 650 .625rem/1 var(--police); color: var(--orange); white-space: nowrap; }
.ve__mur { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.ve__tuile { display: flex; flex-direction: column; gap: 5px; min-width: 0; padding: 10px; border: 1px solid rgb(255 255 255 / .1); border-radius: 12px; background: rgb(20 23 26 / .7); }
.ve__sachet { display: flex; align-items: center; justify-content: center; height: 84px; padding: 6px 0; overflow: hidden; border-radius: 8px; background: radial-gradient(60% 70% at 50% 50%, rgb(255 255 255 / .06), transparent 70%); }
.ecran .ve__sachet img { display: block; width: auto; max-width: none; height: 100%; filter: drop-shadow(0 6px 8px rgb(0 0 0 / .5)); }
.ecran .ve__sachet--verso img { aspect-ratio: 650 / 1000; object-fit: cover; border-radius: 5px; }
.ve__cat { align-self: flex-start; border: 1px solid rgb(255 255 255 / .14); color: var(--gris-clair); }
.ve__cat--certifie { border-color: rgb(240 167 60 / .5); background: rgb(240 167 60 / .12); color: var(--orange); }
.ve__nom { overflow: hidden; font: 700 .6875rem/1.2 var(--police); color: var(--blanc-casse); white-space: nowrap; text-overflow: ellipsis; }
.ve__date { font: 500 .5625rem/1 var(--police-tech); color: var(--gris); }
.ve__barre { display: flex; height: 4px; overflow: hidden; border-radius: 999px; background: rgb(255 255 255 / .1); }
.ve__barre span { flex: none; width: calc(var(--p, 0) * 100%); height: 100%; }
.ve__fin { background: var(--vert); }
.ve__cours { background: var(--orange); }
.ve__legende { font: 400 .5625rem/1.35 var(--police); color: var(--gris); }
.ve__legende b { color: var(--violet); font-weight: 600; }

/* Vue - Mes albums : le classeur */
.vb { display: grid; grid-template-columns: minmax(0, 26%) minmax(0, 1fr); gap: 16px; height: 100%; }
.vb__panneau { display: flex; flex-direction: column; gap: 5px; padding: 12px; border: 1px solid rgb(255 255 255 / .1); border-radius: 12px; background: rgb(20 23 26 / .7); }
.vb__titre-panneau { margin: 8px 0 2px; font: 500 .5625rem/1 var(--police-tech); color: var(--gris); }
.vb__ligne { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 7px; padding: 6px 8px; border: 1px solid transparent; border-radius: 8px; font: 550 .6875rem/1.1 var(--police); color: var(--gris-clair); }
.vb__ligne span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.vb__ligne b { font: 600 .625rem/1 var(--police-tech); color: var(--gris); }
.vb__ligne.is-actif { border-color: rgb(255 255 255 / .35); background: rgb(255 255 255 / .06); color: var(--blanc-casse); }
.vb__nouveau { display: inline-flex; align-items: center; justify-content: center; gap: 5px; margin-top: auto; height: 26px; border: 1px dashed rgb(255 255 255 / .25); border-radius: 8px; font: 600 .625rem/1 var(--police); color: var(--gris-clair); }
.vb__classeur { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.vb__tete { display: flex; align-items: center; gap: 10px; }
.vb__noms { display: flex; flex: 1; flex-direction: column; gap: 3px; min-width: 0; }
.vb__noms small { font: 400 .625rem/1.2 var(--police); color: var(--gris); }
.vb__public { display: inline-flex; align-items: center; gap: 6px; font: 600 .625rem/1 var(--police); color: var(--gris-clair); white-space: nowrap; }
.vb__interrupteur { position: relative; width: 26px; height: 15px; border-radius: 999px; background: var(--vert); }
.vb__interrupteur::after { content: ''; position: absolute; top: 2px; right: 2px; width: 11px; height: 11px; border-radius: 50%; background: var(--noir); }
.vb__copier { display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 10px; border: 1px solid rgb(255 255 255 / .14); border-radius: 999px; font: 600 .625rem/1 var(--police); color: var(--blanc-casse); white-space: nowrap; }
.vb__grille { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); align-content: start; gap: 12px; }
.vb__poche { position: relative; display: block; aspect-ratio: 25 / 36; border-radius: 8px; background: rgb(255 255 255 / .04); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .08); }
.vb__carte { position: absolute; left: 5%; bottom: 0; width: 90%; margin-bottom: 5%; }
.vb__carte .carte-app, .vb__carte .tc-card { width: 100%; max-width: none; }
.vb__poche--vide { display: grid; place-items: center; box-shadow: inset 0 0 0 1px rgb(255 255 255 / .1); background: transparent; border: 1px dashed rgb(255 255 255 / .16); font-size: .875rem; color: var(--gris-fonce); }

/* Vue - LINK™ : catalogue et panier */
.vl { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 30%); gap: 16px; height: 100%; }
.vl__catalogue { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.vl__tete { display: flex; flex-direction: column; gap: 5px; }
.vl__tete small { font: 400 .625rem/1.35 var(--police); color: var(--gris); }
.vl__produits { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; gap: 12px; }
.vl__produit { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 10px; border: 1px solid rgb(167 139 250 / .2); border-radius: 12px; background: rgb(30 22 46 / .55); text-align: center; }
.vl__visuel { display: grid; place-items: center; width: 100%; aspect-ratio: 4 / 3; }
.vl__visuel .balle { width: 44%; }
.vl__visuel svg { width: 62%; height: auto; max-height: 100%; }
.vl__produit--trophee .vl__visuel svg { width: 40%; }
.vl__produits--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.vl__produits--1 { grid-template-columns: minmax(0, 1fr); }
.vl__produits--2 .vl__visuel, .vl__produits--1 .vl__visuel { aspect-ratio: 16 / 9; }
.vl__photo { display: block; width: 78%; height: auto; max-height: 100%; object-fit: contain; border-radius: 4px; }
.vl__picto { font-size: 1.75rem; line-height: 1; color: var(--violet); }
.vl__produit b { font: 700 .75rem/1.2 var(--police); color: var(--blanc-casse); }
.vl__produit small { font: 400 .5625rem/1.3 var(--police); color: var(--gris); }
.vl__info { display: flex; align-items: center; gap: 8px; margin: 0; padding: 10px 12px; border: 1px solid rgb(167 139 250 / .25); border-radius: 10px; background: rgb(167 139 250 / .07); font: 500 .6875rem/1.35 var(--police); color: var(--blanc-casse); }
.vl__info i { font-size: .9rem; color: var(--violet); }
.vl__ajouter { display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 10px; border-radius: 999px; background: var(--violet-fonce); font: 650 .5625rem/1 var(--police); color: #FFFFFF; }
.vl__panier { display: flex; flex-direction: column; gap: 8px; padding: 14px; border: 1px solid rgb(255 255 255 / .1); border-radius: 12px; background: rgb(20 23 26 / .75); }
.vl__panier-titre { display: flex; align-items: center; gap: 6px; margin: 0; font: 650 .75rem/1 var(--police); color: var(--blanc-casse); }
.vl__ligne { display: flex; align-items: center; gap: 6px; padding-bottom: 7px; border-bottom: 1px solid rgb(255 255 255 / .08); font: 500 .6875rem/1.2 var(--police); color: var(--gris-clair); }
.vl__ligne b { display: grid; place-items: center; min-width: 20px; height: 20px; border-radius: 6px; background: var(--violet-alpha); font: 700 .625rem/1 var(--police); color: var(--violet); }
.vl__note { padding: 7px 8px; border: 1px solid rgb(255 255 255 / .1); border-radius: 6px; font: 400 .5625rem/1.3 var(--police); color: var(--gris-fonce); }
.vl__envoyer { display: inline-flex; align-items: center; justify-content: center; height: 26px; border-radius: 999px; background: var(--violet-fonce); font: 650 .625rem/1 var(--police); color: #FFFFFF; }
.vl__etat { display: flex; align-items: center; gap: 6px; margin-top: auto; padding: 7px 8px; border: 1px solid rgb(167 139 250 / .3); border-radius: 8px; background: rgb(167 139 250 / .08); font: 500 .5625rem/1.3 var(--police-tech); color: var(--blanc-casse); }

/* Entrées des vues : transformations seulement, jamais de fondu sur une carte */
@keyframes vue-pop { from { scale: .82; } to { scale: 1; } }
@keyframes vue-monte { from { translate: 0 12px; } to { translate: 0 0; } }
@keyframes vue-jauge { from { transform: scaleX(0); } }
@keyframes vue-barre { from { width: 0; } }
.js-anim .vue.is-actif .va__item,
.js-anim .vue.is-actif .vc__carte,
.js-anim .vue.is-actif .vb__carte { animation: vue-pop .7s var(--ease-sortie) both; }
.js-anim .vue.is-actif .va__item--g1, .js-anim .vue.is-actif .va__item--d1 { animation-delay: .08s; }
.js-anim .vue.is-actif .va__item--g2, .js-anim .vue.is-actif .va__item--d2 { animation-delay: .16s; }
.js-anim .vue.is-actif .va__item--g3, .js-anim .vue.is-actif .va__item--d3 { animation-delay: .24s; }
.js-anim .vue.is-actif .vc__carte:nth-child(2), .js-anim .vue.is-actif .vb__poche:nth-child(2) .vb__carte { animation-delay: .06s; }
.js-anim .vue.is-actif .vc__carte:nth-child(3), .js-anim .vue.is-actif .vb__poche:nth-child(3) .vb__carte { animation-delay: .12s; }
.js-anim .vue.is-actif .vc__carte:nth-child(4), .js-anim .vue.is-actif .vb__poche:nth-child(4) .vb__carte { animation-delay: .18s; }
.js-anim .vue.is-actif .vb__poche:nth-child(5) .vb__carte { animation-delay: .24s; }
.js-anim .vue.is-actif .vc__jauge span { animation: vue-jauge 1s var(--ease-sortie) .2s both; }
.js-anim .vue.is-actif .ve__barre span { animation: vue-barre 1s var(--ease-sortie) .25s both; }
.js-anim .vue.is-actif .vd__etape,
.js-anim .vue.is-actif .ve__tuile,
.js-anim .vue.is-actif .vl__produit,
.js-anim .vue.is-actif .vl__ligne { animation: vue-monte .6s var(--ease-sortie) both; }
.js-anim .vue.is-actif .vd__etape:nth-child(2), .js-anim .vue.is-actif .ve__tuile:nth-child(2), .js-anim .vue.is-actif .vl__produit:nth-child(2) { animation-delay: .06s; }
.js-anim .vue.is-actif .vd__etape:nth-child(3), .js-anim .vue.is-actif .ve__tuile:nth-child(3), .js-anim .vue.is-actif .vl__produit:nth-child(3) { animation-delay: .12s; }
.js-anim .vue.is-actif .vd__etape:nth-child(4), .js-anim .vue.is-actif .ve__tuile:nth-child(4) { animation-delay: .18s; }
.js-anim .vue.is-actif .vd__etape:nth-child(5) { animation-delay: .24s; }

/* La fenêtre se resserre avec sa largeur */
@container ecran (max-width: 720px) {
    .ecran__club-nom, .ecran__bouton--link span, .ecran__bouton--creer span { display: none; }
    .ecran__bouton { padding: 0 8px; }
    .ve { grid-template-columns: minmax(0, 1fr); }
    .ve__panneau { display: none; }
    .vb { grid-template-columns: minmax(0, 1fr); }
    .vb__panneau { display: none; }
    .vc__corps { grid-template-columns: minmax(0, 34%) minmax(0, 1fr); }
    .vc__grille { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .vc__grille .vc__carte:nth-child(n+7) { display: none; }
}
@container ecran (max-width: 520px) {
    .ecran__chrome { height: 28px; }
    .ecran__url { height: 18px; font-size: .5625rem; }
    .ecran__barre { height: 36px; gap: 7px; padding: 0 10px; }
    .ecran__onglets { height: 38px; gap: 4px; padding: 0 10px; }
    .ecran__onglet { gap: 0; padding: 0 8px; font-size: 0; }
    .ecran__onglet i { font-size: .8125rem; }
    .ecran__onglet.is-actif { gap: 5px; font-size: .625rem; }
    .ecran__panier, .ecran__bouton--link { display: none; }
    .ecran__vues { aspect-ratio: 4 / 5; }
    .vue { padding: 12px; }
    .va__compteurs { grid-template-columns: minmax(0, 1fr); gap: 6px; }
    .va__compteur { padding: 7px 9px; }
    .va__compteur:nth-child(n+2) { display: none; }
    .va__item { width: 34%; }
    .va__item--g2, .va__item--d2 { display: none; }
    .va__item--g1 { transform: translateX(-82%) rotateY(28deg) scale(.84); }
    .va__item--d1 { transform: translateX(82%) rotateY(-28deg) scale(.84); }
    .vc__recherche { display: none; }
    .vc__corps { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
    .vc__etats { flex-direction: row; gap: 10px; padding: 9px; }
    .vc__etats-titre { display: none; }
    .vc__anneau { width: 56px; flex: none; }
    .vc__grille { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding: 0 12%; }
    .vc__grille .vc__carte:nth-child(n+3) { display: none; }
    .vd__fenetre { width: 100%; }
    .vd__tete { padding: 8px 10px; }
    .vd__lien span { display: none; }
    .vd__corps { grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 12px; }
    .vd__carte { display: none; }
    .vd__etape:not(.is-actif) small { display: none; }
    .ve__mur { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    .ve__mur .ve__tuile:nth-child(n+3),
    .ve__groupe ~ .ve__groupe,
    .ve__groupe ~ .ve__groupe + .ve__mur { display: none; }
    .ve__sachet { height: 70px; }
    .ve__demande span { display: none; }
    .vb__copier span, .vb__public span:last-child { display: none; }
    .vb__grille { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
    .vb__poche:nth-child(n+7) { display: none; }
    .vl { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; }
    .vl__tete small { display: none; }
    .vl__produit small { display: none; }
    .vl__note, .vl__etat, .vl__info { display: none; }
}

/* ==========================================================================
   Zone - Clubs : Tournois Certifiés
   ========================================================================== */
.certif { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: center; gap: 60px; }
.certif__visuel { position: relative; aspect-ratio: 5 / 4; }
.certif__carte { position: absolute; left: 50%; top: 52%; width: 36%; translate: -50% -50%; }
.certif__carte .carte-app, .certif__carte .tc-card { width: 100%; max-width: none; }
.certif__etiquette--badge { left: 69%; top: 22%; }
.certif__etiquette--mention { right: 69%; top: 70%; flex-direction: row-reverse; }
.certif__etiquette--effet { right: 69%; top: 38%; flex-direction: row-reverse; }
.comparatif { width: 100%; margin: 0; table-layout: fixed; border-collapse: separate; border-spacing: 0; overflow: hidden; border: 1px solid var(--verre-filet); border-radius: var(--rayon); background: var(--verre); font-size: 1rem; }
.comparatif th, .comparatif td { padding: 16px 20px; border: 0; border-bottom: 1px solid var(--blanc-alpha-niveau-2); background: none; text-align: left; vertical-align: top; }
.comparatif td, .comparatif thead th + th { border-left: 1px solid var(--blanc-alpha-niveau-2); }
.comparatif tbody > tr:nth-child(odd) > td, .comparatif tbody > tr:nth-child(odd) > th, .comparatif tbody tr:hover > td, .comparatif tbody tr:hover > th { background: none; }
.comparatif tr:last-child > * { border-bottom: 0; }
.comparatif thead th { padding-top: 18px; padding-bottom: 18px; font: 700 1rem/1.2 var(--police); color: var(--blanc-casse); }
.comparatif thead th:first-child { width: 30%; }
.comparatif__col { display: inline-flex; align-items: center; gap: 9px; }
.comparatif__col::before { content: ''; width: 9px; height: 9px; border-radius: 50%; background: rgb(255 255 255 / .55); }
.comparatif__col--certifie::before { background: var(--orange); box-shadow: 0 0 10px 1px rgb(240 167 60 / .6); }
.comparatif tbody th { font: 500 .75rem/1.4 var(--police-tech); color: var(--gris); }
.comparatif td { font: 400 .9375rem/1.45 var(--police); color: var(--gris-clair); overflow-wrap: break-word; }
.comparatif td:nth-child(2) { color: var(--blanc-casse); }
.comparatif td i { margin-right: 6px; font-size: 1rem; vertical-align: -2px; }
.comparatif .ri-check-line { color: var(--orange); }
.comparatif .ri-close-line { color: var(--gris-fonce); }

/* ==========================================================================
   Zone - Clubs : Ouvrir Son Espace
   ========================================================================== */
.etapes-sync--vert .etape-sync { background: rgb(12 14 16 / .45); }
.etapes-sync--vert .etape-sync.is-actif { border-color: rgb(165 204 0 / .55); background: var(--noir-niveau-1); }
.etapes-sync--vert .etape-sync__icone { background: var(--vert-alpha); color: var(--vert); }
.etapes-sync--vert .etape-sync.is-actif .etape-sync__icone { background: var(--vert); color: var(--noir); }
.inscription { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); align-items: center; gap: 60px; }
.inscription__scene { container-type: inline-size; position: relative; padding: 30px 0 46px; }
.inscription__fiche { display: flex; flex-direction: column; gap: 14px; width: min(100%, 520px); margin: 0 auto; padding: 26px; background: #14171A; }
.inscription__tete { display: flex; flex-direction: column; gap: 4px; }
.inscription__titre { margin: 0; font: 700 1.25rem/1.2 var(--police); color: var(--blanc-casse); }
.inscription__sous-titre { margin: 0; font: 400 .8125rem/1.4 var(--police); color: var(--gris); }
.inscription__pas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; padding: 3px; border: 1px solid var(--blanc-alpha-niveau-1); border-radius: 999px; background: rgb(255 255 255 / .03); }
.inscription__pas span { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 7px 0; border-radius: 999px; font: 600 .75rem/1.2 var(--police); color: var(--gris); }
.inscription__pas i { display: none; }
.inscription__pas .is-fait { color: var(--gris-clair); }
.inscription__pas .is-fait i { display: inline; color: var(--vert); }
.inscription__pas .is-actif { background: var(--vert); color: var(--noir); }
.inscription__aide { margin: 0; font: 400 .75rem/1.45 var(--police); color: var(--gris); }
.inscription__champs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.inscription__champ { display: flex; flex-direction: column; gap: 6px; grid-column: 1 / -1; min-width: 0; }
.inscription__champ--demi { grid-column: auto; }
.inscription__libelle { font: 500 .6875rem/1.2 var(--police-tech); letter-spacing: .04em; text-transform: uppercase; color: var(--gris); }
.inscription__valeur {
    display: flex;
    align-items: center;
    gap: 6px;
    min-height: 36px;
    padding: 0 12px;
    overflow: hidden;
    border: 1px solid var(--blanc-alpha-niveau-1);
    border-radius: 4px;
    background: rgb(255 255 255 / .03);
    font: 500 .875rem/1.2 var(--police);
    color: var(--blanc-casse);
    white-space: nowrap;
}
.inscription__valeur i { color: var(--gris-clair); }
.inscription__valeur.is-saisie .evt__caret { display: inline-block; }
.inscription__indice { margin-left: auto; padding: 3px 7px; border-radius: 999px; background: var(--vert-alpha); font: 500 .625rem/1 var(--police-tech); color: var(--vert); }
.inscription__vide { color: var(--gris-fonce); }
.inscription__bouton { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 40px; border-radius: 999px; background: var(--vert); font: 700 .875rem/1 var(--police); color: var(--noir); }
.inscription__etat { left: 50%; bottom: 0; translate: -50% 0; }
.inscription__valide { right: 6%; top: 14px; }
.inscription__cta { display: flex; margin-top: 30px; }

/* ==========================================================================
   Zone - Organisateurs : Au Calendrier
   ========================================================================== */
.calendrier { container-type: inline-size; position: relative; padding: 0 0 40px; }
.calendrier__fenetre { display: flex; flex-direction: column; gap: 20px; padding: 28px; background: #14171A; }
.calendrier__acte { margin: 0; font: 500 .6875rem/1 var(--police-tech); color: var(--gris); }
.calendrier__question { display: flex; flex-direction: column; gap: 10px; }
.calendrier__ask { margin: 0; font: 700 1.0625rem/1.3 var(--police); color: var(--blanc-casse); }
.calendrier__aide { margin: 0; font: 400 .8125rem/1.45 var(--police); color: var(--gris); }
.calendrier__resume { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0; padding-bottom: 18px; border-bottom: 1px solid var(--blanc-alpha-niveau-2); font: 500 .8125rem/1.2 var(--police); color: var(--gris-clair); }
.calendrier__reponse { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: var(--orange); font: 700 .8125rem/1 var(--police); color: var(--noir); }
.calendrier__reponse--club { border: 1px solid rgb(255 255 255 / .3); background: var(--noir-niveau-2); color: var(--blanc-casse); }
.calendrier__resultat--creer .calendrier__titre { font-weight: 500; color: var(--gris-clair); }
.calendrier__resultat--creer .calendrier__titre i { color: var(--vert); }
.calendrier__resultat--creer strong { color: var(--blanc-casse); }
.calendrier__champ { display: flex; align-items: center; gap: 8px; min-height: 42px; padding: 0 14px; border: 1px solid rgb(255 255 255 / .22); border-radius: 6px; background: rgb(255 255 255 / .03); font: 500 .9375rem/1.2 var(--police); color: var(--blanc-casse); }
.calendrier__champ > i { color: var(--gris); }
.calendrier__champ.is-saisie .evt__caret { display: inline-block; }
.calendrier__resultats { display: flex; flex-direction: column; margin: 0; padding: 4px; list-style: none; border: 1px solid var(--blanc-alpha-niveau-1); border-radius: 8px; background: #101316; }
.calendrier__resultat { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; border: 1px solid transparent; border-radius: 6px; transition: border-color .3s ease, background-color .3s ease; }
.calendrier__resultat.is-choisi { border-color: rgb(255 255 255 / .45); background: var(--noir-niveau-1); }
.calendrier__titre { display: flex; align-items: center; gap: 7px; font: 600 .875rem/1.2 var(--police); color: var(--blanc-casse); }
.calendrier__titre strong { font-weight: 700; }
.calendrier__titre i { font-size: .9375rem; color: var(--orange); }
.calendrier__meta { font: 500 .6875rem/1.2 var(--police-tech); color: var(--gris); }
.calendrier__etiquette { right: 4%; bottom: 0; }

/* ==========================================================================
   Zone - Joueurs : Vos Données
   ========================================================================== */
/* Les garanties d'une même rangée prennent la même hauteur */
.garanties .encart { height: 100%; }

/* ==========================================================================
   Global - Carte Annotée
   ========================================================================== */
.annote__carte { position: absolute; left: 50%; top: 52%; z-index: 2; width: 36%; translate: -50% -50%; }
.annote__carte .carte-app, .annote__carte .tc-card { width: 100%; max-width: none; }
/* Le point de l'étiquette touche le bord de la carte, à la hauteur de ce qu'il désigne */
.annote__etiquette { left: 67%; translate: 0 -50%; }
.annote__etiquette--gauche { right: 67%; left: auto; flex-direction: row-reverse; }
.annote__etiquette--nom { top: 23.5%; }
.annote__etiquette--photo { top: 46%; }
.annote__etiquette--rang { top: 67.5%; }
.annote__etiquette--evenement { top: 80%; }


/* ==========================================================================
   Global - Ouverture Du Sachet
   ========================================================================== */
.ouverture__scene { position: absolute; left: 50%; top: 50%; z-index: 2; width: 32%; translate: -50% -50%; }
.ouverture__carte .carte-app, .ouverture__carte .tc-card { width: 100%; max-width: none; }
/* Le sachet n'existe qu'avec les animations : sans elles (mouvement réduit, éditeur), la carte est déjà ouverte */
.ouverture__sachet {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 5;
    display: none;
    width: 110%;
    aspect-ratio: 5 / 8;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    container-type: inline-size;
    translate: -50% -50%;
    perspective: 900px;
    filter: drop-shadow(0 -8px 22px rgb(0 0 0 / .35));
    -webkit-tap-highlight-color: transparent;
}
.js-anim .ouverture__sachet { display: block; }
.ouverture__sachet:focus-visible { outline: 2px solid var(--violet); outline-offset: 6px; border-radius: 8px; }
.ouverture__glisse { position: relative; display: block; width: 100%; height: 100%; }
.ouverture__sachet-corps { position: relative; display: block; width: 100%; height: 100%; transform-style: preserve-3d; }
.ouverture__face { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: contain; pointer-events: none; user-select: none; }
/* La face montrée suit l'angle réel du tour (classe is-dos posée par le script), jamais l'envers en miroir */
.ouverture__face--dos { transform: rotateY(180deg); visibility: hidden; }
.ouverture__sachet.is-dos .ouverture__face--dos { visibility: visible; }
.ouverture__sachet.is-dos .ouverture__face:not(.ouverture__face--dos) { visibility: hidden; }
/* Indice de découpe de la page publique : pointillés tracés de gauche à droite, ciseaux en tête */
.ouverture__coupe { position: absolute; left: -3%; right: -3%; top: 15%; display: none; height: 12cqw; rotate: -4deg; pointer-events: none; }
.ouverture.is-pret .ouverture__coupe { display: block; }
.ouverture__coupe::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    border-top: .6cqw dashed rgb(255 255 255 / .95);
    filter: drop-shadow(0 1px 3px rgb(0 0 0 / .6));
    clip-path: inset(-2px 100% -2px 0);
    animation: ouvertureLigne 3.4s ease-in-out .3s infinite;
}
.ouverture__coupe i {
    position: absolute;
    top: 50%;
    left: 0;
    translate: -50% -54%;
    font-size: 7cqw;
    line-height: 1;
    color: var(--blanc);
    text-shadow: 0 1px 4px rgb(0 0 0 / .6);
    opacity: 0;
    animation: ouvertureCiseaux 3.4s ease-in-out .3s infinite;
}
@keyframes ouvertureLigne {
    0% { opacity: 1; clip-path: inset(-2px 100% -2px 0); }
    48%, 70% { opacity: 1; clip-path: inset(-2px 0 -2px 0); }
    85%, 100% { opacity: 0; clip-path: inset(-2px 0 -2px 0); }
}
@keyframes ouvertureCiseaux {
    0% { left: 0%; opacity: 0; }
    4%, 44% { opacity: 1; }
    48%, 100% { left: 100%; opacity: 0; }
}
.ouverture__consigne { left: 50%; bottom: 15px; display: none; translate: -50% 0; transition: opacity .3s ease; }
.js-anim .ouverture__consigne { display: flex; }
.ouverture:not(.is-pret) .ouverture__consigne { opacity: 0; }
/* Consigne et état partagent le bas de la vignette : jamais affichés ensemble */
.ouverture .vignette__repere--bd { transition: opacity .3s ease; }
.js-anim .ouverture.is-pret .vignette__repere--bd { opacity: 0; }
html:not(.js-anim) .ouverture .vignette__rejouer { display: none; }


/* ==========================================================================
   Global - Tarifs
   ========================================================================== */
.tarifs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px; }
.tarifs--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tarifs--1 { grid-template-columns: minmax(0, 520px); justify-content: center; }
.tarifs--1 .tarif { display: flex; }
.tarifs--1 .tarif__resume:empty,
.tarifs--1 .tarif__points:empty { display: none; }
.tarifs--1 .tarif:has(.tarif__points:empty) .tarif__prix { padding-bottom: 0; border-bottom: 0; }
.tarif { display: flex; flex-direction: column; gap: 20px; padding: 30px; }
.tarif__tete { display: flex; align-items: center; justify-content: space-between; gap: 15px; }
.tarif__badge { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border: 1px solid rgb(255 255 255 / .2); border-radius: 999px; font: 500 .75rem/1 var(--police-tech); color: var(--blanc-casse); }
.tarif__nom { margin: 0; font: 700 1.375rem/1.2 var(--police); color: var(--blanc-casse); }
.tarif__resume { margin: -10px 0 0; font: 400 .9375rem/1.5 var(--police); color: var(--gris-clair); }

/* ==========================================================================
   Nouveautés (14/10/2026) : les mises à jour publiées dans l'appli, par mois
   ========================================================================== */
.nouveautes { display: flex; flex-direction: column; gap: 60px; }
.nouveautes__mois { display: grid; grid-template-columns: minmax(0, 240px) minmax(0, 1fr); align-items: start; gap: 30px 60px; }
.nouveautes__mois-titre { position: sticky; top: 120px; margin: 0; font: 700 1.5rem/1.2 var(--police); color: var(--blanc-casse); }
.nouveautes__liste { display: flex; flex-direction: column; gap: 15px; margin: 0; padding: 0; list-style: none; }
.nouveaute { display: flex; flex-direction: column; gap: 12px; padding: 26px 30px; }
.nouveaute__tete { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 15px; }
.nouveaute__date { font: 500 .75rem/1.2 var(--police-tech); color: var(--gris); }
.nouveaute__type { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border: 1px solid rgb(255 255 255 / .2); border-radius: 999px; font: 500 .75rem/1 var(--police-tech); color: var(--blanc-casse); }
.nouveaute__titre { margin: 0; font: 700 1.25rem/1.3 var(--police); color: var(--blanc-casse); text-wrap: balance; }
.nouveaute__texte { max-width: 70ch; margin: 0; font: 400 .9375rem/1.55 var(--police); color: var(--gris-clair); }
.nouveautes__vide { margin: 0; padding: 30px; font: 400 1rem/1.5 var(--police); color: var(--gris-clair); text-align: center; }
@media (max-width: 1024px) {
    .nouveautes { gap: 45px; }
    .nouveautes__mois { grid-template-columns: minmax(0, 1fr); gap: 15px; }
    .nouveautes__mois-titre { position: static; }
}
@media (max-width: 767px) {
    .nouveaute { padding: 22px 20px; }
    .nouveaute__titre { font-size: 1.125rem; }
}
.tarif__prix { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; margin: 0; padding: 20px 0; border-block: 1px solid var(--verre-filet); }
.tarif__prefixe { flex-basis: 100%; font: 500 .75rem/1.2 var(--police-tech); color: var(--gris); }
.tarif__prix strong { font: 700 2.5rem/1 var(--police); color: var(--blanc-casse); }
.tarif__unite { font: 500 .875rem/1.2 var(--police); color: var(--gris-clair); }
.tarif__points { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; }
.tarif__points li { display: flex; align-items: flex-start; gap: 10px; font: 400 .9375rem/1.45 var(--police); color: var(--gris-clair); }
.tarif__points i { flex: none; margin-top: 2px; color: var(--vert); }
.tarif--orange .tarif__points i { color: var(--orange); }
.tarif--violet .tarif__points i { color: var(--violet); }
.tarif--avant { border-color: rgb(255 255 255 / .3); }
/* Côte à côte, les offres partagent leurs rangées : noms, résumés, prix et points à la même hauteur */
@media (min-width: 768px) {
    .tarif { display: grid; grid-row: span 5; grid-template-rows: subgrid; row-gap: 20px; }
}
@media (max-width: 1024px) {
    .tarifs { gap: 15px; }
    .tarif { padding: 24px; }
    .tarif__prix strong { font-size: 2rem; }
    /* Trois offres : une par ligne, le nom et le résumé à gauche, le prix et les points à droite */
    .tarifs--3 { grid-template-columns: minmax(0, 1fr); }
    .tarifs--3 .tarif { display: grid; grid-row: auto; grid-template-rows: none; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: 'tete prix' 'nom prix' 'resume points'; gap: 10px 30px; align-items: start; }
    .tarifs--3 .tarif__tete { grid-area: tete; }
    .tarifs--3 .tarif__nom { grid-area: nom; }
    .tarifs--3 .tarif__resume { grid-area: resume; margin: 0; }
    .tarifs--3 .tarif__prix { grid-area: prix; padding: 0 0 15px; border-top: 0; }
    .tarifs--3 .tarif__points { grid-area: points; }
}
@media (max-width: 767px) {
    .tarifs, .tarifs--2 { grid-template-columns: minmax(0, 1fr); }
    .tarifs--3 .tarif { display: flex; gap: 20px; }
    .tarifs--3 .tarif__resume { margin: -10px 0 0; }
    .tarifs--3 .tarif__prix { padding: 20px 0; border-top: 1px solid var(--verre-filet); }
}


/* ==========================================================================
   Global - Pages Légales
   ========================================================================== */
.legal { display: grid; grid-template-columns: minmax(0, 280px) minmax(0, 1fr); align-items: start; gap: 90px; }
/* Le plan reste en vue pendant la lecture */
.legal__plan { position: sticky; top: 120px; align-self: start; padding: 20px; }
.legal__plan p { margin: 0 0 12px; font: 500 .75rem/1.2 var(--police-tech); color: var(--gris); }
.legal__plan ol { display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 0; list-style: none; counter-reset: plan; }
.legal__plan li { counter-increment: plan; }
.legal__plan a { display: flex; gap: 10px; padding: 7px 10px; border-radius: 6px; font: 500 .875rem/1.35 var(--police); color: var(--gris-clair); text-decoration: none; transition: background-color .2s ease, color .2s ease; }
.legal__plan a::before { content: counter(plan, decimal-leading-zero); flex: none; font: 500 .75rem/1.6 var(--police-tech); color: var(--gris); }
.legal__plan a:hover { background: rgb(255 255 255 / .05); color: var(--blanc-casse); }
.legal__texte { display: flex; flex-direction: column; gap: 60px; max-width: 760px; }
.legal__section { scroll-margin-top: 120px; }
.legal__section h2 { margin: 0 0 20px; font: 700 1.5rem/1.25 var(--police); color: var(--blanc-casse); }
.legal__section h3 { margin: 30px 0 12px; font: 700 1.0625rem/1.35 var(--police); color: var(--blanc-casse); }
.legal__section p, .legal__section li { font: 400 1rem/1.7 var(--police); color: var(--gris-clair); }
.legal__section p { margin: 0 0 15px; }
.legal__section p:last-child { margin-bottom: 0; }
.legal__section strong { font-weight: 600; color: var(--blanc-casse); }
.legal__section a { color: var(--vert); text-decoration: underline; text-underline-offset: 3px; }
.legal__section ul { display: flex; flex-direction: column; gap: 8px; margin: 0 0 15px; padding: 0; list-style: none; }
.legal__section ul li { position: relative; padding-left: 22px; }
.legal__section ul li::before { content: ''; position: absolute; left: 4px; top: .7em; width: 6px; height: 6px; border-radius: 50%; background: var(--vert); }
/* Fiche d'identité : un libellé, une valeur */
.legal__fiche { display: grid; grid-template-columns: minmax(0, 220px) minmax(0, 1fr); margin: 0 0 15px; border: 1px solid var(--verre-filet); border-radius: var(--rayon); overflow: hidden; }
.legal__fiche dt, .legal__fiche dd { margin: 0; padding: 12px 16px; font: 400 .9375rem/1.5 var(--police); border-top: 1px solid var(--verre-filet); }
.legal__fiche dt { font-weight: 600; color: var(--blanc-casse); background: rgb(255 255 255 / .03); }
.legal__fiche dd { color: var(--gris-clair); }
.legal__fiche dt:first-of-type, .legal__fiche dt:first-of-type + dd { border-top: 0; }
/* Tableaux (cookies, durées) : le thème Hello pose bordures et zébrures, remises à plat ici */
.legal__section .legal__table { width: 100%; margin: 0 0 15px; border: 1px solid var(--verre-filet); border-radius: var(--rayon); border-collapse: separate; border-spacing: 0; overflow: hidden; }
.legal__section .legal__table th, .legal__section .legal__table td { padding: 12px 16px; border: 0; border-top: 1px solid var(--verre-filet); background: none; font: 400 .9375rem/1.5 var(--police); color: var(--gris-clair); text-align: left; vertical-align: top; }
.legal__section .legal__table th { border-top: 0; font: 600 .8125rem/1.3 var(--police-tech); color: var(--gris); background: rgb(255 255 255 / .03); }
.legal__section .legal__table tbody tr:hover > td, .legal__section .legal__table tbody tr:nth-child(odd) > td { background: none; }
.legal__section .legal__table td:first-child { font-weight: 600; color: var(--blanc-casse); }
.legal__demo { margin-bottom: 60px; }
.legal__autres { display: flex; flex-wrap: wrap; gap: 10px; }
.legal__autres a { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border: 1px solid var(--verre-filet); border-radius: 999px; font: 600 .875rem/1.2 var(--police); color: var(--blanc-casse); text-decoration: none; transition: border-color .2s ease; }
.legal__autres a:hover { border-color: rgb(255 255 255 / .35); }
.legal__autres i { color: var(--vert); }
@media (max-width: 1366px) {
    .legal { gap: 60px; }
}
@media (max-width: 1024px) {
    .legal { grid-template-columns: minmax(0, 1fr); gap: 30px; }
    .legal__plan { position: static; }
    .legal__plan ol { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 15px; }
    .legal__texte { gap: 45px; max-width: none; }
    .legal__demo { margin-bottom: 30px; }
}
@media (max-width: 767px) {
    .legal__plan ol { grid-template-columns: minmax(0, 1fr); }
    .legal__section h2 { font-size: 1.3125rem; }
    .legal__fiche { grid-template-columns: minmax(0, 1fr); }
    .legal__fiche dd { border-top: 0; padding-top: 0; }
    .legal__section .legal__table,
    .legal__section .legal__table tbody,
    .legal__section .legal__table tr,
    .legal__section .legal__table td { display: block; width: 100%; }
    .legal__section .legal__table thead { display: none; }
    .legal__section .legal__table tr { padding: 14px 16px; border-top: 1px solid var(--verre-filet); }
    .legal__section .legal__table tr:first-child { border-top: 0; }
    .legal__section .legal__table td { padding: 0; border: 0; }
    .legal__section .legal__table td + td { margin-top: 10px; }
    .legal__section .legal__table td[data-label]:not(:first-child)::before { content: attr(data-label); display: block; margin-bottom: 2px; font: 600 .75rem/1.3 var(--police-tech); color: var(--gris); }
}


/* ==========================================================================
   Global - Coordonnées
   ========================================================================== */
.elementor-widget-smory-coordonnees { align-self: stretch; }
.coordonnees { display: flex; flex-direction: column; gap: 10px; width: 100%; max-width: 440px; margin: 0; padding: 0; list-style: none; }
.coordonnee { display: flex; align-items: center; gap: 16px; padding: 14px 18px; color: inherit; text-decoration: none; transition: border-color .3s ease; }
a.coordonnee:hover { border-color: rgb(255 255 255 / .3); }
.coordonnee__texte { display: flex; flex: 1; flex-direction: column; gap: 3px; min-width: 0; }
.coordonnee__texte small { font: 500 .75rem/1.2 var(--police-tech); color: var(--gris); }
.coordonnee__texte strong { font: 700 1rem/1.3 var(--police); color: var(--blanc-casse); overflow-wrap: anywhere; }
.coordonnee__fleche { flex: none; color: var(--vert); transition: translate .2s ease; }
a.coordonnee:hover .coordonnee__fleche { translate: 4px 0; }

/* ==========================================================================
   Global - Formulaire (widget Formulaire d'Elementor Pro, classe formulaire)
   --------------------------------------------------------------------------
   Habillé entièrement ici : les sélecteurs passent devant le CSS que
   l'éditeur génère pour ses réglages de style par défaut.
   ========================================================================== */
.contact__formulaire { padding: 30px; }
/* Préfixe long : il passe devant les règles que l'éditeur écrit pour ses réglages par défaut (champs blancs, bouton au texte blanc) */
.smory-zone .formulaire.elementor-widget-form .elementor-form .elementor-form-fields-wrapper { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin: 0; }
.smory-zone .formulaire.elementor-widget-form .elementor-form .elementor-form-fields-wrapper > :not(.elementor-field-group) { display: none; }
.smory-zone .formulaire.elementor-widget-form .elementor-form .elementor-form-fields-wrapper .elementor-field-group { display: flex; flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 8px; width: auto; max-width: none; margin: 0; padding: 0; }
/* Elementor donne aux champs une base de 100 % : dans une colonne, ils partiraient à côté de leur libellé */
.smory-zone .formulaire.elementor-widget-form .elementor-form .elementor-form-fields-wrapper .elementor-field-group > * { flex: 0 0 auto; }
.smory-zone .formulaire.elementor-widget-form .elementor-form .elementor-form-fields-wrapper .elementor-field-group.elementor-col-100 { grid-column: 1 / -1; }
.smory-zone .formulaire.elementor-widget-form .elementor-form .elementor-form-fields-wrapper .elementor-field-group > .elementor-field-label { margin: 0; padding: 0; font: 600 .875rem/1.3 var(--police); color: var(--gris-clair); }
.smory-zone .formulaire.elementor-widget-form .elementor-form .elementor-form-fields-wrapper .elementor-field-group .elementor-field-textual {
    width: 100%;
    min-height: 48px;
    margin: 0;
    padding: 12px 14px;
    border: 1px solid rgb(255 255 255 / .45);
    border-radius: 6px;
    background: rgb(255 255 255 / .03);
    font: 400 1rem/1.4 var(--police);
    color: var(--blanc-casse);
    box-shadow: none;
    transition: border-color .2s ease, box-shadow .2s ease;
}
.smory-zone .formulaire.elementor-widget-form .elementor-form .elementor-form-fields-wrapper .elementor-field-group textarea.elementor-field-textual { min-height: 150px; resize: vertical; }
.smory-zone .formulaire.elementor-widget-form .elementor-form .elementor-form-fields-wrapper .elementor-field-group .elementor-field-textual:hover { border-color: rgb(255 255 255 / .5); }
.smory-zone .formulaire.elementor-widget-form .elementor-form .elementor-form-fields-wrapper .elementor-field-group .elementor-field-textual:focus { border-color: var(--vert); outline: 0; box-shadow: 0 0 0 3px rgb(165 204 0 / .18); }
.smory-zone .formulaire.elementor-widget-form .elementor-form .elementor-form-fields-wrapper .elementor-field-group .elementor-select-wrapper { position: relative; width: 100%; background: none; }
.smory-zone .formulaire.elementor-widget-form .elementor-form .elementor-form-fields-wrapper .elementor-field-group .elementor-select-wrapper select { appearance: none; padding-right: 40px; cursor: pointer; }
.smory-zone .formulaire.elementor-widget-form .elementor-form .elementor-form-fields-wrapper .elementor-field-group .elementor-select-wrapper option { background: var(--noir-niveau-2); color: var(--blanc-casse); }
.smory-zone .formulaire.elementor-widget-form .elementor-form .elementor-form-fields-wrapper .elementor-field-group .select-caret-down-wrapper { right: 14px; font-size: .75rem; color: var(--gris-clair); pointer-events: none; }
.smory-zone .formulaire.elementor-widget-form .elementor-form .elementor-form-fields-wrapper .elementor-field-group .select-caret-down-wrapper svg { fill: currentColor; }
/* La case d'accord */
.smory-zone .formulaire.elementor-widget-form .elementor-form .elementor-form-fields-wrapper .elementor-field-group .elementor-field-subgroup { display: block; }
.smory-zone .formulaire.elementor-widget-form .elementor-form .elementor-form-fields-wrapper .elementor-field-group .elementor-field-option { display: flex; align-items: flex-start; gap: 12px; margin: 0; }
.smory-zone .formulaire.elementor-widget-form .elementor-form .elementor-form-fields-wrapper .elementor-field-group .elementor-acceptance-field { flex: none; width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--vert); cursor: pointer; }
.smory-zone .formulaire.elementor-widget-form .elementor-form .elementor-form-fields-wrapper .elementor-field-group .elementor-field-option label { margin: 0; font: 400 .875rem/1.45 var(--police); color: var(--gris-clair); cursor: pointer; }
.smory-zone .formulaire.elementor-widget-form .elementor-form .elementor-field-option label a { color: var(--vert); text-decoration: underline; text-underline-offset: 3px; }
.smory-zone .formulaire.elementor-widget-form .elementor-form .elementor-field-option label a:hover { color: var(--blanc-casse); }
/* Le bouton : le bouton vert du site */
.smory-zone .formulaire.elementor-widget-form .elementor-form .elementor-form-fields-wrapper .elementor-field-group.e-form__buttons { margin-top: 10px; }
.smory-zone .formulaire.elementor-widget-form .elementor-form .elementor-form-fields-wrapper .elementor-field-group .elementor-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 0;
    padding: 15px 28px;
    border: 1px solid transparent;
    border-radius: 999px;
    background-color: var(--vert);
    background-image: linear-gradient(to bottom, rgb(255 255 255 / .22) 0%, rgb(255 255 255 / 0) 48%, rgb(0 0 0 / .18) 100%);
    box-shadow: 0 0 0 1px rgb(165 204 0 / .45), 0 10px 30px -8px rgb(165 204 0 / .6), 0 0 22px -4px rgb(165 204 0 / .45);
    font-family: var(--police);
    font-size: var(--e-global-typography-accent-font-size, 1rem);
    font-weight: var(--e-global-typography-accent-font-weight, 600);
    line-height: var(--e-global-typography-accent-line-height, 1.2);
    color: var(--noir);
    transition: box-shadow .2s ease, background-color .2s ease;
}
.smory-zone .formulaire.elementor-widget-form .elementor-form .elementor-form-fields-wrapper .elementor-field-group .elementor-button:hover { background-color: var(--vert-fonce); color: var(--noir); box-shadow: 0 0 0 1px rgb(165 204 0 / .6), 0 14px 36px -8px rgb(165 204 0 / .75), 0 0 30px -2px rgb(165 204 0 / .55); }
.smory-zone .formulaire.elementor-widget-form .elementor-form .elementor-form-fields-wrapper .elementor-field-group .elementor-button svg, .smory-zone .formulaire.elementor-widget-form .elementor-form .elementor-form-fields-wrapper .elementor-field-group .elementor-button svg * { fill: currentColor; }
.smory-zone .formulaire.elementor-widget-form .elementor-form .elementor-form-fields-wrapper .elementor-field-group .elementor-button-content-wrapper { display: inline-flex; align-items: center; gap: 10px; }
.smory-zone .formulaire.elementor-widget-form .elementor-form .elementor-form-fields-wrapper .elementor-field-group .elementor-button-icon { display: inline-flex; margin: 0; font-size: 1.15em; line-height: 1; }
.smory-zone .formulaire.elementor-widget-form .elementor-form .elementor-form-fields-wrapper .elementor-field-group .elementor-button-icon svg { width: 1em; height: 1em; }
/* Les messages : erreurs sous les champs, envoi réussi ou non */
.smory-zone .formulaire.elementor-widget-form .elementor-form .elementor-message { margin: 20px 0 0; font: 500 .9375rem/1.45 var(--police); }
.smory-zone .formulaire.elementor-widget-form .elementor-form .elementor-message-success { color: var(--vert); }
.smory-zone .formulaire.elementor-widget-form .elementor-form .elementor-message-danger,
.smory-zone .formulaire.elementor-widget-form .elementor-form .elementor-form-fields-wrapper .elementor-field-group.elementor-error > .elementor-field-label { color: var(--orange); }
.smory-zone .formulaire.elementor-widget-form .elementor-form .elementor-form-fields-wrapper .elementor-field-group.elementor-error .elementor-field-textual { border-color: var(--orange); }
.smory-zone .formulaire.elementor-widget-form .elementor-form .elementor-message::before { display: none; }
@media (max-width: 1024px) {
    .contact__formulaire { padding: 24px; }
}
@media (max-width: 767px) {
    .contact__formulaire { padding: 20px; }
    .smory-zone .formulaire.elementor-widget-form .elementor-form .elementor-form-fields-wrapper { grid-template-columns: minmax(0, 1fr); gap: 15px; }
}


/* ==========================================================================
   Global - Questions
   ========================================================================== */
.questions { display: flex; flex-direction: column; gap: 10px; }
.question { interpolate-size: allow-keywords; transition: border-color .3s ease; }
.question:hover, .question[open] { border-color: rgb(255 255 255 / .3); }
.question__titre { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 20px 24px; font: 600 1rem/1.4 var(--police); color: var(--blanc-casse); list-style: none; cursor: pointer; }
.question__titre::-webkit-details-marker { display: none; }
.question__titre:focus-visible { border-radius: var(--rayon); outline: 2px solid var(--vert); outline-offset: 2px; }
.questions--violet .question__titre:focus-visible { outline-color: var(--violet); }
/* Le signe plus devient moins quand la question s'ouvre */
.question__signe { position: relative; flex: none; width: 28px; height: 28px; border: 1px solid rgb(255 255 255 / .2); border-radius: 50%; color: var(--blanc-casse); }
.question__signe::before,
.question__signe::after { content: ''; position: absolute; left: 50%; top: 50%; width: 10px; height: 1.5px; background: currentColor; translate: -50% -50%; transition: rotate .3s ease; }
.question__signe::after { rotate: 90deg; }
.question[open] .question__signe::after { rotate: 0deg; }
/* Ouverture en douceur là où le navigateur sait animer le contenu d'un <details> ; ailleurs, instantanée */
.question::details-content { block-size: 0; overflow: hidden; transition: block-size .35s ease, content-visibility .35s allow-discrete; }
.question[open]::details-content { block-size: auto; }
.question__reponse { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; padding: 0 24px 22px; }
.question__reponse p { max-width: 62ch; margin: 0; font: 400 .9375rem/1.6 var(--police); color: var(--gris-clair); }
.question__reponse .lien-fleche { font-size: .9375rem; }
/* Page Questions : en grand écran, le titre du thème reste en vue le long de ses questions */
@media (min-width: 1025px) {
    .questions-zone .principe__texte { position: sticky; top: 120px; }
}


/* ==========================================================================
   Global - Pause Hors Écran
   ========================================================================== */
.is-hors-ecran .aurore,
.is-hors-ecran .lumieres__halo,
.is-hors-ecran.stage .stage__balayage,
.is-hors-ecran .stage__onde,
.is-hors-ecran .lien-link::before,
.is-hors-ecran .lien-link::after,
.is-hors-ecran .sommaire__onde,
.is-hors-ecran .vignette__voyant,
.is-hors-ecran .roles__voie span,
.is-hors-ecran .diffusion__flux,
.is-hors-ecran .objet__onde { animation-play-state: paused; }

/* ==========================================================================
   Global - Placements Tenus Par GSAP
   ========================================================================== */
.stage__sachet, .stage__carte, .stage__tel, .pub__sachet, .perso-sachet, .nfc__grande { translate: -50% -50%; }
.appel__sachet--g { rotate: -12deg; translate: 0 -50%; }
.appel__sachet--d { rotate: 12deg; translate: 0 -50%; }
.appel__carte { translate: -50% -50%; }
.js-anim .eventail__carte { translate: none; rotate: none; }
.js-anim .stage__sachet,
.js-anim .stage__carte,
.js-anim .stage__tel,
.js-anim .pub__sachet,
.js-anim .perso-sachet,
.js-anim .nfc__grande,
.js-anim .nfc__tel,
.js-anim .nfc__objet { translate: none; }
.js-anim .appel__sachet,
.js-anim .appel__carte { translate: none; rotate: none; }
.js-anim .nfc__grande { opacity: 0; }
.js-anim .attente__validee { translate: none; }
.js-anim .pub { opacity: 0; }

/* ==========================================================================
   Responsive - Laptop
   ========================================================================== */
@media (max-width: 1366px) {
    .perso { gap: 30px; }
    .repere__lignes small { font-size: .68rem; }
    .anat { gap: 60px; }
    .diffusion { gap: 90px; }
}

/* ==========================================================================
   Responsive - Tablette Large
   ========================================================================== */
@media (max-width: 1200px) {
    .entete .smory-btn--connexion .elementor-button-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
    .visite { grid-template-columns: minmax(0, 1fr); gap: 30px; }
    .visite__liste { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
    .visite .visite__item { padding: 14px 16px 16px; }
    .certif, .inscription { gap: 30px; }
    .entete .elementor-widget-button.smory-btn--connexion .elementor-button { width: 44px; height: 44px; padding: 0; }
    .concept__grille { gap: 30px; }
    .concept__compteur [data-concept-num] { font-size: 3.5rem; }
    .defilant--texte span { font-size: 5rem; }
    .perso { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 30px; }
    .perso__centre { grid-column: 1 / -1; grid-row: 1; }
    .perso__traits { display: none; }
    .perso__liste--g .perso-choix.is-actif,
    .perso__liste--d .perso-choix.is-actif { transform: none; }
    .repere--valide .repere__boite { max-width: 13rem; }
    .parcours__etapes > .etape { grid-template-columns: minmax(0, 1fr) 72px minmax(0, 1fr); }
    .sommaire__lien { gap: 10px; padding: 12px; }
    .sommaire__nom { font-size: .875rem; }
    .roles__duo { grid-template-columns: minmax(0, 1fr) 72px minmax(0, 1fr); }
    .roles__flux { padding: 0 10px; }
    .anat { grid-template-columns: minmax(0, 1fr) minmax(0, 300px) minmax(0, 1fr); gap: 40px; }
    .anat .anat__item { grid-template-columns: 32px minmax(0, 1fr); gap: 10px; padding: 10px 12px; }
    .anat__num { width: 32px; height: 32px; }
    .effets { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .effet__scene { padding: 48px 26% 32px; }
    .couches__scene { height: 580px; }
    .couches__pile, .couches__entiere { width: 210px; }
    .diffusion { grid-template-columns: minmax(0, 1fr) minmax(0, 240px) minmax(0, 1fr); gap: 60px; }
    .objets { gap: 15px; }
    .catalogue__panneau { gap: 40px; padding: 30px; }
    .catalogue__nom { font-size: 3.5rem; }
    .vitrine { gap: 15px; }
    .suivi__etapes { gap: 15px; }
    .attente { gap: 30px; }
}

/* ==========================================================================
   Responsive - Tablette
   ========================================================================== */
@media (max-width: 1024px) {
    .entete .smory-btn--inscription { display: none; }
    .certif { grid-template-columns: minmax(0, 1fr); }
    .certif__visuel { width: min(100%, 560px); margin: 0 auto; }
    .inscription { grid-template-columns: minmax(0, 1fr); }
    .pied__inner > .pied__marque { grid-column: 1 / -1; }
    .hero { min-height: 0; }
    .hero__visuel { max-width: 720px; margin: 0 auto; }
    /* « Validée par le joueur » sortait de l'écran à gauche entre 768 et 1023 px : le bloc posé sous l'éventail le remplace */
    .repere--valide { display: none; }
    /* L'encart passe SOUS l'éventail (19/10) : posé sur son bas, il cachait la plaque LINK™ */
    .hero__visuel:has(.hero__valide) { margin-bottom: 78px; }
    /* Le repère du trophée cède sa place à l'encart sous le visuel, comme celui de la carte */
    .hero__visuel > .repere.hero__trophee-repere { display: none; }
    .hero__link { top: 90%; }
    .hero__valide {
        position: absolute;
        left: 50%;
        top: calc(100% + 8px);
        z-index: 6;
        display: flex;
        align-items: flex-start;
        gap: 10px;
        width: min(100%, 320px);
        margin: 0;
        padding: 10px 12px;
        translate: -50% 0;
        border: 1px solid var(--etiquette-filet);
        border-radius: 10px;
        background: var(--etiquette-fond);
    }
    .hero__valide i { flex: none; color: var(--vert); font-size: 1.1rem; }
    .hero__valide b { display: block; font: 600 .8125rem/1.25 var(--police-tech); color: var(--blanc-casse); }
    .hero__valide span { font: 400 .75rem/1.4 var(--police); color: var(--gris-clair); }
    .nfc { max-width: 680px; margin: 0 auto; }
    .defilant--cartes img { width: 180px; }
    .gabarits { align-items: flex-start; }
    .gabarits__liste { justify-content: flex-start; }
    .arc { height: 360px; }
    .arc__fleche--g { left: 14%; }
    .arc__fleche--d { right: 14%; }
    .frise__etapes { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 45px; }
    .frise__ligne { display: none; }
    .appel__visuel { min-height: 460px; margin: 0 auto; max-width: 560px; }
    .sommaire { margin-top: 30px; }
    .sommaire__ligne { display: none; }
    .sommaire__liste { display: flex; justify-content: flex-start; gap: 10px; margin: 0 -30px; padding: 0 30px 6px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 30px; scrollbar-width: none; }
    .sommaire__liste::-webkit-scrollbar { display: none; }
    .sommaire__liste li { flex: 0 0 auto; scroll-snap-align: start; }
    /* Centrée quand la bande tient dans l'écran, calée à gauche quand elle défile */
    .sommaire__liste li:first-child { margin-left: auto; }
    .sommaire__liste li:last-child { margin-right: auto; }
    .sommaire__lien { white-space: nowrap; }
    .parcours__etapes > .etape,
    .parcours__etapes > .etape--inverse { grid-template-columns: minmax(0, 1fr); grid-template-areas: "texte" "visuel"; row-gap: 30px; }
    .etape:not(.etape--inverse) .etape__texte,
    .etape--inverse .etape__texte { justify-self: start; max-width: 640px; }
    .etape__rail,
    .elementor-widget-smory-rail { display: none; }
    .etape__num { display: block; }
    .etape__visuel .vignette { max-width: 720px; }
    .occasion { flex-direction: row; }
    .occasion__visuel { flex: 0 0 42%; aspect-ratio: auto; min-height: 300px; }
    .occasion__carte { width: 50%; }
    .roles__duo { grid-template-columns: minmax(0, 1fr); gap: 15px; }
    .roles__flux { display: none; }
    .anat { display: flex; flex-direction: column; align-items: stretch; gap: 30px; }
    .anat__centre { order: -1; width: min(100%, 340px); margin-inline: auto; }
    .anat__traits { display: none; }
    .anat__legendes { display: flex; gap: 12px; margin: 0 -30px; padding: 0 30px 6px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 30px; scrollbar-width: none; }
    .anat__legendes::-webkit-scrollbar { display: none; }
    .anat__liste { display: contents; }
    .anat__liste li { display: flex; flex: 0 0 min(76%, 320px); scroll-snap-align: start; }
    .anat__liste--g .anat__item.is-actif,
    .anat__liste--d .anat__item.is-actif { transform: none; }
    .couches { grid-template-columns: minmax(0, 1fr); gap: 30px; }
    .couches__traits { display: none; }
    .couches__scene { height: 540px; }
    .couches .couche-item.is-actif { transform: none; }
    .collector__texte { max-width: 640px; }
    .diffusion { grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 30px; }
    .diffusion__traits { display: none; }
    .diffusion__colonne { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; max-width: 680px; }
    .diffusion__titre { grid-column: 1 / -1; }
    .diffusion__colonne--entrees .diffusion__noeud.is-actif,
    .diffusion__colonne--sorties .diffusion__noeud.is-actif { transform: none; }
    .diffusion__tel { width: min(100%, 250px); }
    /* Encarts posés sous le widget de partage : à la largeur de ses tuiles */
    .smory-cadre .partage__encarts { max-width: 680px; margin-inline: auto; }
    .objets { grid-template-columns: minmax(0, 1fr); }
    .objet { flex-direction: row; }
    .objet__scene { flex: 0 0 42%; aspect-ratio: auto; min-height: 280px; border-bottom: 0; border-right: 1px solid var(--blanc-alpha-niveau-2); }
    .objet__corps { justify-content: center; }
    .suivi { padding: 30px 24px; }
    .suivi__etapes { grid-template-columns: minmax(0, 1fr); gap: 24px; padding-top: 30px; }
    .suivi__rail { left: 21px; right: auto; top: 52px; bottom: 22px; width: 2px; height: auto; }
    .suivi__rempli { transform: scaleY(var(--avance)); transform-origin: 50% 0; background: linear-gradient(var(--violet-fonce), #C4B5FD); }
    .suivi__mobile { left: 50%; top: calc(var(--avance) * 100%); }
    .suivi__etape { flex-direction: row; align-items: flex-start; gap: 15px; text-align: left; }
    .suivi__noeud { flex: none; }
    .suivi__texte { align-items: flex-start; padding-top: 2px; }
    .suivi__texte small { max-width: 520px; }
    .attente { grid-template-columns: minmax(0, 1fr); }
    .catalogue__onglets { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .catalogue__panneau { gap: 30px; }
    .catalogue__nom { font-size: 3rem; }
    .catalogue__categorie { grid-template-columns: minmax(0, 1fr); gap: 6px; }
    .catalogue__scene img.catalogue__carte,
    .catalogue__verso { width: min(100%, 260px); }
    .vitrine { grid-template-columns: minmax(0, 1fr); }
    .vitrine__tuile { flex-direction: row; }
    .vitrine__scene { flex: 0 0 42%; min-height: 280px; border-bottom: 0; border-right: 1px solid var(--blanc-alpha-niveau-2); }
    .vitrine__corps { justify-content: center; }
    .versos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 15px; }
    .attente__scene { padding: 30px 0 15px; }
}

@media (max-width: 900px) {
    .concept__epingle { padding: 74px 0 12px; }
    .concept__grille { grid-template-columns: minmax(0, 1fr); gap: 15px; align-content: center; }
    .concept__stage { order: -1; }
    .stage { width: min(100%, 52svh); }
    .concept__texte { align-items: stretch; gap: 12px; }
    .concept__compteur [data-concept-num] { font-size: 2.25rem; }
    .concept__etape p { max-width: none; font-size: 1rem; }
    .specs, .concept__noms { display: none; }
    .concept__progression { max-width: none; }
    .concept__tete { max-width: none; align-items: center; }
    .concept__fleche { width: 44px; height: 44px; }
    .concept__cta { align-self: flex-start; }
}

/* ==========================================================================
   Responsive - Mobile
   ========================================================================== */
@media (max-width: 767px) {
    .logo-anime { --h: 36px; }
    .visite__liste { display: flex; flex-direction: row; gap: 8px; margin: 0 -30px; padding: 4px 30px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 30px; scrollbar-width: none; }
    .visite__liste::-webkit-scrollbar { display: none; }
    .visite .visite__item { flex: 0 0 250px; scroll-snap-align: start; }
    .certif__visuel { aspect-ratio: 1; }
    .certif__carte { width: 50%; }
    .certif__etiquette { display: none; }
    .comparatif th, .comparatif td { padding: 12px 10px; }
    .comparatif thead th { font-size: .875rem; }
    .comparatif thead th:first-child { width: 28%; }
    .comparatif tbody th { font-size: .6875rem; }
    .comparatif td { font-size: .8125rem; }
    .inscription__fiche { gap: 12px; padding: 18px; }
    .calendrier__fenetre { gap: 16px; padding: 18px; }
    .calendrier__etiquette { right: auto; left: 0; }
    .vignette.annote { aspect-ratio: 1; }
    .vignette.ouverture { aspect-ratio: 4 / 5; }
    .ouverture__scene { width: 48%; top: 47%; }
    .annote__carte { width: 50%; }
    .annote__etiquette { display: none; }
    .inscription__indice { display: none; }
    .inscription__champs { gap: 10px; }
    .e-con.smory-entete-zone--centre { margin-inline: 0; text-align: left; }
    .elementor-widget-button.smory-btn .elementor-button { padding: 14px 24px; white-space: normal; text-align: center; }
    .boutons > .elementor-widget-button.smory-btn,
    .boutons > .elementor-widget-button.smory-btn .elementor-button { width: 100%; }
    .hero__visuel { aspect-ratio: 1 / 1.08; }
    .sommaire__liste { display: grid; grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 0; overflow: visible; scroll-snap-type: none; }
    .sommaire__liste li:first-child,
    .sommaire__liste li:last-child { margin: 0; }
    .sommaire__liste li:last-child:nth-child(odd) { grid-column: 1 / -1; }
    .sommaire__lien { white-space: normal; }
    .eventail__carte--g2     { --x: -33%; --y: 6%;  --l: 32%; }
    .eventail__carte--g1     { --x: -19%; --y: 2%;  --l: 38%; }
    .eventail__carte--centre { --y: -4%; --l: 50%; }
    .hero__link { top: 91%; width: 22%; }
    .hero__visuel--trophee .eventail__carte--centre { --y: -3%; }
    .eventail__carte--d1     { --x: 19%;  --y: 2%;  --l: 38%; }
    .eventail__carte--d2     { --x: 33%;  --y: 6%;  --l: 32%; }
    .repere { display: none; }
    .chiffres { gap: 15px; }
    .chiffres__item { min-width: 0; flex: 1 1 0; }
    .chiffres dt { font-size: 1.5rem; }
    .e-con > .elementor-widget.smory-calque-defiler { display: none; }
    .stage { width: min(100%, 48svh); }
    .stage__etiquette span, .stage__repere { font-size: .625rem; }
    .stage__repere--hg { left: 36px; top: 14px; }
    .stage__repere--bd { right: 36px; bottom: 14px; }
    .stage__tampon { padding: 6px 10px; font-size: .8125rem; }
    .stage__ciseaux { font-size: 1.4rem; }
    .concept__cta { display: none; }
    .perso { grid-template-columns: minmax(0, 1fr); gap: 15px; }
    .perso__liste { flex-direction: row; gap: 10px; margin: 0 -30px; padding: 0 30px 6px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
    .perso__liste::-webkit-scrollbar { display: none; }
    .perso .perso-choix { flex: 0 0 76%; grid-template-columns: 38px minmax(0, 1fr); padding: 12px 14px; scroll-snap-align: start; }
    .perso-choix__icone { width: 38px; height: 38px; }
    .perso-scene { width: min(100%, 250px); margin-top: 60px; }
    .defilant--cartes { padding: 15px 0 30px; }
    .defilant--cartes img { width: 140px; }
    .defilant--texte span { font-size: 3.25rem; }
    .nfc__scene { aspect-ratio: 1 / 1.15; }
    .nfc__tel { left: 6%; width: 42%; }
    .nfc__grande { left: 72%; width: 44%; }
    .nfc__objet { left: 76%; top: 16%; width: 36%; }
    .nfc__etat { left: 15px; bottom: 15px; }
    .nfc__badge { font-size: .6875rem; padding: 5px 10px; }
    .arc { height: 280px; }
    .arc__item { width: 140px; margin-left: -70px; }
    .arc .arc__fleche { width: 40px; height: 40px; top: 46%; }
    .arc__fiche { margin-top: -20px; }
    .arc__nom { font-size: 1.5rem; }
    .frise__etapes { grid-template-columns: minmax(0, 1fr); row-gap: 30px; }
    .frise__etape { display: grid; grid-template-columns: 56px minmax(0, 1fr); column-gap: 15px; row-gap: 4px; align-items: start; text-align: left; }
    .frise__puce { grid-row: span 3; width: 56px; height: 56px; }
    .frise__etape p { max-width: none; }
    .public__photo { aspect-ratio: 16 / 9; }
    .appel__visuel { min-height: 340px; }
    .vignette { aspect-ratio: 1 / 1.05; }
    .vignette__repere { font-size: .625rem; }
    .vignette__repere--hg { left: 36px; top: 14px; }
    .vignette__repere--bd { right: 36px; bottom: 14px; }
    .etape__num { font-size: 1.75rem; }
    .val__mail { left: 4cqw; top: 13cqw; width: 52cqw; }
    .val__tel { left: 60cqw; width: 36cqw; margin-top: -38.4cqw; }
    .val__etiquette--a,
    .val__etiquette--b { left: 4cqw; }
    .part__tel { left: 7cqw; width: 36cqw; margin-top: -38.4cqw; }
    .part__story { left: 52cqw; width: 30cqw; margin-top: -30cqw; }
    .occasion { flex-direction: column; }
    .occasion__visuel { flex: none; aspect-ratio: 16 / 10; min-height: 0; }
    .occasion__carte { width: 34%; }
    .anat__centre { width: min(100%, 300px); }
    .anat__liste li { flex-basis: 82%; }
    .effets { display: flex; gap: 15px; margin: 0 -30px; padding: 0 30px 6px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 30px; scrollbar-width: none; }
    .effets::-webkit-scrollbar { display: none; }
    .effets > .effet { flex: 0 0 82%; scroll-snap-align: start; }
    .effet__scene { padding: 40px 18% 26px; }
    .encart { flex-direction: column; align-items: flex-start; gap: 15px; padding: 20px; }
    .encart__exemples { justify-content: flex-start; max-width: none; }
    .couches__scene { height: 400px; }
    .couches__pile, .couches__entiere { width: 160px; }
    .couches__pile { --ecart: 44px; }
    .note { padding: 18px 18px 12px; }
    .note__valeur b { font-size: 2rem; }
    .diffusion__colonne { grid-template-columns: minmax(0, 1fr); gap: 10px; }
    .diffusion__colonne--sorties .diffusion__noeud { padding: 10px 14px; }
    .diffusion__colonne--sorties .diffusion__texte small { display: none; }
    .diffusion__tel { width: min(100%, 220px); }
    .rx__objet,
    .rx__vue-objet { width: 76cqw; }
    .rx__glisser { bottom: 40px; }
    .objet { flex-direction: column; }
    .objet__scene { flex: none; aspect-ratio: 4 / 3; min-height: 0; border-right: 0; border-bottom: 1px solid var(--blanc-alpha-niveau-2); }
    .etape-sync { grid-template-columns: 38px minmax(0, 1fr); padding: 12px 14px; }
    .etape-sync__icone { width: 38px; height: 38px; font-size: 1.1rem; }
    .etape-sync.is-actif { transform: none; }
    .suivi { padding: 24px 18px; }
    .suivi__titre { font-size: 1rem; }
    .attente__pile { width: min(100%, 250px); }
    .attente__objet { left: auto; right: -8%; top: -6%; width: 18%; }
    .catalogue__onglets { display: flex; gap: 8px; margin: 0 -30px; padding: 6px 30px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 30px; scrollbar-width: none; }
    .catalogue__onglets::-webkit-scrollbar { display: none; }
    .catalogue .catalogue__onglet { flex: 0 0 auto; min-width: 92px; scroll-snap-align: start; }
    .catalogue__panneau { grid-template-columns: minmax(0, 1fr); padding: 24px 18px; }
    .catalogue__panneau[hidden] { display: none; }
    .catalogue__nom { font-size: 2.5rem; }
    .catalogue__slogan { font-size: 1.0625rem; }
    .catalogue__scene img.catalogue__carte,
    .catalogue__verso { width: min(100%, 220px); }
    .vitrine__tuile { flex-direction: column; }
    .vitrine__scene { flex: none; min-height: 0; border-right: 0; border-bottom: 1px solid var(--blanc-alpha-niveau-2); }
    /* Zones de toucher de 40 à 44 px sans changer le dessin : liens du pied de page et du fil d'Ariane, puces des catégories */
    .pied .elementor-icon-list-item > a,
    .fil a,
    .catalogue__element { position: relative; }
    .pied .elementor-icon-list-item > a::after { content: ''; position: absolute; inset: -10px 0; }
    .fil a::after { content: ''; position: absolute; inset: -13px -6px; }
    .catalogue__element::after { content: ''; position: absolute; inset: -7px 0; }
}

/* ==========================================================================
   Responsive - Petit Mobile
   ========================================================================== */
@media (max-width: 420px) {
    /* Trois chiffres sur un rang : « holographiques, » débordait sur la colonne voisine. Deux par rang. */
    .chiffres { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 15px 30px; }
}

/* ==========================================================================
   Sans Animation
   ========================================================================== */
html:not(.js-anim) .concept__epingle { height: auto; padding: 60px 0 120px; }
html:not(.js-anim) .vignette__rejouer { display: none; }
html:not(.js-anim) .rail__rempli { transform: none; }
html:not(.js-anim) .noeud { border-color: transparent; background: var(--vert); color: var(--noir); }
html:not(.js-anim) .noeud--orange { background: var(--orange); }
html:not(.js-anim) .diffusion__flux { display: none; }
html:not(.js-anim) .inscription__etat,
html:not(.js-anim) .attente__balayage,
html:not(.js-anim) .suivi__rejouer { display: none; }
html:not(.js-anim) .concept__etapes { display: flex; flex-direction: column; gap: 30px; }
html:not(.js-anim) .concept__etape { opacity: 1; visibility: visible; transform: none; }
html:not(.js-anim) .concept__compteur,
html:not(.js-anim) .concept__nav,
html:not(.js-anim) .concept__progression,
html:not(.js-anim):not(.elementor-html) .indice,
html:not(.js-anim) .stage__repere,
html:not(.js-anim) .stage__sachet,
html:not(.js-anim) .stage__tampon,
html:not(.js-anim) .stage__etiquette[data-e="1"],
html:not(.js-anim) .stage__etiquette[data-e="2"],
html:not(.js-anim) .verrou,
html:not(.js-anim) .pub__sachet,
html:not(.js-anim) .stage__carte,
html:not(.js-anim) .nfc__grande { display: none; }

@media (prefers-reduced-motion: reduce) {
    .hero__onde { animation: none; opacity: .7; }
    body::after,
    .aurore,
    .lumieres__halo,
    .stage__balayage,
    .defiler__trait::after,
    .accent-vert--reflet,
    .stage__onde,
    .nfc__onde,
    .lien-link::before,
    .lien-link::after,
    .gabarit__point,
    .sommaire__onde,
    .vignette__voyant,
    .roles__voie span,
    .diffusion__flux,
    .objet__onde,
    .evt__caret { animation: none !important; }
    .mega__promo img, .btn, .elementor-widget-button.smory-btn .elementor-button { transition: none; }
}


/* ==========================================================================
   Global - Page Introuvable (404)
   ========================================================================== */
/* « 4 [carte] 4 » : une vraie carte tient la place du zéro, à la hauteur des chiffres */
.introuvable__code {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .07em;
    font: var(--e-global-typography-titretg-font-weight) clamp(8rem, 24vw, 16rem) / .8 var(--police);
    letter-spacing: -.04em;
    color: var(--blanc-casse);
    user-select: none;
}
.introuvable__chiffre { display: block; }
.introuvable__carte { flex: none; width: .56em; rotate: -6deg; animation: introuvable-flotte 6s ease-in-out infinite; }
.introuvable__carte .smory-carte { width: 100%; }
.introuvable__carte .card-visual { filter: drop-shadow(0 30px 44px rgb(0 0 0 / .6)); }
@keyframes introuvable-flotte {
    0%, 100% { translate: 0 -2%; }
    50% { translate: 0 3%; }
}
.introuvable__boutons { display: flex; flex-wrap: wrap; justify-content: center; gap: 15px; }
.introuvable__note { display: flex; align-items: flex-start; gap: 10px; max-width: 560px; margin: 0; font: 400 .9375rem/1.55 var(--police); color: var(--gris); text-align: left; }
.introuvable__note i { flex: none; font-size: 1.15rem; line-height: 1.35; color: var(--vert); }
.introuvable__note a { color: var(--gris-clair); text-decoration: underline; text-underline-offset: 3px; transition: color .2s ease; }
.introuvable__note a:hover { color: var(--vert); }

@media (max-width: 767px) {
    .introuvable__boutons { flex-direction: column; align-self: stretch; }
    .introuvable__boutons > .elementor-widget-button.smory-btn,
    .introuvable__boutons > .elementor-widget-button.smory-btn .elementor-button { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
    .introuvable__carte { animation: none; }
}


/* ==========================================================================
   Global - Focus Clavier
   --------------------------------------------------------------------------
   L'anneau du navigateur (bleu, fin) remplacé par un contour vert, partout où
   un composant n'a pas déjà le sien (:where = aucune priorité).
   ========================================================================== */
:where(a, button, summary, [tabindex], input, select, textarea):focus-visible { outline: 2px solid var(--vert); outline-offset: 3px; }
.supports__arc:has(.arc:focus-visible) { outline: 2px solid var(--vert); outline-offset: 6px; border-radius: 16px; }
/* Hello 3.5 pose son propre anneau (noir, cerné de blanc) avec des sélecteurs plus forts que :where :
   mêmes sélecteurs ici, chargés après, pour garder le contour vert et retirer le cerne blanc. */
[tabindex]:not([tabindex="-1"]):focus-visible, a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { box-shadow: none; outline: 2px solid var(--vert); outline-offset: 3px; }
/* Composants qui dessinent leur contour ailleurs (sur un enfant, ou autour du carrousel) */
.supports__arc .arc[tabindex]:not([tabindex="-1"]):focus-visible,
.verso-carte[tabindex]:not([tabindex="-1"]):focus-visible { outline: 0; }
/* Étiquettes posées sur une carte : sans leur position (donnée par le script), elles s'empileraient */
.repere:not([style*="--ay"]) { display: none; }
/* Titres des tuiles « suite » : pas de mot seul en dernière ligne */
.suite strong { text-wrap: balance; }


/* ==========================================================================
   Global - Bandeau Cookies (Complianz)
   --------------------------------------------------------------------------
   Couleurs, rayons et textes réglés dans Complianz (09/10/2026). La taille du
   texte n'y est pas réglable en version gratuite : 12 px par défaut, relevée ici.
   ========================================================================== */
.cmplz-cookiebanner {
    --cmplz_text_font_size: 14px;
    --cmplz_text_line_height: 1.5;
    --cmplz_category_body_font_size: 13px;
    --cmplz_category_header_always_active_color: var(--vert);
}
/* Lignes de catégories (panneau « Voir les préférences ») : gris clair par défaut, illisible sur le fond sombre.
   La feuille de Complianz est chargée APRÈS celle-ci avec le même sélecteur : `body` devant pour passer. */
body .cmplz-cookiebanner .cmplz-categories .cmplz-category { background-color: var(--noir-niveau-2); border: 1px solid var(--blanc-alpha-niveau-1); border-radius: var(--rayon-imbrique); }
body .cmplz-cookiebanner .cmplz-categories .cmplz-category .cmplz-icon.cmplz-open { filter: invert(1); }
/* Un seul bouton, « J’ai compris » (choix de Julien, 16/10) : le site ne dépose aucun traceur soumis à
   consentement, refuser ou trier les catégories n’aurait aucun effet. La page Cookies reste liée dessous. */
body .cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-deny,
body .cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-view-preferences,
body .cmplz-cookiebanner .cmplz-close { display: none; }