/* Ludip — page parents. Même famille que l'appli (accueil validé D-013 à D-016) : fond Papier, cartes claires à ombre
   douce, titres en Playpen, aucun trait noir autour des cartes, des boutons ou des images. */
@font-face {
  font-family: "Playpen Ludip";
  src: url("fonts/playpen-700.woff") format("woff");
  font-weight: 700;
  font-display: swap;
}

:root {
  --papier: #F3E9D2;
  --papier-clair: #FFFBEF;
  --blanc: #FFFFFF;
  --encre: #2A2118;
  --encre-douce: #6E6253;
  --soleil: #F2B33D;
  --corail: #D85E47;
  --zephyr: #2C63B0;
  --nouk: #157270;
  --ombre: 0 4px 14px rgba(70, 45, 20, .14);
  --titre: "Playpen Ludip", ui-rounded, "SF Pro Rounded", "Nunito", system-ui, sans-serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--papier);
  color: var(--encre);
  font: 18px/1.55 ui-rounded, "SF Pro Rounded", "Nunito", "Varela Round", system-ui, -apple-system, "Segoe UI", sans-serif;
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--zephyr); outline-offset: 3px; border-radius: 6px; }
h1, h2, h3 { font-family: var(--titre); font-weight: 700; }

.brouillon {
  margin: 0;
  background: var(--encre);
  color: var(--papier);
  text-align: center;
  font-size: 13px;
  padding: 5px 16px;
}

.cadre { max-width: 1120px; margin: 0 auto; padding: 0 20px; }

/* En-tête */
.barre { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 18px; }
.barre img { width: 128px; }
.barre nav { display: flex; align-items: center; gap: 18px; font-size: 16px; }
.barre nav a:not(.pastille) { text-decoration-thickness: 2px; text-underline-offset: 3px; }

.pastille {
  display: inline-block;
  background: var(--soleil);
  color: var(--encre);
  border: 0;
  border-radius: 999px;
  padding: 10px 20px;
  font-weight: 800;
  text-decoration: none;
  box-shadow: 0 3px 10px rgba(160, 100, 10, .28);
}
.pastille:active { transform: translateY(1px); box-shadow: 0 1px 4px rgba(160, 100, 10, .28); }

/* Ouverture : le titre, puis l'accueil de l'appli */
.ouverture { display: grid; grid-template-columns: 1.15fr .85fr; gap: 40px; align-items: center; padding: 48px 0 16px; }
h1 { font-size: clamp(40px, 7vw, 68px); line-height: 1.04; margin: 0; }
.chapeau { font-size: clamp(19px, 2.4vw, 22px); color: var(--encre-douce); margin: 20px 0 26px; max-width: 32em; }
.ouverture .telephone { max-width: 300px; justify-self: center; }
.etagere { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 14px; max-width: 420px; justify-self: center; width: 100%; }
.mini { position: relative; aspect-ratio: 126 / 172; border-radius: 3px 12px 12px 3px; background: var(--papier-clair); overflow: hidden; box-shadow: 1.5px 1.5px 0 #F1E6CE, 3px 3px 0 #E3D4B4, var(--ombre); }
.mini::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 7%; background: var(--c); z-index: 1; }
.mini span { position: absolute; left: 7%; right: 0; top: 0; height: 31%; display: flex; align-items: center; padding: 3px 6px 3px 9px; font-family: var(--titre); font-weight: 700; font-size: 12.5px; line-height: 1.1; color: var(--c); }
.mini img { position: absolute; left: 7%; top: 31%; width: 93%; height: 69%; object-fit: cover; }
.mini em { position: absolute; right: 5px; bottom: 5px; background: #fff; border-radius: 999px; padding: 1px 7px; font-style: normal; font-weight: 800; font-size: 11px; color: #5A4A3A; box-shadow: 0 1px 3px rgba(42, 33, 24, .2); }

/* Téléphones : l'appli telle qu'elle est */
.telephone { margin: 0; }
.telephone video { display: block; width: 100%; height: auto; border-radius: 30px; background: var(--papier); box-shadow: 0 0 0 6px #3A3128, 0 14px 34px rgba(42, 33, 24, .26); }
.ouverture .etagere { justify-self: start; margin-top: 28px; }
.ecrans.trois { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 860px; margin: 0 auto; }
.telephone img { border-radius: 30px; box-shadow: 0 0 0 6px #3A3128, 0 14px 34px rgba(42, 33, 24, .26); }
.telephone figcaption { font-size: 15px; color: var(--encre-douce); margin-top: 16px; padding: 0 6px; }
.telephone figcaption b { color: var(--encre); }

/* Organisation : séries, épisodes, activités */
.organisation { display: grid; grid-template-columns: 1.35fr 1fr; gap: 44px; align-items: center; padding: 64px 0 0; }
.tablette { margin: 0; }
.tablette img { width: 100%; }
.tablette figcaption { font-size: 15px; color: var(--encre-douce); margin-top: 14px; }
.niveaux { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.niveaux li { background: var(--blanc); border-radius: 16px; box-shadow: var(--ombre); padding: 14px 16px; font-size: 17px; }
.niveaux b { font-family: var(--titre); font-weight: 700; color: var(--zephyr); }

/* Extrait d'histoire : trois cases de Zéphyr */
.planche { margin: 56px 0 0; }
.planche h2 { margin-bottom: 18px; }
.cases { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.case { margin: 0; background: var(--blanc); border-radius: 20px; box-shadow: var(--ombre); padding: 12px; display: grid; gap: 12px; align-content: start; }
.case img { border-radius: 12px; aspect-ratio: 900 / 681; object-fit: cover; width: 100%; }
.bulle { margin: 0; background: var(--papier-clair); border-radius: 14px; padding: 10px 14px; font-weight: 700; font-size: 17px; line-height: 1.35; }
.bulle.recit { background: #FFF3CF; font-weight: 600; }
.planche figcaption { font-size: 15px; color: var(--encre-douce); margin-top: 14px; }

/* Après l'histoire */
.suite { display: grid; grid-template-columns: 1fr 1.25fr; gap: 48px; align-items: center; padding: 80px 0 24px; }
h2 { font-size: clamp(28px, 4.2vw, 40px); line-height: 1.12; margin: 0 0 14px; }
.suite p, .series p { margin: 0 0 14px; max-width: 34em; }
.ecouter { display: flex; gap: 14px; align-items: flex-start; margin-top: 22px; }
.ecouter svg { flex: none; }
.ecrans { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.ecrans .telephone:nth-child(2) { margin-top: 48px; }

/* Séries : les albums de l'appli */
.series { padding: 72px 0 24px; }
.series > p { max-width: 40em; }
.albums { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 32px; margin-top: 22px; max-width: 980px; }
.album { display: grid; grid-template-columns: 120px 1fr; gap: 18px; align-items: center; }
.album .couv { position: relative; width: 120px; aspect-ratio: 126 / 172; border-radius: 3px 12px 12px 3px; background: var(--papier-clair); overflow: hidden; box-shadow: 1.5px 1.5px 0 #F1E6CE, 3px 3px 0 #E3D4B4, var(--ombre); }
.album .couv::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 9px; background: var(--c); z-index: 1; }
.album .couv span { position: absolute; left: 9px; right: 0; top: 0; height: 31%; display: flex; align-items: center; padding: 4px 8px 4px 10px; font-family: var(--titre); font-weight: 700; font-size: 13px; line-height: 1.1; color: var(--c); }
.album .couv img { position: absolute; left: 9px; top: 31%; width: calc(100% - 9px); height: 69%; object-fit: cover; }
.album h3 { margin: 0; font-size: 22px; color: var(--c); }
.album .age { margin: 2px 0 6px; font-weight: 800; color: var(--encre-douce); font-size: 15px; }
.album p { margin: 0; font-size: 16px; }

/* Suite du catalogue : une intention, sans série ni date annoncée */
.bientot { display: grid; grid-template-columns: auto 1fr; gap: 28px; align-items: center; margin-top: 34px; background: var(--papier-clair); border-radius: 22px; padding: 22px 26px; box-shadow: var(--ombre); max-width: 980px; }
.prochains { display: grid; grid-template-columns: repeat(3, 104px); gap: 12px; }
.prochains .mini span { font-size: 11.5px; padding: 3px 5px 3px 9px; }
.mini.prep em, .prochains .mini em { left: 5px; right: 5px; text-align: center; font-size: 10px; padding: 1px 4px; background: #2A2118; color: #FFFBEF; }
.prochains .mini em { left: 5px; right: 5px; text-align: center; font-size: 9.5px; padding: 1px 4px; }
.vide { aspect-ratio: 126 / 172; border-radius: 3px 12px 12px 3px; background: #EFE3C8; display: grid; place-items: center; font-family: var(--titre); font-weight: 700; font-size: 34px; color: #B9A88A; }
.bientot h3 { margin: 0 0 4px; font-size: 22px; }
.bientot p { margin: 0; max-width: 36em; }
.nw { white-space: nowrap; }

/* Parents */
.parents { padding: 64px 0 24px; max-width: 760px; }
.parents ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.parents li { display: flex; gap: 12px; align-items: flex-start; font-size: 19px; }
.parents li svg { flex: none; margin-top: 3px; }

/* Inscription */
.inscription {
  margin: 64px 0 56px;
  background: var(--blanc);
  border-radius: 24px;
  box-shadow: var(--ombre);
  padding: 28px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
}
.inscription h2 { margin-bottom: 10px; }
.inscription form { display: grid; gap: 12px; align-content: start; }
.inscription label { font-weight: 700; }
.inscription input[type=email] {
  width: 100%;
  font: inherit;
  padding: 12px 14px;
  border: 2px solid #D9CBB0;
  border-radius: 14px;
  background: var(--papier-clair);
  color: var(--encre);
}
.inscription input[type=email]:focus-visible { border-color: var(--zephyr); }
.case-a-cocher { display: flex; gap: 10px; align-items: flex-start; font-weight: 400 !important; font-size: 16px; }
.case-a-cocher input { width: 22px; height: 22px; margin: 2px 0 0; flex: none; accent-color: var(--zephyr); }
.piege { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.retour { max-width: 640px; padding: 72px 20px 96px; } /* marge latérale : .retour écrasait celle de .cadre */
.retour p { font-size: 20px; }
.texte-legal p, .texte-legal li { font-size: 17px; max-width: 42em; }
.texte-legal h2 { font-size: 24px; margin: 32px 0 8px; }
button.pastille { font: inherit; font-weight: 800; cursor: pointer; justify-self: start; }
button.pastille:disabled { opacity: .5; cursor: not-allowed; box-shadow: none; }
.petit { font-size: 15px; color: var(--encre-douce); margin: 0; }

footer { padding: 22px 0 40px; font-size: 15px; color: var(--encre-douce); }
footer > p { border-top: 2px solid rgba(42, 33, 24, .12); padding-top: 18px; }
footer p { margin: 0; }

/* Accueil (choix de la langue) */
.accueil { min-height: 100vh; display: grid; place-content: center; text-align: center; padding: 32px 20px; gap: 22px; }
.accueil img { width: min(300px, 70vw); margin: 0 auto; }
.accueil p { font-size: 22px; font-weight: 800; margin: 0; }
.accueil .choix { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

@media (max-width: 820px) {
  .ouverture { grid-template-columns: 1fr; gap: 32px; padding-top: 32px; }
  .organisation { grid-template-columns: 1fr; gap: 28px; padding-top: 48px; }
  .bientot { grid-template-columns: 1fr; gap: 16px; padding: 18px; }
  .prochains { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ouverture .telephone { max-width: 240px; }
  .cases { grid-template-columns: 1fr; gap: 18px; }
  .suite, .inscription { grid-template-columns: 1fr; gap: 28px; }
  .ecrans .telephone:nth-child(2) { margin-top: 28px; }
  .albums { grid-template-columns: 1fr; }
  .etagere { max-width: 340px; }
  .ecrans.trois { gap: 12px; }
  .ouverture .telephone.pub { justify-self: center; }
  .inscription { padding: 22px 18px; }
}
@media (max-width: 420px) {
  .barre nav a:not(.pastille) { font-size: 15px; }
  .barre img { width: 104px; }
  .pastille { padding: 9px 15px; }
  .album { grid-template-columns: 100px 1fr; }
  .album .couv { width: 100px; }
}
@media (prefers-reduced-motion: reduce) { .pastille:active { transform: none; } }

/* Politiques générées depuis les sources juridiques : les champs ouverts restent lisibles. */
.politique { max-width: 960px; padding: 48px 20px 72px; overflow-wrap: anywhere; }
.politique h1 { font-size: clamp(28px, 5vw, 42px); }
.politique blockquote { margin: 24px 0; padding: 12px 20px; border-left: 4px solid var(--corail); background: var(--papier-clair); }
.point-ouvert { background: #ffe1a3; color: var(--encre); box-decoration-break: clone; }
.document-interne { text-decoration: underline dotted; }
.tableau-legal { overflow-x: auto; margin: 24px 0; }
.tableau-legal table { width: 100%; min-width: 600px; border-collapse: collapse; font-size: 16px; }
.tableau-legal th, .tableau-legal td { text-align: left; vertical-align: top; padding: 12px; border: 1px solid var(--encre-douce); }
.tableau-legal th { background: var(--papier-clair); }

/* Vraie capture de l'appli sur iPad, dans un cadre de tablette (image à fond transparent) */
.ecran-tablette { display: block; width: 100%; max-width: 920px; height: auto; margin: 0 auto; }

/* Couleurs des séries (classes plutôt qu'attributs style, interdits par la CSP) */
.c-nappe { --c: #A0521D; }
.c-nouk { --c: #157270; }
.c-car { --c: #BB3821; }
.c-zephyr { --c: #2C63B0; }
.c-atelier { --c: #816411; }
.c-club { --c: #1E5B6C; }

/* Vidéo du haut : le téléphone est déjà dessiné dans la vidéo, pas de second cadre */
.telephone.pub video { border-radius: 28px; box-shadow: var(--ombre); background: transparent; }
.ouverture .telephone.pub { max-width: 360px; }

.episode-titre { font-weight: 700; color: var(--encre); margin: 8px auto 18px; max-width: 860px; }
.ecrans.trois + .episode-titre { margin-top: 56px; }

.reseaux { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 16px; }
.reseaux span { font-weight: 700; color: var(--encre); margin-right: 4px; }
.reseaux a { background: var(--blanc); border-radius: 999px; padding: 6px 14px; font-weight: 700; color: var(--encre); text-decoration: none; box-shadow: var(--ombre); }
.reseaux a:hover, .reseaux a:focus-visible { background: var(--soleil); }

/* Fiches gratuites (pages /fr/fiches/ et /en/sheets/), 29/10/2026 */
.fiche-tete { padding: 40px 0 24px; max-width: 760px; }
.fiche-tete .petit { margin-top: 12px; }
.fiche-age { display: inline-block; background: var(--papier-clair); border-radius: 999px; padding: 4px 14px; font-weight: 700; color: var(--encre-douce); margin: 0 0 12px; }
.fiche-contenu { display: grid; gap: 28px; padding: 16px 0 32px; }
.fiche-apercu { margin: 0; }
.fiche-apercu img { width: 100%; height: auto; border-radius: 16px; box-shadow: var(--ombre); background: var(--blanc); }
.fiche-colonnes { display: grid; gap: 24px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.fiche-colonnes h2 { font-size: clamp(24px, 3vw, 30px); }
.fiche-colonnes ul { margin: 0; padding-left: 1.2em; display: grid; gap: 6px; font-size: 18px; }
.fiche-video, .fiche-ludip { padding: 24px 0; max-width: 760px; }
.fiches-liste { display: grid; gap: 20px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); padding: 16px 0 32px; }
.fiche-carte { display: grid; gap: 8px; background: var(--blanc); border-radius: 18px; padding: 14px; box-shadow: var(--ombre); color: var(--encre); text-decoration: none; }
.fiche-carte img { width: 100%; height: auto; border-radius: 10px; }
.fiche-carte b { font-family: var(--titre); font-size: 26px; }
.fiche-carte .fiche-age { margin: 0; justify-self: start; }