@font-face { font-family: "Lexend"; src: url("assets/Lexend-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Lexend"; src: url("assets/Lexend-SemiBold.woff2") format("woff2"); font-weight: 600; font-display: swap; }

:root {
  --marine: #001633;
  --marine-2: #042F61;
  --bleu: #0E8EDA;
  --bleu-clair: #7CC6F2;
  --fond: #F4F7FB;
  --texte: #1B2A3D;
  --gris: #5B6B7F;
  --ligne: #DCE4EE;
  --vert: #1F9D6B;
  --ambre: #E0A020;
  --rouge: #D8454B;
  --rayon: 14px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; font-family: "Lexend", system-ui, sans-serif; color: var(--texte); background: #fff; line-height: 1.6; font-size: 17px; }
a { color: var(--bleu); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3 { font-weight: 600; line-height: 1.2; margin: 0 0 .6em; }
h1 { font-size: clamp(2.2rem, 4.5vw, 3.6rem); letter-spacing: -.01em; }
h2 { font-size: clamp(1.7rem, 3vw, 2.4rem); }
h3 { font-size: 1.15rem; }
p { margin: 0 0 1em; }
.accent { color: var(--bleu-clair); display: block; }
.accent-bleu { color: var(--bleu); }
.wrap { max-width: 1160px; margin: 0 auto; padding: 0 28px; }

/* En-tête */
.entete { position: sticky; top: 0; z-index: 10; background: rgba(0, 22, 51, .92); backdrop-filter: blur(8px); border-bottom: 1px solid rgba(255,255,255,.08); }
.entete .wrap { display: flex; align-items: center; gap: 28px; height: 68px; }
.marque { display: flex; align-items: center; gap: 10px; color: #fff; font-weight: 600; font-size: 1.1rem; }
.marque img { height: 32px; }
.marque:hover { text-decoration: none; }
.nav { display: flex; gap: 22px; margin-left: auto; align-items: center; }
.nav a { color: #C9D6E6; font-size: .95rem; }
.nav a:hover, .nav a.actif { color: #fff; text-decoration: none; }
.pilote { display: inline-flex; align-items: center; gap: 8px; font-size: .8rem; color: #C9D6E6; border: 1px solid rgba(255,255,255,.2); border-radius: 999px; padding: 4px 12px 4px 6px; }
.pilote img { height: 20px; }
.pilote:hover { color: #fff; border-color: var(--bleu-clair); text-decoration: none; }

.btn { display: inline-block; padding: 13px 24px; border-radius: 10px; font-weight: 600; font-size: 1rem; }
.btn:hover { text-decoration: none; }
.btn.primaire { background: var(--bleu); color: #fff; }
.btn.primaire:hover { background: #0B7BC0; }
.btn.secondaire { color: #fff; border: 1px solid rgba(255,255,255,.35); }
.btn.secondaire:hover { border-color: #fff; }
.btn.petit { padding: 8px 16px; font-size: .9rem; }

/* Sections sombres à image */
.sombre { position: relative; color: #fff; background: var(--marine) center / cover no-repeat; }
.sombre::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,22,51,.95) 0%, rgba(0,22,51,.75) 45%, rgba(0,22,51,.15) 100%); }
.sombre > .wrap { position: relative; }
.heros { background-image: url("assets/cover_bg.jpg"); padding: 130px 0 140px; }
.heros-dl { padding: 110px 0 120px; background-image: url("assets/telecharger_bg.jpg"); background-position: right center; }
.heros p.intro { font-size: 1.2rem; color: #D5E1EE; max-width: 34em; margin: 1.2em 0 2em; }
.heros .actions { display: flex; gap: 14px; flex-wrap: wrap; }
.heros .fine { margin-top: 2.2em; font-size: .9rem; color: #9FB3CA; }
.enonce { padding: 150px 0; }
.enonce.principe { background-image: url("assets/statement_bg.jpg"); }
.enonce.securite { background-image: url("assets/statement2_bg.jpg"); }
.surtitre { text-transform: uppercase; letter-spacing: .12em; font-size: .8rem; color: var(--bleu-clair); font-weight: 600; margin-bottom: 1em; display: block; }
.enonce h2 { font-size: clamp(2rem, 3.6vw, 3rem); max-width: 16em; }
.enonce p { color: #D5E1EE; max-width: 32em; font-size: 1.1rem; }

/* Sections claires */
.bloc { padding: 96px 0; }
.bloc.pale { background: var(--fond); }
.bloc .sous { color: var(--gris); font-size: 1.1rem; max-width: 40em; margin-bottom: 2.4em; }

.grille { display: grid; gap: 20px; }
.g2 { grid-template-columns: repeat(2, 1fr); }
.g3 { grid-template-columns: repeat(3, 1fr); }
.g5 { grid-template-columns: repeat(5, 1fr); }

.carte { background: #fff; border: 1px solid var(--ligne); border-radius: var(--rayon); padding: 26px; box-shadow: 0 1px 2px rgba(0,22,51,.04); }
.carte p { color: var(--gris); margin: 0; font-size: .97rem; }
.carte.probleme { border-left: 4px solid var(--rouge); }
.carte.col-bleu { border-top: 4px solid var(--bleu); }
.carte.col-vert { border-top: 4px solid var(--vert); }
.carte.col-ambre { border-top: 4px solid var(--ambre); }
.carte ul { margin: 0; padding-left: 1.1em; color: var(--gris); }
.carte li { margin: .35em 0; }
.carte li::marker { color: var(--bleu); }

.engagements { counter-reset: e; display: grid; gap: 14px; }
.engagement { display: grid; grid-template-columns: 52px 1fr; gap: 18px; align-items: start; background: #fff; border: 1px solid var(--ligne); border-radius: var(--rayon); padding: 22px 26px; }
.engagement::before { counter-increment: e; content: counter(e); display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--bleu); color: #fff; font-weight: 600; }
.engagement h3 { margin-bottom: .25em; }
.engagement p { margin: 0; color: var(--gris); }

.etapes { counter-reset: s; }
.etape { text-align: center; }
.etape::before { counter-increment: s; content: counter(s); display: grid; place-items: center; width: 30px; height: 30px; margin: 0 auto 12px; font-size: .9rem !important; border-radius: 50%; background: var(--bleu); color: #fff; font-weight: 600; font-size: 1.1rem; }
.etape:last-child::before { background: var(--marine); }
.etape p { font-size: .92rem; }
.picto { margin: 0 auto 14px; width: 72px; height: 72px; border-radius: 18px; background: #E9F4FC; color: var(--bleu); display: grid; place-items: center; }
.picto svg { width: 40px; height: 40px; }
.etape .picto + h3 { margin-top: 0; }
.capture { margin-top: 14px; aspect-ratio: 16 / 10; border-radius: 10px; border: 1px dashed #B9C7D8; background: repeating-linear-gradient(135deg, #F4F7FB, #F4F7FB 10px, #EEF3F9 10px, #EEF3F9 20px); display: grid; place-items: center; color: #8A9BB0; font-size: .8rem; }
.encadre { margin-top: 26px; background: #fff; border: 1px solid var(--ligne); border-left: 4px solid var(--bleu); border-radius: var(--rayon); padding: 20px 26px; }
.encadre b { display: block; margin-bottom: .2em; }
.encadre p { margin: 0; color: var(--gris); }

/* Le lien avec Symbifox */
.lien { background: linear-gradient(135deg, var(--marine) 0%, var(--marine-2) 100%); color: #fff; padding: 96px 0; }
.lien .phrase { font-size: clamp(1.4rem, 2.4vw, 1.9rem); line-height: 1.4; max-width: 30em; margin-bottom: 1.6em; }
.lien .phrase b { color: var(--bleu-clair); font-weight: 600; }
.schema { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; gap: 18px; align-items: stretch; margin: 10px 0 36px; }
.schema .boite { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); border-radius: var(--rayon); padding: 24px; }
.schema .boite small { display: block; text-transform: uppercase; letter-spacing: .1em; font-size: .72rem; color: var(--bleu-clair); margin-bottom: .6em; font-weight: 600; }
.schema .boite b { display: block; font-size: 1.1rem; margin-bottom: .3em; }
.schema .boite span { color: #C9D6E6; font-size: .95rem; }
.schema .fleche { display: grid; place-items: center; color: var(--bleu-clair); font-size: 1.8rem; }

/* Comparaison */
.compare { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border: 1px solid var(--ligne); border-radius: var(--rayon); overflow: hidden; background: #fff; }
.compare > div { padding: 30px; }
.compare > div + div { border-left: 1px solid var(--ligne); background: #F7FBFE; }
.compare h3 { margin-bottom: 1em; }
.compare ul { list-style: none; margin: 0; padding: 0; }
.compare li { padding: 10px 0 10px 30px; border-bottom: 1px solid var(--ligne); position: relative; color: var(--gris); }
.compare li:last-child { border-bottom: 0; }
.compare .avant li::before { content: "✕"; position: absolute; left: 4px; color: var(--rouge); }
.compare .apres li::before { content: "✓"; position: absolute; left: 4px; color: var(--vert); font-weight: 600; }
.compare .apres h3 { color: var(--bleu); }

.avantapres { display: grid; gap: 14px; }
.avantapres .l { border-radius: 12px; padding: 18px 22px; }
.avantapres .l.av { background: #FDF1F1; border: 1px solid #F3CFD1; }
.avantapres .l.ap { background: #EEF8F3; border: 1px solid #C6E8D8; }
.avantapres b { display: block; font-size: .85rem; text-transform: uppercase; letter-spacing: .08em; margin-bottom: .3em; }
.avantapres .av b { color: var(--rouge); }
.avantapres .ap b { color: var(--vert); }
.avantapres p { margin: 0; color: var(--texte); }

.deux-col { display: grid; grid-template-columns: 1.1fr 1fr; gap: 48px; align-items: start; }
.points h3 { margin-bottom: .2em; }
.points p { color: var(--gris); margin-bottom: 1.6em; }

/* Fin */
.appel { text-align: center; padding: 110px 0; background: var(--fond); }
.appel h2 { margin-bottom: .4em; }
.appel p { color: var(--gris); margin-bottom: 1.8em; }
.appel .btn.secondaire { color: var(--marine); border-color: #B9C7D8; }

.pied { background: var(--marine); color: #9FB3CA; font-size: .9rem; padding: 48px 0; }
.pied .wrap { display: flex; flex-wrap: wrap; gap: 18px 40px; align-items: center; justify-content: space-between; }
.pied a { color: #C9D6E6; }
.pied .liens { display: flex; gap: 22px; flex-wrap: wrap; }

.bandeau-maquette { background: #FFF6DB; color: #6B5300; text-align: center; font-size: .82rem; padding: 6px 12px; border-bottom: 1px solid #F0DE9E; }

@media (max-width: 900px) {
  .g3, .g5, .g2, .compare, .deux-col { grid-template-columns: 1fr; }
  .compare > div + div { border-left: 0; border-top: 1px solid var(--ligne); }
  .schema { grid-template-columns: 1fr; }
  .schema .fleche { transform: rotate(90deg); }
  .nav a:not(.btn) { display: none; }
  .heros { padding: 90px 0 100px; }
  .enonce { padding: 100px 0; }
}

/* Téléchargement */
.dl h3 { font-size: 1.3rem; }
.dl .meta { color: var(--texte); font-weight: 600; margin: 1em 0 1.2em; font-size: .95rem; }
.dl .btn { margin-bottom: 1em; }
.dl details { border-top: 1px solid var(--ligne); padding-top: .8em; }
.dl summary { cursor: pointer; color: var(--bleu); font-size: .92rem; }
.dl .sha code { font-size: .78rem; word-break: break-all; color: var(--texte); }
.dl.indispo { opacity: .8; }
.btn.inactif { background: #E3E9F0; color: #7A8AA0; cursor: default; }
.cmd { background: var(--marine); color: #D5E1EE; border-radius: 10px; padding: 16px 18px; font-size: .8rem; overflow-x: auto; margin: 0; white-space: pre; }

/* Bascule de langue, comme sur symbifox.com */
.nav a.lang-switch { font-weight: 600; font-size: .8rem; letter-spacing: .04em; color: #C9D6E6; border: 1px solid rgba(255,255,255,.25); border-radius: 999px; padding: 4px 11px; }
.nav a.lang-switch:hover { color: #fff; border-color: var(--bleu-clair); text-decoration: none; }
@media (max-width: 900px) { .nav a.lang-switch { display: inline-block; } }

/* Menu sur une seule ligne, le français est plus long que l'anglais */
.marque, .nav a { white-space: nowrap; }
.nav { gap: 16px; }
.nav a { font-size: .9rem; }
.entete .wrap { gap: 20px; }
@media (max-width: 1180px) { .nav a.pilote { display: none; } }