/* KoKo - feuille de style unique du site.
   La palette et la typographie reprennent celles de l'application
   (KoKo/Core/Theme.swift et la maquette V1.dc.html) : fond crème, encre brune,
   accent miel, cartes à bord bas épais, Baloo 2 pour les titres, Nunito pour
   le texte. Les deux polices sont servies depuis ce site : aucune requête ne
   part vers un tiers, donc aucun cookie ni bandeau de consentement. */

@font-face {
  font-family: 'Baloo 2';
  src: url('assets/baloo2.woff2') format('woff2-variations');
  font-weight: 400 800;
  font-display: swap;
}
@font-face {
  font-family: 'Nunito';
  src: url('assets/nunito.woff2') format('woff2-variations');
  font-weight: 200 1000;
  font-display: swap;
}

:root {
  --bg: #FFF7EA;
  --card: #FFFFFF;
  --ink: #3D2E20;
  --soft: rgba(61, 46, 32, .58);
  --faint: rgba(61, 46, 32, .34);
  --line: rgba(61, 46, 32, .10);
  --honey: #FFD37A;
  --honeyD: #E0A93F;
  --honeyT: #FFF2D6;
  --onHoney: #6E4A18;
  --blue: #4C82D8;
  --chip: #F6EEE1;
  --lilac: #EBE4FB;
  --mint: #DFF3E4;
  --sky: #DEEAFB;
  --peach: #FFE6DA;
  --shadow: 0 14px 34px rgba(20, 14, 8, .07);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1B1922;
    --card: #26232F;
    --ink: #F8F1E6;
    --soft: rgba(248, 241, 230, .62);
    --faint: rgba(248, 241, 230, .36);
    --line: rgba(248, 241, 230, .14);
    --honey: #F0C168;
    --honeyD: #C39B44;
    --honeyT: #39301F;
    --onHoney: #4A3410;
    --blue: #6FA0E8;
    --chip: #312D3B;
    --lilac: #2D2842;
    --mint: #22382C;
    --sky: #213247;
    --peach: #3B2A23;
    --shadow: 0 14px 34px rgba(0, 0, 0, .28);
  }
}

/* Quatre langues : on masque, jamais on n'impose d'affichage - les blocs
   gardent ainsi la mise en page que leur donne leur propre règle. Le document
   part en anglais dans le HTML, donc une page sans JavaScript reste lisible. */
html[lang="en"] [data-l]:not([data-l="en"]) { display: none; }
html[lang="fr"] [data-l]:not([data-l="fr"]) { display: none; }
html[lang="es"] [data-l]:not([data-l="es"]) { display: none; }
html[lang="pt"] [data-l]:not([data-l="pt"]) { display: none; }

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 600 17px/1.65 'Nunito', system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}

.wrap {
  max-width: 660px;
  margin: 0 auto;
  padding: 22px 20px 64px;
}

/* ---------- en-tête ---------- */

.top {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 34px;
}

.mark {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: inherit;
  margin-right: auto;
}

.mark img { width: 38px; height: 38px; display: block; }

.mark span { font: 800 25px/1 'Baloo 2', system-ui, sans-serif; }

.langs { display: flex; gap: 5px; }

.langs button {
  font: 800 12px/1 'Nunito', sans-serif;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--faint);
  background: var(--chip);
  border: 0;
  border-radius: 99px;
  padding: 8px 9px;
  cursor: pointer;
}

.langs button[aria-current="true"] {
  background: var(--honey);
  color: var(--onHoney);
}

/* ---------- titres et texte ---------- */

h1 {
  font: 800 clamp(34px, 7vw, 46px)/1.12 'Baloo 2', system-ui, sans-serif;
  margin: 0 0 10px;
  letter-spacing: -.01em;
}

h2 {
  font: 700 22px/1.25 'Baloo 2', system-ui, sans-serif;
  margin: 34px 0 10px;
}

h3 {
  font: 700 18px/1.3 'Baloo 2', system-ui, sans-serif;
  margin: 22px 0 6px;
}

p { margin: 0 0 14px; }

ul { margin: 0 0 14px; padding-left: 22px; }
li { margin-bottom: 7px; }

a { color: var(--blue); text-decoration-thickness: 2px; text-underline-offset: 3px; }

strong { font-weight: 800; }

.lead { font-size: 19px; color: var(--soft); margin-bottom: 26px; }

.date {
  font: 800 13px/1.4 'Nunito', sans-serif;
  color: var(--faint);
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-bottom: 26px;
}

/* ---------- accueil ---------- */

.hero { text-align: center; padding: 10px 0 4px; }

.hero img {
  width: 150px;
  height: 150px;
  display: block;
  margin: 0 auto 18px;
  filter: drop-shadow(0 12px 24px rgba(20, 14, 8, .16));
}

.hero .lead { max-width: 440px; margin: 0 auto 28px; }

.store {
  display: inline-block;
  background: var(--honey);
  color: var(--onHoney);
  font: 700 19px/1.2 'Baloo 2', system-ui, sans-serif;
  text-decoration: none;
  padding: 18px 30px;
  border-radius: 24px;
  border-bottom: 6px solid var(--honeyD);
  transition: transform .12s ease;
}

.store:active { transform: translateY(2px); }

.under { font-size: 15px; color: var(--faint); margin-top: 14px; }

.cards { display: grid; gap: 14px; margin-top: 44px; }

.card {
  background: var(--card);
  border: 2px solid var(--line);
  border-bottom-width: 6px;
  border-radius: 26px;
  padding: 18px 20px;
  box-shadow: var(--shadow);
}

.card h2 { margin: 0 0 6px; font-size: 20px; }
.card p { margin: 0; color: var(--soft); font-size: 16px; }

.tile {
  width: 46px;
  height: 46px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  line-height: 1;
  margin-bottom: 12px;
}

/* Les fonds pastel des vignettes, en classes plutôt qu'en style="" : le site
   peut ainsi interdire tout style et tout script en ligne (voir .htaccess). */
.tile-sky { background: var(--sky); }
.tile-honey { background: var(--honeyT); }
.tile-mint { background: var(--mint); }
.tile-lilac { background: var(--lilac); }

/* ---------- pages de texte ---------- */

.sheet {
  background: var(--card);
  border: 2px solid var(--line);
  border-bottom-width: 6px;
  border-radius: 26px;
  padding: 8px 24px 26px;
  box-shadow: var(--shadow);
}

.sheet h2:first-of-type { margin-top: 26px; }

.note {
  background: var(--honeyT);
  border-radius: 18px;
  padding: 14px 18px;
  margin: 20px 0;
}

.note p:last-child { margin-bottom: 0; }

dl { margin: 0; }
dt { font: 700 17px/1.4 'Baloo 2', system-ui, sans-serif; margin-top: 20px; }
dd { margin: 4px 0 0; color: var(--soft); }

.mail {
  display: inline-block;
  font: 800 18px/1.2 'Nunito', sans-serif;
  color: var(--blue);
}

/* ---------- pied de page ---------- */

footer {
  margin-top: 46px;
  padding-top: 22px;
  border-top: 2px solid var(--line);
  font-size: 15px;
  color: var(--faint);
  text-align: center;
}

footer nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  justify-content: center;
  margin-bottom: 14px;
}

footer a { color: var(--soft); text-decoration: none; font-weight: 700; }
footer a:hover { text-decoration: underline; }

@media (min-width: 560px) {
  .wrap { padding-top: 34px; }
  .cards { grid-template-columns: 1fr 1fr; }
}

/* Champs restant à renseigner dans les mentions légales - la pastille saute aux
   yeux tant qu'elle est là, et disparaît du site dès qu'on la remplace. */
.todo {
  background: var(--peach);
  border-radius: 8px;
  padding: 1px 8px;
  font-size: 15px;
  font-weight: 800;
  color: var(--soft);
}

code {
  font-family: ui-monospace, Menlo, monospace;
  font-size: .9em;
  background: var(--chip);
  border-radius: 6px;
  padding: 1px 6px;
}