/* =====================================================================
   ProappShop — style.css
   Vitrine de logiciels Windows d'analyse statistique.

   RÈGLE DE LUMIÈRE UNIQUE : la source est en HAUT À GAUCHE.
   Tous les reflets clairs montent vers le haut-gauche, toutes les ombres
   portées tombent vers le bas-droite.
   ===================================================================== */

/* ---------------------------------------------------------------- */
/* 1. VARIABLES                                                      */
/* ---------------------------------------------------------------- */
:root {
  --rose: #ff3fd0;
  --violet: #7b4dff;
  --vert: #22e03a;
  --orange: #ff8c1a;

  --fond-haut: #4a4a4a;
  --fond-bas: #1f1f1f;
  --texte: #f2f2f2;
  --texte-2: #d7d7de;
  --texte-3: #a9a9b3;

  /* Accent de la page : piloté par data-theme sur <html> */
  --accent: var(--rose);
  --accent-doux: rgba(255, 63, 208, .30);
  --accent-lueur: rgba(255, 63, 208, .55);
  --accent-pale: rgba(255, 63, 208, .10);

  --ombre-contact: 0 1px 2px rgba(0, 0, 0, .62);
  --ombre-moyenne: 0 7px 18px rgba(0, 0, 0, .42);
  --ombre-lointaine: 0 26px 60px rgba(0, 0, 0, .40);

  --metal-haut: #4e4e55;
  --metal-bas: #232327;
  --liseré-clair: rgba(255, 255, 255, .35);
  --liseré-sombre: rgba(0, 0, 0, .62);

  --largeur: 1100px;
  --rayon: 18px;
  --rayon-s: 12px;
  --marge: clamp(1.25rem, 4vw, 2.5rem);
  --hauteur-entete: 66px;
  /* Hauteur de l'en-tête + de la barre d'onglets, tous deux collants :
     les ancres doivent passer en dessous, sinon la cible est masquée. */
  --decalage-ancre: 140px;
  --duree: 220ms cubic-bezier(.2, .7, .2, 1);
  --duree-longue: 420ms cubic-bezier(.2, .7, .2, 1);

  --police: "Segoe UI", "Segoe UI Variable Text", system-ui, -apple-system,
            "Helvetica Neue", Arial, sans-serif;
}

/* Thèmes de couleur par onglet */
html[data-theme="logiciels"] {
  --accent: var(--rose);
  --accent-doux: rgba(255, 63, 208, .30);
  --accent-lueur: rgba(255, 63, 208, .55);
  --accent-pale: rgba(255, 63, 208, .10);
}
html[data-theme="notes"] {
  --accent: var(--violet);
  --accent-doux: rgba(123, 77, 255, .30);
  --accent-lueur: rgba(123, 77, 255, .55);
  --accent-pale: rgba(123, 77, 255, .10);
}
html[data-theme="videos"] {
  --accent: var(--vert);
  --accent-doux: rgba(34, 224, 58, .26);
  --accent-lueur: rgba(34, 224, 58, .50);
  --accent-pale: rgba(34, 224, 58, .10);
}
html[data-theme="contact"] {
  --accent: var(--orange);
  --accent-doux: rgba(255, 140, 26, .30);
  --accent-lueur: rgba(255, 140, 26, .55);
  --accent-pale: rgba(255, 140, 26, .10);
}

/* ---------------------------------------------------------------- */
/* 2. BASES                                                          */
/* ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  background: var(--fond-bas);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--police);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--texte);
  background:
    radial-gradient(120% 90% at 18% 6%, rgba(255, 255, 255, .07), transparent 55%),
    linear-gradient(168deg, var(--fond-haut) 0%, #3a3a3a 22%, #2a2a2a 52%, var(--fond-bas) 100%);
  background-attachment: fixed;
  overflow-x: hidden;
}

html.fiche-ouverte body { padding-bottom: 7.5rem; }

h1, h2, h3, h4 {
  margin: 0 0 .6em;
  line-height: 1.18;
  letter-spacing: -.012em;
  font-weight: 700;
}
h1 { font-size: clamp(2.6rem, 7vw, 4.6rem); }
h2 { font-size: clamp(1.55rem, 3.4vw, 2.15rem); }
h3 { font-size: 1.2rem; }
p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

a { color: var(--accent-lueur); text-decoration: none; }
a:hover { color: #fff; }

img { max-width: 100%; height: auto; }

ul, ol { padding-left: 1.25rem; }
li { margin-bottom: .45em; }

:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Décalage des ancres sous l'en-tête et la barre d'onglets collants */
:target {
  scroll-margin-top: var(--decalage-ancre);
}

::selection { background: var(--accent-doux); color: #fff; }

/* Lien d'évitement */
.skip-link {
  position: absolute;
  left: 1rem;
  top: -100px;
  z-index: 200;
  padding: .7rem 1.2rem;
  border-radius: var(--rayon-s);
  background: #141416;
  color: #fff;
  font-weight: 600;
  box-shadow: var(--ombre-contact), var(--ombre-moyenne), 0 0 22px var(--accent-doux);
  transition: top var(--duree);
}
.skip-link:focus { top: 1rem; color: #fff; }

.conteneur {
  width: 100%;
  max-width: var(--largeur);
  margin-inline: auto;
  padding-inline: var(--marge);
}

.saut {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---------------------------------------------------------------- */
/* 3. ARRIÈRE-PLAN VIVANT                                             */
/* ---------------------------------------------------------------- */
.fond {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.tache {
  position: absolute;
  width: 46vmax;
  height: 46vmax;
  border-radius: 50%;
  filter: blur(90px);
  opacity: .40;
  transition: opacity 900ms ease;
  will-change: transform;
}
.tache--rose {
  top: -14vmax; left: -10vmax;
  background: radial-gradient(circle, rgba(255, 63, 208, .95), rgba(255, 63, 208, 0) 68%);
  animation: derive-rose 34s ease-in-out infinite alternate;
}
.tache--violet {
  top: 22vmax; left: 46vmax;
  background: radial-gradient(circle, rgba(123, 77, 255, .90), rgba(123, 77, 255, 0) 68%);
  animation: derive-violet 41s ease-in-out infinite alternate;
}
.tache--vert {
  bottom: -16vmax; left: 8vmax;
  background: radial-gradient(circle, rgba(34, 224, 58, .62), rgba(34, 224, 58, 0) 68%);
  animation: derive-vert 47s ease-in-out infinite alternate;
}
.tache--orange {
  top: 46vmax; right: -14vmax;
  background: radial-gradient(circle, rgba(255, 140, 26, .85), rgba(255, 140, 26, 0) 68%);
  animation: derive-orange 38s ease-in-out infinite alternate;
}

/* La tache de la couleur de l'onglet actif devient plus intense */
html[data-theme="logiciels"] .tache--rose,
html[data-theme="notes"]    .tache--violet,
html[data-theme="videos"]   .tache--vert,
html[data-theme="contact"]  .tache--orange { opacity: .72; }

/* Grain de fond (SVG intégré) */
.grain {
  position: absolute;
  inset: 0;
  opacity: .05;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='160' height='160' filter='url(%23g)'/></svg>");
}

/* Vignette sombre sur les bords */
.vignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(125% 95% at 26% 12%, rgba(0, 0, 0, 0) 38%, rgba(0, 0, 0, .58) 100%);
}

/* ---------------------------------------------------------------- */
/* 4. EN-TÊTE                                                        */
/* ---------------------------------------------------------------- */
.entete {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(22, 22, 25, .68);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid rgba(255, 255, 255, .09);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .40);
}
.entete__interieur {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 66px;
}
.marque {
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  color: var(--texte);
  font-weight: 700;
  letter-spacing: .02em;
}
.marque img {
  width: 40px; height: 40px;
  border-radius: 10px;
  box-shadow: var(--ombre-contact), 0 0 18px var(--accent-doux);
}
.marque span { font-size: 1.05rem; }

/* Sélecteur de langue */
.langues {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .28rem;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(0, 0, 0, .30));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .22),
    inset 0 -2px 4px rgba(0, 0, 0, .50),
    var(--ombre-contact), var(--ombre-moyenne);
}
.langues a {
  display: inline-block;
  padding: .32rem .72rem;
  border-radius: 999px;
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .08em;
  color: var(--texte-3);
  transition: color var(--duree), background var(--duree), box-shadow var(--duree);
}
.langues a:hover { color: #fff; }
.langues a[aria-current="page"] {
  color: #fff;
  background: linear-gradient(180deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, .06));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .45),
    inset 0 -1px 0 rgba(0, 0, 0, .40),
    0 0 16px var(--accent-doux);
}

/* ---------------------------------------------------------------- */
/* 5. ACCUEIL (HERO)                                                 */
/* ---------------------------------------------------------------- */
.accueil {
  position: relative;
  z-index: 2;
  min-height: 520px;
  height: 75vh;
  max-height: 820px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 3rem var(--marge) 2.5rem;
  overflow: hidden;
}

/* Projecteur et halo derrière le logo */
.projecteur {
  position: absolute;
  top: -14%;
  left: 50%;
  width: 120%;
  height: 92%;
  transform: translateX(-50%);
  background:
    conic-gradient(from 165deg at 50% 0%,
      transparent 0deg, rgba(255, 255, 255, .13) 14deg, transparent 30deg,
      transparent 340deg, rgba(255, 255, 255, .09) 348deg, transparent 360deg),
    radial-gradient(60% 70% at 50% 12%, rgba(255, 255, 255, .16), transparent 70%);
  filter: blur(14px);
  opacity: .8;
}
.halo-logo {
  position: absolute;
  top: 4%;
  left: 50%;
  width: 620px;
  height: 620px;
  transform: translateX(-50%);
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(255, 255, 255, .20) 0%, rgba(255, 63, 208, .22) 32%,
                    rgba(123, 77, 255, .16) 52%, rgba(0, 0, 0, 0) 70%);
  filter: blur(28px);
  animation: battement-halo 6s ease-in-out infinite;
}
.rayons {
  position: absolute;
  top: -20%;
  left: 8%;
  width: 140%;
  height: 120%;
  background:
    repeating-linear-gradient(74deg,
      rgba(255, 255, 255, .055) 0 2px,
      rgba(255, 255, 255, 0) 2px 46px);
  filter: blur(10px);
  transform: rotate(-6deg);
  opacity: .55;
}

/* Scène : logo + carrés flottants */
.scene {
  position: relative;
  width: min(520px, 88vw);
  height: min(400px, 62vh);
  display: flex;
  align-items: center;
  justify-content: center;
}
.sol {
  position: absolute;
  bottom: 6%;
  left: 50%;
  width: 78%;
  height: 26%;
  transform: translateX(-50%);
  background: radial-gradient(60% 60% at 50% 40%, rgba(0, 0, 0, .55), transparent 72%);
  filter: blur(14px);
}

.logo-bloc {
  position: relative;
  z-index: 3;
  width: min(320px, 62vw);
}
.logo-bloc img {
  display: block;
  width: 100%;
  border-radius: 26px;
  box-shadow:
    0 2px 4px rgba(0, 0, 0, .6),
    0 18px 42px rgba(0, 0, 0, .55),
    0 0 60px rgba(255, 63, 208, .28);
}
/* Reflet au sol : copie inversée de l'image, floue et estompée par un
   masque en dégradé. Aucune propriété -webkit-box-reflect ni @supports
   n'est employée ici, conformément à la consigne. */
.logo-bloc .logo-reflet {
  display: block;
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  transform: scaleY(-1);
  filter: blur(7px);
  opacity: .30;
  border-radius: 26px;
  /* Le dégradé est exprimé en coordonnées locales de l'élément : la
     transformation scaleY(-1) l'inverse à l'affichage. « to bottom »
     rend donc la partie opaque juste sous le logo, et l'estompe vers le
     bas, comme un vrai reflet posé au sol. */
  -webkit-mask-image: linear-gradient(to bottom, transparent 12%, #000 92%);
  mask-image: linear-gradient(to bottom, transparent 12%, #000 92%);
  pointer-events: none;
}

/* Les quatre carrés flottants.
   La flottaison est portée par le pseudo-élément (le carré lui-même) et
   non par .carre : l'ombre au sol est un enfant de .carre, elle doit
   rester au sol et seulement changer de taille quand le carré monte. */
.carre {
  position: absolute;
  width: 62px;
  height: 62px;
  border-radius: 18px;
  z-index: 2;
}
.carre::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    radial-gradient(90% 70% at 28% 22%, rgba(255, 255, 255, .85), rgba(255, 255, 255, 0) 52%),
    linear-gradient(150deg,
      color-mix(in srgb, var(--c) 55%, #ffffff) 0%,
      var(--c) 46%,
      color-mix(in srgb, var(--c) 52%, #000000) 100%);
  box-shadow:
    inset 0 3px 4px rgba(255, 255, 255, .60),
    inset 0 -8px 14px rgba(0, 0, 0, .42),
    0 2px 5px rgba(0, 0, 0, .55),
    0 12px 26px rgba(0, 0, 0, .45),
    0 0 34px var(--c-lueur);
  animation: flotte 7s ease-in-out infinite;
}
.carre--rose {
  --c: var(--rose); --c-lueur: rgba(255, 63, 208, .55);
  top: 6%; left: 2%;
}
.carre--violet {
  --c: var(--violet); --c-lueur: rgba(123, 77, 255, .55);
  top: 0; right: 4%;
}
.carre--vert {
  --c: var(--vert); --c-lueur: rgba(34, 224, 58, .48);
  bottom: 16%; left: 0;
}
.carre--orange {
  --c: var(--orange); --c-lueur: rgba(255, 140, 26, .55);
  bottom: 12%; right: 1%;
}
.carre--rose::before   { animation-duration: 7.4s; }
.carre--violet::before { animation-duration: 8.6s; animation-delay: -1.4s; }
.carre--vert::before   { animation-duration: 6.8s; animation-delay: -2.6s; }
.carre--orange::before { animation-duration: 9.2s; animation-delay: -3.8s; }
/* Ombre elliptique au sol, synchronisée avec la flottaison */
.ombre-sol {
  position: absolute;
  left: 50%;
  bottom: -30px;
  width: 62px;
  height: 16px;
  margin-left: -31px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(0, 0, 0, .70), rgba(0, 0, 0, 0));
  filter: blur(6px);
  animation: ombre-flotte 7s ease-in-out infinite;
}
.carre--violet .ombre-sol { animation-duration: 8.6s; animation-delay: -1.4s; }
.carre--vert .ombre-sol { animation-duration: 6.8s; animation-delay: -2.6s; }
.carre--orange .ombre-sol { animation-duration: 9.2s; animation-delay: -3.8s; }

.accueil__texte {
  position: relative;
  z-index: 4;
  margin-top: 1.4rem;
}
.titre-accueil {
  margin: 0;
  font-size: clamp(2.7rem, 8vw, 5rem);
  font-weight: 800;
  letter-spacing: .015em;
  background: linear-gradient(100deg, var(--rose), var(--violet), var(--vert), var(--orange), var(--rose));
  background-size: 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 4px 18px rgba(123, 77, 255, .35));
  animation: defilement 14s linear infinite;
}
.accroche {
  margin: .8rem auto 0;
  max-width: 40ch;
  font-size: clamp(1.05rem, 2.4vw, 1.35rem);
  color: var(--texte-2);
  letter-spacing: .015em;
}

/* ---------------------------------------------------------------- */
/* 6. BARRE D'ONGLETS                                                */
/* ---------------------------------------------------------------- */
.onglets {
  position: sticky;
  top: var(--hauteur-entete);
  z-index: 50;
  margin-top: -1px;
}
.onglets__interieur {
  position: relative;
  display: flex;
  gap: .55rem;
  padding: .7rem .6rem;
  border-radius: var(--rayon);
  background: linear-gradient(180deg, rgba(38, 38, 42, .92), rgba(22, 22, 25, .92));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .30),
    inset 1px 0 0 rgba(255, 255, 255, .14),
    inset 0 -2px 6px rgba(0, 0, 0, .55),
    var(--ombre-contact), var(--ombre-moyenne), var(--ombre-lointaine);
  overflow-x: auto;
  scrollbar-width: thin;
}
.onglet {
  position: relative;
  flex: 1 0 auto;
  padding: .72rem 1.35rem;
  border-radius: var(--rayon-s);
  font-weight: 650;
  font-size: .98rem;
  letter-spacing: .02em;
  text-align: center;
  color: var(--texte-3);
  background: linear-gradient(180deg, var(--metal-haut), #34343a 48%, var(--metal-bas));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .34),
    inset 1px 0 0 rgba(255, 255, 255, .15),
    inset 0 -2px 4px rgba(0, 0, 0, .55),
    0 1px 2px rgba(0, 0, 0, .60),
    0 6px 14px rgba(0, 0, 0, .40);
  transition: color var(--duree), box-shadow var(--duree), transform var(--duree);
  text-decoration: none;
}
.onglet:hover {
  color: #fff;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .40),
    inset 1px 0 0 rgba(255, 255, 255, .18),
    inset 0 -2px 4px rgba(0, 0, 0, .55),
    0 1px 2px rgba(0, 0, 0, .60),
    0 8px 20px rgba(0, 0, 0, .45),
    0 0 20px var(--accent-doux);
  transform: translateY(-1px);
}
/* Onglet actif : enfoncé, liseré coloré */
.onglet[aria-selected="true"] {
  color: #fff;
  background: linear-gradient(180deg, #2c2c31, #202024 60%, #2a2a2f);
  box-shadow:
    inset 0 4px 9px rgba(0, 0, 0, .78),
    inset 0 -1px 0 rgba(255, 255, 255, .14),
    inset 2px 0 0 rgba(255, 255, 255, .06),
    0 0 0 1px var(--accent-doux),
    0 0 22px var(--accent-doux),
    0 6px 16px rgba(0, 0, 0, .45);
  transform: translateY(1px);
}
.indicateur {
  position: absolute;
  left: 0;
  bottom: .18rem;
  height: 3px;
  width: var(--indicateur-l, 0);
  border-radius: 3px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  box-shadow: 0 0 14px var(--accent), 0 0 26px var(--accent-doux);
  transform: translateX(var(--indicateur-x, 0));
  transition: transform var(--duree-longue), width var(--duree-longue);
  pointer-events: none;
}

/* ---------------------------------------------------------------- */
/* 7. PANNEAUX                                                       */
/* ---------------------------------------------------------------- */
.panneaux { position: relative; z-index: 2; }
.panneau { margin: 3rem 0 4rem; }
.js .panneau { display: none; }
.js .panneau.est-actif {
  display: block;
  /* Le glissement utilise « translate » et non « transform » : un
     transform sur le panneau en ferait le référent du position: fixed
     de la barre d'achat collante, qui doit rester ancrée au bas de la
     fenêtre pendant toute l'animation. */
  animation: entree-panneau 340ms cubic-bezier(.2, .7, .2, 1);
}
@keyframes entree-panneau {
  from { opacity: 0; translate: 0 16px; }
  to   { opacity: 1; translate: 0 0; }
}

/* ---------------------------------------------------------------- */
/* 8. TITRES DE SECTION, SÉPARATEURS                                */
/* ---------------------------------------------------------------- */
.titre-section {
  display: inline-block;
  padding: .5rem 1.1rem;
  border-radius: 14px;
  color: var(--texte);
  background: linear-gradient(180deg, #1b1b1e, #0e0e10);
  box-shadow:
    inset 0 3px 8px rgba(0, 0, 0, .85),
    inset 0 -1px 0 rgba(255, 255, 255, .10),
    0 1px 0 rgba(255, 255, 255, .07),
    var(--ombre-contact), var(--ombre-moyenne);
  text-shadow: 0 2px 12px var(--accent-doux);
}
.separateur {
  height: 2px;
  margin: 1.1rem 0 2rem;
  border: 0;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--rose), var(--violet), var(--vert), var(--orange));
  box-shadow: 0 0 14px rgba(255, 63, 208, .35), 0 0 22px rgba(123, 77, 255, .28);
}
.sous-titre {
  color: var(--texte-2);
  max-width: 70ch;
  margin-bottom: 2rem;
}
.intro {
  color: var(--texte-3);
  font-size: .95rem;
  letter-spacing: .01em;
}

/* ---------------------------------------------------------------- */
/* 9. GRILLE ET CARTES                                               */
/* ---------------------------------------------------------------- */
.grille {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1.9rem;
  align-items: stretch;
}
.carte {
  --c: var(--accent);
  --c-doux: var(--accent-doux);
  --c-lueur: var(--accent-lueur);
  position: relative;
  display: flex;
  flex-direction: column;
  gap: .95rem;
  padding: 1.7rem 1.6rem 1.6rem;
  border-radius: var(--rayon);
  border: 1px solid rgba(255, 255, 255, .07);
  background:
    linear-gradient(140deg, rgba(255, 255, 255, .085), rgba(255, 255, 255, 0) 44%),
    repeating-linear-gradient(115deg,
      rgba(255, 255, 255, .030) 0 1px,
      rgba(0, 0, 0, .030) 1px 2px,
      rgba(255, 255, 255, 0) 2px 5px),
    linear-gradient(160deg, #3d3d42 0%, #303035 42%, #232327 100%);
  box-shadow:
    inset 0 1px 0 var(--liseré-clair),
    inset 1px 0 0 rgba(255, 255, 255, .18),
    inset 0 -2px 6px rgba(0, 0, 0, .60),
    inset -1px 0 0 var(--liseré-sombre),
    var(--ombre-contact),
    var(--ombre-moyenne),
    var(--ombre-lointaine),
    0 10px 30px var(--c-doux);
  transform-style: preserve-3d;
  transform:
    perspective(1000px)
    rotateX(var(--rx, 0deg))
    rotateY(var(--ry, 0deg))
    translateZ(0);
  transition:
    transform 260ms cubic-bezier(.2, .7, .2, 1),
    box-shadow var(--duree);
}
/* Reflet qui suit le curseur */
.carte::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background:
    radial-gradient(240px circle at var(--mx, 50%) var(--my, 0%),
      rgba(255, 255, 255, .16), rgba(255, 255, 255, 0) 62%),
    linear-gradient(120deg, rgba(255, 255, 255, .12) 0%, rgba(255, 255, 255, 0) 38%);
  opacity: .9;
  transition: opacity var(--duree);
}
/* Bordure à dégradé lumineux animé */
.carte::after {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: calc(var(--rayon) + 2px);
  padding: 2px;
  background: conic-gradient(from 0deg,
    var(--c), var(--violet), var(--vert), var(--orange), var(--c));
  -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;
  opacity: .55;
  animation: bordure 6s linear infinite;
  pointer-events: none;
}
.carte:hover {
  box-shadow:
    inset 0 1px 0 var(--liseré-clair),
    inset 1px 0 0 rgba(255, 255, 255, .20),
    inset 0 -2px 6px rgba(0, 0, 0, .60),
    inset -1px 0 0 var(--liseré-sombre),
    var(--ombre-contact),
    var(--ombre-moyenne),
    var(--ombre-lointaine),
    0 14px 40px var(--c-doux),
    0 0 34px var(--c-lueur);
}
.carte:hover::after { opacity: .95; }
.carte:hover::before { opacity: 1; }

/* Variantes de couleur (alternance) */
.carte--rose   { --c: var(--rose);   --c-doux: rgba(255, 63, 208, .30); --c-lueur: rgba(255, 63, 208, .55); }
.carte--violet { --c: var(--violet); --c-doux: rgba(123, 77, 255, .30); --c-lueur: rgba(123, 77, 255, .55); }
.carte--vert   { --c: var(--vert);   --c-doux: rgba(34, 224, 58, .26); --c-lueur: rgba(34, 224, 58, .48); }
.carte--orange { --c: var(--orange); --c-doux: rgba(255, 140, 26, .30); --c-lueur: rgba(255, 140, 26, .55); }

/* Pastille 3D lumineuse */
.pastille {
  position: relative;
  flex: 0 0 auto;
  width: 66px;
  height: 66px;
  border-radius: 20px;
  background:
    radial-gradient(90% 70% at 28% 20%, rgba(255, 255, 255, .80), rgba(255, 255, 255, 0) 55%),
    linear-gradient(150deg,
      color-mix(in srgb, var(--c) 58%, #ffffff) 0%,
      var(--c) 46%,
      color-mix(in srgb, var(--c) 55%, #000000) 100%);
  box-shadow:
    inset 0 3px 4px rgba(255, 255, 255, .60),
    inset 0 -7px 12px rgba(0, 0, 0, .45),
    0 2px 4px rgba(0, 0, 0, .55),
    0 12px 26px rgba(0, 0, 0, .42),
    0 0 30px var(--c-lueur);
}
.pastille::after {
  content: "";
  position: absolute;
  top: 7px; left: 9px;
  width: 58%; height: 26%;
  border-radius: 50%;
  background: linear-gradient(180deg, rgba(255, 255, 255, .85), rgba(255, 255, 255, 0));
  transform: rotate(-22deg);
  filter: blur(.5px);
}
.pastille--question {
  display: grid;
  place-items: center;
  font-size: 2rem;
  font-weight: 800;
  color: rgba(255, 255, 255, .92);
  text-shadow: 0 2px 8px rgba(0, 0, 0, .45);
}

/* Cartouche noir arrondi en creux */
.cartouche {
  display: inline-block;
  padding: .38rem .9rem;
  border-radius: 12px;
  background: linear-gradient(180deg, #191a1d, #0c0c0e);
  box-shadow:
    inset 0 3px 7px rgba(0, 0, 0, .85),
    inset 0 -1px 0 rgba(255, 255, 255, .10),
    0 1px 0 rgba(255, 255, 255, .07),
    var(--ombre-contact), var(--ombre-moyenne);
  color: var(--texte);
  text-shadow: 0 2px 10px var(--c-doux, var(--accent-doux));
}
.carte__titre { margin: 0; font-size: 1.22rem; letter-spacing: .01em; }
.carte__titre a { color: inherit; }
.carte__texte { margin: 0; color: var(--texte-2); font-size: .97rem; }
.carte__pied {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .8rem;
  margin-top: auto;
  padding-top: .4rem;
}
.carte__prix {
  margin: 0;
  font-size: 1.32rem;
  font-weight: 800;
  letter-spacing: .01em;
  color: #fff;
  text-shadow: 0 0 18px var(--c-lueur);
}
.carte__entete { display: flex; align-items: center; gap: .95rem; }
.carte__actions { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: auto; }

/* ---------------------------------------------------------------- */
/* 10. BOUTONS                                                       */
/* ---------------------------------------------------------------- */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  padding: .78rem 1.45rem;
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: var(--rayon-s);
  font: inherit;
  font-weight: 650;
  font-size: .95rem;
  letter-spacing: .015em;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  color: #fff;
  cursor: pointer;
  background: linear-gradient(180deg, var(--metal-haut), #34343a 48%, var(--metal-bas));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .34),
    inset 1px 0 0 rgba(255, 255, 255, .15),
    inset 0 -2px 5px rgba(0, 0, 0, .55),
    var(--ombre-contact),
    var(--ombre-moyenne),
    0 12px 28px rgba(0, 0, 0, .35),
    0 0 20px var(--c-doux, var(--accent-doux));
  transition: transform var(--duree), box-shadow var(--duree), color var(--duree);
}
.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(118deg, rgba(255, 255, 255, .20) 0%, rgba(255, 255, 255, 0) 42%);
}
.btn:hover {
  color: #fff;
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .42),
    inset 1px 0 0 rgba(255, 255, 255, .18),
    inset 0 -2px 5px rgba(0, 0, 0, .55),
    var(--ombre-contact),
    var(--ombre-moyenne),
    0 16px 36px rgba(0, 0, 0, .40),
    0 0 30px var(--c-doux, var(--accent-doux));
}
.btn:active {
  transform: translateY(1px);
  box-shadow:
    inset 0 4px 9px rgba(0, 0, 0, .70),
    inset 0 -1px 0 rgba(255, 255, 255, .12),
    var(--ombre-contact),
    0 4px 12px rgba(0, 0, 0, .40);
}
.btn--secondaire {
  background: linear-gradient(180deg, #3a3a40, #2a2a2f 52%, #232327);
}

/* Bouton d'achat -------------------------------------------------- */
.btn-achat {
  --c: var(--accent);
  --c-doux: var(--accent-doux);
  --c-lueur: var(--accent-lueur);
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .8rem 1.5rem;
  border: 1px solid rgba(255, 255, 255, .10);
  border-radius: var(--rayon-s);
  font: inherit;
  font-weight: 700;
  font-size: .95rem;
  letter-spacing: .015em;
  text-decoration: none;
  color: #fff;
  cursor: pointer;
  background:
    linear-gradient(118deg, rgba(255, 255, 255, .18) 0%, rgba(255, 255, 255, 0) 46%),
    linear-gradient(180deg, #404046, #303036 50%, #242429);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .36),
    inset 1px 0 0 rgba(255, 255, 255, .16),
    inset 0 -2px 5px rgba(0, 0, 0, .55),
    var(--ombre-contact),
    var(--ombre-moyenne),
    0 12px 26px rgba(0, 0, 0, .38),
    0 0 22px var(--c-doux);
  transition: transform var(--duree), box-shadow var(--duree), color var(--duree),
              opacity var(--duree);
}
.btn-achat .lbl-actif { display: none; }
.btn-achat[data-etat="bientot"] .lbl-bientot { display: inline; }
.btn-achat[data-etat="bientot"] .lbl-actif { display: none; }
.btn-achat[data-etat="actif"] .lbl-bientot { display: none; }
.btn-achat[data-etat="actif"] .lbl-actif { display: inline; }
/* État inactif : apparent mais non cliquable */
.btn-achat[data-etat="bientot"] {
  cursor: default;
  color: var(--texte-3);
  pointer-events: none;
  opacity: .78;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .20),
    inset 0 -2px 5px rgba(0, 0, 0, .55),
    var(--ombre-contact),
    var(--ombre-moyenne),
    0 8px 18px rgba(0, 0, 0, .30);
}
/* État actif : brillant, halo néon, pulsation douce.
   La pulsation anime l'opacité d'un halo (et non box-shadow) : les
   animations en boucle restent limitées à transform et opacity. */
.btn-achat[data-etat="actif"] {
  color: #fff;
  background:
    linear-gradient(118deg, rgba(255, 255, 255, .26) 0%, rgba(255, 255, 255, 0) 46%),
    linear-gradient(180deg,
      color-mix(in srgb, var(--c) 46%, #3a3a40) 0%,
      color-mix(in srgb, var(--c) 30%, #24242a) 55%,
      color-mix(in srgb, var(--c) 18%, #191a1e) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .45),
    inset 1px 0 0 rgba(255, 255, 255, .20),
    inset 0 -2px 6px rgba(0, 0, 0, .50),
    var(--ombre-contact),
    var(--ombre-moyenne),
    0 14px 32px rgba(0, 0, 0, .42),
    0 0 26px var(--c-lueur),
    0 0 52px var(--c-doux);
}
.btn-achat[data-etat="actif"]::after {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: calc(var(--rayon-s) + 6px);
  pointer-events: none;
  background: radial-gradient(closest-side, var(--c-doux), transparent 72%);
  opacity: .55;
  animation: pulsation 3.4s ease-in-out infinite;
}
.btn-achat[data-etat="actif"]:hover {
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .50),
    inset 0 -2px 6px rgba(0, 0, 0, .50),
    var(--ombre-contact),
    var(--ombre-moyenne),
    0 18px 40px rgba(0, 0, 0, .45),
    0 0 36px var(--c-lueur),
    0 0 70px var(--c-doux);
}

/* ---------------------------------------------------------------- */
/* 11. FICHE DÉTAILLÉE                                               */
/* ---------------------------------------------------------------- */
/* Sans JavaScript, la fiche est affichée sous la grille, à la suite. */
.js .fiche { display: none; }
.js .fiche.est-active { display: block; }
.js #grille-logiciels.est-cache { display: none; }
.fiche__retour { margin-bottom: 1.6rem; }

/* La fiche définit les couleurs d'accent dont se servent la pastille de
   l'en-tête et le bouton d'achat. Sans cette déclaration, la variable
   --c resterait indéfinie et la pastille serait sans fond. */
.fiche {
  --c: var(--accent);
  --c-doux: var(--accent-doux);
  --c-lueur: var(--accent-lueur);
}

/* Bloc d'achat dans le corps de la fiche.
   Masqué sans JavaScript : dans ce mode, c'est la barre d'achat qui est
   affichée normalement à la fin de la fiche (non collante). */
.achat-fiche {
  display: none;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.1rem;
  margin: 1.8rem 0 .4rem;
  padding: 1.2rem 1.4rem;
  border-radius: var(--rayon-s);
  border: 1px solid rgba(255, 255, 255, .10);
  background:
    linear-gradient(140deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, 0) 46%),
    linear-gradient(160deg, #36363b, #26262b);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .26),
    inset 0 -2px 5px rgba(0, 0, 0, .55),
    var(--ombre-contact), var(--ombre-moyenne),
    0 8px 22px var(--accent-doux);
}
.js .achat-fiche { display: flex; }
.achat-fiche__infos { flex: 1 1 14rem; }
.achat-fiche__prix {
  margin: 0;
  font-size: 1.55rem;
  font-weight: 800;
  color: #fff;
  text-shadow: 0 0 18px var(--accent-lueur);
}
.achat-fiche__mention { margin: .15rem 0 0; font-size: .84rem; color: var(--texte-3); }

.fiche__entete {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.1rem;
  margin-bottom: 2rem;
}
.fiche__entete .pastille { width: 84px; height: 84px; border-radius: 24px; }
.fiche__nom { margin: 0; font-size: clamp(1.9rem, 4.2vw, 2.7rem); }

.blocs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.4rem;
  margin: 2rem 0;
}
.bloc {
  --c: var(--accent);
  --c-doux: var(--accent-doux);
  --c-lueur: var(--accent-lueur);
  padding: 1.35rem 1.3rem;
  border-radius: var(--rayon-s);
  background:
    linear-gradient(140deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, 0) 46%),
    repeating-linear-gradient(115deg,
      rgba(255, 255, 255, .026) 0 1px,
      rgba(0, 0, 0, .026) 1px 2px,
      rgba(255, 255, 255, 0) 2px 5px),
    linear-gradient(160deg, #3a3a3f, #2c2c31 48%, #232327);
  box-shadow:
    inset 0 1px 0 var(--liseré-clair),
    inset 1px 0 0 rgba(255, 255, 255, .16),
    inset 0 -2px 5px rgba(0, 0, 0, .58),
    var(--ombre-contact),
    var(--ombre-moyenne),
    0 8px 24px var(--c-doux);
}
.bloc h3 {
  margin: 0 0 .7rem;
  font-size: 1.06rem;
  color: #fff;
}
.bloc p, .bloc li { color: var(--texte-2); font-size: .96rem; }
.bloc p:last-child { margin-bottom: 0; }

/* Galerie ---------------------------------------------------------- */
.galerie {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.1rem;
  margin: 1.6rem 0;
}
.cadre {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .10);
  background:
    linear-gradient(140deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, 0) 46%),
    linear-gradient(160deg, #2e2e33, #212125);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .28),
    inset 0 -2px 6px rgba(0, 0, 0, .60),
    var(--ombre-contact),
    var(--ombre-moyenne),
    0 8px 22px var(--accent-doux);
  display: grid;
  place-items: center;
  padding: 1rem;
  text-align: center;
}
.cadre img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  cursor: zoom-in;
}
.cadre__vide {
  color: var(--texte-3);
  font-size: .92rem;
  letter-spacing: .02em;
}

/* Barre d'achat collante ------------------------------------------- */
/* Sans JavaScript : affichée normalement, en fin de fiche (non collante).
   Avec JavaScript : fixe en bas de la fenêtre, visible seulement quand
   la fiche est affichée. */
.barre-achat {
  /* JavaScript déplace la barre au niveau de <body> : elle n'hérite plus
     des variables de la fiche. Elles sont redéclarées ici, sur la
     couleur d'accent de l'onglet Logiciels. */
  --c: var(--accent);
  --c-doux: var(--accent-doux);
  --c-lueur: var(--accent-lueur);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.1rem;
  margin: 1.4rem 0 .4rem;
  padding: .95rem 1.4rem;
  border-radius: var(--rayon-s);
  border: 1px solid rgba(255, 255, 255, .10);
  background:
    linear-gradient(140deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, 0) 46%),
    linear-gradient(160deg, #36363b, #26262b);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .26),
    inset 0 -2px 5px rgba(0, 0, 0, .55),
    var(--ombre-contact), var(--ombre-moyenne),
    0 8px 22px var(--accent-doux);
}
.js .barre-achat {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 70;
  margin: 0;
  /* La barre est fixée à la fenêtre : un espacement intérieur aligné sur
     la marge du site évite que le texte colle aux bords sur téléphone. */
  padding-inline: var(--marge);
  border-radius: 0;
  border-left: 0; border-right: 0; border-bottom: 0;
  background: rgba(20, 20, 23, .86);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
  box-shadow: 0 -8px 34px rgba(0, 0, 0, .55), 0 -1px 0 var(--accent-doux);
  display: none;
}
.js .barre-achat.est-visible { display: flex; }
.barre-achat__infos { flex: 1 1 auto; min-width: 0; }
.barre-achat__nom { margin: 0; font-weight: 700; font-size: 1.02rem; }
.barre-achat__prix { margin: 0; font-weight: 800; color: #fff; text-shadow: 0 0 16px var(--accent-lueur); }
.barre-achat__mention { margin: .1rem 0 0; font-size: .8rem; color: var(--texte-3); }
.barre-achat .btn-achat { flex: 0 0 auto; }

/* ---------------------------------------------------------------- */
/* 12. NOTES                                                          */
/* ---------------------------------------------------------------- */
.note-carte {
  --c: var(--violet);
  --c-doux: rgba(123, 77, 255, .30);
  --c-lueur: rgba(123, 77, 255, .55);
}
.note-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .6rem;
  font-size: .82rem;
  color: var(--texte-3);
  letter-spacing: .02em;
}
.etiquette {
  display: inline-block;
  padding: .18rem .62rem;
  border-radius: 999px;
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: #fff;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--c) 62%, #3a3a40), color-mix(in srgb, var(--c) 34%, #232327));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .34),
    0 2px 4px rgba(0, 0, 0, .5),
    0 0 16px var(--c-doux);
}
.note-carte__titre { margin: .2rem 0 .35rem; font-size: 1.28rem; }
.note-carte__resume {
  margin: 0 0 .3rem;
  color: var(--texte-2);
  font-size: .96rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Page de note ----------------------------------------------------- */
.entete-note {
  position: relative;
  z-index: 2;
  padding: 3.2rem 0 1.4rem;
  max-width: 720px;
}
.entete-note__titre {
  margin: .5rem 0 .7rem;
  font-size: clamp(2rem, 5.4vw, 3.1rem);
  background: linear-gradient(100deg, var(--rose), var(--violet), var(--vert), var(--orange), var(--rose));
  background-size: 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: defilement 14s linear infinite;
}
.corps-note {
  position: relative;
  z-index: 2;
  max-width: 720px;
  padding-bottom: 3rem;
  font-size: 1.05rem;
  line-height: 1.85;
  color: var(--texte-2);
}
.corps-note h2 {
  margin-top: 2.2rem;
  color: var(--texte);
  font-size: 1.45rem;
}
.corps-note h3 { margin-top: 1.7rem; color: var(--texte); }
.corps-note ul, .corps-note ol { margin-bottom: 1.2rem; }
.corps-note li { color: var(--texte-2); }
.corps-note blockquote {
  margin: 1.8rem 0;
  padding: 1rem 1.3rem;
  border-left: 3px solid var(--accent);
  border-radius: 0 12px 12px 0;
  background: linear-gradient(90deg, var(--accent-pale), rgba(255, 255, 255, .02));
  color: var(--texte);
  font-style: italic;
}
.corps-note .encadre {
  margin: 1.8rem 0;
  padding: 1.2rem 1.4rem;
  border-radius: var(--rayon-s);
  border: 1px solid rgba(255, 255, 255, .10);
  background:
    linear-gradient(140deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, 0) 46%),
    linear-gradient(160deg, #36363b, #26262b);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .26),
    inset 0 -2px 5px rgba(0, 0, 0, .55),
    var(--ombre-contact), var(--ombre-moyenne),
    0 8px 22px var(--accent-doux);
}
.corps-note figure { margin: 1.8rem 0; }
.corps-note figure img {
  display: block;
  border-radius: var(--rayon-s);
  box-shadow: var(--ombre-contact), var(--ombre-moyenne), var(--ombre-lointaine);
}
.corps-note figcaption {
  margin-top: .6rem;
  font-size: .87rem;
  color: var(--texte-3);
  font-style: italic;
}
.voisines {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.2rem;
  padding: 1rem 0 3rem;
}
/* Les cartes « note précédente » et « note suivante » portent l'attribut
   hidden. La règle « display: flex » de .carte, plus forte que la règle
   [hidden] du navigateur, les laisserait visibles : ce sélecteur
   rétablit leur masquage. */
.voisines [hidden] { display: none; }
.voisines .carte__titre { margin: .2rem 0 0; }

/* ---------------------------------------------------------------- */
/* 13. VIDEOS, CONTACT                                                */
/* ---------------------------------------------------------------- */
.groupe {
  margin-bottom: 2.6rem;
}
.groupe__titre {
  display: inline-block;
  margin-bottom: 1.1rem;
  padding: .4rem 1rem;
  border-radius: 12px;
  font-size: 1.1rem;
  background: linear-gradient(180deg, #1b1b1e, #0e0e10);
  box-shadow:
    inset 0 3px 7px rgba(0, 0, 0, .85),
    inset 0 -1px 0 rgba(255, 255, 255, .10),
    var(--ombre-contact), var(--ombre-moyenne);
  text-shadow: 0 2px 10px var(--accent-doux);
}
.cle-contact {
  --c: var(--orange);
  --c-doux: rgba(255, 140, 26, .30);
  --c-lueur: rgba(255, 140, 26, .55);
}
.cle-contact a { font-weight: 700; }
.liens-pied { display: flex; flex-wrap: wrap; gap: .5rem 1.2rem; margin: 0; padding: 0; list-style: none; }
.liens-pied li { margin: 0; }

/* ---------------------------------------------------------------- */
/* 14. PIED DE PAGE                                                  */
/* ---------------------------------------------------------------- */
.pied {
  position: relative;
  z-index: 2;
  margin-top: 2rem;
  padding: 2.6rem 0 2.8rem;
  border-top: 1px solid rgba(255, 255, 255, .10);
  background: linear-gradient(180deg, rgba(16, 16, 18, .55), rgba(12, 12, 14, .85));
  box-shadow: 0 -12px 40px rgba(0, 0, 0, .45);
}
.pied__grille {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.8rem;
  align-items: start;
}
.pied__titre {
  margin: 0 0 .7rem;
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--texte-3);
}
.pied p { color: var(--texte-3); font-size: .92rem; }
.pied .mention {
  margin-top: 2rem;
  font-size: .82rem;
  color: var(--texte-3);
  text-align: center;
}
.pied .mention span { opacity: .8; }

/* ---------------------------------------------------------------- */
/* 15. LIGHTBOX                                                      */
/* ---------------------------------------------------------------- */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: none;
  place-items: center;
  padding: 2rem;
  background: rgba(6, 6, 8, .88);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.lightbox.est-ouvert { display: grid; animation: fondu 200ms ease both; }
.lightbox img {
  max-width: 94vw;
  max-height: 84vh;
  border-radius: var(--rayon-s);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .75), 0 0 40px var(--accent-doux);
}
.lightbox__fermer {
  position: absolute;
  top: 1.2rem;
  right: 1.2rem;
  width: 44px; height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 50%;
  font-size: 1.3rem;
  line-height: 1;
  color: #fff;
  background: rgba(30, 30, 34, .85);
  box-shadow: var(--ombre-contact), var(--ombre-moyenne), 0 0 18px var(--accent-doux);
  cursor: pointer;
}
.lightbox__fermer:hover { background: rgba(50, 50, 56, .95); }
.lightbox__compteur {
  position: absolute;
  bottom: 1.2rem;
  left: 50%;
  transform: translateX(-50%);
  padding: .3rem .85rem;
  border-radius: 999px;
  font-size: .85rem;
  color: var(--texte-2);
  background: rgba(20, 20, 23, .8);
  box-shadow: var(--ombre-contact), var(--ombre-moyenne);
}

/* ---------------------------------------------------------------- */
/* 15 bis. PAGE 404                                                  */
/* ---------------------------------------------------------------- */
/* La page 404 reprend la scène d'accueil (projecteur, halo) et affiche
   le message dans les trois langues. */
.erreur {
  height: auto;
  max-height: none;
  min-height: 60vh;
}
.erreur__texte { max-width: 42rem; }
.erreur__code {
  margin: 0;
  font-size: clamp(3.2rem, 12vw, 7rem);
}
.erreur__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .7rem;
  margin-top: 2rem;
}

/* ---------------------------------------------------------------- */
/* 16. ANIMATIONS                                                     */
/* ---------------------------------------------------------------- */
@keyframes derive-rose {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  100% { transform: translate3d(9vmax, 7vmax, 0) scale(1.16); }
}
@keyframes derive-violet {
  0%   { transform: translate3d(0, 0, 0) scale(1.08); }
  100% { transform: translate3d(-8vmax, 9vmax, 0) scale(.92); }
}
@keyframes derive-vert {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  100% { transform: translate3d(11vmax, -8vmax, 0) scale(1.14); }
}
@keyframes derive-orange {
  0%   { transform: translate3d(0, 0, 0) scale(.95); }
  100% { transform: translate3d(-10vmax, -6vmax, 0) scale(1.12); }
}
@keyframes battement-halo {
  0%, 100% { opacity: .78; transform: translateX(-50%) scale(1); }
  50%      { opacity: 1;   transform: translateX(-50%) scale(1.07); }
}
@keyframes flotte {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50%      { transform: translate3d(0, -16px, 0); }
}
@keyframes ombre-flotte {
  0%, 100% { opacity: .85; transform: translateX(-50%) scaleX(1); }
  50%      { opacity: .40; transform: translateX(-50%) scaleX(.72); }
}
@keyframes bordure {
  to { transform: rotate(360deg); }
}
@keyframes defilement {
  to { background-position: 300% 0; }
}
@keyframes pulsation {
  0%, 100% { opacity: .35; transform: scale(1); }
  50%      { opacity: .90; transform: scale(1.05); }
}
@keyframes fondu { from { opacity: 0; } to { opacity: 1; } }

/* Apparition progressive au défilement.
   Le décalage vertical passe par la propriété « translate », distincte de
   « transform » : sinon cette règle, plus spécifique que « .carte »,
   neutraliserait l'inclinaison 3D au survol des cartes. */
.js .anim {
  opacity: 0;
  translate: 0 26px;
  /* Les transitions de .carte (transform, box-shadow) sont reprises ici :
     cette règle est plus spécifique, sa liste « transition » la remplacerait
     entièrement et l'inclinaison 3D perdrait son adoucissement. */
  transition: opacity 620ms cubic-bezier(.2, .7, .2, 1),
              translate 620ms cubic-bezier(.2, .7, .2, 1),
              transform 260ms cubic-bezier(.2, .7, .2, 1),
              box-shadow var(--duree);
}
.js .anim.est-visible { opacity: 1; translate: 0 0; }

/* ---------------------------------------------------------------- */
/* 17. RESPONSIVE                                                     */
/* ---------------------------------------------------------------- */
@media (max-width: 860px) {
  .onglets__interieur { gap: .45rem; }
  .onglet { padding: .62rem 1rem; font-size: .92rem; }
  .scene { height: min(340px, 48vh); }
  .carre { width: 50px; height: 50px; border-radius: 15px; }
  .ombre-sol { width: 50px; margin-left: -25px; }
  .tache { filter: blur(70px); opacity: .34; }
  .rayons { opacity: .35; }
  .logo-reflet { filter: blur(5px); opacity: .22; }
  .barre-achat { flex-wrap: wrap; gap: .6rem; padding: .7rem var(--marge) .8rem; }
  .barre-achat__mention { font-size: .74rem; }
}

@media (max-width: 560px) {
  :root { --hauteur-entete: 58px; --decalage-ancre: 122px; }
  .accueil { min-height: 480px; height: 70vh; }
  .entete__interieur { min-height: 58px; }
  .marque span { display: none; }
  html.fiche-ouverte body { padding-bottom: 11rem; }
  .grille { grid-template-columns: 1fr; }
  .corps-note { font-size: 1rem; }
}

/* Écrans tactiles : pas d'inclinaison ni de parallaxe */
@media (hover: none), (pointer: coarse) {
  .carte { transform: none !important; }
  .carte:hover { box-shadow:
    inset 0 1px 0 var(--liseré-clair),
    inset 1px 0 0 rgba(255, 255, 255, .20),
    inset 0 -2px 6px rgba(0, 0, 0, .60),
    var(--ombre-contact), var(--ombre-moyenne), var(--ombre-lointaine),
    0 10px 30px var(--c-doux); }
}

/* ---------------------------------------------------------------- */
/* 18. MOUVEMENT RÉDUIT                                              */
/* ---------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .tache, .carre::before, .ombre-sol, .halo-logo, .titre-accueil, .entete-note__titre,
  .carte::after, .btn-achat[data-etat="actif"] {
    animation: none !important;
  }
  .js .anim { opacity: 1; translate: 0 0; transition: none; }
  .js .panneau.est-actif { animation: none; }
  .indicateur { transition: none; }
  .btn, .carte, .onglet { transition: color var(--duree), box-shadow var(--duree); }
}