/* BackLine · la base commune de toutes les pages : la police de l'app, ses couleurs, l'en-tête, le pied de page,
   les boutons, les cartes, les champs, et la coche verte « c'est fait ». Chaque page garde ses propres réglages,
   chargés avant ce fichier. Règles de l'identité : fond papier #F4F3F1, encre #151413, rouge #A3262E avec
   parcimonie (un mot, un trait, un bouton), League Gothic seulement pour le logo et les grands titres. */

@font-face {
  font-family: "League Gothic";
  src: url("LeagueGothic.ttf") format("truetype");
  font-display: swap;
}

:root {
  --bl-bg: #F4F3F1;
  --bl-paper: #FFFFFF;
  --bl-ink: #151413;
  --bl-ink2: #5F5B56;
  --bl-ink3: #8E8981;
  --bl-line: rgba(21, 20, 19, .10);
  --bl-accent: #A3262E;
  --bl-green: #23824F;
  --bl-amber: #A86A12;
  --bl-night: #151413;
  --bl-night2: #1F1D1B;
  --bl-display: "League Gothic", "Arial Narrow", "Helvetica Neue", sans-serif;
  --bl-text: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
  --bl-radius: 16px;
}

html { -webkit-text-size-adjust: 100%; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; }
body { font-family: var(--bl-text); }
::selection { background: rgba(163, 38, 46, .18); }
:focus-visible { outline: 2px solid var(--bl-accent); outline-offset: 2px; }
.bl-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---- L'en-tête : le logo, le nom, et à droite une étiquette (« Signature sécurisée », « Brief »…) ---- */
.bl-top { background: var(--bl-night); color: #fff; }
.bl-top .bl-in { max-width: 1080px; margin: 0 auto; padding: calc(14px + env(safe-area-inset-top)) 16px 14px; display: flex; align-items: center; gap: 12px; }
.bl-top .bl-home { display: flex; align-items: center; gap: 10px; color: #fff; text-decoration: none; }
.bl-top img { width: 26px; height: 26px; display: block; }
.bl-top .bl-name { font-family: var(--bl-display); font-size: 25px; letter-spacing: .6px; line-height: 1; text-transform: uppercase; padding-top: 2px; }
.bl-top .bl-tag { margin-left: auto; font-size: 12px; font-weight: 600; letter-spacing: .4px; color: rgba(255, 255, 255, .72);
                  display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; border-radius: 999px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16); white-space: nowrap; }
.bl-top .bl-tag svg { width: 12px; height: 12px; }

/* Le grand titre à la façon de l'app : condensé, en capitales. */
.bl-display { font-family: var(--bl-display); font-weight: 400; text-transform: uppercase; letter-spacing: .5px; line-height: .95; }

/* ---- Les briques communes ---- */
.bl-kicker { font-size: 12px; font-weight: 700; letter-spacing: 2.4px; text-transform: uppercase; color: var(--bl-ink3); margin: 0 0 10px; }
.bl-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 0; border-radius: 14px; padding: 14px 20px; min-height: 48px;
          font: inherit; font-size: 16px; font-weight: 600; text-decoration: none; cursor: pointer; background: var(--bl-ink); color: #fff;
          transition: transform .12s ease, opacity .2s ease; }
.bl-btn:active { transform: scale(.98); }
.bl-btn:disabled { opacity: .4; cursor: default; }
.bl-btn.bl-wide { display: flex; width: 100%; }
.bl-btn.bl-ghost { background: transparent; color: var(--bl-ink); box-shadow: inset 0 0 0 1.5px var(--bl-line); }
.bl-btn.bl-red { background: var(--bl-accent); }
.bl-card { background: var(--bl-paper); border-radius: var(--bl-radius); padding: 22px 20px; box-shadow: 0 1px 2px rgba(21, 20, 19, .04), 0 8px 24px rgba(21, 20, 19, .05); }
.bl-field { display: block; margin-top: 16px; }
.bl-field > span { display: block; font-size: 14px; font-weight: 600; color: var(--bl-ink); margin-bottom: 6px; }
.bl-field input, .bl-field textarea, .bl-field select { width: 100%; font: inherit; font-size: 17px; padding: 13px 14px; border-radius: 12px; border: 1px solid var(--bl-line);
          background: #fff; color: var(--bl-ink); -webkit-appearance: none; appearance: none; }
.bl-field textarea { min-height: 110px; resize: vertical; line-height: 1.45; }
.bl-field input:focus, .bl-field textarea:focus { outline: 2px solid rgba(163, 38, 46, .35); outline-offset: 1px; border-color: transparent; }
.bl-note { font-size: 13.5px; line-height: 1.5; color: var(--bl-ink2); margin: 10px 0 0; }
.bl-err { font-size: 14px; color: var(--bl-accent); margin: 10px 0 0; }
.bl-state { text-align: center; padding: 40px 22px; color: var(--bl-ink2); line-height: 1.5; }
.bl-state h1, .bl-state h2 { font-family: var(--bl-display); font-weight: 400; text-transform: uppercase; letter-spacing: .4px; color: var(--bl-ink); font-size: 40px; line-height: 1; margin: 0 0 10px; }
.bl-state p { margin: 8px auto 0; max-width: 420px; }
.bl-demo { background: var(--bl-paper); color: var(--bl-ink2); font-size: 13px; line-height: 1.45; border-radius: 12px; padding: 10px 14px; box-shadow: 0 1px 2px rgba(21, 20, 19, .06), 0 6px 18px rgba(21, 20, 19, .06); position: relative; }
.hidden { display: none !important; }

/* ---- Le pied de page ---- */
.bl-foot { max-width: 1080px; margin: 0 auto; padding: 34px 16px calc(30px + env(safe-area-inset-bottom)); display: flex; flex-wrap: wrap; gap: 10px 18px;
           align-items: center; justify-content: center; font-size: 12.5px; color: var(--bl-ink3); }
.bl-foot a { color: var(--bl-ink3); text-decoration: none; }
.bl-foot a:hover { color: var(--bl-ink); }
/* La petite marque BackLine (logo et nom) : dans le pied de page, et aussi hors de lui (galerie). */
.bl-mark { display: inline-flex; align-items: center; gap: 7px; font-family: var(--bl-display); font-size: 17px; letter-spacing: .5px; text-transform: uppercase; color: var(--bl-ink2); }
.bl-mark img { width: 15px; height: 15px; opacity: .7; }

/* ---- La coche verte « c'est fait » : un cercle qui apparaît, une coche qui se dessine ---- */
div.ok { width: 76px !important; height: 76px !important; border-radius: 50% !important; background: var(--bl-green) !important; color: transparent !important;
      font-size: 0 !important; line-height: 0 !important; position: relative; margin: 0 auto 20px !important;
      box-shadow: 0 0 0 0 rgba(35, 130, 79, .35); animation: bl-pop .5s cubic-bezier(.2, 1.4, .4, 1) both, bl-ring 1.2s .35s ease-out both; }
div.ok::after { content: ""; position: absolute; left: 27px; top: 15px; width: 17px; height: 33px; border: solid #fff; border-width: 0 5px 5px 0;
             border-radius: 2px; transform: rotate(45deg) scale(0); transform-origin: 60% 60%; animation: bl-tick .32s .3s cubic-bezier(.3, 1.6, .5, 1) forwards; }
@keyframes bl-pop { from { transform: scale(.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes bl-tick { to { transform: rotate(45deg) scale(1); } }
@keyframes bl-ring { from { box-shadow: 0 0 0 0 rgba(35, 130, 79, .35); } to { box-shadow: 0 0 0 22px rgba(35, 130, 79, 0); } }

/* ---- Un sablier discret pour les chargements ---- */
.bl-spin { width: 26px; height: 26px; border-radius: 50%; border: 3px solid var(--bl-line); border-top-color: var(--bl-accent); margin: 0 auto 14px; animation: bl-rot .8s linear infinite; }
@keyframes bl-rot { to { transform: rotate(360deg); } }

/* ---- Le mouvement commun : sobre, à la façon de l'app, seulement transform et opacity (aucune saccade) ----
   - Les apparitions au défilement : un bloc marqué data-rv arrive en fondu en glissant de quelques pixels.
     Elles n'existent que si la page a posé la classe « bl-motion » sur <html> (assets/accueil.js, page d'accueil) :
     sans script, tout est visible tout de suite. Pour tout couper sur une page : retirer son script.
   - Les boutons répondent au survol (souris seulement) et au toucher : un voile léger, une pression.
   - La page vitrine (pro.html) : l'ouverture qui monte une fois, les cartes qui arrivent l'une après l'autre.
   « Réduire les animations » (réglage de l'appareil) : plus rien ne bouge, plus rien n'est caché. */
@keyframes bl-fade { from { opacity: 0; } }
@keyframes bl-rise { from { opacity: 0; transform: translateY(var(--bl-rise, 16px)); } }

@media (prefers-reduced-motion: no-preference) {
  .bl-motion [data-rv] { opacity: 0; transform: translateY(22px); transition: opacity .8s ease, transform 1s cubic-bezier(.2, .8, .2, 1); }
  .bl-motion [data-rv].in { opacity: 1; transform: none; }
}
@media print { .bl-motion [data-rv] { opacity: 1 !important; transform: none !important; } }

/* Le voile des boutons : une couche de la couleur du texte, très légère, au-dessus du fond et sous le texte. */
.bl-btn { position: relative; isolation: isolate; -webkit-tap-highlight-color: transparent; }
.bl-btn::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: currentColor; opacity: 0;
                 transition: opacity .2s ease; pointer-events: none; }
@media (hover: hover) and (pointer: fine) { .bl-btn:not(:disabled):hover::after { opacity: .08; } }
.bl-btn:not(:disabled):active::after { opacity: .14; }

/* ---- La page vitrine (pro.html, qui garde son propre script) : identifiants propres à cette page ---- */
#page .b, #sticky .b, #state .b { position: relative; isolation: isolate; }
#page .b::after, #sticky .b::after, #state .b::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: currentColor;
                 opacity: 0; transition: opacity .2s ease; pointer-events: none; }
@media (hover: hover) and (pointer: fine) {
  #page .b:not(:disabled):hover::after, #sticky .b:hover::after, #state .b:hover::after { opacity: .1; }
}
#page .b:not(:disabled):active::after, #sticky .b:active::after, #state .b:active::after { opacity: .16; }

@media (prefers-reduced-motion: no-preference) {
  /* L'ouverture, une fois, quand la page s'affiche après le chargement : le nom, l'accroche, puis les boutons. */
  #page:not(.hidden) { animation: bl-fade .5s ease both; }
  #hero .bar { animation: bl-fade .8s ease .15s both; }
  #hero .in > * { --bl-rise: 18px; animation: bl-rise .9s cubic-bezier(.2, .8, .2, 1) .1s both; }
  #hero .in > :nth-child(2) { animation-delay: .18s; }
  #hero .in > :nth-child(3) { animation-delay: .3s; }
  #hero .in > :nth-child(4) { animation-delay: .4s; }
  /* Les formules, les avis et les images arrivent l'une après l'autre quand leur section apparaît (classe « in »). */
  #page .reveal .formules > .f, #page .reveal .avis > .q, #page .reveal .grid > .tile {
    opacity: 0; transform: translateY(14px); transition: opacity .6s ease .12s, transform .8s cubic-bezier(.2, .8, .2, 1) .12s; }
  #page .reveal.in .formules > .f, #page .reveal.in .avis > .q, #page .reveal.in .grid > .tile { opacity: 1; transform: none; }
  #page .reveal .formules > :nth-child(2), #page .reveal .avis > :nth-child(2), #page .reveal .grid > :nth-child(2) { transition-delay: .19s; }
  #page .reveal .formules > :nth-child(3), #page .reveal .avis > :nth-child(3), #page .reveal .grid > :nth-child(3) { transition-delay: .26s; }
  #page .reveal .formules > :nth-child(4), #page .reveal .avis > :nth-child(4), #page .reveal .grid > :nth-child(4) { transition-delay: .33s; }
  #page .reveal .formules > :nth-child(n+5), #page .reveal .avis > :nth-child(n+5), #page .reveal .grid > :nth-child(n+5) { transition-delay: .4s; }
  /* Les onglets et le choix de la langue s'enfoncent un peu sous le doigt. */
  #page .tabs button, #page .lang button { transition: transform .15s ease; }
  #page .tabs button:active, #page .lang button:active { transform: scale(.96); }
}

@media (prefers-reduced-motion: reduce) {
  .ok, .ok::after, .bl-spin { animation: none !important; }
  div.ok::after { transform: rotate(45deg) scale(1); }
  .bl-btn { transition: none; }
  .bl-btn:active { transform: none; }
}