/* 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 { transition: background-color .3s ease, color .3s ease, transform .3s ease; }
.dot:hover { background: var(--plum); color: var(--paper); transform: scale(1.06); }
.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-flex; align-items: center; gap: 10px; 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; transition: background-color .3s ease, color .3s ease, box-shadow .3s ease, opacity .3s ease, transform .3s ease; }
.btn::after { content: "\2192"; transition: transform .3s ease; }
.btn:hover { background: var(--coral); color: var(--ink); box-shadow: 0 10px 24px -12px rgba(235, 96, 90, .9); }
.btn:hover::after { transform: translateX(4px); }
.btn:active { transform: translateY(1px); }
.btn[disabled] { opacity: .6; cursor: progress; }
.btn[disabled]::after { opacity: 0; }

/* Le bouton qui suit le visiteur entre l'accroche et l'appel final */
.btn-flottant { position: fixed; z-index: 40; right: max(20px, env(safe-area-inset-right, 0px)); bottom: max(20px, env(safe-area-inset-bottom, 0px)); padding: 14px 18px; font-size: 15px; opacity: 0; visibility: hidden; transform: translateY(10px); box-shadow: 0 14px 30px -14px rgba(72, 18, 104, .7); transition: background-color .3s ease, color .3s ease, opacity .35s ease, transform .35s ease, visibility .35s; }
.btn-flottant.montre { opacity: 1; visibility: visible; transform: none; }

/* La loi de Murphy : les lettres qui lâchent */
.mot { white-space: nowrap; }
.l { display: inline-block; position: relative; }
.l::before { content: attr(data-c); position: absolute; left: 0; top: 0; color: var(--wash); pointer-events: none; }
.l-i { display: inline-block; position: relative; z-index: 5; pointer-events: none; }
.l-i.retour { transition: transform .7s cubic-bezier(.2, .8, .2, 1); }
html, body { overflow-x: clip; }
@media (max-width: 699px) { .clou { width: 8px; height: 8px; top: 5px; box-shadow: inset 0 0 0 2px rgba(17, 17, 17, .35); } .clou-g { left: 5px; } .clou-d { right: 5px; } }

/* Les maquettes accrochées : deux clous, l'un lâche et l'autre tient */
.accroche { position: relative; min-width: 0; }
.accroche[data-coin="gauche"] { transform-origin: 0 0; }
.accroche[data-coin="droite"] { transform-origin: 100% 0; }
.clou { position: absolute; top: 9px; width: 12px; height: 12px; border-radius: 50%; background: var(--coral); box-shadow: inset 0 0 0 3px rgba(17, 17, 17, .35), 0 2px 3px rgba(17, 17, 17, .35); z-index: 2; transition: transform .8s cubic-bezier(.5, 0, .9, .4), opacity .8s ease; }
.clou-g { left: 9px; }
.clou-d { right: 9px; }
.accroche.lachee[data-coin="gauche"] .clou-d, .accroche.lachee[data-coin="droite"] .clou-g { transform: translateY(520px) rotate(180deg); opacity: 0; }

/* L'alerte sur le grand écran */
.signalement { position: absolute; z-index: 3; top: 6.5%; right: 3.5%; width: min(34%, 340px); display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 3px 10px; align-items: center; padding: clamp(7px, 1vw, 14px) clamp(9px, 1.2vw, 16px); background: var(--card); border: 1px solid var(--rule); border-radius: 12px; box-shadow: 0 18px 40px -14px rgba(72, 18, 104, .45); font: 400 clamp(9px, 1vw, 14px)/1.3 var(--f-body); color: var(--text); opacity: 0; visibility: hidden; transform: translateY(-10px); transition: opacity .4s ease, transform .4s ease, visibility .4s; pointer-events: none; }
.signalement.ouvert { opacity: 1; visibility: visible; transform: none; }
.sig-titre { font-weight: 700; }
.sig-msg { grid-column: 1 / -1; color: var(--mute); }
.sig-tag { position: relative; display: inline-grid; font-weight: 700; font-size: .9em; white-space: nowrap; }
.sig-tag span { grid-area: 1 / 1; padding: 3px 9px; border-radius: 9999px; text-align: center; transition: opacity .45s ease; }
.sig-a { color: #a3211b; background: #fde3e1; }
.sig-b { color: #17603a; background: #dcf3e6; opacity: 0; }
.regle .sig-a { opacity: 0; }
.regle .sig-b { opacity: 1; }

/* Aller au contenu */
.evitement { position: absolute; left: 16px; top: -60px; z-index: 50; padding: 10px 14px; background: var(--plum); color: var(--paper); border-radius: 8px; font-weight: 700; transition: top .2s ease; }
.evitement:focus { top: 12px; }
a:focus-visible { outline: 3px solid var(--violet); outline-offset: 3px; border-radius: 3px; }

/* Fondus doux. La classe .anim vient de anim.js : sans elle, tout est visible. */
.anim .screen > *, .anim .rangee > *, .anim .foot, .anim .appareil, .anim .legendes { opacity: 0; transform: translateY(12px); transition: opacity .7s ease-out var(--delai, 0ms), transform .7s ease-out var(--delai, 0ms); }
.anim .screen > .rangees, .anim .screen > .scene-wrap { opacity: 1; transform: none; transition: none; }
.anim .screen > .visible, .anim .rangee > .visible, .anim .foot.visible, .anim .appareil.visible, .anim .legendes.visible { opacity: 1; transform: none; }
@media print { .anim .screen > *, .anim .rangee > *, .anim .foot, .anim .appareil, .anim .legendes { opacity: 1; transform: none; } }

/* Scène : grand écran, tablette et téléphone */
.scene-wrap { margin: clamp(28px, 4vw, 50px) 0 0; width: 100%; display: flex; flex-direction: column; gap: clamp(26px, 3vw, 40px); }
.scene { position: relative; width: 100%; aspect-ratio: 1408 / 830; }
.appareil { position: absolute; background: var(--ink); box-shadow: 0 24px 50px -16px rgba(72, 18, 104, .28); }
.appareil img { display: block; width: 100%; height: auto; }
.ecran { left: 11.6%; top: 0; width: 79.3%; padding: 1.3%; border-radius: 20px; }
.ecran img { border-radius: 6px; }
.ecran::after { content: ""; position: absolute; left: 50%; top: 100%; width: 22%; height: 15%; transform: translateX(-50%); background: linear-gradient(#2b2b2b, #1c1c1c); clip-path: polygon(18% 0, 82% 0, 100% 100%, 0 100%); }
.tablette { left: 0; bottom: 4%; width: 37.8%; padding: 1.1%; border-radius: 26px; z-index: 1; }
.tablette img { border-radius: 12px; }
.telephone { right: 1%; bottom: 0; width: 15.5%; padding: .6%; border-radius: 30px; z-index: 2; }
.telephone img { border-radius: 24px; }
.legendes { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
@media (min-width: 900px) { .legendes { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 30px; } .legendes .note { grid-column: 1 / -1; } }
@media (max-width: 699px) {
  .scene { aspect-ratio: 1 / 1.02; }
  .ecran { left: 0; width: 100%; padding: 1.8%; border-radius: 12px; }
  .ecran img { border-radius: 4px; }
  .tablette { width: 66%; bottom: 0; padding: 1.6%; border-radius: 14px; }
  .tablette img { border-radius: 7px; }
  .telephone { right: 0; width: 30%; padding: 1%; border-radius: 18px; }
  .telephone img { border-radius: 14px; }
}

/* Aperçu : un texte et une interface par rangée */
.d-sm { font-size: clamp(34px, 3.6vw, 52px); }
.rangees { display: flex; flex-direction: column; gap: clamp(54px, 6vw, 80px); width: 100%; padding-top: clamp(12px, 2vw, 30px); }
.rangee { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; }
@media (min-width: 900px) { .rangee { grid-template-columns: minmax(0, 1fr) minmax(0, 2.1fr); gap: 40px; align-items: center; } }
.interface { display: block; width: 100%; height: auto; border: 1px solid var(--rule); border-radius: 12px; background: var(--card); box-shadow: 0 1px 2px rgba(17, 17, 17, .06), 0 18px 40px -18px rgba(72, 18, 104, .18); }

/* 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; }

/* Sur téléphone, l'alerte a besoin de plus de largeur que sur le grand écran */
@media (max-width: 699px) { .signalement { width: 74%; padding: 6px 8px; border-radius: 8px; top: 5%; right: 3%; font-size: 10px; } .sig-tag span { padding: 2px 6px; } }

/* La dernière lettre d'un titre, un peu décrochée */
.detache { display: inline-block; transform-origin: 8% 92%; }
.anim .detache { transform: rotate(9deg); transition: transform .5s ease; }
h1:hover .detache { transform: rotate(16deg); }

/* Les champs réagissent en fondu */
.champ input, .champ select, .champ textarea { transition: border-color .25s ease, box-shadow .25s ease; }
.champ input:hover, .champ select:hover, .champ textarea:hover { border-color: var(--plum); }
.champ input:focus, .champ select:focus, .champ textarea:focus { border-color: var(--plum); box-shadow: 0 0 0 3px var(--wash); }
.consent input { transition: box-shadow .25s ease; }
.erreur { animation: apparait .3s ease; }
@keyframes apparait { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .erreur { animation: none; } html { scroll-behavior: auto; } .btn, .dot, .btn-flottant, .btn::after { transition: none; } }

@media print {
  .btn-flottant, .signalement, .evitement, .dot { display: none; }
  .l-i { transform: none !important; }
  .l::before { content: none; }
  .accroche { rotate: none !important; }
  .clou { display: none; }
}