:root{
  --musset-papier:#efe6d0;
  --musset-ivoire:#fff8e9;
  --musset-encre:#2c241c;
  --musset-rouge:#982d22;
  --musset-bleu:#234f83;
  --musset-bleu-profond:#183866;
  --musset-vert:#829a73;
  --musset-or:#c8922e;
  --musset-trait:#b9aa8d;
}

html,body{max-width:100%;overflow-x:clip}
body.musset-grammaire{
  color:var(--musset-encre);
  background:
    radial-gradient(circle at 78% 9%,rgba(200,146,46,.14),transparent 18rem),
    linear-gradient(135deg,rgba(35,79,131,.045) 0 22%,transparent 22% 78%,rgba(130,154,115,.07) 78%),
    var(--musset-papier);
}
body.musset-grammaire *{word-break:normal;overflow-wrap:normal}
body.musset-grammaire code{white-space:normal}

@media(min-width:1181px){
  body.musset-grammaire{padding-left:250px!important}
  body.musset-grammaire>.chantier{width:100%;margin:0}
}

/* L’Antre devient un théâtre Musset : profondeur bleue, rideaux rouges,
   papier, sauge et or. Aucun noir. */
.musset-grammaire-index .page-coque{
  width:min(1040px,calc(100% - 28px));
  max-width:1040px;
  grid-template-columns:minmax(0,790px) 220px;
  gap:22px;
  margin:26px auto 0;
}
.musset-grammaire-index .antre{
  max-width:none;
  min-width:0;
  border:2px solid var(--musset-or);
  border-radius:4px;
  background:
    linear-gradient(150deg,transparent 0 40%,rgba(130,154,115,.38) 40% 64%,transparent 64%),
    linear-gradient(27deg,rgba(152,45,34,.26),transparent 42%),
    var(--musset-bleu-profond);
  box-shadow:0 18px 34px rgba(68,45,27,.22);
}
.musset-grammaire-index .antre::before,
.musset-grammaire-index .antre::after{
  content:"";
  position:absolute;
  z-index:2;
  top:0;
  bottom:0;
  width:58px;
  pointer-events:none;
  background:
    linear-gradient(90deg,transparent 8px,var(--musset-or) 8px 11px,transparent 11px 28px,var(--musset-or) 28px 31px,transparent 31px),
    var(--musset-rouge);
  opacity:.96;
}
.musset-grammaire-index .antre::before{left:0;clip-path:polygon(0 0,100% 0,73% 100%,0 100%)}
.musset-grammaire-index .antre::after{right:0;transform:scaleX(-1);clip-path:polygon(0 0,100% 0,73% 100%,0 100%)}
.musset-grammaire-index .ombre{opacity:.34}
.musset-grammaire-index .dedans{padding:34px 72px 30px;z-index:3}
.musset-grammaire-index .sortie{color:#f6dfae;border-color:var(--musset-or)}
.musset-grammaire-index .surtitre{color:#f6d88f;font-weight:800}
.musset-grammaire-index .titre{color:var(--musset-ivoire);text-shadow:0 3px 0 rgba(24,56,102,.55),0 0 24px rgba(200,146,46,.42)}
.musset-grammaire-index .soustitre{color:#eef1de;max-width:48ch;font:italic 15px/1.55 Georgia,serif}
.musset-grammaire-index .liste{
  background:rgba(255,248,233,.95);
  box-shadow:0 0 0 9px rgba(152,45,34,.78),0 0 0 12px var(--musset-or);
  border-radius:2px;
}
.musset-grammaire-index .q{background:rgba(239,230,208,.75);border-left-color:var(--musset-rouge)}
.musset-grammaire-index .q:nth-child(even){background:rgba(130,154,115,.16)}
.musset-grammaire-index .q:hover{background:#fff1d4}
.musset-grammaire-index .num{color:var(--musset-rouge);font-weight:800}
.musset-grammaire-index .intitule{color:var(--musset-encre);font-family:Georgia,serif;font-size:15px}
.musset-grammaire-index .lecon{color:var(--musset-bleu);font-weight:850}
.musset-grammaire-index .huit{background:rgba(130,154,115,.28);border-left-color:var(--musset-vert)}
.musset-grammaire-index .huit a{color:var(--musset-encre)}
.musset-grammaire-index .huit .glose{color:#36536f}
.musset-grammaire-index .marge-titre{color:#f5d181}
.musset-grammaire-index .tampon{color:#f3b6ab;border-color:#d9584c}
.musset-grammaire-index .trou{background:var(--musset-bleu-profond)}
.musset-grammaire-index .stock,
.musset-grammaire-index .guepe p,
.musset-grammaire-index .pied{color:#f6ecd7}
.musset-grammaire-index .dechets{background:#f4ead4;border-color:var(--musset-trait)}
.musset-grammaire-index .dechets h2{color:var(--musset-rouge)}
.musset-grammaire-index .rebut{background:rgba(255,248,233,.9);color:#a63228;border-color:#b43b31}
.formes-musset{
  display:block;
  margin:28px 0 2px;
  padding:15px 17px;
  color:var(--musset-ivoire);
  text-decoration:none;
  border:1px solid var(--musset-or);
  border-left:7px solid var(--musset-rouge);
  background:rgba(24,56,102,.78);
}
.formes-musset strong,.formes-musset span{display:block}
.formes-musset strong{font:800 12px/1.4 system-ui,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:#f2cf78}
.formes-musset span{margin-top:4px;font:italic 14px/1.5 Georgia,serif}

/* Les leçons communes gardent leur texte, leurs dessins et leur voix.
   Le proscenium, les encadrements et la lumière appartiennent à Musset. */
.musset-grammaire-lecon .lesson-page{
  width:min(1120px,calc(100% - 28px));
  margin:28px auto 66px;
  color:var(--musset-encre);
}
.musset-grammaire-lecon .lesson-entry{
  grid-template-columns:minmax(0,1fr) 250px;
  gap:24px;
  align-items:stretch;
}
.musset-grammaire-lecon .lesson-entry .lesson-card{grid-column:1;min-width:0}
.musset-grammaire-lecon .lesson-entry .lesson-ear{grid-column:2;width:250px}
.musset-grammaire-lecon .lesson-card{
  position:relative;
  overflow:hidden;
  border:2px solid var(--musset-or);
  border-top:10px solid var(--musset-rouge);
  background:
    linear-gradient(145deg,transparent 0 68%,rgba(130,154,115,.2) 68%),
    var(--musset-ivoire);
  box-shadow:0 16px 28px rgba(68,45,27,.16);
}
.musset-grammaire-lecon .lesson-card::after{
  content:"";
  position:absolute;
  right:-34px;
  bottom:-52px;
  width:145px;
  height:145px;
  border:18px solid rgba(35,79,131,.16);
  border-radius:50%;
}
.musset-grammaire-lecon .lesson-card h1{color:var(--musset-bleu-profond)}
.musset-grammaire-lecon .lesson-card .eyebrow{color:var(--musset-rouge)}
.musset-grammaire-lecon .lesson-ear{
  border:2px solid var(--musset-bleu);
  border-top:10px solid var(--musset-rouge);
  background:#f4ead4;
  box-shadow:8px 10px 0 rgba(130,154,115,.25);
}
.musset-grammaire-lecon .lesson-ear img{width:100%;max-width:100%;filter:saturate(.9) contrast(1.04)}
.musset-grammaire-lecon .lesson-shell{
  grid-template-columns:minmax(0,1fr) 250px;
  gap:24px;
}
.musset-grammaire-lecon .lesson-copy{grid-column:1;grid-row:1 / span 2;min-width:0}
.musset-grammaire-lecon .lesson-space-rail{grid-column:2;grid-row:1;position:static;width:250px}
.musset-grammaire-lecon .cc-rail{grid-column:2;grid-row:2;position:static;width:250px}
.musset-grammaire-lecon .lesson-copy section{
  background:var(--musset-ivoire);
  border-color:#d2c2a4;
  box-shadow:0 8px 18px rgba(68,45,27,.08);
}
.musset-grammaire-lecon .lesson-copy section:nth-of-type(3n){border-left:7px solid var(--musset-vert)}
.musset-grammaire-lecon .lesson-copy section:nth-of-type(3n+1){border-left:7px solid var(--musset-bleu)}
.musset-grammaire-lecon .lesson-copy section:nth-of-type(3n+2){border-left:7px solid var(--musset-rouge)}
.musset-grammaire-lecon .lesson-copy h2{color:var(--musset-bleu-profond)}
.musset-grammaire-lecon .lesson-copy h3{color:var(--musset-rouge)}
.musset-grammaire-lecon .lesson-copy blockquote{background:#f2ead9;border-left-color:var(--musset-or)}
.musset-grammaire-lecon .lesson-copy table{background:#fdf8ec}
.musset-grammaire-lecon .lesson-copy th{color:var(--musset-bleu)}
.musset-grammaire-lecon .vg{
  padding:8px;
  background:#f1e6cf;
  border:1px solid var(--musset-or);
}
.musset-grammaire-lecon .gm-voix{
  border:2px solid var(--musset-bleu);
  border-left:10px solid var(--musset-rouge);
  background:linear-gradient(105deg,#f7edd8,rgba(130,154,115,.18));
  box-shadow:0 10px 22px rgba(68,45,27,.12);
}
.musset-grammaire-lecon .gm-voix h3{color:var(--musset-bleu-profond)}
.musset-grammaire-lecon .gm-porte{border-color:rgba(35,79,131,.18)}
.musset-grammaire-lecon .gm-porte b{color:var(--musset-rouge)}
.musset-grammaire-lecon .lesson-space-rail,
.musset-grammaire-lecon .cc-rail{
  background:#f4ead4;
  border-color:var(--musset-trait);
  border-top:6px solid var(--musset-rouge);
}
.musset-grammaire-lecon .lesson-space-rail .ici{background:var(--musset-ivoire);border-left-color:var(--musset-rouge)}
.musset-grammaire-lecon .lesson-space-rail a,
.musset-grammaire-lecon .cc-rail a{color:var(--musset-encre)}
.musset-grammaire-lecon .vague-de-cloture{width:100%;margin-left:0}

.motif-fin-musset{clear:both;width:100%;max-width:1120px;margin:18px auto 0;line-height:0}
.motif-fin-musset svg{display:block;width:100%;height:92px}
.mentions-musset{
  width:min(1120px,calc(100% - 28px));
  margin:0 auto 42px;
  padding:16px 20px 20px;
  color:#5b4b3b;
  background:transparent;
  border-top:1px solid #b7a98e;
  font:12px/1.5 system-ui,sans-serif;
}
.mentions-musset p{margin:.25rem 0}
.mentions-musset a{color:var(--musset-bleu)}

@media(max-width:1180px){
  body.musset-grammaire{padding-left:0!important}
  .musset-grammaire-index .page-coque{margin-top:14px}
}
@media(max-width:899px){
  .musset-grammaire-index .page-coque{display:block;width:calc(100% - 24px)}
  .musset-grammaire-index .dechets{display:none}
  .musset-grammaire-index .dedans{padding:28px 62px 26px}
}
@media(max-width:800px){
  .musset-grammaire-lecon .lesson-page{width:100%;margin-top:0}
  .musset-grammaire-lecon .lesson-entry,
  .musset-grammaire-lecon .lesson-shell{display:flex;flex-direction:column;gap:14px}
  .musset-grammaire-lecon .lesson-entry .lesson-card,
  .musset-grammaire-lecon .lesson-entry .lesson-ear,
  .musset-grammaire-lecon .lesson-space-rail,
  .musset-grammaire-lecon .cc-rail{width:100%;max-width:none}
  .musset-grammaire-lecon .lesson-shell{padding:0 14px}
  .musset-grammaire-lecon .lesson-space-rail{order:-1}
}
@media(max-width:520px){
  .musset-grammaire-index .dedans{padding:25px 26px}
  .musset-grammaire-index .antre::before,
  .musset-grammaire-index .antre::after{width:20px;opacity:.76}
  .musset-grammaire-index .titre{font-size:31px}
  .musset-grammaire-index .liste{box-shadow:0 0 0 5px rgba(152,45,34,.78),0 0 0 7px var(--musset-or)}
  .mentions-musset{font-size:11px}
}
/* Dans une fenêtre de travail ou une tablette horizontale, le sommaire reste
   un véritable rail gauche : le poser au-dessus rejetait la leçon hors écran. */
@media(min-width:760px) and (max-width:1180px){
  html body.musset-grammaire{padding-left:250px!important}
  body.musset-grammaire #rail-oeuvre{
    display:block!important;
    position:fixed!important;
    inset:0 auto 0 0!important;
    width:250px!important;
    height:auto!important;
    max-height:none!important;
    overflow:auto!important;
    z-index:60!important;
    margin:0!important;
    padding:22px 14px 32px!important;
    border:0!important;
    border-right:1px solid #a89a80!important;
  }
  body.musset-grammaire #rail-oeuvre .be-rail-responsive>summary{display:none!important}
}
@media print{
  body.musset-grammaire{padding-left:0!important;background:#fff}
  .mentions-musset{color:#444}
  .musset-grammaire-index .antre::before,
  .musset-grammaire-index .antre::after{display:none}
}