/* Theme Name: Astra Child — La Villa du Cinéma Theme URI: https://lavilladucinema.fr Description: Thème enfant d'Astra pour La Villa du Cinéma. Ne contient aucun style de charte — la charte vit dans le Customizer Astra et dans Elementor. Ce fichier ne porte que ce qu'Elementor gratuit ne sait pas faire. Author: Adweb Conseil Author URI: https://adweb-conseil.fr Template: astra Version: 1.0.0 License: GPL-2.0-or-later Text Domain: astra-child-villa-du-cinema */ /* ========================================================================== 1. Header transparent au-dessus du hero, fond crème au défilement -------------------------------------------------------------------------- Le header transparent et le sticky sont des modules Astra Pro, et les effets sticky d'Elementor sont dans Elementor Pro. Ces quelques règles les remplacent. La classe .vdc-scrolled est posée par child.js. ========================================================================== */ /* ehf-header est une classe posée sur par UAE : le header lui-même est #masthead. On cible donc body. #masthead, sans descendance. */ body.vdc-header-transparent #masthead { position: fixed; top: 0; left: 0; right: 0; z-index: 99; background: transparent; border-bottom: 1px solid transparent; transition: background .4s ease, border-color .4s ease; } /* La barre d'admin décale le header fixe. */ body.vdc-header-transparent.admin-bar #masthead { top: 32px; } body.vdc-header-transparent.vdc-scrolled #masthead { background: rgba(246, 240, 229, .92); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-bottom-color: rgba(44, 38, 27, .13); } /* Pages intérieures : header opaque, en flux normal. */ body:not(.vdc-header-transparent) #masthead { background: var(--vdc-bg, #f6f0e5); border-bottom: 1px solid rgba(44, 38, 27, .13); } @media (max-width: 782px) { body.vdc-header-transparent.admin-bar #masthead { top: 46px; } } /* ========================================================================== 2. Bloc de coordonnées — rendu par le shortcode [vdc_coordonnees] -------------------------------------------------------------------------- Le style vit ici, avec le balisage que produit le shortcode, plutôt que dans la page : les coordonnées s'affichent à l'identique partout où elles sont appelées. ========================================================================== */ .vdc-info { margin-top: 26px; } .vdc-info .vdc-row { padding: 16px 0; border-bottom: 1px solid var(--vdc-line, rgba(44, 38, 27, .13)); } .vdc-info .vdc-t { font-family: Montserrat, sans-serif; font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--vdc-muted-2, #948977); } .vdc-info .vdc-v { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 19px; color: var(--vdc-ink, #2b2620); margin-top: 3px; } .vdc-info .vdc-v a { color: inherit; text-decoration: none; } .vdc-info .vdc-v a:hover { color: var(--vdc-gold-bright, #b3872f); } /* ========================================================================== 2 bis. Marque du header — ne doit jamais se replier -------------------------------------------------------------------------- Le widget HTML qui porte la marque est un enfant flex : sans consigne, il se comprime quand le menu s'élargit et le nom passe sur plusieurs lignes. Ces règles vivent ici et non dans le gabarit, pour rester valables même après une modification du header dans Elementor. ========================================================================== */ .vdc-brand { flex: none; } .vdc-brand-name, .vdc-brand-name small { white-space: nowrap; } /* Empêche le conteneur du widget de rétrécir sous sa largeur naturelle. */ .elementor-widget-html:has(.vdc-brand) { flex: 0 0 auto; min-width: max-content; } /* ========================================================================== 3. Blocs HTML générés — styles mutualisés -------------------------------------------------------------------------- Ces règles habillent le balisage produit par les widgets HTML des pages. Elles vivent ici et non dans chaque widget : sinon les mêmes déclarations sont réémises à chaque carte (9 fois sur la page Tarifs, par exemple). ========================================================================== */ /* --- Bandeau défilant --- */ .vdc-strip { overflow: hidden; } .vdc-strip-track { display: flex; gap: 56px; white-space: nowrap; padding: 18px 0; width: max-content; animation: vdc-scrollx 34s linear infinite; } .vdc-strip-track span { font-family: 'Playfair Display', Georgia, serif; font-style: italic; font-size: 18px; color: var(--vdc-muted, #6c6355); display: inline-flex; align-items: center; gap: 56px; } .vdc-strip-track span::after { content: "\2726"; color: var(--vdc-gold, #9e7727); font-style: normal; font-size: 11px; } @keyframes vdc-scrollx { to { transform: translateX(-50%); } } /* --- Pastilles d'équipement --- */ .vdc-tags { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 14px; } .vdc-tags span { font-family: Montserrat, sans-serif; font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--vdc-muted-2, #948977); border: 1px solid var(--vdc-line, rgba(44, 38, 27, .13)); padding: 6px 11px; border-radius: 20px; } .vdc-tags-lg { margin-top: 24px; } .vdc-tags-lg span { font-size: 11.5px; padding: 9px 15px; } /* --- Configurations de salle --- */ .vdc-configs { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--vdc-line, rgba(44, 38, 27, .13)); } .vdc-configs li { display: flex; justify-content: space-between; align-items: center; padding: 15px 0; border-bottom: 1px solid var(--vdc-line, rgba(44, 38, 27, .13)); font-family: Montserrat, sans-serif; font-size: 14px; color: var(--vdc-muted, #6c6355); } .vdc-configs b { font-family: 'Playfair Display', Georgia, serif; font-size: 20px; font-weight: 500; color: var(--vdc-ink, #2b2620); } /* --- Cartes tarifaires --- */ .vdc-rib { display: inline-block; font-family: Montserrat, sans-serif; font-size: 9px; letter-spacing: .24em; text-transform: uppercase; color: var(--vdc-on-gold, #221a0b); background: var(--vdc-gold, #9e7727); padding: 5px 10px; border-radius: 2px; margin-bottom: 12px; } .vdc-amt { font-family: 'Playfair Display', Georgia, serif; font-size: 40px; font-weight: 500; line-height: 1; color: var(--vdc-gold-bright, #b3872f); margin-top: 4px; } .vdc-amt small { font-family: Montserrat, sans-serif; font-size: 14px; color: var(--vdc-muted, #6c6355); letter-spacing: .05em; margin-left: 6px; } .vdc-pbtn { display: flex; justify-content: space-between; align-items: center; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--vdc-line, rgba(44, 38, 27, .13)); font-family: Montserrat, sans-serif; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--vdc-gold, #9e7727); text-decoration: none; transition: color .3s; } .vdc-pbtn:hover { color: var(--vdc-gold-bright, #b3872f); } .vdc-note { text-align: center; margin-top: 30px; font-size: 12.5px; color: var(--vdc-muted-2, #948977); } /* --- Moteur de réservation Amenitiz -------------------------------------- Le code d'intégration du client est repris tel quel dans la page. Il porte width="1654px", une largeur fixe qui déborde de tout écran normal : c'est la seule chose qu'on neutralise ici. La hauteur de 2016 px vient de lui et reste maîtresse — Amenitiz n'annonce pas sa hauteur (aucun postMessage), donc aucun calcul n'est possible depuis la page. Le moteur s'allonge quand il est étroit, d'où les paliers en dessous. -------------------------------------------------------------------------- */ .vdc-moteur { border: 1px solid var(--e-global-color-vdcline, rgba(44, 38, 27, .13)); border-radius: 2px; overflow: hidden; background: var(--e-global-color-vdccard, #f3ecdc); } .vdc-moteur iframe { display: block; width: 100%; max-width: 100%; height: 2016px; border: 0; } @media (max-width: 1024px) { .vdc-moteur iframe { height: 2200px; } } @media (max-width: 767px) { .vdc-moteur iframe { height: 2600px; } } /* --- Avis --- */ .vdc-stars { text-align: center; font-size: 20px; letter-spacing: .3em; color: var(--vdc-gold, #9e7727); } .vdc-rating { text-align: center; font-family: Montserrat, sans-serif; font-size: 12px; letter-spacing: .22em; text-transform: uppercase; color: var(--vdc-muted, #6c6355); } .vdc-rating b { font-family: 'Playfair Display', Georgia, serif; font-size: 15px; color: var(--vdc-gold-bright, #b3872f); } .vdc-authors { display: flex; gap: 22px; justify-content: center; flex-wrap: wrap; margin-top: 20px; font-family: Montserrat, sans-serif; font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--vdc-muted-2, #948977); } /* --- Galerie mosaïque --- */ .vdc-gallery { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; } .vdc-frame { position: relative; display: block; overflow: hidden; aspect-ratio: 3/4; border: 1px solid var(--vdc-line, rgba(44, 38, 27, .13)); border-radius: 2px; transition: transform .4s, border-color .4s; text-decoration: none; } .vdc-frame.vdc-wide { grid-column: span 2; aspect-ratio: 3/2; } .vdc-frame:hover, .vdc-frame:focus-visible { transform: scale(1.015); border-color: var(--vdc-gold, #9e7727); } .vdc-frame img { width: 100%; height: 100%; object-fit: cover; display: block; } .vdc-sprock { position: absolute; left: 0; right: 0; top: 0; height: 13px; z-index: 2; opacity: .4; pointer-events: none; background: repeating-linear-gradient(90deg, transparent 0 8px, rgba(70, 58, 34, .3) 8px 12px); } .vdc-sprock-b { top: auto; bottom: 0; } .vdc-cap { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; padding: 34px 14px 14px; font-family: Montserrat, sans-serif; font-size: 10px; letter-spacing: .24em; text-transform: uppercase; color: var(--vdc-bg, #f6f0e5); background: linear-gradient(transparent, rgba(35, 30, 22, .72)); opacity: 0; transition: opacity .35s; } .vdc-frame:hover .vdc-cap, .vdc-frame:focus-visible .vdc-cap { opacity: 1; } @media (max-width: 1024px) { .vdc-gallery { grid-template-columns: repeat(2, 1fr); } .vdc-frame.vdc-wide { grid-column: span 2; } } @media (max-width: 640px) { .vdc-gallery { grid-template-columns: 1fr; } .vdc-frame.vdc-wide { grid-column: span 1; aspect-ratio: 3/4; } } @media (prefers-reduced-motion: reduce) { .vdc-strip-track { animation: none; } .vdc-frame { transition: none; } } /* ========================================================================== 4. Contact Form 7 — habillage aligné sur la charte -------------------------------------------------------------------------- CF7 sort un HTML volontairement nu. On le raccorde aux variables globales définies dans le Customizer Astra plutôt que d'écrire des couleurs en dur. ========================================================================== */ .wpcf7-form .vdc-field { margin-bottom: 20px; } .wpcf7-form .vdc-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .wpcf7-form label { display: block; font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; margin-bottom: 9px; } .wpcf7-form input[type="text"], .wpcf7-form input[type="email"], .wpcf7-form input[type="tel"], .wpcf7-form textarea, .wpcf7-form select { width: 100%; padding: 14px 16px; font-size: 14px; font-weight: 300; border: 1px solid rgba(44, 38, 27, .13); border-radius: 2px; background: var(--vdc-bg, #f6f0e5); transition: border-color .3s; } .wpcf7-form input:focus, .wpcf7-form textarea:focus, .wpcf7-form select:focus { outline: none; border-color: var(--vdc-gold, #9e7727); } .wpcf7-form textarea { min-height: 120px; resize: vertical; } /* Le bouton d'envoi suit le bouton principal d'Elementor : meme silhouette, meme bascule or -> encre au survol. Elementor ne style pas l'interieur d'un shortcode, mais il publie sa charte en variables CSS sur . On s'y branche plutot que de recopier des valeurs : regler la globale « Boutons » ou une couleur du kit deplace aussi ce bouton-la. Les valeurs de repli ne servent que si Elementor est desactive. */ .wpcf7-form input[type="submit"] { width: 100%; padding: 18px 40px; font-family: var(--e-global-typography-vdcbtn-font-family, "Montserrat"), sans-serif; font-size: var(--e-global-typography-vdcbtn-font-size, 13px); font-weight: var(--e-global-typography-vdcbtn-font-weight, 600); font-style: var(--e-global-typography-vdcbtn-font-style, italic); letter-spacing: var(--e-global-typography-vdcbtn-letter-spacing, 2.6px); line-height: var(--e-global-typography-vdcbtn-line-height, 1); text-transform: var(--e-global-typography-vdcbtn-text-transform, uppercase); border: 1px solid var(--e-global-color-primary, #9e7727); border-radius: 2px; color: var(--e-global-color-accent, #2b2620); cursor: pointer; /* Le voile qui descend, comme sur les boutons Creative Button. Un n'accepte pas de ::after : le voile est donc un dégradé plein posé en calque, dont on anime la hauteur via background-size. Le fond or reste dessous, dans le même raccourci. */ background: linear-gradient(var(--e-global-color-accent, #2b2620), var(--e-global-color-accent, #2b2620)) top / 100% 0 no-repeat, var(--e-global-color-primary, #9e7727); transition: background-size .3s ease, color .3s ease, border-color .3s ease, box-shadow .3s ease; } .wpcf7-form input[type="submit"]:hover, .wpcf7-form input[type="submit"]:focus-visible { background-size: 100% 100%; border-color: var(--e-global-color-accent, #2b2620); color: var(--e-global-color-vdccream, #f6f0e5); box-shadow: 0 10px 24px -8px rgba(43, 38, 32, .38); } /* Messages de retour */ .wpcf7 form .wpcf7-response-output { margin: 22px 0 0; padding: 14px 16px; border-radius: 2px; font-size: 13.5px; border-width: 1px; } .wpcf7 form.sent .wpcf7-response-output { border-color: var(--vdc-gold, #9e7727); } /* Le champ pot de miel ne doit jamais être visible ni focusable. */ .wpcf7-form .vdc-hp { position: absolute; left: -9999px; opacity: 0; } @media (max-width: 640px) { .wpcf7-form .vdc-field-row { grid-template-columns: 1fr; } }