/* Niveau : deux par deux sur l’accueil, choix centrés dans les ressources. */
#home-levels{grid-template-columns:repeat(2,minmax(0,1fr));max-width:1200px;margin-inline:auto}
.reading-levels,.ce-levels,.atelier-levels,.literature-levels{justify-content:center;margin-inline:auto}
.reading-book{transition:border-color .18s,box-shadow .18s;background:var(--surface)}
.reading-book:hover,.reading-book:focus-within{border-color:var(--book-level-color);box-shadow:0 0 0 2px var(--book-level-color),0 8px 24px #0002;background:color-mix(in srgb,var(--book-level-color) 10%,var(--surface))}
.book-cover{object-fit:contain;object-position:center;width:100%;height:220px;max-height:220px;max-width:180px;margin-inline:auto}
.reading-search-heading{align-items:center;gap:2rem}.reading-search-box{display:flex;align-items:center;gap:.6rem;flex:0 1 360px;font-weight:650}.reading-search-box img{object-fit:contain;flex:none}.reading-search-box span{display:grid;gap:.5rem}.reading-search-box input{width:100%;min-width:0;padding:.8rem;border-radius:14px;border:1px solid var(--line);background:var(--surface);color:var(--ink);font:inherit}.reading-search-box input:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.work-entry>summary{cursor:pointer;padding:1rem 0;font:400 1.5rem/1.35 Georgia,serif;white-space:normal}.work-entry[open]>summary{margin-bottom:.7rem}
.season-discovery.season-letter{display:inline-flex;align-items:center;justify-content:center;width:.78em;height:1em;min-width:0;min-height:0;padding:0;border-radius:0;vertical-align:-.12em;position:relative}.season-discovery.season-letter svg{width:.78em;height:1em;transform:none}.season-letter::after{content:'';position:absolute;inset:-8px -4px}
.ce-image-enlarge{margin:.6rem 0;padding:.5rem .85rem;border:1px solid var(--line);border-radius:12px;background:var(--surface);color:var(--ink);font:inherit;cursor:pointer}
.museum-image-dialog{width:min(96vw,1500px);max-width:96vw;height:92dvh;max-height:94dvh;padding:1rem;background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:20px}.museum-image-dialog::backdrop{background:#071113d9}.museum-image-dialog[open]{display:flex;flex-direction:column;gap:.6rem}.museum-image-dialog img{display:block;width:100%;height:100%;min-height:0;object-fit:contain;flex:1}.museum-image-dialog button{align-self:flex-end;padding:.7rem 1rem;font:inherit;color:inherit;background:transparent;border:1px solid var(--line);border-radius:12px;cursor:pointer}.museum-image-dialog p{margin:0;text-align:center}.museum-image-dialog :focus-visible{outline:3px solid var(--ink);outline-offset:3px}
#culture-explorer a[href^='#atelier']{background:#e8cd9a;color:#19363d;border:1px solid #b78043;border-radius:12px;padding:.65rem .9rem;display:inline-block}#culture-explorer a[href*='chapitre=literature']{background:#d7ece6;color:#193f37;border:1px solid #518879;border-radius:12px;padding:.65rem .9rem;display:inline-block}
@media(min-width:1200px){.reading-grid,.work-entry .works-grid,.museum-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.reading-book{flex-direction:column;padding:1.1rem;gap:1rem}.reading-book h3{font-size:1.25rem}}
@media(max-width:700px){.reading-search-heading{display:block}.reading-search-box{margin-top:1.2rem;max-width:100%}.reading-search-box img{width:58px;height:58px}.reading-search-box span{flex:1}.museum-image-dialog{padding:.65rem}}
@media(max-width:560px){#home-levels{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.reading-book{transition:none}}

.book-cover-frame{width:180px;max-width:100%;aspect-ratio:283/370;overflow:hidden;flex:none;margin-inline:auto}.book-cover-frame .book-cover{width:100%;height:100%;max-width:none;max-height:none;object-fit:contain;object-position:center;filter:none}

/* L’illustration dicte la composition : texte directement sur le papier,
   livres à gauche et encre en bas dégagés. Les saisons gardent leur décor. */
html:not([data-season]) #panel-accueil .home-hero{
  grid-template-columns:minmax(0,1.25fr) minmax(0,.85fr);
  gap:8%;align-items:start;
  padding:clamp(40px,4vw,80px) 5% clamp(115px,10vw,205px) 21%;
  min-height:37.5vw;
}
html:not([data-season]) #panel-accueil .home-copy{
  background:none;border:0;border-radius:0;box-shadow:none;
  backdrop-filter:none;padding:0;margin:0;min-width:0;
  color:#142e33;
}
html:not([data-season]) #panel-accueil .home-copy h1{
  font-size:clamp(2rem,3.2vw,3.4rem);text-wrap:balance;
}
html:not([data-season]) #panel-accueil .home-copy .introduction{
  color:#223c40;text-wrap:pretty;
}
html:not([data-season]) #panel-accueil .echo-art{align-self:center;min-width:0}
@media(max-width:900px) and (min-width:621px){
  html:not([data-season]) #panel-accueil .home-hero{padding-left:20%;gap:5%;grid-template-columns:minmax(0,1.4fr) minmax(0,.8fr)}
  html:not([data-season]) #panel-accueil .echo-art span{transform:none}
}
@media(max-width:620px){
  html:not([data-season]) #panel-accueil .home-hero{
    grid-template-columns:minmax(0,1fr);gap:1.5rem;
    padding:8vw 6% 48vw 27%;min-height:150vw;
  }
  html:not([data-season]) #panel-accueil .home-copy h1{font-size:clamp(1.9rem,7vw,2.7rem)}
  html:not([data-season]) #panel-accueil .home-cta{gap:.6rem;margin-top:1rem;max-width:100%;white-space:normal}
  html:not([data-season]) #panel-accueil .echo-art{min-height:150px;background:none;color:#28464b}
  html:not([data-season]) #panel-accueil .echo-art span{transform:none}
  html:not([data-season]) #panel-accueil .echo-art span:nth-child(2){color:#805122}
  html:not([data-season]) #panel-accueil .echo-art span:nth-child(3){color:#26493e}
  html:not([data-season]) #panel-accueil .echo-art small{color:#28464b}
}
.museum-doors{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;margin-top:1.5rem}.museum-door{display:flex;flex-direction:column;gap:.6rem;text-align:left;padding:1.25rem;border:1px solid var(--line);border-radius:18px;background:var(--surface);color:var(--ink);min-height:120px}.museum-door strong{font:500 1.35rem Georgia,serif}.museum-door span{font-size:.93rem;line-height:1.55}.museum-door:hover{border-color:var(--ink)}.museum-learning-paths{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.2rem}.museum-library{padding:1.4rem;border:1px solid var(--line);background:var(--surface);border-radius:22px;margin:1.4rem 0}.museum-library>summary{font-size:1.2rem;font-weight:700;cursor:pointer}.museum-library input{padding:.8rem;font:inherit;max-width:100%;border:1px solid var(--line);border-radius:12px;background:var(--paper);color:var(--ink)}.museum-library-levels{display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem;margin:1rem 0}.museum-library-levels button,.reference-level-tabs button{min-height:44px;border:1px solid var(--line);border-radius:12px;padding:.6rem 1rem;background:var(--surface);color:var(--ink)}.museum-library-levels [aria-pressed=true],.reference-level-tabs [aria-pressed=true]{background:var(--ink);color:var(--surface)}.museum-library-list{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.8rem}.museum-book{display:flex;flex-direction:column;gap:.5rem;padding:1rem;border:1px solid var(--line);border-radius:16px;color:var(--ink);text-decoration:none}.museum-book:hover{background:var(--paper)}.museum-book small{font-size:.8rem}.reference-level-tabs{display:flex;justify-content:center;flex-wrap:wrap;gap:.5rem;margin:1rem 0}
@media(max-width:800px){.museum-doors{grid-template-columns:1fr}.museum-library-list{grid-template-columns:repeat(2,minmax(0,1fr))}.museum-door{min-height:0}}
@media(max-width:420px){.museum-library-list{grid-template-columns:1fr}}

#culture-explorer .ce-image-stage{overflow:visible}#culture-explorer .ce-image-stage>img{border-radius:12px}#culture-explorer .ce-image-popup{width:min(320px,calc(100vw - 48px));max-width:none;max-height:60vh;z-index:20}

/* Corrections des captures : la grille des niveaux avait une marge plus spécifique. */
:root .reading-levels{margin-inline:auto}
@media(min-width:1024px){
 .class-destinations .class-destinations-links{grid-template-columns:repeat(4,minmax(0,1fr))}
 .class-destinations-links>a{min-width:0;overflow-wrap:break-word}
 .class-destinations-links .class-resource-art{flex-shrink:0}
}

/* Dates sur l’axe des lectures, et plage du courant sur la même échelle. */
.ce-reading-axis{display:grid;grid-template-columns:250px minmax(0,1fr);gap:16px;font-size:.72rem;margin:1.4rem 0 2rem}
#culture-explorer .ce-reading-row{margin:1.7rem 0;min-height:66px}
#culture-explorer .ce-reading-row .ce-track{display:block;height:2px;min-height:2px;margin-right:30px;background:var(--line)}
.ce-reading-tick{position:absolute;top:-7px;height:14px;border-left:1px solid var(--muted);opacity:.55}
.ce-reading-era{position:absolute;top:-7px;height:14px;border:1px solid var(--ce-accent);border-radius:6px;background:color-mix(in srgb,var(--ce-accent) 22%,var(--surface))}
#culture-explorer .ce-reading-date{width:auto;min-width:44px;height:36px;top:-17px;border-radius:9px;padding:4px 7px;font-size:.8rem;line-height:1;background:var(--surface);color:var(--ink);border:1px solid var(--ce-accent);z-index:1}
.ce-reading-date[data-edge=end]{transform:translateX(-100%)}.ce-reading-date[data-edge=start]{transform:none}
.ce-reading-row>div:first-child>.ce-entity+small+.ce-entity{display:inline-block;font-size:.76rem;margin-top:5px;padding:2px 6px}
@media(max-width:760px){
 .ce-reading-axis{grid-template-columns:1fr;gap:.6rem;margin-bottom:2.5rem}.ce-reading-axis .ce-axis-marks{height:1.2rem;margin-right:0}
 #culture-explorer .ce-reading-row{grid-template-columns:1fr;gap:24px;padding-bottom:16px}
 #culture-explorer .ce-reading-row .ce-track{display:block;margin:0 0 12px!important}
 .ce-reading-axis .ce-axis-marks span:nth-child(even):not(:last-child){display:none}
}

/* La règle des dates reste visible uniquement pendant la liste des lectures. */
#culture-explorer .ce-timeline:has(.ce-reading-timeline){overflow:visible}
#culture-explorer .ce-reading-timeline{position:relative;overflow:visible}
#culture-explorer .ce-reading-axis{position:sticky;top:var(--ce-sticky-top,72px);z-index:12;background:var(--surface);padding-block:14px 18px;border-bottom:1px solid var(--line);box-shadow:0 8px 12px -12px var(--ink);align-items:center}
#culture-explorer .ce-reading-axis .ce-axis-marks{min-height:1.3em}
@media(max-width:760px){#culture-explorer .ce-reading-axis{padding-block:10px 14px;gap:8px;font-size:.7rem}}
@media print{#culture-explorer .ce-reading-axis{position:static;box-shadow:none}}

/* Trois accès complémentaires : lire, explorer, pratiquer. */
#tab-oeuvres.reading-nav-highlight,#tab-grammaire.explorer-nav-highlight,#tab-atelier.atelier-nav-highlight{flex:none;margin-left:0;min-height:44px;padding:11px 14px;font-family:inherit;font-weight:600;font-size:.94rem;line-height:1.2;border-radius:16px;white-space:nowrap;cursor:pointer}
#tab-oeuvres.reading-nav-highlight{background:#e5def2;color:#493561;border:1px solid #9b87b4;box-shadow:none}
#tab-oeuvres.reading-nav-highlight:hover,#tab-oeuvres.reading-nav-highlight[aria-selected=true]{background:#d2c4e7;border-color:#79608f}
#tab-oeuvres.reading-nav-highlight[aria-selected=true]{box-shadow:inset 0 -3px #79608f}
#tab-oeuvres.reading-nav-highlight:focus-visible{outline:3px solid currentColor;outline-offset:3px}
[data-theme=dark] #tab-oeuvres.reading-nav-highlight{background:#453453;color:#f3e8ff;border-color:#a08ab5}
[data-theme=dark] #tab-oeuvres.reading-nav-highlight:hover,[data-theme=dark] #tab-oeuvres.reading-nav-highlight[aria-selected=true]{background:#5b436e}
@media(max-width:700px){#tab-oeuvres.reading-nav-highlight,#tab-grammaire.explorer-nav-highlight,#tab-atelier.atelier-nav-highlight{padding:10px 9px;font-size:.8rem}}
@media(max-width:620px){
 .sticky-navigation .header-navigation{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
 .sticky-navigation .header-navigation .main-tabs{grid-row:1;grid-column:1/-1}
 #tab-oeuvres.reading-nav-highlight{grid-row:2;grid-column:1}
 #tab-grammaire.explorer-nav-highlight{grid-row:2;grid-column:2}
 #tab-atelier.atelier-nav-highlight{grid-row:2;grid-column:3}
 .sticky-navigation .header-navigation .message-nav-link{grid-row:3;grid-column:1/-1;justify-self:end;margin:0}
}

/* Explorer seul : trois portes de même largeur, sans quatrième colonne vide. */
:root .class-destinations[data-menu=grammaire] .class-destinations-links{grid-template-columns:repeat(3,minmax(0,1fr))}
:root .class-destinations[data-menu=grammaire] .class-destinations-links>a{min-height:112px;padding:18px 22px;font-size:1.02rem;gap:16px}
:root .class-destinations[data-menu=grammaire] .class-resource-art{width:76px;height:76px}
@media(max-width:760px){:root .class-destinations[data-menu=grammaire] .class-destinations-links{grid-template-columns:repeat(3,minmax(190px,1fr));overflow-x:auto;scroll-snap-type:x proximity}:root .class-destinations[data-menu=grammaire] .class-destinations-links>a{scroll-snap-align:start;padding:14px;font-size:.9rem}:root .class-destinations[data-menu=grammaire] .class-resource-art{width:54px;height:54px}}

.class-readings{grid-column:1/-1;width:100%;padding-top:24px;border-top:1px solid var(--line)}.class-reading-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:20px}.class-readings h2{margin-bottom:8px}

/* Retour direct au repère : action secondaire, de même présence que le départ. */
:root .repere-review-button{display:inline-flex;align-items:center;justify-content:center;min-height:56px;padding:18px 28px;border:1px solid #bd813e;border-radius:18px;background:#efbf7a;color:#38250d;font:inherit;font-weight:700;text-decoration:none;line-height:1.4;box-sizing:border-box;cursor:pointer}
:root .repere-review-button:hover{background:#f5cd94;border-color:#9e642d}:root .repere-review-button:focus-visible{outline:3px solid #b96a20;outline-offset:4px}
.lit-actions{column-gap:32px}.grammar-course-actions{display:flex;justify-content:flex-end;margin:12px 0 20px}.literature-sheet{scroll-margin-top:150px}
[data-theme=dark] .repere-review-button{background:#efbf7a;color:#38250d}
:root .learning-share{border:0;background:transparent;box-shadow:none;border-radius:0;padding:8px;color:var(--muted,var(--ink));font-size:.78rem}
:root .learning-share:hover{background:transparent;color:var(--ink);text-decoration:underline}:root .learning-share:focus-visible{outline:2px solid currentColor;outline-offset:3px}
@media(max-width:600px){.grammar-course-actions{justify-content:stretch}.grammar-course-actions .repere-review-button{width:100%}.literature-sheet{scroll-margin-top:210px}}

.reference-title-link{color:inherit;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.18em}.reference-direct-links{display:flex;flex-wrap:wrap;gap:10px;margin-top:10px}.reference-direct-link{display:inline-flex;padding:7px 12px;border-radius:14px;background:var(--surface);border:1px solid var(--line);color:var(--ink);font-size:.85rem}.reference-direct-link:focus-visible,.reference-title-link:focus-visible{outline:3px solid var(--gold);outline-offset:4px}

/* Keep the date ruler within the currents section; the readings have their own ruler. */
#culture-explorer .ce-timeline{overflow:visible}
#culture-explorer .ce-periods-timeline>.ce-axis{position:sticky;top:var(--ce-sticky-top,72px);z-index:12;background:var(--surface);color:var(--ink);padding-block:14px 18px;align-items:center;box-shadow:0 8px 12px -12px var(--ink)}
#culture-explorer .ce-periods-timeline>.ce-axis .ce-axis-marks{min-height:1.3em}
/* Explicit pair beats the general culture button ink rule, including dark mode. */
#culture-explorer .museum-library-levels button[aria-pressed=true],
:root .reference-level-tabs button[aria-pressed=true]{background:#244f45;color:#fffdf1;border-color:#244f45;font-weight:700;box-shadow:inset 0 -3px 0 #c9dfba}
html[data-theme=dark] #culture-explorer .museum-library-levels button[aria-pressed=true],
html[data-theme=dark] .reference-level-tabs button[aria-pressed=true]{background:#dce9dd;color:#163b32;border-color:#dce9dd;box-shadow:inset 0 -3px 0 #4d826d}
html[data-season=halloween] #culture-explorer .museum-library-levels button[aria-pressed=true]{background:#e6a66c;color:#231627;border-color:#e6a66c}
@media print{#culture-explorer .ce-periods-timeline>.ce-axis{position:static;box-shadow:none}}

.required-reading-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:10px;padding:0 24px 22px;margin-top:auto}
:root .required-reading-button{display:flex;gap:12px;align-items:center;max-width:100%;text-align:left;padding:12px 16px;min-height:54px;background:#f3a63d;color:#282011;border:2px solid #b6640b;border-radius:14px;cursor:pointer;box-shadow:0 3px 0 #975112;font:inherit}
.required-reading-button svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.8;flex:none}.required-reading-button strong,.required-reading-button small{display:block}.required-reading-button small{margin-top:4px;line-height:1.4}.required-reading-button:hover{filter:brightness(1.08)}.required-reading-button:focus-visible{outline:3px solid var(--ink);outline-offset:4px}
@media(max-width:500px){.required-reading-actions{padding-inline:16px}.required-reading-button{width:100%}}

/* Lectures obligatoires : une seule rangée, défilable si de nombreux titres. */
.required-reading-actions{flex-wrap:nowrap;justify-content:flex-start;gap:8px;overflow-x:auto;scrollbar-width:thin;padding:4px 20px 16px;scroll-padding-inline:20px}
:root .required-reading-actions .required-reading-button{flex:0 0 auto;width:auto;max-width:240px;min-height:48px;padding:8px 10px;gap:8px;border-radius:11px;font-size:.82rem;box-shadow:0 2px 0 #975112}
.required-reading-actions .required-reading-button svg{width:21px;height:21px}.required-reading-actions .required-reading-button strong{font-size:.8rem;line-height:1.2}.required-reading-actions .required-reading-button small{margin-top:3px;font-size:.8rem;line-height:1.25}
@media(max-width:500px){.required-reading-actions{padding-inline:12px}.required-reading-actions .required-reading-button{max-width:210px}}

/* Les espaces réservés à la classe se distinguent des ressources publiques. */
:root .class-hub-card.class-only-destination,
:root .class-destinations a.class-only-destination {
  background: color-mix(in srgb, var(--level-color, #304858) 18%, #344451);
  color: #fff;
  border-color: color-mix(in srgb, var(--level-color, #50c7df) 55%, #344451);
}
:root .class-hub-card.class-only-destination p { color: #edf2f5; }
:root .class-only-destination:hover,
:root .class-only-destination:focus-visible {
  background: color-mix(in srgb, var(--level-color, #304858) 25%, #344451);
  color: #fff;
  outline: 2px solid var(--level-color, #50c7df);
  outline-offset: 3px;
}

/* La carte Brevet possède son visuel ; elle ne réutilise plus Lire en ligne. */
:root .class-resource-art[data-art="brevet"] {
 background-image:url('/assets/brevet-v157.webp');
 background-size:300% 200%;
 background-position:0 0;
 height:auto;
 aspect-ratio:128 / 69;
 border-radius:10px;
 mask-image:radial-gradient(ellipse at center,#000 55%,#000b 78%,transparent 100%);
}