/* ============================================================================
   Les pages guides — une seule feuille pour toutes, en français et en anglais.

   Chargée par chaque page de /guides/ et de /en/guides/, que fabrique
   `engendrer_guides.py`. Contrairement à la landing, dont le CSS vit en double
   dans ses deux pages (voir `verifier_traduction.py`, contrôle 7), les guides
   seront nombreux : une feuille commune évite d'en tenir six copies.

   Les jetons, les polices et les composants repris de la landing le sont À
   L'IDENTIQUE : un guide doit se lire comme une page du même site. Une retouche
   de couleur dans `index.html` se reporte donc ici aussi.

   `?v=N` dans les pages : à incrémenter à chaque modification de ce fichier,
   sinon un navigateur qui l'a en cache garde l'ancien.
   ========================================================================= */

@font-face { font-family:'Fredoka'; src:url('/polices/Fredoka-SemiBold.woff2') format('woff2'); font-weight:600; font-display:swap; }
@font-face { font-family:'Fredoka'; src:url('/polices/Fredoka-Bold.woff2') format('woff2'); font-weight:700; font-display:swap; }
@font-face { font-family:'Jakarta'; src:url('/polices/PlusJakartaSans-Regular.woff2') format('woff2'); font-weight:400; font-display:swap; }
@font-face { font-family:'Jakarta'; src:url('/polices/PlusJakartaSans-SemiBold.woff2') format('woff2'); font-weight:600; font-display:swap; }
@font-face { font-family:'Jakarta'; src:url('/polices/PlusJakartaSans-Bold.woff2') format('woff2'); font-weight:700; font-display:swap; }

:root {
  --creme:#FDF9F0; --blanc:#FFFBF3; --encre:#332F55; --doux:#67647F;
  --corail:#FF6F8F; --rouge:#C01F4B; --violet:#6B3FE0; --menthe:#087A5D;
  --bord:#EFE4D2; --marge:22px;
  --emoji:'Apple Color Emoji','Segoe UI Emoji','Noto Color Emoji';
}

* { box-sizing:border-box; margin:0; padding:0; }
[hidden] { display:none !important; }

/* Les axes d'affichage de la landing, recopiés tels quels : Android, où le
   badge App Store ne mène nulle part, et les navigateurs intégrés (Instagram,
   TikTok…), où il a besoin d'un mot d'aide. Voir `index.html` pour le pourquoi
   de chaque double règle. */
.si-android { display:none; }
.android .si-android { display:var(--d, revert); }
html:not(.android) .si-android { display:none !important; }
.android .si-pas-android { display:none !important; }
.si-integre { display:none; }
.integre .si-integre { display:var(--d, revert); }
html:not(.integre) .si-integre { display:none !important; }
.si-instagram { display:none; }
.instagram .si-instagram { display:var(--d, revert); }
html:not(.instagram) .si-instagram { display:none !important; }
.instagram .si-integre { display:none !important; }

html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
/* Les nappes de couleur de l'app, en haut de page seulement. Hauteurs en
   pixels et non en pourcentage : un guide est long, et des nappes étirées sur
   toute sa hauteur deviendraient invisibles. */
body {
  color:var(--encre);
  background:
    radial-gradient(120% 460px at 86% 0%, rgba(63,198,245,.18), transparent 70%),
    radial-gradient(100% 380px at 2% 0%,  rgba(34,211,166,.14), transparent 66%),
    var(--creme);
  font-family:'Jakarta',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,var(--emoji),sans-serif;
  font-size:17px; line-height:1.6; -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
h1, h2, h3, .appli-titre { font-family:'Fredoka','Jakarta',var(--emoji),sans-serif; font-weight:600; letter-spacing:-.02em; text-wrap:balance; }
p, li { text-wrap:pretty; }
a { color:var(--violet); text-underline-offset:3px; }

/* ═══════════════════════════════════════════════════════════════ l'en-tête */

.entete { padding:22px var(--marge) 0; text-align:center; }
.marque { display:inline-flex; align-items:center; gap:10px; color:var(--encre); text-decoration:none; }
.marque img { width:44px; height:44px; border-radius:12px; }
.marque span { font-family:'Fredoka',sans-serif; font-weight:600; font-size:18px; }
.marque em { font-style:normal; color:var(--corail); }

/* ═══════════════════════════════════════════════════════════════ l'article */

.guide { max-width:720px; margin:0 auto; padding:14px var(--marge) 20px; }
.fil { font-size:13.5px; color:var(--doux); margin-top:8px; }
.fil a { color:var(--doux); }
.fil span[aria-hidden] { margin-inline:6px; opacity:.6; }

/* La pastille de la landing (`.puce`) : le rose foncé, qui tient 5:1 sur la
   crème, et non le corail de l'app, qui n'y tient pas. */
.surtitre {
  display:inline-flex; align-items:center; margin-top:22px;
  background:var(--blanc); border:1.5px solid var(--bord); border-radius:999px;
  padding:5px 13px; font-size:12.5px; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase; color:var(--rouge);
}
.guide h1 { font-size:clamp(31px,7.6vw,46px); line-height:1.08; margin-top:14px; }
.chapo { font-size:18px; color:var(--doux); margin-top:14px; }
.maj { font-size:13.5px; color:var(--doux); margin-top:10px; }

/* Le sommaire : des pastilles qui se touchent au doigt (40 px), et qui passent
   à la ligne plutôt que de faire défiler la page de côté. */
.sommaire { display:flex; flex-wrap:wrap; gap:8px; margin-top:22px; }
.sommaire a {
  display:inline-flex; align-items:center; min-height:40px; padding:0 14px;
  border-radius:999px; background:#FFF; border:1.5px solid var(--bord);
  color:var(--encre); font-size:14px; font-weight:600; text-decoration:none;
}
.sommaire a:hover { border-color:var(--corail); }

.guide h2 { font-size:clamp(25px,6vw,32px); line-height:1.12; margin-top:54px; scroll-margin-top:16px; }
.guide h2 + p, .guide p + p { margin-top:12px; }
.guide h2 + p { color:var(--doux); }
/* Un paragraphe qui suit une liste, un tableau ou un écran reprend de l'air. */
.guide ul + p, .guide table + p, .guide figure + p { margin-top:16px; }

/* ── Les idées : une carte chacune, deux colonnes sur grand écran ──────────── */
.idees { list-style:none; display:grid; gap:14px; margin-top:20px; }
@media (min-width:760px) { .idees { grid-template-columns:1fr 1fr; } }
.idee {
  display:flex; flex-direction:column;
  background:#FFF; border:1px solid var(--bord); border-radius:20px;
  padding:18px 18px 16px; box-shadow:0 10px 26px rgba(51,47,85,.06);
}
.idee .emoji {
  width:46px; height:46px; border-radius:14px; display:grid; place-items:center;
  font-size:22px; line-height:1; background:var(--teinte, #FFE6EC);
}
.idee h3 { font-size:19px; line-height:1.25; margin-top:12px; }
.idee p { font-size:15.5px; color:var(--doux); margin-top:6px; line-height:1.5; }
/* Les réponses possibles d'un prono à choix : de petites pastilles, pour qu'on
   voie d'un coup d'œil ce qu'on coche. */
.options { list-style:none; display:flex; flex-wrap:wrap; gap:6px; margin-top:10px; }
.options li {
  font-size:13px; font-weight:600; line-height:1.3; padding:4px 10px;
  border-radius:999px; background:var(--creme); border:1px solid var(--bord);
}
/* Ce que rapporte la carte, calé en bas : alignées sur deux colonnes, les
   cartes d'une même rangée finissent à la même hauteur. Menthe foncée : 5:1
   sur le blanc. */
.idee .points { margin-top:auto; padding-top:12px; font-size:13.5px; font-weight:700; color:var(--menthe); }

/* Une teinte par famille, celles de l'app. */
.famille-incontournables { --teinte:#FFE6EC; }
.famille-portrait        { --teinte:#EFE7FF; }
.famille-grand-jour      { --teinte:#E1F4FF; }
.famille-pour-rire       { --teinte:#FFF1D3; }
.famille-perso           { --teinte:#DBF9EE; }

/* ── Le barème ─────────────────────────────────────────────────────────────── */
.bareme {
  width:100%; margin-top:18px; border-collapse:separate; border-spacing:0;
  background:#FFF; border:1px solid var(--bord); border-radius:16px; overflow:hidden;
  font-size:14.5px; line-height:1.35;
}
.bareme th, .bareme td { padding:11px 6px; text-align:center; border-bottom:1px solid var(--bord); }
.bareme th:first-child, .bareme td:first-child { text-align:left; padding-left:14px; }
.bareme thead th { background:#FFF4E5; font-family:'Fredoka',sans-serif; font-weight:600; font-size:15px; }
.bareme tbody th { font-weight:600; }
.bareme tr:last-child > * { border-bottom:0; }

.choix { list-style:none; display:grid; gap:8px; margin-top:16px; }
.choix li {
  display:flex; align-items:baseline; gap:10px; justify-content:space-between;
  background:#FFF; border:1px solid var(--bord); border-radius:14px; padding:11px 14px;
  font-size:15px; line-height:1.4;
}
.choix li span { color:var(--doux); }
.choix li b { flex:none; color:var(--menthe); }

/* ── Les écrans de l'app : le même iPhone que la landing ─────────────────────
   Le cadre est l'image du simulateur (`iphone-cadre.webp`), l'écran du HTML
   dessous : mêmes proportions, mêmes rayons — voir `index.html` pour la mesure
   de chaque nombre. */
.telephone { margin:30px auto 0; text-align:center; }
.iphone {
  position:relative; height:min(64vh, 560px); aspect-ratio:474/990; margin:0 auto;
  border-radius:16.88% / 8.08%; box-shadow:0 30px 70px rgba(51,47,85,.22);
}
.iphone::after {
  content:''; position:absolute; inset:0 -0.633%; z-index:1; pointer-events:none;
  background:url(/iphone-cadre.webp?v=2) center / 100% 100% no-repeat;
}
.ecran { position:absolute; inset:1.717% 3.586%; overflow:hidden; border-radius:10% / 4.6%; background:var(--blanc); }
.ecran img { display:block; width:100%; height:100%; object-fit:cover; }
.telephone figcaption { font-size:14px; color:var(--doux); margin:16px auto 0; max-width:34ch; }

/* ── Une liste simple, et les questions fréquentes ─────────────────────────── */
.liste { margin-top:14px; padding-left:22px; display:grid; gap:8px; }
.liste li { padding-left:4px; }
.liste li::marker { color:var(--corail); }
.faq h3 { font-size:19px; line-height:1.3; margin-top:26px; }
.faq h3 + p { margin-top:6px; }

/* ── La grille à imprimer : ses deux pages en aperçu, et le téléchargement ── */
.grille-apercus { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:26px; }
.grille-apercus figure { text-align:center; }
.grille-apercus img { display:block; width:100%; height:auto; border-radius:10px;
                      border:1px solid var(--bord); box-shadow:0 14px 30px rgba(51,47,85,.12); background:#FFF; }
.grille-apercus figcaption { font-size:13.5px; color:var(--doux); margin-top:10px; }
.pdf { margin-top:22px; text-align:center; }
/* Le bouton de l'app, repris de la landing (`.attente`) : aplat corail, liseré, halo. */
.bouton {
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  background:#FF6F8F; color:#FFF; text-decoration:none;
  border:1px solid #F54069; border-radius:16px; padding:11px 26px; min-height:56px;
  font-family:'Fredoka',sans-serif; font-weight:700; font-size:18px; line-height:1.15;
  box-shadow:0 8px 28px rgba(255,111,143,.32);
}
.bouton:hover { background:#FF5C80; }
.pdf .note { font-size:13px; color:var(--doux); margin-top:10px; }

/* ── À éviter ──────────────────────────────────────────────────────────────── */
.eviter { list-style:none; display:grid; gap:10px; margin-top:16px; }
.eviter li {
  position:relative; padding:12px 14px 12px 46px;
  background:#FFF; border:1px solid var(--bord); border-radius:14px; font-size:15.5px; line-height:1.5;
}
.eviter li::before { content:'🙅'; position:absolute; left:14px; top:11px; font-size:18px; }
.eviter li b { color:var(--encre); }

/* Lu par les lecteurs d'écran, invisible à l'œil : la légende du barème. */
.visuellement-cache { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }

/* ── Les autres guides, sous l'article ─────────────────────────────────── */
.aussi { margin-top:40px; }
.aussi-titre { font-family:'Fredoka',sans-serif; font-weight:600; font-size:20px; }
.aussi ul { list-style:none; display:grid; gap:8px; margin-top:12px; }
.aussi a {
  display:flex; align-items:center; min-height:48px; padding:10px 16px; border-radius:14px;
  background:#FFF; border:1px solid var(--bord); color:var(--encre); font-weight:600; text-decoration:none;
}
.aussi a::after { content:'→'; margin-left:auto; padding-left:12px; color:var(--corail); }
.aussi a:hover { border-color:var(--corail); }

/* ═══════════════════════════════════════════════════ le bloc de l'app */

/* Le dégradé du bloc « prix » de la landing : le même geste, la même couleur. */
.appli {
  margin:56px auto 0; max-width:720px; padding:32px 22px 22px; border-radius:28px;
  background:linear-gradient(150deg,#FFE6EC,#EFE7FF); text-align:center;
}
.appli-icone { width:60px; height:60px; border-radius:16px; box-shadow:0 8px 20px rgba(51,47,85,.14); }
.appli-titre { font-size:clamp(23px,5.6vw,30px); line-height:1.15; margin-top:14px; }
.appli-texte { margin:10px auto 0; max-width:36ch; font-size:16px; color:var(--doux); }

/* ── Le badge, l'aide des navigateurs intégrés, la liste Android ─────────────
   Repris de la landing, règles d'Apple comprises : badge officiel non modifié,
   56 px de haut, et 14 px de marge libre (un quart de sa hauteur). */
.zone-cta { margin-top:14px; display:flex; flex-direction:column; align-items:center; gap:10px; }
.telecharger { display:inline-block; --d:inline-block; margin:14px; line-height:0; }
.telecharger img { display:block; height:56px; width:auto; }
.telecharger:focus-visible { outline:3px solid var(--encre); outline-offset:4px; border-radius:12px; }
.attente {
  --d:inline-flex; display:inline-flex; align-items:center; justify-content:center;
  background:#FF6F8F; color:#fff; text-decoration:none;
  border:1px solid #F54069; border-radius:16px;
  padding:11px 28px; min-height:58px;
  font-family:'Fredoka',sans-serif; font-weight:700; font-size:19px; line-height:1.15;
  box-shadow:0 8px 28px rgba(255,111,143,.32);
}
.attente-note { --d:block; font-size:12.5px; color:var(--doux); }
.attente-note.si-integre { max-width:300px; text-align:center; line-height:18px; text-wrap:balance; }
.attente-discret {
  --d:inline-block; display:inline-block;
  padding:12px 10px; background:none; border:0; cursor:pointer;
  font-family:inherit; font-size:13.5px; font-weight:600; line-height:20px;
  color:var(--doux); text-decoration:underline; text-underline-offset:3px;
}
.attente-discret:hover { color:var(--encre); }
.sortie-navigateur {
  --d:block; display:block; max-width:300px;
  padding:12px 10px; font-size:13px; line-height:19px; text-align:center; text-wrap:balance;
  color:var(--doux); text-decoration:none;
}
.sortie-navigateur span { font-weight:700; color:var(--encre); text-decoration:underline; text-underline-offset:3px; }

/* ═══════════════════════════════════════════════════════════ le pied de page */

footer { margin-top:56px; border-top:1.5px solid rgba(51,47,85,.10); padding:46px var(--marge) 38px; text-align:center; }
.signature img { width:42px; height:42px; border-radius:12px; }
.signature .nom { font-family:'Fredoka',sans-serif; font-weight:600; font-size:17px; margin-top:10px; }
.signature .devise { font-size:14.5px; color:var(--doux); margin-top:4px; }
.contacts { display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin-top:24px; }
.contacts a {
  display:inline-flex; align-items:center; gap:8px; min-height:44px; padding:0 16px;
  border-radius:999px; background:var(--creme); border:1.5px solid var(--bord);
  color:var(--encre); text-decoration:none; font-size:14.5px; font-weight:600;
}
.contacts a:hover { border-color:var(--corail); }
.contacts svg { width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.bas { display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:4px 12px; margin-top:26px; font-size:14px; }
.bas a { color:var(--doux); text-decoration:none; min-height:44px; display:inline-flex; align-items:center; padding-inline:4px; }
.bas a:hover { color:var(--encre); text-decoration:underline; text-underline-offset:5px; }
.bas span { color:var(--doux); opacity:.45; }
.copy { margin-top:6px; font-size:13.5px; color:var(--doux); opacity:.85; }

@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }