/* =========================================================
   Aurabana, surcharge du theme NextSaaS (security-software).
   Meme methode que la landing LinkAfr : la feuille compilee du modele reste
   intacte, on recolore seulement ses variables et son degrade de heros.
   Le violet du modele devient le turquoise profond Aurabana (#2F7D7A, lisible
   sur blanc) ; le vert citron d'accent devient le turquoise clair (#66CCCC).
   ========================================================= */
:root, :host {
  --color-primary-50: #eef9f9;
  --color-primary-200: #cdeded;
  --color-primary-400: #54AFAC;
  --color-primary-500: #2F7D7A;
  --color-primary-600: #256462;
  --color-ns-green: #66CCCC;
  --color-ns-green-light: #cdeded;
  --color-ns-cyan: #66CCCC;
  --color-ns-cyan-light: #eef9f9;
  --color-gradient-6: linear-gradient(#66CCCC 0%, #cdeded 100%);
  --color-gradient-7: linear-gradient(#fff 0%, #66CCCC 100%);
}

/* Le degrade violet -> peche du heros devient turquoise -> presque blanc. */
.bg-linear-\[180deg\,\#a585ff_0\%\,\#ffc2ac_100\%\] { background-image: linear-gradient(180deg, #66CCCC 0%, #e3f5f5 100%); }
.dark .bg-linear-\[180deg\,\#a585ff_0\%\,\#ffc2ac_100\%\] { background-image: linear-gradient(180deg, #2F7D7A 0%, #13171e 100%); }

/* Sur le heros turquoise clair, le texte « accent » (blanc dans le modele) doit etre sombre. */
.hero-section .text-accent { color: #221F26; }
.hero-section .text-accent\/60 { color: rgba(34, 31, 38, 0.66); }
.hero-section .bg-accent\/20 { background-color: rgba(34, 31, 38, 0.18); }
.hero-section .badge-secondary-light { background-color: rgba(34, 31, 38, 0.12); color: #221F26; }
.hero-section svg path[fill="white"] { fill: #221F26; }
.dark .hero-section .text-accent { color: #fcfcfc; }
.dark .hero-section .text-accent\/60 { color: rgba(252, 252, 252, 0.6); }
.dark .hero-section .bg-accent\/20 { background-color: rgba(252, 252, 252, 0.2); }
.dark .hero-section .badge-secondary-light { background-color: rgba(26, 26, 28, 0.2); color: #f4f2fe; }
.dark .hero-section svg path[fill="white"] { fill: #fff; }

/* Les boutons du modele forcent les minuscules : nos libelles gardent leur majuscule. */
.btn { text-transform: none; }

/* Logos des outils dans la ligne de confiance du heros (a la place des avatars). */
.pastille-outil { background: #fff; display: inline-flex; align-items: center; justify-content: center; }
.pastille-outil img { width: 24px; height: 24px; }

/* Pile de cartes du compte (section « Le compte »), a la place de l'image grise de la demo. */
.pile { display: grid; gap: 14px; width: 100%; max-width: 460px; margin-inline: auto; }
.pile-carte { background: #fff; border: 1px solid var(--color-stroke-2); border-radius: 16px; padding: 18px 20px; box-shadow: 0 14px 30px -18px rgba(26,26,28,.25); }
.dark .pile-carte { background: var(--color-background-6); border-color: var(--color-stroke-6); }
.pile-carte:nth-child(2) { margin-left: 28px; }
.pile-carte:nth-child(3) { margin-left: 56px; }
.pile-carte:nth-child(4) { margin-left: 28px; }
.pile-entete { display: flex; align-items: center; gap: 14px; }
.pile-icone { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; font-size: 22px; flex-shrink: 0; }
.pile-icone img { width: 24px; height: 24px; }
.pile-titre { margin: 0; font-size: 15px; font-weight: 500; color: var(--color-secondary); line-height: 1.3; }
.dark .pile-titre { color: var(--color-accent); }
.pile-texte { margin: 2px 0 0; font-size: 13px; color: #6f6c78; line-height: 1.4; }
.pile-lignes { display: flex; gap: 8px; margin-top: 12px; }
.pile-lignes span { height: 6px; border-radius: 999px; background: #eef9f9; flex: 1; }
.pile-lignes span:first-child { background: #66CCCC; flex: 2; }
@media (max-width: 640px) { .pile-carte:nth-child(n) { margin-left: 0; } }

/* En mode clair, le heros est clair : l'en-tete en pilule doit passer en encre
   (dans la demo il est blanc sur un heros violet). */
html:not(.dark) .header-two { background-color: rgba(26, 26, 28, 0.06); }
html:not(.dark) .header-two a.text-accent\/90 { color: rgba(26, 26, 28, 0.85); }
html:not(.dark) .header-two a.text-accent\/90:hover { color: #1a1a1c; }
html:not(.dark) .header-two .nav-hamburger { background-color: rgba(26, 26, 28, 0.08); }

/* Appel final : le fond degrade en image du modele est remplace par un halo en CSS. */
.cta-gradient { background: radial-gradient(circle at 50% 50%, rgba(102, 204, 204, 0.32) 0%, rgba(102, 204, 204, 0.08) 38%, rgba(102, 204, 204, 0) 62%); }
/* Mode clair : le bouton « Se connecter » du heros (blanc translucide dans le modele) passe en encre translucide. */
html:not(.dark) .hero-section .btn-dark { background-color: rgba(26, 26, 28, 0.08); color: #1a1a1c; }
html:not(.dark) .hero-section .btn-dark:hover { background-color: #1a1a1c; color: #fff; }
/* Illustrations du heros (unDraw) : dessins sur fond transparent, a leur taille. */
.hero-section figure img[src*="illu-"] { width: 100%; height: auto; }

/* Cartes « nos solutions », d'apres les cartes produits d'Axa Zara : carte blanche
   rayon 24, grand bloc pastel avec le logo, etiquette et titre en turquoise profond,
   texte gris, bouton « Decouvrir » en contour avec fleche. */
.solution { background: #fff; border-radius: 24px; padding: 24px 24px 28px; height: 100%; display: flex; flex-direction: column; align-items: flex-start; }
.dark .solution { background: var(--color-background-9); }
.solution-fond { width: 100%; height: 300px; border-radius: 20px; display: flex; align-items: center; justify-content: center; margin-bottom: 28px; }
.solution-logo { display: inline-flex; align-items: center; gap: 18px; }
.solution-logo img { width: 84px; height: 84px; border-radius: 22px; }
.solution-nom { font-size: 64px; font-weight: 700; letter-spacing: -0.03em; color: #1a1a1c; line-height: 1; }
/* Trois cartes par rangee a partir de 768 px : le logo et le nom a 64 px debordaient du bloc de couleur
   (« cartflox » et « LinkAfr » sortaient a droite). Tailles qui suivent la largeur, dans le bloc. */
@media (min-width: 768px) {
  .solution-logo { gap: clamp(10px, 1vw, 14px); }
  .solution-logo img { width: clamp(40px, 4.4vw, 64px); height: clamp(40px, 4.4vw, 64px); border-radius: clamp(12px, 1.3vw, 18px); }
  .solution-nom { font-size: clamp(30px, 3.4vw, 48px); }
  /* Cinq outils : la deuxieme rangee (deux cartes) est centree. */
  .solution-centre { grid-column-start: 3; }
}
.solution-etiquette { font-size: 16px; line-height: 1.5; color: #2F7D7A; margin: 0 0 6px; }
.solution-titre { font-size: 28px; line-height: 34px; font-weight: 700; letter-spacing: -0.7px; color: #2F7D7A; margin: 0 0 16px; }
.dark .solution-etiquette, .dark .solution-titre { color: #66CCCC; }
.solution-texte { font-size: 16px; line-height: 27px; color: #556272; margin: 0 0 24px; flex: 1; }
.dark .solution-texte { color: rgba(252, 252, 252, 0.6); }
.solution-bouton { display: inline-flex; align-items: center; gap: 10px; height: 50px; padding: 0 21px 0 32px; border-radius: 12px; border: 1px solid #2F7D7A; color: #2F7D7A; font-size: 14px; font-weight: 600; text-decoration: none; transition: background .2s; }
.solution-bouton:hover { background: #eef9f9; }
.dark .solution-bouton { border-color: #66CCCC; color: #66CCCC; }
.dark .solution-bouton:hover { background: rgba(102, 204, 204, 0.12); }
@media (max-width: 640px) { .solution-fond { height: 200px; } .solution-nom { font-size: 40px; } .solution-logo img { width: 56px; height: 56px; border-radius: 14px; } }

/* Tailles des illustrations du heros (absentes de la feuille compilee du modele). */
@media (min-width: 1024px) { .lg\:max-w-\[270px\] { max-width: 270px; } .lg\:max-w-\[300px\] { max-width: 300px; } }
@media (min-width: 1280px) { .xl\:max-w-\[340px\] { max-width: 340px; } }
@media (min-width: 1536px) { .\32 xl\:max-w-\[360px\] { max-width: 360px; } }

/* Heros : entre 1024 et 1535 px, l'illustration de droite (plus grande que dans la demo)
   passait sur la ligne « Un compte pour ... » sous les boutons. Plus petite et plus a droite ici. */
@media (min-width: 1024px) and (max-width: 1535px) {
  .hero-section figure:has(img[src$="illu-authentification.svg"]) { right: 3%; max-width: 250px; }
}

/* Un exemple d'utilisation, en schema (30/09/2026). Six etapes : colonne sur telephone,
   serpentin 1 2 3 / 6 5 4 sur ordinateur. Fleches en pseudo-elements, couleur #54AFAC. */
/* Meme fond que la section des outils juste au-dessus : peu de marge en haut. */
.schema-section { padding: 10px 0 25px; }
@media (min-width: 768px) { .schema-section { padding: 10px 0 25px; } }
@media (min-width: 1024px) { .schema-section { padding: 30px 0 100px; } }
@media (min-width: 1280px) { .schema-section { padding: 30px 0 50px; } }
.schema-surtitre { font-size: 16px; line-height: 24px; font-weight: 600; color: #2F7D7A; margin: 0; }
.dark .schema-surtitre { color: #66CCCC; }
.schema-etapes { list-style: none; margin: 0 auto; padding: 0; max-width: 560px; display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 56px; }
.schema-etape { position: relative; background: #fff; border: 1px solid #e6e8ec; border-radius: 20px; padding: 24px; display: flex; flex-direction: column; gap: 10px; }
.dark .schema-etape { background: var(--color-background-9); border-color: rgba(255, 255, 255, 0.08); }
.schema-tete { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.schema-numero { display: inline-flex; align-items: center; height: 30px; padding: 0 12px; border-radius: 999px; background: #eef9f9; color: #2F7D7A; font-size: 14px; font-weight: 600; }
.dark .schema-numero { background: rgba(102, 204, 204, 0.15); color: #66CCCC; }
.schema-logos { display: inline-flex; gap: 6px; }
.schema-logos img { width: 30px; height: 30px; border-radius: 8px; }
.schema-titre { font-size: 20px; line-height: 28px; font-weight: 600; letter-spacing: -0.3px; color: #1a1a1c; margin: 4px 0 0; }
.dark .schema-titre { color: #fcfcfc; }
.schema-texte { font-size: 15px; line-height: 25px; color: #556272; margin: 0; }
.dark .schema-texte { color: rgba(252, 252, 252, 0.6); }
/* Fleches : vers le bas entre deux etapes (telephone). */
.schema-etape::before, .schema-etape::after { content: ""; position: absolute; pointer-events: none; }
.schema-etape:not(:last-child)::before { left: 50%; bottom: -46px; width: 2px; height: 34px; background: #54AFAC; transform: translateX(-50%); }
.schema-etape:not(:last-child)::after { left: 50%; bottom: -46px; width: 11px; height: 11px; border-right: 2px solid #54AFAC; border-bottom: 2px solid #54AFAC; transform: translateX(-50%) rotate(45deg); }
@media (min-width: 1024px) {
  .schema-etapes { max-width: 1100px; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 72px; row-gap: 72px; }
  .schema-etapes > li:nth-child(1) { grid-column: 1; grid-row: 1; }
  .schema-etapes > li:nth-child(2) { grid-column: 2; grid-row: 1; }
  .schema-etapes > li:nth-child(3) { grid-column: 3; grid-row: 1; }
  .schema-etapes > li:nth-child(4) { grid-column: 3; grid-row: 2; }
  .schema-etapes > li:nth-child(5) { grid-column: 2; grid-row: 2; }
  .schema-etapes > li:nth-child(6) { grid-column: 1; grid-row: 2; }
  /* 1 et 2 : vers la droite */
  .schema-etapes > li:nth-child(-n+2)::before { left: auto; right: -58px; top: 50%; bottom: auto; width: 44px; height: 2px; transform: translateY(-50%); }
  .schema-etapes > li:nth-child(-n+2)::after { left: auto; right: -58px; top: 50%; bottom: auto; border-bottom: 0; border-top: 2px solid #54AFAC; border-right: 2px solid #54AFAC; transform: translateY(-50%) rotate(45deg); }
  /* 3 : vers le bas (la regle du telephone, plus longue) */
  .schema-etapes > li:nth-child(3)::before { bottom: -60px; height: 48px; }
  .schema-etapes > li:nth-child(3)::after { bottom: -60px; }
  /* 4 et 5 : vers la gauche */
  .schema-etapes > li:nth-child(4)::before, .schema-etapes > li:nth-child(5)::before { left: -58px; top: 50%; bottom: auto; width: 44px; height: 2px; transform: translateY(-50%); }
  .schema-etapes > li:nth-child(4)::after, .schema-etapes > li:nth-child(5)::after { left: -58px; top: 50%; bottom: auto; border-right: 0; border-top: 0; border-bottom: 2px solid #54AFAC; border-left: 2px solid #54AFAC; transform: translateY(-50%) rotate(45deg); }
}
/* En sombre, les logos foncés (Wapilot, LinkAfr) disparaissaient sur la carte : petite tuile blanche. */
.dark .schema-logos img { background: #fff; padding: 3px; }