/* ============================================================
   PORTAIL FASTMAG — REFONTE STYLE ORISHA (CSS-only)
   Basé sur le Design System Orisha (OrishaUI 3.13.1)
   ------------------------------------------------------------
   Réécriture NON destructive du style.css d'origine :
   on NE touche PAS index.ips (HTML/Pascal), on garde la
   STRUCTURE, les ESPACEMENTS, l'ALIGNEMENT et la TAILLE DU
   LOGO d'origine. On ne change QUE l'habillage couleur :
     - bleu/orange Fastmag  ->  violet Orisha #482882
     - fond lavande Orisha  #f9f7fd
     - typographie Poppins
     - bande héros / partenaires en VIOLET PUR (pas de dégradé)
     - décor Vector.svg (DS Orisha) à gauche du héros
       (remplace l'ancien visuel orange orangeBackground.png)
   Les ICÔNES / ILLUSTRATIONS d'origine sont conservées.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');

:root {
  --oui-primary: #482882;        /* violet Orisha */
  --oui-primary-hover: #5a35a6;
  --oui-primary-active: #3a2070;
  --oui-secondary: #dbcafa;
  --oui-surface: #ffffff;
  --oui-background: #f9f7fd;      /* fond lavande Orisha */
  --oui-on-surface: #333;         /* conserve le gris foncé d'origine */
  --oui-on-surface-subtle: #797389;
  --oui-outline-subtle: rgba(72, 40, 130, 0.14);
  --oui-positive: #00875a;        /* badge "Gratuit" */
  --oui-state-tint: #eae0fc;       /* violet clair (tuiles d'icônes) */
  --oui-surface-alt: #f9f7fd;      /* lavande clair (section modules) */
  /* Sunrise Gradient (DS Orisha) — barres de titre */
  --oui-sunrise-gradient: linear-gradient(90deg, #6946AA 0%, #E8005F 50%, #FFBC00 100%);
}

body {
  font-family: 'Poppins', sans-serif;
}

/* ---------------------- TITRES ---------------------- */
.titre {
  font-size: 30px;
  padding-bottom: 10px;
  color: var(--oui-on-surface);
  font-weight: 600;
  line-height: 1em;
  text-align: center;
}
.nosPartenaires .titre {
  color: #fff;
}
/* Accent de section : Sunrise Gradient Orisha, épaisseur 2px */
.titre:after {
  content: "";
  display: block;
  width: 100px;
  height: 3px;
  margin: 20px auto;
  background: var(--oui-sunrise-gradient);
  border-radius: 3px;
}
/* même dégradé sur fond violet (section partenaires) */
.nosPartenaires .titre:after {
  background: var(--oui-sunrise-gradient);
}

.row {
  width: 100%;
  margin: auto;
}
.carousel {
  box-shadow: 0px 4px 12px rgba(72, 40, 130, 0.08);
  margin: 5px;
}
.text-center {
  display: block;
}

/* ---------------------- HEADER ---------------------- */
.top-header {
  background: var(--oui-primary);
  width: 100%;
}
.top-secondary a {
  color: #fff;
  padding: 10px;
}
.top-secondary li {
  border-left: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: inset 1px 0 0 0 rgba(255, 255, 255, 0.1);
}
.top-secondary li a {
  margin: 0 15px;
}
.socialicone li:first-child {
  border-left: none;
  box-shadow: none;
}
.top-secondary .navbar {
  padding: 0;
}
.contactright li:last-child {
  border-right: none;
  box-shadow: none;
}
.contactright .topcontact {
  background: var(--oui-primary);
  width: max-content;
}
/* LOGO : taille d'origine conservée */
.top-logo {
  height: 90px;
  padding: 15px;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
  text-align: center;
}
.top-logo .logo img {
  height: 60px;
}

/* ---------------------- HÉRO ---------------------- */
/* Violet PUR (pas de dégradé) + décor Vector.svg à gauche/milieu */
.topcontainer {
  background: url('../images_portail/Vector.svg') no-repeat left center, var(--oui-primary) !important;
  background-size: auto 100%, auto;
  padding-top: 25px;
  padding-right: 0px;
  padding-bottom: 25px;
  padding-left: 0px;
}
.topcontainer h1 {
  font-size: 34px;
  text-align: center;
  text-shadow: none;
  color: #fff;
  font-weight: 500;
}

.maincontent {
  background: var(--oui-background);
  min-height: 85vh;
}

/* ---------------------- SECTIONS ---------------------- */
/* fond background Orisha (plus d'image) */
.nosServices {
  background: #EFEEF2;
  padding: 50px 0;
}
/* fond lavande clair Orisha (alternance douce avec nosServices) */
.nosModules {
  background: var(--oui-surface-alt);
  padding: 50px 0;
}
/* Partenaires : violet PUR (pas de dégradé) */
.nosPartenaires {
  background: var(--oui-primary);
  background-position: bottom center;
  background-size: contain;
  padding: 50px 0;
  color: #fff;
}

/* ---------------------- FORMULAIRE ---------------------- */
.formulaire {
  padding-top: 40px;
  padding-right: 40px;
  padding-bottom: 0px;
  padding-left: 40px;
  margin-top: -130px;
  background-image: linear-gradient(180deg, #ffffff 0%, var(--oui-background) 100%);
  background-color: #ffffff;
  border-radius: 12px 12px 0 0;
  overflow: hidden;
}
.formulaire .input {
  width: 100%;
  background: rgb(157, 157, 157, 0.1);
  border: 1px solid var(--oui-outline-subtle);
  border-radius: 6px;
  color: black;
  padding: 15px;
  font-size: 20px;
  margin: 15px 0;
}
.formulaire .input:focus {
  outline: none;
  border-color: var(--oui-primary);
  box-shadow: 0 0 0 3px rgba(72, 40, 130, 0.12);
}
.formulaire input[type="submit"] {
  background: var(--oui-primary);
  padding: 15px 40px;
  border-radius: 35px;
  font-size: 20px;
  font-weight: bold;
  color: white;
  text-align: center;
  cursor: pointer;
  border: 0px;
  display: block;
  margin: 15px auto;
}
.formulaire input[type="submit"]:hover {
  background: var(--oui-primary-hover) !important;
}
.formulaire .symbole {
  border-left: none;
  border-radius: 0 6px 6px 0;
  padding: 15px;
  font-size: 20px;
  margin: 15px 0;
  display: inline-block;
}
.formulaire .symbole span {
  border: none;
  background: none;
  font-size: 20px;
}

/* ---------------------- FOOTER ---------------------- */
footer {
  padding: 50px;
  background: var(--oui-background);
}
footer img {
  display: block;
  margin: 15px auto;
}
footer span {
  margin: 15px auto 0 auto;
  padding: 15px;
  display: block;
  text-align: center;
  color: #999;
  font-size: 12px;
}

/* ---------------------- CARTES SERVICES ---------------------- */
/* Hauteur égale : les colonnes Bootstrap de la row sont déjà de même
   hauteur (flex). On fait remplir cette hauteur à la carte puis au
   lien <a>, pour que toutes les .appsbox soient calées sur la plus
   grande et qu'il n'y ait plus d'espace vide en bas. */
.nosServices [class*="col-"] {
  display: flex;
}
.appsbox {
  background: white;
  border-radius: 10px;
  box-shadow: 0px 4px 12px rgba(72, 40, 130, 0.08);
  margin: 5px;
  width: 100%;
  border: 1px solid transparent;           /* évite le "saut" au hover */
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  /* la CARTE remplit la hauteur de la colonne (toutes calées sur la
     plus grande) et répartit son contenu en colonne. Fonctionne que
     .boxtext soit enfant direct de .appsbox OU du <a>. */
  display: flex;
  flex-direction: column;
}
/* le lien s'étire pour occuper la carte sans forcer sa hauteur */
.appsbox > a {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  text-decoration: none;
}
.appsbox .boximg {
  margin-top: 0px !important;
  margin-bottom: 0px !important;
  max-width: 100%;
  transform: scaleX(0.68) scaleY(0.68);
  text-align: center;
  height: 150px;
}
.appsbox .boximg img {
  height: 100%;
  max-width: 100%;
}
.appsbox .boxtitre {
  font-weight: 600;
  font-size: 20px;
  padding: 10px;
  color: var(--oui-primary) !important;
  text-align: center;
}
.appsbox .boxtitre img {
  width: 50%;
}
.appsbox .boxtext {
  font-size: 14px;
  padding: 20px !important;
  text-align: center;
  color: #333;                              /* texte forcé (plus de bleu de lien) */
  margin-top: auto;                         /* pousse le texte en bas -> plus de "trou" */
}
/* Hover : pas de soulignement, apparition d'un léger border sur la carte */
.appsbox > a:hover {
  text-decoration: none;
}
.appsbox:hover {
  border-color: var(--oui-outline-subtle);
  box-shadow: 0px 6px 16px rgba(72, 40, 130, 0.14);
}

/* ============================================================
   BOUTONS "Télécharger Fastmag" / "Voir tous nos partenaires"
   (.btndownload) — animation inspirée du bouton Orisha (orisha.com)
   ------------------------------------------------------------
   Au survol, un HALO dégradé "Sunrise" flou apparaît en fondu et
   DÉBORDE autour du bouton (glow coloré). Le bouton lui-même reste
   un pill BLANC, texte + icône VIOLETS, et FIXE (aucun déplacement).
   ------------------------------------------------------------
   Structure HTML : a.btndownload > span.btn-label (texte+icône).
   Empilement explicite (3 couches) :
     ::after  = halo Sunrise flou      (z-index 0, DERRIÈRE, déborde)
     ::before = pastille blanche (pill) (z-index 1, le corps du bouton)
     .btn-label (texte+icône)           (z-index 2, AU-DESSUS)
   -> le bouton (pill blanc + label) est toujours PAR-DESSUS le glow,
   qui ne déborde qu'autour. Fiable quel que soit le fond de section.
   ============================================================ */
.btndownload {
  position: relative;
  padding: 20px;
  background: transparent;    /* le pill blanc est porté par ::before */
  color: var(--oui-primary);
  border-radius: 35px;
  box-shadow: 0px 4px 12px rgba(72, 40, 130, 0.1);
  display: inline-block;
  text-decoration: none;
  margin-top: 50px;
  font-weight: 500;
  font-size: 18px;
}
/* Halo "Sunrise Gradient" flou qui DÉBORDE autour (apparaît au hover) */
.btndownload::after {
  content: "";
  position: absolute;
  inset: -10px;               /* déborde largement du bouton */
  border-radius: 45px;
  background: var(--oui-sunrise-gradient);
  filter: blur(14px);
  opacity: 0;                 /* invisible au repos */
  z-index: 0;                 /* derrière le pill blanc */
  transition: opacity 0.3s ease;
  pointer-events: none;
}
/* Corps du bouton : pastille blanche (pill) au-dessus du halo */
.btndownload::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: #fff;
  z-index: 1;
}
/* Texte + icône : couche la plus haute */
.btndownload .btn-label {
  position: relative;
  z-index: 2;
}
.fa-download {
  color: var(--oui-primary);
}
.btn {
  background: #fff;
  color: var(--oui-primary);
  border-radius: 35px;
  box-shadow: 0px 4px 12px rgba(72, 40, 130, 0.1);
  transition: all 0.2s ease;
  text-decoration: none;
  text-align: center;
}
/* HOVER : le bouton reste blanc / texte + icône violets (inchangés).
   C'est le halo Sunrise qui apparaît (glow coloré autour).
   Aucun déplacement du texte/icône (pas de transform). */
.btndownload:hover {
  background: transparent;
  color: var(--oui-primary);
  text-decoration: none;
}
.btndownload:hover::after {
  opacity: 1;
}
.btn:hover {
  background: var(--oui-primary);
  color: #fff;
  text-decoration: none;
}
.nosPartenaires .btndownload {
  margin-top: 10px;
}

/* ---------------------- CARROUSEL ---------------------- */
.carousel-caption {
  text-shadow: 2px 2px 1px #000;
}
.carousel-indicators {
  display: none;
}

/* ---------------------- CARTES PARTENAIRES ---------------------- */
.partenairebox {
  background: white;
  border-radius: 10px;
  box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.0644668);
  margin: 5px;
  min-height: 100px;
  text-align: center;
  color: #000;
}
.partenairebox p {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 90%;
}

/* ---------------------- CARTES MODULES ---------------------- */
.modulebox {
  background: white;
  border-radius: 10px;
  box-shadow: 0px 4px 12px rgba(72, 40, 130, 0.08);
  margin: 5px;
  text-align: center;
  /* on réserve en haut l'espace de la pastille "Gratuit" pour que
     TOUTES les cartes démarrent leur contenu à la même ligne,
     qu'elles aient une pastille ou non */
  padding: 52px 20px 150px;
  min-height: 450px;
  position: relative;
}
.modulebox .boxtitre {
  font-weight: 600;
  font-size: 20px;
  padding: 10px;
  color: var(--oui-primary) !important;
  text-align: center;
}
.modulebox .boxtext {
  font-size: 14px;
  text-align: center;
}

/* ============================================================
   ICÔNES DES MODULES — remplacées par des icônes du DS Orisha
   ------------------------------------------------------------
   Les tuiles bleu marine / orange d'origine sont remplacées par
   une tuile carrée arrondie "state-tint" violet clair (#eae0fc)
   avec un pictogramme Orisha teinté en violet (#482882) posé en
   mask-image. CSS-only : on masque l'<img> d'origine et on rend
   l'icône sur le conteneur .boximg, ciblé via l'id du lien parent.
   Icônes : /images_portail/*.svg (même dossier que logo.svg).
     - Mobile Manager      -> progress-report.svg
     - Mobile Sales        -> shopping-cart.svg
     - Clipad              -> tablet.svg  (DS Figma)
     - Extranet fournisseur-> package.svg
     - SMS                 -> email.svg   (DS Figma)
   ============================================================ */
.modulebox .boximg {
  position: relative;
  height: 60px;
  margin: 0 auto 6px;
}
/* masque l'icône bitmap d'origine (bleu marine / orange) */
.modulebox .boximg img {
  visibility: hidden;
}
/* tuile + pictogramme Orisha */
.modulebox a[id] .boximg::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 60px;
  height: 60px;
  border-radius: 14px;
  background:
    var(--oui-primary) /* couleur du picto (via mask) */;
  /* la tuile violet clair est dessinée par un second calque */
}
/* calque tuile violet clair derrière le picto */
.modulebox a[id] .boximg::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 60px;
  height: 60px;
  border-radius: 14px;
  background: var(--oui-state-tint);
  z-index: 0;
}
/* le picto (::before) passe au-dessus de la tuile (::after) */
.modulebox a[id] .boximg::before {
  z-index: 1;
  width: 32px;
  height: 32px;
  border-radius: 0;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 32px 32px;
  mask-size: 32px 32px;
}
/* mapping id du lien -> icône DS */
#lien_mobile_manager .boximg::before {
  -webkit-mask-image: url('../images_portail/progress-report.svg');
  mask-image: url('../images_portail/progress-report.svg');
}
#lien_mobile_sales .boximg::before {
  -webkit-mask-image: url('../images_portail/shopping-cart.svg');
  mask-image: url('../images_portail/shopping-cart.svg');
}
#lien_clipad2 .boximg::before {
  -webkit-mask-image: url('../images_portail/tablet.svg');
  mask-image: url('../images_portail/tablet.svg');
}
#lien_extranet_fournisseur .boximg::before {
  -webkit-mask-image: url('../images_portail/package.svg');
  mask-image: url('../images_portail/package.svg');
}
#sms .boximg::before {
  -webkit-mask-image: url('../images_portail/email.svg');
  mask-image: url('../images_portail/email.svg');
}

/* Badge "Gratuit" : tag vert positif Orisha.
   Positionné en absolu dans la zone réservée en haut de carte
   (padding-top de .modulebox), pour ne pas décaler le contenu. */
.sticker {
  position: absolute;
  top: 16px;
  left: 16px;
  margin: 0;
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
}
.sticker.badge-info {
  background: var(--oui-positive) !important;
  color: #fff !important;
}
.Infobulle {
  padding: 0;
  cursor: pointer;
}
.Infobulle:hover {
  background: #fff;
}
/* Bloc badges stores : ancré en bas, hauteur fixe, contenu aligné
   en bas et centré -> le dernier badge est sur la même ligne de base
   qu'il y ait un seul badge (Clipad) ou deux (Manager/Sales). */
.androidbadge {
  position: absolute;
  bottom: 0;
  left: 20px;
  width: calc(100% - 40px);
  height: 130px;
  padding: 16px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  text-align: center;
}
.androidbadge b {
  color: var(--oui-on-surface-subtle, #797389);
  font-weight: 600;
  font-size: 13px;
}
/* neutralise les <br> de l'HTML d'origine dans ce bloc flex */
.androidbadge br {
  display: none;
}
.androidbadge img {
  width: 135px;
  max-width: 100%;
}

/* ---------------------- TEMPLATES ---------------------- */
.template {
  transition: 0.15s all;
  margin: 15px;
  border-radius: 0.5rem;
  background: #fff;
  box-shadow: 0 2rem 1.5rem -1.5rem rgba(72, 40, 130, 0.15), 0 0 1.5rem 0.5rem rgba(72, 40, 130, 0.05);
}
.template img {
  border-radius: 0.5rem 0.5rem 0 0;
  overflow: hidden;
  width: 100%;
}
.template:hover {
  transform: translateY(-0.3rem);
  box-shadow: 0 2.25rem 1.5rem -1.5rem rgba(72, 40, 130, 0.3), 0 0 1.5rem 0.5rem rgba(72, 40, 130, 0.05);
}
.template h4 {
  font-weight: 700;
  font-size: 20px;
  color: #000;
  padding: 10px;
}

/* ============================================================
   RESPONSIVE FLUIDE DES CARTES (sans paliers Bootstrap)
   ------------------------------------------------------------
   Problème : les colonnes Bootstrap (.col-md-2 / .col-sm-4 / .col-6
   et .col-md-3) changent de largeur par PALIERS aux breakpoints
   (1200 / 992 / 768 px), ce qui rétrécit les cartes.
   Solution : on passe les rangées de cartes en flex-wrap et on donne
   aux colonnes une LARGEUR DE BASE FIXE (flex-basis en px). Les cartes
   gardent ainsi leur taille et passent simplement à la ligne (wrap)
   quand la section devient trop étroite — comportement fluide.
   On surcharge les largeurs Bootstrap à TOUTES les largeurs (!important
   pour battre les media-queries de Bootstrap).
   ============================================================ */
.nosServices .row,
.nosModules .row.modules,
.nosPartenaires .row.mt-2 {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
/* Cartes services & modules : largeur fixe de la colonne (185px). */
.nosServices .row > [class*="col-"],
.nosModules .row.modules > [class*="col-"] {
  flex: 0 0 185px !important;
  max-width: 185px !important;
  width: 185px !important;
}
/* le titre "Modules complémentaires" (col-12) reste pleine largeur */
.nosModules .row.modules > .col-12 {
  flex: 0 0 100% !important;
  max-width: 100% !important;
  width: 100% !important;
}
/* Cartes partenaires : 4 par ligne sur desktop, largeur fixe */
.nosPartenaires .row.mt-2 > [class*="col-"] {
  flex: 0 0 240px !important;
  max-width: 240px !important;
  width: 240px !important;
}

/* Sur très petits écrans (largeur de section atteinte), on laisse les
   cartes s'adapter : elles occupent la largeur disponible (2 puis 1). */
@media screen and (max-width: 400px) {
  .nosServices .row > [class*="col-"],
  .nosModules .row.modules > [class*="col-"],
  .nosPartenaires .row.mt-2 > [class*="col-"] {
    flex-basis: 100% !important;
    max-width: 100% !important;
    width: 100% !important;
  }
}

/* ---------------------- RESPONSIVE ---------------------- */
@media screen and (max-width: 768px) {
  .navbar-nav {
    flex-direction: row !important;
  }
  .applez {
    display: none;
  }
  .contactright {
    font-size: 12px;
  }
  .top-header .nav-item {
    border-left: none;
    box-shadow: none;
  }
  .topcontainer h1 {
    font-size: 30px;
  }
  .formulaire {
    margin-top: -145px;
    border-radius: 0;
  }
  .container {
    max-width: 100%;
    padding: 0;
    margin: auto;
  }
  .topcontact {
    margin-right: 3px;
  }
}