/* Artisname · la page d'accueil (refonte du 1er novembre 2026).
   Sobre et clair, comme l'app : fond papier, encre, rouge seulement pour l'action. Les écrans sont de VRAIES captures
   de l'app (simulateur Xcode, iPhone 17) et des pages clients du site, posées dans un cadre d'iPhone dessiné en CSS
   (bord, îlot dynamique) : nets, légers, et fidèles à ce que l'on obtient. Aucune police chargée en plus du logo. */

:root {
  --bg: #F4F3F1; --paper: #FFFFFF; --ink: #151413; --ink2: #57534E; --ink3: #8E8981;
  --line: rgba(21, 20, 19, .10); --red: #A3262E; --green: #23824F;
  --w: 1120px; --g: 16px;
}
/* Toujours clair, comme l'app et ses écrans (le thème sombre et rouge a été écarté par le fondateur). */
:root { color-scheme: light; }

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--bl-text); font-size: 17px; line-height: 1.55; }
img { max-width: 100%; display: block; }
a { color: inherit; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--ink); color: var(--bg); padding: 8px 12px; border-radius: 8px; z-index: 50; }
.skip:focus { left: 8px; }
.wrap { max-width: var(--w); margin: 0 auto; padding: 0 var(--g); }
@media (min-width: 700px) { :root { --g: 32px; } }

/* ---- En-tête ---- */
.top { position: sticky; top: 0; z-index: 20; background: color-mix(in srgb, var(--bg) 86%, transparent);
       -webkit-backdrop-filter: saturate(1.6) blur(16px); backdrop-filter: saturate(1.6) blur(16px); border-bottom: 1px solid transparent; transition: border-color .2s; }
.top.ombre { border-bottom-color: var(--line); }
.top .wrap { display: flex; align-items: center; gap: 20px; height: 60px; padding-top: env(safe-area-inset-top); }
.brand { display: flex; align-items: center; gap: 9px; text-decoration: none; }
.brand img { width: 24px; height: 24px; }
.brand span { font-family: var(--bl-display); font-size: 24px; letter-spacing: .5px; text-transform: uppercase; line-height: 1; padding-top: 2px; }
.brand .dk { display: none; }
.top nav { margin-left: auto; display: flex; align-items: center; gap: 22px; font-size: 15px; }
.top nav a { text-decoration: none; color: var(--ink2); }
.top nav a:hover { color: var(--ink); }
.top nav .btn { color: var(--bg); }
@media (max-width: 760px) { .top nav a:not(.btn) { display: none; } }

/* ---- Boutons ---- */
.btn { display: inline-flex; white-space: nowrap; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 22px; border-radius: 999px;
       background: var(--ink); color: var(--bg); font-weight: 600; font-size: 16px; text-decoration: none; transition: transform .15s ease, opacity .2s; }
.btn:hover { opacity: .9; }
.btn:active { transform: scale(.98); }
.btn.red { background: var(--red); color: #fff; }
.btn.line { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--line); }
.btn.petit { min-height: 38px; padding: 0 16px; font-size: 14px; }
.ctas { display: flex; flex-wrap: wrap; gap: 12px; }

/* ---- Typo ---- */
h1, h2, h3 { margin: 0; font-weight: 700; letter-spacing: -.025em; line-height: 1.06; }
h1 { font-size: clamp(40px, 6.4vw, 72px); }
h2 { font-size: clamp(32px, 4.4vw, 52px); }
h3 { font-size: 21px; letter-spacing: -.01em; line-height: 1.25; }
.gris { color: var(--ink3); }
.lead { font-size: clamp(18px, 1.6vw, 21px); color: var(--ink2); max-width: 34em; margin: 20px 0 0; }
.sur { font-size: 14px; font-weight: 600; color: var(--red); margin: 0 0 14px; }

/* ---- Le cadre d'iPhone (une capture réelle à l'intérieur) ---- */
.phone { position: relative; width: 300px; aspect-ratio: 1206 / 2622; border-radius: 52px; padding: 11px; flex: none;
         background: linear-gradient(145deg, #3A3936, #121110 45%, #2B2A28);
         box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .14), 0 0 0 1px rgba(0, 0, 0, .35), 0 40px 80px -30px rgba(21, 20, 19, .45), 0 18px 36px -18px rgba(21, 20, 19, .3); }
.phone img { width: 100%; height: 100%; object-fit: cover; object-position: top; border-radius: 42px; background: #F4F3F1; }
.phone::after { content: ""; position: absolute; top: 22px; left: 50%; width: 31%; height: 3.6%; transform: translateX(-50%); background: #000; border-radius: 999px; }
.phone.s { width: 250px; border-radius: 44px; padding: 9px; }
.phone.s img { border-radius: 36px; }
.phone.s::after { top: 18px; }
@media (max-width: 520px) { .phone { width: 250px; border-radius: 44px; padding: 9px; } .phone img { border-radius: 36px; } .phone::after { top: 18px; } .phone.s { width: 210px; border-radius: 38px; padding: 8px; } .phone.s img { border-radius: 31px; } }

/* ---- Ouverture ---- */
.hero { padding: 56px 0 24px; overflow: hidden; }
.hero .wrap { display: grid; gap: 48px; align-items: center; }
@media (min-width: 960px) { .hero { padding: 88px 0 56px; } .hero .wrap { grid-template-columns: 1.05fr .95fr; } }
.hero h1 em { font-style: normal; color: var(--ink3); }
.hero .ctas { margin-top: 32px; }
.rassure { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 22px 0 0; padding: 0; list-style: none; font-size: 14px; color: var(--ink3); }
.duo { position: relative; display: flex; justify-content: center; min-height: 560px; }
.duo .phone:first-child { z-index: 2; }
.duo .phone + .phone { position: absolute; left: 58%; top: 70px; transform: rotate(4deg); z-index: 1; opacity: .98; }
@media (max-width: 959px) { .duo { min-height: 0; } .duo .phone + .phone { display: none; } }

/* ---- Bande de confiance ---- */
.bande { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin-top: 32px; }
.bande ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 32px; list-style: none; margin: 0; padding: 22px 0; font-size: 15px; color: var(--ink2); }

/* ---- Sections ---- */
section { padding: 88px 0; }
@media (max-width: 700px) { section { padding: 64px 0; } }
.tete { max-width: 720px; margin-bottom: 48px; }
.tete p { color: var(--ink2); font-size: 19px; margin: 16px 0 0; }
.centre { text-align: center; margin-left: auto; margin-right: auto; }

/* Les étapes : texte et capture, en alternance. */
.etape { display: grid; gap: 40px; align-items: center; padding: 40px 0; }
.etape + .etape { border-top: 1px solid var(--line); }
@media (min-width: 900px) { .etape { grid-template-columns: 1fr 1fr; gap: 80px; padding: 56px 0; } .etape.inv .txt { order: 2; } }
.etape .ecr { display: flex; justify-content: center; }
.etape .num { display: inline-flex; width: 30px; height: 30px; border-radius: 50%; align-items: center; justify-content: center; font-size: 14px; font-weight: 700;
              background: var(--ink); color: var(--bg); margin-bottom: 18px; }
.etape h3 { font-size: clamp(26px, 2.8vw, 34px); letter-spacing: -.02em; line-height: 1.12; }
.etape p { color: var(--ink2); margin: 14px 0 0; max-width: 30em; }
.etape ul { margin: 20px 0 0; padding: 0; list-style: none; }
.etape li { padding: 9px 0 9px 28px; position: relative; border-top: 1px solid var(--line); font-size: 16px; }
.etape li::before { content: ""; position: absolute; left: 2px; top: 16px; width: 12px; height: 7px; border-left: 2px solid var(--green); border-bottom: 2px solid var(--green); transform: rotate(-45deg); }

/* Côté client : trois écrans de pages web, côte à côte (défilement sur téléphone). */
.clients { background: var(--paper); }
.rang { display: flex; gap: 28px; justify-content: center; }
.rang figure { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 18px; text-align: center; max-width: 270px; }
.rang figcaption b { display: block; font-size: 17px; }
.rang figcaption span { color: var(--ink2); font-size: 15px; }
@media (max-width: 900px) { .rang { justify-content: flex-start; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 calc(-1 * var(--g)); padding: 8px var(--g) 24px; }
                            .rang figure { scroll-snap-align: center; flex: none; } }

/* Le calcul, en clair. */
.calc { display: grid; gap: 40px; }
@media (min-width: 900px) { .calc { grid-template-columns: .8fr 1.2fr; gap: 72px; align-items: start; } }
.gros { font-size: clamp(88px, 12vw, 148px); font-weight: 700; letter-spacing: -.05em; line-height: .9; }
.gros small { display: block; font-size: 20px; letter-spacing: 0; font-weight: 600; margin-top: 12px; }
table { width: 100%; border-collapse: collapse; font-size: 16px; }
th, td { text-align: left; padding: 13px 0; border-bottom: 1px solid var(--line); }
th { font-size: 13px; color: var(--ink3); font-weight: 600; }
td + td, th + th { text-align: right; white-space: nowrap; padding-left: 16px; }
td.gain { color: var(--green); font-weight: 600; }
tfoot td { font-weight: 700; border-bottom: 0; }
.note { font-size: 14px; color: var(--ink3); margin-top: 16px; }

/* Les métiers. */
.metiers { display: grid; gap: 1px; background: var(--line); border-radius: 20px; overflow: hidden; border: 1px solid var(--line); }
@media (min-width: 700px) { .metiers { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .metiers { grid-template-columns: repeat(4, 1fr); } }
.metiers div { background: var(--paper); padding: 28px 24px; }
.metiers h3 { font-size: 18px; margin-bottom: 12px; }
.metiers ul { margin: 0; padding: 0; list-style: none; color: var(--ink2); font-size: 15px; }
.metiers li { padding: 4px 0; }

/* La parole du fondateur. */
.mot { background: var(--ink); color: var(--bg); }
.mot blockquote { margin: 0 auto; max-width: 820px; font-size: clamp(24px, 2.8vw, 34px); line-height: 1.3; letter-spacing: -.015em; font-weight: 600; }
.mot cite { display: block; margin-top: 24px; font-style: normal; font-size: 16px; font-weight: 500; opacity: .7; letter-spacing: 0; }

/* Les offres : les mêmes cartes sur l'accueil et sur offres.html (classes vérifiées par DesignTests). */
.plans { display: grid; gap: 16px; align-items: stretch; }
@media (min-width: 900px) { .plans { grid-template-columns: repeat(3, 1fr); } }
.plan { background: var(--paper); border-radius: 22px; border: 1px solid var(--line); display: flex; flex-direction: column; }
.plan.star { border: 2px solid var(--ink); }
.plan.vedette { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.gcard { padding: 26px 24px 0; position: relative; }
.badge { position: absolute; top: 28px; right: 22px; font-size: 12px; font-weight: 700; padding: 5px 10px; border-radius: 999px; background: rgba(163, 38, 46, .1); color: var(--red); }
.vedette .badge { background: rgba(255, 255, 255, .14); color: #fff; }
.gname { font-size: 28px; font-weight: 700; letter-spacing: -.02em; }
.gh { font-size: 15px; color: var(--ink2); margin-top: 4px; }
.vedette .gh, .vedette .price-alt, .vedette .price small { color: rgba(244, 243, 241, .72); }
.plan.vedette .body > ul { color: rgba(244, 243, 241, .88); }
.plan .body { padding: 18px 24px 26px; display: flex; flex-direction: column; flex: 1; }
.price { font-size: 36px; font-weight: 700; letter-spacing: -.03em; line-height: 1.1; }
.price small { font-size: 16px; font-weight: 500; color: var(--ink3); letter-spacing: 0; }
.price-alt { font-size: 14px; color: var(--ink3); margin-top: 4px; }
.price-alt b { color: var(--green); font-weight: 600; }
.vedette .price-alt b { color: #8FD3AC; }
.plan .body > ul { margin: 20px 0 24px; padding: 0; list-style: none; font-size: 15px; color: var(--ink2); flex: 1; }
.plan .body > ul li { padding: 6px 0 6px 24px; position: relative; }
.plan .body > ul li::before { content: ""; position: absolute; left: 2px; top: 12px; width: 10px; height: 6px; border-left: 2px solid var(--green); border-bottom: 2px solid var(--green); transform: rotate(-45deg); }
.vedette .body > ul li::before { border-color: #8FD3AC; }
.plan .body > ul li.and { font-weight: 600; color: var(--ink); }
.vedette .body > ul li.and { color: #fff; }
.plan .btn { align-self: stretch; }
.vedette .btn.line { color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .3); }
.plan.free { margin-top: 16px; padding: 24px; }
.fhead { display: flex; align-items: baseline; gap: 12px; }
.fhead b { font-size: 22px; }
.fhead span { color: var(--ink3); font-size: 15px; }
.fhead em { margin-left: auto; font-style: normal; font-size: 22px; font-weight: 700; }
.plan.free p { margin: 8px 0 0; color: var(--ink2); font-size: 15px; }
.plan.free > ul, .plan.free .body > ul { columns: 2 240px; column-gap: 32px; }
.plan.free .body { padding: 0; }

/* offres.html : l'ouverture centrée, Annuel / Mensuel, « tout ce que comprend », le tableau, le cadeau. */
.hero.tarifs { text-align: center; padding-bottom: 8px; }
.hero.tarifs .wrap { display: block; }
.hero.tarifs .lead { margin-left: auto; margin-right: auto; }
section.serre { padding-top: 32px; }
.period { display: inline-flex; gap: 4px; padding: 4px; margin-top: 28px; border-radius: 999px; background: rgba(21, 20, 19, .06); }
.period[hidden] { display: none; }
.period button { font: inherit; font-size: 15px; font-weight: 600; border: 0; background: transparent; color: var(--ink2); padding: 10px 18px; border-radius: 999px; cursor: pointer; }
.period button[aria-pressed="true"] { background: var(--paper); color: var(--ink); box-shadow: 0 1px 3px rgba(0, 0, 0, .12); }
.period em { font-style: normal; font-size: 12px; color: var(--green); margin-left: 4px; }
.plans.per-js .p-m { display: none; }
.plans.per-js.mens .p-m { display: block; }
.plans.per-js.mens .p-y { display: none; }
.plans:not(.per-js) .p-m { margin-top: 10px; }
details.all { border-top: 1px solid var(--line); margin-top: 18px; }
.vedette details.all { border-top-color: rgba(255, 255, 255, .16); }
details.all summary { cursor: pointer; padding: 14px 0 0; font-size: 15px; font-weight: 600; list-style: none; }
details.all summary::-webkit-details-marker { display: none; }
details.all summary::after { content: " +"; color: var(--ink3); }
details.all[open] summary::after { content: " −"; }
details.all ul { list-style: none; margin: 12px 0 0; padding: 0; font-size: 14px; }
details.all li { padding: 8px 0; border-top: 1px solid var(--line); font-weight: 600; }
.vedette details.all li { border-top-color: rgba(255, 255, 255, .1); }
details.all li span { display: block; font-weight: 400; color: var(--ink2); margin-top: 2px; }
.vedette details.all li span { color: rgba(244, 243, 241, .65); }
section .note { max-width: 820px; margin: 24px auto 0; text-align: center; }
.cmp-wrap { overflow-x: auto; margin: 0 calc(-1 * var(--g)); padding: 0 var(--g); }
.cmp { min-width: 560px; }
.cmp th[scope="col"] { text-align: center; font-size: 15px; color: var(--ink); }
.cmp th[scope="row"] { font-weight: 500; font-size: 15px; color: var(--ink); }
.cmp td { text-align: center; padding-left: 8px; }
.cmp .grp th { padding-top: 28px; font-size: 13px; color: var(--ink3); font-weight: 600; }
.cmp i.y { display: inline-block; width: 12px; height: 7px; border-left: 2px solid var(--green); border-bottom: 2px solid var(--green); transform: rotate(-45deg) translateY(-2px); }
.cmp td.n { color: var(--ink3); }
.ticks { list-style: none; margin: 0; padding: 0; max-width: 720px; }
.ticks li { padding: 14px 0; border-top: 1px solid var(--line); color: var(--ink2); }
.ticks b { color: var(--ink); }

/* Le calculateur. */
.curseur { display: block; margin: 28px 0 10px; font-size: 16px; color: var(--ink2); }
.curseur b { color: var(--ink); font-size: 20px; }
#nbDates { -webkit-appearance: none; appearance: none; width: 100%; max-width: 420px; height: 6px; border-radius: 999px; margin: 6px 0 22px;
           background: linear-gradient(to right, var(--red) var(--p, 23%), var(--line) var(--p, 23%)); }
#nbDates::-webkit-slider-thumb { -webkit-appearance: none; width: 28px; height: 28px; border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, .25), 0 0 0 1px rgba(0, 0, 0, .06); cursor: grab; }
#nbDates::-moz-range-thumb { width: 28px; height: 28px; border-radius: 50%; background: #fff; border: 0; box-shadow: 0 1px 4px rgba(0, 0, 0, .25); }
.gros { font-variant-numeric: tabular-nums; margin: 0; }

/* Les questions. */
.faq { max-width: 780px; margin: 0 auto; }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { cursor: pointer; list-style: none; padding: 22px 36px 22px 0; font-size: 18px; font-weight: 600; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 4px; top: 18px; font-size: 26px; font-weight: 300; color: var(--ink3); transition: transform .2s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq p { margin: 0 0 22px; color: var(--ink2); }

/* La fin. */
.fin { text-align: center; }
.fin .ctas { justify-content: center; margin-top: 32px; }
.fin p { color: var(--ink2); font-size: 19px; margin: 16px auto 0; max-width: 32em; }

/* ---- Pied de page ---- */
.foot { border-top: 1px solid var(--line); padding: 48px 0 calc(40px + env(safe-area-inset-bottom)); font-size: 15px; }
.foot .wrap { display: grid; gap: 32px; }
@media (min-width: 800px) { .foot .wrap { grid-template-columns: 2fr 1fr 1fr 1fr; } }
.foot p { color: var(--ink2); margin: 12px 0 0; max-width: 26em; }
.foot h4 { margin: 0 0 10px; font-size: 13px; color: var(--ink3); font-weight: 600; }
.foot ul { list-style: none; margin: 0; padding: 0; }
.foot li { padding: 4px 0; }
.foot li a { text-decoration: none; color: var(--ink2); }
.foot li a:hover { color: var(--ink); }
.foot .bas { grid-column: 1 / -1; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; color: var(--ink3); font-size: 13px; padding-top: 24px; border-top: 1px solid var(--line); }

/* ---- Apparitions au défilement (accueil.js pose .bl-motion) ---- */
.bl-motion [data-rv] { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .7s cubic-bezier(.2, .7, .2, 1); }
.bl-motion [data-rv].in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .bl-motion [data-rv] { opacity: 1; transform: none; transition: none; } html { scroll-behavior: auto; } }
.calc .note { text-align: left; margin: 16px 0 0; }

/* « Être prévenu de la sortie » (assets/attente.js). */
.prevenir { display: grid; gap: 10px; max-width: 560px; margin: 32px auto 0; text-align: left; }
@media (min-width: 640px) { .prevenir { grid-template-columns: 1fr 1fr auto; } .prevenir .msg, .prevenir .mentions { grid-column: 1 / -1; } }
.prevenir input, .prevenir select { font: inherit; font-size: 16px; min-height: 48px; padding: 0 16px; border-radius: 14px; border: 1.5px solid var(--line);
                                    background: var(--paper); color: var(--ink); width: 100%; }
.prevenir input:focus, .prevenir select:focus { outline: none; border-color: var(--ink); }
.prevenir .piege { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.prevenir.fait input, .prevenir.fait select, .prevenir.fait button { display: none; }
.fin .msg, .msg { margin: 4px 0 0; font-size: 15px; font-weight: 600; }
.msg.ok { color: var(--green); }
.msg.ko { color: var(--red); }
.mentions { margin: 4px 0 0; font-size: 13px !important; color: var(--ink3) !important; }
.fin .prevenir + .ctas { margin-top: 28px; }
.retrait { max-width: 560px; margin: 0 auto 48px; padding: 20px; border-radius: 18px; background: var(--paper); border: 1px solid var(--line); }
.retrait p { margin: 0 0 12px !important; }
.donnees { max-width: 560px; margin: 18px auto 0; text-align: left; font-size: 14px; color: var(--ink2); }
.donnees summary { cursor: pointer; font-weight: 600; color: var(--ink2); }
.donnees p { font-size: 14px !important; margin: 10px 0 0 !important; max-width: none !important; }