/* =====================================================================
   Palette « Lumière » : data-palette="lumiere" sur <html>.

   Le raisonnement :
   - 2000-2012, relief et brillance ; 2013-2017, tout à plat ; 2018-2021, ombres
     (Material, néomorphisme) ; 2021-2026, verre, flou et lumière (iOS « Liquid Glass »).
     Le balancier relief / à plat revient environ tous les 6 ans, de moins en moins fort.
     La suite logique : un relief sobre, avec une seule source de lumière cohérente,
     des matières douces et des mouvements physiques.
   - Couleurs en OKLCH : même clarté perçue pour toutes les teintes, donc aucune ne crie
     plus fort qu'une autre.
   - Teintes des annonces et des catégories : angle d'or (137,508°). Chaque nouvelle
     couleur tombe le plus loin possible des précédentes, comme les graines d'un tournesol.
   - Tailles de texte : suite géométrique de raison √φ ≈ 1,272 (φ = nombre d'or).
   - Coins emboîtés : rayon extérieur = rayon intérieur + marge, pour des courbes parallèles.
   - Mouvements : courbe de ressort (fonction linear()), comme un objet réel.
   ===================================================================== */

:root[data-palette="lumiere"]{
  --golden:137.508deg;
  --r:1.272;                                   /* √φ */
  --fs1:1rem; --fs2:calc(var(--fs1)*var(--r)); --fs3:calc(var(--fs2)*var(--r));
  --fs4:calc(var(--fs3)*var(--r)); --fs5:calc(var(--fs4)*var(--r)); --fs6:calc(var(--fs5)*var(--r));
  --spring:linear(0,.009,.035 2.1%,.141 4.4%,.723 12.9%,.938 16.7%,1.017 19.4%,1.067,1.077 24.6%,1.067 27.3%,1.004 35.4%,.99 40.2%,.995 49.4%,1.001 63.1%,1);
  --serif:"Instrument Serif",Georgia,serif;

  --bg:oklch(98.4% .008 75); --fg:oklch(21% .02 50);
  --card:oklch(100% 0 0 / .74); --panel:oklch(96.2% .012 72); --hover:oklch(94% .016 70);
  --fg2:oklch(44% .02 55); --muted:oklch(57% .02 60);
  --bd:oklch(89% .016 70); --bd2:oklch(93% .01 70); --line:oklch(84% .03 65);
  --acc:oklch(56% .15 45); --acc2:oklch(49% .14 42); --acc-soft:oklch(95% .035 70); --onacc:#fff;
  --ink:oklch(21% .02 50); --onink:oklch(98.4% .008 75);   /* boutons principaux : encre */
  --ok:oklch(48% .12 150); --okbg:oklch(95% .04 150); --red:oklch(52% .18 28); --redbg:oklch(95.5% .03 28);
  --inv:oklch(21% .02 50); --invfg:oklch(98.4% .008 75);
  --glass-edge:oklch(100% 0 0 / .8);
  --hl:oklch(100% 0 0 / .9);
  --L:88%; --C:.07;                            /* clarté et intensité des teintes d'annonces */
  /* Une seule lumière, en haut à gauche : toutes les ombres tombent vers le bas à droite */
  --shadow:0 1px 1px oklch(30% .03 50 / .05),4px 10px 24px -8px oklch(30% .04 50 / .14);
  --shadow-up:0 2px 2px oklch(30% .03 50 / .06),10px 24px 48px -14px oklch(30% .05 50 / .24);
  --logo:oklch(76% .14 68); --logo-fg:#fff;
}
:root[data-palette="lumiere"][data-theme="dark"]{
  --bg:oklch(16.5% .014 50); --fg:oklch(96% .01 80);
  --card:oklch(24% .016 55 / .66); --panel:oklch(22% .015 55); --hover:oklch(27% .018 55);
  --fg2:oklch(80% .015 70); --muted:oklch(66% .015 65);
  --bd:oklch(32% .02 55); --bd2:oklch(27% .016 55); --line:oklch(40% .03 60);
  --acc:oklch(79% .14 68); --acc2:oklch(84% .12 72); --acc-soft:oklch(28% .04 60); --onacc:oklch(18% .02 50);
  --ink:oklch(95% .015 80); --onink:oklch(18% .02 50);
  --ok:oklch(80% .12 150); --okbg:oklch(26% .04 150); --red:oklch(75% .14 28); --redbg:oklch(26% .05 28);
  --inv:oklch(95% .015 80); --invfg:oklch(18% .02 50);
  --glass-edge:oklch(100% 0 0 / .09);
  --hl:oklch(100% 0 0 / .07);
  --L:34%; --C:.06;
  --shadow:0 1px 1px oklch(0% 0 0 / .3),4px 10px 24px -8px oklch(0% 0 0 / .55);
  --shadow-up:0 2px 2px oklch(0% 0 0 / .35),10px 24px 48px -14px oklch(0% 0 0 / .7);
  --logo-fg:oklch(18% .02 50);
}

/* ===== Fond : une aurore lente derrière la page (teintes à l'angle d'or) ===== */
[data-palette="lumiere"] body::before{content:"";position:fixed;inset:-20%;z-index:-1;pointer-events:none;filter:blur(60px);opacity:.55;
  background:
    radial-gradient(30% 35% at 18% 22%,oklch(var(--L) .09 60),transparent 70%),
    radial-gradient(28% 32% at 82% 18%,oklch(var(--L) .08 calc(60deg + var(--golden))),transparent 70%),
    radial-gradient(34% 30% at 60% 80%,oklch(var(--L) .08 calc(60deg + 2 * var(--golden))),transparent 70%);
  animation:aurora 48s ease-in-out infinite alternate}
@keyframes aurora{to{transform:translate3d(4%,-3%,0) rotate(8deg) scale(1.08)}}

/* ===== Typographie : titres en sérif éditorial, tailles au nombre d'or ===== */
[data-palette="lumiere"] .hero h1{font-family:var(--serif);font-weight:400;font-size:clamp(var(--fs5),7vw,calc(var(--fs6) * 1.272));letter-spacing:-.01em;line-height:1}
[data-palette="lumiere"] .hero h1 span{font-style:italic;color:var(--acc)}
[data-palette="lumiere"] h1.t,[data-palette="lumiere"] .legal h1{font-family:var(--serif);font-weight:400;font-size:clamp(var(--fs4),5vw,var(--fs5));letter-spacing:0}
[data-palette="lumiere"] .sec h2,[data-palette="lumiere"] .duo h2{font-family:var(--serif);font-weight:400;font-size:clamp(var(--fs3),4vw,var(--fs4));letter-spacing:0}
[data-palette="lumiere"] .price{font-variant-numeric:tabular-nums;letter-spacing:-.02em}

/* ===== Matière : verre chaud, bord lumineux, ombre portée cohérente ===== */
[data-palette="lumiere"] .card,[data-palette="lumiere"] .step,[data-palette="lumiere"] .notif,
[data-palette="lumiere"] .duo>div,[data-palette="lumiere"] .about,
[data-palette="lumiere"] .search,[data-palette="lumiere"] .tabs,[data-palette="lumiere"] .trust>div{
  background:var(--card);-webkit-backdrop-filter:blur(18px) saturate(1.4);backdrop-filter:blur(18px) saturate(1.4);
  border:1px solid var(--glass-edge);box-shadow:inset 1px 1px 0 var(--hl),var(--shadow)}
[data-palette="lumiere"] .card{border-radius:28px}
/* coins emboîtés : 28 (carte) − 12 (marge) = 16 (photo) */
[data-palette="lumiere"] .item{padding:12px;gap:20px;align-items:center;transition:transform .6s var(--spring),box-shadow .3s}
[data-palette="lumiere"] .item .ph{border-radius:16px}
[data-palette="lumiere"] .item>div:last-child{padding:6px 12px 6px 0}
[data-palette="lumiere"] .item:hover{transform:translateY(-4px) scale(1.005);box-shadow:inset 1px 1px 0 var(--hl),var(--shadow-up)}
/* chaque annonce a sa teinte : angle d'or × rang */
[data-palette="lumiere"] .item .ph{background:oklch(var(--L) var(--C) calc(50deg + var(--i,0) * var(--golden)))}
[data-palette="lumiere"] .item{background:linear-gradient(135deg,oklch(var(--L) calc(var(--C) * .5) calc(50deg + var(--i,0) * var(--golden)) / .45),var(--card) 55%)}

/* ===== Menu : barre de verre collée en haut ===== */
[data-palette="lumiere"] .nav{position:sticky;top:10px;z-index:40;width:fit-content;max-width:calc(100% - 24px);margin:0 auto 12px;padding:6px;border:1px solid var(--glass-edge);border-radius:999px;
  background:var(--card);-webkit-backdrop-filter:blur(20px) saturate(1.5);backdrop-filter:blur(20px) saturate(1.5);box-shadow:inset 1px 1px 0 var(--hl),var(--shadow)}
[data-palette="lumiere"] .nav a{padding:8px 16px}
[data-palette="lumiere"] .nav a.on{background:var(--bg);box-shadow:var(--shadow)}

/* ===== Boutons : encre pleine, sérieux ; ressort au clic ===== */
[data-palette="lumiere"] .btn-g,[data-palette="lumiere"] .nav a.pill-n,[data-palette="lumiere"] .search button{
  background:var(--ink);color:var(--onink);border-color:transparent;
  box-shadow:inset 1px 1px 0 oklch(100% 0 0 / .18),4px 8px 18px -6px oklch(20% .03 50 / .45);transition:transform .5s var(--spring),box-shadow .2s}
[data-palette="lumiere"] .btn-g:hover:not(:disabled),[data-palette="lumiere"] .nav a.pill-n:hover,[data-palette="lumiere"] .search button:hover{background:var(--ink);transform:translateY(-1px)}
[data-palette="lumiere"] .btn-g:active:not(:disabled),[data-palette="lumiere"] .search button:active{transform:scale(.97)}
[data-palette="lumiere"] .btn-o,[data-palette="lumiere"] .btn-social{background:var(--card);border-color:var(--glass-edge);color:var(--fg);box-shadow:inset 1px 1px 0 var(--hl),var(--shadow)}
[data-palette="lumiere"] .btn-o:hover,[data-palette="lumiere"] .btn-social:hover{background:var(--bg)}
[data-palette="lumiere"] .in,[data-palette="lumiere"] .fp{background:var(--card);border-color:var(--bd);border-radius:16px}
[data-palette="lumiere"] .in:focus{border-color:var(--acc);box-shadow:0 0 0 4px oklch(from var(--acc) l c h / .18)}
[data-palette="lumiere"] .tabs a.on{background:var(--bg);color:var(--fg);box-shadow:var(--shadow)}
[data-palette="lumiere"] .badge.b-a{background:oklch(var(--L) .06 230);color:oklch(from var(--fg) l c 240);border-color:transparent}
[data-palette="lumiere"] .badge.b-v{background:var(--ink);color:var(--onink)}
[data-palette="lumiere"] .offer{background:var(--card);border-radius:22px;border-color:var(--glass-edge)}
[data-palette="lumiere"] .offer.best{box-shadow:0 0 0 1.5px var(--acc),var(--shadow)}
[data-palette="lumiere"] .offer.mine{background:var(--acc-soft)}
[data-palette="lumiere"] .demo-bar{background:var(--card);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom-color:var(--bd2)}
[data-palette="lumiere"] .step b{border-color:var(--line)}

/* Catégories de l'accueil : teinte = rang × angle d'or */
[data-palette="lumiere"] .cat-tile{background:linear-gradient(160deg,oklch(var(--L) var(--C) calc(50deg + var(--i) * var(--golden))),oklch(calc(var(--L) - 6%) calc(var(--C) * 1.3) calc(70deg + var(--i) * var(--golden))));border-color:var(--glass-edge)}

@media (prefers-reduced-motion:reduce){[data-palette="lumiere"] body::before{animation:none}[data-palette="lumiere"] *{transition-duration:.01s!important}}
[data-palette="lumiere"]:not([data-theme="dark"]) .hero::after{display:none}
/* Exemples de recherches : verre teinté à l'angle d'or */
[data-palette="lumiere"] .uses-grid>div{border-radius:26px;border-color:var(--glass-edge);-webkit-backdrop-filter:blur(18px) saturate(1.4);backdrop-filter:blur(18px) saturate(1.4);
  background:linear-gradient(150deg,oklch(var(--L) var(--C) calc(50deg + var(--i,0) * var(--golden)) / .7),var(--card) 70%);box-shadow:inset 1px 1px 0 var(--hl),var(--shadow)}
[data-palette="lumiere"] .uses-grid h3{font-family:var(--serif);font-weight:400;font-size:var(--fs3)}
[data-palette="lumiere"] .support h2{font-family:var(--serif);font-weight:400;font-size:var(--fs3)}
[data-palette="lumiere"] .support-card{border-color:var(--glass-edge);-webkit-backdrop-filter:blur(18px) saturate(1.4);backdrop-filter:blur(18px) saturate(1.4);box-shadow:inset 1px 1px 0 var(--hl),var(--shadow)}
[data-palette="lumiere"] .support-card:nth-child(1) .support-ico{background:oklch(var(--L) var(--C) 160)}
[data-palette="lumiere"] .support-card:nth-child(2) .support-ico{background:oklch(var(--L) var(--C) 300)}