/* maintenantlagauche.fr (Mainsuel) : les enveloppes du budget (21 octobre 2026). Toujours clair. */
:root {
  --papier: #faf7f0;
  --encre: #1f2a44;
  --gris: #5b6275;
  --sable: #f3e6c9;
  --sable-f: #e3cf9f;
  --rose: #f7ddd7;
  --rose-f: #e9b6aa;
  --ciel: #dce7f3;
  --ciel-f: #aec4df;
  --menthe: #dcebdc;
  --menthe-f: #a9cfa9;
  --timbre: #c8443b;
  --filet: #e6dfd0;
  --titre: 'Yeseva One', Georgia, serif;
  --texte: 'Afacad', system-ui, sans-serif;
  --machine: 'Cutive Mono', 'Courier New', monospace;
}
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; background: var(--papier); color: var(--encre); font: 400 1.12rem/1.65 var(--texte); }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
.saut { position: absolute; left: -999px; }
.saut:focus { left: 1rem; top: 1rem; background: #fff; padding: .5rem 1rem; }

/* en-tête */
.entete { border-bottom: 2px dashed var(--filet); }
.entete__in { max-width: 1160px; margin: 0 auto; padding: 1.2rem 1rem .4rem; display: flex; align-items: center; gap: 1.4rem; flex-wrap: wrap; }
.marque { display: inline-flex; align-items: center; gap: .7rem; text-decoration: none; }
.marque__timbre { display: grid; place-items: center; width: 2.6rem; height: 3rem; background: var(--timbre); color: #fff; font: 1.6rem/1 var(--titre); outline: 3px dotted var(--timbre); outline-offset: 2px; }
.marque__nom { font: 1.9rem/1 var(--titre); }
.entete__devise { margin: 0; flex: 1 1 260px; font: .98rem/1.4 var(--machine); color: var(--gris); }
.onglets { max-width: 1160px; margin: 0 auto; padding: .4rem 1rem 0; display: flex; gap: .4rem; flex-wrap: wrap; }
.onglet { text-decoration: none; padding: .45rem 1rem .5rem; border-radius: 10px 10px 0 0; font-weight: 600; border: 1px solid var(--filet); border-bottom: 0; }
.onglet--sable { background: var(--sable); } .onglet--rose { background: var(--rose); } .onglet--ciel { background: var(--ciel); } .onglet--menthe { background: var(--menthe); }
.onglet[aria-current] { box-shadow: inset 0 -4px 0 var(--timbre); }

main { max-width: 1160px; margin: 0 auto; padding: 2rem 1rem 3rem; }
.devise-h1 { font: clamp(1.7rem, 3.8vw, 2.7rem)/1.15 var(--titre); margin: 0 0 1.8rem; max-width: 24ch; }
.bloc-t { font: 1.5rem/1.2 var(--titre); margin: 0 0 1rem; }
.bloc-t::after { content: ''; display: block; width: 3.2rem; border-bottom: 3px solid var(--timbre); margin-top: .35rem; }
.enveloppe--sable { background: var(--sable); --pli: var(--sable-f); }
.enveloppe--rose { background: var(--rose); --pli: var(--rose-f); }
.enveloppe--ciel { background: var(--ciel); --pli: var(--ciel-f); }
.enveloppe--menthe { background: var(--menthe); --pli: var(--menthe-f); }

/* les trois enveloppes */
.enveloppes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; }
.enveloppes > * { min-width: 0; }
.enveloppe { position: relative; border-radius: 6px; padding: 4.2rem 1.1rem 1.1rem; box-shadow: 0 2px 0 var(--pli), 0 10px 22px rgba(31, 42, 68, .08); overflow: hidden; }
.enveloppe__rabat { position: absolute; inset: 0 0 auto 0; height: 3.4rem; background: linear-gradient(to bottom right, transparent 49.5%, var(--pli) 50%) left / 50.5% 100% no-repeat, linear-gradient(to bottom left, transparent 49.5%, var(--pli) 50%) right / 50.5% 100% no-repeat; transform: scaleY(-1); opacity: .7; }
.enveloppe__t { font: 1.45rem/1.15 var(--titre); margin: 0 0 .2rem; }
.enveloppe__adr { margin: 0 0 .8rem; font: .92rem/1.3 var(--machine); }
.enveloppe__adr a { text-decoration-thickness: 1px; }
.plis { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.pli { display: grid; grid-template-columns: 84px 1fr; gap: .7rem; align-items: center; text-decoration: none; background: rgba(255, 255, 255, .72); border-radius: 4px; padding: .45rem; }
.pli__img { width: 84px; height: 58px; overflow: hidden; border-radius: 3px; background: #fff; }
.pli__img img { width: 100%; height: 100%; object-fit: cover; }
.pli__t { font-weight: 600; line-height: 1.3; font-size: 1rem; overflow-wrap: anywhere; }
.pli:hover .pli__t { text-decoration: underline; }

/* cartes postales */
.courrier, .carnet, .meme { margin-top: 2.8rem; }
.postales { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; }
.postales > * { min-width: 0; }
.postale { display: flex; flex-direction: column; text-decoration: none; background: #fff; border: 1px solid var(--filet); padding: .7rem; height: 100%; box-shadow: 3px 3px 0 var(--filet); }
.postale__img { aspect-ratio: 3 / 2; overflow: hidden; background: var(--sable); }
.postale__img img { width: 100%; height: 100%; object-fit: cover; }
.postale__txt { display: flex; flex-direction: column; gap: .35rem; padding-top: .7rem; border-top: 1px dashed var(--filet); margin-top: .7rem; }
.postale__t { font: 1.15rem/1.25 var(--titre); overflow-wrap: anywhere; }
.postale:hover .postale__t { text-decoration: underline; }
.tampon { align-self: flex-start; font: .78rem/1 var(--machine); text-transform: uppercase; letter-spacing: .06em; padding: .25rem .5rem; border: 1.5px solid var(--timbre); color: var(--timbre); border-radius: 3px; transform: rotate(-2deg); }
.cachet-date { font: .82rem/1.3 var(--machine); color: var(--gris); }

/* carnet de comptes */
.comptes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0 2rem; background: repeating-linear-gradient(transparent 0 2.2rem, var(--filet) 2.2rem calc(2.2rem + 1px)); }
.comptes > * { min-width: 0; }
.compte { display: grid; grid-template-columns: 110px 1fr; gap: .9rem; align-items: center; text-decoration: none; padding: .8rem 0; border-bottom: 1px solid var(--filet); background: var(--papier); }
.compte__img { width: 110px; height: 74px; overflow: hidden; background: var(--sable); }
.compte__img img { width: 100%; height: 100%; object-fit: cover; }
.compte__txt { display: flex; flex-wrap: wrap; gap: .35rem .6rem; align-items: center; min-width: 0; }
.compte__t { flex-basis: 100%; font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
.compte:hover .compte__t { text-decoration: underline; }

/* article */
.lettre { max-width: 800px; margin: 0 auto; }
.lettre__env { position: relative; border-radius: 6px; padding: 1.6rem 1.5rem 1.4rem; box-shadow: 0 2px 0 var(--pli); }
.lettre__env h1 { font: clamp(1.7rem, 3.6vw, 2.4rem)/1.15 var(--titre); margin: 0; }
.lettre__env p { margin: .5rem 0 0; }
.lettre__env--rubrique { margin-bottom: 1.8rem; }
.lettre__timbre { position: absolute; top: -.8rem; right: 1.2rem; background: var(--timbre); color: #fff; text-decoration: none; font: .82rem/1 var(--machine); text-transform: uppercase; padding: .55rem .7rem; outline: 2px dotted var(--timbre); outline-offset: 2px; transform: rotate(3deg); }
.lettre__m { font: .88rem/1.4 var(--machine); color: var(--gris); }
.lettre__img { margin: 1.4rem 0 0; }
.lettre__img img { width: 100%; border-radius: 4px; }
.lettre__papier { background: #fff; margin-top: 1.4rem; padding: 1.8rem clamp(1rem, 4vw, 2.6rem); border: 1px solid var(--filet); overflow-wrap: anywhere; }
.lettre__papier h2 { font: 1.55rem/1.25 var(--titre); margin: 2rem 0 .6rem; }
.lettre__papier h3 { font-size: 1.22rem; margin: 1.6rem 0 .4rem; }
.lettre__papier a { color: #2b4f8f; }
.lettre__papier table { width: 100%; border-collapse: collapse; display: block; overflow-x: auto; margin: 1.2rem 0; font-size: 1rem; }
.lettre__papier th, .lettre__papier td { border: 1px solid var(--filet); padding: .5rem .6rem; text-align: left; vertical-align: top; }
.lettre__papier th { background: var(--sable); }
.lettre__papier img { margin: 1rem auto; }
.lettre__papier blockquote { margin: 1.2rem 0; padding: .8rem 1.1rem; border-left: 4px solid var(--timbre); background: var(--papier); }
.lettre__papier iframe { max-width: 100%; }
.meme { max-width: 1160px; }

/* le dos de l'enveloppe */
.dos { background: var(--sable); margin-top: 2rem; position: relative; }
.dos__rabat { height: 3rem; background: linear-gradient(to bottom right, var(--papier) 49.5%, transparent 50%) left / 50.5% 100% no-repeat, linear-gradient(to bottom left, var(--papier) 49.5%, transparent 50%) right / 50.5% 100% no-repeat; }
.dos__in { max-width: 1160px; margin: 0 auto; padding: 1rem 1rem 2.4rem; display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 2rem; }
.dos__in > * { min-width: 0; }
.dos__cachet { border: 2px solid var(--timbre); border-radius: 50% / 40%; padding: 1.3rem 1.4rem; text-align: center; color: var(--timbre); align-self: start; }
.dos__nom { font: 1.5rem/1 var(--titre); margin: 0 0 .4rem; }
.dos__mot { font: .9rem/1.4 var(--machine); margin: 0; }
.dos__ligne { font: .85rem/1 var(--machine); text-transform: uppercase; letter-spacing: .08em; margin: 0 0 .6rem; padding-bottom: .4rem; border-bottom: 1px solid var(--sable-f); }
.dos ul { list-style: none; margin: 0; padding: 0; }
.dos li { margin: .3rem 0; }
.dos a { text-decoration: none; }
.dos a:hover { text-decoration: underline; }

@media (max-width: 900px) {
  .enveloppes, .postales { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .enveloppes, .postales, .comptes, .dos__in { grid-template-columns: 1fr; }
  .comptes { background: none; }
  .compte { grid-template-columns: 90px 1fr; }
  .compte__img { width: 90px; height: 62px; }
}