/* Architecture ====================================================================== (GLOBAL) */ body.trmdvsr-app-structure { /* IDENTIQUE MOBILE & DESKTOP : 1 OCCU. */ display: flex; /* F*ckin Footer */ flex-direction: column; justify-content: flex-start; /* ↕ */ align-items: center; /* ↔ */ width: 100%; min-height: 100%; margin: 0px; padding: 0px; font-family: Inter, sans-serif; box-sizing: border-box; background-color: var(--bleu-trmdvsr-pur); cursor: auto; } /* Empêche toute interaction avec la page */ body.is-blocked { pointer-events: none !important; user-select: none; cursor: wait; } [data-maskable] { display: none; } /* => INTERACTION : Sélecteurs d'attribut : Masque 'guidedMode' est off */ body.guidedMode [data-maskable].as-block { display: block; } body.guidedMode [data-maskable].as-flex { display: flex; } .conteneur-spa-global { /* div globale S. P. A. : 1 occ. (mention x2 ../trmdvsr-js) */ display: flow-root; position: relative; width: 100%; max-width: var(--largeur-conteneur-max); /* clamp => fluide */ min-height: var(--hauteur-content, 1px); height: auto; margin: 0; padding: 0; background-color: var(--blanc-pur); overflow: hidden; /* ‼️POUR DEBUG => A REACTIVER‼ */ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); transition: width 1s ease-out, height 0.8s ease-in-out, min-height 0.8s ease-in-out; } /*------------------------------------------------------------------------------------- [PAGES] */ .page { display: none; position: absolute; top: 0; left: 0; z-index: 10; width: 100%; max-width: var(--largeur-conteneur-max); height: auto; margin: 0; padding: 0 0 var(--espacement-large); background-color: var(--blanc-pur); box-shadow: -10px 0px 20px -5px rgba(var(--gris-trmdvsr-fonce-RGB), 0.4); transform: translateX(100%); /* positionne la page à droite */ opacity: 0; overflow: hidden; transition: transform 1s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.5s ease-in-out; will-change: transform, opacity; /* Optimise la perf */ } .page.active { /* => ANIMATION */ display: block; transform: translateX(0); /* Position cible: centre */ opacity: 1; } .page.transition-out { /* => ANIMATION */ z-index: 5; /* z-index ex-actif recule >> 5 pour ne pas se faire écraser */ transform: translateX(5%); /* Position cible : geré en JS */ opacity: 0.9; /* Opacité cible : 80% */ transition: transform 1s cubic-bezier(0.4, 0, 0.2, 1), opacity 1s ease-in-out; will-change: transform, opacity; /* Optimisation de performance */ } /* LAMES SPÉCIFIQUES : BOUTONS ======================================================= (GLOBAL) */ .button-solo { display: flex; justify-content: flex-end; } .conteneur-lame.flex-into-row.button-multi { flex-direction: column-reverse; /* action principale en haut */ justify-content: space-between; align-items: center; gap: calc(var(--espacement-button) / 2); padding: var(--espacement-large) var(--espacement-large) var(--espacement-tres-large); /* ↑ | ↔ | ↓ */ } /* Input & Forms ===================================================================== (MODULE) */ .composant-photo .form-input, .form-input, .form-select { -webkit-appearance: none; /* Pour Chrome/Safari */ -moz-appearance: none; /* Pour Firefox */ appearance: none; /* Standard */ width: 100%; height: var(--largeur-logo-bouton); margin: 0; /* Style de base */ padding: 0 1rem; /* Espace intérieur */ font-family: Inter, sans-serif; color: var(--bleu-trmdvsr-clair); cursor: pointer; outline: none; border: 2px solid var(--gris-trmdvsr-clair); border-radius: 0.5rem 0.5rem 0.75rem; /* (haut gauche) (haut droite & bas gauche) (bas droite) */ background-color: var(--blanc-pur); /* var(--blanc-trmdvsr); */ box-shadow: /* Ombres Style iOS */ 0 1px 2px rgba(0, 0, 0, 0.05), /* Ombre très légère et proche (pour la netteté) */ 0 4px 12px rgba(0, 0, 0, 0.08); /* Ombre plus diffuse et éloignée (pour la profondeur) */ transition: border-color 0.2s; } .composant-photo .form-input:focus, .form-input:focus, .form-select:focus { outline: none; border-color: var(--bleu-trmdvsr-clair); box-shadow: 0 0 4px 2px rgba(var(--bleu-trmdvsr-clair-RGB), 0.4); /* RGB gris fonce traumadvisor */ } .form-required { border-color: var(--bleu-trmdvsr-moyen); font-weight: 700; box-shadow: 0 0 10px 3px rgba(var(--bleu-trmdvsr-clair-RGB), 0.4); } /** .form-textarea { min-height: 100px; height: 100%; }*/ .form-sub { padding-top: var(--espacement-moyen); } /*------------------------------------------------------------------- */ .hero-section .trmdvsr-texte-h1 { padding-bottom: calc( 1.5 * var(--taille-texte)); } .hero-section { /* Conteneur fonctionnel le plus neutre possible */ position: relative; /* Référence pour l'élément absolute (la barre de recherche) */ display: flex; flex-direction: column; width: 100%; min-height: min(55vw, 20rem); margin: 0; padding: 0 0 5rem; background-color: var(--beige-trmdvsr); /*overflow: hidden;*/ } .hero-image-wrapper { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; /*overflow: hidden; */ } img.hero-image-render { display: flex; z-index: 2; width: 100%; height: 100%; object-fit: cover; object-position: center; /*aspect-ratio: 1600 / 552;*/ margin: 0; padding: 0; } .conteneur-lame.hero-content { position: relative; z-index: 2; width: 100% } /*------------------------------------------------------------------- */ .conteneur-lame.trmdvsr-texte-chapo { /* Pseudo-élément => effet lumière/texture */ margin: 0; background-color: var(--blanc-pur); } .trmdvsr-suprfld .trmdvsr-input.sprcmprtmnt { display: flex; flex-direction: column; } .trmdvsr-suprfld .form-input { width: 100%; height: var(--largeur-logo-bouton); box-shadow: none; transition: none; padding: 0 var(--espacement-court) 0 ; text-align: center; } .trmdvsr-suprfld .form-input:focus { outline: none; border-color: none; /* var(--bleu-trmdvsr-clair); */ box-shadow: none; /* 0 0 4px 2px rgba(var(--bleu-trmdvsr-clair-RGB), 0.4); */ } .trmdvsr-suprfld .trmdvsr-button { box-shadow: none; } .trmdvsr-suprfld .trmdvsr-button:hover { box-shadow: none; } .trmdvsr-suprfld .trmdvsr-button:active { box-shadow: none; } .trmdvsr-suprfld.trmdvsr-label.legende { position: absolute; left: 50%; bottom: -1.75rem; width: 100%; z-index: 4; color: var(--gris-trmdvsr-clair); transform: translateX(-50%); text-align: center; } .module-signup { text-align: center; position: relative} .module-signup .normalfield { padding: var(--espacement-court) var(--espacement-large) var(--espacement-tres-large); } .module-signup .normalfield .form-input.trmdvsr-sstexte { width: 100%; height: var(--largeur-logo-bouton); padding: 0 var(--espacement-court) 0 ; border-radius: 0.5rem 0.5rem 0.75rem; ; border: 2px solid var(--gris-trmdvsr-clair); } /* Message de succès */ .success-message { margin-top: var(--espacement-moyen) var(--espacement-large) var(--espacement-tres-large); padding: 0.75rem; background-color: var(--vert-trmdvsr-moyen); color: var(--blanc-pur); border-radius: var(--bordure-radius); max-width: 80%; display: none; /* Caché par défaut */ } .success-message.visible { display: block; position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); } /*------------------------------------------------------------------- */ .etapes-creation { /* Styles pour la liste complète (espacement, couleur du texte) */ list-style-type: "- "; color: var(--bleu-trmdvsr-moyen); margin-left: var(--espacement-large); padding-bottom: var(--espacement-court); } .etapes-creation li { font-weight: bold; } /* Styles pour les éléments de la liste */ /* Conteneur principal */ .adresseWrapper{ position: relative; width: 100%; height: var(--largeur-logo-bouton); } input#adresseSalle, input#nomSalle, select#typeEtablissement{ position: relative; } /* La liste de suggestions */ #suggestionsList { position: absolute; top: 100%; /* Juste en dessous de l'input */ left: 0; right: 0; z-index: 490; background-color: var(--blanc-pur); border: 1px solid #ddd; border-top: none; border-radius: 0 0 8px 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.15); list-style: none; padding: 0; margin: 0; max-height: 300px; overflow-y: auto; display: none; /* Piloté en JS */ flex-direction: column; } /* Chaque ligne de suggestion */ .suggestion-item { padding: 12px 15px; cursor: pointer; border-bottom: 1px solid #f0f0f0; transition: background 0.2s; font-family: sans-serif; color: #333; } .suggestion-item:last-child { border-bottom: none; } .suggestion-item:hover { background-color: var(--bleu-trmdvsr-tres-clair, #f0f7ff); } /* Le petit spinner */ .search-spinner { position: absolute; top: calc( var(--largeur-logo-bouton) / 4); right: 12px; z-index: 20; width: calc( var(--largeur-logo-bouton) / 2); aspect-ratio: 1 / 1; border: calc(var(--taille-sstexte) / 5) solid inherit; border-top: calc(var(--taille-sstexte) / 4) solid var(--bleu-trmdvsr-clair); border-radius: 50%; animation: spin 0.4s linear infinite; } .spinner { position: absolute; right: 15px; width: 20px; height: 20px; border: 2px solid #f3f3f3; border-top: 2px solid #3498db; border-radius: 50%; animation: spin 1s linear infinite; } /* Le conteneur de l'erreur */ .error-msg { position: absolute; background-color: #fff9c4; /* Jaune pâle comme sur ta capture */ border: 1px solid #fbc02d; color: #444; padding: 8px 12px; border-radius: 4px; font-size: 13px; box-shadow: 0 4px 6px rgba(0,0,0,0.1); z-index: 1000; pointer-events: none; /* Ne gêne pas le clic sur l'input */ display: none; margin-top: -10px; /* Ajustement pour flotter au-dessus */ } /* La petite pointe en bas */ .error-msg::after { content: ''; position: absolute; bottom: -6px; left: 50%; /* Centre par rapport à la bulle */ transform: translateX(-50%); /* Ajustement parfait */ width: 0; height: 0; border-left: 6px solid transparent; border-right: 6px solid transparent; border-top: 6px solid #fbc02d; } /* Style optionnel pour l'input en erreur */ .input-error { /*outline: 2px solid #fbc02d !important; border-color: #fbc02d !important;*/ } /* ------------------------------------------------------------------- */ .select-icon { display: flex; /* Centre l'icône verticalement */ align-items: center; position: absolute; /* Positionne l'icône par-dessus le select */ top: 0; right: 1rem; /* Réf au padding de .form-select */ z-index: 2; pointer-events: none; /* Empêche les clics de bloquer l'accès au select */ width: var(--largeur-logo-bouton); height: var(--largeur-logo-bouton); color: var(--gris-trmdvsr-fonce); } .select-icon .form-select-icon-style.trmdvsr-button-picto { width: var(--largeur-logo-bouton); height: auto; stroke: var(--bleu-trmdvsr-clair); stroke-width: 1; stroke-linecap: round; stroke-linejoin: round; fill: var(--bleu-trmdvsr-clair); pointer-events: none; } /* Intro x GuidedMode ------------------------------------------------------------- (COMPOSANT) */ .conteneur-lame.flex-into-row.intro { margin: 0; padding: 0; background-color: var(--gris-trmdvsr-tres-clair); } .intro .conteneur-lame.flex-col.col-first.trmdvsr-texte-chapo { display: flex; min-height: max-content; margin: 0; padding-top: 2.5rem; background-color: var(--blanc-pur); } .intro .conteneur-lame.flex-col.col-last.composant-aide { appearance: none; -webkit-appearance: none; /* Pour Chrome/Safari */ display: flex; flex: min-content; justify-content: center; align-items: center; margin: 0; padding: calc(2 * var(--espacement-large)) var(--espacement-large) var(--espacement-court); min-width: calc(var(--largeur-tier-max) / 1.5); } .composant-aide .trmdvsr-sstexte{ display: block; width: 100%; height: auto; margin: 0; padding: 0 0 var(--espacement-court); text-align: center; line-height: calc(var(--taille-sstexte) * 1.33); } .composant-aide .trmdvsr-toggle { position: relative; display: inline-block; width: 80px; height: 30px; } .composant-aide .trmdvsr-toggle input { display: none; } /* On cache la checkbox moche */ .composant-aide .slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; transition: .4s; border-radius: 30px; } .composant-aide .slider:before { position: absolute; content: ""; height: 22px; width: 22px; left: 4px; bottom: 4px; background-color: white; transition: .4s; border-radius: 50%; } .composant-aide input:checked + .slider { background-color: var(--bleu-trmdvsr, #2196F3); } .composant-aide input:checked + .slider:before { transform: translateX(50px); } /* Lame Expliq (MODULE) */ .module-overlap { /* Mobile First */ position: relative; display: flex; flex-direction: column; /* Desktop-> row-reverse */ align-items: unset; gap: 0; width: 100%; max-width: var(--largeur-conteneur-max); padding: 0; margin: 0; background-color: var(--blanc-pur); } .module-overlap::before { /* Pseudo-élément => effet lumière/texture */ content: ''; z-index: 0; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: radial-gradient(circle at 10% 10%, rgba(var(--bleu-trmdvsr-clair-RGB), 0.18), transparent 50%); pointer-events: none; /* Permet clic à travers */ } .module-overlap .flot-droite .trmdvsr-texte, .module-overlap .flot-droite .trmdvsr-texte-h3, .module-overlap .flot-droite .trmdvsr-texte-h4 { text-align: right; } .module-overlap .flot-droite, .module-overlap .flot-gauche { flex: 1 0 35%; } /* grow shrink basis */ .module-overlap .flot-centre { display: block; z-index: 5; position: relative; left: 50%; overflow: visible; width: 22rem; /* Σh <= enfants */ height: 21.653rem; /* Σh <= enfants */ transform: translateX(-50%); /* Pour centrage parfait */ transition: all 0.5s ease-in-out; } .module-overlap .bloc-media { /* Séparé de flot-centre => gérer position abs/rel */ position: relative; width: 100%; height: 100%; } .module-overlap .bloc-media .visuel-ambition { position: absolute; top: 0; left: 0; z-index: 1; width: 10rem; height: 21.653rem; background-image: var(--url-visuel-fauteuil); background-size: cover; background-repeat: no-repeat; border-radius: var(--bordure-radius); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4); transition: all 0.5s ease-in-out; } .module-overlap .bloc-media .visuel-vision { position: absolute; top: 0; left: 12rem; z-index: 2; width: 10rem; height: 21.653rem; /* 2,1653333333 */ background-image: var(--url-visuel-accueil); background-size: cover; background-repeat: no-repeat; border-radius: var(--bordure-radius); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4); transition: all 0.5s ease-in-out; } .module-overlap .bloc-media .bloc-badge { display: flex; align-items: center; width: auto; /* 8rem; */ height: auto; /* 2rem; */ padding: 0.75rem 1rem; background-color: black; border-radius: var(--bordure-radius); background-color: rgba(255, 255, 255, 0.1); /* Fond semi-transparent */ backdrop-filter: blur(5px); border: 1px solid rgba(255, 255, 255, 0.2); } .module-overlap .bloc-media .bloc-badge.trmdvsr-label { color: var(--blanc-pur); transition: all 0.5s ease-in-out; } .module-overlap .bloc-media .bloc-badge .badge-icon { width: 1rem; height: 1rem; margin-right: 0.25rem; background-image: var(--url-logo-blanc); background-size: cover; background-repeat: no-repeat; } .module-overlap .bloc-media .bloc-badge.badge-ambition { position: absolute; bottom: 1rem; left: 0.5rem; z-index: 2; transition: all 0.5s ease-in-out; } .module-overlap .bloc-media .bloc-badge.badge-vision { position: absolute; top: 1rem; left: 11rem; z-index: 3; transition: all 0.5s ease-in-out; } /* MODULE NAV (MOBILE FIRST- Evaluation) */ nav .conteneur-lame { padding-bottom: var(--espacement-court); } .module-breadcrumb { list-style: none; /* Supprime les puces */ display: flex; flex-direction: row; justify-content: space-between; /* Distribue l'espace entre les éléments */ margin: 0; padding: 0.5rem 0 1.5rem; overflow-x: auto; /* Pour le scroll */ white-space: nowrap; /* Permet aux éléments de rester sur une seule ligne */ } .module-breadcrumb::before, .module-breadcrumb::after { /* Espaceur droit pour décoller la dernière carte */ content: ''; display: block; flex-shrink: 0; width: var(--espacement-large); height: 1px; } .breadcrumb-separator { /* L'indicateur de séparation */ margin: 0 1rem; font-size: 1.5rem; line-height: 2.5rem; color: rgba(var(--gris-trmdvsr-fonce-RGB), 0.6); /* Utilisation de la variable RGB pour plus de contrôle */ align-self: center; /* Pour l'aligner verticalement si les boutons sont hauts */ } li.breadcrumb-item.trmdvsr-texte-btn.trmdvsr-button { display: inline-flex; /* Aligne texte et icône */ justify-content: space-between; /* Distribue l'espace entre les éléments */ align-items: center; gap: 0.5rem; /* Espace entre texte et icône */ flex: 1 0; /* Chaque étape prend une part égale de l'espace */ position: relative; padding: 0.5rem 1rem 0.625rem; /* 8px 16px 10px */ padding-bottom: 0.625rem; /* Espace pour la barre de progression */ font-weight: var(--graisse-texte); /* surcharge */ color: var(--bleu-trmdvsr-clair); /* surcharge */ outline: none; border: 2px solid var(--gris-trmdvsr-clair); border-radius: 9999px; background-color: var(--blanc-pur); box-shadow: 0 1px 3px 0 rgba(0, 122, 255, 0.1), 0 1px 2px 0 rgba(0, 122, 255, 0.06); cursor: pointer; pointer-events: auto !important; /* Force l'interactivité */ transition: all 0.3s ease; } li.breadcrumb-item.trmdvsr-texte-btn.trmdvsr-button:hover:not([disabled]) { /* hover/active => les boutons */ color: var(--bleu-trmdvsr-moyen); background-color: #F0F8FF; /* Léger fond bleu au survol */ border-color: var(--bleu-trmdvsr-moyen); box-shadow: 0 4px 8px rgba(0, 122, 255, 0.3), 0 1px 4px rgba(0, 122, 255, 0.2); transform: translateY(-1px); } li.breadcrumb-item.trmdvsr-texte-btn.trmdvsr-button:active:not([disabled]) { color: var(--blanc-pur); background-color: var(--bleu-trmdvsr-pur); box-shadow: 0 0 1px rgba(0, 122, 255, 0.15), 0 1px 4px rgba(0, 122, 255, 0.2); transform: translateY(1px); } li.breadcrumb-item.trmdvsr-texte-btn.trmdvsr-button.completed { /* EFFET: Étape COMPLETED (Vert) */ font-weight: bold; color: var(--vert-trmdvsr-clair); /* Texte vert pour les étapes passées */ border-color: var(--vert-trmdvsr-clair); background-color: var(--gris-trmdvsr-tres-clair); cursor: pointer; pointer-events: auto; } li.breadcrumb-item.trmdvsr-texte-btn.trmdvsr-button.completed:hover:not([disabled]) { color: var(--vert-trmdvsr-moyen); background-color: #A7F3D0; border-color: var(--vert-trmdvsr-moyen); } li.breadcrumb-item.trmdvsr-texte-btn.trmdvsr-button.completed:after { /* Indicateur visuel "V" pour COMPLETED */ content: '✓'; /* Indicateur visuel pour les étapes complétées */ position: absolute; bottom: -0.625rem; left: 50%; width: 1rem; height: 1rem; font-size: var(--taille-sstexte); font-weight: var(--graisse-sstexte); line-height: 1rem; text-align: center; letter-spacing: -0.0269rem; text-rendering: optimizeLegibility; color: var(--blanc-pur); background-color: var(--vert-trmdvsr-clair); border-radius: var(--bordure-radius); transform: translateX(-50%); box-shadow: 0 1px 3px rgba(0,0,0,0.2); } li.breadcrumb-item.trmdvsr-texte-btn.trmdvsr-button.active { /* ÉTAPE ACTUELLE (Bleu foncé) */ color: var(--blanc-pur); border-color: var(--bleu-trmdvsr-pur); /* Couleur principale pour l'étape en cours */ background-color: var(--bleu-trmdvsr-pur); box-shadow: 0 4px 6px -1px rgba(37, 99, 235, 0.3), 0 2px 4px -1px rgba(37, 99, 235, 0.1); pointer-events: none; } li.breadcrumb-item.trmdvsr-texte-btn.trmdvsr-button.disabled { /* EFFET: Étape FUTURE <= remplace [disabled] sur un
  • */ opacity: 0.7; box-shadow: none; cursor: not-allowed; pointer-events: none; filter: grayscale(1); } li.breadcrumb-item.trmdvsr-texte-btn.trmdvsr-button.unlocked { opacity: 0.8; cursor: pointer; pointer-events: auto; } /* Étape future mais accessible car déjà remplie une fois */ /* Animation de l'icône active */ .trmdvsr-pulse { animation: trmdvsr-pulse-anim 2s infinite ease-in-out; } @keyframes trmdvsr-pulse-anim { 0% { transform: scale(1); filter: drop-shadow(0 0 0px var(--trmdvsr-blue)); } 50% { transform: scale(1.1); filter: drop-shadow(0 0 5px var(--trmdvsr-blue)); } 100% { transform: scale(1); filter: drop-shadow(0 0 0px var(--trmdvsr-blue)); } } /**/ .eval-carousel-viewport::-webkit-scrollbar { display: none; } /* Cache la barre de défilement (WebKit/Chrome/Safari) */ .eval-carousel-viewport { display: block; max-width: var(--largeur-conteneur-max); min-height: min-content; height: auto; margin: 0; padding: var(--espacement-court) var(--espacement-large) var(--espacement-tres-large); /*box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);*/ background-color: var(--blanc-pur); will-change: height scroll-position; /*Optimise l'anim de hauteur*/ transition: height 0.4s ease; overflow-x: hidden; /* !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! */ overflow-y: hidden; scroll-behavior: smooth; touch-action: none; /*scroll-snap-type: x mandatory;*/ /* Force le conteneur à capturer les points d'accroche */ -ms-overflow-style: none; /* Pour IE/Edge/Firefox */ scrollbar-width: none; } .eval-carousel-track { display: flex; flex-direction: row; flex-wrap: nowrap; /* Empêche les enfants de réduire et force à la taille demandée */ justify-content: flex-start; align-items: flex-start; width: 100%; height: auto; overflow-x: hidden; overflow-y: hidden; gap: var(--espacement-court); background-color: var(--blanc-pur); transition: transform 0.5s ease-out; /* les anims sont gérées en JS */ } .eval-carousel-track .eval-item { display: flex; flex-direction: column; flex: 0 0 100%; /* Coeur du layout : section = largeur max - les marges */ width: 100%; height: max-content; scroll-snap-align: center; /* Définit le point d'accroche pour scroll-snap */ background-color: var(--blanc-trmdvsr); border-radius: var(--bordure-radius); box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.2); box-sizing: border-box; border: 1px solid #eee; transition: transform 0.5s ease-out; /* les anims sont gérées en JS */ } /* ----------------------------------------------------------------------------------- Note */ .composant-note.conteneur-lame.flex-into-row { /* classe fonctionnelle */ justify-content: center; align-items: center; overflow: hidden; width: 100%; height: auto; /**background-color: var(--blanc-pur);*/ } .composant-note .conteneur-lame.flex-col.col-first, .composant-note .conteneur-lame.flex-col.col-last { /* Composant notation zones habillage visuel 'de 0... ...à 5' */ flex-direction: row; justify-content: center; align-items: flex-end; flex: 1 1 auto; /* grow shrink basis */ width: 100%; height: auto; padding: var(--espacement-large) var(--espacement-large) var(--espacement-tres-large); } .composant-note .conteneur-lame.flex-col.col-first .trmdvsr-sstexte, .composant-note .conteneur-lame.flex-col.col-last .trmdvsr-sstexte { width: auto; padding-top: 0; padding-left: 1rem; } .composant-note img.img-notede0 { width: auto; max-width: var(--largeur-notede0); aspect-ratio: 199 / 81; height: auto; } .composant-note img.img-notea5 { width: auto; max-width: var(--largeur-notea5); aspect-ratio: 155 / 80; height: auto; } /* ----------------------------------------------------------------------------------- Note */ .composant-note .conteneur-lame.flex-col.col-middle { /* Composant notation */ justify-content: center; /* Princi:↕ */ align-items: center; /* Transv:↔ */ flex: 0 0 var(--largeur-composant-note); min-width: calc(var(--largeur-tier-max) * 1.33); width: 100%; max-width: 80vw; } .composant-note .conteneur-lame.flex-col.col-middle .module-note { /* Conteneur de bouton radio avec id='module-note[X]' */ display: flex; flex-direction: row-reverse; justify-content: center; /* Aligne le groupe à gauche */ align-items: center; width: 100%; margin: 0; padding-top: 0; padding-bottom: calc(var(--espacement-court) * 0.33); } .composant-note .conteneur-lame.flex-col.col-middle .module-note.trmdvsr-texte { /* Texte dans le bloc avec balise et */ display: block; width: auto; margin: 0; padding-top: var(--espacement-court); padding-bottom: var(--espacement-large); text-align: center; } .composant-note .conteneur-lame.flex-col.col-middle input.module-note { padding: var(--espacement-large) 0; text-align: center; background: initial; } .composant-note .conteneur-lame.flex-col.col-middle .module-note input[type="radio"] { display: none; } /* Cache l'élément radio natif */ .composant-note .conteneur-lame.flex-col.col-middle .module-note label.trmdvsr-radio-label { /* Spécificité de style */ display: block; width: calc( var(--largeur-logo-bouton) + var(--espacement-button) ); height: var(--largeur-logo-bouton); background-image: var(--url-logo-inactif); background-position: 0 0; cursor: pointer; animation: none; transition: all 0.2s ease-in-out; } /* Conteneur des labels de 0 à 5 */ .composant-note .module-slider-wrapper { width: 100%; max-width: 100%; margin: 0 auto; } .composant-note .slider-labels { display: flex; justify-content: space-between; /*padding: 0 calc(var(--largeur-logo-bouton) / 3) 0 calc(var(--largeur-logo-bouton) / 4); Aligner avec le centre du PNG */ margin-top: 10px; width: 100% ; height: 10px; } .composant-note .trmdvsr-label.slider-labels span { color: var(--gris-trmdvsr-clair); width: var(--largeur-logo-bouton); text-align: center; margin-top: -15px; } .composant-note .trmdvsr-slider { -webkit-appearance: none; width: 100%; height: var(--largeur-logo-button); background: #e0e0db; /* Beige foncé pour le rail */ /*border-radius: 10px;*/ border: 1px solid var(--gris-trmdvsr-tres-clair); outline: none; margin: 10px 0; /* On crée des carrés de 4px tous les 20% de la largeur */ background: radial-gradient(circle at center, var(--gris-trmdvsr-tres-clair) 4px, transparent 0) repeat-x, var(--blanc-pur); background-size: 18% 100%; background-position: 16.67% center; } .composant-note .trmdvsr-slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: var(--largeur-logo-bouton); /* Taille de ton picto PNG */ height: var(--largeur-logo-bouton); background: transparent; background-image: var(--url-logo-actif); /* REMPLACE PAR TON URL PNG */ background-size: contain; background-repeat: no-repeat; background-position: center; cursor: grab; border: none; filter: drop-shadow(0px 3px 5px rgba(0,0,0,0.2)); transition: transform 0.1s ease; } .composant-note .trmdvsr-slider::-webkit-slider-thumb:active { cursor: grabbing; transform: scale(1.15); } .composant-note .trmdvsr-slider::-moz-range-thumb { width: var(--largeur-logo-bouton); height: var(--largeur-logo-bouton); background: transparent; background-image: var(--url-logo-actif); background-size: contain; background-repeat: no-repeat; border: none; cursor: grab; } .composant-note .conteneur-lame.flex-col.col-middle .module-note.trmdvsr-texte-h2 { /* État initial de l'afficheur de note */ transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); transform-origin: center; } .composant-note .conteneur-lame.flex-col.col-middle .module-note.trmdvsr-texte-h2.updated { /* Classe déclenchée par le JavaScript */ color: var(--bleu-trmdvsr-pur); transform: scale(1.15); /* Petit bond en avant */ outline: none; } /*------------------------------------------------------------------------------ */ .module-overlap .bloc-media { /* Séparé de flot-centre => gérer position abs/rel */ position: relative; width: 100%; height: 100%; } .eval-item .module-overlap .flot-centre .bloc-media .bullefonce { display: block; position: absolute; top: 0; left: 0; z-index: 1; width: 63%; aspect-ratio: 733 / 696; background-image: var(--url-visuel-bulle1); background-color: none; background-size: cover; background-repeat: no-repeat; transition: all 0.5s ease-in-out; } .eval-item .module-overlap .flot-centre .bloc-media .bulleclaire { display: block; position: absolute; bottom: 0; right: 0; z-index: 2; width: 63%; aspect-ratio: 733 / 696; background-image: var(--url-visuel-bulle2); background-color: none; background-size: cover; background-repeat: no-repeat; transition: all 0.5s ease-in-out; } .eval-item .module-overlap .bloc-media .bloc-badge { display: flex; align-items: center; width: auto; /* 8rem; */ height: auto; /* 2rem; */ padding: 0.75rem 1rem; background-color: black; border-radius: var(--bordure-radius); background-color: rgba(255, 255, 255, 0.1); /* Fond semi-transparent */ backdrop-filter: blur(5px); border: 1px solid rgba(255, 255, 255, 0.2); } .eval-item .module-overlap .bloc-media .bloc-badge.trmdvsr-label { color: var(--blanc-pur); transition: all 0.5s ease-in-out; } .eval-item .module-overlap .bloc-media .bloc-badge .badge-icon { width: 1rem; height: 1rem; margin-right: 0.25rem; background-image: var(--url-logo-blanc); background-size: cover; background-repeat: no-repeat; } .eval-item .module-overlap .bloc-media .bloc-badge.badge-ambition { position: absolute; bottom: 20%; left: 50%; z-index: 2; transform: translateX(-50%); transition: all 0.5s ease-in-out; } .eval-item .module-overlap .bloc-media .bloc-badge.badge-vision { position: absolute; top: 20%; left: 50%; z-index: 3; transform: translateX(-50%); transition: all 0.5s ease-in-out; } .conteneur-avis .module-avis .conversation-log .message-app-wrapper { position: relative; display: flex; flex-direction: column; /* Pour mettre l'avatar sous la bulle */ align-items: flex-start; margin-bottom: 20px; } .conteneur-avis .module-avis .conversation-log .message-app-wrapper .message-app { background: #f1f3f5; border-radius: 15px 15px 15px 0px; padding: 15px; position: relative; margin-bottom: 8px; /* Espace pour l'avatar en dessous */ max-width: 80%; } /*.conteneur-avis .module-avis .conversation-log .message-user-wrapper .message-user*/ .message-avatar { position: absolute; bottom: -0.5rem; left: 0; z-index: 10; width: 1.5rem; height: 1.5rem; background-image: var(--url-logo-charte); background-size: cover; background-repeat: no-repeat; background-position: center; margin-top: 5px; /* Espace entre la bulle et l'avatar */ margin-left: 5px; /*border: 1px solid #ddd;*/ box-shadow: 0 2px 4px rgba(0,0,0,0.1); } .conteneur-avis .edit-area { margin: 0; padding: 1rem; resize: none; overflow-y: auto; /* Permet quand même le défilement interne si le texte est long */ } } .zone-bonus.conteneur-lame.flex-into-row { justify-content: flex-end; align-items: center; } .zone-bonus .bonus-zone-edito.conteneur-lame.flex-col.col-first { /* Composant bonus .trmdvsr-texte */ flex: 0 0 calc(var(--largeur-conteneur-max) * 0.67); /* grow(grandir) shrink(rétrécir) basis */ /* .conteneur-lame.flex-col.col-first { m:0; pt:espMoy; pb:espMoy, pl:espLarg; pr:espMoy/2; h:100%; disp:flex; flex-dir:col; flex:1; } /* .trmdvsr-texte { t-ali:left; f-siz:taiTex; l-h:taiTex*1.33; t-ren:optiLegi; color:grisFon; } */ } .zone-bonus .bonus-zone-bouton.conteneur-flex.flex-col.col-last { /* Composant bonus .conteneur-flex.flex-col.col-last */ flex: 0 0 calc(var(--largeur-conteneur-max) * 0.33); /* grow(grandir) shrink(rétrécir) basis */ justify-content: flex-end; align-items: center; } /* TOGGLE => Labels : Gestion Bonus */ .bonus-toggle-switch { /* sur le