/* =====================================================================
   YD Studio · étude de cas Klaps (klaps.html) : la marque Klaps
   Couleurs relevées dans les vrais fichiers :
   - src/lib/design.ts de l'app (copie ~/klaps-sauvegarde/lot-0409-bis/src-modifie/src/lib/design.ts), où chaque valeur
     a été mesurée au pixel sur les exports du Figma « KLAPS App UI Design » : profond, électrique, cyan, glacier,
     champ, nuit (deliveryGradient), rouge des constats (redGradient), blanc cassé ;
   - la carte de couleur « Midnight Blue #191970 » du même Figma (images/38b9ac65… du fichier .fig) ;
   - la planche du logo « klaps logo options.pdf » (capture du 15/07/2026) : le bleu roi et le noir du logo sur blanc.
   Police : Mona Sans dans l'app (design.ts, graisses 300 à 600), mais AUCUN fichier de la police sur le disque :
   pas de tuile « Aa », son nom est seulement écrit dans la charte. Le texte de la page reste en Rethink Sans et Fredoka.
   Exception 15 de DESIGN.md : les couleurs d'une marque vivent dans sa feuille, pas dans tokens.css.
   ===================================================================== */

:root {
  --klaps-profond: #0604AB;     /* design.ts brandDeep : départ du dégradé de marque, encre des boutons */
  --klaps-electrique: #2F2DFB;  /* design.ts brandVivid : fin du dégradé de marque */
  --klaps-cyan: #00F0FF;        /* design.ts cyan (variable Figma --c1) : le seul accent */
  --klaps-glacier: #CFE7FF;     /* design.ts iceBlue : textes secondaires, milieu du dégradé des boutons */
  --klaps-champ: #6299FF;       /* design.ts field : fin du dégradé des boutons */
  --klaps-nuit: #0C0B31;        /* design.ts deliveryGradient (départ) : fond des écrans de l'intérieur de l'app */
  --klaps-nuit-fin: #09085D;    /* design.ts deliveryGradient (fin) */
  --klaps-minuit: #191970;      /* carte de couleur « Midnight Blue » du Figma */
  --klaps-rouge: #A40000;       /* design.ts redGradient (fin) : les écrans de constat de l'onboarding */
  --klaps-rouge-nuit: #0A0000;  /* design.ts redGradient (départ) */
  --klaps-blanc: #FBFBFF;       /* design.ts offWhite : libellés sur fond bleu */
  --klaps-roi: #0419A3;         /* le K du logo sur blanc et le fond bleu roi, relevés sur la planche du logo (15/07/2026) */
  --klaps-noir: #000000;        /* le mot « Klaps » sur blanc, planche du logo */
}

.etude--klaps {
  --m-fonce: var(--klaps-nuit);
  --m-vin: var(--klaps-profond);
  --m-vif: var(--klaps-electrique);
  --m-clair: var(--klaps-glacier);
  --m-encre: var(--klaps-profond);      /* sur le glacier : 10,2:1 */
  --m-accent: var(--klaps-cyan);
  /* le dégradé de marque de design.ts : presque vertical, avec une légère dérive vers la droite (mesuré sur les exports Figma) */
  --m-degrade: linear-gradient(174deg, var(--klaps-profond) 0%, var(--klaps-electrique) 100%);
  --m-police: var(--police-texte);      /* Mona Sans absente du disque : on ne la simule pas */
}

/* ---------- L'identité : les tuiles propres à Klaps ---------- */
.e-klaps-logo { display: grid; place-items: center; background: var(--nuage); border: 1px solid var(--trait); }   /* sur blanc, comme sur la planche du logo (charte 01) */
.e-klaps-logo svg { display: block; width: 72%; height: auto; overflow: visible; }
.e-klaps-logo .e-legende { color: var(--klaps-profond); }
.e-klaps-k { fill: var(--klaps-roi); }
.e-klaps-mot { fill: var(--klaps-noir); }
.e-klaps-repere { stroke: var(--klaps-profond); stroke-opacity: 0.4; stroke-width: 1; vector-effect: non-scaling-stroke; fill: none; }
.e-klaps-cote { stroke: var(--klaps-cyan); stroke-width: 1.5; vector-effect: non-scaling-stroke; fill: none; }
.e-klaps-cote-texte { fill: var(--klaps-cyan); font: 600 9px var(--police-texte); }

.e-klaps-symbole { display: grid; place-items: center; background: var(--m-degrade); }
.e-klaps-symbole svg { display: block; width: 62%; height: auto; overflow: visible; }
.e-klaps-symbole .e-legende { color: var(--nuage); }
.e-klaps-blanc { fill: var(--klaps-blanc); }

.e-klaps-klapo { display: grid; place-items: center; background: var(--klaps-glacier); }
.e-klaps-klapo img { display: block; width: 58%; height: auto; margin-bottom: 8%; }
.e-klaps-klapo .e-legende { color: var(--klaps-profond); }

.e-klaps-rangs { --echelle: clamp(0.26px, 0.028vw, 0.41px); display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); align-items: end; align-content: center; gap: 10px; padding: clamp(20px, 3vw, 44px) clamp(18px, 2.4vw, 36px) 56px; background: var(--klaps-nuit-fin); }
.e-klaps-rangs figure { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 10px; color: var(--klaps-glacier); font: 500 12px / 1 var(--police-texte); }
.e-klaps-rangs img { display: block; width: calc(var(--w) * var(--echelle)); max-width: 100%; height: auto; }   /* tailles d'origine gardées entre elles : les sept viennent de la même rangée Figma */
.e-klaps-rangs .e-legende { color: var(--klaps-glacier); }

.e-klaps-icones { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-content: center; gap: clamp(22px, 3vw, 40px) 8px; padding: clamp(20px, 3vw, 44px) clamp(16px, 2vw, 28px) 56px; background: var(--klaps-profond); }
.e-klaps-icones figure { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 10px; color: var(--klaps-blanc); font: 500 12px / 1.2 var(--police-texte); }
.e-klaps-icones img { display: block; width: auto; height: clamp(32px, 3.2vw, 46px); }
.e-klaps-icones .e-legende { color: var(--klaps-blanc); }

.e-klaps-visuel { display: grid; place-items: center; }
.e-klaps-visuel img { display: block; width: 62%; height: auto; margin-bottom: 6%; }
.e-klaps-visuel--nuit { background: var(--klaps-nuit); }   /* le fond du radar de l'app : son voile sombre s'y fond */
.e-klaps-visuel--glacier { background: var(--klaps-glacier); }
.e-klaps-visuel--minuit { background: var(--klaps-minuit); }
.e-klaps-visuel--nuit .e-legende, .e-klaps-visuel--minuit .e-legende { color: var(--nuage); }
.e-klaps-visuel--glacier .e-legende { color: var(--klaps-profond); }
.e-klaps-visuel--etroit img { width: 44%; }

/* ---------- La direction artistique : les cinq illustrations du Mode quiz (3 puis 2) ---------- */
.e-klaps-collage { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 4px; margin-top: auto; }
.e-klaps-collage img { display: block; grid-column: span 2; width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; }
.e-klaps-collage img:nth-child(n + 4) { grid-column: span 3; aspect-ratio: 4 / 3; }

/* ---------- L'univers : les cases des visuels détourés ---------- */
.e-klaps-case--large { aspect-ratio: 4 / 3; }
.e-univers__mosaique .e-klaps-case--large img { width: 78%; }

/* ---------- La charte : les insignes ---------- */
.e-klaps-insignes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px 12px; margin: 0; padding: 0; list-style: none; }
.e-klaps-insignes li { display: grid; grid-template-columns: 34px 1fr; align-items: center; gap: 4px 12px; font-size: 13px; line-height: 1.3; }
.e-klaps-insignes img { grid-row: span 2; width: 34px; height: auto; display: block; }
.e-klaps-insignes b { font-weight: 600; color: var(--encre); }
.e-klaps-insignes span { color: var(--encre-douce); }
.e-seuils--klaps img { width: 30px; }
.e-klaps-bord { border: 1px solid var(--trait); }

/* ---------- Où en est Klaps : deux vraies captures iPhone ---------- */
.e-klaps-iphones { display: flex; justify-content: center; align-items: flex-start; gap: clamp(16px, 2.4vw, 32px); }
.e-klaps-iphones figure { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.e-klaps-iphones figure:nth-child(2) { margin-top: clamp(24px, 3vw, 48px); }
.e-klaps-iphones .tel { --tel-l: clamp(150px, 15vw, 220px); }
.e-klaps-iphones figcaption { font: 500 13px / 1.3 var(--police-texte); color: var(--encre-douce); text-align: center; }

/* ---------- La grande image : la rangée des maquettes Figma, posée sur le dégradé de marque ---------- */
.e-klaps-final { background: var(--m-degrade); }
.e-klaps-final img { aspect-ratio: auto; object-fit: contain; padding: clamp(24px, 4vw, 64px) 0 0 clamp(24px, 18vw, 320px); transform-origin: 50% 100%; }   /* collée au bord droit : le téléphone coupé par l'export finit sur le bord du cadre, pas au milieu du bleu */

/* ---------- Tablette et téléphone ---------- */
@media (max-width: 1080px) {
  .e-klaps-iphones { justify-self: center; }
  .e-klaps-rangs { --echelle: 0.4px; }
}
@media (min-width: 641px) and (max-width: 1080px) {
  /* sans tuile « Aa » (pas de fichier Mona Sans), la palette restait seule sur sa ligne : elle prend toute la largeur, couleurs côte à côte */
  .etude--klaps .e-palette { grid-column: span 12; flex-direction: row; min-height: 160px; }
}
@media (max-width: 640px) {
  .e-klaps-rangs { --echelle: 0.34px; display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-end; gap: 18px 8px; }   /* 4 puis 3, centrés */
  .e-klaps-rangs figure { flex: 0 0 calc(25% - 6px); }
  .e-klaps-symbole svg { width: 50%; margin-bottom: 10%; }   /* la cote « x » du bas laisse de l'air à la légende */
  .e-klaps-klapo img { width: 44%; }
  .e-klaps-insignes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .e-klaps-iphones .tel { --tel-l: 150px; }
}

/* ---------- Mouvement (rien si « réduire les animations ») ---------- */
@media (prefers-reduced-motion: no-preference) {
  /* les repères du logo se tracent quand la tuile arrive */
  .e-klaps-repere { transition: stroke-opacity 1100ms var(--douce) 300ms; }
  .e-klaps-logo.a-apparaitre .e-klaps-repere { stroke-opacity: 0; }
  .e-klaps-logo.a-apparaitre.apparu .e-klaps-repere { stroke-opacity: 0.4; }
  /* au survol, ce que la tuile montre bouge à peine */
  .e-klaps-klapo img, .e-klaps-visuel img, .e-klaps-rangs img, .e-klaps-icones img, .e-klaps-symbole svg { transition: transform 800ms var(--douce); }
  .e-klaps-klapo:hover img { transform: translateY(-6px) rotate(-2deg); }
  .e-klaps-visuel:hover img { transform: translateY(-6px); }
  .e-klaps-symbole:hover svg { transform: scale(1.04); }
  .e-klaps-rangs figure:hover img, .e-klaps-icones figure:hover img { transform: translateY(-6px); }
}