/* ==========================================================================
   Klemsiteweb, page Services (services.html) : timbres, étiquettes, cachet
   Propriétaire : Claude 1. Chargé après style.css.
   ========================================================================== */



.timbres .apparait:nth-child(2), .etiquettes .apparait:nth-child(2) { transition-delay: 90ms; }
.timbres .apparait:nth-child(3), .etiquettes .apparait:nth-child(3) { transition-delay: 180ms; }

/* ==========================================================================
   Le bureau de poste Klem : intro, scène, formulaire K-01
   ========================================================================== */
.intro-services { padding: 0; overflow: hidden; }
.intro-texte { text-align: center; }
.intro-texte h1 { font-size: clamp(2.2rem, 5vw, 4rem); }
.intro-texte .sous-titre { margin: 0 auto; max-width: 680px; }

.poste-zone { margin-top: 0; }
.poste-indice { margin: 0 0 8px; text-align: center; color: var(--cuir); font-size: 1.45rem; transform: rotate(-1.5deg); }
.indice-doigt { display: none; }
@media (hover: none) {
  .indice-souris { display: none; }
  .indice-doigt { display: inline; }
}
.poste-defile { overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.poste-defile::-webkit-scrollbar { display: none; }
#poste { display: block; width: 100%; height: auto; max-height: 640px; }
@media (max-width: 899px) { #poste { width: 991px; height: 380px; max-width: none; } }

#poste .guichet { cursor: pointer; outline: none; }
#poste .timbre-poste { transition: transform 250ms ease-out; }
#poste .guichet:hover .timbre-poste, #poste .guichet:focus-visible .timbre-poste { transform: translateY(-8px); }
#poste .halo { opacity: 0; transition: opacity 300ms; }
#poste .guichet:hover .halo, #poste .guichet:focus-visible .halo, #poste .guichet.choisi .halo { opacity: 0.55; }
#poste .obliteration { opacity: 0; }
#poste .guichet.choisi .obliteration { opacity: 1; animation: obliterer 450ms cubic-bezier(0.3, 1.6, 0.5, 1) backwards; transform-box: fill-box; transform-origin: center; }
@keyframes obliterer { from { opacity: 0; transform: scale(1.8) rotate(-12deg); } }
#poste .contour-focus { stroke: none; }
#poste .guichet:focus-visible .contour-focus { stroke: var(--cobalt); stroke-width: 5; stroke-dasharray: 12 7; }
#poste .lumiere { opacity: 0.7; }

/* Formulaire K-01 : la question du guichet, sur un vrai formulaire postal */
.formulaire-poste {
  position: relative;
  margin: -30px auto 0;
  max-width: 940px;
  background-color: var(--blanc-pur);
  background-image: repeating-linear-gradient(transparent 0 31px, rgba(43, 79, 216, 0.1) 31px 32px);
  border: 2px solid var(--encre);
  border-radius: 6px;
  box-shadow: 0 18px 36px rgba(30, 26, 21, 0.18);
  padding: 0 22px 22px;
  rotate: -0.6deg;
  z-index: 1;
}
.formulaire-tete {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin: 0 -22px 18px;
  padding: 10px 22px;
  background: var(--cobalt);
  color: var(--papier);
  font: 700 0.78rem var(--f-texte);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
}
@media (max-width: 480px) { .formulaire-tete { font-size: 0.68rem; letter-spacing: 0.08em; } }
.choix-question { font-weight: 600; font-size: 1.1rem; margin-bottom: 14px; }
.choix-question .manuscrit { font-size: 1.6rem; color: var(--cobalt); margin-right: 6px; }
.choix-boutons { display: grid; gap: 10px; }
@media (min-width: 900px) { .choix-boutons { grid-template-columns: repeat(3, 1fr); } }
.choix-boutons button {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  text-align: left;
  font: 500 0.98rem/1.4 var(--f-texte);
  color: var(--encre);
  background: var(--papier);
  border: 1.5px solid var(--filet);
  border-radius: 8px;
  padding: 14px 16px;
  min-height: 56px;
  cursor: pointer;
  transition: border-color 150ms, background 150ms, transform 150ms;
}
.choix-boutons button:hover { border-color: var(--encre); transform: translateY(-2px); }
.case {
  flex: none;
  position: relative;
  width: 22px; height: 22px;
  margin-top: 1px;
  border: 2px solid var(--encre);
  border-radius: 3px;
  background: var(--blanc-pur);
}
.choix-boutons button[aria-pressed="true"] { border-color: var(--cobalt); background: #EEF2FD; }
.choix-boutons button[aria-pressed="true"] .case::after {
  content: "";
  position: absolute;
  left: 4px; top: -6px;
  width: 9px; height: 17px;
  border-right: 3.5px solid var(--cobalt);
  border-bottom: 3.5px solid var(--cobalt);
  transform: rotate(40deg);
}
.choix-reponse { margin: 14px 0 0; min-height: 1.6em; }
.formulaire-astuce { margin: 4px 0 0; color: var(--cuir); font-size: 1.3rem; line-height: 1.2; }
#poste .distributeur { cursor: pointer; }
#poste .ticket { transition: transform 250ms ease-out; }
#poste .distributeur:hover .ticket, #poste .distributeur:focus-visible .ticket { transform: translateY(6px); }
#poste .distributeur:focus-visible { outline: none; }
#poste .distributeur:focus-visible circle:first-of-type { stroke: var(--cobalt); stroke-width: 4; }

/* ==========================================================================
   Forfaits : timbres
   ========================================================================== */
.forfaits-section { padding-top: 64px; overflow-x: clip; }

.timbres {
  display: grid;
  gap: 32px;
  align-items: stretch;
}
@media (min-width: 1024px) { .timbres { grid-template-columns: repeat(3, 1fr); gap: 28px; } }

.timbre {
  position: relative;
  background: var(--blanc-pur);
  border: 12px dotted var(--papier);
  padding: 12px;
  filter: drop-shadow(0 8px 14px rgba(30, 26, 21, 0.1));
  scroll-margin-top: calc(var(--header-h) + 24px);
  transition: opacity 300ms, filter 300ms, scale 300ms;
}
.timbre-dedans {
  position: relative;
  height: 100%;
  border: 2px solid var(--encre);
  padding: 26px 22px 24px;
  display: flex;
  flex-direction: column;
}
.timbre-tete { margin-bottom: 18px; padding-bottom: 18px; border-bottom: 1.5px dashed var(--filet); }
.timbre h3 { font-size: clamp(2.2rem, 4vw, 2.8rem); margin-bottom: 0.1em; }
.timbre-pour { color: var(--gris); margin-bottom: 10px; }
.timbre-valeur { margin: 0; font-family: var(--f-titre); font-weight: 600; font-size: 1.6rem; color: var(--cobalt); line-height: 1.1; }
.timbre-valeur span { font-family: var(--f-texte); font-weight: 400; font-size: 0.95rem; color: var(--gris); }
.timbre .badge { margin-bottom: 12px; }

.timbre-liste { list-style: none; margin: 0 0 22px; padding: 0; display: grid; gap: 9px; font-size: 0.97rem; }
.timbre-liste li { position: relative; padding-left: 28px; }
.timbre-liste li::before {
  content: "";
  position: absolute;
  left: 2px; top: 0.5em;
  width: 12px; height: 7px;
  border-left: 2px solid var(--cobalt);
  border-bottom: 2px solid var(--cobalt);
  transform: rotate(-45deg);
}

.timbre-exemple {
  margin-top: auto;
  margin-bottom: 18px;
  display: grid;
  grid-template-columns: 92px 1fr;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  font-weight: 600;
}
.timbre-exemple img { width: 92px; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; border-radius: 5px; box-shadow: var(--ombre); }
.timbre-exemple .manuscrit { font-size: 1.35rem; font-weight: 500; color: var(--cuir); margin-right: 3px; }
.timbre-exemple .externe { display: block; font-weight: 400; font-size: 0.85rem; color: var(--cobalt); }
.timbre-exemple:hover .externe { text-decoration: underline; }
.timbre .btn { justify-content: center; }

.timbre-bleu { background: var(--cobalt); }
.timbre-bleu .timbre-dedans { border-color: var(--papier); color: var(--papier); }
.timbre-bleu .timbre-tete { border-bottom-color: rgba(248, 242, 229, 0.25); }
.timbre-bleu .timbre-pour, .timbre-bleu .timbre-valeur span { color: rgba(248, 242, 229, 0.8); }
.timbre-bleu .timbre-valeur { color: var(--or); }
.timbre-bleu .timbre-liste li::before { border-color: var(--or); }
.timbre-bleu .timbre-exemple .manuscrit { color: var(--or); }
.timbre-bleu .timbre-exemple .externe { color: var(--papier); }
.timbre-bleu .btn-primaire { background: var(--encre); }
.timbre-bleu .btn-primaire:hover { background: #000; }
@media (min-width: 1024px) {
  .timbre-bleu { rotate: -1.2deg; }
}

/* Le tampon « C'est celui-là » */
.tampon {
  position: absolute;
  top: -34px; right: -30px;
  z-index: 2;
  width: 96px; height: 96px;
  display: none; place-items: center;
  border-radius: 50%;
  border: 3px double #C0392B;
  color: #C0392B;
  font: 700 0.8rem/1.15 var(--f-titre);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  text-align: center;
  background: rgba(253, 251, 247, 0.85);
  opacity: 0.92;
  transform: rotate(-16deg);
  pointer-events: none;
}
.choisi .tampon { display: grid; animation: tamponner 450ms cubic-bezier(0.3, 1.6, 0.5, 1) 250ms backwards; }
@keyframes tamponner {
  from { opacity: 0; transform: rotate(-16deg) scale(2.2); }
  to { opacity: 0.92; transform: rotate(-16deg) scale(1); }
}
.js .timbres .timbre.pas-choisi { opacity: 0.55; filter: grayscale(0.4); }
.timbre.choisi { scale: 1.02; }
@media (max-width: 480px) { .tampon { right: -10px; top: -26px; width: 84px; height: 84px; } }

.forfaits-note { margin: 44px 0 0; text-align: center; color: var(--gris); }

/* ==========================================================================
   Inclus partout : le reçu du guichet
   ========================================================================== */
/* La section est posée sur le bois du comptoir */
.comptoir-bois {
  background-color: #8F6140;
  background-image:
    repeating-linear-gradient(180deg, rgba(0, 0, 0, 0.06) 0 2px, transparent 2px 38px),
    repeating-linear-gradient(180deg, rgba(255, 255, 255, 0.04) 0 1px, transparent 1px 13px);
  color: var(--papier);
  border-top: 10px solid #6B4528;
  border-bottom: 10px solid #6B4528;
}
.comptoir-bois .kicker { color: var(--or); }
.comptoir-bois .titre-2l em { color: var(--or); }
.comptoir-bois .sous-titre { color: rgba(248, 242, 229, 0.85); }
.comptoir-bois .inclus-note { color: var(--or); }
.comptoir-bois .recu { color: var(--encre); }

.inclus-grille { display: grid; gap: 40px; align-items: center; }
@media (min-width: 1024px) { .inclus-grille { grid-template-columns: 1fr 1.05fr; gap: 64px; } }
.inclus-note { margin: 22px 0 0; color: var(--cuir); font-size: 1.6rem; transform: rotate(-2deg); }
@media (max-width: 1023px) { .inclus-note { display: none; } }

.recu {
  position: relative;
  max-width: 560px;
  width: 100%;
  margin: 0 auto;
  padding: 30px 28px 34px;
  background: #FFFDF8;
  font-size: 0.95rem;
  rotate: 1deg;
  filter: drop-shadow(0 14px 22px rgba(30, 26, 21, 0.16));
  /* bords dentelés en haut et en bas, comme un ticket arraché */
  -webkit-mask:
    conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg) top / 18px 51% repeat-x,
    conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / 18px 51% repeat-x;
          mask:
    conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg) top / 18px 51% repeat-x,
    conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / 18px 51% repeat-x;
}
.recu-tete {
  text-align: center;
  padding-bottom: 16px;
  margin-bottom: 6px;
  border-bottom: 2px dashed rgba(30, 26, 21, 0.3);
  font-family: "Courier New", ui-monospace, monospace;
}
.recu-tete strong { display: block; font-size: 1.35rem; letter-spacing: 0.2em; }
.recu-tete span { font-size: 0.8rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--gris); }

.recu-lignes { list-style: none; margin: 0; padding: 0; }
.recu-lignes li {
  display: grid;
  grid-template-columns: 26px 1fr auto;
  gap: 12px;
  align-items: start;
  padding: 14px 0;
  border-bottom: 1.5px dashed rgba(30, 26, 21, 0.18);
}
.recu-lignes h3 { font-size: 1.05rem; margin: 0 0 3px; }
.recu-lignes p { margin: 0; color: var(--gris); font-size: 0.9rem; line-height: 1.5; }
.recu-coche {
  position: relative;
  width: 22px; height: 22px;
  margin-top: 1px;
  border: 2px solid var(--encre);
  border-radius: 3px;
}
.recu-coche::after {
  content: "";
  position: absolute;
  left: 5px; top: -5px;
  width: 8px; height: 16px;
  border-right: 3px solid var(--cobalt);
  border-bottom: 3px solid var(--cobalt);
  transform: rotate(40deg);
}
.recu-mention {
  font-family: "Courier New", ui-monospace, monospace;
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cobalt);
  padding-top: 3px;
}
.recu-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 16px 0 6px;
  border-bottom: 3px double rgba(30, 26, 21, 0.5);
  font-family: "Courier New", ui-monospace, monospace;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.recu-total strong { font-size: 1.2rem; white-space: nowrap; }
.recu-pied { position: relative; display: flex; justify-content: center; padding-top: 22px; }
.code-barres {
  width: 190px;
  height: 42px;
  background: repeating-linear-gradient(90deg,
    var(--encre) 0 2px, transparent 2px 4px, var(--encre) 4px 5px, transparent 5px 8px,
    var(--encre) 8px 11px, transparent 11px 12px, var(--encre) 12px 13px, transparent 13px 16px);
}
.recu-cachet {
  position: absolute;
  right: 4px; bottom: -6px;
  width: 92px; height: 92px;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 3px double #C0392B;
  color: #C0392B;
  font: 800 0.72rem/1.15 var(--f-texte);
  letter-spacing: 0.1em;
  text-align: center;
  rotate: -14deg;
  opacity: 0.85;
}
@media (max-width: 480px) {
  .recu { padding: 26px 18px 30px; }
  .recu-lignes li { grid-template-columns: 24px 1fr; }
  .recu-mention { display: none; }
  .recu-total { font-size: 0.78rem; letter-spacing: 0.02em; gap: 10px; }
  .recu-pied { justify-content: flex-start; }
  .code-barres { width: 150px; }
  .recu-cachet { width: 76px; height: 76px; right: -4px; font-size: 0.62rem; }
}

/* ==========================================================================
   Options : étiquettes de prix
   ========================================================================== */
.etiquettes {
  list-style: none;
  margin: 48px 0 0;
  padding: 0;
  display: grid;
  gap: 26px;
}
@media (min-width: 640px) { .etiquettes { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .etiquettes { grid-template-columns: repeat(3, 1fr); gap: 30px; } }

.presentoir { position: relative; padding-top: 34px; margin-top: 40px; }
.presentoir + .presentoir { margin-top: 56px; }
@media (min-width: 1024px) {
  .presentoir::before {
    content: "";
    position: absolute;
    left: -10px; right: -10px; top: 0;
    height: 8px;
    border-radius: 4px;
    background: linear-gradient(#E0BE6A, #A9822F);
    box-shadow: 0 3px 6px rgba(30, 26, 21, 0.2);
  }
  .presentoir .etiquette-trou::after { height: 52px; transform: none; }
}

.etiquette {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--blanc-pur);
  border: 2px solid var(--encre);
  padding: 46px 24px 22px;
  border-radius: 22px 22px 10px 10px;
  transition: transform 250ms ease-out;
}
.etiquette:nth-child(odd) { rotate: -0.8deg; }
.etiquette:nth-child(even) { rotate: 0.8deg; }
.etiquette:hover { transform: translateY(-4px) rotate(0.6deg); }
.etiquette-trou {
  position: absolute;
  top: 14px; left: 50%;
  width: 14px; height: 14px;
  margin-left: -7px;
  border-radius: 50%;
  border: 2px solid var(--encre);
  background: var(--papier);
}
.etiquette-trou::after {
  /* la ficelle */
  content: "";
  position: absolute;
  left: 50%; bottom: 100%;
  width: 2px; height: 22px;
  background: var(--cuir);
  transform: rotate(18deg);
  transform-origin: bottom;
}
.etiquette h3 { font-size: 1.35rem; margin-bottom: 0.35em; }
.etiquette p { color: var(--gris); font-size: 0.97rem; }
.etiquette-preuve { color: var(--encre) !important; }
.etiquette-preuve .manuscrit { font-size: 1.3rem; color: var(--cobalt); }
.etiquette-prix {
  margin: auto 0 0;
  padding-top: 14px;
  border-top: 1.5px dashed var(--filet);
  font-family: var(--f-titre);
  font-weight: 600;
  color: var(--cuir) !important;
}

/* ==========================================================================
   FAQ : des enveloppes qu'on ouvre
   ========================================================================== */
.faq-courrier {
  margin-top: 40px;
  display: grid;
  gap: 22px 26px;
  align-items: start;
}
@media (min-width: 860px) { .faq-courrier { grid-template-columns: repeat(2, 1fr); } }

.enveloppe {
  position: relative;
  background: #F4EAD5;
  border: 2px solid var(--encre);
  border-radius: 6px;
  box-shadow: 0 8px 16px rgba(30, 26, 21, 0.1);
}
.enveloppe:nth-child(odd) { rotate: -0.6deg; }
.enveloppe:nth-child(even) { rotate: 0.5deg; }
.enveloppe summary {
  position: relative;
  list-style: none;
  cursor: pointer;
  min-height: 132px;
  padding: 58px 92px 20px 22px;
  font-family: var(--f-titre);
  font-weight: 600;
  font-size: 1.15rem;
  line-height: 1.3;
  overflow: hidden;
}
.enveloppe summary::-webkit-details-marker { display: none; }
/* Le rabat en V */
.enveloppe summary::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 48px;
  background:
    linear-gradient(to bottom right, transparent calc(50% - 1px), rgba(30, 26, 21, 0.35) calc(50% - 1px), rgba(30, 26, 21, 0.35) calc(50% + 1px), transparent calc(50% + 1px)) left / 50.5% 100% no-repeat,
    linear-gradient(to bottom left, transparent calc(50% - 1px), rgba(30, 26, 21, 0.35) calc(50% - 1px), rgba(30, 26, 21, 0.35) calc(50% + 1px), transparent calc(50% + 1px)) right / 50.5% 100% no-repeat;
  transition: opacity 250ms;
}
/* Le timbre dans le coin */
.enveloppe summary::after {
  content: "";
  position: absolute;
  right: 16px; top: 56px;
  width: 46px; height: 54px;
  background: var(--cobalt);
  border: 4px dotted #F4EAD5;
  outline: 1px solid rgba(30, 26, 21, 0.25);
  rotate: 4deg;
}
.enveloppe:nth-child(3n+2) summary::after { background: #C44B2D; }
.enveloppe:nth-child(3n) summary::after { background: #D4A557; }
.enveloppe summary:hover { color: var(--cobalt); }
.enveloppe[open] summary::before { opacity: 0.25; }

/* La lettre qui sort de l'enveloppe */
.enveloppe .lettre {
  margin: 0 14px 16px;
  padding: 18px 20px;
  background-color: var(--blanc-pur);
  background-image: repeating-linear-gradient(transparent 0 27px, rgba(43, 79, 216, 0.12) 27px 28px);
  border-radius: 3px;
  box-shadow: 0 -6px 14px rgba(30, 26, 21, 0.12);
  font-family: var(--f-main);
  font-size: 1.35rem;
  line-height: 28px;
  color: var(--encre);
}
.enveloppe[open] .lettre { animation: lettre-sort 380ms cubic-bezier(0.2, 0.8, 0.2, 1); }
@keyframes lettre-sort { from { opacity: 0; transform: translateY(-16px); } }

/* ==========================================================================
   CTA final : le cachet
   ========================================================================== */
.cta-tampon { position: relative; overflow: hidden; }
.cta-tampon .conteneur { position: relative; z-index: 1; }
.cachet {
  position: absolute;
  right: -40px; top: -40px;
  width: 260px; height: 260px;
  color: var(--or);
  opacity: 0.22;
  animation: cachet-tourne 40s linear infinite;
}
@media (min-width: 1024px) { .cachet { right: 2%; top: 50%; margin-top: -120px; width: 240px; height: 240px; opacity: 0.3; } }
@keyframes cachet-tourne { to { rotate: 360deg; } }