/* Style commun « papier et sceau » des pages refaites (accueil, traduction assermentée…).
   Fond papier, encre noire, rouge du sceau comme seule couleur vive. Figtree (chargée par mandarine.css), titres sans
   espacement négatif. Complète mandarine.css (menu, pied de page, boutons) sans le modifier : tout est limité aux pages
   dont le <body> porte la classe « papier ». */

body.papier {
  --paper: #faf7f1;
  --paper-2: #f3ede2;
  --paper-3: #ebe3d5;
  --ink: #1d1c1b;
  --ink-2: #47433f;
  --ink-3: #6c6761; /* 5,1:1 sur --paper */
  --line: #e4ddd0;
  --red: #b23a36; /* 5,5:1 sur --paper, 6,1:1 avec du texte blanc */
  --red-dk: #932e2b;
  --red-50: #f8ece8;
  --cjk: "Noto Serif SC", "Songti SC", "STSong", "SimSun", serif;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  background: var(--paper);
}
body.papier h1,
body.papier h2,
body.papier h3 { letter-spacing: 0; }
body.papier .hd { background: color-mix(in srgb, var(--paper) 88%, transparent); backdrop-filter: blur(12px); }
html { scroll-padding-top: 84px; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }

.ac-eyebrow { display: inline-flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--red); }
.ac-eyebrow::before { content: ""; width: 18px; height: 2px; border-radius: 2px; background: currentColor; }
.ac-sec { padding: clamp(64px, 8vw, 112px) 0; }
.ac-sec-t { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: clamp(28px, 3.5vw, 44px); }
.ac-sec-t h2 { margin-top: 12px; font-size: clamp(28px, 3vw, 40px); line-height: 1.15; }
.ac-sec-t p { margin-top: 10px; max-width: 52ch; font-size: 17px; color: var(--ink-2); }
.ac-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ——— sceau chinois carré ——— */
.ac-seal { display: block; color: var(--red); }
.ac-seal text { font-family: var(--cjk); font-weight: 700; fill: var(--paper); }

/* ——— photos ——— */
.ac-ph { position: relative; overflow: hidden; border-radius: 24px; background: linear-gradient(160deg, var(--paper-2), var(--paper-3)); }
.ac-ph img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ac-ph.vide::after { content: attr(data-vide); position: absolute; inset: auto 16px 14px; font-size: 12.5px; color: var(--ink-3); }

/* ——— feuille : un document qui se traduit sous les yeux ——— */
.ac-feuille { position: relative; align-self: center; padding: 20px 18px 22px; border: 1px solid var(--line); border-radius: 10px; background: #fff; box-shadow: 0 22px 40px -26px rgba(29, 28, 27, 0.45); transform: rotate(2deg); }
.ac-feuille::before { content: ""; position: absolute; inset: 8px -8px -8px 8px; z-index: -1; border: 1px solid var(--line); border-radius: 10px; background: var(--paper-2); transform: rotate(-4deg); }
.ac-feuille-h { display: flex; justify-content: space-between; padding-bottom: 10px; border-bottom: 1px solid var(--line); font-size: 11.5px; font-weight: 600; color: var(--ink-3); }
.ac-feuille-h span:first-child { color: var(--red); }
.ac-feuille-t { margin-top: 14px; min-height: 2.5em; font-size: 18px; font-weight: 700; line-height: 1.25; color: var(--ink); }
.ac-feuille-l { margin-top: 14px; display: grid; gap: 9px; }
.ac-feuille-l i { display: block; height: 6px; border-radius: 3px; background: var(--paper-3); }
.ac-feuille .ac-seal { position: absolute; right: 14px; bottom: -14px; width: 54px; transform: rotate(-6deg); }

/* ——— liens ——— */
.ac-link { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--red); }
.ac-link:hover { color: var(--red-dk); text-decoration: underline; text-underline-offset: 3px; }

/* ——— questions fréquentes ——— */
.ac-faq-g { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(28px, 6vw, 88px); }
.ac-faq-g h2 { margin-top: 12px; font-size: clamp(28px, 3vw, 40px); line-height: 1.15; }
.ac-faq-g > div:first-child p { margin-top: 12px; color: var(--ink-2); }
.ac-qa { border-top: 1px solid var(--line); }
.ac-qa:last-of-type { border-bottom: 1px solid var(--line); }
.ac-qa summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 20px 0; list-style: none; cursor: pointer; font-size: 17px; font-weight: 600; color: var(--ink); }
.ac-qa summary::-webkit-details-marker { display: none; }
.ac-qa summary::after { display: none; } /* chevron de mandarine.css remplacé par le « + » */
.ac-qa { border-bottom: 0; }
.ac-qa summary:hover { color: var(--red); }
.ac-qa summary i { display: grid; place-items: center; width: 32px; height: 32px; flex: none; border-radius: 50%; border: 1px solid var(--line); color: var(--ink-3); transition: transform 0.3s var(--ease), background 0.2s, color 0.2s, border-color 0.2s; }
.ac-qa[open] summary i { transform: rotate(45deg); border-color: var(--red); background: var(--red); color: #fff; }
.ac-qa p { max-width: 62ch; padding: 0 48px 22px 0; color: var(--ink-2); animation: ac-ouvre 0.3s var(--ease); }
@keyframes ac-ouvre { from { opacity: 0; transform: translateY(-4px); } }

/* ——— aide ——— */
.ac-help { position: relative; isolation: isolate; overflow: hidden; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 24px 32px; align-items: center; padding: clamp(24px, 3.5vw, 44px); border-radius: 26px; background: var(--ink); color: #fff; }
.ac-help .ac-seal { position: absolute; right: -40px; bottom: -48px; z-index: -1; width: 220px; opacity: 0.16; transform: rotate(-8deg); }
.ac-help .av { width: 84px; height: 84px; overflow: hidden; border-radius: 50%; background: #3a3734; }
.ac-help .av img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ac-help h2 { font-size: clamp(22px, 2.2vw, 28px); color: #fff; }
.ac-help p { margin-top: 6px; color: rgba(255, 255, 255, 0.78); }
.ac-help .acts { display: flex; flex-wrap: wrap; gap: 10px; }
.ac-help .btn-o { background: transparent; color: #fff; border-color: rgba(255, 255, 255, 0.3); }
.ac-help .btn-o:hover { border-color: #fff; color: #fff; }

/* ——— apparitions : courtes, déclenchées dès l'entrée à l'écran ——— */
/* masqué seulement si JavaScript tourne (classe .js posée dans <head>) : sans lui, tout reste lisible */
.js [data-ac] { opacity: 0; transform: translateY(18px); transition: opacity 0.45s var(--ease), transform 0.45s var(--ease); transition-delay: var(--d, 0s); }
.js [data-ac].in { opacity: 1; transform: none; }
.ac-hero [data-ac] { transition-duration: 0.5s; }

@media (max-width: 1000px) {
  .ac-faq-g { grid-template-columns: minmax(0, 1fr); }
  .ac-help { grid-template-columns: auto minmax(0, 1fr); }
  .ac-help .acts { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .ac-qa p { padding-right: 0; }
  .ac-help { grid-template-columns: minmax(0, 1fr); }
  .ac-help .acts .btn { flex: 1; }
}
/* « moins d'animations » : la classe .calme est posée par papier.js (voir RESPECTER_REDUIRE) */
.calme [data-ac] { opacity: 1; transform: none; transition: none; }


/* ——— parcours en étapes (demandes de devis et réservations) ——— */
.pc { display: flex; flex-direction: column; gap: 22px; padding: clamp(22px, 3vw, 36px); border: 1px solid var(--line); border-radius: 26px; background: #fff; }
.pc-h h2 { font-size: clamp(26px, 2.6vw, 34px); }
.pc-steps { list-style: none; margin: 16px 0 0; padding: 0; display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: 8px; }
.pc-steps button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 0; border: 0; background: none; font: 600 14px var(--sans); color: var(--ink-3); text-align: left; cursor: default; }
.pc-steps button:not(:disabled) { cursor: pointer; }
.pc-steps button:not(:disabled):hover { color: var(--ink); }
.pc-steps button:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; border-radius: 8px; }
.pc-steps i { display: grid; place-items: center; width: 30px; height: 30px; flex: none; border: 1.5px solid var(--line); border-radius: 50%; background: var(--paper); font-style: normal; font-size: 13px; transition: background 0.3s, border-color 0.3s, color 0.3s; }
.pc-steps [aria-current="step"] { color: var(--ink); }
.pc-steps [aria-current="step"] i { border-color: var(--red); background: var(--red); color: #fff; }
.pc-steps .fait i { border-color: var(--red); color: var(--red); }
.pc-bar { position: relative; height: 3px; margin-top: 14px; border-radius: 3px; background: var(--paper-3); overflow: hidden; }
.pc-bar i { position: absolute; inset: 0; background: var(--red); transform-origin: left; transform: scaleX(var(--p, 0.33)); transition: transform 0.5s var(--ease); }
.pc-e { margin: 0; padding: 0; border: 0; display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.pc-e[hidden] { display: none; }
.pc-e.entre { animation: pc-entre 0.42s var(--ease); }
.pc-e.entre.arriere { animation-name: pc-entre-arr; }
@keyframes pc-entre { from { opacity: 0; transform: translateX(24px); } }
@keyframes pc-entre-arr { from { opacity: 0; transform: translateX(-24px); } }
.pc-q { font-size: 15px; font-weight: 700; color: var(--ink); }
.pc-nav { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 18px; border-top: 1px solid var(--paper-3); }
.pc-nav .btn-o { background: transparent; }
.pc-nav [hidden] { display: none; }
.pc-nav .pc-suiv, .pc-nav .pc-env { margin-left: auto; }

/* champs */
.pc-f { display: grid; gap: 7px; align-content: start; }
.pc-f > span { font-size: 14px; font-weight: 600; color: var(--ink); }
.pc-in { width: 100%; height: 50px; padding: 0 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--paper); font: 500 15.5px var(--sans); color: var(--ink); transition: border-color 0.16s, box-shadow 0.16s, background 0.16s; }
textarea.pc-in { height: auto; min-height: 104px; padding: 12px 14px; line-height: 1.5; resize: vertical; }
.pc-in:hover { border-color: #cfc5b4; }
.pc-in:focus-visible { outline: 0; border-color: var(--red); background: #fff; box-shadow: 0 0 0 3px var(--red-50); }
.pc-in[aria-invalid="true"] { border-color: var(--red); background: #fff; }
.pc-err { font-size: 13px; font-weight: 600; color: var(--red-dk); }
.pc-g2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; }
/* cartes à choix (radio) */
.pc-cartes { display: grid; grid-template-columns: repeat(var(--c, 3), minmax(0, 1fr)); gap: 8px; }
.pc-cartes label { position: relative; display: flex; flex-direction: column; gap: 3px; padding: 13px 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--paper); cursor: pointer; transition: border-color 0.2s, background 0.2s, transform 0.2s var(--ease); }
.pc-cartes label:hover { border-color: #cfc5b4; transform: translateY(-1px); }
.pc-cartes input { position: absolute; opacity: 0; pointer-events: none; }
.pc-cartes svg { color: var(--red); margin-bottom: 4px; }
.pc-cartes b { font-size: 15px; color: var(--ink); }
.pc-cartes small { font-size: 13px; color: var(--ink-3); }
.pc-cartes label:has(input:checked) { border-color: var(--red); background: var(--red-50); }
.pc-cartes label:has(input:focus-visible) { box-shadow: 0 0 0 3px var(--red-50); }
/* choix segmenté */
.pc-seg { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px; border-radius: 14px; background: var(--paper-2); }
.pc-seg label { position: relative; padding: 9px 14px; border-radius: 10px; font-size: 14.5px; font-weight: 600; color: var(--ink-2); cursor: pointer; transition: background 0.2s, color 0.2s; }
.pc-seg input { position: absolute; opacity: 0; pointer-events: none; }
.pc-seg label:has(input:checked) { background: #fff; color: var(--red-dk); box-shadow: 0 1px 2px rgba(29, 28, 27, 0.12); }
.pc-seg label:has(input:focus-visible) { outline: 2px solid var(--red); outline-offset: 1px; }
/* curseur de volume */
.pc-vol { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; align-items: center; }
.pc-vol output { min-width: 112px; font-size: 26px; font-weight: 700; color: var(--ink); text-align: right; font-variant-numeric: tabular-nums; }
.pc-vol output small { font-size: 14px; font-weight: 500; color: var(--ink-3); }
.pc-range { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; border-radius: 3px; background: linear-gradient(var(--red), var(--red)) 0 / var(--v, 10%) 100% no-repeat, var(--paper-3); cursor: pointer; }
.pc-range::-webkit-slider-thumb { -webkit-appearance: none; width: 24px; height: 24px; border: 3px solid #fff; border-radius: 50%; background: var(--red); box-shadow: 0 2px 8px rgba(147, 46, 43, 0.4); }
.pc-range::-moz-range-thumb { width: 18px; height: 18px; border: 3px solid #fff; border-radius: 50%; background: var(--red); box-shadow: 0 2px 8px rgba(147, 46, 43, 0.4); }
.pc-range:focus-visible { outline: 2px solid var(--red); outline-offset: 6px; }
/* dépôt de fichiers */
.pc-drop { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 26px 20px; border: 1.5px dashed #d4cbbb; border-radius: 16px; background: var(--paper); text-align: center; cursor: pointer; transition: border-color 0.2s, background 0.2s; }
.pc-drop:hover, .pc-drop.over, .pc-drop:focus-within { border-color: var(--red); background: var(--red-50); }
.pc-drop i { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: #fff; color: var(--red); }
.pc-drop b { color: var(--ink); }
.pc-drop span { font-size: 14px; color: var(--ink-3); }
.pc-files { list-style: none; margin: -6px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.pc-files:empty { display: none; }
.pc-files li { display: inline-flex; align-items: center; height: 34px; padding: 0 12px; border: 1px solid var(--line); border-radius: 999px; background: #fff; font-size: 13.5px; color: var(--ink-2); animation: pc-entre 0.3s var(--ease); }
.pc-case { display: flex; align-items: center; gap: 10px; font-size: 15px; color: var(--ink-2); cursor: pointer; }
.pc-case input { width: 20px; height: 20px; accent-color: var(--red); }
.pc-ok { align-items: flex-start; gap: 12px; }
.pc-ok h2 { font-size: clamp(26px, 2.6vw, 34px); }
.pc-ok p { color: var(--ink-2); }
.pc-ok .pc-maquette { padding: 10px 14px; border-radius: 12px; background: var(--paper-2); font-size: 14px; }

/* ——— bon de commande : se remplit à chaque choix, puis reçoit le sceau ——— */
.bon { position: sticky; top: 96px; isolation: isolate; overflow: clip; padding: 26px 24px 24px; background: #fffdf8; color: var(--ink); filter: drop-shadow(0 22px 34px rgba(29, 28, 27, 0.22));
  -webkit-mask: radial-gradient(circle 7px at 50% 0, #0000 98%, #000) 0 0 / 22px 51% repeat-x, radial-gradient(circle 7px at 50% 100%, #0000 98%, #000) 0 100% / 22px 51% repeat-x;
          mask: radial-gradient(circle 7px at 50% 0, #0000 98%, #000) 0 0 / 22px 51% repeat-x, radial-gradient(circle 7px at 50% 100%, #0000 98%, #000) 0 100% / 22px 51% repeat-x; }
.bon-h { display: flex; justify-content: space-between; gap: 10px; padding-bottom: 12px; border-bottom: 1.5px dashed var(--line); font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
.bon-h span:first-child { color: var(--red); }
.bon-l { margin: 0; padding: 12px 0; display: grid; gap: 2px; }
.bon-l div { display: flex; justify-content: space-between; gap: 14px; padding: 6px 0; font-size: 14.5px; }
.bon-l dt { color: var(--ink-3); }
.bon-l dd { margin: 0; font-weight: 600; text-align: right; color: var(--ink); transition: color 0.3s; }
.bon-l dd.vide { font-weight: 500; color: #b5ab9b; }
.bon-l dd.flash { animation: bon-flash 0.7s var(--ease); }
@keyframes bon-flash { 0% { color: var(--red); transform: translateY(4px); opacity: 0.4; } 60% { color: var(--red); } }
.bon-t { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding-top: 14px; border-top: 1.5px dashed var(--line); }
.bon-t span { font-size: 13px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); }
.bon-t b { font-size: 34px; font-variant-numeric: tabular-nums; }
.bon-n { margin-top: 10px; font-size: 13px; line-height: 1.5; color: var(--ink-3); }
.bon-s { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--paper-3); font-size: 14px; color: var(--ink-2); }
.bon-s b { display: block; color: var(--ink); }
.bon-s a { font-size: 18px; font-weight: 700; color: var(--red); }
.bon-sceau { position: absolute; right: 18px; bottom: 54px; width: 108px; mix-blend-mode: multiply; opacity: 0; transform: scale(1.7) rotate(-22deg); pointer-events: none; }
.bon.tamponne .bon-sceau { animation: bon-tampon 0.55s cubic-bezier(0.2, 0.9, 0.3, 1.25) forwards; }
@keyframes bon-tampon { 0% { opacity: 0; transform: scale(1.7) rotate(-22deg); } 55% { opacity: 1; transform: scale(0.94) rotate(-9deg); } 100% { opacity: 0.85; transform: scale(1) rotate(-10deg); } }
.calme .bon.tamponne .bon-sceau { animation: none; opacity: 0.85; transform: rotate(-10deg); }
.calme .pc-e.entre, .calme .bon-l dd.flash, .calme .pc-files li { animation: none; }

@media (max-width: 640px) {
  .pc-steps button span { display: none; }
  .pc-steps { grid-template-columns: repeat(var(--n, 3), auto); justify-content: start; gap: 14px; }
  .pc-g2 { grid-template-columns: minmax(0, 1fr); }
  .pc-cartes { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .bon { position: relative; top: auto; }
}