/* ============================================================================ site.css — thème enfant Divi (version de secours prête à l'emploi) Blocs 6 à 8 : correctifs d'intégration Divi, hauteurs 100svh, menu et formulaire mobiles, en-tête/pied de page hors conteneurs Divi. Recompiler avec npm run build pour les utilitaires Tailwind. ============================================================================ */ /* ========================================================================= FEUILLE SOURCE TAILWIND — thème enfant Divi Compilée vers assets/css/site.css (voir LISEZMOI.md du thème enfant). Structure : 1. Directives Tailwind 2. Tokens de thème (variables CSS jour / nuit) 3. Base ciblée (pas de preflight global : on ne casse pas Divi) 4. Composants : navigation, diaporama, services, contact, pied de page 5. Media queries responsive + accessibilité (mouvement réduit) Les classes d'état (.is-active, .is-open, .is-scrolled, .is-visible) sont permutées par assets/js/site.js. ========================================================================= */ /* ========================================================================= 2. TOKENS DE THÈME L'attribut data-theme est posé sur avant le premier rendu (script anti-flash dans functions.php), puis basculé par le bouton jour/nuit du pied de page. ========================================================================= */ :root { --nav-height: 80px; --gutter: 32px; --speed: 200ms; --speed-theme: 320ms; --ease: cubic-bezier(0.4, 0, 0.2, 1); --radius: 8px; --radius-sm: 4px; --orange-700: hsl(30, 100%, 34%); --orange-600: hsl(33, 100%, 41%); --orange-500: hsl(36, 100%, 48%); /* #F39200 */ --orange-400: hsl(40, 100%, 57%); --orange-100: hsl(38, 100%, 94%); --error-600: hsl(0, 72%, 42%); --error-400: hsl(0, 80%, 66%); --success-600: hsl(150, 62%, 30%); --success-400: hsl(150, 50%, 62%); --shadow-sm: 0 1px 3px hsl(225 10% 4% / 0.16), 0 1px 2px hsl(225 10% 4% / 0.10); --shadow-md: 0 4px 8px hsl(225 10% 4% / 0.18), 0 2px 4px hsl(225 10% 4% / 0.10); --shadow-lg: 0 16px 32px hsl(225 10% 4% / 0.24), 0 4px 8px hsl(225 10% 4% / 0.10); } [data-theme="light"] { --nav-bg: hsl(0, 0%, 100%); --nav-border: hsl(216, 10%, 90%); --nav-text: hsl(240, 8%, 3%); --page-bg: hsl(36, 45%, 97%); --page-text: hsl(228, 6%, 33%); --page-title: hsl(240, 8%, 3%); --page-muted: hsl(228, 5%, 52%); --panel-bg: hsl(36, 30%, 94%); --panel-border: hsl(36, 20%, 87%); --field-bg: hsl(0, 0%, 100%); --field-border: hsl(36, 18%, 82%); --error-color: var(--error-600); --success-color: var(--success-600); --footer-bg: hsl(36, 26%, 91%); --footer-panel: hsl(36, 20%, 85%); --footer-border: hsl(36, 16%, 76%); --footer-title: hsl(225, 15%, 14%); --footer-text: hsl(228, 8%, 30%); --footer-soft: hsl(228, 6%, 42%); --footer-muted: hsl(228, 5%, 52%); } [data-theme="dark"] { --nav-bg: hsl(225, 6%, 13%); --nav-border: hsl(228, 6%, 26%); --nav-text: hsl(220, 13%, 95%); --page-bg: hsl(225, 6%, 20%); --page-text: hsl(210, 9%, 87%); --page-title: hsl(220, 13%, 95%); --page-muted: hsl(214, 8%, 61%); --panel-bg: hsl(228, 6%, 17%); --panel-border: hsl(228, 6%, 26%); --field-bg: hsl(225, 7%, 11%); --field-border: hsl(228, 6%, 26%); --error-color: var(--error-400); --success-color: var(--success-400); --footer-bg: hsl(240, 4%, 6%); --footer-panel: hsl(225, 6%, 15%); --footer-border: hsl(228, 6%, 20%); --footer-title: hsl(220, 13%, 95%); --footer-text: hsl(210, 9%, 87%); --footer-soft: hsl(214, 8%, 73%); --footer-muted: hsl(214, 8%, 61%); } /* ========================================================================= 3. BASE CIBLÉE Preflight Tailwind désactivé : ces règles remplacent uniquement ce dont les gabarits ont besoin, sans toucher aux modules Divi standards. ========================================================================= */ html { scroll-behavior: smooth; } /* Accrochage vertical section par section : activé par site.js uniquement sur la page Services et uniquement en desktop */ html.has-snap { scroll-snap-type: y mandatory; } body { font-family: 'Noto Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 1rem; line-height: 1.6; color: var(--page-text); background-color: var(--page-bg); -webkit-font-smoothing: antialiased; overflow-x: hidden; transition: background-color var(--speed-theme) var(--ease), color var(--speed-theme) var(--ease); } /* Typographie d'affichage (titres) : Archivo élargie, à la Ginto Nord */ .font-display, .slide__title, .service__title, .contact-title, .site-footer__company { font-family: 'Archivo', 'Noto Sans', sans-serif; font-stretch: 112%; line-height: 1.05; letter-spacing: -0.02em; } /* Anneau de focus visible : accessibilité clavier */ .tpl a:focus-visible, .tpl button:focus-visible { outline: 3px solid var(--orange-500); outline-offset: 3px; border-radius: var(--radius-sm); } /* Réinitialisation locale, portée aux fragments intégrés (classe .tpl posée sur la racine de chaque module Code) */ .tpl, .tpl * , .tpl *::before, .tpl *::after { box-sizing: border-box; } .tpl h1, .tpl h2, .tpl h3, .tpl p, .tpl ul, .tpl li, .tpl figure { margin: 0; padding: 0; } .tpl ul { list-style: none; } .tpl img { max-width: 100%; display: block; } .tpl button { font: inherit; } .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .eyebrow { font-family: 'Archivo', sans-serif; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em; } /* Neutralisation des enrobages Divi autour des modules Code plein écran : aucune gouttière parasite entre les sections des gabarits */ .tpl-section .et_pb_code_inner, .tpl-section .et_pb_fullwidth_code { margin: 0; padding: 0; } /* ========================================================================= 4a. BARRE DE NAVIGATION (modèle d'en-tête global) ========================================================================= */ .site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 100; height: var(--nav-height); background-color: var(--nav-bg); border-bottom: 1px solid var(--nav-border); transition: box-shadow var(--speed) var(--ease), background-color var(--speed-theme) var(--ease), border-color var(--speed-theme) var(--ease); } /* La barre d'administration WordPress (32px) décale l'en-tête fixe */ body.admin-bar .site-header { top: 32px; } .site-header.is-scrolled { box-shadow: var(--shadow-md); } .site-header__inner { height: 100%; display: flex; align-items: center; justify-content: space-between; padding-left: var(--gutter); padding-right: var(--gutter); } .logo { width: 96px; height: 48px; background-color: var(--nav-text); border-radius: var(--radius); display: flex; align-items: center; justify-content: center; text-decoration: none; color: var(--nav-bg); font-family: 'Archivo', sans-serif; font-size: 0.875rem; font-weight: 800; letter-spacing: 0.06em; transition: opacity var(--speed) var(--ease), background-color var(--speed-theme) var(--ease), color var(--speed-theme) var(--ease); } .logo:hover { opacity: 0.82; } .nav { display: flex; align-items: center; gap: 48px; } .nav__link { position: relative; display: inline-block; padding: 8px 0; color: var(--nav-text); text-decoration: none; font-size: 1rem; font-weight: 500; transition: color var(--speed-theme) var(--ease); } .nav__link::after { content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 2px; border-radius: 2px; background-color: var(--orange-500); transform: scaleX(0); transform-origin: left center; transition: transform var(--speed) var(--ease); } .nav__link:hover::after, .nav__link:focus-visible::after, .nav__link.is-active::after { transform: scaleX(1); } .nav-toggle { display: none; width: 44px; height: 44px; border: none; background: transparent; cursor: pointer; padding: 0; flex-direction: column; align-items: center; justify-content: center; gap: 5px; } .nav-toggle span { display: block; width: 22px; height: 2px; border-radius: 2px; background-color: var(--nav-text); transition: transform var(--speed) var(--ease), opacity var(--speed) var(--ease); } .nav-toggle.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .nav-toggle.is-open span:nth-child(2) { opacity: 0; } .nav-toggle.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* ========================================================================= 4b. DIAPORAMA PLEIN ÉCRAN (page Accueil) ========================================================================= */ .hero { position: relative; width: 100%; height: 100vh; height: 100svh; overflow: hidden; background-color: hsl(225, 6%, 13%); } .slide { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity 700ms var(--ease), visibility 700ms var(--ease); } .slide.is-active { opacity: 1; visibility: visible; z-index: 1; } .slide__media { position: absolute; inset: 0; background-size: cover; background-position: center; filter: contrast(0.9) saturate(0.85) brightness(0.95); transform: scale(1.06); transition: transform 7000ms linear; } .slide.is-active .slide__media { transform: scale(1); } .slide__overlay { position: absolute; inset: 0; background: linear-gradient(to bottom, hsl(225 6% 8% / 0.58) 0%, hsl(225 6% 8% / 0.72) 50%, hsl(225 6% 8% / 0.62) 100%); } .slide__content { position: relative; z-index: 2; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: var(--nav-height) var(--gutter) 140px; } .slide__title { color: hsl(220, 13%, 95%); font-size: 4.5rem; font-weight: 800; max-width: 16ch; text-shadow: 0 2px 24px hsl(225 6% 8% / 0.85); } .slide__subtitle { margin-top: 24px; color: hsl(210, 9%, 87%); font-size: 1.25rem; font-weight: 400; line-height: 1.5; max-width: 46ch; text-shadow: 0 2px 16px hsl(225 6% 8% / 0.75); } /* --- Bouton d'action principal (partagé Accueil / Contact) --- */ .btn { display: inline-flex; align-items: center; gap: 12px; margin-top: 48px; padding: 14px 32px; background-color: var(--orange-500); color: hsl(0, 0%, 100%); text-decoration: none; font-family: 'Noto Sans', sans-serif; font-size: 1rem; font-weight: 600; border: none; border-radius: var(--radius); border-top: 1px solid var(--orange-400); box-shadow: var(--shadow-md); cursor: pointer; transition: transform var(--speed) var(--ease); } .btn__arrow { display: block; transition: transform var(--speed) var(--ease); } .btn:hover .btn__arrow, .btn:focus-visible .btn__arrow { transform: translateX(5px); } .btn:active { transform: scale(0.98); } /* --- Commandes du diaporama --- */ .hero__nav { position: absolute; z-index: 3; bottom: 48px; left: 50%; transform: translateX(-50%); display: flex; gap: 16px; } .hero__dot { position: relative; width: 56px; padding: 8px 0 0; border: none; background: transparent; cursor: pointer; color: hsl(214, 8%, 61%); font-family: 'Archivo', sans-serif; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; transition: color var(--speed) var(--ease); } .hero__dot::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 2px; border-radius: 2px; background-color: hsl(0 0% 100% / 0.32); } .hero__dot::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 2px; border-radius: 2px; background-color: var(--orange-500); transform: scaleX(0); transform-origin: left center; } .hero__dot.is-active { color: hsl(220, 13%, 95%); } .hero__dot.is-active::after { transform: scaleX(1); transition: transform 6000ms linear; } .hero__dot:hover { color: hsl(220, 13%, 95%); } .hero__arrow { position: absolute; z-index: 3; top: 50%; transform: translateY(-50%); width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; background-color: hsl(0 0% 100% / 0.10); border: 1px solid hsl(0 0% 100% / 0.22); border-radius: var(--radius); color: hsl(220, 13%, 95%); cursor: pointer; transition: background-color var(--speed) var(--ease); } .hero__arrow:hover { background-color: hsl(0 0% 100% / 0.22); } .hero__arrow--prev { left: var(--gutter); } .hero__arrow--next { right: var(--gutter); } /* ========================================================================= 4c. SECTIONS DE SERVICE (page Services) ========================================================================= */ .service { display: grid; grid-template-columns: 1fr 1fr; width: 100%; min-height: 100vh; min-height: 100svh; scroll-snap-align: start; scroll-snap-stop: always; } .service__media { position: relative; background-size: cover; background-position: center; filter: contrast(0.95) saturate(0.9); } .service__media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(140deg, hsl(36 60% 20% / 0.22), hsl(225 20% 8% / 0.34)); } .service__panel { display: flex; flex-direction: column; justify-content: center; background-color: var(--panel-bg); padding: calc(var(--nav-height) + 48px) 64px 64px; overflow-y: auto; transition: background-color var(--speed-theme) var(--ease); } .service__inner { max-width: 60ch; transition: opacity 400ms ease; } .service:not(.is-active) .service__inner { opacity: 0; transition: opacity 400ms ease; } .service__icon { width: 56px; height: 56px; display: flex; align-items: center; justify-content: center; background-color: var(--orange-500); color: hsl(0, 0%, 100%); border-radius: var(--radius); border-top: 1px solid var(--orange-400); box-shadow: var(--shadow-sm); margin-bottom: 24px; } .service__title { color: var(--page-title); font-size: 3rem; font-weight: 800; margin-bottom: 24px; } .service__text p { margin-bottom: 16px; } .service__text p:last-child { margin-bottom: 0; } .service--reversed .service__media { grid-column: 2; grid-row: 1; } .service--reversed .service__panel { grid-column: 1; grid-row: 1; } /* Indicateur de progression vertical */ .progress { position: fixed; z-index: 90; right: var(--gutter); top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 4px; padding: 8px; background-color: var(--panel-bg); border: 1px solid var(--panel-border); border-radius: var(--radius); box-shadow: var(--shadow-md); transition: background-color var(--speed-theme) var(--ease); } .progress__item { width: 36px; padding: 8px 0; border: none; background: transparent; cursor: pointer; color: var(--page-muted); font-family: 'Archivo', sans-serif; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; border-radius: var(--radius-sm); transition: color var(--speed) var(--ease), background-color var(--speed) var(--ease); } .progress__item:hover { color: var(--page-title); } .progress__item.is-active { background-color: var(--orange-500); color: hsl(0, 0%, 100%); } /* ========================================================================= 4d. PAGE CONTACT — formulaire, informations, carte ========================================================================= */ .contact-hero { display: grid; grid-template-columns: 1fr 1fr; width: 100%; min-height: 100vh; min-height: 100svh; } .contact-hero__panel { display: flex; flex-direction: column; justify-content: center; align-items: center; background-color: var(--panel-bg); padding: calc(var(--nav-height) + 48px) 64px 64px; overflow-y: auto; transition: background-color var(--speed-theme) var(--ease); } .contact-hero__inner { width: 100%; max-width: 520px; } .contact-title { color: var(--page-title); font-size: 3rem; font-weight: 800; margin-bottom: 12px; } .contact-intro { color: var(--page-muted); margin-bottom: 32px; max-width: 46ch; } .contact-hero__media { position: relative; background-size: cover; background-position: center; filter: contrast(0.95) saturate(0.9); } .contact-hero__media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(140deg, hsl(36 60% 20% / 0.20), hsl(225 20% 8% / 0.32)); } .form__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 16px; } .field { grid-column: 1 / -1; display: flex; flex-direction: column; } .field--half { grid-column: span 1; } .field__label { font-size: 0.875rem; font-weight: 600; color: var(--page-text); margin-bottom: 8px; } .field__required { color: var(--orange-700); font-weight: 700; } [data-theme="dark"] .field__required { color: var(--orange-500); } .field__input { width: 100%; padding: 12px 16px; font-family: inherit; font-size: 1rem; color: var(--page-title); background-color: var(--field-bg); border: 1px solid var(--field-border); border-radius: var(--radius); box-shadow: inset 0 1px 2px hsl(225 10% 4% / 0.08); transition: border-color var(--speed) var(--ease), box-shadow var(--speed) var(--ease), background-color var(--speed-theme) var(--ease); } .field__input::placeholder { color: var(--page-muted); } .field__input:focus { outline: none; border-color: var(--orange-500); box-shadow: 0 0 0 3px hsl(36 100% 48% / 0.25); } .field__input[aria-invalid="true"] { border-color: var(--error-color); } .field__input[aria-invalid="true"]:focus { box-shadow: 0 0 0 3px hsl(0 72% 50% / 0.22); } textarea.field__input { min-height: 120px; resize: vertical; } .field__error { display: none; align-items: center; gap: 8px; margin-top: 8px; font-size: 0.875rem; color: var(--error-color); } .field__error.is-visible { display: flex; } .field__error svg { flex-shrink: 0; } .consent { grid-column: 1 / -1; display: flex; align-items: flex-start; gap: 12px; margin-top: 8px; } .consent__box { width: 20px; height: 20px; flex-shrink: 0; margin-top: 3px; accent-color: var(--orange-500); cursor: pointer; } .consent__text { font-size: 0.875rem; color: var(--page-text); cursor: pointer; } .consent__text a { color: var(--orange-700); text-decoration: underline; } [data-theme="dark"] .consent__text a { color: var(--orange-500); } .form .btn { grid-column: 1 / -1; justify-self: start; margin-top: 16px; } .form__success { display: none; align-items: center; gap: 12px; margin-top: 24px; padding: 16px; border-left: 3px solid var(--success-color); background-color: var(--field-bg); border-radius: 0 var(--radius) var(--radius) 0; color: var(--success-color); font-size: 0.875rem; } .form__success.is-visible { display: flex; } .infos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 64px; padding: 96px var(--gutter); background-color: var(--page-bg); transition: background-color var(--speed-theme) var(--ease); } .infos__icon { width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; background-color: var(--orange-500); color: hsl(0, 0%, 100%); border-radius: var(--radius); border-top: 1px solid var(--orange-400); box-shadow: var(--shadow-sm); margin-bottom: 16px; } .infos__heading { color: var(--page-muted); margin-bottom: 12px; } .infos__value { font-size: 1.125rem; font-weight: 600; color: var(--page-title); line-height: 1.4; } .infos__value a { color: inherit; text-decoration: none; } .infos__value a:hover { color: var(--orange-700); } [data-theme="dark"] .infos__value a:hover { color: var(--orange-500); } .infos__note { font-size: 0.875rem; color: var(--page-muted); margin-top: 8px; } .map { position: relative; width: 100%; height: 460px; background-color: var(--panel-bg); border-top: 1px solid var(--panel-border); } .map iframe { width: 100%; height: 100%; border: 0; display: block; } .map__note { padding: 12px var(--gutter); font-size: 0.75rem; color: var(--page-muted); background-color: var(--page-bg); } .map__note a { color: inherit; text-decoration: underline; } /* ========================================================================= 4e. PIED DE PAGE (modèle global) ========================================================================= */ .site-footer { background-color: var(--footer-bg); color: var(--footer-soft); border-top: 3px solid var(--orange-500); padding-top: 96px; padding-bottom: 48px; scroll-snap-align: end; transition: background-color var(--speed-theme) var(--ease); } .site-footer__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 64px; padding-left: var(--gutter); padding-right: var(--gutter); } .site-footer__col--center { text-align: center; } .site-footer__col--right { text-align: right; } .site-footer__heading { color: var(--footer-muted); margin-bottom: 24px; } .site-footer__company { font-size: 1.25rem; font-weight: 800; color: var(--footer-title); margin-bottom: 12px; } .site-footer__info li { font-size: 0.875rem; margin-bottom: 8px; } .site-footer__info a { color: var(--footer-soft); text-decoration: none; transition: color var(--speed) var(--ease); } .site-footer__info a:hover { color: var(--footer-title); } .site-footer__nav li { margin-bottom: 12px; } .site-footer__nav a { position: relative; display: inline-block; color: var(--footer-text); text-decoration: none; font-size: 1rem; font-weight: 500; padding-bottom: 2px; transition: color var(--speed) var(--ease); } .site-footer__nav a::after { content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 2px; border-radius: 2px; background-color: var(--orange-500); transform: scaleX(0); transform-origin: left center; transition: transform var(--speed) var(--ease); } .site-footer__nav a:hover::after, .site-footer__nav a:focus-visible::after { transform: scaleX(1); } .site-footer__nav a:hover { color: var(--footer-title); } .socials { display: flex; justify-content: flex-end; gap: 12px; } .socials a { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; background-color: var(--footer-panel); border-radius: var(--radius); color: var(--footer-soft); transition: background-color var(--speed) var(--ease), color var(--speed) var(--ease); } .socials a:hover { background-color: var(--orange-500); color: hsl(0, 0%, 100%); } .theme-switch { margin-top: 32px; display: flex; flex-direction: column; align-items: flex-end; gap: 12px; } .theme-toggle { position: relative; display: inline-flex; align-items: center; width: 88px; height: 44px; padding: 4px; border: none; background-color: var(--footer-panel); border-radius: var(--radius); cursor: pointer; transition: background-color var(--speed-theme) var(--ease); } .theme-toggle__knob { position: absolute; top: 6px; left: 6px; width: calc(50% - 6px); height: calc(100% - 12px); border-top: 1px solid hsl(0 0% 100% / 0.35); box-shadow: var(--shadow-sm); transition: transform var(--speed-theme) var(--ease), background-color var(--speed-theme) var(--ease), border-radius var(--speed-theme) var(--ease); } [data-theme="light"] .theme-toggle__knob { background-color: hsl(240, 8%, 3%); border-radius: var(--radius-sm) 0 0 var(--radius-sm); } [data-theme="dark"] .theme-toggle__knob { background-color: var(--orange-500); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; transform: translateX(100%); } .theme-toggle__icon { position: relative; z-index: 1; flex: 1; display: flex; align-items: center; justify-content: center; color: var(--footer-muted); transition: color var(--speed-theme) var(--ease); } [data-theme="light"] .theme-toggle__icon--sun { color: hsl(0, 0%, 100%); } [data-theme="dark"] .theme-toggle__icon--moon { color: hsl(0, 0%, 100%); } .theme-switch__label { font-size: 0.875rem; color: var(--footer-muted); } .site-footer__bottom { margin-top: 64px; padding: 24px var(--gutter) 0; border-top: 1px solid var(--footer-border); font-size: 0.875rem; color: var(--footer-muted); display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; } .site-footer__bottom a { color: var(--footer-muted); text-decoration: none; } .site-footer__bottom a:hover { color: var(--footer-title); text-decoration: underline; } /* ========================================================================= 5a. VUE TABLETTE (jusqu'à 1024px) ========================================================================= */ @media (max-width: 1024px) { :root { --nav-height: 72px; --gutter: 24px; } .nav { gap: 32px; } .slide__title { font-size: 3.75rem; } .slide__subtitle { font-size: 1.125rem; } .hero__arrow { width: 44px; height: 44px; } .service__title { font-size: 2.25rem; } .service { grid-template-columns: 38% 62%; } .service--reversed { grid-template-columns: 62% 38%; } .service__panel { padding: calc(var(--nav-height) + 32px) 32px 32px; } .service__icon { width: 48px; height: 48px; } .contact-title { font-size: 2.25rem; } .contact-hero { grid-template-columns: 58% 42%; } .contact-hero__panel { padding: calc(var(--nav-height) + 32px) 32px 32px; } .infos { padding: 64px var(--gutter); } .site-footer__grid { grid-template-columns: 1fr 1fr; gap: 48px; } .site-footer__col--left { grid-column: 1 / -1; } .site-footer__col--center { text-align: left; } } /* ========================================================================= 5b. VUE MOBILE (jusqu'à 768px) ========================================================================= */ @media (max-width: 768px) { :root { --nav-height: 64px; --gutter: 20px; } /* L'accrochage forcé n'a pas de sens sur mobile */ html.has-snap { scroll-snap-type: none; } .service__inner, .service:not(.is-active) .service__inner { opacity: 1; } .logo { width: 80px; height: 40px; font-size: 0.75rem; } .nav-toggle { display: flex; } .nav { position: fixed; top: var(--nav-height); left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0; background-color: var(--nav-bg); border-bottom: 1px solid var(--nav-border); box-shadow: var(--shadow-lg); padding: 8px var(--gutter) 24px; clip-path: circle(0% at calc(100% - 20px) 0%); visibility: hidden; pointer-events: none; transition: clip-path 480ms var(--ease), visibility 480ms var(--ease); } body.admin-bar .nav { top: calc(var(--nav-height) + 46px); } .nav.is-open { clip-path: circle(150% at calc(100% - 20px) 0%); visibility: visible; pointer-events: auto; } .nav__link { padding: 16px 0; border-bottom: 1px solid var(--nav-border); font-size: 1.125rem; opacity: 0; transform: translateY(-6px); transition: opacity 240ms var(--ease), transform 240ms var(--ease), color var(--speed-theme) var(--ease); } .nav.is-open .nav__link { opacity: 1; transform: translateY(0); } .nav.is-open .nav__link:nth-child(1) { transition-delay: 120ms; } .nav.is-open .nav__link:nth-child(2) { transition-delay: 200ms; } .nav.is-open .nav__link:nth-child(3) { transition-delay: 280ms; } .nav__link::after { width: 3px; height: 24px; top: 50%; bottom: auto; left: calc(var(--gutter) * -1); transform: translateY(-50%) scaleY(0); transform-origin: center top; } .nav__link:hover::after, .nav__link:focus-visible::after, .nav__link.is-active::after { transform: translateY(-50%) scaleY(1); } .slide__title { font-size: 2.25rem; } .slide__subtitle { font-size: 1rem; max-width: 34ch; } .slide__content { padding-bottom: 120px; } .hero__arrow { display: none; } .hero__dot { width: 44px; } .hero__nav { gap: 8px; } .service, .service--reversed { grid-template-columns: 1fr; min-height: 0; } .service__media, .service--reversed .service__media { grid-column: 1; grid-row: 1; min-height: 40svh; } .service__panel, .service--reversed .service__panel { grid-column: 1; grid-row: 2; padding: 48px var(--gutter); overflow-y: visible; } .service:first-of-type .service__media { padding-top: var(--nav-height); } .service__title { font-size: 1.5rem; } .progress { display: none; } .contact-hero { grid-template-columns: 1fr; min-height: 0; } .contact-hero__media { min-height: 32svh; grid-row: 1; padding-top: var(--nav-height); } .contact-hero__panel { grid-row: 2; padding: 48px var(--gutter); } .contact-title { font-size: 1.5rem; } .field--half { grid-column: 1 / -1; } .infos { grid-template-columns: 1fr; padding: 48px var(--gutter); } .map { height: 340px; } .site-footer__grid { grid-template-columns: 1fr; gap: 48px; } .site-footer__col--left, .site-footer__col--center, .site-footer__col--right { text-align: center; } .socials { justify-content: center; } .theme-switch { align-items: center; } .site-footer__bottom { flex-direction: column; align-items: center; text-align: center; gap: 8px; } } /* ========================================================================= 5c. ACCESSIBILITÉ — mouvement réduit ========================================================================= */ @media (prefers-reduced-motion: reduce) { .tpl *, .tpl *::before, .tpl *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; } html { scroll-behavior: auto; } html.has-snap { scroll-snap-type: none; } } /* ========================================================================= 6. CORRECTIFS D'INTÉGRATION DIVI Ces règles neutralisent les enrobages que Divi ajoute autour de nos modules Code. Sans elles, Divi réserve de la place là où nos gabarits n'en veulent pas (espace sous la barre de navigation, décalage du diaporama) et impose ses propres styles de champs de formulaire. ========================================================================= */ /* ------------------------------------------------------------------------- 6a. MODÈLE D'EN-TÊTE — la barre doit coller au haut de l'écran .site-header est en position:fixed, donc hors du flux : son conteneur Divi ne doit occuper AUCUNE hauteur. Par défaut une section Divi porte 54px de rembourrage haut et bas — c'est précisément l'espace vide qui repoussait le diaporama vers le bas. ------------------------------------------------------------------------- */ .et-l--header, .et-l--header .et_builder_inner_content, .et-l--header .et_pb_section, .et-l--header .et_pb_row, .et-l--header .et_pb_column { margin: 0 !important; padding: 0 !important; min-height: 0 !important; /* Supprime les espaces fantômes générés par les retours à la ligne entre les balises Divi */ line-height: 0; font-size: 0; } .et-l--header .et_pb_module, .et-l--header .et_pb_code_inner, .et-l--header .et_pb_fullwidth_code { margin: 0 !important; padding: 0 !important; } /* Notre en-tête retrouve une typographie normale à l'intérieur */ .et-l--header .site-header { line-height: 1.6; font-size: 1rem; } /* Un ancêtre portant transform, filter, perspective ou contain devient le référent d'un position:fixed : la barre se positionnerait alors par rapport à ce conteneur au lieu de la fenêtre, et ne collerait plus en haut de l'écran. On neutralise ces propriétés sur la chaîne d'ancêtres. */ #et-boc, .et-l--header, .et-l--header .et_builder_inner_content, .et-l--header .et_pb_section { transform: none !important; filter: none !important; perspective: none !important; backdrop-filter: none !important; will-change: auto !important; contain: none !important; } /* L'en-tête reste au-dessus du contenu des pages */ .et-l--header { position: relative; z-index: 100; } /* ------------------------------------------------------------------------- 6b. CONTENEUR DE PAGE — aucun espace réservé en haut Divi réserve parfois une hauteur en haut du conteneur pour son propre menu, qui n'est pas utilisé ici. ------------------------------------------------------------------------- */ #page-container { padding-top: 0 !important; } .et_pb_pagebuilder_layout #main-content .container, #main-content > .container { padding-top: 0 !important; } /* ------------------------------------------------------------------------- 6c. SECTIONS DES GABARITS — plein écran, sans gouttière S'applique aux trois pages (Accueil, Services, Contact) : c'est ce qui supprime l'espace visible sous la barre de navigation. ------------------------------------------------------------------------- */ .tpl-section, .tpl-section .et_pb_row, .tpl-section .et_pb_column, .tpl-section .et_pb_module, .tpl-section .et_pb_code_inner, .tpl-section .et_pb_fullwidth_code { margin: 0 !important; padding: 0 !important; width: 100%; max-width: none; } /* ------------------------------------------------------------------------- 6d. MODÈLE DE PIED DE PAGE Même traitement, mais le pied de page reste dans le flux : on retire seulement les gouttières, pas la hauteur. ------------------------------------------------------------------------- */ .et-l--footer .et_pb_section, .et-l--footer .et_pb_row, .et-l--footer .et_pb_column, .et-l--footer .et_pb_module, .et-l--footer .et_pb_code_inner, .et-l--footer .et_pb_fullwidth_code { margin: 0 !important; padding: 0 !important; width: 100%; max-width: none; } /* ------------------------------------------------------------------------- 6e. CHAMPS DU FORMULAIRE — hauteur confortable Divi applique ses propres styles aux input/textarea avec une spécificité élevée, ce qui écrasait notre rembourrage et tassait les champs. Le sélecteur ci-dessous passe devant, et min-height garantit la hauteur quoi qu'il arrive. ------------------------------------------------------------------------- */ .tpl .field__input, #et-boc .tpl .field__input, .et-l .tpl .field__input { min-height: 54px; padding: 15px 16px !important; line-height: 1.5; font-size: 1rem; /* 16px : empêche le zoom automatique sur iOS */ background-color: var(--field-bg); border: 1px solid var(--field-border); border-radius: var(--radius); } .tpl textarea.field__input, #et-boc .tpl textarea.field__input, .et-l .tpl textarea.field__input { min-height: 170px; padding: 15px 16px !important; } /* La case à cocher du consentement garde sa taille de cible tactile */ .tpl .consent__box, #et-boc .tpl .consent__box { width: 20px; height: 20px; min-height: 0; } /* Un peu plus d'air entre les champs, cohérent avec des champs plus hauts */ .tpl .form__grid { gap: 20px 16px; } /* ========================================================================= 7. CORRECTIFS DE HAUTEUR, MENU MOBILE ET FORMULAIRE MOBILE Ce bloc vient après le bloc 6 : à spécificité égale, c'est lui qui gagne. ========================================================================= */ /* ------------------------------------------------------------------------- 7a. LE MODÈLE D'EN-TÊTE N'OCCUPE PLUS AUCUNE HAUTEUR Complément du bloc 6a : même si un wrapper Divi conserve une hauteur propre (bordure, ligne de base, marge d'un parent), height:0 la supprime définitivement. overflow:visible laisse la barre fixe et le panneau du menu mobile déborder normalement. ------------------------------------------------------------------------- */ .et-l--header { height: 0 !important; overflow: visible !important; } /* ------------------------------------------------------------------------- 7b. BARRE D'ADMINISTRATION WORDPRESS Connecté, WordPress ajoute « html { margin-top: 32px } ». Les sections en 100svh dépassaient donc de 32px : c'est ce qui faisait défiler le diaporama au-delà d'un écran. Invisible pour les visiteurs déconnectés. ------------------------------------------------------------------------- */ body.admin-bar .hero { height: calc(100svh - 32px); } body.admin-bar .service, body.admin-bar .contact-hero { min-height: calc(100svh - 32px); } /* En dessous de 782px, la barre d'administration passe à 46px */ @media (max-width: 782px) { body.admin-bar .hero { height: calc(100svh - 46px); } body.admin-bar .service, body.admin-bar .contact-hero { min-height: calc(100svh - 46px); } } /* ------------------------------------------------------------------------- 7c. MENU MOBILE — panneau fiable L'ouverture reposait uniquement sur clip-path : une seule propriété mal supportée ou écrasée par un style Divi et le panneau restait invisible, sans aucun message d'erreur. On repasse sur opacité + translation, qui dégradent proprement, et on remonte le panneau au-dessus des calques Divi. ------------------------------------------------------------------------- */ @media (max-width: 768px) { .tpl .nav { clip-path: none; opacity: 0; transform: translateY(-8px); visibility: hidden; pointer-events: none; z-index: 99; /* Un menu plus long que l'écran reste atteignable au doigt */ max-height: calc(100svh - var(--nav-height)); overflow-y: auto; -webkit-overflow-scrolling: touch; transition: opacity 260ms var(--ease), transform 260ms var(--ease), visibility 260ms var(--ease); } .tpl .nav.is-open { opacity: 1; transform: translateY(0); visibility: visible; pointer-events: auto; } /* Les liens ne dépendent plus d'une animation en cascade : ils sont visibles dès que le panneau l'est. Un lien invisible reste cliquable, donc un décalage d'animation raté rendait le menu « mort ». */ .tpl .nav .nav__link { opacity: 1; transform: none; transition-delay: 0ms; /* Cible tactile confortable sur toute la largeur */ padding: 18px 0; } .tpl .nav .nav__link:last-child { border-bottom: none; } /* Bouton hamburger toujours au-dessus du panneau, pour pouvoir refermer */ .tpl .nav-toggle { position: relative; z-index: 101; } } /* La page ne défile plus derrière le panneau ouvert (classe posée par le JS) */ body.nav-open { overflow: hidden; } /* ------------------------------------------------------------------------- 7d. FORMULAIRE EN VUE MOBILE Sur un écran tactile, les champs doivent être nettement plus hauts qu'en desktop : la cible recommandée est d'au moins 48px, on passe à 56px. ------------------------------------------------------------------------- */ @media (max-width: 768px) { .tpl .field__input, #et-boc .tpl .field__input, .et-l .tpl .field__input { min-height: 56px; padding: 16px !important; font-size: 1rem; /* 16px : pas de zoom automatique iOS */ } .tpl textarea.field__input, #et-boc .tpl textarea.field__input, .et-l .tpl textarea.field__input { min-height: 180px; } /* Plus d'air vertical entre les groupes : l'étiquette reste clairement rattachée à SON champ et non au précédent */ .tpl .form__grid { gap: 24px 16px; } .tpl .field__label { font-size: 0.9375rem; /* 15px : lisible sans loupe */ margin-bottom: 10px; } /* Case à cocher du consentement : cible tactile agrandie */ .tpl .consent__box { width: 24px; height: 24px; margin-top: 2px; } .tpl .consent__text { font-size: 0.9375rem; } /* Bouton d'envoi pleine largeur : plus facile à atteindre au pouce */ .tpl .form .btn { width: 100%; justify-content: center; padding: 18px 32px; margin-top: 8px; } } /* ========================================================================= 8. EN-TÊTE ET PIED DE PAGE HORS CONTENEURS DIVI Depuis que le balisage est injecté par PHP (wp_body_open / wp_footer), il n'y a plus AUCUN conteneur Divi autour de la barre de navigation : les correctifs des blocs 6 et 7 qui visaient .et-l--header deviennent sans objet, mais restent en place (inoffensifs) au cas où un modèle du Theme Builder serait réactivé. ========================================================================= */ /* ------------------------------------------------------------------------- 8a. L'en-tête et le pied de page natifs de Divi sont remplacés par les nôtres : sans cette règle, le menu Divi par défaut réapparaîtrait en haut de page dès la suppression des modèles du Theme Builder. ------------------------------------------------------------------------- */ #main-header, #top-header, #et-secondary-nav, .et_slide_in_menu_container, #main-footer { display: none !important; } /* ------------------------------------------------------------------------- 8b. Divi réserve une hauteur en haut du conteneur de page pour son propre menu fixe. Notre barre étant en position:fixed et hors flux, cet espace est exactement celui visible entre la navigation et le contenu. Le !important d'une feuille de style l'emporte sur un style en ligne. ------------------------------------------------------------------------- */ #page-container { padding-top: 0 !important; margin-top: 0 !important; } #et-main-area, #main-content { padding-top: 0 !important; margin-top: 0 !important; } /* Divi ajoute parfois une marge au premier module d'une page */ #main-content .et_pb_section:first-of-type, #et-main-area .et_pb_section:first-of-type { margin-top: 0 !important; padding-top: 0 !important; } /* ------------------------------------------------------------------------- 8c. Le pied de page injecté doit occuper toute la largeur, sous le contenu ------------------------------------------------------------------------- */ body > .site-footer { position: relative; z-index: 1; width: 100%; } /* ------------------------------------------------------------------------- 8d. Le diaporama occupe exactement un écran L'en-tête ne contribuant plus à la hauteur du document, 100svh suffit. Seule la barre d'administration WordPress reste à compenser (bloc 7b). ------------------------------------------------------------------------- */ body > .site-header ~ * .hero { height: 100svh; }