/*----------------------------------------*/
/*  Magma — surcouche de marque pour landing-magma_V2.html
/*  Chargée après main.css et sora.css : ne modifie pas le template Orisa.
/*----------------------------------------*/
:root,
[data-bs-theme=dark] {
  --at-theme-primary: #0E3B34;
  --at-theme-primary-rgb: 14, 59, 52;
  --magma-teal: #287F71;
  --magma-teal-dark: #1C685B;
  --magma-teal-deep: #0E3B34;
  --magma-teal-soft: rgba(40, 127, 113, 0.1);
  --magma-orange: #F48221;
}

/* Logo */
.magma-logo {
  height: 32px;
  width: auto;
}
.magma-logo--white {
  filter: brightness(0) invert(1);
}
/* Header mobile : symbole seul */
.magma-logo-symbol {
  height: 32px;
  width: auto;
}

/* Header : bouton Se connecter */
.magma-login-btn {
  display: inline-flex;
  align-items: center;
  padding: 10px 20px;
  border-radius: 100px;
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  color: #fff;
  background-color: var(--magma-teal-deep);
  transition: background-color 0.3s;
}
.magma-login-btn:hover {
  color: #fff;
  background-color: var(--magma-teal);
}
@media (max-width: 767.98px) {
  .magma-login-btn {
    padding: 9px 16px;
    font-size: 14px;
  }
}

/* Captures d'écran de l'application dans les cadres du template */
.magma-shot {
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: left top;
     object-position: left top;
}

/* Fonctionnalités : cadre et cartes sur fond teal profond, texte blanc */
.at-service-area.bg-neutral-50,
.at-service-area .scroll-section .item > .container.bg-neutral-50 {
  background-color: var(--magma-teal-deep) !important;
}
.at-service-area,
.at-service-area .neutral-950,
.at-service-area h1 a,
.at-service-area .common-black,
.at-service-area .fs-font-md {
  color: #fff !important;
}
.at-service-area .at-about-border {
  border-color: rgba(255, 255, 255, 0.2) !important;
}

/* Fonctionnalités : texte collé au titre (le template les écarte avec justify-content-between) */
.scroll-section .item .col-lg-6 > .d-flex.justify-content-between {
  justify-content: center !important;
  gap: 24px;
}
.scroll-section .item .col-lg-6 > .d-flex.justify-content-between > h1 {
  padding-bottom: 0 !important;
}

/* Cartes modules : fond teal uni, texte blanc (plus de capture ni de dégradé) */
.alt-portfolio-thumb {
  background-color: var(--magma-teal);
  aspect-ratio: 4 / 3;
}
.alt-portfolio-thumb::before {
  content: none;
}
.alt-portfolio-btn {
  transform: none;
}
.alt-portfolio-btn .des {
  opacity: 1;
  visibility: visible;
}

/* Mots à la place des logos de marques (bandeaux défilants) */
.magma-ticker-word {
  display: inline-flex;
  align-items: center;
  gap: 24px;
  padding: 0 24px;
  font-size: 28px;
  font-weight: 700;
  white-space: nowrap;
  color: var(--at-neutral-900);
}
.magma-ticker-word::after {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--magma-orange);
}
.sec-6-home-12 .magma-ticker-word {
  color: #fff;
}
.sec-6-home-12__brand-slide {
  width: auto;
}
@media (max-width: 767.98px) {
  .magma-ticker-word {
    font-size: 18px;
    gap: 12px;
    padding: 0 10px;
  }
}

/* Hero : bandeau géant + bouton */
.sec-1-home-10__big-title {
  color: var(--magma-teal-deep);
}
.sec-1-home-10__big-title .magma-dot {
  color: var(--magma-orange);
}
.sec-1-home-10__btn-label,
.sec-1-home-10__btn-circle {
  background-color: var(--magma-teal-deep);
}
.sec-1-home-10__btn-launch:hover .sec-1-home-10__btn-label,
.sec-1-home-10__btn-launch:hover .sec-1-home-10__btn-circle {
  background-color: var(--magma-teal);
}
.sec-1-home-10__left {
  max-width: clamp(320px, 52vw, 780px);
}
.sec-1-home-10__desc {
  font-size: clamp(32px, 6.6vw, 80px);
}
/* Hero : capture de l'app à droite, coupée par le bord droit de l'écran */
.magma-hero-shot {
  position: absolute;
  top: 0;
  left: 56vw;
  width: max(60vw, 560px);
  margin: 0;
  pointer-events: none;
}
.magma-hero-shot__frame {
  overflow: hidden;
  border-radius: 16px 0 0 16px;
  border: 1px solid var(--at-neutral-100);
  border-right: 0;
  box-shadow: 0 30px 80px -20px rgba(14, 59, 52, 0.25);
}
/* Calque à la taille exacte de la capture : repère des positions en % */
.magma-hero-shot__canvas {
  position: relative;
  container-type: inline-size;
}
.magma-hero-shot__canvas > img {
  display: block;
  width: 100%;
  height: auto;
}
/* Mobile : capture sous le texte, collée au bas du hero, coupée à droite et en bas */
@media (max-width: 767.98px) {
  .sec-1-home-10__mid {
    justify-content: flex-start;
  }
  .magma-hero-shot {
    position: relative;
    top: auto;
    left: auto;
    width: 170vw;
    margin-top: auto;
    padding-top: 40px;
  }
  .magma-hero-shot__frame {
    aspect-ratio: 1600 / 760;
    border-radius: 14px 0 0 0;
    border-bottom: 0;
  }
}
/* Positions en % de la capture 1600×1000 */
.magma-hero-shot__cards {
  position: absolute;
  inset: 0;
}
.magma-hero-shot__card {
  position: absolute;
  top: 16.4%;
  left: calc((288% + var(--i) * 324%) / 16);
  width: 19.25%;
  height: 15.1%;
  background: url("../imgs/hero-dashboard-cards.webp") no-repeat;
  background-size: 415.58% 100%;
  background-position: calc(var(--i) * 100% / 3) 0;
}
.magma-hero-shot__num {
  position: absolute;
  left: 7.8%;
  top: 54.5%;
  font-family: Inter, "Segoe UI", Roboto, system-ui, sans-serif;
  font-size: 1.5cqw;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.01em;
  white-space: nowrap;
  color: #12182B;
}
.magma-hero-shot__chart {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.magma-hero-shot__line {
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}
@media (min-width: 768px) {
  .sec-1-home-10__left {
    max-width: calc(56vw - clamp(20px, 6.7vw, 96px) - 32px);
  }
}
@media (max-width: 767.98px) {
  .sec-1-home-10 {
    min-height: 85vh;
    min-height: 85svh;
  }
  .sec-1-home-10__mid {
    justify-content: center;
  }
  .sec-1-home-10__left {
    max-width: 100%;
  }
}

/* Boutons du template : noir → teal */
.at-btn:not(.bg-transparent),
.at-btn-group .at-btn-circle,
.at-btn-group:hover > *:nth-child(2),
.at-btn-group:hover > *:nth-child(3),
.sec-5-home-10__cta,
.sec-6-home-10__cta {
  background-color: var(--magma-teal-deep);
}
.at-btn:not(.bg-transparent):hover,
.sec-5-home-10__cta:hover,
.sec-6-home-10__cta:hover {
  background-color: var(--magma-teal);
}

/* Badge « Parlons-en » (SVG noir) teinté en teal profond (~#0E3B34) */
.at-btn > img[src$="badge-1.svg"] {
  filter: invert(17%) sepia(23%) saturate(1385%) hue-rotate(122deg) brightness(93%) contrast(92%);
}

/* Accents */
.sec-5-home-10__stat-value,
.card-award-date {
  color: var(--magma-teal-deep);
}
.sec-6-home-10__eyebrow-text,
.sec-5-home-10__eyebrow-text {
  color: var(--magma-teal-deep);
}

/* Tarifs : carte mise en avant */
.home-2-pricing-card--popular .home-2-pricing-card__body {
  background: var(--magma-teal-soft);
}
.home-2-pricing-card__badge {
  background: var(--magma-orange);
}

/* Fonds sombres : noir → teal profond (le footer garde le noir du template) */
.sec-6-home-12 {
  background-color: var(--magma-teal-deep) !important;
}

/* Popup vidéo de démo (magma.js) */
.magma-video-popup {
  position: relative;
  /* 90 % de l'écran, borné par la hauteur pour garder le 16:9 */
  width: min(90vw, 90vh * 16 / 9);
  margin: 0 auto;
}
.magma-video-popup video {
  display: block;
  width: 100%;
  max-height: 90vh;
  border-radius: 12px;
  background: #000;
}

/* Section phrase (Home 2 s5) : avatars décoratifs, ni cliquables ni glissables */
.sec-5-home-2 .slider-testimonial-thumbs {
  pointer-events: none;
}

/* Bandeau « Pour tous les commerces » : mots rapprochés (vendor : margin 0 100px) */
.sec-3-home-2 .carouselTicker__item,
.sec-5-home-10 .carouselTicker__item {
  margin: 0;
}
.sec-3-home-2 .magma-ticker-word,
.sec-5-home-10 .magma-ticker-word,
.sec-6-home-12 .magma-ticker-word {
  gap: 20px;
  padding: 0 12px;
}

/* Cadre « Nos modules métier » : fond vert très clair */
.alt-portfolio-area.bg-neutral-50 {
  background-color: #ECFDF5 !important;
}
.alt-portfolio-main-title {
  color: #007A55;
  line-height: .95;
}

/* Navbar collée en haut (le header est hors de #smooth-wrapper : fixed fonctionne).
   Transparente en haut de page, fond dès que main.js ajoute .header-sticky au scroll. */
.at-header-area.header-transparent {
  position: fixed;
  z-index: 99;
  background-color: transparent;
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
}
.at-header-area.header-transparent.header-sticky {
  background-color: rgba(255, 255, 255, 0.92);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  box-shadow: 0 1px 0 rgba(14, 59, 52, 0.08);
}
[data-bs-theme=dark] .at-header-area.header-transparent.header-sticky {
  background-color: rgba(15, 15, 15, 0.92);
}

/* Symbole Magma à la place du cube du template (animé par magma.js) */
.magma-mark {
  position: relative;
  transform: translateY(-100px);
}
.magma-mark__svg {
  display: block;
  overflow: visible;
}

/* Pourquoi Magma : l'image passe par-dessus le titre épinglé (main.js le met en z-index 3) */
.sec-5-home-10__figure {
  z-index: 4;
}
/* Bouteille en verre dépoli : l'image devient translucide et un calque, découpé
   à sa forme, floute le titre qu'elle survole. Rien de parent ne doit porter
   filter / opacity < 1 / mask, sinon le flou ne voit plus le titre. */
.sec-5-home-10__figure .sec-5-home-10__figure-img {
  position: relative;
  opacity: 0.6;
}
.magma-bottle-glass {
  position: absolute;
  inset: 0;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  -webkit-mask: url("../imgs/sec-5-wireframe-head_botle.webp") center / 100% 100% no-repeat;
  mask: url("../imgs/sec-5-wireframe-head_botle.webp") center / 100% 100% no-repeat;
}
/* Bouchon posé sur le goulot (calé sur l'image 960×1279), ouvert/fermé par magma.js */
.magma-bottle-cap {
  position: absolute;
  left: 35%;
  top: 4.93%;
  width: 25.83%;
  height: auto;
}

/* Contact : bouton du formulaire en casse normale (le template force capitalize) */
.sec-4-about-form__btn,
.sec-4-about-form__btn span {
  text-transform: none !important;
}

/* Contact : champ piège anti-bot, hors écran (pas display:none, que certains bots repèrent) */
.magma-hp {
  position: absolute !important;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.sec-4-about-form__status {
  margin: 0;
  min-height: 1.5em;
  font-size: 15px;
}
.sec-4-about-form__status.is-error { color: #dc2626; }
.sec-4-about-form__status.is-success { color: var(--magma-accent-text); }
.sec-4-about-form.is-sending .sec-4-about-form__btn { opacity: .6; pointer-events: none; }

/* Panneau burger (mobile / tablette) : menu seul, liens en grand */
.at-offcanvas .at-offcanvas-menu ul li > a {
  padding: 10px 0;
  font-size: clamp(32px, 7vw, 44px);
  line-height: 1.15;
  letter-spacing: -0.03em;
}

/* Popup forfait (magma.js) */
.magma-plan-popup {
  position: relative;
  width: min(92vw, 560px);
  margin: 0 auto;
  padding: clamp(24px, 4vw, 40px);
  border-radius: 20px;
  background: var(--at-neutral-0);
  color: var(--at-neutral-900);
}
.magma-plan-popup__name {
  color: var(--magma-accent-text);
}
.magma-plan-popup__intro {
  margin-bottom: 8px;
  color: var(--at-neutral-500);
}
.magma-plan-popup select.sec-4-about-form__input {
  cursor: pointer;
  background-color: transparent;
}
.magma-plan-popup .sec-4-about-form__actions {
  margin-top: 24px;
  margin-bottom: 0;
}
.magma-plan-popup .mfp-close {
  color: var(--at-neutral-900);
}

/*----------------------------------------*/
/*  Mode sombre (data-bs-theme=dark)
/*  Le template inverse --at-neutral-0 (texte des boutons) et les logos :
/*  on garde du texte blanc sur les boutons teal et des accents teal clairs.
/*----------------------------------------*/
:root {
  --magma-accent-text: var(--magma-teal-deep);
  --magma-reveal-green: #0E3B34;
}
[data-bs-theme=dark] {
  --magma-accent-text: #46C2AE;
  --magma-reveal-green: #46C2AE;
}

/* Logo : texte « MAGMA » blanc, symbole en couleurs (le template applique invert(1)) */
/* Hero : courbes de niveau noires → blanches sur fond sombre */
[data-bs-theme=dark] .sec-1-home-10__bg-lines {
  opacity: 0.07;
}
[data-bs-theme=dark] .sec-1-home-10__bg-lines img {
  filter: invert(1);
}

[data-bs-theme=dark] .magma-logo:not(.magma-logo--white) {
  content: url("../imgs/logo-magma-dark.png");
  filter: none;
}
/* Symbole seul (header mobile) : mêmes couleurs qu'en mode clair */
[data-bs-theme=dark] .at-header-logo .magma-logo-symbol {
  filter: none;
}

/* Boutons teal : libellé et flèche en blanc */
[data-bs-theme=dark] .sec-1-home-10__btn-label,
[data-bs-theme=dark] .sec-1-home-10__btn-circle,
[data-bs-theme=dark] .at-btn:not(.bg-transparent),
[data-bs-theme=dark] .at-btn:not(.bg-transparent) span,
[data-bs-theme=dark] .at-btn:not(.bg-transparent) i,
[data-bs-theme=dark] .at-btn-group .at-btn-circle {
  color: #fff;
}

/* Accents texte teal profond, illisibles sur noir */
[data-bs-theme=dark] .sec-5-home-10__stat-value,
[data-bs-theme=dark] .card-award-date,
[data-bs-theme=dark] .sec-6-home-10__eyebrow-text,
[data-bs-theme=dark] .sec-5-home-10__eyebrow-text {
  color: var(--magma-accent-text);
}

/* Cartes Secteurs : nom et rôle restent blancs sur le dégradé sombre */
[data-bs-theme=dark] .sec-6-home-10__member-name,
[data-bs-theme=dark] .sec-6-home-10__member-role {
  color: #fff;
}

/* Cadre « Nos modules métier » : vert très sombre au lieu de #ECFDF5 */
[data-bs-theme=dark] .alt-portfolio-area.bg-neutral-50 {
  background-color: #0B2621 !important;
}
[data-bs-theme=dark] .alt-portfolio-main-title {
  color: #34C38F;
}

/* Logo du footer (fond noir dans les deux modes) : version texte blanc, sans l'invert du template */
.magma-logo--footer,
[data-bs-theme=dark] .at-header-logo .magma-logo--footer {
  content: normal;
  filter: none;
}

/* Contact : captures Magma qui défilent en continu à droite du formulaire */
.magma-screen-marquee {
  position: relative;
  height: 560px;
  overflow: hidden;
  border-radius: 16px;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 12%, #000 88%, transparent 100%);
          mask-image: linear-gradient(180deg, transparent 0, #000 12%, #000 88%, transparent 100%);
}
.magma-screen-marquee__track {
  display: flex;
  flex-direction: column;
  gap: 16px;
  animation: magma-screen-scroll 40s linear infinite;
}
.magma-screen-marquee:hover .magma-screen-marquee__track {
  animation-play-state: paused;
}
.magma-screen-marquee__img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(14, 59, 52, 0.12);
}
/* Le track contient 2 séries identiques : -50 % (moins un demi-gap) boucle sans saut */
@keyframes magma-screen-scroll {
  from { transform: translateY(0); }
  to   { transform: translateY(calc(-50% - 8px)); }
}
@media (prefers-reduced-motion: reduce) {
  .magma-screen-marquee__track {
    animation: none;
  }
}

/* Page 404 */
.magma-404-label {
  font-weight: 600;
  letter-spacing: 0.07em;
  color: var(--magma-teal);
}
.magma-404-text {
  max-width: 34ch;
}