/* THIASOS · les pages de service, dans la charte v0 (docs/design/2026-10-27-charte-v0.md), tenue par le film « le principe en 30 s ».
   Canevas pale, une carte blanche a ombre douce, une phrase par ecran, le spectre seulement sur le bouton qui agit et sur le nom.
   Le theme clair est la reference ; le sombre suit la colonne « proposition » de la charte. Rien ne bouge : ce sont des documents. */
@font-face { font-family: Geist; src: url("fonts/geist-latin.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url("fonts/geist-mono-latin.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }

:root {
  --fond: #EEF2FA; --carte: #FFFFFF; --trait: #E3E6EE; --trait-doux: #EEF0F5; --puce: #F1F3F8;
  --encre: #15171F; --gris: #5A6078; --gris-clair: #8A90A3; --attente: #B3B8C8;
  --bleu: #2F6BF0; --violet: #7A4DF0; --rose: #E8458B; --orange: #F2893D; --vert: #34C759; --sur-spectre: #FFFFFF;
  --spectre-texte: linear-gradient(90deg, #2F6BF0 0%, #7A4DF0 45%, #E8458B 80%, #F2893D 100%);
  --spectre-pilule: linear-gradient(90deg, #3B6BF5 0%, #9B4DF0 50%, #F0744A 100%);
  --ombre: 0 40px 100px rgba(31,41,80,.14), 0 2px 8px rgba(31,41,80,.05);
  --ombre-pilule: 0 14px 40px rgba(122,77,240,.35);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --fond: #0E1016; --carte: #1B1E27; --trait: #2A2E3A; --trait-doux: #222630; --puce: #232733;
    --encre: #F4F5F9; --gris: #A3A8B8; --gris-clair: #7C8296; --attente: #4E5466;
    --bleu: #7FA3FF; --violet: #A78BFA; --rose: #F27AB6; --orange: #FBB46A; --vert: #4ADE80;
    --ombre: 0 40px 100px rgba(0,0,0,.5);
    color-scheme: dark;
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh; min-height: 100dvh; padding: 48px 16px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 32px;
  background: var(--fond); color: var(--encre);
  font: 400 18px/1.5 Geist, "Helvetica Neue", Arial, sans-serif; font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}

/* Le mot-symbole au-dessus de la carte */
.marque { line-height: 0; }
.marque img { display: block; width: auto; height: 36px; }

.carte {
  width: 100%; max-width: 620px; padding: 56px 56px 52px;
  background: var(--carte); border-radius: 32px; box-shadow: var(--ombre);
}
.etiquette {
  margin: 0 0 28px; font: 500 13px/1 "Geist Mono", Menlo, monospace; letter-spacing: .1em; text-transform: uppercase; color: var(--gris-clair);
}
h1 {
  margin: 0 0 20px; font-weight: 600; font-size: clamp(34px, 6vw, 52px); line-height: 1.08; letter-spacing: -.035em; text-wrap: balance;
}
p { margin: 0 0 14px; color: var(--gris); }
.carte > p:last-child, .carte form:last-child { margin-bottom: 0; }

/* Le spectre : un seul mot par ecran */
.spectre { background: var(--spectre-texte); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* L'adresse a copier : une puce grise, en mono */
.adresse {
  display: inline-block; margin-top: 4px; padding: 12px 18px; border-radius: 999px; background: var(--puce); color: var(--encre);
  font: 500 15px/1.3 "Geist Mono", Menlo, monospace; word-break: break-all; user-select: all;
}
.alerte { color: var(--rose); font-weight: 500; }

form { margin: 28px 0 0; display: flex; flex-direction: column; gap: 16px; }
.champ { display: flex; flex-direction: column; gap: 8px; }
.champ span { font: 500 13px/1 "Geist Mono", Menlo, monospace; letter-spacing: .08em; text-transform: uppercase; color: var(--gris-clair); }
input[type="email"] {
  width: 100%; height: 60px; padding: 0 26px; border: 1px solid var(--trait); border-radius: 999px; background: var(--carte); color: var(--encre);
  font: 400 19px/1 Geist, "Helvetica Neue", Arial, sans-serif; outline: none;
}
input[type="email"]:focus { border-color: var(--violet); box-shadow: 0 0 0 4px rgba(122,77,240,.14); }

/* Le bouton qui agit : la pilule en spectre, avec l'etincelle */
button { cursor: pointer; font: 600 19px/1 Geist, "Helvetica Neue", Arial, sans-serif; border-radius: 999px; height: 60px; padding: 0 32px; }
.action { border: 0; background: var(--spectre-pilule); color: var(--sur-spectre); box-shadow: var(--ombre-pilule); align-self: flex-start; }
.action:hover { filter: brightness(1.06); }
.action:focus-visible, .secondaire:focus-visible { outline: 3px solid var(--violet); outline-offset: 3px; }
.secondaire { border: 1px solid var(--trait); background: var(--carte); color: var(--encre); }
.secondaire:hover { border-color: var(--attente); }
.choix { flex-direction: row; flex-wrap: wrap; gap: 14px; }

/* Les pastilles : bleu = lecture, encre = ecriture ; la coche verte dit « fait » */
.liste { list-style: none; margin: 4px 0 20px; padding: 0; border-top: 1px solid var(--trait-doux); }
.liste li { display: flex; align-items: center; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--trait-doux); color: var(--encre); font-size: 17px; }
.pastille { flex: none; width: 12px; height: 12px; border-radius: 50%; }
.pastille.lecture { background: var(--bleu); }
.pastille.ecriture { background: var(--encre); }
.coche {
  display: inline-block; vertical-align: -5px; width: 24px; height: 24px; margin-right: 10px; border-radius: 50%;
  background: var(--vert) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 12.5l3.2 3.2L17 9' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% no-repeat;
}

/* Les pages publiques (confidentialite, conditions, mentions) : une carte de lecture, des sections */
.carte.texte { max-width: 760px; }
.carte.texte h1 { font-size: clamp(32px, 5vw, 44px); }
.carte h2 { margin: 36px 0 12px; font-weight: 600; font-size: 22px; line-height: 1.2; letter-spacing: -.02em; color: var(--encre); scroll-margin-top: 24px; }
.carte strong { font-weight: 500; color: var(--encre); }
.carte a { color: var(--bleu); }
.carte code { font: 500 .88em "Geist Mono", Menlo, monospace; }
.points { margin: 0 0 14px; padding-left: 20px; color: var(--gris); }
.points li { margin: 0 0 8px; }
.maj { font: 500 13px/1.4 "Geist Mono", Menlo, monospace; letter-spacing: .08em; text-transform: uppercase; color: var(--gris-clair); }

.signature { margin: 0; font: 500 13px/1 "Geist Mono", Menlo, monospace; letter-spacing: .08em; text-transform: uppercase; color: var(--gris-clair); }
.signature .spectre { font-weight: 600; }

/* Le pied de chaque page : les trois pages publiques */
.pied { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 24px; margin-top: -16px; }
.pied a { font: 500 12px/1 "Geist Mono", Menlo, monospace; letter-spacing: .08em; text-transform: uppercase; color: var(--gris-clair); text-decoration: none; }
.pied a:hover { color: var(--encre); }

@media (max-width: 560px) {
  body { justify-content: flex-start; padding-top: 24px; }
  .carte { padding: 36px 24px 32px; border-radius: 30px; }
  .action, .secondaire { width: 100%; }
}