/* Theme Name: The Mentoring Theme URI: https://thementoring.fr Author: The Mentoring Description: Thème bloc sur mesure de The Mentoring, cabinet de conseil en entreprise. Généré depuis la maquette validée (méthode Claude-to-WordPress). Version: 1.0.22 Requires at least: 6.6 Requires PHP: 8.0 License: GPL-2.0-or-later License URI: https://www.gnu.org/licenses/gpl-2.0.html Text Domain: the-mentoring Tags: block-theme, full-site-editing, business, one-column */ /* Ce fichier est généré par outils/construire-theme.ps1 : 1. la feuille de la maquette (site/styles.css), sans modification ; 2. theme-sources/blocs.css, les adaptations au balisage des blocs WordPress. Ne pas l'éditer ici : modifier ces deux sources puis reconstruire. */ /* ========================================================== The Mentoring — maquette Registre : mise en page de la référence, charte The Mentoring ========================================================== */ :root { --noir: #000000; --brun: #4F4135; --sable: #6E6252; --pierre: #968C7F; --lin: #CBC3B9; --nacre: #EBE8E7; --nacre-fonce: #E2DDD8; --blanc: #FFFFFF; --cuivre: #B65A3A; --cuivre-fonce: #9C4B2F; --nuit: #100D0A; --nuit-2: #1E1913; --police: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; --rayon:6px; --rayon-pilule:6px; --largeur: 1200px; --gouttiere: 24px; } *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; background: var(--nacre); color: var(--brun); font-family: var(--police); font-size: 15px; line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: hidden; } img { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } h1, h2, h3, h4 { margin: 0; font-weight: 400; color: var(--noir); hyphens: none; text-wrap: balance; } p { margin: 0; } ul, ol { margin: 0; padding: 0; list-style: none; } button { font: inherit; cursor: pointer; } .enveloppe { max-width: var(--largeur); margin: 0 auto; padding: 0 var(--gouttiere); } .surtitre { font-size: 13px; color: var(--pierre); letter-spacing: .01em; margin-bottom: 22px; } .titre-section { font-size: clamp(32px, 3vw, 42px); line-height: 1.14; letter-spacing: -0.02em; } .attenue { color: var(--sable); } .fleche { display: inline-block; transition: transform .25s ease; } a:hover .fleche, button:hover .fleche { transform: translateX(4px); } /* ---------- boutons ---------- */ .bouton { display: inline-flex; align-items: center; gap: 12px; padding: 13px 26px; border-radius: var(--rayon-pilule); font-size: 14px; font-weight: 500; line-height: 1; transition: background .25s ease, color .25s ease, border-color .25s ease; } .bouton-cuivre { background: var(--cuivre); color: var(--blanc); } .bouton-cuivre:hover { background: var(--cuivre-fonce); } .bouton-noir { background: var(--noir); color: var(--blanc); } .bouton-noir:hover { background: var(--brun); } .bouton-contour { border: 1px solid var(--noir); background: transparent; color: var(--noir); padding: 12px 28px; } .bouton-petit { padding: 10px 18px; font-size: 13px; } .bouton-contour:hover { background: var(--noir); color: var(--blanc); } /* ---------- logo ---------- */ .logo { display: inline-flex; align-items: center; gap: 10px; color: var(--blanc); font-weight: 600; font-size: 16px; letter-spacing: -0.01em; } .logo-marque { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.8; } .logo-marque circle:last-child { fill: currentColor; stroke: none; } /* ========================================================== EN-TÊTE + MENU ========================================================== */ .entete { position: absolute; top: 0; left: 0; right: 0; z-index: 30; padding: 30px 0; } .entete-ligne { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; } .entete-baseline { color: rgba(255,255,255,.85); font-size: 13px; text-align: center; } .entete-actions { justify-self: end; display: flex; align-items: center; gap: 14px; } .burger { width: 40px; height: 40px; border: 0; background: none; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 7px; } .burger span { display: block; width: 22px; height: 1.5px; background: var(--blanc); transition: transform .3s ease; } body.menu-ouvert .burger span:first-child { transform: translateY(4.25px) rotate(45deg); } body.menu-ouvert .burger span:last-child { transform: translateY(-4.25px) rotate(-45deg); } body.menu-ouvert .entete { position: fixed; } .menu { position: fixed; inset: 0; z-index: 25; background: linear-gradient(180deg, var(--nuit) 0%, var(--nuit-2) 60%, var(--brun) 100%); display: flex; align-items: center; opacity: 0; visibility: hidden; transition: opacity .35s ease, visibility .35s; } body.menu-ouvert { overflow: hidden; } body.menu-ouvert .menu { opacity: 1; visibility: visible; } .menu-grille { width: 100%; display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 40px; } .menu-liens a { display: block; color: var(--blanc); font-size: clamp(26px, 2.8vw, 38px); font-weight: 300; letter-spacing: -0.015em; line-height: 1.35; transition: color .2s, padding .3s; } .menu-liens a:hover { color: var(--lin); padding-left: 14px; } .menu-liens a[aria-current="page"] { color: var(--lin); } .menu-contact { color: rgba(255,255,255,.6); font-size: 14px; display: grid; gap: 16px; } .menu-contact a { color: var(--blanc); } /* ========================================================== HÉRO ========================================================== */ /* nom spécifique : un article peut contenir sa propre classe « hero » */ .hero-accueil { position: relative; min-height: 100vh; min-height: 100svh; display: flex; align-items: center; justify-content: center; overflow: hidden; color: var(--blanc); text-align: center; } /* même fond pour le héro de l'accueil et la tête des pages intérieures */ .hero-accueil, .bandeau-page { background: radial-gradient(ellipse 58% 62% at 50% 108%, rgba(16,13,10,.92) 0%, rgba(16,13,10,.55) 55%, rgba(16,13,10,0) 75%), radial-gradient(ellipse 90% 60% at 50% 100%, rgba(150,140,127,.55) 0%, rgba(110,98,82,0) 70%), linear-gradient(180deg, var(--nuit) 0%, #17120E 30%, #2E261F 58%, #5A4C3F 84%, #7A6D5D 100%); } .hero-trame, .pied-trame { position: absolute; inset: 0; pointer-events: none; background-image: radial-gradient(rgba(255,255,255,.09) 0.8px, transparent 1px); background-size: 4px 4px; mask-image: linear-gradient(180deg, rgba(0,0,0,.5), #000 70%); } .hero-traits { position: absolute; inset: 0; pointer-events: none; } .hero-traits i { position: absolute; left: 0; height: 1px; width: 160px; background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.75), rgba(255,255,255,0)); animation: trait 9s linear infinite; opacity: 0; } .hero-traits i:nth-child(1) { top: 14%; width: 220px; animation-delay: 0s; animation-duration: 11s; } .hero-traits i:nth-child(2) { top: 26%; width: 120px; animation-delay: 3s; animation-duration: 8s; } .hero-traits i:nth-child(3) { top: 37%; width: 260px; animation-delay: 1.5s; animation-duration: 13s; } .hero-traits i:nth-child(4) { top: 52%; width: 90px; animation-delay: 5s; animation-duration: 7s; } .hero-traits i:nth-child(5) { top: 63%; width: 180px; animation-delay: 2s; animation-duration: 10s; } .hero-traits i:nth-child(6) { top: 74%; width: 140px; animation-delay: 6.5s; animation-duration: 9s; } .hero-traits i:nth-child(7) { top: 21%; width: 70px; animation-delay: 4s; animation-duration: 6s; } .hero-traits i:nth-child(8) { top: 82%; width: 240px; animation-delay: 7.5s; animation-duration: 12s; } @keyframes trait { 0% { transform: translateX(-30vw); opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { transform: translateX(130vw); opacity: 0; } } .hero-contenu { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; padding-top: 40px; } .hero-titre { color: var(--blanc); font-size: clamp(40px, 4.3vw, 64px); line-height: 1.08; letter-spacing: -0.035em; font-weight: 400; } .hero-titre em { font-style: normal; color: var(--lin); } .hero-sous-titre { margin: 26px 0 30px; font-size: 14px; color: rgba(255,255,255,.62); } .hero-defiler { position: absolute; bottom: 32px; left: 50%; transform: translateX(-50%); z-index: 2; font-size: 13px; color: rgba(255,255,255,.85); display: inline-flex; gap: 8px; } .hero-defiler span { animation: rebond 2.2s ease-in-out infinite; display: inline-block; } @keyframes rebond { 50% { transform: translateY(4px); } } /* ========================================================== À PROPOS ========================================================== */ .apropos { padding: 140px 0 0; } .apropos-grille { display: grid; grid-template-columns: 5fr 7fr; gap: 0 6%; align-items: center; } .apropos-visuel { position: relative; margin: 0; aspect-ratio: 1 / 1; border-radius: var(--rayon); overflow: hidden; background: var(--nuit); } .apropos-visuel img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.8) brightness(.78); transform: scale(1.06); } .apropos-trace { position: absolute; inset: 9%; width: 82%; height: 82%; fill: none; stroke: rgba(255,255,255,.88); stroke-width: 1.2; } .apropos-trace circle:nth-child(3) { fill: rgba(255,255,255,.9); stroke: none; } .apropos-trace circle:nth-child(4), .apropos-trace circle:nth-child(5) { stroke: rgba(255,255,255,.35); stroke-dasharray: 2 6; } .apropos-texte { max-width: 560px; padding-left: 6%; } .apropos-corps { margin: 30px 0 0 6px; padding-bottom: 30px; border-bottom: 1px solid var(--lin); font-size: 14px; color: var(--sable); max-width: 480px; } .lien-fleche { display: inline-flex; gap: 10px; margin-top: 26px; font-size: 14px; font-weight: 500; color: var(--noir); } .bandeau { margin-top: 120px; padding: 34px 0; border-top: 1px solid var(--lin); overflow: hidden; } .bandeau-piste { display: flex; align-items: center; gap: 46px; width: max-content; animation: defile 38s linear infinite; } .bandeau-piste span { font-size: 28px; font-weight: 500; letter-spacing: -0.02em; color: var(--lin); white-space: nowrap; } .bandeau-piste b { width: 9px; height: 9px; border: 1.5px solid var(--lin); border-radius: 50%; } @keyframes defile { to { transform: translateX(-50%); } } /* ========================================================== CITATION ========================================================== */ .citation { position: relative; overflow: hidden; color: var(--blanc); min-height: 92vh; display: flex; align-items: center; background: radial-gradient(ellipse 60% 70% at 0% 0%, rgba(110,98,82,.75), rgba(110,98,82,0) 70%), radial-gradient(ellipse 50% 60% at 100% 100%, rgba(150,140,127,.7), rgba(150,140,127,0) 70%), linear-gradient(160deg, #2A231C 0%, var(--nuit-2) 45%, #1A1511 70%, #3B3128 100%); } .citation-trace { position: absolute; left: 50%; top: 50%; width: 520px; height: 520px; transform: translate(-50%, -50%); fill: none; stroke: rgba(255,255,255,.1); stroke-width: .8; } .citation-contenu { position: relative; text-align: center; } .citation blockquote { margin: 0 auto; max-width: 820px; } .citation blockquote p { font-size: clamp(24px, 2.6vw, 36px); font-weight: 300; line-height: 1.35; letter-spacing: -0.02em; color: var(--blanc); text-wrap: balance; } .guillemet { font-size: 1.6em; line-height: 0; vertical-align: -0.35em; margin-right: 6px; color: var(--lin); font-weight: 400; } .citation cite { display: block; margin-top: 28px; font-style: normal; font-size: 14px; color: rgba(255,255,255,.6); } /* ========================================================== SERVICES ========================================================== */ .services { background: var(--nacre-fonce); padding: 110px 0 120px; min-height: 100vh; } .surtitre-filet { padding-bottom: 24px; border-bottom: 1px solid var(--lin); margin-bottom: 0; } .services-grille { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr auto; min-height: 560px; padding-top: 90px; gap: 0 6%; } .services-liste { align-self: center; display: grid; gap: 6px; } .service-onglet { font-size: clamp(20px, 1.9vw, 26px); letter-spacing: -0.015em; color: var(--sable); cursor: pointer; transition: color .3s ease, padding .35s ease; line-height: 1.4; } .service-onglet .num { display: inline-block; width: 0; overflow: hidden; opacity: 0; transition: width .35s ease, opacity .3s ease; vertical-align: bottom; } .service-onglet.est-actif { color: var(--noir); padding-left: 22px; } .service-onglet.est-actif .num { width: 1.4em; opacity: 1; } .service-onglet:hover { color: var(--noir); } .services-figure { align-self: center; justify-self: start; width: 210px; height: 210px; } .services-figure svg { width: 100%; height: 100%; fill: none; stroke: var(--pierre); stroke-width: .9; overflow: visible; } .services-figure g { transform-origin: 100px 100px; transition: transform .8s cubic-bezier(.6,.05,.25,1); } .services-figure .fig-point { fill: var(--brun); stroke: none; } .services-figure line { stroke-dasharray: 2 3; } .actif-1 .fig-a { transform: rotate(45deg); } .actif-1 .fig-b { transform: rotate(0deg) scale(.82); } .actif-1 .fig-c { transform: rotate(45deg) scale(.6); } .actif-2 .fig-a { transform: rotate(60deg) scaleY(1.2); } .actif-2 .fig-b { transform: rotate(15deg) scale(.9); } .actif-2 .fig-c { transform: rotate(90deg) scale(.75); } .actif-3 .fig-a { transform: rotate(45deg) scale(1.1); } .actif-3 .fig-b { transform: rotate(45deg) scale(.7); } .actif-3 .fig-c { transform: rotate(45deg) scale(.35); } .actif-4 .fig-a { transform: rotate(30deg) scaleX(1.25); } .actif-4 .fig-b { transform: rotate(-30deg) scaleX(1.25); } .actif-4 .fig-c { transform: rotate(0deg) scale(.5); } .actif-5 .fig-a { transform: rotate(0deg) scale(1.1); } .actif-5 .fig-b { transform: rotate(45deg) scale(1.1); } .actif-5 .fig-c { transform: rotate(22.5deg) scale(.8); } .services-lien { align-self: end; font-size: 13px; color: var(--sable); } .services-lien a { color: var(--noir); font-weight: 500; margin-left: 10px; display: inline-flex; gap: 10px; } .services-descriptions { align-self: end; display: grid; max-width: 470px; } .service-desc { grid-area: 1 / 1; font-size: 14px; color: var(--sable); opacity: 0; transform: translateY(8px); transition: opacity .4s ease, transform .4s ease; pointer-events: none; } .service-desc.est-actif { opacity: 1; transform: none; pointer-events: auto; } /* ========================================================== MÉTHODE ========================================================== */ .methode { padding: 140px 0 100px; } .methode-grille { display: grid; grid-template-columns: 5fr 6fr; gap: 0 8%; align-items: start; } .methode-intro { position: sticky; top: 120px; } .methode-corps { margin-top: 28px; font-size: 14px; color: var(--sable); max-width: 400px; } .methode-cartes { display: grid; gap: 14px; } .carte-etape { position: sticky; top: 100px; display: flex; flex-direction: column; justify-content: space-between; min-height: 330px; padding: 30px 32px; border-radius: var(--rayon); overflow: hidden; color: var(--blanc); box-shadow: 0 -10px 30px rgba(16,13,10,.12); } .carte-etape:nth-child(2) { top: 116px; } .carte-etape:nth-child(3) { top: 132px; } .carte-etape-pleine { background: linear-gradient(150deg, var(--brun) 0%, #3E3329 100%); } .carte-etape-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .carte-etape-photo::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(16,13,10,.55) 0%, rgba(16,13,10,.05) 40%, rgba(16,13,10,.75) 100%); } .carte-etape > *:not(img) { position: relative; z-index: 1; } .carte-etape-haut { display: flex; justify-content: space-between; gap: 20px; } .carte-etape h3 { color: var(--blanc); font-size: 22px; letter-spacing: -0.015em; } .carte-etape-icone { font-size: 18px; line-height: 1; } .carte-etape p { font-size: 13.5px; max-width: 430px; color: rgba(255,255,255,.88); } /* ========================================================== ATOUTS (BENTO) ========================================================== */ .atouts { padding: 60px 0 140px; } .atouts-tete { margin-bottom: 56px; } .atouts-grille { display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: 340px 340px; gap: 14px; } .atout { position: relative; border-radius: var(--rayon); overflow: hidden; padding: 22px; display: flex; flex-direction: column; justify-content: flex-end; color: var(--blanc); } .atout-large { grid-column: span 2; } .atout h3 { font-size: 16px; color: inherit; letter-spacing: -0.01em; font-weight: 500; } .atout p { font-size: 12.5px; margin-top: 6px; opacity: .85; max-width: 360px; } .atout-texte { position: relative; z-index: 2; } .pastille { position: absolute; top: 20px; left: 20px; z-index: 2; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.18); backdrop-filter: blur(6px); } .pastille svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; } .atout-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s cubic-bezier(.2,.6,.2,1); } .atout-photo:hover img { transform: scale(1.05); } .atout-photo::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(16,13,10,0) 45%, rgba(16,13,10,.72) 100%); } .atout-clair { background: var(--blanc); color: var(--noir); } .atout-clair .pastille { background: var(--nacre); } .atout-orbe { position: absolute; top: 50%; left: 50%; width: 78%; transform: translate(-50%, -58%); fill: none; stroke: var(--pierre); stroke-width: .9; animation: tourne 40s linear infinite; } @keyframes tourne { to { transform: translate(-50%, -58%) rotate(360deg); } } .atout-lin { background: var(--lin); color: var(--noir); } .atout-lin .pastille { background: rgba(255,255,255,.55); } .atout-lin p { color: var(--brun); opacity: 1; } .atout-points { position: absolute; inset: 0; background-image: radial-gradient(rgba(255,255,255,.95) 1.3px, transparent 1.6px); background-size: 11px 11px; mask-image: radial-gradient(ellipse 60% 70% at 62% 45%, #000 30%, transparent 75%); } .atout-points .centre { position: absolute; left: 62%; top: 45%; width: 12px; height: 12px; margin: -6px; border-radius: 50%; background: var(--brun); } .atout-points .onde { position: absolute; left: 62%; top: 45%; width: 12px; height: 12px; margin: -6px; border-radius: 50%; border: 1px solid var(--brun); animation: onde 4.5s ease-out infinite; } .atout-points .onde:nth-child(2) { animation-delay: 1.5s; } .atout-points .onde:nth-child(3) { animation-delay: 3s; } @keyframes onde { from { transform: scale(1); opacity: .8; } to { transform: scale(18); opacity: 0; } } .atout-sombre { background: linear-gradient(170deg, #2C251E 0%, var(--nuit-2) 55%, var(--nuit) 100%); } .atout-reseau { position: absolute; top: 48%; left: 50%; width: 62%; transform: translate(-50%, -62%); } .atout-reseau .grille-points circle { fill: rgba(255,255,255,.35); } .atout-reseau .liens line { stroke: rgba(255,255,255,.75); stroke-width: .8; } .atout-reseau .noeud { fill: var(--blanc); } /* ========================================================== ACCOMPAGNEMENTS ========================================================== */ .cas { padding: 120px 0 130px; border-top: 1px solid var(--lin); } .cas-tete { display: flex; justify-content: space-between; align-items: flex-end; gap: 30px; margin-bottom: 52px; } .cas-defilement { overflow-x: auto; scrollbar-width: none; scroll-snap-type: x mandatory; padding-left: max(var(--gouttiere), calc((100vw - var(--largeur)) / 2 + var(--gouttiere))); scroll-padding-left: max(var(--gouttiere), calc((100vw - var(--largeur)) / 2 + var(--gouttiere))); } .cas-defilement::-webkit-scrollbar { display: none; } .cas-piste { display: flex; gap: 14px; width: max-content; padding-right: var(--gouttiere); } .carte-cas { position: relative; width: 340px; height: 430px; border-radius: var(--rayon); overflow: hidden; scroll-snap-align: start; color: var(--blanc); display: flex; flex-direction: column; justify-content: flex-end; padding: 22px; } .carte-cas img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s cubic-bezier(.2,.6,.2,1); } .carte-cas:hover img { transform: scale(1.05); } .carte-cas::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(16,13,10,.25) 0%, rgba(16,13,10,0) 35%, rgba(16,13,10,.82) 100%); } .etiquette { position: absolute; z-index: 2; top: 18px; left: 18px; display: inline-flex; align-items: center; gap: 8px; padding: 4px 12px 4px 4px; border-radius: var(--rayon-pilule); background: rgba(255,255,255,.16); backdrop-filter: blur(8px); font-size: 11.5px; } .etiquette b { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: rgba(16,13,10,.55); font-size: 8.5px; font-weight: 600; letter-spacing: .02em; } .carte-cas-texte { position: relative; z-index: 2; } .carte-cas h3 { color: var(--blanc); font-size: 17px; font-weight: 500; letter-spacing: -0.01em; } .carte-cas p { font-size: 12.5px; margin-top: 6px; color: rgba(255,255,255,.82); } .cas-pied { display: flex; align-items: center; gap: 30px; margin-top: 36px; } .cas-progression { flex: 1; height: 2px; background: var(--lin); position: relative; overflow: hidden; } .cas-progression span { position: absolute; left: 0; top: 0; bottom: 0; width: 25%; background: var(--sable); transition: transform .2s linear, width .2s; } .cas-fleches { display: flex; gap: 8px; } .cas-fleches button { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--lin); background: transparent; color: var(--noir); font-size: 18px; line-height: 1; display: grid; place-items: center; transition: background .2s, border-color .2s; } .cas-fleches button:hover { background: var(--blanc); border-color: var(--blanc); } .cas-pause svg { width: 12px; height: 12px; fill: var(--noir); } .cas-pause .icone-lecture, .cas.est-en-pause .cas-pause .icone-pause { display: none; } .cas.est-en-pause .cas-pause .icone-lecture { display: block; } /* ========================================================== FAQ ========================================================== */ .faq { padding: 110px 0 130px; border-top: 1px solid var(--lin); } .faq-grille { display: grid; grid-template-columns: 1fr 2fr; gap: 0 6%; } .faq-gauche { display: flex; flex-direction: column; justify-content: space-between; gap: 50px; } .faq-encart { max-width: 250px; padding: 22px; border-radius: var(--rayon); background: var(--nacre-fonce); } .faq-encart p { font-size: 13px; color: var(--sable); margin-bottom: 22px; } .faq-filtres { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 22px; } .faq-filtre { border: 0; padding: 9px 18px; border-radius: var(--rayon-pilule); background: var(--nacre-fonce); color: var(--brun); font-size: 13px; font-weight: 500; transition: background .2s, color .2s; } .faq-filtre:hover { background: var(--lin); } .faq-filtre.est-actif { background: var(--noir); color: var(--blanc); } .faq-item { border-bottom: 1px solid var(--lin); } .faq-item.est-masque { display: none; } .faq-item summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 30px; padding: 24px 0; font-size: 16px; color: var(--noir); } .faq-item summary::-webkit-details-marker { display: none; } .plus { flex: none; position: relative; width: 26px; height: 26px; border-radius: 50%; background: var(--noir); transition: background .25s ease, transform .35s ease; } .plus::before, .plus::after { content: ''; position: absolute; left: 50%; top: 50%; width: 10px; height: 1.5px; margin: -0.75px 0 0 -5px; background: var(--blanc); transition: transform .35s ease; } .plus::after { transform: rotate(90deg); } .faq-item[open] .plus { background: var(--cuivre); transform: rotate(180deg); } .faq-item[open] .plus::after { transform: rotate(0deg); } .faq-item p { padding: 0 60px 26px 0; font-size: 14px; color: var(--sable); max-width: 620px; } .faq-item p a { color: var(--cuivre); font-weight: 500; } /* ========================================================== APPEL À L'ACTION ========================================================== */ .appel { position: relative; overflow: hidden; min-height: 600px; display: flex; align-items: center; color: var(--blanc); background: var(--nuit); } .appel-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: blur(5px) saturate(.9); transform: scale(1.08); } .appel::before { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(16,13,10,.86) 0%, rgba(16,13,10,.55) 50%, rgba(16,13,10,.25) 100%), linear-gradient(0deg, rgba(16,13,10,.6), rgba(16,13,10,0) 45%); } .appel-contenu { position: relative; z-index: 2; width: 100%; } .appel h2 { color: var(--blanc); font-size: clamp(30px, 3.2vw, 44px); line-height: 1.16; letter-spacing: -0.02em; margin-bottom: 20px; } .appel-texte { max-width: 470px; margin-bottom: 36px; color: rgba(255,255,255,.8); } .appel-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px; } .appel-lien { font-size: 14px; color: var(--blanc); text-decoration: underline; text-underline-offset: 3px; } /* ========================================================== PIED DE PAGE ========================================================== */ .pied { position: relative; overflow: hidden; color: var(--blanc); padding: 76px 0 40px; background: radial-gradient(ellipse 45% 65% at 0% 0%, rgba(150,140,127,.55), rgba(150,140,127,0) 70%), radial-gradient(ellipse 40% 60% at 100% 100%, rgba(150,140,127,.5), rgba(150,140,127,0) 70%), linear-gradient(170deg, #3A3027 0%, var(--nuit-2) 40%, var(--nuit) 75%, #2C251E 100%); } .pied-trame { mask-image: linear-gradient(160deg, transparent 30%, #000 70%); } .pied-grille { position: relative; display: grid; grid-template-columns: 2fr 1fr 1fr 1.3fr; gap: 40px; padding-bottom: 180px; } .pied-grille .logo { align-self: start; } .pied-col h4 { color: var(--blanc); font-size: 14px; font-weight: 500; margin-bottom: 18px; } .pied-col ul { display: grid; gap: 10px; } .pied-col li { font-size: 13px; color: rgba(255,255,255,.75); } .pied-col a:hover { color: var(--blanc); } .souligne { text-decoration: underline; text-underline-offset: 3px; } .pied-bas { position: relative; display: flex; justify-content: space-between; align-items: center; gap: 20px; font-size: 13px; color: rgba(255,255,255,.75); } .haut-de-page { display: inline-flex; gap: 8px; color: var(--blanc); } /* ========================================================== PAGES INTÉRIEURES — tête de page ========================================================== */ .bandeau-page { position: relative; overflow: hidden; color: var(--blanc); text-align: center; min-height: 72vh; min-height: 72svh; display: flex; align-items: center; justify-content: center; padding: 150px 0 100px; } .bandeau-page-contenu { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; } .bandeau-page-surtitre { margin-bottom: 22px; font-size: 13px; color: rgba(255,255,255,.62); } .bandeau-page-titre { max-width: 900px; color: var(--blanc); font-size: clamp(36px, 3.8vw, 56px); line-height: 1.1; letter-spacing: -0.03em; } .bandeau-page-titre em { font-style: normal; color: var(--lin); } .bandeau-page-intro { max-width: 560px; margin-top: 24px; color: rgba(255,255,255,.7); } .bandeau-page-liens { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 34px; } .pastille-lien { padding: 9px 18px; border-radius: var(--rayon-pilule); border: 1px solid rgba(255,255,255,.28); color: var(--blanc); font-size: 13px; transition: background .2s, border-color .2s; } .pastille-lien:hover { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.5); } /* puces de mots-clés, partagées */ .puces { display: flex; flex-wrap: wrap; gap: 8px; } .puces li { padding: 6px 14px; border-radius: var(--rayon-pilule); background: var(--nacre-fonce); color: var(--brun); font-size: 12.5px; } .citation-courte { min-height: 70vh; } /* ---------- services : une section par expertise ---------- */ .expertise { padding: 120px 0; scroll-margin-top: 0; } .expertise-fonce { background: var(--nacre-fonce); } .expertise-fonce .puces li { background: var(--nacre); } .expertise-grille { display: grid; grid-template-columns: 5fr 7fr; gap: 0 7%; align-items: start; } .expertise-intro { position: sticky; top: 100px; } .expertise-accroche { max-width: 440px; margin: 24px 0 30px; color: var(--sable); } .expertise-visuel { margin: 0 0 30px; aspect-ratio: 4 / 3; border-radius: var(--rayon); overflow: hidden; } .expertise-visuel img { width: 100%; height: 100%; object-fit: cover; } .axe { display: grid; grid-template-columns: 56px 1fr; gap: 0 18px; padding: 34px 0; border-top: 1px solid var(--lin); } .axe:last-child { border-bottom: 1px solid var(--lin); } .axe-num { padding-top: 6px; font-size: 13px; color: var(--pierre); } .axe h3 { font-size: clamp(20px, 1.7vw, 24px); line-height: 1.3; letter-spacing: -0.015em; } .axe p { max-width: 560px; margin: 12px 0 18px; font-size: 14px; color: var(--sable); } .expertise-plus { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 40px; } .expertise-plus div { padding: 22px; border-radius: var(--rayon); background: var(--nacre-fonce); } .expertise-fonce .expertise-plus div { background: var(--nacre); } .expertise-plus h4 { margin-bottom: 8px; font-size: 15px; font-weight: 500; } .expertise-plus p { font-size: 13px; color: var(--sable); } /* ---------- à propos ---------- */ .apropos-page { padding-bottom: 130px; } .apropos-page .apropos-corps { border-bottom: 0; padding-bottom: 0; margin-bottom: 0; } .apropos-page .apropos-corps + .apropos-corps { margin-top: 16px; } .apropos-page .puces { margin: 28px 0 0 6px; } .approche { padding: 120px 0; background: var(--nacre-fonce); } .approche-grille { display: grid; grid-template-columns: 5fr 7fr; gap: 0 7%; align-items: start; } .approche-corps { max-width: 440px; margin-top: 24px; color: var(--sable); } .engagements { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .engagement { display: flex; flex-direction: column; justify-content: space-between; gap: 40px; min-height: 190px; padding: 24px; border-radius: var(--rayon); background: var(--nacre); } .engagement h3 { font-size: 18px; line-height: 1.35; letter-spacing: -0.01em; } .engagement .pastille { position: static; background: var(--nacre-fonce); color: var(--noir); } .valeurs { padding: 120px 0 130px; } .valeurs-tete { margin-bottom: 56px; } .valeurs-grille { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0 28px; } .valeur { padding-top: 26px; border-top: 1px solid var(--lin); } .valeur-num { display: block; margin-bottom: 40px; font-size: 13px; color: var(--pierre); } .valeur h3 { font-size: 20px; letter-spacing: -0.015em; } .valeur p { margin-top: 10px; font-size: 13.5px; color: var(--sable); } /* ---------- blog ---------- */ .articles { padding: 120px 0 130px; } .articles-tete { display: flex; justify-content: space-between; align-items: flex-end; gap: 30px; margin-bottom: 52px; } .articles-grille { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px 24px; } .carte-article a { display: block; } .carte-article-visuel { aspect-ratio: 2 / 1; border-radius: var(--rayon); overflow: hidden; background: var(--nuit); } .carte-article-defaut { display: grid; place-items: center; background: radial-gradient(ellipse 60% 80% at 100% 100%, rgba(150,140,127,.55), rgba(150,140,127,0) 70%), linear-gradient(160deg, #2A231C 0%, var(--nuit-2) 55%, #3B3128 100%); } .carte-article-defaut svg { width: 34%; height: auto; fill: none; stroke: rgba(255,255,255,.4); stroke-width: 1.4; } .carte-article-defaut svg circle:last-child { fill: rgba(255,255,255,.6); stroke: none; } .carte-article-visuel img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s cubic-bezier(.2,.6,.2,1); } .carte-article a:hover img { transform: scale(1.05); } .carte-article-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 12px 0; font-size: 14px; color: var(--sable); } .carte-article-meta .categorie { padding: 4px 12px; border-radius: var(--rayon-pilule); background: var(--nacre-fonce); color: var(--brun); font-weight: 500; } .carte-article h3 { font-size: 21px; line-height: 1.3; letter-spacing: -0.015em; } .carte-article p { margin-top: 12px; font-size: 14px; color: var(--sable); } .carte-article .lien-fleche { margin-top: 18px; } /* ---------- article (modèle d'un article de blog) ---------- */ .bandeau-article { min-height: 60vh; min-height: 60svh; } .bandeau-article-titre { font-size: clamp(30px, 3.2vw, 48px); } .retour-articles { display: inline-flex; gap: 8px; margin-bottom: 28px; font-size: 13px; color: rgba(255,255,255,.75); } .retour-articles:hover { color: var(--blanc); } a:hover .fleche-retour { transform: translateX(-4px); } .article { padding: 90px 0 110px; } .article-contenu { max-width: 768px; font-size: 17px; line-height: 1.75; } /* l'espacement vaut aussi dans les blocs imbriqués (certains articles enveloppent tout leur texte) */ .article-contenu * + :is(p, ul, ol, table, blockquote, figure, div) { margin-top: 1.1em; } .article-contenu h2 { margin-top: 2.2em; font-size: clamp(24px, 2.2vw, 30px); line-height: 1.25; letter-spacing: -0.02em; } .article-contenu h3 { margin-top: 1.8em; font-size: 21px; line-height: 1.3; letter-spacing: -0.01em; } .article-contenu h4 { margin-top: 1.6em; font-size: 18px; font-weight: 500; } .article-contenu :is(h2, h3, h4) + * { margin-top: .6em; } .article-contenu ul { list-style: disc; padding-left: 1.3em; } .article-contenu ol { list-style: decimal; padding-left: 1.3em; } .article-contenu li + li { margin-top: .4em; } .article-contenu li::marker { color: var(--cuivre); } .article-contenu a { color: var(--cuivre); text-decoration: underline; text-underline-offset: 3px; } .article-contenu :is(strong, b) { color: var(--noir); font-weight: 600; } .article-contenu figure:not(.wp-block-table) { margin: 2em 0; } /* tableau en bloc natif (figure.wp-block-table) : mêmes marges qu'un tableau nu, comme dans le thème */ .article-contenu .wp-block-table { margin: 0; font-size: 14.5px; } .article-contenu * + .wp-block-table { margin-top: 1.1em; } .article-contenu :is(h2, h3, h4) + .wp-block-table { margin-top: .6em; } .article-contenu img { height: auto; border-radius: var(--rayon); } .article-contenu figcaption { margin-top: 10px; font-size: 13px; color: var(--pierre); text-align: center; } .article-contenu blockquote { margin: 2em 0; padding-left: 24px; border-left: 2px solid var(--cuivre); font-size: 19px; color: var(--noir); } .article-contenu table { width: 100%; border-collapse: collapse; font-size: 14.5px; } .article-contenu :is(th, td) { padding: 10px 12px; border-bottom: 1px solid var(--lin); text-align: left; vertical-align: top; } .article-contenu th { color: var(--noir); font-weight: 600; } .article-contenu hr { margin: 2.5em 0; border: 0; border-top: 1px solid var(--lin); } /* classes posées par l'éditeur WordPress dans le contenu des articles */ .article-contenu .has-text-align-center { text-align: center; } .article-contenu .has-text-align-justify { text-align: justify; } .article-contenu .has-large-font-size { font-size: 1.3em; } .article-contenu .wp-block-columns { display: flex; flex-wrap: wrap; gap: 24px; } .article-contenu .wp-block-column { flex: 1 1 240px; } .article-contenu thead th { background: var(--nacre-fonce); } /* ---------- pages légales ---------- */ .bandeau-legal { min-height: 46vh; min-height: 46svh; padding: 140px 0 70px; } .mise-a-jour { font-size: 14px; color: var(--pierre); } /* repère de maquette : texte encore à fournir, ne doit jamais partir en ligne */ .a-completer { padding: 20px 22px; border: 1.5px dashed var(--cuivre); border-radius: var(--rayon); background: rgba(182,90,58,.06); color: var(--cuivre); font-size: 15px; } .article-pied { max-width: 768px; margin-top: 60px; padding-top: 30px; border-top: 1px solid var(--lin); } .articles-suite { background: var(--nacre-fonce); } .articles-suite .carte-article-meta .categorie { background: var(--nacre); } /* ---------- contact ---------- */ .contact { padding: 120px 0 130px; } .contact-grille { display: grid; grid-template-columns: 5fr 7fr; gap: 0 7%; align-items: start; } .contact-ligne { padding: 24px 0; border-top: 1px solid var(--lin); } .contact-etiquette { margin-bottom: 6px; font-size: 13px; color: var(--pierre); } .contact-valeur { font-size: 17px; line-height: 1.5; color: var(--noir); } .contact-valeur a:hover { color: var(--cuivre); } .contact-ligne .contact-detail { margin-top: 6px; font-size: 14px; color: var(--sable); } .contact-audit { margin-top: 30px; padding: 28px; border-radius: var(--rayon); background: var(--brun); color: var(--blanc); } .contact-audit h2 { color: var(--blanc); font-size: 20px; letter-spacing: -0.01em; } .contact-audit p { margin: 8px 0 22px; font-size: 14px; color: rgba(255,255,255,.75); } .contact-carte { padding: 44px 40px 40px; border-radius: var(--rayon); background: var(--nacre-fonce); } .contact-intro { margin: 12px 0 28px; font-size: 14px; color: var(--sable); } .contact-formulaire { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 14px; } .champ-large { grid-column: 1 / -1; } .champ textarea { width: 100%; min-height: 170px; padding: 14px 18px; border: 1px solid var(--lin); border-radius: var(--rayon); background: var(--blanc); color: var(--noir); font: inherit; font-size: 14px; resize: vertical; } .champ textarea:focus { outline: none; border-color: var(--cuivre); box-shadow: 0 0 0 3px rgba(182,90,58,.15); } .contact-formulaire .audit-mention { grid-column: 1 / -1; } .contact-formulaire .bouton { grid-column: 1 / -1; justify-self: start; border: 0; } .contact-merci { display: none; } .contact-merci p { margin: 12px 0 0; font-size: 14px; color: var(--sable); } .contact-carte.est-envoye .contact-formulaire, .contact-carte.est-envoye .contact-intro { display: none; } .contact-carte.est-envoye .contact-merci { display: block; } /* ---------- contact : prise de rendez-vous (Calendly) ---------- */ .rendez-vous { padding: 110px 0 130px; background: var(--nacre-fonce); scroll-margin-top: 0; } .rendez-vous-grille { display: grid; grid-template-columns: 5fr 7fr; gap: 0 7%; align-items: start; } .rendez-vous-texte { position: sticky; top: 100px; } .rendez-vous-corps { max-width: 420px; margin-top: 24px; color: var(--sable); } .rendez-vous-cadre { min-height: 760px; border-radius: var(--rayon); overflow: hidden; background: var(--blanc); } .rendez-vous-cadre iframe { display: block; width: 100%; height: 760px; border: 0; } .rendez-vous-cadre .a-completer { margin: 24px; } /* ========================================================== AUDIT GRATUIT (fenêtre) ========================================================== */ .audit { position: fixed; inset: 0; z-index: 40; display: grid; place-items: center; padding: 16px; background: rgba(16,13,10,.62); backdrop-filter: blur(6px); opacity: 0; visibility: hidden; transition: opacity .3s ease, visibility .3s; } body.audit-ouvert { overflow: hidden; } body.audit-ouvert .audit { opacity: 1; visibility: visible; } .audit-carte { position: relative; width: 100%; max-width: 580px; max-height: calc(100vh - 32px); max-height: calc(100svh - 32px); overflow-y: auto; padding: 44px 40px 36px; border-radius: var(--rayon); background: var(--nacre); transform: translateY(16px); transition: transform .35s ease; } body.audit-ouvert .audit-carte { transform: none; } .audit-croix { position: absolute; top: 16px; right: 16px; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--lin); background: transparent; color: var(--noir); font-size: 20px; line-height: 1; display: grid; place-items: center; transition: background .2s, border-color .2s; } .audit-croix:hover { background: var(--blanc); border-color: var(--blanc); } .audit .surtitre { margin-bottom: 14px; } .audit-titre, .contact-titre { font-size: clamp(26px, 2.4vw, 32px); line-height: 1.15; letter-spacing: -0.02em; } .audit-intro { margin: 12px 0 28px; font-size: 14px; color: var(--sable); } .audit-formulaire { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 14px; } .champ { display: grid; gap: 7px; font-size: 13px; color: var(--sable); } .champ input { width: 100%; padding: 12px 18px; border: 1px solid var(--lin); border-radius: var(--rayon-pilule); background: var(--blanc); color: var(--noir); font: inherit; font-size: 14px; } .champ input:focus { outline: none; border-color: var(--cuivre); box-shadow: 0 0 0 3px rgba(182,90,58,.15); } .audit-services { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 0; padding: 0; border: 0; } .audit-services legend { padding: 0; margin-bottom: 10px; font-size: 13px; color: var(--sable); } .audit-choix { position: relative; } .audit-choix input { position: absolute; opacity: 0; width: 1px; height: 1px; } .audit-choix span { display: inline-block; padding: 9px 16px; border-radius: var(--rayon-pilule); background: var(--nacre-fonce); color: var(--brun); font-size: 13px; font-weight: 500; cursor: pointer; transition: background .2s, color .2s; } .audit-choix span:hover { background: var(--lin); } .audit-choix input:checked + span { background: var(--noir); color: var(--blanc); } .audit-choix input:focus-visible + span { outline: 2px solid var(--cuivre); outline-offset: 2px; } .audit-mention { grid-column: 1 / -1; font-size: 12px; color: var(--pierre); } .audit-mention a { color: var(--brun); text-decoration: underline; text-underline-offset: 2px; } .audit-formulaire .bouton { grid-column: 1 / -1; justify-self: start; border: 0; } .audit-merci { display: none; } .audit-merci p { margin: 12px 0 28px; font-size: 14px; color: var(--sable); } .audit.est-envoye .audit-zone { display: none; } .audit.est-envoye .audit-merci { display: block; } /* ========================================================== APPARITIONS ========================================================== */ .revele { opacity: 0; transform: translateY(24px); filter: blur(6px); transition: opacity 1s ease, transform 1s ease, filter 1s ease; } .revele.est-visible { opacity: 1; transform: none; filter: none; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } .revele { opacity: 1; transform: none; filter: none; } } /* ========================================================== RESPONSIVE ========================================================== */ @media (max-width: 960px) { .apropos-grille, .methode-grille, .faq-grille { grid-template-columns: 1fr; gap: 50px; } .apropos-texte { padding-left: 0; } .methode-intro { position: static; } .services-grille { grid-template-columns: 1fr; grid-template-rows: auto; gap: 40px; padding-top: 50px; min-height: 0; } .services-figure { justify-self: center; width: 160px; height: 160px; order: -1; } .services-lien { order: 5; } .atouts-grille { grid-template-columns: 1fr 1fr; grid-template-rows: none; grid-auto-rows: 300px; } .pied-grille { grid-template-columns: 1fr 1fr; padding-bottom: 80px; } .pied-grille .logo { grid-column: 1 / -1; } .faq-encart { max-width: none; } .menu-grille { grid-template-columns: 1fr; } .expertise-grille, .approche-grille, .contact-grille, .rendez-vous-grille { grid-template-columns: 1fr; gap: 50px; } .rendez-vous-texte { position: static; } .expertise-intro { position: static; } .expertise-visuel { max-width: 560px; } .valeurs-grille { grid-template-columns: 1fr 1fr; gap: 40px 28px; } .articles-grille { grid-template-columns: 1fr 1fr; } } @media (max-width: 600px) { :root { --gouttiere: 18px; } .entete-baseline { display: none; } .entete-ligne { grid-template-columns: 1fr auto; } .apropos { padding-top: 90px; } .bandeau { margin-top: 80px; } .bandeau-piste span { font-size: 22px; } .services, .methode, .cas, .faq { padding-top: 80px; padding-bottom: 90px; } .atouts { padding-bottom: 90px; } .atouts-grille { grid-template-columns: 1fr; } .atout-large { grid-column: auto; } .carte-etape { min-height: 300px; padding: 24px; } .cas-tete { flex-direction: column; align-items: flex-start; } .carte-cas { width: 260px; height: 340px; } .faq-item summary { font-size: 15px; } .faq-item p { padding-right: 0; } .appel { min-height: 520px; } .audit-carte { padding: 40px 22px 28px; } .audit-formulaire, .contact-formulaire { grid-template-columns: 1fr; } .bandeau-page { min-height: 64svh; padding: 130px 0 80px; } .expertise, .approche, .valeurs, .articles, .contact, .rendez-vous { padding-top: 80px; padding-bottom: 90px; } .rendez-vous-cadre iframe { height: 1000px; } .apropos-page { padding-bottom: 90px; } .axe { grid-template-columns: 1fr; gap: 10px; } .expertise-plus, .engagements, .valeurs-grille, .articles-grille { grid-template-columns: 1fr; } .engagement { min-height: 0; } .valeur-num { margin-bottom: 16px; } .articles-tete { flex-direction: column; align-items: flex-start; } .contact-carte { padding: 32px 22px 28px; } .article { padding: 60px 0 80px; } .article-contenu { font-size: 16px; } .article-contenu table { display: block; overflow-x: auto; } .bouton-petit { padding: 9px 14px; } .entete-actions { gap: 8px; } .pied-grille { grid-template-columns: 1fr; } .pied-bas { flex-direction: column; align-items: flex-start; } } /* ========================================================================== ADAPTATIONS AU BALISAGE DES BLOCS WORDPRESS La feuille de la maquette ci-dessus reste intacte. Ici, uniquement ce que le passage en blocs natifs change : enveloppes de boutons, figures d'images, icônes SVG devenues masques, calques décoratifs devenus pseudo-éléments. Rappel (blocs-gutenberg.md) : le CSS des blocs est imprimé APRÈS cette feuille ; toute surcharge d'un style de bloc doit être plus spécifique. ========================================================================== */ /* ---------- marges des derniers enfants ---------- WordPress annule la marge basse du dernier enfant d'un groupe (:root :where(.is-layout-flow) > :last-child, spécificité 0,2,0) : les composants qui en portent une la reprennent ici, plus spécifiques. */ .cas > .enveloppe > .cas-tete { margin-bottom: 52px; } /* les « paragraphes » qui n'en sont pas dans la maquette (étiquettes, numéros) échappent aux styles de texte voisins */ .carte-cas > p.etiquette { margin: 0; font-size: 11.5px; color: inherit; } .axe > p.axe-num { margin: 0; padding-top: 6px; font-size: 13px; color: var(--pierre); max-width: none; } .valeur > p.valeur-num { margin: 0 0 40px; font-size: 13px; color: var(--pierre); } /* ---------- socle ---------- */ img { height: auto; } /* sinon l'attribut height des blocs image l'emporte sur aspect-ratio */ /* l'espacement automatique est coupé dans theme.json (blockGap 0) ; filet à spécificité nulle */ :where(.wp-block-group) > :where(*), :where(.wp-block-buttons) { margin-block: 0; } figure.wp-block-image { margin: 0; } .wp-block-buttons { gap: 0; } .wp-site-blocks > * + * { margin-block-start: 0; } /* ---------- boutons : la classe est sur l'enveloppe, le style va sur le lien ---------- */ .wp-block-button[class*="bouton-"] { display: inline-block; background: none; border: 0; padding: 0; border-radius: 0; color: inherit; } .wp-block-button .wp-block-button__link { display: inline-flex; align-items: center; gap: 12px; padding: 13px 26px; border-radius: var(--rayon-pilule); border: 0; font-size: 14px; font-weight: 500; line-height: 1; text-decoration: none; transition: background .25s ease, color .25s ease, border-color .25s ease; } .wp-block-button.bouton-cuivre .wp-block-button__link { background: var(--cuivre); color: var(--blanc); } .wp-block-button.bouton-cuivre .wp-block-button__link:hover { background: var(--cuivre-fonce); } .wp-block-button.bouton-noir .wp-block-button__link { background: var(--noir); color: var(--blanc); } .wp-block-button.bouton-noir .wp-block-button__link:hover { background: var(--brun); } .wp-block-button.bouton-contour .wp-block-button__link { background: transparent; color: var(--noir); border: 1px solid var(--noir); padding: 12px 28px; } .wp-block-button.bouton-contour .wp-block-button__link:hover { background: var(--noir); color: var(--blanc); } .wp-block-button.bouton-petit .wp-block-button__link { padding: 10px 18px; font-size: 13px; } /* flèches : pseudo-éléments, un à classe dans un bouton serait invalidé par l'éditeur */ .wp-block-button.avec-fleche .wp-block-button__link::after { content: '→'; display: inline-block; transition: transform .25s ease; } .wp-block-button.avec-fleche .wp-block-button__link:hover::after { transform: translateX(4px); } .wp-block-button.retour .wp-block-button__link::before { content: '←'; display: inline-block; transition: transform .25s ease; } .wp-block-button.retour .wp-block-button__link:hover::before { transform: translateX(-4px); } .lien-fleche a, a.lien-fleche, .services-lien a, .appel-lien a { display: inline-flex; gap: 10px; } .lien-fleche a::after, a.lien-fleche::after, .services-lien a::after { content: '→'; display: inline-block; transition: transform .25s ease; } .lien-fleche a:hover::after, a.lien-fleche:hover::after, .services-lien a:hover::after { transform: translateX(4px); } p.lien-fleche { display: block; } /* ---------- logo (bloc Titre du site) : le sigle devient un masque ---------- */ .logo { margin: 0; font-size: 16px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.6; } .logo a { display: inline-flex; align-items: center; gap: 10px; color: var(--blanc); text-decoration: none; } .logo a::before { content: ''; flex: none; width: 26px; height: 26px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none' stroke='%23000' stroke-width='1.8'%3E%3Ccircle cx='12' cy='18' r='8.5'/%3E%3Ccircle cx='20' cy='12' r='8.5'/%3E%3Ccircle cx='16' cy='15' r='2' fill='%23000' stroke='none'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none' stroke='%23000' stroke-width='1.8'%3E%3Ccircle cx='12' cy='18' r='8.5'/%3E%3Ccircle cx='20' cy='12' r='8.5'/%3E%3Ccircle cx='16' cy='15' r='2' fill='%23000' stroke='none'/%3E%3C/svg%3E") center / contain no-repeat; } /* ---------- en-tête ---------- */ .admin-bar .entete { top: 32px; } .entete-baseline { margin: 0; } p.burger { position: relative; width: 40px; height: 40px; margin: 0; font-size: 0; color: transparent; cursor: pointer; user-select: none; } p.burger::before, p.burger::after { content: ''; position: absolute; left: 9px; width: 22px; height: 1.5px; background: var(--blanc); transition: transform .3s ease; } p.burger::before { top: 15.25px; } p.burger::after { top: 23.75px; } body.menu-ouvert p.burger::before { transform: translateY(4.25px) rotate(45deg); } body.menu-ouvert p.burger::after { transform: translateY(-4.25px) rotate(-45deg); } /* menu : bloc Navigation, styles du bloc à dépasser en spécificité */ .menu .wp-block-navigation.menu-liens { display: block; } .menu .wp-block-navigation.menu-liens .wp-block-navigation__container { display: block; gap: 0; } .menu .wp-block-navigation.menu-liens .wp-block-navigation-item { display: block; } .menu .wp-block-navigation.menu-liens .wp-block-navigation-item__content { display: block; padding: 0; color: var(--blanc); text-decoration: none; font-size: clamp(26px, 2.8vw, 38px); font-weight: 300; letter-spacing: -0.015em; line-height: 1.35; transition: color .2s, padding .3s; } .menu .wp-block-navigation.menu-liens .wp-block-navigation-item__content:hover { color: var(--lin); padding-left: 14px; text-decoration: none; } .menu .wp-block-navigation.menu-liens .wp-block-navigation-item__content[aria-current="page"] { color: var(--lin); } .menu-contact p { margin: 0; } /* ---------- héros : les calques vides deviennent des pseudo-éléments ---------- */ .hero-accueil::before, .bandeau-page::before, .pied::before { content: ''; position: absolute; inset: 0; pointer-events: none; background-image: radial-gradient(rgba(255,255,255,.09) 0.8px, transparent 1px); background-size: 4px 4px; -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,.5), #000 70%); mask-image: linear-gradient(180deg, rgba(0,0,0,.5), #000 70%); } .pied::before { -webkit-mask-image: linear-gradient(160deg, transparent 30%, #000 70%); mask-image: linear-gradient(160deg, transparent 30%, #000 70%); } /* les traits lumineux du héros : huit dégradés sur un seul calque */ .hero-accueil::after { content: ''; position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.75), rgba(255,255,255,0)), linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.75), rgba(255,255,255,0)), linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.75), rgba(255,255,255,0)), linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.75), rgba(255,255,255,0)), linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.75), rgba(255,255,255,0)), linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.75), rgba(255,255,255,0)), linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.75), rgba(255,255,255,0)), linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.75), rgba(255,255,255,0)); background-repeat: no-repeat; background-size: 220px 1px, 120px 1px, 260px 1px, 90px 1px, 180px 1px, 140px 1px, 70px 1px, 240px 1px; animation: traits-heros 12s linear infinite; } @keyframes traits-heros { from { background-position: -30vw 14%, -75vw 26%, -50vw 37%, -100vw 52%, -60vw 63%, -115vw 74%, -85vw 21%, -130vw 82%; } to { background-position: 130vw 14%, 85vw 26%, 110vw 37%, 60vw 52%, 100vw 63%, 45vw 74%, 75vw 21%, 30vw 82%; } } .hero-contenu .wp-block-buttons { justify-content: center; } .hero-sous-titre { margin: 26px 0 30px; } .hero-defiler { margin: 0; } .hero-defiler a { display: inline-flex; gap: 8px; color: rgba(255,255,255,.85); } .hero-defiler a::after { content: '↓'; display: inline-block; animation: rebond 2.2s ease-in-out infinite; } /* ---------- images en fond de carte : la figure prend la place de l'img ---------- */ .apropos-visuel.wp-block-image img, .carte-etape > figure.wp-block-image img, .atout-photo > figure.wp-block-image img, .carte-cas > figure.wp-block-image img, .appel > figure.appel-photo img, .expertise-visuel.wp-block-image img { width: 100%; height: 100%; object-fit: cover; } .carte-etape > figure.wp-block-image, .atout-photo > figure.wp-block-image, .carte-cas > figure.wp-block-image { position: absolute; inset: 0; z-index: 0; margin: 0; overflow: hidden; } .atout-photo > figure.wp-block-image img { transition: transform 1.2s cubic-bezier(.2,.6,.2,1); } .atout-photo:hover > figure.wp-block-image img, .carte-cas:hover > figure.wp-block-image img { transform: scale(1.05); } .carte-cas > figure.wp-block-image img { transition: transform 1.2s cubic-bezier(.2,.6,.2,1); } .appel > figure.appel-photo { position: absolute; inset: 0; margin: 0; } .apropos-visuel.wp-block-image img { filter: saturate(.8) brightness(.78); transform: scale(1.06); } .expertise-visuel.wp-block-image { margin: 0 0 30px; } /* tracé sur la photo de l'à-propos : SVG devenu calque */ .apropos-visuel::after { content: ''; position: absolute; inset: 9%; pointer-events: none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 400' fill='none'%3E%3Cg stroke='rgba(255,255,255,.88)' stroke-width='1.2'%3E%3Ccircle cx='160' cy='230' r='120'/%3E%3Ccircle cx='240' cy='170' r='120'/%3E%3C/g%3E%3Ccircle cx='200' cy='200' r='14' fill='rgba(255,255,255,.9)'/%3E%3Cg stroke='rgba(255,255,255,.35)' stroke-width='1.2' stroke-dasharray='2 6'%3E%3Ccircle cx='160' cy='230' r='70'/%3E%3Ccircle cx='240' cy='170' r='70'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat; } .apropos-corps + .apropos-corps { margin-top: 16px; } /* ---------- bandeau défilant : liste à puces, les doublons servent à la boucle ---------- */ .bandeau-piste li { display: flex; align-items: center; gap: 46px; font-size: 28px; font-weight: 500; letter-spacing: -0.02em; color: var(--lin); white-space: nowrap; } .bandeau-piste li::after { content: ''; width: 9px; height: 9px; border: 1.5px solid var(--lin); border-radius: 50%; } /* ---------- citation ---------- */ .citation::before { content: ''; position: absolute; left: 50%; top: 50%; width: 520px; height: 520px; transform: translate(-50%, -50%); pointer-events: none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 400' fill='none' stroke='rgba(255,255,255,.1)' stroke-width='.8'%3E%3Ccircle cx='160' cy='230' r='120'/%3E%3Ccircle cx='240' cy='170' r='120'/%3E%3Ccircle cx='200' cy='200' r='14'/%3E%3C/svg%3E") center / contain no-repeat; } .citation .wp-block-quote { margin: 0 auto; max-width: 820px; padding: 0; border: 0; } .citation .wp-block-quote p::before { content: '“'; font-size: 1.6em; line-height: 0; vertical-align: -0.35em; margin-right: 6px; color: var(--lin); font-weight: 400; } /* ---------- services : la figure animée devient deux calques de la grille ---------- */ .services-grille > .services-liste { grid-area: 1 / 1; } .services-grille > .services-lien { grid-area: 2 / 1; margin: 0; } .services-grille > .services-descriptions { grid-area: 2 / 2; } .services-grille::before, .services-grille::after { content: ''; grid-area: 1 / 2; align-self: center; justify-self: start; width: 210px; height: 210px; pointer-events: none; } /* croix pointillée et point central, fixes */ .services-grille::before { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200' fill='none'%3E%3Cg stroke='%23968C7F' stroke-width='.9' stroke-dasharray='2 3'%3E%3Cline x1='100' y1='40' x2='100' y2='160'/%3E%3Cline x1='40' y1='100' x2='160' y2='100'/%3E%3C/g%3E%3Ccircle cx='100' cy='100' r='2.5' fill='%234F4135'/%3E%3C/svg%3E") center / contain no-repeat; } /* les trois carrés, qui tournent selon le service survolé */ .services-grille::after { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200' fill='none' stroke='%23968C7F' stroke-width='.9'%3E%3Crect x='55' y='55' width='90' height='90' transform='rotate(45 100 100)'/%3E%3Crect x='55' y='55' width='90' height='90' transform='translate(100 100) scale(.82) translate(-100 -100)'/%3E%3Crect x='65' y='65' width='70' height='70' transform='translate(100 100) rotate(45) scale(.6) translate(-100 -100)'/%3E%3C/svg%3E") center / contain no-repeat; transition: transform .8s cubic-bezier(.6,.05,.25,1); } .actif-2 .services-grille::after { transform: rotate(15deg) scale(1.08); } .actif-3 .services-grille::after { transform: rotate(45deg) scale(.86); } .actif-4 .services-grille::after { transform: rotate(-30deg) scaleX(1.18); } /* numéros des onglets : compteur CSS, un à classe serait invalidé */ .services-liste { counter-reset: service; } .service-onglet { counter-increment: service; } .service-onglet::before { content: counter(service) "."; display: inline-block; width: 0; overflow: hidden; opacity: 0; vertical-align: bottom; transition: width .35s ease, opacity .3s ease; } .service-onglet.est-actif::before { width: 1.4em; opacity: 1; } .service-desc { margin: 0; } /* ---------- méthode ---------- */ .carte-etape > figure.wp-block-image { position: absolute; } .carte-etape-haut h3 { margin: 0; } .carte-etape-haut::after { content: '↗'; font-size: 18px; line-height: 1; } /* ---------- atouts : pastilles en masques, décors en calques ---------- */ .atout { --icone: none; } .atout::before { content: ''; position: absolute; top: 20px; left: 20px; z-index: 2; width: 30px; height: 30px; border-radius: 50%; background: rgba(255,255,255,.18) var(--icone) center / 14px no-repeat; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); } .atout-clair::before { background-color: var(--nacre); } .atout-lin::before { background-color: rgba(255,255,255,.55); } .atout-icone-cible { --icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23fff' stroke-width='1.3'%3E%3Ccircle cx='8' cy='8' r='6'/%3E%3Ccircle cx='8' cy='8' r='2.5'/%3E%3C/svg%3E"); } .atout-icone-bouclier { --icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.3' stroke-linejoin='round'%3E%3Cpath d='M8 1.5 13.5 4v4c0 3.2-2.4 5.6-5.5 6.5C4.9 13.6 2.5 11.2 2.5 8V4z'/%3E%3C/svg%3E"); } .atout-icone-couches { --icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23fff' stroke-width='1.3' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpath d='M2 6 8 3l6 3-6 3z'/%3E%3Cpath d='M2 9.5 8 12.5l6-3'/%3E%3C/svg%3E"); } .atout-icone-courbe { --icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23fff' stroke-width='1.3' stroke-linecap='round'%3E%3Cpath d='M2 13c3 0 3-10 6-10s3 10 6 10'/%3E%3C/svg%3E"); } .atout-icone-repere { --icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.3' stroke-linejoin='round'%3E%3Cpath d='M8 14.5s5-4.6 5-8.5a5 5 0 0 0-10 0c0 3.9 5 8.5 5 8.5z'/%3E%3Ccircle cx='8' cy='6' r='1.8'/%3E%3C/svg%3E"); } .atout-icone-reseau { --icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23fff' stroke-width='1.3' stroke-linejoin='round' stroke-linecap='round'%3E%3Ccircle cx='4' cy='4' r='1.5'/%3E%3Ccircle cx='12' cy='5' r='1.5'/%3E%3Ccircle cx='8' cy='12' r='1.5'/%3E%3Cpath d='M4 4l4 8 4-7'/%3E%3C/svg%3E"); } .atout-texte h3 { margin: 0; } /* orbite de la carte claire */ .atout-clair::after { content: ''; position: absolute; top: 50%; left: 50%; width: 78%; aspect-ratio: 1; transform: translate(-50%, -58%); pointer-events: none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200' fill='none' stroke='%23968C7F' stroke-width='.9'%3E%3Ccircle cx='100' cy='100' r='62'/%3E%3Ccircle cx='100' cy='100' r='52' stroke-dasharray='2 5'/%3E%3Ccircle cx='100' cy='100' r='74' stroke-dasharray='1 7'/%3E%3Cellipse cx='100' cy='100' rx='74' ry='26' transform='rotate(-24 100 100)'/%3E%3C/svg%3E") center / contain no-repeat; animation: tourne 40s linear infinite; } /* trame de points et onde de la carte lin */ .atout-lin::after { content: ''; position: absolute; inset: 0; pointer-events: none; background-image: radial-gradient(rgba(255,255,255,.95) 1.3px, transparent 1.6px); background-size: 11px 11px; -webkit-mask-image: radial-gradient(ellipse 60% 70% at 62% 45%, #000 30%, transparent 75%); mask-image: radial-gradient(ellipse 60% 70% at 62% 45%, #000 30%, transparent 75%); } .atout-lin .atout-texte { position: static; } .atout-lin .atout-texte > * { position: relative; z-index: 2; } .atout-lin .atout-texte::before, .atout-lin .atout-texte::after { content: ''; position: absolute; left: 62%; top: 45%; z-index: 1; width: 12px; height: 12px; margin: -6px; border-radius: 50%; } .atout-lin .atout-texte::before { border: 1px solid var(--brun); animation: onde 4.5s ease-out infinite; } .atout-lin .atout-texte::after { background: var(--brun); } /* réseau de la carte sombre */ .atout-sombre::after { content: ''; position: absolute; top: 48%; left: 50%; width: 62%; aspect-ratio: 1; transform: translate(-50%, -62%); pointer-events: none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'%3E%3Cg fill='rgba(255,255,255,.35)'%3E%3Ccircle cx='15' cy='15' r='1.6'/%3E%3Ccircle cx='45' cy='15' r='1.6'/%3E%3Ccircle cx='75' cy='15' r='1.6'/%3E%3Ccircle cx='105' cy='15' r='1.6'/%3E%3Ccircle cx='15' cy='45' r='1.6'/%3E%3Ccircle cx='45' cy='45' r='2.6'/%3E%3Ccircle cx='75' cy='45' r='1.6'/%3E%3Ccircle cx='105' cy='45' r='2.6'/%3E%3Ccircle cx='15' cy='75' r='2.6'/%3E%3Ccircle cx='45' cy='75' r='1.6'/%3E%3Ccircle cx='105' cy='75' r='1.6'/%3E%3Ccircle cx='15' cy='105' r='1.6'/%3E%3Ccircle cx='45' cy='105' r='1.6'/%3E%3Ccircle cx='75' cy='105' r='2.6'/%3E%3Ccircle cx='105' cy='105' r='1.6'/%3E%3C/g%3E%3Cg stroke='rgba(255,255,255,.75)' stroke-width='.8'%3E%3Cline x1='75' y1='75' x2='45' y2='45'/%3E%3Cline x1='75' y1='75' x2='105' y2='45'/%3E%3Cline x1='75' y1='75' x2='15' y2='75'/%3E%3Cline x1='75' y1='75' x2='75' y2='105'/%3E%3C/g%3E%3Ccircle cx='75' cy='75' r='6' fill='%23fff'/%3E%3C/svg%3E") center / contain no-repeat; } /* ---------- accompagnements (carrousel) ---------- */ .cas-tete h2 em, .articles-tete h2 em, .rendez-vous-texte h2 em { font-style: normal; color: var(--sable); } .etiquette { margin: 0; } .etiquette strong { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: rgba(16,13,10,.55); font-size: 8.5px; font-weight: 600; letter-spacing: .02em; } .carte-cas-texte h3 { margin: 0; } /* barre de progression : calque de .cas-pied, piloté par --part et --pos (script) */ .cas-pied { --part: 25%; --pos: 0; } .cas-pied::before { content: ''; flex: 1; height: 2px; background: linear-gradient(var(--sable), var(--sable)) no-repeat calc(var(--pos) * 100%) 0 / var(--part) 100%, var(--lin); } .cas-fleches p { width: 34px; height: 34px; margin: 0; border-radius: 50%; border: 1px solid var(--lin); color: var(--noir); font-size: 18px; line-height: 1; display: grid; place-items: center; cursor: pointer; user-select: none; transition: background .2s, border-color .2s; } .cas-fleches p:hover { background: var(--blanc); border-color: var(--blanc); } p.cas-pause { font-size: 0; } p.cas-pause::before { content: ''; width: 12px; height: 12px; background: var(--noir); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect x='4' y='3' width='2.4' height='10' rx='1'/%3E%3Crect x='9.6' y='3' width='2.4' height='10' rx='1'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect x='4' y='3' width='2.4' height='10' rx='1'/%3E%3Crect x='9.6' y='3' width='2.4' height='10' rx='1'/%3E%3C/svg%3E") center / contain no-repeat; } .cas.est-en-pause p.cas-pause::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M5 3.2v9.6L12.6 8z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M5 3.2v9.6L12.6 8z'/%3E%3C/svg%3E"); } /* ---------- FAQ : bloc Détails, le « + » devient un pseudo-élément ---------- */ .faq-filtres p.faq-filtre { margin: 0; cursor: pointer; user-select: none; } .faq-encart .wp-block-buttons { display: block; } .faq-item summary::after { content: ''; flex: none; width: 26px; height: 26px; border-radius: 50%; background: linear-gradient(var(--blanc), var(--blanc)) center / 10px 1.5px no-repeat, linear-gradient(var(--blanc), var(--blanc)) center / 1.5px 10px no-repeat, var(--noir); transition: background .25s ease, transform .35s ease; } .faq-item[open] summary::after { background: linear-gradient(var(--blanc), var(--blanc)) center / 10px 1.5px no-repeat, var(--cuivre); transform: rotate(180deg); } /* ---------- appel à l'action (bloc synchronisé) ---------- */ .appel-contenu .appel-texte { margin-top: 0; } .appel-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px; } .appel-lien { margin: 0; } .appel-lien a { color: var(--blanc); text-decoration: underline; text-underline-offset: 3px; } /* ---------- pied de page ---------- */ .pied-col h4 { margin: 0 0 18px; } .pied-col ul { display: grid; gap: 10px; } .pied-col li a[href*="linkedin"] { text-decoration: underline; text-underline-offset: 3px; } .pied-bas p { margin: 0; } .haut-de-page a { display: inline-flex; gap: 8px; color: var(--blanc); } .haut-de-page a::after { content: '↑'; } /* ---------- pages intérieures ---------- */ .bandeau-page-liens { justify-content: center; gap: 10px; } .wp-block-button.pastille-lien .wp-block-button__link { padding: 9px 18px; border: 1px solid rgba(255,255,255,.28); background: transparent; color: var(--blanc); font-size: 13px; font-weight: 400; line-height: 1.6; } .wp-block-button.pastille-lien .wp-block-button__link:hover { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.5); } .wp-block-button.pastille-lien { display: inline-block; padding: 0; border: 0; border-radius: 0; background: none; } .axe h3, .valeur h3, .engagement h3 { margin: 0; } .axe-num, .valeur-num { margin: 0; } .engagement::before { content: ''; width: 30px; height: 30px; border-radius: 50%; background: var(--nacre-fonce) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8.5 6.5 12 13 4.5'/%3E%3C/svg%3E") center / 14px no-repeat; } .contact-ligne p { margin: 0; } .contact-ligne .contact-etiquette { margin-bottom: 6px; } .contact-audit .wp-block-buttons { display: block; } /* ---------- liste des articles (boucle de requête) ---------- */ .articles-grille > li { margin: 0; } .articles-grille .carte-article-visuel.wp-block-post-featured-image { margin: 0; aspect-ratio: 2 / 1; border-radius: var(--rayon); overflow: hidden; background: var(--nuit); } .articles-grille .carte-article-visuel.wp-block-post-featured-image a { display: block; height: 100%; } .articles-grille .carte-article-visuel.wp-block-post-featured-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s cubic-bezier(.2,.6,.2,1); } .articles-grille > li:hover .carte-article-visuel img { transform: scale(1.05); } /* article sans image à la une : visuel de remplacement aux couleurs du cabinet */ .articles-grille > li:not(.has-post-thumbnail)::before { content: ''; display: block; aspect-ratio: 2 / 1; border-radius: var(--rayon); background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 400' fill='none' stroke='rgba(255,255,255,.4)' stroke-width='2.8'%3E%3Ccircle cx='160' cy='230' r='120'/%3E%3Ccircle cx='240' cy='170' r='120'/%3E%3Ccircle cx='200' cy='200' r='14' fill='rgba(255,255,255,.6)' stroke='none'/%3E%3C/svg%3E") center / auto 68% no-repeat, radial-gradient(ellipse 60% 80% at 100% 100%, rgba(150,140,127,.55), rgba(150,140,127,0) 70%), linear-gradient(160deg, #2A231C 0%, var(--nuit-2) 55%, #3B3128 100%); } .carte-article-meta .wp-block-post-terms.categorie { padding: 0; background: none; } .carte-article-meta .categorie a { display: inline-block; padding: 4px 12px; border-radius: var(--rayon-pilule); background: var(--nacre-fonce); color: var(--brun); font-weight: 500; } .articles-suite .carte-article-meta .categorie a { background: var(--nacre); } .carte-article-meta .wp-block-post-terms__separator { display: none; } .carte-article-meta .categorie { display: flex; flex-wrap: wrap; gap: 6px; } .articles-grille .wp-block-post-title.carte-article-titre { margin: 0; font-size: 21px; line-height: 1.3; letter-spacing: -0.015em; } .articles-grille .wp-block-post-title.carte-article-titre a { color: var(--noir); } .articles-grille .carte-article-extrait .wp-block-post-excerpt__excerpt { margin: 12px 0 0; font-size: 14px; color: var(--sable); } .articles-grille a.wp-block-read-more.lien-fleche { margin-top: 18px; font-size: 14px; font-weight: 500; color: var(--noir); } .articles-suite .articles-grille > li.est-masque { display: none; } .wp-block-query-pagination { display: flex; justify-content: center; gap: 8px; margin-top: 56px; font-size: 14px; } .wp-block-query-pagination a, .wp-block-query-pagination .current { padding: 8px 14px; border-radius: var(--rayon-pilule); } .wp-block-query-pagination .current { background: var(--noir); color: var(--blanc); } /* ---------- article : modèle single ---------- */ .retour-articles { margin: 0; } .retour-articles a { display: inline-flex; gap: 8px; margin-bottom: 28px; font-size: 13px; color: rgba(255,255,255,.75); } .retour-articles a::before { content: '←'; display: inline-block; transition: transform .25s ease; } .retour-articles a:hover { color: var(--blanc); } .retour-articles a:hover::before { transform: translateX(-4px); } .article-meta { display: flex; justify-content: center; flex-wrap: wrap; gap: 0; } .article-meta .wp-block-post-terms:not(:empty)::after { content: ' · '; white-space: pre; } .article-meta .wp-block-post-terms a { color: inherit; } .bandeau-page-titre.wp-block-post-title { margin: 0; } /* certains articles existants emploient des titres h1 dans leur texte : même rendu que les h2 */ .article-contenu h1 { margin-top: 2.2em; font-size: clamp(24px, 2.2vw, 30px); line-height: 1.25; letter-spacing: -0.02em; } .article-contenu h1 + * { margin-top: .6em; } /* le tableau est enveloppé d'une figure : l'espacement de la maquette se reporte sur elle */ .article-contenu .wp-block-table { margin-block: 0; font-size: 14.5px; } .article-contenu * + .wp-block-table { margin-top: 1.1em; } .article-contenu :is(h1, h2, h3, h4) + .wp-block-table { margin-top: .6em; } .article-contenu .mise-a-jour > * { margin: 0; } /* les images des articles gardent leur respiration (la remise à zéro des figures de bloc est plus haut) */ .article-contenu figure.wp-block-image { margin-block: 2em; } .article-contenu .wp-block-table table { width: 100%; border-collapse: collapse; } .article-contenu .wp-block-table :is(th, td) { padding: 10px 12px; border: 0; border-bottom: 1px solid var(--lin); text-align: left; vertical-align: top; } .article-contenu .wp-block-table thead { border-bottom: 0; } .article-contenu .wp-block-table thead th { background: var(--nacre-fonce); } .article-contenu .wp-block-list { padding-left: 1.3em; } /* date de dernière mise à jour des pages légales : date de publication, remplacée par la date de modification dès qu'il y en a une */ .mise-a-jour { display: flex; flex-wrap: wrap; gap: .35em; font-size: 14px; color: var(--pierre); } .mise-a-jour p { margin: 0; } .mise-a-jour:has(.date-modification) .date-publication { display: none; } /* ---------- formulaires WPForms, mis aux couleurs de la maquette ---------- */ :is(.audit-carte, .contact-carte) .wpforms-container { margin: 0; padding: 0; } :is(.audit-carte, .contact-carte) .wpforms-container .wpforms-field-container { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 14px; } :is(.audit-carte, .contact-carte) .wpforms-container .wpforms-field { margin: 0; padding: 0; } :is(.audit-carte, .contact-carte) .wpforms-container .wpforms-field:is(.wpforms-field-checkbox, .wpforms-field-textarea) { grid-column: 1 / -1; } :is(.audit-carte, .contact-carte) .wpforms-container .wpforms-field-label { display: block; margin: 0 0 7px; padding: 0; font-size: 13px; font-weight: 400; color: var(--sable); } :is(.audit-carte, .contact-carte) .wpforms-container .wpforms-required-label { color: inherit; font-weight: 400; } :is(.audit-carte, .contact-carte) .wpforms-container :is(input[type="text"], input[type="email"], input[type="tel"], textarea) { width: 100%; max-width: none; height: auto; margin: 0; padding: 12px 18px; border: 1px solid var(--lin); border-radius: var(--rayon-pilule); background: var(--blanc); color: var(--noir); font: inherit; font-size: 14px; line-height: 1.6; box-shadow: none; } :is(.audit-carte, .contact-carte) .wpforms-container textarea { min-height: 170px; border-radius: var(--rayon); padding: 14px 18px; resize: vertical; } :is(.audit-carte, .contact-carte) .wpforms-container :is(input, textarea):focus { outline: none; border-color: var(--cuivre); box-shadow: 0 0 0 3px rgba(182,90,58,.15); } :is(.audit-carte, .contact-carte) .wpforms-container fieldset { margin: 0; padding: 0; border: 0; min-width: 0; } :is(.audit-carte, .contact-carte) .wpforms-container legend.wpforms-field-label { margin-bottom: 10px; } :is(.audit-carte, .contact-carte) .wpforms-container .wpforms-field-checkbox ul { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; } :is(.audit-carte, .contact-carte) .wpforms-container .wpforms-field-checkbox li { position: relative; margin: 0; padding: 0; } :is(.audit-carte, .contact-carte) .wpforms-container .wpforms-field-checkbox input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; } :is(.audit-carte, .contact-carte) .wpforms-container .wpforms-field-checkbox .wpforms-field-label-inline { display: inline-block; margin: 0; padding: 9px 16px; border-radius: var(--rayon-pilule); background: var(--nacre-fonce); color: var(--brun); font-size: 13px; font-weight: 500; cursor: pointer; transition: background .2s, color .2s; } :is(.audit-carte, .contact-carte) .wpforms-container .wpforms-field-checkbox .wpforms-field-label-inline:hover { background: var(--lin); } :is(.audit-carte, .contact-carte) .wpforms-container .wpforms-field-checkbox input:checked + .wpforms-field-label-inline { background: var(--noir); color: var(--blanc); } :is(.audit-carte, .contact-carte) .wpforms-container .wpforms-field-checkbox input:focus-visible + .wpforms-field-label-inline { outline: 2px solid var(--cuivre); outline-offset: 2px; } .contact-carte .wpforms-container .wpforms-field-checkbox .wpforms-field-label-inline { background: var(--nacre); } :is(.audit-carte, .contact-carte) .wpforms-container .wpforms-submit-container { margin: 18px 0 0; padding: 0; } :is(.audit-carte, .contact-carte) .wpforms-container button.wpforms-submit { display: inline-flex; align-items: center; gap: 12px; height: auto; margin: 0; padding: 13px 26px; border: 0; border-radius: var(--rayon-pilule); background: var(--cuivre); color: var(--blanc); font: inherit; font-size: 14px; font-weight: 500; line-height: 1; cursor: pointer; transition: background .25s ease; } :is(.audit-carte, .contact-carte) .wpforms-container button.wpforms-submit::after { content: '→'; } :is(.audit-carte, .contact-carte) .wpforms-container button.wpforms-submit:hover { background: var(--cuivre-fonce); } :is(.audit-carte, .contact-carte) .wpforms-container :is(em, label).wpforms-error { display: block; margin-top: 6px; color: var(--cuivre); font-size: 12px; font-style: normal; } :is(.audit-carte, .contact-carte) .wpforms-container :is(input, textarea).wpforms-error { border-color: var(--cuivre); } :is(.audit-carte, .contact-carte) .wpforms-confirmation-container-full { margin: 0; padding: 0; border: 0; background: none; color: var(--sable); font-size: 15px; } .audit-carte .audit-mention, .contact-carte .audit-mention { margin-top: 16px; } .formulaire-absent { padding: 16px; border: 1.5px dashed var(--cuivre); border-radius: var(--rayon); color: var(--cuivre); font-size: 14px; } p.audit-croix { margin: 0; cursor: pointer; user-select: none; } /* ---------- bandeau cookies (Complianz) : encart à la place du calendrier tant que Calendly n'est pas accepté ---------- « body » en tête : juste assez de poids pour passer devant la feuille de Complianz, chargée après le thème ; fond blanc uni comme le calendrier chargé, au lieu de l'illustration générique (imposée en !important par Complianz) */ body .cmplz-blocked-content-container { background-image: none !important; background-color: var(--blanc) !important; border-radius: var(--rayon); box-shadow: none; } /* Complianz fige l'encart à 450 px : il occupe tout le cadre du calendrier, comme l'agenda une fois chargé */ body .rendez-vous-cadre .cmplz-blocked-content-container { height: 100% !important; } body .cmplz-blocked-content-container .cmplz-blocked-content-notice { max-width: 340px; padding: 26px 28px 24px; border: 1px solid var(--lin); border-radius: var(--rayon); background: var(--blanc); color: var(--brun); font-size: 15px; line-height: 1.6; text-align: center; box-shadow: 0 2px 8px rgba(79,65,53,.12); } body .cmplz-blocked-content-container .cmplz-blocked-content-notice .cmplz-accept-service { display: inline-block; margin-top: 14px; padding: 12px 24px; border: 0; border-radius: var(--rayon-pilule); background: var(--cuivre); color: var(--blanc); font: inherit; font-size: 14px; font-weight: 500; line-height: 1; cursor: pointer; transition: background .25s ease; } body .cmplz-blocked-content-container .cmplz-blocked-content-notice .cmplz-accept-service:hover { background: var(--cuivre-fonce); } body .cmplz-blocked-content-container .cmplz-blocked-content-notice .cmplz-links a { color: var(--cuivre); } /* ---------- responsive : équivalents bloc des règles de la maquette ---------- */ @media (max-width: 960px) { .services-grille > .services-liste { grid-area: 2 / 1; } .services-grille > .services-descriptions { grid-area: 3 / 1; } .services-grille > .services-lien { grid-area: 4 / 1; } .services-grille::before, .services-grille::after { grid-area: 1 / 1; justify-self: center; width: 160px; height: 160px; } } @media (max-width: 782px) { .admin-bar .entete { top: 46px; } } @media (max-width: 600px) { .wp-block-button.bouton-petit .wp-block-button__link { padding: 9px 14px; } :is(.audit-carte, .contact-carte) .wpforms-container .wpforms-field-container { grid-template-columns: 1fr; } .axe { grid-template-columns: 1fr; } .valeur > p.valeur-num { margin-bottom: 16px; } .bandeau-piste li { font-size: 22px; } }