/* Éditions Chamade — feuille de style unique.

   Deux registres, jamais mélangés (brief §4) :
   - le MOBILIER (en-tête, texte courant, pied) est celui d'un éditeur : crème,
     encre prune-noir, un filet d'or, rien d'autre ;
   - les BLOCS ILLUSTRÉS reprennent le code des couvertures : aplat saturé,
     chiffre énorme, titre dans les couleurs du livre. Confinés à .bloc.

   Un site entièrement traité comme une couverture avait été rejeté sur l'autre
   maison ; un site entièrement sage aussi. La frontière est ici. */

:root {
  color-scheme: light;

  /* mobilier */
  --creme:      #FBF4EA;
  --creme-2:    #F5EADB;
  --encre:      #241019;
  --encre-doux: #6E5560;
  --filet:      #E2D2BF;
  --or-encre:   #94661A;   /* or lisible sur crème — contraste 5,1:1 */

  /* couleurs des couvertures — réservées aux blocs illustrés */
  --prune:      #4A1230;
  --rose:       #F5B7C5;
  --rose-fort:  #E88FA6;
  --or:         #F0C25A;
  --nuit:       #0E1A33;
  --ardoise:    #1E3A6E;
  --ambre:      #E8A11C;
  --creme-cv:   #FFF6EC;

  --serif: Constantia, Georgia, "Iowan Old Style", "Noto Serif", "Times New Roman", serif;
  --sans:  system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--creme);
  color: var(--encre);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; height: auto; display: block; }

.wrap {
  width: 100%;
  max-width: 980px;
  margin: 0 auto;
  padding-inline: 20px;
}
.wrap--texte { max-width: 660px; }

/* ---------- la marque ----------
   Sur les couvertures, ÉDITIONS CHAMADE est gravé en serif capitales très
   espacées, sous un filet fin. C'est le seul logo de la maison (décision 3) :
   on le reproduit à l'identique, on n'en invente pas un autre. */

.marque {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  text-decoration: none;
  color: inherit;
}
.marque-filet { width: 52px; height: 1px; background: var(--or-encre); }
.marque-nom {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: .34em;
  text-indent: .34em;        /* recentre : la dernière lettre traîne son espace */
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--or-encre);
}
.marque--grande .marque-nom { font-size: 16px; }
.marque--grande .marque-filet { width: 72px; }

.site-header {
  padding: 26px 0 22px;
  text-align: center;
  border-bottom: 1px solid var(--filet);
}

/* ---------- texte courant ---------- */

h1, h2, h3 {
  font-family: var(--serif);
  font-weight: 600;
  line-height: 1.18;
  letter-spacing: -.01em;
  margin: 0 0 .5em;
}
h1 { font-size: clamp(2rem, 7vw, 2.9rem); }
h2 { font-size: clamp(1.4rem, 4.6vw, 1.85rem); margin-top: 0; }
h3 { font-size: 1.15rem; }

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

a { color: var(--encre); text-decoration-color: var(--or-encre); text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--encre); }

.kicker {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--or-encre);
  margin: 0 0 14px;
}
.lead {
  font-size: 1.15rem;
  line-height: 1.6;
  color: var(--encre-doux);
  max-width: 46ch;
}
.page-head { padding: 54px 0 12px; }
.page-head .lead { margin-bottom: 0; }

section { padding: 36px 0; }
section.serre { padding: 22px 0; }

.filet-section { border: 0; border-top: 1px solid var(--filet); margin: 0; }

/* ---------- boutons ---------- */

.btn {
  display: inline-block;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  padding: 13px 22px;
  border-radius: 3px;
  border: 1px solid transparent;
  transition: background .15s, color .15s;
}
.btn-plein { background: var(--encre); color: var(--creme); }
.btn-plein:hover { background: #3A1B2A; }
.btn-ligne { border-color: var(--encre); color: var(--encre); }
.btn-ligne:hover { background: var(--encre); color: var(--creme); }
.btn-clair { background: var(--creme-cv); color: var(--prune); }
.btn-clair:hover { background: #fff; }

.boutons { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }

/* ---------- blocs illustrés : le code des couvertures ---------- */

.bloc {
  position: relative;
  overflow: hidden;
  border-radius: 6px;
  padding: 34px 26px;
  isolation: isolate;
}
.bloc-101 {
  position: absolute;
  z-index: -1;
  right: -.06em;
  bottom: -.34em;
  margin: 0;
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(9rem, 34vw, 15rem);
  line-height: .8;
  letter-spacing: -.04em;
  user-select: none;
  pointer-events: none;
}
.bloc h2, .bloc h3 { margin-bottom: .35em; }
.bloc p { max-width: 42ch; }

.bloc--champagne { background: var(--rose); color: var(--prune); --trait: var(--prune); }
.bloc--champagne .bloc-101 { color: var(--rose-fort); }
.bloc--champagne .bloc-titre { color: var(--creme-cv); }

.bloc--biere { background: var(--nuit); color: var(--creme-cv); --trait: #061020; }
.bloc--biere .bloc-101 { color: var(--ardoise); }
.bloc--biere .bloc-titre { color: var(--ambre); }

.bloc-titre {
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(1.7rem, 6.5vw, 2.4rem);
  line-height: 1.05;
  margin: 0 0 .3em;
  /* Le contour epais est ce qui tient le titre sur la couverture : creme sur
     rose ne fait que 1,4:1 sans lui. On le refait en text-shadow empiles
     plutot qu'en -webkit-text-stroke : sans paint-order, le trace passe
     par-dessus la lettre et la transforme en pate. */
  text-shadow:
     1.4px 0     0 var(--trait), -1.4px 0     0 var(--trait),
     0     1.4px 0 var(--trait),  0    -1.4px 0 var(--trait),
     1px  1px 0 var(--trait), -1px  1px 0 var(--trait),
     1px -1px 0 var(--trait), -1px -1px 0 var(--trait),
     0 4px 0 rgba(0,0,0,.2);
}
.bloc-sur {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  margin: 0 0 12px;
  opacity: .85;
}

/* ---------- les deux titres ---------- */

.titres { display: grid; gap: 26px; }
.titre-carte {
  display: grid;
  grid-template-columns: 124px 1fr;
  gap: 20px;
  align-items: start;
}
.titre-carte img,
.titre-carte .cv-absente {
  width: 124px;
  border-radius: 3px;
  box-shadow: 0 2px 14px rgba(36,16,25,.16);
}
.cv-absente {
  aspect-ratio: 2 / 3;
  display: grid;
  place-content: center;
  padding: 10px;
  text-align: center;
  font-family: var(--serif);
  font-size: 13px;
  background: var(--creme-2);
  color: var(--encre-doux);
}
.titre-carte h3 { margin-bottom: .25em; }
.titre-meta { font-size: 13px; color: var(--encre-doux); margin-bottom: .8em; }
.titre-carte .btn { padding: 9px 16px; font-size: 14px; }

/* ---------- emplacement du bonus, tant qu'il n'est pas tranché ---------- */

.bonus-attente {
  border: 1px dashed var(--filet);
  border-radius: 6px;
  background: var(--creme-2);
  padding: 26px 22px;
  text-align: center;
}
.bonus-attente p { color: var(--encre-doux); }
.bonus-attente p:first-child {
  font-family: var(--serif);
  font-size: 1.15rem;
  color: var(--encre);
}

/* ---------- pages légales ---------- */

.legal h2 { margin-top: 2.2em; font-size: 1.25rem; }
.legal h2:first-of-type { margin-top: 1.4em; }
.legal ul { padding-left: 1.1em; margin: 0 0 1.1em; }
.legal li { margin-bottom: .4em; }
.legal dt { font-weight: 600; margin-top: .9em; }
.legal dd { margin: 0; color: var(--encre-doux); }
.a-completer {
  background: #FDECC8;
  color: #6B4A00;
  padding: 1px 7px;
  border-radius: 3px;
  font-size: .92em;
  font-weight: 600;
}
.avert {
  border-left: 3px solid var(--or-encre);
  background: var(--creme-2);
  padding: 16px 18px;
  border-radius: 0 4px 4px 0;
  margin: 0 0 1.6em;
  font-size: .96rem;
}
.avert p:last-child { margin-bottom: 0; }

/* ---------- pied de page ---------- */

.site-footer {
  border-top: 1px solid var(--filet);
  margin-top: 40px;
  padding: 34px 0 44px;
  text-align: center;
  font-size: 14px;
  color: var(--encre-doux);
}
.site-footer .marque { margin-bottom: 16px; }
.footer-liens {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 18px;
  margin: 0 0 14px;
  padding: 0;
  list-style: none;
}
.footer-liens a { color: var(--encre-doux); }
.footer-mention { font-size: 13px; opacity: .85; }

@media (min-width: 720px) {
  body { font-size: 17.5px; }
  .bloc { padding: 42px 38px; }
  .titres { grid-template-columns: 1fr 1fr; gap: 34px; }
  .titre-carte { grid-template-columns: 140px 1fr; }
  .titre-carte img, .titre-carte .cv-absente { width: 140px; }
  section { padding: 48px 0; }
  .page-head { padding: 68px 0 14px; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}