/* * Theme Name: Vivre en Pleine Présence * Theme URI: http://vivre-en-pleine-presence.fr * Author: Emmanuel Poder * Author URI: http://crea-presence-web.fr * Description: Thème version 2026 — modernisation header + footer * Version: 2.0 * Text Domain: vivre_en_pleine_presence */ @charset "UTF-8"; /* ================================================================ POLICES ================================================================ */ @font-face { font-family: CenturyGothic; src: url(assets/fonts/CenturyGothic.woff) format("woff"), url(assets/fonts/CenturyGothic.ttf) format("truetype"); font-weight: 400; font-style: normal; } /* ================================================================ VARIABLES CHARTE GRAPHIQUE ================================================================ */ :root { /* ── Couleurs — aliases vers les variables générées par theme.json Modifier la couleur dans theme.json suffit à la propager partout ── */ --coral: var(--wp--preset--color--coral, #e5411c); --coral-light: var(--wp--preset--color--coral-clair, #f07050); --coral-dark: var(--wp--preset--color--coral-fonce, #c8360f); --violet: var(--wp--preset--color--violet, #2e255a); --violet-clair : var(--wp--preset--color--violet-clair, #7f639b); --or: var(--wp--preset--color--or, #c8a84b); --or-clair: var(--wp--preset--color--or-clair, #dfc06e); --blanc: var(--wp--preset--color--blanc, #ffffff); /* ── Espacements — aliases vers theme.json ── */ --spacing-xs: var(--wp--preset--spacing--xs, 8px); --spacing-sm: var(--wp--preset--spacing--small, 16px); --spacing-md: var(--wp--preset--spacing--medium, 24px); --spacing-lg: var(--wp--preset--spacing--large, 40px); --spacing-xl: var(--wp--preset--spacing--xl, 60px); /* ── Typographie — aliases vers theme.json ── */ --font-size-xs: var(--wp--preset--font-size--xs, 11px); --font-size-sm: var(--wp--preset--font-size--small, 13px); --font-size-base: var(--wp--preset--font-size--base, 14px); --font-size-md: var(--wp--preset--font-size--medium, 16px); --font-size-lg: var(--wp--preset--font-size--large, 18px); --font-main: var(--wp--preset--font-family--century-gothic, CenturyGothic, sans-serif); /* ── Valeurs structurelles fixes — pas dans theme.json ── */ --violet-rgb: 46, 37, 90; /* pour rgba() dans backdrop-filter etc. */ --gris-clair: rgba(255, 255, 255, 0.65); --nav-height-fixed: 62px; } /* ================================================================ NORMALIZE (v8.0.1) ================================================================ */ html { line-height: 1.15; -webkit-text-size-adjust: 100%; } body { margin: 0; } main { display: block; } h1 { font-size: 2em; margin: .67em 0; } hr { -webkit-box-sizing: content-box; box-sizing: content-box; height: 0; overflow: visible; } pre { font-family: monospace, monospace; font-size: 1em; } a { background-color: transparent; } abbr[title] { border-bottom: none; -webkit-text-decoration: underline dotted; text-decoration: underline dotted; } b, strong { font-weight: bolder; } code, kbd, samp { font-family: monospace, monospace; font-size: 1em; } small { font-size: 80%; } sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sub { bottom: -.25em; } sup { top: -.5em; } img { border-style: none; } button, input, optgroup, select, textarea { font-family: inherit; font-size: 100%; line-height: 1.15; margin: 0; } button, input { overflow: visible; } button, select { text-transform: none; } [type=button], [type=reset], [type=submit], button { -webkit-appearance: button; } [type=button]::-moz-focus-inner, [type=reset]::-moz-focus-inner, [type=submit]::-moz-focus-inner, button::-moz-focus-inner { border-style: none; padding: 0; } [type=button]:-moz-focusring, [type=reset]:-moz-focusring, [type=submit]:-moz-focusring, button:-moz-focusring { outline: 1px dotted ButtonText; } fieldset { padding: .35em .75em .625em; } legend { -webkit-box-sizing: border-box; box-sizing: border-box; color: inherit; display: table; max-width: 100%; padding: 0; white-space: normal; } progress { vertical-align: baseline; } textarea { overflow: auto; } [type=checkbox], [type=radio] { -webkit-box-sizing: border-box; box-sizing: border-box; padding: 0; } [type=number]::-webkit-inner-spin-button, [type=number]::-webkit-outer-spin-button { height: auto; } [type=search] { -webkit-appearance: textfield; outline-offset: -2px; } [type=search]::-webkit-search-decoration { -webkit-appearance: none; } ::-webkit-file-upload-button { -webkit-appearance: button; font: inherit; } details { display: block; } summary { display: list-item; } template, [hidden] { display: none; } /* Correctif SVG pour IE */ .ie9 img[src$=".svg"] { width: 100%; } @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { img[src$=".svg"] { width: 100%; } } /* ================================================================ TYPOGRAPHIE ================================================================ */ .h1, .h2, .h3, .h4, .h5, .h6, a, h1, h2, h3, h4, h5, h6, input, li, ol, p { font-family: CenturyGothic, sans-serif; } p { text-align: justify; } a { outline: 0; text-decoration: none; color: var(--coral); } a:hover { color: var(--coral-dark); text-decoration: underline; } a:active { color: var(--violet); text-decoration: underline; } h1, h2, h3, h4, h5, h6 { color: inherit; font-weight: 500; line-height: 1.2; margin-bottom: .5em; margin-top: 0; } .h1, .h2, .h3, .h4, .h5, .h6 { font-weight: 500; } .h1, h1 { font-size: 1.7rem; } .h2, h2 { font-size: 1.2rem; } .h3, h3 { font-size: 1rem; } .h4, h4 { font-size: 1rem; } .h5, h5 { font-size: 1rem; } .h6, h6 { font-size: .8rem; } p { margin: 0 0 1.2rem; } h1 { color: #2e255a; } h2 { color: #e5411c; } h3 { margin-bottom: 16px !important; } a, ins, u { -webkit-text-decoration-skip: ink edges; text-decoration-skip: ink edges; } abbr[title] { border-bottom: .05rem dotted; cursor: help; text-decoration: none; } kbd { background: #303742; border-radius: .1rem; color: #fff; font-size: .7rem; line-height: 1.25; padding: .1rem .2rem; } mark { background: #ffe9b3; border-bottom: .05rem solid #ffd367; border-radius: .1rem; color: #3b4351; padding: .05rem .1rem 0; } blockquote { border-left: .1rem solid #dadee4; margin-left: 0; padding: .4rem .8rem; } blockquote p:last-child { margin-bottom: 0; } ol, ul { margin: .8rem 0 .8rem .8rem; padding: 0; } ol ol, ol ul, ul ol, ul ul { margin: .8rem 0 .8rem .8rem; } ol li, ul li { position: relative; margin-top: .4rem; } ol { list-style: decimal inside; } ol ol { list-style-type: lower-alpha; } dl dt { font-weight: 700; } dl dd { margin: .4rem 0 .8rem 0; } main ul, main ul li { position: relative; list-style: none; } main ul li::before, main ul li::before { position: relative; left: 16px; top: 2px; content: "•"; color: var(--coral); font-weight: bold; display: inline-block; width: 2em; font-size: 22px; } /* ================================================================ TABLEAUX ================================================================ */ .table { border-collapse: collapse; border-spacing: 0; text-align: left; width: 100%; } .table.table-striped tbody tr:nth-of-type(odd) { background: #f7f8f9; } .table tbody tr.active, .table.table-striped tbody tr.active { background: #eef0f3; } .table.table-hover tbody tr:hover { background: #eef0f3; } .table.table-scroll { display: block; overflow-x: auto; padding-bottom: .75rem; white-space: nowrap; } .table td, .table th { border-bottom: .05rem solid #dadee4; padding: .6rem .4rem; } .table th { border-bottom-width: .1rem; } /* ================================================================ IMAGES & VIDÉOS ================================================================ */ .img-responsive { display: block; height: auto; max-width: 100%; } .img-fit-cover { -o-object-fit: cover; object-fit: cover; } .img-fit-contain { -o-object-fit: contain; object-fit: contain; } .video-responsive { display: block; overflow: hidden; padding: 0; position: relative; width: 100%; } .video-responsive::before { content: ""; display: block; padding-bottom: 56.25%; } .video-responsive embed, .video-responsive iframe, .video-responsive object { border: 0; bottom: 0; height: 100%; left: 0; position: absolute; right: 0; top: 0; width: 100%; } video.video-responsive { height: auto; max-width: 100%; } video.video-responsive::before { content: none; } .video-responsive-4-3::before { padding-bottom: 75%; } .video-responsive-1-1::before { padding-bottom: 100%; } .figure { margin: 0 0 .4rem 0; } .figure .figure-caption { color: #66758c; margin-top: .4rem; } /* ================================================================ UTILITAIRES ================================================================ */ .clearfix::after { clear: both; content: ""; display: table; } .float-left { float: left !important; } .float-right { float: right !important; } /* Boîte d'info développement (masquée en production) */ #encart-info-dvlppt { background-color: #fff; position: fixed; top: 9px; left: 9px; z-index: 10000; padding: 10px; -webkit-box-shadow: 0 0 3px #958f8f; box-shadow: 0 0 3px #958f8f; display: none; } /* ================================================================ RESET BOX-SIZING GLOBAL ================================================================ */ * { -webkit-box-sizing: border-box; box-sizing: border-box; border-style: none; } *, ::after, ::before { -webkit-box-sizing: inherit; box-sizing: inherit; } /* ================================================================ BASE HTML / BODY ================================================================ */ html { -webkit-box-sizing: border-box; box-sizing: border-box; font-size: 20px; line-height: 1.5; -webkit-tap-highlight-color: transparent; } html, body { margin: 0 auto; padding: 0; height: 100%; } body { position: relative; max-width: 19000px; /* réduit à 2500px si blend-mode supporté */ background: #fff; color: #3b4351; font-family: CenturyGothic, sans-serif; font-size: .8rem; overflow-x: hidden; text-rendering: optimizeLegibility; margin: 0 auto; min-width: 340px; } /* Sur navigateurs modernes supportant les calques de fusion */ @supports (background-blend-mode: hard-light) { body { max-width: 2500px; } } #site-container { position: relative; width: 100%; min-height: 100%; z-index: 0; padding: 0; margin: 0 auto; } /* Bandeau évènement haut de page (masqué par défaut, affiché via WP) */ #bandeau-haut-site-container { display: none; height: 0; position: absolute; top: -1000px; margin-right: auto; margin-left: auto; } /* ================================================================ HEADER — Structure de base ================================================================ */ header { position: relative; z-index: 100; overflow: visible; margin-right: auto; margin-left: auto; max-width: 100%; padding: 0; /* Fallback : image statique sans blend-mode */ height: 400px; background: url(media/fonds/FondBleu-1900x460.jpg) center top no-repeat; } header #masthead-content { position: relative; width: 100%; height: 100%; padding: 0; margin: 0 auto; } /* SVG vague (non utilisé dans la version modernisée) */ #vague-svg { display: none; fill: rgba(128, 128, 128, .69); z-index: 2000; position: absolute; bottom: 0; left: 0; width: 100%; overflow: hidden; line-height: 0; } /* ---------------------------------------------------------------- HEADER — Titre h1 ---------------------------------------------------------------- */ header h1 { position: absolute; width: 100%; left: 9%; text-align: center; color: #2e255a; font-variant: small-caps; padding: 0 20px; bottom: 60px; } header h1 span:first-child { display: block; font-size: 48px; line-height: 48px; } header h1 span:last-child { font-size: 68px; font-weight: 700; } /* Titre sur petit écran */ @media all and (max-width: 1080px) { header h1 { left: 0; bottom: 32px; text-align: center; margin: 0; padding: 0 1em; } } /* ---------------------------------------------------------------- HEADER — Fonds et hauteurs par breakpoint (blend-mode) ---------------------------------------------------------------- */ /* Très grand écran : > 1900px */ @media all and (min-width: 1901px) { @supports (background-blend-mode: hard-light) { header { height: 700px; background: url(media/fonds/fond-feuilles-nb-2500x800.jpg) 0 top no-repeat #775be0; background-blend-mode: hard-light; } header #masthead-content { background: url(media/fonds/vague-v2-2500x524.png) left bottom no-repeat; background-size: 100% 590px; } } .logo-nav-fixed #content.site-content { top: 0; margin-top: 600px; } } /* Grand écran : 1401px – 1900px */ @media all and (min-width: 1401px) and (max-width: 1900px) { @supports (background-blend-mode: hard-light) { header { height: 600px; background: url(media/fonds/fond-feuilles-nb-1900x700.jpg) 0 top no-repeat #775be0; background-blend-mode: hard-light; } header #masthead-content { background: url(media/fonds/vague-v2-1900x486.png) left bottom no-repeat; background-size: 100% 530px; } } .logo-nav-fixed #content.site-content { top: 0; margin-top: 600px; } } /* Écran moyen : 1080px – 1400px */ @media all and (min-width: 1080px) and (max-width: 1400px) { @supports (background-blend-mode: hard-light) { header { height: 500px; background: url(media/fonds/fond-feuilles-nb-1900x700.jpg) 0 top no-repeat #775be0; background-blend-mode: hard-light; } header #masthead-content { background: url(media/fonds/vague-v2-1900x486.png) left bottom no-repeat; background-size: 100% 440px; } header h1 { bottom: 50px; } header h1 span:first-child { font-size: 42px; line-height: 70px; } header h1 span:last-child { font-size: 50px; font-weight: 700; line-height: 55px; } } .logo-nav-fixed #content.site-content { top: 0; margin-top: 500px; } } /* Tablette : 631px – 1080px */ @media all and (min-width: 631px) and (max-width: 1080px) { header { height: 400px; background: url(media/fonds/fond-feuilles-nb-1080x500.jpg) 0 top no-repeat #775be0; background-blend-mode: hard-light; } header #masthead-content { background: url(media/fonds/vague-v2-1080x320.png) left bottom no-repeat; background-size: 100% 320px; } header h1 { bottom: 50px; } header h1 span:first-child { font-size: 38px; line-height: 64px; } header h1 span:last-child { font-size: 48px; font-weight: 700; line-height: 40px; } header #logo-site { left: 14px; top: 60px; } header #logo-site a img { width: 160px; height: auto; } .logo-nav-fixed #content.site-content { top: 0; margin-top: 400px; } } /* Mobile : ≤ 630px */ @media all and (max-width: 630px) { header { height: 340px; background: url(media/fonds/fond-feuilles-nb-760x700.jpg) 0 top no-repeat #775be0; background-blend-mode: hard-light; } header #masthead-content { background: url(media/fonds/vague-v2-760x320.png) left bottom no-repeat; background-size: 100% 320px; } header h1 { bottom: 20px; } header h1 span:first-child { font-size: 34px; line-height: 44px; } header h1 span:last-child { font-size: 40px; font-weight: 700; line-height: 40px; } header #logo-site { left: 14px; top: 40px; } header #logo-site a img { width: 130px; } .logo-nav-fixed #content.site-content { top: 0; margin-top: 400px; } } /* ---------------------------------------------------------------- HEADER — Logo ---------------------------------------------------------------- */ #logo-site { position: absolute; left: 14px; top: 80px; } #logo-site a img { width: 180px; height: auto; } /* ---------------------------------------------------------------- HEADER — Lien Facebook (icône discrète, haut à droite) ---------------------------------------------------------------- */ #header-lien-facebook { position: absolute; top: 17px; right: 20px; z-index: 200; display: -webkit-inline-box !important; display: -ms-inline-flexbox !important; display: inline-flex !important; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: 52px !important; height: 52px !important; border-radius: 50% !important; border: 1.5px solid rgba(255, 255, 255, 0.5) !important; background: rgba(255, 255, 255, 0.12) !important; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); -webkit-transition: background 0.2s, border-color 0.2s, -webkit-transform 0.15s; transition: background 0.2s, border-color 0.2s, -webkit-transform 0.15s; transition: background 0.2s, border-color 0.2s, transform 0.15s; transition: background 0.2s, border-color 0.2s, transform 0.15s, -webkit-transform 0.15s; text-decoration: none; } #header-lien-facebook svg { fill: var(--blanc) !important; width: 32px !important; height: 32px !important; } #header-lien-facebook:hover { background: var(--coral) !important; border-color: var(--coral) !important; -webkit-transform: scale(1.08); -ms-transform: scale(1.08); transform: scale(1.08); } /* ---------------------------------------------------------------- HEADER STICKY — classe .logo-nav-fixed sur #site-container ---------------------------------------------------------------- */ /* Masquage du bandeau évènement en sticky */ .logo-nav-fixed #bandeau-haut-site-container { display: none; } /* Header fixe */ .logo-nav-fixed header { position: fixed; top: 0; right: 0; left: 0; height: 62px; overflow: visible; } /* Navigation en sticky */ .logo-nav-fixed header #nav-principal { position: relative; top: -5px; height: 100%; } /* Bouton hamburger en sticky */ .logo-nav-fixed header #icone-afficher-menu { background-color: rgba(255, 255, 255, .8); top: 4px; right: 88px; } .logo-nav-fixed header .bar1, .logo-nav-fixed header .bar2, .logo-nav-fixed header .bar3 { background-color: #da4d52; } /* Boutons vers admin en sticky */ .logo-nav-fixed #boutons-vers-admin { padding: 0 100px; top: 60px; } /* Lien Facebook en sticky */ .logo-nav-fixed header #header-lien-facebook { top: 6px; } /* ---------------------------------------------------------------- HEADER STICKY — Comportement du titre et du logo ---------------------------------------------------------------- */ /* Grand écran : on masque logo et titre quand sticky */ @media all and (min-width: 1080px) { .logo-nav-fixed #logo-site, .logo-nav-fixed header h1 { display: none; } } /* Petit écran : logo masqué, titre réduit et affiché */ @media all and (max-width: 1080px) { .logo-nav-fixed #logo-site { display: none; } .logo-nav-fixed header #masthead-content { background: 0 0; background-image: none; background-color: #e63839; } .logo-nav-fixed header h1 { display: block; position: absolute; top: 0; } .logo-nav-fixed header #masthead-content h1 span:first-child { font-size: 26px; display: inline-block; } .logo-nav-fixed header #masthead-content h1 span:last-child { font-size: 28px; line-height: 64px; } } @media all and (max-width: 620px) { .logo-nav-fixed header h1 { text-align: left; } .logo-nav-fixed header #masthead-content h1 span:first-child { display: none; } .logo-nav-fixed header #masthead-content h1 span:last-child { position: relative; font-size: 26px; } } @media all and (max-width: 540px) { .logo-nav-fixed h1 { top: 7px; } .logo-nav-fixed header #masthead-content h1 span:first-child { display: none; } .logo-nav-fixed header #masthead-content h1 span:last-child { font-size: 20px; text-align: left; width: 100%; } } /* ---------------------------------------------------------------- HEADER STICKY — Animations entrée logo et nav ---------------------------------------------------------------- */ .logo-nav-fixed #nav-principal { animation: translateFromUp .4s; -webkit-animation: translateFromUp .4s; } .logo-nav-fixed #logo-site { animation: translateFromLeft .5s; -webkit-animation: translateFromLeft .5s; } @keyframes translateFromUp { 0% { -webkit-transform: translateY(-86px); transform: translateY(-86px); } 100% { -webkit-transform: translateY(0); transform: translateY(0); } } @-webkit-keyframes translateFromUp { 0% { -webkit-transform: translateY(-86px); } 100% { -webkit-transform: translateY(0); } } @keyframes translateFromLeft { 0% { -webkit-transform: translateX(-86px); transform: translateX(-86px); } 100% { -webkit-transform: translateX(0); transform: translateX(0); } } @-webkit-keyframes translateFromLeft { 0% { -webkit-transform: translateX(-800px); } 100% { -webkit-transform: translateX(0); } } /* ================================================================ MENUS ================================================================ */ /* --- Règles communes à tous les menus --- */ nav ul { margin: 0; padding: 0; } nav ul li { list-style-type: none; text-align: center; margin: 0; padding: 0; } nav ul li a { display: inline-block; text-decoration: none; } nav ul li a:active, nav ul li a:focus, nav ul li a:hover { text-decoration: none; } /* Clearfix pour les menus flottants */ #nav-footer ul::after, #nav-footer::after, #nav-principal ul::after, #nav-principal::after { float: none; clear: both; } /* ---------------------------------------------------------------- MENU PRINCIPAL — Icônes de navigation (nav-icones) ---------------------------------------------------------------- */ #nav-icones { position: absolute; right: 10px; height: 100%; } #nav-icones ul { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -ms-flex-pack: distribute; justify-content: space-around; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } #nav-icones svg { height: 32px; } /* ---------------------------------------------------------------- MENU PRINCIPAL — Bouton hamburger (petit écran / sticky) ---------------------------------------------------------------- */ #icone-afficher-menu { display: none; /* masqué par défaut, visible sur petit écran */ position: fixed; top: 18px; right: 90px; /* décalé pour ne pas chevaucher le lien Facebook */ width: 52px; height: 52px; border-radius: 50%; background-color: #ee2f2f; text-align: center; -webkit-box-shadow: 0 0 2px #908a8a; box-shadow: 0 0 2px #908a8a; } /* Les 3 barres de l'icône hamburger */ .icone-menu { position: relative; cursor: pointer; text-align: center; display: inline-block; padding-top: 10px; } .bar1, .bar2, .bar3 { display: block; width: 32px; height: 3px; margin: 6px auto; background-color: #fff; -webkit-transition: .4s; transition: .4s; } /* Bouton fermer menu (visible dans le menu déployé) */ #icone-fermer-menu { position: absolute; width: 40px; height: 40px; cursor: pointer; right: 24px; top: 20px; font-size: 20px; z-index: 1000; } #icone-fermer-menu svg { fill: rgba(104, 80, 196, .94); } /* ---------------------------------------------------------------- MENU PRINCIPAL — Nav (grand écran ≥ 1080px) ---------------------------------------------------------------- */ #nav-principal { position: absolute; bottom: 3px; width: 100%; z-index: 400; text-align: center; overflow: visible; height: auto; margin: 0; padding: 0; } #nav-principal ul { margin-right: auto; margin-left: auto; } #nav-principal ul li { position: relative; margin: 0; padding: 0; } #nav-principal ul li.current_page_item a, #nav-principal ul li:active a { color: #2f244e; } #nav-principal ul li a { position: relative; color: #fff; font-size: 20px; font-variant: small-caps; } #nav-principal ul li a:hover { color: #2f244e; } #nav-principal ul li a:active, #nav-principal ul li a:focus { color: #000; } #nav-principal ul li a svg { fill: #fff; } li#menu-accueil svg { position: relative; top: 2px; } /* Icône accueil WordPress */ #nav-principal .dashicons-admin-home { position: relative; top: -12px; font-size: 40px; margin-right: 15px; } /* Niveau 0 : items en ligne */ #nav-principal > ul > li { display: inline-block; text-align: center; margin: 0; min-height: 50px; position: relative; top: 0px; } #nav-principal > ul > li > a { display: inline-block; padding: 10px 14px; margin: 0; } /* Sous-menus sur grand écran */ @media all and (min-width: 1080px) { #menu-menu-principal { background-color: #e5411c82; } /* Sous-menus cachés par défaut */ #nav-principal ul ul { display: none; } /* Sous-menu visible au survol du parent */ #nav-principal ul li:hover > ul { display: block; } /* Style du sous-menu — dropdown arrondi, collé sans gap */ #nav-principal ul ul { position: absolute; -webkit-transform: translateX(-50%) translateY(8px); -ms-transform: translateX(-50%) translateY(8px); transform: translateX(-50%) translateY(8px); /* décalage visuel sans gap souris */ left: 50%; top: 100%; /* collé directement sous le li, pas de vide */ width: auto; min-width: 200px; background: rgba(46, 37, 90, 0.96); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-radius: 10px; border: 1px solid rgba(255, 255, 255, 0.12); -webkit-box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25); padding: 8px 0; margin-top: 0; } /* Zone tampon invisible — couvre le vide entre nav et dropdown (8px de translateY + 12px de sécurité) pour ne pas perdre le hover */ #nav-principal ul ul::before { content: ''; position: absolute; top: -20px; left: 0; right: 0; height: 20px; background: transparent; } #nav-principal ul ul li a { display: block; height: auto; padding: 9px 20px; text-align: center; font-size: 16px; font-variant: small-caps; min-width: 200px; width: 200px; line-height: 1.4; color: rgba(255, 255, 255, 0.82); -webkit-transition: background 0.15s, color 0.15s; transition: background 0.15s, color 0.15s; } #nav-principal ul ul li a { width: 200px; } /* surcharge media spécifique */ #nav-principal ul ul li:hover a, #nav-principal ul ul li:active a, #nav-principal ul ul li.current-menu-item a { color: var(--or); background: rgba(255, 255, 255, 0.08); } #nav-principal ul ul li:last-child { padding-bottom: 4px; } /* Bouton fermer masqué sur grand écran */ #icone-fermer-menu { display: none; } } /* Ajustement largeur sous-menu au-delà de 1080px */ @media (min-width: 1080px) { #nav-principal ul ul li a { width: 200px; } } /* ---------------------------------------------------------------- MENU PRINCIPAL — Nav (petit écran < 1080px) ---------------------------------------------------------------- */ @media all and (max-width: 1080px) { #nav-principal { position: absolute; overflow: visible; top: 0; z-index: 1000; margin: 0; width: 100%; height: 40px; padding: 0 0 30px 30px; } #nav-principal ul { width: auto; height: auto; margin: 0 auto; padding: 0; text-align: left; } #nav-principal ul.sub-menu { margin-top: -10px; } #nav-principal ul li { text-align: left; width: 100%; } #nav-principal ul li a { color: #2e255a; } #nav-principal ul li a svg { fill: #000; } #nav-principal ul li a:hover { color: #e5411c; } #nav-principal ul li a:active { color: #2e255a; } #nav-principal ul li ul li a { text-decoration: none; font-variant: normal; font-size: 16px; } /* Masquer la nav et le bouton fermer par défaut */ #nav-principal #icone-fermer-menu, #nav-principal ul { display: none; } /* Afficher le bouton hamburger */ #nav-principal #icone-afficher-menu { display: block; } /* Menu déployé (classe ajoutée par JS) */ #nav-principal.menu-deploye { border-left: 20px solid rgba(104, 80, 196, .94); min-height: 1500px; height: auto; background-color: white; background: -webkit-gradient(linear, left top, right top, color-stop(0, rgba(248, 248, 248, .96)), to(rgba(248, 248, 248, .9))); background: linear-gradient(to right, rgba(248, 248, 248, .96) 0, rgba(248, 248, 248, .9) 100%); } #nav-principal.menu-deploye #icone-fermer-menu, #nav-principal.menu-deploye ul { display: block; } #nav-principal.menu-deploye #icone-afficher-menu { display: none; } /* Sous-menus toujours visibles sur mobile, indentés */ #nav-principal ul ul { display: block; width: auto; padding-left: 30px; } #nav-principal ul ul li a { height: 30px; padding: 12px 10px 12px 16px; text-align: left; font-size: 19px; min-width: 200px; } #nav-principal ul ul li:last-child { padding-bottom: 8px; } /* Règles générales */ #nav-principal .br-menu { display: none; } .block { width: 100%; padding-right: 2%; padding-left: 2%; clear: left; } } /* ---------------------------------------------------------------- MENU FOOTER ---------------------------------------------------------------- */ #nav-footer ul { margin: 0 auto 30px; padding: 0; min-height: 80px; } #nav-footer ul li { text-align: left; line-height: 20px; height: 30px; } #nav-footer ul li a { color: #000; font-size: 15px; padding: 20px; } #nav-footer ul li a:hover { color: #e5411c; } #nav-footer ul li a:active { color: #2e255a; } /* ---------------------------------------------------------------- MENU ADMIN (boutons vers l'interface WP) ---------------------------------------------------------------- */ #menu-admin-container { position: absolute; width: 100%; bottom: 12px; text-align: center; } #menu-admin { position: relative; margin-right: auto; margin-left: auto; } /* Boutons vers admin flottants dans le header */ #boutons-vers-admin { position: absolute; padding: 10px 100px; /* 100px laisse la place au bouton hamburger */ width: 100%; top: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -ms-flex-pack: distribute; justify-content: space-around; background-color: rgba(255, 255, 255, .60); z-index: 100; } .bouton-vers-admin, #boutons-vers-admin span a { display: inline-block; margin: 6px; padding: 8px 16px; color: white; background-color: blueviolet; -webkit-box-shadow: 0 5px 20px 0 rgba(0, 0, 0, .2), 0 13px 24px -11px gray; box-shadow: 0 5px 20px 0 rgba(0, 0, 0, .2), 0 13px 24px -11px gray; border-radius: 6px; font-size: 15px; } .bouton-vers-admin:hover, #boutons-vers-admin span a:hover { background-color: orchid; color: black; text-decoration: none; } /* ================================================================ BOUTONS (.btn) ================================================================ */ .btn { -webkit-appearance: none; -moz-appearance: none; appearance: none; background: #fff; border: .05rem solid #5755d9; border-radius: .1rem; color: #5755d9; cursor: pointer; display: inline-block; font-size: .8rem; height: 1.8rem; line-height: 1.2rem; outline: 0; padding: .25rem .4rem; text-align: center; text-decoration: none; -webkit-transition: background .2s, border .2s, color .2s, -webkit-box-shadow .2s; transition: background .2s, border .2s, color .2s, -webkit-box-shadow .2s; transition: background .2s, border .2s, box-shadow .2s, color .2s; transition: background .2s, border .2s, box-shadow .2s, color .2s, -webkit-box-shadow .2s; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; vertical-align: middle; white-space: nowrap; } .btn:focus { -webkit-box-shadow: 0 0 0 .1rem rgba(87, 85, 217, .2); box-shadow: 0 0 0 .1rem rgba(87, 85, 217, .2); } .btn:focus, .btn:hover { background: #f1f1fc; border-color: #4b48d6; text-decoration: none; } .btn.active, .btn:active { background: #4b48d6; border-color: #3634d2; color: #fff; text-decoration: none; } .btn-group { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -ms-flex-wrap: wrap; flex-wrap: wrap; } .btn-group .btn { -webkit-box-flex: 1; -ms-flex: 1 0 auto; flex: 1 0 auto; } .btn-group .btn:first-child:not(:last-child) { border-bottom-right-radius: 0; border-top-right-radius: 0; } .btn-group .btn:not(:first-child):not(:last-child) { border-radius: 0; margin-left: -.05rem; } .btn-group .btn:last-child:not(:first-child) { border-bottom-left-radius: 0; border-top-left-radius: 0; margin-left: -.05rem; } .btn-group .btn.active, .btn-group .btn:active, .btn-group .btn:focus, .btn-group .btn:hover { z-index: 1; } .btn-group.btn-group-block { display: -webkit-box; display: -ms-flexbox; display: flex; } .btn-group.btn-group-block .btn { -webkit-box-flex: 1; -ms-flex: 1 0 0px; flex: 1 0 0; } .btn.btn-clear { background: 0 0; border: 0; color: currentColor; height: 1rem; line-height: .8rem; margin-left: .2rem; margin-right: -2px; opacity: 1; padding: .1rem; text-decoration: none; width: 1rem; } .btn.btn-clear:focus, .btn.btn-clear:hover { background: rgba(247, 248, 249, .5); opacity: .95; } .btn.btn-clear::before { content: "\2715"; } /* ================================================================ BUTTON BAR (barre de boutons colorés) ================================================================ */ ul.button-bar { display: inline-block; margin: 0; padding: 0; font-size: 0; position: relative; border: 0; background: 0; } ul.button-bar li { display: inline-block; position: relative; margin: 0 -1px 0 0; padding: 0; line-height: 100%; font-size: 0; color: #fff; border: 1px solid #fc730a; background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #82b930), to(#b4d189)) #85b937; background: linear-gradient(to bottom, #82b930 0, #b4d189 100%) #85b937; } ul.button-bar li a { display: inline-block; padding: 7px 10px; font-weight: 400; font-size: 14px; text-shadow: 0 1px 0 #fff; color: #000; text-decoration: none; vertical-align: middle; line-height: 100%; border-left: 1px solid #fff; } ul.button-bar li.first, ul.button-bar li.first a { border-top-left-radius: 5px; border-bottom-left-radius: 5px; } ul.button-bar li.last, ul.button-bar li.last a { border-top-right-radius: 5px; border-bottom-right-radius: 5px; } ul.button-bar li a:hover { text-shadow: 0 1px 0 #fc730a; background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #01bcf1), to(#b4eafa)) #0ab0ee; background: linear-gradient(to bottom, #01bcf1 0, #b4eafa 100%) #0ab0ee; } ul.button-bar li a:active { -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, .2), inset 0 -10px 20px rgba(0, 0, 0, .07); box-shadow: inset 0 3px 5px rgba(0, 0, 0, .2), inset 0 -10px 20px rgba(0, 0, 0, .07); border-left: 1px solid #ccc; } /* ================================================================ MODAL (fenêtre modale Spectre.css) ================================================================ */ .modal { -webkit-box-align: center; -ms-flex-align: center; align-items: center; bottom: 0; display: none; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; left: 0; opacity: 0; overflow: hidden; padding: .4rem; position: fixed; right: 0; top: 0; } .modal.active, .modal:target { display: -webkit-box; display: -ms-flexbox; display: flex; opacity: 1; z-index: 400; } .modal.active .modal-overlay, .modal:target .modal-overlay { background: rgba(247, 248, 249, .75); bottom: 0; cursor: default; display: block; left: 0; position: absolute; right: 0; top: 0; } .modal.active .modal-container, .modal:target .modal-container { -webkit-animation: slide-down .2s ease 1; animation: slide-down .2s ease 1; z-index: 1; } .modal.modal-sm .modal-container { max-width: 320px; padding: 0 .4rem; } .modal.modal-lg .modal-overlay { background: #fff; } .modal.modal-lg .modal-container { -webkit-box-shadow: none; box-shadow: none; max-width: 960px; } .modal-container { background: #fff; border-radius: .1rem; -webkit-box-shadow: 0 .2rem .5rem rgba(48, 55, 66, .3); box-shadow: 0 .2rem .5rem rgba(48, 55, 66, .3); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; max-height: 75vh; max-width: 640px; padding: 0 .8rem; width: 100%; } .modal-container.modal-fullheight { max-height: 100vh; width: 20px; height: 20px; } .modal-container .modal-header { color: #303742; padding: .8rem; } .modal-container .modal-body { overflow-y: auto; padding: .8rem; position: relative; } .modal-container .modal-footer { padding: .8rem; text-align: right; } /* Modale post-soumission de formulaire (disparaît après 5s) */ .modal-post-soumission, .modal-visible { display: block; opacity: 0; height: 0; border-width: 1px; background-color: rgba(99, 99, 101, .72); -webkit-animation: fadeOut 5s; animation: fadeOut 5s; } .modal-post-soumission .modal-container { position: relative; padding: 20px 40px; margin: 300px auto 0; border-style: solid; border-color: #8a759f; text-align: center; } @-webkit-keyframes fadeOut { 0% { opacity: 0; height: auto; } 25% { opacity: 1; height: auto; } 75% { opacity: 1; height: auto; } 100% { opacity: 0; height: 0; } } @keyframes fadeOut { 0% { opacity: 0; height: auto; } 25% { opacity: 1; height: auto; } 75% { opacity: 1; height: auto; } 100% { opacity: 0; height: 0; } } a#fermer-modal-post-soumission { position: absolute; right: 7px; top: 6px; display: inline-block; border: none; } a#fermer-modal-post-soumission:active, a#fermer-modal-post-soumission:hover { border: none; background: #fff; } a#fermer-modal-post-soumission svg { width: 30px; height: 30px; fill: #ed4f48; position: relative; } /* ================================================================ FIL D'ARIANE & BARRE DE RECHERCHE ================================================================ */ #fil-ariane { height: 27px; padding: 4px 0 0; margin-bottom: 0; margin-top: 5px; } #fil-ariane a { font-size: 15px; padding: 0; margin: 0; } #fil-ariane a::after { position: relative; margin: 0; content: ' | '; font-size: 18px; line-height: 25px; padding: 0; top: -1px; } #fil-ariane svg { fill: gray; width: 24px; height: auto; position: relative; top: 3px; } #fil-ariane strong { font-size: 13px; color: grey; } #accueil #fil-ariane a::after, #fil-ariane a:last-child::after { content: ""; } #barre-recherche { position: absolute; top: 3px; right: 0; color: #7f8a46; } #barre-recherche input { width: 174px; font-size: 12px; height: 25px; padding: 0 0 0 6px; border-radius: 8px; border: 1px solid #000; color: navy; } #barre-recherche button { padding: 0; margin: 0; position: relative; top: 4px; color: #e95028; right: 29px; background-color: transparent; border: 0; font-size: 19px; } /* ================================================================ Commun ================================================================ */ main h2, h2.section-header { font-size: 1.8em; /* margin-bottom: 50px;*/ position: relative; display: inline-block; /*text-align: center;*/ color: var(--violet); } /* main h2::after, h2.section-header::after { content: ''; position: absolute; bottom: -15px; left: 50%; transform: translateX(-50%); width: 100px; height: 3px; background: linear-gradient(90deg,#2e255a,#633fd8); border-radius: 2px; } */ .texte-2col { column-count: 2; column-gap: 4em; } @media all and (max-width:760px) { .texte-2col { column-count: 1; } } /* cadre */ .ve-ombre { -webkit-box-shadow: 0 4px 15px rgba(0,0,0,.08); box-shadow: 0 4px 15px rgba(0,0,0,.08); } .ve-boite { background: #fff; padding: 35px; border-radius: 12px; -webkit-box-shadow: 0 4px 15px rgba(0,0,0,.08); box-shadow: 0 4px 15px rgba(0,0,0,.08); margin: 30px auto; } .ve-petite-boite { background: #fff; padding: 6% 8%; border-radius: 12px; -webkit-box-shadow: 0 4px 15px rgba(71, 39, 39, 0.3); box-shadow: 0 4px 15px rgba(71, 39, 39, 0.3); } .ve-boite-animee { background: #fff; padding: 35px; border-radius: 12px; -webkit-box-shadow: 0 4px 15px rgba(0,0,0,.08); box-shadow: 0 4px 15px rgba(0,0,0,.08); -webkit-transition: all .3s ease; transition: all .3s ease; margin: 30px auto; } .ve-boite-animee:hover { -webkit-transform: translateY(-5px); -ms-transform: translateY(-5px); transform: translateY(-5px); -webkit-box-shadow: 0 8px 25px rgba(0,0,0,.12); box-shadow: 0 8px 25px rgba(0,0,0,.12); } .ve-bord-left-violet { border-left: 5px solid var(--violet-clair); } .ve-bord-top-violet { border-top: 5px solid var(--violet-clair); } .ve-bord-left-coral { border-left: 5px solid var(--coral); } .ve-bord-top-coral { border-top: 5px solid var(--coral); } .ve-bord-left-or { border-left: 5px solid var(--or-clair); } .ve-bord-top-or { border-top: 5px solid var(--or-clair); } .highlight-box { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; padding: 40px; border-radius: 12px; margin: 40px 0; box-shadow: 0 10px 30px rgba(102, 126, 234, 0.3); } .ve-boite-degrade-violet { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); box-shadow: 0 10px 30px rgba(102, 126, 234, 0.3); } .book-reference { background: linear-gradient(135deg, #ffeaa7 0%, #fdcb6e 100%); padding: 35px; border-radius: 12px; text-align: center; box-shadow: 0 6px 20px rgba(253, 203, 110, 0.3); } .ve-boite-degrade-or { background: linear-gradient(135deg, #ffeaa7 0%, #fdcb6e 100%); box-shadow: 0 6px 20px rgba(253, 203, 110, 0.3); } .ve-bloc-pas-large, .ve-boite-pas-large { max-width: 760px !important; margin-left: auto !important; margin-right: auto !important; } /* ================================================================ CONTENU PRINCIPAL (main / #content) ================================================================ */ #content.site-content { position: relative; margin: 0 auto; padding: 50px 0; min-width: 360px; } #content.site-content aside#col-gauche-site.sidebar.widget-area { display: none; } #content.site-content #primary.content-area { position: relative; } #content.site-content aside#col-droite-site.sidebar.widget-area { display: none; } #site-main, main { position: relative; max-width: 1180px; margin: 0 auto; } /* Page accueil : contenu pleine largeur */ body#accueil main#site-main, body#home main#site-main, body.accueil main#site-main, body.home main#site-main { max-width: 2500px; } @media all and (max-width: 1210px) { .texte-central-container { padding-right: 3%; padding-left: 3%; } } main .h1, main .h2, main .h3, main h1, main h2, main h3, main h4 { max-width: 1180px; margin: 0 auto; width: 100%; } main h1 { margin-bottom: 40px; margin-top: 20px; } main h2 { margin-bottom: 30px; margin-top: 20px; } main h1 { background: linear-gradient(135deg,#f5f7fa 0%,#e8ecf1 100%); padding: 48px 20px; text-align: center; border-radius: 12px; margin-bottom: 60px; } #boucle-WP { padding: 0 2.5em; } #home #boucle-WP, .home #boucle-WP { padding: 0; } .container-texte, .texte-container { max-width: 1180px; margin: 0 auto; } @media all and (max-width: 1250px) { .container-texte, .texte-container { padding-right: 2.5em; padding-left: 2.5em; } } @media all and (max-width: 660px) { .container-texte, .texte-container { padding-right: 1.5em; padding-left: 1.5em; } } body#accueil #content { max-width: 1180px; } /* ================================================================ FOOTER ================================================================ */ /* Image de fond totalement visible — filtre uniquement sur le bloc contenu */ .site-footer { background-image: url('media/fonds/PiedDePage-1900x400.jpg'); background-size: cover; background-position: center center; background-repeat: no-repeat; padding: 40px 24px; /* espace pour que l'image respire autour du bloc */ } /* Bloc glassmorphism centré */ .footer-inner { position: relative; max-width: 780px; margin: 0 auto; padding: 42px 56px 12px; text-align: center; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 28px; background: rgba(20, 10, 42, 0.6); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-radius: 20px; border: 1px solid rgba(255, 255, 255, 0.12); -webkit-box-shadow: 0 8px 48px rgba(0, 0, 0, 0.3); box-shadow: 0 8px 48px rgba(0, 0, 0, 0.3); color: var(--blanc); } .footer-inner p { margin: 0 0 0.8rem; padding-bottom: 0px; } /* Icônes (Facebook, contact, envoi) */ .footer-icons { display: -webkit-box; display: -ms-flexbox; display: flex; gap: 36px; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; list-style: none; margin:0 !important; } .footer-icons a { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: 48px; height: 48px; border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, 0.35); -webkit-transition: background .2s, border-color .2s, -webkit-transform .15s; transition: background .2s, border-color .2s, -webkit-transform .15s; transition: background .2s, border-color .2s, transform .15s; transition: background .2s, border-color .2s, transform .15s, -webkit-transform .15s; text-decoration: none; } .footer-icons a svg { fill: var(--blanc); width: 22px; height: 22px; } .footer-icons a:hover { background: var(--coral); border-color: var(--coral); -webkit-transform: translateY(-3px); -ms-transform: translateY(-3px); transform: translateY(-3px); } .footer-icons a:focus-visible { outline: 2px solid var(--or); outline-offset: 3px; } /* Séparateur doré */ .footer-divider { width: 48px; height: 2px; background: var(--or); border: none; border-radius: 1px; opacity: .8; } /* Barre de recherche */ .footer-search { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .3); border-radius: 24px; padding: 0 4px 0 18px; height: 42px; width: min(280px, 100%); -webkit-transition: background .2s, border-color .2s; transition: background .2s, border-color .2s; } .footer-search:focus-within { background: rgba(255, 255, 255, .18); border-color: rgba(255, 255, 255, .65); } .footer-search input { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; background: transparent; border: none; outline: none; color: var(--blanc); font-size: 14px; font-family: Arial, sans-serif; } .footer-search input::-webkit-input-placeholder { color: var(--gris-clair); } .footer-search input::-moz-placeholder { color: var(--gris-clair); } .footer-search input:-ms-input-placeholder { color: var(--gris-clair); } .footer-search input::-ms-input-placeholder { color: var(--gris-clair); } .footer-search input::placeholder { color: var(--gris-clair); } .footer-search button { background: transparent; border: none; cursor: pointer; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; padding: 8px; border-radius: 50%; -webkit-transition: background .15s; transition: background .15s; } .footer-search button:hover { background: rgba(255, 255, 255, .15); } .footer-search button svg { fill: var(--blanc); width: 18px; height: 18px; } /* ---------------------------------------------------------------- Barre de recherche dans le footer Structure réelle générée : #searchform > div.container.cbd > input#q + button > svg ---------------------------------------------------------------- */ /* Conteneur div.container.cbd */ #footer-recherche #searchform .container.cbd { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; background: rgba(255, 255, 255, .1) !important; border: 1px solid rgba(255, 255, 255, .3); border-radius: 24px; padding: 0 4px 0 18px; height: 42px; width: min(280px, 100%); margin: 0 auto; -webkit-transition: background .2s, border-color .2s; transition: background .2s, border-color .2s; -webkit-box-sizing: border-box; box-sizing: border-box; overflow: hidden; } #footer-recherche #searchform .container.cbd:focus-within { background: rgba(255, 255, 255, .18) !important; border-color: rgba(255, 255, 255, .65); } /* Masquer le formulaire lui-même (pas de fond, pas de bordure) */ #footer-recherche #searchform { background: transparent !important; border: none !important; padding: 0 !important; margin: 0 !important; } /* Champ de saisie input#q */ #footer-recherche #searchform #q { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; min-width: 0; background: transparent !important; border: none !important; outline: none !important; -webkit-box-shadow: none !important; box-shadow: none !important; color: #ffffff !important; font-size: 14px; font-family: Arial, sans-serif; padding: 0; margin: 0; height: auto; position: static !important; top: auto !important; left: auto !important; width: auto !important; -webkit-appearance: none; } #footer-recherche #searchform #q::-webkit-input-placeholder { color: rgba(255, 255, 255, .65) !important; opacity: 1 !important; } #footer-recherche #searchform #q::-moz-placeholder { color: rgba(255, 255, 255, .65) !important; opacity: 1 !important; } #footer-recherche #searchform #q:-ms-input-placeholder { color: rgba(255, 255, 255, .65) !important; opacity: 1 !important; } #footer-recherche #searchform #q::-ms-input-placeholder { color: rgba(255, 255, 255, .65) !important; opacity: 1 !important; } #footer-recherche #searchform #q::placeholder { color: rgba(255, 255, 255, .65) !important; opacity: 1 !important; } /* Bouton avec SVG */ #footer-recherche #searchform button[type="submit"] { -ms-flex-negative: 0; flex-shrink: 0; width: 36px; height: 36px; background: transparent !important; border: none; cursor: pointer; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; padding: 0; border-radius: 50%; -webkit-transition: background .15s; transition: background .15s; position: static !important; top: auto !important; right: auto !important; } #footer-recherche #searchform button[type="submit"]:hover { background: rgba(255, 255, 255, .15) !important; } /* SVG loupe — les attributs width/height="32" dans le HTML prennent la priorité sur le CSS, d'où le !important et le max-width/max-height pour contraindre dans tous les cas */ #footer-recherche #searchform button svg { fill: #ffffff !important; width: 18px !important; height: 18px !important; max-width: 18px !important; max-height: 18px !important; min-width: 0 !important; min-height: 0 !important; -ms-flex-negative: 0; flex-shrink: 0; display: block; overflow: visible; } /* Navigation footer */ .footer-nav { list-style: none; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; gap: 8px 32px; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .footer-nav a { color: var(--gris-clair); text-decoration: none; font-family: Arial, sans-serif; font-size: 13px; letter-spacing: .03em; -webkit-transition: color .15s; transition: color .15s; } .footer-nav a:hover { color: var(--coral-light); } .footer-nav a:active { color: var(--or); } .footer-nav a:focus-visible { outline: 1px solid var(--or); outline-offset: 2px; border-radius: 2px; } /* Crédits */ .footer-credits { font-family: Arial, sans-serif; font-size: 13px; color: var(--gris-clair); line-height: 2; } .footer-credits strong { color: var(--blanc); font-weight: 600; } .footer-credits a { color: var(--or); text-decoration: none; -webkit-transition: color .15s; transition: color .15s; } .footer-credits a:hover { color: var(--or-clair); } /* Copyright */ .footer-copyright { font-family: Arial, sans-serif; font-size: 12px; color: rgba(255, 255, 255, .8); letter-spacing: .02em; } /* Correctifs anciens sélecteurs (compatibilité) */ @media all and (max-width: 400px) { #footer-content.texte-container { padding-right: 1em; padding-left: 1em; } } /* Responsive footer */ @media (max-width: 600px) { .site-footer { padding: 24px 16px; } .footer-inner { padding: 36px 24px 28px; gap: 24px; border-radius: 14px; } .footer-icons { gap: 20px; } } /* ================================================================ BOUTON RETOUR HAUT DE PAGE ================================================================ */ a#retour-haut-site { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; height: 42px; width: 42px; border-radius: 50%; font-size: 15px; text-align: center; color: #fff; background: rgba(234,102,70,.77); position: fixed; right: 20px; opacity: 1; z-index: 99999; -webkit-transition: all ease-in .2s; transition: all ease-in .2s; -webkit-backface-visibility: hidden; backface-visibility: hidden; text-decoration: none; } a#retour-haut-site::before { content: "\25b2"; } /* ▲ */ a#retour-haut-site:hover { background: #5c457e; -webkit-transition: all ease-in .2s; transition: all ease-in .2s; } a#retour-haut-site.cInvisible { bottom: -35px; opacity: 0; -webkit-transition: all ease-in .5s; transition: all ease-in .5s; } a#retour-haut-site.cVisible { bottom: 20px; opacity: 1; } /* ================================================================ PAGE ACCUEIL — Bandeau événement ================================================================ */ body#accueil main h1, body#home main h1, body.accueil main h1, body.home main h1 { display: none; } #bandeau-haut-site-container { display: block; width: 100%; -webkit-box-shadow: 0 0 3px #565656; box-shadow: 0 0 3px #565656; padding: 20px; margin: 0 auto; min-height: 40px; background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #d4d6c1), to(rgba(169, 175, 193, .93))); background-image: linear-gradient(to bottom, #d4d6c1 0, rgba(169, 175, 193, .93) 100%); } #bandeau-haut-site { display: block; max-width: 1180px; margin: 0 auto; } #bandeau-haut-site p { text-align: center; font-size: 15px; } #bandeau-haut-site p:last-child { margin-bottom: 0; } /* ================================================================ PAGE ACCUEIL — Cartes menu (3 pratiques) ================================================================ */ /* ========================================================= BASE — commun à tous les écrans ========================================================= */ #cartes-menu.cartes-menu { position: relative; margin: 40px auto 40px; } /* ========================================================= MOBILE (< 680px) — liste compacte, pas de photo, pas de hover ========================================================= */ .carte-image { display: none; } .carte-menu { position: relative; height: auto; width: 100% !important; display: flex; flex-direction: column; margin: 0 auto 16px; padding: 14px 16px; background-color: #f4f2f0; border-left: 4px solid #d8731f; border-radius: 2px; z-index: auto !important; } .carte-menu-titre { position: static; height: auto; width: 100%; display: block; font-size: 18px; margin: 0 0 6px; background-color: transparent; color: #d8731f; text-align: left !important; } .carte-menu-detail { position: static; display: block; width: 100%; z-index: auto; bottom: auto; padding-left: 14px; } .carte-menu-detail p { text-align: left !important; color: #444; font-size: 15px; margin: 0 0 6px; } .carte-en-savoir-plus-detail a { font-size: 13px; color: #d8731f !important; } .carte-en-savoir-plus-detail a:hover { color: #6959c6 !important; } @media all and (max-width: 540px) { #cartes-menu.cartes-menu { margin: 0 auto 54px; display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; } } /* ========================================================= TABLETTE (≥ 680px) — photo + titre superposé + détail au hover ========================================================= */ @media all and (min-width: 680px) { #cartes-menu.cartes-menu { margin: 0 auto 54px; display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; } .carte-menu { position: relative; height: 300px; width: 300px !important; display: block; margin: 0 20px 20px; padding: 0; background-color: transparent; border-left: none; border-radius: 0; overflow: hidden; } .carte-image { display: block; margin: 0; line-height: 0; } .carte-image img { width: 100%; height: 300px; object-fit: cover; display: block; } .carte-menu-titre { position: absolute; left: 0; bottom: 0; width: 100%; margin: 0; padding: 14px 10px; background-color: rgba(216, 213, 209, 0.92); color: #c0552a; font-size: 1.1em; text-align: center !important; z-index: 10; } .carte-menu-detail { display: none; position: absolute; left: 0; bottom: 0; width: 100%; padding: 16px 24px; background-color: rgba(192, 85, 42, 0.92); box-sizing: border-box; z-index: 20; } .carte-menu-detail p { color: #fff; text-align: left !important; font-size: 15px; } .carte-en-savoir-plus-detail a { color: #fff !important; font-size: 13px; } .carte-en-savoir-plus-detail a:hover { color: #2a1a4d !important; } .carte-menu:hover .carte-menu-detail { display: block; } .carte-menu:hover .carte-menu-titre { display: none; } .carte-menu:nth-child(1) { z-index: 40; } .carte-menu:nth-child(2) { z-index: 30; } .carte-menu:nth-child(3) { z-index: 20; } } /* ========================================================= GRAND ÉCRAN (≥ 1020px) — en ligne, carte centrale remontée ========================================================= */ @media all and (min-width: 1020px) { #cartes-menu.cartes-menu { max-width: 1080px; width: 100%; margin: 80px auto 40px; flex-wrap: nowrap; justify-content: space-between; } .carte-menu:nth-child(2) { position: relative; top: -50px; } } #nav-principal .dashicons-admin-home { top: -12px; } /* ================================================================ PAGE ACCUEIL — Divers ================================================================ */ /* Citation Danis Bois */ .citation-danis { margin: 30px auto; color: #b65b13; font-style: italic; } .citation-danis cite, .citation-danis p { font-size: 16px !important; } @media all and (max-width: 1250px) { .citation-danis { margin: 30px 42px; } } /* Vidéo Gymsens */ #accueil-video-gs { max-width: 360px; margin: 30px auto; } #demo-gs-rue { margin: 60px auto; max-width: 700px; } /* Layout 2 colonnes accueil */ /* Infos en valeur (encadrés colorés) */ .info-en-valeur { background-color: #f8e6e6; padding: 10px 20px; } /* ================================================================ PAGE ACCUEIL — Encarts Actualités & Cours ================================================================ */ .encart-container { position: relative; -webkit-box-shadow: 0 0 5px #5a5a5e; box-shadow: 0 0 5px #5a5a5e; margin: 20px auto 10px; max-width: 1080px; min-height: 200px; border-radius: 20px; } @media (max-width: 781px) { .encart-container { margin-left:auto !important; margin-right: auto !important; max-width: 85% !important; } } /* Liens dans les encarts */ #encart-contenu-actu a { color: #2b204d; margin-left: 6px; margin-right: 6px; } /* Layout flex pour que Actu et Cours soient de même hauteur */ #actu-grille > div { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; } /* ================================================================ ENCARTS ACTUALITÉS & COURS — Nouveau traitement (2026) Structure réelle : .wp-block-columns#container-2col > .wp-block-column.encart-container#encart-actu > h2.encart-titre > div#encart-contenu-actu.encart-contenu > div.wp-block-group__inner-container > h3, ul, p, hr, iframe > p.encart-lien-plus ================================================================ */ /* ---------------------------------------------------------------- Grille colonnes natives WP ---------------------------------------------------------------- */ .wp-block-columns.container-encarts { gap: 20px !important; max-width: 1080px; margin: 40px auto !important; -webkit-box-align: start !important; -ms-flex-align: start !important; align-items: start !important; /* chaque card à sa propre hauteur */ } @media all and (max-width: 780px) { .wp-block-columns.container-encarts { -webkit-box-orient: vertical !important; -webkit-box-direction: normal !important; -ms-flex-direction: column !important; flex-direction: column !important; } } /* ---------------------------------------------------------------- Card blanche avec ombre ---------------------------------------------------------------- */ .wp-block-column.encart-container { background: #ffffff !important; background-image: none !important; border-radius: 16px !important; -webkit-box-shadow: 0 2px 20px rgba(46, 37, 90, 0.10) !important; box-shadow: 0 2px 20px rgba(46, 37, 90, 0.10) !important; overflow: hidden; padding: 0 !important; min-height: 0 !important; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } /* ---------------------------------------------------------------- Bandeau titre (h2.encart-titre) ---------------------------------------------------------------- */ .wp-block-column.encart-container h2.encart-titre { margin: 0 !important; padding: 13px 22px !important; font-size: 12px !important; font-weight: 700 !important; letter-spacing: 4px !important; text-transform: uppercase; color: #ffffff !important; text-shadow: none !important; border-bottom: none !important; line-height: 1.4; text-align: center; } #encart-actu h2.encart-titre { background: #e5411c !important; } #encart-cours h2.encart-titre { background: #2e255a !important; } /* ---------------------------------------------------------------- Corps du contenu ---------------------------------------------------------------- */ #encart-contenu-actu, #encart-contenu-cours { min-height: 0 !important; height: auto !important; background: transparent !important; padding: 0 !important; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; padding: 30px 6% !important; } /* Inner container WP */ #encart-contenu-actu .wp-block-group__inner-container, #encart-contenu-cours .wp-block-group__inner-container { padding: 16px 22px 8px !important; } /* Titres h3 internes */ #encart-contenu-actu h3, #encart-contenu-cours h3 { color: #2e255a !important; font-size: 15px !important; font-weight: 700 !important; margin-top: 16px !important; margin-bottom: 6px !important; padding-bottom: 6px !important; border-bottom: 1px solid #f0eef7 !important; text-shadow: none !important; } #encart-contenu-actu h3:first-child, #encart-contenu-cours h3:first-child { margin-top: 0 !important; } /* Texte paragraphes */ #encart-contenu-actu p, #encart-contenu-cours p { /* color: #444 !important;*/ font-size: 14px !important; line-height: 1.65 !important; text-shadow: none !important; margin-bottom: 6px !important; } /* Liens */ /*#encart-contenu-actu a, #encart-contenu-cours a { color: #e5411c !important; } #encart-contenu-actu a:hover, #encart-contenu-cours a:hover { color: #2e255a !important; } */ /* Lien "Voir les tarifs" dans cours */ #encart-contenu-cours p a { /* color: #c8a84b !important;*/ font-weight: 600; font-size: 13px; } /* Listes */ #encart-contenu-actu ul, #encart-contenu-cours ul { margin: 16px 0 24px 0 !important; padding: 0 !important; list-style: none !important; } #encart-contenu-actu ul li, #encart-contenu-cours ul li { color: #444 !important; font-size: 14px !important; line-height: 1.6 !important; text-shadow: none !important; padding: 5px 0 5px 26px !important; position: relative; margin: 0 !important; border-bottom: 1px solid #f7f5ff; } #encart-contenu-actu ul li:last-child, #encart-contenu-cours ul li:last-child { border-bottom: none; } /* Puce ➢ colorée */ #encart-contenu-actu ul li::before { content: "•"; /*content: "➢";*/ position: absolute; left: 0; color: #e5411c !important; font-size: 26px; top: -6px; } #encart-contenu-cours ul li::before { content: "➢"; position: absolute; left: 0; color: #2e255a !important; font-size: 11px; top: 7px; } /* li vide (liste avec li vide dans le HTML WP) */ #encart-contenu-actu ul li:empty, #encart-contenu-actu ul li:blank { display: none; } /* Séparateurs hr discrets */ #encart-contenu-actu hr, #encart-contenu-cours hr { border: none !important; border-top: 1px solid #f0eef7 !important; background: none !important; height: 0 !important; margin: 10px 0 !important; opacity: 1 !important; } /* Paragraphes centrés — adresse et infos contact → on les transforme en encadré info */ #encart-contenu-actu p.has-text-align-center { background: #fff5f3; border-left: 3px solid #e5411c; border-radius: 0 8px 8px 0; padding: 8px 12px !important; text-align: left !important; font-size: 13px !important; color: #333 !important; margin: 8px 0 !important; } #tab-cours table { font-size: 14px;} #tab-cours tr { padding-top: 6px; padding-bottom: 6px; } #tab-cours tr td { padding-top: 12px; padding-bottom: 12px; } #tab-cours tr td:first-child { color: var(--violet-clair); padding-left: 20px; width: 160px; } #tab-cours tr td:last-child { padding-right: 20px;} /* iframe HelloAsso plus compact */ #haWidget { margin: 6px 0 4px !important; } /* ---------------------------------------------------------------- Lien "plus d'infos" en bas ---------------------------------------------------------------- */ .wp-block-column.encart-container > p.encart-lien-plus, .wp-block-column.encart-container .encart-lien-plus { display: block !important; padding: 11px 22px 13px !important; border-top: 1px solid #f0eef7 !important; text-align: right !important; font-size: 12px !important; color: #c8a84b !important; font-weight: 700 !important; letter-spacing: 0.03em; background: #fff; margin: 0 !important; text-decoration: none; } .wp-block-column.encart-container > p.encart-lien-plus a, .wp-block-column.encart-container .encart-lien-plus a { /*color: #c8a84b !important;*/ font-size: 12px !important; font-weight: 700 !important; } .wp-block-column.encart-container > p.encart-lien-plus:hover, .wp-block-column.encart-container .encart-lien-plus a:hover { /*color: #e5411c !important;*/ } /* ================================================================ ENCARTS — Items Actualités et Horaires Cours Structure Gutenberg : wp-block-columns avec classes CSS custom ================================================================ */ /* ---------------------------------------------------------------- Items Actualités — colonnes date / titre+détail Classe sur le bloc Colonnes : encart-item Classe colonne gauche paragraphe : item-date Classe colonne droite paragraphes : item-title / item-detail ---------------------------------------------------------------- */ .wp-block-columns.encart-item { display: -webkit-box !important; display: -ms-flexbox !important; display: flex !important; -webkit-box-align: start !important; -ms-flex-align: start !important; align-items: flex-start !important; border-bottom: 1px solid #f0eef7; padding: 10px 0 !important; margin: 0 !important; gap: 12px !important; } .wp-block-columns.encart-item:last-of-type { border-bottom: none; } /* Colonne date — largeur fixe */ .wp-block-columns.encart-item > .wp-block-column:first-child { -webkit-box-flex: 0 !important; -ms-flex: 0 0 130px !important; flex: 0 0 130px !important; max-width: 130px !important; min-width: 130px !important; } /* Colonne contenu — prend le reste */ .wp-block-columns.encart-item > .wp-block-column:last-child { -webkit-box-flex: 1 !important; -ms-flex: 1 !important; flex: 1 !important; } /* Paragraphe date en coral */ .item-date, .wp-block-columns.encart-item > .wp-block-column:first-child p { color: #e5411c !important; font-size: 12px !important; font-weight: 600 !important; text-align: left !important; white-space: nowrap; margin: 0 !important; padding-top: 2px; } /* Titre de l'atelier */ .item-title, .wp-block-columns.encart-item > .wp-block-column:last-child p:first-child { font-size: 14px !important; font-weight: 700 !important; color: #2e255a !important; text-align: left !important; margin: 0 0 2px !important; line-height: 1.3; } /* Sous-titre discret */ .item-detail, .wp-block-columns.encart-item > .wp-block-column:last-child p:last-child { font-size: 13px !important; color: #888 !important; text-align: left !important; margin: 0 !important; line-height: 1.4; } /* ---------------------------------------------------------------- Horaires Cours — colonnes tag jour / détail Classe sur le bloc Colonnes : horaire-row Classe colonne gauche paragraphe : horaire-tag Classe colonne droite paragraphe : horaire-detail ---------------------------------------------------------------- */ .wp-block-columns.horaire-row { display: -webkit-box !important; display: -ms-flexbox !important; display: flex !important; -webkit-box-align: center !important; -ms-flex-align: center !important; align-items: center !important; border-bottom: 1px solid #f0eef7; padding: 10px 0 !important; margin: 0 !important; gap: 12px !important; } .wp-block-columns.horaire-row:last-of-type { border-bottom: none; } /* Colonne tag jour — largeur fixe petite */ .wp-block-columns.horaire-row > .wp-block-column:first-child { -webkit-box-flex: 0 !important; -ms-flex: 0 0 52px !important; flex: 0 0 52px !important; max-width: 52px !important; min-width: 52px !important; } /* Colonne détail — prend le reste */ .wp-block-columns.horaire-row > .wp-block-column:last-child { -webkit-box-flex: 1 !important; -ms-flex: 1 !important; flex: 1 !important; } /* Badge jour */ .horaire-tag, .wp-block-columns.horaire-row > .wp-block-column:first-child p { display: inline-block !important; background: #2e255a !important; color: #ffffff !important; font-size: 11px !important; font-weight: 700 !important; text-align: center !important; border-radius: 4px; padding: 3px 6px !important; margin: 0 !important; line-height: 1.4; letter-spacing: 0.05em; width: auto !important; min-width: 36px; white-space: nowrap; } /* Texte horaire */ .horaire-detail, .wp-block-columns.horaire-row > .wp-block-column:last-child p { font-size: 13px !important; color: #444 !important; line-height: 1.5 !important; text-align: left !important; margin: 0 !important; } /* "visio" et "présentiel" en italique discret */ .horaire-detail em, .wp-block-columns.horaire-row > .wp-block-column:last-child p em { color: #888 !important; font-style: italic; font-size: 12px !important; } /* ================================================================ PAGE ACCUEIL — Améliorations contenu (hors encarts) ================================================================ */ /* Texte d'introduction — largeur confortable, interligne aéré */ .container-texte.has-normal-font-size { max-width: 760px; margin-left: auto; margin-right: auto; line-height: 1.8; font-size: 17px; } /* Citation Danis Bois — encadrée, bien visible */ blockquote.citation-danis { max-width: 760px; margin: 40px auto; padding: 24px 32px; background: rgba(183, 163, 80, 0.08); border-left: 4px solid #c8a84b; border-radius: 0 8px 8px 0; font-style: italic; color: #8a6a10; } blockquote.citation-danis p { font-size: 16px !important; line-height: 1.8; text-align: left; margin-bottom: 12px; } blockquote.citation-danis cite { font-size: 14px; font-style: normal; font-weight: 600; color: #b65b13; } /* Accroche centrale — séparateurs dorés, marges généreuses */ p.accroche { max-width: 760px; margin: 48px auto !important; padding: 24px 32px; border-top: 2px solid #c8a84b; border-bottom: 2px solid #c8a84b; color: #2e255a; line-height: 1.8; } /* Cartes pratiques — titre plus lisible */ .carte-menu-titre { font-size: 18px; font-weight: 600; color: #2e255a; padding: 10px 14px; line-height: 1.3; } /* Cartes — hauteur suffisante sur mobile */ @media all and (max-width: 679px) { .carte-menu { height: auto; min-height: 80px; padding: 12px 0; } } /* Vidéo — plus grande, mieux encadrée */ #accueil-video-gs { max-width: 640px !important; margin: 60px auto 40px !important; } #accueil-video-gs video, #accueil-video-gs iframe { border-radius: 8px; -webkit-box-shadow: 0 4px 24px rgba(0, 0, 0, 0.15); box-shadow: 0 4px 24px rgba(0, 0, 0, 0.15); } #accueil-video-gs .wp-element-caption { text-align: center; color: #666; font-size: 14px; margin-top: 10px; } /* ================================================================ PAGE ACTUALITÉS ================================================================ */ /* Grille actualités / cours de même hauteur */ #actu-grille > div { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; } /* Encarts agenda et cours */ #actu-cont-agenda { -webkit-box-shadow: 0 0 6px 0 #553fb9; box-shadow: 0 0 6px 0 #553fb9; } #actu-cont-cours { -webkit-box-shadow: 0 0 6px 0 red; box-shadow: 0 0 6px 0 red; } #actu-cont-agenda > ul > li, #actu-cont-cours > ul > li { padding-bottom: 20px; padding-top: 20px; position: relative; } #actu-cont-agenda > ul > li:first-child, #actu-cont-cours > ul > li:first-child { padding-top: 0; } /* Séparateur entre items (ligne colorée) */ .actu-cont > ul > li::after { content: ' '; position: absolute; width: 50%; bottom: -8px; left: 0; margin-left: 25%; border-bottom: solid 3px #553fb9; } #actu-cont-cours > ul > li::after { border-color: #e63839; } #actu-cont-cours > ul > li { border-color: #e63839; } .actu-cont > ul > li:last-child::after { border-bottom: none; } /* Puces personnalisées dans les encarts actualités */ #actu-cont-agenda ul, #actu-cont-cours ul { list-style: none; } #actu-cont-agenda ul li::before, #actu-cont-cours ul li::before { /* content: "\27A2"; /* ➢ */ content: "•"; color: #553fb9; font-weight: bold; display: inline-block; width: 2em; margin-left: -2em; } #actu-cont-cours ul li::before { color: #e63839; } /* Séparateurs colorés */ #actu-cont-agenda hr { color: #553fb9; } #actu-cont-cours hr { color: #e63839; } /* Photos de l'asso en slider arrondi */ .slider-photos-vepp .pgcsimplygalleryblock-slider-collection { border-radius: 50%; max-height: 420px; max-width: 420px; height: 420px; width: 420px; margin: 0 auto; } .slider-photos-vepp .pgcsimplygalleryblock-slider-content { padding: 0 !important; margin: -5px !important; } @media all and (max-width: 550px) { .slider-photos-vepp .pgcsimplygalleryblock-slider-collection { height: auto; width: 100%; } } /* Plans Google Maps */ .plan-google { margin: 0 auto; width: 480px; } .plan-google iframe { max-width: 100%; width: 100%; } .plan-google figure { width: 480px; margin: 0 auto; } .cols-plans-cours { margin: 20px 0; } @media all and (max-width: 1060px) { #col-plans-google { display: block; margin: 0 auto; width: 100%; } } @media all and (max-width: 1160px) { #col-plans-google .plan-google { width: 100%; } } /* ================================================================ PAGE CONTACT ================================================================ */ .contact-col-gauche, .contact-col-droite { display: inline-block; } .contact-col-gauche { padding-right: 5em; width: 40%; } .contact-col-droite { width: 58%; } @media all and (max-width: 920px) { .contact-col-droite, .contact-col-gauche { width: 100%; display: block; margin-right: auto; margin-left: auto; } .contact-col-gauche { margin-bottom: 50px; padding-right: 0; } } /* Formulaire Contact Form 7 */ .wpcf7-form { padding: 0; border-radius: 10px; } .wpcf7-form p { color: #697581; font-weight: 700; font-size: 13px; margin-bottom: 0; width: 100%; } .wpcf7-form p label { margin: 18px 0 10px; padding: 5px 10px 5px 0; display: inline-block; width: 10em; color: #2e255a; font-size: 15px; } .wpcf7-form input { font-size: 14px; width: 100%; margin-bottom: 10px; margin-top: 5px; border: 0; outline: 0; -webkit-box-shadow: none; box-shadow: none; border-bottom: 1px solid #2e255a; -webkit-box-sizing: content-box; box-sizing: content-box; -webkit-transition: border .3s, -webkit-box-shadow .3s; transition: border .3s, -webkit-box-shadow .3s; transition: box-shadow .3s, border .3s; transition: box-shadow .3s, border .3s, -webkit-box-shadow .3s; } .wpcf7-form input:active { border-bottom: 1px solid #e5411c; } .wpcf7-form input:focus { border-bottom: 1px solid #e5411c; } .wpcf7-form textarea { height: 10em; width: 100%; margin-bottom: 10px; border: 1px solid #2e255a; outline: 0; -webkit-box-shadow: none; box-shadow: none; margin-top: 30px; } .wpcf7-form textarea:active, .wpcf7-form textarea:focus { border: 1px solid #e5411c; } /* Champ demande */ #DemandeContact label { display: block; margin-bottom: 0; padding-bottom: 0; } #DemandeContact span { width: 100%; } .wpcf7-form-control-wrap { display: inline-block; } .wpcf7-form-control-wrap.consentement { margin: 30px auto; } .wpcf7-not-valid-tip { display: inline-block; } .wpcf7-response-output { text-align: center; } .wpcf7-response-output.wpcf7-display-none.wpcf7-validation-errors { border-color: red; } form.wpcf7-form.init p.test { margin-top: 30px; background-color: #ececec; padding: 12px; } .wpcf7-form input.wpcf7-acceptance, .wpcf7-form span.wpcf7-list-item input { width: 30px; } .wpcf7-captchac { position: relative; top: 10px; margin-right: 30px; } input.wpcf7-form-control.wpcf7-captchar { border-bottom: 2px solid #e5411c; width: 120px; } #form-captcha-image { text-align: center; } #form-captcha-image .cf7ic_instructions { margin-bottom: -24px; } p.envoyer-form-contact { margin-top: 40px; margin-bottom: 40px; } .wpcf7-submit { margin: 0 auto; display: block; max-width: 360px; border-radius: 8px; height: 36px; width: 150px; letter-spacing: 4px; background-color: #614ab8; color: #fff; font-weight: 700; font-size: 20px; } .wpcf7-form-control.wpcf7-checkbox.case-consentement input { width: 16px; height: 16px; } .wpcf7-form input[name="consentement[]"] { margin: 0 8px 0 0; width: 15px; height: 15px; } span.consentement { margin-top: 15px; text-align: justify; } .vers-mentions-leg { text-align: justify; } /* ================================================================ CASES À COCHER & BOUTONS RADIO (style personnalisé) ================================================================ */ input[type=checkbox], input[type=radio] { position: relative; z-index: 1000; -webkit-appearance: none; -moz-appearance: none; appearance: none; -webkit-transition: all .15s ease-out 0s; transition: all .15s ease-out 0s; color: #fff; cursor: pointer; display: inline-block; outline: 0; border: 1px solid #5184be; margin: 0 3px 0 0; padding: 0; -webkit-box-shadow: 1px 1px 1px #2e255a; box-shadow: 1px 1px 1px #2e255a; } input[type=checkbox] { width: 14px; height: 14px; top: 3px; } input[type=radio] { width: 15px; height: 15px; border-radius: 50%; top: 5px; padding: 0; } input[type=checkbox]:hover, input[type=radio]:hover { background: #99a5be; } input[type=checkbox]:checked::before, input[type=radio]:checked::before { height: 25px; width: 25px; position: absolute; content: '✔'; display: inline-block; font-size: 20px; text-align: center; line-height: 30px; color: #4d81c8; left: -1px; top: -11px; } @-webkit-keyframes click-wave { 0% { height: 30px; width: 30px; opacity: .35; position: relative; } 100% { height: 80px; width: 80px; margin-left: -37px; margin-top: -40px; opacity: 0; } } @keyframes click-wave { 0% { height: 30px; width: 30px; opacity: .35; position: relative; } 100% { height: 80px; width: 80px; margin-left: -37px; margin-top: -40px; opacity: 0; } } input[type=checkbox]:checked::after, input[type=radio]:checked::after { -webkit-animation: click-wave .65s; animation: click-wave .65s; background: #4f82c9; content: ''; display: block; position: relative; z-index: 100; } input[type=radio]::after { border-radius: 50%; } /* ================================================================ PAGE PLAN DU SITE ================================================================ */ #plan-du-site #contenu-page { width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } #plan-du-site #contenu-page h2 { font-size: 20px; } #plan-du-site #contenu-page h2:last-child { margin-top: 30px; } .col-d, .col-g { width: 300px; margin: 0 auto; } @media all and (max-width: 760px) { #plan-du-site #contenu-page { display: block; } } /* Arbre du plan du site */ #main ul.arbre-site li::before { content: ""; } ul.arbre-site, ul.arbre-site ul, ul.arbre-site ul ul { list-style-type: none; background: url(media/arbre-plan-site/ligne.png) repeat-y; padding: 0; margin: 0; } ul.arbre-site ul { margin: 5px auto 10px 50px; padding: 0; } ul.arbre-site li { line-height: 20px; color: #214fac; font-weight: 700; background: url(media/arbre-plan-site/noeud.png) no-repeat; padding: 0; margin: 0 0 14px; text-align: left; } ul.arbre-site li:last-child { background: #fffffe url(media/arbre-plan-site/dernier_noeud.png) no-repeat; } ul.arbre-site li a { text-decoration: none; font-size: 15px; padding-left: 20px; color: #2e255a; } ul.arbre-site li a:hover { color: gray; } ul.arbre-site li li a { color: #5b5959; } ul.arbre-site li li a:hover { color: green; } /* ================================================================ PAGE RÉSULTATS DE RECHERCHE ================================================================ */ .article-recherche { border: 1px solid #2a4b85; border-radius: 2px; margin-top: 15px; margin-bottom: 15px; padding: 30px; position: relative; -webkit-box-shadow: 0 0 2px #2a4b85; box-shadow: 0 0 2px #2a4b85; } .article-recherche h2 { margin-top: 15px; } .article-recherche a.en-lire-plus { position: absolute; right: 10px; bottom: 10px; } .search-highlight { font-weight: 700; color: #2a4b85; background-color: #e7e8e8; padding: 3px 4px; } /* ================================================================ PAGE AIDE ADMIN (manuel du site) ================================================================ */ .manuel-site h1 { margin-bottom: 0; } #main .container-2-col { display: -webkit-box; display: -ms-flexbox; display: flex; position: relative; padding: 0; margin: 0; } #main .col-gauche-menu { background-color: #000; padding: 12px 1em 1em 2em; position: fixed; top: 512px; max-width: 320px; } #main .col-gauche-menu h3 { color: #fff; text-align: center; } #main .col-droite-contenu { padding: 1em 0 2em 1em; margin-left: 310px; } #main .col-gauche-menu ul { padding-left: 0; } #main .col-gauche-menu ul li { margin-bottom: 12px; text-indent: -17px; text-align: left; } #main .col-gauche-menu ul li::before { content: "◍"; font-size: 9px; margin-right: 0; color: #fff; } #main .col-gauche-menu ul li ul li { margin-left: 27px; } #main .col-gauche-menu a { color: #fff; font-weight: 400; font-style: normal; display: inline; font-size: 14px; } #main .col-droite-contenu section { -webkit-box-shadow: 0 0 5px #323234; box-shadow: 0 0 5px #323234; padding: 2px 2em 1em; } #main .col-droite-contenu section::after { float: none; clear: both; } #main .col-droite-contenu h2 { color: #072fcb; text-align: center; font-size: 21px; margin-bottom: 8px; } #main .col-droite-contenu h3 { margin-top: 34px; margin-bottom: 15px; font-size: 18px; } #main .col-droite-contenu h4 { color: #000; text-decoration: underline; font-size: 18px; } #main .col-droite-contenu h5 { color: #000; font-style: italic; font-size: 16px; } #main .col-droite-contenu ol, #main .col-droite-contenu ul, #main .contenu_onglet ul, .faq section ul { margin-left: 0; font-size: 14px; } #main .col-droite-contenu ol li { padding-top: 5px; padding-bottom: 5px; line-height: 20px; } #main .col-droite-contenu ul li::before, #main .contenu_onglet ul li::before, #main .faq section ul li::before { content: "◍"; font-size: 12px; margin-right: 6px; color: #03f; } #main .col-droite-contenu ul ul li::before, #main .contenu_onglet ul ul li::before { content: "◍"; font-size: 11px; margin-right: 6px; color: green; } #main .col-droite-contenu img { display: block; margin-top: 14px; margin-bottom: 14px; max-width: 100%; } /* ================================================================ PAGE BIBLIOTHÈQUE / LIVRES ================================================================ */ .single-livres .intitule { font-weight: 700; } .single-livres .image-livre { text-align: center; } .info-resa { font-size: 15px; color: #ea5050; } #reserver-un-livre .info-resa { font-size: 16px; text-align: center; } .single-livres .infos-livre { margin-top: 30px; padding-top: 18px; } @media all and (min-width: 820px) { .single-livres .image-infos-livre { display: -webkit-box; display: -ms-flexbox; display: flex; max-width: 820px; } .single-livres .infos-livre { margin-top: 0; } } .un-livre-tout { position: relative; padding: 20px 1.5em; } .lien-retour { text-align: center; } @media all and (min-width: 680px) { .un-livre-tout .image-infos-livre { display: table; max-width: 820px; margin: 0 auto; } .un-livre-tout .image-infos-livre .image-livre, .un-livre-tout .image-infos-livre .infos-livre { display: table-cell; vertical-align: middle; } .un-livre-tout .image-infos-livre .image-livre { width: 30%; padding: 16px 0; } .un-livre-tout .image-infos-livre .infos-livre { width: 68%; padding-left: 50px; } #lien-retour, .lien-retour { text-align: right; } } .image-infos-livre { margin: 0 auto; max-width: 600px; } .image-infos-livre .infos-livre { padding-left: 50px; } .un-livre-tout .image-livre { text-align: center; padding: 16px 0; } .un-livre-tout .image-livre img { -webkit-box-shadow: 0 0 6px #575656; box-shadow: 0 0 6px #575656; height: 320px; margin: 0; padding: 0; border: 0; } .un-livre-tout p { color: #000; } .un-livre-tout .intitule { font-weight: 400; font-style: normal; color: gray; } .auteur-livre, .ed-isbn-prix p { margin-top: 10px; margin-bottom: 10px; } hr#commentaires-livre, hr#quatrieme-couverture { margin-top: 50px; height: 2px; width: 80%; background-color: #483787; margin-bottom: 50px; } .commentaires-livre { position: relative; } .commentaires-livre h3, .quatrieme-couverture h3 { margin-bottom: 30px; } .livre-un-commentaire { border-left: 4px solid #483787; padding-left: 10px; -webkit-box-shadow: 0 0 2px #929090; box-shadow: 0 0 2px #929090; margin: 16px 0; } #reserver-livre, .commentaires-livre .btn { position: absolute; top: -38px; right: 0; } #reserver-livre { right: 3%; } #reserver-ce-livre { position: relative; width: 150px; margin-bottom: 20px; margin-top: 24px; } #lien-reserver-livre { position: absolute; top: -53px; right: 41px; } #lien-autres-livres { position: absolute; top: 104px; right: 56px; } #btn-reservation a, #form-commentaire input[type=submit], .un-livre a { font-size: 14px; color: #7156d5; display: inline-block; } .lien-retour { position: absolute; top: -38px; right: 5em; } @media all and (max-width: 1180px) { .lien-retour { right: 2em; } } #reserve-gestion { color: red; text-align: center; font-size: 22px; } /* ================================================================ PAGE RÉSERVATION DE LIVRES ================================================================ */ #table-reservation { margin-top: 56px; margin-right: auto; margin-left: auto; overflow-x: scroll; border: none; border-collapse: collapse; } #table-reservation thead th { font-weight: 700; padding-bottom: 16px; } #table-reservation td, #table-reservation th { padding: 6px 20px; border-bottom: 1px solid #ed4f48; } .col-disponible, .col-reservation { text-align: center; } .livre-souhaite { background-color: rgba(254, 206, 1, .53); } #btn-reservation { margin-top: 40px; text-align: center; } #resa_coord { max-width: 480px; margin: 50px auto 20px; } .lg-admin td, td.col-admin, th.col-admin { background-color: #eee; text-align: center; } #btn-maj-dispo { text-align: center; margin-top: 30px; } #btn-maj-dispo #btn-maj-dispo input { font-size: 12px; } #resa_coord label { margin: 14px 0 10px; padding: 5px 10px 5px 0; display: inline-block; min-width: 25%; color: #2e255a; font-size: 15px; font-weight: 700; } #resa_coord input { display: inline-block; font-size: 14px; min-width: 70%; margin-bottom: 10px; margin-top: 5px; border: 0; outline: 0; -webkit-box-shadow: none; box-shadow: none; border-bottom: 1px solid #2e255a; -webkit-box-sizing: content-box; box-sizing: content-box; -webkit-transition: border .3s, -webkit-box-shadow .3s; transition: border .3s, -webkit-box-shadow .3s; transition: box-shadow .3s, border .3s; transition: box-shadow .3s, border .3s, -webkit-box-shadow .3s; } #resa_coord input:active { border-bottom: 1px solid #e5411c; } #resa_coord input:focus { border-bottom: 1px solid #e5411c; } #resa_coord input#resa_pour_quand { width: 100%; } #form-reservation p#input-reservation { margin: 60px auto 50px; text-align: center; } #form-reservation p#input-reservation input { font-size: 14px; } #commentaire-code-adh input { background-color: #f1efef; margin-left: 20px; width: 316px; margin-bottom: 10px; } #ajout-commentaire .content { padding-right: 6%; padding-left: 6%; } form#form-commentaire textarea { width: 100%; min-height: 120px; background-color: #f1f0f0; padding: 8px 14px; text-align: left; margin-top: 16px; margin-bottom: 10px; } #form-commentaire label { margin-bottom: 20px; } #form-commentaire input[type=submit] { margin: 30px auto 10px; } .bouton-soumettre { text-align: center; } #input-reservation { text-align: center; margin-top: 30px; margin-bottom: 30px; } label[for=resa-consentement] { margin-top: 300px; font-size: 15px; } .resa-droits { max-width: 700px; margin-right: auto; margin-left: auto; text-align: justify; } #liens-droits { font-size: 14px; } /* ================================================================ PAGE ÉQUIPE PÉDAGOGIQUE ================================================================ */ /*.un-animateur { -webkit-box-shadow: 0 0 4px #959598; box-shadow: 0 0 4px #959598; }*/ .photo-animateur { text-align: center; } .photo-animateur img { max-width: 150px; border-radius: 12px; } @media all and (max-width:780px) { .un-animateur.photo-a-droite > div { -webkit-box-orient : vertical; -webkit-box-direction : reverse; -ms-flex-direction : column-reverse; flex-direction : column-reverse; } } /* ================================================================ PAGE TÉMOIGNAGES ================================================================ */ .separateur-temoignage { max-width: 50%; color: #e5411c; } /* ================================================================ PAGE FONCTIONNEMENT (mise à jour 08/06/26) ================================================================ */ /* #fonctionnement main h1 { background: linear-gradient(135deg, #f5f7fa 0%, #e8ecf1 100%); padding: 60px 20px; text-align: center; border-radius: 12px; margin-bottom: 60px; }*/ #fonctionnement h2 { font-size: 1.4rem; color: #2c3e50; position: relative; display: inline-block; text-align: center; margin-bottom: 60px; } #fonctionnement h2::after { content: ''; position: absolute; bottom: -14px; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); width: 60px; height: 3px; background: -webkit-gradient(linear, left top, right top, from(#3498db), to(#2ecc71)); background: linear-gradient(90deg, #3498db, #2ecc71); border-radius: 2px; } .intro-fonctionnement { background: white; padding: 40px; border-radius: 12px; -webkit-box-shadow: 0 4px 15px rgba(0, 0, 0, .08); box-shadow: 0 4px 15px rgba(0, 0, 0, .08); margin-bottom: 50px; border-left: 5px solid #613dd3; } .membres { background: white; padding: 35px; border-radius: 12px; -webkit-box-shadow: 0 4px 15px rgba(0, 0, 0, .08); box-shadow: 0 4px 15px rgba(0, 0, 0, .08); -webkit-transition: all .3s ease; transition: all .3s ease; } .membres:hover { -webkit-transform: translateY(-5px); -ms-transform: translateY(-5px); transform: translateY(-5px); -webkit-box-shadow: 0 8px 25px rgba(0, 0, 0, .12); box-shadow: 0 8px 25px rgba(0, 0, 0, .12); } .presidence { background-color: #d6d4db; } .presidence .wp-element-caption { color: #613dd3; margin-top: 25px; font-size: 18px; text-align: center; } .membres-bureau h3, .autres-membres h3 { font-size: 1.3em; color: #2c3e50; margin-bottom: 25px; padding-bottom: 15px; border-bottom: 3px solid #613dd3; } .liste-membres { position: relative; } .liste-membres li { position: relative;list-style: none; } .liste-membres li::before { content: '●'; position: absolute; left: -24px; color: #613dd3; font-size: 1.2em; margin-top: -4px; } .statuts { background: linear-gradient(135deg, #ffeaa7 0%, #fbdd7b 100%); padding: 40px; border-radius: 12px; text-align: center; -webkit-box-shadow: 0 6px 20px rgba(253, 203, 110, .3); box-shadow: 0 6px 20px rgba(253, 203, 110, .3); margin-top: 60px; margin-bottom: 60px; } .statuts a { display: inline-block; background: white; color: #2c3e50; padding: 15px 35px; border-radius: 8px; text-decoration: none; font-weight: 600; font-size: 1.1em; -webkit-transition: all .3s ease; transition: all .3s ease; -webkit-box-shadow: 0 4px 10px rgba(0, 0, 0, .1); box-shadow: 0 4px 10px rgba(0, 0, 0, .1); } .statuts a:hover { -webkit-transform: translateY(-3px); -ms-transform: translateY(-3px); transform: translateY(-3px); -webkit-box-shadow: 0 6px 15px rgba(0, 0, 0, .15); box-shadow: 0 6px 15px rgba(0, 0, 0, .15); background: #2c3e50; color: white; } .participation { background: white; padding: 40px; border-radius: 12px; -webkit-box-shadow: 0 4px 15px rgba(0, 0, 0, .08); box-shadow: 0 4px 15px rgba(0, 0, 0, .08); border-left: 5px solid #2ecc71; margin-bottom: 80px; } /* 07 08 26 - Ajout de photos aux membres du CA */ /* Traits de couleur sous les titres "Membres du bureau" / "Autres membres du CA" */ .veps-ca-carte:hover { box-shadow: 0 6px 18px rgba(83,74,183,0.12); transform: translateY(-3px); } .veps-trait { width: 60px !important; height: 3px !important; border: none !important; margin: 6px auto 30px !important; } .veps-trait-violet { background-color: #7f77dd !important; } .veps-trait-teal { background-color: #5dcaa5 !important; } /* Photos rondes des membres */ .veps-photo img { width: 140px !important;; height: auto !important;; border-radius: 50% !important; object-fit: cover !important; } .veps-photo-violet img { border: 2px solid #cecbf6; } .veps-photo-teal img { border: 2px solid #9fe1cb; } /* 2 colonnes sur mobile au lieu de 4 */ @media (max-width: 780px) { .wp-block-columns { flex-wrap: wrap !important; } .wp-block-columns > .wp-block-column { flex-basis: 45% !important; } } .veps-photo figcaption { display: none !important; } /* ================================================================ FORMULAIRES — Messages d'erreur / succès ================================================================ */ .leure { display: none; } /* anti-spam */ .erreur_form { color: #d74a0c; font-style: italic; margin-left: 15px; } .erreur-form-php, .message-erreur-champ { display: block; margin-left: 10px; color: #ed4f48; } .message-echec, .message-erreur, .message-succes { border: 1px solid gray; padding: 10px 16px; margin-top: 30px; margin-bottom: 30px; text-align: center; } .message-echec p, .message-erreur p, .message-succes p { text-align: center; line-height: 40px; } .message-succes { border-left: 14px solid #01f603; } .message-echec, .message-erreur { border-left: 14px solid #d7490a; } .boucle-vide { text-align: center; } @media (max-width:600px) { .wp-block-media-text.is-stacked-on-mobile { grid-template-columns: 100%!important; gap: 40px!important; } } main .livre-un-ensemble ul li::before, .livre-un-ensemble main ul li::before { content: ""; } /* Page Liens amis */ .lien-amis { border-bottom: 3px solid rgba(91, 122, 95, 0.25); font-size: 1.35rem; color: var(--wp--preset--color--texte-sombre, #33322c); padding-bottom: 0.4rem; font-size: 24px; margin-top: 50px; margin-bottom: 12px; } .amis-avec-logo { margin-top: 60px; } .amis-avec-logo h2 { font-size: 24px; } /* .bouton-vers-helloasso { display: flex; align-items: center; justify-content: center; flex-direction: column; } .bouton-vers-helloasso a { display:inline-flex; align-items: center; justify-content: center; text-decoration:none; border-radius:10px;overflow:hidden;box-shadow:0 3px 8px rgba(0,0,0,0.15); font-family:-apple-system,Segoe UI,Roboto,sans-serif } .bouton-vers-helloasso a span { background:#fff;padding:8px 10px;display:flex;align-items:center; } .bouton-vers-helloasso span:last-child { display: block; color: #9d8181; font-weight: 700; padding: 5px 26px; font-size: 15px; } */ .lien-vers-helloasso { display: flex; align-items: center; justify-content: center; flex-direction: column; } .lien-vers-helloasso > div { display: inline-flex; } .lien-vers-helloasso svg { height:36px; width: auto; margin : 0 12px; }