/* * Up'silon v1.4.0 : système graphique de la Maquette v2 (validée le 16 oct. 2026). * Valeurs reprises de refonte-site/maquette-v2-css-reference.md. Couleurs, polices et tailles de base : theme.json. * Les classes des contenus déjà en place (versions 1.0 à 1.3) sont gardées : les pages prennent le nouveau style * sans changement de texte. Seuils : 1000 px (tablette) et 680 px (mobile), comme les planches. */ :root { --u-sarcelle: #2F6C6E; --u-sombre: #1F4B4D; --u-nuit: #163A3C; --u-sable: #E7CBA3; --u-sable-clair: #F4E7D3; --u-creme: #F4F0E8; --u-blanc: #fff; --u-teinte: #E3ECEA; --u-texte: #16302F; --u-attenue: #566866; --u-corps-fonce: #33504E; --u-clair: #BBD0CD; --u-sur-sarcelle: #D5E3E1; --u-trait: #D9D4C9; --u-trait-sombre: #3A6668; --u-or: #A8814A; --u-titre: Montserrat, system-ui, sans-serif; --u-corps: Poppins, system-ui, sans-serif; --u-r8: 8px; --u-r16: 16px; --u-r24: 24px; --u-ombre: 0 18px 40px -28px rgba(31, 75, 77, .45); --u-ombre-puce: 0 14px 30px -20px rgba(31, 75, 77, .5); --u-ombre-ecran: 0 30px 60px -30px rgba(22, 48, 47, .55), 0 0 0 1px rgba(22, 48, 47, .06); --u-ressort: cubic-bezier(.16, 1, .3, 1); --u-marge: 40px; --u-section: 96px; --u-entete: 76px; } @media (max-width: 680px) { :root { --u-marge: 16px; --u-section: 64px; } } /* ===== Base =============================================================== */ *, *::before, *::after { box-sizing: border-box; } body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } h1, h2, h3, h4 { text-wrap: balance; } p { text-wrap: pretty; } img { max-width: 100%; height: auto; } :focus-visible { outline: 2px solid var(--u-sarcelle); outline-offset: 3px; } .wp-site-blocks > *, .contenu > *, .wp-block-post-content > .alignfull, .section { margin-block: 0; } .screen-reader-text { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* « Fin » des titres : même graisse, en sarcelle (v1.4). Le surlignage « sarcelle » des H1 existants aussi. */ .fin, mark.has-sarcelle-color { color: var(--u-sarcelle); font-weight: inherit; background: none !important; } /* Rôles de texte */ .surtitre { margin: 0; font: 600 13px/1.3 var(--u-titre); letter-spacing: .14em; text-transform: uppercase; color: var(--u-sarcelle); } .surtitre--gris { color: var(--u-attenue); } .chapo { font-size: 18px; color: var(--u-attenue); max-width: 60ch; } .attenue { color: var(--u-attenue); max-width: 60ch; } h2.titre-moyen, h3.titre-moyen { font-size: clamp(26px, 2.4vw, 34px); line-height: 1.18; font-weight: 800; letter-spacing: -.02em; } .etiquette-pilule, .etiquette-info { align-self: flex-start; justify-self: start; width: fit-content; margin: 0; font: 600 12px/1.5 var(--u-titre); color: var(--u-sombre); background: var(--u-teinte); padding: 4px 12px; border-radius: 999px; } /* ===== Boutons ============================================================ */ /* * Variables de contexte : sur un fond sarcelle ou sombre (panneau, pack mis en avant, appel final…), les boutons * passent en sable, le contour en blanc et le lien en sable, sans classe à ajouter dans le contenu. */ body :is(.wp-block-button__link, .wp-element-button) { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 50px; padding: 0 26px; border: 0; border-radius: 999px; background: var(--u-btn-fond, var(--u-sombre)); color: var(--u-btn-texte, #fff); font: 600 15px/1.3 var(--u-titre); text-decoration: none; white-space: nowrap; cursor: pointer; transition: transform .25s var(--u-ressort), background-color .2s, color .2s, box-shadow .2s; } body :is(.wp-block-button__link, .wp-element-button):hover, body :is(.wp-block-button__link, .wp-element-button):focus-visible { background: var(--u-btn-fond-survol, var(--u-nuit)); color: var(--u-btn-texte-survol, #fff); transform: translateY(-1px); } body :is(.wp-block-button__link, .wp-element-button):active { transform: translateY(1px) scale(.98); } .wp-block-buttons { gap: 12px 24px; align-items: center; } .wp-block-buttons > .wp-block-button { margin: 0; } /* Secondaire : contour 1,5 px (styles « Contour » et « outline » de WordPress) */ body :is(.is-style-contour, .is-style-outline) .wp-block-button__link { background: transparent; color: var(--u-contour-texte, var(--u-sombre)); box-shadow: inset 0 0 0 1.5px var(--u-contour, var(--u-sombre)); } body :is(.is-style-contour, .is-style-outline) .wp-block-button__link:hover, body :is(.is-style-contour, .is-style-outline) .wp-block-button__link:focus-visible { background: var(--u-contour-fond-survol, var(--u-sombre)); color: var(--u-contour-texte-survol, #fff); box-shadow: inset 0 0 0 1.5px var(--u-contour-survol, var(--u-sombre)); } /* Sable */ body .is-style-secondaire .wp-block-button__link { background: var(--u-sable); color: var(--u-nuit); } body .is-style-secondaire .wp-block-button__link:hover { background: var(--u-sable-clair); color: var(--u-nuit); } /* Lien souligné */ body .is-style-lien .wp-block-button__link { min-height: 0; padding: 0; border-radius: 0; background: transparent; color: var(--u-lien, var(--u-sombre)); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 6px; } body .is-style-lien .wp-block-button__link:hover { background: transparent; color: var(--u-lien-survol, var(--u-sarcelle)); transform: none; } /* Fond sarcelle ou sombre */ .is-style-sombre, .panneau, .pack.is-recommande, .comparatif-carte--abonnement, .contact-carte.is-rdv, .prix-carte, .construis-grille > .construis-carte:first-child, .facon-grille:not(.cartes-simples) > .facon-carte:first-child, .cartes-simples > .facon-carte:first-child, .inclus__item.is-accent, .besoins > .besoin-carte:nth-child(2) { --u-btn-fond: var(--u-sable); --u-btn-texte: var(--u-nuit); --u-btn-fond-survol: var(--u-sable-clair); --u-btn-texte-survol: var(--u-nuit); --u-contour: rgba(255, 255, 255, .55); --u-contour-texte: #fff; --u-contour-fond-survol: transparent; --u-contour-texte-survol: #fff; --u-contour-survol: var(--u-sable); --u-lien: var(--u-sable); --u-lien-survol: #fff; } /* ===== Sections =========================================================== */ .section { padding-block: var(--u-section); } .section.hero { padding-block: 88px var(--u-section); } .section.hero--court { padding-block: 80px 48px; } .section--colle { padding-top: 0; } .section--sans-haut { padding-top: 0; } .section--fine { padding-block: 36px; } .section--video { padding-top: var(--u-section); } /* En-têtes de section : surtitre, H2, sous-titre */ .tete { display: grid; gap: 14px; margin-bottom: 48px; } .tete > * { margin: 0 !important; max-width: 46rem; } .tete > .chapo, .tete > .attenue { max-width: 60ch; } .tete--hero { margin-bottom: 0; gap: 24px; } .tete--lien { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 40px; } .tete--lien > * { margin: 0 !important; } .tete__texte { display: grid; gap: 14px; } .tete__texte > * { margin: 0 !important; max-width: 46rem; } .tete--lien .wp-block-buttons { margin: 0; } /* Lien à droite d'un en-tête de section : bouton secondaire (contour), comme sur les planches */ .tete--lien .is-style-lien .wp-block-button__link { min-height: 50px; padding: 0 26px; border-radius: 999px; text-decoration: none; box-shadow: inset 0 0 0 1.5px var(--u-sombre); } .tete--lien .is-style-lien .wp-block-button__link:hover { background: var(--u-sombre); color: #fff; } .tete--centre { text-align: center; justify-items: center; } .tete--centre > * { margin-inline: auto !important; } /* Colonnes « 4/7 », « 7/5 » */ .wp-block-columns.colonnes-ecartees { justify-content: space-between; gap: 64px; } /* Boutons sous une section (classe « cta-section ») */ .wp-block-buttons.cta-section { margin-top: 40px; justify-content: center; } .suivi__texte .wp-block-buttons.cta-section, .video-texte__texte .wp-block-buttons.cta-section { justify-content: flex-start; margin-top: 12px; } .wp-block-buttons.cta-section--gauche { justify-content: flex-start; margin-top: 44px; } /* ===== En-tête du site (v1.4) ============================================= */ /* * Grille 1fr auto 1fr : logo à gauche, menu centré, bouton « Parler de mon projet » à droite. Collant, crème * translucide flouté, filet bas. Sous 1000 px : logo, bouton, menu replié ; sous 680 px le bouton passe dans le menu ouvert. */ .entete { position: sticky; top: var(--wp-admin--admin-bar--height, 0px); z-index: 30; background: rgba(244, 240, 232, .92); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-bottom: 1px solid var(--u-trait); } header.wp-block-template-part:has(> .entete) { position: sticky; top: var(--wp-admin--admin-bar--height, 0px); z-index: 30; } header.wp-block-template-part > .entete { position: relative; top: 0; } /* Menu ouvert : sans flou, sinon le panneau plein écran resterait enfermé dans la barre (bloc conteneur). */ .entete:has(.is-menu-open) { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--u-creme); } .entete__barre { display: grid !important; grid-template-columns: 1fr auto 1fr; align-items: center; min-height: var(--u-entete); gap: 16px; } .entete__barre > * { margin: 0 !important; } .entete .wp-block-site-logo img { display: block; height: 48px; width: auto; aspect-ratio: 3584 / 2307; } .entete__nav { justify-self: center; } .entete__nav .wp-block-navigation__container { gap: 34px; } .entete__nav .wp-block-navigation-item__content { font: 600 15px/1.3 var(--u-titre); color: var(--u-attenue); text-decoration: none; padding: 6px 0; } .entete__nav .wp-block-navigation-item__content:hover, .entete__nav .wp-block-navigation-item__content[aria-current="page"] { color: var(--u-sombre); } .entete__nav .nav-contact { display: none !important; } .entete__cta { justify-self: end; } .entete__cta .wp-block-button__link, .entete__rdv .wp-block-button__link { min-height: 46px; padding: 0 22px; } /* Menu replié (sous 1000 px) : bouton « Menu », panneau crème plein écran */ .entete__nav .wp-block-navigation__responsive-container-open { width: 46px; height: 46px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--u-sombre); color: var(--u-sombre); align-items: center; justify-content: center; padding: 0; } .entete__nav .wp-block-navigation__responsive-container-close { color: var(--u-sombre); } .entete__nav .wp-block-navigation__responsive-container.is-menu-open { background: var(--u-creme) !important; color: var(--u-texte) !important; padding: 24px var(--u-marge); } .entete__nav .is-menu-open .wp-block-navigation__responsive-container-content { padding-top: 64px; align-items: flex-start !important; } .entete__nav .is-menu-open .wp-block-navigation__container { gap: 22px; align-items: flex-start !important; } .entete__nav .is-menu-open .wp-block-navigation-item { align-items: flex-start !important; } .entete__nav .is-menu-open .wp-block-navigation-item__content { font-size: 20px; color: var(--u-texte); } @media (max-width: 999px) { .entete__barre { grid-template-columns: 1fr auto auto; } .entete__nav { order: 3; justify-self: end; } .entete__cta { order: 2; } .entete__nav .wp-block-navigation__responsive-container-open:not(.always-shown) { display: flex; } .entete__nav .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) { display: none; } } @media (max-width: 680px) { .entete__barre { grid-template-columns: 1fr auto; } .entete__cta { display: none !important; } .entete__nav .is-menu-open .nav-contact { display: flex !important; margin-top: 12px; } .entete__nav .is-menu-open .nav-contact .wp-block-navigation-item__content { min-height: 50px; padding: 0 26px !important; border-radius: 999px; background: var(--u-sombre); color: #fff; font-size: 15px; display: inline-flex; align-items: center; } .entete .wp-block-site-logo img { height: 42px; } } /* En-tête de landing (R38) : logo, téléphone, bouton pilule vers #rdv */ .entete--landing .entete__barre { grid-template-columns: auto 1fr; } .entete__actions { justify-self: end; gap: 8px 24px; align-items: center; } .entete__actions > * { margin: 0 !important; } .entete__tel { font: 600 15px var(--u-titre); white-space: nowrap; } .entete__tel a { color: var(--u-texte); text-decoration: none; } .entete__tel a:hover { color: var(--u-sarcelle); } @media (max-width: 680px) { .entete--landing .entete__actions { gap: 4px 14px; } .entete--landing .entete__rdv .wp-block-button__link { padding: 0 16px; min-height: 42px; font-size: 14px; } .entete--landing .entete__tel { font-size: 14px; } } @media (max-width: 420px) { .entete--landing .entete__tel { display: none; } } /* ===== Hero =============================================================== */ .hero__colonnes { gap: 64px; align-items: center !important; } .hero__colonnes > .wp-block-column { flex-basis: 0 !important; flex-grow: 1 !important; min-width: 0; } .hero__colonnes > .wp-block-column > * { margin-block: 0; } .hero__colonnes > .wp-block-column:first-child { display: grid; gap: 24px; align-content: center; } .hero__colonnes > .wp-block-column:first-child > .wp-block-buttons { margin-top: 4px; } .hero .chapo { max-width: 60ch; } .hero__colonnes .is-style-lien .wp-block-button__link { min-height: 50px; } /* Note Google (bloc upsilon/note-google) */ .note-google a { color: inherit; text-decoration: none; } .note-google a:hover { text-decoration: underline; text-underline-offset: 3px; } .note-google__etoiles { color: var(--u-or); letter-spacing: 2px; margin-right: .3em; } .note-google__etoile--vide { color: var(--u-trait); } .note-google__etoile--demi { background: linear-gradient(90deg, currentColor 50%, var(--u-trait) 50%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .preuves { display: flex; align-items: center; gap: 12px; margin: 0; font: 700 16px/1.3 var(--u-titre); color: var(--u-texte); } .preuves strong { font-size: 18px; } /* Composition du hero (v1.4) : bloc teinte arrondi 24, écrans superposés, téléphone détouré, étiquettes */ .compo, .illustration { position: relative; border-radius: var(--u-r24); background: var(--u-teinte); aspect-ratio: 1 / .92; overflow: hidden; } .compo > *, .illustration > * { margin: 0 !important; } .illustration__image { position: absolute; inset: 0; } .illustration__image img { width: 100%; height: 100%; object-fit: cover; display: block; } .compo .ecran { position: absolute; border-radius: 12px; overflow: hidden; background: #fff; box-shadow: var(--u-ombre-ecran); } .compo .ecran img { display: block; width: 100%; height: auto; } .compo .tel { position: absolute; width: 30%; left: 9%; bottom: 0; z-index: 3; filter: drop-shadow(0 24px 30px rgba(22, 48, 47, .35)); } .compo .tel img { display: block; width: 100%; height: auto; } .compo .e1 { width: 72%; left: 5%; top: 9%; z-index: 1; } .compo .e2 { width: 60%; right: 5%; top: 44%; z-index: 2; } .compo--image > .wp-block-image:not(.ecran):not(.tel) { position: absolute; inset: 0; } .compo--image > .wp-block-image:not(.ecran):not(.tel) img { width: 100%; height: 100%; object-fit: cover; display: block; } /* Étiquettes du hero (« puces ») : carte blanche arrondie 16, sans icône ; une en sarcelle */ .puce { position: absolute; z-index: 4; margin: 0 !important; max-width: 62%; background: #fff; border: 1px solid var(--u-trait); border-radius: var(--u-r16); padding: 10px 16px; box-shadow: var(--u-ombre-puce); font: 400 14px/1.4 var(--u-corps); color: var(--u-attenue); } .puce > p { margin: 0; } .puce strong { display: block; font: 700 15px/1.35 var(--u-titre); color: var(--u-texte); } .puce br { display: none; } .puce__ico { display: none !important; } .puce.puce--on, .illustration:not(.illustration--site):not(.illustration--outils) .puce-2 { background: var(--u-sarcelle); border-color: var(--u-sarcelle); color: var(--u-sur-sarcelle); } .puce.puce--on strong, .illustration:not(.illustration--site):not(.illustration--outils) .puce-2 strong { color: #fff; } .p1, .illustration .puce-1 { top: 4%; right: 5%; left: auto; bottom: auto; } .p2, .illustration .puce-2 { top: 30%; left: 3%; right: auto; bottom: auto; } .p3, .illustration .puce-3 { bottom: 5%; right: 6%; left: auto; top: auto; } /* Sites WordPress : 2 étiquettes (haut droite ; bas gauche en sarcelle) */ .illustration--site .puce-1 { top: 4%; right: 5%; left: auto; bottom: auto; } .illustration--site .puce-2 { bottom: 5%; left: 6%; top: auto; right: auto; background: var(--u-sarcelle); border-color: var(--u-sarcelle); color: var(--u-sur-sarcelle); } .illustration--site .puce-2 strong { color: #fff; } /* Logiciel sur mesure : « Fini les ressaisies » en bas à gauche (en sarcelle), l'autre en haut à gauche */ .illustration--outils .puce-1 { top: 4%; left: 5%; right: auto; bottom: auto; } .illustration--outils .puce-2 { bottom: 6%; left: 6%; top: auto; right: auto; background: var(--u-sarcelle); border-color: var(--u-sarcelle); color: var(--u-sur-sarcelle); } .illustration--outils .puce-2 strong { color: #fff; } @media (prefers-reduced-motion: no-preference) { .compo .e1 { animation: u-entre .9s var(--u-ressort) .1s both; } .compo .e2 { animation: u-entre .9s var(--u-ressort) .25s both; } .compo .tel { animation: u-entre .9s var(--u-ressort) .4s both; } .compo .puce, .illustration .puce { animation: u-entre .7s var(--u-ressort) .6s both; } } @keyframes u-entre { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } } /* Portrait (À propos) et visuel arrondi */ .portrait { margin: 0; border-radius: var(--u-r24); overflow: hidden; background: var(--u-teinte); } .portrait img { display: block; width: 100%; height: auto; } /* ===== Bandeau de réassurance (v1.3.5, restylé) =========================== */ .section.bandeau-preuves { padding-block: 20px; border-block: 1px solid var(--u-trait); } .bandeau-preuves__ligne { gap: 14px 32px; } .bandeau-preuves__ligne > * { margin: 0 !important; } .bandeau-preuves .bandeau-preuves__note { display: flex; align-items: center; gap: 12px; font: 700 16px/1.3 var(--u-titre); color: var(--u-texte); } .bandeau-preuves__note strong { font-size: 22px; } .bandeau-preuves__mentions { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; font-size: 15px; color: var(--u-attenue); } .bandeau-preuves__mentions li { margin: 0; padding: 0 22px; border-left: 1px solid var(--u-trait); } .bandeau-preuves__mentions li:first-child { border-left: 0; padding-left: 0; } /* ===== Services : grille bento (accueil, v1.4) ============================ */ /* * Ordre du contenu existant (.besoins) : Être trouvé (.is-site), S'organiser, Servir, Automatiser. * Placement : S'organiser en grand bloc sarcelle (2 rangées), Servir, Automatiser (sable), Être trouvé en large. */ .besoins-fleche { display: none !important; } /* Absent de la planche validée : voir le journal v1.4.0. */ .besoins { display: grid !important; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr) minmax(0, 1fr); grid-auto-flow: dense; gap: 20px; margin-top: 0 !important; } .besoin-carte { position: relative; margin: 0 !important; display: flex; flex-direction: column; justify-content: space-between; gap: 20px; padding: 32px; border-radius: var(--u-r24); background: #fff; border: 1px solid var(--u-trait); overflow: hidden; transition: transform .3s var(--u-ressort); } .besoin-carte:hover { transform: translateY(-3px); } .besoin-carte > * { margin: 0 !important; } .besoin-carte__verbe { font: 600 14px/1.4 var(--u-titre); color: var(--u-sarcelle); order: -2; } .besoin-carte__probleme { font: 800 24px/1.28 var(--u-titre); color: var(--u-texte); letter-spacing: -.01em; } .besoin-carte__reponse { color: var(--u-attenue); } .besoin-carte__lien { margin-top: auto !important; font: 600 15px/1.4 var(--u-titre); } .besoin-carte__lien a { color: var(--u-lien, var(--u-sombre)); text-decoration: none; } .besoin-carte__lien a::after { content: ""; position: absolute; inset: 0; z-index: 1; } .besoin-carte__visuel { margin: 4px -32px -32px 0 !important; border-radius: var(--u-r16) 0 0 0; overflow: hidden; } .besoin-carte__visuel img { display: block; width: 100%; height: auto; } /* S'organiser et piloter : grand bloc sarcelle avec capture */ .besoins > .besoin-carte:nth-child(3) { grid-column: 2; grid-row: 1; } .besoins > .besoin-carte:nth-child(4) { grid-column: 3; grid-row: 1; } .besoins > .besoin-carte:nth-child(2) { grid-column: 1; grid-row: 1 / span 2; background: var(--u-sarcelle); border-color: var(--u-sarcelle); padding: 36px 36px 0; } .besoins > .besoin-carte:nth-child(2) .besoin-carte__verbe { color: var(--u-sable); } .besoins > .besoin-carte:nth-child(2) .besoin-carte__probleme { color: #fff; font-size: 30px; } .besoins > .besoin-carte:nth-child(2) .besoin-carte__reponse { color: var(--u-sur-sarcelle); } .besoins > .besoin-carte:nth-child(2) .besoin-carte__visuel { margin: 4px -36px 0 0 !important; } .besoins > .besoin-carte:nth-child(2) .besoin-carte__visuel img { width: 140%; max-width: none; } .besoins > .besoin-carte:nth-child(2):not(:has(.besoin-carte__visuel)) { padding-bottom: 36px; } /* Automatiser et relier : sable clair */ .besoins > .besoin-carte:nth-child(4) { background: var(--u-sable-clair); border-color: var(--u-sable-clair); } /* Être trouvé : bloc large, texte à gauche, mobile GDElec à droite */ .besoins > .besoin-carte.is-site { grid-column: 2 / span 2; grid-row: 2; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .9fr); column-gap: 0; padding: 0; } .besoins > .besoin-carte.is-site > :not(.besoin-carte__visuel) { grid-column: 1; padding-inline: 32px; } .besoins > .besoin-carte.is-site > .besoin-carte__verbe { padding-top: 32px; } .besoins > .besoin-carte.is-site > .besoin-carte__lien { padding-bottom: 32px; } .besoins > .besoin-carte.is-site > .besoin-carte__visuel { grid-column: 2; grid-row: 1 / span 4; margin: 0 !important; border-radius: 0; background: var(--u-sable-clair); display: flex; align-items: flex-end; justify-content: center; } .besoins > .besoin-carte.is-site > .besoin-carte__visuel img { width: 100%; height: 100%; object-fit: cover; } .besoins > .besoin-carte.is-site:not(:has(.besoin-carte__visuel)) { grid-template-columns: minmax(0, 1fr); } @media (max-width: 1000px) { .besoins { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .besoins > .besoin-carte:nth-child(2) { grid-column: 1 / span 2; grid-row: 1; } .besoins > .besoin-carte:nth-child(3) { grid-column: 1; grid-row: 2; } .besoins > .besoin-carte:nth-child(4) { grid-column: 2; grid-row: 2; } .besoins > .besoin-carte.is-site { grid-column: 1 / span 2; grid-row: 3; } .besoins > .besoin-carte:nth-child(2) .besoin-carte__visuel img { width: 100%; max-height: 340px; object-fit: cover; object-position: top left; } } @media (max-width: 680px) { .besoins { grid-template-columns: minmax(0, 1fr); } .besoins > .besoin-carte:nth-child(n), .besoins > .besoin-carte.is-site { grid-column: 1; grid-row: auto; } .besoins > .besoin-carte:nth-child(2) { order: -1; } .besoins > .besoin-carte.is-site { order: 1; } .besoins > .besoin-carte.is-site { grid-template-columns: minmax(0, 1fr); } .besoins > .besoin-carte.is-site > .besoin-carte__visuel { grid-column: 1; grid-row: auto; min-height: 220px; } .besoins > .besoin-carte.is-site > .besoin-carte__lien { padding-bottom: 0; } .besoins > .besoin-carte.is-site:has(.besoin-carte__visuel) { padding-bottom: 0; } } /* ===== Packs : 3 packs en lignes (v1.4) ==================================== */ /* * Ligne : nom + phrase | inclus | prix + mise en service | bouton. Décollage (.is-recommande) en sarcelle. * L'étiquette « Recommandé » est retirée au rendu (functions.php). */ .packs { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; gap: 14px; } .pack { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.2fr) 240px 210px; grid-template-areas: "nom liste prix action" "texte liste mes action"; align-items: center; gap: 4px 40px; padding: 28px 32px; margin: 0 !important; border-radius: var(--u-r16); border: 1px solid var(--u-trait); background: var(--u-creme); } .has-creme-background-color .pack, .section:not(.has-background) .pack { background: #fff; } .section.has-blanc-background-color .pack { background: var(--u-creme); } .pack > * { margin: 0 !important; } .pack__drapeau { display: none !important; } h3.pack__nom { grid-area: nom; align-self: end; font: 700 20px/1.3 var(--u-titre); letter-spacing: 0; text-transform: none; } .pack > .attenue { grid-area: texte; align-self: start; font-size: 15px; } .pack > .coches { grid-area: liste; display: grid; gap: 4px; font-size: 15px; } .pack .coches li { padding-left: 24px; } .pack .coches li::before { content: "✓"; position: absolute; left: 0; top: 0; width: auto; height: auto; background: none; color: var(--u-sarcelle); font-weight: 700; } .pack__montant { grid-area: prix; align-self: end; text-align: right; min-width: 190px; font-size: 14px; font-weight: 600; font-family: var(--u-titre); color: var(--u-attenue); font-variant-numeric: tabular-nums; } .pack__montant strong { font: 800 34px/1 var(--u-titre); letter-spacing: -.03em; color: var(--u-texte); } .pack__mise-en-service { grid-area: mes; align-self: start; text-align: right; font-size: 13px; color: var(--u-attenue); padding: 0; border: 0; margin-top: 2px !important; } .pack > .pack__action { grid-area: action; justify-content: flex-end; } .pack.is-recommande { background: var(--u-sarcelle) !important; border-color: var(--u-sarcelle); box-shadow: none; } .pack.is-recommande :is(h3, .pack__montant strong, li) { color: #fff; } .pack.is-recommande :is(.attenue, .pack__montant, .pack__mise-en-service) { color: var(--u-sur-sarcelle); } .pack.is-recommande .coches li::before { color: var(--u-sable); } /* Note sous les packs, lien « Voir le détail des packs » */ .note { margin-top: 24px !important; font-size: 14px; color: var(--u-attenue); } .packs + .note + .wp-block-buttons { margin-top: 12px !important; } @media (max-width: 1000px) { .pack { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "nom prix" "texte mes" "liste liste" "action action"; row-gap: 6px; } .pack > .coches { margin-top: 12px !important; } .pack__montant, .pack__mise-en-service { text-align: left; min-width: 0; } .pack > .pack__action { margin-top: 14px !important; justify-content: flex-start; } } @media (max-width: 680px) { .pack { grid-template-columns: minmax(0, 1fr); grid-template-areas: "nom" "texte" "prix" "mes" "liste" "action"; padding: 22px; } .pack__montant { margin-top: 12px !important; } } /* Liste à coches (générique) */ .villes, .pastilles, .technos__liste, .pied__liens, .coches { list-style: none; margin-inline: 0; margin-bottom: 0; padding: 0; } .coches { display: grid; gap: 8px; font-size: 15px; } .coches li { position: relative; padding-left: 26px; } .coches li::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--u-sarcelle); font-weight: 700; } /* ===== Cartes réalisation ================================================= */ .wp-block-post-template.grille-real { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; } .wp-block-post-template.grille-real > li { margin: 0; } .realisations-une .wp-block-post-template.grille-real, .reals--2 .wp-block-post-template.grille-real, .realisations-liees .wp-block-post-template.grille-real { grid-template-columns: repeat(2, minmax(0, 1fr)); } @media (max-width: 1000px) { .wp-block-post-template.grille-real { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 680px) { .wp-block-post-template.grille-real, .realisations-une .wp-block-post-template.grille-real, .reals--2 .wp-block-post-template.grille-real, .realisations-liees .wp-block-post-template.grille-real { grid-template-columns: minmax(0, 1fr); } } .carte-real { position: relative; height: 100%; display: flex; flex-direction: column; margin: 0; background: #fff; border: 1px solid var(--u-trait); border-radius: var(--u-r16); overflow: hidden; transition: transform .3s var(--u-ressort); } .carte-real:hover { transform: translateY(-3px); } .carte-real > * { margin: 0 !important; } .carte-real__visuel { aspect-ratio: 16 / 10; background: #fff; border-bottom: 1px solid var(--u-trait); overflow: hidden; } .carte-real__visuel img { width: 100%; height: 100%; object-fit: cover; object-position: top left; display: block; transition: transform .5s var(--u-ressort); } .carte-real:hover .carte-real__visuel img { transform: scale(1.03); } .carte-real__corps { padding: 24px 28px 28px; display: flex; flex-direction: column; gap: 8px; flex: 1; } .carte-real__corps > * { margin: 0 !important; } .carte-real__corps > .upsilon-etiquettes { margin-bottom: 4px !important; } .carte-real__titre { font: 700 20px/1.3 var(--u-titre); } .carte-real__titre a { color: var(--u-texte); text-decoration: none; } .carte-real__titre a::after { content: ""; position: absolute; inset: 0; z-index: 1; } .carte-real__accroche, .carte-real__accroche p { font-size: 15px; color: var(--u-attenue); margin: 0; max-width: 52ch; } .upsilon-activite { margin: 0; font-size: 14px; line-height: 1.5; color: var(--u-attenue); } .upsilon-etiquettes { display: flex; flex-wrap: wrap; gap: 6px; } .etiquette { font: 600 12px/1.5 var(--u-titre); color: var(--u-sombre); background: var(--u-teinte); padding: 4px 12px; border-radius: 999px; border: 0; letter-spacing: 0; text-transform: none; } .carte-real .etiquette--type_realisation { display: none; } /* Les cartes n'affichent que le livrable. */ /* Une boucle sans fiche ne laisse pas de section orpheline */ .section:has(.realisations-une, .realisations-type, .realisations-liees):not(:has(.carte-real)) { display: none; } .boucle-vide { color: var(--u-attenue); } /* Filtres : pilules, avec compteurs sur l'archive */ .upsilon-filtres ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; } .upsilon-filtres li { margin: 0; } .upsilon-filtres a { display: inline-flex; align-items: center; gap: 8px; padding: 9px 18px; border-radius: 999px; border: 1px solid var(--u-trait); background: #fff; color: var(--u-texte); font: 600 14px/1.3 var(--u-titre); text-decoration: none; transition: background-color .2s, border-color .2s; } .upsilon-filtres a:hover { border-color: var(--u-sombre); } .upsilon-filtres a[aria-current="page"] { background: var(--u-sombre); border-color: var(--u-sombre); color: #fff; } .upsilon-filtres__nb { font-weight: 500; color: var(--u-attenue); } .upsilon-filtres a[aria-current="page"] .upsilon-filtres__nb { color: var(--u-clair); } .tete--hero .upsilon-filtres { margin-top: 8px !important; } .wp-block-term-description.chapo p { margin: 0; } /* ===== Étapes : frise numérotée (v1.4) ===================================== */ .etapes { position: relative; display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; counter-reset: etape; } .etapes::before { content: ""; position: absolute; top: 27px; left: 28px; right: 28px; height: 1px; background: var(--u-trait); } .etape { counter-increment: etape; position: relative; display: grid; gap: 12px; align-content: start; margin: 0 !important; color: var(--u-attenue); font-size: 15px; } .etape::before { content: counter(etape); width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: var(--u-fond-section, var(--u-creme)); box-shadow: inset 0 0 0 1.5px var(--u-sarcelle); font: 800 18px/1 var(--u-titre); color: var(--u-sarcelle); } .etape:first-child::before { background: var(--u-sarcelle); color: #fff; box-shadow: none; } .etape > * { margin: 0 !important; } .etape h3 { font: 700 20px/1.3 var(--u-titre); color: var(--u-texte); } .etape p { color: var(--u-attenue); font-size: 15px; } .has-blanc-background-color { --u-fond-section: #fff; } .etapes--trois { grid-template-columns: repeat(3, minmax(0, 1fr)); } .etapes--cinq { grid-template-columns: repeat(5, minmax(0, 1fr)); } .etapes--cinq .etape, .etapes--trois .etape { background: none; padding: 0; border: 0; } @media (max-width: 1000px) { .etapes:not(.etapes--defis) { grid-template-columns: repeat(2, minmax(0, 1fr)); } .etapes:not(.etapes--defis)::before { display: none; } .etapes--cinq { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 680px) { .etapes:not(.etapes--defis), .etapes--cinq, .etapes--trois { grid-template-columns: minmax(0, 1fr); } .etapes:not(.etapes--defis)::before { display: block; top: 28px; bottom: 28px; left: 27px; right: auto; width: 1px; height: auto; } .etapes:not(.etapes--defis) .etape { grid-template-columns: 56px minmax(0, 1fr); column-gap: 18px; } .etapes:not(.etapes--defis) .etape::before { grid-row: span 3; } .etapes:not(.etapes--defis) .etape > * { grid-column: 2; } } /* ===== Avis =============================================================== */ /* Cartes d'avis (Sites, landing, contenus existants) : blanches, ombre douce, initiales en pastille */ .avis-grille { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } .avis { display: flex; flex-direction: column; gap: 14px; margin: 0 !important; background: #fff; border-radius: var(--u-r16); padding: 28px; box-shadow: var(--u-ombre); } .avis > * { margin: 0 !important; } .avis__etoiles { color: var(--u-sarcelle); letter-spacing: 2px; } .avis__citation { margin: 0; padding: 0; border: 0; display: flex; flex-direction: column; gap: 14px; flex: 1; } .avis__citation p { margin: 0; flex: 1; font: 400 17px/1.6 var(--u-corps); color: var(--u-texte); } .avis__citation cite, .avis-carte cite { margin-top: auto; display: flex; align-items: center; gap: 12px; font: 600 15px/1.3 var(--u-titre); font-style: normal; color: var(--u-texte); } .avis__initiales { width: 40px; height: 40px; flex: none; border-radius: 50%; background: var(--u-teinte); color: var(--u-sombre); display: grid; place-items: center; font: 600 14px/1 var(--u-titre); } .avis__qui { display: grid; gap: 2px; } .avis__source { font: 400 13px/1.3 var(--u-corps); color: var(--u-attenue); } @media (max-width: 1000px) { .avis-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 680px) { .avis-grille { grid-template-columns: minmax(0, 1fr); } } /* Section d'avis de l'accueil et de Sites WordPress (v1.4) : sable clair, 5,0 en grand, 2 colonnes décalées */ .section.avis-sec, .section:has(> .avis-grille) { background-color: var(--u-sable-clair) !important; } .avis-sec__grille { display: grid !important; grid-template-columns: minmax(0, .85fr) minmax(0, 1fr) minmax(0, 1fr); gap: 24px; align-items: start; } .avis-sec__grille > * { margin: 0 !important; } .avis-score { display: grid; gap: 12px; } .avis-score > * { margin: 0 !important; } .avis-score__note { display: grid; gap: 12px; } .avis-score__note p { margin: 0; } .avis-score .note-google__etoiles, .avis-score__etoiles { color: var(--u-or); font-size: 20px; letter-spacing: 2px; } .avis-score__valeur { font: 800 88px/1 var(--u-titre); letter-spacing: -.04em; color: var(--u-sarcelle); } .avis-score h2 { font-size: 30px; } .avis-colonne { display: grid; gap: 24px; } .avis-colonne > * { margin: 0 !important; } .avis-colonne--bas { margin-top: 64px !important; } .avis-carte { margin: 0; padding: 28px; border-radius: var(--u-r16); background: #fff; display: grid; gap: 16px; box-shadow: var(--u-ombre); } .avis-carte > * { margin: 0 !important; } .avis-carte p { font-size: 16px; line-height: 1.6; } @media (max-width: 1000px) { .avis-sec__grille { grid-template-columns: minmax(0, 1fr); } .avis-colonne--bas { margin-top: 0 !important; } } /* ===== Cartes de contenu ================================================== */ /* Inclus (Sites WordPress) : 8 cartes en 4 colonnes, sans icône ; une carte sarcelle (.is-accent) */ .inclus { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px !important; background: none; border: 0; } .inclus__item { margin: 0 !important; display: grid; gap: 8px; align-content: start; padding: 26px; background: #fff; border: 1px solid var(--u-trait); border-radius: var(--u-r16); } .has-blanc-background-color .inclus__item { background: var(--u-creme); } .inclus__item > * { margin: 0 !important; } .inclus__ico, .local__ico, .exemple__ico { display: none !important; } .inclus__item p { font-size: 15px; color: var(--u-attenue); line-height: 1.6; } .inclus__item strong { display: block; margin-bottom: 8px; font: 700 18px/1.3 var(--u-titre); color: var(--u-texte); } .inclus__item br, .signe br { display: none; } .inclus:not(.inclus--fonctions) > .inclus__item.is-accent { background: var(--u-sarcelle); border-color: var(--u-sarcelle); } .inclus:not(.inclus--fonctions) > .inclus__item.is-accent p { color: var(--u-sur-sarcelle); } .inclus:not(.inclus--fonctions) > .inclus__item.is-accent strong { color: #fff; } @media (max-width: 1000px) { .inclus { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 680px) { .inclus { grid-template-columns: minmax(0, 1fr); } } /* Signes (Logiciel) : 4 cartes crème */ .signes { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; } .signe { margin: 0 !important; display: grid; gap: 8px; align-content: start; padding: 24px; background: var(--u-creme); border: 1px solid var(--u-trait); border-radius: var(--u-r16); } .signe::before { display: none; } .signe > p { margin: 0; font-size: 15px; color: var(--u-attenue); } .signe strong { display: block; margin-bottom: 8px; font: 700 17px/1.3 var(--u-titre); color: var(--u-texte); } /* Ce que je construis : 3 cartes, la première en sarcelle */ .construis-grille { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } .construis-carte { margin: 0 !important; display: grid; gap: 10px; align-content: start; padding: 28px; background: #fff; border: 1px solid var(--u-trait); border-radius: var(--u-r16); scroll-margin-top: calc(var(--wp-admin--admin-bar--height, 0px) + var(--u-entete) + 24px); } .construis-carte > * { margin: 0 !important; } .construis-carte__etiquette { font: 600 14px/1.4 var(--u-titre); color: var(--u-sarcelle); letter-spacing: 0; text-transform: none; } .construis-carte h3 { font: 700 20px/1.3 var(--u-titre); } .construis-carte p:last-child { color: var(--u-attenue); font-size: 15px; } .construis-grille > .construis-carte:first-child { background: var(--u-sarcelle); border-color: var(--u-sarcelle); } .construis-grille > .construis-carte:first-child .construis-carte__etiquette { color: var(--u-sable); } .construis-grille > .construis-carte:first-child h3 { color: #fff; } .construis-grille > .construis-carte:first-child p:last-child { color: var(--u-sur-sarcelle); } /* Ma façon de travailler (À propos) : 4 cartes en 2 × 2, la première en sarcelle */ .facon-grille { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; } .facon-carte { margin: 0 !important; display: grid; gap: 10px; align-content: start; padding: 28px; background: #fff; border: 1px solid var(--u-trait); border-radius: var(--u-r16); } .has-blanc-background-color .facon-carte { background: var(--u-creme); } .facon-carte > * { margin: 0 !important; } .facon-carte h3 { font: 700 20px/1.3 var(--u-titre); } .facon-carte p { font-size: 15px; color: var(--u-attenue); } .facon-grille:not(.cartes-simples) > .facon-carte:first-child, .cartes-simples > .facon-carte:first-child { background: var(--u-sarcelle); border-color: var(--u-sarcelle); } .facon-grille > .facon-carte:first-child h3 { color: #fff; } .facon-grille > .facon-carte:first-child p { color: var(--u-sur-sarcelle); } /* Cartes simples (landing) : 3 colonnes */ .facon-grille.cartes-simples { grid-template-columns: repeat(3, minmax(0, 1fr)); } .cartes-simples > .facon-carte:not(:first-child) { background: #fff; } .facon-grille.cartes-simples:has(> :nth-child(4)) > .facon-carte:first-child { background: #fff; border-color: var(--u-trait); } .facon-grille.cartes-simples:has(> :nth-child(4)) > .facon-carte:first-child h3 { color: var(--u-texte); } .facon-grille.cartes-simples:has(> :nth-child(4)) > .facon-carte:first-child p { color: var(--u-attenue); } @media (max-width: 1000px) { .construis-grille, .facon-grille.cartes-simples { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 680px) { .signes, .construis-grille, .facon-grille, .facon-grille.cartes-simples { grid-template-columns: minmax(0, 1fr); } } /* Parcours (À propos) : 2 cartes crème ; points de la fiche : 3 colonnes séparées par un filet */ .parcours-duo { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; } .parcours-bloc { margin: 0 !important; display: grid; gap: 10px; align-content: start; padding: 28px; background: var(--u-creme); border-radius: var(--u-r16); border: 0; } .section:not(.has-blanc-background-color) .parcours-bloc { background: #fff; border: 1px solid var(--u-trait); } .parcours-bloc > * { margin: 0 !important; } .parcours-bloc h3 { font: 700 20px/1.3 var(--u-titre); } .parcours-bloc p { font-size: 15px; } .parcours-duo--points { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; padding-top: 40px; border-top: 1px solid var(--u-trait); } .parcours-duo--points .parcours-bloc, .section:not(.has-blanc-background-color) .parcours-duo--points .parcours-bloc { padding: 0; background: none; border: 0; gap: 8px; } .parcours-duo--points .parcours-bloc h3 { font-size: 17px; } @media (max-width: 1000px) { .parcours-duo--points { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 680px) { .parcours-duo { grid-template-columns: minmax(0, 1fr); } } /* Création ou refonte (Sites WordPress) : 2 grandes cartes, étapes numérotées séparées par un filet */ .parcours-grille { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; } .parcours { margin: 0 !important; display: grid; gap: 12px; align-content: start; padding: 36px; background: #fff; border: 1px solid var(--u-trait); border-radius: var(--u-r24); } .has-blanc-background-color .parcours { background: var(--u-creme); } .parcours > * { margin: 0 !important; } .parcours__badge { font: 600 14px/1.4 var(--u-titre); color: var(--u-sarcelle); background: none; padding: 0; letter-spacing: 0; text-transform: none; } .parcours h3 { font: 700 24px/1.3 var(--u-titre); } .parcours > .attenue { color: var(--u-attenue); } .parcours__etapes { list-style: none; margin: 12px 0 0 !important; padding: 0; display: grid; gap: 0; counter-reset: parcours; } .parcours__etapes li { counter-increment: parcours; position: relative; padding: 16px 0 16px 52px; border-top: 1px solid var(--u-trait); font-size: 15px; color: var(--u-attenue); } .parcours__etapes li::before { content: counter(parcours); position: absolute; left: 0; top: 16px; width: 34px; height: 34px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--u-sarcelle); display: grid; place-items: center; font: 800 14px/1 var(--u-titre); color: var(--u-sarcelle); } .parcours__etapes li strong { display: block; font: 700 16px/1.4 var(--u-titre); color: var(--u-texte); } .parcours__etapes br { display: none; } @media (max-width: 1000px) { .parcours-grille { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 680px) { .parcours { padding: 26px; } } /* Cartes-liens (À propos : Boost et Collectif) */ .liens-externes { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; } .lien-carte { position: relative; margin: 0 !important; display: grid; gap: 10px; align-content: start; padding: 28px; border-radius: var(--u-r16); background: #fff; border: 1px solid var(--u-trait); transition: transform .3s var(--u-ressort); } .lien-carte:hover { transform: translateY(-3px); } .lien-carte > * { margin: 0 !important; } .lien-carte h3 { font: 700 20px/1.3 var(--u-titre); } .lien-carte p { font-size: 15px; } .lien-carte__lien { margin-top: 8px !important; } .lien-carte__lien a { color: var(--u-sombre); font: 600 15px var(--u-titre); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 6px; } .lien-carte__lien a::after { content: ""; position: absolute; inset: 0; } @media (max-width: 680px) { .liens-externes { grid-template-columns: minmax(0, 1fr); } } /* ===== Panneau sarcelle (v1.4) ============================================= */ /* * Remplace les sections sombres intermédiaires (Le Cadrage, Votre site peut faire plus, Résultats) : * fond sarcelle, arrondi 24, posé sur une section blanche ou crème. Une section « Fond sombre » qui n'est pas * l'appel final est transformée au rendu (functions.php) : son contenu passe dans un groupe .panneau. */ .panneau { background: var(--u-sarcelle); color: var(--u-sur-sarcelle); border-radius: var(--u-r24); padding: 56px; } .panneau > * { margin-block: 0; } .panneau > * + * { margin-top: 24px; } .panneau :is(h2, h3) { color: #fff; } .panneau .surtitre { color: var(--u-sable); } .panneau .fin, .panneau mark.has-sarcelle-color { color: var(--u-sable); } .panneau :is(p, .attenue, .chapo) { color: var(--u-sur-sarcelle); } .panneau a:not(.wp-block-button__link) { color: var(--u-sable); } .panneau .tete { margin-bottom: 40px; } .panneau .wp-block-columns { gap: 48px; align-items: center !important; margin: 0; } .panneau .wp-block-column > * { margin-block: 0; } .panneau .wp-block-column > * + * { margin-top: 16px; } .panneau .wp-block-column > .wp-block-buttons { margin-top: 24px; } /* Liste à cocher dans une carte blanche arrondie 16 */ .panneau .coches { padding: 28px; gap: 12px; background: #fff; border-radius: var(--u-r16); font-size: 16px; } .panneau .coches li { color: var(--u-texte); font-weight: 500; padding-left: 28px; } .panneau .coches li strong { color: var(--u-texte); } .panneau .coches li::before { color: var(--u-sarcelle); } .cadrage, .resultats { background: none; padding: 0; border-radius: 0; } /* Résultats : chiffres gardés dans le panneau */ .panneau .chiffre { background: rgba(255, 255, 255, .1); border: 0; } .panneau .chiffre__valeur { color: #fff; } .panneau :is(.chiffre__libelle, .chiffres__source) { color: var(--u-sur-sarcelle); } /* Votre site peut faire plus : 3 cartes blanches à image 4:3 */ .plus-grille { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } .plus-carte { position: relative; margin: 0 !important; background: #fff; color: var(--u-texte); border-radius: var(--u-r16); overflow: hidden; display: flex; flex-direction: column; gap: 8px; padding: 0 0 26px; } .plus-carte > * { margin: 0 !important; padding-inline: 24px; } .plus-carte > .wp-block-image, .plus-carte > .mini { padding: 0; margin-bottom: 14px !important; } .plus-carte .wp-block-image img, .plus-carte__visuel img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: var(--u-sable-clair); } .panneau .plus-carte h3 { font: 700 18px/1.3 var(--u-titre); color: var(--u-texte); } .panneau .plus-carte p { font-size: 15px; color: var(--u-attenue); } .panneau .plus-carte p:last-child a { color: var(--u-sombre); font: 600 14px var(--u-titre); text-decoration: none; } .panneau .plus-carte p:last-child a::after { content: ""; position: absolute; inset: 0; } .mini { box-sizing: border-box; background: var(--u-creme); aspect-ratio: 4 / 3; display: flex; flex-direction: column; justify-content: center; gap: 8px; padding: 12px; } .mini--prix span { display: flex; justify-content: space-between; background: #fff; border-radius: 6px; padding: 7px 10px; font: 600 11px/1.2 var(--u-titre); color: var(--u-attenue); } .mini--prix span.on { outline: 2px solid var(--u-sarcelle); color: var(--u-texte); } .mini--barres { flex-direction: row; align-items: flex-end; gap: 8%; padding: 18% 8% 0; } .mini--barres i { flex: 1; background: var(--u-teinte); border-radius: 4px 4px 0 0; } .mini--barres i:nth-child(even) { background: var(--u-sarcelle); } .mini--relie { flex-direction: row; align-items: center; justify-content: center; } .mini--relie span { font: 700 10px/1.2 var(--u-titre); text-align: center; background: #fff; border-radius: 8px; padding: 12px 8px; color: var(--u-texte); } .mini--relie i { flex: 1; max-width: 56px; height: 2px; background: repeating-linear-gradient(90deg, var(--u-sarcelle) 0 6px, transparent 6px 10px); } @media (max-width: 1000px) { .panneau .wp-block-columns { flex-wrap: wrap !important; } .panneau .wp-block-column { flex-basis: 100% !important; } .plus-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 680px) { .panneau { padding: 28px 20px; } .plus-grille { grid-template-columns: minmax(0, 1fr); } } /* ===== Maintenance seule (Sites WordPress) ================================= */ .maintenance { gap: 48px !important; align-items: flex-start !important; } .maintenance__texte { flex: 1.3 1 0 !important; } .maintenance__inclus { flex: 1 1 0 !important; } .maintenance__texte > * { margin-block: 0; } .maintenance__texte > * + * { margin-top: 14px; } .maintenance__texte > .etapes { margin-top: 48px; } .maintenance__texte > .maintenance__note { margin-top: 36px; } .maintenance__note a { color: var(--u-sombre); font: 600 15px var(--u-titre); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 6px; } .maintenance__carte { background: var(--u-creme); border: 1px solid var(--u-trait); border-radius: var(--u-r16); padding: 32px; display: grid; gap: 16px; justify-items: start; } .section:not(.has-blanc-background-color) .maintenance__carte { background: #fff; } .maintenance__carte > * { margin: 0 !important; } .maintenance__carte > .surtitre { font: 700 20px/1.3 var(--u-titre); letter-spacing: 0; text-transform: none; color: var(--u-texte); } .maintenance__tarif { width: 100%; border-top: 1px solid var(--u-trait); padding-top: 16px; display: grid; gap: 16px; justify-items: start; } .maintenance__tarif > * { margin: 0 !important; } .maintenance__tarif .attenue { font: 700 16px/1.4 var(--u-titre); color: var(--u-texte); } @media (max-width: 1000px) { .maintenance__texte, .maintenance__inclus { flex-basis: 100% !important; } .maintenance { flex-wrap: wrap !important; } } /* ===== Site livré ou abonnement (Sites WordPress) ========================== */ .comparatif-cartes { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; align-items: stretch; } .comparatif-carte { margin: 0 !important; border-radius: var(--u-r24); padding: 36px; display: grid; gap: 12px; align-content: start; justify-items: start; background: #fff; border: 1px solid var(--u-trait); } .comparatif-carte > * { margin: 0 !important; } .comparatif-carte > h3 { font: 700 24px/1.3 var(--u-titre); } .comparatif-carte__etiquette { font: 600 12px/1.5 var(--u-titre); background: var(--u-creme); color: var(--u-attenue); padding: 4px 12px; border-radius: 999px; letter-spacing: 0; text-transform: none; box-shadow: none; } .comparatif-carte__texte { color: var(--u-attenue); } .comparatif-carte .coches, .comparatif-carte .neutres { width: 100%; margin-top: 8px !important; padding-top: 18px; border-top: 1px solid var(--u-trait); gap: 12px; font-size: 15px; } .comparatif-carte li { color: var(--u-attenue); } .comparatif-carte li strong { color: var(--u-texte); font-family: var(--u-titre); } .neutres { list-style: none; margin: 0; padding: 0; display: grid; } .neutres li { position: relative; padding-left: 26px; } .neutres li::before { content: "–"; position: absolute; left: 0; top: 0; color: var(--u-or); font-weight: 700; } .comparatif-carte--abonnement { background: var(--u-sarcelle) !important; border-color: var(--u-sarcelle); color: var(--u-sur-sarcelle); } .comparatif-carte--abonnement h3 { color: #fff; } .comparatif-carte--abonnement .comparatif-carte__etiquette { background: var(--u-sable); color: var(--u-nuit); } .comparatif-carte--abonnement .comparatif-carte__texte, .comparatif-carte--abonnement li { color: var(--u-sur-sarcelle); } .comparatif-carte--abonnement li strong { color: #fff; } .comparatif-carte--abonnement .coches { border-top-color: rgba(255, 255, 255, .2); } .comparatif-carte--abonnement .coches li::before { color: var(--u-sable); } .comparatif-carte .pack__action { margin-top: 8px !important; } @media (max-width: 1000px) { .comparatif-cartes { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 680px) { .comparatif-carte { padding: 26px; } } /* Comparatif en tableau (ancienne composition) */ .comparatif { overflow-x: auto; margin: 0; } .comparatif table { min-width: 560px; border-collapse: separate; border-spacing: 0; font-size: 15px; } .comparatif th, .comparatif td { padding: 1rem; text-align: left; vertical-align: top; border: 0; border-bottom: 1px solid var(--u-trait); } .comparatif thead th { font: 700 15px var(--u-titre); } .comparatif td:first-child { font: 600 15px var(--u-titre); color: var(--u-attenue); width: 30%; } .comparatif th:last-child, .comparatif td:last-child { background: var(--u-teinte); } .comparatif thead th:last-child { background: var(--u-sarcelle); color: #fff; border-radius: var(--u-r16) var(--u-r16) 0 0; } /* ===== Note Google en bandeau : sable clair (v1.4) ========================= */ /* * À propos : bandeau seul (sable clair, 56 px). Landing : note puis avis dans la même section d'accent. * Le style « Fond sombre » du bandeau est retiré au rendu (functions.php). */ .section:has(> .note-bandeau) { background: var(--u-sable-clair) !important; padding-block: 56px; } .section:has(> .note-bandeau) + .section:has(> .avis-grille) { background-color: var(--u-sable-clair) !important; padding-top: 0; } .section:has(> .note-bandeau) + .section:has(> .avis-grille) .avis-grille { margin-top: 0; } .note-bandeau { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; background: none; padding: 0; border-radius: 0; color: var(--u-texte); } .note-bandeau > * { margin: 0 !important; } .note-bandeau__note { display: flex; align-items: center; gap: 20px; } .note-bandeau__valeur { font: 800 56px/1 var(--u-titre); color: var(--u-sombre); font-variant-numeric: tabular-nums; } .note-bandeau__texte { display: flex; flex-direction: column; gap: 4px; } .note-bandeau .note-google__etoiles { color: var(--u-sarcelle); font-size: 20px; line-height: 1.2; letter-spacing: 2px; margin: 0; } .note-bandeau .note-google__etoile--vide { color: var(--u-trait); } .note-bandeau__libelle { font: 600 16px/1.4 var(--u-titre); color: var(--u-texte); } .section:has(> .note-bandeau) + .section:has(> .avis-grille) { padding-bottom: var(--u-section); } @media (max-width: 680px) { .note-bandeau__valeur { font-size: 44px; } } /* ===== Frise de logos : défilement continu, bords en fondu ================= */ .section--frise { padding-block: 72px; } .section--frise:not(:has(img)) { display: none; } .frise-logos__titre { text-align: center; margin-bottom: 32px !important; color: var(--u-attenue); } .frise-logos { --frise-h: 52px; --frise-espace: 28px; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); } .frise-logos__piste { display: flex; align-items: center; width: max-content; animation: frise-logos var(--frise-duree, 45s) linear infinite; } .frise-logos > .frise-logos__piste { margin: 0 !important; } .frise-logos:hover .frise-logos__piste, .frise-logos:focus-within .frise-logos__piste { animation-play-state: paused; } .frise-logos__piste > .frise-logos__logo { flex: none; margin: 0 !important; padding: 0 var(--frise-espace); height: var(--frise-h); display: flex; align-items: center; } .frise-logos__logo img { height: var(--frise-h); width: auto; max-width: calc(var(--frise-h) * 3.2); object-fit: contain; filter: grayscale(1); opacity: .7; mix-blend-mode: multiply; transition: filter .2s, opacity .2s; } .frise-logos__logo img:hover { filter: none; opacity: 1; } @keyframes frise-logos { from { transform: translateX(0); } to { transform: translateX(-50%); } } @media (max-width: 680px) { .section--frise { padding-block: 56px; } .frise-logos { --frise-h: 44px; --frise-espace: 20px; } } @media (prefers-reduced-motion: reduce) { .frise-logos { -webkit-mask-image: none; mask-image: none; } .frise-logos__piste { animation: none; width: auto; flex-wrap: wrap; justify-content: center; row-gap: 1.5rem; } .frise-logos__copie { display: none !important; } } .editor-styles-wrapper .frise-logos { -webkit-mask-image: none; mask-image: none; } .editor-styles-wrapper .frise-logos__piste { animation: none; width: auto; flex-wrap: wrap; justify-content: center; row-gap: 1.5rem; } /* ===== Vidéo ============================================================== */ .video-explicative { max-width: 960px; margin-inline: auto; } .video-explicative video { display: block; width: 100%; aspect-ratio: 16 / 9; border-radius: var(--u-r24); background: var(--u-sombre); } .video-explicative figcaption { text-align: center; font-size: 14px; color: var(--u-attenue); } .video-texte__colonnes { gap: 64px !important; align-items: center !important; } .video-texte__colonnes > .video-texte__texte { flex: .9 1 0 !important; } .video-texte__colonnes > .video-texte__media { flex: 1.1 1 0 !important; } .video-texte__texte { display: grid; gap: 14px; } .video-texte__texte > * { margin: 0 !important; } .video-texte .video-explicative { max-width: none; margin: 0; } .video-texte .video-explicative figcaption { text-align: left; } /* ===== Landing Pack Création =============================================== */ /* Lignes libellé / valeur (tableaux) */ .wp-block-table.lignes { margin: 0; } .wp-block-table.lignes table { border-collapse: collapse; table-layout: auto; width: 100%; } .wp-block-table.lignes td { border: 0; border-top: 1px solid var(--u-trait); padding: 14px 0; color: var(--u-attenue); vertical-align: baseline; } .wp-block-table.lignes td:last-child { text-align: right; font: 700 18px/1.4 var(--u-titre); color: var(--u-sombre); padding-left: 1rem; white-space: nowrap; } /* Hero : texte + carte prix sarcelle */ .hero-pack > .hero-pack__texte { flex: 1.2 1 0 !important; } .hero-pack > .hero-pack__carte { flex: 1 1 0 !important; } .hero-pack__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; margin-top: 4px; } .hero-pack__actions > * { margin: 0 !important; } .hero-pack__actions .note-google { font: 600 15px var(--u-titre); color: var(--u-sombre); } .hero-pack__actions .note-google__etoiles { color: var(--u-sarcelle); letter-spacing: 1px; } .prix-carte { background: var(--u-sarcelle); color: var(--u-sur-sarcelle); border-radius: var(--u-r24); padding: 40px; display: grid; gap: 14px; } .prix-carte > * { margin: 0 !important; } .prix-carte .surtitre { color: var(--u-sable); } .prix-carte__prix { display: grid; gap: 6px; } .prix-carte__prix > * { margin: 0 !important; } .prix-carte__periode { font: 600 16px var(--u-titre); color: #fff; } .prix-carte__montant { font: 600 20px var(--u-titre); color: #fff; } .prix-carte__montant strong { font: 800 52px/1 var(--u-titre); color: #fff; font-variant-numeric: tabular-nums; } .prix-carte .wp-block-table.lignes { margin-top: 6px !important; } .prix-carte .wp-block-table.lignes td { padding: 10px 0; border-top-color: rgba(255, 255, 255, .18); color: var(--u-sur-sarcelle); } .prix-carte .wp-block-table.lignes td:last-child { font: 500 16px var(--u-corps); color: #fff; } .prix-carte__encart { background: rgba(255, 255, 255, .1); border-radius: var(--u-r8); padding: 14px 16px; font-size: 15px; color: #fff; } .prix-carte__encart strong { color: #fff; } /* Le suivi : rapport mensuel (carte blanche, « Exemple fictif ») */ .suivi__colonnes { gap: 64px !important; align-items: center !important; } .suivi__colonnes > .wp-block-column { flex-basis: 0 !important; flex-grow: 1 !important; } .suivi__texte { display: grid; gap: 14px; } .suivi__texte > * { margin: 0 !important; } .rapport { background: #fff !important; color: var(--u-texte); border: 1px solid var(--u-trait); border-radius: var(--u-r24); padding: 32px; box-shadow: 0 30px 60px -40px rgba(31, 75, 77, .45); display: block; } .rapport > * { margin: 0 !important; } .rapport__mention { display: inline-block; font: 600 12px/1.5 var(--u-titre); background: var(--u-sable-clair); color: var(--u-nuit); padding: 4px 12px; border-radius: 999px; border: 0; } .rapport__titre { font: 700 20px/1.3 var(--u-titre); color: var(--u-texte); margin: 14px 0 8px !important; } .rapport__lignes { background: none; padding: 0; border-radius: 0; } .rapport .wp-block-table.lignes td:last-child { color: var(--u-sombre); } /* Prix en tableau (section retirée de la landing le 16 oct. ; style gardé pour les anciens contenus) */ .prix-tableau__colonnes { gap: 64px !important; } .prix-tableau__texte { display: grid; gap: 14px; } .prix-tableau__texte > * { margin: 0 !important; } .prix-tableau { background: #fff; border: 1px solid var(--u-trait); border-radius: var(--u-r24); overflow: hidden; display: flex; flex-direction: column; } .prix-tableau > * { margin: 0 !important; } .prix-tableau .wp-block-table.lignes td { padding: 18px 28px; } .prix-total { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 16px; padding: 22px 28px; background: var(--u-sarcelle); color: #fff; } .prix-total > * { margin: 0 !important; } .prix-total__libelle { font: 600 16px var(--u-titre); color: var(--u-sable); } .prix-total__montant { font: 800 28px/1 var(--u-titre); color: #fff; } .prix-tableau .pack__action { padding: 22px 28px; } @media (max-width: 1000px) { .hero-pack > .hero-pack__texte, .hero-pack > .hero-pack__carte, .video-texte__colonnes > *, .suivi__colonnes > *, .prix-tableau__colonnes > * { flex-basis: 100% !important; } .video-texte__colonnes, .suivi__colonnes, .prix-tableau__colonnes { flex-wrap: wrap !important; } } @media (max-width: 680px) { .prix-carte { padding: 28px 20px; } .rapport { padding: 24px 20px; } } .pied.pied--landing { padding-block: 96px 32px; } .pied--landing .pied__legal { margin-top: 0 !important; padding-top: 0; border-top: 0; justify-content: center !important; text-align: center; } .landing-rdv { scroll-margin-top: calc(var(--wp-admin--admin-bar--height, 0px) + var(--u-entete)); } /* ===== Contact et rendez-vous (v1.4) ======================================= */ /* * Rendez-vous Brevo dans un grand bloc sarcelle (bouton sable) à gauche, formulaire en carte blanche à droite, * coordonnées en une ligne dessous. Même format sur la landing (#rdv). */ .contact-choix { display: grid !important; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 24px; align-items: stretch; } .contact-carte { margin: 0 !important; background: #fff; border: 1px solid var(--u-trait); border-radius: var(--u-r24); padding: 40px; display: flex; flex-direction: column; gap: 14px; } .contact-carte > * { margin: 0 !important; } .contact-carte h2, .contact-carte h3 { font-size: clamp(26px, 2.4vw, 34px); line-height: 1.18; } .contact-carte.is-rdv { background: var(--u-sarcelle); border-color: var(--u-sarcelle); color: var(--u-sur-sarcelle); } .contact-carte.is-rdv .surtitre { color: var(--u-sable); } .contact-carte.is-rdv :is(h2, h3) { color: #fff; } .contact-carte.is-rdv .attenue { color: var(--u-sur-sarcelle); } .contact-carte.is-rdv .upsilon-rdv { flex: 1; } .contact-carte.is-rdv .upsilon-rdv__ouvrir { align-self: flex-start; margin-top: 12px; } .contact-carte.is-rdv .upsilon-rdv__note { margin-top: auto; padding-top: 24px; color: var(--u-clair); } .contact-carte.is-rdv .upsilon-rdv__note a { color: var(--u-sable); } .coordonnees { margin-top: 32px !important; font-size: 15px; line-height: 2; color: var(--u-attenue); text-align: center; } .coordonnees strong { font: 600 15px var(--u-titre); color: var(--u-texte); margin-right: 6px; } .coordonnees a { color: var(--u-attenue); text-decoration: none; } .coordonnees a:hover { color: var(--u-sombre); } @media (max-width: 1000px) { .contact-choix { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 680px) { .contact-carte { padding: 28px 20px; } } /* Formulaire : champs crème, filet 1 px, arrondi 8, focus contour sarcelle */ .upsilon-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } .upsilon-form > * { grid-column: 1 / -1; margin: 0; } .upsilon-form__deux { display: contents; } .upsilon-form__deux > label { grid-column: auto; } .upsilon-form label { display: grid; gap: 6px; font: 600 14px/1.4 var(--u-titre); color: var(--u-texte); } .upsilon-form input, .upsilon-form select, .upsilon-form textarea { width: 100%; box-sizing: border-box; font: 400 16px/1.5 var(--u-corps); color: var(--u-texte); padding: 12px 14px; border: 1px solid var(--u-trait); border-radius: var(--u-r8); background: var(--u-creme); } .upsilon-form input:focus, .upsilon-form select:focus, .upsilon-form textarea:focus { outline: 2px solid var(--u-sarcelle); outline-offset: 1px; background: #fff; } .upsilon-form textarea { min-height: 140px; resize: vertical; } .upsilon-form__piege { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .upsilon-form__mention { font-size: 13px; color: var(--u-attenue); } .upsilon-form__mention a { color: var(--u-sombre); } .upsilon-form > .wp-block-button { justify-self: start; } .upsilon-form .wp-block-button__link { cursor: pointer; } .upsilon-form__retour { padding: 12px 16px; border-radius: var(--u-r8); font-size: 15px; font-weight: 600; } .upsilon-form__retour.is-ok { background: var(--u-teinte); color: var(--u-sombre); } .upsilon-form__retour.is-erreur { background: #F6DCD6; color: #8A2A1C; } @media (max-width: 680px) { .upsilon-form { grid-template-columns: minmax(0, 1fr); } .upsilon-form__deux > label { grid-column: 1 / -1; } } .upsilon-rdv { display: flex; flex-direction: column; gap: 12px; } .upsilon-rdv__ouvrir { align-self: flex-start; } .upsilon-rdv__note { margin: 0; font-size: 14px; color: var(--u-attenue); } .upsilon-rdv__iframe { width: 100%; border: 0; border-radius: var(--u-r16); background: #fff; } .upsilon-rdv__vide { padding: 16px; border: 1.5px dashed var(--u-sable); border-radius: var(--u-r8); font-size: 15px; } /* ===== Technologies : pilules ============================================= */ .technos { gap: 12px 20px; align-items: center; padding-block: 0; border: 0; } .technos > * { margin: 0 !important; } .technos .surtitre { color: var(--u-attenue); } .technos__liste { display: flex; flex-wrap: wrap; gap: 8px; } .technos__liste li { margin: 0; font: 500 14px/1.4 var(--u-corps); color: var(--u-texte); padding: 7px 16px; border-radius: 999px; background: #fff; border: 1px solid var(--u-trait); } /* ===== FAQ ================================================================ */ .upsilon-faq .wp-block-columns { gap: 64px; } .upsilon-faq .wp-block-column:first-child { flex-basis: 40% !important; flex-grow: 0 !important; display: grid; gap: 14px; align-content: start; } .upsilon-faq .wp-block-column:first-child > * { margin: 0 !important; } .upsilon-faq .wp-block-column.faq__questions { flex-basis: 60% !important; flex-grow: 1 !important; display: grid; gap: 12px; align-content: start; } .faq__questions .wp-block-details { margin: 0 !important; background: #fff; border: 1px solid var(--u-trait); border-radius: var(--u-r16); padding: 0 24px; } .faq__questions .wp-block-details[open] { border-color: var(--u-sarcelle); } .upsilon-faq summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 20px 0; font: 700 16px/1.4 var(--u-titre); } .upsilon-faq summary::-webkit-details-marker { display: none; } .upsilon-faq summary::after { content: "+"; flex: none; width: 30px; height: 30px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--u-sombre); display: grid; place-items: center; font: 400 18px/1 var(--u-corps); color: var(--u-sombre); transition: transform .3s; } .upsilon-faq details[open] summary::after { transform: rotate(45deg); } .upsilon-faq details > :not(summary) { margin: 0 0 14px; color: var(--u-attenue); max-width: 62ch; } .upsilon-faq details > :last-child { padding-bottom: 8px; } .upsilon-faq details ul { padding-left: 20px; } .upsilon-faq details li { margin-bottom: 4px; } /* Ligne locale sous le titre de la FAQ (Sites WordPress) */ .local-ligne { margin-top: 12px !important; padding-top: 18px; border-top: 1px solid var(--u-trait); color: var(--u-attenue); font-size: 15px; } .local-ligne strong { color: var(--u-texte); font-weight: 600; } .local-ligne__titre { margin: 12px 0 0 !important; padding-top: 18px; border-top: 1px solid var(--u-trait); font: 600 15px/1.5 var(--u-corps) !important; letter-spacing: 0 !important; color: var(--u-texte); } .local-ligne__titre + .local-ligne { margin-top: 0 !important; padding-top: 0; border-top: 0; } @media (max-width: 1000px) { .upsilon-faq .wp-block-columns { flex-wrap: wrap !important; gap: 32px; } .upsilon-faq .wp-block-column:first-child, .upsilon-faq .wp-block-column.faq__questions { flex-basis: 100% !important; } } /* Ancrage local (ancien bloc, en carte) */ .local { display: grid; gap: 8px; background: #fff; border: 1px solid var(--u-trait); border-radius: var(--u-r16); padding: 32px; } .local > * { margin: 0 !important; } .local__texte > * { margin: 0; } .local__texte > * + * { margin-top: 8px; } .local__texte h2, .local__texte h3 { font-size: 20px; line-height: 1.3; font-weight: 700; letter-spacing: 0; } /* ===== Fiche réalisation =================================================== */ .section.fiche-hero { padding-block: 72px 0; } .section.fiche-hero + .section { padding-top: 56px; } .fiche-hero__colonnes { gap: 64px; } .fiche-hero__texte > * { margin-block: 0 !important; } .fiche-hero__tete { display: grid; gap: 20px; margin: 0; } .fiche-hero__tete > * { margin: 0 !important; } h1.fiche-hero__titre { max-width: 22ch; font-size: clamp(34px, 3.6vw, 50px); line-height: 1.1; } .fiche-hero__colonnes--seul h1.fiche-hero__titre { font-size: clamp(38px, 4.4vw, 60px); } .fiche-hero__visuel > * { margin: 0 !important; } .fiche-hero__image { border-radius: var(--u-r24); overflow: hidden; background: var(--u-teinte); } .fiche-hero__image img { display: block; width: 100%; height: auto; } /* Fil d'Ariane et étiquettes : gardés, en discret */ .upsilon-ariane { display: flex; flex-wrap: wrap; gap: 8px; font-size: 14px; color: var(--u-attenue); margin-bottom: -6px !important; } .upsilon-ariane a { color: var(--u-attenue); } .fiche-hero .upsilon-etiquettes .etiquette { background: none; padding: 0; color: var(--u-attenue); font-weight: 500; font-size: 13px; } .fiche-hero .upsilon-etiquettes .etiquette + .etiquette::before { content: "·"; margin: 0 8px; } .fiche-hero .upsilon-etiquettes { gap: 0; } /* Technologies du hero : pilules teintées */ .stack { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; } .stack li { margin: 0; font: 600 12px/1.5 var(--u-titre); color: var(--u-sombre); background: var(--u-teinte); padding: 5px 12px; border-radius: 999px; border: 0; letter-spacing: 0; text-transform: none; } /* Chiffres clés : cartes blanches + ligne source ; grille adaptée au nombre réel de chiffres */ .chiffres-cles { margin-top: 56px !important; } .chiffres-cles > * { margin: 0 !important; } .chiffres { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)) !important; gap: 20px; } .chiffre { margin: 0 !important; display: flex; flex-direction: column; gap: 4px; background: #fff; border: 1px solid var(--u-trait); border-radius: var(--u-r16); padding: 24px 28px; } .chiffre > * { margin: 0 !important; } .chiffre__valeur { font: 800 40px/1.1 var(--u-titre); color: var(--u-sarcelle); font-variant-numeric: tabular-nums; letter-spacing: -.02em; } .chiffre__libelle { font-size: 15px; color: var(--u-attenue); line-height: 1.5; } .chiffres__source { margin-top: 16px !important; font-size: 13px; color: var(--u-attenue); max-width: 90ch; } .upsilon-chiffres { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); gap: 20px; margin: 0; } .upsilon-chiffre { display: flex; flex-direction: column; gap: 4px; background: #fff; border: 1px solid var(--u-trait); border-radius: var(--u-r16); padding: 24px 28px; } .upsilon-chiffre dt { font-size: 15px; color: var(--u-attenue); } .upsilon-chiffre dd { margin: 0; } .upsilon-chiffre__valeur { order: -1; font: 800 40px/1.1 var(--u-titre); color: var(--u-sarcelle); } .upsilon-chiffre__source { font-size: 13px; color: var(--u-attenue); } /* Galerie : images entières, hauteurs alignées, agrandissement au clic (lightbox WordPress) */ .galerie-fiche { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 20px; } .galerie-fiche > * { flex: var(--r, 1) 1 0; min-width: 0; margin: 0 !important; border-radius: var(--u-r16); overflow: hidden; border: 1px solid var(--u-trait); background: #fff; transition: transform .3s var(--u-ressort); } .galerie-fiche > *:hover { transform: translateY(-3px); } .galerie-fiche img { display: block; width: 100%; height: auto; cursor: zoom-in; } /* Agrandissement au clic sur l'image ; le bouton de WordPress reste pour le clavier (visible au survol et au focus). */ .galerie-fiche .lightbox-trigger { opacity: 0; transition: opacity .2s; background: rgba(22, 48, 47, .7); border-radius: 50%; } .galerie-fiche > :hover .lightbox-trigger, .galerie-fiche .lightbox-trigger:focus-visible { opacity: 1; } @media (max-width: 1000px) { .galerie-fiche > * { flex-basis: calc(50% - 10px); } .galerie-fiche > *:last-child:nth-child(odd) { flex-basis: 100%; } } @media (max-width: 680px) { .galerie-fiche > * { flex-basis: 100%; } } /* Fenêtre d'agrandissement : fond sarcelle nuit, image arrondie */ .wp-lightbox-overlay .scrim { background-color: rgba(22, 48, 47, .88) !important; } .wp-lightbox-overlay .lightbox-image-container img, .wp-lightbox-overlay figure img { border-radius: var(--u-r16); } .wp-lightbox-overlay .wp-lightbox-close-button { fill: #fff !important; } /* Contexte + encadré « Vous vous reconnaissez ? » + panneau « En bref » */ .fiche-contexte { gap: 64px !important; } .fiche-contexte > .wp-block-column:first-child { flex: 1.3 1 0 !important; } .fiche-contexte > .wp-block-column:last-child { flex: .9 1 0 !important; } .fiche-contexte .wp-block-column > * { margin-block: 0; } .fiche-contexte .wp-block-column > * + * { margin-top: 16px; } .fiche-contexte .wp-block-column:first-child > p:not(.surtitre):not(.encart) { color: var(--u-corps-fonce); } .encart { background: var(--u-creme); border-radius: var(--u-r16); padding: 24px 28px; color: var(--u-texte); font-size: 16px; max-width: none; } .encart strong { font-family: var(--u-titre); } .infos { background: var(--u-creme); border-radius: var(--u-r16); padding: 28px; display: grid; gap: 14px; } .infos > * { margin: 0 !important; } .infos .surtitre { color: var(--u-sarcelle); } .infos__liste { list-style: none; margin: 0 !important; padding: 0; display: grid; gap: 12px; } .infos__liste li { display: grid; gap: 2px; padding: 0 0 12px; border-bottom: 1px solid var(--u-trait); font-weight: 500; } .infos__liste li:last-child { border-bottom: 0; padding-bottom: 0; } .infos__liste li strong { display: block; font: 600 12px/1.5 var(--u-titre); letter-spacing: .14em; text-transform: uppercase; color: var(--u-sarcelle); } .infos__liste a { color: var(--u-sombre); } .upsilon-en-bref { margin: 0; display: grid; gap: 12px; } .upsilon-en-bref > div { display: grid; gap: 2px; padding-bottom: 12px; border-bottom: 1px solid var(--u-trait); } .upsilon-en-bref dt { font: 600 12px var(--u-titre); letter-spacing: .14em; text-transform: uppercase; color: var(--u-sarcelle); } .upsilon-en-bref dd { margin: 0; font-weight: 500; } @media (max-width: 1000px) { .fiche-contexte { flex-wrap: wrap !important; } .fiche-contexte > .wp-block-column { flex-basis: 100% !important; } } /* Défis : 3 cartes (sans le libellé « Défi 0N ») */ .etapes--defis { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } .etapes--defis::before { display: none; } .etapes--defis .etape { background: #fff; border: 1px solid var(--u-trait); border-radius: var(--u-r16); padding: 28px; gap: 10px; } .has-blanc-background-color .etapes--defis .etape { background: var(--u-creme); border: 0; } .etapes--defis .etape::before { display: none; content: none; } .etapes--defis .etape h3 { font: 700 20px/1.3 var(--u-titre); } @media (max-width: 1000px) { .etapes--defis { grid-template-columns: minmax(0, 1fr); } } /* Solution : 2 × 2 cartes crème sans icône */ .inclus.inclus--fonctions { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px !important; } .inclus--fonctions .inclus__item { background: var(--u-creme); border: 0; padding: 28px; } .inclus--fonctions .inclus__item p { font-size: 15px; line-height: 1.6; } .inclus--fonctions .inclus__item strong { font-size: 20px; margin-bottom: 10px; } .inclus__texte > * { margin: 0; } .inclus__texte ul { margin-top: 8px; padding-left: 1.1rem; font-size: 15px; color: var(--u-attenue); display: grid; gap: 2px; } @media (max-width: 680px) { .inclus.inclus--fonctions { grid-template-columns: minmax(0, 1fr); } } /* Les 3 atouts suivent la solution, séparés par un filet */ .section--suite { padding-top: 0; } .section--suite .parcours-duo--points { margin-top: -48px; } /* Résultats dans le panneau sarcelle */ .panneau .resultats .wp-block-columns { align-items: flex-start !important; } /* Un projet similaire ? : carte blanche */ .projet-similaire { display: grid; grid-template-columns: minmax(0, 1.4fr) auto; gap: 40px; align-items: center; background: #fff; border: 1px solid var(--u-trait); border-radius: var(--u-r24); padding: 48px; } .projet-similaire > * { margin: 0 !important; } .projet-similaire__texte { display: grid; gap: 12px; } .projet-similaire__texte > * { margin: 0 !important; } .projet-similaire__texte h3, .projet-similaire__texte h2 { font: 800 clamp(26px, 2.4vw, 34px)/1.18 var(--u-titre); letter-spacing: -.02em; } .projet-similaire__texte .attenue { max-width: 60ch; } .projet-similaire__texte a { color: var(--u-sombre); } .projet-similaire .wp-block-buttons { gap: 12px; } .projet-similaire .is-style-lien .wp-block-button__link { min-height: 50px; padding: 0 26px; border-radius: 999px; text-decoration: none; box-shadow: inset 0 0 0 1.5px var(--u-sombre); } .projet-similaire .is-style-lien .wp-block-button__link:hover { background: var(--u-sombre); color: #fff; } @media (max-width: 1000px) { .projet-similaire { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 680px) { .projet-similaire { padding: 28px 20px; } } /* Anciennes rubriques de fiche (récit, captures, citation) */ .wp-block-columns.recit { gap: 24px 64px; margin-block: 0; } .recit .wp-block-column > * { margin-block: 0; } .recit .wp-block-column > * + * { margin-top: 16px; } .recit + .recit, .fiche-captures, .recit + .temoignage { margin-top: 48px !important; padding-top: 48px; border-top: 1px solid var(--u-trait); } .captures img { border-radius: var(--u-r16); } .temoignage { max-width: 52rem; margin-top: 4rem !important; padding: 0; border: 0; } .temoignage p { font: 700 clamp(1.3rem, 2.6vw, 1.8rem)/1.35 var(--u-titre); color: var(--u-sarcelle); } .temoignage cite { display: block; margin-top: 1rem; font-style: normal; font-size: 15px; color: var(--u-attenue); } .citation .temoignage { margin-top: 0 !important; } .fiche-visuel { margin-top: 48px !important; border-radius: var(--u-r24); overflow: hidden; } .fiche-visuel img { width: 100%; display: block; } /* ===== Appel final et fusée ============================================== */ /* Fond sarcelle foncé, enchaîné avec le pied de page (même fond). */ .section.appel-final { text-align: center; padding-bottom: 0; color: var(--u-sur-sarcelle); } .appel-final > * { margin-block: 0 !important; } .appel-final > * + * { margin-top: 20px !important; } h2.appel-final__titre { max-width: 22ch !important; font-size: clamp(38px, 4.4vw, 60px); line-height: 1.07; color: #fff; } .appel-final__titre .fin, .appel-final__titre mark { color: #fff; font-weight: 400; } .appel-final__texte { max-width: 56ch !important; color: var(--u-sur-sarcelle); } .appel-final__boutons { justify-content: center; margin-top: 32px !important; } .appel-final .fusee { margin-bottom: 4px !important; } @media (max-width: 680px) { .appel-final__boutons .wp-block-button { flex: 1 1 100%; } .appel-final__boutons .wp-block-button__link { width: 100%; white-space: normal; } } .fusee { position: relative; width: clamp(96px, 9vw, 128px) !important; pointer-events: none; } .fusee img { display: block; width: 100%; height: auto; } .fusee__vol { position: absolute; inset: 0 0 auto 0; transition: transform .6s cubic-bezier(.25, 0, .15, 1); } @media (prefers-reduced-motion: no-preference) { .fusee__corps { animation: fusee-flotte 3.2s ease-in-out infinite alternate; } .appel-final:has(.wp-block-button__link:hover, .wp-block-button__link:focus-visible) .fusee__vol { transform: translateY(-18%); } @keyframes fusee-flotte { to { translate: 0 -5px; } } @supports (animation-timeline: view()) { .fusee__base { animation: fusee-base linear both; animation-timeline: view(); animation-range: entry 0% entry 70%; transform-origin: 50% 100%; } .fusee__vol > img { animation: fusee-flotte 3.2s ease-in-out infinite alternate, fusee-decolle linear both; animation-timeline: auto, view(); animation-range: normal, entry 20% entry 100%; } @keyframes fusee-base { from { transform: scale(.7); opacity: 0; } } @keyframes fusee-decolle { from { transform: translateY(38%); opacity: 0; } } } } /* ===== Pied de page ======================================================= */ .pied { padding-block: 152px 0; font-size: 15px; color: var(--u-sur-sarcelle); } .pied .wp-block-columns.pied__colonnes { display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)); gap: 40px; } .pied__colonnes > .wp-block-column { flex-basis: auto !important; } .pied .wp-block-column > * { margin-block: 0; } .pied .wp-block-column > * + * { margin-top: 14px; } .pied__titre { font: 600 13px/1.3 var(--u-titre); letter-spacing: .14em; text-transform: uppercase; color: var(--u-sable); } .pied__liens { display: grid; gap: 10px; } .pied a { color: var(--u-sur-sarcelle); text-decoration: none; } .pied a:hover { color: var(--u-sable); } .pied__legal { margin-top: 48px !important; padding: 24px 0 32px; border-top: 1px solid var(--u-trait-sombre); font-size: 14px; gap: 16px; } .pied__legal p { margin: 0; } .pied__legal a, .pied__cookies { color: var(--u-sable); } /* Pied seul (pages sans appel final : Contact, légales, états) */ .wp-block-template-part:has(> .pied) { margin-top: 0; } .contenu:not(:has(> .wp-block-post-content > .appel-final:last-child, > .appel-final:last-child, .appel-final--gabarit)) + .wp-block-template-part > .pied:not(.pied--landing), .pied--seul { padding-top: 56px; } @media (max-width: 1000px) { .pied .wp-block-columns.pied__colonnes { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } } @media (max-width: 680px) { .pied .wp-block-columns.pied__colonnes { grid-template-columns: minmax(0, 1fr); } } /* Lien « Gérer les cookies » du pied : bouton présenté comme les autres liens */ .pied__cookies { background: none; border: 0; padding: 0; margin: 0; font: inherit; line-height: inherit; text-decoration: none; cursor: pointer; } .pied__cookies:hover, .pied__cookies:focus-visible { color: #fff; text-decoration: underline; } .pied__logo { margin: 0; } .pied__logo img { display: block; width: auto; max-width: 100%; height: 56px; aspect-ratio: 4270 / 1000; object-fit: contain; object-position: left center; } @media (max-width: 680px) { .pied__logo img { height: 48px; } } /* ===== Pages légales (gabarit « Page simple, avec titre ») ================= */ .legal-hero { padding-block: 80px 40px; } .legal-hero h1 { max-width: none; } .section.legal { padding-block: 0 var(--u-section); } .legal__in { background: #fff; border: 1px solid var(--u-trait); border-radius: var(--u-r24); padding: 56px; } .legal__in > * { margin-block: 0 0 12px; } .legal__in h2 { font: 700 22px/1.3 var(--u-titre); letter-spacing: 0; margin: 40px 0 12px; padding-top: 32px; border-top: 1px solid var(--u-trait); } .legal__in > h2:first-child, .legal__in > :first-child h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; } .legal__in h3 { font: 700 18px/1.4 var(--u-titre); margin: 24px 0 8px; } .legal__in :is(p, li) { color: var(--u-corps-fonce); } .legal__in a { color: var(--u-sombre); text-decoration: underline; text-underline-offset: 3px; } .legal__in .legal__maj { margin-top: 40px; font-size: 14px; color: var(--u-attenue); } @media (max-width: 680px) { .legal-hero { padding-block: 48px 32px; } .legal__in { padding: 28px 20px; } } /* ===== Pages d'état : Merci, Rendez-vous confirmé, 404 ===================== */ .section.etat { padding-block: 80px var(--u-section); } .etat__in { background: #fff; border: 1px solid var(--u-trait); border-radius: var(--u-r24); padding: 96px 56px; text-align: center; display: grid; justify-items: center; gap: 18px; } .etat__in > *, .etat__in .wp-block-post-content > * { margin: 0 !important; } .etat__in .wp-block-post-content { display: grid; justify-items: center; gap: 18px; } .etat__in h1 { max-width: 20ch; } .etat__in p:not(.surtitre) { color: var(--u-corps-fonce); font-size: 18px; max-width: 60ch; } .etat__in .wp-block-buttons { justify-content: center; gap: 12px; margin-top: 16px !important; } @media (max-width: 680px) { .section.etat { padding-top: 40px; } .etat__in { padding: 48px 20px; } } /* ===== Mobile ============================================================= */ @media (max-width: 1000px) { .hero__colonnes, .fiche-hero__colonnes { flex-wrap: wrap !important; gap: 48px; } .hero__colonnes > .wp-block-column, .fiche-hero__colonnes > .wp-block-column { flex-basis: 100% !important; } .wp-block-columns.colonnes-ecartees { flex-wrap: wrap !important; gap: 32px; } .wp-block-columns.colonnes-ecartees > .wp-block-column { flex-basis: 100% !important; } } @media (max-width: 680px) { .section.hero { padding-block: 40px var(--u-section); } .section.hero--court { padding-block: 48px 32px; } .section.fiche-hero { padding-top: 40px; } .compo, .illustration { aspect-ratio: 1 / 1; } .puce { font-size: 12px; padding: 8px 12px; max-width: 70%; } .puce strong { font-size: 13px; } .p2, .illustration .puce-2 { left: 2%; } .bandeau-preuves__mentions li { border-left: 0; padding: 0 14px 0 0; } body :is(.wp-block-button__link, .wp-element-button) { white-space: normal; text-align: center; } .hero__colonnes .wp-block-buttons { flex-wrap: wrap; } .chiffre__valeur { font-size: 34px; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } } /* ===== Consentement aux cookies (v1.3.0, R11) : couleurs de la charte, sans icône ===== */ #cc-main { --cc-font-family: var(--u-corps); --cc-modal-border-radius: var(--u-r16); --cc-btn-border-radius: 999px; --cc-bg: var(--u-blanc); --cc-primary-color: var(--u-texte); --cc-secondary-color: var(--u-attenue); --cc-link-color: var(--u-sombre); --cc-btn-primary-bg: var(--u-sombre); --cc-btn-primary-color: var(--u-blanc); --cc-btn-primary-border-color: var(--u-sombre); --cc-btn-primary-hover-bg: var(--u-nuit); --cc-btn-primary-hover-color: var(--u-blanc); --cc-btn-primary-hover-border-color: var(--u-nuit); --cc-btn-secondary-bg: transparent; --cc-btn-secondary-color: var(--u-sombre); --cc-btn-secondary-border-color: var(--u-sombre); --cc-btn-secondary-hover-bg: var(--u-sombre); --cc-btn-secondary-hover-color: var(--u-blanc); --cc-btn-secondary-hover-border-color: var(--u-sombre); --cc-separator-border-color: var(--u-trait); --cc-toggle-on-bg: var(--u-sarcelle); --cc-toggle-off-bg: var(--u-attenue); --cc-toggle-on-knob-bg: var(--u-blanc); --cc-toggle-off-knob-bg: var(--u-blanc); --cc-toggle-enabled-icon-color: transparent; --cc-toggle-disabled-icon-color: transparent; --cc-toggle-readonly-bg: var(--u-trait); --cc-toggle-readonly-knob-bg: var(--u-blanc); --cc-toggle-readonly-knob-icon-color: transparent; --cc-section-category-border: var(--u-trait); --cc-cookie-category-block-bg: var(--u-creme); --cc-cookie-category-block-border: var(--u-creme); --cc-cookie-category-block-hover-bg: var(--u-creme); --cc-cookie-category-block-hover-border: var(--u-creme); --cc-cookie-category-expanded-block-bg: var(--u-creme); --cc-cookie-category-expanded-block-hover-bg: var(--u-creme); --cc-overlay-bg: rgba(22, 48, 47, .55); --cc-footer-bg: var(--u-creme); --cc-footer-color: var(--u-attenue); --cc-footer-border-color: var(--u-trait); } #cc-main .cm__title, #cc-main .pm__title, #cc-main .pm__section-title { font-family: var(--u-titre); } #cc-main .cm__btn, #cc-main .pm__btn { font-family: var(--u-titre); font-weight: 600; } #cc-main .pm__close-btn, #cc-main .pm__section-arrow, #cc-main .toggle__icon-on, #cc-main .toggle__icon-off { display: none !important; } #cc-main .pm__section--expandable .pm__section-desc-wrapper { display: flex !important; } #cc-main .pm__section--expandable .pm__section-title { padding-left: 1.1em; cursor: default; } #cc-main .pm__section--expandable .pm__section-desc { padding: 0 1.1em 1.1em; color: var(--u-attenue); }