/* Le site de Mon Orthophoniste.
 *
 * STRUCTURE empruntée à detailspro.app, sur demande : barre fixe portant le
 * bouton de téléchargement, ouverture en gros titre centrée suivie d'un
 * appareil, une grille de courtes affirmations, puis des sections longues qui
 * alternent texte et image, et un pied de page sombre.
 *
 * MATIÈRE prise à l'application, sans négociation : le champ tiède, une seule
 * encre, les fonds de son, des filets à la place des ombres, et les trois
 * familles du build. Il n'y a pas une ombre portée ni un dégradé dans l'app ;
 * il n'y en a pas ici.
 *
 * Ce que la référence fait et qu'on ne reprend pas : le sur-titre au-dessus du
 * grand titre. DESIGN.md a une règle nommée qui l'interdit -- rien ne se place
 * au-dessus de ce qu'il décrit -- et c'est aussi un interdit du plancher de
 * qualité. Un emprunt de structure ne rachète pas un tic.
 */

@font-face { font-family: 'Bricolage'; src: url('fonts/BricolageGrotesque-Title.woff2') format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Author'; src: url('fonts/Author-Regular.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Author'; src: url('fonts/Author-Medium.woff2') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Author'; src: url('fonts/Author-Bold.woff2') format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Pally'; src: url('fonts/Pally-Bold.woff2') format('woff2'); font-weight: 700; font-display: swap; }

:root {
  --field: #f4f5f7;
  --surface: #fff;
  --ink: #1b2430;
  --ink-muted: #5a6470;
  --rule: #d3d8e0;
  --brand: #35b6c8;
  --tint: #262b33;
  --phoneme: #b23a2b;

  /* La famille secondaire descend de la marque, pas d'un orange resté du
     premier jet. Deux pas vers le champ pour les aplats, deux pas vers l'encre
     pour ce qui doit porter du texte -- mesurés : encre sur #D2EAEF donne
     12,49:1, blanc sur #2A7988 donne 5,01:1. */
  --brand-soft: #d2eaef;
  --brand-tint: #bbe2e9;
  --brand-deep: #2a7988;

  /* Les quatre fonds de son, cités tels quels : ce sont ceux de l'application,
     et la capture posée juste à côté les montre. Les bleuir ferait mentir la
     page sur le produit. */
  --corail: #ee7b57;
  --bleu: #4c93d4;
  --violet: #a874d8;
  --turquoise: #35b6c8;

  --page: 70rem;
  --measure: 34rem;
  --nav-h: 4.5rem;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 1rem); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--field);
  color: var(--ink);
  font: 400 1.0625rem/1.6 'Author', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--brand-tint); color: var(--ink); }
:focus-visible { outline: 3px solid var(--brand-deep); outline-offset: 3px; border-radius: 6px; }

.page { max-width: var(--page); margin: 0 auto; padding: 0 1.5rem; }

h1, h2, h3 { font-family: 'Bricolage', 'Author', sans-serif; font-weight: 700; margin: 0; letter-spacing: -0.02em; }
h1 { font-size: clamp(2.6rem, 6.5vw, 4.5rem); line-height: 1.03; }
h2 { font-size: clamp(1.9rem, 4vw, 2.75rem); line-height: 1.1; }
h3 { font-size: 1.15rem; line-height: 1.3; letter-spacing: -0.01em; }
p { margin: 0 0 1rem; }
a { color: inherit; }

/* --- Barre fixe ---------------------------------------------------------- */

.nav {
  position: sticky;
  top: 0;
  z-index: 10;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  background: color-mix(in srgb, var(--field) 88%, transparent);
  backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid var(--rule);
}
.nav .page { display: flex; align-items: center; justify-content: space-between; gap: 1rem; width: 100%; }
.wordmark { display: inline-flex; align-items: center; gap: 0.6rem; }
.wordmark .glyph { width: 30px; height: 30px; flex: none; }
.nav .wordmark { font-family: 'Bricolage', sans-serif; font-weight: 700; font-size: 1.1rem; text-decoration: none; letter-spacing: -0.02em; }
.nav ul { display: flex; align-items: center; gap: 1.75rem; margin: 0; padding: 0; list-style: none; font-size: 0.95rem; }
/* :not(.appstore) plutôt qu'une surcharge plus bas : le sélecteur `.nav ul a`
   pèse 0-1-2 et écrasait le blanc de `.appstore`, qui pèse 0-1-0. Le bouton
   héritait donc du gris des liens de navigation, gris sur encre. Exclure est
   plus sûr que renchérir -- une règle qui ne gagne que par accumulation se
   refait avoir au premier sélecteur ajouté. */
.nav ul a:not(.appstore) { color: var(--ink-muted); text-decoration: none; }
.nav ul a:not(.appstore):hover { color: var(--ink); }
@media (max-width: 46rem) { .nav ul li:not(:last-child) { display: none; } }

/* --- Bouton App Store ----------------------------------------------------- */

/* Apple publie un visuel officiel « Télécharger dans l'App Store » et ses
   règles d'emploi sur developer.apple.com/app-store/marketing/guidelines/. Ce
   bouton dessiné tient le rôle, dans la matière du site plutôt qu'en pièce
   rapportée. À échanger contre le visuel officiel si Apple le demande. */
.appstore {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  height: 3.25rem;
  padding: 0 1.5rem;
  border-radius: 999px;
  background: var(--tint);
  color: #fff;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
}
.appstore:hover { opacity: 0.88; }
.appstore svg { width: 1.05rem; height: 1.05rem; fill: currentColor; flex: none; }
.nav .appstore { height: 2.75rem; padding: 0 1.25rem; font-size: 0.95rem; }

/* --- Ouverture ------------------------------------------------------------ */

.hero { padding: clamp(3.5rem, 9vw, 7rem) 0 0; text-align: center; }
.hero h1 { max-width: 18ch; margin: 0 auto; }
.hero .lede {
  max-width: 46ch;
  margin: 1.75rem auto 0;
  font-size: clamp(1.15rem, 2vw, 1.35rem);
  line-height: 1.5;
  color: var(--ink-muted);
}
.hero .actions { margin-top: 2.25rem; display: flex; flex-direction: column; align-items: center; gap: 0.85rem; }
.hero .actions small { color: var(--ink-muted); }
.device { display: block; width: 100%; height: auto; margin: clamp(2.5rem, 6vw, 4.5rem) auto 0; }

/* --- La phrase qui définit ------------------------------------------------ */

.statement { padding: clamp(3.5rem, 8vw, 6rem) 0; border-top: 1px solid var(--rule); }
.statement p {
  max-width: 26ch;
  margin: 0;
  font-family: 'Bricolage', sans-serif;
  font-weight: 700;
  font-size: clamp(1.6rem, 3.4vw, 2.3rem);
  line-height: 1.2;
  letter-spacing: -0.02em;
}
.statement .after {
  max-width: var(--measure);
  margin-top: 1.5rem;
  font-family: 'Author', sans-serif;
  font-weight: 400;
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--ink-muted);
  letter-spacing: normal;
}

/* --- Grille d'affirmations ------------------------------------------------ */

.claims { padding: 0 0 clamp(3.5rem, 8vw, 6rem); }
.claims .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 2.5rem 2rem; }
.claims .item { border-top: 3px solid var(--brand); padding-top: 1rem; }
.claims .item p { margin: 0.5rem 0 0; color: var(--ink-muted); font-size: 0.98rem; }

/* --- Sections alternées ---------------------------------------------------- */

.feature { padding: clamp(3.5rem, 8vw, 6rem) 0; border-top: 1px solid var(--rule); }
.feature .page { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.feature .body { max-width: var(--measure); }
.feature .body > p { color: var(--ink-muted); margin-top: 1rem; }
.feature img { width: 100%; height: auto; display: block; }
.feature.flip .body { order: 2; }
@media (max-width: 52rem) {
  .feature .page { grid-template-columns: 1fr; }
  .feature.flip .body { order: 0; }
}

/* Les quatre listes. LE MOT EST SUR PAPIER, JAMAIS SUR UN FOND : mesuré, le
   rouge du phonème tombe entre 1,74 et 2,46:1 sur les fonds de son, contre
   5,94:1 sur le papier. C'est la règle Fond/Champ de DESIGN.md, et elle vaut
   ici pour la raison qui la fait exister dans les jeux. */
.tracks { margin-top: 1.75rem; display: grid; gap: 0.5rem; }
.track {
  display: grid; grid-template-columns: 2.5rem 1fr; gap: 1rem; align-items: center;
  background: var(--surface); border: 1px solid var(--rule); border-radius: 14px; padding: 0.9rem 1.1rem;
}
.track .n {
  display: flex; align-items: center; justify-content: center;
  width: 2.5rem; height: 2.5rem; border-radius: 9px;
  border: 1px solid rgba(27, 36, 48, 0.22);
  font-variant-numeric: tabular-nums; font-weight: 500; font-size: 0.8rem; color: var(--ink);
}
.track:nth-child(1) .n { background: var(--corail); }
.track:nth-child(2) .n { background: var(--bleu); }
.track:nth-child(3) .n { background: var(--violet); }
.track:nth-child(4) .n { background: var(--turquoise); }
.track .w { font-family: 'Pally', sans-serif; font-weight: 700; font-size: 1.25rem; }
.track .w em { font-style: normal; color: var(--phoneme); }
.track .h { display: block; font-size: 0.9rem; color: var(--ink-muted); }

.games { margin-top: 1.75rem; border-top: 1px solid var(--rule); }
.games > div { padding: 1rem 0; border-bottom: 1px solid var(--rule); }
.games p { margin: 0.15rem 0 0; color: var(--ink-muted); font-size: 0.98rem; }

/* --- Appel final ----------------------------------------------------------- */

.closing { padding: clamp(4rem, 9vw, 7rem) 0; border-top: 1px solid var(--rule); text-align: center; }
.closing h2 { max-width: 18ch; margin: 0 auto; }
.closing p { max-width: 46ch; margin: 1.25rem auto 2rem; color: var(--ink-muted); }
.closing .actions { display: flex; flex-direction: column; align-items: center; gap: 0.85rem; }
.closing small { color: var(--ink-muted); }

/* --- Pied de page sombre ---------------------------------------------------- */

.foot { background: var(--ink); color: #b9c0ca; padding: clamp(3rem, 6vw, 4.5rem) 0 3rem; }
.foot .page { display: grid; grid-template-columns: 1.6fr 1fr; gap: 2.5rem; }
.foot .wordmark { font-family: 'Bricolage', sans-serif; font-weight: 700; color: #fff; font-size: 1.1rem; text-decoration: none; letter-spacing: -0.02em; }
.foot p { margin: 0.75rem 0 0; max-width: 36ch; font-size: 0.95rem; }
.foot nav { display: flex; flex-direction: column; gap: 0.6rem; font-size: 0.95rem; }
.foot a { color: #b9c0ca; }
.foot a:hover { color: #fff; }
.foot .legal { grid-column: 1 / -1; border-top: 1px solid #2c3542; padding-top: 1.5rem; margin-top: 1rem; font-size: 0.875rem; }
@media (max-width: 46rem) { .foot .page { grid-template-columns: 1fr; } }

/* --- Pages de texte --------------------------------------------------------- */

/* La colonne de texte s'aligne sur le bord gauche de la barre, elle ne se
   recentre pas : deux largeurs de page différentes sur une même vue font
   décrocher le titre du logotype, et ça se voit avant qu'on sache pourquoi. */
.doc { padding: clamp(3rem, 7vw, 5rem) 0 5rem; }
.doc h1, .doc h2, .doc p, .doc .note { max-width: 44rem; }
.doc h1 { font-size: clamp(2rem, 5vw, 2.75rem); }
.doc .lede { font-size: 1.25rem; line-height: 1.5; color: var(--ink-muted); margin: 1.25rem 0 2.5rem; max-width: var(--measure); }
.doc h2 { font-size: 1.15rem; margin: 2.25rem 0 0.5rem; }
.doc .note { background: var(--surface); border: 1px solid var(--rule); border-radius: 14px; padding: 1.1rem 1.35rem; color: var(--ink-muted); margin-top: 2.5rem; font-size: 0.98rem; }

@media (prefers-color-scheme: dark) {
  :root { --field: #14181e; --surface: #1b2430; --ink: #f4f5f7; --ink-muted: #a6aeb9; --rule: #2c3542; --tint: #f4f5f7; --phoneme: #ef8c78;
           --brand-soft: #1e3d45; --brand-tint: #24505b; --brand-deep: #5cc6d6; }
  .appstore { color: #14181e; }
  .track .n { color: #1b2430; }
  .foot { background: #0e1116; }
}