/* pierrelux.net — feuille de style du site public
   Parti pris : le cahier de maths. Papier quadrillé (Seyès), encre bleue, marge rouge, surligneur jaune. */

:root {
  --papier: #fbfcff;
  --encre: #17245e;
  --encre-fonce: #0f1840;
  --texte: #161a33;
  --gris: #565d82;
  --ligne: #c9d3f0;
  --marge: #d4373f;
  --surligneur: #ffe97a;
  --carte: #ffffff;
  --bord: #d9dff3;
  --lien: #1f3fb5;
  --rayon: 6px;
  --police-titre: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --police-texte: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --largeur: 1180px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 5rem; }
body {
  margin: 0;
  background: var(--papier);
  color: var(--texte);
  font: 1rem/1.6 var(--police-texte);
}
img { max-width: 100%; height: auto; }
[hidden] { display: none !important; }
a { color: var(--lien); text-underline-offset: 0.15em; }
a:hover { color: var(--encre); }
:focus-visible { outline: 3px solid var(--marge); outline-offset: 2px; }
h1, h2, h3 { font-family: var(--police-titre); color: var(--encre); line-height: 1.2; margin: 0 0 0.6rem; }
h1 { font-size: clamp(1.7rem, 4vw, 2.4rem); }
h2 { font-size: 1.35rem; }
.petit { font-size: 0.85rem; color: var(--gris); }

.saut { position: absolute; left: -999px; top: 0; background: var(--surligneur); color: #000; padding: 0.5rem 1rem; z-index: 100; }
.saut:focus { left: 0.5rem; top: 0.5rem; }

/* ---------- Bandeau et navigation ---------- */
.bandeau { background: var(--encre-fonce); color: #fff; position: sticky; top: 0; z-index: 50; border-bottom: 3px solid var(--marge); }
.bandeau-interieur { max-width: var(--largeur); margin: 0 auto; padding: 0.5rem 1rem; display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; }
.marque { text-decoration: none; color: #fff; display: flex; flex-direction: column; line-height: 1.15; margin-right: auto; }
.marque-nom { font-family: var(--police-titre); font-size: 1.6rem; font-weight: 700; letter-spacing: 0.01em; }
.marque-sous { font-size: 0.8rem; color: #c3cdf5; }
.bandeau-mobile { display: none; align-items: center; gap: 0.6rem; }
.photo-marge { position: absolute; left: 1rem; margin-top: 0.9rem; width: 110px; z-index: 5; }
.photo-marge img { width: 100%; height: auto; display: block; border-radius: var(--rayon); border: 1px solid var(--bord); }
.menu-bouton { display: none; background: transparent; color: #fff; border: 1px solid #5e6bb0; border-radius: var(--rayon); padding: 0.4rem 0.9rem; font: inherit; cursor: pointer; }

.nav ul { list-style: none; margin: 0; padding: 0; }
.nav > ul { display: flex; gap: 0.25rem; flex-wrap: wrap; }
.nav-groupe { position: relative; }
.nav-tete { background: transparent; color: #fff; border: 0; font: inherit; padding: 0.6rem 0.85rem; cursor: pointer; border-radius: var(--rayon); }
.nav-tete::after { content: ""; display: inline-block; margin-left: 0.4rem; border: 4px solid transparent; border-top-color: currentColor; transform: translateY(2px); }
.nav-tete:hover, .nav-groupe.est-ouvert > .nav-tete, .nav-groupe.est-actif > .nav-tete { background: rgba(255, 255, 255, 0.12); }
.nav-groupe.est-actif > .nav-tete { box-shadow: inset 0 -3px 0 var(--surligneur); }
.nav-panneau { display: none; position: absolute; top: 100%; left: 0; min-width: 18rem; max-width: 26rem; background: var(--carte); color: var(--texte); border: 1px solid var(--bord); border-radius: var(--rayon); box-shadow: 0 8px 24px rgba(15, 24, 64, 0.18); padding: 0.75rem; }
.nav-panneau.nav-droite { left: auto; right: 0; }
.nav-groupe.est-ouvert > .nav-panneau { display: block; }
.nav-panneau a { display: block; padding: 0.3rem 0.5rem; border-radius: 4px; text-decoration: none; color: var(--lien); }
.nav-panneau a:hover { background: #eef1fc; }
.nav-racine { font-weight: 600; border-bottom: 1px solid var(--bord); margin-bottom: 0.4rem; padding-bottom: 0.5rem !important; border-radius: 0 !important; }
.nav-externes { margin-top: 0.5rem !important; padding-top: 0.5rem !important; border-top: 1px dashed var(--bord); }
.nav-externes a { color: var(--gris); font-size: 0.92rem; }

/* ---------- Mise en page générale ---------- */
.principal { max-width: min(var(--largeur), calc(100vw - 280px)); margin: 0 auto; padding: 1.5rem 1rem 3rem; }
.alerte-fiche { background: var(--surligneur); color: #3a3000; text-align: center; padding: 0.75rem 1rem; font-weight: 600; }

.page { max-width: 62rem; margin: 0 auto; }
.ariane { font-size: 0.88rem; color: var(--gris); margin-bottom: 1rem; display: flex; gap: 0.5rem; flex-wrap: wrap; }
.ariane a { color: var(--gris); }
.page-tete { border-left: 4px solid var(--marge); padding-left: 1rem; margin-bottom: 1.5rem; }
.page-parent { margin: 0; color: var(--gris); font-family: var(--police-titre); font-style: italic; }
.page-verrou { background: var(--surligneur); padding: 0.5rem 0.75rem; border-radius: var(--rayon); margin: 0.75rem 0 0; font-size: 0.95rem; }

.freres { display: flex; gap: 0.4rem; flex-wrap: wrap; margin-bottom: 1.25rem; }
.freres a { padding: 0.3rem 0.75rem; border: 1px solid var(--bord); border-radius: 999px; text-decoration: none; font-size: 0.9rem; background: var(--carte); }
.freres a[aria-current="page"] { background: var(--encre); color: #fff; border-color: var(--encre); }

.sommaire { background: var(--carte); border: 1px solid var(--bord); border-radius: var(--rayon); padding: 0.75rem 1rem; margin-bottom: 1.5rem; }
.sommaire h2 { font-size: 1rem; margin-bottom: 0.4rem; }
.sommaire ol { margin: 0; padding-left: 1.25rem; columns: 2 18rem; column-gap: 2rem; }
.sommaire li { break-inside: avoid; padding: 0.1rem 0; }

.division { background: var(--carte); border: 1px solid var(--bord); border-radius: var(--rayon); padding: 1rem 1.25rem; margin-bottom: 1.25rem; }
.division h2 { border-bottom: 2px solid var(--ligne); padding-bottom: 0.35rem; margin-bottom: 0.75rem; }
.division:target { box-shadow: 0 0 0 3px var(--surligneur); }
.division-cachee { background: var(--surligneur); color: #3a3000; font-family: var(--police-texte); font-size: 0.7rem; padding: 0.1rem 0.4rem; border-radius: 3px; vertical-align: middle; }
.vide { color: var(--gris); font-style: italic; }
.liste-rubriques { columns: 2 16rem; }

/* HTML saisi dans l'espace prof : on neutralise l'ancienne mise en forme sans toucher aux couleurs */
.ancien-html { overflow-x: auto; }
.ancien-html font { font-size: inherit; font-family: inherit; }
.ancien-html table { max-width: 100%; border-collapse: collapse; }
.ancien-html td, .ancien-html th { vertical-align: top; }
.ancien-html img { max-width: 100%; height: auto; }
.ancien-html p { margin: 0.5rem 0; }

/* ---------- Éléments de contenu (cours, exercices, devoirs…) ---------- */
.items { display: flex; flex-direction: column; gap: 0.35rem; margin: 0.5rem 0; }
.item { --t: #5b6285; display: grid; grid-template-columns: 9.5rem 1fr; gap: 0.75rem; align-items: start; background: #f4f6fd; border-left: 4px solid var(--t); border-radius: 0 var(--rayon) var(--rayon) 0; padding: 0.4rem 0.75rem; }
.item-type { font-weight: 600; color: var(--t); text-decoration: none; display: flex; flex-direction: column; line-height: 1.25; }
a.item-type:hover { text-decoration: underline; color: var(--t); }
.item-verrou { font-weight: 400; color: #b34700; font-size: 0.75rem; }
.item-corps { min-width: 0; overflow-wrap: anywhere; }
.item-texte { color: var(--texte); }
.item-note { color: var(--gris); font-size: 0.85rem; }
.item-action { font-weight: 600; margin-left: 0.5rem; }
.item-aucun { display: block; background: transparent; border-left-color: var(--ligne); }
.item-titre { font-weight: 600; }
.t-cours { --t: #b45309; } .t-exercice { --t: #4b1d82; } .t-devoir { --t: #7a4d66; }
.t-correction { --t: #007a87; } .t-document { --t: #662266; } .t-revision { --t: #990000; }
.t-video { --t: #6b7a1f; } .t-animation { --t: #b0124a; } .t-quiz { --t: #3b6a82; }
.t-geogebra { --t: #1f7a5c; } .t-algobox { --t: #3f7f3f; } .t-programme { --t: #a15c00; }
.t-ouvert { --t: #006400; } .t-enligne { --t: #2a5ea8; } .t-salleinfo { --t: #6b4f1d; } .t-tableur { --t: #2f7d32; }

/* ---------- Accueil ---------- */
.accueil-grille { display: grid; grid-template-columns: minmax(0, 1fr) 19rem; gap: 1.5rem; align-items: start; }
.note-acces { background: var(--carte); border: 1px solid var(--bord); border-left: 4px solid var(--surligneur); border-radius: var(--rayon); padding: 0.75rem 1rem; margin-bottom: 1.5rem; font-size: 0.93rem; }
.note-acces p { margin: 0 0 0.25rem; }
.note-acces ul { margin: 0; padding-left: 1.2rem; }

/* Le calcul du jour : une page de cahier Seyès, avec sa marge rouge */
.calcul { position: relative; display: flex; border: 1px solid var(--ligne); border-radius: var(--rayon); margin-bottom: 1.5rem; overflow: hidden;
  background:
    linear-gradient(90deg, rgba(110, 130, 215, 0.35) 1px, transparent 1px) 0 0 / 32px 32px,
    linear-gradient(0deg, rgba(110, 130, 215, 0.35) 1px, transparent 1px) 0 0 / 32px 32px,
    linear-gradient(0deg, rgba(110, 130, 215, 0.16) 1px, transparent 1px) 0 0 / 32px 8px,
    #fdfdff; }
.calcul-marge { flex: 0 0 3.5rem; border-right: 2px solid var(--marge); }
.calcul-corps { padding: 1.25rem 1.5rem 1.5rem; min-width: 0; }
.calcul h1 { margin-bottom: 0.2rem; }
.calcul-aide { margin: 0 0 1rem; color: var(--gris); }
.calcul-carte { margin: 0 0 1rem; background: #fff; border: 1px solid var(--bord); border-radius: var(--rayon); padding: 0.75rem; display: inline-block; max-width: 100%; }
.calcul-carte img { display: block; }
.calcul-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }

.bouton { background: var(--encre); color: #fff; border: 2px solid var(--encre); border-radius: var(--rayon); padding: 0.5rem 1rem; font: inherit; font-weight: 600; cursor: pointer; }
.bouton:hover { background: var(--encre-fonce); }
.bouton-discret { background: transparent; color: var(--encre); }
.bouton-discret:hover { background: #eef1fc; }

.bloc { background: var(--carte); border: 1px solid var(--bord); border-radius: var(--rayon); padding: 1rem 1.25rem; margin-bottom: 1.25rem; }
.bloc h2 { border-bottom: 2px solid var(--ligne); padding-bottom: 0.3rem; }
.video-bloc { display: flex; flex-direction: column; align-items: center; gap: 0.75rem; text-align: center; }
.video-bloc p { margin: 0; }
.une { border-top: 4px solid var(--t, var(--ligne)); }
.une h2 { color: var(--t, var(--encre)); }
.une-image { text-align: center; margin: 0 0 0.5rem; }
.une-liste { list-style: none; margin: 0; padding: 0; }
.une-liste li { padding: 0.3rem 0; border-bottom: 1px dashed var(--bord); }
.une-liste li:last-child { border-bottom: 0; }
.une-liste .une-niveau { font-family: var(--police-titre); font-weight: 700; color: var(--encre); border-bottom: 2px solid var(--ligne); padding-top: 0.6rem; }
.une-origine { display: block; color: var(--gris); font-size: 0.85rem; }
.une-lien { font-weight: 600; margin-left: 0.4rem; }
.outils table { width: 100%; }
.outils td { padding: 0.25rem 0.5rem; }
.humour { text-align: center; }
.humour h2 { text-align: left; }

.accueil-cote { display: flex; flex-direction: column; gap: 1rem; position: sticky; top: 5rem; }
.carte { background: var(--carte); border: 1px solid var(--bord); border-radius: var(--rayon); padding: 1rem; }
.carte h2 { font-size: 1.1rem; }
.connexion label { display: block; font-size: 0.88rem; font-weight: 600; margin-top: 0.5rem; }
.connexion input[type="text"], .connexion input[type="password"] { width: 100%; padding: 0.45rem 0.6rem; border: 1px solid #9aa5d6; border-radius: 4px; font: inherit; }
.connexion .case { font-weight: 400; display: flex; gap: 0.4rem; align-items: center; margin: 0.6rem 0; }
.connexion .bouton { width: 100%; }
.connexion-liens { display: flex; flex-direction: column; gap: 0.2rem; font-size: 0.9rem; margin: 0.75rem 0 0; }
.messages ul { margin: 0; padding-left: 1.1rem; }
.cote-contenu { font-size: 0.9rem; }
.maj { margin: 0.75rem 0 0; text-align: center; }

/* ---------- Plan du site, liens ---------- */
.plan-grille { columns: 2 20rem; column-gap: 1.5rem; }
.plan-rubrique { break-inside: avoid; background: var(--carte); border: 1px solid var(--bord); border-radius: var(--rayon); padding: 0.75rem 1rem; margin-bottom: 1rem; }
.plan-rubrique h2 { font-size: 1.1rem; }
.plan-rubrique ul { margin: 0; padding-left: 1.1rem; }
.plan-ferme { color: #8a90ad; }
.liens { list-style: none; padding: 0; margin: 0; }
.liens li { padding: 0.5rem 0; border-bottom: 1px dashed var(--bord); }
.liens p { margin: 0.2rem 0 0; font-size: 0.9rem; color: var(--gris); }

/* ---------- Pages d'information (fonctionnement, auteur…) ---------- */
.texte-long { max-width: 46rem; }
.tarifs { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 1rem; margin: 1.5rem 0; }
.tarif { background: var(--carte); border: 1px solid var(--bord); border-top: 4px solid var(--encre); border-radius: var(--rayon); padding: 1rem 1.25rem; }
.tarif-gratuit { border-top-color: #1f7a5c; }
.tarif-inscrit { border-top-color: var(--lien); }
.tarif-payant { border-top-color: var(--marge); }
.galerie { display: flex; gap: 1rem; flex-wrap: wrap; margin: 1.5rem 0; }
.galerie img { border-radius: var(--rayon); border: 1px solid var(--bord); max-height: 260px; width: auto; }

/* ---------- Agenda ---------- */
.agenda-outils { display: flex; gap: 0.75rem 1.5rem; flex-wrap: wrap; align-items: center; justify-content: space-between; margin-bottom: 1.25rem; }
.agenda-mois { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.agenda-mois a { padding: 0.25rem 0.7rem; border: 1px solid var(--bord); border-radius: 999px; background: var(--carte); text-decoration: none; font-size: 0.9rem; }
.agenda-filtre { font-size: 0.92rem; display: flex; gap: 0.4rem; align-items: center; }
.agenda-bloc { background: var(--carte); border: 1px solid var(--bord); border-radius: var(--rayon); margin-bottom: 1.25rem; overflow: hidden; }
.agenda-bloc h2 { margin: 0; padding: 0.6rem 1rem; background: var(--encre); color: #fff; font-size: 1.15rem; text-transform: capitalize; }
.agenda-jour { display: grid; grid-template-columns: 9.5rem 1fr; gap: 0.75rem; padding: 0.35rem 1rem; border-top: 1px solid #edf0fa; }
.agenda-jour.est-weekend { background: #f6f7fc; color: var(--gris); }
.agenda-jour.est-vacances { background: #fff6cf; }
.agenda-jour.est-aujourdhui { box-shadow: inset 4px 0 0 var(--marge); font-weight: 600; }
.agenda-nom { text-transform: capitalize; }
.agenda-num { font-weight: 700; }
.agenda-date small { color: #8a6a00; margin-left: 0.3rem; }
.agenda-ligne { margin: 0.1rem 0; }
.puce { display: inline-block; font-size: 0.75rem; font-weight: 700; padding: 0.05rem 0.5rem; border-radius: 999px; background: #e7ebfa; color: var(--encre); vertical-align: 1px; }
.puce-devoir { background: #f3e4ec; color: #7a2d55; }
.puce-examen { background: #fde0e2; color: #9b1c25; }
.puce-reunion { background: #dff1ee; color: #0b5d54; }
.puce-faire { background: #fff0c2; color: #6b4a00; }
.puce-notes { background: #ece6fa; color: #4b1d82; }
.puce-cours { background: #dff3e1; color: #1f6a2a; }
.agenda.sans-vides .agenda-jour.est-vide { display: none; }
@media (max-width: 700px) { .agenda-jour { grid-template-columns: 1fr; gap: 0; } }

/* ---------- Pied de page ---------- */
.pied { background: var(--encre-fonce); color: #c3cdf5; margin-top: 2rem; }
.pied a { color: #fff; }
.pied-interieur { max-width: var(--largeur); margin: 0 auto; padding: 1.5rem 1rem; display: flex; gap: 1rem 2rem; flex-wrap: wrap; justify-content: space-between; font-size: 0.9rem; }
.pied-texte { max-width: 34rem; }
.pied-liens { display: flex; gap: 1rem; flex-wrap: wrap; margin: 0; }

/* ---------- Adaptation aux petits écrans ---------- */
@media (max-width: 1100px) {
  .photo-marge { position: static; display: block; width: 64px; margin: 0.5rem 0 0 1rem; }
  .bandeau-mobile { display: flex; }
  .principal { max-width: var(--largeur); }
  .marque-nom { font-size: 1.05rem; }
  .marque-sous { font-size: 0.75rem; }
  .accueil-grille { grid-template-columns: 1fr; }
  .accueil-cote { position: static; order: -1; }
  .menu-bouton { display: block; }
  .nav { display: none; width: 100%; }
  .nav.est-ouvert { display: block; }
  .nav > ul { flex-direction: column; }
  .nav-tete { width: 100%; text-align: left; }
  .nav-panneau, .nav-panneau.nav-droite { position: static; display: none; max-width: none; box-shadow: none; margin: 0 0 0.5rem; }
  .item { grid-template-columns: 1fr; gap: 0.1rem; }
  .calcul-marge { flex-basis: 1.75rem; }
  .calcul-corps { padding: 1rem; }
}
@media print {
  .bandeau, .accueil-cote, .menu-bouton, .pied, .sommaire, .freres { display: none; }
  .division { border: 0; padding: 0; }
}
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; } }