/* ===================================================================== SECTION HISTOIRE + PROJETS — habillage Version du 14/08/2026 v18. Classes Divi (tiret simple) : section ouverture .......... ah-hist module titre ............... ah-hist-titre modules paragraphes ........ ah-hist-texte section projets ............ ah-projets ===================================================================== */ /* Le script Histoire (Intégration) pose « ah-anim » sur comme simple marqueur. Or le CSS global définit .ah-anim { opacity: 0 }, ce qui masque TOUTE la page. Sur mobile le seuil d'apparition n'est jamais atteint (page trop longue / écran trop court) : écran blanc. */ html.ah-anim { opacity: 1 !important; transform: none !important; } .ah-hist { --ah-hist-terre: #b07030; --ah-hist-chocolat: #522202; --ah-hist-ocre: #8c5a18; --ah-hist-trait: rgba(82, 34, 2, .22); --ah-hist-titre: clamp(30px, 3.4vw, 58px); --ah-hist-texte: clamp(13px, 1vw, 15px); --ah-hist-bord: var(--ah-marge-site, max(4vw, calc((100vw - 1380px) / 2))); --ah-hist-courbe: cubic-bezier(.22, .61, .36, 1); --ah-hist-duree: 900ms; --ah-h-haute: clamp(300px, 44vh, 480px); --ah-h-moyenne: clamp(240px, 35vh, 390px); --ah-h-basse: clamp(190px, 27vh, 310px); /* Course du parallaxe, en % de l'image. Les 4 photos d'ouverture bougent nettement plus que les projets. */ --ah-para: 20; --ah-para-extra: 28%; position: relative; background-color: #ffffff; overflow: visible !important; padding: clamp(40px, 6vh, 90px) 0 !important; margin: 0 !important; } /* Fond blanc qui remonte sous la vague : bouche le trou transparent sans margin positif. La vague (z-index 4) reste dessinée par-dessus. */ .ah-hist::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 16px; background-color: #ffffff; pointer-events: none; z-index: 0; } /* --------------------------------------------------------------- Les deux rangées --------------------------------------------------------------- */ .ah-hist .et_pb_row { width: min(92%, 1380px) !important; max-width: none !important; overflow: visible !important; } .ah-hist .et_pb_column { overflow: visible !important; margin-bottom: 0 !important; } .ah-hist .et_pb_row:has(.ah-hist-titre) { padding-top: clamp(26px, 3.4vh, 56px) !important; padding-bottom: 0 !important; } .ah-hist .et_pb_row:has(.ah-hist-texte) { padding-top: 0 !important; padding-bottom: 0 !important; margin-top: clamp(40px, 5.5vh, 84px) !important; } /* --------------------------------------------------------------- Les photographies --------------------------------------------------------------- */ .ah-hist .et_pb_image { margin: 0 !important; max-width: none; transition: opacity var(--ah-hist-duree) ease var(--ah-hist-d, 0ms), transform var(--ah-hist-duree) var(--ah-hist-courbe) var(--ah-hist-d, 0ms); } .ah-hist .et_pb_image.est-vue { opacity: 1; transform: none; } .ah-hist .et_pb_image .et_pb_image_wrap { position: relative; display: block; width: 100%; height: var(--ah-h, var(--ah-h-moyenne)); overflow: hidden; background: transparent; } /* L'image est plus haute que le cadre : c'est cette marge qui donne sa course au parallaxe, sans jamais laisser voir le fond. */ .ah-hist .et_pb_image img { position: absolute; top: calc(var(--ah-para-extra) * -0.5); left: 0; display: block; width: 100%; height: calc(100% + var(--ah-para-extra)); object-fit: cover; transform: translate3d(0, var(--ah-py, 0%), 0); will-change: transform; } .ah-hist .et_pb_row:has(.ah-hist-titre) .et_pb_image { margin-right: calc(-1 * var(--ah-hist-bord)) !important; --ah-h: var(--ah-h-moyenne); } .ah-hist .et_pb_row:has(.ah-hist-texte) .et_pb_column:first-child > .et_pb_module:nth-child(1) { margin-left: calc(-1 * var(--ah-hist-bord)) !important; --ah-h: var(--ah-h-haute); } .ah-hist .et_pb_row:has(.ah-hist-texte) .et_pb_column:first-child > .et_pb_module:nth-child(2) { margin-top: clamp(26px, 4vh, 62px) !important; --ah-hist-d: 120ms; --ah-h: var(--ah-h-haute); } .ah-hist .et_pb_row:has(.ah-hist-texte) .et_pb_column:last-child .et_pb_image { margin-top: clamp(34px, 5vh, 76px) !important; margin-right: calc(-1 * var(--ah-hist-bord)) !important; --ah-hist-d: 200ms; --ah-h: var(--ah-h-haute); } /* --------------------------------------------------------------- Le titre --------------------------------------------------------------- */ .ah-hist .ah-hist-titre.et_pb_text { margin: 0 !important; padding: 0 !important; transition: opacity var(--ah-hist-duree) ease 60ms, transform var(--ah-hist-duree) var(--ah-hist-courbe) 60ms; } .ah-hist .ah-hist-titre.est-vue.et_pb_text { opacity: 1; transform: none; } .ah-hist .ah-hist-titre.et_pb_text::before { content: ""; display: block; width: 12px; height: 12px; margin-bottom: clamp(22px, 3vh, 40px); border-radius: 50%; background: var(--ah-hist-terre); } .ah-hist .ah-hist-titre h1, .ah-hist .ah-hist-titre h2, .ah-hist .ah-hist-titre h3 { margin: 0 !important; padding: 0 !important; color: var(--ah-hist-terre) !important; font-size: var(--ah-hist-titre) !important; font-weight: 300 !important; line-height: 1.08 !important; letter-spacing: -.01em !important; } /* --------------------------------------------------------------- Les deux paragraphes --------------------------------------------------------------- */ .ah-hist .ah-hist-texte.et_pb_text { margin: 0 !important; padding: 0 !important; max-width: 46ch; transition: opacity var(--ah-hist-duree) ease var(--ah-hist-d, 0ms), transform var(--ah-hist-duree) var(--ah-hist-courbe) var(--ah-hist-d, 0ms); } .ah-hist .ah-hist-texte.est-vue.et_pb_text { opacity: 1; transform: none; } .ah-hist .ah-hist-texte.et_pb_text:first-child { padding-top: clamp(20px, 3.5vh, 60px) !important; --ah-hist-d: 120ms; } .ah-hist .ah-hist-texte p { margin: 0 !important; padding: 0 !important; color: var(--ah-hist-chocolat) !important; font-size: var(--ah-hist-texte) !important; font-weight: 400 !important; line-height: 1.85 !important; } .ah-hist .ah-hist-texte + .ah-hist-texte { margin-top: clamp(18px, 2.6vh, 34px) !important; --ah-hist-d: 200ms; } .ah-hist .ah-hist-texte + .ah-hist-texte p { color: var(--ah-hist-ocre) !important; font-size: clamp(15px, 1.25vw, 19px) !important; line-height: 1.55 !important; } @media (min-width: 981px) { .ah-hist { padding: clamp(56px, 8vh, 110px) 0 !important; } .ah-hist .et_pb_row:has(.ah-hist-titre) { padding-top: clamp(36px, 4.4vh, 72px) !important; } /* Texte à gauche, 2 petites photos à droite. order : sans inverser les colonnes dans Divi. Pas de float : ça tuait column-gap (50%+50% collés). */ html body #page-container .ah-hist .et_pb_row:has(.ah-hist-titre), html body #page-container .ah-hist .et_pb_row:has(.ah-hist-texte) { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: flex-start; column-gap: clamp(28px, 3.2vw, 52px); gap: clamp(28px, 3.2vw, 52px); } html body #page-container .ah-hist .et_pb_row:has(.ah-hist-texte) { margin-top: clamp(52px, 6.5vh, 100px) !important; } html body #page-container .ah-hist .et_pb_row:has(.ah-hist-titre)::before, html body #page-container .ah-hist .et_pb_row:has(.ah-hist-titre)::after, html body #page-container .ah-hist .et_pb_row:has(.ah-hist-texte)::before, html body #page-container .ah-hist .et_pb_row:has(.ah-hist-texte)::after { display: none !important; content: none !important; } html body #page-container .ah-hist .et_pb_row:has(.ah-hist-titre) > .et_pb_column, html body #page-container .ah-hist .et_pb_row:has(.ah-hist-texte) > .et_pb_column { float: none !important; clear: none !important; margin-left: 0 !important; margin-right: 0 !important; width: auto !important; max-width: none !important; } html body #page-container .ah-hist .et_pb_row:has(.ah-hist-texte) > .et_pb_column:first-child { order: 2; flex: 0 1 42%; } html body #page-container .ah-hist .et_pb_row:has(.ah-hist-texte) > .et_pb_column:last-child { order: 1; flex: 1 1 50%; } html body #page-container .ah-hist .et_pb_row:has(.ah-hist-titre) > .et_pb_column { flex: 1 1 0; } /* Photos (1re colonne DOM, visuelle droite) : fuite à droite. Écart vertical entre les 2 petites photos. */ .ah-hist .et_pb_row:has(.ah-hist-texte) .et_pb_column:first-child > .et_pb_module:nth-child(1) { margin-left: 0 !important; margin-right: calc(-1 * var(--ah-hist-bord)) !important; } .ah-hist .et_pb_row:has(.ah-hist-texte) .et_pb_column:first-child > .et_pb_module:nth-child(2) { margin-top: clamp(26px, 4vh, 62px) !important; margin-left: 0 !important; margin-right: calc(-1 * var(--ah-hist-bord)) !important; } /* Photo sous le texte, désormais à gauche : plus de bleed droit. */ .ah-hist .et_pb_row:has(.ah-hist-texte) .et_pb_column:last-child .et_pb_image { margin-right: 0 !important; } .ah-projets { --ah-proj-entre: clamp(42px, 6vh, 88px); } .ah-projets .et_pb_row { padding-bottom: clamp(52px, 7.5vh, 104px) !important; } } /* Filet sous l'introduction (premier paragraphe seulement). Vague du site, tirée de gauche à droite au défilement. */ .ah-hist .ah-hist-texte:first-child::after { content: ""; display: block; width: 100%; height: var(--ah-filet-hauteur, 4px); margin-top: clamp(22px, 3.2vh, 40px); background-color: var(--ah-hist-chocolat); transform: scaleX(1); transform-origin: left center; transition: transform 1100ms var(--ah-hist-courbe) 200ms; pointer-events: none; -webkit-mask-image: var(--ah-perle-masque); mask-image: var(--ah-perle-masque); -webkit-mask-repeat: repeat-x; mask-repeat: repeat-x; -webkit-mask-size: calc(var(--ah-filet-hauteur, 4px) * 1.5035) 100%; mask-size: calc(var(--ah-filet-hauteur, 4px) * 1.5035) 100%; -webkit-mask-position: left center; mask-position: left center; } html.ah-anim .ah-hist .ah-hist-texte:first-child::after, html.ah-hist-filets .ah-hist .ah-hist-texte:first-child::after { transform: scaleX(0); } html.ah-anim .ah-hist .ah-hist-texte:first-child.est-vue::after, html.ah-hist-filets .ah-hist .ah-hist-texte:first-child.est-vue::after { transform: scaleX(1); } /* --------------------------------------------------------------- Mobile --------------------------------------------------------------- */ @media (max-width: 980px) { .ah-hist { --ah-hist-duree: 700ms; --ah-hist-titre: clamp(28px, 8vw, 40px); --ah-hist-ecart-photo: 16px; --ah-para: 14; --ah-h-haute: clamp(240px, 42vh, 340px); --ah-h-moyenne: clamp(200px, 34vh, 280px); --ah-h-basse: clamp(170px, 27vh, 230px); padding-top: clamp(28px, 5vh, 40px) !important; } .ah-hist .et_pb_column { margin-bottom: 0 !important; } /* Plus de bandeau blanc de 16 px au-dessus d'Histoire : c'était le liseré. La vague (12 px, top −6 px) est à cheval toute seule. 1 px de fond qui déborde vers le haut bouche le cheveu Safari. */ .ah-hist::before { height: 1px !important; } body .ah-carousel-section.et_pb_section ~ .ah-hist.et_pb_section { margin-top: 0 !important; background-color: #ffffff !important; box-shadow: 0 -1px 0 0 #ffffff; } /* Paragraphes avant les photos. Pas de display:contents : ça cassait les hauteurs (parallaxe, sticky hero visible dans les trous, jank). Les colonnes restent de vraies boîtes ; on réordonne au flex. */ .ah-hist .et_pb_row:has(.ah-hist-texte) { display: flex !important; flex-direction: column !important; margin-top: 0 !important; padding-top: var(--ah-hist-ecart-photo) !important; gap: var(--ah-hist-ecart-photo) !important; } .ah-hist .et_pb_row:has(.ah-hist-texte) > .et_pb_column { display: flex !important; flex-direction: column !important; float: none !important; width: 100% !important; max-width: none !important; margin: 0 !important; gap: var(--ah-hist-ecart-photo) !important; } .ah-hist .et_pb_row:has(.ah-hist-titre) { display: flex !important; flex-direction: column !important; gap: var(--ah-hist-ecart-photo) !important; } .ah-hist .et_pb_row:has(.ah-hist-titre) > .et_pb_column { display: flex !important; flex-direction: column !important; float: none !important; width: 100% !important; margin: 0 !important; gap: var(--ah-hist-ecart-photo) !important; } .ah-hist .et_pb_row:has(.ah-hist-texte) > .et_pb_column:last-child { order: -1; } .ah-hist .et_pb_row:has(.ah-hist-texte) .ah-hist-texte { order: 1; } .ah-hist .et_pb_row:has(.ah-hist-texte) .et_pb_image { order: 2; flex-shrink: 0; } /* Largeur = rangée (mêmes insets que le texte). Plus de bleed. */ .ah-hist .et_pb_image, .ah-hist .et_pb_row:has(.ah-hist-titre) .et_pb_image, .ah-hist .et_pb_row:has(.ah-hist-texte) .et_pb_column:first-child > .et_pb_module:nth-child(1), .ah-hist .et_pb_row:has(.ah-hist-texte) .et_pb_column:first-child > .et_pb_module:nth-child(2), .ah-hist .et_pb_row:has(.ah-hist-texte) .et_pb_column:last-child .et_pb_image { width: 100% !important; max-width: none !important; margin: 0 !important; } .ah-hist .ah-hist-texte.et_pb_text:first-child { padding-top: 0 !important; } .ah-hist .ah-hist-texte.et_pb_text { max-width: none; } .ah-hist .et_pb_image, .ah-hist .et_pb_text { --ah-hist-d: 0ms; } } @media (prefers-reduced-motion: reduce) { .ah-hist .et_pb_image, .ah-hist .et_pb_text { opacity: 1 !important; transform: none !important; transition: none !important; } .ah-hist .et_pb_image img { position: relative; top: 0; height: 100%; transform: none !important; will-change: auto; } .ah-hist .ah-hist-texte:first-child::after { transform: scaleX(1) !important; transition: none !important; } } .et-fb .ah-hist .et_pb_image, .et-fb .ah-hist .et_pb_text, .et-fb-root-ancestor .ah-hist .et_pb_image, .et-fb-root-ancestor .ah-hist .et_pb_text { opacity: 1 !important; transform: none !important; } .et-fb .ah-hist .ah-hist-texte:first-child::after, .et-fb-root-ancestor .ah-hist .ah-hist-texte:first-child::after { transform: scaleX(1) !important; } /* ===================================================================== LES PROJETS — la grille des six réalisations ===================================================================== */ .ah-projets { --ah-proj-encre: #2d1d12; --ah-proj-trait: rgba(45, 29, 18, .55); --ah-proj-nom: clamp(17px, 1.7vw, 25px); --ah-proj-retrait: clamp(12px, 1.6vw, 26px); --ah-proj-entre: clamp(34px, 5vh, 76px); --ah-proj-courbe: cubic-bezier(.22, .61, .36, 1); --ah-proj-duree: 900ms; --ah-h-haute: clamp(300px, 44vh, 480px); --ah-h-moyenne: clamp(240px, 35vh, 390px); --ah-h-basse: clamp(190px, 27vh, 310px); --ah-para: 8; --ah-para-extra: 16%; background-color: #ffffff; overflow: visible; } .ah-projets .et_pb_row { width: min(92%, 1380px) !important; max-width: none !important; padding-top: 0 !important; padding-bottom: clamp(40px, 6vh, 90px) !important; } .ah-projets .et_pb_column { margin-bottom: 0 !important; } .ah-projets .et_pb_row > .et_pb_column:nth-child(2) { margin-top: clamp(38px, 8vh, 120px); } .ah-projets .et_pb_image { margin: 0 !important; max-width: none; transition: opacity var(--ah-proj-duree) ease var(--ah-proj-d, 0ms), transform var(--ah-proj-duree) var(--ah-proj-courbe) var(--ah-proj-d, 0ms); } .ah-projets .et_pb_image.est-vue { opacity: 1; transform: none; } .ah-projets .et_pb_column > .et_pb_image ~ .et_pb_image { margin-top: var(--ah-proj-entre) !important; } .ah-projets .et_pb_image .et_pb_image_wrap { position: relative; display: block; width: 100%; height: var(--ah-h, var(--ah-h-moyenne)); overflow: hidden; background: transparent; } .ah-projets .et_pb_image img { position: absolute; top: calc(var(--ah-para-extra) * -0.5); left: 0; display: block; width: 100%; height: calc(100% + var(--ah-para-extra)); object-fit: cover; transform: translate3d(0, var(--ah-py, 0%), 0); will-change: transform; } .ah-projets .et_pb_column:nth-child(1) > .et_pb_module:nth-child(1) { --ah-h: var(--ah-h-haute); } .ah-projets .et_pb_column:nth-child(1) > .et_pb_module:nth-child(3) { --ah-h: var(--ah-h-basse); } .ah-projets .et_pb_column:nth-child(1) > .et_pb_module:nth-child(5) { --ah-h: var(--ah-h-moyenne); } .ah-projets .et_pb_column:nth-child(2) > .et_pb_module:nth-child(1) { --ah-h: var(--ah-h-moyenne); } .ah-projets .et_pb_column:nth-child(2) > .et_pb_module:nth-child(3) { --ah-h: var(--ah-h-haute); } .ah-projets .et_pb_column:nth-child(2) > .et_pb_module:nth-child(5) { --ah-h: var(--ah-h-basse); } .ah-projets .et_pb_column > .et_pb_module:nth-child(3) { --ah-proj-d: 130ms; } .ah-projets .et_pb_column > .et_pb_module:nth-child(4) { --ah-proj-d: 130ms; } .ah-projets .et_pb_column > .et_pb_module:nth-child(5) { --ah-proj-d: 260ms; } .ah-projets .et_pb_column > .et_pb_module:nth-child(6) { --ah-proj-d: 260ms; } .ah-projets .et_pb_text { margin: 15px 0 0 !important; padding-left: var(--ah-proj-retrait); transition: opacity 700ms ease calc(var(--ah-proj-d, 0ms) + 200ms), transform 700ms var(--ah-proj-courbe) calc(var(--ah-proj-d, 0ms) + 200ms); } .ah-projets .et_pb_text.est-vue { opacity: 1; transform: none; } .ah-projets .et_pb_text p { margin: 0 !important; padding: 0 !important; color: var(--ah-proj-encre) !important; font-size: var(--ah-proj-nom) !important; font-weight: 300 !important; line-height: 1.1 !important; } /* Filet sous chaque légende, vague, toute la largeur de l'image. */ .ah-projets .et_pb_text::after { content: ""; display: block; height: var(--ah-filet-hauteur, 4px); width: 100%; margin: 13px 0 0 calc(-1 * var(--ah-proj-retrait)); background-color: var(--ah-proj-encre); transform: scaleX(1); transform-origin: left center; transition: transform 1100ms var(--ah-proj-courbe) calc(var(--ah-proj-d, 0ms) + 320ms); pointer-events: none; -webkit-mask-image: var(--ah-perle-masque); mask-image: var(--ah-perle-masque); -webkit-mask-repeat: repeat-x; mask-repeat: repeat-x; -webkit-mask-size: calc(var(--ah-filet-hauteur, 4px) * 1.5035) 100%; mask-size: calc(var(--ah-filet-hauteur, 4px) * 1.5035) 100%; -webkit-mask-position: left center; mask-position: left center; } html.ah-anim .ah-projets .et_pb_text::after, html.ah-hist-filets .ah-projets .et_pb_text::after { transform: scaleX(0); } html.ah-anim .ah-projets .et_pb_text.est-vue::after, html.ah-hist-filets .ah-projets .et_pb_text.est-vue::after { transform: scaleX(1); } @media (max-width: 980px) { .ah-projets { --ah-proj-duree: 700ms; --ah-para: 6; --ah-h-haute: clamp(240px, 42vh, 340px); --ah-h-moyenne: clamp(200px, 34vh, 280px); --ah-h-basse: clamp(170px, 27vh, 230px); } .ah-projets .et_pb_row > .et_pb_column:nth-child(2) { margin-top: var(--ah-proj-entre); } .ah-projets .et_pb_column > .et_pb_image ~ .et_pb_image { margin-top: var(--ah-proj-entre) !important; } .ah-projets .et_pb_image, .ah-projets .et_pb_text { --ah-proj-d: 0ms; } } @media (prefers-reduced-motion: reduce) { .ah-projets .et_pb_image, .ah-projets .et_pb_text { opacity: 1 !important; transform: none !important; transition: none !important; } .ah-projets .et_pb_text::after { transform: scaleX(1) !important; transition: none !important; } .ah-projets .et_pb_image img { position: relative; top: 0; height: 100%; transform: none !important; will-change: auto; } } .et-fb .ah-projets .et_pb_image, .et-fb .ah-projets .et_pb_text, .et-fb-root-ancestor .ah-projets .et_pb_image, .et-fb-root-ancestor .ah-projets .et_pb_text { opacity: 1 !important; transform: none !important; } .et-fb .ah-projets .et_pb_text::after, .et-fb-root-ancestor .ah-projets .et_pb_text::after { transform: scaleX(1) !important; } /* Mobile : pas de parallaxe sur les photos Histoire / projets. will-change: transform les gardait composées en permanence. */ @media (max-width: 980px) { .ah-hist .et_pb_image img, .ah-projets .et_pb_image img { transform: none !important; will-change: auto !important; } }