/* Bonjour l'IA : coffret papeterie. Crème, terracotta, kraft, Fraunces (OFL) auto-hébergée. Lisible d'abord. */
@font-face { font-family: Fraunces; font-weight: 400; font-style: normal; font-display: swap; src: url("polices/fraunces-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: Fraunces; font-weight: 400; font-style: italic; font-display: swap; src: url("polices/fraunces-latin-400-italic.woff2") format("woff2"); }
@font-face { font-family: Fraunces; font-weight: 700; font-style: normal; font-display: swap; src: url("polices/fraunces-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: Fraunces; font-weight: 700; font-style: italic; font-display: swap; src: url("polices/fraunces-latin-700-italic.woff2") format("woff2"); }
:root {
  --encre: #2e2117;
  --doux: #5a463a;
  --fond: #f4ecdb;
  --carte: #fbf6ea;
  --accent: #b85c38;
  --accent-fonce: #8f4426;
  --soleil: #c9a574;
  --ligne: #dccdb0;
  --rayon: 6px;
  --creme: #f7f0e1;
  font-size: 18px;
}
* { box-sizing: border-box; }
body {
  margin: 0; background: var(--fond); color: var(--encre);
  font-family: Fraunces, Georgia, "Times New Roman", serif;
  line-height: 1.6;
}
a { color: var(--accent-fonce); }
img { max-width: 100%; }
.conteneur { max-width: 1040px; margin: 0 auto; padding: 0 20px; }
.etroit { max-width: 760px; margin: 0 auto; padding: 0 20px; }

header.site { padding: 18px 0; border-bottom: 1px solid var(--ligne); background: var(--fond); }
header.site .conteneur { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.marque { font-weight: 700; font-size: 1.05rem; letter-spacing: .22em; text-transform: uppercase; text-decoration: none; color: var(--encre); }
.marque span { color: var(--accent); }

.bouton {
  display: inline-block; background: var(--accent); color: #fff; text-decoration: none;
  padding: 14px 26px; border-radius: 4px; font-weight: 700; font-size: 1.05rem; border: 0; cursor: pointer;
}
.bouton:hover { background: var(--accent-fonce); }
.bouton.secondaire { background: transparent; color: var(--accent-fonce); border: 2px solid var(--accent); }
.bouton.petit { padding: 8px 16px; font-size: .9rem; }

.hero { padding: 56px 0 48px; }
.hero-grille { display: grid; gap: 40px; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: center; }
.hero h1 { font-size: 2.6rem; line-height: 1.15; margin: 0 0 18px; }
.hero p.chapo { font-size: 1.25rem; color: var(--doux); max-width: 640px; }
.hero .actions { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 26px; align-items: center; }
.rassurance { color: var(--doux); font-size: .95rem; margin-top: 14px; }

section { padding: 48px 0; }
section h2 { font-size: 1.9rem; margin: 0 0 18px; line-height: 1.2; }
.fond-blanc { background: var(--carte); border-top: 1px solid var(--ligne); border-bottom: 1px solid var(--ligne); }

.grille { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.carte { background: var(--carte); border: 1px solid var(--ligne); border-radius: var(--rayon); padding: 22px; }
.fond-blanc .carte { background: var(--fond); }
.carte h3 { margin-top: 0; }

.semaines { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.semaines ol { padding-left: 1.4em; margin: 0; }
.semaines li { margin-bottom: 4px; }

.prix { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); align-items: stretch; }
.offre { background: var(--carte); border: 2px solid var(--ligne); border-radius: var(--rayon); padding: 26px; display: flex; flex-direction: column; }
.offre.vedette { border-color: var(--accent); }
.offre .montant { font-size: 2.4rem; font-weight: 800; margin: 8px 0; }
.offre .montant small { font-size: 1rem; font-weight: 600; color: var(--doux); }
.offre ul { padding-left: 1.2em; flex: 1; }
.offre .bouton { text-align: center; }
.etiquette { display: inline-block; background: var(--soleil); color: var(--encre); font-weight: 700; font-size: .8rem; padding: 3px 10px; border-radius: 3px; }

.exemple-chat { background: var(--carte); border: 1px solid var(--ligne); border-radius: var(--rayon); padding: 20px; }
.bulle { border-radius: 14px; padding: 12px 16px; margin: 8px 0; max-width: 92%; }
.bulle.moi { background: #f1e0cf; margin-left: auto; }
.bulle.ia { background: #efe4cf; }

details { background: var(--carte); border: 1px solid var(--ligne); border-radius: var(--rayon); padding: 16px 20px; margin-bottom: 10px; }
summary { cursor: pointer; font-weight: 700; }

footer.site { padding: 32px 0; color: var(--doux); font-size: .9rem; border-top: 1px solid var(--ligne); }
footer.site a { color: var(--doux); }

/* Espace acheteur */
.espace { display: grid; grid-template-columns: 290px 1fr; gap: 28px; padding: 28px 0 60px; }
.sommaire { background: var(--carte); border: 1px solid var(--ligne); border-radius: var(--rayon); padding: 14px; align-self: start; position: sticky; top: 14px; max-height: calc(100vh - 28px); overflow: auto; }
.sommaire h3 { font-size: .85rem; text-transform: uppercase; letter-spacing: .05em; color: var(--doux); margin: 14px 8px 6px; }
.sommaire button { display: block; width: 100%; text-align: left; background: none; border: 0; padding: 7px 8px; border-radius: 8px; font: inherit; font-size: .92rem; color: var(--encre); cursor: pointer; }
.sommaire button:hover:not([disabled]) { background: #f3e6d6; }
.sommaire button.actif { background: #f1e0cf; font-weight: 700; }
.sommaire button[disabled] { color: #9b8a7a; cursor: default; }
.lecon { background: var(--carte); border: 1px solid var(--ligne); border-radius: var(--rayon); padding: 30px 34px; }
.lecon h2 { margin-top: 0; font-size: 1.8rem; }
.lecon h3 { margin-top: 28px; color: var(--accent-fonce); }
.progression { height: 10px; background: var(--ligne); border-radius: 999px; overflow: hidden; margin: 8px 0 4px; }
.progression div { height: 100%; background: var(--accent); }
.prompt { border: 2px solid var(--accent); border-radius: 12px; margin: 14px 0; overflow: hidden; }
.prompt-tete { display: flex; justify-content: space-between; align-items: center; background: #f1e0cf; padding: 6px 12px; font-size: .85rem; font-weight: 700; color: var(--accent-fonce); }
.prompt pre { margin: 0; padding: 14px 16px; white-space: pre-wrap; font-family: inherit; font-size: 1rem; background: #fff; }
.copier { background: var(--accent); color: #fff; border: 0; border-radius: 4px; padding: 5px 14px; font-weight: 700; cursor: pointer; }
.tableau { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; margin: 12px 0; }
th, td { border: 1px solid var(--ligne); padding: 8px 10px; text-align: left; vertical-align: top; }
th { background: #efe4cf; }
.verrou { color: var(--doux); }
.alerte { background: #f7ecd3; border: 1px solid var(--soleil); border-radius: var(--rayon); padding: 16px 20px; }
.lien-acces { word-break: break-all; background: #fff; border: 1px dashed var(--accent); padding: 12px; border-radius: 10px; font-family: Consolas, monospace; font-size: .9rem; }
.nav-lecon { display: flex; justify-content: space-between; margin-top: 30px; gap: 10px; }

/* Carte cadeau imprimable */
.carte-cadeau { background: var(--creme); color: var(--encre); border: 1.5px solid var(--accent); outline: 8px solid var(--creme); box-shadow: 0 0 0 9px #d8c7a5, 12px 20px 36px rgba(50,30,10,.28); border-radius: 4px; padding: 40px; max-width: 640px; margin: 20px auto; }
.carte-cadeau h2 { font-size: 2rem; margin: 0 0 8px; }
.carte-cadeau .code { background: #fff; border: 1px dashed var(--accent); color: var(--encre); border-radius: 10px; padding: 12px; font-family: Consolas, monospace; word-break: break-all; margin-top: 18px; }

@media (max-width: 820px) {
  :root { font-size: 17px; }
  .hero h1 { font-size: 2rem; }
  .hero-grille { grid-template-columns: 1fr; }
  .espace { grid-template-columns: 1fr; }
  .sommaire { position: static; max-height: none; }
  .lecon { padding: 22px 18px; }
}
@media print {
  header.site, footer.site, .sommaire, .nav-lecon, .pas-imprimer, .copier { display: none !important; }
  body { background: #fff; }
  .espace { display: block; }
  .lecon { border: 0; }
}

/* Coffret en héros */
.coffret { position: relative; width: 300px; height: 408px; margin: 14px auto 40px; transform: rotate(-4deg); background: var(--creme);
  box-shadow: -9px 0 0 #d8c7a5, -12px 0 0 #b99f74, 12px 18px 34px rgba(50,30,10,.35); text-align: center; }
.coffret::before { content: ""; position: absolute; inset: 14px; border: 1.5px solid var(--accent); }
.coffret .sur { position: absolute; top: 32px; width: 100%; font-size: .62rem; letter-spacing: .42em; color: var(--accent); }
.coffret .t1 { position: absolute; top: 62px; width: 100%; font-size: 2.1rem; line-height: 1.02; font-weight: 700; color: var(--encre); }
.coffret .t1 i { display: block; font-weight: 400; font-size: 1.6rem; color: var(--accent); }
.coffret svg { position: absolute; top: 190px; left: 30px; width: 240px; }
.coffret .t2 { position: absolute; bottom: 28px; width: 100%; font-size: .7rem; line-height: 1.3; color: var(--doux); }
.coffret .etq { position: absolute; right: -34px; bottom: -34px; background: var(--soleil); color: var(--encre); padding: 8px 18px; font-size: .75rem; line-height: 1.2; transform: rotate(9deg); box-shadow: 0 8px 14px rgba(0,0,0,.28); border-radius: 4px; }
.coffret .etq b { display: block; font-size: 1.6rem; }
@media print { .coffret { display: none; } }