/************************************************************ FONTS ************************************************************/ body { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-size: 14px; color: #000; line-height: initial; } /* Optimisation globale du rendu SVG */ svg { shape-rendering: geometricPrecision; text-rendering: geometricPrecision; } svg, img { -webkit-transform: translateZ(0); transform: translateZ(0); } /************************************************************ HELPER CLASS ************************************************************/ .font-weight-300{font-weight:300!important} .font-weight-400{font-weight:400!important} .font-weight-500{font-weight:500!important} .font-weight-600{font-weight:600!important} .font-weight-700{font-weight:700!important} .font-weight-900{font-weight:900!important} .font-size-1{font-size:.6rem!important} .font-size-2{font-size:.7rem!important} .font-size-2-5{font-size:.8rem!important} .font-size-3{font-size:.9rem!important} .font-size-3-5{font-size:1rem!important} .font-size-4{font-size:1.15rem!important} .font-size-5{font-size:1.3rem!important} /* font-size-6 est la taille du TEXTE COURANT du site (articles, blocs de texte, FAQ, colonnes left/right). Elle était figée à 1.45rem, soit 23,2 px de 320 à 2560 px : confortable sur grand écran, mais très gros sur un téléphone, où ça tombe à environ 25 caractères par ligne. La borne haute ne bouge pas — l'aspect du site en desktop est inchangé ; seule la borne basse descend à 1.25rem (20 px), atteinte sous ~580 px. Courbe continue, donc aucun saut à un point de rupture. */ .font-size-6{font-size:clamp(1.25rem, 1.05rem + 0.55vw, 1.45rem)!important} .font-size-7{font-size:1.6rem!important} .font-size-7-5{font-size:1.9rem!important} .font-size-8{font-size:2.2rem!important} .font-size-9{font-size:2.75rem!important} .font-size-10{font-size:3rem!important} .font-size-11{font-size:3.75rem!important} .font-size-12{font-size:4.4rem!important} .font-size-13{font-size:5rem!important} .font-size-15{font-size:6rem!important} .font-size-vw-1{font-size:clamp(0.35rem, 0.6vw, 0.85rem)!important} .font-size-vw-2{font-size:clamp(0.4rem, 0.7vw, 1rem)!important} .font-size-vw-2-5{font-size:clamp(0.45rem, 0.8vw, 1.15rem)!important} .font-size-vw-3{font-size:clamp(0.5rem, 0.9vw, 1.25rem)!important} .font-size-vw-3-5{font-size:clamp(0.55rem, 1vw, 1.4rem)!important} .font-size-vw-4{font-size:clamp(0.6rem, 1.1vw, 1.6rem)!important} .font-size-vw-5{font-size:clamp(0.7rem, 1.3vw, 1.8rem)!important} .font-size-vw-6{font-size:clamp(0.8rem, 1.45vw, 2rem)!important} .font-size-vw-7{font-size:clamp(0.9rem, 1.6vw, 2.2rem)!important} .font-size-vw-7-5{font-size:clamp(1rem, 1.9vw, 2.65rem)!important} .font-size-vw-8{font-size:clamp(1.2rem, 2.2vw, 3.1rem)!important} .font-size-vw-9{font-size:clamp(1.5rem, 2.75vw, 3.85rem)!important} .font-size-vw-10{font-size:clamp(1.6rem, 3vw, 4.2rem)!important} .font-size-vw-11{font-size:clamp(2rem, 3.75vw, 5.25rem)!important} .font-size-vw-11-5{font-size: clamp(2.1rem, 4.8vw, 6rem) !important;} .font-size-vw-12{font-size: clamp(2.1rem, 5.6vw, 6.4rem) !important;} .font-size-vw-13{font-size:clamp(2.5rem, 6.6vw, 7rem)!important} .font-size-vw-14{font-size:clamp(2.8rem, 7vw, 7.8rem)!important} .font-size-vw-15{font-size:clamp(3.2rem, 7.4vw, 8.4rem)!important} /* Plancher abaissé de 5.2rem à 3.4rem : à 83px le titre de #home-details (« Crédibilité, confiance. ») réclamait 413px de large dans une colonne de 375px et se faisait rogner par l'overflow:hidden de la section. La borne haute et la pente en vw ne changent pas — au-dessus de ~600px l'affichage est identique à avant. Classe utilisée uniquement par #home-details. */ .font-size-vw-17{font-size: clamp(3.4rem, 9vw, 11.4rem) !important;} .font-size-vw-30{font-size: clamp(10.2rem, 18vw, 24.4rem) !important;} .mb-vw-1{margin-bottom:clamp(0.35rem, 0.6vw, 0.85rem)!important} .mb-vw-2{margin-bottom:clamp(0.4rem, 0.7vw, 1rem)!important} .mb-vw-3{margin-bottom:clamp(0.5rem, 0.9vw, 1.25rem)!important} .mb-vw-4{margin-bottom:clamp(0.6rem, 1.1vw, 1.6rem)!important} .mb-vw-5{margin-bottom:clamp(0.7rem, 1.3vw, 1.8rem)!important} .mb-vw-6{margin-bottom:clamp(0.8rem, 1.45vw, 2rem)!important} .mb-vw-7{margin-bottom:clamp(0.9rem, 1.6vw, 2.2rem)!important} .mb-vw-8{margin-bottom:clamp(1.2rem, 2.2vw, 3.1rem)!important} .mb-vw-9{margin-bottom:clamp(1.5rem, 2.75vw, 3.85rem)!important} .mb-vw-10{margin-bottom:clamp(1.6rem, 3vw, 4.2rem)!important} .mb-vw-11{margin-bottom:clamp(2rem, 3.75vw, 5.25rem)!important} .mb-vw-12{margin-bottom:clamp(2.1rem, 5.6vw, 6.4rem)!important} .font-color-link{color:#128488!important} .font-color-grey-6{color:#111!important} .font-color-grey-5{color:#333!important} .font-color-grey-4{color:#484848!important} .font-color-grey-3{color:#6c6c6c!important} .font-color-grey-2{color:#848484!important} .font-color-grey-1{color:#e1e1e1!important} .font-color-white{color:#fff!important} .font-color-white-80{color:rgba(255, 255, 255, 0.8)!important} .font-color-white-60{color:rgba(255, 255, 255, 0.6)!important} .font-color-white-40{color:rgba(255, 255, 255, 0.4)!important} .font-color-black{color:#000000!important} .font-color-black-60{color:rgba(0, 0, 0, 0.6)!important} .link-no-color{color:initial} .font-color-green{color:#00b95a!important} .font-color-yellow{color:#ffbc00!important} .font-color-red{color:#ea3929!important} .bg-link{background-color:#128488!important} .bg-white{background-color:#fff!important} .bg-grey-0{background-color:#f8f8f8!important} .bg-grey-1{background-color:#e1e1e1!important} .bg-grey-2{background-color:#848484!important} .bg-grey-3{background-color:#6c6c6c!important} .bg-grey-4{background-color:#484848!important} .bg-grey-5{background-color:#333!important} .bg-grey-6{background-color:#111!important} .bg-primary,.background-primary{background-color:#ffc700!important} .bg-pro,.background-pro{background-color:#00a0de!important} .bg-green{background-color:#00b95a!important} .bg-white{background-color:#fff!important} .line-height-p{line-height:1.9rem} .mt-4-5,.my-4-5{margin-top:2.25rem!important} .mb-4-5,.my-4-5{margin-bottom:2.25rem!important} .mx-4-5,.mr-4-5{margin-right:2.25rem!important} .mx-4-5,.ml-4-5{margin-left:2.25rem!important} .px-4-5,.pr-4-5{padding-right:2.25rem!important} .px-4-5,.pl-4-5{padding-left:2.25rem!important} .cursor-pointer{cursor:pointer} .text-decoration-line-through{text-decoration:line-through!important} .no-underline:hover{text-decoration:none} .no-underline:hover .link,.link:hover,.hover-link:hover .link{text-decoration:underline} .text-decoration-none {text-decoration: none!important;} .line-height-initial {line-height: initial;} .line-height-12 {line-height: 1.2;} /* = interlignage par défaut des h1…h6 de Bootstrap */ .line-height-15 {line-height: 1.5;} .line-height-2 {line-height: 2;} .line-height-20 {line-height: 2rem;} .line-height-30 {line-height: 3rem;} .line-height-40 {line-height: 4rem;} .line-height-50 {line-height: 5rem;} .link-unstyled { color: inherit; text-decoration: inherit; } .button-unstyled { background: transparent; border: 0px; border: 0px; outline: none; } .last-p p:last-child {margin-bottom: 0px;} .link-unstyled { color: inherit; text-decoration: none; } .stop-scrolling { height: 100%; overflow: hidden; } .opacity-05 { opacity: 0.5; } .z-index-500 { z-index: 500; } /************************************************************ FOOTER BOTTOM ************************************************************/ #footer_dim { position: fixed; bottom: 0; left: 0; width: 100%; z-index: -1; pointer-events: none; } .site-container { display: flex; flex-direction: column; min-height: 100vh; } .site-content { flex: 1; } /* Masqué visuellement mais lu par les lecteurs d'écran (H1 de repli, etc.) */ .screen-reader-text { border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); height: 1px; width: 1px; margin: -1px; padding: 0; overflow: hidden; position: absolute !important; white-space: nowrap; word-wrap: normal !important; } /************************************************************ COLORS ************************************************************/ a:focus, a:hover { color: #000; } /************************************************************ MENU ************************************************************/ ul#main_menu_top>li, ul#main_menu_top>li>a { background-color: transparent !important; } body { transition: opacity .5s ease-in-out; } body.fade-in { opacity: 1; } #main-header { position: fixed; width: 100%; left: 0; top: 0; z-index: 10000; height: 104px; display: flex; align-items: center; } /************************************************************ SUB-MENU ************************************************************/ ul.sub-menu ul.sub-menu { padding-left: 0px; } .menu-item-has-children { position: relative; margin-right: 10px; } ul#main_menu_top ul.sub-menu li { display: block; list-style-type: none; float: none; } ul#main_menu_top ul.sub-menu li a { display: block; padding: 8px 0px; margin: 0px; color: #9F9F9F; font-weight: 700; text-align: center; font-size: .8rem; } #main_menu_top > .menu-item-has-children > .sub-menu { position: absolute; top: 100%; left: -40%; width: 180%; z-index: 2000; display: none; float: left; margin: 0.125rem 0 0; font-size: 1rem; color: #292b2c; text-align: left; list-style: none; background-color: #fff; -webkit-background-clip: padding-box; background-clip: padding-box; padding: 0px; padding-top: 43px; } #main_menu_top > .menu-item-has-children > .sub-menu li { padding: 0px; border-bottom: 1px solid #eee; } ul#main_menu_top ul.sub-menu li a:hover { background-color: #9F9F9F; color: #fff; } #main_menu_top > .menu-item-has-children > .sub-menu li:last-child { border-bottom: 0px; } #main_menu_top > .menu-item-has-children > .sub-menu { transition: all 0s; overflow: hidden; transform-origin: top center; transform: scale(1, 0); display: block; margin-top: 0px; border: 0px; border-top: 0px; } #main_menu_top > .menu-item-has-children:hover > .sub-menu { transform: scale(1); } ul#main_menu_top .menu-item-has-children:after { font-family: "Font Awesome 6 Pro"; /*content: "\f107";*/ color: #9F9F9F; position: absolute; right: -3px; top: 50%; transform: translateY(-50%); font-weight: 900; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; display: inline-block; font-style: normal; font-variant: normal; text-rendering: auto; line-height: 1; } /************************************************************ FULLSCREEN MENU ************************************************************/ .aside-section { top: 0; bottom: 0; position: fixed; z-index: 2600; } .aside-left { width: 40%; left: 0; background-color: #fff; -webkit-transform: translateY(-100%); -moz-transform: translateY(-100%); -ms-transform: translateY(-100%); -o-transform: translateY(-100%); transform: translateY(-100%); transition: all 0.4s ease-in-out; } .aside-right { width: 100%; right: 0; background-color: #fff; } .aside-list { list-style: none; padding: 0; margin: 0; } .aside-list li { margin-bottom: 0; } .aside-anchor::after { content: ""; position: absolute; bottom: 0; background-color: #ff5964; left: 0; right: 0; height: 3px; border-radius: 3px; } .aside-anchor::before { border-radius: 3px; content: ""; position: absolute; bottom: 0; background-color: #fff; left: 0; height: 3px; z-index: 1; width: 50%; -webkit-transition: transform 0.2s ease-in-out; -o-transition: transform 0.2s ease-in-out; transition: transform 0.2s ease-in-out; } .aside-anchor:hover:before { -webkit-transform: translateX(100%); -moz-transform: translateX(100%); -ms-transform: translateX(100%); -o-transform: translateX(100%); transform: translateX(100%); } .aside-anchor { padding-bottom: 7px; color: #fff; text-decoration: none; font-size: 30px; position: relative; font-weight: 500; } header#main-menu #input-menu-mobile { display: none; } /* Affichage du menu burger lorsqu'il est ouvert */ #content-burger-menu { opacity: 0; visibility: hidden; transition: opacity 0.3s ease-in-out, visibility 0s linear 0.3s; } #content-burger-menu.open { opacity: 1; visibility: visible; transition: opacity 0.3s ease-in-out, visibility 0s linear 0s; } /* Menu burger items styling */ .burger-menu-item { position: relative; border-bottom: 1px solid #707070; } .burger-menu-item .btn-animated { position: absolute; left: 0; top: 0; border-radius: 50%; } .burger-menu-link { color: #000; transition: opacity 0.3s ease; padding-left: 0; } .burger-menu-link:hover { opacity: 0.7; } /* Toute la ligne est cliquable quand il y a un sous-menu */ .burger-menu-item.has-submenu .burger-menu-row { cursor: pointer; } /* Trait de survol : ancré au bas de l'item (et non de la ligne), pour qu'il suive la ligne de séparation quand le sous-menu se déplie */ .burger-menu-item::after { content: ''; position: absolute; left: 0; bottom: -2px; width: 100%; height: 2px; border-radius: 5px; background: #000; transform: scaleX(0); transform-origin: bottom right; transition: transform 0.25s ease-out; } .burger-menu-item:hover::after { transform: scaleX(1); transform-origin: bottom left; } /* Si :has() est disponible, on restreint le survol à la ligne principale : parcourir le sous-menu ne déclenche plus le trait du parent */ @supports selector(:has(*)) { .burger-menu-item.has-submenu:hover::after { transform: scaleX(0); transform-origin: bottom right; } .burger-menu-item.has-submenu:has(.burger-menu-row:hover)::after { transform: scaleX(1); transform-origin: bottom left; } } /* Bouton +/- des items avec sous-menu */ .burger-submenu-toggle { flex-shrink: 0; width: 44px; height: 44px; padding: 0; background-color: transparent; border: 1px solid #000; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background-color 0.3s ease; } .burger-submenu-toggle:hover, .burger-submenu-toggle:focus-visible { background-color: #000; } /* Le "+" : une barre horizontale + une barre pivotée à 90° */ .burger-submenu-icon { position: relative; display: block; width: 18px; height: 2px; background-color: #000; transition: background-color 0.3s ease; } .burger-submenu-icon::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: inherit; transform: rotate(90deg); transition: transform 0.3s ease; } /* Ouvert : la barre verticale se rabat -> le "+" devient un "-" */ .burger-menu-item.submenu-open .burger-submenu-icon::before { transform: rotate(0deg); } .burger-submenu-toggle:hover .burger-submenu-icon, .burger-submenu-toggle:focus-visible .burger-submenu-icon { background-color: #fff; } /* Sous-menu déroulant */ .burger-submenu { overflow: hidden; max-height: 0; opacity: 0; margin: 0; padding-left: 65px; /* aligné sous le titre : 50px (rond) + 15px (ml-3) */ transition: max-height 0.4s ease, opacity 0.3s ease, padding-bottom 0.4s ease; } .burger-menu-item.submenu-open .burger-submenu { max-height: 70vh; opacity: 1; padding-bottom: 1.5rem; } .burger-submenu-item + .burger-submenu-item { margin-top: 0.75rem; } .burger-submenu-link { color: #000; transition: opacity 0.3s ease; } .burger-submenu-link:hover { color: #000; opacity: 0.7; } @media (max-width: 767.98px) { .burger-submenu { padding-left: 0; } } #content-burger-menu .row { width: 100%; } /* Cacher les éléments de la colonne de droite par défaut pour GSAP */ .burger-contact-links a, .burger-devis-button, .burger-bottom-logos a { opacity: 0; } /* Styles pour le bouton burger */ .burger-icon { transition: transform 0.3s ease-in-out; display: block; width: 33px; height: 33px; will-change: transform; transform: translateZ(0); } .burger-icon:hover { transform: translateZ(0) rotate(12deg)!important; } .burger-icon.open { transform: translateZ(0) rotate(45deg)!important; } /* Animation pulse pour le cercle derrière le burger */ @keyframes burger-pulse { 0% { transform: translate(-50%, -50%) scale(1); opacity: 0.6; } 50% { transform: translate(-50%, -50%) scale(1.4); opacity: 0.3; } 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.6; } } #burger { display: inline-block; cursor: pointer; position: relative; z-index: 3000; margin: 0px; background-color: transparent; border: 0px; outline: none; } /* Cercle pulse derrière le burger */ #burger::before { content: ''; position: absolute; top: 50%; left: 50%; width: 45px; height: 45px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.7) 100%); transform: translate(-50%, -50%) scale(0); opacity: 0; transition: opacity 0.3s ease, transform 0.3s ease; pointer-events: none; z-index: -1; } #burger:hover::before { opacity: 0.6; transform: translate(-50%, -50%) scale(1); animation: burger-pulse 1.5s ease-in-out infinite; } /* Cercle d'animation pour l'ouverture du menu burger */ #burger-circle-animation { position: fixed; width: 45px; height: 45px; border-radius: 50%; background-color: #fff; pointer-events: none; z-index: 2500; transform: translate(-50%, -50%) scale(0); will-change: transform; } .aside-section.aside-right { overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; } #main_menu_top>.menu-item-has-children>.sub-menu { min-width: 232px; } aside#content-burger-menu { top: 0; padding: 104px 0 50px 0; } /************************************************************ HEADER ************************************************************/ /*LOGO*/ #icon-brand-icon { height: 80px; width: 100%; padding: 5px 0px; } /************************************************************ LINKS & BUTTONS ************************************************************/ a { color: #000; } /************************************************************ CONTENT - gallery ************************************************************/ .gallery img { border: 2px solid #fff !important; } /***** IMG IN POST ******/ img.alignright { float: right; margin: 10px 0 10px 15px } img.alignleft { float: left; margin: 10px 15px 10px 0 } img.aligncenter { display: block; margin-left: auto; margin-right: auto } a img.alignright { float: right; margin: 10px 0 10px 15px } a img.alignleft { float: left; margin: 10px 15px 10px 0 } a img.aligncenter { display: block; margin-left: auto; margin-right: auto } /************************************************************ STYLES ************************************************************/ header#main-header { -webkit-mix-blend-mode: difference; mix-blend-mode: difference; } /*SCROLL INDICATOR*/ #scroll-indicator { width: 100%; height: 1px; position: relative; transform: translateY(16.5px); } .scroll-indicator-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(255, 255, 255, 0.2); border-radius: 0.5px; } .scroll-indicator-fill { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(255, 255, 255, 1); border-radius: 0.5px; transform-origin: left center; transform: scaleX(0); } .scroll-indicator-dot { position: absolute; top: 50%; left: 0; transform: translateY(-50%); width: 8px; height: 8px; background-color: #fff; border-radius: 50%; } /* HOVER CIRCLE EFFECT */ @keyframes rotate-circle { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .hover-discover-circle { position: absolute; width: 150px; height: 150px; pointer-events: none; opacity: 0; transition: opacity 0.3s ease; transform: translate(-50%, -50%); z-index: 100; } .hover-discover-circle img { width: 100%; height: 100%; animation: rotate-circle 8s linear infinite; } /* ANIMATED BUTTON EFFECT */ .btn-animated { display: inline-flex; align-items: center; justify-content: center; background-color: #000; border: 1px solid #000; border-radius: 50%; width: 35px; height: 35px; overflow: hidden; text-decoration: none; position: relative; opacity: 0; transform: translateY(-50px); box-sizing: border-box; } .btn-animated.btn-white { background-color: #fff; border-color: #fff; } .btn-animated.btn-white .btn-text { color: #fff; } .btn-animated .btn-text { opacity: 0; white-space: nowrap; } /* Variante arrive de la droite */ .btn-animated.btn-animated-from-right { transform: translateX(50px); } /* État animé (ajouté par JS) */ .btn-animated.animated { background-color: transparent; } .btn-animated.expanded { border-radius: 30px; /*padding: 0 20px 0 20px;*/ } .btn-animated.show-text .btn-text { opacity: 1; } /* TEXT REVEAL EFFECT */ .text-reveal .word { opacity: 0.15; display: inline-block; transition: opacity 0.1s ease; } .text-reveal .word.revealed { opacity: 1; } /* FIRST LINE INDENT */ .first-line-indent .word:first-child { margin-left: 50vw; } /* TEXT REVEAL BUTTON */ .text-reveal-button { display: inline-block; width: 50px; height: 50px; background-color: #000; border: 2px solid #000; border-radius: 50%; margin-left: 15px; vertical-align: middle; transition: all 0.3s ease; position: relative; top: -4px; color: #fff; } .text-reveal-button.white { background-color: #fff; border: 2px solid #fff; color: #000; } .text-reveal-button.revealed { opacity: 1; } .text-reveal-button:hover { background-color: #fff; color: #000; } .text-reveal-button svg { width: 24px; height: 24px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); transition: transform 0.3s ease; } .text-reveal-button:hover svg { transform: translate(-45%, -55%); } /* Permettre au cercle hover-discover d'apparaître sur le bouton text-reveal */ .text-reveal-button { overflow: visible !important; } .text-reveal-button .hover-discover-circle { z-index: 1000; } /* HOME PROJETS PARALLAX */ #home-projets { margin-bottom: -250px; } .container { max-width: 96%; } #notre-approche .btn-animated { position: absolute; left: 0px; top: 0px; } .item-box-shadow { box-shadow: 0px 5px 21px rgba(0, 0, 0, 0.08); } .border-bottom { border-bottom: 1px solid #707070 !important; } .border-top { border-top: 1px solid #707070 !important; } /* SERVICE VIDEO HOVER EFFECT */ section:has(.service-item-hover), .container:has(.service-item-hover) { overflow: visible !important; } .service-item-hover { position: relative; overflow: visible !important; } .service-item-hover > .col-12, .service-item-hover > .col-lg-7, .service-item-hover > .col-lg-4 { overflow: visible !important; } /* Colonne de la pastille numérotée. Elle n'avait aucune marge basse : le titre du service venait se caler juste sous la pastille, sans respiration — d'autant plus serré que la pastille s'élargit en fin d'animation. */ .service-item-numero { margin-bottom: 1.25rem; } @media (min-width: 992px) { .service-item-numero { margin-bottom: 1.75rem; } } .service-video-hover { position: absolute; width: 450px; height: 450px; pointer-events: none; opacity: 0; z-index: 1000; border-radius: 50%; overflow: hidden; transform: translate(-50%, -50%); transition: opacity 0.3s ease; padding: 0px; } .service-video-hover .service-video { width: 100%; height: 100%; object-fit: cover; } /* END SERVICE VIDEO HOVER EFFECT */ /* POINTS FORTS ANIMATION */ .list-number { width: 50px; height: 50px; border: 1px solid #000; border-radius: 100%; position: relative; flex-shrink: 0; } .point-fort-border-line { position: absolute; bottom: 0; left: 0; right: 0; height: 1px; background-color: rgba(0, 0, 0, 0.212); } /* END POINTS FORTS ANIMATION */ /* PROJETS HORIZONTAL SCROLL */ .projets-horizontal-section { overflow: hidden; position: relative; min-height: 100vh; display: flex; align-items: center; } .projets-horizontal-container { width: 100%; } .projets-horizontal-wrapper { overflow: visible; } .projets-horizontal-track { display: flex; gap: 50px; will-change: transform; padding: 20px calc(2% + 12px); } .projets-horizontal-track::after { content: ''; flex-shrink: 0; width: calc(2% + 12px - 0px); } .projet-horizontal-item { flex-shrink: 0; width: 70vw; max-height: 80vh; display: flex; flex-direction: column; } .projet-video-link { width: 100%; flex: 1; position: relative; display: block; min-height: 0; max-height: calc(80vh - 120px); } .projet-video-container { width: 100%; height: 100%; overflow: hidden; position: relative; } .projet-video { width: 100%; height: 100%; object-fit: cover; display: block; } .projet-info-row { display: flex; justify-content: space-between; align-items: center; gap: 30px; padding-top: 20px; flex-shrink: 0; } .projet-info-col { flex: 1; } .projet-info-title { flex: 2; } .projet-info-type { flex: 1; text-align: right; } section:has(.projet-video-link) { overflow: visible !important; } /* END PROJETS HORIZONTAL SCROLL */ /* BLOG HORIZONTAL SCROLL - Format carré */ #blog-horizontal .projet-horizontal-item { width: 50vw; max-width: 600px; max-height: none !important; flex-shrink: 0; } #blog-horizontal .projet-video-link { width: 100%; max-height: none !important; flex: none !important; position: relative; padding-bottom: 100%; /* Force ratio 1:1 */ height: 0; display: block; overflow: hidden; } #blog-horizontal .projet-video-container { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; } #blog-horizontal .projet-video { width: 100%; height: 100%; display: block; } #blog-horizontal .projet-video img { width: 100%; height: 100%; object-fit: cover; display: block; } #blog-horizontal .projet-info-row { padding-top: 20px; } /* END BLOG HORIZONTAL SCROLL */ /* FAQ SECTION */ .faq-item { position: relative; } .faq-number-line { display: flex; align-items: center; gap: 1rem; } .faq-number { color: rgba(0, 0, 0, 0.3); flex-shrink: 0; } .faq-line { flex: 1; height: 1px; background: linear-gradient(to right, rgba(0, 0, 0, 0.15), transparent); } .faq-question { line-height: 1.2; } .faq-answer { opacity: 0.8; } .faq-answer p:last-child { margin-bottom: 0; } /* END FAQ SECTION */ /* TEXT SCROLL SECTION */ #text-scroll-section { position: relative; } .text-scroll-title { opacity: 0; } .text-scroll-wrapper { position: relative; width: 100%; overflow: hidden; } .text-scroll-track { display: flex; width: fit-content; will-change: transform; } .text-scroll-item { display: flex; align-items: center; white-space: nowrap; } /* Phrase inactive : blanc à 40 %, sans contour. La phrase active passe au blanc plein — c'est le seul écart entre les deux états. -webkit-text-stroke est remis à 0 explicitement plutôt que simplement retiré : la propriété n'a pas de raccourci de réinitialisation fiable si une règle antérieure venait à la reposer. */ .text-scroll-phrase { display: inline-block; color: rgba(255, 255, 255, 0.3); -webkit-text-stroke: 0; transition: color 0.4s ease; } .text-scroll-phrase.active { color: #fff; } .text-scroll-separator { display: inline-block; opacity: 0.5; /* taille et marges : voir la règle proportionnelle plus bas */ } /* END TEXT SCROLL SECTION */ .text-scroll-separator { /* Le rond suit la taille du texte au lieu d'être figé à 40px : on lui donne la MÊME échelle que .text-scroll-phrase (font-size-vw-12) et on exprime son diamètre en em. 0.4em vaut 41px face au texte de 102px des grands écrans — l'aspect desktop ne bouge pas — et 13px face au texte de 34px du mobile, où les 40px fixes écrasaient la phrase. La marge suit le même mouvement. */ font-size: clamp(2.1rem, 5.6vw, 6.4rem); width: 0.4em; height: 0.4em; margin: 0 clamp(0.75rem, 1.75vw, 2rem); border: 1px solid #fff; border-radius: 100%; transform: translate(0px, 25%); } img#logo-footer { width: 26vw; max-width: 600px; min-width: 150px; /* Le SVG du logo porte un viewBox mais aucun attribut width/height. Sans dimensions intrinsèques, le navigateur lui donnait 667px de haut à TOUTES les largeurs (mesuré 150x667 en mobile, 374x667 en 1440) et dessinait le logo contenu dans cette boîte trop haute : un vide considérable au-dessus et en dessous, à tous les formats. Le ratio est donc posé explicitement, en écho aux attributs width/height ajoutés sur la balise (voir template-parts/footer-infos.php). */ height: auto; aspect-ratio: 611.3 / 667; } .round-icon { width: 50px; height: 50px; border-radius: 100%; } .underline-effect, #main-menu > .menu-item > a, .menus-burger a { display: inline-block; position: relative; text-decoration: none; } .underline-effect::after, #main-menu > .menu-item > a:after, .menus-burger a:after { content: ''; position: absolute; width: 100%; transform: scaleX(0); border-radius: 5px; height: 2px; bottom: -2px; left: 0; background: #000000; transform-origin: bottom right; transition: transform 0.25s ease-out; } .underline-effect:hover::after, #main-menu > .menu-item > a:hover::after, .menus-burger a:hover::after { transform: scaleX(1); transform-origin: bottom left; } .footer-link.underline-effect::after { background: #fff; } section#projets-horizontal { padding-top: 68px !important; } /* Hero Section */ .blog-hero h1 { letter-spacing: -0.02em; } .category-description { max-width: 600px; } /* Blog Article */ .blog-article { transition: transform 0.3s ease; } .blog-article-image { aspect-ratio: 16/10; border-radius: 8px; overflow: hidden; transition: transform 0.5s ease; } .blog-article-image img { transition: transform 0.5s ease; } .blog-article:hover .blog-article-image img { transform: scale(1.05); } .blog-article-title a { transition: opacity 0.3s ease; } .blog-article-title a:hover { opacity: 0.7; } /* Border Line (comme services) */ .blog-article-border-line { position: absolute; bottom: 0; left: 0; width: 100%; height: 1px; background-color: #707070; } /* List Number (déjà stylé dans custom.css mais on s'assure) */ .list-number { min-width: 50px; min-height: 50px; border-radius: 50%; border: 1px solid #000; flex-shrink: 0; } .list-number-text { font-weight: 500; } .img-blog-list { min-width: 80px; height: 80px; border-radius: 100%; object-fit: cover; } .img-blog-list img { object-fit: cover; } picture.w-100 img { width: 100%; } picture.h-100 img { height: 100%; } /* Pagination */ .blog-pagination { margin-top: 3rem; } /* Supprimer les puces de liste */ .blog-pagination ul { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; } .blog-pagination li { margin: 0; } .blog-pagination .page-numbers { display: inline-block; padding: 0.5rem 1rem; margin: 0 0.25rem; font-size: 0.875rem; font-weight: 500; color: #000; text-decoration: none; border: 1px solid transparent; border-radius: 50px; transition: all 0.3s ease; } .blog-pagination .page-numbers:hover { border-color: #000; } .blog-pagination .page-numbers.current { background-color: #000; color: #fff; } .blog-pagination .prev, .blog-pagination .next { border: 1px solid #000; } /* Blog List Items (style services-listing) */ .blog-list-item { position: relative; } .blog-list-link { color: #000; transition: opacity 0.3s ease; } .blog-list-link:hover { opacity: 0.7; } .blog-list-border-line { position: absolute; bottom: 0; left: 0; width: 100%; height: 1px; background-color: rgba(0, 0, 0, 0.122); } /* Responsive */ @media (max-width: 991px) { .blog-hero h1 { font-size: 12vw !important; } .blog-article-title { font-size: 8vw !important; } } @media (max-width: 575px) { .blog-article-image { aspect-ratio: 4/3; } } /* Blog Single Post */ .blog-single-hero-image { width: 100%; height: 60vh; min-height: 400px; background-size: cover; background-position: center; border-radius: 10px; } /* Trait de séparation affiché à la place du hero quand l'article n'a pas d'image à la une */ .blog-single-separator { width: 100%; height: 1px; background-color: #000; border: 0; margin: 0; } /* Colonne de gauche du header d'article : empilée en desktop, en ligne en mobile */ .blog-single-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.5rem; font-size: 0.875rem; color: #666; } @media (min-width: 992px) { .blog-single-meta { flex-direction: column; align-items: flex-start; } } .blog-single-category { display: inline-block; padding: 0.25rem 1rem; background-color: #000; color: #fff; text-decoration: none; border-radius: 50px; font-weight: 500; transition: opacity 0.3s ease; } .blog-single-category:hover { opacity: 0.8; color: #fff; } .blog-single-date, .blog-single-author { display: flex; align-items: center; } .blog-single-title { line-height: 1.2; letter-spacing: -0.02em; } .blog-single-content { font-size: 1.125rem; line-height: 1.8; color: #333; } .blog-single-content p { margin-bottom: 1.5rem; } .blog-single-content h2, .blog-single-content h3, .blog-single-content h4 { margin-top: 2.5rem; margin-bottom: 1.25rem; font-weight: 600; line-height: 1.3; } .blog-single-content h2 { font-size: 2rem; } .blog-single-content h3 { font-size: 1.5rem; } .blog-single-content img { max-width: 100%; height: auto; border-radius: 8px; margin: 2rem 0; } .blog-single-content ul, .blog-single-content ol { margin: 1.5rem 0; padding-left: 2rem; } .blog-single-content li { margin-bottom: 0.75rem; } .blog-single-content a { color: #000; text-decoration: underline; transition: opacity 0.3s ease; } .blog-single-content a:hover { opacity: 0.7; } .blog-single-content blockquote { margin: 2rem 0; padding: 1.5rem 2rem; border-left: 4px solid #000; background-color: #f8f8f8; font-style: italic; } .blog-single-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; } .blog-tag-link { display: inline-block; padding: 0.35rem 1rem; background-color: #f0f0f0; color: #333; text-decoration: none; border-radius: 50px; font-size: 0.875rem; transition: background-color 0.3s ease; } .blog-tag-link:hover { background-color: #e0e0e0; color: #333; } @media (max-width: 991px) { .blog-single-hero-image { height: 40vh; min-height: 300px; } .blog-single-title { font-size: 10vw !important; } .blog-single-content { font-size: 1rem; } } @media (max-width: 575px) { .blog-single-hero-image { height: 30vh; min-height: 250px; } .blog-single-content h2 { font-size: 1.5rem; } .blog-single-content h3 { font-size: 1.25rem; } } /* End Blog Single Post */ .pt-menu { padding-top: 104px !important; } .home-projet { border-radius: 10px; overflow: hidden; } .item-radius { border-radius: 10px; overflow: hidden; } /* ACCORDEON GSAP SCROLL EFFECT — empilement par pinning GSAP (voir custom.js) */ .accordeon-gsap-wrapper { position: relative; background: #fff; /* fond opaque : recouvre le corps de la carte précédente */ } .accordeon-gsap-item { position: relative; background: #fff; } .accordeon-gsap-section { position: relative; } /* Masque blanc fixe dans la bande de 104px sous laquelle les cartes se figent. Placé SOUS le header (#main-header z-index:10000) et AU-DESSUS du contenu : le header en mix-blend-mode:difference s'inverse alors sur un blanc constant (comme au-dessus d'une section blanche) au lieu du contenu qui défile, ce qui supprime le défilement visible sans toucher au blend-mode du header. */ .accordeon-header-mask { position: fixed; top: 0; left: 0; width: 100%; height: 104px; background: #fff; z-index: 9999; opacity: 0; pointer-events: none; transition: opacity 0.2s ease; } .accordeon-header-mask.is-visible { opacity: 1; } /* END ACCORDEON GSAP SCROLL EFFECT */ /* LinkedIn Circle Styling */ .linkedin-circle { display: inline-flex; align-items: center; justify-content: center; width: 50px; height: 50px; border-radius: 50%; background-color: #000; transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); position: relative; overflow: hidden; } .linkedin-circle::before { content: ''; position: absolute; top: 50%; left: 50%; width: 0; height: 0; border-radius: 50%; background-color: #fff; transform: translate(-50%, -50%); transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); z-index: 0; } .linkedin-circle svg { position: relative; z-index: 1; transition: fill 0.4s cubic-bezier(0.4, 0, 0.2, 1); } .linkedin-circle:hover { transform: scale(1.1); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2); } .linkedin-circle { overflow:visible; } .linkedin-circle:hover::before { width: 101%; height: 101%; } .linkedin-circle:hover svg { fill: #000 !important; } .popover { z-index: 999999 !important; } picture.img-fluid img { width: 100%; height: auto; } .border-radius, picture.border-radius img { border-radius: 10px; } .box-shadow-soft { box-shadow: 0px 5px 21px rgba(0, 0, 0, 0.08); } .wp-content p { margin-top: 0; margin-bottom: 2rem; } .wp-content img { max-width: 100%; height: auto; } .projet-video img { height: 100%; object-fit: cover; object-position: center center; } /************************************************************ MEDIAS QUERIES ************************************************************/ @media (min-width: 576px) { .w-sm-auto{width:auto!important} .font-size-sm-1{font-size:.6rem!important} .font-size-sm-2{font-size:.7rem!important} .font-size-sm-3{font-size:.9rem!important} .font-size-sm-3-5{font-size:1rem!important} .font-size-sm-4{font-size:1.15rem!important} .font-size-sm-5{font-size:1.3rem!important} .font-size-sm-6{font-size:1.45rem!important} .font-size-sm-7{font-size:1.6rem!important} .font-size-sm-7-5{font-size:1.9rem!important} .font-size-sm-8{font-size:2.2rem!important} .font-size-sm-9{font-size:2.75rem!important} .font-size-sm-10{font-size:3rem!important} .font-size-sm-11{font-size:3.75rem!important} .font-size-sm-12{font-size:4.4rem!important} .font-size-sm-13{font-size:5rem!important} .font-size-sm-14{font-size:6rem!important} .font-size-vw-sm-1{font-size:.3vw!important} .font-size-vw-sm-2{font-size:.7vw!important} .font-size-vw-sm-3{font-size:1vw!important} .font-size-vw-sm-3-5{font-size:1.3vw!important} .font-size-vw-sm-4{font-size:1.7vw!important} .font-size-vw-sm-5{font-size:2vw!important} .font-size-vw-sm-6{font-size:2.3vw!important} .font-size-vw-sm-7{font-size:2.7vw!important} .font-size-vw-sm-8{font-size:3vw!important} .font-size-vw-sm-9{font-size:3.3vw!important} .font-size-vw-sm-10{font-size:3.7vw!important} .font-size-vw-sm-11{font-size:4vw!important} .font-size-vw-sm-13{font-size:5vw!important} .font-size-vw-sm-14{font-size:6vw!important} .show-br-sm br{display:initial} .container-fluid-left-align{padding-left:calc((100% - 540px) / 2 + 12px)} .container-fluid-right-align{padding-right:calc((100% - 540px) / 2 + 12px)} } @media (min-width: 768px) { .font-size-md-1{font-size:.6rem!important} .font-size-md-2{font-size:.7rem!important} .font-size-md-3{font-size:.9rem!important} .font-size-md-3-5{font-size:1rem!important} .font-size-md-4{font-size:1.15rem!important} .font-size-md-5{font-size:1.3rem!important} .font-size-md-6{font-size:1.45rem!important} .font-size-md-7{font-size:1.6rem!important} .font-size-md-7-5{font-size:1.9rem!important} .font-size-md-8{font-size:2.2rem!important} .font-size-md-9{font-size:2.75rem!important} .font-size-md-10{font-size:3rem!important} .font-size-md-11{font-size:3.75rem!important} .font-size-md-12{font-size:4.4rem!important} .font-size-md-13{font-size:5rem!important} .font-size-md-14{font-size:6rem!important} .font-size-vw-md-1{font-size:.3vw!important} .font-size-vw-md-2{font-size:.7vw!important} .font-size-vw-md-3{font-size:1vw!important} .font-size-vw-md-3-5{font-size:1.3vw!important} .font-size-vw-md-4{font-size:1.7vw!important} .font-size-vw-md-5{font-size:2vw!important} .font-size-vw-md-6{font-size:2.3vw!important} .font-size-vw-md-7{font-size:2.7vw!important} .font-size-vw-md-8{font-size:3vw!important} .font-size-vw-md-9{font-size:3.3vw!important} .font-size-vw-md-10{font-size:3.7vw!important} .font-size-vw-md-11{font-size:4vw!important} .font-size-vw-md-13{font-size:5vw!important} .font-size-vw-md-14{font-size:6vw!important} .show-br-md br{display:initial} .w-md-85{width:85%!important} .container-fluid-left-align{padding-left:calc((100% - 720px) / 2 + 12px)} .container-fluid-right-align{padding-right:calc((100% - 720px) / 2 + 12px)} } @media (min-width: 992px) { .font-size-lg-1{font-size:.6rem!important} .font-size-lg-2{font-size:.7rem!important} .font-size-lg-3{font-size:.9rem!important} .font-size-lg-3-5{font-size:1rem!important} .font-size-lg-4{font-size:1.15rem!important} .font-size-lg-5{font-size:1.3rem!important} .font-size-lg-6{font-size:1.45rem!important} .font-size-lg-7{font-size:1.6rem!important} .font-size-lg-7-5{font-size:1.9rem!important} .font-size-lg-8{font-size:2.2rem!important} .font-size-lg-9{font-size:2.75rem!important} .font-size-lg-10{font-size:3rem!important} .font-size-lg-11{font-size:3.75rem!important} .font-size-lg-12{font-size:4.4rem!important} .font-size-lg-13{font-size:5rem!important} .font-size-lg-14{font-size:6rem!important} .font-size-vw-lg-1{font-size:.3vw!important} .font-size-vw-lg-2{font-size:.7vw!important} .font-size-vw-lg-3{font-size:1vw!important} .font-size-vw-lg-3-5{font-size:1.3vw!important} .font-size-vw-lg-4{font-size:1.7vw!important} .font-size-vw-lg-5{font-size:2vw!important} .font-size-vw-lg-6{font-size:2.3vw!important} .font-size-vw-lg-7{font-size:2.7vw!important} .font-size-vw-lg-8{font-size:3vw!important} .font-size-vw-lg-9{font-size:3.3vw!important} .font-size-vw-lg-10{font-size:3.7vw!important} .font-size-vw-lg-11{font-size:4vw!important} .font-size-vw-lg-13{font-size:5vw!important} .font-size-vw-lg-14{font-size:6vw!important} .show-br-lg br{display:initial} .container-fluid-left-align{padding-left:calc((100% - 960px) / 2 + 12px)} .container-fluid-right-align{padding-right:calc((100% - 960px) / 2 + 12px)} .title-accordion-gsap { max-width: 75%; } } @media(min-width:1200px) { .grid-container{max-width:90%} .font-size-xl-1{font-size:.6rem!important} .font-size-xl-2{font-size:.7rem!important} .font-size-xl-3{font-size:.9rem!important} .font-size-xl-3-5{font-size:1rem!important} .font-size-xl-4{font-size:1.15rem!important} .font-size-xl-5{font-size:1.3rem!important} .font-size-xl-6{font-size:1.45rem!important} .font-size-xl-7{font-size:1.6rem!important} .font-size-xl-8{font-size:2.2rem!important} .font-size-xl-9{font-size:2.75rem!important} .font-size-xl-10{font-size:3rem!important} .font-size-xl-11{font-size:3.75rem!important} .font-size-xl-13{font-size:5rem!important} .font-size-xl-14{font-size:6rem!important} .font-size-vw-xl-1{font-size:.3vw!important} .font-size-vw-xl-2{font-size:.7vw!important} .font-size-vw-xl-3{font-size:1vw!important} .font-size-vw-xl-3-5{font-size:1.3vw!important} .font-size-vw-xl-4{font-size:1.7vw!important} .font-size-vw-xl-5{font-size:2vw!important} .font-size-vw-xl-6{font-size:2.3vw!important} .font-size-vw-xl-7{font-size:2.7vw!important} .font-size-vw-xl-8{font-size:3vw!important} .font-size-vw-xl-9{font-size:3.3vw!important} .font-size-vw-xl-10{font-size:3.7vw!important} .font-size-vw-xl-11{font-size:4vw!important} .font-size-vw-xl-13{font-size:5vw!important} .font-size-vw-xl-14{font-size:6vw!important} .show-br-xl br{display:initial} .container-big{max-width:75%;min-width:1140px} .container-fluid-left-align{padding-left:calc((100% - 1140px) / 2 + 12px)} .container-fluid-right-align{padding-right:calc((100% - 1140px) / 2 + 12px)} } @media(min-width:1400px) { .container-fluid-left-align{padding-left:calc((100% - 1320px) / 2 + 12px)} .container-fluid-right-align{padding-right:calc((100% - 1320px) / 2 + 12px)} } @media(min-width:1550px) { .font-size-xxl-1{font-size:.6rem!important} .font-size-xxl-2{font-size:.7rem!important} .font-size-xxl-3{font-size:.9rem!important} .font-size-xxl-3-5{font-size:1rem!important} .font-size-xxl-4{font-size:1.15rem!important} .font-size-xxl-5{font-size:1.3rem!important} .font-size-xxl-6{font-size:1.45rem!important} .font-size-xxl-7{font-size:1.6rem!important} .font-size-xxl-7-5{font-size:1.9rem!important} .font-size-xxl-8{font-size:2.2rem!important} .font-size-xxl-8-5{font-size:2.47rem!important} .font-size-xxl-9{font-size:2.75rem!important} .font-size-xxl-10{font-size:3rem!important} .font-size-xxl-11{font-size:3.75rem!important} .font-size-xxl-12{font-size:4.4rem!important} .font-size-xxl-13{font-size:5rem!important} .font-size-xxl-14{font-size:6rem!important} .font-size-vw-xxl-1{font-size:.3vw!important} .font-size-vw-xxl-2{font-size:.7vw!important} .font-size-vw-xxl-3{font-size:1vw!important} .font-size-vw-xxl-3-5{font-size:1.3vw!important} .font-size-vw-xxl-4{font-size:1.7vw!important} .font-size-vw-xxl-5{font-size:2vw!important} .font-size-vw-xxl-6{font-size:2.3vw!important} .font-size-vw-xxl-7{font-size:2.7vw!important} .font-size-vw-xxl-8{font-size:3vw!important} .font-size-vw-xxl-9{font-size:3.3vw!important} .font-size-vw-xxl-10{font-size:3.7vw!important} .font-size-vw-xxl-11{font-size:4vw!important} .font-size-vw-xxl-13{font-size:5vw!important} .font-size-vw-xxl-14{font-size:6vw!important} } @media(max-width:1200px) {} @media(max-width:992px) {} @media(max-width:768px) {} @media(max-width:576px) {} @media(max-width:400px) {} /************************************************************ SWITCH MENU BURGER ************************************************************/ #burger { display: flex; } #navbar { display: none; } @media(min-width:1200px) { #burger { display: none; } #navbar { display: flex; } } /************************************************************ END SWITCH MENU BURGER ************************************************************/ /************************************************************ HOME ANIMATION SECTION Code déplacé dans template-parts/home-animation.php ************************************************************/ /* #home-animation { / Styles déplacés dans home-animation.php pour optimisation / } */ /************************************************************ END HOME ANIMATION SECTION ************************************************************/ /************************************************************ TABLEAU ANIMATION ************************************************************/ .tableau-section { position: relative; min-height: 100vh; display: flex; align-items: center; justify-content: center; } .tableau-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #000; opacity: 0; pointer-events: none; z-index: 10; } .tableau-section .container { position: relative; width: 100%; } .tableau-titre-wrapper { width: 100%; position: absolute; top: 50%; left: 0; transform: translateY(-50%); z-index: 1; } .tableau-titre-track { display: inline-block; white-space: nowrap; } .tableau-titre { display: inline-block; white-space: nowrap; margin: 0; } .tableau-titre-spacer { display: inline-block; width: clamp(1.7rem, 3vw, 4rem); height: clamp(1.7rem, 3vw, 4rem); border: 1px solid #000; border-radius: 50%; vertical-align: middle; margin: 0 2rem; flex-shrink: 0; } .tableau-colonnes { position: relative; z-index: 20; min-height: 50vh; display: flex; align-items: center; } /************************************************************ END TABLEAU ANIMATION ************************************************************/ /************************************************************ BOUTON DEVIS FIXE ************************************************************/ .devis-fixed-btn { position: fixed; bottom: 40px; right: 40px; background-color: #000; color: #fff; border: 2px solid #000; border-radius: 50px; padding: 18px 35px; font-size: 16px; font-weight: 500; cursor: pointer; z-index: 999; transition: all 0.3s ease; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); } .devis-fixed-btn:hover { background-color: #fff; color: #000; transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3); } /* Variante light pour sections sombres */ .devis-fixed-btn.light { background-color: #fff; color: #000; border-color: #fff; } .devis-fixed-btn.light:hover { background-color: #000; color: #fff; } /* L'icône ne sert qu'en mobile : en desktop le libellé suffit. */ .devis-fixed-icon { display: none; width: 24px; height: 24px; flex: none; } /* Sous 768px, le bouton pleine largeur recouvrait la fin des lignes du texte courant (constaté sur les articles, la page RGPD et les accompagnements). Il se réduit donc à une pastille de 56px — au-dessus des 44px recommandés pour une cible tactile — posée dans la gouttière, hors de la colonne de texte. Le libellé reste dans le DOM pour les lecteurs d'écran. */ @media (max-width: 768px) { .devis-fixed-btn { bottom: 20px; right: 20px; width: 56px; height: 56px; padding: 0; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; } .devis-fixed-icon { display: block; } /* Masqué à l'œil, conservé pour les technologies d'assistance. */ .devis-fixed-label { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; } /* Le survol n'existe pas au doigt : on neutralise le décalage vertical, qui ne se déclencherait qu'au moment du tap. */ .devis-fixed-btn:hover { transform: none; } } /************************************************************ END BOUTON DEVIS FIXE ************************************************************/ /************************************************************ ASIDE FORMULAIRE DEVIS ************************************************************/ .devis-aside { position: fixed; top: 0; right: 0; width: 100%; height: 100%; z-index: 99999; pointer-events: none; } .devis-aside.open { pointer-events: all; } .devis-aside-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.3); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); opacity: 0; transition: opacity 0.4s ease; } .devis-aside.open .devis-aside-overlay { opacity: 1; } .devis-aside-content { position: absolute; top: 0; right: 0; width: 600px; max-width: 90vw; height: 100%; background-color: #fff; box-shadow: -5px 0 25px rgba(0, 0, 0, 0.2); transform: translateX(100%); transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1); overflow-y: auto; } .devis-aside.open .devis-aside-content { transform: translateX(0); } .devis-aside-close { position: absolute; top: 30px; right: 30px; background: transparent; border: none; cursor: pointer; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; color: #000; transition: transform 0.3s ease; z-index: 10; } .devis-aside-close:hover { transform: rotate(90deg); } .devis-aside-inner { padding: 80px 50px 50px; } .devis-aside-title { font-size: 32px; font-weight: 500; margin-bottom: 40px; color: #000; } .devis-aside-form { /* Styles pour le formulaire CF7 */ } /* Styles pour les sections du formulaire */ .devis-section { margin-bottom: 30px; padding-bottom: 30px; border-bottom: 1px solid #e0e0e0; } .devis-section.border-none { border-bottom: none; } .custom-label { display: block; font-size: 18px; font-weight: 500; margin-bottom: 15px; color: #000; } /* Styles pour les checkbox personnalisées */ .custom-checkbox { display: block; } .custom-checkbox .wpcf7-list-item { display: block; margin-bottom: 12px; } .custom-checkbox .wpcf7-list-item label { display: flex; align-items: center; cursor: pointer; position: relative; padding-left: 0; margin: 0; } .custom-checkbox .wpcf7-list-item input[type="checkbox"] { position: absolute; opacity: 0; cursor: pointer; width: 0; height: 0; } .custom-checkbox .wpcf7-list-item label::before { content: ''; display: inline-block; width: 24px; height: 24px; border: 2px solid #000; border-radius: 50%; margin-right: 12px; flex-shrink: 0; position: relative; background-color: #fff; transition: all 0.3s ease; } .custom-checkbox .wpcf7-list-item label::after { content: ''; position: absolute; left: 6px; top: 50%; transform: translateY(-50%) scale(0); width: 12px; height: 12px; border-radius: 50%; background-color: transparent; transition: all 0.3s ease; } .custom-checkbox .wpcf7-list-item label:hover::after { background-color: #000; transform: translateY(-50%) scale(1); } .custom-checkbox .wpcf7-list-item input[type="checkbox"]:checked + .wpcf7-list-item-label::before { border-color: #4CAF50; } .custom-checkbox .wpcf7-list-item input[type="checkbox"]:checked ~ label::after, .custom-checkbox .wpcf7-list-item label:has(input[type="checkbox"]:checked)::after { background-color: #4CAF50; transform: translateY(-50%) scale(1); } .custom-checkbox .wpcf7-list-item-label { font-size: 16px; color: #333; user-select: none; } /* Checkbox d'acceptation */ .wpcf7-acceptance .wpcf7-list-item label { display: flex; align-items: flex-start; cursor: pointer; position: relative; padding-left: 0; margin: 20px 0; } .wpcf7-acceptance .wpcf7-list-item input[type="checkbox"] { position: absolute; opacity: 0; cursor: pointer; width: 0; height: 0; } .wpcf7-acceptance .wpcf7-list-item label::before { content: ''; display: inline-block; width: 24px; height: 24px; border: 2px solid #000; border-radius: 50%; margin-right: 12px; flex-shrink: 0; position: relative; background-color: #fff; transition: all 0.3s ease; } .wpcf7-acceptance .wpcf7-list-item label::after { content: ''; position: absolute; left: 6px; top: 6px; width: 12px; height: 12px; border-radius: 50%; background-color: transparent; transition: all 0.3s ease; transform: scale(0); } .wpcf7-acceptance .wpcf7-list-item label:hover::after { background-color: #000; transform: scale(1); } .wpcf7-acceptance .wpcf7-list-item input[type="checkbox"]:checked ~ .wpcf7-list-item-label::before, .wpcf7-acceptance .wpcf7-list-item label:has(input[type="checkbox"]:checked)::before { border-color: #4CAF50; } .wpcf7-acceptance .wpcf7-list-item input[type="checkbox"]:checked ~ label::after, .wpcf7-acceptance .wpcf7-list-item label:has(input[type="checkbox"]:checked)::after { background-color: #4CAF50; transform: scale(1); } .wpcf7-acceptance .wpcf7-list-item-label { line-height: 1.5; font-size: 16px; color: #333; } .wpcf7-list-item { margin-left: 2px; } .wpcf7-not-valid-tip { font-size: 11px; margin-bottom: 0px; margin-top: 3px; } .mb-2 + .wpcf7-not-valid-tip { font-size: 11px; margin-bottom: 14px; margin-top: -4px; } .devis-section.last-child { padding-bottom: 0px; margin-bottom: 0px; } /* Styles pour les inputs texte */ .input-text, .wpcf7-textarea { width: 100%; padding: 12px 15px; border: 1px solid #ddd; border-radius: 5px; font-size: 16px; transition: border-color 0.3s ease; } .input-text:focus, .wpcf7-textarea:focus { outline: none; border-color: #000; } .wpcf7-textarea { resize: vertical; min-height: 120px; } /* Bouton submit */ .wpcf7-submit { width: 100%; padding: 15px 30px; background-color: #000; color: #fff; border: 2px solid #000; border-radius: 5px; font-size: 16px; font-weight: 500; cursor: pointer; transition: all 0.3s ease; margin-top: 20px; } .wpcf7-submit:not(:disabled):hover { background-color: transparent; color: #000; } .wpcf7-submit:disabled { opacity: 0.5; cursor: not-allowed; } /* Aside devis, envoi RÉUSSI : le formulaire s'efface, seul le message de confirmation reste. On masque les enfants DIRECTS du
sauf la sortie de réponse — soit le
des champs cachés et le conteneur des champs. Cibler les enfants directs plutôt qu'une liste de classes évite de dépendre des noms générés par CF7 et par le plugin de champs conditionnels. Portée limitée à .sent : sur invalid / failed / spam le formulaire reste affiché, sans quoi le visiteur ne pourrait pas corriger sa saisie. Portée limitée à l'aside devis : les autres formulaires du site gardent leur comportement d'origine. */ .devis-aside-form .wpcf7-form.sent > *:not(.wpcf7-response-output) { display: none; } /* Le message devient le seul contenu : sa marge haute de 2em, prévue pour le détacher du bouton d'envoi, n'a plus lieu d'être sous le titre de l'aside. */ .devis-aside-form .wpcf7-form.sent .wpcf7-response-output { margin-top: 0 !important; } /* Messages de réponse CF7 */ .wpcf7-response-output { margin: 2em 0 1em !important; padding: 15px 20px !important; border: none !important; border-radius: 5px; font-size: 16px; font-weight: 500; position: relative; padding-left: 50px !important; } .wpcf7-response-output::before { content: ''; position: absolute; left: 20px; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; border-radius: 50%; } /* Message de succès */ .wpcf7 form.sent .wpcf7-response-output { background-color: #e8f5e9; color: #2e7d32; border-left: 4px solid #4CAF50 !important; } .wpcf7 form.sent .wpcf7-response-output::before { background-color: #4CAF50; background-image: url('data:image/svg+xml;utf8,'); background-size: 14px 14px; background-position: center; background-repeat: no-repeat; } /* Message d'erreur */ .wpcf7 form.invalid .wpcf7-response-output, .wpcf7 form.failed .wpcf7-response-output { background-color: #ffebee; color: #c62828; border-left: 4px solid #f44336 !important; } .wpcf7 form.invalid .wpcf7-response-output::before, .wpcf7 form.failed .wpcf7-response-output::before { background-color: #f44336; background-image: url('data:image/svg+xml;utf8,'); background-size: 14px 14px; background-position: center; background-repeat: no-repeat; } /* Message de spam */ .wpcf7 form.spam .wpcf7-response-output { background-color: #fff3e0; color: #e65100; border-left: 4px solid #ff9800 !important; } .wpcf7 form.spam .wpcf7-response-output::before { background-color: #ff9800; background-image: url('data:image/svg+xml;utf8,'); background-size: 14px 14px; background-position: center; background-repeat: no-repeat; } /* Messages de validation individuels */ .wpcf7-not-valid-tip { color: #f44336; font-size: 14px; font-weight: 400; display: block; margin-top: 5px; } .wpcf7-form-control.wpcf7-not-valid { border-color: #f44336 !important; } /* Empêcher le scroll du body quand l'aside est ouvert */ body.devis-aside-open { overflow: hidden; } @media (max-width: 768px) { .devis-aside-content { width: 100%; max-width: 100%; } .devis-aside-inner { padding: 80px 30px 30px; } .devis-aside-title { font-size: 26px; margin-bottom: 30px; } } /************************************************************ END ASIDE FORMULAIRE DEVIS ************************************************************/ /************************************************************ RYTHME VERTICAL DES MODULES (Flexible Content) Chaque module géré est enveloppé par igeneve_afficher_modules() dans
. L'ESPACE ENTRE LES SECTIONS est porté ici, par une MARGE (pas un padding) : les marges des modules voisins FUSIONNENT, donc l'espace ne se cumule jamais, quel que soit ce que chaque bloc contient. Un seul curseur : --module-rhythm. Le rythme est porté par la SEULE marge du HAUT (« l'air avant moi »), jamais la marge basse. Pourquoi : sinon le raccord seam-same (qui remet la marge haute à 0) laisse subsister la marge BASSE du module précédent → un gap résiduel entre deux sections de même couleur. Avec une marge unique en haut, mettre seam-same à 0 colle réellement les deux modules. Les blocs sans fond ne portent plus AUCUN padding vertical propre (ils s'appuient sur cette marge) ; les blocs à fond peint gardent leur padding interne (pour insérer la couleur) et reçoivent en plus cette marge comme respiration. ************************************************************/ :root { --module-rhythm: 4rem; } @media (min-width: 992px) { :root { --module-rhythm: 6rem; } } @media (min-width: 1200px) { :root { --module-rhythm: 8rem; } } .igeneve-module { margin-top: var(--module-rhythm); } /* Premier module de la page. .is-first n'est posé QUE si un module géré occupe la toute première ligne du flexible. Quand la page commence par un hero, celui-ci n'est pas enveloppé (voir igeneve_modules_config) : il consomme l'index 0, aucun module ne porte .is-first, et le hero gère lui-même le passage sous le header. Reste le cas d'une page qui démarre DIRECTEMENT par un module — RGPD, mentions légales, page de texte… Le header est en position: fixed sur 104px : sans dégagement, le premier module passe dessous. C'est un padding et non une marge, pour que les modules à fond peint montent leur couleur jusqu'en haut de la page au lieu de laisser une bande blanche sous le header. */ .igeneve-module.is-first { margin-top: 0; padding-top: calc(104px + var(--module-rhythm)); } /* Respiration avant le footer : la TOUTE dernière section de la page reçoit une marge basse, qu'elle soit un module géré (is-last) ou non — certaines sections (ex. la FAQ selon la page) sortent de la logique du wrapper igeneve-module. Un module À FOND est exclu : il porte déjà son padding interne coloré (une marge transparente sous sa couleur laisserait une bande blanche). */ .site-content > *:last-child:not(.has-bg) { margin-bottom: var(--module-rhythm); } /* Raccord : même fond peint que le module précédent → jointure collée. */ .igeneve-module.seam-same { margin-top: 0; } /* Exception : le module tableau ne porte JAMAIS de marge haute, quel que soit le module qui le précède. */ .igeneve-module:has(.tableau-section) { margin-top: 0; } /************************************************************ LEFT / RIGHT ALTERNÉ + RÉVÉLATION COULEUR DE FOND ************************************************************/ /************************************************************ FOND PLEIN ÉCRAN RÉVÉLÉ AU SCROLL (générique) Usage : ajouter la classe .bg-reveal + data-bg-color="#xxxxxx" sur n'importe quelle
. Sans data-bg-color, rien n'est créé et la section reste transparente. ************************************************************/ /* Conteneur des calques : hors du flux, derrière tout le contenu */ #bg-reveal-layers { position: fixed; inset: 0; z-index: 0; pointer-events: none; } #bg-reveal-layers .bg-reveal-layer { position: absolute; inset: 0; opacity: 0; will-change: opacity; } /* Le contenu du site passe au-dessus des calques */ #smooth-wrapper { position: relative; z-index: 1; } /* Les sections concernées doivent laisser voir le calque */ .bg-reveal { background-color: transparent; } .left-right-section { position: relative; overflow: hidden; /* Espace central entre les colonnes, fluide selon la largeur d'écran */ --lr-gap: clamp(2rem, 7vw, 9rem); } /* Couche de couleur révélée en fondu au scroll (sous le contenu) */ .left-right-section .left-right-bg { position: absolute; inset: 0; z-index: 0; opacity: 0; pointer-events: none; will-change: opacity; background-color: #ffffff; } .left-right-section .left-right-inner { position: relative; z-index: 1; } /* Couleur des textes + bouton (pilotée par l'ACF, noir par défaut) */ .left-right-section .left-right-content, .left-right-section .left-right-content h2, .left-right-section .left-right-text { color: var(--lr-text-color, #000000); } /* Le .btn-simple hérite de cette couleur via currentColor, rien à déclarer */ .left-right-section .left-right-media { display: block; width: 100%; height: auto; object-fit: cover; } /* Respiration entre les colonnes : demi-gouttière de chaque côté du centre */ @media (min-width: 992px) { .left-right-section .left-right-content { padding-right: calc(var(--lr-gap) / 2); } .left-right-section .left-right-visuel { padding-left: calc(var(--lr-gap) / 2); } /* Repeats inversés : on miroite la gouttière */ .left-right-section.is-reverse .left-right-content { padding-right: 0; padding-left: calc(var(--lr-gap) / 2); } .left-right-section.is-reverse .left-right-visuel { padding-left: 0; padding-right: calc(var(--lr-gap) / 2); } } /* Sur mobile : visuel toujours sous le texte, peu importe l'alternance */ @media (max-width: 991.98px) { .left-right-section .left-right-visuel { margin-top: 2.5rem; } } /************************************************************ END LEFT / RIGHT ************************************************************/ /************************************************************ SIMPLE BANNER + TEXTE ************************************************************/ /* Fond révélé au scroll, limité à la section (comme le left/right). Ancre de positionnement pour le calque absolu qui suit. */ .simple-banner-texte { position: relative; } /* Calque de couleur, sous le contenu : opacité pilotée en JS (fondu d'entrée qui RESTE ensuite). La couleur est posée en inline par l'ACF. */ .simple-banner-texte .simple-banner-texte-bg { position: absolute; inset: 0; z-index: 0; opacity: 0; pointer-events: none; will-change: opacity; } /* Bannière et contenu partagent la même largeur maximale et la même gouttière */ .simple-banner-texte-banner, .simple-banner-texte-inner { position: relative; /* au-dessus du calque de fond */ z-index: 1; max-width: 1300px; margin-left: auto; margin-right: auto; padding-left: 15px; padding-right: 15px; } /* Hauteur de bannière maîtrisée selon l'écran */ .simple-banner-texte .simple-banner-texte-media { display: block; width: 100%; height: clamp(280px, 60vh, 720px); object-fit: cover; } .simple-banner-texte .simple-banner-texte-media img { width: 100%; height: 100%; object-fit: cover; } /* Couleur des textes, pilotée par l'ACF (noir par défaut) */ .simple-banner-texte .simple-banner-texte-inner, .simple-banner-texte .btn-text, .simple-banner-texte .simple-banner-texte-reveal p { color: var(--sbt-text-color, #000000); } /* La pastille de l'accroche suit elle aussi la couleur des textes */ .simple-banner-texte .btn-animated { background-color: var(--sbt-text-color, #000000); border-color: var(--sbt-text-color, #000000); } /* Le dernier paragraphe ne doit pas creuser un blanc sous la colonne */ .simple-banner-texte-reveal p:last-child { margin-bottom: 0; } /************************************************************ END SIMPLE BANNER + TEXTE ************************************************************/ /************************************************************ BOUTON SIMPLE (texte + flèche) ************************************************************/ /* Tout est en currentColor : le bouton suit la couleur de texte de sa section */ .btn-simple { display: inline-flex; align-items: center; gap: 10px; padding: 12px 22px; border: 1px solid currentColor; border-radius: 100px; color: inherit; text-decoration: none; line-height: 1; transition: opacity 0.3s ease; } .btn-simple:hover, .btn-simple:focus { color: inherit; text-decoration: none; opacity: 0.7; } .btn-simple .btn-simple-arrow { width: 18px; height: 18px; flex: 0 0 auto; transition: transform 0.3s ease; } /* Léger décalage de la flèche au survol, comme sur .text-reveal-button */ .btn-simple:hover .btn-simple-arrow, .btn-simple:focus .btn-simple-arrow { transform: translate(3px, -3px); } /************************************************************ END BOUTON SIMPLE ************************************************************/ /************************************************************ FICHE PROJET (single-projet.php) ************************************************************/ /* Hero : même géométrie que le bloc « hero » des sous-pages (cadre arrondi encastré sous le header fixe de 104px), pour que toutes les entrées de page du site se ressemblent. PARALLAXE (voir initProjetHeroParallax dans custom.js) : le cadre média est figé par ScrollTrigger dès que son bord haut touche le haut du navigateur, puis la section blanche .projet-intro glisse par-dessus. Deux contraintes en découlent : — pas d'overflow:hidden sur .projet-hero, sinon la carte figée (qui sort du cadre de sa section pendant le pin) serait rognée ; — pas de transform sur .projet-hero-media : sous ScrollSmoother, ScrollTrigger fige par transform et écraserait un translateX(-50%). Le centrage passe donc par margin:0 auto et le décalage haut par un padding-top de la section. */ .projet-hero { position: relative; z-index: 1; width: 100%; height: 100vh; padding-top: calc(104px + 3vh); background: #000; } .projet-hero-media { position: relative; margin: 0 auto; width: calc(96% - 24px); height: calc(94vh - 104px); overflow: hidden; border-radius: 60px; background: #000; } /* Sélecteurs de STRUCTURE et non de classe : les plugins WebP (Imagify, EWWW…) enveloppent l' dans un et transfèrent la classe du thème sur ce . Une règle .projet-hero-image ne toucherait alors plus l'image elle-même, qui garderait ses attributs width/height d'origine. Cibler .projet-hero-media > * couvre les deux cas. */ .projet-hero-media > img, .projet-hero-media > picture, .projet-hero-media > video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; } /* L' à l'intérieur du doit remplir ce dernier. */ .projet-hero-media > picture > img { display: block; width: 100%; height: 100%; object-fit: cover; } /* L'image reste en place derrière la vidéo le temps du fondu : sans elle, on verrait un cadre noir pendant que la vidéo se met en mémoire tampon. */ .projet-hero.is-playing .projet-hero-image { opacity: 0; transition: opacity 0.4s ease; } .projet-hero-play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 2; width: clamp(72px, 7vw, 110px); height: clamp(72px, 7vw, 110px); padding: 0; display: flex; align-items: center; justify-content: center; border: 1px solid rgba(255, 255, 255, 0.6); border-radius: 50%; background: rgba(0, 0, 0, 0.35); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); color: #fff; cursor: pointer; transition: background 0.3s ease, transform 0.3s ease, opacity 0.4s ease; } .projet-hero-play:hover, .projet-hero-play:focus-visible { background: rgba(0, 0, 0, 0.6); transform: translate(-50%, -50%) scale(1.08); } .projet-hero-play svg { display: block; width: 34%; height: 34%; } .projet-hero.is-playing .projet-hero-play { opacity: 0; pointer-events: none; } /* Titre + corps. L'air sous cette section remplace la marge du premier module flexible, qui porte la classe is-first (marge haute à 0). */ /* z-index 2 + fond opaque : c'est la « feuille » blanche qui recouvre le cadre média figé pendant la parallaxe. Sans fond explicite, l'image resterait visible au travers. */ .projet-intro { position: relative; z-index: 2; background: #fff; padding-top: var(--module-rhythm); padding-bottom: var(--module-rhythm); } .projet-titre { line-height: 1.05; } .projet-corps { margin-top: clamp(2.5rem, 5vw, 6rem); } /* Tableau d'infos : libellé à gauche, valeur à droite, sur deux colonnes alignées. La colonne des libellés se dimensionne sur le plus long d'entre eux (auto), la valeur prend le reste. */ /* UNE seule grille pour l'ensemble du
(les dt/dd sont ses enfants directs) : la colonne des libellés se cale sur le plus long d'entre eux — « En partenariat avec » — et TOUTES les lignes s'alignent dessus. Avec une grille par ligne, chaque ligne calculait sa propre largeur de colonne et le tableau partait en escalier. minmax(0, 1fr) sur la valeur : sans le 0, un mot long empêcherait la colonne de rétrécir et ferait déborder la grille. */ .projet-infos { display: grid; grid-template-columns: minmax(5.5rem, max-content) minmax(0, 1fr); column-gap: 1.5rem; margin: 0; border-bottom: 1px solid rgba(0, 0, 0, 0.12); } .projet-infos > dt, .projet-infos > dd { margin: 0; padding: 0.9rem 0; border-top: 1px solid rgba(0, 0, 0, 0.12); } .projet-info-label { font-weight: 500; font-size: 1rem; line-height: 1.5; color: rgba(0, 0, 0, 0.55); } .projet-info-valeur { font-size: 1.15rem; line-height: 1.5; } /* Les services sont plusieurs valeurs dans une même cellule : une par ligne. */ .projet-info-service { display: block; } .projet-description > *:first-child { margin-top: 0; } /* Sur petit écran, les libellés « En partenariat avec » laisseraient trop peu de place à la valeur : on empile libellé au-dessus de sa valeur. Le filet reste sur le seul libellé, qui ouvre la ligne. */ @media (max-width: 575.98px) { .projet-infos { grid-template-columns: 1fr; } .projet-infos > dt { padding-bottom: 0.15rem; } .projet-infos > dd { padding-top: 0; border-top: 0; } } @media (max-width: 991.98px) { .projet-hero { height: 78vh; padding-top: calc(104px + 2vh); } .projet-hero-media { height: calc(74vh - 104px); border-radius: 30px; } } /************************************************************ END FICHE PROJET ************************************************************/ /************************************************************ GALERIE (bloc ACF « galery ») Grille de 6 colonnes : pleine largeur = 6, 1/2 = 3, 1/3 = 2. Le nombre de colonnes occupées arrive en variable --galery-span posée par le PHP, ce qui permet de mélanger les largeurs sur une même ligne. ************************************************************/ .galery-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: clamp(0.75rem, 1.5vw, 1.75rem); } .galery-item { grid-column: span var(--galery-span, 6); margin: 0; min-width: 0; /* sans ça une image large déborde de sa colonne */ } .galery-media { overflow: hidden; border-radius: 10px; } /* Réglage ACF « Ajouter une bordure aux images » = oui : un filet gris clair sur toute la galerie. La bordure est posée sur .galery-media (et non sur l') pour épouser le border-radius du cadre, et box-sizing:border-box la fait tenir DANS la colonne de la grille : aucune image ne se décale. */ .galery-grid--bordure .galery-media { border: 1px solid rgba(0, 0, 0, 0.12); } /* Même raison que sur le hero : la classe .galery-image atterrit sur le quand un plugin WebP est actif, et l' interne conserve alors ses attributs width/height (ex. 1440x810) — d'où des images qui débordent et se font rogner par l'overflow de .galery-media. On cible donc l' par sa position dans le DOM. */ .galery-media picture { display: block; } .galery-media img { display: block; width: 100%; height: auto; } .galery-legende { margin-bottom: 0; } /* Sous 992px on repasse sur 2 colonnes : les 1/2 et 1/3 gardent une taille lisible, la pleine largeur reste pleine largeur. */ @media (max-width: 991.98px) { .galery-grid { grid-template-columns: repeat(2, 1fr); } .galery-item { grid-column: span 1; } .galery-item--full { grid-column: span 2; } } @media (max-width: 575.98px) { .galery-grid { grid-template-columns: 1fr; } .galery-item, .galery-item--full { grid-column: span 1; } } /************************************************************ END GALERIE ************************************************************/ /************************************************************ BLOC TEXTE SIMPLE Bloc éditorial deux colonnes : titre étroit à gauche, texte courant à droite. Voir template-parts/blocks/texte-simple.php. La colonne de texte reprend la grille de l'article de blog (single.php) : même longueur de ligne sur une page RGPD et dans un article, pour une seule façon de lire du texte long. ************************************************************/ .texte-simple-content { max-width: 900px; } /* Taille du titre de colonne. PHP pose une classe font-size-vw-* selon la longueur du titre. On garde ces classes — elles encodent l'information « titre court / long » — mais on relève leur PLANCHER ici. Sans ça, l'échelle vw du site bute sur son minimum (24 px) dès qu'on descend sous ~1200 px, pendant que le texte courant reste à 23 px et ses intertitres à 27 px : le titre du bloc passait alors SOUS les intertitres de son propre texte. On conserve la même courbe de croissance en vw, on ne remonte que la borne basse. !important est nécessaire : les classes font-size-vw-* du site en portent un. */ .texte-simple-aside h2.font-size-vw-10 { font-size: clamp(2.4rem, 3vw, 4.2rem) !important; } .texte-simple-aside h2.font-size-vw-9 { font-size: clamp(2.2rem, 2.75vw, 3.85rem) !important; } .texte-simple-aside h2.font-size-vw-8 { font-size: clamp(2rem, 2.2vw, 3.1rem) !important; } /* Sous lg les deux colonnes s'empilent : il faut rendre l'air que la gouttière horizontale ne fournit plus. */ @media (max-width: 991.98px) { .texte-simple-aside { margin-bottom: 2rem; } } /* --- Contenu WYSIWYG ------------------------------------------------ Le champ est libre : l'éditeur y posera des intertitres, des listes et des liens. Ces règles sont volontairement PORTÉES PAR LE BLOC et non par .wp-content (utilisé par le blog), pour ne rien changer aux articles existants. */ .texte-simple-content > *:first-child { margin-top: 0; } .texte-simple-content > *:last-child { margin-bottom: 0; } .texte-simple-content p { margin-top: 0; margin-bottom: 1.6em; } /* Intertitres. Le

du bloc est le titre de gauche : dans le corps du texte l'éditeur descend donc à partir de h3. On style quand même h2 au cas où, une échelle sous la taille du titre de colonne. */ .texte-simple-content h2, .texte-simple-content h3, .texte-simple-content h4, .texte-simple-content h5, .texte-simple-content h6 { font-weight: 500; line-height: 1.25; margin-top: 2.5em; margin-bottom: 0.8em; } /* Échelle resserrée : le texte courant du site fait 23 px à TOUTES les largeurs, il reste donc peu de place au-dessus avant de rattraper le titre de colonne. La hiérarchie s'appuie autant sur la graisse et les marges que sur la taille. */ .texte-simple-content h2 { font-size: 1.3em; } .texte-simple-content h3 { font-size: 1.15em; } .texte-simple-content h4 { font-size: 1.05em; } .texte-simple-content h5, .texte-simple-content h6 { font-size: 1em; text-transform: uppercase; letter-spacing: 0.04em; } .texte-simple-content ul, .texte-simple-content ol { margin: 0 0 1.6em; padding-left: 1.4em; } .texte-simple-content li { margin-bottom: 0.6em; } .texte-simple-content li:last-child { margin-bottom: 0; } /* Listes imbriquées : pas de double respiration. */ .texte-simple-content li > ul, .texte-simple-content li > ol { margin-top: 0.6em; margin-bottom: 0; } /* Les liens du site sont noirs et le restent au survol (voir LINKS & BUTTONS) : dans un paragraphe, rien ne les distinguerait du texte. Le soulignement est donc le SEUL repère — il n'est pas décoratif, c'est ce qui rend les liens identifiables, y compris pour qui ne perçoit pas les nuances de couleur. */ .texte-simple-content a { text-decoration: underline; text-underline-offset: 0.18em; text-decoration-thickness: 1px; } .texte-simple-content a:hover, .texte-simple-content a:focus { text-decoration-thickness: 2px; } .texte-simple-content strong, .texte-simple-content b { font-weight: 500; } .texte-simple-content hr { width: 100%; height: 1px; background-color: #707070; border: 0; margin: 2.5em 0; } .texte-simple-content blockquote { margin: 2em 0; padding-left: 1.4em; border-left: 1px solid #707070; color: #484848; } .texte-simple-content table { width: 100%; margin-bottom: 1.6em; border-collapse: collapse; } .texte-simple-content th, .texte-simple-content td { padding: 0.6em 0.8em; border-bottom: 1px solid #707070; text-align: left; vertical-align: top; } .texte-simple-content img { max-width: 100%; height: auto; border-radius: 10px; } /************************************************************ END BLOC TEXTE SIMPLE ************************************************************/ /************************************************************ AJUSTEMENTS RESPONSIVE Regroupés ici volontairement : ce sont des corrections de mise à l'échelle, pas des styles de composants. Chacune dit ce qu'elle répare, pour qu'on sache plus tard si elle est encore nécessaire. md = 768px. « mobile » s'arrête donc à 767.98px, les tablettes gardent le rendu desktop. ************************************************************/ /* --- Ronds numérotés (menu burger ET points forts) --------------------- 50px est calibré pour le desktop ; en mobile le rond mangeait la ligne et repoussait le libellé. La classe sert aux deux composants, la même réduction vaut pour les deux. */ @media (max-width: 767.98px) { .list-number { width: 40px; height: 40px; min-width: 40px; min-height: 40px; } /* Dans le menu burger, le rond numéroté et le bouton +/- se font face sur la même ligne : ils doivent avoir exactement le même diamètre, sinon la ligne paraît bancale. 36px pour les deux. Les points forts gardent 40px, leur rond n'a pas de vis-à-vis. */ #content-burger-menu .list-number { width: 36px; height: 36px; min-width: 36px; min-height: 36px; } /* Le sous-menu s'aligne sous le libellé : rond + gouttière ml-3. */ .burger-submenu { padding-left: 51px; } /* Le « + / − » du sous-menu, calibré lui aussi pour le desktop. */ .burger-submenu-toggle { width: 36px; height: 36px; } .burger-submenu-icon { width: 14px; } } /* --- Libellés du sous-menu burger -------------------------------------- font-size-vw-5 touche son plancher à 11.2px sous ~860px : trop petit pour une navigation principale, et sous le seuil de confort tactile. Seul ce composant utilise la classe, mais on cible le lien pour ne pas déplacer la valeur générale. */ .burger-submenu-link { font-size: clamp(1.05rem, 1.3vw, 1.8rem) !important; } /* --- Texte à révélation (#notre-approche) ------------------------------ Le retrait de première ligne (50vw) libère la place de la pastille, posée en absolute au-dessus. À l'échelle d'un téléphone, 50vw de retrait sur un texte déjà très grand casse la première ligne et la pastille ne s'aligne plus sur rien. En mobile uniquement, la pastille repasse dans le flux au-dessus du texte et le retrait disparaît. */ @media (max-width: 767.98px) { #notre-approche .btn-animated { position: static; margin-bottom: 1.5rem; } .first-line-indent .word:first-child { margin-left: 0; } } /* --- Points forts ------------------------------------------------------ Respiration resserrée entre les points : à pleine largeur mobile, py-4 sur chaque ligne étirait la liste sans rien apporter. */ @media (max-width: 767.98px) { .point-fort-item .py-4 { padding-top: 0.85rem !important; padding-bottom: 0.85rem !important; } } /* --- Réalisations : légende sur deux lignes ---------------------------- Titre et catégorie se partageaient une ligne en flex : à 375px le titre se retrouvait sur trois lignes et la catégorie écrasée à droite. */ @media (max-width: 767.98px) { .projet-info-row { flex-direction: column; align-items: flex-start; gap: 0.75rem; } .projet-info-type { text-align: left; } } /* --- Réalisations : empilement vertical en mobile ---------------------- Le carrousel horizontal suppose une section d'une hauteur d'écran, dans laquelle la carte est centrée. Sur un téléphone en portrait, un visuel 16/9 large de 70vw ne fait que ~150px de haut : il flottait au milieu de 100vh de vide, sa légende très loin de lui. En mobile les cartes s'empilent donc verticalement, la section prend la hauteur de son contenu, et le défilement horizontal est désactivé côté JS (voir initProjetsHorizontalScroll). Ciblé sur #projets-horizontal : le carrousel du blog est au format carré et ne souffre pas du même problème. */ @media (max-width: 767.98px) { /* Le fond noir de cette section est normalement peint par le calque révélé au scroll, créé dans initProjetsHorizontalScroll(). Comme cette fonction ne s'exécute plus en mobile, il faut poser la couleur en dur — sans quoi le texte blanc des légendes reste invisible sur fond blanc. */ .bg-reveal:has(#projets-horizontal) { background-color: #000000; } #projets-horizontal.projets-horizontal-section { min-height: 0; display: block; } #projets-horizontal .projets-horizontal-track { flex-direction: column; gap: 2.5rem; /* Gouttière identique au reste du contenu : 2% pour .container (max-width: 96%) PLUS les 12px de padding de colonne Bootstrap. C'est la valeur que le track portait déjà en desktop ; la retirer collait les cartes au bord de l'écran. */ padding-left: calc(2% + 12px); padding-right: calc(2% + 12px); transform: none !important; } #projets-horizontal .projets-horizontal-track::after { display: none; } #projets-horizontal .projet-horizontal-item { width: 100%; max-height: none; } /* Hauteur libre : chaque vidéo garde SON ratio, lu sur ses attributs width/height. Un cadre forcé en 16/9 rognait les sources en 16/10 — les projets ne sont pas tous tournés au même format. */ #projets-horizontal .projet-video-link, #projets-horizontal .projet-video-container { max-height: none; height: auto; } #projets-horizontal .projet-video { height: auto; } } /* --- Tableau : le mot défilant remonte en tête ------------------------- Le titre est un calque centré verticalement dans une section d'une hauteur d'écran. En mobile les colonnes s'empilent, la section devient très haute, et le mot se retrouvait flottant au milieu des cartes. Il repasse donc dans le flux, en bandeau au-dessus des colonnes — l'effet de défilement infini est conservé, c'est seulement sa position qui change. */ @media (max-width: 767.98px) { .tableau-section { min-height: 0; display: block; padding-top: 3rem; padding-bottom: 1rem; } .tableau-titre-wrapper { position: static; transform: none; } /* font-size-vw-30 plafonne à 163px de haut en mobile : un bandeau qui occupait la moitié de l'écran. */ .tableau-section .tableau-titre { font-size: clamp(4rem, 17vw, 10rem) !important; } .tableau-colonnes { min-height: 0; display: block; } } /* --- Bannière + texte : lisibilité du texte révélé ---------------------- Ces paragraphes reçoivent font-size-vw-8 (posé en PHP par sbt_classer_paragraphes), dont le plancher est 19.2px : un peu juste en mobile pour un texte qui porte le message de la section. On relève le plancher à 22.4px en gardant la même pente en vw et le même maximum — au-delà de ~1020px l'affichage est identique. !important est obligatoire, la classe utilitaire d'origine en porte un. */ .simple-banner-texte .simple-banner-texte-reveal p { font-size: clamp(1.4rem, 2.2vw, 3.1rem) !important; } /************************************************************ FIN AJUSTEMENTS RESPONSIVE ************************************************************/ /************************************************************ FAQ — QUESTIONS DÉPLIABLES Reprise de la présentation mise au point sur la page Accompagnement. Zéro JavaScript :
natif ouvre et ferme, l'attribut name= ne laisse qu'une question ouverte. Autonome : les variables --trf-* de tarifs.css ne sont pas chargées sur les pages services, les valeurs sont donc écrites en clair ici. ************************************************************/ /* Fond et rythme repris de .trf-sheet--grey / .trf-section (tarifs.css) : c'est la présentation que la page Accompagnement a validée. */ .igfaq-section { background-color: #f1f1ef; padding-block: clamp(5rem, 10vw, 11rem); } .igfaq-aside { margin-bottom: 2.5rem; } /* Même échelle que .trf-block-title--xl : le titre porte la section, il ne doit pas passer derrière les questions. */ .igfaq-titre { font-size: clamp(2.4rem, 5vw, 5.8rem); font-weight: 500; line-height: 0.98; letter-spacing: -0.045em; margin-bottom: 0; } .igfaq { border-top: 1px solid #000; /* Autorise l'animation de block-size vers « auto » (navigateurs récents). Sans ça, le dépliage est instantané — dégradation acceptable. */ interpolate-size: allow-keywords; } .igfaq-item { border-bottom: 1px solid rgba(0, 0, 0, 0.14); } .igfaq-item summary { display: grid; grid-template-columns: minmax(0, 1fr) 52px; align-items: center; gap: 1.5rem; padding: clamp(1.25rem, 2vw, 2rem) 0; list-style: none; cursor: pointer; } /* Retire le triangle natif (Safari passe par ce pseudo-élément). */ .igfaq-item summary::-webkit-details-marker { display: none; } .igfaq-q { font-size: clamp(1.25rem, 2vw, 2.1rem); font-weight: 500; line-height: 1.15; letter-spacing: -0.02em; transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1); } .igfaq-item summary:hover .igfaq-q { transform: translateX(0.5rem); } /* Le « + » devient « × » à l'ouverture : deux barres, dont une pivotée. */ .igfaq-icon { position: relative; width: 52px; height: 52px; border: 1px solid #000; border-radius: 50%; color: #000; transition: background-color 0.45s cubic-bezier(0.22, 1, 0.36, 1), color 0.45s cubic-bezier(0.22, 1, 0.36, 1); } .igfaq-icon::before, .igfaq-icon::after { content: ''; position: absolute; top: 50%; left: 50%; width: 16px; height: 1.5px; background: currentColor; transform: translate(-50%, -50%); transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1); } .igfaq-icon::after { transform: translate(-50%, -50%) rotate(90deg); } .igfaq-item[open] .igfaq-icon { background: #000; color: #fff; } .igfaq-item[open] .igfaq-icon::after { transform: translate(-50%, -50%) rotate(0deg); } .igfaq-a { max-width: 62ch; padding: 0 0 clamp(1.5rem, 2.5vw, 2.5rem); } .igfaq-a > *:first-child { margin-top: 0; } .igfaq-a > *:last-child { margin-bottom: 0; } .igfaq-item::details-content { block-size: 0; overflow: hidden; transition: block-size 0.5s cubic-bezier(0.22, 1, 0.36, 1), content-visibility 0.5s allow-discrete; } .igfaq-item[open]::details-content { block-size: auto; } /* Mobile : le rond et sa colonne se resserrent, comme partout ailleurs. */ @media (max-width: 767.98px) { .igfaq-item summary { grid-template-columns: minmax(0, 1fr) 40px; gap: 1rem; } .igfaq-icon { width: 40px; height: 40px; } .igfaq-icon::before, .igfaq-icon::after { width: 13px; } } /************************************************************ FIN FAQ ************************************************************/