/* ============================================================================
   MBC — styles partagés par index.html, fee-verte.html et pandora-box.html
   ----------------------------------------------------------------------------
   1) LES DEUX CRÉATIONS DU HEADER : présentes sur les 3 pages. Chacune porte
      LE CODE COULEUR DE SA MOTO — vert pour La Fée Verte, rose pour Pandora —
      sans que les peintures elles-mêmes soient retouchées : tout passe par la
      lueur, l'étiquette et le repère de page active.
   2) LES PAGES PROJET : mise en page commune. Chaque page ne change QUE ses
      couleurs, via les variables --accent / --accent-2 / --paillette définies
      dans son propre <style>. Vert & or pour la Fée Verte, rose pour Pandora.
   Un seul fichier : une correction ici vaut pour les trois pages.
   ========================================================================== */

/* ------------------------------------------------- 1. LES DEUX CRÉATIONS */
/* Deux entrées distinctes dans la barre, à droite. Pas de menu déroulant :
   deux liens directs. Les deux peintures d'El Guero étant toutes les deux
   dorées, c'est la COULEUR portée autour d'elles qui les distingue — verte
   pour l'une, rose pour l'autre — et jamais une retouche de l'image. */

.creations{display:flex;align-items:center;gap:4px;margin-left:16px}

.crea{position:relative;display:flex;align-items:center;justify-content:center;
  width:62px;height:62px}
/* PAS de fond au survol : un fond, même arrondi, dessine un rectangle net
   derrière la peinture. Seule la lueur ronde doit se voir. */
.crea-fee{--teinte:#4ADE80;--halo:rgba(74,222,128,.62)}   /* le vert reste tel quel */
.crea-box{--teinte:#FF5AA6;--halo:rgba(229,34,126,.72)}   /* le fuchsia relevé sur la plaque */

/* 52px et pas 32 : ce sont des PEINTURES photographiées, pas des pictogrammes.
   En dessous, la pose de la fée et celle de la pin-up penchée se brouillent et
   il ne reste que deux taches dorées qu'on ne distingue plus l'une de l'autre.
   Les images sont fournies en 104px (le double) pour les écrans haute densité. */
.crea img{width:auto;height:52px;position:relative;z-index:2;
  filter:drop-shadow(0 0 9px var(--halo));
  transition:transform .35s ease,filter .35s ease}
.crea:hover img,.crea:focus-visible img{transform:translateY(-3px) scale(1.08);
  filter:drop-shadow(0 0 18px var(--halo))}

/* La lueur de couleur. Elle est DÉJÀ VISIBLE au repos, doucement : c'est elle
   qui donne son vert à la fée et son rose à Pandora dans la barre. Au survol
   elle s'ouvre franchement. */
/* --halo-repos : l'intensité de la lueur quand on ne survole pas. Un seul
   réglage pour les deux créations. */
.creations{--halo-repos:1}
.crea-halo{position:absolute;inset:-18px;border-radius:50%;pointer-events:none;z-index:1;
  background:radial-gradient(circle,var(--halo) 0%,transparent 72%);
  /* dégradé en deux temps : la lueur reste dense près de la peinture puis
     s'éteint franchement, au lieu de faire un disque uniforme. Ignoré par les
     navigateurs anciens, qui gardent la ligne du dessus. */
  background:radial-gradient(closest-side circle,var(--halo) 0%,
             color-mix(in srgb,var(--halo) 45%,transparent) 42%,transparent 76%);
  opacity:var(--halo-repos);transform:scale(.86);
  transition:opacity .35s ease,transform .35s ease}
.crea:hover .crea-halo,.crea:focus-visible .crea-halo{opacity:1;transform:scale(1.26)}

/* le nom, sous l'icône, uniquement au survol */
.crea-nom{position:absolute;top:calc(100% + 4px);left:50%;transform:translate(-50%,-4px);
  white-space:nowrap;padding:5px 10px;border-radius:8px;z-index:70;
  background:rgba(12,12,14,.97);border:1px solid rgba(255,255,255,.1);
  font-family:'Oswald',sans-serif;text-transform:uppercase;letter-spacing:1.4px;
  font-size:11px;color:var(--teinte);
  opacity:0;visibility:hidden;transition:opacity .2s ease,transform .2s ease,visibility .2s}
.crea:hover .crea-nom,.crea:focus-visible .crea-nom{opacity:1;visibility:visible;
  transform:translate(-50%,0)}

/* Sur la page d'une moto, son entrée est soulignée de sa couleur : le visiteur
   voit où il se trouve, et le code couleur se lit même sans survoler. */
.crea.actif::after{content:"";position:absolute;left:50%;bottom:3px;z-index:3;
  width:24px;height:3px;border-radius:2px;transform:translateX(-50%);
  background:var(--teinte);box-shadow:0 0 9px var(--halo)}
.crea.actif .crea-halo{opacity:.6}

.crea:focus-visible{outline:2px solid var(--teinte);outline-offset:2px}

/* la sélection de texte reprend la couleur de la page (gris chrome sur l'accueil) */
::selection{background:var(--accent,#CDCDD4);color:#0a0a0b}

/* Sur grand écran, les deux créations sont ces deux icônes : inutile de les
   répéter dans la barre. Sous 860px la barre devient un menu burger et le
   survol n'existe plus — les liens texte y réapparaissent. */
.nav-moto{display:none}
@media (max-width:860px){
  .nav-moto{display:block}
  .creations{margin-left:auto;margin-right:6px}
  .crea{width:58px;height:58px}
  .crea-nom{display:none}   /* pas de survol au doigt : l'étiquette n'aurait pas de sens */
}

@media (prefers-reduced-motion:reduce){
  .crea img,.crea-halo,.crea-nom{transition:none}
  .crea:hover img{transform:none}
}

/* ------------------------------------------------------- 2. PAGES PROJET */

.moto-hero{position:relative;min-height:clamp(340px,52vh,520px);display:flex;align-items:center;
  overflow:hidden;border-bottom:1px solid var(--line)}
.moto-hero .wrap{position:relative;z-index:3;padding-top:40px;padding-bottom:40px}

/* le fond « paillettes » de la plaque peinte : trois semis de points de tailles
   différentes sur un fond profond. C'est ce qui donne le grain qui accroche
   la lumière, comme le flake d'une peinture custom. */
.paillettes{position:absolute;inset:0;z-index:1;background-color:var(--paillette-fond);
  background-image:
    radial-gradient(1.6px 1.6px at 18% 24%,var(--paillette-vive),transparent 55%),
    radial-gradient(1.2px 1.2px at 62% 12%,var(--paillette-vive),transparent 55%),
    radial-gradient(1.8px 1.8px at 84% 62%,var(--paillette-vive),transparent 55%),
    radial-gradient(1.1px 1.1px at 32% 78%,var(--paillette-douce),transparent 55%),
    radial-gradient(1.4px 1.4px at 72% 88%,var(--paillette-douce),transparent 55%),
    radial-gradient(1px 1px at 8% 56%,var(--paillette-douce),transparent 55%),
    radial-gradient(1.3px 1.3px at 46% 44%,var(--paillette-vive),transparent 55%),
    radial-gradient(1px 1px at 92% 30%,var(--paillette-douce),transparent 55%);
  background-size:170px 170px,210px 210px,190px 190px,150px 150px,230px 230px,180px 180px,160px 160px,200px 200px}
/* voile sombre : le texte doit rester lisible par-dessus les paillettes */
.moto-hero::after{content:"";position:absolute;inset:0;z-index:2;
  background:linear-gradient(90deg,var(--voile-a,rgba(8,8,9,.92)) 0%,
             var(--voile-b,rgba(8,8,9,.72)) 46%,var(--voile-c,rgba(8,8,9,.5)) 100%)}

.moto-titre{font-size:clamp(56px,11vw,124px);line-height:.86;margin:10px 0 6px;
  background:var(--or-grad);-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 3px 10px rgba(0,0,0,.65))}
.moto-sous{font-family:'Oswald',sans-serif;text-transform:uppercase;letter-spacing:4px;
  font-size:clamp(12px,1.6vw,15px);color:var(--accent-2)}
.moto-chapo{max-width:620px;margin-top:18px;color:#C8C8CE;font-size:16.5px}

.fil{display:flex;align-items:center;gap:8px;font-family:'Oswald',sans-serif;
  text-transform:uppercase;letter-spacing:2px;font-size:11.5px;color:#7d7d85}
.fil a{color:var(--accent-2)}
.fil a:hover{color:var(--accent-2)}

.moto-sec{padding:clamp(56px,8vw,96px) 0}
.moto-sec.alt{background:#101012}

/* un filet de la couleur de la moto sous chaque intitulé de section : c'est ce
   qui fait courir le code couleur dans toute la page, et pas seulement en tête */
.moto-h2{font-size:clamp(34px,5vw,54px);margin:8px 0 22px;position:relative;
  padding-bottom:16px}
.moto-h2::after{content:"";position:absolute;left:0;bottom:0;width:64px;height:3px;
  border-radius:2px;background:var(--accent);box-shadow:0 0 14px var(--accent)}
.moto-texte{max-width:720px;font-size:16.5px;color:#C0C0C7}
.moto-texte p+p{margin-top:16px}

/* fiche technique */
.specs{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:2px;
  background:var(--line);border:1px solid var(--line);border-radius:12px;overflow:hidden;margin-top:8px}
.spec{background:#141416;padding:20px 22px;border-left:3px solid var(--accent)}
.spec dt{font-family:'Oswald',sans-serif;text-transform:uppercase;letter-spacing:2px;
  font-size:11px;color:var(--accent-2);margin-bottom:6px}
.spec dd{font-size:16px;color:#E4E4E9}

/* galerie photos du projet */
.moto-galerie{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px}
.moto-galerie a{display:block;border-radius:12px;overflow:hidden;border:1px solid var(--line);
  background:#141416;aspect-ratio:4/3}
.moto-galerie img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease,filter .5s ease}
.moto-galerie a{transition:border-color .25s ease}
.moto-galerie a:hover{border-color:var(--accent)}
.moto-galerie a:hover img{transform:scale(1.06);filter:saturate(1.15)}

.moto-vide{border:1px dashed var(--line);border-radius:12px;padding:44px 24px;text-align:center;color:#7d7d85}

/* bandeau de bas de page vers l'autre projet */
.suite{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:18px;
  padding:30px;border-radius:16px;border:1px solid var(--line);background:#121214;
  transition:border-color .25s ease,background .25s ease}
.suite:hover{border-color:var(--accent);background:#151517}
/* Ce bandeau mène à l'AUTRE moto : il porte donc la couleur de sa destination,
   pas celle de la page où on se trouve. */
.suite.vers-rose{--accent:#E5227E}
.suite.vers-vert{--accent:#1E9E5B}
.suite .k{font-family:'Oswald',sans-serif;text-transform:uppercase;letter-spacing:2px;
  font-size:11.5px;color:#7d7d85}
.suite .t{font-family:'Bebas Neue',Impact,sans-serif;font-size:34px;line-height:1}

@media (max-width:640px){
  .specs{grid-template-columns:1fr}
  .moto-hero::after{background:linear-gradient(180deg,var(--voile-b,rgba(8,8,9,.72)) 0%,
    var(--voile-a,rgba(8,8,9,.93)) 100%)}
}