/* KoKo - feuille de style unique du site.
   La direction artistique est celle des visuels de la fiche App Store
   (Ressources/Fiches App Store/) : deux fonds qui alternent - lavande clair et
   violet en dégradé -, titres Baloo 2 très gras en prune, mot fort surligné de
   miel sur fond clair et écrit en miel sur fond violet, pastilles blanches.
   Couleurs relevées au pixel sur les PNG des fiches. Le site est clair, comme
   les fiches ; la nuit (réglage de l'appareil), il passe en sombre avec la
   palette de nuit de l'application (Shared/Theme.swift).
   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 {
  color-scheme: light dark;
  /* fond clair des fiches et ses deux halos (rose à gauche, bleu à droite) */
  --bg: #F2EEFC;
  --halo-rose: rgba(236, 186, 222, .45);
  --halo-bleu: rgba(178, 204, 246, .55);
  /* fond violet des fiches, de haut en bas */
  --violet-haut: #997FCF;
  --violet-milieu: #7E62BB;
  --violet-bas: #614799;
  --card: #FFFFFF;
  --ink: #2E2340;           /* titres des fiches */
  --sub: #453A63;           /* sous-titres des fiches */
  --soft: #5E5480;
  --faint: #918AAB;
  --line: rgba(46, 35, 64, .10);
  --brand: #8971B7;         /* bouton plein de l'app (« Valider ») */
  --brandD: #6F579B;
  --brand2: #65508C;        /* texte de la pastille « Méthode scientifique » */
  --accent: #6A4BAA;        /* mot fort sur fond clair */
  --surligne: #FFE0A0;      /* bande miel sous le mot fort */
  --honey: #FFD37A;         /* mot fort sur fond violet */
  --lilac: #EBE4FB;
  --lilac-ombre: #DDD5EE;   /* bord bas de la pastille « Méthode scientifique » */
  --pastille: #FFFFFF;      /* pastilles de langue */
  --chip-ink: #3D2E20;      /* encre brune des pastilles de langue */
  --pastille-ombre: rgba(72, 46, 130, .55);
  --cadre-clair: #FFFFFF;   /* liseré des visuels sur fond clair */
  --visuel: none;           /* filtre des visuels */
  --shadow: 0 18px 44px rgba(46, 35, 64, .10);
  --shadow-shot: 0 30px 70px rgba(40, 24, 80, .24);
}

/* La nuit : la palette sombre de l'application (bg, card, card2, brandT,
   honey de Theme.swift). Le violet des fiches s'assombrit, le mot fort
   passe en lavande sur une bande de miel translucide, les pastilles prennent
   le fond des cartes. Les visuels gardent le fond clair de leur PNG : ils
   sont un peu assombris pour ne pas éblouir. */
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1B1922;
    --halo-rose: rgba(150, 78, 140, .20);
    --halo-bleu: rgba(70, 100, 170, .22);
    --violet-haut: #6B57A0;
    --violet-milieu: #54418A;
    --violet-bas: #3B2C66;
    --card: #26232F;
    --ink: #F3EFFC;
    --sub: #CFC6E6;
    --soft: #B3AACB;
    --faint: #7F7799;
    --line: rgba(243, 239, 252, .12);
    --brand2: #C3B1F0;
    --accent: #C3B1F0;
    --surligne: rgba(240, 193, 104, .32);
    --honey: #F0C168;
    --lilac: #312A3F;
    --lilac-ombre: #15131B;
    --pastille: #2C2937;
    --chip-ink: #F8F1E6;
    --pastille-ombre: rgba(16, 10, 34, .55);
    --cadre-clair: rgba(255, 255, 255, .08);
    --visuel: brightness(.9);
    --shadow: 0 18px 44px rgba(0, 0, 0, .35);
    --shadow-shot: 0 30px 70px rgba(0, 0, 0, .45);
  }
}

/* Les quatre langues du site. 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; }

html { background: var(--bg); }

body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(60vmax 50vmax at -10% 100%, var(--halo-rose), transparent 60%),
    radial-gradient(60vmax 50vmax at 110% 55%, var(--halo-bleu), transparent 60%),
    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: 700px;
  margin: 0 auto;
  padding: 22px 16px 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: 40px; height: 40px; display: block; }

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

/* Le menu des langues : un <details> natif, qui s'ouvre et se referme sans
   script. site.js ne fait que le refermer après un choix, un tap à côté ou
   Échap. Le code affiché (EN, FR…) suit la langue par data-l, comme le reste
   de la page : il est juste dès le premier affichage. */

.langs { position: relative; }

.langs summary {
  display: flex;
  align-items: center;
  gap: 6px;
  list-style: none;
  font: 800 12px/1 'Nunito', sans-serif;
  letter-spacing: .06em;
  color: var(--brand2);
  background: var(--card);
  border-radius: 99px;
  padding: 9px 11px 9px 12px;
  box-shadow: 0 3px 0 var(--lilac);
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
}

.langs summary::-webkit-details-marker { display: none; }

.langs[open] summary { background: var(--brand); color: #fff; box-shadow: 0 3px 0 var(--brandD); }

.langs svg {
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.langs .globe { width: 15px; height: 15px; stroke-width: 1.9; }

.langs .chevron {
  width: 11px;
  height: 11px;
  stroke-width: 3;
  transition: transform .15s ease;
}

.langs[open] .chevron { transform: rotate(180deg); }

.langs-menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 10;
  min-width: 170px;
  display: grid;
  gap: 2px;
  padding: 6px;
  background: var(--card);
  border-radius: 20px;
  box-shadow: 0 5px 0 var(--lilac), var(--shadow);
}

.langs-menu button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  font: 700 15px/1.2 'Nunito', sans-serif;
  color: var(--ink);
  background: none;
  border: 0;
  border-radius: 14px;
  padding: 10px 12px;
  text-align: left;
  cursor: pointer;
}

.langs-menu button:hover { background: var(--bg); }

.langs-menu button[aria-current="true"] {
  background: var(--lilac);
  color: var(--accent);
  font-weight: 800;
}

/* La coche de la langue en cours, dessinée en bordures : aucun glyphe à
   chercher dans une police. */
.langs-menu button[aria-current="true"]::after {
  content: '';
  width: 5px;
  height: 10px;
  margin: -3px 3px 0 0;
  border: solid var(--accent);
  border-width: 0 2.5px 2.5px 0;
  transform: rotate(45deg);
}

/* ---------- titres et texte (pages de texte) ---------- */

h1 {
  font: 800 clamp(34px, 8vw, 48px)/1.08 'Baloo 2', system-ui, sans-serif;
  margin: 0 0 12px;
  letter-spacing: -.015em;
}

h2 {
  font: 800 23px/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(--accent); text-decoration-thickness: 2px; text-underline-offset: 3px; }

strong { font-weight: 800; }

.lead {
  font: 700 20px/1.35 'Baloo 2', system-ui, sans-serif;
  color: var(--sub);
  margin-bottom: 26px;
}

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

.sheet {
  background: var(--card);
  border-radius: 30px;
  padding: 8px 24px 26px;
  box-shadow: 0 6px 0 var(--lilac), var(--shadow);
}

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

.note {
  background: var(--card);
  border-radius: 22px;
  padding: 16px 20px;
  margin: 20px 0;
  box-shadow: 0 4px 0 var(--lilac);
}

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

dl { margin: 0; }
dt { font: 700 18px/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 19px/1.2 'Baloo 2', system-ui, sans-serif;
  color: var(--accent);
}

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

/* Champs restant à renseigner dans les mentions légales - la pastille saute
   aux yeux tant qu'elle est là. */
.todo {
  background: var(--surligne);
  border-radius: 8px;
  padding: 1px 8px;
  font-size: 15px;
  font-weight: 800;
  color: var(--soft);
}

/* ---------- 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: 34px 20px 64px; }
}

/* =====================================================================
   Accueil : une suite de « fiches », dans l'ordre de la fiche App Store.
   Les fiches impaires sont violettes, les paires lavande, comme sur l'App
   Store. Chaque fiche : titre sur deux lignes dont un mot fort, sous-titre,
   puis le visuel du téléphone, découpé dans le PNG de la fiche
   (assets/fiches/<langue>/NN.webp).
   ===================================================================== */

.accueil { background: var(--bg); }

.fiche {
  position: relative;
  overflow: hidden;
  padding: 72px 16px 0;
  text-align: center;
}

.fiche-claire {
  color: var(--ink);
  background:
    radial-gradient(520px 420px at 0% 85%, var(--halo-rose), transparent 70%),
    radial-gradient(560px 460px at 100% 60%, var(--halo-bleu), transparent 70%),
    var(--bg);
}

.fiche-violette {
  color: #fff;
  background:
    radial-gradient(640px 520px at 50% 30%, rgba(255, 255, 255, .12), transparent 70%),
    radial-gradient(560px 460px at 100% 75%, rgba(214, 128, 196, .38), transparent 70%),
    radial-gradient(520px 420px at 0% 60%, rgba(124, 140, 222, .30), transparent 70%),
    linear-gradient(180deg, var(--violet-haut), var(--violet-milieu) 55%, var(--violet-bas));
}

.fiche-in {
  max-width: 1080px;
  margin: 0 auto;
  display: grid;
  justify-items: center;
  gap: 40px;
}

.fiche-texte { max-width: 560px; }

/* Le titre des fiches : Baloo 2 au plus gras, interligne serré. La deuxième
   ligne (ou le chiffre) porte le mot fort, dans un <em>. */
.titre {
  font: 800 clamp(44px, 11.5vw, 76px)/.98 'Baloo 2', system-ui, sans-serif;
  letter-spacing: -.02em;
  margin: 0 0 18px;
}

.titre span[data-l] { display: block; }

.titre em { font-style: normal; }

/* Sur fond clair : violet, surligné d'une bande miel, comme sur les fiches.
   Mesurée sur la fiche App Store « Review just in time » : la bande part à
   22 % de la hauteur d'x sous le haut des minuscules et s'arrête au bas des
   jambages, soit de 43 % à 79 % de la boîte du texte en Baloo 2 (les
   pourcentages se comptent sur la boîte de la police, pas sur l'interligne :
   ils valent pour toutes les tailles). La même règle est dans vocab.css. */
.fiche-claire .titre em {
  color: var(--accent);
  padding: 0 .06em;
  background: linear-gradient(transparent 43%, var(--surligne) 43%, var(--surligne) 79%, transparent 79%);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* Sur fond violet : le mot fort est écrit en miel. */
.fiche-violette .titre em { color: var(--honey); }

.sous-titre {
  font: 700 clamp(20px, 5vw, 27px)/1.25 'Baloo 2', system-ui, sans-serif;
  margin: 0 auto;
  /* Deux lignes de longueur égale, comme sur les fiches */
  max-width: 17em;
  text-wrap: balance;
}

.fiche-claire .sous-titre { color: var(--sub); }

/* La pastille au-dessus de « Révise au bon moment ». */
.pastille {
  display: inline-block;
  font: 700 17px/1 'Baloo 2', system-ui, sans-serif;
  color: var(--brand2);
  background: var(--card);
  border-radius: 99px;
  padding: 11px 18px 9px;
  margin-bottom: 20px;
  box-shadow: 0 4px 0 var(--lilac-ombre);
}

/* Le visuel : le bas d'une fiche App Store, téléphone compris. Il garde son
   propre fond, d'où le cadre arrondi ; le téléphone sort par le bas. */
.ecran {
  margin: 0;
  width: 100%;
  max-width: 430px;
  border-radius: 36px 36px 0 0;
  overflow: hidden;
  box-shadow: var(--shadow-shot);
}

.ecran img {
  display: block;
  width: 100%;
  height: auto;
  filter: var(--visuel);
}

.fiche-claire .ecran { box-shadow: 0 0 0 2px var(--cadre-clair), var(--shadow-shot); }
.fiche-violette .ecran { box-shadow: 0 0 0 2px rgba(255, 255, 255, .22), var(--shadow-shot); }

/* ---------- l'ouverture : la fiche 01, « Plus de 6 000 mots » ---------- */

.ouverture { padding-top: 22px; padding-bottom: 72px; }

.ouverture .top { max-width: 1080px; margin: 0 auto 30px; }

.ouverture .mark { color: #fff; }

.ouverture .langs summary {
  color: #fff;
  background: rgba(255, 255, 255, .18);
  box-shadow: none;
}

.ouverture .langs[open] summary { background: var(--card); color: var(--brand2); }

.koala-lecteur {
  display: block;
  width: 150px;
  height: 150px;
  margin: 0 auto 10px;
  /* Pas d'ombre par `filter: drop-shadow` : sur iPhone, le moteur de Safari
     (que tous les navigateurs d'iOS emploient) dessine par moments le calque
     filtré dans une teinte un peu différente du dégradé, et un carré
     apparaît autour du koala. */
}

.ouverture .titre { font-size: clamp(50px, 13.5vw, 92px); }

/* Les langues de l'application, en pastilles blanches à bord bas violet. */
.langues {
  list-style: none;
  padding: 0;
  margin: 34px auto 0;
  max-width: 600px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px 10px;
}

.langues li {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 9px;
  font: 800 clamp(17px, 4.4vw, 21px)/1 'Baloo 2', system-ui, sans-serif;
  color: var(--chip-ink);
  background: var(--pastille);
  border-radius: 99px;
  padding: 11px 18px 9px;
  box-shadow: 0 4px 0 var(--pastille-ombre);
}

.langues .drapeau { font-size: 1.1em; line-height: 1; margin-top: -3px; }

.langues .bientot {
  color: #fff;
  background: none;
  border: 2px dashed rgba(255, 255, 255, .75);
  box-shadow: none;
  padding: 9px 18px 7px;
}

/* ---------- le bouton App Store ---------- */

.store {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 30px;
  font: 800 20px/1.1 'Baloo 2', system-ui, sans-serif;
  text-decoration: none;
  padding: 18px 30px 15px;
  border-radius: 22px;
  /* Bouton plein violet, texte blanc (fond clair) */
  background: var(--brand);
  color: #fff;
  box-shadow: 0 6px 0 var(--brandD);
  transition: transform .12s ease, box-shadow .12s ease;
}

.store svg {
  width: 22px;
  height: 22px;
  margin-top: -3px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Sur fond violet : bouton blanc, comme les pastilles */
.fiche-violette .store {
  background: #fff;
  color: #6A4BAA;           /* blanc et violet de jour comme de nuit : c'est l'appel */
  box-shadow: 0 6px 0 var(--pastille-ombre);
}

.store:active { transform: translateY(4px); box-shadow: 0 2px 0 var(--brandD); }
.fiche-violette .store:active { box-shadow: 0 2px 0 var(--pastille-ombre); }

.store-note {
  margin: 14px 0 0;
  font: 700 15px/1.3 'Nunito', sans-serif;
  opacity: .8;
}

/* ---------- la fin : appel à installer + pied de page ---------- */

.fin { padding-bottom: 0; }

.fin .koala-lecteur { width: 120px; height: 120px; }

.fin footer {
  max-width: 700px;
  margin: 72px auto 0;
  padding-bottom: 40px;
  border-top-color: rgba(255, 255, 255, .25);
  color: rgba(255, 255, 255, .7);
}

.fin footer a { color: #fff; }

/* ---------- grand écran : texte et visuel côte à côte ---------- */

@media (min-width: 900px) {
  .fiche { padding: 0 32px; }

  .fiche-in {
    grid-template-columns: 1fr 1fr;
    align-items: end;
    gap: 56px;
  }

  .fiche-texte { align-self: center; padding: 72px 0; }

  /* Une fiche sur deux, le visuel passe à gauche. */
  .fiche-claire .ecran { order: -1; }

  .ecran { margin-top: 72px; }

  .ouverture, .fin { padding: 28px 32px 88px; }
  .ouverture .fiche-in, .fin .fiche-in { grid-template-columns: 1fr; }
  .ouverture .fiche-texte, .fin .fiche-texte { padding: 0; max-width: 760px; }
  .fin { padding-bottom: 0; }
}