/* ─── Volume du site (06/11/2026) ──────────────────────────────────────────────────────────────────────────── * Odor : « le site est plat, il manque de profondeur, des petits effets de relief, de 3D… je veux du volume ». * Trois styles d'ESSAI, choisis dans Paramètres → Volume (visible seulement pour l'admin pendant les essais) et * retenus sur l'appareil : localStorage « hms_relief » → . * Sans choix (ou « plat ») : AUCUNE règle de ce fichier ne s'applique, le site reste tel quel. * Sur un fond sombre, une ombre noire ne se voit pas : le volume vient surtout de la LUMIÈRE (arêtes éclairées, * tranches teintées de la couleur du thème, halos) ; les ombres portées ne font que compléter. * Seulement des ombres, des reflets, des filtres et des transformations : aucune taille ni mise en page ne change. */ :root[data-relief] { --rl-haut: rgba(255, 255, 255, .13); /* arête éclairée (haut) */ --rl-haut-fort: rgba(255, 255, 255, .24); --rl-bas: rgba(0, 0, 0, .5); /* arête dans l'ombre (bas) */ --rl-ombre: 0, 0, 0; --rl-lueur: rgb(var(--lueur)); /* tranches des blocs (3D) : teintées de la couleur du thème, du plus clair (haut) au plus sombre (bas) */ --rl-t1: color-mix(in srgb, var(--rl-lueur) 56%, var(--surface-2)); --rl-t2: color-mix(in srgb, var(--rl-lueur) 42%, var(--surface)); --rl-t3: color-mix(in srgb, var(--rl-lueur) 28%, var(--nuit)); /* tranche des titres en relief */ --rl-x1: color-mix(in srgb, var(--braise) 78%, #000); --rl-x2: color-mix(in srgb, var(--braise) 58%, #000); --rl-x3: color-mix(in srgb, var(--braise) 38%, #000); --rl-touche: color-mix(in srgb, var(--braise-sombre) 72%, #000); } :root[data-relief][data-theme="clair"] { --rl-haut: rgba(255, 255, 255, .95); --rl-haut-fort: #fff; --rl-bas: rgba(40, 50, 90, .18); --rl-ombre: 40, 50, 90; --rl-t1: color-mix(in srgb, var(--rl-lueur) 30%, #c9d0e6); --rl-t2: color-mix(in srgb, var(--rl-lueur) 22%, #b4bdd8); --rl-t3: color-mix(in srgb, var(--rl-lueur) 14%, #9aa4c4); } /* ═══════════════ 1. RELIEF DOUX : les blocs sont bombés, la lumière tombe d'en haut ═══════════════ */ :root[data-relief="doux"] :is(.tuile, .encart, .jeu, .monde, .resultat, .carte-demande, .ac-carte, .machine, .service-tuile, .jv-carte, .db-carte, .mc-carte, .sortie, .episode, .saison-ligne, .sp-tuile, .actu-carte, .maison-tuile, .carte-tmdb, .table, .ligne-demande, .jeu-carte, .jv-mesure, .cockpit-meteo, .fil) { box-shadow: inset 0 1px 0 var(--rl-haut-fort), inset 0 40px 50px -40px rgba(255, 255, 255, .10), inset 0 -30px 40px -30px rgba(var(--rl-ombre), .55), inset 0 -1px 0 var(--rl-bas), 0 2px 3px rgba(var(--rl-ombre), .45), 0 18px 34px -18px rgba(var(--rl-ombre), .9), 0 22px 44px -30px rgba(var(--lueur), .35); } :root[data-relief="doux"] :is(.cockpit, .heros, .jv-hero) { box-shadow: inset 0 1px 0 var(--rl-haut-fort), inset 0 80px 90px -80px rgba(255, 255, 255, .10), inset 0 -60px 70px -60px rgba(var(--rl-ombre), .6), 0 3px 6px rgba(var(--rl-ombre), .5), 0 40px 80px -40px rgba(var(--rl-ombre), 1), 0 30px 80px -50px rgba(var(--lueur), .6); } :root[data-relief="doux"] :is(.affiche .image, .fiche .poster, .cd-affiche img) { box-shadow: 0 0 0 1px rgba(255, 255, 255, .10), 0 3px 4px rgba(var(--rl-ombre), .5), 0 20px 30px -14px rgba(var(--rl-ombre), .95), 0 18px 36px -24px rgba(var(--lueur), .45); } :root[data-relief="doux"] :is(.affiche:hover .image, .affiche .image.incline) { box-shadow: 0 0 0 1px rgba(var(--lueur), .5), 0 4px 6px rgba(var(--rl-ombre), .45), 0 32px 42px -18px rgba(var(--rl-ombre), 1), 0 0 30px -8px rgba(var(--lueur), .6); } :root[data-relief="doux"] :is(.bouton, .sg-bouton, .tc-filtres button, .tc-onglets button, .pastille, .puce, .cockpit-affiche) { background-image: linear-gradient(180deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, 0) 55%, rgba(0, 0, 0, .16)); box-shadow: inset 0 1px 0 var(--rl-haut-fort), inset 0 -1px 0 var(--rl-bas), 0 2px 3px rgba(var(--rl-ombre), .5), 0 8px 14px -6px rgba(var(--rl-ombre), .75); } :root[data-relief="doux"] .bouton.plein { background-image: linear-gradient(180deg, rgba(255, 255, 255, .28), rgba(255, 255, 255, 0) 50%), linear-gradient(180deg, var(--braise), var(--braise-sombre)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), inset 0 -2px 0 rgba(0, 0, 0, .22), 0 2px 3px rgba(var(--rl-ombre), .5), 0 12px 22px -8px rgba(var(--lueur), .7); } :root[data-relief="doux"] :is(.bouton, .sg-bouton, .tc-filtres button, .tc-onglets button):active { transform: translateY(1px); box-shadow: inset 0 3px 7px rgba(var(--rl-ombre), .6), inset 0 -1px 0 rgba(255, 255, 255, .06); } :root[data-relief="doux"] :is(input:not([type=checkbox]):not([type=radio]):not([type=range]), select, textarea, .recherche) { box-shadow: inset 0 3px 7px rgba(var(--rl-ombre), .6), inset 0 1px 1px rgba(var(--rl-ombre), .5), 0 1px 0 var(--rl-haut); } :root[data-relief="doux"] .horloge { border-radius: 50%; box-shadow: inset 0 2px 0 var(--rl-haut-fort), inset 0 -10px 22px rgba(var(--rl-ombre), .6), 0 16px 30px -12px rgba(var(--rl-ombre), .9), 0 0 34px -12px rgba(var(--lueur), .6); } :root[data-relief="doux"] .rail { box-shadow: inset -1px 0 0 var(--rl-haut), 16px 0 36px -22px rgba(var(--rl-ombre), .95); } :root[data-relief="doux"] .barre { box-shadow: 0 1px 0 var(--rl-haut), 0 16px 32px -22px rgba(var(--rl-ombre), 1); } :root[data-relief="doux"] :is(.cockpit-gauche h1, .entete h1) { text-shadow: 0 1px 0 rgba(255, 255, 255, .25), 0 3px 4px rgba(var(--rl-ombre), .5), 0 10px 26px rgba(var(--rl-ombre), .6); } /* ═══════════════ 2. PROFONDEUR : des plaques de verre qui flottent au-dessus du décor, éclairées par le bord ═══════════════ */ :root[data-relief="profond"] :is(.tuile, .encart, .jeu, .monde, .resultat, .carte-demande, .ac-carte, .machine, .service-tuile, .jv-carte, .db-carte, .mc-carte, .sortie, .episode, .saison-ligne, .sp-tuile, .actu-carte, .maison-tuile, .carte-tmdb, .table, .ligne-demande, .jeu-carte, .jv-mesure, .cockpit-meteo, .fil) { border-color: rgba(255, 255, 255, .10); box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .20), inset -1px -1px 0 rgba(var(--rl-ombre), .5), inset 0 0 30px -12px rgba(var(--lueur), .25), 0 3px 6px rgba(var(--rl-ombre), .4), 0 34px 60px -28px rgba(var(--rl-ombre), 1), 0 40px 80px -46px rgba(var(--lueur), .8); } /* le verre : seulement sur les grands panneaux (le flou coûte cher sur une longue liste) */ :root[data-relief="profond"] :is(.encart, .tuile, .machine, .service-tuile, .jv-carte, .db-carte, .mc-carte, .ac-carte, .carte-demande, .maison-tuile, .fil) { background-color: color-mix(in srgb, var(--surface) 62%, transparent); backdrop-filter: blur(16px) saturate(1.5); -webkit-backdrop-filter: blur(16px) saturate(1.5); } :root[data-relief="profond"][data-theme="clair"] :is(.encart, .tuile, .machine, .service-tuile, .jv-carte, .db-carte, .mc-carte, .ac-carte, .carte-demande, .maison-tuile, .fil) { background-color: color-mix(in srgb, var(--surface) 78%, transparent); } /* le grand bloc d'accueil : une baie vitrée, le décor de fond reste derrière */ :root[data-relief="profond"] :is(.cockpit, .heros, .jv-hero) { border-color: rgba(255, 255, 255, .14); box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .22), inset -1px -1px 0 rgba(var(--rl-ombre), .5), inset 0 0 80px -30px rgba(var(--lueur), .45), 0 6px 12px rgba(var(--rl-ombre), .45), 0 60px 110px -50px rgba(var(--rl-ombre), 1), 0 60px 140px -70px rgba(var(--lueur), .95); } :root[data-relief="profond"] .cockpit-meteo { transform: translateZ(0) translateY(-4px); } :root[data-relief="profond"] :is(.affiche .image, .fiche .poster, .cd-affiche img) { box-shadow: 0 0 0 1px rgba(255, 255, 255, .12), 0 4px 8px rgba(var(--rl-ombre), .55), 0 30px 40px -16px rgba(var(--rl-ombre), 1), 0 34px 56px -30px rgba(var(--lueur), .85); } :root[data-relief="profond"] :is(.affiche:hover .image, .affiche .image.incline) { box-shadow: 0 0 0 1px rgba(var(--lueur), .6), 0 6px 10px rgba(var(--rl-ombre), .45), 0 44px 60px -22px rgba(var(--rl-ombre), 1), 0 0 46px -8px rgba(var(--lueur), .85); } /* les rangées d'affiches posées sur une étagère de lumière */ :root[data-relief="profond"] .defile { background: radial-gradient(70% 22px at 50% calc(100% - 4px), rgba(var(--lueur), .28), transparent 72%); } :root[data-relief="profond"] :is(.bouton, .sg-bouton, .tc-filtres button, .tc-onglets button, .pastille, .puce, .cockpit-affiche) { box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .18), inset -1px -1px 0 rgba(var(--rl-ombre), .4), 0 10px 20px -8px rgba(var(--rl-ombre), .9), 0 8px 22px -12px rgba(var(--lueur), .6); } :root[data-relief="profond"] .bouton.plein { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), 0 12px 28px -8px rgba(var(--lueur), .9), 0 0 0 1px rgba(var(--lueur), .4); } :root[data-relief="profond"] :is(input:not([type=checkbox]):not([type=radio]):not([type=range]), select, textarea, .recherche) { box-shadow: inset 0 3px 9px rgba(var(--rl-ombre), .6), inset 0 0 0 1px rgba(255, 255, 255, .05), 0 1px 0 rgba(255, 255, 255, .08); } :root[data-relief="profond"] .horloge { border-radius: 50%; box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .2), inset 0 0 30px -6px rgba(var(--lueur), .5), 0 20px 40px -14px rgba(var(--rl-ombre), 1), 0 0 50px -10px rgba(var(--lueur), .8); } :root[data-relief="profond"] .rail { box-shadow: inset -1px 0 0 rgba(255, 255, 255, .12), 30px 0 60px -34px rgba(var(--rl-ombre), 1), 20px 0 60px -40px rgba(var(--lueur), .6); } :root[data-relief="profond"] .barre { box-shadow: 0 1px 0 rgba(255, 255, 255, .09), 0 26px 48px -28px rgba(var(--rl-ombre), 1); } /* les titres flottent un peu au-dessus de la page */ :root[data-relief="profond"] :is(.cockpit-gauche h1, .entete h1) { filter: drop-shadow(0 2px 0 rgba(255, 255, 255, .06)) drop-shadow(0 14px 18px rgba(var(--rl-ombre), .75)) drop-shadow(0 0 30px rgba(var(--lueur), .35)); } :root[data-relief="profond"] .rangee-tete h2 { filter: drop-shadow(0 8px 12px rgba(var(--rl-ombre), .8)) drop-shadow(0 0 18px rgba(var(--lueur), .3)); } /* ═══════════════ 3. 3D : des blocs épais dont on voit la tranche, des boutons-touches, des titres sculptés ═══════════════ */ :root[data-relief="3d"] :is(.tuile, .encart, .jeu, .monde, .resultat, .carte-demande, .ac-carte, .machine, .service-tuile, .jv-carte, .db-carte, .mc-carte, .sortie, .episode, .saison-ligne, .sp-tuile, .actu-carte, .maison-tuile, .carte-tmdb, .table, .ligne-demande, .jeu-carte, .jv-mesure, .cockpit-meteo, .fil) { box-shadow: inset 0 1px 0 var(--rl-haut-fort), inset 0 -1px 0 var(--rl-bas), 0 1px 0 var(--rl-t1), 0 2px 0 var(--rl-t1), 0 3px 0 var(--rl-t2), 0 4px 0 var(--rl-t2), 0 5px 0 var(--rl-t2), 0 6px 0 var(--rl-t3), 0 7px 0 var(--rl-t3), 0 8px 2px rgba(var(--rl-ombre), .6), 0 24px 34px -12px rgba(var(--rl-ombre), .95), 0 20px 44px -22px rgba(var(--lueur), .55); transition: transform .25s cubic-bezier(.2, .8, .2, 1), box-shadow .25s; } :root[data-relief="3d"] :is(.tuile, .machine, .service-tuile, .jv-carte, .db-carte, .mc-carte, .sp-tuile, .actu-carte, .maison-tuile, .jeu-carte, .carte-tmdb):hover { transform: translateY(-4px); box-shadow: inset 0 1px 0 var(--rl-haut-fort), inset 0 -1px 0 var(--rl-bas), 0 1px 0 var(--rl-t1), 0 2px 0 var(--rl-t1), 0 3px 0 var(--rl-t1), 0 4px 0 var(--rl-t2), 0 5px 0 var(--rl-t2), 0 6px 0 var(--rl-t2), 0 7px 0 var(--rl-t2), 0 8px 0 var(--rl-t3), 0 9px 0 var(--rl-t3), 0 10px 0 var(--rl-t3), 0 11px 0 var(--rl-t3), 0 12px 3px rgba(var(--rl-ombre), .6), 0 38px 44px -14px rgba(var(--rl-ombre), 1), 0 0 40px -10px rgba(var(--lueur), .75); } /* le grand bloc d'accueil : une dalle épaisse */ :root[data-relief="3d"] :is(.cockpit, .heros, .jv-hero) { box-shadow: inset 0 1px 0 var(--rl-haut-fort), inset 0 0 0 1px rgba(var(--lueur), .25), 0 2px 0 var(--rl-t1), 0 4px 0 var(--rl-t1), 0 6px 0 var(--rl-t2), 0 8px 0 var(--rl-t2), 0 10px 0 var(--rl-t2), 0 12px 0 var(--rl-t3), 0 14px 0 var(--rl-t3), 0 16px 4px rgba(var(--rl-ombre), .6), 0 50px 80px -30px rgba(var(--rl-ombre), 1), 0 40px 100px -50px rgba(var(--lueur), .8); margin-bottom: 40px; } :root[data-relief="3d"] .cockpit-meteo { transform: translateY(-6px); } /* les affiches : une vraie épaisseur de carton, éclairée par la couleur du thème */ :root[data-relief="3d"] :is(.affiche .image, .fiche .poster, .cd-affiche img) { box-shadow: 0 0 0 1px rgba(255, 255, 255, .12), 1px 1px 0 var(--rl-t1), 2px 2px 0 var(--rl-t1), 3px 3px 0 var(--rl-t2), 4px 4px 0 var(--rl-t2), 5px 5px 0 var(--rl-t3), 6px 6px 2px rgba(var(--rl-ombre), .6), 16px 28px 30px -12px rgba(var(--rl-ombre), .95), 0 24px 44px -26px rgba(var(--lueur), .7); } :root[data-relief="3d"] :is(.affiche:hover .image, .affiche .image.incline) { box-shadow: 0 0 0 1px rgba(var(--lueur), .65), 1px 1px 0 var(--rl-t1), 2px 2px 0 var(--rl-t1), 3px 3px 0 var(--rl-t1), 4px 4px 0 var(--rl-t2), 5px 5px 0 var(--rl-t2), 6px 6px 0 var(--rl-t2), 7px 7px 0 var(--rl-t3), 8px 8px 0 var(--rl-t3), 9px 9px 2px rgba(var(--rl-ombre), .6), 22px 40px 40px -14px rgba(var(--rl-ombre), 1), 0 0 44px -6px rgba(var(--lueur), .8); } /* boutons et pastilles : des touches avec une tranche dessous, qui s'enfoncent au clic */ :root[data-relief="3d"] :is(.bouton, .sg-bouton, .tc-filtres button, .tc-onglets button, .pastille, .cockpit-affiche) { background-image: linear-gradient(180deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, 0) 60%); box-shadow: inset 0 1px 0 var(--rl-haut-fort), 0 1px 0 var(--rl-t1), 0 2px 0 var(--rl-t1), 0 3px 0 var(--rl-t2), 0 4px 0 var(--rl-t3), 0 5px 2px rgba(var(--rl-ombre), .6), 0 14px 20px -8px rgba(var(--rl-ombre), .8); transition: transform .08s, box-shadow .08s; } :root[data-relief="3d"] .bouton.plein { background-image: linear-gradient(180deg, rgba(255, 255, 255, .3), rgba(255, 255, 255, 0) 55%), linear-gradient(180deg, var(--braise), var(--braise-sombre)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 1px 0 var(--rl-touche), 0 2px 0 var(--rl-touche), 0 3px 0 var(--rl-touche), 0 4px 0 var(--rl-touche), 0 5px 2px rgba(var(--rl-ombre), .6), 0 16px 26px -8px rgba(var(--lueur), .75); } :root[data-relief="3d"] :is(.bouton, .sg-bouton, .tc-filtres button, .tc-onglets button):active { transform: translateY(3px); box-shadow: inset 0 1px 0 var(--rl-haut), 0 1px 0 var(--rl-t2), 0 2px 1px rgba(var(--rl-ombre), .6), 0 6px 10px -6px rgba(var(--rl-ombre), .8); } :root[data-relief="3d"] .bouton.plein:active { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 1px 0 var(--rl-touche), 0 4px 10px -6px rgba(var(--lueur), .7); } :root[data-relief="3d"] .puce { box-shadow: inset 0 1px 0 var(--rl-haut-fort), 0 1px 0 var(--rl-t1), 0 2px 0 var(--rl-t2), 0 3px 2px rgba(var(--rl-ombre), .5); } :root[data-relief="3d"] :is(input:not([type=checkbox]):not([type=radio]):not([type=range]), select, textarea, .recherche) { box-shadow: inset 0 4px 0 rgba(var(--rl-ombre), .4), inset 0 5px 12px rgba(var(--rl-ombre), .6), 0 1px 0 var(--rl-haut-fort); } /* l'horloge : un cadran bombé, enchâssé dans le bloc */ :root[data-relief="3d"] .horloge { border-radius: 50%; box-shadow: inset 0 3px 0 var(--rl-haut-fort), inset 0 -14px 26px rgba(var(--rl-ombre), .7), 0 1px 0 var(--rl-t1), 0 3px 0 var(--rl-t2), 0 5px 0 var(--rl-t3), 0 6px 3px rgba(var(--rl-ombre), .6), 0 22px 36px -14px rgba(var(--rl-ombre), 1), 0 0 40px -10px rgba(var(--lueur), .7); } :root[data-relief="3d"] .rail { box-shadow: inset -1px 0 0 var(--rl-haut), 1px 0 0 var(--rl-t1), 2px 0 0 var(--rl-t2), 3px 0 0 var(--rl-t2), 4px 0 0 var(--rl-t3), 5px 0 3px rgba(var(--rl-ombre), .6), 28px 0 46px -26px rgba(var(--rl-ombre), 1); } :root[data-relief="3d"] .barre { box-shadow: 0 1px 0 var(--rl-haut), 0 2px 0 var(--rl-t2), 0 3px 0 var(--rl-t3), 0 4px 3px rgba(var(--rl-ombre), .6), 0 26px 42px -26px rgba(var(--rl-ombre), 1); } /* titres sculptés : le texte sort de la page, avec une tranche dans la couleur du thème (filtre plutôt qu'ombre de texte : il respecte les mots en dégradé comme « Odor ») */ :root[data-relief="3d"] :is(.cockpit-gauche h1, .entete h1, .rangee-tete h2, .chiffres-geants) { text-shadow: none; } /* l'ombre floue d'origine ferait un halo coloré */ :root[data-relief="3d"] :is(.cockpit-gauche h1, .entete h1) { filter:drop-shadow(0 1px 0 var(--rl-x1)) drop-shadow(0 1px 0 var(--rl-x1)) drop-shadow(0 1px 0 var(--rl-x2)) drop-shadow(0 1px 0 var(--rl-x2)) drop-shadow(0 1px 0 var(--rl-x3)) drop-shadow(0 1px 0 var(--rl-x3)) drop-shadow(0 10px 12px rgba(var(--rl-ombre), .7)); } :root[data-relief="3d"] :is(.rangee-tete h2, .chiffres-geants) { filter: drop-shadow(0 1px 0 var(--rl-x1)) drop-shadow(0 1px 0 var(--rl-x2)) drop-shadow(0 1px 0 var(--rl-x3)) drop-shadow(0 6px 8px rgba(var(--rl-ombre), .65)); } :root[data-relief="3d"][data-theme="clair"] :is(.cockpit-gauche h1, .entete h1, .rangee-tete h2, .chiffres-geants) { filter: drop-shadow(0 1px 0 color-mix(in srgb, var(--braise) 40%, #fff)) drop-shadow(0 1px 0 color-mix(in srgb, var(--braise) 55%, #fff)) drop-shadow(0 4px 5px rgba(40, 50, 90, .25)); } /* ═══════════════ PLUS DE LUMIÈRE (06/11, Odor : « un peu sombre ») ═══════════════ * Un voile de lumière tombe sur le haut des panneaux ; en 3D, les panneaux prennent une pointe de la couleur du thème. */ :root[data-relief] :is(.tuile, .encart, .machine, .service-tuile, .jv-carte, .db-carte, .mc-carte, .ac-carte, .carte-demande, .resultat, .jeu, .monde, .sp-tuile, .maison-tuile, .actu-carte, .cockpit-meteo, .fil, .table, .episode, .saison-ligne, .ligne-demande, .jeu-carte) { background-image: linear-gradient(180deg, rgba(255, 255, 255, .085), rgba(255, 255, 255, .03) 32%, rgba(255, 255, 255, 0) 70%); } :root[data-relief="3d"] :is(.tuile, .encart, .machine, .service-tuile, .jv-carte, .db-carte, .mc-carte, .ac-carte, .carte-demande, .resultat, .jeu, .monde, .sp-tuile, .maison-tuile, .actu-carte, .cockpit-meteo, .table, .jeu-carte) { background-color: color-mix(in srgb, var(--surface) 86%, var(--rl-lueur) 14%); } :root[data-relief="3d"] .cockpit { background-color: color-mix(in srgb, var(--surface) 80%, var(--rl-lueur) 20%); } /* ═══════════════ LE LOGO : UNE FLAMME VIVANTE (06/11, Odor : « qu'il bouge, comme une vraie flamme, en 3D ») ═══════════════ * Trois couches de flamme (extérieure rouge, milieu orange, cœur blanc) qui dansent chacune à son rythme, des bords qui * ondulent, des braises qui montent, et la lueur du feu qui éclaire son foyer. Seulement avec un volume choisi. */ .marque .logo-vivant { display: none; } :root[data-relief] .marque .logo-fixe { display: none; } :root[data-relief] .marque .logo-vivant { display: block; flex: none; width: 38px; height: 38px; overflow: visible; animation: lv-pouls 2.4s ease-in-out infinite; transition: transform .4s cubic-bezier(.2, .8, .2, 1.2); } :root[data-relief] .marque:hover .logo-vivant { transform: scale(1.12) translateY(-1px); } .logo-vivant :is(.lv-ext, .lv-mil, .lv-coeur, .lv-halo) { transform-box: view-box; } .logo-vivant .lv-ext { transform-origin: 32px 50px; animation: lv-danse 1.7s ease-in-out infinite alternate; } .logo-vivant .lv-mil { transform-origin: 32px 49px; animation: lv-danse2 1.15s ease-in-out infinite alternate; } .logo-vivant .lv-coeur { transform-origin: 32px 46px; animation: lv-danse3 .8s ease-in-out infinite alternate; } .logo-vivant .lv-halo { transform-origin: 32px 46px; animation: lv-halo 1.9s ease-in-out infinite alternate; } .logo-vivant .lv-lit { animation: lv-lit 1.3s ease-in-out infinite alternate; } .logo-vivant .lv-braises circle { opacity: 0; animation: lv-braise 2.3s linear infinite; } .logo-vivant .lv-b2 { animation-delay: .8s; } .logo-vivant .lv-b3 { animation-delay: 1.5s; } .marque:hover .logo-vivant .lv-ext { animation-duration: .75s; } .marque:hover .logo-vivant .lv-mil { animation-duration: .55s; } @keyframes lv-danse { 0% { transform: scale(1, 1) skewX(0deg); } 25% { transform: scale(1.04, .95) skewX(-4deg); } 50% { transform: scale(.96, 1.07) skewX(2.5deg); } 75% { transform: scale(1.02, .97) skewX(-2deg); } 100% { transform: scale(.98, 1.05) skewX(3.5deg); } } @keyframes lv-danse2 { 0% { transform: scale(1, 1) skewX(2deg) translateY(0); } 50% { transform: scale(.94, 1.1) skewX(-3.5deg) translateY(-1px); } 100% { transform: scale(1.05, .95) skewX(3deg) translateY(.5px); } } @keyframes lv-danse3 { 0% { transform: scale(1, 1); opacity: 1; } 50% { transform: scale(.88, 1.14); opacity: .82; } 100% { transform: scale(1.07, .93); opacity: 1; } } @keyframes lv-halo { from { opacity: .65; transform: scale(.94); } to { opacity: 1; transform: scale(1.07); } } @keyframes lv-lit { from { opacity: .4; } to { opacity: .95; } } @keyframes lv-braise { 0% { transform: translate(0, 0); opacity: 0; } 12% { opacity: 1; } 100% { transform: translate(2.5px, -32px); opacity: 0; } } @keyframes lv-pouls { 0%, 100% { filter: drop-shadow(0 4px 5px rgba(0, 0, 0, .6)) drop-shadow(0 0 7px rgba(255, 120, 40, .35)); } 50% { filter: drop-shadow(0 4px 5px rgba(0, 0, 0, .6)) drop-shadow(0 0 16px rgba(255, 140, 40, .75)); } } /* la lueur du feu éclaire le haut de la barre */ :root[data-relief] .rail-tete { position: relative; } :root[data-relief] .rail-tete::before { content: ""; position: absolute; left: -14px; top: -22px; width: 150px; height: 110px; pointer-events: none; z-index: -1; background: radial-gradient(50% 50% at 30% 45%, rgba(255, 130, 40, .22), transparent 70%); animation: lv-halo 1.9s ease-in-out infinite alternate; } @media (prefers-reduced-motion: reduce) { .logo-vivant, .logo-vivant *, :root[data-relief] .rail-tete::before { animation: none !important; } } /* moins d'animation demandée par le système : on garde le relief, sans mouvement */ @media (prefers-reduced-motion: reduce) { :root[data-relief] :is(.tuile, .machine, .service-tuile, .jv-carte, .db-carte, .mc-carte, .sp-tuile, .actu-carte, .maison-tuile, .jeu-carte, .carte-tmdb):hover { transform: none; } } /* téléphones : un flou plus léger (la batterie et la fluidité d'abord) */ @media (max-width: 700px) { :root[data-relief="profond"] :is(.encart, .tuile, .machine, .service-tuile, .jv-carte, .db-carte, .mc-carte, .ac-carte, .carte-demande, .maison-tuile, .fil) { backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } } /* ─── aperçus dans Paramètres → Volume (chaque vignette montre son propre style, quel que soit le choix actuel) ─── */ .relief-choix i { background: var(--surface-2); border-radius: 10px; margin-bottom: 8px; } .relief-apercu-plat { border: 1px solid var(--trait); } .relief-apercu-doux { background-image: linear-gradient(180deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, 0) 50%, rgba(0, 0, 0, .22)) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .24), inset 0 -1px 0 rgba(0, 0, 0, .5), 0 10px 16px -8px rgba(0, 0, 0, .9); } .relief-apercu-profond { background-color: color-mix(in srgb, var(--surface-2) 65%, transparent) !important; box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .24), inset -1px -1px 0 rgba(0, 0, 0, .5), inset 0 0 20px -6px rgba(var(--lueur), .5), 0 16px 24px -12px rgba(0, 0, 0, 1), 0 14px 30px -12px rgba(var(--lueur), .9); } .relief-apercu-3d { transform: translateY(-5px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .26), 0 1px 0 color-mix(in srgb, rgb(var(--lueur)) 45%, var(--surface-2)), 0 2px 0 color-mix(in srgb, rgb(var(--lueur)) 45%, var(--surface-2)), 0 3px 0 color-mix(in srgb, rgb(var(--lueur)) 30%, var(--surface)), 0 4px 0 color-mix(in srgb, rgb(var(--lueur)) 30%, var(--surface)), 0 5px 0 color-mix(in srgb, rgb(var(--lueur)) 18%, var(--nuit)), 0 6px 2px #0009, 0 16px 18px -8px #000d, 0 12px 26px -12px rgba(var(--lueur), .7); }