/* ArtisanManager — pages publiques de la plateforme : accueil, tarifs, pages légales, choix de la formule.
   Palette « matériaux » (voir theme.css) ; titres Young Serif, texte Schibsted Grotesk. Écrit téléphone d'abord.
   Le mouvement est posé par /static/js/accueil.js (classes et attributs) : sans script, tout est visible et lisible. */

@font-face { font-family: "Young Serif"; font-style: normal; font-display: swap; font-weight: 100 900;
  src: url("/static/fonts/young-serif-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Schibsted Grotesk"; font-style: normal; font-display: swap; font-weight: 400 900;
  src: url("/static/fonts/schibsted-grotesk-latin-wght-normal.woff2") format("woff2"); }
:root {
  --encre: #17201C; --encre-2: #26312C; --encre-doux: #4A524C; --encre-pale: #636A63;
  --chaux: #F6F2EA; --chaux-2: #EEE7DB; --filet: #E3DACA;
  --terre: #B4462F; --terre-2: #983A26; --terre-vif: #E0724F; --terre-pale: #F7E4DC;
  --laiton: #C9A24D; --sauge: #5E7D69; --sauge-pale: #E3ECE5;
  --titre: "Young Serif", Georgia, "Times New Roman", serif;
  --texte: "Schibsted Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --ease: cubic-bezier(.2, .8, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
body { font-synthesis: none; margin: 0; background: var(--chaux); color: var(--encre); font-family: var(--texte); font-size: 17px; line-height: 1.55; }
img, svg { display: block; max-width: 100%; }
a { color: var(--terre-2); text-underline-offset: 3px; }
h1, h2, h3 { font-family: var(--titre); font-weight: 600; line-height: 1.08; letter-spacing: -.02em; margin: 0; text-wrap: balance; }
p { margin: 0; }
:focus-visible { outline: 2px solid var(--terre); outline-offset: 3px; border-radius: 4px; }
::selection { background: var(--terre-pale); }

.a-in { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 20px; }
.a-etroit { max-width: 760px; }
.a-saut { position: absolute; left: -9999px; top: 8px; background: #fff; padding: 8px 12px; z-index: 50; }
.a-saut:focus { left: 8px; }

/* ─── Marque ─────────────────────────────────────────────── */
.a-marque { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--encre); }
.a-logo { width: 34px; height: 34px; flex: none; }
.a-mot { font-family: var(--titre); font-size: 1.3rem; font-weight: 650; letter-spacing: -.02em; line-height: 1; white-space: nowrap; }
.a-mot em { font-style: normal; font-weight: 400; color: var(--terre); }

/* ─── Tête ───────────────────────────────────────────────── */
.a-tete { position: sticky; top: 0; z-index: 30; background: rgba(246, 242, 234, .86); -webkit-backdrop-filter: saturate(1.4) blur(12px); backdrop-filter: saturate(1.4) blur(12px); border-bottom: 1px solid transparent; transition: border-color .3s var(--ease), box-shadow .3s var(--ease); }
.a-tete.a-defile { border-bottom-color: var(--filet); box-shadow: 0 10px 30px -24px rgba(23, 32, 28, .5); }
.a-tete .a-in { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 68px; }
.a-nav { display: flex; align-items: center; gap: 6px; }
.a-nav-lien { display: none; color: var(--encre); text-decoration: none; font-weight: 550; font-size: .95rem; padding: 8px 12px; border-radius: 10px; transition: background-color .2s var(--ease); }
.a-nav-lien:hover { background: rgba(23, 32, 28, .06); }
.a-nav-lien { white-space: nowrap; }
.a-connexion { display: inline-block; }
.a-tete .a-bouton-petit { display: none; }
@media (min-width: 520px) { .a-tete .a-bouton-petit { display: inline-flex; } }
@media (min-width: 860px) { .a-nav-lien { display: inline-block; } }
@media (max-width: 380px) { .a-mot { font-size: 1.15rem; } .a-logo { width: 30px; height: 30px; } .a-tete .a-in { padding: 0 14px; } }

/* ─── Boutons ────────────────────────────────────────────── */
.a-bouton { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; padding: 0 24px; border-radius: 14px; background: var(--terre); color: #fff; font-family: var(--texte); font-weight: 650; font-size: 1rem; text-decoration: none; border: 0; cursor: pointer; box-shadow: 0 1px 2px rgba(152, 58, 38, .4), 0 12px 24px -14px rgba(152, 58, 38, .8); transition: background-color .2s var(--ease), transform .2s var(--ease), box-shadow .2s var(--ease); }
.a-bouton:hover { background: var(--terre-2); transform: translateY(-1px); box-shadow: 0 2px 4px rgba(152, 58, 38, .4), 0 18px 30px -14px rgba(152, 58, 38, .85); }
.a-bouton:active { transform: translateY(1px); }
.a-bouton-petit { min-height: 42px; padding: 0 16px; border-radius: 11px; font-size: .95rem; }
.a-bouton-clair { background: #fff; color: var(--encre); box-shadow: inset 0 0 0 1.5px var(--encre); }
.a-bouton-clair:hover { background: var(--encre); color: #fff; }
.a-bouton-fleche::after { content: "→"; transition: transform .2s var(--ease); }
.a-bouton-fleche:hover::after { transform: translateX(3px); }
.a-lien-fort { font-weight: 650; color: var(--encre); }

/* ─── Accroche ───────────────────────────────────────────── */
.a-hero { position: relative; overflow: hidden; padding: 44px 0 64px; }
.a-hero::before { content: ""; position: absolute; inset: -40% -20% auto auto; width: 720px; height: 720px; border-radius: 50%; background: radial-gradient(closest-side, rgba(224, 114, 79, .20), rgba(224, 114, 79, 0)); pointer-events: none; }
.a-hero-grille { position: relative; display: grid; gap: 44px; align-items: center; }
.a-sur { display: inline-flex; align-items: center; gap: 8px; font-size: .82rem; font-weight: 650; letter-spacing: .08em; text-transform: uppercase; color: var(--terre-2); margin-bottom: 18px; }
.a-sur::before { content: ""; width: 22px; height: 2px; background: var(--terre); border-radius: 2px; }
.a-hero h1 { font-size: 2.6rem; font-variation-settings: "opsz" 144; }
.a-hero h1 em { font-style: normal; font-weight: 400; color: var(--terre); }
.a-chapo { margin-top: 20px; font-size: 1.125rem; color: var(--encre-doux); max-width: 34em; }
.a-actions { margin-top: 30px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; }
.a-rassure { margin-top: 18px; display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: .9rem; color: var(--encre-pale); }
.a-rassure span { display: inline-flex; align-items: center; gap: 6px; }
.a-rassure span::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--sauge); }
@media (min-width: 720px) { .a-hero h1 { font-size: 3.6rem; } .a-hero { padding: 64px 0 88px; } }
@media (min-width: 1024px) { .a-hero-grille { grid-template-columns: 1.05fr .95fr; gap: 56px; } .a-hero h1 { font-size: 4.2rem; } }

/* L'affaire qui avance toute seule (animée par accueil.js ; sans script : l'état final, lisible) */
.a-affaire { position: relative; background: #fff; border: 1px solid var(--filet); border-radius: 22px; box-shadow: 0 2px 4px rgba(23, 32, 28, .04), 0 40px 80px -40px rgba(23, 32, 28, .45); padding: 22px 22px 18px; max-width: 520px; width: 100%; margin: 0 auto; }
.a-affaire-tete { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; padding-bottom: 16px; border-bottom: 1px dashed var(--filet); }
.a-affaire-tete strong { display: block; font-family: var(--titre); font-size: 1.2rem; font-weight: 600; letter-spacing: -.01em; }
.a-affaire-tete span { font-size: .88rem; color: var(--encre-pale); }
.a-montant { font-family: var(--titre); font-size: 1.25rem; font-weight: 600; white-space: nowrap; }
.a-pas-bloc { position: relative; margin-top: 14px; }
.a-pas-liste { list-style: none; margin: 0; padding: 0; }
.a-pas-bloc::before { content: ""; position: absolute; left: 13px; top: 16px; bottom: 16px; width: 2px; background: var(--chaux-2); border-radius: 2px; }
.a-rail { position: absolute; left: 13px; top: 16px; bottom: 16px; width: 2px; background: var(--terre); border-radius: 2px; transform-origin: 50% 0; transform: scaleY(0); transition: transform .7s var(--ease); }
.a-pas { position: relative; display: grid; grid-template-columns: 28px 1fr auto; gap: 12px; align-items: center; padding: 9px 0; transition: opacity .5s var(--ease), transform .5s var(--ease); }
.a-point { width: 28px; height: 28px; border-radius: 50%; background: #fff; border: 2px solid var(--filet); display: grid; place-items: center; font-size: .8rem; font-weight: 700; color: #fff; transition: background-color .4s var(--ease), border-color .4s var(--ease), transform .4s var(--ease); }
.a-pas strong { display: block; font-size: .98rem; font-weight: 650; }
.a-pas small { display: block; font-size: .84rem; color: var(--encre-pale); }
.a-heure { font-size: .8rem; color: var(--encre-pale); font-variant-numeric: tabular-nums; }
.a-pas.a-on .a-point { background: var(--terre); border-color: var(--terre); }
.a-pas.a-on .a-point::after { content: "✓"; }
.a-pas.a-pas-fin .a-point { background: var(--sauge); border-color: var(--sauge); }
.a-js .a-pas { opacity: .38; }
.a-js .a-pas.a-on { opacity: 1; }
.a-js .a-pas.a-courant .a-point { transform: scale(1.12); box-shadow: 0 0 0 6px rgba(180, 70, 47, .14); }
.a-tampon { position: absolute; right: 122px; top: 50%; margin-top: -21px; padding: 6px 12px; border: 2.5px solid var(--sauge); color: var(--sauge); border-radius: 8px; font-family: var(--titre); font-style: normal; font-weight: 600; font-size: 1.05rem; transform: rotate(-9deg); background: rgba(255, 255, 255, .85); transition: opacity .35s var(--ease), transform .45s var(--ease); pointer-events: none; }
.a-js .a-tampon { opacity: 0; transform: rotate(-9deg) scale(1.6); }
.a-js .a-tampon.a-pose { opacity: 1; transform: rotate(-9deg) scale(1); }
.a-bulle { position: absolute; left: -8px; bottom: -22px; display: flex; gap: 10px; align-items: center; background: var(--encre); color: #fff; border-radius: 14px; padding: 11px 14px; font-size: .88rem; box-shadow: 0 18px 40px -18px rgba(23, 32, 28, .7); transition: opacity .4s var(--ease), transform .4s var(--ease); }
.a-bulle b { color: var(--laiton); font-weight: 650; }
.a-js .a-bulle { opacity: 0; transform: translateY(12px); }
.a-js .a-bulle.a-montre { opacity: 1; transform: none; }
@media (min-width: 720px) { .a-bulle { left: -28px; } }
@media (max-width: 459px) { .a-heure { display: none; } .a-pas { grid-template-columns: 28px 1fr; } .a-tampon { right: 4px; } }

/* ─── Blocs ──────────────────────────────────────────────── */
.a-bloc { padding: 72px 0; }
.a-bloc h2 { font-size: 2.1rem; }
.a-intro { margin-top: 14px; font-size: 1.1rem; color: var(--encre-doux); max-width: 40em; }
@media (min-width: 720px) { .a-bloc { padding: 104px 0; } .a-bloc h2 { font-size: 2.9rem; } }

.a-plus-jamais { background: #fff; border-top: 1px solid var(--filet); border-bottom: 1px solid var(--filet); padding: 40px 0; }
.a-plus-jamais .a-in { display: grid; gap: 22px; }
.a-plus-jamais h2 { font-size: 1.6rem; }
.a-liste-barree { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px 28px; }
.a-liste-barree li { position: relative; padding-left: 30px; color: var(--encre-doux); }
.a-liste-barree li::before { content: "×"; position: absolute; left: 0; top: -2px; width: 20px; height: 20px; font-weight: 700; color: var(--terre); font-size: 1.2rem; }
@media (min-width: 860px) { .a-plus-jamais .a-in { grid-template-columns: .8fr 1.2fr; align-items: center; } .a-liste-barree { grid-template-columns: 1fr 1fr; } }

.a-grille { margin-top: 44px; display: grid; gap: 16px; }
@media (min-width: 720px) { .a-grille { grid-template-columns: 1fr 1fr; gap: 20px; } }
@media (min-width: 1024px) { .a-grille { grid-template-columns: 1fr 1fr 1fr; } }
.a-carte { background: #fff; border: 1px solid var(--filet); border-radius: 20px; padding: 26px; transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease); }
.a-carte:hover { transform: translateY(-4px); border-color: #D6CAB5; box-shadow: 0 30px 60px -36px rgba(23, 32, 28, .45); }
.a-carte h3 { margin-top: 18px; font-size: 1.3rem; }
.a-carte p { margin-top: 10px; color: var(--encre-doux); font-size: .98rem; }
.a-picto { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; background: var(--terre-pale); color: var(--terre-2); }
.a-picto svg { width: 24px; height: 24px; }

.a-bloc-sombre { background: var(--encre); color: #F6F2EA; }
.a-bloc-sombre h2 { color: #fff; }
.a-bloc-sombre .a-intro { color: rgba(246, 242, 234, .75); }
.a-etapes-bloc { position: relative; margin-top: 48px; }
.a-etapes { list-style: none; margin: 0; padding: 0; display: grid; gap: 28px; }
.a-etapes li { position: relative; padding-left: 64px; }
.a-etape-num { position: absolute; left: 0; top: 0; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; font-family: var(--titre); font-weight: 600; font-size: 1.2rem; color: var(--encre); background: var(--laiton); }
.a-etapes h3 { font-size: 1.3rem; color: #fff; }
.a-etapes p { margin-top: 6px; color: rgba(246, 242, 234, .74); }
.a-fil { display: none; }
@media (min-width: 1024px) {
  .a-etapes { grid-template-columns: repeat(4, 1fr); gap: 28px; }
  .a-etapes li { padding: 64px 0 0; }
  .a-fil { display: block; position: absolute; left: 22px; right: 22px; top: 21px; height: 2px; background: rgba(246, 242, 234, .16); border-radius: 2px; overflow: hidden; }
  .a-fil span { display: block; height: 100%; width: 100%; background: var(--laiton); transform-origin: 0 50%; transform: scaleX(1); }
  .a-js .a-fil span { transform: scaleX(0); }
}

/* ─── Tarifs ─────────────────────────────────────────────── */
.a-bascule { margin-top: 30px; display: inline-flex; padding: 5px; background: #fff; border: 1px solid var(--filet); border-radius: 999px; gap: 4px; }
.a-bascule button { font: inherit; font-weight: 600; font-size: .95rem; border: 0; background: none; padding: 9px 18px; border-radius: 999px; cursor: pointer; color: var(--encre-doux); transition: background-color .25s var(--ease), color .25s var(--ease); }
.a-bascule button[aria-pressed="true"] { background: var(--encre); color: #fff; }
.a-bascule .a-gain { color: var(--sauge); font-weight: 650; }
.a-bascule button[aria-pressed="true"] .a-gain { color: var(--laiton); }
.a-formules { margin-top: 26px; display: grid; gap: 20px; }
@media (min-width: 860px) { .a-formules { grid-template-columns: 1fr 1fr; max-width: 920px; } }
.a-formule { position: relative; background: #fff; border: 1px solid var(--filet); border-radius: 24px; padding: 30px 28px; display: flex; flex-direction: column; }
.a-formule-pro { background: var(--encre); color: #F6F2EA; border-color: var(--encre); box-shadow: 0 40px 80px -40px rgba(23, 32, 28, .7); }
.a-formule h3 { font-size: 1.6rem; }
.a-formule-pro h3 { color: #fff; }
.a-etiquette { position: absolute; top: 22px; right: 22px; font-size: .78rem; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; color: var(--encre); background: var(--laiton); padding: 4px 10px; border-radius: 999px; }
.a-formule-accroche { margin-top: 8px; color: var(--encre-doux); min-height: 3.1em; }
.a-formule-pro .a-formule-accroche { color: rgba(246, 242, 234, .74); }
.a-prix { margin-top: 20px; display: flex; align-items: baseline; gap: 8px; }
.a-prix-montant { font-family: var(--titre); font-size: 3rem; font-weight: 600; letter-spacing: -.03em; line-height: 1; transition: opacity .2s var(--ease); }
.a-prix-unite { color: var(--encre-pale); }
.a-formule-pro .a-prix-unite { color: rgba(246, 242, 234, .7); }
.a-prix-note { margin-top: 8px; font-size: .92rem; color: var(--encre-pale); min-height: 1.5em; }
.a-formule-pro .a-prix-note { color: rgba(246, 242, 234, .7); }
.a-formule ul { list-style: none; margin: 22px 0 26px; padding: 0; display: grid; gap: 10px; flex: 1; align-content: start; }
.a-formule li { position: relative; padding-left: 28px; }
.a-formule li::before { content: ""; position: absolute; left: 2px; top: 5px; width: 14px; height: 8px; border-left: 2.5px solid var(--sauge); border-bottom: 2.5px solid var(--sauge); transform: rotate(-45deg); }
.a-formule-pro li::before { border-color: var(--laiton); }
.a-formule .a-bouton { width: 100%; }
.a-formule-pro .a-bouton { background: var(--terre-vif); color: var(--encre); box-shadow: none; }
.a-formule-pro .a-bouton:hover { background: #F08A68; }
.a-stripe { margin-top: 22px; display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: .92rem; color: var(--encre-pale); }
.a-stripe span { display: inline-flex; align-items: center; gap: 7px; }
.a-cadenas { width: 15px; height: 15px; }

/* ─── Questions ──────────────────────────────────────────── */
.a-bloc-clair { background: #fff; border-top: 1px solid var(--filet); }
.a-question { border-bottom: 1px solid var(--filet); }
.a-question:first-of-type { margin-top: 32px; border-top: 1px solid var(--filet); }
.a-question summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 20px 0; font-weight: 650; font-size: 1.08rem; }
.a-question summary::-webkit-details-marker { display: none; }
.a-question summary::after { content: "+"; font-family: var(--titre); font-size: 1.6rem; font-weight: 400; line-height: 1; color: var(--terre); transition: transform .3s var(--ease); }
.a-question[open] summary::after { transform: rotate(45deg); }
.a-question p { padding: 0 0 22px; color: var(--encre-doux); max-width: 44em; }

/* ─── Fin ────────────────────────────────────────────────── */
.a-fin { padding: 80px 0; background: var(--terre); color: #fff; text-align: center; position: relative; overflow: hidden; }
.a-fin::before { content: ""; position: absolute; left: 50%; top: -60%; width: 900px; height: 900px; margin-left: -450px; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 255, 255, .14), rgba(255, 255, 255, 0)); }
.a-fin .a-in { position: relative; }
.a-fin h2 { font-size: 2rem; color: #fff; max-width: 16em; margin: 0 auto; }
.a-fin p { margin-top: 26px; }
.a-fin .a-bouton { background: var(--encre); box-shadow: 0 18px 30px -16px rgba(0, 0, 0, .6); }
.a-fin .a-bouton:hover { background: #000; }
@media (min-width: 720px) { .a-fin h2 { font-size: 3rem; } .a-fin { padding: 110px 0; } }

/* ─── Pied ───────────────────────────────────────────────── */
.a-pied { background: var(--encre); color: rgba(246, 242, 234, .72); padding: 48px 0 40px; font-size: .95rem; }
.a-pied .a-in { display: grid; gap: 14px; }
.a-pied a { color: #F6F2EA; }
.a-pied .a-mot { color: #fff; }
.a-pied .a-mot em { color: var(--laiton); }
.a-copy { font-size: .85rem; color: rgba(246, 242, 234, .5); }

/* ─── Pages légales et choix de la formule ───────────────── */
.a-legal { padding-top: 48px; padding-bottom: 80px; }
.a-legal h1 { font-size: 2.3rem; margin-bottom: 18px; }
.a-legal h2 { font-size: 1.35rem; margin: 34px 0 10px; }
.a-legal p, .a-legal li { color: var(--encre-doux); }
.a-legal p + p { margin-top: 10px; }
.a-legal dl { display: grid; grid-template-columns: minmax(120px, 30%) 1fr; gap: 8px 16px; margin: 0; }
.a-legal dt { font-weight: 650; }
.a-legal dd { margin: 0; color: var(--encre-doux); }
.a-manque { color: var(--terre-2); }

.a-mur { padding: 40px 0 80px; }
.a-mur h1 { font-size: 2.2rem; }
.a-mur .a-intro { margin-top: 10px; }
.a-mur-etape { font-size: .85rem; font-weight: 650; letter-spacing: .08em; text-transform: uppercase; color: var(--terre-2); margin-bottom: 12px; }
.a-flash { margin-top: 18px; padding: 12px 16px; border-radius: 12px; background: #fff; border: 1px solid var(--filet); }
.a-flash-error { border-color: #E4B3A6; background: #FBEDE8; }
.a-flash-ok { border-color: #BFD3C4; background: var(--sauge-pale); }
.a-formule form { margin: 0; }
.a-formule-choisie { outline: 3px solid var(--terre-vif); outline-offset: 3px; }
.a-mur-pied { margin-top: 26px; display: flex; flex-wrap: wrap; gap: 10px 22px; align-items: center; color: var(--encre-pale); font-size: .95rem; }
.a-mur-pied form { margin: 0; display: inline; }
.a-mur-pied button { font: inherit; color: var(--terre-2); background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }

/* ─── Apparitions au défilement (posées par accueil.js) ──── */
.a-js [data-apparait] { opacity: 0; transform: translateY(22px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.a-js [data-apparait].a-vu { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
  .a-js [data-apparait] { opacity: 1; transform: none; }
}