/* =====================================================================
   YD Studio · étude de cas AudiCheck (audicheck.html) : la marque AudiCheck
   Couleurs relevées le 05/10/2026 dans les vrais fichiers (chemins complets : assets/etudes/outils/preparer-audicheck.py) :
   - le logo livré (dossier « Audicheck - 1 », FILE/AUDICHECK.ai, rendu et compté pixel par pixel) : nuit #062047 des lettres,
     bleu #1B76D3 du A, bleu clair #66B5F8 de la goutte, bleu profond #0E48A2 des ombres du symbole ;
   - le dégradé de marque, mesuré en diagonale sur LOGO/GRADIENT BG /1.png et 2.png : #66B5F8 en haut à gauche,
     #1B76D3 vers 30 %, #0E48A2 vers 62 %, #062047 en bas à droite ;
   - les écrans de l'app : fond ciel #D9EFFF (~/Documents/design here.png, l'accueil) ;
   - les exports SVG du Figma « AUDICHECK » (~/Documents/aaaaaaaaaa/*.svg) : le vert #54CD58 des réponses et des réussites.
   Police : l'app est en Poppins (relevé dans les fichiers .fig), mais aucun fichier de la police n'est sur le Mac :
   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 {
  --audicheck-nuit: #062047;      /* AUDICHECK.ai : les lettres du logo ; fin du dégradé ; fond des écrans du test (Figma) */
  --audicheck-profond: #0E48A2;   /* AUDICHECK.ai : les ombres du symbole ; le dégradé vers 62 % */
  --audicheck-bleu: #1B76D3;      /* AUDICHECK.ai : le A du symbole ; le dégradé vers 30 % ; HEARING TEST 1.svg */
  --audicheck-ciel: #66B5F8;      /* AUDICHECK.ai : la goutte claire ; début du dégradé (GRADIENT BG) */
  --audicheck-fond: #D9EFFF;      /* le fond ciel des écrans de l'app (design here.png, en haut) */
  --audicheck-vert: #54CD58;      /* les exports SVG du Figma : réponses et réussites */
}

.etude--audicheck {
  --m-fonce: var(--audicheck-nuit);
  --m-vin: var(--audicheck-profond);
  --m-vif: var(--audicheck-bleu);
  --m-clair: var(--audicheck-fond);
  --m-encre: var(--audicheck-nuit);
  --m-accent: var(--audicheck-vert);
  --m-degrade: linear-gradient(to bottom right, var(--audicheck-ciel) 0%, var(--audicheck-bleu) 30%, var(--audicheck-profond) 62%, var(--audicheck-nuit) 100%);   /* GRADIENT BG */
  --m-police: var(--police-texte);   /* pas de fichier de Poppins : la marque se présente avec la police du site */
}

/* ---------- L'identité : les tuiles propres à AudiCheck ---------- */
.e-audicheck-icone { display: grid; place-items: center; background: var(--audicheck-nuit); }
.e-audicheck-icone img { display: block; width: 46%; height: auto; border-radius: var(--rayon); }
.e-audicheck-icone .e-legende { color: var(--nuage); }

.e-audicheck-construction { display: grid; place-items: center; border: 1px solid var(--trait); background: var(--nuage); }
.e-audicheck-construction img { display: block; width: 92%; height: auto; }
.e-audicheck-construction .e-legende { color: var(--encre-douce); }

.e-audicheck-lueurs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-content: center; gap: 12px; padding: clamp(20px, 2.4vw, 36px) clamp(20px, 2.4vw, 36px) 52px; background: var(--audicheck-profond); }
.e-audicheck-lueurs figure { margin: 0; display: flex; flex-direction: column; gap: 7px; color: var(--nuage); font: 500 12px / 1 var(--police-texte); }
.e-audicheck-lueurs img { display: block; width: 100%; height: auto; border-radius: var(--rayon); }
.e-audicheck-lueurs .e-legende { color: var(--nuage); }

/* ---------- La refonte : l'écran posé à plat (la première version était un aperçu web de 375 × 667, pas un iPhone) ---------- */
.e-audicheck-refonte { margin: 0; width: fit-content; }
.e-audicheck-plat { position: relative; width: clamp(260px, 25vw, 340px); aspect-ratio: 734 / 1306; overflow: hidden; border: 1px solid var(--trait); border-radius: var(--rayon); background: var(--audicheck-fond); }

/* ---------- La charte ---------- */
.e-audicheck-bord { outline: 1px solid var(--trait); outline-offset: -1px; }   /* le logo sur fond blanc, posé sur la fiche blanche */
.e-audicheck-frequences { margin: 0; padding: 0; list-style: none; }
.e-audicheck-frequences li { display: grid; grid-template-columns: 56px auto 1fr; align-items: center; gap: 16px; padding: 10px 0; border-top: 1px solid var(--trait); font-size: 15px; }
.e-audicheck-frequences li:first-child { border-top: 0; padding-top: 0; }
.e-audicheck-frequences img { display: block; width: 56px; height: 56px; border-radius: var(--rayon); }
.e-audicheck-frequences b { font-weight: 600; color: var(--encre); font-variant-numeric: tabular-nums; }
.e-audicheck-frequences span { justify-self: end; text-align: right; color: var(--encre-douce); }
.e-audicheck-reponses { display: block; width: 100%; height: auto; border-radius: var(--rayon); background: var(--audicheck-nuit); }

/* ---------- La publication : la fiche (sans aperçus : ceux en ligne sont écartés), puis les premiers aperçus ---------- */
.e-audicheck-publication { display: flex; flex-direction: column; gap: 22px; min-width: 0; }
.e-publication .e-audicheck-store { height: auto; padding-bottom: 0; }
.e-audicheck-store .store__infos { margin-bottom: 0; border-bottom: 0; padding-bottom: 12px; }
.e-audicheck-store .store__coeur { width: 18px; height: 17px; fill: var(--encre-douce); }
.e-audicheck-apercus { margin: 0; }
.e-audicheck-apercus div { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.e-audicheck-apercus img { display: block; width: 100%; height: auto; border: 1px solid var(--trait); border-radius: var(--rayon); }
.e-audicheck-apercus figcaption { margin-top: 10px; font: 500 13px / 1.3 var(--police-texte); color: var(--encre-douce); }

/* ---------- Tablette et téléphone ---------- */
@media (max-width: 1080px) {
  .e-audicheck-refonte { justify-self: center; }
  .e-audicheck-publication { width: min(100%, 520px); justify-self: center; }
}
@media (max-width: 640px) {
  .e-audicheck-lueurs { padding: 20px 20px 52px; }
  .e-audicheck-plat { width: min(300px, calc(100vw - 48px)); }
  .e-audicheck-frequences li { grid-template-columns: 44px auto 1fr; gap: 12px; font-size: 14px; }
  .e-audicheck-frequences img { width: 44px; height: 44px; }
}

@media (max-width: 400px) {   /* très petits téléphones : les codes de la palette tiennent dans leur bande */
  .etude--audicheck .e-palette span { min-width: 0; padding: 8px 6px; font-size: 10px; }
}

/* ---------- Mouvement (rien si « réduire les animations ») ---------- */
@media (prefers-reduced-motion: no-preference) {
  /* au survol, ce que la tuile montre bouge à peine */
  .e-audicheck-icone img, .e-audicheck-lueurs img { transition: transform 800ms var(--douce); }
  .e-audicheck-icone:hover img { transform: translateY(-6px) rotate(-3deg); }
  .e-audicheck-lueurs figure:hover img { transform: translateY(-4px); }
}

/* (le reflet du téléphone sur l'eau a été retiré le 06/10 au soir : le téléphone est maintenant dans la
   photo elle-même, avec son vrai reflet sur le marbre.) */