:root {
  --papier: #fbf6ea;
  --sable: #f1e3bd;
  --crau: #cdbb88;
  --encre: #2d2a24;
  --encre-douce: #5c5345;
  --ocre: #7a5220;
  --or: #f2c14e;
  --nuit: #1f2a44;
  --lune: #e9e3d5;
  --alpage: #3f6b2e;
  --neige: #eef2f4;
  --cagnard: #d9822b;
  --titre: ui-rounded, "SF Pro Rounded", "Nunito", "Arial Rounded MT Bold", system-ui, sans-serif;
  --plume: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--papier); color: var(--encre); font: 17px/1.55 system-ui, -apple-system, "Segoe UI", sans-serif; }
img, video { display: block; max-width: 100%; height: auto; }
a { color: var(--ocre); }
h1, h2, h3 { font-family: var(--titre); font-weight: 900; line-height: 1.1; letter-spacing: -0.01em; }
.large { max-width: 1120px; margin: 0 auto; padding: 0 16px; }
.etroit { max-width: 720px; margin: 0 auto; padding: 32px 16px 64px; }
.etroit h1 { font-size: 34px; } .etroit h2 { font-size: 22px; margin-top: 32px; }
.petit { font-size: 14px; color: var(--encre-douce); }
hr { border: 0; border-top: 2px dashed var(--crau); margin: 40px 0; }

/* En-tête : la sonnaille et le nom, comme sur l'icône du jeu. */
.entete { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; max-width: 1120px; margin: 0 auto; }
.marque { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; color: var(--encre); font: 900 23px/1 var(--titre); }
.marque .cloche { width: 28px; height: 34px; }
.entete nav { display: flex; gap: 14px; font-weight: 700; font-size: 15px; }
.entete nav a { color: var(--encre); text-decoration: none; }

/* Premier écran : le ciel de la Crau, la draille en diagonale, l'estive à l'horizon. */
.heros { position: relative; overflow: hidden; background: linear-gradient(118deg, transparent 58%, rgba(251, 246, 234, 0.35) 58% 66%, transparent 66%), linear-gradient(#f3e7c6, #d8c590 70%, #c9b37a); padding-bottom: 72px; }
.heros .large { display: grid; gap: 22px; align-items: center; padding-top: 12px; grid-template-areas: "haut" "telephone" "bas"; }
.heros .haut { grid-area: haut; } .heros .bas { grid-area: bas; } .heros .telephone { grid-area: telephone; }
.surtitre { display: inline-block; margin: 0; font: 800 13px/1 var(--titre); letter-spacing: 0.08em; text-transform: uppercase; background: var(--encre); color: var(--sable); padding: 7px 10px; border-radius: 99px; }
.heros h1 { font-size: clamp(48px, 13vw, 96px); margin: 12px 0 8px; letter-spacing: -0.03em; }
.accroche { font: italic 600 clamp(19px, 4.6vw, 26px)/1.35 var(--plume); margin: 0; max-width: 30em; }
.bas .appel { margin-top: 4px; }
.appel { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }
.bientot { display: inline-flex; flex-direction: column; background: var(--encre); color: var(--papier); border-radius: 14px; padding: 10px 18px; text-decoration: none; box-shadow: 0 4px 0 #000; }
.bientot strong { font: 900 19px/1.15 var(--titre); }
.bientot span { font-size: 13px; color: var(--sable); }
.badge img { height: 54px; width: auto; }
.prix-court { margin: 0; font-weight: 700; }
.reassurance { display: flex; flex-wrap: wrap; gap: 8px; margin: 20px 0 0; padding: 0; list-style: none; font-size: 14px; font-weight: 700; }
.reassurance li { background: rgba(251, 246, 234, 0.75); border-radius: 99px; padding: 5px 11px; }
.horizon { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 64px; }

/* Le téléphone : l'aperçu vidéo du vrai jeu, cadré comme dans les captures de la fiche. */
.telephone { justify-self: center; width: min(64vw, 260px); border: 9px solid var(--encre); border-radius: 38px; overflow: hidden; background: var(--crau); box-shadow: 0 24px 60px rgba(45, 42, 36, 0.35); transform: rotate(2deg); }
.telephone video { width: 100%; aspect-ratio: 432 / 936; object-fit: cover; }

/* Les arguments, chacun dans le paysage de son moment du jeu. */
.argument { padding: 56px 0; }
.argument .large { display: grid; gap: 28px; align-items: center; }
.argument h2 { font-size: clamp(30px, 7vw, 46px); margin: 0 0 12px; }
.argument p { margin: 0 0 12px; font-size: 18px; max-width: 34em; }
.argument .ecran { justify-self: center; width: min(70vw, 270px); border: 8px solid var(--encre); border-radius: 32px; overflow: hidden; box-shadow: 0 18px 44px rgba(45, 42, 36, 0.3); }
.argument .numero { font: 900 15px/1 var(--titre); color: var(--ocre); letter-spacing: 0.08em; text-transform: uppercase; }
.crau { background: var(--sable); }
.cartes { background: linear-gradient(#fff4d1, var(--or)); }
.nuit { background: var(--nuit); color: var(--lune); }
.nuit .numero { color: var(--or); }
.nuit .ecran { border-color: #0e1424; }
.haute { background: linear-gradient(var(--neige), #cfdde4); }
.haute .numero { color: var(--alpage); }

/* La galerie : les captures de la fiche, à faire défiler du pouce. */
.galerie { padding: 56px 0; }
.galerie h2 { font-size: clamp(28px, 6vw, 40px); margin: 0 0 18px; }
.defile { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px 16px 18px; margin: 0 -16px; }
.defile figure { flex: 0 0 min(62vw, 240px); margin: 0; scroll-snap-align: center; }
.defile img { border: 6px solid var(--encre); border-radius: 26px; }
.defile figcaption { margin-top: 8px; font: 800 15px/1.3 var(--titre); text-align: center; }

/* Le prix, sans détour. */
.prix { padding: 56px 0; background: var(--encre); color: var(--papier); }
.prix h2 { font-size: clamp(28px, 6vw, 40px); margin: 0 0 22px; }
.formules { display: grid; gap: 16px; }
.formule { border-radius: 20px; padding: 22px; background: #3b372f; }
.formule.achat { background: var(--or); color: var(--encre); }
.formule h3 { font-size: 24px; margin: 0 0 6px; }
.formule .montant { font: 900 34px/1 var(--titre); margin: 6px 0 12px; }
.formule ul { margin: 0; padding-left: 20px; }
.prix .note { margin: 20px 0 0; color: var(--lune); }
.patrimoine { padding: 40px 0; font: italic 600 20px/1.45 var(--plume); text-align: center; }
.patrimoine p { max-width: 36em; margin: 0 auto; }

.english { padding: 48px 0; background: var(--sable); }
.english h2 { font-size: clamp(26px, 5.5vw, 36px); margin: 0 0 12px; }
.english ul { padding-left: 20px; }

.pied { background: var(--encre); color: var(--lune); padding: 28px 0 40px; font-size: 15px; }
.pied a { color: var(--or); }
.pied nav { display: flex; flex-wrap: wrap; gap: 10px 18px; font-weight: 700; margin-bottom: 10px; }

@media (min-width: 820px) {
  .heros .large { grid-template-columns: 1.15fr 0.85fr; grid-template-areas: "haut telephone" "bas telephone"; align-items: end; row-gap: 26px; padding-top: 28px; }
  .heros .bas { align-self: start; }
  .telephone { width: 320px; }
  .argument .large { grid-template-columns: 1fr 1fr; }
  .argument.inverse .ecran { order: -1; }
  .formules { grid-template-columns: 1fr 1fr; }
  .defile { overflow: visible; display: grid; grid-template-columns: repeat(6, 1fr); padding: 4px 0 0; margin: 0; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }