/* =====================================================================
   YD Studio · étude de cas Voxen (voxen.html) : la marque Voxen
   Couleurs relevées dans les vrais fichiers de l'app : mobile/src/theme/colors.ts (copie dans
   assets/etudes/voxen/sources/code-colors.ts, « hex exacts relevés dans le Figma ») et la passation
   VOXEN-Documentation-Complete-v7.md (§1.1 et §8.2 : le dégradé or de la carte « Défi du jour »).
   Police : Ancizar Serif SemiBold (titres) et Inter (interface), d'après code-typography.ts. Aucun fichier de
   ces polices sur le Mac (l'app les chargeait par @expo-google-fonts) : on ne les affiche PAS ; la charte montre
   de vrais morceaux d'écrans et écrit leurs noms.
   Exception 15 de DESIGN.md : les couleurs d'une marque vivent dans sa feuille, pas dans tokens.css.
   ===================================================================== */

:root {
  /* Voxen : code-colors.ts (theme/colors.ts de l'app) */
  --voxen-espresso: #17150E;     /* background : le fond de TOUS les écrans */
  --voxen-surface: #221B13;      /* surface : cartes, boutons secondaires, pastilles */
  --voxen-brun: #553E31;         /* surfaceIcon : le carré derrière les icônes */
  --voxen-or: #EED8AB;           /* gold : titres, boutons principaux (= --app-voxen de tokens.css) */
  --voxen-or-doux: #E7D4B3;      /* goldSoft : le logo, le mot VOXEN, les badges */
  --voxen-or-vif: #F2DA9F;       /* goldVivid : éclairs, halos, coche */
  --voxen-creme: #F9EBD0;        /* creamGlow : halos lumineux */
  --voxen-texte: #BBAE98;        /* textBody : sous-titres et corps */
  --voxen-attenue: #AB9A83;      /* textMuted : descriptions */
  /* VOXEN-Documentation-Complete-v7.md §8.2 : la carte « Défi du jour » de l'onglet Pratique, dégradé #eed8ab → #dbc69a */
  --voxen-defi-fin: #DBC69A;
}

.etude--voxen {
  --m-fonce: var(--voxen-espresso);
  --m-vin: var(--voxen-surface);
  --m-vif: var(--voxen-or);
  --m-clair: var(--voxen-creme);
  --m-encre: var(--voxen-espresso);
  --m-accent: var(--voxen-or-vif);
  --m-degrade: linear-gradient(135deg, var(--voxen-or) 0%, var(--voxen-defi-fin) 100%);   /* le dégradé or de « Défi du jour » */
  --m-police: var(--police-texte);   /* pas de fichier d'Ancizar Serif : rien n'est écrit dans la police de la marque */
}

/* ---------- L'identité ---------- */
/* le logo et ses cotes, relevées sur le splash du Figma (114:80) : V 56 de large, 27 d'écart, VOXEN 210 de large */
.e-voxen-logo { display: grid; place-items: center; background: var(--voxen-espresso); }
.e-voxen-logo__dessin { position: relative; width: min(46%, 330px); }
.e-voxen-logo__dessin > img { display: block; width: 100%; height: auto; position: relative; z-index: 1; }
.e-voxen-cote { position: absolute; display: block; color: var(--voxen-texte); font: 500 12px / 1 var(--police-texte); font-style: normal; }
.e-voxen-cote::before { content: ""; position: absolute; background: color-mix(in srgb, var(--voxen-or-doux) 45%, transparent); }
.e-voxen-cote--l { height: 1px; }
.e-voxen-cote--l::before { inset: 0; }
.e-voxen-cote--l span { position: absolute; left: 50%; transform: translateX(-50%); }
.e-voxen-cote--haut span { bottom: 8px; }
.e-voxen-cote--bas span { top: 8px; }
.e-voxen-cote--ecart { left: -9%; right: -9%; background: color-mix(in srgb, var(--voxen-or-doux) 10%, transparent); }
.e-voxen-cote--ecart span { position: absolute; right: -26px; top: 50%; transform: translateY(-50%); }
.e-voxen-cote--axe { left: 50%; top: -18%; bottom: -24%; width: 1px; }
.e-voxen-cote--axe::before { inset: 0; background: color-mix(in srgb, var(--voxen-or-doux) 28%, transparent); }
.e-voxen-logo .e-legende, .e-voxen-symbole .e-legende, .e-voxen-eclair .e-legende,
.e-voxen-icones .e-legende, .e-voxen-styles .e-legende { color: var(--voxen-or-doux); }

.e-voxen-symbole { display: grid; place-items: center; background: var(--voxen-surface); }
.e-voxen-symbole img { display: block; width: 30%; height: auto; }

.e-voxen-vox { background: var(--voxen-creme); }
.e-voxen-vox img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 12%; }
.e-voxen-vox .e-legende { color: var(--voxen-creme); }

.etude--voxen .e-palette span { font-variant-numeric: tabular-nums; }

.e-voxen-eclair { display: grid; place-items: center; background: var(--voxen-espresso); }
.e-voxen-eclair img { display: block; width: 46%; height: auto; }

.e-voxen-icones { display: grid; place-items: center; background: var(--voxen-espresso); }
.e-voxen-icones img { display: block; width: 82%; height: auto; }

.e-voxen-styles { display: grid; place-items: center; background: var(--voxen-espresso); }
.e-voxen-styles img { display: block; width: 86%; height: auto; border-radius: var(--rayon); }

/* ---------- La direction artistique ---------- */
.e-voxen-brief { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: auto; }
.e-voxen-brief img { display: block; width: 100%; height: auto; border: 1px solid var(--trait); border-radius: var(--rayon); }
.e-elements__case .e-voxen-plein { width: 100%; height: 100%; object-fit: cover; }

/* ---------- La charte ---------- */
/* le logo : le logo complet en grand, puis le symbole et le mot seuls, toujours sur fond sombre */
.e-voxen-logos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 10px; }
.e-voxen-logos figure { margin: 0; font: 500 12px / 1.2 var(--police-texte); color: var(--encre-douce); }
.e-voxen-logos .e-voxen-logos__grand { grid-column: 1 / -1; }
.e-voxen-logos figure > div { display: grid; place-items: center; aspect-ratio: 2 / 1; margin-bottom: 8px; border-radius: var(--rayon); background: var(--voxen-espresso); }
.e-voxen-logos .e-voxen-logos__grand > div { aspect-ratio: 2.4 / 1; }
.e-voxen-logos figure > div.e-voxen-logos__surface { background: var(--voxen-surface); }
.e-voxen-logos img { display: block; height: auto; }
.e-voxen-logos .e-voxen-logos__complet { width: 24%; }
.e-voxen-logos .e-voxen-logos__symbole { width: 16%; }
.e-voxen-logos .e-voxen-logos__mot { width: 54%; }

.e-voxen-specimen { display: block; width: 100%; height: auto; border-radius: var(--rayon); }
.e-voxen-typos { margin: 18px 0 0; padding: 0; list-style: none; }
.e-voxen-typos li { display: grid; grid-template-columns: 6.5em 1fr; gap: 14px; padding: 9px 0; border-top: 1px solid var(--trait); font-size: 15px; }
.e-voxen-typos li:first-child { border-top: 0; }
.e-voxen-typos span { color: var(--encre-douce); }
.e-voxen-typos b { font-weight: 600; }

/* ---------- La publication : l'état honnête, une vraie capture iPhone ---------- */
.e-voxen-etat { display: flex; flex-direction: column; align-items: center; gap: 16px; margin: 0; }
.e-voxen-etat .tel { --tel-l: clamp(230px, 21vw, 290px); }
.e-voxen-etat figcaption { font: 500 14px / 1.3 var(--police-texte); color: var(--encre-douce); text-align: center; }

/* ---------- La grande image : le logo complet sur l'espresso ---------- */
.e-voxen-final img { object-fit: contain; padding: clamp(40px, 8.5vw, 140px) 0; }

/* ---------- Téléphone ---------- */
@media (max-width: 640px) {
  .e-voxen-logo__dessin { width: 58%; }
  .etude--voxen .e-palette { flex-wrap: wrap; min-height: 200px; }   /* six couleurs : deux rangées de trois, les codes restent lisibles */
  .etude--voxen .e-palette span { flex: 1 0 33.34%; }
  .e-voxen-final img { aspect-ratio: 4 / 3; padding: 48px 0; }
}

/* ---------- Mouvement (rien si « réduire les animations ») ---------- */
@media (prefers-reduced-motion: no-preference) {
  /* les cotes du logo se posent quand la tuile arrive */
  .e-voxen-cote { transition: opacity 900ms var(--douce) 300ms; }
  .e-voxen-logo.a-apparaitre .e-voxen-cote { opacity: 0; }
  .e-voxen-logo.a-apparaitre.apparu .e-voxen-cote { opacity: 1; }
  /* au survol, ce que la tuile montre bouge à peine */
  .e-voxen-symbole img, .e-voxen-eclair img, .e-voxen-vox img, .e-voxen-styles img { transition: transform 800ms var(--douce); }
  .e-voxen-symbole:hover img { transform: scale(1.05); }
  .e-voxen-eclair:hover img { transform: translateY(-6px) rotate(-3deg); }
  .e-voxen-vox:hover img { transform: scale(1.03); }
  .e-voxen-styles:hover img { transform: translateY(-6px); }
}