/* BOZO SERVICE — site vitrine, identité « Bozo » (claire, moderne, fintech).
   Mêmes couleurs, mêmes arrondis, mêmes polices que l'application :
   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 {
  --bleu: #0E609C;          /* primaire, bleu du logo */
  --bleu-fonce: #0A4C7C;    /* survol / pressé */
  --bleu-vif: #1B7FC4;
  --bleu-clair: #E7F0F8;    /* teinte */
  --gris-logo: #8D8D8F;
  --vert: #178A57;          /* retrait, argent reçu */
  --vert-fond: #E3F4EB;
  --vert-encre: #146E46;
  --rouge: #D93A4A;
  --fond: #F5F7FA;
  --papier: #FFFFFF;
  --encre: #0B1A2A;
  --sourdine: #5A6676;
  --filet: #E4E9F0;
  --bord-champ: #D5DDE7;
  --ombre-carte: 0 1px 2px rgb(11 26 42 / 0.04), 0 10px 28px -14px rgb(14 96 156 / 0.18);
  --ombre-heros: 0 24px 48px -24px rgb(14 96 156 / 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; }

/* ── 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-bleu { background: var(--bleu); color: #fff; box-shadow: 0 12px 24px -14px rgb(14 96 156 / 0.8); }
.btn-bleu:hover { background: var(--bleu-fonce); }
.btn-blanc { background: #fff; color: var(--bleu); }
.btn-blanc:hover { background: var(--bleu-clair); }
.btn-verre { background: rgb(255 255 255 / 0.14); color: #fff; border-color: rgb(255 255 255 / 0.35); }
.btn-verre:hover { background: rgb(255 255 255 / 0.22); }
.btn-contour { background: var(--papier); color: var(--encre); border-color: var(--bord-champ); }
.btn-contour:hover { background: var(--fond); }

.pastille { display: inline-flex; align-items: center; padding: 5px 12px; border-radius: 999px; font-size: 13px; font-weight: 600; }
.pastille-bleu { background: var(--bleu-clair); color: var(--bleu-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; }
.marque img { height: 36px; width: auto; }
.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(--bleu-clair); color: var(--bleu-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 bleu, signe blanc en filigrane ────────────── */
.heros-bleu {
  position: relative; isolation: isolate; overflow: hidden;
  background: var(--bleu); color: #fff; border-radius: 24px; box-shadow: var(--ombre-heros);
}
.heros-bleu::after {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  width: min(62%, 560px); aspect-ratio: 1952 / 1256; right: 0; bottom: 0;
  transform: translate(22%, 18%);
  background: url("../assets/img/mark-white.png") no-repeat center / contain; opacity: 0.13;
}

.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: #CFE1F0; margin-bottom: 14px; }
.heros h1 { max-width: 15ch; }
.chapo { font-size: 1.1rem; color: #DCE9F5; 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, en HTML. */
.tel { justify-self: center; width: min(100%, 330px); padding: 10px; border-radius: 44px; background: #fff; box-shadow: 0 40px 80px -30px rgb(4 28 47 / 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(--bleu); color: #fff; border-radius: 22px; padding: 16px; }
.tel-carte::after { content: ""; position: absolute; z-index: -1; width: 72%; aspect-ratio: 1952 / 1256; right: 0; bottom: 0; transform: translate(24%, 20%); background: url("../assets/img/mark-white.png") no-repeat center / contain; opacity: 0.13; }
.tel-salut { font-size: 10.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: #CFE1F0; }
.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(--bleu-clair); color: var(--bleu); }
.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(--bleu); }
.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(--bleu); }
.en-cours .point { box-shadow: 0 0 0 5px var(--bleu-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-bleu { background: var(--bleu-clair); color: var(--bleu); }
.icone-clair { background: var(--fond); color: var(--bleu-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(--bleu); 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: #DCE9F5; 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(--bleu); 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; }

/* ── 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-marque img { height: 34px; width: auto; }
.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 img { height: 30px; }
  .btn-grand { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* ── Pages légales (confidentialité, suppression de compte) ─────────────── */
.page-legale { padding: clamp(28px, 5vw, 56px) 0 0; }
.page-legale-tete { max-width: 62ch; margin-bottom: 24px; }
.page-legale-tete .sous-titre { margin-top: 10px; color: var(--sourdine); font-size: 15px; line-height: 1.5; }
.page-legale-corps { max-width: 76ch; padding: clamp(22px, 4vw, 40px); }
.page-legale-corps h2 { font-size: 1.25rem; margin-top: 28px; }
.page-legale-corps h2:first-child { margin-top: 0; }
.page-legale-corps h3 { margin-top: 18px; font-size: 1rem; }
.page-legale-corps p { margin-top: 10px; line-height: 1.6; }
.page-legale-corps ul, .page-legale-corps ol { margin: 8px 0 0; padding-left: 22px; line-height: 1.6; }
.page-legale-corps li + li { margin-top: 4px; }
.page-legale-corps a { color: var(--bleu); font-weight: 600; }