/* ══════════════════════════════════════════════════════════════════════
   L'accueil — design « Frenchy Site », Claude Design

   Toutes les classes portent le prefixe fy- : la page charge aussi
   tokens.css, layout.css et nav.css, partages avec 38 autres pages. Sans
   prefixe, un `.section` ou un `.btn` d'ici irait discretement repeindre
   le reste du site.

   La navigation n'est PAS reprise du design : son balisage et sa feuille
   sont communs a 23 pages. La forker pour l'accueil seule ferait diverger
   l'en-tete du site de lui-meme.
   ══════════════════════════════════════════════════════════════════════ */

/* La palette du design vit dans tokens.css, chargee par toutes les pages :
   la garder ici la rendait invisible au fil et a la page Publier. */

/* Le curseur personnalise et la trame de bruit de l'ancienne page sont
   retires : le design est sobre, et un curseur remplace gene la lecture
   autant qu'il decore. */
body {
  font-family: 'Instrument Sans', system-ui, sans-serif;
  background: var(--fy-nuit);
  color: var(--fy-encre);
  -webkit-font-smoothing: antialiased;
  cursor: auto;
}
body::before { content: none; }

.fy-bande { max-width: 1240px; margin: 0 auto; padding-left: 40px; padding-right: 40px; }
.fy-serif { font-family: 'Instrument Serif', Georgia, serif; font-weight: 400; }
.fy-cyan { color: var(--fy-cyan); }
.fy-violet { color: var(--fy-violet); }
.fy-ambre { color: var(--fy-ambre); }

.fy-sur {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: .69rem; font-weight: 500; letter-spacing: .16em;
  text-transform: uppercase; color: var(--fy-sourd); margin-bottom: 26px;
}
.fy-sur-cyan { color: var(--fy-cyan); }
.fy-sur-clair { color: #7a776e; }

.fy-h1 {
  font-family: 'Instrument Serif', Georgia, serif; font-weight: 400;
  font-size: clamp(2.6rem, 6vw, 4.6rem); line-height: .99; letter-spacing: -.02em;
  text-wrap: pretty; margin: 0;
}
.fy-h2 {
  font-family: 'Instrument Serif', Georgia, serif; font-weight: 400;
  font-size: clamp(2rem, 4.2vw, 3.25rem); line-height: 1.04; letter-spacing: -.015em;
  text-wrap: balance; margin: 0;
}
.fy-h2-petit { font-family: 'Instrument Serif', Georgia, serif; font-weight: 400; font-size: 1.9rem; margin: 0; }
.fy-sous, .fy-intro { font-size: 1.09rem; line-height: 1.6; color: var(--fy-gris); text-wrap: pretty; }
.fy-sous { margin: 28px 0 0; max-width: 52ch; }
.fy-intro { margin: 20px 0 32px; max-width: 52ch; }
.fy-intro-clair { margin: 20px 0 52px; max-width: 58ch; font-size: 1.09rem; line-height: 1.6; color: var(--fy-clair-texte); }

/* ── Boutons et liens ────────────────────────────────────────────────── */
/* Partis dans layout.css : « Annuler » de publier.html et « Voir tout »
   du feed portaient ces classes sans jamais charger cette feuille, et
   restaient des liens nus soulignes. Ils vivent la ou tout le monde les
   lit. Voir le meme raisonnement en tete de la palette, dans tokens.css. */

/* ── Le hero ─────────────────────────────────────────────────────────── */
.fy-hero { padding: 72px 0 88px; }
.fy-hero-grille { display: grid; grid-template-columns: 1.02fr .98fr; gap: 80px; align-items: center; }
.fy-actions { display: flex; align-items: center; gap: 22px; margin-top: 38px; flex-wrap: wrap; }
.fy-preuves { display: flex; gap: 32px; margin-top: 52px; padding-top: 32px; border-top: 1px solid var(--fy-bord); flex-wrap: wrap; }
.fy-preuve { display: flex; gap: 11px; }
.fy-puce { width: 9px; height: 9px; flex: none; margin-top: 5px; border-radius: 2px; }
.fy-preuve strong { display: block; font-size: .91rem; font-weight: 600; }
.fy-preuve span:not(.fy-puce) { display: block; font-size: .81rem; color: var(--fy-sourd); margin-top: 3px; }

/* ── Le telephone ────────────────────────────────────────────────────── */
.fy-tel-zone { justify-self: center; position: relative; }
.fy-tel {
  width: 346px; height: 706px; background: #000; border-radius: 50px; padding: 10px;
  box-shadow: 0 40px 90px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.1);
}
.fy-tel-ecran { width: 100%; height: 100%; border-radius: 41px; overflow: hidden; background: var(--fy-nuit); display: flex; flex-direction: column; }
.fy-tel-etat { flex: none; display: flex; align-items: center; justify-content: space-between; padding: 13px 22px 4px; font-size: .78rem; font-weight: 500; }
.fy-tel-entete { flex: none; display: flex; align-items: center; gap: 9px; padding: 10px 18px 12px; }
.fy-tel-fil { flex: 1; overflow: hidden; padding: 6px 18px 0; border-top: 1px solid rgba(255,255,255,.07); }
.fy-tel-auteur { display: flex; align-items: center; gap: 10px; margin: 14px 0 12px; }
.fy-tel-av { width: 36px; height: 36px; flex: none; border-radius: 11px; background: var(--fy-surface); display: flex; align-items: center; justify-content: center; font-size: .84rem; font-weight: 600; color: var(--fy-violet); }
.fy-tel-nom { font-size: .84rem; font-weight: 600; display: flex; align-items: baseline; gap: 5px; }
.fy-tel-quand { font-size: .72rem; color: var(--fy-sourd); }
.fy-tel-texte { margin: 0 0 11px; font-size: .84rem; line-height: 1.5; color: #e6e4f0; }
.fy-tel-photo { height: 212px; border-radius: 14px; background: repeating-linear-gradient(135deg, var(--fy-surface) 0 8px, #191940 8px 16px); display: flex; align-items: center; justify-content: center; margin-bottom: 11px; color: var(--fy-sourd); }
.fy-tel-actions { display: flex; align-items: center; gap: 18px; margin-bottom: 12px; font-size: .78rem; color: var(--fy-gris); }
.fy-tel-actions span { display: flex; align-items: center; gap: 6px; }
.fy-tel-produit { display: flex; align-items: center; gap: 10px; background: var(--fy-carte); border: 1px solid rgba(255,255,255,.1); border-radius: 13px; padding: 10px; }
.fy-tel-produit > div { flex: 1; min-width: 0; }
.fy-tel-vignette { width: 46px; height: 46px; flex: none; border-radius: 9px; background: repeating-linear-gradient(135deg, #191940 0 6px, #212148 6px 12px); }
.fy-tel-titre { font-size: .78rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fy-tel-panier { flex: none; background: var(--fy-violet); color: var(--fy-nuit); font-size: .75rem; font-weight: 600; padding: 9px 13px; border-radius: 9px; }
.fy-tel-flottant {
  position: absolute; top: 56px; right: -42px; display: flex; align-items: center; gap: 9px;
  background: var(--fy-carte); border: 1px solid rgba(240,180,92,.35); border-radius: 12px;
  padding: 11px 14px; box-shadow: 0 18px 40px rgba(0,0,0,.5);
}
.fy-tel-flottant-nom { font-size: .78rem; font-weight: 500; margin-top: 2px; }
.fy-point-ambre { width: 7px; height: 7px; border-radius: 50%; background: var(--fy-ambre); animation: fy-pouls 1.6s ease-in-out infinite; }
@keyframes fy-pouls { 0%, 100% { opacity: 1 } 50% { opacity: .3 } }

/* ── Les rails horizontaux ───────────────────────────────────────────── */
.fy-rail { border-top: 1px solid var(--fy-bord); padding: 52px 0; }
.fy-rail-entete { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 26px; gap: 20px; }
/* Le rail deborde volontairement : c'est ce debordement qui dit qu'il y a
   la suite. Il defile au doigt et a la molette. */
.fy-piste { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x proximity; padding-bottom: 6px; -webkit-overflow-scrolling: touch; }
.fy-piste::-webkit-scrollbar { height: 6px; }
.fy-piste::-webkit-scrollbar-thumb { background: rgba(255,255,255,.12); border-radius: 3px; }
.fy-fiche { flex: none; width: 210px; scroll-snap-align: start; text-decoration: none; color: inherit; }
.fy-fiche-image { position: relative; height: 250px; border-radius: 16px; overflow: hidden; background: repeating-linear-gradient(135deg, var(--fy-surface) 0 9px, #191940 9px 18px); display: flex; align-items: flex-end; }
.fy-fiche-image img { width: 100%; height: 100%; object-fit: cover; }
.fy-fiche-nom { display: flex; align-items: baseline; gap: 7px; margin-top: 12px; font-size: .94rem; font-weight: 600; }
.fy-fiche-sous { font-size: .81rem; color: var(--fy-sourd); margin-top: 3px; line-height: 1.4; }
.fy-etiq-direct { position: absolute; top: 12px; left: 12px; font-family: 'JetBrains Mono', monospace; font-size: .59rem; font-weight: 500; letter-spacing: .1em; color: #fff; background: rgba(255,107,107,.92); border-radius: 100px; padding: 4px 9px; }

/* ── La section claire ───────────────────────────────────────────────── */
.fy-clair { background: var(--fy-clair); color: var(--fy-nuit); padding: 96px 0; }
.fy-clair .fy-h2 { color: var(--fy-nuit); }
.fy-quatre { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.fy-nature {
  background: #fff; border: 1px solid rgba(0,0,0,.09); border-radius: 18px; padding: 28px;
  display: flex; flex-direction: column; color: var(--fy-nuit); text-decoration: none;
  transition: border-color .18s ease;
}
.fy-nature:hover { border-color: rgba(0,0,0,.28); color: var(--fy-nuit); }
.fy-carre { width: 14px; height: 14px; border-radius: 4px; margin-bottom: 22px; }
.fy-nature h3 { margin: 0 0 10px; font-size: 1.16rem; font-weight: 600; }
.fy-nature p { margin: 0 0 22px; font-size: .91rem; line-height: 1.6; color: var(--fy-clair-texte); }
.fy-nature-lien { margin-top: auto; font-size: .875rem; font-weight: 600; color: #5b4bd6; }

/* ── Les quatre affirmations ─────────────────────────────────────────── */
.fy-chiffres { border-top: 1px solid var(--fy-bord); border-bottom: 1px solid var(--fy-bord); }
.fy-chiffres-grille { display: grid; grid-template-columns: repeat(4, 1fr); }
.fy-chiffres-grille > div { padding: 34px 0 34px 34px; border-left: 1px solid var(--fy-bord); }
.fy-chiffres-grille > div:first-child { padding-left: 0; border-left: 0; }
.fy-chiffre { font-family: 'JetBrains Mono', monospace; font-weight: 500; font-size: 1.85rem; font-variant-numeric: tabular-nums; }
.fy-chiffre-lbl { font-size: .84rem; color: var(--fy-sourd); margin-top: 6px; line-height: 1.4; }

/* ── Les agents ──────────────────────────────────────────────────────── */
.fy-agents { padding-top: 96px; padding-bottom: 96px; display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }
.fy-jetons { display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: 34px; }
.fy-jeton { display: flex; align-items: center; gap: 8px; font-size: .84rem; color: var(--fy-corps); border: 1px solid rgba(255,255,255,.13); border-radius: 100px; padding: 9px 14px; }
.fy-carre-mini { width: 8px; height: 8px; border-radius: 2px; }
.fy-panneau { margin: 0; background: var(--fy-carte); border: 1px solid rgba(255,255,255,.1); border-radius: 20px; padding: 26px; box-shadow: 0 30px 70px rgba(0,0,0,.45); }
.fy-panneau-tete { display: flex; align-items: center; justify-content: space-between; padding-bottom: 18px; border-bottom: 1px solid var(--fy-bord); }
.fy-panneau-corps { display: flex; flex-direction: column; gap: 16px; padding: 20px 0; }
.fy-panneau-corps p { margin: 4px 0 0; font-size: .91rem; line-height: 1.5; color: var(--fy-corps); }
.fy-panneau-qui { font-size: .84rem; font-weight: 600; }
.fy-panneau-reponse { background: rgba(92,214,232,.08); border-left: 2px solid var(--fy-cyan); border-radius: 0 10px 10px 0; padding: 13px 15px; }
.fy-panneau-pied { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 18px; border-top: 1px solid var(--fy-bord); color: var(--fy-sourd); }

/* ── Les trois etapes ────────────────────────────────────────────────── */
.fy-etapes { border-top: 1px solid var(--fy-bord); padding: 96px 0; }
.fy-etapes .fy-h2 { margin-bottom: 56px; }
.fy-trois { display: grid; grid-template-columns: repeat(3, 1fr); gap: 56px; }
.fy-num { font-family: 'Instrument Serif', Georgia, serif; font-size: 4rem; line-height: 1; font-variant-numeric: tabular-nums; }
.fy-trois h3 { margin: 20px 0 10px; font-size: 1.29rem; font-weight: 600; }
.fy-trois p { margin: 0; font-size: 1rem; line-height: 1.6; color: var(--fy-gris); }

/* ── Les questions ───────────────────────────────────────────────────── */
.fy-faq { border-top: 1px solid var(--fy-bord); padding: 96px 0; }
.fy-faq-bande { max-width: 900px; }
.fy-faq .fy-h2 { margin-bottom: 44px; }
.fy-q { border-top: 1px solid rgba(255,255,255,.09); }
.fy-q:last-of-type { border-bottom: 1px solid rgba(255,255,255,.09); }
.fy-q summary {
  list-style: none; cursor: pointer; padding: 24px 0;
  display: flex; align-items: center; gap: 20px;
  font-size: 1.09rem; font-weight: 500; color: var(--fy-encre);
}
.fy-q summary::-webkit-details-marker { display: none; }
/* Le signe est produit par la feuille, pas ecrit dans le balisage : un
   lecteur d'ecran annonce deja « developpe » ou « reduit ». */
.fy-q summary::after {
  content: '+'; margin-left: auto; flex: none;
  font-family: 'JetBrains Mono', monospace; font-size: 1.25rem; color: var(--fy-sourd);
}
.fy-q[open] summary::after { content: '−'; color: var(--fy-violet); }
.fy-q p { margin: 0 0 24px; max-width: 70ch; font-size: 1rem; line-height: 1.65; color: var(--fy-gris); }
.fy-q a { color: var(--fy-violet); }

/* ── L'appel final ───────────────────────────────────────────────────── */
.fy-final { border-top: 1px solid var(--fy-bord); background: linear-gradient(135deg, var(--fy-surface), var(--fy-nuit)); padding: 110px 0; text-align: center; }
.fy-final-bande { max-width: 760px; margin: 0 auto; padding: 0 40px; }
.fy-final .fy-intro { max-width: 48ch; margin-bottom: 36px; }

/* ── Le pied ─────────────────────────────────────────────────────────── */
.fy-pied { border-top: 1px solid var(--fy-bord); padding: 64px 0 40px; }
.fy-pied-grille { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 48px; }
.fy-pied-titre { font-family: 'JetBrains Mono', monospace; font-size: .66rem; font-weight: 500; letter-spacing: .12em; color: var(--fy-sourd); margin-bottom: 16px; }
.fy-pied-liens { display: flex; flex-direction: column; gap: 11px; font-size: .91rem; }
.fy-pied-liens a { color: var(--fy-corps); text-decoration: none; }
.fy-pied-liens a:hover { color: var(--fy-encre); }
.fy-pied-bas { max-width: 1240px; margin: 48px auto 0; padding: 24px 40px 0; border-top: 1px solid var(--fy-bord); display: flex; align-items: center; justify-content: space-between; gap: 16px; color: var(--fy-faible); flex-wrap: wrap; }

/* ── Adaptations ─────────────────────────────────────────────────────── */
@media (max-width: 1080px) {
  .fy-hero-grille, .fy-agents { grid-template-columns: 1fr; gap: 56px; }
  .fy-tel-zone { display: none; }
  .fy-quatre { grid-template-columns: repeat(2, 1fr); }
  .fy-pied-grille { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
  .fy-bande, .fy-final-bande, .fy-pied-bas { padding-left: 20px; padding-right: 20px; }
  .fy-hero { padding: 44px 0 56px; }
  .fy-clair, .fy-etapes, .fy-faq, .fy-agents { padding-top: 64px; padding-bottom: 64px; }
  .fy-final { padding: 72px 0; }
  .fy-quatre, .fy-trois, .fy-pied-grille { grid-template-columns: 1fr; gap: 16px; }
  .fy-trois { gap: 40px; }
  /* Quatre colonnes de chiffres deviennent illisibles sous 760 px : elles
     passent a deux, et les bordures gauches se reorganisent. */
  .fy-chiffres-grille { grid-template-columns: 1fr 1fr; }
  .fy-chiffres-grille > div { padding: 24px 0 24px 20px; }
  .fy-chiffres-grille > div:nth-child(odd) { padding-left: 0; border-left: 0; }
  .fy-chiffres-grille > div:nth-child(n+3) { border-top: 1px solid var(--fy-bord); }
  .fy-preuves { gap: 20px; }
  .fy-pied-bas { justify-content: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
  .fy-point-ambre { animation: none; }
  * { transition: none !important; }
}