/* Reset CSS ================================================================================== */ *, ::before, ::after { box-sizing: border-box; border-width: 0; border-style: solid; } body { margin: 0; line-height: inherit; } blockquote, dd, dl, figure, h1, h2, h3, h4, h5, h6, hr, p, pre { margin: 0; } menu, ol, ul { margin: 0; padding: 0; list-style: none; } /* Variables globales ========================================================= (MOBILE FIRST) */ :root { --bleu-trmdvsr-pur: #203c85; --bleu-trmdvsr-moyen: #3968de; --bleu-trmdvsr-clair: #339af0; --bleu-trmdvsr-clair-RGB: 82, 152, 233; --gris-trmdvsr-fonce: #111827; --gris-trmdvsr-fonce-RGB: 17, 24, 39; --gris-trmdvsr-clair: #a0aec0; /* RGB: 160, 174, 192; */ --gris-trmdvsr-tres-clair: #e9ecf3; --blanc-trmdvsr: #f4f5f9; /* RGB :244, 245, 249; */ --blanc-pur: #FFF; --vert-trmdvsr-clair: #a0c0a0; --vert-trmdvsr-moyen: #4a684d; --vert-trmdvsr-fonce: #2a8520; --rouge-trmdvsr-clair: #c0a0a0; --beige-trmdvsr: #e4d8cc; --couleur-fond-carte: #2a2e3d; --bordure-radius: 1rem; --largeur-stroke: 2; --color-shadow: rgba(0, 0, 0, 0.15); --largeur-conteneur-max: min(100%, 60rem); /* 100% de l'écran jusqu'à 60rem de largeur */ --largeur-logo-bouton: clamp(2.5rem, 4rem - 2vw, 4rem); /* => +'vw' augmente, + valeur finale diminue */ --largeur-loader: clamp(2rem, 50%, 10vw); /* Largeur du bloc loading => fluide: min:2rem | ideal:50% | max:20vw */ --largeur-notede0: clamp(131px, 7.08vw + 108.33px, 199px); --largeur-notea5: clamp(102px, 5.52vw + 84.33px, 155px); --hauteur-content: 0px; /* hauteur dynamique calculée car pb de height 25.10.28(09:52) */ --pp-dimensions: clamp(4rem, 0.5rem + 2vw, 5rem); --espacement-large: clamp(1rem, 0.5rem + 2vw, 2.5rem); --espacement-button: clamp(0.25rem, 2.5833rem - 0.1823vw, 2rem); /* Espace entre les boutons UX Mobile */ --espacement-button-half: clamp(0.125rem, calc(2.5833rem / 2 - 0.1823vw / 2), 1rem); /* Espace entre les boutons UX Mobile */ --logo-tronksize-larg: clamp(1rem, 0.75rem + 0.25vw, 1.5rem); /* Taille de la coupure du logo */ --graisse-texte: 400; /* graisse normale */ --taille-texte: clamp(1rem, calc(1rem + 2vw), 1.25rem); /* 1rem (16px) à 1.25rem (20px) OLD : 4vw */ --taille-texte-btn: 0.875rem; /* 0.874rem (14px) */ --taille-h1: calc(var(--taille-texte) * 2.5); /* 40px à 3.125rem (50px) */ --taille-h2: calc(var(--taille-texte) * 2); /* 32px à 2.5rem (40px) */ --taille-h3: calc(var(--taille-texte) * 1.5); /* 24px à 1.875rem (30px) */ --taille-h4: calc(var(--taille-texte) * 1.25); /* 20px à 1.5625rem (25px) */ --taille-chapo: calc(var(--taille-texte) * 1.125); /* 16px à 1.4rem (px) */ --taille-sstexte: calc(var(--taille-texte) * 0.75); /* 12px */ --taille-label: calc(var(--taille-texte) * 0.625); /* 10px */ --graisse-h1: calc(var(--graisse-texte) * 2.25); /* 900 */ --graisse-h2: calc(var(--graisse-texte) * 2); /* 800 */ --graisse-h3: calc(var(--graisse-texte) * 1.75); /* 700 */ --graisse-h4: calc(var(--graisse-texte) * 1.5); /* 600 */ --graisse-chapo: calc(var(--graisse-texte) * 1.25); /* 500 */ --graisse-sstexte: calc(var(--graisse-texte) * 1.5); /* 600 */ --espacement-tres-large: calc(var(--espacement-large) * 1.33); /* 31,92 */ --espacement-moyen: calc(var(--espacement-large) * 0.66); /* 15,84 */ --espacement-moyen-demi: calc(var(--espacement-moyen) * 0.5); /* 8 */ --espacement-court: calc(var(--espacement-moyen) * 0.66); /* 10,4544 */ --largeur-navigation-aide: calc((var(--espacement-large) * 3) + (var(--largeur-logo-bouton) * 2)); /* 108px => 240px */ --largeur-tier-max: calc((var(--largeur-conteneur-max) - (var(--espacement-large) * 2)) / 3);/* 315px => 307px */ --logo-tronksize-med: calc(var(--logo-tronksize-larg) * 0.66 ); --logo-tronksize-court: calc(var(--logo-tronksize-med) * 0.66 ); --largeur-eval-item: calc(var(--largeur-conteneur-max) - (var(--espacement-large) * 2)); /* Conteneur - les marges */ --largeur-composant-note: calc(var(--largeur-eval-item) - var(--largeur-notede0) - var(--largeur-notea5) - (var(--espacement-large) *2) ); --module-avis-height: 400px; /* Nouvelle variable pour la hauteur fixe de la conversation */ --url-logo-inactif: url('https://i.imgur.com/OIsQ6DL.png'); --url-logo-charte: url('https://i.imgur.com/Hfhftm1.png'); --url-logo-actif: url('https://i.imgur.com/FZWC78D.png'); --url-logo-blanc: url('https://i.imgur.com/KryCTLH.png'); --url-notede0: url('https://i.imgur.com/gy5B1Wg.png'); --url-notea5: url('https://i.imgur.com/oGZf3eC.png'); --url-visuel-fauteuil: url('https://i.imgur.com/2xmmReX.png'); --url-visuel-accueil: url('https://i.imgur.com/LILnWVO.png'); /* 1125px × 2436px | ratio:2,1653333333 */ --url-visuel-bulle1: url('https://i.imgur.com/kbXpA00.png'); --url-visuel-bulle2: url('https://i.imgur.com/aiR2TF3.png'); } /* Textes =========================================================================== (GLOBAL) */ .trmdvsr-texte-h1 { margin-bottom: var(--espacement-court); font-size: var(--taille-h1); font-weight: var(--graisse-h1); line-height: 120%; letter-spacing: -0.0269rem; /* -0.43px iOS */ text-rendering: optimizeLegibility; color: var(--gris-trmdvsr-fonce); } .trmdvsr-texte-h2 { font-size: var(--taille-h2); font-weight: var(--graisse-h2); line-height: 120%; letter-spacing: -0.0269rem; text-rendering: optimizeLegibility; color: var(--gris-trmdvsr-fonce); } .trmdvsr-texte-h3 { padding: var(--espacement-moyen) 0; font-size: var(--taille-h3); font-weight: var(--graisse-h3); line-height: 120%; letter-spacing: -0.0269rem; text-rendering: optimizeLegibility; color: var(--gris-trmdvsr-fonce); } .trmdvsr-texte-h4 { font-size: calc(var(--taille-sstexte) * 0.66); /* var(--taille-h4); */ font-weight: var(--graisse-h4); line-height: 120%; letter-spacing: 2px; /* -0.0269rem; */ text-rendering: optimizeLegibility; text-transform: uppercase; color: var(--bleu-trmdvsr-clair); } .trmdvsr-texte-chapo { font-size: var(--taille-chapo); font-weight: var(--graisse-chapo); line-height: 120%; letter-spacing: -0.0269rem; text-rendering: optimizeLegibility; color: var(--gris-trmdvsr-fonce); } .trmdvsr-texte-chapo p { margin-bottom: var(--espacement-moyen); }/* Applique l'espace sous CHAQUE paragraphe */ .trmdvsr-texte-chapo p:last-child { margin-bottom: var(--espacement-court); }/* Supprime l'espace sous le dernier paragraphe */ .trmdvsr-texte { font-size: var(--taille-texte); font-weight: var(--graisse-texte); letter-spacing: -0.0269rem; text-rendering: optimizeLegibility; color: var(--gris-trmdvsr-fonce); } .trmdvsr-texte p { margin-bottom: var(--espacement-court); } /* Applique l'espace sous CHAQUE paragraphe */ .trmdvsr-texte p:last-child { margin-bottom: calc(var(--espacement-court) / 2); } /* Supprime l'espace sous le dernier paragraphe */ .trmdvsr-texte-btn { text-align: center; font-size: var(--taille-texte-btn); font-weight: var(--graisse-h3); line-height: 140%; letter-spacing: -0.0269rem; text-rendering: optimizeLegibility; color: var(--gris-trmdvsr-fonce); } .trmdvsr-sstexte { font-size: var(--taille-sstexte); font-weight: var(--graisse-sstexte); line-height: 140%; letter-spacing: -0.0269rem; text-rendering: optimizeLegibility; color: var(--gris-trmdvsr-fonce); } .trmdvsr-label { font-size: var(--taille-label); font-weight: var(--graisse-sstexte); line-height: 140%; letter-spacing: -0.0269rem; text-rendering: optimizeLegibility; color: var(--blanc-trmdvsr); } em { font-weight: var(--graisse-texte); font-style: italic; } .lien-bleu { text-decoration: none; color: var(--bleu-trmdvsr-clair); } .lien-bleu:hover { text-decoration: underline; color: var(--bleu-trmdvsr-moyen); } ol { list-style-type: decimal; } /* Rétablit l'affichage des chiffres (1, 2, 3...) */ .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 */ /* Architecture ====================================================================== (GLOBAL) */ html { width: 100%; height: 100%; margin: 0px; padding: 0px; } /* IDENTIQUE MOBILE & DESKTOP */ 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; } body.is-loading { /* => INTERACTION : Désactive l'interaction (survol et clic) */ pointer-events: 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) */ position: relative; width: 100%; max-width: var(--largeur-conteneur-max); /* clamp => fluide */ min-height: 1px; height: var(--hauteur-content); margin: 0; padding: 0; background-color: #FFF; 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: height 1s ease-in-out, width 1s ease-out; } /*------------------------------------------------------------------------------------- [PAGES] */ .page { display: block; position: absolute; top: 0; left: 0; z-index: 100; width: var(--largeur-conteneur-max); height: auto%; margin: 0; padding: 0 0 var(--espacement-large); background-color: #FFF; box-shadow: -10px 0px 20px -5px rgba(var(--gris-trmdvsr-fonce-RGB), 0.4); transform: translateX(100%); /* positionne la page à droite */ opacity: 0; 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 */ 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 contenus (MOBILE FIRST) */ .conteneur-lame { /* IDENTIQUE MOBILE & DESKTOP */ width: var(--largeur-conteneur-max); height: 100%; margin: 0px; padding: var(--espacement-large) var(--espacement-large) var(--espacement-tres-large); /* ↑ | ↔ | ↓ (16|24|10) */ transition: all 0.5s ease-in-out; border: 1px dotted purple; } header.conteneur-lame.flex-trmdvsr-id { /* Mufasa: N'oublie pas le Mobile First */ display: flex; flex-direction: row; justify-content: space-between; /* ↔ */ align-items: flex-end; /* ↕ */ position: relative; /* La navigation reste toujours en haut */ height: clamp(102px, 5.9vw + 83.1px, 128px); /* 5.9vw + 83.1px => atteindre 128px autour de 768px de largeur. */ padding: var(--espacement-court); } footer.conteneur-lame.flex-trmdvsr-id { /* MOBILE FIRST => LOGO AFFICHÉ */ display: flex; flex-direction: column; justify-content: flex-start; /* ↕ */ align-items: center; /* ↔ */ height: auto; padding: var(--espacement-court) var(--logo-tronksize-larg) var(--espacement-moyen); } footer .trmdvsr-sstexte { text-align: right; color: var(--blanc-trmdvsr); } /* Alignement texte */ .insta-desktop { display: none; } /* Cache le bouton Desktop du header(mobile first) => @Media Query */ .insta-mobile { display: block; } /* Affiche le bouton Mobile dans le Footer => @Media Query */ .conteneur-lame.flex-into-row { /* MOBILE => DESKTOP bascule en row */ display: flex; flex-direction: column; /* Princi:↕|Transv:↔ => desktop:row */ gap: 0; padding: 0; /* surcharge pt:espMoy; plr:espLarg; pb:espCou; */ background-color: #FFF; /*border: 1px dashed red; */ /* POUR DEBUG */ } .conteneur-lame.flex-col { /* => COMMUN COL-FIRST/COL-MIDDLE/COL-LAST */ display: flex; flex-direction: column; width: 100%; height: 100%; } .conteneur-lame.flex-col.col-first, .conteneur-lame.flex-col.col-middle, .conteneur-lame.flex-col.col-last { /* Mobile => toute largeur */ padding: var(--espacement-large) var(--espacement-large) var(--espacement-tres-large); } /*--------------------------------------- LAMES SPÉCIFIQUES : BOUTONS */ .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: var(--espacement-button); padding: var(--espacement-large) var(--espacement-large) var(--espacement-tres-large); /* ↑ | ↔ | ↓ */ } /* Input & Forms (MODULE) */ .trmdvsr-select { position: relative; width: 100%; height: 100%; } /*
englobante ref pour icon enfant en position absolute */ .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: #FFF; /* 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); } /*------------------------------------------------------------------- */ .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); } /* Lames Hero (MOBILE FIRST) */ .hero-section { /* Conteneur fonctionnel le plus neutre possible */ position: relative; /* Référence pour l'élément absolute (la barre de recherche) */ width: 100%; height: min(55vw, 24rem); /* Reprise des dimensions de l'image >> affecte le bloc en dessous */ margin: 0; padding: 0; } img.hero-image-container { display: block; z-index: 1; overflow: hidden; position: absolute; top: 0; left: 0; width: 100%; height: min(55vw, 24rem); /* image 1600x640 => 40vw => 60remx24rem */ margin: 0; padding: 0; } .conteneur-lame.hero-content { position: absolute; z-index: 2; } .conteneur-lame.flex-into-row.trmdvsr-suprslct { /* Englobe le sélecteur pour ajouter btn action et positionner sur */ z-index: 3; position: absolute; bottom: -1.5rem; /* Déplacer le conteneur de 50px vers le bas pour le chevauchement */ left: 50%; transform: translateX(-50%); /* Centrage parfait */ width: min(90%, 45rem); height: auto; margin: 0; padding: 2px; border: 2px solid var(--gris-trmdvsr-clair); border-radius: 0.5rem 0.5rem 0.75rem; /* (haut gauche) (haut droite & bas gauche) (bas droite) */ 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) */ 0 10px 20px rgba(0, 0, 0, 0.2); /* Ombre plus prononcée pour l'effet flottant */ } .trmdvsr-suprslct .form-select { box-shadow: none; border: none; transition: none; } .trmdvsr-suprslct .form-select: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-suprslct .trmdvsr-button { box-shadow: none; } .trmdvsr-suprslct .trmdvsr-button:hover { box-shadow: none; } .trmdvsr-suprslct .trmdvsr-button:active { box-shadow: none; } .conteneur-lame.flex-into-row.intro { background-color: var(--gris-trmdvsr-tres-clair); } .intro .conteneur-lame.flex-col.col-first { background-color: #FFF; padding-top: calc(2 * var(--espacement-large)); } .intro .conteneur-lame.flex-col.col-last.composant-aide { padding-top: calc(2 * var(--espacement-large)); } /* Lame Testimonials (MODULE) */ .module-temoignages { margin: 0; padding: 0; text-align: center; background-color: var(--gris-trmdvsr-fonce); } .module-temoignages .logo-quote { height: 3rem; width: 3rem; } /* 48px */ .module-temoignages .trmdvsr-texte { color: var(--gris-trmdvsr-clair); } .module-temoignages .trmdvsr-texte-h3 { color: var(--blanc-trmdvsr); } /*------------------------------------------------------------------- */ .conteneur-lame.carousel-temoignage { /* Conteneur pour le défilement horizontal */ display: flex; overflow-x: auto; /* Permet le défilement horizontal */ scroll-snap-type: x mandatory; /* Aligne la carte au scroll */ width: 100%; padding: var(--espacement-court) var(--espacement-large) var(--espacement-large);/* Espace vertical et padding latéral */ gap: var(--espacement-moyen); /* Espacement entre les cartes */ scrollbar-color: var(--bleu-trmdvsr-clair) var(--bleu-trmdvsr-moyen);/* Stylisation de la scrollbar (pour les navigateurs qui le supportent) */ scrollbar-width: thin; } .carousel-temoignage::-webkit-scrollbar { height: 1rem; background-color: var(--bleu-trmdvsr-clair); } .carousel-temoignage::-webkit-scrollbar-thumb { background-color: var(--bleu-trmdvsr-pur); border-radius: 1rem; } .carousel-temoignage::before, .carousel-temoignage::after { /* Espaceur droit pour décoller la dernière carte */ content: ''; display: block; flex-shrink: 0; width: var(--espacement-moyen); height: 1px; } /*------------------------------------------------------------------- */ .carte-temoignage { display: flex; flex-direction: column; flex: 0 0 auto; /* Fixe la taille de la carte et permet l'étirement sur l'axe principal */ width: 85vw; /* 85% de la largeur du viewport sur mobile */ max-width: 32rem; /* Largeur maximale pour les grands écrans */ padding: var(--espacement-large); text-align: left; background-color: var(--couleur-fond-carte); border-radius: var(--bordure-radius); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2); scroll-snap-align: start; /* Alignement au début pour le défilement */ } .carte-temoignage .carte-header { /* Conteneur supérieur (Avatar et Citation) */ padding-bottom: var(--espacement-moyen); background-image: url('https://i.imgur.com/UOK5ZJW.png'); /* Image guillemets */ background-size: var(--pp-dimensions); background-position: calc(var(--pp-dimensions) + var(--espacement-court)) 0; background-repeat: no-repeat; } .carte-temoignage .avatar-wrapper { margin-right: 20px; } .carte-temoignage .trmdvsr-pp { width: var(--pp-dimensions); height: auto; border-radius: 50%; object-fit: cover; border: 3px solid var(--bleu-trmdvsr-pur); } .carte-temoignage .trmdvsr-texte { /* Corps du témoignage */ flex-grow: 1; /* Assure que le texte prend l'espace restant de la carte */ text-align: left; color: var(--gris-trmdvsr-clair); padding-bottom: var(--espacement-moyen); } .carte-temoignage .carte-footer { /* Pied de la carte (Auteur et Vérification) */ display: flex; justify-content: space-between; align-items: start; margin: 0; padding-top: var(--espacement-court); border-top: 1px solid rgba(255, 255, 255, 0.1); } .carte-temoignage .auteur-info .trmdvsr-sstexte { display: block; color: var(--blanc-trmdvsr); } .carte-temoignage .auteur-info .trmdvsr-label { color: var(--gris-trmdvsr-clair); } .carte-temoignage .trmdvsr-sstexte.statut-verifie { display: inline-block; color: var(--vert-trmdvsr-clair); } .carte-temoignage .trmdvsr-sstexte.statut-verifie::before { content: '✓'; margin-right: 0.5rem; } /* NAVIGATION CAROUSEL ---------------------------------------------- */ .module-temoignages .carousel-navigation { display: flex; justify-content: center; align-items: center; } .nav-fleche { background: none; border: none; color: var(--bleu-trmdvsr-clair); font-size: 24px; cursor: pointer; margin: 0 15px; padding: 8px; transition: color 0.2s; } .nav-fleche:hover { color: var(--bleu-trmdvsr-moyen); } /* Lame Expliq (MODULE) */ .module-overlap { /* Mobile First */ display: flex; flex-direction: column; /* Desktop-> row-reverse */ align-items: unset; gap: 0; position: relative; width: 100%; max-width: var(--largeur-conteneur-max); padding: 0; margin: 0; } .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: #FFF; 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; } /* Elements : Logos, Dividers, TraumShape & Boutons (GLOBAL) */ .logo-trmdvsr { /* HEADER & FOOTER */ object-fit: contain; width: auto; /* base: 720px old : 50%; base{w:720px h:154px} */ height: auto; max-height: 90px; margin: 0; padding: 0; } .neutre { /* HEADER & FOOTER CONTENEUR PUSH INSTA */ display: flex; justify-content: center; /* Centre l'image à l'intérieur du lien */ align-items: center; text-decoration: none; /* Neutralisation de l'alignement et des espacements */ } .neutre img { display: block; } /* défensif, car on est sur un */ .insta-desktop .push-trmdvsr { /* HEADER => TAILLE FLUIDE */ width: clamp(96.5px, -5.9vw + 107.83px, 166px);/* Wmax: 166px, Wmin: 96.5px old : 14% base{w:166px h:172px} */ max-height: clamp(100px, -5.9vw + 111.33px, 172px); } .insta-mobile .push-trmdvsr { /* FOOTER -> TAILLE FIXE */ max-height: 150px; /* base{w:166px h:172px} */ padding: var(--espacement-court) 0; } /*---------------------------------------------------------- DIVIDERS */ .traum-divider-small { /* IDENTIQUE MOBILE & DESKTOP */ width: calc( 100% - (var(--espacement-large) * 2) ); height: 1px; margin: var(--espacement-moyen) var(--espacement-large);/* espace 2 côtés */ padding: 0; background-color: var(--gris-trmdvsr-clair); } .traum-divider { /* IDENTIQUE MOBILE & DESKTOP */ width: calc( 100% - var(--espacement-large) ); height: 1px; margin: var(--espacement-moyen) 0 var(--espacement-moyen) var(--espacement-large); /* espace left (t:r:b:l) */ padding: 0; background-color: var(--gris-trmdvsr-clair); } .traum-divider-big { /* IDENTIQUE MOBILE & DESKTOP */ width: calc( 100% - 5px ); height: 2px; margin: var(--espacement-moyen) 0 var(--espacement-moyen) 5px; /* espace 1 côté tres petit */ padding: 0; background-color: var(--bleu-trmdvsr-pur); } /*--------------------------------------------- SHAPE POUR BACKGROUND */ .traum-shape { /* IDENTIQUE MOBILE & DESKTOP \BLOC LOGIQUE */ height: 100%; margin: 0; padding: 0; border: none; background-color: var(--blanc-trmdvsr); --cut-size: var(--logo-tronksize-larg); clip-path: polygon( 0% 0%, 100% 0%, 100% calc(100% - var(--cut-size)), calc(100% - var(--cut-size)) 100%, 0% 100% ); } /*=========================================================== BOUTONS */ .trmdvsr-button { /* BASE */ display: inline-flex; justify-content: center; align-items: center; gap: calc( var(--espacement-court) / 1.5 ); /* espace entre le texte et le picto */ width: 100%; /* MOBILE : Prend toute la largeur disponible */ padding: 0.75rem 1.25rem; /* ↕: 14px | ↔: 18px >> Standard */ font-weight: var(--graisse-h2); /* 600; Semi-gras Note : taille typo 1.1 */ color: var(--bleu-trmdvsr-clair); /* iOS: #007aff */ --cut-size: var(--logo-tronksize-court); /* ‼️ voir si on remet bouton tronqué sans ombre ou boutons ombré */ cursor: pointer; outline: none; /* Supprime le contour bleu au focus */ border-radius: 0.5rem 0.5rem 0.75rem; /* (haut gauche) (haut droite & bas gauche) (bas droite) */ background-color: #FFF; 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: all 0.2s ease-out; } .trmdvsr-button:hover { background-color: var(--gris-trmdvsr-tres-clair); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), /* Légère modification de l'ombre */ 0 6px 16px rgba(0, 0, 0, 0.12); /* L'ombre suggère que l'élément "s'élève" */ transform: translateY(-1px); /* Légère élévation */ } .trmdvsr-button:active { background-color: var(--gris-trmdvsr-clair); box-shadow: 0 0 1px rgba(0, 0, 0, 0.05), /* Ombre très faible */ 0 1px 4px rgba(0, 0, 0, 0.08); /* L'ombre se rapproche */ transform: translateY(1px); /* L'élément "s'enfonce" */ } .trmdvsr-button.primary { font-weight: var(--graisse-h3); color: #FFF; background-color: var(--bleu-trmdvsr-clair); /* iOS: #007aff */ box-shadow: 0 1px 2px rgba(0, 122, 255, 0.2), /* Ombre colorée */ 0 4px 12px rgba(0, 122, 255, 0.25); } .trmdvsr-button.primary:hover { background-color: var(--bleu-trmdvsr-moyen); box-shadow: 0 1px 3px rgba(0, 122, 255, 0.3), 0 6px 16px rgba(0, 122, 255, 0.35); transform: translateY(-1px); } .trmdvsr-button.primary:active { 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); } .trmdvsr-button-picto { width: var(--taille-texte-btn); height: auto; stroke: currentColor; /* Hériter de la couleur du texte du parent */ stroke-width: var(--largeur-stroke); /* Passer d'une graisse type à une stroke-width */ stroke-linecap: round; stroke-linejoin: round; fill: none; vertical-align: middle; } .trmdvsr-button:hover .trmdvsr-button-picto { animation: info 0.4s linear 1; /* @keyframes duration | easing-function | delay | name */ } .trmdvsr-button.primary.large { flex-grow: 2; } /* Plus large pour l'action principale */ /* Menu Classique & Burger (GLOBAL) */ .menu-toggle { /* MENU BURGER */ display: flex; /* Mobile first => Affichage du bouton Burger */ flex-direction: column; justify-content: center; align-items: center; gap: 4px; width: var(--largeur-logo-bouton); height: var(--largeur-logo-bouton); padding: 4px; background-color: initial; z-index: 500; cursor: pointer; } .menu-icon { /* barre pour le menu burger */ display: block; width: 24px; /* hauteur totale des 3 bandes x1.33 */ height: 3px; border-radius: 50px; background-color: var(--blanc-trmdvsr); } .menu-icon.active { background-color: var(--bleu-trmdvsr-pur); } /*------------------------------------------------------------------- */ .nav-globale { /* Mise en forme du menu déployé sur mobile */ display: flex; /* Mobile first => Affichage du bouton Burger */ flex-direction: column; gap: 1px; position: absolute; top: clamp(102px - var(--largeur-logo-bouton) - var(--espacement-large), 5.9vw + 83.1px - var(--largeur-logo-bouton) - var(--espacement-large), 128px - var(--largeur-logo-bouton) - var(--espacement-large)); right: 0; bottom: unset; width: 15rem; height: 0; /* Masquer par défaut */ padding-top: calc(var(--largeur-logo-bouton) + var(--espacement-large)); padding-right: var(--espacement-large); padding-left: 1px; padding-bottom: var(--espacement-large); opacity: 0; z-index: 300; overflow: hidden; background-color: #FFF; border-radius: var(--bordure-radius) 0 0 var(--bordure-radius); box-shadow: 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) */ 0 10px 20px rgba(0, 0, 0, 0.2); transform: translateX(25%); transition: opacity 0.2s ease-out, box-shadow 0.4s ease, height 0.1s ease-out, box-shadow 0.4s ease, transform 0.4s ease-out, box-shadow 0.4s ease; } .nav-globale.trmdvsr-texte-h4 { list-style: none; text-align: center; font-size: calc(var(--taille-sstexte) * 0.75); /* var(--taille-h4); */ letter-spacing: -0.0269rem; } .nav-globale.active { /* Le menu actif (déployé) */ height: auto; /* Assez de place pour tous les liens */ opacity: 1; box-shadow: 0 5px 15px rgba(0,0,0,0.1); } .nav-globale li { width: 100%; padding: 8px; border: 1px solid red; /* background-color: var(--gris-trmdvsr-clair); */ } .nav-globale a { display: block; /* Prend toute la largeur du li */ text-decoration: none; color: var(--bleu-trmdvsr-clair); transition: color 0.2s; } .nav-globale a:hover { color: var(--bleu-trmdvsr-moyen); } .nav-globale .active a { color: var(--bleu-trmdvsr-pur); position: relative; /* disabled: true; */ } .nav-globale .active a::after { /* Bande sous l'item menu actif */ content: ''; position: absolute; bottom: 0; left: 0; width: 2px; height: 100%; background-color: var(--bleu-trmdvsr-pur); border-radius: 2px; } /* GuidedMode (COMPOSANT) */ /* .composant-aide => classe sémantique et fonctionnelle. Associée à synchroniserToutesLesInstances() & initialiserModeGuide() et l'eventListener sur tous les groupe-boutons-radio des blocs contenant .composant-aide. C'est un Crochet (Hook) Fonctionnel. */ .conteneur-lame.flex-col.col-last.composant-aide { /* Définition du conteneur réutilisable */ appearance: none; -webkit-appearance: none; /* Pour Chrome/Safari */ display: flex; flex: min-content; justify-content: center; align-items: center; padding: var(--espacement-large) var(--espacement-large) var(--espacement-court); } .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); } .groupe-boutons-radio { /* */ display: flex; /* Assure que les options sont côte à côte */ gap: var(--espacement-button); /* Espace entre les boutons Oui et Non */ margin: 0; padding-top: var(--espacement-court); } .overridden-radio { display: flex; flex-direction: column; justify-content: flex-start; } /* Aligne l'input et le label VERTICALEMENT */ .overridden-radio .trmdvsr-sstexte { padding-top: calc(var(--largeur-logo-bouton) * 1.1089); text-align: center; } /* Laisse la place au texte */ .existing-radio { /* Élément radio natif gardé pour son comportement fonctionnel */ -webkit-appearance: none; /* Élimine l'apparence par défaut du navigateur */ -moz-appearance: none; appearance: none; display: none; /* Cache */ flex-shrink: 0; /* Empêche le shrinking dans un conteneur flex */ margin: 0; /* Réinitialisation des marges */ } .trmdvsr-radio-label { /* Porte texte + image */ display: block; /* DEBUG: inline-block */ cursor: pointer; min-height: var(--largeur-logo-bouton); min-width: var(--largeur-logo-bouton); background-image: var(--url-logo-inactif); background-repeat: no-repeat; background-position: top; background-size: var(--largeur-logo-bouton) var(--largeur-logo-bouton);/* Taille image */ } .existing-radio:checked + .trmdvsr-radio-label { background-image: var(--url-logo-actif); /* Image pour l'état COCHÉ */ } /* == updateStatus ============================================================= (UTILITAIRE) == */ .status-target { position: relative; } .status-layer { /* LAYER surchargé pour W/H, background-color */ display: none; /* flex; */ flex-direction: column; justify-content: center; align-items: center; z-index: 1000; /* Devant tout */ /*width: auto; height: auto; margin: 0px; padding: 0px;*/ } .status-layer.attached { /* Nouvelles règles pour le loader => attaché à un conteneur spécifique */ position: absolute; /* Écrase fixed par absolute */ top: 0; /* Couvre son parent (qui doit être .loading-target) */ left: 0; width: 100%; height: 100%; border: 1px dotted green; } .status-layer.attached.fullBlue { background-color: var(--bleu-trmdvsr-pur); /* Assure que l'opacité et le background-color fonctionnent */ opacity: 1; } .status-layer.attached.lightWhite { background-color: var(--blanc-trmdvsr); opacity: 0.5; /* Assure que l'opacité et le background-color fonctionnent */ } .status-box { /* Conteneur pour le Centrage */ display: flex; justify-content: center; /* Princi:↔ */ align-items: center; /* Transv:↕ */ position: relative; /* CRUCIAL => enfants 'absolute' se positionnent par rapport à lui */ width: var(--largeur-loader); /* fluide: min:2rem | ideal:50% | max:20vw */ aspect-ratio: 1 / 1; margin: 0px; padding: 0px; } .status-box .spinner-image { /* Positionne pour superposition & centrage */ position: absolute; /* Les superpose l'un sur l'autre */ width: 100%; aspect-ratio: 1 / 1; margin: 0px; padding: 0px; } .status-box .spinner { position: absolute; width: 140%; aspect-ratio: 1 / 1; border: calc(var(--taille-sstexte) / 5) solid var(--bleu-trmdvsr-moyen); border-top: calc(var(--taille-sstexte) / 4) solid var(--bleu-trmdvsr-clair); /* Bleu pour le bord en mouvement */ border-radius: 50%; /* => Forme ronde */ animation: spin 0.4s linear infinite; } .status-quo { display: block; min-width: var(--largeur-loader); width: auto; height: auto; margin-top: var(--espacement-court); color: #FFF; } .status-layer .status-message { /*appearance: none; -webkit-appearance: none; */ /* Pour Chrome/Safari */ display: block; /*width: auto;*/ min-height: var(--taille-sstexte); /*height: auto;*/ margin-top: calc(var(--largeur-loader) * 0.2); text-align: center; /* Assure que le texte est centré dans sa propre boîte */ color: #FFF; } .status-layer .status-message.info { color: var(--gris-trmdvsr-clair); } .status-layer .status-message.loading { color: var(--bleu-trmdvsr-clair); font-style: italic; } .status-layer .status-message.success { color: var(--vert-trmdvsr-clair); } .status-layer .status-message.error { color: var(--rouge-trmdvsr-clair); font-weight: var(--graisse-h2); } .status-layer .status-message.warn { color: orange; font-weight: var(--graisse-h2); } .status-layer .status-message.debug { color: purple; font-weight: var(--graisse-h2); } /*--------------------------------------- CLASSES D'ANIMATION DU logo */ .logo-loading { animation: loading 1s infinite; } .logo-info { animation: info 1s ease infinite; } .logo-error { animation: wobble 2s ease infinite; } .progress-container { display: flex; /* Masqué par défaut */ width: 100%; height: 0.75rem; margin-top: var(--espacement-court); border-radius: 0; } .progress-bar { display: flex; height: 5px; } .progress-text { display: flex; width: 100%; margin-top: 1rem; font-size: calc(var(--taille-label) * 0.66); justify-content: center; } .progress-container.fullBlue { background-color: var(--bleu-trmdvsr-moyen); } .progress-bar.fullBlue { background-color: var(--bleu-trmdvsr-clair); } .progress-text.fullBlue { color: var(--bleu-trmdvsr-clair); } .progress-container.lightWhite { background-color: var(--gris-trmdvsr-clair); } .progress-bar.lightWhite { background-color: var(--blanc-trmdvsr); } .progress-text.lightWhite { color: var(--blanc-trmdvsr); } /* 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 */ } .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: #FFF; box-shadow: 0 1px 3px 0 rgba(0, 122, 255, 0.1), 0 1px 2px 0 rgba(0, 122, 255, 0.06); cursor: pointer; transition: all 0.3s ease; } .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); } .breadcrumb-item.trmdvsr-texte-btn.trmdvsr-button:active:not([disabled]) { color: #FFF; 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); } .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; } .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); } .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: #FFF; 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); } .breadcrumb-item.trmdvsr-texte-btn.trmdvsr-button.active { /* ÉTAPE ACTUELLE (Bleu foncé) */ color: #FFF; 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; } .breadcrumb-item.trmdvsr-texte-btn.trmdvsr-button.disabled { /* EFFET: Étape FUTURE <= remplace [disabled] sur un
  • */ opacity: 0.7; color: var(--gris-trmdvsr-clair); border-color: var(--gris-trmdvsr-clair); background-color: var(--gris-trmdvsr-tres-clair); box-shadow: none; cursor: not-allowed; pointer-events: none; } /**/ .eval-carousel-viewport::-webkit-scrollbar { display: none; } /* Cache la barre de défilement (WebKit/Chrome/Safari) */ .eval-carousel-viewport { max-width: var(--largeur-conteneur-max); margin: 0; padding: var(--espacement-court) var(--espacement-large) var(--espacement-tres-large); overflow-x: hidden; scroll-behavior: smooth; scroll-snap-type: x mandatory; /* Force le conteneur à capturer les points d'accroche */ -ms-overflow-style: none; /* Pour IE/Edge/Firefox */ scrollbar-width: none; /*box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);*/ background-color: var(--gris-trmdvsr-tres-clair); border: 4px solid green; } .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; gap: var(--espacement-court); width: 100%; background-color: var(--gris-trmdvsr-tres-clair); border: 2px dotted red; } .eval-carousel-track .eval-item { display: flex; flex-direction: column; flex: 0 0 var(--largeur-eval-item); /* Coeur du layout : section = largeur max - les marges */ width: var(--largeur-eval-item); height: auto; 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); transition: transform 0.3s 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-trmdvsr); } .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; aspect-ratio: 1 / 1; background-image: var(--url-logo-blanc); background-position: center; background-size: 66%; background-repeat: no-repeat; } .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); border: 1px solid purple; } .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; } .composant-note .conteneur-lame.flex-col.col-middle .module-note label.trmdvsr-radio-label:first-of-type { width: var(--largeur-logo-bouton); } .composant-note .conteneur-lame.flex-col.col-middle .module-note label.trmdvsr-radio-label:hover, .composant-note .conteneur-lame.flex-col.col-middle .module-note label.trmdvsr-radio-label:hover ~ label { background-image: var(--url-logo-actif); } /* Allume la note survolée et tous les labels qui la SUIVENT */ .composant-note .conteneur-lame.flex-col.col-middle .module-note input:checked + label.trmdvsr-radio-label, .composant-note .conteneur-lame.flex-col.col-middle .module-note input:checked ~ label.trmdvsr-radio-label { background-image: var(--url-logo-actif); } /* Activation des notes cliquées et inférieures */ .composant-note .conteneur-lame.flex-col.col-middle .module-note label.trmdvsr-sstexte { /* texte sous les boutons customs */ display: block; width: calc( var(--largeur-logo-bouton) + var(--espacement-button) ); margin-top: 0px; padding-right: var(--espacement-button); color: var(--gris-trmdvsr-clair); text-align: center; } .composant-note .conteneur-lame.flex-col.col-middle .module-note label.trmdvsr-sstexte:first-of-type { width: var(--largeur-logo-bouton); padding-right: 0; } /* */ /*------------------------------------------------------------------------------ */ /* .composant-avis classe fonctionnelle associée à /* .conteneur-lame.flex-into-row { m:0; p:0; w:100%; h:100%; disp:flex; flex-dir:row; ali-item:flex-start; gap:0 } /.conteneur-lame >> Princi:↔|Transv:↕ */ .module-overlap .bloc-media { /* Séparé de flot-centre => gérer position abs/rel */ position: relative; width: 100%; height: 100%; border: 1px solid purple; } .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: #FFF; 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; } .composant-avis .conteneur-lame.flex-col.col-first.trmdvsr-texte { /* Composant Avis /* asso avec .conteneur-lame.flex-col.col-first */ margin-bottom: var(--espacement-court); width: calc(var(--largeur-conteneur-max) * 0.33); flex: initial; /* display:flex; flex-direction:column; flex:1 */ /*background-color: var(--bleu-trmdvsr-clair); /* POUR DEBUG */ /* .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; */ } .composant-avis .avis-zone-creation.conteneur-flex.flex-col.col-last { /* Conteneur du textArea / status_layer / conteneur-humeur */ width: calc(var(--largeur-conteneur-max) * 0.67); height: auto; flex: initial; position: relative; /* CRUCIAL pour status-layer'absolute' se positionne par rapport à lui */ display: initial; /* Forcer un comportement de block pour avoir le conteneur-humeur en dessous */ /* .conteneur-flex.flex-col.col-last: m:0; pt:espMoy; pb:espMoy, pl:espMoy/2; pr:espLarg; h:100%; disp:flex; flex-dir:col; flex:1; */ } /*------------------------------------------------------------------------------ */ /* Dans .avis-zone-creation.conteneur-flex.flex-col.col-last */ .avis-zone-creation textarea { /* Bloc de texte éditable trmdvsr-texte */ display: block; width: calc(var(--largeur-tier-max) * 2); /* Tiers de largeur conteneur - marge interieures sur les côtés */ aspect-ratio: 1 / 1; padding: 10px; font-style: italic; color: var(--gris-trmdvsr-fonce); background-image: var(--url-logo-blanc); backgrou background-color: #FFF; } /**.composant-avis .avis-zone-creation .overlay-avis { /* Règle de SURCHARGE pour une instance spécifique avec .status-layer */ /**width: calc(var(--largeur-tier-max) * 2); /* Réf .composant-avis .avis-zone-creation textarea.trmdvsr-texte */ /**height: calc(var(--largeur-tier-max) * 1.5); /* Réf .composant-avis .avis-zone-creation textarea.trmdvsr-texte */ /*position: absolute; /*top: var(--espacement-moyen); /* Réf .composant-avis .avis-zone-creation.conteneur-flex.flex-col.col-last */ /*left: calc(var(--espacement-moyen) / 2); /* Réf .composant-avis .avis-zone-creation.conteneur-flex.flex-col.col-last */ /*background-color: rgba(255, 255, 255, 0.5); /* NOTE : Le parent de #status_layer_q[n] DOIT avoir position: relative; */ /*.status-layer: pos:fixed; top:0; left:0; m:0; p:0; w:100vw; h:100vh; disp:flex; flex-dir:col; just-cont:center; ali-item:center; bg-c:bleu-pur; zInd:1000; */ /*} /*------------------------------------------------------------------------------/* /* conteneur-humeur 3e lame dans .avis-zone-creation.conteneur-flex.flex-col.col-last */ .avis-zone-creation .conteneur-humeur { /* Composant humeur */ margin: 0; padding: 0; width: 100%; height: calc( ( var(--largeur-logo-bouton) * 1.1089 ) + var(--espacement-court) + var(--espacement-moyen) ); } .conteneur-humeur .trmdvsr-sstexte-button { /* NOUVELL CLASSE TYPO */ width: auto; font-size: var(--taille-sstexte); font-weight: var(--graisse-sstexte); line-height: calc(var(--taille-sstexte) * 1.33); text-wrap: nowrap; text-rendering: optimizeLegibility; /* Espacement mots */ color: var(--blanc-trmdvsr); } .conteneur-humeur .conteneur-lame.flex-into-row.button-multi { padding: var(--espacement-court) 0 var(--espacement-moyen);/* 3valeurs : ↑ | →/← | ↓ */ justify-content: flex-end; align-items: flex-end; gap: 10px; /* .conteneur-lame.flex-into-row.button-multi: m:0; pt:espLarg; plr:espLarg; pb:espTreLarg; w:100%; h:100%; disp:flex; just-cont:space-betw; ali-item:center */ } .conteneur-humeur .conteneur-lame.flex-into-row.button-multi h4.trmdvsr-texte-h4 { margin: 0; /* surcharge mb:espCou*0.6 */ padding: 0; display: flex; flex: 100%; font-weight: calc(var(--graisse-chapo) * 0.66); /* surcharge fwei:graChap */ /* .trmdvsr-texte-h4 {mb:espCou*0.6; text-ali:left; fsiz:tailText; fwei:graChap; lh:tailText*1.33; t-render:optiLegi; color:grisFonce } */ } /*------------------------------------------------------------------------------/* /* composant-bonus classe fonctionnelle associée à */ /* .conteneur-lame.flex-into-row { m:0; p:0; w:100%; h:100%; disp:flex; flex-dir:row; ali-item:flex-start; gap:0 } /.conteneur-lame >> Princi:↔|Transv:↕ */ /**
    */ .zone-bonus.conteneur-lame.flex-into-row { 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 */ /*border: 1px solid red; /* POUR DEBUG */ /* .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 */ align-items: center; /*border: 1px solid var(--bleu-trmdvsr-clair); /* POUR DEBUG */ /* .conteneur-flex.flex-col.col-last { m:0; pt:espMoy; pb:espMoy, pl:espMoy/2; pr:espLarg; h:100%; disp:flex; flex-dir:col; flex:1; } */ } /*------------------------------------------------------------------------------/* */ /* TOGGLE => Labels : Gestion Bonus */ .bonus-toggle-switch { /* sur le