/* Accueil — sections propres à la page. Le style commun (couleurs, sceau, questions, aide, apparitions) est dans papier.css. */
/* ——— hero ——— */
.ac-hero { padding: clamp(28px, 4vw, 56px) 0 clamp(48px, 6vw, 80px); }
.ac-hero-g { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.ac-hero h1 { margin-top: 18px; font-size: clamp(34px, 4.1vw, 54px); line-height: 1.08; }
.ac-hero h1 span { display: block; }
.ac-hero h1 em { font-style: normal; color: var(--red); }
.ac-lede { margin-top: 18px; max-width: 46ch; font-size: clamp(16.5px, 1.3vw, 18.5px); line-height: 1.6; color: var(--ink-2); }

.ac-calc { margin-top: 28px; padding: 22px; border: 1px solid var(--line); border-radius: 20px; background: #fff; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) inset, 0 24px 48px -32px rgba(29, 28, 27, 0.35); }
.ac-calc.pulse { animation: ac-pulse 0.9s 0.3s; }
@keyframes ac-pulse { 40% { box-shadow: 0 0 0 4px rgba(178, 58, 54, 0.28), 0 24px 48px -32px rgba(29, 28, 27, 0.35); } }
.ac-calc-r { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 12px; }
.ac-f { display: grid; gap: 6px; font-size: 13.5px; font-weight: 600; color: var(--ink-2); }
.ac-f select { appearance: none; height: 50px; width: 100%; padding: 0 40px 0 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='m1 1.5 5 5 5-5' stroke='%236c6761' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 15px center; font: 500 15.5px var(--sans); color: var(--ink); cursor: pointer; transition: border-color 0.16s, box-shadow 0.16s; }
.ac-f select:hover { border-color: #cfc5b4; }
.ac-f select:focus-visible { outline: 0; border-color: var(--red); box-shadow: 0 0 0 3px var(--red-50); }
.ac-del { margin: 14px 0 0; padding: 0; border: 0; }
.ac-del legend { padding: 0; font-size: 13.5px; font-weight: 600; color: var(--ink-2); }
.ac-del-g { margin-top: 6px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.ac-del label { position: relative; display: flex; flex-direction: column; gap: 1px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--paper); cursor: pointer; transition: border-color 0.16s, background 0.16s; }
.ac-del label:hover { border-color: #cfc5b4; }
.ac-del input { position: absolute; opacity: 0; pointer-events: none; }
.ac-del b { font-size: 14.5px; color: var(--ink); }
.ac-del small { font-size: 12.5px; color: var(--ink-3); }
.ac-del label:has(input:checked) { border-color: var(--red); background: var(--red-50); }
.ac-del label:has(input:focus-visible) { box-shadow: 0 0 0 3px var(--red-50); }
.ac-go { margin-top: 16px; width: 100%; height: 56px; justify-content: space-between; padding: 0 20px; border-radius: 14px; font-size: 16px; }
.ac-go b { display: inline-flex; align-items: baseline; gap: 6px; font-size: 18px; font-variant-numeric: tabular-nums; }
.ac-go small { font-size: 12px; font-weight: 500; opacity: 0.85; }
.ac-go .ac-px { display: inline-block; }
.ac-go .ac-px.flip { animation: ac-flip 0.32s var(--ease); }
@keyframes ac-flip { from { opacity: 0; transform: translateY(8px); } }
.ac-calc-n { margin-top: 12px; font-size: 13.5px; color: var(--ink-3); }
.ac-calc-n a { color: var(--ink); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: #cfc5b4; }
.ac-calc-n a:hover { color: var(--red); text-decoration-color: currentColor; }
.ac-trust { margin-top: 22px; display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: 14px; color: var(--ink-2); }
.ac-trust span { display: inline-flex; align-items: center; gap: 7px; }
.ac-trust svg { flex: none; color: var(--red); }

.ac-hero-v { position: relative; }
.ac-hero-v .ac-ph { aspect-ratio: 4 / 4.6; max-height: 620px; }
.ac-hero-v .ac-ph img { object-position: 72% center; }
.ac-hero-seal { position: absolute; left: -26px; bottom: 56px; width: 96px; filter: drop-shadow(0 10px 18px rgba(147, 46, 43, 0.25)); transform: rotate(-4deg); }
.ac-hero-tag { position: absolute; right: 18px; top: 18px; display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 14px; background: rgba(255, 255, 255, 0.94); box-shadow: 0 14px 30px -18px rgba(29, 28, 27, 0.45); font-size: 13.5px; color: var(--ink-2); }
.ac-hero-tag b { display: block; font-size: 14.5px; color: var(--ink); }
.ac-hero-tag i { display: grid; place-items: center; width: 34px; height: 34px; flex: none; border-radius: 10px; background: var(--red-50); color: var(--red); }

/* ——— documents les plus demandés ——— */
.ac-docs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.ac-doc { position: relative; display: flex; flex-direction: column; gap: 4px; min-height: 132px; padding: 18px 18px 16px; border: 1px solid var(--line); border-radius: 16px; background: #fff; color: var(--ink); transition: border-color 0.2s, transform 0.25s var(--ease), box-shadow 0.25s; }
.ac-doc:hover { color: var(--ink); border-color: #d9cfbf; transform: translateY(-3px); box-shadow: 0 18px 32px -24px rgba(29, 28, 27, 0.4); }
.ac-doc b { font-size: 16.5px; line-height: 1.3; }
.ac-doc small { font-size: 13px; color: var(--ink-3); }
.ac-doc > span { margin-top: auto; display: flex; align-items: baseline; justify-content: space-between; font-size: 13px; color: var(--ink-3); }
.ac-doc > span strong { font-size: 22px; color: var(--ink); font-variant-numeric: tabular-nums; }
.ac-doc em { font-style: normal; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--paper); color: var(--red); transition: background 0.2s, color 0.2s, transform 0.25s var(--ease); }
.ac-doc:hover em { background: var(--red); color: #fff; transform: translateX(2px); }

/* ——— 信 达 雅 ——— */
.ac-xdy { background: var(--paper-2); border-block: 1px solid var(--line); }
.ac-xdy-g { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: clamp(32px, 6vw, 88px); align-items: center; }
.ac-xdy .ac-ph { aspect-ratio: 1; }
.ac-xdy h2 { margin-top: 12px; font-size: clamp(28px, 3vw, 40px); line-height: 1.15; }
.ac-xdy-l { margin-top: 14px; max-width: 48ch; font-size: 17px; color: var(--ink-2); }
.ac-xdy ol { list-style: none; margin: 28px 0 0; padding: 0; }
.ac-xdy li { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 20px; align-items: center; padding: 18px 0; border-top: 1px solid var(--line); }
.ac-xdy li:last-child { border-bottom: 1px solid var(--line); }
.ac-zi { position: relative; font-family: var(--cjk); font-size: 60px; font-weight: 600; line-height: 1; text-align: center; color: var(--ink); }
.ac-zi::after { content: ""; position: absolute; left: 50%; bottom: -8px; width: 26px; height: 3px; margin-left: -13px; border-radius: 2px; background: var(--red); transform: scaleX(0); transition: transform 0.5s var(--ease) var(--d, 0s); }
.in .ac-zi::after { transform: scaleX(1); }
.ac-xdy li b { display: block; font-size: 18px; color: var(--ink); }
.ac-xdy li p { margin-top: 2px; color: var(--ink-2); }

/* ——— professionnels : grille bento (skill UI UX Pro Max : Bento Box Grid, apparition en vague) ——— */

.ac-bento { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.08fr); grid-template-areas: "ent ent int" "glo fac int"; gap: 16px; }
.ac-b { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 14px; padding: clamp(20px, 2.2vw, 28px); border: 1px solid var(--line); border-radius: 24px; background: #fff; transition: transform 0.35s var(--ease), box-shadow 0.35s, opacity 0.45s var(--ease); }
.ac-b:hover { transform: translateY(-3px); box-shadow: 0 26px 50px -34px rgba(29, 28, 27, 0.45); }
.ac-b h3 { font-size: clamp(19px, 1.6vw, 22px); line-height: 1.25; }
.ac-b > p { margin-top: -6px; font-size: 15px; color: var(--ink-2); }
.ac-k { align-self: flex-start; padding: 6px 12px; border-radius: 999px; background: var(--red-50); font-size: 13px; font-weight: 600; color: var(--red-dk); }
.ac-card-f { margin-top: auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding-top: 4px; }
.ac-pr { font-size: 15px; color: var(--ink-3); white-space: nowrap; }
.ac-pr b { font-size: 24px; color: var(--ink); font-variant-numeric: tabular-nums; }
.ac-b .btn .arr { transition: transform 0.25s; }
.ac-b .btn:hover .arr { transform: translateX(3px); }
.ac-ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; font-size: 15.5px; color: var(--ink-2); }
.ac-ul li { display: flex; align-items: center; gap: 10px; }
.ac-ul i { display: grid; place-items: center; width: 24px; height: 24px; flex: none; border-radius: 50%; background: var(--red-50); color: var(--red); }

/* entreprises */
.ac-b-ent { grid-area: ent; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: clamp(18px, 2.4vw, 32px); align-items: stretch; background: linear-gradient(180deg, #fff, var(--paper)); }
.ac-b-tx { display: flex; flex-direction: column; gap: 16px; }
.ac-b-ent h3 { font-size: clamp(24px, 2.3vw, 31px); line-height: 1.2; }
.ac-dec { color: var(--red); white-space: nowrap; }
.ac-cats { display: flex; flex-wrap: wrap; gap: 6px; }
.ac-cats span { display: inline-flex; align-items: baseline; gap: 6px; padding: 6px 10px; border: 1px solid var(--line); border-radius: 10px; background: #fff; font-size: 13.5px; font-weight: 600; color: var(--ink); }
.ac-cats small { font-size: 12.5px; font-weight: 500; color: var(--ink-3); }

/* interprètes */
.ac-b-int { grid-area: int; border: 0; background: var(--red); color: #fff; }
.ac-b-int .ac-k { background: rgba(255, 255, 255, 0.16); color: #fff; }
.ac-b-int h3 { font-size: clamp(24px, 2.3vw, 31px); }
.ac-modes { align-self: flex-start; display: flex; flex-wrap: wrap; gap: 4px; padding: 4px; border-radius: 14px; background: rgba(0, 0, 0, 0.18); }
.ac-modes button { height: 40px; padding: 0 16px; border: 0; border-radius: 10px; background: transparent; font: 600 14.5px var(--sans); color: #fff; cursor: pointer; transition: background 0.2s, color 0.2s; }
.ac-modes button:hover { background: rgba(255, 255, 255, 0.12); }
.ac-modes button[aria-selected="true"] { background: #fff; color: var(--red-dk); }
.ac-modes button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.ac-conv { flex: 1; display: flex; flex-direction: column; min-height: 300px; border-radius: 18px; background: rgba(0, 0, 0, 0.16); }
.ac-conv-h { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid rgba(255, 255, 255, 0.14); font-size: 12.5px; color: rgba(255, 255, 255, 0.82); }
.ac-conv-h b { display: block; font-size: 14px; color: #fff; }
.ac-av { display: grid; place-items: center; width: 36px; height: 36px; flex: none; overflow: hidden; border-radius: 50%; background: rgba(255, 255, 255, 0.2); }
.ac-av img { width: 100%; height: 100%; object-fit: cover; }
.ac-live { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.ac-live i { width: 7px; height: 7px; border-radius: 50%; background: #fff; animation: ac-live 1.6s ease-in-out infinite; }
@keyframes ac-live { 50% { opacity: 0.3; } }
.ac-conv-b { position: relative; flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 12px; padding: 16px 14px; }
.ac-bu { max-width: 88%; padding: 10px 14px; border-radius: 14px; font-size: 14.5px; line-height: 1.45; opacity: 0; transform: translateY(8px) scale(0.98); transition: opacity 0.35s var(--ease), transform 0.35s var(--ease); }
.ac-bu.vu { opacity: 1; transform: none; }
.ac-bu small { display: block; margin-bottom: 1px; font-size: 11px; font-weight: 600; letter-spacing: 0.02em; opacity: 0.75; }
.ac-bu-fr { align-self: flex-start; border-bottom-left-radius: 4px; background: #fff; color: var(--ink); }
.ac-bu-zh { align-self: flex-end; border-bottom-right-radius: 4px; background: #fff; color: var(--ink); }
.ac-bu-it { align-self: center; max-width: 90%; border: 1px dashed rgba(255, 255, 255, 0.5); background: rgba(0, 0, 0, 0.22); color: #fff; text-align: center; }
.ac-bu [lang="zh"] { font-size: 15.5px; }
.ac-bu-it { position: relative; }
.ac-onde { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 3px; opacity: 0; }
.ac-bu.parle { opacity: 1; transform: none; }
.ac-bu.parle .ac-onde { opacity: 1; }
.ac-bu.parle > :not(.ac-onde) { visibility: hidden; }
.ac-onde i { width: 4px; height: 18px; border-radius: 2px; background: #fff; transform: scaleY(0.3); animation: ac-onde 0.9s ease-in-out infinite; }
.ac-onde i:nth-child(2) { animation-delay: 0.12s; } .ac-onde i:nth-child(3) { animation-delay: 0.24s; } .ac-onde i:nth-child(4) { animation-delay: 0.36s; } .ac-onde i:nth-child(5) { animation-delay: 0.48s; }
@keyframes ac-onde { 50% { transform: scaleY(1); } }
.ac-b-int .ac-mode-d { margin-top: 0; min-height: 3em; font-size: 15.5px; color: rgba(255, 255, 255, 0.92); transition: opacity 0.2s, transform 0.2s; }
.ac-b-int .ac-mode-d.sw { opacity: 0; transform: translateY(6px); }
.ac-b-int .ac-pr { color: rgba(255, 255, 255, 0.85); }
.ac-b-int .ac-pr b { color: #fff; }
.ac-b .btn-w { background: #fff; color: var(--red-dk); }
.ac-b .btn-w:hover { background: #fbedea; color: var(--red-dk); }

/* glossaire : paires de termes qui défilent lentement */
.ac-b-glo { grid-area: glo; background: var(--paper-2); }
.ac-glo { position: relative; height: 150px; margin-top: auto; overflow: hidden; -webkit-mask-image: linear-gradient(transparent, #000 22%, #000 78%, transparent); mask-image: linear-gradient(transparent, #000 22%, #000 78%, transparent); }
.ac-glo ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; animation: ac-glo 26s linear infinite; }
.ac-glo li { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 7px 12px; border-radius: 10px; background: #fff; font-size: 13.5px; color: var(--ink-2); white-space: nowrap; }
.ac-glo li b { flex: none; font-family: "PingFang SC", "Microsoft YaHei", "Noto Sans SC", sans-serif; font-weight: 600; color: var(--red-dk); }
@keyframes ac-glo { to { transform: translateY(-50%); } }

/* facture */
.ac-b-fac { grid-area: fac; }
.ac-fac { margin-top: auto; padding: 14px; border: 1px dashed #d9cfbf; border-radius: 14px; background: var(--paper); font-size: 13px; color: var(--ink-3); }
.ac-fac-h { display: flex; justify-content: space-between; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.ac-fac-h b { color: var(--ink); }
.ac-fac-r { display: grid; gap: 7px; padding: 10px 0; }
.ac-fac-r div { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ac-fac-r i { display: block; height: 6px; border-radius: 3px; background: var(--paper-3); transform-origin: left; transform: scaleX(0); transition: transform 0.6s var(--ease) var(--d, 0s); }
.in .ac-fac-r i { transform: scaleX(1); }
.ac-fac-t { display: flex; align-items: center; justify-content: space-between; padding-top: 8px; border-top: 1px solid var(--line); font-weight: 700; color: var(--ink); }
.ac-fac-t i { width: 64px; height: 8px; border-radius: 4px; background: var(--red); }

/* section hors écran : tout s'arrête */
.ac-pro.horschamp .ac-glo ul, .ac-pro.horschamp .ac-onde i, .ac-pro.horschamp .ac-live i { animation-play-state: paused; }

/* ——— devis depuis le téléphone ——— */
.ac-how { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(32px, 6vw, 88px); align-items: center; }
.ac-how .ac-ph { aspect-ratio: 4 / 5; max-height: 600px; }
.ac-how h2 { margin-top: 12px; font-size: clamp(28px, 3vw, 40px); line-height: 1.15; }
.ac-steps { position: relative; list-style: none; margin: 30px 0 0; padding: 0; display: grid; gap: 26px; }
.ac-steps::before { content: ""; position: absolute; left: 19px; top: 20px; bottom: 20px; width: 2px; background: var(--line); }
.ac-steps::after { content: ""; position: absolute; left: 19px; top: 20px; bottom: 20px; width: 2px; background: var(--red); transform: scaleY(0); transform-origin: top; transition: transform 1.1s var(--ease) 0.15s; }
.in.ac-steps::after { transform: scaleY(1); }
.ac-steps li { position: relative; display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 18px; }
.ac-steps li > i { position: relative; z-index: 1; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 2px solid var(--line); background: var(--paper); font-style: normal; font-weight: 700; color: var(--ink-3); transition: border-color 0.3s, background 0.3s, color 0.3s; transition-delay: var(--d, 0s); }
.in.ac-steps li > i { border-color: var(--red); background: var(--red); color: #fff; }
.ac-steps b { display: block; font-size: 18px; color: var(--ink); }
.ac-steps p { margin-top: 3px; color: var(--ink-2); }
.ac-track { margin-top: 30px; padding-top: 24px; border-top: 1px solid var(--line); }
.ac-track label { font-size: 14px; font-weight: 600; color: var(--ink-2); }
.ac-track div { margin-top: 8px; display: flex; gap: 8px; max-width: 440px; }
.ac-track input { flex: 1; min-width: 0; height: 48px; padding: 0 14px; border: 1px solid var(--line); border-radius: 12px; background: #fff; font: 500 15px var(--sans); color: var(--ink); }
.ac-track input::placeholder { color: var(--ink-3); }
.ac-track input:focus-visible { outline: 0; border-color: var(--red); box-shadow: 0 0 0 3px var(--red-50); }


@media (max-width: 1000px) {
  .ac-hero-g, .ac-xdy-g, .ac-how { grid-template-columns: minmax(0, 1fr); }
  .ac-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: "ent ent" "int int" "glo fac"; }
  .ac-hero-v .ac-ph { aspect-ratio: 4 / 3; }
  .ac-hero-seal { left: auto; right: 18px; bottom: -28px; width: 80px; }
  .ac-docs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ac-xdy .ac-ph, .ac-how .ac-ph { aspect-ratio: 16 / 10; }
}
@media (max-width: 560px) {
  .ac-calc { padding: 16px; }
  .ac-calc-r { grid-template-columns: minmax(0, 1fr); }
  .ac-del-g { gap: 6px; }
  .ac-del label { padding: 9px 10px; }
  .ac-hero-tag { display: none; }
  .ac-docs { gap: 8px; }
  .ac-doc { min-height: 0; padding: 14px 14px 12px; gap: 10px; }
  .ac-doc b { font-size: 15px; }
  .ac-doc small, .ac-doc em { display: none; }
  .ac-doc > span strong { font-size: 19px; }
  .ac-xdy li { grid-template-columns: 60px minmax(0, 1fr); gap: 14px; }
  .ac-zi { font-size: 46px; }
  .ac-bento { grid-template-columns: minmax(0, 1fr); grid-template-areas: "ent" "int" "glo" "fac"; }
  .ac-b-ent { grid-template-columns: minmax(0, 1fr); }
  .ac-feuille { margin: 4px 10px 18px; }
}
/* « moins d'animations » : la classe .calme est posée par papier.js (voir RESPECTER_REDUIRE) */
.calme .ac-steps::after { transition: none; }
.calme .ac-zi::after, .calme .ac-steps li > i, .calme .ac-fac-r i { transition: none; }
.calme .ac-bu { opacity: 1; transform: none; transition: none; }
.calme .ac-glo ul, .calme .ac-live i, .calme .ac-onde i { animation: none; }
.calme