/* ═══════════════════════════════════════════════════════════════════════════
   Encart « carnet » dans les articles — un seul par article.
   Deux colonnes sur largeur confortable : le texte respire, le bouton est
   aligné à droite sur une seule ligne. Empilé sinon.
   ═══════════════════════════════════════════════════════════════════════════ */

/* La requête porte sur une ENVELOPPE : un élément ne peut pas se styler
   à partir de sa propre largeur de conteneur. */
.rh-enc-w{container-type:inline-size}

.rh-enc{position:relative;margin:36px 0;padding:22px;border-radius:18px;background:#fff;
  border:1.5px solid color-mix(in srgb,var(--c) 26%,transparent);
  box-shadow:0 12px 34px color-mix(in srgb,var(--c) 10%,transparent);
  display:grid;grid-template-columns:1fr;grid-template-areas:"tx" "bt";row-gap:16px}
.rh-enc::before{content:"";position:absolute;inset:0;border-radius:18px;pointer-events:none;
  background:linear-gradient(150deg,color-mix(in srgb,var(--c) 5%,transparent),transparent 55%)}
.rh-enc>*{position:relative}

/* Colonne de texte */
.rh-enc-tx{grid-area:tx;min-width:0}
.rh-enc-h{display:flex;align-items:center;gap:9px;margin-bottom:10px}
.rh-enc-ic{width:30px;height:30px;border-radius:9px;display:flex;align-items:center;justify-content:center;
  background:color-mix(in srgb,var(--c) 12%,#fff);flex:0 0 auto}
.rh-enc-ic svg{width:17px;height:17px}
.rh-enc-k{font-family:'Sora',sans-serif;font-weight:800;font-size:10.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--c);line-height:1}
.rh-enc-t{font-family:'Sora',sans-serif;font-weight:800;font-size:19px;line-height:1.25;
  color:#1A1410;margin:0 0 7px;text-wrap:balance}
.rh-enc-s{font-family:'Manrope',sans-serif;font-size:13.5px;line-height:1.55;color:#6B6157;margin:0;max-width:52ch}

/* Colonne d'action */
.rh-enc-bt{grid-area:bt;display:flex;flex-direction:column;gap:8px;min-width:0}
.rh-enc-b{display:block;width:100%;box-sizing:border-box;padding:13px 18px;border-radius:99px;
  background:var(--c);color:#fff!important;font-family:'Sora',sans-serif;font-weight:800;font-size:13.5px;
  line-height:1.25;text-align:center;text-decoration:none;border:none;cursor:pointer;
  overflow-wrap:break-word;transition:filter .15s,transform .15s}
.rh-enc-b:hover{filter:brightness(.93);transform:translateY(-1px);color:#fff!important}
.rh-enc-n{font-family:'Manrope',sans-serif;font-size:11.5px;color:#9A9188;margin:0;text-align:center}

/* Bande horizontale dès que l'encart est assez large */
@container (min-width:560px){
  .rh-enc{grid-template-columns:minmax(0,1fr) minmax(0,232px);grid-template-areas:"tx bt";
    column-gap:26px;row-gap:0;align-items:center;padding:24px 26px}
  .rh-enc-t{font-size:20px}
  .rh-enc-bt{justify-content:center}
}

/* Repli pour les navigateurs sans requêtes de conteneur : empilé, jamais de débordement */
@supports not (container-type: inline-size){
  @media(min-width:900px){
    .rh-enc{grid-template-columns:minmax(0,1fr) minmax(0,232px);grid-template-areas:"tx bt";
      column-gap:26px;row-gap:0;align-items:center;padding:24px 26px}
  }
}

@media(max-width:520px){
  .rh-enc{padding:19px;margin:30px 0;border-radius:16px;row-gap:14px}
  .rh-enc-t{font-size:17.5px}
  .rh-enc-s{font-size:13px}
}

/* ═══════════════════════════════════════════════════════════════════════════
   Surcouche : le carnet par-dessus l'article.
   La fenêtre s'accorde à l'écran : quasi plein cadre sur téléphone, large et
   basse sur ordinateur. Les listes passent en deux colonnes dès que la place
   le permet, ce qui raccourcit la fenêtre au lieu de l'étirer en hauteur.
   ═══════════════════════════════════════════════════════════════════════════ */
body.rh-fige{overflow:hidden}
.rh-sur{position:fixed;inset:0;z-index:99990;display:flex;align-items:center;justify-content:center;
  padding:10px;opacity:0;transition:opacity .24s}
.rh-sur.on{opacity:1}
.rh-sur[hidden]{display:none}
.rh-sur-voile{position:absolute;inset:0;background:rgba(26,20,16,.56);backdrop-filter:blur(4px)}

.rh-sur-fen{position:relative;container-type:inline-size;
  width:100%;max-width:100%;max-height:calc(100dvh - 20px);overflow-y:auto;
  background:#FDFCFA;border-radius:18px;padding:24px 18px 20px;
  box-shadow:0 26px 74px rgba(26,20,16,.36);
  transform:translateY(14px) scale(.99);transition:transform .3s cubic-bezier(.22,1,.36,1);
  -webkit-overflow-scrolling:touch;overscroll-behavior:contain}
.rh-sur.on .rh-sur-fen{transform:translateY(0) scale(1)}
.rh-sur-x{position:absolute;top:12px;right:12px;width:34px;height:34px;border-radius:50%;border:none;
  background:#F1EDE7;color:#6B6157;font-size:22px;line-height:1;cursor:pointer;z-index:3}
.rh-sur-x:hover{background:#E6E0D8}
.rh-sur-in .rk-h1{padding-right:38px}
@supports not (height: 100dvh){ .rh-sur-fen{max-height:calc(100vh - 20px)} }

/* Téléphone en paysage et petits écrans bas : on récupère de la place */
@media(max-height:620px){ .rh-sur{padding:6px} .rh-sur-fen{padding:18px 14px 14px;border-radius:14px} }

/* Tablette et petit portable */
@media(min-width:600px){
  .rh-sur{padding:20px}
  .rh-sur-fen{max-width:660px;max-height:calc(100dvh - 40px);border-radius:22px;padding:28px 26px 24px}
}
/* Tablette en paysage et petit portable : on récupère la largeur disponible */
@media(min-width:920px){
  .rh-sur{padding:24px}
  .rh-sur-fen{max-width:820px;max-height:calc(100dvh - 48px);padding:30px 30px 26px}
}
/* Ordinateur : fenêtre large, contenu en deux colonnes */
@media(min-width:1100px){
  .rh-sur{padding:28px}
  .rh-sur-fen{max-width:960px;max-height:min(880px, calc(100dvh - 56px));padding:32px 34px 28px}
}
@media(min-width:1500px){
  .rh-sur-fen{max-width:1060px}
}

/* ═══════════════════════════════════════════════════════════════════════════
   Habillage sombre — mêmes proportions que la carte claire (coins arrondis,
   dans la colonne de lecture), seul le fond change. Le contraste suffit à
   détacher l'encart du reste de l'article.
   ═══════════════════════════════════════════════════════════════════════════ */
.rh-enc.rh-sombre{
  background:#171310;
  border:1.5px solid color-mix(in srgb,var(--c) 34%,#171310);
  box-shadow:0 14px 38px rgba(23,19,16,.20)}
.rh-enc.rh-sombre::before{
  background:linear-gradient(150deg,color-mix(in srgb,var(--c) 14%,transparent),transparent 58%)}

.rh-enc.rh-sombre .rh-enc-ic{background:color-mix(in srgb,var(--c) 24%,#171310)}
.rh-enc.rh-sombre .rh-enc-k{color:color-mix(in srgb,var(--c) 52%,#FFFFFF)}
.rh-enc.rh-sombre .rh-enc-t{color:#FFFDFB}
.rh-enc.rh-sombre .rh-enc-s{color:#A79E94}
.rh-enc.rh-sombre .rh-enc-b{background:var(--c);color:#fff!important}
.rh-enc.rh-sombre .rh-enc-b:hover{filter:brightness(1.08)}
.rh-enc.rh-sombre .rh-enc-n{color:#9E948A}   /* AA sur fond sombre : 4.09 → 5.24 */