/* =====================================================================
   YD Studio · étude de cas BOOXS (booxs.html) : la marque BOOXS
   Couleurs relevées dans les vrais fichiers : src/lib/design.ts de l'app (rouge, lie-de-vin, nuit, or) et le fichier du logo
   ~/Documents/Dossier booxs app/AI FILE/BOOXS FIN.ai (crème, brun, dégradé). Police : Bai Jamjuree (OFL), celle de l'app.
   Exception 15 de DESIGN.md : les couleurs d'une marque vivent dans sa feuille, pas dans tokens.css.
   ===================================================================== */

@font-face {   /* la police de BOOXS (OFL), uniquement pour sa présentation dans l'identité */
  font-family: "Bai Jamjuree";
  src: url("../assets/polices/bai-jamjuree-600.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
}

:root {
  /* BOOXS : src/lib/design.ts de l'app (rouge, lie-de-vin, nuit, or) et le fichier du logo BOOXS FIN.ai (crème, brun, dégradé) */
  --booxs-rouge: #A90A20;
  --booxs-lie: #3E1013;
  --booxs-nuit: #100B05;
  --booxs-or: #FFB000;
  --booxs-creme: #F4F0EC;
  --booxs-brun: #4E3E2E;
  --booxs-degrade-debut: #592123;   /* le dégradé de la planche rouge du logo : de ce lie-de-vin au rouge */
  --booxs-fond-pagino: #F8F7F8;     /* le fond de la source Figma de Pagino */
}

.etude--booxs {
  --m-fonce: var(--booxs-nuit);
  --m-vin: var(--booxs-lie);
  --m-vif: var(--booxs-rouge);
  --m-clair: var(--booxs-creme);
  --m-encre: var(--booxs-brun);
  --m-accent: var(--booxs-or);
  --m-degrade: linear-gradient(135deg, var(--booxs-degrade-debut) 0%, var(--booxs-rouge) 100%);   /* le dégradé de la planche rouge du logo */
  --m-police: "Bai Jamjuree", var(--police-texte);
}

/* Les tuiles propres à BOOXS */
.e-pagino { background: var(--booxs-fond-pagino); }
.e-pagino img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: 50% 60%; padding: 8%; }
.e-pagino .e-legende { color: var(--m-encre); }

.e-rangs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-content: center; gap: clamp(14px, 2vw, 26px) 10px; padding: clamp(20px, 3vw, 44px); background: var(--m-fonce); }
.e-rangs figure { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 8px; color: var(--m-clair); font: 500 12px / 1 var(--police-texte); }
.e-rangs img { display: block; width: min(62%, 96px); height: auto; }
/* 06/10 (Yoann : « l'icône de niveau 6 est plus petite que les autres ») : ce n'est pas l'image, c'est le dessin.
   Les blasons I à V remplissent toute la largeur de leur fichier ; le VI est entouré de rayons, son blason n'occupe
   que 66 % de la largeur (mesuré). À largeur égale il paraissait donc 1,5 fois plus petit : on l'agrandit d'autant. */
.e-rangs figure:nth-child(6) img { width: min(93%, 144px); margin: -8px 0; }

.e-widgets { background: var(--m-vin); }
.e-widgets img { position: absolute; display: block; height: auto; border-radius: var(--rayon); }
.e-widgets__grand { width: 58%; left: 10%; top: 13%; transform: rotate(-5deg); }
.e-widgets__petit { width: 34%; right: 8%; bottom: 13%; transform: rotate(6deg); }