/* Devanturo — la démo en grand (modale LE BRAISÉ), pilotée par demos.js. Panneau encre quasi plein écran : inset 0 sous 760, 24 px à partir de 760, 40 px à partir de 1440. Angles droits partout ; le mouvement d'ouverture (depuis l'écran cliqué) est écrit en JS (Web Animations, transform + opacity). */ /* Page derrière : plus de défilement, et la gouttière de la barre de défilement reste réservée (aucun décalage de mise en page, donc ni refresh de ScrollTrigger ni saut du récit). La position de défilement n'est jamais touchée. Le verrou est posé sur et non sur : un overflow sur empêcherait le overflow-x: hidden de de remonter au viewport, deviendrait le conteneur de défilement et la scène collante (.scene, sticky) sauterait derrière la modale (mesuré : le portable passait de top 245 à top −5464 px). Posé sur , le verrou remonte au viewport, la scène ne bouge pas. */ html.modale-ouverte { scrollbar-gutter: stable; } html.modale-ouverte body { overflow: hidden; } /* Rien ne s'anime derrière la modale. */ .modale-ouverte .tel-corps { animation-play-state: paused; } .modale { position: fixed; inset: 0; z-index: 100; overscroll-behavior: contain; } .modale-fond { position: absolute; inset: 0; background: rgba(20, 19, 17, .6); } .modale-garde { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } /* La barre est en display: contents : ses enfants se placent dans la grille du panneau (CTA en bandeau bas sous 760, dans la barre au-delà). */ .modale-panneau { position: absolute; inset: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto auto; grid-template-rows: 56px minmax(0, 1fr) 52px; grid-template-areas: "titre onglet fermer" "cadre cadre cadre" "cta cta cta"; background: var(--encre); color: var(--fond); transform-origin: 0 0; box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .5); } .modale-barre { display: contents; } .modale-titre { grid-area: titre; align-self: center; min-width: 0; padding-left: 16px; line-height: 1.15; } .modale-titre b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 400 19px/1.1 var(--serif); letter-spacing: -.01em; } .modale-sous { display: block; margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 400 12px/1.2 var(--sans); letter-spacing: .02em; color: rgba(246, 244, 239, .72); } .modale-onglet { grid-area: onglet; align-self: center; display: inline-flex; align-items: center; min-height: 48px; padding: 0 12px; color: var(--fond); text-decoration: none; font: 400 13px/1 var(--sans); white-space: nowrap; } .modale-onglet > span { border-bottom: 1px solid rgba(246, 244, 239, .5); padding-bottom: 2px; } .modale-onglet:hover > span { border-bottom-color: var(--fond); } .modale-long { display: none; } .modale-onglet > span::first-letter { text-transform: uppercase; } /* « Nouvel onglet » sous 760, « Ouvrir dans un nouvel onglet » au-delà */ .modale-cta { grid-area: cta; display: flex; align-items: center; justify-content: center; background: var(--rouge); color: #fff; text-decoration: none; font: 500 16px/1 var(--sans); padding: 0 20px; white-space: nowrap; transition: background-color var(--duree) var(--courbe), color var(--duree) var(--courbe); } .modale-cta:hover { background: var(--fond); color: var(--encre); } .modale-fermer { grid-area: fermer; align-self: center; position: relative; width: 48px; height: 48px; margin-right: 4px; padding: 0; border: 0; border-radius: 0; background: transparent; cursor: pointer; -webkit-tap-highlight-color: transparent; } .modale-fermer::before, .modale-fermer::after { content: ''; position: absolute; left: 50%; top: 50%; width: 20px; height: 1.5px; margin: -.75px 0 0 -10px; background: var(--fond); transform: rotate(45deg); } .modale-fermer::after { transform: rotate(-45deg); } .modale-fermer:hover { background: rgba(246, 244, 239, .1); } /* Focus : le rouge d'identité, posé à l'intérieur (le panneau touche les bords de l'écran sur mobile) ; blanc crème sur le bouton rouge. */ .modale :where(a, button):focus-visible { outline: 2px solid var(--rouge); outline-offset: -4px; } .modale .modale-cta:focus-visible { outline-color: var(--fond); } .modale-cadre { grid-area: cadre; position: relative; overflow: hidden; background: #0d0c0b; box-shadow: inset 0 1px 0 rgba(246, 244, 239, .12); } .modale-iframe { position: absolute; inset: 1px 0 0; width: 100%; height: calc(100% - 1px); border: 0; background: #0d0c0b; } .modale-chargement { position: absolute; inset: 1px 0 0; display: grid; place-items: center; background: var(--encre); color: rgba(246, 244, 239, .72); font: 400 14px/1.4 var(--sans); letter-spacing: .02em; text-align: center; padding: 24px; transition: opacity 240ms var(--courbe), visibility 0s linear 240ms; } .modale-chargement a { color: var(--fond); } .modale-cadre.charge .modale-chargement { opacity: 0; visibility: hidden; } @media (min-width: 760px) { .modale-panneau { inset: 24px; grid-template-columns: minmax(0, 1fr) auto auto auto; grid-template-rows: 64px minmax(0, 1fr); grid-template-areas: "titre onglet cta fermer" "cadre cadre cadre cadre"; } .modale-titre { padding-left: 24px; display: flex; align-items: baseline; gap: 10px; } .modale-titre b { font-size: 22px; } .modale-sous { margin: 0; font-size: 13px; } .modale-sous::before { content: '· '; } .modale-long { display: inline; } .modale-onglet { padding: 0 16px; font-size: 14px; } .modale-cta { align-self: center; height: 44px; margin: 0 8px; font-size: 15px; } .modale-fermer { margin-right: 8px; } } @media (min-width: 1440px) { .modale-panneau { inset: 40px; grid-template-rows: 72px minmax(0, 1fr); } .modale-titre { padding-left: 32px; } .modale-titre b { font-size: 26px; } .modale-cta { height: 48px; padding: 0 24px; } .modale-fermer { margin-right: 12px; } }