/* Éditions Melmos — la feuille de style du site.
 *
 * Écrite pour un parent debout dans une cuisine, sur un téléphone, à 19 h.
 * D'où trois partis pris :
 *
 *   1. Le téléchargement passe avant la présentation. Un visiteur qui arrive
 *      d'une vidéo YouTube veut le fichier ; il ne veut pas lire une page de
 *      vente. Les boutons sont donc au-dessus de tout le reste et portent leur
 *      poids en mégaoctets — on ne fait pas télécharger 11 Mo à quelqu'un sans
 *      le lui dire.
 *   2. Aucun JavaScript n'est nécessaire pour obtenir un livre. La page est du
 *      HTML et des liens.
 *   3. La couleur de la collection entre par une seule variable, --accent,
 *      posée sur <body>. Le reste de la feuille n'en sait rien.
 */

/* WOFF2 seul, sans repli TrueType. Tous les navigateurs le lisent depuis 2016,
 * et le repli aurait coûté sa place à tout le monde pour servir personne :
 * les deux TTF pesaient plus lourd que le HTML et cette feuille réunis. */
@font-face {
  font-family: "Outfit";
  src: url("/polices/Outfit-Regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Outfit";
  src: url("/polices/Outfit-Bold.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}

:root {
  --encre: #29211c;
  --second: #6b6157;
  --papier: #fdfbf7;
  --carte: #ffffff;
  --trait: #e8e1d6;
  --accent: #8fbf6b;
  --rayon: 14px;
}

* { box-sizing: border-box; }

/* `hidden` doit gagner, toujours. Le navigateur pose bien `display: none` sur
 * un élément caché, mais c'est une règle de feuille par défaut : n'importe
 * quelle règle d'ici la bat. `a.tuile { display: block }` suffisait à faire
 * réapparaître les cent une tuiles que la recherche venait d'écarter, alors
 * que l'attribut, lui, était correctement posé. */
[hidden] { display: none !important; }

body {
  margin: 0;
  font-family: "Outfit", "Century Gothic", "Segoe UI", system-ui, sans-serif;
  color: var(--encre);
  background: var(--papier);
  line-height: 1.6;
  -webkit-text-size-adjust: 100%;
}

.enveloppe { max-width: 760px; margin: 0 auto; padding: 0 20px; }

/* ---- ce qui rend la page utilisable sans souris ---- */

/* Le lien d'évitement. Sur une page de livre, la barre et le bandeau font
   quatre tabulations avant le premier téléchargement ; sur le catalogue, la
   liste des collections en fait neuf. Ce lien saute tout cela d'un coup. Il
   n'est visible qu'au clavier, ce qui est le seul cas où il sert. */
.evitement {
  position: absolute; left: -9999px;
  background: var(--encre); color: var(--papier);
  padding: 12px 20px; border-radius: 0 0 var(--rayon) 0;
  text-decoration: none; font-weight: 700; z-index: 10;
}
.evitement:focus { left: 0; top: 0; }

/* Un cadre de focus visible, et le même partout. Les navigateurs en dessinent
   un par défaut, mais il disparaît sur les fonds colorés des boutons de
   téléchargement : le trait d'encre doublé de papier tient sur les deux. */
:focus-visible {
  outline: 3px solid var(--encre);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Un visiteur qui a demandé « moins d'animations » dans son système le
   demandait pour de bon : vertiges, migraines, troubles vestibulaires. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  a.tuile:hover, .fichier:hover { transform: none; }
}

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

.bandeau { background: var(--accent); height: 6px; }

header.maison {
  padding: 18px 0;
  border-bottom: 1px solid var(--trait);
  margin-bottom: 28px;
}
header.maison a { color: var(--encre); text-decoration: none; font-weight: 700; }
header.maison nav { float: right; font-size: 0.92rem; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px 16px; }
header.maison nav a { color: var(--second); font-weight: 400; min-height: 44px; display: inline-flex; align-items: center; }
header.maison::after { content: ""; display: block; clear: both; }

/* ---- le catalogue ---- */

.accueil { margin: 0 0 26px; }
.accueil h1 { margin-bottom: 12px; }
.intro { font-size: 1.05rem; margin: 0 0 10px; max-width: 56ch; }
.compte { color: var(--second); font-size: 0.92rem; margin: 0; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.hero-actions a { min-height: 48px; display: inline-flex; align-items: center; padding: 10px 18px;
  border: 2px solid var(--encre); border-radius: 999px; font-weight: 700; text-decoration: none; }
.action-primaire { color: var(--papier); background: var(--encre); }
.action-secondaire { color: var(--encre); background: transparent; }
.niveaux { margin: 0 0 42px; }
.niveaux > h2, .ancre-section > h2 { font-size: 1.35rem; }
.niveaux-grille { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.niveau { display: flex; flex-direction: column; min-height: 210px; padding: 20px;
  color: var(--encre); text-decoration: none; background: var(--carte);
  border: 1px solid var(--trait); border-top: 6px solid var(--accent);
  border-radius: var(--rayon); box-shadow: 0 3px 14px rgba(41,33,28,.07);
  transition: transform .12s ease, box-shadow .12s ease; }
.niveau-prescolaire { --accent: #8fbf6b; }
.niveau-primaire { --accent: #e5a63b; }
.niveau-secondaire { --accent: #728ed0; }
.niveau strong { font-size: 1.15rem; margin-bottom: 8px; }
.niveau span { color: var(--second); font-size: .9rem; line-height: 1.45; }
.niveau em { margin-top: auto; padding-top: 16px; font-style: normal; font-weight: 700; }
.niveau-actions { margin-top: auto; padding-top: 16px; display: flex; flex-wrap: wrap; gap: 8px; }
.niveau-actions a { display: inline-flex; min-height: 44px; align-items: center; padding: 8px 12px;
  border: 1px solid currentColor; border-radius: 999px; color: var(--encre); font-size: .86rem;
  font-weight: 700; text-decoration: none; }
.niveau-actions a:hover { background: var(--fond); }
.niveau:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(41,33,28,.12); }
.ancre-section { scroll-margin-top: 18px; margin: 0 0 20px; padding-top: 4px; }
.statut-global { margin-top: 16px; padding: 12px 16px; background: #fff7e6; border-radius: 10px; }
.promesses { margin-bottom: 38px; }
.promesses-grille { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.promesses h3 { font-size: 1rem; margin: 0 0 6px; }
.publics { margin: 0 0 42px; }
.publics-grille { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.publics-grille > div { padding: 18px; border-left: 4px solid var(--accent); background: var(--carte); border-radius: var(--rayon); }
.publics h3 { margin: 0 0 6px; font-size: 1rem; }
.publics p { margin: 0; color: var(--second); font-size: .9rem; }
.selection { margin-bottom: 42px; }
.section-entete { display: flex; align-items: end; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.section-entete h2, .section-entete p { margin-bottom: 3px; }
.section-entete > a { flex: none; font-weight: 700; }
.selection-grille { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; }
.selection-grille a { color: var(--encre); text-decoration: none; min-width: 0; }
.selection-grille img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: 10px; background: var(--carte); }
.selection-grille strong, .selection-grille span { display: block; }
.selection-grille strong { font-size: .82rem; line-height: 1.25; margin-top: 5px; }
.selection-grille span { color: var(--second); font-size: .72rem; }
.fonctionnement { margin: 0 0 42px; }
.fonctionnement ol { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; counter-reset: none; }
.fonctionnement li { padding: 18px; background: var(--carte); border: 1px solid var(--trait); border-radius: var(--rayon); }
.fonctionnement strong, .fonctionnement span { display: block; }
.fonctionnement span { color: var(--second); font-size: .9rem; margin-top: 6px; }
.faq { margin: 42px 0; }
.faq details { border-top: 1px solid var(--trait); padding: 14px 0; }
.faq details:last-child { border-bottom: 1px solid var(--trait); }
.faq summary { cursor: pointer; font-weight: 700; }
.faq details p { margin: 8px 0 0; color: var(--second); }

/* ---- chercher dans le catalogue ---- */

/* Le champ n'apparaît que si le script a pu s'exécuter : un filtre sans
   JavaScript est une boîte vide qui ne répond pas, ce qui est pire que pas de
   champ du tout. Sans lui, la page reste exactement ce qu'elle était. */
.chercher { margin: 0 0 8px; }
.chercher label {
  display: block; font-size: 0.88rem; color: var(--second); margin-bottom: 6px;
}
.chercher input {
  width: 100%; font: inherit; font-size: 1rem;
  padding: 12px 16px;
  color: var(--encre); background: var(--carte);
  border: 1px solid var(--trait); border-radius: var(--rayon);
  -webkit-appearance: none;
}
.chercher input::placeholder { color: var(--second); opacity: 1; }
.chercher input:focus { border-color: var(--second); }
/* Toujours présente, vide la plupart du temps. Une zone `aria-live` posée dans
   la page après coup, ou masquée puis dévoilée, n'est pas annoncée par tous les
   lecteurs d'écran : c'est le changement de son contenu qui déclenche la voix,
   et il faut donc qu'elle soit là dès le chargement. Vide, elle ne prend
   aucune place. */
.reponse { color: var(--second); font-size: 0.9rem; margin: 0 0 22px; }
.reponse:empty { margin: 0; }

/* Neuf pastilles plutôt qu'un long défilement : sur cent cinq titres, arriver
   en haut d'une page qui coule pendant trente écrans décourage. */
.collections-raccourcis {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin: 0 0 40px; padding: 16px 0;
  border-top: 1px solid var(--trait); border-bottom: 1px solid var(--trait);
}
.collections-raccourcis a {
  display: inline-flex; align-items: center; gap: 7px;
  text-decoration: none; color: var(--encre);
  font-size: 0.88rem; padding: 5px 12px 5px 9px;
  border: 1px solid var(--trait); border-radius: 999px;
  background: var(--carte);
}
.collections-raccourcis a::before {
  content: ""; width: 9px; height: 9px; border-radius: 50%;
  background: var(--puce); flex: 0 0 auto;
}
.collections-raccourcis a:hover { border-color: var(--puce); }

.collection { scroll-margin-top: 14px; }
.collection > h2 {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  border-left: 5px solid var(--accent); padding-left: 12px;
}
.collection .cardinal { color: var(--second); font-size: 0.82rem; font-weight: 400; }

.grille {
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
}
a.tuile {
  display: block; text-decoration: none; color: var(--encre);
  transition: transform .12s ease;
}
a.tuile img {
  width: 100%; height: auto; display: block;
  border-radius: 10px; background: var(--trait);
  box-shadow: 0 3px 12px rgba(41, 33, 28, 0.10);
}
a.tuile:hover { transform: translateY(-2px); }
.tuile-titre { display: block; font-weight: 700; font-size: 0.93rem;
               line-height: 1.25; margin-top: 8px; }
.tuile-detail { display: block; color: var(--second); font-size: 0.8rem; }
.tuile-statut { display: inline-block; margin-top: 5px; padding: 2px 8px;
  color: #6f4b08; background: #fff1cf; border-radius: 999px; font-size: .75rem; }

/* ---- le livre ---- */

/* Le fil d'Ariane. Un visiteur sur deux arrive ici par une recherche ou par un
   lien partagé, jamais par l'accueil : sans cette ligne il ne sait pas qu'il y
   a cent quatre autres livres derrière celui qu'il regarde. */
.ariane {
  font-size: 0.87rem; color: var(--second);
  margin: 0 0 18px; padding: 0;
}
.ariane ol { list-style: none; margin: 0; padding: 0; }
.ariane li { display: inline; }
.ariane li + li::before { content: " › "; color: var(--trait); }
.ariane a { color: var(--second); }

.couverture {
  width: 100%; max-width: 340px; height: auto;
  border-radius: var(--rayon);
  display: block; margin: 0 auto 24px;
  box-shadow: 0 6px 26px rgba(41, 33, 28, 0.13);
}

h1 { font-size: 2.1rem; line-height: 1.15; margin: 0 0 6px; letter-spacing: -0.01em; }
.autre-langue { color: var(--second); font-size: 1.18rem; margin: 0 0 4px; }
.chiffres { color: var(--second); font-size: 0.97rem; margin: 0 0 30px; }

/* ---- les téléchargements : le coeur de la page ---- */

.telecharger { margin: 0 0 34px; }
.formats-grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.format-carte { background: var(--carte); border: 1px solid var(--trait); border-radius: var(--rayon); padding: 18px 20px; }
.format-carte.disponible { border-top: 4px solid var(--accent); }
.format-carte h3 { margin: 0 0 8px; font-size: 1.05rem; }
.format-carte p { margin: 0 0 12px; color: var(--second); }
.format-carte .prix-produit { color: var(--encre); font-size: 1.3rem; }
.format-carte small { display: block; margin-top: 12px; }
.format-carte .bouton { display: inline-block; background: var(--accent); color: #1f1a16; font-weight: 700; text-decoration: none; padding: 11px 18px; border-radius: var(--rayon); }
.telecharger h2 { font-size: 1.06rem; margin: 0 0 12px; color: var(--second);
                  font-weight: 400; }

.formulaire-fichier { margin: 0; }
.fichier {
  width: 100%; font: inherit; text-align: left; cursor: pointer;
  display: flex; align-items: center; gap: 14px;
  background: var(--carte); border: 1px solid var(--trait);
  border-left: 5px solid var(--accent);
  border-radius: var(--rayon);
  padding: 15px 18px; margin-bottom: 10px;
  text-decoration: none; color: var(--encre);
  transition: transform .12s ease, box-shadow .12s ease;
}
.fichier:hover { transform: translateY(-1px);
                  box-shadow: 0 4px 16px rgba(41, 33, 28, 0.10); }
.fichier .nom { font-weight: 700; flex: 1; }
.fichier .nom small { display: block; font-weight: 400; color: var(--second);
                       font-size: 0.85rem; }
.fichier .poids { color: var(--second); font-size: 0.87rem; white-space: nowrap; }

.fichier.principal { background: var(--accent); border-color: var(--accent); }
.fichier.principal .nom, .fichier.principal .poids { color: #1f1a16; }
.fichier.principal .nom small { color: rgba(31, 26, 22, 0.72); }

/* ---- ce qu'il y a dedans ---- */

section { margin: 0 0 34px; }
section > h2 { font-size: 1.22rem; margin: 0 0 14px; }

.planches {
  display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
}
.planches figure { margin: 0; text-align: center; }

/* Les planches sont chargées à l'approche de l'écran, pas au chargement de la
 * page : vingt images de trente kilooctets se paieraient sur le forfait de
 * quelqu'un qui ne descend jamais jusqu'ici.
 *
 * Mais la case réservée était BLANCHE, sur un fond de papier presque blanc.
 * Pendant la seconde où l'image arrive, un trou blanc ne se distingue pas d'une
 * image manquante — au point que l'éditeur lui-même a cru à une panne. Le fond
 * teinté rend cette seconde lisible : on voit une case qui se remplit, pas un
 * fichier absent. Il ne coûte rien et ne se voit plus une fois l'image posée. */
.planches img {
  width: 100%; height: auto; border-radius: 10px; display: block;
  background: var(--trait);
}
.planches figcaption { font-size: 0.82rem; margin-top: 5px; line-height: 1.3; }
.planches figcaption span { display: block; color: var(--second); font-size: 0.76rem; }

/* ---- la même collection ---- */

/* Quatre voisins en bas de page. Le catalogue est à un clic dans la barre,
   mais personne ne remonte : montrer quatre couvertures de la même famille
   est ce qui transforme un téléchargement en trois. */
.aussi .grille { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
.aussi .tuile-titre { font-size: 0.87rem; }

/* ---- les blocs de texte ---- */

.encadre {
  background: var(--carte); border: 1px solid var(--trait);
  border-radius: var(--rayon); padding: 18px 20px;
}
.encadre p { margin: 0 0 10px; }
.encadre p:last-child { margin: 0; }
.encadre .mention { font-size: 0.88rem; color: var(--second); }

/* ---- les pages de texte ---- */

.texte { max-width: 62ch; }
.texte h1 { margin-bottom: 20px; }
.texte h2 { font-size: 1.22rem; margin: 30px 0 10px; }
.texte p { margin: 0 0 14px; }
.texte .encadre { margin: 0 0 18px; }
.texte hr { border: 0; border-top: 1px solid var(--trait); margin: 26px 0; }
.bouton-soutien { margin: 26px 0 0; }
.bouton-soutien a {
  display: inline-block; text-decoration: none;
  background: var(--accent); color: #1f1a16; font-weight: 700;
  padding: 13px 26px; border-radius: var(--rayon);
}
.bouton-soutien a:hover { box-shadow: 0 4px 16px rgba(41, 33, 28, 0.14); }

.texte .ecrire { margin-top: 30px; font-weight: 700; }
.texte .ecrire a { color: var(--encre); }

footer.maison {
  border-top: 1px solid var(--trait);
  margin-top: 46px; padding: 24px 0 46px;
  color: var(--second); font-size: 0.88rem;
}
footer.maison a { color: var(--second); }
.pied-liens { margin: 0 0 12px; }
.pied-liens a { margin-right: 4px; }

/* ---- l'écran large ---- */

@media (min-width: 700px) {
  .haut { display: flex; gap: 34px; align-items: flex-start; }
  .haut .couverture { margin: 0; flex: 0 0 300px; max-width: 300px; }
  .haut .titraille { flex: 1; padding-top: 4px; }
  h1 { font-size: 2.5rem; }
}

@media (max-width: 699px) {
  header.maison { padding: 14px 0; }
  header.maison > a { display: block; margin-bottom: 6px; }
  header.maison nav { float: none; justify-content: flex-start; gap: 0 14px; }
  header.maison nav a { font-size: .87rem; }
  .niveaux-grille { grid-template-columns: 1fr; }
  .promesses-grille { grid-template-columns: 1fr; }
  .publics-grille { grid-template-columns: 1fr; }
  .selection-grille { grid-template-columns: repeat(2, 1fr); }
  .section-entete { align-items: start; flex-direction: column; }
  .fonctionnement ol { grid-template-columns: 1fr; }
  .niveau { min-height: 0; }
}

/* ---- imprimer la page elle-même ---- */

/* Une éducatrice imprime la page pour la punaiser, ou l'enregistre en PDF pour
   l'envoyer à une collègue. Sans ces règles elle obtient la barre de
   navigation, les liens de téléchargement en bleu illisible et six pages de
   planches. Les adresses des fichiers sont écrites en clair : sur papier, un
   lien qu'on ne peut pas cliquer doit se recopier. */
@media print {
  .evitement, header.maison nav, .collections-raccourcis,
  .chercher, .reponse, .aussi { display: none; }
  body { background: #fff; color: #000; }
  .enveloppe { max-width: none; padding: 0; }
  .fichier { border: 1px solid #999; break-inside: avoid; }
  .fichier.principal { background: none; }
  .planches { grid-template-columns: repeat(4, 1fr); }
  .planches figure, section { break-inside: avoid; }
  .couverture, a.tuile img { box-shadow: none; }
  footer.maison { border-top: 1px solid #999; }
}

/* ---------------------------------------------------------------------------
   Le formulaire d'inscription.

   Il n'apparaît que deux fois : en bas d'une page de livre, sous les droits,
   et sur sa propre page. Sa mise en forme suit celle des encadrés existants
   plutôt que de s'inventer une identité : un bloc qui crie plus fort que le
   reste de la page ressemble à une publicité, et celui-ci est une proposition,
   pas une réclame.
--------------------------------------------------------------------------- */

.appel-inscription { margin-top: 48px; }

.ligne-inscription {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin: 14px 0 6px;
}

.ligne-inscription label {
  /* Visible, et non remplacé par un `placeholder` : un texte d'exemple
     disparaît dès la première frappe, et il n'est pas lu comme une étiquette
     par tous les lecteurs d'écran. L'exemple reste dans le champ, l'étiquette
     reste à côté. */
  flex: 1 0 100%;
  font-size: 0.94rem;
}

.ligne-inscription input[type="email"] {
  flex: 1 1 260px;
  min-width: 0;
  padding: 10px 12px;
  font: inherit;
  font-size: 1rem;
  border: 2px solid #c9bfb4;
  border-radius: 8px;
  background: #fffdfa;
  color: #29211c;
}

.ligne-inscription input[type="email"]:focus-visible {
  outline: 3px solid #29211c;
  outline-offset: 2px;
}

.ligne-inscription button {
  padding: 10px 18px;
  font: inherit;
  font-weight: 700;
  font-size: 1rem;
  color: #fffdfa;
  background: #29211c;
  border: 2px solid #29211c;
  border-radius: 8px;
  cursor: pointer;
}

.ligne-inscription button:hover { background: #443830; border-color: #443830; }

.ligne-inscription button:focus-visible {
  outline: 3px solid #29211c;
  outline-offset: 3px;
}

/* Le piège à robots. Il doit être invisible à l'oeil ET hors du chemin du
   clavier, sans employer `display:none` : certains robots ignorent justement
   les champs masqués de cette façon, et le piège ne prendrait plus rien. */
.appat {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}