/* ============================================================================= ELMOUCHIR — auth-ui.css Refonte UI / UX de l'ESPACE ENTREPRISE (vues user_ent/*). ----------------------------------------------------------------------------- AUCUNE logique métier n'est touchée : ce fichier ne fait que redessiner le balisage qui existe déjà (kt-portlet, kt-widget, kt-form, kt-wizard…). Aucun identifiant, aucun name de champ, aucune route n'est modifié. IMPORTANT — ORDRE DE CHARGEMENT Les pages de l'espace chargent `assets/css/demo1/style.bundlefront.css` (thème Metronic) via @yield('extra_css'), donc APRÈS all2.css, modern-ui.css et ui-fix.css. Ce fichier doit donc être chargé APRÈS @yield('extra_css'), sinon Metronic reprend la main. Voir layouts/app.blade.php. PORTÉE • `.kt-app` → présent dans le HTML dès l'analyse : sert aux règles de structure (aucun clignotement au chargement). • `.au-space` → posé sur par Blade (et par auth-ui.js en secours) : sert aux composants créés en JavaScript. ============================================================================= */ /* ============================================================================= 0. JETONS La charte verte du site est conservée (--mui-* de modern-ui.css) ; on ajoute ici ce qui manque à un espace de gestion : encre profonde, lignes, élévations. ============================================================================= */ :root{ --au-green: #0a9c53; --au-green-600: #087a41; --au-green-50: #edfaf3; --au-green-100: #d5f2e3; --au-grad: linear-gradient(135deg,#25c878 0%,#0a9c53 55%,#067a40 100%); /* Encre « pin profond » : réservée à la carte d'identité et au tiroir */ --au-ink: #07231a; --au-ink-2: #0d3626; --au-bg: #f1f7f4; --au-surface: #ffffff; --au-surface-2: #f7fbf9; --au-text: #17281f; --au-muted: #5f7469; --au-line: #e2eee8; --au-line-2: #cfe4d9; --au-danger: #e11d48; --au-warning: #ea9010; --au-info: #0e7490; --au-r: 18px; --au-r-sm: 12px; --au-r-pill: 999px; --au-shadow: 0 1px 2px rgba(9,40,27,.05), 0 10px 28px -16px rgba(9,40,27,.28); --au-shadow-lg: 0 2px 6px rgba(9,40,27,.06), 0 28px 60px -28px rgba(9,40,27,.42); --au-ring: 0 0 0 4px rgba(10,156,83,.22); --au-ease: cubic-bezier(.22,.61,.21,1); --au-spring: cubic-bezier(.2,.9,.28,1.12); --au-nav-w: 304px; --au-gap: clamp(14px, 2.2vw, 26px); /* Hauteur de la barre de titre collante (mobile) — ajustée par auth-ui.js */ --au-bar-h: 56px; } /* Le sticky a besoin d'un conteneur de défilement propre : ui-fix.css pose un overflow-x sur .ts-page-wrapper, ce qui peut neutraliser position:sticky sur les navigateurs sans `overflow:clip`. On le relâche ici, et on confine le débordement horizontal à la colonne de contenu (voir §1). */ body.au-space .ts-page-wrapper{ overflow: visible !important; } /* ============================================================================= 1. GABARIT DE PAGE Bug d'origine : le wrapper réserve déjà la hauteur du header fixe (ui-fix), et chaque page ajoutait en plus `padding-top:6rem` en style inline. Résultat sur mobile : ~200 px de vide avant le titre. ============================================================================= */ body.au-space #submit-form{ /* `#submit-form` est un identifiant générique du thème : la règle est restreinte à l'espace entreprise pour ne rien changer au site public. La gouttière horizontale de l'espace vit ici — les conteneurs Metronic imbriqués sont neutralisés plus bas, et la barre de titre collante déborde volontairement de cette gouttière pour occuper toute la largeur. */ padding: 0 var(--au-gap) !important; max-width: 1760px; margin-inline: auto; } .kt-app{ display: grid !important; grid-template-columns: var(--au-nav-w) minmax(0, 1fr); align-items: start; gap: var(--au-gap); padding-bottom: 2.5rem; } .kt-app > .kt-app__aside, .kt-app > .kt-app__content{ min-width: 0; } /* `mr-3` cassait la symétrie et la version arabe (RTL) */ .kt-app__content, .kt-app__content.mr-3{ margin-inline: 0 !important; overflow-x: clip; /* ne crée PAS de contexte de défilement : sticky OK */ } /* Les conteneurs Metronic imbriqués ajoutaient des gouttières en cascade */ .kt-app__content > .kt-container, .kt-app__content > .row > [class*="col-"] > .kt-container{ padding-inline: 0; } body.au-space #submit-form > div > .row{ margin-inline: 0; } body.au-space #submit-form > div > .row > .col-lg-12{ padding-inline: 0; } /* Fond légèrement teinté : les cartes blanches se détachent enfin */ body.au-space #ts-main{ background: var(--au-bg); } @media (min-width: 1600px){ .kt-app{ --au-nav-w: 330px; } } @media (max-width: 991.98px){ .kt-app{ display: block !important; padding-bottom: 1.5rem; } } /* ============================================================================= 2. EN-TÊTE DE PAGE (.kt-subheader) Desktop : bloc de titre. Mobile : barre d'application collante (menu + titre), qui se compacte au défilement. Elle réutilise le bouton #kt_subheader_mobile_toggle déjà présent dans le balisage — aucun élément ajouté. ============================================================================= */ .kt-subheader{ background: transparent !important; box-shadow: none !important; border: 0 !important; margin: 0 0 var(--au-gap) !important; padding: 0 !important; min-height: 0 !important; } /* Titre à gauche, boutons d'action à droite, sur la même ligne */ .kt-subheader > .kt-container{ display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .6rem 1rem; padding-inline: 0 !important; max-width: none !important; } .kt-subheader__main{ display: flex; align-items: center; flex: 1 1 260px; min-width: 0; gap: .75rem; min-height: 44px; } .kt-subheader__toolbar{ flex: 0 0 auto; max-width: 100%; } .kt-subheader__title{ margin: 0 !important; padding: 0 !important; font-size: clamp(1.3rem, 1.05rem + 1.1vw, 1.85rem) !important; font-weight: 800 !important; letter-spacing: -.022em; line-height: 1.2 !important; color: var(--au-ink) !important; min-width: 0; } /* Surtitre « Espace entreprise » — le texte est injecté par auth-ui.js (data-au-eyebrow) pour rester traduit. */ .au-eyebrow{ display: block; flex: 1 0 100%; order: -1; font-size: .68rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: var(--au-green-600); margin-bottom: .35rem; } .au-eyebrow::before{ content: ""; display: inline-block; width: 16px; height: 2px; border-radius: 2px; background: var(--au-grad); vertical-align: middle; margin-inline-end: .5rem; transform: translateY(-1px); } /* --- Bouton menu (mobile) : le vide devient un vrai « burger » ------- */ .kt-subheader__mobile-toggle{ display: none; flex: 0 0 auto; width: 44px; height: 44px; align-items: center; justify-content: center; padding: 0; border: 1px solid var(--au-line); border-radius: 14px; background: var(--au-surface); box-shadow: var(--au-shadow); cursor: pointer; transition: transform .18s var(--au-spring), background .18s var(--au-ease); } .kt-subheader__mobile-toggle:active{ transform: scale(.93); background: var(--au-green-50); } .kt-subheader__mobile-toggle > span{ position: relative; display: block; width: 18px; height: 2px; border-radius: 2px; background: var(--au-ink); transition: background .2s var(--au-ease); } .kt-subheader__mobile-toggle > span::before, .kt-subheader__mobile-toggle > span::after{ content: ""; position: absolute; left: 0; right: 0; height: 2px; border-radius: 2px; background: var(--au-ink); transition: transform .28s var(--au-spring); } .kt-subheader__mobile-toggle > span::before{ top: -6px; } .kt-subheader__mobile-toggle > span::after{ top: 6px; width: 12px; } html.au-drawer .kt-subheader__mobile-toggle > span{ background: transparent; } html.au-drawer .kt-subheader__mobile-toggle > span::before{ transform: translateY(6px) rotate(45deg); } html.au-drawer .kt-subheader__mobile-toggle > span::after{ width: 18px; transform: translateY(-6px) rotate(-45deg); } /* Pastille de rappel : un petit point vert tant que le tiroir n'a jamais été ouvert, pour signaler qu'il y a un menu derrière ce bouton. */ .kt-subheader__mobile-toggle.au-hint::after{ content: ""; position: absolute; top: 8px; inset-inline-end: 8px; width: 7px; height: 7px; border-radius: 50%; background: var(--au-green); box-shadow: 0 0 0 0 rgba(10,156,83,.55); animation: au-pulse 2.4s var(--au-ease) infinite; } @keyframes au-pulse{ 0%,70%,100%{ box-shadow: 0 0 0 0 rgba(10,156,83,.5); } 35% { box-shadow: 0 0 0 7px rgba(10,156,83,0); } } .kt-subheader__toolbar{ display: flex; align-items: center; gap: .5rem; } .kt-subheader__toolbar:empty{ display: none; } @media (max-width: 991.98px){ /* Trois boutons ne tiennent pas sur 390 px : on les fait défiler plutôt que de les laisser passer à la ligne et grossir la barre. */ .kt-subheader__toolbar{ flex: 1 1 100%; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; } .kt-subheader__toolbar::-webkit-scrollbar{ display: none; } .kt-subheader__toolbar > *{ flex: 0 0 auto; } .kt-subheader.au-stuck .kt-subheader__toolbar{ display: none; } } @media (max-width: 991.98px){ .kt-subheader{ position: sticky; top: var(--hdr-h, 112px); z-index: 30; margin-inline: calc(var(--au-gap) * -1) !important; padding: .55rem var(--au-gap) !important; background: rgba(255,255,255,.86); -webkit-backdrop-filter: saturate(180%) blur(14px); backdrop-filter: saturate(180%) blur(14px); transition: top .3s var(--au-ease), box-shadow .25s var(--au-ease), padding .25s var(--au-ease), background .25s var(--au-ease); } /* modern-ui.js escamote le header au défilement : la barre remonte avec lui */ body.mui-hide-header .kt-subheader{ top: 0; } .kt-subheader.au-stuck{ box-shadow: 0 6px 24px -12px rgba(9,40,27,.4); border-bottom: 1px solid var(--au-line); } /* Sur téléphone le tiroir et le rail portent déjà le contexte : le surtitre ne ferait que voler 30 px de hauteur au-dessus de la ligne de titre. */ .au-eyebrow{ display: none; } .kt-subheader.au-stuck .kt-subheader__title{ font-size: 1.02rem !important; } html.au-js .kt-subheader__mobile-toggle{ display: inline-flex; position: relative; } .kt-subheader__title{ font-size: 1.18rem !important; } /* Le titre ne doit jamais pousser le bouton hors de l'écran */ .kt-subheader__main > h3{ overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .kt-subheader.au-stuck .kt-subheader__main > h3{ -webkit-line-clamp: 1; } } /* ============================================================================= 3. RAIL DE SECTIONS (mobile) Construit par auth-ui.js à partir des liens déjà présents dans #asidemenu : uniquement href + libellé sont repris, donc aucun identifiant dupliqué. C'est la navigation principale sur téléphone : un geste au lieu d'un tiroir. ============================================================================= */ .au-rail{ display: none; gap: .5rem; margin: 0 calc(var(--au-gap) * -1) var(--au-gap); padding: .15rem var(--au-gap) .7rem; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .au-rail::-webkit-scrollbar{ display: none; } .au-chip{ flex: 0 0 auto; position: relative; overflow: hidden; display: inline-flex; align-items: center; gap: .45rem; scroll-snap-align: center; padding: .5rem .95rem; border-radius: var(--au-r-pill); border: 1px solid var(--au-line); background: var(--au-surface); color: var(--au-text) !important; font-size: .86rem; font-weight: 600; line-height: 1.2; white-space: nowrap; text-decoration: none !important; box-shadow: 0 1px 2px rgba(9,40,27,.05); transition: transform .18s var(--au-spring), border-color .18s var(--au-ease), background .18s var(--au-ease), color .18s var(--au-ease); } .au-chip:active{ transform: scale(.95); } .au-chip svg{ width: 16px; height: 16px; opacity: .55; flex: none; } .au-chip svg [fill="#000000"]{ fill: currentColor; } .au-chip.au-active{ background: var(--au-grad); border-color: transparent; color: #fff !important; box-shadow: 0 8px 20px -10px rgba(10,156,83,.85); } .au-chip.au-active svg{ opacity: .95; } @media (max-width: 991.98px){ .au-rail{ display: flex; } } /* ============================================================================= 4. COLONNE LATÉRALE / TIROIR (.kt-app__aside) ============================================================================= */ .kt-app__aside{ position: sticky; top: calc(var(--hdr-h, 112px) + 16px); /* Chaque page pose `#kt_user_profile_aside{padding-top:8rem}` sous 1000 px pour compenser le header fixe. La compensation est désormais faite une seule fois sur le conteneur (§1) : ce reliquat creusait 128 px de vide au-dessus du menu. */ padding: 0 !important; } .kt-app__aside > .kt-portlet{ margin: 0 !important; border: 1px solid var(--au-line) !important; border-radius: var(--au-r) !important; box-shadow: var(--au-shadow) !important; overflow: hidden; } /* Le portlet d'accueil du menu est un simple emballage : son en-tête est vide */ .kt-app__aside > .kt-portlet > .kt-portlet__head{ display: none; } .kt-app__aside > .kt-portlet > .kt-portlet__body{ padding: 0 !important; } /* Bouton de fermeture : inutile sur grand écran */ .kt-app__aside-close{ display: none; position: absolute; top: 14px; inset-inline-end: 14px; z-index: 3; width: 40px; height: 40px; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 50%; background: rgba(255,255,255,.16); color: #fff; font-size: 1.1rem; cursor: pointer; transition: transform .18s var(--au-spring), background .18s var(--au-ease); } .kt-app__aside-close:active{ transform: scale(.9); background: rgba(255,255,255,.3); } /* --- Mode tiroir (mobile) -------------------------------------------------- Conditionné à html.au-js, posée par auth-ui.js dès son exécution : si le script ne s'est pas chargé, la colonne reste dans le flux (menu déroulé au-dessus du contenu, comme avant la refonte) au lieu de devenir un tiroir que rien ne pourrait plus ouvrir. ----------------------------------------------------------------------------*/ @media (max-width: 991.98px){ html.au-js .kt-app__aside{ position: fixed !important; top: 0; bottom: 0; /* Propriétés PHYSIQUES volontairement : auth-ui.js pose dir="rtl" sur le tiroir en arabe pour que son contenu (bouton fermer) se place bien, et des propriétés logiques feraient alors basculer le tiroir du mauvais côté. */ left: 0; right: auto; z-index: 12000; width: min(87vw, 340px); max-width: 340px; margin: 0 !important; padding: 0 !important; background: var(--au-surface); box-shadow: var(--au-shadow-lg); transform: translateX(-102%); visibility: hidden; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; transition: transform .34s var(--au-spring), visibility .34s; } html.au-js[lang="ar"] .kt-app__aside{ left: auto; right: 0; transform: translateX(102%); } html.au-drawer .kt-app__aside{ transform: none !important; visibility: visible; } html.au-js .kt-app__aside > .kt-portlet{ border: 0 !important; border-radius: 0 !important; box-shadow: none !important; min-height: 100%; } html.au-js .kt-app__aside-close{ display: inline-flex; } /* Verrou de défilement de la page pendant que le tiroir est ouvert */ html.au-drawer, html.au-drawer body{ overflow: hidden !important; } } /* Voile derrière le tiroir (créé par auth-ui.js) */ .au-scrim{ position: fixed; inset: 0; z-index: 11500; background: rgba(6,26,18,.5); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); opacity: 0; visibility: hidden; transition: opacity .3s var(--au-ease), visibility .3s; } html.au-drawer .au-scrim{ opacity: 1; visibility: visible; } /* ============================================================================= 5. CARTE D'IDENTITÉ ENTREPRISE L'élément signature de l'espace : le logo de l'entreprise sert de fond flouté, et l'essentiel (nom, formule, temps restant) tient dans un seul bloc. --au-logo est renseignée par auth-ui.js depuis le data-bg-image déjà présent. ============================================================================= */ #asidemenu{ padding: 0 !important; } #asidemenu .kt-widget__head{ position: relative; isolation: isolate; display: flex; align-items: center; gap: .9rem; margin: 0 !important; padding: 1.35rem 1.15rem 1.15rem !important; background: var(--au-ink); color: #fff; overflow: hidden; } /* Fond : logo flouté, puis dégradé pour garantir la lisibilité du texte */ #asidemenu .kt-widget__head::before{ content: ""; position: absolute; inset: -30%; z-index: -2; background-image: var(--au-logo, none); background-size: cover; background-position: center; filter: blur(26px) saturate(160%); opacity: .5; transform: scale(1.1); } #asidemenu .kt-widget__head::after{ content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(150deg, rgba(7,35,26,.72) 0%, rgba(7,35,26,.94) 70%); } #asidemenu .kt-widget__media{ margin: 0 !important; flex: none; } #asidemenu .kt-widget__media img{ width: 56px; height: 56px; border-radius: 50%; object-fit: cover; background: #fff; box-shadow: 0 0 0 2px rgba(255,255,255,.35), 0 8px 18px -8px rgba(0,0,0,.7); } #asidemenu .kt-widget__head .kt-widget__content{ min-width: 0; } #asidemenu .kt-widget__username{ margin: 0 !important; font-size: 1rem !important; font-weight: 700 !important; color: #fff !important; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #asidemenu .kt-widget__subtitle{ display: block; font-size: .78rem; color: rgba(255,255,255,.66) !important; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* --- Bloc entreprise + abonnement ----------------------------------------- */ #asidemenu > .kt-widget__body{ padding: 0 !important; margin: 0 !important; } #asidemenu > .kt-widget__body > .kt-widget__content{ padding: .9rem 1.15rem 1rem !important; margin: 0 !important; border-bottom: 1px solid var(--au-line); background: var(--au-surface-2); } /* Lien vers la fiche publique de l'entreprise */ #asidemenu > .kt-widget__body > .kt-widget__content > a{ display: block; padding: .5rem; margin: -.5rem -.5rem .35rem; border-radius: var(--au-r-sm); color: inherit !important; text-decoration: none !important; transition: background .18s var(--au-ease); } #asidemenu > .kt-widget__body > .kt-widget__content > a:active{ background: var(--au-green-50); } #asidemenu .ts-center__vertical{ display: flex; align-items: center; } #asidemenu .ts-circle{ flex: none; width: 42px !important; height: 42px !important; padding: 0 !important; margin-inline: 0 .7rem !important; border-radius: 12px; background-size: cover; background-position: center; box-shadow: 0 0 0 1px var(--au-line-2); } #asidemenu .kt-widget__content h6{ font-size: .9rem !important; line-height: 1.3; color: var(--au-ink) !important; } #asidemenu .kt-widget__content h6 strong{ font-weight: 700; } /* Statistiques d'abonnement */ #asidemenu .kt-widget__stats{ display: flex !important; flex-wrap: wrap; /* la vue porte .align-items-center : les deux colonnes n'ayant pas la même hauteur, leurs intitulés se retrouvaient sur des lignes différentes */ align-items: flex-start !important; gap: .75rem 1.1rem; margin: 0 !important; padding: 0 !important; } #asidemenu .kt-widget__stats .kt-widget__item{ margin: 0 !important; padding: 0 !important; border: 0 !important; flex: 0 0 auto; /* la formule garde sa largeur… */ min-width: max-content; /* …et son intitulé n'est jamais rogné */ } #asidemenu .kt-widget__stats .kt-widget__item.flex-fill{ flex: 1 1 150px; /* …la jauge prend ce qui reste */ } #asidemenu .kt-widget__date, #asidemenu .kt-widget__subtitel{ display: block; font-size: .66rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; color: var(--au-muted); margin-bottom: .3rem; } #asidemenu .kt-widget__label .btn{ pointer-events: none; padding: .22rem .7rem !important; border-radius: var(--au-r-pill) !important; font-size: .72rem !important; font-weight: 700 !important; letter-spacing: .02em; background: var(--au-green-100) !important; border-color: transparent !important; color: var(--au-green-600) !important; box-shadow: none !important; } /* Jauge de temps restant : barre fine, remplissage animé au chargement */ #asidemenu .progress{ height: 6px !important; border-radius: var(--au-r-pill); background: var(--au-line) !important; overflow: hidden; } #asidemenu .progress-bar{ border-radius: var(--au-r-pill); background-image: none !important; animation: au-fill 1s var(--au-ease) both .2s; } #asidemenu .progress-bar.bg-success{ background-color: var(--au-green) !important; } #asidemenu .progress-bar.bg-warning{ background-color: var(--au-warning) !important; } #asidemenu .progress-bar.bg-danger { background-color: var(--au-danger) !important; } @keyframes au-fill{ from{ transform: scaleX(0); transform-origin: left center; } } html[lang="ar"] #asidemenu .progress-bar{ animation-name: au-fill-rtl; } @keyframes au-fill-rtl{ from{ transform: scaleX(0); transform-origin: right center; } } #asidemenu .kt-widget__stat{ display: block; margin-top: .35rem; font-size: .76rem; font-weight: 600; color: var(--au-muted); font-variant-numeric: tabular-nums; } /* ============================================================================= 6. MENU DE NAVIGATION ============================================================================= */ #asidemenu .kt-widget__items{ display: flex; flex-direction: column; padding: .55rem !important; margin: 0 !important; } #asidemenu .kt-widget__item{ position: relative; overflow: hidden; display: block !important; padding: 0 !important; margin: 0 0 2px !important; border: 0 !important; border-radius: var(--au-r-sm); color: var(--au-text) !important; text-decoration: none !important; transition: background .18s var(--au-ease), transform .18s var(--au-spring); } #asidemenu .kt-widget__item:hover{ background: var(--au-green-50); } #asidemenu .kt-widget__item:active{ transform: scale(.985); } #asidemenu .kt-widget__item .kt-widget__section{ display: flex !important; align-items: center; gap: .75rem; padding: .68rem .7rem; min-height: 46px; } #asidemenu .kt-widget__icon{ flex: none; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 10px; background: var(--au-surface-2); transition: background .18s var(--au-ease); } #asidemenu .kt-widget__icon svg{ width: 20px; height: 20px; display: block; } #asidemenu .kt-widget__icon svg [fill="#000000"]{ fill: var(--au-muted); } #asidemenu .kt-widget__desc{ font-size: .9rem !important; font-weight: 600 !important; line-height: 1.3; color: inherit !important; } /* Élément courant : détecté par auth-ui.js à partir de l'URL */ #asidemenu .kt-widget__item.au-active{ background: var(--au-green-50); color: var(--au-green-600) !important; } #asidemenu .kt-widget__item.au-active::before{ content: ""; position: absolute; inset-inline-start: 0; top: 50%; transform: translateY(-50%); width: 3px; height: 22px; border-radius: 0 3px 3px 0; background: var(--au-grad); } html[lang="ar"] #asidemenu .kt-widget__item.au-active::before{ border-radius: 3px 0 0 3px; } #asidemenu .kt-widget__item.au-active .kt-widget__icon{ background: var(--au-green-100); } #asidemenu .kt-widget__item.au-active .kt-widget__icon svg [fill="#000000"]{ fill: var(--au-green-600); } #asidemenu .kt-widget__item.au-active .kt-widget__desc{ font-weight: 700 !important; } /* Ondulation au toucher (réutilise .mui-ripple de modern-ui.css) */ #asidemenu .kt-widget__item .mui-ripple{ color: var(--au-green); } /* Ouverture du tiroir : les entrées arrivent en cascade */ @media (max-width: 991.98px){ html.au-drawer #asidemenu .kt-widget__item{ animation: au-slide-in .34s var(--au-ease) both; animation-delay: calc(90ms + var(--au-i, 0) * 22ms); } html[lang="ar"] .kt-app__aside #asidemenu .kt-widget__item{ animation-name: au-slide-in-rtl; } } @keyframes au-slide-in{ from{ opacity: 0; transform: translateX(-14px); } } @keyframes au-slide-in-rtl{ from{ opacity: 0; transform: translateX(14px); } } /* ============================================================================= 7. CARTES (.kt-portlet) ============================================================================= */ .kt-app__content .kt-portlet{ margin-bottom: var(--au-gap) !important; border: 1px solid var(--au-line) !important; border-radius: var(--au-r) !important; background: var(--au-surface) !important; box-shadow: var(--au-shadow) !important; transition: box-shadow .25s var(--au-ease), transform .25s var(--au-ease); } .kt-app__content .kt-portlet{ position: relative; } .kt-app__content .kt-portlet__head{ display: flex; align-items: center; justify-content: space-between; gap: .6rem; min-height: 0 !important; padding: 1rem 1.25rem .25rem !important; border-bottom: 0 !important; background: transparent !important; } .kt-app__content .kt-portlet__head--noborder{ border-bottom: 0 !important; } .kt-app__content .kt-portlet__head-label{ flex: 1 1 auto; min-width: 0; } /* En-tête ne portant qu'une action (l'étoile des favoris) : il creusait un vide de 60 px en haut de chaque carte. auth-ui.js pose .au-flat sur les en-têtes sans texte ; l'action passe en pastille dans le coin. */ .kt-app__content .kt-portlet__head.au-flat{ display: block; position: absolute; top: 0; inset-inline-end: 0; z-index: 3; min-height: 0 !important; padding: .6rem .7rem !important; } .kt-app__content .kt-portlet__head.au-flat .kt-portlet__head-label{ display: none; } .kt-app__content .kt-portlet__head.au-flat .kt-portlet__head-toolbar{ display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: var(--au-surface); box-shadow: 0 2px 10px -4px rgba(9,40,27,.45); } .kt-app__content .kt-portlet__head-title{ margin: 0 !important; font-size: 1.02rem !important; font-weight: 700 !important; letter-spacing: -.01em; color: var(--au-ink) !important; } .kt-app__content .kt-portlet__body{ padding: 1.15rem 1.25rem 1.35rem !important; } .kt-app__content .kt-portlet__foot{ border-top: 1px solid var(--au-line) !important; background: var(--au-surface-2) !important; padding: .9rem 1.25rem !important; border-radius: 0 0 var(--au-r) var(--au-r); } /* Un en-tête vide ne doit pas creuser un trou en haut de la carte */ .kt-app__content .kt-portlet__head:empty, .kt-app__content .kt-portlet__head-label:empty{ display: none; } @media (max-width: 991.98px){ .kt-app__content .kt-portlet__head{ padding: .9rem 1rem .2rem !important; } .kt-app__content .kt-portlet__body{ padding: 1rem 1rem 1.15rem !important; } } /* Séparateurs Metronic : trop épais, trop sombres */ .kt-app__content .kt-separator{ margin: 1.4rem 0 !important; border-color: var(--au-line) !important; border-top-width: 1px !important; } /* ============================================================================= 8. FORMULAIRES Objectif mobile : cibles ≥ 44 px, police ≥ 16 px sur les champs (sinon iOS zoome à la mise au point), libellés au-dessus au lieu de colonnes étroites. ============================================================================= */ .kt-app__content .form-group{ margin-bottom: 1.15rem !important; } .kt-app__content .col-form-label, .kt-app__content .kt-form__label > label, .kt-app__content label:not(.kt-checkbox):not(.kt-radio):not(.kt-option):not(.custom-control-label){ font-size: .82rem; font-weight: 600; color: var(--au-ink); margin-bottom: .4rem; padding-top: 0; line-height: 1.4; } .kt-app__content .form-control, .kt-app__content .custom-select, .kt-app__content .select2-container--default .select2-selection--single, .kt-app__content .select2-container--default .select2-selection--multiple{ min-height: 46px; padding: .6rem .85rem; border: 1px solid var(--au-line-2) !important; border-radius: var(--au-r-sm) !important; background-color: var(--au-surface) !important; color: var(--au-text) !important; font-size: 16px; line-height: 1.45; box-shadow: none; transition: border-color .18s var(--au-ease), box-shadow .18s var(--au-ease), background .18s var(--au-ease); } .kt-app__content textarea.form-control{ min-height: 120px; line-height: 1.6; } .kt-app__content .form-control:focus, .kt-app__content .custom-select:focus, .kt-app__content .select2-container--default.select2-container--focus .select2-selection{ border-color: var(--au-green) !important; box-shadow: var(--au-ring) !important; outline: none; } .kt-app__content .form-control:disabled, .kt-app__content .form-control[readonly]{ background-color: var(--au-surface-2) !important; color: var(--au-muted) !important; cursor: not-allowed; } .kt-app__content .form-control::placeholder{ color: #9db0a6; } /* Aide sous les champs */ .kt-app__content .form-text{ font-size: .78rem; color: var(--au-muted) !important; margin-top: .35rem; } /* Groupes avec icône */ .kt-app__content .input-group-text{ border: 1px solid var(--au-line-2); border-radius: var(--au-r-sm); background: var(--au-surface-2); color: var(--au-muted); padding-inline: .85rem; } .kt-app__content .input-group > .form-control:not(:first-child), .kt-app__content .input-group > .input-group-prepend > .input-group-text{ border-start-start-radius: 0; border-end-start-radius: 0; } .kt-app__content .input-group > .input-group-prepend > .input-group-text{ border-start-start-radius: var(--au-r-sm); border-end-start-radius: var(--au-r-sm); border-start-end-radius: 0; border-end-end-radius: 0; border-inline-end: 0; } /* Erreurs de validation (jquery-validation / Laravel) */ .kt-app__content .form-control.is-invalid, .kt-app__content .form-control.error{ border-color: var(--au-danger) !important; background: #fff5f7 !important; } .kt-app__content .invalid-feedback, .kt-app__content label.error, .kt-app__content .error:not(input):not(select):not(textarea){ display: block; font-size: .78rem; font-weight: 600; color: var(--au-danger) !important; margin-top: .3rem; } .kt-app__content .form-control.is-valid, .kt-app__content .form-control.valid{ border-color: var(--au-green) !important; } /* Cases et boutons radio : cible confortable */ .kt-app__content .kt-checkbox, .kt-app__content .kt-radio, .kt-app__content .custom-control{ min-height: 32px; } .kt-app__content .custom-control-label{ padding-top: .1rem; } /* Libellés en colonne à gauche → empilés sur petit écran */ @media (max-width: 991.98px){ .kt-app__content .form-group.row{ margin-inline: 0; } .kt-app__content .form-group.row > label[class*="col-"], .kt-app__content .form-group.row > div[class*="col-"]{ flex: 0 0 100%; max-width: 100%; padding-inline: 0; } /* Les colonnes vides servaient à décaler le champ : inutiles empilées */ .kt-app__content .form-group.row > label[class*="col-"]:empty{ display: none; } } /* Barre d'actions du formulaire */ .kt-app__content .kt-form__actions{ padding: 1.1rem 0 0 !important; border-top: 1px solid var(--au-line); margin-top: .5rem; } .kt-app__content .kt-form__actions .row{ margin-inline: 0; } .kt-app__content .kt-form__actions [class*="col-"]{ padding-inline: 0; } .kt-app__content .kt-form__actions [class*="col-"]:empty{ display: none; } @media (max-width: 991.98px){ /* Sur téléphone, le bouton d'enregistrement reste accessible au pouce, juste au-dessus de la barre de navigation du site. */ .kt-app__content .kt-form__actions{ position: sticky; bottom: calc(var(--dock-h, 64px) + env(safe-area-inset-bottom, 0px)); z-index: 20; display: flex; flex-wrap: wrap; gap: .6rem; margin: 1rem calc(var(--au-gap) * -1) 0 !important; padding: .75rem var(--au-gap) calc(.75rem + env(safe-area-inset-bottom, 0px)) !important; background: rgba(255,255,255,.94); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-top: 1px solid var(--au-line); } .kt-app__content .kt-form__actions .row{ display: flex; width: 100%; gap: .6rem; } .kt-app__content .kt-form__actions [class*="col-"]{ flex: 1 1 auto; max-width: 100%; display: flex; gap: .6rem; } .kt-app__content .kt-form__actions .btn{ flex: 1 1 auto; } } /* ============================================================================= 9. BOUTONS ============================================================================= */ body.au-space #ts-main .btn, body.au-space #ts-main .kt-widget__label .btn{ border-radius: var(--au-r-pill) !important; padding: .58rem 1.25rem; font-weight: 600; letter-spacing: .01em; min-height: 42px; display: inline-flex; align-items: center; justify-content: center; gap: .45rem; transition: transform .16s var(--au-spring), box-shadow .2s var(--au-ease), background .2s var(--au-ease), filter .2s var(--au-ease); } body.au-space #ts-main .btn:active{ transform: translateY(1px) scale(.98); } body.au-space #ts-main .btn-sm{ min-height: 34px; padding: .35rem .9rem; font-size: .82rem; } body.au-space #ts-main .btn-xs{ min-height: 28px; padding: .2rem .65rem; font-size: .74rem; } /* Placé AVANT .btn-success : le bouton « Enregistrer » porte les deux classes (btn-label-brand btn-success) et doit rester le bouton principal. */ body.au-space #ts-main .btn-label-brand{ background: var(--au-green-100) !important; border: 0 !important; color: var(--au-green-600) !important; } body.au-space #ts-main .btn-success, body.au-space #ts-main .btn-primary, body.au-space #ts-main .btn-brand{ background: var(--au-grad) !important; border: 0 !important; color: #fff !important; box-shadow: 0 10px 22px -12px rgba(10,156,83,.9); } body.au-space #ts-main .btn-success:hover, body.au-space #ts-main .btn-primary:hover, body.au-space #ts-main .btn-brand:hover{ filter: brightness(1.06); color: #fff !important; } body.au-space #ts-main .btn-clean, body.au-space #ts-main .btn-secondary, body.au-space #ts-main .btn-light{ background: var(--au-surface) !important; border: 1px solid var(--au-line-2) !important; color: var(--au-text) !important; box-shadow: none; } body.au-space #ts-main .btn-clean:hover, body.au-space #ts-main .btn-secondary:hover, body.au-space #ts-main .btn-light:hover{ background: var(--au-surface-2) !important; } body.au-space #ts-main .btn-danger{ background: var(--au-danger) !important; border: 0 !important; color: #fff !important; box-shadow: 0 10px 22px -12px rgba(225,29,72,.9); } /* Sur téléphone, un bouton isolé prend toute la largeur : plus facile à viser */ @media (max-width: 575.98px){ body.au-space #ts-main .btn-block, .kt-app__content .Mybutton{ width: 100% !important; margin: 0 0 .6rem !important; } } /* ============================================================================= 10. INDICATEURS CHIFFRÉS (kt-widget24 / kt-widget12) ============================================================================= */ .kt-app__content .kt-widget24{ height: 100%; padding: 1rem 1.1rem !important; border-radius: var(--au-r-sm); background: var(--au-surface-2); border: 1px solid var(--au-line); transition: transform .22s var(--au-spring), box-shadow .22s var(--au-ease); } .kt-app__content .kt-widget24:hover{ transform: translateY(-2px); box-shadow: var(--au-shadow); } .kt-app__content .kt-widget24__details{ display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: .2rem .6rem; } .kt-app__content .kt-widget24__info{ min-width: 0; } .kt-app__content .kt-widget24__title{ margin: 0 !important; font-size: .76rem !important; font-weight: 700 !important; letter-spacing: .04em; text-transform: uppercase; color: var(--au-muted) !important; } .kt-app__content .kt-widget24__stats{ font-size: 1.65rem !important; font-weight: 800 !important; line-height: 1; letter-spacing: -.03em; font-variant-numeric: tabular-nums; } .kt-app__content .kt-widget24__stats.kt-font-success{ color: var(--au-green) !important; } .kt-app__content .kt-widget24__stats.kt-font-brand { color: var(--au-green-600) !important; } .kt-app__content .kt-widget24__stats.kt-font-warning{ color: var(--au-warning) !important; } .kt-app__content .kt-widget24__stats.kt-font-danger { color: var(--au-danger) !important; } .kt-app__content .kt-widget24__action{ display: flex; justify-content: space-between; gap: .5rem; margin-top: .55rem; padding-top: .55rem; border-top: 1px dashed var(--au-line-2); font-size: .78rem; color: var(--au-muted); } .kt-app__content .kt-widget24__number{ font-weight: 700; color: var(--au-ink); font-variant-numeric: tabular-nums; } .kt-app__content .kt-widget24__desc:empty{ display: none; } /* Metronic séparait les colonnes par des bordures pleines : trop dur */ .kt-app__content .row-col-separator-xl > [class*="col-"]{ border: 0 !important; } .kt-app__content .row-no-padding{ margin-inline: 0; } .kt-app__content .row-no-padding > [class*="col-"]{ padding: .35rem !important; } /* ============================================================================= 11. FAVORIS — étoile ============================================================================= */ .kt-app__content .add_favor{ cursor: pointer; } .kt-app__content .add_favor .star{ font-size: 1.2rem; color: var(--au-warning); transition: transform .25s var(--au-spring), filter .2s var(--au-ease); } .kt-app__content .add_favor:hover .star{ transform: scale(1.15) rotate(-8deg); } .kt-app__content .add_favor:active .star{ transform: scale(.85); } .kt-app__content .add_favor.au-pop .star{ animation: au-pop .45s var(--au-spring); } @keyframes au-pop{ 0% { transform: scale(1); } 35% { transform: scale(1.45) rotate(12deg); } 100%{ transform: scale(1); } } /* Carte de favori : logo, raison sociale, action — empilés et centrés. Toutes les cartes d'une même ligne ont la même hauteur. */ .kt-app__content .kt-widget--user-profile-4, .kt-app__content .kt-widget--user-profile-4 > .kt-widget__head{ display: flex; flex-direction: column; align-items: center; text-align: center; gap: .75rem; height: 100%; width: 100%; } .kt-app__content .kt-widget--user-profile-4 .kt-widget__media{ margin: 0 !important; } .kt-app__content .kt-widget--user-profile-4 .kt-widget__img, .kt-app__content .kt-widget__media img{ width: 84px; height: 84px; max-width: 84px !important; border-radius: 16px; object-fit: contain; background: #fff; box-shadow: 0 0 0 1px var(--au-line); } .kt-app__content .kt-widget--user-profile-4 .kt-widget__content{ display: flex; flex: 1 1 auto; width: 100%; } .kt-app__content .kt-widget--user-profile-4 .kt-widget__section{ display: flex; flex-direction: column; align-items: center; gap: .6rem; width: 100%; } .kt-app__content .kt-widget__username{ font-size: .95rem !important; font-weight: 700 !important; color: var(--au-ink) !important; line-height: 1.35; text-decoration: none !important; } .kt-app__content .kt-widget__username:hover{ color: var(--au-green-600) !important; } .kt-app__content .kt-widget__button:empty{ display: none; } .kt-app__content .kt-widget--user-profile-4 .kt-widget__action{ width: 100%; } .kt-app__content .kt-widget--user-profile-4 .kt-widget__action .btn{ width: 100%; } /* Dès qu'il y a plusieurs colonnes, les boutons s'alignent en bas de ligne */ @media (min-width: 576px){ .kt-app__content .kt-widget--user-profile-4 .kt-widget__action{ margin-top: auto; } } /* Sur téléphone, une seule carte par ligne : la disposition verticale gâchait la moitié de l'écran. On passe en ligne — logo, raison sociale, action. */ @media (max-width: 575.98px){ .kt-app__content .kt-widget--user-profile-4 > .kt-widget__head{ flex-direction: row; align-items: center; text-align: start; gap: .9rem; } .kt-app__content .kt-widget--user-profile-4 .kt-widget__img{ width: 60px; height: 60px; max-width: 60px !important; border-radius: 13px; } .kt-app__content .kt-widget--user-profile-4 .kt-widget__section{ align-items: flex-start; gap: .5rem; padding-inline-end: 2rem; /* laisse la place à l'étoile du coin */ } .kt-app__content .kt-widget--user-profile-4 .kt-widget__action{ width: auto; } .kt-app__content .kt-widget--user-profile-4 .kt-widget__action .btn{ width: auto; } .kt-app__content .au-card-col{ margin-bottom: .7rem; } .kt-app__content .kt-portlet__head.au-flat{ padding: .5rem .55rem !important; } } /* Metronic réservait 40 px sous chaque carte : la gouttière de grille suffit */ .kt-app__content .kt-portlet__body.kt-margin-b-40{ margin-bottom: 0 !important; } /* Grille des cartes (marquée par auth-ui.js) : 1 → 2 → 3 → 4 colonnes */ .kt-app__content .au-card-col{ display: flex; flex: 1 1 240px; max-width: 100%; padding-inline: .5rem; margin-bottom: 1rem; } .kt-app__content .au-card-col > .kt-portlet{ width: 100%; margin-bottom: 0 !important; } @media (min-width: 576px){ .kt-app__content .au-card-col{ flex-basis: 45%; max-width: 50%; } } @media (min-width: 992px){ .kt-app__content .au-card-col{ flex-basis: 30%; max-width: 33.333%; } } @media (min-width: 1400px){ .kt-app__content .au-card-col{ flex-basis: 22%; max-width: 25%; } } /* ============================================================================= 12. ASSISTANT DE MODIFICATION (kt-wizard-v1) Les 6 étapes se chevauchaient sur téléphone : on les fait défiler horizontalement, l'étape courante est ramenée dans le champ de vision par JS. ============================================================================= */ .kt-app__content .kt-wizard-v1__nav{ padding: .5rem 0 !important; } .kt-app__content .kt-wizard-v1__nav-items{ display: flex !important; flex-wrap: nowrap !important; gap: .35rem; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -webkit-overflow-scrolling: touch; padding-bottom: .35rem; } .kt-app__content .kt-wizard-v1__nav-items::-webkit-scrollbar{ display: none; } .kt-app__content .kt-wizard-v1__nav-item{ flex: 0 0 auto !important; width: auto !important; min-width: 84px; padding: .6rem .75rem !important; border-radius: var(--au-r-sm); text-align: center; opacity: .55; transition: opacity .2s var(--au-ease), background .2s var(--au-ease); } .kt-app__content .kt-wizard-v1__nav-item[data-ktwizard-state="current"], .kt-app__content .kt-wizard-v1__nav-item[data-ktwizard-state="done"]{ opacity: 1; } .kt-app__content .kt-wizard-v1__nav-item[data-ktwizard-state="current"]{ background: var(--au-green-50); box-shadow: inset 0 -3px 0 var(--au-green); } .kt-app__content .kt-wizard-v1__nav-icon{ font-size: 1.7rem !important; margin-bottom: .15rem !important; color: var(--au-green-600); } .kt-app__content .kt-wizard-v1__nav-label{ font-size: .74rem; font-weight: 600; line-height: 1.25; color: var(--au-text); } .kt-app__content .kt-wizard-v1__wrapper .kt-form{ width: 100% !important; padding: 0 0 1rem !important; } /* ============================================================================= 13. TABLEAUX ============================================================================= */ .kt-app__content .table{ margin-bottom: 0; font-size: .88rem; border-collapse: separate; border-spacing: 0; } .kt-app__content .table thead th{ border: 0 !important; border-bottom: 1px solid var(--au-line) !important; background: var(--au-surface-2); font-size: .72rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--au-muted); white-space: nowrap; padding: .7rem .8rem; } .kt-app__content .table td{ border-top: 1px solid var(--au-line) !important; padding: .75rem .8rem; vertical-align: middle; } .kt-app__content .table tbody tr{ transition: background .15s var(--au-ease); } .kt-app__content .table tbody tr:hover{ background: var(--au-green-50); } /* Enveloppe de défilement ajoutée par auth-ui.js */ .au-table-scroll{ overflow-x: auto; -webkit-overflow-scrolling: touch; margin-inline: -.25rem; padding-inline: .25rem; scrollbar-width: thin; } /* ============================================================================= 14. DIVERS (badges, alertes, onglets, select2, ruban) ============================================================================= */ .kt-app__content .kt-badge{ border-radius: var(--au-r-pill) !important; font-weight: 700; letter-spacing: .01em; } .kt-app__content .kt-label, .kt-app__content .m-label--single{ font-size: .8rem; color: var(--au-muted); } .kt-app__content .alert{ border: 1px solid var(--au-line) !important; border-radius: var(--au-r) !important; padding: .95rem 1.1rem; } .kt-app__content .alert-success{ background: var(--au-green-50) !important; border-color: var(--au-green-100) !important; color: #075c33 !important; } .kt-app__content .alert-danger { background: #fff1f4 !important; border-color: #ffd7de !important; color: #8f0f2d !important; } .kt-app__content .nav-tabs{ border-bottom: 1px solid var(--au-line); gap: .25rem; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; } .kt-app__content .nav-tabs::-webkit-scrollbar{ display: none; } .kt-app__content .nav-tabs .nav-link{ border: 0 !important; border-radius: var(--au-r-sm) var(--au-r-sm) 0 0; padding: .65rem 1rem; font-weight: 600; color: var(--au-muted) !important; white-space: nowrap; position: relative; } .kt-app__content .nav-tabs .nav-link.active{ color: var(--au-green-600) !important; background: transparent !important; } .kt-app__content .nav-tabs .nav-link.active::after{ content: ""; position: absolute; inset-inline: .6rem; bottom: -1px; height: 3px; border-radius: 3px 3px 0 0; background: var(--au-grad); } .kt-app__content .select2-container{ width: 100% !important; } .kt-app__content .select2-container--default .select2-selection--single .select2-selection__rendered{ line-height: 30px; padding-inline-start: 0; color: var(--au-text); } .kt-app__content .select2-container--default .select2-selection--single .select2-selection__arrow{ height: 44px; } /* Le ruban d'angle reste au-dessus, sans rogner la carte : un overflow:hidden ici couperait les listes déroulantes (select2, dropdown) ouvertes dedans. */ .kt-app__content .ts-ribbon-corner{ z-index: 2; } /* ============================================================================= 15. ÉTAT VIDE Un écran vide est une invitation à agir, pas un cul-de-sac. ============================================================================= */ .au-empty{ text-align: center; padding: 2.5rem 1.25rem; color: var(--au-muted); } .au-empty__icon{ width: 56px; height: 56px; margin: 0 auto .85rem; display: grid; place-items: center; border-radius: 50%; background: var(--au-green-50); color: var(--au-green); font-size: 1.4rem; } .au-empty__title{ font-size: 1rem; font-weight: 700; color: var(--au-ink); margin-bottom: .3rem; } .au-empty__text{ font-size: .88rem; margin: 0; } /* ============================================================================= 16. ANIMATIONS D'ENTRÉE Uniquement sur les éléments marqués par auth-ui.js : sans JavaScript, rien n'est masqué. ============================================================================= */ [data-au-in]{ opacity: 0; animation: au-rise .55s var(--au-ease) forwards; animation-delay: calc(var(--au-i, 0) * 60ms); } @keyframes au-rise{ from{ opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } } [data-au-in="bar"]{ animation-name: au-drop; animation-delay: 0ms; } @keyframes au-drop{ from{ opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } } [data-au-in="rail"]{ animation-name: au-rise; animation-delay: 90ms; } /* Squelette de chargement, utilisable par les blocs remplis en AJAX */ .au-skeleton{ position: relative; overflow: hidden; background: var(--au-line); border-radius: var(--au-r-sm); color: transparent !important; } .au-skeleton::after{ content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, rgba(255,255,255,.75), transparent); animation: au-shimmer 1.4s infinite; } @keyframes au-shimmer{ to{ transform: translateX(100%); } } /* ============================================================================= 17. MODE SOMBRE (body.navbar-dark, piloté par le sélecteur du site) ============================================================================= */ body.navbar-dark.au-space{ --au-surface: #10201a; --au-surface-2: #16291f; --au-bg: #0a1611; --au-text: #e6f2ec; --au-ink: #f2fbf6; --au-muted: #9ab5a7; --au-line: rgba(255,255,255,.10); --au-line-2: rgba(255,255,255,.18); --au-green-50: rgba(10,156,83,.14); --au-green-100: rgba(10,156,83,.24); } body.navbar-dark .kt-app__content .kt-portlet, body.navbar-dark .kt-app__aside > .kt-portlet{ background: var(--au-surface) !important; border-color: var(--au-line) !important; box-shadow: none !important; } body.navbar-dark .kt-subheader__title, body.navbar-dark #asidemenu .kt-widget__content h6{ color: var(--au-ink) !important; } body.navbar-dark .kt-app__content .form-control, body.navbar-dark .kt-app__content .custom-select{ background-color: var(--au-surface-2) !important; color: var(--au-text) !important; } body.navbar-dark .kt-subheader{ background: rgba(10,22,17,.9); } body.navbar-dark .kt-app__content .kt-form__actions{ background: rgba(10,22,17,.94); } body.navbar-dark .au-chip{ background: var(--au-surface); color: var(--au-text) !important; } body.navbar-dark .kt-subheader__mobile-toggle{ background: var(--au-surface); } body.navbar-dark .kt-subheader__mobile-toggle > span, body.navbar-dark .kt-subheader__mobile-toggle > span::before, body.navbar-dark .kt-subheader__mobile-toggle > span::after{ background: var(--au-ink); } body.navbar-dark .kt-app__aside{ background: var(--au-surface); } /* ============================================================================= 18. ARABE / RTL Les vues posent dir="rtl" en ligne sur les conteneurs ; les propriétés logiques suivent. Il reste quelques corrections de sens. ============================================================================= */ /* Le sens du texte : les vues posent dir="rtl" en ligne sur #asidemenu et sur la colonne de contenu. auth-ui.js l'étend à la barre de titre, au rail et au tiroir — trois blocs que le gabarit ne couvrait pas. Les propriétés logiques suivent alors toutes seules ; il ne reste que ces retouches. */ html[lang="ar"] #asidemenu .kt-widget__desc, html[lang="ar"] .kt-subheader__title{ letter-spacing: 0; } html[lang="ar"] .kt-subheader__mobile-toggle > span::after{ margin-inline-start: auto; } /* ============================================================================= 19. SOCLE QUALITÉ ============================================================================= */ .kt-app a:focus-visible, .kt-app button:focus-visible, .kt-app input:focus-visible, .kt-app select:focus-visible, .kt-app textarea:focus-visible, .au-chip:focus-visible{ outline: 3px solid rgba(10,156,83,.55); outline-offset: 2px; border-radius: 8px; } @media (prefers-reduced-motion: reduce){ [data-au-in]{ animation: none !important; opacity: 1 !important; transform: none !important; } .kt-app__aside, .au-scrim, .kt-subheader, #asidemenu .kt-widget__item, #asidemenu .progress-bar{ transition-duration: .01ms !important; animation: none !important; } .kt-subheader__mobile-toggle.au-hint::after{ animation: none; } } @media print{ .kt-app__aside, .au-rail, .au-scrim, .kt-subheader__mobile-toggle, .kt-app__content .kt-form__actions{ display: none !important; } .kt-app{ display: block !important; } .kt-app__content .kt-portlet{ box-shadow: none !important; border: 1px solid #ddd !important; } } /* ============================================================================= 20. CORRECTIFS COMPLÉMENTAIRES DE L'ESPACE Relevés sur les captures du serveur (9 août). ============================================================================= */ /* --- 20.1 Pastilles bleues ------------------------------------------------- Les « Caractéristiques » de la page profil et les étiquettes d'état sortaient en bleu Metronic (#5d78ff), sans rapport avec la charte verte du site. */ body.au-space #ts-main .kt-badge--brand, body.au-space #ts-main .kt-badge--primary, body.au-space #ts-main .badge-primary, body.au-space #ts-main .badge-brand, body.au-space #ts-main .label-primary, body.au-space #ts-main .m-badge--brand{ background: var(--au-green-100) !important; border-color: transparent !important; color: var(--au-green-600) !important; } body.au-space #ts-main .kt-badge, body.au-space #ts-main .badge{ border-radius: var(--au-r-pill) !important; padding: .3rem .75rem; font-size: .74rem; font-weight: 700; letter-spacing: .01em; } body.au-space #ts-main .kt-badge--success, body.au-space #ts-main .badge-success{ background: var(--au-green-100) !important; color: var(--au-green-600) !important; } body.au-space #ts-main .kt-badge--danger, body.au-space #ts-main .badge-danger{ background: #ffe4ea !important; color: #a11036 !important; } /* Liste de caractéristiques : des pastilles qui respirent, alignées en grille */ body.au-space #ts-main .kt-widget__subtitel + div, body.au-space #ts-main .au-taglist{ display: flex; flex-wrap: wrap; gap: .4rem; } /* --- 20.2 Boutons ne contenant qu'une icône -------------------------------- Les croix de suppression de la page Paramètres faisaient 56 px avec un halo rouge : elles écrasaient la donnée qu'elles accompagnent. auth-ui.js marque tout bouton sans texte ; on en fait une cible ronde, discrète et régulière. */ body.au-space #ts-main .btn.au-iconbtn, body.au-auth #ts-main .btn.au-iconbtn{ width: 38px; min-width: 38px; height: 38px; min-height: 38px; padding: 0 !important; border-radius: 50% !important; box-shadow: none !important; font-size: .9rem; line-height: 1; } body.au-space #ts-main .btn.au-iconbtn.btn-danger{ background: #fff0f3 !important; color: var(--au-danger) !important; border: 1px solid #ffd7de !important; } body.au-space #ts-main .btn.au-iconbtn.btn-danger:hover{ background: var(--au-danger) !important; color: #fff !important; border-color: transparent !important; transform: rotate(90deg); } body.au-space #ts-main .btn.au-iconbtn i{ margin: 0; } /* Ligne d'e-mail des paramètres : la case, l'adresse et la croix sur une ligne */ body.au-space #ts-main .au-iconbtn-row{ display: flex; align-items: center; gap: .75rem; padding: .3rem 0; } body.au-space #ts-main .au-iconbtn-row > *:first-child{ flex: 1 1 auto; min-width: 0; } /* --- 20.3 Interrupteurs ---------------------------------------------------- */ body.au-space #ts-main .custom-switch .custom-control-label::before{ height: 24px; width: 44px; border-radius: var(--au-r-pill); border-color: var(--au-line-2); background-color: var(--au-line); transition: background-color .25s var(--au-ease); } body.au-space #ts-main .custom-switch .custom-control-label::after{ height: 18px; width: 18px; border-radius: 50%; top: calc(.25rem + 3px); left: calc(-2.25rem + 3px); background-color: #fff; transition: transform .25s var(--au-spring); } body.au-space #ts-main .custom-switch .custom-control-input:checked ~ .custom-control-label::before{ background: var(--au-grad) !important; border-color: transparent !important; } body.au-space #ts-main .custom-switch .custom-control-input:checked ~ .custom-control-label::after{ transform: translateX(20px); } /* --- 20.4 Indicateurs chiffrés : deux colonnes sur téléphone --------------- Cinq compteurs empilés pleine largeur occupaient un écran entier. */ @media (max-width: 767.98px){ body.au-space #ts-main .au-stat-col{ flex: 1 1 calc(50% - .5rem) !important; max-width: calc(50% - .5rem) !important; padding: .25rem !important; } body.au-space #ts-main .au-stat-col .kt-widget24{ height: 100%; padding: .8rem .85rem !important; } body.au-space #ts-main .au-stat-col .kt-widget24__stats{ font-size: 1.35rem !important; } body.au-space #ts-main .au-stat-col .kt-widget24__title{ font-size: .68rem !important; } } /* --- 20.5 Débordements de texte ------------------------------------------- Les URL de publicités sortaient de leur carte. */ body.au-space #ts-main .kt-portlet__body, body.au-space #ts-main .kt-widget__content, body.au-auth #ts-main .kt-portlet__body{ overflow-wrap: anywhere; word-break: break-word; } body.au-space #ts-main .kt-widget__desc, body.au-space #ts-main .kt-subheader__title{ word-break: normal; } /* Vignettes de produits et de publicités : cadrage régulier */ body.au-space #ts-main .kt-widget__media > img, body.au-space #ts-main .card-img-top{ display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: var(--au-r-sm); } /* --- 20.6 Assistant de modification : étape courante ------------------------ Le thème superpose ses propres décorations à l'étape active : un grand aplat masquait l'icône et rognait le libellé. */ body.au-space #ts-main .kt-wizard-v1__nav-item::before, body.au-space #ts-main .kt-wizard-v1__nav-item::after, body.au-space #ts-main .kt-wizard-v1__nav-item .kt-wizard-v1__nav-body::before, body.au-space #ts-main .kt-wizard-v1__nav-item .kt-wizard-v1__nav-body::after{ display: none !important; content: none !important; } body.au-space #ts-main .kt-wizard-v1__nav-item > *{ position: relative; z-index: 1; } body.au-space #ts-main .kt-wizard-v1__nav-item{ min-width: 96px; max-width: 150px; overflow: visible; background-image: none !important; } body.au-space #ts-main .kt-wizard-v1__nav-label{ white-space: normal; overflow-wrap: anywhere; } body.au-space #ts-main .kt-wizard-v1__nav-item[data-ktwizard-state="current"]{ background: var(--au-green-50) !important; box-shadow: inset 0 -3px 0 var(--au-green); } body.au-space #ts-main .kt-wizard-v1__nav-item[data-ktwizard-state="done"] .kt-wizard-v1__nav-icon{ color: var(--au-green) !important; } /* --- 20.7 Ruban d'angle --------------------------------------------------- */ body.au-space #ts-main .ts-ribbon-corner{ inset-inline-start: 0; max-width: 60%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* ============================================================================= 21. PAGES D'AUTHENTIFICATION Connexion, inscription, mot de passe oublié, réinitialisation, création d'entreprise, page de confirmation. Portée : body.au-auth (posée par Blade). ============================================================================= */ /* --- 21.1 Décor de page --------------------------------------------------- Un fond vivant mais discret : deux halos verts très dilués sur le fond clair. Il remplace le grand aplat blanc vide qui occupait les deux tiers de l'écran. */ body.au-auth #ts-main{ position: relative; background: radial-gradient(60rem 32rem at 8% -8%, rgba(10,156,83,.10), transparent 62%), radial-gradient(48rem 30rem at 100% 12%, rgba(61,220,132,.12), transparent 60%), var(--au-bg); min-height: calc(100vh - var(--hdr-h, 112px)); min-height: calc(100svh - var(--hdr-h, 112px)); } body.au-auth #page-title, body.au-auth #submitted{ padding-top: 0 !important; } body.au-auth #page-title .ts-title{ text-align: center; padding-top: clamp(1.75rem, 4vw, 3rem); margin-bottom: 0; } body.au-auth #page-title h2{ font-size: clamp(1.6rem, 1.1rem + 2vw, 2.4rem) !important; font-weight: 800 !important; letter-spacing: -.025em; color: var(--au-ink) !important; margin: 0 !important; } body.au-auth #page-title h2::after{ margin-inline: auto; } /* --- 21.2 La carte -------------------------------------------------------- Le formulaire flottait au milieu d'un aplat blanc, sans limite visible. Il est désormais posé dans une carte, comme un vrai guichet. */ #login-register{ padding: clamp(1.5rem, 4vw, 2.75rem) var(--au-gap) clamp(3rem, 8vw, 5rem); } #login-register > div > div{ position: relative; width: 100%; max-width: 560px; margin-inline: auto; padding: clamp(1.4rem, 3.5vw, 2.5rem); background: var(--au-surface); border: 1px solid var(--au-line); border-radius: 26px; box-shadow: var(--au-shadow-lg); transition: max-width .45s var(--au-ease); } /* L'onglet « S'inscrire » contient un assistant complet : la carte s'élargit. */ #login-register.au-wide > div > div{ max-width: 1120px; } /* Neutralise les décalages Bootstrap posés sur des div hors .row */ #login-register [class*="col-"], #login-register [class*="offset-"]{ width: 100% !important; max-width: 100% !important; flex: none !important; margin-inline: 0 !important; padding-inline: 0 !important; } /* --- 21.3 Onglets : un sélecteur segmenté --------------------------------- */ #login-register-tabs{ display: flex; gap: .25rem; margin: 0 0 1.6rem !important; padding: .3rem; border: 0 !important; border-radius: var(--au-r-pill); background: var(--au-surface-2); box-shadow: inset 0 0 0 1px var(--au-line); } #login-register-tabs .nav-item{ flex: 1 1 0; margin: 0 !important; } #login-register-tabs .nav-link{ position: relative; display: block; padding: .7rem .8rem !important; border: 0 !important; border-radius: var(--au-r-pill) !important; text-align: center; color: var(--au-muted) !important; background: transparent !important; transition: color .22s var(--au-ease), background .28s var(--au-ease), box-shadow .28s var(--au-ease), transform .2s var(--au-spring); } #login-register-tabs .nav-link::after{ display: none !important; } #login-register-tabs .nav-link h3{ margin: 0 !important; font-size: .95rem !important; font-weight: 700 !important; letter-spacing: -.005em; line-height: 1.3; color: inherit !important; } #login-register-tabs .nav-link:hover{ color: var(--au-ink) !important; } #login-register-tabs .nav-link:active{ transform: scale(.97); } #login-register-tabs .nav-link.active{ background: var(--au-surface) !important; color: var(--au-green-600) !important; box-shadow: 0 1px 2px rgba(9,40,27,.06), 0 6px 16px -10px rgba(9,40,27,.5); } /* --- 21.4 Champs ---------------------------------------------------------- */ body.au-auth #ts-main .form-control, body.au-auth #ts-main .custom-select{ min-height: 52px; padding: .8rem 1.05rem; border: 1px solid var(--au-line-2) !important; border-radius: 14px !important; background-color: var(--au-surface) !important; color: var(--au-text) !important; font-size: 16px; box-shadow: none !important; transition: border-color .18s var(--au-ease), box-shadow .18s var(--au-ease); } body.au-auth #ts-main .form-control:focus, body.au-auth #ts-main .custom-select:focus{ border-color: var(--au-green) !important; box-shadow: var(--au-ring) !important; outline: none; } body.au-auth #ts-main .form-control::placeholder{ color: #9db0a6; } body.au-auth #ts-main .form-group{ margin-bottom: 1.05rem; } body.au-auth #ts-main label.form-label, body.au-auth #ts-main .col-form-label{ display: block; font-size: .84rem; font-weight: 600; color: var(--au-ink); margin-bottom: .4rem; text-align: start !important; } /* Textes d'aide : ils sortaient en bleu et se lisaient comme des liens */ body.au-auth #ts-main .span_msg, body.au-auth #ts-main .form-text, body.au-auth #ts-main .ts-text-color-light{ display: block; margin-top: .35rem; font-size: .78rem !important; line-height: 1.45; color: var(--au-muted) !important; } body.au-auth #ts-main .text-error, body.au-auth #ts-main label.error{ display: block; margin-top: .3rem; font-size: .78rem; font-weight: 600; color: var(--au-danger) !important; } /* Œil « afficher le mot de passe » : intégré au champ */ body.au-auth #ts-main .ts-has-password-toggle{ position: relative; display: block; } body.au-auth #ts-main .ts-has-password-toggle .form-control{ width: 100% !important; padding-inline-end: 3.2rem; border-right: 1px solid var(--au-line-2) !important; } body.au-auth #ts-main .ts-has-password-toggle .input-group-append{ position: absolute; inset-inline-end: 6px; top: 50%; transform: translateY(-50%); z-index: 4; } body.au-auth #ts-main .ts-has-password-toggle .input-group-text{ width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 0 !important; border-radius: 50%; background: transparent !important; color: var(--au-muted); cursor: pointer; transition: background .2s var(--au-ease), color .2s var(--au-ease); } body.au-auth #ts-main .ts-has-password-toggle .input-group-text:hover{ background: var(--au-green-50) !important; color: var(--au-green-600); } /* Case « Se souvenir de moi » */ body.au-auth #ts-main .custom-checkbox .custom-control-label{ padding-top: .15rem; font-size: .9rem; color: var(--au-muted); cursor: pointer; } body.au-auth #ts-main .custom-control-input:checked ~ .custom-control-label::before{ background: var(--au-grad) !important; border-color: transparent !important; } /* --- 21.5 Actions --------------------------------------------------------- */ body.au-auth #ts-main .btn{ min-height: 48px; padding: .7rem 1.4rem; border-radius: var(--au-r-pill) !important; font-weight: 700; letter-spacing: .01em; display: inline-flex; align-items: center; justify-content: center; gap: .5rem; transition: transform .16s var(--au-spring), box-shadow .22s var(--au-ease), filter .22s var(--au-ease); } body.au-auth #ts-main .btn:active{ transform: translateY(1px) scale(.985); } body.au-auth #ts-main .btn-primary, body.au-auth #ts-main .btn-brand, body.au-auth #ts-main .btn-success{ background: var(--au-grad) !important; border: 0 !important; color: #fff !important; box-shadow: 0 12px 26px -14px rgba(10,156,83,.95); } body.au-auth #ts-main .btn-primary:hover, body.au-auth #ts-main .btn-brand:hover, body.au-auth #ts-main .btn-success:hover{ filter: brightness(1.07); color: #fff !important; } body.au-auth #ts-main .btn-secondary, body.au-auth #ts-main .btn-light, body.au-auth #ts-main .btn-clean{ background: var(--au-surface) !important; border: 1px solid var(--au-line-2) !important; color: var(--au-text) !important; box-shadow: none !important; } body.au-auth #ts-main .btn-xs{ min-height: 44px; } /* La ligne « se souvenir + bouton » : empilée, bouton pleine largeur */ #login_form .ts-center__vertical{ display: flex !important; flex-direction: column; align-items: stretch !important; gap: .35rem; margin-top: .4rem; } #login_form .ts-center__vertical .custom-control{ margin-bottom: .6rem !important; } #login_form #login_red{ width: 100%; } /* Séparateur + lien « mot de passe oublié » */ #login_form hr{ margin: 1.5rem 0 1.1rem; border: 0; border-top: 1px solid var(--au-line); } #login_form > a[href]{ display: inline-flex; align-items: center; justify-content: center; gap: .45rem; width: 100%; padding: .6rem; border-radius: var(--au-r-pill); font-size: .88rem; text-decoration: none !important; transition: background .2s var(--au-ease); } #login_form > a[href]:hover{ background: var(--au-green-50); } #login_form > a[href] span{ color: var(--au-muted) !important; } #login_form > a[href]:hover span{ color: var(--au-green-600) !important; } /* --- 21.6 Encadré d'avertissement de l'onglet inscription ----------------- */ body.au-auth #ts-main .alert{ border: 1px solid var(--au-line) !important; border-radius: var(--au-r) !important; background: var(--au-green-50) !important; padding: 1.1rem 1.25rem !important; margin-bottom: 1.5rem; } body.au-auth #ts-main .alert h5{ font-size: 1rem !important; font-weight: 700 !important; color: var(--au-ink) !important; margin-bottom: .4rem !important; } body.au-auth #ts-main .alert p{ font-size: .88rem; line-height: 1.55; color: var(--au-muted); margin-bottom: .35rem; } body.au-auth #ts-main .alert i.display-4{ font-size: 1.6rem !important; color: var(--au-green) !important; opacity: 1 !important; margin: 0 .9rem 0 0 !important; padding: 0 !important; } body.au-auth #ts-main .alert .btn{ min-height: 40px; font-size: .85rem; margin-inline-end: .5rem; } /* --- 21.7 Assistant d'inscription (kt-wizard-v2) -------------------------- */ body.au-auth #ts-main .kt-portlet{ border: 0 !important; border-radius: 0 !important; box-shadow: none !important; background: transparent !important; margin: 0 !important; } body.au-auth #ts-main .kt-portlet__body{ padding: 0 !important; } body.au-auth #ts-main .kt-wizard-v2{ display: grid; grid-template-columns: minmax(0, 290px) minmax(0, 1fr); gap: clamp(1.25rem, 3vw, 2.5rem); align-items: start; } body.au-auth #ts-main .kt-wizard-v2__aside{ padding: 0 !important; background: transparent !important; border: 0 !important; } body.au-auth #ts-main .kt-wizard-v2__nav{ padding: 0 !important; } body.au-auth #ts-main .kt-wizard-v2__nav-items{ display: flex; flex-direction: column; gap: .4rem; padding: 0 !important; } body.au-auth #ts-main .kt-wizard-v2__nav-item{ position: relative; padding: .9rem 1rem !important; margin: 0 !important; border: 1px solid transparent !important; border-radius: var(--au-r-sm); background: var(--au-surface-2); transition: background .22s var(--au-ease), border-color .22s var(--au-ease), transform .2s var(--au-spring); } body.au-auth #ts-main .kt-wizard-v2__nav-item::before, body.au-auth #ts-main .kt-wizard-v2__nav-item::after{ display: none !important; content: none !important; } body.au-auth #ts-main .kt-wizard-v2__nav-item:hover{ transform: translateY(-1px); } body.au-auth #ts-main .kt-wizard-v2__nav-body{ display: flex; align-items: center; gap: .8rem; } body.au-auth #ts-main .kt-wizard-v2__nav-icon{ flex: none; display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 12px; background: var(--au-surface); box-shadow: 0 0 0 1px var(--au-line); font-size: 1.3rem !important; color: var(--au-muted) !important; transition: background .22s var(--au-ease), color .22s var(--au-ease); } body.au-auth #ts-main .kt-wizard-v2__nav-label{ min-width: 0; } body.au-auth #ts-main .kt-wizard-v2__nav-label-title{ font-size: .93rem; font-weight: 700; color: var(--au-ink); line-height: 1.3; } body.au-auth #ts-main .kt-wizard-v2__nav-label-desc{ font-size: .78rem; color: var(--au-muted); line-height: 1.4; margin-top: .1rem; } body.au-auth #ts-main .kt-wizard-v2__nav-item[data-ktwizard-state="current"]{ background: var(--au-green-50); border-color: var(--au-green-100) !important; } body.au-auth #ts-main .kt-wizard-v2__nav-item[data-ktwizard-state="current"] .kt-wizard-v2__nav-icon{ background: var(--au-grad); color: #fff !important; box-shadow: 0 8px 18px -10px rgba(10,156,83,.9); } body.au-auth #ts-main .kt-wizard-v2__nav-item[data-ktwizard-state="done"] .kt-wizard-v2__nav-icon{ color: var(--au-green-600) !important; background: var(--au-green-100); } body.au-auth #ts-main .kt-wizard-v2__wrapper{ padding: 0 !important; } body.au-auth #ts-main .kt-wizard-v2__wrapper .kt-form{ width: 100% !important; padding: 0 !important; } body.au-auth #ts-main .kt-heading{ font-size: 1.15rem !important; font-weight: 700 !important; color: var(--au-ink) !important; margin: 0 0 1.1rem !important; padding: 0 !important; } body.au-auth #ts-main .kt-form__actions{ display: flex; flex-wrap: wrap; gap: .6rem; justify-content: flex-end; padding-top: 1.25rem !important; margin-top: 1rem; border-top: 1px solid var(--au-line); } /* Assistant en bandeau (page « créer une entreprise ») : nav horizontale */ body.au-auth #ts-main .kt-wizard-v2.kt-wizard-v2--white{ display: block; } body.au-auth #ts-main .au-wizard-band > .kt-wizard-v2__nav .kt-wizard-v2__nav-items{ flex-direction: row; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: .4rem !important; margin-bottom: 1.25rem; } body.au-auth #ts-main .au-wizard-band > .kt-wizard-v2__nav .kt-wizard-v2__nav-items::-webkit-scrollbar{ display: none; } body.au-auth #ts-main .au-wizard-band > .kt-wizard-v2__nav .kt-wizard-v2__nav-item{ flex: 0 0 auto; min-width: 108px; text-align: center; } body.au-auth #ts-main .au-wizard-band > .kt-wizard-v2__nav .kt-wizard-v2__nav-body{ flex-direction: column; gap: .45rem; } @media (max-width: 991.98px){ body.au-auth #ts-main .kt-wizard-v2{ display: block; } body.au-auth #ts-main .kt-wizard-v2__nav-items{ flex-direction: row; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-bottom: 1.4rem; padding-bottom: .4rem !important; } body.au-auth #ts-main .kt-wizard-v2__nav-items::-webkit-scrollbar{ display: none; } body.au-auth #ts-main .kt-wizard-v2__nav-item{ flex: 0 0 auto; min-width: 168px; } body.au-auth #ts-main .kt-wizard-v2__nav-label-desc{ display: none; } body.au-auth #ts-main .kt-form__actions{ position: sticky; bottom: calc(var(--dock-h, 64px) + env(safe-area-inset-bottom, 0px)); z-index: 20; justify-content: stretch; margin: 1rem calc(var(--au-gap) * -1) 0; padding: .75rem var(--au-gap) calc(.75rem + env(safe-area-inset-bottom, 0px)) !important; background: rgba(255,255,255,.94); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-top: 1px solid var(--au-line); } body.au-auth #ts-main .kt-form__actions .btn{ flex: 1 1 auto; } } /* --- 21.8 Page de confirmation ------------------------------------------- */ body.au-auth #submitted .container{ max-width: 620px; padding: clamp(2rem, 6vw, 4rem) var(--au-gap); } body.au-auth #submitted [class*="col-"]{ width: 100% !important; max-width: 100% !important; margin-inline: 0 !important; padding: clamp(1.75rem, 4vw, 2.75rem); background: var(--au-surface); border: 1px solid var(--au-line); border-radius: 26px; box-shadow: var(--au-shadow-lg); } body.au-auth #submitted i.display-4{ font-size: 3rem !important; color: var(--au-green) !important; animation: au-check-pop .6s var(--au-spring) both; } @keyframes au-check-pop{ 0% { opacity: 0; transform: scale(.4); } 60% { transform: scale(1.12); } 100%{ opacity: 1; transform: scale(1); } } body.au-auth #submitted h1{ font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2rem) !important; font-weight: 800 !important; color: var(--au-ink) !important; } body.au-auth #submitted h4{ font-size: 1rem !important; font-weight: 400 !important; color: var(--au-muted) !important; margin-bottom: 1.5rem; } body.au-auth #submitted hr{ display: none; } /* --- 21.9 Mode sombre des pages d'authentification ----------------------- */ body.navbar-dark.au-auth{ --au-surface: #10201a; --au-surface-2: #16291f; --au-bg: #0a1611; --au-text: #e6f2ec; --au-ink: #f2fbf6; --au-muted: #9ab5a7; --au-line: rgba(255,255,255,.10); --au-line-2: rgba(255,255,255,.18); --au-green-50: rgba(10,156,83,.14); --au-green-100: rgba(10,156,83,.24); } body.navbar-dark.au-auth #login-register > div > div, body.navbar-dark.au-auth #submitted [class*="col-"]{ background: var(--au-surface); border-color: var(--au-line); } body.navbar-dark.au-auth #ts-main .kt-form__actions{ background: rgba(10,22,17,.94); } /* --- 21.10 Arabe --------------------------------------------------------- */ html[lang="ar"] #login-register-tabs .nav-link h3{ letter-spacing: 0; } /* ============================================================================= 22. ANIMATIONS SUPPLÉMENTAIRES ============================================================================= */ /* --- 22.1 Entrée de la carte d'authentification et de ses champs ---------- */ body.au-auth.au-js #page-title .ts-title{ animation: au-drop .5s var(--au-ease) both; } body.au-auth.au-js #login-register > div > div, body.au-auth.au-js #submitted [class*="col-"]{ animation: au-card-in .6s var(--au-ease) both .08s; } @keyframes au-card-in{ from{ opacity: 0; transform: translateY(22px) scale(.985); } to { opacity: 1; transform: none; } } body.au-auth.au-js .tab-pane.active [data-au-field]{ animation: au-rise .45s var(--au-ease) both; animation-delay: calc(220ms + var(--au-i, 0) * 55ms); } /* --- 22.2 Changement d'onglet -------------------------------------------- */ #login-register .tab-pane.active{ animation: au-tab-in .38s var(--au-ease) both; } @keyframes au-tab-in{ from{ opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } /* --- 22.3 Reflet sur le bouton principal --------------------------------- Un léger balayage lumineux au survol : le bouton d'action se distingue sans changer de couleur. */ body.au-space #ts-main .btn-success, body.au-space #ts-main .btn-primary, body.au-space #ts-main .btn-brand, body.au-auth #ts-main .btn-primary, body.au-auth #ts-main .btn-brand, body.au-auth #ts-main .btn-success{ position: relative; overflow: hidden; isolation: isolate; } body.au-space #ts-main .btn-success::after, body.au-space #ts-main .btn-primary::after, body.au-space #ts-main .btn-brand::after, body.au-auth #ts-main .btn-primary::after, body.au-auth #ts-main .btn-brand::after, body.au-auth #ts-main .btn-success::after{ content: ""; position: absolute; inset: 0 auto 0 -60%; width: 45%; z-index: -1; background: linear-gradient(100deg, transparent, rgba(255,255,255,.35), transparent); transform: translateX(0); transition: transform .65s var(--au-ease); } body.au-space #ts-main .btn-success:hover::after, body.au-space #ts-main .btn-primary:hover::after, body.au-space #ts-main .btn-brand:hover::after, body.au-auth #ts-main .btn-primary:hover::after, body.au-auth #ts-main .btn-brand:hover::after, body.au-auth #ts-main .btn-success:hover::after{ transform: translateX(400%); } /* --- 22.4 Apparition au défilement --------------------------------------- Les blocs situés sous la ligne de flottaison n'étaient pas animés : seule la première fournée du chargement l'était. */ [data-au-scroll]{ opacity: 0; transform: translateY(20px); transition: opacity .55s var(--au-ease), transform .55s var(--au-ease); } [data-au-scroll].au-seen{ opacity: 1; transform: none; } /* --- 22.5 Cartes : relief au survol -------------------------------------- */ body.au-space #ts-main .au-card-col > .kt-portlet{ transition: transform .25s var(--au-spring), box-shadow .25s var(--au-ease); } body.au-space #ts-main .au-card-col > .kt-portlet:hover{ transform: translateY(-3px); box-shadow: var(--au-shadow-lg) !important; } /* --- 22.6 Mouvement réduit ----------------------------------------------- */ @media (prefers-reduced-motion: reduce){ body.au-auth.au-js #page-title .ts-title, body.au-auth.au-js #login-register > div > div, body.au-auth.au-js #submitted [class*="col-"], body.au-auth.au-js .tab-pane.active [data-au-field], #login-register .tab-pane.active, body.au-auth #submitted i.display-4{ animation: none !important; opacity: 1 !important; transform: none !important; } [data-au-scroll]{ opacity: 1 !important; transform: none !important; transition: none !important; } body.au-space #ts-main .btn.au-iconbtn.btn-danger:hover{ transform: none; } } /* ============================================================================= 23. ASSISTANTS — BOUTONS D'ÉTAPE ----------------------------------------------------------------------------- RÉGRESSION INTRODUITE EN v2, corrigée ici. Le thème masque « Envoyer » tant qu'on n'est pas à la dernière étape, via des règles du type : .kt-wizard-v2[data-ktwizard-state="step-first"] [data-ktwizard-type="action-submit"]{ display:none } Ma règle générale `body.au-auth #ts-main .btn{ display:inline-flex }` porte un identifiant (#ts-main) : elle l'emportait sur celles du thème, et les trois boutons — Précédent, Envoyer, Suivante — apparaissaient dès la première étape. On rétablit la règle du thème avec la même force. ============================================================================= */ /* RETIRÉ EN v6 — ces règles faisaient exactement le contraire de leur but. Elles lisaient `data-ktwizard-state` sur la RACINE de l'assistant. Or, dans vos gabarits, la racine porte `step-first` écrit en dur et n'est jamais remise à jour : la règle « masquer Envoyer quand on est à la première étape » restait donc vraie jusqu'à la dernière, et son !important l'emportait même sur la consigne posée par le script. Le bouton d'envoi était introuvable. L'affichage de ces trois boutons est maintenant entièrement piloté par auth-ui.js (§12quater), qui lit la position réelle sur les contenus d'étape. Aucune règle CSS ne doit revenir décider de leur `display` ici. */ /* Disposition de la barre d'étapes : « Précédent » à gauche, l'action à droite. Les classes ml-5 du gabarit creusaient des écarts de 3 rem entre les boutons. */ body.au-auth #ts-main .kt-form__actions, body.au-space #ts-main .kt-wizard-v1__wrapper .kt-form__actions{ display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; justify-content: flex-end; } body.au-auth #ts-main .kt-form__actions .ml-5, body.au-auth #ts-main .kt-form__actions .mr-5, body.au-space #ts-main .kt-form__actions .ml-5, body.au-space #ts-main .kt-form__actions .mr-5{ margin-inline: 0 !important; } body.au-auth #ts-main [data-ktwizard-type="action-prev"], body.au-space #ts-main [data-ktwizard-type="action-prev"]{ margin-inline-end: auto !important; order: -1; } /* Ces « boutons » sont des
: sans cela, ils ne réagissent ni au clavier ni au curseur. */ body.au-auth #ts-main [data-ktwizard-type^="action-"], body.au-space #ts-main [data-ktwizard-type^="action-"]{ cursor: pointer; user-select: none; } @media (max-width: 575.98px){ body.au-auth #ts-main .kt-form__actions [data-ktwizard-type^="action-"]{ flex: 1 1 auto; } } /* ============================================================================= 24. ASSISTANT D'INSCRIPTION — DISPOSITION ET ÉTAPES NUMÉROTÉES ============================================================================= */ /* --- 24.1 Collision de classe ----------------------------------------------- Le gabarit de connexion écrit déjà `kt-wizard-v2--white` sur un assistant qui POSSÈDE une colonne latérale. Ma règle v2 se servait de cette même classe pour reconnaître les assistants « en bandeau » : la colonne latérale repassait donc en pleine largeur et le formulaire tombait dessous. On distingue les deux cas par une classe qui n'appartient qu'à cette feuille, posée par auth-ui.js. */ body.au-auth #ts-main .kt-wizard-v2.kt-wizard-v2--white{ display: grid; /* annule la règle fautive de la v2 */ } body.au-auth #ts-main .kt-wizard-v2.au-wizard-band{ display: block; } body.au-auth #ts-main .au-wizard-band > .kt-wizard-v2__nav .kt-wizard-v2__nav-items{ flex-direction: row; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: .4rem !important; margin-bottom: 1.25rem; } body.au-auth #ts-main .au-wizard-band > .kt-wizard-v2__nav .kt-wizard-v2__nav-items::-webkit-scrollbar{ display: none; } body.au-auth #ts-main .au-wizard-band .kt-wizard-v2__nav-item{ flex: 0 0 auto; min-width: 108px; text-align: center; } body.au-auth #ts-main .au-wizard-band .kt-wizard-v2__nav-body{ flex-direction: column; gap: .45rem; } /* --- 24.2 Étapes numérotées (colonne latérale) ------------------------------ Les glyphes flaticon ne se chargent pas sur la page de connexion : les trois pastilles apparaissaient vides. Un numéro d'étape ne dépend d'aucune police externe, et dit en plus où l'on en est. */ body.au-auth #ts-main .kt-wizard-v2__aside .kt-wizard-v2__nav-items{ counter-reset: au-step; } body.au-auth #ts-main .kt-wizard-v2__aside .kt-wizard-v2__nav-item{ counter-increment: au-step; } body.au-auth #ts-main .kt-wizard-v2__aside .kt-wizard-v2__nav-icon > i{ display: none; } body.au-auth #ts-main .kt-wizard-v2__aside .kt-wizard-v2__nav-icon::before{ content: counter(au-step); font-family: inherit; font-size: 1rem; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1; } /* Étape franchie : une coche à la place du numéro */ body.au-auth #ts-main .kt-wizard-v2__aside .kt-wizard-v2__nav-item[data-ktwizard-state="done"] .kt-wizard-v2__nav-icon::before{ content: "\2713"; font-size: 1.15rem; } /* Trait de liaison entre les étapes */ body.au-auth #ts-main .kt-wizard-v2__aside .kt-wizard-v2__nav-item + .kt-wizard-v2__nav-item::before{ content: ""; position: absolute; inset-inline-start: calc(1rem + 20px); top: -.4rem; width: 2px; height: .4rem; background: var(--au-line-2); display: block !important; } /* --- 24.3 Sélecteur de fichiers (bootstrap-fileinput) ---------------------- */ body.au-auth #ts-main .file-input .input-group{ flex-wrap: wrap; gap: .4rem; } body.au-auth #ts-main .file-input .form-control.file-caption{ flex: 1 1 220px; border-radius: 14px !important; } body.au-auth #ts-main .file-input .input-group-btn, body.au-auth #ts-main .file-input .input-group-append{ display: flex; gap: .4rem; } body.au-auth #ts-main .file-input .btn{ min-height: 44px; padding: .5rem 1rem; font-size: .85rem; font-weight: 600; } body.au-auth #ts-main .file-input .btn-default, body.au-auth #ts-main .file-input .btn-secondary{ background: var(--au-surface) !important; border: 1px solid var(--au-line-2) !important; color: var(--au-text) !important; } body.au-auth #ts-main .file-input .file-preview{ border: 1px dashed var(--au-line-2); border-radius: var(--au-r-sm); background: var(--au-surface-2); padding: .75rem; } body.au-auth #ts-main .file-input .krajee-default.file-preview-frame{ border-radius: var(--au-r-sm); box-shadow: 0 1px 2px rgba(9,40,27,.06); } /* --- 24.4 Consignes sous le sélecteur -------------------------------------- */ /* Uniquement les consignes de depot de documents : ce sont les seules a etre un