/* ============================================================
   Unik — feuille de style partagée
   Tokens miroir du design system Swift de l'app
   ============================================================ */
:root{
  --accent:#FF8455; --accent-ink:#C4501F;
  --bg:#F2F2F7; --card:#FFF; --ink:#111113; --ink-2:#6B6B70; --ink-3:#9A9AA0;
  --field:#F7F7F9; --line:#E9E9EE;
  --r-card:22px; --r-field:16px; --pad:20px;
  --shadow:0 4px 12px rgba(0,0,0,.05);
  --ease-out-expo:cubic-bezier(.16,1,.3,1);
  --ease-spring:cubic-bezier(.175,.885,.32,1.275);
  --font:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
@media (prefers-color-scheme:dark){
  :root{--bg:#0E0E10; --card:#17171A; --ink:#F5F5F7; --ink-2:#9E9EA6; --ink-3:#6E6E76;
    --field:#1F1F23; --line:#2A2A30; --shadow:0 4px 12px rgba(0,0,0,.4); --accent-ink:#FFA983}
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0; background:var(--bg); color:var(--ink); font-family:var(--font);
  font-size:16px; line-height:1.5; -webkit-font-smoothing:antialiased;
  display:flex; flex-direction:column; min-height:100vh; min-height:100dvh}
[hidden]{display:none!important}
.center{text-align:center}
.sr{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap; border:0}

.wrap{width:100%; max-width:520px; margin:0 auto; padding:48px var(--pad);
  flex:1; display:flex; flex-direction:column; justify-content:center; gap:24px}

/* ---------- reveal ---------- */
.reveal{opacity:0; transform:translateY(14px);
  animation:rise .8s var(--ease-out-expo) forwards; animation-delay:calc(var(--i,0)*70ms)}
@keyframes rise{to{opacity:1; transform:none}}
@media (prefers-reduced-motion:reduce){
  .reveal{animation:none; opacity:1; transform:none} *{transition-duration:.01ms!important}
}

/* ---------- header ---------- */
header{text-align:center}
.mark{display:inline-flex; align-items:center; gap:9px; margin-bottom:26px;
  font-weight:700; font-size:19px; letter-spacing:-.02em; text-decoration:none; color:inherit}
.mark i{width:30px; height:30px; border-radius:9px; display:grid; place-items:center;
  background:var(--accent); color:#fff; font-style:normal; font-size:16px; font-weight:800}
h1{margin:0 0 10px; font-size:clamp(27px,7vw,35px); line-height:1.13;
  letter-spacing:-.03em; font-weight:700}
.sub{margin:0 auto; color:var(--ink-2); font-size:16px; max-width:39ch}
.badge{display:inline-block; margin-bottom:16px; padding:5px 12px; border-radius:999px;
  background:color-mix(in srgb,var(--accent) 14%,transparent);
  color:var(--accent-ink); font-size:12.5px; font-weight:600}

.card{background:var(--card); border-radius:var(--r-card); box-shadow:var(--shadow); padding:var(--pad)}

/* ---------- segmented ---------- */
.seg{display:grid; grid-template-columns:1fr 1fr; gap:4px; padding:4px;
  background:var(--field); border-radius:999px}
.seg button{appearance:none; border:0; cursor:pointer; font:inherit; font-weight:600;
  font-size:14.5px; padding:11px 8px; border-radius:999px; background:transparent;
  color:var(--ink-2); transition:background .35s var(--ease-out-expo), color .25s}
.seg button[aria-selected=true]{background:var(--card); color:var(--ink);
  box-shadow:0 1px 4px rgba(0,0,0,.08)}

/* ---------- fields ---------- */
.row{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.f{margin-bottom:10px}
label{display:block; font-size:12.5px; font-weight:600; color:var(--ink-2); margin:0 0 6px 2px}
label em{font-style:normal; color:var(--ink-3); font-weight:500}
input[type=text],input[type=email],input[type=tel]{width:100%; font:inherit; font-size:16px;
  color:var(--ink); background:var(--field); border:1.5px solid transparent;
  border-radius:var(--r-field); padding:13px 14px; outline:none;
  transition:border-color .25s, background .25s}
input:focus{border-color:var(--accent); background:var(--card)}
input::placeholder{color:var(--ink-3)}
input[aria-invalid=true]{border-color:#E5484D}
.hint{font-size:12px; color:var(--ink-3); margin:6px 0 0 2px; line-height:1.45}
.hint b{color:var(--ink-2)}
.fix{background:none; border:0; padding:0; font:inherit; font-size:12px; cursor:pointer;
  color:var(--accent-ink); font-weight:600; text-decoration:underline; text-underline-offset:2px}

/* ---------- checkbox ---------- */
.check{display:flex; gap:11px; align-items:flex-start; margin:16px 0 4px;
  font-size:13.5px; color:var(--ink-2); line-height:1.45; cursor:pointer}
.check input{appearance:none; flex:0 0 auto; width:21px; height:21px; margin:0;
  border:1.5px solid var(--line); border-radius:7px; background:var(--field);
  cursor:pointer; position:relative; transition:background .2s, border-color .2s}
.check input:checked{background:var(--accent); border-color:var(--accent)}
.check input:checked::after{content:""; position:absolute; inset:0;
  background:no-repeat center/12px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8.5l3.2 3.2L13 5'/%3E%3C/svg%3E")}

/* ---------- buttons ---------- */
.btn{width:100%; appearance:none; border:0; cursor:pointer; font:inherit; font-size:16px;
  font-weight:600; color:var(--card); background:var(--ink); border-radius:999px; padding:16px;
  transition:transform .5s var(--ease-spring), opacity .25s}
.btn:hover:not(:disabled){transform:scale(1.015)}
.btn:active:not(:disabled){transform:scale(.985)}
.btn:disabled{opacity:.5; cursor:default}
.btn.busy{color:transparent; position:relative}
.btn.busy::after{content:""; position:absolute; inset:0; margin:auto; width:18px; height:18px;
  border:2px solid color-mix(in srgb, var(--card) 35%, transparent);
  border-top-color:var(--card); border-radius:50%;
  animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

.oauth{display:grid; gap:10px}
.oauth button{display:flex; align-items:center; justify-content:center; gap:10px;
  width:100%; appearance:none; cursor:pointer; font:inherit; font-size:16px; font-weight:600;
  border-radius:999px; padding:16px; border:1.5px solid var(--line); background:var(--card);
  color:var(--ink); transition:transform .5s var(--ease-spring)}
.oauth button:hover{transform:scale(1.015)}
.oauth button:active{transform:scale(.985)}
.oauth svg{width:19px; height:19px; flex:0 0 auto}
.oauth .apple{background:var(--ink); color:var(--card); border-color:var(--ink)}
.oauth .apple svg{fill:var(--card)}

.link{background:none; border:0; padding:0; font:inherit; font-size:13.5px; cursor:pointer;
  color:var(--ink-2); text-decoration:underline; text-underline-offset:2px}
.link:hover{color:var(--ink)}

.sep{display:flex; align-items:center; gap:12px; margin:18px 0;
  color:var(--ink-3); font-size:12.5px; font-weight:600}
.sep::before,.sep::after{content:""; height:1px; flex:1; background:var(--line)}

/* ---------- alert ---------- */
.alert{display:none; margin-top:14px; padding:12px 14px; border-radius:14px;
  font-size:13.5px; line-height:1.45;
  background:color-mix(in srgb,#E5484D 12%,transparent); color:#C32C31}
.alert.on{display:block}
.alert.info{background:color-mix(in srgb,var(--accent) 13%,transparent); color:var(--accent-ink)}
@media (prefers-color-scheme:dark){.alert{color:#FF9AA0}}

/* ---------- tick / spinner ---------- */
.tick{width:58px; height:58px; margin:2px auto 18px; border-radius:50%;
  background:color-mix(in srgb,var(--accent) 15%,transparent); display:grid; place-items:center;
  animation:pop .7s var(--ease-spring) both}
@keyframes pop{from{transform:scale(.5); opacity:0}}
.tick svg{width:26px; height:26px; stroke:var(--accent-ink); fill:none;
  stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round}
.spin{width:28px; height:28px; margin:2px auto 20px; border-radius:50%;
  border:2.5px solid var(--line); border-top-color:var(--accent); animation:spin .7s linear infinite}

/* ---------- steps ---------- */
.steps{list-style:none; margin:0; padding:0; display:grid; gap:14px}
.steps li{display:flex; gap:13px; align-items:flex-start; font-size:14.5px;
  color:var(--ink-2); line-height:1.45}
.steps b{display:grid; place-items:center; flex:0 0 auto; width:25px; height:25px;
  border-radius:8px; background:var(--field); color:var(--ink); font-size:12.5px; font-weight:700}
.steps span{color:var(--ink); font-weight:600}

/* ---------- footer ---------- */
footer{padding:28px var(--pad) 34px; text-align:center; font-size:12.5px;
  color:var(--ink-3); line-height:1.7}
footer a{color:var(--ink-2); text-decoration:none; border-bottom:1px solid var(--line)}
footer a:hover{color:var(--ink)}
footer nav{margin-bottom:8px; display:flex; gap:6px; justify-content:center; flex-wrap:wrap}
footer nav span{opacity:.4}

/* ============================================================
   Pages de texte long (mentions légales, confidentialité)
   ============================================================ */
.doc{max-width:680px}
.doc .card{padding:28px 24px}
.doc h1{font-size:clamp(25px,6vw,31px); margin-bottom:6px}
.doc .meta{color:var(--ink-3); font-size:13px; margin:0}
.doc h2{font-size:17px; letter-spacing:-.01em; margin:32px 0 10px; color:var(--ink)}
.doc h2:first-of-type{margin-top:0}
.doc h3{font-size:14.5px; margin:20px 0 6px; color:var(--ink)}
.doc p,.doc li{font-size:14.5px; line-height:1.65; color:var(--ink-2); margin:0 0 12px}
.doc ul{margin:0 0 12px; padding-left:20px}
.doc li{margin-bottom:6px}
.doc strong{color:var(--ink); font-weight:600}
.doc a{color:var(--ink); text-decoration:none; border-bottom:1px solid var(--line)}
.doc a:hover{border-color:var(--accent)}
/* Le logotype est un lien mais pas un lien de texte : pas de soulignement.
   Retour visuel par une légère mise à l'échelle. */
.mark{transition:transform .45s var(--ease-spring)}
.mark:hover{transform:scale(1.035)}
.doc a.mark{border-bottom:0}
.doc a.mark:hover{border-color:transparent}
.doc table{width:100%; border-collapse:collapse; margin:0 0 14px; font-size:13.5px}
.doc th,.doc td{text-align:left; padding:9px 10px; border-bottom:1px solid var(--line);
  color:var(--ink-2); vertical-align:top}
.doc th{color:var(--ink); font-weight:600; font-size:12.5px}
.doc tr:last-child td{border-bottom:0}
.doc .tw{overflow-x:auto; -webkit-overflow-scrolling:touch}
.doc .note{background:var(--field); border-radius:14px; padding:14px 16px; margin:0 0 14px}
.doc .note p:last-child{margin-bottom:0}
.doc .back{display:inline-block; margin-top:8px; font-size:13.5px; color:var(--ink-2);
  text-decoration:none; border-bottom:1px solid var(--line)}

/* ============================================================
   Retour au toucher — iOS
   ------------------------------------------------------------
   Safari iOS pose un voile gris translucide sur tout élément
   qu'il estime cliquable, au moment du contact. Sur le logotype
   ça produisait un rectangle gris peu élégant, d'autant plus
   visible qu'il ne suit pas la forme du dessin mais sa boîte.

   On le supprime : le retour visuel est déjà assuré par les
   états :active (mise à l'échelle des boutons) et par l'animation
   du logo elle-même. On coupe aussi le menu contextuel du appui
   long et la sélection de texte sur le logotype, qui n'ont pas
   de sens sur une image.
   ============================================================ */
a, button, summary, label, input, .mark, [role="tab"]{
  -webkit-tap-highlight-color: transparent;
}
.mark{
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}