/* ------------------------------------------------------------------
   Fiche fiscale
   Papier chaud, coral d'imprimerie, display condensé employé avec
   retenue. Le display sert au titre et aux fiches, jamais en pleine
   largeur.
------------------------------------------------------------------ */

:root {
  --papier: #E9E5DC;
  --carte: #F3EFE7;
  --ink: #1F1D1A;
  --ink-2: #5C574E;
  --ink-3: #8A8377;
  --coral: #EE6A4D;
  --coral-fonce: #D4543A;
  --sage: #7E9086;
  --khaki: #C2A878;
  --trait: #CFC8B9;

  --display: "Anton", "Arial Narrow", Impact, sans-serif;
  --micro: "Archivo Narrow", "Helvetica Neue", Arial, sans-serif;
  --texte: "Archivo", "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

body {
  background: var(--papier);
  color: var(--ink);
  font-family: var(--texte);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  padding: 26px 18px 80px;
}

/* grain d'impression, très léger */
body::before {
  content: "";
  position: fixed; inset: 0; pointer-events: none; z-index: 9; opacity: .05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

.wrap { max-width: 660px; margin: 0 auto; position: relative; z-index: 1; }

.caps {
  font-family: var(--micro); text-transform: uppercase;
  letter-spacing: .18em; font-weight: 600;
}

/* ---------- masthead ---------- */
.entete {
  display: flex; justify-content: space-between; align-items: center;
  gap: 14px; padding-bottom: 16px; border-bottom: 1px solid var(--trait);
}
.marque { display: flex; align-items: center; gap: 13px; }
.pastilles { display: flex; gap: 6px; }
.pastilles i { width: 9px; height: 9px; border-radius: 50%; display: block; }
.pastilles i:nth-child(1) { background: var(--ink); }
.pastilles i:nth-child(2) { background: var(--coral); }
.pastilles i:nth-child(3) { background: var(--sage); }
.pastilles i:nth-child(4) { background: #6F7A6E; }
.pastilles i:nth-child(5) { background: var(--khaki); }
.nom {
  font-family: var(--display); font-size: 17px; letter-spacing: .04em;
  text-transform: uppercase;
}
.ref {
  font-family: var(--micro); font-size: 9.5px; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; color: var(--ink-2);
}

/* ---------- intro ---------- */
.intro { padding: 34px 0 0; }
.filet { width: 58px; height: 4px; background: var(--coral); margin-bottom: 20px; }
.intro h1 {
  font-family: var(--display);
  font-size: clamp(27px, 5.6vw, 39px);
  line-height: 1.12;
  letter-spacing: .002em;
  font-weight: 400;
  margin: 0;
}
.intro h1 em { font-style: normal; color: var(--coral); }
.intro-corps {
  margin: 20px 0 0; font-size: 14.5px; line-height: 1.68;
  color: var(--ink-2); max-width: 58ch;
}
.chiffres {
  display: flex; flex-wrap: wrap; gap: 26px; margin-top: 24px;
  padding-top: 18px; border-top: 1px solid var(--trait);
}
.chiffres span {
  font-family: var(--micro); text-transform: uppercase; letter-spacing: .14em;
  font-size: 10px; font-weight: 600; color: var(--ink-2);
}
.chiffres b {
  font-family: var(--display); font-size: 20px; letter-spacing: 0;
  color: var(--coral); margin-right: 7px; vertical-align: -1px;
}

/* ---------- états ---------- */
.vide {
  margin-top: 32px; border: 1px solid var(--trait); padding: 40px 22px;
  text-align: center;
}
.vide p {
  margin: 0; font-family: var(--micro); text-transform: uppercase;
  letter-spacing: .16em; font-size: 10.5px; color: var(--ink-3);
}
.erreur {
  margin-top: 26px; border-left: 4px solid var(--coral);
  background: rgba(238,106,77,.09); padding: 13px 15px; font-size: 13.5px;
}

/* ---------- la fiche ---------- */
.carte {
  margin-top: 32px; background: var(--carte); border: 1px solid var(--trait);
  animation: monte .4s ease both;
}
.bandeau {
  background: var(--coral); color: var(--carte);
  display: flex; justify-content: space-between; align-items: center;
  gap: 14px; padding: 11px 18px;
}
.bandeau-mot {
  font-family: var(--display); text-transform: uppercase;
  font-size: 14px; letter-spacing: .03em; line-height: 1.2;
}
.bandeau-meta {
  display: flex; align-items: center; gap: 12px;
  font-family: var(--micro); text-transform: uppercase; font-weight: 600;
  letter-spacing: .16em; font-size: 9px; white-space: nowrap;
}
.bandeau-num { opacity: .78; }

.carte-corps { padding: 26px 24px 24px; }
.h-fiche {
  font-family: var(--display);
  font-size: clamp(23px, 4.9vw, 31px);
  line-height: 1.14; letter-spacing: .003em; font-weight: 400;
  margin: 0;
}

.bloc {
  margin-top: 24px; padding-top: 15px; border-top: 1px solid var(--trait);
  animation: monte .4s ease both;
}
.bloc:nth-of-type(2) { animation-delay: .05s; }
.bloc:nth-of-type(3) { animation-delay: .10s; }
.bloc:nth-of-type(4) { animation-delay: .15s; }
@keyframes monte { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } }

.etiquette {
  display: block; margin-bottom: 9px;
  font-family: var(--micro); text-transform: uppercase; letter-spacing: .2em;
  font-size: 9px; font-weight: 600; color: var(--sage);
}
.etiquette b { color: var(--coral); font-weight: 700; margin-right: 8px; }
.bloc p { margin: 0; font-size: 14.5px; line-height: 1.7; }
.limite { border-top-width: 3px; border-top-color: var(--coral); }
.limite .etiquette { color: var(--coral); }

.refs {
  margin-top: 24px; padding-top: 13px; border-top: 1px solid var(--ink);
  display: flex; flex-wrap: wrap; gap: 6px;
}
.refs span {
  font-family: var(--micro); font-size: 9.5px; font-weight: 500;
  letter-spacing: .08em; color: var(--ink-2);
  border: 1px solid var(--trait); padding: 4px 8px;
}

/* ---------- navigation ---------- */
.commandes { display: flex; flex-wrap: wrap; gap: 22px; margin-top: 20px; }
.lien {
  background: none; border: 0; padding: 6px 0 5px; cursor: pointer;
  font-family: var(--micro); text-transform: uppercase; letter-spacing: .17em;
  font-size: 10px; font-weight: 600; color: var(--ink-2);
  border-bottom: 1px solid var(--trait);
}
.lien:hover { color: var(--coral); border-color: var(--coral); }
.lien[data-actif="1"] { color: var(--ink); border-color: var(--ink); }

.cta {
  font-family: var(--micro); text-transform: uppercase; letter-spacing: .17em;
  font-size: 11px; font-weight: 700; padding: 14px 22px;
  border: 0; cursor: pointer; background: var(--coral); color: var(--carte);
  transition: background .15s;
}
.cta:hover { background: var(--coral-fonce); }
.cta:disabled { background: var(--ink-3); cursor: progress; }

.seg { display: flex; border: 1px solid var(--trait); background: var(--carte); }
.seg button {
  font-family: var(--micro); text-transform: uppercase; letter-spacing: .13em;
  font-size: 10px; font-weight: 600; padding: 11px 13px;
  border: 0; background: transparent; color: var(--ink-2); cursor: pointer;
}
.seg button + button { border-left: 1px solid var(--trait); }
.seg button[data-on="1"] { background: var(--ink); color: var(--carte); }

button:focus-visible, input:focus-visible, a:focus-visible {
  outline: 2px solid var(--coral); outline-offset: 3px;
}

/* ---------- sommaire ---------- */
.sommaire { margin-top: 28px; border-top: 1px solid var(--trait); padding-top: 22px; }
.sommaire-note {
  font-size: 13px; line-height: 1.6; color: var(--ink-2);
  margin: 15px 0 2px; max-width: 58ch;
}
.sommaire ol { list-style: none; margin: 10px 0 0; padding: 0; }
.sommaire li { border-bottom: 1px solid var(--trait); }
.sommaire li button {
  width: 100%; text-align: left; background: none; border: 0; cursor: pointer;
  padding: 14px 2px; font-family: var(--texte); font-size: 14.5px;
  color: var(--ink); display: flex; gap: 14px; align-items: baseline;
  line-height: 1.4;
}
.sommaire li button:hover { color: var(--coral); }
.liste-num {
  font-family: var(--micro); font-size: 10px; font-weight: 700;
  letter-spacing: .12em; color: var(--coral); flex: 0 0 auto;
}

/* ---------- capture email ---------- */
.capture {
  position: relative; margin-top: 40px; padding: 34px 26px 28px;
  background: var(--ink); color: var(--carte);
  animation: monte .5s ease both;
}
.capture-tampon {
  position: absolute; top: -11px; left: 22px;
  font-size: 8.5px; background: var(--coral); color: var(--carte);
  padding: 6px 10px;
}
.capture h2 {
  font-family: var(--display); font-weight: 400;
  font-size: clamp(22px, 4.9vw, 31px); line-height: 1.14;
  margin: 8px 0 12px; color: var(--carte);
}
.capture h2 em { font-style: normal; color: var(--coral); }
.capture-sous {
  font-size: 13.5px; line-height: 1.68; color: #A9A297;
  margin: 0 0 24px; max-width: 52ch;
}
.champ .etiquette { color: #857D71; }
.champ-ligne { display: flex; gap: 9px; flex-wrap: wrap; }
.champ-ligne input {
  flex: 1 1 220px; min-width: 0; padding: 14px;
  border: 1px solid #3A362F; background: #262320; color: var(--carte);
  font-family: var(--texte); font-size: 14.5px;
}
.champ-ligne input::placeholder { color: #6E675C; }
.consentement {
  display: flex; gap: 11px; align-items: flex-start; margin-top: 18px;
  font-size: 12px; line-height: 1.55; color: #948C80; cursor: pointer;
}
.consentement input { margin-top: 3px; accent-color: var(--coral); flex: 0 0 auto; }
.message { margin-top: 18px; padding: 12px 14px; font-size: 13.5px; }
.message[data-etat="ok"] { background: rgba(126,144,134,.26); border-left: 4px solid var(--sage); }
.message[data-etat="ko"] { background: rgba(238,106,77,.18); border-left: 4px solid var(--coral); }

/* ---------- pied ---------- */
.pied {
  margin-top: 40px; padding-top: 18px; border-top: 1px solid var(--trait);
  font-size: 12px; line-height: 1.68; color: var(--ink-2);
}
.pied strong { color: var(--ink); }
.pied-liens {
  margin-top: 14px; font-family: var(--micro); font-size: 9.5px;
  letter-spacing: .16em; text-transform: uppercase;
}
.pied a { color: var(--coral); text-decoration: none; border-bottom: 1px solid var(--coral); }

@media (prefers-reduced-motion: reduce) {
  .carte, .bloc, .capture { animation: none !important; }
}

@media (max-width: 440px) {
  body { padding: 20px 14px 64px; }
  .carte-corps { padding: 22px 17px 20px; }
  .bandeau { flex-direction: column; align-items: flex-start; gap: 7px; }
  .capture { padding: 28px 18px 22px; }
  .chiffres { gap: 18px; }
}