/* ===================================================================
   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;
  /* Écran allumé : blanc dans les deux thèmes, un écran qui s'allume est blanc. */
  --ecran: #FFFFFF;

  --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;
}
/* L'écran s'allume à l'instant du contact, puis s'éteint quand le téléphone
   se relève. Même durée et même cycle que le mouvement, pour rester synchrone. */
.stage .phone::before {
  content: "";
  position: absolute;
  inset: 6% 9% 8%;
  border: 1px solid var(--trait);
  border-radius: 0.4rem;
  background-color: var(--ecran);
  animation: ecran 3.6s cubic-bezier(.45, 0, .25, 1) infinite;
}
.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; }
}
/* Allumé au contact (0-18 %), éteint pendant que le téléphone est en l'air,
   rallumé à 100 % — l'instant où il se repose sur la carte. */
@keyframes ecran {
  0%, 18%  { background-color: var(--ecran); }
  34%, 96% { background-color: transparent; }
  100%     { background-color: var(--ecran); }
}

/* ---------- 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%); }
  /* Immobile au contact : l'écran reste donc allumé. */
  .stage .phone::before { animation: none; background-color: var(--ecran); }
  .stage .pulse { animation: none; opacity: 0.5; width: 1.6rem; height: 1.6rem; }
}


/* Le chemin du porteur de carte vers son espace.
   Sans lui, il ne peut trouver la connexion qu'en scannant sa carte. */
.lien-espace {
  margin-left: auto;
  flex: none;
  padding: 0.45rem 0.9rem;
  border: 1px solid currentColor;
  border-radius: 999px;
  font-size: 0.92rem;
  font-weight: 600;
  text-decoration: none;
  color: inherit;
  white-space: nowrap;
}
/* Un survol qui ne peut pas rendre le texte illisible : on ne touche
   qu'a l'opacite, jamais a la couleur du fond. */
.lien-espace:hover,
.lien-espace:focus-visible { opacity: 0.7; }