/* CoteUp */

:root {
  /* Fond noir */
  --bg: #0A0A0A;
  --line: #262626;

  /* Texte sur noir */
  --text: #FFFFFF;
  --muted: #A3A3A3;

  /* Rouge */
  --red: #D90416;
  --red-hover: #B80312;

  /* Objets blancs (fiche pronostiqueur, reçu, carte tarif) */
  --white: #FFFFFF;
  --ink: #161616;
  --ink-soft: #5C5C5C;
  --rule: #E5E5E5;
  --rule-strong: #D2D2D2;

  --header-h: 72px;
  --radius-sm: 4px;
  --radius: 8px;
  --container: 1160px;
  --gutter: 24px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 80px;
  background: var(--bg);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: "Poppins", system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, p, ul, ol, figure {
  margin: 0;
}

ul, ol {
  padding: 0;
  list-style: none;
}

a {
  color: inherit;
}

img, svg {
  display: block;
}

:focus-visible {
  outline: 3px solid var(--red);
  outline-offset: 3px;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  left: 16px;
  top: -60px;
  z-index: 100;
  padding: 10px 16px;
  background: var(--red);
  color: var(--white);
  font-weight: 600;
  text-decoration: none;
  border-radius: var(--radius-sm);
}

.skip-link:focus {
  top: 12px;
}

.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.icon-telegram {
  width: 18px;
  height: 18px;
  flex: none;
  fill: currentColor;
}

/* Boutons */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 20px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  border: 0;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.btn--red {
  background: var(--red);
  color: var(--white);
}

.btn--red:hover {
  background: var(--red-hover);
}

.btn--lg {
  padding: 15px 28px;
  font-size: 16px;
}

.btn--block {
  width: 100%;
}

/* Bouton "Voir le tarif", d'après "shy-sloth-91" par alexroumi sur Uiverse.io (licence MIT) */
.btn-fill {
  display: inline-block;
  padding: 15px 25px;
  border: unset;
  border-radius: 15px;
  color: var(--white);
  z-index: 1;
  background: var(--red);
  position: relative;
  font-weight: 700;
  font-size: 17px;
  text-decoration: none;
  transition: all 250ms;
  overflow: hidden;
}

.btn-fill::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 0;
  border-radius: 15px;
  background-color: var(--white);
  z-index: -1;
  transition: all 250ms;
}

@media (hover: hover) {
  .btn-fill:hover {
    color: var(--red);
  }

  .btn-fill:hover::before {
    width: 100%;
  }
}

.link-underline {
  color: var(--text);
  font-weight: 500;
  text-decoration: underline;
  text-decoration-color: var(--red);
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
  transition: color 0.15s ease;
}

.link-underline:hover {
  color: var(--muted);
}

/* Logo */

.logo {
  display: inline-flex;
  align-items: flex-start;
  color: var(--white);
  text-decoration: none;
}

.logo__word {
  font-size: 24px;
  font-weight: 700;
  font-style: italic;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.logo__plus {
  margin-left: 2px;
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
  color: var(--red);
}

/* Header */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--header-h);
}

.nav {
  display: flex;
  align-items: center;
  gap: 28px;
}

.nav a:not(.btn) {
  color: var(--muted);
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
  transition: color 0.15s ease;
}

.nav a:not(.btn):hover {
  color: var(--white);
}

.nav__cta {
  margin-left: 4px;
}

.nav-toggle {
  display: none;
  width: 44px;
  height: 44px;
  padding: 0;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 6px;
  cursor: pointer;
}

.nav-toggle__bar {
  display: block;
  width: 20px;
  height: 2px;
  margin: 5px auto;
  background: var(--white);
  transition: transform 0.2s ease;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1) {
  transform: translateY(3.5px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2) {
  transform: translateY(-3.5px) rotate(-45deg);
}

/* Hero : occupe tout l'écran sous le header */

.hero {
  display: flex;
  align-items: center;
  min-height: calc(100vh - var(--header-h) - 1px);
  min-height: calc(100svh - var(--header-h) - 1px);
  padding: 64px 0;
}

/*
  Fond animé (hero, sections et footer), d'après "short-newt-53" par SelfMadeSystem
  sur Uiverse.io (licence MIT). Passé en rouge et rendu discret avec l'opacité.
  Utilisation : classe has-rain sur la section + <div class="bg-rain"> en premier enfant.
*/
.has-rain {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.has-rain > .container {
  position: relative;
  z-index: 1;
}

/* Le JS met en pause les fonds qui ne sont pas à l'écran, pour ménager les téléphones */
.bg-rain.is-paused::before,
.bg-rain.is-paused::after {
  animation-play-state: paused;
}

.bg-rain {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: #000;
  opacity: 0.6;
  pointer-events: none;
}

.bg-rain::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background-image: radial-gradient(
    circle at 50% 50%,
    #0000 0,
    #0000 2px,
    hsl(0 0% 4%) 2px
  );
  background-size: 8px 8px;
}

@keyframes rain-flicker {
  0% { filter: var(--f) hue-rotate(0deg); }
  25% { filter: var(--f) hue-rotate(-10deg); }
  28% { filter: var(--f) hue-rotate(0deg); }
  32% { filter: var(--f) hue-rotate(-8deg); }
  39% { filter: var(--f) hue-rotate(0deg); }
  40% { filter: var(--f) hue-rotate(-8deg); }
  41% { filter: var(--f) hue-rotate(0deg); }
  42% { filter: var(--f) hue-rotate(-10deg); }
  44% { filter: var(--f) hue-rotate(0deg); }
  58% { filter: var(--f) hue-rotate(-8deg); }
  64% { filter: var(--f) hue-rotate(0deg); }
  80% { filter: var(--f) hue-rotate(-10deg); }
  to { filter: var(--f) hue-rotate(0deg); }
}

.bg-rain::before {
  content: "";
  position: absolute;
  inset: -145%;
  rotate: -45deg;
  /* Fond noir opaque : le flou et la luminosité ne touchent que les traînées rouges */
  background-color: #000;
  --f: blur(3em) brightness(9);
  filter: var(--f);
  --c: #D90416;
  --c1: #FF2A3A;
  background-image: radial-gradient(4px 100px at 0px 235px, var(--c), #0000),
    radial-gradient(4px 100px at 300px 235px, var(--c), #0000),
    radial-gradient(3px 4px at 150px 117.5px, var(--c1) 100%, #0000 150%),
    radial-gradient(4px 100px at 0px 252px, var(--c), #0000),
    radial-gradient(4px 100px at 300px 252px, var(--c), #0000),
    radial-gradient(3px 4px at 150px 126px, var(--c1) 100%, #0000 150%),
    radial-gradient(4px 100px at 0px 150px, var(--c), #0000),
    radial-gradient(4px 100px at 300px 150px, var(--c), #0000),
    radial-gradient(3px 4px at 150px 75px, var(--c1) 100%, #0000 150%),
    radial-gradient(4px 100px at 0px 253px, var(--c), #0000),
    radial-gradient(4px 100px at 300px 253px, var(--c), #0000),
    radial-gradient(3px 4px at 150px 126.5px, var(--c1) 100%, #0000 150%),
    radial-gradient(4px 100px at 0px 204px, var(--c), #0000),
    radial-gradient(4px 100px at 300px 204px, var(--c), #0000),
    radial-gradient(3px 4px at 150px 102px, var(--c1) 100%, #0000 150%),
    radial-gradient(4px 100px at 0px 134px, var(--c), #0000),
    radial-gradient(4px 100px at 300px 134px, var(--c), #0000),
    radial-gradient(3px 4px at 150px 67px, var(--c1) 100%, #0000 150%),
    radial-gradient(4px 100px at 0px 179px, var(--c), #0000),
    radial-gradient(4px 100px at 300px 179px, var(--c), #0000),
    radial-gradient(3px 4px at 150px 89.5px, var(--c1) 100%, #0000 150%),
    radial-gradient(4px 100px at 0px 299px, var(--c), #0000),
    radial-gradient(4px 100px at 300px 299px, var(--c), #0000),
    radial-gradient(3px 4px at 150px 149.5px, var(--c1) 100%, #0000 150%),
    radial-gradient(4px 100px at 0px 215px, var(--c), #0000),
    radial-gradient(4px 100px at 300px 215px, var(--c), #0000),
    radial-gradient(3px 4px at 150px 107.5px, var(--c1) 100%, #0000 150%),
    radial-gradient(4px 100px at 0px 281px, var(--c), #0000),
    radial-gradient(4px 100px at 300px 281px, var(--c), #0000),
    radial-gradient(3px 4px at 150px 140.5px, var(--c1) 100%, #0000 150%),
    radial-gradient(4px 100px at 0px 158px, var(--c), #0000),
    radial-gradient(4px 100px at 300px 158px, var(--c), #0000),
    radial-gradient(3px 4px at 150px 79px, var(--c1) 100%, #0000 150%),
    radial-gradient(4px 100px at 0px 210px, var(--c), #0000),
    radial-gradient(4px 100px at 300px 210px, var(--c), #0000),
    radial-gradient(3px 4px at 150px 105px, var(--c1) 100%, #0000 150%);
  background-size:
    300px 235px, 300px 235px, 300px 235px,
    300px 252px, 300px 252px, 300px 252px,
    300px 150px, 300px 150px, 300px 150px,
    300px 253px, 300px 253px, 300px 253px,
    300px 204px, 300px 204px, 300px 204px,
    300px 134px, 300px 134px, 300px 134px,
    300px 179px, 300px 179px, 300px 179px,
    300px 299px, 300px 299px, 300px 299px,
    300px 215px, 300px 215px, 300px 215px,
    300px 281px, 300px 281px, 300px 281px,
    300px 158px, 300px 158px, 300px 158px,
    300px 210px, 300px 210px, 300px 210px;
  animation: rain-fall 150s linear infinite, rain-flicker 5s ease-in-out infinite;
}

@keyframes rain-fall {
  0% {
    background-position:
      0px 220px, 3px 220px, 151.5px 337.5px,
      25px 24px, 28px 24px, 176.5px 150px,
      50px 16px, 53px 16px, 201.5px 91px,
      75px 224px, 78px 224px, 226.5px 350.5px,
      100px 19px, 103px 19px, 251.5px 121px,
      125px 120px, 128px 120px, 276.5px 187px,
      150px 31px, 153px 31px, 301.5px 120.5px,
      175px 235px, 178px 235px, 326.5px 384.5px,
      200px 121px, 203px 121px, 351.5px 228.5px,
      225px 224px, 228px 224px, 376.5px 364.5px,
      250px 26px, 253px 26px, 401.5px 105px,
      275px 75px, 278px 75px, 426.5px 180px;
  }
  to {
    background-position:
      0px 6800px, 3px 6800px, 151.5px 6917.5px,
      25px 13632px, 28px 13632px, 176.5px 13758px,
      50px 5416px, 53px 5416px, 201.5px 5491px,
      75px 17175px, 78px 17175px, 226.5px 17301.5px,
      100px 5119px, 103px 5119px, 251.5px 5221px,
      125px 8428px, 128px 8428px, 276.5px 8495px,
      150px 9876px, 153px 9876px, 301.5px 9965.5px,
      175px 13391px, 178px 13391px, 326.5px 13540.5px,
      200px 14741px, 203px 14741px, 351.5px 14848.5px,
      225px 18770px, 228px 18770px, 376.5px 18910.5px,
      250px 5082px, 253px 5082px, 401.5px 5161px,
      275px 6375px, 278px 6375px, 426.5px 6480px;
  }
}

.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: 56px;
  align-items: center;
}

.hero__title {
  font-size: clamp(2.4rem, 4.6vw, 3.9rem);
  font-weight: 700;
  font-style: italic;
  line-height: 1.06;
  letter-spacing: -0.025em;
}

.hero__title-red,
.hero__title-rest {
  display: block;
  text-wrap: balance;
}

.hero__title-red {
  color: var(--red);
}

.hero__title-rest {
  margin-top: 0.12em;
}

.hero__lead {
  margin-top: 24px;
  max-width: 46ch;
  font-size: 18px;
  color: var(--muted);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 28px;
  margin-top: 40px;
}

.hero__showcase {
  justify-self: end;
  width: 100%;
  max-width: 520px;
}

/* Pronostiqueurs à la une */

/* Le bloc sert de référence pour la taille du nom (unités cqi) */
.showcase {
  container-type: inline-size;
}

.showcase__stage {
  position: relative;
  aspect-ratio: 100 / 116;
  overflow: hidden;
}

/* Bloc rouge incliné derrière les photos, qui glisse d'un côté à l'autre en pivotant vers la gauche */
.showcase__backdrop {
  position: absolute;
  left: 18%;
  right: 18%;
  top: 32%;
  bottom: -6%;
  background: var(--red);
  transform: skewX(-10deg);
  transform-origin: 50% 100%;
  animation: backdrop-sway 9s ease-in-out infinite alternate;
}

@keyframes backdrop-sway {
  from {
    transform: translateX(-16%) rotate(0deg) skewX(-10deg);
  }
  to {
    transform: translateX(16%) rotate(-8deg) skewX(-10deg);
  }
}

/*
  Pas d'opacité sur la diapositive elle-même : une opacité sur un parent
  coupe le flou de la fiche pendant le fondu et la fait sauter.
*/
.showcase__slide {
  position: absolute;
  inset: 0;
  visibility: hidden;
  transition: visibility 0s linear 0.5s;
}

.showcase__slide.is-active {
  visibility: visible;
  transition: visibility 0s;
}

/* Photo entière, posée en bas, noir et blanc contrasté */
.showcase__photo {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: contain;
  object-position: center bottom;
  filter: grayscale(1) contrast(1.18) brightness(1.06);
  opacity: 0;
  transform: translateX(24px);
  transition: opacity 0.5s ease, transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* Nom en haut, en blanc, devant la photo */
.showcase__bg-name {
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
  right: 0;
  font-size: clamp(40px, 7vw, 68px);
  font-size: 13.5cqi;
  font-weight: 700;
  font-style: italic;
  line-height: 1;
  letter-spacing: -0.02em;
  white-space: nowrap;
  color: var(--white);
  opacity: 0;
  transform: translateX(-24px);
  transition: opacity 0.5s ease, transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.showcase__slide.is-active .showcase__bg-name,
.showcase__slide.is-active .showcase__photo {
  opacity: 1;
  transform: none;
}

/* Fiche infos en verre dépoli : sort vite, revient une fois la photo en place, sans bouger */
.showcase__card {
  position: absolute;
  z-index: 3;
  left: 0;
  bottom: 16px;
  width: min(232px, 54%);
  padding: 12px 14px;
  color: var(--white);
  background: rgba(16, 16, 16, 0.38);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 10px;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.showcase__slide.is-active .showcase__card {
  opacity: 1;
  transition: opacity 0.4s ease 0.35s;
}

.showcase__meta {
  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.85);
}

.showcase__stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  margin: 10px 0 0;
  padding: 8px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  border-bottom: 1px solid rgba(255, 255, 255, 0.18);
}

.showcase__stats div {
  display: flex;
  flex-direction: column-reverse;
}

.showcase__stats dt {
  font-size: 10px;
  line-height: 1.3;
  color: rgba(255, 255, 255, 0.7);
}

.showcase__stats dd {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  font-style: italic;
  line-height: 1.3;
  font-variant-numeric: tabular-nums;
}

.showcase__last {
  margin-top: 8px;
  font-size: 11px;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.75);
}

.showcase__last strong {
  font-weight: 600;
  color: var(--white);
}

/* Sections */

.section {
  padding: 112px 0;
  border-top: 1px solid var(--line);
}

.section h2 {
  font-size: clamp(1.9rem, 3.4vw, 2.75rem);
  font-weight: 700;
  font-style: italic;
  line-height: 1.12;
  letter-spacing: -0.02em;
}

.section-head {
  max-width: 620px;
  margin-bottom: 56px;
}

.section-head p {
  margin-top: 16px;
  font-size: 17px;
  color: var(--muted);
}

/* Concept + "Comment ça marche" côte à côte */

.concept__top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 64px;
  align-items: start;
}

.concept__top .section-head {
  margin-bottom: 0;
}

.how__title {
  font-size: 20px;
  font-weight: 700;
  font-style: italic;
}

.steps {
  margin-top: 12px;
}

.step {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  column-gap: 12px;
  padding: 14px 0;
  border-top: 1px solid var(--line);
}

.step:last-child {
  border-bottom: 1px solid var(--line);
}

.step__num {
  grid-row: span 2;
  font-size: 30px;
  font-weight: 700;
  font-style: italic;
  line-height: 1;
  color: var(--red);
}

.step h4 {
  margin: 0;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.3;
}

.step p {
  margin-top: 4px;
  font-size: 15px;
  color: var(--muted);
}

/* Compo */

.roster {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
}

.roster thead th {
  padding: 0 0 14px;
  font-size: 13px;
  font-weight: 500;
  color: var(--muted);
  border-bottom: 1px solid var(--line);
}

.roster th + th,
.roster td {
  text-align: right;
}

.roster tbody th,
.roster tbody td,
.roster tfoot th,
.roster tfoot td {
  padding: 20px 0;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
}

.roster tbody th {
  text-align: left;
}

.roster__who {
  display: flex;
  align-items: center;
  gap: 24px;
}

.roster__photo {
  flex: none;
  width: 120px;
  height: 120px;
  overflow: hidden;
  background: var(--red);
  border-radius: var(--radius-sm);
}

/* Cadrage sur le haut du corps, même traitement noir et blanc que dans le hero */
.roster__photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 0;
  transform: scale(var(--zoom, 1.3));
  transform-origin: 50% 0;
  filter: grayscale(1) contrast(1.18) brightness(1.06);
}

.roster__name {
  font-size: 32px;
  font-weight: 700;
  font-style: italic;
  line-height: 1.1;
}

.roster__price {
  display: block;
  font-size: 40px;
  font-weight: 700;
  font-style: italic;
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.roster__per {
  display: block;
  margin-top: 6px;
  font-size: 14px;
  color: var(--muted);
}

.roster tfoot th {
  font-size: 17px;
  font-weight: 600;
  text-align: left;
  border-bottom: 0;
}

.roster tfoot td {
  border-bottom: 0;
}

.roster tfoot .roster__price {
  color: var(--red);
}

/* Tarif */

.pricing {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 440px);
  gap: 80px;
  align-items: center;
}

.pricing__copy p {
  margin-top: 16px;
  max-width: 44ch;
  font-size: 17px;
  color: var(--muted);
}

.checklist {
  margin-top: 32px;
}

.checklist li {
  display: flex;
  gap: 14px;
  padding: 12px 0;
  border-top: 1px solid var(--line);
  font-weight: 500;
}

.checklist li:last-child {
  border-bottom: 1px solid var(--line);
}

.checklist li::before {
  content: "";
  flex: none;
  width: 20px;
  height: 20px;
  margin-top: 3px;
  background: var(--red);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M4 10.5l4 4 8-9' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M4 10.5l4 4 8-9' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

.plan {
  padding: 32px;
  background: var(--white);
  color: var(--ink);
  border-radius: var(--radius);
}

.plan__switch {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin: 0;
  padding: 4px;
  border: 1px solid var(--rule-strong);
  border-radius: 6px;
  min-width: 0;
}

.plan__switch input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.plan__switch label {
  padding: 10px 8px;
  text-align: center;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-soft);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.plan__switch label:hover {
  color: var(--ink);
}

.plan__switch input:checked + label {
  background: var(--ink);
  color: var(--white);
}

.plan__switch input:focus-visible + label {
  outline: 3px solid var(--red);
  outline-offset: 2px;
}

.plan__price {
  margin-top: 36px;
  font-size: 64px;
  font-weight: 700;
  font-style: italic;
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}

.plan__per {
  font-size: 16px;
  font-weight: 500;
  font-style: normal;
  letter-spacing: 0;
  color: var(--ink-soft);
}

.plan__detail {
  min-height: 52px;
  margin: 14px 0 28px;
  font-size: 15px;
  color: var(--ink-soft);
}

.plan__detail strong {
  color: var(--red);
  font-weight: 600;
}

.plan__pay {
  display: grid;
  grid-template-columns: 104px minmax(0, 1fr);
  gap: 18px;
  align-items: center;
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid var(--rule);
}

/* Emplacement du QR code vers @CoteUpAcces, vide pour l'instant */
.plan__qr {
  aspect-ratio: 1;
  background: #F4F4F4;
  border: 1px solid var(--rule-strong);
  border-radius: 6px;
  overflow: hidden;
}

.plan__qr img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.plan__pay-text p {
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-soft);
}

.plan__pay-text strong {
  font-weight: 600;
  color: var(--ink);
}

.plan__methods {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 12px;
}

.plan__methods li {
  padding: 4px 10px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius-sm);
}

/* Telegram */

.telegram {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 80px;
  align-items: center;
}

.telegram__copy p:not(.telegram__channel) {
  margin-top: 16px;
  max-width: 46ch;
  font-size: 17px;
  color: var(--muted);
}

.telegram__channel {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  margin: 32px 0;
  padding: 16px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.telegram__channel .icon-telegram {
  width: 22px;
  height: 22px;
  color: var(--red);
}

.telegram__handle {
  font-weight: 600;
}

.telegram__count {
  margin-left: auto;
  color: var(--muted);
}

.telegram__count strong {
  font-size: 20px;
  font-weight: 700;
  font-style: italic;
  color: var(--white);
}

/* Loader "speeder", d'après "moody-ladybug-99" par anand_4957 sur Uiverse.io (licence MIT) */

.speed {
  position: relative;
  height: 260px;
  overflow: hidden;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

/* Agrandit la fusée sans toucher à son animation */
.speed__ship {
  position: absolute;
  inset: 0;
  transform: translateX(-30px) scale(1.8);
}

.speed .loader {
  position: absolute;
  top: 50%;
  margin-left: -50px;
  left: 50%;
  animation: speeder 0.4s linear infinite;
}

.speed .loader > span {
  height: 5px;
  width: 35px;
  background: var(--red);
  position: absolute;
  top: -19px;
  left: 60px;
  border-radius: 2px 10px 1px 0;
}

.speed .base span {
  position: absolute;
  width: 0;
  height: 0;
  border-top: 6px solid transparent;
  border-right: 100px solid var(--red);
  border-bottom: 6px solid transparent;
}

.speed .base span::before {
  content: "";
  height: 22px;
  width: 22px;
  border-radius: 50%;
  background: var(--red);
  position: absolute;
  right: -110px;
  top: -16px;
}

.speed .base span::after {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  border-top: 0 solid transparent;
  border-right: 55px solid var(--red);
  border-bottom: 16px solid transparent;
  top: -16px;
  right: -98px;
}

.speed .face {
  position: absolute;
  height: 12px;
  width: 20px;
  background: var(--red);
  border-radius: 20px 20px 0 0;
  transform: rotate(-40deg);
  right: -125px;
  top: -15px;
}

.speed .face::after {
  content: "";
  height: 12px;
  width: 12px;
  background: var(--red);
  right: 4px;
  top: 7px;
  position: absolute;
  transform: rotate(40deg);
  transform-origin: 50% 50%;
  border-radius: 0 0 0 2px;
}

.speed .loader > span > span:nth-child(1),
.speed .loader > span > span:nth-child(2),
.speed .loader > span > span:nth-child(3),
.speed .loader > span > span:nth-child(4) {
  width: 30px;
  height: 1px;
  background: var(--white);
  position: absolute;
  animation: fazer1 0.2s linear infinite;
}

.speed .loader > span > span:nth-child(2) {
  top: 3px;
  animation: fazer2 0.4s linear infinite;
}

.speed .loader > span > span:nth-child(3) {
  top: 1px;
  animation: fazer3 0.4s linear infinite;
  animation-delay: -1s;
}

.speed .loader > span > span:nth-child(4) {
  top: 4px;
  animation: fazer4 1s linear infinite;
  animation-delay: -1s;
}

@keyframes fazer1 {
  0% { left: 0; }
  100% { left: -80px; opacity: 0; }
}

@keyframes fazer2 {
  0% { left: 0; }
  100% { left: -100px; opacity: 0; }
}

@keyframes fazer3 {
  0% { left: 0; }
  100% { left: -50px; opacity: 0; }
}

@keyframes fazer4 {
  0% { left: 0; }
  100% { left: -150px; opacity: 0; }
}

@keyframes speeder {
  0% { transform: translate(2px, 1px) rotate(0deg); }
  10% { transform: translate(-1px, -3px) rotate(-1deg); }
  20% { transform: translate(-2px, 0px) rotate(1deg); }
  30% { transform: translate(1px, 2px) rotate(0deg); }
  40% { transform: translate(1px, -1px) rotate(1deg); }
  50% { transform: translate(-1px, 3px) rotate(-1deg); }
  60% { transform: translate(-1px, 1px) rotate(0deg); }
  70% { transform: translate(3px, 1px) rotate(-1deg); }
  80% { transform: translate(-2px, -1px) rotate(1deg); }
  90% { transform: translate(2px, 1px) rotate(0deg); }
  100% { transform: translate(1px, -2px) rotate(-1deg); }
}

.speed .longfazers {
  position: absolute;
  width: 100%;
  height: 100%;
}

.speed .longfazers span {
  position: absolute;
  height: 2px;
  width: 20%;
  background: var(--white);
}

.speed .longfazers span:nth-child(1) {
  top: 20%;
  animation: lf 0.6s linear infinite;
  animation-delay: -5s;
}

.speed .longfazers span:nth-child(2) {
  top: 40%;
  animation: lf2 0.8s linear infinite;
  animation-delay: -1s;
}

.speed .longfazers span:nth-child(3) {
  top: 60%;
  animation: lf3 0.6s linear infinite;
}

.speed .longfazers span:nth-child(4) {
  top: 80%;
  animation: lf4 0.5s linear infinite;
  animation-delay: -3s;
}

@keyframes lf {
  0% { left: 200%; }
  100% { left: -200%; opacity: 0; }
}

@keyframes lf2 {
  0% { left: 200%; }
  100% { left: -200%; opacity: 0; }
}

@keyframes lf3 {
  0% { left: 200%; }
  100% { left: -100%; opacity: 0; }
}

@keyframes lf4 {
  0% { left: 200%; }
  100% { left: -100%; opacity: 0; }
}

/* FAQ */

.faq {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: 80px;
  align-items: start;
}

.faq__head p {
  margin-top: 16px;
  color: var(--muted);
}

.faq__head a {
  color: var(--white);
  font-weight: 600;
  text-decoration-color: var(--red);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

.faq__list details {
  border-bottom: 1px solid var(--line);
}

.faq__list details:first-child {
  border-top: 1px solid var(--line);
}

.faq__list summary {
  position: relative;
  padding: 22px 48px 22px 0;
  font-size: 17px;
  font-weight: 600;
  list-style: none;
  cursor: pointer;
}

.faq__list summary::-webkit-details-marker {
  display: none;
}

.faq__list summary::before,
.faq__list summary::after {
  content: "";
  position: absolute;
  right: 4px;
  top: 50%;
  width: 16px;
  height: 2px;
  background: var(--red);
  transition: transform 0.2s ease;
}

.faq__list summary::after {
  transform: rotate(90deg);
}

.faq__list details[open] summary::after {
  transform: rotate(0deg);
}

.faq__list details p {
  padding: 0 48px 24px 0;
  color: var(--muted);
  max-width: 62ch;
}

/* Footer */

.site-footer {
  background: var(--bg);
  color: var(--muted);
  padding: 56px 0 32px;
  font-size: 14px;
  border-top: 1px solid var(--line);
}

.responsible {
  display: flex;
  align-items: center;
  gap: 20px;
  padding-bottom: 40px;
  border-bottom: 1px solid var(--line);
}

.responsible__badge {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  font-size: 17px;
  font-weight: 700;
  font-style: italic;
  color: var(--white);
  border: 2px solid var(--white);
  border-radius: var(--radius-sm);
}

.responsible p {
  max-width: 80ch;
  color: var(--white);
}

.responsible a {
  color: var(--white);
  font-weight: 600;
  text-decoration-color: var(--red);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

.site-footer__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 40px;
  padding: 48px 0;
}

.site-footer__about {
  margin-top: 16px;
  max-width: 32ch;
}

.site-footer h3 {
  margin-bottom: 14px;
  font-size: 14px;
  font-weight: 600;
  color: var(--white);
}

.site-footer li + li {
  margin-top: 8px;
}

.site-footer__grid a:not(.logo) {
  text-decoration: none;
  transition: color 0.15s ease;
}

.site-footer__grid a:not(.logo):hover {
  color: var(--white);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 24px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  font-size: 13px;
}

/* Bouton retour en haut : rond, avec un anneau qui suit la progression dans la page */

.to-top {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 40;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  padding: 0;
  color: var(--white);
  background: var(--red);
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(24px) scale(0.6);
  transition:
    opacity 0.25s ease,
    transform 0.3s ease,
    visibility 0s linear 0.3s,
    background-color 0.2s ease;
}

.to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition:
    opacity 0.3s ease,
    transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1),
    background-color 0.2s ease;
}

@media (hover: hover) {
  .to-top:hover {
    background: var(--red-hover);
  }
}

.to-top.is-visible:active {
  transform: scale(0.92);
  transition: transform 0.1s ease;
}

.to-top__ring {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.to-top__ring circle {
  fill: none;
  stroke-width: 2.5;
}

.to-top__track {
  stroke: rgba(255, 255, 255, 0.25);
}

/* --progress (0 à 100) est mis à jour par le JS au défilement */
.to-top__progress {
  stroke: var(--white);
  stroke-linecap: round;
  stroke-dasharray: 100;
  stroke-dashoffset: calc(100 - var(--progress, 0));
}

.to-top__arrow {
  position: relative;
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.25s ease;
}

@media (hover: hover) {
  .to-top:hover .to-top__arrow {
    transform: translateY(-3px);
  }
}

/* Au clic, la flèche part vers le haut et revient par le bas */
.to-top.is-launching .to-top__arrow {
  animation: arrow-launch 0.6s ease-in-out;
}

@keyframes arrow-launch {
  0% { transform: none; opacity: 1; }
  45% { transform: translateY(-20px); opacity: 0; }
  46% { transform: translateY(20px); opacity: 0; }
  100% { transform: none; opacity: 1; }
}

/* Responsive */

@media (max-width: 1000px) {
  .hero__grid {
    grid-template-columns: 1fr;
    gap: 56px;
  }

  .hero__showcase {
    justify-self: start;
  }

  .pricing,
  .faq,
  .telegram,
  .concept__top {
    grid-template-columns: 1fr;
    gap: 48px;
  }

  .plan {
    max-width: 480px;
  }

  .site-footer__grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 900px) {
  .nav-toggle {
    display: block;
  }

  .nav {
    position: absolute;
    top: var(--header-h);
    max-height: calc(100vh - var(--header-h));
    max-height: calc(100dvh - var(--header-h));
    overflow-y: auto;
    overscroll-behavior: contain;
    left: 0;
    right: 0;
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px var(--gutter) 24px;
    background: var(--bg);
    border-bottom: 1px solid var(--line);
  }

  .nav.is-open {
    display: flex;
  }

  .nav a:not(.btn) {
    padding: 14px 0;
    font-size: 17px;
    color: var(--white);
    border-bottom: 1px solid var(--line);
  }

  .nav__cta {
    margin: 20px 0 0;
  }

  .roster__who {
    gap: 18px;
  }

  .roster__photo {
    width: 96px;
    height: 96px;
  }

  .roster__name {
    font-size: 26px;
  }

  .roster__price {
    font-size: 32px;
  }
}

@media (max-width: 560px) {
  :root {
    --gutter: 16px;
  }

  .section {
    padding: 72px 0;
  }

  .hero {
    padding: 48px 0 64px;
  }

  .hero__lead {
    font-size: 17px;
  }

  .section-head {
    margin-bottom: 40px;
  }

  .showcase__card {
    bottom: 12px;
    width: 64%;
    padding: 10px 12px;
  }

  .to-top {
    right: 16px;
    bottom: 16px;
  }

  .plan {
    padding: 24px;
  }

  .plan__price {
    font-size: 54px;
  }

  .plan__pay {
    grid-template-columns: 88px minmax(0, 1fr);
    gap: 14px;
  }

  .roster__who {
    gap: 14px;
  }

  .roster__photo {
    width: 72px;
    height: 72px;
  }

  .roster__name {
    font-size: 20px;
  }

  .roster__price {
    font-size: 26px;
  }

  .roster__per {
    font-size: 12px;
  }

  .roster tfoot th {
    font-size: 15px;
  }

  .speed {
    height: 200px;
  }

  .speed__ship {
    transform: translateX(-20px) scale(1.3);
  }

  .responsible {
    align-items: flex-start;
  }

  .site-footer__grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}

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

  *,
  *::before,
  *::after {
    transition: none !important;
    animation: none !important;
  }
}