/* Stéphane Côté : le cahier de textes (15 octobre 2026) */
:root {
  --tableau: #24493b; --tableau-2: #1c3a2f; --craie: #f3f1e7; --bois: #8a5a32;
  --papier: #fdfcf7; --carreau: #e3ebf3; --encre: #1f2a37; --gris: #5c6672; --filet: #d9dee5;
  --rouge: #d64545; --bleu: #2f6fbf; --vert: #2e9461; --jaune: #e2b007; --violet: #7d55b8; --orange: #e0782b;
}
* { box-sizing: border-box; }
body { margin: 0; color: var(--encre); font: 300 1.04rem/1.72 'Readex Pro', system-ui, sans-serif;
  background-color: var(--papier); background-image: linear-gradient(var(--carreau) 1px, transparent 1px), linear-gradient(90deg, var(--carreau) 1px, transparent 1px); background-size: 22px 22px; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--bleu); text-underline-offset: .2em; }
b, strong { font-weight: 600; }
h1, h2, h3, h4 { font-family: 'Readex Pro', system-ui, sans-serif; font-weight: 700; line-height: 1.2; }
.sonnerie { position: absolute; left: -999px; }
.sonnerie:focus { left: 1rem; top: 1rem; background: var(--jaune); padding: .5rem 1rem; z-index: 9; }
.gommette--rouge { --g: var(--rouge); } .gommette--bleu { --g: var(--bleu); } .gommette--vert { --g: var(--vert); }
.gommette--jaune { --g: var(--jaune); } .gommette--violet { --g: var(--violet); } .gommette--orange { --g: var(--orange); }
.jour--rouge, .lecon--rouge { --g: var(--rouge); } .jour--bleu, .lecon--bleu { --g: var(--bleu); } .jour--vert, .lecon--vert { --g: var(--vert); }
.jour--jaune, .lecon--jaune { --g: var(--jaune); } .jour--violet, .lecon--violet { --g: var(--violet); } .jour--orange, .lecon--orange { --g: var(--orange); }

/* gommettes : pastilles rondes de couleur devant le nom */
.gommette { display: inline-flex; align-items: center; gap: .45rem; text-decoration: none; color: var(--encre); font-weight: 600; font-size: .9rem; }
.gommette::before { content: ""; width: .85rem; height: .85rem; border-radius: 50%; background: var(--g); box-shadow: inset -2px -2px 0 rgba(0,0,0,.15); flex: none; }

/* l'estrade : en-tête */
.estrade { background: var(--papier); border-bottom: 3px double var(--filet); }
.estrade__in { max-width: 1160px; margin: 0 auto; padding: .9rem 1rem; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .7rem 1.6rem; }
.estrade__nom { display: grid; text-decoration: none; color: var(--encre); font: 700 1.4rem/1.1 'Readex Pro', sans-serif; }
.estrade__nom span { font: 400 1.1rem/1.2 'Patrick Hand', cursive; color: var(--vert); }
.estrade__nav { display: flex; flex-wrap: wrap; gap: .4rem 1.1rem; }
.estrade__nav a[aria-current] { text-decoration: underline; text-decoration-thickness: 2px; text-decoration-color: var(--g); }

main { max-width: 1160px; margin: 0 auto; padding: 0 1rem 3rem; }

/* le tableau vert */
.tableau { margin-top: 1.8rem; background: radial-gradient(ellipse at 30% 20%, #2c5747, var(--tableau) 60%, var(--tableau-2)); color: var(--craie); border: 12px solid var(--bois); border-radius: 6px; padding: 2rem clamp(1rem, 4vw, 2.6rem) 1.8rem; box-shadow: 0 6px 0 #6d4527; }
.tableau h1 { margin: 0 0 .6rem; font-size: clamp(1.5rem, 3.6vw, 2.3rem); color: #fff; }
.tableau p { margin: .4rem 0 0; max-width: 760px; color: #dbe5df; }
.tableau .tableau__craie { font: 400 1.5rem/1.3 'Patrick Hand', cursive; color: var(--craie); }
.tableau--rubrique h1 { font: 400 2.4rem/1.1 'Patrick Hand', cursive; }

/* l'emploi du temps */
.edt { margin: 2.4rem 0; }
.edt h2 { font: 400 1.9rem/1 'Patrick Hand', cursive; margin: 0 0 .9rem; }
.edt__grille { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0; background: #fff; border: 2px solid var(--encre); }
.jour { border-right: 1px solid var(--filet); padding: 0 0 .6rem; display: grid; align-content: start; gap: .6rem; min-width: 0; }
.jour:last-child { border-right: 0; }
.jour h3 { margin: 0; padding: .6rem .7rem; background: var(--g); color: #fff; display: grid; font-size: 1.02rem; }
.jour h3 span { font: 400 .95rem/1.1 'Patrick Hand', cursive; opacity: .9; }
.jour h3 a { color: #fff; text-decoration: none; }
.cours { display: grid; gap: .35rem; margin: 0 .55rem; padding: .45rem; text-decoration: none; color: var(--encre); background: color-mix(in srgb, var(--g) 12%, #fff); border-left: 4px solid var(--g); border-radius: 0 6px 6px 0; }
.cours__img { aspect-ratio: 4 / 3; overflow: hidden; border-radius: 4px; background: var(--filet); }
.cours__img img { width: 100%; height: 100%; object-fit: cover; }
.cours__t { font-size: .88rem; font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
.cours:hover .cours__t { text-decoration: underline; }

/* les trois publics */
.publics { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 1.2rem; }
.publics > * { min-width: 0; }
.public { background: #fff; border: 1px solid var(--filet); border-top: 6px solid var(--tableau); padding: 1.2rem 1.2rem 1.3rem; }
.public h2 { margin: 0 0 .4rem; font-size: 1.15rem; }
.public p { margin: 0 0 .8rem; color: var(--gris); font-size: .95rem; }
.public .public__liens { display: flex; flex-wrap: wrap; gap: .4rem 1rem; margin: 0; }

/* la leçon (article) */
.lecon { max-width: 840px; margin: 0 auto; }
.lecon__tete { padding: 2.2rem 0 1rem; }
.lecon__marge { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem 1.2rem; margin: 0 0 .8rem; color: var(--gris); font-size: .88rem; }
.lecon__tete h1 { margin: 0; font-size: clamp(1.55rem, 3.6vw, 2.3rem); overflow-wrap: anywhere; }
.lecon__img { margin: .4rem 0 1.6rem; }
.lecon__img img { border-radius: 6px; }
.lecon__texte { background: #fff; border: 1px solid var(--filet); border-left: 4px solid var(--g, var(--rouge)); padding: 1.6rem clamp(1rem, 4vw, 2.4rem); overflow-wrap: anywhere; }
.lecon__texte h2 { font-size: 1.4rem; margin: 2rem 0 .7rem; }
.lecon__texte h2::after { content: ""; display: block; width: 3.5rem; height: 3px; margin-top: .35rem; background: var(--g, var(--rouge)); }
.lecon__texte h3 { font-size: 1.15rem; margin: 1.5rem 0 .5rem; }
.lecon__texte table { width: 100%; border-collapse: collapse; margin: 1.2rem 0; font-size: .93rem; display: block; overflow-x: auto; }
.lecon__texte th, .lecon__texte td { border: 1px solid var(--filet); padding: .55rem .7rem; text-align: left; vertical-align: top; }
.lecon__texte th { background: var(--carreau); }
.lecon__texte blockquote { margin: 1.2rem 0; padding: .9rem 1.2rem; background: #fffbea; border-left: 4px solid var(--jaune); }

/* les copies (listes) */
.devoirs { max-width: 1000px; margin: 2.6rem auto 0; }
.devoirs h2 { font: 400 1.7rem/1 'Patrick Hand', cursive; }
.devoirs--large { margin-top: 1.6rem; }
.copies { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 440px), 1fr)); gap: .8rem; }
.copies > * { min-width: 0; }
.copie { display: grid; grid-template-columns: 120px 1fr; gap: .9rem; align-items: center; background: #fff; border: 1px solid var(--filet); padding: .55rem; text-decoration: none; color: var(--encre); }
.copie__img { aspect-ratio: 4 / 3; overflow: hidden; background: var(--filet); }
.copie__img img { width: 100%; height: 100%; object-fit: cover; }
.copie__c { display: grid; gap: .2rem; min-width: 0; }
.copie__t { font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
.copie__m { font-size: .82rem; color: var(--gris); }
.copie:hover .copie__t { text-decoration: underline; }

/* le carnet de correspondance */
.carnet { margin-top: 3.5rem; background: var(--tableau); color: #e5ece8; padding: 2.2rem 1rem; }
.carnet__in { max-width: 1160px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 1.2rem 2rem; }
.carnet__cadre { background: var(--papier); color: var(--encre); padding: 1.1rem 1.2rem; border: 2px solid var(--encre); grid-row: span 2; }
.carnet__titre { margin: 0 0 .5rem; font: 400 1.5rem/1 'Patrick Hand', cursive; }
.carnet__cadre p { margin: 0 0 .6rem; font-size: .9rem; }
.carnet__vu { margin: 1rem 0 0 !important; padding-top: 2.2rem; border-top: 1px dashed var(--gris); font: 400 1.05rem/1 'Patrick Hand', cursive !important; color: var(--gris); text-align: right; }
.carnet__rubriques { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem 1rem; }
.carnet__rubriques .gommette { color: #fff; }
.carnet__pages a { color: #fff; }

@media (max-width: 1000px) { .edt__grille { grid-template-columns: repeat(3, minmax(0, 1fr)); } .jour:nth-child(3) { border-right: 0; } }
/* socle du 15/10 : avertissement du pied de page, formulaire de contact */
.carnet__avis { grid-column: 1 / -1; margin: .8rem 0 0; font-size: .85rem; opacity: .85; }
.mot { margin-top: 1.6rem; display: grid; gap: .2rem; }
.mot label { display: block; font-weight: 600; margin-bottom: .3rem; }
.mot input, .mot textarea { width: 100%; box-sizing: border-box; font: inherit; padding: .6rem .7rem; border: 1px solid var(--filet); border-radius: 4px; background: #fff; }
.mot button { font: inherit; font-weight: 600; padding: .7rem 1.4rem; border: 0; border-radius: 4px; background: var(--vert, #24493b); color: #fff; cursor: pointer; }
.mot__piege { position: absolute; left: -9999px; }
.mot__ok { padding: .8rem 1rem; background: #e8f4ec; border-left: 4px solid var(--vert, #24493b); }

.lecon__texte .plus-loin { margin-top: 2rem; padding: .9rem 1.1rem; background: var(--carreau); border-left: 4px solid var(--g, var(--rouge)); }
@media (max-width: 620px) {
  .edt__grille { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .carnet__in { grid-template-columns: 1fr; }
  .copie { grid-template-columns: 90px 1fr; }
}