/*
Theme Name: AF Site
Author: AF
Description: AF* (ticker infini + page à propos)
Version: 1.0
Text Domain: af-site
*/

:root{
  --af-font: clamp(72px, 11vw, 140px);
}

/* ===============================
   RESET GLOBAL
================================= */
html, body{
  margin: 0;
  padding: 0;
  width: 100%;
  overflow-x: hidden;
}

body{
  font-family: Arial, Helvetica, sans-serif;
  background:#fff;
  color:#000;
}

/* ===============================
   ACCUEIL — TICKER INFINI (CSS)
   Le JS calcule --ticker-distance et --ticker-duration
================================= */
.ticker-wrapper{
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  background: #fff;
}

.ticker{
  position: absolute;
  top: 0;
  left: 0;
}

.ticker-track{
  display: flex;
  align-items: flex-start;
  white-space: nowrap;
  margin: 0;
  padding: 0;

  will-change: transform;
  animation: tickerMove linear infinite;
  animation-duration: var(--ticker-duration, 14s);
}

.ticker-item{
  display: inline-block;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 900;
  font-size: var(--af-font);
  line-height: 0.85;
  letter-spacing: -0.02em;
  color: #000;

  margin: 0;
  padding: 0 14px 0 0; /* espace entre motifs */

  /* IMPORTANT: si c'est un <a>, pas de soulignage */
  text-decoration: none !important;
}

/* Si tes items sont des liens */
.ticker-item:visited,
.ticker-item:hover,
.ticker-item:focus,
.ticker-item:active{
  color: #000 !important;
  text-decoration: none !important;
  outline: none !important;
}

@keyframes tickerMove{
  from { transform: translate3d(0,0,0); }
  to   { transform: translate3d(calc(-1 * var(--ticker-distance, 1000px)), 0, 0); }
}

/* ===============================
   PAGE 2 — TEXTE
================================= */
.af-text{
  max-width: 860px;
  margin: 0 auto;
  padding: 60px 20px;
}

.af-text h1{
  font-size: clamp(28px, 4vw, 44px);
  margin: 0 0 20px;
  font-weight: 800;
}

/* si ton H1 est un lien (retour “AF*”) */
.af-home-link,
.af-home-link:visited,
.af-home-link:hover,
.af-home-link:focus,
.af-home-link:active{
  color:#000 !important;
  text-decoration:none !important;
  outline:none !important;
}

.af-text p{
  font-size: 20px;
  font-weight: 600;
  line-height: 1.45;
  margin: 0 0 18px;
}

/* Liens dans le texte */
.af-text a{
  color:#000;
  text-decoration: underline;
}

/* Email : cliquable mais identique au texte (pas bleu, pas souligné) */
.af-text a[href^="mailto:"],
.af-text a[href^="mailto:"]:visited,
.af-text a[href^="mailto:"]:hover,
.af-text a[href^="mailto:"]:focus,
.af-text a[href^="mailto:"]:active{
  color:#000 !important;
  text-decoration:none !important;
  outline:none !important;
}