/* handiacces.fr — vitrine.
   Mêmes couleurs et même famille de caractères que l'appli (app/app.css) :
   on passe du site à l'appli sans que l'œil change de monde. */

:root {
  --bg: #000000;
  --bg-2: #0b0b0d;
  --card: #151517;
  --card-2: #1c1c1f;
  --border: rgba(255, 255, 255, .10);
  --border-strong: rgba(255, 255, 255, .20);
  --text: #f5f5f7;
  --text-dim: #a1a1a6;
  --text-mute: #8e8e93;
  --blue: #2997ff;
  --blue-soft: #7bc0ff;
  --green: #30d158;
  --red: #ff453a;
  /* Les fonds de section : le noir de la page, un gris à peine relevé, et un
     bleu nuit tiré du bleu de l'appli. */
  --zone-grise: #131317;
  --zone-bleue: #08182a;
  --r: 18px;
  --nav-h: 54px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--nav-h) + 16px); }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
  font-size: 16px;
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
a { color: var(--blue); text-decoration: none; }

/* ---------------- texte justifié ----------------
   Le texte courant est justifié : les deux bords alignés. En colonne étroite,
   ça creuse des blancs entre les mots si les mots ne peuvent pas se couper.
   D'où la césure automatique, que le navigateur fait en français grâce au
   lang="fr" de la page. La dernière ligne, elle, reste à gauche : c'est le
   défaut, et l'étirer donnerait une ligne trouée.

   Les étapes d'installation, elles, restent en drapeau : ce sont des consignes
   courtes qui portent des blocs insécables (« Sur l'écran d'accueil »).
   Justifiées, elles se creusaient de trous entre deux mots. */
.band > .sub,
.card p,
.plat > p,
.note p,
.al p,
.al .disclaimer {
  text-align: justify;
  text-align-last: left;
  hyphens: auto;
  -webkit-hyphens: auto;
}
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
.sr {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

/* ---------------- barre du haut ---------------- */
.nav {
  position: fixed; inset: 0 0 auto 0; height: var(--nav-h); z-index: 100;
  background: rgba(0, 0, 0, .68);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--border);
}
.nav-inner {
  max-width: 1040px; height: 100%; margin: 0 auto; padding: 0 20px;
  display: flex; align-items: center; gap: 24px;
}
.nav-brand { display: flex; align-items: center; gap: 9px; margin-right: auto; color: var(--text); }
.nav-brand img { width: 26px; height: 26px; border-radius: 7px; }
.nav-brand b { font-weight: 700; font-size: 17px; letter-spacing: -.02em; }
.nav-brand b span { color: var(--blue); }
.nav-links { display: flex; gap: 22px; }
.nav-links a { font-size: 13px; color: var(--text-dim); transition: color .2s ease; }
.nav-links a:hover { color: var(--text); }
/* La page où l'on se trouve, pour ne pas chercher où l'on est. */
.nav-links a.ici { color: var(--text); font-weight: 600; }
@media (max-width: 760px) {
  .nav-inner { gap: 14px; padding: 0 14px; }
  .nav-links { gap: 14px; overflow-x: auto; -ms-overflow-style: none; scrollbar-width: none; }
  .nav-links::-webkit-scrollbar { display: none; }
  .nav-links a { white-space: nowrap; font-size: 12.5px; }
}
/* Sur un écran de téléphone, les quatre liens et le nom écrit en toutes
   lettres ne tiennent pas côte à côte : le nom passait par-dessus le premier
   lien. L'icône suffit à dire où l'on est, et rend le clic de retour. */
@media (max-width: 620px) {
  .nav-brand { flex: 0 0 auto; }
  .nav-brand b { display: none; }
  .nav-links { min-width: 0; }
}

/* ---------------- hero ---------------- */
.hero { max-width: 900px; margin: 0 auto; padding: calc(var(--nav-h) + 54px) 20px 0; text-align: center; }
.hero-logo {
  width: min(520px, 94vw); height: auto; margin: 0 auto;
  border-radius: 20px; border: 1px solid var(--border);
}
.hero h1 { margin: 26px 0 0; font-size: clamp(30px, 5.4vw, 46px); font-weight: 600; letter-spacing: -.03em; line-height: 1.08; }
/* Le hero de la page « version web » : pas de logo, donc pas la peine de
   descendre aussi bas avant d'entrer dans le vif. */
.hero-court { padding-top: calc(var(--nav-h) + 62px); }
.hero-court h1 { margin-top: 8px; }
.hero .eyebrow {
  margin: 0; font-size: 12.5px; font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; color: var(--blue);
}
.hero .lead { margin: 16px auto 0; max-width: 46ch; font-size: clamp(17px, 2.3vw, 20px); color: var(--text-dim); }

.cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 30px; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 13px 26px; border-radius: 999px; border: 1px solid transparent;
  font-size: 16px; font-weight: 600; cursor: pointer;
  transition: transform .2s ease, opacity .2s ease, border-color .2s ease, background .2s ease;
}
.btn-primary { background: var(--blue); color: #fff; }
.btn-primary:hover { transform: translateY(-2px); opacity: .92; }
.btn-ghost { border-color: var(--border-strong); color: var(--text); background: none; }
.btn-ghost:hover { border-color: var(--text-dim); transform: translateY(-2px); }

/* ---------------- les deux tuiles du hero ----------------
   Deux images cliquables à la place des boutons : le libellé fait partie de
   l'image. Côte à côte tant qu'il y a la place, l'une sous l'autre ensuite. */
.cta-images {
  display: grid; gap: 16px; grid-template-columns: 1fr 1fr;
  max-width: 820px; margin: 30px auto 0;
}
/* Sur un téléphone, la pleine largeur donnait deux pavés empilés qui
   mangeaient l'écran avant même le premier bouton. Elles restent donc côte à
   côte, et nettement plus petites : ce sont des boutons, pas des affiches. */
@media (max-width: 700px) {
  .cta-images { max-width: 340px; gap: 10px; margin-top: 22px; }
  .tuile { border-radius: 12px; }
}
.tuile {
  display: block; overflow: hidden;
  border: 1px solid var(--border); border-radius: 16px;
  transition: transform .25s ease, border-color .25s ease;
}
.tuile:hover { transform: translateY(-3px); border-color: var(--blue); }
.tuile img { width: 100%; height: auto; }

.stat { margin-top: 38px; }
.stat .num {
  font-size: clamp(34px, 6vw, 52px); font-weight: 600; letter-spacing: -.02em;
  background: linear-gradient(90deg, var(--blue), var(--blue-soft));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.stat .lbl { margin-top: 2px; font-size: 14px; color: var(--text-dim); }

/* ---------------- sections ----------------
   Chaque section occupe toute la largeur de l'écran et centre son contenu sur
   1040 px. Le padding latéral fait le centrage : c'est ce qui permet de poser
   un fond d'un bord à l'autre sans envelopper chaque section dans un div. */
.band {
  max-width: none; margin: 0;
  padding: 78px max(20px, calc((100% - 1040px) / 2));
}

/* Les trois fonds. Ils se suivent en alternance pour qu'on voie où une
   section finit et où la suivante commence, sans jamais quitter le noir :
   un cran de gris, puis un bleu nuit pour les passages qui parlent
   d'acceslibre, dont c'est la couleur. */
.band.zone-grise {
  background: var(--zone-grise);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.band.zone-bleue {
  background: var(--zone-bleue);
  border-top: 1px solid rgba(41, 151, 255, .22);
  border-bottom: 1px solid rgba(41, 151, 255, .22);
}
/* Sur un fond éclairci, une carte du même gris disparaîtrait. Elle monte donc
   d'un cran elle aussi, et sa bordure avec. */
.band.zone-grise .card,
.band.zone-grise .plat,
.band.zone-grise .form,
.band.zone-bleue .al {
  background: var(--card-2);
  border-color: var(--border-strong);
}
.band.zone-grise .note,
.band.zone-bleue .al .disclaimer,
.band.zone-grise .champ input,
.band.zone-grise .champ textarea {
  background: rgba(0, 0, 0, .38);
}
.band.zone-grise .steps li::before { background: var(--card); }
.band > .eyebrow {
  margin: 0 0 10px; font-size: 12.5px; font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; color: var(--blue);
}
.band > h2 { margin: 0 0 10px; font-size: clamp(26px, 4vw, 38px); font-weight: 600; letter-spacing: -.025em; }
.band > .sub { margin: 0 0 30px; max-width: 62ch; font-size: clamp(16px, 2.1vw, 18.5px); color: var(--text-dim); }

.grid { display: grid; gap: 18px; grid-template-columns: repeat(3, 1fr); }
.grid.duo { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 860px) { .grid, .grid.duo { grid-template-columns: 1fr; } }

.card {
  display: flex; flex-direction: column;
  background: var(--card); border: 1px solid var(--border); border-radius: var(--r);
  padding: 26px 24px 28px;
  transition: transform .3s ease, border-color .3s ease;
}
a.card:hover { transform: translateY(-4px); border-color: var(--border-strong); }

/* ---------------- les six cartes de « À quoi ça sert » ----------------
   Chacune sa teinte, en dégradé depuis le coin haut gauche et éteint avant le
   bas de la carte : de loin on distingue six blocs, de près le texte reste
   sur le même fond sombre qu'ailleurs. L'icône reprend la teinte du cadre. */
#fonctions .card:nth-child(1) { background: linear-gradient(150deg, rgba(41,151,255,.20), rgba(21,21,23,0) 58%), var(--card); border-color: rgba(41,151,255,.30); }
#fonctions .card:nth-child(1) .ic { color: #2997ff; }
#fonctions .card:nth-child(2) { background: linear-gradient(150deg, rgba(100,210,255,.20), rgba(21,21,23,0) 58%), var(--card); border-color: rgba(100,210,255,.30); }
#fonctions .card:nth-child(2) .ic { color: #64d2ff; }
#fonctions .card:nth-child(3) { background: linear-gradient(150deg, rgba(48,209,88,.18), rgba(21,21,23,0) 58%), var(--card); border-color: rgba(48,209,88,.28); }
#fonctions .card:nth-child(3) .ic { color: #30d158; }
#fonctions .card:nth-child(4) { background: linear-gradient(150deg, rgba(191,90,242,.20), rgba(21,21,23,0) 58%), var(--card); border-color: rgba(191,90,242,.30); }
#fonctions .card:nth-child(4) .ic { color: #bf5af2; }
#fonctions .card:nth-child(5) { background: linear-gradient(150deg, rgba(255,159,10,.18), rgba(21,21,23,0) 58%), var(--card); border-color: rgba(255,159,10,.28); }
#fonctions .card:nth-child(5) .ic { color: #ff9f0a; }
#fonctions .card:nth-child(6) { background: linear-gradient(150deg, rgba(255,100,130,.18), rgba(21,21,23,0) 58%), var(--card); border-color: rgba(255,100,130,.28); }
#fonctions .card:nth-child(6) .ic { color: #ff6482; }
/* Icônes au trait plutôt qu'emojis : elles prennent la couleur qu'on leur
   donne, ici le bleu de l'appli, et se dessinent pareil partout. */
.card .ic { margin-bottom: 14px; line-height: 1; color: var(--blue); }
.card .ic svg { width: 28px; height: 28px; }
.card h3 { margin: 0 0 7px; font-size: 20px; font-weight: 600; letter-spacing: -.015em; color: var(--text); }
.card p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--text-dim); }
/* Le lien reste collé en bas, pour que trois cartes de longueurs
   différentes alignent quand même leur invitation à cliquer. */
.card .go {
  margin-top: auto; padding-top: 16px; display: inline-flex; align-items: center; gap: 5px;
  font-size: 15px; font-weight: 500; color: var(--blue);
}
.card .go::after { content: "›"; font-size: 1.15em; }
.card ul { margin: 12px 0 0; padding-left: 18px; color: var(--text-dim); font-size: 14.5px; line-height: 1.7; }
.card ul li::marker { color: var(--text-mute); }

/* ---------------- installation ---------------- */
.install-grid { display: grid; gap: 18px; grid-template-columns: repeat(2, 1fr); }
@media (max-width: 860px) { .install-grid { grid-template-columns: 1fr; } }

.plat { background: var(--card); border: 1px solid var(--border); border-radius: var(--r); padding: 26px 24px 28px; }
.plat.on { border-color: rgba(41, 151, 255, .5); box-shadow: 0 0 0 1px rgba(41, 151, 255, .2); }
.plat-head { display: flex; align-items: center; gap: 13px; margin-bottom: 6px; }
.plat-head svg { width: 30px; height: 34px; flex: 0 0 auto; fill: var(--text); }
.plat-head h3 { margin: 0; font-size: 20px; font-weight: 600; letter-spacing: -.015em; }
.plat-head .tag {
  margin-left: auto; padding: 3px 9px; border-radius: 999px;
  border: 1px solid rgba(41, 151, 255, .45); color: var(--blue);
  font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em;
}
.plat > p { margin: 0 0 16px; font-size: 15px; color: var(--text-dim); }
.steps { margin: 0; padding: 0; list-style: none; counter-reset: s; }
.steps li {
  position: relative; counter-increment: s;
  padding: 0 0 14px 38px; font-size: 15px; line-height: 1.55; color: var(--text-dim);
}
.steps li:last-child { padding-bottom: 4px; }
.steps li::before {
  content: counter(s);
  position: absolute; left: 0; top: 0;
  width: 25px; height: 25px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--card-2); border: 1px solid var(--border);
  font-size: 13px; font-weight: 600; color: var(--text);
}
.steps b { color: var(--text); font-weight: 600; }
.steps .key {
  display: inline-block; padding: 1px 7px; border-radius: 7px;
  background: var(--card-2); border: 1px solid var(--border);
  color: var(--text); font-size: 13.5px; font-weight: 500; white-space: nowrap;
}

/* ---------------- la marche à suivre en images ----------------
   Une capture par étape, en colonnes tant qu'il y a la place. Les captures
   sont des écrans de téléphone : on les borne en hauteur pour qu'une étape
   tienne dans le regard, sans avoir à faire défiler entre deux gestes. */
/* Le nombre de colonnes suit le nombre d'étapes : trois avec Chrome, quatre
   avec Safari, sans avoir à le dire deux fois. */
.pasapas {
  display: grid; gap: 22px; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
  margin: 0; padding: 0; list-style: none;
}
@media (max-width: 620px) { .pasapas { grid-template-columns: 1fr; max-width: 420px; margin-inline: auto; } }
.pasapas figure {
  margin: 0; background: var(--card); border: 1px solid var(--border);
  border-radius: var(--r); overflow: hidden;
}
.pasapas img {
  width: 100%; height: auto; display: block;
  border-bottom: 1px solid var(--border); background: #000;
}
.pasapas figcaption {
  padding: 14px 16px 16px; font-size: 14.5px; line-height: 1.6; color: var(--text-dim);
}
.pasapas figcaption b { color: var(--text); }
.pasapas .key {
  display: inline-block; padding: 1px 7px; border-radius: 7px;
  background: var(--card-2); border: 1px solid var(--border-strong);
  color: var(--text); font-size: 13.5px; white-space: nowrap;
}
.zone-grise .pasapas figure { background: var(--card-2); border-color: var(--border-strong); }

/* Le renvoi vers la page pas à pas, sous les étapes iPhone. */
.enimages {
  display: flex; align-items: center; gap: 13px; margin-top: 14px;
  padding: 12px 14px; border-radius: 12px;
  background: var(--card-2); border: 1px solid var(--border-strong);
  color: var(--text); transition: border-color .2s ease, transform .2s ease;
}
.enimages:hover { border-color: var(--blue); transform: translateY(-2px); }
.enimages svg { width: 26px; height: 26px; flex: none; color: var(--blue); }
.enimages span { display: flex; flex-direction: column; }
.enimages b { font-size: 15px; font-weight: 600; }
.enimages small { color: var(--text-dim); font-size: 13px; }
.enimages .fleche { margin-left: auto; color: var(--text-mute); font-size: 20px; }

.note {
  display: flex; gap: 14px; align-items: flex-start;
  margin-top: 18px; padding: 20px 22px;
  background: var(--bg-2); border: 1px solid var(--border); border-radius: var(--r);
  font-size: 14.5px; line-height: 1.6; color: var(--text-dim);
}
.note .ic { flex: 0 0 auto; line-height: 1.4; color: var(--blue); }
.note .ic svg { width: 22px; height: 22px; }
.note strong { color: var(--text); font-weight: 600; }
.note p { margin: 0 0 10px; }
.note p:last-child { margin-bottom: 0; }

/* ---------------- encart acceslibre ---------------- */
.al {
  display: grid; gap: 30px; grid-template-columns: 260px 1fr; align-items: start;
  background: var(--card); border: 1px solid var(--border); border-radius: var(--r);
  padding: 34px 32px;
}
@media (max-width: 860px) { .al { grid-template-columns: 1fr; gap: 22px; padding: 26px 22px; } }
.al-side { text-align: center; }
.al-logo {
  width: 200px; max-width: 100%; height: auto; margin: 0 auto;
  padding: 16px 18px; border-radius: 14px; background: #fff;
}
.al-count { margin-top: 18px; font-size: 30px; font-weight: 600; letter-spacing: -.02em; color: var(--text); }
.al-count + .lbl { font-size: 13.5px; color: var(--text-mute); }
.al p { margin: 0 0 14px; font-size: 15.5px; line-height: 1.65; color: var(--text-dim); }
.al p:last-of-type { margin-bottom: 0; }
.al strong { color: var(--text); font-weight: 600; }
.al .disclaimer {
  margin-top: 18px; padding: 14px 16px;
  background: var(--bg-2); border: 1px solid var(--border); border-radius: 12px;
  font-size: 13.5px; line-height: 1.6; color: var(--text-mute);
}
.al .lien { display: inline-flex; margin-top: 18px; }

/* ---------------- formulaire de contact ---------------- */
.form {
  background: var(--card); border: 1px solid var(--border); border-radius: var(--r);
  padding: 28px 26px 30px;
}
.form-ligne { display: grid; gap: 18px; grid-template-columns: 1fr 1fr; }
@media (max-width: 700px) { .form-ligne { grid-template-columns: 1fr; } }
.champ { display: flex; flex-direction: column; gap: 7px; margin-bottom: 18px; }
.form-ligne .champ { margin-bottom: 0; }
.form-ligne + .champ { margin-top: 18px; }
.champ label { font-size: 14px; font-weight: 600; color: var(--text); }
.champ .opt { font-weight: 400; color: var(--text-mute); }
.champ input,
.champ textarea {
  width: 100%; padding: 12px 14px;
  background: var(--bg-2); color: var(--text);
  border: 1px solid var(--border); border-radius: 12px;
  font: inherit; font-size: 15.5px;
  transition: border-color .2s ease, background .2s ease;
}
.champ textarea { resize: vertical; min-height: 130px; line-height: 1.55; }
.champ input::placeholder,
.champ textarea::placeholder { color: var(--text-mute); }
.champ input:focus,
.champ textarea:focus { outline: none; border-color: var(--blue); background: var(--card-2); }

/* Le champ que seuls les robots remplissent. Sorti de l'écran plutôt que
   masqué : un display:none se repère, et certains lecteurs d'écran
   annonceraient quand même un champ caché. L'aria-hidden les en dispense. */
.piege { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form-pied { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 6px; }
.form-pied .btn { cursor: pointer; }
.form-pied .btn[disabled] { opacity: .55; cursor: default; transform: none; }
.etat { margin: 0; font-size: 14.5px; color: var(--text-dim); }
.etat.ok { color: var(--green); }
.etat.ko { color: var(--red); }

/* ---------------- pied de page ---------------- */
.signature { display: block; width: 280px; max-width: 70%; height: auto; margin: 80px auto 0; mix-blend-mode: screen; }
footer { margin-top: 46px; border-top: 1px solid var(--border); }
.footer-inner {
  max-width: 1040px; margin: 0 auto; padding: 26px 20px 46px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px;
  font-size: 12.5px; color: var(--text-mute);
}
.footer-inner a { color: var(--text-mute); transition: color .2s ease; }
.footer-inner a:hover { color: var(--text); }
.footer-inner .grow { margin-left: auto; }
.sep { opacity: .5; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ---------------- la provenance des données ---------------- *
 * Sous le compteur, en haut de page : c'est une mention légale, elle doit se
 * lire sans défiler. Discrète, mais pas au point de disparaître. */
.source {
  max-width: 62ch; margin: 22px auto 0;
  font-size: 13px; line-height: 1.55;
  color: var(--text-dim); text-align: center;
}
.source a { color: var(--blue); text-decoration: underline; }

/* ---------------- le film de présentation ---------------- */
.lecteur {
  max-width: 960px; margin: 12px auto 0;
  border-radius: var(--r); overflow: hidden;
  border: 1px solid var(--border); background: #000;
  box-shadow: 0 30px 70px rgba(0, 0, 0, .5);
}
.lecteur video { display: block; width: 100%; height: auto; }
.ssfilm { margin-top: 16px; font-size: 14px; color: var(--text-mute); }