/* Fieat, site vitrine.
   Jetons repris de l'application (src/index.css du projet Fieat) : #0A0A0A, #131315, #1C1C1E,
   orange #FF6B00, magenta #E930A0, violet #5E5CE6, vert #34C759, encre #12000A. */

:root {
  --bg: #0A0A0A;
  --surface: #161619;
  --surface-2: #202023;
  --surface-3: #202023;
  --bord: #26262A;
  --bord-fort: #33333A;
  --accent: #52DCF2;
  --accent-profond: #158292;
  --accent-vif: #22D3EE;
  --accent-encart: #0D2A31;
  --accent-clair: #1B98A8;
  --magenta: #22D3EE;
  --violet: #22D3EE;
  --vert: #56CC95;
  --encre: #FFFFFF;
  --texte: #F2F2F7;
  --texte-2: #B9B9BD;
  --texte-3: #6E6E76;
  --pas: 8px;
  --large: 1200px;
  --rayon: 12px;
  --fram: 26px;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--texte);
  font-family: -apple-system, 'Inter Variable', Inter, system-ui, 'Segoe UI', Roboto, sans-serif;
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
p { margin: 0; }

.saut { position: absolute; left: -9999px; }
.saut:focus { left: 8px; top: 8px; background: var(--accent); color: var(--encre); padding: 8px 16px; border-radius: var(--rayon); z-index: 20; }

/* ---------- entete ---------- */

.entete {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; gap: calc(var(--pas) * 3);
  padding: calc(var(--pas) * 1.75) calc(var(--pas) * 3);
  background: rgba(10, 10, 10, 0.86);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--bord);
}
.marque { font-size: 21px; font-weight: 800; letter-spacing: -0.03em; display: inline-flex; align-items: center; gap: 9px; }
.marque-logo { width: 26px; height: 26px; border-radius: 8px; display: block; }
.marque-fi { color: var(--texte); }
.marque-eat { color: var(--accent); }
.nav { display: none; gap: calc(var(--pas) * 3.5); margin-left: auto; font-size: 14px; color: var(--texte-2); }
.nav a { padding: 4px 0; border-bottom: 1px solid transparent; }
.nav a:hover { color: var(--texte); border-color: var(--accent); }

/* ---------- boutons ---------- */

.bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--pas);
  background: var(--accent-profond); color: var(--encre);
  font-weight: 700; font-size: 16px; letter-spacing: -0.01em;
  padding: calc(var(--pas) * 1.75) calc(var(--pas) * 3);
  border-radius: var(--rayon);
  transition: background-color 140ms ease;
}
.bouton:hover { background: var(--accent-clair); }
.bouton:focus-visible { outline: 2px solid var(--accent-clair); outline-offset: 3px; }
.bouton-petit { font-size: 14px; padding: calc(var(--pas) * 1.25) calc(var(--pas) * 2); margin-left: auto; }
.bouton-large { padding: calc(var(--pas) * 2) calc(var(--pas) * 4); font-size: 17px; }

.lien-souligne {
  color: var(--texte); font-size: 16px; font-weight: 650;
  border: 1px solid var(--bord-fort); border-radius: var(--rayon);
  background: rgba(255, 255, 255, 0.045);
  padding: calc(var(--pas) * 1.75) calc(var(--pas) * 3);
  transition: border-color 140ms ease, background-color 140ms ease;
}
.lien-souligne:hover { border-color: var(--accent); background: var(--surface-2); }

/* ---------- typographie ---------- */

.sur-titre {
  display: flex; align-items: center; gap: calc(var(--pas) * 1.5);
  font-size: 12px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--texte-3); margin: 0 0 calc(var(--pas) * 3);
}
.sur-titre .trait { width: 32px; height: 1px; background: var(--accent); }

.titre-section {
  font-size: clamp(26px, 4.4vw, 42px);
  line-height: 1.12; letter-spacing: -0.035em; font-weight: 750;
  margin: 0 0 calc(var(--pas) * 6);
  max-width: 30ch;
}

section { padding: calc(var(--pas) * 7) calc(var(--pas) * 3); }

/* ---------- hero ---------- */

.hero {
  display: grid; gap: calc(var(--pas) * 6);
  max-width: var(--large); margin: 0 auto;
  padding-top: calc(var(--pas) * 7);
  background: radial-gradient(120% 70% at 50% 0%, rgba(34, 211, 238, 0.22) 0%, rgba(34, 211, 238, 0.07) 42%, transparent 76%);
  background-repeat: no-repeat;
}
.hero h1 {
  font-size: clamp(38px, 9.2vw, 78px);
  line-height: 1.02; letter-spacing: -0.045em; font-weight: 780;
  text-wrap: balance;
  margin: 0 0 calc(var(--pas) * 3);
  max-width: 18ch;
}
.hero h1 em { font-style: normal; color: var(--accent); }
.hero-sous { color: var(--texte-2); font-size: clamp(16px, 2.2vw, 19px); max-width: 44ch; margin-bottom: calc(var(--pas) * 4); }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: calc(var(--pas) * 3); }

.hero-visuel { position: relative; display: flex; justify-content: center; padding: calc(var(--pas) * 3) 0; }
.anneau { position: absolute; width: 76%; max-width: 330px; right: 2%; top: -6%; display: none; }
.anneau-chiffre { fill: var(--texte); font-size: 44px; font-weight: 750; letter-spacing: -0.04em; text-anchor: middle; }
.anneau-legende { fill: var(--texte-3); font-size: 13px; letter-spacing: 0.06em; text-anchor: middle; }
.ecran {
  position: relative; z-index: 2; margin: 0;
  width: min(300px, 64vw);
  background: var(--surface-3);
  border: 1px solid var(--bord-fort);
  border-radius: var(--fram);
  padding: 7px;
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.6);
}
.ecran img { border-radius: calc(var(--fram) - 7px); width: 100%; }

.pastille {
  position: absolute; z-index: 3;
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--surface-2);
  border: 1px solid var(--bord-fort);
  border-radius: 999px;
  padding: 9px 14px;
  font-size: 13px; font-weight: 600; white-space: nowrap;
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.55);
}
.pastille-serie { left: 0; top: 32%; }
.pastille-niveau { right: -3%; bottom: 6%; }

/* ---------- l'iPhone : coque, ecran, et contenu qui defile dedans ---------- */

.tel-scene { position: relative; display: grid; place-items: center; }
.tel-halo {
  position: absolute; inset: -12% -26%;
  background: radial-gradient(58% 46% at 50% 44%, rgba(34, 211, 238, 0.22), transparent 72%);
}

/* Coque : rayon exprime en pourcentage, donc identique en pixels sur la largeur et la
   hauteur (61 px pour 393 x 852), comme les coins d'un vrai telephone. */
.tel {
  position: relative;
  width: min(322px, 72vw);
  aspect-ratio: 393 / 852;
  margin: 0 auto;
  padding: 3.2%;
  border-radius: 15.5% / 7.15%;
  background: linear-gradient(150deg, #A2A4AC 0%, #4A4A52 11%, #17171B 36%, #0F0F12 52%, #3C3C44 74%, #94949D 92%, #63636C 100%);
  box-shadow: 0 44px 90px rgba(0, 0, 0, 0.66), 0 0 0 1px rgba(255, 255, 255, 0.07);
}
.tel::before, .tel::after {
  content: ''; position: absolute; width: 3px; border-radius: 3px;
  background: linear-gradient(180deg, #A6A6AE, #3E3E46);
}
.tel::before { left: -3px; top: 16%; height: 10%; box-shadow: 0 62px 0 0 #5C5C65; }
.tel::after { right: -3px; top: 25%; height: 14%; }

/* les deux pastilles flottantes bavaient sur l'ecran : le telephone suffit */
.hero .pastille { display: none; }

.tel-ecran {
  position: relative; height: 100%; overflow: hidden;
  border-radius: 12.5% / 5.75%;
  background: #000;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.85) inset;
}
.tel-pile { display: block; transform: translateY(0); will-change: transform; }
.tel-pile img { display: block; width: 100%; height: auto; }

.tel-ile {
  position: absolute; z-index: 3; top: 1.5%; left: 50%; transform: translateX(-50%);
  width: 29%; height: 3.2%;
  background: #000; border-radius: 999px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06);
}
/* l'objectif, a droite de l'ile : sans lui, la pilule lit comme un poincon Android */
.tel-ile::after {
  content: ''; position: absolute; right: 7%; top: 50%; transform: translateY(-50%);
  width: 24%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #1B2A44 0%, #0A0F1A 55%, #05070C 100%);
  box-shadow: 0 0 0 1px rgba(130, 175, 255, 0.18), 0 0 6px rgba(90, 140, 220, 0.2) inset;
}
.tel-reflet {
  position: absolute; z-index: 4; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(118deg, rgba(255, 255, 255, 0.11) 0%, rgba(255, 255, 255, 0.02) 20%, transparent 40%, transparent 76%, rgba(255, 255, 255, 0.05) 100%);
}

/* L'app defile dans l'ecran pendant qu'on defile la page. Sans prise en charge, la pile
   reste en haut et l'ecran d'accueil s'affiche : rien ne manque. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .hero .tel-pile { animation: defile linear both; animation-timeline: scroll(root block); animation-range: 0% 22%; }
    .rail .tel-pile { animation: defile linear both; animation-timeline: scroll(root block); animation-range: 27% 64%; }
    @keyframes defile { from { transform: translateY(0); } to { transform: translateY(-80%); } }
  }
}

/* ---------- chiffres ---------- */

.chiffres { max-width: var(--large); margin: 0 auto; }
.chiffres-bande {
  display: grid; gap: calc(var(--pas) * 4);
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  border-top: 1px solid var(--bord);
  padding-top: calc(var(--pas) * 4);
}
.chiffre { padding-top: 0; }
.chiffre-valeur { font-variant-numeric: tabular-nums; font-size: clamp(34px, 7vw, 52px); font-weight: 780; letter-spacing: -0.05em; line-height: 1; }
.chiffre-valeur span { font-size: 0.42em; font-weight: 650; letter-spacing: 0; color: var(--accent); margin-left: 4px; }
.chiffre-legende { color: var(--texte-2); font-size: 14px; margin-top: calc(var(--pas) * 1.5); max-width: 30ch; }
.chiffres-note { color: var(--texte-3); font-size: 13px; margin-top: calc(var(--pas) * 4); }

/* ---------- fonctions ---------- */

.fonctions { max-width: var(--large); margin: 0 auto; }

.fonction { display: grid; gap: calc(var(--pas) * 2); padding: calc(var(--pas) * 4) 0; border-top: 1px solid var(--bord); }
.numero { font-size: 13px; font-weight: 700; letter-spacing: 0.1em; color: var(--accent); }
.fonction h3 {
  font-size: clamp(21px, 3.4vw, 30px); font-weight: 720; letter-spacing: -0.03em;
  line-height: 1.2; margin: 0 0 calc(var(--pas) * 1.5);
}
.fonction-corps p { color: var(--texte-2); max-width: 62ch; }
.fonction-marque { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--texte-3); }

/* ---------- ecrans ---------- */

.ecrans { padding-left: 0; padding-right: 0; }
.ecrans .titre-section { max-width: var(--large); margin-left: auto; margin-right: auto; padding: 0 calc(var(--pas) * 3); }
.ecrans-piste {
  display: flex; gap: calc(var(--pas) * 2.5);
  overflow-x: auto; scroll-snap-type: x mandatory;
  padding: calc(var(--pas) * 1) calc(var(--pas) * 3) calc(var(--pas) * 3);
  scrollbar-width: thin;
}
.ecrans-piste figure { flex: 0 0 auto; margin: 0; scroll-snap-align: center; }
.ecrans-piste img {
  width: min(228px, 62vw);
  border: 1px solid var(--bord-fort);
  border-radius: var(--fram);
  background: var(--surface-2);
  padding: 6px;
}
.figure-majeure img { width: min(258px, 70vw); }
.ecrans-piste figcaption {
  margin-top: calc(var(--pas) * 1.5); text-align: center;
  font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--texte-3);
}

/* ---------- donnees ---------- */

.donnees { background: var(--surface); border-top: 1px solid var(--bord); border-bottom: 1px solid var(--bord); }
.donnees-grille, .offre, .faq, .finale-boite { max-width: var(--large); margin: 0 auto; }
.donnees-grille { display: grid; gap: calc(var(--pas) * 4); }
.donnees-principal { font-size: clamp(18px, 2.6vw, 23px); line-height: 1.5; max-width: 42ch; }
.donnees-detail { display: grid; gap: calc(var(--pas) * 2); color: var(--texte-2); }
.donnees-detail strong { color: var(--texte); font-weight: 650; }

/* ---------- offre ---------- */

.offre-liste { margin: 0; }
.offre-liste > div { display: grid; gap: var(--pas); padding: calc(var(--pas) * 2.5) 0; border-top: 1px solid var(--bord); }
.offre-liste dt { font-weight: 720; font-size: 19px; letter-spacing: -0.02em; }
.offre-liste dd { margin: 0; color: var(--texte-2); max-width: 56ch; }
.offre-note { color: var(--texte-3); font-size: 13px; margin-top: calc(var(--pas) * 3); }

/* ---------- faq ---------- */

.faq details { border-top: 1px solid var(--bord); padding: calc(var(--pas) * 2.5) 0; }
.faq summary { cursor: pointer; font-weight: 650; font-size: 17px; list-style: none; display: flex; justify-content: space-between; gap: var(--pas); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; color: var(--accent); font-weight: 700; }
.faq details[open] summary::after { content: '−'; }
.faq p { color: var(--texte-2); margin-top: calc(var(--pas) * 1.5); max-width: 64ch; }

/* ---------- finale ---------- */

.finale-boite {
  border: 1px solid var(--bord-fort);
  border-radius: 20px;
  background: var(--surface-2);
  padding: calc(var(--pas) * 5) calc(var(--pas) * 3);
}
.finale-boite h2 {
  font-size: clamp(24px, 5.4vw, 46px); line-height: 1.1; letter-spacing: -0.04em; font-weight: 760;
  margin: 0 0 calc(var(--pas) * 4); max-width: 24ch;
}
.finale-actions { display: flex; flex-wrap: wrap; align-items: center; gap: calc(var(--pas) * 2.5); }
.finale-note { color: var(--texte-3); font-size: 14px; }

/* ---------- pied ---------- */

.pied {
  max-width: var(--large); margin: 0 auto;
  padding: calc(var(--pas) * 5) calc(var(--pas) * 3);
  border-top: 1px solid var(--bord);
  color: var(--texte-2); font-size: 14px;
  display: grid; gap: calc(var(--pas) * 1.5);
}
.pied-marque { font-size: 20px; font-weight: 800; letter-spacing: -0.03em; margin-bottom: var(--pas); }
.pied a { border-bottom: 1px solid var(--bord-fort); }
.pied a:hover { color: var(--texte); border-color: var(--accent); }
.pied-mention { color: var(--texte-3); }

/* ---------- ecrans larges ---------- */

@media (min-width: 760px) {
  .chiffres-bande { grid-template-columns: repeat(4, 1fr); gap: calc(var(--pas) * 4); }
  .chiffre { border-left: 1px solid var(--bord); padding-left: calc(var(--pas) * 3); }
  .chiffre:first-child { border-left: none; padding-left: 0; }
}

@media (min-width: 1000px) {
  .nav { display: flex; }
  .bouton-petit { margin-left: 0; }
  section { padding: calc(var(--pas) * 9) calc(var(--pas) * 5); }
  .entete { padding: calc(var(--pas) * 1.75) calc(var(--pas) * 5); }

  .hero {
    grid-template-columns: 1.02fr 0.98fr;
    align-items: center;
    gap: calc(var(--pas) * 8);
    padding: calc(var(--pas) * 10) calc(var(--pas) * 5) calc(var(--pas) * 12);
    min-height: 82vh;
  }
  .hero-visuel { justify-content: flex-end; padding: 0; }
  .anneau { width: 300px; right: 2%; top: -8%; display: block; }
  .ecran { width: 316px; }
  .pastille-serie { left: -4%; top: 30%; }
  .pastille-niveau { right: -8%; bottom: 10%; }

  .fonction { grid-template-columns: 84px minmax(0, 1fr) 220px; gap: calc(var(--pas) * 4); align-items: baseline; }
  .fonction-marque { justify-content: flex-end; text-align: right; }

  .hero { grid-template-columns: minmax(0, 1.06fr) minmax(0, 0.94fr); align-items: center; column-gap: calc(var(--pas) * 6); }
  .hero-visuel { padding: 0; }
  .rail { grid-template-columns: minmax(0, 1fr) 440px; column-gap: calc(var(--pas) * 8); }
  .chassis { order: 0; grid-column: 2; grid-row: 1 / span 3; margin: 0; top: 9vh; }
  .etape { grid-column: 1; min-height: 78vh; }
  .etape .texte { top: 34vh; }

  .donnees-grille { grid-template-columns: 1.05fr 0.95fr; gap: calc(var(--pas) * 8); }
  .offre-liste > div { grid-template-columns: 200px minmax(0, 1fr); gap: calc(var(--pas) * 4); align-items: baseline; }
  .finale-boite { padding: calc(var(--pas) * 7); }
}

/* ---------- jauge de lecture et rail des ecrans ---------- */

.jauge { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 30; background: transparent; }
.jauge span { display: block; height: 100%; background: var(--accent-vif); transform: scaleX(0); transform-origin: 0 50%; }

.rail { position: relative; display: grid; gap: calc(var(--pas) * 2); }
.chassis { order: -1; position: sticky; top: 5vh; z-index: 2; margin: 0 auto; }

.etape { min-height: 86vh; padding: 0; }
.etape .texte {
  position: sticky; top: 62vh; z-index: 1;
  background: var(--surface);
  border: 1px solid var(--bord);
  border-radius: var(--rayon);
  padding: calc(var(--pas) * 2.5);
  max-width: 430px;
}
.etape h3 { font-size: 20px; line-height: 1.25; letter-spacing: -0.02em; margin: var(--pas) 0; }
.etape .texte p:last-child { color: var(--texte-2); font-size: 15px; }

/* Rien n'est indispensable : sans prise en charge, le premier ecran reste affiche et
   les trois legendes se lisent comme une liste. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .jauge span { animation: jauge-lineaire linear both; animation-timeline: scroll(root block); }
    @keyframes jauge-lineaire { from { transform: scaleX(0); } to { transform: scaleX(1); } }

    .chassis { animation: pose linear both; animation-timeline: view(); animation-range: entry 0% cover 22%; }
    @keyframes pose { from { opacity: .4; transform: translateY(16px) scale(.97); } to { opacity: 1; transform: none; } }

    .etape .texte { animation: arrive linear both; animation-timeline: view(); animation-range: entry 10% cover 26%; }
    @keyframes arrive { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }

    /* Bornes mesurees dans le navigateur : le rail occupe 27 % a 64 % du defilement
       (2616 px sur une page de 7226 px, fenetre de 900 px) et les legendes se collent
       a 36 %, 48 % et 56 %. Chaque ecran couvre la fenetre de sa legende. */
    .ecran-rail .vue { animation: relais linear both; animation-timeline: scroll(root block); }
    .ecran-rail .vue:nth-of-type(1) { animation-name: relais-premier; animation-range: 27% 46%; }
    .ecran-rail .vue:nth-of-type(2) { animation-range: 45% 57%; }
    .ecran-rail .vue:nth-of-type(3) { animation-name: relais-dernier; animation-range: 55% 66%; }
    @keyframes relais {
      0%   { opacity: 0; transform: translateY(10px); }
      14%  { opacity: 1; transform: none; }
      86%  { opacity: 1; transform: none; }
      100% { opacity: 0; transform: translateY(-10px); }
    }
    @keyframes relais-premier {
      0%   { opacity: 1; transform: none; }
      86%  { opacity: 1; transform: none; }
      100% { opacity: 0; transform: translateY(-10px); }
    }
    @keyframes relais-dernier {
      0%   { opacity: 0; transform: translateY(10px); }
      14%  { opacity: 1; transform: none; }
      100% { opacity: 1; transform: none; }
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .bouton { transition: none; }
}