/* Coffret cadeau original : thème « papier kraft et ficelle ».
   Toutes les valeurs viennent de tokens.css. Un seul élément fort : le titre posé sur une étiquette percée. */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: var(--esp-6); }
body {
  margin: 0; background: var(--couleur-fond); color: var(--couleur-encre);
  font-family: var(--police-texte); font-size: var(--taille-base); line-height: var(--interligne);
  font-feature-settings: "kern", "liga"; overflow-wrap: break-word;
}
img, svg, picture { display: block; max-width: 100%; height: auto; }
a { color: var(--couleur-accent); text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { color: var(--couleur-accent-fonce); text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--couleur-focus); outline-offset: 3px; border-radius: 2px; }
h1, h2, h3 { font-family: var(--police-titre); font-weight: 400; line-height: var(--interligne-titre); margin: 0; text-wrap: balance; }
p { margin: 0 0 var(--esp-4); }

.evitement { position: absolute; left: -9999px; top: 0; background: var(--couleur-accent); color: var(--couleur-sur-accent); padding: var(--esp-2) var(--esp-4); z-index: 10; }
.evitement:focus { left: var(--esp-4); top: var(--esp-4); }

.conteneur { width: 100%; max-width: var(--largeur-max); margin: 0 auto; padding: 0 1rem; }
@media (min-width: 700px) { .conteneur { padding: 0 var(--esp-6); } }
.etroit { max-width: var(--largeur-max); }   /* v2.2.1 : le contenu prend la largeur du hero sur ordinateur, jamais une colonne étroite */

/* ---------- en-tête ---------- */
.entete { background: var(--couleur-surface); border-bottom: 1px solid var(--couleur-bordure); }
.entete-in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--esp-3) var(--esp-6); padding-top: var(--esp-3); padding-bottom: var(--esp-3); }
.marque { display: block; flex: 0 0 auto; }
.marque img { height: 46px; width: auto; }
.nav { flex: 1 1 auto; min-width: 0; }
.nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: var(--esp-1) var(--esp-4); justify-content: flex-end; flex-wrap: wrap; }
.nav a { display: inline-block; padding: var(--esp-2) 0; color: var(--couleur-encre); text-decoration: none; font-weight: 600; font-size: 0.97rem; border-bottom: 2px solid transparent; }
.nav a:hover { color: var(--couleur-accent); border-bottom-color: var(--couleur-kraft); }
.nav a[aria-current="page"] { color: var(--couleur-accent); border-bottom-color: var(--couleur-accent); }
@media (max-width: 760px) {
  .marque img { height: 38px; }
  .nav { flex-basis: 100%; }
  .nav ul { justify-content: flex-start; flex-wrap: wrap; gap: var(--esp-1) var(--esp-2); }
  .nav a { white-space: nowrap; padding: var(--esp-1) var(--esp-3); border: 1px solid var(--couleur-bordure); border-radius: 999px; background: var(--couleur-fond); font-size: 0.92rem; }
  .nav a:hover, .nav a[aria-current="page"] { border-color: var(--couleur-accent); }
}

/* ---------- héros : l'étiquette ---------- */
.hero { padding: var(--esp-7) 0 var(--esp-6); }
.hero-grille { display: grid; gap: var(--esp-6); align-items: center; }
.hero-avec-image .hero-grille { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 960px) { .hero-avec-image .hero-grille { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); } }
.etiquette {
  position: relative; max-width: 54rem;
  background: var(--couleur-kraft-clair);
  border-radius: var(--rayon-petit) var(--rayon-grand) var(--rayon-grand) var(--rayon-petit);
  padding: var(--esp-6) var(--esp-6) var(--esp-6) calc(var(--esp-6) + 2.25rem);
  box-shadow: var(--ombre-paquet);
}
/* l'œillet de l'étiquette */
.etiquette::before {
  content: ""; position: absolute; left: 1.15rem; top: 2.1rem; width: 1rem; height: 1rem; border-radius: 50%;
  background: var(--couleur-fond); box-shadow: inset 0 0 0 2px var(--couleur-kraft);
}
/* la ficelle qui part de l'œillet */
.etiquette::after {
  content: ""; position: absolute; left: 1.6rem; top: -1.6rem; width: 2px; height: 3.9rem;
  background: repeating-linear-gradient(180deg, var(--couleur-kraft) 0 5px, transparent 5px 8px);
  transform: rotate(-14deg); transform-origin: bottom center;
}
@media (max-width: 600px) {
  .hero { padding: var(--esp-6) 0 var(--esp-4); }
  .etiquette { padding: var(--esp-5) var(--esp-4) var(--esp-5) calc(var(--esp-4) + 1.9rem); }
  .etiquette::before { left: 0.8rem; }
  .etiquette::after { left: 1.25rem; }
}
.etiquette h1 { font-size: var(--taille-h1); color: var(--couleur-encre); }
.chapo { font-size: 1.2rem; line-height: 1.5; margin: var(--esp-4) 0 0; max-width: 60ch; color: var(--couleur-encre); }
.surtitre { margin: 0 0 var(--esp-3); font-weight: 700; font-size: var(--taille-petit); }
.surtitre a { color: var(--couleur-kraft-fonce); text-decoration: none; border-bottom: 1px dashed var(--couleur-kraft-fonce); }
.hero-img { border-radius: var(--rayon-moyen); overflow: hidden; }
.hero-img img { border-radius: var(--rayon-moyen); }
/* v2.1 : sous 960 px la photo passe avant l'étiquette, en bandeau, pour être vue dès l'arrivée */
@media (max-width: 959px) {
  .hero-avec-image .hero-img { order: -1; }
  .hero-img img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
}

.ariane ol { list-style: none; margin: 0 0 var(--esp-4); padding: 0; display: flex; flex-wrap: wrap; gap: var(--esp-1) var(--esp-2); font-size: var(--taille-petit); color: var(--couleur-muted); }
.ariane li + li::before { content: "/"; margin-right: var(--esp-2); color: var(--couleur-kraft-fonce); }
.ariane a { color: var(--couleur-muted); }
.ariane [aria-current] { color: var(--couleur-encre); }

.meta-article { display: flex; flex-wrap: wrap; gap: var(--esp-1) var(--esp-5); margin: var(--esp-5) 0 0; font-size: var(--taille-petit); color: var(--couleur-muted); }
.meta-auteur { font-weight: 600; color: var(--couleur-encre); }

/* ---------- corps ---------- */
.corps { padding-top: var(--esp-5); padding-bottom: var(--esp-7); }
.prose h2 { font-size: var(--taille-h2); color: var(--couleur-accent); margin: var(--esp-7) 0 var(--esp-4); }
.prose h3 { font-size: var(--taille-h3); margin: var(--esp-6) 0 var(--esp-3); }
.prose ul, .prose ol { padding-left: 1.3rem; margin: 0 0 var(--esp-5); }
.prose li { margin-bottom: var(--esp-2); }
.prose li::marker { color: var(--couleur-kraft-fonce); }
.prose blockquote {
  margin: var(--esp-5) 0; padding: var(--esp-4) var(--esp-5); background: var(--couleur-surface);
  border-left: 3px solid var(--couleur-kraft); border-radius: 0 var(--rayon-moyen) var(--rayon-moyen) 0;
  font-family: var(--police-titre); font-size: 1.12rem; line-height: 1.55;
}
.prose blockquote p:last-child { margin-bottom: 0; }
.prose table { width: 100%; border-collapse: collapse; margin: var(--esp-5) 0; font-size: 0.98rem; display: block; overflow-x: auto; }
.prose th, .prose td { text-align: left; padding: var(--esp-2) var(--esp-3); border-bottom: 1px solid var(--couleur-bordure); vertical-align: top; }
.prose th { color: var(--couleur-accent); font-weight: 700; border-bottom: 2px solid var(--couleur-kraft); }
.prose strong { font-weight: 700; }
.prose hr { border: 0; border-top: 1px dashed var(--couleur-kraft); margin: var(--esp-6) 0; }

/* résumé : une bande de papier avec la ficelle à gauche */
.resume { background: var(--couleur-teinte); border-radius: var(--rayon-moyen); padding: var(--esp-5) var(--esp-5) var(--esp-4); margin: 0 0 var(--esp-6); position: relative; }
.resume::before { content: ""; position: absolute; left: 0; top: var(--esp-4); bottom: var(--esp-4); width: 3px; background: repeating-linear-gradient(180deg, var(--couleur-accent) 0 6px, transparent 6px 10px); }
.resume-titre { font-family: var(--police-titre); font-size: 1.2rem; color: var(--couleur-accent); margin: 0 0 var(--esp-3); }
.resume ul { margin: 0; padding-left: 1.2rem; }
.resume li { margin-bottom: var(--esp-2); }

.sommaire { margin: 0 0 var(--esp-6); border-top: 1px solid var(--couleur-bordure); border-bottom: 1px solid var(--couleur-bordure); }
.sommaire summary { cursor: pointer; padding: var(--esp-3) 0; font-weight: 700; color: var(--couleur-encre); }
.sommaire ol { margin: 0 0 var(--esp-4); padding-left: 1.4rem; font-size: 0.98rem; }
.sommaire a { color: var(--couleur-encre); text-decoration-color: var(--couleur-kraft); }

/* encadré : une carte-étiquette posée sur le texte */
.encadre {
  position: relative; margin: var(--esp-6) 0; padding: var(--esp-5) var(--esp-5) var(--esp-4) calc(var(--esp-5) + 1.4rem);
  background: var(--couleur-surface); border: 1px solid var(--couleur-bordure); border-left: 6px solid var(--couleur-kraft);
  border-radius: var(--rayon-petit) var(--rayon-moyen) var(--rayon-moyen) var(--rayon-petit); box-shadow: var(--ombre-paquet);
}
.encadre::before { content: ""; position: absolute; left: 0.8rem; top: 1.45rem; width: 0.7rem; height: 0.7rem; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--couleur-kraft); }
.encadre-titre { font-family: var(--police-titre); font-size: 1.15rem; color: var(--couleur-kraft-fonce); margin: 0 0 var(--esp-3); }
.encadre p:last-child, .encadre ul:last-child, .encadre ol:last-child { margin-bottom: 0; }

.figure { margin: var(--esp-6) 0; }
.figure img { border-radius: var(--rayon-moyen); }
.figure figcaption { font-size: var(--taille-petit); color: var(--couleur-muted); margin-top: var(--esp-2); }

.faq { margin: var(--esp-7) 0 var(--esp-6); }
.faq h2 { font-size: var(--taille-h2); color: var(--couleur-accent); margin: 0 0 var(--esp-4); }
.faq details { border-bottom: 1px dashed var(--couleur-kraft); }
.faq summary { cursor: pointer; padding: var(--esp-4) var(--esp-6) var(--esp-4) 0; font-weight: 700; list-style: none; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: var(--esp-2); top: var(--esp-3); font-family: var(--police-titre); font-size: 1.4rem; color: var(--couleur-accent); }
.faq details[open] summary::after { content: "–"; }
.faq details p { margin: 0 0 var(--esp-4); }

.auteur-encart { display: flex; gap: var(--esp-4); align-items: flex-start; margin: var(--esp-6) 0; padding: var(--esp-5) 0; border-top: 1px solid var(--couleur-bordure); border-bottom: 1px solid var(--couleur-bordure); }
.pastille {
  flex: 0 0 auto; width: 3.4rem; height: 3.4rem; border-radius: 50%; display: grid; place-items: center;
  background: var(--couleur-accent); color: var(--couleur-sur-accent); font-family: var(--police-titre); font-size: 1.5rem;
  box-shadow: 0 0 0 3px var(--couleur-fond), 0 0 0 5px var(--couleur-kraft);
}
.auteur-nom { font-weight: 700; margin: 0 0 var(--esp-1); }
.auteur-bio { margin: 0; color: var(--couleur-muted); font-size: 0.98rem; }

.bloc-ia { margin: var(--esp-6) 0 0; padding: var(--esp-5); background: var(--couleur-teinte); border-radius: var(--rayon-moyen); font-size: 0.98rem; }
.bloc-ia-titre { font-weight: 700; margin: 0 0 var(--esp-3); }
.bloc-ia ul { list-style: none; padding: 0; margin: 0 0 var(--esp-3); display: flex; flex-wrap: wrap; gap: var(--esp-2); }
.bloc-ia ul a { display: inline-block; padding: var(--esp-1) var(--esp-3); border: 1px solid var(--couleur-accent); border-radius: 999px; text-decoration: none; font-weight: 600; }
.bloc-ia ul a:hover { background: var(--couleur-accent); color: var(--couleur-sur-accent); }
.bloc-ia-md { display: flex; flex-wrap: wrap; gap: var(--esp-3); align-items: center; margin-bottom: var(--esp-2); }
.bloc-ia button { font: inherit; font-size: var(--taille-petit); background: none; border: 1px dashed var(--couleur-muted); border-radius: var(--rayon-petit); padding: var(--esp-1) var(--esp-3); color: var(--couleur-encre); cursor: pointer; }
.bloc-ia-note { margin: 0; font-size: var(--taille-petit); color: var(--couleur-muted); }

/* ---------- sections, cartes ---------- */
.section { padding: var(--esp-7) 0; border-top: 1px dashed var(--couleur-bordure); }
.section-titre { font-size: var(--taille-h2); margin: 0 0 var(--esp-5); }
.grille-cartes { display: grid; gap: var(--esp-6) var(--esp-5); grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.carte { display: flex; flex-direction: column; background: var(--couleur-surface); border-radius: var(--rayon-moyen); border: 1px solid var(--couleur-bordure); overflow: hidden; }
.carte-img img { aspect-ratio: 3 / 2; object-fit: cover; width: 100%; }
.carte-corps { padding: var(--esp-4) var(--esp-5) var(--esp-5); display: flex; flex-direction: column; flex: 1; border-top: 3px solid var(--couleur-kraft); }
.carte-rub { margin: 0 0 var(--esp-2); font-size: var(--taille-petit); font-weight: 700; color: var(--couleur-kraft-fonce); }
.carte h3 { font-size: 1.2rem; margin: 0 0 var(--esp-3); }
.carte h3 a { color: var(--couleur-encre); text-decoration: none; }
.carte h3 a:hover { color: var(--couleur-accent); text-decoration: underline; text-decoration-color: var(--couleur-kraft); }
.carte-desc { font-size: 0.98rem; color: var(--couleur-muted); flex: 1; }
.carte-meta { margin: 0; font-size: var(--taille-petit); color: var(--couleur-muted); display: flex; gap: var(--esp-4); }

.rubs { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--esp-3); grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr)); }
.rubs a {
  display: flex; flex-direction: column; gap: var(--esp-1); height: 100%; padding: var(--esp-4) var(--esp-4) var(--esp-4) calc(var(--esp-4) + 1.2rem);
  position: relative; text-decoration: none; color: var(--couleur-encre); background: var(--couleur-kraft-clair);
  border-radius: var(--rayon-petit) var(--rayon-moyen) var(--rayon-moyen) var(--rayon-petit);
}
.rubs a::before { content: ""; position: absolute; left: 0.65rem; top: 1.15rem; width: 0.55rem; height: 0.55rem; border-radius: 50%; background: var(--couleur-fond); }
.rubs a:hover { background: var(--couleur-teinte); }
.rubs-nom { font-family: var(--police-titre); font-size: 1.12rem; }
.rubs-nb { font-size: var(--taille-petit); color: var(--couleur-muted); }

.duo { display: grid; gap: var(--esp-5); grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.duo .auteur-encart { margin: 0; padding: var(--esp-5); background: var(--couleur-surface); border: 1px solid var(--couleur-bordure); border-radius: var(--rayon-moyen); }
.suite { margin: var(--esp-6) 0 0; }
.bouton {
  display: inline-block; background: var(--couleur-accent); color: var(--couleur-sur-accent); text-decoration: none; font-weight: 700;
  padding: var(--esp-3) var(--esp-5); border-radius: 999px; border: 0; font: inherit; font-weight: 700; cursor: pointer;
}
.bouton:hover { background: var(--couleur-accent-fonce); color: var(--couleur-sur-accent); }
.vide { color: var(--couleur-muted); }

/* ---------- pied ---------- */
.pied { background: var(--couleur-encre); color: #F3EAF0; padding: var(--esp-7) 0 var(--esp-6); margin-top: var(--esp-6); }
.pied a { color: #F3EAF0; }
.pied a:hover { color: #E8C4DC; }
.pied :focus-visible { outline-color: #E8C4DC; }
.pied-in { display: grid; gap: var(--esp-5); }
.pied-nom { font-family: var(--police-titre); font-size: 1.5rem; margin: 0 0 var(--esp-1); }
.pied-marque p:last-child { margin: 0; color: #D9C9D3; }
.pied-liens { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--esp-2) var(--esp-5); }
.pied-note { margin: 0; font-size: var(--taille-petit); color: #CBB9C5; max-width: 70ch; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .pied { background: #140E15; }
}

/* ---------- mouvement : une seule apparition, au défilement, sur les cartes ---------- */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .grille-cartes .carte { animation: deballer linear both; animation-timeline: view(); animation-range: entry 0% entry 35%; }
  }
  /* v2.1 : accueil vivant, le paquet se rapproche puis s'éloigne, à peine */
  .media-anime img { transform-origin: 62% 48%; animation: approche 22s ease-in-out infinite alternate; }
  @keyframes approche { from { transform: scale(1.07) translateX(1.5%); } to { transform: none; } }
  @keyframes deballer { from { opacity: 0; transform: translateY(18px) rotate(-0.6deg); } to { opacity: 1; transform: none; } }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

@media print {
  .entete, .pied, .bloc-ia, .a-lire, .sommaire { display: none; }
  .etiquette { box-shadow: none; }
}