/* 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: #8A8A93;
  --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: 12px 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; }

/* Rangee de preuves sous le bouton principal : ce sont des faits verifiables, pas des
   chiffres d'audience que l'app n'a pas encore. */
.hero-preuves {
  display: flex; flex-wrap: wrap; gap: 8px 18px;
  margin-top: calc(var(--pas) * 2.5);
  font-size: 13px; color: var(--texte-3);
}
.hero-preuves span { position: relative; padding-left: 15px; }
.hero-preuves span::before {
  content: ""; position: absolute; left: 0; top: 50%;
  width: 5px; height: 5px; margin-top: -2.5px;
  border-radius: 50%; background: var(--accent-vif);
}

/* Etiquette de prix dans la grille des offres. */
.offre-tag {
  display: inline-block; margin-left: 8px; padding: 2px 9px;
  border: 1px solid var(--bord-fort); border-radius: 999px;
  font-size: 12px; font-weight: 600; color: var(--accent);
  white-space: nowrap;
}

/* Pages de contenu : meme largeur que les pages legales, plus les blocs que les moteurs
   de reponse savent extraire (reponse courte, fiche de faits, sommaire). */
.contenu { max-width: 760px; margin: 0 auto; }

.reponse {
  border-left: 2px solid var(--accent);
  background: var(--surface-2);
  border-radius: 0 var(--rayon) var(--rayon) 0;
  padding: calc(var(--pas) * 2) calc(var(--pas) * 2.5);
  margin: calc(var(--pas) * 2.5) 0;
}
.reponse p { margin: 0; color: var(--texte); }

.fiche { margin: calc(var(--pas) * 2.5) 0; border-top: 1px solid var(--bord); }
.fiche > div {
  display: grid; grid-template-columns: minmax(0, 210px) minmax(0, 1fr);
  gap: calc(var(--pas) * 2); padding: calc(var(--pas) * 1.5) 0;
  border-bottom: 1px solid var(--bord);
}
.fiche dt { color: var(--texte-2); font-weight: 600; }
.fiche dd { margin: 0; color: var(--texte-2); }

.sommaire { margin: calc(var(--pas) * 2) 0 calc(var(--pas) * 3); }
.sommaire a {
  display: block; padding: calc(var(--pas) * 0.8) 0;
  color: var(--texte-2); border-bottom: 1px solid var(--bord);
}
.sommaire a:hover { color: var(--accent); }

.bloc-liens { display: flex; flex-wrap: wrap; gap: calc(var(--pas) * 1.5); margin: calc(var(--pas) * 3) 0; }
.bloc-liens a {
  display: inline-block; padding: calc(var(--pas) * 1.4) calc(var(--pas) * 2);
  border: 1px solid var(--bord-fort); border-radius: var(--rayon);
  color: var(--texte-2);
}
.bloc-liens a:hover { color: var(--texte); border-color: var(--accent); }

.signature { margin-top: calc(var(--pas) * 4); padding-top: calc(var(--pas) * 2); border-top: 1px solid var(--bord); color: var(--texte-3); font-size: 14px; }

@media (max-width: 640px) {
  .fiche > div { grid-template-columns: 1fr; gap: calc(var(--pas) * 0.5); }
}

.pied-liens { font-size: 13px; margin-top: calc(var(--pas) * 1.5); }
.pied-liens a { color: var(--texte-3); border-bottom: 1px solid var(--bord-fort); }
.pied-liens a:hover { color: var(--texte); border-color: var(--accent); }

/* ---------- 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, 62vw);
  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%; }

/* le telephone suffit : les deux pastilles flottantes bavaient sur l'ecran */

.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; }

/* ---------- 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 { position: sticky; order: 0; grid-column: 2; grid-row: 1 / span 3; margin: 0; top: 9vh; }
  .etape { grid-column: 1; min-height: 78vh; }
  .etape .texte { position: sticky; 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); }
/* Sur telephone, rien n'est colle : le telephone puis les trois legendes, dans l'ordre.
   Un rail collant sur un ecran de 640 px de haut ne laisse pas la place aux deux, et la
   legende passait derriere le telephone. Le defilement de l'app dans l'ecran, lui, reste. */
.chassis { order: -1; margin: 0 auto; }

.etape { min-height: 86vh; padding: 0; }
.etape .texte {
  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; } }
  }
}

/* Sur telephone, les trois legendes se suivent sans hauteur forcee : la hauteur du rail
   est ce qui donne au defilement lie au scroll la place de se derouler, et elle n'a de sens
   qu'en desktop. Cette regle est placee apres les regles de base, sinon elle est ecrasee. */
@media (max-width: 999px) {
  .etape { min-height: 0; }
}

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