/* =====================================================================
   YD Studio · étude de cas FixScan (fixscan.html) : la marque FixScan
   Couleurs relevées (médianes de pixels, 05/10/2026) dans les vraies captures iPhone de l'app (copies dans
   assets/etudes/fixscan/sources/, provenance dans assets/etudes/outils/preparer-fixscan.py) :
     analyse.jpeg       fond nuit, cartes, carte active
     scan.jpeg          rose du déclencheur, orange du bandeau « Faible luminosité détectée »
     guide.jpeg         rose des badges « ÉTAPE », rose pâle de la pastille « 4 Étapes »
     historique.jpeg    gris du fond, vert du liseré « Résolu », vert et rouge pâles des cartes
     analyse-en.jpeg / ~/Documents/mm.jpeg  rouge du liseré « TO DO » (En attente)
     apercu-*.png       le dégradé des titres des aperçus App Store, mesuré au début et à la fin des lettres
     paywall.png        la nuit du bas du paywall (texte posé sur le rose : 5,0:1)
   FixScan n'a pas de fichier de police (ni code, ni Figma) : pas de tuile « Aa », --m-police reste la police du site.
   Exception 15 de DESIGN.md : les couleurs d'une marque vivent dans sa feuille, pas dans tokens.css.
   ===================================================================== */

:root {
  --fixscan-nuit: #191A2E;          /* fond de « Analyse en cours » (analyse.jpeg et analyse-en.jpeg, 100 % du fond) */
  --fixscan-carte: #222335;         /* cartes des étapes de l'analyse (analyse.jpeg) */
  --fixscan-nuit-rosee: #2A1D31;    /* carte active « Préparation du guide » (analyse.jpeg) */
  --fixscan-rose: #E94462;          /* déclencheur photo (scan.jpeg) et badges « ÉTAPE » (guide.jpeg) ; = --app-fixscan */
  --fixscan-rose-pale: #FCE7EE;     /* fond de la pastille « 4 Étapes » (guide.jpeg) */
  --fixscan-orange: #F49E0B;        /* bandeau « Faible luminosité détectée » (scan.jpeg) */
  --fixscan-vert: #23C55D;          /* liseré et coche « Résolu » (historique.jpeg, JPEG : valeur approchée) */
  --fixscan-rouge: #F04444;         /* liseré « TO DO », En attente (~/Documents/mm.jpeg) */
  --fixscan-gris: #F5F5F7;          /* fond de l'Historique (historique.jpeg) */
  --fixscan-vert-pale: #F0FDF4;     /* fond de la carte « Résolu » (historique.jpeg) */
  --fixscan-rouge-pale: #FEF2F2;    /* fond de la carte « En attente » (historique.jpeg) */
  --fixscan-titre-debut: #EC4461;   /* dégradé des titres des aperçus App Store : début (apercu-*.png) */
  --fixscan-titre-fin: #D9679F;     /* … et fin du dégradé */
  --fixscan-paywall-nuit: #0A0B1F;  /* bas du paywall (paywall.png) */
}

.etude--fixscan {
  --m-fonce: var(--fixscan-nuit);
  --m-vin: var(--fixscan-nuit-rosee);
  --m-vif: var(--fixscan-rose);
  --m-clair: var(--fixscan-rose-pale);
  --m-encre: var(--fixscan-nuit);
  --m-accent: var(--fixscan-orange);
  --m-degrade: linear-gradient(135deg, var(--fixscan-titre-debut) 0%, var(--fixscan-titre-fin) 100%);   /* le dégradé des titres des aperçus */
  --m-police: var(--police-texte);   /* pas de vrai fichier de police : la police du site */
}

/* ---------- L'identité : les tuiles propres à FixScan ---------- */
.e-fixscan-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.e-fixscan-photo .e-legende { color: var(--nuage); }   /* blanc sur le bas sombre de la photo (mesuré au banc) */

.e-fixscan-symbole { display: grid; place-items: center; background: var(--fixscan-rose-pale); }
.e-fixscan-symbole img { display: block; width: min(44%, 141px); height: auto; border-radius: 26%; }   /* coins d'icône iOS (exception 6) : à 26 %, plus aucun pixel du fond du paywall (mesuré : 73 à 23 %, 5 à 26 %) */
.e-fixscan-symbole .e-legende { color: var(--fixscan-nuit); }

.e-fixscan-paywall { background: var(--fixscan-paywall-nuit); }
.e-fixscan-paywall img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }
.e-fixscan-paywall .e-legende { top: 16px; bottom: auto; color: var(--nuage); }   /* en haut à gauche : le coin vide du paywall */

.e-fixscan-cadre { display: grid; place-items: center; padding: 0 0 36px; }
.e-fixscan-cadre img { display: block; width: 88%; max-width: 440px; height: auto; }   /* jamais plus grand que la capture */
.e-fixscan-cadre--nuit { background: var(--fixscan-nuit); }
.e-fixscan-cadre--nuit .e-legende { color: var(--nuage); }
.e-fixscan-cadre--gris { background: var(--fixscan-gris); }
.e-fixscan-cadre--gris .e-legende, .e-fixscan-cadre--blanc .e-legende { color: var(--fixscan-nuit); }
.e-fixscan-cadre--blanc { background: var(--nuage); border: 1px solid var(--trait); }

/* ---------- L'univers : le symbole posé sur sa case, avec les mêmes coins (sinon le fond du paywall se voit aux angles) ---------- */
.etude--fixscan .e-univers__case img { border-radius: 26%; }

/* ---------- La direction artistique : le canevas Figma sur sa feuille ---------- */
.e-fixscan-figma { margin: auto 0 0; }
.e-fixscan-figma img { display: block; width: 100%; height: auto; border-radius: var(--rayon); border: 1px solid var(--trait); }
.e-fixscan-figma figcaption { margin-top: 10px; font: 500 11px / 1.3 var(--police-texte); color: var(--encre-douce); }
.e-elements__case.e-fixscan-plein img { width: 100%; height: 100%; object-fit: cover; }
.e-elements__case.e-fixscan-plein--bord { border: 1px solid var(--trait); }
.e-elements__case img.e-fixscan-icone { width: min(52%, 141px); border-radius: 26%; }

/* ---------- La charte ---------- */
.e-fixscan-logos figure > span { display: grid; place-items: center; aspect-ratio: 300 / 130; margin-bottom: 8px; overflow: hidden; border-radius: var(--rayon); }
.e-fixscan-logos figure > span img { margin: 0; border-radius: 0; width: 100%; height: 100%; object-fit: cover; }
.e-fixscan-logos .e-fixscan-logos__symbole { position: relative; background: var(--fixscan-rose-pale); }
.e-fixscan-logos .e-fixscan-logos__symbole img { position: absolute; left: 50%; top: 13%; width: auto; height: 74%; transform: translateX(-50%); border-radius: 26%; }
.e-fixscan-etats li { grid-template-columns: 34px 1fr auto; }
.e-fixscan-etats i { display: block; width: 34px; height: 34px; border-radius: var(--rayon); }
.e-fixscan-apercus { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; align-items: start; }
.e-fixscan-apercus img { display: block; width: 100%; height: auto; border-radius: var(--rayon); border: 1px solid var(--trait); }

/* ---------- La publication : la fiche, sans aperçus (ceux en ligne portent de faux chiffres) ---------- */
.etude--fixscan .e-publication .store { height: auto; padding-bottom: 20px; }
.e-fixscan-nouveautes { margin: 0; }
.e-fixscan-nouveautes__version { display: flex; justify-content: space-between; margin: 0 0 8px; font-size: 13px; color: var(--encre-douce); }
.e-fixscan-nouveautes ul { margin: 0; padding: 0 0 0 18px; font-size: 13px; line-height: 1.5; color: var(--encre); }
.e-fixscan-nouveautes li + li { margin-top: 4px; }

/* ---------- Mouvement (rien si « réduire les animations ») ---------- */
@media (prefers-reduced-motion: no-preference) {
  .e-fixscan-symbole img, .e-fixscan-photo img, .e-fixscan-cadre img { transition: transform 800ms var(--douce); }
  .e-fixscan-symbole:hover img { transform: scale(1.05); }
  .e-fixscan-photo:hover img { transform: scale(1.03); }
  .e-fixscan-cadre:hover img { transform: translateY(-6px); }
}

/* ---------- Téléphone ---------- */
@media (max-width: 640px) {
  .e-fixscan-palette { min-height: 140px; }
  .e-fixscan-paywall { min-height: 400px; }   /* le haut du paywall reste entier */
  .e-fixscan-photo { min-height: 380px; }     /* les quatre coins du viseur restent loin de la légende */
  .etude--fixscan .e-final img { aspect-ratio: 4 / 3; }   /* en 21:9, le téléphone de la grande image ne faisait que 100 px de large */
}

/* ---------- Tablette : 7 tuiles sur deux colonnes, la dernière prend toute la largeur ---------- */
@media (max-width: 1080px) and (min-width: 641px) {
  .e-fixscan-cadre--blanc { grid-column: span 12; }
}