/* Murph : palette et typographie de la page de vente, sur une seule colonne d'affichage. Clair seulement, par choix. */
:root {
  --canvas: #f5f5f5;
  --text: #111111;
  --ink: #111111;
  --paper: #f5f5f5;
  --coral: #eb605a;
  --plum: #481268;
  --violet: #584e97;
  --wash: #e8dbf2;
  --rule: #cccccc;
  --mute: #444444;
  --card: #ffffff;
  --danger: #a3211b;
  --f-display: "Anton", "Arial Narrow", Impact, sans-serif;
  --f-body: "Hanken Grotesk", Arial, ui-sans-serif, system-ui, sans-serif;
  color-scheme: light;
}

* { box-sizing: border-box; }
html { background: var(--canvas); -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--canvas); color: var(--text); font: 400 18px/1.4 var(--f-body); -webkit-font-smoothing: antialiased; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
a { color: var(--text); }

.page { max-width: 1440px; margin: 0 auto; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }

/* Les deux cercles : l'accueil à gauche, la langue à droite. */
.dot { position: absolute; top: calc(env(safe-area-inset-top, 0px) + 20px); z-index: 30; width: 50px; height: 50px; border-radius: 9999px; background: var(--coral); color: var(--ink); display: grid; place-items: center; text-decoration: none; }
.dot-l { left: calc(max(16px, env(safe-area-inset-left, 0px)) + 4px); }
.dot-r { right: calc(max(16px, env(safe-area-inset-right, 0px)) + 4px); }
.dot:hover { background: var(--plum); color: var(--paper); }
.dot:focus-visible, .btn:focus-visible { outline: 3px solid var(--violet); outline-offset: 3px; }
.mark { font: 400 27px/1 var(--f-display); transform: translateY(1px); }
.lang { font: 700 14px/1 var(--f-body); letter-spacing: .04em; }

/* Typographie */
.display { margin: 0; font-family: var(--f-display); font-weight: 400; font-synthesis: none; text-transform: uppercase; line-height: 1.02; letter-spacing: .005em; color: var(--coral); text-wrap: balance; max-width: 100%; overflow-wrap: break-word; }
/* Le titre d'accueil suit aussi la hauteur : le nom et le bouton doivent paraître sans défiler sur un portable. */
.d-xl { font-size: clamp(60px, min(15vw, 15vh), 230px); }
.d-lg { font-size: clamp(48px, 10vw, 130px); }
.d-lg.alt { font-size: clamp(48px, min(10vw, 11vh), 130px); }
.d-md { font-size: clamp(36px, 5.2vw, 72px); }
.alt { color: var(--violet); }
.label { margin: 0; font: 500 13px/1.2 var(--f-body); text-transform: uppercase; letter-spacing: .1em; color: var(--plum); }
.body { margin: 0; max-width: 60ch; font-size: clamp(17px, 1.5vw, 20px); line-height: 1.45; }
.note { margin: 0; max-width: 60ch; font-size: 14px; line-height: 1.4; color: var(--mute); }
.body a, .note a { font-weight: 500; text-underline-offset: 3px; text-decoration-color: var(--coral); }

/* Sections */
.screen { display: flex; flex-direction: column; align-items: flex-start; gap: clamp(22px, 2.6vw, 36px); padding-block: clamp(70px, 9vw, 130px); }
.hero { padding-top: calc(env(safe-area-inset-top, 0px) + clamp(110px, 12vw, 160px)); }
.stack { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; min-width: 0; }
@media (min-width: 900px) { .offset { margin-left: 34%; } }
.pills { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.pills li { font: 500 15px/1 var(--f-body); color: var(--plum); background: var(--wash); border-radius: 9999px; padding: 10px 17px; }

.btn { display: inline-block; font: 700 17px/1 var(--f-body); color: var(--paper); background: var(--plum); border: 0; border-radius: 10px; padding: 17px 22px; cursor: pointer; text-decoration: none; }
.btn:hover { background: var(--coral); color: var(--ink); }
.btn[disabled] { opacity: .6; cursor: progress; }

/* Formulaire */
.form { display: flex; flex-direction: column; gap: 22px; width: 100%; max-width: 640px; }
.champ { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.champ[hidden] { display: none; }
.champ > label { font-weight: 700; font-size: 16px; }
.opt { font-weight: 400; color: var(--mute); }
.champ input, .champ select, .champ textarea { width: 100%; min-height: 50px; font: 400 17px/1.35 var(--f-body); color: var(--text); background: var(--card); border: 1px solid #767676; border-radius: 10px; padding: 12px 14px; }
.champ textarea { min-height: 120px; resize: vertical; }
.champ input:focus-visible, .champ select:focus-visible, .champ textarea:focus-visible, .consent input:focus-visible { outline: 3px solid var(--violet); outline-offset: 1px; }
.consent { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 12px; align-items: start; font-size: 16px; line-height: 1.4; }
.consent input { width: 22px; height: 22px; margin: 1px 0 0; accent-color: var(--plum); }
.consent a { font-weight: 500; text-underline-offset: 3px; text-decoration-color: var(--coral); }
.piege { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.erreur { margin: 0; padding: 14px 16px; border-left: 4px solid var(--danger); background: var(--card); color: var(--danger); font-weight: 500; }
.erreur:empty { display: none; }

/* Texte long : confidentialité */
.texte { display: flex; flex-direction: column; gap: 14px; max-width: 68ch; }
.texte h2 { margin: 26px 0 0; font: 700 21px/1.25 var(--f-body); color: var(--plum); }
.texte p, .texte ul { margin: 0; font-size: 17px; line-height: 1.5; }
.texte ul { padding-left: 22px; }
.texte a { font-weight: 500; text-underline-offset: 3px; text-decoration-color: var(--coral); }

.foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 10px 30px; padding-block: 36px 56px; border-top: 1px solid var(--rule); font-size: 14px; color: var(--mute); }
.foot b { font: 400 22px/1 var(--f-display); text-transform: uppercase; color: var(--coral); letter-spacing: .02em; }
.foot a { color: var(--mute); text-underline-offset: 3px; }