/* Site de presentation Dixo : meme style que l'appli (modele valide « Mes fournisseurs ») : bleu nuit, photos, tuiles, titres en cadre bleu. Pas de violet. */
:root {
  --nuit: #070d1f; --nuit2: #0c1838; --bleu: #2f6bff; --bleu-fonce: #1d4fbf; --cadre1: #0f2a63; --cadre2: #1d4fbf;
  --carte: #ffffff; --texte: #1b2430; --doux: #566579; --rouge: #e53935; --orange: #f59e0b; --vert: #10b981; --or: #e2c27d;
  --rayon: 16px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; font-family: Inter, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; color: #e8eefc; background: linear-gradient(180deg, var(--nuit) 0%, var(--nuit2) 55%, #0a1430 100%); line-height: 1.5; }
img { max-width: 100%; display: block; }
a { color: inherit; }

.haut { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; gap: 1.2rem; padding: .7rem clamp(16px, 4vw, 48px); background: rgba(7, 13, 31, .86); backdrop-filter: blur(10px); border-bottom: 1px solid rgba(255,255,255,.07); }
.marque { display: flex; align-items: center; gap: .6rem; text-decoration: none; }
.marque img { border-radius: 10px; }
.marque span { display: flex; flex-direction: column; line-height: 1.1; }
.nom-marque { font-family: Cinzel, 'Trajan Pro', Georgia, serif; letter-spacing: .32em; font-size: 1.15rem; background: linear-gradient(170deg, #FBEFC6 0%, #E2C27D 40%, #C39A4A 70%, #E9CF8C 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.marque small { color: #9fb0d6; font-size: .72rem; }
.liens { display: flex; gap: 1.2rem; margin-left: auto; }
.liens a { text-decoration: none; color: #c9d5f2; font-weight: 500; }
.liens a:hover { color: #fff; }

.bouton { display: inline-flex; align-items: center; gap: .5rem; padding: .8rem 1.3rem; border-radius: 12px; font-weight: 700; text-decoration: none; border: 1px solid transparent; }
.bouton.principal { background: linear-gradient(135deg, #3b7bff, var(--bleu-fonce)); color: #fff; box-shadow: 0 6px 24px rgba(47, 107, 255, .45); }
.bouton.secondaire { background: rgba(255,255,255,.08); color: #fff; border-color: rgba(255,255,255,.25); }
.bouton.grand { font-size: 1.1rem; padding: 1rem 1.6rem; }
.petit-bouton { padding: .55rem 1rem; }

main { padding: 0 clamp(16px, 4vw, 48px); max-width: 1320px; margin: 0 auto; }

/* Bandeau photo */
.bandeau { position: relative; margin: 1.6rem 0 2.2rem; border-radius: 18px; overflow: hidden; min-height: 460px; display: grid; grid-template-columns: 1.4fr 1fr; align-items: center; gap: 2rem; padding: clamp(24px, 4vw, 56px);
  background: linear-gradient(90deg, rgba(5, 10, 28, .94) 0%, rgba(5, 10, 28, .78) 42%, rgba(5, 10, 28, .15) 75%), var(--photo) 68% center / cover; box-shadow: 0 20px 60px rgba(0,0,0,.45); }
.etiquette { display: inline-block; margin: 0 0 .8rem; padding: .3rem .8rem; border-radius: 99px; background: rgba(47,107,255,.22); color: #bcd0ff; font-weight: 600; font-size: .85rem; }
.bandeau h1 { font-size: clamp(2rem, 4.4vw, 3.6rem); line-height: 1.05; margin: 0 0 1rem; font-weight: 800; color: #fff; }
.bandeau h1 span { color: var(--or); }
.sous-titre { font-size: 1.15rem; color: #d6e0f8; max-width: 34em; margin: 0 0 1.6rem; }
.actions { display: flex; gap: .8rem; flex-wrap: wrap; }
.tuiles { display: grid; gap: .8rem; justify-self: end; width: min(100%, 330px); }
.tuile { display: flex; gap: .9rem; align-items: center; padding: .9rem 1rem; border-radius: 14px; background: rgba(10, 20, 50, .72); border: 1px solid rgba(255,255,255,.12); backdrop-filter: blur(6px); }
.tuile b { display: block; font-size: 1.2rem; color: #fff; }
.tuile small { color: #b7c4e6; }
.ic { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; font-style: normal; font-weight: 800; font-size: 1.2rem; flex: none; color: #fff; }
.ic.bleu { background: #2f6bff; } .ic.vert { background: var(--vert); } .ic.orange { background: var(--orange); } .ic.cyan { background: #0891b2; }

/* Blocs */
.bloc { margin: 0 0 2.6rem; scroll-margin-top: 80px; }
.titre-cadre { margin: 0 0 1rem; padding: .85rem 1.2rem; border-radius: 14px; color: #fff; font-size: 1.25rem; background: linear-gradient(90deg, var(--cadre1), var(--cadre2)); box-shadow: 0 6px 20px rgba(15, 42, 99, .4); }
.carte { background: var(--carte); color: var(--texte); border-radius: var(--rayon); padding: 1.2rem; box-shadow: 0 10px 30px rgba(0,0,0,.25); }
.deux { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; align-items: start; }
.etapes { margin: 0; padding-left: 1.3rem; display: grid; gap: .9rem; font-size: 1.05rem; }
.note { margin: 1rem 0 0; padding: .8rem 1rem; border-radius: 12px; background: #eaf1ff; color: #1d3f8f; }
.captures-tel { display: grid; grid-template-columns: 200px 1fr; gap: 1rem; align-items: center; }
.telephone { margin: 0; padding: 8px; border-radius: 34px; background: #0a0c12; border: 2px solid #5a6482; box-shadow: 0 16px 40px rgba(0,0,0,.5); }
.telephone img { border-radius: 26px; }
.ecran-pc { margin: 0; }
.ecran-pc img { border-radius: 12px; border: 2px solid #3b4a75; box-shadow: 0 16px 40px rgba(0,0,0,.45); }
figcaption { text-align: center; color: #b7c4e6; font-size: .9rem; margin-top: .5rem; }
.carte figcaption { color: var(--doux); }
.bande-appareils { display: grid; grid-template-columns: 220px 1fr; gap: 1.4rem; align-items: center; margin-top: 1.2rem; }
.bande-appareils img { border-radius: 18px; border: 6px solid #0a0c12; }
.bande-appareils h3 { margin: 0 0 .4rem; font-size: 1.3rem; }

.grille { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.1rem; }
.fonction { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.fonction img { aspect-ratio: 16 / 10; object-fit: cover; object-position: top left; border-bottom: 1px solid #e3e9f3; }
.fonction h3 { margin: .9rem 1rem .3rem; font-size: 1.1rem; }
.fonction p { margin: 0 1rem 1.1rem; color: var(--doux); font-size: .95rem; }
.rouge { color: var(--rouge); }

.videos video { width: 100%; border-radius: 10px; background: #000; }
.faq details { padding: .8rem 0; border-bottom: 1px solid #e3e9f3; }
.faq details:last-child { border-bottom: none; }
.faq summary { font-weight: 700; cursor: pointer; font-size: 1.05rem; }
.faq p { margin: .5rem 0 0; color: var(--doux); }

.appel { display: flex; justify-content: space-between; align-items: center; gap: 1.5rem; flex-wrap: wrap; padding: clamp(24px, 4vw, 48px); border-radius: 18px; background: linear-gradient(90deg, rgba(5,10,28,.92), rgba(5,10,28,.5)), var(--photo) center / cover; }
.appel h2 { margin: 0; font-size: 2rem; color: #fff; }
.appel p { margin: .3rem 0 0; color: #d6e0f8; }

.bas { padding: 1.6rem clamp(16px, 4vw, 48px) 2.4rem; border-top: 1px solid rgba(255,255,255,.08); max-width: 1320px; margin: 0 auto; }
.bas-ligne { display: flex; gap: 1.4rem; flex-wrap: wrap; align-items: center; color: #c9d5f2; }
.bas-ligne a { color: #9fb0d6; }
.protection { margin: 1rem 0 0; font-size: .82rem; color: #8e9cc0; }
.mentions { margin-top: 1rem; }

@media (max-width: 1100px) { .grille { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 760px) {
  .liens { display: none; }
  .bandeau { grid-template-columns: 1fr; min-height: 0; background: linear-gradient(180deg, rgba(5,10,28,.65), rgba(5,10,28,.95)), var(--photo) 68% center / cover; }
  .tuiles { justify-self: stretch; width: 100%; grid-auto-flow: column; grid-auto-columns: 78%; overflow-x: auto; }
  .deux, .bande-appareils { grid-template-columns: 1fr; }
  .captures-tel { grid-template-columns: 1fr; justify-items: center; }
  .telephone { width: 230px; }
  .grille { grid-template-columns: 1fr; }
  .actions .bouton { width: 100%; justify-content: center; }
}
.contact { display: grid; gap: .6rem; justify-items: start; }
.adresse { margin: 0; color: #d6e0f8; font-size: .95rem; }
.copier { margin-left: .4rem; padding: .25rem .7rem; border-radius: 8px; border: 1px solid rgba(255,255,255,.35); background: rgba(255,255,255,.1); color: #fff; cursor: pointer; font: inherit; }

/* 26/10 : Telecharger et installer + aide licence */
.telecharger { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.1rem; }
.telecharger h3, .installer h3, .cle h3 { margin: 0 0 .5rem; }
.telecharger p { margin: 0; color: var(--doux); }
.telecharger small { font-weight: 400; opacity: .85; }
.grille.trois { grid-template-columns: repeat(3, 1fr); }
.installer .etapes { font-size: .98rem; gap: .6rem; }
.cle { margin-top: 1.1rem; }
.cle p { margin: .3rem 0 .6rem; }
.cle details { margin-top: .4rem; border-top: 1px solid #e3e9f3; padding-top: .6rem; }
.cle summary { font-weight: 700; cursor: pointer; font-size: 1.05rem; color: #b42318; }
.cle ul { margin: .6rem 0 0; padding-left: 1.2rem; display: grid; gap: .45rem; color: var(--doux); }
@media (max-width: 900px) { .grille.trois { grid-template-columns: minmax(0, 1fr); } }

/* 26/10 : partenaires (negoces) */
.bande-agence { --enseigne: #0b5a3c; padding: .7rem clamp(16px, 4vw, 48px); background: var(--enseigne); color: #fff; text-align: center; font-size: 1.02rem; box-shadow: inset 0 -3px 0 rgba(0,0,0,.18); }
.bande-agence b { font-weight: 800; }
.quatre-etapes { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.etape-carte { position: relative; padding-top: 1.6rem; }
.etape-carte h3 { margin: .2rem 0 .4rem; font-size: 1.1rem; }
.etape-carte p { margin: 0; color: var(--doux); }
.numero { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: linear-gradient(135deg, #3b7bff, var(--bleu-fonce)); color: #fff; font-weight: 800; font-size: 1.2rem; }
.simulateur label { font-weight: 700; font-size: 1.05rem; }
.simulateur input[type=range] { width: 100%; margin: .9rem 0 1.1rem; accent-color: var(--bleu); }
.resultats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .8rem; }
.resultats div { padding: 1rem; border-radius: 14px; background: #eaf1ff; text-align: center; }
.resultats small { display: block; color: var(--doux); }
.resultats b { font-size: clamp(1.3rem, 3vw, 1.9rem); color: #0f2a63; }
.plus-longtemps { margin: 1rem 0 0; color: #0b5a3c; }
.liste-points { margin: 0 0 1rem; padding-left: 1.2rem; display: grid; gap: .55rem; }
.texte h3 { margin-top: 0; }
.apercu-panneau { margin: 0; }
.apercu-panneau img { border-radius: 10px; }
.panneau-vide { display: grid; gap: .4rem; place-content: center; text-align: center; min-height: 240px; border-radius: 10px; border: 2px dashed #b9c6e0; color: var(--doux); padding: 1rem; }
.panneau-vide b { color: var(--texte); font-size: 1.15rem; }
.petit { font-size: .9rem; color: var(--doux); margin: .9rem 0 0; }
.petit.clair { color: #b7c4e6; }
.entete-page { margin-top: 1.8rem; }
.entete-page h1 { font-size: clamp(1.8rem, 4vw, 2.8rem); margin: 0 0 .6rem; color: #fff; }
.format { display: grid; gap: .3rem; justify-items: start; text-align: left; cursor: pointer; border: 3px solid transparent; font: inherit; }
.format.choisi { border-color: var(--bleu); box-shadow: 0 0 0 4px rgba(47,107,255,.25), 0 10px 30px rgba(0,0,0,.25); }
.format .badge { font-size: .8rem; font-weight: 700; color: #b42318; min-height: 1.2em; }
.format b { font-size: 1.2rem; }
.format .taille { font-size: 1.5rem; font-weight: 800; color: #0f2a63; }
.format .prix { font-weight: 700; color: var(--texte); }
.format small { color: var(--doux); }
.formulaire { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .9rem 1.2rem; }
.formulaire label { display: grid; gap: .3rem; font-weight: 600; font-size: .95rem; }
.formulaire input, .formulaire textarea { font: inherit; padding: .65rem .8rem; border-radius: 10px; border: 1px solid #c8d3e6; background: #f7f9fd; color: var(--texte); width: 100%; }
.formulaire .large { grid-column: 1 / -1; }
.formulaire .case { display: flex; gap: .6rem; align-items: flex-start; font-weight: 500; }
.formulaire .case input { width: auto; margin-top: .3rem; }
.fin-formulaire { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; }
.recap { margin: 0; font-weight: 700; }
button.bouton { cursor: pointer; font: inherit; font-weight: 700; }
@media (max-width: 1100px) { .quatre-etapes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) { .quatre-etapes, .resultats, .formulaire { grid-template-columns: minmax(0, 1fr); } }
.deux > * { min-width: 0; } .carte video { max-width: 100%; width: 100%; display: block; border-radius: 10px; background: #000; }
[hidden] { display: none !important; }