/* Niwa, site vitrine.
   Palette et polices reprises de l'application : un seul thème, clair, comme
   elle. Les valeurs viennent de src/constants/theme.ts. */

:root {
  --fond: #F5F1E8;
  --douce: #EDE8DA;
  --claire: #FFFDF7;
  --encre: #26261F;
  --secondaire: #8C8B7E;
  --discrete: #A8A698;
  --lien: #6E7365;
  --filet: #E3DFD2;
  --pointille: #C3BEAC;
  --vert: #5A6B4E;
  --vert-clair: #E5EBD8;
  --vert-sur-clair: #6F7B63;
  --terracotta: #C97B5A;
  --sombre: #26261F;
  --filet-sombre: #3B3B33;
  --largeur: 1080px;
  --largeur-legal: 760px;
  --marge: 24px;
}

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--fond);
  color: var(--encre);
  font-family: 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

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

a { color: var(--vert); text-decoration: none; }
a:hover { color: var(--terracotta); }
:focus-visible { outline: 2px solid var(--vert); outline-offset: 3px; }

h1, h2, h3 {
  margin: 0;
  font-family: 'Newsreader', Georgia, 'Times New Roman', serif;
  font-weight: 400;
  text-wrap: balance;
}

p { margin: 0; text-wrap: pretty; }

.mono {
  font-family: 'IBM Plex Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;
  letter-spacing: .14em;
  font-size: 11px;
  color: var(--discrete);
}

.saut {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--vert);
  color: var(--fond);
  padding: 10px 16px;
  border-radius: 0 0 8px 0;
}
.saut:focus { left: 0; z-index: 10; color: var(--fond); }

/* ------------------------------------------------------------- en-tete */

.entete {
  position: sticky;
  top: 0;
  z-index: 5;
  background: rgba(245, 241, 232, .92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--filet);
}

.entete > div {
  max-width: var(--largeur);
  margin: 0 auto;
  padding: 16px var(--marge);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.repere {
  font-family: 'Newsreader', Georgia, serif;
  font-size: 24px;
  color: var(--encre);
  letter-spacing: .01em;
}

.entete nav { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; }
.entete nav a { font-size: 15px; color: var(--lien); }
.entete nav a.bouton { color: var(--fond); }

.bouton {
  display: inline-block;
  padding: 10px 18px;
  border-radius: 22px;
  background: var(--vert);
  color: var(--fond);
  font-size: 15px;
}
.bouton:hover { background: #4C5C42; color: var(--fond); }

/* ------------------------------------------------------------ sections */

.section { border-top: 1px solid var(--filet); }
.claire { background: var(--claire); }

.dedans {
  max-width: var(--largeur);
  margin: 0 auto;
  padding: clamp(48px, 6vw, 84px) var(--marge);
  display: flex;
  flex-direction: column;
  gap: clamp(32px, 4vw, 52px);
}

.intro { display: flex; flex-direction: column; gap: 12px; max-width: 46em; }
.intro h2 { font-size: clamp(28px, 3.4vw, 40px); line-height: 1.15; }

/* --------------------------------------------------------------- accroche */

.accroche {
  max-width: var(--largeur);
  margin: 0 auto;
  padding: clamp(40px, 5vw, 72px) var(--marge);
  display: flex;
  gap: clamp(32px, 5vw, 72px);
  flex-wrap: wrap;
  align-items: flex-start;
}

.accroche .texte {
  flex: 1 1 420px;
  min-width: 300px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.kicker { display: flex; align-items: center; gap: 9px; }
.kicker .point { width: 6px; height: 6px; border-radius: 50%; background: var(--terracotta); }
.kicker .mot {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: .14em;
  color: var(--terracotta);
}

.accroche h1 {
  font-size: clamp(38px, 5.4vw, 62px);
  line-height: 1.06;
  letter-spacing: -.01em;
}

.accroche .chapeau {
  font-size: clamp(16px, 1.4vw, 18px);
  line-height: 1.6;
  max-width: 34em;
}

.conditions { display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 0; }
.conditions li {
  list-style: none;
  padding: 6px 11px;
  border-radius: 6px;
  background: var(--douce);
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: .08em;
  color: var(--lien);
}

.actions { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.actions .discret { font-size: 15px; color: var(--lien); }

/* ------------------------------------------------------------- la capture */

.capture { flex: 0 0 auto; display: flex; flex-direction: column; gap: 12px; align-items: center; margin: 0; }

.coque {
  width: 300px;
  max-width: 100%;
  border-radius: 38px;
  background: var(--sombre);
  padding: 10px;
}

/* Le cadre garde la proportion d'un téléphone, 9:19,5 : une capture prise
   sur l'appareil s'y pose sans se déformer. */
.ecran {
  aspect-ratio: 9 / 19.5;
  border-radius: 30px;
  background: var(--fond);
  overflow: hidden;
}

.ecran img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

/* Tant que le fichier n'est pas posé, un emplacement plutôt qu'une image
   cassée. La classe est ajoutée par le onerror de l'image, et `--fichier`
   nomme ce qu'on attend : sans lui, trois cadres vides se ressemblent. */
.ecran.vide {
  border: 1px dashed var(--pointille);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 24px;
}
.ecran.vide::after {
  content: "CAPTURE À POSER ICI\A" var(--fichier, "");
  white-space: pre-line;
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: .1em;
  line-height: 2;
  color: var(--discrete);
  overflow-wrap: anywhere;
}

/* ------------------------------------------------ une section et son écran */

/* Le même dispositif que l'accroche : le contenu à gauche, un téléphone à
   droite. C'est ce qui donne à la page ses captures, plutôt qu'une galerie
   qui les regrouperait toutes loin de ce qu'elles illustrent.
   `align-items: flex-start` retient le cadre en haut de la section, sinon il
   se centre sur une colonne parfois deux fois plus haute que lui. */
.avec-capture {
  display: flex;
  align-items: flex-start;
  gap: clamp(28px, 4vw, 56px);
  flex-wrap: wrap;
}

.avec-capture > .blocs,
.avec-capture > .colonne { flex: 1 1 440px; min-width: 0; }

.avec-capture > .colonne {
  display: flex;
  flex-direction: column;
  gap: clamp(28px, 4vw, 44px);
}

.avec-capture > .capture { flex: 0 0 auto; }

.avec-capture .coque { width: 268px; }

/* Sous 900 px le téléphone passe à la ligne : centré, il y a meilleure
   allure qu'aligné à gauche sous une colonne pleine largeur. */
@media (max-width: 899px) {
  .avec-capture { justify-content: center; }
}

.legende { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 10px; letter-spacing: .1em; color: var(--discrete); }

/* -------------------------------------------------------------- fonctions */

.blocs { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 2px; }
.blocs article {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 26px 26px 30px;
  border-top: 1px solid var(--filet);
}
.blocs h3 { font-size: 24px; line-height: 1.2; }
.blocs p { font-size: 15px; line-height: 1.6; }
.blocs .pied-bloc { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 10px; letter-spacing: .1em; color: var(--discrete); padding-top: 2px; }
.blocs .mono { font-size: 10px; }
.blocs .mono.terra { color: var(--terracotta); }

/* ----------------------------------------------------------------- tarifs */

.cartes { display: flex; gap: 20px; flex-wrap: wrap; align-items: stretch; }
.carte {
  flex: 1 1 300px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 28px;
  border-radius: 20px;
  background: var(--douce);
}
.carte.premium { background: var(--vert-clair); box-shadow: inset 0 0 0 1.5px var(--vert); }
.carte .tete { display: flex; flex-direction: column; gap: 4px; }
.carte .tete .mono { font-size: 10px; color: var(--secondaire); }
.carte.premium .tete .mono { color: var(--vert); }
.carte .prix { font-family: 'Newsreader', Georgia, serif; font-size: 34px; line-height: 1; }
.carte .sous { font-size: 14px; color: var(--vert-sur-clair); }
.carte dl { margin: 0; display: flex; flex-direction: column; }
.carte .rangee {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 11px 0;
  border-top: 1px solid var(--filet);
}
.carte dt { flex: 1; font-size: 15px; }
.carte dd {
  margin: 0;
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: .06em;
  color: var(--secondaire);
}
.carte.premium dd { color: var(--vert-sur-clair); }
.carte .note { font-size: 14px; line-height: 1.55; }

.pastilles { display: flex; flex-wrap: wrap; gap: 10px; padding: 0; margin: 0; }
.pastilles li {
  list-style: none;
  padding: 9px 15px;
  border-radius: 18px;
  box-shadow: inset 0 0 0 1px var(--filet);
  font-size: 14px;
  color: var(--lien);
}

/* ---------------------------------------------------------- telechargement */

.telecharger {
  max-width: var(--largeur);
  margin: 0 auto;
  padding: clamp(48px, 6vw, 84px) var(--marge);
  display: flex;
  gap: clamp(28px, 5vw, 64px);
  flex-wrap: wrap;
  align-items: flex-start;
}
.telecharger .gauche { flex: 1 1 340px; display: flex; flex-direction: column; gap: 14px; }
.telecharger .gauche h2 { font-size: clamp(26px, 3vw, 36px); line-height: 1.15; }
.telecharger .droite { flex: 1 1 320px; display: flex; flex-direction: column; gap: 14px; }

.emplacements { display: flex; gap: 12px; flex-wrap: wrap; }
/* La zone libre qu'impose Google autour de son badge, le quart de sa hauteur. */
.badge { display: inline-block; padding: 20px 20px 20px 0; }
.badge img { display: block; height: auto; }
.emplacement {
  flex: 1 1 150px;
  min-height: 56px;
  border-radius: 12px;
  border: 1px dashed var(--pointille);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 10px;
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 9px;
  letter-spacing: .1em;
  color: var(--discrete);
  line-height: 1.5;
}

.qr {
  display: flex;
  gap: 16px;
  align-items: center;
  padding: 18px;
  border-radius: 16px;
  background: var(--douce);
}
/* Le QR occupe la place du carré en pointillés : même taille, même fond, mais
   le pointillé part puisqu'il ne marque plus un emplacement vide. */
.qr img.carre { border: 0; padding: 8px; }
.qr .carre {
  width: 96px;
  height: 96px;
  flex: 0 0 auto;
  border-radius: 8px;
  background: var(--claire);
  border: 1px dashed var(--pointille);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: .1em;
  color: var(--discrete);
  text-align: center;
}
.qr h3 { font-size: 18px; }
.qr p { font-size: 14px; line-height: 1.5; color: var(--lien); }

/* Sur un telephone, la personne tient deja l'appareil : le code n'a rien a
   lui apprendre. */
@media (max-width: 767px) {
  .qr { display: none; }
}

/* ------------------------------------------------------------------ auteur */

.auteur { display: flex; flex-direction: column; gap: 18px; max-width: 42em; }
.auteur .grande { font-family: 'Newsreader', Georgia, serif; font-size: clamp(20px, 2.4vw, 27px); line-height: 1.35; }
.auteur .petite { font-size: 16px; color: var(--lien); }

/* --------------------------------------------------------------- pied */

.pied { background: var(--sombre); color: var(--fond); }
.pied a { color: #C9C6B8; font-size: 15px; }
.pied a:hover { color: var(--terracotta); }
.pied .haut { display: flex; gap: clamp(28px, 5vw, 72px); flex-wrap: wrap; justify-content: space-between; }
.pied .mot-pied { display: flex; flex-direction: column; gap: 10px; max-width: 28em; }
.pied .mot-pied .repere { color: var(--fond); }
.pied .mot-pied p { font-size: 15px; color: #A9A79A; }
.pied .colonnes { display: flex; gap: clamp(28px, 5vw, 64px); flex-wrap: wrap; }
.pied .colonne { display: flex; flex-direction: column; gap: 9px; }
.pied .colonne .mono { color: #7C7A6E; }
.pied .barre {
  border-top: 1px solid var(--filet-sombre);
  padding-top: 20px;
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
}
.pied .barre .mono { color: #7C7A6E; font-size: 10px; letter-spacing: .1em; }

/* ------------------------------------------------------ pages legales */

.legal .dedans { max-width: var(--largeur-legal); }
.legal .entete > div { max-width: var(--largeur-legal); }

.titre-legal { display: flex; flex-direction: column; gap: 12px; }
.titre-legal h1 { font-size: clamp(32px, 4.6vw, 46px); line-height: 1.1; }
.titre-legal .maj { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 10px; letter-spacing: .12em; color: var(--discrete); }

.provisoire {
  padding: 14px 16px;
  border-radius: 12px;
  background: var(--douce);
  box-shadow: inset 0 0 0 1px var(--pointille);
  font-size: 14px;
  line-height: 1.5;
  color: var(--lien);
}

.sommaire {
  padding: 20px 22px;
  border-radius: 16px;
  background: var(--douce);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.sommaire ol { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 7px; }
.sommaire a { font-size: 15px; }

.sections { display: flex; flex-direction: column; gap: 34px; }
.sections > section { border-top: 1px solid var(--filet); padding-top: 22px; }
.sections h2 { font-size: clamp(22px, 2.6vw, 27px); line-height: 1.25; margin-bottom: 10px; }
.sections p { font-size: 16px; line-height: 1.65; margin-bottom: 12px; }
.sections p:last-child { margin-bottom: 0; }
.sections ul { margin: 0 0 12px; padding-left: 20px; }
.sections li { font-size: 16px; line-height: 1.65; margin-bottom: 6px; }

.exigence {
  background: var(--claire);
  box-shadow: inset 0 0 0 1.5px var(--vert);
  border-radius: 18px;
  padding: 26px;
  border-top: 0 !important;
}
.exigence .mono { color: var(--vert); }

.marches { display: flex; flex-direction: column; gap: 14px; margin: 18px 0; padding: 0; list-style: none; counter-reset: marche; }
.marches li { display: flex; gap: 14px; align-items: flex-start; font-size: 16px; line-height: 1.55; margin: 0; }
.marches li::before {
  counter-increment: marche;
  content: "0" counter(marche);
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: .1em;
  color: var(--vert);
  padding-top: 5px;
  flex: 0 0 auto;
}

.rappel-legal { display: flex; flex-direction: column; margin: 0; }
.rappel-legal .rangee { display: flex; gap: 16px; flex-wrap: wrap; padding: 13px 0; border-top: 1px solid var(--filet); }
.rappel-legal dt {
  flex: 0 0 210px;
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: .1em;
  color: var(--secondaire);
  padding-top: 4px;
}
.rappel-legal dd { margin: 0; flex: 1 1 240px; font-size: 16px; line-height: 1.55; }
.rappel-legal dd.attente { color: var(--discrete); }

.faits { display: flex; flex-wrap: wrap; gap: 2px; background: var(--filet); border-radius: 14px; overflow: hidden; }
.faits div { flex: 1 1 160px; background: var(--claire); padding: 16px 18px; display: flex; flex-direction: column; gap: 5px; }
.faits .mono { font-size: 10px; }
.faits .valeur { font-family: 'Newsreader', Georgia, serif; font-size: 20px; }

.retour { font-size: 15px; }