/* libre ! — le site public.
   Même design system que l'app : sable et marine en clair, kraft en sombre,
   Inter pour le corps, Space Grotesk pour les titres. Le fond porte le
   gaufrage du registre (bruit fractal en carte de bosses, éclairé en rasant)
   — c'est la signature de la marque, elle vient d'index.css telle quelle.
   MAILLE FINE ET RELIEF FAIBLE : si c'est trop présent, on remonte le voile,
   jamais la maille (leçon payée plusieurs fois côté app). */

:root {
  --surface-0: #efe8d8;
  --surface-1: #f6f1e5;
  --accent: #2f5480;
  --accent-hover: #25425f;
  --accent-surface: #e7edf3;
  --text-primary: #232733;
  --text-muted: #585264;
  --border: #ddd3bd;
  --papier: #fbf7ee;
  --max: 42rem;
  --font-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-display: 'Space Grotesk', var(--font-sans);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --surface-0: #16161a;
    --surface-1: #1d1d22;
    --accent: #c9a878;
    --accent-hover: #d9bd93;
    --accent-surface: #26221c;
    --text-primary: #ece7dd;
    --text-muted: #a49d92;
    --border: #33312d;
    --papier: #1d1d22;
  }
}

:root[data-theme='dark'] {
  --surface-0: #16161a;
  --surface-1: #1d1d22;
  --accent: #c9a878;
  --accent-hover: #d9bd93;
  --accent-surface: #26221c;
  --text-primary: #ece7dd;
  --text-muted: #a49d92;
  --border: #33312d;
  --papier: #1d1d22;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background-color: var(--surface-0);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: 1.0625rem;
  line-height: 1.72;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Le gaufrage du papier — thème clair seulement : sur le kraft sombre il
   ferait du crépi. */
@media (prefers-color-scheme: light) {
  body {
    background-image:
      linear-gradient(rgba(239, 232, 216, 0.93), rgba(239, 232, 216, 0.93)),
      url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22640%22%20height%3D%22640%22%3E%3Cfilter%20id%3D%22e%22%20x%3D%220%22%20y%3D%220%22%20width%3D%22100%25%22%20height%3D%22100%25%22%3E%3CfeTurbulence%20type%3D%22fractalNoise%22%20baseFrequency%3D%220.16%22%20numOctaves%3D%223%22%20seed%3D%2211%22%20stitchTiles%3D%22stitch%22%20result%3D%22n%22%2F%3E%3CfeDiffuseLighting%20in%3D%22n%22%20lighting-color%3D%22%23efe8d8%22%20surfaceScale%3D%223.2%22%20diffuseConstant%3D%221.22%22%3E%3CfeDistantLight%20azimuth%3D%22135%22%20elevation%3D%2255%22%2F%3E%3C%2FfeDiffuseLighting%3E%3C%2Ffilter%3E%3Crect%20width%3D%22640%22%20height%3D%22640%22%20filter%3D%22url(%23e)%22%2F%3E%3C%2Fsvg%3E');
    background-size: auto, 640px 640px;
    background-attachment: fixed, fixed;
  }
}

/* ---------- ossature ---------- */

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

header.site {
  border-bottom: 1px solid var(--border);
  padding: 1.35rem 0;
  margin-bottom: 4rem;
}
header.site .enveloppe {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
}
.marque {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.3rem;
  letter-spacing: -0.02em;
  color: var(--text-primary);
  text-decoration: none;
}
.marque:hover { color: var(--accent); }
nav.site { display: flex; gap: 1.5rem; font-size: 0.9375rem; }
nav.site a { color: var(--text-muted); text-decoration: none; }
nav.site a:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 4px; }

main { padding-bottom: 6rem; }

/* ---------- titres ---------- */

h1, h2, h3 { font-family: var(--font-display); letter-spacing: -0.02em; line-height: 1.2; }

h1 {
  font-size: clamp(2rem, 6vw, 2.9rem);
  font-weight: 700;
  margin: 0 0 1.25rem;
  text-wrap: balance;
}
h2 {
  font-size: clamp(1.3rem, 3.6vw, 1.6rem);
  font-weight: 600;
  margin: 3.25rem 0 1rem;
  color: var(--accent);
}
h3 { font-size: 1.15rem; font-weight: 600; margin: 2.25rem 0 0.75rem; }

.surtitre {
  font-family: var(--font-sans);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0 0 0.9rem;
}

.chapeau {
  font-size: 1.2rem;
  line-height: 1.6;
  color: var(--text-muted);
  margin: 0 0 2.5rem;
  text-wrap: pretty;
}

p { margin: 0 0 1.15rem; text-wrap: pretty; }
strong { font-weight: 600; }
a { color: var(--accent); text-underline-offset: 3px; text-decoration-thickness: 1px; }

/* ---------- listes ---------- */

ul, ol { margin: 0 0 1.4rem; padding-left: 1.35rem; }
li { margin-bottom: 0.7rem; padding-left: 0.2rem; }
li::marker { color: var(--accent); }

/* Une puce « fonction → douleur » : la conséquence en retrait, en italique. */
.consequence {
  display: block;
  margin-top: 0.3rem;
  color: var(--text-muted);
  font-style: italic;
}

/* ---------- pièces particulières ---------- */

hr {
  border: 0;
  border-top: 1px solid var(--border);
  margin: 3.5rem 0;
}

blockquote {
  margin: 2rem 0;
  padding: 0.2rem 0 0.2rem 1.4rem;
  border-left: 2px solid var(--accent);
  color: var(--text-muted);
}

code {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.9em;
  background: var(--accent-surface);
  padding: 0.12em 0.35em;
  border-radius: 4px;
}

/* ---------- le bento ----------
   Même grammaire que l'app : tuiles arrondies, surface claire, bordure fine.
   ASYMÉTRIQUE volontairement — une grille régulière n'est pas un bento, et
   la première tuile porte le guide qui ouvre le plus de portes.
   Une tuile est une PORTE : la flèche pointe à droite, jamais en bas (elle
   annoncerait un dépliage, doctrine du 21/08 côté app). */

.guides { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.9rem; }
.guides li { margin: 0; padding: 0; }

.guides a {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 1.5rem 1.6rem;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--papier);
  box-shadow: 0 1px 2px rgba(90, 70, 40, 0.045);
  text-decoration: none;
  color: inherit;
  transition: border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}
.guides a:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
  box-shadow: 0 8px 22px -12px rgba(47, 84, 128, 0.35);
}
.guides .titre {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.08rem;
  line-height: 1.35;
  display: block;
  margin-bottom: 0.45rem;
  text-wrap: balance;
}
.guides .quoi {
  color: var(--text-muted);
  font-size: 0.96rem;
  display: block;
  line-height: 1.55;
  flex: 1;
}
.guides .fleche {
  display: block;
  margin-top: 1rem;
  color: var(--accent);
  font-size: 0.9rem;
  font-weight: 600;
}

@media (min-width: 720px) {
  .guides { grid-template-columns: 1fr 1fr; gap: 1rem; }
  /* Rythme large / 2 / 2 / large — avec six tuiles, la dernière resterait
     sinon orpheline dans sa rangée, et une tuile seule lit « reste », pas
     « bento ». */
  .guides li:first-child,
  .guides li:last-child { grid-column: 1 / -1; }
  .guides li:first-child .titre { font-size: 1.35rem; }
  .guides li:first-child .quoi { font-size: 1.02rem; max-width: 46ch; }
  .guides li:last-child .quoi { max-width: 52ch; }
}

/* Les pages d'index respirent plus large que les pages de lecture — mais
   SEUL le bento occupe cette largeur. Le texte garde sa colonne : une ligne
   de 56rem ne se lit pas, l'œil perd le début de la suivante.
   La classe est posée sur le BODY, jamais sur une enveloppe seule : sinon
   l'en-tête et le pied de page gardent l'ancienne largeur et se décalent du
   contenu — défaut vu à la première capture. */
body.large .enveloppe { max-width: 56rem; }
body.large main .enveloppe > h1,
body.large main .enveloppe > h2,
body.large main .enveloppe > h3,
body.large main .enveloppe > p,
body.large main .enveloppe > blockquote,
body.large main .enveloppe > ul:not(.guides),
body.large main .enveloppe > ol,
body.large main .enveloppe > .appel { max-width: 42rem; }

/* ---------- les écrans ----------
   Le cadre du téléphone est fait en CSS, pas en image : les captures
   « habillées » de la présentation portent des chiffres périmés, et un
   cadre dessiné pèse zéro octet. */

.ecrans {
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 0;
  display: grid;
  gap: 1.75rem 1.25rem;
  grid-template-columns: repeat(2, 1fr);
}
/* TROIS colonnes, pas quatre : avec six écrans, quatre colonnes
   laisseraient deux tuiles orphelines sur la seconde rangée. */
@media (min-width: 720px) { .ecrans { grid-template-columns: repeat(3, 1fr); } }

/* Sur grand écran, la galerie DÉBORDE de la colonne de lecture : à la
   largeur du texte, quatre téléphones font des timbres-poste et on ne
   distingue plus rien de ce qu'ils montrent. */
@media (min-width: 1140px) {
  .ecrans { width: calc(100% + 10rem); margin-left: -5rem; gap: 2.5rem 2rem; }
}

.ecrans figure { margin: 0; }
.ecrans img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: #16161a;
  box-shadow: 0 10px 30px -18px rgba(35, 39, 51, 0.55);
}
.ecrans figcaption {
  margin-top: 0.6rem;
  font-size: 0.88rem;
  line-height: 1.45;
  color: var(--text-muted);
}
.ecrans strong { color: var(--text-primary); font-weight: 600; display: block; }

/* Le bouton secondaire, à côté de l'appel principal */
.bouton.secondaire {
  background: transparent;
  color: var(--accent);
  border: 1px solid var(--border);
}
.bouton.secondaire:hover { background: var(--accent-surface); border-color: var(--accent); }

.actions { display: flex; flex-wrap: wrap; gap: 0.7rem; align-items: center; }

.note-installation {
  margin-top: 1.1rem;
  font-size: 0.92rem;
  color: var(--text-muted);
}

/* L'appel à rejoindre */
.appel {
  margin: 4rem 0 0;
  padding: 2rem 1.75rem;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--papier);
}
.appel h2 { margin-top: 0; }
.bouton {
  display: inline-block;
  margin-top: 0.6rem;
  padding: 0.8rem 1.5rem;
  border-radius: 10px;
  background: var(--accent);
  color: var(--surface-0);
  font-weight: 600;
  text-decoration: none;
}
.bouton:hover { background: var(--accent-hover); }

.signature {
  margin-top: 2.5rem;
  color: var(--text-muted);
  font-style: italic;
}

footer.site {
  border-top: 1px solid var(--border);
  padding: 2.25rem 0 3.5rem;
  color: var(--text-muted);
  font-size: 0.9rem;
}
footer.site a { color: var(--text-muted); }

/* ---------- mobile ---------- */

@media (max-width: 640px) {
  body { font-size: 1.02rem; line-height: 1.68; }
  header.site { margin-bottom: 2.5rem; padding: 1.1rem 0; }
  header.site .enveloppe { flex-direction: column; align-items: flex-start; gap: 0.45rem; }
  nav.site { gap: 1.1rem; font-size: 0.9rem; }
  h2 { margin-top: 2.5rem; }
  .appel { padding: 1.5rem 1.25rem; }
}

/* ---------- le film ----------
   Vertical, centré, jamais en lecture automatique : une vidéo qui démarre
   toute seule dans le dos du lecteur est une intrusion, et 10 Mo imposés à
   quelqu'un qui consulte en 4G, une faute. */
.film {
  margin: 2rem 0 3rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.film video {
  width: min(272px, 72%);
  height: auto;
  border-radius: 20px;
  border: 1px solid var(--border);
  background: #16161a;
  box-shadow: 0 18px 46px -24px rgba(35, 39, 51, 0.6);
}
.film .legende {
  margin: 1rem auto 0;
  max-width: 34rem;
  text-align: center;
  font-size: 0.95rem;
  color: var(--text-muted);
}

/* Le teaser en tête : pas de contrôles ni d'ombre lourde, c'est une
   affiche animée, pas un lecteur. */
.film.teaser { margin: 1.5rem 0 2.5rem; }
.film.teaser video { width: min(250px, 64%); }