/* Le Jour Off — direction « Frigo de la famille » : porte de frigo émaillée, aimants, post-it, feutre rouge, surligneur.
   Feuille propre au site (pas de style.css commun). Polices : Rubik (interface, chiffres) et Patrick Hand (notes courtes),
   hébergées dans /assets/polices/. Contrastes AA vérifiés sur chaque fond (rouge texte #c4281c, gris #5a6270 / #5f6774). */
:root {
  --email: #f3f5f7; --email-2: #e1e6eb; --papier: #fff;
  --postit: #ffe45c; --rose: #ff9ec4; --vert: #a6e3a0; --ciel: #bfe3ff; --peche: #ffd3a8; --fluo: #c6ff4d;
  --rouge: #e5392b; --rouge-texte: #c4281c; --bleu: #2a63db; --jaune-aimant: #ffb703; --vert-aimant: #2bb673;
  --feutre: #1b1b22; --doux: #5a6270; --gris-we: #5f6774;
  --sans: Rubik, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --main: "Patrick Hand", "Segoe Print", "Bradley Hand", "Comic Sans MS", cursive;
  --ombre: 0 14px 18px -12px rgba(0, 0, 0, .35);
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; color: var(--feutre); font: 400 17px/1.6 var(--sans);
  background: var(--email) linear-gradient(90deg, transparent 0 76%, rgba(255, 255, 255, .75) 82%, transparent 89%);
}
main { overflow-x: clip; }
img, svg { max-width: 100%; height: auto; }
a { color: var(--bleu); text-underline-offset: .15em; }
a:hover { color: var(--feutre); }
:focus-visible { outline: 3px solid var(--bleu); outline-offset: 2px; }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.saut { position: absolute; left: -9999px; }
.saut:focus { left: 12px; top: 12px; z-index: 20; background: var(--papier); padding: 8px 14px; }
.env { max-width: 1120px; margin: 0 auto; padding: 0 16px; }

/* Aimants (ronds en relief) */
.aimant { display: inline-block; width: 22px; height: 22px; border-radius: 50%; flex: none; background: var(--rouge);
  box-shadow: inset -3px -4px 0 rgba(0, 0, 0, .18), 0 3px 4px rgba(0, 0, 0, .2); }
.aimant-b { background: var(--bleu); } .aimant-j { background: var(--jaune-aimant); } .aimant-v { background: var(--vert-aimant); }

/* En-tête : le haut de la porte, sa poignée sur mobile */
.haut { border-bottom: 3px solid var(--email-2); }
.haut-in { display: flex; align-items: center; gap: 8px 14px; min-height: 66px; }
.logo { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 21px; letter-spacing: -.02em;
  color: var(--feutre); text-decoration: none; white-space: nowrap; }
.logo .aimant { width: 26px; height: 26px; }
.rubriques { margin-left: auto; }
.rubriques ul { display: flex; gap: 2px; list-style: none; margin: 0; padding: 0; }
.rubriques a { display: flex; align-items: center; gap: 7px; padding: 8px 10px; border-radius: 10px; white-space: nowrap;
  font-weight: 500; font-size: 15px; color: var(--doux); text-decoration: none; }
.rubriques a .aimant { width: 10px; height: 10px; box-shadow: none; opacity: 0; }
.rubriques a:hover, .rubriques a[aria-current] { background: var(--papier); color: var(--feutre); }
.rubriques a[aria-current] .aimant, .rubriques a:hover .aimant { opacity: 1; }
.poignee { display: none; margin-left: auto; width: 8px; height: 40px; border-radius: 6px;
  background: linear-gradient(90deg, #c9d0d7, #fff, #b5bdc6); }
@media (max-width: 1060px) {
  .haut-in { flex-wrap: wrap; padding-top: 12px; }
  .poignee { display: block; }
  .rubriques { order: 3; width: calc(100% + 32px); margin: 0 -16px; overflow-x: auto; scrollbar-width: none; }
  .rubriques::-webkit-scrollbar { display: none; }
  .rubriques ul { width: max-content; padding: 2px 16px 12px; gap: 8px; }
  .rubriques a { background: var(--papier); box-shadow: 0 6px 8px -6px rgba(0, 0, 0, .3); color: var(--feutre); padding: 7px 12px; }
  .rubriques a .aimant { opacity: 1; }
  .rubriques a[aria-current] { background: var(--postit); }
}

/* En-tête des pages */
.tete-page { padding: 26px 0 6px; }
.ariane ol { display: flex; flex-wrap: wrap; list-style: none; margin: 0 0 14px; padding: 0; font-size: 14px; color: var(--doux); }
.ariane li + li::before { content: "›"; margin: 0 8px; }
.ariane a { color: var(--doux); }
.ariane a:hover { color: var(--feutre); }
.etiquette { display: inline-block; margin: 0 0 12px; padding: 5px 12px 4px; font: 400 19px/1.1 var(--main);
  background: var(--postit); transform: rotate(-2deg); box-shadow: 0 6px 8px -6px rgba(0, 0, 0, .35); }
.etiquette-donnees { background: var(--vert); } .etiquette-outil { background: var(--ciel); } .etiquette-guide { background: var(--rose); }
h1 { margin: 0 0 10px; max-width: 24ch; font-weight: 800; font-size: clamp(30px, 6.4vw, 46px); line-height: 1.08; letter-spacing: -.025em; }
.verif { margin: 0; font-size: 14px; color: var(--doux); }
.verif a { color: var(--doux); }
.chapeau { max-width: 64ch; }
.code-404 { margin: 0; font: 400 clamp(80px, 20vw, 140px)/1 var(--main); color: var(--rouge-texte); transform: rotate(-3deg); }
.bouton { display: inline-flex; gap: 8px; align-items: center; padding: 11px 18px; border: 2px solid var(--feutre); border-radius: 12px;
  background: var(--fluo); color: var(--feutre); font-weight: 700; text-decoration: none; box-shadow: 0 4px 0 var(--feutre); }
.bouton:hover { color: var(--feutre); }

/* La feuille aimantée qui porte le texte */
.page { padding-bottom: 8px; }
.feuille { position: relative; max-width: 780px; margin: 26px 0 34px; padding: 30px 20px 24px; background: var(--papier); box-shadow: 0 18px 28px -18px rgba(0, 0, 0, .35); }
.feuille::before, .feuille::after { content: ""; position: absolute; top: -11px; width: 22px; height: 22px; border-radius: 50%;
  background: var(--rouge); box-shadow: inset -3px -4px 0 rgba(0, 0, 0, .18), 0 3px 4px rgba(0, 0, 0, .2); }
.feuille::before { left: 18px; }
.feuille::after { right: 18px; background: var(--bleu); }
@media (min-width: 720px) { .feuille { padding: 42px 50px 36px; } }
.texte > :first-child { margin-top: 0; }
.texte h2 { margin: 1.7em 0 .5em; font-weight: 800; font-size: clamp(22px, 4.2vw, 28px); line-height: 1.2; letter-spacing: -.015em; }
.texte h3 { margin: 1.4em 0 .4em; font-weight: 700; font-size: 19px; line-height: 1.3; }
.texte p, .texte li { max-width: 68ch; }
.texte li { margin: .25em 0; }
.texte li::marker { color: var(--rouge-texte); font-weight: 700; }
.texte strong { font-weight: 700; }
.texte mark, .surligne { background: linear-gradient(transparent 12%, var(--fluo) 12% 88%, transparent 88%); color: inherit; padding: 0 .1em; }
.texte blockquote { margin: 1.2em 0; padding: 4px 0 4px 16px; border-left: 4px solid var(--postit); }
.tableau { overflow-x: auto; margin: 1.2em 0; -webkit-overflow-scrolling: touch; }
.tableau table { border-collapse: collapse; min-width: 100%; font-size: 15px; }
.tableau th, .tableau td { padding: 8px 12px; text-align: left; border-bottom: 1.5px solid var(--email-2); white-space: nowrap; }
.tableau th { font-weight: 700; border-bottom: 2px solid var(--feutre); }
.tableau tbody tr:nth-child(even) { background: #f8f9fb; }

/* « L'essentiel » : un post-it collé sur la feuille */
.essentiel { position: relative; margin: 0 0 26px; padding: 20px 20px 16px; background: var(--postit); transform: rotate(-.6deg); box-shadow: var(--ombre); }
.essentiel > :last-child { margin-bottom: 0; }
.essentiel-titre { margin: 0 0 4px; font: 400 22px/1.2 var(--main); }
.essentiel a, .reponse a { color: var(--feutre); }

/* Sommaire et questions */
.sommaire { margin: 0 0 22px; border: 2px dashed var(--email-2); border-radius: 6px; }
.sommaire summary { cursor: pointer; padding: 10px 14px; font: 400 20px/1.2 var(--main); }
.sommaire ol { margin: 0; padding: 0 14px 12px 38px; font-size: 15px; }
.faq { margin-top: 2em; }
.faq details { border-top: 1.5px solid var(--email-2); }
.faq details:last-child { border-bottom: 1.5px solid var(--email-2); }
.faq summary { position: relative; cursor: pointer; list-style: none; padding: 14px 34px 14px 0; font-weight: 700; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 4px; top: 8px; font: 400 28px/1 var(--main); color: var(--rouge-texte); }
.faq details[open] summary::after { content: "–"; }
.faq details p { margin: 0 0 16px; }

/* Pages « donnees » et « outil » : la réponse et l'outil en grand */
.reponse { position: relative; margin: 22px 0 8px; padding: 26px 20px 20px; background: var(--postit); box-shadow: var(--ombre); max-width: 900px; }
.reponse > p:first-child { font-weight: 700; font-size: clamp(21px, 4.4vw, 28px); line-height: 1.25; }
.scene { margin: 22px 0 8px; padding: 22px 18px; background: var(--papier); border: 2px solid var(--feutre); border-radius: 6px; box-shadow: 0 6px 0 var(--feutre); }
.scene > h2 { margin-top: 0; font-size: clamp(22px, 4.2vw, 28px); }
.donnee-maj { font-size: 14px; color: var(--doux); }
.donnee-maj a { color: var(--doux); }

/* Notes aimantées (À voir aussi, rubriques, 404) */
.aussi { margin-bottom: 40px; }
.aussi > h2, .liste-groupe > h2 { font-weight: 800; font-size: clamp(21px, 4vw, 26px); letter-spacing: -.015em; margin: 0 0 18px; }
.liste-groupe > h2 a { color: inherit; }
.liste { padding-top: 18px; padding-bottom: 30px; }
.liste-groupe { margin-bottom: 34px; }
.notes { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 24px 16px; list-style: none; margin: 0; padding: 0; }
.note a { position: relative; display: flex; flex-direction: column; gap: 6px; min-height: 128px; height: 100%; padding: 22px 16px 16px;
  color: var(--feutre); text-decoration: none; background: var(--postit); box-shadow: var(--ombre); transform: rotate(-.8deg); }
.note-1 a { background: var(--ciel); transform: rotate(.7deg); }
.note-2 a { background: var(--vert); transform: rotate(-.4deg); }
.note-3 a { background: var(--peche); transform: rotate(.9deg); }
.note .aimant { position: absolute; top: -10px; left: 14px; width: 20px; height: 20px; }
.note-type { font: 400 18px/1.1 var(--main); color: #3a3f48; }
.note-titre { font-weight: 700; font-size: 18px; line-height: 1.25; }
.note-date { margin-top: auto; font-size: 13px; color: #3a3f48; }
.note a:hover .note-titre { text-decoration: underline; }

/* Pied : le bas de la porte */
.pied { margin-top: 20px; border-top: 3px solid var(--email-2); font-size: 14px; color: var(--doux); }
.pied-in { padding: 24px 16px 40px; }
.pied p { margin: 0 0 10px; max-width: 80ch; }
.pied a { color: var(--doux); }
.pied a:hover { color: var(--feutre); }
.pied-marque { display: flex; align-items: center; gap: 8px; font-weight: 800; font-size: 17px; color: var(--feutre); }
.pied-marque .aimant { width: 18px; height: 18px; }
.pied-liens { display: flex; flex-wrap: wrap; gap: 6px 20px; list-style: none; margin: 14px 0; padding: 0; }

@media (prefers-reduced-motion: no-preference) {
  .note a { transition: transform .18s ease, box-shadow .18s ease; }
  .note a:hover { transform: rotate(0) translateY(-3px); box-shadow: 0 20px 22px -14px rgba(0, 0, 0, .4); }
}
@media print {
  body { background: #fff; }
  .haut, .pied, .aussi, .saut { display: none; }
  .feuille { box-shadow: none; margin: 0; padding: 0; }
  .feuille::before, .feuille::after { display: none; }
}