/* ===================================================================
   NFC Card by ProtoTech Solutions Innovations — feuille de style unique.
   Couleurs et échelle typographique : variables ci-dessous.
   =================================================================== */

@font-face {
  font-family: "Fraunces";
  src: url("/assets/fonts/fraunces-latin.woff2") format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Archivo";
  src: url("/assets/fonts/archivo-latin.woff2") format("woff2");
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* Verre : le fond froid, l'écran. Carte : la matière chaude du PVC.
     Étincelle : l'accent unique, l'instant du contact. */
  --verre: #EFF2F4;
  --nuit: #181D24;
  --carte: #DED2B8;
  --carte-ligne: #C7B99A;
  --ardoise: #5C6673;
  --etincelle: #1E8F8A;
  --etincelle-vive: #2FA8A3;
  --trait: #CBD1D6;

  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body: "Archivo", -apple-system, "Segoe UI", sans-serif;

  --step-0: clamp(1rem, 0.94rem + 0.3vw, 1.125rem);
  --step-1: clamp(1.1rem, 1.02rem + 0.4vw, 1.25rem);
  --step-3: clamp(1.6rem, 1.4rem + 1vw, 2.1rem);
  --step-5: clamp(1.6rem, 1.2rem + 2.2vw, 2.4rem);
}

@media (prefers-color-scheme: dark) {
  :root {
    --verre: #12151A;
    --nuit: #ECEEF1;
    --carte: #2B2416;
    --carte-ligne: #4A3F27;
    --ardoise: #99A2AD;
    --etincelle: #3FC2BC;
    --etincelle-vive: #57D6D0;
    --trait: #2A3037;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--verre);
  color: var(--nuit);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { margin: 0; text-wrap: balance; }
h1, h2 { font-family: var(--font-display); font-weight: 480; }
p { margin: 0; max-width: 34ch; }
a { color: inherit; }

:focus-visible {
  outline: 2px solid var(--etincelle-vive);
  outline-offset: 3px;
  border-radius: 2px;
}

.wrap { max-width: 68rem; margin-inline: auto; padding-inline: 1.5rem; }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--verre);
  color: var(--nuit);
  padding: 0.6rem 1rem;
  z-index: 2;
}
.skip:focus { left: 0; }

.verif {
  color: var(--etincelle);
  font-weight: 500;
  white-space: normal;
}

/* ---------- en-tête ---------- */
header.site {
  padding-block: 1.4rem;
  border-bottom: 1px solid var(--trait);
}
.brand { display: flex; align-items: center; gap: 0.7rem; }
.brand-mark {
  height: 26px;
  width: auto;
  aspect-ratio: 448 / 304;
  color: var(--nuit);
  flex: none;
}
.brand span {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.05rem;
  letter-spacing: 0.01em;
}

/* ---------- 1. le geste ---------- */
.hero { padding-block: clamp(1.4rem, 3vw, 2rem) clamp(1.6rem, 3vw, 2.2rem); }
.hero-grid {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.9rem 2.5rem;
}
.hero-text { flex: 1 1 20rem; max-width: 100%; }
.hero h1 { font-size: var(--step-5); color: var(--nuit); }
.hero p.lede {
  margin-top: 0.5rem;
  font-size: var(--step-1);
  color: var(--ardoise);
  max-width: 42ch;
}

/* Sur écran large seulement : la colonne se règle sur la largeur du titre et le
   paragraphe s'y replie. En dessous, ce calage forcerait la page plus large
   que l'écran, donc on laisse le texte couler normalement. */
@media (min-width: 720px) {
  .hero-text {
    flex: 0 1 auto;
    display: grid;
    grid-template-columns: minmax(0, max-content);
  }
  .hero p.lede {
    max-width: none;
    width: 0;
    min-width: 100%;
  }
}

.gesture { display: flex; align-items: center; gap: 1.1rem; flex: 0 0 auto; }
.stage {
  position: relative;
  width: 6.4rem;
  aspect-ratio: 3 / 5;
  overflow: hidden;
}
.stage .card {
  position: absolute;
  width: 62%;
  aspect-ratio: 54 / 85.6;
  background: var(--carte);
  border: 1px solid var(--carte-ligne);
  border-radius: 0.3rem;
  left: 50%;
  bottom: 4%;
  transform: translateX(-50%);
}
/* le téléphone est plus haut que le cadre : il entre par le haut, hors champ */
.stage .phone {
  position: absolute;
  width: 74%;
  aspect-ratio: 54 / 108;
  left: 50%;
  top: 0;
  border: 1.6px solid var(--nuit);
  border-radius: 0.75rem;
  background: color-mix(in srgb, var(--verre) 90%, var(--nuit));
  animation: pose 3.6s cubic-bezier(.45, 0, .25, 1) infinite;
}
.stage .phone::before {
  content: "";
  position: absolute;
  inset: 6% 9% 8%;
  border: 1px solid var(--trait);
  border-radius: 0.4rem;
}
.stage .pulse {
  position: absolute;
  left: 50%;
  bottom: 24%;
  width: 1px;
  height: 1px;
  border-radius: 50%;
  border: 1.5px solid var(--etincelle-vive);
  transform: translate(-50%, 50%);
  opacity: 0;
  animation: ping 3.6s cubic-bezier(.2, .6, .3, 1) infinite;
}
.logo-companion {
  height: 42px;
  width: auto;
  aspect-ratio: 1227.99 / 320;
  flex: none;
  color: var(--nuit);
}

/* le cycle démarre et finit au contact : la page au repos montre le geste fait */
@keyframes pose {
  0%, 18%  { transform: translateX(-50%) translateY(-15%); }
  52%, 70% { transform: translateX(-50%) translateY(-63%); }
  100%     { transform: translateX(-50%) translateY(-15%); }
}
@keyframes ping {
  0%   { width: 1px; height: 1px; opacity: 0.7; }
  20%  { width: 4rem; height: 4rem; opacity: 0; }
  100% { width: 4rem; height: 4rem; opacity: 0; }
}

/* ---------- 2. les trois cartes ---------- */
.trio {
  padding-block: clamp(0.8rem, 1.5vw, 1.2rem) clamp(1.6rem, 3vw, 2.4rem);
  border-top: 1px solid var(--trait);
}
.trio h2 { font-size: var(--step-3); max-width: 20ch; }
.trio > .wrap > p.lede {
  color: var(--ardoise);
  margin-top: 0.4rem;
  font-size: 0.95rem;
}
.cards {
  margin-top: clamp(1.2rem, 2.5vw, 1.8rem);
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}
@media (min-width: 720px) {
  .cards { grid-template-columns: repeat(3, 1fr); align-items: start; }
}
.card-item { display: flex; flex-direction: column; gap: 0.7rem; }
.card-face {
  aspect-ratio: 54 / 85.6;
  max-width: 9.5rem;
  background: var(--carte);
  border: 1px solid var(--carte-ligne);
  border-radius: 0.5rem;
  padding: 0.85rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
/* Les trois pictogrammes occupent toute la largeur utile de la carte.
   Chaque viewBox est cadrée au plus près du dessin pour que ce soit vrai. */
.card-face .mark,
.card-face .etoiles {
  width: 100%;
  height: auto;
  color: var(--etincelle);
}
.card-face .ratio {
  font-size: 0.7rem;
  color: var(--ardoise);
  letter-spacing: 0.02em;
}
.card-item h3 {
  font-family: var(--font-body);
  font-size: 1.15rem;
  font-weight: 600;
}
.card-item > p {
  color: var(--ardoise);
  font-size: 0.95rem;
  max-width: 30ch;
}
.situations {
  font-size: 0.85rem;
  color: var(--nuit);
  border-top: 1px solid var(--trait);
  padding-top: 0.6rem;
}
.situations b {
  display: block;
  margin-bottom: 0.2rem;
  font-weight: 600;
  font-size: 0.75rem;
  color: var(--ardoise);
}

.demo {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  max-width: 9.5rem;
}
.demo video,
.demo img {
  width: 100%;
  height: auto;
  display: block;
  border: 1px solid var(--trait);
  border-radius: 0.4rem;
  background: var(--nuit);
}
.demo figcaption { font-size: 0.72rem; line-height: 1.4; color: var(--ardoise); }

.avantages { border-top: 1px solid var(--trait); padding-top: 0.6rem; }
.avantages h4 {
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--ardoise);
  margin-bottom: 0.4rem;
}
.avantages ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  font-size: 0.85rem;
}
.avantages li { position: relative; padding-left: 0.85rem; }
.avantages li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 0.35rem;
  height: 0.35rem;
  border-radius: 50%;
  background: var(--etincelle);
}

/* ---------- 3. comment ça marche (vraie séquence : la numérotation dit quelque chose) ---------- */
.etapes {
  padding-block: clamp(1.6rem, 3vw, 2.4rem);
  border-top: 1px solid var(--trait);
}
.etapes h2 { font-size: var(--step-3); }
.steps {
  margin: clamp(1.2rem, 2.5vw, 1.6rem) 0 0;
  padding: 0;
  list-style: none;
  counter-reset: etape;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.2rem;
}
@media (min-width: 720px) {
  .steps { grid-template-columns: repeat(3, 1fr); }
}
.steps li {
  counter-increment: etape;
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 0.7rem;
  row-gap: 0.2rem;
}
.steps li::before {
  content: counter(etape);
  grid-row: 1 / 3;
  font-family: var(--font-display);
  font-size: 1.5rem;
  line-height: 1;
  color: var(--etincelle);
  font-variant-numeric: tabular-nums;
}
.steps h3 {
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 600;
}
.steps p { color: var(--ardoise); font-size: 0.95rem; }

/* ---------- 4. compatibilité ---------- */
.compat {
  padding-block: clamp(1.6rem, 3vw, 2.4rem);
  border-top: 1px solid var(--trait);
}
.compat h2 { font-size: var(--step-3); max-width: 24ch; }
.compat-grid {
  margin-top: clamp(1.2rem, 2.5vw, 1.6rem);
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.2rem;
}
@media (min-width: 720px) {
  .compat-grid { grid-template-columns: repeat(3, 1fr); }
}
.compat-grid h3 {
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 0.25rem;
}
.compat-grid p { color: var(--ardoise); font-size: 0.95rem; }
.note-compat {
  margin-top: 1.2rem;
  font-size: 0.9rem;
  color: var(--ardoise);
  max-width: 60ch;
}

/* ---------- 5. contact ---------- */
.contact {
  padding-block: clamp(1.6rem, 3vw, 2.4rem);
  border-top: 1px solid var(--trait);
}
.contact h2 { font-size: var(--step-3); }
.contact p.lede { margin-top: 0.5rem; color: var(--ardoise); max-width: 46ch; }
.mail { margin-top: 1rem; font-size: var(--step-1); }
.mail a {
  text-decoration-color: var(--etincelle-vive);
  text-underline-offset: 0.25em;
  text-decoration-thickness: 2px;
}
.zone {
  margin-top: 1rem;
  font-size: 0.9rem;
  color: var(--ardoise);
  max-width: 52ch;
}

/* ---------- pied de page ---------- */
.site-footer {
  border-top: 1px solid var(--trait);
  padding-block: 1.2rem;
  font-size: 0.85rem;
  color: var(--ardoise);
}
.site-footer .wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  justify-content: space-between;
}

/* ---------- page mentions légales ---------- */
.legal { padding-block: clamp(1.6rem, 3vw, 2.4rem); }
.legal h1 { font-family: var(--font-display); font-size: var(--step-3); }
.legal h2 {
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 600;
  margin-top: 1.6rem;
}
.legal p { color: var(--ardoise); max-width: 62ch; margin-top: 0.4rem; }
.legal .retour { display: inline-block; margin-top: 2rem; font-size: 0.9rem; }

@media (prefers-reduced-motion: reduce) {
  .stage .phone { animation: none; transform: translateX(-50%) translateY(-15%); }
  .stage .pulse { animation: none; opacity: 0.5; width: 1.6rem; height: 1.6rem; }
}