/* RAFBET — site vitrine « disponible bientôt », dérivé de l'identité de la
   vitrine VOILÀ 13 (site/css/style.css) : mêmes polices et mêmes volumes,
   mais une marque rouge et des boutons d'application désactivés.
   Archivo élargi pour les titres, Geist pour le texte, Geist Mono pour les
   montants et numéros (Google Fonts, chargées dans index.html). */

:root {
  --rouge: #A31621;         /* primaire, rouge RAFBET */
  --rouge-fonce: #7E0F18;   /* survol / pressé */
  --rouge-vif: #D23545;
  --rouge-clair: #FBEBEC;   /* teinte */
  --vert: #178A57;          /* retrait, argent reçu */
  --vert-fond: #E3F4EB;
  --vert-encre: #146E46;
  --fond: #FAF7F7;
  --papier: #FFFFFF;
  --encre: #241519;
  --sourdine: #6E5D61;
  --filet: #EFE3E5;
  --bord-champ: #E4D4D7;
  --ombre-carte: 0 1px 2px rgb(36 21 25 / 0.04), 0 10px 28px -14px rgb(163 22 33 / 0.16);
  --ombre-heros: 0 24px 48px -24px rgb(126 15 24 / 0.55);
  --ressort: cubic-bezier(0.2, 0.8, 0.2, 1);
  --titre: "Archivo", "Geist", system-ui, sans-serif;
  --texte: "Geist", system-ui, sans-serif;
  --mono: "Geist Mono", ui-monospace, monospace;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--texte);
  font-size: 16px;
  line-height: 1.55;
  color: var(--encre);
  background: var(--fond);
}
h1, h2, h3 { font-family: var(--titre); font-stretch: 115%; font-variation-settings: "wdth" 115; letter-spacing: -0.01em; line-height: 1.1; margin: 0; }
h1 { font-size: clamp(1.9rem, 4.6vw, 3.1rem); font-weight: 800; }
h2 { font-size: clamp(1.4rem, 2.8vw, 1.95rem); font-weight: 700; }
h3 { font-size: 1.05rem; font-weight: 700; }
p { margin: 0; }
a { color: inherit; }
img { display: block; }
ul, ol { margin: 0; padding: 0; list-style: none; }

.conteneur { width: min(1120px, 100% - 32px); margin-inline: auto; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--papier); padding: 8px 14px; border-radius: 999px; z-index: 100; }
.skip:focus { left: 16px; }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }

/* ── La marque : un mot-symbole texte, RAF encre + BET rouge ───────────── */
.marque-texte { font-family: var(--titre); font-stretch: 120%; font-variation-settings: "wdth" 120; font-weight: 800; font-size: 24px; letter-spacing: 0.01em; color: var(--encre); }
.marque-texte em { font-style: normal; color: var(--rouge); }

/* ── Boutons : arrondis 16, pas de pilule ──────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 20px; border-radius: 16px; font-weight: 600; font-size: 15px;
  text-decoration: none; border: 1px solid transparent;
  transition: transform 0.2s var(--ressort), background 0.2s, box-shadow 0.2s;
}
.btn:active { transform: scale(0.97); }
.btn-grand { padding: 14px 24px; font-size: 16px; }
.btn-rouge { background: var(--rouge); color: #fff; box-shadow: 0 12px 24px -14px rgb(163 22 33 / 0.8); }
.btn-blanc { background: #fff; color: var(--rouge); }
.btn-verre { background: rgb(255 255 255 / 0.14); color: #fff; border-color: rgb(255 255 255 / 0.35); }

/* L'application n'est pas sortie : les boutons l'annoncent, sans réagir. */
.btn[aria-disabled="true"] { cursor: not-allowed; }
.btn[aria-disabled="true"]:active { transform: none; }
.tag-bientot {
  padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
  background: rgb(255 255 255 / 0.2); color: #fff;
}
.tag-encre { background: var(--rouge-clair); color: var(--rouge-fonce); }

.pastille { display: inline-flex; align-items: center; padding: 5px 12px; border-radius: 999px; font-size: 13px; font-weight: 600; }
.pastille-rouge { background: var(--rouge-clair); color: var(--rouge-fonce); }
.pastille-vert { background: var(--vert-fond); color: var(--vert-encre); }
.pastille-blanche { background: rgb(255 255 255 / 0.14); color: #fff; border: 1px solid rgb(255 255 255 / 0.35); }

/* ── Barre du haut : blanche, filet en bas ─────────────────────────────── */
.barre { position: sticky; top: 0; z-index: 20; background: rgb(255 255 255 / 0.92); backdrop-filter: blur(12px); border-bottom: 1px solid var(--filet); }
.barre-int { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 68px; }
.marque { display: flex; align-items: center; text-decoration: none; }
.nav { display: flex; align-items: center; gap: 4px; }
.nav a:not(.btn) { padding: 8px 12px; border-radius: 12px; font-weight: 500; font-size: 15px; text-decoration: none; color: var(--sourdine); }
.nav a:not(.btn):hover { background: var(--rouge-clair); color: var(--rouge-fonce); }
.nav-app { margin-left: 8px; }
.burger { display: none; width: 44px; height: 44px; border: 1px solid var(--filet); background: var(--papier); border-radius: 14px; cursor: pointer; flex-direction: column; align-items: center; justify-content: center; gap: 4px; }
.burger span { width: 18px; height: 2px; background: var(--encre); border-radius: 2px; transition: transform 0.25s, opacity 0.2s; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* ── La surface héro : aplat rouge, halo en filigrane ──────────────────── */
.heros-rouge {
  position: relative; isolation: isolate; overflow: hidden;
  background: var(--rouge); color: #fff; border-radius: 24px; box-shadow: var(--ombre-heros);
}
.heros-rouge::after {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  width: min(62%, 560px); aspect-ratio: 1; right: 0; bottom: 0;
  transform: translate(28%, 34%);
  background: radial-gradient(circle, rgb(255 255 255 / 0.16), transparent 70%);
}

.ouverture { padding-top: 24px; }
.heros { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 40px; align-items: center; padding: clamp(32px, 6vw, 72px); }
.sur-titre { font-weight: 600; font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: #F3CDD1; margin-bottom: 14px; }
.heros h1 { max-width: 15ch; }
.chapo { font-size: 1.1rem; color: #F8DEE1; max-width: 46ch; margin-top: 18px; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.reseaux { display: flex; gap: 8px; margin-top: 28px; }

/* Le téléphone : l'accueil de l'application à venir, en HTML. */
.tel { justify-self: center; width: min(100%, 330px); padding: 10px; border-radius: 44px; background: #fff; box-shadow: 0 40px 80px -30px rgb(47 4 10 / 0.7); }
.tel-ecran { border-radius: 36px; background: var(--fond); color: var(--encre); padding: 18px 14px 16px; }
.tel-carte { position: relative; overflow: hidden; isolation: isolate; background: var(--rouge); color: #fff; border-radius: 22px; padding: 16px; }
.tel-carte::after { content: ""; position: absolute; z-index: -1; width: 72%; aspect-ratio: 1; right: 0; bottom: 0; transform: translate(30%, 36%); background: radial-gradient(circle, rgb(255 255 255 / 0.18), transparent 70%); }
.tel-salut { font-size: 10.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: #F3CDD1; }
.tel-titre { font-family: var(--titre); font-stretch: 115%; font-variation-settings: "wdth" 115; font-weight: 800; font-size: 19px; margin: 4px 0 12px; }
.tel-tuiles { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.tuile { border-radius: 16px; padding: 10px 12px 12px; font-family: var(--titre); font-stretch: 115%; font-variation-settings: "wdth" 115; font-weight: 700; font-size: 15px; display: flex; flex-direction: column; }
.tuile i { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; font-style: normal; font-size: 14px; margin-bottom: 12px; }
.tuile small { font-family: var(--texte); font-weight: 500; font-size: 10.5px; margin-top: 2px; }
.tuile-depot { background: #fff; color: var(--encre); }
.tuile-depot i { background: var(--rouge-clair); color: var(--rouge); }
.tuile-depot small { color: var(--sourdine); }
.tuile-retrait { background: rgb(255 255 255 / 0.14); border: 1px solid rgb(255 255 255 / 0.35); color: #fff; }
.tuile-retrait i { background: rgb(255 255 255 / 0.18); }
.tuile-retrait small { color: rgb(255 255 255 / 0.82); }
.suivi { background: var(--papier); border: 1px solid var(--filet); border-radius: 20px; padding: 14px; margin-top: 12px; }
.suivi-haut { display: flex; justify-content: space-between; align-items: center; font-family: var(--titre); font-stretch: 115%; font-variation-settings: "wdth" 115; font-weight: 700; font-size: 12.5px; }
.suivi-haut .pastille { font-family: var(--texte); font-size: 10.5px; padding: 3px 9px; }
.suivi-tete { display: flex; justify-content: space-between; align-items: baseline; margin-top: 10px; font-family: var(--mono); font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; }
.suivi-tete span { font-family: var(--texte); font-size: 11px; color: var(--sourdine); font-weight: 500; }
.suivi-etapes { display: flex; margin-top: 14px; }
.suivi-etapes li { position: relative; flex: 1; display: flex; flex-direction: column; align-items: center; gap: 7px; font-size: 10.5px; font-weight: 500; color: var(--sourdine); }
.suivi-etapes li + li::before { content: ""; position: absolute; right: 50%; top: 5px; width: 100%; height: 2px; background: var(--filet); }
.suivi-etapes li.fait + li.fait::before { background: var(--rouge); }
.suivi-etapes li.fait { color: var(--encre); }
.point { position: relative; z-index: 1; width: 12px; height: 12px; border-radius: 50%; background: var(--bord-champ); }
.fait .point { background: var(--rouge); }
.en-cours .point { box-shadow: 0 0 0 5px var(--rouge-clair); }
.suivi-statut { font-size: 11.5px; color: var(--sourdine); margin-top: 12px; }

/* ── Cartes ────────────────────────────────────────────────────────────── */
.carte { background: var(--papier); border: 1px solid var(--filet); border-radius: 20px; padding: 26px; box-shadow: var(--ombre-carte); }
.promesses { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 24px; }
.promesses h2 { font-size: 1.15rem; margin: 16px 0 8px; }
.promesses p { color: var(--sourdine); font-size: 15px; }
.icone { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; }
.icone-rouge { background: var(--rouge-clair); color: var(--rouge); }
.icone-clair { background: var(--fond); color: var(--rouge-fonce); border: 1px solid var(--filet); }
.icone-vert { background: var(--vert-fond); color: var(--vert); }

/* ── Parcours ──────────────────────────────────────────────────────────── */
.parcours { margin-top: 72px; }
.parcours-tete { max-width: 56ch; }
.parcours-tete h2 { margin-top: 14px; }
.parcours-tete p { color: var(--sourdine); margin-top: 8px; font-size: 1.05rem; }
.etapes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 26px; counter-reset: etape; }
.etapes li { background: var(--papier); border: 1px solid var(--filet); border-radius: 20px; padding: 22px; box-shadow: var(--ombre-carte); }
.num { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--rouge); color: #fff; font-family: var(--mono); font-weight: 600; margin-bottom: 16px; }
.etapes-vert .num { background: var(--vert); }
.etapes p { color: var(--sourdine); font-size: 15px; margin-top: 6px; }

/* ── Garanties ─────────────────────────────────────────────────────────── */
.garanties { margin-top: 72px; padding: clamp(28px, 5vw, 56px); display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 32px; align-items: start; }
.garanties .chapo { margin-top: 10px; }
.garanties-liste { display: grid; gap: 12px; }
.garanties-liste li { background: rgb(255 255 255 / 0.12); border: 1px solid rgb(255 255 255 / 0.25); border-radius: 16px; padding: 16px 18px; color: #F8DEE1; font-size: 15px; }
.garanties-liste b { color: #fff; display: block; margin-bottom: 2px; }

/* ── Questions ─────────────────────────────────────────────────────────── */
.questions { margin-top: 72px; max-width: 760px; }
.questions h2 { margin-bottom: 18px; }
.questions details { background: var(--papier); border: 1px solid var(--filet); border-radius: 20px; margin-bottom: 10px; }
.questions summary { list-style: none; cursor: pointer; padding: 18px 22px; font-weight: 600; display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.questions summary::-webkit-details-marker { display: none; }
.questions summary::after { content: "+"; font-family: var(--texte); font-size: 22px; color: var(--rouge); transition: transform 0.25s var(--ressort); }
.questions details[open] summary::after { transform: rotate(45deg); }
.questions details p { padding: 0 22px 18px; color: var(--sourdine); }

/* ── Appel ─────────────────────────────────────────────────────────────── */
.appel { margin-top: 56px; display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; padding: 32px; }
.appel p { color: var(--sourdine); margin-top: 6px; }
.appel .actions { margin-top: 0; }

/* Badges de boutique : noir profond, filet fin, deux lignes de texte.
   Désactivés tant que l'application n'est pas publiée. */
.badge-store { display: inline-flex; align-items: center; gap: 10px; height: 56px; padding: 0 16px 0 12px; border-radius: 12px; background: #07080A; color: #fff; border: 1px solid var(--bord-champ); text-decoration: none; }
.badge-store[aria-disabled="true"] { cursor: not-allowed; opacity: 0.75; }
.badge-store span { display: flex; flex-direction: column; line-height: 1.1; }
.badge-store small { font-size: 10px; letter-spacing: .08em; text-transform: uppercase; opacity: .8; }
.badge-store b { font-size: 18px; font-weight: 700; }

/* ── Pied ──────────────────────────────────────────────────────────────── */
.pied { margin-top: 56px; padding: 40px 0 48px; border-top: 1px solid var(--filet); }
.pied-int { display: grid; gap: 18px; }
.pied-marque { display: flex; align-items: center; }
.pied-legal { color: var(--sourdine); font-size: 14px; max-width: 72ch; }
.pied-liens { display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: 14px; color: var(--sourdine); }
.pied-liens a { text-decoration: none; }
.pied-liens a:hover { color: var(--encre); text-decoration: underline; }

/* ── Petits écrans ─────────────────────────────────────────────────────── */
@media (max-width: 960px) {
  .heros { grid-template-columns: 1fr; }
  .tel { margin-top: 8px; }
  .promesses, .etapes { grid-template-columns: 1fr 1fr; }
  .garanties { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .barre-int { height: 62px; }
  .nav { display: none; position: absolute; left: 12px; right: 12px; top: 70px; flex-direction: column; align-items: stretch; gap: 2px; background: var(--papier); border: 1px solid var(--filet); border-radius: 20px; padding: 10px; box-shadow: var(--ombre-carte); }
  .nav.ouvert { display: flex; }
  .nav a:not(.btn) { padding: 12px 16px; }
  .nav-app { margin: 8px 6px 4px; }
  .burger { display: flex; }
  .promesses, .etapes { grid-template-columns: 1fr; }
  .heros { padding: 28px 22px; }
  .marque-texte { font-size: 21px; }
  .btn-grand { width: 100%; }
  .badge-store { width: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}