/* ============================================================ ACCORD D — Paliers de transparence des heros La Rose des Sables By Saliha Ce fichier ne déclare plus la palette : les tokens de base (--rds-fond, --rds-encre, --rds-or, --rds-vert…) viennent de style.css, chargé avant lui sur les 4 pages concernées (Notre Histoire, Services, Atelier, Contact). Les redéclarer ici créait un second système à maintenir en parallèle. Il ne reste que les paliers de transparence RÉELLEMENT consommés par les règles décoratives ci-dessous : 236 autres paliers pré-calculés n'étaient référencés nulle part et ont été retirés le 2026-07-24. Ils sont désormais dérivés des tokens de base par color-mix() au lieu d'être écrits en HEX 8 chiffres. Les valeurs rendues sont identiques (vérifié : --rds-or-08-vert-deep donne bien #576856), mais elles suivent maintenant automatiquement toute évolution de la palette — c'est précisément la désynchro- nisation qui avait laissé l'échelle --rds-taupe-* sur une ancienne valeur. ============================================================ */ :root { /* Encre translucide — grain et vignettes des heros */ --rds-encre-04: color-mix(in srgb, var(--rds-encre) 4%, transparent); --rds-encre-06: color-mix(in srgb, var(--rds-encre) 6%, transparent); --rds-encre-08: color-mix(in srgb, var(--rds-encre) 8%, transparent); --rds-encre-10: color-mix(in srgb, var(--rds-encre) 10%, transparent); --rds-encre-12: color-mix(in srgb, var(--rds-encre) 12%, transparent); --rds-encre-14: color-mix(in srgb, var(--rds-encre) 14%, transparent); --rds-encre-15: color-mix(in srgb, var(--rds-encre) 15%, transparent); --rds-encre-18: color-mix(in srgb, var(--rds-encre) 18%, transparent); --rds-encre-22: color-mix(in srgb, var(--rds-encre) 22%, transparent); --rds-encre-28: color-mix(in srgb, var(--rds-encre) 28%, transparent); /* Blanc translucide — reflets */ --rds-white-04: color-mix(in srgb, #FFFFFF 4%, transparent); --rds-white-06: color-mix(in srgb, #FFFFFF 6%, transparent); --rds-white-08: color-mix(in srgb, #FFFFFF 8%, transparent); --rds-white-10: color-mix(in srgb, #FFFFFF 10%, transparent); --rds-white-12: color-mix(in srgb, #FFFFFF 12%, transparent); --rds-white-15: color-mix(in srgb, #FFFFFF 15%, transparent); --rds-white-18: color-mix(in srgb, #FFFFFF 18%, transparent); /* Vert profond translucide — halos latéraux */ --rds-vert-deep-18: color-mix(in srgb, var(--rds-vert-deep) 18%, transparent); --rds-vert-deep-22: color-mix(in srgb, var(--rds-vert-deep) 22%, transparent); --rds-vert-deep-28: color-mix(in srgb, var(--rds-vert-deep) 28%, transparent); /* Or translucide — filet du cadre */ --rds-or-28: color-mix(in srgb, var(--rds-or) 28%, transparent); /* Or posé en aplat sur le vert profond (opaque, pas de transparence) */ --rds-or-08-vert-deep: color-mix(in srgb, var(--rds-or) 8%, var(--rds-vert-deep)); } /* --- Relief editorial commun des heros Accord D --- */ .v1__edito.v1__edito { isolation: isolate; background: radial-gradient(ellipse 54% 58% at 30% 43%, var(--rds-white-12) 0%, var(--rds-white-06) 34%, #FFFFFF00 70%), radial-gradient(ellipse 42% 62% at 4% 16%, var(--rds-vert-deep-22) 0%, #2D5E3D00 74%), radial-gradient(ellipse 44% 64% at 96% 84%, var(--rds-vert-deep-28) 0%, #2D5E3D00 76%), radial-gradient(ellipse 122% 108% at 50% 50%, #FFFFFF00 32%, var(--rds-vert-deep-22) 100%), linear-gradient(122deg, var(--rds-white-04) 0%, #FFFFFF00 34%, var(--rds-encre-10) 100%), var(--rds-vert); } .v1__edito.v1__edito::before, .v1__edito.v1__edito::after { content: ''; position: absolute; pointer-events: none; z-index: 0; } .v1__edito.v1__edito::before { inset: 0; background: radial-gradient(circle at 16% 18%, var(--rds-white-12) 0 1.2px, #FFFFFF00 2.8px), radial-gradient(circle at 42% 34%, var(--rds-white-08) 0 1px, #FFFFFF00 2.6px), radial-gradient(circle at 72% 24%, var(--rds-encre-08) 0 1.1px, #2A1F1A00 2.7px), radial-gradient(circle at 88% 76%, var(--rds-white-10) 0 1.2px, #FFFFFF00 2.8px), radial-gradient(circle at 36% 86%, var(--rds-encre-06) 0 1px, #2A1F1A00 2.6px), radial-gradient(ellipse 28% 22% at 24% 28%, var(--rds-white-06) 0%, #FFFFFF00 76%), radial-gradient(ellipse 34% 26% at 74% 70%, var(--rds-encre-08) 0%, #2A1F1A00 78%), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='320' viewBox='0 0 320 320'%3E%3Cfilter id='rds-paper'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.68' numOctaves='4' seed='18'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 .70 0 0 0 0 .79 0 0 0 0 .69 0 0 0 .16 0'/%3E%3C/filter%3E%3Crect width='320' height='320' filter='url(%23rds-paper)'/%3E%3C/svg%3E"), linear-gradient(90deg, var(--rds-white-04), #FFFFFF00 30%, var(--rds-encre-08) 100%), linear-gradient(0deg, #FFFFFF00 0%, var(--rds-white-04) 52%, #FFFFFF00 100%); background-size: auto, auto, auto, auto, auto, auto, auto, 460px 460px, auto, auto; opacity: 0.88; } .v1__edito.v1__edito::after { inset: -14%; background: radial-gradient(ellipse 10% 27% at 3% 9%, var(--rds-encre-22) 0%, #2A1F1A00 74%), radial-gradient(ellipse 9% 24% at 8% 19%, var(--rds-encre-18) 0%, #2A1F1A00 76%), radial-gradient(ellipse 8% 22% at 15% 6%, var(--rds-encre-15) 0%, #2A1F1A00 76%), radial-gradient(ellipse 9% 24% at 19% 23%, var(--rds-encre-14) 0%, #2A1F1A00 78%), radial-gradient(ellipse 6% 31% at 7% 8%, var(--rds-encre-12) 0%, #2A1F1A00 78%), radial-gradient(ellipse 13% 34% at 96% 72%, var(--rds-encre-22) 0%, #2A1F1A00 75%), radial-gradient(ellipse 10% 28% at 89% 85%, var(--rds-encre-18) 0%, #2A1F1A00 76%), radial-gradient(ellipse 8% 24% at 99% 91%, var(--rds-encre-15) 0%, #2A1F1A00 78%), radial-gradient(ellipse 8% 24% at 82% 70%, var(--rds-encre-14) 0%, #2A1F1A00 78%), radial-gradient(ellipse 7% 36% at 94% 75%, var(--rds-encre-12) 0%, #2A1F1A00 78%); opacity: 0.92; } .v1__edito.v1__edito > * { position: relative; z-index: 1; } .v1__edito.v1__edito .v1__edito-inner, .v1__edito.v1__edito .v1__edito-right { z-index: 2; } .v1__edito.v1__edito .gold-frame.gold-frame--on-vert { background: radial-gradient(ellipse 78% 70% at 38% 30%, var(--rds-white-15) 0%, #FFFFFF00 72%), linear-gradient(135deg, var(--rds-white-12) 0%, var(--rds-white-04) 46%, var(--rds-encre-04) 100%), var(--rds-or-08-vert-deep); box-shadow: 0 0 0 3px var(--rds-vert), 0 0 0 4px var(--rds-or-28), 0 24px 68px var(--rds-encre-28), inset 0 1px 0 var(--rds-white-18), inset 0 0 46px var(--rds-white-08); } @media (max-width: 768px) { .v1__edito.v1__edito { background: radial-gradient(ellipse 72% 54% at 50% 32%, var(--rds-white-08) 0%, #FFFFFF00 72%), radial-gradient(ellipse 122% 94% at 50% 50%, #FFFFFF00 42%, var(--rds-vert-deep-18) 100%), var(--rds-vert); } .v1__edito.v1__edito::before { background: radial-gradient(circle at 16% 18%, var(--rds-white-06) 0 1.2px, #FFFFFF00 2.6px), radial-gradient(ellipse 42% 30% at 78% 72%, var(--rds-encre-06) 0%, #2A1F1A00 78%), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='320' viewBox='0 0 320 320'%3E%3Cfilter id='rds-paper'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.68' numOctaves='4' seed='18'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 .70 0 0 0 0 .79 0 0 0 0 .69 0 0 0 .13 0'/%3E%3C/filter%3E%3Crect width='320' height='320' filter='url(%23rds-paper)'/%3E%3C/svg%3E"); background-size: auto, 390px 390px; opacity: 0.68; } .v1__edito.v1__edito::after { opacity: 0.48; inset: -18%; } }