/* Pages intérieures au style de la 38, l'accueil retenue le 06/10/2026 (msg 6545, confirmé msg 6548 « numéro 38 »). - le haut clair de l'accueil (menu38.css + haut38.njk) ; - la vidéo des couloirs vides en plein écran dans le haut de page (.v38 ; derrière toute la page retiré le 06/10, msg 6562) ; - le grand mot de la page, le billet d'embarquement clair et le bouton juste dessous (arcade-page.njk, .h38) ; - les sections glissent du beige au rouge nuit en fondu (filtre fondu38 d'eleventy.config.js : --f par section, classe f38-clair ou f38-fonce selon le contraste mesuré), pleines ; - le pied noir de l'accueil (pied38.njk). Chargée après arcade.css, seulement sur les pages qui portent fond: "38" (offres.11tydata.js). */ /* Avant que page38.js dessine le cadran, la liste des étapes occupe déjà sa place finale (hauteur = diamètre), cachée : sinon la page sautait au moment du dessin (mesure du 07/10). Sans script, la liste reste visible. */ :where(.js) .et38[data-et38]:not(.et38-cadran) { height: var(--d, auto); overflow: hidden; visibility: hidden; } /* Anton : déclarée une seule fois, dans site.css (pages) ou l'en-tête de l'accueil, sinon téléchargée deux fois */ body.fond-38 { --rouge: #8f0000; --moutarde: #e8a613; --encre: #000; --creme: #F7EFE4; --papier: #fbf8f3; --ar-titre: "Montserrat", "Montserrat Repli", "Segoe UI", sans-serif; --ar-titre-poids: 900; --ar-titre-espace: -.01em; --ar-casse: none; --ar-echelle: .82; background: #000; color: #000; } /* ---------- Haut de page : clair, comme l'accueil ---------- */ /* Menu en noir (msg 6574) : bandeau noir d'un bord à l'autre, logo version sombre, liens blancs, « Réserver » en jaune */ .p38-fine, .p38-top { border-image: linear-gradient(#000, #000) fill 0 / / 0 100vmax; position: relative; z-index: 5; } .p38-fine, .p38-fine a { color: rgba(255,255,255,.78); } .p38-fine a:hover { color: #e8a613; } .p38-top { padding-bottom: 10px; } .p38-menu-b { color: #fff; border-color: rgba(255,255,255,.55); } .p38-top a.p38-resa { border-color: #e8a613; color: #e8a613; } .p38-nav a { color: #fff; } .p38-nav a:hover, .p38-nav a[aria-current="page"] { border-bottom-color: #e8a613; } .p38-top :focus-visible, .p38-fine :focus-visible { outline: 3px solid #e8a613; outline-offset: 2px; } .p38-panneau, .p38-panneau a { color: #fff; } /* ---------- La vidéo derrière toute la page ---------- */ /* msg 6562 : la vidéo reste dans le haut de page, elle ne passe plus derrière toute la page */ body.fond-38 main > section.h38 { isolation: isolate; overflow: hidden; } .v38 { position: absolute; inset: 0; z-index: -1; background: #000 url(/videos/couloirs-reels-affiche.jpg) center / cover; pointer-events: none; } .v38 video { width: 100%; height: 100%; object-fit: cover; object-position: center 45%; } .v38::after { content: ""; position: absolute; inset: 0; background: linear-gradient(rgba(0,0,0,.4) 0, rgba(0,0,0,0) 22%, rgba(0,0,0,0) 40%, rgba(0,0,0,.55) 72%, rgba(0,0,0,.7) 100%); } body.fond-38 main { position: relative; isolation: isolate; background: transparent; } body.fond-38 main > *:not(.v38) { position: relative; z-index: 1; } body.fond-38 .rebours { background: rgba(0,0,0,.72); } /* ---------- Haut de page : grand mot, billet clair, bouton dessous ---------- */ body.fond-38 .h38 { min-height: calc(100svh - 84px); display: grid; align-content: end; padding: 70px 0 22px; background: transparent; color: #fff; } .h38-in { width: 100%; max-width: 1200px; margin: 0 auto; padding-inline: 16px; display: grid; gap: 10px; justify-items: start; } .h38-pause { position: absolute; z-index: 3; top: 14px; right: 14px; min-height: 34px; padding: 0 12px; border: 1px solid rgba(255,255,255,.5); border-radius: 999px; background: rgba(0,0,0,.55); color: #fff; font: 600 13px/1 "Montserrat", "Montserrat Repli", sans-serif; cursor: pointer; } .h38-billet { width: 100%; max-width: 520px; border-radius: 12px; overflow: hidden; background: var(--papier); color: #000; box-shadow: 0 24px 40px -12px rgba(0,0,0,.6); } .h38-entete { margin: 0; padding: 7px 14px; background: #8f0000; color: #fff; font: 800 12px/1.2 "Montserrat", "Montserrat Repli", sans-serif; letter-spacing: .06em; } .h38-c { padding: 10px 14px 14px; } .h38-c h1 { margin: 0 0 4px; font: 600 12.5px/1.35 "Montserrat", "Montserrat Repli", sans-serif; color: rgba(0,0,0,.72); letter-spacing: 0; text-transform: none; } .h38-a { margin: 0 0 8px; font: 700 clamp(20px, 5.4vw, 24px)/1.12 "Montserrat", "Montserrat Repli", sans-serif; text-wrap: balance; } .h38-s { font-size: 15px; line-height: 1.5; color: rgba(0,0,0,.84); } .h38-s p { margin: 0 0 8px; } .h38-s p:last-child { margin-bottom: 0; } .h38-s a { color: #8f0000; } /* Prix, durée, joueurs au premier écran (atelier 5, diapo 4 ; msg 6803) : trois cases noires dans le billet */ .h38 :focus-visible { outline: 3px solid #fff; outline-offset: 2px; } @media (min-width: 900px) { body.fond-38 .h38 { min-height: min(calc(100svh - 120px), 860px); padding: 60px 0 56px; } .h38-in { padding-inline: 20px; } .h38-billet{ max-width: 560px; } .h38-c { padding: 14px 22px; } .h38-a { font-size: clamp(28px, 2.7vw, 38px); } .v38::after { background: linear-gradient(90deg, rgba(0,0,0,.6) 0, rgba(0,0,0,.3) 45%, rgba(0,0,0,0) 75%), linear-gradient(rgba(0,0,0,.35) 0, rgba(0,0,0,0) 25%); } } /* ---------- Les sections : le fondu de la 38 ---------- */ body.fond-38 :is(main, main > .duo38) > section.f38 { background: var(--f); background-attachment: scroll; background-image: var(--f); border-top: 0; border-bottom: 0; } body.fond-38 .f38-fonce { color: #fff; } body.fond-38 .f38-fonce h2, body.fond-38 .f38-fonce h3 { color: #fff; text-shadow: none; } body.fond-38 .f38-fonce .ar-intro, body.fond-38 .f38-fonce .ar-prose { color: rgba(255,255,255,.88); } body.fond-38 .f38-fonce .ar-prose a, body.fond-38 .f38-fonce .ar-intro a { color: #e8a613; } /* Liens dans le texte, sur le clair : noir souligné de rouge (le rouge seul ne passe pas sur l'orangé, 3,3:1) */ body.fond-38 .f38 :focus-visible { outline: 3px solid currentColor; outline-offset: 2px; } /* Plus de traits épais ni d'ombres décalées : cartes à bords arrondis et ombres douces, comme l'accueil */ body.fond-38 :is(.ar-cadre, .ar-hero-photo img, .ar-video-cadre, .ar-hero-video) { border: 0; box-shadow: 0 22px 44px -20px rgba(0,0,0,.6); border-radius: 14px; } body.fond-38 .ar-btn { border: 0; border-radius: 8px; background: #8f0000; color: #fff; box-shadow: 0 12px 26px -12px rgba(0,0,0,.6); } body.fond-38 .ar-btn:hover { transform: translateY(-1px); box-shadow: 0 16px 30px -12px rgba(0,0,0,.65); } body.fond-38 .ar-btn-2 { background: #fff; color: #000; } body.fond-38 .ar-btn-noir { background: #000; color: #fff; } body.fond-38 .f38-fonce .ar-btn-2 { background: transparent; color: #fff; box-shadow: inset 0 0 0 2px rgba(255,255,255,.8); } /* ---------- La dernière section : la carte « Réservez » sur le rouge nuit ---------- */ body.fond-38 main > section.ar-final.f38 { padding: 56px 0 72px; } body.fond-38 .ar-final.f38 .ar-w { background: #8f0000; color: #fff; border-radius: 14px; padding: 30px 22px; box-shadow: 0 22px 44px -20px rgba(0,0,0,.8); max-width: 1180px; } body.fond-38 .ar-final.f38 h2, body.fond-38 .ar-final.f38 p { color: #fff; } body.fond-38 .ar-final.f38 .ar-btn { background: #fff; color: #8f0000; } body.fond-38 .ar-final.f38 .ar-btn-2 { background: transparent; color: #fff; box-shadow: inset 0 0 0 2px rgba(255,255,255,.8); } @media (min-width: 900px) { body.fond-38 .ar-final.f38 .ar-w { padding: 44px 48px; } } /* ---------- Pied noir, comme l'accueil ---------- */ .p38-pied { position: relative; z-index: 1; border-image: linear-gradient(#000, #000) fill 0 / / 0 100vmax; border-top: 0; } @media (prefers-reduced-motion: reduce) { .v38 video { display: none; } .h38-pause { display: none; } } /* ---------- Blocs : retouches pour le fondu (traits fins, ombres douces, couleurs de la palette) ---------- */ /* Le compte à rebours n'est pas sur l'accueil 38 : retiré des pages au même style (réglage conservé dans l'interface) */ body.fond-38 .rebours { display: none; } /* Formules : carte claire, bandeau de couleur (bordeaux, noir, jaune), plus de turquoise */ body.fond-38 .ar-formule { background: var(--papier); border: 0; border-radius: 14px; box-shadow: 0 22px 44px -22px rgba(0,0,0,.55); } body.fond-38 .ar-formule-tete { border-bottom: 0; background: #8f0000; } body.fond-38 .ar-formule-ocean .ar-formule-tete { background: #000; } body.fond-38 .ar-formule-bordeaux .ar-formule-tete { background: #8f0000; } body.fond-38 .ar-formule-moutarde .ar-formule-tete { background: #e8a613; } body.fond-38 main .ar-formule-moutarde .ar-formule-tete h3 { color: #000 !important; text-shadow: none; } body.fond-38 .ar-formule-moutarde .ar-formule-etiquette { background: #000; color: #e8a613; } body.fond-38 main .ar-formule-tete h3 { font-family: "Montserrat", "Montserrat Repli", sans-serif; font-weight: 900; letter-spacing: -.01em; text-transform: none; font-size: 24px; } body.fond-38 .ar-formule-etiquette { border-radius: 999px; } body.fond-38 main .ar-formule-choix li { border-width: 1px; border-color: rgba(0,0,0,.3); } body.fond-38 main .ar-formule-titre { color: #8f0000; } /* Étapes : cartes claires sur le clair, voilées de noir sur le sombre */ body.fond-38 .ar-etapes { color: inherit; } body.fond-38 .ar-etapes li { border: 0; border-radius: 14px; } body.fond-38 .f38-fonce.ar-etapes li { background: rgba(0,0,0,.38); color: #fff; } body.fond-38 .f38-fonce.ar-etapes li::before { color: #e8a613; } body.fond-38 .f38-fonce.ar-etapes li span { color: rgba(255,255,255,.88); } body.fond-38 .ar-etape-visuel { border: 0; } /* Questions : cartes claires à bords fins, texte noir quel que soit le fond */ body.fond-38 .ar-faq details { background: #fff; color: #000; border: 0; border-radius: 12px; box-shadow: 0 14px 28px -20px rgba(0,0,0,.6); } body.fond-38 .ar-faq summary, body.fond-38 .ar-faq summary h3, body.fond-38 .ar-faq details p { color: #000; } body.fond-38 .ar-faq summary::after { color: #8f0000; } body.fond-38 .ar-faq details a { color: #8f0000; } body.fond-38 .f38-fonce .ar-faq-tete a { color: #e8a613; } /* Cartes de liens, chiffres, avis, formulaire, adresse : mêmes cartes douces */ body.fond-38 .ar-lien-carte { border: 0; border-radius: 14px; box-shadow: 0 18px 36px -20px rgba(0,0,0,.6); } body.fond-38 .ar-lien-carte b { font-family: "Montserrat", "Montserrat Repli", sans-serif; font-weight: 900; text-transform: none; font-size: 21px; } body.fond-38 .ar-lien-carte em { color: #8f0000; } body.fond-38 .ar-chiffres li { border: 0; border-radius: 14px; background: #fff; color: #000; box-shadow: 0 14px 28px -20px rgba(0,0,0,.5); } body.fond-38 .ar-chiffres li:nth-child(odd) { background: #000; } body.fond-38 .ar-chiffres-bloc { padding: 40px 0; } body.fond-38 .ar-chiffres-bloc .ar-chiffres { margin-top: 0; } body.fond-38 .ar-avis-carte, body.fond-38 .ar-avis-piste .ar-avis-carte { border: 0; border-radius: 12px; box-shadow: 0 16px 30px -18px rgba(0,0,0,.6); } body.fond-38 .ar-form { border: 0; border-radius: 14px; background: var(--papier); box-shadow: 0 22px 44px -22px rgba(0,0,0,.6); color: #000; } body.fond-38 .ar-form input, body.fond-38 .ar-form select, body.fond-38 .ar-form textarea { border: 1px solid rgba(0,0,0,.35); border-radius: 8px; } body.fond-38 .ar-form-note { color: rgba(0,0,0,.7); } body.fond-38 .ar-adresse address { border: 0; border-radius: 14px; box-shadow: 0 18px 36px -20px rgba(0,0,0,.55); } /* Pied : les titres de colonne restent petits et jaunes (sans prendre le style des grands titres de section) */ body.fond-38 .p38-pied h2 { margin: 0 0 8px; font: 700 13px/1.2 "Montserrat", "Montserrat Repli", sans-serif; letter-spacing: .06em; color: #e8a613; } body.fond-38 .p38-pied { color: rgba(255,255,255,.75); } /* Lien téléphone et e-mail sous le titre du formulaire : lisible sur le clair comme sur le sombre */ body.fond-38 .f38-fonce .ar-contact-direct a { color: #e8a613; font-weight: 800; } /* Petit titre au-dessus des sections : sobre, comme l'accueil (plus d'étiquette penchée à gros trait) */ body.fond-38 main .ar-oeil { display: block; background: transparent !important; color: #8f0000 !important; border: 0; box-shadow: none; transform: none; border-radius: 0; padding: 0; margin: 0 0 8px; text-shadow: none !important; font: 700 15px/1.3 "Montserrat", "Montserrat Repli", sans-serif; letter-spacing: .02em; text-transform: none; } body.fond-38 main .f38-fonce .ar-oeil { color: #e8a613 !important; } /* Photos : bords arrondis et ombre douce, plus de trait noir ni d'ombre décalée */ body.fond-38 .ar-cadre img, body.fond-38 .ar-galerie img, body.fond-38 .ar-exp-photos .ar-cadre img{ border: 0; border-radius: 14px; box-shadow: 0 22px 44px -22px rgba(0,0,0,.6); } body.fond-38 .ar-video .cadre-video { border: 0; border-radius: 14px; box-shadow: 0 22px 44px -22px rgba(0,0,0,.6); } body.fond-38 .ar-coches li::before, body.fond-38 .ar-medias-etapes li::before { border: 0; box-shadow: none; } body.fond-38 .ar-medias-etapes li::before { background: #8f0000; } /* Bloc vidéo : couleurs du fond (il supposait un fond sombre) */ body.fond-38 .f38-fonce .ar-video h3 { color: #e8a613; } body.fond-38 .f38-fonce .ar-video p { color: rgba(255,255,255,.88); } /* Horaires (Infos et accès, Venir) : cartes blanches à ombre douce */ body.fond-38 .ar-horaires-bloc { border: 0; border-radius: 12px; box-shadow: 0 14px 28px -18px rgba(0,0,0,.55); } body.fond-38 .ar-video-cadre { border: 0; box-shadow: 0 22px 44px -20px rgba(0,0,0,.6); } body.fond-38 .ar-avis-pop { border: 0; border-radius: 14px; } /* Pages de texte (blog, mentions) : le titre dans le billet, haut de page moins haut */ body.fond-38 .h38-texte { min-height: 62svh; } body.fond-38 .h38-texte h1.h38-a { margin: 0 0 8px; font: 700 clamp(24px, 6.4vw, 30px)/1.12 "Montserrat", "Montserrat Repli", sans-serif; color: #000; } .h38-date { margin: 0 0 8px; font-size: 13px; color: rgba(0,0,0,.7); } @media (min-width: 900px) { body.fond-38 .h38-texte { min-height: 520px; } body.fond-38 .h38-texte h1.h38-a { font-size: clamp(30px, 2.8vw, 40px); } body.fond-38 .h38-texte .h38-billet { max-width: 720px; } } /* Légendes de la galerie : couleur du fond (elles étaient écrites pour un fond sombre) */ body.fond-38 .f38-fonce .ar-galerie figcaption { color: rgba(255,255,255,.85); } /* Premier écran : ni barre d'actions ni bulle du chatbot par-dessus le billet (comme l'accueil) */ body.fond-38 .barre-tel { transition: transform .3s ease; } @media (max-width: 899px) { body.h38-vu .barre-tel { transform: translateY(110%); } body.h38-vu .cb-bouton { transform: translateY(160%); opacity: 0; pointer-events: none; } } /* ===== La mission, étape par étape, en cercles autour d'une photo (msg 6588, façon Rush) ===== Téléphone : la photo, puis les étapes en zigzag, chaque numéro et titre dans un cercle, le texte à côté. Ordinateur : la photo au centre, les cercles posés sur son pourtour, reliés par un anneau en pointillé. */ body.fond-38 .et38 { position: relative; margin-top: 26px; } .et38-ph { position: relative; z-index: 1; margin: 0 auto 26px; width: min(100%, 360px); } .et38-ph img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 28px; box-shadow: 0 26px 50px -24px rgba(0,0,0,.65); } .et38-l { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; } .et38-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .et38-b { position: relative; display: grid; grid-template-columns: 124px 1fr; grid-template-rows: auto auto; column-gap: 16px; align-items: center; min-height: 124px; } .et38-b::before { content: ""; grid-column: 1; grid-row: 1 / 3; width: 124px; height: 124px; border-radius: 50%; background: #8f0000; box-shadow: 0 16px 28px -14px rgba(0,0,0,.6); transform: rotate(-6deg); } .et38-b:nth-child(even)::before { background: #e8a613; transform: rotate(5deg); } .et38-b > i, .et38-b > b { grid-column: 1; position: relative; z-index: 1; text-align: center; padding: 0 12px; color: #fff; } .et38-b > i { grid-row: 1; align-self: end; font: 400 38px/1 "Anton", "Anton Repli", sans-serif; font-style: normal; } .et38-b > b { grid-row: 2; align-self: start; margin-top: 4px; font: 800 13px/1.15 "Montserrat", "Montserrat Repli", sans-serif; text-wrap: balance; } .et38-b:nth-child(even) > i, .et38-b:nth-child(even) > b { color: #000; } .et38-t { grid-column: 2; grid-row: 1 / 3; font-size: 15.5px; line-height: 1.45; } .f38-fonce .et38-t { color: rgba(255,255,255,.9); } /* zigzag : un cercle sur deux passe à droite */ .et38-b:nth-child(even) { grid-template-columns: 1fr 124px; } .et38-b:nth-child(even)::before, .et38-b:nth-child(even) > i, .et38-b:nth-child(even) > b { grid-column: 2; } .et38-b:nth-child(even) > .et38-t { grid-column: 1; text-align: right; } @media (min-width: 900px) { body.fond-38 .et38 { max-width: 1040px; height: 640px; margin: 34px auto 10px; } .et38-ph { position: absolute; left: 50%; top: 50%; width: 400px; margin: 0; transform: translate(-50%, -50%); } .et38-l { display: block; } .et38-b, .et38-b:nth-child(even) { position: absolute; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 196px; height: 196px; min-height: 0; padding: 18px 20px; border-radius: 50%; background: #8f0000; color: #fff; text-align: center; box-shadow: 0 22px 40px -18px rgba(0,0,0,.65); transform: translate(-50%, -50%) rotate(-6deg); left: var(--x); top: var(--y); } .et38-b:nth-child(even) { background: #e8a613; color: #000; transform: translate(-50%, -50%) rotate(5deg); } .et38-b::before { display: none; } .et38-b > i, .et38-b > b, .et38-b:nth-child(even) > i, .et38-b:nth-child(even) > b { padding: 0; color: inherit; align-self: center; text-align: center; } .et38-b > i { font-size: 44px; } .et38-b > b { margin: 4px 0 6px; font-size: 15px; } .et38-b > .et38-t, .et38-b:nth-child(even) > .et38-t { font-size: 13px; line-height: 1.35; text-align: center; color: inherit; opacity: .92; } /* places sur le pourtour, dans le sens des aiguilles d'une montre */ .et38-5 .et38-b1 { --x: 22%; --y: 17%; } .et38-5 .et38-b2 { --x: 76%; --y: 12%; } .et38-5 .et38-b3 { --x: 84%; --y: 54%; } .et38-5 .et38-b4 { --x: 68%; --y: 90%; } .et38-5 .et38-b5 { --x: 24%; --y: 74%; } .et38-4 .et38-b1 { --x: 22%; --y: 20%; } .et38-4 .et38-b2 { --x: 78%; --y: 20%; } .et38-4 .et38-b3 { --x: 78%; --y: 80%; } .et38-4 .et38-b4 { --x: 22%; --y: 80%; } .et38-3 .et38-b1 { --x: 20%; --y: 24%; } .et38-3 .et38-b2 { --x: 80%; --y: 50%; } .et38-3 .et38-b3 { --x: 22%; --y: 78%; } .et38-6 .et38-b1 { --x: 22%; --y: 14%; } .et38-6 .et38-b2 { --x: 78%; --y: 14%; } .et38-6 .et38-b3 { --x: 85%; --y: 50%; } .et38-6 .et38-b4 { --x: 78%; --y: 86%; } .et38-6 .et38-b5 { --x: 22%; --y: 86%; } .et38-6 .et38-b6 { --x: 15%; --y: 50%; } } @media (max-width: 899px) { .et38-pret .et38-b { opacity: 0; transform: translateY(14px); transition: opacity .4s ease calc(var(--i) * .25s), transform .4s ease calc(var(--i) * .25s); } } .et38-pret .et38-b { transition: opacity .4s ease calc(var(--i) * .3s + .5s), transform .45s cubic-bezier(.2,.9,.3,1.3) calc(var(--i) * .3s + .5s); } @media (min-width: 900px) { .et38-pret .et38-b { opacity: 0; transform: translate(-50%, -50%) scale(.6) rotate(-6deg); } .et38-pret .et38-b:nth-child(even) { transform: translate(-50%, -50%) scale(.6) rotate(5deg); } .et38-pret.et38-vu .et38-b { opacity: 1; transform: translate(-50%, -50%) rotate(-6deg); } .et38-pret.et38-vu .et38-b:nth-child(even) { transform: translate(-50%, -50%) rotate(5deg); } } @media (max-width: 899px) { .et38-pret.et38-vu .et38-b { opacity: 1; transform: none; } } /* Le fil entre les étapes et ses flèches qui tournent sans arrêt (msg 6589) */ .et38-fil { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; z-index: 0; pointer-events: none; } .et38-ph, .et38-l { position: relative; z-index: 1; } .et38-fil path:not(.et38-fleche) { fill: none; stroke: #8f0000; stroke-width: 2; stroke-linecap: round; stroke-dasharray: 2 9; animation: et38-marche 1s linear infinite; } .et38-fleche { fill: none; stroke: #8f0000; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; } .f38-fonce .et38-fil path:not(.et38-fleche), .f38-fonce .et38-fleche { stroke: #e8a613; } @keyframes et38-marche { to { stroke-dashoffset: -11; } } .et38-pret .et38-fil { opacity: 0; transition: opacity .6s ease 1.6s; } .et38-pret.et38-vu .et38-fil { opacity: 1; } @media (prefers-reduced-motion: reduce) { .et38-fil path:not(.et38-fleche) { animation: none; } } @media (min-width: 900px) { .et38-l { position: static; } .et38-ph { position: absolute; } } /* Téléphone (msg 6611) : la vidéo en carte en haut, le grand mot posé dessus, puis le billet et les boutons, pour tout voir sur le premier écran (même principe que l'accueil) */ @media (max-width: 899px) { body.fond-38 main > section.h38 { min-height: 0; background: #000; padding-top: 12px; } body.fond-38 .h38 .v38 { position: relative; inset: auto; z-index: 0; height: clamp(170px, 27svh, 230px); margin: 0 16px; border-radius: 14px; overflow: hidden; } body.fond-38 .h38 .v38::after { content: ""; position: absolute; inset: 0; background: linear-gradient(rgba(0,0,0,0) 35%, rgba(0,0,0,.65) 100%); pointer-events: none; } body.fond-38 .h38 .v38 video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } body.fond-38 .h38-pause { top: 24px; right: 28px; } body.fond-38 .h38-in { position: relative; z-index: 1; padding-top: 0; } } /* Pages intérieures et articles (msg 6616) : la vidéo reste sur l'accueil ; ici, la photo de la page et un haut de page à la taille de son contenu, pour remonter le texte. Téléphone : la photo en bande au-dessus, le grand mot posé dessus. Ordinateur : le mot et le billet à gauche, la photo en tirage à droite. */ body.fond-38 main > section.h38-photo { min-height: 0; align-content: start; background: #000; padding: 12px 0 28px; } .p38 { margin: 0; overflow: hidden; border-radius: 14px; position: relative; background: #1a1a1a; } .p38 img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 38%; } .p38::after { content: ""; position: absolute; inset: 0; background: linear-gradient(rgba(0,0,0,0) 40%, rgba(0,0,0,.6) 100%); pointer-events: none; } @media (max-width: 899px) { body.fond-38 .h38-photo .h38-in { gap: 10px; } body.fond-38 .h38-photo .p38 { width: 100%; height: clamp(150px, 23svh, 200px); } /* La place des trois cases : photo plus basse et texte un peu plus serré, le bouton reste au premier écran */ body.fond-38 .h38-photo:has(.h38-infos) .p38 { height: clamp(118px, 16svh, 150px); } body.fond-38 .h38-photo:has(.h38-infos) .h38-s { font-size: 14.5px; line-height: 1.45; } body.fond-38 .h38-texte.h38-photo .p38 + .h38-billet { margin-top: 4px; } } @media (min-width: 900px) { body.fond-38 main > section.h38-photo { padding: 48px 0 64px; } body.fond-38 .h38-photo .h38-in { grid-template-columns: minmax(0, 1fr) 360px; grid-template-areas: "mot photo" "billet photo" "ctas photo"; column-gap: 56px; align-content: start; } body.fond-38 .h38-photo .h38-billet { grid-area: billet; } body.fond-38 .h38-photo .p38 { grid-area: photo; align-self: center; width: 360px; aspect-ratio: 3 / 4; transform: rotate(2deg); box-shadow: 0 30px 60px -24px rgba(0,0,0,.9); } body.fond-38 .h38-photo .p38::after { display: none; } body.fond-38 .h38-texte.h38-photo .h38-in { grid-template-areas: "billet photo"; } body.fond-38 .h38-texte.h38-sans-photo .h38-in { grid-template-columns: minmax(0, 1fr); grid-template-areas: "billet"; } } .p38 img { object-position: center 62%; } @media (min-width: 900px) { body.fond-38 .h38-photo .h38-billet { align-self: start; } body.fond-38 .h38-texte.h38-photo .h38-billet { align-self: center; } .p38 img { object-position: center 50%; } } /* Avec qui venir ? (msg 6630) : tuiles bordeaux et jaune en alternance, un grand mot, la question, deux phrases */ .pb38-g { display: grid; gap: 12px; margin-top: 22px; } .pb38-t { padding: 22px 20px 20px; border-radius: 16px; background: linear-gradient(150deg, #8f0000 0, #4a0000 100%); color: #fff; box-shadow: 0 22px 40px -24px rgba(0,0,0,.9); } .pb38-t:nth-child(even) { background: linear-gradient(150deg, #e8a613 0, #c98a08 100%); color: #000; } .pb38-mot { margin: 0 0 10px; font: 400 clamp(40px, 11vw, 54px)/.92 "Anton", "Anton Repli", sans-serif; text-transform: uppercase; color: inherit; } body.fond-38 .pb38-t h3 { margin: 0 0 6px; font: 800 17px/1.3 "Montserrat", "Montserrat Repli", sans-serif; color: inherit; text-shadow: none; } .pb38-x { font-size: 15px; line-height: 1.5; color: inherit; opacity: .9; } .pb38-x p { margin: 0; } /* Msg 8121 : les tuiles des anniversaires portent le détail des formules (paragraphes et liste) */ .pb38-x p + p, .pb38-x p + ul, .pb38-x ul + p { margin-top: 10px; } .pb38-x ul { margin: 4px 0 0; padding-left: 20px; } .pb38-x li + li { margin-top: 3px; } @media (min-width: 900px) { .pb38-g { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; } /* Tuiles longues (détail des formules anniversaire, msg 8121) : deux par ligne, sinon quatre colonnes trop étroites */ .pb38-g:has(.pb38-x ul) { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pb38-t { padding: 26px 22px 24px; } .pb38-mot { font-size: clamp(40px, 3.4vw, 52px); } } body.fond-38 .pb38 .pb38-g { max-width: none; width: 100%; } /* « Votre mission, étape par étape » condensée sur téléphone (msg 6635) : photo en bandeau, cercles plus petits, lignes serrées */ @media (max-width: 899px) { body.fond-38 .et38 { margin-top: 18px; } .et38-ph { width: 100%; margin-bottom: 14px; } .et38-ph img { aspect-ratio: auto; height: 150px; border-radius: 16px; object-position: center 45%; } .et38-l { gap: 6px; } .et38-b { --c: 88px; grid-template-columns: var(--c) 1fr; column-gap: 12px; min-height: var(--c); } .et38-b:nth-child(even) { grid-template-columns: 1fr var(--c); } .et38-b::before { width: var(--c); height: var(--c); } .et38-b > i { font-size: 28px; } .et38-b > b { margin-top: 2px; padding: 0 8px; font-size: 11px; line-height: 1.1; } .et38-t { font-size: 14.5px; line-height: 1.4; } } /* Téléphone et iPhone 16 (393 × 852, msg 6637) : chaque section au plus près d'un écran, sans retirer de contenu. Tout le texte reste dans la page (Google et les IA le lisent), seule la mise en forme se resserre. */ @media (max-width: 899px) { body.fond-38 :is(main, main > .duo38) > section.ar-bloc { padding: 44px 0; } body.fond-38 :is(main, main > .duo38) > section.ar-bloc h2 { margin-bottom: 10px; } /* Une occasion à fêter ? : chaque carte devient une ligne, photo à gauche */ body.fond-38 .ar-liens-grille { gap: 10px; margin-top: 16px; } body.fond-38 .ar-lien-carte { grid-template-columns: 96px 1fr; grid-template-rows: auto auto 1fr; column-gap: 14px; row-gap: 2px; padding: 10px; align-items: start; } body.fond-38 .ar-lien-carte img { grid-column: 1; grid-row: 1 / 4; width: 96px; height: 100%; min-height: 96px; aspect-ratio: auto; border-radius: 10px; } body.fond-38 .ar-lien-carte b { grid-column: 2; font-size: 18px; } body.fond-38 .ar-lien-carte span { grid-column: 2; font-size: 14px; line-height: 1.4; } body.fond-38 .ar-lien-carte em { grid-column: 2; align-self: end; font-size: 14px; } /* Avec qui venir ? : les quatre tuiles deux par deux */ .pb38-g { grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 14px; } .pb38-t { padding: 14px 12px 14px; border-radius: 14px; } .pb38-mot { margin-bottom: 6px; font-size: 27px; } body.fond-38 .pb38-t h3 { font-size: 13.5px; line-height: 1.25; } .pb38-x { font-size: 13.5px; line-height: 1.4; } /* Que prévoir ? : la photo en bandeau, la liste resserrée */ body.fond-38 .ar-tous .ar-cadre { margin: 0 0 16px; transform: none; } body.fond-38 .ar-tous .ar-cadre img { aspect-ratio: auto; height: 120px; object-fit: cover; } body.fond-38 .ar-tous .ar-coches { gap: 7px; margin-top: 12px; } body.fond-38 .ar-tous .ar-coches li { font-size: 14.5px; line-height: 1.35; } /* Questions : lignes plus serrées */ body.fond-38 .ar-faq details { margin-bottom: 7px; } body.fond-38 .ar-faq summary { padding: 12px 30px 12px 0; } body.fond-38 .ar-faq summary h3 { font-size: 15.5px; } body.fond-38 .ar-faq summary::after { top: 4px; } } /* « Avec qui venir ? » en fenêtres (msg 6637) */ .pb38-t > summary { display: block; list-style: none; } .pb38-t > summary::-webkit-details-marker { display: none; } .pb38-t .pb38-mot { display: block; } @media (min-width: 900px) { .pb38-t > summary { cursor: default; } } @media (max-width: 899px) { .pb38-g { grid-template-columns: 1fr; gap: 8px; } .pb38-t { padding: 0; } .pb38-t > summary { position: relative; padding: 14px 52px 14px 16px; cursor: pointer; } .pb38-t > summary::after { content: "+"; position: absolute; right: 16px; top: 50%; transform: translateY(-50%); font: 400 30px/1 "Montserrat", "Montserrat Repli", sans-serif; } .pb38-t[open] > summary::after { content: "–"; } .pb38-t > summary:focus-visible { outline: 3px solid #fff; outline-offset: -3px; border-radius: 14px; } .pb38-mot { margin-bottom: 4px; font-size: 28px; } body.fond-38 .pb38-t h3 { margin: 0; font-size: 14.5px; } .pb38-x { padding: 0 16px 16px; font-size: 15px; line-height: 1.45; } } /* Les autres pages, téléphone (msg 6637) : photos des blocs de texte en bandeau, galerie carrée, cartes du blog en lignes, formulaires plus serrés (aucun champ retiré) */ @media (max-width: 899px) { body.fond-38 .ar-bloc .ar-duo > .ar-cadre { margin: 4px 0 0; transform: rotate(-1.5deg); } body.fond-38 .ar-bloc .ar-duo > .ar-cadre img { aspect-ratio: auto; height: 210px; object-position: center 35%; } body.fond-38 .ar-venir .ar-cadre img { aspect-ratio: auto; height: 190px; } body.fond-38 .ar-venir-grille { gap: 18px; } body.fond-38 .ar-galerie { gap: 8px; } body.fond-38 .ar-galerie img { aspect-ratio: 1; } body.fond-38 .ar-galerie figcaption { font-size: 12.5px; line-height: 1.35; } body.fond-38 .ar-carte-article { display: grid; grid-template-columns: 110px 1fr; border: 0; border-radius: 14px; overflow: hidden; } body.fond-38 .ar-carte-article img { height: 100%; min-height: 110px; aspect-ratio: auto; } body.fond-38 .ar-carte-article-texte { gap: 4px; padding: 12px 14px; font-size: 14px; line-height: 1.4; } body.fond-38 .ar-carte-article .h3 { font-size: 17px; } body.fond-38 .ar-form { padding: 16px; gap: 4px; } body.fond-38 .ar-form label { margin-top: 6px; font-size: 13.5px; } body.fond-38 .ar-form input, body.fond-38 .ar-form select { padding: 10px 12px; } body.fond-38 .ar-form textarea { padding: 10px 12px; min-height: 96px; } } .ar-ch { display: grid; gap: 4px; min-width: 0; } .ar-aide { font-size: 13px; line-height: 1.4; opacity: .78; } .ar-form .ar-ch-case { grid-template-columns: 22px minmax(0, 1fr); column-gap: 10px; align-items: start; margin-top: 10px; } .ar-form .ar-ch-case input { width: 22px; height: 22px; margin: 2px 0 0; padding: 0; accent-color: #8f0000; } .ar-form .ar-ch-case label { margin-top: 0; font-weight: 600; line-height: 1.45; } .ar-form .ar-ch-case label a { color: #8f0000; text-decoration: underline; } @media (max-width: 899px) { body.fond-38 .ar-form { grid-template-columns: 1fr 1fr; grid-auto-flow: row dense; column-gap: 10px; } body.fond-38 .ar-form > * { grid-column: 1 / -1; } body.fond-38 .ar-form > .ar-ch-date, body.fond-38 .ar-form > .ar-ch-choix, body.fond-38 .ar-form > .ar-ch-nombre { grid-column: auto; } body.fond-38 .ar-form select { min-width: 0; text-overflow: ellipsis; } } @media (max-width: 899px) { body.fond-38 .ar-demande .ar-duo { gap: 18px; } body.fond-38 .ar-demande .ar-contact-direct { margin-bottom: 0; } } /* Sections pleines des modèles 71-73 (msg 6650) : noir, bordeaux, jaune. Sur jaune, titres et textes blancs avec une ombre bordeaux (comme les 71-73), le contenu courant dans des cartes blanches. Sur bordeaux, ce qui était bordeaux passe en noir pour rester visible. */ body.fond-38 .f38-jaune h2 { color: #fff; text-shadow: 0 2px 0 rgba(143,0,0,.55), 0 0 18px rgba(143,0,0,.25); } body.fond-38 main .f38-jaune .ar-oeil { color: #000 !important; } body.fond-38 .f38-jaune .ar-intro, body.fond-38 .f38-jaune .ar-faq-tete, body.fond-38 .f38-jaune > .ar-w > p { color: #fff; font-weight: 700; text-shadow: 0 1px 0 rgba(143,0,0,.5); } body.fond-38 .f38-jaune .ar-faq-tete a, body.fond-38 .f38-jaune .ar-intro a { color: #000; text-shadow: none; } body.fond-38 main .f38-rouge .ar-oeil { color: #e8a613 !important; } body.fond-38 .f38-rouge .r3-recap { background: #000; } /* Seulement pour les anciens cercles : l'horloge (et38-cadran) garde son propre dessin sur fond bordeaux */ body.fond-38 .f38-rouge .et38:not(.et38-cadran) .et38-b:nth-child(odd)::before { background: #000; } @media (min-width: 900px) { body.fond-38 .f38-rouge .et38:not(.et38-cadran) .et38-b:nth-child(odd) { background: #000; } } body.fond-38 .f38-rouge .et38-fil path:not(.et38-fleche), body.fond-38 .f38-rouge .et38-fleche { stroke: #e8a613; } body.fond-38 .f38-rouge .pb38-t:nth-child(odd) { background: linear-gradient(150deg, #1a1a1a 0, #000 100%); } body.fond-38 .f38-rouge .ar-final .ar-w, body.fond-38 .ar-final.f38-rouge .ar-w { background: #000; } body.fond-38 .f38-rouge .ar-venir-grille > :last-child { background: #000; } /* ---------- Ordinateur : les 3 temps et la mission côte à côte (msg 6661, 6663, puis 6695-6696 : « votre mission, avec l'horloge qui tourne […] à la place du chatbot », « une horloge sur la version ordinateur aussi ») ---------- Un seul fond noir. À gauche, la carte des 3 temps ; à droite, le titre de la mission et son horloge (page38.js). Les deux sections restent séparées dans la page (titres, Google). Téléphone et tablette : elles se suivent. */ .duo38 { overflow-x: clip; } @media (min-width: 1000px) { .duo38 { display: grid; grid-template-columns: minmax(40px, 1fr) minmax(0, 650px) minmax(0, 550px) minmax(40px, 1fr); align-items: start; padding: 40px 0 48px; background: #000; color: #fff; } .duo38 > section, body.fond-38 main > .duo38 > section.ar-bloc { margin: 0; max-width: none; padding: 0 !important; background: none !important; border-image: none !important; } .duo38 > section:first-child { grid-column: 2; grid-row: 1; position: relative; z-index: 3; margin: 0 48px 0 0; } .duo38 > section:nth-of-type(2) { grid-column: 3; grid-row: 1; } .duo38 > section:nth-of-type(2) > .ar-w { max-width: none; padding: 0; margin: 0; } .duo38 .ar-oeil { margin: 0 0 6px; text-align: center; } .duo38 > section:nth-of-type(2) h2 { margin: 0; font-size: clamp(32px, 2.9vw, 44px); text-align: center; text-wrap: balance; } .duo38 .et38:is(.et38-cadran, :where(.js) [data-et38]), body.fond-38 .duo38 .et38:is(.et38-cadran, :where(.js) [data-et38]) { --d: 240px; --p: 50px; --lg: 100px; --li: 74px; --ai: 50px; --aw: 9px; --ah: 11px; --pn: 24px; gap: 24px; max-width: none; margin: 26px 0 0; } .duo38 .et38-cadran .et38-lecture { flex: 1 1 0; min-height: 170px; } .duo38 .et38-lecture b { font-size: 22px; } .duo38 .et38-lecture .et38-l-x { font-size: 15.5px; } /* La carte des 3 temps */ .duo38 .ar-resa3 > .ar-w { max-width: none; margin: 0; padding: 24px 28px 26px; border-radius: 18px; background: #8f0000; box-shadow: 0 26px 50px -24px rgba(143,0,0,.7); transform: rotate(-.6deg); } .duo38 .r3-temps { grid-template-columns: 1fr; } .duo38 .r3-recap { background: #000; } .duo38 .r3-titre { font-size: clamp(30px, 2.6vw, 38px); } } @media (min-width: 1300px) { .duo38 .et38:is(.et38-cadran, :where(.js) [data-et38]), body.fond-38 .duo38 .et38:is(.et38-cadran, :where(.js) [data-et38]) { --d: 270px; --p: 54px; --lg: 112px; --li: 82px; --ai: 58px; --ah: 12px; --pn: 26px; gap: 32px; } } /* ---------- Le parc en chiffres, juste avant la mission (msg 6673), en compteurs (msg 6674) ---------- Téléphone : deux colonnes, le dernier chiffre seul sur sa ligne. Ordinateur : une seule ligne, rien ne passe à la ligne. */ .d38-compteurs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; margin: 0 0 34px; padding: 0; list-style: none; } .d38-compteurs li { padding-top: 8px; border-top: 2px solid #e8a613; } .d38-compteurs li:last-child:nth-child(odd) { grid-column: 1 / -1; } .d38-compteurs b { display: block; font: 400 clamp(24px, 6.6vw, 32px)/1.05 "Anton", "Anton Repli", sans-serif; color: #e8a613; font-variant-numeric: tabular-nums; } .d38-compteurs li > span { display: block; margin-top: 4px; font-size: 13.5px; line-height: 1.35; color: rgba(255,255,255,.88); } @media (min-width: 900px) { .d38-compteurs { display: flex; justify-content: space-between; gap: 32px; margin-bottom: 56px; } .d38-compteurs li, .d38-compteurs li:last-child:nth-child(odd) { flex: 0 1 auto; min-width: 0; white-space: nowrap; } .d38-compteurs b { font-size: clamp(30px, 2.9vw, 42px); } .d38-compteurs li > span { font-size: 15px; } } /* ---------- La mission en horloge (msg 6691 au téléphone, 6696 à l'ordinateur : « une horloge […] avec le logo Défis Pirate au centre, et ça tourne tout le temps ») ---------- Les étapes sont les heures, l'aiguille passe de l'une à l'autre et le texte de l'étape s'affiche à côté (dessous à l'ordinateur) ; l'anneau pointillé tourne sans arrêt. Tout le texte des étapes reste dans la liste (lu par Google, les IA et les lecteurs d'écran) ; page38.js construit l'horloge. */ .et38:is(.et38-cadran, :where(.js) [data-et38]), body.fond-38 .et38:is(.et38-cadran, :where(.js) [data-et38]) { --d: 176px; --p: 40px; --lg: 74px; --li: 54px; --ai: 38px; --aw: 7px; --ah: 9px; --pn: 20px; display: flex; align-items: center; gap: 16px; height: auto; } .et38-cadran .et38-fil, .et38-cadran .et38-ph { display: none; } .et38-dial { position: relative; flex: none; width: var(--d); height: var(--d); } .et38-dial::before { content: ""; position: absolute; inset: calc(var(--d) * .114); border-radius: 50%; border: 2px dotted rgba(232,166,19,.75); animation: et38-tour 40s linear infinite; } @keyframes et38-tour { to { transform: rotate(360deg); } } .et38-cadran .et38-l { position: absolute; inset: 0; z-index: 3; display: block; margin: 0; } .et38:is(.et38-cadran, :where(.js) [data-et38]) .et38-b, .et38:is(.et38-cadran, :where(.js) [data-et38]) .et38-b:nth-child(even) { position: absolute; left: var(--x); top: var(--y); display: grid; grid-template-columns: 1fr; grid-template-rows: 1fr; place-items: center; width: var(--p); height: var(--p); min-height: 0; margin: calc(var(--p) / -2) 0 0 calc(var(--p) / -2); padding: 0; border-radius: 50%; background: none; box-shadow: none; cursor: pointer; opacity: 1 !important; transform: none !important; transition: none; } .et38:is(.et38-cadran, :where(.js) [data-et38]) .et38-b::before, .et38:is(.et38-cadran, :where(.js) [data-et38]) .et38-b:nth-child(even)::before { content: ""; display: block; grid-area: 1 / 1; width: var(--p); height: var(--p); border-radius: 50%; background: #8f0000; border: 2px solid rgba(255,255,255,.3); box-shadow: none; transform: none; transition: background .3s, transform .3s; } .et38:is(.et38-cadran, :where(.js) [data-et38]) .et38-b > i, .et38:is(.et38-cadran, :where(.js) [data-et38]) .et38-b:nth-child(even) > i { grid-area: 1 / 1; align-self: center; padding: 0; font-size: var(--pn); color: #fff; } .et38:is(.et38-cadran, :where(.js) [data-et38]) .et38-b > b, .et38:is(.et38-cadran, :where(.js) [data-et38]) .et38-b > .et38-t { position: absolute; width: 1px; height: 1px; margin: 0; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .et38:is(.et38-cadran, :where(.js) [data-et38]) .et38-b.et38-actif::before { background: #e8a613; border-color: #fff; transform: scale(1.18); } .et38:is(.et38-cadran, :where(.js) [data-et38]) .et38-b.et38-actif > i { color: #000; } .et38-cadran .et38-b:focus-visible { outline: 3px solid #e8a613; outline-offset: 4px; } .et38-logo { position: absolute; left: 50%; top: 50%; z-index: 2; display: grid; place-items: center; width: var(--lg); height: var(--lg); margin: calc(var(--lg) / -2) 0 0 calc(var(--lg) / -2); border-radius: 50%; background: #000; border: 3px solid #e8a613; box-shadow: 0 12px 26px -10px rgba(0,0,0,.8); } .et38-logo img { width: var(--li); height: auto; } .et38-aiguille { position: absolute; left: 50%; top: 50%; z-index: 1; width: 4px; height: var(--ai); margin-left: -2px; border-radius: 2px; background: #e8a613; box-shadow: 0 0 0 2px rgba(0,0,0,.45); transform-origin: 50% 0; transition: transform .9s cubic-bezier(.5,1.5,.45,1); } .et38-aiguille::after { content: ""; position: absolute; left: 50%; bottom: calc(var(--ah) * -1 + 3px); width: 0; height: 0; margin-left: calc(var(--aw) * -1); border: var(--aw) solid transparent; border-top: var(--ah) solid #e8a613; border-bottom: 0; } .et38-lecture { flex: 1; min-width: 0; } .et38-lecture .et38-l-n { margin: 0; font-size: 12.5px; font-weight: 800; color: #e8a613; } .et38-lecture b { display: block; margin-top: 4px; font: 800 19px/1.2 "Montserrat", "Montserrat Repli", sans-serif; color: #fff; text-wrap: balance; } .et38-lecture .et38-l-x { margin: 6px 0 0; font-size: 14.5px; line-height: 1.42; color: rgba(255,255,255,.9); } .et38-lecture.et38-change { animation: et38-fondu .45s ease; } @keyframes et38-fondu { from { opacity: 0; transform: translateY(6px); } } @media (min-width: 900px) { .et38:is(.et38-cadran, :where(.js) [data-et38]), body.fond-38 .et38:is(.et38-cadran, :where(.js) [data-et38]) { --d: 300px; --p: 58px; --lg: 124px; --li: 92px; --ai: 74px; --aw: 10px; --ah: 13px; --pn: 28px; justify-content: center; gap: 44px; max-width: 900px; margin: 34px auto 10px; } .et38-cadran .et38-lecture { flex: 0 1 420px; } .et38-lecture .et38-l-n { font-size: 14px; } .et38-lecture b { margin-top: 6px; font-size: 26px; } .et38-lecture .et38-l-x { margin-top: 10px; font-size: 17px; line-height: 1.5; } } /* Les propositions d'horloge (msg 6698), à comparer avec ?horloge=1 à 4 ; sans paramètre, l'horloge validée ne change pas */ .et38-deco { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; } /* 1 · Le cadran : un vrai cadran, graduations, grande aiguille qui balaie par-dessus le logo, contrepoids et axe */ .et38-h1 .et38-dial::before { inset: 0; border: 3px solid #e8a613; background: radial-gradient(circle, #8f0000 0, #3a0000 52%, #000 74%); box-shadow: inset 0 0 0 5px #000, 0 18px 40px -18px rgba(0,0,0,.9); animation: none; } .et38-graduations { z-index: 0; } .et38-graduations line { stroke: rgba(255,255,255,.45); stroke-width: .6; } .et38-graduations line.g5 { stroke: #e8a613; stroke-width: 1.6; } .et38-h1 .et38-logo, .et38-h4 .et38-logo { z-index: 1; } .et38-h1 .et38-aiguille { z-index: 2; width: 3px; margin-left: -1.5px; height: calc(var(--d) * .386 - var(--p) / 2 - var(--ah)); background: #e8a613; box-shadow: 0 0 0 1px rgba(0,0,0,.5), 0 0 10px rgba(232,166,19,.6); transition: none; } .et38-h1 .et38-aiguille::before { content: ""; position: absolute; left: 50%; bottom: 100%; width: 7px; height: calc(var(--d) * .1); margin-left: -3.5px; border-radius: 4px; background: #e8a613; box-shadow: 0 0 0 1px rgba(0,0,0,.5); } .et38-h1 .et38-dial::after { content: ""; position: absolute; left: 50%; top: 50%; z-index: 2; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: #e8a613; border: 3px solid #000; } /* 2 · La boussole : la rose des vents tourne lentement derrière le logo, l'aiguille rejoint chaque étape en oscillant */ .et38-h2 .et38-dial::before { border-style: solid; border-color: rgba(232,166,19,.35); animation: none; } .et38-rose { z-index: 0; animation: et38-tour 50s linear infinite reverse; } .et38-rose circle { fill: none; stroke: rgba(232,166,19,.55); stroke-width: .5; stroke-dasharray: 1 2; } .et38-rose polygon { fill: rgba(143,0,0,.85); stroke: #e8a613; stroke-width: .6; stroke-linejoin: round; } .et38-h2 .et38-aiguille { transition: transform 1.7s cubic-bezier(.22,1.9,.4,1); } .et38-h2 .et38-aiguille::before { content: ""; position: absolute; left: 50%; bottom: 100%; width: 0; height: 0; margin-left: -6px; border: 6px solid transparent; border-bottom: calc(var(--ai) * .7) solid #8f0000; border-top: 0; } /* 3 · La barre du navire : la roue tourne sans s'arrêter, l'étape qui passe dans le repère du haut s'affiche */ .et38-h3 .et38-dial::before { display: none; } .et38-roue, .et38-h3 .et38-l { transform: rotate(var(--w, 0deg)); } .et38-h3 .et38-b > i { transform: rotate(calc(var(--w, 0deg) * -1)); } .et38-roue { z-index: 0; } .et38-roue line { stroke: #e8a613; stroke-width: 2.2; stroke-linecap: round; } .et38-roue .et38-jante { fill: none; stroke: #8f0000; stroke-width: 5; } .et38-roue .et38-moyeu { fill: none; stroke: #e8a613; stroke-width: 1.5; } .et38-roue .et38-poignee { fill: #e8a613; } .et38-h3 .et38-aiguille { display: none; } .et38-h3 .et38-dial::after { content: ""; position: absolute; left: 50%; top: 11.4%; z-index: 4; width: calc(var(--p) + 12px); height: calc(var(--p) + 12px); margin: calc(var(--p) / -2 - 6px) 0 0 calc(var(--p) / -2 - 6px); border-radius: 50%; border: 3px solid #fff; box-shadow: 0 0 0 3px #e8a613, 0 0 18px rgba(232,166,19,.7); pointer-events: none; } /* 4 · Le chrono : l'anneau se remplit d'étape en étape, la tête lumineuse fait le tour */ .et38-h4 .et38-dial::before { display: none; } .et38-chrono { z-index: 0; } .et38-chrono .et38-piste { fill: none; stroke: rgba(255,255,255,.18); stroke-width: 3; } .et38-chrono .et38-arc { fill: none; stroke: #e8a613; stroke-width: 3.4; stroke-linecap: round; } .et38-chrono .et38-tete { fill: #fff; filter: drop-shadow(0 0 2px #e8a613) drop-shadow(0 0 4px #e8a613); } .et38-h4 .et38-aiguille { display: none; } .et38-h4 .et38-b.et38-actif::before { box-shadow: 0 0 0 4px rgba(232,166,19,.35); } /* Deuxième série (msg 6707) */ /* 5 · Le puzzle (l'horloge par défaut depuis le msg 6712) : les pièces sont cachées, face retournée ; à chaque étape une pièce se retourne (autour de son axe) et montre sa couleur et son numéro (msg 6714) ; l'anneau complet se retourne et repart */ .et38-h5 .et38-dial::before, .et38-h5 .et38-aiguille { display: none; } .et38-puzzle { z-index: 0; } .et38-piece { fill: #1c1c1c; stroke: #e8a613; stroke-width: .8; transform-box: fill-box; transform-origin: 50% 50%; transition: fill .3s; } .et38-piece.et38-pose { fill: #8f0000; stroke: #000; stroke-width: 1; } .et38-piece.et38-pc-on { fill: #e8a613; stroke: #000; stroke-width: 1; } .et38-piece.et38-flip { animation: et38-retourne .8s ease-in-out; } @keyframes et38-retourne { 0%, 100% { transform: rotate(var(--a)) scaleX(1) rotate(calc(var(--a) * -1)); } 50% { transform: rotate(var(--a)) scaleX(.04) rotate(calc(var(--a) * -1)); } } .et38.et38-h5 .et38-b > i { opacity: 0; transition: opacity .2s; } .et38.et38-h5 .et38-b.et38-vu5 > i { opacity: 1; } .et38.et38-h5 .et38-b:not(.et38-vu5)::after { content: "?"; grid-area: 1 / 1; align-self: center; font: 400 calc(var(--pn) * .9)/1 "Anton", "Anton Repli", sans-serif; color: rgba(232,166,19,.75); } .et38.et38-h5 .et38-b::before, .et38.et38-h5 .et38-b:nth-child(even)::before, .et38.et38-h5 .et38-b.et38-actif::before { background: none; border: 0; transform: none; } .et38.et38-h5 .et38-b.et38-actif > i { color: #000; } /* 6 · Le sablier : le sable coule pendant l'étape, le sablier se retourne à la suivante */ .et38-h6 .et38-logo, .et38-h6 .et38-aiguille { display: none; } .et38-sablier { z-index: 1; } .et38-verre { transform-box: view-box; transform-origin: 50% 50%; transition: transform .6s cubic-bezier(.5,0,.3,1.2); } .et38-vitre { fill: rgba(255,255,255,.06); stroke: #fff; stroke-width: 1.1; } .et38-plateau { fill: #e8a613; } .et38-montant { stroke: #8f0000; stroke-width: 2; stroke-linecap: round; } .et38-sable { fill: #e8a613; transform-box: fill-box; } .et38-filet { fill: #e8a613; opacity: 0; } .et38-coule-a .et38-sable-h { transform-origin: 50% 100%; animation: et38-vide 2.4s linear .6s both; } .et38-coule-a .et38-sable-b { transform-origin: 50% 100%; animation: et38-plein 2.4s linear .6s both; } .et38-coule-a .et38-filet-b, .et38-coule-b .et38-filet-h { animation: et38-filet 2.4s linear .6s both; } .et38-coule-b .et38-sable-b { transform-origin: 50% 0; animation: et38-vide 2.4s linear .6s both; } .et38-coule-b .et38-sable-h { transform-origin: 50% 0; animation: et38-plein 2.4s linear .6s both; } @keyframes et38-vide { from { transform: scaleY(1); } to { transform: scaleY(0); } } @keyframes et38-plein { from { transform: scaleY(0); } to { transform: scaleY(1); } } @keyframes et38-filet { 0%, 96% { opacity: 1; } 100% { opacity: 0; } } /* 7 · Le cadenas à code : la molette tourne cran par cran et amène l'étape sous le repère */ .et38-h7 .et38-dial::before, .et38-h7 .et38-aiguille { display: none; } .et38-code, .et38-h7 .et38-l { transform: rotate(var(--w, 0deg)); transition: transform .9s cubic-bezier(.3,1.5,.5,1); } .et38-h7 .et38-b > i { transform: rotate(calc(var(--w, 0deg) * -1)); transition: transform .9s cubic-bezier(.3,1.5,.5,1); } .et38-code { z-index: 0; } .et38-code .et38-molette { fill: rgba(143,0,0,.35); stroke: rgba(232,166,19,.6); stroke-width: 1; } .et38-code line { stroke: rgba(255,255,255,.45); stroke-width: .7; } .et38-code line.g5 { stroke: #e8a613; stroke-width: 1.6; } .et38-h7 .et38-dial::after { content: ""; position: absolute; left: 50%; top: -15px; z-index: 4; width: 0; height: 0; margin-left: -10px; border: 10px solid transparent; border-top: 15px solid #e8a613; border-bottom: 0; filter: drop-shadow(0 2px 3px rgba(0,0,0,.6)); } /* 8 · Le phare : un faisceau balaie le cadran sans s'arrêter et éclaire l'étape qu'il touche */ .et38-h8 .et38-aiguille { display: none; } .et38-faisceau { position: absolute; inset: -10%; z-index: 0; border-radius: 50%; background: conic-gradient(from -30deg, rgba(232,166,19,0) 0deg, rgba(232,166,19,.55) 14deg, rgba(255,226,150,1) 30deg, rgba(232,166,19,.55) 46deg, rgba(232,166,19,0) 60deg, rgba(232,166,19,0) 360deg); -webkit-mask: radial-gradient(circle closest-side, transparent 0 18%, #000 26%, #000 82%, transparent 100%); mask: radial-gradient(circle closest-side, transparent 0 18%, #000 26%, #000 82%, transparent 100%); } .et38.et38-h8 .et38-b.et38-actif::before { box-shadow: 0 0 0 4px rgba(232,166,19,.35), 0 0 22px 6px rgba(232,166,19,.75); } @media (prefers-reduced-motion: reduce) { .et38-aiguille, .et38-cadran .et38-b::before { transition: none; } .et38-lecture.et38-change, .et38-dial::before, .et38-rose, .et38-sable, .et38-filet { animation: none; } .et38-piece, .et38-verre, .et38-code, .et38-h7 .et38-l, .et38-h7 .et38-b > i { transition: none; } } /* ---------- La mission seule (pages entreprise, sans les 3 temps à côté), ordinateur (msg 6730) ---------- Le titre à gauche, l'horloge et son texte à droite, sur une seule bande : plus de grand vide à droite du cadran. */ @media (min-width: 1000px) { body.fond-38 main > section.et38-bloc > .ar-w { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: 56px; align-items: center; } body.fond-38 main > section.et38-bloc > .ar-w > :not(.et38) { grid-column: 1; } body.fond-38 main > section.et38-bloc > .ar-w > .et38 { grid-column: 2; grid-row: 1 / span 4; margin: 0; } body.fond-38 main > section.et38-bloc h2 { text-wrap: balance; } } /* « Ils nous ont fait confiance » (msg 6835) : logos en cartes blanches, d'où le fond jaune (règle des cartes). */ .lg38-grille { list-style: none; margin: 22px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } .lg38-grille li { background: #fff; border-radius: 6px; height: 68px; padding: 10px 12px; display: flex; align-items: center; justify-content: center; } .lg38-grille li.lg38-sombre { background: #000; } .lg38-grille img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; display: block; } .lg38-plus { display: none; margin: 16px auto 0; font: 800 15px/1 "Montserrat", "Montserrat Repli", sans-serif; color: #fff; background: #000; border: 0; border-radius: 999px; padding: 14px 22px; cursor: pointer; } .lg38-plus:focus-visible { outline: 3px solid #fff; outline-offset: 3px; } @media (max-width: 699px) { :where(.js) .lg38:not(.lg38-ouvert) .lg38-grille li:nth-child(n+13) { display: none; } :where(.js) .lg38:not(.lg38-ouvert) .lg38-plus { display: block; } } @media (min-width: 700px) { .lg38-grille { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; } .lg38-grille li { height: 84px; padding: 12px 16px; } } @media (min-width: 1100px) { .lg38-grille { grid-template-columns: repeat(7, minmax(0, 1fr)); } } /* Vidéo verticale avec le son (témoignage), bloc video_locale */ .vl38-grille { display: grid; gap: 28px; align-items: center; } .vl38-texte h2 { margin: 0 0 12px; } .vl38-texte p { margin: 0; max-width: 56ch; } .vl38-cadre { margin: 0 auto; width: min(100%, 340px); } .vl38-cadre video { display: block; width: 100%; height: auto; aspect-ratio: 9 / 16; background: #000; border-radius: 14px; box-shadow: 0 22px 44px -22px rgba(0,0,0,.6); } .vl38-cadre figcaption { margin-top: 10px; font-size: 14px; text-align: center; opacity: .85; } @media (min-width: 900px) { .vl38-grille { grid-template-columns: 1.2fr .8fr; gap: 56px; } .vl38-cadre { width: 100%; max-width: 360px; } } /* ===== Msg 7715 : à l'ordinateur, la mission en pièces de puzzle qui s'emboîtent (page38.js dessine les pièces) ===== Une pièce par étape, bordeaux et jaune en alternance, texte blanc ; en ligne quand la place le permet, en colonne à côté des 3 temps. Les pièces arrivent une à une et s'encastrent à l'entrée dans l'écran. */ body .et38.et38-pz { display: block; height: auto; max-width: 1180px; margin: 30px auto 10px; overflow: visible; visibility: visible; } .duo38 .et38.et38-pz { max-width: none; margin: 22px 0 0; } .et38-pz .et38-fil, .et38-pz .et38-ph { display: none; } .et38.et38-pz .et38-l { position: static; display: flex; gap: 0; margin: 0; padding: 0; } .et38-pz.et38-pz-col .et38-l { flex-direction: column; } .et38.et38-pz .et38-b, .et38.et38-pz .et38-b:nth-child(even) { box-sizing: border-box; position: relative; left: auto; top: auto; z-index: auto; flex: none; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; width: auto; height: auto; min-height: 0; margin: 0; padding: 22px 16px 22px; border-radius: 0; background: none; box-shadow: none; color: #fff; text-align: left; transform: none; opacity: 1; } .et38.et38-pz .et38-b::before { display: none; } .et38-pz.et38-pz-ligne .et38-b { min-height: 190px; padding-top: 24px; padding-bottom: 26px; } .et38-pz.et38-pz-ligne .et38-b.et38-pz-creux { padding-left: 50px; } .et38-pz.et38-pz-ligne .et38-b.et38-pz-bosse { padding-right: 52px; } .et38-pz.et38-pz-col .et38-b, .et38-pz.et38-pz-col .et38-b:nth-child(even) { display: grid; grid-template-columns: 54px 1fr; grid-template-rows: auto auto; column-gap: 14px; align-items: start; padding: 16px 18px 16px; } .et38-pz.et38-pz-col .et38-b.et38-pz-creux { padding-top: 44px; } .et38-pz.et38-pz-col .et38-b.et38-pz-bosse { padding-bottom: 51px; } .et38-pz-forme { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; z-index: 0; pointer-events: none; } .et38-pz-forme path { fill: #8f0000; stroke: #000; stroke-width: 3; stroke-linejoin: round; filter: drop-shadow(0 14px 18px rgba(0,0,0,.45)); } .et38-pz .et38-b:nth-child(even) .et38-pz-forme path { fill: #e8a613; } .f38-rouge .et38-pz .et38-b:nth-child(odd) .et38-pz-forme path { fill: #000; } .f38-jaune .et38-pz .et38-b:nth-child(even) .et38-pz-forme path { fill: #000; } .et38.et38-pz .et38-b > i, .et38.et38-pz .et38-b > b, .et38.et38-pz .et38-b > .et38-t, .et38.et38-pz .et38-b:nth-child(even) > i, .et38.et38-pz .et38-b:nth-child(even) > b, .et38.et38-pz .et38-b:nth-child(even) > .et38-t { position: relative; z-index: 1; width: auto; height: auto; margin: 0; padding: 0; overflow: visible; clip: auto; white-space: normal; color: #fff; text-align: left; opacity: 1; align-self: auto; text-shadow: 0 1px 3px rgba(0,0,0,.45); } .et38.et38-pz .et38-b > i { font: 400 46px/1 "Anton", "Anton Repli", sans-serif; font-style: normal; } .et38.et38-pz .et38-b > b { margin-top: 10px; font: 800 17px/1.2 "Montserrat", "Montserrat Repli", sans-serif; text-wrap: balance; } .et38.et38-pz .et38-b > .et38-t { margin-top: 8px; font-size: 14.5px; font-weight: 600; line-height: 1.4; } .et38-pz.et38-pz-col .et38-b > i { grid-column: 1; grid-row: 1 / 3; font-size: 40px; text-align: center; } .et38-pz.et38-pz-col .et38-b > b { grid-column: 2; grid-row: 1; margin-top: 2px; } .et38-pz.et38-pz-col .et38-b > .et38-t { grid-column: 2; grid-row: 2; margin-top: 4px; } /* L'arrivée : chaque pièce part d'un peu plus loin, penchée, et vient s'encastrer dans la précédente */ .et38-pz:not(.et38-pz-vu) .et38-b { opacity: 0; transform: translate(var(--dx, 0), var(--dy, 0)) rotate(var(--r, 0deg)); } .et38-pz .et38-b { transition: transform .6s cubic-bezier(.2,.9,.3,1.25) calc(var(--i) * .32s), opacity .3s ease calc(var(--i) * .32s); } .et38-pz.et38-pz-vu .et38-b:hover { transform: translateY(-6px); transition-delay: 0s; } @media (prefers-reduced-motion: reduce) { .et38-pz .et38-b { transition: none; } .et38-pz:not(.et38-pz-vu) .et38-b { opacity: 1; transform: none; } } /* ===== Msg 7737 : deux autres propositions pour la mission à l'ordinateur, à comparer au puzzle ===== ?mission=boussole : une grande boussole, l'aiguille pivote vers chaque étape posée sur le pourtour. ?mission=parchemin : les étapes en escales sur un parchemin, un chemin en pointillés se trace de l'une à l'autre. La liste des étapes reste dans la page (Google, IA, lecteurs d'écran). */ body .et38.et38-bs { display: flex; align-items: center; justify-content: center; gap: 56px; height: auto; max-width: 1000px; margin: 30px auto 10px; overflow: visible; visibility: visible; } .duo38 .et38.et38-bs { max-width: none; margin: 22px 0 0; } .et38-bs .et38-fil, .et38-bs .et38-ph, .et38-pc .et38-fil, .et38-pc .et38-ph { display: none; } .et38.et38-bs .et38-l { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .et38-bs-boite { flex: 0 0 auto; width: min(400px, 100%); } .et38-bs-svg { display: block; width: 100%; height: auto; overflow: visible; } .et38-bs-fond { fill: var(--bs-fond, #fff); stroke: var(--bs-anneau, #e8a613); stroke-width: 7; } /* msg 7746 : fond blanc dans la boussole */ .et38-bs-cercle { fill: none; stroke: var(--bs-cercle, rgba(143,0,0,.45)); stroke-width: 1.5; stroke-dasharray: 3 5; } .et38-bs-grad { stroke: var(--bs-grad, #000); stroke-width: 1.5; } .et38-bs-grad-f { stroke-width: 3.5; } .et38-bs-pt { fill: var(--bs-pt, #e8a613); } .et38-bs-pt-o { fill: var(--bs-pto, #8f0000); } .et38-bs-pt.et38-bs-pt-p { fill: var(--bs-pp, #000); } .et38-bs-l { fill: var(--bs-l, #000); font: 400 21px "Anton", "Anton Repli", sans-serif; text-anchor: middle; dominant-baseline: central; } .et38-bs-rose { transform-box: view-box; transform-origin: 200px 200px; transition: transform 1.6s cubic-bezier(.2,.8,.2,1), opacity .8s ease; } .et38-bs:not(.et38-bs-vu) .et38-bs-rose { transform: rotate(-140deg) scale(.82); opacity: .2; } .et38-bs-vu .et38-bs-rose { opacity: .85; } .et38-bs-rep { cursor: pointer; } .et38-bs-rep circle { fill: var(--bs-rep, #8f0000); stroke: var(--bs-rep-bord, #e8a613); stroke-width: 3; transform-box: fill-box; transform-origin: center; transition: fill .3s ease, transform .3s ease; } .et38-bs-rep text { fill: var(--bs-rep-tx, #fff); font: 400 23px "Anton", "Anton Repli", sans-serif; text-anchor: middle; dominant-baseline: central; pointer-events: none; } .et38-bs-rep.et38-bs-on circle { fill: var(--bs-on, #e8a613); stroke: var(--bs-on-bord, #fff); transform: scale(1.2); } .et38-bs-rep.et38-bs-on text { fill: var(--bs-on-tx, #000); } .et38-bs-aig { transform-box: view-box; transform-origin: 200px 200px; transition: transform 1.2s cubic-bezier(.34,1.56,.5,1); filter: drop-shadow(0 5px 5px rgba(0,0,0,.35)); } .et38-bs-aig-n { fill: var(--bs-aign, #000); } .et38-bs-aig-s { fill: var(--bs-aigs, #8f0000); stroke: var(--bs-aign, #000); stroke-width: 1.5; } .et38-bs-axe { fill: var(--bs-axe, #e8a613); stroke: var(--bs-aign, #000); stroke-width: 3; } .et38-bs-lect { flex: 0 1 420px; min-height: 210px; color: #fff; } .et38-bs-n { margin: 0; font: 800 14px/1.2 "Montserrat", "Montserrat Repli", sans-serif; color: #e8a613; } .et38-bs-lect b { display: block; margin-top: 8px; font: 400 46px/1.02 "Anton", "Anton Repli", sans-serif; } .et38-bs-lect p:not(.et38-bs-n) { margin: 12px 0 0; font-size: 17px; line-height: 1.45; color: rgba(255,255,255,.9); } .et38-bs-pts { display: flex; gap: 8px; margin-top: 22px; } .et38-bs-pts i { width: 30px; height: 4px; border-radius: 2px; background: rgba(255,255,255,.25); } .et38-bs-pts i.on { background: #e8a613; } .et38-bs-change { animation: et38-fondu .45s ease; } @media (max-width: 1099px) { .duo38:not(.m72-duo) .et38.et38-bs { flex-direction: column; gap: 24px; } .duo38 .et38-bs-boite { width: min(340px, 100%); } .duo38 .et38-bs-lect { min-height: 170px; text-align: center; } .duo38 .et38-bs-pts { justify-content: center; } } .duo38:not(.m72-duo) > section:nth-of-type(2) .et38.et38-bs { flex-direction: column; gap: 24px; } .duo38:not(.m72-duo) > section:nth-of-type(2) .et38-bs-boite { width: min(340px, 100%); } .duo38:not(.m72-duo) > section:nth-of-type(2) .et38-bs-lect { min-height: 170px; text-align: center; } .duo38:not(.m72-duo) > section:nth-of-type(2) .et38-bs-pts { justify-content: center; } body .et38.et38-pc { position: relative; display: block; height: auto; max-width: 1180px; margin: 40px auto 20px; padding: 48px 40px 52px; overflow: visible; visibility: visible; border-radius: 10px; background: radial-gradient(ellipse at 50% 45%, #f3bd44 0%, #e8a613 55%, #b07605 100%); box-shadow: inset 0 0 70px rgba(80,40,0,.55), 0 26px 50px -20px rgba(0,0,0,.7); color: #000; } .duo38 .et38.et38-pc { max-width: none; margin: 30px 0 10px; padding: 40px 26px 44px; } .et38.et38-pc::before, .et38.et38-pc::after { content: ""; position: absolute; left: -14px; right: -14px; height: 22px; border-radius: 11px; background: linear-gradient(#4d0000, #8f0000 45%, #330000); box-shadow: 0 6px 12px rgba(0,0,0,.5); } .et38.et38-pc::before { top: -11px; } .et38.et38-pc::after { bottom: -11px; } .et38-pc-svg { position: absolute; left: 0; top: 0; z-index: 0; overflow: visible; pointer-events: none; } .et38-pc-chemin { fill: none; stroke: #8f0000; stroke-width: 3.5; stroke-linecap: round; stroke-dasharray: 1 11; } .et38-pc-masque { fill: none; stroke: #fff; stroke-width: 16; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 3.2s ease .3s; } .et38-pc-vu .et38-pc-masque { stroke-dashoffset: 0; } .et38-pc-croix path { fill: none; stroke: #8f0000; stroke-width: 6; stroke-linecap: round; } .et38-pc-croix { opacity: 0; transition: opacity .4s ease 3.4s; } .et38-pc-vu .et38-pc-croix { opacity: 1; } .et38.et38-pc .et38-l { position: relative; z-index: 1; display: flex; gap: 18px; margin: 0; padding: 0; } .et38.et38-pc .et38-b, .et38.et38-pc .et38-b:nth-child(even) { position: relative; left: auto; top: auto; z-index: auto; flex: 1 1 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; width: auto; height: auto; min-height: 0; margin: 0; padding: 0; border-radius: 0; background: none; box-shadow: none; color: #000; text-align: center; transform: none; opacity: 1; } .et38.et38-pc .et38-b::before { display: none; } .et38-pc.et38-pc-ligne .et38-b:nth-child(even) { margin-top: 118px; } .et38.et38-pc .et38-b > i, .et38.et38-pc .et38-b:nth-child(even) > i { display: grid; place-items: center; width: 60px; height: 60px; margin: 0; padding: 0; border: 3px solid #8f0000; border-radius: 50%; background: #000; color: #e8a613; font: 400 30px/1 "Anton", "Anton Repli", sans-serif; font-style: normal; box-shadow: 0 8px 14px -6px rgba(0,0,0,.6); } .et38.et38-pc .et38-b > b, .et38.et38-pc .et38-b > .et38-t, .et38.et38-pc .et38-b:nth-child(even) > b, .et38.et38-pc .et38-b:nth-child(even) > .et38-t { position: relative; width: auto; height: auto; margin: 0; padding: 0; overflow: visible; clip: auto; white-space: normal; color: #000; text-align: inherit; opacity: 1; } .et38.et38-pc .et38-b > b { margin-top: 12px; font: 800 17px/1.2 "Montserrat", "Montserrat Repli", sans-serif; text-wrap: balance; } .et38.et38-pc .et38-b > .et38-t { margin-top: 6px; max-width: 18em; font-size: 14.5px; font-weight: 600; line-height: 1.4; color: rgba(0,0,0,.82); } .et38-pc.et38-pc-col .et38-l { flex-direction: column; gap: 26px; } .et38-pc.et38-pc-col .et38-b, .et38-pc.et38-pc-col .et38-b:nth-child(even) { display: grid; grid-template-columns: 60px 1fr; column-gap: 14px; align-items: start; text-align: left; } .et38-pc.et38-pc-col .et38-b:nth-child(even) { margin-left: 70px; } .et38-pc.et38-pc-col .et38-b > i { grid-row: 1 / 3; } .et38-pc.et38-pc-col .et38-b > b { grid-column: 2; grid-row: 1; margin-top: 4px; } .et38-pc.et38-pc-col .et38-b > .et38-t { grid-column: 2; grid-row: 2; } .et38-pc:not(.et38-pc-vu) .et38-b { opacity: 0; transform: translateY(12px); } .et38-pc .et38-b { transition: opacity .45s ease calc(.3s + var(--i) * .62s), transform .45s ease calc(.3s + var(--i) * .62s); } @media (prefers-reduced-motion: reduce) { .et38-bs-rose, .et38-bs-aig, .et38-pc .et38-b, .et38-pc-masque, .et38-pc-croix { transition: none; } .et38-bs:not(.et38-bs-vu) .et38-bs-rose { transform: none; opacity: 1; } } body .et38.et38-bs.et38-bs-col { flex-direction: column; gap: 22px; } .et38-bs-col .et38-bs-boite { width: min(340px, 100%); } .et38-bs-col .et38-bs-lect { flex: none; min-height: 170px; text-align: center; } .et38-bs-col .et38-bs-pts { justify-content: center; } /* Msg 7749 : « la boussole j'aime bien mais il faut revoir des versions couleurs différentes » → ?boussole=2 à 5 (1 = la version blanche actuelle), toujours dans ses quatre couleurs */ .et38-bs-c2 { --bs-fond: #8f0000; --bs-anneau: #e8a613; --bs-cercle: rgba(255,255,255,.4); --bs-grad: #fff; --bs-pt: #e8a613; --bs-pto: #fff; --bs-pp: #000; --bs-l: #fff; --bs-rep: #000; --bs-rep-bord: #e8a613; --bs-rep-tx: #e8a613; --bs-on: #fff; --bs-on-bord: #e8a613; --bs-on-tx: #8f0000; --bs-aign: #fff; --bs-aigs: #000; --bs-axe: #e8a613; } .et38-bs-c3 { --bs-fond: #e8a613; --bs-anneau: #000; --bs-cercle: rgba(0,0,0,.4); --bs-grad: #000; --bs-pt: #000; --bs-pto: #8f0000; --bs-pp: #fff; --bs-l: #000; --bs-rep: #000; --bs-rep-bord: #e8a613; --bs-rep-tx: #e8a613; --bs-on: #8f0000; --bs-on-bord: #fff; --bs-on-tx: #fff; --bs-aign: #fff; --bs-aigs: #8f0000; --bs-axe: #000; } .et38-bs-c4 { --bs-fond: #000; --bs-anneau: #e8a613; --bs-cercle: rgba(232,166,19,.5); --bs-grad: #e8a613; --bs-pt: #e8a613; --bs-pto: #fff; --bs-pp: #8f0000; --bs-l: #e8a613; --bs-rep: #e8a613; --bs-rep-bord: #000; --bs-rep-tx: #000; --bs-on: #fff; --bs-on-bord: #e8a613; --bs-on-tx: #000; --bs-aign: #e8a613; --bs-aigs: #8f0000; --bs-axe: #fff; } .et38-bs-c5 { --bs-fond: #fff; --bs-anneau: #8f0000; --bs-cercle: rgba(0,0,0,.3); --bs-grad: #8f0000; --bs-pt: #8f0000; --bs-pto: #000; --bs-pp: #e8a613; --bs-l: #8f0000; --bs-rep: #fff; --bs-rep-bord: #8f0000; --bs-rep-tx: #8f0000; --bs-on: #8f0000; --bs-on-bord: #e8a613; --bs-on-tx: #fff; --bs-aign: #8f0000; --bs-aigs: #000; --bs-axe: #e8a613; } /* Msg 7757 : « autre version » → 4 nouvelles boussoles, ?boussole=6 à 9 (dégradés, couronne large) */ .et38-bs-bande { fill: none; stroke: var(--bs-bande, none); stroke-width: 30; } .et38-bs-c6 { --bs-fond: url(#bs-deg-r); --bs-anneau: #e8a613; --bs-cercle: rgba(232,166,19,.55); --bs-grad: #e8a613; --bs-pt: #e8a613; --bs-pto: #fff; --bs-pp: #e8a613; --bs-l: #e8a613; --bs-rep: #fff; --bs-rep-bord: #e8a613; --bs-rep-tx: #8f0000; --bs-on: #e8a613; --bs-on-bord: #fff; --bs-on-tx: #000; --bs-aign: #fff; --bs-aigs: #e8a613; --bs-axe: #8f0000; } .et38-bs-c7 { --bs-fond: url(#bs-deg-j); --bs-anneau: #8f0000; --bs-cercle: rgba(143,0,0,.5); --bs-grad: #8f0000; --bs-pt: #000; --bs-pto: #fff; --bs-pp: #8f0000; --bs-l: #8f0000; --bs-rep: #8f0000; --bs-rep-bord: #fff; --bs-rep-tx: #fff; --bs-on: #000; --bs-on-bord: #fff; --bs-on-tx: #e8a613; --bs-aign: #8f0000; --bs-aigs: #000; --bs-axe: #fff; } .et38-bs-c8 { --bs-fond: #000; --bs-anneau: #fff; --bs-cercle: rgba(255,255,255,.35); --bs-grad: #fff; --bs-pt: #8f0000; --bs-pto: #e8a613; --bs-pp: #fff; --bs-l: #fff; --bs-rep: #e8a613; --bs-rep-bord: #fff; --bs-rep-tx: #000; --bs-on: #8f0000; --bs-on-bord: #fff; --bs-on-tx: #fff; --bs-aign: #fff; --bs-aigs: #8f0000; --bs-axe: #e8a613; } .et38-bs-c9 { --bs-fond: #fff; --bs-bande: #8f0000; --bs-anneau: #e8a613; --bs-cercle: rgba(143,0,0,.35); --bs-grad: #fff; --bs-pt: #8f0000; --bs-pto: #e8a613; --bs-pp: #000; --bs-l: #8f0000; --bs-rep: #e8a613; --bs-rep-bord: #fff; --bs-rep-tx: #000; --bs-on: #000; --bs-on-bord: #e8a613; --bs-on-tx: #e8a613; --bs-aign: #000; --bs-aigs: #8f0000; --bs-axe: #e8a613; } /* Msg 7761-7762 « 9 retravailler », « mix 6 et 9 » : trois mélanges, en essai (?boussole=9a, 9b, 9c) */ .et38-bs-filet { fill: none; stroke: var(--bs-filet, none); stroke-width: 2.5; } /* 9a Couronne profonde : la couronne de la 9 prend le dégradé bordeaux-noir de la 6, graduations or, centre blanc */ .et38-bs-c9a { --bs-bande: url(#bs-deg-c); --bs-cercle: transparent; --bs-filet: #e8a613; --bs-grad: #e8a613; --bs-pt: #e8a613; --bs-pto: #8f0000; --bs-pp: #000; --bs-l: #8f0000; --bs-rep: #fff; --bs-rep-bord: #e8a613; --bs-rep-tx: #8f0000; --bs-on: #e8a613; --bs-on-bord: #fff; --bs-on-tx: #000; --bs-aign: #000; --bs-aigs: #e8a613; --bs-axe: #8f0000; } /* 9b Cœur profond : le cœur dégradé de la 6 dans une couronne blanche, graduations bordeaux */ .et38-bs-c9b { --bs-fond: url(#bs-deg-r); --bs-bande: #fff; --bs-cercle: transparent; --bs-filet: #e8a613; --bs-grad: #8f0000; --bs-pt: #e8a613; --bs-pto: #fff; --bs-pp: #e8a613; --bs-l: #e8a613; --bs-rep: #8f0000; --bs-rep-bord: #e8a613; --bs-rep-tx: #fff; --bs-on: #e8a613; --bs-on-bord: #fff; --bs-on-tx: #000; --bs-aign: #fff; --bs-aigs: #e8a613; --bs-axe: #8f0000; } /* 9c Cœur et couronne : cœur dégradé de la 6, couronne bordeaux de la 9, filet or entre les deux */ .et38-bs-c9c { --bs-fond: url(#bs-deg-r); --bs-bande: #8f0000; --bs-cercle: transparent; --bs-filet: #e8a613; --bs-grad: #e8a613; --bs-pt: #e8a613; --bs-pto: #fff; --bs-pp: #e8a613; --bs-l: #e8a613; --bs-rep: #fff; --bs-rep-bord: #e8a613; --bs-rep-tx: #8f0000; --bs-on: #e8a613; --bs-on-bord: #fff; --bs-on-tx: #000; --bs-aign: #fff; --bs-aigs: #e8a613; --bs-axe: #8f0000; } /* Msg 7785 : « tous les titres en ANTON », sur toutes les pages (titres de page et de section), en capitales comme « Réservez en 3 temps » ; les sous-titres en gardent leur propre police, le pied de page et le petit h1 d'adresse du haut de page restent en Montserrat (étiquettes, pas des titres) */ body h1:not(.h38-c h1:not(.h38-a)):not(.m72-vit-txt h1):not(.v38-txt h1), body h2:not(.p38-pied h2) { font-family: "Anton", "Anton Repli", sans-serif !important; font-weight: 400 !important; text-transform: uppercase; letter-spacing: .005em; } /* Msg 7788 : titres sur une seule ligne à l'ordinateur (la taille est ajustée par page38.js si besoin) */ @media (min-width: 900px) { body .t1l { white-space: nowrap !important; max-width: none !important; text-wrap: nowrap !important; contain: inline-size; min-width: 0; } body .t1l > br { display: none; } } /* Msg 7788 : à l'ordinateur, le titre des questions des pages intérieures passe au-dessus des deux colonnes, pour tenir sur une seule ligne ; le téléphone du standard reste à gauche des questions */ @media (min-width: 900px) { body .ar-faq { row-gap: 8px; } body .ar-faq-tete { display: contents; } body .ar-faq-tete > .ar-oeil, body .ar-faq-tete > h2 { grid-column: 1 / -1; } body .ar-faq-tete > h2 { margin-bottom: 18px; } body .ar-faq-tete > p:last-child { grid-column: 1; position: sticky; top: 110px; margin: 0; } body .ar-faq > div:last-child { grid-column: 2; } body .ar-faq-tete a[href^="tel"] { white-space: nowrap; } } /* ===== Msg 7797, 7806 : le haut des pages intérieures sur le modèle de l'accueil (vitrine de outils/lab-s3/72 : photo du parc en fondu à gauche, grand mot, vidéo dans son cadre penché, carte bordeaux, chiffres du parc) ===== */ .v38-pause { position: absolute; z-index: 2; top: 12px; right: 12px; min-height: 34px; padding: 0 12px; border: 1px solid rgba(255,255,255,.5); border-radius: 999px; background: rgba(0,0,0,.55); color: #fff; font: 600 13px/1 "Montserrat", "Montserrat Repli", sans-serif; cursor: pointer; } .v38 { position: relative; overflow: hidden; padding: 26px 16px 34px; background: #000; } .v38-fond { position: absolute; top: 0; left: 0; width: 76%; height: 100%; max-width: none; object-fit: cover; object-position: 56% 30%; filter: brightness(.7) saturate(1.05); -webkit-mask-image: linear-gradient(to right, #000 45%, transparent 100%); mask-image: linear-gradient(to right, #000 45%, transparent 100%); } .v38-mot, .v38-txt { text-shadow: 0 2px 14px rgba(0,0,0,.75); } .v38::after { content: ""; position: absolute; inset: 0; background: linear-gradient(rgba(0,0,0,.25), rgba(0,0,0,0) 40%, rgba(0,0,0,.65)); pointer-events: none; } .v38-in { position: relative; z-index: 2; display: grid; grid-template-columns: 1fr 50%; grid-template-areas: "m m" "t v" "c c"; column-gap: 14px; max-width: 1200px; margin: 0 auto; } .v38-mot { grid-area: m; margin: 0 0 10px; font: 400 clamp(52px, 15vw, 150px)/.9 "Anton", "Anton Repli", sans-serif; text-transform: uppercase; color: #fff; } .v38-mot span + span { color: #e8a613; } .v38-txt { grid-area: t; align-self: center; padding-bottom: 40px; } .v38-txt h1 { margin: 0 0 8px; font: 700 14px/1.35 "Montserrat", "Montserrat Repli", sans-serif; color: rgba(255,255,255,.82); } .v38-txt p { margin: 0; font: 700 clamp(19px, 5.2vw, 34px)/1.15 "Montserrat", "Montserrat Repli", sans-serif; color: #fff; text-wrap: balance; } .v38-video { grid-area: v; position: relative; margin: 0; aspect-ratio: 4 / 5; border: 4px solid #e8a613; border-radius: 18px; overflow: hidden; transform: rotate(3.5deg); box-shadow: 0 18px 40px rgba(0,0,0,.6); background: #000 url(/videos/revivez-le-parc-affiche-boucle.webp) center / cover; animation: v38-pose1 .6s .1s cubic-bezier(.2,.9,.3,1.2) both; } .v38-video video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .v38-video .v38-pause { position: absolute; top: 8px; right: 8px; z-index: 2; } .v38-carte { grid-area: c; position: relative; margin-top: -26px; padding: 11px 14px 12px; border-radius: 16px; background: #8f0000; color: #fff; box-shadow: 0 22px 50px rgba(0,0,0,.6); animation: v38-pose2 .6s .35s cubic-bezier(.2,.9,.3,1.2) both; } .v38-note { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; color: #fff; font-size: 13px; font-weight: 600; text-decoration: none; } .v38-note:hover { text-decoration: underline; } .v38-et { display: inline-flex; gap: 1px; color: #e8a613; align-self: center; } .v38-note b { font: 400 24px/1 "Anton", "Anton Repli", sans-serif; color: #e8a613; } .v38-prix { margin: 0 0 8px; display: flex; align-items: baseline; gap: 10px; } .v38-prix b { font: 400 40px/1 "Anton", "Anton Repli", sans-serif; } .v38-prix { font-weight: 700; font-size: 15px; } .v38-faits { display: grid; grid-template-columns: repeat(3, 1fr); margin: 0 0 10px; border-top: 1px solid rgba(255,255,255,.3); } .v38-faits li { padding: 6px 6px 0 0; } .v38-faits li + li { padding-left: 10px; border-left: 1px solid rgba(255,255,255,.3); } .v38-faits li span { font-size: 11.5px; color: rgba(255,255,255,.8); } .v38-faits li b { margin: 0; font-weight: 800; font-size: 13px; line-height: 1.25; } .v38-btn { display: flex; align-items: center; justify-content: center; min-height: 46px; border-radius: 8px; background: #fff; color: #8f0000; font: 800 17px/1 "Montserrat", "Montserrat Repli", sans-serif; text-decoration: none; } .v38-btn:hover { background: #e8a613; color: #000; } .v38 :focus-visible { outline: 3px solid #e8a613; outline-offset: 3px; } /* Msg 8131 (vitesse) : sans fondu depuis une opacité nulle, qui retardait l'affichage du premier écran pour Google ; les cartes arrivent toujours en glissant. */ @keyframes v38-pose1 { from { transform: translateY(30px) rotate(12deg) scale(.9); } } @keyframes v38-pose2 { from { transform: translateY(40px) scale(.94); } } .v38 .d38-compteurs { grid-column: 1 / -1; margin: 26px 0 0; } @media (max-width: 899px) { .v38-carte { display: grid; grid-template-columns: auto 1fr; grid-template-areas: "p n" "f f" "b b"; align-items: center; column-gap: 12px; margin-top: 14px; } .v38-prix { grid-area: p; margin: 0; gap: 6px; font-size: 13px; flex-direction: column; align-items: flex-start; gap: 0; } .v38-prix b { font-size: 38px; } .v38-note { grid-area: n; justify-self: end; justify-content: flex-end; align-items: center; text-align: right; font-size: 12px; line-height: 1.3; } .v38-note b { font-size: 22px; } .v38-et svg { width: 13px; height: 13px; } .v38-faits { grid-area: f; margin: 8px 0 10px; } .v38-btn { grid-area: b; min-height: 44px; font-size: 16px; } .v38-faits li:nth-child(3), .v38-carte .v38-btn { display: none; } .v38-faits { grid-template-columns: repeat(2, 1fr); margin: 6px 0 0; } .v38-carte { padding: 10px 14px 10px; margin-top: 12px; } .v38 .d38-compteurs { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 12px; margin-top: 16px; } .v38 .d38-compteurs li { padding-top: 6px; } .v38 .d38-compteurs li:last-child:nth-child(odd) { grid-column: auto; } .v38 .d38-compteurs b { font-size: 21px; line-height: 1.05; } .v38 .d38-compteurs li > span { font-size: 11.5px; line-height: 1.3; margin-top: 3px; } .v38 { padding-top: 16px; padding-bottom: 18px; } .v38-mot { margin-bottom: 6px; } .v38-video { aspect-ratio: 9 / 16; } .v38-txt { padding-bottom: 0; } .v38-txt h1 { font-size: 13px; margin-bottom: 4px; } .v38-txt p { font-size: clamp(17px, 4.8vw, 22px); } .v38-carte { margin-top: 10px; padding: 8px 12px 8px; } .v38-prix b { font-size: 32px; } .v38-faits li { padding-top: 4px; } .v38 .d38-compteurs { margin-top: 10px; gap: 8px 10px; } .v38 .d38-compteurs li { padding-top: 4px; border-top-width: 1.5px; } .v38 .d38-compteurs b { font-size: 19px; } .v38 .d38-compteurs li > span { font-size: 11px; line-height: 1.25; margin-top: 2px; } } @media (min-width: 900px) { .v38 { padding: 30px 40px 34px; } .v38-fond { left: 16%; width: 54%; object-position: 0% 40%; filter: brightness(.78) saturate(1.05); -webkit-mask-image: linear-gradient(to right, transparent, #000 22%, #000 62%, transparent); mask-image: linear-gradient(to right, transparent, #000 22%, #000 62%, transparent); } .v38-in { grid-template-columns: minmax(0, 1fr) 360px; grid-template-areas: "m v" "t v" "c v" "s v" "k k"; column-gap: 56px; align-items: start; } .v38-mot { font-size: clamp(84px, 8.2vw, 124px); margin-bottom: 10px; white-space: nowrap; } .v38-txt { padding-bottom: 0; } .v38-txt h1 { font-size: 16px; } .v38-txt p { font-size: clamp(26px, 2.4vw, 34px); max-width: 22em; } .v38-video { align-self: center; } .v38-carte { width: min(100%, 560px); margin: 22px 0 0; padding: 18px 22px 18px; display: grid; grid-template-columns: auto 1fr; grid-template-areas: "n n" "p f" "b b"; column-gap: 26px; align-items: center; } .v38-carte .v38-note { grid-area: n; } .v38-carte .v38-prix { grid-area: p; margin: 4px 0 10px; } .v38-carte .v38-faits { grid-area: f; margin: 4px 0 10px; } .v38-carte .v38-btn { grid-area: b; } .v38 .d38-compteurs { grid-area: k; margin: 34px 0 0; } .v38-note { font-size: 14px; } .v38-note b { font-size: 30px; } .v38-prix { margin: 4px 0 12px; font-size: 17px; } .v38-faits { margin-bottom: 14px; } .v38-btn { min-height: 54px; } .v38-prix b { font-size: 56px; } .v38-faits li b { font-size: 15px; } .v38-faits li span { font-size: 13.5px; } } @media (min-width: 1200px) { .v38 { overflow: visible; z-index: 1; } .v38::after { z-index: 1; background: linear-gradient(rgba(0,0,0,.25), rgba(0,0,0,0) 40%); } .v38 .v38-fond { height: calc(100% + 640px); -webkit-mask-image: linear-gradient(to right, #000 62%, transparent), linear-gradient(#000 38%, rgba(0,0,0,.55) 62%, rgba(0,0,0,.2) 80%, transparent 97%); -webkit-mask-composite: source-in; mask-image: linear-gradient(to right, #000 62%, transparent), linear-gradient(#000 38%, rgba(0,0,0,.55) 62%, rgba(0,0,0,.2) 80%, transparent 97%); mask-composite: intersect; } } @media (min-width: 1200px) { .v38-fond { left: 0; width: 27vw; object-position: 50% 30%; filter: brightness(.85) saturate(1.05); -webkit-mask-image: linear-gradient(to right, #000 62%, transparent); mask-image: linear-gradient(to right, #000 62%, transparent); } .v38-in { max-width: 1180px; margin: 0 auto 0 calc(25vw - 50px); } .v38-mot { font-size: clamp(84px, 7.4vw, 124px); } .v38 .d38-compteurs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 18px; } .v38 .d38-compteurs li, .v38 .d38-compteurs li:last-child:nth-child(odd) { grid-column: auto; white-space: normal; text-align: center; } .v38 .d38-compteurs b { font-size: clamp(26px, 2.3vw, 38px); } .v38 .d38-compteurs li > span { font-size: 14px; } } @media (min-width: 1600px) { .v38-in { margin-left: 16vw; } .v38-fond { width: 26vw; } } .v38-faits { padding: 0; list-style: none; } .v38-faits li b { display: block; } .v38-faits li span { display: block; } .v38-faits-seuls { grid-column: 1 / -1; } .v38-s { grid-column: 1 / -1; margin-top: 16px; color: rgba(255,255,255,.88); font-size: 15px; line-height: 1.5; text-shadow: 0 1px 8px rgba(0,0,0,.8); } .v38-s p { margin: 0; max-width: 62ch; } .v38-s a { color: #e8a613; } @media (min-width: 900px) { .v38-s { grid-area: s; grid-column: auto; margin-top: 18px; font-size: 16px; } .v38-carte .v38-faits-seuls { grid-column: 1 / -1; } } /* Ordinateur : la photo du haut descend en fondu sur la section suivante, comme sur l'accueil (msg 7806) */ @media (min-width: 1200px) { body.fond-38 main > .v38 + section.f38, body.fond-38 main > .v38 + .duo38 { position: relative; z-index: 2; background: transparent !important; } body.fond-38 main > .v38 + .duo38 > section { background: transparent !important; } } /* Msg 7833 : Anniversaires, le pirate plus grand, qui descend jusqu'à « Réservez en 3 temps » */ @media (min-width: 1200px) { .v38.v38--anniversaires .v38-fond { width: 34vw; height: calc(100% + 820px); object-position: 0% 0%; } } /* Msg 7832 : Team building, l'équipe Découvre des pépites (le cadre étroit garde les visages) */ /* Msg 7835 : une section de texte sur deux porte une photo du décor à droite, fondue vers le texte (comme l'accueil) */ @media (min-width: 900px) { body.fond-38 .f38-ph { position: relative; isolation: isolate; } body.fond-38 .f38-ph::after { content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; right: 0; width: 46vw; background: var(--photo) 50% 35% / cover no-repeat; opacity: .7; -webkit-mask-image: linear-gradient(to right, transparent, #000 34%); mask-image: linear-gradient(to right, transparent, #000 34%); pointer-events: none; } body.fond-38 .f38-rouge.f38-ph::after { opacity: .5; mix-blend-mode: luminosity; } body.fond-38 .f38-ph p, body.fond-38 .f38-ph li { text-shadow: 0 1px 8px rgba(0,0,0,.8); } } .v38--arbre-de-noel .v38-fond { object-position: 62% 0%; } /* Msg 7837 : Séminaire, on voit la tête de pirate entière et la salle plus complète (photo en largeur) */ .v38--seminaire .v38-fond { object-position: 0% 45%; } @media (min-width: 1200px) { .v38.v38--seminaire .v38-fond { width: 50vw; height: calc(100% + 360px); object-position: 0% 50%; filter: brightness(.62) saturate(1.05); -webkit-mask-image: linear-gradient(to right, #000 55%, transparent), linear-gradient(#000 45%, rgba(0,0,0,.5) 70%, transparent 97%); mask-image: linear-gradient(to right, #000 55%, transparent), linear-gradient(#000 45%, rgba(0,0,0,.5) 70%, transparent 97%); } } /* Msg 7840 : Anniversaires, le pirate seul (sans les enfants), calé à gauche */ .v38--anniversaires .v38-fond { object-position: 0% 0%; } /* Msg 7842 : FAQ des pages sur deux colonnes, comme l'accueil : titre et téléphone au-dessus, questions dessous */ @media (min-width: 900px) { body .ar-faq { display: block; } body .ar-faq-tete { display: block; margin-bottom: 18px; } body .ar-faq-tete > h2 { margin-bottom: 8px; } body .ar-faq-tete > p:last-child { position: static; margin: 0; max-width: none; } body .ar-faq-qs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 18px; align-items: start; } body.fond-38 .ar-faq summary h3 { font-size: 16.5px; } } /* Msg 7845 : « Plusieurs formules » → cases à cocher, sur toute la largeur du formulaire */ body .ar-form .ar-ch-plusieurs { grid-column: 1 / -1; margin: 0; padding: 12px 14px; border: 2px solid #e8a613; border-radius: 10px; display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px 14px; } body .ar-form .ar-ch-plusieurs[hidden] { display: none; } body .ar-form .ar-ch-plusieurs legend { padding: 0 6px; font-weight: 700; } body .ar-form .ar-ch-plusieurs label { display: flex; align-items: center; gap: 8px; margin: 0; font-weight: 600; cursor: pointer; } body .ar-form .ar-ch-plusieurs input { width: 20px; height: 20px; margin: 0; padding: 0; accent-color: #8f0000; flex: none; } /* Msg 7848 : le paragraphe du haut de page plus gros et plus lisible (toutes les pages) ; Anniversaires : la carte rouge et le paragraphe se décalent à droite pour laisser voir le pirate */ @media (min-width: 900px) { body .v38-s { font-size: 19px; line-height: 1.5; font-weight: 500; color: #fff; text-shadow: 0 1px 10px rgba(0,0,0,.9), 0 0 2px rgba(0,0,0,.8); } } @media (min-width: 1200px) { .v38--anniversaires .v38-carte, .v38--anniversaires .v38-s { margin-left: min(220px, max(0px, calc(100% - 520px))); width: min(520px, 100%); max-width: 520px; } .v38--anniversaires .v38-prix { white-space: nowrap; } } /* Msg 7853 : « Votre mission, étape par étape » ne touche plus la carte « Réservez en 3 temps » (une marge entre les deux) */ @media (min-width: 900px) { .duo38 > section:nth-of-type(2), body.fond-38 main > .duo38 > section.ar-bloc:nth-of-type(2) { padding-left: 36px !important; } } /* Msg 7851 : la vidéo ne coupe plus le grand mot (elle commence sous lui, toutes les pages) ; les chiffres du haut sur un fond plus sombre, lisibles même devant une photo claire */ @media (min-width: 900px) { .v38-in { grid-template-areas: "m m" "t v" "c v" "s v" "k k"; } .v38-video { align-self: start; margin-top: 6px; } } .v38 .d38-compteurs { position: relative; z-index: 0; } .v38 .d38-compteurs::before { content: ""; position: absolute; z-index: -1; inset: -10px -14px; border-radius: 14px; background: rgba(0,0,0,.62); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); pointer-events: none; } @media (min-width: 900px) { .v38 .d38-compteurs::before { inset: -14px -22px; } } /* Anniversaires : les deux lignes du haut (titre de la page, accroche) se calent sur la carte rouge, à droite du pirate */ @media (min-width: 1200px) { .v38--anniversaires .v38-txt { margin-left: min(220px, max(0px, calc(100% - 520px))); } } /* Msg 7857 : jusqu'à 6 chiffres en haut des pages entreprise (« À la demande ») : une colonne par chiffre à l'ordinateur */ @media (min-width: 1200px) { .v38 .d38-compteurs { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); } } /* Msg 7860 : Séminaire, la photo de la salle un peu plus visible, sans gêner la lecture du texte */ @media (min-width: 1200px) { .v38.v38--seminaire .v38-fond { filter: brightness(.74) saturate(1.08); -webkit-mask-image: linear-gradient(to right, #000 62%, transparent), linear-gradient(#000 50%, rgba(0,0,0,.6) 72%, transparent 97%); mask-image: linear-gradient(to right, #000 62%, transparent), linear-gradient(#000 50%, rgba(0,0,0,.6) 72%, transparent 97%); } } .v38--seminaire .v38-fond { filter: brightness(.8) saturate(1.05); } .v38--seminaire .v38-txt p, .v38--seminaire .v38-s { text-shadow: 0 2px 12px rgba(0,0,0,.95), 0 0 3px rgba(0,0,0,.9); } /* Msg 7863 : « quiz personnalisé offert », bien en évidence : un bandeau jaune en tête de la carte rouge */ .v38-offert { display: flex; align-items: center; gap: 10px; margin: -11px -14px 10px; padding: 9px 14px; border-radius: 16px 16px 0 0; background: #e8a613; color: #000; font: 800 14px/1.3 "Montserrat", "Montserrat Repli", sans-serif; } .v38-offert svg { flex: none; } @media (min-width: 900px) { .v38-carte .v38-offert { grid-column: 1 / -1; margin: -18px -22px 12px; padding: 11px 22px; font-size: 16px; } } .v38-carte .v38-offert { grid-area: o; } @media (max-width: 899px) { .v38-carte:has(.v38-offert) { grid-template-areas: "o o" "p n" "f f" "b b"; } .v38-carte .v38-offert { margin: -8px -12px 8px; } } @media (min-width: 900px) { .v38-carte:has(.v38-offert) { grid-template-areas: "o o" "n n" "p f" "b b"; } } /* Msg 7865 : Photos et vidéos, deux boutons d'avis dans la carte rouge à la place de « Réserver ». */ .v38-avis { grid-area: b; display: grid; gap: 8px; margin-top: 8px; } .v38-carte .v38-avis .v38-btn { display: flex; min-height: 44px; font-size: 15px; } .v38-btn-2 { background: transparent; color: #fff; border: 2px solid #fff; } .v38-btn-2:hover { background: #fff; color: #8f0000; } .v38-avis-n { margin: 0; font: 500 12px/1.35 "Montserrat", "Montserrat Repli", sans-serif; color: rgba(255,255,255,.82); } @media (max-width: 899px) { .v38-carte:has(.v38-avis) { grid-template-areas: "n n" "b b"; } .v38-carte:has(.v38-avis) .v38-note { justify-self: start; } } @media (min-width: 900px) { .v38-avis { grid-template-columns: 1fr 1fr; gap: 10px 12px; } .v38-avis-n { grid-column: 1 / -1; font-size: 13px; } .v38-carte .v38-avis .v38-btn { min-height: 52px; font-size: 16px; } } /* Msg 7866 : dans la fenêtre d'avis, la croix et « Non merci, voir ma photo et ma vidéo » en tout petit. */ body.fond-38 .ar-avis-pop-x { font-size: 15px; top: 8px; right: 10px; color: #8a807c; } body.fond-38 .ar-avis-pop-suite:not(.ar-btn) { font-size: 11.5px; color: #8a807c; } .v38-avis .v38-btn { grid-area: auto; } body.fond-38 .ar-avis-pop .ar-btn-2 { background: #fff; color: #000; box-shadow: inset 0 0 0 2px #000; } .ar-avis-pop .ar-avis-pop-titre:focus, .ar-avis-pop .ar-avis-pop-titre:focus-visible { outline: none !important; box-shadow: none !important; } /* Msg 7889 : EVJF-EVG, les mariés pirates en haut de page, à la place de la vidéo. Ordinateur : la photo large couvre tout le haut (la mariée à gauche, le marié à droite, le texte au milieu sur le noir). Téléphone : les mariés rapprochés, en haut, derrière le titre. */ .v38--evjf-evg .v38-video { display: none; } .v38--evjf-evg .v38-fond { left: 0; width: 100%; height: 520px; object-fit: cover; object-position: 50% 8%; filter: brightness(.75); -webkit-mask-image: linear-gradient(#000 55%, transparent); mask-image: linear-gradient(#000 55%, transparent); } @media (min-width: 900px) { .v38.v38--evjf-evg .v38-fond { left: 0; width: 100%; height: 100%; object-position: 50% 12%; filter: brightness(.9); -webkit-mask-image: linear-gradient(#000 70%, transparent); mask-image: linear-gradient(#000 70%, transparent); -webkit-mask-composite: source-over; mask-composite: add; } .v38--evjf-evg .v38-in { grid-template-columns: minmax(0, 1fr); grid-template-areas: "m" "t" "c" "s" "k"; max-width: 620px; margin-inline: auto; } } /* Msg 7893 : Team building, la photo du mur de boutons cadrée comme dans les formules de l'accueil (photo large). */ .v38--team-building .v38-fond { left: 0; width: 100%; height: 470px; object-fit: cover; object-position: 80% 30%; filter: brightness(.7) saturate(1.08); -webkit-mask-image: linear-gradient(#000 55%, transparent); mask-image: linear-gradient(#000 55%, transparent); } @media (min-width: 900px) { .v38.v38--team-building .v38-fond { left: 0; width: 80%; height: 100%; object-position: 100% 30%; filter: brightness(.8) saturate(1.08); -webkit-mask-image: linear-gradient(to right, #000 60%, transparent), linear-gradient(#000 70%, transparent); -webkit-mask-composite: source-in; mask-image: linear-gradient(to right, #000 60%, transparent), linear-gradient(#000 70%, transparent); mask-composite: intersect; } } /* Msg 7899 : le mot de remerciement au-dessus des boutons d'avis. */ body.fond-38 .v38-avis-t { margin: 0 0 4px; font-size: 15px; line-height: 1.5; font-weight: 600; max-width: 46ch; } /* Msg 7906 : le titre et la ligne du standard des questions ne suivent plus le défilement (ils passaient par-dessus les questions). */ body .ar-faq-tete, body .ar-faq-tete > p:last-child { position: static !important; } /* Msg 7921 : Google puis TripAdvisor côte à côte, boutons plus discrets ; le mot de remerciement court sur toute la largeur de la carte. */ body.fond-38 .v38-avis { grid-template-columns: 1fr 1fr; gap: 8px; } body.fond-38 .v38-avis-t, body.fond-38 .v38-avis-n { grid-column: 1 / -1; max-width: none; } body.fond-38 .v38-carte .v38-avis .v38-btn { min-height: 40px; font-size: 13px; padding: 8px 10px; text-align: center; justify-content: center; line-height: 1.2; } @media (min-width: 900px) { body.fond-38 .v38-carte .v38-avis .v38-btn { min-height: 44px; font-size: 14px; } } /* Msg 7922 : au téléphone aussi, la photo du décor en fond d'une section sur deux, sur toute la largeur, sombre et fondue vers le bas */ @media (max-width: 899px) { body.fond-38 .f38-ph { position: relative; isolation: isolate; } body.fond-38 .f38-ph::after { content: ""; position: absolute; z-index: -1; inset: 0; background: var(--photo) 50% 30% / cover no-repeat; opacity: .34; -webkit-mask-image: linear-gradient(rgba(0,0,0,.9), rgba(0,0,0,.5) 55%, transparent); mask-image: linear-gradient(rgba(0,0,0,.9), rgba(0,0,0,.5) 55%, transparent); pointer-events: none; } body.fond-38 .f38-rouge.f38-ph::after { opacity: .28; mix-blend-mode: luminosity; } body.fond-38 .f38-ph p, body.fond-38 .f38-ph li { text-shadow: 0 1px 8px rgba(0,0,0,.85); } } /* Msg 7922 : la boussole au téléphone, plus compacte (elle remplace le cadran) */ @media (max-width: 899px) { body .et38.et38-bs { flex-direction: column; align-items: center; gap: 14px; } body .et38-bs .et38-bs-boite { width: min(250px, 72vw); } body .et38-bs .et38-bs-lect { flex: none; min-height: 132px; text-align: center; } body .et38-bs .et38-bs-lect b { font-size: 28px; line-height: 1.08; } body .et38-bs .et38-bs-lect p:not(.et38-bs-n) { font-size: 15px; } body .et38-bs .et38-bs-pts { justify-content: center; } } /* Msg 7935 : « Accéder à ma photo et ma vidéo » devient un vrai bouton d'action, jaune, bien visible sur le fond sombre */ body.fond-38 .ar-btn.ar-btn-medias { display: inline-flex; align-items: center; justify-content: center; min-height: 56px; padding: 14px 30px; border-radius: 999px; border: 0; background: #e8a613; color: #000; font: 800 17px/1.2 "Montserrat", "Montserrat Repli", sans-serif; box-shadow: 0 10px 26px -10px rgba(232,166,19,.75); transition: transform .15s, box-shadow .15s; } body.fond-38 .ar-btn.ar-btn-medias:hover { transform: translateY(-2px); box-shadow: 0 14px 30px -10px rgba(232,166,19,.9); } body.fond-38 .ar-btn.ar-btn-medias:focus-visible { outline: 3px solid #fff; outline-offset: 3px; } @media (max-width: 899px) { body.fond-38 .ar-btn.ar-btn-medias { width: 100%; font-size: 16px; } } /* Msg 7947 — version téléphone : photos entières, champs et textes jamais coupés */ @media (max-width: 899px) { /* Une occasion à fêter ? : la photo passe en grand au-dessus du texte (elle était réduite à une vignette de 96 px) */ body.fond-38 .ar-lien-carte { grid-template-columns: 1fr; grid-template-rows: none; row-gap: 4px; padding: 10px 10px 14px; } body.fond-38 .ar-lien-carte img { grid-column: auto; grid-row: auto; width: 100%; height: auto; min-height: 0; aspect-ratio: 4 / 3; border-radius: 10px; margin-bottom: 6px; } body.fond-38 .ar-lien-carte :is(b, span, em) { grid-column: auto; padding: 0 4px; } /* Photo de la section « Venir » : cadre 4:3, la photo verticale n'est plus réduite à une bande */ body.fond-38 .ar-venir .ar-cadre img, body.fond-38 .ar-bloc .ar-duo > .ar-cadre img { height: auto; aspect-ratio: 4 / 3; object-position: center; } /* Blog : la photo de chaque article passe au-dessus du texte (elle était une bande verticale de 110 px) */ body.fond-38 .ar-carte-article { grid-template-columns: 1fr; } body.fond-38 .ar-carte-article img { height: auto; min-height: 0; aspect-ratio: 16 / 9; } /* Champs de saisie : 16 px, sinon l'iPhone zoome au toucher */ body .ar-form :is(input:not([type=radio]):not([type=checkbox]), select, textarea) { font-size: 16px; } /* Petits textes relevés à 12,5 px minimum */ body.fond-38 .v38-note, .m72-vit-note, .v38-avis-n { font-size: 13px; } .v38 .d38-compteurs li > span, .v38-faits li span, .v38-faits dt { font-size: 12.5px; } } @media (max-width: 559px) { /* Formulaires : un champ par ligne, plus de liste déroulante tronquée */ body.fond-38 .ar-form > :is(.ar-ch-date, .ar-ch-choix, .ar-ch-nombre) { grid-column: 1 / -1; } } /* Cartes du blog : fond blanc, donc texte noir et lien bordeaux (le jaune hérité était illisible) */ body.fond-38 a.ar-carte-article, body.fond-38 a.ar-carte-article .ar-carte-article-texte, body.fond-38 a.ar-carte-article .h3 { color: #000; } body.fond-38 a.ar-carte-article :is(time, .date, .lien, small) { color: #8f0000; } /* Msg 7975 : carrousels Bon à savoir, les flèches sortent de la photo (elles étaient rognées par le cadre arrondi) : le cadre passe sur la piste de photos, les flèches et les points se placent dessous, bien visibles */ body .ar-liste-photos .ar-carrousel-cadre { border: 0; border-radius: 0; box-shadow: none; overflow: visible; } body .ar-liste-photos .ar-carrousel.ar-liste-car { border-radius: 14px; box-shadow: 0 22px 44px -22px rgba(0,0,0,.6); } body .ar-liste-photos .ar-carrousel-cadre.glissable .ar-carrousel-nav { position: static; margin-top: 14px; padding: 0; gap: 12px; } body .ar-liste-photos .ar-points { flex-wrap: wrap; gap: 4px; max-width: calc(100% - 120px); } body .ar-liste-photos .ar-points i { width: 7px; height: 7px; border-width: 1px; } body .ar-liste-photos .ar-points i.ici { width: 18px; } /* Msg 7985 : au téléphone, toutes les pages au format EVJF-EVG (essai msg 7980 validé) : plus de vidéo en haut, la photo composée de la page (carte en haut à droite sur fond sombre) occupe le haut, le texte passe dessous */ @media (max-width: 899px) { .v38.v38--evjf-evg .v38-fond { object-position: 50% 0; filter: brightness(.9); } .v38.v38-hautphoto .v38-video { display: none; } .v38.v38-hautphoto .v38-fond { left: 0; width: 100%; height: 520px; object-fit: cover; object-position: 50% 0; filter: brightness(.95); -webkit-mask-image: linear-gradient(#000 70%, transparent); mask-image: linear-gradient(#000 70%, transparent); } } /* Msg 7991 : ordinateur, le titre de « étape par étape » se centre en hauteur sur la boussole au lieu de rester en haut : une ligne souple au-dessus et au-dessous du texte, la boussole couvre toute la hauteur */ @media (min-width: 1000px) { body.fond-38 main > section.et38-bloc > .ar-w { grid-template-rows: 1fr repeat(4, auto) 1fr; row-gap: 0; } body.fond-38 main > section.et38-bloc > .ar-w > :not(.et38):nth-child(1) { grid-row: 2; } body.fond-38 main > section.et38-bloc > .ar-w > :not(.et38):nth-child(2) { grid-row: 3; } body.fond-38 main > section.et38-bloc > .ar-w > :not(.et38):nth-child(3) { grid-row: 4; } body.fond-38 main > section.et38-bloc > .ar-w > :not(.et38):nth-child(4) { grid-row: 5; } body.fond-38 main > section.et38-bloc > .ar-w > .et38 { grid-row: 1 / -1; } } /* Msg 7993 : les liens du haut de page ne réagissaient pas (le fond .v38 hérite de pointer-events: none) : avis Google et TripAdvisor, note Google, bouton pause redeviennent cliquables */ .v38 :is(a, button) { pointer-events: auto; } body .ar-avis-pop-x { background: none; border: 0; cursor: pointer; font-family: inherit; } /* Msg 7998 : téléphone, la photo du haut à GAUCHE (images haut- et evjf-tel déplacées), le texte à droite */ @media (max-width: 899px) { .v38:is(.v38-hautphoto, .v38--evjf-evg) .v38-in { grid-template-columns: 50% minmax(0, 1fr); grid-template-areas: "m m" "v t" "c c"; } } /* Msg 7999 : téléphone, titres, textes et sous-titres un peu plus petits partout (environ -15 % sur les titres, -1 px sur les textes) ; rien ne descend sous 13 px (plancher de lisibilité du msg 7947), les champs de formulaire restent à 16 px (sinon le téléphone zoome) */ @media (max-width: 899px) { body .v38-mot { font-size: clamp(40px, 12.2vw, 120px); } body main h2:not(.v38 h2) { font-size: 21px !important; line-height: 1.12; } body main :is(h3, .h3, summary h3) { font-size: 14px !important; } body main :is(.ar-prose p, .ar-intro p, .ar-faq-tete p, .ar-faq p, blockquote, .ar-coches li, .ar-tous li, .v38-s p, .vl38-texte p, .ar-contact-direct) { font-size: 15px !important; } body main details p, body main details li { font-size: 14.5px !important; } body main .v38-txt p { font-size: clamp(15px, 4.3vw, 19px) !important; } body main .v38-txt h1 { font-size: 12.5px; } body main .d38-compteurs li > b { font-size: 17px; } } /* Msg 8000 : téléphone, la photo du haut plus grande, en portrait, allongée vers le haut (images refaites) ; le texte à droite garde assez de hauteur pour que la carte rouge passe sous la photo. Accueil : plus de grande photo du crâne en fond au téléphone, seule la vidéo reste. */ @media (max-width: 899px) { .v38:is(.v38-hautphoto, .v38--evjf-evg) .v38-txt { min-height: 140px; align-self: start; } .m72-vit .m72-crane { display: none; } } /* Msg 8001 : bouton « Voir la mission en vidéo » sous la boussole, au téléphone seulement, et son pop-up plein écran */ .et38-voir { display: none; } @media (max-width: 899px) { .et38-voir { display: inline-flex; align-items: center; gap: 10px; margin: 18px auto 0; padding: 9px 18px 9px 9px; border: 2px solid #e8a613; border-radius: 999px; background: rgba(0,0,0,.35); color: #fff; font: 700 14px/1.2 "Montserrat", "Montserrat Repli", sans-serif; cursor: pointer; } .et38-bloc .ar-w { display: flex; flex-direction: column; } .et38-bloc .ar-w > :not(.et38-voir) { align-self: stretch; } .et38-voir-i { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: #e8a613; color: #000; } .et38-voir-i svg { margin-left: 2px; } } .et38-pop { width: min(94vw, 460px); max-height: 92vh; padding: 0; border: 0; border-radius: 16px; background: #000; overflow: hidden; } .et38-pop::backdrop { background: rgba(0,0,0,.85); } .et38-pop video { display: block; width: 100%; height: auto; max-height: 92vh; object-fit: contain; background: #000; } .et38-pop-x { position: absolute; top: 8px; right: 8px; z-index: 2; width: 38px; height: 38px; border: 0; border-radius: 50%; background: rgba(0,0,0,.6); color: #fff; font: 400 26px/1 "Montserrat", sans-serif; cursor: pointer; } .et38-voir:focus-visible, .et38-pop-x:focus-visible { outline: 3px solid #fff; outline-offset: 2px; } /* Msg 8007 : téléphone, plus aucun texte sur la photo : le grand titre passe lui aussi dans la colonne de droite, à côté de la photo (à gauche), sur plusieurs lignes ; la carte rouge passe sous la photo */ @media (max-width: 899px) { .v38:is(.v38-hautphoto, .v38--evjf-evg) .v38-in { grid-template-areas: "v m" "v t" "c c"; grid-template-rows: auto auto; align-items: start; } .v38:is(.v38-hautphoto, .v38--evjf-evg) .v38-mot { font-size: clamp(26px, 8.2vw, 40px); line-height: .95; margin: 6px 0 8px; overflow-wrap: anywhere; } .v38:is(.v38-hautphoto, .v38--evjf-evg) .v38-mot span { display: block; } .v38:is(.v38-hautphoto, .v38--evjf-evg) .v38-txt { min-height: 135px; padding-bottom: 0; } } /* Msg 8012 : téléphone, le titre de la page centré en haut sur toute la largeur, la photo juste dessous à gauche (une vraie image dans la page, plus l'image de fond), le texte à droite */ .v38-ph { display: none; } @media (max-width: 899px) { .v38:is(.v38-hautphoto, .v38--evjf-evg) { background: #000; } .v38:is(.v38-hautphoto, .v38--evjf-evg) picture, .v38:is(.v38-hautphoto, .v38--evjf-evg) .v38-fond { display: none; } .v38:is(.v38-hautphoto, .v38--evjf-evg) .v38-in { grid-template-columns: 48% minmax(0, 1fr); grid-template-areas: "m m" "v t" "c c"; grid-template-rows: auto auto; column-gap: 14px; align-items: start; } .v38:is(.v38-hautphoto, .v38--evjf-evg) .v38-mot { text-align: center; font-size: clamp(30px, 9.6vw, 44px); line-height: .95; margin: 6px 0 14px; overflow-wrap: normal; } .v38:is(.v38-hautphoto, .v38--evjf-evg) .v38-mot span { display: inline; } .v38:is(.v38-hautphoto, .v38--evjf-evg) .v38-ph { display: block; grid-area: v; margin: 0; } .v38:is(.v38-hautphoto, .v38--evjf-evg) .v38-ph img { display: block; width: 100%; height: auto; aspect-ratio: 360 / 420; object-fit: cover; border-radius: 12px; box-shadow: 0 14px 30px -16px rgba(0,0,0,.8); } .v38:is(.v38-hautphoto, .v38--evjf-evg) .v38-txt { min-height: 0; align-self: center; } } /* Msg 8010 : téléphone, le menu un peu plus petit (liens du panneau, boutons Menu et Réserver) */ @media (max-width: 899px) { /* msg 9022 : tout le menu tient dans un écran sans défiler, la taille suit aussi la hauteur */ body .p38-panneau li a { font-size: clamp(17px, min(7vw, calc((100vh - 290px) / 15.5)), 34px); padding: clamp(2px, calc((100vh - 290px) / 100), 7px) 0; } body .p38-panneau .p38-petits a { font-size: 14px; } body .p38-top a.p38-resa, body .p38-menu-b { font-size: 14px; min-height: 42px; } } /* Msg 8044 : EVJF-EVG au téléphone, la photo des mariés plus grande (image recadrée sur les deux) */ @media (max-width: 899px) { .v38.v38--evjf-evg .v38-in { grid-template-columns: 58% minmax(0, 1fr); column-gap: 12px; } } /* Msg 8046 : logos des partenaires (bloc texte, champ logos) sur des cartes blanches */ .pt38-logos { list-style: none; margin: 22px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 14px; } .pt38-logos li { background: #fff; border-radius: 14px; padding: 16px 22px; display: flex; align-items: center; } .pt38-logos img { display: block; height: 58px; width: auto; max-width: 100%; } @media (max-width: 899px) { .pt38-logos li { flex: 1 1 100%; justify-content: center; } .pt38-logos img { height: 46px; } } /* Msg 8131 : alléger le chargement sur téléphone et tablette. Les sections sous le premier écran ne sont dessinées qu'en approchant de l'écran (content-visibility) : la mesure du 11/10 montrait le téléphone peindre toute la page, 7 700 px de haut, d'un seul coup au chargement. Rien ne change à l'œil. Pas à l'ordinateur : l'ajustement des titres sur une ligne (page38.js) mesure chaque titre au chargement. */ @media (max-width: 899px) { body > section, body > footer, main > .duo38 ~ section { content-visibility: auto; contain-intrinsic-size: auto 800px; } } /* Formulaires (msg 8130-8166) : piège à robots caché, message d'état après envoi, version « appel ou mail » sans relais */ .ar-piege { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .ar-form-etat { margin: 12px 0 0; padding: 12px 14px; border-radius: 8px; font-size: 15px; line-height: 1.45; } .ar-form-etat.ok { background: #e7f4e4; color: #1d4d17; } .ar-form-etat.ko { background: #fbe6e3; color: #8f0000; } .ar-form-etat a { color: inherit; font-weight: 700; } .ar-form-repli { gap: 12px; align-content: start; } .ar-form-repli p { margin: 0; line-height: 1.5; } .ar-form-repli .ar-btn { margin-top: 4px; justify-self: start; } body.fond-38 .f38-fonce .ar-form-repli .ar-btn-2, body.fond-38 .ar-form-repli .ar-btn-2 { background: transparent; color: #8f0000; box-shadow: inset 0 0 0 2px #8f0000; } /* ---------- Formules en cartes compactes (msg 8222) : remplacent « Réservez en 3 temps » sur Venir jouer, Anniversaires, EVJF-EVG ---------- */ .fc38 .fc38-intro { max-width: 60ch; margin: 8px 0 0; } .fc38-liste { display: grid; gap: 14px; margin-top: 22px; } .fc38-carte { display: flex; flex-direction: column; gap: 12px; background: #fff; color: #000; border-radius: 14px; padding: 14px; box-shadow: 0 18px 36px -22px rgba(0,0,0,.6); } .fc38-tete { display: grid; grid-template-columns: 92px 1fr; gap: 12px; align-items: center; } .fc38-photo { width: 92px; height: 92px; object-fit: cover; border-radius: 10px; display: block; } .fc38-etiquette { display: inline-block; font-size: 12px; font-weight: 700; color: #8f0000; margin-bottom: 2px; } body.fond-38 main .fc38-carte h3 { margin: 0; font: 900 19px/1.15 "Montserrat", "Montserrat Repli", sans-serif; text-transform: none; letter-spacing: -.01em; color: #000; text-shadow: none; } .fc38-prix { margin: 4px 0 0; font-weight: 800; font-size: 15px; color: #8f0000; } .fc38-pictos { display: flex; flex-wrap: wrap; gap: 6px 12px; margin: 0; padding: 10px 0; list-style: none; border-top: 1px solid rgba(0,0,0,.12); border-bottom: 1px solid rgba(0,0,0,.12); } body.fond-38 main .fc38-pictos li { display: flex; align-items: center; gap: 5px; margin: 0; font-size: 13px; line-height: 1.2; font-weight: 700; } .fc38-pictos svg { width: 18px; height: 18px; flex: none; fill: none; stroke: #8f0000; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .fc38-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .fc38-texte { margin: 0; font-size: 14.5px; line-height: 1.45; } .fc38-choix { margin: 0; font-size: 14px; line-height: 1.4; } .fc38-inclus { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 4px 14px; } body.fond-38 main .fc38-inclus li { position: relative; margin: 0; padding-left: 18px; font-size: 13.5px; line-height: 1.35; font-weight: 600; } .fc38-inclus li::before { content: ""; position: absolute; left: 2px; top: .28em; width: 10px; height: 5px; border-left: 2px solid #8f0000; border-bottom: 2px solid #8f0000; transform: rotate(-45deg); } .fc38-note { margin: 0; font-size: 13px; color: rgba(0,0,0,.7); } .fc38-btn { margin-top: auto; display: block; text-align: center; background: #8f0000; color: #fff; font-weight: 800; font-size: 16px; text-decoration: none; padding: 13px 18px; border-radius: 999px; } .fc38-btn:hover { background: #000; } .fc38-btn:focus-visible { outline: 3px solid #e8a613; outline-offset: 2px; } .fc38-bookeo { margin: 16px 0 0; font-size: 13.5px; opacity: .85; } @media (min-width: 760px) { .fc38-liste { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; } .fc38-carte { padding: 0 0 18px; overflow: hidden; } .fc38-carte > :not(.fc38-tete) { margin-left: 18px; margin-right: 18px; } .fc38-tete { grid-template-columns: 1fr; gap: 14px; } .fc38-photo { width: 100%; height: 190px; border-radius: 0; } .fc38-nom { padding: 0 18px; } } @media (min-width: 1100px) { .fc38-n3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } } /* Présentation 2 : billets sombres (msg 8228, modèle envoyé msg 8229 : photo qui se fond dans la carte, titre en capitales, pictogrammes dans des pastilles, prix compris) */ .fc38-billets .fc38-carte { background: #000; color: #fff; border: 1px solid rgba(255,255,255,.14); padding: 0 0 18px; overflow: hidden; gap: 12px; } .fc38-billets .fc38-carte > :not(.fc38-tete) { margin-left: 18px; margin-right: 18px; } .fc38-billets .fc38-tete { display: block; } .fc38-billets .fc38-photo { width: 100%; height: 220px; border-radius: 0; -webkit-mask-image: linear-gradient(#000 55%, transparent); mask-image: linear-gradient(#000 55%, transparent); } .fc38-billets .fc38-nom { position: relative; margin-top: -34px; padding: 0 18px; } body.fond-38 main .fc38-billets .fc38-carte h3 { font: 400 30px/1.02 "Anton", "Anton Repli", sans-serif !important; text-transform: uppercase; letter-spacing: .01em; color: #fff; } .fc38-billets .fc38-etiquette { color: #e8a613; } .fc38-billets .fc38-prix { display: none; } .fc38-billets .fc38-pictos { border: 0; padding: 2px 0; gap: 10px 16px; } body.fond-38 main .fc38-billets .fc38-pictos li { font-size: 14px; font-weight: 600; gap: 8px; } .fc38-billets .fc38-pictos svg { width: 30px; height: 30px; padding: 6px; border-radius: 50%; background: #e8a613; stroke: #000; stroke-width: 2; } .fc38-billets .fc38-texte { color: rgba(255,255,255,.86); } .fc38-billets .fc38-inclus li::before { border-color: #e8a613; } .fc38-billets .fc38-note { color: rgba(255,255,255,.62); } .fc38-billets .fc38-btn { background: #e8a613; color: #000; text-transform: uppercase; font: 400 19px/1 "Anton", "Anton Repli", sans-serif; letter-spacing: .04em; padding: 16px 18px; } .fc38-billets .fc38-btn:hover { background: #fff; } @media (min-width: 760px) { .fc38-billets .fc38-photo { height: 250px; } .fc38-billets .fc38-carte { padding-bottom: 20px; } } /* Présentation 3 : lignes, le détail se déplie (msg 8228) */ .fc38-lignes { display: grid; gap: 10px; margin-top: 22px; } .fc38-ligne { display: grid; gap: 10px; background: #fff; color: #000; border-radius: 14px; padding: 14px; box-shadow: 0 18px 36px -22px rgba(0,0,0,.6); } .fc38-ligne-tete { display: grid; grid-template-columns: 72px 1fr; gap: 12px; align-items: center; } .fc38-ligne .fc38-photo { width: 72px; height: 72px; object-fit: cover; border-radius: 10px; display: block; } body.fond-38 main .fc38-ligne h3 { margin: 0; font: 900 18px/1.15 "Montserrat", "Montserrat Repli", sans-serif; text-transform: none; color: #000; text-shadow: none; } .fc38-plus summary { list-style: none; cursor: pointer; font-weight: 800; font-size: 14px; color: #8f0000; display: flex; align-items: center; gap: 8px; } .fc38-plus summary::-webkit-details-marker { display: none; } .fc38-plus summary::before { content: "+"; display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; border: 2px solid #8f0000; font-size: 16px; line-height: 1; } .fc38-plus[open] summary::before { content: "−"; } .fc38-plus > div { display: grid; gap: 10px; padding-top: 10px; } .fc38-ligne .fc38-btn { margin-top: 0; } @media (min-width: 900px) { .fc38-ligne { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) auto; align-items: center; column-gap: 24px; padding: 16px 20px; } .fc38-ligne-tete { grid-column: 1; grid-row: 1; grid-template-columns: 96px 1fr; } .fc38-ligne .fc38-photo { width: 96px; height: 72px; } .fc38-ligne .fc38-pictos { grid-column: 2; grid-row: 1; border: 0; padding: 0; } .fc38-ligne .fc38-btn { grid-column: 3; grid-row: 1; padding: 12px 30px; } .fc38-ligne .fc38-plus { grid-column: 1 / -1; grid-row: 2; } } /* Présentation 4 : sélecteur, une formule à la fois (msg 8228) */ .fc38-sel { margin-top: 22px; } .fc38-radio { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; } .fc38-pastilles { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 8px; margin-bottom: 14px; } .fc38-pastilles label { display: grid; gap: 2px; align-content: center; text-align: center; padding: 10px 8px; border: 2px solid rgba(255,255,255,.55); border-radius: 14px; cursor: pointer; transition: background .2s, color .2s; } .fc38-pastilles b { font-size: 13px; line-height: 1.2; } .fc38-pastilles small { font-size: 12px; opacity: .85; } .fc38-panneau { display: none; background: #fff; color: #000; border-radius: 14px; overflow: hidden; box-shadow: 0 22px 44px -22px rgba(0,0,0,.6); } .fc38-panneau .fc38-photo { width: 100%; height: 200px; object-fit: cover; display: block; } .fc38-panneau-c { display: grid; gap: 12px; padding: 16px; align-content: start; } body.fond-38 main .fc38-panneau h3 { margin: 0; font: 400 30px/1.02 "Anton", "Anton Repli", sans-serif; text-transform: uppercase; color: #000; text-shadow: none; } .fc38-panneau .fc38-prix { margin: 0; font-size: 17px; } .fc38-r1:checked ~ .fc38-pastilles .fc38-p1 { background: #e8a613; border-color: #e8a613; color: #000; } .fc38-r1:checked ~ .fc38-pan1 { display: grid; } .fc38-r1:focus-visible ~ .fc38-pastilles .fc38-p1 { outline: 3px solid #fff; outline-offset: 2px; } .fc38-r2:checked ~ .fc38-pastilles .fc38-p2 { background: #e8a613; border-color: #e8a613; color: #000; } .fc38-r2:checked ~ .fc38-pan2 { display: grid; } .fc38-r2:focus-visible ~ .fc38-pastilles .fc38-p2 { outline: 3px solid #fff; outline-offset: 2px; } .fc38-r3:checked ~ .fc38-pastilles .fc38-p3 { background: #e8a613; border-color: #e8a613; color: #000; } .fc38-r3:checked ~ .fc38-pan3 { display: grid; } .fc38-r3:focus-visible ~ .fc38-pastilles .fc38-p3 { outline: 3px solid #fff; outline-offset: 2px; } .fc38-r4:checked ~ .fc38-pastilles .fc38-p4 { background: #e8a613; border-color: #e8a613; color: #000; } .fc38-r4:checked ~ .fc38-pan4 { display: grid; } .fc38-r4:focus-visible ~ .fc38-pastilles .fc38-p4 { outline: 3px solid #fff; outline-offset: 2px; } @media (min-width: 900px) { .fc38-pastilles { grid-auto-flow: row; grid-template-columns: repeat(auto-fit, minmax(180px, 260px)); } .fc38-pastilles b { font-size: 15px; } .fc38-panneau { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .fc38-panneau .fc38-photo { height: 100%; min-height: 440px; } .fc38-panneau-c { padding: 30px 32px; } .fc38-panneau .fc38-btn { justify-self: start; padding: 14px 40px; } } @media (prefers-reduced-motion: reduce) { .fc38-pastilles label { transition: none; } } /* Téléphone : les titres de carte gardent leur taille (la règle générale des h3 à 14 px, msg 7999, ne s'applique pas ici) */ @media (max-width: 899px) { body.fond-38 main .fc38-carte h3, body.fond-38 main .fc38-ligne h3 { font-size: 17px !important; } body.fond-38 main .fc38-billets .fc38-carte h3 { font-size: 27px !important; } body.fond-38 main .fc38-panneau h3 { font-size: 27px !important; } } /* Présentation 2 bis : au plus près du modèle du msg 8229 (pictos sur une ligne, chiffres courts, texte coupé, « En savoir plus ») */ .fc38-billets2 .fc38-pictos { display: grid; grid-template-columns: repeat(2, max-content); gap: 10px 22px; } body.fond-38 main .fc38-billets2 .fc38-pictos li { font-size: 13px; gap: 6px; white-space: nowrap; } /* Msg 8873 : « Planche apéritive incluse » coupé au téléphone → la ligne repas prend toute la largeur et peut passer à la ligne */ body.fond-38 main .fc38-billets2 .fc38-pictos li.fc38-pic-repas { grid-column: 1 / -1; white-space: normal; } .fc38-billets2 .fc38-pictos svg { width: 28px; height: 28px; padding: 5px; } .fc38-billets2 .fc38-texte { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden; } .fc38-billets2 .fc38-carte:has(.fc38-savoir[open]) .fc38-texte { -webkit-line-clamp: unset; display: block; } .fc38-savoir summary { list-style: none; cursor: pointer; text-align: center; padding: 14px 18px; border-radius: 999px; background: #8f0000; color: #fff; text-transform: uppercase; font: 400 19px/1 "Anton", "Anton Repli", sans-serif; letter-spacing: .04em; } .fc38-savoir summary::-webkit-details-marker { display: none; } .fc38-savoir[open] summary { background: transparent; box-shadow: inset 0 0 0 2px rgba(255,255,255,.6); } .fc38-savoir summary:focus-visible { outline: 3px solid #e8a613; outline-offset: 2px; } .fc38-savoir > div { display: grid; gap: 10px; padding-top: 14px; } .fc38-billets2 .fc38-btn { margin-top: 0; } .fc38-billets2 .fc38-carte { gap: 14px; } .fc38-billets2 .fc38-carte > .fc38-btn { margin-top: -2px; } @media (min-width: 760px) { .fc38-billets2 .fc38-carte > .fc38-savoir { margin-top: auto; } } /* Msg 8242 : chaque formule bien distincte. Cadre A (cadre: bordeaux) : section bordeaux pleine, cartes noires cerclées de jaune. Cadre B (cadre: couleurs) : section noire, chaque carte cerclée de sa couleur (jaune, bordeaux, blanc). */ body.fond-38 main section.fc38-cadre-bordeaux, body.fond-38 main > .v38 + section.f38.fc38-cadre-bordeaux { background: #8f0000 !important; background-image: none !important; } .fc38-cadre-bordeaux .fc38-carte { border: 2px solid #e8a613; box-shadow: 0 24px 40px -18px rgba(0,0,0,.75); } .fc38-cadre-bordeaux .fc38-bookeo { color: #fff; opacity: .9; } .fc38-cadre-couleurs .fc38-carte { border: 3px solid #e8a613; box-shadow: 0 0 0 1px rgba(0,0,0,.6), 0 24px 40px -18px rgba(0,0,0,.8); } .fc38-cadre-couleurs .fc38-c-bordeaux { border-color: #8f0000; } .fc38-cadre-couleurs .fc38-c-moutarde { border-color: #fff; } .fc38-cadre-bordeaux .fc38-liste, .fc38-cadre-couleurs .fc38-liste { gap: 22px; } @media (min-width: 760px) { .fc38-cadre-bordeaux .fc38-liste, .fc38-cadre-couleurs .fc38-liste { gap: 26px; } } /* Msg 8259 : l'étiquette au-dessus du nom (« Billet CSE », « L'aventure »…) un peu plus grande */ .fc38-billets2 .fc38-etiquette { font-size: 15px; letter-spacing: .01em; margin-bottom: 4px; } /* Msg 8269 : accueil, un bouton par formule à la place de « Réservez en 3 temps » ; la mission expliquée en quelques lignes */ .fa38 .r3-titre { margin-bottom: 16px; } .fa38-l { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; } .fa38-c { display: grid; grid-template-columns: 92px 1fr; grid-template-areas: "ph t" "b b"; gap: 12px 14px; align-items: center; padding: 12px; border: 2px solid #e8a613; border-radius: 14px; background: #000; color: #fff; } .fa38-c img { grid-area: ph; width: 92px; height: 92px; object-fit: cover; border-radius: 10px; } .fa38-t { grid-area: t; min-width: 0; } .fa38-e { margin: 0; font: 700 13px/1.3 "Montserrat", "Montserrat Repli", sans-serif; color: #e8a613; } .fa38-t h3 { margin: 2px 0 4px; font: 400 24px/1.05 "Anton", "Anton Repli", sans-serif; text-transform: uppercase; color: #fff; } .fa38-t p:last-child { margin: 0; font-size: 14px; line-height: 1.4; color: rgba(255,255,255,.85); } .fa38-btn { grid-area: b; display: flex; align-items: center; justify-content: center; min-height: 46px; padding: 0 16px; border-radius: 999px; background: #e8a613; color: #000; font: 400 18px/1 "Anton", "Anton Repli", sans-serif; text-transform: uppercase; text-decoration: none; letter-spacing: .01em; } .fa38-btn:hover { background: #fff; } .fa38-btn:focus-visible { outline: 3px solid #fff; outline-offset: 3px; } .m72-mi { margin: 6px auto 14px; max-width: 42ch; font-size: 15px; line-height: 1.5; color: rgba(255,255,255,.88); text-align: center; } @media (min-width: 1000px) { .m72-mi { font-size: 14px; margin: 4px 0 6px; } .fa38-c { grid-template-columns: 76px 1fr; padding: 10px; gap: 10px 12px; } .fa38-c img { width: 76px; height: 76px; } .fa38-t h3 { font-size: 21px; } .fa38-t p:last-child { font-size: 13px; } .fa38-btn { min-height: 40px; font-size: 16px; } } @media (max-width: 999px) { .m72-resa-carte .fa38 .r3-titre { padding-right: 118px; } } /* Msg 8292 : cases à cocher sous un intitulé (âge des enfants), une par ligne */ body .ar-form .ar-ch-cases { grid-template-columns: 1fr; } body .ar-form .ar-ch-cases label { align-items: flex-start; line-height: 1.4; } body .ar-form .ar-ch-cases input { margin-top: 1px; } /* Msg 8300 : photo à garder visible jusqu'en bas (ados et gâteau) : fondu plus court, cadrage vers le bas */ .fc38-billets .fc38-photo.fc38-photo-net { -webkit-mask-image: linear-gradient(#000 74%, transparent); mask-image: linear-gradient(#000 74%, transparent); object-position: 50% 50%; } /* msg 8313 : l'âge sous le nom de la formule, même police que le titre, plus petit */ body.fond-38 main .fc38-billets .fc38-carte .fc38-sous { margin: 4px 0 0; font: 400 19px/1.1 "Anton", "Anton Repli", sans-serif; text-transform: uppercase; letter-spacing: .02em; color: #e8a613; } /* Msg 8328 : compte à rebours des vacances, bande fine en tête du bloc collé en haut de l'écran (accueil et pages) */ .rb38 { display: flex; align-items: center; justify-content: center; gap: 6px 14px; flex-wrap: wrap; padding: 6px 16px; background: #8f0000; color: #fff; text-decoration: none; font: 600 13px/1.2 "Montserrat", "Montserrat Repli", sans-serif; } .rb38-n { display: inline-flex; align-items: baseline; gap: 2px; white-space: nowrap; } .rb38-n b { font: 400 17px/1 "Anton", "Anton Repli", sans-serif; color: #e8a613; font-variant-numeric: tabular-nums; min-width: 1.15em; text-align: right; } .rb38-n i { font-style: normal; font-size: 11px; margin: 0 6px 0 2px; opacity: .85; } .rb38-n i:last-child { margin-right: 0; } .rb38-l { text-decoration: underline; text-underline-offset: 3px; } .rb38:hover .rb38-l, .rb38:focus-visible .rb38-l { color: #e8a613; } .rb38:focus-visible { outline: 2px solid #e8a613; outline-offset: -2px; } @media (max-width: 599px) { .rb38 { gap: 4px 8px; padding: 5px 12px; font-size: 12px; } .rb38-l { display: none; } .rb38-n b { font-size: 15px; } } /* Ordinateur : le logo est posé en absolu depuis le haut du bloc collé ; il descend sous la bande du compte à rebours */ @media (min-width: 1100px) { .m72-fixe:has(> .rb38:not([hidden])) .m72-logo, .p38-fixe:has(> .rb38:not([hidden])) .p38-logo { top: calc(6px + var(--rbh, 30px)); } .m72-fixe.m72-defile:has(> .rb38:not([hidden])) .m72-logo, .p38-fixe.p38-defile:has(> .rb38:not([hidden])) .p38-logo { top: calc(4px + var(--rbh, 30px)); } } /* Msg 8873 (« que rien ne soit coupé ») : entre 900 et 1199 px, les chiffres du haut des pages entreprise restaient sur une ligne (nowrap) et la plus longue légende sortait du cadre de 40 à 210 px → chaque chiffre prend sa part et sa légende passe à la ligne */ @media (min-width: 900px) and (max-width: 1199px) { .v38 .d38-compteurs li, .v38 .d38-compteurs li:last-child:nth-child(odd) { flex: 1 1 0; white-space: normal; } }