:root{
    --ivoire:#f4efe2;
    --ivoire-clair:#faf7f0;
    --encre:#2a241d;
    --encre-doux:#6b5f4d;
    --chene:#93532a;
    --chene-sombre:#6e3e1e;
    --trait:#ded1b5;
    --rond:20px;
  }
  *{box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{
    margin:0;
    background:var(--ivoire);
    color:var(--encre);
    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
    font-size:17px;
    line-height:1.72;
  }
  img{max-width:100%;display:block}
  figure{margin:0}
  a{color:var(--chene-sombre)}
  a:hover{color:var(--chene)}
  h1,h2,h3,.enseigne__nom,.en-bref__valeur{font-family:"Zilla Slab",Georgia,serif}
  p{margin:0 0 14px}

  /* en-tête posé sur la photo, sans fond */
  .entete{
    position:absolute;top:0;left:0;right:0;z-index:6;
    border-bottom:1px solid rgba(250,247,240,.3);
    transition:background-color .25s ease,border-color .25s ease;
  }
  .entete__rang{
    display:flex;align-items:center;justify-content:space-between;gap:16px;
    max-width:1080px;margin:0 auto;padding:16px 22px;
  }
  .enseigne{display:flex;align-items:center;gap:11px;text-decoration:none;color:var(--ivoire-clair)}
  .enseigne__ecu{
    background:var(--ivoire-clair);border-radius:12px;padding:5px;
    display:flex;box-shadow:0 2px 10px rgba(20,16,10,.25);
  }
  .enseigne__ecu img{width:28px;height:28px}
  .enseigne__nom{font-size:1.12rem;font-weight:600;letter-spacing:.02em;text-shadow:0 1px 8px rgba(20,16,10,.5)}
  .sommaire{display:flex;flex-wrap:wrap;gap:4px 20px}
  .sommaire a{
    color:var(--ivoire-clair);text-decoration:none;font-size:.95rem;
    letter-spacing:.05em;text-transform:lowercase;font-variant:small-caps;
    padding:3px 0;border-bottom:1px solid transparent;
    text-shadow:0 1px 8px rgba(20,16,10,.55);
  }
  .sommaire a:hover{border-bottom-color:var(--ivoire-clair)}
  .bascule-sommaire{
    display:none;background:rgba(250,247,240,.14);border:1px solid rgba(250,247,240,.5);
    border-radius:10px;width:40px;height:36px;cursor:pointer;padding:0;
  }
  .bascule-sommaire span,.bascule-sommaire::before,.bascule-sommaire::after{
    content:"";display:block;height:2px;border-radius:2px;background:var(--ivoire-clair);margin:6px 8px;
  }
  /* au défilement, l'en-tête se pose sur l'ivoire */
  .entete.entete--pose{position:fixed;background:rgba(244,239,226,.96);border-bottom-color:var(--trait)}
  .entete.entete--pose .enseigne,.entete.entete--pose .sommaire a{color:var(--encre);text-shadow:none}
  .entete.entete--pose .enseigne__ecu{background:none;box-shadow:none;padding:5px 0}
  .entete.entete--pose .sommaire a:hover{border-bottom-color:var(--chene)}
  .entete.entete--pose .bascule-sommaire{background:none;border-color:var(--trait)}
  .entete.entete--pose .bascule-sommaire span,.entete.entete--pose .bascule-sommaire::before,.entete.entete--pose .bascule-sommaire::after{background:var(--encre)}

  /* hero : photo dès le haut de page, titre en bas à gauche */
  .banniere{position:relative;min-height:clamp(430px,84vh,720px);display:flex;align-items:flex-end;overflow:hidden}
  .banniere::before{
    content:"";position:absolute;inset:0;
    background:
      linear-gradient(185deg,rgba(24,19,13,.62) 0,rgba(24,19,13,.08) 34%,rgba(24,19,13,.5) 70%,rgba(24,19,13,.86) 100%),
      url("../medias/maquis.jpg") center 58%/cover no-repeat;
  }
  .banniere__bloc{
    position:relative;max-width:1080px;width:100%;margin:0 auto;
    padding:120px 22px 54px;color:var(--ivoire-clair);
  }
  .banniere__mention{
    margin:0 0 12px;font-size:.9rem;letter-spacing:.18em;text-transform:uppercase;
    color:#e9dfc6;text-shadow:0 1px 10px rgba(20,16,10,.7);
  }
  .banniere h1{
    margin:0;max-width:16ch;font-weight:600;line-height:1.18;
    font-size:clamp(1.8rem,5vw,3.1rem);
    text-shadow:0 2px 18px rgba(20,16,10,.65);
  }

  /* mosaïque de blocs inégaux */
  .en-bref{
    max-width:1080px;margin:0 auto;padding:34px 22px 10px;
    display:grid;gap:16px;
    grid-template-columns:1fr 1fr .92fr;
    grid-template-areas:
      "propos propos compte"
      "vue    vue    panier";
  }
  .en-bref__tuile{border:1px solid var(--trait);border-radius:var(--rond);background:var(--ivoire-clair)}
  .en-bref__tuile--propos{grid-area:propos;padding:28px 30px;font-size:1.05rem}
  .en-bref__tuile--propos p:last-child{margin-bottom:0}
  .en-bref__tuile--compte{
    grid-area:compte;background:var(--chene);border-color:var(--chene);
    color:var(--ivoire-clair);padding:24px 26px;display:flex;flex-direction:column;justify-content:center;
  }
  .en-bref__valeur{font-size:2.9rem;line-height:1;font-weight:700}
  .en-bref__note{margin:10px 0 0;font-size:.92rem;line-height:1.5;color:#f7eedb}
  .en-bref__tuile--panier{grid-area:panier;padding:24px 26px;display:flex;flex-direction:column;justify-content:center}
  .en-bref__intitule{
    margin:0 0 12px;font-size:.84rem;letter-spacing:.14em;text-transform:uppercase;
    color:var(--encre-doux);font-family:inherit;font-weight:700;
  }
  .en-bref__tuile--panier ul{margin:0;padding:0;list-style:none;font-size:.96rem}
  .en-bref__tuile--panier li{padding:7px 0;border-top:1px solid var(--trait)}
  .en-bref__tuile--panier li:first-child{border-top:0;padding-top:0}
  .en-bref__tuile--vue{grid-area:vue;overflow:hidden;padding:0;min-height:300px}
  .en-bref__tuile--vue img{width:100%;height:100%;object-fit:cover}

  /* corps de l'article */
  .conteneur{max-width:1080px;margin:0 auto;padding:0 22px}
  .chapitre{padding:40px 0;scroll-margin-top:84px}
  .chapitre h2{
    font-size:1.46rem;font-weight:600;letter-spacing:.01em;margin:0 0 16px;
  }
  .chapitre--lecture .chapitre__texte{max-width:62ch;margin:0 auto}
  .chapitre--cote .chapitre__grille{display:grid;grid-template-columns:1.25fr .85fr;gap:36px;align-items:center}
  .chapitre--miroir .chapitre__grille{grid-template-columns:.85fr 1.25fr}
  .chapitre--miroir .chapitre__vignette{order:-1}
  .chapitre__vignette{border-radius:var(--rond);overflow:hidden;border:1px solid var(--trait)}
  .chapitre__vignette img{width:100%;height:auto}
  .chapitre__mot{margin:10px 2px 0;font-size:.84rem;font-style:italic;color:var(--encre-doux)}
  .chapitre p:last-child{margin-bottom:0}
  .separateur{border:0;border-top:1px solid var(--trait);max-width:1036px;margin:0 auto}

  footer{padding:30px 22px 46px}
  .mention-pied{
    max-width:1036px;margin:0 auto;font-size:.84rem;color:var(--encre-doux);
  }

  @media (max-width:880px){
    .en-bref{
      grid-template-columns:1fr 1fr;
      grid-template-areas:
        "propos propos"
        "vue vue"
        "compte panier";
    }
    .en-bref__tuile--vue{min-height:230px}
    .chapitre--cote .chapitre__grille,.chapitre--miroir .chapitre__grille{grid-template-columns:1fr;gap:22px}
    .chapitre--miroir .chapitre__vignette{order:0}
  }
  @media (max-width:620px){
    body{font-size:16px}
    .banniere{min-height:clamp(400px,76vh,560px)}
    .banniere__bloc{padding:104px 20px 40px}
    .en-bref{
      grid-template-columns:1fr;
      grid-template-areas:"propos" "vue" "compte" "panier";
      padding:26px 20px 6px;gap:14px;
    }
    .en-bref__tuile--propos{padding:24px 22px}
    .conteneur{padding:0 20px}
    .bascule-sommaire{display:block}
    .sommaire{
      display:none;flex-direction:column;gap:0;width:100%;order:3;
      background:rgba(28,23,16,.95);border-radius:14px;padding:6px 16px;margin-bottom:6px;
    }
    .sommaire.sommaire--deploye{display:flex}
    .sommaire a{padding:9px 0;border-bottom:1px solid rgba(250,247,240,.16);text-shadow:none}
    .sommaire a:last-child{border-bottom:0}
    .entete.entete--pose .sommaire{background:var(--ivoire-clair);border:1px solid var(--trait)}
    .entete.entete--pose .sommaire a{border-bottom-color:var(--trait)}
    .entete__rang{flex-wrap:wrap;padding:14px 20px}
  }