/* =====================================================================
   YD Studio · étude de cas Talkana (talkana.html) : la marque Talkana
   Couleurs relevées dans les vrais fichiers de l'app : ~/talkana-local/mobile/src/theme/talkana.ts (C, BOUTON, VERRE),
   la planche de DA du 10/09/2026 (les 6 bandes : White Smoke, Peach Orange, Coral, Red Orange, Firebrick, Pure Black),
   les pixels de l'icône (icon.png) et les fonds des deux exports de Taro en vectoriel.
   Police : Zen Kaku Gothic New Black (OFL), la police de l'app, uniquement pour sa présentation (tuile « Aa », le nom).
   Exception 15 de DESIGN.md : les couleurs d'une marque vivent dans sa feuille, pas dans tokens.css.
   ===================================================================== */

@font-face {   /* la police de Talkana (OFL), réduite aux lettres latines et à quelques kana, pour sa présentation seulement */
  font-family: "Zen Kaku Gothic New";
  src: url("../assets/polices/zen-kaku-gothic-new-900.woff2") format("woff2");
  font-weight: 600 900;   /* un seul fichier, la graisse Black (900) : il sert aussi quand le gabarit demande 600 */
  font-display: swap;
}

:root {
  /* talkana.ts, C : les couleurs de la planche de DA */
  --talkana-brique: #B81D00;        /* C.brick (Firebrick) : le fond de toute l'app */
  --talkana-rouge-orange: #FF5832;  /* C.redor (Red Orange) */
  --talkana-corail: #FF8C40;        /* C.coral (Coral) */
  --talkana-peche: #FFB657;         /* C.peach (Peach Orange) : le halo du fond, les aplats */
  --talkana-peche-texte: #FFDCB0;   /* C.peachTexte : le texte pêche posé sur la brique (4,79:1 mesuré dans l'app) */
  --talkana-fumee: #F4F4F5;         /* C.smoke (White Smoke) : le texte sur la brique, les traits du motif */
  --talkana-noir: #000000;          /* C.ink (Pure Black) : l'encre, le contour de Taro */
  /* talkana.ts, BOUTON et VERRE */
  --talkana-caramel: #CC7C3B;       /* BOUTON.plein : les boutons, l'ombre des cheveux de Taro assombrie */
  --talkana-ombre: #3C0800;         /* VERRE.ombre : les ombres de l'app, jamais du noir sur le rouge */
  /* les fonds des fichiers de Taro, gardés tels quels autour de lui */
  --talkana-fond-figma: #F6F6F6;    /* le fond de l'export Figma ~/Downloads/vcvc.svg (Taro, mains sur les hanches) */
  --talkana-fond-saut: #212121;     /* le fond de l'export vectorisé de l'illustration d'origine (Taro qui saute) */
  /* CarteSerie.tsx, le dégradé « fondCarteSerie » de la carte de partage (vertical, du haut vers le bas) */
  --talkana-carte-haut: #D2330B;
  --talkana-carte-bas: #7E1300;
}

.etude--talkana {
  --m-fonce: var(--talkana-ombre);
  --m-vin: var(--talkana-brique);   /* les cases de la mosaïque : la brique, le fond même des planches de Taro */
  --m-vif: var(--talkana-brique);
  --m-clair: var(--talkana-peche-texte);
  --m-encre: var(--talkana-ombre);
  --m-accent: var(--talkana-caramel);
  --m-degrade: linear-gradient(135deg, var(--talkana-ombre) 0%, var(--talkana-brique) 78%);   /* la brique de l'app, assombrie vers son ombre */
  --m-police: "Zen Kaku Gothic New", var(--police-texte);
}

/* ---------- L'identité : les tuiles propres à Talkana ---------- */
/* Taro en vectoriel : la carte des pièces découpées pour l'animer, puis le résultat sur la brique */
.e-talkana-construction { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border: 1px solid var(--trait); }
.e-talkana-construction > div { position: relative; display: grid; place-items: center; padding: 8% 7% 15%; }
.e-talkana-construction > div:first-child { background: var(--nuage); }
.e-talkana-construction > div:last-child { background: var(--talkana-brique); }
.e-talkana-construction img { display: block; width: 100%; max-height: 100%; height: auto; object-fit: contain; }
.e-talkana-construction > div:first-child .e-legende { color: var(--talkana-ombre); }
.e-talkana-construction > div:last-child .e-legende { color: var(--talkana-fumee); }

/* l'icône de l'app, aux coins d'iOS (exception 6) */
.e-talkana-icone { display: grid; place-items: center; background: var(--talkana-fumee); }
.e-talkana-icone img, .e-talkana-ios { display: block; width: 46%; height: auto; border-radius: 22.37%; }   /* les coins d'iOS (22,37 % du côté), ici et dans la case de la mosaïque */
.e-univers__mosaique .e-univers__case img.e-talkana-ios { width: 56%; border-radius: 22.37%; }
.e-talkana-icone .e-legende { color: var(--talkana-ombre); }

/* le nom, écrit comme sur la carte de partage de l'app (CarteSerie.tsx : Zen Kaku Black, interlettrage 4 pour 18, pêche) */
.e-talkana-nom { display: grid; place-items: center; background: linear-gradient(180deg, var(--talkana-carte-haut), var(--talkana-carte-bas)); }   /* le vrai fond de la carte : le pêche clair y fait 3,8:1 en haut, 5,5:1 au milieu où est le nom (26 px et plus, en 900), 8,1:1 en bas sous la légende */
.e-talkana-nom span { padding-left: 0.22em; font: 900 clamp(26px, 2.6vw, 40px) / 1 var(--m-police); letter-spacing: 0.22em; color: var(--talkana-peche-texte); }
.e-talkana-nom .e-legende { color: var(--talkana-peche-texte); }

/* la police : sur le caramel des boutons, à l'encre d'ombre (5,3:1) */
.etude--talkana .e-typo { background: var(--talkana-caramel); color: var(--talkana-ombre); }
.etude--talkana .e-typo__aa, .etude--talkana .e-typo__nom, .etude--talkana .e-typo__alphabet, .etude--talkana .e-elements__case--aa { font-weight: 900; }
.etude--talkana .e-typo__alphabet { opacity: 1; }
.e-talkana-kana { white-space: nowrap; }

/* les réactions de Taro, image par image, sur la brique de leurs planches */
.e-talkana-reactions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-content: center; gap: clamp(10px, 1.4vw, 20px) 10px; padding: clamp(20px, 3vw, 40px) clamp(14px, 2vw, 28px) clamp(44px, 4vw, 56px); background: var(--talkana-brique); }
.e-talkana-reactions figure { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 6px; color: var(--talkana-fumee); font: 500 12px / 1 var(--police-texte); }
.e-talkana-reactions img { display: block; width: min(100%, 140px); height: auto; }
.e-talkana-reactions .e-legende { color: var(--talkana-fumee); }

/* la flamme de la série, la deuxième mascotte */
.e-talkana-flamme { display: grid; place-items: center; background: var(--talkana-ombre); }
.e-talkana-flamme img { display: block; width: 50%; height: auto; }
.e-talkana-flamme .e-legende { color: var(--talkana-fumee); }

/* ---------- La direction artistique ---------- */
.etude--talkana .e-collage img { object-position: 50% 22%; }   /* les décors : le ciel et l'horizon, pas le sol vide laissé pour Taro */
.e-elements__case--plein img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- La charte ---------- */
.e-talkana-poses { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.e-talkana-poses figure { margin: 0; font: 500 12px / 1.25 var(--police-texte); color: var(--encre-douce); }
.e-talkana-poses figure > div { display: grid; place-items: center; aspect-ratio: 4 / 5; margin-bottom: 8px; padding: 8%; border-radius: var(--rayon); }
.e-talkana-poses img { display: block; width: 100%; height: 100%; object-fit: contain; }

.etude--talkana .e-couleurs { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.etude--talkana .e-couleurs i { height: clamp(72px, 7vw, 120px); }

.e-talkana-lignes-image { display: block; width: 100%; height: auto; border-radius: var(--rayon); }
.e-talkana-lignes { margin: 18px 0 0; padding: 0; list-style: none; }
.e-talkana-lignes li { display: grid; grid-template-columns: minmax(120px, 34%) 1fr; gap: 14px; padding: 10px 0; border-top: 1px solid var(--trait); font-size: 15px; line-height: 1.35; }
.e-talkana-lignes li:first-child { border-top: 0; }
.e-talkana-lignes b { font-weight: 600; color: var(--encre); }
.e-talkana-lignes span { color: var(--encre-douce); }

.e-talkana-chemins { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.e-talkana-chemins figure { margin: 0; font: 500 12px / 1.25 var(--police-texte); color: var(--encre-douce); }
.e-talkana-chemins img { display: block; width: 100%; height: auto; aspect-ratio: 393 / 852; object-fit: cover; margin-bottom: 8px; border-radius: var(--rayon); }   /* les trois à la hauteur d'un écran */

/* ---------- La publication : pas de fiche App Store, une vraie capture iPhone ---------- */
.e-talkana-preuve { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 16px; justify-self: center; }
.e-talkana-preuve .tel { --tel-l: clamp(240px, 22vw, 300px); }
.e-talkana-preuve figcaption { max-width: 22em; font: 500 14px / 1.35 var(--police-texte); color: var(--encre-douce); text-align: center; text-wrap: balance; }

@media (max-width: 1080px) {
  .e-talkana-construction { min-height: clamp(360px, 60vw, 540px); }
}
@media (max-width: 640px) {
  .e-talkana-construction > div { padding: 10% 8% 18%; }
  .etude--talkana .e-palette span { min-width: 0; padding: 8px 5px; font-size: 10px; letter-spacing: 0; }   /* six bandes en ligne : chaque code tient dans la sienne */
  .etude--talkana .e-couleurs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .e-talkana-lignes li { grid-template-columns: 1fr; gap: 2px; }
}

/* ---------- Mouvement (rien si « réduire les animations ») ---------- */
@media (prefers-reduced-motion: no-preference) {
  .e-talkana-icone img, .e-talkana-flamme img, .e-talkana-reactions img, .e-talkana-construction img { transition: transform 800ms var(--douce); }
  .e-talkana-icone:hover img { transform: scale(1.05); }
  .e-talkana-flamme:hover img { transform: translateY(-6px) rotate(3deg); }
  .e-talkana-reactions figure:hover img { transform: translateY(-6px); }
  .e-talkana-construction > div:hover img { transform: translateY(-6px); }
}