/* Twocount — styles communs. Les couleurs et mesures sont des variables : une seule source. */
@font-face {
  font-family: "Manrope";
  src: url("/fonts/Manrope-Variable.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

:root {
  --fond: #16171A;
  --surface: #212328;
  --ligne: #2E3035;
  --bord: #3A3D44;
  --texte: #ECEBE7;
  --texte-2: #B9B9B4;
  --texte-3: #8A8C92;
  --ambre: #E2B56A;
  --ambre-clair: #F0CB8A;
  --lavande: #B39BF0;
  --mandarine: #F59A52;
  --largeur: 1160px;
  --gouttiere: 24px;
  --rayon: 16px;
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--fond);
  color: var(--texte);
  font-family: "Manrope", system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.5;
}

img, svg { max-width: 100%; height: auto; }

a { color: var(--ambre); }
a:hover { color: var(--ambre-clair); }

:focus-visible {
  outline: 3px solid var(--ambre);
  outline-offset: 3px;
  border-radius: 4px;
}

.evitement {
  position: absolute;
  left: 16px;
  top: -64px;
  z-index: 10;
  padding: 12px 16px;
  background: var(--ambre);
  color: var(--fond);
  border-radius: 8px;
  font-weight: 700;
}
.evitement:focus { top: 16px; }

/* En-tête */
.entete {
  width: 100%;
  max-width: var(--largeur);
  margin: 0 auto;
  padding: 20px var(--gouttiere);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.logo {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  color: var(--texte);
  text-decoration: none;
  font-weight: 700;
  font-size: 22px;
}
.logo__svg { width: 36px; height: 36px; flex: none; }
.logo__deux { color: var(--ambre); }

.entete__nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 20px;
  font-size: 15px;
}

.nav__lien {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--texte);
  text-decoration: none;
}
.nav__lien:hover { color: var(--ambre); }

.bascule {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid var(--bord);
  border-radius: 999px;
  color: var(--texte-3);
  text-decoration: none;
}
.bascule span { color: var(--texte); }

.bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 20px;
  border-radius: 999px;
  background: var(--ambre);
  color: var(--fond);
  font-weight: 700;
  text-decoration: none;
}
.bouton:hover { background: var(--ambre-clair); color: var(--fond); }

/* Boutons des stores (texte seul pour l'instant ; badges officiels à venir) */
.badges { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding-top: 8px; }

.badge {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  min-height: 56px;
  padding: 0 20px;
  border-radius: 14px;
  background: var(--texte);
  color: var(--fond);
  line-height: 1.1;
  text-decoration: none;
}
.badge:hover { color: var(--fond); background: #fff; }
.badge__petit { font-size: 12px; }
.badge__gros { font-size: 18px; font-weight: 700; }
.badge--bientot { background: var(--surface); color: var(--texte-2); border: 1px dashed var(--bord); cursor: not-allowed; }

/* Contenu */
.page {
  flex: 1;
  width: 100%;
  max-width: var(--largeur);
  margin: 0 auto;
  padding: 48px var(--gouttiere) 88px;
}
.page h1 { margin: 0 0 24px; font-size: clamp(36px, 6vw, 64px); line-height: 1.06; letter-spacing: -0.02em; }

/* Accueil */
.accueil { flex: 1; width: 100%; }
.ambre { color: var(--ambre); }

.titre-section { margin: 0; font-size: clamp(30px, 4vw, 48px); line-height: 1.1; font-weight: 700; }
.titre-section--m { font-size: clamp(30px, 4vw, 44px); }

/* Rubans : SVG pleine largeur étiré (preserveAspectRatio="none"), trait d'épaisseur constante */
.ruban { position: absolute; left: 0; width: 100%; height: 240px; max-width: none; z-index: 0; pointer-events: none; }
.ruban__trait { fill: none; stroke: var(--ambre); stroke-width: 84; stroke-linecap: round; }
.ruban__plein { fill: var(--ambre); }
.ruban--hero { bottom: -40px; }
.ruban--vague { bottom: -1px; }
.ruban--emblemes { bottom: -30px; }

.telephone { display: block; width: 100%; height: auto; }
.telephone--hero { max-width: 380px; }
.telephone--moyen { max-width: 340px; }
.telephone--petit { max-width: 300px; }

/* Hero : le ruban est sous la colonne de texte, derrière le téléphone */
.hero { position: relative; overflow: hidden; }
.hero__contenu {
  position: relative; z-index: 1;
  max-width: var(--largeur); margin: 0 auto;
  padding: 48px var(--gouttiere) 128px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 48px;
}
.hero__texte { flex: 999 1 460px; min-width: 0; display: flex; flex-direction: column; gap: 24px; }
.hero__visuel { flex: 1 1 320px; display: flex; justify-content: center; }
.surtitre { margin: 0; color: var(--ambre); font-weight: 600; letter-spacing: 0.04em; }
.hero__titre { margin: 0; font-size: clamp(40px, 6vw, 72px); line-height: 1.04; font-weight: 700; letter-spacing: -0.02em; }
.hero__intro { margin: 0; font-size: 20px; line-height: 1.5; color: var(--texte-2); max-width: 34ch; }
.hero__note { margin: 0; font-size: 14px; color: var(--texte-3); }
/* Bouton testeur et pastilles des stores forment un seul bloc */
.hero__texte .testeur { padding-top: 0; }
.hero__texte .testeur + .badges { margin-top: -12px; padding-top: 0; }

/* Pourquoi */
.pourquoi { max-width: var(--largeur); margin: 0 auto; padding: 96px var(--gouttiere) 48px; display: flex; flex-direction: column; gap: 40px; }
.pourquoi .titre-section { max-width: 22ch; }
.cartes { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; }
.carte { background: var(--surface); border-radius: var(--rayon); padding: 28px; display: flex; flex-direction: column; gap: 12px; }
.carte__chiffre { margin: 0; font-size: 38px; font-weight: 800; line-height: 1.1; }
.carte__chiffre--ambre { color: var(--ambre); }
.carte__chiffre--lavande { color: var(--lavande); }
.carte__chiffre--mandarine { color: var(--mandarine); }
.carte__titre { margin: 0; font-size: 22px; font-weight: 700; }
.carte__texte { margin: 0; line-height: 1.55; color: var(--texte-2); }

/* Compte commun : la vague pleine devient le haut de la section ambre qui suit (sans trou sombre) */
.transition { position: relative; overflow: hidden; }
.compte {
  position: relative; z-index: 1;
  max-width: var(--largeur); margin: 0 auto;
  padding: 48px var(--gouttiere) 0;
  display: flex; flex-direction: row-reverse; flex-wrap: wrap; align-items: flex-start; gap: 48px;
}
.compte__texte { flex: 999 1 420px; min-width: 0; display: flex; flex-direction: column; gap: 20px; padding-top: 24px; }
.compte__visuel { flex: 1 1 300px; display: flex; justify-content: center; }
.compte__intro { margin: 0; font-size: 18px; line-height: 1.6; color: var(--texte-2); }
.liste { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 12px; font-size: 17px; }
.liste li { display: flex; gap: 12px; align-items: baseline; }
.liste__tiret { color: var(--ambre); font-weight: 800; }

/* Sans compte, sans pub */
.prive { padding: 96px var(--gouttiere); background: var(--ambre); color: var(--fond); }
.prive__contenu { max-width: var(--largeur); margin: 0 auto; display: flex; flex-wrap: wrap; align-items: center; gap: 48px; }
.prive__texte { flex: 999 1 460px; min-width: 0; display: flex; flex-direction: column; gap: 20px; }
.prive__visuel { flex: 1 1 280px; display: flex; justify-content: center; }
.prive__titre { margin: 0; font-size: clamp(32px, 4.5vw, 56px); line-height: 1.05; font-weight: 800; }
.prive__intro { margin: 0; font-size: 19px; line-height: 1.6; max-width: 40ch; }
.prive__lien { display: inline-flex; align-items: center; min-height: 44px; color: var(--fond); font-weight: 700; font-size: 17px; }
.prive__lien:hover { color: var(--fond); text-decoration-thickness: 3px; }

/* Emblèmes */
.emblemes { position: relative; overflow: hidden; }
.emblemes__contenu {
  position: relative; z-index: 1;
  max-width: var(--largeur); margin: 0 auto;
  padding: 96px var(--gouttiere) 48px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 48px;
}
.emblemes__texte { flex: 999 1 420px; min-width: 0; display: flex; flex-direction: column; gap: 20px; }
.emblemes__visuel { flex: 1 1 300px; display: flex; justify-content: center; }

/* FAQ */
.faq { max-width: 820px; margin: 0 auto; padding: 72px var(--gouttiere); display: flex; flex-direction: column; gap: 12px; }
.faq__titre { margin: 0 0 16px; font-size: clamp(28px, 3.5vw, 40px); font-weight: 700; }
.faq__item { background: var(--surface); border-radius: 14px; padding: 8px 24px; }
.faq__item summary { display: flex; align-items: center; min-height: 44px; font-size: 18px; font-weight: 600; cursor: pointer; }
.faq__item p { margin: 4px 0 12px; line-height: 1.6; color: var(--texte-2); }

/* Appel final */
.appel { padding: 72px var(--gouttiere); text-align: center; display: flex; flex-direction: column; align-items: center; gap: 20px; }
.bouton--grand { min-height: 56px; padding: 0 28px; font-size: 18px; }

/* Pied de page */
.pied { border-top: 1px solid var(--ligne); padding: 40px var(--gouttiere); }
.pied__grille {
  max-width: var(--largeur);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 32px;
  font-size: 15px;
}
.pied__col { display: flex; flex-direction: column; gap: 4px; color: var(--texte-3); }
.pied__col a { display: inline-flex; align-items: center; min-height: 44px; color: var(--texte); text-decoration: none; }
.pied__col a:hover { color: var(--ambre); }
.pied__titre { color: var(--texte); font-weight: 700; }

@media (max-width: 480px) {
  :root { --gouttiere: 16px; }
  .entete__nav { gap: 4px 12px; }
}

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

/* Comparatifs (Tricount, Splitwise) */
.comparatif { flex: 1; width: 100%; max-width: 900px; margin: 0 auto; padding: 0 var(--gouttiere) 48px; }
.comparatif__intro { padding: 56px 0 32px; display: flex; flex-direction: column; gap: 20px; }
.comparatif__fil { margin: 0; color: var(--texte-3); font-size: 15px; }
.comparatif__titre { margin: 0; font-size: clamp(36px, 5.5vw, 64px); line-height: 1.05; font-weight: 700; letter-spacing: -0.02em; }
.comparatif__chapo { margin: 0; font-size: 20px; line-height: 1.55; color: var(--texte-2); }
.comparatif__section { padding: 32px 0; display: flex; flex-direction: column; gap: 16px; }
.comparatif__h2 { margin: 0; font-size: 28px; font-weight: 700; line-height: 1.2; }
.cartes--compactes { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.cartes--compactes .carte { padding: 24px; gap: 8px; }
.carte__titre--s { font-size: 19px; }

/* Le tableau défile dans sa boîte, pas la page */
.tableau { overflow-x: auto; border-radius: var(--rayon); background: var(--surface); }
.tableau__table { width: 100%; min-width: 560px; border-collapse: collapse; font-size: 16px; text-align: left; }
.tableau__table th, .tableau__table td { padding: 16px 20px; vertical-align: top; }
.tableau__table thead th { color: var(--texte-3); font-weight: 600; }
.tableau__table thead th.tableau__nous { color: var(--ambre); font-weight: 700; }
.tableau__table tbody tr { border-top: 1px solid var(--ligne); }
.tableau__table tbody th { font-weight: 400; }
.tableau__table tbody td:last-child { color: var(--texte-2); }
.comparatif__source { margin: 0; font-size: 14px; line-height: 1.6; color: var(--texte-3); }

.comparatif__etapes { margin: 0; padding-left: 24px; display: flex; flex-direction: column; gap: 12px; font-size: 17px; line-height: 1.55; color: var(--texte-2); }

.comparatif__cta {
  margin: 48px 0; padding: 48px var(--gouttiere);
  background: var(--ambre); color: var(--fond); border-radius: 26px;
  display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center;
}
.comparatif__cta-titre { margin: 0; font-size: clamp(28px, 4vw, 40px); font-weight: 800; line-height: 1.15; }
.badges--centre { justify-content: center; }
.testeur { margin: 0; padding-top: 8px; }
.testeur__bouton { min-height: 56px; padding: 0 28px; font-size: 18px; }
.comparatif__cta .testeur__bouton { background: var(--fond); color: var(--ambre); }
.comparatif__cta .testeur__bouton:hover { background: var(--surface); color: var(--ambre-clair); }
.comparatif__autre { margin: 0; text-align: center; color: var(--texte-3); }
.comparatif__autre a { display: inline-flex; align-items: center; min-height: 44px; }

/* Pages de texte long (confidentialité, mentions légales, contact) */
.page--texte { max-width: calc(70ch + 2 * var(--gouttiere)); }
.texte-long { font-size: 17px; line-height: 1.65; color: var(--texte-2); overflow-wrap: break-word; }
.texte-long h1 { color: var(--texte); }
.texte-long h2 { margin: 48px 0 12px; color: var(--texte); font-size: 26px; line-height: 1.25; scroll-margin-top: 24px; }
.texte-long p, .texte-long ul, .texte-long ol { margin: 0 0 16px; }
.texte-long ul, .texte-long ol { padding-left: 24px; }
.texte-long li + li { margin-top: 8px; }
.texte-long strong { color: var(--texte); font-weight: 700; }
.texte-long__maj { color: var(--texte-3); font-size: 15px; }
.texte-long__chapo { font-size: 20px; line-height: 1.55; }
.texte-long__mail { font-weight: 700; }
.sommaire { margin: 32px 0 8px; padding: 24px 28px; background: var(--surface); border-radius: var(--rayon); }
.sommaire__titre { margin: 0 0 8px; color: var(--texte); font-weight: 700; }
.sommaire ol { margin: 0; }
.sommaire li { padding: 4px 0; }
.sommaire li + li { margin-top: 0; }
.sommaire a { display: inline; }

/* Pages /get, /r et 404 : une colonne centrée, sans en-tête */
.telecharger {
  flex: 1;
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  padding: 64px var(--gouttiere) 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  text-align: center;
}
.telecharger__logo { width: 120px; height: 120px; }
.telecharger h1 { margin: 0; font-size: 30px; line-height: 1.15; }
.telecharger__sous-titre { margin: 0; font-size: 17px; color: var(--texte-2); }
.telecharger__aide { margin: 0; font-size: 14px; color: var(--texte-3); }
.telecharger__code { margin: 0; font-size: 72px; font-weight: 800; line-height: 1; color: var(--ambre); }
.telecharger__lien { margin-top: auto; display: inline-flex; align-items: center; min-height: 44px; font-size: 15px; }
.telecharger h1 + .telecharger__sous-titre + .bouton + h1 { margin-top: 24px; }