/* ========================================================================== Verre : couche visuelle commune au site, à l'authentification, au back-office et à l'espace client. Chargée en dernier. Esprit : surfaces de verre dépoli posées sur une lumière douce (marine, bleu, une pointe d'or), arrondis généreux qui s'emboîtent (28 / 20 / 14), ombres longues et légères, typographie nette. Aucun motif de grille. ========================================================================== */ :root { --verre-fond: #EEF1F8; --verre-surface: rgba(255, 255, 255, 0.62); --verre-surface-forte: rgba(255, 255, 255, 0.82); --verre-liseré: rgba(255, 255, 255, 0.9); --verre-filet: rgba(11, 21, 48, 0.07); --verre-flou: blur(24px) saturate(180%); --verre-ombre: 0 1px 1px rgba(11, 21, 48, 0.03), 0 12px 32px -12px rgba(11, 21, 48, 0.16), 0 28px 60px -28px rgba(31, 72, 214, 0.18); --verre-ombre-survol: 0 1px 1px rgba(11, 21, 48, 0.03), 0 18px 40px -14px rgba(11, 21, 48, 0.22), 0 36px 70px -30px rgba(31, 72, 214, 0.28); --verre-reflet: inset 0 1px 0 rgba(255, 255, 255, 0.95); --rayon-carte: 28px; --rayon-bloc: 20px; --rayon-element: 14px; --encre-profonde: #070D1F; --bleu: #1F48D6; --bleu-vif: #3B63F2; --or-vif: #D9B66E; --ressort: cubic-bezier(.2, .8, .2, 1); } html[data-theme="sombre"] { --verre-fond: #060B1A; --verre-surface: rgba(17, 27, 56, 0.58); --verre-surface-forte: rgba(20, 32, 66, 0.82); --verre-liseré: rgba(255, 255, 255, 0.09); --verre-filet: rgba(255, 255, 255, 0.07); --verre-ombre: 0 1px 1px rgba(0, 0, 0, 0.25), 0 16px 40px -14px rgba(0, 0, 0, 0.6); --verre-ombre-survol: 0 1px 1px rgba(0, 0, 0, 0.25), 0 22px 50px -16px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(76, 110, 240, 0.25); --verre-reflet: inset 0 1px 0 rgba(255, 255, 255, 0.07); color-scheme: dark; } html[data-theme="clair"] { color-scheme: light; } /* -------------------------------------------------------------------------- Lumière de fond : trois halos flous, fixes, très lents. -------------------------------------------------------------------------- */ html, body { background: var(--verre-fond) !important; } .vt, .mode-back-office { background: transparent !important; } .fond-aurore { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; background: var(--verre-fond); } .fond-aurore span { position: absolute; border-radius: 50%; filter: blur(90px); opacity: 0.55; will-change: transform; } .fond-aurore span:nth-child(1) { width: 62vmax; height: 62vmax; left: -18vmax; top: -24vmax; background: radial-gradient(circle, #9DB2FF 0%, rgba(157, 178, 255, 0) 68%); animation: aurore-a 46s ease-in-out infinite alternate; } .fond-aurore span:nth-child(2) { width: 52vmax; height: 52vmax; right: -16vmax; top: 8vmax; background: radial-gradient(circle, #F1E2BE 0%, rgba(241, 226, 190, 0) 66%); animation: aurore-b 58s ease-in-out infinite alternate; } .fond-aurore span:nth-child(3) { width: 58vmax; height: 58vmax; left: 18vmax; bottom: -30vmax; background: radial-gradient(circle, #C9D4FF 0%, rgba(201, 212, 255, 0) 66%); animation: aurore-a 64s ease-in-out infinite alternate-reverse; } html[data-theme="sombre"] .fond-aurore span { opacity: 0.38; } html[data-theme="sombre"] .fond-aurore span:nth-child(1) { background: radial-gradient(circle, #1F48D6 0%, rgba(31, 72, 214, 0) 68%); } html[data-theme="sombre"] .fond-aurore span:nth-child(2) { background: radial-gradient(circle, #6B5426 0%, rgba(107, 84, 38, 0) 66%); opacity: .3; } html[data-theme="sombre"] .fond-aurore span:nth-child(3) { background: radial-gradient(circle, #14286B 0%, rgba(20, 40, 107, 0) 66%); } @keyframes aurore-a { to { transform: translate3d(6vmax, 4vmax, 0) scale(1.08); } } @keyframes aurore-b { to { transform: translate3d(-5vmax, 6vmax, 0) scale(.94); } } @media (prefers-reduced-motion: reduce) { .fond-aurore span { animation: none; } } /* Grain très fin pour les surfaces sombres : de la matière, pas un motif. */ :root { --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .06 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E"); --nuit-taille: 160px 160px, 100% 100%, 100% 100%, 100% 100%, 100% 100%; --nuit: radial-gradient(60rem 30rem at 85% -10%, rgba(59, 99, 242, .55), transparent 60%), radial-gradient(40rem 26rem at 5% 110%, rgba(201, 164, 92, .28), transparent 65%), radial-gradient(30rem 20rem at 40% 40%, rgba(20, 40, 107, .6), transparent 70%), linear-gradient(165deg, #0B1530 0%, #0E1C47 55%, #0A1433 100%); } /* Les anciens motifs (grilles, guillochés concentriques) disparaissent. */ .bandeau-espace__guilloche, .bandeau-page__guilloche, .auth-volet__guilloche { display: none !important; } /* -------------------------------------------------------------------------- Monogramme de marque (barre latérale, authentification) -------------------------------------------------------------------------- */ .marque-monogramme { position: relative; display: inline-grid; place-items: center; flex: 0 0 auto; width: 34px; height: 34px; border-radius: 11px; background: linear-gradient(145deg, var(--bleu-vif), #1636A8); color: #fff; font-family: var(--police-titres); font-weight: 800; font-size: 1.05rem; box-shadow: 0 8px 18px -6px rgba(31, 72, 214, .7), inset 0 1px 0 rgba(255, 255, 255, .3); } .marque-monogramme::after { content: ""; position: absolute; top: -3px; right: -3px; width: 10px; height: 10px; border-radius: 50%; background: var(--or); box-shadow: 0 0 0 2px #0B1530; } .marque-monogramme--grand { width: 52px; height: 52px; border-radius: 16px; font-size: 1.5rem; } .marque-monogramme--grand::after { width: 13px; height: 13px; box-shadow: 0 0 0 3px var(--surface-bg); } /* ========================================================================== SITE PUBLIC ========================================================================== */ .vt { --vt-fond: transparent; --vt-ligne: rgba(11, 21, 48, .08); --vt-rayon: var(--rayon-carte); } html[data-theme="sombre"] .vt { --vt-ligne: rgba(255, 255, 255, .08); } /* Ouvertures sombres : lumière et grain, plus aucune grille. */ .vt-hero, .vt-entree, .vt-section--sombre, .vt .bandeau-page, .vt-pied { background: var(--grain), var(--nuit) !important; background-size: var(--nuit-taille) !important; } .vt-hero::before, .vt-entree::before { content: none !important; } .vt-hero::after { background: radial-gradient(circle, rgba(76, 110, 240, .5), transparent 62%) !important; filter: blur(20px); } .vt-entree, .vt .bandeau-page { border-radius: 0 0 clamp(28px, 5vw, 48px) clamp(28px, 5vw, 48px); } .vt-pied { border-radius: clamp(28px, 5vw, 48px) clamp(28px, 5vw, 48px) 0 0; margin-top: clamp(2rem, 5vw, 4rem); } .vt-section--sombre { border-radius: clamp(28px, 5vw, 48px); margin-inline: clamp(.5rem, 1.5vw, 1.25rem); } /* En-tête flottant en verre */ .vt-entete { top: 12px; left: 50%; right: auto; width: min(calc(100% - 24px), calc(var(--vt-largeur) + 4rem)); transform: translateX(-50%); height: 64px; border-radius: 22px; border: 1px solid var(--verre-liseré) !important; background: var(--verre-surface-forte) !important; -webkit-backdrop-filter: var(--verre-flou); backdrop-filter: var(--verre-flou); box-shadow: var(--verre-ombre), var(--verre-reflet); } .vt-entete--sombre:not(.est-defile) { background: rgba(255, 255, 255, .06) !important; border-color: rgba(255, 255, 255, .12) !important; box-shadow: none; } .vt-entete__barre { padding-inline: 1rem 0.75rem; gap: 1.25rem; } .vt { --vt-entete: 88px; } .vt-nav__lien { padding: .5rem .85rem; } .vt-nav__lien:hover { background: color-mix(in srgb, currentColor 9%, transparent); } .vt-nav__lien.est-actif { background: color-mix(in srgb, currentColor 10%, transparent); } .vt-nav__lien.est-actif::after { bottom: -1px; } /* Bouton de thème */ .vt-theme { display: inline-grid; place-items: center; width: 42px; height: 42px; border-radius: 14px; border: 1px solid color-mix(in srgb, currentColor 16%, transparent); background: color-mix(in srgb, currentColor 5%, transparent); color: inherit; cursor: pointer; transition: background-color .2s var(--ressort), transform .2s var(--ressort); } .vt-theme:hover { background: color-mix(in srgb, currentColor 12%, transparent); transform: rotate(-12deg); } .vt-theme__soleil, html[data-theme="sombre"] .vt-theme__lune { display: none; } html[data-theme="sombre"] .vt-theme__soleil { display: inline; } /* Burger : toujours calé à droite, quel que soit l'ordre des éléments. */ .vt-burger { border-radius: 14px; background: color-mix(in srgb, currentColor 5%, transparent); } @media (max-width: 1080px) { .vt-entete__actions, .vt-nav + .vt-entete__actions { margin-left: auto !important; gap: .5rem; } } @media (max-width: 520px) { .vt-entete { top: 8px; width: calc(100% - 16px); height: 60px; border-radius: 20px; } .vt { --vt-entete: 76px; } .vt-marque__nom { font-size: 1.08rem; } } /* Tiroir mobile : verre sombre, séparé du bord */ .vt-tiroir { background: rgba(5, 10, 25, .45); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); } .vt-tiroir__panneau { inset: 10px 10px 10px auto; width: min(380px, calc(100vw - 20px)); border-radius: 28px; background: var(--grain), var(--nuit); background-size: var(--nuit-taille); box-shadow: 0 30px 80px rgba(0, 0, 0, .5); overflow-y: auto; } .vt-tiroir__nav a { border-radius: 14px; padding: .75rem .9rem; border-bottom: 0; font-size: 1.35rem; } .vt-tiroir__nav a:hover, .vt-tiroir__nav a.est-actif { background: rgba(255, 255, 255, .07); } .vt-tiroir__theme { display: flex; align-items: center; gap: .8rem; width: 100%; margin: 1rem 0 1.25rem; padding: .85rem .9rem; border: 1px solid rgba(255, 255, 255, .12); border-radius: 16px; background: rgba(255, 255, 255, .05); color: #fff; font: inherit; font-weight: 600; text-align: left; cursor: pointer; } .vt-tiroir__theme-icone { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 12px; background: rgba(255, 255, 255, .08); color: var(--or); } .vt-interrupteur { margin-left: auto; width: 46px; height: 28px; border-radius: 99px; background: rgba(255, 255, 255, .18); position: relative; transition: background .25s var(--ressort); } .vt-interrupteur::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, .3); transition: transform .25s var(--ressort); } html[data-theme="sombre"] .vt-interrupteur { background: var(--bleu-vif); } html[data-theme="sombre"] .vt-interrupteur::after { transform: translateX(18px); } /* Boutons : pilule, léger relief, reflet */ .vt-bouton { min-height: 48px; padding: .75rem 1.4rem; font-weight: 700; letter-spacing: -.005em; transition: transform .2s var(--ressort), box-shadow .2s var(--ressort), background-color .2s ease, color .2s ease, border-color .2s ease; } .vt-bouton:hover { transform: translateY(-1px); } .vt .vt-bouton--or { background: linear-gradient(180deg, #DDBD7A 0%, #C9A45C 100%); box-shadow: 0 10px 24px -10px rgba(201, 164, 92, .8), inset 0 1px 0 rgba(255, 255, 255, .45); } .vt .vt-bouton--or:hover { background: linear-gradient(180deg, #E5C88A 0%, #D0AC66 100%); } .vt .vt-bouton--bleu { background: linear-gradient(180deg, var(--bleu-vif) 0%, var(--bleu) 100%); box-shadow: 0 10px 24px -10px rgba(31, 72, 214, .8), inset 0 1px 0 rgba(255, 255, 255, .3); } .vt .vt-bouton--contour { background: var(--verre-surface); border-color: var(--vt-ligne); -webkit-backdrop-filter: var(--verre-flou); backdrop-filter: var(--verre-flou); } .vt .vt-bouton--contour:hover { border-color: color-mix(in srgb, var(--vt-texte) 30%, transparent); } .vt .vt-bouton--fantome-clair { -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); } /* Cartes de verre */ .vt-service, .vt-bloc, .vt-faq details, .vt-encart, .vt-document > div > .vt-bloc, .vt-moyen, .vt-merci__carte, .vt-aide__sommaire, .vt .page-legale__corps, .vt .carte-glass, .vt-article__visuel { background: var(--verre-surface) !important; border: 1px solid var(--verre-liseré) !important; -webkit-backdrop-filter: var(--verre-flou); backdrop-filter: var(--verre-flou); box-shadow: var(--verre-ombre), var(--verre-reflet); } .vt-service { border-radius: var(--rayon-carte); padding: 1.6rem; transition: transform .35s var(--ressort), box-shadow .35s var(--ressort); } .vt-service:hover { transform: translateY(-4px); box-shadow: var(--verre-ombre-survol), var(--verre-reflet); border-color: var(--verre-liseré) !important; } .vt-service__icone { border-radius: 16px; background: linear-gradient(145deg, rgba(59, 99, 242, .16), rgba(59, 99, 242, .06)); box-shadow: inset 0 0 0 1px rgba(59, 99, 242, .14); } .vt-service h3 { font-size: 1.28rem; } .vt-service__prix { border-top: 1px solid var(--vt-ligne); } .vt-service__prix strong { font-family: var(--vt-titres); font-size: 1.05rem; } /* Grilles de services : 4, 3, 2 colonnes, ou pleine largeur */ .vt-services { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.1rem; } .vt-services .vt-service, .vt-services .vt-service--large { grid-column: auto; } .vt-services--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .vt-services--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .vt-services--1 { grid-template-columns: minmax(0, 1fr); } .vt-services--1 .vt-service { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; column-gap: 1.5rem; } .vt-services--1 .vt-service__prix { margin: 0; padding: 0 0 0 1.5rem; border-top: 0; border-left: 1px solid var(--vt-ligne); flex-direction: column; align-items: flex-end; gap: .2rem; } .vt-services--1 .vt-service h3 { grid-column: 2; } .vt-services--1 .vt-service__texte { grid-column: 2; } .vt-services--1 .vt-service__icone { grid-row: span 2; width: 64px; height: 64px; font-size: 1.5rem; } .vt-services--1 .vt-service__prix { grid-column: 3; grid-row: 1 / span 2; } @media (max-width: 1100px) { .vt-services, .vt-services--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 640px) { .vt-services, .vt-services--3, .vt-services--2 { grid-template-columns: minmax(0, 1fr); } .vt-services--1 .vt-service { display: flex; } .vt-services--1 .vt-service__prix { border-left: 0; border-top: 1px solid var(--vt-ligne); padding: .8rem 0 0; flex-direction: row; align-items: baseline; } } .vt-categorie__titre { margin-bottom: 1.6rem; padding-left: .2rem; } .vt-categorie__titre i { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 13px; background: var(--verre-surface); border: 1px solid var(--verre-liseré); box-shadow: var(--verre-ombre); font-size: 1rem; } .vt-categorie + .vt-categorie { margin-top: clamp(3.5rem, 7vw, 5rem); } /* Estimateur express de l'accueil : verre sur fond de nuit */ .vt-express { border-radius: 30px; background: linear-gradient(160deg, rgba(255, 255, 255, .13), rgba(255, 255, 255, .04)) !important; border: 1px solid rgba(255, 255, 255, .18) !important; -webkit-backdrop-filter: blur(24px) saturate(160%); backdrop-filter: blur(24px) saturate(160%); box-shadow: 0 40px 90px -30px rgba(0, 0, 0, .7), inset 0 1px 0 rgba(255, 255, 255, .2); } .vt-express__choix button { border-radius: 16px; } /* Étapes de la méthode */ .vt-etapes li { border-top: 0; padding: 2.6rem 1.4rem 1.6rem; border-radius: 22px; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .09); } .vt-etapes li::before { top: -1.05rem; box-shadow: 0 8px 18px -6px rgba(201, 164, 92, .7); } /* Maquette de l'espace client */ .vt-maquette { border-radius: 30px; background: var(--grain), var(--nuit); background-size: var(--nuit-taille); border: 1px solid rgba(255, 255, 255, .1); } /* FAQ en verre */ .vt-faq details { border-radius: 20px; transition: box-shadow .25s var(--ressort); } .vt-faq details[open] { box-shadow: var(--verre-ombre-survol), var(--verre-reflet); } .vt-faq summary::after { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 10px; background: color-mix(in srgb, var(--vt-bleu) 10%, transparent); font-size: 1.2rem; flex: 0 0 auto; } /* Fil d'Ariane en pastilles */ .vt-fil { gap: .35rem; } .vt-fil li { padding: .3rem .75rem; border-radius: 99px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .1); font-size: .82rem; } .vt-fil li + li::before { content: none; } /* Pied de page */ .vt-pied__reseaux a { border-radius: 14px; background: rgba(255, 255, 255, .05); } .vt-pied__bas nav a { padding: .35rem .8rem; border-radius: 99px; border: 1px solid rgba(255, 255, 255, .14); } .vt-pied__bas nav a:hover { background: rgba(255, 255, 255, .08); } .vt-lettre__ligne input { background: rgba(255, 255, 255, .08); } /* Bouton WhatsApp : discret, jamais sur une action */ .vt-whatsapp-flottant { width: 54px; height: 54px; background: linear-gradient(160deg, #2BD06B, #18A04F); box-shadow: 0 14px 30px -10px rgba(24, 160, 79, .8), inset 0 1px 0 rgba(255, 255, 255, .35); } @media (max-width: 1020px) { .vt:has(.vt-page-simulateur) .vt-whatsapp-flottant { display: none; } } /* Champs du site : style iOS, grands, arrondis */ .vt-champ input, .vt-champ textarea, .vt-champ select, .vt-recherche-aide input { border-radius: 16px !important; border: 1px solid var(--vt-ligne) !important; background: var(--verre-surface-forte) !important; min-height: 54px; padding: .85rem 1.05rem; font-size: 16px; color: var(--vt-texte); box-shadow: inset 0 1px 2px rgba(11, 21, 48, .04); transition: border-color .2s ease, box-shadow .2s ease; } .vt-champ textarea { min-height: 150px; } .vt-champ input:focus, .vt-champ textarea:focus { border-color: var(--bleu) !important; box-shadow: 0 0 0 4px rgba(31, 72, 214, .14) !important; } .vt-champ.a-erreur input, .vt-champ.a-erreur textarea { border-color: #C23452 !important; box-shadow: 0 0 0 4px rgba(194, 52, 82, .1) !important; } .vt-champ__libelle, .vt-champ label { font-weight: 650; font-size: .92rem; } .vt-champ__aide { display: block; margin-top: .15rem; } .vt-erreur { display: flex; align-items: center; gap: .4rem; color: #C23452; font-size: .86rem; font-weight: 600; } .vt-erreur::before { content: "\f06a"; font-family: "Font Awesome 6 Free"; font-weight: 900; font-size: .85em; } .vt-erreur[hidden] { display: none; } html[data-theme="sombre"] .vt-erreur { color: #FF8BA3; } /* Case à cocher : vraie coche, visible, 26 px */ .vt-case { position: relative; display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: .85rem; align-items: start; padding: 1rem 1.1rem; border-radius: 18px; border: 1px solid var(--vt-ligne); background: var(--verre-surface); cursor: pointer; transition: border-color .2s ease, background-color .2s ease; } .vt-case:hover { border-color: color-mix(in srgb, var(--bleu) 40%, transparent); } .vt-case input { position: absolute; opacity: 0; width: 1px; height: 1px; } .vt-case__boite { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 9px; border: 2px solid color-mix(in srgb, var(--vt-texte) 30%, transparent); background: var(--verre-surface-forte); color: transparent; font-size: .8rem; transition: all .2s var(--ressort); } .vt-case input:checked + .vt-case__boite { background: linear-gradient(160deg, var(--bleu-vif), var(--bleu)); border-color: var(--bleu); color: #fff; transform: scale(1.04); box-shadow: 0 6px 14px -6px rgba(31, 72, 214, .8); } .vt-case input:focus-visible + .vt-case__boite { outline: 2px solid var(--or); outline-offset: 3px; } .vt-case:has(input:checked) { border-color: color-mix(in srgb, var(--bleu) 45%, transparent); background: color-mix(in srgb, var(--bleu) 6%, var(--verre-surface)); } .vt-case.a-erreur { border-color: #C23452; } .vt-case__texte { color: var(--vt-doux); font-size: .93rem; line-height: 1.5; } /* ---------- Simulateur en étapes ---------- */ .vt-simu { grid-template-columns: minmax(0, 1fr) 380px; } .vt-simu__parcours { min-width: 0; padding: clamp(1.25rem, 3vw, 2.2rem); border-radius: 32px; background: var(--verre-surface); border: 1px solid var(--verre-liseré); -webkit-backdrop-filter: var(--verre-flou); backdrop-filter: var(--verre-flou); box-shadow: var(--verre-ombre), var(--verre-reflet); scroll-margin-top: calc(var(--vt-entete) + 1rem); } .vt-progression { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .4rem; } .vt-progression button { display: flex; align-items: center; gap: .6rem; width: 100%; padding: .4rem; border: 0; border-radius: 14px; background: none; color: var(--vt-doux); font: inherit; font-weight: 650; font-size: .88rem; text-align: left; cursor: pointer; } .vt-progression button:disabled { cursor: default; opacity: .65; } .vt-progression button:not(:disabled):hover { background: color-mix(in srgb, var(--vt-texte) 5%, transparent); } .vt-progression__rond { display: grid; place-items: center; flex: 0 0 auto; width: 34px; height: 34px; border-radius: 12px; background: color-mix(in srgb, var(--vt-texte) 7%, transparent); color: var(--vt-doux); font-family: var(--vt-titres); font-weight: 800; transition: all .3s var(--ressort); } .vt-progression .est-courante button { color: var(--vt-texte); } .vt-progression .est-courante .vt-progression__rond { background: linear-gradient(160deg, var(--bleu-vif), var(--bleu)); color: #fff; box-shadow: 0 8px 18px -8px rgba(31, 72, 214, .9); } .vt-progression .est-faite .vt-progression__rond { background: color-mix(in srgb, var(--or) 22%, transparent); color: #8A6A2A; font-size: 0; } .vt-progression .est-faite .vt-progression__rond::before { content: "\f00c"; font-family: "Font Awesome 6 Free"; font-weight: 900; font-size: .85rem; } html[data-theme="sombre"] .vt-progression .est-faite .vt-progression__rond { color: var(--or); } .vt-progression__barre { height: 4px; margin: .9rem 0 1.8rem; border-radius: 99px; background: color-mix(in srgb, var(--vt-texte) 7%, transparent); overflow: hidden; } .vt-progression__barre span { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, var(--bleu), var(--bleu-vif) 70%, var(--or)); transition: width .5s var(--ressort); } .vt-simu:not(.est-pas-a-pas) .vt-progression, .vt-simu:not(.est-pas-a-pas) .vt-progression__barre { display: none; } .vt-simu:not(.est-pas-a-pas) .vt-etape + .vt-etape { margin-top: 2.5rem; } .vt-simu:not(.est-pas-a-pas) [data-suivant], .vt-simu:not(.est-pas-a-pas) [data-precedent] { display: none; } @media (max-width: 640px) { .vt-progression__libelle { display: none; } .vt-progression .est-courante .vt-progression__libelle { display: inline; } .vt-progression { grid-template-columns: auto auto auto auto; justify-content: space-between; } } .vt-etape { border: 0; margin: 0; padding: 0; min-width: 0; } .vt-etape.est-active { animation: vt-etape .45s var(--ressort); } @keyframes vt-etape { from { opacity: 0; transform: translateX(14px); } } @media (prefers-reduced-motion: reduce) { .vt-etape.est-active { animation: none; } } .vt-etape__titre { float: left; width: 100%; padding: 0; margin: 0 0 .35rem; font-family: var(--vt-titres); font-size: clamp(1.45rem, 3vw, 1.9rem); font-weight: 750; letter-spacing: -.025em; line-height: 1.15; } .vt-etape__titre + * { clear: both; } .vt-etape__aide { margin: 0 0 1.4rem; color: var(--vt-doux); } .vt-choix-services { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: .75rem; } .vt-carte-choix__corps { position: relative; display: flex; flex-direction: column; gap: .3rem; height: 100%; padding: 1.1rem 1.1rem 1.15rem; border-radius: 20px; border: 1px solid var(--vt-ligne); background: var(--verre-surface-forte); transition: border-color .2s ease, transform .25s var(--ressort), box-shadow .25s var(--ressort), background-color .2s ease; } .vt-carte-choix:hover .vt-carte-choix__corps { transform: translateY(-2px); box-shadow: var(--verre-ombre); } .vt-carte-choix__icone { display: grid; place-items: center; width: 42px; height: 42px; margin-bottom: .45rem; border-radius: 13px; background: color-mix(in srgb, var(--bleu) 10%, transparent); color: var(--bleu); } html[data-theme="sombre"] .vt-carte-choix__icone { color: #9DB2FF; } .vt-carte-choix__corps > i { display: none; } .vt-carte-choix__nom { font-weight: 700; font-size: 1rem; } .vt-carte-choix__prix { font-size: .85rem; color: var(--vt-doux); } .vt-carte-choix__coche { position: absolute; top: .85rem; right: .85rem; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--vt-ligne); color: transparent; font-size: .7rem; transition: all .2s var(--ressort); } .vt-carte-choix input:checked + .vt-carte-choix__corps { border-color: var(--bleu); background: color-mix(in srgb, var(--bleu) 7%, var(--verre-surface-forte)); box-shadow: 0 0 0 1px var(--bleu), 0 14px 30px -16px rgba(31, 72, 214, .6); } .vt-carte-choix input:checked + .vt-carte-choix__corps .vt-carte-choix__coche { background: var(--bleu); border-color: var(--bleu); color: #fff; } .vt-inclus { margin: 0 0 1.4rem; padding: 1.1rem 1.25rem; border-radius: 20px; background: linear-gradient(150deg, rgba(10, 122, 82, .09), rgba(10, 122, 82, .03)); border: 1px solid rgba(10, 122, 82, .16); } .vt-inclus__titre { display: flex; align-items: center; gap: .5rem; margin: 0 0 .75rem !important; font-family: inherit !important; font-size: .95rem !important; font-weight: 700 !important; color: #0A6B47 !important; letter-spacing: 0 !important; } html[data-theme="sombre"] .vt-inclus__titre { color: #5BD3A2 !important; } .vt-inclus ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: .45rem 1rem; } .vt-inclus li { display: grid; grid-template-columns: 1.1rem minmax(0, 1fr); gap: .45rem; font-size: .92rem; } .vt-inclus li i { color: #0A7A52; margin-top: .3rem; font-size: .78rem; } .vt-options { display: grid; gap: .65rem; } .vt-ligne-option { border-radius: 18px; padding: .95rem 1.1rem; background: var(--verre-surface-forte); border: 1px solid var(--vt-ligne); transition: border-color .2s ease, background-color .2s ease; } .vt-ligne-option:has(input:checked) { border-color: color-mix(in srgb, var(--bleu) 45%, transparent); background: color-mix(in srgb, var(--bleu) 6%, var(--verre-surface-forte)); } .vt-ligne-option input[type="checkbox"] { -webkit-appearance: none; appearance: none; display: grid; place-items: center; width: 24px; height: 24px; margin: .05rem 0 0; border-radius: 8px; border: 2px solid color-mix(in srgb, var(--vt-texte) 28%, transparent); background: var(--verre-surface-forte); cursor: pointer; transition: all .2s var(--ressort); } .vt-ligne-option input[type="checkbox"]::after { content: "\f00c"; font-family: "Font Awesome 6 Free"; font-weight: 900; font-size: .72rem; color: transparent; } .vt-ligne-option input[type="checkbox"]:checked { background: var(--bleu); border-color: var(--bleu); } .vt-ligne-option input[type="checkbox"]:checked::after { color: #fff; } .vt-quantite { border-radius: 14px; background: var(--verre-surface-forte); } .vt-quantite button { width: 40px; height: 40px; font-weight: 700; } .vt-depot { border-radius: 20px; border: 1.5px dashed color-mix(in srgb, var(--bleu) 35%, transparent); background: color-mix(in srgb, var(--bleu) 4%, var(--verre-surface)); padding: 1.15rem 1.25rem; display: flex; gap: 1rem; align-items: center; cursor: pointer; position: relative; } .vt-depot__icone { display: grid; place-items: center; flex: 0 0 auto; width: 46px; height: 46px; border-radius: 15px; background: linear-gradient(160deg, var(--bleu-vif), var(--bleu)); color: #fff; } .vt-depot__icone i { color: #fff !important; font-size: 1.1rem !important; } .vt-depot strong { display: block; } .vt-simu__navigation { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .75rem; margin-top: 2rem; padding-top: 1.4rem; border-top: 1px solid var(--vt-ligne); } .vt-simu__navigation [data-suivant], .vt-simu__navigation [data-envoyer] { margin-left: auto; } .vt-simu__navigation [hidden] { display: none !important; } .vt-bouton.est-envoi { opacity: .85; } .vt-recap { border-radius: 30px; background: var(--grain), var(--nuit) !important; background-size: var(--nuit-taille) !important; border: 1px solid rgba(255, 255, 255, .1); box-shadow: 0 40px 80px -30px rgba(11, 21, 48, .55); } .vt-recap__montant { background: linear-gradient(180deg, #F0D8A4, #C9A45C); -webkit-background-clip: text; background-clip: text; color: transparent; } @media (max-width: 1020px) { .vt-simu { grid-template-columns: minmax(0, 1fr); } .vt-recap { order: 2; } .vt-barre-mobile { inset: auto 10px calc(10px + env(safe-area-inset-bottom)) 10px !important; padding: .7rem .7rem .7rem 1.1rem !important; border-radius: 22px; background: rgba(11, 21, 48, .86) !important; -webkit-backdrop-filter: blur(20px) saturate(160%); backdrop-filter: blur(20px) saturate(160%); border: 1px solid rgba(255, 255, 255, .12); box-shadow: 0 20px 50px -14px rgba(0, 0, 0, .55) !important; } .vt-barre-mobile .vt-bouton { min-height: 46px; padding-inline: 1.2rem; } .vt-barre-mobile__total strong { display: block; } .vt-simu__navigation [data-envoyer], .vt-simu__navigation [data-suivant] { flex: 1 1 auto; } .vt-page-simulateur .vt-pied { padding-bottom: 6.5rem; } } /* Alertes */ .vt-alerte { border-radius: 18px; border: 1px solid transparent; } .vt-alerte--erreur { border-color: rgba(194, 52, 82, .2); } /* Devis consulté en ligne : document en cartes, lisible au doigt */ .vt-statut { border: 1px solid currentColor; border-color: color-mix(in srgb, currentColor 20%, transparent); } .vt-document__tableau thead th { background: color-mix(in srgb, var(--vt-texte) 4%, transparent); padding-top: .7rem; } .vt-document__tableau thead th:first-child { border-radius: 12px 0 0 12px; } .vt-document__tableau thead th:last-child { border-radius: 0 12px 12px 0; } .vt-document__totaux { padding: 1.1rem 1.25rem; border-radius: 20px; background: color-mix(in srgb, var(--vt-texte) 4%, transparent); } .vt-document__totaux .total { border-top-color: var(--vt-ligne); } @media (max-width: 700px) { .vt-document__tableau thead { display: none; } .vt-document__tableau, .vt-document__tableau tbody, .vt-document__tableau tr, .vt-document__tableau td { display: block; width: 100%; } .vt-document__tableau tr { margin-bottom: .7rem; padding: .85rem 1rem; border-radius: 18px; border: 1px solid var(--vt-ligne); background: var(--verre-surface-forte); } .vt-document__tableau td { border: 0; padding: .2rem 0; text-align: left !important; } .vt-document__tableau td:first-child { font-weight: 650; margin-bottom: .35rem; } .vt-document__tableau td[data-libelle]::before { content: attr(data-libelle); color: var(--vt-doux); font-size: .85rem; margin-right: .5rem; } .vt-document__tableau td.num { display: flex; justify-content: space-between; } .vt-document__totaux { max-width: none; } } /* Pages légales : sommaire en pastilles, liens soulignés d'or */ .vt-sommaire { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 1.5rem; } .vt-sommaire a { padding: .5rem .95rem; border-radius: 99px; border: 1px solid color-mix(in srgb, var(--bleu) 22%, transparent); background: var(--verre-surface); -webkit-backdrop-filter: var(--verre-flou); backdrop-filter: var(--verre-flou); color: var(--vt-texte) !important; text-decoration: none; font-size: .86rem; font-weight: 600; box-shadow: var(--verre-reflet); transition: border-color .2s ease, background-color .2s ease, transform .2s var(--ressort); } .vt-sommaire a:hover { border-color: var(--bleu); transform: translateY(-1px); } .vt .page-legale__corps { border-radius: var(--rayon-carte) !important; } .vt .page-legale__corps h2 { scroll-margin-top: calc(var(--vt-entete) + 1rem); padding-top: 1.6rem; border-top: 1px solid var(--vt-ligne); } .vt .page-legale__corps h2:first-child { border-top: 0; padding-top: 0; } .vt .page-legale__corps a, .vt-fiche__texte a, .vt-faq__reponse a, .vt-case__texte a { color: var(--vt-texte) !important; font-weight: 600; text-decoration: none; border-bottom: 2px solid color-mix(in srgb, var(--or) 70%, transparent); padding-bottom: 1px; transition: border-color .2s ease, background-color .2s ease; } .vt .page-legale__corps a:hover, .vt-fiche__texte a:hover, .vt-faq__reponse a:hover { border-bottom-color: var(--bleu); background: color-mix(in srgb, var(--bleu) 6%, transparent); } /* Fiche service : contenu compris */ .vt-points__titre { margin: 2rem 0 .2rem !important; font-size: 1.35rem; } .vt-points li { padding: .65rem .85rem; border-radius: 14px; background: var(--verre-surface); border: 1px solid var(--verre-liseré); } .vt-points i { color: #0A7A52 !important; } /* Contact : encadré d'actions en verre sombre */ .vt .encadre-actions { border-radius: var(--rayon-carte); background: var(--grain), var(--nuit) !important; background-size: var(--nuit-taille) !important; } .vt .encadre-actions a { border-radius: 16px; } /* Bandeau cookies : verre */ .bandeau-cookies { border-radius: 22px !important; background: var(--verre-surface-forte) !important; -webkit-backdrop-filter: var(--verre-flou); backdrop-filter: var(--verre-flou); border: 1px solid var(--verre-liseré) !important; box-shadow: var(--verre-ombre) !important; } /* ========================================================================== AUTHENTIFICATION ========================================================================== */ .auth-ecran > *, .auth-enveloppe > * { min-width: 0; } .auth-ecran .auth-carte { width: 100%; background: var(--verre-surface-forte); border: 1px solid var(--verre-liseré); -webkit-backdrop-filter: var(--verre-flou); backdrop-filter: var(--verre-flou); box-shadow: var(--verre-ombre), var(--verre-reflet); border-radius: 32px; } .auth-options { flex-wrap: wrap; gap: .6rem 1rem; } .auth-volet { background: var(--grain), var(--nuit) !important; background-size: var(--nuit-taille) !important; border-radius: 0 40px 40px 0; } .auth-volet__liste li { border-radius: 16px; } .auth-marque .marque-monogramme { margin-right: .2rem; } @media (max-width: 960px) { .auth-ecran .auth-enveloppe { background: none !important; padding: 5rem 1rem 2rem !important; } .auth-ecran .auth-carte { padding: 1.75rem 1.25rem; border-radius: 28px; } } .auth-ecran .champ input:not([type="checkbox"]):not([type="radio"]):not([type="file"]) { border-radius: 16px; } /* ========================================================================== BACK-OFFICE ET ESPACE CLIENT ========================================================================== */ .mode-back-office { --rayon-l: 24px; --rayon-m: 16px; } /* Barre latérale : nuit et grain, carte du membre sans motif */ .bo-sidebar { background: var(--grain), var(--nuit) !important; background-size: var(--nuit-taille) !important; } @media (min-width: 993px) { .bo-sidebar { top: 12px !important; left: 12px !important; bottom: 12px !important; height: auto !important; border-radius: 28px; box-shadow: 0 30px 60px -30px rgba(11, 21, 48, .8); } .bo-contenu { margin-left: calc(var(--sidebar-largeur) + 12px); } body.sidebar-reduite .bo-contenu { margin-left: calc(var(--sidebar-largeur-reduite) + 12px); } } .bo-sidebar__logo { display: flex; align-items: center; gap: .65rem; } .bo-sidebar__logo .marque-monogramme::after { box-shadow: 0 0 0 2px #0B1530; } .bo-sidebar__membre { background: rgba(255, 255, 255, .06) !important; border: 1px solid rgba(255, 255, 255, .1) !important; border-radius: 18px; } .bo-sidebar__membre-avatar { border-color: rgba(201, 164, 92, .6) !important; } .bo-sidebar__lien { border-radius: 14px; } /* Barre du haut et bandeau d'accueil */ .bo-topbar, .app-header, .bo-entete { -webkit-backdrop-filter: var(--verre-flou); backdrop-filter: var(--verre-flou); } .bandeau-espace { background: var(--grain), var(--nuit) !important; background-size: var(--nuit-taille) !important; border-radius: 30px !important; border: 1px solid rgba(255, 255, 255, .08); box-shadow: 0 30px 60px -30px rgba(11, 21, 48, .7) !important; } .bandeau-espace::after { content: none !important; } .bandeau-espace__texte { color: #B7C0D6 !important; } .bandeau-espace__etiquette { color: var(--or) !important; } .bouton--or, .bandeau-espace .bouton--or { background: linear-gradient(180deg, #DDBD7A 0%, #C9A45C 100%); color: #0B1530 !important; border: 0; box-shadow: 0 10px 24px -10px rgba(201, 164, 92, .8), inset 0 1px 0 rgba(255, 255, 255, .45); } .bouton--or:hover { transform: translateY(-1px); color: #0B1530; } /* Cartes de verre */ .ag-carte, .carte-glass, .tdb-indicateur, .ag-chiffre, .tableau-enveloppe, .carte-liste { background: var(--verre-surface) !important; border: 1px solid var(--verre-liseré) !important; -webkit-backdrop-filter: var(--verre-flou); backdrop-filter: var(--verre-flou); box-shadow: var(--verre-ombre), var(--verre-reflet) !important; } .ag-carte { border-radius: var(--rayon-carte); } .ag-carte__titre { font-size: 1.12rem; letter-spacing: -.015em; } .ag-carte__titre i { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 11px; background: color-mix(in srgb, var(--couleur-primaire) 11%, transparent); font-size: .85rem; } .ag-chiffre { border-radius: 24px; } a.ag-chiffre:hover, a.tdb-indicateur:hover { box-shadow: var(--verre-ombre-survol), var(--verre-reflet) !important; transform: translateY(-2px); } .ag-chiffre, .tdb-indicateur { transition: transform .3s var(--ressort), box-shadow .3s var(--ressort); } /* Indicateurs du tableau de bord : trois par ligne, valeurs sur une ligne */ .tdb-indicateurs { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 1rem !important; } @media (max-width: 1100px) { .tdb-indicateurs { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } } @media (max-width: 560px) { .tdb-indicateurs { grid-template-columns: minmax(0, 1fr) !important; } } .tdb-indicateur { border-radius: 24px !important; padding: 1.25rem 1.3rem !important; } .tdb-indicateur__libelle { text-transform: none !important; letter-spacing: 0 !important; font-size: .86rem !important; font-weight: 650 !important; } .tdb-indicateur__valeur { font-size: clamp(1.45rem, 2.1vw, 1.85rem) !important; white-space: nowrap; letter-spacing: -.03em !important; } .tdb-indicateur__icone { border-radius: 14px !important; } /* Lignes de document */ .ag-ligne-doc { border-radius: 16px; padding-inline: .7rem !important; margin-inline: -.7rem; transition: background-color .2s ease; } .ag-ligne-doc--lien { text-decoration: none; color: inherit; } .ag-ligne-doc--lien:hover { background: color-mix(in srgb, var(--couleur-primaire) 6%, transparent); color: inherit; } .ag-ligne-doc__fin { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: .4rem .7rem; } .ag-lien-discret { font-size: .84rem; font-family: inherit; font-weight: 600; color: var(--couleur-lien); text-decoration: none; } /* Badges plus doux */ .badge-statut { border-radius: 99px !important; padding: .3rem .75rem !important; font-weight: 650 !important; } /* Champs du back-office : tous stylés, y compris l'éditeur de lignes */ .mode-back-office .champ input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), .mode-back-office .champ select, .mode-back-office .champ textarea, .ag-ligne-edit input, .ag-champ-compact { border-radius: 14px !important; border: 1px solid color-mix(in srgb, var(--couleur-texte) 11%, transparent) !important; background: var(--verre-surface-forte) !important; min-height: 46px; padding: .7rem .95rem; font: inherit; font-size: .95rem; color: var(--couleur-texte); width: 100%; transition: border-color .2s ease, box-shadow .2s ease; } .ag-ligne-edit input:focus, .ag-champ-compact:focus, .mode-back-office .champ input:focus, .mode-back-office .champ select:focus, .mode-back-office .champ textarea:focus { outline: 0; border-color: var(--couleur-primaire) !important; box-shadow: 0 0 0 4px color-mix(in srgb, var(--couleur-primaire) 15%, transparent) !important; } .ag-ligne-edit { grid-template-columns: minmax(0, 1fr) 90px 160px 140px 44px; } .ag-ligne-edit__champ { display: block; margin: 0; } .ag-ligne-edit__champ > span { display: none; } .ag-ligne-edit [data-retirer-ligne]:disabled { opacity: .3; cursor: default; } @media (max-width: 760px) { .ag-ligne-edit { grid-template-columns: 1fr 1fr; gap: .65rem; padding: 1rem; border-radius: 20px; border: 1px solid var(--verre-liseré); background: var(--verre-surface-forte); box-shadow: var(--verre-reflet); } .ag-ligne-edit__champ > span { display: block; margin-bottom: .3rem; font-size: .78rem; font-weight: 650; color: var(--couleur-texte-doux); } .ag-ligne-edit__champ--libelle { grid-column: 1 / -1; } .ag-ligne-edit__montant { grid-column: 1; text-align: left; align-self: center; font-size: 1.05rem; } .ag-ligne-edit [data-retirer-ligne] { justify-self: end; } } .ag-recap-total { border-radius: 20px; background: var(--grain), var(--nuit); background-size: var(--nuit-taille); } .ag-champ-compact { margin-bottom: .6rem; } .ag-zone-sensible { margin-top: 1rem; display: grid; gap: .5rem; } .ag-zone-sensible:empty { display: none; } /* Action indisponible : grisée mais lisible */ .bouton.est-inactif, .bouton-icone.est-inactif { opacity: .45; cursor: not-allowed; pointer-events: auto; filter: grayscale(.4); } .bouton.est-inactif:hover, .bouton-icone.est-inactif:hover { transform: none; } /* Tableaux : en-tête teinté, lignes aérées */ .tableau thead th { background: color-mix(in srgb, var(--couleur-texte) 3.5%, transparent) !important; text-transform: none !important; letter-spacing: 0 !important; font-size: .8rem !important; } .tableau-enveloppe { border-radius: 24px !important; overflow: hidden; } /* Lignes de devis et facture : cartes sur mobile */ @media (max-width: 700px) { .ag-defile-x { overflow: visible; } .ag-lignes thead { display: none; } .ag-lignes, .ag-lignes tbody, .ag-lignes tr, .ag-lignes td { display: block; width: 100%; } .ag-lignes tr { margin-bottom: .7rem; padding: .85rem 1rem; border-radius: 18px; border: 1px solid var(--verre-liseré); background: var(--verre-surface-forte); box-shadow: var(--verre-reflet); } .ag-lignes td { border: 0 !important; padding: .15rem 0 !important; } .ag-lignes td:first-child { font-weight: 650; margin-bottom: .35rem; } .ag-lignes td.num { display: flex; justify-content: space-between; text-align: left; } .ag-lignes td.num:nth-child(2)::before { content: "Quantité"; color: var(--couleur-texte-doux); font-weight: 500; } .ag-lignes td.num:nth-child(3)::before { content: "Prix unitaire"; color: var(--couleur-texte-doux); font-weight: 500; } .ag-lignes td.num:nth-child(4)::before { content: "Montant"; color: var(--couleur-texte-doux); font-weight: 500; } .ag-lignes td.num:nth-child(4) { font-weight: 700; } .ag-totaux { max-width: none; padding: 1rem 1.1rem; border-radius: 18px; background: color-mix(in srgb, var(--couleur-texte) 4%, transparent); } } /* Kanban en verre */ .ag-colonne { background: color-mix(in srgb, var(--couleur-texte) 4%, transparent) !important; border: 1px solid var(--verre-filet); border-radius: 24px !important; } .ag-tache { background: var(--verre-surface-forte) !important; border: 1px solid var(--verre-liseré) !important; border-radius: 18px !important; box-shadow: 0 6px 16px -10px rgba(11, 21, 48, .3), var(--verre-reflet) !important; } .ag-colonne--en_cours .ag-colonne__tete::before, .ag-colonne--en_revue .ag-colonne__tete::before, .ag-colonne--termine .ag-colonne__tete::before, .ag-colonne--a_faire .ag-colonne__tete::before { content: ""; width: 9px; height: 9px; border-radius: 50%; margin-right: .5rem; background: #98A1B3; } .ag-colonne--en_cours .ag-colonne__tete::before { background: var(--bleu); } .ag-colonne--en_revue .ag-colonne__tete::before { background: var(--or); } .ag-colonne--termine .ag-colonne__tete::before { background: #0A7A52; } .ag-colonne__tete { justify-content: flex-start !important; } .ag-colonne__compte { margin-left: auto; } .ag-colonne__liste.est-vide::after { content: "Aucune tâche"; display: block; padding: 1rem; text-align: center; font-size: .82rem; color: var(--couleur-texte-doux); border: 1.5px dashed var(--verre-filet); border-radius: 16px; } /* Frise des étapes */ .ag-frise li::before { height: 6px; } .ag-frise li.est-courant::before { background: linear-gradient(90deg, var(--or), var(--or-vif)); box-shadow: 0 0 12px rgba(201, 164, 92, .6); } /* Discussion de projet */ .ag-message__bulle { border-radius: 6px 20px 20px 20px !important; } .ag-message--moi .ag-message__bulle { background: linear-gradient(160deg, rgba(59, 99, 242, .14), rgba(59, 99, 242, .07)) !important; } /* Histogramme des encaissements */ .tdb-agence { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; margin-bottom: 1.5rem; } .tdb-agence > .ag-carte { margin: 0 !important; min-width: 0; } .tdb-agence__large { grid-column: 1 / -1; } @media (min-width: 1300px) { .tdb-agence { grid-template-columns: repeat(3, minmax(0, 1fr)); } .tdb-agence__large:first-child { grid-column: span 2; } } @media (max-width: 900px) { .tdb-agence { grid-template-columns: minmax(0, 1fr); } } .tdb-bloc__entete { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; } .ag-histo { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: clamp(.4rem, 2vw, 1.2rem); align-items: end; height: 220px; padding-top: 1.5rem; } .ag-histo__colonne { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: .45rem; outline: none; } .ag-histo__barre { width: min(100%, 46px); border-radius: 4px 4px 2px 2px; background: color-mix(in srgb, var(--couleur-primaire) 35%, transparent); transition: background-color .2s ease; } .ag-histo__colonne.est-courant .ag-histo__barre { background: var(--couleur-primaire); } .ag-histo__colonne:hover .ag-histo__barre, .ag-histo__colonne:focus-visible .ag-histo__barre { background: var(--couleur-primaire-clair); } .ag-histo__montant { font-size: .75rem; font-weight: 650; color: var(--couleur-texte-doux); font-variant-numeric: tabular-nums; } .ag-histo__mois { font-size: .8rem; font-weight: 600; color: var(--couleur-texte-doux); } .ag-histo__colonne.est-courant .ag-histo__mois { color: var(--couleur-texte); } .ag-histo__bulle { position: absolute; bottom: calc(100% - 1rem); left: 50%; transform: translate(-50%, 4px); padding: .4rem .65rem; border-radius: 10px; background: #0B1530; color: #fff; font-size: .78rem; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .15s ease, transform .15s ease; z-index: 2; } .ag-histo__colonne:hover .ag-histo__bulle, .ag-histo__colonne:focus-visible .ag-histo__bulle { opacity: 1; transform: translate(-50%, 0); } /* Entonnoir des devis */ .ag-entonnoir { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; } .ag-entonnoir a { display: grid; grid-template-columns: 9.5rem minmax(0, 1fr) 2rem; align-items: center; gap: .75rem; padding: .45rem .6rem; margin-inline: -.6rem; border-radius: 12px; color: inherit; text-decoration: none; } .ag-entonnoir a:hover { background: color-mix(in srgb, var(--couleur-primaire) 6%, transparent); } .ag-entonnoir__libelle { font-size: .88rem; font-weight: 600; } .ag-entonnoir__piste { height: 10px; border-radius: 99px; background: color-mix(in srgb, var(--couleur-texte) 6%, transparent); overflow: hidden; } .ag-entonnoir__piste span { display: block; height: 100%; border-radius: inherit; background: var(--couleur-primaire); } .ag-entonnoir strong { text-align: right; font-variant-numeric: tabular-nums; } /* Projets en cours */ .ag-projet-ligne { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) 3rem; align-items: center; gap: 1rem; padding: .7rem; margin-inline: -.7rem; border-radius: 16px; color: inherit; text-decoration: none; } .ag-projet-ligne:hover { background: color-mix(in srgb, var(--couleur-primaire) 6%, transparent); color: inherit; } .ag-projet-ligne__titre strong { display: block; } .ag-projet-ligne__titre span { font-size: .82rem; color: var(--couleur-texte-doux); } .ag-projet-ligne__barre { height: 8px; border-radius: 99px; background: color-mix(in srgb, var(--couleur-texte) 7%, transparent); overflow: hidden; } .ag-projet-ligne__barre span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--couleur-primaire), var(--couleur-primaire-clair)); } .ag-projet-ligne__pourcent { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; } @media (max-width: 560px) { .ag-projet-ligne { grid-template-columns: minmax(0, 1fr) 3rem; } .ag-projet-ligne__barre { grid-column: 1 / -1; grid-row: 2; } } /* Support : fil de bulles */ .ag-fil-support { list-style: none; margin: 0 0 1.25rem; padding: 0; display: grid; gap: 1rem; max-height: 620px; overflow-y: auto; } .ag-bulle { display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: .7rem; max-width: 88%; } .ag-bulle--moi { margin-left: auto; grid-template-columns: minmax(0, 1fr) 38px; } .ag-bulle--moi .ag-bulle__avatar { order: 2; } .ag-bulle__avatar { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 13px; background: linear-gradient(160deg, var(--bleu-vif), var(--bleu)); color: #fff; font-weight: 700; font-size: .78rem; } .ag-bulle--agence .ag-bulle__avatar { background: var(--grain), var(--nuit); color: var(--or); } .ag-bulle__corps { padding: .8rem 1rem; border-radius: 6px 20px 20px 20px; background: color-mix(in srgb, var(--couleur-texte) 5%, transparent); } .ag-bulle--moi .ag-bulle__corps { border-radius: 20px 6px 20px 20px; background: linear-gradient(160deg, rgba(59, 99, 242, .16), rgba(59, 99, 242, .08)); } .ag-bulle__entete { display: flex; flex-wrap: wrap; gap: .3rem .7rem; align-items: baseline; margin-bottom: .25rem; font-size: .82rem; } .ag-bulle__entete time { color: var(--couleur-texte-doux); } .ag-bulle__texte { font-size: .94rem; overflow-wrap: anywhere; } .ag-piece { display: inline-flex; align-items: center; gap: .5rem; margin-top: .6rem; padding: .45rem .75rem; border-radius: 12px; border: 1px solid var(--verre-filet); background: var(--verre-surface-forte); color: inherit; text-decoration: none; font-size: .85rem; font-weight: 600; max-width: 100%; } .ag-piece span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ag-piece small { color: var(--couleur-texte-doux); font-weight: 500; } @media (max-width: 560px) { .ag-bulle { max-width: 100%; } } .ag-repondre { padding-top: 1.1rem; border-top: 1px solid var(--verre-filet); } .ag-repondre__bas { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; margin-top: .6rem; } .ag-repondre__actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-left: auto; } .ag-joindre { position: relative; display: inline-flex; align-items: center; gap: .5rem; padding: .55rem .9rem; border-radius: 12px; border: 1.5px dashed color-mix(in srgb, var(--couleur-primaire) 35%, transparent); color: var(--couleur-texte-doux); font-size: .86rem; font-weight: 600; cursor: pointer; max-width: 100%; } .ag-joindre span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ag-joindre input { position: absolute; inset: 0; opacity: 0; cursor: pointer; } .ag-joindre.a-fichier { border-style: solid; color: var(--couleur-primaire); } .ag-joindre--large { display: flex; padding: .9rem 1rem; margin-top: .25rem; } .ag-formulaire-etroit { max-width: 760px; } .ag-choix-pilules { display: flex; flex-wrap: wrap; gap: .5rem; } .ag-pilule input { position: absolute; opacity: 0; } .ag-pilule span { display: inline-block; padding: .55rem .95rem; border-radius: 99px; border: 1px solid var(--verre-filet); background: var(--verre-surface-forte); font-size: .88rem; font-weight: 600; cursor: pointer; transition: all .2s ease; } .ag-pilule input:checked + span { background: var(--couleur-primaire); border-color: var(--couleur-primaire); color: #fff; } .ag-pilule input:focus-visible + span { outline: 2px solid var(--or); outline-offset: 2px; } fieldset.champ { border: 0; padding: 0; margin: 0 0 1rem; } fieldset.champ legend { font-size: .86rem; font-weight: 600; margin-bottom: .5rem; } /* Barre de navigation mobile du back-office : verre flottant */ .navbar-bottom, .bo-navbar-bas { border-radius: 24px !important; -webkit-backdrop-filter: var(--verre-flou); backdrop-filter: var(--verre-flou); } .vt-carte-choix__corps .vt-carte-choix__coche i { color: inherit !important; font-size: .7rem; margin: 0; } @media (max-width: 640px) { .vt-choix-services { grid-template-columns: minmax(0, 1fr); gap: .55rem; } .vt-carte-choix__corps { display: grid; grid-template-columns: 42px minmax(0, 1fr); column-gap: .85rem; align-items: center; padding: .85rem 2.6rem .85rem .85rem; } .vt-carte-choix__icone { grid-row: span 2; margin: 0; } .vt-carte-choix__coche { top: 50%; transform: translateY(-50%); } } /* Les titres .vt h2/h3 remettent la marge à zéro : on la redonne explicitement. */ .vt .vt-categorie__titre { margin-bottom: 1.75rem; } .vt .vt-options-liste h2, .vt .vt-aide__theme h2 { margin-bottom: 1.1rem; } .vt .vt-etapes h3 { margin-bottom: .55rem; } .vt .vt-valeurs h3 { margin-bottom: .5rem; } /* Case et champs posés sur une surface de nuit (acceptation du devis) */ .vt-case--sombre { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .14); margin-bottom: 1rem; } .vt-case--sombre .vt-case__texte { color: #C3CCE3; } .vt-case--sombre .vt-case__texte a { color: #fff !important; border-bottom-color: var(--or); } .vt-case--sombre .vt-case__boite { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .35); } .vt-case--sombre:has(input:checked) { background: rgba(201, 164, 92, .12); border-color: rgba(201, 164, 92, .5); } .vt-case--sombre input:checked + .vt-case__boite { background: linear-gradient(180deg, #DDBD7A, #C9A45C); border-color: #C9A45C; color: #0B1530; } .vt-recap .vt-champ input, .vt-recap .vt-champ textarea { background: rgba(255, 255, 255, .08) !important; border-color: rgba(255, 255, 255, .16) !important; color: #fff !important; } .vt-recap .vt-champ input:focus, .vt-recap .vt-champ textarea:focus { border-color: var(--or) !important; box-shadow: 0 0 0 4px rgba(201, 164, 92, .2) !important; } .vt-recap .vt-champ label { color: #fff; } .vt-recap details summary { list-style: none; } .vt-recap details summary::-webkit-details-marker { display: none; } @media (max-width: 960px) { .vt-recap { position: static !important; } } /* Carte de nuit : montant et action principale d'une pièce */ .ag-carte--nuit { background: var(--grain), var(--nuit) !important; background-size: var(--nuit-taille) !important; border: 1px solid rgba(255, 255, 255, .08) !important; color: #DCE3F3; } .ag-carte--nuit__libelle { display: block; color: #A9B4CF; font-size: .86rem; font-weight: 600; } .ag-carte--nuit__montant { display: block; margin: .25rem 0 .35rem; font-family: var(--police-titres); font-size: clamp(1.7rem, 3vw, 2.2rem); letter-spacing: -.03em; line-height: 1.1; background: linear-gradient(180deg, #F0D8A4, #C9A45C); -webkit-background-clip: text; background-clip: text; color: transparent; } .ag-carte--nuit__detail { display: block; color: #A9B4CF; font-size: .86rem; } .ag-carte--nuit__formulaire { margin-top: 1.25rem; display: grid; gap: .9rem; } .ag-carte--nuit__etat { margin: 1.1rem 0 1rem; display: flex; gap: .55rem; color: #DCE3F3; font-size: .92rem; } .ag-carte--nuit__etat i { color: var(--or); margin-top: .2rem; } /* Case à cocher du back-office et de l'espace client */ .ag-case { position: relative; display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: .75rem; align-items: start; padding: .85rem .95rem; border-radius: 16px; border: 1px solid var(--verre-filet); background: var(--verre-surface-forte); font-size: .9rem; cursor: pointer; } .ag-case input { position: absolute; opacity: 0; width: 1px; height: 1px; } .ag-case__boite { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 8px; border: 2px solid color-mix(in srgb, var(--couleur-texte) 30%, transparent); color: transparent; font-size: .72rem; transition: all .2s var(--ressort); } .ag-case input:checked + .ag-case__boite { background: var(--couleur-primaire); border-color: var(--couleur-primaire); color: #fff; } .ag-case input:focus-visible + .ag-case__boite { outline: 2px solid var(--or); outline-offset: 2px; } .ag-case--sombre { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .14); color: #C3CCE3; } .ag-case--sombre a { color: #fff; text-decoration: none; border-bottom: 2px solid var(--or); } .ag-case--sombre .ag-case__boite { border-color: rgba(255, 255, 255, .4); } .ag-case--sombre input:checked + .ag-case__boite { background: linear-gradient(180deg, #DDBD7A, #C9A45C); border-color: #C9A45C; color: #0B1530; } .ag-case--sombre:has(input:checked) { border-color: rgba(201, 164, 92, .55); background: rgba(201, 164, 92, .12); } /* Suite numérotée : ce qui se passe après l'accord (une vraie séquence) */ .ag-suite { list-style: none; margin: 0; padding: 0; counter-reset: suite; display: grid; gap: .9rem; } .ag-suite li { counter-increment: suite; display: grid; grid-template-columns: 32px minmax(0, 1fr); column-gap: .75rem; } .ag-suite li::before { content: counter(suite); grid-row: span 2; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 11px; background: color-mix(in srgb, var(--couleur-primaire) 11%, transparent); color: var(--couleur-primaire); font-weight: 800; font-family: var(--police-titres); } .ag-suite strong { font-size: .93rem; } .ag-suite span { color: var(--couleur-texte-doux); font-size: .85rem; } .ag-deux-colonnes aside > .ag-carte + .ag-carte { margin-top: 1.25rem; } /* Accueil client */ .ag-bienvenue { background: var(--grain), var(--nuit) !important; background-size: var(--nuit-taille) !important; border-radius: 30px !important; border: 1px solid rgba(255, 255, 255, .08); box-shadow: 0 30px 60px -30px rgba(11, 21, 48, .7) !important; } .ag-raccourci-support { display: grid !important; grid-template-columns: 48px minmax(0, 1fr) auto; gap: 1rem; align-items: center; margin-top: 1.25rem; color: inherit; text-decoration: none; transition: transform .3s var(--ressort), box-shadow .3s var(--ressort); } .ag-raccourci-support:hover { transform: translateY(-2px); color: inherit; box-shadow: var(--verre-ombre-survol), var(--verre-reflet) !important; } .ag-raccourci-support__icone { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 16px; background: linear-gradient(160deg, var(--bleu-vif), var(--bleu)); color: #fff; font-size: 1.2rem; } .ag-raccourci-support strong { display: block; font-family: var(--police-titres); font-size: 1.05rem; } .ag-raccourci-support span span { color: var(--couleur-texte-doux); font-size: .9rem; } .bo-sidebar__nav { overflow-y: auto; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.15) transparent; } @media (min-width: 993px) and (max-width: 1299px) { .tdb-agence__projets { grid-column: 1 / -1; } } .tdb-agence__projets .ag-projet-ligne { grid-template-columns: minmax(0, 1fr) 3rem; } .tdb-agence__projets .ag-projet-ligne__barre { grid-column: 1 / -1; grid-row: 2; } .ag-grille > .champ, .ag-grille > fieldset.champ { margin: 0 0 1rem !important; } .ag-ligne-edit { grid-template-columns: minmax(0, 1fr) 72px 130px 118px 40px; } .ag-chiffre--encre { background: var(--grain), var(--nuit) !important; background-size: var(--nuit-taille) !important; border-color: rgba(255, 255, 255, .08) !important; } .ag-chiffre--encre .ag-chiffre__valeur { background: linear-gradient(180deg, #F0D8A4, #C9A45C); -webkit-background-clip: text; background-clip: text; color: transparent !important; } @media (max-width: 560px) { .ag-chiffres { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; } .ag-chiffres > :first-child:nth-last-child(odd) { grid-column: 1 / -1; } .ag-chiffre { padding: .95rem 1rem; } .ag-chiffre__valeur { font-size: 1.2rem; } } .bo-sidebar__section { text-transform: none !important; letter-spacing: 0 !important; font-size: .78rem !important; } html[data-theme="sombre"] .vt-service__icone, html[data-theme="sombre"] .ag-carte__titre i { color: #9DB2FF; } /* Petits écrans : rien ne dépasse */ .vt-pied__grille > * { min-width: 0; } .vt-lettre { max-width: min(380px, 100%); } .vt-lettre__ligne { flex-wrap: wrap; } .vt-lettre__ligne input { flex: 1 1 180px; } .vt-recherche-aide { flex-wrap: wrap; } .vt-recherche-aide input { flex: 1 1 200px; min-width: 0; } @media (max-width: 480px) { .vt-recherche-aide .vt-bouton { width: 100%; } } .page-legale__tableau, .vt .page-legale__corps table { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; } .bo-topbar__gauche { min-width: 0; flex: 1 1 auto; } .bo-topbar__titre { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .bo-topbar__droite { flex: 0 0 auto; } @media (max-width: 420px) { .bo-topbar__droite { gap: .35rem !important; } .bo-topbar__avatar .fa-chevron-down { display: none; } } .ag-histo__colonne:nth-child(-n+2) .ag-histo__bulle { left: 0; transform: translate(0, 4px); } .ag-histo__colonne:nth-last-child(-n+2) .ag-histo__bulle { left: auto; right: 0; transform: translate(0, 4px); } .ag-histo__colonne:nth-child(-n+2):hover .ag-histo__bulle, .ag-histo__colonne:nth-last-child(-n+2):hover .ag-histo__bulle, .ag-histo__colonne:nth-child(-n+2):focus-visible .ag-histo__bulle, .ag-histo__colonne:nth-last-child(-n+2):focus-visible .ag-histo__bulle { transform: none; } .ag-histo__bulle { white-space: normal; width: max-content; max-width: 150px; text-align: center; } /* Sur le simulateur mobile, le bandeau cookies se pose au-dessus de la barre d'estimation : il ne doit jamais masquer le bouton d'envoi. */ @media (max-width: 1020px) { .vt:has(.vt-page-simulateur) .bandeau-cookies { bottom: calc(92px + env(safe-area-inset-bottom)); } } .vt-barre-mobile__total { min-width: 0; } .vt-barre-mobile__total strong { white-space: nowrap; font-size: clamp(1rem, 4.6vw, 1.3rem) !important; } /* Menu « Déplacer vers » : dans le flux de la carte, jamais rogné par le défilement horizontal du tableau ni recouvert par la carte suivante. */ .ag-menu-deplacer[hidden] { display: none !important; } .ag-tache__deplacer { position: static; } .ag-tache__poignee { position: absolute; top: .45rem; right: .45rem; z-index: 2; } .ag-menu-deplacer { position: static !important; margin: .2rem 0 .6rem; min-width: 0; box-shadow: none; background: color-mix(in srgb, var(--couleur-texte) 4%, transparent); border-color: var(--verre-filet); } .ag-tache { display: flex; flex-direction: column; } .ag-tache__deplacer { order: 2; } .ag-menu-deplacer { margin: .7rem 0 0; } .ag-pastille { width: 10px !important; height: 10px !important; min-width: 10px; max-width: 10px; flex: 0 0 10px !important; padding: 0 !important; } .auth-volet__liste li { color: #DCE3F3 !important; } .auth-volet__liste i { color: var(--or) !important; } /* ---------- Lot 3 : finitions ---------- */ /* Barres de recherche : aucun cadre derrière, des champs en pilule de verre */ .barre-filtres { background: none !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } .barre-filtres__recherche input, .barre-filtres select, .barre-filtres__champs select { min-height: 48px; border-radius: 99px !important; border: 1px solid var(--verre-liseré) !important; background: var(--verre-surface-forte) !important; -webkit-backdrop-filter: var(--verre-flou); backdrop-filter: var(--verre-flou); box-shadow: var(--verre-ombre), var(--verre-reflet) !important; color: var(--couleur-texte); } .barre-filtres select { padding: 0 2.6rem 0 1.1rem; } .barre-filtres__recherche input:focus, .barre-filtres select:focus { border-color: var(--couleur-primaire) !important; box-shadow: 0 0 0 4px color-mix(in srgb, var(--couleur-primaire) 15%, transparent) !important; } /* En-têtes d'action : ne débordent jamais, passent à la ligne */ .entete-action { flex-wrap: wrap; gap: .6rem; } @media (max-width: 560px) { .entete-action > * { flex: 1 1 auto; justify-content: center; } } /* Espacement après un bandeau d'espace, même sur un état vide */ .bandeau-espace { margin-bottom: 1.5rem !important; } .ag-vide { display: grid; justify-items: center; gap: .75rem; padding: 2rem 1rem; } .ag-vide i { margin: 0; width: 64px; height: 64px; display: grid; place-items: center; border-radius: 20px; background: color-mix(in srgb, var(--couleur-primaire) 9%, transparent); color: var(--couleur-primaire); opacity: 1; font-size: 1.5rem; } .ag-vide p { margin: 0; } /* Centre d'aide */ .vt .vt-aide__sommaire { padding: .6rem; border-radius: 24px !important; gap: .2rem; } .vt .vt-aide__sommaire a { border-radius: 14px; padding: .6rem .85rem; } .vt .vt-aide__sommaire a:hover { background: color-mix(in srgb, var(--bleu) 8%, transparent); } .vt-recherche-aide input { min-height: 56px; border-radius: 99px !important; border: 1px solid rgba(255, 255, 255, .25) !important; background: rgba(255, 255, 255, .92) !important; color: #121A33; padding: 0 1.4rem; box-shadow: 0 14px 30px -14px rgba(0, 0, 0, .5); } html[data-theme="sombre"] .vt-recherche-aide input { background: rgba(255, 255, 255, .1) !important; color: #fff; } .vt-recherche-aide .vt-bouton { min-height: 56px; } @media (max-width: 860px) { .vt .vt-aide__sommaire { display: flex; flex-wrap: wrap; padding: .5rem; } } /* ---------- Réalisations ---------- */ .vt-realisations { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.1rem; } @media (max-width: 1000px) { .vt-realisations { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 620px) { .vt-realisations { grid-template-columns: minmax(0, 1fr); } } .vt-realisation { display: flex; flex-direction: column; overflow: hidden; border-radius: var(--rayon-carte); background: var(--verre-surface); border: 1px solid var(--verre-liseré); -webkit-backdrop-filter: var(--verre-flou); backdrop-filter: var(--verre-flou); box-shadow: var(--verre-ombre), var(--verre-reflet); color: inherit !important; text-decoration: none; transition: transform .35s var(--ressort), box-shadow .35s var(--ressort); } .vt-realisation:hover { transform: translateY(-4px); box-shadow: var(--verre-ombre-survol), var(--verre-reflet); } .vt-realisation__logo { position: relative; display: grid; place-items: center; height: 170px; margin: .6rem .6rem 0; border-radius: 22px; background: radial-gradient(circle at 30% 20%, #FFFFFF, #EEF2FE 70%); border: 1px solid var(--verre-filet); overflow: hidden; } html[data-theme="sombre"] .vt-realisation__logo { background: radial-gradient(circle at 30% 20%, #1A2A55, #0E1A3A 70%); } .vt-realisation__logo img { max-width: 62%; max-height: 96px; object-fit: contain; transition: transform .4s var(--ressort); } .vt-realisation:hover .vt-realisation__logo img { transform: scale(1.05); } .vt-realisation__initiale { display: grid; place-items: center; width: 72px; height: 72px; border-radius: 22px; background: linear-gradient(160deg, var(--bleu-vif), var(--bleu)); color: #fff; font-family: var(--vt-titres); font-size: 2rem; font-weight: 800; } .vt-realisation__corps { display: flex; flex-direction: column; gap: .4rem; padding: 1.15rem 1.35rem 1.35rem; flex: 1; } .vt-realisation__categorie { align-self: flex-start; padding: .25rem .65rem; border-radius: 99px; background: color-mix(in srgb, var(--bleu) 9%, transparent); color: var(--bleu); font-size: .76rem; font-weight: 700; } html[data-theme="sombre"] .vt-realisation__categorie { color: #9DB2FF; } .vt-realisation__titre { font-family: var(--vt-titres); font-size: 1.22rem; letter-spacing: -.015em; } .vt-realisation__texte { color: var(--vt-doux); font-size: .93rem; line-height: 1.55; } .vt-realisation__lien { margin-top: auto; padding-top: .75rem; display: flex; align-items: center; gap: .5rem; border-top: 1px solid var(--vt-ligne); font-weight: 650; font-size: .88rem; color: var(--vt-texte); } .vt-realisation__lien > i:first-child { color: var(--bleu); } .vt-realisation__fleche { margin-left: auto; font-size: .78rem; color: var(--vt-doux); transition: transform .25s var(--ressort); } .vt-realisation:hover .vt-realisation__fleche { transform: translate(2px, -2px); color: var(--bleu); } /* ---------- Ils nous font confiance ---------- */ .vt-confiance { padding: clamp(1.6rem, 4vw, 2.6rem); border-radius: 32px; text-align: center; background: var(--verre-surface); border: 1px solid var(--verre-liseré); -webkit-backdrop-filter: var(--verre-flou); backdrop-filter: var(--verre-flou); box-shadow: var(--verre-ombre), var(--verre-reflet); } .vt .vt-confiance__titre { font-size: clamp(1.3rem, 2.5vw, 1.65rem); margin-bottom: 1.6rem; } .vt-logos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .8rem; } .vt-logo { display: grid; place-items: center; height: 96px; padding: 1rem 1.25rem; border-radius: 20px; background: var(--verre-surface-forte); border: 1px solid var(--verre-filet); transition: transform .3s var(--ressort), box-shadow .3s var(--ressort), border-color .3s ease; } .vt-logo img { max-width: 100%; max-height: 52px; object-fit: contain; filter: grayscale(1); opacity: .72; transition: filter .3s ease, opacity .3s ease; } html[data-theme="sombre"] .vt-logo { background: rgba(255, 255, 255, .92); } a.vt-logo:hover, span.vt-logo:hover { transform: translateY(-3px); box-shadow: var(--verre-ombre); border-color: color-mix(in srgb, var(--bleu) 25%, transparent); } .vt-logo:hover img { filter: none; opacity: 1; } .vt-confiance__lien { display: inline-flex; align-items: center; gap: .45rem; margin-top: 1.4rem; font-weight: 650; font-size: .92rem; text-decoration: none; } .vt-confiance__lien i { transition: transform .25s var(--ressort); } .vt-confiance__lien:hover i { transform: translateX(3px); } /* ---------- Articles de l'accueil ---------- */ .vt-article { overflow: hidden; gap: 0; border-radius: var(--rayon-carte); background: var(--verre-surface); border: 1px solid var(--verre-liseré); -webkit-backdrop-filter: var(--verre-flou); backdrop-filter: var(--verre-flou); box-shadow: var(--verre-ombre), var(--verre-reflet); transition: transform .35s var(--ressort), box-shadow .35s var(--ressort); } .vt-article:hover { transform: translateY(-4px); box-shadow: var(--verre-ombre-survol), var(--verre-reflet); } .vt .vt-article__visuel { margin: .6rem .6rem 0; border-radius: 22px !important; background: var(--grain), var(--nuit) !important; background-size: var(--nuit-taille) !important; border: 0 !important; box-shadow: none !important; position: relative; } .vt-article__motif { position: absolute; inset: 0; display: grid; place-items: center; color: rgba(201, 164, 92, .85); font-size: 2.2rem; } .vt-article__corps { display: flex; flex-direction: column; gap: .45rem; padding: 1.1rem 1.35rem 1.35rem; flex: 1; } .vt .vt-article h3 { font-size: 1.15rem; line-height: 1.25; } .vt-article__chapo { color: var(--vt-doux); font-size: .92rem; line-height: 1.55; } .vt-article__lire { margin-top: auto; padding-top: .6rem; font-weight: 650; font-size: .88rem; color: var(--vt-bleu); display: inline-flex; gap: .4rem; align-items: center; } html[data-theme="sombre"] .vt-article__lire { color: #9DB2FF; } .vt-articles { align-items: stretch; } /* État vide public */ .vt-vide { max-width: 560px; margin: 0 auto; text-align: center; display: grid; justify-items: center; gap: .8rem; padding: 2.5rem 1.5rem; border-radius: 32px; background: var(--verre-surface); border: 1px solid var(--verre-liseré); box-shadow: var(--verre-ombre), var(--verre-reflet); } .vt-vide__icone { display: grid; place-items: center; width: 72px; height: 72px; border-radius: 22px; background: linear-gradient(160deg, var(--bleu-vif), var(--bleu)); color: #fff; font-size: 1.6rem; } .vt-vide p { margin: 0; color: var(--vt-doux); } /* Administration : vignettes et aperçu de logo */ .ag-vignette-logo { display: block; max-width: 90px; max-height: 42px; object-fit: contain; } .ag-apercu-logo { display: grid; place-items: center; height: 160px; margin-bottom: .9rem; border-radius: 20px; border: 1px solid var(--verre-filet); background: radial-gradient(circle at 30% 20%, #fff, #EEF2FE 70%); overflow: hidden; color: var(--couleur-texte-doux); } .ag-apercu-logo img { max-width: 70%; max-height: 110px; object-fit: contain; } .vt-logo img { width: 100%; height: 52px; max-width: none; max-height: none; object-fit: contain; } .vt-realisation__logo img { width: 62%; height: 96px; max-width: none; object-fit: contain; } .vt-nav__lien, .vt-lien-compte { white-space: nowrap; } @media (max-width: 1240px) { .vt-nav, .vt-lien-compte { display: none !important; } .vt-burger { display: inline-flex !important; } .vt-entete__actions, .vt-nav + .vt-entete__actions { margin-left: auto !important; } } /* ---------- Thème sombre : contrastes ---------- */ html[data-theme="sombre"] .vt a.vt-bouton--or, html[data-theme="sombre"] .vt .vt-bouton--or { color: #0B1530 !important; } html[data-theme="sombre"] .vt a.vt-bouton--bleu { color: #fff !important; } html[data-theme="sombre"] .vt a.vt-bouton--contour { color: var(--vt-texte) !important; } html[data-theme="sombre"] .vt a.vt-bouton--fantome-clair { color: #fff !important; } html[data-theme="sombre"] .vt-realisation__logo { background: radial-gradient(circle at 30% 20%, #FFFFFF, #E6EBF7 75%); border-color: rgba(255, 255, 255, .1); } html[data-theme="sombre"] .badge-statut--info { background: rgba(157, 178, 255, .16) !important; color: #B9C9FF !important; } html[data-theme="sombre"] .badge-statut--valide { background: rgba(91, 211, 162, .15) !important; color: #7FE0B8 !important; } html[data-theme="sombre"] .badge-statut--attente { background: rgba(233, 196, 120, .16) !important; color: #F0D08E !important; } html[data-theme="sombre"] .badge-statut--refuse { background: rgba(255, 139, 163, .15) !important; color: #FFA3B6 !important; } html[data-theme="sombre"] .badge-statut--archive { background: rgba(255, 255, 255, .08) !important; color: #B7C0D6 !important; } html[data-theme="sombre"] .ag-totaux .ag-totaux__reste, html[data-theme="sombre"] .ag-lien-discret { color: #9DB2FF; } html[data-theme="sombre"] .vt-statut--info { background: rgba(157, 178, 255, .16); color: #B9C9FF; } html[data-theme="sombre"] .vt-statut--valide { background: rgba(91, 211, 162, .15); color: #7FE0B8; } html[data-theme="sombre"] .vt-statut--attente { background: rgba(233, 196, 120, .16); color: #F0D08E; } html[data-theme="sombre"] .vt-inclus { background: rgba(91, 211, 162, .07); border-color: rgba(91, 211, 162, .2); } html[data-theme="sombre"] .vt-inclus li i { color: #5BD3A2; } html[data-theme="sombre"] .vt-points i { color: #5BD3A2 !important; } html[data-theme="sombre"] .vt-alerte--erreur { background: rgba(255, 139, 163, .1); color: #FFB3C2; } html[data-theme="sombre"] .vt-alerte--info { background: rgba(157, 178, 255, .1); color: #C9D5FF; } html[data-theme="sombre"] .vt-carte-choix__icone i, html[data-theme="sombre"] .vt-service__icone i, html[data-theme="sombre"] .vt-categorie__titre i { color: #9DB2FF !important; } /* ---------- Lot 3b ---------- */ /* Cartes sombres qui portent aussi .carte-glass : elles gardent leur fond de nuit. */ .carte-glass.profil-entete--grenat, .profil-entete--grenat { background: var(--grain), var(--nuit) !important; background-size: var(--nuit-taille) !important; border: 1px solid rgba(255, 255, 255, .08) !important; color: #DCE3F3; } .profil-entete--grenat .badge-statut { background: rgba(255, 255, 255, .1) !important; color: #E6EAF5 !important; } /* Boutons du squelette posés sur le site public : couleur de texte explicite, sinon la règle des liens (.vt a) les teinte en bleu. */ .vt a.bouton--principal, .vt button.bouton--principal { color: #fff !important; } .vt a.bouton--accent, .vt button.bouton--accent { background: linear-gradient(180deg, #DDBD7A, #C9A45C) !important; color: #0B1530 !important; } .vt a.bouton--contour, .vt button.bouton--contour { color: var(--vt-texte) !important; } .profil-entete--grenat .profil-nom { color: #fff !important; } .profil-entete--grenat .profil-email { color: #C9A45C !important; } /* Catalogue : la barre d'outils d'une option occupe sa propre ligne. */ .ag-option__outils { grid-column: 1 / -1; gap: .5rem; padding-top: .75rem; margin-top: .15rem; border-top: 1px solid var(--verre-filet); } .ag-case--compact { display: inline-grid; grid-template-columns: 22px auto; align-items: center; gap: .55rem; padding: .45rem .85rem .45rem .55rem; margin-right: auto; border-radius: 999px; } .ag-case--compact .ag-case__boite { width: 22px; height: 22px; border-radius: 7px; } .ag-case--compact:has(input:checked) { border-color: color-mix(in srgb, var(--couleur-primaire) 40%, transparent); } /* Simulateur : une option ne dépasse jamais de sa carte. */ .vt-ligne-option, .vt-ligne-option label, .vt-ligne-option__texte { min-width: 0; } .vt-ligne-option__texte { overflow-wrap: anywhere; } @media (max-width: 600px) { .vt-ligne-option { flex-direction: column; align-items: stretch; gap: .5rem; } .vt-ligne-option__prix { padding-left: calc(24px + .75rem); white-space: normal; color: var(--bleu); } .vt-ligne-option .vt-quantite { align-self: flex-start; } } /* Type, prix et prix max se partagent la ligne ; unité et quantité max, la suivante. */ .ag-option > .champ:not(.ag-option__libelle):not(.ag-option__description):not([data-quantite]) { grid-column: span 2; } .ag-option > .champ[data-quantite] { grid-column: span 3; } @media (max-width: 860px) { .ag-option > .champ:not(.ag-option__libelle):not(.ag-option__description) { grid-column: auto; } } /* ===================================================================== Lot 4 ===================================================================== */ /* ---------- Fiche service : rien ne dépasse sur mobile ---------- */ @media (max-width: 960px) { .vt-fiche { grid-template-columns: minmax(0, 1fr); } } .vt-fiche__texte, .vt-encart { min-width: 0; overflow-wrap: anywhere; } @media (max-width: 600px) { .vt-option { flex-direction: column; gap: .3rem; } .vt-option strong { white-space: normal; color: var(--bleu); } } /* ---------- Services : une catégorie à un seul service, alignée à gauche sur mobile ---------- */ @media (max-width: 640px) { .vt-services--1 .vt-service { display: flex; flex-direction: column; align-items: stretch; text-align: left; } .vt-services--1 .vt-service__icone { align-self: flex-start; width: 52px; height: 52px; font-size: 1.25rem; } .vt-services--1 .vt-service__prix { justify-content: space-between; } } /* ---------- Logos clients : fichiers transparents, une version par thème ---------- Aucune plaque : le logo repose sur un léger voile du thème. La version sombre (textes en clair) remplace la claire en thème sombre. */ .logo-client--sombre { display: none !important; } html[data-theme="sombre"] .logo-client--sombre { display: block !important; } html[data-theme="sombre"] .logo-client--clair { display: none !important; } .vt-realisation__logo, html[data-theme="sombre"] .vt-realisation__logo { background: radial-gradient(circle at 30% 15%, color-mix(in srgb, var(--bleu) 7%, transparent), transparent 70%), color-mix(in srgb, var(--vt-texte, #0B1530) 3%, transparent); border-color: var(--verre-filet); } html[data-theme="sombre"] .vt-realisation__logo { background: radial-gradient(circle at 30% 15%, rgba(76, 110, 245, .16), transparent 70%), rgba(255, 255, 255, .03); } .vt-realisation__logo img { width: 66%; height: 92px; object-fit: contain; } /* ---------- Page « Nos partenaires » : cartes compactes ---------- */ .partenaires-page__groupe h2 { font-size: clamp(1.35rem, 2.6vw, 1.7rem); margin-bottom: 1.1rem; } .vt-references { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: .85rem; } .vt-reference { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 1rem; align-items: center; height: 100%; padding: .8rem; border-radius: 22px; color: inherit !important; text-decoration: none !important; background: var(--verre-surface); border: 1px solid var(--verre-liseré); box-shadow: var(--verre-ombre), var(--verre-reflet); -webkit-backdrop-filter: var(--verre-flou); backdrop-filter: var(--verre-flou); transition: transform .3s var(--ressort), box-shadow .3s var(--ressort); } a.vt-reference:hover { transform: translateY(-2px); box-shadow: var(--verre-ombre-survol), var(--verre-reflet); } .vt-reference__plaque { display: grid; place-items: center; height: 76px; padding: .6rem .8rem; border-radius: 16px; background: color-mix(in srgb, var(--vt-texte, #0B1530) 3%, transparent); border: 1px solid var(--verre-filet); } html[data-theme="sombre"] .vt-reference__plaque { background: rgba(255, 255, 255, .03); } .vt-reference__plaque img { width: 100%; height: 100%; object-fit: contain; } .vt-reference__initiale { font-family: var(--vt-titres); font-weight: 800; font-size: 1.6rem; color: var(--bleu); } .vt-reference__corps { display: grid; gap: .2rem; min-width: 0; } .vt-reference__corps strong { font-size: 1rem; } .vt-reference__corps span { color: var(--vt-doux); font-size: .88rem; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .vt-reference__corps small { color: var(--bleu); font-weight: 600; font-size: .8rem; overflow-wrap: anywhere; } html[data-theme="sombre"] .vt-reference__corps small { color: #9DB2FF; } @media (max-width: 520px) { .vt-reference { grid-template-columns: 88px minmax(0, 1fr); gap: .8rem; } .vt-reference__plaque { height: 64px; } } /* ---------- Étoiles ---------- */ .vt-etoiles, .ag-etoiles { display: inline-flex; gap: .15rem; color: #E0B04A; font-size: .9rem; } .vt-etoiles .fa-regular, .ag-etoiles .fa-regular { color: color-mix(in srgb, currentColor 35%, transparent); } /* ---------- Avis clients (accueil) ---------- */ .vt-tete--avis { grid-template-columns: minmax(0, 1fr) auto; align-items: end; } @media (max-width: 860px) { .vt-tete--avis { grid-template-columns: minmax(0, 1fr); } .vt-tete--avis .vt-bouton { justify-self: start; } } .vt-avis-moyenne { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .8rem; } .vt-avis-moyenne .vt-etoiles { font-size: 1.05rem; } .vt-avis-moyenne strong { color: var(--vt-texte); } .vt-avis { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; } .vt-avis__carte { display: flex; flex-direction: column; gap: .9rem; padding: 1.5rem; border-radius: var(--rayon-carte, 28px); background: var(--verre-surface); border: 1px solid var(--verre-liseré); box-shadow: var(--verre-ombre), var(--verre-reflet); -webkit-backdrop-filter: var(--verre-flou); backdrop-filter: var(--verre-flou); } .vt-avis__carte blockquote { margin: 0; font-size: 1rem; line-height: 1.65; color: var(--vt-texte); display: -webkit-box; -webkit-line-clamp: 7; -webkit-box-orient: vertical; overflow: hidden; } .vt-avis__carte footer { display: flex; align-items: center; gap: .75rem; margin-top: auto; padding-top: .9rem; border-top: 1px solid var(--vt-ligne); } .vt-avis__carte footer span:last-child { display: grid; line-height: 1.3; } .vt-avis__carte footer small { color: var(--vt-doux); font-size: .84rem; } .vt-avis__initiales { display: grid; place-items: center; flex: 0 0 auto; width: 42px; height: 42px; border-radius: 14px; background: linear-gradient(160deg, var(--bleu-vif), var(--bleu)); color: #fff; font-weight: 700; font-size: .9rem; } @media (max-width: 960px) { .vt-avis { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: .8rem; padding-bottom: .6rem; margin-inline: -1rem; padding-inline: 1rem; scrollbar-width: none; } .vt-avis::-webkit-scrollbar { display: none; } .vt-avis__carte { flex: 0 0 min(84%, 340px); scroll-snap-align: start; } } /* ---------- Formulaire d'avis : note en étoiles ---------- */ .vt-note { border: 0; margin: 0 0 1.4rem; padding: 0; } .vt-note legend { font-weight: 600; font-size: .92rem; margin-bottom: .5rem; } .vt-note__etoiles { display: inline-flex; flex-direction: row-reverse; gap: .3rem; } .vt-note__etoiles input { position: absolute; opacity: 0; width: 1px; height: 1px; } .vt-note__etoiles label { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 15px; cursor: pointer; font-size: 1.35rem; color: color-mix(in srgb, var(--vt-texte, #0B1530) 22%, transparent); background: var(--verre-surface-forte); border: 1px solid var(--verre-filet); transition: color .15s ease, transform .2s var(--ressort), background-color .2s ease; } .vt-note__etoiles label:hover, .vt-note__etoiles label:hover ~ label, .vt-note__etoiles input:checked ~ label { color: #E0B04A; background: rgba(224, 176, 74, .12); } .vt-note__etoiles label:hover { transform: scale(1.08); } .vt-note__etoiles input:focus-visible + label { outline: 2px solid var(--bleu); outline-offset: 2px; } .vt-note.a-erreur .vt-note__etoiles label { border-color: #C23452; } /* ---------- Avis : back-office ---------- */ .ag-avis-resume { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: 1.25rem; } .ag-avis-resume__note { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; } .ag-avis-resume__note strong { font-size: 2rem; font-family: var(--police-titres, inherit); line-height: 1; } .ag-avis-resume__note .ag-etoiles { font-size: 1.1rem; } .bouton-icone.est-actif { background: color-mix(in srgb, var(--couleur-primaire) 14%, transparent); color: var(--couleur-primaire); } /* ---------- Barre de navigation mobile du site ---------- */ .vt-onglets-mobile { display: none; } @media (max-width: 760px) { .vt-onglets-mobile { position: fixed; left: .75rem; right: .75rem; bottom: calc(.6rem + env(safe-area-inset-bottom)); z-index: 40; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); align-items: end; gap: .1rem; padding: .45rem .35rem; border-radius: 26px; background: rgba(255, 255, 255, .78); border: 1px solid rgba(255, 255, 255, .7); -webkit-backdrop-filter: blur(22px) saturate(180%); backdrop-filter: blur(22px) saturate(180%); box-shadow: 0 18px 40px -18px rgba(11, 21, 48, .45), inset 0 1px 0 rgba(255, 255, 255, .9); } html[data-theme="sombre"] .vt-onglets-mobile { background: rgba(14, 24, 52, .82); border-color: rgba(255, 255, 255, .08); box-shadow: 0 18px 40px -16px rgba(0, 0, 0, .7), inset 0 1px 0 rgba(255, 255, 255, .06); } .vt-onglets-mobile__lien { display: grid; justify-items: center; gap: .15rem; padding: .3rem 0; border-radius: 18px; font-size: .68rem; font-weight: 600; color: var(--vt-doux) !important; text-decoration: none !important; -webkit-tap-highlight-color: transparent; } .vt-onglets-mobile__icone { display: grid; place-items: center; width: 40px; height: 30px; border-radius: 12px; font-size: 1.05rem; transition: background-color .2s ease, transform .25s var(--ressort); } .vt-onglets-mobile__lien:active .vt-onglets-mobile__icone { transform: scale(.9); } .vt-onglets-mobile__lien.est-actif { color: var(--bleu) !important; } html[data-theme="sombre"] .vt-onglets-mobile__lien.est-actif { color: #9DB2FF !important; } .vt-onglets-mobile__lien.est-actif .vt-onglets-mobile__icone { background: color-mix(in srgb, var(--bleu) 12%, transparent); } .vt-onglets-mobile__lien--central { color: var(--vt-texte) !important; } .vt-onglets-mobile__lien--central .vt-onglets-mobile__icone { width: 52px; height: 52px; margin-top: -1.4rem; border-radius: 18px; background: linear-gradient(180deg, #E2C383, #C9A45C); color: #0B1530; font-size: 1.2rem; box-shadow: 0 12px 24px -10px rgba(201, 164, 92, .9), inset 0 1px 0 rgba(255, 255, 255, .55); } /* Ce qui flotte en bas laisse la place à la barre. */ .vt:has(.vt-onglets-mobile) { padding-bottom: calc(84px + env(safe-area-inset-bottom)); } .vt:has(.vt-onglets-mobile) .vt-whatsapp-flottant { bottom: calc(96px + env(safe-area-inset-bottom)); width: 50px; height: 50px; font-size: 1.45rem; } .vt:has(.vt-onglets-mobile) .bandeau-cookies { bottom: calc(92px + env(safe-area-inset-bottom)) !important; } } /* ---------- Recherche : déclencheurs ---------- */ .vt-recherche-bouton { display: inline-grid; place-items: center; text-decoration: none !important; color: inherit !important; } .bo-recherche-declencheur { display: inline-flex; align-items: center; gap: .55rem; height: 40px; padding: 0 .55rem 0 .85rem; margin-right: .2rem; border-radius: 14px; border: 1px solid var(--verre-filet); background: var(--verre-surface-forte); color: var(--couleur-texte-doux); font-size: .88rem; cursor: pointer; transition: border-color .2s ease, box-shadow .2s ease; } .bo-recherche-declencheur:hover { border-color: color-mix(in srgb, var(--couleur-primaire) 35%, transparent); box-shadow: var(--verre-ombre); } .bo-recherche-declencheur__texte { min-width: 9rem; text-align: left; } .bo-recherche-declencheur__touche { padding: .15rem .4rem; border-radius: 7px; background: color-mix(in srgb, var(--couleur-texte) 7%, transparent); color: var(--couleur-texte-doux); font-family: inherit; font-size: .72rem; font-weight: 600; } @media (max-width: 900px) { .bo-recherche-declencheur { width: 40px; padding: 0; justify-content: center; border-radius: 50%; } .bo-recherche-declencheur__texte, .bo-recherche-declencheur__touche { display: none; } } /* ---------- Recherche : palette (enfant direct du body) ---------- */ .recherche-palette { position: fixed; inset: 0; z-index: 1080; display: grid; justify-items: center; align-items: start; padding: max(8vh, 4.5rem) 1rem 1rem; } .recherche-palette[hidden] { display: none; } .recherche-palette__voile { position: absolute; inset: 0; background: rgba(6, 11, 26, .42); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); opacity: 0; transition: opacity .18s ease; } .recherche-palette__boite { position: relative; width: min(640px, 100%); max-height: min(72vh, 620px); display: flex; flex-direction: column; overflow: hidden; border-radius: 26px; background: rgba(255, 255, 255, .92); border: 1px solid rgba(255, 255, 255, .8); -webkit-backdrop-filter: blur(26px) saturate(180%); backdrop-filter: blur(26px) saturate(180%); box-shadow: 0 40px 90px -30px rgba(6, 11, 26, .55), inset 0 1px 0 #fff; color: #0B1530; transform: translateY(-10px) scale(.98); opacity: 0; transition: transform .22s var(--ressort, ease), opacity .18s ease; } html[data-theme="sombre"] .recherche-palette__boite { background: rgba(14, 23, 50, .94); border-color: rgba(255, 255, 255, .08); color: #E8ECF8; box-shadow: 0 40px 90px -30px rgba(0, 0, 0, .8), inset 0 1px 0 rgba(255, 255, 255, .06); } .recherche-palette.est-ouverte .recherche-palette__voile { opacity: 1; } .recherche-palette.est-ouverte .recherche-palette__boite { transform: none; opacity: 1; } .recherche-palette__champ { display: flex; align-items: center; gap: .75rem; padding: 1rem 1.1rem; border-bottom: 1px solid rgba(11, 21, 48, .08); } html[data-theme="sombre"] .recherche-palette__champ { border-color: rgba(255, 255, 255, .08); } .recherche-palette__champ > i { color: #1F48D6; font-size: 1.05rem; } html[data-theme="sombre"] .recherche-palette__champ > i { color: #9DB2FF; } .recherche-palette__champ input { flex: 1; min-width: 0; border: 0 !important; outline: 0; background: transparent !important; box-shadow: none !important; font-size: 1.08rem; color: inherit; padding: .2rem 0 !important; } .recherche-palette__champ input::-webkit-search-cancel-button { display: none; } .recherche-palette__fermer { border: 0; background: none; padding: 0; cursor: pointer; } .recherche-palette__fermer kbd { display: inline-block; padding: .2rem .5rem; border-radius: 8px; background: rgba(11, 21, 48, .06); color: #5B6785; font-family: inherit; font-size: .72rem; font-weight: 600; } html[data-theme="sombre"] .recherche-palette__fermer kbd { background: rgba(255, 255, 255, .08); color: #A9B4CF; } .recherche-palette__corps { overflow-y: auto; padding: .4rem .5rem .7rem; overscroll-behavior: contain; } .recherche-palette__etat { margin: 0; padding: 1.4rem 1rem; text-align: center; color: #5B6785; font-size: .92rem; } html[data-theme="sombre"] .recherche-palette__etat { color: #A9B4CF; } .recherche-palette__rubrique { padding: .8rem .7rem .35rem; font-size: .76rem; font-weight: 700; color: #5B6785; display: flex; align-items: center; gap: .45rem; } html[data-theme="sombre"] .recherche-palette__rubrique { color: #8B97B8; } .recherche-palette__resultat { display: flex; align-items: center; gap: .8rem; padding: .6rem .7rem; border-radius: 16px; color: inherit !important; text-decoration: none !important; scroll-margin: .5rem; } .recherche-palette__resultat:hover, .recherche-palette__resultat.est-actif { background: rgba(31, 72, 214, .08); } html[data-theme="sombre"] .recherche-palette__resultat:hover, html[data-theme="sombre"] .recherche-palette__resultat.est-actif { background: rgba(157, 178, 255, .1); } .recherche-palette__icone { display: grid; place-items: center; flex: 0 0 auto; width: 38px; height: 38px; border-radius: 12px; background: rgba(31, 72, 214, .09); color: #1F48D6; font-size: .9rem; } html[data-theme="sombre"] .recherche-palette__icone { background: rgba(157, 178, 255, .12); color: #9DB2FF; } .recherche-palette__texte { display: grid; min-width: 0; flex: 1; } .recherche-palette__texte strong { font-size: .95rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .recherche-palette__texte small { color: #5B6785; font-size: .82rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } html[data-theme="sombre"] .recherche-palette__texte small { color: #A9B4CF; } .recherche-palette__fleche { opacity: 0; color: #1F48D6; font-size: .8rem; transition: opacity .15s ease, transform .2s ease; } .recherche-palette__resultat.est-actif .recherche-palette__fleche { opacity: 1; transform: translateX(2px); } .recherche-palette__squelette { display: flex; align-items: center; gap: .8rem; padding: .6rem .7rem; } .recherche-palette__squelette-texte { display: grid; gap: .45rem; flex: 1; } html.recherche-ouverte { overflow: hidden; } @media (max-width: 640px) { .recherche-palette { padding: .75rem .6rem; } .recherche-palette__boite { max-height: calc(100dvh - 1.5rem); border-radius: 22px; } } /* Page de repli (sans JavaScript) */ .vt-recherche-page { padding-block: 2rem 4rem; max-width: 820px; } .vt-recherche-page__champ { display: flex; align-items: center; gap: .7rem; padding: .5rem .5rem .5rem 1.1rem; border-radius: 22px; background: var(--verre-surface-forte); border: 1px solid var(--verre-liseré); box-shadow: var(--verre-ombre); margin-bottom: 2rem; } .vt-recherche-page__champ input { flex: 1; min-width: 0; border: 0; background: transparent; font-size: 1.05rem; outline: 0; color: inherit; } .vt-recherche-page__rubrique h2 { font-size: 1.15rem; margin: 1.6rem 0 .7rem; display: flex; gap: .5rem; align-items: center; } .vt-recherche-page__rubrique ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; } .vt-recherche-page__rubrique a { display: grid; gap: .15rem; padding: .85rem 1rem; border-radius: 16px; background: var(--verre-surface); border: 1px solid var(--verre-filet); text-decoration: none; color: inherit; } .vt-recherche-page__rubrique a span { color: var(--vt-doux); font-size: .9rem; } /* ---------- Squelettes ---------- */ .squelette { display: block; border-radius: 10px; background: linear-gradient(100deg, rgba(11, 21, 48, .06) 30%, rgba(11, 21, 48, .12) 50%, rgba(11, 21, 48, .06) 70%) 0 0 / 300% 100%; animation: squelette-reflet 1.3s ease-in-out infinite; } html[data-theme="sombre"] .squelette { background-image: linear-gradient(100deg, rgba(255, 255, 255, .05) 30%, rgba(255, 255, 255, .11) 50%, rgba(255, 255, 255, .05) 70%); } .squelette--ligne { height: .85rem; margin-bottom: .55rem; } .squelette--fine { height: .65rem; } .squelette--titre { height: 2.2rem; width: min(70%, 520px); margin-bottom: 1.1rem; border-radius: 14px; } .squelette--rond { width: 38px; height: 38px; border-radius: 12px; flex: 0 0 auto; } .squelette--bloc { height: 130px; margin-bottom: 1rem; border-radius: 18px; } @keyframes squelette-reflet { from { background-position: 100% 0; } to { background-position: 0 0; } } .squelette-cadre { position: relative; } .squelette-cadre::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 0; background: linear-gradient(100deg, rgba(11, 21, 48, .05) 30%, rgba(11, 21, 48, .1) 50%, rgba(11, 21, 48, .05) 70%) 0 0 / 300% 100%; animation: squelette-reflet 1.3s ease-in-out infinite; } .squelette-image { opacity: 0; } .squelette-image.est-chargee { opacity: 1; transition: opacity .35s ease; } .squelette-page { padding: 1rem 0 2rem; } .vt .squelette-page { min-height: 80vh; padding: 0 0 3rem; } /* Site public : un bandeau de nuit, comme l'en-tête des pages, garde le menu lisible. */ .vt .squelette-page__bandeau { padding: calc(var(--vt-entete, 76px) + 3rem) 0 3rem; background: var(--grain), var(--nuit); background-size: var(--nuit-taille); border-radius: 0 0 36px 36px; } .vt .squelette-page__bandeau .squelette { background-image: linear-gradient(100deg, rgba(255, 255, 255, .07) 30%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .07) 70%); } .vt .squelette-page__bandeau-interieur, .vt .squelette-page__grille { width: min(1200px, 100% - 2rem); margin-inline: auto; } .squelette-page__grille { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin-top: 2rem; } .squelette-page__carte { padding: 1rem; border-radius: 22px; background: var(--verre-surface); border: 1px solid var(--verre-filet); } @media (max-width: 760px) { .squelette-page__grille { grid-template-columns: minmax(0, 1fr); } .squelette-page__carte:nth-child(n + 3) { display: none; } } html.navigation-en-cours #contenu-principal > :not(.squelette-page) { display: none !important; } /* Une fine barre de progression signale le départ, même avant le squelette. */ html.navigation-demarree body::before { content: ""; position: fixed; top: 0; left: 0; z-index: 2000; height: 3px; width: 100%; background: linear-gradient(90deg, var(--bleu, #1F48D6), var(--or, #C9A45C)); transform-origin: left; animation: squelette-progression 2.4s cubic-bezier(.1, .7, .2, 1) forwards; } @keyframes squelette-progression { from { transform: scaleX(0); } to { transform: scaleX(.88); } } @media (prefers-reduced-motion: reduce) { .squelette, .squelette-cadre::before { animation: none; } html.navigation-demarree body::before { animation: none; transform: scaleX(.6); } } /* ---------- Premiers pas (espace client) ---------- */ .pp-carte { margin-bottom: 1.25rem; } .pp-carte__tete { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; } .pp-carte__tete p { margin: .25rem 0 0; font-size: .9rem; } .pp-carte__actions { display: flex; align-items: center; gap: .4rem; } .pp-carte__actions form { margin: 0; } .pp-progression { height: 8px; margin: 1rem 0 1.1rem; border-radius: 99px; background: color-mix(in srgb, var(--couleur-texte) 8%, transparent); overflow: hidden; } .pp-progression span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--couleur-primaire), #4C6EF5); transition: width .6s var(--ressort); } .pp-etapes { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; } .pp-etape { display: flex; align-items: center; gap: .9rem; padding: .8rem .9rem; border-radius: 18px; background: var(--verre-surface-forte); border: 1px solid var(--verre-filet); } .pp-etape__icone { display: grid; place-items: center; flex: 0 0 auto; width: 40px; height: 40px; border-radius: 13px; background: color-mix(in srgb, var(--couleur-primaire) 10%, transparent); color: var(--couleur-primaire); } .pp-etape__texte { display: grid; flex: 1; min-width: 0; } .pp-etape__texte small { color: var(--couleur-texte-doux); font-size: .84rem; } .pp-etape.est-faite .pp-etape__icone { background: #1F9D57; color: #fff; } .pp-etape.est-faite .pp-etape__texte strong { text-decoration: line-through; text-decoration-color: color-mix(in srgb, currentColor 40%, transparent); color: var(--couleur-texte-doux); } @media (max-width: 600px) { .pp-carte__tete { flex-direction: column; } .pp-etape { flex-wrap: wrap; row-gap: .6rem; } .pp-etape__texte { flex: 1 1 calc(100% - 40px - .9rem); } .pp-etape .bouton { margin-left: calc(40px + .9rem); } } .pp-accueil { position: fixed; inset: 0; z-index: 1085; display: grid; place-items: center; padding: 1rem; } .pp-accueil[hidden] { display: none; } .pp-accueil__voile { position: absolute; inset: 0; background: rgba(6, 11, 26, .5); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); opacity: 0; transition: opacity .2s ease; } .pp-accueil__boite { position: relative; width: min(460px, 100%); padding: 2rem 1.6rem 1.4rem; border-radius: 30px; text-align: center; background: var(--couleur-surface, #fff); border: 1px solid var(--verre-liseré); box-shadow: 0 40px 90px -30px rgba(6, 11, 26, .6); transform: translateY(14px) scale(.97); opacity: 0; transition: transform .28s var(--ressort), opacity .2s ease; } html[data-theme="sombre"] .pp-accueil__boite { background: #111B38; } .pp-accueil.est-ouverte .pp-accueil__voile { opacity: 1; } .pp-accueil.est-ouverte .pp-accueil__boite { transform: none; opacity: 1; } .pp-accueil__fermer { position: absolute; top: .9rem; right: .9rem; width: 36px; height: 36px; border-radius: 50%; border: 0; background: color-mix(in srgb, var(--couleur-texte) 6%, transparent); color: var(--couleur-texte-doux); cursor: pointer; } .pp-accueil__ecran { display: none; } .pp-accueil__ecran.est-actif { display: block; animation: pp-entree .3s var(--ressort); } @keyframes pp-entree { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } } .pp-accueil__visuel { display: inline-grid; place-items: center; width: 88px; height: 88px; margin-bottom: 1.1rem; border-radius: 28px; background: radial-gradient(circle at 30% 20%, #4C6EF5, #1636A8); color: #fff; font-size: 2.1rem; box-shadow: 0 18px 36px -14px rgba(31, 72, 214, .8), inset 0 1px 0 rgba(255, 255, 255, .35); } .pp-accueil__ecran h2 { font-size: 1.5rem; margin: 0 0 .6rem; } .pp-accueil__ecran p { margin: 0 auto; max-width: 34ch; color: var(--couleur-texte-doux); line-height: 1.6; } .pp-accueil__pied { margin-top: 1.6rem; display: grid; gap: 1.1rem; } .pp-accueil__points { display: flex; justify-content: center; gap: .4rem; } .pp-accueil__points span { width: 8px; height: 8px; border-radius: 99px; background: color-mix(in srgb, var(--couleur-texte) 18%, transparent); transition: width .25s var(--ressort), background-color .2s ease; } .pp-accueil__points span.est-actif { width: 24px; background: var(--couleur-primaire); } .pp-accueil__boutons { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem; } @media (prefers-reduced-motion: reduce) { .pp-accueil__ecran.est-actif { animation: none; } } /* En-tête : la loupe a pris de la place ; entre 1341 et 1500 px, les liens se resserrent. */ @media (min-width: 1341px) and (max-width: 1500px) { .vt-nav__lien { padding-inline: .6rem; } .vt-entete__actions { gap: .45rem; } .vt-entete__cta { padding-inline: .95rem; } } .recherche-palette__champ input:focus, .recherche-palette__champ input:focus-visible { outline: none !important; box-shadow: none !important; border: 0 !important; } /* Page « L'agence » : rangée de logos, en couleur, sans plaque. */ .vt-apropos-logos { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 1.6rem 2.6rem; } .vt-apropos-logos img { height: 46px; width: auto; max-width: 170px; object-fit: contain; } @media (max-width: 600px) { .vt-apropos-logos { gap: 1.2rem 1.8rem; } .vt-apropos-logos img { height: 36px; max-width: 130px; } } /* Page « Donner mon avis » : formulaire large et colonne de conseils. */ .vt-avis-resume { display: grid; gap: .35rem; justify-items: start; padding: 1.4rem 1.5rem; } .vt-avis-resume strong { font-family: var(--vt-titres); font-size: 2.6rem; line-height: 1; } .vt-avis-resume strong small { font-size: 1rem; color: var(--vt-doux); font-weight: 600; } .vt-avis-resume .vt-etoiles { font-size: 1.1rem; } .vt-avis-resume p { margin: .2rem 0 0; color: var(--vt-doux); font-size: .92rem; } .vt-avis-conseils { padding: 1.5rem; border-radius: 26px; color: #E8ECF8; background: var(--grain), var(--nuit); background-size: var(--nuit-taille); box-shadow: 0 24px 50px -24px rgba(11, 21, 48, .6); } .vt .vt-avis-conseils h2 { margin: 0 0 1rem; font-size: 1.25rem; color: #fff; } .vt-avis-conseils ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; } .vt-avis-conseils li { display: flex; gap: .85rem; align-items: flex-start; padding: .8rem .9rem; border-radius: 18px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .08); } .vt-avis-conseils li > span:first-child { display: grid; place-items: center; flex: 0 0 auto; width: 36px; height: 36px; border-radius: 12px; background: rgba(201, 164, 92, .16); color: #E2C383; } .vt-avis-conseils li > span:last-child { display: grid; gap: .15rem; } .vt-avis-conseils small { color: #A9B4CF; font-size: .86rem; line-height: 1.45; } .vt-avis-mention { display: flex; gap: .6rem; align-items: flex-start; margin: 0; padding: 0 .3rem; color: var(--vt-doux); font-size: .86rem; line-height: 1.5; } .vt-avis-mention i { margin-top: .2rem; color: var(--bleu); } /* Avis : flèches du carrousel (mobile), lien « Voir les N avis », page de tous les avis. */ .vt-avis-fleches { display: none; } @media (max-width: 960px) { .vt-avis-fleches { display: flex; justify-content: flex-end; gap: .5rem; margin-top: .6rem; } .vt-avis-fleche { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; cursor: pointer; border: 1px solid var(--verre-liseré); background: var(--verre-surface-forte); color: var(--vt-texte); box-shadow: var(--verre-ombre); transition: opacity .2s ease, transform .2s var(--ressort); } .vt-avis-fleche:active { transform: scale(.92); } .vt-avis-fleche:disabled { opacity: .35; cursor: default; } } .vt-avis-tous { margin: 1.4rem 0 0; text-align: center; } .vt-avis-page { margin-top: clamp(2.5rem, 6vw, 4rem); scroll-margin-top: calc(var(--vt-entete, 76px) + 1.5rem); } .vt .vt-avis-page h2 { display: flex; align-items: center; gap: .6rem; font-size: clamp(1.5rem, 3vw, 2rem); margin-bottom: 1.3rem; } .vt-avis-page h2 span { display: inline-grid; place-items: center; min-width: 2rem; height: 2rem; padding: 0 .55rem; border-radius: 99px; background: color-mix(in srgb, var(--bleu) 12%, transparent); color: var(--bleu); font-size: .95rem; } /* La page « Donner mon avis » garde la grille même sur mobile : la liste se lit de haut en bas. */ @media (max-width: 960px) { .vt-avis--page { display: grid; grid-template-columns: minmax(0, 1fr); overflow: visible; margin-inline: 0; padding-inline: 0; } .vt-avis--page .vt-avis__carte { flex: none; } } @media (min-width: 641px) and (max-width: 960px) { .vt-avis--page { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .vt-avis-pagination { margin-top: 1.6rem; display: flex; justify-content: center; } /* Notifications : la croix de fermeture reste visible et contrastée, même sur mobile. */ .notif-panneau__titre { min-width: 0; } .notif-panneau__lien { white-space: nowrap; } .notif-panneau__fermer { width: 38px; height: 38px; flex: 0 0 auto; background: color-mix(in srgb, var(--couleur-texte) 8%, transparent); color: var(--couleur-texte); font-size: 1.05rem; border: 1px solid color-mix(in srgb, var(--couleur-texte) 10%, transparent); } .notif-panneau__fermer:hover, .notif-panneau__fermer:focus-visible { background: color-mix(in srgb, var(--couleur-texte) 14%, transparent); } @media (max-width: 560px) { .notif-panneau__lien { padding: .45rem .6rem; border-radius: 12px; background: color-mix(in srgb, var(--couleur-primaire) 10%, transparent); } .notif-panneau__lien-texte { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } }